@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/cjs/pf-context-menu.cjs.entry.js

@@ -0,0 +1,159 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var placePopover = require('./place-popover-CMqeolzZ.js');
+var keys = require('./keys-S3YTuCcn.js');
+var navigation = require('./navigation-CZce-g58.js');
+var roving = require('./roving-BNDruU3m.js');
+
+const pfContextMenuCss = () => `:host{display:block}:host([hidden]){display:none}:host{--pf-menu-text:var(--pf-contextmenu-text);--pf-menu-text-muted:var(--pf-contextmenu-text-muted);--pf-menu-text-danger:var(--pf-contextmenu-text-danger);--pf-menu-item-active-bg:var(--pf-contextmenu-item-active-bg);--pf-menu-separator:var(--pf-contextmenu-separator)}.menu{inset:auto;margin:0;background:var(--pf-contextmenu-bg);border:1px solid var(--pf-contextmenu-border);border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);max-height:min(60vh, 420px);min-width:180px;overflow:auto;padding:var(--space-1)}.menu:popover-open{animation:pf-context-menu-in var(--duration-fast) var(--easing-decelerate)}@keyframes pf-context-menu-in{from{opacity:0;transform:scale(0.98)}}@media (prefers-reduced-motion: reduce){.menu:popover-open{animation:none}}`;
+
+const PfContextMenu = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfOpenChange = index.createEvent(this, "pfOpenChange");
+        this.pfSelect = index.createEvent(this, "pfSelect");
+    }
+    get el() { return index.getElement(this); }
+    /** Whether the menu is showing. Reflected so the stylesheet can select on it. */
+    open = false;
+    /** Accessible name for the menu. */
+    label = 'Context menu';
+    /**
+     * Let the browser's own context menu through instead. 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;
+    /** Where the menu was asked to appear, in client coordinates. */
+    point = { x: 0, y: 0 };
+    /** See pf-popover: the watch is the one place every path passes through. */
+    syncOpen(next, previous) {
+        if (next)
+            this.showMenu();
+        else
+            this.hideMenu();
+        if (next !== previous)
+            this.pfOpenChange.emit({ open: next });
+    }
+    /** Opens the menu at a point in client coordinates. */
+    async showAt(x, y) {
+        if (this.disabled)
+            return;
+        this.point = { x, y };
+        this.open = true;
+    }
+    /** Closes the menu. */
+    async hide() {
+        this.open = false;
+    }
+    get panel() {
+        return this.el.shadowRoot?.querySelector('[part="menu"]') ?? null;
+    }
+    get items() {
+        return Array.from(this.el.querySelectorAll('pf-menu-item'));
+    }
+    get enabledItems() {
+        return this.items.filter((item) => !item.hasAttribute('disabled'));
+    }
+    showMenu() {
+        const panel = this.panel;
+        if (!panel || panel.matches(':popover-open'))
+            return;
+        panel.showPopover();
+        /*
+         * Measured after showing, because a closed popover has no size and the
+         * clamp needs one. Pinned rather than flipped: the pointer is already
+         * where the user is looking.
+         */
+        const { x, y } = placePopover.clampToViewport(this.point, panel.getBoundingClientRect(), {
+            width: window.innerWidth,
+            height: window.innerHeight,
+        });
+        placePopover.placePopover(panel, x, y);
+        const first = this.enabledItems[0];
+        roving.syncRovingTabIndex(this.enabledItems, first);
+        first?.focus();
+    }
+    hideMenu() {
+        const panel = this.panel;
+        if (panel?.matches(':popover-open'))
+            panel.hidePopover();
+    }
+    handleContextMenu(event) {
+        if (this.disabled || event.defaultPrevented)
+            return;
+        // Only inside the region, not over the menu itself once it is showing.
+        const panel = this.panel;
+        if (panel && event.composedPath().includes(panel))
+            return;
+        event.preventDefault();
+        this.point = { x: event.clientX, y: event.clientY };
+        if (this.open) {
+            // Already showing: move it to the new point rather than ignoring.
+            this.showMenuAtNewPoint();
+            return;
+        }
+        this.open = true;
+    }
+    /** A second right-click moves the open menu, which `showMenu` would skip. */
+    showMenuAtNewPoint() {
+        const panel = this.panel;
+        if (!panel)
+            return;
+        const { x, y } = placePopover.clampToViewport(this.point, panel.getBoundingClientRect(), {
+            width: window.innerWidth,
+            height: window.innerHeight,
+        });
+        placePopover.placePopover(panel, x, y);
+    }
+    handleMenuSelect(event) {
+        event.stopPropagation();
+        this.pfSelect.emit({ value: event.detail.value });
+        this.open = false;
+    }
+    handleKeyDown(event) {
+        if (!this.open || event.defaultPrevented)
+            return;
+        if (event.key === keys.Keys.Escape) {
+            event.stopPropagation();
+            this.open = false;
+            return;
+        }
+        const action = roving.resolveRovingKey(event.key, 'vertical');
+        if (!action)
+            return;
+        const items = this.enabledItems;
+        if (items.length === 0)
+            return;
+        const currentIndex = items.indexOf(document.activeElement);
+        const nextIndex = navigation.resolveListMove(action, items.map((_, index) => index), currentIndex);
+        if (nextIndex < 0)
+            return;
+        event.preventDefault();
+        roving.syncRovingTabIndex(items, items[nextIndex]);
+        items[nextIndex].focus();
+    }
+    onToggle = (event) => {
+        const next = event.newState === 'open';
+        if (next !== this.open)
+            this.open = next;
+    };
+    render() {
+        return (index.h(index.Host, { key: 'b515df27fd68d157ed44b099c35a8e923054a270' }, index.h("slot", { key: 'c406f292f30ab4db1aa9708b11b0f6be8378519f' }), index.h("div", { key: 'dd1838ec80b5702137e15f5e3a65404d83f893e3', class: "menu", part: "menu", popover: "auto", role: "menu", "aria-label": this.label, onToggle: this.onToggle }, index.h("slot", { key: '92fd279e9a59db8042b5e7f9d18df213c3b022fa', name: "menu" }))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "syncOpen": 0
+            }]
+    }; }
+};
+PfContextMenu.style = pfContextMenuCss();
+
+exports.pf_context_menu = PfContextMenu;
+//# sourceMappingURL=pf-context-menu.entry.cjs.js.map
+
+//# sourceMappingURL=pf-context-menu.cjs.entry.js.map

package/dist/cjs/pf-context-menu.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-context-menu.cjs.entry.js","mappings":"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","names":["clampToViewport","placePopover","syncRovingTabIndex","Keys","resolveRovingKey","resolveListMove","h","Host"],"sources":["src/components/pf-context-menu/pf-context-menu.css?tag=pf-context-menu&encapsulation=shadow","src/components/pf-context-menu/pf-context-menu.tsx"],"sourcesContent":[":host {\n  display: block;\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 — see pf-menu-item.css. The same item element is\n * themed by whichever container it is slotted into.\n */\n:host {\n  --pf-menu-text: var(--pf-contextmenu-text);\n  --pf-menu-text-muted: var(--pf-contextmenu-text-muted);\n  --pf-menu-text-danger: var(--pf-contextmenu-text-danger);\n  --pf-menu-item-active-bg: var(--pf-contextmenu-item-active-bg);\n  --pf-menu-separator: var(--pf-contextmenu-separator);\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-contextmenu-bg);\n  border: 1px solid var(--pf-contextmenu-border);\n  border-radius: var(--radius-md);\n  box-shadow: var(--pf-elevation-popover-shadow);\n  max-height: min(60vh, 420px);\n  min-width: 180px;\n  overflow: auto;\n  padding: var(--space-1);\n}\n\n.menu:popover-open {\n  animation: pf-context-menu-in var(--duration-fast) var(--easing-decelerate);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-context-menu-in {\n  from {\n    opacity: 0;\n    transform: scale(0.98);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .menu:popover-open {\n    animation: none;\n  }\n}\n","import {\n  clampToViewport,\n  Keys,\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 opened by right-clicking the region it wraps.\n *\n * Unlike `pf-dropdown` there is no anchor element — the menu opens at the\n * pointer — so it is placed with core's `clampToViewport` rather than the\n * anchoring observer. The same `pf-menu-item` children serve both.\n *\n * @slot - the region that responds to a right-click.\n * @slot menu - `pf-menu-item` and `pf-menu-separator` children.\n * @part menu - the floating menu panel.\n */\n@Component({\n  tag: 'pf-context-menu',\n  styleUrl: 'pf-context-menu.css',\n  shadow: true,\n})\nexport class PfContextMenu {\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  /** Accessible name for the menu. */\n  @Prop() label = 'Context menu';\n\n  /**\n   * Let the browser's own context menu through instead. Reflected so the\n   * stylesheet can select on it.\n   */\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  /** Where the menu was asked to appear, in client coordinates. */\n  private point = { x: 0, y: 0 };\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    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  /** Opens the menu at a point in client coordinates. */\n  @Method()\n  async showAt(x: number, y: number): Promise<void> {\n    if (this.disabled) return;\n    this.point = { x, y };\n    this.open = true;\n  }\n\n  /** Closes the menu. */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  private get panel() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"menu\"]') ?? null;\n  }\n\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  private showMenu() {\n    const panel = this.panel;\n    if (!panel || panel.matches(':popover-open')) return;\n\n    panel.showPopover();\n    /*\n     * Measured after showing, because a closed popover has no size and the\n     * clamp needs one. Pinned rather than flipped: the pointer is already\n     * where the user is looking.\n     */\n    const { x, y } = clampToViewport(this.point, panel.getBoundingClientRect(), {\n      width: window.innerWidth,\n      height: window.innerHeight,\n    });\n    placePopover(panel, x, y);\n\n    const first = this.enabledItems[0];\n    syncRovingTabIndex(this.enabledItems, first);\n    first?.focus();\n  }\n\n  private hideMenu() {\n    const panel = this.panel;\n    if (panel?.matches(':popover-open')) panel.hidePopover();\n  }\n\n  @Listen('contextmenu')\n  handleContextMenu(event: MouseEvent) {\n    if (this.disabled || event.defaultPrevented) return;\n    // Only inside the region, not over the menu itself once it is showing.\n    const panel = this.panel;\n    if (panel && event.composedPath().includes(panel)) return;\n\n    event.preventDefault();\n    this.point = { x: event.clientX, y: event.clientY };\n    if (this.open) {\n      // Already showing: move it to the new point rather than ignoring.\n      this.showMenuAtNewPoint();\n      return;\n    }\n    this.open = true;\n  }\n\n  /** A second right-click moves the open menu, which `showMenu` would skip. */\n  private showMenuAtNewPoint() {\n    const panel = this.panel;\n    if (!panel) return;\n    const { x, y } = clampToViewport(this.point, panel.getBoundingClientRect(), {\n      width: window.innerWidth,\n      height: window.innerHeight,\n    });\n    placePopover(panel, x, y);\n  }\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  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.open || event.defaultPrevented) return;\n\n    if (event.key === Keys.Escape) {\n      event.stopPropagation();\n      this.open = false;\n      return;\n    }\n\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 />\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"],"version":3}

package/dist/cjs/pf-credit-card.cjs.entry.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var text = require('./text-DQvgAqew.js');
+
+const pfCreditCardCss = () => `:host{aspect-ratio:1.586;border:1px solid var(--pf-credit-card-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);color:var(--pf-credit-card-text-color);display:flex;flex-direction:column;gap:var(--space-4);max-width:100%;min-height:200px;padding:var(--space-4);position:relative;width:340px}:host([hidden]){display:none}.glare{background:radial-gradient(circle at 20% 20%, var(--pf-credit-card-glare), transparent 40%);border-radius:inherit;inset:0;pointer-events:none;position:absolute}:host([brand='generic']){background:var(--pf-credit-card-generic-gradient)}:host([brand='visa']){background:var(--pf-credit-card-visa-gradient)}:host([brand='mastercard']){background:var(--pf-credit-card-mastercard-gradient)}:host([brand='amex']){background:var(--pf-credit-card-amex-gradient)}.top-row{align-items:center;display:flex;justify-content:space-between;position:relative;z-index:1}.chip{background:var(--pf-credit-card-chip-gradient);border-radius:4px;display:inline-flex;height:28px;width:38px}.brand,.number,.label,.value{color:inherit}.brand{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:0.08em}.number{font-size:clamp(var(--font-size-lg), 2.6vw, var(--font-size-2xl));font-weight:var(--font-weight-semibold);letter-spacing:0.08em;line-height:1.25;margin:0;position:relative;z-index:1}.meta{display:flex;gap:var(--space-4);position:relative;z-index:1}.field{display:flex;flex-direction:column;gap:var(--space-1)}.label{font-size:var(--font-size-2xs);letter-spacing:0.08em;opacity:0.85;text-transform:uppercase}.value{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}`;
+
+const PfCreditCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Card network. Reflected so the stylesheet can pick the gradient. */
+    brand = 'generic';
+    /** The number to display. Separators in the input are regrouped. */
+    cardNumber = '';
+    /** Name on the card. */
+    cardholderName = '';
+    /** Expiry, displayed as given. */
+    expiry = '';
+    /** Security code. Omit it to leave the field out entirely. */
+    cvc;
+    /**
+     * Hide all but the last four digits, and the CVC with it. Defaults to true,
+     * so the careless case is the safe one. Reflected for the stylesheet.
+     */
+    masked = true;
+    render() {
+        // Both layers go through core, so the same number is grouped identically.
+        const displayNumber = this.masked
+            ? text.maskCardNumber(this.cardNumber)
+            : text.formatCardNumber(this.cardNumber);
+        return (index.h(index.Host, { key: '2e9328d14c8cd6cd61def20a995c1f819fe44a59' }, index.h("div", { key: '32e108a126843f362e308d906d665c7915af3c5e', class: "glare", part: "glare", "aria-hidden": "true" }), index.h("div", { key: '52ec00756d657c30dc12c341897c200200ce66c7', class: "top-row" }, index.h("span", { key: '33e023c6a52cf8a5fffc20e6e251b93a71d83fd5', class: "chip", part: "chip", "aria-hidden": "true" }), index.h("span", { key: '6b838b1a3219311421a7e954456078f7ad03ad31', class: "brand", part: "brand" }, this.brand.toUpperCase())), index.h("p", { key: 'e72eef846f35d8c25c5cf236b75787632a63f984', class: "number", part: "number" }, displayNumber), index.h("div", { key: '29f55616ce82112264d43cd6e1d3a7034afa96f7', class: "meta", part: "meta" }, index.h("div", { key: '5bfc7e7d314ba0519633bcd95662ad3cf61fcd05', class: "field" }, index.h("span", { key: 'c4202038ed986c83aa5fff4e0db8264f4b4dd44f', class: "label", part: "label" }, "Card holder"), index.h("span", { key: '8945817a864dbc9811a768e24c3d9dfba6befca1', class: "value", part: "value" }, this.cardholderName)), index.h("div", { key: '65ae0ac19f77912769156a246382ae5f45c0776b', class: "field" }, index.h("span", { key: '36b7781bcee6a5f62f1f81c22305545441f077ea', class: "label", part: "label" }, "Expires"), index.h("span", { key: 'b433e02c8749a5482b37eefbec420a98b7c53a4d', class: "value", part: "value" }, this.expiry)), this.cvc && (index.h("div", { key: '7f19aabc157aba9999b31c13f65acea7bec0aeaf', class: "field" }, index.h("span", { key: '9d2489d250a8d27cd2ee2f06af10e135b7927036', class: "label", part: "label" }, "CVC"), index.h("span", { key: '85ae31a8929837c3b60840965fe5bb5badb1b96e', class: "value", part: "value" }, this.masked ? '***' : this.cvc))))));
+    }
+};
+PfCreditCard.style = pfCreditCardCss();
+
+exports.pf_credit_card = PfCreditCard;
+//# sourceMappingURL=pf-credit-card.entry.cjs.js.map
+
+//# sourceMappingURL=pf-credit-card.cjs.entry.js.map

package/dist/cjs/pf-credit-card.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-credit-card.cjs.entry.js","mappings":"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","names":["maskCardNumber","formatCardNumber","h","Host"],"sources":["src/components/pf-credit-card/pf-credit-card.css?tag=pf-credit-card&encapsulation=shadow","src/components/pf-credit-card/pf-credit-card.tsx"],"sourcesContent":["/*\n * The --pf-credit-card-* colours live in theme.css rather than here, so a\n * scoped override (Storybook's CSS-variable controls, a consumer theming one\n * card) still reaches them by inheritance through the shadow boundary.\n */\n:host {\n  aspect-ratio: 1.586;\n  border: 1px solid var(--pf-credit-card-border);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-md);\n  color: var(--pf-credit-card-text-color);\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  max-width: 100%;\n  min-height: 200px;\n  padding: var(--space-4);\n  position: relative;\n  width: 340px;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * The React library draws this with `.pf-credit-card::before`. Here it is a\n * real element, so its position in the stacking order against the `z-index: 1`\n * content below is explicit rather than resting on how a host pseudo-element\n * participates in the shadow tree.\n */\n.glare {\n  background: radial-gradient(circle at 20% 20%, var(--pf-credit-card-glare), transparent 40%);\n  border-radius: inherit;\n  inset: 0;\n  pointer-events: none;\n  position: absolute;\n}\n\n:host([brand='generic']) {\n  background: var(--pf-credit-card-generic-gradient);\n}\n\n:host([brand='visa']) {\n  background: var(--pf-credit-card-visa-gradient);\n}\n\n:host([brand='mastercard']) {\n  background: var(--pf-credit-card-mastercard-gradient);\n}\n\n:host([brand='amex']) {\n  background: var(--pf-credit-card-amex-gradient);\n}\n\n.top-row {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  position: relative;\n  z-index: 1;\n}\n\n.chip {\n  background: var(--pf-credit-card-chip-gradient);\n  border-radius: 4px;\n  display: inline-flex;\n  height: 28px;\n  width: 38px;\n}\n\n.brand,\n.number,\n.label,\n.value {\n  color: inherit;\n}\n\n.brand {\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-semibold);\n  letter-spacing: 0.08em;\n}\n\n.number {\n  font-size: clamp(var(--font-size-lg), 2.6vw, var(--font-size-2xl));\n  font-weight: var(--font-weight-semibold);\n  letter-spacing: 0.08em;\n  line-height: 1.25;\n  margin: 0;\n  position: relative;\n  z-index: 1;\n}\n\n.meta {\n  display: flex;\n  gap: var(--space-4);\n  position: relative;\n  z-index: 1;\n}\n\n.field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n}\n\n.label {\n  font-size: var(--font-size-2xs);\n  letter-spacing: 0.08em;\n  opacity: 0.85;\n  text-transform: uppercase;\n}\n\n.value {\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n","import { formatCardNumber, maskCardNumber } from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nexport type PfCreditCardBrand = 'generic' | 'visa' | 'mastercard' | 'amex';\n\n/**\n * A card-shaped display of payment details. Presentational only — it stores\n * nothing and submits nothing.\n *\n * @part glare - the decorative highlight overlay.\n * @part chip - the decorative chip.\n * @part brand - the brand wordmark.\n * @part number - the grouped card number.\n * @part meta - the row of labelled fields.\n * @part label - each field's caption.\n * @part value - each field's value.\n */\n@Component({\n  tag: 'pf-credit-card',\n  styleUrl: 'pf-credit-card.css',\n  shadow: true,\n})\nexport class PfCreditCard {\n  /** Card network. Reflected so the stylesheet can pick the gradient. */\n  @Prop({ reflect: true }) brand: PfCreditCardBrand = 'generic';\n\n  /** The number to display. Separators in the input are regrouped. */\n  @Prop() cardNumber = '';\n\n  /** Name on the card. */\n  @Prop() cardholderName = '';\n\n  /** Expiry, displayed as given. */\n  @Prop() expiry = '';\n\n  /** Security code. Omit it to leave the field out entirely. */\n  @Prop() cvc?: string;\n\n  /**\n   * Hide all but the last four digits, and the CVC with it. Defaults to true,\n   * so the careless case is the safe one. Reflected for the stylesheet.\n   */\n  @Prop({ reflect: true }) masked = true;\n\n  render() {\n    // Both layers go through core, so the same number is grouped identically.\n    const displayNumber = this.masked\n      ? maskCardNumber(this.cardNumber)\n      : formatCardNumber(this.cardNumber);\n\n    return (\n      <Host>\n        <div class=\"glare\" part=\"glare\" aria-hidden=\"true\" />\n        <div class=\"top-row\">\n          <span class=\"chip\" part=\"chip\" aria-hidden=\"true\" />\n          <span class=\"brand\" part=\"brand\">\n            {this.brand.toUpperCase()}\n          </span>\n        </div>\n\n        <p class=\"number\" part=\"number\">\n          {displayNumber}\n        </p>\n\n        <div class=\"meta\" part=\"meta\">\n          <div class=\"field\">\n            <span class=\"label\" part=\"label\">\n              Card holder\n            </span>\n            <span class=\"value\" part=\"value\">\n              {this.cardholderName}\n            </span>\n          </div>\n          <div class=\"field\">\n            <span class=\"label\" part=\"label\">\n              Expires\n            </span>\n            <span class=\"value\" part=\"value\">\n              {this.expiry}\n            </span>\n          </div>\n          {this.cvc && (\n            <div class=\"field\">\n              <span class=\"label\" part=\"label\">\n                CVC\n              </span>\n              <span class=\"value\" part=\"value\">\n                {this.masked ? '***' : this.cvc}\n              </span>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,241 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var placePopover = require('./place-popover-CMqeolzZ.js');
+var aria = require('./aria-5oCPUGFo.js');
+var date = require('./date-CzVt5Lej.js');
+var keys = require('./keys-S3YTuCcn.js');
+var formValidity = require('./form-validity-BCrcqnZ7.js');
+
+const pfDatePickerCss = () => `:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-field-label-text, var(--pf-input-label-text));font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-input-invalid-border);margin-inline-start:var(--space-1)}.row{align-items:center;display:flex;gap:var(--space-2)}.trigger{align-items:center;background:var(--pf-input-bg);border:1px solid var(--pf-input-border);border-radius:var(--radius-md);color:var(--pf-input-text);cursor:pointer;display:flex;flex:1;font-family:inherit;font-size:var(--font-size-sm);gap:var(--space-2);justify-content:space-between;min-width:0;padding:var(--space-2) var(--space-3);text-align:start}.trigger:hover:not(:disabled){border-color:var(--pf-input-border-hover)}.trigger:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.trigger:disabled{cursor:not-allowed;opacity:0.6}.trigger--invalid{border-color:var(--pf-input-invalid-border)}.value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.value--placeholder{color:var(--pf-input-placeholder-text)}.clear{align-items:center;background:none;border:0;border-radius:var(--radius-sm);color:var(--pf-input-text-muted, var(--pf-input-placeholder-text));cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;padding:var(--space-1)}.clear:hover:not(:disabled){color:var(--pf-input-text)}.clear:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.description{color:var(--pf-input-description-text);font-size:var(--font-size-xs);margin:0}.error{color:var(--pf-input-invalid-border);font-size:var(--font-size-xs);margin:0}.panel{inset:auto;margin:0;background:none;border:0;overflow:visible;padding:0}.panel:popover-open{animation:pf-date-picker-in var(--pf-transition-enter)}@keyframes pf-date-picker-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.panel:popover-open{animation:none}}`;
+
+const PfDatePicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfChange = index.createEvent(this, "pfChange");
+        this.pfOpenChange = index.createEvent(this, "pfOpenChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    get el() { return index.getElement(this); }
+    internals;
+    /**
+     * Submitted under this name. Reflected, because the submission name comes
+     * from the content attribute and the generated bindings set properties.
+     */
+    name;
+    /** The selected date as `YYYY-MM-DD`, or empty. */
+    value = '';
+    /** Whether the calendar is showing. Reflected for the stylesheet. */
+    open = false;
+    /** Visible label. In the same root as the trigger, so `for` works. */
+    label;
+    /** Hint text below the control. */
+    description;
+    /** Error message. Its presence is what marks the control invalid. */
+    error;
+    placeholder = 'Select a date';
+    required = false;
+    disabled = false;
+    /** Offer a button that empties the field. */
+    allowClear = false;
+    /** Earliest selectable date, as `YYYY-MM-DD`. */
+    min;
+    /** Latest selectable date, as `YYYY-MM-DD`. */
+    max;
+    startYear;
+    endYear;
+    showOutsideDays = true;
+    /** A predicate for days that cannot be chosen; see `pf-calendar`. */
+    isDateDisabled;
+    /** Fires when a date is chosen or cleared. */
+    pfChange;
+    /** Fires whenever the calendar opens or closes, whoever caused it. */
+    pfOpenChange;
+    /** What a form reset restores; `value` has been overwritten by then. */
+    initialValue = '';
+    stopObserving;
+    componentWillLoad() {
+        this.initialValue = this.value ?? '';
+        this.syncFormState();
+    }
+    disconnectedCallback() {
+        this.stopObserving?.();
+    }
+    syncFormState() {
+        this.internals.setFormValue(this.value || null);
+        formValidity.applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);
+    }
+    /** The one place an open or close is announced, whatever caused it. */
+    syncOpen(next, previous) {
+        if (next)
+            this.showPanel();
+        else
+            this.hidePanel();
+        if (next !== previous)
+            this.pfOpenChange.emit({ open: next });
+    }
+    /** Opens the calendar. */
+    async show() {
+        if (!this.disabled)
+            this.open = true;
+    }
+    /** Closes the calendar. */
+    async hide() {
+        this.open = false;
+    }
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    async getValidationMessage() {
+        return this.internals.validationMessage;
+    }
+    /** A reset restores the value the field started with, not an empty one. */
+    formResetCallback() {
+        this.value = this.initialValue;
+    }
+    get panel() {
+        return this.el.shadowRoot?.querySelector('[part="panel"]') ?? null;
+    }
+    get trigger() {
+        return this.el.shadowRoot?.querySelector('[part="trigger"]') ?? null;
+    }
+    get calendar() {
+        return (this.el.shadowRoot?.querySelector('pf-calendar') ?? null);
+    }
+    showPanel() {
+        const panel = this.panel;
+        if (this.disabled || !panel || panel.matches(':popover-open'))
+            return;
+        panel.showPopover();
+        this.stopObserving?.();
+        this.stopObserving = placePopover.observeAnchoredPosition({
+            getAnchor: () => this.trigger,
+            getFloating: () => panel,
+            align: 'start',
+            matchAnchorWidth: false,
+            flip: true,
+            onChange: ({ left, top }) => placePopover.placePopover(panel, left, top),
+        });
+        // Focus the grid, not the panel: the calendar owns its own tab stop, and
+        // it asks for focus through a method rather than having it reached for.
+        void this.calendar?.focusSelectedDay();
+    }
+    hidePanel() {
+        this.stopObserving?.();
+        this.stopObserving = undefined;
+        const panel = this.panel;
+        if (panel?.matches(':popover-open'))
+            panel.hidePopover();
+    }
+    /**
+     * Mirrors a browser-driven close — a light dismiss or Escape — back into
+     * `open`, which is what then announces it.
+     */
+    onToggle = (event) => {
+        const nowOpen = event.newState === 'open';
+        if (this.open !== nowOpen)
+            this.open = nowOpen;
+        if (!nowOpen)
+            this.trigger?.focus();
+    };
+    /**
+     * Listens on the calendar element itself, not on the host.
+     *
+     * Both were tried. A `@Listen('pfChange')` on the host sees the calendar's
+     * event *and* this element's own — a Stencil event is composed, so by then
+     * both have been retargeted to the host and `event.target` cannot tell them
+     * apart. Worse, `stopPropagation()` there does not help: the consumer's
+     * listener is on that same node, and stopping propagation never stops
+     * same-node listeners, so every pick reported twice. Caught by a test that
+     * counted them.
+     *
+     * On the calendar, the event is stopped before it reaches the host at all,
+     * which does not depend on listener registration order the way
+     * `stopImmediatePropagation` would.
+     */
+    bindCalendar = (element) => {
+        if (!element || element === this.boundCalendar)
+            return;
+        this.boundCalendar = element;
+        element.addEventListener('pfChange', this.onCalendarChange);
+    };
+    boundCalendar;
+    onCalendarChange = (event) => {
+        event.stopPropagation();
+        this.value = event.detail.value;
+        this.pfChange.emit({ value: this.value });
+        this.open = false;
+        this.trigger?.focus();
+    };
+    clear = (event) => {
+        event.stopPropagation();
+        if (!this.value)
+            return;
+        this.value = '';
+        this.pfChange.emit({ value: '' });
+    };
+    /**
+     * Down opens the calendar from a closed trigger, as a popup button should.
+     * Escape is the browser's while the panel is open — `popover="auto"` handles
+     * it — so there is nothing to do here for it.
+     */
+    onTriggerKeyDown = (event) => {
+        if (this.open || this.disabled)
+            return;
+        if (event.key === keys.Keys.ArrowDown || event.key === keys.Keys.Enter || event.key === keys.Keys.Space) {
+            if (event.key === keys.Keys.ArrowDown) {
+                event.preventDefault();
+                this.open = true;
+            }
+        }
+    };
+    /** `MMM D, YYYY`, matching the React component's trigger text. */
+    formatted() {
+        const date$1 = date.parseISODate(this.value);
+        if (!date$1)
+            return '';
+        return new Intl.DateTimeFormat('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+        }).format(date$1);
+    }
+    render() {
+        const describedBy = aria.composeDescribedBy(this.description && 'description', this.error && 'error');
+        const text = this.formatted();
+        return (index.h(index.Host, { key: '4c7b624f2b4f7b0a1bb1283ceeaf0884eb8617f7' }, index.h("div", { key: '9b8b376726d7d5073d78da8d2f8388d4e721725f', class: "field", part: "field" }, this.label && (index.h("label", { key: '5aa01393fb9172abb0e9718f8ca4872e93f540c2', class: "label", part: "label", htmlFor: "trigger" }, this.label, this.required && (index.h("span", { key: 'c0a00abc02da50500ffa64471222355a0b5c610d', class: "required", "aria-hidden": "true" }, "*")))), index.h("div", { key: '17bab24f52f47bde8d06f1070f13845cffeeae26', class: "row" }, index.h("button", { key: 'cde12c16dd7e2824cbd570d6101d9322cd56e802', id: "trigger", part: "trigger", class: { trigger: true, 'trigger--invalid': Boolean(this.error) }, type: "button", disabled: this.disabled, "aria-haspopup": "dialog", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "panel", "aria-invalid": this.error ? 'true' : null, "aria-required": this.required ? 'true' : null, "aria-describedby": describedBy, onClick: () => {
+                if (!this.disabled)
+                    this.open = !this.open;
+            }, onKeyDown: this.onTriggerKeyDown }, index.h("span", { key: 'a0058117f0f220f7c023ea839320448e2cf11492', class: { value: true, 'value--placeholder': !text } }, text || this.placeholder), index.h("pf-icon", { key: '2fafd08f3570839fe8b1e9fbd444cb01441cff19', name: "calendar" })), this.allowClear && this.value && (index.h("button", { key: '3c0ae031b818206486b0dedaa67ec7da4abe47a1', class: "clear", part: "clear", type: "button", "aria-label": "Clear selected date", disabled: this.disabled, onClick: this.clear }, index.h("pf-icon", { key: 'f2f340dfdccdcb59cd38fa1ca9c449e14bada1bd', name: "circle-xmark" })))), this.description && (index.h("p", { key: '868d285932ff0a58a0917909ac566f8672b410ee', class: "description", part: "description", id: "description" }, this.description)), this.error && (index.h("p", { key: '425d7843886e4afadafbf38b26bae2ee80b3c7d8', class: "error", part: "error", id: "error" }, this.error))), index.h("div", { key: '1fa2e68673f31aeb52be6446f614a39494016d90', id: "panel", part: "panel", class: "panel", popover: "auto", role: "dialog", "aria-label": "Choose a date", onToggle: this.onToggle }, index.h("pf-calendar", { key: '7a9e9553c4a2975ae7ec8e6c34cc04ac7626ec76', ref: this.bindCalendar, part: "calendar", value: this.value || undefined, min: this.min, max: this.max, startYear: this.startYear, endYear: this.endYear, showOutsideDays: this.showOutsideDays, isDateDisabled: this.isDateDisabled }))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "syncFormState": 0
+            }],
+        "error": [{
+                "syncFormState": 0
+            }],
+        "required": [{
+                "syncFormState": 0
+            }],
+        "open": [{
+                "syncOpen": 0
+            }]
+    }; }
+};
+PfDatePicker.style = pfDatePickerCss();
+
+exports.pf_date_picker = PfDatePicker;
+//# sourceMappingURL=pf-date-picker.entry.cjs.js.map
+
+//# sourceMappingURL=pf-date-picker.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"pf-date-picker.cjs.entry.js","mappings":"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","names":["applyControlValidity","observeAnchoredPosition","placePopover","Keys","date","parseISODate","composeDescribedBy","h","Host"],"sources":["src/components/pf-date-picker/pf-date-picker.css?tag=pf-date-picker&encapsulation=shadow","src/components/pf-date-picker/pf-date-picker.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-1);\n}\n\n.label {\n  color: var(--pf-field-label-text, var(--pf-input-label-text));\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-input-invalid-border);\n  margin-inline-start: var(--space-1);\n}\n\n.row {\n  align-items: center;\n  display: flex;\n  gap: var(--space-2);\n}\n\n.trigger {\n  align-items: center;\n  background: var(--pf-input-bg);\n  border: 1px solid var(--pf-input-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-input-text);\n  cursor: pointer;\n  display: flex;\n  flex: 1;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  gap: var(--space-2);\n  justify-content: space-between;\n  min-width: 0;\n  padding: var(--space-2) var(--space-3);\n  text-align: start;\n}\n\n.trigger:hover:not(:disabled) {\n  border-color: var(--pf-input-border-hover);\n}\n\n.trigger:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.trigger--invalid {\n  border-color: var(--pf-input-invalid-border);\n}\n\n.value {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.value--placeholder {\n  color: var(--pf-input-placeholder-text);\n}\n\n.clear {\n  align-items: center;\n  background: none;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-input-text-muted, var(--pf-input-placeholder-text));\n  cursor: pointer;\n  display: inline-flex;\n  flex-shrink: 0;\n  justify-content: center;\n  padding: var(--space-1);\n}\n\n.clear:hover:not(:disabled) {\n  color: var(--pf-input-text);\n}\n\n.clear:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.description {\n  color: var(--pf-input-description-text);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-input-invalid-border);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n/*\n * See src/place-popover.ts: `inset: auto; margin: 0` are what make the\n * coordinates mean what they say, since the UA stylesheet centres a popover.\n * Declared here and set inline, because no test project applies this file.\n */\n.panel {\n  inset: auto;\n  margin: 0;\n  background: none;\n  border: 0;\n  overflow: visible;\n  padding: 0;\n}\n\n.panel:popover-open {\n  animation: pf-date-picker-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-date-picker-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .panel:popover-open {\n    animation: none;\n  }\n}\n","import {\n  composeDescribedBy,\n  Keys,\n  observeAnchoredPosition,\n  parseISODate,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { placePopover } from '../../place-popover';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n/**\n * A form-associated date field: a trigger that opens `pf-calendar` in a\n * popover.\n *\n * Form-associated, which the React `DatePicker` is not — it is a button and a\n * portal, so its value reaches a surrounding `<form>` only if the consumer\n * wires it there themselves. Here the value is submitted as `YYYY-MM-DD`,\n * constraint validation works, and Angular's generated accessor has something\n * to bind to.\n *\n * The panel is a `popover`, so light dismiss and Escape are the browser's.\n * Unlike `pf-dropdown`, the trigger and the panel are both in *this* shadow\n * root, so `aria-controls` resolves and is worth setting — a same-root IDREF\n * is the one case that works, measured.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part trigger - the button that opens the calendar.\n * @part clear - the clear button.\n * @part panel - the floating panel holding the calendar.\n * @part calendar - the calendar itself.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-date-picker',\n  styleUrl: 'pf-date-picker.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfDatePicker {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name. Reflected, because the submission name comes\n   * from the content attribute and the generated bindings set properties.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The selected date as `YYYY-MM-DD`, or empty. */\n  @Prop({ mutable: true }) value = '';\n\n  /** Whether the calendar is showing. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Visible label. In the same root as the trigger, so `for` works. */\n  @Prop() label?: string;\n\n  /** Hint text below the control. */\n  @Prop() description?: string;\n\n  /** Error message. Its presence is what marks the control invalid. */\n  @Prop() error?: string;\n\n  @Prop() placeholder = 'Select a date';\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Offer a button that empties the field. */\n  @Prop() allowClear = false;\n\n  /** Earliest selectable date, as `YYYY-MM-DD`. */\n  @Prop() min?: string;\n\n  /** Latest selectable date, as `YYYY-MM-DD`. */\n  @Prop() max?: string;\n\n  @Prop() startYear?: number;\n\n  @Prop() endYear?: number;\n\n  @Prop() showOutsideDays = true;\n\n  /** A predicate for days that cannot be chosen; see `pf-calendar`. */\n  @Prop() isDateDisabled?: (date: Date) => boolean;\n\n  /** Fires when a date is chosen or cleared. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** Fires whenever the calendar opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** What a form reset restores; `value` has been overwritten by then. */\n  private initialValue = '';\n\n  private stopObserving?: () => void;\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n  }\n\n  disconnectedCallback() {\n    this.stopObserving?.();\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    this.internals.setFormValue(this.value || null);\n    applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n  }\n\n  /** The one place an open or close is announced, whatever caused it. */\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showPanel();\n    else this.hidePanel();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  /** Opens the calendar. */\n  @Method()\n  async show(): Promise<void> {\n    if (!this.disabled) this.open = true;\n  }\n\n  /** Closes the calendar. */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /** A reset restores the value the field started with, not an empty one. */\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  private get panel() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"panel\"]') ?? null;\n  }\n\n  private get trigger() {\n    return this.el.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"trigger\"]') ?? null;\n  }\n\n  private get calendar() {\n    return (\n      this.el.shadowRoot?.querySelector<HTMLElement & { focusSelectedDay(): Promise<void> }>(\n        'pf-calendar',\n      ) ?? null\n    );\n  }\n\n  private showPanel() {\n    const panel = this.panel;\n    if (this.disabled || !panel || panel.matches(':popover-open')) return;\n\n    panel.showPopover();\n    this.stopObserving?.();\n    this.stopObserving = observeAnchoredPosition({\n      getAnchor: () => this.trigger,\n      getFloating: () => panel,\n      align: 'start',\n      matchAnchorWidth: false,\n      flip: true,\n      onChange: ({ left, top }) => placePopover(panel, left, top),\n    });\n\n    // Focus the grid, not the panel: the calendar owns its own tab stop, and\n    // it asks for focus through a method rather than having it reached for.\n    void this.calendar?.focusSelectedDay();\n  }\n\n  private hidePanel() {\n    this.stopObserving?.();\n    this.stopObserving = undefined;\n    const panel = this.panel;\n    if (panel?.matches(':popover-open')) panel.hidePopover();\n  }\n\n  /**\n   * Mirrors a browser-driven close — a light dismiss or Escape — back into\n   * `open`, which is what then announces it.\n   */\n  private onToggle = (event: ToggleEvent) => {\n    const nowOpen = event.newState === 'open';\n    if (this.open !== nowOpen) this.open = nowOpen;\n    if (!nowOpen) this.trigger?.focus();\n  };\n\n  /**\n   * Listens on the calendar element itself, not on the host.\n   *\n   * Both were tried. A `@Listen('pfChange')` on the host sees the calendar's\n   * event *and* this element's own — a Stencil event is composed, so by then\n   * both have been retargeted to the host and `event.target` cannot tell them\n   * apart. Worse, `stopPropagation()` there does not help: the consumer's\n   * listener is on that same node, and stopping propagation never stops\n   * same-node listeners, so every pick reported twice. Caught by a test that\n   * counted them.\n   *\n   * On the calendar, the event is stopped before it reaches the host at all,\n   * which does not depend on listener registration order the way\n   * `stopImmediatePropagation` would.\n   */\n  private bindCalendar = (element?: HTMLElement) => {\n    if (!element || element === this.boundCalendar) return;\n    this.boundCalendar = element;\n    element.addEventListener('pfChange', this.onCalendarChange as EventListener);\n  };\n\n  private boundCalendar?: HTMLElement;\n\n  private onCalendarChange = (event: CustomEvent<{ value: string }>) => {\n    event.stopPropagation();\n\n    this.value = event.detail.value;\n    this.pfChange.emit({ value: this.value });\n    this.open = false;\n    this.trigger?.focus();\n  };\n\n  private clear = (event: MouseEvent) => {\n    event.stopPropagation();\n    if (!this.value) return;\n    this.value = '';\n    this.pfChange.emit({ value: '' });\n  };\n\n  /**\n   * Down opens the calendar from a closed trigger, as a popup button should.\n   * Escape is the browser's while the panel is open — `popover=\"auto\"` handles\n   * it — so there is nothing to do here for it.\n   */\n  private onTriggerKeyDown = (event: KeyboardEvent) => {\n    if (this.open || this.disabled) return;\n    if (event.key === Keys.ArrowDown || event.key === Keys.Enter || event.key === Keys.Space) {\n      if (event.key === Keys.ArrowDown) {\n        event.preventDefault();\n        this.open = true;\n      }\n    }\n  };\n\n  /** `MMM D, YYYY`, matching the React component's trigger text. */\n  private formatted(): string {\n    const date = parseISODate(this.value);\n    if (!date) return '';\n    return new Intl.DateTimeFormat('en-US', {\n      month: 'short',\n      day: 'numeric',\n      year: 'numeric',\n    }).format(date);\n  }\n\n  render() {\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n    const text = this.formatted();\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"trigger\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n\n          <div class=\"row\">\n            <button\n              id=\"trigger\"\n              part=\"trigger\"\n              class={{ trigger: true, 'trigger--invalid': Boolean(this.error) }}\n              type=\"button\"\n              disabled={this.disabled}\n              aria-haspopup=\"dialog\"\n              aria-expanded={this.open ? 'true' : 'false'}\n              /* Same shadow root as the panel, so this IDREF resolves. */\n              aria-controls=\"panel\"\n              aria-invalid={this.error ? 'true' : null}\n              aria-required={this.required ? 'true' : null}\n              aria-describedby={describedBy}\n              onClick={() => {\n                if (!this.disabled) this.open = !this.open;\n              }}\n              onKeyDown={this.onTriggerKeyDown}\n            >\n              <span class={{ value: true, 'value--placeholder': !text }}>\n                {text || this.placeholder}\n              </span>\n              <pf-icon name=\"calendar\"></pf-icon>\n            </button>\n\n            {this.allowClear && this.value && (\n              <button\n                class=\"clear\"\n                part=\"clear\"\n                type=\"button\"\n                aria-label=\"Clear selected date\"\n                disabled={this.disabled}\n                onClick={this.clear}\n              >\n                <pf-icon name=\"circle-xmark\"></pf-icon>\n              </button>\n            )}\n          </div>\n\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n\n        <div\n          id=\"panel\"\n          part=\"panel\"\n          class=\"panel\"\n          popover=\"auto\"\n          role=\"dialog\"\n          aria-label=\"Choose a date\"\n          onToggle={this.onToggle}\n        >\n          <pf-calendar\n            ref={this.bindCalendar}\n            part=\"calendar\"\n            value={this.value || undefined}\n            min={this.min}\n            max={this.max}\n            startYear={this.startYear}\n            endYear={this.endYear}\n            showOutsideDays={this.showOutsideDays}\n            isDateDisabled={this.isDateDisabled}\n          ></pf-calendar>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}