@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/cjs/pf-multi-select.cjs.entry.js

@@ -0,0 +1,317 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var placePopover = require('./place-popover-CMqeolzZ.js');
+var aria = require('./aria-5oCPUGFo.js');
+var keys = require('./keys-S3YTuCcn.js');
+var navigation = require('./navigation-CZce-g58.js');
+var valueList = require('./value-list-zSKmhcgH.js');
+var formValidity = require('./form-validity-BCrcqnZ7.js');
+var controlLabel = require('./control-label-C0eK8bPh.js');
+
+const pfMultiSelectCss = () => `:host{display:block;--pf-option-text:var(--pf-multiselect-text);--pf-option-text-disabled:var(--pf-multiselect-text-muted);--pf-option-active-bg:var(--pf-multiselect-active-bg);--pf-option-active-text:var(--pf-multiselect-active-text)}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-multiselect-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-multiselect-invalid-border);margin-inline-start:var(--space-1)}.trigger{align-items:center;background:var(--pf-multiselect-bg);border:1px solid var(--pf-multiselect-border);border-radius:var(--radius-md);color:var(--pf-multiselect-text);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-size-sm);gap:var(--space-2);justify-content:space-between;padding:var(--space-2) var(--space-3);text-align:start;width:100%}.trigger:focus-visible{border-color:var(--pf-multiselect-focus-border);box-shadow:var(--pf-focus-ring);outline:none}.trigger:disabled{cursor:not-allowed;opacity:0.6}.trigger--invalid{border-color:var(--pf-multiselect-invalid-border)}.chips{display:flex;flex-wrap:wrap;gap:var(--space-1);min-width:0}.chip{background:var(--pf-multiselect-bg-subtle);border-radius:var(--radius-sm);font-size:var(--font-size-xs);padding:2px var(--space-2)}.placeholder{color:var(--pf-multiselect-text-muted)}.chevron{align-items:center;display:inline-flex;flex-shrink:0;transition:transform var(--pf-transition-fast)}:host([open]) .chevron{transform:rotate(180deg)}@media (prefers-reduced-motion: reduce){.chevron{transition:none}}.description{color:var(--pf-multiselect-text-muted);font-size:var(--font-size-xs);margin:0}.error{color:var(--pf-multiselect-invalid-border);font-size:var(--font-size-xs);margin:0}.listbox{inset:auto;margin:0;background:var(--pf-multiselect-bg);border:1px solid var(--pf-multiselect-border);border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);padding:var(--space-1)}.listbox:popover-open{animation:pf-multi-select-in var(--pf-transition-enter)}@keyframes pf-multi-select-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.listbox:popover-open{animation:none}}`;
+
+const MOVES = {
+    [keys.Keys.ArrowDown]: 'next',
+    [keys.Keys.ArrowUp]: 'previous',
+    [keys.Keys.Home]: 'first',
+    [keys.Keys.End]: 'last',
+};
+const PfMultiSelect = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfChange = index.createEvent(this, "pfChange");
+        this.pfOpenChange = index.createEvent(this, "pfOpenChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    get el() { return index.getElement(this); }
+    internals;
+    /** Submitted under this name, once per chosen value. Reflected. */
+    name;
+    /** The chosen values, comma-separated. Reflected, so HTML can set it. */
+    value = '';
+    /** Whether the listbox is showing. Reflected for the stylesheet. */
+    open = false;
+    label;
+    description;
+    error;
+    placeholder = 'Select options';
+    required = false;
+    disabled = false;
+    /** Options to show before the listbox scrolls. */
+    maxVisibleOptions;
+    /** Fires when the chosen set changes, with both representations. */
+    pfChange;
+    /** Fires whenever the listbox opens or closes, whoever caused it. */
+    pfOpenChange;
+    /** The labels of the chosen options, for the trigger's chips. */
+    chips = [];
+    initialValue = '';
+    stopObserving;
+    activeOption = null;
+    warnedAboutSeparator = false;
+    componentWillLoad() {
+        this.initialValue = this.value ?? '';
+        this.syncFormState();
+        this.syncOptions();
+    }
+    componentDidRender() {
+        this.syncActiveDescendant();
+    }
+    disconnectedCallback() {
+        this.stopObserving?.();
+    }
+    /*
+     * `name` is watched here and not on the controls that pass a plain string to
+     * `setFormValue`: those take their submission name from the reflected
+     * attribute, so the platform picks a change up by itself. This one builds
+     * the name *into* a FormData, so without the watch a name assigned after
+     * load would never reach the submission.
+     */
+    syncFormState() {
+        const values = this.values();
+        if (values.length === 0 || !this.name) {
+            this.internals.setFormValue(null);
+        }
+        else {
+            // One entry per value under the one name, which `data.getAll(name)`
+            // reads back as an array.
+            const data = new FormData();
+            for (const value of values)
+                data.append(this.name, value);
+            this.internals.setFormValue(data);
+        }
+        formValidity.applyControlValidity(this.internals, values.length > 0, this.required, this.error);
+    }
+    /** The value changed, so the children's `selected` and the chips follow. */
+    syncOptions() {
+        const chosen = this.values();
+        const labels = [];
+        for (const option of this.options()) {
+            const selected = chosen.includes(this.optionValue(option));
+            option.selected = selected;
+        }
+        // Chips in the order they were chosen, not the options' order.
+        for (const value of chosen) {
+            const option = this.options().find((candidate) => this.optionValue(candidate) === value);
+            if (option)
+                labels.push(option.textContent?.trim() ?? value);
+        }
+        this.chips = labels;
+        this.warnAboutSeparators();
+    }
+    /**
+     * One warning naming every offending value.
+     *
+     * A value holding a comma cannot round-trip through `value`, and failing
+     * silently would show the right chips over a wrong submission.
+     */
+    warnAboutSeparators() {
+        if (this.warnedAboutSeparator)
+            return;
+        const offenders = valueList.assertSeparableValues(this.options().map((o) => this.optionValue(o)));
+        if (offenders.length === 0)
+            return;
+        this.warnedAboutSeparator = true;
+        console.warn(`[pf-multi-select] option values cannot contain a comma, because \`value\` is a ` +
+            `comma-separated list: ${offenders.join(' ')}`);
+    }
+    syncOpen(next, previous) {
+        if (next)
+            this.showListbox();
+        else
+            this.hideListbox();
+        if (next !== previous)
+            this.pfOpenChange.emit({ open: next });
+    }
+    async show() {
+        if (!this.disabled)
+            this.open = true;
+    }
+    async hide() {
+        this.open = false;
+    }
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    async getValidationMessage() {
+        return this.internals.validationMessage;
+    }
+    formResetCallback() {
+        this.value = this.initialValue;
+    }
+    /** Re-reads the options, for a label edited in place. */
+    async refresh() {
+        this.syncOptions();
+    }
+    onSlotChange = () => {
+        this.syncOptions();
+    };
+    values() {
+        return valueList.parseValueList(this.value);
+    }
+    options() {
+        return Array.from(this.el.querySelectorAll('pf-option'));
+    }
+    enabled() {
+        return this.options().filter((option) => !option.hasAttribute('disabled'));
+    }
+    /** The property, never the attribute: a binding may only have set the former. */
+    optionValue(option) {
+        return option.value ?? option.getAttribute('value') ?? '';
+    }
+    get listbox() {
+        return this.el.shadowRoot?.querySelector('[part="listbox"]') ?? null;
+    }
+    get trigger() {
+        return this.el.shadowRoot?.querySelector('[part="trigger"]') ?? null;
+    }
+    showListbox() {
+        const panel = this.listbox;
+        if (this.disabled || !panel || panel.matches(':popover-open'))
+            return;
+        panel.showPopover();
+        this.stopObserving?.();
+        this.stopObserving = placePopover.observeAnchoredPosition({
+            getAnchor: () => this.trigger,
+            getFloating: () => panel,
+            matchAnchorWidth: true,
+            flip: true,
+            onChange: ({ left, top, width, minWidth }) => {
+                placePopover.placePopover(panel, left, top);
+                if (width !== undefined)
+                    panel.style.width = `${width}px`;
+                if (minWidth !== undefined)
+                    panel.style.minWidth = `${minWidth}px`;
+            },
+        });
+        // Opens on the first chosen option, or the first selectable one.
+        const chosen = this.values();
+        const first = this.options().find((option) => chosen.includes(this.optionValue(option)) && !option.hasAttribute('disabled')) ?? this.enabled()[0];
+        this.setActive(first ?? null);
+    }
+    hideListbox() {
+        this.stopObserving?.();
+        this.stopObserving = undefined;
+        const panel = this.listbox;
+        if (panel?.matches(':popover-open'))
+            panel.hidePopover();
+    }
+    onToggle = (event) => {
+        const nowOpen = event.newState === 'open';
+        if (this.open !== nowOpen)
+            this.open = nowOpen;
+        if (!nowOpen)
+            this.trigger?.focus();
+    };
+    setActive(option) {
+        for (const other of this.options()) {
+            if (other !== option)
+                other.active = false;
+        }
+        if (option)
+            option.active = true;
+        this.activeOption = option;
+        this.syncActiveDescendant();
+        if (option && typeof option.scrollIntoView === 'function') {
+            option.scrollIntoView({ block: 'nearest' });
+        }
+    }
+    /** An element, not an IDREF: a cross-root IDREF resolves to nothing. */
+    syncActiveDescendant() {
+        const trigger = this.trigger;
+        if (!trigger || !('ariaActiveDescendantElement' in trigger))
+            return;
+        trigger.ariaActiveDescendantElement = this.open ? this.activeOption : null;
+    }
+    /**
+     * Toggles one value and keeps the listbox open — the difference from
+     * `pf-select`, and the whole point of a multi-choice control: closing after
+     * each pick would make choosing three things three round trips.
+     */
+    toggle(option) {
+        if (option.hasAttribute('disabled') || this.disabled)
+            return;
+        const next = valueList.toggleValueInList(this.values(), this.optionValue(option));
+        this.value = valueList.formatValueList(next);
+        this.pfChange.emit({ value: this.value, values: next });
+    }
+    handleOptionSelect(event) {
+        event.stopPropagation();
+        const option = this.options().find((candidate) => this.optionValue(candidate) === event.detail.value);
+        if (option)
+            this.toggle(option);
+    }
+    move(action) {
+        const options = this.options();
+        const enabledIndexes = navigation.getEnabledIndexes(options, (option) => option.hasAttribute('disabled'));
+        const current = this.activeOption ? options.indexOf(this.activeOption) : -1;
+        const next = navigation.resolveListMove(action, enabledIndexes, current);
+        if (next !== -1)
+            this.setActive(options[next] ?? null);
+    }
+    handleKeyDown(event) {
+        if (this.disabled || event.defaultPrevented)
+            return;
+        const move = MOVES[event.key];
+        if (move) {
+            event.preventDefault();
+            if (!this.open)
+                this.open = true;
+            else
+                this.move(move);
+            return;
+        }
+        if (keys.isActivationKey(event.key)) {
+            event.preventDefault();
+            if (!this.open)
+                this.open = true;
+            else if (this.activeOption)
+                this.toggle(this.activeOption);
+        }
+    }
+    render() {
+        const describedBy = aria.composeDescribedBy(this.description && 'description', this.error && 'error');
+        return (index.h(index.Host, { key: '84f645358443d6dc41515a835cf0c7136a6f2a30' }, index.h("div", { key: '2abaf9886654a5cef6756a4c566f61e37c7c876a', class: "field", part: "field" }, this.label && (index.h("label", { key: '76f9cf451c6fba652494862a0fa05e320a4790c4', class: "label", part: "label", htmlFor: "trigger" }, this.label, this.required && (index.h("span", { key: '9f4a8074bc2ef06ae7256267bab07d9baf52dc2c', class: "required", "aria-hidden": "true" }, "*")))), index.h("button", { key: 'a5a15ff1c857e6f727bc43131741ee95ba345efd', id: "trigger", "aria-label": controlLabel.controlAriaLabel(this.el, this.label), part: "trigger", class: { trigger: true, 'trigger--invalid': Boolean(this.error) }, type: "button", role: "combobox", disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "listbox", "aria-invalid": this.error ? 'true' : null, "aria-required": this.required ? 'true' : null, "aria-describedby": describedBy, onClick: () => {
+                if (!this.disabled)
+                    this.open = !this.open;
+            } }, this.chips.length > 0 ? (index.h("span", { class: "chips" }, this.chips.map((chip) => (index.h("span", { key: chip, class: "chip", part: "chip" }, chip))))) : (index.h("span", { class: "placeholder" }, this.placeholder)), index.h("span", { key: '9b662f3899c243059b07b4ecc0166b74b97501cc', class: "chevron", "aria-hidden": "true" }, index.h("pf-icon", { key: '5a869e8d9d1aa023e57ed556afc613544f54424f', name: "chevron-down" }))), this.description && (index.h("p", { key: 'd231f94ad697dc52d3115cf13c0b47f0b20045a6', class: "description", part: "description", id: "description" }, this.description)), this.error && (index.h("p", { key: 'dcc0995d743ea214575031de7225f0bce71aebb6', class: "error", part: "error", id: "error" }, this.error))), index.h("div", { key: 'c161c902c9859dd71dda4967dc4e074db29dd448', id: "listbox", part: "listbox", class: "listbox", popover: "auto", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label ?? this.placeholder, style: this.maxVisibleOptions
+                ? { maxHeight: `calc(${this.maxVisibleOptions} * 36px)`, overflowY: 'auto' }
+                : undefined, onToggle: this.onToggle }, index.h("slot", { key: '8fec52209e91211ba15d8c32f53d111b2058b76f', onSlotchange: this.onSlotChange }))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "name": [{
+                "syncFormState": 0
+            }],
+        "value": [{
+                "syncFormState": 0
+            }, {
+                "syncOptions": 0
+            }],
+        "error": [{
+                "syncFormState": 0
+            }],
+        "required": [{
+                "syncFormState": 0
+            }],
+        "open": [{
+                "syncOpen": 0
+            }]
+    }; }
+};
+PfMultiSelect.style = pfMultiSelectCss();
+
+exports.pf_multi_select = PfMultiSelect;
+//# sourceMappingURL=pf-multi-select.entry.cjs.js.map
+
+//# sourceMappingURL=pf-multi-select.cjs.entry.js.map

package/dist/cjs/pf-multi-select.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-multi-select.cjs.entry.js","mappings":"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","names":["Keys","applyControlValidity","assertSeparableValues","parseValueList","observeAnchoredPosition","placePopover","toggleValueInList","formatValueList","getEnabledIndexes","resolveListMove","isActivationKey","composeDescribedBy","h","Host","controlAriaLabel"],"sources":["src/components/pf-multi-select/pf-multi-select.css?tag=pf-multi-select&encapsulation=shadow","src/components/pf-multi-select/pf-multi-select.tsx"],"sourcesContent":["/*\n * The generic set pf-option reads, mapped to this control's own family — see\n * pf-option.css.\n */\n:host {\n  display: block;\n  --pf-option-text: var(--pf-multiselect-text);\n  --pf-option-text-disabled: var(--pf-multiselect-text-muted);\n  --pf-option-active-bg: var(--pf-multiselect-active-bg);\n  --pf-option-active-text: var(--pf-multiselect-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-multiselect-text);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-multiselect-invalid-border);\n  margin-inline-start: var(--space-1);\n}\n\n.trigger {\n  align-items: center;\n  background: var(--pf-multiselect-bg);\n  border: 1px solid var(--pf-multiselect-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-multiselect-text);\n  cursor: pointer;\n  display: flex;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  gap: var(--space-2);\n  justify-content: space-between;\n  padding: var(--space-2) var(--space-3);\n  text-align: start;\n  width: 100%;\n}\n\n.trigger:focus-visible {\n  border-color: var(--pf-multiselect-focus-border);\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.trigger--invalid {\n  border-color: var(--pf-multiselect-invalid-border);\n}\n\n.chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-1);\n  min-width: 0;\n}\n\n.chip {\n  background: var(--pf-multiselect-bg-subtle);\n  border-radius: var(--radius-sm);\n  font-size: var(--font-size-xs);\n  padding: 2px var(--space-2);\n}\n\n.placeholder {\n  color: var(--pf-multiselect-text-muted);\n}\n\n.chevron {\n  align-items: center;\n  display: inline-flex;\n  flex-shrink: 0;\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-multiselect-text-muted);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-multiselect-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-multiselect-bg);\n  border: 1px solid var(--pf-multiselect-border);\n  border-radius: var(--radius-md);\n  box-shadow: var(--pf-elevation-popover-shadow);\n  padding: var(--space-1);\n}\n\n.listbox:popover-open {\n  animation: pf-multi-select-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-multi-select-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","import {\n  composeDescribedBy,\n  formatValueList,\n  getEnabledIndexes,\n  isActivationKey,\n  Keys,\n  observeAnchoredPosition,\n  parseValueList,\n  resolveListMove,\n  toggleValueInList,\n  assertSeparableValues,\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 multi-choice select over `pf-option` children.\n *\n * **It submits one entry per chosen value from a single control.**\n * `setFormValue` takes a `FormData`, and a key repeated in it is submitted\n * once per value — measured, and the same shape the React component gets from\n * rendering one hidden `<input>` per selection. So a server reads\n * `data.getAll(name)` exactly as it would from a native multiple select.\n *\n * `value` is one comma-separated string, because that is what an attribute can\n * carry; `pfChange` also reports the parsed `values` array, which is what a\n * framework consumer usually wants. A value containing a comma cannot survive\n * that, so one is reported on the console rather than silently mangled.\n *\n * Shares `pf-option` with `pf-select` and `pf-combobox` through the generic\n * `--pf-option-*` set.\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 trigger - the combobox button.\n * @part chip - each chosen value's chip in the trigger.\n * @part listbox - the floating listbox the options are slotted into.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-multi-select',\n  styleUrl: 'pf-multi-select.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfMultiSelect {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Submitted under this name, once per chosen value. Reflected. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The chosen values, comma-separated. Reflected, so HTML can set it. */\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 = 'Select options';\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Options to show before the listbox scrolls. */\n  @Prop() maxVisibleOptions?: number;\n\n  /** Fires when the chosen set changes, with both representations. */\n  @Event() pfChange!: EventEmitter<{ value: string; values: string[] }>;\n\n  /** Fires whenever the listbox opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** The labels of the chosen options, for the trigger's chips. */\n  @State() chips: string[] = [];\n\n  private initialValue = '';\n  private stopObserving?: () => void;\n  private activeOption: HTMLElement | null = null;\n  private warnedAboutSeparator = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n    this.syncOptions();\n  }\n\n  componentDidRender() {\n    this.syncActiveDescendant();\n  }\n\n  disconnectedCallback() {\n    this.stopObserving?.();\n  }\n\n  /*\n   * `name` is watched here and not on the controls that pass a plain string to\n   * `setFormValue`: those take their submission name from the reflected\n   * attribute, so the platform picks a change up by itself. This one builds\n   * the name *into* a FormData, so without the watch a name assigned after\n   * load would never reach the submission.\n   */\n  @Watch('name')\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    const values = this.values();\n\n    if (values.length === 0 || !this.name) {\n      this.internals.setFormValue(null);\n    } else {\n      // One entry per value under the one name, which `data.getAll(name)`\n      // reads back as an array.\n      const data = new FormData();\n      for (const value of values) data.append(this.name, value);\n      this.internals.setFormValue(data);\n    }\n\n    applyControlValidity(this.internals, values.length > 0, this.required, this.error);\n  }\n\n  /** The value changed, so the children's `selected` and the chips follow. */\n  @Watch('value')\n  syncOptions() {\n    const chosen = this.values();\n    const labels: string[] = [];\n\n    for (const option of this.options()) {\n      const selected = chosen.includes(this.optionValue(option));\n      (option as HTMLElement & { selected: boolean }).selected = selected;\n    }\n\n    // Chips in the order they were chosen, not the options' order.\n    for (const value of chosen) {\n      const option = this.options().find((candidate) => this.optionValue(candidate) === value);\n      if (option) labels.push(option.textContent?.trim() ?? value);\n    }\n\n    this.chips = labels;\n    this.warnAboutSeparators();\n  }\n\n  /**\n   * One warning naming every offending value.\n   *\n   * A value holding a comma cannot round-trip through `value`, and failing\n   * silently would show the right chips over a wrong submission.\n   */\n  private warnAboutSeparators() {\n    if (this.warnedAboutSeparator) return;\n    const offenders = assertSeparableValues(this.options().map((o) => this.optionValue(o)));\n    if (offenders.length === 0) return;\n\n    this.warnedAboutSeparator = true;\n    console.warn(\n      `[pf-multi-select] option values cannot contain a comma, because \\`value\\` is a ` +\n        `comma-separated list: ${offenders.join(' ')}`,\n    );\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  }\n\n  /** Re-reads the options, for a label edited in place. */\n  @Method()\n  async refresh(): Promise<void> {\n    this.syncOptions();\n  }\n\n  private onSlotChange = () => {\n    this.syncOptions();\n  };\n\n  private values(): string[] {\n    return parseValueList(this.value);\n  }\n\n  private options(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-option'));\n  }\n\n  private enabled(): HTMLElement[] {\n    return this.options().filter((option) => !option.hasAttribute('disabled'));\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 get listbox() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"listbox\"]') ?? null;\n  }\n\n  private get trigger() {\n    return this.el.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"trigger\"]') ?? null;\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.trigger,\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    // Opens on the first chosen option, or the first selectable one.\n    const chosen = this.values();\n    const first =\n      this.options().find(\n        (option) => chosen.includes(this.optionValue(option)) && !option.hasAttribute('disabled'),\n      ) ?? this.enabled()[0];\n    this.setActive(first ?? null);\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  private onToggle = (event: ToggleEvent) => {\n    const nowOpen = event.newState === 'open';\n    if (this.open !== nowOpen) this.open = nowOpen;\n    if (!nowOpen) this.trigger?.focus();\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  /** An element, not an IDREF: a cross-root IDREF resolves to nothing. */\n  private syncActiveDescendant() {\n    const trigger = this.trigger;\n    if (!trigger || !('ariaActiveDescendantElement' in trigger)) return;\n    (\n      trigger as unknown as { ariaActiveDescendantElement: Element | null }\n    ).ariaActiveDescendantElement = this.open ? this.activeOption : null;\n  }\n\n  /**\n   * Toggles one value and keeps the listbox open — the difference from\n   * `pf-select`, and the whole point of a multi-choice control: closing after\n   * each pick would make choosing three things three round trips.\n   */\n  private toggle(option: HTMLElement) {\n    if (option.hasAttribute('disabled') || this.disabled) return;\n\n    const next = toggleValueInList(this.values(), this.optionValue(option));\n    this.value = formatValueList(next);\n    this.pfChange.emit({ value: this.value, values: next });\n  }\n\n  @Listen('pfOptionSelect')\n  handleOptionSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    const option = this.options().find(\n      (candidate) => this.optionValue(candidate) === event.detail.value,\n    );\n    if (option) this.toggle(option);\n  }\n\n  private move(action: ListNavigationAction) {\n    const options = this.options();\n    const enabledIndexes = getEnabledIndexes(options, (option) => option.hasAttribute('disabled'));\n    const current = this.activeOption ? options.indexOf(this.activeOption) : -1;\n    const next = resolveListMove(action, enabledIndexes, current);\n    if (next !== -1) this.setActive(options[next] ?? null);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled || event.defaultPrevented) 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    if (isActivationKey(event.key)) {\n      event.preventDefault();\n      if (!this.open) this.open = true;\n      else if (this.activeOption) this.toggle(this.activeOption);\n    }\n  }\n\n  render() {\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"trigger\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n\n          <button\n            id=\"trigger\"\n            aria-label={controlAriaLabel(this.el, this.label)}\n            part=\"trigger\"\n            class={{ trigger: true, 'trigger--invalid': Boolean(this.error) }}\n            type=\"button\"\n            role=\"combobox\"\n            disabled={this.disabled}\n            aria-haspopup=\"listbox\"\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-required={this.required ? 'true' : null}\n            aria-describedby={describedBy}\n            onClick={() => {\n              if (!this.disabled) this.open = !this.open;\n            }}\n          >\n            {this.chips.length > 0 ? (\n              <span class=\"chips\">\n                {this.chips.map((chip) => (\n                  <span key={chip} class=\"chip\" part=\"chip\">\n                    {chip}\n                  </span>\n                ))}\n              </span>\n            ) : (\n              <span class=\"placeholder\">{this.placeholder}</span>\n            )}\n            <span class=\"chevron\" aria-hidden=\"true\">\n              <pf-icon name=\"chevron-down\"></pf-icon>\n            </span>\n          </button>\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          /* The one ARIA difference from pf-select, and the important one. */\n          aria-multiselectable=\"true\"\n          aria-label={this.label ?? this.placeholder}\n          style={\n            this.maxVisibleOptions\n              ? { maxHeight: `calc(${this.maxVisibleOptions} * 36px)`, overflowY: 'auto' }\n              : undefined\n          }\n          onToggle={this.onToggle}\n        >\n          <slot onSlotchange={this.onSlotChange} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pf-nav-item.cjs.entry.js

@@ -0,0 +1,83 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+
+const pfNavItemCss = () => `:host{display:block}:host([hidden]){display:none}:host([orientation='horizontal']){flex:0 0 auto}.link{align-items:center;background:transparent;border:0;border-radius:var(--pf-nav-item-radius, var(--radius-sm));color:var(--pf-nav-item-text);cursor:pointer;display:flex;font:inherit;gap:var(--pf-nav-item-gap, var(--space-2));min-height:var(--pf-nav-item-min-height, 32px);padding:var(--pf-nav-item-padding, 0 var(--space-2));text-decoration:none;white-space:nowrap}:host([orientation='vertical']) .link{min-height:var(--pf-nav-item-vertical-min-height, 36px);padding:var(--pf-nav-item-vertical-padding, 0 var(--space-3));width:100%}.link:hover{background:var(--pf-nav-item-hover-bg);color:var(--pf-nav-item-hover-text)}a.link:focus-visible{box-shadow:var(--pf-nav-item-focus-ring, var(--pf-focus-ring));outline:none}:host([current-page]) .link{background:var(--pf-nav-item-current-bg);color:var(--pf-nav-item-current-text);font-weight:var(--font-weight-semibold)}:host([disabled]) .link{cursor:not-allowed;opacity:var(--pf-nav-item-disabled-opacity, 0.5)}:host([disabled]) .link:hover{background:transparent;color:var(--pf-nav-item-text)}.label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}:host([orientation='horizontal']) .label{flex:0 0 auto}::slotted([slot='icon']){color:inherit;flex:0 0 auto}::slotted([slot='badge']){flex:0 0 auto}::slotted(a),::slotted(button){align-items:center;align-self:stretch;background:none;border:0;color:inherit;cursor:inherit;display:flex;flex:1 1 auto;font:inherit;margin:0;padding:0;text-decoration:none}`;
+
+const PfNavItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfNavStructure = index.createEvent(this, "pfNavStructure");
+    }
+    /** Where the item goes. Reflected; a consumer's stylesheet reads it. */
+    href;
+    /** Opens elsewhere, as on a plain anchor. Ignored without an `href`. */
+    target;
+    /** Goes on the anchor as-is. Ignored without an `href`. */
+    rel;
+    /**
+     * Set it to mark this item as the current page.
+     *
+     * The *asking* half, which the group never writes — `currentPage` below is
+     * the answer. The two are kept apart for the reason `pf-breadcrumb` keeps
+     * them apart: a group that wrote its answer back would leave the mark
+     * behind on an item the consumer had not marked.
+     */
+    current = false;
+    /**
+     * Tells the group the ask changed, so it can resolve again.
+     *
+     * The same event `pf-nav-section` emits when its items move, because the
+     * groups do the same thing with both: re-read every item and resolve the
+     * one current page. Without this a navigation resolves at load and never
+     * again for a consumer who marks items through the *property*, which is
+     * every framework consumer — the generated bindings set props as
+     * properties, so there is no attribute change and no `slotchange` either.
+     * The symptom is a navigation whose highlight never moves while the router
+     * works perfectly, which is what porting `apps/demo` ran into.
+     *
+     * `current` only. Watching `currentPage` would loop, since that is what the
+     * group writes back.
+     */
+    pfNavStructure;
+    handleCurrentChange() {
+        this.pfNavStructure.emit();
+    }
+    /**
+     * Set by the group: the resolved current page, which is the one thing that
+     * renders `aria-current="page"`. At most one item in a navigation carries
+     * it, and the highlight follows it rather than `current` — a second
+     * highlighted item with no `aria-current` would be a sighted-only lie.
+     */
+    currentPage = false;
+    /**
+     * Takes the item out of the navigation without removing it.
+     *
+     * A disabled item renders **no anchor at all**, because an anchor has no
+     * disabled state: `aria-disabled` alone leaves it focusable and clickable,
+     * and dropping the `href` is the only thing that really takes it out of the
+     * tab order.
+     */
+    disabled = false;
+    /** Set by the group, which is the only one that knows which it is. */
+    orientation = 'horizontal';
+    render() {
+        const content = [
+            index.h("slot", { key: 'b478a66b7ae6c6d00b18f762600435dbac37996d', name: "icon" }),
+            index.h("span", { key: '4b1ddbe87804c604d492b00bbc743299c54f7240', class: "label", part: "label" }, index.h("slot", { key: '86778db42fef8af44096211cd8a743155dca3fb0' })),
+            index.h("slot", { key: '02fef2701ef217701ce18e71e9ff873dc3bd3a44', name: "badge" }),
+        ];
+        return (index.h(index.Host, { key: 'c4ee7f6245eedd2bf0546ebcb987120212ea18e3', role: "listitem" }, this.href && !this.disabled ? (index.h("a", { class: "link", part: "link", href: this.href, target: this.target, rel: this.rel, "aria-current": this.currentPage ? 'page' : null }, content)) : (index.h("span", { class: "link", part: "link", "aria-current": this.currentPage ? 'page' : null, "aria-disabled": this.disabled ? 'true' : null }, content))));
+    }
+    static get watchers() { return {
+        "current": [{
+                "handleCurrentChange": 0
+            }]
+    }; }
+};
+PfNavItem.style = pfNavItemCss();
+
+exports.pf_nav_item = PfNavItem;
+//# sourceMappingURL=pf-nav-item.entry.cjs.js.map
+
+//# sourceMappingURL=pf-nav-item.cjs.entry.js.map

package/dist/cjs/pf-nav-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-nav-item.cjs.entry.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,0hDAA0hD,CAAC;;MC+B1iD,SAAS,GAAA,MAAA;;;;;;AAEK,IAAA,IAAI;;AAGrB,IAAA,MAAM;;AAGN,IAAA,GAAG;AAEX;;;;;;;AAOG;IACsB,OAAO,GAAG,KAAK;AAExC;;;;;;;;;;;;;;AAcG;AACM,IAAA,cAAc;IAGvB,mBAAmB,GAAA;AACjB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE;;AAG5B;;;;;AAKG;IACqC,WAAW,GAAG,KAAK;AAE3D;;;;;;;AAOG;IACsB,QAAQ,GAAG,KAAK;;IAGD,WAAW,GAA8B,YAAY;IAE7F,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAAA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG;YACpBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC9BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH;AACP,YAAAA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG;SACtB;AAED,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,UAAU,EAAA,EAClB,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAC1BD,OAAA,CAAA,GAAA,EAAA,EACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EAAA,cAAA,EACC,IAAI,CAAC,WAAW,GAAG,MAAM,GAAG,IAAI,IAE7C,OAAO,CACN,KAEJA,OAAA,CAAA,MAAA,EAAA,EACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,EAAA,cAAA,EACG,IAAI,CAAC,WAAW,GAAG,MAAM,GAAG,IAAI,EAAA,eAAA,EAC/B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAAA,EAE3C,OAAO,CACH,CACR,CACI;;;;;;;;;;;;","names":["h","Host"],"sources":["src/components/pf-nav-item/pf-nav-item.css?tag=pf-nav-item&encapsulation=shadow","src/components/pf-nav-item/pf-nav-item.tsx"],"sourcesContent":["/*\n * This element is shared by pf-header-navigation and pf-sidebar-navigation,\n * whose React counterparts have separate alias families with their own\n * values. Rather than pick one and diverge from the other, the item reads a\n * generic `--pf-nav-item-*` set that each navigation defines on itself --\n * custom properties inherit through the shadow boundary, so a slotted item\n * picks up whichever navigation it is inside, which no selector can do\n * (`:host-context` is not in Firefox). Exactly the pf-option arrangement, for\n * the same reason. There is deliberately no `:root` default: without one the\n * bridge is load-bearing, and a missing one shows up as an item with no\n * colours at all rather than as one that quietly looks right.\n */\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([orientation='horizontal']) {\n  flex: 0 0 auto;\n}\n\n.link {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  border-radius: var(--pf-nav-item-radius, var(--radius-sm));\n  color: var(--pf-nav-item-text);\n  cursor: pointer;\n  display: flex;\n  font: inherit;\n  gap: var(--pf-nav-item-gap, var(--space-2));\n  min-height: var(--pf-nav-item-min-height, 32px);\n  padding: var(--pf-nav-item-padding, 0 var(--space-2));\n  text-decoration: none;\n  white-space: nowrap;\n}\n\n:host([orientation='vertical']) .link {\n  min-height: var(--pf-nav-item-vertical-min-height, 36px);\n  padding: var(--pf-nav-item-vertical-padding, 0 var(--space-3));\n  width: 100%;\n}\n\n.link:hover {\n  background: var(--pf-nav-item-hover-bg);\n  color: var(--pf-nav-item-hover-text);\n}\n\na.link:focus-visible {\n  box-shadow: var(--pf-nav-item-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n/*\n * `current-page` is the group's answer, not the consumer's `current` ask: the\n * highlight and the announcement are the same decision, so they read the same\n * attribute.\n */\n:host([current-page]) .link {\n  background: var(--pf-nav-item-current-bg);\n  color: var(--pf-nav-item-current-text);\n  font-weight: var(--font-weight-semibold);\n}\n\n:host([disabled]) .link {\n  cursor: not-allowed;\n  opacity: var(--pf-nav-item-disabled-opacity, 0.5);\n}\n\n:host([disabled]) .link:hover {\n  background: transparent;\n  color: var(--pf-nav-item-text);\n}\n\n/* The label takes the slack so a badge sits at the far edge of a sidebar. */\n.label {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n:host([orientation='horizontal']) .label {\n  flex: 0 0 auto;\n}\n\n/*\n * No wrapper around the icon and badge slots: an unassigned slot is\n * `display: contents` and generates nothing, while a wrapper around one\n * cannot be collapsed from CSS and would cost a gap in front of every label\n * with no icon.\n */\n::slotted([slot='icon']) {\n  color: inherit;\n  flex: 0 0 auto;\n}\n\n::slotted([slot='badge']) {\n  flex: 0 0 auto;\n}\n\n/*\n * A consumer's own router link, slotted in with no `href` of ours. It fills\n * the box's content area rather than being a word inside it, and it inherits\n * every colour the box resolved, so hover and the current page look the same\n * whichever of the two is the control.\n */\n::slotted(a),\n::slotted(button) {\n  align-items: center;\n  align-self: stretch;\n  background: none;\n  border: 0;\n  color: inherit;\n  cursor: inherit;\n  display: flex;\n  flex: 1 1 auto;\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  text-decoration: none;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, Watch } from '@stencil/core';\n\n/**\n * One item in a `pf-header-navigation` or a `pf-sidebar-navigation`.\n *\n * Shared by both, because the React library's `HeaderNavigationItem` and\n * `SidebarNavigationItem` are the same shape — one element rather than two\n * that would drift. What differs is the layout, and that is the group's to\n * say: it pushes `orientation` down, which is the only thing an item cannot\n * work out for itself.\n *\n * With an `href` it renders a link; without one it renders a plain box, which\n * is how a framework's own router is used — slot an `<a routerLink>` or a\n * `<Link>` in and leave `href` unset.\n *\n * `currentPage` and `orientation` are the group's to set. A consumer asks by\n * setting `current`; the group resolves every item with core's rule and\n * writes the answer to `currentPage`. Changing the ask tells the group, so\n * the answer follows a framework's re-render without the consumer calling\n * anything.\n *\n * @slot - the item's label.\n * @slot icon - a leading icon.\n * @slot badge - a trailing badge or count.\n * @part link - the link, or the box standing in for one.\n */\n@Component({\n  tag: 'pf-nav-item',\n  styleUrl: 'pf-nav-item.css',\n  shadow: true,\n})\nexport class PfNavItem {\n  /** Where the item goes. Reflected; a consumer's stylesheet reads it. */\n  @Prop({ reflect: true }) href?: string;\n\n  /** Opens elsewhere, as on a plain anchor. Ignored without an `href`. */\n  @Prop() target?: string;\n\n  /** Goes on the anchor as-is. Ignored without an `href`. */\n  @Prop() rel?: string;\n\n  /**\n   * Set it to mark this item as the current page.\n   *\n   * The *asking* half, which the group never writes — `currentPage` below is\n   * the answer. The two are kept apart for the reason `pf-breadcrumb` keeps\n   * them apart: a group that wrote its answer back would leave the mark\n   * behind on an item the consumer had not marked.\n   */\n  @Prop({ reflect: true }) current = false;\n\n  /**\n   * Tells the group the ask changed, so it can resolve again.\n   *\n   * The same event `pf-nav-section` emits when its items move, because the\n   * groups do the same thing with both: re-read every item and resolve the\n   * one current page. Without this a navigation resolves at load and never\n   * again for a consumer who marks items through the *property*, which is\n   * every framework consumer — the generated bindings set props as\n   * properties, so there is no attribute change and no `slotchange` either.\n   * The symptom is a navigation whose highlight never moves while the router\n   * works perfectly, which is what porting `apps/demo` ran into.\n   *\n   * `current` only. Watching `currentPage` would loop, since that is what the\n   * group writes back.\n   */\n  @Event() pfNavStructure!: EventEmitter<void>;\n\n  @Watch('current')\n  handleCurrentChange() {\n    this.pfNavStructure.emit();\n  }\n\n  /**\n   * Set by the group: the resolved current page, which is the one thing that\n   * renders `aria-current=\"page\"`. At most one item in a navigation carries\n   * it, and the highlight follows it rather than `current` — a second\n   * highlighted item with no `aria-current` would be a sighted-only lie.\n   */\n  @Prop({ mutable: true, reflect: true }) currentPage = false;\n\n  /**\n   * Takes the item out of the navigation without removing it.\n   *\n   * A disabled item renders **no anchor at all**, because an anchor has no\n   * disabled state: `aria-disabled` alone leaves it focusable and clickable,\n   * and dropping the `href` is the only thing that really takes it out of the\n   * tab order.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set by the group, which is the only one that knows which it is. */\n  @Prop({ mutable: true, reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  render() {\n    const content = [\n      <slot name=\"icon\" />,\n      <span class=\"label\" part=\"label\">\n        <slot />\n      </span>,\n      <slot name=\"badge\" />,\n    ];\n\n    return (\n      <Host role=\"listitem\">\n        {this.href && !this.disabled ? (\n          <a\n            class=\"link\"\n            part=\"link\"\n            href={this.href}\n            target={this.target}\n            rel={this.rel}\n            aria-current={this.currentPage ? 'page' : null}\n          >\n            {content}\n          </a>\n        ) : (\n          <span\n            class=\"link\"\n            part=\"link\"\n            aria-current={this.currentPage ? 'page' : null}\n            aria-disabled={this.disabled ? 'true' : null}\n          >\n            {content}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pf-nav-section.cjs.entry.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+
+const pfNavSectionCss = () => `:host{display:grid;gap:var(--space-1)}:host([hidden]){display:none}.title{color:var(--pf-sidebar-nav-text-muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:0.04em;margin:0;padding:0 var(--space-2);text-transform:uppercase}.title.empty{display:none}.list{display:grid;gap:2px;list-style:none;margin:0;padding:0}.list slot{display:contents}`;
+
+const PfNavSection = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfNavStructure = index.createEvent(this, "pfNavStructure");
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * Whether anything was slotted into `title`.
+     *
+     * Asked in JS because the box carries padding and a size of its own, and
+     * because an `aria-labelledby` pointing at an empty element names the list
+     * with an empty string rather than falling back to nothing.
+     */
+    hasTitle = false;
+    /**
+     * Tells the navigation its items have moved.
+     *
+     * `slotchange` is not composed, so the navigation never hears this
+     * section's own slot change — exactly the reason `pf-tree-item` emits
+     * `pfTreeStructure`. Without it an item appended to a section is never
+     * given an orientation or a place in the one-current resolution.
+     */
+    pfNavStructure;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad() {
+        this.readTitle();
+    }
+    readTitle() {
+        /*
+         * `el.children` rather than a `:scope >` selector, which Stencil's mock
+         * DOM throws on.
+         */
+        this.hasTitle = Array.from(this.el.children).some((child) => child.getAttribute('slot') === 'title');
+    }
+    handleSlotChange() {
+        this.readTitle();
+        this.pfNavStructure.emit();
+    }
+    render() {
+        return (index.h(index.Host, { key: '403390422ffe79fd7074cf127380b4c01f06e64c' }, index.h("p", { key: '9da8bd54057acfdbcc8b05e843557ea13792e98c', class: { title: true, empty: !this.hasTitle }, part: "title", id: "title" }, index.h("slot", { key: 'f5d6f38608e937f8842d0e2e5bf19773f38df1bd', name: "title", onSlotchange: () => this.handleSlotChange() })), index.h("ul", { key: '536b579b106d4bc926a2ea309157e50dddc563c1', class: "list", part: "list", "aria-labelledby": this.hasTitle ? 'title' : null }, index.h("slot", { key: 'f80ef7903620ff32262dc8995f73ecb1c4971c57', onSlotchange: () => this.handleSlotChange() }))));
+    }
+};
+PfNavSection.style = pfNavSectionCss();
+
+exports.pf_nav_section = PfNavSection;
+//# sourceMappingURL=pf-nav-section.entry.cjs.js.map
+
+//# sourceMappingURL=pf-nav-section.cjs.entry.js.map

package/dist/cjs/pf-nav-section.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-nav-section.cjs.entry.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,4XAA4X,CAAC;;MCyB/Y,YAAY,GAAA,MAAA;;;;;;AAGvB;;;;;;AAMG;IACM,QAAQ,GAAG,KAAK;AAEzB;;;;;;;AAOG;AACM,IAAA,cAAc;;IAGvB,iBAAiB,GAAA;QACf,IAAI,CAAC,SAAS,EAAE;;IAGV,SAAS,GAAA;AACf;;;AAGG;AACH,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAC/C,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,OAAO,CAClD;;IAGK,gBAAgB,GAAA;QACtB,IAAI,CAAC,SAAS,EAAE;AAChB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE;;IAG5B,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAMHD,OAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,EAAA,EACvEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAC,YAAY,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,GAAI,CAChE,EAEJA,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,iBAAA,EAAkB,IAAI,CAAC,QAAQ,GAAG,OAAO,GAAG,IAAI,EAAA,EAC1EA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,YAAY,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,EAAA,CAAI,CAClD,CACA;;;;;;;","names":["h","Host"],"sources":["src/components/pf-nav-section/pf-nav-section.css?tag=pf-nav-section&encapsulation=shadow","src/components/pf-nav-section/pf-nav-section.tsx"],"sourcesContent":[":host {\n  display: grid;\n  gap: var(--space-1);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.title {\n  color: var(--pf-sidebar-nav-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: 0 var(--space-2);\n  text-transform: uppercase;\n}\n\n/*\n * Both classes rather than a bare `.empty`, so the rule does not depend on\n * sitting below the `display` the box sets on itself.\n */\n.title.empty {\n  display: none;\n}\n\n.list {\n  display: grid;\n  gap: 2px;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/* The items are grid children of the list, not of a box inside it. */\n.list slot {\n  display: contents;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, State } from '@stencil/core';\n\n/**\n * A titled group of `pf-nav-item` children inside a `pf-sidebar-navigation`.\n *\n * The React `SidebarNavigation` takes a `sections` array of `{ title, items }`.\n * Grouping slotted children has to be structural — one `<slot>` renders every\n * assigned child in source order, and a shadow root cannot wrap a subset of\n * them in a box — so the consumer nests, which is the §2.1 idiom and the same\n * answer `pf-command-group` gives.\n *\n * The title names the list with a **same-root** IDREF: both the title and the\n * `<ul>` are in this shadow root, so the reference resolves. An\n * `aria-labelledby` from the host could not point at either of them.\n *\n * @slot - the `pf-nav-item` children.\n * @slot title - the section's title.\n * @part title - the title's box.\n * @part list - the list the items are slotted into.\n */\n@Component({\n  tag: 'pf-nav-section',\n  styleUrl: 'pf-nav-section.css',\n  shadow: true,\n})\nexport class PfNavSection {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Whether anything was slotted into `title`.\n   *\n   * Asked in JS because the box carries padding and a size of its own, and\n   * because an `aria-labelledby` pointing at an empty element names the list\n   * with an empty string rather than falling back to nothing.\n   */\n  @State() hasTitle = false;\n\n  /**\n   * Tells the navigation its items have moved.\n   *\n   * `slotchange` is not composed, so the navigation never hears this\n   * section's own slot change — exactly the reason `pf-tree-item` emits\n   * `pfTreeStructure`. Without it an item appended to a section is never\n   * given an orientation or a place in the one-current resolution.\n   */\n  @Event() pfNavStructure!: EventEmitter<void>;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.readTitle();\n  }\n\n  private readTitle() {\n    /*\n     * `el.children` rather than a `:scope >` selector, which Stencil's mock\n     * DOM throws on.\n     */\n    this.hasTitle = Array.from(this.el.children).some(\n      (child) => child.getAttribute('slot') === 'title',\n    );\n  }\n\n  private handleSlotChange() {\n    this.readTitle();\n    this.pfNavStructure.emit();\n  }\n\n  render() {\n    return (\n      <Host>\n        {/*\n          The slot stays in the tree whether or not it holds anything: a slot\n          that is not rendered never fires `slotchange`, so a title added\n          later would stay invisible for good.\n        */}\n        <p class={{ title: true, empty: !this.hasTitle }} part=\"title\" id=\"title\">\n          <slot name=\"title\" onSlotchange={() => this.handleSlotChange()} />\n        </p>\n\n        <ul class=\"list\" part=\"list\" aria-labelledby={this.hasTitle ? 'title' : null}>\n          <slot onSlotchange={() => this.handleSlotChange()} />\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pf-notification.cjs.entry.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var aria = require('./aria-5oCPUGFo.js');
+var icons = require('./icons-Db3Bk5fj.js');
+var motion = require('./motion-Bjlaq-ac.js');
+
+const pfNotificationCss = () => `:host{display:block}:host([hidden]){display:none}.notification{align-items:flex-start;background:var(--pf-notification-bg);border:1px solid var(--pf-notification-border);border-radius:var(--radius-md);box-shadow:var(--pf-notification-elevation-floating-shadow, var(--pf-elevation-floating-shadow));color:var(--pf-notification-text);display:grid;gap:var(--space-3);grid-template-columns:auto minmax(0, 1fr) auto;padding:var(--space-3);width:100%;animation:pf-notification-in var(--pf-transition-enter)}@media (min-width: 768px){.notification{padding:var(--space-4)}}@keyframes pf-notification-in{from{opacity:0;transform:translateX(12px)}}:host([exiting]) .notification{animation:pf-notification-out var(--duration-moderate) var(--easing-accelerate) forwards;overflow:hidden;pointer-events:none}@keyframes pf-notification-out{from{opacity:1;transform:translateX(0);max-height:480px}to{opacity:0;transform:translateX(100%);max-height:0;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0}}@media (prefers-reduced-motion: reduce){.notification,:host([exiting]) .notification{animation:none}}:host([variant='info']) .notification{background:color-mix(     in srgb,     var(--pf-notification-info-bg) 45%,     var(--pf-notification-mix-base)   );border-color:var(--pf-notification-info-border)}:host([variant='success']) .notification{background:color-mix(     in srgb,     var(--pf-notification-success-bg) 45%,     var(--pf-notification-mix-base)   );border-color:var(--pf-notification-success-border)}:host([variant='warning']) .notification{background:color-mix(     in srgb,     var(--pf-notification-warning-bg) 45%,     var(--pf-notification-mix-base)   );border-color:var(--pf-notification-warning-border)}:host([variant='danger']) .notification{background:color-mix(     in srgb,     var(--pf-notification-danger-bg) 45%,     var(--pf-notification-mix-base)   );border-color:var(--pf-notification-danger-border)}.icon{align-items:center;display:inline-flex;font-size:var(--font-size-lg);height:1em;justify-content:center;line-height:1;margin-top:2px;width:1em}:host([variant='info']) .icon{color:var(--pf-notification-info-icon)}:host([variant='success']) .icon{color:var(--pf-notification-success-icon)}:host([variant='warning']) .icon{color:var(--pf-notification-warning-icon)}:host([variant='danger']) .icon{color:var(--pf-notification-danger-icon)}.content{display:grid;gap:var(--space-1);min-width:0}.title{color:var(--pf-notification-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:1.35;margin:0}:host([variant='info']) .title{color:var(--pf-notification-info-title)}.body{color:var(--pf-notification-text-muted);font-size:var(--font-size-sm);line-height:1.45}:host([variant='info']) .body{color:var(--pf-notification-info-icon)}.body[hidden]{display:none}slot[name='action']::slotted(*){margin-top:var(--space-2)}.dismiss{align-items:center;align-self:flex-start;background:transparent;border:0;border-radius:var(--radius-sm);color:var(--pf-notification-text-muted);cursor:pointer;display:inline-flex;height:28px;justify-content:center;width:28px}:host([variant='info']) .dismiss{color:var(--pf-notification-info-icon)}.dismiss:hover,.dismiss:focus-visible{background:var(--pf-notification-bg-subtle);color:var(--pf-notification-text);outline:none}:host([variant='info']) .dismiss:hover,:host([variant='info']) .dismiss:focus-visible{background:var(--pf-notification-info-hover-bg);color:var(--pf-notification-info-hover-icon)}`;
+
+const PfNotification = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfDismiss = index.createEvent(this, "pfDismiss");
+    }
+    get el() { return index.getElement(this); }
+    /** Severity. Reflected, because the stylesheet selects on it. */
+    variant = 'info';
+    /** The bold first line. */
+    heading;
+    /** The body, when nothing is slotted. */
+    description;
+    /** Render the dismiss button. */
+    dismissable = false;
+    /** Set while the exit animation plays. Reflected for the stylesheet. */
+    exiting = false;
+    /**
+     * Fires once the notification has finished leaving, which is the point at
+     * which its owner should remove it from the DOM.
+     */
+    pfDismiss;
+    hasSlottedBody = false;
+    componentWillLoad() {
+        this.readBody();
+    }
+    /**
+     * Starts the exit animation and resolves when it has finished, having
+     * emitted `pfDismiss`. Calling it twice is harmless.
+     */
+    async dismiss() {
+        if (this.exiting)
+            return;
+        this.exiting = true;
+        await this.waitForExit();
+        this.pfDismiss.emit();
+    }
+    /**
+     * Waits for the exit animation, or returns straight away when there is not
+     * one. Core's, so `pf-alert` and the React `useExitAnimation` wait the same
+     * way — and none of them waits on a guessed duration.
+     */
+    async waitForExit() {
+        await motion.animationsFinished(this.el.shadowRoot?.querySelector('.notification'));
+    }
+    readBody() {
+        this.hasSlottedBody = Array.from(this.el.childNodes).some((node) => node.nodeType === Node.ELEMENT_NODE
+            ? !node.getAttribute('slot')
+            : Boolean(node.textContent?.trim()));
+    }
+    render() {
+        return (index.h(index.Host, { key: '9de454e456c98762a879e0f1e108a0a8367dbc2e' }, index.h("div", { key: '60b5e41a64035032f4a3096c0d2fee0ede545753', class: "notification", part: "notification", role: aria.liveRegionRole(this.variant) }, index.h("span", { key: '3294482f4cc196ed29b5378664eb4724f0d41dc2', class: "icon", part: "icon", "aria-hidden": "true" }, index.h("slot", { key: '1c2d8970cbd0b7a4e90dc10ec60fa3d9160c690a', name: "icon" }, index.h("pf-icon", { key: '83470033a1b36b3c0fd44db1e6dc0eb14d2d7b6d', name: icons.severityIconName(this.variant) }))), index.h("div", { key: '61f69fbe020dfc1be756e50d1eec26e78a74c117', class: "content" }, this.heading && (index.h("p", { key: '99cb65b4ea18b954a5297d3179cb0e0fa1289f1b', class: "title", part: "title" }, this.heading)), index.h("div", { key: 'da4e2ff62296f30097110b136f08e0fe48f196ee', class: "body", part: "body", hidden: !this.hasSlottedBody && !this.description }, index.h("slot", { key: '745fd458de689740eba54922790b2826a59abec7', onSlotchange: () => this.readBody() }, this.description)), index.h("slot", { key: 'af0385dd7accef3853fb861bd796592ecb0abd25', name: "action" })), this.dismissable && (index.h("button", { key: 'ef0abf4e61771983746f9fc8e1ae1cb89e54fd0c', class: "dismiss", part: "dismiss", type: "button", "aria-label": "Dismiss notification", onClick: () => this.dismiss() }, index.h("svg", { key: '5b9685008b5afc7443bc7cbc05d5cc85f8673875', viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": "true", focusable: "false" }, index.h("path", { key: 'afb4ecdec4e8cdfc5f6060e7a63b330f87d409a6', d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", fill: "none" })))))));
+    }
+};
+PfNotification.style = pfNotificationCss();
+
+exports.pf_notification = PfNotification;
+//# sourceMappingURL=pf-notification.entry.cjs.js.map
+
+//# sourceMappingURL=pf-notification.cjs.entry.js.map