@vielzeug/refine 26.10.1 → 26.10.6

package/dist/overlay/command-palette/command-palette.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"command-palette.css.js","names":[],"sources":["../../../src/overlay/command-palette/command-palette.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_radius: var(--command-palette-radius, var(--rounded-lg));\n    --_max-width: var(--command-palette-max-width, 40rem);\n    --_backdrop-bg: var(--command-palette-backdrop, color-mix(in oklch, var(--color-canvas) 40%, transparent));\n    --_panel-bg: var(--command-palette-bg, var(--color-canvas));\n    --_panel-border-color: var(--command-palette-border-color, var(--color-divider));\n    --_option-hover-bg: var(--command-palette-option-hover-bg, var(--color-contrast-100));\n    --_option-focus-bg: var(\n      --command-palette-option-focus-bg,\n      color-mix(in oklch, var(--color-primary) 12%, var(--color-contrast-100))\n    );\n\n    display: contents;\n  }\n\n  /* =====================\n       Native <dialog> resets: see ore-dialog for the full rationale.\n       ===================== */\n\n  dialog {\n    all: unset;\n    position: fixed;\n    inset: 0;\n    box-sizing: border-box;\n    display: flex;\n    align-items: flex-start;\n    justify-content: center;\n    width: 100%;\n    max-width: 100%;\n    height: 100%;\n    max-height: 100%;\n    padding-block-start: min(14vh, var(--size-24));\n    margin: 0;\n    overflow: hidden;\n    pointer-events: none;\n    background: transparent;\n    border: none;\n    transition:\n      display 200ms allow-discrete,\n      overlay 200ms allow-discrete;\n  }\n\n  dialog:not([open]) {\n    display: none;\n  }\n\n  dialog:not([open]) .panel {\n    display: none;\n  }\n\n  dialog[open] {\n    pointer-events: auto;\n  }\n\n  dialog::backdrop {\n    background: var(--_backdrop-bg);\n    opacity: 1;\n    backdrop-filter: blur(var(--blur-xs));\n    transition:\n      opacity var(--transition-normal),\n      overlay var(--transition-normal) allow-discrete,\n      display var(--transition-normal) allow-discrete;\n\n    @starting-style {\n      opacity: 0;\n    }\n  }\n\n  dialog.closing::backdrop {\n    opacity: 0;\n  }\n\n  /* =====================\n       Panel\n       ===================== */\n\n  .panel {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    width: var(--_max-width);\n    max-width: calc(100vw - var(--size-8));\n    max-height: min(28rem, calc(100dvh - var(--size-16)));\n    overflow: hidden;\n    background: var(--_panel-bg);\n    border: var(--border) solid var(--_panel-border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--command-palette-shadow, var(--shadow-2xl));\n    opacity: 1;\n    backdrop-filter: blur(var(--blur-md));\n    transform: scale(1) translateY(0);\n    transition:\n      opacity 200ms var(--ease-spring),\n      transform 200ms var(--ease-spring);\n\n    @starting-style {\n      opacity: 0;\n      transform: scale(var(--overlay-enter-scale-dialog)) translateY(-4px);\n    }\n  }\n\n  dialog.closing .panel {\n    opacity: 0;\n    transform: scale(var(--overlay-enter-scale-dialog)) translateY(-4px);\n    transition:\n      opacity 150ms var(--ease-spring),\n      transform 150ms var(--ease-spring);\n  }\n\n  @media (width <= 640px) {\n    .panel {\n      width: calc(100vw - var(--size-4));\n      max-width: calc(100vw - var(--size-4));\n    }\n\n    dialog {\n      padding-block-start: var(--size-4);\n    }\n  }\n\n  /* =====================\n       Search field\n       ===================== */\n\n  .search {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-3) var(--size-4);\n    border-block-end: var(--border) solid var(--color-contrast-100);\n  }\n\n  .search-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    color: var(--color-contrast-400);\n  }\n\n  .search-input {\n    flex: 1;\n    min-width: 0;\n    padding: 0;\n    font: inherit;\n    font-size: var(--text-md);\n    color: var(--color-contrast-900);\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  .search-input::placeholder {\n    color: var(--color-contrast-400);\n  }\n\n  .search-loader {\n    display: inline-flex;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    border: 2px solid var(--color-contrast-300);\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: command-palette-spin var(--transition-loader) infinite;\n  }\n\n  .search-loader[hidden] {\n    display: none;\n  }\n\n  @keyframes command-palette-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  /* =====================\n       Listbox\n       ===================== */\n\n  .listbox {\n    flex: 1;\n    padding: var(--size-1);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    scrollbar-width: thin;\n  }\n\n  .empty {\n    padding: var(--size-6) var(--size-3);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-400);\n    text-align: center;\n  }\n\n  .group-heading {\n    padding: var(--size-2) var(--size-2-5) var(--size-1);\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    text-transform: uppercase;\n    letter-spacing: var(--tracking-wide, 0.05em);\n  }\n\n  .item {\n    display: flex;\n    gap: var(--size-2-5);\n    align-items: center;\n    padding: var(--size-2) var(--size-2-5);\n    font-size: var(--text-sm);\n    line-height: var(--leading-normal);\n    color: var(--color-contrast-800);\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n    transition: background var(--transition-fast);\n  }\n\n  .item:hover:not([data-disabled]) {\n    background: var(--_option-hover-bg);\n  }\n\n  .item[data-focused]:not([data-disabled]) {\n    background: var(--_option-focus-bg);\n  }\n\n  .item[data-disabled] {\n    color: var(--color-contrast-400);\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n\n  .item-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    color: var(--color-contrast-500);\n  }\n\n  .item-label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .item-shortcut {\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n  }\n\n  /* =====================\n       Footer hints\n       ===================== */\n\n  .footer {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-4);\n    align-items: center;\n    padding: var(--size-2) var(--size-4);\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n    border-block-start: var(--border) solid var(--color-contrast-100);\n  }\n\n  .footer-hint {\n    display: inline-flex;\n    gap: var(--size-1);\n    align-items: center;\n  }\n\n  .footer ore-keyboard-key {\n    --keyboard-key-font-family: inherit;\n    --keyboard-key-padding-inline: var(--size-1);\n  }\n\n  /* Slotted item elements are pure data nodes: never rendered directly. */\n  ::slotted(ore-command-palette-item) {\n    display: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"command-palette.css.js","names":[],"sources":["../../../src/overlay/command-palette/command-palette.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_radius: var(--command-palette-radius, var(--rounded-lg));\n    --_max-width: var(--command-palette-max-width, 40rem);\n    --_preview-width: var(--command-palette-preview-width, 18rem);\n    --_backdrop-bg: var(--command-palette-backdrop, color-mix(in oklch, var(--color-canvas) 40%, transparent));\n    --_panel-bg: var(--command-palette-bg, var(--color-canvas));\n    --_panel-border-color: var(--command-palette-border-color, var(--color-divider));\n    --_option-hover-bg: var(--command-palette-option-hover-bg, var(--color-contrast-100));\n    --_option-focus-bg: var(\n      --command-palette-option-focus-bg,\n      color-mix(in oklch, var(--color-primary) 12%, var(--color-contrast-100))\n    );\n\n    display: contents;\n  }\n\n  /* =====================\n       Native <dialog> resets: see ore-dialog for the full rationale.\n       ===================== */\n\n  dialog {\n    all: unset;\n    position: fixed;\n    inset: 0;\n    box-sizing: border-box;\n    display: flex;\n    align-items: flex-start;\n    justify-content: center;\n    width: 100%;\n    max-width: 100%;\n    height: 100%;\n    max-height: 100%;\n    padding-block-start: min(14vh, var(--size-24));\n    margin: 0;\n    overflow: hidden;\n    pointer-events: none;\n    background: transparent;\n    border: none;\n    transition:\n      display 200ms allow-discrete,\n      overlay 200ms allow-discrete;\n  }\n\n  dialog:not([open]) {\n    display: none;\n  }\n\n  dialog:not([open]) .panel {\n    display: none;\n  }\n\n  dialog[open] {\n    pointer-events: auto;\n  }\n\n  dialog::backdrop {\n    background: var(--_backdrop-bg);\n    opacity: 1;\n    backdrop-filter: blur(var(--blur-xs));\n    transition:\n      opacity var(--transition-normal),\n      overlay var(--transition-normal) allow-discrete,\n      display var(--transition-normal) allow-discrete;\n\n    @starting-style {\n      opacity: 0;\n    }\n  }\n\n  dialog.closing::backdrop {\n    opacity: 0;\n  }\n\n  /* =====================\n       Panel\n       ===================== */\n\n  .panel {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    width: var(--_max-width);\n    max-width: calc(100vw - var(--size-8));\n    max-height: min(28rem, calc(100dvh - var(--size-16)));\n    overflow: hidden;\n    background: var(--_panel-bg);\n    border: var(--border) solid var(--_panel-border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--command-palette-shadow, var(--shadow-2xl));\n    opacity: 1;\n    backdrop-filter: blur(var(--blur-md));\n    transform: scale(1) translateY(0);\n    transition:\n      opacity 200ms var(--ease-spring),\n      transform 200ms var(--ease-spring);\n\n    @starting-style {\n      opacity: 0;\n      transform: scale(var(--overlay-enter-scale-dialog)) translateY(-4px);\n    }\n  }\n\n  dialog.closing .panel {\n    opacity: 0;\n    transform: scale(var(--overlay-enter-scale-dialog)) translateY(-4px);\n    transition:\n      opacity 150ms var(--ease-spring),\n      transform 150ms var(--ease-spring);\n  }\n\n  @media (width <= 640px) {\n    .panel {\n      width: calc(100vw - var(--size-4));\n      max-width: calc(100vw - var(--size-4));\n    }\n\n    dialog {\n      padding-block-start: var(--size-4);\n    }\n\n    /* No horizontal room for a side-by-side pane: the preview drops under the\n       list with its own capped height, keeping the rows scannable. */\n    .body {\n      flex-direction: column;\n    }\n\n    .preview {\n      width: auto;\n      max-height: 40%;\n      border-block-start: var(--border) solid var(--color-contrast-100);\n      border-inline-start: 0;\n    }\n  }\n\n  /* =====================\n       Search field\n       ===================== */\n\n  .search {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-3) var(--size-4);\n    border-block-end: var(--border) solid var(--color-contrast-100);\n  }\n\n  .search-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    color: var(--color-contrast-400);\n  }\n\n  .search-input {\n    flex: 1;\n    min-width: 0;\n    padding: 0;\n    font: inherit;\n    font-size: var(--text-md);\n    color: var(--color-contrast-900);\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  .search-input::placeholder {\n    color: var(--color-contrast-400);\n  }\n\n  .search-loader {\n    display: inline-flex;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    border: 2px solid var(--color-contrast-300);\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: command-palette-spin var(--transition-loader) infinite;\n  }\n\n  .search-loader[hidden] {\n    display: none;\n  }\n\n  @keyframes command-palette-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  /* =====================\n       Listbox\n       ===================== */\n\n  /* Row holding the listbox and the optional preview pane side by side. The\n     preview folds away (hidden attribute) while its slot is empty, so palettes\n     that never use it keep the plain single-column panel. */\n  .body {\n    display: flex;\n    flex: 1;\n    /* The listbox scrolls inside this row: without min-height the flex item\n       grows past the panel instead of honoring max-height. */\n    min-height: 0;\n  }\n\n  .listbox {\n    flex: 1;\n    min-width: 0;\n    padding: var(--size-1);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    scrollbar-width: thin;\n  }\n\n  .preview {\n    flex-shrink: 0;\n    width: var(--_preview-width);\n    padding: var(--size-3) var(--size-4);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    font-size: var(--text-sm);\n    color: var(--color-contrast-700);\n    scrollbar-width: thin;\n    border-inline-start: var(--border) solid var(--color-contrast-100);\n  }\n\n  .preview[hidden] {\n    display: none;\n  }\n\n  .empty {\n    padding: var(--size-6) var(--size-3);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-400);\n    text-align: center;\n  }\n\n  .group-heading {\n    padding: var(--size-2) var(--size-2-5) var(--size-1);\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    text-transform: uppercase;\n    letter-spacing: var(--tracking-wide, 0.05em);\n  }\n\n  .item {\n    display: flex;\n    gap: var(--size-2-5);\n    align-items: center;\n    padding: var(--size-2) var(--size-2-5);\n    font-size: var(--text-sm);\n    line-height: var(--leading-normal);\n    color: var(--color-contrast-800);\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n    transition: background var(--transition-fast);\n  }\n\n  .item:hover:not([data-disabled]) {\n    background: var(--_option-hover-bg);\n  }\n\n  .item[data-focused]:not([data-disabled]) {\n    background: var(--_option-focus-bg);\n  }\n\n  .item[data-disabled] {\n    color: var(--color-contrast-400);\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n\n  .item-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    color: var(--color-contrast-500);\n  }\n\n  .item-label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .item-shortcut {\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n  }\n\n  /* =====================\n       Footer hints\n       ===================== */\n\n  .footer {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-4);\n    align-items: center;\n    padding: var(--size-2) var(--size-4);\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n    border-block-start: var(--border) solid var(--color-contrast-100);\n  }\n\n  .footer-hint {\n    display: inline-flex;\n    gap: var(--size-1);\n    align-items: center;\n  }\n\n  .footer ore-keyboard-key {\n    --keyboard-key-font-family: inherit;\n    --keyboard-key-padding-inline: var(--size-1);\n  }\n\n  /* Slotted item elements are pure data nodes: never rendered directly. */\n  ::slotted(ore-command-palette-item) {\n    display: none;\n  }\n}\n"],"mappings":""}

package/dist/overlay/command-palette/command-palette.d.ts

@@ -40,11 +40,13 @@ export declare const COMMAND_PALETTE_ITEM_TAG: "ore-command-palette-item";
  * @attr {string} empty-text - Message shown when no item matches the query
  * @attr {boolean} keep-open-on-select - Keep the palette open after an item is selected
  *
+ * @fires active-change - Fired when the focused row changes (keyboard, hover, typing, open, close). detail: `{ value, label, item }`; `item` is `undefined` and `value` empty when no row is active
  * @fires open-change - Fired when the palette state changes. detail: `{ open, reason }`
  * @fires search - Fired on every keystroke in the search input. detail: `{ query }`
  * @fires select - Fired when a command is chosen (click or `Enter`). detail: `{ value, label, item }`
  *
  * @slot - `<ore-command-palette-item>` elements (alternative/supplement to the `items` prop)
+ * @slot preview - Optional detail panel rendered beside the list, shown while it has content. Pair it with `active-change` to preview the focused row
  *
  * @cssprop --command-palette-bg - Panel background color
  * @cssprop --command-palette-border-color - Panel border color
@@ -54,11 +56,13 @@ export declare const COMMAND_PALETTE_ITEM_TAG: "ore-command-palette-item";
  * @cssprop --command-palette-backdrop - Backdrop overlay color
  * @cssprop --command-palette-option-hover-bg - Item background on hover
  * @cssprop --command-palette-option-focus-bg - Item background when keyboard-focused
+ * @cssprop --command-palette-preview-width - Preview panel width when the `preview` slot has content
  *
  * @part dialog - Dialog root container
  * @part panel - Panel container
  * @part input - Search input
  * @part listbox - Listbox of matching commands
+ * @part preview - Preview panel shown beside the list
  *
  * @example
  * ```html

package/dist/overlay/command-palette/command-palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../../src/overlay/command-palette/command-palette.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAChF,YAAY,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAE/F;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,wBAAwB,EAAG,0BAAmC,CAAC;AAO5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,eAAO,MAAM,mBAAmB,EAAG,qBAA8B,CAAC"}
+{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../../src/overlay/command-palette/command-palette.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAChF,YAAY,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAE/F;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,wBAAwB,EAAG,0BAAmC,CAAC;AAO5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,eAAO,MAAM,mBAAmB,EAAG,qBAA8B,CAAC"}

package/dist/overlay/command-palette/command-palette.types.d.ts

@@ -30,7 +30,17 @@ export type CommandPaletteSelectDetail = {
     label: string;
     value: string;
 };
+/**
+ * The row the palette currently points at. `item` is `undefined` when the list is empty or the
+ * palette has no focus, which is also when a `preview` slot should be emptied by its owner.
+ */
+export type CommandPaletteActiveChangeDetail = {
+    item?: CommandPaletteItem;
+    label: string;
+    value: string;
+};
 export type OreCommandPaletteEvents = {
+    'active-change': CommandPaletteActiveChangeDetail;
     'open-change': OverlayOpenChangeDetail;
     search: {
         query: string;

package/dist/overlay/command-palette/command-palette.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command-palette.types.d.ts","sourceRoot":"","sources":["../../../src/overlay/command-palette/command-palette.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8FAA8F;IAC9F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,IAAI,EAAE,kBAAkB,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,aAAa,EAAE,uBAAuB,CAAC;IACvC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1B,MAAM,EAAE,0BAA0B,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,mEAAmE;IACnE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,yDAAyD;IACzD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kGAAkG;IAClG,KAAK,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAClC,kFAAkF;IAClF,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iGAAiG;IACjG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iGAAiG;IACjG,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}
+{"version":3,"file":"command-palette.types.d.ts","sourceRoot":"","sources":["../../../src/overlay/command-palette/command-palette.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8FAA8F;IAC9F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,IAAI,EAAE,kBAAkB,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,gCAAgC,GAAG;IAC7C,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,eAAe,EAAE,gCAAgC,CAAC;IAClD,aAAa,EAAE,uBAAuB,CAAC;IACvC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1B,MAAM,EAAE,0BAA0B,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,mEAAmE;IACnE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,yDAAyD;IACzD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kGAAkG;IAClG,KAAK,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAClC,kFAAkF;IAClF,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iGAAiG;IACjG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iGAAiG;IACjG,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}

package/dist/query-bar.cjs

@@ -0,0 +1,77 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./inputs/shared/native-field-event.cjs"),t=require("./styles/mixins/accessibility.css.cjs"),n=require("./styles/mixins/shape.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./core/aria-reflection.cjs"),a=require("./core/ore.cjs"),o=require("./core/option-list.cjs"),s=require("./chip.cjs"),c=require("./input.cjs"),l=require("./inputs/query-bar/query-bar.css.cjs"),u=require("./inputs/query-bar/query-bar-grammar.cjs");let d=require("@vielzeug/ripple"),f=require("@vielzeug/ore");var p=36,m=`ore-query-bar`;(0,f.define)(m,{props:{clearable:f.prop.bool(!1),disabled:f.prop.bool(!1),error:f.prop.string(),helper:f.prop.string(),"hide-label":f.prop.bool(!1),label:f.prop.string(),placeholder:f.prop.string(),rounded:f.prop.string(),size:f.prop.string(),state:f.prop.data(),variant:f.prop.string(),vocabulary:f.prop.data()},setup(t){let n=(0,f.getHost)(),r=(0,f.useEmit)(),s=f.watchEffect,c=a.lifecycleSignal(f.onCleanup),l=(0,f.createId)(`query-bar`),vocabulary=()=>t.vocabulary.value??[],emptyState=()=>({text:``,tokens:[]}),normalizeState=e=>{if(e==null)return emptyState();if(typeof e!=`object`||!Array.isArray(e.tokens))return null;let t=e;return{text:typeof t.text==`string`?t.text:``,tokens:t.tokens}},m=(0,d.signal)(normalizeState(t.state.value)??emptyState()),h=(0,d.signal)(m.value.text),g=(0,d.computed)(()=>u.suggestQuery(h.value,vocabulary())),_=(0,d.computed)(()=>new Map(vocabulary().map(e=>[e.key,e]))),v=(0,d.computed)(()=>{let e=u.parseQuery(h.value,vocabulary()).draft;return e!==null&&e.valuePrefix!==``&&g.value.length===0}),y=(0,d.computed)(()=>{let e=u.parseQuery(h.value,vocabulary()).draft;return`No matching ${(e?_.value.get(e.key):void 0)?.label??e?.key??``} — searching as text`}),b=null,x=null,S=null,C=(0,f.ref)(),w=o.createListboxDropdown({getBoundary:()=>n,getFocusedOptionElement:()=>S?.querySelector(`[data-focused]`)??null,getItems:()=>g.value,getOptionId:e=>`${l}-opt-${e}`,getPanel:()=>S,getReference:()=>x,getTrigger:()=>b,isDisabled:()=>!!t.disabled.value,isItemDisabled:()=>!1,onClose:e=>r(`open-change`,{open:!1,reason:e}),onOpen:e=>r(`open-change`,{open:!0,reason:e}),positioning:{matchWidth:!1},restoreFocus:!1,signal:c}),{focusedIndex:T,isOpen:E}=w;(0,f.bind)({attr:{open:()=>E.value?!0:void 0,size:t.size,variant:t.variant}}),Object.defineProperty(n,"state",{configurable:!0,enumerable:!0,get:()=>m.value,set:e=>{let t=normalizeState(e);t!==null&&t.tokens!==m.value.tokens&&(m.value=t,h.value=t.text)}});function emitChange(){e.dispatchNativeFieldEvent(n,`input`),e.dispatchNativeFieldEvent(n,`change`)}function commit(e){m.value=e,emitChange()}function mergeTokens(e,t){let n=e;for(let e of t){let t=n.findIndex(t=>t.key===e.key);n=t>=0?[...n.slice(0,t),e,...n.slice(t+1)]:[...n,e]}return n}function applyField(){let e=u.parseQuery(h.value,vocabulary());e.tokens.length>0&&(h.value=e.text),commit({text:e.text,tokens:mergeTokens(m.value.tokens,e.tokens)})}function handleInput(e){h.value=e.target.value,applyField(),canOpen()&&w.open(`keyboard`)}function pick(e){let t=/\s$/.test(h.value)||h.value.trim()===``?``:h.value.replace(/\S+\s*$/,``).trim();e.kind===`key`?(h.value=t?`${t} ${e.key}:`:`${e.key}:`,applyField()):(h.value=t,commit(u.commitToken({text:t,tokens:m.value.tokens},e.key,e.value))),b?.focus()}function removeChip(e){e.stopPropagation();let t=e.detail?.value;t!==void 0&&(commit(u.removeToken(m.value,t)),b?.focus())}function clearText(){h.value=``,commit({text:``,tokens:m.value.tokens}),b?.focus()}function handleKeydown(e){if(!t.disabled.value&&!w.handleKeydown(e))switch(e.key){case`Enter`:{let t=E.value?g.value[T.value]:void 0;t&&(e.preventDefault(),pick(t));break}case`Backspace`:if(h.value===``&&m.value.tokens.length>0){let e=m.value.tokens[m.value.tokens.length-1];e&&commit(u.removeToken(m.value,e.key))}break;case`Tab`:w.close(`programmatic`)}}let canOpen=()=>g.value.length>0||v.value,openDropdown=()=>{canOpen()&&w.open(`focus`)};s(()=>{E.value&&!canOpen()&&w.close(`programmatic`)});function handleFocusOut(e){let t=e.relatedTarget;if(t instanceof Node&&n.shadowRoot?.contains(t))return;let r=u.parseQuery(h.value,vocabulary());if(r.draft){if(r.draft.valuePrefix===``){h.value=r.text;return}if(u.suggestQuery(h.value,vocabulary()).length===0){let e=r.text?`${r.text} ${r.draft.key}:${r.draft.valuePrefix}`:`${r.draft.key}:${r.draft.valuePrefix}`;h.value=e,commit({text:e,tokens:m.value.tokens})}}}s(()=>{g.value,w.isOpen.value&&w.set(-1)}),s(()=>{E.value?(S&&`showPopover`in S&&!S.matches(`:popover-open`)&&S.showPopover(),w.updatePosition()):S&&`hidePopover`in S&&S.matches(`:popover-open`)&&S.hidePopover()}),(0,f.onElement)(C,e=>{x=e;let t=e.shadowRoot?.querySelector(`input`)??null;if(t)return b=t,t.setAttribute(`role`,`combobox`),t.setAttribute(`autocomplete`,`off`),t.setAttribute(`aria-autocomplete`,`list`),t.setAttribute(`aria-haspopup`,`listbox`),t.setAttribute(`spellcheck`,`false`),t.setAttribute(`aria-keyshortcuts`,`Backspace`),t.addEventListener(`input`,handleInput),t.addEventListener(`keydown`,handleKeydown),t.addEventListener(`focus`,openDropdown),t.addEventListener(`focusout`,handleFocusOut),()=>{b=null,x=null,t.removeEventListener(`input`,handleInput),t.removeEventListener(`keydown`,handleKeydown),t.removeEventListener(`focus`,openDropdown),t.removeEventListener(`focusout`,handleFocusOut)}}),(0,f.onMounted)(()=>{let e=n.shadowRoot?.querySelector(`[role="listbox"]`);b&&i.setAriaReflection(b,`ariaControlsElements`,e?[e]:[])}),s(()=>{if(!C.value||!b)return;b.setAttribute(`aria-expanded`,String(E.value));let e=n.shadowRoot?.querySelector(`[role="listbox"]`);i.setAriaReflection(b,`ariaControlsElements`,e?[e]:[]);let r=w.ariaActiveDescendant.value,a=r?[...S?.querySelectorAll(`[role="option"]`)??[]].find(e=>e.id===r):null;i.setAriaReflection(b,`ariaActiveDescendantElement`,a?.id===r?[a]:[]),t.disabled.value?b.setAttribute(`aria-disabled`,`true`):b.removeAttribute(`aria-disabled`),t.error.value?b.setAttribute(`aria-invalid`,`true`):b.removeAttribute(`aria-invalid`)}),s(()=>{C.value&&b&&b.value!==h.value&&(b.value=h.value)}),(0,f.onCleanup)(()=>{w[Symbol.dispose]()});let hideLabel=()=>t[`hide-label`].value,inputLabel=()=>hideLabel()?``:t.label.value??``,inputAriaLabel=()=>hideLabel()?t.label.value??``:null,pillLabel=e=>{let t=_.value.get(e.key),n=t?.options.find(t=>t.value===e.value);return t&&n?`${t.label}: ${n.label}`:`${t?.key??e.key}: ${n?.label??e.value}`},optionMeta=e=>{let t=_.value.get(e.key);return e.kind===`key`?`${e.key}:`:t?.label??e.key};return f.html`
+      <ore-input
+        class="trigger"
+        ref=${C}
+        label="${inputLabel}"
+        aria-label="${inputAriaLabel}"
+        placeholder="${()=>t.placeholder.value??``}"
+        label-placement="inset"
+        variant="${()=>t.variant.value??`bordered`}"
+        size="${()=>t.size.value??``}"
+        rounded="${()=>t.rounded.value??`md`}"
+        helper="${()=>t.helper.value??``}"
+        error="${()=>t.error.value??``}"
+        ?disabled="${()=>!!t.disabled.value}"
+        part="wrapper">
+        <div class="prefix" slot="prefix">
+          <ore-icon name="search" size="16" aria-hidden="true"></ore-icon>
+          <span class="pills">
+            ${()=>m.value.tokens.map(e=>f.html`
+                  <ore-chip
+                    value=${e.key}
+                    label=${pillLabel(e)}
+                    mode="removable"
+                    variant="flat"
+                    size="sm"
+                    @remove=${removeChip}>
+                    ${pillLabel(e)}
+                  </ore-chip>
+                `)}
+          </span>
+        </div>
+        <span class="suffix" slot="suffix">
+          <button
+            class="clear-btn"
+            part="clear-btn"
+            type="button"
+            aria-label="Clear"
+            tabindex="-1"
+            ?hidden="${()=>!t.clearable.value||h.value===``}"
+            @click="${clearText}">
+            <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
+          </button>
+        </span>
+      </ore-input>
+      <div
+        class="dropdown"
+        part="dropdown"
+        id="${()=>`${l}-dropdown`}"
+        popover="manual"
+        ?data-open=${()=>E.value}
+        ref=${e=>{S=e}}>
+        <div
+          role="listbox"
+          id="${()=>`${l}-listbox`}"
+          style="${()=>E.value&&canOpen()?`height:${(v.value?1:g.value.length)*p}px;`:``}"
+          aria-label="${()=>t.label.value||t.placeholder.value||`Suggestions`}">
+          ${()=>E.value&&v.value?f.html`<div class="no-match" role="option" aria-selected="false" aria-disabled="true">${y.value}</div>`:``}
+          ${()=>E.value&&g.value.length>0?g.value.map((e,t)=>f.html`
+                    <div
+                      class="option"
+                      role="option"
+                      id="${`${l}-opt-${t}`}"
+                      data-option-index="${t}"
+                      aria-selected="false"
+                      aria-disabled="false"
+                      style="${`position:absolute;top:0;left:0;right:0;transform:translateY(${t*p}px);`}"
+                      ?data-focused=${()=>T.value===t}
+                      @pointermove="${()=>w.set(t)}"
+                      @click="${()=>pick(e)}">
+                      <span class="option-label">${e.label}</span>
+                      <span class="option-meta">${optionMeta(e)}</span>
+                    </div>
+                  `):``}
+        </div>
+      </div>
+    `},shadow:{delegatesFocus:!0},styles:[r.colorThemeMixin,t.reducedMotionMixin,n.roundedVariantMixin,l.default]}),exports.CHIP_TAG=s.CHIP_TAG,exports.INPUT_TAG=c.INPUT_TAG,exports.QUERY_BAR_TAG=m,exports.commitToken=u.commitToken,exports.hasQueryFilters=u.hasQueryFilters,exports.parseQuery=u.parseQuery,exports.removeToken=u.removeToken,exports.suggestQuery=u.suggestQuery,exports.tokenValue=u.tokenValue;
+//# sourceMappingURL=query-bar.cjs.map

package/dist/query-bar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"query-bar.cjs","names":[],"sources":["../src/inputs/query-bar/query-bar.ts"],"sourcesContent":["import {\n  bind,\n  createId,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  onElement,\n  onMounted,\n  prop,\n  ref,\n  useEmit,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { createListboxDropdown, lifecycleSignal, setAriaReflection } from '../../core';\nimport { colorThemeMixin, reducedMotionMixin, roundedVariantMixin } from '../../styles';\nimport type { AddEventListeners, ComponentSize, RoundedSize } from '../../types';\nimport { dispatchNativeFieldEvent } from '../shared/native-field-event';\nimport componentStyles from './query-bar.css?inline';\nimport type { OreQueryBarEvents, OreQueryBarProps } from './query-bar.types';\nimport {\n  commitToken,\n  parseQuery,\n  type QueryState,\n  type QuerySuggestion,\n  type QueryToken,\n  type QueryTokenDef,\n  removeToken,\n  suggestQuery,\n} from './query-bar-grammar';\n\nexport { CHIP_TAG } from '../../feedback/chip/chip';\nexport { INPUT_TAG } from '../input/input';\nexport type { OreQueryBarEvents, OreQueryBarProps } from './query-bar.types';\nexport * from './query-bar-grammar';\n\n/** Fixed row height of one suggestion; the dropdown positions rows against it. */\nconst OPTION_ROW_HEIGHT = 36;\n\n/**\n * A search field that accepts free text and `key:value` tokens together, in the\n * grammar GitHub's pull-request search made familiar. Committed tokens render as\n * removable pills inside the field; a suggestion dropdown lists the vocabulary's\n * keys and matching values while typing, so phones never need to type a colon.\n *\n * The bar is state-driven: `vocabulary` defines the token keys and their accepted\n * values, `state` carries `{ text, tokens }`, and every edit emits `input` +\n * `change` with the new state readable from the element's `state` property. Omit\n * `state` for uncontrolled use. External `state` writes whose `tokens` array is\n * identical to the current one are treated as echoes — only token changes are\n * adopted — so text-only round-trips never wipe the field's live draft.\n *\n * The dropdown opens while the field holds focus (and reopens on typing after\n * Escape) and overlays the page from the top layer. Picking a key suggestion\n * starts composing `key:`; picking a value commits its pill. Typing a complete\n * `key:value` commits immediately. Backspace on an empty field removes the last\n * pill. A draft whose value matches nothing shows a \"searching as text\" row\n * instead of closing; on blur, a bare `key:` fragment reverts and a dead draft\n * degrades into the searched text, so the field never carries silent residue.\n *\n * @element ore-query-bar\n *\n * @attr {string} label - Accessible name for the entry field\n * @attr {string} placeholder - Field placeholder, typically the surface's search hint\n * @attr {string} error - Inline error under the field\n * @attr {string} helper - Helper text under the field\n * @attr {boolean} hide-label - Hide the visible label while keeping its accessible name\n * @attr {boolean} clearable - Show a clear (×) button; it clears the free text only\n * @attr {boolean} disabled - Disable the whole bar\n * @attr {string} size - Field size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Field radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} variant - Field variant: 'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'\n *\n * @prop {QueryState} state - The controlled query state; write a new object to apply external changes\n * @prop {QueryTokenDef[]} vocabulary - The token vocabulary\n *\n * @fires input - The query changed; read the new state from the `state` property\n * @fires change - Same as `input`\n * @fires open-change - The suggestion dropdown opened or closed. detail: { open, reason }\n *\n * @part wrapper - The ore-input field host\n * @part dropdown - The suggestion dropdown container\n * @cssprop --query-bar-min-width - Minimum host width (default 12rem)\n * @cssprop --query-bar-icon-size - Leading search icon size (default 16px)\n * @cssprop --query-bar-option-height - Suggestion row height (default 36px)\n * @cssprop --query-bar-dropdown-min-width - Dropdown panel minimum width (default 16rem)\n * @cssprop --query-bar-dropdown-max-width - Dropdown panel maximum width (default 28rem, viewport-capped)\n * @cssprop --chip-* - Pill styling (see ore-chip)\n * @cssprop --combobox-dropdown-* - Dropdown panel and option styling (see ore-combobox)\n *\n * @example\n * ```html\n * <ore-query-bar id=\"bar\" label=\"Search issues\" placeholder=\"Title, author or label…\" clearable>\n * </ore-query-bar>\n * <script>\n *   bar.vocabulary = [\n *     { key: 'author', label: 'Author', options: [{ label: 'Alice', value: 'alice' }] },\n *   ];\n * </script>\n * ```\n */\nexport const QUERY_BAR_TAG = 'ore-query-bar' as const;\ndefine<OreQueryBarProps>(QUERY_BAR_TAG, {\n  props: {\n    clearable: prop.bool(false),\n    disabled: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    'hide-label': prop.bool(false),\n    label: prop.string(),\n    placeholder: prop.string(),\n    rounded: prop.string<RoundedSize>(),\n    size: prop.string<ComponentSize>(),\n    state: prop.data<QueryState>(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n    vocabulary: prop.data<QueryTokenDef[]>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreQueryBarEvents>();\n    const watch = watchEffect;\n    const abortSignal = lifecycleSignal(onCleanup);\n    const barId = createId('query-bar');\n\n    const vocabulary = (): QueryTokenDef[] => props.vocabulary.value ?? [];\n    const emptyState = (): QueryState => ({ text: '', tokens: [] });\n    const normalizeState = (value: unknown): QueryState | null => {\n      if (value == null) return emptyState();\n      if (typeof value !== 'object' || !Array.isArray((value as QueryState).tokens)) return null;\n      const state = value as QueryState;\n      return { text: typeof state.text === 'string' ? state.text : '', tokens: state.tokens };\n    };\n\n    /**\n     * The working state: the initial `state` prop plus every commit this bar emits\n     * before the consumer round-trips it. Gestures must read from here, never from\n     * the prop directly: props lag a render behind, so two quick pill removals\n     * would otherwise each compute from the same stale snapshot and the second\n     * would resurrect the first pill.\n     */\n    const working = signal<QueryState>(normalizeState(props.state.value) ?? emptyState());\n    /** What the field shows: the live draft (free text plus an unfinished token). */\n    const field = signal(working.value.text);\n\n    const suggestions = computed<QuerySuggestion[]>(() => suggestQuery(field.value, vocabulary()));\n    const defBy = computed(() => new Map(vocabulary().map((def) => [def.key, def])));\n\n    /**\n     * True while the draft names a known key whose prefix matches no option. The\n     * dropdown then shows a \"searching as text\" row instead of closing, so the\n     * degradation is never silent — and blur makes the state honest (below).\n     */\n    const noMatch = computed(() => {\n      const draft = parseQuery(field.value, vocabulary()).draft;\n      return draft !== null && draft.valuePrefix !== '' && suggestions.value.length === 0;\n    });\n\n    const noMatchLabel = computed(() => {\n      const draft = parseQuery(field.value, vocabulary()).draft;\n      const def = draft ? defBy.value.get(draft.key) : undefined;\n      return `No matching ${def?.label ?? draft?.key ?? ''} — searching as text`;\n    });\n\n    // Element refs the listbox dropdown needs; resolved as the template renders.\n    let inputEl: HTMLInputElement | null = null;\n    let fieldEl: HTMLElement | null = null;\n    let dropdownEl: HTMLElement | null = null;\n    const inputRef = ref<HTMLElement>();\n\n    const optionList = createListboxDropdown<QuerySuggestion>({\n      getBoundary: () => el,\n      getFocusedOptionElement: () => dropdownEl?.querySelector<HTMLElement>('[data-focused]') ?? null,\n      getItems: () => suggestions.value,\n      getOptionId: (index) => `${barId}-opt-${index}`,\n      getPanel: () => dropdownEl,\n      getReference: () => fieldEl,\n      getTrigger: () => inputEl,\n      isDisabled: () => Boolean(props.disabled.value),\n      isItemDisabled: () => false,\n      onClose: (reason) => emit('open-change', { open: false, reason }),\n      onOpen: (reason) => emit('open-change', { open: true, reason }),\n      // The reference is the whole (often full-row) field: matching its width would\n      // stretch the panel across the page. The dropdown sizes to its content within\n      // its own min/max bounds instead, like a menu.\n      positioning: { matchWidth: false },\n      restoreFocus: false,\n      signal: abortSignal,\n    });\n    const { focusedIndex, isOpen } = optionList;\n\n    bind({\n      attr: {\n        open: () => (isOpen.value ? true : undefined),\n        size: props.size,\n        variant: props.variant,\n      },\n    });\n\n    // Expose the working state as a native-like `.state` property on the host: the\n    // live external channel, replacing the prop-installed property exactly as\n    // ore-combobox replaces its own `value`. Writes whose `tokens` array matches\n    // the working one are consumer echoes (v-model round-trips) and keep the\n    // field's live draft; a changed tokens array is an external write — a deep-link\n    // preset, a mode switch — and is adopted, field included.\n    Object.defineProperty(el, 'state', {\n      configurable: true,\n      enumerable: true,\n      get: () => working.value,\n      set: (value: unknown) => {\n        const next = normalizeState(value);\n        if (next === null || next.tokens === working.value.tokens) return;\n        working.value = next;\n        field.value = next.text;\n      },\n    });\n\n    // ── State commits ────────────────────────────────────────────────────────\n\n    function emitChange(): void {\n      dispatchNativeFieldEvent(el, 'input');\n      dispatchNativeFieldEvent(el, 'change');\n    }\n\n    /** Applies the next state locally and announces it; the consumer reads `el.state`. */\n    function commit(next: QueryState): void {\n      working.value = next;\n      emitChange();\n    }\n\n    /** Folds parsed tokens into the working set, replacing per key and keeping slots. */\n    function mergeTokens(base: QueryToken[], parsed: readonly QueryToken[]): QueryToken[] {\n      let tokens = base;\n      for (const token of parsed) {\n        const slot = tokens.findIndex((candidate) => candidate.key === token.key);\n        tokens = slot >= 0 ? [...tokens.slice(0, slot), token, ...tokens.slice(slot + 1)] : [...tokens, token];\n      }\n      return tokens;\n    }\n\n    /** Parses the field, folds any complete tokens into the working state, and commits. */\n    function applyField(): void {\n      const parsed = parseQuery(field.value, vocabulary());\n      if (parsed.tokens.length > 0) field.value = parsed.text;\n      commit({ text: parsed.text, tokens: mergeTokens(working.value.tokens, parsed.tokens) });\n    }\n\n    function handleInput(event: Event): void {\n      field.value = (event.target as HTMLInputElement).value;\n      applyField();\n      // Typing is the strongest composing signal: the dropdown must come back after\n      // Escape without a blur/refocus cycle, or the bar reads as broken.\n      if (canOpen()) optionList.open('keyboard');\n    }\n\n    function pick(suggestion: QuerySuggestion): void {\n      // The word being typed is selector intent: whichever suggestion is picked consumes\n      // it, so it never leaks into the free text as a stray search term. A field ending\n      // in whitespace has no active word; a `key:…` draft is consumed like any word.\n      const rest =\n        /\\s$/.test(field.value) || field.value.trim() === '' ? '' : field.value.replace(/\\S+\\s*$/, '').trim();\n      if (suggestion.kind === 'key') {\n        // Start composing: replace the word being typed with the token key.\n        field.value = rest ? `${rest} ${suggestion.key}:` : `${suggestion.key}:`;\n        applyField();\n      } else {\n        field.value = rest;\n        commit(commitToken({ text: rest, tokens: working.value.tokens }, suggestion.key, suggestion.value));\n      }\n      inputEl?.focus();\n    }\n\n    function removeChip(event: Event): void {\n      event.stopPropagation();\n      const key = (event as CustomEvent<{ value?: string }>).detail?.value;\n      if (key === undefined) return;\n      commit(removeToken(working.value, key));\n      // Keep the compose flow: without this, focus falls to the host and the next\n      // keystroke goes nowhere.\n      inputEl?.focus();\n    }\n\n    /** The field's own clear button: clears the free text, never the pills. */\n    function clearText(): void {\n      field.value = '';\n      commit({ text: '', tokens: working.value.tokens });\n      inputEl?.focus();\n    }\n\n    function handleKeydown(e: KeyboardEvent): void {\n      if (props.disabled.value) return;\n\n      // While open, the listbox owns arrows, Home/End, and Escape.\n      if (optionList.handleKeydown(e)) return;\n\n      switch (e.key) {\n        case 'Enter': {\n          const active = isOpen.value ? suggestions.value[focusedIndex.value] : undefined;\n          if (active) {\n            e.preventDefault();\n            pick(active);\n          }\n          break;\n        }\n        case 'Backspace':\n          // The GitHub-style touch: backspace on an empty field drops the last pill.\n          if (field.value === '' && working.value.tokens.length > 0) {\n            const last = working.value.tokens[working.value.tokens.length - 1];\n            if (last) commit(removeToken(working.value, last.key));\n          }\n          break;\n        case 'Tab':\n          optionList.close('programmatic');\n          break;\n        default:\n          break;\n      }\n    }\n\n    // The dropdown is open exactly while the field holds focus and has something to\n    // show — suggestions, or the no-match row for an unresolvable draft; Escape,\n    // outside pointers, and Tab dismiss it through the machinery.\n    const canOpen = (): boolean => suggestions.value.length > 0 || noMatch.value;\n    const openDropdown = (): void => {\n      if (canOpen()) optionList.open('focus');\n    };\n    watch(() => {\n      if (isOpen.value && !canOpen()) optionList.close('programmatic');\n    });\n\n    /**\n     * Blur makes the field honest about dead drafts. A bare `key:` fragment is dead\n     * syntax — revert it, leaving no residue. A draft that matches nothing was\n     * already announced as \"searching as text\" — degrade it into the text so what\n     * the field shows is what is searched. Live compositions (a draft with matching\n     * suggestions) survive blur, so an interrupted pick resumes on refocus.\n     */\n    function handleFocusOut(event: FocusEvent): void {\n      const next = event.relatedTarget;\n      if (next instanceof Node && el.shadowRoot?.contains(next)) return;\n\n      const parsed = parseQuery(field.value, vocabulary());\n      if (!parsed.draft) return;\n      if (parsed.draft.valuePrefix === '') {\n        field.value = parsed.text;\n        return;\n      }\n      if (suggestQuery(field.value, vocabulary()).length === 0) {\n        const degraded = parsed.text\n          ? `${parsed.text} ${parsed.draft.key}:${parsed.draft.valuePrefix}`\n          : `${parsed.draft.key}:${parsed.draft.valuePrefix}`;\n        field.value = degraded;\n        commit({ text: degraded, tokens: working.value.tokens });\n      }\n    }\n\n    // New suggestions start from no highlight; arrows move it, Enter commits it.\n    watch(() => {\n      void suggestions.value;\n      if (optionList.isOpen.value) optionList.set(-1);\n    });\n\n    // The dropdown is popover=manual: without showPopover the UA stylesheet keeps it\n    // display:none, so the panel must enter the top layer exactly when it opens.\n    watch(() => {\n      if (isOpen.value) {\n        if (dropdownEl && 'showPopover' in dropdownEl && !dropdownEl.matches(':popover-open')) {\n          dropdownEl.showPopover();\n        }\n        optionList.updatePosition();\n      } else if (dropdownEl && 'hidePopover' in dropdownEl && dropdownEl.matches(':popover-open')) {\n        dropdownEl.hidePopover();\n      }\n    });\n\n    // Once ore-input is in the DOM, grab its inner <input> from its shadow root and\n    // attach the query-bar's ARIA and event handlers imperatively (the combobox\n    // pattern: the focused element must carry the combobox semantics itself).\n    onElement(inputRef, (bitInputEl) => {\n      fieldEl = bitInputEl;\n\n      const rawInput = bitInputEl.shadowRoot?.querySelector<HTMLInputElement>('input') ?? null;\n      if (!rawInput) return;\n\n      inputEl = rawInput;\n\n      rawInput.setAttribute('role', 'combobox');\n      rawInput.setAttribute('autocomplete', 'off');\n      rawInput.setAttribute('aria-autocomplete', 'list');\n      rawInput.setAttribute('aria-haspopup', 'listbox');\n      rawInput.setAttribute('spellcheck', 'false');\n      // Backspace on the empty field drops the last pill: the only discoverability\n      // of that shortcut for assistive tech.\n      rawInput.setAttribute('aria-keyshortcuts', 'Backspace');\n\n      rawInput.addEventListener('input', handleInput as EventListener);\n      rawInput.addEventListener('keydown', handleKeydown as EventListener);\n      rawInput.addEventListener('focus', openDropdown);\n      rawInput.addEventListener('focusout', handleFocusOut as EventListener);\n\n      return () => {\n        inputEl = null;\n        fieldEl = null;\n        rawInput.removeEventListener('input', handleInput as EventListener);\n        rawInput.removeEventListener('keydown', handleKeydown as EventListener);\n        rawInput.removeEventListener('focus', openDropdown);\n        rawInput.removeEventListener('focusout', handleFocusOut as EventListener);\n      };\n    });\n\n    onMounted(() => {\n      const listbox = el.shadowRoot?.querySelector<HTMLElement>('[role=\"listbox\"]');\n      if (inputEl) setAriaReflection(inputEl, 'ariaControlsElements', listbox ? [listbox] : []);\n    });\n\n    // Reactively sync combobox-specific ARIA the field does not manage itself.\n    watch(() => {\n      if (!inputRef.value || !inputEl) return;\n\n      inputEl.setAttribute('aria-expanded', String(isOpen.value));\n\n      const listbox = el.shadowRoot?.querySelector<HTMLElement>('[role=\"listbox\"]');\n      setAriaReflection(inputEl, 'ariaControlsElements', listbox ? [listbox] : []);\n      const activeId = optionList.ariaActiveDescendant.value;\n      const activeOption = activeId\n        ? [...(dropdownEl?.querySelectorAll<HTMLElement>('[role=\"option\"]') ?? [])].find(\n            (option) => option.id === activeId,\n          )\n        : null;\n      setAriaReflection(inputEl, 'ariaActiveDescendantElement', activeOption?.id === activeId ? [activeOption] : []);\n\n      if (props.disabled.value) inputEl.setAttribute('aria-disabled', 'true');\n      else inputEl.removeAttribute('aria-disabled');\n\n      if (props.error.value) inputEl.setAttribute('aria-invalid', 'true');\n      else inputEl.removeAttribute('aria-invalid');\n    });\n\n    // Reactively sync the field signal into the raw input value.\n    watch(() => {\n      if (!inputRef.value || !inputEl) return;\n      if (inputEl.value !== field.value) inputEl.value = field.value;\n    });\n\n    onCleanup(() => {\n      optionList[Symbol.dispose]();\n    });\n\n    // When hide-label is set, suppress the visible label passed to ore-input (no inset\n    // label renders, avoiding extra field height) but expose the label text as\n    // aria-label on the input so the bar retains its accessible name.\n    const hideLabel = () => props['hide-label'].value;\n    const inputLabel = () => (hideLabel() ? '' : (props.label.value ?? ''));\n    const inputAriaLabel = () => (hideLabel() ? (props.label.value ?? '') : null);\n\n    /** Pill copy: `Author: Alice`, degrading to the raw key/value outside the vocabulary. */\n    const pillLabel = (token: QueryToken): string => {\n      const def = defBy.value.get(token.key);\n      const option = def?.options.find((candidate) => candidate.value === token.value);\n      if (def && option) return `${def.label}: ${option.label}`;\n      return `${def?.key ?? token.key}: ${option?.label ?? token.value}`;\n    };\n\n    /** The muted second column: the token key for value rows, the `key:` syntax for key rows. */\n    const optionMeta = (suggestion: QuerySuggestion): string => {\n      const def = defBy.value.get(suggestion.key);\n      return suggestion.kind === 'key' ? `${suggestion.key}:` : (def?.label ?? suggestion.key);\n    };\n\n    return html`\n      <ore-input\n        class=\"trigger\"\n        ref=${inputRef}\n        label=\"${inputLabel}\"\n        aria-label=\"${inputAriaLabel}\"\n        placeholder=\"${() => props.placeholder.value ?? ''}\"\n        label-placement=\"inset\"\n        variant=\"${() => props.variant.value ?? 'bordered'}\"\n        size=\"${() => props.size.value ?? ''}\"\n        rounded=\"${() => props.rounded.value ?? 'md'}\"\n        helper=\"${() => props.helper.value ?? ''}\"\n        error=\"${() => props.error.value ?? ''}\"\n        ?disabled=\"${() => Boolean(props.disabled.value)}\"\n        part=\"wrapper\">\n        <div class=\"prefix\" slot=\"prefix\">\n          <ore-icon name=\"search\" size=\"16\" aria-hidden=\"true\"></ore-icon>\n          <span class=\"pills\">\n            ${() =>\n              working.value.tokens.map(\n                (token) => html`\n                  <ore-chip\n                    value=${token.key}\n                    label=${pillLabel(token)}\n                    mode=\"removable\"\n                    variant=\"flat\"\n                    size=\"sm\"\n                    @remove=${removeChip}>\n                    ${pillLabel(token)}\n                  </ore-chip>\n                `,\n              )}\n          </span>\n        </div>\n        <span class=\"suffix\" slot=\"suffix\">\n          <button\n            class=\"clear-btn\"\n            part=\"clear-btn\"\n            type=\"button\"\n            aria-label=\"Clear\"\n            tabindex=\"-1\"\n            ?hidden=\"${() => !props.clearable.value || field.value === ''}\"\n            @click=\"${clearText}\">\n            <ore-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n          </button>\n        </span>\n      </ore-input>\n      <div\n        class=\"dropdown\"\n        part=\"dropdown\"\n        id=\"${() => `${barId}-dropdown`}\"\n        popover=\"manual\"\n        ?data-open=${() => isOpen.value}\n        ref=${(node: HTMLElement | null) => {\n          dropdownEl = node;\n        }}>\n        <div\n          role=\"listbox\"\n          id=\"${() => `${barId}-listbox`}\"\n          style=\"${() => (isOpen.value && canOpen() ? `height:${(noMatch.value ? 1 : suggestions.value.length) * OPTION_ROW_HEIGHT}px;` : '')}\"\n          aria-label=\"${() => props.label.value || props.placeholder.value || 'Suggestions'}\">\n          ${() =>\n            isOpen.value && noMatch.value\n              ? html`<div class=\"no-match\" role=\"option\" aria-selected=\"false\" aria-disabled=\"true\">${noMatchLabel.value}</div>`\n              : ''}\n          ${() =>\n            isOpen.value && suggestions.value.length > 0\n              ? suggestions.value.map(\n                  (suggestion, index) => html`\n                    <div\n                      class=\"option\"\n                      role=\"option\"\n                      id=\"${`${barId}-opt-${index}`}\"\n                      data-option-index=\"${index}\"\n                      aria-selected=\"false\"\n                      aria-disabled=\"false\"\n                      style=\"${`position:absolute;top:0;left:0;right:0;transform:translateY(${index * OPTION_ROW_HEIGHT}px);`}\"\n                      ?data-focused=${() => focusedIndex.value === index}\n                      @pointermove=\"${() => optionList.set(index)}\"\n                      @click=\"${() => pick(suggestion)}\">\n                      <span class=\"option-label\">${suggestion.label}</span>\n                      <span class=\"option-meta\">${optionMeta(suggestion)}</span>\n                    </div>\n                  `,\n                )\n              : ''}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [colorThemeMixin, reducedMotionMixin, roundedVariantMixin, componentStyles],\n}) as unknown as AddEventListeners<OreQueryBarEvents>;\n"],"mappings":"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"}

package/dist/query-bar.js

@@ -0,0 +1,77 @@
+import{dispatchNativeFieldEvent as e}from"./inputs/shared/native-field-event.js";import{reducedMotionMixin as t}from"./styles/mixins/accessibility.css.js";import{roundedVariantMixin as n}from"./styles/mixins/shape.css.js";import{colorThemeMixin as r}from"./styles/mixins/theme.css.js";import{setAriaReflection as i}from"./core/aria-reflection.js";import{lifecycleSignal as a}from"./core/ore.js";import{createListboxDropdown as o}from"./core/option-list.js";import{CHIP_TAG as s}from"./chip.js";import{INPUT_TAG as c}from"./input.js";import l from"./inputs/query-bar/query-bar.css.js";import{commitToken as u,hasQueryFilters as d,parseQuery as f,removeToken as p,suggestQuery as m,tokenValue as h}from"./inputs/query-bar/query-bar-grammar.js";import{computed as g,signal as _}from"@vielzeug/ripple";import{bind as v,createId as y,define as b,getHost as x,html as S,onCleanup as C,onElement as w,onMounted as T,prop as E,ref as D,useEmit as O,watchEffect as k}from"@vielzeug/ore";var A=36,j=`ore-query-bar`;b(j,{props:{clearable:E.bool(!1),disabled:E.bool(!1),error:E.string(),helper:E.string(),"hide-label":E.bool(!1),label:E.string(),placeholder:E.string(),rounded:E.string(),size:E.string(),state:E.data(),variant:E.string(),vocabulary:E.data()},setup(t){let n=x(),r=O(),s=k,c=a(C),l=y(`query-bar`),vocabulary=()=>t.vocabulary.value??[],emptyState=()=>({text:``,tokens:[]}),normalizeState=e=>{if(e==null)return emptyState();if(typeof e!=`object`||!Array.isArray(e.tokens))return null;let t=e;return{text:typeof t.text==`string`?t.text:``,tokens:t.tokens}},d=_(normalizeState(t.state.value)??emptyState()),h=_(d.value.text),b=g(()=>m(h.value,vocabulary())),E=g(()=>new Map(vocabulary().map(e=>[e.key,e]))),j=g(()=>{let e=f(h.value,vocabulary()).draft;return e!==null&&e.valuePrefix!==``&&b.value.length===0}),M=g(()=>{let e=f(h.value,vocabulary()).draft;return`No matching ${(e?E.value.get(e.key):void 0)?.label??e?.key??``} — searching as text`}),N=null,P=null,F=null,I=D(),L=o({getBoundary:()=>n,getFocusedOptionElement:()=>F?.querySelector(`[data-focused]`)??null,getItems:()=>b.value,getOptionId:e=>`${l}-opt-${e}`,getPanel:()=>F,getReference:()=>P,getTrigger:()=>N,isDisabled:()=>!!t.disabled.value,isItemDisabled:()=>!1,onClose:e=>r(`open-change`,{open:!1,reason:e}),onOpen:e=>r(`open-change`,{open:!0,reason:e}),positioning:{matchWidth:!1},restoreFocus:!1,signal:c}),{focusedIndex:R,isOpen:z}=L;v({attr:{open:()=>z.value?!0:void 0,size:t.size,variant:t.variant}}),Object.defineProperty(n,"state",{configurable:!0,enumerable:!0,get:()=>d.value,set:e=>{let t=normalizeState(e);t!==null&&t.tokens!==d.value.tokens&&(d.value=t,h.value=t.text)}});function emitChange(){e(n,`input`),e(n,`change`)}function commit(e){d.value=e,emitChange()}function mergeTokens(e,t){let n=e;for(let e of t){let t=n.findIndex(t=>t.key===e.key);n=t>=0?[...n.slice(0,t),e,...n.slice(t+1)]:[...n,e]}return n}function applyField(){let e=f(h.value,vocabulary());e.tokens.length>0&&(h.value=e.text),commit({text:e.text,tokens:mergeTokens(d.value.tokens,e.tokens)})}function handleInput(e){h.value=e.target.value,applyField(),canOpen()&&L.open(`keyboard`)}function pick(e){let t=/\s$/.test(h.value)||h.value.trim()===``?``:h.value.replace(/\S+\s*$/,``).trim();e.kind===`key`?(h.value=t?`${t} ${e.key}:`:`${e.key}:`,applyField()):(h.value=t,commit(u({text:t,tokens:d.value.tokens},e.key,e.value))),N?.focus()}function removeChip(e){e.stopPropagation();let t=e.detail?.value;t!==void 0&&(commit(p(d.value,t)),N?.focus())}function clearText(){h.value=``,commit({text:``,tokens:d.value.tokens}),N?.focus()}function handleKeydown(e){if(!t.disabled.value&&!L.handleKeydown(e))switch(e.key){case`Enter`:{let t=z.value?b.value[R.value]:void 0;t&&(e.preventDefault(),pick(t));break}case`Backspace`:if(h.value===``&&d.value.tokens.length>0){let e=d.value.tokens[d.value.tokens.length-1];e&&commit(p(d.value,e.key))}break;case`Tab`:L.close(`programmatic`)}}let canOpen=()=>b.value.length>0||j.value,openDropdown=()=>{canOpen()&&L.open(`focus`)};s(()=>{z.value&&!canOpen()&&L.close(`programmatic`)});function handleFocusOut(e){let t=e.relatedTarget;if(t instanceof Node&&n.shadowRoot?.contains(t))return;let r=f(h.value,vocabulary());if(r.draft){if(r.draft.valuePrefix===``){h.value=r.text;return}if(m(h.value,vocabulary()).length===0){let e=r.text?`${r.text} ${r.draft.key}:${r.draft.valuePrefix}`:`${r.draft.key}:${r.draft.valuePrefix}`;h.value=e,commit({text:e,tokens:d.value.tokens})}}}s(()=>{b.value,L.isOpen.value&&L.set(-1)}),s(()=>{z.value?(F&&`showPopover`in F&&!F.matches(`:popover-open`)&&F.showPopover(),L.updatePosition()):F&&`hidePopover`in F&&F.matches(`:popover-open`)&&F.hidePopover()}),w(I,e=>{P=e;let t=e.shadowRoot?.querySelector(`input`)??null;if(t)return N=t,t.setAttribute(`role`,`combobox`),t.setAttribute(`autocomplete`,`off`),t.setAttribute(`aria-autocomplete`,`list`),t.setAttribute(`aria-haspopup`,`listbox`),t.setAttribute(`spellcheck`,`false`),t.setAttribute(`aria-keyshortcuts`,`Backspace`),t.addEventListener(`input`,handleInput),t.addEventListener(`keydown`,handleKeydown),t.addEventListener(`focus`,openDropdown),t.addEventListener(`focusout`,handleFocusOut),()=>{N=null,P=null,t.removeEventListener(`input`,handleInput),t.removeEventListener(`keydown`,handleKeydown),t.removeEventListener(`focus`,openDropdown),t.removeEventListener(`focusout`,handleFocusOut)}}),T(()=>{let e=n.shadowRoot?.querySelector(`[role="listbox"]`);N&&i(N,`ariaControlsElements`,e?[e]:[])}),s(()=>{if(!I.value||!N)return;N.setAttribute(`aria-expanded`,String(z.value));let e=n.shadowRoot?.querySelector(`[role="listbox"]`);i(N,`ariaControlsElements`,e?[e]:[]);let r=L.ariaActiveDescendant.value,a=r?[...F?.querySelectorAll(`[role="option"]`)??[]].find(e=>e.id===r):null;i(N,`ariaActiveDescendantElement`,a?.id===r?[a]:[]),t.disabled.value?N.setAttribute(`aria-disabled`,`true`):N.removeAttribute(`aria-disabled`),t.error.value?N.setAttribute(`aria-invalid`,`true`):N.removeAttribute(`aria-invalid`)}),s(()=>{I.value&&N&&N.value!==h.value&&(N.value=h.value)}),C(()=>{L[Symbol.dispose]()});let hideLabel=()=>t[`hide-label`].value,inputLabel=()=>hideLabel()?``:t.label.value??``,inputAriaLabel=()=>hideLabel()?t.label.value??``:null,pillLabel=e=>{let t=E.value.get(e.key),n=t?.options.find(t=>t.value===e.value);return t&&n?`${t.label}: ${n.label}`:`${t?.key??e.key}: ${n?.label??e.value}`},optionMeta=e=>{let t=E.value.get(e.key);return e.kind===`key`?`${e.key}:`:t?.label??e.key};return S`
+      <ore-input
+        class="trigger"
+        ref=${I}
+        label="${inputLabel}"
+        aria-label="${inputAriaLabel}"
+        placeholder="${()=>t.placeholder.value??``}"
+        label-placement="inset"
+        variant="${()=>t.variant.value??`bordered`}"
+        size="${()=>t.size.value??``}"
+        rounded="${()=>t.rounded.value??`md`}"
+        helper="${()=>t.helper.value??``}"
+        error="${()=>t.error.value??``}"
+        ?disabled="${()=>!!t.disabled.value}"
+        part="wrapper">
+        <div class="prefix" slot="prefix">
+          <ore-icon name="search" size="16" aria-hidden="true"></ore-icon>
+          <span class="pills">
+            ${()=>d.value.tokens.map(e=>S`
+                  <ore-chip
+                    value=${e.key}
+                    label=${pillLabel(e)}
+                    mode="removable"
+                    variant="flat"
+                    size="sm"
+                    @remove=${removeChip}>
+                    ${pillLabel(e)}
+                  </ore-chip>
+                `)}
+          </span>
+        </div>
+        <span class="suffix" slot="suffix">
+          <button
+            class="clear-btn"
+            part="clear-btn"
+            type="button"
+            aria-label="Clear"
+            tabindex="-1"
+            ?hidden="${()=>!t.clearable.value||h.value===``}"
+            @click="${clearText}">
+            <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
+          </button>
+        </span>
+      </ore-input>
+      <div
+        class="dropdown"
+        part="dropdown"
+        id="${()=>`${l}-dropdown`}"
+        popover="manual"
+        ?data-open=${()=>z.value}
+        ref=${e=>{F=e}}>
+        <div
+          role="listbox"
+          id="${()=>`${l}-listbox`}"
+          style="${()=>z.value&&canOpen()?`height:${(j.value?1:b.value.length)*A}px;`:``}"
+          aria-label="${()=>t.label.value||t.placeholder.value||`Suggestions`}">
+          ${()=>z.value&&j.value?S`<div class="no-match" role="option" aria-selected="false" aria-disabled="true">${M.value}</div>`:``}
+          ${()=>z.value&&b.value.length>0?b.value.map((e,t)=>S`
+                    <div
+                      class="option"
+                      role="option"
+                      id="${`${l}-opt-${t}`}"
+                      data-option-index="${t}"
+                      aria-selected="false"
+                      aria-disabled="false"
+                      style="${`position:absolute;top:0;left:0;right:0;transform:translateY(${t*A}px);`}"
+                      ?data-focused=${()=>R.value===t}
+                      @pointermove="${()=>L.set(t)}"
+                      @click="${()=>pick(e)}">
+                      <span class="option-label">${e.label}</span>
+                      <span class="option-meta">${optionMeta(e)}</span>
+                    </div>
+                  `):``}
+        </div>
+      </div>
+    `},shadow:{delegatesFocus:!0},styles:[r,t,n,l]});export{s as CHIP_TAG,c as INPUT_TAG,j as QUERY_BAR_TAG,u as commitToken,d as hasQueryFilters,f as parseQuery,p as removeToken,m as suggestQuery,h as tokenValue};
+//# sourceMappingURL=query-bar.js.map

package/dist/query-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"query-bar.js","names":[],"sources":["../src/inputs/query-bar/query-bar.ts"],"sourcesContent":["import {\n  bind,\n  createId,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  onElement,\n  onMounted,\n  prop,\n  ref,\n  useEmit,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { createListboxDropdown, lifecycleSignal, setAriaReflection } from '../../core';\nimport { colorThemeMixin, reducedMotionMixin, roundedVariantMixin } from '../../styles';\nimport type { AddEventListeners, ComponentSize, RoundedSize } from '../../types';\nimport { dispatchNativeFieldEvent } from '../shared/native-field-event';\nimport componentStyles from './query-bar.css?inline';\nimport type { OreQueryBarEvents, OreQueryBarProps } from './query-bar.types';\nimport {\n  commitToken,\n  parseQuery,\n  type QueryState,\n  type QuerySuggestion,\n  type QueryToken,\n  type QueryTokenDef,\n  removeToken,\n  suggestQuery,\n} from './query-bar-grammar';\n\nexport { CHIP_TAG } from '../../feedback/chip/chip';\nexport { INPUT_TAG } from '../input/input';\nexport type { OreQueryBarEvents, OreQueryBarProps } from './query-bar.types';\nexport * from './query-bar-grammar';\n\n/** Fixed row height of one suggestion; the dropdown positions rows against it. */\nconst OPTION_ROW_HEIGHT = 36;\n\n/**\n * A search field that accepts free text and `key:value` tokens together, in the\n * grammar GitHub's pull-request search made familiar. Committed tokens render as\n * removable pills inside the field; a suggestion dropdown lists the vocabulary's\n * keys and matching values while typing, so phones never need to type a colon.\n *\n * The bar is state-driven: `vocabulary` defines the token keys and their accepted\n * values, `state` carries `{ text, tokens }`, and every edit emits `input` +\n * `change` with the new state readable from the element's `state` property. Omit\n * `state` for uncontrolled use. External `state` writes whose `tokens` array is\n * identical to the current one are treated as echoes — only token changes are\n * adopted — so text-only round-trips never wipe the field's live draft.\n *\n * The dropdown opens while the field holds focus (and reopens on typing after\n * Escape) and overlays the page from the top layer. Picking a key suggestion\n * starts composing `key:`; picking a value commits its pill. Typing a complete\n * `key:value` commits immediately. Backspace on an empty field removes the last\n * pill. A draft whose value matches nothing shows a \"searching as text\" row\n * instead of closing; on blur, a bare `key:` fragment reverts and a dead draft\n * degrades into the searched text, so the field never carries silent residue.\n *\n * @element ore-query-bar\n *\n * @attr {string} label - Accessible name for the entry field\n * @attr {string} placeholder - Field placeholder, typically the surface's search hint\n * @attr {string} error - Inline error under the field\n * @attr {string} helper - Helper text under the field\n * @attr {boolean} hide-label - Hide the visible label while keeping its accessible name\n * @attr {boolean} clearable - Show a clear (×) button; it clears the free text only\n * @attr {boolean} disabled - Disable the whole bar\n * @attr {string} size - Field size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Field radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} variant - Field variant: 'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'\n *\n * @prop {QueryState} state - The controlled query state; write a new object to apply external changes\n * @prop {QueryTokenDef[]} vocabulary - The token vocabulary\n *\n * @fires input - The query changed; read the new state from the `state` property\n * @fires change - Same as `input`\n * @fires open-change - The suggestion dropdown opened or closed. detail: { open, reason }\n *\n * @part wrapper - The ore-input field host\n * @part dropdown - The suggestion dropdown container\n * @cssprop --query-bar-min-width - Minimum host width (default 12rem)\n * @cssprop --query-bar-icon-size - Leading search icon size (default 16px)\n * @cssprop --query-bar-option-height - Suggestion row height (default 36px)\n * @cssprop --query-bar-dropdown-min-width - Dropdown panel minimum width (default 16rem)\n * @cssprop --query-bar-dropdown-max-width - Dropdown panel maximum width (default 28rem, viewport-capped)\n * @cssprop --chip-* - Pill styling (see ore-chip)\n * @cssprop --combobox-dropdown-* - Dropdown panel and option styling (see ore-combobox)\n *\n * @example\n * ```html\n * <ore-query-bar id=\"bar\" label=\"Search issues\" placeholder=\"Title, author or label…\" clearable>\n * </ore-query-bar>\n * <script>\n *   bar.vocabulary = [\n *     { key: 'author', label: 'Author', options: [{ label: 'Alice', value: 'alice' }] },\n *   ];\n * </script>\n * ```\n */\nexport const QUERY_BAR_TAG = 'ore-query-bar' as const;\ndefine<OreQueryBarProps>(QUERY_BAR_TAG, {\n  props: {\n    clearable: prop.bool(false),\n    disabled: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    'hide-label': prop.bool(false),\n    label: prop.string(),\n    placeholder: prop.string(),\n    rounded: prop.string<RoundedSize>(),\n    size: prop.string<ComponentSize>(),\n    state: prop.data<QueryState>(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n    vocabulary: prop.data<QueryTokenDef[]>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreQueryBarEvents>();\n    const watch = watchEffect;\n    const abortSignal = lifecycleSignal(onCleanup);\n    const barId = createId('query-bar');\n\n    const vocabulary = (): QueryTokenDef[] => props.vocabulary.value ?? [];\n    const emptyState = (): QueryState => ({ text: '', tokens: [] });\n    const normalizeState = (value: unknown): QueryState | null => {\n      if (value == null) return emptyState();\n      if (typeof value !== 'object' || !Array.isArray((value as QueryState).tokens)) return null;\n      const state = value as QueryState;\n      return { text: typeof state.text === 'string' ? state.text : '', tokens: state.tokens };\n    };\n\n    /**\n     * The working state: the initial `state` prop plus every commit this bar emits\n     * before the consumer round-trips it. Gestures must read from here, never from\n     * the prop directly: props lag a render behind, so two quick pill removals\n     * would otherwise each compute from the same stale snapshot and the second\n     * would resurrect the first pill.\n     */\n    const working = signal<QueryState>(normalizeState(props.state.value) ?? emptyState());\n    /** What the field shows: the live draft (free text plus an unfinished token). */\n    const field = signal(working.value.text);\n\n    const suggestions = computed<QuerySuggestion[]>(() => suggestQuery(field.value, vocabulary()));\n    const defBy = computed(() => new Map(vocabulary().map((def) => [def.key, def])));\n\n    /**\n     * True while the draft names a known key whose prefix matches no option. The\n     * dropdown then shows a \"searching as text\" row instead of closing, so the\n     * degradation is never silent — and blur makes the state honest (below).\n     */\n    const noMatch = computed(() => {\n      const draft = parseQuery(field.value, vocabulary()).draft;\n      return draft !== null && draft.valuePrefix !== '' && suggestions.value.length === 0;\n    });\n\n    const noMatchLabel = computed(() => {\n      const draft = parseQuery(field.value, vocabulary()).draft;\n      const def = draft ? defBy.value.get(draft.key) : undefined;\n      return `No matching ${def?.label ?? draft?.key ?? ''} — searching as text`;\n    });\n\n    // Element refs the listbox dropdown needs; resolved as the template renders.\n    let inputEl: HTMLInputElement | null = null;\n    let fieldEl: HTMLElement | null = null;\n    let dropdownEl: HTMLElement | null = null;\n    const inputRef = ref<HTMLElement>();\n\n    const optionList = createListboxDropdown<QuerySuggestion>({\n      getBoundary: () => el,\n      getFocusedOptionElement: () => dropdownEl?.querySelector<HTMLElement>('[data-focused]') ?? null,\n      getItems: () => suggestions.value,\n      getOptionId: (index) => `${barId}-opt-${index}`,\n      getPanel: () => dropdownEl,\n      getReference: () => fieldEl,\n      getTrigger: () => inputEl,\n      isDisabled: () => Boolean(props.disabled.value),\n      isItemDisabled: () => false,\n      onClose: (reason) => emit('open-change', { open: false, reason }),\n      onOpen: (reason) => emit('open-change', { open: true, reason }),\n      // The reference is the whole (often full-row) field: matching its width would\n      // stretch the panel across the page. The dropdown sizes to its content within\n      // its own min/max bounds instead, like a menu.\n      positioning: { matchWidth: false },\n      restoreFocus: false,\n      signal: abortSignal,\n    });\n    const { focusedIndex, isOpen } = optionList;\n\n    bind({\n      attr: {\n        open: () => (isOpen.value ? true : undefined),\n        size: props.size,\n        variant: props.variant,\n      },\n    });\n\n    // Expose the working state as a native-like `.state` property on the host: the\n    // live external channel, replacing the prop-installed property exactly as\n    // ore-combobox replaces its own `value`. Writes whose `tokens` array matches\n    // the working one are consumer echoes (v-model round-trips) and keep the\n    // field's live draft; a changed tokens array is an external write — a deep-link\n    // preset, a mode switch — and is adopted, field included.\n    Object.defineProperty(el, 'state', {\n      configurable: true,\n      enumerable: true,\n      get: () => working.value,\n      set: (value: unknown) => {\n        const next = normalizeState(value);\n        if (next === null || next.tokens === working.value.tokens) return;\n        working.value = next;\n        field.value = next.text;\n      },\n    });\n\n    // ── State commits ────────────────────────────────────────────────────────\n\n    function emitChange(): void {\n      dispatchNativeFieldEvent(el, 'input');\n      dispatchNativeFieldEvent(el, 'change');\n    }\n\n    /** Applies the next state locally and announces it; the consumer reads `el.state`. */\n    function commit(next: QueryState): void {\n      working.value = next;\n      emitChange();\n    }\n\n    /** Folds parsed tokens into the working set, replacing per key and keeping slots. */\n    function mergeTokens(base: QueryToken[], parsed: readonly QueryToken[]): QueryToken[] {\n      let tokens = base;\n      for (const token of parsed) {\n        const slot = tokens.findIndex((candidate) => candidate.key === token.key);\n        tokens = slot >= 0 ? [...tokens.slice(0, slot), token, ...tokens.slice(slot + 1)] : [...tokens, token];\n      }\n      return tokens;\n    }\n\n    /** Parses the field, folds any complete tokens into the working state, and commits. */\n    function applyField(): void {\n      const parsed = parseQuery(field.value, vocabulary());\n      if (parsed.tokens.length > 0) field.value = parsed.text;\n      commit({ text: parsed.text, tokens: mergeTokens(working.value.tokens, parsed.tokens) });\n    }\n\n    function handleInput(event: Event): void {\n      field.value = (event.target as HTMLInputElement).value;\n      applyField();\n      // Typing is the strongest composing signal: the dropdown must come back after\n      // Escape without a blur/refocus cycle, or the bar reads as broken.\n      if (canOpen()) optionList.open('keyboard');\n    }\n\n    function pick(suggestion: QuerySuggestion): void {\n      // The word being typed is selector intent: whichever suggestion is picked consumes\n      // it, so it never leaks into the free text as a stray search term. A field ending\n      // in whitespace has no active word; a `key:…` draft is consumed like any word.\n      const rest =\n        /\\s$/.test(field.value) || field.value.trim() === '' ? '' : field.value.replace(/\\S+\\s*$/, '').trim();\n      if (suggestion.kind === 'key') {\n        // Start composing: replace the word being typed with the token key.\n        field.value = rest ? `${rest} ${suggestion.key}:` : `${suggestion.key}:`;\n        applyField();\n      } else {\n        field.value = rest;\n        commit(commitToken({ text: rest, tokens: working.value.tokens }, suggestion.key, suggestion.value));\n      }\n      inputEl?.focus();\n    }\n\n    function removeChip(event: Event): void {\n      event.stopPropagation();\n      const key = (event as CustomEvent<{ value?: string }>).detail?.value;\n      if (key === undefined) return;\n      commit(removeToken(working.value, key));\n      // Keep the compose flow: without this, focus falls to the host and the next\n      // keystroke goes nowhere.\n      inputEl?.focus();\n    }\n\n    /** The field's own clear button: clears the free text, never the pills. */\n    function clearText(): void {\n      field.value = '';\n      commit({ text: '', tokens: working.value.tokens });\n      inputEl?.focus();\n    }\n\n    function handleKeydown(e: KeyboardEvent): void {\n      if (props.disabled.value) return;\n\n      // While open, the listbox owns arrows, Home/End, and Escape.\n      if (optionList.handleKeydown(e)) return;\n\n      switch (e.key) {\n        case 'Enter': {\n          const active = isOpen.value ? suggestions.value[focusedIndex.value] : undefined;\n          if (active) {\n            e.preventDefault();\n            pick(active);\n          }\n          break;\n        }\n        case 'Backspace':\n          // The GitHub-style touch: backspace on an empty field drops the last pill.\n          if (field.value === '' && working.value.tokens.length > 0) {\n            const last = working.value.tokens[working.value.tokens.length - 1];\n            if (last) commit(removeToken(working.value, last.key));\n          }\n          break;\n        case 'Tab':\n          optionList.close('programmatic');\n          break;\n        default:\n          break;\n      }\n    }\n\n    // The dropdown is open exactly while the field holds focus and has something to\n    // show — suggestions, or the no-match row for an unresolvable draft; Escape,\n    // outside pointers, and Tab dismiss it through the machinery.\n    const canOpen = (): boolean => suggestions.value.length > 0 || noMatch.value;\n    const openDropdown = (): void => {\n      if (canOpen()) optionList.open('focus');\n    };\n    watch(() => {\n      if (isOpen.value && !canOpen()) optionList.close('programmatic');\n    });\n\n    /**\n     * Blur makes the field honest about dead drafts. A bare `key:` fragment is dead\n     * syntax — revert it, leaving no residue. A draft that matches nothing was\n     * already announced as \"searching as text\" — degrade it into the text so what\n     * the field shows is what is searched. Live compositions (a draft with matching\n     * suggestions) survive blur, so an interrupted pick resumes on refocus.\n     */\n    function handleFocusOut(event: FocusEvent): void {\n      const next = event.relatedTarget;\n      if (next instanceof Node && el.shadowRoot?.contains(next)) return;\n\n      const parsed = parseQuery(field.value, vocabulary());\n      if (!parsed.draft) return;\n      if (parsed.draft.valuePrefix === '') {\n        field.value = parsed.text;\n        return;\n      }\n      if (suggestQuery(field.value, vocabulary()).length === 0) {\n        const degraded = parsed.text\n          ? `${parsed.text} ${parsed.draft.key}:${parsed.draft.valuePrefix}`\n          : `${parsed.draft.key}:${parsed.draft.valuePrefix}`;\n        field.value = degraded;\n        commit({ text: degraded, tokens: working.value.tokens });\n      }\n    }\n\n    // New suggestions start from no highlight; arrows move it, Enter commits it.\n    watch(() => {\n      void suggestions.value;\n      if (optionList.isOpen.value) optionList.set(-1);\n    });\n\n    // The dropdown is popover=manual: without showPopover the UA stylesheet keeps it\n    // display:none, so the panel must enter the top layer exactly when it opens.\n    watch(() => {\n      if (isOpen.value) {\n        if (dropdownEl && 'showPopover' in dropdownEl && !dropdownEl.matches(':popover-open')) {\n          dropdownEl.showPopover();\n        }\n        optionList.updatePosition();\n      } else if (dropdownEl && 'hidePopover' in dropdownEl && dropdownEl.matches(':popover-open')) {\n        dropdownEl.hidePopover();\n      }\n    });\n\n    // Once ore-input is in the DOM, grab its inner <input> from its shadow root and\n    // attach the query-bar's ARIA and event handlers imperatively (the combobox\n    // pattern: the focused element must carry the combobox semantics itself).\n    onElement(inputRef, (bitInputEl) => {\n      fieldEl = bitInputEl;\n\n      const rawInput = bitInputEl.shadowRoot?.querySelector<HTMLInputElement>('input') ?? null;\n      if (!rawInput) return;\n\n      inputEl = rawInput;\n\n      rawInput.setAttribute('role', 'combobox');\n      rawInput.setAttribute('autocomplete', 'off');\n      rawInput.setAttribute('aria-autocomplete', 'list');\n      rawInput.setAttribute('aria-haspopup', 'listbox');\n      rawInput.setAttribute('spellcheck', 'false');\n      // Backspace on the empty field drops the last pill: the only discoverability\n      // of that shortcut for assistive tech.\n      rawInput.setAttribute('aria-keyshortcuts', 'Backspace');\n\n      rawInput.addEventListener('input', handleInput as EventListener);\n      rawInput.addEventListener('keydown', handleKeydown as EventListener);\n      rawInput.addEventListener('focus', openDropdown);\n      rawInput.addEventListener('focusout', handleFocusOut as EventListener);\n\n      return () => {\n        inputEl = null;\n        fieldEl = null;\n        rawInput.removeEventListener('input', handleInput as EventListener);\n        rawInput.removeEventListener('keydown', handleKeydown as EventListener);\n        rawInput.removeEventListener('focus', openDropdown);\n        rawInput.removeEventListener('focusout', handleFocusOut as EventListener);\n      };\n    });\n\n    onMounted(() => {\n      const listbox = el.shadowRoot?.querySelector<HTMLElement>('[role=\"listbox\"]');\n      if (inputEl) setAriaReflection(inputEl, 'ariaControlsElements', listbox ? [listbox] : []);\n    });\n\n    // Reactively sync combobox-specific ARIA the field does not manage itself.\n    watch(() => {\n      if (!inputRef.value || !inputEl) return;\n\n      inputEl.setAttribute('aria-expanded', String(isOpen.value));\n\n      const listbox = el.shadowRoot?.querySelector<HTMLElement>('[role=\"listbox\"]');\n      setAriaReflection(inputEl, 'ariaControlsElements', listbox ? [listbox] : []);\n      const activeId = optionList.ariaActiveDescendant.value;\n      const activeOption = activeId\n        ? [...(dropdownEl?.querySelectorAll<HTMLElement>('[role=\"option\"]') ?? [])].find(\n            (option) => option.id === activeId,\n          )\n        : null;\n      setAriaReflection(inputEl, 'ariaActiveDescendantElement', activeOption?.id === activeId ? [activeOption] : []);\n\n      if (props.disabled.value) inputEl.setAttribute('aria-disabled', 'true');\n      else inputEl.removeAttribute('aria-disabled');\n\n      if (props.error.value) inputEl.setAttribute('aria-invalid', 'true');\n      else inputEl.removeAttribute('aria-invalid');\n    });\n\n    // Reactively sync the field signal into the raw input value.\n    watch(() => {\n      if (!inputRef.value || !inputEl) return;\n      if (inputEl.value !== field.value) inputEl.value = field.value;\n    });\n\n    onCleanup(() => {\n      optionList[Symbol.dispose]();\n    });\n\n    // When hide-label is set, suppress the visible label passed to ore-input (no inset\n    // label renders, avoiding extra field height) but expose the label text as\n    // aria-label on the input so the bar retains its accessible name.\n    const hideLabel = () => props['hide-label'].value;\n    const inputLabel = () => (hideLabel() ? '' : (props.label.value ?? ''));\n    const inputAriaLabel = () => (hideLabel() ? (props.label.value ?? '') : null);\n\n    /** Pill copy: `Author: Alice`, degrading to the raw key/value outside the vocabulary. */\n    const pillLabel = (token: QueryToken): string => {\n      const def = defBy.value.get(token.key);\n      const option = def?.options.find((candidate) => candidate.value === token.value);\n      if (def && option) return `${def.label}: ${option.label}`;\n      return `${def?.key ?? token.key}: ${option?.label ?? token.value}`;\n    };\n\n    /** The muted second column: the token key for value rows, the `key:` syntax for key rows. */\n    const optionMeta = (suggestion: QuerySuggestion): string => {\n      const def = defBy.value.get(suggestion.key);\n      return suggestion.kind === 'key' ? `${suggestion.key}:` : (def?.label ?? suggestion.key);\n    };\n\n    return html`\n      <ore-input\n        class=\"trigger\"\n        ref=${inputRef}\n        label=\"${inputLabel}\"\n        aria-label=\"${inputAriaLabel}\"\n        placeholder=\"${() => props.placeholder.value ?? ''}\"\n        label-placement=\"inset\"\n        variant=\"${() => props.variant.value ?? 'bordered'}\"\n        size=\"${() => props.size.value ?? ''}\"\n        rounded=\"${() => props.rounded.value ?? 'md'}\"\n        helper=\"${() => props.helper.value ?? ''}\"\n        error=\"${() => props.error.value ?? ''}\"\n        ?disabled=\"${() => Boolean(props.disabled.value)}\"\n        part=\"wrapper\">\n        <div class=\"prefix\" slot=\"prefix\">\n          <ore-icon name=\"search\" size=\"16\" aria-hidden=\"true\"></ore-icon>\n          <span class=\"pills\">\n            ${() =>\n              working.value.tokens.map(\n                (token) => html`\n                  <ore-chip\n                    value=${token.key}\n                    label=${pillLabel(token)}\n                    mode=\"removable\"\n                    variant=\"flat\"\n                    size=\"sm\"\n                    @remove=${removeChip}>\n                    ${pillLabel(token)}\n                  </ore-chip>\n                `,\n              )}\n          </span>\n        </div>\n        <span class=\"suffix\" slot=\"suffix\">\n          <button\n            class=\"clear-btn\"\n            part=\"clear-btn\"\n            type=\"button\"\n            aria-label=\"Clear\"\n            tabindex=\"-1\"\n            ?hidden=\"${() => !props.clearable.value || field.value === ''}\"\n            @click=\"${clearText}\">\n            <ore-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n          </button>\n        </span>\n      </ore-input>\n      <div\n        class=\"dropdown\"\n        part=\"dropdown\"\n        id=\"${() => `${barId}-dropdown`}\"\n        popover=\"manual\"\n        ?data-open=${() => isOpen.value}\n        ref=${(node: HTMLElement | null) => {\n          dropdownEl = node;\n        }}>\n        <div\n          role=\"listbox\"\n          id=\"${() => `${barId}-listbox`}\"\n          style=\"${() => (isOpen.value && canOpen() ? `height:${(noMatch.value ? 1 : suggestions.value.length) * OPTION_ROW_HEIGHT}px;` : '')}\"\n          aria-label=\"${() => props.label.value || props.placeholder.value || 'Suggestions'}\">\n          ${() =>\n            isOpen.value && noMatch.value\n              ? html`<div class=\"no-match\" role=\"option\" aria-selected=\"false\" aria-disabled=\"true\">${noMatchLabel.value}</div>`\n              : ''}\n          ${() =>\n            isOpen.value && suggestions.value.length > 0\n              ? suggestions.value.map(\n                  (suggestion, index) => html`\n                    <div\n                      class=\"option\"\n                      role=\"option\"\n                      id=\"${`${barId}-opt-${index}`}\"\n                      data-option-index=\"${index}\"\n                      aria-selected=\"false\"\n                      aria-disabled=\"false\"\n                      style=\"${`position:absolute;top:0;left:0;right:0;transform:translateY(${index * OPTION_ROW_HEIGHT}px);`}\"\n                      ?data-focused=${() => focusedIndex.value === index}\n                      @pointermove=\"${() => optionList.set(index)}\"\n                      @click=\"${() => pick(suggestion)}\">\n                      <span class=\"option-label\">${suggestion.label}</span>\n                      <span class=\"option-meta\">${optionMeta(suggestion)}</span>\n                    </div>\n                  `,\n                )\n              : ''}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [colorThemeMixin, reducedMotionMixin, roundedVariantMixin, componentStyles],\n}) as unknown as AddEventListeners<OreQueryBarEvents>;\n"],"mappings":"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"}