@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/collection/components/pf-rich-text-editor/pf-rich-text-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-rich-text-editor.js","sourceRoot":"","sources":["../../../src/components/pf-rich-text-editor/pf-rich-text-editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  RICH_TEXT_COMMANDS,\n  composeDescribedBy,\n  getRovingItems,\n  resolveListMove,\n  resolveRovingKey,\n  stripOuterParagraph,\n  syncRovingTabIndex,\n} from '@pitchfork-ui/core';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { applyControlValidity } from '../../form-validity';\n\n/**\n * A form-associated rich-text field over a `contenteditable`.\n *\n * The toolbar is core's list, so this and the React `RichTextEditor` cannot\n * offer different buttons, and the value is normalised with core's\n * `stripOuterParagraph`, so they cannot disagree about what a round trip\n * looks like.\n *\n * Two things differ from the React component, both deliberate:\n *\n * - **The toolbar is one tab stop**, with the arrows moving inside it, which\n *   is the ARIA toolbar pattern and what `pf-toolbar` already does. The React\n *   version is six tab stops inside a `role=\"toolbar\"`, so tabbing past the\n *   field walks every button; `todo.md` has that.\n * - **It is a real form control.** `formAssociated` with `ElementInternals` is\n *   what puts the value in `FormData`; a `contenteditable` is not a form\n *   control in any framework, and the React component's value reaches a form\n *   only if the consumer wires it there themselves.\n *\n * `document.execCommand` is deprecated and is still the only way to apply\n * formatting inside a `contenteditable` without a dependency, which is the\n * same trade the React component makes.\n *\n * @part field - the wrapper around label, toolbar, editor and messages.\n * @part label - the label element.\n * @part toolbar - the formatting toolbar.\n * @part tool - one toolbar button.\n * @part editor - the editable area.\n * @part count - the character counter.\n * @part description - the hint text.\n * @part error - the error message.\n */\n@Component({\n  tag: 'pf-rich-text-editor',\n  styleUrl: 'pf-rich-text-editor.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfRichTextEditor {\n  @AttachInternals() internals!: ElementInternals;\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * Submitted under this name.\n   *\n   * Reflected, because a form-associated custom element takes its submission\n   * name from the `name` content attribute rather than from this property.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The field's value, as HTML. */\n  @Prop({ mutable: true }) value = '';\n\n  @Prop() label?: string;\n\n  @Prop() description?: string;\n\n  /** Error message from the consumer. Its presence marks the control invalid. */\n  @Prop() error?: string;\n\n  @Prop() placeholder = 'Start typing...';\n\n  /** The editable area's smallest height, in pixels. */\n  @Prop() minHeight = 140;\n\n  /** The most characters of text the field will hold. */\n  @Prop() characterMax?: number;\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires when the value changes, however it changed. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** The text length, which the counter shows. */\n  @State() characterCount = 0;\n\n  /** The value a reset restores, captured before `value` can be replaced. */\n  private initialValue = '';\n\n  /** The last value inside the character limit, which an overrun reverts to. */\n  private lastWithinLimit = '';\n\n  private editor?: HTMLElement;\n\n  private toolbar?: HTMLElement;\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n  }\n\n  componentDidLoad() {\n    this.writeValueIntoEditor();\n    if (this.toolbar) syncRovingTabIndex(getRovingItems(this.toolbar));\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.writeValueIntoEditor();\n    this.syncFormState();\n  }\n\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    const text = this.editor?.textContent ?? '';\n    this.internals.setFormValue(this.value ?? '');\n    applyControlValidity(this.internals, text.trim().length > 0, this.required, this.error);\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  /** Applies one of the toolbar's commands, as pressing its button does. */\n  @Method()\n  async format(command: string) {\n    this.runCommand(command);\n  }\n\n  /**\n   * A reset restores the value the control started with, not an empty string —\n   * the rule a native `<input value=\"initial\">` follows.\n   */\n  formResetCallback() {\n    this.value = this.initialValue;\n    this.writeValueIntoEditor();\n  }\n\n  /**\n   * The editable area's content is written imperatively, never rendered.\n   *\n   * A `contenteditable` that a vdom also owns is a fight: the person types,\n   * the DOM changes under the renderer, and the next render puts the old\n   * content back with the caret at the start. So the element renders an empty\n   * box once and sets `innerHTML` only when the value it holds and the value\n   * in the box actually differ.\n   */\n  private writeValueIntoEditor() {\n    const next = stripOuterParagraph(this.value ?? '');\n    if (this.editor && this.editor.innerHTML !== next) this.editor.innerHTML = next;\n\n    this.lastWithinLimit = next;\n    this.characterCount = this.editor?.textContent?.length ?? 0;\n  }\n\n  private onInput = () => {\n    if (!this.editor) return;\n\n    const length = this.editor.textContent?.length ?? 0;\n\n    /*\n     * Over the limit: put the last good value back rather than let the\n     * content grow. The caret lands at the start of the box, which is the\n     * cost of this approach and the reason a limit should be generous.\n     */\n    if (typeof this.characterMax === 'number' && length > this.characterMax) {\n      this.editor.innerHTML = this.lastWithinLimit;\n      this.characterCount = this.editor.textContent?.length ?? 0;\n      return;\n    }\n\n    this.lastWithinLimit = this.editor.innerHTML;\n    this.characterCount = length;\n    this.value = this.editor.innerHTML;\n    this.syncFormState();\n    this.pfChange.emit({ value: this.value });\n  };\n\n  private runCommand(command: string) {\n    if (!this.editor || this.disabled) return;\n\n    this.editor.focus();\n    /*\n     * Deprecated, and still the only way to format inside a\n     * `contenteditable` without a dependency. It is also the one DOM call\n     * here that a test project cannot make: Stencil's mock DOM has no\n     * `execCommand` at all, so the toolbar is browser-tested.\n     */\n    document.execCommand?.(command);\n    this.onInput();\n  }\n\n  /** The toolbar is one tab stop, with the arrows moving inside it. */\n  private onToolbarKeyDown = (event: KeyboardEvent) => {\n    if (event.defaultPrevented || !this.toolbar) return;\n\n    const action = resolveRovingKey(event.key, 'horizontal');\n    if (!action) return;\n\n    const items = getRovingItems(this.toolbar);\n    const current = items.indexOf(this.el.shadowRoot?.activeElement as HTMLElement);\n    if (current === -1) return;\n\n    const next = resolveListMove(\n      action,\n      items.map((_, index) => index),\n      current,\n    );\n    if (next >= 0) {\n      event.preventDefault();\n      items[next].focus();\n    }\n  };\n\n  private onToolbarFocusIn = (event: FocusEvent) => {\n    if (this.toolbar) syncRovingTabIndex(getRovingItems(this.toolbar), event.target as HTMLElement);\n  };\n\n  render() {\n    const hasCount = typeof this.characterMax === 'number';\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n      hasCount && 'count',\n    );\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" id=\"label\" htmlFor=\"editor\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n\n          <div\n            class={{\n              box: true,\n              'box--invalid': Boolean(this.error),\n              'box--disabled': this.disabled,\n            }}\n          >\n            <div\n              class=\"toolbar\"\n              part=\"toolbar\"\n              role=\"toolbar\"\n              aria-label=\"Formatting options\"\n              aria-orientation=\"horizontal\"\n              ref={(node) => (this.toolbar = node)}\n              onKeyDown={this.onToolbarKeyDown}\n              onFocusin={this.onToolbarFocusIn}\n            >\n              {RICH_TEXT_COMMANDS.map((tool) => [\n                tool.separatorBefore ? <span class=\"divider\" aria-hidden=\"true\"></span> : null,\n                <button\n                  type=\"button\"\n                  class=\"tool\"\n                  part=\"tool\"\n                  data-command={tool.command}\n                  aria-label={tool.label}\n                  disabled={this.disabled}\n                  // A press must not take the caret out of the editor, or the\n                  // command has no selection to apply to.\n                  onMouseDown={(event: MouseEvent) => event.preventDefault()}\n                  onClick={() => this.runCommand(tool.command)}\n                >\n                  {tool.text}\n                </button>,\n              ])}\n            </div>\n\n            {/*\n              Rendered empty, once. Its content is set imperatively, because a\n              vdom that also owned it would put the old content back under the\n              person's caret on the next render.\n            */}\n            <div\n              id=\"editor\"\n              class=\"editor\"\n              part=\"editor\"\n              role=\"textbox\"\n              aria-multiline=\"true\"\n              aria-labelledby={this.label ? 'label' : null}\n              aria-required={this.required ? 'true' : null}\n              aria-invalid={this.error ? 'true' : null}\n              aria-describedby={describedBy}\n              aria-disabled={this.disabled ? 'true' : null}\n              contentEditable={!this.disabled}\n              data-placeholder={this.placeholder}\n              style={{ '--pf-rte-min-height': `${this.minHeight}px` }}\n              ref={(node) => (this.editor = node)}\n              onInput={this.onInput}\n            ></div>\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\n          {hasCount && (\n            <p class=\"count\" part=\"count\" id=\"count\" aria-live=\"polite\">\n              {this.characterCount}/{this.characterMax}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-scroll-area/pf-scroll-area.css

@@ -0,0 +1,62 @@
+:host {
+  display: block;
+  /* Standard scrollbar styling (Firefox + modern browsers). */
+  scrollbar-color: var(--pf-scrollarea-thumb) transparent;
+  scrollbar-width: thin;
+  /* Reserve a gutter so the scrollbar never overlays (and obscures) content. */
+  scrollbar-gutter: stable;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host(:focus-visible) {
+  border-radius: var(--radius-sm);
+  box-shadow: var(--pf-scrollarea-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+:host([orientation='vertical']) {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+:host([orientation='horizontal']) {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+:host([orientation='both']) {
+  overflow: auto;
+}
+
+/*
+ * WebKit / Blink scrollbar styling. These pseudo-elements target the host's own
+ * scrollbar, so they are written against `:host` rather than an inner element.
+ */
+:host::-webkit-scrollbar {
+  height: 10px;
+  width: 10px;
+}
+
+:host::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+:host::-webkit-scrollbar-thumb {
+  background: var(--pf-scrollarea-thumb);
+  /* Transparent border + padding-box clip insets the thumb so it reads slimmer. */
+  background-clip: padding-box;
+  border: 2px solid transparent;
+  border-radius: var(--radius-full);
+}
+
+:host::-webkit-scrollbar-thumb:hover {
+  background: var(--pf-scrollarea-thumb-hover);
+  background-clip: padding-box;
+}
+
+:host::-webkit-scrollbar-corner {
+  background: transparent;
+}

package/dist/collection/components/pf-scroll-area/pf-scroll-area.js

@@ -0,0 +1,98 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A scrollable region with a styled, non-overlaying scrollbar.
+ *
+ * @slot - the content to scroll.
+ */
+export class PfScrollArea {
+    el;
+    /** Which axis scrolls. Reflected so the stylesheet can select on it. */
+    orientation = 'vertical';
+    /**
+     * Make the region keyboard-focusable so it can be scrolled with the arrow
+     * keys (WCAG 2.1.1). Set false when a focusable child already provides
+     * keyboard access.
+     */
+    focusable = true;
+    /**
+     * The host scrolls, so the host is what has to be focusable — there is no
+     * inner element to put the tabindex on, which is why this is set here rather
+     * than rendered.
+     *
+     * A consumer's own `tabindex` wins: read before the first render and never
+     * overwritten, so `tabindex="-1"` is respected instead of being silently
+     * reset to 0.
+     */
+    componentWillLoad() {
+        if (this.focusable && !this.el.hasAttribute('tabindex')) {
+            this.el.setAttribute('tabindex', '0');
+        }
+    }
+    render() {
+        return (h(Host, { key: '1981de11e7e17cb513ca642b180062c3767fbf41' }, h("slot", { key: '1260c995e6571cc826038be07fffc584343675c7' })));
+    }
+    static get is() { return "pf-scroll-area"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-scroll-area.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-scroll-area.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfScrollAreaOrientation",
+                    "resolved": "\"both\" | \"horizontal\" | \"vertical\"",
+                    "references": {
+                        "PfScrollAreaOrientation": {
+                            "location": "local",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-scroll-area/pf-scroll-area.tsx",
+                            "id": "src/components/pf-scroll-area/pf-scroll-area.tsx::PfScrollAreaOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which axis scrolls. Reflected so the stylesheet can select on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'vertical'"
+            },
+            "focusable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Make the region keyboard-focusable so it can be scrolled with the arrow\nkeys (WCAG 2.1.1). Set false when a focusable child already provides\nkeyboard access."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "focusable",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pf-scroll-area.js.map

package/dist/collection/components/pf-scroll-area/pf-scroll-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-scroll-area.js","sourceRoot":"","sources":["../../../src/components/pf-scroll-area/pf-scroll-area.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIlE;;;;GAIG;AAMH,MAAM,OAAO,YAAY;IACZ,EAAE,CAAe;IAE5B,wEAAwE;IAC/C,WAAW,GAA4B,UAAU,CAAC;IAE3E;;;;OAIG;IACK,SAAS,GAAG,IAAI,CAAC;IAEzB;;;;;;;;OAQG;IACH,iBAAiB;QACf,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC;YACxD,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type PfScrollAreaOrientation = 'vertical' | 'horizontal' | 'both';\n\n/**\n * A scrollable region with a styled, non-overlaying scrollbar.\n *\n * @slot - the content to scroll.\n */\n@Component({\n  tag: 'pf-scroll-area',\n  styleUrl: 'pf-scroll-area.css',\n  shadow: true,\n})\nexport class PfScrollArea {\n  @Element() el!: HTMLElement;\n\n  /** Which axis scrolls. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) orientation: PfScrollAreaOrientation = 'vertical';\n\n  /**\n   * Make the region keyboard-focusable so it can be scrolled with the arrow\n   * keys (WCAG 2.1.1). Set false when a focusable child already provides\n   * keyboard access.\n   */\n  @Prop() focusable = true;\n\n  /**\n   * The host scrolls, so the host is what has to be focusable — there is no\n   * inner element to put the tabindex on, which is why this is set here rather\n   * than rendered.\n   *\n   * A consumer's own `tabindex` wins: read before the first render and never\n   * overwritten, so `tabindex=\"-1\"` is respected instead of being silently\n   * reset to 0.\n   */\n  componentWillLoad() {\n    if (this.focusable && !this.el.hasAttribute('tabindex')) {\n      this.el.setAttribute('tabindex', '0');\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-section-footer/pf-section-footer.css

@@ -0,0 +1,73 @@
+:host {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  justify-content: space-between;
+  padding-top: var(--space-4);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+@media (min-width: 640px) {
+  :host {
+    align-items: center;
+    flex-direction: row;
+  }
+}
+
+:host([divider]) {
+  border-top: 1px solid var(--pf-section-footer-border);
+}
+
+:host([align='start']) {
+  justify-content: flex-start;
+}
+
+:host([align='end']) {
+  justify-content: flex-end;
+}
+
+/*
+ * Hidden rather than left out, so a later `slotchange` still arrives. Two
+ * classes deep, because the actions box sets its own `display` below.
+ */
+.heading.empty,
+.actions.empty {
+  display: none;
+}
+
+.content {
+  min-width: 0;
+}
+
+.heading {
+  color: var(--pf-section-footer-text);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  margin: 0;
+}
+
+slot[name='description']::slotted(*) {
+  color: var(--pf-section-footer-text-muted);
+  display: block;
+  font-size: var(--font-size-sm);
+  line-height: 1.4;
+  margin: var(--space-1) 0 0;
+}
+
+.actions {
+  align-items: center;
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .actions {
+    width: auto;
+  }
+}

package/dist/collection/components/pf-section-footer/pf-section-footer.js

@@ -0,0 +1,113 @@
+import { h, Host } from "@stencil/core";
+/**
+ * The foot of a section: an optional heading and line of text, and the
+ * controls that close it off.
+ *
+ * The same shape as `pf-section-header` with the rule on the other edge —
+ * and, unlike the header, the heading is optional here, so its box is one of
+ * the ones that can be empty.
+ *
+ * @slot - the heading.
+ * @slot description - a line below the heading.
+ * @slot actions - controls, which sit opposite the heading on a wide screen.
+ * @part content - the box holding the heading and the description.
+ * @part heading - the heading's box.
+ * @part actions - the box holding the actions slot.
+ */
+export class PfSectionFooter {
+    el;
+    /** Draw a rule above the footer. Defaults to true, as the React one does. */
+    divider = true;
+    /** How the heading and the actions share the row. Reflected. */
+    align = 'between';
+    /** Which of the boxes that carry layout have anything in them. */
+    hasHeading = false;
+    hasActions = false;
+    /** Read from the light DOM, so first paint is right without `slotchange`. */
+    componentWillLoad() {
+        this.read();
+    }
+    read = () => {
+        const children = Array.from(this.el.children);
+        // The heading is the default slot, so it is anything *without* a slot name
+        // — including a bare text node, which is why the text is counted too.
+        this.hasHeading =
+            children.some((child) => !child.hasAttribute('slot')) ||
+                Array.from(this.el.childNodes).some((node) => node.nodeType === 3 && (node.textContent ?? '').trim() !== '');
+        this.hasActions = children.some((child) => child.getAttribute('slot') === 'actions');
+    };
+    render() {
+        return (h(Host, { key: 'f25e894c4f0fe0dc340b29f448add3dc71afe52a' }, h("div", { key: '51882857d07254c8998a34c5feaf281d55d87f51', class: "content", part: "content" }, h("h3", { key: '9b67978a5a2824d5d9b8881e76c9d3ed9129ae3f', class: { heading: true, empty: !this.hasHeading }, part: "heading" }, h("slot", { key: '588df184573f0d84d0f0fa073e7ec7bc7007ba2f', onSlotchange: this.read })), h("slot", { key: 'ab2749da402851c1dc922454db4188f1bed5fecf', name: "description" })), h("div", { key: 'fa1cdc6a8a4301d6e61275998f7550057b6cd734', class: { actions: true, empty: !this.hasActions }, part: "actions" }, h("slot", { key: 'b8585a98084951deb0d66c36a7c29a668d5f7dbc', name: "actions", onSlotchange: this.read }))));
+    }
+    static get is() { return "pf-section-footer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-section-footer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-section-footer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "divider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Draw a rule above the footer. Defaults to true, as the React one does."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "divider",
+                "defaultValue": "true"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfSectionHeaderAlign",
+                    "resolved": "\"between\" | \"end\" | \"start\"",
+                    "references": {
+                        "PfSectionHeaderAlign": {
+                            "location": "import",
+                            "path": "../pf-section-header/pf-section-header",
+                            "id": "src/components/pf-section-header/pf-section-header.tsx::PfSectionHeaderAlign",
+                            "referenceLocation": "PfSectionHeaderAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How the heading and the actions share the row. Reflected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "align",
+                "defaultValue": "'between'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasHeading": {},
+            "hasActions": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pf-section-footer.js.map

package/dist/collection/components/pf-section-footer/pf-section-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-section-footer.js","sourceRoot":"","sources":["../../../src/components/pf-section-footer/pf-section-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAIzE;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,eAAe;IACf,EAAE,CAAe;IAE5B,6EAA6E;IACpD,OAAO,GAAG,IAAI,CAAC;IAExC,gEAAgE;IACvC,KAAK,GAAyB,SAAS,CAAC;IAEjE,kEAAkE;IACzD,UAAU,GAAG,KAAK,CAAC;IACnB,UAAU,GAAG,KAAK,CAAC;IAE5B,6EAA6E;IAC7E,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAEO,IAAI,GAAG,GAAG,EAAE;QAClB,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;QAE9C,2EAA2E;QAC3E,sEAAsE;QACtE,IAAI,CAAC,UAAU;YACb,QAAQ,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;gBACrD,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,IAAI,CACjC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,CACxE,CAAC;QACJ,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC,CAAC;IACvF,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;gBACjC,2DAAI,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,EAAC,SAAS;oBACnE,6DAAM,YAAY,EAAE,IAAI,CAAC,IAAI,GAAI,CAC9B;gBACL,6DAAM,IAAI,EAAC,aAAa,GAAG,CACvB;YAEN,4DAAK,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,EAAC,SAAS;gBACpE,6DAAM,IAAI,EAAC,SAAS,EAAC,YAAY,EAAE,IAAI,CAAC,IAAI,GAAI,CAC5C,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nimport type { PfSectionHeaderAlign } from '../pf-section-header/pf-section-header';\n\n/**\n * The foot of a section: an optional heading and line of text, and the\n * controls that close it off.\n *\n * The same shape as `pf-section-header` with the rule on the other edge —\n * and, unlike the header, the heading is optional here, so its box is one of\n * the ones that can be empty.\n *\n * @slot - the heading.\n * @slot description - a line below the heading.\n * @slot actions - controls, which sit opposite the heading on a wide screen.\n * @part content - the box holding the heading and the description.\n * @part heading - the heading's box.\n * @part actions - the box holding the actions slot.\n */\n@Component({\n  tag: 'pf-section-footer',\n  styleUrl: 'pf-section-footer.css',\n  shadow: true,\n})\nexport class PfSectionFooter {\n  @Element() el!: HTMLElement;\n\n  /** Draw a rule above the footer. Defaults to true, as the React one does. */\n  @Prop({ reflect: true }) divider = true;\n\n  /** How the heading and the actions share the row. Reflected. */\n  @Prop({ reflect: true }) align: PfSectionHeaderAlign = 'between';\n\n  /** Which of the boxes that carry layout have anything in them. */\n  @State() hasHeading = false;\n  @State() hasActions = false;\n\n  /** Read from the light DOM, so first paint is right without `slotchange`. */\n  componentWillLoad() {\n    this.read();\n  }\n\n  private read = () => {\n    const children = Array.from(this.el.children);\n\n    // The heading is the default slot, so it is anything *without* a slot name\n    // — including a bare text node, which is why the text is counted too.\n    this.hasHeading =\n      children.some((child) => !child.hasAttribute('slot')) ||\n      Array.from(this.el.childNodes).some(\n        (node) => node.nodeType === 3 && (node.textContent ?? '').trim() !== '',\n      );\n    this.hasActions = children.some((child) => child.getAttribute('slot') === 'actions');\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"content\" part=\"content\">\n          <h3 class={{ heading: true, empty: !this.hasHeading }} part=\"heading\">\n            <slot onSlotchange={this.read} />\n          </h3>\n          <slot name=\"description\" />\n        </div>\n\n        <div class={{ actions: true, empty: !this.hasActions }} part=\"actions\">\n          <slot name=\"actions\" onSlotchange={this.read} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-section-header/pf-section-header.css

@@ -0,0 +1,93 @@
+:host {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  justify-content: space-between;
+  padding-bottom: var(--space-4);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+@media (min-width: 640px) {
+  :host {
+    align-items: center;
+    flex-direction: row;
+  }
+}
+
+:host([divider]) {
+  border-bottom: 1px solid var(--pf-section-header-border);
+}
+
+:host([align='start']) {
+  justify-content: flex-start;
+}
+
+:host([align='end']) {
+  justify-content: flex-end;
+}
+
+/*
+ * Hidden rather than left out, so a later `slotchange` still arrives. Two
+ * classes deep, because both boxes set their own `display` below.
+ */
+.metadata.empty,
+.actions.empty {
+  display: none;
+}
+
+.content {
+  min-width: 0;
+}
+
+slot[name='eyebrow']::slotted(*) {
+  color: var(--pf-section-header-text-muted);
+  display: block;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.04em;
+  margin: 0 0 var(--space-1);
+  text-transform: uppercase;
+}
+
+.heading {
+  color: var(--pf-section-header-text);
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  margin: 0;
+}
+
+slot[name='description']::slotted(*) {
+  color: var(--pf-section-header-text-muted);
+  display: block;
+  font-size: var(--font-size-sm);
+  line-height: 1.5;
+  margin: var(--space-1) 0 0;
+}
+
+.metadata {
+  align-items: center;
+  color: var(--pf-section-header-text-muted);
+  display: inline-flex;
+  flex-wrap: wrap;
+  font-size: var(--font-size-sm);
+  gap: var(--space-2);
+  margin-top: var(--space-2);
+}
+
+.actions {
+  align-items: center;
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .actions {
+    width: auto;
+  }
+}

package/dist/collection/components/pf-section-header/pf-section-header.js

@@ -0,0 +1,113 @@
+import { h, Host } from "@stencil/core";
+/**
+ * The heading of a section, with room for an eyebrow, a line of explanation,
+ * some metadata and a control or two.
+ *
+ * Every optional box stays in the tree and is hidden when empty rather than
+ * being left out, because a slot that is not rendered never fires
+ * `slotchange` — content added later would stay invisible for good. The
+ * eyebrow and the description need no box of their own, so they are styled
+ * through `::slotted()` and collapse on their own.
+ *
+ * @slot eyebrow - small text above the heading.
+ * @slot - the heading.
+ * @slot description - a line below the heading.
+ * @slot metadata - small facts below the description.
+ * @slot actions - controls, which sit opposite the heading on a wide screen.
+ * @part content - the box holding everything but the actions.
+ * @part heading - the heading's box.
+ * @part metadata - the box holding the metadata slot.
+ * @part actions - the box holding the actions slot.
+ */
+export class PfSectionHeader {
+    el;
+    /** Draw a rule below the header. Reflected for the stylesheet. */
+    divider = false;
+    /** How the heading and the actions share the row. Reflected. */
+    align = 'between';
+    /** Which of the boxes that carry layout have anything in them. */
+    hasMetadata = false;
+    hasActions = false;
+    /** Read from the light DOM, so first paint is right without `slotchange`. */
+    componentWillLoad() {
+        this.read();
+    }
+    read = () => {
+        const slotted = (name) => Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);
+        this.hasMetadata = slotted('metadata');
+        this.hasActions = slotted('actions');
+    };
+    render() {
+        return (h(Host, { key: '4ccd9a76ae1dc8921ba2a16ab7a15ced1b626986' }, h("div", { key: '1df5a554bae92dd018741c0eb353f8fb6b0749d1', class: "content", part: "content" }, h("slot", { key: '1559805e1974477782291d45e87bfaafa58e4bbf', name: "eyebrow" }), h("h2", { key: 'ae351a3f5853a16aeaf83f0af5b959a113a7e827', class: "heading", part: "heading" }, h("slot", { key: 'e8f154fc36e3e77e550b28320a0e35f085d3a1ee' })), h("slot", { key: '29213ae43627969251138fc9b1b70193e693ae91', name: "description" }), h("div", { key: '55c17fef4be98e763ac1d9bbf169ad14309f240d', class: { metadata: true, empty: !this.hasMetadata }, part: "metadata" }, h("slot", { key: '191d9e23d9e769303862b6f1afe05b57242cafbe', name: "metadata", onSlotchange: this.read }))), h("div", { key: 'ac2fb5005a90c8f49c70c04a4193c2787ed0f004', class: { actions: true, empty: !this.hasActions }, part: "actions" }, h("slot", { key: '02ce065806d229d45f9498715db2648c767aec10', name: "actions", onSlotchange: this.read }))));
+    }
+    static get is() { return "pf-section-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-section-header.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-section-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "divider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Draw a rule below the header. Reflected for the stylesheet."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "divider",
+                "defaultValue": "false"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfSectionHeaderAlign",
+                    "resolved": "\"between\" | \"end\" | \"start\"",
+                    "references": {
+                        "PfSectionHeaderAlign": {
+                            "location": "local",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-section-header/pf-section-header.tsx",
+                            "id": "src/components/pf-section-header/pf-section-header.tsx::PfSectionHeaderAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How the heading and the actions share the row. Reflected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "align",
+                "defaultValue": "'between'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasMetadata": {},
+            "hasActions": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pf-section-header.js.map

package/dist/collection/components/pf-section-header/pf-section-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-section-header.js","sourceRoot":"","sources":["../../../src/components/pf-section-header/pf-section-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAIzE;;;;;;;;;;;;;;;;;;;GAmBG;AAMH,MAAM,OAAO,eAAe;IACf,EAAE,CAAe;IAE5B,kEAAkE;IACzC,OAAO,GAAG,KAAK,CAAC;IAEzC,gEAAgE;IACvC,KAAK,GAAyB,SAAS,CAAC;IAEjE,kEAAkE;IACzD,WAAW,GAAG,KAAK,CAAC;IACpB,UAAU,GAAG,KAAK,CAAC;IAE5B,6EAA6E;IAC7E,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAEO,IAAI,GAAG,GAAG,EAAE;QAClB,MAAM,OAAO,GAAG,CAAC,IAAY,EAAE,EAAE,CAC/B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,CAAC;QAEpF,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;QACvC,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;gBACjC,6DAAM,IAAI,EAAC,SAAS,GAAG;gBACvB,2DAAI,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;oBAChC,8DAAQ,CACL;gBACL,6DAAM,IAAI,EAAC,aAAa,GAAG;gBAC3B,4DAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAC,UAAU;oBACvE,6DAAM,IAAI,EAAC,UAAU,EAAC,YAAY,EAAE,IAAI,CAAC,IAAI,GAAI,CAC7C,CACF;YAEN,4DAAK,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,EAAC,SAAS;gBACpE,6DAAM,IAAI,EAAC,SAAS,EAAC,YAAY,EAAE,IAAI,CAAC,IAAI,GAAI,CAC5C,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nexport type PfSectionHeaderAlign = 'start' | 'between' | 'end';\n\n/**\n * The heading of a section, with room for an eyebrow, a line of explanation,\n * some metadata and a control or two.\n *\n * Every optional box stays in the tree and is hidden when empty rather than\n * being left out, because a slot that is not rendered never fires\n * `slotchange` — content added later would stay invisible for good. The\n * eyebrow and the description need no box of their own, so they are styled\n * through `::slotted()` and collapse on their own.\n *\n * @slot eyebrow - small text above the heading.\n * @slot - the heading.\n * @slot description - a line below the heading.\n * @slot metadata - small facts below the description.\n * @slot actions - controls, which sit opposite the heading on a wide screen.\n * @part content - the box holding everything but the actions.\n * @part heading - the heading's box.\n * @part metadata - the box holding the metadata slot.\n * @part actions - the box holding the actions slot.\n */\n@Component({\n  tag: 'pf-section-header',\n  styleUrl: 'pf-section-header.css',\n  shadow: true,\n})\nexport class PfSectionHeader {\n  @Element() el!: HTMLElement;\n\n  /** Draw a rule below the header. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) divider = false;\n\n  /** How the heading and the actions share the row. Reflected. */\n  @Prop({ reflect: true }) align: PfSectionHeaderAlign = 'between';\n\n  /** Which of the boxes that carry layout have anything in them. */\n  @State() hasMetadata = false;\n  @State() hasActions = false;\n\n  /** Read from the light DOM, so first paint is right without `slotchange`. */\n  componentWillLoad() {\n    this.read();\n  }\n\n  private read = () => {\n    const slotted = (name: string) =>\n      Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);\n\n    this.hasMetadata = slotted('metadata');\n    this.hasActions = slotted('actions');\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"content\" part=\"content\">\n          <slot name=\"eyebrow\" />\n          <h2 class=\"heading\" part=\"heading\">\n            <slot />\n          </h2>\n          <slot name=\"description\" />\n          <div class={{ metadata: true, empty: !this.hasMetadata }} part=\"metadata\">\n            <slot name=\"metadata\" onSlotchange={this.read} />\n          </div>\n        </div>\n\n        <div class={{ actions: true, empty: !this.hasActions }} part=\"actions\">\n          <slot name=\"actions\" onSlotchange={this.read} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}