@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/cjs/pf-tree-view.cjs.entry.js

@@ -0,0 +1,342 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var valueList = require('./value-list-zSKmhcgH.js');
+
+//#region src/tree.ts
+/**
+* The nodes a reader can actually see, in the order they are rendered —
+* depth-first, with a closed branch's children left out.
+*
+* One flat list rather than a recursive walk per key, because every one of the
+* keyboard rules is "the next visible node" or "the previous" one, and those
+* are neighbours here.
+*/
+function flattenVisibleTree(nodes, expanded, level = 1, parentValue) {
+	const open = expanded instanceof Set ? expanded : new Set(expanded);
+	const flattened = [];
+	for (const node of nodes) {
+		const hasChildren = Boolean(node.children && node.children.length > 0);
+		const isExpanded = hasChildren && open.has(node.value);
+		flattened.push({
+			node,
+			level,
+			parentValue,
+			hasChildren,
+			expanded: isExpanded
+		});
+		if (isExpanded) flattened.push(...flattenVisibleTree(node.children, open, level + 1, node.value));
+	}
+	return flattened;
+}
+/** The first node a reader can select, looking into closed branches too. */
+function firstEnabledTreeValue(nodes) {
+	for (const node of nodes) {
+		if (!node.disabled) return node.value;
+		if (node.children && node.children.length > 0) {
+			const inside = firstEnabledTreeValue(node.children);
+			if (inside) return inside;
+		}
+	}
+}
+/** Every node that has children, which is what "expand all" opens. */
+function expandableTreeValues(nodes) {
+	const values = [];
+	for (const node of nodes) if (node.children && node.children.length > 0) {
+		values.push(node.value);
+		values.push(...expandableTreeValues(node.children));
+	}
+	return values;
+}
+/**
+* What a key does, given the visible list and where the focus is — or `null`
+* when the key is not the tree's to handle.
+*
+* Returned as an intent rather than performed, so both layers share every
+* rule and differ only in how they move focus and set state. The two rules
+* worth stating are the horizontal ones, which are the ARIA pattern:
+*
+* - Right opens a closed branch, and on an open one moves to its first child.
+*   On a leaf it does nothing, rather than skipping to the next sibling.
+* - Left closes an open branch, and on anything else moves out to the parent.
+*
+* Enter and Space select, and also toggle a branch — which is the React
+* component's behaviour, and the reason this returns one intent at a time:
+* the caller does the selection itself and asks again for the toggle.
+*/
+function resolveTreeKey(key, flattened, currentIndex) {
+	const current = flattened[currentIndex];
+	if (!current) return null;
+	const at = (index) => flattened[index]?.node.value;
+	switch (key) {
+		case "ArrowDown": {
+			const next = at(currentIndex + 1);
+			return next ? {
+				type: "focus",
+				value: next
+			} : null;
+		}
+		case "ArrowUp": {
+			const previous = at(currentIndex - 1);
+			return previous ? {
+				type: "focus",
+				value: previous
+			} : null;
+		}
+		case "ArrowRight": {
+			if (!current.hasChildren) return null;
+			if (!current.expanded) return {
+				type: "expand",
+				value: current.node.value
+			};
+			const child = flattened[currentIndex + 1];
+			return child && child.parentValue === current.node.value ? {
+				type: "focus",
+				value: child.node.value
+			} : null;
+		}
+		case "ArrowLeft":
+			if (current.hasChildren && current.expanded) return {
+				type: "collapse",
+				value: current.node.value
+			};
+			return current.parentValue ? {
+				type: "focus",
+				value: current.parentValue
+			} : null;
+		case "Home": {
+			const first = at(0);
+			return first ? {
+				type: "focus",
+				value: first
+			} : null;
+		}
+		case "End": {
+			const last = at(flattened.length - 1);
+			return last ? {
+				type: "focus",
+				value: last
+			} : null;
+		}
+		case "Enter":
+		case " ": return {
+			type: "activate",
+			value: current.node.value
+		};
+		default: return null;
+	}
+}
+
+const pfTreeViewCss = () => `:host{background:var(--pf-treeview-bg);border:1px solid var(--pf-treeview-border);border-radius:var(--radius-md);display:block;padding:var(--space-2)}:host([hidden]){display:none}:host{--pf-tree-active-ring:none;outline:none}:host(:focus-visible){--pf-tree-active-ring:var(--pf-treeview-focus-ring, var(--pf-focus-ring))}`;
+
+/**
+ * Distinguishes the ids a tree generates for its items. Not `useId`, which has
+ * no equivalent here, and not a shadow-scoped literal either: these ids go on
+ * *light-DOM* children, so they share the document's namespace.
+ */
+let instances = 0;
+const PfTreeView = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfChange = index.createEvent(this, "pfChange");
+        this.pfExpandedChange = index.createEvent(this, "pfExpandedChange");
+    }
+    get el() { return index.getElement(this); }
+    /** The selected item's value. */
+    value = '';
+    /** The open branches, as one comma-separated string. */
+    expanded = '';
+    /** The tree's accessible name. */
+    label;
+    /** Fires when the selection changes. */
+    pfChange;
+    /** Fires when a branch opens or closes, with the open set. */
+    pfExpandedChange;
+    /**
+     * The item the keyboard is on, which is not always the selected one — the
+     * arrows move it, Enter selects. Starts on the selection, so tabbing in
+     * lands where the reader left off.
+     */
+    activeValue = '';
+    /** Distinguishes the ids this tree generates for its light-DOM items. */
+    uid = ++instances;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad() {
+        if (!this.value)
+            this.value = firstEnabledTreeValue(this.tree) ?? '';
+        this.activeValue = this.value;
+        this.sync();
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    handleStateChange() {
+        this.sync();
+    }
+    /** Re-reads the tree, for a consumer who changed an item through a property. */
+    async refresh() {
+        this.sync();
+    }
+    /** Opens every branch. */
+    async expandAll() {
+        this.setExpanded(expandableTreeValues(this.tree));
+    }
+    /** Closes every branch. */
+    async collapseAll() {
+        this.setExpanded([]);
+    }
+    /** The nested items, as the tree core's rules walk. */
+    get tree() {
+        const read = (container) => Array.from(container.querySelectorAll('pf-tree-item'))
+            .filter((item) => item.parentElement === container)
+            .map((item) => ({
+            el: item,
+            value: item.value ?? item.getAttribute('value') ?? '',
+            disabled: item.disabled ??
+                item.hasAttribute('disabled'),
+            children: read(item),
+        }));
+        return read(this.el);
+    }
+    get openValues() {
+        return valueList.parseValueList(this.expanded);
+    }
+    get visible() {
+        return flattenVisibleTree(this.tree, this.openValues);
+    }
+    /**
+     * Pushes the tree's state onto the items: how deep each one is, whether it
+     * is selected, open, or the one the keyboard is on — and an id, because the
+     * active item is named by an IDREF from the host.
+     */
+    sync() {
+        const open = new Set(this.openValues);
+        let index = 0;
+        const walk = (nodes, level) => {
+            for (const node of nodes) {
+                const item = node.el;
+                // The ids go on light-DOM children, so they share the document's
+                // namespace with every other tree on the page.
+                if (!node.el.id)
+                    node.el.id = `pf-tree-${this.uid}-item-${(index += 1)}`;
+                item.level = level;
+                item.selected = node.value === this.value;
+                item.hasChildren = node.children.length > 0;
+                item.expanded = node.children.length > 0 && open.has(node.value);
+                item.active = node.value === this.activeValue;
+                walk(node.children, level + 1);
+            }
+        };
+        walk(this.tree, 1);
+        /*
+         * An item inside a closed branch cannot be the active one: the reader
+         * cannot see it, and `aria-activedescendant` pointing at it would tell a
+         * screen reader otherwise. Collapsing a branch therefore moves the
+         * keyboard back out to it.
+         */
+        const visible = this.visible;
+        if (visible.length === 0)
+            return;
+        if (!visible.some((item) => item.node.value === this.activeValue)) {
+            const fallback = visible.find((item) => item.node.value === this.value) ?? visible[0];
+            this.activeValue = fallback.node.value;
+            this.sync();
+        }
+    }
+    /** The active item's id, which is what the host points `aria-activedescendant` at. */
+    get activeId() {
+        const active = this.visible.find((item) => item.node.value === this.activeValue);
+        return active?.node.el.id || undefined;
+    }
+    setExpanded(next) {
+        const value = valueList.formatValueList(next);
+        if (value === this.expanded)
+            return;
+        this.expanded = value;
+        this.sync();
+        this.pfExpandedChange.emit({ value, values: next });
+    }
+    toggle(value, open) {
+        const current = new Set(this.openValues);
+        const shouldOpen = open ?? !current.has(value);
+        if (shouldOpen)
+            current.add(value);
+        else
+            current.delete(value);
+        this.setExpanded(Array.from(current));
+    }
+    select(value) {
+        const node = this.visible.find((item) => item.node.value === value)?.node;
+        if (!node || node.disabled)
+            return;
+        // The keyboard follows the selection, however it was made.
+        this.activeValue = value;
+        if (value === this.value) {
+            this.sync();
+            return;
+        }
+        this.value = value;
+        this.sync();
+        this.pfChange.emit({ value });
+    }
+    /** An item asking to be selected. The group decides. */
+    handleSelect(event) {
+        event.stopPropagation();
+        this.select(event.detail.value);
+    }
+    /** An item's twisty asking to open or close it. */
+    handleToggle(event) {
+        event.stopPropagation();
+        this.toggle(event.detail.value);
+    }
+    /**
+     * Every key rule is core's; this only carries the intent out. A key core
+     * does not claim is left to the browser.
+     */
+    handleKeyDown(event) {
+        if (event.defaultPrevented)
+            return;
+        const visible = this.visible;
+        const currentIndex = visible.findIndex((item) => item.node.value === this.activeValue);
+        const intent = resolveTreeKey(event.key, visible, currentIndex);
+        if (!intent)
+            return;
+        event.preventDefault();
+        if (intent.type === 'focus') {
+            // The keyboard moves without any DOM focus moving: the tree keeps it.
+            this.activeValue = intent.value;
+            this.sync();
+            return;
+        }
+        if (intent.type === 'expand' || intent.type === 'collapse') {
+            this.toggle(intent.value, intent.type === 'expand');
+            return;
+        }
+        // Activation both selects and toggles, as a click on each half would.
+        this.select(intent.value);
+        if (visible[currentIndex]?.hasChildren)
+            this.toggle(intent.value);
+    }
+    /** An item's own slot changed, so the tree below it has moved. */
+    handleStructureChange(event) {
+        event.stopPropagation();
+        this.sync();
+    }
+    render() {
+        return (index.h(index.Host, { key: 'a39e6df109c516369723544040b29914e5ba596d', role: "tree", tabindex: "0", "aria-label": this.label, "aria-activedescendant": this.activeId }, index.h("slot", { key: 'e50cbfba93aadd34fefad3399af4ecc7aa468fdf', onSlotchange: () => this.refresh() })));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleStateChange": 0
+            }],
+        "expanded": [{
+                "handleStateChange": 0
+            }]
+    }; }
+};
+PfTreeView.style = pfTreeViewCss();
+
+exports.pf_tree_view = PfTreeView;
+//# sourceMappingURL=pf-tree-view.entry.cjs.js.map
+
+//# sourceMappingURL=pf-tree-view.cjs.entry.js.map

package/dist/cjs/pf-tree-view.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-tree-view.cjs.entry.js","mappings":"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","names":["parseValueList","formatValueList","h","Host"],"sources":["../core/dist/tree.js","src/components/pf-tree-view/pf-tree-view.css?tag=pf-tree-view&encapsulation=shadow","src/components/pf-tree-view/pf-tree-view.tsx"],"sourcesContent":["//#region src/tree.ts\n/**\n* The nodes a reader can actually see, in the order they are rendered —\n* depth-first, with a closed branch's children left out.\n*\n* One flat list rather than a recursive walk per key, because every one of the\n* keyboard rules is \"the next visible node\" or \"the previous\" one, and those\n* are neighbours here.\n*/\nfunction flattenVisibleTree(nodes, expanded, level = 1, parentValue) {\n\tconst open = expanded instanceof Set ? expanded : new Set(expanded);\n\tconst flattened = [];\n\tfor (const node of nodes) {\n\t\tconst hasChildren = Boolean(node.children && node.children.length > 0);\n\t\tconst isExpanded = hasChildren && open.has(node.value);\n\t\tflattened.push({\n\t\t\tnode,\n\t\t\tlevel,\n\t\t\tparentValue,\n\t\t\thasChildren,\n\t\t\texpanded: isExpanded\n\t\t});\n\t\tif (isExpanded) flattened.push(...flattenVisibleTree(node.children, open, level + 1, node.value));\n\t}\n\treturn flattened;\n}\n/** The first node a reader can select, looking into closed branches too. */\nfunction firstEnabledTreeValue(nodes) {\n\tfor (const node of nodes) {\n\t\tif (!node.disabled) return node.value;\n\t\tif (node.children && node.children.length > 0) {\n\t\t\tconst inside = firstEnabledTreeValue(node.children);\n\t\t\tif (inside) return inside;\n\t\t}\n\t}\n}\n/** Every node that has children, which is what \"expand all\" opens. */\nfunction expandableTreeValues(nodes) {\n\tconst values = [];\n\tfor (const node of nodes) if (node.children && node.children.length > 0) {\n\t\tvalues.push(node.value);\n\t\tvalues.push(...expandableTreeValues(node.children));\n\t}\n\treturn values;\n}\n/**\n* What a key does, given the visible list and where the focus is — or `null`\n* when the key is not the tree's to handle.\n*\n* Returned as an intent rather than performed, so both layers share every\n* rule and differ only in how they move focus and set state. The two rules\n* worth stating are the horizontal ones, which are the ARIA pattern:\n*\n* - Right opens a closed branch, and on an open one moves to its first child.\n*   On a leaf it does nothing, rather than skipping to the next sibling.\n* - Left closes an open branch, and on anything else moves out to the parent.\n*\n* Enter and Space select, and also toggle a branch — which is the React\n* component's behaviour, and the reason this returns one intent at a time:\n* the caller does the selection itself and asks again for the toggle.\n*/\nfunction resolveTreeKey(key, flattened, currentIndex) {\n\tconst current = flattened[currentIndex];\n\tif (!current) return null;\n\tconst at = (index) => flattened[index]?.node.value;\n\tswitch (key) {\n\t\tcase \"ArrowDown\": {\n\t\t\tconst next = at(currentIndex + 1);\n\t\t\treturn next ? {\n\t\t\t\ttype: \"focus\",\n\t\t\t\tvalue: next\n\t\t\t} : null;\n\t\t}\n\t\tcase \"ArrowUp\": {\n\t\t\tconst previous = at(currentIndex - 1);\n\t\t\treturn previous ? {\n\t\t\t\ttype: \"focus\",\n\t\t\t\tvalue: previous\n\t\t\t} : null;\n\t\t}\n\t\tcase \"ArrowRight\": {\n\t\t\tif (!current.hasChildren) return null;\n\t\t\tif (!current.expanded) return {\n\t\t\t\ttype: \"expand\",\n\t\t\t\tvalue: current.node.value\n\t\t\t};\n\t\t\tconst child = flattened[currentIndex + 1];\n\t\t\treturn child && child.parentValue === current.node.value ? {\n\t\t\t\ttype: \"focus\",\n\t\t\t\tvalue: child.node.value\n\t\t\t} : null;\n\t\t}\n\t\tcase \"ArrowLeft\":\n\t\t\tif (current.hasChildren && current.expanded) return {\n\t\t\t\ttype: \"collapse\",\n\t\t\t\tvalue: current.node.value\n\t\t\t};\n\t\t\treturn current.parentValue ? {\n\t\t\t\ttype: \"focus\",\n\t\t\t\tvalue: current.parentValue\n\t\t\t} : null;\n\t\tcase \"Home\": {\n\t\t\tconst first = at(0);\n\t\t\treturn first ? {\n\t\t\t\ttype: \"focus\",\n\t\t\t\tvalue: first\n\t\t\t} : null;\n\t\t}\n\t\tcase \"End\": {\n\t\t\tconst last = at(flattened.length - 1);\n\t\t\treturn last ? {\n\t\t\t\ttype: \"focus\",\n\t\t\t\tvalue: last\n\t\t\t} : null;\n\t\t}\n\t\tcase \"Enter\":\n\t\tcase \" \": return {\n\t\t\ttype: \"activate\",\n\t\t\tvalue: current.node.value\n\t\t};\n\t\tdefault: return null;\n\t}\n}\n//#endregion\nexport { expandableTreeValues, firstEnabledTreeValue, flattenVisibleTree, resolveTreeKey };\n",":host {\n  background: var(--pf-treeview-bg);\n  border: 1px solid var(--pf-treeview-border);\n  border-radius: var(--radius-md);\n  display: block;\n  padding: var(--space-2);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * The tree is the tab stop, so the ring belongs to whichever item the keyboard\n * is on — and only while the tree itself has focus. A custom property is how\n * that reaches the item: it inherits through the shadow boundary, where\n * `:host-context()` would not work in Firefox or Safari.\n */\n:host {\n  --pf-tree-active-ring: none;\n  outline: none;\n}\n\n:host(:focus-visible) {\n  --pf-tree-active-ring: var(--pf-treeview-focus-ring, var(--pf-focus-ring));\n}\n","import {\n  expandableTreeValues,\n  firstEnabledTreeValue,\n  type FlatTreeNode,\n  flattenVisibleTree,\n  formatValueList,\n  parseValueList,\n  resolveTreeKey,\n  type TreeNodeLike,\n} from '@pitchfork-ui/core';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n/**\n * Distinguishes the ids a tree generates for its items. Not `useId`, which has\n * no equivalent here, and not a shadow-scoped literal either: these ids go on\n * *light-DOM* children, so they share the document's namespace.\n */\nlet instances = 0;\n\n/** A `pf-tree-item` read the way core's rules need it. */\ninterface ItemNode extends TreeNodeLike {\n  el: HTMLElement;\n  children: ItemNode[];\n}\n\n/**\n * A tree over nested `pf-tree-item` children.\n *\n * Nesting rather than a `nodes` array, which is what a tree looks like in a\n * consumer's template anyway — and the labels are nodes, so they could not\n * cross the HTML boundary.\n *\n * The group owns what no single item can see: which one is selected, which\n * are open, the one tab stop, and the keyboard. Every rule the keyboard\n * follows is core's `resolveTreeKey`, so this and the React `TreeView` answer\n * the arrows identically.\n *\n * **The tree itself is the tab stop, not the items.** The ARIA tree pattern\n * allows either a roving tabindex or a managed `aria-activedescendant`, and\n * here only the second one works: measured in Chromium, a `tabindex=\"0\"` host\n * slotted into another host's shadow tree is skipped by sequential navigation\n * entirely when the outer host's tabindex is negative — which is exactly a\n * nested `pf-tree-item` under a roving tabindex. So the tree takes the focus\n * and tracks the active item with an IDREF, which resolves because the items\n * are its own light-DOM descendants.\n *\n * The React `TreeView` makes every visible item a tab stop, which is a gap\n * recorded in `todo.md`.\n *\n * @slot - the `pf-tree-item` children.\n */\n@Component({\n  tag: 'pf-tree-view',\n  styleUrl: 'pf-tree-view.css',\n  shadow: true,\n})\nexport class PfTreeView {\n  @Element() el!: HTMLElement;\n\n  /** The selected item's value. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** The open branches, as one comma-separated string. */\n  @Prop({ mutable: true, reflect: true }) expanded = '';\n\n  /** The tree's accessible name. */\n  @Prop() label?: string;\n\n  /** Fires when the selection changes. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** Fires when a branch opens or closes, with the open set. */\n  @Event() pfExpandedChange!: EventEmitter<{ value: string; values: string[] }>;\n\n  /**\n   * The item the keyboard is on, which is not always the selected one — the\n   * arrows move it, Enter selects. Starts on the selection, so tabbing in\n   * lands where the reader left off.\n   */\n  @State() activeValue = '';\n\n  /** Distinguishes the ids this tree generates for its light-DOM items. */\n  private uid = ++instances;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    if (!this.value) this.value = firstEnabledTreeValue(this.tree) ?? '';\n    this.activeValue = this.value;\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  @Watch('value')\n  @Watch('expanded')\n  handleStateChange() {\n    this.sync();\n  }\n\n  /** Re-reads the tree, for a consumer who changed an item through a property. */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Opens every branch. */\n  @Method()\n  async expandAll() {\n    this.setExpanded(expandableTreeValues(this.tree));\n  }\n\n  /** Closes every branch. */\n  @Method()\n  async collapseAll() {\n    this.setExpanded([]);\n  }\n\n  /** The nested items, as the tree core's rules walk. */\n  private get tree(): ItemNode[] {\n    const read = (container: HTMLElement): ItemNode[] =>\n      Array.from(container.querySelectorAll<HTMLElement>('pf-tree-item'))\n        .filter((item) => item.parentElement === container)\n        .map((item) => ({\n          el: item,\n          value:\n            (item as HTMLElement & { value?: string }).value ?? item.getAttribute('value') ?? '',\n          disabled:\n            (item as HTMLElement & { disabled?: boolean }).disabled ??\n            item.hasAttribute('disabled'),\n          children: read(item),\n        }));\n\n    return read(this.el);\n  }\n\n  private get openValues(): string[] {\n    return parseValueList(this.expanded);\n  }\n\n  private get visible(): FlatTreeNode<ItemNode>[] {\n    return flattenVisibleTree(this.tree, this.openValues);\n  }\n\n  /**\n   * Pushes the tree's state onto the items: how deep each one is, whether it\n   * is selected, open, or the one the keyboard is on — and an id, because the\n   * active item is named by an IDREF from the host.\n   */\n  private sync() {\n    const open = new Set(this.openValues);\n    let index = 0;\n\n    const walk = (nodes: ItemNode[], level: number) => {\n      for (const node of nodes) {\n        const item = node.el as HTMLElement & {\n          level: number;\n          selected: boolean;\n          expanded: boolean;\n          hasChildren: boolean;\n          active: boolean;\n        };\n        // The ids go on light-DOM children, so they share the document's\n        // namespace with every other tree on the page.\n        if (!node.el.id) node.el.id = `pf-tree-${this.uid}-item-${(index += 1)}`;\n        item.level = level;\n        item.selected = node.value === this.value;\n        item.hasChildren = node.children.length > 0;\n        item.expanded = node.children.length > 0 && open.has(node.value);\n        item.active = node.value === this.activeValue;\n        walk(node.children, level + 1);\n      }\n    };\n    walk(this.tree, 1);\n\n    /*\n     * An item inside a closed branch cannot be the active one: the reader\n     * cannot see it, and `aria-activedescendant` pointing at it would tell a\n     * screen reader otherwise. Collapsing a branch therefore moves the\n     * keyboard back out to it.\n     */\n    const visible = this.visible;\n    if (visible.length === 0) return;\n    if (!visible.some((item) => item.node.value === this.activeValue)) {\n      const fallback = visible.find((item) => item.node.value === this.value) ?? visible[0];\n      this.activeValue = fallback.node.value;\n      this.sync();\n    }\n  }\n\n  /** The active item's id, which is what the host points `aria-activedescendant` at. */\n  private get activeId(): string | undefined {\n    const active = this.visible.find((item) => item.node.value === this.activeValue);\n    return active?.node.el.id || undefined;\n  }\n\n  private setExpanded(next: string[]) {\n    const value = formatValueList(next);\n    if (value === this.expanded) return;\n\n    this.expanded = value;\n    this.sync();\n    this.pfExpandedChange.emit({ value, values: next });\n  }\n\n  private toggle(value: string, open?: boolean) {\n    const current = new Set(this.openValues);\n    const shouldOpen = open ?? !current.has(value);\n\n    if (shouldOpen) current.add(value);\n    else current.delete(value);\n\n    this.setExpanded(Array.from(current));\n  }\n\n  private select(value: string) {\n    const node = this.visible.find((item) => item.node.value === value)?.node;\n    if (!node || node.disabled) return;\n\n    // The keyboard follows the selection, however it was made.\n    this.activeValue = value;\n    if (value === this.value) {\n      this.sync();\n      return;\n    }\n\n    this.value = value;\n    this.sync();\n    this.pfChange.emit({ value });\n  }\n\n  /** An item asking to be selected. The group decides. */\n  @Listen('pfTreeSelect')\n  handleSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    this.select(event.detail.value);\n  }\n\n  /** An item's twisty asking to open or close it. */\n  @Listen('pfTreeToggle')\n  handleToggle(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    this.toggle(event.detail.value);\n  }\n\n  /**\n   * Every key rule is core's; this only carries the intent out. A key core\n   * does not claim is left to the browser.\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.defaultPrevented) return;\n\n    const visible = this.visible;\n    const currentIndex = visible.findIndex((item) => item.node.value === this.activeValue);\n    const intent = resolveTreeKey(event.key, visible, currentIndex);\n    if (!intent) return;\n\n    event.preventDefault();\n\n    if (intent.type === 'focus') {\n      // The keyboard moves without any DOM focus moving: the tree keeps it.\n      this.activeValue = intent.value;\n      this.sync();\n      return;\n    }\n    if (intent.type === 'expand' || intent.type === 'collapse') {\n      this.toggle(intent.value, intent.type === 'expand');\n      return;\n    }\n\n    // Activation both selects and toggles, as a click on each half would.\n    this.select(intent.value);\n    if (visible[currentIndex]?.hasChildren) this.toggle(intent.value);\n  }\n\n  /** An item's own slot changed, so the tree below it has moved. */\n  @Listen('pfTreeStructure')\n  handleStructureChange(event: CustomEvent<void>) {\n    event.stopPropagation();\n    this.sync();\n  }\n\n  render() {\n    return (\n      <Host role=\"tree\" tabindex=\"0\" aria-label={this.label} aria-activedescendant={this.activeId}>\n        <slot onSlotchange={() => this.refresh()} />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pf-utility-button.cjs.entry.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+
+const pfUtilityButtonCss = () => `:host{display:inline-flex}:host([hidden]){display:none}[part='button']{align-items:center;background:none;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--space-1);justify-content:center;line-height:1;white-space:nowrap;transition:background-color 120ms ease,     border-color 120ms ease,     color 120ms ease,     box-shadow 120ms ease;width:100%}[part='button']:focus-visible{box-shadow:var(--pf-utilitybutton-focus-ring, var(--pf-focus-ring));outline:none}[part='button']:disabled{cursor:not-allowed;opacity:0.55}:host([size='sm']) [part='button']{min-height:32px;padding:0 var(--space-2)}:host([size='md']) [part='button']{min-height:36px;padding:0 var(--space-3)}:host([variant='neutral']) [part='button']{background:var(--pf-utility-btn-neutral-bg);border-color:var(--pf-utility-btn-neutral-border);color:var(--pf-utility-btn-neutral-text)}:host([variant='neutral']) [part='button']:hover:not(:disabled){background:var(--pf-utility-btn-neutral-bg-hover);border-color:var(--pf-utility-btn-neutral-border-hover)}:host([variant='brand']) [part='button']{background:var(--pf-utility-btn-brand-bg);border-color:var(--pf-utility-btn-brand-border);color:var(--pf-utility-btn-brand-text)}:host([variant='brand']) [part='button']:hover:not(:disabled){background:var(--pf-utility-btn-brand-bg-hover)}:host([variant='destructive']) [part='button']{background:var(--pf-utility-btn-destructive-bg);border-color:var(--pf-utility-btn-destructive-border);color:var(--pf-utility-btn-destructive-text)}:host([variant='destructive']) [part='button']:hover:not(:disabled){background:var(--pf-utility-btn-destructive-bg-hover)}slot[name='icon']::slotted(*){display:block;flex:0 0 auto;height:16px;width:16px}@media (prefers-reduced-motion: reduce){[part='button']{transition:none}}`;
+
+const PfUtilityButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /** Colour treatment. Reflected so the stylesheet can select on it. */
+    variant = 'neutral';
+    /** Control size. Reflected so the stylesheet can select on it. */
+    size = 'md';
+    /** Disable the button. Reflected so the stylesheet can select on it. */
+    disabled = false;
+    /** Mirrors the native attribute. */
+    type = 'button';
+    /**
+     * Accessible name. Required for an icon-only button, and also used as the
+     * native tooltip unless `tooltip` says otherwise.
+     */
+    label;
+    /** Native tooltip text. Defaults to `label`. */
+    tooltip;
+    /**
+     * An icon-only button with no name is invisible to a screen reader, and it is
+     * the mistake this component invites.
+     *
+     * Once per element, in `componentDidLoad`. `pf-icon` dedupes its own warning
+     * by icon name, but there is no equivalent key here, and a module-level flag
+     * would make the warning depend on what else happened to render first. Fifty
+     * nameless buttons are fifty real defects, and the React component is noisier
+     * still -- it warns from the render body, so once per render.
+     */
+    componentDidLoad() {
+        if (this.label || this.el.getAttribute('aria-label'))
+            return;
+        const hasText = Array.from(this.el.childNodes).some((node) => (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) ||
+            (node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') !== 'icon'));
+        if (hasText)
+            return;
+        console.warn('[pf-utility-button] An icon-only button needs a `label` (or an `aria-label`) — this one has no accessible name.');
+    }
+    render() {
+        return (index.h(index.Host, { key: '7086ccf4c93129e544c160cf2c4815f2a3c61484' }, index.h("button", { key: 'd938e6170a19ef49c2af1d9e784e42f4192bc530', part: "button", type: this.type, disabled: this.disabled, "aria-label": this.label, title: this.tooltip ?? this.label }, index.h("slot", { key: 'e59b5b03a80eecd37990c89bad5435c4cc0cc7f9', name: "icon" }), index.h("slot", { key: 'ad287e4e52742a5c44eea10745163f065c79af07' }))));
+    }
+    static get delegatesFocus() { return true; }
+};
+PfUtilityButton.style = pfUtilityButtonCss();
+
+exports.pf_utility_button = PfUtilityButton;
+//# sourceMappingURL=pf-utility-button.entry.cjs.js.map
+
+//# sourceMappingURL=pf-utility-button.cjs.entry.js.map

package/dist/cjs/pf-utility-button.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-utility-button.cjs.entry.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,MAAM,CAAC,s3DAAs3D,CAAC;;MCqB54D,eAAe,GAAA,MAAA;;;;;;IAID,OAAO,GAA2B,SAAS;;IAG3C,IAAI,GAAwB,IAAI;;IAGhC,QAAQ,GAAG,KAAK;;IAGjC,IAAI,GAAkC,QAAQ;AAEtD;;;AAGG;AACK,IAAA,KAAK;;AAGL,IAAA,OAAO;AAEf;;;;;;;;;AASG;IACH,gBAAgB,GAAA;QACd,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC;YAAE;AACtD,QAAA,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,IAAI,CACjD,CAAC,IAAI,KACH,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE;AAC7D,aAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,IAAK,IAAgB,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,MAAM,CAAC,CAC7F;AACD,QAAA,IAAI,OAAO;YAAE;AACb,QAAA,OAAO,CAAC,IAAI,CACV,iHAAiH,CAClH;;IAGH,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,YAAA,EACX,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,EAAA,EAUjCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,EACpBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,CACJ;;;;;;;;","names":["h","Host"],"sources":["src/components/pf-utility-button/pf-utility-button.css?tag=pf-utility-button&encapsulation=shadow","src/components/pf-utility-button/pf-utility-button.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n[part='button'] {\n  align-items: center;\n  background: none;\n  border: 1px solid transparent;\n  border-radius: var(--radius-md);\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-1);\n  justify-content: center;\n  line-height: 1;\n  white-space: nowrap;\n  transition:\n    background-color 120ms ease,\n    border-color 120ms ease,\n    color 120ms ease,\n    box-shadow 120ms ease;\n  width: 100%;\n}\n\n[part='button']:focus-visible {\n  box-shadow: var(--pf-utilitybutton-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n[part='button']:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n:host([size='sm']) [part='button'] {\n  min-height: 32px;\n  padding: 0 var(--space-2);\n}\n\n:host([size='md']) [part='button'] {\n  min-height: 36px;\n  padding: 0 var(--space-3);\n}\n\n:host([variant='neutral']) [part='button'] {\n  background: var(--pf-utility-btn-neutral-bg);\n  border-color: var(--pf-utility-btn-neutral-border);\n  color: var(--pf-utility-btn-neutral-text);\n}\n\n:host([variant='neutral']) [part='button']:hover:not(:disabled) {\n  background: var(--pf-utility-btn-neutral-bg-hover);\n  border-color: var(--pf-utility-btn-neutral-border-hover);\n}\n\n:host([variant='brand']) [part='button'] {\n  background: var(--pf-utility-btn-brand-bg);\n  border-color: var(--pf-utility-btn-brand-border);\n  color: var(--pf-utility-btn-brand-text);\n}\n\n:host([variant='brand']) [part='button']:hover:not(:disabled) {\n  background: var(--pf-utility-btn-brand-bg-hover);\n}\n\n:host([variant='destructive']) [part='button'] {\n  background: var(--pf-utility-btn-destructive-bg);\n  border-color: var(--pf-utility-btn-destructive-border);\n  color: var(--pf-utility-btn-destructive-text);\n}\n\n:host([variant='destructive']) [part='button']:hover:not(:disabled) {\n  background: var(--pf-utility-btn-destructive-bg-hover);\n}\n\n/*\n * Sizes the icon the consumer slots in. The React library reaches it with a\n * descendant selector (`.pf-utility-button__icon svg`); across a shadow\n * boundary only `::slotted` can, and it reaches the assigned node itself\n * rather than inside it -- so a slotted `pf-icon` is sized here and sizes its\n * own svg.\n */\nslot[name='icon']::slotted(*) {\n  display: block;\n  flex: 0 0 auto;\n  height: 16px;\n  width: 16px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [part='button'] {\n    transition: none;\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type PfUtilityButtonVariant = 'neutral' | 'brand' | 'destructive';\nexport type PfUtilityButtonSize = 'sm' | 'md';\n\n/**\n * A compact button for toolbars and table rows, where the affordance is often\n * an icon alone.\n *\n * @slot - the button's label. Omit it for an icon-only button, and give a\n * `label` so the button still has an accessible name.\n * @slot icon - a leading icon, usually `pf-icon`.\n * @part button - the native button element.\n */\n@Component({\n  tag: 'pf-utility-button',\n  styleUrl: 'pf-utility-button.css',\n  // delegatesFocus so focusing <pf-utility-button> reaches the real button and\n  // :focus-visible lands on the element the stylesheet rings.\n  shadow: { delegatesFocus: true },\n})\nexport class PfUtilityButton {\n  @Element() el!: HTMLElement;\n\n  /** Colour treatment. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) variant: PfUtilityButtonVariant = 'neutral';\n\n  /** Control size. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) size: PfUtilityButtonSize = 'md';\n\n  /** Disable the button. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Mirrors the native attribute. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Accessible name. Required for an icon-only button, and also used as the\n   * native tooltip unless `tooltip` says otherwise.\n   */\n  @Prop() label?: string;\n\n  /** Native tooltip text. Defaults to `label`. */\n  @Prop() tooltip?: string;\n\n  /**\n   * An icon-only button with no name is invisible to a screen reader, and it is\n   * the mistake this component invites.\n   *\n   * Once per element, in `componentDidLoad`. `pf-icon` dedupes its own warning\n   * by icon name, but there is no equivalent key here, and a module-level flag\n   * would make the warning depend on what else happened to render first. Fifty\n   * nameless buttons are fifty real defects, and the React component is noisier\n   * still -- it warns from the render body, so once per render.\n   */\n  componentDidLoad() {\n    if (this.label || this.el.getAttribute('aria-label')) return;\n    const hasText = Array.from(this.el.childNodes).some(\n      (node) =>\n        (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) ||\n        (node.nodeType === Node.ELEMENT_NODE && (node as Element).getAttribute('slot') !== 'icon'),\n    );\n    if (hasText) return;\n    console.warn(\n      '[pf-utility-button] An icon-only button needs a `label` (or an `aria-label`) — this one has no accessible name.',\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          part=\"button\"\n          type={this.type}\n          disabled={this.disabled}\n          aria-label={this.label}\n          title={this.tooltip ?? this.label}\n        >\n          {/*\n            The slots sit directly in the flex container rather than inside\n            wrapper spans. A `slot` is `display: contents` per the UA\n            stylesheet, so an empty one contributes no flex item and the\n            button's `gap` does not open beside it -- which a wrapper span\n            would, being a zero-width item that still counts. There is no\n            emptiness to detect.\n          */}\n          <slot name=\"icon\" />\n          <slot />\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pf-video-player.cjs.entry.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var aria = require('./aria-5oCPUGFo.js');
+
+const pfVideoPlayerCss = () => `:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-2)}.label{color:var(--pf-field-label);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.description{color:var(--pf-field-description);font-size:var(--font-size-sm);margin:0}.error{color:var(--pf-field-error);font-size:var(--font-size-sm);margin:0}.frame{background:var(--pf-videoplayer-bg);border:1px solid var(--pf-videoplayer-border);border-radius:var(--radius-md);overflow:hidden;width:100%}:host([aspect-ratio='16/9']) .frame{aspect-ratio:16 / 9}:host([aspect-ratio='4/3']) .frame{aspect-ratio:4 / 3}:host([aspect-ratio='1/1']) .frame{aspect-ratio:1 / 1}.frame--invalid{border-color:var(--pf-videoplayer-invalid-border)}.video{display:block;height:100%;object-fit:cover;width:100%}.empty{align-items:center;color:var(--pf-videoplayer-text-muted);display:flex;font-size:var(--font-size-sm);height:100%;justify-content:center;padding:var(--space-4);text-align:center}`;
+
+const PfVideoPlayer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /** A single source. Use `sources` for several encodings. */
+    src;
+    /** Several encodings of the same video, best first. */
+    sources = [];
+    /** Captions and subtitles. A video without them is not finished. */
+    tracks = [];
+    /** Drawn above the frame, and what names the video. */
+    label;
+    description;
+    /** Error message. Its presence is what marks the frame invalid. */
+    error;
+    /** Reflected, because the stylesheet selects on it for the box's ratio. */
+    aspectRatio = '16/9';
+    controls = true;
+    poster;
+    preload = 'metadata';
+    muted = false;
+    loop = false;
+    autoplay = false;
+    video;
+    /** Starts playback, which a consumer cannot do through the shadow root. */
+    async play() {
+        await this.video?.play();
+    }
+    /** Pauses it. */
+    async pause() {
+        this.video?.pause();
+    }
+    /** The video element itself, for anything these methods do not cover. */
+    async getVideoElement() {
+        return this.video;
+    }
+    get sourceList() {
+        return Array.isArray(this.sources) ? this.sources : [];
+    }
+    get trackList() {
+        return Array.isArray(this.tracks) ? this.tracks : [];
+    }
+    render() {
+        const hasVideo = Boolean(this.src) || this.sourceList.length > 0;
+        const describedBy = aria.composeDescribedBy(this.description && 'description', this.error && 'error');
+        return (index.h(index.Host, { key: '8fc0e7d1dcee86193d386997324741443d2c9f44' }, index.h("div", { key: 'f78531482d720dfcf3678e1d28f41c4a9bf2ba9d', class: "field", part: "field" }, this.label && (index.h("span", { key: 'f06a90f7baae88b20a015c7395a712a741cd4dba', class: "label", part: "label", id: "label" }, this.label)), index.h("div", { key: '3164297a1ccc26a858342675d9b28572e25c371b', class: { frame: true, 'frame--invalid': Boolean(this.error) }, part: "frame" }, hasVideo ? (index.h("video", { class: "video", part: "video", ref: (node) => (this.video = node), controls: this.controls, poster: this.poster, preload: this.preload, muted: this.muted, loop: this.loop, autoplay: this.autoplay, src: this.src, "aria-labelledby": this.label ? 'label' : null, "aria-invalid": this.error ? 'true' : null, "aria-describedby": describedBy }, this.sourceList.map((source) => (index.h("source", { src: source.src, type: source.type }))), this.trackList.map((track) => (index.h("track", { src: track.src, kind: track.kind, srclang: track.srclang, label: track.label, default: track.default }))))) : (index.h("div", { class: "empty", part: "empty", role: "note" }, index.h("slot", { name: "empty" }, "Add a video src to display playback.")))), this.description && (index.h("p", { key: 'd2bdbc4ebe3a326cf5dacedf67c85a35c2030851', class: "description", part: "description", id: "description" }, this.description)), this.error && (index.h("p", { key: '16994f8311cc0f1d3202e1ee32dee34e1ab1daf5', class: "error", part: "error", id: "error" }, this.error)))));
+    }
+};
+PfVideoPlayer.style = pfVideoPlayerCss();
+
+exports.pf_video_player = PfVideoPlayer;
+//# sourceMappingURL=pf-video-player.entry.cjs.js.map
+
+//# sourceMappingURL=pf-video-player.cjs.entry.js.map

package/dist/cjs/pf-video-player.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-video-player.cjs.entry.js","mappings":"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","names":["composeDescribedBy","h","Host"],"sources":["src/components/pf-video-player/pf-video-player.css?tag=pf-video-player&encapsulation=shadow","src/components/pf-video-player/pf-video-player.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-2);\n}\n\n.label {\n  color: var(--pf-field-label);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.description {\n  color: var(--pf-field-description);\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-field-error);\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.frame {\n  background: var(--pf-videoplayer-bg);\n  border: 1px solid var(--pf-videoplayer-border);\n  border-radius: var(--radius-md);\n  overflow: hidden;\n  width: 100%;\n}\n\n/*\n * The ratio comes from the reflected attribute rather than a class: the\n * generated bindings set props as properties, so an unreflected prop would\n * leave no attribute for this to select on.\n */\n:host([aspect-ratio='16/9']) .frame {\n  aspect-ratio: 16 / 9;\n}\n\n:host([aspect-ratio='4/3']) .frame {\n  aspect-ratio: 4 / 3;\n}\n\n:host([aspect-ratio='1/1']) .frame {\n  aspect-ratio: 1 / 1;\n}\n\n.frame--invalid {\n  border-color: var(--pf-videoplayer-invalid-border);\n}\n\n.video {\n  display: block;\n  height: 100%;\n  object-fit: cover;\n  width: 100%;\n}\n\n.empty {\n  align-items: center;\n  color: var(--pf-videoplayer-text-muted);\n  display: flex;\n  font-size: var(--font-size-sm);\n  height: 100%;\n  justify-content: center;\n  padding: var(--space-4);\n  text-align: center;\n}\n","import { composeDescribedBy } from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Method, Prop } from '@stencil/core';\n\n/** One alternative encoding of the same video. */\nexport interface PfVideoSource {\n  src: string;\n  type?: string;\n}\n\n/** One caption, subtitle or chapter track. */\nexport interface PfVideoTrack {\n  src: string;\n  kind: 'captions' | 'chapters' | 'descriptions' | 'metadata' | 'subtitles';\n  srclang: string;\n  label: string;\n  default?: boolean;\n}\n\n/**\n * A `<video>` in a framed, fixed-ratio box, with a label, a description and\n * an error message.\n *\n * `sources` and `tracks` are **properties**, not slotted children, and this\n * is one of the few places where that is forced rather than chosen: a\n * `<source>` has to be a child of the `<video>` itself, and slotted content\n * stays in the light DOM — a slotted `<source>` would be a child of this\n * element, which the video would never look at. They are rendered into the\n * shadow `<video>` instead.\n *\n * The label names the video with an IDREF rather than a `<label for>`:\n * `for` must point at a *labelable* element and a `<video>` is not one, so\n * the React `VideoPlayer`'s `htmlFor` was silently doing nothing and the\n * video had no accessible name at all. Both layers use `aria-labelledby`\n * now, and here it is a same-root reference, which is the kind that\n * resolves.\n *\n * @slot empty - what to show when there is no video to play.\n * @part field - the wrapper around label, frame and messages.\n * @part label - the label.\n * @part frame - the fixed-ratio box.\n * @part video - the video element.\n * @part empty - the empty state's box.\n * @part description - the hint text.\n * @part error - the error message.\n */\n@Component({\n  tag: 'pf-video-player',\n  styleUrl: 'pf-video-player.css',\n  shadow: true,\n})\nexport class PfVideoPlayer {\n  @Element() el!: HTMLElement;\n\n  /** A single source. Use `sources` for several encodings. */\n  @Prop() src?: string;\n\n  /** Several encodings of the same video, best first. */\n  @Prop() sources: PfVideoSource[] = [];\n\n  /** Captions and subtitles. A video without them is not finished. */\n  @Prop() tracks: PfVideoTrack[] = [];\n\n  /** Drawn above the frame, and what names the video. */\n  @Prop() label?: string;\n\n  @Prop() description?: string;\n\n  /** Error message. Its presence is what marks the frame invalid. */\n  @Prop() error?: string;\n\n  /** Reflected, because the stylesheet selects on it for the box's ratio. */\n  @Prop({ reflect: true }) aspectRatio: '16/9' | '4/3' | '1/1' = '16/9';\n\n  @Prop() controls = true;\n\n  @Prop() poster?: string;\n\n  @Prop() preload: 'none' | 'metadata' | 'auto' = 'metadata';\n\n  @Prop({ reflect: true }) muted = false;\n\n  @Prop({ reflect: true }) loop = false;\n\n  @Prop({ reflect: true }) autoplay = false;\n\n  private video?: HTMLVideoElement;\n\n  /** Starts playback, which a consumer cannot do through the shadow root. */\n  @Method()\n  async play(): Promise<void> {\n    await this.video?.play();\n  }\n\n  /** Pauses it. */\n  @Method()\n  async pause() {\n    this.video?.pause();\n  }\n\n  /** The video element itself, for anything these methods do not cover. */\n  @Method()\n  async getVideoElement(): Promise<HTMLVideoElement | undefined> {\n    return this.video;\n  }\n\n  private get sourceList(): PfVideoSource[] {\n    return Array.isArray(this.sources) ? this.sources : [];\n  }\n\n  private get trackList(): PfVideoTrack[] {\n    return Array.isArray(this.tracks) ? this.tracks : [];\n  }\n\n  render() {\n    const hasVideo = Boolean(this.src) || this.sourceList.length > 0;\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <span class=\"label\" part=\"label\" id=\"label\">\n              {this.label}\n            </span>\n          )}\n\n          <div class={{ frame: true, 'frame--invalid': Boolean(this.error) }} part=\"frame\">\n            {hasVideo ? (\n              <video\n                class=\"video\"\n                part=\"video\"\n                ref={(node) => (this.video = node)}\n                controls={this.controls}\n                poster={this.poster}\n                preload={this.preload}\n                muted={this.muted}\n                loop={this.loop}\n                autoplay={this.autoplay}\n                src={this.src}\n                aria-labelledby={this.label ? 'label' : null}\n                aria-invalid={this.error ? 'true' : null}\n                aria-describedby={describedBy}\n              >\n                {this.sourceList.map((source) => (\n                  <source src={source.src} type={source.type} />\n                ))}\n                {this.trackList.map((track) => (\n                  <track\n                    src={track.src}\n                    kind={track.kind}\n                    srclang={track.srclang}\n                    label={track.label}\n                    default={track.default}\n                  />\n                ))}\n              </video>\n            ) : (\n              <div class=\"empty\" part=\"empty\" role=\"note\">\n                <slot name=\"empty\">Add a video src to display playback.</slot>\n              </div>\n            )}\n          </div>\n\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pf-visually-hidden.cjs.entry.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+
+const pfVisuallyHiddenCss = () => `:host{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);display:block;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([hidden]){display:none}:host([focusable]:focus),:host([focusable]:focus-within){clip:auto;clip-path:none;height:auto;margin:0;overflow:visible;position:static;white-space:normal;width:auto}`;
+
+const PfVisuallyHidden = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     * Reveal the content when it, or a descendant, receives keyboard focus — the
+     * classic "skip link" pattern. Reflected so the stylesheet can select on it.
+     */
+    focusable = false;
+    render() {
+        return (index.h(index.Host, { key: '196f44613e3141b9ac8e022cd119376e57c4e4ca' }, index.h("slot", { key: '6524bd35bbbcb027aa6b596fcf08ead6e5101bd3' })));
+    }
+};
+PfVisuallyHidden.style = pfVisuallyHiddenCss();
+
+exports.pf_visually_hidden = PfVisuallyHidden;
+//# sourceMappingURL=pf-visually-hidden.entry.cjs.js.map
+
+//# sourceMappingURL=pf-visually-hidden.cjs.entry.js.map

package/dist/cjs/pf-visually-hidden.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-visually-hidden.cjs.entry.js","mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,wWAAwW,CAAC;;MCmB/X,gBAAgB,GAAA,MAAA;;;;AAC3B;;;AAGG;IACsB,SAAS,GAAG,KAAK;IAE1C,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH;;;;;;;","names":["h","Host"],"sources":["src/components/pf-visually-hidden/pf-visually-hidden.css?tag=pf-visually-hidden&encapsulation=shadow","src/components/pf-visually-hidden/pf-visually-hidden.tsx"],"sourcesContent":["/*\n * The host does the hiding, so the slotted content needs no cooperation: it is\n * clipped wherever it happens to be in the consumer's tree.\n */\n:host {\n  border: 0;\n  /* `clip` is the deprecated fallback the React library also carries; both are\n     kept so the two layers hide content identically in older Safari. */\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  display: block;\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * Reveal on keyboard focus (skip-link pattern). `:focus-within` is what catches\n * the common case of a focusable descendant, such as a skip link's anchor;\n * `:focus` alone covers a consumer who made the host itself focusable with\n * tabindex.\n */\n:host([focusable]:focus),\n:host([focusable]:focus-within) {\n  clip: auto;\n  clip-path: none;\n  height: auto;\n  margin: 0;\n  overflow: visible;\n  /* Flow back into layout so the revealed content doesn't overlap siblings. */\n  position: static;\n  white-space: normal;\n  width: auto;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Hides content visually while keeping it available to screen readers and\n * other assistive technology. Use for labels, instructions and status text\n * that are implied visually but need to be announced.\n *\n * The React component takes an `as` prop to choose its tag; a custom element's\n * tag is fixed, so wrap this instead of configuring it — `<h2><pf-visually-\n * hidden>Results</pf-visually-hidden></h2>` is still a heading named\n * \"Results\".\n *\n * @slot - the content to hide visually.\n */\n@Component({\n  tag: 'pf-visually-hidden',\n  styleUrl: 'pf-visually-hidden.css',\n  shadow: true,\n})\nexport class PfVisuallyHidden {\n  /**\n   * Reveal the content when it, or a descendant, receives keyboard focus — the\n   * classic \"skip link\" pattern. Reflected so the stylesheet can select on it.\n   */\n  @Prop({ reflect: true }) focusable = false;\n\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}