@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/collection/components/pf-slideout-menu/pf-slideout-menu.js

@@ -0,0 +1,414 @@
+import { lockPageScroll } from "@pitchfork-ui/core";
+import { h, Host, } from "@stencil/core";
+/**
+ * A panel that slides in from the edge of the screen — a modal dialog that
+ * happens to be anchored to a side rather than centred.
+ *
+ * Which is why this is a native `<dialog>` opened with `showModal()`, exactly
+ * as `pf-modal` is. The React component hand-rolls the whole modal contract:
+ * a focus trap over `getFocusableElements`, a `focusin` listener to pull focus
+ * back, Escape handling, an overlay element, and focus restoration on close —
+ * about ninety lines. `showModal()` gives all of it, and the element needs
+ * none of core's `trapFocus`.
+ *
+ * The one thing it does not give is a page-scroll lock, so that comes from
+ * core's reference-counted `lockPageScroll`.
+ *
+ * @slot - the panel's body.
+ * @slot footer - actions pinned below the body.
+ * @part dialog - the native dialog, which is also the overlay.
+ * @part panel - the sliding panel.
+ * @part header - the header row, present only when there is a heading.
+ * @part title - the heading.
+ * @part description - the supporting line under the heading.
+ * @part body - the scrolling region the default slot renders into.
+ * @part footer - the footer region.
+ * @part close - the close button.
+ */
+export class PfSlideoutMenu {
+    el;
+    /** 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 is() { return "pf-slideout-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-slideout-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-slideout-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the panel is showing. Reflected so the stylesheet can select on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfSlideoutMenuPlacement",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {
+                        "PfSlideoutMenuPlacement": {
+                            "location": "local",
+                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-slideout-menu/pf-slideout-menu.tsx",
+                            "id": "src/components/pf-slideout-menu/pf-slideout-menu.tsx::PfSlideoutMenuPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which edge it slides in from. Reflected; the stylesheet positions on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "placement",
+                "defaultValue": "'right'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfSlideoutMenuSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "PfSlideoutMenuSize": {
+                            "location": "local",
+                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-slideout-menu/pf-slideout-menu.tsx",
+                            "id": "src/components/pf-slideout-menu/pf-slideout-menu.tsx::PfSlideoutMenuSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Panel width. Reflected so the stylesheet can select on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The heading shown in the header."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A supporting line under the heading."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name, for when there is no `heading` to name it.\n\nWith a heading, `aria-labelledby` is used instead and points at the\nheading's id. That works here and not in `pf-modal` because this heading\nis a prop rendered into this element's own shadow root, so the IDREF never\ncrosses a boundary \u2014 `pf-modal`'s header is slotted light DOM, which is\nwhy it has to fall back to copying text into `aria-label`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "dismissable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Close on Escape or a click on the overlay. Defaults to true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissable",
+                "defaultValue": "true"
+            },
+            "showCloseButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Render the corner close button. Defaults to true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-close-button",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFooter": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfOpenChange",
+                "name": "pfOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires whenever the panel opens or closes, whoever caused it."
+                },
+                "complexType": {
+                    "original": "{ open: boolean }",
+                    "resolved": "{ open: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the panel.",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the panel.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "syncOpen"
+            }];
+    }
+}
+//# sourceMappingURL=pf-slideout-menu.js.map

package/dist/collection/components/pf-slideout-menu/pf-slideout-menu.js.map

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

package/dist/collection/components/pf-slider/pf-slider.css

@@ -0,0 +1,119 @@
+: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);
+}