@pitchfork-ui/elements 0.0.0-stage → 0.2.1

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-sparkline.entry.js","sources":["../core/dist/sparkline.js","src/components/pf-sparkline/pf-sparkline.css?tag=pf-sparkline&encapsulation=shadow","src/components/pf-sparkline/pf-sparkline.tsx"],"sourcesContent":["//#region src/sparkline.ts\n/**\n* Where each value sits.\n*\n* Three edge cases, each of which the React `Sparkline` got wrong:\n*\n* - **One value** divided by `data.length - 1`, which is zero, so `x` came out\n*   `NaN` and an `endDot` rendered `cx=\"NaN\"`. A single value has no line, so\n*   it goes in the middle of the box, where a dot for it belongs.\n* - **Every value equal** fell to the `max - min || 1` guard and put the whole\n*   series on one edge of the box — the bottom, which reads as a collapse\n*   rather than as \"no change\". A flat series is centred.\n* - **No values** is an empty list, which is the one it did handle.\n*/\nfunction sparklinePoints(data, { width, height, padding }) {\n\tif (data.length === 0) return [];\n\tif (data.length === 1) return [[width / 2, height / 2]];\n\tconst min = Math.min(...data);\n\tconst max = Math.max(...data);\n\tconst innerWidth = width - padding * 2;\n\tconst innerHeight = height - padding * 2;\n\tif (max === min) return data.map((_, index) => [padding + index / (data.length - 1) * innerWidth, height / 2]);\n\tconst range = max - min;\n\treturn data.map((value, index) => [padding + index / (data.length - 1) * innerWidth, padding + (1 - (value - min) / range) * innerHeight]);\n}\n/** The line through the points, or `''` when there is no line to draw. */\nfunction sparklineLinePath(points) {\n\tif (points.length < 2) return \"\";\n\tconst [first, ...rest] = points;\n\treturn [`M ${first[0]} ${first[1]}`, ...rest.map(([x, y]) => `L ${x} ${y}`)].join(\" \");\n}\n/**\n* The same line, closed down to `bottom` and back, for the filled variant.\n*\n* A separate function rather than a flag on `sparklineLinePath`, because the\n* React version's `buildPath(points, close = false)` took one and its closing\n* branch interpolated the **boolean** into the path (`L ${lastX} ${close}`).\n* It was never reached — every call site passed one argument — so the broken\n* branch sat there looking like working code, and the area path was written\n* out a second time inline.\n*/\nfunction sparklineAreaPath(points, bottom) {\n\tif (points.length < 2) return \"\";\n\tconst line = sparklineLinePath(points);\n\tconst first = points[0];\n\treturn `${line} L ${points[points.length - 1][0]} ${bottom} L ${first[0]} ${bottom} Z`;\n}\n//#endregion\nexport { sparklineAreaPath, sparklineLinePath, sparklinePoints };\n",":host {\n  display: inline-block;\n  line-height: 0;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.svg {\n  display: block;\n  overflow: visible;\n}\n\n.area {\n  opacity: var(--pf-sparkline-area-opacity, 0.15);\n}\n\n/*\n * Each element needs its own copy of its `@keyframes`: they do not cross a\n * shadow boundary, so the React library's global declarations are invisible\n * here. And the durations are the three that exist — `fast`, `moderate`,\n * `slow` — because an undefined custom property makes the whole `animation`\n * shorthand invalid at computed-value time and nothing runs at all.\n */\n:host([animated]) .line {\n  animation: pf-sparkline-draw var(--duration-slow) var(--easing-standard) both;\n  stroke-dasharray: 1;\n}\n\n@keyframes pf-sparkline-draw {\n  from {\n    stroke-dashoffset: 1;\n  }\n\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n\n:host([animated]) .area {\n  animation: pf-sparkline-fade var(--duration-slow) var(--easing-standard) both;\n}\n\n@keyframes pf-sparkline-fade {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: var(--pf-sparkline-area-opacity, 0.15);\n  }\n}\n\n:host([animated]) .dot {\n  animation: pf-sparkline-dot var(--duration-fast) var(--easing-decelerate) var(--duration-moderate)\n    both;\n}\n\n@keyframes pf-sparkline-dot {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host([animated]) .line,\n  :host([animated]) .area,\n  :host([animated]) .dot {\n    animation: none;\n  }\n}\n","import { sparklineAreaPath, sparklineLinePath, sparklinePoints } from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A small line or area chart with no axes.\n *\n * All of the geometry is core's, so this and the React `Sparkline` put the\n * same numbers in the same places — including the three edge cases that were\n * wrong before the extraction: one value gave `NaN`, a flat series was pinned\n * to an edge, and the closing branch of the old path builder interpolated a\n * boolean.\n *\n * @part svg - the chart.\n * @part area - the filled region, on the `area` variant.\n * @part line - the line.\n * @part dot - the dot at the last point, when `endDot` is set.\n */\n@Component({\n  tag: 'pf-sparkline',\n  styleUrl: 'pf-sparkline.css',\n  shadow: true,\n})\nexport class PfSparkline {\n  /**\n   * The values to plot.\n   *\n   * A `number[]` for a framework consumer, and a comma-separated string for\n   * plain HTML — `data=\"1,4,2,8\"` — because Stencil coerces an attribute only\n   * for the primitive types it recognises, and an array is not one of them.\n   * Read through `values` below, never directly.\n   */\n  @Prop() data: number[] | string = [];\n\n  @Prop() width = 120;\n\n  @Prop() height = 36;\n\n  /** `line` draws only the stroke; `area` fills under it too. Reflected. */\n  @Prop({ reflect: true }) variant: 'line' | 'area' = 'line';\n\n  @Prop() strokeWidth = 1.5;\n\n  /** Overrides the token colour, for a chart that has to match its data. */\n  @Prop() color?: string;\n\n  /** Draw a dot at the last value. */\n  @Prop({ reflect: true }) endDot = false;\n\n  /**\n   * Draw the line in on first paint. Off by default. Reflected.\n   *\n   * `animated`, where the React prop is `animate`: `animate` is a **reserved\n   * public name** — `Element.prototype.animate` is the Web Animations API —\n   * and Stencil refuses to build a prop that shadows a prototype member. The\n   * React component is a function taking props and has no such collision.\n   */\n  @Prop({ reflect: true }) animated = false;\n\n  /**\n   * The chart's accessible name.\n   *\n   * Without one the chart is `presentation`: a sparkline with no name is\n   * decoration beside a number that already says what it means, and\n   * announcing an unnamed graphic is worse than skipping it.\n   */\n  @Prop() label?: string;\n\n  /** The values, however they arrived. */\n  private get values(): number[] {\n    if (Array.isArray(this.data)) return this.data.map(Number).filter(Number.isFinite);\n\n    return String(this.data ?? '')\n      .split(',')\n      .map((part) => Number(part.trim()))\n      .filter(Number.isFinite);\n  }\n\n  render() {\n    const width = Number(this.width) || 120;\n    const height = Number(this.height) || 36;\n    const strokeWidth = Number(this.strokeWidth) || 1.5;\n    const padding = strokeWidth + 2;\n\n    const points = sparklinePoints(this.values, { width, height, padding });\n    const line = sparklineLinePath(points);\n    const area =\n      this.variant === 'area' ? sparklineAreaPath(points, height - padding + strokeWidth) : '';\n    const last = points[points.length - 1];\n    const stroke = this.color ?? 'var(--pf-sparkline-color)';\n\n    return (\n      <Host>\n        <svg\n          class=\"svg\"\n          part=\"svg\"\n          width={width}\n          height={height}\n          viewBox={`0 0 ${width} ${height}`}\n          role={this.label ? 'img' : 'presentation'}\n          aria-label={this.label}\n        >\n          {area && <path class=\"area\" part=\"area\" d={area} fill={stroke} />}\n          {line && (\n            <path\n              class=\"line\"\n              part=\"line\"\n              d={line}\n              fill=\"none\"\n              stroke={stroke}\n              stroke-width={strokeWidth}\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              // The dash maths below is then independent of the real length.\n              pathLength={this.animated ? 1 : undefined}\n            />\n          )}\n          {this.endDot && last && (\n            <circle\n              class=\"dot\"\n              part=\"dot\"\n              cx={last[0]}\n              cy={last[1]}\n              r={strokeWidth + 1.5}\n              fill={stroke}\n            />\n          )}\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,110 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+import { a as applyControlValidity } from './form-validity-Cr6IXrUk.js';
+import { c as controlAriaLabel } from './control-label-Cy_kHPeC.js';
+
+const pfSwitchCss = () => `:host{display:inline-block}:host([hidden]){display:none}.field{align-items:center;display:inline-flex;gap:var(--space-2)}.input{appearance:none;background:var(--pf-switch-track-bg);border-radius:var(--radius-full);cursor:pointer;height:24px;margin:0;position:relative;transition:background-color 120ms ease;width:44px}.input::after{background:var(--pf-switch-thumb-bg);border-radius:50%;content:'';height:20px;left:2px;position:absolute;top:2px;transition:transform 120ms ease;width:20px}.input:checked{background:var(--pf-switch-track-checked-bg)}.input:checked::after{transform:translateX(20px)}.input:focus-visible{box-shadow:var(--pf-switch-focus-ring, var(--pf-focus-ring));outline:none}.input:disabled{cursor:not-allowed;opacity:0.55}.input:disabled+.label{cursor:not-allowed;opacity:0.65}.label{color:var(--pf-switch-label-text);font-size:var(--font-size-md)}.error{color:var(--pf-switch-field-error, var(--pf-field-error));font-size:var(--font-size-sm);margin:var(--space-1) 0 0}@media (prefers-reduced-motion: reduce){.input,.input::after{transition:none}}`;
+
+const PfSwitch = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pfChange = createEvent(this, "pfChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    get el() { return getElement(this); }
+    internals;
+    /**
+     * Submitted under this name.
+     *
+     * Reflected, because a form-associated custom element takes its submission
+     * name from the `name` *content attribute* -- not from this property. A
+     * framework wrapper that sets properties rather than attributes (the
+     * generated React bindings do) would otherwise leave the control nameless
+     * and absent from the submission, with every other sign of working.
+     */
+    name;
+    /** Whether the switch is on. Reflected so the stylesheet can select on it. */
+    checked = false;
+    /**
+     * What is submitted when on. Mirrors the native attribute, whose default is
+     * also `on` — a checkbox with no value still submits something.
+     */
+    value = 'on';
+    /** Visible label, rendered in the same root so `for` actually associates. */
+    label;
+    /** Error message. Its presence is what marks the control invalid. */
+    error;
+    required = false;
+    disabled = false;
+    /** Fires when the user turns the switch on or off. */
+    pfChange;
+    /** The state a form reset restores, which is the initial attribute. */
+    initialChecked = false;
+    componentWillLoad() {
+        this.initialChecked = this.checked;
+        this.syncFormState();
+    }
+    syncFormState() {
+        /*
+         * `null`, not an empty string, when off: an unchecked checkbox is
+         * absent from the submission entirely, rather than present and empty.
+         * That is what a server distinguishing "unticked" from "not sent" relies
+         * on, and it is what a native checkbox does.
+         */
+        this.internals.setFormValue(this.checked ? this.value : null);
+        applyControlValidity(this.internals, this.checked, 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 initial state, not `false` — a native
+     * `<input type=checkbox checked>` comes back on.
+     */
+    formResetCallback() {
+        this.checked = this.initialChecked;
+    }
+    onChange = (event) => {
+        this.checked = event.target.checked;
+        this.pfChange.emit({ checked: this.checked, value: this.value });
+    };
+    render() {
+        return (h(Host, { key: '4c521d4d2e26f0adf9542c8eb490fedf78b6361a' }, h("div", { key: '3d7dcdfd665db7435e49b1ad93518b380d63c52e', class: "field", part: "field" }, h("input", { key: '936c2972a1249d1bfd5aeac3fc4e590e51360487', id: "input", "aria-label": controlAriaLabel(this.el, this.label), part: "input", class: "input", type: "checkbox", role: "switch", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, "aria-invalid": this.error ? 'true' : null, "aria-describedby": this.error ? 'error' : null, onChange: this.onChange }), this.label && (h("label", { key: '90aad05c07c0a81c785de9aad998c876b3f4ae21', class: "label", part: "label", htmlFor: "input" }, this.label))), this.error && (h("p", { key: 'd2904bfb254bb2ae9699c50e6ab4fe150beb98e8', class: "error", part: "error", id: "error" }, this.error))));
+    }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "checked": [{
+                "syncFormState": 0
+            }],
+        "error": [{
+                "syncFormState": 0
+            }],
+        "required": [{
+                "syncFormState": 0
+            }],
+        "value": [{
+                "syncFormState": 0
+            }]
+    }; }
+};
+PfSwitch.style = pfSwitchCss();
+
+export { PfSwitch as pf_switch };
+//# sourceMappingURL=pf-switch.entry.js.map
+
+//# sourceMappingURL=pf-switch.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-switch.entry.js","sources":["src/components/pf-switch/pf-switch.css?tag=pf-switch&encapsulation=shadow","src/components/pf-switch/pf-switch.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--space-2);\n}\n\n.input {\n  appearance: none;\n  background: var(--pf-switch-track-bg);\n  border-radius: var(--radius-full);\n  cursor: pointer;\n  height: 24px;\n  margin: 0;\n  position: relative;\n  transition: background-color 120ms ease;\n  width: 44px;\n}\n\n/* The thumb. */\n.input::after {\n  background: var(--pf-switch-thumb-bg);\n  border-radius: 50%;\n  content: '';\n  height: 20px;\n  left: 2px;\n  position: absolute;\n  top: 2px;\n  transition: transform 120ms ease;\n  width: 20px;\n}\n\n.input:checked {\n  background: var(--pf-switch-track-checked-bg);\n}\n\n.input:checked::after {\n  transform: translateX(20px);\n}\n\n.input:focus-visible {\n  box-shadow: var(--pf-switch-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n.input:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n.input:disabled + .label {\n  cursor: not-allowed;\n  opacity: 0.65;\n}\n\n.label {\n  color: var(--pf-switch-label-text);\n  font-size: var(--font-size-md);\n}\n\n.error {\n  color: var(--pf-switch-field-error, var(--pf-field-error));\n  font-size: var(--font-size-sm);\n  margin: var(--space-1) 0 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .input,\n  .input::after {\n    transition: none;\n  }\n}\n","import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\n\n/**\n * A form-associated on/off switch.\n *\n * Built on a native checkbox with `role=\"switch\"`, exactly as the React\n * component is: a switch is a checkbox whose two states are \"on\" and \"off\"\n * rather than \"selected\" and \"not selected\", and the role is the only\n * difference assistive technology needs.\n *\n * @part field - the wrapper around control and label.\n * @part input - the native checkbox carrying role=\"switch\".\n * @part label - the label element.\n */\n@Component({\n  tag: 'pf-switch',\n  styleUrl: 'pf-switch.css',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n})\nexport class PfSwitch {\n  @Element() el!: HTMLElement;\n\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name.\n   *\n   * Reflected, because a form-associated custom element takes its submission\n   * name from the `name` *content attribute* -- not from this property. A\n   * framework wrapper that sets properties rather than attributes (the\n   * generated React bindings do) would otherwise leave the control nameless\n   * and absent from the submission, with every other sign of working.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** Whether the switch is on. Reflected so the stylesheet can select on it. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /**\n   * What is submitted when on. Mirrors the native attribute, whose default is\n   * also `on` — a checkbox with no value still submits something.\n   */\n  @Prop() value = 'on';\n\n  /** Visible label, rendered in the same root so `for` actually associates. */\n  @Prop() label?: string;\n\n  /** Error message. Its presence is what marks the control invalid. */\n  @Prop() error?: string;\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires when the user turns the switch on or off. */\n  @Event() pfChange!: EventEmitter<{ checked: boolean; value: string }>;\n\n  /** The state a form reset restores, which is the initial attribute. */\n  private initialChecked = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.syncFormState();\n  }\n\n  @Watch('checked')\n  @Watch('error')\n  @Watch('required')\n  @Watch('value')\n  syncFormState() {\n    /*\n     * `null`, not an empty string, when off: an unchecked checkbox is\n     * absent from the submission entirely, rather than present and empty.\n     * That is what a server distinguishing \"unticked\" from \"not sent\" relies\n     * on, and it is what a native checkbox does.\n     */\n    this.internals.setFormValue(this.checked ? this.value : null);\n    applyControlValidity(this.internals, this.checked, 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  /**\n   * A reset restores the initial state, not `false` — a native\n   * `<input type=checkbox checked>` comes back on.\n   */\n  formResetCallback() {\n    this.checked = this.initialChecked;\n  }\n\n  private onChange = (event: Event) => {\n    this.checked = (event.target as HTMLInputElement).checked;\n    this.pfChange.emit({ checked: this.checked, value: this.value });\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          <input\n            id=\"input\"\n            aria-label={controlAriaLabel(this.el, this.label)}\n            part=\"input\"\n            class=\"input\"\n            type=\"checkbox\"\n            role=\"switch\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            aria-invalid={this.error ? 'true' : null}\n            aria-describedby={this.error ? 'error' : null}\n            onChange={this.onChange}\n          />\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"input\">\n              {this.label}\n            </label>\n          )}\n        </div>\n        {this.error && (\n          <p class=\"error\" part=\"error\" id=\"error\">\n            {this.error}\n          </p>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/pf-tab-panel.entry.js

@@ -0,0 +1,39 @@
+import { r as registerInstance, h, H as Host } from './index-Bm6UxEit.js';
+
+const pfTabPanelCss = () => `:host{color:var(--pf-tabs-text);display:block;line-height:1.5;min-width:0}:host([hidden]){display:none}`;
+
+const PfTabPanel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * Pairs the panel with its tab.
+     *
+     * Reflected because the generated bindings set props as properties, so
+     * without it a consumer selecting `pf-tab-panel[value="..."]` in a React or
+     * Angular app finds nothing. The group reads the property.
+     */
+    value = '';
+    /** Set by the group: whether this is the panel on show. Reflected. */
+    active = false;
+    render() {
+        return (h(Host, { key: '875b1e6db69fd49e1ffdeacb30eaa15fbd07a43e', role: "tabpanel",
+            /*
+             * `hidden` as well as the reflected `active`, because it hides the
+             * panel through the UA stylesheet — so a consumer who has not loaded
+             * this package's CSS still sees one panel rather than all of them.
+             *
+             * `false` is safe here although `hidden="false"` would still hide the
+             * element: Stencil writes an attribute it finds as a *property* on the
+             * host, and `el.hidden = false` removes it. Measured both ways, in the
+             * mock DOM and in Chromium.
+             */
+            hidden: !this.active, tabindex: this.active ? '0' : null }, h("slot", { key: 'd5faccfbb49cc060fc64e1bf533ec85091842524' })));
+    }
+};
+PfTabPanel.style = pfTabPanelCss();
+
+export { PfTabPanel as pf_tab_panel };
+//# sourceMappingURL=pf-tab-panel.entry.js.map
+
+//# sourceMappingURL=pf-tab-panel.entry.js.map

package/dist/esm/pf-tab-panel.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-tab-panel.entry.js","sources":["src/components/pf-tab-panel/pf-tab-panel.css?tag=pf-tab-panel&encapsulation=shadow","src/components/pf-tab-panel/pf-tab-panel.tsx"],"sourcesContent":[":host {\n  color: var(--pf-tabs-text);\n  display: block;\n  line-height: 1.5;\n  min-width: 0;\n}\n\n/*\n * The group hides the panels that are not on show with `hidden`, so this is\n * the rule that does the hiding -- `:host` above would otherwise override the\n * UA stylesheet's `display: none` for `[hidden]`.\n */\n:host([hidden]) {\n  display: none;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * One panel inside a `pf-tabs`, shown when the `pf-tab` carrying the same\n * `value` is selected.\n *\n * A sibling of its tab rather than a child of it, so that both live in the\n * consumer's tree: that is what lets the group point `aria-controls` at this\n * panel and `aria-labelledby` back at the tab, since a same-root IDREF is the\n * one that resolves.\n *\n * @slot - the panel's content.\n */\n@Component({\n  tag: 'pf-tab-panel',\n  styleUrl: 'pf-tab-panel.css',\n  shadow: true,\n})\nexport class PfTabPanel {\n  /**\n   * Pairs the panel with its tab.\n   *\n   * Reflected because the generated bindings set props as properties, so\n   * without it a consumer selecting `pf-tab-panel[value=\"...\"]` in a React or\n   * Angular app finds nothing. The group reads the property.\n   */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set by the group: whether this is the panel on show. Reflected. */\n  @Prop({ mutable: true, reflect: true }) active = false;\n\n  render() {\n    return (\n      <Host\n        role=\"tabpanel\"\n        /*\n         * `hidden` as well as the reflected `active`, because it hides the\n         * panel through the UA stylesheet — so a consumer who has not loaded\n         * this package's CSS still sees one panel rather than all of them.\n         *\n         * `false` is safe here although `hidden=\"false\"` would still hide the\n         * element: Stencil writes an attribute it finds as a *property* on the\n         * host, and `el.hidden = false` removes it. Measured both ways, in the\n         * mock DOM and in Chromium.\n         */\n        hidden={!this.active}\n        tabindex={this.active ? '0' : null}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,uGAAuG,CAAC;;MCkBxH,UAAU,GAAA,MAAA;;;;AACrB;;;;;;AAMG;IACsB,KAAK,GAAG,EAAE;;IAGK,MAAM,GAAG,KAAK;IAEtD,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,UAAU;AACf;;;;;;;;;AASG;AACH,YAAA,MAAM,EAAE,CAAC,IAAI,CAAC,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,MAAM,GAAG,GAAG,GAAG,IAAI,EAAA,EAElC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH;;;;;;;"}

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

@@ -0,0 +1,94 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+import { i as isActivationKey } from './keys-g4FlTDZx.js';
+
+const pfTabCss = () => `:host{align-items:center;background:transparent;border:0;color:var(--pf-tabs-text-muted);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--space-2);min-width:0;position:relative;transition:color var(--pf-transition-medium);user-select:none;white-space:nowrap;z-index:1}:host([hidden]){display:none}:host([size='sm']){padding:var(--space-2) var(--space-3)}:host([size='md']){padding:var(--pf-tabs-tab-padding-y-md) var(--pf-tabs-tab-padding-x-md)}:host([full-width]){flex:1;justify-content:center}:host([variant='underline']){border-bottom:var(--pf-tabs-underline-width) solid transparent;margin-bottom:-1px}:host([variant='pills']){border-radius:var(--radius-sm)}:host(:hover:not([disabled])),:host([selected]),:host(:focus-visible){color:var(--pf-tabs-text)}:host([disabled]){cursor:not-allowed;opacity:0.45}:host(:focus-visible){outline:2px solid color-mix(in srgb, var(--pf-tabs-text) 32%, transparent);outline-offset:2px}.icon{flex-shrink:0;font-size:1em}.count{flex-shrink:0;font-size:var(--font-size-xs);min-height:18px;padding:0 var(--space-2)}@media (prefers-reduced-motion: reduce){:host{transition:none}}`;
+
+const PfTab = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pfTabSelect = createEvent(this, "pfTabSelect");
+    }
+    get el() { return getElement(this); }
+    /**
+     * Identifies the tab, and pairs it with the `pf-tab-panel` carrying the same
+     * value.
+     *
+     * 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 group's own filtering both read it. */
+    disabled = false;
+    /** Set by the group. Reflected, so the stylesheet can mark the tab. */
+    selected = false;
+    /** Set by the group from its own `variant`. Reflected for the stylesheet. */
+    variant = 'underline';
+    /** Set by the group from its own `size`. Reflected for the stylesheet. */
+    size = 'md';
+    /** Set by the group from its own `fullWidth`. Reflected for the stylesheet. */
+    fullWidth = false;
+    /** A decorative icon's name, from the same registry as `pf-icon`. */
+    icon;
+    /** Which side of the label the icon sits on. */
+    iconPlacement = 'start';
+    /**
+     * A count rendered as a badge beside the label (GitHub-style, "Issues 12").
+     * It is left in the tab's accessible name, so a screen reader announces it.
+     * `0` shows a zero; omitting the prop shows no badge at all.
+     */
+    count;
+    /** Which side of the label the count badge sits on. */
+    badgePlacement = 'end';
+    /** Asks the group to select this tab. The group decides. */
+    pfTabSelect;
+    /**
+     * Puts itself in the group's `tab` slot.
+     *
+     * So that a consumer can write one `pf-tab` and one `pf-tab-panel` per item
+     * — interleaved, which is what a loop over data produces — and still have
+     * the tabs land in the strip and the panels in the stack below it. A slot
+     * the consumer set themselves is left alone, so the explicit spelling keeps
+     * working.
+     *
+     * Assigning `slot` moves the node between slots, which fires `slotchange` on
+     * both; writing the same value again is not a mutation, so this does not
+     * loop.
+     */
+    connectedCallback() {
+        if (!this.el.hasAttribute('slot'))
+            this.el.setAttribute('slot', 'tab');
+    }
+    handleClick(event) {
+        if (this.disabled) {
+            // Swallowed rather than left for the group to read as a selection.
+            event.stopPropagation();
+            return;
+        }
+        this.pfTabSelect.emit({ value: this.value });
+    }
+    /**
+     * Enter and Space select, as they do on a tab. The arrows are the group's:
+     * only it knows the other tabs.
+     *
+     * `preventDefault` because the host is a focusable element rather than a
+     * button, so Space would scroll the page instead.
+     */
+    handleKeyDown(event) {
+        if (!isActivationKey(event.key) || this.disabled)
+            return;
+        event.preventDefault();
+        this.pfTabSelect.emit({ value: this.value });
+    }
+    render() {
+        const icon = this.icon ? (h("pf-icon", { key: "icon", class: "icon", part: "icon", name: this.icon, "aria-hidden": "true" })) : null;
+        const count = this.count === undefined ? null : (h("pf-badge", { key: "count", class: "count", part: "count", variant: "neutral" }, this.count));
+        return (h(Host, { key: 'f9d5216db026a25bc8ee38d90dc146a1bfb33afa', role: "tab", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null }, this.iconPlacement === 'start' ? icon : null, this.badgePlacement === 'start' ? count : null, h("span", { key: '36ae347e9c8bf47eab5f071aef2068a40da1ca73', class: "label", part: "label" }, h("slot", { key: 'c70792d716dfacecd24eb466e7b4b7c729dd47e3' })), this.badgePlacement === 'end' ? count : null, this.iconPlacement === 'end' ? icon : null));
+    }
+};
+PfTab.style = pfTabCss();
+
+export { PfTab as pf_tab };
+//# sourceMappingURL=pf-tab.entry.js.map
+
+//# sourceMappingURL=pf-tab.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-tab.entry.js","sources":["src/components/pf-tab/pf-tab.css?tag=pf-tab&encapsulation=shadow","src/components/pf-tab/pf-tab.tsx"],"sourcesContent":["/*\n * The host is the tab: it carries `role=\"tab\"`, takes the focus the group\n * hands it, and is the box the group measures for the indicator. So the\n * padding and the type scale live on `:host`, selected on the `variant` and\n * `size` attributes the group writes down.\n */\n:host {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  color: var(--pf-tabs-text-muted);\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  gap: var(--space-2);\n  min-width: 0;\n  position: relative;\n  transition: color var(--pf-transition-medium);\n  user-select: none;\n  white-space: nowrap;\n  /* Above the shared indicator, which is a sibling inside the strip. */\n  z-index: 1;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([size='sm']) {\n  padding: var(--space-2) var(--space-3);\n}\n\n:host([size='md']) {\n  padding: var(--pf-tabs-tab-padding-y-md) var(--pf-tabs-tab-padding-x-md);\n}\n\n:host([full-width]) {\n  flex: 1;\n  justify-content: center;\n}\n\n/* The indicator draws the underline; the transparent border holds the space. */\n:host([variant='underline']) {\n  border-bottom: var(--pf-tabs-underline-width) solid transparent;\n  margin-bottom: -1px;\n}\n\n:host([variant='pills']) {\n  border-radius: var(--radius-sm);\n}\n\n:host(:hover:not([disabled])),\n:host([selected]),\n:host(:focus-visible) {\n  color: var(--pf-tabs-text);\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n  opacity: 0.45;\n}\n\n:host(:focus-visible) {\n  outline: 2px solid color-mix(in srgb, var(--pf-tabs-text) 32%, transparent);\n  outline-offset: 2px;\n}\n\n/* Decorative, and inherits the tab's colour. */\n.icon {\n  flex-shrink: 0;\n  font-size: 1em;\n}\n\n/* Smaller than a default badge, and colour-neutral so it reads in both states. */\n.count {\n  flex-shrink: 0;\n  font-size: var(--font-size-xs);\n  min-height: 18px;\n  padding: 0 var(--space-2);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition: none;\n  }\n}\n","import { isActivationKey } from '@pitchfork-ui/core';\nimport { Component, Element, Event, EventEmitter, h, Host, Listen, Prop } from '@stencil/core';\n\nimport type { PfTabsSize, PfTabsVariant } from '../pf-tabs/pf-tabs';\n\nexport type PfTabPlacement = 'start' | 'end';\n\n/**\n * One tab inside a `pf-tabs`.\n *\n * It only reports that it was chosen; the group owns the selection, the single\n * tab stop and the id wiring — the same division as `pf-radio-group` with its\n * radios and `pf-select` with its options. The group writes `selected`,\n * `variant`, `size` and `full-width` back onto it, so the stylesheet has\n * reflected attributes to select on without the tab knowing anything about its\n * container.\n *\n * The host is the `tab` itself rather than a wrapper around a button, so it is\n * the element the group focuses and the one `aria-controls` points from.\n *\n * @slot - the tab's label.\n * @part label - the label's box.\n * @part icon - the decorative icon, when `icon` is set.\n * @part count - the count badge, when `count` is set.\n */\n@Component({\n  tag: 'pf-tab',\n  styleUrl: 'pf-tab.css',\n  shadow: true,\n})\nexport class PfTab {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Identifies the tab, and pairs it with the `pf-tab-panel` carrying the same\n   * value.\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 group's own filtering both read it. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set by the group. Reflected, so the stylesheet can mark the tab. */\n  @Prop({ mutable: true, reflect: true }) selected = false;\n\n  /** Set by the group from its own `variant`. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) variant: PfTabsVariant = 'underline';\n\n  /** Set by the group from its own `size`. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) size: PfTabsSize = 'md';\n\n  /** Set by the group from its own `fullWidth`. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) fullWidth = false;\n\n  /** A decorative icon's name, from the same registry as `pf-icon`. */\n  @Prop() icon?: string;\n\n  /** Which side of the label the icon sits on. */\n  @Prop() iconPlacement: PfTabPlacement = 'start';\n\n  /**\n   * A count rendered as a badge beside the label (GitHub-style, \"Issues 12\").\n   * It is left in the tab's accessible name, so a screen reader announces it.\n   * `0` shows a zero; omitting the prop shows no badge at all.\n   */\n  @Prop() count?: number;\n\n  /** Which side of the label the count badge sits on. */\n  @Prop() badgePlacement: PfTabPlacement = 'end';\n\n  /** Asks the group to select this tab. The group decides. */\n  @Event() pfTabSelect!: EventEmitter<{ value: string }>;\n\n  /**\n   * Puts itself in the group's `tab` slot.\n   *\n   * So that a consumer can write one `pf-tab` and one `pf-tab-panel` per item\n   * — interleaved, which is what a loop over data produces — and still have\n   * the tabs land in the strip and the panels in the stack below it. A slot\n   * the consumer set themselves is left alone, so the explicit spelling keeps\n   * working.\n   *\n   * Assigning `slot` moves the node between slots, which fires `slotchange` on\n   * both; writing the same value again is not a mutation, so this does not\n   * loop.\n   */\n  connectedCallback() {\n    if (!this.el.hasAttribute('slot')) this.el.setAttribute('slot', 'tab');\n  }\n\n  @Listen('click')\n  handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      // Swallowed rather than left for the group to read as a selection.\n      event.stopPropagation();\n      return;\n    }\n    this.pfTabSelect.emit({ value: this.value });\n  }\n\n  /**\n   * Enter and Space select, as they do on a tab. The arrows are the group's:\n   * only it knows the other tabs.\n   *\n   * `preventDefault` because the host is a focusable element rather than a\n   * button, so Space would scroll the page instead.\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (!isActivationKey(event.key) || this.disabled) return;\n    event.preventDefault();\n    this.pfTabSelect.emit({ value: this.value });\n  }\n\n  render() {\n    const icon = this.icon ? (\n      <pf-icon key=\"icon\" class=\"icon\" part=\"icon\" name={this.icon} aria-hidden=\"true\"></pf-icon>\n    ) : null;\n    const count =\n      this.count === undefined ? null : (\n        <pf-badge key=\"count\" class=\"count\" part=\"count\" variant=\"neutral\">\n          {this.count}\n        </pf-badge>\n      );\n\n    return (\n      <Host\n        role=\"tab\"\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        {this.iconPlacement === 'start' ? icon : null}\n        {this.badgePlacement === 'start' ? count : null}\n        <span class=\"label\" part=\"label\">\n          <slot />\n        </span>\n        {this.badgePlacement === 'end' ? count : null}\n        {this.iconPlacement === 'end' ? icon : null}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,6qCAA6qC,CAAC;;MC8BzrC,KAAK,GAAA,MAAA;;;;;;AAGhB;;;;;;;AAOG;IACsB,KAAK,GAAG,EAAE;;IAGV,QAAQ,GAAG,KAAK;;IAGD,QAAQ,GAAG,KAAK;;IAGhB,OAAO,GAAkB,WAAW;;IAGpC,IAAI,GAAe,IAAI;;IAGvB,SAAS,GAAG,KAAK;;AAGjD,IAAA,IAAI;;IAGJ,aAAa,GAAmB,OAAO;AAE/C;;;;AAIG;AACK,IAAA,KAAK;;IAGL,cAAc,GAAmB,KAAK;;AAGrC,IAAA,WAAW;AAEpB;;;;;;;;;;;;AAYG;IACH,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC;YAAE,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC;;AAIxE,IAAA,WAAW,CAAC,KAAiB,EAAA;AAC3B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;;YAEjB,KAAK,CAAC,eAAe,EAAE;YACvB;;AAEF,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;AAG9C;;;;;;AAMG;AAEH,IAAA,aAAa,CAAC,KAAoB,EAAA;QAChC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ;YAAE;QAClD,KAAK,CAAC,cAAc,EAAE;AACtB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;IAG9C,MAAM,GAAA;AACJ,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IACpB,eAAS,GAAG,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,aAAA,EAAc,MAAM,GAAW,IACzF,IAAI;AACR,QAAA,MAAM,KAAK,GACT,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,IAAI,IAC7B,gBAAU,GAAG,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,SAAS,EAAA,EAC/D,IAAI,CAAC,KAAK,CACF,CACZ;AAEH,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,KAAK,EAAA,eAAA,EACK,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAChC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAAA,EAE3C,IAAI,CAAC,aAAa,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,EAC5C,IAAI,CAAC,cAAc,KAAK,OAAO,GAAG,KAAK,GAAG,IAAI,EAC/C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC9B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACN,IAAI,CAAC,cAAc,KAAK,KAAK,GAAG,KAAK,GAAG,IAAI,EAC5C,IAAI,CAAC,aAAa,KAAK,KAAK,GAAG,IAAI,GAAG,IAAI,CACtC;;;;;;;"}

package/dist/esm/pf-table-cell.entry.js

@@ -0,0 +1,48 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bm6UxEit.js';
+
+const pfTableCellCss = () => `:host{border-bottom:1px solid var(--pf-table-border);color:var(--pf-table-text);display:table-cell;font-size:var(--font-size-sm);line-height:1.4;padding:var(--pf-table-cell-padding-block, 14px) var(--space-3);vertical-align:middle}:host([hidden]){display:none}@media (min-width: 768px){:host{padding-inline:var(--space-4)}}:host([head]){background:var(--pf-table-bg-subtle);color:var(--pf-table-text-muted);font-weight:var(--font-weight-semibold);position:var(--pf-table-head-position, static);top:0;z-index:1}:host([last]){border-bottom:0}:host([align='left']){text-align:start}:host([align='center']){text-align:center}:host([align='right']){text-align:end}.sort{align-items:center;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:var(--space-2);justify-content:inherit;padding:0;width:100%}.sort:hover,.sort:focus-visible{color:var(--pf-table-text);outline:none}.indicator{display:inline-flex;font-size:var(--font-size-2xs);line-height:1;opacity:0.7}`;
+
+const PfTableCell = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pfTableSort = createEvent(this, "pfTableSort");
+    }
+    /** Set by the row: a header cell. Reflected, so the stylesheet reads it. */
+    head = false;
+    /** Set by the row: a cell in the last body row, which drops its rule. */
+    last = false;
+    /** Which way the content sits. Reflected for the stylesheet. */
+    align = 'left';
+    /** A column width, as any CSS length. Only a header cell's is read. */
+    width;
+    /**
+     * Identifies the column in the table's sort state. A header cell with one
+     * and `sortable` set is the only thing that can be sorted on.
+     *
+     * Reflected because the generated bindings set props as properties, so
+     * without it a consumer selecting `pf-table-cell[sort-key="..."]` finds
+     * nothing. The table reads the property.
+     */
+    sortKey;
+    /** Offer to sort on this column. Reflected for the stylesheet. */
+    sortable = false;
+    /** Set by the table: how this column is sorted, if it is. */
+    sort = 'none';
+    /** Asks the table to sort on this column. The table decides which way. */
+    pfTableSort;
+    onSort = () => {
+        if (!this.sortKey)
+            return;
+        this.pfTableSort.emit({ key: this.sortKey });
+    };
+    render() {
+        const sortable = this.head && this.sortable && Boolean(this.sortKey);
+        return (h(Host, { key: '419a9736fa82721764ea58179c56000a4eed5c25', role: this.head ? 'columnheader' : 'cell', "aria-sort": sortable ? this.sort : null, style: this.width ? { width: this.width } : undefined }, sortable ? (h("button", { type: "button", class: "sort", part: "sort", onClick: this.onSort }, h("span", { class: "label" }, h("slot", null)), h("span", { class: "indicator", part: "indicator", "aria-hidden": "true" }, this.sort === 'ascending' ? '^' : this.sort === 'descending' ? 'v' : '-'))) : (h("slot", null))));
+    }
+};
+PfTableCell.style = pfTableCellCss();
+
+export { PfTableCell as pf_table_cell };
+//# sourceMappingURL=pf-table-cell.entry.js.map
+
+//# sourceMappingURL=pf-table-cell.entry.js.map

package/dist/esm/pf-table-cell.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-table-cell.entry.js","sources":["src/components/pf-table-cell/pf-table-cell.css?tag=pf-table-cell&encapsulation=shadow","src/components/pf-table-cell/pf-table-cell.tsx"],"sourcesContent":[":host {\n  border-bottom: 1px solid var(--pf-table-border);\n  color: var(--pf-table-text);\n  display: table-cell;\n  font-size: var(--font-size-sm);\n  line-height: 1.4;\n  padding: var(--pf-table-cell-padding-block, 14px) var(--space-3);\n  vertical-align: middle;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n@media (--md) {\n  :host {\n    padding-inline: var(--space-4);\n  }\n}\n\n:host([head]) {\n  background: var(--pf-table-bg-subtle);\n  color: var(--pf-table-text-muted);\n  font-weight: var(--font-weight-semibold);\n  /*\n   * Read from the table rather than told: `sticky` only when the table asked\n   * for a sticky header, `static` otherwise.\n   */\n  position: var(--pf-table-head-position, static);\n  top: 0;\n  z-index: 1;\n}\n\n/* The table's own border is the rule under the last row. */\n:host([last]) {\n  border-bottom: 0;\n}\n\n:host([align='left']) {\n  text-align: start;\n}\n\n:host([align='center']) {\n  text-align: center;\n}\n\n:host([align='right']) {\n  text-align: end;\n}\n\n.sort {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  color: inherit;\n  cursor: pointer;\n  display: inline-flex;\n  font: inherit;\n  gap: var(--space-2);\n  /* Follows the cell's own alignment rather than fighting it. */\n  justify-content: inherit;\n  padding: 0;\n  width: 100%;\n}\n\n.sort:hover,\n.sort:focus-visible {\n  color: var(--pf-table-text);\n  outline: none;\n}\n\n.indicator {\n  display: inline-flex;\n  font-size: var(--font-size-2xs);\n  line-height: 1;\n  opacity: 0.7;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type PfTableCellAlign = 'left' | 'center' | 'right';\n\n/**\n * One cell of a `pf-table` row.\n *\n * A header cell carries `columnheader` rather than `cell`, which the row tells\n * it; `sortable` turns the label into a button that asks the table to sort.\n * The table answers by writing `sort` back, which is what `aria-sort` and the\n * indicator read — the ask and the answer kept apart, as everywhere else here.\n *\n * @slot - the cell's content.\n * @part sort - the header's sort button, when `sortable` is set.\n * @part indicator - the sort indicator inside that button.\n */\n@Component({\n  tag: 'pf-table-cell',\n  styleUrl: 'pf-table-cell.css',\n  shadow: true,\n})\nexport class PfTableCell {\n  /** Set by the row: a header cell. Reflected, so the stylesheet reads it. */\n  @Prop({ mutable: true, reflect: true }) head = false;\n\n  /** Set by the row: a cell in the last body row, which drops its rule. */\n  @Prop({ mutable: true, reflect: true }) last = false;\n\n  /** Which way the content sits. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) align: PfTableCellAlign = 'left';\n\n  /** A column width, as any CSS length. Only a header cell's is read. */\n  @Prop() width?: string;\n\n  /**\n   * Identifies the column in the table's sort state. A header cell with one\n   * and `sortable` set is the only thing that can be sorted on.\n   *\n   * Reflected because the generated bindings set props as properties, so\n   * without it a consumer selecting `pf-table-cell[sort-key=\"...\"]` finds\n   * nothing. The table reads the property.\n   */\n  @Prop({ reflect: true }) sortKey?: string;\n\n  /** Offer to sort on this column. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) sortable = false;\n\n  /** Set by the table: how this column is sorted, if it is. */\n  @Prop({ mutable: true }) sort: 'ascending' | 'descending' | 'none' = 'none';\n\n  /** Asks the table to sort on this column. The table decides which way. */\n  @Event() pfTableSort!: EventEmitter<{ key: string }>;\n\n  private onSort = () => {\n    if (!this.sortKey) return;\n    this.pfTableSort.emit({ key: this.sortKey });\n  };\n\n  render() {\n    const sortable = this.head && this.sortable && Boolean(this.sortKey);\n\n    return (\n      <Host\n        role={this.head ? 'columnheader' : 'cell'}\n        aria-sort={sortable ? this.sort : null}\n        style={this.width ? { width: this.width } : undefined}\n      >\n        {sortable ? (\n          <button type=\"button\" class=\"sort\" part=\"sort\" onClick={this.onSort}>\n            <span class=\"label\">\n              <slot />\n            </span>\n            {/* Decorative: `aria-sort` on the header is what is announced. */}\n            <span class=\"indicator\" part=\"indicator\" aria-hidden=\"true\">\n              {this.sort === 'ascending' ? '^' : this.sort === 'descending' ? 'v' : '-'}\n            </span>\n          </button>\n        ) : (\n          <slot />\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,0+BAA0+B,CAAC;;MCqB5/B,WAAW,GAAA,MAAA;;;;;;IAEkB,IAAI,GAAG,KAAK;;IAGZ,IAAI,GAAG,KAAK;;IAG3B,KAAK,GAAqB,MAAM;;AAGjD,IAAA,KAAK;AAEb;;;;;;;AAOG;AACsB,IAAA,OAAO;;IAGP,QAAQ,GAAG,KAAK;;IAGhB,IAAI,GAAwC,MAAM;;AAGlE,IAAA,WAAW;IAEZ,MAAM,GAAG,MAAK;QACpB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE;AACnB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;AAC9C,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;AAEpE,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,cAAc,GAAG,MAAM,EAAA,WAAA,EAC9B,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,EACtC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,SAAS,EAAA,EAEpD,QAAQ,IACP,CAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,IAAI,CAAC,MAAM,EAAA,EACjE,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACH,EAEP,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,WAAW,iBAAa,MAAM,EAAA,EACxD,IAAI,CAAC,IAAI,KAAK,WAAW,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,YAAY,GAAG,GAAG,GAAG,GAAG,CACpE,CACA,KAET,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACT,CACI;;;;;;;"}

package/dist/esm/pf-table-row.entry.js

@@ -0,0 +1,49 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+
+const pfTableRowCss = () => `:host{display:table-row}:host([hidden]){display:none}:host([odd]){background:var(--pf-table-row-stripe, transparent)}:host(:not([head]):hover){background:var(--pf-table-row-hover, transparent)}`;
+
+const PfTableRow = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** A header row. Reflected, and pushed onto its cells. */
+    head = false;
+    /** Set by the table: every other body row, for striping. Reflected. */
+    odd = false;
+    /**
+     * Set by the table: the last body row, whose cells drop their bottom border
+     * so the rule does not double up with the table's own.
+     */
+    last = false;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad() {
+        this.sync();
+    }
+    sync() {
+        for (const cell of Array.from(this.el.querySelectorAll('pf-table-cell'))) {
+            if (cell.parentElement !== this.el)
+                continue;
+            const node = cell;
+            node.head = this.head;
+            node.last = this.last;
+        }
+    }
+    render() {
+        return (h(Host, { key: 'd9c4ff6abef4826dd24c2099e10b7096bea0c93a', role: "row" }, h("slot", { key: '4cb6b474a1dd2ddb970664266aa0b102bf52ead2', onSlotchange: () => this.sync() })));
+    }
+    static get watchers() { return {
+        "head": [{
+                "sync": 0
+            }],
+        "last": [{
+                "sync": 0
+            }]
+    }; }
+};
+PfTableRow.style = pfTableRowCss();
+
+export { PfTableRow as pf_table_row };
+//# sourceMappingURL=pf-table-row.entry.js.map
+
+//# sourceMappingURL=pf-table-row.entry.js.map

package/dist/esm/pf-table-row.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-table-row.entry.js","sources":["src/components/pf-table-row/pf-table-row.css?tag=pf-table-row&encapsulation=shadow","src/components/pf-table-row/pf-table-row.tsx"],"sourcesContent":["/*\n * A box, not `display: contents`: that is what lets the row take a background\n * and a `:hover` of its own. An element with no box takes neither, which is\n * why the grid version of this needed both pushed down in JS.\n */\n:host {\n  display: table-row;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([odd]) {\n  background: var(--pf-table-row-stripe, transparent);\n}\n\n/* The header is not a row anyone hovers over to read. */\n:host(:not([head]):hover) {\n  background: var(--pf-table-row-hover, transparent);\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\n/**\n * One row of a `pf-table`.\n *\n * `display: table-row`, so the row is a box: that is what lets it take a\n * background for striping and a `:hover` of its own, neither of which an\n * element with `display: contents` can do. Its cells are table-cells inside\n * it, and the column widths come from the table layout rather than from\n * anything measured.\n *\n * The row pushes `head` and `last` onto its own cells, because it knows what\n * it is and they do not — `last` comes from the table, which is the only\n * thing that can see where the body ends.\n *\n * @slot - the `pf-table-cell` children.\n */\n@Component({\n  tag: 'pf-table-row',\n  styleUrl: 'pf-table-row.css',\n  shadow: true,\n})\nexport class PfTableRow {\n  @Element() el!: HTMLElement;\n\n  /** A header row. Reflected, and pushed onto its cells. */\n  @Prop({ reflect: true }) head = false;\n\n  /** Set by the table: every other body row, for striping. Reflected. */\n  @Prop({ mutable: true, reflect: true }) odd = false;\n\n  /**\n   * Set by the table: the last body row, whose cells drop their bottom border\n   * so the rule does not double up with the table's own.\n   */\n  @Prop({ mutable: true, reflect: true }) last = false;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  @Watch('head')\n  @Watch('last')\n  sync() {\n    for (const cell of Array.from(this.el.querySelectorAll<HTMLElement>('pf-table-cell'))) {\n      if (cell.parentElement !== this.el) continue;\n      const node = cell as HTMLElement & { head: boolean; last: boolean };\n      node.head = this.head;\n      node.last = this.last;\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"row\">\n        <slot onSlotchange={() => this.sync()} />\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,iMAAiM,CAAC;;MCsBlN,UAAU,GAAA,MAAA;;;;;;IAII,IAAI,GAAG,KAAK;;IAGG,GAAG,GAAG,KAAK;AAEnD;;;AAGG;IACqC,IAAI,GAAG,KAAK;;IAGpD,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,EAAE;;IAKb,IAAI,GAAA;AACF,QAAA,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAc,eAAe,CAAC,CAAC,EAAE;AACrF,YAAA,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC,EAAE;gBAAE;YACpC,MAAM,IAAI,GAAG,IAAsD;AACnE,YAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;AACrB,YAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;;;IAIzB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,KAAK,EAAA,EACd,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,YAAY,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EAAA,CAAI,CACpC;;;;;;;;;;;;;;;"}