@sky.ui/core 0.0.41 → 0.0.43

package/dist/sky-chip/sky-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"sky-chip.js","sources":["../../src/sky-chip/sky-chip.ts"],"sourcesContent":["import { LitElement, html, css, nothing, unsafeCSS } from \"lit\";\r\nimport { customElement, property } from \"lit/decorators.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { styleMap } from \"lit/directives/style-map.js\";\r\nimport { classMap } from \"lit/directives/class-map.js\";\r\nimport {\r\n  isDefaultColorToken,\r\n  resolveAccentColorForToken,\r\n  resolveColor,\r\n  resolveInkColorForToken,\r\n  resolveTextColorForToken,\r\n} from \"../helper/utils/color-resolver\";\r\nimport { cssOnFillEnhance } from \"../helper/utils/contrast-color\";\r\nimport { resolveRadius } from \"../helper/utils/size-resolver\";\r\nimport { SkyIcon } from \"../sky-icon/sky-icon.js\";\r\n\r\nexport type SkyChipVariant =\r\n  | \"solid\"\r\n  | \"flat\"\r\n  | \"shadow\"\r\n  | \"bordered\"\r\n  | \"faded\"\r\n  | \"light\"\r\n  | \"dot\";\r\nexport type SkyChipRemovedEventDetail = { label: string };\r\n\r\n/**\r\n * @element sky-chip\r\n *\r\n * @summary Customizable chip for tags or selections with icon support, removable action, loading state, and visual variants.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/chip\r\n * @dependency sky-icon\r\n *\r\n * @slot - Default slot for the chip label or any other content.\r\n * @slot prefix - Optional prefix content that can be placed before the label.\r\n * @slot suffix - Optional suffix content that can be placed after the label.\r\n *\r\n * @csspart chip - The visual representation of the chip component.\r\n * @csspart icon - The icons displayed within the chip.\r\n * @csspart close-button - The button for removing the chip.\r\n * @csspart loading-spinner - The spinner that appears during loading.\r\n * @csspart error-message - The error message displayed for invalid chips.\r\n *\r\n * @property {string} label - The label displayed on the chip. Default: `\"\"`.\r\n * @property {boolean} removable - Whether the chip can be removed by the user. Default: `false`.\r\n * @property {string} color - The background color of the chip, can accept tokens or custom CSS color. Default: `\"primary\"`.\r\n * @property {string} radius - The border radius of the chip. Default: `\"full\"`.\r\n * @property {string} size - The size of the chip, which affects padding and font size. Default: `\"md\"`.\r\n * @property {string} iconL - Left icon; shown only when the `prefix` slot is empty. Default: `null`.\r\n * @property {string} iconR - Right icon; shown only when the `suffix` slot is empty. Default: `null`.\r\n * @property {boolean} loading - Whether the chip is in a loading state. Default: `false`.\r\n * @property {boolean} disabled - Whether the chip is disabled. Default: `false`.\r\n * @property {SkyChipVariant} variant - Visual style variant. Default: `\"flat\"`.\r\n * @method removeChip Dispatches `chip-removed` and removes the chip from the DOM.\r\n *\r\n * @fires {CustomEvent<SkyChipRemovedEventDetail>} chip-removed - Fired when the chip is removed by user action.\r\n *\r\n * @Behavior\r\n * - Uses default slot content when present, otherwise falls back to `label`.\r\n * - `iconL` / `iconR` render only when `prefix` / `suffix` slots have no meaningful content.\r\n * - Emits `chip-removed` and removes itself when removable close action is triggered.\r\n * - Resolves color tokens and radius/size presets to CSS values at render time.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-chip label=\"Active Filter\" removable iconl=\"ion:funnel\" variant=\"light\"></sky-chip>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-chip label=\"Active Filter\" removable iconl=\"ion:funnel\" variant=\"light\"></sky-chip>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return <sky-chip label=\"Active Filter\" removable iconl=\"ion:funnel\" variant=\"light\"></sky-chip>;\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-chip\")\r\nexport class SkyChip extends LitElement {\r\n\r\n  static dependencies: Record<string, CustomElementConstructor> = {\r\n    \"sky-icon\": SkyIcon,\r\n  };\r\n\r\n  @property({ type: String }) label: string = \"\";\r\n  @property({ type: Boolean }) removable: boolean = false;\r\n\r\n  /** Accepts preset tokens OR any valid CSS color (e.g., #0af, rgb(), var(--x)) */\r\n  @property({ type: String }) color: string = \"primary\";\r\n\r\n  /** Radius can be any CSS radius value */\r\n  @property({ type: String }) radius: string = \"full\";\r\n\r\n  /** Size controls padding + font-size (xs, sm, md, lg, xl or numeric like \"14px\") */\r\n  @property({ type: String }) size: string = \"md\";\r\n\r\n  @property({ type: String }) iconL: string | null = null;\r\n  @property({ type: String }) iconR: string | null = null;\r\n  @property({ type: Boolean }) loading: boolean = false;\r\n  @property({ type: Boolean, reflect: true }) disabled: boolean = false;\r\n  @property({ type: String, reflect: true }) variant: SkyChipVariant = \"flat\";\r\n\r\n  static override styles = css`\r\n    :host {\r\n      display: inline-block;\r\n      font-family: var(--sky-font);\r\n      z-index: 1;\r\n    }\r\n\r\n    :host([disabled]) {\r\n      pointer-events: none;\r\n      opacity: var(--sky-opacity-disabled, 0.6);\r\n    }\r\n\r\n    .chip {\r\n      position: relative;\r\n      display: flex;\r\n      gap: 2px;\r\n      width: max-content;\r\n      align-items: center;\r\n      border-radius: var(--sky-radius-secondary);\r\n      color: var(--chip-text-color);\r\n      font-weight: var(--sky-font-weight-medium, 500);\r\n      transition: background-color 0.3s ease, color 0.3s ease,\r\n        box-shadow 0.2s ease, transform 0.2s ease;\r\n      cursor: pointer;\r\n      background-color: var(--chip-bg-color);\r\n    }\r\n\r\n    .close-button {\r\n      position: relative;\r\n      display: flex;\r\n      height: 18px;\r\n      width: 18px;\r\n      justify-content: center;\r\n      font-size: inherit;\r\n      align-items: center;\r\n      background-color: var(--sky-hover-primary);\r\n      backdrop-filter: none;\r\n      -webkit-backdrop-filter: none;\r\n      border: none;\r\n      border-radius: var(--sky-radius-full);\r\n      cursor: pointer;\r\n      color: var(--sky-text-primary);\r\n      transition: color 0.2s ease, background-color 0.2s ease;\r\n    }\r\n\r\n    .close-button sky-icon {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      line-height: 1;\r\n      transition: color 0.3s ease;\r\n    }\r\n\r\n    :dir(rtl) .close-button {\r\n      margin-right: var(--sky-space-1, 5px);\r\n      margin-left: unset;\r\n    }\r\n\r\n    .close-button:hover {\r\n      color: var(--sky-danger-primary);\r\n    }\r\n\r\n    .close-button:focus-visible {\r\n      outline: none;\r\n      box-shadow: var(--sky-focus-ring);\r\n    }\r\n\r\n    .close-button:hover sky-icon,\r\n    .close-button:focus-visible sky-icon{\r\n      color: var(--sky-danger-primary);\r\n      outline: none;\r\n    }\r\n\r\n    .icon {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: var(--chip-text-color);\r\n    }\r\n\r\n    sky-icon {\r\n      display: inline-block;\r\n      width: 1em;\r\n      height: 1em;\r\n    }\r\n\r\n    ::slotted([slot=\"prefix\"]),\r\n    ::slotted([slot=\"suffix\"]) {\r\n      display: inline-flex;\r\n      align-items: center;\r\n    }\r\n\r\n    .loading-overlay {\r\n      position: absolute;\r\n      inset: 0;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      background: var(--sky-overlay-primary);\r\n      border-radius: inherit;\r\n    }\r\n\r\n    .loading-spinner {\r\n      width: 14px;\r\n      height: 14px;\r\n      border: 2px solid var(--sky-border-light, var(--sky-text-tertiary));\r\n      border-top-color: var(--chip-bg-color);\r\n      border-radius: var(--sky-radius-full);\r\n      animation: spin 0.8s linear infinite;\r\n    }\r\n\r\n    @keyframes spin {\r\n      from {\r\n        transform: rotate(0deg);\r\n      }\r\n      to {\r\n        transform: rotate(360deg);\r\n      }\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .chip,\r\n      .close-button,\r\n      .close-button sky-icon {\r\n        transition: none;\r\n      }\r\n      .loading-spinner {\r\n        animation: none;\r\n      }\r\n    }\r\n\r\n    .chip.bordered {\r\n      border: 1px solid var(--chip-ink-color, var(--chip-bg-color));\r\n      color: var(--chip-ink-color, var(--chip-bg-color));\r\n      background: transparent;\r\n    }\r\n\r\n    .chip.light {\r\n      background: transparent;\r\n      color: var(--chip-ink-color, var(--chip-bg-color));\r\n    }\r\n\r\n    .chip.flat {\r\n      box-shadow: none;\r\n      background: color-mix(\r\n        in srgb,\r\n        var(--chip-fill-color, var(--chip-bg-color)) 20%,\r\n        transparent\r\n      );\r\n      color: var(--chip-ink-color, var(--chip-bg-color));\r\n    }\r\n\r\n    .chip.faded {\r\n      background-color: var(--sky-glass-primary);\r\n      border: 1px solid var(--sky-text-tertiary);\r\n      color: var(--chip-ink-color, var(--chip-bg-color));\r\n    }\r\n\r\n    .chip.shadow {\r\n      box-shadow: var(--sky-box-shadow-primary);\r\n    }\r\n\r\n    .chip.shadow:hover {\r\n      box-shadow: var(--sky-box-shadow-hover);\r\n    }\r\n\r\n    .chip.faded .icon,\r\n    .chip.flat .icon,\r\n    .chip.light .icon,\r\n    .chip.dot .icon,\r\n    .chip.bordered .icon {\r\n      color: var(--chip-ink-color, var(--chip-bg-color));\r\n    }\r\n\r\n    .chip.dot {\r\n      padding-left: var(--sky-space-5, 20px) !important;\r\n      position: relative;\r\n      background-color: transparent;\r\n      border: 1px solid var(--sky-text-tertiary);\r\n      color: var(--sky-text-primary);\r\n    }\r\n\r\n    .chip.dot::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      left: var(--sky-space-1\\\\.5, 6px);\r\n      top: 50%;\r\n      transform: translateY(-50%);\r\n      width: var(--sky-space-2, 8px);\r\n      height: var(--sky-space-2, 8px);\r\n      border-radius: var(--sky-radius-full);\r\n      background-color: var(--chip-accent-color, var(--chip-bg-color));\r\n    }\r\n\r\n    /* Solid / shadow chips: enhance label + icon FG against fill. */\r\n    ${unsafeCSS(\r\n      cssOnFillEnhance([\r\n        {\r\n          selector: \".chip.solid, .chip.shadow\",\r\n          fillVar: \"--chip-bg-color\",\r\n        },\r\n        {\r\n          selector: \".chip.solid .icon, .chip.shadow .icon\",\r\n          fillVar: \"--chip-bg-color\",\r\n        },\r\n      ]),\r\n    )}\r\n  `;\r\n\r\n  /** Updates host CSS variables from current color token/value. */\r\n  protected override updated(): void {\r\n    const bgColor = resolveColor(this.color);\r\n    const textColor = resolveTextColorForToken(this.color);\r\n\r\n    this.style.setProperty(\"--chip-bg-color\", bgColor);\r\n    this.style.setProperty(\"--chip-text-color\", textColor);\r\n\r\n    if (isDefaultColorToken(this.color)) {\r\n      this.style.setProperty(\"--chip-ink-color\", resolveInkColorForToken(this.color));\r\n      this.style.setProperty(\r\n        \"--chip-accent-color\",\r\n        resolveAccentColorForToken(this.color),\r\n      );\r\n      this.style.setProperty(\"--chip-fill-color\", \"var(--sky-hover-tertiary)\");\r\n    } else {\r\n      this.style.removeProperty(\"--chip-ink-color\");\r\n      this.style.removeProperty(\"--chip-accent-color\");\r\n      this.style.removeProperty(\"--chip-fill-color\");\r\n    }\r\n  }\r\n\r\n  /** Size resolver similar to button: controls padding + font-size */\r\n  private _resolveSize(\r\n    input: string\r\n  ): {\r\n    padding: string;\r\n    fontSize: string;\r\n  } {\r\n    const presets: Record<string, { padding: string; fontSize: string }> = {\r\n      xs: { padding: \"2px 4px\", fontSize: \"11px\" },\r\n      sm: { padding: \"3px 6px\", fontSize: \"12px\" },\r\n      md: { padding: \"4px 8px\", fontSize: \"13px\" },\r\n      lg: { padding: \"5px 10px\", fontSize: \"14px\" },\r\n      xl: { padding: \"6px 12px\", fontSize: \"15px\" },\r\n    };\r\n\r\n    if (presets[input]) return presets[input];\r\n\r\n    const m = String(input).trim().match(/^([\\d.]+)(px|rem|em)?$/i);\r\n    const unit = m?.[2] || \"px\";\r\n    const fsNum = m ? parseFloat(m[1]) : 13;\r\n    const fs = `${fsNum}${unit}`;\r\n\r\n    const clamp = (n: number, min: number, max: number) =>\r\n      Math.max(min, Math.min(max, n));\r\n\r\n    const py = clamp(fsNum * 0.4, 2, 10);\r\n    const px = clamp(fsNum * 0.8, 6, 16);\r\n\r\n    const to = (n: number) => `${Math.round(n * 100) / 100}${unit}`;\r\n\r\n    return {\r\n      padding: `${to(py)} ${to(px)}`,\r\n      fontSize: fs,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Dispatches `chip-removed` and removes the chip from the DOM.\r\n   *\r\n   * @returns {void}\r\n   */\r\n  public removeChip(): void {\r\n    const removeEvent = new CustomEvent<SkyChipRemovedEventDetail>(\"chip-removed\", {\r\n      detail: { label: this.label },\r\n      bubbles: true,\r\n      composed: true,\r\n    });\r\n    this.dispatchEvent(removeEvent);\r\n    this.remove();\r\n  }\r\n\r\n  private _slotHasMeaningfulContent(slotEl: HTMLSlotElement): boolean {\r\n    const nodes = slotEl.assignedNodes({ flatten: true });\r\n    return nodes.some((n) =>\r\n      n.nodeType === Node.ELEMENT_NODE\r\n        ? true\r\n        : (n.textContent ?? \"\").trim().length > 0\r\n    );\r\n  }\r\n\r\n  /** Light DOM check works before the shadow tree exists (first render). */\r\n  private _hasPrefixSlotContent(): boolean {\r\n    if (this.querySelector('[slot=\"prefix\"]')) return true;\r\n    const slot = this.shadowRoot?.querySelector(\r\n      'slot[name=\"prefix\"]',\r\n    ) as HTMLSlotElement | null;\r\n    return slot ? this._slotHasMeaningfulContent(slot) : false;\r\n  }\r\n\r\n  private _hasSuffixSlotContent(): boolean {\r\n    if (this.querySelector('[slot=\"suffix\"]')) return true;\r\n    const slot = this.shadowRoot?.querySelector(\r\n      'slot[name=\"suffix\"]',\r\n    ) as HTMLSlotElement | null;\r\n    return slot ? this._slotHasMeaningfulContent(slot) : false;\r\n  }\r\n\r\n  private _hasDefaultSlotContent(): boolean {\r\n    for (const n of Array.from(this.childNodes)) {\r\n      if (n.nodeType === Node.ELEMENT_NODE) {\r\n        const slot = (n as Element).getAttribute(\"slot\");\r\n        if (slot === \"prefix\" || slot === \"suffix\") continue;\r\n        return true;\r\n      }\r\n      if ((n.textContent ?? \"\").trim().length > 0) return true;\r\n    }\r\n    const slot = this.shadowRoot?.querySelector(\r\n      \"slot:not([name])\",\r\n    ) as HTMLSlotElement | null;\r\n    return slot ? this._slotHasMeaningfulContent(slot) : false;\r\n  }\r\n\r\n  private _onSlotChange = (): void => {\r\n    this.requestUpdate();\r\n  };\r\n\r\n  override render() {\r\n    const sizeDef = this._resolveSize(this.size);\r\n    const chipStyle = {\r\n      padding: sizeDef.padding,\r\n      borderRadius: resolveRadius(this.radius),\r\n      fontSize: sizeDef.fontSize,\r\n    };\r\n\r\n    return html`\r\n      <div\r\n        class=${classMap({\r\n          chip: true,\r\n          [this.variant]: true,\r\n          loading: this.loading,\r\n        })}\r\n        style=${styleMap(chipStyle)}\r\n        part=\"chip\"\r\n      >\r\n        <slot name=\"prefix\" @slotchange=${this._onSlotChange}></slot>\r\n        ${when(!this._hasPrefixSlotContent() && this.iconL, () => html`\r\n          <sky-icon class=\"icon\" part=\"icon\" icon=\"${this.iconL!}\"></sky-icon>\r\n        `)}\r\n        <slot @slotchange=${this._onSlotChange}></slot>\r\n        ${this._hasDefaultSlotContent() ? nothing : this.label}\r\n        <slot name=\"suffix\" @slotchange=${this._onSlotChange}></slot>\r\n        ${when(!this._hasSuffixSlotContent() && this.iconR, () => html`\r\n          <sky-icon class=\"icon icon-right\" part=\"icon\" icon=\"${this.iconR!}\"></sky-icon>\r\n        `)}\r\n        ${when(this.removable, () => html`\r\n          <button\r\n            class=\"close-button\"\r\n            part=\"close-button\"\r\n            type=\"button\"\r\n            aria-label=\"Remove chip\"\r\n            @click=${this.removeChip}\r\n          >\r\n            <sky-icon icon=\"ion:close\"></sky-icon>\r\n          </button>\r\n        `)}\r\n        ${when(this.loading, () => html`\r\n          <div class=\"loading-overlay\" part=\"loading-overlay\">\r\n            <div class=\"loading-spinner\" part=\"loading-spinner\"></div>\r\n          </div>\r\n        `)}\r\n      </div>\r\n    `;\r\n  }\r\n}"],"names":["SkyChip","LitElement","constructor","super","arguments","this","label","removable","color","radius","size","iconL","iconR","loading","disabled","variant","_onSlotChange","requestUpdate","updated","bgColor","resolveColor","textColor","resolveTextColorForToken","style","setProperty","isDefaultColorToken","resolveInkColorForToken","resolveAccentColorForToken","removeProperty","_resolveSize","input","presets","xs","padding","fontSize","sm","md","lg","xl","m","String","trim","match","unit","fsNum","parseFloat","fs","clamp","n","min","max","Math","py","px","to","round","removeChip","removeEvent","CustomEvent","detail","bubbles","composed","dispatchEvent","remove","_slotHasMeaningfulContent","slotEl","assignedNodes","flatten","some","nodeType","Node","ELEMENT_NODE","textContent","length","_hasPrefixSlotContent","querySelector","slot","shadowRoot","_hasSuffixSlotContent","_hasDefaultSlotContent","Array","from","childNodes","getAttribute","render","sizeDef","chipStyle","borderRadius","resolveRadius","html","classMap","chip","styleMap","when","nothing","dependencies","SkyIcon","styles","css","unsafeCSS","cssOnFillEnhance","selector","fillVar","__decorateClass","property","type","prototype","Boolean","reflect","customElement"],"mappings":"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"}
+{"version":3,"file":"sky-chip.js","sources":["../../src/sky-chip/sky-chip.ts"],"sourcesContent":["import { LitElement, html, css, nothing, unsafeCSS } from \"lit\";\r\nimport { customElement, property } from \"lit/decorators.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { styleMap } from \"lit/directives/style-map.js\";\r\nimport { classMap } from \"lit/directives/class-map.js\";\r\nimport {\r\n  isDefaultColorToken,\r\n  resolveAccentColorForToken,\r\n  resolveColor,\r\n  resolveInkColorForToken,\r\n} from \"../helper/utils/color-resolver\";\r\nimport { cssOnFillEnhance, ON_COLOR_FALLBACK_LIGHT } from \"../helper/utils/contrast-color\";\r\nimport { resolveRadius } from \"../helper/utils/size-resolver\";\r\nimport { PresetController } from \"../helper/controllers/preset-controller\";\r\nimport { SkyIcon } from \"../sky-icon/sky-icon.js\";\r\nimport { skyFocusRingHostStyles } from \"../helper/styles/focus-ring\";\r\n\r\nexport type SkyChipVariant =\r\n  | \"solid\"\r\n  | \"flat\"\r\n  | \"shadow\"\r\n  | \"bordered\"\r\n  | \"faded\"\r\n  | \"light\"\r\n  | \"dot\";\r\nexport type SkyChipRemovedEventDetail = { label: string };\r\n\r\n/**\r\n * @element sky-chip\r\n *\r\n * @summary Customizable chip for tags or selections with icon support, removable action, loading state, and visual variants.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://sky-ui.com/components/chip\r\n * @dependency sky-icon\r\n *\r\n * @slot - Default slot for the chip label or any other content.\r\n * @slot prefix - Optional prefix content that can be placed before the label.\r\n * @slot suffix - Optional suffix content that can be placed after the label.\r\n *\r\n * @csspart chip - The visual representation of the chip component.\r\n * @csspart icon - The icons displayed within the chip.\r\n * @csspart close-button - The button for removing the chip.\r\n * @csspart loading-spinner - The spinner that appears during loading.\r\n * @csspart error-message - The error message displayed for invalid chips.\r\n *\r\n * @property {string} label - The label displayed on the chip. Default: `\"\"`.\r\n * @property {boolean} removable - Whether the chip can be removed by the user. Default: `false`.\r\n * @property {string} color - The background color of the chip, can accept tokens or custom CSS color. Default: `\"primary\"`.\r\n * @property {string} radius - The border radius of the chip. Default: `\"full\"`.\r\n * @property {string} size - The size of the chip, which affects padding and font size. Default: `\"md\"`.\r\n * @property {string} iconL - Left icon; shown only when the `prefix` slot is empty. Default: `null`.\r\n * @property {string} iconR - Right icon; shown only when the `suffix` slot is empty. Default: `null`.\r\n * @property {boolean} loading - Whether the chip is in a loading state. Default: `false`.\r\n * @property {boolean} disabled - Whether the chip is disabled. Default: `false`.\r\n * @property {SkyChipVariant} variant - Visual style variant. Default: `\"flat\"`.\r\n * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\r\n * @method removeChip Dispatches `chip-removed` and removes the chip from the DOM.\r\n *\r\n * @fires {CustomEvent<SkyChipRemovedEventDetail>} chip-removed - Fired when the chip is removed by user action.\r\n *\r\n * @Behavior\r\n * - Uses default slot content when present, otherwise falls back to `label`.\r\n * - `iconL` / `iconR` render only when `prefix` / `suffix` slots have no meaningful content.\r\n * - Emits `chip-removed` and removes itself when removable close action is triggered.\r\n * - Resolves color tokens and radius/size presets to CSS values at render time.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-chip label=\"Active Filter\" removable iconl=\"ion:funnel\" variant=\"light\"></sky-chip>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-chip label=\"Active Filter\" removable iconl=\"ion:funnel\" variant=\"light\"></sky-chip>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return <sky-chip label=\"Active Filter\" removable iconl=\"ion:funnel\" variant=\"light\"></sky-chip>;\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-chip\")\r\nexport class SkyChip extends LitElement {\r\n\r\n  static dependencies: Record<string, CustomElementConstructor> = {\r\n    \"sky-icon\": SkyIcon,\r\n  };\r\n\r\n  @property({ type: String }) label: string = \"\";\r\n  @property({ type: Boolean }) removable: boolean = false;\r\n\r\n  /** Accepts preset tokens OR any valid CSS color (e.g., #0af, rgb(), var(--x)) */\r\n  @property({ type: String }) color: string = \"primary\";\r\n\r\n  /** Radius can be any CSS radius value */\r\n  @property({ type: String }) radius: string = \"full\";\r\n\r\n  /** Size controls padding + font-size (xs, sm, md, lg, xl or numeric like \"14px\") */\r\n  @property({ type: String }) size: string = \"md\";\r\n\r\n  @property({ type: String }) iconL: string | null = null;\r\n  @property({ type: String }) iconR: string | null = null;\r\n  @property({ type: Boolean }) loading: boolean = false;\r\n  @property({ type: Boolean, reflect: true }) disabled: boolean = false;\r\n  @property({ type: String, reflect: true }) variant: SkyChipVariant = \"flat\";\r\n\r\n  /** Named prop preset from nearest `sky-config-provider`. */\r\n  @property({ type: String, reflect: true }) preset = \"\";\r\n\r\n  private _presets = new PresetController(this);\r\n\r\n  static override styles = [\r\n    skyFocusRingHostStyles,\r\n    css`\r\n    :host {\r\n      display: inline-block;\r\n      font-family: var(--sky-font);\r\n      z-index: 1;\r\n      --sky-focus-ring-color: var(--chip-bg-color, var(--sky-active-primary));\r\n    }\r\n\r\n    :host([disabled]) {\r\n      pointer-events: none;\r\n      opacity: var(--sky-opacity-disabled, 0.6);\r\n    }\r\n\r\n    .chip {\r\n      position: relative;\r\n      display: flex;\r\n      gap: 2px;\r\n      width: max-content;\r\n      align-items: center;\r\n      border-radius: var(--sky-radius-secondary);\r\n      color: var(--chip-text-color);\r\n      font-weight: var(--sky-font-weight-medium, 500);\r\n      transition: background-color 0.3s ease, color 0.3s ease,\r\n        box-shadow 0.2s ease, transform 0.2s ease;\r\n      cursor: pointer;\r\n      background-color: var(--chip-bg-color);\r\n    }\r\n\r\n    .close-button {\r\n      position: relative;\r\n      display: flex;\r\n      height: 18px;\r\n      width: 18px;\r\n      justify-content: center;\r\n      font-size: inherit;\r\n      align-items: center;\r\n      background-color: var(--sky-hover-primary);\r\n      backdrop-filter: none;\r\n      -webkit-backdrop-filter: none;\r\n      border: none;\r\n      border-radius: var(--sky-radius-full);\r\n      cursor: pointer;\r\n      color: var(--sky-text-primary);\r\n      transition: color 0.2s ease, background-color 0.2s ease;\r\n    }\r\n\r\n    .close-button sky-icon {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      line-height: 1;\r\n      transition: color 0.3s ease;\r\n    }\r\n\r\n    :dir(rtl) .close-button {\r\n      margin-right: var(--sky-space-1, 5px);\r\n      margin-left: unset;\r\n    }\r\n\r\n    .close-button:hover {\r\n      color: var(--sky-danger-primary);\r\n    }\r\n\r\n    .close-button:focus-visible {\r\n      outline: none;\r\n      box-shadow: var(--sky-focus-ring);\r\n    }\r\n\r\n    .close-button:hover sky-icon,\r\n    .close-button:focus-visible sky-icon{\r\n      color: var(--sky-danger-primary);\r\n      outline: none;\r\n    }\r\n\r\n    .icon {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: var(--chip-text-color);\r\n    }\r\n\r\n    sky-icon {\r\n      display: inline-block;\r\n      width: 1em;\r\n      height: 1em;\r\n    }\r\n\r\n    ::slotted([slot=\"prefix\"]),\r\n    ::slotted([slot=\"suffix\"]) {\r\n      display: inline-flex;\r\n      align-items: center;\r\n    }\r\n\r\n    .loading-overlay {\r\n      position: absolute;\r\n      inset: 0;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      background: var(--sky-overlay-primary);\r\n      border-radius: inherit;\r\n    }\r\n\r\n    .loading-spinner {\r\n      width: 14px;\r\n      height: 14px;\r\n      border: 2px solid var(--sky-border-light, var(--sky-text-tertiary));\r\n      border-top-color: var(--chip-bg-color);\r\n      border-radius: var(--sky-radius-full);\r\n      animation: spin 0.8s linear infinite;\r\n    }\r\n\r\n    @keyframes spin {\r\n      from {\r\n        transform: rotate(0deg);\r\n      }\r\n      to {\r\n        transform: rotate(360deg);\r\n      }\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .chip,\r\n      .close-button,\r\n      .close-button sky-icon {\r\n        transition: none;\r\n      }\r\n      .loading-spinner {\r\n        animation: none;\r\n      }\r\n    }\r\n\r\n    .chip.bordered {\r\n      border: 1px solid var(--chip-ink-color, var(--chip-bg-color));\r\n      color: var(--chip-ink-color, var(--chip-bg-color));\r\n      background: transparent;\r\n    }\r\n\r\n    .chip.light {\r\n      background: transparent;\r\n      color: var(--chip-ink-color, var(--chip-bg-color));\r\n    }\r\n\r\n    .chip.flat {\r\n      box-shadow: none;\r\n      background: color-mix(\r\n        in srgb,\r\n        var(--chip-fill-color, var(--chip-bg-color)) 20%,\r\n        transparent\r\n      );\r\n      color: var(--chip-ink-color, var(--chip-bg-color));\r\n    }\r\n\r\n    .chip.faded {\r\n      background-color: var(--sky-glass-primary);\r\n      border: 1px solid var(--sky-text-tertiary);\r\n      color: var(--chip-ink-color, var(--chip-bg-color));\r\n    }\r\n\r\n    .chip.shadow {\r\n      box-shadow: var(--sky-box-shadow-primary);\r\n    }\r\n\r\n    .chip.shadow:hover {\r\n      box-shadow: var(--sky-box-shadow-hover);\r\n    }\r\n\r\n    .chip.faded .icon,\r\n    .chip.flat .icon,\r\n    .chip.light .icon,\r\n    .chip.dot .icon,\r\n    .chip.bordered .icon {\r\n      color: var(--chip-ink-color, var(--chip-bg-color));\r\n    }\r\n\r\n    .chip.dot {\r\n      padding-left: var(--sky-space-5, 20px) !important;\r\n      position: relative;\r\n      background-color: transparent;\r\n      border: 1px solid var(--sky-text-tertiary);\r\n      color: var(--sky-text-primary);\r\n    }\r\n\r\n    .chip.dot::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      left: var(--sky-space-1\\\\.5, 6px);\r\n      top: 50%;\r\n      transform: translateY(-50%);\r\n      width: var(--sky-space-2, 8px);\r\n      height: var(--sky-space-2, 8px);\r\n      border-radius: var(--sky-radius-full);\r\n      background-color: var(--chip-accent-color, var(--chip-bg-color));\r\n    }\r\n\r\n    /* Solid / shadow chips: enhance label + icon FG against fill. */\r\n    ${unsafeCSS(\r\n      cssOnFillEnhance([\r\n        {\r\n          selector: \".chip.solid, .chip.shadow\",\r\n          fillVar: \"--chip-bg-color\",\r\n        },\r\n        {\r\n          selector: \".chip.solid .icon, .chip.shadow .icon\",\r\n          fillVar: \"--chip-bg-color\",\r\n        },\r\n      ]),\r\n    )}\r\n  `,\r\n  ];\r\n\r\n  /** Updates host CSS variables from current color token/value. */\r\n  protected override updated(): void {\r\n    const bgColor = resolveColor(this.color);\r\n    const textColor = isDefaultColorToken(this.color)\r\n      ? \"var(--sky-text-primary)\"\r\n      : ON_COLOR_FALLBACK_LIGHT;\r\n\r\n    this.style.setProperty(\"--chip-bg-color\", bgColor);\r\n    this.style.setProperty(\"--chip-text-color\", textColor);\r\n\r\n    if (isDefaultColorToken(this.color)) {\r\n      this.style.setProperty(\"--chip-ink-color\", resolveInkColorForToken(this.color));\r\n      this.style.setProperty(\r\n        \"--chip-accent-color\",\r\n        resolveAccentColorForToken(this.color),\r\n      );\r\n      this.style.setProperty(\"--chip-fill-color\", \"var(--sky-hover-tertiary)\");\r\n    } else {\r\n      this.style.removeProperty(\"--chip-ink-color\");\r\n      this.style.removeProperty(\"--chip-accent-color\");\r\n      this.style.removeProperty(\"--chip-fill-color\");\r\n    }\r\n  }\r\n\r\n  /** Size resolver similar to button: controls padding + font-size */\r\n  private _resolveSize(\r\n    input: string\r\n  ): {\r\n    padding: string;\r\n    fontSize: string;\r\n  } {\r\n    const presets: Record<string, { padding: string; fontSize: string }> = {\r\n      xs: { padding: \"2px 4px\", fontSize: \"11px\" },\r\n      sm: { padding: \"3px 6px\", fontSize: \"12px\" },\r\n      md: { padding: \"4px 8px\", fontSize: \"13px\" },\r\n      lg: { padding: \"5px 10px\", fontSize: \"14px\" },\r\n      xl: { padding: \"6px 12px\", fontSize: \"15px\" },\r\n    };\r\n\r\n    if (presets[input]) return presets[input];\r\n\r\n    const m = String(input).trim().match(/^([\\d.]+)(px|rem|em)?$/i);\r\n    const unit = m?.[2] || \"px\";\r\n    const fsNum = m ? parseFloat(m[1]) : 13;\r\n    const fs = `${fsNum}${unit}`;\r\n\r\n    const clamp = (n: number, min: number, max: number) =>\r\n      Math.max(min, Math.min(max, n));\r\n\r\n    const py = clamp(fsNum * 0.4, 2, 10);\r\n    const px = clamp(fsNum * 0.8, 6, 16);\r\n\r\n    const to = (n: number) => `${Math.round(n * 100) / 100}${unit}`;\r\n\r\n    return {\r\n      padding: `${to(py)} ${to(px)}`,\r\n      fontSize: fs,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Dispatches `chip-removed` and removes the chip from the DOM.\r\n   *\r\n   * @returns {void}\r\n   */\r\n  public removeChip(): void {\r\n    const removeEvent = new CustomEvent<SkyChipRemovedEventDetail>(\"chip-removed\", {\r\n      detail: { label: this.label },\r\n      bubbles: true,\r\n      composed: true,\r\n    });\r\n    this.dispatchEvent(removeEvent);\r\n    this.remove();\r\n  }\r\n\r\n  private _slotHasMeaningfulContent(slotEl: HTMLSlotElement): boolean {\r\n    const nodes = slotEl.assignedNodes({ flatten: true });\r\n    return nodes.some((n) =>\r\n      n.nodeType === Node.ELEMENT_NODE\r\n        ? true\r\n        : (n.textContent ?? \"\").trim().length > 0\r\n    );\r\n  }\r\n\r\n  /** Light DOM check works before the shadow tree exists (first render). */\r\n  private _hasPrefixSlotContent(): boolean {\r\n    if (this.querySelector('[slot=\"prefix\"]')) return true;\r\n    const slot = this.shadowRoot?.querySelector(\r\n      'slot[name=\"prefix\"]',\r\n    ) as HTMLSlotElement | null;\r\n    return slot ? this._slotHasMeaningfulContent(slot) : false;\r\n  }\r\n\r\n  private _hasSuffixSlotContent(): boolean {\r\n    if (this.querySelector('[slot=\"suffix\"]')) return true;\r\n    const slot = this.shadowRoot?.querySelector(\r\n      'slot[name=\"suffix\"]',\r\n    ) as HTMLSlotElement | null;\r\n    return slot ? this._slotHasMeaningfulContent(slot) : false;\r\n  }\r\n\r\n  private _hasDefaultSlotContent(): boolean {\r\n    for (const n of Array.from(this.childNodes)) {\r\n      if (n.nodeType === Node.ELEMENT_NODE) {\r\n        const slot = (n as Element).getAttribute(\"slot\");\r\n        if (slot === \"prefix\" || slot === \"suffix\") continue;\r\n        return true;\r\n      }\r\n      if ((n.textContent ?? \"\").trim().length > 0) return true;\r\n    }\r\n    const slot = this.shadowRoot?.querySelector(\r\n      \"slot:not([name])\",\r\n    ) as HTMLSlotElement | null;\r\n    return slot ? this._slotHasMeaningfulContent(slot) : false;\r\n  }\r\n\r\n  private _onSlotChange = (): void => {\r\n    this.requestUpdate();\r\n  };\r\n\r\n  override render() {\r\n    const sizeDef = this._resolveSize(this.size);\r\n    const chipStyle = {\r\n      padding: sizeDef.padding,\r\n      borderRadius: resolveRadius(this.radius),\r\n      fontSize: sizeDef.fontSize,\r\n    };\r\n\r\n    return html`\r\n      <div\r\n        class=${classMap({\r\n          chip: true,\r\n          [this.variant]: true,\r\n          loading: this.loading,\r\n        })}\r\n        style=${styleMap(chipStyle)}\r\n        part=\"chip\"\r\n      >\r\n        <slot name=\"prefix\" @slotchange=${this._onSlotChange}></slot>\r\n        ${when(!this._hasPrefixSlotContent() && this.iconL, () => html`\r\n          <sky-icon class=\"icon\" part=\"icon\" icon=\"${this.iconL!}\"></sky-icon>\r\n        `)}\r\n        <slot @slotchange=${this._onSlotChange}></slot>\r\n        ${this._hasDefaultSlotContent() ? nothing : this.label}\r\n        <slot name=\"suffix\" @slotchange=${this._onSlotChange}></slot>\r\n        ${when(!this._hasSuffixSlotContent() && this.iconR, () => html`\r\n          <sky-icon class=\"icon icon-right\" part=\"icon\" icon=\"${this.iconR!}\"></sky-icon>\r\n        `)}\r\n        ${when(this.removable, () => html`\r\n          <button\r\n            class=\"close-button\"\r\n            part=\"close-button\"\r\n            type=\"button\"\r\n            aria-label=\"Remove chip\"\r\n            @click=${this.removeChip}\r\n          >\r\n            <sky-icon icon=\"ion:close\"></sky-icon>\r\n          </button>\r\n        `)}\r\n        ${when(this.loading, () => html`\r\n          <div class=\"loading-overlay\" part=\"loading-overlay\">\r\n            <div class=\"loading-spinner\" part=\"loading-spinner\"></div>\r\n          </div>\r\n        `)}\r\n      </div>\r\n    `;\r\n  }\r\n}"],"names":["SkyChip","LitElement","constructor","super","arguments","this","label","removable","color","radius","size","iconL","iconR","loading","disabled","variant","preset","_presets","PresetController","_onSlotChange","requestUpdate","updated","bgColor","resolveColor","textColor","isDefaultColorToken","ON_COLOR_FALLBACK_LIGHT","style","setProperty","resolveInkColorForToken","resolveAccentColorForToken","removeProperty","_resolveSize","input","presets","xs","padding","fontSize","sm","md","lg","xl","m","String","trim","match","unit","fsNum","parseFloat","fs","clamp","n","min","max","Math","py","px","to","round","removeChip","removeEvent","CustomEvent","detail","bubbles","composed","dispatchEvent","remove","_slotHasMeaningfulContent","slotEl","assignedNodes","flatten","some","nodeType","Node","ELEMENT_NODE","textContent","length","_hasPrefixSlotContent","querySelector","slot","shadowRoot","_hasSuffixSlotContent","_hasDefaultSlotContent","Array","from","childNodes","getAttribute","render","sizeDef","chipStyle","borderRadius","resolveRadius","html","classMap","chip","styleMap","when","nothing","dependencies","SkyIcon","styles","skyFocusRingHostStyles","css","unsafeCSS","cssOnFillEnhance","selector","fillVar","__decorateClass","property","type","prototype","Boolean","reflect","customElement"],"mappings":"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"}

package/dist/sky-col/sky-col.d.ts

@@ -9,7 +9,7 @@ export type SkyColJustify = "start" | "center" | "end" | "space-between" | "spac
  * @status stable
  * @since 1.0.0
  *
- * @documentation https://library.sky-ui.com/components/grid
+ * @documentation https://sky-ui.com/components/grid
  *
  * @slot title - Optional title content shown before main content.
  * @slot - Default content for the column body.
@@ -26,6 +26,7 @@ export type SkyColJustify = "start" | "center" | "end" | "space-between" | "spac
  * @property {number | undefined} md - Responsive span for medium breakpoint.
  * @property {number | undefined} lg - Responsive span for large breakpoint.
  * @property {number | undefined} xl - Responsive span for extra-large breakpoint.
+ * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`.
  * @method refreshLayout Reapplies internal CSS variables from current properties.
  *
  * @Behavior
@@ -70,6 +71,9 @@ export declare class SkyCol extends LitElement {
     md?: number;
     lg?: number;
     xl?: number;
+    /** Named prop preset from nearest `sky-config-provider`. */
+    preset: string;
+    private _presets;
     static styles: import("lit").CSSResult;
     firstUpdated(): void;
     updated(changed: Map<string | number | symbol, unknown>): void;

package/dist/sky-col/sky-col.js

@@ -1,9 +1,9 @@
-import{property as t,customElement as s}from"lit/decorators.js";import{when as r}from"lit/directives/when.js";import{css as e,LitElement as o,html as i}from"lit";var a=Object.defineProperty,l=Object.getOwnPropertyDescriptor,p=(t,s,r,e)=>{for(var o,i=e>1?void 0:e?l(s,r):s,p=t.length-1;p>=0;p--)(o=t[p])&&(i=(e?o(s,r,i):o(i))||i);return e&&i&&a(s,r,i),i};let n=class extends o{constructor(){super(...arguments),this.span=1,this.gap="0",this.justify="center",this.align="stretch"}firstUpdated(){this.syncVars()}updated(t){(t.has("span")||t.has("gap")||t.has("justify")||t.has("align")||t.has("sm")||t.has("md")||t.has("lg")||t.has("xl")||t.has("start")||t.has("end"))&&this.syncVars()}refreshLayout(){this.syncVars()}syncVars(){this.style.setProperty("--col-span",String(this.span)),this.style.setProperty("--col-gap",this.gap),this.style.setProperty("--col-justify",this.justify),this.style.setProperty("--col-align",this.align),this.sm&&this.style.setProperty("--col-span-sm",String(this.sm)),this.md&&this.style.setProperty("--col-span-md",String(this.md)),this.lg&&this.style.setProperty("--col-span-lg",String(this.lg)),this.xl&&this.style.setProperty("--col-span-xl",String(this.xl)),this.start&&this.style.setProperty("--col-start",String(this.start)),this.end&&this.style.setProperty("--col-end",String(this.end))}render(){const t=this.start||this.end?`grid-column: ${this.start??"auto"} / ${this.end??"auto"};`:"";return i`
-      <div class="col" style=${r(this.start||this.end,()=>t,()=>"")} part="col">
+import{property as t,customElement as s}from"lit/decorators.js";import{when as e}from"lit/directives/when.js";import{css as r,LitElement as o,html as i}from"lit";import{PresetController as p}from"../helper/controllers/preset-controller.js";var a=Object.defineProperty,l=Object.getOwnPropertyDescriptor,n=(t,s,e,r)=>{for(var o,i=r>1?void 0:r?l(s,e):s,p=t.length-1;p>=0;p--)(o=t[p])&&(i=(r?o(s,e,i):o(i))||i);return r&&i&&a(s,e,i),i};let h=class extends o{constructor(){super(...arguments),this.span=1,this.gap="0",this.justify="center",this.align="stretch",this.preset="",this._presets=new p(this)}firstUpdated(){this.syncVars()}updated(t){(t.has("span")||t.has("gap")||t.has("justify")||t.has("align")||t.has("sm")||t.has("md")||t.has("lg")||t.has("xl")||t.has("start")||t.has("end"))&&this.syncVars()}refreshLayout(){this.syncVars()}syncVars(){this.style.setProperty("--col-span",String(this.span)),this.style.setProperty("--col-gap",this.gap),this.style.setProperty("--col-justify",this.justify),this.style.setProperty("--col-align",this.align),this.sm&&this.style.setProperty("--col-span-sm",String(this.sm)),this.md&&this.style.setProperty("--col-span-md",String(this.md)),this.lg&&this.style.setProperty("--col-span-lg",String(this.lg)),this.xl&&this.style.setProperty("--col-span-xl",String(this.xl)),this.start&&this.style.setProperty("--col-start",String(this.start)),this.end&&this.style.setProperty("--col-end",String(this.end))}render(){const t=this.start||this.end?`grid-column: ${this.start??"auto"} / ${this.end??"auto"};`:"";return i`
+      <div class="col" style=${e(this.start||this.end,()=>t,()=>"")} part="col">
         <slot name="title"></slot>
         <slot></slot>
       </div>
-    `}};n.styles=e`
+    `}};h.styles=r`
     :host {
       display: contents;
     }
@@ -42,5 +42,5 @@ import{property as t,customElement as s}from"lit/decorators.js";import{when as r
         grid-column: span var(--col-span-xl, var(--col-span, var(--col-span, 1)));
       }
     }
-  `,p([t({type:Number})],n.prototype,"span",2),p([t({type:String})],n.prototype,"gap",2),p([t({type:String})],n.prototype,"justify",2),p([t({type:String})],n.prototype,"align",2),p([t({type:Number})],n.prototype,"start",2),p([t({type:Number})],n.prototype,"end",2),p([t({type:Number})],n.prototype,"sm",2),p([t({type:Number})],n.prototype,"md",2),p([t({type:Number})],n.prototype,"lg",2),p([t({type:Number})],n.prototype,"xl",2),n=p([s("sky-col")],n);export{n as SkyCol};
+  `,n([t({type:Number})],h.prototype,"span",2),n([t({type:String})],h.prototype,"gap",2),n([t({type:String})],h.prototype,"justify",2),n([t({type:String})],h.prototype,"align",2),n([t({type:Number})],h.prototype,"start",2),n([t({type:Number})],h.prototype,"end",2),n([t({type:Number})],h.prototype,"sm",2),n([t({type:Number})],h.prototype,"md",2),n([t({type:Number})],h.prototype,"lg",2),n([t({type:Number})],h.prototype,"xl",2),n([t({type:String,reflect:!0})],h.prototype,"preset",2),h=n([s("sky-col")],h);export{h as SkyCol};
 //# sourceMappingURL=sky-col.js.map

package/dist/sky-col/sky-col.js.map

@@ -1 +1 @@
-{"version":3,"file":"sky-col.js","sources":["../../src/sky-col/sky-col.ts"],"sourcesContent":["import { customElement, property } from \"lit/decorators.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { LitElement, html, css } from \"lit\";\r\n\r\nexport type SkyColAlign = \"stretch\" | \"start\" | \"center\" | \"end\" | \"baseline\";\r\nexport type SkyColJustify =\r\n  | \"start\"\r\n  | \"center\"\r\n  | \"end\"\r\n  | \"space-between\"\r\n  | \"space-around\"\r\n  | \"space-evenly\";\r\n\r\n/**\r\n * @element sky-col\r\n *\r\n * @summary Grid/flex column helper with responsive spans and configurable alignment/justification.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/grid\r\n *\r\n * @slot title - Optional title content shown before main content.\r\n * @slot - Default content for the column body.\r\n *\r\n * @csspart col - The column container.\r\n *\r\n * @property {number} span - Default column span.\r\n * @property {string} gap - Internal content gap CSS value.\r\n * @property {SkyColJustify} justify - Content justification within the column.\r\n * @property {SkyColAlign} align - Content alignment within the column.\r\n * @property {number | undefined} start - Optional explicit grid column start.\r\n * @property {number | undefined} end - Optional explicit grid column end.\r\n * @property {number | undefined} sm - Responsive span for small breakpoint.\r\n * @property {number | undefined} md - Responsive span for medium breakpoint.\r\n * @property {number | undefined} lg - Responsive span for large breakpoint.\r\n * @property {number | undefined} xl - Responsive span for extra-large breakpoint.\r\n * @method refreshLayout Reapplies internal CSS variables from current properties.\r\n *\r\n * @Behavior\r\n * - Applies span and responsive spans through host CSS variables.\r\n * - Supports explicit `start`/`end` grid positioning when provided.\r\n * - Automatically updates layout variables when relevant properties change.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-col span=\"4\" md=\"6\" justify=\"space-between\" align=\"center\">\r\n *   <span slot=\"title\">Revenue</span>\r\n *   Q2 performance details\r\n * </sky-col>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-col span=\"4\" md=\"6\" justify=\"space-between\" align=\"center\">\r\n *     <span slot=\"title\">Revenue</span>\r\n *     Q2 performance details\r\n *   </sky-col>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <sky-col span=\"4\" md=\"6\" justify=\"space-between\" align=\"center\">\r\n *       <span slot=\"title\">Revenue</span>\r\n *       Q2 performance details\r\n *     </sky-col>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-col\")\r\nexport class SkyCol extends LitElement {\r\n  @property({ type: Number }) span = 1;\r\n  @property({ type: String }) gap = \"0\";\r\n  @property({ type: String }) justify: SkyColJustify = \"center\";\r\n  @property({ type: String }) align: SkyColAlign = \"stretch\";\r\n\r\n  @property({ type: Number }) start?: number;\r\n  @property({ type: Number }) end?: number;\r\n\r\n  @property({ type: Number }) sm?: number;\r\n  @property({ type: Number }) md?: number;\r\n  @property({ type: Number }) lg?: number;\r\n  @property({ type: Number }) xl?: number;\r\n\r\n  static override styles = css`\r\n    :host {\r\n      display: contents;\r\n    }\r\n\r\n    .col {\r\n      display: flex;\r\n      flex-direction: column;\r\n      grid-column: span var(--col-span, 1);\r\n      gap: var(--col-gap, 0);\r\n      align-items: var(--col-align, stretch);\r\n      justify-content: var(--col-justify, center);\r\n    }\r\n\r\n    ::slotted([slot=\"title\"]) {\r\n      font-weight: bold;\r\n      margin-bottom: 0.5rem;\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      .col {\r\n        grid-column: span var(--col-span-sm, var(--col-span, 1));\r\n      }\r\n    }\r\n    @media (max-width: 992px) {\r\n      .col {\r\n        grid-column: span var(--col-span-md, var(--col-span, 1));\r\n      }\r\n    }\r\n    @media (max-width: 1200px) {\r\n      .col {\r\n        grid-column: span var(--col-span-lg, var(--col-span, 1));\r\n      }\r\n    }\r\n    @media (min-width: 1201px) {\r\n      .col {\r\n        grid-column: span var(--col-span-xl, var(--col-span, var(--col-span, 1)));\r\n      }\r\n    }\r\n  `;\r\n\r\n  override firstUpdated(): void {\r\n    this.syncVars();\r\n  }\r\n\r\n  override updated(changed: Map<string | number | symbol, unknown>): void {\r\n    if (\r\n      changed.has(\"span\") ||\r\n      changed.has(\"gap\") ||\r\n      changed.has(\"justify\") ||\r\n      changed.has(\"align\") ||\r\n      changed.has(\"sm\") ||\r\n      changed.has(\"md\") ||\r\n      changed.has(\"lg\") ||\r\n      changed.has(\"xl\") ||\r\n      changed.has(\"start\") ||\r\n      changed.has(\"end\")\r\n    ) {\r\n      this.syncVars();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Reapplies internal CSS variables from current properties.\r\n   *\r\n   * @returns {void}\r\n   */\r\n  public refreshLayout(): void {\r\n    this.syncVars();\r\n  }\r\n\r\n  private syncVars(): void {\r\n    this.style.setProperty(\"--col-span\", String(this.span));\r\n    this.style.setProperty(\"--col-gap\", this.gap);\r\n    this.style.setProperty(\"--col-justify\", this.justify);\r\n    this.style.setProperty(\"--col-align\", this.align);\r\n\r\n    if (this.sm) this.style.setProperty(\"--col-span-sm\", String(this.sm));\r\n    if (this.md) this.style.setProperty(\"--col-span-md\", String(this.md));\r\n    if (this.lg) this.style.setProperty(\"--col-span-lg\", String(this.lg));\r\n    if (this.xl) this.style.setProperty(\"--col-span-xl\", String(this.xl));\r\n\r\n    if (this.start) this.style.setProperty(\"--col-start\", String(this.start));\r\n    if (this.end) this.style.setProperty(\"--col-end\", String(this.end));\r\n  }\r\n\r\n  override render() {\r\n    const gridStyle =\r\n      this.start || this.end\r\n        ? `grid-column: ${this.start ?? \"auto\"} / ${this.end ?? \"auto\"};`\r\n        : \"\";\r\n\r\n    return html`\r\n      <div class=\"col\" style=${when(this.start || this.end, () => gridStyle, () => \"\")} part=\"col\">\r\n        <slot name=\"title\"></slot>\r\n        <slot></slot>\r\n      </div>\r\n    `;\r\n  }\r\n}"],"names":["SkyCol","LitElement","constructor","super","arguments","this","span","gap","justify","align","firstUpdated","syncVars","updated","changed","has","refreshLayout","style","setProperty","String","sm","md","lg","xl","start","end","render","gridStyle","html","when","styles","css","__decorateClass","property","type","Number","prototype","customElement"],"mappings":"kWAwEO,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,GAAAC,SAAAC,WACuBC,KAAAC,KAAO,EACPD,KAAAE,IAAM,IACNF,KAAAG,QAAyB,SACzBH,KAAAI,MAAqB,SAAA,CAmDxC,YAAAC,GACPL,KAAKM,UACP,CAES,OAAAC,CAAQC,IAEbA,EAAQC,IAAI,SACZD,EAAQC,IAAI,QACZD,EAAQC,IAAI,YACZD,EAAQC,IAAI,UACZD,EAAQC,IAAI,OACZD,EAAQC,IAAI,OACZD,EAAQC,IAAI,OACZD,EAAQC,IAAI,OACZD,EAAQC,IAAI,UACZD,EAAQC,IAAI,SAEZT,KAAKM,UAET,CAOO,aAAAI,GACLV,KAAKM,UACP,CAEQ,QAAAA,GACNN,KAAKW,MAAMC,YAAY,aAAcC,OAAOb,KAAKC,OACjDD,KAAKW,MAAMC,YAAY,YAAaZ,KAAKE,KACzCF,KAAKW,MAAMC,YAAY,gBAAiBZ,KAAKG,SAC7CH,KAAKW,MAAMC,YAAY,cAAeZ,KAAKI,OAEvCJ,KAAKc,IAAId,KAAKW,MAAMC,YAAY,gBAAiBC,OAAOb,KAAKc,KAC7Dd,KAAKe,IAAIf,KAAKW,MAAMC,YAAY,gBAAiBC,OAAOb,KAAKe,KAC7Df,KAAKgB,IAAIhB,KAAKW,MAAMC,YAAY,gBAAiBC,OAAOb,KAAKgB,KAC7DhB,KAAKiB,IAAIjB,KAAKW,MAAMC,YAAY,gBAAiBC,OAAOb,KAAKiB,KAE7DjB,KAAKkB,OAAOlB,KAAKW,MAAMC,YAAY,cAAeC,OAAOb,KAAKkB,QAC9DlB,KAAKmB,KAAKnB,KAAKW,MAAMC,YAAY,YAAaC,OAAOb,KAAKmB,KAChE,CAES,MAAAC,GACP,MAAMC,EACJrB,KAAKkB,OAASlB,KAAKmB,IACf,gBAAgBnB,KAAKkB,OAAS,YAAYlB,KAAKmB,KAAO,UACtD,GAEN,OAAOG,CAAA;+BACoBC,EAAKvB,KAAKkB,OAASlB,KAAKmB,IAAK,IAAME,EAAW,IAAM;;;;KAKjF,GAhHW1B,EAcK6B,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAbGC,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UADPlC,EACiBmC,UAAA,OAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMf,UAFPlB,EAEiBmC,UAAA,MAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMf,UAHPlB,EAGiBmC,UAAA,UAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMf,UAJPlB,EAIiBmC,UAAA,QAAA,GAEAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UANPlC,EAMiBmC,UAAA,QAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAPPlC,EAOiBmC,UAAA,MAAA,GAEAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UATPlC,EASiBmC,UAAA,KAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAVPlC,EAUiBmC,UAAA,KAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAXPlC,EAWiBmC,UAAA,KAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAZPlC,EAYiBmC,UAAA,KAAA,GAZjBnC,EAAN+B,EAAA,CADNK,EAAc,YACFpC"}
+{"version":3,"file":"sky-col.js","sources":["../../src/sky-col/sky-col.ts"],"sourcesContent":["import { customElement, property } from \"lit/decorators.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { LitElement, html, css } from \"lit\";\r\nimport { PresetController } from \"../helper/controllers/preset-controller\";\r\n\r\nexport type SkyColAlign = \"stretch\" | \"start\" | \"center\" | \"end\" | \"baseline\";\r\nexport type SkyColJustify =\r\n  | \"start\"\r\n  | \"center\"\r\n  | \"end\"\r\n  | \"space-between\"\r\n  | \"space-around\"\r\n  | \"space-evenly\";\r\n\r\n/**\r\n * @element sky-col\r\n *\r\n * @summary Grid/flex column helper with responsive spans and configurable alignment/justification.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://sky-ui.com/components/grid\r\n *\r\n * @slot title - Optional title content shown before main content.\r\n * @slot - Default content for the column body.\r\n *\r\n * @csspart col - The column container.\r\n *\r\n * @property {number} span - Default column span.\r\n * @property {string} gap - Internal content gap CSS value.\r\n * @property {SkyColJustify} justify - Content justification within the column.\r\n * @property {SkyColAlign} align - Content alignment within the column.\r\n * @property {number | undefined} start - Optional explicit grid column start.\r\n * @property {number | undefined} end - Optional explicit grid column end.\r\n * @property {number | undefined} sm - Responsive span for small breakpoint.\r\n * @property {number | undefined} md - Responsive span for medium breakpoint.\r\n * @property {number | undefined} lg - Responsive span for large breakpoint.\r\n * @property {number | undefined} xl - Responsive span for extra-large breakpoint.\r\n * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\r\n * @method refreshLayout Reapplies internal CSS variables from current properties.\r\n *\r\n * @Behavior\r\n * - Applies span and responsive spans through host CSS variables.\r\n * - Supports explicit `start`/`end` grid positioning when provided.\r\n * - Automatically updates layout variables when relevant properties change.\r\n *\r\n * @example\r\n * ```html\r\n * <sky-col span=\"4\" md=\"6\" justify=\"space-between\" align=\"center\">\r\n *   <span slot=\"title\">Revenue</span>\r\n *   Q2 performance details\r\n * </sky-col>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-col span=\"4\" md=\"6\" justify=\"space-between\" align=\"center\">\r\n *     <span slot=\"title\">Revenue</span>\r\n *     Q2 performance details\r\n *   </sky-col>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <sky-col span=\"4\" md=\"6\" justify=\"space-between\" align=\"center\">\r\n *       <span slot=\"title\">Revenue</span>\r\n *       Q2 performance details\r\n *     </sky-col>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-col\")\r\nexport class SkyCol extends LitElement {\r\n  @property({ type: Number }) span = 1;\r\n  @property({ type: String }) gap = \"0\";\r\n  @property({ type: String }) justify: SkyColJustify = \"center\";\r\n  @property({ type: String }) align: SkyColAlign = \"stretch\";\r\n\r\n  @property({ type: Number }) start?: number;\r\n  @property({ type: Number }) end?: number;\r\n\r\n  @property({ type: Number }) sm?: number;\r\n  @property({ type: Number }) md?: number;\r\n  @property({ type: Number }) lg?: number;\r\n  @property({ type: Number }) xl?: number;\r\n\r\n\r\n  /** Named prop preset from nearest `sky-config-provider`. */\r\n  @property({ type: String, reflect: true }) preset = \"\";\r\n\r\n  private _presets = new PresetController(this);\r\n\r\n  static override styles = css`\r\n    :host {\r\n      display: contents;\r\n    }\r\n\r\n    .col {\r\n      display: flex;\r\n      flex-direction: column;\r\n      grid-column: span var(--col-span, 1);\r\n      gap: var(--col-gap, 0);\r\n      align-items: var(--col-align, stretch);\r\n      justify-content: var(--col-justify, center);\r\n    }\r\n\r\n    ::slotted([slot=\"title\"]) {\r\n      font-weight: bold;\r\n      margin-bottom: 0.5rem;\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      .col {\r\n        grid-column: span var(--col-span-sm, var(--col-span, 1));\r\n      }\r\n    }\r\n    @media (max-width: 992px) {\r\n      .col {\r\n        grid-column: span var(--col-span-md, var(--col-span, 1));\r\n      }\r\n    }\r\n    @media (max-width: 1200px) {\r\n      .col {\r\n        grid-column: span var(--col-span-lg, var(--col-span, 1));\r\n      }\r\n    }\r\n    @media (min-width: 1201px) {\r\n      .col {\r\n        grid-column: span var(--col-span-xl, var(--col-span, var(--col-span, 1)));\r\n      }\r\n    }\r\n  `;\r\n\r\n  override firstUpdated(): void {\r\n    this.syncVars();\r\n  }\r\n\r\n  override updated(changed: Map<string | number | symbol, unknown>): void {\r\n    if (\r\n      changed.has(\"span\") ||\r\n      changed.has(\"gap\") ||\r\n      changed.has(\"justify\") ||\r\n      changed.has(\"align\") ||\r\n      changed.has(\"sm\") ||\r\n      changed.has(\"md\") ||\r\n      changed.has(\"lg\") ||\r\n      changed.has(\"xl\") ||\r\n      changed.has(\"start\") ||\r\n      changed.has(\"end\")\r\n    ) {\r\n      this.syncVars();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Reapplies internal CSS variables from current properties.\r\n   *\r\n   * @returns {void}\r\n   */\r\n  public refreshLayout(): void {\r\n    this.syncVars();\r\n  }\r\n\r\n  private syncVars(): void {\r\n    this.style.setProperty(\"--col-span\", String(this.span));\r\n    this.style.setProperty(\"--col-gap\", this.gap);\r\n    this.style.setProperty(\"--col-justify\", this.justify);\r\n    this.style.setProperty(\"--col-align\", this.align);\r\n\r\n    if (this.sm) this.style.setProperty(\"--col-span-sm\", String(this.sm));\r\n    if (this.md) this.style.setProperty(\"--col-span-md\", String(this.md));\r\n    if (this.lg) this.style.setProperty(\"--col-span-lg\", String(this.lg));\r\n    if (this.xl) this.style.setProperty(\"--col-span-xl\", String(this.xl));\r\n\r\n    if (this.start) this.style.setProperty(\"--col-start\", String(this.start));\r\n    if (this.end) this.style.setProperty(\"--col-end\", String(this.end));\r\n  }\r\n\r\n  override render() {\r\n    const gridStyle =\r\n      this.start || this.end\r\n        ? `grid-column: ${this.start ?? \"auto\"} / ${this.end ?? \"auto\"};`\r\n        : \"\";\r\n\r\n    return html`\r\n      <div class=\"col\" style=${when(this.start || this.end, () => gridStyle, () => \"\")} part=\"col\">\r\n        <slot name=\"title\"></slot>\r\n        <slot></slot>\r\n      </div>\r\n    `;\r\n  }\r\n}"],"names":["SkyCol","LitElement","constructor","super","arguments","this","span","gap","justify","align","preset","_presets","PresetController","firstUpdated","syncVars","updated","changed","has","refreshLayout","style","setProperty","String","sm","md","lg","xl","start","end","render","gridStyle","html","when","styles","css","__decorateClass","property","type","Number","prototype","reflect","customElement"],"mappings":"gbA0EO,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,GAAAC,SAAAC,WACuBC,KAAAC,KAAO,EACPD,KAAAE,IAAM,IACNF,KAAAG,QAAyB,SACzBH,KAAAI,MAAqB,UAYNJ,KAAAK,OAAS,GAEpDL,KAAQM,SAAW,IAAIC,EAAiBP,KAAI,CA2CnC,YAAAQ,GACPR,KAAKS,UACP,CAES,OAAAC,CAAQC,IAEbA,EAAQC,IAAI,SACZD,EAAQC,IAAI,QACZD,EAAQC,IAAI,YACZD,EAAQC,IAAI,UACZD,EAAQC,IAAI,OACZD,EAAQC,IAAI,OACZD,EAAQC,IAAI,OACZD,EAAQC,IAAI,OACZD,EAAQC,IAAI,UACZD,EAAQC,IAAI,SAEZZ,KAAKS,UAET,CAOO,aAAAI,GACLb,KAAKS,UACP,CAEQ,QAAAA,GACNT,KAAKc,MAAMC,YAAY,aAAcC,OAAOhB,KAAKC,OACjDD,KAAKc,MAAMC,YAAY,YAAaf,KAAKE,KACzCF,KAAKc,MAAMC,YAAY,gBAAiBf,KAAKG,SAC7CH,KAAKc,MAAMC,YAAY,cAAef,KAAKI,OAEvCJ,KAAKiB,IAAIjB,KAAKc,MAAMC,YAAY,gBAAiBC,OAAOhB,KAAKiB,KAC7DjB,KAAKkB,IAAIlB,KAAKc,MAAMC,YAAY,gBAAiBC,OAAOhB,KAAKkB,KAC7DlB,KAAKmB,IAAInB,KAAKc,MAAMC,YAAY,gBAAiBC,OAAOhB,KAAKmB,KAC7DnB,KAAKoB,IAAIpB,KAAKc,MAAMC,YAAY,gBAAiBC,OAAOhB,KAAKoB,KAE7DpB,KAAKqB,OAAOrB,KAAKc,MAAMC,YAAY,cAAeC,OAAOhB,KAAKqB,QAC9DrB,KAAKsB,KAAKtB,KAAKc,MAAMC,YAAY,YAAaC,OAAOhB,KAAKsB,KAChE,CAES,MAAAC,GACP,MAAMC,EACJxB,KAAKqB,OAASrB,KAAKsB,IACf,gBAAgBtB,KAAKqB,OAAS,YAAYrB,KAAKsB,KAAO,UACtD,GAEN,OAAOG,CAAA;+BACoBC,EAAK1B,KAAKqB,OAASrB,KAAKsB,IAAK,IAAME,EAAW,IAAM;;;;KAKjF,GAtHW7B,EAoBKgC,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAnBGC,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UADPrC,EACiBsC,UAAA,OAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMf,UAFPrB,EAEiBsC,UAAA,MAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMf,UAHPrB,EAGiBsC,UAAA,UAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMf,UAJPrB,EAIiBsC,UAAA,QAAA,GAEAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UANPrC,EAMiBsC,UAAA,QAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAPPrC,EAOiBsC,UAAA,MAAA,GAEAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UATPrC,EASiBsC,UAAA,KAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAVPrC,EAUiBsC,UAAA,KAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAXPrC,EAWiBsC,UAAA,KAAA,GACAJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAZPrC,EAYiBsC,UAAA,KAAA,GAIeJ,EAAA,CAA1CC,EAAS,CAAEC,KAAMf,OAAQkB,SAAS,KAhBxBvC,EAgBgCsC,UAAA,SAAA,GAhBhCtC,EAANkC,EAAA,CADNM,EAAc,YACFxC"}

package/dist/sky-combobox/sky-combobox.d.ts

@@ -34,9 +34,10 @@ export type SkyComboboxAddNewOptionDetail = {
  * @status stable
  * @since 1.0.0
  *
- * @documentation https://library.sky-ui.com/components/combobox
+ * @documentation https://sky-ui.com/components/combobox
  * @dependency sky-icon
  * @dependency sky-checkbox
+ * @dependency sky-input
  *
  * @uiVModel value value-changed
  * @uiVModel searchQuery search-query-changed
@@ -122,6 +123,7 @@ export type SkyComboboxAddNewOptionDetail = {
  * @property {string} variant - Visual style: `default`, `highlight`, `fieldset`, or `inside`.
  * @property {string} label - Label text. Above the field by default; on the border for `fieldset`; inside the field for `inside`.
  * @property {SkyComboboxMultiDisplay} multiDisplay - Multi-select value UI: `chips` (default), `text` (comma-joined), or `count` (“N selected”).
+ * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`.
  *
  * @method openDropdown Opens the combobox dropdown.
  * @method closeDropdown Closes the combobox dropdown.
@@ -220,6 +222,9 @@ export declare class SkyCombobox extends FormControlBase {
     private static readonly _CLOSE_RESET_MS;
     private dropdownPopover;
     private hiddenPopover;
+    /** Named prop preset from nearest `sky-config-provider`. */
+    preset: string;
+    private _presets;
     static styles: import("lit").CSSResult;
     constructor();
     static shadowRootOptions: {
@@ -291,7 +296,9 @@ export declare class SkyCombobox extends FormControlBase {
     private filterOptions;
     /** Emit search query for hosts / `v-model:search-query` when `searchQuery` changes outside the search input handler. */
     private emitSearchQueryChanged;
-    private handleInput;
+    private handleSearchValueChanged;
+    private handleSearchValueCleared;
+    private applySearchQuery;
     disconnectedCallback(): void;
     private handleClear;
     selectOption(option: any): void;

package/dist/sky-combobox/sky-combobox.js

@@ -1,4 +1,4 @@
-import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";import{property as r,state as n,query as a,queryAll as l,queryAssignedElements as h,customElement as d}from"lit/decorators.js";import{unsafeHTML as p}from"lit/directives/unsafe-html.js";import{when as c}from"lit/directives/when.js";import{repeat as u}from"lit/directives/repeat.js";import{classMap as y}from"lit/directives/class-map.js";import{resolveColor as v}from"../helper/utils/color-resolver.js";import{cssOnFillEnhance as m}from"../helper/utils/contrast-color.js";import{PopoverController as g}from"../helper/controllers/popover-controller.js";import{FormControlBase as f}from"../helper/internals/form-control-base.js";import{SkyIcon as b}from"../sky-icon/sky-icon.js";import{SkyCheckbox as k}from"../sky-checkbox/sky-checkbox.js";var w=Object.defineProperty,x=Object.getOwnPropertyDescriptor,I=(t,e,i,s)=>{for(var o,r=s>1?void 0:s?x(e,i):e,n=t.length-1;n>=0;n--)(o=t[n])&&(r=(s?o(e,i,r):o(r))||r);return s&&r&&w(e,i,r),r};let S=class extends f{constructor(){super(),this.value="",this.placeholder="Select An Option",this.searchPlaceholder="Search...",this.label="",this._options=[],this.chipSize=20,this.color="primary",this.clearable=!1,this.loading=!1,this.compact=!1,this.disabled=!1,this.searchable=!1,this.multiSelect=!1,this.visibleChips=2,this.selectAll=!1,this._validations=[],this.showErrors=!1,this.errorDisplayMode="single",this.required=!1,this.emitFullObject=!1,this.emittedKey="value",this.displayKey="",this.addOption=!1,this.validationArrayFormat=!1,this.prefix="",this.suffix="",this.prefixColor="",this.suffixColor="",this.justify="flex-start",this.zIndex=11,this.height="200px",this.requiredMessage="Selection is required.",this.readonly=!1,this.enforceMinOneSelection=!1,this.openAbove=!1,this.validationActive=!1,this.invalid=!1,this.variant="default",this.multiDisplay="chips",this.searchQuery="",this.filteredOptions=[],this.focused=!1,this.open=!1,this.selectedItems=[],this.hiddenChipsOpen=!1,this.activeIndex=-1,this.validationErrors=[],this.validationStatus=[],this.hasLeftIcon=!1,this.hasRightIcon=!1,this.optionSlotSet=new Set,this._searchDebounceId=null,this._closeResetId=null,this.dropdownPopover=new g(this,{getAnchor:()=>this.inputWrapperEl,getPopover:()=>this.dropdownEl,cssVarLeft:"--sky-dd-left",cssVarTop:"--sky-dd-top",cssVarWidth:"--sky-dd-width",getPlacement:()=>"bottom",getAlign:()=>"start",getGap:()=>6,getPadding:()=>8,getMatchAnchorWidth:()=>!0,getMaxWidthToViewport:()=>!0,getMaxWidthMode:()=>"cap",getFlip:()=>!0,getFlipOrder:()=>[],getAnimateReposition:()=>!0,getRepositionMs:()=>160,getCloseOnEscape:()=>!0,getCloseOnOutside:()=>!0,getRestoreFocusOnClose:()=>!0,onOpenChange:(t,e)=>{this.open=t,t?(this.focused=!0,null!=this._closeResetId&&(clearTimeout(this._closeResetId),this._closeResetId=null),this.validationActive=!0,this.filterOptions(),requestAnimationFrame(()=>this.focusOnOpen())):(this.activeIndex=-1,null!=this._closeResetId&&clearTimeout(this._closeResetId),this._closeResetId=setTimeout(()=>{this._closeResetId=null,this.open||(this.searchQuery="",this.emitSearchQueryChanged(),this.filterOptions())},S._CLOSE_RESET_MS),this.hiddenChipsOpen=!1,this.hiddenPopover.closePopover("api"))}}),this.hiddenPopover=new g(this,{getAnchor:()=>this.overflowChipEl,getPopover:()=>this.hiddenDropdownEl,cssVarLeft:"--sky-hc-left",cssVarTop:"--sky-hc-top",cssVarWidth:"--sky-hc-width",getPlacement:()=>"bottom",getAlign:()=>"center",getGap:()=>4,getPadding:()=>8,getMatchAnchorWidth:()=>!1,getMaxWidthToViewport:()=>!0,getMaxWidthMode:()=>"cap",getFlip:()=>!0,getFlipOrder:()=>[],getAnimateReposition:()=>!0,getRepositionMs:()=>120,getCloseOnEscape:()=>!0,getCloseOnOutside:()=>!0,getRestoreFocusOnClose:()=>!1,onOpenChange:t=>{this.hiddenChipsOpen=t,t&&this.open&&this.dropdownPopover.closePopover("api")}}),this.refreshOptionSlots=()=>{const t=new Set;this.querySelectorAll('[slot^="option-"]').forEach(e=>{const i=e.slot;i&&t.add(i)}),this.optionSlotSet=t},this.onSearchKeydown=t=>{const{key:e,shiftKey:i}=t;if("Enter"===e)return t.preventDefault(),t.stopPropagation(),void this.commitDropdownEnter();if("ArrowDown"===e||"ArrowUp"===e||"Tab"===e){t.preventDefault(),t.stopPropagation();const i=this.searchable||this.addOption,s=this.multiSelect&&this.selectAll?i?1:0:this.headerRows,o=this.headerRows+Math.max(0,this.filteredOptions.length)-1,r="ArrowUp"===e||"Tab"===e&&t.shiftKey?-1:1;this.activeIndex<s?this.activeIndex=s:this.activeIndex=this.activeIndex+r<s?o:this.activeIndex+r>o?s:this.activeIndex+r,this.scrollActiveItemIntoView()}return"Escape"===e?(t.preventDefault(),t.stopPropagation(),void this.dropdownPopover.closePopover("escape")):void 0},this.handleAddaddOption=t=>{if(t.stopPropagation(),this.disabled||this.readonly)return;if(!this.canAddaddOption())return;const e=this.searchQuery.trim();this.dispatchEvent(new CustomEvent("add-new-option",{detail:{value:e},bubbles:!0,composed:!0})),this.searchQuery="",this.emitSearchQueryChanged(),this.filterOptions()},this.onIconSlotChange=()=>{this.hasLeftIcon=(this.iconLeftEls?.length??0)>0,this.hasRightIcon=(this.iconRightEls?.length??0)>0},this.captureDefaultValue("")}get options(){return this._options}set options(t){const e=this._options;this._options=Array.isArray(t)?t:[],this.requestUpdate("options",e)}get validations(){return this._validations}set validations(t){const e=this._validations;this._validations=Array.isArray(t)?t:[],this.requestUpdate("validations",e)}connectedCallback(){super.connectedCallback(),this.hasAttribute("tabindex")||(this.tabIndex=this.disabled?-1:0),this.refreshOptionSlots()}firstUpdated(){this.dropdownPopover.refreshTargets(),this.hiddenPopover.refreshTargets()}getFormValue(){if(this.disabled||!this.name)return null;if(this.multiSelect){const t=new FormData;return this.selectedItems.forEach(e=>{const i=this.emitFullObject?JSON.stringify(e):String(this.getOptionValue(e));t.append(this.name,i)}),0===this.selectedItems.length&&this.required&&t.append(this.name,""),t}{if(0===this.selectedItems.length)return"";const t=this.selectedItems[0];return this.emitFullObject?JSON.stringify(t):String(this.getOptionValue(t))}}setValueFromFormState(t){if(null===t||""===t)return this.value=this.multiSelect?[]:"",void(this.selectedItems=[]);if(this.multiSelect){let e=[];if(t instanceof FormData)e=t.getAll(this.name);else if(Array.isArray(t))e=t;else if("string"==typeof t)try{const i=JSON.parse(t);e=Array.isArray(i)?i:[t]}catch{e=[t]}this.setValueFromArray(e)}else{let e="";"string"==typeof t?e=t:t instanceof FormData?e=t.get(this.name)?.toString()||"":Array.isArray(t)&&t.length>0&&(e=t[0].toString()),this.value=e,this.syncSelectedItemsWithValue()}}syncFormValue(){if(!this.name||this.disabled)return void this.internals.setFormValue(null);const t=this.getFormValue();if(null!==t)if(this.multiSelect&&Array.isArray(t)){const e=new FormData;t.forEach(t=>{null!=t&&""!==t&&e.append(this.name,String(t))}),this.internals.setFormValue(e)}else this.internals.setFormValue(t);else this.internals.setFormValue(null)}setValueFromArray(t){const e=Array.isArray(this.options)?this.options:[];this.selectedItems=e.filter(e=>{const i=this.getOptionValue(e),s=this.emitFullObject?JSON.stringify(e):String(i);return t.some(t=>{const e=String(t);if(!this.emitFullObject)return e===s;try{const t=JSON.parse(e);return JSON.stringify(t)===s}catch{return e===s}})}),this.value=this.selectedItems.map(t=>this.emitFullObject?t:this.getOptionValue(t))}getValidityAnchor(){return this}isEmpty(){return this.multiSelect?0===this.selectedItems.length:0===this.selectedItems.length||!this.value}getNativeControl(){return this.inputWrapperEl||null}getCustomErrorMessage(){return this.validationErrors?.[0]||""}onFormReset(){super.onFormReset(),this.searchQuery="",this.emitSearchQueryChanged(),this.open=!1,this.invalid=!1,this.validationErrors=[],this.validationActive=!1}onFormDisabled(t){this.disabled=t}onFormStateRestore(t){this.setValueFromFormState(t)}toggleSelectAll(){if(this.disabled||this.readonly)return;const t=t=>String(this.getOptionValue(t));if(this.isAllFilteredSelected()){const e=new Set(this.filteredOptions.map(t=>String(this.getOptionValue(t.original)))),i=this.selectedItems.filter(i=>!e.has(t(i)));if(this.enforceMinOneSelection&&0===i.length)return;this.selectedItems=i}else{const e=new Set(this.selectedItems.map(e=>t(e))),i=this.filteredOptions.map(t=>t.original).filter(i=>!e.has(t(i)));this.selectedItems=[...this.selectedItems,...i]}const e=this.selectedItems.map(t=>this.emitFullObject?t:this.getOptionValue(t));this.value=e,this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:e,selectedItems:[...this.selectedItems],emittedValues:e,isFilteredSelection:!!this.searchQuery.trim()},bubbles:!0,composed:!0})),this.syncFormValue(),this.syncValidity(),this.requestUpdate()}isAllFilteredSelected(){if(0===this.filteredOptions.length)return!1;return this.filteredOptions.map(t=>this.getOptionValue(t.original)).every(t=>this.selectedItems.some(e=>this.getOptionValue(e)===t))}truncateText(t,e){return t.length>e?t.slice(0,e)+"...":t}validateInput(){if(!this.validationActive)return;this.validationErrors=[];const t=this.validationArrayFormat?this.selectedItems:this.value;if(this.required&&this.isEmpty())this.validationErrors.push(this.requiredMessage||"Selection is required.");else if(Array.isArray(this.validations)&&this.validations.length)for(const e of this.validations){const i=e(t);!0!==i&&this.validationErrors.push(String(i||"Invalid value."))}this.invalid=this.validationErrors.length>0,this.dispatchEvent(new CustomEvent(this.invalid?"validation-error":"validation-success",{detail:this.invalid?{errors:this.validationErrors}:{value:this.selectedItems},bubbles:!0,composed:!0})),this.syncValidity(),this.requestUpdate()}validateForForm(){if(this.disabled)return"";const t=this.validationArrayFormat?this.selectedItems:this.value;if(Array.isArray(this.validations)&&this.validations.length)for(const e of this.validations){const i=e(t);if(!0!==i)return String(i||"Invalid value.")}return this.enforceMinOneSelection&&this.isEmpty()?this.requiredMessage||"At least one selection is required.":this.required&&this.isEmpty()?this.requiredMessage||"Selection is required.":""}focus(t){super.focus(t),this.searchInputEl?this.searchInputEl.focus(t):this.inputWrapperEl&&this.inputWrapperEl.focus(t)}blur(){this.open&&this.dropdownPopover.closePopover("light-dismiss"),super.blur()}handleFocus(){this.focused=!0,this.validationActive||(this.validationActive=!0)}reset(){this.value=this.multiSelect?[]:"",this.selectedItems=[],this.searchQuery="",this.emitSearchQueryChanged(),this.filterOptions(),this.validationErrors=[],this.validationActive=!1,this.open=!1,this.invalid=!1,this.syncFormValue(),this.syncValidity(),this.requestUpdate()}openDropdown(){this.disabled||this.readonly||this.dropdownPopover.openPopover()}closeDropdown(){this.dropdownPopover.closePopover("api")}clearSelection(){this.handleClear()}handleBlur(){this.open||(this.focused=!1,this.validationActive&&this.validateInput())}updated(t){t.has("color")&&this.style.setProperty("--sky-dropdown-color",v(this.color)),t.has("height")&&this.style.setProperty("--sky-scroll-height",this.height)}willUpdate(t){t.has("value")&&(this.syncSelectedItemsWithValue(),this.syncFormValue(),this.syncValidity()),t.has("options")&&(Array.isArray(this.options)||(this.options=[]),this.syncSelectedItemsWithValue(),this.filterOptions(),this.syncFormValue(),this.syncValidity()),t.has("searchable")&&this.filterOptions(),t.has("searchQuery")&&this.filterOptions(),t.has("validationErrors")&&this.requestUpdate()}syncSelectedItemsWithValue(){const t=Array.isArray(this.options)?this.options:[],e=this.multiSelect&&Array.isArray(this.value)&&0===this.value.length;if(null==this.value||""===this.value||e)return this.selectedItems=[],void(this.value=this.multiSelect?[]:"");if(this.multiSelect&&"string"==typeof this.value)try{const t=JSON.parse(this.value);Array.isArray(t)&&(this.value=t)}catch(t){}const i=t=>{const e=this.getOptionValue(t);return"object"==typeof e?JSON.stringify(e):String(e)};if(this.multiSelect){const e=Array.isArray(this.value)?this.value:[this.value],s=new Set(e.map(t=>this.emitFullObject&&"object"==typeof t?JSON.stringify(t):String(t)));this.selectedItems=t.filter(t=>{const e=this.emitFullObject?JSON.stringify(t):i(t);return s.has(e)}),this.value=this.selectedItems.map(t=>this.emitFullObject?t:this.getOptionValue(t))}else{const e=this.emitFullObject&&"object"==typeof this.value?JSON.stringify(this.value):String(this.value),s=t.find(t=>(this.emitFullObject?JSON.stringify(t):i(t))===e);this.selectedItems=s?[s]:[],this.value=s?this.emitFullObject?s:this.getOptionValue(s):""}}filterOptions(){const t=Array.isArray(this.options)?this.options:[],e=(t,e)=>{const i=this.getOptionLabel(t);return{original:t,_idx:e,label:i,highlighted:i}};if(!this.searchable||!this.searchQuery.trim())return void(this.filteredOptions=t.map(e));const i=this.searchQuery.toLowerCase();this.filteredOptions=t.map(e).filter(t=>String(t.label).toLowerCase().includes(i)).map(t=>{const e=new RegExp(`(${i})`,"gi");return{...t,highlighted:String(t.label).replace(e,t=>`<span class="highlight">${t}</span>`)}})}emitSearchQueryChanged(){this.dispatchEvent(new CustomEvent("search-query-changed",{detail:{searchQuery:this.searchQuery},bubbles:!0,composed:!0}))}handleInput(t){if(this.disabled||this.readonly)return;this.searchQuery=t.target.value;const e=Array.isArray(this.options)?this.options.length:0,i=this.searchable&&e>S._SEARCH_DEBOUNCE_OPTIONS_THRESHOLD,s=()=>{this.filterOptions(),this.emitSearchQueryChanged()};i?(null!=this._searchDebounceId&&clearTimeout(this._searchDebounceId),this._searchDebounceId=setTimeout(()=>{this._searchDebounceId=null,s()},S._SEARCH_DEBOUNCE_MS)):s()}disconnectedCallback(){super.disconnectedCallback(),null!=this._searchDebounceId&&(clearTimeout(this._searchDebounceId),this._searchDebounceId=null),null!=this._closeResetId&&(clearTimeout(this._closeResetId),this._closeResetId=null)}handleClear(){if(this.disabled||this.readonly)return;const t=this.multiSelect?this.selectedItems.length>0:!!this.value;this.enforceMinOneSelection&&t||(this.value=this.multiSelect?[]:"",this.selectedItems=[],this.searchQuery="",this.emitSearchQueryChanged(),this.open=!1,this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value,selectedItems:[],isFilteredSelection:!1},bubbles:!0,composed:!0})),this.syncFormValue(),this.syncValidity())}selectOption(t){if(this.disabled||this.readonly)return;const e=t=>this.emitFullObject?t:this.getOptionValue(t),i=t=>{const e=this.getOptionValue(t);return"object"==typeof e?JSON.stringify(e):String(e)},s=""!==this.searchQuery.trim();if(!this.multiSelect){const o=this.selectedItems.length&&i(this.selectedItems[0])===i(t);return o&&this.enforceMinOneSelection?void(this.open=!1):(o?(this.selectedItems=[],this.value=""):(this.selectedItems=[t],this.value=e(t)),this.validateInput(),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value,selectedItems:this.selectedItems,emittedValues:this.selectedItems.map(e),isFilteredSelection:s},bubbles:!0,composed:!0})),this.dropdownPopover.closePopover("api"),this.syncFormValue(),this.syncValidity(),void this.requestUpdate())}const o=this.selectedItems.findIndex(e=>i(e)===i(t));let r;r=o>-1?[...this.selectedItems.slice(0,o),...this.selectedItems.slice(o+1)]:[...this.selectedItems,t],this.enforceMinOneSelection&&0===r.length||(this.selectedItems=r,this.value=r.map(e),this.validateInput(),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value,selectedItems:this.selectedItems,emittedValues:this.value,isFilteredSelection:s},bubbles:!0,composed:!0})),this.syncFormValue(),this.syncValidity(),this.open=!0,this.requestUpdate())}toggleHiddenChips(t){t.stopPropagation(),t.preventDefault(),this.disabled||this.readonly||(this.open&&this.dropdownPopover.closePopover("api"),this.hiddenPopover.toggle())}renderHiddenChipsDropdown(){return s`
+import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";import{property as r,state as a,query as n,queryAll as l,queryAssignedElements as h,customElement as d}from"lit/decorators.js";import{unsafeHTML as p}from"lit/directives/unsafe-html.js";import{when as c}from"lit/directives/when.js";import{repeat as u}from"lit/directives/repeat.js";import{classMap as y}from"lit/directives/class-map.js";import{resolveColor as v}from"../helper/utils/color-resolver.js";import{cssOnFillEnhance as m}from"../helper/utils/contrast-color.js";import{PopoverController as g}from"../helper/controllers/popover-controller.js";import{FormControlBase as f}from"../helper/internals/form-control-base.js";import{SkyIcon as b}from"../sky-icon/sky-icon.js";import{SkyCheckbox as k}from"../sky-checkbox/sky-checkbox.js";import{SkyInput as w}from"../sky-input/sky-input.js";import{PresetController as x}from"../helper/controllers/preset-controller.js";var S=Object.defineProperty,I=Object.getOwnPropertyDescriptor,O=(t,e,i,s)=>{for(var o,r=s>1?void 0:s?I(e,i):e,a=t.length-1;a>=0;a--)(o=t[a])&&(r=(s?o(e,i,r):o(r))||r);return s&&r&&S(e,i,r),r};let A=class extends f{constructor(){super(),this.value="",this.placeholder="Select An Option",this.searchPlaceholder="Search...",this.label="",this._options=[],this.chipSize=20,this.color="primary",this.clearable=!1,this.loading=!1,this.compact=!1,this.disabled=!1,this.searchable=!1,this.multiSelect=!1,this.visibleChips=2,this.selectAll=!1,this._validations=[],this.showErrors=!1,this.errorDisplayMode="single",this.required=!1,this.emitFullObject=!1,this.emittedKey="value",this.displayKey="",this.addOption=!1,this.validationArrayFormat=!1,this.prefix="",this.suffix="",this.prefixColor="",this.suffixColor="",this.justify="flex-start",this.zIndex=11,this.height="200px",this.requiredMessage="Selection is required.",this.readonly=!1,this.enforceMinOneSelection=!1,this.openAbove=!1,this.validationActive=!1,this.invalid=!1,this.variant="default",this.multiDisplay="chips",this.searchQuery="",this.filteredOptions=[],this.focused=!1,this.open=!1,this.selectedItems=[],this.hiddenChipsOpen=!1,this.activeIndex=-1,this.validationErrors=[],this.validationStatus=[],this.hasLeftIcon=!1,this.hasRightIcon=!1,this.optionSlotSet=new Set,this._searchDebounceId=null,this._closeResetId=null,this.dropdownPopover=new g(this,{getAnchor:()=>this.inputWrapperEl,getPopover:()=>this.dropdownEl,cssVarLeft:"--sky-dd-left",cssVarTop:"--sky-dd-top",cssVarWidth:"--sky-dd-width",getPlacement:()=>"bottom",getAlign:()=>"start",getGap:()=>6,getPadding:()=>8,getMatchAnchorWidth:()=>!0,getMaxWidthToViewport:()=>!0,getMaxWidthMode:()=>"cap",getFlip:()=>!0,getFlipOrder:()=>[],getAnimateReposition:()=>!0,getRepositionMs:()=>160,getCloseOnEscape:()=>!0,getCloseOnOutside:()=>!0,getRestoreFocusOnClose:()=>!0,onOpenChange:(t,e)=>{this.open=t,t?(this.focused=!0,null!=this._closeResetId&&(clearTimeout(this._closeResetId),this._closeResetId=null),this.validationActive=!0,this.filterOptions(),requestAnimationFrame(()=>this.focusOnOpen())):(this.activeIndex=-1,null!=this._closeResetId&&clearTimeout(this._closeResetId),this._closeResetId=setTimeout(()=>{this._closeResetId=null,this.open||(this.searchQuery="",this.emitSearchQueryChanged(),this.filterOptions())},A._CLOSE_RESET_MS),this.hiddenChipsOpen=!1,this.hiddenPopover.closePopover("api"))}}),this.hiddenPopover=new g(this,{getAnchor:()=>this.overflowChipEl,getPopover:()=>this.hiddenDropdownEl,cssVarLeft:"--sky-hc-left",cssVarTop:"--sky-hc-top",cssVarWidth:"--sky-hc-width",getPlacement:()=>"bottom",getAlign:()=>"center",getGap:()=>4,getPadding:()=>8,getMatchAnchorWidth:()=>!1,getMaxWidthToViewport:()=>!0,getMaxWidthMode:()=>"cap",getFlip:()=>!0,getFlipOrder:()=>[],getAnimateReposition:()=>!0,getRepositionMs:()=>120,getCloseOnEscape:()=>!0,getCloseOnOutside:()=>!0,getRestoreFocusOnClose:()=>!1,onOpenChange:t=>{this.hiddenChipsOpen=t,t&&this.open&&this.dropdownPopover.closePopover("api")}}),this.preset="",this._presets=new x(this),this.refreshOptionSlots=()=>{const t=new Set;this.querySelectorAll('[slot^="option-"]').forEach(e=>{const i=e.slot;i&&t.add(i)}),this.optionSlotSet=t},this.onSearchKeydown=t=>{const{key:e,shiftKey:i}=t;if("Enter"===e)return t.preventDefault(),t.stopPropagation(),void this.commitDropdownEnter();if("ArrowDown"===e||"ArrowUp"===e||"Tab"===e){t.preventDefault(),t.stopPropagation();const i=this.searchable||this.addOption,s=this.multiSelect&&this.selectAll?i?1:0:this.headerRows,o=this.headerRows+Math.max(0,this.filteredOptions.length)-1,r="ArrowUp"===e||"Tab"===e&&t.shiftKey?-1:1;this.activeIndex<s?this.activeIndex=s:this.activeIndex=this.activeIndex+r<s?o:this.activeIndex+r>o?s:this.activeIndex+r,this.scrollActiveItemIntoView()}return"Escape"===e?(t.preventDefault(),t.stopPropagation(),void this.dropdownPopover.closePopover("escape")):void 0},this.handleAddaddOption=t=>{if(t.stopPropagation(),this.disabled||this.readonly)return;if(!this.canAddaddOption())return;const e=this.searchQuery.trim();this.dispatchEvent(new CustomEvent("add-new-option",{detail:{value:e},bubbles:!0,composed:!0})),this.searchQuery="",this.emitSearchQueryChanged(),this.filterOptions()},this.onIconSlotChange=()=>{this.hasLeftIcon=(this.iconLeftEls?.length??0)>0,this.hasRightIcon=(this.iconRightEls?.length??0)>0},this.captureDefaultValue("")}get options(){return this._options}set options(t){const e=this._options;this._options=Array.isArray(t)?t:[],this.requestUpdate("options",e)}get validations(){return this._validations}set validations(t){const e=this._validations;this._validations=Array.isArray(t)?t:[],this.requestUpdate("validations",e)}connectedCallback(){super.connectedCallback(),this.hasAttribute("tabindex")||(this.tabIndex=this.disabled?-1:0),this.refreshOptionSlots()}firstUpdated(){this.dropdownPopover.refreshTargets(),this.hiddenPopover.refreshTargets()}getFormValue(){if(this.disabled||!this.name)return null;if(this.multiSelect){const t=new FormData;return this.selectedItems.forEach(e=>{const i=this.emitFullObject?JSON.stringify(e):String(this.getOptionValue(e));t.append(this.name,i)}),0===this.selectedItems.length&&this.required&&t.append(this.name,""),t}{if(0===this.selectedItems.length)return"";const t=this.selectedItems[0];return this.emitFullObject?JSON.stringify(t):String(this.getOptionValue(t))}}setValueFromFormState(t){if(null===t||""===t)return this.value=this.multiSelect?[]:"",void(this.selectedItems=[]);if(this.multiSelect){let e=[];if(t instanceof FormData)e=t.getAll(this.name);else if(Array.isArray(t))e=t;else if("string"==typeof t)try{const i=JSON.parse(t);e=Array.isArray(i)?i:[t]}catch{e=[t]}this.setValueFromArray(e)}else{let e="";"string"==typeof t?e=t:t instanceof FormData?e=t.get(this.name)?.toString()||"":Array.isArray(t)&&t.length>0&&(e=t[0].toString()),this.value=e,this.syncSelectedItemsWithValue()}}syncFormValue(){if(!this.name||this.disabled)return void this.internals.setFormValue(null);const t=this.getFormValue();if(null!==t)if(this.multiSelect&&Array.isArray(t)){const e=new FormData;t.forEach(t=>{null!=t&&""!==t&&e.append(this.name,String(t))}),this.internals.setFormValue(e)}else this.internals.setFormValue(t);else this.internals.setFormValue(null)}setValueFromArray(t){const e=Array.isArray(this.options)?this.options:[];this.selectedItems=e.filter(e=>{const i=this.getOptionValue(e),s=this.emitFullObject?JSON.stringify(e):String(i);return t.some(t=>{const e=String(t);if(!this.emitFullObject)return e===s;try{const t=JSON.parse(e);return JSON.stringify(t)===s}catch{return e===s}})}),this.value=this.selectedItems.map(t=>this.emitFullObject?t:this.getOptionValue(t))}getValidityAnchor(){return this}isEmpty(){return this.multiSelect?0===this.selectedItems.length:0===this.selectedItems.length||!this.value}getNativeControl(){return this.inputWrapperEl||null}getCustomErrorMessage(){return this.validationErrors?.[0]||""}onFormReset(){super.onFormReset(),this.searchQuery="",this.emitSearchQueryChanged(),this.open=!1,this.invalid=!1,this.validationErrors=[],this.validationActive=!1}onFormDisabled(t){this.disabled=t}onFormStateRestore(t){this.setValueFromFormState(t)}toggleSelectAll(){if(this.disabled||this.readonly)return;const t=t=>String(this.getOptionValue(t));if(this.isAllFilteredSelected()){const e=new Set(this.filteredOptions.map(t=>String(this.getOptionValue(t.original)))),i=this.selectedItems.filter(i=>!e.has(t(i)));if(this.enforceMinOneSelection&&0===i.length)return;this.selectedItems=i}else{const e=new Set(this.selectedItems.map(e=>t(e))),i=this.filteredOptions.map(t=>t.original).filter(i=>!e.has(t(i)));this.selectedItems=[...this.selectedItems,...i]}const e=this.selectedItems.map(t=>this.emitFullObject?t:this.getOptionValue(t));this.value=e,this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:e,selectedItems:[...this.selectedItems],emittedValues:e,isFilteredSelection:!!this.searchQuery.trim()},bubbles:!0,composed:!0})),this.syncFormValue(),this.syncValidity(),this.requestUpdate()}isAllFilteredSelected(){if(0===this.filteredOptions.length)return!1;return this.filteredOptions.map(t=>this.getOptionValue(t.original)).every(t=>this.selectedItems.some(e=>this.getOptionValue(e)===t))}truncateText(t,e){return t.length>e?t.slice(0,e)+"...":t}validateInput(){if(!this.validationActive)return;this.validationErrors=[];const t=this.validationArrayFormat?this.selectedItems:this.value;if(this.required&&this.isEmpty())this.validationErrors.push(this.requiredMessage||"Selection is required.");else if(Array.isArray(this.validations)&&this.validations.length)for(const e of this.validations){const i=e(t);!0!==i&&this.validationErrors.push(String(i||"Invalid value."))}this.invalid=this.validationErrors.length>0,this.dispatchEvent(new CustomEvent(this.invalid?"validation-error":"validation-success",{detail:this.invalid?{errors:this.validationErrors}:{value:this.selectedItems},bubbles:!0,composed:!0})),this.syncValidity(),this.requestUpdate()}validateForForm(){if(this.disabled)return"";const t=this.validationArrayFormat?this.selectedItems:this.value;if(Array.isArray(this.validations)&&this.validations.length)for(const e of this.validations){const i=e(t);if(!0!==i)return String(i||"Invalid value.")}return this.enforceMinOneSelection&&this.isEmpty()?this.requiredMessage||"At least one selection is required.":this.required&&this.isEmpty()?this.requiredMessage||"Selection is required.":""}focus(t){super.focus(t),this.searchInputEl?this.searchInputEl.focus(t):this.inputWrapperEl&&this.inputWrapperEl.focus(t)}blur(){this.open&&this.dropdownPopover.closePopover("light-dismiss"),super.blur()}handleFocus(){this.focused=!0,this.validationActive||(this.validationActive=!0)}reset(){this.value=this.multiSelect?[]:"",this.selectedItems=[],this.searchQuery="",this.emitSearchQueryChanged(),this.filterOptions(),this.validationErrors=[],this.validationActive=!1,this.open=!1,this.invalid=!1,this.syncFormValue(),this.syncValidity(),this.requestUpdate()}openDropdown(){this.disabled||this.readonly||this.dropdownPopover.openPopover()}closeDropdown(){this.dropdownPopover.closePopover("api")}clearSelection(){this.handleClear()}handleBlur(){this.open||(this.focused=!1,this.validationActive&&this.validateInput())}updated(t){t.has("color")&&this.style.setProperty("--sky-dropdown-color",v(this.color)),t.has("height")&&this.style.setProperty("--sky-scroll-height",this.height)}willUpdate(t){t.has("value")&&(this.syncSelectedItemsWithValue(),this.syncFormValue(),this.syncValidity()),t.has("options")&&(Array.isArray(this.options)||(this.options=[]),this.syncSelectedItemsWithValue(),this.filterOptions(),this.syncFormValue(),this.syncValidity()),t.has("searchable")&&this.filterOptions(),t.has("searchQuery")&&this.filterOptions(),t.has("validationErrors")&&this.requestUpdate()}syncSelectedItemsWithValue(){const t=Array.isArray(this.options)?this.options:[],e=this.multiSelect&&Array.isArray(this.value)&&0===this.value.length;if(null==this.value||""===this.value||e)return this.selectedItems=[],void(this.value=this.multiSelect?[]:"");if(this.multiSelect&&"string"==typeof this.value)try{const t=JSON.parse(this.value);Array.isArray(t)&&(this.value=t)}catch(t){}const i=t=>{const e=this.getOptionValue(t);return"object"==typeof e?JSON.stringify(e):String(e)};if(this.multiSelect){const e=Array.isArray(this.value)?this.value:[this.value],s=new Set(e.map(t=>this.emitFullObject&&"object"==typeof t?JSON.stringify(t):String(t)));this.selectedItems=t.filter(t=>{const e=this.emitFullObject?JSON.stringify(t):i(t);return s.has(e)}),this.value=this.selectedItems.map(t=>this.emitFullObject?t:this.getOptionValue(t))}else{const e=this.emitFullObject&&"object"==typeof this.value?JSON.stringify(this.value):String(this.value),s=t.find(t=>(this.emitFullObject?JSON.stringify(t):i(t))===e);this.selectedItems=s?[s]:[],this.value=s?this.emitFullObject?s:this.getOptionValue(s):""}}filterOptions(){const t=Array.isArray(this.options)?this.options:[],e=(t,e)=>{const i=this.getOptionLabel(t);return{original:t,_idx:e,label:i,highlighted:i}};if(!this.searchable||!this.searchQuery.trim())return void(this.filteredOptions=t.map(e));const i=this.searchQuery.toLowerCase();this.filteredOptions=t.map(e).filter(t=>String(t.label).toLowerCase().includes(i)).map(t=>{const e=new RegExp(`(${i})`,"gi");return{...t,highlighted:String(t.label).replace(e,t=>`<span class="highlight">${t}</span>`)}})}emitSearchQueryChanged(){this.dispatchEvent(new CustomEvent("search-query-changed",{detail:{searchQuery:this.searchQuery},bubbles:!0,composed:!0}))}handleSearchValueChanged(t){t.stopPropagation(),this.disabled||this.readonly||this.applySearchQuery(String(t.detail?.value??""))}handleSearchValueCleared(t){t.stopPropagation(),this.disabled||this.readonly||this.applySearchQuery("")}applySearchQuery(t){this.searchQuery=t;const e=Array.isArray(this.options)?this.options.length:0,i=this.searchable&&e>A._SEARCH_DEBOUNCE_OPTIONS_THRESHOLD,s=()=>{this.filterOptions(),this.emitSearchQueryChanged()};i?(null!=this._searchDebounceId&&clearTimeout(this._searchDebounceId),this._searchDebounceId=setTimeout(()=>{this._searchDebounceId=null,s()},A._SEARCH_DEBOUNCE_MS)):s()}disconnectedCallback(){super.disconnectedCallback(),null!=this._searchDebounceId&&(clearTimeout(this._searchDebounceId),this._searchDebounceId=null),null!=this._closeResetId&&(clearTimeout(this._closeResetId),this._closeResetId=null)}handleClear(){if(this.disabled||this.readonly)return;const t=this.multiSelect?this.selectedItems.length>0:!!this.value;this.enforceMinOneSelection&&t||(this.value=this.multiSelect?[]:"",this.selectedItems=[],this.searchQuery="",this.emitSearchQueryChanged(),this.open=!1,this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value,selectedItems:[],isFilteredSelection:!1},bubbles:!0,composed:!0})),this.syncFormValue(),this.syncValidity())}selectOption(t){if(this.disabled||this.readonly)return;const e=t=>this.emitFullObject?t:this.getOptionValue(t),i=t=>{const e=this.getOptionValue(t);return"object"==typeof e?JSON.stringify(e):String(e)},s=""!==this.searchQuery.trim();if(!this.multiSelect){const o=this.selectedItems.length&&i(this.selectedItems[0])===i(t);return o&&this.enforceMinOneSelection?void(this.open=!1):(o?(this.selectedItems=[],this.value=""):(this.selectedItems=[t],this.value=e(t)),this.validateInput(),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value,selectedItems:this.selectedItems,emittedValues:this.selectedItems.map(e),isFilteredSelection:s},bubbles:!0,composed:!0})),this.dropdownPopover.closePopover("api"),this.syncFormValue(),this.syncValidity(),void this.requestUpdate())}const o=this.selectedItems.findIndex(e=>i(e)===i(t));let r;r=o>-1?[...this.selectedItems.slice(0,o),...this.selectedItems.slice(o+1)]:[...this.selectedItems,t],this.enforceMinOneSelection&&0===r.length||(this.selectedItems=r,this.value=r.map(e),this.validateInput(),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value,selectedItems:this.selectedItems,emittedValues:this.value,isFilteredSelection:s},bubbles:!0,composed:!0})),this.syncFormValue(),this.syncValidity(),this.open=!0,this.requestUpdate())}toggleHiddenChips(t){t.stopPropagation(),t.preventDefault(),this.disabled||this.readonly||(this.open&&this.dropdownPopover.closePopover("api"),this.hiddenPopover.toggle())}renderHiddenChipsDropdown(){return s`
     <div
       class="hidden-chips-dropdown"
       part="hidden-chips-dropdown"
@@ -92,22 +92,24 @@ import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";
               data-row-index="0"
               part="search-container"
             >
-              <sky-icon icon="ion:search"></sky-icon>
-
-              <input
-                .value=${this.searchQuery}
+              <sky-input
+                class="dropdown-search-input"
+                compact
+                clearable
                 part="search-input"
                 tabindex="0"
                 ?readonly=${this.readonly||!this.searchable&&!this.addOption}
-                @input=${this.searchable||this.addOption?this.handleInput:null}
+                ?disabled=${this.disabled}
+                placeholder=${this.searchPlaceholder}
+                .value=${this.searchQuery}
+                @value-changed=${this.searchable||this.addOption?this.handleSearchValueChanged:null}
+                @value-cleared=${this.searchable||this.addOption?this.handleSearchValueCleared:null}
                 @keydown=${this.onSearchKeydown}
                 @focus=${this.searchable||this.addOption?this.handleFocus:null}
                 @blur=${this.searchable||this.addOption?this.handleBlur:null}
-                ?compact=${this.compact}
-                ?disabled=${this.disabled}
-                placeholder=${this.searchPlaceholder}
-                class="input"
-              />
+              >
+                <sky-icon slot="icon-left" icon="ion:search"></sky-icon>
+              </sky-input>
 
               ${c(this.addOption,()=>s`
                     <sky-icon
@@ -138,7 +140,7 @@ import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";
                   Select All
                 </div>
               `})}
-          ${c(this.filteredOptions.length>0,()=>u(this.filteredOptions,({original:t,_idx:e})=>`${e}-${String(this.getOptionValue(t))}`,({original:t,highlighted:e,_idx:i},o)=>{const r=`option-${i}`,n=this.optionSlotSet.has(r),a=t=>String(this.getOptionValue(t.original??t)),l=Array.isArray(this.selectedItems)&&this.selectedItems.some(e=>a(e)===a(t)),h=this.headerRows+o,d=h===this.activeIndex,u=y({"dropdown-item":!0,active:d,selected:l});return s`
+          ${c(this.filteredOptions.length>0,()=>u(this.filteredOptions,({original:t,_idx:e})=>`${e}-${String(this.getOptionValue(t))}`,({original:t,highlighted:e,_idx:i},o)=>{const r=`option-${i}`,a=this.optionSlotSet.has(r),n=t=>String(this.getOptionValue(t.original??t)),l=Array.isArray(this.selectedItems)&&this.selectedItems.some(e=>n(e)===n(t)),h=this.headerRows+o,d=h===this.activeIndex,u=y({"dropdown-item":!0,active:d,selected:l});return s`
                   <div
                     class=${u}
                     data-row-index=${h}
@@ -152,7 +154,7 @@ import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";
                           .checked=${l}
                           readonly
                         ></sky-checkbox>`)}
-                    ${c(n,()=>s`
+                    ${c(a,()=>s`
                           <div style="display: flex; gap: 8px;width:100%">
                             <slot name=${r}>
                               <span
@@ -183,7 +185,7 @@ import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";
           ${u(t,t=>t,t=>s`<li class="error" part="error-item">${t}</li>`)}
         </ul>
       </div>
-    `}getErrorMessages(){const t=Array.isArray(this.validationErrors)?this.validationErrors:[];switch(this.errorDisplayMode){case"single":return t.slice(0,1);case"all":return t;default:return[]}}handleIconClick(t,e){this.dispatchEvent(new CustomEvent("icon-click",{detail:{position:t,event:e},bubbles:!0,composed:!0}))}render(){const t=y({"icon-slot":!0,left:!0,focused:this.focused}),e=y({"icon-slot":!0,right:!0,focused:this.focused}),i=y({"placeholder-label":!0,active:this.selectedItems.length>0}),r="fieldset"===this.variant,n="inside"===this.variant,a=this.label?r?s`<legend class="label" part="label">${this.label}</legend>`:s`<div class="label" part="label">${this.label}</div>`:null,l=s`
+    `}getErrorMessages(){const t=Array.isArray(this.validationErrors)?this.validationErrors:[];switch(this.errorDisplayMode){case"single":return t.slice(0,1);case"all":return t;default:return[]}}handleIconClick(t,e){this.dispatchEvent(new CustomEvent("icon-click",{detail:{position:t,event:e},bubbles:!0,composed:!0}))}render(){const t=y({"icon-slot":!0,left:!0,focused:this.focused}),e=y({"icon-slot":!0,right:!0,focused:this.focused}),i=y({"placeholder-label":!0,active:this.selectedItems.length>0}),r="fieldset"===this.variant,a="inside"===this.variant,n=this.label?r?s`<legend class="label" part="label">${this.label}</legend>`:s`<div class="label" part="label">${this.label}</div>`:null,l=s`
       <div
         class=${t}
         part="icon-slot"
@@ -242,13 +244,13 @@ import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";
     `,u=s`
       ${l}
       <div class="input-inside-main">
-        ${a}
+        ${n}
         <div class="input-inside-row">
           <div class="field-main" part="field-main">${h}</div>
         </div>
       </div>
       ${this.readonly?o:d}
-    `,v=n?u:p,m=t=>{this.disabled||this.readonly||this.toggleDropdown(t)},g=this.handleKeydown,f=r?s`
+    `,v=a?u:p,m=t=>{this.disabled||this.readonly||this.toggleDropdown(t)},g=this.handleKeydown,f=r?s`
           <fieldset
             class="input-wrapper"
             tabindex="0"
@@ -261,7 +263,7 @@ import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";
             @click=${m}
             @keydown=${g}
           >
-            ${a}
+            ${n}
             <div class="input-fieldset-body">${v}</div>
           </fieldset>
         `:s`
@@ -281,13 +283,13 @@ import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";
           </div>
         `;return s`
       <div class="combo-box-container" part="combo-box-container">
-        ${r||n?o:a}
+        ${r||a?o:n}
         ${f}
         ${this.renderHiddenChipsDropdown()} ${this.renderDropdown()}
         ${this.renderValidationErrors()}
         <slot style="display:none" @slotchange=${this.refreshOptionSlots}></slot>
       </div>
-    `}};S.dependencies={"sky-icon":b,"sky-checkbox":k},S._SEARCH_DEBOUNCE_MS=150,S._SEARCH_DEBOUNCE_OPTIONS_THRESHOLD=30,S._CLOSE_RESET_MS=250,S.styles=e`
+    `}};A.dependencies={"sky-icon":b,"sky-checkbox":k,"sky-input":w},A._SEARCH_DEBOUNCE_MS=150,A._SEARCH_DEBOUNCE_OPTIONS_THRESHOLD=30,A._CLOSE_RESET_MS=250,A.styles=e`
     :host {
       display: block;
       font-family: var(--sky-font);
@@ -639,21 +641,15 @@ import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";
       display: flex;
       align-items: center;
       padding: 8px 10px;
-      gap: 5px;
+      gap: var(--sky-input-gap, 4px);
       border-bottom: 1px solid var(--sky-border-light);
-      justify-content: space-between;
       margin-bottom: 5px;
     }
 
-    .search-container sky-icon {
-      width: 16px;
-      height: 16px;
-      color: var(--sky-text-secondary);
-      transition: color 0.15s ease;
-    }
-
-    .search-container:has(.input:focus) sky-icon {
-      color: var(--sky-active-primary);
+    .search-container .dropdown-search-input {
+      flex: 1 1 auto;
+      min-width: 0;
+      width: 100%;
     }
 
     .new-option-btn {
@@ -939,33 +935,6 @@ import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";
       transition: color 0.2s ease, background-color 0.2s ease;
     }
 
-    .input {
-      border: none;
-      font-family: var(--sky-font);
-      outline: none;
-      font-size: var(--sky-font-size-md);
-      background: transparent;
-      box-sizing: border-box;
-      color: var(--sky-text-secondary);
-      width: 100%;
-      transition: all 0.2 ease-in-out;
-    }
-
-    .search-container:has(.input:focus:focus) {
-      border-bottom-color: var(--sky-active-primary);
-    }
-
-    .input:-webkit-autofill {
-      -webkit-text-fill-color: var(--sky-text-secondary, inherit) !important;
-      transition: background-color 9999s ease-in-out 0s !important;
-    }
-
-    .input[disabled] {
-      opacity: 70%;
-      color: var(--sky-text-primary);
-      cursor: disabled;
-    }
-
     .input-wrapper[disabled] {
       opacity: 0.6;
       pointer-events: none;
@@ -1395,5 +1364,5 @@ import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";
     }
 
     ${t(m([{selector:".placeholder-label.active[compact]",fillVar:"--sky-dropdown-color"},{selector:".sky-checkbox:checked::after",fillVar:"--sky-active-primary",property:"border-color"},{selector:".sky-checkbox.indeterminate::after",fillVar:"--sky-active-primary",property:"background-color"}]))}
-  `,S.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},I([r()],S.prototype,"value",2),I([r({type:String})],S.prototype,"placeholder",2),I([r({type:String})],S.prototype,"searchPlaceholder",2),I([r({type:String})],S.prototype,"label",2),I([r({type:Array})],S.prototype,"options",1),I([r({type:Number})],S.prototype,"chipSize",2),I([r({type:String})],S.prototype,"color",2),I([r({type:Boolean,reflect:!0})],S.prototype,"clearable",2),I([r({type:Boolean,reflect:!0})],S.prototype,"loading",2),I([r({type:Boolean,reflect:!0})],S.prototype,"compact",2),I([r({type:Boolean,reflect:!0})],S.prototype,"disabled",2),I([r({type:Boolean,reflect:!0})],S.prototype,"searchable",2),I([r({type:Boolean,reflect:!0})],S.prototype,"multiSelect",2),I([r({type:Number,reflect:!0})],S.prototype,"visibleChips",2),I([r({type:Boolean,reflect:!0})],S.prototype,"selectAll",2),I([r({type:Array})],S.prototype,"validations",1),I([r({type:Boolean})],S.prototype,"showErrors",2),I([r({type:String})],S.prototype,"errorDisplayMode",2),I([r({type:Boolean,reflect:!0})],S.prototype,"required",2),I([r({type:Boolean,reflect:!0})],S.prototype,"emitFullObject",2),I([r({type:String})],S.prototype,"emittedKey",2),I([r({type:String})],S.prototype,"displayKey",2),I([r({type:Boolean})],S.prototype,"addOption",2),I([r({type:Boolean})],S.prototype,"validationArrayFormat",2),I([r({type:String})],S.prototype,"prefix",2),I([r({type:String})],S.prototype,"suffix",2),I([r({type:String})],S.prototype,"prefixColor",2),I([r({type:String})],S.prototype,"suffixColor",2),I([r({type:String})],S.prototype,"justify",2),I([r({type:Number})],S.prototype,"zIndex",2),I([r({type:String})],S.prototype,"height",2),I([r({type:String})],S.prototype,"requiredMessage",2),I([r({type:Boolean,reflect:!0})],S.prototype,"readonly",2),I([r({type:Boolean})],S.prototype,"enforceMinOneSelection",2),I([r({type:Boolean})],S.prototype,"openAbove",2),I([r({type:Boolean,reflect:!0})],S.prototype,"validationActive",2),I([r({type:Boolean,reflect:!0})],S.prototype,"invalid",2),I([r({type:String,reflect:!0})],S.prototype,"variant",2),I([r({type:String,reflect:!0,attribute:"multi-display"})],S.prototype,"multiDisplay",2),I([r({type:String,attribute:!1})],S.prototype,"searchQuery",2),I([n()],S.prototype,"filteredOptions",2),I([n()],S.prototype,"focused",2),I([n()],S.prototype,"open",2),I([n()],S.prototype,"selectedItems",2),I([n()],S.prototype,"hiddenChipsOpen",2),I([n()],S.prototype,"activeIndex",2),I([n()],S.prototype,"validationErrors",2),I([n()],S.prototype,"validationStatus",2),I([n()],S.prototype,"hasLeftIcon",2),I([n()],S.prototype,"hasRightIcon",2),I([n()],S.prototype,"optionSlotSet",2),I([a(".input-wrapper")],S.prototype,"inputWrapperEl",2),I([a(".dropdown")],S.prototype,"dropdownEl",2),I([a(".hidden-chips-dropdown")],S.prototype,"hiddenDropdownEl",2),I([a(".search-container .input")],S.prototype,"searchInputEl",2),I([a(".overflow-chip")],S.prototype,"overflowChipEl",2),I([a(".combo-box-container")],S.prototype,"comboContainerEl",2),I([l("[data-row-index]")],S.prototype,"rowEls",2),I([h({slot:"icon-left"})],S.prototype,"iconLeftEls",2),I([h({slot:"icon-right"})],S.prototype,"iconRightEls",2),S=I([d("sky-combobox")],S);export{S as SkyCombobox};
+  `,A.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},O([r()],A.prototype,"value",2),O([r({type:String})],A.prototype,"placeholder",2),O([r({type:String})],A.prototype,"searchPlaceholder",2),O([r({type:String})],A.prototype,"label",2),O([r({type:Array})],A.prototype,"options",1),O([r({type:Number})],A.prototype,"chipSize",2),O([r({type:String})],A.prototype,"color",2),O([r({type:Boolean,reflect:!0})],A.prototype,"clearable",2),O([r({type:Boolean,reflect:!0})],A.prototype,"loading",2),O([r({type:Boolean,reflect:!0})],A.prototype,"compact",2),O([r({type:Boolean,reflect:!0})],A.prototype,"disabled",2),O([r({type:Boolean,reflect:!0})],A.prototype,"searchable",2),O([r({type:Boolean,reflect:!0})],A.prototype,"multiSelect",2),O([r({type:Number,reflect:!0})],A.prototype,"visibleChips",2),O([r({type:Boolean,reflect:!0})],A.prototype,"selectAll",2),O([r({type:Array})],A.prototype,"validations",1),O([r({type:Boolean})],A.prototype,"showErrors",2),O([r({type:String})],A.prototype,"errorDisplayMode",2),O([r({type:Boolean,reflect:!0})],A.prototype,"required",2),O([r({type:Boolean,reflect:!0})],A.prototype,"emitFullObject",2),O([r({type:String})],A.prototype,"emittedKey",2),O([r({type:String})],A.prototype,"displayKey",2),O([r({type:Boolean})],A.prototype,"addOption",2),O([r({type:Boolean})],A.prototype,"validationArrayFormat",2),O([r({type:String})],A.prototype,"prefix",2),O([r({type:String})],A.prototype,"suffix",2),O([r({type:String})],A.prototype,"prefixColor",2),O([r({type:String})],A.prototype,"suffixColor",2),O([r({type:String})],A.prototype,"justify",2),O([r({type:Number})],A.prototype,"zIndex",2),O([r({type:String})],A.prototype,"height",2),O([r({type:String})],A.prototype,"requiredMessage",2),O([r({type:Boolean,reflect:!0})],A.prototype,"readonly",2),O([r({type:Boolean})],A.prototype,"enforceMinOneSelection",2),O([r({type:Boolean})],A.prototype,"openAbove",2),O([r({type:Boolean,reflect:!0})],A.prototype,"validationActive",2),O([r({type:Boolean,reflect:!0})],A.prototype,"invalid",2),O([r({type:String,reflect:!0})],A.prototype,"variant",2),O([r({type:String,reflect:!0,attribute:"multi-display"})],A.prototype,"multiDisplay",2),O([r({type:String,attribute:!1})],A.prototype,"searchQuery",2),O([a()],A.prototype,"filteredOptions",2),O([a()],A.prototype,"focused",2),O([a()],A.prototype,"open",2),O([a()],A.prototype,"selectedItems",2),O([a()],A.prototype,"hiddenChipsOpen",2),O([a()],A.prototype,"activeIndex",2),O([a()],A.prototype,"validationErrors",2),O([a()],A.prototype,"validationStatus",2),O([a()],A.prototype,"hasLeftIcon",2),O([a()],A.prototype,"hasRightIcon",2),O([a()],A.prototype,"optionSlotSet",2),O([n(".input-wrapper")],A.prototype,"inputWrapperEl",2),O([n(".dropdown")],A.prototype,"dropdownEl",2),O([n(".hidden-chips-dropdown")],A.prototype,"hiddenDropdownEl",2),O([n(".search-container sky-input")],A.prototype,"searchInputEl",2),O([n(".overflow-chip")],A.prototype,"overflowChipEl",2),O([n(".combo-box-container")],A.prototype,"comboContainerEl",2),O([l("[data-row-index]")],A.prototype,"rowEls",2),O([h({slot:"icon-left"})],A.prototype,"iconLeftEls",2),O([h({slot:"icon-right"})],A.prototype,"iconRightEls",2),O([r({type:String,reflect:!0})],A.prototype,"preset",2),A=O([d("sky-combobox")],A);export{A as SkyCombobox};
 //# sourceMappingURL=sky-combobox.js.map