@pitchfork-ui/elements 0.1.0 → 0.2.1

package/dist/elements.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://lelandrangel.com/pitchfork-ui/schema/elements.json",
   "name": "@pitchfork-ui/elements",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "generatedBy": "scripts/build-elements-metadata.mjs",
   "categories": [
     "forms",
@@ -15,6 +15,90 @@
     "layout",
     "utility"
   ],
+  "conventions": "# Web components\n\n**The 108 custom elements in `@pitchfork-ui/elements` are the library.** They\nare standard custom elements, so they work in any framework and in a plain HTML\nfile, and the `Components` section of this site documents them and nothing\nelse.\n\n`@pitchfork-ui/react` — the hand-written React component library this started\nas — is **deprecated**. It is still published and still gets fixes, and nothing\nyou have built on it stops working. But it takes no new components, its\ndocumentation pages are gone, and it will be removed after a stated window.\nA React application does not have to leave React to move off it: the generated\n`@pitchfork-ui/elements-react` bindings give every element a typed component.\n**Foundations → Migrating** has the component-by-component mapping.\n\nBehaviour that is not about a template lives in `@pitchfork-ui/core`, which\nmaths, date stepping, chart geometry, the icon registry. The elements own their\ntemplates and their reactivity and nothing else, which is why a fix usually\nlands in core and why the three binding packages are **generated** from the\nsame build rather than written by hand.\n\n## Installing\n\n```bash\nnpm install @pitchfork-ui/elements @pitchfork-ui/tokens\n```\n\nThe elements package ships the token stylesheet it needs. Load it once:\n\n```ts\n```\n\n### Plain HTML\n\n```html\n<script type=\"module\">\n  import { defineCustomElements } from '@pitchfork-ui/elements/loader';\n  defineCustomElements();\n</script>\n\n<pf-button variant=\"primary\">Save</pf-button>\n```\n\n### React\n\nThe React bindings are **generated** from the elements by Stencil's output\ntarget — never hand-edited — and give every element a typed component with\nreal event props rather than `addEventListener`.\n\n```tsx\n\n<PfButton variant=\"primary\" onPfClick={save}>\n  Save\n</PfButton>;\n```\n\nThese bindings are what a React application uses now, and they are generated\nfrom the elements by Stencil's output target rather than hand-written — so they\ncannot drift from the element they wrap.\n\n### Angular\n\nAlso generated, as standalone components — plus the\n`ControlValueAccessor` directives that let a form control bind with\n`formControlName` or `ngModel`. That capability is why the elements are\nStencil-authored rather than Lit: with Lit each accessor would be\nhand-written, once per control.\n\n```ts\n\n@Component({\n  imports: [PfInput, ReactiveFormsModule],\n  template: `<pf-input [formControl]=\"email\" label=\"Email\" />`,\n})\nexport class SignUpForm {}\n```\n\n### Vue\n\nGenerated as well. Vue renders a custom element directly without any wrapper,\nso these are a convenience rather than a necessity — what they add is typed\nprops, `@pf-*` listeners instead of `addEventListener`, and `v-model` on the\nsix form controls.\n\n```vue\n<script setup lang=\"ts\">\n\nconst email = ref('');\nconst dark = ref(false);\n</script>\n\n<template>\n  <PfInput v-model=\"email\" label=\"Email\" />\n  <PfSwitch v-model=\"dark\" label=\"Dark mode\" />\n</template>\n```\n\n`v-model` binds `value` on `pf-input`, `pf-textarea`, `pf-radio-group` and\n`pf-slider`, and `checked` on `pf-checkbox` and `pf-switch` — the same six\ncontrols the Angular `ControlValueAccessor`s cover. Everything else takes\nplain props and emits `pf-*` events.\n\n## Styling\n\nTwo mechanisms, and the difference matters.\n\n**Custom properties cross a shadow boundary.** Every `--pf-*` alias the React\ncomponents read is read by the elements too, so a theme set on `:root` — or on\nany ancestor — reaches inside. This is also how a group tells a child element\nwhat it needs: `pf-header-navigation` sets `--pf-nav-item-*` on itself, and the\n`pf-nav-item`s slotted into it resolve those inside their own shadow roots.\n\n```css\n:root {\n  --pf-button-primary-bg: rebeccapurple;\n}\n```\n\n**Selectors do not.** A consumer's stylesheet cannot reach a shadow-internal\nnode, so every element exposes the boxes worth styling as `::part()`. Each\none is listed on the element's own page.\n\n```css\npf-table::part(cell) {\n  font-variant-numeric: tabular-nums;\n}\n```\n\nDark mode works the same way it does for the React components:\n`[data-theme='dark']` on an ancestor, with no per-element handling.\n\n## Where the element API differs from the React one\n\nMost components take the same props. The differences are all consequences of\nthe platform, and each one is a decision rather than an omission.\n\n**Data-driven components take child elements, not arrays.** The React\n`Select` takes `options`; `<pf-select>` takes `<pf-option>` children and the\nconsumer loops in their own template. The same for `pf-tabs`, `pf-table`,\n`pf-tree-view`, `pf-command-palette`, `pf-pie-chart` and the rest. It is more\nmarkup and it is the right shape: a `ReactNode` in a prop has no equivalent\nhere, and a slotted child is something a framework can key, reorder and bind\nto.\n\n**A group's legend is made of its children.** A slot renders its assigned\ncontent once and in one place, so a legend built inside a chart's shadow root\ncould never reach labels that live in the light DOM. `pf-pie-slice` and\n`pf-radar-axis` therefore draw their own legend rows, and the chart pushes\ndown the two things only it knows: the colour and the share.\n\n**Some names are attributes where React takes a node.** `pf-radar-axis` takes\n`label` as a string because the chart draws each name inside its own SVG, and\nan SVG `<text>` cannot hold arbitrary markup in either layer.\n\n**A few props are renamed, because the platform owns the name.**\n`pf-sparkline` takes `animated`, not `animate`: `Element.prototype.animate` is\nthe Web Animations API, and a prop that shadows a prototype member fails the\nbuild. `pf-chart-series` takes `seriesKey` for the same reason `key` is\nunavailable.\n\n**Form controls are form-associated.** `pf-input`, `pf-checkbox`,\n`pf-file-uploader` and the rest use `ElementInternals`, so their values reach\n`FormData`, constraint validation works, and a reset restores the value the\ncontrol started with. A plain `<input>` inside a shadow root does none of\nthat — and neither does a React `contenteditable`, which is why\n`<pf-rich-text-editor>` reaches a form where `RichTextEditor` does not.\n\n**Overlays are `popover`s and `<dialog>`s, not portals.** `createPortal` has\nno equivalent in a shadow root, and a positioned element there is clipped by\nany ancestor's `overflow`. A `popover` opened from a shadow root is promoted\nto the top layer and escapes both, and `<dialog>.showModal()` brings the focus\ntrap, Escape and the backdrop with it.\n\n## Browser support\n\nSafe to depend on, and depended on: custom elements, shadow DOM,\nconstructable stylesheets, `::part()`, `ElementInternals`, `<dialog>` and\n`popover`.\n\nUsed only where there is a working fallback: cross-root ARIA element\nreflection, which `pf-command-palette` feature-detects — without it the arrows\nand Enter still work and the active option simply is not announced.\n\nDeliberately unused: CSS anchor positioning, scoped custom element registries\nand `:host-context()`. Those are the three that quietly make a library\nChromium-only.\n\n## Reference\n\nEvery element has a generated page in this section listing its properties,\nevents, methods, slots and shadow parts. Those pages come from Stencil's own\n`docs.json`, which is built from the source — so they cannot drift from the\ncode, and CI fails if the committed copies are stale.\n\n### CSS variable inheritance chain\n\nNever hardcode colors, spacing, or radii. Use the three-tier alias chain:\n\n```\ncomponent-specific var → theme alias → token\n```\n\nExample from `theme.css`:\n\n```css\n--pf-button-primary-bg: var(--color-semantic-action-primary);\n```\n\nExample from a component CSS file:\n\n```css\n.pf-button--primary {\n  background: var(--pf-button-primary-bg);\n}\n```\n\nToken names (`--color-*`, `--space-*`, `--size-*`, `--font-*`, `--radius-*`, `--shadow-*`) come from Style Dictionary and must not be used directly in component CSS — go through a `theme.css` alias. Add new aliases to `packages/tokens/src/theme.css` as needed.\n\nDark mode is handled via `[data-theme='dark']` in `theme.css` — component CSS needs no dark mode selectors.\n\n### Responsive breakpoints\n\nThis project uses **mobile-first** responsive CSS. Base styles target mobile; `@media (--breakpoint)` queries add wider-screen overrides.\n\n| Token  | Min-width | Typical use                                        |\n| ------ | --------- | -------------------------------------------------- |\n| `--sm` | 640px     | Stacked → inline layouts                           |\n| `--md` | 768px     | Single-col nav → multi-col, sheet → centered modal |\n| `--lg` | 1024px    | Large/desktop layouts                              |\n\n```css\n/* base = mobile */\n.pf-mycomponent {\n  flex-direction: column;\n}\n\n@media (--md) {\n  .pf-mycomponent {\n    flex-direction: row;\n  }\n}\n```\n\nBreakpoints are defined in `packages/tokens/src/theme.css` and resolved at build time by `postcss-custom-media`. Never use raw `min-width`/`max-width` pixel values in component CSS.\n\n---\n\n## Icon system\n\nIcons come from `@fortawesome/free-regular-svg-icons` only (the free **regular** set). Solid and brand sets are not installed.\n\n**`Icon` resolves an explicit registry, not the whole regular set.** Each icon is an individual import in `bundledRegularIcons` inside `Icon.tsx`, which is what keeps a consumer's bundle to the icons actually in use. A name outside the registry renders `null` and warns once on the console — `paper-plane` and `comments` are real FA regular icons and neither of them works out of the box.\n\nCustom SVGs (chevrons, `triangle-exclamation`) live in the `customIcons` map in the same file and take precedence over the FA lookup. Add new custom SVGs there when a needed icon isn't in the regular FA set.\n\n**The thirteen custom glyphs are data in core, not markup in either layer.**\n`packages/core/src/custom-glyphs.ts` holds each one as a viewBox, a stroke\nwidth and a list of `polyline`/`path`/`circle` shapes; `Icon` maps them to\nReact's camelCase presentation attributes and `pf-icon` to the hyphenated\nspelling. That attribute-name difference is the whole reason core holds data\nrather than an `<svg>` — it has no vdom of its own, the same reason\n`getIconPaths` returns a viewBox and path strings. The geometry used to be\nwritten out in both places, and no test in either layer could have seen the\ntwo copies stop agreeing, because each only ever rendered its own. Moving it\nalso surfaced a real defect: the Font Awesome branch of `pf-icon` set\n`part=\"svg\"` and the custom branch did not, so `pf-icon::part(svg)` reached two\nthirds of the icons and silently missed every chevron.\n\nThe Font Awesome glyphs cannot move, because each layer has to import them\nindividually to keep a consumer's bundle to the icons in use. What moved is the\n**list of names**, as core's `BUNDLED_FA_ICON_NAMES`, and each layer has a test\nasserting its own map against it — otherwise an icon added in one place draws\nin React and renders nothing as an element, with every test in both layers\npassing. The equivalent assertion for the custom glyphs was written, probed and\n**deleted**: both layers now read the same list, so it compared a value with\nitself and could not fail.\n\n`scripts/build-metadata.mjs` parses these lists out of the source and throws a\nnamed error when it cannot find them, which is how the move was caught\nimmediately rather than silently producing metadata with no custom icons in it.\n\n`getAvailableIconNames()` lists the canonical names. `Icon` also accepts a Font Awesome alias (`bar-chart` for `chart-bar`) and a camelCase spelling (`chartBar`, `circleInfo`), because it kebab-cases before looking up. `metadata.json` carries all of it under `icons`, which is how the MCP server's `validate_usage` checks a name without rejecting the working spellings.\n\n```tsx\n<Icon name=\"circle-check\" aria-hidden />\n<Icon name=\"triangle-exclamation\" label=\"Warning\" />  {/* label adds aria-label */}\n```\n\nTo add one this library doesn't bundle, register it once at startup from the peer dependency the consumer already installs:\n\n```tsx\nimport { faPaperPlane } from '@fortawesome/free-regular-svg-icons';\nimport { registerIcons } from '@pitchfork-ui/react';\n\nregisterIcons({ 'paper-plane': faPaperPlane });\n```\n\n`IconName` is the union of registered names widened with `string`, so editors complete the bundled names while a runtime registration is still accepted. Adding an icon the library's own components need goes in `bundledRegularIcons`, not in consumer code.\n\n---\n\n## Accessibility\n\n- Use semantic HTML elements first — prefer `<button>` over `<div role=\"button\">`.\n- Use `composeDescribedBy(...ids)` (from `a11y/`) to merge `aria-describedby` values without dropping consumer-provided ones.\n- For live region components (alerts, notifications): `role=\"alert\"` is assertive and interrupts screen readers — use it only for `warning`/`danger`. Use `role=\"status\"` for `info`/`success`.\n- Use `Keys` constant (from `a11y/`) for keyboard event comparisons.\n\n---",
+  "icons": {
+    "custom": [
+      "chevron-down",
+      "chevron-left",
+      "chevron-right",
+      "chevron-up",
+      "circle-info",
+      "clock",
+      "ellipsis",
+      "file-arrow-down",
+      "file-arrow-up",
+      "magnifying-glass",
+      "minus",
+      "plus",
+      "triangle-exclamation"
+    ],
+    "fontAwesome": [
+      "bell",
+      "calendar",
+      "chart-bar",
+      "circle-check",
+      "circle-question",
+      "circle-xmark",
+      "copy",
+      "credit-card",
+      "file",
+      "folder-open",
+      "square-caret-left",
+      "square-caret-right",
+      "square-check",
+      "star",
+      "user"
+    ],
+    "aliases": [
+      "bar-chart",
+      "caret-square-left",
+      "caret-square-right",
+      "check-circle",
+      "check-square",
+      "credit-card-alt",
+      "question-circle",
+      "times-circle",
+      "user-alt",
+      "user-large",
+      "xmark-circle"
+    ],
+    "legacyAliases": {
+      "circleCheck": "circle-check",
+      "circleQuestion": "circle-question",
+      "circleInfo": "circle-info"
+    },
+    "all": [
+      "bell",
+      "calendar",
+      "chart-bar",
+      "chevron-down",
+      "chevron-left",
+      "chevron-right",
+      "chevron-up",
+      "circle-check",
+      "circle-info",
+      "circle-question",
+      "circle-xmark",
+      "clock",
+      "copy",
+      "credit-card",
+      "ellipsis",
+      "file",
+      "file-arrow-down",
+      "file-arrow-up",
+      "folder-open",
+      "magnifying-glass",
+      "minus",
+      "plus",
+      "square-caret-left",
+      "square-caret-right",
+      "square-check",
+      "star",
+      "triangle-exclamation",
+      "user"
+    ],
+    "note": "`all` is what getAvailableIconNames() returns. Icon also resolves every entry in `aliases`, every key of `legacyAliases`, and a camelCase spelling of any of them. Anything else renders nothing until the consumer adds it with registerIcons()."
+  },
   "bindings": {
     "react": "@pitchfork-ui/elements-react",
     "angular": "@pitchfork-ui/elements-angular",
@@ -916,7 +1000,7 @@
           "description": "one axis label."
         }
       ],
-      "example": "<pf-bar-chart\n  label=\"Signups by quarter\"\n  y-axis-label=\"Signups\"\n  data='[[\"Q1\", 120, 80], [\"Q2\", 180, 140], [\"Q3\", 150, 190], [\"Q4\", 240, 210]]'\n  style=\"width: 100%\"\n>\n  <pf-chart-series series-key=\"0\" color=\"var(--color-brand-500)\">Direct</pf-chart-series>\n  <pf-chart-series series-key=\"1\" color=\"var(--color-teal-500)\">Referral</pf-chart-series>\n</pf-bar-chart>",
+      "example": "<pf-bar-chart\n  label=\"Signups by quarter\"\n  y-axis-label=\"Signups\"\n  data='[{\"label\": \"Q1\", \"direct\": 120, \"referral\": 80}, {\"label\": \"Q2\", \"direct\": 180, \"referral\": 140}, {\"label\": \"Q3\", \"direct\": 150, \"referral\": 190}, {\"label\": \"Q4\", \"direct\": 240, \"referral\": 210}]'\n  style=\"width: 100%\"\n>\n  <pf-chart-series series-key=\"direct\" color=\"var(--color-brand-500)\">Direct</pf-chart-series>\n  <pf-chart-series series-key=\"referral\" color=\"var(--color-teal-500)\">Referral</pf-chart-series>\n</pf-bar-chart>",
       "interactive": null
     },
     {
@@ -1781,8 +1865,8 @@
           "description": "the name."
         }
       ],
-      "example": "<pf-line-chart\n  label=\"Two named series\"\n  data='[[\"Mon\", 12, 8], [\"Tue\", 18, 11], [\"Wed\", 9, 14], [\"Thu\", 22, 16]]'\n  style=\"width: 100%\"\n>\n  <pf-chart-series series-key=\"0\" color=\"var(--color-brand-500)\">Visits</pf-chart-series>\n  <pf-chart-series series-key=\"1\" color=\"var(--color-amber-500)\" dashed>Forecast</pf-chart-series>\n</pf-line-chart>",
-      "interactive": "<pf-line-chart label=\"One series\" data='[[\"Mon\", 12], [\"Tue\", 18], [\"Wed\", 9]]' style=\"width: 100%\">\n  <pf-chart-series series-key=\"0\" color=\"var(--color-brand-500)\">Visits</pf-chart-series>\n</pf-line-chart>"
+      "example": "<pf-line-chart\n  label=\"Two named series\"\n  data='[{\"label\": \"Mon\", \"visits\": 12, \"forecast\": 8}, {\"label\": \"Tue\", \"visits\": 18, \"forecast\": 11}, {\"label\": \"Wed\", \"visits\": 9, \"forecast\": 14}, {\"label\": \"Thu\", \"visits\": 22, \"forecast\": 16}]'\n  style=\"width: 100%\"\n>\n  <pf-chart-series series-key=\"visits\" color=\"var(--color-brand-500)\">Visits</pf-chart-series>\n  <pf-chart-series series-key=\"forecast\" color=\"var(--color-amber-500)\" dashed>Forecast</pf-chart-series>\n</pf-line-chart>",
+      "interactive": "<pf-line-chart label=\"One series\" data='[{\"label\": \"Mon\", \"visits\": 12}, {\"label\": \"Tue\", \"visits\": 18}, {\"label\": \"Wed\", \"visits\": 9}]' style=\"width: 100%\">\n  <pf-chart-series series-key=\"visits\" color=\"var(--color-brand-500)\">Visits</pf-chart-series>\n</pf-line-chart>"
     },
     {
       "tag": "pf-checkbox",
@@ -3729,7 +3813,7 @@
         {
           "name": "refresh",
           "signature": "refresh() => Promise<void>",
-          "description": "Re-reads the items, for a consumer who marked one current through its\n*property* — which leaves no attribute and fires no `slotchange`."
+          "description": "Re-reads the items, for a consumer who changed something the group reads\nand has no event for."
         }
       ],
       "slots": [
@@ -4377,7 +4461,7 @@
           "description": "one axis label."
         }
       ],
-      "example": "<pf-line-chart\n  label=\"Weekly visits\"\n  y-axis-label=\"Visits\"\n  area\n  data='[[\"Mon\", 12], [\"Tue\", 18], [\"Wed\", 9], [\"Thu\", 22], [\"Fri\", 17]]'\n  style=\"width: 100%\"\n>\n  <pf-chart-series series-key=\"0\" color=\"var(--color-brand-500)\">Visits</pf-chart-series>\n</pf-line-chart>",
+      "example": "<pf-line-chart\n  label=\"Weekly visits\"\n  y-axis-label=\"Visits\"\n  area\n  data='[{\"label\": \"Mon\", \"visits\": 12}, {\"label\": \"Tue\", \"visits\": 18}, {\"label\": \"Wed\", \"visits\": 9}, {\"label\": \"Thu\", \"visits\": 22}, {\"label\": \"Fri\", \"visits\": 17}]'\n  style=\"width: 100%\"\n>\n  <pf-chart-series series-key=\"visits\" color=\"var(--color-brand-500)\">Visits</pf-chart-series>\n</pf-line-chart>",
       "interactive": null
     },
     {
@@ -4722,7 +4806,7 @@
       "category": "overlays",
       "reactCounterpart": "Modal",
       "childOf": null,
-      "description": "A modal dialog.\n\nA native `<dialog>` opened with `showModal()`, which from inside a shadow\nroot gives the focus trap, Escape and the backdrop for nothing — all\nmeasured: focus moves inside on open and cannot be taken by a light-DOM\nbutton, and a real Escape fires `cancel` then `close`. So `trapFocus` from\ncore is not needed here, unlike in the React component.\n\nWhat `showModal()` does *not* do is lock page scroll — measured: a real\nwheel still scrolled the page behind an open modal — so this element locks\nit, exactly as the React component does.",
+      "description": "A modal dialog.\n\nA native `<dialog>` opened with `showModal()`, which from inside a shadow\nroot gives the focus trap, Escape and the backdrop for nothing — all\nmeasured: focus cannot be taken by a light-DOM button, and a real Escape\nfires `cancel` then `close`. So `trapFocus` from core is not needed here,\nunlike in the React component.\n\nThe one part of `showModal()` that cannot be relied on is where it puts\nfocus, and the gap is exactly the case every framework consumer is in. See\n`showDialog` below.\n\nWhat `showModal()` does *not* do is lock page scroll — measured: a real\nwheel still scrolled the page behind an open modal — so this element locks\nit, exactly as the React component does.",
       "formAssociated": false,
       "props": [
         {
@@ -5065,7 +5149,7 @@
       "category": "navigation",
       "reactCounterpart": null,
       "childOf": "pf-header-navigation",
-      "description": "One item in a `pf-header-navigation` or a `pf-sidebar-navigation`.\n\nShared by both, because the React library's `HeaderNavigationItem` and\n`SidebarNavigationItem` are the same shape — one element rather than two\nthat would drift. What differs is the layout, and that is the group's to\nsay: it pushes `orientation` down, which is the only thing an item cannot\nwork out for itself.\n\nWith an `href` it renders a link; without one it renders a plain box, which\nis how a framework's own router is used — slot an `<a routerLink>` or a\n`<Link>` in and leave `href` unset.\n\n`currentPage` and `orientation` are the group's to set. A consumer asks by\nsetting `current`; the group resolves every item with core's rule and\nwrites the answer to `currentPage`.",
+      "description": "One item in a `pf-header-navigation` or a `pf-sidebar-navigation`.\n\nShared by both, because the React library's `HeaderNavigationItem` and\n`SidebarNavigationItem` are the same shape — one element rather than two\nthat would drift. What differs is the layout, and that is the group's to\nsay: it pushes `orientation` down, which is the only thing an item cannot\nwork out for itself.\n\nWith an `href` it renders a link; without one it renders a plain box, which\nis how a framework's own router is used — slot an `<a routerLink>` or a\n`<Link>` in and leave `href` unset.\n\n`currentPage` and `orientation` are the group's to set. A consumer asks by\nsetting `current`; the group resolves every item with core's rule and\nwrites the answer to `currentPage`. Changing the ask tells the group, so\nthe answer follows a framework's re-render without the consumer calling\nanything.",
       "formAssociated": false,
       "props": [
         {
@@ -5132,7 +5216,13 @@
           "description": "Opens elsewhere, as on a plain anchor. Ignored without an `href`."
         }
       ],
-      "events": [],
+      "events": [
+        {
+          "name": "pfNavStructure",
+          "detail": "void",
+          "description": "Tells the group the ask changed, so it can resolve again.\n\nThe same event `pf-nav-section` emits when its items move, because the\ngroups do the same thing with both: re-read every item and resolve the\none current page. Without this a navigation resolves at load and never\nagain for a consumer who marks items through the *property*, which is\nevery framework consumer — the generated bindings set props as\nproperties, so there is no attribute change and no `slotchange` either.\nThe symptom is a navigation whose highlight never moves while the router\nworks perfectly, which is what porting `apps/demo` ran into.\n\n`current` only. Watching `currentPage` would loop, since that is what the\ngroup writes back."
+        }
+      ],
       "methods": [],
       "slots": [
         {
@@ -7449,7 +7539,7 @@
         {
           "name": "refresh",
           "signature": "refresh() => Promise<void>",
-          "description": "Re-reads the items, for a consumer who marked one current through its\n*property* — which leaves no attribute and fires no `slotchange`."
+          "description": "Re-reads the items, for a consumer who changed something the group reads\nand has no event for."
         }
       ],
       "slots": [

package/dist/esm/control-label-Cy_kHPeC.js

@@ -0,0 +1,34 @@
+/**
+ * How a form control here gets an accessible name when it has no visible one.
+ *
+ * Not in `@pitchfork-ui/core`: it is about the shadow boundary, which only
+ * this layer has.
+ *
+ * The React components extend `InputHTMLAttributes`, so
+ * `<Input aria-label="Search" />` lands the attribute on the real `<input>`
+ * and names it. An element cannot do that. `aria-label` on the host names the
+ * **host**, and the host is not the control -- the `<input>` lives in the
+ * shadow root with nothing pointing at it, so a consumer who writes the same
+ * thing gets a control with no accessible name at all and no warning. Measured
+ * against Chromium's accessibility tree: the host reports the name and the
+ * textbox inside it reports none.
+ *
+ * `aria-labelledby` has no answer either, for the rule this library keeps
+ * running into: an IDREF cannot point into a shadow root. So the text is
+ * copied across, which is what `pf-tooltip` does for its trigger's
+ * description and for the same reason.
+ *
+ * A visible `label` wins, because it is both the name and a `for` target in
+ * the control's own root -- the kind of reference that does resolve.
+ */
+function controlAriaLabel(host, label) {
+    if (label)
+        return null;
+    const copied = host.getAttribute('aria-label');
+    return copied && copied.trim().length > 0 ? copied : null;
+}
+
+export { controlAriaLabel as c };
+//# sourceMappingURL=control-label-Cy_kHPeC.js.map
+
+//# sourceMappingURL=control-label-Cy_kHPeC.js.map

package/dist/esm/control-label-Cy_kHPeC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-label-Cy_kHPeC.js","sources":["src/control-label.ts"],"sourcesContent":["/**\n * How a form control here gets an accessible name when it has no visible one.\n *\n * Not in `@pitchfork-ui/core`: it is about the shadow boundary, which only\n * this layer has.\n *\n * The React components extend `InputHTMLAttributes`, so\n * `<Input aria-label=\"Search\" />` lands the attribute on the real `<input>`\n * and names it. An element cannot do that. `aria-label` on the host names the\n * **host**, and the host is not the control -- the `<input>` lives in the\n * shadow root with nothing pointing at it, so a consumer who writes the same\n * thing gets a control with no accessible name at all and no warning. Measured\n * against Chromium's accessibility tree: the host reports the name and the\n * textbox inside it reports none.\n *\n * `aria-labelledby` has no answer either, for the rule this library keeps\n * running into: an IDREF cannot point into a shadow root. So the text is\n * copied across, which is what `pf-tooltip` does for its trigger's\n * description and for the same reason.\n *\n * A visible `label` wins, because it is both the name and a `for` target in\n * the control's own root -- the kind of reference that does resolve.\n */\nexport function controlAriaLabel(host: HTMLElement, label: string | undefined): string | null {\n  if (label) return null;\n  const copied = host.getAttribute('aria-label');\n  return copied && copied.trim().length > 0 ? copied : null;\n}\n"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACG,SAAU,gBAAgB,CAAC,IAAiB,EAAE,KAAyB,EAAA;AAC3E,IAAA,IAAI,KAAK;AAAE,QAAA,OAAO,IAAI;IACtB,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC;AAC9C,IAAA,OAAO,MAAM,IAAI,MAAM,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,MAAM,GAAG,IAAI;AAC3D;;;;"}

package/dist/esm/index-Bm6UxEit.js

@@ -278,10 +278,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './pf-metric-grid.entry.js').then(processMod, consoleError);
-                case 'pf-modal':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './pf-modal.entry.js').then(processMod, consoleError);
                 case 'pf-modal-body':
                     return import(
                       /* webpackMode: "lazy" */
@@ -506,6 +502,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './pf-heatmap.entry.js').then(processMod, consoleError);
+                case 'pf-modal':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './pf-modal.entry.js').then(processMod, consoleError);
                 case 'pf-pagination':
                     return import(
                       /* webpackMode: "lazy" */

package/dist/esm/loader.js

@@ -4,7 +4,7 @@ export { s as setNonce } from './index-Bm6UxEit.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy(JSON.parse("[[\"pf-command-palette\",[[769,\"pf-command-palette\",{\"open\":[1540],\"placeholder\":[1],\"emptyMessage\":[1,\"empty-message\"],\"label\":[1],\"dismissable\":[4],\"query\":[32],\"matchCount\":[32],\"show\":[64],\"hide\":[64],\"refresh\":[64]},[[0,\"pfCommandSelect\",\"handleCommandSelect\"]],{\"open\":[{\"syncOpen\":0}]}]]],[\"pf-date-picker\",[[577,\"pf-date-picker\",{\"name\":[513],\"value\":[1025],\"open\":[1540],\"label\":[1],\"description\":[1],\"error\":[1],\"placeholder\":[1],\"required\":[516],\"disabled\":[516],\"allowClear\":[4,\"allow-clear\"],\"min\":[1],\"max\":[1],\"startYear\":[2,\"start-year\"],\"endYear\":[2,\"end-year\"],\"showOutsideDays\":[4,\"show-outside-days\"],\"isDateDisabled\":[16],\"show\":[64],\"hide\":[64],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64]},null,{\"value\":[{\"syncFormState\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}],\"open\":[{\"syncOpen\":0}]}]]],[\"pf-tab\",[[769,\"pf-tab\",{\"value\":[513],\"disabled\":[516],\"selected\":[1540],\"variant\":[1537],\"size\":[1537],\"fullWidth\":[1540,\"full-width\"],\"icon\":[1],\"iconPlacement\":[1,\"icon-placement\"],\"count\":[2],\"badgePlacement\":[1,\"badge-placement\"]},[[0,\"click\",\"handleClick\"],[0,\"keydown\",\"handleKeyDown\"]]]]],[\"pf-tag-input\",[[577,\"pf-tag-input\",{\"name\":[513],\"value\":[1537],\"label\":[1],\"description\":[1],\"error\":[1],\"placeholder\":[1],\"max\":[2],\"allowDuplicates\":[4,\"allow-duplicates\"],\"tagVariant\":[1,\"tag-variant\"],\"required\":[516],\"disabled\":[516],\"validate\":[16],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64]},null,{\"name\":[{\"syncFormState\":0}],\"value\":[{\"syncFormState\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}]}]]],[\"pf-toaster\",[[769,\"pf-toaster\",{\"placement\":[513],\"duration\":[2],\"entries\":[32],\"toast\":[64],\"dismiss\":[64],\"dismissAll\":[64]}]]],[\"pf-accordion-item\",[[785,\"pf-accordion-item\",{\"value\":[513],\"disabled\":[516],\"expanded\":[1540],\"headingLevel\":[1026,\"heading-level\"]}]]],[\"pf-alert\",[[769,\"pf-alert\",{\"variant\":[513],\"heading\":[1],\"description\":[1],\"dismissible\":[516],\"dismissLabel\":[1,\"dismiss-label\"],\"exiting\":[32],\"hasSlottedBody\":[32],\"dismiss\":[64]}]]],[\"pf-avatar-group\",[[769,\"pf-avatar-group\",{\"max\":[2],\"size\":[513],\"total\":[2],\"label\":[1],\"overflow\":[32],\"counted\":[32],\"refresh\":[64]},null,{\"max\":[{\"handleStateChange\":0}],\"size\":[{\"handleStateChange\":0}],\"total\":[{\"handleStateChange\":0}]}]]],[\"pf-button-group-item\",[[769,\"pf-button-group-item\",{\"value\":[513],\"disabled\":[516],\"groupDisabled\":[1540,\"group-disabled\"],\"selected\":[1540],\"icon\":[1],\"dot\":[516]}]]],[\"pf-carousel\",[[769,\"pf-carousel\",{\"index\":[1026],\"loop\":[516],\"showIndicators\":[516,\"show-indicators\"],\"autoPlay\":[516,\"auto-play\"],\"autoPlayInterval\":[2,\"auto-play-interval\"],\"label\":[1],\"previousLabel\":[1,\"previous-label\"],\"nextLabel\":[1,\"next-label\"],\"total\":[32],\"refresh\":[64],\"next\":[64],\"previous\":[64]},null,{\"index\":[{\"handleIndexChange\":0}],\"loop\":[{\"handleIndexChange\":0}],\"autoPlay\":[{\"handleTimerChange\":0}],\"autoPlayInterval\":[{\"handleTimerChange\":0}]}]]],[\"pf-code-snippet\",[[769,\"pf-code-snippet\",{\"code\":[1],\"language\":[513],\"heading\":[1],\"showLineNumbers\":[516,\"show-line-numbers\"],\"maxHeight\":[2,\"max-height\"],\"copyLabel\":[1,\"copy-label\"],\"copiedLabel\":[1,\"copied-label\"],\"copyFailedLabel\":[1,\"copy-failed-label\"],\"feedbackDuration\":[2,\"feedback-duration\"],\"copied\":[32],\"failed\":[32],\"hasMarkup\":[32],\"copy\":[64]}]]],[\"pf-collapsible\",[[769,\"pf-collapsible\",{\"open\":[1540],\"disabled\":[516],\"showChevron\":[4,\"show-chevron\"],\"show\":[64],\"hide\":[64]},[[0,\"keydown\",\"handleKeyDown\"]],{\"open\":[{\"handleOpenChange\":0}]}]]],[\"pf-combobox\",[[833,\"pf-combobox\",{\"name\":[513],\"value\":[1537],\"open\":[1540],\"label\":[1],\"description\":[1],\"error\":[1],\"placeholder\":[1],\"emptyMessage\":[1,\"empty-message\"],\"required\":[516],\"disabled\":[516],\"clearable\":[4],\"clearLabel\":[1,\"clear-label\"],\"query\":[32],\"matchCount\":[32],\"show\":[64],\"hide\":[64],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64],\"refresh\":[64]},[[0,\"pfOptionSelect\",\"handleOptionSelect\"]],{\"value\":[{\"syncFormState\":0},{\"syncSelection\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}],\"open\":[{\"syncOpen\":0}]}]]],[\"pf-date-range-picker\",[[577,\"pf-date-range-picker\",{\"name\":[513],\"value\":[1025],\"open\":[1540],\"label\":[1],\"description\":[1],\"error\":[1],\"placeholder\":[1],\"required\":[516],\"disabled\":[516],\"allowClear\":[4,\"allow-clear\"],\"min\":[1],\"max\":[1],\"startYear\":[2,\"start-year\"],\"endYear\":[2,\"end-year\"],\"isDateDisabled\":[16],\"leftMonth\":[32],\"focusedDate\":[32],\"hovered\":[32],\"awaitingEnd\":[32],\"show\":[64],\"hide\":[64],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64]},null,{\"value\":[{\"syncDisplayedMonths\":0},{\"syncFormState\":0}],\"name\":[{\"syncFormState\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}],\"open\":[{\"syncOpen\":0}]}]]],[\"pf-empty-state\",[[769,\"pf-empty-state\",{\"size\":[513],\"icon\":[1],\"hasIcon\":[32],\"hasAction\":[32]}]]],[\"pf-file-uploader\",[[577,\"pf-file-uploader\",{\"name\":[513],\"files\":[1040],\"accept\":[1],\"multiple\":[516],\"maxFiles\":[2,\"max-files\"],\"maxFileSize\":[2,\"max-file-size\"],\"label\":[1],\"description\":[1],\"error\":[1],\"required\":[516],\"disabled\":[516],\"rejection\":[32],\"dragDepth\":[32],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64],\"open\":[64]},null,{\"files\":[{\"syncFormState\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}],\"rejection\":[{\"syncFormState\":0}]}]]],[\"pf-inline-cta\",[[769,\"pf-inline-cta\",{\"tone\":[513],\"icon\":[1],\"dismissible\":[516],\"dismissLabel\":[1,\"dismiss-label\"],\"exiting\":[1540],\"hasIcon\":[32],\"hasAction\":[32],\"dismiss\":[64]}]]],[\"pf-metric-card\",[[769,\"pf-metric-card\",{\"trend\":[513],\"icon\":[1],\"hasIcon\":[32],\"hasAction\":[32],\"hasTrend\":[32]}]]],[\"pf-multi-select\",[[833,\"pf-multi-select\",{\"name\":[513],\"value\":[1537],\"open\":[1540],\"label\":[1],\"description\":[1],\"error\":[1],\"placeholder\":[1],\"required\":[516],\"disabled\":[516],\"maxVisibleOptions\":[2,\"max-visible-options\"],\"chips\":[32],\"show\":[64],\"hide\":[64],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64],\"refresh\":[64]},[[0,\"pfOptionSelect\",\"handleOptionSelect\"],[0,\"keydown\",\"handleKeyDown\"]],{\"name\":[{\"syncFormState\":0}],\"value\":[{\"syncFormState\":0},{\"syncOptions\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}],\"open\":[{\"syncOpen\":0}]}]]],[\"pf-number-input\",[[593,\"pf-number-input\",{\"name\":[513],\"value\":[1025],\"min\":[2],\"max\":[2],\"step\":[2],\"label\":[1],\"description\":[1],\"error\":[1],\"placeholder\":[1],\"required\":[516],\"disabled\":[516],\"decrementLabel\":[1,\"decrement-label\"],\"incrementLabel\":[1,\"increment-label\"],\"draft\":[32],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64],\"stepBy\":[64]},null,{\"value\":[{\"syncFormState\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}]}]]],[\"pf-rating-badge\",[[513,\"pf-rating-badge\",{\"value\":[2],\"max\":[2],\"reviews\":[2],\"size\":[513]}]]],[\"pf-rating-stars\",[[513,\"pf-rating-stars\",{\"value\":[2],\"max\":[2],\"size\":[2],\"showValue\":[4,\"show-value\"],\"label\":[1]}]]],[\"pf-select\",[[833,\"pf-select\",{\"name\":[513],\"value\":[1537],\"open\":[1540],\"label\":[1],\"description\":[1],\"error\":[1],\"placeholder\":[1],\"required\":[516],\"disabled\":[516],\"maxVisibleOptions\":[2,\"max-visible-options\"],\"selectedLabel\":[32],\"show\":[64],\"hide\":[64],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64],\"refresh\":[64]},[[0,\"pfOptionSelect\",\"handleOptionSelect\"],[0,\"keydown\",\"handleKeyDown\"]],{\"value\":[{\"syncFormState\":0},{\"syncOptions\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}],\"open\":[{\"syncOpen\":0}]}]]],[\"pf-time-picker\",[[577,\"pf-time-picker\",{\"name\":[513],\"value\":[1025],\"open\":[1540],\"hourCycle\":[2,\"hour-cycle\"],\"minuteStep\":[2,\"minute-step\"],\"label\":[1],\"description\":[1],\"error\":[1],\"placeholder\":[1],\"required\":[516],\"disabled\":[516],\"show\":[64],\"hide\":[64],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64]},null,{\"value\":[{\"syncFormState\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}],\"open\":[{\"syncOpen\":0}]}]]],[\"pf-tree-item\",[[769,\"pf-tree-item\",{\"value\":[513],\"disabled\":[516],\"icon\":[1],\"level\":[1026],\"selected\":[1540],\"expanded\":[1540],\"hasChildren\":[1540,\"has-children\"],\"active\":[1540],\"hasBadge\":[32]}]]],[\"pf-accordion\",[[769,\"pf-accordion\",{\"value\":[1537],\"type\":[513],\"headingLevel\":[2,\"heading-level\"],\"refresh\":[64]},[[0,\"pfAccordionToggle\",\"handleToggle\"],[0,\"keydown\",\"handleKeyDown\"]],{\"value\":[{\"handleStateChange\":0}],\"type\":[{\"handleStateChange\":0}],\"headingLevel\":[{\"handleStateChange\":0}]}]]],[\"pf-badge-group\",[[513,\"pf-badge-group\",{\"label\":[1],\"message\":[1],\"color\":[513],\"appearance\":[513],\"badgePosition\":[513,\"badge-position\"]}]]],[\"pf-bar-chart\",[[769,\"pf-bar-chart\",{\"data\":[1],\"stacked\":[516],\"showLegend\":[516,\"show-legend\"],\"yAxisLabel\":[1,\"y-axis-label\"],\"label\":[1],\"series\":[32],\"refresh\":[64]},null,{\"data\":[{\"sync\":0}]}]]],[\"pf-breadcrumb\",[[769,\"pf-breadcrumb\",{\"href\":[513],\"current\":[516],\"currentPage\":[1540,\"current-page\"],\"last\":[1540],\"separator\":[1025]}]]],[\"pf-breadcrumbs\",[[769,\"pf-breadcrumbs\",{\"label\":[1],\"separator\":[1],\"refresh\":[64]},null,{\"separator\":[{\"handleSeparatorChange\":0}]}]]],[\"pf-button\",[[785,\"pf-button\",{\"variant\":[513],\"size\":[513],\"fullWidth\":[516,\"full-width\"],\"loading\":[516],\"disabled\":[516],\"type\":[1],\"label\":[1]}]]],[\"pf-button-group\",[[769,\"pf-button-group\",{\"value\":[1537],\"multiple\":[516],\"disabled\":[516],\"refresh\":[64]},[[0,\"pfButtonGroupSelect\",\"handleSelect\"]],{\"value\":[{\"handleStateChange\":0}],\"multiple\":[{\"handleStateChange\":0}],\"disabled\":[{\"handleStateChange\":0}]}]]],[\"pf-card\",[[257,\"pf-card\"]]],[\"pf-card-content\",[[257,\"pf-card-content\"]]],[\"pf-card-footer\",[[257,\"pf-card-footer\"]]],[\"pf-card-header\",[[257,\"pf-card-header\"]]],[\"pf-carousel-slide\",[[769,\"pf-carousel-slide\",{\"active\":[1540],\"position\":[1026],\"total\":[1026]}]]],[\"pf-chart-series\",[[769,\"pf-chart-series\",{\"seriesKey\":[513,\"series-key\"],\"color\":[513],\"dashed\":[516],\"swatch\":[1025]}]]],[\"pf-checkbox\",[[593,\"pf-checkbox\",{\"name\":[513],\"checked\":[1540],\"value\":[1],\"label\":[1],\"error\":[1],\"required\":[516],\"disabled\":[516],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64]},null,{\"checked\":[{\"syncFormState\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}],\"value\":[{\"syncFormState\":0}]}]]],[\"pf-command-group\",[[769,\"pf-command-group\",{\"label\":[1]}]]],[\"pf-command-item\",[[769,\"pf-command-item\",{\"value\":[513],\"description\":[1],\"disabled\":[516]}]]],[\"pf-content-divider\",[[769,\"pf-content-divider\",{\"orientation\":[513],\"inset\":[516],\"hasLabel\":[32]}]]],[\"pf-context-menu\",[[769,\"pf-context-menu\",{\"open\":[1540],\"label\":[1],\"disabled\":[516],\"showAt\":[64],\"hide\":[64]},[[0,\"contextmenu\",\"handleContextMenu\"],[0,\"pfMenuSelect\",\"handleMenuSelect\"],[0,\"keydown\",\"handleKeyDown\"]],{\"open\":[{\"syncOpen\":0}]}]]],[\"pf-credit-card\",[[513,\"pf-credit-card\",{\"brand\":[513],\"cardNumber\":[1,\"card-number\"],\"cardholderName\":[1,\"cardholder-name\"],\"expiry\":[1],\"cvc\":[1],\"masked\":[516]}]]],[\"pf-dropdown\",[[769,\"pf-dropdown\",{\"open\":[1540],\"align\":[1],\"label\":[1],\"disabled\":[516],\"show\":[64],\"hide\":[64]},[[0,\"click\",\"handleClick\"],[0,\"pfMenuSelect\",\"handleMenuSelect\"],[0,\"keydown\",\"handleKeyDown\"]],{\"open\":[{\"syncOpen\":0}]}]]],[\"pf-gauge-chart\",[[769,\"pf-gauge-chart\",{\"value\":[2],\"max\":[2],\"size\":[2],\"strokeWidth\":[2,\"stroke-width\"],\"color\":[1],\"label\":[1]}]]],[\"pf-header-navigation\",[[769,\"pf-header-navigation\",{\"label\":[1],\"hasBrand\":[32],\"hasActions\":[32],\"refresh\":[64]}]]],[\"pf-heatmap\",[[769,\"pf-heatmap\",{\"data\":[1],\"startDate\":[1,\"start-date\"],\"endDate\":[1,\"end-date\"],\"levels\":[2],\"weekStartsOn\":[2,\"week-starts-on\"],\"cellSize\":[2,\"cell-size\"],\"cellGap\":[2,\"cell-gap\"],\"showWeekdayLabels\":[516,\"show-weekday-labels\"],\"showMonthLabels\":[516,\"show-month-labels\"],\"label\":[1]}]]],[\"pf-input\",[[593,\"pf-input\",{\"name\":[513],\"value\":[1025],\"type\":[513],\"label\":[1],\"description\":[1],\"error\":[1],\"placeholder\":[1],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64]},null,{\"value\":[{\"syncFormState\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}]}]]],[\"pf-line-chart\",[[769,\"pf-line-chart\",{\"data\":[1],\"area\":[516],\"curved\":[516],\"showLegend\":[516,\"show-legend\"],\"yAxisLabel\":[1,\"y-axis-label\"],\"label\":[1],\"series\":[32],\"refresh\":[64]},null,{\"data\":[{\"sync\":0}]}]]],[\"pf-loading-dots\",[[513,\"pf-loading-dots\",{\"size\":[513],\"label\":[1]}]]],[\"pf-loading-skeleton\",[[513,\"pf-loading-skeleton\",{\"width\":[8],\"height\":[8],\"rounded\":[516],\"label\":[1]}]]],[\"pf-loading-spinner\",[[513,\"pf-loading-spinner\",{\"size\":[2],\"label\":[1]}]]],[\"pf-menu-item\",[[769,\"pf-menu-item\",{\"value\":[513],\"disabled\":[516],\"destructive\":[516]},[[0,\"click\",\"handleClick\"],[0,\"keydown\",\"handleKeyDown\"]]]]],[\"pf-menu-separator\",[[1,\"pf-menu-separator\"]]],[\"pf-metric-grid\",[[257,\"pf-metric-grid\"]]],[\"pf-modal\",[[769,\"pf-modal\",{\"open\":[1540],\"size\":[513],\"label\":[1],\"dismissable\":[4],\"showCloseButton\":[4,\"show-close-button\"],\"show\":[64],\"hide\":[64]},null,{\"open\":[{\"syncOpen\":0}]}]]],[\"pf-modal-body\",[[257,\"pf-modal-body\"]]],[\"pf-modal-footer\",[[257,\"pf-modal-footer\"]]],[\"pf-modal-header\",[[257,\"pf-modal-header\"]]],[\"pf-nav-item\",[[769,\"pf-nav-item\",{\"href\":[513],\"target\":[1],\"rel\":[1],\"current\":[516],\"currentPage\":[1540,\"current-page\"],\"disabled\":[516],\"orientation\":[1537]}]]],[\"pf-nav-section\",[[769,\"pf-nav-section\",{\"hasTitle\":[32]}]]],[\"pf-option\",[[769,\"pf-option\",{\"value\":[513],\"disabled\":[516],\"selected\":[1540],\"active\":[1540]}]]],[\"pf-page-header\",[[769,\"pf-page-header\",{\"hasBreadcrumbs\":[32],\"hasMetadata\":[32],\"hasActions\":[32]}]]],[\"pf-pagination\",[[769,\"pf-pagination\",{\"page\":[1026],\"totalPages\":[2,\"total-pages\"],\"siblingCount\":[2,\"sibling-count\"],\"boundaryCount\":[2,\"boundary-count\"],\"showPrevNext\":[516,\"show-prev-next\"],\"disabled\":[516],\"label\":[1]}]]],[\"pf-pie-chart\",[[769,\"pf-pie-chart\",{\"size\":[2],\"cutout\":[2],\"showLegend\":[516,\"show-legend\"],\"label\":[1],\"gradient\":[32],\"hasData\":[32],\"refresh\":[64]},null,{\"cutout\":[{\"sync\":0}]}]]],[\"pf-pie-slice\",[[769,\"pf-pie-slice\",{\"value\":[514],\"color\":[513],\"swatch\":[1025],\"share\":[1026],\"drawn\":[1540]}]]],[\"pf-popover\",[[769,\"pf-popover\",{\"open\":[1540],\"align\":[1],\"label\":[1],\"dismissable\":[4],\"show\":[64],\"hide\":[64]},[[0,\"click\",\"handleClick\"],[0,\"keydown\",\"handleKeyDown\"]],{\"open\":[{\"syncOpen\":0}]}]]],[\"pf-progress-bar\",[[513,\"pf-progress-bar\",{\"value\":[2],\"max\":[2],\"showValue\":[516,\"show-value\"],\"label\":[1]}]]],[\"pf-progress-circle\",[[513,\"pf-progress-circle\",{\"value\":[2],\"max\":[2],\"size\":[2],\"strokeWidth\":[2,\"stroke-width\"],\"showValue\":[516,\"show-value\"],\"label\":[1]}]]],[\"pf-progress-step\",[[769,\"pf-progress-step\",{\"status\":[513],\"state\":[1537],\"position\":[1026],\"last\":[1540],\"orientation\":[1537]}]]],[\"pf-progress-steps\",[[769,\"pf-progress-steps\",{\"orientation\":[513],\"refresh\":[64]},null,{\"orientation\":[{\"handleOrientationChange\":0}]}]]],[\"pf-radar-axis\",[[513,\"pf-radar-axis\",{\"label\":[513],\"value\":[514],\"drawn\":[1540]}]]],[\"pf-radar-chart\",[[769,\"pf-radar-chart\",{\"size\":[2],\"max\":[2],\"levels\":[2],\"showAxes\":[516,\"show-axes\"],\"showLegend\":[516,\"show-legend\"],\"label\":[1],\"axes\":[32],\"refresh\":[64]},null,{\"max\":[{\"sync\":0}]}]]],[\"pf-radio-button\",[[785,\"pf-radio-button\",{\"value\":[513],\"checked\":[1540],\"disabled\":[516]}]]],[\"pf-radio-group\",[[833,\"pf-radio-group\",{\"name\":[513],\"value\":[1025],\"legend\":[1],\"error\":[1],\"orientation\":[513],\"required\":[516],\"disabled\":[516],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64]},[[0,\"pfRadioSelect\",\"handleSelect\"],[0,\"keydown\",\"handleKeyDown\"]],{\"value\":[{\"syncFormState\":0},{\"syncChildren\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}],\"disabled\":[{\"syncChildren\":0}]}]]],[\"pf-resizable\",[[769,\"pf-resizable\",{\"orientation\":[513],\"size\":[1026],\"min\":[2],\"max\":[2],\"step\":[2],\"handleLabel\":[1,\"handle-label\"]},[[1,\"pointerup\",\"handlePointerEnd\"],[1,\"pointercancel\",\"handlePointerEnd\"]],{\"min\":[{\"handleBoundsChange\":0}],\"max\":[{\"handleBoundsChange\":0}]}]]],[\"pf-rich-text-editor\",[[577,\"pf-rich-text-editor\",{\"name\":[513],\"value\":[1025],\"label\":[1],\"description\":[1],\"error\":[1],\"placeholder\":[1],\"minHeight\":[2,\"min-height\"],\"characterMax\":[2,\"character-max\"],\"required\":[516],\"disabled\":[516],\"characterCount\":[32],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64],\"format\":[64]},null,{\"value\":[{\"handleValueChange\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}]}]]],[\"pf-scroll-area\",[[769,\"pf-scroll-area\",{\"orientation\":[513],\"focusable\":[4]}]]],[\"pf-section-footer\",[[769,\"pf-section-footer\",{\"divider\":[516],\"align\":[513],\"hasHeading\":[32],\"hasActions\":[32]}]]],[\"pf-section-header\",[[769,\"pf-section-header\",{\"divider\":[516],\"align\":[513],\"hasMetadata\":[32],\"hasActions\":[32]}]]],[\"pf-sidebar-navigation\",[[769,\"pf-sidebar-navigation\",{\"label\":[1],\"hasHeader\":[32],\"hasFooter\":[32],\"refresh\":[64]},[[0,\"pfNavStructure\",\"handleStructureChange\"]]]]],[\"pf-slideout-menu\",[[769,\"pf-slideout-menu\",{\"open\":[1540],\"placement\":[513],\"size\":[513],\"heading\":[1],\"description\":[1],\"label\":[1],\"dismissable\":[4],\"showCloseButton\":[4,\"show-close-button\"],\"hasFooter\":[32],\"show\":[64],\"hide\":[64]},null,{\"open\":[{\"syncOpen\":0}]}]]],[\"pf-slider\",[[593,\"pf-slider\",{\"name\":[513],\"value\":[1026],\"min\":[2],\"max\":[2],\"step\":[2],\"label\":[1],\"description\":[1],\"error\":[1],\"showValue\":[516,\"show-value\"],\"disabled\":[516],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64]},null,{\"value\":[{\"syncFormState\":0}],\"error\":[{\"syncFormState\":0}],\"min\":[{\"syncFormState\":0}],\"max\":[{\"syncFormState\":0}]}]]],[\"pf-sparkline\",[[513,\"pf-sparkline\",{\"data\":[1],\"width\":[2],\"height\":[2],\"variant\":[513],\"strokeWidth\":[2,\"stroke-width\"],\"color\":[1],\"endDot\":[516,\"end-dot\"],\"animated\":[516],\"label\":[1]}]]],[\"pf-switch\",[[593,\"pf-switch\",{\"name\":[513],\"checked\":[1540],\"value\":[1],\"label\":[1],\"error\":[1],\"required\":[516],\"disabled\":[516],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64]},null,{\"checked\":[{\"syncFormState\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}],\"value\":[{\"syncFormState\":0}]}]]],[\"pf-tab-panel\",[[769,\"pf-tab-panel\",{\"value\":[513],\"active\":[1540]}]]],[\"pf-table\",[[769,\"pf-table\",{\"dense\":[516],\"striped\":[516],\"hoverable\":[516],\"stickyHeader\":[516,\"sticky-header\"],\"sortKey\":[1537,\"sort-key\"],\"sortDirection\":[1537,\"sort-direction\"],\"label\":[1],\"isEmpty\":[32],\"hasCaption\":[32],\"refresh\":[64]},[[0,\"pfTableSort\",\"handleSort\"]],{\"sortKey\":[{\"handleSortChange\":0}],\"sortDirection\":[{\"handleSortChange\":0}]}]]],[\"pf-table-cell\",[[769,\"pf-table-cell\",{\"head\":[1540],\"last\":[1540],\"align\":[513],\"width\":[1],\"sortKey\":[513,\"sort-key\"],\"sortable\":[516],\"sort\":[1025]}]]],[\"pf-table-row\",[[769,\"pf-table-row\",{\"head\":[516],\"odd\":[1540],\"last\":[1540]},null,{\"head\":[{\"sync\":0}],\"last\":[{\"sync\":0}]}]]],[\"pf-tabs\",[[769,\"pf-tabs\",{\"value\":[1025],\"variant\":[513],\"size\":[513],\"fullWidth\":[516,\"full-width\"],\"refresh\":[64]},[[0,\"pfTabSelect\",\"handleTabSelect\"],[0,\"keydown\",\"handleKeyDown\"]],{\"value\":[{\"handleStateChange\":0}],\"variant\":[{\"handleStateChange\":0}],\"size\":[{\"handleStateChange\":0}],\"fullWidth\":[{\"handleStateChange\":0}]}]]],[\"pf-textarea\",[[593,\"pf-textarea\",{\"name\":[513],\"value\":[1025],\"rows\":[2],\"label\":[1],\"description\":[1],\"error\":[1],\"placeholder\":[1],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64]},null,{\"value\":[{\"syncFormState\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}]}]]],[\"pf-timeline\",[[769,\"pf-timeline\",{\"label\":[1],\"refresh\":[64]},null,{\"label\":[{\"handleLabelChange\":0}]}]]],[\"pf-timeline-item\",[[769,\"pf-timeline-item\",{\"tone\":[513],\"last\":[1540],\"hasIcon\":[32]}]]],[\"pf-toolbar\",[[769,\"pf-toolbar\",{\"orientation\":[513]},[[0,\"focusin\",\"handleFocusIn\"],[0,\"keydown\",\"handleKeyDown\"]],{\"orientation\":[{\"sync\":0}]}]]],[\"pf-toolbar-separator\",[[513,\"pf-toolbar-separator\",{\"orientation\":[513]}]]],[\"pf-tooltip\",[[769,\"pf-tooltip\",{\"placement\":[513],\"delay\":[2],\"open\":[4],\"disabled\":[516],\"resolvedSide\":[32]},[[1,\"pointerenter\",\"handlePointerEnter\"],[1,\"pointerleave\",\"handlePointerLeave\"],[0,\"focusin\",\"handleFocusIn\"],[0,\"focusout\",\"handleFocusOut\"],[0,\"keydown\",\"handleKeyDown\"]],{\"open\":[{\"syncOpen\":0}]}]]],[\"pf-tree-view\",[[769,\"pf-tree-view\",{\"value\":[1537],\"expanded\":[1537],\"label\":[1],\"activeValue\":[32],\"refresh\":[64],\"expandAll\":[64],\"collapseAll\":[64]},[[0,\"pfTreeSelect\",\"handleSelect\"],[0,\"pfTreeToggle\",\"handleToggle\"],[0,\"keydown\",\"handleKeyDown\"],[0,\"pfTreeStructure\",\"handleStructureChange\"]],{\"value\":[{\"handleStateChange\":0}],\"expanded\":[{\"handleStateChange\":0}]}]]],[\"pf-utility-button\",[[785,\"pf-utility-button\",{\"variant\":[513],\"size\":[513],\"disabled\":[516],\"type\":[1],\"label\":[1],\"tooltip\":[1]}]]],[\"pf-video-player\",[[769,\"pf-video-player\",{\"src\":[1],\"sources\":[16],\"tracks\":[16],\"label\":[1],\"description\":[1],\"error\":[1],\"aspectRatio\":[513,\"aspect-ratio\"],\"controls\":[4],\"poster\":[1],\"preload\":[1],\"muted\":[516],\"loop\":[516],\"autoplay\":[516],\"play\":[64],\"pause\":[64],\"getVideoElement\":[64]}]]],[\"pf-visually-hidden\",[[769,\"pf-visually-hidden\",{\"focusable\":[516]}]]],[\"pf-icon\",[[513,\"pf-icon\",{\"name\":[1],\"label\":[1]}]]],[\"pf-calendar\",[[513,\"pf-calendar\",{\"value\":[1537],\"min\":[1],\"max\":[1],\"startYear\":[2,\"start-year\"],\"endYear\":[2,\"end-year\"],\"showOutsideDays\":[4,\"show-outside-days\"],\"label\":[1],\"isDateDisabled\":[16],\"displayMonth\":[32],\"focusedDate\":[32],\"goToMonth\":[64],\"focusSelectedDay\":[64]},null,{\"value\":[{\"syncValue\":0}]}]]],[\"pf-notification\",[[769,\"pf-notification\",{\"variant\":[513],\"heading\":[1],\"description\":[1],\"dismissable\":[516],\"exiting\":[1540],\"hasSlottedBody\":[32],\"dismiss\":[64]}]]],[\"pf-tag\",[[769,\"pf-tag\",{\"variant\":[513],\"dismissible\":[516],\"dismissLabel\":[1,\"dismiss-label\"]}]]],[\"pf-avatar\",[[769,\"pf-avatar\",{\"src\":[1],\"alt\":[1],\"name\":[1],\"size\":[513],\"status\":[513]}]]],[\"pf-badge\",[[769,\"pf-badge\",{\"variant\":[513]}]]],[\"pf-kbd\",[[769,\"pf-kbd\",{\"keys\":[16],\"size\":[513],\"separator\":[1]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"pf-command-palette\",[[769,\"pf-command-palette\",{\"open\":[1540],\"placeholder\":[1],\"emptyMessage\":[1,\"empty-message\"],\"label\":[1],\"dismissable\":[4],\"query\":[32],\"matchCount\":[32],\"show\":[64],\"hide\":[64],\"refresh\":[64]},[[0,\"pfCommandSelect\",\"handleCommandSelect\"]],{\"open\":[{\"syncOpen\":0}]}]]],[\"pf-date-picker\",[[577,\"pf-date-picker\",{\"name\":[513],\"value\":[1025],\"open\":[1540],\"label\":[1],\"description\":[1],\"error\":[1],\"placeholder\":[1],\"required\":[516],\"disabled\":[516],\"allowClear\":[4,\"allow-clear\"],\"min\":[1],\"max\":[1],\"startYear\":[2,\"start-year\"],\"endYear\":[2,\"end-year\"],\"showOutsideDays\":[4,\"show-outside-days\"],\"isDateDisabled\":[16],\"show\":[64],\"hide\":[64],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64]},null,{\"value\":[{\"syncFormState\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}],\"open\":[{\"syncOpen\":0}]}]]],[\"pf-tab\",[[769,\"pf-tab\",{\"value\":[513],\"disabled\":[516],\"selected\":[1540],\"variant\":[1537],\"size\":[1537],\"fullWidth\":[1540,\"full-width\"],\"icon\":[1],\"iconPlacement\":[1,\"icon-placement\"],\"count\":[2],\"badgePlacement\":[1,\"badge-placement\"]},[[0,\"click\",\"handleClick\"],[0,\"keydown\",\"handleKeyDown\"]]]]],[\"pf-tag-input\",[[577,\"pf-tag-input\",{\"name\":[513],\"value\":[1537],\"label\":[1],\"description\":[1],\"error\":[1],\"placeholder\":[1],\"max\":[2],\"allowDuplicates\":[4,\"allow-duplicates\"],\"tagVariant\":[1,\"tag-variant\"],\"required\":[516],\"disabled\":[516],\"validate\":[16],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64]},null,{\"name\":[{\"syncFormState\":0}],\"value\":[{\"syncFormState\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}]}]]],[\"pf-toaster\",[[769,\"pf-toaster\",{\"placement\":[513],\"duration\":[2],\"entries\":[32],\"toast\":[64],\"dismiss\":[64],\"dismissAll\":[64]}]]],[\"pf-accordion-item\",[[785,\"pf-accordion-item\",{\"value\":[513],\"disabled\":[516],\"expanded\":[1540],\"headingLevel\":[1026,\"heading-level\"]}]]],[\"pf-alert\",[[769,\"pf-alert\",{\"variant\":[513],\"heading\":[1],\"description\":[1],\"dismissible\":[516],\"dismissLabel\":[1,\"dismiss-label\"],\"exiting\":[32],\"hasSlottedBody\":[32],\"dismiss\":[64]}]]],[\"pf-avatar-group\",[[769,\"pf-avatar-group\",{\"max\":[2],\"size\":[513],\"total\":[2],\"label\":[1],\"overflow\":[32],\"counted\":[32],\"refresh\":[64]},null,{\"max\":[{\"handleStateChange\":0}],\"size\":[{\"handleStateChange\":0}],\"total\":[{\"handleStateChange\":0}]}]]],[\"pf-button-group-item\",[[769,\"pf-button-group-item\",{\"value\":[513],\"disabled\":[516],\"groupDisabled\":[1540,\"group-disabled\"],\"selected\":[1540],\"icon\":[1],\"dot\":[516]}]]],[\"pf-carousel\",[[769,\"pf-carousel\",{\"index\":[1026],\"loop\":[516],\"showIndicators\":[516,\"show-indicators\"],\"autoPlay\":[516,\"auto-play\"],\"autoPlayInterval\":[2,\"auto-play-interval\"],\"label\":[1],\"previousLabel\":[1,\"previous-label\"],\"nextLabel\":[1,\"next-label\"],\"total\":[32],\"refresh\":[64],\"next\":[64],\"previous\":[64]},null,{\"index\":[{\"handleIndexChange\":0}],\"loop\":[{\"handleIndexChange\":0}],\"autoPlay\":[{\"handleTimerChange\":0}],\"autoPlayInterval\":[{\"handleTimerChange\":0}]}]]],[\"pf-code-snippet\",[[769,\"pf-code-snippet\",{\"code\":[1],\"language\":[513],\"heading\":[1],\"showLineNumbers\":[516,\"show-line-numbers\"],\"maxHeight\":[2,\"max-height\"],\"copyLabel\":[1,\"copy-label\"],\"copiedLabel\":[1,\"copied-label\"],\"copyFailedLabel\":[1,\"copy-failed-label\"],\"feedbackDuration\":[2,\"feedback-duration\"],\"copied\":[32],\"failed\":[32],\"hasMarkup\":[32],\"copy\":[64]}]]],[\"pf-collapsible\",[[769,\"pf-collapsible\",{\"open\":[1540],\"disabled\":[516],\"showChevron\":[4,\"show-chevron\"],\"show\":[64],\"hide\":[64]},[[0,\"keydown\",\"handleKeyDown\"]],{\"open\":[{\"handleOpenChange\":0}]}]]],[\"pf-combobox\",[[833,\"pf-combobox\",{\"name\":[513],\"value\":[1537],\"open\":[1540],\"label\":[1],\"description\":[1],\"error\":[1],\"placeholder\":[1],\"emptyMessage\":[1,\"empty-message\"],\"required\":[516],\"disabled\":[516],\"clearable\":[4],\"clearLabel\":[1,\"clear-label\"],\"query\":[32],\"matchCount\":[32],\"show\":[64],\"hide\":[64],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64],\"refresh\":[64]},[[0,\"pfOptionSelect\",\"handleOptionSelect\"]],{\"value\":[{\"syncFormState\":0},{\"syncSelection\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}],\"open\":[{\"syncOpen\":0}]}]]],[\"pf-date-range-picker\",[[577,\"pf-date-range-picker\",{\"name\":[513],\"value\":[1025],\"open\":[1540],\"label\":[1],\"description\":[1],\"error\":[1],\"placeholder\":[1],\"required\":[516],\"disabled\":[516],\"allowClear\":[4,\"allow-clear\"],\"min\":[1],\"max\":[1],\"startYear\":[2,\"start-year\"],\"endYear\":[2,\"end-year\"],\"isDateDisabled\":[16],\"leftMonth\":[32],\"focusedDate\":[32],\"hovered\":[32],\"awaitingEnd\":[32],\"show\":[64],\"hide\":[64],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64]},null,{\"value\":[{\"syncDisplayedMonths\":0},{\"syncFormState\":0}],\"name\":[{\"syncFormState\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}],\"open\":[{\"syncOpen\":0}]}]]],[\"pf-empty-state\",[[769,\"pf-empty-state\",{\"size\":[513],\"icon\":[1],\"hasIcon\":[32],\"hasAction\":[32]}]]],[\"pf-file-uploader\",[[577,\"pf-file-uploader\",{\"name\":[513],\"files\":[1040],\"accept\":[1],\"multiple\":[516],\"maxFiles\":[2,\"max-files\"],\"maxFileSize\":[2,\"max-file-size\"],\"label\":[1],\"description\":[1],\"error\":[1],\"required\":[516],\"disabled\":[516],\"rejection\":[32],\"dragDepth\":[32],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64],\"open\":[64]},null,{\"files\":[{\"syncFormState\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}],\"rejection\":[{\"syncFormState\":0}]}]]],[\"pf-inline-cta\",[[769,\"pf-inline-cta\",{\"tone\":[513],\"icon\":[1],\"dismissible\":[516],\"dismissLabel\":[1,\"dismiss-label\"],\"exiting\":[1540],\"hasIcon\":[32],\"hasAction\":[32],\"dismiss\":[64]}]]],[\"pf-metric-card\",[[769,\"pf-metric-card\",{\"trend\":[513],\"icon\":[1],\"hasIcon\":[32],\"hasAction\":[32],\"hasTrend\":[32]}]]],[\"pf-multi-select\",[[833,\"pf-multi-select\",{\"name\":[513],\"value\":[1537],\"open\":[1540],\"label\":[1],\"description\":[1],\"error\":[1],\"placeholder\":[1],\"required\":[516],\"disabled\":[516],\"maxVisibleOptions\":[2,\"max-visible-options\"],\"chips\":[32],\"show\":[64],\"hide\":[64],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64],\"refresh\":[64]},[[0,\"pfOptionSelect\",\"handleOptionSelect\"],[0,\"keydown\",\"handleKeyDown\"]],{\"name\":[{\"syncFormState\":0}],\"value\":[{\"syncFormState\":0},{\"syncOptions\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}],\"open\":[{\"syncOpen\":0}]}]]],[\"pf-number-input\",[[593,\"pf-number-input\",{\"name\":[513],\"value\":[1025],\"min\":[2],\"max\":[2],\"step\":[2],\"label\":[1],\"description\":[1],\"error\":[1],\"placeholder\":[1],\"required\":[516],\"disabled\":[516],\"decrementLabel\":[1,\"decrement-label\"],\"incrementLabel\":[1,\"increment-label\"],\"draft\":[32],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64],\"stepBy\":[64]},null,{\"value\":[{\"syncFormState\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}]}]]],[\"pf-rating-badge\",[[513,\"pf-rating-badge\",{\"value\":[2],\"max\":[2],\"reviews\":[2],\"size\":[513]}]]],[\"pf-rating-stars\",[[513,\"pf-rating-stars\",{\"value\":[2],\"max\":[2],\"size\":[2],\"showValue\":[4,\"show-value\"],\"label\":[1]}]]],[\"pf-select\",[[833,\"pf-select\",{\"name\":[513],\"value\":[1537],\"open\":[1540],\"label\":[1],\"description\":[1],\"error\":[1],\"placeholder\":[1],\"required\":[516],\"disabled\":[516],\"maxVisibleOptions\":[2,\"max-visible-options\"],\"selectedLabel\":[32],\"show\":[64],\"hide\":[64],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64],\"refresh\":[64]},[[0,\"pfOptionSelect\",\"handleOptionSelect\"],[0,\"keydown\",\"handleKeyDown\"]],{\"value\":[{\"syncFormState\":0},{\"syncOptions\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}],\"open\":[{\"syncOpen\":0}]}]]],[\"pf-time-picker\",[[577,\"pf-time-picker\",{\"name\":[513],\"value\":[1025],\"open\":[1540],\"hourCycle\":[2,\"hour-cycle\"],\"minuteStep\":[2,\"minute-step\"],\"label\":[1],\"description\":[1],\"error\":[1],\"placeholder\":[1],\"required\":[516],\"disabled\":[516],\"show\":[64],\"hide\":[64],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64]},null,{\"value\":[{\"syncFormState\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}],\"open\":[{\"syncOpen\":0}]}]]],[\"pf-tree-item\",[[769,\"pf-tree-item\",{\"value\":[513],\"disabled\":[516],\"icon\":[1],\"level\":[1026],\"selected\":[1540],\"expanded\":[1540],\"hasChildren\":[1540,\"has-children\"],\"active\":[1540],\"hasBadge\":[32]}]]],[\"pf-accordion\",[[769,\"pf-accordion\",{\"value\":[1537],\"type\":[513],\"headingLevel\":[2,\"heading-level\"],\"refresh\":[64]},[[0,\"pfAccordionToggle\",\"handleToggle\"],[0,\"keydown\",\"handleKeyDown\"]],{\"value\":[{\"handleStateChange\":0}],\"type\":[{\"handleStateChange\":0}],\"headingLevel\":[{\"handleStateChange\":0}]}]]],[\"pf-badge-group\",[[513,\"pf-badge-group\",{\"label\":[1],\"message\":[1],\"color\":[513],\"appearance\":[513],\"badgePosition\":[513,\"badge-position\"]}]]],[\"pf-bar-chart\",[[769,\"pf-bar-chart\",{\"data\":[1],\"stacked\":[516],\"showLegend\":[516,\"show-legend\"],\"yAxisLabel\":[1,\"y-axis-label\"],\"label\":[1],\"series\":[32],\"refresh\":[64]},null,{\"data\":[{\"sync\":0}]}]]],[\"pf-breadcrumb\",[[769,\"pf-breadcrumb\",{\"href\":[513],\"current\":[516],\"currentPage\":[1540,\"current-page\"],\"last\":[1540],\"separator\":[1025]}]]],[\"pf-breadcrumbs\",[[769,\"pf-breadcrumbs\",{\"label\":[1],\"separator\":[1],\"refresh\":[64]},null,{\"separator\":[{\"handleSeparatorChange\":0}]}]]],[\"pf-button\",[[785,\"pf-button\",{\"variant\":[513],\"size\":[513],\"fullWidth\":[516,\"full-width\"],\"loading\":[516],\"disabled\":[516],\"type\":[1],\"label\":[1]}]]],[\"pf-button-group\",[[769,\"pf-button-group\",{\"value\":[1537],\"multiple\":[516],\"disabled\":[516],\"refresh\":[64]},[[0,\"pfButtonGroupSelect\",\"handleSelect\"]],{\"value\":[{\"handleStateChange\":0}],\"multiple\":[{\"handleStateChange\":0}],\"disabled\":[{\"handleStateChange\":0}]}]]],[\"pf-card\",[[257,\"pf-card\"]]],[\"pf-card-content\",[[257,\"pf-card-content\"]]],[\"pf-card-footer\",[[257,\"pf-card-footer\"]]],[\"pf-card-header\",[[257,\"pf-card-header\"]]],[\"pf-carousel-slide\",[[769,\"pf-carousel-slide\",{\"active\":[1540],\"position\":[1026],\"total\":[1026]}]]],[\"pf-chart-series\",[[769,\"pf-chart-series\",{\"seriesKey\":[513,\"series-key\"],\"color\":[513],\"dashed\":[516],\"swatch\":[1025]}]]],[\"pf-checkbox\",[[593,\"pf-checkbox\",{\"name\":[513],\"checked\":[1540],\"value\":[1],\"label\":[1],\"error\":[1],\"required\":[516],\"disabled\":[516],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64]},null,{\"checked\":[{\"syncFormState\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}],\"value\":[{\"syncFormState\":0}]}]]],[\"pf-command-group\",[[769,\"pf-command-group\",{\"label\":[1]}]]],[\"pf-command-item\",[[769,\"pf-command-item\",{\"value\":[513],\"description\":[1],\"disabled\":[516]}]]],[\"pf-content-divider\",[[769,\"pf-content-divider\",{\"orientation\":[513],\"inset\":[516],\"hasLabel\":[32]}]]],[\"pf-context-menu\",[[769,\"pf-context-menu\",{\"open\":[1540],\"label\":[1],\"disabled\":[516],\"showAt\":[64],\"hide\":[64]},[[0,\"contextmenu\",\"handleContextMenu\"],[0,\"pfMenuSelect\",\"handleMenuSelect\"],[0,\"keydown\",\"handleKeyDown\"]],{\"open\":[{\"syncOpen\":0}]}]]],[\"pf-credit-card\",[[513,\"pf-credit-card\",{\"brand\":[513],\"cardNumber\":[1,\"card-number\"],\"cardholderName\":[1,\"cardholder-name\"],\"expiry\":[1],\"cvc\":[1],\"masked\":[516]}]]],[\"pf-dropdown\",[[769,\"pf-dropdown\",{\"open\":[1540],\"align\":[1],\"label\":[1],\"disabled\":[516],\"show\":[64],\"hide\":[64]},[[0,\"click\",\"handleClick\"],[0,\"pfMenuSelect\",\"handleMenuSelect\"],[0,\"keydown\",\"handleKeyDown\"]],{\"open\":[{\"syncOpen\":0}]}]]],[\"pf-gauge-chart\",[[769,\"pf-gauge-chart\",{\"value\":[2],\"max\":[2],\"size\":[2],\"strokeWidth\":[2,\"stroke-width\"],\"color\":[1],\"label\":[1]}]]],[\"pf-header-navigation\",[[769,\"pf-header-navigation\",{\"label\":[1],\"hasBrand\":[32],\"hasActions\":[32],\"refresh\":[64]},[[0,\"pfNavStructure\",\"handleStructureChange\"]]]]],[\"pf-heatmap\",[[769,\"pf-heatmap\",{\"data\":[1],\"startDate\":[1,\"start-date\"],\"endDate\":[1,\"end-date\"],\"levels\":[2],\"weekStartsOn\":[2,\"week-starts-on\"],\"cellSize\":[2,\"cell-size\"],\"cellGap\":[2,\"cell-gap\"],\"showWeekdayLabels\":[516,\"show-weekday-labels\"],\"showMonthLabels\":[516,\"show-month-labels\"],\"label\":[1]}]]],[\"pf-input\",[[593,\"pf-input\",{\"name\":[513],\"value\":[1025],\"type\":[513],\"label\":[1],\"description\":[1],\"error\":[1],\"placeholder\":[1],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64]},null,{\"value\":[{\"syncFormState\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}]}]]],[\"pf-line-chart\",[[769,\"pf-line-chart\",{\"data\":[1],\"area\":[516],\"curved\":[516],\"showLegend\":[516,\"show-legend\"],\"yAxisLabel\":[1,\"y-axis-label\"],\"label\":[1],\"series\":[32],\"refresh\":[64]},null,{\"data\":[{\"sync\":0}]}]]],[\"pf-loading-dots\",[[513,\"pf-loading-dots\",{\"size\":[513],\"label\":[1]}]]],[\"pf-loading-skeleton\",[[513,\"pf-loading-skeleton\",{\"width\":[8],\"height\":[8],\"rounded\":[516],\"label\":[1]}]]],[\"pf-loading-spinner\",[[513,\"pf-loading-spinner\",{\"size\":[2],\"label\":[1]}]]],[\"pf-menu-item\",[[769,\"pf-menu-item\",{\"value\":[513],\"disabled\":[516],\"destructive\":[516]},[[0,\"click\",\"handleClick\"],[0,\"keydown\",\"handleKeyDown\"]]]]],[\"pf-menu-separator\",[[1,\"pf-menu-separator\"]]],[\"pf-metric-grid\",[[257,\"pf-metric-grid\"]]],[\"pf-modal\",[[769,\"pf-modal\",{\"open\":[1540],\"size\":[513],\"label\":[1],\"dismissable\":[4],\"showCloseButton\":[4,\"show-close-button\"],\"show\":[64],\"hide\":[64]},null,{\"open\":[{\"syncOpen\":0}]}]]],[\"pf-modal-body\",[[257,\"pf-modal-body\"]]],[\"pf-modal-footer\",[[257,\"pf-modal-footer\"]]],[\"pf-modal-header\",[[257,\"pf-modal-header\"]]],[\"pf-nav-item\",[[769,\"pf-nav-item\",{\"href\":[513],\"target\":[1],\"rel\":[1],\"current\":[516],\"currentPage\":[1540,\"current-page\"],\"disabled\":[516],\"orientation\":[1537]},null,{\"current\":[{\"handleCurrentChange\":0}]}]]],[\"pf-nav-section\",[[769,\"pf-nav-section\",{\"hasTitle\":[32]}]]],[\"pf-option\",[[769,\"pf-option\",{\"value\":[513],\"disabled\":[516],\"selected\":[1540],\"active\":[1540]}]]],[\"pf-page-header\",[[769,\"pf-page-header\",{\"hasBreadcrumbs\":[32],\"hasMetadata\":[32],\"hasActions\":[32]}]]],[\"pf-pagination\",[[769,\"pf-pagination\",{\"page\":[1026],\"totalPages\":[2,\"total-pages\"],\"siblingCount\":[2,\"sibling-count\"],\"boundaryCount\":[2,\"boundary-count\"],\"showPrevNext\":[516,\"show-prev-next\"],\"disabled\":[516],\"label\":[1]}]]],[\"pf-pie-chart\",[[769,\"pf-pie-chart\",{\"size\":[2],\"cutout\":[2],\"showLegend\":[516,\"show-legend\"],\"label\":[1],\"gradient\":[32],\"hasData\":[32],\"refresh\":[64]},null,{\"cutout\":[{\"sync\":0}]}]]],[\"pf-pie-slice\",[[769,\"pf-pie-slice\",{\"value\":[514],\"color\":[513],\"swatch\":[1025],\"share\":[1026],\"drawn\":[1540]}]]],[\"pf-popover\",[[769,\"pf-popover\",{\"open\":[1540],\"align\":[1],\"label\":[1],\"dismissable\":[4],\"show\":[64],\"hide\":[64]},[[0,\"click\",\"handleClick\"],[0,\"keydown\",\"handleKeyDown\"]],{\"open\":[{\"syncOpen\":0}]}]]],[\"pf-progress-bar\",[[513,\"pf-progress-bar\",{\"value\":[2],\"max\":[2],\"showValue\":[516,\"show-value\"],\"label\":[1]}]]],[\"pf-progress-circle\",[[513,\"pf-progress-circle\",{\"value\":[2],\"max\":[2],\"size\":[2],\"strokeWidth\":[2,\"stroke-width\"],\"showValue\":[516,\"show-value\"],\"label\":[1]}]]],[\"pf-progress-step\",[[769,\"pf-progress-step\",{\"status\":[513],\"state\":[1537],\"position\":[1026],\"last\":[1540],\"orientation\":[1537]}]]],[\"pf-progress-steps\",[[769,\"pf-progress-steps\",{\"orientation\":[513],\"refresh\":[64]},null,{\"orientation\":[{\"handleOrientationChange\":0}]}]]],[\"pf-radar-axis\",[[513,\"pf-radar-axis\",{\"label\":[513],\"value\":[514],\"drawn\":[1540]}]]],[\"pf-radar-chart\",[[769,\"pf-radar-chart\",{\"size\":[2],\"max\":[2],\"levels\":[2],\"showAxes\":[516,\"show-axes\"],\"showLegend\":[516,\"show-legend\"],\"label\":[1],\"axes\":[32],\"refresh\":[64]},null,{\"max\":[{\"sync\":0}]}]]],[\"pf-radio-button\",[[785,\"pf-radio-button\",{\"value\":[513],\"checked\":[1540],\"disabled\":[516]}]]],[\"pf-radio-group\",[[833,\"pf-radio-group\",{\"name\":[513],\"value\":[1025],\"legend\":[1],\"error\":[1],\"orientation\":[513],\"required\":[516],\"disabled\":[516],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64]},[[0,\"pfRadioSelect\",\"handleSelect\"],[0,\"keydown\",\"handleKeyDown\"]],{\"value\":[{\"syncFormState\":0},{\"syncChildren\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}],\"disabled\":[{\"syncChildren\":0}]}]]],[\"pf-resizable\",[[769,\"pf-resizable\",{\"orientation\":[513],\"size\":[1026],\"min\":[2],\"max\":[2],\"step\":[2],\"handleLabel\":[1,\"handle-label\"]},[[1,\"pointerup\",\"handlePointerEnd\"],[1,\"pointercancel\",\"handlePointerEnd\"]],{\"min\":[{\"handleBoundsChange\":0}],\"max\":[{\"handleBoundsChange\":0}]}]]],[\"pf-rich-text-editor\",[[577,\"pf-rich-text-editor\",{\"name\":[513],\"value\":[1025],\"label\":[1],\"description\":[1],\"error\":[1],\"placeholder\":[1],\"minHeight\":[2,\"min-height\"],\"characterMax\":[2,\"character-max\"],\"required\":[516],\"disabled\":[516],\"characterCount\":[32],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64],\"format\":[64]},null,{\"value\":[{\"handleValueChange\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}]}]]],[\"pf-scroll-area\",[[769,\"pf-scroll-area\",{\"orientation\":[513],\"focusable\":[4]}]]],[\"pf-section-footer\",[[769,\"pf-section-footer\",{\"divider\":[516],\"align\":[513],\"hasHeading\":[32],\"hasActions\":[32]}]]],[\"pf-section-header\",[[769,\"pf-section-header\",{\"divider\":[516],\"align\":[513],\"hasMetadata\":[32],\"hasActions\":[32]}]]],[\"pf-sidebar-navigation\",[[769,\"pf-sidebar-navigation\",{\"label\":[1],\"hasHeader\":[32],\"hasFooter\":[32],\"refresh\":[64]},[[0,\"pfNavStructure\",\"handleStructureChange\"]]]]],[\"pf-slideout-menu\",[[769,\"pf-slideout-menu\",{\"open\":[1540],\"placement\":[513],\"size\":[513],\"heading\":[1],\"description\":[1],\"label\":[1],\"dismissable\":[4],\"showCloseButton\":[4,\"show-close-button\"],\"hasFooter\":[32],\"show\":[64],\"hide\":[64]},null,{\"open\":[{\"syncOpen\":0}]}]]],[\"pf-slider\",[[593,\"pf-slider\",{\"name\":[513],\"value\":[1026],\"min\":[2],\"max\":[2],\"step\":[2],\"label\":[1],\"description\":[1],\"error\":[1],\"showValue\":[516,\"show-value\"],\"disabled\":[516],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64]},null,{\"value\":[{\"syncFormState\":0}],\"error\":[{\"syncFormState\":0}],\"min\":[{\"syncFormState\":0}],\"max\":[{\"syncFormState\":0}]}]]],[\"pf-sparkline\",[[513,\"pf-sparkline\",{\"data\":[1],\"width\":[2],\"height\":[2],\"variant\":[513],\"strokeWidth\":[2,\"stroke-width\"],\"color\":[1],\"endDot\":[516,\"end-dot\"],\"animated\":[516],\"label\":[1]}]]],[\"pf-switch\",[[593,\"pf-switch\",{\"name\":[513],\"checked\":[1540],\"value\":[1],\"label\":[1],\"error\":[1],\"required\":[516],\"disabled\":[516],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64]},null,{\"checked\":[{\"syncFormState\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}],\"value\":[{\"syncFormState\":0}]}]]],[\"pf-tab-panel\",[[769,\"pf-tab-panel\",{\"value\":[513],\"active\":[1540]}]]],[\"pf-table\",[[769,\"pf-table\",{\"dense\":[516],\"striped\":[516],\"hoverable\":[516],\"stickyHeader\":[516,\"sticky-header\"],\"sortKey\":[1537,\"sort-key\"],\"sortDirection\":[1537,\"sort-direction\"],\"label\":[1],\"isEmpty\":[32],\"hasCaption\":[32],\"refresh\":[64]},[[0,\"pfTableSort\",\"handleSort\"]],{\"sortKey\":[{\"handleSortChange\":0}],\"sortDirection\":[{\"handleSortChange\":0}]}]]],[\"pf-table-cell\",[[769,\"pf-table-cell\",{\"head\":[1540],\"last\":[1540],\"align\":[513],\"width\":[1],\"sortKey\":[513,\"sort-key\"],\"sortable\":[516],\"sort\":[1025]}]]],[\"pf-table-row\",[[769,\"pf-table-row\",{\"head\":[516],\"odd\":[1540],\"last\":[1540]},null,{\"head\":[{\"sync\":0}],\"last\":[{\"sync\":0}]}]]],[\"pf-tabs\",[[769,\"pf-tabs\",{\"value\":[1025],\"variant\":[513],\"size\":[513],\"fullWidth\":[516,\"full-width\"],\"refresh\":[64]},[[0,\"pfTabSelect\",\"handleTabSelect\"],[0,\"keydown\",\"handleKeyDown\"]],{\"value\":[{\"handleStateChange\":0}],\"variant\":[{\"handleStateChange\":0}],\"size\":[{\"handleStateChange\":0}],\"fullWidth\":[{\"handleStateChange\":0}]}]]],[\"pf-textarea\",[[593,\"pf-textarea\",{\"name\":[513],\"value\":[1025],\"rows\":[2],\"label\":[1],\"description\":[1],\"error\":[1],\"placeholder\":[1],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"checkValidity\":[64],\"reportValidity\":[64],\"getValidationMessage\":[64]},null,{\"value\":[{\"syncFormState\":0}],\"error\":[{\"syncFormState\":0}],\"required\":[{\"syncFormState\":0}]}]]],[\"pf-timeline\",[[769,\"pf-timeline\",{\"label\":[1],\"refresh\":[64]},null,{\"label\":[{\"handleLabelChange\":0}]}]]],[\"pf-timeline-item\",[[769,\"pf-timeline-item\",{\"tone\":[513],\"last\":[1540],\"hasIcon\":[32]}]]],[\"pf-toolbar\",[[769,\"pf-toolbar\",{\"orientation\":[513]},[[0,\"focusin\",\"handleFocusIn\"],[0,\"keydown\",\"handleKeyDown\"]],{\"orientation\":[{\"sync\":0}]}]]],[\"pf-toolbar-separator\",[[513,\"pf-toolbar-separator\",{\"orientation\":[513]}]]],[\"pf-tooltip\",[[769,\"pf-tooltip\",{\"placement\":[513],\"delay\":[2],\"open\":[4],\"disabled\":[516],\"resolvedSide\":[32]},[[1,\"pointerenter\",\"handlePointerEnter\"],[1,\"pointerleave\",\"handlePointerLeave\"],[0,\"focusin\",\"handleFocusIn\"],[0,\"focusout\",\"handleFocusOut\"],[0,\"keydown\",\"handleKeyDown\"]],{\"open\":[{\"syncOpen\":0}]}]]],[\"pf-tree-view\",[[769,\"pf-tree-view\",{\"value\":[1537],\"expanded\":[1537],\"label\":[1],\"activeValue\":[32],\"refresh\":[64],\"expandAll\":[64],\"collapseAll\":[64]},[[0,\"pfTreeSelect\",\"handleSelect\"],[0,\"pfTreeToggle\",\"handleToggle\"],[0,\"keydown\",\"handleKeyDown\"],[0,\"pfTreeStructure\",\"handleStructureChange\"]],{\"value\":[{\"handleStateChange\":0}],\"expanded\":[{\"handleStateChange\":0}]}]]],[\"pf-utility-button\",[[785,\"pf-utility-button\",{\"variant\":[513],\"size\":[513],\"disabled\":[516],\"type\":[1],\"label\":[1],\"tooltip\":[1]}]]],[\"pf-video-player\",[[769,\"pf-video-player\",{\"src\":[1],\"sources\":[16],\"tracks\":[16],\"label\":[1],\"description\":[1],\"error\":[1],\"aspectRatio\":[513,\"aspect-ratio\"],\"controls\":[4],\"poster\":[1],\"preload\":[1],\"muted\":[516],\"loop\":[516],\"autoplay\":[516],\"play\":[64],\"pause\":[64],\"getVideoElement\":[64]}]]],[\"pf-visually-hidden\",[[769,\"pf-visually-hidden\",{\"focusable\":[516]}]]],[\"pf-icon\",[[513,\"pf-icon\",{\"name\":[1],\"label\":[1]}]]],[\"pf-calendar\",[[513,\"pf-calendar\",{\"value\":[1537],\"min\":[1],\"max\":[1],\"startYear\":[2,\"start-year\"],\"endYear\":[2,\"end-year\"],\"showOutsideDays\":[4,\"show-outside-days\"],\"label\":[1],\"isDateDisabled\":[16],\"displayMonth\":[32],\"focusedDate\":[32],\"goToMonth\":[64],\"focusSelectedDay\":[64]},null,{\"value\":[{\"syncValue\":0}]}]]],[\"pf-notification\",[[769,\"pf-notification\",{\"variant\":[513],\"heading\":[1],\"description\":[1],\"dismissable\":[516],\"exiting\":[1540],\"hasSlottedBody\":[32],\"dismiss\":[64]}]]],[\"pf-tag\",[[769,\"pf-tag\",{\"variant\":[513],\"dismissible\":[516],\"dismissLabel\":[1,\"dismiss-label\"]}]]],[\"pf-avatar\",[[769,\"pf-avatar\",{\"src\":[1],\"alt\":[1],\"name\":[1],\"size\":[513],\"status\":[513]}]]],[\"pf-badge\",[[769,\"pf-badge\",{\"variant\":[513]}]]],[\"pf-kbd\",[[769,\"pf-kbd\",{\"keys\":[16],\"size\":[513],\"separator\":[1]}]]]]"), options);
 };
 
 export { defineCustomElements };

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

@@ -1,5 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bm6UxEit.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
 import { a as applyControlValidity } from './form-validity-Cr6IXrUk.js';
+import { c as controlAriaLabel } from './control-label-Cy_kHPeC.js';
 
 const pfCheckboxCss = () => `:host{display:inline-block}:host([hidden]){display:none}.field{align-items:center;display:inline-flex;gap:var(--space-2)}.input{appearance:none;background:var(--pf-checkbox-bg);border:1px solid var(--pf-checkbox-border);border-radius:var(--pf-checkbox-radius, var(--radius-sm));box-sizing:border-box;cursor:pointer;display:inline-block;flex-shrink:0;height:18px;margin:0;position:relative;width:18px}.input:checked{background:var(--pf-checkbox-checked-bg);border-color:var(--pf-checkbox-border)}.input::after{border:solid var(--pf-checkbox-check-color);border-width:0 2px 2px 0;content:'';height:9px;left:5px;opacity:0;position:absolute;top:2px;transform:rotate(45deg);width:5px}.input:checked::after{opacity:1}.input:focus-visible{box-shadow:var(--pf-checkbox-focus-ring, var(--pf-focus-ring));outline:none}.input:disabled{cursor:not-allowed;opacity:0.55}.input:disabled+.label{cursor:not-allowed;opacity:0.65}.label{color:var(--pf-checkbox-label-text);font-size:var(--font-size-md)}.error{color:var(--pf-checkbox-field-error, var(--pf-field-error));font-size:var(--font-size-sm);margin:var(--space-1) 0 0}`;
 
@@ -15,6 +16,7 @@ const PfCheckbox = class {
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
     }
+    get el() { return getElement(this); }
     internals;
     /**
      * Submitted under this name.
@@ -81,7 +83,7 @@ const PfCheckbox = class {
         this.pfChange.emit({ checked: this.checked, value: this.value });
     };
     render() {
-        return (h(Host, { key: '87e808069908240f3507903e680a2ed25e963fde' }, h("div", { key: '56e201259f99ecf8da235b962a42ed65080f2f68', class: "field", part: "field" }, h("input", { key: '8efc240bd3931bcdf117e529ff4fb7e5f8e544d5', id: "input", part: "input", class: "input", type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, "aria-invalid": this.error ? 'true' : null, "aria-describedby": this.error ? 'error' : null, onChange: this.onChange }), this.label && (h("label", { key: '8b098a6fd3271d1353447f53b4b06099d7044169', class: "label", part: "label", htmlFor: "input" }, this.label))), this.error && (h("p", { key: '76ba7559865ec18ba77ac50677df53a6459e6989', class: "error", part: "error", id: "error" }, this.error))));
+        return (h(Host, { key: 'f0888c00b688aef2c90deb60a7496971c2e52ac3' }, h("div", { key: '25dbafc87f7c597cc055ade975033bab23ed67d9', class: "field", part: "field" }, h("input", { key: '2d6f97d80d2686ad13ddac12bf70d12828611ad8', id: "input", "aria-label": controlAriaLabel(this.el, this.label), part: "input", class: "input", type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, "aria-invalid": this.error ? 'true' : null, "aria-describedby": this.error ? 'error' : null, onChange: this.onChange }), this.label && (h("label", { key: '0c6427fb3168226dd5c69e06e5769efab4cc0d5e', class: "label", part: "label", htmlFor: "input" }, this.label))), this.error && (h("p", { key: '401852018ce3b0c0a856e669d96c33d185a5b730', class: "error", part: "error", id: "error" }, this.error))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }

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

@@ -1 +1 @@
-{"version":3,"file":"pf-checkbox.entry.js","sources":["src/components/pf-checkbox/pf-checkbox.css?tag=pf-checkbox&encapsulation=shadow","src/components/pf-checkbox/pf-checkbox.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--space-2);\n}\n\n.input {\n  appearance: none;\n  background: var(--pf-checkbox-bg);\n  border: 1px solid var(--pf-checkbox-border);\n  border-radius: var(--pf-checkbox-radius, var(--radius-sm));\n  box-sizing: border-box;\n  cursor: pointer;\n  display: inline-block;\n  flex-shrink: 0;\n  height: 18px;\n  margin: 0;\n  position: relative;\n  width: 18px;\n}\n\n.input:checked {\n  background: var(--pf-checkbox-checked-bg);\n  border-color: var(--pf-checkbox-border);\n}\n\n/* The tick: two borders of a rotated box. */\n.input::after {\n  border: solid var(--pf-checkbox-check-color);\n  border-width: 0 2px 2px 0;\n  content: '';\n  height: 9px;\n  left: 5px;\n  opacity: 0;\n  position: absolute;\n  top: 2px;\n  transform: rotate(45deg);\n  width: 5px;\n}\n\n.input:checked::after {\n  opacity: 1;\n}\n\n.input:focus-visible {\n  box-shadow: var(--pf-checkbox-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n.input:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n.input:disabled + .label {\n  cursor: not-allowed;\n  opacity: 0.65;\n}\n\n.label {\n  color: var(--pf-checkbox-label-text);\n  font-size: var(--font-size-md);\n}\n\n.error {\n  color: var(--pf-checkbox-field-error, var(--pf-field-error));\n  font-size: var(--font-size-sm);\n  margin: var(--space-1) 0 0;\n}\n","import {\n  AttachInternals,\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nimport { applyControlValidity } from '../../form-validity';\n\n/**\n * A form-associated checkbox.\n *\n * @part field - the wrapper around control and label.\n * @part input - the native checkbox.\n * @part label - the label element.\n */\n@Component({\n  tag: 'pf-checkbox',\n  styleUrl: 'pf-checkbox.css',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n})\nexport class PfCheckbox {\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name.\n   *\n   * Reflected, because a form-associated custom element takes its submission\n   * name from the `name` *content attribute* -- not from this property. A\n   * framework wrapper that sets properties rather than attributes (the\n   * generated React bindings do) would otherwise leave the control nameless\n   * and absent from the submission, with every other sign of working.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** Whether the box is ticked. Reflected so the stylesheet can select on it. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /**\n   * What is submitted when ticked. Mirrors the native attribute, whose default\n   * is also `on` — a checkbox with no value still submits something.\n   */\n  @Prop() value = 'on';\n\n  /** Visible label, rendered in the same root so `for` actually associates. */\n  @Prop() label?: string;\n\n  /** Error message. Its presence is what marks the control invalid. */\n  @Prop() error?: string;\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires when the user ticks or unticks the box. */\n  @Event() pfChange!: EventEmitter<{ checked: boolean; value: string }>;\n\n  /** The state a form reset restores, which is the initial attribute. */\n  private initialChecked = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.syncFormState();\n  }\n\n  @Watch('checked')\n  @Watch('error')\n  @Watch('required')\n  @Watch('value')\n  syncFormState() {\n    /*\n     * `null`, not an empty string, when unticked: an unchecked checkbox is\n     * absent from the submission entirely, rather than present and empty.\n     * That is what a server distinguishing \"unticked\" from \"not sent\" relies\n     * on, and it is what a native checkbox does.\n     */\n    this.internals.setFormValue(this.checked ? this.value : null);\n    applyControlValidity(this.internals, this.checked, this.required, this.error);\n  }\n\n  /** A form-associated custom element does not inherit this. */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  /** As `checkValidity`, but also shows the browser's validation message. */\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  /** The message explaining why the control is invalid, or an empty string. */\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /**\n   * A reset restores the initial state, not `false` — a native\n   * `<input type=checkbox checked>` comes back ticked.\n   */\n  formResetCallback() {\n    this.checked = this.initialChecked;\n  }\n\n  private onChange = (event: Event) => {\n    this.checked = (event.target as HTMLInputElement).checked;\n    this.pfChange.emit({ checked: this.checked, value: this.value });\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          <input\n            id=\"input\"\n            part=\"input\"\n            class=\"input\"\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            aria-invalid={this.error ? 'true' : null}\n            aria-describedby={this.error ? 'error' : null}\n            onChange={this.onChange}\n          />\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"input\">\n              {this.label}\n            </label>\n          )}\n        </div>\n        {this.error && (\n          <p class=\"error\" part=\"error\" id=\"error\">\n            {this.error}\n          </p>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,mlCAAmlC,CAAC;;MC2BpmC,UAAU,GAAA,MAAA;;;;;;;;;;;;AACF,IAAA,SAAS;AAE5B;;;;;;;;AAQG;AACsB,IAAA,IAAI;;IAGW,OAAO,GAAG,KAAK;AAEvD;;;AAGG;IACK,KAAK,GAAG,IAAI;;AAGZ,IAAA,KAAK;;AAGL,IAAA,KAAK;IAEY,QAAQ,GAAG,KAAK;IAEhB,QAAQ,GAAG,KAAK;;AAGhC,IAAA,QAAQ;;IAGT,cAAc,GAAG,KAAK;IAE9B,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO;QAClC,IAAI,CAAC,aAAa,EAAE;;IAOtB,aAAa,GAAA;AACX;;;;;AAKG;AACH,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;AAC7D,QAAA,oBAAoB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;;;AAK/E,IAAA,MAAM,aAAa,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE;;;AAKvC,IAAA,MAAM,cAAc,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE;;;AAKxC,IAAA,MAAM,oBAAoB,GAAA;AACxB,QAAA,OAAO,IAAI,CAAC,SAAS,CAAC,iBAAiB;;AAGzC;;;AAGG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc;;AAG5B,IAAA,QAAQ,GAAG,CAAC,KAAY,KAAI;QAClC,IAAI,CAAC,OAAO,GAAI,KAAK,CAAC,MAA2B,CAAC,OAAO;AACzD,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AAClE,KAAC;IAED,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC7B,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAC,OAAO,EACV,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,cAAA,EACT,IAAI,CAAC,KAAK,GAAG,MAAM,GAAG,IAAI,EAAA,kBAAA,EACtB,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,IAAI,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CACvB,EACD,IAAI,CAAC,KAAK,KACT,8DAAO,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAA,EAC9C,IAAI,CAAC,KAAK,CACL,CACT,CACG,EACL,IAAI,CAAC,KAAK,KACT,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,EAAA,EACrC,IAAI,CAAC,KAAK,CACT,CACL,CACI;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"pf-checkbox.entry.js","sources":["src/components/pf-checkbox/pf-checkbox.css?tag=pf-checkbox&encapsulation=shadow","src/components/pf-checkbox/pf-checkbox.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--space-2);\n}\n\n.input {\n  appearance: none;\n  background: var(--pf-checkbox-bg);\n  border: 1px solid var(--pf-checkbox-border);\n  border-radius: var(--pf-checkbox-radius, var(--radius-sm));\n  box-sizing: border-box;\n  cursor: pointer;\n  display: inline-block;\n  flex-shrink: 0;\n  height: 18px;\n  margin: 0;\n  position: relative;\n  width: 18px;\n}\n\n.input:checked {\n  background: var(--pf-checkbox-checked-bg);\n  border-color: var(--pf-checkbox-border);\n}\n\n/* The tick: two borders of a rotated box. */\n.input::after {\n  border: solid var(--pf-checkbox-check-color);\n  border-width: 0 2px 2px 0;\n  content: '';\n  height: 9px;\n  left: 5px;\n  opacity: 0;\n  position: absolute;\n  top: 2px;\n  transform: rotate(45deg);\n  width: 5px;\n}\n\n.input:checked::after {\n  opacity: 1;\n}\n\n.input:focus-visible {\n  box-shadow: var(--pf-checkbox-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n.input:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n.input:disabled + .label {\n  cursor: not-allowed;\n  opacity: 0.65;\n}\n\n.label {\n  color: var(--pf-checkbox-label-text);\n  font-size: var(--font-size-md);\n}\n\n.error {\n  color: var(--pf-checkbox-field-error, var(--pf-field-error));\n  font-size: var(--font-size-sm);\n  margin: var(--space-1) 0 0;\n}\n","import {\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\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\n\n/**\n * A form-associated checkbox.\n *\n * @part field - the wrapper around control and label.\n * @part input - the native checkbox.\n * @part label - the label element.\n */\n@Component({\n  tag: 'pf-checkbox',\n  styleUrl: 'pf-checkbox.css',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n})\nexport class PfCheckbox {\n  @Element() el!: HTMLElement;\n\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name.\n   *\n   * Reflected, because a form-associated custom element takes its submission\n   * name from the `name` *content attribute* -- not from this property. A\n   * framework wrapper that sets properties rather than attributes (the\n   * generated React bindings do) would otherwise leave the control nameless\n   * and absent from the submission, with every other sign of working.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** Whether the box is ticked. Reflected so the stylesheet can select on it. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /**\n   * What is submitted when ticked. Mirrors the native attribute, whose default\n   * is also `on` — a checkbox with no value still submits something.\n   */\n  @Prop() value = 'on';\n\n  /** Visible label, rendered in the same root so `for` actually associates. */\n  @Prop() label?: string;\n\n  /** Error message. Its presence is what marks the control invalid. */\n  @Prop() error?: string;\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires when the user ticks or unticks the box. */\n  @Event() pfChange!: EventEmitter<{ checked: boolean; value: string }>;\n\n  /** The state a form reset restores, which is the initial attribute. */\n  private initialChecked = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.syncFormState();\n  }\n\n  @Watch('checked')\n  @Watch('error')\n  @Watch('required')\n  @Watch('value')\n  syncFormState() {\n    /*\n     * `null`, not an empty string, when unticked: an unchecked checkbox is\n     * absent from the submission entirely, rather than present and empty.\n     * That is what a server distinguishing \"unticked\" from \"not sent\" relies\n     * on, and it is what a native checkbox does.\n     */\n    this.internals.setFormValue(this.checked ? this.value : null);\n    applyControlValidity(this.internals, this.checked, this.required, this.error);\n  }\n\n  /** A form-associated custom element does not inherit this. */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  /** As `checkValidity`, but also shows the browser's validation message. */\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  /** The message explaining why the control is invalid, or an empty string. */\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /**\n   * A reset restores the initial state, not `false` — a native\n   * `<input type=checkbox checked>` comes back ticked.\n   */\n  formResetCallback() {\n    this.checked = this.initialChecked;\n  }\n\n  private onChange = (event: Event) => {\n    this.checked = (event.target as HTMLInputElement).checked;\n    this.pfChange.emit({ checked: this.checked, value: this.value });\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          <input\n            id=\"input\"\n            aria-label={controlAriaLabel(this.el, this.label)}\n            part=\"input\"\n            class=\"input\"\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            aria-invalid={this.error ? 'true' : null}\n            aria-describedby={this.error ? 'error' : null}\n            onChange={this.onChange}\n          />\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"input\">\n              {this.label}\n            </label>\n          )}\n        </div>\n        {this.error && (\n          <p class=\"error\" part=\"error\" id=\"error\">\n            {this.error}\n          </p>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,mlCAAmlC,CAAC;;MC6BpmC,UAAU,GAAA,MAAA;;;;;;;;;;;;;AAGF,IAAA,SAAS;AAE5B;;;;;;;;AAQG;AACsB,IAAA,IAAI;;IAGW,OAAO,GAAG,KAAK;AAEvD;;;AAGG;IACK,KAAK,GAAG,IAAI;;AAGZ,IAAA,KAAK;;AAGL,IAAA,KAAK;IAEY,QAAQ,GAAG,KAAK;IAEhB,QAAQ,GAAG,KAAK;;AAGhC,IAAA,QAAQ;;IAGT,cAAc,GAAG,KAAK;IAE9B,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO;QAClC,IAAI,CAAC,aAAa,EAAE;;IAOtB,aAAa,GAAA;AACX;;;;;AAKG;AACH,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;AAC7D,QAAA,oBAAoB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;;;AAK/E,IAAA,MAAM,aAAa,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE;;;AAKvC,IAAA,MAAM,cAAc,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE;;;AAKxC,IAAA,MAAM,oBAAoB,GAAA;AACxB,QAAA,OAAO,IAAI,CAAC,SAAS,CAAC,iBAAiB;;AAGzC;;;AAGG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc;;AAG5B,IAAA,QAAQ,GAAG,CAAC,KAAY,KAAI;QAClC,IAAI,CAAC,OAAO,GAAI,KAAK,CAAC,MAA2B,CAAC,OAAO;AACzD,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AAClE,KAAC;IAED,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC7B,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAC,OAAO,gBACE,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,EACjD,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,kBACT,IAAI,CAAC,KAAK,GAAG,MAAM,GAAG,IAAI,EAAA,kBAAA,EACtB,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,IAAI,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CACvB,EACD,IAAI,CAAC,KAAK,KACT,8DAAO,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAA,EAC9C,IAAI,CAAC,KAAK,CACL,CACT,CACG,EACL,IAAI,CAAC,KAAK,KACT,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,EAAA,EACrC,IAAI,CAAC,KAAK,CACT,CACL,CACI;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -5,6 +5,7 @@ import { q as queryIsEchoedSelection, m as matchesCommandQuery } from './command
 import { K as Keys } from './keys-g4FlTDZx.js';
 import { g as getEnabledIndexes, r as resolveListMove } from './navigation-CAz7-p8y.js';
 import { a as applyControlValidity } from './form-validity-Cr6IXrUk.js';
+import { c as controlAriaLabel } from './control-label-Cy_kHPeC.js';
 
 const pfComboboxCss = () => `:host{display:block;--pf-option-text:var(--pf-combobox-text);--pf-option-text-disabled:var(--pf-combobox-placeholder);--pf-option-active-bg:var(--pf-combobox-option-active-bg);--pf-option-active-text:var(--pf-combobox-option-active-text)}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-combobox-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-combobox-invalid-border);margin-inline-start:var(--space-1)}.control{align-items:center;background:var(--pf-combobox-bg);border:1px solid var(--pf-combobox-border);border-radius:var(--radius-md);display:flex;gap:var(--space-1);padding-inline-end:var(--space-2)}.control:focus-within{border-color:var(--pf-combobox-focus-border);box-shadow:var(--pf-focus-ring)}.control--invalid{border-color:var(--pf-combobox-invalid-border)}.input{background:none;border:0;color:var(--pf-combobox-text);flex:1;font-family:inherit;font-size:var(--font-size-sm);min-width:0;outline:none;padding:var(--space-2) var(--space-3)}.input::placeholder{color:var(--pf-combobox-placeholder)}.input:disabled{cursor:not-allowed;opacity:0.6}.clear,.chevron{align-items:center;color:var(--pf-combobox-placeholder);display:inline-flex;flex-shrink:0;justify-content:center}.clear{background:none;border:0;border-radius:var(--radius-sm);cursor:pointer;padding:var(--space-1)}.clear:hover{color:var(--pf-combobox-text)}.chevron{transition:transform var(--pf-transition-fast)}:host([open]) .chevron{transform:rotate(180deg)}@media (prefers-reduced-motion: reduce){.chevron{transition:none}}.description{color:var(--pf-combobox-placeholder);font-size:var(--font-size-xs);margin:0}.error{color:var(--pf-combobox-invalid-border);font-size:var(--font-size-xs);margin:0}.listbox{inset:auto;margin:0;background:var(--pf-combobox-menu-bg);border:1px solid var(--pf-combobox-menu-border);border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);max-height:min(60vh, 320px);overflow-y:auto;padding:var(--space-1)}.listbox:popover-open{animation:pf-combobox-in var(--pf-transition-enter)}@keyframes pf-combobox-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.listbox:popover-open{animation:none}}.empty{color:var(--pf-combobox-placeholder);font-size:var(--font-size-sm);margin:0;padding:var(--space-3);text-align:center}`;
 
@@ -304,12 +305,12 @@ const PfCombobox = class {
     render() {
         const describedBy = composeDescribedBy(this.description && 'description', this.error && 'error');
         const showClear = this.clearable && !this.disabled && (this.query !== '' || this.value !== '');
-        return (h(Host, { key: 'a8de74e291d2b9b200ecd25aa173a0b5d3b7b626' }, h("div", { key: '90e0c5924b6bf0bc06cae69fa69d03d8a7839991', class: "field", part: "field" }, this.label && (h("label", { key: '40c0f27b7320895673dfe5a222e5c9a9c177342e', class: "label", part: "label", htmlFor: "input" }, this.label, this.required && (h("span", { key: 'dd07ad670d93b1aff47c4ad879d021e5c01b4744', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '125a49726f50d094cd5b07055dac55a18ac5f730', class: { control: true, 'control--invalid': Boolean(this.error) }, part: "control" }, h("input", { key: 'f5af0e210b95aaf50f6aa26fea9923ecce23a9d9', id: "input", part: "input", class: "input", type: "text", role: "combobox", autocomplete: "off", disabled: this.disabled, required: this.required, placeholder: this.placeholder, value: this.query, "aria-autocomplete": "list", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "listbox", "aria-invalid": this.error ? 'true' : null, "aria-describedby": describedBy, onInput: this.onInput, onKeyDown: this.onKeyDown, onClick: () => {
+        return (h(Host, { key: '4a948db9316e8174c9c7592afb9912deb59eecdd' }, h("div", { key: 'ac5e469f9c00ec843fdb7a485cb3cbe9ddc08573', class: "field", part: "field" }, this.label && (h("label", { key: 'eb610c213cfe510c229f5ffa81e9761bf7303476', class: "label", part: "label", htmlFor: "input" }, this.label, this.required && (h("span", { key: 'd942137e81be6007aafe2e1dfc43e97e2ab8af59', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: 'b9f4806e7882e5dc2c64abe87f48bb925173d7dc', class: { control: true, 'control--invalid': Boolean(this.error) }, part: "control" }, h("input", { key: '9a10cc81ff212f3e279cfcc311886756d7ca76f1', id: "input", "aria-label": controlAriaLabel(this.el, this.label), part: "input", class: "input", type: "text", role: "combobox", autocomplete: "off", disabled: this.disabled, required: this.required, placeholder: this.placeholder, value: this.query, "aria-autocomplete": "list", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "listbox", "aria-invalid": this.error ? 'true' : null, "aria-describedby": describedBy, onInput: this.onInput, onKeyDown: this.onKeyDown, onClick: () => {
                 if (!this.disabled)
                     this.open = true;
-            } }), showClear && (h("button", { key: '3de0deb6fa499c4f09a8135e8f437a0b8d800e2b', class: "clear", part: "clear", type: "button", "aria-label": this.clearLabel,
+            } }), showClear && (h("button", { key: 'bc9f8df667df57cbede3aa00a4119f6591faeb7d', class: "clear", part: "clear", type: "button", "aria-label": this.clearLabel,
             /* Out of the tab order, so it never interrupts the keyboard flow. */
-            tabindex: -1, onMouseDown: (event) => event.preventDefault(), onClick: this.clear }, h("pf-icon", { key: '4690b5b9889c4fa42d9a517c44881dcc39a3ce6a', name: "circle-xmark" }))), h("span", { key: '91d963abe51964b40952c20662cda34fe6bc8422', class: "chevron", "aria-hidden": "true" }, h("pf-icon", { key: '26d800a4907e4c043771cf88939a452140656cc2', name: "chevron-down" }))), this.description && (h("p", { key: '25aa3122181742855db9407918564609e5229b9d', class: "description", part: "description", id: "description" }, this.description)), this.error && (h("p", { key: '383cea1cb15a3d5007fffae49fa9ebe713d4c46e', class: "error", part: "error", id: "error" }, this.error))), h("div", { key: '56960b3bba88d5699a8dc813050bdb726bafa905', id: "listbox", part: "listbox", class: "listbox", popover: "auto", role: "listbox", "aria-label": this.label ?? this.placeholder, onToggle: this.onToggle }, h("slot", { key: '746f17fc39239ee6d577fb1bd1a0e0ac8165081d', onSlotchange: this.onSlotChange }), this.matchCount === 0 && (h("p", { key: '58b33af6e2edd8f4b64d0f9ee7fc62004f219cf4', class: "empty", part: "empty" }, this.emptyMessage)))));
+            tabindex: -1, onMouseDown: (event) => event.preventDefault(), onClick: this.clear }, h("pf-icon", { key: '580dab29c2631f79b7a611f7dd95a81fc5cffda2', name: "circle-xmark" }))), h("span", { key: '06d06d1fcbae5937632cf2451ab97d42d1410c91', class: "chevron", "aria-hidden": "true" }, h("pf-icon", { key: 'd30dd0a5d008cec99c1ec8fd25acc7fdfbdd68db', name: "chevron-down" }))), this.description && (h("p", { key: '09873008049536bb2eab61825ae95a2d92e3952a', class: "description", part: "description", id: "description" }, this.description)), this.error && (h("p", { key: 'ee43b1e024ff0e6e052054278680e04651b55421', class: "error", part: "error", id: "error" }, this.error))), h("div", { key: '5b221c6566bc6dd29dc3a5d9ee5268ec65fa296e', id: "listbox", part: "listbox", class: "listbox", popover: "auto", role: "listbox", "aria-label": this.label ?? this.placeholder, onToggle: this.onToggle }, h("slot", { key: '645c56c8dd776ddd013be68c2bfc544f35c05b35', onSlotchange: this.onSlotChange }), this.matchCount === 0 && (h("p", { key: '9a3aac572c41177b41be06f9986d0718756c7de3', class: "empty", part: "empty" }, this.emptyMessage)))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {