@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/collection/components/pf-tree-view/pf-tree-view.js

@@ -0,0 +1,426 @@
+import { expandableTreeValues, firstEnabledTreeValue, flattenVisibleTree, formatValueList, parseValueList, resolveTreeKey, } from "@pitchfork-ui/core";
+import { h, Host, } from "@stencil/core";
+/**
+ * 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;
+/**
+ * A tree over nested `pf-tree-item` children.
+ *
+ * Nesting rather than a `nodes` array, which is what a tree looks like in a
+ * consumer's template anyway — and the labels are nodes, so they could not
+ * cross the HTML boundary.
+ *
+ * The group owns what no single item can see: which one is selected, which
+ * are open, the one tab stop, and the keyboard. Every rule the keyboard
+ * follows is core's `resolveTreeKey`, so this and the React `TreeView` answer
+ * the arrows identically.
+ *
+ * **The tree itself is the tab stop, not the items.** The ARIA tree pattern
+ * allows either a roving tabindex or a managed `aria-activedescendant`, and
+ * here only the second one works: measured in Chromium, a `tabindex="0"` host
+ * slotted into another host's shadow tree is skipped by sequential navigation
+ * entirely when the outer host's tabindex is negative — which is exactly a
+ * nested `pf-tree-item` under a roving tabindex. So the tree takes the focus
+ * and tracks the active item with an IDREF, which resolves because the items
+ * are its own light-DOM descendants.
+ *
+ * The React `TreeView` makes every visible item a tab stop, which is a gap
+ * recorded in `todo.md`.
+ *
+ * @slot - the `pf-tree-item` children.
+ */
+export class PfTreeView {
+    el;
+    /** 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 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 = 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 (h(Host, { key: 'a39e6df109c516369723544040b29914e5ba596d', role: "tree", tabindex: "0", "aria-label": this.label, "aria-activedescendant": this.activeId }, h("slot", { key: 'e50cbfba93aadd34fefad3399af4ecc7aa468fdf', onSlotchange: () => this.refresh() })));
+    }
+    static get is() { return "pf-tree-view"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-tree-view.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-tree-view.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected item's value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "expanded": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The open branches, as one comma-separated string."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "expanded",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The tree's accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfChange",
+                "name": "pfChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the selection changes."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "pfExpandedChange",
+                "name": "pfExpandedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when a branch opens or closes, with the open set."
+                },
+                "complexType": {
+                    "original": "{ value: string; values: string[] }",
+                    "resolved": "{ value: string; values: string[]; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Re-reads the tree, for a consumer who changed an item through a property.",
+                    "tags": []
+                }
+            },
+            "expandAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens every branch.",
+                    "tags": []
+                }
+            },
+            "collapseAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes every branch.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleStateChange"
+            }, {
+                "propName": "expanded",
+                "methodName": "handleStateChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "pfTreeSelect",
+                "method": "handleSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "pfTreeToggle",
+                "method": "handleToggle",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "pfTreeStructure",
+                "method": "handleStructureChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=pf-tree-view.js.map

package/dist/collection/components/pf-tree-view/pf-tree-view.js.map

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

package/dist/collection/components/pf-utility-button/pf-utility-button.css

@@ -0,0 +1,100 @@
+: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);
+}
+
+/*
+ * Sizes the icon the consumer slots in. The React library reaches it with a
+ * descendant selector (`.pf-utility-button__icon svg`); across a shadow
+ * boundary only `::slotted` can, and it reaches the assigned node itself
+ * rather than inside it -- so a slotted `pf-icon` is sized here and sizes its
+ * own svg.
+ */
+slot[name='icon']::slotted(*) {
+  display: block;
+  flex: 0 0 auto;
+  height: 16px;
+  width: 16px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [part='button'] {
+    transition: none;
+  }
+}