@lmvz-ds/components 0.14.1 → 0.16.0

package/dist/collection/components/lmvz-menuitem/lmvz-menuitem.js

@@ -4,7 +4,9 @@ import { ElementActivationController } from "../../utils/aria/element-activation
 import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
 export class LmvzMenuItem extends ReactiveControllerHost {
     el;
-    validationEl = this.el;
+    get validationEl() {
+        return this.el;
+    }
     validationSlot;
     get role() {
         return 'menuitem';
@@ -19,7 +21,7 @@ export class LmvzMenuItem extends ReactiveControllerHost {
         this.addController(new ElementActivationController(this));
     }
     render() {
-        return (h(Host, { key: 'a022a198618ac628cb39c97b29cf0c332b522e79' }, h("slot", { key: 'c8dab82b31b49db3d966cacb1cf9ef5cb1763797', ref: e => (this.validationSlot = e) })));
+        return (h(Host, { key: '1a37d2873a29c713cf95c60070c8dcf045c9f8fc' }, h("slot", { key: 'c6578bcfdb9f0cebad095d80f0ed63cf663bf91e', ref: (e) => (this.validationSlot = e) })));
     }
     static get is() { return "lmvz-menuitem"; }
     static get encapsulation() { return "scoped"; }
@@ -97,3 +99,4 @@ export class LmvzMenuItem extends ReactiveControllerHost {
     }
     static get elementRef() { return "el"; }
 }
+//# sourceMappingURL=lmvz-menuitem.js.map

package/dist/collection/components/lmvz-menuitem/lmvz-menuitem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lmvz-menuitem.js","sourceRoot":"","sources":["../../../../src/components/lmvz-menuitem/lmvz-menuitem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAqB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAC5F,OAAO,EAAE,wBAAwB,EAA2B,MAAM,6CAA6C,CAAC;AAChH,OAAO,EAAE,2BAA2B,EAA8B,MAAM,gDAAgD,CAAC;AACzH,OAAO,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAU9E,MAAM,OAAO,YAAa,SAAQ,sBAAsB;IAClC,EAAE,CAAe;IAErC,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,EAAE,CAAC;IACjB,CAAC;IAED,cAAc,CAAmB;IAEjC,IAA6B,IAAI;QAC/B,OAAO,UAAU,CAAC;IACpB,CAAC;IACD,IAAoD,EAAE;QACpD,OAAO,CAAC,CAAC;IACX,CAAC;IAKQ,cAAc,CAAsB;IAE7C;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,aAAa,CAAC,IAAI,wBAAwB,CAAC,IAAI,EAAE,EAAE,gBAAgB,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;QACrF,IAAI,CAAC,aAAa,CAAC,IAAI,2BAA2B,CAAC,IAAI,CAAC,CAAC,CAAC;KAC3D;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,GAA0E,CAChH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, type EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { AriaValidationController, type AriaValidationHost } from '../../utils/aria/aria-validation-controller';\nimport { ElementActivationController, type ElementActivationHost } from '../../utils/aria/element-activation-controller';\nimport { ReactiveControllerHost } from '../../utils/reactive-controller-host';\n\n/**\n * A menu item component to be used within the `lmvz-header` component's navigation slots.\n */\n@Component({\n  tag: 'lmvz-menuitem',\n  styleUrl: './lmvz-menuitem.css',\n  scoped: true,\n})\nexport class LmvzMenuItem extends ReactiveControllerHost implements AriaValidationHost, ElementActivationHost {\n  @Element() readonly el!: HTMLElement;\n\n  get validationEl() {\n    return this.el;\n  }\n\n  validationSlot?: HTMLSlotElement;\n\n  @Prop({ reflect: true }) get role() {\n    return 'menuitem';\n  }\n  @Prop({ reflect: true, attribute: 'tabindex' }) get ti() {\n    return 0;\n  }\n\n  /**\n   * Event emitted when the menu item is activated, either by a click or by pressing \"Enter\" or \"Space\" while the menu item is focused.\n   */\n  @Event() lmvzActivation!: EventEmitter<void>;\n\n  constructor() {\n    super();\n    this.addController(new AriaValidationController(this, { validationTiming: 'slot' }));\n    this.addController(new ElementActivationController(this));\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot ref={(e) => (this.validationSlot = e)}>{/* The content of the menu item will be provided by the user */}</slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/lmvz-select/lmvz-select.css

@@ -0,0 +1,197 @@
+
+@layer /** */
+    /**
+     * reset: CSS resets for browser defaults or expectedly problematic 3rd party libraries
+     */
+    lmvz-ds.reset,
+
+    /**
+     * theme: tokens, typography, etc. 
+     */
+    lmvz-ds.theme,
+
+    /**
+     * components: overrides for UI components and CSS-only component implementation
+     *      Design System components should append their styles into this layer at definition! 
+     */
+    lmvz-ds.components,
+
+    /**
+     * overrides: utility classes, helpers, product- or application-specific styles.
+     *      Usually, you do not want to add DS util styles to a layer directly.
+     *      Only place those styles here, that are being exported as part of a theme. 
+     */
+    lmvz-ds.overrides;
+/**
+ * This defines the order of our lmvz-ds' CSS layers.
+ * Important: Always import this file _before_ layering your own styles!
+ */
+@layer lmvz-ds.theme {
+@font-face {
+  font-family: Router;
+  src:
+    local('Router-Book'),
+    url('/assets/fonts/Router-Book.woff') format('woff'),
+    local('Router');
+  font-weight: 400 normal;
+}
+
+@font-face {
+  font-family: Router;
+  src:
+    local('Router-Medium'),
+    url('/assets/fonts/Router-Medium.woff') format('woff'),
+    local('Router');
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: Router;
+  src:
+    local('Router-Bold'),
+    url('/assets/fonts/Router-Bold.woff') format('woff'),
+    local('Router');
+  font-weight: 700 bold;
+}
+
+}
+:host {
+  display: block;
+  font-family: var(--lmvz-global-font-family-default, Router);
+  /* Extra top space to accommodate the floating label */
+
+  --lmvz-internal-select-floating-label-top-offset: 0.375rem;
+
+  padding-top: var(--lmvz-internal-select-floating-label-top-offset);
+
+  /* Component variable mapping */
+  --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px);
+  --lmvz-select-bg: var(--lmvz-semantic-color-int-secondary, #f0f0f0);
+  --lmvz-select-bg-hover: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);
+  --lmvz-select-text-color: var(--lmvz-semantic-color-int-on-secondary, #000000);
+  --lmvz-select-label-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);
+  --lmvz-select-padding-x: var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
+  --lmvz-select-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
+  --lmvz-select-height: 40px;
+  --lmvz-select-label-font-size: var(--lmvz-component-component-typography-body-sm-font-size, 0.75rem);
+  --lmvz-select-label-top-offset: calc(var(--lmvz-internal-select-floating-label-top-offset) * -1);
+  --lmvz-select-label-minimized-padding-x: 4px;
+  --lmvz-select-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%);
+  --lmvz-select-helper-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a);
+  --lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-selected, #0e7ab4);
+  --lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+}
+.select-wrapper {
+  position: relative;
+  height: var(--lmvz-select-height);
+}
+/* Floating label – positioned above the trigger when a value is selected */
+label {
+  position: absolute;
+  top: 50%;
+  left: var(--lmvz-select-padding-x);
+  font-size: var(--lmvz-select-label-font-size);
+  color: var(--lmvz-select-label-color);
+  line-height: normal;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 2;
+  transform: translateY(-50%);
+  transform-origin: left top;
+  transition:
+    top 0.2s ease-out,
+    transform 0.2s ease-out,
+    opacity 0.2s ease-out,
+    padding 0.2s ease-out;
+}
+label.assistive-label {
+  opacity: 0;
+  padding: 0;
+}
+label.floating-label {
+  top: var(--lmvz-select-label-top-offset);
+  transform: translateY(0) scale(0.85);
+  left: calc(var(--lmvz-select-padding-x) - 2px);
+  background-color: var(--lmvz-select-bg);
+  padding: 0 var(--lmvz-select-label-minimized-padding-x);
+  opacity: 1;
+  font-weight: 500;
+}
+label > span[aria-hidden='true'],
+div[aria-hidden='true'] > span:first-child > span[aria-hidden='true'] {
+  color: var(--lmvz-select-error-color);
+  margin-left: 2px;
+  display: inline-block;
+  line-height: 0;
+  vertical-align: middle;
+}
+/* Visual pill trigger */
+div[aria-hidden] {
+  display: flex;
+  align-items: center;
+  gap: var(--lmvz-select-gap);
+  height: 100%;
+  padding: 0 var(--lmvz-select-padding-x);
+  border-radius: var(--lmvz-select-radius);
+  background-color: var(--lmvz-select-bg);
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+  transition: background-color 0.15s ease;
+}
+:host(:not([disabled])) .select-wrapper:hover div[aria-hidden] {
+  background-color: var(--lmvz-select-bg-hover);
+}
+.select-wrapper:focus-within div[aria-hidden] {
+  outline: 2px solid var(--lmvz-select-focus-color);
+  outline-offset: 2px;
+}
+div[aria-hidden] > span:first-child {
+  flex: 1 0 0;
+  font-size: var(--lmvz-component-component-typography-body-md-font-size, 0.875rem);
+  font-weight: var(--lmvz-global-font-weight-500, 500);
+  color: var(--lmvz-select-text-color);
+  line-height: 1.4;
+  letter-spacing: var(--lmvz-component-body-md-letter-spacing, 0);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+div[aria-hidden] > span:last-child {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+img {
+  display: block;
+  width: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
+  height: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
+}
+/* Native select – absolutely covers the trigger, invisible, intercepts clicks */
+select {
+  appearance: none;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 2;
+  border: none;
+  background: transparent;
+  margin: 0;
+  padding: 0;
+}
+:host([disabled]) .select-wrapper {
+  opacity: var(--lmvz-select-disabled-opacity);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+[role='status'] {
+  margin-top: 4px;
+  padding-left: var(--lmvz-select-padding-x);
+  font-size: var(--lmvz-select-label-font-size);
+  color: var(--lmvz-select-helper-color);
+  line-height: normal;
+}

package/dist/collection/components/lmvz-select/lmvz-select.js

@@ -0,0 +1,224 @@
+import { h, Host } from "@stencil/core";
+import chevronDownSvg from "../../assets/icons/chevron-down.svg";
+import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
+import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+let selectIdCounter = 0;
+export class LmvzSelect extends ReactiveControllerHost {
+    el;
+    get validationEl() {
+        return this.el;
+    }
+    selectId = `lmvz-select-${selectIdCounter++}`;
+    nativeSelectEl;
+    constructor() {
+        super();
+        this.addController(new AriaValidationController(this));
+    }
+    lmvzChange;
+    value;
+    label;
+    helperText;
+    disabled = false;
+    required = false;
+    name;
+    selectedLabel = '';
+    get hasValue() {
+        return Boolean(this.value);
+    }
+    componentDidLoad() {
+        this.syncSelectedLabel();
+        super.componentDidLoad();
+    }
+    handleValueChange(newValue) {
+        if (this.nativeSelectEl && this.nativeSelectEl.value !== (newValue ?? '')) {
+            this.nativeSelectEl.value = newValue ?? '';
+        }
+        this.syncSelectedLabel();
+    }
+    syncSelectedLabel() {
+        if (!this.nativeSelectEl)
+            return;
+        const idx = this.nativeSelectEl.selectedIndex;
+        this.selectedLabel = idx >= 0 ? (this.nativeSelectEl.options[idx]?.text ?? '') : '';
+    }
+    handleChange = (event) => {
+        const select = event.target;
+        this.value = select.value;
+        this.syncSelectedLabel();
+        this.lmvzChange.emit(select.value);
+    };
+    render() {
+        const hasValue = this.hasValue;
+        const shouldShowLabel = hasValue;
+        return (h(Host, { key: '7d1abb943f79e90451b43c9221801b80a2f61346' }, h("div", { key: 'ded3e45246ab38e89d444c59239cdc63a2c4d4fc', class: "select-wrapper" }, h("label", { key: 'cb68ff79976c2fb55d4cc827f9e90ba2597a8a43', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: 'ab77eaea1645b95d90f00ffb609bbd7a1704f7bc', "aria-hidden": "true" }, " *")), h("div", { key: '45cee00478a6cc31c10dddf69d8e6687fc8f440d', "aria-hidden": "true" }, h("span", { key: '0c5d425ea8843234aa6abd94a207377e2a675686' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: 'ebef5322371ee0253b50dd801b80cbb6402c067a', "aria-hidden": "true" }, " *")), h("span", { key: 'a12d31dc29563444f728133f181b48914d31705b' }, h("img", { key: 'dd3f175d1ca2b9ccc6c2bfa2075e5da62016a896', src: chevronDownSvg, alt: "" }))), h("select", { key: 'a196f3b824177d1b45971c38341bf6a2939dda82', id: this.selectId, ref: (el) => (this.nativeSelectEl = el), name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.label, onChange: this.handleChange }, !hasValue && h("option", { key: '536cc559def0e9ffa4b2150693ece9a597c238d1', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: 'ad9fed96b9f8c1d8257511bb1d5ab5ee756973ce' }))), this.helperText && h("div", { key: '4723b44d781c900be5aae7ece2a0be04b6c744b9', role: "status" }, this.helperText)));
+    }
+    static get is() { return "lmvz-select"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./lmvz-select.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text displayed as a placeholder when no value is selected,\nand floated above the trigger when a value is present."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text displayed below the select field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the select is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether a value is required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute passed to the native select for form submission."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedLabel": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "lmvzChange",
+                "name": "lmvzChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user selects a new option. Detail contains the new value."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+}
+//# sourceMappingURL=lmvz-select.js.map

package/dist/collection/components/lmvz-select/lmvz-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lmvz-select.js","sourceRoot":"","sources":["../../../../src/components/lmvz-select/lmvz-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, type EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport chevronDownSvg from '../../assets/icons/chevron-down.svg';\nimport { AriaValidationController, type AriaValidationHost } from '../../utils/aria/aria-validation-controller';\nimport { ReactiveControllerHost } from '../../utils/reactive-controller-host';\n\nlet selectIdCounter = 0;\n\n/**\n * Select component with floating label and pill-shaped trigger.\n * Wraps a native `<select>` element for full keyboard and form support.\n *\n * @example\n * ```html\n * <lmvz-select label=\"Country\" name=\"country\">\n *   <option value=\"ch\">Switzerland</option>\n *   <option value=\"de\">Germany</option>\n *   <option value=\"at\">Austria</option>\n * </lmvz-select>\n * ```\n *\n * @example\n * ```typescript\n * const select = document.querySelector('lmvz-select');\n * select.addEventListener('lmvzChange', (e) => console.log(e.detail));\n * ```\n *\n * @slot default - Native `<option>` or `<optgroup>` elements.\n */\n@Component({\n  tag: 'lmvz-select',\n  styleUrl: './lmvz-select.css',\n  scoped: true,\n})\nexport class LmvzSelect extends ReactiveControllerHost implements AriaValidationHost {\n  @Element() readonly el!: HTMLElement;\n  get validationEl() {\n    return this.el;\n  }\n\n  private selectId = `lmvz-select-${selectIdCounter++}`;\n  private nativeSelectEl?: HTMLSelectElement;\n\n  constructor() {\n    super();\n    this.addController(new AriaValidationController(this));\n  }\n\n  /**\n   * Emitted when the user selects a new option. Detail contains the new value.\n   */\n  @Event() lmvzChange!: EventEmitter<string>;\n\n  /**\n   * Currently selected value.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Label text displayed as a placeholder when no value is selected,\n   * and floated above the trigger when a value is present.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Helper text displayed below the select field.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Whether the select is disabled.\n   * @default false\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Whether a value is required.\n   * @default false\n   */\n  @Prop({ reflect: true }) required = false;\n\n  /**\n   * Name attribute passed to the native select for form submission.\n   */\n  @Prop() name?: string;\n\n  @State() private selectedLabel = '';\n\n  private get hasValue() {\n    return Boolean(this.value);\n  }\n\n  override componentDidLoad() {\n    this.syncSelectedLabel();\n    super.componentDidLoad();\n  }\n\n  @Watch('value')\n  protected handleValueChange(newValue: string | undefined) {\n    if (this.nativeSelectEl && this.nativeSelectEl.value !== (newValue ?? '')) {\n      this.nativeSelectEl.value = newValue ?? '';\n    }\n    this.syncSelectedLabel();\n  }\n\n  private syncSelectedLabel() {\n    if (!this.nativeSelectEl) return;\n    const idx = this.nativeSelectEl.selectedIndex;\n    this.selectedLabel = idx >= 0 ? (this.nativeSelectEl.options[idx]?.text ?? '') : '';\n  }\n\n  private handleChange = (event: Event) => {\n    const select = event.target as HTMLSelectElement;\n    this.value = select.value;\n    this.syncSelectedLabel();\n    this.lmvzChange.emit(select.value);\n  };\n\n  render() {\n    const hasValue = this.hasValue;\n    const shouldShowLabel = hasValue;\n\n    return (\n      <Host>\n        <div class=\"select-wrapper\">\n          <label htmlFor={this.selectId} class={shouldShowLabel ? 'floating-label' : 'assistive-label'}>\n            {this.label}\n            {this.required && shouldShowLabel && <span aria-hidden=\"true\"> *</span>}\n          </label>\n\n          <div aria-hidden=\"true\">\n            <span>\n              {hasValue ? this.selectedLabel : this.label}\n              {this.required && !hasValue && <span aria-hidden=\"true\"> *</span>}\n            </span>\n            <span>\n              <img src={chevronDownSvg} alt=\"\" />\n            </span>\n          </div>\n\n          <select\n            id={this.selectId}\n            ref={(el) => (this.nativeSelectEl = el)}\n            name={this.name}\n            disabled={this.disabled}\n            required={this.required}\n            aria-label={this.label}\n            onChange={this.handleChange}\n          >\n            {!hasValue && <option value=\"\" disabled selected hidden></option>}\n            <slot />\n          </select>\n        </div>\n\n        {this.helperText && <div role=\"status\">{this.helperText}</div>}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/index.js

@@ -2,3 +2,4 @@ export * from '@lmvz-ds/aria-validation';
 export * from './api';
 export * from './components/lmvz-icon/public';
 export * from './utils/public';
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAUA,cAAc,0BAA0B,CAAC;AAGzC,cAAc,OAAO,CAAC;AAItB,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gBAAgB,CAAC","sourcesContent":["/**\n * @fileoverview entry point for your component library\n *\n * This is the entry point for your component library. Use this file to export utilities,\n * constants or data structure that accompany your components.\n *\n * DO NOT use this file to export your components. Instead, use the recommended approaches\n * to consume components of this package as outlined in the `README.md`.\n */\n\nexport * from '@lmvz-ds/aria-validation';\nexport type * from './components.d.ts';\n\nexport * from './api';\n// the following are _currently_ not implicitly exported by Stencil, but we want to export them for better DX in Storybook stories and tests\nexport type { LmvzDS, Typography } from './api';\n\nexport * from './components/lmvz-icon/public';\nexport * from './utils/public';\n"]}

package/dist/collection/integration/header-integration.js

@@ -15,11 +15,11 @@ export class HeaderIntegration {
         this.activeNav = navId;
     }
     render() {
-        return (h(Host, { key: '75fb60387c32835c7b7ef3cc30db812abfb9367e' }, h("lmvz-header", { key: '91149faea6215e9f1aed260462bbeb230b73b855', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: 'd5d7dcc462e262c511eff6b90bd798d514632057', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '4ac381b41e28f822c78da0056dac5e246f7e918b', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: '8ae037a821128c3cb2f36373c449636e2bfcc007', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '6c0fec0e451812f0721d426bf6b991b5fb25d9cd', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: 'c43f7d2bbf035f2375b3def77cecc397b3cd8de6', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '9c9c4d86c5027901c8cdfa0d66d615342034ff7b', icon: "book" }), "Deutsch 7"), h("lmvz-menuitem", { key: '7a91ed4e5aaf13a0d3e03e183dcf57f9c3d0f322', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: 'f1dea525f81b168de5db345d5f1dc978e63fbda8', icon: "book" }), "Mathe 2"), h("lmvz-menuitem", { key: '7fafd65317c833c22888ab57a28d0f28f314e92b', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: '47b11e1ee520fd0898052071b52d1a89e5b54d43', icon: "cog" }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: '42d5fc054af9032a5f0ae185b2db2ef1fb565b11', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: 'f962c1a573e72ee5e1ec67195e26be3b59185efb', icon: "cog" })), h("lmvz-button", { key: '31675becc7bc819577f9aeda2c474637a65e5949', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: '87f52382c676820e8e5d981fc4ac7824b892e923', icon: "user" }))), h("main", { key: 'b5949edfd76c42f5e654cf04a6e1f5cd3654ed0d' }, h("h1", { key: '75228585f485f33349c780ad82b22449811761ec' }, "Content"))));
+        return (h(Host, { key: 'c70b22cccc010b6a18ec6003e31b9fb905cd669e' }, h("lmvz-header", { key: 'bf4f3a9c603dcfeee519dc1e78d8e9cd6e836f98', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: '64f3b9e2a6d5bb7feab15169d0de61e64a4002f1', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '2af5799904621d8b48640694a16f3858b0a5ccf9', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: '54ed8090f68463bea9a18b290b1a1e707259119f', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '98b8d121e0fca6b0630bc664cbfeb9307ce5b7e5', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: 'c656b1a95940f1e14cf905a20c4679e92ca456ee', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: 'd9d16fe6d1d0ac183724881f7f1b41ce04f3c607', icon: "book" }), "Deutsch 7"), h("lmvz-menuitem", { key: '7aaf7887accf7fc388fe425718bdf2f703686f98', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: 'e2791405657a2de9527057f6c6767260cd9d21af', icon: "book" }), "Mathe 2"), h("lmvz-menuitem", { key: 'c99fd516f891ae6bd6a76c92e504cf17ec3c0820', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: '78d9563d8c9a78f6b7bee0ad79ac0c51d8575790', icon: "cog" }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: '225f8207ee869d5e37bb9d6dbd7881a6fe636637', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: '0d89fcb8bfbb3918ff14d783cfc087c658df151a', icon: "cog" })), h("lmvz-button", { key: '2637addd2ee7158087d6ab50808e6f900acabbf2', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: 'c927e171d6f29474f18e2c222fff50c4947a0b3b', icon: "user" })))));
     }
     static get is() { return "header-integration"; }
     static get encapsulation() { return "shadow"; }
-    static get styles() { return ":host {\n      display: block;\n      min-height: 100vh;\n      background: var(--lmvz-color-spec-bg-outer-view);\n    }\n\n    .active button {\n      background-color: var(--lmvz-semantic-color-status-selected);\n    }\n\n    main {\n      padding: var(--lmvz-component-box-padding-y) var(--lmvz-component-box-padding-x);\n    }"; }
+    static get styles() { return ".active button {\n      background-color: var(--lmvz-semantic-color-status-selected);\n    }"; }
     static get properties() {
         return {
             "activeNav": {
@@ -27,11 +27,11 @@ export class HeaderIntegration {
                 "mutable": true,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -44,3 +44,4 @@ export class HeaderIntegration {
         };
     }
 }
+//# sourceMappingURL=header-integration.js.map

package/dist/collection/integration/header-integration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-integration.js","sourceRoot":"","sources":["../../../src/integration/header-integration.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAWzD,MAAM,OAAO,iBAAiB;IACH,SAAS,CAAU;IAEpC,QAAQ,CAAC,KAAwB;QACvC,MAAM,MAAM,GAAG,KAAK,CAAC,aAAsC,CAAC;QAC5D,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,sBAAsB,CAAuB,CAAC;QAC7E,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,MAAM,KAAK,GAAG,OAAO,CAAC,EAAE,CAAC;QACzB,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,CAAC,IAAI,CAAC,+BAA+B,EAAE,OAAO,CAAC,CAAC;YACvD,OAAO;QACT,CAAC;QAED,OAAO,CAAC,GAAG,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC;QAC3C,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,oEAAa,aAAa,EAAE,IAAI,CAAC,SAAS;gBAExC,sEAAe,IAAI,EAAC,aAAa,EAAC,EAAE,EAAC,YAAY,EAAC,gBAAgB,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;oBAC1F,0DAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB,sEAAe,IAAI,EAAC,aAAa,EAAC,EAAE,EAAC,YAAY,EAAC,gBAAgB,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;oBAC1F,0DAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB,sEAAe,IAAI,EAAC,wBAAwB;oBAC1C,kEAAW,IAAI,EAAC,MAAM,GAAa;gCACrB;gBAChB,sEAAe,IAAI,EAAC,wBAAwB;oBAC1C,kEAAW,IAAI,EAAC,MAAM,GAAa;8BACrB;gBAChB,sEAAe,IAAI,EAAC,wBAAwB;oBAC1C,kEAAW,IAAI,EAAC,KAAK,GAAa;0CACpB;gBAChB,sEAAe,IAAI,EAAC,wBAAwB,gBAAY,eAAe;oBACrE,kEAAW,IAAI,EAAC,KAAK,GAAa,CACpB;gBAEhB,oEAAa,IAAI,EAAC,SAAS,gBAAY,eAAe;oBACpD,kEAAW,IAAI,EAAC,MAAM,GAAa,CACvB,CACF,CACT,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'header-integration',\n  styles: `\n    .active button {\n      background-color: var(--lmvz-semantic-color-status-selected);\n    }\n  `,\n  shadow: true,\n})\nexport class HeaderIntegration {\n  @Prop({ mutable: true }) activeNav?: string;\n\n  private activate(event: CustomEvent<void>) {\n    const target = event.currentTarget as HTMLLmvzButtonElement;\n    const navItem = target.closest('[slot=\"nav-primary\"]') as HTMLElement | null;\n    if (!navItem) return;\n\n    const navId = navItem.id;\n    if (!navId) {\n      console.warn('Nav item does not have an id:', navItem);\n      return;\n    }\n\n    console.log('Activating nav item:', navId);\n    this.activeNav = navId;\n  }\n\n  render() {\n    return (\n      <Host>\n        <lmvz-header lmvzActiveNav={this.activeNav}>\n          {/* <lmvz-icon icon=\"Logo\" slot=\"brand\" aria-hidden></lmvz-icon> */}\n          <lmvz-menuitem slot=\"nav-primary\" id=\"lehrmittel\" onLmvzActivation={this.activate.bind(this)}>\n            <a href=\"#\">Lehrmittel</a>\n          </lmvz-menuitem>\n          <lmvz-menuitem slot=\"nav-primary\" id=\"verwaltung\" onLmvzActivation={this.activate.bind(this)}>\n            <a href=\"#\">Verwaltung</a>\n          </lmvz-menuitem>\n          <lmvz-menuitem slot=\"connect-nav-lehrmittel\">\n            <lmvz-icon icon=\"book\"></lmvz-icon>Deutsch 7\n          </lmvz-menuitem>\n          <lmvz-menuitem slot=\"connect-nav-lehrmittel\">\n            <lmvz-icon icon=\"book\"></lmvz-icon>Mathe 2\n          </lmvz-menuitem>\n          <lmvz-menuitem slot=\"connect-nav-verwaltung\">\n            <lmvz-icon icon=\"cog\"></lmvz-icon>iwas mit Verwaltung\n          </lmvz-menuitem>\n          <lmvz-menuitem slot=\"connect-nav-verwaltung\" aria-label=\"Einstellungen\">\n            <lmvz-icon icon=\"cog\"></lmvz-icon>\n          </lmvz-menuitem>\n\n          <lmvz-button slot=\"actions\" aria-label=\"Benutzerkonto\">\n            <lmvz-icon icon=\"user\"></lmvz-icon>\n          </lmvz-button>\n        </lmvz-header>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/utils/aria/aria-validation-controller.js

@@ -144,3 +144,4 @@ export class AriaValidationController {
         this.visibilityObserver = undefined;
     }
 }
+//# sourceMappingURL=aria-validation-controller.js.map

package/dist/collection/utils/aria/aria-validation-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aria-validation-controller.js","sourceRoot":"","sources":["../../../../src/utils/aria/aria-validation-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qCAAqC,EACrC,oBAAoB,EACpB,uBAAuB,EACvB,eAAe,EAEf,iBAAiB,GAClB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AActC,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;IAChB,oBAAoB,EAAE,CAAC;AACzB,CAAC;AAcD,MAAM,OAAO,wBAAwB;IAgBhB;IACA;IAhBX,kBAAkB,CAAwB;IAC1C,aAAa,GAAG,KAAK,CAAC;IACtB,gBAAgB,GAAG,KAAK,CAAC;IACzB,aAAa,GAAG,KAAK,CAAC;IACtB,MAAM,CAAC,qBAAqB,GAA8B,EAAE,CAAC;IAErE,IAAI,QAAQ;QACV,OAAO,CAAC,uBAAuB,EAAE,CAAC;IACpC,CAAC;IAED,IAAY,iBAAiB;QAC3B,OAAO,IAAI,CAAC,MAAM,EAAE,cAAc,IAAI,KAAK,CAAC,KAAK,IAAI,iBAAiB,EAAE,CAAC;IAC3E,CAAC;IAED,YACmB,IAAwB,EACxB,MAAe;QADf,SAAI,GAAJ,IAAI,CAAoB;QACxB,WAAM,GAAN,MAAM,CAAS;IAC/B,CAAC;IAEa,qBAAqB,GAAG,GAAG,EAAE;QAC5C,IAAI,CAAC,uBAAuB,EAAE;YAAE,OAAO;QAEvC,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC,CAAC;IAEF,WAAW;QACT,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC1B,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YAClC,MAAM,CAAC,gBAAgB,CAAC,qCAAqC,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;QAC7F,CAAC;QAED,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,gBAAgB;YAAE,OAAO;QAExD,IAAI,IAAI,CAAC,MAAM,EAAE,gBAAgB,KAAK,MAAM,EAAE,CAAC;YAC7C,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,eAAe,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE,gBAAgB,KAAK,MAAM,EAAE,CAAC;YAC3F,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC7B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,aAAa;QACX,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,yBAAyB,EAAE,CAAC;QACjC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YAClC,MAAM,CAAC,mBAAmB,CAAC,qCAAqC,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;QAChG,CAAC;IACH,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC9F,CAAC;IAEO,qBAAqB;QAC3B,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACrB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY;gBAAE,OAAO;YAEpC,IAAI,CAAC,kBAAkB,GAAG,IAAI,oBAAoB,CAChD,CAAC,OAAO,EAAE,EAAE;gBACV,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;oBAC5B,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,IAAI,CAAC,YAAY;wBAAE,SAAS;oBACtD,IAAI,CAAC,KAAK,CAAC,cAAc;wBAAE,SAAS;oBAEpC,IAAI,CAAC,mBAAmB,EAAE,CAAC;oBAG3B,IAAI,CAAC,yBAAyB,EAAE,CAAC;gBACnC,CAAC;YACH,CAAC,EACD;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,aAAa;gBAC3C,UAAU,EAAE,KAAK;gBACjB,SAAS,EAAE,IAAI;aAChB,CACF,CAAC;YACF,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC1D,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,IAAI,CAAC,aAAa;YAAE,OAAO;QAEhC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,uBAAuB,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,gBAAgB,CAAC;YAAE,OAAO;QAEnG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,eAAe,EAAE;YAAE,OAAO;QAEvD,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,uBAAuB,EAAE;YAAE,OAAO;QAEvC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAE1B,eAAe,CAAC;YACd,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,OAAO,EAAE,wBAAwB,CAAC,qBAAqB,EAAE;YACrG,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE;gBAC7B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;gBAC7B,MAAM,WAAW,GAAI,IAAI,CAAC,IAA+B,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,OAAO,IAAI,SAAS,CAAC;gBAElH,IAAI,KAAK,EAAE,CAAC;oBACV,OAAO,CAAC,KAAK,CAAC,gCAAgC,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC;oBACpE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,OAAO,EAAE,CAAC;wBACrC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBACzB,CAAC;oBACD,OAAO;gBACT,CAAC;gBAED,MAAM,OAAO,GAAG,CAAC,WAAW,CAAC,CAAC;gBAE9B,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC;oBAChC,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;wBAC3B,OAAO,CAAC,GAAG,CAAC,GAAG,OAAO,EAAE,wBAAwB,CAAC,CAAC;wBAClD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,OAAO,EAAE,CAAC;4BACrC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;wBACzB,CAAC;oBACH,CAAC;oBACD,OAAO;gBACT,CAAC;gBAED,MAAM,KAAK,GAAG,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC;gBACxC,MAAM,KAAK,GAAG,CAAC,GAAG,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAE,CAAC,EAAE,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBAC5H,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;oBAC3B,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;gBACvB,CAAC;qBAAM,CAAC;oBACN,OAAO,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;gBAChC,CAAC;gBACD,MAAM,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;oBACvD,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;oBAC7D,OAAO,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBACpD,CAAC,CAAC,CAAC;gBACH,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;oBAC3B,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;gBAClD,CAAC;qBAAM,CAAC;oBACN,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBACzB,CAAC;gBACD,OAAO,CAAC,QAAQ,EAAE,CAAC;gBAEnB,wBAAwB,CAAC,qBAAqB,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,CAAC;YAClE,CAAC;SACF,CAAC,CAAC;IACL,CAAC;IAEO,yBAAyB;QAC/B,IAAI,CAAC,IAAI,CAAC,kBAAkB;YAAE,OAAO;QACrC,IAAI,CAAC,kBAAkB,CAAC,UAAU,EAAE,CAAC;QACrC,IAAI,CAAC,kBAAkB,GAAG,SAAS,CAAC;IACtC,CAAC","sourcesContent":["import {\n  ARIA_VALIDATION_RUNTIME_CHANGED_EVENT,\n  enableAriaValidation,\n  isAriaValidationEnabled,\n  queueValidation,\n  UnlabelledFrameSelector,\n  useVerboseLogging,\n} from '@lmvz-ds/aria-validation';\nimport { Build } from '@stencil/core';\nimport type { ReactiveController } from '../reactive-controller-host';\n\nexport type AriaValidationHost<T extends HTMLElement = HTMLElement> = {\n  validationEl: T | undefined; // might by undefined due to timing (e.g. if the element is rendered conditionally), so the controller should handle this case\n  validationSlot?: HTMLSlotElement;\n};\n\ntype Config = {\n  reValidateOnPropChanges?: boolean;\n  verboseLogging?: boolean;\n  validationTiming?: 'load' | 'slot';\n};\n\nif (Build.isDev) {\n  enableAriaValidation();\n}\n\n/**\n * A controller that performs ARIA validation on the host component and its children once the component is visible.\n *\n * The host class must provide a member `el`, using stencil's @Element() decorator.\n * The controller will run axe-core validation on this element and log any ARIA violations to the console,\n * at the appropriate lifecycle points. Though the controller makes some effort to anticipate the correct validation timing,\n * it may be necessary to adjust the timing based on the specific use case, using the `validationTiming` config option.\n *\n * This is a basic implementation that allows for further enhancements, such as:\n * - different timings: on load, on demand, on attribute change, etc.\n * - context-based, stateful optimization (such as only validating children that are relevant for the host's ARIA role)\n */\nexport class AriaValidationController implements ReactiveController {\n  private visibilityObserver?: IntersectionObserver;\n  private elementQueued = false;\n  private elementValidated = false;\n  private elementLoaded = false;\n  private static knownValidationErrors: UnlabelledFrameSelector[] = [];\n\n  get disabled() {\n    return !isAriaValidationEnabled();\n  }\n\n  private get useVerboseLogging() {\n    return this.config?.verboseLogging || Build.isDev || useVerboseLogging();\n  }\n\n  constructor(\n    private readonly host: AriaValidationHost,\n    private readonly config?: Config,\n  ) {}\n\n  private readonly onRuntimeConfigChange = () => {\n    if (!isAriaValidationEnabled()) return;\n\n    this.checkLazyValidation();\n  };\n\n  hostDidLoad() {\n    this.elementLoaded = true;\n    if (typeof window !== 'undefined') {\n      window.addEventListener(ARIA_VALIDATION_RUNTIME_CHANGED_EVENT, this.onRuntimeConfigChange);\n    }\n\n    if (this.elementQueued || this.elementValidated) return;\n\n    if (this.config?.validationTiming === 'slot') {\n      this.observeSlot();\n      return;\n    }\n\n    if (!this.host.validationEl?.checkVisibility() || this.config?.validationTiming !== 'load') {\n      this.observeVisibilityOnce();\n      return;\n    }\n\n    this.enqueueValidation();\n  }\n\n  hostDidUpdate() {\n    this.checkLazyValidation();\n  }\n\n  hostDisconnected() {\n    this.discardVisibilityObserver();\n    if (typeof window !== 'undefined') {\n      window.removeEventListener(ARIA_VALIDATION_RUNTIME_CHANGED_EVENT, this.onRuntimeConfigChange);\n    }\n  }\n\n  revalidateAria() {\n    this.enqueueValidation();\n  }\n\n  private observeSlot() {\n    this.host.validationSlot?.addEventListener('slotchange', this.enqueueValidation.bind(this));\n  }\n\n  private observeVisibilityOnce() {\n    window.setTimeout(() => {\n      if (!this.host.validationEl) return;\n\n      this.visibilityObserver = new IntersectionObserver(\n        (entries) => {\n          for (const entry of entries) {\n            if (entry.target !== this.host.validationEl) continue;\n            if (!entry.isIntersecting) continue;\n\n            this.checkLazyValidation();\n\n            // stop observing once the element is visible and validation is triggered\n            this.discardVisibilityObserver();\n          }\n        },\n        {\n          root: this.host.validationEl?.parentElement,\n          rootMargin: '0px',\n          threshold: 0.01, // 1% visible is enough to count as visible\n        },\n      );\n      this.visibilityObserver.observe(this.host.validationEl);\n    });\n  }\n\n  private checkLazyValidation() {\n    if (!this.elementLoaded) return;\n\n    if (!this.config?.reValidateOnPropChanges && (this.elementQueued || this.elementValidated)) return;\n\n    if (!this.host.validationEl?.checkVisibility()) return;\n\n    this.enqueueValidation();\n  }\n\n  private enqueueValidation() {\n    if (!isAriaValidationEnabled()) return;\n\n    this.elementQueued = true;\n\n    queueValidation({\n      context: { include: this.host.validationEl, exclude: AriaValidationController.knownValidationErrors },\n      onComplete: (error, results) => {\n        this.elementValidated = true;\n        const elementName = (this.host as unknown as HTMLElement).tagName || this.host.validationEl?.tagName || 'Element';\n\n        if (error) {\n          console.error('Error running ARIA validation:', error, elementName);\n          if (!this.host.validationEl?.tagName) {\n            console.dir(this.host);\n          }\n          return;\n        }\n\n        const message = [elementName];\n\n        if (!results?.violations.length) {\n          if (this.useVerboseLogging) {\n            console.log(...message, 'has no ARIA violations');\n            if (!this.host.validationEl?.tagName) {\n              console.dir(this.host);\n            }\n          }\n          return;\n        }\n\n        const count = results.violations.length;\n        const label = [...message, results.violations.at(0)!.id, count > 1 ? `(+${count - 1} more)` : ''].filter(Boolean).join(' ');\n        if (this.useVerboseLogging) {\n          console.group(label);\n        } else {\n          console.groupCollapsed(label);\n        }\n        const targets = results.violations.flatMap((violation) => {\n          console.dir(violation, { showHidden: true, compact: false });\n          return violation.nodes.map((node) => node.target);\n        });\n        if (this.host.validationEl) {\n          console.log('element:', this.host.validationEl);\n        } else {\n          console.dir(this.host);\n        }\n        console.groupEnd();\n\n        AriaValidationController.knownValidationErrors.push(...targets);\n      },\n    });\n  }\n\n  private discardVisibilityObserver() {\n    if (!this.visibilityObserver) return;\n    this.visibilityObserver.disconnect();\n    this.visibilityObserver = undefined;\n  }\n}\n"]}

package/dist/collection/utils/aria/element-activation-controller.js

@@ -25,3 +25,4 @@ export class ElementActivationController {
         }
     };
 }
+//# sourceMappingURL=element-activation-controller.js.map

package/dist/collection/utils/aria/element-activation-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element-activation-controller.js","sourceRoot":"","sources":["../../../../src/utils/aria/element-activation-controller.ts"],"names":[],"mappings":"AAaA,MAAM,OAAO,2BAA2B;IAE5B;IACA;IAFV,YACU,IAA2B,EAC3B,MAAe;QADf,SAAI,GAAJ,IAAI,CAAuB;QAC3B,WAAM,GAAN,MAAM,CAAS;IACtB,CAAC;IAEJ,WAAW;QACT,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC;YAC3C,OAAO,CAAC,IAAI,CAAC,yDAAyD,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxF,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACxE,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC3E,CAAC;IAEO,aAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;QAE/C,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;YAE9D,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC;IACH,CAAC,CAAC;IAEM,gBAAgB,GAAG,CAAC,KAAY,EAAE,EAAE;QAC1C,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;QAChC,IAAI,IAAI,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC;YAC9B,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC;IACH,CAAC,CAAC;CACH","sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport type { ReactiveController } from '../reactive-controller-host';\n\nexport type ElementActivationHost = {\n  el: HTMLElement;\n  lmvzActivation: EventEmitter<void>;\n};\n\ntype Config = {\n  localHandler?: (event: Event) => unknown;\n  keys?: string[];\n};\n\nexport class ElementActivationController implements ReactiveController {\n  constructor(\n    private host: ElementActivationHost,\n    private config?: Config,\n  ) {}\n\n  hostDidLoad() {\n    if (!this.host.el.hasAttribute('tabindex')) {\n      console.warn('Interactive element does not have a tabindex attribute!', this.host.el);\n    }\n    this.host.el.addEventListener('keydown', this.handleKeyDown.bind(this));\n    this.host.el.addEventListener('click', this.handleActivation.bind(this));\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Activate on Enter or Space key press\n    if ((this.config?.keys ?? ['Enter', ' ']).includes(event.key)) {\n      // Prevent default scrolling behavior for Space key\n      event.preventDefault();\n      this.handleActivation(event);\n    }\n  };\n\n  private handleActivation = (event: Event) => {\n    this.host.lmvzActivation.emit();\n    if (this.config?.localHandler) {\n      this.config.localHandler(event);\n    }\n  };\n}\n"]}

package/dist/collection/utils/aria/list-keyboard-controller.js

@@ -23,22 +23,25 @@ export class ListKeyboardNavigationController {
         }
     };
     getNextFocusableElement(current, direction) {
+        if (!current)
+            return undefined;
         const { elements } = this;
         const currentIndex = elements.indexOf(current);
         if (currentIndex === -1)
-            return null;
-        let nextIndex = null;
+            return undefined;
+        let nextIndex = undefined;
         if (direction === 'down') {
             nextIndex = (currentIndex + 1) % elements.length;
         }
         else if (direction === 'up') {
             nextIndex = (currentIndex - 1 + elements.length) % elements.length;
         }
-        if (nextIndex == null)
-            return null;
+        if (nextIndex == undefined)
+            return undefined;
         const candidate = elements[nextIndex];
         if (!canReceiveFocus(candidate))
             return this.getNextFocusableElement(candidate, direction);
         return candidate;
     }
 }
+//# sourceMappingURL=list-keyboard-controller.js.map

package/dist/collection/utils/aria/list-keyboard-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-keyboard-controller.js","sourceRoot":"","sources":["../../../../src/utils/aria/list-keyboard-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AASrE,MAAM,OAAO,gCAAgC;IAIxB;IAHX,QAAQ,GAAc,EAAE,CAAC;IAEjC,YACmB,IAAgC;QAAhC,SAAI,GAAJ,IAAI,CAA4B;IAEhD,CAAC;IAEJ,aAAa;QACX,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC/D,CAAC;IAED,cAAc,CAAC,QAAmB;QAChC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC3B,CAAC;IAEO,aAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;QAC/C,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,CAAC,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC;YAAE,OAAO;QAE/E,MAAM,aAAa,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAC;QACrD,MAAM,WAAW,GAAG,IAAI,CAAC,uBAAuB,CAAC,aAAa,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAC3H,IAAI,WAAW,EAAE,CAAC;YAChB,KAAK,CAAC,cAAc,EAAE,CAAC;YACtB,WAA2B,CAAC,KAAK,EAAE,EAAE,CAAC;QACzC,CAAC;IACH,CAAC,CAAC;IAEM,uBAAuB,CAAC,OAAmC,EAAE,SAAwB;QAC3F,IAAI,CAAC,OAAO;YAAE,OAAO,SAAS,CAAC;QAC/B,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAC/C,IAAI,YAAY,KAAK,CAAC,CAAC;YAAE,OAAO,SAAS,CAAC;QAE1C,IAAI,SAAS,GAAuB,SAAS,CAAC;QAC9C,IAAI,SAAS,KAAK,MAAM,EAAE,CAAC;YACzB,SAAS,GAAG,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC;QACnD,CAAC;aAAM,IAAI,SAAS,KAAK,IAAI,EAAE,CAAC;YAC9B,SAAS,GAAG,CAAC,YAAY,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC;QACrE,CAAC;QAED,IAAI,SAAS,IAAI,SAAS;YAAE,OAAO,SAAS,CAAC;QAE7C,MAAM,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;QACtC,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC;YAAE,OAAO,IAAI,CAAC,uBAAuB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAE3F,OAAO,SAAS,CAAC;IACnB,CAAC;CACF","sourcesContent":["import { canReceiveFocus, getDeepActiveElement } from '../component';\nimport type { ReactiveController } from '../reactive-controller-host';\n\nexport type ListKeyboardNavigationHost = {\n  el: HTMLElement;\n};\n\n// type Config = {};\n\nexport class ListKeyboardNavigationController implements ReactiveController {\n  private elements: Element[] = [];\n\n  constructor(\n    private readonly host: ListKeyboardNavigationHost,\n    // private readonly config?: Config,\n  ) {}\n\n  hostDidRender() {\n    this.host.el.addEventListener('keydown', this.handleKeydown);\n  }\n\n  updateElements(elements: Element[]) {\n    this.elements = elements;\n  }\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    const { key } = event;\n    if (!['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft'].includes(key)) return;\n\n    const activeElement = getDeepActiveElement(document);\n    const nextElement = this.getNextFocusableElement(activeElement, ['ArrowDown', 'ArrowRight'].includes(key) ? 'down' : 'up');\n    if (nextElement) {\n      event.preventDefault();\n      (nextElement as HTMLElement).focus?.();\n    }\n  };\n\n  private getNextFocusableElement(current: Element | undefined | null, direction: 'down' | 'up'): Element | undefined {\n    if (!current) return undefined;\n    const { elements } = this;\n    const currentIndex = elements.indexOf(current);\n    if (currentIndex === -1) return undefined;\n\n    let nextIndex: number | undefined = undefined;\n    if (direction === 'down') {\n      nextIndex = (currentIndex + 1) % elements.length;\n    } else if (direction === 'up') {\n      nextIndex = (currentIndex - 1 + elements.length) % elements.length;\n    }\n\n    if (nextIndex == undefined) return undefined;\n\n    const candidate = elements[nextIndex];\n    if (!canReceiveFocus(candidate)) return this.getNextFocusableElement(candidate, direction);\n\n    return candidate;\n  }\n}\n"]}

package/dist/collection/utils/assets.js

@@ -15,3 +15,4 @@ export const createAssetUrlSafely = (file, pathFromAssetRoot) => {
 function joinPath(...parts) {
     return parts.filter(Boolean).join('/').replace('//', '/').replace('/./', '/');
 }
+//# sourceMappingURL=assets.js.map

package/dist/collection/utils/assets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assets.js","sourceRoot":"","sources":["../../../src/utils/assets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,kBAAkB,GAAG,cAAc,CAAC;AAU1C,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,IAAY,EAAE,iBAAsC,EAAE,EAAE;IAG3F,MAAM,iBAAiB,GAAG,QAAQ,CAAC,kBAAkB,EAAE,iBAAiB,EAAE,IAAI,CAAC,CAAC;IAChF,IAAI,CAAC;QACH,OAAO,YAAY,CAAC,iBAAiB,CAAC,CAAC;IACzC,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,CAAC,IAAI,CAAC,mCAAmC,IAAI,cAAc,iBAAiB;oMAC6G,CAAC,CAAC;QAClM,OAAO,IAAI,GAAG,CAAC,iBAAiB,EAAE,eAAe,EAAE,CAAC,CAAC;IACvD,CAAC;AACH,CAAC,CAAC;AAEF,SAAS,QAAQ,CAAC,GAAG,KAA6B;IAChD,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;AAChF,CAAC","sourcesContent":["import { getAssetPath } from '@stencil/core';\nimport { getLocationBase } from './environment';\n\nconst relativeAssetsPath = '../../assets';\n\n/**\n * Attempts to create an asset URL using Stencil's `getAssetPath` utility, and falls back to a default URL if that fails (e.g. because the app using the library hasn't configured the asset path correctly).\n * This is a workaround for Stencil's behavior of throwing an error when `getAssetPath` is called without a valid asset path configuration, which can happen in certain environments like Storybook.\n *\n * @param file - The filename of the asset to create a URL for, relative to the configured asset path.\n * @param pathFromAssetRoot - The path from the asset root to the asset directory (e.g. 'icons' for assets located at <pkg-root>/assets/icons/).\n * @returns A string URL for the asset, or a fallback URL if the creation fails.\n */\nexport const createAssetUrlSafely = (file: string, pathFromAssetRoot?: string | undefined) => {\n  // * dist output target expects assets to be located at <pkg-root>/assets/...\n  // * this base path is used in components' assetDirs declaration, but with the relative ../../assets/\n  const relativeAssetPath = joinPath(relativeAssetsPath, pathFromAssetRoot, file);\n  try {\n    return getAssetPath(relativeAssetPath);\n  } catch {\n    console.warn(`Failed to create URL for asset \"${file}\" in path \"${pathFromAssetRoot}\".\n           Please provide an absolute URL in your app's 'setAssetPath(...)' configuration! Falling back to a relative URL, which may work in some environments but is not guaranteed to be correct.`);\n    return new URL(relativeAssetPath, getLocationBase());\n  }\n};\n\nfunction joinPath(...parts: (string | undefined)[]) {\n  return parts.filter(Boolean).join('/').replace('//', '/').replace('/./', '/');\n}\n"]}