@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/esm/pf-combobox.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-combobox.entry.js","sources":["src/components/pf-combobox/pf-combobox.css?tag=pf-combobox&encapsulation=shadow","src/components/pf-combobox/pf-combobox.tsx"],"sourcesContent":["/*\n * The generic set pf-option reads, mapped to this control's own family — see\n * pf-option.css. The same option element is themed by whichever listbox it is\n * slotted into.\n */\n:host {\n  display: block;\n  --pf-option-text: var(--pf-combobox-text);\n  --pf-option-text-disabled: var(--pf-combobox-placeholder);\n  --pf-option-active-bg: var(--pf-combobox-option-active-bg);\n  --pf-option-active-text: var(--pf-combobox-option-active-text);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-1);\n}\n\n.label {\n  color: var(--pf-combobox-text);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-combobox-invalid-border);\n  margin-inline-start: var(--space-1);\n}\n\n.control {\n  align-items: center;\n  background: var(--pf-combobox-bg);\n  border: 1px solid var(--pf-combobox-border);\n  border-radius: var(--radius-md);\n  display: flex;\n  gap: var(--space-1);\n  padding-inline-end: var(--space-2);\n}\n\n.control:focus-within {\n  border-color: var(--pf-combobox-focus-border);\n  box-shadow: var(--pf-focus-ring);\n}\n\n.control--invalid {\n  border-color: var(--pf-combobox-invalid-border);\n}\n\n.input {\n  background: none;\n  border: 0;\n  color: var(--pf-combobox-text);\n  flex: 1;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  min-width: 0;\n  outline: none;\n  padding: var(--space-2) var(--space-3);\n}\n\n.input::placeholder {\n  color: var(--pf-combobox-placeholder);\n}\n\n.input:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.clear,\n.chevron {\n  align-items: center;\n  color: var(--pf-combobox-placeholder);\n  display: inline-flex;\n  flex-shrink: 0;\n  justify-content: center;\n}\n\n.clear {\n  background: none;\n  border: 0;\n  border-radius: var(--radius-sm);\n  cursor: pointer;\n  padding: var(--space-1);\n}\n\n.clear:hover {\n  color: var(--pf-combobox-text);\n}\n\n.chevron {\n  transition: transform var(--pf-transition-fast);\n}\n\n:host([open]) .chevron {\n  transform: rotate(180deg);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chevron {\n    transition: none;\n  }\n}\n\n.description {\n  color: var(--pf-combobox-placeholder);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-combobox-invalid-border);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n/* See src/place-popover.ts: the UA stylesheet centres a popover otherwise. */\n.listbox {\n  inset: auto;\n  margin: 0;\n  background: var(--pf-combobox-menu-bg);\n  border: 1px solid var(--pf-combobox-menu-border);\n  border-radius: var(--radius-md);\n  box-shadow: var(--pf-elevation-popover-shadow);\n  max-height: min(60vh, 320px);\n  overflow-y: auto;\n  padding: var(--space-1);\n}\n\n.listbox:popover-open {\n  animation: pf-combobox-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-combobox-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .listbox:popover-open {\n    animation: none;\n  }\n}\n\n.empty {\n  color: var(--pf-combobox-placeholder);\n  font-size: var(--font-size-sm);\n  margin: 0;\n  padding: var(--space-3);\n  text-align: center;\n}\n","import {\n  composeDescribedBy,\n  getEnabledIndexes,\n  Keys,\n  matchesCommandQuery,\n  observeAnchoredPosition,\n  queryIsEchoedSelection,\n  resolveListMove,\n  type ListNavigationAction,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\nimport { placePopover } from '../../place-popover';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nconst MOVES: Record<string, ListNavigationAction> = {\n  [Keys.ArrowDown]: 'next',\n  [Keys.ArrowUp]: 'previous',\n  [Keys.Home]: 'first',\n  [Keys.End]: 'last',\n};\n\n/**\n * A form-associated combobox: an editable field that filters `pf-option`\n * children.\n *\n * It shares `pf-option` with `pf-select`, which is why the option reads a\n * generic `--pf-option-*` set that each container maps to its own family —\n * the same arrangement as `pf-menu-item` between the two menus.\n *\n * Filtering is core's `matchesCommandQuery`, and so is the rule that a query\n * which is only the chosen label echoed back does not filter: without it,\n * reopening the list to change your mind would show the one answer you already\n * had. Both shared with the React component, which is now rewired to them.\n *\n * Two things the React `Combobox` does not do, both gaps rather than choices:\n * Home and End, and arrows that wrap rather than stop at the ends — which is\n * what `pf-select` does, and one design system should not have two arrow\n * behaviours in neighbouring controls.\n *\n * @slot - the `pf-option` children.\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part control - the box holding the input, clear button and chevron.\n * @part input - the editable field.\n * @part clear - the clear button.\n * @part listbox - the floating listbox the options are slotted into.\n * @part empty - the message shown when nothing matches.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-combobox',\n  styleUrl: 'pf-combobox.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfCombobox {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Submitted under this name. Reflected; the submission reads the attribute. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The chosen option's value, or empty. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** Whether the listbox is showing. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Prop() label?: string;\n\n  @Prop() description?: string;\n\n  @Prop() error?: string;\n\n  @Prop() placeholder = 'Search…';\n\n  /** Shown when the query matches nothing. */\n  @Prop() emptyMessage = 'No matches';\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Offer a button that empties the field. */\n  @Prop() clearable = true;\n\n  /** Accessible name for that button. */\n  @Prop() clearLabel = 'Clear';\n\n  /** Fires when the chosen value changes. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** Fires whenever the listbox opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** What the field holds, which is not the value until an option is chosen. */\n  @State() query = '';\n\n  @State() matchCount = 0;\n\n  private initialValue = '';\n  private stopObserving?: () => void;\n  private activeOption: HTMLElement | null = null;\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n    this.query = this.selectedLabel();\n    this.applyQuery();\n  }\n\n  componentDidRender() {\n    this.syncActiveDescendant();\n  }\n\n  disconnectedCallback() {\n    this.stopObserving?.();\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    this.internals.setFormValue(this.value || null);\n    applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n  }\n\n  /** A value set from outside puts its label in the field and marks the option. */\n  @Watch('value')\n  syncSelection() {\n    for (const option of this.options()) {\n      (option as HTMLElement & { selected: boolean }).selected =\n        this.optionValue(option) === this.value && this.value !== '';\n    }\n    this.query = this.selectedLabel();\n    this.applyQuery();\n  }\n\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showListbox();\n    else this.hideListbox();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  @Method()\n  async show(): Promise<void> {\n    if (!this.disabled) this.open = true;\n  }\n\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n    this.query = this.selectedLabel();\n    this.applyQuery();\n  }\n\n  /** Re-reads the options, for a label edited in place (no `slotchange` fires). */\n  @Method()\n  async refresh(): Promise<void> {\n    this.syncSelection();\n  }\n\n  private onSlotChange = () => {\n    this.syncSelection();\n  };\n\n  private options(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-option'));\n  }\n\n  private visible(): HTMLElement[] {\n    return this.options().filter((option) => !option.hasAttribute('hidden'));\n  }\n\n  /** The property, never the attribute: a binding may only have set the former. */\n  private optionValue(option: HTMLElement): string {\n    return (option as HTMLElement & { value?: string }).value ?? option.getAttribute('value') ?? '';\n  }\n\n  private selectedLabel(): string {\n    const chosen = this.options().find((option) => this.optionValue(option) === this.value);\n    return this.value && chosen ? (chosen.textContent?.trim() ?? '') : '';\n  }\n\n  private get listbox() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"listbox\"]') ?? null;\n  }\n\n  private get input() {\n    return this.el.shadowRoot?.querySelector<HTMLInputElement>('[part=\"input\"]') ?? null;\n  }\n\n  private get control() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"control\"]') ?? null;\n  }\n\n  /**\n   * Hides the options the query excludes.\n   *\n   * `hidden` plus `:host([hidden]) { display: none }` on the option, because\n   * the attribute alone loses to the option's own `display: block`.\n   */\n  private applyQuery() {\n    const echoed = queryIsEchoedSelection(this.query, this.selectedLabel());\n    const options = this.options();\n\n    for (const option of options) {\n      const matches =\n        echoed || matchesCommandQuery({ label: option.textContent?.trim() ?? '' }, this.query);\n      if (matches) option.removeAttribute('hidden');\n      else option.setAttribute('hidden', '');\n    }\n\n    const visible = this.visible();\n    this.matchCount = visible.length;\n\n    // A new query starts at the top of what is left.\n    const first = visible.find((option) => !option.hasAttribute('disabled')) ?? null;\n    if (!this.activeOption || this.activeOption.hasAttribute('hidden')) this.setActive(first);\n  }\n\n  private showListbox() {\n    const panel = this.listbox;\n    if (this.disabled || !panel || panel.matches(':popover-open')) return;\n\n    panel.showPopover();\n    this.stopObserving?.();\n    this.stopObserving = observeAnchoredPosition({\n      getAnchor: () => this.control,\n      getFloating: () => panel,\n      matchAnchorWidth: true,\n      flip: true,\n      onChange: ({ left, top, width, minWidth }) => {\n        placePopover(panel, left, top);\n        if (width !== undefined) panel.style.width = `${width}px`;\n        if (minWidth !== undefined) panel.style.minWidth = `${minWidth}px`;\n      },\n    });\n\n    this.applyQuery();\n  }\n\n  private hideListbox() {\n    this.stopObserving?.();\n    this.stopObserving = undefined;\n    const panel = this.listbox;\n    if (panel?.matches(':popover-open')) panel.hidePopover();\n  }\n\n  /**\n   * A browser-driven close — light dismiss or Escape — reverts the field to\n   * the chosen label, so a half-typed query never lingers over a different\n   * value. Focus goes back to the input rather than the trigger, because here\n   * the input *is* the control.\n   */\n  private onToggle = (event: ToggleEvent) => {\n    const nowOpen = event.newState === 'open';\n    if (this.open !== nowOpen) this.open = nowOpen;\n    if (!nowOpen) {\n      this.query = this.selectedLabel();\n      this.applyQuery();\n      this.input?.focus();\n    }\n  };\n\n  private setActive(option: HTMLElement | null) {\n    for (const other of this.options()) {\n      if (other !== option) (other as HTMLElement & { active: boolean }).active = false;\n    }\n    if (option) (option as HTMLElement & { active: boolean }).active = true;\n\n    this.activeOption = option;\n    this.syncActiveDescendant();\n    if (option && typeof option.scrollIntoView === 'function') {\n      option.scrollIntoView({ block: 'nearest' });\n    }\n  }\n\n  /**\n   * Set as an element, not an IDREF: the input is in this shadow root and the\n   * options are slotted light DOM, and a cross-root IDREF is absent from the\n   * accessibility tree — measured. Feature-detected, because where element\n   * reflection is missing there is no cross-root equivalent.\n   */\n  private syncActiveDescendant() {\n    const input = this.input;\n    if (!input || !('ariaActiveDescendantElement' in input)) return;\n    (\n      input as unknown as { ariaActiveDescendantElement: Element | null }\n    ).ariaActiveDescendantElement = this.open ? this.activeOption : null;\n  }\n\n  private commit(option: HTMLElement) {\n    if (option.hasAttribute('disabled')) return;\n\n    const next = this.optionValue(option);\n    this.open = false;\n\n    if (next !== this.value) {\n      this.value = next;\n      this.pfChange.emit({ value: next });\n    }\n\n    // Set after the value, so it is the chosen label rather than the query.\n    this.query = this.selectedLabel();\n    this.applyQuery();\n    this.input?.focus();\n  }\n\n  @Listen('pfOptionSelect')\n  handleOptionSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    if (this.disabled) return;\n\n    const option = this.options().find(\n      (candidate) => this.optionValue(candidate) === event.detail.value,\n    );\n    if (option) this.commit(option);\n  }\n\n  private move(action: ListNavigationAction) {\n    const visible = this.visible();\n    const enabledIndexes = getEnabledIndexes(visible, (option) => option.hasAttribute('disabled'));\n    const current = this.activeOption ? visible.indexOf(this.activeOption) : -1;\n    const next = resolveListMove(action, enabledIndexes, current);\n    if (next !== -1) this.setActive(visible[next] ?? null);\n  }\n\n  private onInput = (event: Event) => {\n    this.query = (event.target as HTMLInputElement).value;\n    this.applyQuery();\n    if (!this.open) this.open = true;\n  };\n\n  private clear = () => {\n    this.query = '';\n    if (this.value !== '') {\n      this.value = '';\n      this.pfChange.emit({ value: '' });\n    }\n    this.applyQuery();\n    this.open = true;\n    this.input?.focus();\n  };\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    const move = MOVES[event.key];\n    if (move) {\n      event.preventDefault();\n      if (!this.open) this.open = true;\n      else this.move(move);\n      return;\n    }\n\n    /*\n     * Enter only commits while the listbox is open. Closed, it is left alone\n     * so a combobox inside a form still submits it.\n     */\n    if (event.key === Keys.Enter && this.open && this.activeOption) {\n      event.preventDefault();\n      this.commit(this.activeOption);\n    }\n\n    // Escape is the browser's: `popover=\"auto\"` closes, and `onToggle` reverts.\n  };\n\n  render() {\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n    const showClear = this.clearable && !this.disabled && (this.query !== '' || this.value !== '');\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"input\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n\n          <div class={{ control: true, 'control--invalid': Boolean(this.error) }} part=\"control\">\n            <input\n              id=\"input\"\n              aria-label={controlAriaLabel(this.el, this.label)}\n              part=\"input\"\n              class=\"input\"\n              type=\"text\"\n              role=\"combobox\"\n              autocomplete=\"off\"\n              disabled={this.disabled}\n              required={this.required}\n              placeholder={this.placeholder}\n              value={this.query}\n              aria-autocomplete=\"list\"\n              aria-expanded={this.open ? 'true' : 'false'}\n              /* Same shadow root as the listbox, so this IDREF resolves. */\n              aria-controls=\"listbox\"\n              aria-invalid={this.error ? 'true' : null}\n              aria-describedby={describedBy}\n              onInput={this.onInput}\n              onKeyDown={this.onKeyDown}\n              onClick={() => {\n                if (!this.disabled) this.open = true;\n              }}\n            />\n\n            {showClear && (\n              <button\n                class=\"clear\"\n                part=\"clear\"\n                type=\"button\"\n                aria-label={this.clearLabel}\n                /* Out of the tab order, so it never interrupts the keyboard flow. */\n                tabindex={-1}\n                onMouseDown={(event) => event.preventDefault()}\n                onClick={this.clear}\n              >\n                <pf-icon name=\"circle-xmark\"></pf-icon>\n              </button>\n            )}\n\n            <span class=\"chevron\" aria-hidden=\"true\">\n              <pf-icon name=\"chevron-down\"></pf-icon>\n            </span>\n          </div>\n\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n\n        <div\n          id=\"listbox\"\n          part=\"listbox\"\n          class=\"listbox\"\n          popover=\"auto\"\n          role=\"listbox\"\n          aria-label={this.label ?? this.placeholder}\n          onToggle={this.onToggle}\n        >\n          <slot onSlotchange={this.onSlotChange} />\n          {this.matchCount === 0 && (\n            <p class=\"empty\" part=\"empty\">\n              {this.emptyMessage}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/pf-command-group.entry.js

@@ -0,0 +1,20 @@
+import { r as registerInstance, h, H as Host } from './index-Bm6UxEit.js';
+
+const pfCommandGroupCss = () => `:host{display:block}:host([hidden]){display:none}.label{color:var(--pf-command-text-muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:0.04em;margin:0;padding:var(--space-2) var(--space-3) var(--space-1);text-transform:uppercase}`;
+
+const PfCommandGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** The section heading. Searched along with each item's own text. */
+    label;
+    render() {
+        return (h(Host, { key: '8d93af230bca00a826b5a9f1f4dff8ec19b5f7c3', role: "group", "aria-label": this.label }, this.label && (h("p", { key: '842b8ebd4eda7cbf5f28b1087df5fb4fdaa4cbae', class: "label", part: "label" }, this.label)), h("slot", { key: 'a77cc0bb2715fbddbe0d5809916405d22c892acc' })));
+    }
+};
+PfCommandGroup.style = pfCommandGroupCss();
+
+export { PfCommandGroup as pf_command_group };
+//# sourceMappingURL=pf-command-group.entry.js.map
+
+//# sourceMappingURL=pf-command-group.entry.js.map

package/dist/esm/pf-command-group.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-command-group.entry.js","sources":["src/components/pf-command-group/pf-command-group.css?tag=pf-command-group&encapsulation=shadow","src/components/pf-command-group/pf-command-group.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n/* The palette hides a group whose every item a query filtered out. */\n:host([hidden]) {\n  display: none;\n}\n\n.label {\n  color: var(--pf-command-text-muted);\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-semibold);\n  letter-spacing: 0.04em;\n  margin: 0;\n  padding: var(--space-2) var(--space-3) var(--space-1);\n  text-transform: uppercase;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A labelled section of a `pf-command-palette`.\n *\n * Grouping is structural here, where the React component takes a `group` name\n * on each item and buckets them itself. That is not a stylistic choice: the\n * items are slotted light-DOM children, and a shadow root cannot wrap a subset\n * of its slotted children in a box — one `<slot>` renders them all, in source\n * order. So the consumer expresses a group by nesting, which is also what\n * §2.1 asks for everywhere else.\n *\n * @slot - `pf-command-item` children.\n * @part label - the section heading.\n */\n@Component({\n  tag: 'pf-command-group',\n  styleUrl: 'pf-command-group.css',\n  shadow: true,\n})\nexport class PfCommandGroup {\n  /** The section heading. Searched along with each item's own text. */\n  @Prop() label?: string;\n\n  render() {\n    return (\n      <Host role=\"group\" aria-label={this.label}>\n        {this.label && (\n          <p class=\"label\" part=\"label\">\n            {this.label}\n          </p>\n        )}\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,8QAA8Q,CAAC;;MCoBnS,cAAc,GAAA,MAAA;;;;;AAEjB,IAAA,KAAK;IAEb,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,OAAO,EAAA,YAAA,EAAa,IAAI,CAAC,KAAK,EAAA,EACtC,IAAI,CAAC,KAAK,KACT,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC1B,IAAI,CAAC,KAAK,CACT,CACL,EACD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH;;;;;;;"}

package/dist/esm/pf-command-item.entry.js

@@ -0,0 +1,48 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+
+const pfCommandItemCss = () => `:host{align-items:center;border-radius:var(--radius-sm);color:var(--pf-command-text);cursor:pointer;display:flex;gap:var(--space-3);padding:var(--space-2) var(--space-3);user-select:none}:host([hidden]){display:none}:host([aria-selected='true']){background:var(--pf-command-item-active-bg)}:host([aria-selected='true']) .label,:host([aria-selected='true']) slot[name='icon']::slotted(*){color:var(--pf-command-item-active-text)}:host([aria-selected='true']) .description{color:var(--pf-command-item-active-text);opacity:0.85}:host([disabled]){cursor:not-allowed;opacity:0.5}slot[name='icon']::slotted(*){color:var(--pf-command-text-muted);flex-shrink:0}.content{display:grid;gap:2px;min-width:0}.label{font-size:var(--font-size-sm);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.description{color:var(--pf-command-text-muted);font-size:var(--font-size-xs);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
+
+const PfCommandItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pfCommandSelect = createEvent(this, "pfCommandSelect");
+    }
+    get el() { return getElement(this); }
+    /**
+     * Identifies the command in the palette's select event.
+     *
+     * Reflected, and not only for tidiness: the generated React and Angular
+     * bindings set props as *properties*, so without this there is no `value`
+     * attribute and anything selecting on one — the palette's own item query
+     * included — finds nothing. The same defect as an unreflected `name` on a
+     * form control, and caught the same way, by the consumer apps.
+     */
+    value = '';
+    /** A supporting line under the label. Searched along with the label. */
+    description;
+    /** Reflected so the stylesheet and the palette's item query can select on it. */
+    disabled = false;
+    /** Asks the palette to run this command. The palette decides and closes. */
+    pfCommandSelect;
+    /**
+     * Mouse only. The palette keeps keyboard focus in its input and tracks the
+     * active option with `aria-activedescendant`, so Enter is the palette's to
+     * handle — an item never has focus to receive a key on.
+     */
+    onClick = (event) => {
+        if (this.disabled) {
+            event.stopPropagation();
+            return;
+        }
+        this.pfCommandSelect.emit({ value: this.value });
+    };
+    render() {
+        return (h(Host, { key: 'ed43f8f61f0e9ef853bcdb1df173e5a8b82a6cd5', role: "option", "aria-disabled": this.disabled ? 'true' : null, onClick: this.onClick }, h("slot", { key: '0e50176162775ea6ed383ffdb5baf90ece6c8f1f', name: "icon" }), h("span", { key: 'b994b5985bcbac11b90fd000495c48695315a65d', class: "content" }, h("span", { key: 'e9693e2a23e8c46980dafaf89b69b3d466c31d70', class: "label", part: "label" }, h("slot", { key: '668db89e046a65cf0e8ee75098f46979d87d4089' })), this.description && (h("span", { key: 'dd1fd1004f5400b968069177eb74d9bb08a34dc1', class: "description", part: "description" }, this.description)))));
+    }
+};
+PfCommandItem.style = pfCommandItemCss();
+
+export { PfCommandItem as pf_command_item };
+//# sourceMappingURL=pf-command-item.entry.js.map
+
+//# sourceMappingURL=pf-command-item.entry.js.map

package/dist/esm/pf-command-item.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-command-item.entry.js","sources":["src/components/pf-command-item/pf-command-item.css?tag=pf-command-item&encapsulation=shadow","src/components/pf-command-item/pf-command-item.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  border-radius: var(--radius-sm);\n  color: var(--pf-command-text);\n  cursor: pointer;\n  display: flex;\n  gap: var(--space-3);\n  padding: var(--space-2) var(--space-3);\n  user-select: none;\n}\n\n/* The palette sets `hidden` on the items a query filters out. */\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * The active option, which the palette marks. Not `:hover` alone: the keyboard\n * and the mouse share one active item, and the palette is what decides it.\n */\n:host([aria-selected='true']) {\n  background: var(--pf-command-item-active-bg);\n}\n\n/*\n * The active background is the primary action colour, so everything on top of\n * it needs the matching foreground -- including the description, which is\n * muted against the panel and would be unreadable against this.\n */\n:host([aria-selected='true']) .label,\n:host([aria-selected='true']) slot[name='icon']::slotted(*) {\n  color: var(--pf-command-item-active-text);\n}\n\n:host([aria-selected='true']) .description {\n  color: var(--pf-command-item-active-text);\n  opacity: 0.85;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/*\n * No wrapper box around the icon slot: an unassigned slot is\n * `display: contents` and generates nothing, so the row's `gap` does not open\n * in front of an item with no icon.\n */\nslot[name='icon']::slotted(*) {\n  color: var(--pf-command-text-muted);\n  flex-shrink: 0;\n}\n\n.content {\n  display: grid;\n  gap: 2px;\n  min-width: 0;\n}\n\n.label {\n  font-size: var(--font-size-sm);\n  line-height: 1.3;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.description {\n  color: var(--pf-command-text-muted);\n  font-size: var(--font-size-xs);\n  line-height: 1.3;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n/**\n * One command in a `pf-command-palette`.\n *\n * It only reports that it was chosen; the palette owns filtering, the active\n * option and closing, exactly as `pf-radio-group` owns selection for its\n * radios and `pf-dropdown` owns it for its menu items.\n *\n * @slot - the command's label, which is also what the palette searches.\n * @slot icon - a leading icon.\n * @part label - the label's box.\n * @part description - the supporting line.\n */\n@Component({\n  tag: 'pf-command-item',\n  styleUrl: 'pf-command-item.css',\n  shadow: true,\n})\nexport class PfCommandItem {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Identifies the command in the palette's select event.\n   *\n   * Reflected, and not only for tidiness: the generated React and Angular\n   * bindings set props as *properties*, so without this there is no `value`\n   * attribute and anything selecting on one — the palette's own item query\n   * included — finds nothing. The same defect as an unreflected `name` on a\n   * form control, and caught the same way, by the consumer apps.\n   */\n  @Prop({ reflect: true }) value = '';\n\n  /** A supporting line under the label. Searched along with the label. */\n  @Prop() description?: string;\n\n  /** Reflected so the stylesheet and the palette's item query can select on it. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Asks the palette to run this command. The palette decides and closes. */\n  @Event() pfCommandSelect!: EventEmitter<{ value: string }>;\n\n  /**\n   * Mouse only. The palette keeps keyboard focus in its input and tracks the\n   * active option with `aria-activedescendant`, so Enter is the palette's to\n   * handle — an item never has focus to receive a key on.\n   */\n  private onClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n    this.pfCommandSelect.emit({ value: this.value });\n  };\n\n  render() {\n    return (\n      <Host role=\"option\" aria-disabled={this.disabled ? 'true' : null} onClick={this.onClick}>\n        <slot name=\"icon\" />\n        <span class=\"content\">\n          <span class=\"label\" part=\"label\">\n            <slot />\n          </span>\n          {this.description && (\n            <span class=\"description\" part=\"description\">\n              {this.description}\n            </span>\n          )}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,87BAA87B,CAAC;;MCmBl9B,aAAa,GAAA,MAAA;;;;;;AAGxB;;;;;;;;AAQG;IACsB,KAAK,GAAG,EAAE;;AAG3B,IAAA,WAAW;;IAGM,QAAQ,GAAG,KAAK;;AAGhC,IAAA,eAAe;AAExB;;;;AAIG;AACK,IAAA,OAAO,GAAG,CAAC,KAAiB,KAAI;AACtC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE;YACvB;;AAEF,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AAClD,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,QAAQ,EAAA,eAAA,EAAgB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EACrF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,EACpB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAA,EACnB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC9B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACN,IAAI,CAAC,WAAW,KACf,6DAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,aAAa,EAAA,EACzC,IAAI,CAAC,WAAW,CACZ,CACR,CACI,CACF;;;;;;;"}

package/dist/esm/pf-command-palette.entry.js

@@ -0,0 +1,271 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+import { m as matchesCommandQuery } from './command-Dkd7BUB5.js';
+import { K as Keys } from './keys-g4FlTDZx.js';
+import { g as getEnabledIndexes, r as resolveListMove } from './navigation-CAz7-p8y.js';
+import { l as lockPageScroll } from './scroll-lock-C-VLyxRR.js';
+
+const pfCommandPaletteCss = () => `:host{display:contents}.dialog{align-items:flex-start;background:none;border:0;display:none;height:100%;justify-content:center;max-height:100%;max-width:100%;padding:var(--space-4);width:100%}.dialog[open]{display:flex}@media (min-width: 768px){.dialog{padding-top:10vh}}.dialog::backdrop{background:var(--pf-commandpalette-overlay-backdrop, var(--pf-overlay-backdrop))}.panel{background:var(--pf-command-bg);border:1px solid var(--pf-command-border);border-radius:var(--radius-lg);box-shadow:var(--pf-commandpalette-elevation-overlay-shadow, var(--pf-elevation-overlay-shadow));color:var(--pf-command-text);display:grid;grid-template-rows:auto minmax(0, 1fr);max-height:100%;overflow:hidden;width:min(560px, 100%)}.dialog[open] .panel{animation:pf-command-panel-in var(--pf-transition-enter)}@keyframes pf-command-panel-in{from{opacity:0;transform:translateY(-8px) scale(0.98)}}@media (prefers-reduced-motion: reduce){.dialog[open] .panel{animation:none}}.search{align-items:center;border-bottom:1px solid var(--pf-command-border);display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4)}.search-icon{color:var(--pf-command-text-muted);flex-shrink:0}.input{background:none;border:0;color:var(--pf-command-text);flex:1;font-family:inherit;font-size:var(--font-size-md);min-width:0;outline:none;padding:0}.input::placeholder{color:var(--pf-command-text-muted)}.hint{flex-shrink:0}.list{overflow-y:auto;padding:var(--space-2)}.empty{color:var(--pf-command-text-muted);font-size:var(--font-size-sm);margin:0;padding:var(--space-4) var(--space-3);text-align:center}`;
+
+/*
+ * `toggleAttribute` does not exist on Stencil's mock DOM -- measured, and
+ * worth knowing how it fails: Stencil's `safeCall` swallows the TypeError, so
+ * the filter silently did nothing and the palette rendered "No results found"
+ * over a full list. Not exported, so this file still has one export.
+ */
+const setHidden = (element, hidden) => {
+    if (hidden)
+        element.setAttribute('hidden', '');
+    else
+        element.removeAttribute('hidden');
+};
+const PfCommandPalette = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pfOpenChange = createEvent(this, "pfOpenChange");
+        this.pfSelect = createEvent(this, "pfSelect");
+    }
+    get el() { return getElement(this); }
+    /** Whether the palette is showing. Reflected so the stylesheet selects on it. */
+    open = false;
+    /** Placeholder for the search input. */
+    placeholder = 'Search commands…';
+    /** Shown when the query matches nothing. */
+    emptyMessage = 'No results found.';
+    /** Accessible name for the dialog. */
+    label = 'Command palette';
+    /** Close on Escape or a click on the backdrop. Defaults to true. */
+    dismissable = true;
+    /** Fires whenever the palette opens or closes, whoever caused it. */
+    pfOpenChange;
+    /** Fires with the chosen item's `value`. The palette then closes. */
+    pfSelect;
+    query = '';
+    matchCount = 0;
+    releaseScroll = null;
+    activeItem = null;
+    /*
+     * Read the light DOM on the way in, not after mounting, so the first paint
+     * is right: filtering from `componentDidLoad` leaves `matchCount` at 0 for
+     * that first render and flashes "No results found" over a full list.
+     */
+    componentWillLoad() {
+        this.applyQuery();
+    }
+    componentDidLoad() {
+        if (this.open)
+            this.showDialog();
+    }
+    componentDidRender() {
+        /*
+         * Re-applied after every render because the active option is held as a
+         * *property* on the input, and Stencil's re-render replaces nothing of the
+         * light DOM but does reset nothing of this either — the property survives,
+         * but the matching set may have changed under it, so the one place that is
+         * always right is after the render that changed it.
+         */
+        this.syncActiveDescendant();
+    }
+    disconnectedCallback() {
+        this.unlockScroll();
+    }
+    /** Opens the palette. */
+    async show() {
+        this.open = true;
+    }
+    /** Closes the palette. */
+    async hide() {
+        this.open = false;
+    }
+    syncOpen(next, previous) {
+        if (next)
+            this.showDialog();
+        else
+            this.closeDialog();
+        if (next !== previous)
+            this.pfOpenChange.emit({ open: next });
+    }
+    /** A child asking to be run. The palette decides, reports and closes. */
+    handleCommandSelect(event) {
+        event.stopPropagation();
+        this.pfSelect.emit({ value: event.detail.value });
+        this.open = false;
+    }
+    /*
+     * Items may be added, removed or relabelled while the palette is open, so
+     * the filter is re-applied when the assignment changes. Text edited inside
+     * an already-assigned node does not fire this — the same caveat pf-tooltip
+     * documents — which is why `refresh()` exists.
+     */
+    onSlotChange = () => {
+        this.applyQuery();
+    };
+    /** Re-reads the children and re-applies the current query. */
+    async refresh() {
+        this.applyQuery();
+    }
+    get dialog() {
+        return this.el.shadowRoot?.querySelector('dialog') ?? null;
+    }
+    get input() {
+        return this.el.shadowRoot?.querySelector('input') ?? null;
+    }
+    items() {
+        return Array.from(this.el.querySelectorAll('pf-command-item'));
+    }
+    /** The items a query left showing, which is what the arrows move through. */
+    visibleItems() {
+        return this.items().filter((item) => !item.hasAttribute('hidden'));
+    }
+    lockScroll() {
+        if (this.releaseScroll)
+            return;
+        this.releaseScroll = lockPageScroll();
+    }
+    unlockScroll() {
+        this.releaseScroll?.();
+        this.releaseScroll = null;
+    }
+    showDialog() {
+        const dialog = this.dialog;
+        if (!dialog || dialog.open)
+            return;
+        dialog.showModal();
+        this.lockScroll();
+        // A fresh query each time it opens, matching the React component.
+        this.query = '';
+        this.applyQuery();
+        requestAnimationFrame(() => this.input?.focus());
+    }
+    closeDialog() {
+        const dialog = this.dialog;
+        this.unlockScroll();
+        if (dialog?.open)
+            dialog.close();
+    }
+    onCancel = (event) => {
+        if (!this.dismissable)
+            event.preventDefault();
+    };
+    onClose = () => {
+        this.unlockScroll();
+        if (this.open)
+            this.open = false;
+    };
+    /** A click on the dialog itself landed on the backdrop, not the panel. */
+    onDialogClick = (event) => {
+        if (!this.dismissable || event.target !== this.dialog)
+            return;
+        this.open = false;
+    };
+    onInput = (event) => {
+        this.query = event.target.value;
+        this.applyQuery();
+    };
+    /**
+     * Hides the items a query excludes, and any group left with none showing.
+     *
+     * The group's own label counts towards each of its items, so typing a
+     * section name narrows to that section — which is what the React component
+     * does with its `group` field.
+     */
+    applyQuery() {
+        const query = this.query;
+        for (const item of this.items()) {
+            const group = item.closest('pf-command-group');
+            const matches = matchesCommandQuery({
+                label: item.textContent?.trim() ?? '',
+                description: item.getAttribute('description'),
+                group: group?.getAttribute('label') ?? null,
+            }, query);
+            setHidden(item, !matches);
+        }
+        for (const group of Array.from(this.el.querySelectorAll('pf-command-group'))) {
+            const showing = group.querySelectorAll('pf-command-item:not([hidden])').length;
+            setHidden(group, showing === 0);
+        }
+        const visible = this.visibleItems();
+        this.matchCount = visible.length;
+        // A new query starts at the top, as the React component does.
+        this.setActive(visible.find((item) => !item.hasAttribute('disabled')) ?? null);
+    }
+    setActive(item) {
+        if (this.activeItem && this.activeItem !== item) {
+            this.activeItem.removeAttribute('aria-selected');
+        }
+        this.activeItem = item;
+        item?.setAttribute('aria-selected', 'true');
+        this.syncActiveDescendant();
+        // Guarded: this also runs from componentWillLoad, and the mock DOM has no
+        // scrollIntoView at all.
+        if (item && typeof item.scrollIntoView === 'function') {
+            item.scrollIntoView({ block: 'nearest' });
+        }
+    }
+    /**
+     * Feature-detected: where ARIA element reflection is missing there is no
+     * cross-root equivalent, so the active option stops being *announced* while
+     * the arrows, the highlight and Enter all still work. Recorded in `todo.md`.
+     */
+    syncActiveDescendant() {
+        const input = this.input;
+        if (!input || !('ariaActiveDescendantElement' in input))
+            return;
+        input.ariaActiveDescendantElement = this.activeItem;
+    }
+    move(action) {
+        const visible = this.visibleItems();
+        const enabled = getEnabledIndexes(visible, (item) => item.hasAttribute('disabled'));
+        const current = this.activeItem ? visible.indexOf(this.activeItem) : -1;
+        const next = resolveListMove(action, enabled, current);
+        if (next !== -1)
+            this.setActive(visible[next] ?? null);
+    }
+    runActive() {
+        const item = this.activeItem;
+        if (!item || item.hasAttribute('disabled'))
+            return;
+        // The property, not the attribute: a binding that sets props would leave
+        // the attribute absent, and the reported value silently empty.
+        const value = item.value;
+        this.pfSelect.emit({ value: value ?? item.getAttribute('value') ?? '' });
+        this.open = false;
+    }
+    /*
+     * On the panel rather than the input, so a pointer that has moved focus
+     * elsewhere inside the dialog still drives the list. Escape is left to the
+     * dialog, which handles it natively.
+     */
+    onKeyDown = (event) => {
+        const actions = {
+            [Keys.ArrowDown]: 'next',
+            [Keys.ArrowUp]: 'previous',
+            [Keys.Home]: 'first',
+            [Keys.End]: 'last',
+        };
+        const action = actions[event.key];
+        if (action) {
+            event.preventDefault();
+            this.move(action);
+            return;
+        }
+        if (event.key === Keys.Enter) {
+            event.preventDefault();
+            this.runActive();
+        }
+    };
+    render() {
+        const empty = this.matchCount === 0;
+        return (h(Host, { key: '14df0ee38242c1ba49d494ee1147d86cd64e4de7' }, h("dialog", { key: '027c426b6cd73ad22cddba96c28333d69b105278', part: "dialog", class: "dialog", "aria-label": this.label, onCancel: this.onCancel, onClose: this.onClose, onClick: this.onDialogClick }, h("div", { key: '1b4356fa25736a00d91bf5166d22443338be1030', class: "panel", part: "panel", onKeyDown: this.onKeyDown }, h("div", { key: '4676d0175b1669e7d2ae9e8f27f2cecb964d3add', class: "search" }, h("pf-icon", { key: '1e5d5c8a7b19468e46941eca84a622144d0475b5', name: "magnifying-glass", class: "search-icon" }), h("input", { key: '6dba34b19089a31e17ae4b5516362e5b11c8dd28', part: "input", class: "input", type: "text", role: "combobox", autocomplete: "off", spellcheck: false, "aria-autocomplete": "list", "aria-expanded": "true", "aria-label": this.placeholder, placeholder: this.placeholder, value: this.query, onInput: this.onInput }), h("pf-kbd", { key: '95147d6a01d46da45fac53795d64adaebcf88b87', class: "hint" }, "esc")), h("div", { key: '5472730ca3196d9cbb1459da99e199ffdd601db7', class: "list", part: "list", role: "listbox", "aria-label": this.label }, h("slot", { key: 'bd5a204461aafd49f4e1af9864daac3cdfe12d33', onSlotchange: this.onSlotChange }), empty && (h("p", { key: '7c092f8c728c0b716c28b8b0a94407f979874e5b', class: "empty", part: "empty" }, this.emptyMessage)))))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "syncOpen": 0
+            }]
+    }; }
+};
+PfCommandPalette.style = pfCommandPaletteCss();
+
+export { PfCommandPalette as pf_command_palette };
+//# sourceMappingURL=pf-command-palette.entry.js.map
+
+//# sourceMappingURL=pf-command-palette.entry.js.map

package/dist/esm/pf-command-palette.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-command-palette.entry.js","sources":["src/components/pf-command-palette/pf-command-palette.css?tag=pf-command-palette&encapsulation=shadow","src/components/pf-command-palette/pf-command-palette.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n/*\n * The dialog is the backdrop: it fills the viewport and aligns the panel near\n * the top, so a click landing on it rather than on the panel is a backdrop\n * click. The explicit sizing overrides the UA's `margin: auto` and\n * `width: fit-content` for a `<dialog>`.\n */\n.dialog {\n  align-items: flex-start;\n  background: none;\n  border: 0;\n  display: none;\n  height: 100%;\n  justify-content: center;\n  max-height: 100%;\n  max-width: 100%;\n  padding: var(--space-4);\n  width: 100%;\n}\n\n.dialog[open] {\n  display: flex;\n}\n\n@media (--md) {\n  .dialog {\n    padding-top: 10vh;\n  }\n}\n\n.dialog::backdrop {\n  background: var(--pf-commandpalette-overlay-backdrop, var(--pf-overlay-backdrop));\n}\n\n.panel {\n  background: var(--pf-command-bg);\n  border: 1px solid var(--pf-command-border);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--pf-commandpalette-elevation-overlay-shadow, var(--pf-elevation-overlay-shadow));\n  color: var(--pf-command-text);\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr);\n  max-height: 100%;\n  overflow: hidden;\n  width: min(560px, 100%);\n}\n\n.dialog[open] .panel {\n  animation: pf-command-panel-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-command-panel-in {\n  from {\n    opacity: 0;\n    transform: translateY(-8px) scale(0.98);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dialog[open] .panel {\n    animation: none;\n  }\n}\n\n.search {\n  align-items: center;\n  border-bottom: 1px solid var(--pf-command-border);\n  display: flex;\n  gap: var(--space-3);\n  padding: var(--space-3) var(--space-4);\n}\n\n.search-icon {\n  color: var(--pf-command-text-muted);\n  flex-shrink: 0;\n}\n\n.input {\n  background: none;\n  border: 0;\n  color: var(--pf-command-text);\n  flex: 1;\n  font-family: inherit;\n  font-size: var(--font-size-md);\n  min-width: 0;\n  outline: none;\n  padding: 0;\n}\n\n.input::placeholder {\n  color: var(--pf-command-text-muted);\n}\n\n.hint {\n  flex-shrink: 0;\n}\n\n.list {\n  overflow-y: auto;\n  padding: var(--space-2);\n}\n\n.empty {\n  color: var(--pf-command-text-muted);\n  font-size: var(--font-size-sm);\n  margin: 0;\n  padding: var(--space-4) var(--space-3);\n  text-align: center;\n}\n","import {\n  getEnabledIndexes,\n  Keys,\n  lockPageScroll,\n  matchesCommandQuery,\n  resolveListMove,\n  type ListNavigationAction,\n} from '@pitchfork-ui/core';\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n/*\n * `toggleAttribute` does not exist on Stencil's mock DOM -- measured, and\n * worth knowing how it fails: Stencil's `safeCall` swallows the TypeError, so\n * the filter silently did nothing and the palette rendered \"No results found\"\n * over a full list. Not exported, so this file still has one export.\n */\nconst setHidden = (element: Element, hidden: boolean) => {\n  if (hidden) element.setAttribute('hidden', '');\n  else element.removeAttribute('hidden');\n};\n\n/**\n * A searchable command list in a modal dialog.\n *\n * A native `<dialog>` opened with `showModal()`, like `pf-modal` and\n * `pf-slideout-menu`: the focus trap, Escape and the backdrop come free, and\n * the React component's `useFocusTrap` has no equivalent here. Page scroll is\n * the one part the dialog does not do, so that is core's reference-counted\n * lock.\n *\n * **The active option is set as an element, not an IDREF.** The input lives in\n * this shadow root and the options are slotted light-DOM children, and\n * `aria-activedescendant` does not cross a shadow boundary — measured against\n * Chromium's accessibility tree, where a cross-root IDREF is simply absent\n * from it. `ariaActiveDescendantElement` does resolve, because the option sits\n * in an ancestor scope of the input's tree, which is the direction element\n * reflection allows. (`pf-tooltip` needed the opposite direction — a trigger\n * referencing something inside a shadow root it does not own — and that one\n * reads back empty, which is why it copies text into `aria-description`\n * instead.)\n *\n * @slot - `pf-command-item` and `pf-command-group` children.\n * @part dialog - the native dialog, which is also the backdrop.\n * @part panel - the floating panel.\n * @part input - the search input.\n * @part list - the listbox the items are slotted into.\n * @part empty - the message shown when nothing matches.\n */\n@Component({\n  tag: 'pf-command-palette',\n  styleUrl: 'pf-command-palette.css',\n  shadow: true,\n})\nexport class PfCommandPalette {\n  @Element() el!: HTMLElement;\n\n  /** Whether the palette is showing. Reflected so the stylesheet selects on it. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Placeholder for the search input. */\n  @Prop() placeholder = 'Search commands…';\n\n  /** Shown when the query matches nothing. */\n  @Prop() emptyMessage = 'No results found.';\n\n  /** Accessible name for the dialog. */\n  @Prop() label = 'Command palette';\n\n  /** Close on Escape or a click on the backdrop. Defaults to true. */\n  @Prop() dismissable = true;\n\n  /** Fires whenever the palette opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** Fires with the chosen item's `value`. The palette then closes. */\n  @Event() pfSelect!: EventEmitter<{ value: string }>;\n\n  @State() query = '';\n  @State() matchCount = 0;\n\n  private releaseScroll: (() => void) | null = null;\n  private activeItem: HTMLElement | null = null;\n\n  /*\n   * Read the light DOM on the way in, not after mounting, so the first paint\n   * is right: filtering from `componentDidLoad` leaves `matchCount` at 0 for\n   * that first render and flashes \"No results found\" over a full list.\n   */\n  componentWillLoad() {\n    this.applyQuery();\n  }\n\n  componentDidLoad() {\n    if (this.open) this.showDialog();\n  }\n\n  componentDidRender() {\n    /*\n     * Re-applied after every render because the active option is held as a\n     * *property* on the input, and Stencil's re-render replaces nothing of the\n     * light DOM but does reset nothing of this either — the property survives,\n     * but the matching set may have changed under it, so the one place that is\n     * always right is after the render that changed it.\n     */\n    this.syncActiveDescendant();\n  }\n\n  disconnectedCallback() {\n    this.unlockScroll();\n  }\n\n  /** Opens the palette. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Closes the palette. */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showDialog();\n    else this.closeDialog();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  /** A child asking to be run. The palette decides, reports and closes. */\n  @Listen('pfCommandSelect')\n  handleCommandSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    this.pfSelect.emit({ value: event.detail.value });\n    this.open = false;\n  }\n\n  /*\n   * Items may be added, removed or relabelled while the palette is open, so\n   * the filter is re-applied when the assignment changes. Text edited inside\n   * an already-assigned node does not fire this — the same caveat pf-tooltip\n   * documents — which is why `refresh()` exists.\n   */\n  private onSlotChange = () => {\n    this.applyQuery();\n  };\n\n  /** Re-reads the children and re-applies the current query. */\n  @Method()\n  async refresh(): Promise<void> {\n    this.applyQuery();\n  }\n\n  private get dialog() {\n    return this.el.shadowRoot?.querySelector('dialog') ?? null;\n  }\n\n  private get input() {\n    return this.el.shadowRoot?.querySelector('input') ?? null;\n  }\n\n  private items(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-command-item'));\n  }\n\n  /** The items a query left showing, which is what the arrows move through. */\n  private visibleItems(): HTMLElement[] {\n    return this.items().filter((item) => !item.hasAttribute('hidden'));\n  }\n\n  private lockScroll() {\n    if (this.releaseScroll) return;\n    this.releaseScroll = lockPageScroll();\n  }\n\n  private unlockScroll() {\n    this.releaseScroll?.();\n    this.releaseScroll = null;\n  }\n\n  private showDialog() {\n    const dialog = this.dialog;\n    if (!dialog || dialog.open) return;\n    dialog.showModal();\n    this.lockScroll();\n\n    // A fresh query each time it opens, matching the React component.\n    this.query = '';\n    this.applyQuery();\n    requestAnimationFrame(() => this.input?.focus());\n  }\n\n  private closeDialog() {\n    const dialog = this.dialog;\n    this.unlockScroll();\n    if (dialog?.open) dialog.close();\n  }\n\n  private onCancel = (event: Event) => {\n    if (!this.dismissable) event.preventDefault();\n  };\n\n  private onClose = () => {\n    this.unlockScroll();\n    if (this.open) this.open = false;\n  };\n\n  /** A click on the dialog itself landed on the backdrop, not the panel. */\n  private onDialogClick = (event: MouseEvent) => {\n    if (!this.dismissable || event.target !== this.dialog) return;\n    this.open = false;\n  };\n\n  private onInput = (event: Event) => {\n    this.query = (event.target as HTMLInputElement).value;\n    this.applyQuery();\n  };\n\n  /**\n   * Hides the items a query excludes, and any group left with none showing.\n   *\n   * The group's own label counts towards each of its items, so typing a\n   * section name narrows to that section — which is what the React component\n   * does with its `group` field.\n   */\n  private applyQuery() {\n    const query = this.query;\n\n    for (const item of this.items()) {\n      const group = item.closest('pf-command-group');\n      const matches = matchesCommandQuery(\n        {\n          label: item.textContent?.trim() ?? '',\n          description: item.getAttribute('description'),\n          group: group?.getAttribute('label') ?? null,\n        },\n        query,\n      );\n      setHidden(item, !matches);\n    }\n\n    for (const group of Array.from(this.el.querySelectorAll<HTMLElement>('pf-command-group'))) {\n      const showing = group.querySelectorAll('pf-command-item:not([hidden])').length;\n      setHidden(group, showing === 0);\n    }\n\n    const visible = this.visibleItems();\n    this.matchCount = visible.length;\n\n    // A new query starts at the top, as the React component does.\n    this.setActive(visible.find((item) => !item.hasAttribute('disabled')) ?? null);\n  }\n\n  private setActive(item: HTMLElement | null) {\n    if (this.activeItem && this.activeItem !== item) {\n      this.activeItem.removeAttribute('aria-selected');\n    }\n    this.activeItem = item;\n    item?.setAttribute('aria-selected', 'true');\n    this.syncActiveDescendant();\n    // Guarded: this also runs from componentWillLoad, and the mock DOM has no\n    // scrollIntoView at all.\n    if (item && typeof item.scrollIntoView === 'function') {\n      item.scrollIntoView({ block: 'nearest' });\n    }\n  }\n\n  /**\n   * Feature-detected: where ARIA element reflection is missing there is no\n   * cross-root equivalent, so the active option stops being *announced* while\n   * the arrows, the highlight and Enter all still work. Recorded in `todo.md`.\n   */\n  private syncActiveDescendant() {\n    const input = this.input;\n    if (!input || !('ariaActiveDescendantElement' in input)) return;\n    (\n      input as unknown as { ariaActiveDescendantElement: Element | null }\n    ).ariaActiveDescendantElement = this.activeItem;\n  }\n\n  private move(action: ListNavigationAction) {\n    const visible = this.visibleItems();\n    const enabled = getEnabledIndexes(visible, (item) => item.hasAttribute('disabled'));\n    const current = this.activeItem ? visible.indexOf(this.activeItem) : -1;\n    const next = resolveListMove(action, enabled, current);\n    if (next !== -1) this.setActive(visible[next] ?? null);\n  }\n\n  private runActive() {\n    const item = this.activeItem;\n    if (!item || item.hasAttribute('disabled')) return;\n    // The property, not the attribute: a binding that sets props would leave\n    // the attribute absent, and the reported value silently empty.\n    const value = (item as HTMLElement & { value?: string }).value;\n    this.pfSelect.emit({ value: value ?? item.getAttribute('value') ?? '' });\n    this.open = false;\n  }\n\n  /*\n   * On the panel rather than the input, so a pointer that has moved focus\n   * elsewhere inside the dialog still drives the list. Escape is left to the\n   * dialog, which handles it natively.\n   */\n  private onKeyDown = (event: KeyboardEvent) => {\n    const actions: Record<string, ListNavigationAction> = {\n      [Keys.ArrowDown]: 'next',\n      [Keys.ArrowUp]: 'previous',\n      [Keys.Home]: 'first',\n      [Keys.End]: 'last',\n    };\n\n    const action = actions[event.key];\n    if (action) {\n      event.preventDefault();\n      this.move(action);\n      return;\n    }\n\n    if (event.key === Keys.Enter) {\n      event.preventDefault();\n      this.runActive();\n    }\n  };\n\n  render() {\n    const empty = this.matchCount === 0;\n\n    return (\n      <Host>\n        <dialog\n          part=\"dialog\"\n          class=\"dialog\"\n          aria-label={this.label}\n          onCancel={this.onCancel}\n          onClose={this.onClose}\n          onClick={this.onDialogClick}\n        >\n          <div class=\"panel\" part=\"panel\" onKeyDown={this.onKeyDown}>\n            <div class=\"search\">\n              <pf-icon name=\"magnifying-glass\" class=\"search-icon\"></pf-icon>\n              <input\n                part=\"input\"\n                class=\"input\"\n                type=\"text\"\n                role=\"combobox\"\n                autocomplete=\"off\"\n                spellcheck={false}\n                aria-autocomplete=\"list\"\n                aria-expanded=\"true\"\n                aria-label={this.placeholder}\n                placeholder={this.placeholder}\n                value={this.query}\n                onInput={this.onInput}\n              />\n              <pf-kbd class=\"hint\">esc</pf-kbd>\n            </div>\n\n            <div class=\"list\" part=\"list\" role=\"listbox\" aria-label={this.label}>\n              <slot onSlotchange={this.onSlotChange} />\n              {empty && (\n                <p class=\"empty\" part=\"empty\">\n                  {this.emptyMessage}\n                </p>\n              )}\n            </div>\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/pf-content-divider.entry.js

@@ -0,0 +1,53 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+
+const pfContentDividerCss = () => `:host{align-items:center;color:var(--pf-content-divider-text);display:flex;gap:var(--space-3);width:100%}:host([hidden]){display:none}:host([inset]){padding-inline-end:var(--space-2);padding-inline-start:var(--space-2)}.line{background:var(--pf-content-divider-line);display:block;flex:1;height:1px}.label{color:var(--pf-content-divider-text);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:1;text-transform:uppercase;white-space:nowrap}.label--empty,.line--hidden{display:none}:host([orientation='vertical']){align-self:stretch;background:var(--pf-content-divider-line);display:inline-block;flex:0 0 auto;height:auto;min-height:100%;width:1px}:host([orientation='vertical']) .line,:host([orientation='vertical']) .label{display:none}`;
+
+const PfContentDivider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** Reflected so the stylesheet can select on it. */
+    orientation = 'horizontal';
+    /** Pad the divider horizontally. Reflected so the stylesheet can select on it. */
+    inset = false;
+    /**
+     * Whether anything is slotted. Drives the layout: a labelled divider is
+     * rule-label-rule, an unlabelled one is a single rule. It cannot be a `@Prop`
+     * because the consumer never states it — the presence of slotted content is
+     * the statement, and that can change after first render.
+     */
+    hasLabel = false;
+    componentWillLoad() {
+        this.syncLabel();
+    }
+    /**
+     * Reads the light DOM rather than the slot's `assignedNodes()`. Both give the
+     * same answer for a single default slot, but the light DOM can be read before
+     * first render, so the divider lays out correctly on its first paint instead
+     * of flickering from unlabelled to labelled once `slotchange` lands. It is
+     * also the only one of the two that Stencil's mock DOM implements.
+     *
+     * A whitespace-only text node is what a formatter leaves behind in
+     * `<pf-content-divider>\n</pf-content-divider>`, and it is not a label.
+     */
+    syncLabel = () => {
+        this.hasLabel = Array.from(this.el.childNodes).some((node) => {
+            if (node.nodeType === Node.TEXT_NODE)
+                return Boolean(node.textContent?.trim());
+            if (node.nodeType !== Node.ELEMENT_NODE)
+                return false;
+            // Anything aimed at a named slot this element does not have is not a label.
+            return !node.getAttribute('slot');
+        });
+    };
+    render() {
+        return (h(Host, { key: 'dc7c5a43b2f356b553628a4de6a987ecc217fc5e', role: "separator", "aria-orientation": this.orientation }, h("span", { key: 'cdab9e57ebf9d2e00952b519f0767e45c3898db9', part: "line", class: "line", "aria-hidden": "true" }), h("span", { key: '23ff0f23cb3534d200d8f5a3da8651bd3fd0a7c1', part: "label", class: { label: true, 'label--empty': !this.hasLabel } }, h("slot", { key: '8d3cdb5015572a426c999b09478a5ba38fc1a6f9', onSlotchange: this.syncLabel })), h("span", { key: '3d1984591ba428163514b1f85a1ed3637cc9534a', part: "line", class: { line: true, 'line--hidden': !this.hasLabel }, "aria-hidden": "true" })));
+    }
+};
+PfContentDivider.style = pfContentDividerCss();
+
+export { PfContentDivider as pf_content_divider };
+//# sourceMappingURL=pf-content-divider.entry.js.map
+
+//# sourceMappingURL=pf-content-divider.entry.js.map

package/dist/esm/pf-content-divider.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-content-divider.entry.js","sources":["src/components/pf-content-divider/pf-content-divider.css?tag=pf-content-divider&encapsulation=shadow","src/components/pf-content-divider/pf-content-divider.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  color: var(--pf-content-divider-text);\n  display: flex;\n  gap: var(--space-3);\n  width: 100%;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([inset]) {\n  padding-inline-end: var(--space-2);\n  padding-inline-start: var(--space-2);\n}\n\n.line {\n  background: var(--pf-content-divider-line);\n  display: block;\n  flex: 1;\n  height: 1px;\n}\n\n.label {\n  color: var(--pf-content-divider-text);\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-medium);\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n/*\n * `display: none` rather than omitting the nodes: the slot has to stay in the\n * shadow tree for `slotchange` to fire at all, and the trailing rule would\n * otherwise double the gap around a zero-width label.\n */\n.label--empty,\n.line--hidden {\n  display: none;\n}\n\n/*\n * Vertical is a different shape, not a variant of the horizontal one: the host\n * itself is the rule, so its own children have no part to play.\n */\n:host([orientation='vertical']) {\n  align-self: stretch;\n  background: var(--pf-content-divider-line);\n  display: inline-block;\n  flex: 0 0 auto;\n  height: auto;\n  min-height: 100%;\n  width: 1px;\n}\n\n:host([orientation='vertical']) .line,\n:host([orientation='vertical']) .label {\n  display: none;\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nexport type PfContentDividerOrientation = 'horizontal' | 'vertical';\n\n/**\n * A rule that separates content, optionally labelled.\n *\n * @slot - the divider's label. Leave it empty for a plain rule; the element\n * notices either way and lays the rule out accordingly. Ignored when\n * `orientation` is `vertical`, which has nowhere to put a label.\n *\n * @part line - each of the two rule segments either side of the label, or the\n * single segment when there is no label.\n * @part label - the wrapper around the slotted label.\n */\n@Component({\n  tag: 'pf-content-divider',\n  styleUrl: 'pf-content-divider.css',\n  shadow: true,\n})\nexport class PfContentDivider {\n  @Element() el!: HTMLElement;\n\n  /** Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) orientation: PfContentDividerOrientation = 'horizontal';\n\n  /** Pad the divider horizontally. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) inset = false;\n\n  /**\n   * Whether anything is slotted. Drives the layout: a labelled divider is\n   * rule-label-rule, an unlabelled one is a single rule. It cannot be a `@Prop`\n   * because the consumer never states it — the presence of slotted content is\n   * the statement, and that can change after first render.\n   */\n  @State() hasLabel = false;\n\n  componentWillLoad() {\n    this.syncLabel();\n  }\n\n  /**\n   * Reads the light DOM rather than the slot's `assignedNodes()`. Both give the\n   * same answer for a single default slot, but the light DOM can be read before\n   * first render, so the divider lays out correctly on its first paint instead\n   * of flickering from unlabelled to labelled once `slotchange` lands. It is\n   * also the only one of the two that Stencil's mock DOM implements.\n   *\n   * A whitespace-only text node is what a formatter leaves behind in\n   * `<pf-content-divider>\\n</pf-content-divider>`, and it is not a label.\n   */\n  private syncLabel = () => {\n    this.hasLabel = Array.from(this.el.childNodes).some((node) => {\n      if (node.nodeType === Node.TEXT_NODE) return Boolean(node.textContent?.trim());\n      if (node.nodeType !== Node.ELEMENT_NODE) return false;\n      // Anything aimed at a named slot this element does not have is not a label.\n      return !(node as Element).getAttribute('slot');\n    });\n  };\n\n  render() {\n    return (\n      <Host role=\"separator\" aria-orientation={this.orientation}>\n        <span part=\"line\" class=\"line\" aria-hidden=\"true\" />\n        <span part=\"label\" class={{ label: true, 'label--empty': !this.hasLabel }}>\n          <slot onSlotchange={this.syncLabel} />\n        </span>\n        <span\n          part=\"line\"\n          class={{ line: true, 'line--hidden': !this.hasLabel }}\n          aria-hidden=\"true\"\n        />\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,8vBAA8vB,CAAC;;MCoBrxB,gBAAgB,GAAA,MAAA;;;;;;IAIF,WAAW,GAAgC,YAAY;;IAGvD,KAAK,GAAG,KAAK;AAEtC;;;;;AAKG;IACM,QAAQ,GAAG,KAAK;IAEzB,iBAAiB,GAAA;QACf,IAAI,CAAC,SAAS,EAAE;;AAGlB;;;;;;;;;AASG;IACK,SAAS,GAAG,MAAK;AACvB,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAI;AAC3D,YAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS;gBAAE,OAAO,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;AAC9E,YAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;AAAE,gBAAA,OAAO,KAAK;;AAErD,YAAA,OAAO,CAAE,IAAgB,CAAC,YAAY,CAAC,MAAM,CAAC;AAChD,SAAC,CAAC;AACJ,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,WAAW,EAAA,kBAAA,EAAmB,IAAI,CAAC,WAAW,EAAA,EACvD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,EAAA,aAAA,EAAa,MAAM,EAAA,CAAG,EACpD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAA,EACvE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,YAAY,EAAE,IAAI,CAAC,SAAS,GAAI,CACjC,EACP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,iBACzC,MAAM,EAAA,CAClB,CACG;;;;;;;"}