@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/collection/components/pf-combobox/pf-combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-combobox.js","sourceRoot":"","sources":["../../../src/components/pf-combobox/pf-combobox.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/pf-command-group/pf-command-group.css

@@ -0,0 +1,18 @@
+:host {
+  display: block;
+}
+
+/* The palette hides a group whose every item a query filtered out. */
+: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;
+}

package/dist/collection/components/pf-command-group/pf-command-group.js

@@ -0,0 +1,57 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A labelled section of a `pf-command-palette`.
+ *
+ * Grouping is structural here, where the React component takes a `group` name
+ * on each item and buckets them itself. That is not a stylistic choice: the
+ * items are slotted light-DOM children, and a shadow root cannot wrap a subset
+ * of its slotted children in a box — one `<slot>` renders them all, in source
+ * order. So the consumer expresses a group by nesting, which is also what
+ * §2.1 asks for everywhere else.
+ *
+ * @slot - `pf-command-item` children.
+ * @part label - the section heading.
+ */
+export class PfCommandGroup {
+    /** 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' })));
+    }
+    static get is() { return "pf-command-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-command-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-command-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The section heading. Searched along with each item's own text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pf-command-group.js.map

package/dist/collection/components/pf-command-group/pf-command-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-command-group.js","sourceRoot":"","sources":["../../../src/components/pf-command-group/pf-command-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,cAAc;IACzB,qEAAqE;IAC7D,KAAK,CAAU;IAEvB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,KAAK;YACtC,IAAI,CAAC,KAAK,IAAI,CACb,0DAAG,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC1B,IAAI,CAAC,KAAK,CACT,CACL;YACD,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/pf-command-item/pf-command-item.css

@@ -0,0 +1,76 @@
+: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;
+}
+
+/* The palette sets `hidden` on the items a query filters out. */
+:host([hidden]) {
+  display: none;
+}
+
+/*
+ * The active option, which the palette marks. Not `:hover` alone: the keyboard
+ * and the mouse share one active item, and the palette is what decides it.
+ */
+:host([aria-selected='true']) {
+  background: var(--pf-command-item-active-bg);
+}
+
+/*
+ * The active background is the primary action colour, so everything on top of
+ * it needs the matching foreground -- including the description, which is
+ * muted against the panel and would be unreadable against this.
+ */
+: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;
+}
+
+/*
+ * No wrapper box around the icon slot: an unassigned slot is
+ * `display: contents` and generates nothing, so the row's `gap` does not open
+ * in front of an item with no icon.
+ */
+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;
+}

package/dist/collection/components/pf-command-item/pf-command-item.js

@@ -0,0 +1,142 @@
+import { h, Host } from "@stencil/core";
+/**
+ * One command in a `pf-command-palette`.
+ *
+ * It only reports that it was chosen; the palette owns filtering, the active
+ * option and closing, exactly as `pf-radio-group` owns selection for its
+ * radios and `pf-dropdown` owns it for its menu items.
+ *
+ * @slot - the command's label, which is also what the palette searches.
+ * @slot icon - a leading icon.
+ * @part label - the label's box.
+ * @part description - the supporting line.
+ */
+export class PfCommandItem {
+    el;
+    /**
+     * 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)))));
+    }
+    static get is() { return "pf-command-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-command-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-command-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifies the command in the palette's select event.\n\nReflected, and not only for tidiness: the generated React and Angular\nbindings set props as *properties*, so without this there is no `value`\nattribute and anything selecting on one \u2014 the palette's own item query\nincluded \u2014 finds nothing. The same defect as an unreflected `name` on a\nform control, and caught the same way, by the consumer apps."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A supporting line under the label. Searched along with the label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Reflected so the stylesheet and the palette's item query can select on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfCommandSelect",
+                "name": "pfCommandSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Asks the palette to run this command. The palette decides and closes."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pf-command-item.js.map

package/dist/collection/components/pf-command-item/pf-command-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-command-item.js","sourceRoot":"","sources":["../../../src/components/pf-command-item/pf-command-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEvF;;;;;;;;;;;GAWG;AAMH,MAAM,OAAO,aAAa;IACb,EAAE,CAAe;IAE5B;;;;;;;;OAQG;IACsB,KAAK,GAAG,EAAE,CAAC;IAEpC,wEAAwE;IAChE,WAAW,CAAU;IAE7B,iFAAiF;IACxD,QAAQ,GAAG,KAAK,CAAC;IAE1C,4EAA4E;IACnE,eAAe,CAAmC;IAE3D;;;;OAIG;IACK,OAAO,GAAG,CAAC,KAAiB,EAAE,EAAE;QACtC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACnD,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,mBAAgB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO;YACrF,6DAAM,IAAI,EAAC,MAAM,GAAG;YACpB,6DAAM,KAAK,EAAC,SAAS;gBACnB,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;oBAC9B,8DAAQ,CACH;gBACN,IAAI,CAAC,WAAW,IAAI,CACnB,6DAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,aAAa,IACzC,IAAI,CAAC,WAAW,CACZ,CACR,CACI,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/pf-command-palette/pf-command-palette.css

@@ -0,0 +1,113 @@
+:host {
+  display: contents;
+}
+
+/*
+ * The dialog is the backdrop: it fills the viewport and aligns the panel near
+ * the top, so a click landing on it rather than on the panel is a backdrop
+ * click. The explicit sizing overrides the UA's `margin: auto` and
+ * `width: fit-content` for a `<dialog>`.
+ */
+.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);
+}
+
+/* Its own copy: @keyframes do not cross a shadow boundary. */
+@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;
+}