@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/esm/pf-sidebar-navigation.entry.js

@@ -0,0 +1,101 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+import { r as resolveCurrentNavItem } from './nav-DToIJg5W.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) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return 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 own slot changed, so the items below it have moved.
+     *
+     * `slotchange` is not composed, so this is the only way the navigation
+     * hears about an item appended inside a section. The event comes from a
+     * slotted child in the navigation's own tree, so `event.target` is the
+     * section 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 marked one current through its
+     * *property* — which leaves no attribute and fires no `slotchange`.
+     */
+    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 = 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 (h(Host, { key: 'c53d731970844c06cf2d86789dfbc9e111eeb83e' }, h("div", { key: '1ca019d8890305e0f1656243bcca112f461ea51c', class: { header: true, empty: !this.hasHeader }, part: "header" }, h("slot", { key: '750fc4f32e167e6b186824d1429ea25d09818c3d', name: "header", onSlotchange: () => this.refresh() })), h("nav", { key: '6ebe62b6bd357a9fac58220f31309c811a6af76a', class: "nav", part: "nav", "aria-label": this.label }, h("slot", { key: '636b7284ed6113e7c60da733da62c0562a8ba042', onSlotchange: () => this.refresh() })), h("div", { key: '9a5b32c84e82ced42bc6520806f9d02b5c7af65e', class: { footer: true, empty: !this.hasFooter }, part: "footer" }, h("slot", { key: 'd04ef066ba6168173d0f778e8dc163ba34deeef5', name: "footer", onSlotchange: () => this.refresh() }))));
+    }
+};
+PfSidebarNavigation.style = pfSidebarNavigationCss();
+
+export { PfSidebarNavigation as pf_sidebar_navigation };
+//# sourceMappingURL=pf-sidebar-navigation.entry.js.map
+
+//# sourceMappingURL=pf-sidebar-navigation.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-sidebar-navigation.entry.js","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 own slot changed, so the items below it have moved.\n   *\n   * `slotchange` is not composed, so this is the only way the navigation\n   * hears about an item appended inside a section. The event comes from a\n   * slotted child in the navigation's own tree, so `event.target` is the\n   * section rather than the host — nothing is retargeted, which is what makes\n   * a host listener safe 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 marked one current through its\n   * *property* — which leaves no attribute and fires no `slotchange`.\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"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,153 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+import { l as lockPageScroll } from './scroll-lock-C-VLyxRR.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) {
+        registerInstance(this, hostRef);
+        this.pfOpenChange = createEvent(this, "pfOpenChange");
+    }
+    get el() { return 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 = 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 (h(Host, { key: '1818b5812da54d3fd832824588a674c3cddc542a' }, 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 }, h("div", { key: '537eb70dd6bbb7c88dc8ec2e2403bf753d2b23e4', class: "panel", part: "panel" }, hasHeader && (h("header", { key: '99d780e46350c08f9f47301105fa59a5ef0ea01f', class: "header", part: "header" }, h("div", { key: '2e9619701ec5045edb9db1193b21c554bc48b545', class: "headings" }, this.heading && (h("h2", { key: '3d78f7c7a157b0ab462cef6aa33ba603feb80539', class: "title", part: "title", id: "title" }, this.heading)), this.description && (h("p", { key: 'dc947237348920e95daf0dd7766ef8f5555e10e1', class: "description", part: "description", id: "description" }, this.description))), this.showCloseButton && (h("button", { key: '11a0b9306d9c9a8ff93f54c464ae29c28c5fdc4b', class: "close", part: "close", type: "button", "aria-label": "Close", onClick: () => this.hide() }, h("svg", { key: 'a4f0e7897b9610dc1afc52fcdc848cf3c4e8995c', viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": "true", focusable: "false" }, h("path", { key: '28aff0cc434f02d2d94352192255a25ce0c2bf18', d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", fill: "none" })))))), h("div", { key: '865a0cb08a8f9a67480adfeaff37315d410f0369', class: "body", part: "body" }, h("slot", { key: '96288f62c6e01624c8f2a091d2c6580a1939e9f5' })), h("footer", { key: 'a9279652bce34ab82016ecb5d8381148c8ac53b1', class: "footer", part: "footer", hidden: !this.hasFooter }, h("slot", { key: '34f493c7ed5b3c094e3c11843461ee1dc4295c4e', name: "footer", onSlotchange: () => this.readFooter() }))))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "syncOpen": 0
+            }]
+    }; }
+};
+PfSlideoutMenu.style = pfSlideoutMenuCss();
+
+export { PfSlideoutMenu as pf_slideout_menu };
+//# sourceMappingURL=pf-slideout-menu.entry.js.map
+
+//# sourceMappingURL=pf-slideout-menu.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-slideout-menu.entry.js","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"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,123 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bm6UxEit.js';
+import { c as composeDescribedBy } from './aria-DfpCerXM.js';
+import { n as normalizeRange, a as clampToRange, b as getRangePercent } from './progress-BA6CMosJ.js';
+import { a as applyControlValidity } from './form-validity-Cr6IXrUk.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) {
+        registerInstance(this, hostRef);
+        this.pfInput = createEvent(this, "pfInput");
+        this.pfChange = 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;
+        }
+    }
+    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.
+         */
+        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 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 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 = composeDescribedBy(this.description && 'description', this.error && 'error');
+        return (h(Host, { key: 'aa9f73bc61fc164df6b960827337c57c89f3e041' }, h("div", { key: '6de203487f260a1025c2a49abeef29f3a9a1e250', class: "field", part: "field" }, (this.label || this.showValue) && (h("div", { key: 'c02c8be4fff2bb3eafbb45c8d19c777d79f984a4', class: "header", part: "header" }, this.label ? (h("label", { class: "label", part: "label", htmlFor: "input" }, this.label)) : (h("span", null)), this.showValue && (
+        // aria-hidden: the input already reports its value to
+        // assistive technology through the range role.
+        h("span", { key: '6638b3e9b626493e92c4dd76428a0ba2637956d6', class: "value", part: "value", "aria-hidden": "true" }, Math.round(current))))), h("input", { key: '03a97800d5dabc7d17e6f1cd91b9884485cafb42', id: "input", 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': `${getRangePercent(current, min, max)}%` } }), this.description && (h("p", { key: '0338224959bff19c234bfe07b8bf83027d85b17d', class: "description", part: "description", id: "description" }, this.description)), this.error && (h("p", { key: 'f469ebcbb86d81d933c0b66f578f8990d2a4b9a5', 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();
+
+export { PfSlider as pf_slider };
+//# sourceMappingURL=pf-slider.entry.js.map
+
+//# sourceMappingURL=pf-slider.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-slider.entry.js","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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nimport { applyControlValidity } from '../../form-validity';\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  @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            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"],"names":[],"mappings":"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"}

package/dist/esm/pf-sparkline.entry.js

@@ -0,0 +1,121 @@
+import { r as registerInstance, h, H as Host } from './index-Bm6UxEit.js';
+
+//#region src/sparkline.ts
+/**
+* Where each value sits.
+*
+* Three edge cases, each of which the React `Sparkline` got wrong:
+*
+* - **One value** divided by `data.length - 1`, which is zero, so `x` came out
+*   `NaN` and an `endDot` rendered `cx="NaN"`. A single value has no line, so
+*   it goes in the middle of the box, where a dot for it belongs.
+* - **Every value equal** fell to the `max - min || 1` guard and put the whole
+*   series on one edge of the box — the bottom, which reads as a collapse
+*   rather than as "no change". A flat series is centred.
+* - **No values** is an empty list, which is the one it did handle.
+*/
+function sparklinePoints(data, { width, height, padding }) {
+	if (data.length === 0) return [];
+	if (data.length === 1) return [[width / 2, height / 2]];
+	const min = Math.min(...data);
+	const max = Math.max(...data);
+	const innerWidth = width - padding * 2;
+	const innerHeight = height - padding * 2;
+	if (max === min) return data.map((_, index) => [padding + index / (data.length - 1) * innerWidth, height / 2]);
+	const range = max - min;
+	return data.map((value, index) => [padding + index / (data.length - 1) * innerWidth, padding + (1 - (value - min) / range) * innerHeight]);
+}
+/** The line through the points, or `''` when there is no line to draw. */
+function sparklineLinePath(points) {
+	if (points.length < 2) return "";
+	const [first, ...rest] = points;
+	return [`M ${first[0]} ${first[1]}`, ...rest.map(([x, y]) => `L ${x} ${y}`)].join(" ");
+}
+/**
+* The same line, closed down to `bottom` and back, for the filled variant.
+*
+* A separate function rather than a flag on `sparklineLinePath`, because the
+* React version's `buildPath(points, close = false)` took one and its closing
+* branch interpolated the **boolean** into the path (`L ${lastX} ${close}`).
+* It was never reached — every call site passed one argument — so the broken
+* branch sat there looking like working code, and the area path was written
+* out a second time inline.
+*/
+function sparklineAreaPath(points, bottom) {
+	if (points.length < 2) return "";
+	const line = sparklineLinePath(points);
+	const first = points[0];
+	return `${line} L ${points[points.length - 1][0]} ${bottom} L ${first[0]} ${bottom} Z`;
+}
+
+const pfSparklineCss = () => `:host{display:inline-block;line-height:0}:host([hidden]){display:none}.svg{display:block;overflow:visible}.area{opacity:var(--pf-sparkline-area-opacity, 0.15)}:host([animated]) .line{animation:pf-sparkline-draw var(--duration-slow) var(--easing-standard) both;stroke-dasharray:1}@keyframes pf-sparkline-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}:host([animated]) .area{animation:pf-sparkline-fade var(--duration-slow) var(--easing-standard) both}@keyframes pf-sparkline-fade{from{opacity:0}to{opacity:var(--pf-sparkline-area-opacity, 0.15)}}:host([animated]) .dot{animation:pf-sparkline-dot var(--duration-fast) var(--easing-decelerate) var(--duration-moderate)     both}@keyframes pf-sparkline-dot{from{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){:host([animated]) .line,:host([animated]) .area,:host([animated]) .dot{animation:none}}`;
+
+const PfSparkline = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * The values to plot.
+     *
+     * A `number[]` for a framework consumer, and a comma-separated string for
+     * plain HTML — `data="1,4,2,8"` — because Stencil coerces an attribute only
+     * for the primitive types it recognises, and an array is not one of them.
+     * Read through `values` below, never directly.
+     */
+    data = [];
+    width = 120;
+    height = 36;
+    /** `line` draws only the stroke; `area` fills under it too. Reflected. */
+    variant = 'line';
+    strokeWidth = 1.5;
+    /** Overrides the token colour, for a chart that has to match its data. */
+    color;
+    /** Draw a dot at the last value. */
+    endDot = false;
+    /**
+     * Draw the line in on first paint. Off by default. Reflected.
+     *
+     * `animated`, where the React prop is `animate`: `animate` is a **reserved
+     * public name** — `Element.prototype.animate` is the Web Animations API —
+     * and Stencil refuses to build a prop that shadows a prototype member. The
+     * React component is a function taking props and has no such collision.
+     */
+    animated = false;
+    /**
+     * The chart's accessible name.
+     *
+     * Without one the chart is `presentation`: a sparkline with no name is
+     * decoration beside a number that already says what it means, and
+     * announcing an unnamed graphic is worse than skipping it.
+     */
+    label;
+    /** The values, however they arrived. */
+    get values() {
+        if (Array.isArray(this.data))
+            return this.data.map(Number).filter(Number.isFinite);
+        return String(this.data ?? '')
+            .split(',')
+            .map((part) => Number(part.trim()))
+            .filter(Number.isFinite);
+    }
+    render() {
+        const width = Number(this.width) || 120;
+        const height = Number(this.height) || 36;
+        const strokeWidth = Number(this.strokeWidth) || 1.5;
+        const padding = strokeWidth + 2;
+        const points = sparklinePoints(this.values, { width, height, padding });
+        const line = sparklineLinePath(points);
+        const area = this.variant === 'area' ? sparklineAreaPath(points, height - padding + strokeWidth) : '';
+        const last = points[points.length - 1];
+        const stroke = this.color ?? 'var(--pf-sparkline-color)';
+        return (h(Host, { key: '48c34496ff9ef2f3f4a41c88306c9b889675f75a' }, h("svg", { key: 'a20441dd7a4ac13826ef0a9a1182e617ed401100', class: "svg", part: "svg", width: width, height: height, viewBox: `0 0 ${width} ${height}`, role: this.label ? 'img' : 'presentation', "aria-label": this.label }, area && h("path", { key: 'ae71a2b060e46406eb6f1e62faae67d8bd624b10', class: "area", part: "area", d: area, fill: stroke }), line && (h("path", { key: 'ebbb9d2e7fb866410a04229752e76963a702761e', class: "line", part: "line", d: line, fill: "none", stroke: stroke, "stroke-width": strokeWidth, "stroke-linecap": "round", "stroke-linejoin": "round",
+            // The dash maths below is then independent of the real length.
+            pathLength: this.animated ? 1 : undefined })), this.endDot && last && (h("circle", { key: '43b0fe15ba268da3ec1d80b3ade57b3d12a987bc', class: "dot", part: "dot", cx: last[0], cy: last[1], r: strokeWidth + 1.5, fill: stroke })))));
+    }
+};
+PfSparkline.style = pfSparklineCss();
+
+export { PfSparkline as pf_sparkline };
+//# sourceMappingURL=pf-sparkline.entry.js.map
+
+//# sourceMappingURL=pf-sparkline.entry.js.map