@pitchfork-ui/elements 0.0.0-stage → 0.2.1

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

@@ -0,0 +1,181 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+import { o as observeAnchoredPosition, p as placePopover } from './place-popover-CC7AyfOt.js';
+import { K as Keys } from './keys-g4FlTDZx.js';
+import { r as resolveListMove } from './navigation-CAz7-p8y.js';
+import { s as syncRovingTabIndex, r as resolveRovingKey } from './roving-BzRAGyFO.js';
+
+const pfDropdownCss = () => `:host{display:inline-flex}:host([hidden]){display:none}:host{--pf-menu-text:var(--pf-dropdown-text);--pf-menu-text-muted:var(--pf-dropdown-text-muted);--pf-menu-text-danger:var(--pf-dropdown-text-danger);--pf-menu-item-active-bg:var(--pf-dropdown-surface-subtle, var(--pf-surface-subtle));--pf-menu-separator:var(--pf-dropdown-surface-border, var(--pf-surface-border))}.menu{inset:auto;margin:0;background:var(--pf-dropdown-surface-bg, var(--pf-surface-bg));border:1px solid var(--pf-dropdown-surface-border, var(--pf-surface-border));border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);max-height:min(60vh, 420px);overflow:auto;padding:var(--space-1)}.menu:popover-open{animation:pf-dropdown-in var(--duration-fast) var(--easing-decelerate)}@keyframes pf-dropdown-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.menu:popover-open{animation:none}}`;
+
+const PfDropdown = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pfOpenChange = createEvent(this, "pfOpenChange");
+        this.pfSelect = createEvent(this, "pfSelect");
+    }
+    get el() { return getElement(this); }
+    /** Whether the menu is showing. Reflected so the stylesheet can select on it. */
+    open = false;
+    /** Which edge of the trigger the menu lines up with. */
+    align = 'start';
+    /** Accessible name for the menu. */
+    label = 'Actions';
+    /** Prevent opening. Reflected so the stylesheet can select on it. */
+    disabled = false;
+    /** Fires whenever the menu opens or closes, whoever caused it. */
+    pfOpenChange;
+    /** Fires with the chosen item's value. The menu closes itself afterwards. */
+    pfSelect;
+    stopObserving;
+    componentDidLoad() {
+        this.syncTrigger();
+        if (this.open)
+            this.showMenu();
+    }
+    disconnectedCallback() {
+        this.stopObserving?.();
+    }
+    /** Opens the menu. */
+    async show() {
+        if (!this.disabled)
+            this.open = true;
+    }
+    /** Closes the menu. */
+    async hide() {
+        this.open = false;
+    }
+    /** See pf-popover: the watch is the one place every path passes through. */
+    syncOpen(next, previous) {
+        if (next)
+            this.showMenu();
+        else
+            this.hideMenu();
+        this.syncTrigger();
+        if (next !== previous)
+            this.pfOpenChange.emit({ open: next });
+    }
+    get panel() {
+        return this.el.shadowRoot?.querySelector('[part="menu"]') ?? null;
+    }
+    get trigger() {
+        return this.el.firstElementChild;
+    }
+    /** The actionable items, in source order. Separators are not items. */
+    get items() {
+        return Array.from(this.el.querySelectorAll('pf-menu-item'));
+    }
+    get enabledItems() {
+        return this.items.filter((item) => !item.hasAttribute('disabled'));
+    }
+    /**
+     * `aria-controls` is absent on purpose: an IDREF does not cross a shadow
+     * boundary, so pointing it at the panel would dangle. `aria-haspopup` and
+     * `aria-expanded` carry what is announced.
+     */
+    syncTrigger() {
+        const trigger = this.trigger;
+        if (!trigger)
+            return;
+        trigger.setAttribute('aria-haspopup', 'menu');
+        trigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+    }
+    showMenu() {
+        const panel = this.panel;
+        if (this.disabled || !panel || panel.matches(':popover-open'))
+            return;
+        panel.showPopover();
+        this.stopObserving?.();
+        this.stopObserving = observeAnchoredPosition({
+            getAnchor: () => this.trigger,
+            getFloating: () => panel,
+            align: this.align,
+            matchAnchorWidth: false,
+            minWidth: 200,
+            flip: true,
+            onChange: ({ left, top, minWidth }) => {
+                placePopover(panel, left, top);
+                if (minWidth !== undefined)
+                    panel.style.minWidth = `${minWidth}px`;
+            },
+        });
+        // The ARIA menu pattern puts focus on the first item, not on the menu.
+        const first = this.enabledItems[0];
+        syncRovingTabIndex(this.enabledItems, first);
+        first?.focus();
+    }
+    hideMenu() {
+        this.stopObserving?.();
+        this.stopObserving = undefined;
+        const panel = this.panel;
+        if (panel?.matches(':popover-open'))
+            panel.hidePopover();
+    }
+    handleClick(event) {
+        const trigger = this.trigger;
+        if (!trigger || !event.composedPath().includes(trigger))
+            return;
+        if (this.disabled)
+            return;
+        this.open = !this.open;
+    }
+    /**
+     * An item asked to be acted on. The menu reports it and closes, which is
+     * what makes `pf-menu-item` reusable: it knows nothing about its container.
+     */
+    handleMenuSelect(event) {
+        event.stopPropagation();
+        this.pfSelect.emit({ value: event.detail.value });
+        this.open = false;
+        this.trigger?.focus();
+    }
+    handleKeyDown(event) {
+        if (event.defaultPrevented)
+            return;
+        // Down on a closed trigger opens the menu, as a menu button should.
+        if (!this.open) {
+            if (event.key === Keys.ArrowDown && !this.disabled) {
+                event.preventDefault();
+                this.open = true;
+            }
+            return;
+        }
+        if (event.key === Keys.Escape) {
+            event.stopPropagation();
+            this.open = false;
+            this.trigger?.focus();
+            return;
+        }
+        // A menu is a column, so navigation is always the vertical axis.
+        const action = resolveRovingKey(event.key, 'vertical');
+        if (!action)
+            return;
+        const items = this.enabledItems;
+        if (items.length === 0)
+            return;
+        const currentIndex = items.indexOf(document.activeElement);
+        const nextIndex = resolveListMove(action, items.map((_, index) => index), currentIndex);
+        if (nextIndex < 0)
+            return;
+        event.preventDefault();
+        syncRovingTabIndex(items, items[nextIndex]);
+        items[nextIndex].focus();
+    }
+    onToggle = (event) => {
+        const next = event.newState === 'open';
+        if (next !== this.open)
+            this.open = next;
+    };
+    render() {
+        return (h(Host, { key: '358568ed6a8634244c328770ab1902b21fc640f8' }, h("slot", { key: '50cc5ffa9d4846cab0014e2b93d2e02a3464d618', onSlotchange: () => this.syncTrigger() }), h("div", { key: 'ad5b534c5e7dc3d506417e617b9c82d4db6c430a', class: "menu", part: "menu", popover: "auto", role: "menu", "aria-label": this.label, onToggle: this.onToggle }, h("slot", { key: 'e4a3682b14ac2c4fce0aee14b31100a2af8ab548', name: "menu" }))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "syncOpen": 0
+            }]
+    }; }
+};
+PfDropdown.style = pfDropdownCss();
+
+export { PfDropdown as pf_dropdown };
+//# sourceMappingURL=pf-dropdown.entry.js.map
+
+//# sourceMappingURL=pf-dropdown.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-dropdown.entry.js","sources":["src/components/pf-dropdown/pf-dropdown.css?tag=pf-dropdown&encapsulation=shadow","src/components/pf-dropdown/pf-dropdown.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * The generic set pf-menu-item and pf-menu-separator read, mapped to this\n * menu's own alias family. They inherit through the shadow boundary, so a\n * slotted item picks these up without knowing which menu it is in.\n */\n:host {\n  --pf-menu-text: var(--pf-dropdown-text);\n  --pf-menu-text-muted: var(--pf-dropdown-text-muted);\n  --pf-menu-text-danger: var(--pf-dropdown-text-danger);\n  --pf-menu-item-active-bg: var(--pf-dropdown-surface-subtle, var(--pf-surface-subtle));\n  --pf-menu-separator: var(--pf-dropdown-surface-border, var(--pf-surface-border));\n}\n\n/*\n * `inset: auto` and `margin: 0` are essential, not tidying -- see\n * `src/place-popover.ts`, which sets the same two inline and explains the\n * measurement. They are declared in both places deliberately: here so the\n * cascade carries them for the whole life of the panel, and inline so a panel\n * is still positioned where this stylesheet has not been applied.\n */\n.menu {\n  inset: auto;\n  margin: 0;\n  background: var(--pf-dropdown-surface-bg, var(--pf-surface-bg));\n  border: 1px solid var(--pf-dropdown-surface-border, var(--pf-surface-border));\n  border-radius: var(--radius-md);\n  box-shadow: var(--pf-elevation-popover-shadow);\n  max-height: min(60vh, 420px);\n  overflow: auto;\n  padding: var(--space-1);\n}\n\n.menu:popover-open {\n  animation: pf-dropdown-in var(--duration-fast) var(--easing-decelerate);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-dropdown-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .menu:popover-open {\n    animation: none;\n  }\n}\n","import {\n  Keys,\n  observeAnchoredPosition,\n  resolveListMove,\n  resolveRovingKey,\n  syncRovingTabIndex,\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  Watch,\n} from '@stencil/core';\n\nimport { placePopover } from '../../place-popover';\n\n/**\n * A menu of actions, anchored to a trigger.\n *\n * `popover=\"auto\"`, so light-dismiss and Escape are the browser's, as in\n * `pf-popover`. The keyboard pattern is the ARIA menu one and reuses core's\n * roving module — its third consumer, after `pf-toolbar` and\n * `pf-radio-group` — because the items are custom elements rather than native\n * controls and have to be queried by tag.\n *\n * @slot - the trigger.\n * @slot menu - `pf-menu-item` and `pf-menu-separator` children.\n * @part menu - the floating menu panel.\n */\n@Component({\n  tag: 'pf-dropdown',\n  styleUrl: 'pf-dropdown.css',\n  shadow: true,\n})\nexport class PfDropdown {\n  @Element() el!: HTMLElement;\n\n  /** Whether the menu is showing. Reflected so the stylesheet can select on it. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Which edge of the trigger the menu lines up with. */\n  @Prop() align: 'start' | 'end' = 'start';\n\n  /** Accessible name for the menu. */\n  @Prop() label = 'Actions';\n\n  /** Prevent opening. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires whenever the menu opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** Fires with the chosen item's value. The menu closes itself afterwards. */\n  @Event() pfSelect!: EventEmitter<{ value: string }>;\n\n  private stopObserving?: () => void;\n\n  componentDidLoad() {\n    this.syncTrigger();\n    if (this.open) this.showMenu();\n  }\n\n  disconnectedCallback() {\n    this.stopObserving?.();\n  }\n\n  /** Opens the menu. */\n  @Method()\n  async show(): Promise<void> {\n    if (!this.disabled) this.open = true;\n  }\n\n  /** Closes the menu. */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  /** See pf-popover: the watch is the one place every path passes through. */\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showMenu();\n    else this.hideMenu();\n    this.syncTrigger();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  private get panel() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"menu\"]') ?? null;\n  }\n\n  private get trigger() {\n    return this.el.firstElementChild as HTMLElement | null;\n  }\n\n  /** The actionable items, in source order. Separators are not items. */\n  private get items(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-menu-item'));\n  }\n\n  private get enabledItems(): HTMLElement[] {\n    return this.items.filter((item) => !item.hasAttribute('disabled'));\n  }\n\n  /**\n   * `aria-controls` is absent on purpose: an IDREF does not cross a shadow\n   * boundary, so pointing it at the panel would dangle. `aria-haspopup` and\n   * `aria-expanded` carry what is announced.\n   */\n  private syncTrigger() {\n    const trigger = this.trigger;\n    if (!trigger) return;\n    trigger.setAttribute('aria-haspopup', 'menu');\n    trigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n  }\n\n  private showMenu() {\n    const panel = this.panel;\n    if (this.disabled || !panel || panel.matches(':popover-open')) return;\n\n    panel.showPopover();\n    this.stopObserving?.();\n    this.stopObserving = observeAnchoredPosition({\n      getAnchor: () => this.trigger,\n      getFloating: () => panel,\n      align: this.align,\n      matchAnchorWidth: false,\n      minWidth: 200,\n      flip: true,\n      onChange: ({ left, top, minWidth }) => {\n        placePopover(panel, left, top);\n        if (minWidth !== undefined) panel.style.minWidth = `${minWidth}px`;\n      },\n    });\n\n    // The ARIA menu pattern puts focus on the first item, not on the menu.\n    const first = this.enabledItems[0];\n    syncRovingTabIndex(this.enabledItems, first);\n    first?.focus();\n  }\n\n  private hideMenu() {\n    this.stopObserving?.();\n    this.stopObserving = undefined;\n    const panel = this.panel;\n    if (panel?.matches(':popover-open')) panel.hidePopover();\n  }\n\n  @Listen('click')\n  handleClick(event: MouseEvent) {\n    const trigger = this.trigger;\n    if (!trigger || !event.composedPath().includes(trigger)) return;\n    if (this.disabled) return;\n    this.open = !this.open;\n  }\n\n  /**\n   * An item asked to be acted on. The menu reports it and closes, which is\n   * what makes `pf-menu-item` reusable: it knows nothing about its container.\n   */\n  @Listen('pfMenuSelect')\n  handleMenuSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    this.pfSelect.emit({ value: event.detail.value });\n    this.open = false;\n    this.trigger?.focus();\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.defaultPrevented) return;\n\n    // Down on a closed trigger opens the menu, as a menu button should.\n    if (!this.open) {\n      if (event.key === Keys.ArrowDown && !this.disabled) {\n        event.preventDefault();\n        this.open = true;\n      }\n      return;\n    }\n\n    if (event.key === Keys.Escape) {\n      event.stopPropagation();\n      this.open = false;\n      this.trigger?.focus();\n      return;\n    }\n\n    // A menu is a column, so navigation is always the vertical axis.\n    const action = resolveRovingKey(event.key, 'vertical');\n    if (!action) return;\n\n    const items = this.enabledItems;\n    if (items.length === 0) return;\n\n    const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n    const nextIndex = resolveListMove(\n      action,\n      items.map((_, index) => index),\n      currentIndex,\n    );\n    if (nextIndex < 0) return;\n\n    event.preventDefault();\n    syncRovingTabIndex(items, items[nextIndex]);\n    items[nextIndex].focus();\n  }\n\n  private onToggle = (event: Event) => {\n    const next = (event as ToggleEvent).newState === 'open';\n    if (next !== this.open) this.open = next;\n  };\n\n  render() {\n    return (\n      <Host>\n        <slot onSlotchange={() => this.syncTrigger()} />\n        <div\n          class=\"menu\"\n          part=\"menu\"\n          popover=\"auto\"\n          role=\"menu\"\n          aria-label={this.label}\n          onToggle={this.onToggle}\n        >\n          <slot name=\"menu\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/pf-empty-state.entry.js

@@ -0,0 +1,53 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+
+const pfEmptyStateCss = () => `:host{align-items:center;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-8);text-align:center}:host([hidden]){display:none}:host([size='sm']){gap:var(--space-2);padding:var(--space-4)}:host([size='lg']){gap:var(--space-4);padding:var(--space-10)}.icon.empty,.action.empty{display:none}.icon{color:var(--pf-empty-state-icon);display:inline-flex;font-size:var(--font-size-3xl);line-height:1;margin-bottom:var(--space-1)}:host([size='sm']) .icon{font-size:var(--font-size-xl);margin-bottom:0}:host([size='lg']) .icon{font-size:var(--font-size-5xl);margin-bottom:var(--space-2)}.heading{color:var(--pf-empty-state-text);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);line-height:1.3;margin:0}:host([size='sm']) .heading{font-size:var(--font-size-sm)}:host([size='lg']) .heading{font-size:var(--font-size-xl)}slot[name='description']::slotted(*){color:var(--pf-empty-state-text-muted);display:block;font-size:var(--font-size-sm);line-height:1.5;margin:0;max-width:40ch}:host([size='lg']) slot[name='description']::slotted(*){font-size:var(--font-size-md);max-width:48ch}.action{align-items:center;display:inline-flex;gap:var(--space-2);margin-top:var(--space-1)}`;
+
+const PfEmptyState = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** Padding and type scale. Reflected so the stylesheet can select on it. */
+    size = 'md';
+    /** An icon name from the same registry as `pf-icon`. */
+    icon;
+    /**
+     * Whether anything is slotted into the `icon` and `action` slots, which
+     * decides whether their boxes are drawn at all.
+     *
+     * Asked in JS, because a wrapper around a slot cannot be collapsed from
+     * CSS: `:not(:has(*))` never matches, since the `<slot>` is itself a child.
+     * The description needs no box of its own, so it is styled through
+     * `::slotted()` and collapses on its own — these two carry layout their
+     * content cannot.
+     */
+    hasIcon = false;
+    hasAction = false;
+    /**
+     * Read from the light DOM so first paint is right: the mock DOM never fires
+     * `slotchange`, and a real one fires it after the first render.
+     */
+    componentWillLoad() {
+        this.read();
+    }
+    read = () => {
+        const slotted = (name) => Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);
+        this.hasIcon = slotted('icon');
+        this.hasAction = slotted('action');
+    };
+    render() {
+        /*
+         * Both wrappers stay in the tree and are hidden when empty, rather than
+         * being left out: a slot that is not rendered never fires `slotchange`, so
+         * content added later would stay invisible for good.
+         */
+        const showIcon = this.hasIcon || Boolean(this.icon);
+        return (h(Host, { key: '617129c001ebd91e05ed9c4e9d6977429edb3c9d' }, h("span", { key: '0f560b88267604b2a5b8c8cf6fcc6a3f2d7e5c68', class: { icon: true, empty: !showIcon }, part: "icon", "aria-hidden": "true" }, this.icon && !this.hasIcon && h("pf-icon", { key: '57033cbb4f7cb1a9a4b4941f572b22e1f1108190', name: this.icon }), h("slot", { key: '2e224aa7c0c9dacef8924e53b4de76b2b5f427d9', name: "icon", onSlotchange: this.read })), h("p", { key: 'b9b110143eb28dde873041d3cba58c3be6b92f3a', class: "heading", part: "heading" }, h("slot", { key: '976168fccdb51ad83df26034c0ea4f3de3b87ed3' })), h("slot", { key: '871107fa5635be28aa95de994cb088d6af1e0cb6', name: "description" }), h("span", { key: '7a6dff80ce76676d059b7ca9406f17fa66fc5149', class: { action: true, empty: !this.hasAction }, part: "action" }, h("slot", { key: '25b97e145e7007b85051e3e587cc8c374a020547', name: "action", onSlotchange: this.read }))));
+    }
+};
+PfEmptyState.style = pfEmptyStateCss();
+
+export { PfEmptyState as pf_empty_state };
+//# sourceMappingURL=pf-empty-state.entry.js.map
+
+//# sourceMappingURL=pf-empty-state.entry.js.map

package/dist/esm/pf-empty-state.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-empty-state.entry.js","sources":["src/components/pf-empty-state/pf-empty-state.css?tag=pf-empty-state&encapsulation=shadow","src/components/pf-empty-state/pf-empty-state.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  padding: var(--space-8);\n  text-align: center;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([size='sm']) {\n  gap: var(--space-2);\n  padding: var(--space-4);\n}\n\n:host([size='lg']) {\n  gap: var(--space-4);\n  padding: var(--space-10);\n}\n\n/*\n * The two wrappers that carry layout are hidden rather than left out when\n * there is nothing in them, because a slot that is not rendered never fires\n * `slotchange` -- an icon or an action added later would stay invisible.\n *\n * Two classes deep, because both boxes set their own `display` below: `.empty`\n * alone ties on specificity and loses on order.\n */\n.icon.empty,\n.action.empty {\n  display: none;\n}\n\n.icon {\n  color: var(--pf-empty-state-icon);\n  display: inline-flex;\n  font-size: var(--font-size-3xl);\n  line-height: 1;\n  margin-bottom: var(--space-1);\n}\n\n:host([size='sm']) .icon {\n  font-size: var(--font-size-xl);\n  margin-bottom: 0;\n}\n\n:host([size='lg']) .icon {\n  font-size: var(--font-size-5xl);\n  margin-bottom: var(--space-2);\n}\n\n.heading {\n  color: var(--pf-empty-state-text);\n  font-size: var(--font-size-md);\n  font-weight: var(--font-weight-semibold);\n  line-height: 1.3;\n  margin: 0;\n}\n\n:host([size='sm']) .heading {\n  font-size: var(--font-size-sm);\n}\n\n:host([size='lg']) .heading {\n  font-size: var(--font-size-xl);\n}\n\n/*\n * The description needs no box of its own, so it has none: an unassigned slot\n * generates nothing, where an empty wrapper would leave its own gap behind.\n */\nslot[name='description']::slotted(*) {\n  color: var(--pf-empty-state-text-muted);\n  display: block;\n  font-size: var(--font-size-sm);\n  line-height: 1.5;\n  margin: 0;\n  max-width: 40ch;\n}\n\n:host([size='lg']) slot[name='description']::slotted(*) {\n  font-size: var(--font-size-md);\n  max-width: 48ch;\n}\n\n.action {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--space-2);\n  margin-top: var(--space-1);\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nexport type PfEmptyStateSize = 'sm' | 'md' | 'lg';\n\n/**\n * What to show in place of content that is not there: an icon, a heading, a\n * line of explanation and something to do about it.\n *\n * The icon can be a name — `icon=\"folder-open\"`, which renders a `pf-icon` —\n * or anything slotted into the `icon` slot, for an illustration this library\n * does not have. The slot wins where both are given.\n *\n * @slot - the heading.\n * @slot description - a line explaining the emptiness.\n * @slot action - what to do about it, usually a button.\n * @slot icon - an icon or illustration, in place of the `icon` name.\n * @part icon - the icon's box.\n * @part heading - the heading's box.\n * @part action - the box holding the action slot.\n */\n@Component({\n  tag: 'pf-empty-state',\n  styleUrl: 'pf-empty-state.css',\n  shadow: true,\n})\nexport class PfEmptyState {\n  @Element() el!: HTMLElement;\n\n  /** Padding and type scale. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) size: PfEmptyStateSize = 'md';\n\n  /** An icon name from the same registry as `pf-icon`. */\n  @Prop() icon?: string;\n\n  /**\n   * Whether anything is slotted into the `icon` and `action` slots, which\n   * decides whether their boxes are drawn at all.\n   *\n   * Asked in JS, because a wrapper around a slot cannot be collapsed from\n   * CSS: `:not(:has(*))` never matches, since the `<slot>` is itself a child.\n   * The description needs no box of its own, so it is styled through\n   * `::slotted()` and collapses on its own — these two carry layout their\n   * content cannot.\n   */\n  @State() hasIcon = false;\n  @State() hasAction = false;\n\n  /**\n   * Read from the light DOM so first paint is right: the mock DOM never fires\n   * `slotchange`, and a real one fires it after the first render.\n   */\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.hasIcon = slotted('icon');\n    this.hasAction = slotted('action');\n  };\n\n  render() {\n    /*\n     * Both wrappers stay in the tree and are hidden when empty, rather than\n     * being left out: a slot that is not rendered never fires `slotchange`, so\n     * content added later would stay invisible for good.\n     */\n    const showIcon = this.hasIcon || Boolean(this.icon);\n\n    return (\n      <Host>\n        <span class={{ icon: true, empty: !showIcon }} part=\"icon\" aria-hidden=\"true\">\n          {/* The slot wins: a consumer who has slotted an illustration does\n              not also want the named icon beside it. */}\n          {this.icon && !this.hasIcon && <pf-icon name={this.icon}></pf-icon>}\n          <slot name=\"icon\" onSlotchange={this.read} />\n        </span>\n\n        <p class=\"heading\" part=\"heading\">\n          <slot />\n        </p>\n\n        <slot name=\"description\" />\n\n        <span class={{ action: true, empty: !this.hasAction }} part=\"action\">\n          <slot name=\"action\" onSlotchange={this.read} />\n        </span>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,srCAAsrC,CAAC;;MCyBzsC,YAAY,GAAA,MAAA;;;;;;IAIE,IAAI,GAAqB,IAAI;;AAG9C,IAAA,IAAI;AAEZ;;;;;;;;;AASG;IACM,OAAO,GAAG,KAAK;IACf,SAAS,GAAG,KAAK;AAE1B;;;AAGG;IACH,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,EAAE;;IAGL,IAAI,GAAG,MAAK;AAClB,QAAA,MAAM,OAAO,GAAG,CAAC,IAAY,KAC3B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;AAEnF,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,QAAQ,CAAC;AACpC,KAAC;IAED,MAAM,GAAA;AACJ;;;;AAIG;AACH,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;AAEnD,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAC,MAAM,iBAAa,MAAM,EAAA,EAG1E,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CAAY,EACnE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAC,YAAY,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI,CACxC,EAEP,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EAC/B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACN,EAEJ,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAG,EAE3B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,IAAI,EAAC,QAAQ,EAAA,EAClE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI,CAC1C,CACF;;;;;;;"}

package/dist/esm/pf-file-uploader.entry.js

@@ -0,0 +1,310 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+import { c as composeDescribedBy } from './aria-DfpCerXM.js';
+import { a as applyControlValidity } from './form-validity-Cr6IXrUk.js';
+
+//#region src/files.ts
+/**
+* A size in the units a person reads.
+*
+* Binary steps with decimal names, which is what every file manager does.
+* `GB` is included because stopping at `MB` reads a 3 GB upload as
+* "3072.0 MB", and the whole point of the function is to be read.
+*/
+function formatFileSize(bytes) {
+	if (!Number.isFinite(bytes) || bytes < 0) return "0 B";
+	if (bytes < 1024) return `${Math.round(bytes)} B`;
+	if (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(1)} KB`;
+	if (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
+	return `${(bytes / 1024 ** 3).toFixed(1)} GB`;
+}
+/**
+* What makes two selections the same file.
+*
+* Name, size and modification time together, because a browser gives no file
+* identity of its own: picking the same file twice produces two distinct
+* `File` objects, and a consumer who adds `report.pdf` from two folders is
+* adding two files. `lastModified` is optional only so a plain object can
+* stand in for a `File` in a test.
+*/
+function fileKey(file) {
+	return `${file.name}-${file.size}-${file.lastModified ?? 0}`;
+}
+/**
+* The files a new selection leaves you holding.
+*
+* Appends for a multiple picker and replaces for a single one, then drops
+* duplicates by `fileKey` keeping the **first** of each — so re-picking a
+* file already held is a no-op rather than a reordering.
+*
+* Deliberately does not truncate to `maxFiles`. The React `FileUploader`
+* truncated first and validated afterwards, which made its "You can upload up
+* to N files" message unreachable: the list was already short enough by the
+* time it was checked, so the extra files vanished with nothing said. Merging
+* and validating are separate so the caller can refuse a selection instead of
+* quietly losing part of it.
+*/
+function mergeFileSelection(existing, incoming, { multiple = true } = {}) {
+	if (!multiple) return incoming.slice(0, 1);
+	const byKey = /* @__PURE__ */ new Map();
+	for (const file of [...existing, ...incoming]) {
+		const key = fileKey(file);
+		if (!byKey.has(key)) byKey.set(key, file);
+	}
+	return [...byKey.values()];
+}
+/**
+* Whether a file is one of the kinds an `accept` list allows.
+*
+* The three forms a file input takes, and nothing else: an extension
+* (`.pdf`), a type (`image/png`) and a wildcard type (`image/*`). No list at
+* all allows everything.
+*
+* It exists because `accept` only filters the file *picker*. A **dropped**
+* file is never filtered by anything, so a dropzone that trusts the attribute
+* accepts whatever is dragged onto it — which is what both layers did.
+*/
+function fileMatchesAccept(file, accept) {
+	const tokens = (accept ?? "").split(",").map((token) => token.trim().toLowerCase()).filter(Boolean);
+	if (tokens.length === 0) return true;
+	const name = file.name.toLowerCase();
+	const type = (file.type ?? "").toLowerCase();
+	return tokens.some((token) => {
+		if (token.startsWith(".")) return name.endsWith(token);
+		if (token.endsWith("/*")) return type.startsWith(`${token.slice(0, -1)}`);
+		return type === token;
+	});
+}
+/**
+* What is wrong with a selection, as a sentence to show, or `null`.
+*
+* Each check names the offending file, because "one of these is wrong" is not
+* something a person can act on, and the kind is reported before the size
+* because it is the more specific complaint. `maxFileSize` and `maxFiles` are
+* honoured whenever they are finite and non-negative — the React version
+* tested them for truthiness, so a limit of `0`, which is a way of saying
+* "nothing may be uploaded", silently allowed everything.
+*/
+function validateFileSelection(files, { maxFiles, maxFileSize, accept } = {}) {
+	if (accept) {
+		const wrongKind = files.find((file) => !fileMatchesAccept(file, accept));
+		if (wrongKind) return `"${wrongKind.name}" is not an accepted file type.`;
+	}
+	if (typeof maxFileSize === "number" && maxFileSize >= 0) {
+		const oversized = files.find((file) => file.size > maxFileSize);
+		if (oversized) return `"${oversized.name}" exceeds the ${formatFileSize(maxFileSize)} size limit.`;
+	}
+	if (typeof maxFiles === "number" && maxFiles >= 0 && files.length > maxFiles) return `You can upload up to ${maxFiles} file${maxFiles === 1 ? "" : "s"}.`;
+	return null;
+}
+/**
+* The hint under a dropzone: what is accepted, how big, how many.
+*
+* In core rather than in each layer because it is the one place the three
+* limits are described to a person, and two layers describing them
+* differently is worse than either wording.
+*/
+function fileLimitsHint(accept, { maxFiles, maxFileSize } = {}) {
+	const parts = [];
+	if (accept) parts.push(`Accepted: ${accept}`);
+	if (typeof maxFileSize === "number" && maxFileSize >= 0) parts.push(`Max size: ${formatFileSize(maxFileSize)}`);
+	if (typeof maxFiles === "number" && maxFiles >= 0) parts.push(`Max files: ${maxFiles}`);
+	return parts.join(" | ");
+}
+
+const pfFileUploaderCss = () => `: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)}.required{color:var(--pf-field-required);margin-inline-start:var(--space-1)}.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}.input{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.dropzone{align-items:center;background:var(--pf-file-uploader-bg);border:1px dashed var(--pf-file-uploader-border-strong);border-radius:var(--radius-md);color:var(--pf-file-uploader-text);cursor:pointer;display:grid;font:inherit;gap:var(--space-1);justify-items:center;padding:var(--space-5) var(--space-4);text-align:center;transition:all var(--pf-transition-fast);width:100%}.dropzone:hover:not(:disabled){background:var(--pf-file-uploader-bg-subtle)}.dropzone:focus-visible{box-shadow:var(--pf-file-uploader-focus-ring, var(--pf-focus-ring));outline:none}.dropzone--active{background:var(--pf-file-uploader-bg-subtle);border-color:var(--pf-file-uploader-active-border)}.dropzone--invalid{border-color:var(--pf-file-uploader-invalid-border)}.dropzone:disabled{cursor:not-allowed;opacity:var(--pf-file-uploader-disabled-opacity, 0.5)}.icon{color:var(--pf-file-uploader-text-muted);font-size:var(--font-size-xl)}.title{font-weight:var(--font-weight-semibold)}.subtitle,.hint{color:var(--pf-file-uploader-text-muted);font-size:var(--font-size-sm)}.hint{font-size:var(--font-size-xs)}.list{display:grid;gap:var(--space-1);list-style:none;margin:0;padding:0}.file{align-items:center;background:var(--pf-file-uploader-bg-subtle);border:1px solid var(--pf-file-uploader-border);border-radius:var(--radius-sm);display:flex;gap:var(--space-2);justify-content:space-between;padding:var(--space-2) var(--space-3)}.meta{display:flex;gap:var(--space-2);min-width:0}.file-name{color:var(--pf-file-uploader-text);font-size:var(--font-size-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{color:var(--pf-file-uploader-text-muted);flex:0 0 auto;font-size:var(--font-size-xs)}.remove{align-items:center;background:transparent;border:0;border-radius:var(--radius-sm);color:var(--pf-file-uploader-text-muted);cursor:pointer;display:inline-flex;flex:0 0 auto;justify-content:center;padding:var(--space-1)}.remove:hover:not(:disabled){color:var(--pf-file-uploader-text)}.remove:focus-visible{box-shadow:var(--pf-file-uploader-focus-ring, var(--pf-focus-ring));outline:none}.remove:disabled{cursor:not-allowed;opacity:var(--pf-file-uploader-disabled-opacity, 0.5)}@media (prefers-reduced-motion: reduce){.dropzone{transition:none}}`;
+
+const PfFileUploader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pfChange = createEvent(this, "pfChange");
+        this.pfReject = createEvent(this, "pfReject");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    internals;
+    get el() { return getElement(this); }
+    /**
+     * Submitted under this name.
+     *
+     * Reflected, because a form-associated custom element takes its submission
+     * name from the `name` content attribute rather than from this property.
+     */
+    name;
+    /**
+     * The files chosen. A property only — there is no attribute that could
+     * carry a `File`.
+     */
+    files = [];
+    /** The `accept` list, in the form an `<input type="file">` takes. */
+    accept;
+    multiple = true;
+    /** The most files that may be held at once. */
+    maxFiles;
+    /** The largest any one file may be, in bytes. */
+    maxFileSize;
+    label;
+    description;
+    /** Error message from the consumer. Its presence marks the control invalid. */
+    error;
+    required = false;
+    disabled = false;
+    /** Fires when the files held change, however they changed. */
+    pfChange;
+    /** Fires when a selection is refused, with the reason shown to the person. */
+    pfReject;
+    /** The uploader's own complaint about the last selection. */
+    rejection;
+    /**
+     * How deep the drag is.
+     *
+     * A counter rather than a boolean: `dragenter` and `dragleave` both bubble
+     * from the dropzone's own children, so moving the pointer from the icon to
+     * the title fires a leave and then an enter and a boolean flickers off. The
+     * React `FileUploader` has that flicker.
+     */
+    dragDepth = 0;
+    /** What a form reset restores, captured before `files` can be replaced. */
+    initialFiles = [];
+    input;
+    componentWillLoad() {
+        this.initialFiles = [...(this.files ?? [])];
+        this.syncFormState();
+    }
+    syncFormState() {
+        const held = this.files ?? [];
+        /*
+         * A `FormData` rather than a string, because one control here submits one
+         * entry per file — which is how a native multi-file input submits, and
+         * the only shape a server handling the form can use. `setFormValue`
+         * ignores the element's own `name` attribute when handed a `FormData`, so
+         * the key has to be built into it.
+         */
+        if (this.name && held.length > 0) {
+            const data = new FormData();
+            for (const file of held)
+                data.append(this.name, file);
+            this.internals.setFormValue(data);
+        }
+        else {
+            // `null`, not an empty string: a file input with nothing chosen is
+            // absent from the submission entirely.
+            this.internals.setFormValue(null);
+        }
+        applyControlValidity(this.internals, held.length > 0, this.required, this.error ?? this.rejection);
+    }
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    async getValidationMessage() {
+        return this.internals.validationMessage;
+    }
+    /** Opens the file picker, as clicking the dropzone does. */
+    async open() {
+        if (!this.disabled)
+            this.input?.click();
+    }
+    /**
+     * A reset restores the files the control started with, not an empty list —
+     * the rule a native `<input value="initial">` follows.
+     */
+    formResetCallback() {
+        this.files = [...this.initialFiles];
+        this.rejection = undefined;
+        this.dragDepth = 0;
+    }
+    get limits() {
+        return { maxFiles: this.maxFiles, maxFileSize: this.maxFileSize, accept: this.accept };
+    }
+    addFiles(selected) {
+        if (!selected || this.disabled)
+            return;
+        const next = mergeFileSelection(this.files ?? [], Array.from(selected), {
+            multiple: this.multiple,
+        });
+        /*
+         * `accept` is checked here as well as set on the input, because the
+         * attribute filters the *picker* and nothing else: a dropped file passes
+         * no filter at all.
+         */
+        const rejection = validateFileSelection(next, this.limits);
+        /*
+         * The input is cleared whichever way this goes. A file input fires no
+         * `change` for an identical selection, so a rejected value left in place
+         * means picking the same file again does nothing and the message stands
+         * with no way to retry.
+         */
+        if (this.input)
+            this.input.value = '';
+        if (rejection) {
+            this.rejection = rejection;
+            this.pfReject.emit({ message: rejection });
+            return;
+        }
+        this.rejection = undefined;
+        this.files = next;
+        this.pfChange.emit({ files: next });
+    }
+    removeAt(index) {
+        if (this.disabled)
+            return;
+        const next = (this.files ?? []).filter((_, position) => position !== index);
+        this.rejection = undefined;
+        this.files = next;
+        this.pfChange.emit({ files: next });
+    }
+    onDragEnter = (event) => {
+        event.preventDefault();
+        if (this.disabled)
+            return;
+        this.dragDepth += 1;
+    };
+    onDragLeave = (event) => {
+        event.preventDefault();
+        this.dragDepth = Math.max(0, this.dragDepth - 1);
+    };
+    onDrop = (event) => {
+        event.preventDefault();
+        this.dragDepth = 0;
+        this.addFiles(event.dataTransfer?.files ?? null);
+    };
+    render() {
+        const held = this.files ?? [];
+        const message = this.error ?? this.rejection;
+        const hint = fileLimitsHint(this.accept, this.limits);
+        const describedBy = composeDescribedBy(this.description && 'description', message && 'error', hint && 'hint');
+        return (h(Host, { key: 'b3d295cdda9ec1becb407406f87514d1551f06d5' }, h("div", { key: 'e1617a342f4ea80e6ed55b2dca454d586c36df29', class: "field", part: "field" }, this.label && (h("label", { key: '8f625e01a182d67267d43aad08f1a3a13d5ec163', class: "label", part: "label", htmlFor: "dropzone" }, this.label, this.required && (h("span", { key: '26240be666f6ea5501b72fefdf90cf88c8536a3d', class: "required", "aria-hidden": "true" }, "*")))), h("input", { key: '2cbb754c8cefebfd7330bc41bd364c4e7a56d02f', ref: (node) => (this.input = node), id: "input", class: "input", type: "file", accept: this.accept, multiple: this.multiple, disabled: this.disabled, tabindex: -1, "aria-hidden": "true", onChange: (event) => this.addFiles(event.target.files) }), h("button", { key: '7aeb521a180397169ed14973981d9c970d87cd5e', id: "dropzone", type: "button", class: {
+                dropzone: true,
+                'dropzone--active': this.dragDepth > 0,
+                'dropzone--invalid': Boolean(message),
+            }, part: "dropzone", disabled: this.disabled, "aria-invalid": message ? 'true' : null, "aria-describedby": describedBy, onClick: () => this.open(), onDragEnter: this.onDragEnter, onDragOver: (event) => event.preventDefault(), onDragLeave: this.onDragLeave, onDrop: this.onDrop }, h("span", { key: 'b04a52684ff15f27ceba80943d9acfc7ecaa64d4', class: "icon", part: "icon", "aria-hidden": "true" }, h("pf-icon", { key: 'cab1bd987ea9e7390b6694a31183f867e4185124', name: "file-arrow-up" })), h("span", { key: 'fbb198fd16117eef5d844f2c775ab09cc8ccd194', class: "title" }, "Upload files"), h("span", { key: '121e3bb418bca550eed7f94de79c5c01b044a6dd', class: "subtitle" }, "Drag and drop files here, or click to browse."), hint && (h("span", { key: 'd590def1f305c437444dd21caa268a93a1ab8444', class: "hint", id: "hint" }, hint))), held.length > 0 && (h("ul", { key: '3af82b2c94954b4d872b6dd5ddfaa24a1397b01c', class: "list", part: "list", "aria-label": "Selected files" }, held.map((file, index) => (h("li", { class: "file", part: "file", key: fileKey(file) }, h("span", { class: "meta" }, h("span", { class: "file-name" }, file.name), h("span", { class: "file-size" }, formatFileSize(file.size))), h("button", { type: "button", class: "remove", part: "remove", "aria-label": `Remove ${file.name}`, disabled: this.disabled, onClick: () => this.removeAt(index) }, h("pf-icon", { name: "circle-xmark", "aria-hidden": "true" }))))))), this.description && (h("p", { key: '95f9c54b3b9ad2e7e1a6e0cc7242e372b9720218', class: "description", part: "description", id: "description" }, this.description)), message && (h("p", { key: 'e5f1e9164d1e6f03a9c6412b9446f7f03262fc65', class: "error", part: "error", id: "error" }, message)))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "files": [{
+                "syncFormState": 0
+            }],
+        "error": [{
+                "syncFormState": 0
+            }],
+        "required": [{
+                "syncFormState": 0
+            }],
+        "rejection": [{
+                "syncFormState": 0
+            }]
+    }; }
+};
+PfFileUploader.style = pfFileUploaderCss();
+
+export { PfFileUploader as pf_file_uploader };
+//# sourceMappingURL=pf-file-uploader.entry.js.map
+
+//# sourceMappingURL=pf-file-uploader.entry.js.map