dap-design-system 0.62.4 → 0.63.0

package/dist/components/option-group/option-group.component.js

@@ -1,20 +1,17 @@
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { html as p } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as d } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { DdsElement as f } from "../../internal/dds-hu-element.js";
-import n from "./option-group.scss.js";
-import { unsafeCSS as v } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var b = Object.defineProperty, m = (o, l, a, c) => {
-  for (var t = void 0, s = o.length - 1, i; s >= 0; s--)
-    (i = o[s]) && (t = i(l, a, t) || t);
-  return t && b(l, a, t), t;
+import { unsafeCSS as m, html as d } from "lit";
+import { property as p } from "lit/decorators.js";
+import { DdsElement as n } from "../../internal/dds-hu-element.js";
+import v from "./option-group.scss.js";
+var b = Object.defineProperty, f = (l, o, a, c) => {
+  for (var t = void 0, r = l.length - 1, i; r >= 0; r--)
+    (i = l[r]) && (t = i(o, a, t) || t);
+  return t && b(o, a, t), t;
 };
-const r = class r extends f {
+const s = class s extends n {
   render() {
-    return p`
+    return d`
       <div part="base" class="option-group">
-        ${this.label ? p`<div part="label" class="option-group__label">
+        ${this.label ? d`<div part="label" class="option-group__label">
               ${this.label}
             </div>` : ""}
         <div class="option-group__items">
@@ -24,13 +21,13 @@ const r = class r extends f {
     `;
   }
 };
-r.tagName = "dap-ds-option-group", r.styles = v(n);
-let e = r;
-m([
-  d()
+s.tagName = "dap-ds-option-group", s.styles = m(v);
+let e = s;
+f([
+  p()
 ], e.prototype, "label");
-m([
-  d({ type: Boolean, reflect: !0 })
+f([
+  p({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled");
 export {
   e as default

package/dist/components/option-group/option-group.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"option-group.component.js","sources":["../../../src/components/option-group/option-group.component.ts"],"sourcesContent":["import { html, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport styles from './option-group.scss?inline'\n\n/**\n * `dap-ds-option-group`\n * @summary An option group is a container for grouping related option items.\n * Used with dap-ds-select to create grouped options that render as native optgroup elements.\n * @element dap-ds-option-group\n * @title - Option group\n *\n * @property {string} label - The label of the option group (displayed in native optgroup).\n * @property {boolean} disabled - Whether all options in the group are disabled.\n *\n * @slot - The option items in this group.\n *\n * @csspart base - The main option group container.\n * @csspart label - The label of the option group.\n */\nexport default class DapDSOptionGroup extends DdsElement {\n  static tagName = 'dap-ds-option-group'\n\n  /** The label of the option group */\n  @property() label?: string\n\n  /** Whether all options in the group are disabled */\n  @property({ type: Boolean, reflect: true }) disabled?: boolean\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return html`\n      <div part=\"base\" class=\"option-group\">\n        ${this.label\n          ? html`<div part=\"label\" class=\"option-group__label\">\n              ${this.label}\n            </div>`\n          : ''}\n        <div class=\"option-group__items\">\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSOptionGroup","DdsElement","html","unsafeCSS","styles","DapDSOptionGroup","__decorateClass","property"],"mappings":";;;;;;;;;;;;AAsBA,MAAqBA,IAArB,MAAqBA,UAAyBC,EAAW;AAAA,EAWvD,SAAS;AACA,WAAAC;AAAAA;AAAAA,UAED,KAAK,QACHA;AAAAA,gBACI,KAAK,KAAK;AAAA,sBAEd,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAOd;AAxBEF,EAAO,UAAU,uBAQDA,EAAA,SAASG,EAAUC,CAAM;AAT3C,IAAqBC,IAArBL;AAIcM,EAAA;AAAA,EAAXC,EAAS;AAAA,GAJSF,EAIP,WAAA,OAAA;AAGgCC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAPvBF,EAOyB,WAAA,UAAA;"}
+{"version":3,"file":"option-group.component.js","sources":["../../../src/components/option-group/option-group.component.ts"],"sourcesContent":["import { html, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport styles from './option-group.scss?inline'\n\n/**\n * `dap-ds-option-group`\n * @summary An option group is a container for grouping related option items.\n * Used with dap-ds-select to create grouped options that render as native optgroup elements.\n * @element dap-ds-option-group\n * @title - Option group\n *\n * @property {string} label - The label of the option group (displayed in native optgroup).\n * @property {boolean} disabled - Whether all options in the group are disabled.\n *\n * @slot - The option items in this group.\n *\n * @csspart base - The main option group container.\n * @csspart label - The label of the option group.\n */\nexport default class DapDSOptionGroup extends DdsElement {\n  static tagName = 'dap-ds-option-group'\n\n  /** The label of the option group */\n  @property() label?: string\n\n  /** Whether all options in the group are disabled */\n  @property({ type: Boolean, reflect: true }) disabled?: boolean\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return html`\n      <div part=\"base\" class=\"option-group\">\n        ${this.label\n          ? html`<div part=\"label\" class=\"option-group__label\">\n              ${this.label}\n            </div>`\n          : ''}\n        <div class=\"option-group__items\">\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSOptionGroup","DdsElement","html","unsafeCSS","styles","DapDSOptionGroup","__decorateClass","property"],"mappings":";;;;;;;;;AAsBA,MAAqBA,IAArB,MAAqBA,UAAyBC,EAAW;AAAA,EAWvD,SAAS;AACA,WAAAC;AAAA;AAAA,UAED,KAAK,QACHA;AAAA,gBACI,KAAK,KAAK;AAAA,sBAEd,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAOd;AAxBEF,EAAO,UAAU,uBAQDA,EAAA,SAASG,EAAUC,CAAM;AAT3C,IAAqBC,IAArBL;AAIcM,EAAA;AAAA,EAAXC,EAAS;AAAA,GAJSF,EAIP,WAAA,OAAA;AAGgCC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAPvBF,EAOyB,WAAA,UAAA;"}

package/dist/components/option-item/option-item.component.d.ts

@@ -17,6 +17,7 @@ declare const DapDSOptionItem_base: typeof DdsElement & {
  * @csspart prefix - The prefix of the option item.
  * @csspart label - The label of the option item.
  * @csspart suffix - The suffix of the option item.
+ * @csspart high-contrast - The high contrast indicator of the option item.
  *
  * @slot prefix - The prefix of the option item.
  * @slot - The label of the option item.
@@ -60,6 +61,15 @@ export default class DapDSOptionItem extends DapDSOptionItem_base {
     private _hasPrefix;
     private _hasSuffix;
     static readonly styles: import('lit').CSSResult;
+    /**
+     * True for an option the caller wrote as a child of a list host (select,
+     * combobox, search or option list). Such an option is only the data source:
+     * the list renders its own copy in its shadow root, which is what users and
+     * assistive technology see. Its host attributes are therefore left alone,
+     * so the page's own DOM (often owned by a framework such as React) is never
+     * changed behind the framework's back, e.g. before it hydrates.
+     */
+    private get isListSource();
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     private handleClick;

package/dist/components/option-item/option-item.component.js

@@ -1,55 +1,62 @@
-import { clsx as l } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as p, html as a } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as s } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as u } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { queryAssignedElements as m } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
-import { DdsElement as x } from "../../internal/dds-hu-element.js";
-import { SizedMixin as b } from "../../internal/mixin/sizedMixin.js";
-import _ from "../icons/system/system-check-line/system-check-line.component.js";
+import { clsx as d } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as x, nothing as h, html as c } from "lit";
+import { property as i, queryAssignedElements as u, state as m } from "lit/decorators.js";
+import { DdsElement as b } from "../../internal/dds-hu-element.js";
+import { SizedMixin as _ } from "../../internal/mixin/sizedMixin.js";
+import y from "../icons/system/system-check-line/system-check-line.component.js";
 import v from "../stack/stack.component.js";
-import y from "./option-item.scss.js";
-import { unsafeCSS as k } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var $ = Object.defineProperty, i = (f, t, r, c) => {
-  for (var o = void 0, n = f.length - 1, h; n >= 0; n--)
-    (h = f[n]) && (o = h(t, r, o) || o);
-  return o && $(t, r, o), o;
+import k from "./option-item.scss.js";
+var g = Object.defineProperty, s = (n, t, r, l) => {
+  for (var o = void 0, p = n.length - 1, f; p >= 0; p--)
+    (f = n[p]) && (o = f(t, r, o) || o);
+  return o && g(t, r, o), o;
 };
-const d = class d extends b(x) {
+const a = class a extends _(b) {
   constructor() {
     super(...arguments), this.selectable = "true", this.selectedIconPosition = "suffix", this._hasPrefix = !1, this._hasSuffix = !1;
   }
+  /**
+   * True for an option the caller wrote as a child of a list host (select,
+   * combobox, search or option list). Such an option is only the data source:
+   * the list renders its own copy in its shadow root, which is what users and
+   * assistive technology see. Its host attributes are therefore left alone,
+   * so the page's own DOM (often owned by a framework such as React) is never
+   * changed behind the framework's back, e.g. before it hydrates.
+   */
+  get isListSource() {
+    return typeof this.closest == "function" && !!this.closest(
+      "dap-ds-select, dap-ds-combobox, dap-ds-search, dap-ds-option-list"
+    );
+  }
   firstUpdated(t) {
-    super.firstUpdated(t), this._hasPrefix = !!this._prefixNode.length, this._hasSuffix = !!this._postfixNode.length, this.addEventListener("click", this.handleClick), this.setAttribute("role", "option");
+    super.firstUpdated(t), this._hasPrefix = !!this._prefixNode.length, this._hasSuffix = !!this._postfixNode.length, this.addEventListener("click", this.handleClick), this.isListSource || this.setAttribute("role", "option");
   }
   updated(t) {
-    super.updated(t), t.has("disabled") && (this.setAttribute("tabindex", this.disabled ? "-1" : "0"), this.setAttribute("aria-disabled", this.disabled ? "true" : "false")), t.has("selected") && this.setAttribute("aria-selected", this.selected ? "true" : "false");
+    super.updated(t), !this.isListSource && (t.has("disabled") && (this.setAttribute("tabindex", this.disabled ? "-1" : "0"), this.setAttribute("aria-disabled", this.disabled ? "true" : "false")), t.has("selected") && this.setAttribute("aria-selected", this.selected ? "true" : "false"));
   }
   handleClick(t) {
     this.disabled && (t.preventDefault(), t.stopPropagation());
   }
   get optionText() {
-    var t, r, c;
-    return (c = (r = this.label) != null ? r : (t = this.textContent) == null ? void 0 : t.trim()) != null ? c : "";
+    var t, r, l;
+    return (l = (r = this.label) != null ? r : (t = this.textContent) == null ? void 0 : t.trim()) != null ? l : "";
   }
   render() {
-    return a`
+    return c`
       <div
         part="base"
-        class=${l("option-item", `option-item--${this.size}`, {
+        class=${d("option-item", `option-item--${this.size}`, {
       "option-item--selected": this.selected,
       "option-item--disabled": this.disabled,
       "option-item--focused": this.focused
     })}>
         <dap-ds-stack direction="row" class="option-item__stack">
-          ${this.selectable === "true" && this.selectedIconPosition === "prefix" ? a`<div class=${"selected-icon"}>
-                ${this.selected ? a`<dap-ds-icon-check-line
-                      size="16"></dap-ds-icon-check-line>` : p}
-              </div>` : p}
+          ${this.selectable === "true" && this.selectedIconPosition === "prefix" ? c`<div class=${"selected-icon"}>
+                <dap-ds-icon-check-line size="16"></dap-ds-icon-check-line>
+              </div>` : h}
           <div
             part="prefix"
-            class=${l("option-item__prefix", {
+            class=${d("option-item__prefix", {
       "option-item__prefix--visible": !!this._hasPrefix
     })}>
             <slot name="prefix"></slot>
@@ -59,62 +66,61 @@ const d = class d extends b(x) {
           </div>
           <div
             part="suffix"
-            class=${l("option-item__suffix", {
+            class=${d("option-item__suffix", {
       "option-item__suffix--visible": !!this._hasSuffix
     })}>
             <slot name="suffix"></slot>
           </div>
         </dap-ds-stack>
-        ${this.selectable === "true" && this.selectedIconPosition === "suffix" ? a`<div class=${"selected-icon-suffix"}>
-              ${this.selected ? a`<dap-ds-icon-check-line
-                    size="16"></dap-ds-icon-check-line>` : p}
-            </div>` : p}
+        ${this.selectable === "true" && this.selectedIconPosition === "suffix" ? c`<div class=${"selected-icon-suffix"}>
+              <dap-ds-icon-check-line size="16"></dap-ds-icon-check-line>
+            </div>` : h}
         <span
           part="high-contrast"
-          class=${l("option-item__high-contrast", {
+          class=${d("option-item__high-contrast", {
       "option-item__high-contrast--disabled": this.disabled
     })}></span>
       </div>
     `;
   }
 };
-d.tagName = "dap-ds-option-item", d.dependencies = {
+a.tagName = "dap-ds-option-item", a.dependencies = {
   "dap-ds-stack": v,
-  "dap-ds-icon-check-line": _
-}, d.styles = k(y);
-let e = d;
-i([
-  s({ type: Boolean, reflect: !0 })
+  "dap-ds-icon-check-line": y
+}, a.styles = x(k);
+let e = a;
+s([
+  i({ type: Boolean, reflect: !0 })
 ], e.prototype, "selected");
-i([
-  s({ type: String })
+s([
+  i({ type: String })
 ], e.prototype, "selectable");
-i([
-  s({ type: String })
+s([
+  i({ type: String })
 ], e.prototype, "selectedIconPosition");
-i([
-  s({ reflect: !0 })
+s([
+  i({ reflect: !0 })
 ], e.prototype, "value");
-i([
-  s({ type: Boolean, reflect: !0 })
+s([
+  i({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled");
-i([
-  s({ type: Boolean })
+s([
+  i({ type: Boolean })
 ], e.prototype, "focused");
-i([
-  s()
+s([
+  i()
 ], e.prototype, "label");
-i([
-  m({ slot: "prefix" })
+s([
+  u({ slot: "prefix" })
 ], e.prototype, "_prefixNode");
-i([
-  m({ slot: "suffix" })
+s([
+  u({ slot: "suffix" })
 ], e.prototype, "_postfixNode");
-i([
-  u()
+s([
+  m()
 ], e.prototype, "_hasPrefix");
-i([
-  u()
+s([
+  m()
 ], e.prototype, "_hasSuffix");
 export {
   e as default

package/dist/components/option-item/option-item.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"option-item.component.js","sources":["../../../src/components/option-item/option-item.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, queryAssignedElements, state } from 'lit/decorators.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\n\nimport SystemCheckLine from '../icons/system/system-check-line/system-check-line.component'\nimport DapDSStack from '../stack/stack.component'\nimport styles from './option-item.scss?inline'\n\n/**\n * `dap-ds-option-item`\n * @summary An option item is a selectable item in a list of options.\n * @element dap-ds-option-item\n * @title - Option item\n * @group select,combobox\n * *\n * @csspart base - The main option item container.\n * @csspart prefix - The prefix of the option item.\n * @csspart label - The label of the option item.\n * @csspart suffix - The suffix of the option item.\n *\n * @slot prefix - The prefix of the option item.\n * @slot - The label of the option item.\n * @slot suffix - The suffix of the option item.\n *\n * @cssproperty --dds-option-item-padding-vertical - The vertical padding of the option item (default: var(--dds-spacing-100))\n * @cssproperty --dds-option-item-padding-horizontal - The horizontal padding of the option item (default: var(--dds-spacing-200))\n * @cssproperty --dds-option-item-border-radius - The border radius of the option item (default: var(--dds-radius-small, 4px))\n * @cssproperty --dds-option-item-color - The text color of the option item (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-option-item-hover-bg - The background color of the option item when hovered (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-option-item-active-bg - The background color of the option item when active (default: var(--dds-background-neutral-strong))\n * @cssproperty --dds-option-item-disabled-color - The text color of the option item when disabled (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-option-item-high-contrast-border - The border color of the option item in high contrast mode (default: var(--dds-border-neutral-transparent-interactive, #fff500))\n * @cssproperty --dds-option-item-selected-font-weight - The font weight of the option item when selected (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-option-item-xs-font-size - The font size of the option item in extra small size (default: var(--dds-font-sm))\n * @cssproperty --dds-option-item-lg-font-size - The font size of the option item in large size (default: var(--dds-font-lg))\n * @cssproperty --dds-option-item-selected-icon-width - The width of the selected icon (default: var(--dds-spacing-400))\n */\nexport default class DapDSOptionItem extends SizedMixin(DdsElement) {\n  static tagName = 'dap-ds-option-item'\n\n  static dependencies = {\n    'dap-ds-stack': DapDSStack,\n    'dap-ds-icon-check-line': SystemCheckLine,\n  }\n\n  /** The selected state of the option item */\n  @property({ type: Boolean, reflect: true }) selected?: boolean\n\n  /** Wheteher the item is selectable, whether it shows the selected icon */\n  @property({ type: String }) selectable? = 'true'\n\n  /** The position of the selected icon */\n  @property({ type: String }) selectedIconPosition? = 'suffix'\n\n  /** The value of the option item */\n  @property({ reflect: true }) value?: any\n\n  /** The disabled state of the option item */\n  @property({ type: Boolean, reflect: true }) disabled?: boolean\n\n  /** The focused state of the option item */\n  @property({ type: Boolean }) focused?: boolean\n\n  /** The label of the option item, it can be a simplier version of an item */\n  @property() label?: string\n  @queryAssignedElements({ slot: 'prefix' })\n  private readonly _prefixNode!: NodeListOf<HTMLElement>\n  @queryAssignedElements({ slot: 'suffix' })\n  private readonly _postfixNode!: NodeListOf<HTMLElement>\n\n  @state() private _hasPrefix = false\n  @state() private _hasSuffix = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n\n    this._hasPrefix = !!this._prefixNode.length\n    this._hasSuffix = !!this._postfixNode.length\n\n    this.addEventListener('click', this.handleClick)\n    this.setAttribute('role', 'option')\n  }\n\n  protected updated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(_changedProperties)\n\n    if (_changedProperties.has('disabled')) {\n      this.setAttribute('tabindex', this.disabled ? '-1' : '0')\n      this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false')\n    }\n\n    if (_changedProperties.has('selected')) {\n      this.setAttribute('aria-selected', this.selected ? 'true' : 'false')\n    }\n  }\n\n  private handleClick(event: MouseEvent): void {\n    if (this.disabled) {\n      event.preventDefault()\n      event.stopPropagation()\n    }\n  }\n\n  public get optionText(): string {\n    return this.label ?? this.textContent?.trim() ?? ''\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx('option-item', `option-item--${this.size}`, {\n          'option-item--selected': this.selected,\n          'option-item--disabled': this.disabled,\n          'option-item--focused': this.focused,\n        })}>\n        <dap-ds-stack direction=\"row\" class=\"option-item__stack\">\n          ${this.selectable === 'true' && this.selectedIconPosition === 'prefix'\n            ? html`<div class=${'selected-icon'}>\n                ${this.selected\n                  ? html`<dap-ds-icon-check-line\n                      size=\"16\"></dap-ds-icon-check-line>`\n                  : nothing}\n              </div>`\n            : nothing}\n          <div\n            part=\"prefix\"\n            class=${clsx('option-item__prefix', {\n              'option-item__prefix--visible': !!this._hasPrefix,\n            })}>\n            <slot name=\"prefix\"></slot>\n          </div>\n          <div part=\"label\" class=\"label\">\n            <slot></slot>\n          </div>\n          <div\n            part=\"suffix\"\n            class=${clsx('option-item__suffix', {\n              'option-item__suffix--visible': !!this._hasSuffix,\n            })}>\n            <slot name=\"suffix\"></slot>\n          </div>\n        </dap-ds-stack>\n        ${this.selectable === 'true' && this.selectedIconPosition === 'suffix'\n          ? html`<div class=${'selected-icon-suffix'}>\n              ${this.selected\n                ? html`<dap-ds-icon-check-line\n                    size=\"16\"></dap-ds-icon-check-line>`\n                : nothing}\n            </div>`\n          : nothing}\n        <span\n          part=\"high-contrast\"\n          class=${clsx('option-item__high-contrast', {\n            'option-item__high-contrast--disabled': this.disabled,\n          })}></span>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSOptionItem","SizedMixin","DdsElement","_changedProperties","event","_c","_b","_a","html","clsx","nothing","DapDSStack","SystemCheckLine","unsafeCSS","styles","DapDSOptionItem","__decorateClass","property","queryAssignedElements","state"],"mappings":"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"}
+{"version":3,"file":"option-item.component.js","sources":["../../../src/components/option-item/option-item.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, queryAssignedElements, state } from 'lit/decorators.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\n\nimport SystemCheckLine from '../icons/system/system-check-line/system-check-line.component'\nimport DapDSStack from '../stack/stack.component'\nimport styles from './option-item.scss?inline'\n\n/**\n * `dap-ds-option-item`\n * @summary An option item is a selectable item in a list of options.\n * @element dap-ds-option-item\n * @title - Option item\n * @group select,combobox\n * *\n * @csspart base - The main option item container.\n * @csspart prefix - The prefix of the option item.\n * @csspart label - The label of the option item.\n * @csspart suffix - The suffix of the option item.\n * @csspart high-contrast - The high contrast indicator of the option item.\n *\n * @slot prefix - The prefix of the option item.\n * @slot - The label of the option item.\n * @slot suffix - The suffix of the option item.\n *\n * @cssproperty --dds-option-item-padding-vertical - The vertical padding of the option item (default: var(--dds-spacing-100))\n * @cssproperty --dds-option-item-padding-horizontal - The horizontal padding of the option item (default: var(--dds-spacing-200))\n * @cssproperty --dds-option-item-border-radius - The border radius of the option item (default: var(--dds-radius-small, 4px))\n * @cssproperty --dds-option-item-color - The text color of the option item (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-option-item-hover-bg - The background color of the option item when hovered (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-option-item-active-bg - The background color of the option item when active (default: var(--dds-background-neutral-strong))\n * @cssproperty --dds-option-item-disabled-color - The text color of the option item when disabled (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-option-item-high-contrast-border - The border color of the option item in high contrast mode (default: var(--dds-border-neutral-transparent-interactive, #fff500))\n * @cssproperty --dds-option-item-selected-font-weight - The font weight of the option item when selected (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-option-item-xs-font-size - The font size of the option item in extra small size (default: var(--dds-font-sm))\n * @cssproperty --dds-option-item-lg-font-size - The font size of the option item in large size (default: var(--dds-font-lg))\n * @cssproperty --dds-option-item-selected-icon-width - The width of the selected icon (default: var(--dds-spacing-400))\n */\nexport default class DapDSOptionItem extends SizedMixin(DdsElement) {\n  static tagName = 'dap-ds-option-item'\n\n  static dependencies = {\n    'dap-ds-stack': DapDSStack,\n    'dap-ds-icon-check-line': SystemCheckLine,\n  }\n\n  /** The selected state of the option item */\n  @property({ type: Boolean, reflect: true }) selected?: boolean\n\n  /** Wheteher the item is selectable, whether it shows the selected icon */\n  @property({ type: String }) selectable? = 'true'\n\n  /** The position of the selected icon */\n  @property({ type: String }) selectedIconPosition? = 'suffix'\n\n  /** The value of the option item */\n  @property({ reflect: true }) value?: any\n\n  /** The disabled state of the option item */\n  @property({ type: Boolean, reflect: true }) disabled?: boolean\n\n  /** The focused state of the option item */\n  @property({ type: Boolean }) focused?: boolean\n\n  /** The label of the option item, it can be a simplier version of an item */\n  @property() label?: string\n  @queryAssignedElements({ slot: 'prefix' })\n  private readonly _prefixNode!: NodeListOf<HTMLElement>\n  @queryAssignedElements({ slot: 'suffix' })\n  private readonly _postfixNode!: NodeListOf<HTMLElement>\n\n  @state() private _hasPrefix = false\n  @state() private _hasSuffix = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  /**\n   * True for an option the caller wrote as a child of a list host (select,\n   * combobox, search or option list). Such an option is only the data source:\n   * the list renders its own copy in its shadow root, which is what users and\n   * assistive technology see. Its host attributes are therefore left alone,\n   * so the page's own DOM (often owned by a framework such as React) is never\n   * changed behind the framework's back, e.g. before it hydrates.\n   */\n  private get isListSource(): boolean {\n    return (\n      typeof this.closest === 'function' &&\n      !!this.closest(\n        'dap-ds-select, dap-ds-combobox, dap-ds-search, dap-ds-option-list',\n      )\n    )\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n\n    this._hasPrefix = !!this._prefixNode.length\n    this._hasSuffix = !!this._postfixNode.length\n\n    this.addEventListener('click', this.handleClick)\n    if (!this.isListSource) {\n      this.setAttribute('role', 'option')\n    }\n  }\n\n  protected updated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(_changedProperties)\n\n    if (this.isListSource) {\n      return\n    }\n\n    if (_changedProperties.has('disabled')) {\n      this.setAttribute('tabindex', this.disabled ? '-1' : '0')\n      this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false')\n    }\n\n    if (_changedProperties.has('selected')) {\n      this.setAttribute('aria-selected', this.selected ? 'true' : 'false')\n    }\n  }\n\n  private handleClick(event: MouseEvent): void {\n    if (this.disabled) {\n      event.preventDefault()\n      event.stopPropagation()\n    }\n  }\n\n  public get optionText(): string {\n    return this.label ?? this.textContent?.trim() ?? ''\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx('option-item', `option-item--${this.size}`, {\n          'option-item--selected': this.selected,\n          'option-item--disabled': this.disabled,\n          'option-item--focused': this.focused,\n        })}>\n        <dap-ds-stack direction=\"row\" class=\"option-item__stack\">\n          ${this.selectable === 'true' && this.selectedIconPosition === 'prefix'\n            ? html`<div class=${'selected-icon'}>\n                <dap-ds-icon-check-line size=\"16\"></dap-ds-icon-check-line>\n              </div>`\n            : nothing}\n          <div\n            part=\"prefix\"\n            class=${clsx('option-item__prefix', {\n              'option-item__prefix--visible': !!this._hasPrefix,\n            })}>\n            <slot name=\"prefix\"></slot>\n          </div>\n          <div part=\"label\" class=\"label\">\n            <slot></slot>\n          </div>\n          <div\n            part=\"suffix\"\n            class=${clsx('option-item__suffix', {\n              'option-item__suffix--visible': !!this._hasSuffix,\n            })}>\n            <slot name=\"suffix\"></slot>\n          </div>\n        </dap-ds-stack>\n        ${this.selectable === 'true' && this.selectedIconPosition === 'suffix'\n          ? html`<div class=${'selected-icon-suffix'}>\n              <dap-ds-icon-check-line size=\"16\"></dap-ds-icon-check-line>\n            </div>`\n          : nothing}\n        <span\n          part=\"high-contrast\"\n          class=${clsx('option-item__high-contrast', {\n            'option-item__high-contrast--disabled': this.disabled,\n          })}></span>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSOptionItem","SizedMixin","DdsElement","_changedProperties","event","_c","_b","_a","html","clsx","nothing","DapDSStack","SystemCheckLine","unsafeCSS","styles","DapDSOptionItem","__decorateClass","property","queryAssignedElements","state"],"mappings":"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"}

package/dist/components/option-item/option-item.scss.js

@@ -1,4 +1,4 @@
-const t = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{display:block;--dds-option-item-padding-vertical: var(--dds-spacing-100);--dds-option-item-padding-horizontal: var(--dds-spacing-200);--dds-option-item-border-radius: var(--dds-radius-small, 4px);--dds-option-item-color: var(--dds-text-neutral-base);--dds-option-item-hover-bg: var(--dds-background-neutral-medium);--dds-option-item-active-bg: var(--dds-background-neutral-strong);--dds-option-item-disabled-color: var(--dds-text-neutral-disabled);--dds-option-item-high-contrast-border: var( --dds-border-neutral-transparent-interactive, #fff500 );--dds-option-item-selected-font-weight: var(--dds-font-weight-bold);--dds-option-item-xs-font-size: var(--dds-font-sm);--dds-option-item-lg-font-size: var(--dds-font-lg);--dds-option-item-selected-icon-width: var(--dds-spacing-400)}:host(:focus){outline:none}.option-item__high-contrast{display:inline-flex;position:absolute;box-sizing:border-box;flex:0 0 auto;width:100%;height:100%;margin:calc(var(--dds-option-item-padding-vertical) * -1) calc(var(--dds-option-item-padding-horizontal) * -1);border:var(--dds-border-width-large) solid var(--dds-option-item-high-contrast-border);border-radius:var(--dds-option-item-border-radius)}.option-item__high-contrast:hover{border-width:var(--dds-border-width-large)}.option-item__high-contrast:active{border-width:var(--dds-border-width-xlarge)}.option-item__high-contrast.input__control-high-contrast--disabled{border-color:var(--dds-border-neutral-transparent-disabled);background-color:var(--dds-button-primary-background-disabled);cursor:not-allowed}.option-item{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:flex;position:relative;padding:var(--dds-option-item-padding-vertical) var(--dds-option-item-padding-horizontal);border-radius:var(--dds-option-item-border-radius);color:var(--dds-option-item-color);cursor:pointer}.option-item:hover{background-color:var(--dds-option-item-hover-bg)}.option-item:active{background-color:var(--dds-option-item-active-bg)}.option-item--focused{outline-style:solid}.option-item--selected{font-weight:var(--dds-option-item-selected-font-weight)}.option-item--disabled{color:var(--dds-option-item-disabled-color);cursor:not-allowed;pointer-events:none}.option-item--xs{font-size:var(--dds-option-item-xs-font-size)}.option-item--lg{font-size:var(--dds-option-item-lg-font-size)}.option-item__stack::part(base){flex-wrap:nowrap}.option-item__prefix,.option-item__suffix{display:none}.option-item__prefix--visible,.option-item__suffix--visible{display:block}.selected-icon{min-width:var(--dds-option-item-selected-icon-width)}.selected-icon-suffix{display:flex;min-width:var(--dds-option-item-selected-icon-width);margin-left:auto;text-align:right}";
+const t = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{display:block;--dds-option-item-padding-vertical: var(--dds-spacing-100);--dds-option-item-padding-horizontal: var(--dds-spacing-200);--dds-option-item-border-radius: var(--dds-radius-small, 4px);--dds-option-item-color: var(--dds-text-neutral-base);--dds-option-item-hover-bg: var(--dds-background-neutral-medium);--dds-option-item-active-bg: var(--dds-background-neutral-strong);--dds-option-item-disabled-color: var(--dds-text-neutral-disabled);--dds-option-item-high-contrast-border: var( --dds-border-neutral-transparent-interactive, #fff500 );--dds-option-item-selected-font-weight: var(--dds-font-weight-bold);--dds-option-item-xs-font-size: var(--dds-font-sm);--dds-option-item-lg-font-size: var(--dds-font-lg);--dds-option-item-selected-icon-width: var(--dds-spacing-400)}:host([hidden]){display:none}:host(:focus){outline:none}.option-item__high-contrast{display:inline-flex;position:absolute;box-sizing:border-box;flex:0 0 auto;width:100%;height:100%;margin:calc(var(--dds-option-item-padding-vertical) * -1) calc(var(--dds-option-item-padding-horizontal) * -1);border:var(--dds-border-width-large) solid var(--dds-option-item-high-contrast-border);border-radius:var(--dds-option-item-border-radius)}.option-item__high-contrast:hover{border-width:var(--dds-border-width-large)}.option-item__high-contrast:active{border-width:var(--dds-border-width-xlarge)}.option-item__high-contrast.input__control-high-contrast--disabled{border-color:var(--dds-border-neutral-transparent-disabled);background-color:var(--dds-button-primary-background-disabled);cursor:not-allowed}.option-item{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:flex;position:relative;padding:var(--dds-option-item-padding-vertical) var(--dds-option-item-padding-horizontal);border-radius:var(--dds-option-item-border-radius);color:var(--dds-option-item-color);cursor:pointer}.option-item:hover{background-color:var(--dds-option-item-hover-bg)}.option-item:active{background-color:var(--dds-option-item-active-bg)}.option-item--focused{outline-style:solid}.option-item--selected{font-weight:var(--dds-option-item-selected-font-weight)}.option-item--disabled{color:var(--dds-option-item-disabled-color);cursor:not-allowed;pointer-events:none}.option-item--xs{font-size:var(--dds-option-item-xs-font-size)}.option-item--lg{font-size:var(--dds-option-item-lg-font-size)}.option-item__stack::part(base){flex-wrap:nowrap}.option-item__prefix,.option-item__suffix{display:none}.option-item__prefix--visible,.option-item__suffix--visible{display:block}.selected-icon{min-width:var(--dds-option-item-selected-icon-width)}.selected-icon-suffix{display:flex;min-width:var(--dds-option-item-selected-icon-width);margin-left:auto;text-align:right}.selected-icon dap-ds-icon-check-line,.selected-icon-suffix dap-ds-icon-check-line{display:none}.option-item--selected .selected-icon dap-ds-icon-check-line,.option-item--selected .selected-icon-suffix dap-ds-icon-check-line{display:inline-flex}";
 export {
   t as default
 };

package/dist/components/option-list/__test__/listbox-harness.d.ts

@@ -0,0 +1,129 @@
+import { TemplateResult } from 'lit';
+export declare const LISTBOX_EVENTS: readonly ["dds-option-change", "dds-option-deselect", "dds-current-change", "dds-list-changed", "dds-keydown", "dds-cancel"];
+export declare const HOST_EVENTS: readonly ["dds-change", "dds-input", "dds-search", "dds-clear", "dds-opened", "dds-closed", "dds-keydown"];
+export type AnyEl = HTMLElement & Record<string, any>;
+/**
+ * open-wc only auto-cleans fixtures under mocha; register cleanup for vitest so
+ * elements (and focus) never leak between tests. Call once per spec file.
+ */
+export declare function useFixtureCleanup(): void;
+/** Mount a template and wait until it has fully settled. */
+export declare function mount(template: TemplateResult | string): Promise<AnyEl>;
+/** Wait for Lit updates of the host and its option-list plus two frames. */
+export declare function settle(el: AnyEl): Promise<void>;
+export declare function getList(el: AnyEl): AnyEl | null;
+/** The innermost focused element, following shadow roots. */
+export declare function deepActive(): Element | null;
+/** Short, stable description of a value for snapshots. */
+export declare function normalize(v: unknown, depth?: number): unknown;
+export interface TraceEvent {
+    from: 'list' | 'host';
+    type: string;
+    detail: unknown;
+}
+/** Records listbox events on the option-list and host-originated events on the host. */
+export declare function recordEvents(host: AnyEl): {
+    take(): TraceEvent[];
+};
+/** Observable state of the option-list: what a user / caller can see. */
+export declare function listState(list: AnyEl | null): {
+    value: any;
+    selectedIndex: any;
+    available: any;
+    active: any;
+    rendered: string;
+    source: any;
+} | null;
+/** Host-level observable state per component kind. */
+export declare function hostState(host: AnyEl): {
+    ariaMultiselectable: string | null;
+    focus: string | null;
+    value?: undefined;
+    opened?: undefined;
+    text?: undefined;
+    ariaExpanded?: undefined;
+    activedescendant?: undefined;
+    validity?: undefined;
+    input?: undefined;
+    selectedText?: undefined;
+    status?: undefined;
+    chips?: undefined;
+} | {
+    value: any;
+    opened: boolean;
+    text: string | null;
+    ariaExpanded: string | null;
+    activedescendant: string | null;
+    validity: any;
+    focus: string | null;
+    ariaMultiselectable?: undefined;
+    input?: undefined;
+    selectedText?: undefined;
+    status?: undefined;
+    chips?: undefined;
+} | {
+    value: any;
+    opened: boolean;
+    input: string | null;
+    selectedText: any;
+    ariaExpanded: string | null;
+    activedescendant: string | null;
+    status: string | null;
+    chips: string | null;
+    validity: any;
+    focus: string | null;
+    ariaMultiselectable?: undefined;
+    text?: undefined;
+};
+export type Step = [label: string, run: (ctx: Ctx) => unknown];
+export interface Ctx {
+    host: AnyEl;
+    list: () => AnyEl | null;
+    input: () => HTMLInputElement | null;
+    trigger: () => AnyEl | null;
+}
+export interface TraceEntry {
+    step: string;
+    events: TraceEvent[];
+    host: unknown;
+    list: unknown;
+}
+/** Compact, reviewable rendering of a trace (one line per event / state). */
+export declare function formatTrace(entries: TraceEntry[]): string;
+/** Mount + run steps, returning the compact trace string for snapshots. */
+export declare function traceText(template: TemplateResult | string, steps: Step[]): Promise<string>;
+/** Mount a template, then run steps; returns the full trace. */
+export declare function trace(template: TemplateResult | string, steps: Step[]): Promise<TraceEntry[]>;
+/** Press a key on the deep-focused element (falls back to `fallback`). */
+export declare const press: (key: string, mods?: KeyboardEventInit) => (ctx: Ctx) => void;
+/** Press a key on a specific target regardless of focus. */
+export declare const pressOn: (pick: (ctx: Ctx) => Element | null, key: string) => (ctx: Ctx) => void;
+/** Type characters into the combobox/search input like a user would. */
+export declare const type: (text: string) => (ctx: Ctx) => Promise<void>;
+/** Delete one character from the end of the input. */
+export declare const backspace: () => (ctx: Ctx) => Promise<void>;
+/**
+ * Click a rendered option (the clone inside option-list's shadow root).
+ * No-op when the option is not rendered (e.g. filtered out); the trace's
+ * rendered-list line shows that, so a change in availability still diffs.
+ */
+export declare const clickOption: (value: string, mods?: MouseEventInit) => (ctx: Ctx) => void;
+/** Click the trigger (select button / combobox input). */
+export declare const clickTrigger: () => (ctx: Ctx) => void;
+export declare const clickOutside: () => () => void;
+export declare const setProp: (name: string, value: unknown) => (ctx: Ctx) => void;
+export declare const setAttr: (name: string, value: string | null) => (ctx: Ctx) => void;
+/** Append option items to the host (async/remote options). */
+export declare const appendOptions: (items: Array<[value: string, text: string, attrs?: string]>) => (ctx: Ctx) => void;
+export declare const removeAllOptions: () => (ctx: Ctx) => void;
+/** Advance the (fake) clock, e.g. past the 500ms typeahead reset. */
+export declare const wait: (ms: number) => () => void;
+/** Focus a rendered option directly (e.g. Tab into a standalone list). */
+export declare const focusOption: (value: string) => (ctx: Ctx) => void;
+/** Click the combobox/search clear (×) button. */
+export declare const clickClear: () => (ctx: Ctx) => void;
+/** Click the search (magnifier) button. */
+export declare const clickSearchButton: () => (ctx: Ctx) => void;
+/** Click the remove button of a multiselect chip. */
+export declare const removeChip: (value: string) => (ctx: Ctx) => void;
+export declare const focusTrigger: () => (ctx: Ctx) => void;