luxen-ui 0.23.0 → 0.24.0

package/cdn/custom-elements.json

@@ -1065,159 +1065,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/html/elements/button/button.meta.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ButtonMeta",
-          "cssProperties": [
-            {
-              "description": "Button height (md size).",
-              "name": "--height",
-              "default": "36px"
-            },
-            {
-              "description": "Horizontal padding.",
-              "name": "--padding-inline",
-              "default": "0.625rem"
-            },
-            {
-              "description": "Background color.",
-              "name": "--background-color"
-            },
-            {
-              "description": "Background color on hover.",
-              "name": "--background-color-hover"
-            },
-            {
-              "description": "Background color on press.",
-              "name": "--background-color-active"
-            },
-            {
-              "description": "Text color.",
-              "name": "--text-color"
-            },
-            {
-              "description": "Text color on hover.",
-              "name": "--text-color-hover"
-            },
-            {
-              "description": "Border color.",
-              "name": "--border-color"
-            },
-            {
-              "description": "Border color on hover.",
-              "name": "--border-color-hover"
-            },
-            {
-              "description": "Label font size. Stays 14px across all sizes; override to opt into a larger label.",
-              "name": "--font-size",
-              "default": "0.875rem"
-            }
-          ],
-          "attributes": [
-            {
-              "description": "Disables the button.",
-              "name": "disabled"
-            },
-            {
-              "description": "Invoker command (`show-modal`, `close`, `show-popover`, etc.).",
-              "name": "command"
-            },
-            {
-              "description": "ID of the target element for `command`.",
-              "name": "commandfor"
-            },
-            {
-              "description": "primary | destructive — Visual variant. Default is the secondary style.",
-              "name": "data-variant"
-            },
-            {
-              "description": "sm | lg | xl — Control size. Default is md.",
-              "name": "data-size"
-            },
-            {
-              "description": "Icon-only mode (square button, width equals height). Auto-detected for a single icon child.",
-              "name": "data-icon-only"
-            },
-            {
-              "description": "Press effect (scale + translate on active).",
-              "name": "data-press-effect"
-            }
-          ],
-          "summary": "Buttons trigger actions such as submitting forms, confirming dialogs, or navigating.",
-          "examples": [
-            {
-              "title": "Primary",
-              "language": "html",
-              "code": "<button class=\"l-button\" data-variant=\"primary\">Save</button>"
-            }
-          ],
-          "_cssClasses": [
-            {
-              "name": ".l-button",
-              "description": "Base button style."
-            }
-          ],
-          "customElement": false,
-          "_native": true,
-          "_nativeTag": "button",
-          "selector": ".l-button",
-          "_attributes": [
-            {
-              "name": "disabled",
-              "description": "Disables the button."
-            },
-            {
-              "name": "command",
-              "description": "Invoker command (`show-modal`, `close`, `show-popover`, etc.)."
-            },
-            {
-              "name": "commandfor",
-              "description": "ID of the target element for `command`."
-            },
-            {
-              "name": "data-variant",
-              "values": [
-                "primary",
-                "destructive"
-              ],
-              "description": "Visual variant. Default is the secondary style."
-            },
-            {
-              "name": "data-size",
-              "values": [
-                "sm",
-                "lg",
-                "xl"
-              ],
-              "description": "Control size. Default is md."
-            },
-            {
-              "name": "data-icon-only",
-              "description": "Icon-only mode (square button, width equals height). Auto-detected for a single icon child."
-            },
-            {
-              "name": "data-press-effect",
-              "description": "Press effect (scale + translate on active)."
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ButtonMeta",
-          "declaration": {
-            "name": "ButtonMeta",
-            "module": "src/html/elements/button/button.meta.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/button-group/button-group.ts",
@@ -1989,6 +1836,159 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/button/button.meta.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ButtonMeta",
+          "cssProperties": [
+            {
+              "description": "Button height (md size).",
+              "name": "--height",
+              "default": "36px"
+            },
+            {
+              "description": "Horizontal padding.",
+              "name": "--padding-inline",
+              "default": "0.625rem"
+            },
+            {
+              "description": "Background color.",
+              "name": "--background-color"
+            },
+            {
+              "description": "Background color on hover.",
+              "name": "--background-color-hover"
+            },
+            {
+              "description": "Background color on press.",
+              "name": "--background-color-active"
+            },
+            {
+              "description": "Text color.",
+              "name": "--text-color"
+            },
+            {
+              "description": "Text color on hover.",
+              "name": "--text-color-hover"
+            },
+            {
+              "description": "Border color.",
+              "name": "--border-color"
+            },
+            {
+              "description": "Border color on hover.",
+              "name": "--border-color-hover"
+            },
+            {
+              "description": "Label font size. Stays 14px across all sizes; override to opt into a larger label.",
+              "name": "--font-size",
+              "default": "0.875rem"
+            }
+          ],
+          "attributes": [
+            {
+              "description": "Disables the button.",
+              "name": "disabled"
+            },
+            {
+              "description": "Invoker command (`show-modal`, `close`, `show-popover`, etc.).",
+              "name": "command"
+            },
+            {
+              "description": "ID of the target element for `command`.",
+              "name": "commandfor"
+            },
+            {
+              "description": "primary | destructive — Visual variant. Default is the secondary style.",
+              "name": "data-variant"
+            },
+            {
+              "description": "sm | lg | xl — Control size. Default is md.",
+              "name": "data-size"
+            },
+            {
+              "description": "Icon-only mode (square button, width equals height). Auto-detected for a single icon child.",
+              "name": "data-icon-only"
+            },
+            {
+              "description": "Press effect (scale + translate on active).",
+              "name": "data-press-effect"
+            }
+          ],
+          "summary": "Buttons trigger actions such as submitting forms, confirming dialogs, or navigating.",
+          "examples": [
+            {
+              "title": "Primary",
+              "language": "html",
+              "code": "<button class=\"l-button\" data-variant=\"primary\">Save</button>"
+            }
+          ],
+          "_cssClasses": [
+            {
+              "name": ".l-button",
+              "description": "Base button style."
+            }
+          ],
+          "customElement": false,
+          "_native": true,
+          "_nativeTag": "button",
+          "selector": ".l-button",
+          "_attributes": [
+            {
+              "name": "disabled",
+              "description": "Disables the button."
+            },
+            {
+              "name": "command",
+              "description": "Invoker command (`show-modal`, `close`, `show-popover`, etc.)."
+            },
+            {
+              "name": "commandfor",
+              "description": "ID of the target element for `command`."
+            },
+            {
+              "name": "data-variant",
+              "values": [
+                "primary",
+                "destructive"
+              ],
+              "description": "Visual variant. Default is the secondary style."
+            },
+            {
+              "name": "data-size",
+              "values": [
+                "sm",
+                "lg",
+                "xl"
+              ],
+              "description": "Control size. Default is md."
+            },
+            {
+              "name": "data-icon-only",
+              "description": "Icon-only mode (square button, width equals height). Auto-detected for a single icon child."
+            },
+            {
+              "name": "data-press-effect",
+              "description": "Press effect (scale + translate on active)."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ButtonMeta",
+          "declaration": {
+            "name": "ButtonMeta",
+            "module": "src/html/elements/button/button.meta.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/carousel-item/carousel-item.ts",
@@ -2404,8 +2404,22 @@
           "name": "Combobox",
           "cssProperties": [
             {
-              "description": "Control height. Defaults to the form-control height.",
-              "name": "--height"
+              "description": "Control height. The clear button and the chevron each take a square of this height (borders excluded), so their hit area and spacing follow it.",
+              "name": "--height",
+              "default": "var(--l-form-control-height)"
+            },
+            {
+              "description": "Glyph size of the clear button and the chevron (global form-control token; set it here or on any ancestor). Changes the glyph only — the hit area follows `--height`.",
+              "name": "--l-form-control-icon-size",
+              "default": "1em"
+            },
+            {
+              "description": "Chevron glyph as a `url()`. Masked, so its color comes from the control, not the image.",
+              "name": "--chevron-icon"
+            },
+            {
+              "description": "Clear button glyph as a `url()`.",
+              "name": "--clear-icon"
             },
             {
               "description": "Control + panel radius.",
@@ -3636,27 +3650,27 @@
           "name": "Dropdown",
           "cssProperties": [
             {
-              "description": "Panel background color.",
+              "description": "Panel background color. Default `var(--l-color-surface-overlay)`.",
               "name": "--background"
             },
             {
-              "description": "Panel border radius. Default `8px`.",
+              "description": "Panel border radius. Default `var(--l-popover-border-radius)` (6px).",
               "name": "--border-radius"
             },
             {
-              "description": "Panel inner padding. Default `0.25rem`. Slotted `<l-divider>` elements bleed by this amount on each side to span the panel edges.",
+              "description": "Panel inner padding. Default `var(--l-popover-padding)` (0.25rem). Slotted `<l-divider>` elements bleed by this amount on each side to span the panel edges.",
               "name": "--padding"
             },
             {
-              "description": "Panel box shadow.",
+              "description": "Panel box shadow. Default `var(--l-popover-shadow)`.",
               "name": "--shadow"
             },
             {
-              "description": "Show animation duration in ms. Default `150`.",
+              "description": "Show animation duration. Default `150ms`.",
               "name": "--show-duration"
             },
             {
-              "description": "Hide animation duration in ms. Default `150`.",
+              "description": "Hide animation duration. Default `150ms`.",
               "name": "--hide-duration"
             }
           ],
@@ -4300,7 +4314,7 @@
           },
           "tagName": "l-form-field",
           "customElement": true,
-          "summary": "Progressively enhances a label + control + messages group: wires the\naccessibility plumbing (`id`/`for`, `aria-describedby`, `aria-invalid`,\nrequired marker) and picks an inline or stacked layout from the control type.\n\nStyling stays on the control (`.l-checkbox`, …); inside a field a bare control\nis auto-styled by the element CSS. Add `unstyled` to keep the ARIA wiring while\nopting out of that auto-styling (e.g. for a third-party control).",
+          "summary": "Progressively enhances a label + control + messages group: wires the\naccessibility plumbing (`id`/`for`, `aria-describedby`, `aria-invalid`,\nrequired indicator) and picks an inline or stacked layout from the control type.\n\nStyling stays on the control (`.l-checkbox`, …); inside a field a bare control\nis auto-styled by the element CSS. Add `unstyled` to keep the ARIA wiring while\nopting out of that auto-styling (e.g. for a third-party control).",
           "examples": [
             {
               "language": "html",
@@ -4488,6 +4502,11 @@
             {
               "description": "Search clear glyph as a `url()`.",
               "name": "--clear-icon"
+            },
+            {
+              "description": "Glyph size of the date/time picker icon and the search clear (global form-control token). Their hit area is a square of the control height (borders excluded).",
+              "name": "--l-form-control-icon-size",
+              "default": "1em"
             }
           ],
           "attributes": [
@@ -4765,15 +4784,15 @@
               "name": "--cell-gap"
             },
             {
-              "description": "Cell background color.",
+              "description": "Cell background color (default: a faint ink tint over `--l-form-control-background-color`).",
               "name": "--cell-bg-color"
             },
             {
-              "description": "Cell border color.",
+              "description": "Cell border color (default: `var(--l-form-control-border-color)`).",
               "name": "--cell-border-color"
             },
             {
-              "description": "Cell border-radius.",
+              "description": "Cell border-radius (default: `var(--l-form-control-border-radius)`, like the other text fields).",
               "name": "--cell-border-radius"
             },
             {
@@ -5141,7 +5160,7 @@
           "name": "Popover",
           "cssProperties": [
             {
-              "description": "Background color. Default: `Canvas`.",
+              "description": "Background color. Default `var(--l-color-surface-overlay)`.",
               "name": "--background"
             },
             {
@@ -5149,7 +5168,7 @@
               "name": "--color"
             },
             {
-              "description": "Border radius. Default `8px`.",
+              "description": "Border radius. Default `var(--l-popover-border-radius)` (6px).",
               "name": "--border-radius"
             },
             {
@@ -5157,7 +5176,7 @@
               "name": "--max-width"
             },
             {
-              "description": "Box shadow.",
+              "description": "Box shadow. Default `var(--l-popover-shadow)`.",
               "name": "--shadow"
             },
             {
@@ -6657,8 +6676,22 @@
           "name": "Select",
           "cssProperties": [
             {
-              "description": "Control height. Defaults to the form-control height.",
-              "name": "--height"
+              "description": "Control height. The clear button and the chevron each take a square of this height (borders excluded), so their hit area and spacing follow it.",
+              "name": "--height",
+              "default": "var(--l-form-control-height)"
+            },
+            {
+              "description": "Glyph size of the clear button and the chevron (global form-control token; set it here or on any ancestor). Changes the glyph only — the hit area follows `--height`.",
+              "name": "--l-form-control-icon-size",
+              "default": "1em"
+            },
+            {
+              "description": "Chevron glyph as a `url()`. Masked, so its color comes from the control, not the image.",
+              "name": "--chevron-icon"
+            },
+            {
+              "description": "Clear button glyph as a `url()`.",
+              "name": "--clear-icon"
             },
             {
               "description": "Trigger + panel radius.",

package/cdn/elements/combobox/combobox.d.ts

@@ -58,7 +58,12 @@ interface ComboboxEventMap {
  * @csspart option - Each option row.
  * @csspart empty - The "no results" message.
  *
- * @cssproperty [--height] - Control height. Defaults to the form-control height.
+ * @cssproperty [--height=var(--l-form-control-height)] - Control height. The clear button and the chevron
+ *   each take a square of this height (borders excluded), so their hit area and spacing follow it.
+ * @cssproperty [--l-form-control-icon-size=1em] - Glyph size of the clear button and the chevron (global form-control
+ *   token; set it here or on any ancestor). Changes the glyph only — the hit area follows `--height`.
+ * @cssproperty --chevron-icon - Chevron glyph as a `url()`. Masked, so its color comes from the control, not the image.
+ * @cssproperty --clear-icon - Clear button glyph as a `url()`.
  * @cssproperty [--border-radius] - Control + panel radius.
  * @cssproperty [--background] - Panel background.
  *

package/cdn/elements/combobox/combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/html/elements/combobox/combobox.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/html/elements/combobox/combobox.ts"],"names":[],"mappings":"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"}

package/cdn/elements/combobox/combobox.js

@@ -1,4 +1,4 @@
-import{i as e}from"../../chunks/lit.js";import{n as t,r as n,t as r}from"../../chunks/decorate.js";import{t as i}from"../../chunks/unsafe-html.js";import{a,t as o}from"../../chunks/lit-html.js";import{LuxenFormAssociatedElement as s}from"../../shared/luxen-form-associated-element.js";import{PopoverController as c}from"../../shared/controllers/popover.js";import{ListboxNavController as l}from"../../shared/controllers/listbox-nav.js";import{DatalistObserverController as u}from"../../shared/controllers/datalist-observer.js";import{LocalizeController as d}from"../../shared/localize.js";import{RichHighlighter as f,highlightText as p,normalize as m}from"../../shared/highlight.js";import{uniqueId as h}from"../../registry.js";import{adoptRichContentStyles as g,richOptionLabel as _}from"../../shared/rich-option.js";import v from"../../shared/styles/host.styles.js";import y from"../../shared/styles/select-item-suffix.styles.js";var b=e(`:host{--height:var(--l-form-control-height);--border-radius:var(--l-form-control-border-radius);--background:var(--l-color-surface-overlay);inline-size:100%;display:block}:host([size=xs]){--height:var(--l-size-control-xs)}:host([size=sm]){--height:var(--l-size-control-sm)}:host([size=lg]){--height:var(--l-size-control-lg)}:host([size=xl]){--height:var(--l-size-control-xl)}:host([disabled]){opacity:.5;pointer-events:none}.base{position:relative}.control{block-size:var(--height);padding-inline:var(--l-form-control-padding-inline);border:var(--l-form-control-border-width) solid var(--l-form-control-border-color);border-radius:var(--border-radius);background-color:var(--l-form-control-background-color);cursor:text;align-items:center;gap:.25rem;display:flex}@media (hover:hover){.control:hover{border-color:var(--l-form-control-border-color-hover)}}.control:has(.input:focus-visible){border-color:var(--l-focus-ring);box-shadow:0 0 0 3px color-mix(in oklab, var(--l-focus-ring) 22%, transparent)}.input{min-inline-size:0;color:var(--l-form-control-value-color);font:inherit;background:0 0;border:0;outline:none;flex:1}.input::placeholder{color:var(--l-form-control-placeholder-color)}.chevron{block-size:1em;inline-size:1em;color:var(--l-form-control-placeholder-color);-webkit-mask:var(--_chevron-icon) center / contain no-repeat;mask:var(--_chevron-icon) center / contain no-repeat;background-color:currentColor;flex:none;transition:rotate .15s}.clear{cursor:pointer;block-size:1.5rem;inline-size:1.5rem;color:var(--l-form-control-placeholder-color);-webkit-mask:var(--_x-icon) center / 1em no-repeat;mask:var(--_x-icon) center / 1em no-repeat;background-color:currentColor;border:0;flex:none;padding:0}@media (hover:hover){.clear:hover{color:var(--l-form-control-value-color)}}.control:has(.input[aria-expanded=true]) .chevron{rotate:180deg}.panel{border:1px solid var(--l-color-border-overlay);border-radius:var(--border-radius);background-color:var(--background);box-shadow:var(--l-shadow-md);opacity:0;transition:opacity .12s ease, scale .12s ease, display .12s allow-discrete, overlay .12s allow-discrete;margin:0;padding:0;inset:auto;overflow:hidden;scale:.98}.panel:popover-open{opacity:1;scale:1}@starting-style{.panel:popover-open{opacity:0;scale:.98}}.listbox{overscroll-behavior:contain;max-block-size:16rem;margin:0;padding:.25rem;list-style:none;overflow-y:auto}.option{min-block-size:2rem;padding-block:.25rem;padding-inline:.5rem var(--height);border-radius:calc(var(--border-radius) - 2px);color:var(--l-color-text-primary);cursor:pointer;align-items:center;gap:.5rem;display:flex;position:relative}.option[aria-selected=true]{background-color:var(--l-color-bg-state-hover)}.option[aria-disabled=true]{opacity:.4;cursor:not-allowed}.option[data-current]:after{content:"";background-color:var(--l-form-control-activated-color);block-size:1em;inline-size:1em;-webkit-mask:var(--_check-icon) center / contain no-repeat;mask:var(--_check-icon) center / contain no-repeat;position:absolute;inset-inline-end:.5rem}.option-label{text-overflow:ellipsis;white-space:nowrap;flex:1;min-inline-size:0;overflow:hidden}mark.match{background-color:var(--l-form-control-match-background-color);color:inherit;font-weight:var(--l-form-control-match-font-weight);-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:.2em}.option-rich{flex:1;align-items:center;gap:.5rem;min-inline-size:0;display:flex}.option-rich .l-select-item-media{flex:none;align-items:center;font-size:1.25em;display:inline-flex}.option-rich .l-select-item-text{flex-direction:column;min-inline-size:0;display:flex}.option-rich .l-select-item-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.option-rich .l-select-item-description{color:var(--l-color-text-tertiary);text-overflow:ellipsis;white-space:nowrap;font-size:.85em;overflow:hidden}.empty{color:var(--l-color-text-tertiary);text-align:center;padding:.5rem}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:host{--_chevron-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");--_x-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");--_check-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}@media (prefers-reduced-motion:reduce){.panel,.chevron{transition-duration:0s}}`),x=(e,t)=>{if(!t)return!0;let n=m(e.label);return m(t).split(/\s+/).filter(Boolean).every(e=>n.includes(e))},S=class extends Event{constructor(e){super(`change`,{bubbles:!0,composed:!1,cancelable:!1}),this.value=e}},C=class extends Event{constructor(e){super(`input`,{bubbles:!0,composed:!1,cancelable:!1}),this.value=e}},w=class extends s{constructor(...e){super(...e),this._localize=new d(this),this._listId=h(`combobox-list`),this._richHighlighter=new f,this._floating=new c(this,{getTriggerElement:()=>this._controlEl,getFloatingElement:()=>this._panelEl,getArrowElement:()=>null}),this._nav=new l(this,{listboxId:this._listId,getCount:()=>this._filtered.length,isDisabled:e=>this._filtered[e]?.disabled??!1,isOpen:()=>this._open,open:()=>this.show(),getOptionElements:()=>this.shadowRoot?.querySelectorAll(`.option`)}),this._options=new u(this,()=>this._syncItems()),this.#e=``,this.#t=``,this.#n=``,this.#r=`md`,this.#i=!1,this.#a=!1,this.#o=!0,this.#s=`bottom-start`,this.filter=x,this.#c=!1,this.#l=``,this.#u=[],this._onKeyDown=e=>{if(!this._nav.onKeyDown(e))switch(e.key){case`Enter`:this._open&&(e.preventDefault(),this._commitActiveOrCustom());break;case`Escape`:this._open?(e.preventDefault(),this.hide()):(this.value||this._inputEl?.value)&&this._clear();break;case`Tab`:this._open&&this._nav.activeIndex>=0&&this._commitActiveOrCustom()}},this._onInput=e=>{this._query=e.target.value,this._nav.reset(),this._open||this.show(),this.dispatchEvent(new C(this._query))},this._onControlPointerDown=e=>{e.target.closest(`.clear`)||this._open||this.show()},this._onFocusOut=e=>{let t=e.relatedTarget;t&&this.shadowRoot?.contains(t)||(this.hasInteracted=!0,this._updateValidity(),this.hide())}}static{this.styles=[v,y,b]}#e;get value(){return this.#e}set value(e){this.#e=e}#t;get placeholder(){return this.#t}set placeholder(e){this.#t=e}#n;get label(){return this.#n}set label(e){this.#n=e}#r;get size(){return this.#r}set size(e){this.#r=e}#i;get withClear(){return this.#i}set withClear(e){this.#i=e}#a;get allowCustom(){return this.#a}set allowCustom(e){this.#a=e}#o;get highlight(){return this.#o}set highlight(e){this.#o=e}#s;get placement(){return this.#s}set placement(e){this.#s=e}#c;get _open(){return this.#c}set _open(e){this.#c=e}#l;get _query(){return this.#l}set _query(e){this.#l=e}#u;get _items(){return this.#u}set _items(e){this.#u=e}get _controlEl(){return this.shadowRoot?.querySelector(`.control`)??null}get _panelEl(){return this.shadowRoot?.querySelector(`.panel`)??null}get _inputEl(){return this.shadowRoot?.querySelector(`.input`)??null}connectedCallback(){super.connectedCallback(),this._syncItems(),this._defaultFormValue=this.value,this._syncFormValue(this.value)}updated(e){e.has(`value`)&&(this._syncFormValue(this.value),this._updateValidity(),this._open||this._resetDisplay())}formResetCallback(){this.value=this._defaultFormValue,this._query=``,this._nav.reset(),super.formResetCallback(),this._resetDisplay()}formStateRestoreCallback(e){this.value=e,this._syncFormValue(e)}_readItems(){let e=this.querySelector(`datalist`),t=e?Array.from(e.options):[];this._items=t.map(e=>{let t=e.childElementCount>0,n=_(e);return{value:e.value,label:n,disabled:e.disabled,html:t?e.innerHTML:void 0}}),g(this.shadowRoot,this._items)}_syncItems(){let e=this._open?this._filtered[this._nav.activeIndex]:void 0,t=this._inputEl?.value,n=t===void 0||t===this._labelForValue(this.value);this._readItems(),this._open?this._nav.setActive(e?this._filtered.findIndex(t=>t.value===e.value):-1):n&&this._resetDisplay()}_labelForValue(e){return this._items.find(t=>t.value===e)?.label??(this.allowCustom?e:``)}get _filtered(){return this._items.filter(e=>this.filter(e,this._query))}_resetDisplay(){let e=this._inputEl;e&&(e.value=this._labelForValue(this.value))}_updateValidity(){this.required&&!this.value?this.setValidity({valueMissing:!0},this._localize.term(`selectOption`),this._inputEl??void 0):this.setValidity({})}show(){this._open||this.disabled||(this._readItems(),this.dispatchEvent(new Event(`show`,{cancelable:!0}))&&(this._open=!0,this.value&&!this._query&&this._nav.setActive(this._filtered.findIndex(e=>e.value===this.value)),this.updateComplete.then(()=>{this._panelEl?.showPopover?.(),this._floating.startPositioning({placement:this.placement,distance:4,minWidth:`trigger`})})))}hide(){if(!this._open||!this.dispatchEvent(new Event(`hide`,{cancelable:!0})))return;this._open=!1,this._nav.reset();let e=this._panelEl;e?.matches?.(`:popover-open`)&&e.hidePopover?.(),this._floating.stopPositioning(),this._resetDisplay()}_commit(e){if(e.disabled)return;this.value=e.value,this._query=``,this.hasInteracted=!0;let t=this._inputEl;t&&(t.value=e.label),this._syncFormValue(this.value),this._updateValidity(),this.dispatchEvent(new S(this.value)),this.hide(),t?.focus()}_commitActiveOrCustom(){let e=this._filtered,t=this._nav.activeIndex;if(t>=0&&e[t]){this._commit(e[t]);return}let n=this._inputEl;this.allowCustom&&n&&(this.value=n.value,this._syncFormValue(this.value),this._updateValidity(),this.dispatchEvent(new S(this.value)),this.hide())}_clear(){this.value=``,this._query=``,this._nav.reset(),this._inputEl&&(this._inputEl.value=``),this._syncFormValue(``),this._updateValidity(),this.dispatchEvent(new S(``)),this._inputEl?.focus()}_highlight(e){return this.highlight?p(e,this._query):e}_highlightRich(e){return this.highlight?this._richHighlighter.highlight(e,this._query):e}render(){let e=this._filtered,t=this._nav.activeDescendant,n=this._nav.activeIndex,r=this.required&&!this.value&&this.hasInteracted,s=this._open?e.length===0?this._localize.term(`noResults`):`${e.length} ${this._localize.term(`suggestions`)}`:``;return a`
+import{i as e}from"../../chunks/lit.js";import{n as t,r as n,t as r}from"../../chunks/decorate.js";import{t as i}from"../../chunks/unsafe-html.js";import{a,t as o}from"../../chunks/lit-html.js";import{LuxenFormAssociatedElement as s}from"../../shared/luxen-form-associated-element.js";import{PopoverController as c}from"../../shared/controllers/popover.js";import{ListboxNavController as l}from"../../shared/controllers/listbox-nav.js";import{DatalistObserverController as u}from"../../shared/controllers/datalist-observer.js";import{LocalizeController as d}from"../../shared/localize.js";import{RichHighlighter as f,highlightText as p,normalize as m}from"../../shared/highlight.js";import{cls as h,uniqueId as g}from"../../registry.js";import{adoptRichContentStyles as _,richOptionLabel as v}from"../../shared/rich-option.js";import y from"../../shared/styles/host.styles.js";import b from"../../shared/styles/visually-hidden.styles.js";import x from"../../shared/styles/select-item-suffix.styles.js";import S from"../../shared/styles/picker-core.styles.js";var C=e(`.control{block-size:var(--height);cursor:text;gap:.25rem}.input{min-inline-size:0;color:var(--l-form-control-value-color);font:inherit;background:0 0;border:0;outline:none;flex:1}.input::placeholder{color:var(--l-form-control-placeholder-color)}.actions{flex:none;align-self:stretch;align-items:center;display:flex}.chevron{cursor:pointer}@media (hover:hover){.chevron:hover{color:var(--l-form-control-value-color)}}.option{align-items:center;gap:var(--l-menu-item-gap);min-block-size:var(--l-menu-item-min-height);padding-block:var(--l-menu-item-padding-block);padding-inline:var(--l-menu-item-padding-inline) calc(var(--l-menu-item-padding-inline) + 1.5rem);border-radius:var(--l-menu-item-border-radius);color:var(--l-color-text-primary);cursor:pointer;display:flex;position:relative}.option[aria-selected=true]{background-color:var(--l-color-bg-state-hover)}.option[data-current]:after{content:"";background-color:var(--l-form-control-activated-color);block-size:1em;inline-size:1em;-webkit-mask:var(--_check-icon) center / contain no-repeat;mask:var(--_check-icon) center / contain no-repeat;position:absolute;inset-inline-end:.5rem}.option .l-select-item-media{flex:none;align-items:center;font-size:1.25em;display:inline-flex}.option .l-select-item-text{flex-direction:column;min-inline-size:0;display:flex}.option .l-select-item-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.option .l-select-item-description{color:var(--l-color-text-tertiary);text-overflow:ellipsis;white-space:nowrap;font-size:.85em;overflow:hidden}`),w=(e,t)=>{if(!t)return!0;let n=m(e.label);return m(t).split(/\s+/).filter(Boolean).every(e=>n.includes(e))},T=class extends Event{constructor(e){super(`change`,{bubbles:!0,composed:!1,cancelable:!1}),this.value=e}},E=class extends Event{constructor(e){super(`input`,{bubbles:!0,composed:!1,cancelable:!1}),this.value=e}},D=class extends s{constructor(...e){super(...e),this._localize=new d(this),this._listId=g(`combobox-list`),this._richHighlighter=new f,this._floating=new c(this,{getTriggerElement:()=>this._controlEl,getFloatingElement:()=>this._panelEl,getArrowElement:()=>null}),this._nav=new l(this,{listboxId:this._listId,getCount:()=>this._filtered.length,isDisabled:e=>this._filtered[e]?.disabled??!1,isOpen:()=>this._open,open:()=>this.show(),getOptionElements:()=>this.shadowRoot?.querySelectorAll(`.option`)}),this._options=new u(this,()=>this._syncItems()),this.#e=``,this.#t=``,this.#n=``,this.#r=`md`,this.#i=!1,this.#a=!1,this.#o=!0,this.#s=`bottom-start`,this.filter=w,this.#c=!1,this.#l=``,this.#u=[],this._onKeyDown=e=>{if(!this._nav.onKeyDown(e))switch(e.key){case`Enter`:this._open&&(e.preventDefault(),this._commitActiveOrCustom());break;case`Escape`:this._open?(e.preventDefault(),this.hide()):(this.value||this._inputEl?.value)&&this._clear();break;case`Tab`:this._open&&this._nav.activeIndex>=0&&this._commitActiveOrCustom()}},this._onInput=e=>{this._query=e.target.value,this._nav.reset(),this._open||this.show(),this.dispatchEvent(new E(this._query))},this._onControlPointerDown=e=>{e.target.closest(`.clear-button`)||(e.target!==this._inputEl&&(e.preventDefault(),this._inputEl?.focus()),this._open?e.target.closest(`.chevron`)&&this.hide():this.show())},this._onFocusOut=e=>{let t=e.relatedTarget;t&&this.shadowRoot?.contains(t)||(this.hasInteracted=!0,this._updateValidity(),this.hide())}}static{this.styles=[y,b,x,S,C]}#e;get value(){return this.#e}set value(e){this.#e=e}#t;get placeholder(){return this.#t}set placeholder(e){this.#t=e}#n;get label(){return this.#n}set label(e){this.#n=e}#r;get size(){return this.#r}set size(e){this.#r=e}#i;get withClear(){return this.#i}set withClear(e){this.#i=e}#a;get allowCustom(){return this.#a}set allowCustom(e){this.#a=e}#o;get highlight(){return this.#o}set highlight(e){this.#o=e}#s;get placement(){return this.#s}set placement(e){this.#s=e}#c;get _open(){return this.#c}set _open(e){this.#c=e}#l;get _query(){return this.#l}set _query(e){this.#l=e}#u;get _items(){return this.#u}set _items(e){this.#u=e}get _controlEl(){return this.shadowRoot?.querySelector(`.control`)??null}get _panelEl(){return this.shadowRoot?.querySelector(`.panel`)??null}get _inputEl(){return this.shadowRoot?.querySelector(`.input`)??null}connectedCallback(){super.connectedCallback(),this._syncItems(),this._defaultFormValue=this.value,this._syncFormValue(this.value)}updated(e){e.has(`value`)&&(this._syncFormValue(this.value),this._updateValidity(),this._open||this._resetDisplay())}formResetCallback(){this.value=this._defaultFormValue,this._query=``,this._nav.reset(),super.formResetCallback(),this._resetDisplay()}formStateRestoreCallback(e){this.value=e,this._syncFormValue(e)}_readItems(){let e=this.querySelector(`datalist`),t=e?Array.from(e.options):[];this._items=t.map(e=>{let t=e.childElementCount>0,n=v(e);return{value:e.value,label:n,disabled:e.disabled,html:t?e.innerHTML:void 0}}),_(this.shadowRoot,this._items)}_syncItems(){let e=this._open?this._filtered[this._nav.activeIndex]:void 0,t=this._inputEl?.value,n=t===void 0||t===this._labelForValue(this.value);this._readItems(),this._open?this._nav.setActive(e?this._filtered.findIndex(t=>t.value===e.value):-1):n&&this._resetDisplay()}_labelForValue(e){return this._items.find(t=>t.value===e)?.label??(this.allowCustom?e:``)}get _filtered(){return this._items.filter(e=>this.filter(e,this._query))}_resetDisplay(){let e=this._inputEl;e&&(e.value=this._labelForValue(this.value))}_updateValidity(){this.required&&!this.value?this.setValidity({valueMissing:!0},this._localize.term(`selectOption`),this._inputEl??void 0):this.setValidity({})}show(){this._open||this.disabled||(this._readItems(),this.dispatchEvent(new Event(`show`,{cancelable:!0}))&&(this._open=!0,this.value&&!this._query&&this._nav.setActive(this._filtered.findIndex(e=>e.value===this.value)),this.updateComplete.then(()=>{this._panelEl?.showPopover?.(),this._floating.startPositioning({placement:this.placement,distance:4,minWidth:`trigger`})})))}hide(){if(!this._open||!this.dispatchEvent(new Event(`hide`,{cancelable:!0})))return;this._open=!1,this._nav.reset();let e=this._panelEl;e?.matches?.(`:popover-open`)&&e.hidePopover?.(),this._floating.stopPositioning(),this._resetDisplay()}_commit(e){if(e.disabled)return;this.value=e.value,this._query=``,this.hasInteracted=!0;let t=this._inputEl;t&&(t.value=e.label),this._syncFormValue(this.value),this._updateValidity(),this.dispatchEvent(new T(this.value)),this.hide(),t?.focus()}_commitActiveOrCustom(){let e=this._filtered,t=this._nav.activeIndex;if(t>=0&&e[t]){this._commit(e[t]);return}let n=this._inputEl;this.allowCustom&&n&&(this.value=n.value,this._syncFormValue(this.value),this._updateValidity(),this.dispatchEvent(new T(this.value)),this.hide())}_clear(){this.value=``,this._query=``,this._nav.reset(),this._inputEl&&(this._inputEl.value=``),this._syncFormValue(``),this._updateValidity(),this.dispatchEvent(new T(``)),this._inputEl?.focus()}_highlight(e){return this.highlight?p(e,this._query):e}_highlightRich(e){return this.highlight?this._richHighlighter.highlight(e,this._query):e}render(){let e=this._filtered,t=this._nav.activeDescendant,n=this._nav.activeIndex,r=this.required&&!this.value&&this.hasInteracted,s=this._open?e.length===0?this._localize.term(`noResults`):`${e.length} ${this._localize.term(`suggestions`)}`:``;return a`
       <div
         class="base"
         part="base"
@@ -30,17 +30,19 @@ import{i as e}from"../../chunks/lit.js";import{n as t,r as n,t as r}from"../../c
             @input=${this._onInput}
             @keydown=${this._onKeyDown}
           />
-          ${this.withClear&&(this.value||this._query)?a`<button
-                  class="clear"
-                  type="button"
-                  tabindex="-1"
-                  aria-label=${this._localize.term(`clear`)}
-                  @click=${this._clear}
-                ></button>`:o}
-          <span
-            class="chevron"
-            aria-hidden="true"
-          ></span>
+          <span class="actions">
+            ${this.withClear&&(this.value||this._query)?a`<button
+                    class="clear-button"
+                    type="button"
+                    tabindex="-1"
+                    aria-label=${this._localize.term(`clear`)}
+                    @click=${this._clear}
+                  ></button>`:o}
+            <span
+              class="chevron"
+              aria-hidden="true"
+            ></span>
+          </span>
         </div>
 
         <div
@@ -54,6 +56,8 @@ import{i as e}from"../../chunks/lit.js";import{n as t,r as n,t as r}from"../../c
             role="listbox"
             id=${this._listId}
             aria-label=${this.label||this._localize.term(`suggestions`)}
+            @pointermove=${this._nav.onPointerMove}
+            @pointerleave=${this._nav.onPointerLeave}
           >
             ${e.map((e,t)=>a`<li
                   class="option"
@@ -66,9 +70,7 @@ import{i as e}from"../../chunks/lit.js";import{n as t,r as n,t as r}from"../../c
                   @pointerdown=${e=>e.preventDefault()}
                   @click=${()=>this._commit(e)}
                 >
-                  ${e.html?a`<span class="option-rich"
-                          >${i(this._highlightRich(e.html))}</span
-                        >`:a`<span class="option-label">${this._highlight(e.label)}</span>`}
+                  ${e.html?i(this._highlightRich(e.html)):a`<span class="option-label">${this._highlight(e.label)}</span>`}
                 </li>`)}
           </ul>
           ${e.length===0?a`<div
@@ -80,11 +82,11 @@ import{i as e}from"../../chunks/lit.js";import{n as t,r as n,t as r}from"../../c
         </div>
 
         <div
-          class="visually-hidden"
+          class=${h(`visually-hidden`)}
           aria-live="polite"
         >
           ${s}
         </div>
       </div>
-    `}};r([n({reflect:!0})],w.prototype,`value`,null),r([n()],w.prototype,`placeholder`,null),r([n()],w.prototype,`label`,null),r([n({reflect:!0})],w.prototype,`size`,null),r([n({type:Boolean,reflect:!0,attribute:`with-clear`})],w.prototype,`withClear`,null),r([n({type:Boolean,reflect:!0,attribute:`allow-custom`})],w.prototype,`allowCustom`,null),r([n({type:Boolean})],w.prototype,`highlight`,null),r([n()],w.prototype,`placement`,null),r([t()],w.prototype,`_open`,null),r([t()],w.prototype,`_query`,null),r([t()],w.prototype,`_items`,null);export{w as Combobox,S as ComboboxChangeEvent,C as ComboboxInputEvent};
+    `}};r([n({reflect:!0})],D.prototype,`value`,null),r([n()],D.prototype,`placeholder`,null),r([n()],D.prototype,`label`,null),r([n({reflect:!0})],D.prototype,`size`,null),r([n({type:Boolean,reflect:!0,attribute:`with-clear`})],D.prototype,`withClear`,null),r([n({type:Boolean,reflect:!0,attribute:`allow-custom`})],D.prototype,`allowCustom`,null),r([n({type:Boolean})],D.prototype,`highlight`,null),r([n()],D.prototype,`placement`,null),r([t()],D.prototype,`_open`,null),r([t()],D.prototype,`_query`,null),r([t()],D.prototype,`_items`,null);export{D as Combobox,T as ComboboxChangeEvent,E as ComboboxInputEvent};
 //# sourceMappingURL=combobox.js.map