@pitchfork-ui/elements 0.0.0-stage → 0.2.1

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

@@ -0,0 +1 @@
+{"file":"pf-notification.cjs.entry.js","mappings":"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","names":["animationsFinished","h","Host","liveRegionRole","severityIconName"],"sources":["src/components/pf-notification/pf-notification.css?tag=pf-notification&encapsulation=shadow","src/components/pf-notification/pf-notification.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.notification {\n  align-items: flex-start;\n  background: var(--pf-notification-bg);\n  border: 1px solid var(--pf-notification-border);\n  border-radius: var(--radius-md);\n  box-shadow: var(--pf-notification-elevation-floating-shadow, var(--pf-elevation-floating-shadow));\n  color: var(--pf-notification-text);\n  display: grid;\n  gap: var(--space-3);\n  grid-template-columns: auto minmax(0, 1fr) auto;\n  padding: var(--space-3);\n  width: 100%;\n  animation: pf-notification-in var(--pf-transition-enter);\n}\n\n@media (--md) {\n  .notification {\n    padding: var(--space-4);\n  }\n}\n\n/*\n * Its own copies: @keyframes do not cross a shadow boundary, so the global\n * sheet's `pf-notification-in` is invisible from in here.\n */\n@keyframes pf-notification-in {\n  from {\n    opacity: 0;\n    transform: translateX(12px);\n  }\n}\n\n/* Slides out and collapses, so the stack above closes the gap behind it. */\n:host([exiting]) .notification {\n  animation: pf-notification-out var(--duration-moderate) var(--easing-accelerate) forwards;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n@keyframes pf-notification-out {\n  from {\n    opacity: 1;\n    transform: translateX(0);\n    max-height: 480px;\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n    max-height: 0;\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .notification,\n  :host([exiting]) .notification {\n    animation: none;\n  }\n}\n\n:host([variant='info']) .notification {\n  background: color-mix(\n    in srgb,\n    var(--pf-notification-info-bg) 45%,\n    var(--pf-notification-mix-base)\n  );\n  border-color: var(--pf-notification-info-border);\n}\n\n:host([variant='success']) .notification {\n  background: color-mix(\n    in srgb,\n    var(--pf-notification-success-bg) 45%,\n    var(--pf-notification-mix-base)\n  );\n  border-color: var(--pf-notification-success-border);\n}\n\n:host([variant='warning']) .notification {\n  background: color-mix(\n    in srgb,\n    var(--pf-notification-warning-bg) 45%,\n    var(--pf-notification-mix-base)\n  );\n  border-color: var(--pf-notification-warning-border);\n}\n\n:host([variant='danger']) .notification {\n  background: color-mix(\n    in srgb,\n    var(--pf-notification-danger-bg) 45%,\n    var(--pf-notification-mix-base)\n  );\n  border-color: var(--pf-notification-danger-border);\n}\n\n.icon {\n  align-items: center;\n  display: inline-flex;\n  font-size: var(--font-size-lg);\n  height: 1em;\n  justify-content: center;\n  line-height: 1;\n  margin-top: 2px;\n  width: 1em;\n}\n\n:host([variant='info']) .icon {\n  color: var(--pf-notification-info-icon);\n}\n\n:host([variant='success']) .icon {\n  color: var(--pf-notification-success-icon);\n}\n\n:host([variant='warning']) .icon {\n  color: var(--pf-notification-warning-icon);\n}\n\n:host([variant='danger']) .icon {\n  color: var(--pf-notification-danger-icon);\n}\n\n.content {\n  display: grid;\n  gap: var(--space-1);\n  min-width: 0;\n}\n\n.title {\n  color: var(--pf-notification-text);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-semibold);\n  line-height: 1.35;\n  margin: 0;\n}\n\n:host([variant='info']) .title {\n  color: var(--pf-notification-info-title);\n}\n\n.body {\n  color: var(--pf-notification-text-muted);\n  font-size: var(--font-size-sm);\n  line-height: 1.45;\n}\n\n:host([variant='info']) .body {\n  color: var(--pf-notification-info-icon);\n}\n\n.body[hidden] {\n  display: none;\n}\n\nslot[name='action']::slotted(*) {\n  margin-top: var(--space-2);\n}\n\n.dismiss {\n  align-items: center;\n  align-self: flex-start;\n  background: transparent;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-notification-text-muted);\n  cursor: pointer;\n  display: inline-flex;\n  height: 28px;\n  justify-content: center;\n  width: 28px;\n}\n\n:host([variant='info']) .dismiss {\n  color: var(--pf-notification-info-icon);\n}\n\n.dismiss:hover,\n.dismiss:focus-visible {\n  background: var(--pf-notification-bg-subtle);\n  color: var(--pf-notification-text);\n  outline: none;\n}\n\n:host([variant='info']) .dismiss:hover,\n:host([variant='info']) .dismiss:focus-visible {\n  background: var(--pf-notification-info-hover-bg);\n  color: var(--pf-notification-info-hover-icon);\n}\n","import {\n  animationsFinished,\n  liveRegionRole,\n  severityIconName,\n  type LiveRegionVariant,\n} 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} from '@stencil/core';\n\nexport type PfNotificationVariant = LiveRegionVariant;\n\n/**\n * A notification: an icon, a heading, a body and an optional dismiss button.\n *\n * The role comes from core's `liveRegionRole`, so `warning` and `danger`\n * announce assertively and `info` and `success` wait their turn. The React\n * component used to be `role=\"status\"` for all four — the rule lived in\n * `Alert` and nowhere else — which is why the mapping is now shared.\n *\n * @slot - the body, used instead of the `description` prop when present.\n * @slot icon - replaces the icon the variant would choose.\n * @slot action - buttons or links under the body.\n * @part notification - the root box.\n * @part icon - the icon's box.\n * @part title - the heading.\n * @part body - the description's box.\n * @part dismiss - the dismiss button.\n */\n@Component({\n  tag: 'pf-notification',\n  styleUrl: 'pf-notification.css',\n  shadow: true,\n})\nexport class PfNotification {\n  @Element() el!: HTMLElement;\n\n  /** Severity. Reflected, because the stylesheet selects on it. */\n  @Prop({ reflect: true }) variant: PfNotificationVariant = 'info';\n\n  /** The bold first line. */\n  @Prop() heading?: string;\n\n  /** The body, when nothing is slotted. */\n  @Prop() description?: string;\n\n  /** Render the dismiss button. */\n  @Prop({ reflect: true }) dismissable = false;\n\n  /** Set while the exit animation plays. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) exiting = false;\n\n  /**\n   * Fires once the notification has finished leaving, which is the point at\n   * which its owner should remove it from the DOM.\n   */\n  @Event() pfDismiss!: EventEmitter<void>;\n\n  @State() hasSlottedBody = false;\n\n  componentWillLoad() {\n    this.readBody();\n  }\n\n  /**\n   * Starts the exit animation and resolves when it has finished, having\n   * emitted `pfDismiss`. Calling it twice is harmless.\n   */\n  @Method()\n  async dismiss(): Promise<void> {\n    if (this.exiting) return;\n    this.exiting = true;\n    await this.waitForExit();\n    this.pfDismiss.emit();\n  }\n\n  /**\n   * Waits for the exit animation, or returns straight away when there is not\n   * one. Core's, so `pf-alert` and the React `useExitAnimation` wait the same\n   * way — and none of them waits on a guessed duration.\n   */\n  private async waitForExit(): Promise<void> {\n    await animationsFinished(this.el.shadowRoot?.querySelector('.notification'));\n  }\n\n  private readBody() {\n    this.hasSlottedBody = Array.from(this.el.childNodes).some((node) =>\n      node.nodeType === Node.ELEMENT_NODE\n        ? !(node as Element).getAttribute('slot')\n        : Boolean(node.textContent?.trim()),\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"notification\" part=\"notification\" role={liveRegionRole(this.variant)}>\n          <span class=\"icon\" part=\"icon\" aria-hidden=\"true\">\n            <slot name=\"icon\">\n              <pf-icon name={severityIconName(this.variant)}></pf-icon>\n            </slot>\n          </span>\n\n          <div class=\"content\">\n            {this.heading && (\n              <p class=\"title\" part=\"title\">\n                {this.heading}\n              </p>\n            )}\n\n            <div class=\"body\" part=\"body\" hidden={!this.hasSlottedBody && !this.description}>\n              <slot onSlotchange={() => this.readBody()}>{this.description}</slot>\n            </div>\n\n            <slot name=\"action\" />\n          </div>\n\n          {this.dismissable && (\n            <button\n              class=\"dismiss\"\n              part=\"dismiss\"\n              type=\"button\"\n              aria-label=\"Dismiss notification\"\n              onClick={() => this.dismiss()}\n            >\n              <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\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        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pf-number-input.cjs.entry.js

@@ -0,0 +1,193 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var aria = require('./aria-5oCPUGFo.js');
+var keys = require('./keys-S3YTuCcn.js');
+var numberField = require('./number-field-DIVYv25j.js');
+var formValidity = require('./form-validity-BCrcqnZ7.js');
+var controlLabel = require('./control-label-C0eK8bPh.js');
+
+const pfNumberInputCss = () => `:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-2)}.label{color:var(--pf-numberinput-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)}.control{align-items:stretch;background:var(--pf-numberinput-bg);border:1px solid var(--pf-numberinput-border);border-radius:var(--radius-md);display:inline-flex;min-height:40px;overflow:hidden;transition:border var(--pf-transition-fast),     box-shadow var(--pf-transition-fast);width:100%}.control:focus-within{border-color:var(--pf-numberinput-focus-border);box-shadow:var(--pf-numberinput-focus-ring, var(--pf-focus-ring))}.control--invalid{border-color:var(--pf-numberinput-invalid-border)}:host([disabled]) .control{background:var(--pf-control-bg-disabled);border-color:var(--pf-control-border-disabled);color:var(--pf-control-text-disabled);opacity:0.6}.input{background:transparent;border:none;color:var(--pf-numberinput-text);flex:1;font:inherit;min-width:0;outline:none;padding:0 var(--space-3);text-align:center;width:100%}.input::placeholder{color:var(--pf-numberinput-placeholder)}.input:disabled{cursor:not-allowed}.step{align-items:center;align-self:stretch;background:var(--pf-numberinput-step-bg);border:none;color:var(--pf-numberinput-step-text);cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;padding:0;transition:background var(--pf-transition-fast),     color var(--pf-transition-fast);width:40px}.step:hover:not(:disabled){background:var(--pf-numberinput-step-hover-bg);color:var(--pf-numberinput-step-hover-text)}.step:disabled{cursor:not-allowed;opacity:0.45}[part='decrement']{border-inline-end:1px solid var(--pf-numberinput-border)}[part='increment']{border-inline-start:1px solid var(--pf-numberinput-border)}.step pf-icon{font-size:16px}.description{color:var(--pf-numberinput-field-description, var(--pf-field-description));font-size:var(--font-size-sm);margin:0}.error{color:var(--pf-field-error);font-size:var(--font-size-sm);margin:0}@media (prefers-reduced-motion: reduce){.control,.step{transition:none}}`;
+
+const PfNumberInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        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 value, as a string. Empty means an empty field. */
+    value = '';
+    /** The lowest value the field accepts. */
+    min;
+    /** The highest value the field accepts. */
+    max;
+    /** How far one step moves, and what the result is rounded to. */
+    step = 1;
+    /** Visible label. Rendered in the same root as the input, so `for` works. */
+    label;
+    /** Hint text below the control. */
+    description;
+    /** Error message. Its presence is what marks the control invalid. */
+    error;
+    placeholder;
+    required = false;
+    disabled = false;
+    /** The step-down button's accessible name. */
+    decrementLabel = 'Decrease';
+    /** The step-up button's accessible name. */
+    incrementLabel = 'Increase';
+    /** Fires when the value changes, with the parsed number beside the string. */
+    pfChange;
+    /**
+     * What the input shows while it is being edited, which is not always the
+     * value: a half-typed "-" or "1." is neither a number nor a reason to throw
+     * the keystroke away.
+     */
+    draft = null;
+    /** The value a form reset restores, which is the initial attribute. */
+    initialValue = '';
+    componentWillLoad() {
+        this.initialValue = this.value ?? '';
+        this.syncFormState();
+    }
+    syncFormState() {
+        this.internals.setFormValue(this.value ?? '');
+        formValidity.applyControlValidity(this.internals, Boolean(this.value), this.required, 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 field started with. */
+    formResetCallback() {
+        this.value = this.initialValue;
+        this.draft = null;
+    }
+    /** Steps the value up or down, as the buttons and the arrows do. */
+    async stepBy(direction) {
+        this.step_(direction);
+    }
+    get bounds() {
+        return {
+            min: this.min === undefined ? -Infinity : Number(this.min),
+            max: this.max === undefined ? Infinity : Number(this.max),
+            step: Number(this.step) || 1,
+        };
+    }
+    get current() {
+        return numberField.parseNumberValue(this.value);
+    }
+    get atMin() {
+        const { min } = this.bounds;
+        return this.current !== null && this.current <= min;
+    }
+    get atMax() {
+        const { max } = this.bounds;
+        return this.current !== null && this.current >= max;
+    }
+    commit(next) {
+        const { min, max, step } = this.bounds;
+        const value = next === null ? '' : String(numberField.roundToStep(numberField.clampNumber(next, min, max), step));
+        if (value === this.value)
+            return;
+        this.value = value;
+        this.pfChange.emit({ value, number: numberField.parseNumberValue(value) });
+    }
+    step_(direction) {
+        if (this.disabled)
+            return;
+        this.draft = null;
+        this.commit(numberField.stepNumber(this.current, direction, this.bounds));
+    }
+    onInput = (event) => {
+        const raw = event.target.value;
+        /*
+         * The draft is kept as typed and the value follows it, rather than the
+         * input being rewritten from the value: clamping mid-keystroke would make
+         * "5" unreachable in a field whose minimum is 50, and rounding would eat
+         * the "." of "1.5" as it was typed.
+         */
+        this.draft = raw;
+        const parsed = numberField.parseNumberValue(raw);
+        if (raw.trim() === '') {
+            this.commit(null);
+            return;
+        }
+        if (parsed !== null)
+            this.commit(parsed);
+    };
+    /** On blur the draft is given up, so the field shows its real value. */
+    onBlur = () => {
+        this.draft = null;
+    };
+    onKeyDown = (event) => {
+        if (this.disabled)
+            return;
+        const { min, max } = this.bounds;
+        if (event.key === keys.Keys.ArrowUp) {
+            event.preventDefault();
+            this.step_(1);
+        }
+        else if (event.key === keys.Keys.ArrowDown) {
+            event.preventDefault();
+            this.step_(-1);
+        }
+        else if (event.key === keys.Keys.Home && Number.isFinite(min)) {
+            event.preventDefault();
+            this.draft = null;
+            this.commit(min);
+        }
+        else if (event.key === keys.Keys.End && Number.isFinite(max)) {
+            event.preventDefault();
+            this.draft = null;
+            this.commit(max);
+        }
+    };
+    render() {
+        // IDs are scoped to this shadow root, so they can be literal.
+        const describedBy = aria.composeDescribedBy(this.description && 'description', this.error && 'error');
+        const { min, max } = this.bounds;
+        const shown = this.draft ?? numberField.formatNumberValue(this.current);
+        return (index.h(index.Host, { key: '27f7f45a2732cbca6d252f4b9128901ed7868663' }, index.h("div", { key: '75bfab2f72a83b830fd960e5fae19b9941eeae6c', class: "field", part: "field" }, this.label && (index.h("label", { key: 'f2e60206f153933cde6b36a23c510225bd5fb2ab', class: "label", part: "label", htmlFor: "input" }, this.label, this.required && (index.h("span", { key: '3925b4690d5b560190aaa04e7e7cf83453c7c49e', class: "required", "aria-hidden": "true" }, "*")))), index.h("div", { key: 'dcf1949c7fd8626c5a334fd3d72d8c4544369b41', class: { control: true, 'control--invalid': Boolean(this.error) }, part: "control" }, index.h("button", { key: '03e3592fa8ff57a23e3675c475e7a66908af6cc3', type: "button", class: "step", part: "decrement", "aria-label": this.decrementLabel, disabled: this.disabled || this.atMin, tabindex: "-1", onMouseDown: (event) => event.preventDefault(), onClick: () => this.step_(-1) }, index.h("pf-icon", { key: '157e45ebe127230052c34215c3f88d487dacd41a', name: "minus", "aria-hidden": "true" })), index.h("input", { key: '6fb05cb46de22b37387a16869f93b31b2ea6cc0a', id: "input", "aria-label": controlLabel.controlAriaLabel(this.el, this.label), part: "input", class: "input", type: "text", inputMode: "decimal", role: "spinbutton", name: this.name, value: shown, placeholder: this.placeholder, required: this.required, disabled: this.disabled, autocomplete: "off", "aria-invalid": this.error ? 'true' : null, "aria-describedby": describedBy, "aria-valuenow": this.current ?? null, "aria-valuemin": Number.isFinite(min) ? min : null, "aria-valuemax": Number.isFinite(max) ? max : null, onInput: this.onInput, onBlur: this.onBlur, onKeyDown: this.onKeyDown }), index.h("button", { key: '9b6eeddb4884a2961ac5a5cfe6a406111635cf79', type: "button", class: "step", part: "increment", "aria-label": this.incrementLabel, disabled: this.disabled || this.atMax, tabindex: "-1", onMouseDown: (event) => event.preventDefault(), onClick: () => this.step_(1) }, index.h("pf-icon", { key: '2a97e66ca7bf42c6d10a872c4b8eec52316d0784', name: "plus", "aria-hidden": "true" }))), this.description && (index.h("p", { key: '3943b0c1ec5ad58d749b0e6d1fb5f60a17eb917e', class: "description", part: "description", id: "description" }, this.description)), this.error && (index.h("p", { key: '5aafabcd042976f000f906e6c16fc3eb45d57bf6', 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
+            }],
+        "required": [{
+                "syncFormState": 0
+            }]
+    }; }
+};
+PfNumberInput.style = pfNumberInputCss();
+
+exports.pf_number_input = PfNumberInput;
+//# sourceMappingURL=pf-number-input.entry.cjs.js.map
+
+//# sourceMappingURL=pf-number-input.cjs.entry.js.map

package/dist/cjs/pf-number-input.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-number-input.cjs.entry.js","mappings":"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","names":["applyControlValidity","parseNumberValue","roundToStep","clampNumber","stepNumber","Keys","composeDescribedBy","formatNumberValue","h","Host","controlAriaLabel"],"sources":["src/components/pf-number-input/pf-number-input.css?tag=pf-number-input&encapsulation=shadow","src/components/pf-number-input/pf-number-input.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-numberinput-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.control {\n  align-items: stretch;\n  background: var(--pf-numberinput-bg);\n  border: 1px solid var(--pf-numberinput-border);\n  border-radius: var(--radius-md);\n  display: inline-flex;\n  min-height: 40px;\n  overflow: hidden;\n  transition:\n    border var(--pf-transition-fast),\n    box-shadow var(--pf-transition-fast);\n  width: 100%;\n}\n\n.control:focus-within {\n  border-color: var(--pf-numberinput-focus-border);\n  box-shadow: var(--pf-numberinput-focus-ring, var(--pf-focus-ring));\n}\n\n.control--invalid {\n  border-color: var(--pf-numberinput-invalid-border);\n}\n\n/*\n * `:host([disabled])` rather than the React component's\n * `:has(.input:disabled)`: the host carries the reflected attribute, which is\n * both simpler and the thing a consumer's own stylesheet can see.\n */\n:host([disabled]) .control {\n  background: var(--pf-control-bg-disabled);\n  border-color: var(--pf-control-border-disabled);\n  color: var(--pf-control-text-disabled);\n  opacity: 0.6;\n}\n\n.input {\n  background: transparent;\n  border: none;\n  color: var(--pf-numberinput-text);\n  flex: 1;\n  font: inherit;\n  min-width: 0;\n  outline: none;\n  padding: 0 var(--space-3);\n  text-align: center;\n  width: 100%;\n}\n\n.input::placeholder {\n  color: var(--pf-numberinput-placeholder);\n}\n\n.input:disabled {\n  cursor: not-allowed;\n}\n\n.step {\n  align-items: center;\n  align-self: stretch;\n  background: var(--pf-numberinput-step-bg);\n  border: none;\n  color: var(--pf-numberinput-step-text);\n  cursor: pointer;\n  display: inline-flex;\n  flex-shrink: 0;\n  justify-content: center;\n  padding: 0;\n  transition:\n    background var(--pf-transition-fast),\n    color var(--pf-transition-fast);\n  width: 40px;\n}\n\n.step:hover:not(:disabled) {\n  background: var(--pf-numberinput-step-hover-bg);\n  color: var(--pf-numberinput-step-hover-text);\n}\n\n.step:disabled {\n  cursor: not-allowed;\n  opacity: 0.45;\n}\n\n[part='decrement'] {\n  border-inline-end: 1px solid var(--pf-numberinput-border);\n}\n\n[part='increment'] {\n  border-inline-start: 1px solid var(--pf-numberinput-border);\n}\n\n.step pf-icon {\n  font-size: 16px;\n}\n\n.description {\n  color: var(--pf-numberinput-field-description, var(--pf-field-description));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-field-error);\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .control,\n  .step {\n    transition: none;\n  }\n}\n","import {\n  clampNumber,\n  composeDescribedBy,\n  formatNumberValue,\n  Keys,\n  parseNumberValue,\n  roundToStep,\n  stepNumber,\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  State,\n  Watch,\n} from '@stencil/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\n\n/**\n * A form-associated stepper field.\n *\n * The value is a **string** rather than a number, because that is what an\n * attribute can carry and what a form submits; `pfChange` reports the parsed\n * number beside it, which is what a framework consumer wants. An empty string\n * is an empty field — not zero, which is a value someone chose.\n *\n * All of the arithmetic is core's, so this and the React `NumberInput` step,\n * round and clamp identically: ten steps of `0.1` reach exactly 1 in both.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part control - the box holding the steppers and the input.\n * @part decrement - the step-down button.\n * @part input - the native input.\n * @part increment - the step-up button.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-number-input',\n  styleUrl: 'pf-number-input.css',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n})\nexport class PfNumberInput {\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 value, as a string. Empty means an empty field. */\n  @Prop({ mutable: true }) value = '';\n\n  /** The lowest value the field accepts. */\n  @Prop() min?: number;\n\n  /** The highest value the field accepts. */\n  @Prop() max?: number;\n\n  /** How far one step moves, and what the result is rounded to. */\n  @Prop() step = 1;\n\n  /** Visible label. Rendered in the same root as the input, so `for` works. */\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  @Prop() placeholder?: string;\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The step-down button's accessible name. */\n  @Prop() decrementLabel = 'Decrease';\n\n  /** The step-up button's accessible name. */\n  @Prop() incrementLabel = 'Increase';\n\n  /** Fires when the value changes, with the parsed number beside the string. */\n  @Event() pfChange!: EventEmitter<{ value: string; number: number | null }>;\n\n  /**\n   * What the input shows while it is being edited, which is not always the\n   * value: a half-typed \"-\" or \"1.\" is neither a number nor a reason to throw\n   * the keystroke away.\n   */\n  @State() draft: string | null = null;\n\n  /** The value a form reset restores, which is the initial attribute. */\n  private initialValue = '';\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    this.internals.setFormValue(this.value ?? '');\n    applyControlValidity(this.internals, Boolean(this.value), this.required, 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 field started with. */\n  formResetCallback() {\n    this.value = this.initialValue;\n    this.draft = null;\n  }\n\n  /** Steps the value up or down, as the buttons and the arrows do. */\n  @Method()\n  async stepBy(direction: 1 | -1): Promise<void> {\n    this.step_(direction);\n  }\n\n  private get bounds() {\n    return {\n      min: this.min === undefined ? -Infinity : Number(this.min),\n      max: this.max === undefined ? Infinity : Number(this.max),\n      step: Number(this.step) || 1,\n    };\n  }\n\n  private get current(): number | null {\n    return parseNumberValue(this.value);\n  }\n\n  private get atMin(): boolean {\n    const { min } = this.bounds;\n    return this.current !== null && this.current <= min;\n  }\n\n  private get atMax(): boolean {\n    const { max } = this.bounds;\n    return this.current !== null && this.current >= max;\n  }\n\n  private commit(next: number | null) {\n    const { min, max, step } = this.bounds;\n    const value = next === null ? '' : String(roundToStep(clampNumber(next, min, max), step));\n    if (value === this.value) return;\n\n    this.value = value;\n    this.pfChange.emit({ value, number: parseNumberValue(value) });\n  }\n\n  private step_(direction: 1 | -1) {\n    if (this.disabled) return;\n    this.draft = null;\n    this.commit(stepNumber(this.current, direction, this.bounds));\n  }\n\n  private onInput = (event: Event) => {\n    const raw = (event.target as HTMLInputElement).value;\n    /*\n     * The draft is kept as typed and the value follows it, rather than the\n     * input being rewritten from the value: clamping mid-keystroke would make\n     * \"5\" unreachable in a field whose minimum is 50, and rounding would eat\n     * the \".\" of \"1.5\" as it was typed.\n     */\n    this.draft = raw;\n    const parsed = parseNumberValue(raw);\n    if (raw.trim() === '') {\n      this.commit(null);\n      return;\n    }\n    if (parsed !== null) this.commit(parsed);\n  };\n\n  /** On blur the draft is given up, so the field shows its real value. */\n  private onBlur = () => {\n    this.draft = null;\n  };\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n    const { min, max } = this.bounds;\n\n    if (event.key === Keys.ArrowUp) {\n      event.preventDefault();\n      this.step_(1);\n    } else if (event.key === Keys.ArrowDown) {\n      event.preventDefault();\n      this.step_(-1);\n    } else if (event.key === Keys.Home && Number.isFinite(min)) {\n      event.preventDefault();\n      this.draft = null;\n      this.commit(min);\n    } else if (event.key === Keys.End && Number.isFinite(max)) {\n      event.preventDefault();\n      this.draft = null;\n      this.commit(max);\n    }\n  };\n\n  render() {\n    // IDs are scoped to this shadow root, so they can be literal.\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n    const { min, max } = this.bounds;\n    const shown = this.draft ?? formatNumberValue(this.current);\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"input\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n\n          <div class={{ control: true, 'control--invalid': Boolean(this.error) }} part=\"control\">\n            {/*\n              The steppers are out of the tab order and the arrows are on the\n              input, which is the spinbutton pattern: a keyboard user steps\n              without leaving the field. `mousedown` is prevented so a click\n              does not take focus off it either.\n            */}\n            <button\n              type=\"button\"\n              class=\"step\"\n              part=\"decrement\"\n              aria-label={this.decrementLabel}\n              disabled={this.disabled || this.atMin}\n              tabindex=\"-1\"\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={() => this.step_(-1)}\n            >\n              <pf-icon name=\"minus\" aria-hidden=\"true\"></pf-icon>\n            </button>\n\n            <input\n              id=\"input\"\n              aria-label={controlAriaLabel(this.el, this.label)}\n              part=\"input\"\n              class=\"input\"\n              type=\"text\"\n              inputMode=\"decimal\"\n              role=\"spinbutton\"\n              name={this.name}\n              value={shown}\n              placeholder={this.placeholder}\n              required={this.required}\n              disabled={this.disabled}\n              autocomplete=\"off\"\n              aria-invalid={this.error ? 'true' : null}\n              aria-describedby={describedBy}\n              aria-valuenow={this.current ?? null}\n              aria-valuemin={Number.isFinite(min) ? min : null}\n              aria-valuemax={Number.isFinite(max) ? max : null}\n              onInput={this.onInput}\n              onBlur={this.onBlur}\n              onKeyDown={this.onKeyDown}\n            />\n\n            <button\n              type=\"button\"\n              class=\"step\"\n              part=\"increment\"\n              aria-label={this.incrementLabel}\n              disabled={this.disabled || this.atMax}\n              tabindex=\"-1\"\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={() => this.step_(1)}\n            >\n              <pf-icon name=\"plus\" aria-hidden=\"true\"></pf-icon>\n            </button>\n          </div>\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}

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

@@ -0,0 +1,50 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+
+const pfOptionCss = () => `:host{border-radius:var(--radius-sm);color:var(--pf-option-text);cursor:pointer;display:block;font-size:var(--font-size-sm);padding:var(--space-2) var(--space-3);user-select:none}:host([hidden]){display:none}:host([active]),:host(:hover:not([disabled])){background:var(--pf-option-active-bg);color:var(--pf-option-active-text)}:host([selected]){font-weight:var(--font-weight-medium)}:host([disabled]){background:transparent;color:var(--pf-option-text-disabled);cursor:not-allowed}:host([disabled]:hover){background:transparent}`;
+
+const PfOption = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfOptionSelect = index.createEvent(this, "pfOptionSelect");
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * The value the select reports when this option is chosen.
+     *
+     * Reflected, because the generated bindings set props as *properties*: an
+     * unreflected prop leaves no attribute, and anything selecting on one — a
+     * consumer's stylesheet, or a test — finds nothing.
+     */
+    value = '';
+    /** Reflected; the stylesheet and the select's own query both read it. */
+    disabled = false;
+    /** Set by the select. Reflected, so the stylesheet can mark the choice. */
+    selected = false;
+    /** Set by the select: the option the keyboard is on. Reflected likewise. */
+    active = false;
+    /** Asks the select to take this value. The select decides and closes. */
+    pfOptionSelect;
+    /**
+     * Mouse only. Keyboard focus stays on the select's trigger and the active
+     * option is tracked with `aria-activedescendant`, so an option never has
+     * focus to receive a key on.
+     */
+    onClick = (event) => {
+        if (this.disabled) {
+            event.stopPropagation();
+            return;
+        }
+        this.pfOptionSelect.emit({ value: this.value });
+    };
+    render() {
+        return (index.h(index.Host, { key: 'd1dd91cffb3c458ea6b9fb89ddc8a2c91f3b0292', role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, onClick: this.onClick }, index.h("slot", { key: '0ca5d298f12c9cb85406e65bcc47670d1642613d' })));
+    }
+};
+PfOption.style = pfOptionCss();
+
+exports.pf_option = PfOption;
+//# sourceMappingURL=pf-option.entry.cjs.js.map
+
+//# sourceMappingURL=pf-option.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"pf-option.cjs.entry.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,+gBAA+gB,CAAC;;MCkB9hB,QAAQ,GAAA,MAAA;;;;;;AAGnB;;;;;;AAMG;IACsB,KAAK,GAAG,EAAE;;IAGV,QAAQ,GAAG,KAAK;;IAGD,QAAQ,GAAG,KAAK;;IAGhB,MAAM,GAAG,KAAK;;AAG7C,IAAA,cAAc;AAEvB;;;;AAIG;AACK,IAAA,OAAO,GAAG,CAAC,KAAiB,KAAI;AACtC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE;YACvB;;AAEF,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AACjD,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,QAAQ,EAAA,eAAA,EACE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAChC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAC5C,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EAErBD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH;;;;;;;","names":["h","Host"],"sources":["src/components/pf-option/pf-option.css?tag=pf-option&encapsulation=shadow","src/components/pf-option/pf-option.tsx"],"sourcesContent":["/*\n * This element is shared by pf-select and pf-combobox, whose React\n * counterparts have separate alias families with their own values. Rather than\n * pick one and diverge from the other, the option reads a generic\n * `--pf-option-*` set that each container defines on itself -- custom\n * properties inherit through the shadow boundary, so a slotted option picks up\n * whichever listbox it is inside. Exactly the pf-menu-item arrangement, for\n * the same reason.\n */\n:host {\n  border-radius: var(--radius-sm);\n  color: var(--pf-option-text);\n  cursor: pointer;\n  display: block;\n  font-size: var(--font-size-sm);\n  padding: var(--space-2) var(--space-3);\n  user-select: none;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * `active` is the select's, not `:hover` alone: the keyboard and the pointer\n * share one active option, and the select is what decides which.\n */\n:host([active]),\n:host(:hover:not([disabled])) {\n  background: var(--pf-option-active-bg);\n  color: var(--pf-option-active-text);\n}\n\n:host([selected]) {\n  font-weight: var(--font-weight-medium);\n}\n\n:host([disabled]) {\n  background: transparent;\n  color: var(--pf-option-text-disabled);\n  cursor: not-allowed;\n}\n\n:host([disabled]:hover) {\n  background: transparent;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n/**\n * One choice inside a `pf-select`.\n *\n * It only reports that it was chosen; the select owns the value, the active\n * option and closing — the same division as `pf-radio-group` with its radios\n * and `pf-dropdown` with its menu items. The select writes `selected` and\n * `active` back onto it, so the stylesheet has reflected attributes to select\n * on without the option knowing anything about its container.\n *\n * @slot - the option's label, which is also what typeahead searches.\n */\n@Component({\n  tag: 'pf-option',\n  styleUrl: 'pf-option.css',\n  shadow: true,\n})\nexport class PfOption {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The value the select reports when this option is chosen.\n   *\n   * Reflected, because the generated bindings set props as *properties*: an\n   * unreflected prop leaves no attribute, and anything selecting on one — a\n   * consumer's stylesheet, or a test — finds nothing.\n   */\n  @Prop({ reflect: true }) value = '';\n\n  /** Reflected; the stylesheet and the select's own query both read it. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set by the select. Reflected, so the stylesheet can mark the choice. */\n  @Prop({ mutable: true, reflect: true }) selected = false;\n\n  /** Set by the select: the option the keyboard is on. Reflected likewise. */\n  @Prop({ mutable: true, reflect: true }) active = false;\n\n  /** Asks the select to take this value. The select decides and closes. */\n  @Event() pfOptionSelect!: EventEmitter<{ value: string }>;\n\n  /**\n   * Mouse only. Keyboard focus stays on the select's trigger and the active\n   * option is tracked with `aria-activedescendant`, so an option never has\n   * focus to receive a key on.\n   */\n  private onClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n    this.pfOptionSelect.emit({ value: this.value });\n  };\n\n  render() {\n    return (\n      <Host\n        role=\"option\"\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : null}\n        onClick={this.onClick}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pf-page-header.cjs.entry.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+
+const pfPageHeaderCss = () => `:host{display:grid;gap:var(--space-4)}:host([hidden]){display:none}.breadcrumbs.empty,.metadata.empty,.actions.empty{display:none}.breadcrumbs{min-width:0}.row{align-items:flex-start;display:flex;flex-direction:column;gap:var(--space-4);justify-content:space-between}@media (min-width: 768px){.row{flex-direction:row}}.content{display:grid;gap:var(--space-2);min-width:0}slot[name='eyebrow']::slotted(*){color:var(--pf-page-header-eyebrow);display:block;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:0.08em;margin:0;text-transform:uppercase}.heading{color:var(--pf-page-header-text);font-size:clamp(var(--font-size-3xl), 3vw, var(--font-size-5xl));font-weight:var(--font-weight-semibold);letter-spacing:-0.03em;line-height:1.05;margin:0}slot[name='description']::slotted(*){color:var(--pf-page-header-text-muted);display:block;font-size:var(--font-size-sm);line-height:1.5;margin:0;max-width:68ch}@media (min-width: 768px){slot[name='description']::slotted(*){font-size:var(--font-size-md)}}.metadata{align-items:center;color:var(--pf-page-header-text-muted);display:inline-flex;flex-wrap:wrap;gap:var(--space-2)}.actions{align-items:center;display:inline-flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--space-2);justify-content:flex-start;width:100%}@media (min-width: 768px){.actions{justify-content:flex-end;width:auto}}`;
+
+const PfPageHeader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /** Which of the boxes that carry layout have anything in them. */
+    hasBreadcrumbs = false;
+    hasMetadata = false;
+    hasActions = false;
+    /** Read from the light DOM, so first paint is right without `slotchange`. */
+    componentWillLoad() {
+        this.read();
+    }
+    read = () => {
+        const slotted = (name) => Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);
+        this.hasBreadcrumbs = slotted('breadcrumbs');
+        this.hasMetadata = slotted('metadata');
+        this.hasActions = slotted('actions');
+    };
+    render() {
+        return (index.h(index.Host, { key: '8d3f6dee92d62335462229dc68b3fecf579e4846' }, index.h("div", { key: 'd35751a575c614707ab5c2057f16521c78bd9f47', class: { breadcrumbs: true, empty: !this.hasBreadcrumbs }, part: "breadcrumbs" }, index.h("slot", { key: '1315edcc31c9fa99b04980180d7d58cc9cb9da88', name: "breadcrumbs", onSlotchange: this.read })), index.h("div", { key: 'e67a5113345cddc79a0112885f40e25398b1223a', class: "row", part: "row" }, index.h("div", { key: '3bd9e036d55367de2d65aa0769abe64c0a084acd', class: "content", part: "content" }, index.h("slot", { key: '8f963cce99ea42a5b61301f3dc5845a60543cf1a', name: "eyebrow" }), index.h("h1", { key: 'a9c1a9a94a0cbac5e7e45fe41d0accf88845a5a2', class: "heading", part: "heading" }, index.h("slot", { key: 'b81e457428dc2e55688255a9023fd7633c48054b' })), index.h("slot", { key: 'fe46f6ae144d97c2f941957751b3389d0fe8f457', name: "description" }), index.h("div", { key: '02110682bf36ce17fd8e824a08f5ea9243b04a16', class: { metadata: true, empty: !this.hasMetadata }, part: "metadata" }, index.h("slot", { key: '3e60c5a167573f752c50546944b142a2a34b9437', name: "metadata", onSlotchange: this.read }))), index.h("div", { key: '8558c324c524782f8ef73e3596f64da9e3c0cd41', class: { actions: true, empty: !this.hasActions }, part: "actions" }, index.h("slot", { key: '518894f2b38e56234a0a3d9fcbc6b64dbd651a36', name: "actions", onSlotchange: this.read })))));
+    }
+};
+PfPageHeader.style = pfPageHeaderCss();
+
+exports.pf_page_header = PfPageHeader;
+//# sourceMappingURL=pf-page-header.entry.cjs.js.map
+
+//# sourceMappingURL=pf-page-header.cjs.entry.js.map

package/dist/cjs/pf-page-header.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-page-header.cjs.entry.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,80CAA80C,CAAC;;MC6Bj2C,YAAY,GAAA,MAAA;;;;;;IAId,cAAc,GAAG,KAAK;IACtB,WAAW,GAAG,KAAK;IACnB,UAAU,GAAG,KAAK;;IAG3B,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,EAAE;;IAGL,IAAI,GAAG,MAAK;AAClB,QAAA,MAAM,OAAO,GAAG,CAAC,IAAY,KAC3B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;AAEnF,QAAA,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,aAAa,CAAC;AAC5C,QAAA,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,UAAU,CAAC;AACtC,QAAA,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,SAAS,CAAC;AACtC,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAMHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,IAAI,EAAC,aAAa,EAAA,EAChFA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAC,YAAY,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI,CAChD,EAENA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAA,EACzBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAG,EACvBA,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EAChCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACL,EACLA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAG,EAC3BA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAC,UAAU,EAAA,EACvEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,UAAU,EAAC,YAAY,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI,CAC7C,CACF,EAENA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,EAAC,SAAS,EAAA,EACpEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAC,YAAY,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI,CAC5C,CACF,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/pf-page-header/pf-page-header.css?tag=pf-page-header&encapsulation=shadow","src/components/pf-page-header/pf-page-header.tsx"],"sourcesContent":[":host {\n  display: grid;\n  gap: var(--space-4);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * Hidden rather than left out, so a later `slotchange` still arrives. Two\n * classes deep, because these boxes set their own `display` below.\n */\n.breadcrumbs.empty,\n.metadata.empty,\n.actions.empty {\n  display: none;\n}\n\n.breadcrumbs {\n  min-width: 0;\n}\n\n.row {\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  justify-content: space-between;\n}\n\n@media (--md) {\n  .row {\n    flex-direction: row;\n  }\n}\n\n.content {\n  display: grid;\n  gap: var(--space-2);\n  min-width: 0;\n}\n\nslot[name='eyebrow']::slotted(*) {\n  color: var(--pf-page-header-eyebrow);\n  display: block;\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-semibold);\n  letter-spacing: 0.08em;\n  margin: 0;\n  text-transform: uppercase;\n}\n\n.heading {\n  color: var(--pf-page-header-text);\n  font-size: clamp(var(--font-size-3xl), 3vw, var(--font-size-5xl));\n  font-weight: var(--font-weight-semibold);\n  letter-spacing: -0.03em;\n  line-height: 1.05;\n  margin: 0;\n}\n\nslot[name='description']::slotted(*) {\n  color: var(--pf-page-header-text-muted);\n  display: block;\n  font-size: var(--font-size-sm);\n  line-height: 1.5;\n  margin: 0;\n  max-width: 68ch;\n}\n\n@media (--md) {\n  slot[name='description']::slotted(*) {\n    font-size: var(--font-size-md);\n  }\n}\n\n.metadata {\n  align-items: center;\n  color: var(--pf-page-header-text-muted);\n  display: inline-flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n}\n\n.actions {\n  align-items: center;\n  display: inline-flex;\n  flex: 0 0 auto;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  justify-content: flex-start;\n  width: 100%;\n}\n\n@media (--md) {\n  .actions {\n    justify-content: flex-end;\n    width: auto;\n  }\n}\n","import { Component, Element, h, Host, State } from '@stencil/core';\n\n/**\n * The heading of a page: a breadcrumb trail, an eyebrow, the title, a line of\n * explanation, some metadata and the page's actions.\n *\n * The trail is slotted rather than taken as data — the consumer nests a\n * `pf-breadcrumbs` (WEB-COMPONENTS-PLAN.md §2.1), where the React\n * `PageHeader` takes a `breadcrumbs` array and renders the component itself.\n * Each crumb's label is a node, which does not cross the HTML boundary.\n *\n * @slot breadcrumbs - a `pf-breadcrumbs` trail above the title.\n * @slot eyebrow - small text above the title.\n * @slot - the title.\n * @slot description - a line below the title.\n * @slot metadata - small facts below the description.\n * @slot actions - the page's controls.\n * @part breadcrumbs - the box holding the breadcrumbs slot.\n * @part row - the row holding the content and the actions.\n * @part content - the box holding everything but the actions.\n * @part heading - the title's box.\n * @part metadata - the box holding the metadata slot.\n * @part actions - the box holding the actions slot.\n */\n@Component({\n  tag: 'pf-page-header',\n  styleUrl: 'pf-page-header.css',\n  shadow: true,\n})\nexport class PfPageHeader {\n  @Element() el!: HTMLElement;\n\n  /** Which of the boxes that carry layout have anything in them. */\n  @State() hasBreadcrumbs = false;\n  @State() hasMetadata = false;\n  @State() hasActions = false;\n\n  /** Read from the light DOM, so first paint is right without `slotchange`. */\n  componentWillLoad() {\n    this.read();\n  }\n\n  private read = () => {\n    const slotted = (name: string) =>\n      Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);\n\n    this.hasBreadcrumbs = slotted('breadcrumbs');\n    this.hasMetadata = slotted('metadata');\n    this.hasActions = slotted('actions');\n  };\n\n  render() {\n    return (\n      <Host>\n        {/*\n          Hidden rather than left out, every one of them: a slot that is not\n          rendered never fires `slotchange`, so a trail or an action added\n          later would stay invisible for good.\n        */}\n        <div class={{ breadcrumbs: true, empty: !this.hasBreadcrumbs }} part=\"breadcrumbs\">\n          <slot name=\"breadcrumbs\" onSlotchange={this.read} />\n        </div>\n\n        <div class=\"row\" part=\"row\">\n          <div class=\"content\" part=\"content\">\n            <slot name=\"eyebrow\" />\n            <h1 class=\"heading\" part=\"heading\">\n              <slot />\n            </h1>\n            <slot name=\"description\" />\n            <div class={{ metadata: true, empty: !this.hasMetadata }} part=\"metadata\">\n              <slot name=\"metadata\" onSlotchange={this.read} />\n            </div>\n          </div>\n\n          <div class={{ actions: true, empty: !this.hasActions }} part=\"actions\">\n            <slot name=\"actions\" onSlotchange={this.read} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,113 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+
+//#region src/pagination.ts
+/**
+* Keep `page` inside 1..totalPages. A total of zero or less has no page to
+* land on, so it reports page 1 — a pager always shows something.
+*/
+function clampPage(page, totalPages) {
+	if (!(totalPages > 0)) return 1;
+	return Math.min(Math.max(page, 1), totalPages);
+}
+/**
+* The run of items to render: `boundaryCount` pages pinned at each end,
+* `siblingCount` pages either side of the current one, and an ellipsis
+* wherever that leaves pages genuinely hidden.
+*
+* Built by collecting the pages to show and then walking them, rather than by
+* placing gaps from the window's indexes. The index version got two cases
+* wrong, both of which this shape cannot express:
+*
+* - **A gap standing for nothing.** At 1 of 6 with `boundaryCount: 3` the two
+*   boundaries meet in the middle, and it still emitted `1 2 3 … 4 5 6` — an
+*   ellipsis between two consecutive pages, because it compared the window
+*   against the boundary edges rather than asking which pages were actually
+*   missing.
+* - **A gap hiding exactly one page.** An ellipsis costs the same room as the
+*   page it stands for and says less, so `1 … 3 4 5 … 7` is strictly worse
+*   than `1 2 3 4 5 6 7`. A single-page hole is filled instead.
+*
+* The `[1]` fallback at the end is insurance, not a path: the window always
+* contains the clamped current page, so `shown` is never empty. It stays
+* because a pager with no buttons would read as broken.
+*/
+function getPaginationItems(currentPage, totalPages, siblingCount, boundaryCount) {
+	const safeTotal = Math.max(totalPages, 1);
+	const safeCurrent = clampPage(currentPage, safeTotal);
+	const safeSiblingCount = Math.max(siblingCount, 0);
+	const safeBoundaryCount = Math.max(boundaryCount, 0);
+	const shown = /* @__PURE__ */ new Set();
+	const add = (page) => {
+		if (page >= 1 && page <= safeTotal) shown.add(page);
+	};
+	for (let page = 1; page <= Math.min(safeBoundaryCount, safeTotal); page += 1) add(page);
+	for (let page = safeTotal - safeBoundaryCount + 1; page <= safeTotal; page += 1) add(page);
+	for (let page = safeCurrent - safeSiblingCount; page <= safeCurrent + safeSiblingCount; page += 1) add(page);
+	const pages = [...shown].sort((a, b) => a - b);
+	for (let index = 0; index < pages.length - 1; index += 1) if (pages[index + 1] - pages[index] === 2) add(pages[index] + 1);
+	if (pages[0] === 2) add(1);
+	if (pages[pages.length - 1] === safeTotal - 1) add(safeTotal);
+	const finalPages = [...shown].sort((a, b) => a - b);
+	const items = [];
+	const gapFor = (nextPage) => nextPage <= safeCurrent ? "ellipsis-left" : "ellipsis-right";
+	if (finalPages.length > 0 && finalPages[0] > 1) items.push(gapFor(finalPages[0]));
+	for (let index = 0; index < finalPages.length; index += 1) {
+		items.push(finalPages[index]);
+		const next = finalPages[index + 1];
+		if (next !== void 0 && next - finalPages[index] > 1) items.push(gapFor(next));
+	}
+	if (finalPages.length > 0 && finalPages[finalPages.length - 1] < safeTotal) items.push("ellipsis-right");
+	return items.length > 0 ? items : [1];
+}
+
+const pfPaginationCss = () => `:host{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2)}:host([hidden]){display:none}@media (min-width: 640px){:host{gap:var(--space-3)}}:host([disabled]){opacity:0.65}.list{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;list-style:none;margin:0;padding:0}.page,.nav{align-items:center;background:var(--pf-pagination-bg);border:1px solid var(--pf-pagination-border);border-radius:var(--radius-md);color:var(--pf-pagination-text);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);justify-content:center;line-height:1;transition:box-shadow 140ms ease}.page{height:var(--pf-pagination-page-size);min-width:var(--pf-pagination-page-size);padding:0 var(--space-2);transition:none}.nav{height:var(--pf-control-height-sm);min-width:var(--pf-control-height-sm);padding:0 var(--space-2)}@media (min-width: 640px){.nav{padding:0 var(--space-3)}}.page:hover,.nav:hover{border-color:var(--pf-pagination-active-border)}.page:focus-visible,.nav:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.page--active{background:var(--pf-pagination-active-bg);border-color:var(--pf-pagination-active-border);color:var(--pf-pagination-active-text)}.page--active:hover{background:var(--pf-pagination-active-hover-bg)}.page:disabled,.nav:disabled{cursor:not-allowed;opacity:0.5}.ellipsis{color:var(--pf-pagination-text-muted);display:inline-flex;font-size:var(--font-size-sm);justify-content:center;min-width:20px}@media (prefers-reduced-motion: reduce){.page,.nav{transition:none}}`;
+
+const PfPagination = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfPageChange = index.createEvent(this, "pfPageChange");
+    }
+    /** The current page, 1-based. Mutable so the element can advance itself. */
+    page = 1;
+    /** How many pages there are in total. */
+    totalPages = 1;
+    /** Pages to show either side of the current one. */
+    siblingCount = 1;
+    /** Pages to pin at each end. */
+    boundaryCount = 1;
+    /** Show the previous/next buttons. Reflected for the stylesheet. */
+    showPrevNext = true;
+    /** Disable every button. Reflected for the stylesheet. */
+    disabled = false;
+    /** Accessible name for the navigation landmark. */
+    label = 'Pagination';
+    /** Emitted with the page the user asked for, already clamped to the range. */
+    pfPageChange;
+    goTo(next) {
+        if (this.disabled)
+            return;
+        const clamped = clampPage(next, Math.max(this.totalPages, 1));
+        if (clamped === this.page)
+            return;
+        this.page = clamped;
+        this.pfPageChange.emit({ page: clamped });
+    }
+    render() {
+        const total = Math.max(this.totalPages, 1);
+        // Both layers go through core, so the same inputs offer the same pages.
+        const current = clampPage(this.page, total);
+        const items = getPaginationItems(current, total, this.siblingCount, this.boundaryCount);
+        return (index.h(index.Host, { key: '7ddd3d35eb175a4ccedbebdbd75dba3046c94a01', role: "navigation", "aria-label": this.label }, this.showPrevNext && (index.h("button", { key: 'c6ca9616468f6880fe2122f6f528faa26e43393a', class: "nav", part: "nav previous", type: "button", disabled: this.disabled || current <= 1, onClick: () => this.goTo(current - 1) }, index.h("slot", { key: 'af06d4de8bc34089517c2aad15b8b08c8822743c', name: "previous" }, "Previous"))), index.h("ol", { key: 'f82b6a3700a50ea0dad8d4416940428955a06c8f', class: "list", part: "list" }, items.map((item, index$1) => typeof item === 'number' ? (index.h("li", { key: item }, index.h("button", { class: { page: true, 'page--active': item === current }, part: item === current ? 'page current' : 'page', type: "button", disabled: this.disabled, "aria-current": item === current ? 'page' : null, onClick: () => this.goTo(item) }, item))) : (
+        // The gap is decorative: a screen reader walking the list gets
+        // the page numbers, and "..." would only interrupt them.
+        index.h("li", { key: `${item}-${index$1}`, class: "ellipsis", part: "ellipsis", "aria-hidden": "true" }, "...")))), this.showPrevNext && (index.h("button", { key: '7d6f1907a2b8ffd6cf8bfab1bc77f044d784bb94', class: "nav", part: "nav next", type: "button", disabled: this.disabled || current >= total, onClick: () => this.goTo(current + 1) }, index.h("slot", { key: '5886d2d27c67b79f399e1bac4359a2cf3876c6c2', name: "next" }, "Next")))));
+    }
+};
+PfPagination.style = pfPaginationCss();
+
+exports.pf_pagination = PfPagination;
+//# sourceMappingURL=pf-pagination.entry.cjs.js.map
+
+//# sourceMappingURL=pf-pagination.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"pf-pagination.cjs.entry.js","mappings":"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","names":["h","Host","index"],"sources":["../core/dist/pagination.js","src/components/pf-pagination/pf-pagination.css?tag=pf-pagination&encapsulation=shadow","src/components/pf-pagination/pf-pagination.tsx"],"sourcesContent":["//#region src/pagination.ts\n/**\n* Keep `page` inside 1..totalPages. A total of zero or less has no page to\n* land on, so it reports page 1 — a pager always shows something.\n*/\nfunction clampPage(page, totalPages) {\n\tif (!(totalPages > 0)) return 1;\n\treturn Math.min(Math.max(page, 1), totalPages);\n}\n/**\n* The run of items to render: `boundaryCount` pages pinned at each end,\n* `siblingCount` pages either side of the current one, and an ellipsis\n* wherever that leaves pages genuinely hidden.\n*\n* Built by collecting the pages to show and then walking them, rather than by\n* placing gaps from the window's indexes. The index version got two cases\n* wrong, both of which this shape cannot express:\n*\n* - **A gap standing for nothing.** At 1 of 6 with `boundaryCount: 3` the two\n*   boundaries meet in the middle, and it still emitted `1 2 3 … 4 5 6` — an\n*   ellipsis between two consecutive pages, because it compared the window\n*   against the boundary edges rather than asking which pages were actually\n*   missing.\n* - **A gap hiding exactly one page.** An ellipsis costs the same room as the\n*   page it stands for and says less, so `1 … 3 4 5 … 7` is strictly worse\n*   than `1 2 3 4 5 6 7`. A single-page hole is filled instead.\n*\n* The `[1]` fallback at the end is insurance, not a path: the window always\n* contains the clamped current page, so `shown` is never empty. It stays\n* because a pager with no buttons would read as broken.\n*/\nfunction getPaginationItems(currentPage, totalPages, siblingCount, boundaryCount) {\n\tconst safeTotal = Math.max(totalPages, 1);\n\tconst safeCurrent = clampPage(currentPage, safeTotal);\n\tconst safeSiblingCount = Math.max(siblingCount, 0);\n\tconst safeBoundaryCount = Math.max(boundaryCount, 0);\n\tconst shown = /* @__PURE__ */ new Set();\n\tconst add = (page) => {\n\t\tif (page >= 1 && page <= safeTotal) shown.add(page);\n\t};\n\tfor (let page = 1; page <= Math.min(safeBoundaryCount, safeTotal); page += 1) add(page);\n\tfor (let page = safeTotal - safeBoundaryCount + 1; page <= safeTotal; page += 1) add(page);\n\tfor (let page = safeCurrent - safeSiblingCount; page <= safeCurrent + safeSiblingCount; page += 1) add(page);\n\tconst pages = [...shown].sort((a, b) => a - b);\n\tfor (let index = 0; index < pages.length - 1; index += 1) if (pages[index + 1] - pages[index] === 2) add(pages[index] + 1);\n\tif (pages[0] === 2) add(1);\n\tif (pages[pages.length - 1] === safeTotal - 1) add(safeTotal);\n\tconst finalPages = [...shown].sort((a, b) => a - b);\n\tconst items = [];\n\tconst gapFor = (nextPage) => nextPage <= safeCurrent ? \"ellipsis-left\" : \"ellipsis-right\";\n\tif (finalPages.length > 0 && finalPages[0] > 1) items.push(gapFor(finalPages[0]));\n\tfor (let index = 0; index < finalPages.length; index += 1) {\n\t\titems.push(finalPages[index]);\n\t\tconst next = finalPages[index + 1];\n\t\tif (next !== void 0 && next - finalPages[index] > 1) items.push(gapFor(next));\n\t}\n\tif (finalPages.length > 0 && finalPages[finalPages.length - 1] < safeTotal) items.push(\"ellipsis-right\");\n\treturn items.length > 0 ? items : [1];\n}\n//#endregion\nexport { clampPage, getPaginationItems };\n",":host {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n@media (--sm) {\n  :host {\n    gap: var(--space-3);\n  }\n}\n\n:host([disabled]) {\n  opacity: 0.65;\n}\n\n.list {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  justify-content: center;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.page,\n.nav {\n  align-items: center;\n  background: var(--pf-pagination-bg);\n  border: 1px solid var(--pf-pagination-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-pagination-text);\n  cursor: pointer;\n  display: inline-flex;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n  justify-content: center;\n  line-height: 1;\n  transition: box-shadow 140ms ease;\n}\n\n.page {\n  height: var(--pf-pagination-page-size);\n  min-width: var(--pf-pagination-page-size);\n  padding: 0 var(--space-2);\n  transition: none;\n}\n\n.nav {\n  height: var(--pf-control-height-sm);\n  min-width: var(--pf-control-height-sm);\n  padding: 0 var(--space-2);\n}\n\n@media (--sm) {\n  .nav {\n    padding: 0 var(--space-3);\n  }\n}\n\n.page:hover,\n.nav:hover {\n  border-color: var(--pf-pagination-active-border);\n}\n\n.page:focus-visible,\n.nav:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.page--active {\n  background: var(--pf-pagination-active-bg);\n  border-color: var(--pf-pagination-active-border);\n  color: var(--pf-pagination-active-text);\n}\n\n.page--active:hover {\n  background: var(--pf-pagination-active-hover-bg);\n}\n\n.page:disabled,\n.nav:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.ellipsis {\n  color: var(--pf-pagination-text-muted);\n  display: inline-flex;\n  font-size: var(--font-size-sm);\n  justify-content: center;\n  min-width: 20px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .page,\n  .nav {\n    transition: none;\n  }\n}\n","import { clampPage, getPaginationItems } from '@pitchfork-ui/core';\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n/**\n * A pager: boundary pages pinned at each end, a window around the current\n * page, and an ellipsis wherever that leaves a gap.\n *\n * Controlled or not, like `pf-input`: `page` is mutable, so leaving it alone\n * lets the element advance itself, and setting it on every `pfPageChange`\n * keeps the consumer in charge.\n *\n * @slot previous - the previous button's label. Defaults to \"Previous\".\n * @slot next - the next button's label. Defaults to \"Next\".\n * @part nav - either of the previous/next buttons.\n * @part previous - the previous button.\n * @part next - the next button.\n * @part list - the ordered list of pages.\n * @part page - each page button.\n * @part current - the page button for the current page.\n * @part ellipsis - each gap.\n */\n@Component({\n  tag: 'pf-pagination',\n  styleUrl: 'pf-pagination.css',\n  shadow: true,\n})\nexport class PfPagination {\n  /** The current page, 1-based. Mutable so the element can advance itself. */\n  @Prop({ mutable: true }) page = 1;\n\n  /** How many pages there are in total. */\n  @Prop() totalPages = 1;\n\n  /** Pages to show either side of the current one. */\n  @Prop() siblingCount = 1;\n\n  /** Pages to pin at each end. */\n  @Prop() boundaryCount = 1;\n\n  /** Show the previous/next buttons. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) showPrevNext = true;\n\n  /** Disable every button. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Accessible name for the navigation landmark. */\n  @Prop() label = 'Pagination';\n\n  /** Emitted with the page the user asked for, already clamped to the range. */\n  @Event() pfPageChange!: EventEmitter<{ page: number }>;\n\n  private goTo(next: number) {\n    if (this.disabled) return;\n\n    const clamped = clampPage(next, Math.max(this.totalPages, 1));\n    if (clamped === this.page) return;\n\n    this.page = clamped;\n    this.pfPageChange.emit({ page: clamped });\n  }\n\n  render() {\n    const total = Math.max(this.totalPages, 1);\n    // Both layers go through core, so the same inputs offer the same pages.\n    const current = clampPage(this.page, total);\n    const items = getPaginationItems(current, total, this.siblingCount, this.boundaryCount);\n\n    return (\n      <Host role=\"navigation\" aria-label={this.label}>\n        {this.showPrevNext && (\n          <button\n            class=\"nav\"\n            part=\"nav previous\"\n            type=\"button\"\n            disabled={this.disabled || current <= 1}\n            onClick={() => this.goTo(current - 1)}\n          >\n            {/*\n              Slot fallback is the web-component answer to React's\n              `prevLabel = 'Previous'` default: the consumer overrides it by\n              slotting something, and gets the text if they do not.\n            */}\n            <slot name=\"previous\">Previous</slot>\n          </button>\n        )}\n\n        <ol class=\"list\" part=\"list\">\n          {items.map((item, index) =>\n            typeof item === 'number' ? (\n              <li key={item}>\n                <button\n                  class={{ page: true, 'page--active': item === current }}\n                  part={item === current ? 'page current' : 'page'}\n                  type=\"button\"\n                  disabled={this.disabled}\n                  aria-current={item === current ? 'page' : null}\n                  onClick={() => this.goTo(item)}\n                >\n                  {item}\n                </button>\n              </li>\n            ) : (\n              // The gap is decorative: a screen reader walking the list gets\n              // the page numbers, and \"...\" would only interrupt them.\n              <li key={`${item}-${index}`} class=\"ellipsis\" part=\"ellipsis\" aria-hidden=\"true\">\n                ...\n              </li>\n            ),\n          )}\n        </ol>\n\n        {this.showPrevNext && (\n          <button\n            class=\"nav\"\n            part=\"nav next\"\n            type=\"button\"\n            disabled={this.disabled || current >= total}\n            onClick={() => this.goTo(current + 1)}\n          >\n            <slot name=\"next\">Next</slot>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}