@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/cjs/pf-time-picker.cjs.entry.js

@@ -0,0 +1,329 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var placePopover = require('./place-popover-CMqeolzZ.js');
+var aria = require('./aria-5oCPUGFo.js');
+var keys = require('./keys-S3YTuCcn.js');
+var formValidity = require('./form-validity-BCrcqnZ7.js');
+var controlLabel = require('./control-label-C0eK8bPh.js');
+
+//#region src/time.ts
+/**
+* Two digits, which both layers need for the column labels as well as for the
+* canonical value — so it is exported rather than private.
+*/
+var padTimePart = (value) => String(value).padStart(2, "0");
+/**
+* Parses `HH:mm` (or `H:mm`) into hour and minute, or nulls.
+*
+* Out-of-range parts are rejected rather than wrapped: `25:00` is not 1am, it
+* is a mistake, and silently turning it into one hides the mistake.
+*/
+function parseTimeValue(value) {
+	const match = /^(\d{1,2}):(\d{2})$/.exec((value ?? "").trim());
+	if (!match) return {
+		hour: null,
+		minute: null
+	};
+	const hour = Number(match[1]);
+	const minute = Number(match[2]);
+	if (hour > 23 || minute > 59) return {
+		hour: null,
+		minute: null
+	};
+	return {
+		hour,
+		minute
+	};
+}
+/** The canonical 24-hour `HH:mm`, or `''` when either part is missing. */
+function formatTimeValue(parts) {
+	if (parts.hour === null || parts.minute === null) return "";
+	return `${padTimePart(parts.hour)}:${padTimePart(parts.minute)}`;
+}
+/** What the trigger shows: `14:30`, or `2:30 PM` on a 12-hour cycle. */
+function formatTimeDisplay(parts, hourCycle) {
+	if (parts.hour === null || parts.minute === null) return "";
+	if (hourCycle === 24) return `${padTimePart(parts.hour)}:${padTimePart(parts.minute)}`;
+	return `${toHour12(parts.hour)}:${padTimePart(parts.minute)} ${meridiemOf(parts.hour)}`;
+}
+/** Which half of the day an hour falls in. */
+function meridiemOf(hour24) {
+	return hour24 < 12 ? "AM" : "PM";
+}
+/**
+* The 12-hour face of a 24-hour hour: midnight and midday both read as 12,
+* not 0, which is the one case `hour % 12` gets wrong.
+*/
+function toHour12(hour24) {
+	const face = hour24 % 12;
+	return face === 0 ? 12 : face;
+}
+/** The 24-hour hour for a clock face plus a meridiem. 12 AM is 0, 12 PM is 12. */
+function toHour24(hour12, meridiem) {
+	const base = hour12 % 12;
+	return meridiem === "PM" ? base + 12 : base;
+}
+/**
+* The options a column offers: `0, step, 2*step, …` below `length`.
+*
+* A step that does not divide the range leaves a short last stride rather
+* than overshooting — `timeRange(60, 25)` is `[0, 25, 50]`, and 50 is a real
+* minute where 75 is not.
+*/
+function timeRange(length, step = 1) {
+	const safeStep = Math.max(1, Math.floor(step));
+	const count = Math.ceil(length / safeStep);
+	return Array.from({ length: count }, (_, index) => index * safeStep);
+}
+/** The hours a column offers: 0–23, or the 1–12 clock face. */
+function hourOptions(hourCycle) {
+	return hourCycle === 24 ? timeRange(24) : timeRange(12).map((hour) => hour + 1);
+}
+
+const pfTimePickerCss = () => `:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-timepicker-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-timepicker-invalid-border);margin-inline-start:var(--space-1)}.trigger{align-items:center;background:var(--pf-timepicker-bg);border:1px solid var(--pf-timepicker-border);border-radius:var(--radius-md);color:var(--pf-timepicker-text);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-size-sm);gap:var(--space-2);justify-content:space-between;padding:var(--space-2) var(--space-3);text-align:start;width:100%}.trigger:focus-visible{border-color:var(--pf-timepicker-focus-border);box-shadow:var(--pf-focus-ring);outline:none}.trigger:disabled{cursor:not-allowed;opacity:0.6}.trigger--invalid{border-color:var(--pf-timepicker-invalid-border)}.value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.value--placeholder{color:var(--pf-timepicker-placeholder)}.description{color:var(--pf-timepicker-text-muted);font-size:var(--font-size-xs);margin:0}.error{color:var(--pf-timepicker-invalid-border);font-size:var(--font-size-xs);margin:0}.panel{inset:auto;margin:0;background:var(--pf-timepicker-menu-bg);border:1px solid var(--pf-timepicker-menu-border);border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);display:flex;gap:var(--space-1);padding:var(--space-1)}.panel:popover-open{animation:pf-time-picker-in var(--pf-transition-enter)}@keyframes pf-time-picker-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.panel:popover-open{animation:none}}.column{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow-y:auto;scrollbar-width:thin}.column:focus-visible{outline:none}.option{background:none;border:0;border-radius:var(--radius-sm);color:var(--pf-timepicker-text);cursor:pointer;font-family:inherit;font-size:var(--font-size-sm);font-variant-numeric:tabular-nums;padding:var(--space-1) var(--space-3);text-align:center}.option:hover{background:var(--pf-timepicker-option-hover-bg)}.option:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.option--selected{background:var(--pf-timepicker-option-active-bg);color:var(--pf-timepicker-option-active-text)}`;
+
+const PfTimePicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfChange = index.createEvent(this, "pfChange");
+        this.pfOpenChange = index.createEvent(this, "pfOpenChange");
+        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; the submission reads the attribute. */
+    name;
+    /** Canonical 24-hour `HH:mm`, or empty. */
+    value = '';
+    /** Whether the panel is showing. Reflected for the stylesheet. */
+    open = false;
+    /**
+     * 12- or 24-hour display. The value stays 24-hour either way.
+     *
+     * Read through `cycle` below, never directly: Stencil coerces an attribute
+     * using the prop's type as *written*, and it cannot resolve a name it had
+     * to import. Measured: with `HourCycle` imported from core,
+     * `hour-cycle="12"` arrives as the **string** `"12"`, so `=== 12` is
+     * false, while `minute-step="15"` — declared `number` — arrives as `15`.
+     * Writing `0 | 1` out inline *is* coerced, which `pf-heatmap.weekStartsOn`
+     * shows; the alias is kept here because it is the shared type, and the
+     * getter costs nothing.
+     */
+    hourCycle = 24;
+    /** Granularity of the minutes column. */
+    minuteStep = 1;
+    label;
+    description;
+    error;
+    placeholder = 'Select time';
+    required = false;
+    disabled = false;
+    /** Fires when the time changes, with the canonical `HH:mm`. */
+    pfChange;
+    /** Fires whenever the panel opens or closes, whoever caused it. */
+    pfOpenChange;
+    initialValue = '';
+    stopObserving;
+    componentWillLoad() {
+        this.initialValue = this.value ?? '';
+        this.syncFormState();
+    }
+    componentDidRender() {
+        if (this.open)
+            this.scrollSelectedIntoView();
+    }
+    disconnectedCallback() {
+        this.stopObserving?.();
+    }
+    syncFormState() {
+        this.internals.setFormValue(this.value || null);
+        formValidity.applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);
+    }
+    syncOpen(next, previous) {
+        if (next)
+            this.showPanel();
+        else
+            this.hidePanel();
+        if (next !== previous)
+            this.pfOpenChange.emit({ open: next });
+    }
+    async show() {
+        if (!this.disabled)
+            this.open = true;
+    }
+    async hide() {
+        this.open = false;
+    }
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    async getValidationMessage() {
+        return this.internals.validationMessage;
+    }
+    /** A reset restores the value the field started with, not an empty one. */
+    formResetCallback() {
+        this.value = this.initialValue;
+    }
+    /** `hourCycle` with the attribute case coerced; see the prop's comment. */
+    get cycle() {
+        return Number(this.hourCycle) === 12 ? 12 : 24;
+    }
+    get panel() {
+        return this.el.shadowRoot?.querySelector('[part="panel"]') ?? null;
+    }
+    get trigger() {
+        return this.el.shadowRoot?.querySelector('[part="trigger"]') ?? null;
+    }
+    get parts() {
+        return parseTimeValue(this.value);
+    }
+    showPanel() {
+        const panel = this.panel;
+        if (this.disabled || !panel || panel.matches(':popover-open'))
+            return;
+        panel.showPopover();
+        this.stopObserving?.();
+        this.stopObserving = placePopover.observeAnchoredPosition({
+            getAnchor: () => this.trigger,
+            getFloating: () => panel,
+            align: 'start',
+            matchAnchorWidth: false,
+            flip: true,
+            onChange: ({ left, top }) => placePopover.placePopover(panel, left, top),
+        });
+        this.scrollSelectedIntoView();
+        // Focus the first column's selected option, so the arrows work at once.
+        panel.querySelector('[data-selected="true"]')?.focus();
+    }
+    hidePanel() {
+        this.stopObserving?.();
+        this.stopObserving = undefined;
+        const panel = this.panel;
+        if (panel?.matches(':popover-open'))
+            panel.hidePopover();
+    }
+    /**
+     * Centres each column on its chosen option.
+     *
+     * `block: 'nearest'` would leave a column that is already scrolled roughly
+     * right alone, which reads as the wrong hour being selected.
+     */
+    scrollSelectedIntoView() {
+        for (const option of Array.from(this.panel?.querySelectorAll('[data-selected="true"]') ?? [])) {
+            if (typeof option.scrollIntoView === 'function') {
+                option.scrollIntoView({ block: 'center' });
+            }
+        }
+    }
+    onToggle = (event) => {
+        const nowOpen = event.newState === 'open';
+        if (this.open !== nowOpen)
+            this.open = nowOpen;
+        if (!nowOpen)
+            this.trigger?.focus();
+    };
+    commit(next) {
+        const value = formatTimeValue(next);
+        if (!value || value === this.value)
+            return;
+        this.value = value;
+        this.pfChange.emit({ value });
+    }
+    selectHour(hour) {
+        const hour24 = this.cycle === 24 ? hour : toHour24(hour, this.selectedMeridiem() ?? 'AM');
+        this.commit({ hour: hour24, minute: this.parts.minute ?? 0 });
+    }
+    selectMinute(minute) {
+        this.commit({ hour: this.parts.hour ?? 0, minute });
+    }
+    selectMeridiem(meridiem) {
+        const { hour, minute } = this.parts;
+        this.commit({ hour: toHour24(toHour12(hour ?? 0), meridiem), minute: minute ?? 0 });
+    }
+    selectedMeridiem() {
+        const { hour } = this.parts;
+        return hour === null ? null : meridiemOf(hour);
+    }
+    /**
+     * Up and down move within a column, and stop at its ends rather than
+     * wrapping — a wrap in a scrolling column of 60 minutes reads as the list
+     * having jumped rather than moved.
+     *
+     * The focused option is read from `shadowRoot.activeElement`, because
+     * `document.activeElement` is this host: focus inside a shadow root is
+     * reported as the host from the outside.
+     */
+    onColumnKeyDown = (event) => {
+        if (event.key !== keys.Keys.ArrowDown && event.key !== keys.Keys.ArrowUp)
+            return;
+        const column = event.currentTarget;
+        const options = Array.from(column.querySelectorAll('button'));
+        const index = options.indexOf(this.el.shadowRoot?.activeElement);
+        if (index === -1)
+            return;
+        event.preventDefault();
+        const next = event.key === keys.Keys.ArrowDown ? index + 1 : index - 1;
+        options[Math.min(Math.max(next, 0), options.length - 1)]?.focus();
+    };
+    renderColumn(name, options) {
+        return (index.h("div", { class: "column", part: "column", role: "listbox", "aria-label": name, tabindex: -1, onKeyDown: this.onColumnKeyDown }, options.map((option) => (index.h("button", { key: option.key, type: "button", part: "option", class: { option: true, 'option--selected': option.selected }, role: "option", "aria-selected": option.selected ? 'true' : 'false', "data-selected": option.selected ? 'true' : 'false', onClick: option.onSelect }, option.label)))));
+    }
+    render() {
+        const describedBy = aria.composeDescribedBy(this.description && 'description', this.error && 'error');
+        const { hour, minute } = this.parts;
+        const display = formatTimeDisplay(this.parts, this.cycle);
+        const shownHour = hour === null ? null : this.cycle === 24 ? hour : toHour12(hour);
+        const meridiem = this.selectedMeridiem();
+        return (index.h(index.Host, { key: 'c26f419605ca45c6180180ebce68bec77fe99676' }, index.h("div", { key: 'bf975b4f6ef429212d28be61448df62d54322e90', class: "field", part: "field" }, this.label && (index.h("label", { key: '80b0160476b03992991886c1e0c2f06dd1195931', class: "label", part: "label", htmlFor: "trigger" }, this.label, this.required && (index.h("span", { key: '5d52003ddf874d68adcaad65012197a5262fe64c', class: "required", "aria-hidden": "true" }, "*")))), index.h("button", { key: '842fb04fce12e559fc9f7ef541baa60c118c9f9d', id: "trigger", "aria-label": controlLabel.controlAriaLabel(this.el, this.label), part: "trigger", class: { trigger: true, 'trigger--invalid': Boolean(this.error) }, type: "button", disabled: this.disabled, "aria-haspopup": "dialog", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "panel", "aria-invalid": this.error ? 'true' : null, "aria-required": this.required ? 'true' : null, "aria-describedby": describedBy, onClick: () => {
+                if (!this.disabled)
+                    this.open = !this.open;
+            } }, index.h("span", { key: '2eefe098a48de552dd6c869b4696ce09960abf5e', class: { value: true, 'value--placeholder': !display } }, display || this.placeholder), index.h("pf-icon", { key: '881c2760be97dacb6ffd2df9e46f1c66252ff513', name: "clock" })), this.description && (index.h("p", { key: 'c09274524b28fa88034eba28138d0559cc0b60cf', class: "description", part: "description", id: "description" }, this.description)), this.error && (index.h("p", { key: '9a7ac33fc684b137684b6925cf44cb2d26c05aa0', class: "error", part: "error", id: "error" }, this.error))), index.h("div", { key: '1c79f18f2078b4d2ae8c2832f8e49f3a33723354', id: "panel", part: "panel", class: "panel", popover: "auto", role: "dialog", "aria-label": "Choose a time", onToggle: this.onToggle }, this.renderColumn('Hour', hourOptions(this.cycle).map((option) => ({
+            key: `h-${option}`,
+            label: padTimePart(option),
+            selected: shownHour === option,
+            onSelect: () => this.selectHour(option),
+        }))), this.renderColumn('Minute', timeRange(60, this.minuteStep).map((option) => ({
+            key: `m-${option}`,
+            label: padTimePart(option),
+            selected: minute === option,
+            onSelect: () => this.selectMinute(option),
+        }))), this.cycle === 12 &&
+            this.renderColumn('AM or PM', ['AM', 'PM'].map((option) => ({
+                key: option,
+                label: option,
+                selected: meridiem === option,
+                onSelect: () => this.selectMeridiem(option),
+            }))))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "syncFormState": 0
+            }],
+        "error": [{
+                "syncFormState": 0
+            }],
+        "required": [{
+                "syncFormState": 0
+            }],
+        "open": [{
+                "syncOpen": 0
+            }]
+    }; }
+};
+PfTimePicker.style = pfTimePickerCss();
+
+exports.pf_time_picker = PfTimePicker;
+//# sourceMappingURL=pf-time-picker.entry.cjs.js.map
+
+//# sourceMappingURL=pf-time-picker.cjs.entry.js.map

package/dist/cjs/pf-time-picker.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-time-picker.cjs.entry.js","mappings":"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","names":["applyControlValidity","observeAnchoredPosition","placePopover","Keys","h","composeDescribedBy","Host","controlAriaLabel"],"sources":["../core/dist/time.js","src/components/pf-time-picker/pf-time-picker.css?tag=pf-time-picker&encapsulation=shadow","src/components/pf-time-picker/pf-time-picker.tsx"],"sourcesContent":["//#region src/time.ts\n/**\n* Two digits, which both layers need for the column labels as well as for the\n* canonical value — so it is exported rather than private.\n*/\nvar padTimePart = (value) => String(value).padStart(2, \"0\");\n/**\n* Parses `HH:mm` (or `H:mm`) into hour and minute, or nulls.\n*\n* Out-of-range parts are rejected rather than wrapped: `25:00` is not 1am, it\n* is a mistake, and silently turning it into one hides the mistake.\n*/\nfunction parseTimeValue(value) {\n\tconst match = /^(\\d{1,2}):(\\d{2})$/.exec((value ?? \"\").trim());\n\tif (!match) return {\n\t\thour: null,\n\t\tminute: null\n\t};\n\tconst hour = Number(match[1]);\n\tconst minute = Number(match[2]);\n\tif (hour > 23 || minute > 59) return {\n\t\thour: null,\n\t\tminute: null\n\t};\n\treturn {\n\t\thour,\n\t\tminute\n\t};\n}\n/** The canonical 24-hour `HH:mm`, or `''` when either part is missing. */\nfunction formatTimeValue(parts) {\n\tif (parts.hour === null || parts.minute === null) return \"\";\n\treturn `${padTimePart(parts.hour)}:${padTimePart(parts.minute)}`;\n}\n/** What the trigger shows: `14:30`, or `2:30 PM` on a 12-hour cycle. */\nfunction formatTimeDisplay(parts, hourCycle) {\n\tif (parts.hour === null || parts.minute === null) return \"\";\n\tif (hourCycle === 24) return `${padTimePart(parts.hour)}:${padTimePart(parts.minute)}`;\n\treturn `${toHour12(parts.hour)}:${padTimePart(parts.minute)} ${meridiemOf(parts.hour)}`;\n}\n/** Which half of the day an hour falls in. */\nfunction meridiemOf(hour24) {\n\treturn hour24 < 12 ? \"AM\" : \"PM\";\n}\n/**\n* The 12-hour face of a 24-hour hour: midnight and midday both read as 12,\n* not 0, which is the one case `hour % 12` gets wrong.\n*/\nfunction toHour12(hour24) {\n\tconst face = hour24 % 12;\n\treturn face === 0 ? 12 : face;\n}\n/** The 24-hour hour for a clock face plus a meridiem. 12 AM is 0, 12 PM is 12. */\nfunction toHour24(hour12, meridiem) {\n\tconst base = hour12 % 12;\n\treturn meridiem === \"PM\" ? base + 12 : base;\n}\n/**\n* The options a column offers: `0, step, 2*step, …` below `length`.\n*\n* A step that does not divide the range leaves a short last stride rather\n* than overshooting — `timeRange(60, 25)` is `[0, 25, 50]`, and 50 is a real\n* minute where 75 is not.\n*/\nfunction timeRange(length, step = 1) {\n\tconst safeStep = Math.max(1, Math.floor(step));\n\tconst count = Math.ceil(length / safeStep);\n\treturn Array.from({ length: count }, (_, index) => index * safeStep);\n}\n/** The hours a column offers: 0–23, or the 1–12 clock face. */\nfunction hourOptions(hourCycle) {\n\treturn hourCycle === 24 ? timeRange(24) : timeRange(12).map((hour) => hour + 1);\n}\n//#endregion\nexport { formatTimeDisplay, formatTimeValue, hourOptions, meridiemOf, padTimePart, parseTimeValue, timeRange, toHour12, toHour24 };\n",":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-1);\n}\n\n.label {\n  color: var(--pf-timepicker-text);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-timepicker-invalid-border);\n  margin-inline-start: var(--space-1);\n}\n\n.trigger {\n  align-items: center;\n  background: var(--pf-timepicker-bg);\n  border: 1px solid var(--pf-timepicker-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-timepicker-text);\n  cursor: pointer;\n  display: flex;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  gap: var(--space-2);\n  justify-content: space-between;\n  padding: var(--space-2) var(--space-3);\n  text-align: start;\n  width: 100%;\n}\n\n.trigger:focus-visible {\n  border-color: var(--pf-timepicker-focus-border);\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.trigger--invalid {\n  border-color: var(--pf-timepicker-invalid-border);\n}\n\n.value {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.value--placeholder {\n  color: var(--pf-timepicker-placeholder);\n}\n\n.description {\n  color: var(--pf-timepicker-text-muted);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-timepicker-invalid-border);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n/*\n * See src/place-popover.ts: `inset: auto; margin: 0` are what make the\n * coordinates mean what they say, since the UA stylesheet centres a popover.\n */\n.panel {\n  inset: auto;\n  margin: 0;\n  background: var(--pf-timepicker-menu-bg);\n  border: 1px solid var(--pf-timepicker-menu-border);\n  border-radius: var(--radius-md);\n  box-shadow: var(--pf-elevation-popover-shadow);\n  display: flex;\n  gap: var(--space-1);\n  padding: var(--space-1);\n}\n\n.panel:popover-open {\n  animation: pf-time-picker-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-time-picker-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .panel:popover-open {\n    animation: none;\n  }\n}\n\n.column {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  max-height: 220px;\n  overflow-y: auto;\n  scrollbar-width: thin;\n}\n\n.column:focus-visible {\n  outline: none;\n}\n\n.option {\n  background: none;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-timepicker-text);\n  cursor: pointer;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  font-variant-numeric: tabular-nums;\n  padding: var(--space-1) var(--space-3);\n  text-align: center;\n}\n\n.option:hover {\n  background: var(--pf-timepicker-option-hover-bg);\n}\n\n.option:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.option--selected {\n  background: var(--pf-timepicker-option-active-bg);\n  color: var(--pf-timepicker-option-active-text);\n}\n","import {\n  composeDescribedBy,\n  formatTimeDisplay,\n  formatTimeValue,\n  hourOptions,\n  Keys,\n  meridiemOf,\n  observeAnchoredPosition,\n  padTimePart,\n  parseTimeValue,\n  timeRange,\n  toHour12,\n  toHour24,\n  type HourCycle,\n  type Meridiem,\n  type TimeParts,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\nimport { placePopover } from '../../place-popover';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n/**\n * A form-associated time field: a trigger that opens hour, minute and (on a\n * 12-hour cycle) meridiem columns in a popover.\n *\n * The submitted value is always canonical 24-hour `HH:mm`, whatever\n * `hour-cycle` displays. A control whose submitted value changed with its\n * display would be unusable on a server, so the cycle is a rendering choice\n * and nothing more — all of that arithmetic is core's.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part trigger - the button that opens the columns.\n * @part panel - the floating panel.\n * @part column - each of the scrolling columns.\n * @part option - every option 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-time-picker',\n  styleUrl: 'pf-time-picker.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfTimePicker {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Submitted under this name. Reflected; the submission reads the attribute. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** Canonical 24-hour `HH:mm`, or empty. */\n  @Prop({ mutable: true }) value = '';\n\n  /** Whether the panel is showing. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * 12- or 24-hour display. The value stays 24-hour either way.\n   *\n   * Read through `cycle` below, never directly: Stencil coerces an attribute\n   * using the prop's type as *written*, and it cannot resolve a name it had\n   * to import. Measured: with `HourCycle` imported from core,\n   * `hour-cycle=\"12\"` arrives as the **string** `\"12\"`, so `=== 12` is\n   * false, while `minute-step=\"15\"` — declared `number` — arrives as `15`.\n   * Writing `0 | 1` out inline *is* coerced, which `pf-heatmap.weekStartsOn`\n   * shows; the alias is kept here because it is the shared type, and the\n   * getter costs nothing.\n   */\n  @Prop() hourCycle: HourCycle = 24;\n\n  /** Granularity of the minutes column. */\n  @Prop() minuteStep = 1;\n\n  @Prop() label?: string;\n\n  @Prop() description?: string;\n\n  @Prop() error?: string;\n\n  @Prop() placeholder = 'Select time';\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires when the time changes, with the canonical `HH:mm`. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** Fires whenever the panel opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  private initialValue = '';\n  private stopObserving?: () => void;\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n  }\n\n  componentDidRender() {\n    if (this.open) this.scrollSelectedIntoView();\n  }\n\n  disconnectedCallback() {\n    this.stopObserving?.();\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    this.internals.setFormValue(this.value || null);\n    applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n  }\n\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showPanel();\n    else this.hidePanel();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  @Method()\n  async show(): Promise<void> {\n    if (!this.disabled) this.open = true;\n  }\n\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /** A reset restores the value the field started with, not an empty one. */\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  /** `hourCycle` with the attribute case coerced; see the prop's comment. */\n  private get cycle(): HourCycle {\n    return Number(this.hourCycle) === 12 ? 12 : 24;\n  }\n\n  private get panel() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"panel\"]') ?? null;\n  }\n\n  private get trigger() {\n    return this.el.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"trigger\"]') ?? null;\n  }\n\n  private get parts(): TimeParts {\n    return parseTimeValue(this.value);\n  }\n\n  private showPanel() {\n    const panel = this.panel;\n    if (this.disabled || !panel || panel.matches(':popover-open')) return;\n\n    panel.showPopover();\n    this.stopObserving?.();\n    this.stopObserving = observeAnchoredPosition({\n      getAnchor: () => this.trigger,\n      getFloating: () => panel,\n      align: 'start',\n      matchAnchorWidth: false,\n      flip: true,\n      onChange: ({ left, top }) => placePopover(panel, left, top),\n    });\n\n    this.scrollSelectedIntoView();\n    // Focus the first column's selected option, so the arrows work at once.\n    panel.querySelector<HTMLButtonElement>('[data-selected=\"true\"]')?.focus();\n  }\n\n  private hidePanel() {\n    this.stopObserving?.();\n    this.stopObserving = undefined;\n    const panel = this.panel;\n    if (panel?.matches(':popover-open')) panel.hidePopover();\n  }\n\n  /**\n   * Centres each column on its chosen option.\n   *\n   * `block: 'nearest'` would leave a column that is already scrolled roughly\n   * right alone, which reads as the wrong hour being selected.\n   */\n  private scrollSelectedIntoView() {\n    for (const option of Array.from(\n      this.panel?.querySelectorAll<HTMLElement>('[data-selected=\"true\"]') ?? [],\n    )) {\n      if (typeof option.scrollIntoView === 'function') {\n        option.scrollIntoView({ block: 'center' });\n      }\n    }\n  }\n\n  private onToggle = (event: ToggleEvent) => {\n    const nowOpen = event.newState === 'open';\n    if (this.open !== nowOpen) this.open = nowOpen;\n    if (!nowOpen) this.trigger?.focus();\n  };\n\n  private commit(next: TimeParts) {\n    const value = formatTimeValue(next);\n    if (!value || value === this.value) return;\n    this.value = value;\n    this.pfChange.emit({ value });\n  }\n\n  private selectHour(hour: number) {\n    const hour24 = this.cycle === 24 ? hour : toHour24(hour, this.selectedMeridiem() ?? 'AM');\n    this.commit({ hour: hour24, minute: this.parts.minute ?? 0 });\n  }\n\n  private selectMinute(minute: number) {\n    this.commit({ hour: this.parts.hour ?? 0, minute });\n  }\n\n  private selectMeridiem(meridiem: Meridiem) {\n    const { hour, minute } = this.parts;\n    this.commit({ hour: toHour24(toHour12(hour ?? 0), meridiem), minute: minute ?? 0 });\n  }\n\n  private selectedMeridiem(): Meridiem | null {\n    const { hour } = this.parts;\n    return hour === null ? null : meridiemOf(hour);\n  }\n\n  /**\n   * Up and down move within a column, and stop at its ends rather than\n   * wrapping — a wrap in a scrolling column of 60 minutes reads as the list\n   * having jumped rather than moved.\n   *\n   * The focused option is read from `shadowRoot.activeElement`, because\n   * `document.activeElement` is this host: focus inside a shadow root is\n   * reported as the host from the outside.\n   */\n  private onColumnKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== Keys.ArrowDown && event.key !== Keys.ArrowUp) return;\n\n    const column = event.currentTarget as HTMLElement;\n    const options = Array.from(column.querySelectorAll<HTMLButtonElement>('button'));\n    const index = options.indexOf(this.el.shadowRoot?.activeElement as HTMLButtonElement);\n    if (index === -1) return;\n\n    event.preventDefault();\n    const next = event.key === Keys.ArrowDown ? index + 1 : index - 1;\n    options[Math.min(Math.max(next, 0), options.length - 1)]?.focus();\n  };\n\n  private renderColumn(\n    name: string,\n    options: Array<{ key: string; label: string; selected: boolean; onSelect: () => void }>,\n  ) {\n    return (\n      <div\n        class=\"column\"\n        part=\"column\"\n        role=\"listbox\"\n        aria-label={name}\n        tabindex={-1}\n        onKeyDown={this.onColumnKeyDown}\n      >\n        {options.map((option) => (\n          <button\n            key={option.key}\n            type=\"button\"\n            part=\"option\"\n            class={{ option: true, 'option--selected': option.selected }}\n            role=\"option\"\n            aria-selected={option.selected ? 'true' : 'false'}\n            data-selected={option.selected ? 'true' : 'false'}\n            onClick={option.onSelect}\n          >\n            {option.label}\n          </button>\n        ))}\n      </div>\n    );\n  }\n\n  render() {\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n    const { hour, minute } = this.parts;\n    const display = formatTimeDisplay(this.parts, this.cycle);\n    const shownHour = hour === null ? null : this.cycle === 24 ? hour : toHour12(hour);\n    const meridiem = this.selectedMeridiem();\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"trigger\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n\n          <button\n            id=\"trigger\"\n            aria-label={controlAriaLabel(this.el, this.label)}\n            part=\"trigger\"\n            class={{ trigger: true, 'trigger--invalid': Boolean(this.error) }}\n            type=\"button\"\n            disabled={this.disabled}\n            aria-haspopup=\"dialog\"\n            aria-expanded={this.open ? 'true' : 'false'}\n            /* Same shadow root as the panel, so this IDREF resolves. */\n            aria-controls=\"panel\"\n            aria-invalid={this.error ? 'true' : null}\n            aria-required={this.required ? 'true' : null}\n            aria-describedby={describedBy}\n            onClick={() => {\n              if (!this.disabled) this.open = !this.open;\n            }}\n          >\n            <span class={{ value: true, 'value--placeholder': !display }}>\n              {display || this.placeholder}\n            </span>\n            <pf-icon name=\"clock\"></pf-icon>\n          </button>\n\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n\n        <div\n          id=\"panel\"\n          part=\"panel\"\n          class=\"panel\"\n          popover=\"auto\"\n          role=\"dialog\"\n          aria-label=\"Choose a time\"\n          onToggle={this.onToggle}\n        >\n          {this.renderColumn(\n            'Hour',\n            hourOptions(this.cycle).map((option) => ({\n              key: `h-${option}`,\n              label: padTimePart(option),\n              selected: shownHour === option,\n              onSelect: () => this.selectHour(option),\n            })),\n          )}\n\n          {this.renderColumn(\n            'Minute',\n            timeRange(60, this.minuteStep).map((option) => ({\n              key: `m-${option}`,\n              label: padTimePart(option),\n              selected: minute === option,\n              onSelect: () => this.selectMinute(option),\n            })),\n          )}\n\n          {this.cycle === 12 &&\n            this.renderColumn(\n              'AM or PM',\n              (['AM', 'PM'] as Meridiem[]).map((option) => ({\n                key: option,\n                label: option,\n                selected: meridiem === option,\n                onSelect: () => this.selectMeridiem(option),\n              })),\n            )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pf-timeline-item.cjs.entry.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+
+const pfTimelineItemCss = () => `:host{--pf-timeline-line:1.375rem;--pf-timeline-marker-size:16px;column-gap:var(--space-3);display:grid;grid-template-columns:auto 1fr}:host([hidden]){display:none}.rail{align-items:center;display:flex;flex-direction:column}.marker{align-items:center;border-radius:var(--radius-full);border-style:solid;border-width:2px;display:inline-flex;flex-shrink:0;height:var(--pf-timeline-marker-size);justify-content:center;margin-top:calc((var(--pf-timeline-line) - var(--pf-timeline-marker-size)) / 2);width:var(--pf-timeline-marker-size)}.marker.with-icon{--pf-timeline-marker-size:28px}slot[name='icon']::slotted(*){align-items:center;display:inline-flex;font-size:0.8rem;justify-content:center}:host([tone='default']) .marker{background:var(--pf-timeline-default-bg);border-color:var(--pf-timeline-default-border);color:var(--pf-timeline-default-icon)}:host([tone='success']) .marker{background:var(--pf-timeline-success-bg);border-color:var(--pf-timeline-success-border);color:var(--pf-timeline-success-icon)}:host([tone='warning']) .marker{background:var(--pf-timeline-warning-bg);border-color:var(--pf-timeline-warning-border);color:var(--pf-timeline-warning-icon)}:host([tone='danger']) .marker{background:var(--pf-timeline-danger-bg);border-color:var(--pf-timeline-danger-border);color:var(--pf-timeline-danger-icon)}.connector{background:var(--pf-timeline-connector);flex:1;margin:var(--space-1) 0;min-height:var(--space-4);width:2px}.content{padding-bottom:var(--space-5)}:host([last]) .content{padding-bottom:0}.header{align-items:baseline;column-gap:var(--space-2);display:flex;flex-wrap:wrap;justify-content:space-between}.title{color:var(--pf-timeline-title);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--pf-timeline-line);margin:0}slot[name='timestamp']::slotted(*){color:var(--pf-timeline-timestamp);flex-shrink:0;font-size:var(--font-size-xs);white-space:nowrap}slot[name='description']::slotted(*){color:var(--pf-timeline-description);display:block;font-size:var(--font-size-sm);margin-top:var(--space-1)}`;
+
+const PfTimelineItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /** Marker colour. Reflected so the stylesheet can select on it. */
+    tone = 'default';
+    /** Set by the group: the last entry has no connector and no space below. */
+    last = false;
+    /**
+     * Whether anything is slotted into the marker, which decides how big it is.
+     *
+     * Asked in JS rather than selected in CSS: `.marker:has(*)` reads as "is
+     * anything in here" and always matches, because the `<slot>` is itself a
+     * child — measured, and the defect it caused in `pf-menu-item`. The marker
+     * is an ancestor of the slotted icon, so `::slotted()` cannot size it
+     * either, which leaves this.
+     */
+    hasIcon = false;
+    /**
+     * The light DOM is readable here, so the marker is the right size at first
+     * paint — the mock DOM never fires `slotchange`, and a real one fires it
+     * after the first render.
+     */
+    componentWillLoad() {
+        this.readIcon();
+    }
+    readIcon = () => {
+        this.hasIcon = Array.from(this.el.children).some((child) => child.getAttribute('slot') === 'icon');
+    };
+    render() {
+        return (index.h(index.Host, { key: '91c65e90131294e08445c06cca82fe4dcc3ecb38', role: "listitem" }, index.h("div", { key: 'be5e941f568eddc14c8766fc74d4cd095acfa9fc', class: "rail", part: "rail", "aria-hidden": "true" }, index.h("span", { key: '40b410122f953312e3643fdf91882b219a6ea2e9', class: { marker: true, 'with-icon': this.hasIcon }, part: "marker" }, index.h("slot", { key: 'b1967cd74ed9468260edfd5375acfa5b8ea91bf6', name: "icon", onSlotchange: this.readIcon })), !this.last && index.h("span", { key: '887e7fe2b3b1c22a859e2d0bad2a0769e1bbb3b1', class: "connector", part: "connector" })), index.h("div", { key: 'd25ed21ad5337568a15190d86ccdda8704a09834', class: "content", part: "content" }, index.h("div", { key: '59fa3448d18b10c0efc2d22ee09c0e673dd9cc28', class: "header", part: "header" }, index.h("p", { key: '3458f24b4862ff112e917b9d0e8318ae3bee77f2', class: "title", part: "title" }, index.h("slot", { key: 'b220c2ee62e621e47387554a8776b7071e3802e3', name: "title" })), index.h("slot", { key: '55d4102ca0a1003056e4c5ca830b9161d1fa6ed8', name: "timestamp" })), index.h("slot", { key: '7ef43f007a4bab89ba3bfdb15ce37b0ebfc9bedd', name: "description" }))));
+    }
+};
+PfTimelineItem.style = pfTimelineItemCss();
+
+exports.pf_timeline_item = PfTimelineItem;
+//# sourceMappingURL=pf-timeline-item.entry.cjs.js.map
+
+//# sourceMappingURL=pf-timeline-item.cjs.entry.js.map

package/dist/cjs/pf-timeline-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-timeline-item.cjs.entry.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,wgEAAwgE,CAAC;;MCuB7hE,cAAc,GAAA,MAAA;;;;;;IAIA,IAAI,GAAmB,SAAS;;IAGjB,IAAI,GAAG,KAAK;AAEpD;;;;;;;;AAQG;IACM,OAAO,GAAG,KAAK;AAExB;;;;AAIG;IACH,iBAAiB,GAAA;QACf,IAAI,CAAC,QAAQ,EAAE;;IAGT,QAAQ,GAAG,MAAK;AACtB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAC9C,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,MAAM,CACjD;AACH,KAAC;IAED,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,UAAU,EAAA,EAEnBD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,EAAA,EAC9CA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAC,QAAQ,EAAA,EACrEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAC,YAAY,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CAC5C,EACN,CAAC,IAAI,CAAC,IAAI,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,WAAW,GAAG,CACtD,EAENA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjCA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC/BA,OAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC3BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG,CACnB,EAOJA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,WAAW,EAAA,CAAG,CACrB,EACNA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,GAAG,CACvB,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/pf-timeline-item/pf-timeline-item.css?tag=pf-timeline-item&encapsulation=shadow","src/components/pf-timeline-item/pf-timeline-item.tsx"],"sourcesContent":[":host {\n  /* The title's line height, which the marker centres itself on. */\n  --pf-timeline-line: 1.375rem;\n  --pf-timeline-marker-size: 16px;\n  column-gap: var(--space-3);\n  display: grid;\n  grid-template-columns: auto 1fr;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.rail {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n}\n\n.marker {\n  align-items: center;\n  border-radius: var(--radius-full);\n  border-style: solid;\n  border-width: 2px;\n  display: inline-flex;\n  flex-shrink: 0;\n  height: var(--pf-timeline-marker-size);\n  justify-content: center;\n  /* Centred on the title's first line. */\n  margin-top: calc((var(--pf-timeline-line) - var(--pf-timeline-marker-size)) / 2);\n  width: var(--pf-timeline-marker-size);\n}\n\n/*\n * A marker carrying an icon is larger to fit it. The class comes from JS,\n * because `:has(*)` on a wrapper around a slot always matches -- the slot is\n * itself a child.\n */\n.marker.with-icon {\n  --pf-timeline-marker-size: 28px;\n}\n\nslot[name='icon']::slotted(*) {\n  align-items: center;\n  display: inline-flex;\n  font-size: 0.8rem;\n  justify-content: center;\n}\n\n:host([tone='default']) .marker {\n  background: var(--pf-timeline-default-bg);\n  border-color: var(--pf-timeline-default-border);\n  color: var(--pf-timeline-default-icon);\n}\n\n:host([tone='success']) .marker {\n  background: var(--pf-timeline-success-bg);\n  border-color: var(--pf-timeline-success-border);\n  color: var(--pf-timeline-success-icon);\n}\n\n:host([tone='warning']) .marker {\n  background: var(--pf-timeline-warning-bg);\n  border-color: var(--pf-timeline-warning-border);\n  color: var(--pf-timeline-warning-icon);\n}\n\n:host([tone='danger']) .marker {\n  background: var(--pf-timeline-danger-bg);\n  border-color: var(--pf-timeline-danger-border);\n  color: var(--pf-timeline-danger-icon);\n}\n\n.connector {\n  background: var(--pf-timeline-connector);\n  flex: 1;\n  margin: var(--space-1) 0;\n  min-height: var(--space-4);\n  width: 2px;\n}\n\n.content {\n  padding-bottom: var(--space-5);\n}\n\n:host([last]) .content {\n  padding-bottom: 0;\n}\n\n.header {\n  align-items: baseline;\n  column-gap: var(--space-2);\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n}\n\n.title {\n  color: var(--pf-timeline-title);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--pf-timeline-line);\n  margin: 0;\n}\n\nslot[name='timestamp']::slotted(*) {\n  color: var(--pf-timeline-timestamp);\n  flex-shrink: 0;\n  font-size: var(--font-size-xs);\n  white-space: nowrap;\n}\n\nslot[name='description']::slotted(*) {\n  color: var(--pf-timeline-description);\n  display: block;\n  font-size: var(--font-size-sm);\n  margin-top: var(--space-1);\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nexport type PfTimelineTone = 'default' | 'success' | 'warning' | 'danger';\n\n/**\n * One entry in a `pf-timeline`.\n *\n * @slot title - the entry's title.\n * @slot timestamp - short meta text beside the title.\n * @slot description - secondary text below the title.\n * @slot icon - an icon inside the marker, in place of the plain dot.\n * @part rail - the column holding the marker and the connector.\n * @part marker - the dot, or the circle around a slotted icon.\n * @part connector - the line down to the next entry. Absent on the last.\n * @part content - the box holding title, timestamp and description.\n * @part header - the row holding the title and the timestamp.\n * @part title - the title's box.\n */\n@Component({\n  tag: 'pf-timeline-item',\n  styleUrl: 'pf-timeline-item.css',\n  shadow: true,\n})\nexport class PfTimelineItem {\n  @Element() el!: HTMLElement;\n\n  /** Marker colour. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) tone: PfTimelineTone = 'default';\n\n  /** Set by the group: the last entry has no connector and no space below. */\n  @Prop({ mutable: true, reflect: true }) last = false;\n\n  /**\n   * Whether anything is slotted into the marker, which decides how big it is.\n   *\n   * Asked in JS rather than selected in CSS: `.marker:has(*)` reads as \"is\n   * anything in here\" and always matches, because the `<slot>` is itself a\n   * child — measured, and the defect it caused in `pf-menu-item`. The marker\n   * is an ancestor of the slotted icon, so `::slotted()` cannot size it\n   * either, which leaves this.\n   */\n  @State() hasIcon = false;\n\n  /**\n   * The light DOM is readable here, so the marker is the right size at first\n   * paint — the mock DOM never fires `slotchange`, and a real one fires it\n   * after the first render.\n   */\n  componentWillLoad() {\n    this.readIcon();\n  }\n\n  private readIcon = () => {\n    this.hasIcon = Array.from(this.el.children).some(\n      (child) => child.getAttribute('slot') === 'icon',\n    );\n  };\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        {/* Decorative: the marker repeats what the content already says. */}\n        <div class=\"rail\" part=\"rail\" aria-hidden=\"true\">\n          <span class={{ marker: true, 'with-icon': this.hasIcon }} part=\"marker\">\n            <slot name=\"icon\" onSlotchange={this.readIcon} />\n          </span>\n          {!this.last && <span class=\"connector\" part=\"connector\" />}\n        </div>\n\n        <div class=\"content\" part=\"content\">\n          <div class=\"header\" part=\"header\">\n            <p class=\"title\" part=\"title\">\n              <slot name=\"title\" />\n            </p>\n            {/*\n              No wrapper around the timestamp or the description: a box around\n              a slot cannot be collapsed from CSS, so an empty one would leave\n              its margin behind on every entry without them. An unassigned slot\n              generates nothing, so the styling goes on `::slotted(*)`.\n            */}\n            <slot name=\"timestamp\" />\n          </div>\n          <slot name=\"description\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,55 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+
+const pfTimelineCss = () => `:host{display:grid;gap:0}:host([hidden]){display:none}slot{display:contents}`;
+
+const PfTimeline = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * The timeline's accessible name. A list of entries is worth naming, and a
+     * consumer can only do it from out here.
+     */
+    label;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad() {
+        this.sync();
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    handleLabelChange() {
+        this.sync();
+    }
+    /** Re-reads the children, for a consumer who moved them imperatively. */
+    async refresh() {
+        this.sync();
+    }
+    /** Direct children only: a nested timeline owns its own entries. */
+    get items() {
+        return Array.from(this.el.querySelectorAll('pf-timeline-item')).filter((item) => item.parentElement === this.el);
+    }
+    sync() {
+        const items = this.items;
+        for (const [index, item] of items.entries()) {
+            item.last = index === items.length - 1;
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: '53a5400e234a874e685694c80275a9f09089dd14', role: "list", "aria-label": this.label }, index.h("slot", { key: '020e56e751cf207b5b3a083952dbfe36549ad9a0', onSlotchange: () => this.refresh() })));
+    }
+    static get watchers() { return {
+        "label": [{
+                "handleLabelChange": 0
+            }]
+    }; }
+};
+PfTimeline.style = pfTimelineCss();
+
+exports.pf_timeline = PfTimeline;
+//# sourceMappingURL=pf-timeline.entry.cjs.js.map
+
+//# sourceMappingURL=pf-timeline.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"pf-timeline.cjs.entry.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,4EAA4E,CAAC;;MCgB7F,UAAU,GAAA,MAAA;;;;;AAGrB;;;AAGG;AACK,IAAA,KAAK;;IAGb,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,EAAE;;IAGb,gBAAgB,GAAA;QACd,IAAI,CAAC,IAAI,EAAE;;IAIb,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,EAAE;;;AAKb,IAAA,MAAM,OAAO,GAAA;QACX,IAAI,CAAC,IAAI,EAAE;;;AAIb,IAAA,IAAY,KAAK,GAAA;AACf,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAc,kBAAkB,CAAC,CAAC,CAAC,MAAM,CACjF,CAAC,IAAI,KAAK,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC,EAAE,CACzC;;IAGK,IAAI,GAAA;AACV,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK;AACxB,QAAA,KAAK,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE;YAC1C,IAAwC,CAAC,IAAI,GAAG,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;;;IAI/E,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,MAAM,EAAA,YAAA,EAAa,IAAI,CAAC,KAAK,EAAA,EACtCD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,YAAY,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAAA,CAAI,CACvC;;;;;;;;;;;;","names":["h","Host"],"sources":["src/components/pf-timeline/pf-timeline.css?tag=pf-timeline&encapsulation=shadow","src/components/pf-timeline/pf-timeline.tsx"],"sourcesContent":[":host {\n  display: grid;\n  gap: 0;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* The entries have to be grid items of the host, not of a box inside it. */\nslot {\n  display: contents;\n}\n","import { Component, Element, h, Host, Method, Prop, Watch } from '@stencil/core';\n\n/**\n * A vertical timeline over `pf-timeline-item` children.\n *\n * The group owns the one thing an entry cannot see: whether it is the last,\n * which decides both the connector running down to the next entry and the\n * space below the content.\n *\n * @slot - the `pf-timeline-item` children.\n */\n@Component({\n  tag: 'pf-timeline',\n  styleUrl: 'pf-timeline.css',\n  shadow: true,\n})\nexport class PfTimeline {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The timeline's accessible name. A list of entries is worth naming, and a\n   * consumer can only do it from out here.\n   */\n  @Prop() label?: string;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  @Watch('label')\n  handleLabelChange() {\n    this.sync();\n  }\n\n  /** Re-reads the children, for a consumer who moved them imperatively. */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Direct children only: a nested timeline owns its own entries. */\n  private get items(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-timeline-item')).filter(\n      (item) => item.parentElement === this.el,\n    );\n  }\n\n  private sync() {\n    const items = this.items;\n    for (const [index, item] of items.entries()) {\n      (item as HTMLElement & { last: boolean }).last = index === items.length - 1;\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"list\" aria-label={this.label}>\n        <slot onSlotchange={() => this.refresh()} />\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,90 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+
+const pfToasterCss = () => `:host{display:contents}.stack{display:grid;gap:var(--space-3);left:var(--space-2);position:fixed;right:var(--space-2);width:auto;z-index:1000}:host([placement='top-right']) .stack,:host([placement='top-left']) .stack{top:var(--space-2)}:host([placement='bottom-right']) .stack,:host([placement='bottom-left']) .stack{bottom:var(--space-2)}@media (min-width: 768px){.stack{left:auto;right:auto;width:min(420px, calc(100vw - (var(--space-4) * 2)))}:host([placement='top-right']) .stack,:host([placement='top-left']) .stack{top:var(--space-4)}:host([placement='bottom-right']) .stack,:host([placement='bottom-left']) .stack{bottom:var(--space-4)}:host([placement='top-right']) .stack,:host([placement='bottom-right']) .stack{justify-items:end;right:var(--space-4)}:host([placement='top-left']) .stack,:host([placement='bottom-left']) .stack{left:var(--space-4)}}`;
+
+const PfToaster = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfToastDismiss = index.createEvent(this, "pfToastDismiss");
+    }
+    get el() { return index.getElement(this); }
+    /** Which corner the stack sits in. Reflected; the stylesheet positions on it. */
+    placement = 'top-right';
+    /** Auto-dismiss delay for toasts that do not set their own. `0` disables it. */
+    duration = 4000;
+    /** Fires when a toast has left, with the id `toast()` returned. */
+    pfToastDismiss;
+    entries = [];
+    timers = new Map();
+    sequence = 0;
+    disconnectedCallback() {
+        for (const timer of this.timers.values())
+            clearTimeout(timer);
+        this.timers.clear();
+    }
+    /**
+     * Shows a toast and returns its id.
+     *
+     * Newest first, matching the React provider, so a stack in a top corner
+     * grows downwards away from the corner.
+     */
+    async toast(options = {}) {
+        const id = `pf-toast-${(this.sequence += 1)}`;
+        this.entries = [{ ...options, id }, ...this.entries];
+        const duration = options.duration ?? this.duration;
+        if (duration > 0) {
+            this.timers.set(id, setTimeout(() => {
+                this.timers.delete(id);
+                void this.dismiss(id);
+            }, duration));
+        }
+        return id;
+    }
+    /** Dismisses one toast by the id `toast()` returned. */
+    async dismiss(id) {
+        this.clearTimer(id);
+        /*
+         * Typed structurally rather than as `HTMLPfNotificationElement`: that
+         * interface is generated by the build, so naming it here makes the first
+         * build of a new element fail on the type it is about to produce.
+         */
+        const element = this.el.shadowRoot?.querySelector(`pf-notification[data-id="${id}"]`);
+        // Play the exit animation if it is still mounted; remove it either way.
+        if (element)
+            await element.dismiss();
+        this.remove(id);
+    }
+    /** Dismisses everything currently showing. */
+    async dismissAll() {
+        await Promise.all(this.entries.map((entry) => this.dismiss(entry.id)));
+    }
+    clearTimer(id) {
+        const timer = this.timers.get(id);
+        if (timer)
+            clearTimeout(timer);
+        this.timers.delete(id);
+    }
+    remove(id) {
+        if (!this.entries.some((entry) => entry.id === id))
+            return;
+        this.entries = this.entries.filter((entry) => entry.id !== id);
+        this.pfToastDismiss.emit({ id });
+    }
+    render() {
+        return (index.h(index.Host, { key: '0ed859d92e6ceb13483bb2a469e9e9ef5ae595a2' }, index.h("div", { key: '526f85d58a2af54c1b5ca7fe172f0c8e6070d205', class: "stack", part: "stack" }, this.entries.map((entry) => (index.h("pf-notification", { key: entry.id, "data-id": entry.id, variant: entry.variant ?? 'info', heading: entry.heading, description: entry.description, dismissable: entry.dismissable ?? true,
+            /*
+             * The notification owns its own exit, and tells us when it is
+             * over. Removing it on the click instead would cut the animation
+             * off at the first frame.
+             */
+            onPfDismiss: () => this.remove(entry.id) }))), index.h("slot", { key: '169fad33c3f11cbc8d78ba7552677ff7296eb232' }))));
+    }
+};
+PfToaster.style = pfToasterCss();
+
+exports.pf_toaster = PfToaster;
+//# sourceMappingURL=pf-toaster.entry.cjs.js.map
+
+//# sourceMappingURL=pf-toaster.cjs.entry.js.map