@pitchfork-ui/elements 0.0.0-stage → 0.2.1

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

@@ -0,0 +1 @@
+{"file":"pf-select.cjs.entry.js","mappings":"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","names":["Keys","applyControlValidity","observeAnchoredPosition","placePopover","getEnabledIndexes","resolveListMove","isActivationKey","composeDescribedBy","h","Host","controlAriaLabel"],"sources":["../core/dist/typeahead.js","src/components/pf-select/pf-select.css?tag=pf-select&encapsulation=shadow","src/components/pf-select/pf-select.tsx"],"sourcesContent":["//#region src/typeahead.ts\n/**\n* Printable-character typeahead for a listbox, menu or tree.\n*\n* The ARIA listbox pattern expects it: typing `b` jumps to the next option\n* beginning with `b`, and typing `br` narrows to `br`. The React `Select` has\n* none of this — `todo.md` has the fix — so the rules live here, where\n* `<pf-select>` and every later `pf-combobox` / `pf-multi-select` /\n* `pf-tree-view` read the same ones.\n*\n* Core owns the matching; the rendering layer owns the buffer and its timer,\n* because a timer is state and core is never a state container.\n*/\n/** How long a quiet gap ends one typeahead word, in milliseconds. */\nvar TYPEAHEAD_TIMEOUT_MS = 500;\n/**\n* Whether a key should go into the buffer at all.\n*\n* One character, so `Enter`, `ArrowDown` and `Escape` are excluded by length\n* rather than by a list that would need keeping up to date. A space is\n* deliberately *not* typeahead: in a listbox it selects.\n*/\nfunction isTypeaheadKey(key) {\n\treturn key.length === 1 && key !== \" \";\n}\n/**\n* The buffer after `key`: lower-cased and appended, nothing more.\n*\n* A repeat is *not* special-cased here. Pressing `b` four times means \"the\n* fourth option starting with b\" rather than \"an option starting with bbbb\",\n* but that is a matching question, so `findTypeaheadMatch` reads it off the\n* buffer's shape instead — which keeps this function a plain append and lets\n* the caller hold one string.\n*/\nfunction nextTypeaheadBuffer(buffer, key) {\n\tif (!isTypeaheadKey(key)) return buffer;\n\treturn buffer + key.toLowerCase();\n}\n/**\n* True when the buffer is one character repeated — including just once.\n*\n* The single-character case is the important one, and requiring two got it\n* wrong: pressing `b` while already on Banana has to move to Blackberry, the\n* way a native `<select>` does, not sit still because Banana also starts with\n* `b`. Found by a browser test on `pf-select`.\n*/\nfunction isCycling(buffer) {\n\treturn buffer.length > 0 && [...buffer].every((char) => char === buffer[0]);\n}\n/**\n* The index of the option the buffer points at, or -1.\n*\n* Searches from `fromIndex` and wraps, so a match behind the current option is\n* still found. Two modes:\n*\n* - **Narrowing** (`br`): the current option is included, because typing more\n*   of the label you are already on should keep you there rather than skip to\n*   the next `br`.\n* - **Cycling** (`b`, `bb`, `bbb`): one character repeated, searched from\n*   *after* the current option — so pressing one letter walks through the\n*   options beginning with it, which is what a native `<select>` does.\n*\n* A disabled option is never matched: the keyboard would land somewhere it\n* cannot act, which is worse than not moving.\n*/\nfunction findTypeaheadMatch(labels, buffer, fromIndex = -1, isDisabled = () => false) {\n\tif (!buffer || labels.length === 0) return -1;\n\tconst cycling = isCycling(buffer);\n\tconst needle = cycling ? buffer[0] : buffer;\n\tconst start = fromIndex < 0 ? 0 : cycling ? fromIndex + 1 : fromIndex;\n\tfor (let step = 0; step < labels.length; step += 1) {\n\t\tconst index = (start + step) % labels.length;\n\t\tif (isDisabled(index)) continue;\n\t\tif (labels[index]?.trim().toLowerCase().startsWith(needle)) return index;\n\t}\n\treturn -1;\n}\n//#endregion\nexport { TYPEAHEAD_TIMEOUT_MS, findTypeaheadMatch, isTypeaheadKey, nextTypeaheadBuffer };\n","/*\n * The generic set pf-option reads, mapped to this control's own family. They\n * inherit through the shadow boundary, so a slotted option is themed by the\n * listbox it sits in without knowing which that is.\n */\n:host {\n  display: block;\n  --pf-option-text: var(--pf-select-input-text, var(--pf-input-text));\n  --pf-option-text-disabled: var(--pf-select-input-placeholder, var(--pf-input-placeholder));\n  --pf-option-active-bg: var(--pf-select-option-active-bg);\n  --pf-option-active-text: var(--pf-select-option-active-text);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-1);\n}\n\n.label {\n  color: var(--pf-input-label-text, var(--pf-input-text));\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-select-invalid-border);\n  margin-inline-start: var(--space-1);\n}\n\n.trigger {\n  align-items: center;\n  background: var(--pf-input-bg);\n  border: 1px solid var(--pf-input-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-input-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:hover:not(:disabled) {\n  border-color: var(--pf-input-border-hover);\n}\n\n.trigger:focus-visible {\n  border-color: var(--pf-select-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-select-invalid-border);\n}\n\n.value {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.value--placeholder {\n  color: var(--pf-input-placeholder);\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/*\n * See src/place-popover.ts: `inset: auto; margin: 0` are what make the\n * coordinates mean what they say, since the UA stylesheet centres a popover.\n */\n.listbox {\n  inset: auto;\n  margin: 0;\n  background: var(--pf-select-menu-bg);\n  border: 1px solid var(--pf-select-menu-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-select-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-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  findTypeaheadMatch,\n  getEnabledIndexes,\n  isActivationKey,\n  Keys,\n  nextTypeaheadBuffer,\n  observeAnchoredPosition,\n  resolveListMove,\n  TYPEAHEAD_TIMEOUT_MS,\n  isTypeaheadKey,\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 single-choice select over `pf-option` children.\n *\n * The first of Wave 5, and the worked example for §2.1: the options are child\n * elements, so a label is a slot and can hold anything, where the React\n * `Select`'s `options` array can only hold a string.\n *\n * **It has typeahead, which the React component does not.** Typing `b` jumps\n * to the next option beginning with `b`, `br` narrows, and `bbb` cycles — the\n * ARIA listbox pattern, and the matching is core's so a later `pf-combobox`\n * answers the same keystrokes. `todo.md` has the React fix.\n *\n * Form-associated, so the value submits by itself. The React component fakes\n * that with a hidden `<input>` beside the trigger.\n *\n * The active option is set as an *element*, not an IDREF: the trigger is in\n * this shadow root and the options are slotted light DOM, and a cross-root\n * IDREF is absent from the accessibility tree — measured. `aria-controls` does\n * work, because the listbox itself is in this same root.\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 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-select',\n  styleUrl: 'pf-select.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfSelect {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Submitted under this name. Reflected; the submission reads the attribute. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The chosen option's value, or empty. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** Whether the listbox is showing. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Prop() label?: string;\n\n  @Prop() description?: string;\n\n  @Prop() error?: string;\n\n  @Prop() placeholder = 'Select an option';\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Options to show before the listbox scrolls. Unset means it fits them all. */\n  @Prop() maxVisibleOptions?: number;\n\n  /** Fires when the chosen value changes. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** Fires whenever the listbox opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** The label of the chosen option, for the trigger to show. */\n  @State() selectedLabel = '';\n\n  private initialValue = '';\n  private stopObserving?: () => void;\n  private activeOption: HTMLElement | null = null;\n  private typeahead = '';\n  private typeaheadTimer?: ReturnType<typeof setTimeout>;\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    if (this.typeaheadTimer) clearTimeout(this.typeaheadTimer);\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    this.internals.setFormValue(this.value || null);\n    applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n  }\n\n  /** The value changed, so the children's `selected` and the trigger follow. */\n  @Watch('value')\n  syncOptions() {\n    const options = this.options();\n    let label = '';\n\n    for (const option of options) {\n      const selected = this.optionValue(option) === this.value && this.value !== '';\n      (option as HTMLElement & { selected: boolean }).selected = selected;\n      if (selected) label = option.textContent?.trim() ?? '';\n    }\n\n    this.selectedLabel = label;\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  /** A reset restores the value the control started with, not an empty one. */\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  /** An option added or removed while mounted; re-mark the children. */\n  private onSlotChange = () => {\n    this.syncOptions();\n  };\n\n  /** Re-reads the options, for a label edited in place (which fires no slotchange). */\n  @Method()\n  async refresh(): Promise<void> {\n    this.syncOptions();\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      // The listbox matches the trigger's width, as the React component does.\n      matchAnchorWidth: true,\n      flip: true,\n      /*\n       * `width` *and* `minWidth`: core reports whichever the mode calls for\n       * and leaves the other undefined — `matchAnchorWidth: true` gives a\n       * `width`, false gives a `minWidth`. Reading only `minWidth`, which is\n       * what pf-dropdown needs, left the listbox at its intrinsic 156px beside\n       * a 1216px trigger. The smoke test against a real build caught it.\n       */\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    /*\n     * Opens on the chosen option, or the first selectable one. Landing\n     * anywhere else would make the arrows start from somewhere the user has\n     * no reason to expect.\n     */\n    const options = this.options();\n    const chosen = options.find((option) => this.optionValue(option) === this.value);\n    this.setActive(\n      chosen && !chosen.hasAttribute('disabled') ? chosen : (this.enabled()[0] ?? null),\n    );\n  }\n\n  private hideListbox() {\n    this.stopObserving?.();\n    this.stopObserving = undefined;\n    this.clearTypeahead();\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  /**\n   * Feature-detected. Where ARIA element reflection is missing there is no\n   * cross-root equivalent, so the active option stops being *announced* while\n   * the arrows and Enter still work — recorded in `todo.md`.\n   */\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  private commit(option: HTMLElement) {\n    if (option.hasAttribute('disabled')) return;\n\n    const next = this.optionValue(option);\n    this.open = false;\n    this.trigger?.focus();\n\n    if (next === this.value) return;\n    this.value = next;\n    this.pfChange.emit({ value: next });\n  }\n\n  /** An option asked to be taken. The select decides, reports and closes. */\n  @Listen('pfOptionSelect')\n  handleOptionSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    if (this.disabled) return;\n\n    const option = this.options().find(\n      (candidate) => this.optionValue(candidate) === event.detail.value,\n    );\n    if (option) this.commit(option);\n  }\n\n  private move(action: ListNavigationAction) {\n    const 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  private clearTypeahead() {\n    if (this.typeaheadTimer) clearTimeout(this.typeaheadTimer);\n    this.typeaheadTimer = undefined;\n    this.typeahead = '';\n  }\n\n  /**\n   * Typeahead. The buffer and its timer live here, because a timer is state\n   * and core is never a state container; the matching is core's.\n   */\n  private handleTypeahead(key: string) {\n    this.typeahead = nextTypeaheadBuffer(this.typeahead, key);\n\n    if (this.typeaheadTimer) clearTimeout(this.typeaheadTimer);\n    this.typeaheadTimer = setTimeout(() => this.clearTypeahead(), TYPEAHEAD_TIMEOUT_MS);\n\n    const options = this.options();\n    const labels = options.map((option) => option.textContent ?? '');\n    const from = this.activeOption ? options.indexOf(this.activeOption) : -1;\n    const match = findTypeaheadMatch(labels, this.typeahead, from, (index) =>\n      options[index].hasAttribute('disabled'),\n    );\n\n    if (match === -1) return;\n\n    /*\n     * Closed, typeahead *chooses* rather than merely highlighting: that is\n     * what a native `<select>` does, and with no listbox on screen a\n     * highlight nobody can see would be no feedback at all.\n     */\n    if (this.open) this.setActive(options[match]);\n    else this.commit(options[match]);\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      // Down or Up on a closed select opens it, as a combobox should.\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) {\n        this.open = true;\n      } else if (this.activeOption) {\n        this.commit(this.activeOption);\n      }\n      return;\n    }\n\n    // Escape is the browser's while the listbox is a `popover=\"auto\"`.\n    if (isTypeaheadKey(event.key)) {\n      event.preventDefault();\n      this.handleTypeahead(event.key);\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            <span class={{ value: true, 'value--placeholder': !this.selectedLabel }}>\n              {this.selectedLabel || this.placeholder}\n            </span>\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          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-sidebar-navigation.cjs.entry.js

@@ -0,0 +1,106 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var nav = require('./nav-C4LaACXb.js');
+
+const pfSidebarNavigationCss = () => `:host{background:var(--pf-sidebar-nav-bg);border:1px solid var(--pf-sidebar-nav-border);border-radius:var(--pf-sidebar-nav-radius, var(--radius-md));display:flex;flex-direction:column;min-height:0;width:100%;--pf-nav-item-text:var(--pf-sidebar-nav-text-muted);--pf-nav-item-hover-text:var(--pf-sidebar-nav-text);--pf-nav-item-hover-bg:var(--pf-sidebar-nav-bg-subtle);--pf-nav-item-current-text:var(--pf-sidebar-nav-text);--pf-nav-item-current-bg:var(--pf-sidebar-nav-bg-subtle)}:host([hidden]){display:none}@media (min-width: 768px){:host{min-height:var(--pf-sidebar-nav-min-height, 360px);width:min(100%, var(--pf-sidebar-nav-width, 280px))}}.header,.footer{padding:var(--space-3)}.header{border-bottom:1px solid var(--pf-sidebar-nav-border)}.footer{border-top:1px solid var(--pf-sidebar-nav-border);margin-top:auto}.header.empty,.footer.empty{display:none}.nav{display:grid;gap:var(--space-3);padding:var(--space-3)}.nav slot{display:contents}`;
+
+const PfSidebarNavigation = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /** The navigation's accessible name. */
+    label = 'Sidebar navigation';
+    /**
+     * Whether anything was slotted into `header` and `footer`.
+     *
+     * Asked in JS: both boxes carry a border and padding, so an empty one draws
+     * a rule across the sidebar for no reason, and a wrapper around a slot
+     * cannot be collapsed from CSS. The same arrangement as
+     * `pf-slideout-menu`'s footer.
+     */
+    hasHeader = false;
+    hasFooter = false;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad() {
+        this.sync();
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    /**
+     * A section's items moved, or an item's `current` changed. Either way the
+     * resolution has to run again.
+     *
+     * `slotchange` is not composed, so this is the only way the navigation
+     * hears about an item appended inside a section — and an item's `current`
+     * arriving as a *property* fires no DOM event at all, which is why the item
+     * emits this too. The event comes from a slotted child in the navigation's
+     * own tree, so `event.target` is the section or the item rather than the
+     * host — nothing is retargeted, which is what makes a host listener safe
+     * here and not on a child in the shadow root.
+     */
+    handleStructureChange(event) {
+        event.stopPropagation();
+        this.sync();
+    }
+    /**
+     * Re-reads the items, for a consumer who changed something the group reads
+     * and has no event for.
+     */
+    async refresh() {
+        this.sync();
+    }
+    /**
+     * Every item this navigation owns, in document order, however deeply a
+     * section nests it — but not one belonging to a navigation nested inside
+     * this one.
+     */
+    get items() {
+        /*
+         * The walk up is written out rather than done with `closest`, which would
+         * need a comma selector the mock DOM may not take. The first navigation
+         * above an item is the one that owns it, so a navigation nested inside
+         * this one keeps its own.
+         */
+        const ownedByThis = (item) => {
+            for (let node = item.parentElement; node; node = node.parentElement) {
+                const tag = node.tagName.toLowerCase();
+                if (tag === 'pf-sidebar-navigation' || tag === 'pf-header-navigation') {
+                    return node === this.el;
+                }
+            }
+            return false;
+        };
+        return Array.from(this.el.querySelectorAll('pf-nav-item')).filter(ownedByThis);
+    }
+    /**
+     * The property if the item has upgraded, the attribute if it has not:
+     * `componentWillLoad` can run before a child parsed from HTML upgrades.
+     */
+    isCurrent(item) {
+        return item.current ?? item.hasAttribute('current');
+    }
+    sync() {
+        const slotted = (name) => Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);
+        this.hasHeader = slotted('header');
+        this.hasFooter = slotted('footer');
+        const items = this.items;
+        const currentIndex = nav.resolveCurrentNavItem(items.map((item) => ({ current: this.isCurrent(item) })));
+        for (const [index, item] of items.entries()) {
+            const node = item;
+            node.currentPage = index === currentIndex;
+            node.orientation = 'vertical';
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: '32d3374c206ae575f3b572e249203d9b5e1b5c66' }, index.h("div", { key: '18ddded266a900836c09b26b3716bb4e4d17a027', class: { header: true, empty: !this.hasHeader }, part: "header" }, index.h("slot", { key: '8a74ca32bb1574d64bf6bfca53b799580fae5980', name: "header", onSlotchange: () => this.refresh() })), index.h("nav", { key: 'b4168ab94367d2e7086ec82aa08d81e92540d1f3', class: "nav", part: "nav", "aria-label": this.label }, index.h("slot", { key: 'afa43f3d6f1b247e527a3d1e6a11ac585dd8fdd9', onSlotchange: () => this.refresh() })), index.h("div", { key: '00afd1800a0aff350f73422823431287457ad2a9', class: { footer: true, empty: !this.hasFooter }, part: "footer" }, index.h("slot", { key: 'cf899e9e6cab4199f7ed5846ea2fdb4011e71672', name: "footer", onSlotchange: () => this.refresh() }))));
+    }
+};
+PfSidebarNavigation.style = pfSidebarNavigationCss();
+
+exports.pf_sidebar_navigation = PfSidebarNavigation;
+//# sourceMappingURL=pf-sidebar-navigation.entry.cjs.js.map
+
+//# sourceMappingURL=pf-sidebar-navigation.cjs.entry.js.map

package/dist/cjs/pf-sidebar-navigation.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-sidebar-navigation.cjs.entry.js","mappings":"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","names":["resolveCurrentNavItem","h","Host"],"sources":["src/components/pf-sidebar-navigation/pf-sidebar-navigation.css?tag=pf-sidebar-navigation&encapsulation=shadow","src/components/pf-sidebar-navigation/pf-sidebar-navigation.tsx"],"sourcesContent":[":host {\n  background: var(--pf-sidebar-nav-bg);\n  border: 1px solid var(--pf-sidebar-nav-border);\n  border-radius: var(--pf-sidebar-nav-radius, var(--radius-md));\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  width: 100%;\n\n  /*\n   * The bridge to the shared item. `pf-header-navigation` defines the same\n   * five from its own aliases; custom properties inherit through the shadow\n   * boundary, which is how one item element takes its colours from whichever\n   * navigation it is slotted into.\n   */\n  --pf-nav-item-text: var(--pf-sidebar-nav-text-muted);\n  --pf-nav-item-hover-text: var(--pf-sidebar-nav-text);\n  --pf-nav-item-hover-bg: var(--pf-sidebar-nav-bg-subtle);\n  --pf-nav-item-current-text: var(--pf-sidebar-nav-text);\n  --pf-nav-item-current-bg: var(--pf-sidebar-nav-bg-subtle);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* Mobile first: full width, growing to a fixed column on a wider screen. */\n@media (--md) {\n  :host {\n    min-height: var(--pf-sidebar-nav-min-height, 360px);\n    width: min(100%, var(--pf-sidebar-nav-width, 280px));\n  }\n}\n\n.header,\n.footer {\n  padding: var(--space-3);\n}\n\n.header {\n  border-bottom: 1px solid var(--pf-sidebar-nav-border);\n}\n\n.footer {\n  border-top: 1px solid var(--pf-sidebar-nav-border);\n  /* Pushed to the bottom, so a short navigation still has it at the foot. */\n  margin-top: auto;\n}\n\n/*\n * Both classes rather than a bare `.empty`: an empty box here would draw a\n * rule across the sidebar, which is the most visible version of the\n * can't-collapse-a-slot-wrapper problem.\n */\n.header.empty,\n.footer.empty {\n  display: none;\n}\n\n.nav {\n  display: grid;\n  gap: var(--space-3);\n  padding: var(--space-3);\n}\n\n/* The sections are grid children of the nav, not of a box inside it. */\n.nav slot {\n  display: contents;\n}\n","import { resolveCurrentNavItem } from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Listen, Method, Prop, State } from '@stencil/core';\n\n/**\n * A sidebar navigation over `pf-nav-item` children, optionally grouped into\n * `pf-nav-section`s.\n *\n * The group owns the one thing an item cannot know: which item is the current\n * page. Core's rule decides, so the React `SidebarNavigation` marks the same\n * one — and the resolution runs across every section rather than within one,\n * because `aria-current=\"page\"` names the one page the reader is on and a\n * sidebar with two marked sections would claim two.\n *\n * As with `pf-header-navigation`, the host is not a landmark of its own: the\n * React component renders an `<aside>`, and an element cannot know whether it\n * is the page's complementary region. Only the `<nav>` is rendered.\n *\n * Items are grouped: the default slot takes `pf-nav-section` children, each\n * of which owns its own `<ul>`. A navigation with no section titles is one\n * untitled section, which is exactly what the React `sections` array is — and\n * it is also the only arrangement that keeps the list semantics honest, since\n * a `<ul>` here would be a list whose children were sections rather than\n * items.\n *\n * @slot - the `pf-nav-section` children.\n * @slot header - a box above the navigation, such as a product switcher.\n * @slot footer - a box below it, pushed to the bottom.\n * @part header - the header's box.\n * @part nav - the navigation landmark.\n * @part footer - the footer's box.\n */\n@Component({\n  tag: 'pf-sidebar-navigation',\n  styleUrl: 'pf-sidebar-navigation.css',\n  shadow: true,\n})\nexport class PfSidebarNavigation {\n  @Element() el!: HTMLElement;\n\n  /** The navigation's accessible name. */\n  @Prop() label = 'Sidebar navigation';\n\n  /**\n   * Whether anything was slotted into `header` and `footer`.\n   *\n   * Asked in JS: both boxes carry a border and padding, so an empty one draws\n   * a rule across the sidebar for no reason, and a wrapper around a slot\n   * cannot be collapsed from CSS. The same arrangement as\n   * `pf-slideout-menu`'s footer.\n   */\n  @State() hasHeader = false;\n  @State() hasFooter = false;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  /**\n   * A section's items moved, or an item's `current` changed. Either way the\n   * resolution has to run again.\n   *\n   * `slotchange` is not composed, so this is the only way the navigation\n   * hears about an item appended inside a section — and an item's `current`\n   * arriving as a *property* fires no DOM event at all, which is why the item\n   * emits this too. The event comes from a slotted child in the navigation's\n   * own tree, so `event.target` is the section or the item rather than the\n   * host — nothing is retargeted, which is what makes a host listener safe\n   * here and not on a child in the shadow root.\n   */\n  @Listen('pfNavStructure')\n  handleStructureChange(event: CustomEvent<void>) {\n    event.stopPropagation();\n    this.sync();\n  }\n\n  /**\n   * Re-reads the items, for a consumer who changed something the group reads\n   * and has no event for.\n   */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /**\n   * Every item this navigation owns, in document order, however deeply a\n   * section nests it — but not one belonging to a navigation nested inside\n   * this one.\n   */\n  private get items(): HTMLElement[] {\n    /*\n     * The walk up is written out rather than done with `closest`, which would\n     * need a comma selector the mock DOM may not take. The first navigation\n     * above an item is the one that owns it, so a navigation nested inside\n     * this one keeps its own.\n     */\n    const ownedByThis = (item: HTMLElement) => {\n      for (let node = item.parentElement; node; node = node.parentElement) {\n        const tag = node.tagName.toLowerCase();\n        if (tag === 'pf-sidebar-navigation' || tag === 'pf-header-navigation') {\n          return node === this.el;\n        }\n      }\n      return false;\n    };\n\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-nav-item')).filter(ownedByThis);\n  }\n\n  /**\n   * The property if the item has upgraded, the attribute if it has not:\n   * `componentWillLoad` can run before a child parsed from HTML upgrades.\n   */\n  private isCurrent(item: HTMLElement) {\n    return (item as HTMLElement & { current?: boolean }).current ?? item.hasAttribute('current');\n  }\n\n  private sync() {\n    const slotted = (name: string) =>\n      Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);\n\n    this.hasHeader = slotted('header');\n    this.hasFooter = slotted('footer');\n\n    const items = this.items;\n    const currentIndex = resolveCurrentNavItem(\n      items.map((item) => ({ current: this.isCurrent(item) })),\n    );\n\n    for (const [index, item] of items.entries()) {\n      const node = item as HTMLElement & { currentPage: boolean; orientation: string };\n      node.currentPage = index === currentIndex;\n      node.orientation = 'vertical';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={{ header: true, empty: !this.hasHeader }} part=\"header\">\n          <slot name=\"header\" onSlotchange={() => this.refresh()} />\n        </div>\n\n        <nav class=\"nav\" part=\"nav\" aria-label={this.label}>\n          <slot onSlotchange={() => this.refresh()} />\n        </nav>\n\n        <div class={{ footer: true, empty: !this.hasFooter }} part=\"footer\">\n          <slot name=\"footer\" onSlotchange={() => this.refresh()} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pf-slideout-menu.cjs.entry.js

@@ -0,0 +1,155 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var scrollLock = require('./scroll-lock-DllDwdH9.js');
+
+const pfSlideoutMenuCss = () => `:host{display:contents}.dialog{background:none;border:0;display:none;height:100%;max-height:100%;max-width:100%;padding:0;width:100%}.dialog[open]{display:flex}:host([placement='right']) .dialog{justify-content:flex-end}:host([placement='left']) .dialog{justify-content:flex-start}.dialog::backdrop{background:var(--pf-slideoutmenu-overlay-backdrop, var(--pf-overlay-backdrop))}.panel{background:var(--pf-slideout-bg);border-color:var(--pf-slideout-border);border-style:solid;border-width:0;box-shadow:var(--pf-slideoutmenu-elevation-overlay-shadow, var(--pf-elevation-overlay-shadow));color:var(--pf-slideout-text);display:grid;grid-template-rows:auto minmax(0, 1fr) auto;height:100%;max-width:100%}:host([placement='right']) .panel{border-left-width:1px}:host([placement='left']) .panel{border-right-width:1px}:host([size='sm']) .panel{width:min(420px, 100vw)}:host([size='md']) .panel{width:min(520px, 100vw)}:host([size='lg']) .panel{width:min(680px, 100vw)}:host([placement='right']) .dialog[open] .panel{animation:pf-slideout-in-right var(--pf-transition-slow)}:host([placement='left']) .dialog[open] .panel{animation:pf-slideout-in-left var(--pf-transition-slow)}@keyframes pf-slideout-in-right{from{transform:translateX(100%)}}@keyframes pf-slideout-in-left{from{transform:translateX(-100%)}}@media (prefers-reduced-motion: reduce){.dialog[open] .panel{animation:none}}.header,.footer{align-items:flex-start;display:flex;gap:var(--space-3);justify-content:space-between;padding:var(--space-3)}.footer[hidden]{display:none}.header{border-bottom:1px solid var(--pf-slideout-border)}.footer{border-top:1px solid var(--pf-slideout-border);justify-content:flex-end}.body{overflow-y:auto;padding:var(--space-3)}@media (min-width: 768px){.header,.body,.footer{padding:var(--space-4)}}.headings{display:grid;gap:var(--space-1);min-width:0}.title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);line-height:1.2;margin:0}.description{color:var(--pf-slideout-text-muted);font-size:var(--font-size-sm);line-height:1.45;margin:0}.close{align-items:center;background:transparent;border:0;border-radius:var(--radius-sm);color:var(--pf-slideout-text-muted);cursor:pointer;display:inline-flex;flex:0 0 auto;height:var(--space-8);justify-content:center;width:var(--space-8)}.close:hover{background:var(--pf-slideout-bg-subtle);color:var(--pf-slideout-text)}.close:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}`;
+
+const PfSlideoutMenu = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfOpenChange = index.createEvent(this, "pfOpenChange");
+    }
+    get el() { return index.getElement(this); }
+    /** Whether the panel is showing. Reflected so the stylesheet can select on it. */
+    open = false;
+    /** Which edge it slides in from. Reflected; the stylesheet positions on it. */
+    placement = 'right';
+    /** Panel width. Reflected so the stylesheet can select on it. */
+    size = 'md';
+    /** The heading shown in the header. */
+    heading;
+    /** A supporting line under the heading. */
+    description;
+    /**
+     * Accessible name, for when there is no `heading` to name it.
+     *
+     * With a heading, `aria-labelledby` is used instead and points at the
+     * heading's id. That works here and not in `pf-modal` because this heading
+     * is a prop rendered into this element's own shadow root, so the IDREF never
+     * crosses a boundary — `pf-modal`'s header is slotted light DOM, which is
+     * why it has to fall back to copying text into `aria-label`.
+     */
+    label;
+    /** Close on Escape or a click on the overlay. Defaults to true. */
+    dismissable = true;
+    /** Render the corner close button. Defaults to true. */
+    showCloseButton = true;
+    /** Fires whenever the panel opens or closes, whoever caused it. */
+    pfOpenChange;
+    /**
+     * Whether anything is slotted into the footer.
+     *
+     * Asked in JS rather than selected in CSS because a wrapper holding a
+     * `<slot>` cannot be collapsed by a `:not(:has(*))` rule — the slot element
+     * is itself a child, so the rule never matches, measured. An empty footer
+     * carries a border and padding, so it has to actually not render.
+     */
+    hasFooter = false;
+    releaseScroll = null;
+    /*
+     * Read on the way in as well as on `slotchange`, so the first paint is
+     * right: the mock DOM never fires `slotchange`, and nor does the browser
+     * before the first assignment.
+     */
+    componentWillLoad() {
+        this.readFooter();
+    }
+    componentDidLoad() {
+        if (this.open)
+            this.showDialog();
+    }
+    disconnectedCallback() {
+        // Removed while open, the page would otherwise stay unscrollable.
+        this.unlockScroll();
+    }
+    /** Opens the panel. */
+    async show() {
+        this.open = true;
+    }
+    /** Closes the panel. */
+    async hide() {
+        this.open = false;
+    }
+    /**
+     * The one place a state change is announced, whatever caused it. Emitting
+     * from the `close` handler instead fires for the browser-driven path and for
+     * none of the user-driven ones, because by then the element has already
+     * moved its own `open` and the guard sees no change.
+     */
+    syncOpen(next, previous) {
+        if (next)
+            this.showDialog();
+        else
+            this.closeDialog();
+        if (next !== previous)
+            this.pfOpenChange.emit({ open: next });
+    }
+    /**
+     * Counts element children rather than `assignedNodes`, because this runs in
+     * `componentWillLoad` too, before there is a shadow root to ask.
+     */
+    readFooter() {
+        this.hasFooter = Array.from(this.el.children).some((child) => child.getAttribute('slot') === 'footer');
+    }
+    get dialog() {
+        return this.el.shadowRoot?.querySelector('dialog') ?? null;
+    }
+    lockScroll() {
+        if (this.releaseScroll)
+            return;
+        this.releaseScroll = scrollLock.lockPageScroll();
+    }
+    unlockScroll() {
+        this.releaseScroll?.();
+        this.releaseScroll = null;
+    }
+    showDialog() {
+        const dialog = this.dialog;
+        if (!dialog || dialog.open)
+            return;
+        dialog.showModal();
+        this.lockScroll();
+    }
+    closeDialog() {
+        const dialog = this.dialog;
+        this.unlockScroll();
+        if (dialog?.open)
+            dialog.close();
+    }
+    /** Fires on Escape. Blocking it is how a non-dismissable panel stays put. */
+    onCancel = (event) => {
+        if (!this.dismissable)
+            event.preventDefault();
+    };
+    /** Mirrors a browser-driven close back into `open`, which announces it. */
+    onClose = () => {
+        this.unlockScroll();
+        if (this.open)
+            this.open = false;
+    };
+    /**
+     * A click on the dialog itself is a click on the overlay: the panel is an
+     * inner box, so anything landing on the dialog missed the content.
+     */
+    onDialogClick = (event) => {
+        if (!this.dismissable || event.target !== this.dialog)
+            return;
+        this.open = false;
+    };
+    render() {
+        const hasHeader = Boolean(this.heading || this.description || this.showCloseButton);
+        return (index.h(index.Host, { key: '1818b5812da54d3fd832824588a674c3cddc542a' }, index.h("dialog", { key: '34e55f45a666da9c9da86f026f717122f2d8106a', part: "dialog", class: "dialog", "aria-label": this.heading ? undefined : this.label, "aria-labelledby": this.heading ? 'title' : undefined, "aria-describedby": this.description ? 'description' : undefined, onCancel: this.onCancel, onClose: this.onClose, onClick: this.onDialogClick }, index.h("div", { key: '537eb70dd6bbb7c88dc8ec2e2403bf753d2b23e4', class: "panel", part: "panel" }, hasHeader && (index.h("header", { key: '99d780e46350c08f9f47301105fa59a5ef0ea01f', class: "header", part: "header" }, index.h("div", { key: '2e9619701ec5045edb9db1193b21c554bc48b545', class: "headings" }, this.heading && (index.h("h2", { key: '3d78f7c7a157b0ab462cef6aa33ba603feb80539', class: "title", part: "title", id: "title" }, this.heading)), this.description && (index.h("p", { key: 'dc947237348920e95daf0dd7766ef8f5555e10e1', class: "description", part: "description", id: "description" }, this.description))), this.showCloseButton && (index.h("button", { key: '11a0b9306d9c9a8ff93f54c464ae29c28c5fdc4b', class: "close", part: "close", type: "button", "aria-label": "Close", onClick: () => this.hide() }, index.h("svg", { key: 'a4f0e7897b9610dc1afc52fcdc848cf3c4e8995c', viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": "true", focusable: "false" }, index.h("path", { key: '28aff0cc434f02d2d94352192255a25ce0c2bf18', d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", fill: "none" })))))), index.h("div", { key: '865a0cb08a8f9a67480adfeaff37315d410f0369', class: "body", part: "body" }, index.h("slot", { key: '96288f62c6e01624c8f2a091d2c6580a1939e9f5' })), index.h("footer", { key: 'a9279652bce34ab82016ecb5d8381148c8ac53b1', class: "footer", part: "footer", hidden: !this.hasFooter }, index.h("slot", { key: '34f493c7ed5b3c094e3c11843461ee1dc4295c4e', name: "footer", onSlotchange: () => this.readFooter() }))))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "syncOpen": 0
+            }]
+    }; }
+};
+PfSlideoutMenu.style = pfSlideoutMenuCss();
+
+exports.pf_slideout_menu = PfSlideoutMenu;
+//# sourceMappingURL=pf-slideout-menu.entry.cjs.js.map
+
+//# sourceMappingURL=pf-slideout-menu.cjs.entry.js.map

package/dist/cjs/pf-slideout-menu.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-slideout-menu.cjs.entry.js","mappings":"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","names":["lockPageScroll","h","Host"],"sources":["src/components/pf-slideout-menu/pf-slideout-menu.css?tag=pf-slideout-menu&encapsulation=shadow","src/components/pf-slideout-menu/pf-slideout-menu.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n/*\n * The dialog is the overlay: it fills the viewport and pins the panel to one\n * edge, so a click that lands on it rather than on the panel is an overlay\n * click. The explicit sizing is what overrides the UA's `margin: auto` and\n * `width: fit-content` for a `<dialog>`.\n */\n.dialog {\n  background: none;\n  border: 0;\n  display: none;\n  height: 100%;\n  max-height: 100%;\n  max-width: 100%;\n  padding: 0;\n  width: 100%;\n}\n\n.dialog[open] {\n  display: flex;\n}\n\n:host([placement='right']) .dialog {\n  justify-content: flex-end;\n}\n\n:host([placement='left']) .dialog {\n  justify-content: flex-start;\n}\n\n.dialog::backdrop {\n  background: var(--pf-slideoutmenu-overlay-backdrop, var(--pf-overlay-backdrop));\n}\n\n.panel {\n  background: var(--pf-slideout-bg);\n  border-color: var(--pf-slideout-border);\n  border-style: solid;\n  border-width: 0;\n  box-shadow: var(--pf-slideoutmenu-elevation-overlay-shadow, var(--pf-elevation-overlay-shadow));\n  color: var(--pf-slideout-text);\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr) auto;\n  height: 100%;\n  max-width: 100%;\n}\n\n:host([placement='right']) .panel {\n  border-left-width: 1px;\n}\n\n:host([placement='left']) .panel {\n  border-right-width: 1px;\n}\n\n:host([size='sm']) .panel {\n  width: min(420px, 100vw);\n}\n\n:host([size='md']) .panel {\n  width: min(520px, 100vw);\n}\n\n:host([size='lg']) .panel {\n  width: min(680px, 100vw);\n}\n\n/*\n * Its own copy of each: @keyframes do not cross a shadow boundary, so the\n * global sheet's definitions are invisible in here.\n */\n:host([placement='right']) .dialog[open] .panel {\n  animation: pf-slideout-in-right var(--pf-transition-slow);\n}\n\n:host([placement='left']) .dialog[open] .panel {\n  animation: pf-slideout-in-left var(--pf-transition-slow);\n}\n\n@keyframes pf-slideout-in-right {\n  from {\n    transform: translateX(100%);\n  }\n}\n\n@keyframes pf-slideout-in-left {\n  from {\n    transform: translateX(-100%);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dialog[open] .panel {\n    animation: none;\n  }\n}\n\n.header,\n.footer {\n  align-items: flex-start;\n  display: flex;\n  gap: var(--space-3);\n  justify-content: space-between;\n  padding: var(--space-3);\n}\n\n/* `hidden` has to beat the `display: flex` above, or an empty footer shows. */\n.footer[hidden] {\n  display: none;\n}\n\n.header {\n  border-bottom: 1px solid var(--pf-slideout-border);\n}\n\n.footer {\n  border-top: 1px solid var(--pf-slideout-border);\n  justify-content: flex-end;\n}\n\n.body {\n  overflow-y: auto;\n  padding: var(--space-3);\n}\n\n@media (--md) {\n  .header,\n  .body,\n  .footer {\n    padding: var(--space-4);\n  }\n}\n\n.headings {\n  display: grid;\n  gap: var(--space-1);\n  min-width: 0;\n}\n\n.title {\n  font-size: var(--font-size-lg);\n  font-weight: var(--font-weight-semibold);\n  line-height: 1.2;\n  margin: 0;\n}\n\n.description {\n  color: var(--pf-slideout-text-muted);\n  font-size: var(--font-size-sm);\n  line-height: 1.45;\n  margin: 0;\n}\n\n.close {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-slideout-text-muted);\n  cursor: pointer;\n  display: inline-flex;\n  flex: 0 0 auto;\n  height: var(--space-8);\n  justify-content: center;\n  width: var(--space-8);\n}\n\n.close:hover {\n  background: var(--pf-slideout-bg-subtle);\n  color: var(--pf-slideout-text);\n}\n\n.close:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n","import { lockPageScroll } from '@pitchfork-ui/core';\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nexport type PfSlideoutMenuPlacement = 'left' | 'right';\nexport type PfSlideoutMenuSize = 'sm' | 'md' | 'lg';\n\n/**\n * A panel that slides in from the edge of the screen — a modal dialog that\n * happens to be anchored to a side rather than centred.\n *\n * Which is why this is a native `<dialog>` opened with `showModal()`, exactly\n * as `pf-modal` is. The React component hand-rolls the whole modal contract:\n * a focus trap over `getFocusableElements`, a `focusin` listener to pull focus\n * back, Escape handling, an overlay element, and focus restoration on close —\n * about ninety lines. `showModal()` gives all of it, and the element needs\n * none of core's `trapFocus`.\n *\n * The one thing it does not give is a page-scroll lock, so that comes from\n * core's reference-counted `lockPageScroll`.\n *\n * @slot - the panel's body.\n * @slot footer - actions pinned below the body.\n * @part dialog - the native dialog, which is also the overlay.\n * @part panel - the sliding panel.\n * @part header - the header row, present only when there is a heading.\n * @part title - the heading.\n * @part description - the supporting line under the heading.\n * @part body - the scrolling region the default slot renders into.\n * @part footer - the footer region.\n * @part close - the close button.\n */\n@Component({\n  tag: 'pf-slideout-menu',\n  styleUrl: 'pf-slideout-menu.css',\n  shadow: true,\n})\nexport class PfSlideoutMenu {\n  @Element() el!: HTMLElement;\n\n  /** Whether the panel is showing. Reflected so the stylesheet can select on it. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Which edge it slides in from. Reflected; the stylesheet positions on it. */\n  @Prop({ reflect: true }) placement: PfSlideoutMenuPlacement = 'right';\n\n  /** Panel width. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) size: PfSlideoutMenuSize = 'md';\n\n  /** The heading shown in the header. */\n  @Prop() heading?: string;\n\n  /** A supporting line under the heading. */\n  @Prop() description?: string;\n\n  /**\n   * Accessible name, for when there is no `heading` to name it.\n   *\n   * With a heading, `aria-labelledby` is used instead and points at the\n   * heading's id. That works here and not in `pf-modal` because this heading\n   * is a prop rendered into this element's own shadow root, so the IDREF never\n   * crosses a boundary — `pf-modal`'s header is slotted light DOM, which is\n   * why it has to fall back to copying text into `aria-label`.\n   */\n  @Prop() label?: string;\n\n  /** Close on Escape or a click on the overlay. Defaults to true. */\n  @Prop() dismissable = true;\n\n  /** Render the corner close button. Defaults to true. */\n  @Prop() showCloseButton = true;\n\n  /** Fires whenever the panel opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /**\n   * Whether anything is slotted into the footer.\n   *\n   * Asked in JS rather than selected in CSS because a wrapper holding a\n   * `<slot>` cannot be collapsed by a `:not(:has(*))` rule — the slot element\n   * is itself a child, so the rule never matches, measured. An empty footer\n   * carries a border and padding, so it has to actually not render.\n   */\n  @State() hasFooter = false;\n\n  private releaseScroll: (() => void) | null = null;\n\n  /*\n   * Read on the way in as well as on `slotchange`, so the first paint is\n   * right: the mock DOM never fires `slotchange`, and nor does the browser\n   * before the first assignment.\n   */\n  componentWillLoad() {\n    this.readFooter();\n  }\n\n  componentDidLoad() {\n    if (this.open) this.showDialog();\n  }\n\n  disconnectedCallback() {\n    // Removed while open, the page would otherwise stay unscrollable.\n    this.unlockScroll();\n  }\n\n  /** Opens the panel. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Closes the panel. */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  /**\n   * The one place a state change is announced, whatever caused it. Emitting\n   * from the `close` handler instead fires for the browser-driven path and for\n   * none of the user-driven ones, because by then the element has already\n   * moved its own `open` and the guard sees no change.\n   */\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showDialog();\n    else this.closeDialog();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  /**\n   * Counts element children rather than `assignedNodes`, because this runs in\n   * `componentWillLoad` too, before there is a shadow root to ask.\n   */\n  private readFooter() {\n    this.hasFooter = Array.from(this.el.children).some(\n      (child) => child.getAttribute('slot') === 'footer',\n    );\n  }\n\n  private get dialog() {\n    return this.el.shadowRoot?.querySelector('dialog') ?? null;\n  }\n\n  private lockScroll() {\n    if (this.releaseScroll) return;\n    this.releaseScroll = lockPageScroll();\n  }\n\n  private unlockScroll() {\n    this.releaseScroll?.();\n    this.releaseScroll = null;\n  }\n\n  private showDialog() {\n    const dialog = this.dialog;\n    if (!dialog || dialog.open) return;\n    dialog.showModal();\n    this.lockScroll();\n  }\n\n  private closeDialog() {\n    const dialog = this.dialog;\n    this.unlockScroll();\n    if (dialog?.open) dialog.close();\n  }\n\n  /** Fires on Escape. Blocking it is how a non-dismissable panel stays put. */\n  private onCancel = (event: Event) => {\n    if (!this.dismissable) event.preventDefault();\n  };\n\n  /** Mirrors a browser-driven close back into `open`, which announces it. */\n  private onClose = () => {\n    this.unlockScroll();\n    if (this.open) this.open = false;\n  };\n\n  /**\n   * A click on the dialog itself is a click on the overlay: the panel is an\n   * inner box, so anything landing on the dialog missed the content.\n   */\n  private onDialogClick = (event: MouseEvent) => {\n    if (!this.dismissable || event.target !== this.dialog) return;\n    this.open = false;\n  };\n\n  render() {\n    const hasHeader = Boolean(this.heading || this.description || this.showCloseButton);\n\n    return (\n      <Host>\n        <dialog\n          part=\"dialog\"\n          class=\"dialog\"\n          aria-label={this.heading ? undefined : this.label}\n          aria-labelledby={this.heading ? 'title' : undefined}\n          aria-describedby={this.description ? 'description' : undefined}\n          onCancel={this.onCancel}\n          onClose={this.onClose}\n          onClick={this.onDialogClick}\n        >\n          <div class=\"panel\" part=\"panel\">\n            {hasHeader && (\n              <header class=\"header\" part=\"header\">\n                <div class=\"headings\">\n                  {this.heading && (\n                    <h2 class=\"title\" part=\"title\" id=\"title\">\n                      {this.heading}\n                    </h2>\n                  )}\n                  {this.description && (\n                    <p class=\"description\" part=\"description\" id=\"description\">\n                      {this.description}\n                    </p>\n                  )}\n                </div>\n\n                {this.showCloseButton && (\n                  <button\n                    class=\"close\"\n                    part=\"close\"\n                    type=\"button\"\n                    aria-label=\"Close\"\n                    onClick={() => this.hide()}\n                  >\n                    <svg\n                      viewBox=\"0 0 16 16\"\n                      width=\"16\"\n                      height=\"16\"\n                      aria-hidden=\"true\"\n                      focusable=\"false\"\n                    >\n                      <path\n                        d=\"M4 4l8 8M12 4l-8 8\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.6\"\n                        stroke-linecap=\"round\"\n                        fill=\"none\"\n                      />\n                    </svg>\n                  </button>\n                )}\n              </header>\n            )}\n\n            <div class=\"body\" part=\"body\">\n              <slot />\n            </div>\n\n            {/*\n              Always rendered, hidden when empty rather than omitted: a slot\n              that is not in the tree never fires `slotchange`, so omitting it\n              would make a footer added later stay invisible for good.\n            */}\n            <footer class=\"footer\" part=\"footer\" hidden={!this.hasFooter}>\n              <slot name=\"footer\" onSlotchange={() => this.readFooter()} />\n            </footer>\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,127 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var aria = require('./aria-5oCPUGFo.js');
+var progress = require('./progress-DVUoQ3h5.js');
+var formValidity = require('./form-validity-BCrcqnZ7.js');
+var controlLabel = require('./control-label-C0eK8bPh.js');
+
+const pfSliderCss = () => `:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-2)}.label{color:var(--pf-slider-field-label, var(--pf-field-label));font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-field-required);margin-inline-start:var(--space-1)}.description{color:var(--pf-slider-field-description, var(--pf-field-description));font-size:var(--font-size-sm);margin:0}.error{color:var(--pf-slider-field-error, var(--pf-field-error));font-size:var(--font-size-sm);margin:0}.header{align-items:center;display:flex;justify-content:space-between}.value{color:var(--pf-slider-text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.slider{appearance:none;background:linear-gradient(     to right,     var(--pf-slider-action) 0,     var(--pf-slider-action) var(--pf-slider-progress, 0%),     var(--pf-slider-border) var(--pf-slider-progress, 0%),     var(--pf-slider-border) 100%   );border-radius:var(--radius-full);cursor:pointer;height:var(--pf-slider-track-height);width:100%}.slider:focus{outline:none}.slider:focus-visible{box-shadow:var(--pf-slider-focus-ring, var(--pf-focus-ring))}.slider::-webkit-slider-thumb{appearance:none;background:var(--pf-slider-bg);border:2px solid var(--pf-slider-action);border-radius:50%;box-shadow:var(--pf-slider-control-thumb-outline-shadow, var(--pf-control-thumb-outline-shadow));height:var(--pf-slider-thumb-size);margin-top:calc((var(--pf-slider-track-height) - var(--pf-slider-thumb-size)) / 2);width:var(--pf-slider-thumb-size)}.slider::-moz-range-thumb{background:var(--pf-slider-bg);border:2px solid var(--pf-slider-action);border-radius:50%;box-shadow:var(--pf-slider-control-thumb-outline-shadow, var(--pf-control-thumb-outline-shadow));height:var(--pf-slider-thumb-size);width:var(--pf-slider-thumb-size)}.slider::-moz-range-track{background:transparent;border-radius:var(--radius-full);height:var(--pf-slider-track-height)}.slider:disabled{cursor:not-allowed;opacity:0.55}.slider--invalid{background:linear-gradient(     to right,     var(--pf-slider-danger-fill) 0,     var(--pf-slider-danger-fill) var(--pf-slider-progress, 0%),     var(--pf-slider-border) var(--pf-slider-progress, 0%),     var(--pf-slider-border) 100%   )}.slider--invalid::-webkit-slider-thumb{border-color:var(--pf-slider-danger-fill)}.slider--invalid::-moz-range-thumb{border-color:var(--pf-slider-danger-fill)}`;
+
+const PfSlider = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfInput = index.createEvent(this, "pfInput");
+        this.pfChange = index.createEvent(this, "pfChange");
+        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. Reflected, because a form-associated element
+     * takes its submission name from the attribute, not this property.
+     */
+    name;
+    /** The control's value. */
+    value = 0;
+    min = 0;
+    max = 100;
+    step = 1;
+    /** Visible label, rendered in the same root so `for` actually associates. */
+    label;
+    /** Hint text below the control. */
+    description;
+    /** Error message. Its presence is what marks the control invalid. */
+    error;
+    /** Show the current value beside the label. Reflected for the stylesheet. */
+    showValue = true;
+    disabled = false;
+    /** Fires as the user drags, like the native `input` event. */
+    pfInput;
+    /** Fires when the value is committed, like the native `change` event. */
+    pfChange;
+    /** The value a form reset restores, which is the initial attribute. */
+    initialValue = 0;
+    componentWillLoad() {
+        this.initialValue = this.value;
+        this.syncFormState();
+    }
+    syncFormState() {
+        this.internals.setFormValue(`${this.current}`);
+        /*
+         * A slider always has a value — it cannot be empty the way a text field
+         * can — so `required` would never fail and the element does not offer it.
+         * Only an explicit error can make this control invalid.
+         */
+        formValidity.applyControlValidity(this.internals, true, false, this.error);
+    }
+    /** A form-associated custom element does not inherit this. */
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    /** As `checkValidity`, but also shows the browser's validation message. */
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    /** The message explaining why the control is invalid, or an empty string. */
+    async getValidationMessage() {
+        return this.internals.validationMessage;
+    }
+    /** A reset restores the value the control started with. */
+    formResetCallback() {
+        this.value = this.initialValue;
+    }
+    /** The bounds, with a non-finite or inverted range made drawable. */
+    get range() {
+        return progress.normalizeRange(Number(this.min), Number(this.max), Number(this.step));
+    }
+    /** The value as rendered: always inside the bounds. */
+    get current() {
+        const { min, max } = this.range;
+        return progress.clampToRange(Number(this.value), min, max);
+    }
+    onInput = (event) => {
+        this.value = Number(event.target.value);
+        this.pfInput.emit({ value: this.value });
+    };
+    onChange = () => {
+        this.pfChange.emit({ value: this.current });
+    };
+    render() {
+        const { min, max, step } = this.range;
+        const current = this.current;
+        const describedBy = aria.composeDescribedBy(this.description && 'description', this.error && 'error');
+        return (index.h(index.Host, { key: '6d0718760dc214dbd200824c20417bfa51d49371' }, index.h("div", { key: 'cdfb094bb52dcc8b41fcd6fabf43a2057af644cf', class: "field", part: "field" }, (this.label || this.showValue) && (index.h("div", { key: '7278ee388367c3c5a33a837cd6f26e148ced2387', class: "header", part: "header" }, this.label ? (index.h("label", { class: "label", part: "label", htmlFor: "input" }, this.label)) : (index.h("span", null)), this.showValue && (
+        // aria-hidden: the input already reports its value to
+        // assistive technology through the range role.
+        index.h("span", { key: 'f23e6b6e4db255a1f3e74785a07d185c64b89a62', class: "value", part: "value", "aria-hidden": "true" }, Math.round(current))))), index.h("input", { key: '8287d9fe81179e731ff30855f7e3d644ca7874ca', id: "input", "aria-label": controlLabel.controlAriaLabel(this.el, this.label), part: "input", class: { slider: true, 'slider--invalid': Boolean(this.error) }, type: "range", name: this.name, value: `${current}`, min: `${min}`, max: `${max}`, step: `${step}`, disabled: this.disabled, "aria-invalid": this.error ? 'true' : null, "aria-describedby": describedBy, onInput: this.onInput, onChange: this.onChange, style: { '--pf-slider-progress': `${progress.getRangePercent(current, min, max)}%` } }), this.description && (index.h("p", { key: '810b7f5aff7336fd9042b7e70a834d6a4a69e32e', class: "description", part: "description", id: "description" }, this.description)), this.error && (index.h("p", { key: 'a95ec2ba460bdce626df1e66b94b9d290b8d600d', class: "error", part: "error", id: "error" }, this.error)))));
+    }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "syncFormState": 0
+            }],
+        "error": [{
+                "syncFormState": 0
+            }],
+        "min": [{
+                "syncFormState": 0
+            }],
+        "max": [{
+                "syncFormState": 0
+            }]
+    }; }
+};
+PfSlider.style = pfSliderCss();
+
+exports.pf_slider = PfSlider;
+//# sourceMappingURL=pf-slider.entry.cjs.js.map
+
+//# sourceMappingURL=pf-slider.cjs.entry.js.map

package/dist/cjs/pf-slider.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-slider.cjs.entry.js","mappings":"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","names":["applyControlValidity","normalizeRange","clampToRange","composeDescribedBy","h","Host","controlAriaLabel","getRangePercent"],"sources":["src/components/pf-slider/pf-slider.css?tag=pf-slider&encapsulation=shadow","src/components/pf-slider/pf-slider.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-2);\n}\n\n.label {\n  color: var(--pf-slider-field-label, var(--pf-field-label));\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-field-required);\n  margin-inline-start: var(--space-1);\n}\n\n.description {\n  color: var(--pf-slider-field-description, var(--pf-field-description));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-slider-field-error, var(--pf-field-error));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.header {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n}\n\n.value {\n  color: var(--pf-slider-text-muted);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.slider {\n  appearance: none;\n  background: linear-gradient(\n    to right,\n    var(--pf-slider-action) 0,\n    var(--pf-slider-action) var(--pf-slider-progress, 0%),\n    var(--pf-slider-border) var(--pf-slider-progress, 0%),\n    var(--pf-slider-border) 100%\n  );\n  border-radius: var(--radius-full);\n  cursor: pointer;\n  height: var(--pf-slider-track-height);\n  width: 100%;\n}\n\n.slider:focus {\n  outline: none;\n}\n\n.slider:focus-visible {\n  box-shadow: var(--pf-slider-focus-ring, var(--pf-focus-ring));\n}\n\n.slider::-webkit-slider-thumb {\n  appearance: none;\n  background: var(--pf-slider-bg);\n  border: 2px solid var(--pf-slider-action);\n  border-radius: 50%;\n  box-shadow: var(--pf-slider-control-thumb-outline-shadow, var(--pf-control-thumb-outline-shadow));\n  height: var(--pf-slider-thumb-size);\n  margin-top: calc((var(--pf-slider-track-height) - var(--pf-slider-thumb-size)) / 2);\n  width: var(--pf-slider-thumb-size);\n}\n\n.slider::-moz-range-thumb {\n  background: var(--pf-slider-bg);\n  border: 2px solid var(--pf-slider-action);\n  border-radius: 50%;\n  box-shadow: var(--pf-slider-control-thumb-outline-shadow, var(--pf-control-thumb-outline-shadow));\n  height: var(--pf-slider-thumb-size);\n  width: var(--pf-slider-thumb-size);\n}\n\n.slider::-moz-range-track {\n  background: transparent;\n  border-radius: var(--radius-full);\n  height: var(--pf-slider-track-height);\n}\n\n.slider:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n.slider--invalid {\n  background: linear-gradient(\n    to right,\n    var(--pf-slider-danger-fill) 0,\n    var(--pf-slider-danger-fill) var(--pf-slider-progress, 0%),\n    var(--pf-slider-border) var(--pf-slider-progress, 0%),\n    var(--pf-slider-border) 100%\n  );\n}\n\n.slider--invalid::-webkit-slider-thumb {\n  border-color: var(--pf-slider-danger-fill);\n}\n\n.slider--invalid::-moz-range-thumb {\n  border-color: var(--pf-slider-danger-fill);\n}\n","import {\n  clampToRange,\n  composeDescribedBy,\n  getRangePercent,\n  normalizeRange,\n} from '@pitchfork-ui/core';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\n\n/**\n * A form-associated range slider.\n *\n * A native `<input type=\"range\">`, as the React component is — the drag, the\n * keyboard stepping and the touch handling are all the browser's, and nothing\n * here reimplements them.\n *\n * @part field - the wrapper around header, control and messages.\n * @part header - the row holding the label and the readout.\n * @part label - the label element.\n * @part value - the numeric readout.\n * @part input - the native range input.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-slider',\n  styleUrl: 'pf-slider.css',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n})\nexport class PfSlider {\n  @Element() el!: HTMLElement;\n\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name. Reflected, because a form-associated element\n   * takes its submission name from the attribute, not this property.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The control's value. */\n  @Prop({ mutable: true }) value = 0;\n\n  @Prop() min = 0;\n\n  @Prop() max = 100;\n\n  @Prop() step = 1;\n\n  /** Visible label, rendered in the same root so `for` actually associates. */\n  @Prop() label?: string;\n\n  /** Hint text below the control. */\n  @Prop() description?: string;\n\n  /** Error message. Its presence is what marks the control invalid. */\n  @Prop() error?: string;\n\n  /** Show the current value beside the label. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) showValue = true;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires as the user drags, like the native `input` event. */\n  @Event() pfInput!: EventEmitter<{ value: number }>;\n\n  /** Fires when the value is committed, like the native `change` event. */\n  @Event() pfChange!: EventEmitter<{ value: number }>;\n\n  /** The value a form reset restores, which is the initial attribute. */\n  private initialValue = 0;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormState();\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('min')\n  @Watch('max')\n  syncFormState() {\n    this.internals.setFormValue(`${this.current}`);\n    /*\n     * A slider always has a value — it cannot be empty the way a text field\n     * can — so `required` would never fail and the element does not offer it.\n     * Only an explicit error can make this control invalid.\n     */\n    applyControlValidity(this.internals, true, false, this.error);\n  }\n\n  /** A form-associated custom element does not inherit this. */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  /** As `checkValidity`, but also shows the browser's validation message. */\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  /** The message explaining why the control is invalid, or an empty string. */\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /** A reset restores the value the control started with. */\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  /** The bounds, with a non-finite or inverted range made drawable. */\n  private get range() {\n    return normalizeRange(Number(this.min), Number(this.max), Number(this.step));\n  }\n\n  /** The value as rendered: always inside the bounds. */\n  private get current() {\n    const { min, max } = this.range;\n    return clampToRange(Number(this.value), min, max);\n  }\n\n  private onInput = (event: Event) => {\n    this.value = Number((event.target as HTMLInputElement).value);\n    this.pfInput.emit({ value: this.value });\n  };\n\n  private onChange = () => {\n    this.pfChange.emit({ value: this.current });\n  };\n\n  render() {\n    const { min, max, step } = this.range;\n    const current = this.current;\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 || this.showValue) && (\n            <div class=\"header\" part=\"header\">\n              {this.label ? (\n                <label class=\"label\" part=\"label\" htmlFor=\"input\">\n                  {this.label}\n                </label>\n              ) : (\n                <span />\n              )}\n              {this.showValue && (\n                // aria-hidden: the input already reports its value to\n                // assistive technology through the range role.\n                <span class=\"value\" part=\"value\" aria-hidden=\"true\">\n                  {Math.round(current)}\n                </span>\n              )}\n            </div>\n          )}\n\n          <input\n            id=\"input\"\n            aria-label={controlAriaLabel(this.el, this.label)}\n            part=\"input\"\n            class={{ slider: true, 'slider--invalid': Boolean(this.error) }}\n            type=\"range\"\n            name={this.name}\n            value={`${current}`}\n            min={`${min}`}\n            max={`${max}`}\n            step={`${step}`}\n            disabled={this.disabled}\n            aria-invalid={this.error ? 'true' : null}\n            aria-describedby={describedBy}\n            onInput={this.onInput}\n            onChange={this.onChange}\n            style={{ '--pf-slider-progress': `${getRangePercent(current, min, max)}%` }}\n          />\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      </Host>\n    );\n  }\n}\n"],"version":3}