dap-design-system 0.62.3 → 0.63.0

package/dist/components/rating/rating.component.js

@@ -1,50 +1,46 @@
-import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as u } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as l } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { query as p } from "../../node_modules/@lit/reactive-element/decorators/query.js";
-import { html as c } from "../../node_modules/lit-html/static.js";
-import { GenericFormElement as _ } from "../../internal/mixin/genericFormElement.js";
-import f from "../icon/icon.component.js";
-import v from "./_styles/rating.scss.js";
-import { unsafeCSS as b } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var y = Object.defineProperty, i = (d, e, t, n) => {
-  for (var a = void 0, o = d.length - 1, h; o >= 0; o--)
-    (h = d[o]) && (a = h(e, t, a) || a);
+import { clsx as _ } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as p } from "lit";
+import { query as m, property as u, state as l } from "lit/decorators.js";
+import { html as c } from "lit/static-html.js";
+import { GenericFormElement as f } from "../../internal/mixin/genericFormElement.js";
+import v from "../icon/icon.component.js";
+import b from "./_styles/rating.scss.js";
+var y = Object.defineProperty, r = (h, e, t, i) => {
+  for (var a = void 0, o = h.length - 1, d; o >= 0; o--)
+    (d = h[o]) && (a = d(e, t, a) || a);
   return a && y(e, t, a), a;
 };
-const r = class r extends _ {
+const n = class n extends f {
   constructor() {
-    super(), this.max = 5, this._ratingContainer = null, this._hasFocus = !1, this._hoverValue = 0, this._uniqueId = `star-rating-${window.crypto.randomUUID()}`, this._handleContainerFocus = () => {
+    var e, t, i;
+    super(), this.max = 5, this._ratingContainer = null, this._hasFocus = !1, this._hoverValue = 0, this._uniqueId = `star-rating-${(i = (t = (e = globalThis.crypto) == null ? void 0 : e.randomUUID) == null ? void 0 : t.call(e)) != null ? i : Math.random().toString(36).slice(2)}`, this._handleContainerFocus = () => {
       this._hasFocus = !0, this._announceRating();
     }, this._handleContainerBlur = () => {
       this._hasFocus = !1;
-    }, this._handleContainerKeyDown = (e) => {
+    }, this._handleContainerKeyDown = (a) => {
       if (!(this.disabled || this.readonly))
-        switch (e.key) {
+        switch (a.key) {
           case "ArrowRight":
           case "ArrowUp":
-            e.preventDefault(), this._incrementRating();
+            a.preventDefault(), this._incrementRating();
             break;
           case "ArrowLeft":
           case "ArrowDown":
-            e.preventDefault(), this._decrementRating();
+            a.preventDefault(), this._decrementRating();
             break;
           case "Home":
-            e.preventDefault(), this._setRating(1);
+            a.preventDefault(), this._setRating(1);
             break;
           case "End":
-            e.preventDefault(), this._setRating(this.max);
+            a.preventDefault(), this._setRating(this.max);
             break;
           default:
             return;
         }
-    }, this._handleKeyDown = (e) => {
+    }, this._handleKeyDown = (a) => {
       if (this.disabled || this.readonly) return;
-      if (this.contains(e.target) && this._hasFocus)
-        switch (e.key) {
+      if (this.contains(a.target) && this._hasFocus)
+        switch (a.key) {
           case "ArrowRight":
           case "ArrowUp":
           case "ArrowLeft":
@@ -102,12 +98,12 @@ const r = class r extends _ {
   render() {
     const e = [];
     for (let t = 1; t <= this.max; t++) {
-      const n = t <= this.value, a = !this.disabled && !this.readonly && t <= this._hoverValue;
+      const i = t <= this.value, a = !this.disabled && !this.readonly && t <= this._hoverValue;
       e.push(c`
         <span
           part="star"
-          class=${m("star", {
-        "star--active": n,
+          class=${_("star", {
+        "star--active": i,
         "star--hover": a,
         "star--readonly": this.readonly,
         "star--disabled": this.disabled
@@ -117,7 +113,7 @@ const r = class r extends _ {
           @mouseleave=${() => this._handleStarLeave()}
           tabindex=${this.disabled ? "-1" : "0"}
           role="radio"
-          aria-checked=${n}
+          aria-checked=${i}
           aria-disabled=${this.disabled}
           aria-posinset=${t}
           aria-setsize=${this.max}>
@@ -151,26 +147,26 @@ const r = class r extends _ {
     `;
   }
 };
-r.tagName = "dap-ds-rating", r.dependencies = {
-  "dap-ds-icon": f
-}, r.styles = b(v);
-let s = r;
-i([
-  p(".sr-announcement")
+n.tagName = "dap-ds-rating", n.dependencies = {
+  "dap-ds-icon": v
+}, n.styles = p(b);
+let s = n;
+r([
+  m(".sr-announcement")
 ], s.prototype, "_liveRegion");
-i([
+r([
   u({ reflect: !0 })
 ], s.prototype, "label");
-i([
+r([
   u({ type: Number })
 ], s.prototype, "max");
-i([
+r([
   l()
 ], s.prototype, "_hasFocus");
-i([
+r([
   l()
 ], s.prototype, "_hoverValue");
-i([
+r([
   l()
 ], s.prototype, "_uniqueId");
 export {

package/dist/components/rating/rating.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating.component.js","sources":["../../../src/components/rating/rating.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\n\nimport DapDSIcon from '../icon/icon.component'\nimport styles from './_styles/rating.scss?inline'\n\n/**\n * `dap-ds-rating`\n * @summary Rating is a component that allows users to rate a product or service.\n * @element dap-ds-rating\n * @title - Rating\n *\n * @event {{ value: number }} dds-change - Event fired when the rating value changes.\n *\n * @csspart base - The main rating container.\n * @csspart star - The star element.\n * @csspart stars-container - The container of the stars.\n * @csspart icon - The icon of the star.\n */\nexport default class DapDSRating extends GenericFormElement {\n  static tagName = 'dap-ds-rating'\n\n  static dependencies = {\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  /** Reference to the live region for screen reader announcements */\n  @query('.sr-announcement') private readonly _liveRegion: HTMLElement | null\n\n  constructor() {\n    super()\n\n    this.value = 0\n  }\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** The label of the rating */\n  @property({ reflect: true }) label: string\n\n  /** The maximum number of stars */\n  @property({ type: Number }) max = 5\n\n  private _ratingContainer: HTMLElement | null = null\n  @state() private _hasFocus = false\n  @state() private _hoverValue = 0\n  @state() private readonly _uniqueId =\n    `star-rating-${window.crypto.randomUUID()}`\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // Add event listener at document level to ensure we catch all keyboard events\n    document.addEventListener('keydown', this._handleKeyDown)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    document.removeEventListener('keydown', this._handleKeyDown)\n\n    if (this._ratingContainer) {\n      this._ratingContainer.removeEventListener('focus', () => {})\n    }\n  }\n\n  firstUpdated() {\n    // Set a reference to the container element for easier access\n    this._ratingContainer = this.renderRoot.querySelector('.rating-container')\n  }\n\n  _handleContainerFocus = () => {\n    this._hasFocus = true\n\n    // Announce current rating for initial focus\n    this._announceRating()\n  }\n\n  _handleContainerBlur = () => {\n    this._hasFocus = false\n  }\n\n  _handleContainerKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) return\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        event.preventDefault()\n        this._incrementRating()\n        break\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        event.preventDefault()\n        this._decrementRating()\n        break\n      case 'Home':\n        event.preventDefault()\n        this._setRating(1)\n        break\n      case 'End':\n        event.preventDefault()\n        this._setRating(this.max)\n        break\n      default:\n        return\n    }\n  }\n\n  /**\n   * Handle keyboard events for the entire component\n   * This is a backup to catch keyboard events if they bubble up\n   */\n  _handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) return\n\n    // Only process keyboard events if:\n    // 1. The event target is this component or its children\n    // 2. The component currently has focus\n    const isTargetWithin = this.contains(event.target as Node)\n\n    if (isTargetWithin && this._hasFocus) {\n      // The container's direct keydown handler should handle this,\n      // but this is a backup in case the event bubbles up\n      switch (event.key) {\n        case 'ArrowRight':\n        case 'ArrowUp':\n        case 'ArrowLeft':\n        case 'ArrowDown':\n        case 'Home':\n        case 'End':\n          // Let the container's direct keydown handler process these\n          break\n        default:\n          return\n      }\n    }\n  }\n\n  _incrementRating() {\n    const newValue = Math.min(this.value + 1, this.max)\n    this._setRating(newValue)\n  }\n\n  _decrementRating() {\n    const newValue = Math.max(this.value - 1, 0)\n    this._setRating(newValue)\n  }\n\n  _setRating(value: number) {\n    const oldValue = this.value\n    this.value = value\n\n    // Only announce if the value actually changed\n    if (oldValue !== value) {\n      this._announceRating()\n      this.emit('dds-change', { value })\n    }\n  }\n\n  /**\n   * Announce the current rating to screen readers\n   */\n  _announceRating() {\n    if (this._liveRegion) {\n      const message =\n        this.value === 0\n          ? `Rating cleared`\n          : `${this.value} of ${this.max} stars selected`\n\n      // Update the live region with the current rating\n      this._liveRegion.textContent = message\n    }\n  }\n\n  _handleStarClick(value: number) {\n    if (this.disabled || this.readonly) return\n\n    // Toggle the value if the same star is clicked twice\n    const newValue = this.value === value ? 0 : value\n    this._setRating(newValue)\n  }\n\n  _handleStarHover(value: number) {\n    if (this.disabled || this.readonly) return\n    this._hoverValue = value\n  }\n\n  _handleStarLeave() {\n    if (this.disabled || this.readonly) return\n    this._hoverValue = 0\n  }\n\n  render() {\n    const stars = []\n\n    for (let i = 1; i <= this.max; i++) {\n      const isActive = i <= this.value\n      const isHovered =\n        !this.disabled && !this.readonly && i <= this._hoverValue\n\n      stars.push(html`\n        <span\n          part=\"star\"\n          class=${clsx('star', {\n            'star--active': isActive,\n            'star--hover': isHovered,\n            'star--readonly': this.readonly,\n            'star--disabled': this.disabled,\n          })}\n          @click=${() => this._handleStarClick(i)}\n          @mouseenter=${() => this._handleStarHover(i)}\n          @mouseleave=${() => this._handleStarLeave()}\n          tabindex=${this.disabled ? '-1' : '0'}\n          role=\"radio\"\n          aria-checked=${isActive}\n          aria-disabled=${this.disabled}\n          aria-posinset=${i}\n          aria-setsize=${this.max}>\n          <dap-ds-icon part=\"icon\" name=\"star-fill\"></dap-ds-icon>\n          <span class=\"sr-only\">${i} star${i === 1 ? '' : 's'}</span>\n        </span>\n      `)\n    }\n\n    return html`\n      <div\n        class=\"rating-container\"\n        part=\"base\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        @focus=${this._handleContainerFocus}\n        @blur=${this._handleContainerBlur}\n        @keydown=${this._handleContainerKeyDown}\n        aria-labelledby=\"rating-label-${this._uniqueId}\">\n        ${(this, this.renderLabel(`rating-label-${this._uniqueId}`))}\n        <div\n          class=\"stars-container\"\n          part=\"stars-container\"\n          role=\"radiogroup\"\n          aria-labelledby=\"rating-label-${this._uniqueId}\"\n          aria-disabled=${this.disabled}\n          aria-readonly=${this.readonly}>\n          ${stars}\n        </div>\n        <!-- Live region for screen reader announcements -->\n        <div class=\"sr-announcement sr-only\" aria-live=\"assertive\"></div>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSRating","GenericFormElement","event","newValue","value","oldValue","message","stars","i","isActive","isHovered","html","clsx","DapDSIcon","unsafeCSS","styles","DapDSRating","__decorateClass","query","property","state"],"mappings":"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"}
+{"version":3,"file":"rating.component.js","sources":["../../../src/components/rating/rating.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\n\nimport DapDSIcon from '../icon/icon.component'\nimport styles from './_styles/rating.scss?inline'\n\n/**\n * `dap-ds-rating`\n * @summary Rating is a component that allows users to rate a product or service.\n * @element dap-ds-rating\n * @title - Rating\n *\n * @event {{ value: number }} dds-change - Event fired when the rating value changes.\n *\n * @csspart base - The main rating container.\n * @csspart star - The star element.\n * @csspart stars-container - The container of the stars.\n * @csspart icon - The icon of the star.\n */\nexport default class DapDSRating extends GenericFormElement {\n  static tagName = 'dap-ds-rating'\n\n  static dependencies = {\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  /** Reference to the live region for screen reader announcements */\n  @query('.sr-announcement') private readonly _liveRegion: HTMLElement | null\n\n  constructor() {\n    super()\n\n    this.value = 0\n  }\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** The label of the rating */\n  @property({ reflect: true }) label: string\n\n  /** The maximum number of stars */\n  @property({ type: Number }) max = 5\n\n  private _ratingContainer: HTMLElement | null = null\n  @state() private _hasFocus = false\n  @state() private _hoverValue = 0\n  // `globalThis.crypto` exists in both the browser and Node (SSR); the Lit SSR\n  // `window` shim does not carry `crypto`, so referencing it there would throw.\n  @state() private readonly _uniqueId = `star-rating-${\n    globalThis.crypto?.randomUUID?.() ?? Math.random().toString(36).slice(2)\n  }`\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // Add event listener at document level to ensure we catch all keyboard events\n    document.addEventListener('keydown', this._handleKeyDown)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    document.removeEventListener('keydown', this._handleKeyDown)\n\n    if (this._ratingContainer) {\n      this._ratingContainer.removeEventListener('focus', () => {})\n    }\n  }\n\n  firstUpdated() {\n    // Set a reference to the container element for easier access\n    this._ratingContainer = this.renderRoot.querySelector('.rating-container')\n  }\n\n  _handleContainerFocus = () => {\n    this._hasFocus = true\n\n    // Announce current rating for initial focus\n    this._announceRating()\n  }\n\n  _handleContainerBlur = () => {\n    this._hasFocus = false\n  }\n\n  _handleContainerKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) return\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        event.preventDefault()\n        this._incrementRating()\n        break\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        event.preventDefault()\n        this._decrementRating()\n        break\n      case 'Home':\n        event.preventDefault()\n        this._setRating(1)\n        break\n      case 'End':\n        event.preventDefault()\n        this._setRating(this.max)\n        break\n      default:\n        return\n    }\n  }\n\n  /**\n   * Handle keyboard events for the entire component\n   * This is a backup to catch keyboard events if they bubble up\n   */\n  _handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) return\n\n    // Only process keyboard events if:\n    // 1. The event target is this component or its children\n    // 2. The component currently has focus\n    const isTargetWithin = this.contains(event.target as Node)\n\n    if (isTargetWithin && this._hasFocus) {\n      // The container's direct keydown handler should handle this,\n      // but this is a backup in case the event bubbles up\n      switch (event.key) {\n        case 'ArrowRight':\n        case 'ArrowUp':\n        case 'ArrowLeft':\n        case 'ArrowDown':\n        case 'Home':\n        case 'End':\n          // Let the container's direct keydown handler process these\n          break\n        default:\n          return\n      }\n    }\n  }\n\n  _incrementRating() {\n    const newValue = Math.min(this.value + 1, this.max)\n    this._setRating(newValue)\n  }\n\n  _decrementRating() {\n    const newValue = Math.max(this.value - 1, 0)\n    this._setRating(newValue)\n  }\n\n  _setRating(value: number) {\n    const oldValue = this.value\n    this.value = value\n\n    // Only announce if the value actually changed\n    if (oldValue !== value) {\n      this._announceRating()\n      this.emit('dds-change', { value })\n    }\n  }\n\n  /**\n   * Announce the current rating to screen readers\n   */\n  _announceRating() {\n    if (this._liveRegion) {\n      const message =\n        this.value === 0\n          ? `Rating cleared`\n          : `${this.value} of ${this.max} stars selected`\n\n      // Update the live region with the current rating\n      this._liveRegion.textContent = message\n    }\n  }\n\n  _handleStarClick(value: number) {\n    if (this.disabled || this.readonly) return\n\n    // Toggle the value if the same star is clicked twice\n    const newValue = this.value === value ? 0 : value\n    this._setRating(newValue)\n  }\n\n  _handleStarHover(value: number) {\n    if (this.disabled || this.readonly) return\n    this._hoverValue = value\n  }\n\n  _handleStarLeave() {\n    if (this.disabled || this.readonly) return\n    this._hoverValue = 0\n  }\n\n  render() {\n    const stars = []\n\n    for (let i = 1; i <= this.max; i++) {\n      const isActive = i <= this.value\n      const isHovered =\n        !this.disabled && !this.readonly && i <= this._hoverValue\n\n      stars.push(html`\n        <span\n          part=\"star\"\n          class=${clsx('star', {\n            'star--active': isActive,\n            'star--hover': isHovered,\n            'star--readonly': this.readonly,\n            'star--disabled': this.disabled,\n          })}\n          @click=${() => this._handleStarClick(i)}\n          @mouseenter=${() => this._handleStarHover(i)}\n          @mouseleave=${() => this._handleStarLeave()}\n          tabindex=${this.disabled ? '-1' : '0'}\n          role=\"radio\"\n          aria-checked=${isActive}\n          aria-disabled=${this.disabled}\n          aria-posinset=${i}\n          aria-setsize=${this.max}>\n          <dap-ds-icon part=\"icon\" name=\"star-fill\"></dap-ds-icon>\n          <span class=\"sr-only\">${i} star${i === 1 ? '' : 's'}</span>\n        </span>\n      `)\n    }\n\n    return html`\n      <div\n        class=\"rating-container\"\n        part=\"base\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        @focus=${this._handleContainerFocus}\n        @blur=${this._handleContainerBlur}\n        @keydown=${this._handleContainerKeyDown}\n        aria-labelledby=\"rating-label-${this._uniqueId}\">\n        ${(this, this.renderLabel(`rating-label-${this._uniqueId}`))}\n        <div\n          class=\"stars-container\"\n          part=\"stars-container\"\n          role=\"radiogroup\"\n          aria-labelledby=\"rating-label-${this._uniqueId}\"\n          aria-disabled=${this.disabled}\n          aria-readonly=${this.readonly}>\n          ${stars}\n        </div>\n        <!-- Live region for screen reader announcements -->\n        <div class=\"sr-announcement sr-only\" aria-live=\"assertive\"></div>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSRating","GenericFormElement","_c","_b","_a","event","newValue","value","oldValue","message","stars","i","isActive","isHovered","html","clsx","DapDSIcon","unsafeCSS","styles","DapDSRating","__decorateClass","query","property","state"],"mappings":"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"}

package/dist/components/scroll-area/scroll-area.component.d.ts

@@ -9,7 +9,8 @@ import { DdsElement } from '../../internal/dds-hu-element';
  *
  * @csspart viewport - The viewport element that contains the scrollable content
  * @csspart scrollbar - The scrollbar container
- * @csspart corner - The corner between vertical and horizontal scrollbars
+ * @csspart base - The main scroll area container.
+ * @csspart thumb - The thumb of the scrollbar.
  *
  * @cssprop --dds-scroll-area-radius - The border radius of the scroll area and its elements (default: var(--dds-radius-base))
  * @cssprop --dds-scroll-area-background - The background color of the scroll area (default: var(--dds-background-neutral-base))

package/dist/components/scroll-area/scroll-area.component.js

@@ -1,38 +1,35 @@
 import { clsx as f } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as b } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as g } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { html as v } from "../../node_modules/lit-html/static.js";
-import { DdsElement as w } from "../../internal/dds-hu-element.js";
-import _ from "./scroll-area.scss.js";
-import { unsafeCSS as z } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var H = Object.defineProperty, y = (p, s, e, h) => {
-  for (var r = void 0, a = p.length - 1, n; a >= 0; a--)
-    (n = p[a]) && (r = n(s, e, r) || r);
-  return r && H(s, e, r), r;
+import { unsafeCSS as g, nothing as b } from "lit";
+import { property as w } from "lit/decorators.js";
+import { html as v } from "lit/static-html.js";
+import { DdsElement as _ } from "../../internal/dds-hu-element.js";
+import z from "./scroll-area.scss.js";
+var H = Object.defineProperty, y = (d, r, e, h) => {
+  for (var s = void 0, n = d.length - 1, a; n >= 0; n--)
+    (a = d[n]) && (s = a(r, e, s) || s);
+  return s && H(r, e, s), s;
 };
-const c = class c extends w {
+const c = class c extends _ {
   constructor() {
     super(...arguments), this.orientation = "vertical", this.viewport = null, this.scrollbar = null, this.thumbHorizontal = null, this.thumbVertical = null, this.isDragging = !1, this.startY = 0, this.startScrollTop = 0;
   }
   firstUpdated() {
-    var s, e, h, r;
-    this.viewport = (s = this.shadowRoot) == null ? void 0 : s.querySelector(
+    var r, e, h, s;
+    this.viewport = (r = this.shadowRoot) == null ? void 0 : r.querySelector(
       ".scroll-area__viewport"
     ), this.scrollbar = (e = this.shadowRoot) == null ? void 0 : e.querySelector(
       ".scroll-area__scrollbar"
     ), this.thumbHorizontal = (h = this.shadowRoot) == null ? void 0 : h.querySelector(
       ".scroll-area__thumb--horizontal"
-    ), this.thumbVertical = (r = this.shadowRoot) == null ? void 0 : r.querySelector(
+    ), this.thumbVertical = (s = this.shadowRoot) == null ? void 0 : s.querySelector(
       ".scroll-area__thumb--vertical"
     ), this.viewport && this.scrollbar && (this.thumbHorizontal || this.thumbVertical) && this.setupScrollbar();
   }
   setupScrollbar() {
-    var n, d;
+    var a, p;
     if (!this.viewport || !this.scrollbar || !this.thumbHorizontal && !this.thumbVertical)
       return;
-    const s = () => {
+    const r = () => {
       if (this.orientation === "vertical" || this.orientation === "both") {
         const { scrollHeight: t, clientHeight: i } = this.viewport, o = i / t * i;
         this.thumbVertical.style.height = `${o}px`;
@@ -51,8 +48,8 @@ const c = class c extends w {
         this.thumbHorizontal.style.transform = `translateX(${l}px)`;
       }
     }, h = (t) => {
-      t.preventDefault(), this.isDragging = !0, (this.orientation === "vertical" || this.orientation === "both") && (this.startY = t.clientY, this.startScrollTop = this.viewport.scrollTop), (this.orientation === "horizontal" || this.orientation === "both") && (this.startY = t.clientX, this.startScrollTop = this.viewport.scrollLeft), document.addEventListener("mousemove", r), document.addEventListener("mouseup", a);
-    }, r = (t) => {
+      t.preventDefault(), this.isDragging = !0, (this.orientation === "vertical" || this.orientation === "both") && (this.startY = t.clientY, this.startScrollTop = this.viewport.scrollTop), (this.orientation === "horizontal" || this.orientation === "both") && (this.startY = t.clientX, this.startScrollTop = this.viewport.scrollLeft), document.addEventListener("mousemove", s), document.addEventListener("mouseup", n);
+    }, s = (t) => {
       if (this.isDragging) {
         if (this.orientation === "vertical" || this.orientation === "both") {
           const i = t.clientY - this.startY, { scrollHeight: o, clientHeight: l } = this.viewport, u = o / l;
@@ -63,19 +60,19 @@ const c = class c extends w {
           this.viewport.scrollLeft = this.startScrollTop + i * u;
         }
       }
-    }, a = () => {
-      this.isDragging = !1, document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", a);
+    }, n = () => {
+      this.isDragging = !1, document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", n);
     };
-    s(), e(), this.viewport.addEventListener("scroll", e), this.viewport.addEventListener("resize", s), (n = this.thumbHorizontal) == null || n.addEventListener("mousedown", h), (d = this.thumbVertical) == null || d.addEventListener("mousedown", h);
+    r(), e(), this.viewport.addEventListener("scroll", e), this.viewport.addEventListener("resize", r), (a = this.thumbHorizontal) == null || a.addEventListener("mousedown", h), (p = this.thumbVertical) == null || p.addEventListener("mousedown", h);
   }
-  getScrollbar(s) {
+  getScrollbar(r) {
     return v`<div
       part="scrollbar"
       class=${f(
       "scroll-area__scrollbar",
-      `scroll-area__scrollbar--${s}`
+      `scroll-area__scrollbar--${r}`
     )}>
-      <div part="thumb" class="scroll-area__thumb--${s}"></div>
+      <div part="thumb" class="scroll-area__thumb--${r}"></div>
     </div> `;
   }
   render() {
@@ -91,10 +88,10 @@ const c = class c extends w {
     `;
   }
 };
-c.tagName = "dap-ds-scroll-area", c.styles = z(_);
+c.tagName = "dap-ds-scroll-area", c.styles = g(z);
 let m = c;
 y([
-  g({ type: String })
+  w({ type: String })
 ], m.prototype, "orientation");
 export {
   m as default

package/dist/components/scroll-area/scroll-area.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.component.js","sources":["../../../src/components/scroll-area/scroll-area.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './scroll-area.scss?inline'\n\n/**\n * `dap-ds-scroll-area`\n * @summary A component that provides a customizable scrollable area with a custom scrollbar.\n * @element dap-ds-scroll-area\n * @title - Scroll area\n *\n * @slot - The content to be scrolled\n *\n * @csspart viewport - The viewport element that contains the scrollable content\n * @csspart scrollbar - The scrollbar container\n * @csspart corner - The corner between vertical and horizontal scrollbars\n *\n * @cssprop --dds-scroll-area-radius - The border radius of the scroll area and its elements (default: var(--dds-radius-base))\n * @cssprop --dds-scroll-area-background - The background color of the scroll area (default: var(--dds-background-neutral-base))\n * @cssprop --dds-scroll-area-scrollbar-background - The background color of the scrollbar (default: var(--dds-background-neutral-subtle))\n * @cssprop --dds-scroll-area-thumb-background - The background color of the scrollbar thumb (default: var(--dds-background-neutral-interactive))\n * @cssprop --dds-scroll-area-thumb-hover-background - The background color of the scrollbar thumb on hover (default: var(--dds-background-neutral-interactive-hover))\n * @cssprop --dds-scroll-area-thumb-active-background - The background color of the scrollbar thumb when active (default: var(--dds-background-neutral-interactive-active))\n * @cssprop --dds-scroll-area-transition - The transition timing for scrollbar interactions (default: var(--dds-transition-fast) var(--dds-easing-ease-out))\n * @cssprop --dds-scroll-area-scrollbar-size - The width/height of the scrollbar (default: 10px)\n */\nexport default class DapDSScrollArea extends DdsElement {\n  static tagName = 'dap-ds-scroll-area'\n\n  /**\n   * The orientation of the scrollbar.\n   * @type {'vertical' | 'horizontal' | 'both'}\n   * @default 'vertical'\n   */\n  @property({ type: String }) orientation: 'vertical' | 'horizontal' | 'both' =\n    'vertical'\n\n  static readonly styles = unsafeCSS(styles)\n\n  private viewport: HTMLElement | null = null\n  private scrollbar: HTMLElement | null = null\n  private thumbHorizontal: HTMLElement | null = null\n  private thumbVertical: HTMLElement | null = null\n  private isDragging = false\n  private startY = 0\n  private startScrollTop = 0\n\n  firstUpdated() {\n    this.viewport = this.shadowRoot?.querySelector(\n      '.scroll-area__viewport',\n    ) as HTMLElement\n    this.scrollbar = this.shadowRoot?.querySelector(\n      '.scroll-area__scrollbar',\n    ) as HTMLElement\n    this.thumbHorizontal = this.shadowRoot?.querySelector(\n      '.scroll-area__thumb--horizontal',\n    ) as HTMLElement\n    this.thumbVertical = this.shadowRoot?.querySelector(\n      '.scroll-area__thumb--vertical',\n    ) as HTMLElement\n\n    if (\n      this.viewport &&\n      this.scrollbar &&\n      (this.thumbHorizontal || this.thumbVertical)\n    ) {\n      this.setupScrollbar()\n    }\n  }\n\n  private setupScrollbar() {\n    if (\n      !this.viewport ||\n      !this.scrollbar ||\n      (!this.thumbHorizontal && !this.thumbVertical)\n    )\n      return\n\n    const updateThumbSize = () => {\n      if (this.orientation === 'vertical' || this.orientation === 'both') {\n        const { scrollHeight, clientHeight } = this.viewport!\n        const thumbHeight = (clientHeight / scrollHeight) * clientHeight\n        this.thumbVertical!.style.height = `${thumbHeight}px`\n      }\n\n      if (this.orientation === 'horizontal' || this.orientation === 'both') {\n        const { scrollWidth, clientWidth } = this.viewport!\n        const thumbWidth = (clientWidth / scrollWidth) * clientWidth\n        this.thumbHorizontal!.style.width = `${thumbWidth}px`\n      }\n    }\n\n    const updateThumbPosition = () => {\n      if (this.orientation === 'vertical' || this.orientation === 'both') {\n        const { scrollTop, scrollHeight, clientHeight } = this.viewport!\n        const thumbPosition =\n          (scrollTop / (scrollHeight - clientHeight)) *\n          (clientHeight - this.thumbVertical!.offsetHeight)\n        this.thumbVertical!.style.transform = `translateY(${thumbPosition}px)`\n      }\n\n      if (this.orientation === 'horizontal' || this.orientation === 'both') {\n        const { scrollLeft, scrollWidth, clientWidth } = this.viewport!\n        const thumbPosition =\n          (scrollLeft / (scrollWidth - clientWidth)) *\n          (clientWidth - this.thumbHorizontal!.offsetWidth)\n        this.thumbHorizontal!.style.transform = `translateX(${thumbPosition}px)`\n      }\n    }\n\n    const handleThumbMouseDown = (e: MouseEvent) => {\n      e.preventDefault()\n      this.isDragging = true\n\n      if (this.orientation === 'vertical' || this.orientation === 'both') {\n        this.startY = e.clientY\n        this.startScrollTop = this.viewport!.scrollTop\n      }\n\n      if (this.orientation === 'horizontal' || this.orientation === 'both') {\n        this.startY = e.clientX\n        this.startScrollTop = this.viewport!.scrollLeft\n      }\n\n      document.addEventListener('mousemove', handleThumbMouseMove)\n      document.addEventListener('mouseup', handleThumbMouseUp)\n    }\n\n    const handleThumbMouseMove = (e: MouseEvent) => {\n      if (!this.isDragging) return\n\n      if (this.orientation === 'vertical' || this.orientation === 'both') {\n        const deltaY = e.clientY - this.startY\n        const { scrollHeight, clientHeight } = this.viewport!\n        const scrollRatio = scrollHeight / clientHeight\n        this.viewport!.scrollTop = this.startScrollTop + deltaY * scrollRatio\n      }\n\n      if (this.orientation === 'horizontal' || this.orientation === 'both') {\n        const deltaX = e.clientX - this.startY\n        const { scrollWidth, clientWidth } = this.viewport!\n        const scrollRatio = scrollWidth / clientWidth\n        this.viewport!.scrollLeft = this.startScrollTop + deltaX * scrollRatio\n      }\n    }\n\n    const handleThumbMouseUp = () => {\n      this.isDragging = false\n      document.removeEventListener('mousemove', handleThumbMouseMove)\n      document.removeEventListener('mouseup', handleThumbMouseUp)\n    }\n\n    updateThumbSize()\n    updateThumbPosition()\n\n    this.viewport.addEventListener('scroll', updateThumbPosition)\n    this.viewport.addEventListener('resize', updateThumbSize)\n    this.thumbHorizontal?.addEventListener('mousedown', handleThumbMouseDown)\n    this.thumbVertical?.addEventListener('mousedown', handleThumbMouseDown)\n  }\n\n  getScrollbar(orientation: 'horizontal' | 'vertical') {\n    return html`<div\n      part=\"scrollbar\"\n      class=${clsx(\n        'scroll-area__scrollbar',\n        `scroll-area__scrollbar--${orientation}`,\n      )}>\n      <div part=\"thumb\" class=\"scroll-area__thumb--${orientation}\"></div>\n    </div> `\n  }\n\n  render() {\n    return html`\n      <div part=\"base\" class=\"scroll-area\">\n        <div part=\"viewport\" class=\"scroll-area__viewport\">\n          <slot></slot>\n        </div>\n\n        ${this.orientation === 'horizontal' || this.orientation === 'both'\n          ? this.getScrollbar('horizontal')\n          : nothing}\n        ${this.orientation === 'vertical' || this.orientation === 'both'\n          ? this.getScrollbar('vertical')\n          : nothing}\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSScrollArea","DdsElement","_a","_b","_c","_d","updateThumbSize","scrollHeight","clientHeight","thumbHeight","scrollWidth","clientWidth","thumbWidth","updateThumbPosition","scrollTop","thumbPosition","scrollLeft","handleThumbMouseDown","e","handleThumbMouseMove","handleThumbMouseUp","deltaY","scrollRatio","deltaX","orientation","html","clsx","nothing","unsafeCSS","styles","DapDSScrollArea","__decorateClass","property"],"mappings":"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"}
+{"version":3,"file":"scroll-area.component.js","sources":["../../../src/components/scroll-area/scroll-area.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './scroll-area.scss?inline'\n\n/**\n * `dap-ds-scroll-area`\n * @summary A component that provides a customizable scrollable area with a custom scrollbar.\n * @element dap-ds-scroll-area\n * @title - Scroll area\n *\n * @slot - The content to be scrolled\n *\n * @csspart viewport - The viewport element that contains the scrollable content\n * @csspart scrollbar - The scrollbar container\n * @csspart base - The main scroll area container.\n * @csspart thumb - The thumb of the scrollbar.\n *\n * @cssprop --dds-scroll-area-radius - The border radius of the scroll area and its elements (default: var(--dds-radius-base))\n * @cssprop --dds-scroll-area-background - The background color of the scroll area (default: var(--dds-background-neutral-base))\n * @cssprop --dds-scroll-area-scrollbar-background - The background color of the scrollbar (default: var(--dds-background-neutral-subtle))\n * @cssprop --dds-scroll-area-thumb-background - The background color of the scrollbar thumb (default: var(--dds-background-neutral-interactive))\n * @cssprop --dds-scroll-area-thumb-hover-background - The background color of the scrollbar thumb on hover (default: var(--dds-background-neutral-interactive-hover))\n * @cssprop --dds-scroll-area-thumb-active-background - The background color of the scrollbar thumb when active (default: var(--dds-background-neutral-interactive-active))\n * @cssprop --dds-scroll-area-transition - The transition timing for scrollbar interactions (default: var(--dds-transition-fast) var(--dds-easing-ease-out))\n * @cssprop --dds-scroll-area-scrollbar-size - The width/height of the scrollbar (default: 10px)\n */\nexport default class DapDSScrollArea extends DdsElement {\n  static tagName = 'dap-ds-scroll-area'\n\n  /**\n   * The orientation of the scrollbar.\n   * @type {'vertical' | 'horizontal' | 'both'}\n   * @default 'vertical'\n   */\n  @property({ type: String }) orientation: 'vertical' | 'horizontal' | 'both' =\n    'vertical'\n\n  static readonly styles = unsafeCSS(styles)\n\n  private viewport: HTMLElement | null = null\n  private scrollbar: HTMLElement | null = null\n  private thumbHorizontal: HTMLElement | null = null\n  private thumbVertical: HTMLElement | null = null\n  private isDragging = false\n  private startY = 0\n  private startScrollTop = 0\n\n  firstUpdated() {\n    this.viewport = this.shadowRoot?.querySelector(\n      '.scroll-area__viewport',\n    ) as HTMLElement\n    this.scrollbar = this.shadowRoot?.querySelector(\n      '.scroll-area__scrollbar',\n    ) as HTMLElement\n    this.thumbHorizontal = this.shadowRoot?.querySelector(\n      '.scroll-area__thumb--horizontal',\n    ) as HTMLElement\n    this.thumbVertical = this.shadowRoot?.querySelector(\n      '.scroll-area__thumb--vertical',\n    ) as HTMLElement\n\n    if (\n      this.viewport &&\n      this.scrollbar &&\n      (this.thumbHorizontal || this.thumbVertical)\n    ) {\n      this.setupScrollbar()\n    }\n  }\n\n  private setupScrollbar() {\n    if (\n      !this.viewport ||\n      !this.scrollbar ||\n      (!this.thumbHorizontal && !this.thumbVertical)\n    )\n      return\n\n    const updateThumbSize = () => {\n      if (this.orientation === 'vertical' || this.orientation === 'both') {\n        const { scrollHeight, clientHeight } = this.viewport!\n        const thumbHeight = (clientHeight / scrollHeight) * clientHeight\n        this.thumbVertical!.style.height = `${thumbHeight}px`\n      }\n\n      if (this.orientation === 'horizontal' || this.orientation === 'both') {\n        const { scrollWidth, clientWidth } = this.viewport!\n        const thumbWidth = (clientWidth / scrollWidth) * clientWidth\n        this.thumbHorizontal!.style.width = `${thumbWidth}px`\n      }\n    }\n\n    const updateThumbPosition = () => {\n      if (this.orientation === 'vertical' || this.orientation === 'both') {\n        const { scrollTop, scrollHeight, clientHeight } = this.viewport!\n        const thumbPosition =\n          (scrollTop / (scrollHeight - clientHeight)) *\n          (clientHeight - this.thumbVertical!.offsetHeight)\n        this.thumbVertical!.style.transform = `translateY(${thumbPosition}px)`\n      }\n\n      if (this.orientation === 'horizontal' || this.orientation === 'both') {\n        const { scrollLeft, scrollWidth, clientWidth } = this.viewport!\n        const thumbPosition =\n          (scrollLeft / (scrollWidth - clientWidth)) *\n          (clientWidth - this.thumbHorizontal!.offsetWidth)\n        this.thumbHorizontal!.style.transform = `translateX(${thumbPosition}px)`\n      }\n    }\n\n    const handleThumbMouseDown = (e: MouseEvent) => {\n      e.preventDefault()\n      this.isDragging = true\n\n      if (this.orientation === 'vertical' || this.orientation === 'both') {\n        this.startY = e.clientY\n        this.startScrollTop = this.viewport!.scrollTop\n      }\n\n      if (this.orientation === 'horizontal' || this.orientation === 'both') {\n        this.startY = e.clientX\n        this.startScrollTop = this.viewport!.scrollLeft\n      }\n\n      document.addEventListener('mousemove', handleThumbMouseMove)\n      document.addEventListener('mouseup', handleThumbMouseUp)\n    }\n\n    const handleThumbMouseMove = (e: MouseEvent) => {\n      if (!this.isDragging) return\n\n      if (this.orientation === 'vertical' || this.orientation === 'both') {\n        const deltaY = e.clientY - this.startY\n        const { scrollHeight, clientHeight } = this.viewport!\n        const scrollRatio = scrollHeight / clientHeight\n        this.viewport!.scrollTop = this.startScrollTop + deltaY * scrollRatio\n      }\n\n      if (this.orientation === 'horizontal' || this.orientation === 'both') {\n        const deltaX = e.clientX - this.startY\n        const { scrollWidth, clientWidth } = this.viewport!\n        const scrollRatio = scrollWidth / clientWidth\n        this.viewport!.scrollLeft = this.startScrollTop + deltaX * scrollRatio\n      }\n    }\n\n    const handleThumbMouseUp = () => {\n      this.isDragging = false\n      document.removeEventListener('mousemove', handleThumbMouseMove)\n      document.removeEventListener('mouseup', handleThumbMouseUp)\n    }\n\n    updateThumbSize()\n    updateThumbPosition()\n\n    this.viewport.addEventListener('scroll', updateThumbPosition)\n    this.viewport.addEventListener('resize', updateThumbSize)\n    this.thumbHorizontal?.addEventListener('mousedown', handleThumbMouseDown)\n    this.thumbVertical?.addEventListener('mousedown', handleThumbMouseDown)\n  }\n\n  getScrollbar(orientation: 'horizontal' | 'vertical') {\n    return html`<div\n      part=\"scrollbar\"\n      class=${clsx(\n        'scroll-area__scrollbar',\n        `scroll-area__scrollbar--${orientation}`,\n      )}>\n      <div part=\"thumb\" class=\"scroll-area__thumb--${orientation}\"></div>\n    </div> `\n  }\n\n  render() {\n    return html`\n      <div part=\"base\" class=\"scroll-area\">\n        <div part=\"viewport\" class=\"scroll-area__viewport\">\n          <slot></slot>\n        </div>\n\n        ${this.orientation === 'horizontal' || this.orientation === 'both'\n          ? this.getScrollbar('horizontal')\n          : nothing}\n        ${this.orientation === 'vertical' || this.orientation === 'both'\n          ? this.getScrollbar('vertical')\n          : nothing}\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSScrollArea","DdsElement","_a","_b","_c","_d","updateThumbSize","scrollHeight","clientHeight","thumbHeight","scrollWidth","clientWidth","thumbWidth","updateThumbPosition","scrollTop","thumbPosition","scrollLeft","handleThumbMouseDown","e","handleThumbMouseMove","handleThumbMouseUp","deltaY","scrollRatio","deltaX","orientation","html","clsx","nothing","unsafeCSS","styles","DapDSScrollArea","__decorateClass","property"],"mappings":"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"}

package/dist/components/scroll-progress/scroll-progress.component.js

@@ -1,19 +1,15 @@
 import { clsx as d } from "../../node_modules/clsx/dist/clsx.js";
-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 h } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as u } from "../../node_modules/@lit/reactive-element/decorators/state.js";
+import { unsafeCSS as u, html as p } from "lit";
+import { property as h, state as g } from "lit/decorators.js";
 import { DdsElement as m } from "../../internal/dds-hu-element.js";
-import { SizedMixin as g } from "../../internal/mixin/sizedMixin.js";
-import f from "./scroll-progress.scss.js";
-import { unsafeCSS as v } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var S = Object.defineProperty, o = (n, e, r, l) => {
-  for (var t = void 0, a = n.length - 1, c; a >= 0; a--)
-    (c = n[a]) && (t = c(e, r, t) || t);
+import { SizedMixin as f } from "../../internal/mixin/sizedMixin.js";
+import v from "./scroll-progress.scss.js";
+var S = Object.defineProperty, n = (o, e, r, l) => {
+  for (var t = void 0, a = o.length - 1, c; a >= 0; a--)
+    (c = o[a]) && (t = c(e, r, t) || t);
   return t && S(e, r, t), t;
 };
-const b = g(m), i = class i extends b {
+const b = f(m), i = class i extends b {
   constructor() {
     super(), this.variant = "brand", this.progress = 0, this.targetElement = null, this.rafId = null, this.handleScroll = () => {
       this.rafId === null && (this.rafId = requestAnimationFrame(() => {
@@ -82,16 +78,16 @@ const b = g(m), i = class i extends b {
     `;
   }
 };
-i.tagName = "dap-ds-scroll-progress", i.styles = v(f);
+i.tagName = "dap-ds-scroll-progress", i.styles = u(v);
 let s = i;
-o([
+n([
   h({ type: String, reflect: !0 })
 ], s.prototype, "target");
-o([
+n([
   h({ type: String, reflect: !0 })
 ], s.prototype, "variant");
-o([
-  u()
+n([
+  g()
 ], s.prototype, "progress");
 export {
   s as default

package/dist/components/scroll-progress/scroll-progress.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-progress.component.js","sources":["../../../src/components/scroll-progress/scroll-progress.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport { SizedMixin } from '../../internal/mixin/sizedMixin'\nimport styles from './scroll-progress.scss?inline'\n\nconst ScrollProgressBaseWithSized = SizedMixin(DdsElement)\n\nexport type ScrollProgressVariant =\n  | 'neutral'\n  | 'brand'\n  | 'negative'\n  | 'positive'\n  | 'inverted'\n\n/**\n * `dap-ds-scroll-progress`\n * @summary A progress bar that displays scroll position, supporting both page-level and container-level scroll tracking.\n * @element dap-ds-scroll-progress\n * @title - Scroll Progress\n *\n * @csspart base - The main scroll progress container.\n * @csspart track - The progress track (background).\n * @csspart fill - The progress fill bar.\n *\n * @cssprop --dds-scroll-progress-z-index - Z-index for fixed positioning (default: 1000)\n * @cssprop --dds-scroll-progress-transition - Transition for progress updates (default: width 0.1s ease-out)\n * @cssprop --dds-scroll-progress-track-color - Background color of the progress track (default: var(--dds-neutral-200))\n * @cssprop --dds-scroll-progress-fill-color-neutral - Fill color for neutral variant\n * @cssprop --dds-scroll-progress-fill-color-brand - Fill color for brand variant\n * @cssprop --dds-scroll-progress-fill-color-negative - Fill color for negative variant\n * @cssprop --dds-scroll-progress-fill-color-positive - Fill color for positive variant\n * @cssprop --dds-scroll-progress-fill-color-inverted - Fill color for inverted variant\n *\n * @property { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' } size - The size of the scroll progress bar. Default is `sm`. See SizedMixin.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\"); see SizedMixin.\n */\nexport default class DapDSScrollProgress extends ScrollProgressBaseWithSized {\n  static tagName = 'dap-ds-scroll-progress'\n\n  /**\n   * CSS selector for scroll container. If not set, tracks global page scroll.\n   * When set, the component uses sticky positioning within the container.\n   */\n  @property({ type: String, reflect: true }) target?: string\n\n  /**\n   * The color variant of the progress indicator.\n   * @type {\"neutral\" | \"brand\" | \"negative\" | \"positive\" | \"inverted\"}\n   */\n  @property({ type: String, reflect: true }) variant: ScrollProgressVariant =\n    'brand'\n\n  /**\n   * Current progress value (0-100).\n   */\n  @state() private progress = 0\n\n  private targetElement: Element | null = null\n  private rafId: number | null = null\n  private boundHandleScroll: () => void\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** Maps effectiveSize from SizedMixin to scroll-progress visual size (xs, sm, md; xxs→xs, lg→md). */\n  private get scrollProgressSize(): string {\n    if (this.effectiveSize === 'xxs') return 'xs'\n    if (this.effectiveSize === 'lg') return 'md'\n    return this.effectiveSize\n  }\n\n  constructor() {\n    super()\n    this.boundHandleScroll = this.handleScroll.bind(this)\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.setupScrollListener()\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.cleanupScrollListener()\n  }\n\n  protected updated(changedProperties: Map<PropertyKey, unknown>): void {\n    super.updated(changedProperties)\n    if (changedProperties.has('target')) {\n      this.cleanupScrollListener()\n      this.setupScrollListener()\n    }\n  }\n\n  private setupScrollListener(): void {\n    if (this.target) {\n      this.targetElement = document.querySelector(this.target)\n      if (this.targetElement) {\n        this.targetElement.addEventListener('scroll', this.boundHandleScroll, {\n          passive: true,\n        })\n      }\n    } else {\n      window.addEventListener('scroll', this.boundHandleScroll, {\n        passive: true,\n      })\n    }\n    // Initial calculation\n    this.handleScroll()\n  }\n\n  private cleanupScrollListener(): void {\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId)\n      this.rafId = null\n    }\n\n    if (this.targetElement) {\n      this.targetElement.removeEventListener('scroll', this.boundHandleScroll)\n      this.targetElement = null\n    } else {\n      window.removeEventListener('scroll', this.boundHandleScroll)\n    }\n  }\n\n  private handleScroll = (): void => {\n    if (this.rafId !== null) {\n      return\n    }\n\n    this.rafId = requestAnimationFrame(() => {\n      this.calculateProgress()\n      this.rafId = null\n    })\n  }\n\n  private calculateProgress(): void {\n    let scrollTop: number\n    let scrollHeight: number\n    let clientHeight: number\n\n    if (this.target && this.targetElement) {\n      scrollTop = this.targetElement.scrollTop\n      scrollHeight = this.targetElement.scrollHeight\n      clientHeight = this.targetElement.clientHeight\n    } else {\n      scrollTop = window.scrollY\n      scrollHeight = document.documentElement.scrollHeight\n      clientHeight = window.innerHeight\n    }\n\n    const scrollableHeight = scrollHeight - clientHeight\n\n    if (scrollableHeight <= 0) {\n      this.progress = 0\n      return\n    }\n\n    this.progress = Math.min(\n      100,\n      Math.max(0, (scrollTop / scrollableHeight) * 100),\n    )\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx(\n          'scroll-progress',\n          `scroll-progress--${this.variant}`,\n          `scroll-progress--${this.scrollProgressSize}`,\n        )}\n        role=\"progressbar\"\n        aria-valuenow=${Math.round(this.progress)}\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-label=${this.ariaLabel ?? 'Scroll progress'}>\n        <div part=\"track\" class=\"scroll-progress__track\">\n          <div\n            part=\"fill\"\n            class=\"scroll-progress__fill\"\n            style=\"width: ${this.progress}%\"></div>\n        </div>\n      </div>\n    `\n  }\n}\n"],"names":["ScrollProgressBaseWithSized","SizedMixin","DdsElement","_DapDSScrollProgress","changedProperties","scrollTop","scrollHeight","clientHeight","scrollableHeight","html","clsx","_a","unsafeCSS","styles","DapDSScrollProgress","__decorateClass","property","state"],"mappings":"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"}
+{"version":3,"file":"scroll-progress.component.js","sources":["../../../src/components/scroll-progress/scroll-progress.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport { SizedMixin } from '../../internal/mixin/sizedMixin'\nimport styles from './scroll-progress.scss?inline'\n\nconst ScrollProgressBaseWithSized = SizedMixin(DdsElement)\n\nexport type ScrollProgressVariant =\n  | 'neutral'\n  | 'brand'\n  | 'negative'\n  | 'positive'\n  | 'inverted'\n\n/**\n * `dap-ds-scroll-progress`\n * @summary A progress bar that displays scroll position, supporting both page-level and container-level scroll tracking.\n * @element dap-ds-scroll-progress\n * @title - Scroll Progress\n *\n * @csspart base - The main scroll progress container.\n * @csspart track - The progress track (background).\n * @csspart fill - The progress fill bar.\n *\n * @cssprop --dds-scroll-progress-z-index - Z-index for fixed positioning (default: 1000)\n * @cssprop --dds-scroll-progress-transition - Transition for progress updates (default: width 0.1s ease-out)\n * @cssprop --dds-scroll-progress-track-color - Background color of the progress track (default: var(--dds-neutral-200))\n * @cssprop --dds-scroll-progress-fill-color-neutral - Fill color for neutral variant\n * @cssprop --dds-scroll-progress-fill-color-brand - Fill color for brand variant\n * @cssprop --dds-scroll-progress-fill-color-negative - Fill color for negative variant\n * @cssprop --dds-scroll-progress-fill-color-positive - Fill color for positive variant\n * @cssprop --dds-scroll-progress-fill-color-inverted - Fill color for inverted variant\n *\n * @property { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' } size - The size of the scroll progress bar. Default is `sm`. See SizedMixin.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\"); see SizedMixin.\n */\nexport default class DapDSScrollProgress extends ScrollProgressBaseWithSized {\n  static tagName = 'dap-ds-scroll-progress'\n\n  /**\n   * CSS selector for scroll container. If not set, tracks global page scroll.\n   * When set, the component uses sticky positioning within the container.\n   */\n  @property({ type: String, reflect: true }) target?: string\n\n  /**\n   * The color variant of the progress indicator.\n   * @type {\"neutral\" | \"brand\" | \"negative\" | \"positive\" | \"inverted\"}\n   */\n  @property({ type: String, reflect: true }) variant: ScrollProgressVariant =\n    'brand'\n\n  /**\n   * Current progress value (0-100).\n   */\n  @state() private progress = 0\n\n  private targetElement: Element | null = null\n  private rafId: number | null = null\n  private boundHandleScroll: () => void\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** Maps effectiveSize from SizedMixin to scroll-progress visual size (xs, sm, md; xxs→xs, lg→md). */\n  private get scrollProgressSize(): string {\n    if (this.effectiveSize === 'xxs') return 'xs'\n    if (this.effectiveSize === 'lg') return 'md'\n    return this.effectiveSize\n  }\n\n  constructor() {\n    super()\n    this.boundHandleScroll = this.handleScroll.bind(this)\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.setupScrollListener()\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.cleanupScrollListener()\n  }\n\n  protected updated(changedProperties: Map<PropertyKey, unknown>): void {\n    super.updated(changedProperties)\n    if (changedProperties.has('target')) {\n      this.cleanupScrollListener()\n      this.setupScrollListener()\n    }\n  }\n\n  private setupScrollListener(): void {\n    if (this.target) {\n      this.targetElement = document.querySelector(this.target)\n      if (this.targetElement) {\n        this.targetElement.addEventListener('scroll', this.boundHandleScroll, {\n          passive: true,\n        })\n      }\n    } else {\n      window.addEventListener('scroll', this.boundHandleScroll, {\n        passive: true,\n      })\n    }\n    // Initial calculation\n    this.handleScroll()\n  }\n\n  private cleanupScrollListener(): void {\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId)\n      this.rafId = null\n    }\n\n    if (this.targetElement) {\n      this.targetElement.removeEventListener('scroll', this.boundHandleScroll)\n      this.targetElement = null\n    } else {\n      window.removeEventListener('scroll', this.boundHandleScroll)\n    }\n  }\n\n  private handleScroll = (): void => {\n    if (this.rafId !== null) {\n      return\n    }\n\n    this.rafId = requestAnimationFrame(() => {\n      this.calculateProgress()\n      this.rafId = null\n    })\n  }\n\n  private calculateProgress(): void {\n    let scrollTop: number\n    let scrollHeight: number\n    let clientHeight: number\n\n    if (this.target && this.targetElement) {\n      scrollTop = this.targetElement.scrollTop\n      scrollHeight = this.targetElement.scrollHeight\n      clientHeight = this.targetElement.clientHeight\n    } else {\n      scrollTop = window.scrollY\n      scrollHeight = document.documentElement.scrollHeight\n      clientHeight = window.innerHeight\n    }\n\n    const scrollableHeight = scrollHeight - clientHeight\n\n    if (scrollableHeight <= 0) {\n      this.progress = 0\n      return\n    }\n\n    this.progress = Math.min(\n      100,\n      Math.max(0, (scrollTop / scrollableHeight) * 100),\n    )\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx(\n          'scroll-progress',\n          `scroll-progress--${this.variant}`,\n          `scroll-progress--${this.scrollProgressSize}`,\n        )}\n        role=\"progressbar\"\n        aria-valuenow=${Math.round(this.progress)}\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-label=${this.ariaLabel ?? 'Scroll progress'}>\n        <div part=\"track\" class=\"scroll-progress__track\">\n          <div\n            part=\"fill\"\n            class=\"scroll-progress__fill\"\n            style=\"width: ${this.progress}%\"></div>\n        </div>\n      </div>\n    `\n  }\n}\n"],"names":["ScrollProgressBaseWithSized","SizedMixin","DdsElement","_DapDSScrollProgress","changedProperties","scrollTop","scrollHeight","clientHeight","scrollableHeight","html","clsx","_a","unsafeCSS","styles","DapDSScrollProgress","__decorateClass","property","state"],"mappings":";;;;;;;;;;;AAQA,MAAMA,IAA8BC,EAAWC,CAAU,GA+BpCC,IAArB,MAAqBA,UAA4BH,EAA4B;AAAA,EAkC3E,cAAc;AACN,UAAA,GArBN,KAAA,UAAA,SAKO,KAAQ,WAAW,GAE5B,KAAQ,gBAAgC,MACxC,KAAQ,QAAuB,MAkE/B,KAAQ,eAAe,MAAY;AAC7B,MAAA,KAAK,UAAU,SAId,KAAA,QAAQ,sBAAsB,MAAM;AACvC,aAAK,kBAAkB,GACvB,KAAK,QAAQ;AAAA,MAAA,CACd;AAAA,IACH,GA7DE,KAAK,oBAAoB,KAAK,aAAa,KAAK,IAAI;AAAA,EAAA;AAAA;AAAA,EARtD,IAAY,qBAA6B;AACnC,WAAA,KAAK,kBAAkB,QAAc,OACrC,KAAK,kBAAkB,OAAa,OACjC,KAAK;AAAA,EAAA;AAAA,EAQd,oBAA0B;AACxB,UAAM,kBAAkB,GACxB,KAAK,oBAAoB;AAAA,EAAA;AAAA,EAG3B,uBAA6B;AAC3B,UAAM,qBAAqB,GAC3B,KAAK,sBAAsB;AAAA,EAAA;AAAA,EAGnB,QAAQI,GAAoD;AACpE,UAAM,QAAQA,CAAiB,GAC3BA,EAAkB,IAAI,QAAQ,MAChC,KAAK,sBAAsB,GAC3B,KAAK,oBAAoB;AAAA,EAC3B;AAAA,EAGM,sBAA4B;AAClC,IAAI,KAAK,UACP,KAAK,gBAAgB,SAAS,cAAc,KAAK,MAAM,GACnD,KAAK,iBACP,KAAK,cAAc,iBAAiB,UAAU,KAAK,mBAAmB;AAAA,MACpE,SAAS;AAAA,IAAA,CACV,KAGI,OAAA,iBAAiB,UAAU,KAAK,mBAAmB;AAAA,MACxD,SAAS;AAAA,IAAA,CACV,GAGH,KAAK,aAAa;AAAA,EAAA;AAAA,EAGZ,wBAA8B;AAChC,IAAA,KAAK,UAAU,SACjB,qBAAqB,KAAK,KAAK,GAC/B,KAAK,QAAQ,OAGX,KAAK,iBACP,KAAK,cAAc,oBAAoB,UAAU,KAAK,iBAAiB,GACvE,KAAK,gBAAgB,QAEd,OAAA,oBAAoB,UAAU,KAAK,iBAAiB;AAAA,EAC7D;AAAA,EAcM,oBAA0B;AAC5B,QAAAC,GACAC,GACAC;AAEA,IAAA,KAAK,UAAU,KAAK,iBACtBF,IAAY,KAAK,cAAc,WAC/BC,IAAe,KAAK,cAAc,cAClCC,IAAe,KAAK,cAAc,iBAElCF,IAAY,OAAO,SACnBC,IAAe,SAAS,gBAAgB,cACxCC,IAAe,OAAO;AAGxB,UAAMC,IAAmBF,IAAeC;AAExC,QAAIC,KAAoB,GAAG;AACzB,WAAK,WAAW;AAChB;AAAA,IAAA;AAGF,SAAK,WAAW,KAAK;AAAA,MACnB;AAAA,MACA,KAAK,IAAI,GAAIH,IAAYG,IAAoB,GAAG;AAAA,IAClD;AAAA,EAAA;AAAA,EAGF,SAAS;;AACA,WAAAC;AAAA;AAAA;AAAA,gBAGKC;AAAA,MACN;AAAA,MACA,oBAAoB,KAAK,OAAO;AAAA,MAChC,oBAAoB,KAAK,kBAAkB;AAAA,IAC5C,CAAA;AAAA;AAAA,wBAEe,KAAK,MAAM,KAAK,QAAQ,CAAC;AAAA;AAAA;AAAA,sBAG5BC,IAAA,KAAK,cAAL,OAAAA,IAAkB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,4BAK5B,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,EAAA;AAKzC;AArJER,EAAO,UAAU,0BAwBDA,EAAA,SAASS,EAAUC,CAAM;AAzB3C,IAAqBC,IAArBX;AAO6CY,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAPtBF,EAOwB,WAAA,QAAA;AAMAC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAbtBF,EAawB,WAAA,SAAA;AAM1BC,EAAA;AAAA,EAAhBE,EAAM;AAAA,GAnBYH,EAmBF,WAAA,UAAA;"}

package/dist/components/search/search.component.d.ts

@@ -21,7 +21,7 @@ import { default as ComboboxBaseElement } from '../combobox/comboboxBase';
  * @property {string} description - The description of the search.
  * @property {string} tooltip - The tooltip of the search.
  * @property {'xs' | 'sm' | 'lg'} size - The size of the search.
- * @property {'none' | 'typehead' | 'autocomplete' | 'manual'} searchMode - The search mode of the select. Default is 'none'.
+ * @property {'none' | 'typehead' | 'autocomplete' | 'manual'} searchMode - The search mode of the search. `none` (default) is a free-text search without a suggestion list; `autocomplete` shows suggestions filtered by their starting text as you type; `manual` shows the suggestions you supply on `dds-input` without filtering them. `typehead` is deprecated for the search: it is meant for the select, and the list does not open in this mode.
  * @property {boolean} disabled - Whether the search is disabled.
  * @property {boolean} required - Whether the search is required.
  * @property {boolean} readonly - Whether the search is readonly.
@@ -80,6 +80,11 @@ import { default as ComboboxBaseElement } from '../combobox/comboboxBase';
  * @csspart tooltip - The tooltip of the search.
  * @csspart option-list - The option list of the search.
  * @csspart input - The input of the search.
+ * @csspart chips - The container of the selected chips.
+ * @csspart indicator-icon - The dropdown indicator icon.
+ * @csspart label-base - The base of the label.
+ * @csspart label-required - The required indicator of the label.
+ * @csspart label-optional - The optional indicator of the label.
  *
  * @slot - The default slot for the options.
  *

package/dist/components/search/search.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"search.component.js","sources":["../../../src/components/search/search.component.ts"],"sourcesContent":["import ComboboxBaseElement from '../combobox/comboboxBase'\n\n/**\n * `dap-ds-search`\n * @summary A select is a form element that allows the user to select one option from a set.\n * @element dap-ds-search\n * @title - Search\n *\n * @event dds-change - Fired when the search value changes.\n * @event dds-blur - Emitted when the search loses focus.\n * @event dds-focus - Emitted when the search gains focus.\n * @event dds-clear - Emitted when the search is cleared.\n * @event dds-search - Emitted when the search input value changes.\n * @event dds-input - Emitted when typing happens in the search input.\n *\n * @property {string} value - The value of the search.\n * @property {string} placeholder - The placeholder of the search.\n * @property { 'top' | 'top-start' | 'top-end' | 'right' | 'right-start'| 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'} placement - The placement of the select dropdown. Default is 'bottom-start'.\n * @property {boolean} opened - Whether the search dropdown is opened.\n * @property {boolean} sync - The sync mode of the search dropdown. How the dropdown item size is synced to the trigger element'.\n * @property {string} label - The label of the search.\n * @property {string} description - The description of the search.\n * @property {string} tooltip - The tooltip of the search.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the search.\n * @property {'none' | 'typehead' | 'autocomplete' | 'manual'} searchMode - The search mode of the select. Default is 'none'.\n * @property {boolean} disabled - Whether the search is disabled.\n * @property {boolean} required - Whether the search is required.\n * @property {boolean} readonly - Whether the search is readonly.\n * @property {boolean} autofocus - Whether the search is autofocus.\n * @property {string} clearButton - Whether the search is clearable. Default is 'true'.\n * @property {string} feedback - The feedback content of the search.\n * @property {'negative' | 'positive' | 'warning' | 'info'} feedbackType - The feedback type of the search.\n * @property {boolean} allowManualInput - Whether the search allows manual input, or free text.\n * @property {boolean} searchForText - Whether the search should search for the selected item text.\n * @property {boolean} textComplete - Whether the search should not complete the text.\n * @property {string} searchButtonAriaLabel - The aria label of the search button.\n * @property {boolean} disableSearchWhenEmpty - When true, the search button is automatically disabled while the input is empty and re-enabled once the user types. Default is false.\n * @property {boolean} openOnEmpty - Whether the search should open on empty results.\n * @property {string} selectable - Show the selected item check mark in the dropdown. Default is 'false'.\n * @property {boolean} noAnimation - Whether the search open indicator should be animated. Default is true.\n * @property {boolean} subtle - Subtle color version\n *\n * @cssproperty --dds-combobox-background - The background color of the combobox. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-combobox-border-color - The border color of the combobox. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-combobox-border-width - The border width of the combobox. (default: var(--dds-border-width-base, 1px))\n * @cssproperty --dds-combobox-border-radius - The border radius of the combobox. (default: var(--dds-radius-base))\n * @cssproperty --dds-combobox-text-color - The text color of the combobox. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-combobox-placeholder-color - The placeholder text color. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-combobox-disabled-background - The background color when disabled. (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-combobox-disabled-text - The text color when disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-combobox-error-border - The border color for error state. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-combobox-success-border - The border color for success state. (default: var(--dds-border-positive-base))\n * @cssproperty --dds-combobox-icon-color - The color of the icons. (default: var(--dds-text-icon-neutral-subtle))\n * @cssproperty --dds-combobox-loading-spinner-color - The color of the loading spinner. (default: var(--dds-icon-neutral-base))\n * @cssproperty --dds-combobox-clear-icon-color - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled))\n * @cssproperty --dds-combobox-popup-background - The background color of the popup. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-combobox-popup-shadow - The box shadow of the popup. (default: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06))\n * @cssproperty --dds-combobox-icon-opened-transform - The transform of the icon when the combobox is opened (default: rotate(90deg)).\n * @cssproperty --dds-combobox-padding-xs - The padding for extra small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-padding-sm - The padding for small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-padding-lg - The padding for large size. (default: var(--dds-spacing-300))\n * @cssproperty --dds-combobox-padding-horizontal - The horizontal padding. (default: var(--dds-spacing-300))\n * @cssproperty --dds-combobox-padding-vertical - The vertical padding. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-gap - The gap between elements. (default: var(--dds-spacing-100))\n * @cssproperty --dds-combobox-icon-gap - The gap between icons. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-action-gap - The gap between action elements. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-action-padding - The padding for action elements. (default: var(--dds-spacing-300))\n * @cssproperty --dds-combobox-clear-icon-width - The width of the clear icon. (default: var(--dds-spacing-800))\n * @cssproperty --dds-combobox-dropdown-icon-right - The right position of the dropdown icon. (default: var(--dds-spacing-600))\n * @cssproperty --dds-combobox-min-width - The minimum width of the combobox. (default: 7.5rem)\n * @cssproperty --dds-combobox-chips-gap - The gap between chips. (default: var(--dds-spacing-100))\n * @cssproperty --dds-combobox-chips-padding - The padding for chips. (default: var(--dds-spacing-100))\n * @cssproperty --dds-combobox-chips-max-height - The maximum height of the chips. (default: 120px)\n *\n * @csspart base - The main search container.\n * @csspart trigger - The trigger button of the search.\n * @csspart search-button - The trailing search icon button.\n * @csspart label - The label of the search.\n * @csspart description - The description of the search.\n * @csspart feedback - The feedback of the search.\n * @csspart tooltip - The tooltip of the search.\n * @csspart option-list - The option list of the search.\n * @csspart input - The input of the search.\n *\n * @slot - The default slot for the options.\n *\n */\nexport default class DapDSSearch extends ComboboxBaseElement {\n  static tagName = 'dap-ds-search'\n\n  constructor() {\n    super()\n    this.selectable = 'false'\n    this.search = true\n    this.noAnimation = true\n    this.searchOnValueSet = 'false'\n    this.searchMode = 'none'\n    this.textComplete = false\n  }\n\n  render() {\n    return this.renderCombobox()\n  }\n}\n"],"names":["_DapDSSearch","ComboboxBaseElement","DapDSSearch"],"mappings":";AAuFA,MAAqBA,IAArB,MAAqBA,UAAoBC,EAAoB;AAAA,EAG3D,cAAc;AACN,UAAA,GACN,KAAK,aAAa,SAClB,KAAK,SAAS,IACd,KAAK,cAAc,IACnB,KAAK,mBAAmB,SACxB,KAAK,aAAa,QAClB,KAAK,eAAe;AAAA,EAAA;AAAA,EAGtB,SAAS;AACP,WAAO,KAAK,eAAe;AAAA,EAAA;AAE/B;AAfED,EAAO,UAAU;AADnB,IAAqBE,IAArBF;"}
+{"version":3,"file":"search.component.js","sources":["../../../src/components/search/search.component.ts"],"sourcesContent":["import ComboboxBaseElement from '../combobox/comboboxBase'\n\n/**\n * `dap-ds-search`\n * @summary A select is a form element that allows the user to select one option from a set.\n * @element dap-ds-search\n * @title - Search\n *\n * @event dds-change - Fired when the search value changes.\n * @event dds-blur - Emitted when the search loses focus.\n * @event dds-focus - Emitted when the search gains focus.\n * @event dds-clear - Emitted when the search is cleared.\n * @event dds-search - Emitted when the search input value changes.\n * @event dds-input - Emitted when typing happens in the search input.\n *\n * @property {string} value - The value of the search.\n * @property {string} placeholder - The placeholder of the search.\n * @property { 'top' | 'top-start' | 'top-end' | 'right' | 'right-start'| 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'} placement - The placement of the select dropdown. Default is 'bottom-start'.\n * @property {boolean} opened - Whether the search dropdown is opened.\n * @property {boolean} sync - The sync mode of the search dropdown. How the dropdown item size is synced to the trigger element'.\n * @property {string} label - The label of the search.\n * @property {string} description - The description of the search.\n * @property {string} tooltip - The tooltip of the search.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the search.\n * @property {'none' | 'typehead' | 'autocomplete' | 'manual'} searchMode - The search mode of the search. `none` (default) is a free-text search without a suggestion list; `autocomplete` shows suggestions filtered by their starting text as you type; `manual` shows the suggestions you supply on `dds-input` without filtering them. `typehead` is deprecated for the search: it is meant for the select, and the list does not open in this mode.\n * @property {boolean} disabled - Whether the search is disabled.\n * @property {boolean} required - Whether the search is required.\n * @property {boolean} readonly - Whether the search is readonly.\n * @property {boolean} autofocus - Whether the search is autofocus.\n * @property {string} clearButton - Whether the search is clearable. Default is 'true'.\n * @property {string} feedback - The feedback content of the search.\n * @property {'negative' | 'positive' | 'warning' | 'info'} feedbackType - The feedback type of the search.\n * @property {boolean} allowManualInput - Whether the search allows manual input, or free text.\n * @property {boolean} searchForText - Whether the search should search for the selected item text.\n * @property {boolean} textComplete - Whether the search should not complete the text.\n * @property {string} searchButtonAriaLabel - The aria label of the search button.\n * @property {boolean} disableSearchWhenEmpty - When true, the search button is automatically disabled while the input is empty and re-enabled once the user types. Default is false.\n * @property {boolean} openOnEmpty - Whether the search should open on empty results.\n * @property {string} selectable - Show the selected item check mark in the dropdown. Default is 'false'.\n * @property {boolean} noAnimation - Whether the search open indicator should be animated. Default is true.\n * @property {boolean} subtle - Subtle color version\n *\n * @cssproperty --dds-combobox-background - The background color of the combobox. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-combobox-border-color - The border color of the combobox. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-combobox-border-width - The border width of the combobox. (default: var(--dds-border-width-base, 1px))\n * @cssproperty --dds-combobox-border-radius - The border radius of the combobox. (default: var(--dds-radius-base))\n * @cssproperty --dds-combobox-text-color - The text color of the combobox. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-combobox-placeholder-color - The placeholder text color. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-combobox-disabled-background - The background color when disabled. (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-combobox-disabled-text - The text color when disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-combobox-error-border - The border color for error state. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-combobox-success-border - The border color for success state. (default: var(--dds-border-positive-base))\n * @cssproperty --dds-combobox-icon-color - The color of the icons. (default: var(--dds-text-icon-neutral-subtle))\n * @cssproperty --dds-combobox-loading-spinner-color - The color of the loading spinner. (default: var(--dds-icon-neutral-base))\n * @cssproperty --dds-combobox-clear-icon-color - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled))\n * @cssproperty --dds-combobox-popup-background - The background color of the popup. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-combobox-popup-shadow - The box shadow of the popup. (default: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06))\n * @cssproperty --dds-combobox-icon-opened-transform - The transform of the icon when the combobox is opened (default: rotate(90deg)).\n * @cssproperty --dds-combobox-padding-xs - The padding for extra small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-padding-sm - The padding for small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-padding-lg - The padding for large size. (default: var(--dds-spacing-300))\n * @cssproperty --dds-combobox-padding-horizontal - The horizontal padding. (default: var(--dds-spacing-300))\n * @cssproperty --dds-combobox-padding-vertical - The vertical padding. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-gap - The gap between elements. (default: var(--dds-spacing-100))\n * @cssproperty --dds-combobox-icon-gap - The gap between icons. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-action-gap - The gap between action elements. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-action-padding - The padding for action elements. (default: var(--dds-spacing-300))\n * @cssproperty --dds-combobox-clear-icon-width - The width of the clear icon. (default: var(--dds-spacing-800))\n * @cssproperty --dds-combobox-dropdown-icon-right - The right position of the dropdown icon. (default: var(--dds-spacing-600))\n * @cssproperty --dds-combobox-min-width - The minimum width of the combobox. (default: 7.5rem)\n * @cssproperty --dds-combobox-chips-gap - The gap between chips. (default: var(--dds-spacing-100))\n * @cssproperty --dds-combobox-chips-padding - The padding for chips. (default: var(--dds-spacing-100))\n * @cssproperty --dds-combobox-chips-max-height - The maximum height of the chips. (default: 120px)\n *\n * @csspart base - The main search container.\n * @csspart trigger - The trigger button of the search.\n * @csspart search-button - The trailing search icon button.\n * @csspart label - The label of the search.\n * @csspart description - The description of the search.\n * @csspart feedback - The feedback of the search.\n * @csspart tooltip - The tooltip of the search.\n * @csspart option-list - The option list of the search.\n * @csspart input - The input of the search.\n * @csspart chips - The container of the selected chips.\n * @csspart indicator-icon - The dropdown indicator icon.\n * @csspart label-base - The base of the label.\n * @csspart label-required - The required indicator of the label.\n * @csspart label-optional - The optional indicator of the label.\n *\n * @slot - The default slot for the options.\n *\n */\nexport default class DapDSSearch extends ComboboxBaseElement {\n  static tagName = 'dap-ds-search'\n\n  constructor() {\n    super()\n    this.selectable = 'false'\n    this.search = true\n    this.noAnimation = true\n    this.searchOnValueSet = 'false'\n    this.searchMode = 'none'\n    this.textComplete = false\n  }\n\n  render() {\n    return this.renderCombobox()\n  }\n}\n"],"names":["_DapDSSearch","ComboboxBaseElement","DapDSSearch"],"mappings":";AA4FA,MAAqBA,IAArB,MAAqBA,UAAoBC,EAAoB;AAAA,EAG3D,cAAc;AACN,UAAA,GACN,KAAK,aAAa,SAClB,KAAK,SAAS,IACd,KAAK,cAAc,IACnB,KAAK,mBAAmB,SACxB,KAAK,aAAa,QAClB,KAAK,eAAe;AAAA,EAAA;AAAA,EAGtB,SAAS;AACP,WAAO,KAAK,eAAe;AAAA,EAAA;AAE/B;AAfED,EAAO,UAAU;AADnB,IAAqBE,IAArBF;"}