feat(documentation): investigate and document cross component dom referencing

packages/components/src/components/post-icon/readme.md

@@ -33,6 +33,9 @@ some content
  - [post-mainnavigation](../post-mainnavigation)
  - [post-rating](../post-rating)
  - [post-tag](../post-tag)
+ - [post-test-button](../post-test-button)
+ - [post-test-button2](../post-test-button2)
+ - [post-test-button3](../post-test-button3)
 
 ### Graph
 ```mermaid
@@ -48,6 +51,9 @@ graph TD;
   post-mainnavigation --> post-icon
   post-rating --> post-icon
   post-tag --> post-icon
+  post-test-button --> post-icon
+  post-test-button2 --> post-icon
+  post-test-button3 --> post-icon
   style post-icon fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

packages/components/src/components/post-test-button-control/post-test-button-control.scss

@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';

packages/components/src/components/post-test-button-control/post-test-button-control.tsx

@@ -0,0 +1,42 @@
+import { Component, h, Host, Element } from '@stencil/core';
+
+@Component({
+  tag: 'post-test-button-control',
+  styleUrl: 'post-test-button-control.scss',
+  shadow: true,
+})
+export class PostTestButtonControl {
+  @Element() hostEl: HTMLPostTestButtonControlElement;
+  private internalEl: HTMLElement;
+
+  private readonly handleToggleClick = () => {
+    if (this.hostEl && this.internalEl) {
+      const timestamp = Date.now();
+      this.internalEl.innerHTML = `<p>Controlled Text shown at ${timestamp}.</p>`;
+    }
+  };
+
+  render() {
+    return (
+      <Host
+        role="button"
+        tabindex="0"
+        aria-expanded="false"
+        aria-controls="text2"
+        onClick={this.handleToggleClick}
+      >
+        Toggle Text
+        <div
+          class="btn btn-primary"
+          aria-live="assertive"
+          id="text2"
+          ref={el => {
+            if (el) this.internalEl = el as HTMLElement;
+          }}
+        >
+          <p>Controlled Text shown at xxxxxxxxxxx.</p>
+        </div>
+      </Host>
+    );
+  }
+}

packages/components/src/components/post-test-button-control/readme.md

@@ -0,0 +1,10 @@
+# post-test-form
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/components/src/components/post-test-button/post-test-button.scss

@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';

packages/components/src/components/post-test-button/post-test-button.tsx

@@ -0,0 +1,38 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+import { version } from '@root/package.json';
+
+@Component({
+  tag: 'post-test-button',
+  styleUrl: 'post-test-button.scss',
+  shadow: true,
+})
+export class PostTestButton {
+  /**
+   * Defines the ariaLabelledbyId
+   */
+  @Prop() ariaLabelledbyId?: string;
+
+  /**
+   * Defines the ariaDescribedbyId
+   */
+  @Prop() ariaDescribedbyId?: string;
+
+  render() {
+    return (
+      // Shadow DOM - Same Shadow DOM
+      <Host
+        data-version={version}
+        class="btn btn-primary"
+        role="button"
+        tabindex="0"
+        aria-labelledby={this.ariaLabelledbyId}
+        aria-describedby={this.ariaDescribedbyId}
+      >
+        <slot name="label-slot"></slot>
+        <div>
+          <post-icon name="1022"></post-icon>
+        </div>
+      </Host>
+    );
+  }
+}

packages/components/src/components/post-test-button/readme.md

@@ -0,0 +1,31 @@
+# post-test-form
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property            | Attribute             | Description                   | Type     | Default     |
+| ------------------- | --------------------- | ----------------------------- | -------- | ----------- |
+| `ariaDescribedbyId` | `aria-describedby-id` | Defines the ariaDescribedbyId | `string` | `undefined` |
+| `ariaLabelledbyId`  | `aria-labelledby-id`  | Defines the ariaLabelledbyId  | `string` | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- [post-icon](../post-icon)
+
+### Graph
+```mermaid
+graph TD;
+  post-test-button --> post-icon
+  style post-test-button fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/components/src/components/post-test-button2/post-test-button2.scss

@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';

packages/components/src/components/post-test-button2/post-test-button2.tsx

@@ -0,0 +1,64 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+import { version } from '@root/package.json';
+
+@Component({
+  tag: 'post-test-button2',
+  styleUrl: 'post-test-button2.scss',
+  shadow: { delegatesFocus: true },
+})
+export class PostTestButton2 {
+  private internalEl: HTMLElement;
+  /**
+   * Defines the selected workaround
+   */
+  @Prop() workaround?: string;
+
+  /**
+   * Defines the selected ariaLabelledbyId
+   */
+  @Prop() ariaLabelledbyId?: string;
+
+  /**
+   * Defines the selected ariaDescribedbyId
+   */
+  @Prop() ariaDescribedbyId?: string;
+
+  private setProperties() {
+    if (this.internalEl) {
+      const arialabelEl = document.querySelector(`[id=${this.ariaLabelledbyId}]`);
+      const ariadescEl = document.querySelector(`[id=${this.ariaDescribedbyId}]`);
+
+      if (this.workaround == 'ariaLabelledByElements') {
+        this.internalEl.ariaLabelledByElements = [arialabelEl];
+      } else {
+        this.internalEl.ariaLabelledByElements = [];
+      }
+
+      if (this.workaround == 'ariaDescribedByElements') {
+        this.internalEl.ariaDescribedByElements = [ariadescEl];
+      } else {
+        this.internalEl.ariaDescribedByElements = [];
+      }
+    }
+  }
+
+  componentDidLoad() {
+    this.setProperties();
+  }
+
+  componentDidUpdate() {
+    this.setProperties();
+  }
+
+  render() {
+    return (
+      // Shadow DOM - Same Shadow DOM
+      <Host data-version={version} class="btn btn-primary">
+        <slot name="label-slot"></slot>
+        <div ref={el => (this.internalEl = el as HTMLElement)} role="button" tabindex="0">
+          <post-icon name="1022"></post-icon>
+        </div>
+      </Host>
+    );
+  }
+}

packages/components/src/components/post-test-button2/readme.md

@@ -0,0 +1,32 @@
+# post-test-form
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property            | Attribute             | Description                            | Type     | Default     |
+| ------------------- | --------------------- | -------------------------------------- | -------- | ----------- |
+| `ariaDescribedbyId` | `aria-describedby-id` | Defines the selected ariaDescribedbyId | `string` | `undefined` |
+| `ariaLabelledbyId`  | `aria-labelledby-id`  | Defines the selected ariaLabelledbyId  | `string` | `undefined` |
+| `workaround`        | `workaround`          | Defines the selected workaround        | `string` | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- [post-icon](../post-icon)
+
+### Graph
+```mermaid
+graph TD;
+  post-test-button2 --> post-icon
+  style post-test-button2 fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/components/src/components/post-test-button3/post-test-button3.scss

@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';

packages/components/src/components/post-test-button3/post-test-button3.tsx

@@ -0,0 +1,73 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+import { version } from '@root/package.json';
+
+@Component({
+  tag: 'post-test-button3',
+  styleUrl: 'post-test-button3.scss',
+  shadow: true,
+})
+export class PostTestButton3 {
+  /**
+   * Defines the ariaLabelledbyId
+   */
+  @Prop() ariaLabelledbyId?: string;
+
+  /**
+   * Defines the ariaDescribedbyId
+   */
+  @Prop() ariaDescribedbyId?: string;
+
+  private slotEl: HTMLSlotElement | undefined;
+  private internalEl: HTMLElement | undefined;
+
+  /**
+   * Defines the selected workaround
+   */
+  @Prop() workaround?: string;
+
+  private setProperties() {
+    if (this.slotEl && this.internalEl) {
+      if (this.workaround == 'ariaLabelledByElements') {
+        const assignedElements = this.slotEl.assignedElements({ flatten: true });
+        const labelElement = assignedElements[0];
+        console.log(labelElement);
+        if (labelElement) {
+          this.internalEl.ariaLabelledByElements = [labelElement];
+        } else {
+          this.internalEl.ariaLabelledByElements = [];
+        }
+      }
+
+      if (this.workaround == 'ariaDescribedByElements') {
+        const assignedElements = this.slotEl.assignedElements({ flatten: true });
+        const descElement = assignedElements[0];
+
+        if (descElement) {
+          this.internalEl.ariaDescribedByElements = [descElement];
+        } else {
+          this.internalEl.ariaDescribedByElements = [];
+        }
+      }
+    }
+  }
+
+  componentDidLoad() {
+    this.setProperties();
+  }
+
+  componentDidUpdate() {
+    this.setProperties();
+  }
+
+  render() {
+    return (
+      // Shadow DOM - Same Shadow DOM
+      <Host data-version={version} class="btn btn-primary">
+        <slot name="label-slot" ref={el => (this.slotEl = el as HTMLSlotElement)}></slot>
+        <div ref={el => (this.internalEl = el as HTMLElement)} role="button" tabindex="0">
+          <post-icon name="1022"></post-icon>
+        </div>
+      </Host>
+    );
+  }
+}

packages/components/src/components/post-test-button3/readme.md

@@ -0,0 +1,32 @@
+# post-test-form
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property            | Attribute             | Description                     | Type     | Default     |
+| ------------------- | --------------------- | ------------------------------- | -------- | ----------- |
+| `ariaDescribedbyId` | `aria-describedby-id` | Defines the ariaDescribedbyId   | `string` | `undefined` |
+| `ariaLabelledbyId`  | `aria-labelledby-id`  | Defines the ariaLabelledbyId    | `string` | `undefined` |
+| `workaround`        | `workaround`          | Defines the selected workaround | `string` | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- [post-icon](../post-icon)
+
+### Graph
+```mermaid
+graph TD;
+  post-test-button3 --> post-icon
+  style post-test-button3 fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/components/src/components/post-test-div/post-test-div.scss

@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';

packages/components/src/components/post-test-div/post-test-div.tsx

@@ -0,0 +1,16 @@
+import { Component, h, Host } from '@stencil/core';
+
+@Component({
+  tag: 'post-test-div',
+  styleUrl: 'post-test-div.scss',
+  shadow: true,
+})
+export class PostTestDiv {
+  render() {
+    return (
+      <Host role="list" tabindex="0">
+        <slot name="list-items"></slot>
+      </Host>
+    );
+  }
+}

packages/components/src/components/post-test-div/readme.md

@@ -0,0 +1,10 @@
+# post-test-form
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/components/src/components/post-test-label/post-test-label.scss

@@ -0,0 +1 @@
+@use '@swisspost/design-system-styles/post-default.scss';