@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/collection/components/pf-multi-select/pf-multi-select.js.map

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

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

@@ -0,0 +1,125 @@
+/*
+ * This element is shared by pf-header-navigation and pf-sidebar-navigation,
+ * whose React counterparts have separate alias families with their own
+ * values. Rather than pick one and diverge from the other, the item reads a
+ * generic `--pf-nav-item-*` set that each navigation defines on itself --
+ * custom properties inherit through the shadow boundary, so a slotted item
+ * picks up whichever navigation it is inside, which no selector can do
+ * (`:host-context` is not in Firefox). Exactly the pf-option arrangement, for
+ * the same reason. There is deliberately no `:root` default: without one the
+ * bridge is load-bearing, and a missing one shows up as an item with no
+ * colours at all rather than as one that quietly looks right.
+ */
+: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;
+}
+
+/*
+ * `current-page` is the group's answer, not the consumer's `current` ask: the
+ * highlight and the announcement are the same decision, so they read the same
+ * attribute.
+ */
+: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);
+}
+
+/* The label takes the slack so a badge sits at the far edge of a sidebar. */
+.label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:host([orientation='horizontal']) .label {
+  flex: 0 0 auto;
+}
+
+/*
+ * No wrapper around the icon and badge slots: an unassigned slot is
+ * `display: contents` and generates nothing, while a wrapper around one
+ * cannot be collapsed from CSS and would cost a gap in front of every label
+ * with no icon.
+ */
+::slotted([slot='icon']) {
+  color: inherit;
+  flex: 0 0 auto;
+}
+
+::slotted([slot='badge']) {
+  flex: 0 0 auto;
+}
+
+/*
+ * A consumer's own router link, slotted in with no `href` of ours. It fills
+ * the box's content area rather than being a word inside it, and it inherits
+ * every colour the box resolved, so hover and the current page look the same
+ * whichever of the two is the control.
+ */
+::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;
+}

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

@@ -0,0 +1,220 @@
+import { h, Host } from "@stencil/core";
+/**
+ * One item in a `pf-header-navigation` or a `pf-sidebar-navigation`.
+ *
+ * Shared by both, because the React library's `HeaderNavigationItem` and
+ * `SidebarNavigationItem` are the same shape — one element rather than two
+ * that would drift. What differs is the layout, and that is the group's to
+ * say: it pushes `orientation` down, which is the only thing an item cannot
+ * work out for itself.
+ *
+ * With an `href` it renders a link; without one it renders a plain box, which
+ * is how a framework's own router is used — slot an `<a routerLink>` or a
+ * `<Link>` in and leave `href` unset.
+ *
+ * `currentPage` and `orientation` are the group's to set. A consumer asks by
+ * setting `current`; the group resolves every item with core's rule and
+ * writes the answer to `currentPage`.
+ *
+ * @slot - the item's label.
+ * @slot icon - a leading icon.
+ * @slot badge - a trailing badge or count.
+ * @part link - the link, or the box standing in for one.
+ */
+export class PfNavItem {
+    /** 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;
+    /**
+     * 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 = [
+            h("slot", { key: '35769e4f7edb3524591111fd8c78eca5a6ae5e76', name: "icon" }),
+            h("span", { key: '201e0efd80af4ec26fde67d5c90fbf47d2f8f16f', class: "label", part: "label" }, h("slot", { key: 'bf2ada457257d25f3a054beb41133e872585a26b' })),
+            h("slot", { key: 'c807ea3208d83e9f205392aa655a35e211c75e3e', name: "badge" }),
+        ];
+        return (h(Host, { key: 'ad28038cf786d9c8431e1da725305cceacac5a15', role: "listitem" }, this.href && !this.disabled ? (h("a", { class: "link", part: "link", href: this.href, target: this.target, rel: this.rel, "aria-current": this.currentPage ? 'page' : null }, content)) : (h("span", { class: "link", part: "link", "aria-current": this.currentPage ? 'page' : null, "aria-disabled": this.disabled ? 'true' : null }, content))));
+    }
+    static get is() { return "pf-nav-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-nav-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-nav-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Where the item goes. Reflected; a consumer's stylesheet reads it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Opens elsewhere, as on a plain anchor. Ignored without an `href`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Goes on the anchor as-is. Ignored without an `href`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rel"
+            },
+            "current": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set it to mark this item as the current page.\n\nThe *asking* half, which the group never writes \u2014 `currentPage` below is\nthe answer. The two are kept apart for the reason `pf-breadcrumb` keeps\nthem apart: a group that wrote its answer back would leave the mark\nbehind on an item the consumer had not marked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "current",
+                "defaultValue": "false"
+            },
+            "currentPage": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the group: the resolved current page, which is the one thing that\nrenders `aria-current=\"page\"`. At most one item in a navigation carries\nit, and the highlight follows it rather than `current` \u2014 a second\nhighlighted item with no `aria-current` would be a sighted-only lie."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "current-page",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Takes the item out of the navigation without removing it.\n\nA disabled item renders **no anchor at all**, because an anchor has no\ndisabled state: `aria-disabled` alone leaves it focusable and clickable,\nand dropping the `href` is the only thing that really takes it out of the\ntab order."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the group, which is the only one that knows which it is."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pf-nav-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-nav-item.js","sourceRoot":"","sources":["../../../src/components/pf-nav-item/pf-nav-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAMH,MAAM,OAAO,SAAS;IACpB,wEAAwE;IAC/C,IAAI,CAAU;IAEvC,wEAAwE;IAChE,MAAM,CAAU;IAExB,2DAA2D;IACnD,GAAG,CAAU;IAErB;;;;;;;OAOG;IACsB,OAAO,GAAG,KAAK,CAAC;IAEzC;;;;;OAKG;IACqC,WAAW,GAAG,KAAK,CAAC;IAE5D;;;;;;;OAOG;IACsB,QAAQ,GAAG,KAAK,CAAC;IAE1C,sEAAsE;IAC9B,WAAW,GAA8B,YAAY,CAAC;IAE9F,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,6DAAM,IAAI,EAAC,MAAM,GAAG;YACpB,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;gBAC9B,8DAAQ,CACH;YACP,6DAAM,IAAI,EAAC,OAAO,GAAG;SACtB,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IAClB,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAC7B,SACE,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,kBACC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,IAE7C,OAAO,CACN,CACL,CAAC,CAAC,CAAC,CACF,YACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,kBACG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,mBAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,IAE3C,OAAO,CACH,CACR,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } 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`.\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   * 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"]}

package/dist/collection/components/pf-nav-section/pf-nav-section.css

@@ -0,0 +1,39 @@
+: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;
+}
+
+/*
+ * Both classes rather than a bare `.empty`, so the rule does not depend on
+ * sitting below the `display` the box sets on itself.
+ */
+.title.empty {
+  display: none;
+}
+
+.list {
+  display: grid;
+  gap: 2px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* The items are grid children of the list, not of a box inside it. */
+.list slot {
+  display: contents;
+}

package/dist/collection/components/pf-nav-section/pf-nav-section.js

@@ -0,0 +1,94 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A titled group of `pf-nav-item` children inside a `pf-sidebar-navigation`.
+ *
+ * The React `SidebarNavigation` takes a `sections` array of `{ title, items }`.
+ * Grouping slotted children has to be structural — one `<slot>` renders every
+ * assigned child in source order, and a shadow root cannot wrap a subset of
+ * them in a box — so the consumer nests, which is the §2.1 idiom and the same
+ * answer `pf-command-group` gives.
+ *
+ * The title names the list with a **same-root** IDREF: both the title and the
+ * `<ul>` are in this shadow root, so the reference resolves. An
+ * `aria-labelledby` from the host could not point at either of them.
+ *
+ * @slot - the `pf-nav-item` children.
+ * @slot title - the section's title.
+ * @part title - the title's box.
+ * @part list - the list the items are slotted into.
+ */
+export class PfNavSection {
+    el;
+    /**
+     * 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 (h(Host, { key: '403390422ffe79fd7074cf127380b4c01f06e64c' }, h("p", { key: '9da8bd54057acfdbcc8b05e843557ea13792e98c', class: { title: true, empty: !this.hasTitle }, part: "title", id: "title" }, h("slot", { key: 'f5d6f38608e937f8842d0e2e5bf19773f38df1bd', name: "title", onSlotchange: () => this.handleSlotChange() })), h("ul", { key: '536b579b106d4bc926a2ea309157e50dddc563c1', class: "list", part: "list", "aria-labelledby": this.hasTitle ? 'title' : null }, h("slot", { key: 'f80ef7903620ff32262dc8995f73ecb1c4971c57', onSlotchange: () => this.handleSlotChange() }))));
+    }
+    static get is() { return "pf-nav-section"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-nav-section.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-nav-section.css"]
+        };
+    }
+    static get states() {
+        return {
+            "hasTitle": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfNavStructure",
+                "name": "pfNavStructure",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Tells the navigation its items have moved.\n\n`slotchange` is not composed, so the navigation never hears this\nsection's own slot change \u2014 exactly the reason `pf-tree-item` emits\n`pfTreeStructure`. Without it an item appended to a section is never\ngiven an orientation or a place in the one-current resolution."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pf-nav-section.js.map

package/dist/collection/components/pf-nav-section/pf-nav-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-nav-section.js","sourceRoot":"","sources":["../../../src/components/pf-nav-section/pf-nav-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAExF;;;;;;;;;;;;;;;;;GAiBG;AAMH,MAAM,OAAO,YAAY;IACZ,EAAE,CAAe;IAE5B;;;;;;OAMG;IACM,QAAQ,GAAG,KAAK,CAAC;IAE1B;;;;;;;OAOG;IACM,cAAc,CAAsB;IAE7C,uEAAuE;IACvE,iBAAiB;QACf,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAEO,SAAS;QACf;;;WAGG;QACH,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAC/C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,OAAO,CAClD,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;IAC7B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YAMH,0DAAG,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO;gBACvE,6DAAM,IAAI,EAAC,OAAO,EAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAI,CAChE;YAEJ,2DAAI,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,qBAAkB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI;gBAC1E,6DAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAI,CAClD,CACA,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}