@redvars/peacock 3.2.6 → 3.2.8

package/dist/peacock-loader.js

@@ -1,44 +1,967 @@
-import { Elevation } from './elevation.js';
-import { FocusRing } from './focus-ring.js';
-import { Ripple } from './ripple.js';
-import { Icon } from './icon.js';
-import { Avatar } from './avatar.js';
-import { Badge } from './badge.js';
-import { Divider } from './divider.js';
-import { S as Switch, b as TimePicker, D as DatePicker, T as Textarea, N as NumberField, a as Input, C as CircularProgress, L as LinearProgress, I as IconButton, B as Button } from './switch-CC-S5fbc.js';
+import { A as Accordion, e as Container, g as EmptyState, l as Spinner, m as Switch, c as BreadcrumbItem, b as Breadcrumb, p as Tooltip, o as TimePicker, D as DatePicker, n as Textarea, N as NumberField, F as Field, j as Input, S as Skeleton, d as CircularProgress, L as LinearProgress, T as Tag, C as Chip, k as Link, R as Ripple, E as Elevation, f as Divider, i as IconButton, B as Badge, a as Avatar, h as FocusRing, I as Icon } from './breadcrumb-item-DkhwoMAH.js';
+import { e, s as spread, B as Button } from './button-BtpAXuLN.js';
 import { ButtonGroup } from './button-group.js';
-import { Field } from './field.js';
-import { Checkbox } from './checkbox.js';
-import { Menu } from './menu.js';
-import { MenuItem } from './menu-item.js';
-import { MenuList } from './menu-list.js';
-import { Accordion } from './accordion.js';
-import { Link } from './link.js';
-import { Tag } from './tag.js';
-import { Chip } from './chip.js';
-import { Tooltip } from './tooltip.js';
-import { Breadcrumb } from './breadcrumb.js';
-import { BreadcrumbItem } from './breadcrumb-item.js';
-import { Skeleton } from './skeleton.js';
-import { Spinner } from './spinner.js';
-import { EmptyState } from './empty-state.js';
-import { Container } from './container.js';
-import { i } from './lit-element-CA46RFZ_.js';
-import './property-DNVWDdPC.js';
-import './state-CV1fRmOT.js';
-import './directive-Cuw6h7YA.js';
-import './unsafe-html-BS8X6Gto.js';
-import './utils.js';
-import './class-map-BmCohX9p.js';
-import './spread-axRTFMoH.js';
-import './BaseButton.js';
-import './query-QBcUV-L_.js';
-import './style-map-CdmclYgz.js';
-import './base-progress.js';
-import './BaseInput.js';
-import './accordion-item.js';
-
-var css_248z$3 = "/* -------------------------------------------\n *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * ------------------------------------------- */\n\n:root {\n  --color-black: #000000;\n  --color-blue: var(--color-blue-40);\n  --color-blue-0: #000000;\n  --color-blue-10: #001550;\n  --color-blue-20: #00277f;\n  --color-blue-30: #003ab2;\n  --color-blue-40: #2352d5;\n  --color-blue-50: #446def;\n  --color-blue-60: #6789ff;\n  --color-blue-70: #90a7ff;\n  --color-blue-80: #b6c4ff;\n  --color-blue-90: #dce1ff;\n  --color-blue-100: #ffffff;\n  --color-blue-container: var(--color-blue-90);\n  --color-error: var(--color-red-40);\n  --color-error-container: var(--color-red-90);\n  --color-green: var(--color-green-40);\n  --color-green-0: #000000;\n  --color-green-10: #00210b;\n  --color-green-20: #003917;\n  --color-green-30: #005225;\n  --color-green-40: #0f6d35;\n  --color-green-50: #31874b;\n  --color-green-60: #4da163;\n  --color-green-70: #68bd7b;\n  --color-green-80: #83d995;\n  --color-green-90: #9ff6af;\n  --color-green-100: #ffffff;\n  --color-green-container: var(--color-green-90);\n  --color-inverse-blue: var(--color-blue-80);\n  --color-inverse-error: var(--color-red-80);\n  --color-inverse-green: var(--color-green-80);\n  --color-inverse-on-surface: var(--color-neutral-95);\n  --color-inverse-orange: var(--color-orange-80);\n  --color-inverse-primary: var(--color-primary-80);\n  --color-inverse-purple: var(--color-purple-80);\n  --color-inverse-red: var(--color-red-80);\n  --color-inverse-secondary: var(--color-secondary-80);\n  --color-inverse-success: var(--color-green-80);\n  --color-inverse-surface: var(--color-neutral-20);\n  --color-inverse-tertiary: var(--color-tertiary-80);\n  --color-inverse-warning: var(--color-yellow-80);\n  --color-inverse-yellow: var(--color-yellow-80);\n  --color-neutral: #79767a;\n  --color-neutral-0: #000000;\n  --color-neutral-4: #0f0e11;\n  --color-neutral-6: #141316;\n  --color-neutral-10: #1c1b1e;\n  --color-neutral-12: #201f23;\n  --color-neutral-17: #2b292d;\n  --color-neutral-20: #313033;\n  --color-neutral-22: #363438;\n  --color-neutral-30: #48464a;\n  --color-neutral-40: #605d62;\n  --color-neutral-50: #79767a;\n  --color-neutral-60: #939094;\n  --color-neutral-70: #aeaaaf;\n  --color-neutral-80: #c9c5ca;\n  --color-neutral-87: #ddd9dd;\n  --color-neutral-90: #e6e1e6;\n  --color-neutral-92: #ebe7ec;\n  --color-neutral-94: #f1ecf1;\n  --color-neutral-95: #f4eff4;\n  --color-neutral-96: #f7f2f7;\n  --color-neutral-98: #fdf8fd;\n  --color-neutral-99: #fffbff;\n  --color-neutral-100: #ffffff;\n  --color-neutral-variant: #79757f;\n  --color-neutral-variant-0: #000000;\n  --color-neutral-variant-4: #0f0d15;\n  --color-neutral-variant-6: #14121a;\n  --color-neutral-variant-10: #1c1a22;\n  --color-neutral-variant-12: #201e27;\n  --color-neutral-variant-17: #2b2931;\n  --color-neutral-variant-20: #312f38;\n  --color-neutral-variant-22: #36333c;\n  --color-neutral-variant-30: #48454e;\n  --color-neutral-variant-40: #605d66;\n  --color-neutral-variant-50: #79757f;\n  --color-neutral-variant-60: #938f99;\n  --color-neutral-variant-70: #aea9b4;\n  --color-neutral-variant-80: #c9c4d0;\n  --color-neutral-variant-87: #ddd8e3;\n  --color-neutral-variant-90: #e6e0ec;\n  --color-neutral-variant-92: #ece6f1;\n  --color-neutral-variant-94: #f1ecf7;\n  --color-neutral-variant-95: #f4eefa;\n  --color-neutral-variant-96: #f7f1fd;\n  --color-neutral-variant-98: #fdf8ff;\n  --color-neutral-variant-99: #fffbff;\n  --color-neutral-variant-100: #ffffff;\n  --color-on-blue: var(--color-blue-100);\n  --color-on-blue-container: var(--color-blue-10);\n  --color-on-error: var(--color-red-100);\n  --color-on-error-container: var(--color-red-10);\n  --color-on-green: var(--color-green-100);\n  --color-on-green-container: var(--color-green-10);\n  --color-on-orange: var(--color-orange-100);\n  --color-on-orange-container: var(--color-orange-10);\n  --color-on-primary: var(--color-primary-100);\n  --color-on-primary-container: var(--color-primary-10);\n  --color-on-purple: var(--color-purple-100);\n  --color-on-purple-container: var(--color-purple-10);\n  --color-on-red: var(--color-red-100);\n  --color-on-red-container: var(--color-red-10);\n  --color-on-secondary: var(--color-secondary-100);\n  --color-on-secondary-container: var(--color-secondary-10);\n  --color-on-success: var(--color-green-100);\n  --color-on-success-container: var(--color-green-10);\n  --color-on-surface: var(--color-neutral-10);\n  --color-on-surface-variant: var(--color-neutral-variant-30);\n  --color-on-tertiary: var(--color-tertiary-100);\n  --color-on-tertiary-container: var(--color-tertiary-10);\n  --color-on-warning: var(--color-yellow-100);\n  --color-on-warning-container: var(--color-yellow-10);\n  --color-on-yellow: var(--color-yellow-100);\n  --color-on-yellow-container: var(--color-yellow-10);\n  --color-orange: var(--color-orange-40);\n  --color-orange-0: #000000;\n  --color-orange-10: #341100;\n  --color-orange-20: #552100;\n  --color-orange-30: #783100;\n  --color-orange-40: #9e4300;\n  --color-orange-50: #c55500;\n  --color-orange-60: #ee6803;\n  --color-orange-70: #ff8d4c;\n  --color-orange-80: #ffb691;\n  --color-orange-90: #ffdbcb;\n  --color-orange-100: #ffffff;\n  --color-orange-container: var(--color-orange-90);\n  --color-outline: var(--color-neutral-variant-50);\n  --color-outline-variant: var(--color-neutral-variant-80);\n  --color-primary: var(--color-primary-40);\n  --color-primary-0: #000000;\n  --color-primary-10: #1d0061;\n  --color-primary-20: #330098;\n  --color-primary-30: #4a21bd;\n  --color-primary-40: #6341d5;\n  --color-primary-50: #7c5df0;\n  --color-primary-60: #967cff;\n  --color-primary-70: #b09dff;\n  --color-primary-80: #cbbeff;\n  --color-primary-90: #e7deff;\n  --color-primary-95: #f4eeff;\n  --color-primary-98: #fdf8ff;\n  --color-primary-100: #ffffff;\n  --color-primary-container: var(--color-primary-90);\n  --color-purple: var(--color-purple-40);\n  --color-purple-0: #000000;\n  --color-purple-10: #3f001c;\n  --color-purple-20: #650032;\n  --color-purple-30: #8e0048;\n  --color-purple-40: #ba0061;\n  --color-purple-50: #e6067a;\n  --color-purple-60: #ff4993;\n  --color-purple-70: #ff84ad;\n  --color-purple-80: #ffb1c7;\n  --color-purple-90: #ffd9e2;\n  --color-purple-100: #ffffff;\n  --color-purple-container: var(--color-purple-90);\n  --color-red: var(--color-red-40);\n  --color-red-0: #000000;\n  --color-red-10: #410001;\n  --color-red-20: #690002;\n  --color-red-30: #930005;\n  --color-red-40: #be0c0e;\n  --color-red-50: #e32e25;\n  --color-red-60: #ff5545;\n  --color-red-70: #ff8a7b;\n  --color-red-80: #ffb4a9;\n  --color-red-90: #ffdad5;\n  --color-red-100: #ffffff;\n  --color-red-container: var(--color-red-90);\n  --color-scrim: var(--color-neutral-0);\n  --color-secondary: var(--color-secondary-40);\n  --color-secondary-0: #000000;\n  --color-secondary-10: #1d192b;\n  --color-secondary-20: #322e41;\n  --color-secondary-30: #484458;\n  --color-secondary-40: #605b71;\n  --color-secondary-50: #79748a;\n  --color-secondary-60: #938da5;\n  --color-secondary-70: #aea8c0;\n  --color-secondary-80: #cac3dc;\n  --color-secondary-90: #e6dff9;\n  --color-secondary-95: #f4eeff;\n  --color-secondary-98: #fdf8ff;\n  --color-secondary-100: #ffffff;\n  --color-secondary-container: var(--color-secondary-90);\n  --color-shadow: var(--color-neutral-0);\n  --color-success: var(--color-green-40);\n  --color-success-container: var(--color-green-90);\n  --color-surface: var(--color-neutral-99);\n  --color-surface-container: var(--color-neutral-94);\n  --color-surface-container-high: var(--color-neutral-92);\n  --color-surface-container-highest: var(--color-neutral-90);\n  --color-surface-container-low: var(--color-neutral-96);\n  --color-surface-container-lowest: var(--color-neutral-100);\n  --color-surface-dim: var(--color-neutral-87);\n  --color-surface-variant: var(--color-neutral-variant-90);\n  --color-tertiary: var(--color-tertiary-40);\n  --color-tertiary-0: #000000;\n  --color-tertiary-10: #30111f;\n  --color-tertiary-20: #492534;\n  --color-tertiary-30: #623b4b;\n  --color-tertiary-40: #7c5263;\n  --color-tertiary-50: #986a7b;\n  --color-tertiary-60: #b48395;\n  --color-tertiary-70: #d09db0;\n  --color-tertiary-80: #eeb8cb;\n  --color-tertiary-90: #ffd9e5;\n  --color-tertiary-95: #ffecf1;\n  --color-tertiary-98: #fff8f8;\n  --color-tertiary-100: #ffffff;\n  --color-tertiary-container: var(--color-tertiary-90);\n  --color-warning: var(--color-yellow-40);\n  --color-warning-container: var(--color-yellow-90);\n  --color-white: #ffffff;\n  --color-yellow: var(--color-yellow-40);\n  --color-yellow-0: #000000;\n  --color-yellow-10: #241a00;\n  --color-yellow-20: #3d2f00;\n  --color-yellow-30: #574400;\n  --color-yellow-40: #745b00;\n  --color-yellow-50: #917400;\n  --color-yellow-60: #b08d00;\n  --color-yellow-70: #d0a600;\n  --color-yellow-80: #f0c100;\n  --color-yellow-90: #ffe089;\n  --color-yellow-100: #ffffff;\n  --color-yellow-container: var(--color-yellow-90);\n  --container-lg: 1056px; /* Large container width. Intended for standard desktop layouts with typical content density. */\n  --container-max: 1584px; /* Maximum container width. Use when constraining very wide layouts to maintain readable line lengths. */\n  --container-md: 672px; /* Medium container width. Suitable for tablet layouts and compact desktop content areas. */\n  --container-sm: 320px; /* Small container width. Use for narrow layouts and small screens such as mobile devices. */\n  --container-xl: 1312px; /* Extra large container width. Use for wide desktop displays and content-heavy pages. */\n  --duration-long1: 450ms; /* These durations are often paired with Emphasized easing. */\n  --duration-long2: 500ms; /* These durations are often paired with Emphasized easing. */\n  --duration-medium1: 250ms; /* These are used for medium duration transitions, like modal animations. */\n  --duration-medium2: 300ms; /* These are used for medium duration transitions, like modal animations. */\n  --duration-short1: 50ms; /* These are used for small utility-focused transitions. Like checkbox animations. */\n  --duration-short2: 100ms; /* These are used for small utility-focused transitions. Like checkbox animations. */\n  --duration-short3: 150ms; /* These are used for small utility-focused transitions. Like checkbox animations. */\n  --duration-short4: 200ms; /* These are used for small utility-focused transitions. Like checkbox animations. */\n  --easing-linear: cubic-bezier(0, 0, 1, 1);\n  --easing-standard: cubic-bezier(0.2, 0, 0, 1);\n  --font-family-brand: \"Noto Sans\", sans-serif; /* The font family used for brand headings and titles. */\n  --font-family-monospace: \"Noto Sans Mono\", monospace; /* The font family used for code snippets and monospaced text. */\n  --font-family-sans: \"Noto Sans\", sans-serif; /* The primary font family used for body text and general content. */\n  --font-weight-bold: 700; /* Bold weight for emphasis. 700 weight. */\n  --font-weight-medium: 500; /* Slightly heavier than regular weight. 500 weight. */\n  --font-weight-regular: 400; /* Standard weight for regular text. 400 weight. */\n  --font-weight-semi-bold: 600; /* Heavier than medium weight. 600 weight. */\n  --global-avatar-border-radius: var(--shape-corner-full);\n  --global-badge-color: var(--color-error);\n  --shape-corner-extra-large: 28px;\n  --shape-corner-extra-small: 4px;\n  --shape-corner-full: 9999px;\n  --shape-corner-large: 16px;\n  --shape-corner-large-increased: 20px;\n  --shape-corner-medium: 12px;\n  --shape-corner-none: 0;\n  --shape-corner-small: 8px;\n  --spacing-000: 0; /* No spacing (base × 0). */\n  --spacing-025: 0.125rem; /* 2px - Smallest increment (base × 0.125). */\n  --spacing-050: 0.25rem; /* 4px - Extra small spacing (base × 0.25). */\n  --spacing-100: 0.5rem; /* 8px - Small spacing (base × 0.5). */\n  --spacing-150: 0.75rem; /* 12px - Small-medium spacing (base × 0.75). */\n  --spacing-200: 1rem; /* 16px - Base spacing unit (base × 1). */\n  --spacing-300: 1.5rem; /* 24px - Medium spacing (base × 1.5). */\n  --spacing-400: 2rem; /* 32px - Medium-large spacing (base × 2). */\n  --spacing-500: 2.5rem; /* 40px - Large spacing (base × 2.5). */\n  --spacing-600: 3rem; /* 48px - Extra large spacing (base × 3). */\n  --spacing-800: 4rem; /* 64px - Huge spacing (base × 4). */\n  --spacing-1000: 5rem; /* 80px - Massive spacing (base × 5). */\n  --spacing-1200: 6rem; /* 96px - Gigantic spacing (base × 6). */\n  --spacing-2000: 10rem; /* 160px - Maximum defined spacing (base × 10). */\n  --spacing-base: 1rem; /* Base spacing unit (1rem = 16px). */\n  --typography-body-large-emphasized-font-family: var(--font-family-sans);\n  --typography-body-large-emphasized-font-size: 1rem;\n  --typography-body-large-emphasized-font-weight: var(--font-weight-medium);\n  --typography-body-large-emphasized-letter-spacing: 0.5px;\n  --typography-body-large-emphasized-line-height: 1.5rem;\n  --typography-body-large-font-family: var(--font-family-sans);\n  --typography-body-large-font-size: 1rem;\n  --typography-body-large-font-weight: var(--font-weight-regular);\n  --typography-body-large-letter-spacing: 0.5px;\n  --typography-body-large-line-height: 1.5rem;\n  --typography-body-medium-emphasized-font-family: var(--font-family-sans);\n  --typography-body-medium-emphasized-font-size: 0.875rem;\n  --typography-body-medium-emphasized-font-weight: var(--font-weight-medium);\n  --typography-body-medium-emphasized-letter-spacing: 0.25px;\n  --typography-body-medium-emphasized-line-height: 1.25rem;\n  --typography-body-medium-font-family: var(--font-family-sans);\n  --typography-body-medium-font-size: 0.875rem;\n  --typography-body-medium-font-weight: var(--font-weight-regular);\n  --typography-body-medium-letter-spacing: 0.25px;\n  --typography-body-medium-line-height: 1.25rem;\n  --typography-body-small-emphasized-font-family: var(--font-family-sans);\n  --typography-body-small-emphasized-font-size: 0.75rem;\n  --typography-body-small-emphasized-font-weight: var(--font-weight-medium);\n  --typography-body-small-emphasized-letter-spacing: 0.4000000059604645px;\n  --typography-body-small-emphasized-line-height: 1rem;\n  --typography-body-small-font-family: var(--font-family-sans);\n  --typography-body-small-font-size: 0.75rem;\n  --typography-body-small-font-weight: var(--font-weight-regular);\n  --typography-body-small-letter-spacing: 0.4000000059604645px;\n  --typography-body-small-line-height: 1rem;\n  --typography-code-large-emphasized-font-family: var(--font-family-monospace);\n  --typography-code-large-emphasized-font-size: 1rem;\n  --typography-code-large-emphasized-font-weight: var(--font-weight-medium);\n  --typography-code-large-emphasized-letter-spacing: 0.5px;\n  --typography-code-large-emphasized-line-height: 1.5rem;\n  --typography-code-large-font-family: var(--font-family-monospace);\n  --typography-code-large-font-size: 1rem;\n  --typography-code-large-font-weight: var(--font-weight-regular);\n  --typography-code-large-letter-spacing: 0.5px;\n  --typography-code-large-line-height: 1.5rem;\n  --typography-code-medium-emphasized-font-family: var(--font-family-monospace);\n  --typography-code-medium-emphasized-font-size: 0.875rem;\n  --typography-code-medium-emphasized-font-weight: var(--font-weight-medium);\n  --typography-code-medium-emphasized-letter-spacing: 0.25px;\n  --typography-code-medium-emphasized-line-height: 1.25rem;\n  --typography-code-medium-font-family: var(--font-family-monospace);\n  --typography-code-medium-font-size: 0.875rem;\n  --typography-code-medium-font-weight: var(--font-weight-regular);\n  --typography-code-medium-letter-spacing: 0.25px;\n  --typography-code-medium-line-height: 1.25rem;\n  --typography-code-small-emphasized-font-family: var(--font-family-monospace);\n  --typography-code-small-emphasized-font-size: 0.75rem;\n  --typography-code-small-emphasized-font-weight: var(--font-weight-medium);\n  --typography-code-small-emphasized-letter-spacing: 0.4000000059604645px;\n  --typography-code-small-emphasized-line-height: 1rem;\n  --typography-code-small-font-family: var(--font-family-monospace);\n  --typography-code-small-font-size: 0.75rem;\n  --typography-code-small-font-weight: var(--font-weight-regular);\n  --typography-code-small-letter-spacing: 0.4000000059604645px;\n  --typography-code-small-line-height: 1rem;\n  --typography-display-large-emphasized-font-family: var(--font-family-sans);\n  --typography-display-large-emphasized-font-size: 3.5625rem;\n  --typography-display-large-emphasized-font-weight: var(--font-weight-medium);\n  --typography-display-large-emphasized-letter-spacing: -0.25px;\n  --typography-display-large-emphasized-line-height: 4rem;\n  --typography-display-large-font-family: var(--font-family-sans);\n  --typography-display-large-font-size: 3.5625rem;\n  --typography-display-large-font-weight: var(--font-weight-regular);\n  --typography-display-large-letter-spacing: -0.25px;\n  --typography-display-large-line-height: 4rem;\n  --typography-display-medium-emphasized-font-family: var(--font-family-sans);\n  --typography-display-medium-emphasized-font-size: 2.8125rem;\n  --typography-display-medium-emphasized-font-weight: var(--font-weight-medium);\n  --typography-display-medium-emphasized-letter-spacing: 0;\n  --typography-display-medium-emphasized-line-height: 3.25rem;\n  --typography-display-medium-font-family: var(--font-family-sans);\n  --typography-display-medium-font-size: 2.8125rem;\n  --typography-display-medium-font-weight: var(--font-weight-regular);\n  --typography-display-medium-letter-spacing: 0;\n  --typography-display-medium-line-height: 3.25rem;\n  --typography-display-small-emphasized-font-family: var(--font-family-sans);\n  --typography-display-small-emphasized-font-size: 2.25rem;\n  --typography-display-small-emphasized-font-weight: var(--font-weight-medium);\n  --typography-display-small-emphasized-letter-spacing: 0;\n  --typography-display-small-emphasized-line-height: 2.75rem;\n  --typography-display-small-font-family: var(--font-family-sans);\n  --typography-display-small-font-size: 2.25rem;\n  --typography-display-small-font-weight: var(--font-weight-regular);\n  --typography-display-small-letter-spacing: 0;\n  --typography-display-small-line-height: 2.75rem;\n  --typography-headline-large-emphasized-font-family: var(--font-family-sans);\n  --typography-headline-large-emphasized-font-size: 2rem;\n  --typography-headline-large-emphasized-font-weight: var(--font-weight-medium);\n  --typography-headline-large-emphasized-letter-spacing: 0;\n  --typography-headline-large-emphasized-line-height: 2.5rem;\n  --typography-headline-large-font-family: var(--font-family-sans);\n  --typography-headline-large-font-size: 2rem;\n  --typography-headline-large-font-weight: var(--font-weight-regular);\n  --typography-headline-large-letter-spacing: 0;\n  --typography-headline-large-line-height: 2.5rem;\n  --typography-headline-medium-emphasized-font-family: var(--font-family-sans);\n  --typography-headline-medium-emphasized-font-size: 1.75rem;\n  --typography-headline-medium-emphasized-font-weight: var(--font-weight-medium);\n  --typography-headline-medium-emphasized-letter-spacing: 0;\n  --typography-headline-medium-emphasized-line-height: 2.25rem;\n  --typography-headline-medium-font-family: var(--font-family-sans);\n  --typography-headline-medium-font-size: 1.75rem;\n  --typography-headline-medium-font-weight: var(--font-weight-regular);\n  --typography-headline-medium-letter-spacing: 0;\n  --typography-headline-medium-line-height: 2.25rem;\n  --typography-headline-small-emphasized-font-family: var(--font-family-sans);\n  --typography-headline-small-emphasized-font-size: 1.5rem;\n  --typography-headline-small-emphasized-font-weight: var(--font-weight-medium);\n  --typography-headline-small-emphasized-letter-spacing: 0;\n  --typography-headline-small-emphasized-line-height: 2rem;\n  --typography-headline-small-font-family: var(--font-family-sans);\n  --typography-headline-small-font-size: 1.5rem;\n  --typography-headline-small-font-weight: var(--font-weight-regular);\n  --typography-headline-small-letter-spacing: 0;\n  --typography-headline-small-line-height: 2rem;\n  --typography-label-large-emphasized-font-family: var(--font-family-sans);\n  --typography-label-large-emphasized-font-size: 0.875rem;\n  --typography-label-large-emphasized-font-weight: var(--font-weight-semi-bold);\n  --typography-label-large-emphasized-letter-spacing: 0.10000000149011612px;\n  --typography-label-large-emphasized-line-height: 1.25rem;\n  --typography-label-large-font-family: var(--font-family-sans);\n  --typography-label-large-font-size: 0.875rem;\n  --typography-label-large-font-weight: var(--font-weight-medium);\n  --typography-label-large-letter-spacing: 0.10000000149011612px;\n  --typography-label-large-line-height: 1.25rem;\n  --typography-label-medium-emphasized-font-family: var(--font-family-sans);\n  --typography-label-medium-emphasized-font-size: 0.75rem;\n  --typography-label-medium-emphasized-font-weight: var(--font-weight-semi-bold);\n  --typography-label-medium-emphasized-letter-spacing: 0.5px;\n  --typography-label-medium-emphasized-line-height: 1rem;\n  --typography-label-medium-font-family: var(--font-family-sans);\n  --typography-label-medium-font-size: 0.75rem;\n  --typography-label-medium-font-weight: var(--font-weight-medium);\n  --typography-label-medium-letter-spacing: 0.5px;\n  --typography-label-medium-line-height: 1rem;\n  --typography-label-small-emphasized-font-family: var(--font-family-sans);\n  --typography-label-small-emphasized-font-size: 0.6875rem;\n  --typography-label-small-emphasized-font-weight: var(--font-weight-semi-bold);\n  --typography-label-small-emphasized-letter-spacing: 0.5px;\n  --typography-label-small-emphasized-line-height: 1rem;\n  --typography-label-small-font-family: var(--font-family-sans);\n  --typography-label-small-font-size: 0.6875rem;\n  --typography-label-small-font-weight: var(--font-weight-medium);\n  --typography-label-small-letter-spacing: 0.5px;\n  --typography-label-small-line-height: 1rem;\n  --typography-title-large-emphasized-font-family: var(--font-family-sans);\n  --typography-title-large-emphasized-font-size: 1.375rem;\n  --typography-title-large-emphasized-font-weight: var(--font-weight-medium);\n  --typography-title-large-emphasized-letter-spacing: 0;\n  --typography-title-large-emphasized-line-height: 1.75rem;\n  --typography-title-large-font-family: var(--font-family-sans);\n  --typography-title-large-font-size: 1.375rem;\n  --typography-title-large-font-weight: var(--font-weight-regular);\n  --typography-title-large-letter-spacing: 0;\n  --typography-title-large-line-height: 1.75rem;\n  --typography-title-medium-emphasized-font-family: var(--font-family-sans);\n  --typography-title-medium-emphasized-font-size: 1rem;\n  --typography-title-medium-emphasized-font-weight: var(--font-weight-semi-bold);\n  --typography-title-medium-emphasized-letter-spacing: 0.15000000596046448px;\n  --typography-title-medium-emphasized-line-height: 1.5rem;\n  --typography-title-medium-font-family: var(--font-family-sans);\n  --typography-title-medium-font-size: 1rem;\n  --typography-title-medium-font-weight: var(--font-weight-medium);\n  --typography-title-medium-letter-spacing: 0.15000000596046448px;\n  --typography-title-medium-line-height: 1.5rem;\n  --typography-title-small-emphasized-font-family: var(--font-family-sans);\n  --typography-title-small-emphasized-font-size: 0.875rem;\n  --typography-title-small-emphasized-font-weight: var(--font-weight-semi-bold);\n  --typography-title-small-emphasized-letter-spacing: 0.10000000149011612px;\n  --typography-title-small-emphasized-line-height: 1.25rem;\n  --typography-title-small-font-family: var(--font-family-sans);\n  --typography-title-small-font-size: 0.875rem;\n  --typography-title-small-font-weight: var(--font-weight-medium);\n  --typography-title-small-letter-spacing: 0.10000000149011612px;\n  --typography-title-small-line-height: 1.25rem;\n  --z-index-badge: 10;\n  color-scheme: light dark;\n}\n\n[data-theme='dark'] {\n  --color-blue: var(--color-blue-80);\n  --color-blue-container: var(--color-blue-30);\n  --color-error: var(--color-red-80);\n  --color-error-container: var(--color-red-30);\n  --color-green: var(--color-green-80);\n  --color-green-container: var(--color-green-30);\n  --color-inverse-blue: var(--color-blue-40);\n  --color-inverse-error: var(--color-red-40);\n  --color-inverse-green: var(--color-green-40);\n  --color-inverse-on-surface: var(--color-neutral-20);\n  --color-inverse-orange: var(--color-orange-40);\n  --color-inverse-primary: var(--color-primary-40);\n  --color-inverse-purple: var(--color-purple-40);\n  --color-inverse-red: var(--color-red-40);\n  --color-inverse-secondary: var(--color-secondary-40);\n  --color-inverse-success: var(--color-green-40);\n  --color-inverse-surface: var(--color-neutral-90);\n  --color-inverse-tertiary: var(--color-tertiary-40);\n  --color-inverse-warning: var(--color-yellow-40);\n  --color-inverse-yellow: var(--color-yellow-40);\n  --color-on-blue: var(--color-blue-20);\n  --color-on-blue-container: var(--color-blue-90);\n  --color-on-error: var(--color-red-20);\n  --color-on-error-container: var(--color-red-90);\n  --color-on-green: var(--color-green-20);\n  --color-on-green-container: var(--color-green-90);\n  --color-on-orange: var(--color-orange-20);\n  --color-on-orange-container: var(--color-orange-90);\n  --color-on-primary: var(--color-primary-20);\n  --color-on-primary-container: var(--color-primary-90);\n  --color-on-purple: var(--color-purple-20);\n  --color-on-purple-container: var(--color-purple-90);\n  --color-on-red: var(--color-red-20);\n  --color-on-red-container: var(--color-red-90);\n  --color-on-secondary: var(--color-secondary-20);\n  --color-on-secondary-container: var(--color-secondary-90);\n  --color-on-success: var(--color-green-20);\n  --color-on-success-container: var(--color-green-90);\n  --color-on-surface: var(--color-neutral-90);\n  --color-on-surface-variant: var(--color-neutral-variant-80);\n  --color-on-tertiary: var(--color-tertiary-20);\n  --color-on-tertiary-container: var(--color-tertiary-90);\n  --color-on-warning: var(--color-yellow-20);\n  --color-on-warning-container: var(--color-yellow-90);\n  --color-on-yellow: var(--color-yellow-20);\n  --color-on-yellow-container: var(--color-yellow-90);\n  --color-orange: var(--color-orange-80);\n  --color-orange-container: var(--color-orange-30);\n  --color-outline: var(--color-neutral-variant-60);\n  --color-outline-variant: var(--color-neutral-variant-30);\n  --color-primary: var(--color-primary-80);\n  --color-primary-container: var(--color-primary-30);\n  --color-purple: var(--color-purple-80);\n  --color-purple-container: var(--color-purple-30);\n  --color-red: var(--color-red-80);\n  --color-red-container: var(--color-red-30);\n  --color-scrim: var(--color-neutral-0);\n  --color-secondary: var(--color-secondary-80);\n  --color-secondary-container: var(--color-secondary-30);\n  --color-shadow: var(--color-neutral-0);\n  --color-success: var(--color-green-80);\n  --color-success-container: var(--color-green-30);\n  --color-surface: var(--color-neutral-10);\n  --color-surface-container: var(--color-neutral-12);\n  --color-surface-container-high: var(--color-neutral-17);\n  --color-surface-container-highest: var(--color-neutral-22);\n  --color-surface-container-low: var(--color-neutral-10);\n  --color-surface-container-lowest: var(--color-neutral-4);\n  --color-surface-dim: var(--color-neutral-6);\n  --color-surface-variant: var(--color-neutral-variant-30);\n  --color-tertiary: var(--color-tertiary-80);\n  --color-tertiary-container: var(--color-tertiary-30);\n  --color-warning: var(--color-yellow-80);\n  --color-warning-container: var(--color-yellow-30);\n  --color-yellow: var(--color-yellow-80);\n  --color-yellow-container: var(--color-yellow-30);\n}\n\n";
+import { i, _ as __decorate, n, a as i$1, w, b } from './PeacockComponent-DMrFEGDh.js';
+import { r } from './state-CEVpI7Vv.js';
+import { e as e$1 } from './class-map-CbncA34D.js';
+import './unsafe-html-Ca00SXpn.js';
+import './style-map-mOmZwsJT.js';
+
+var css_248z$3 = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: inline-block;
+  --checkbox-size: 18px;
+  --checkbox-icon-size: 12px;
+  --checkbox-selected-color: var(--color-primary);
+  --checkbox-unselected-color: var(--color-on-surface-variant);
+  --checkbox-checkmark-color: var(--color-on-primary);
+  --checkbox-state-layer-size: 40px;
+  --checkbox-disabled-opacity: 0.38;
+  --checkbox-border-radius: 2px;
+}
+
+.checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  font-family: var(--typography-body-medium-font-family) !important;
+  font-size: var(--typography-body-medium-font-size) !important;
+  font-weight: var(--typography-body-medium-font-weight) !important;
+  line-height: var(--typography-body-medium-line-height) !important;
+  letter-spacing: var(--typography-body-medium-letter-spacing) !important;
+}
+.checkbox.has-content {
+  gap: 8px;
+}
+.checkbox .input-native {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.checkbox .container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--checkbox-state-layer-size);
+  height: var(--checkbox-state-layer-size);
+  cursor: inherit;
+  outline: none;
+  flex-shrink: 0;
+}
+.checkbox .state-layer {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  opacity: 0;
+  transition: opacity var(--duration-short2) var(--easing-standard);
+}
+.checkbox .outline {
+  position: absolute;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  border: 2px solid var(--checkbox-unselected-color);
+  border-radius: var(--checkbox-border-radius);
+  box-sizing: border-box;
+  transition: border-color var(--duration-short2) var(--easing-standard);
+}
+.checkbox .background {
+  position: absolute;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  background: var(--checkbox-selected-color);
+  border-radius: var(--checkbox-border-radius);
+  opacity: 0;
+  transform: scale(0);
+  transition: transform var(--duration-short2) var(--easing-standard), opacity var(--duration-short2) var(--easing-standard);
+}
+.checkbox .icon {
+  position: absolute;
+  width: var(--checkbox-icon-size);
+  height: var(--checkbox-icon-size);
+  fill: none;
+  stroke: var(--checkbox-checkmark-color);
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  opacity: 0;
+  transition: opacity var(--duration-short1) var(--easing-standard);
+}
+.checkbox .icon .checkmark {
+  stroke-dasharray: 14;
+  stroke-dashoffset: 14;
+  transition: stroke-dashoffset var(--duration-short4) var(--easing-emphasized);
+}
+.checkbox .icon .indeterminate {
+  transform-origin: center;
+  opacity: 0;
+  transition: opacity var(--duration-short1) var(--easing-standard);
+}
+.checkbox .label {
+  color: var(--color-on-surface);
+  cursor: inherit;
+}
+.checkbox:hover:not(.disabled):not(.readonly) .state-layer {
+  opacity: 0.08;
+  background: var(--color-on-surface);
+}
+.checkbox:hover:not(.disabled):not(.readonly).state-checked .state-layer, .checkbox:hover:not(.disabled):not(.readonly).state-indeterminate .state-layer {
+  background: var(--checkbox-selected-color);
+}
+.checkbox.has-focus:not(.active):not(.disabled):not(.readonly) .state-layer {
+  opacity: 0.12;
+  background: var(--color-on-surface);
+}
+.checkbox.has-focus:not(.active):not(.disabled):not(.readonly) .container {
+  outline: 3px solid var(--color-primary);
+  outline-offset: 2px;
+  border-radius: 50%;
+}
+.checkbox.has-focus:not(.active):not(.disabled):not(.readonly).state-checked .state-layer, .checkbox.has-focus:not(.active):not(.disabled):not(.readonly).state-indeterminate .state-layer {
+  background: var(--checkbox-selected-color);
+}
+.checkbox.active:not(.disabled):not(.readonly) .state-layer {
+  opacity: 0.12;
+  background: var(--color-on-surface);
+}
+.checkbox.active:not(.disabled):not(.readonly).state-checked .state-layer, .checkbox.active:not(.disabled):not(.readonly).state-indeterminate .state-layer {
+  background: var(--checkbox-selected-color);
+}
+.checkbox.rounded {
+  --checkbox-border-radius: 18px;
+}
+
+.checkbox.state-checked .outline {
+  border-color: transparent;
+}
+.checkbox.state-checked .background {
+  opacity: 1;
+  transform: scale(1);
+}
+.checkbox.state-checked .icon {
+  opacity: 1;
+}
+.checkbox.state-checked .icon .checkmark {
+  stroke-dashoffset: 0;
+}
+
+.checkbox.state-indeterminate .outline {
+  border-color: transparent;
+}
+.checkbox.state-indeterminate .background {
+  opacity: 1;
+  transform: scale(1);
+}
+.checkbox.state-indeterminate .icon {
+  opacity: 1;
+  fill: var(--checkbox-checkmark-color);
+}
+.checkbox.state-indeterminate .icon .indeterminate {
+  opacity: 1;
+}
+
+.checkbox.size-sm {
+  --checkbox-size: 16px;
+  --checkbox-icon-size: 10px;
+  --checkbox-state-layer-size: 36px;
+  font-size: var(--font-size-body-small);
+  line-height: var(--line-height-body-small);
+}
+.checkbox.size-sm .icon {
+  stroke-width: 1.5;
+}
+
+.checkbox.size-md {
+  --checkbox-size: 18px;
+  --checkbox-icon-size: 12px;
+  --checkbox-state-layer-size: 40px;
+}
+.checkbox.size-md .icon {
+  stroke-width: 2;
+}
+
+.checkbox.size-lg {
+  --checkbox-size: 24px;
+  --checkbox-icon-size: 16px;
+  --checkbox-state-layer-size: 48px;
+  font-size: var(--font-size-body-large);
+  line-height: var(--line-height-body-large);
+}
+.checkbox.size-lg .icon {
+  stroke-width: 2.5;
+}
+
+.checkbox.readonly {
+  cursor: default;
+}
+.checkbox.readonly .label {
+  color: var(--color-on-surface);
+}
+.checkbox.readonly .outline {
+  border-color: var(--color-on-surface-variant);
+}
+.checkbox.readonly.state-checked .background, .checkbox.readonly.state-indeterminate .background {
+  background: var(--color-on-surface-variant);
+}
+.checkbox.readonly .state-layer {
+  display: none;
+}
+
+.checkbox.disabled {
+  cursor: not-allowed;
+  opacity: var(--checkbox-disabled-opacity);
+}
+.checkbox.disabled .label {
+  color: var(--color-on-surface);
+}
+.checkbox.disabled .outline {
+  border-color: var(--color-on-surface);
+}
+.checkbox.disabled.state-checked .background, .checkbox.disabled.state-indeterminate .background {
+  background: var(--color-on-surface);
+}
+.checkbox.disabled .state-layer {
+  display: none;
+}`;
+
+/**
+ * @label Checkbox
+ * @tag base-checkbox
+ * @rawTag checkbox
+ *
+ * @summary Captures boolean input with an optional indeterminate mode.
+ * @overview
+ * <p>Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.</p>
+ * <p>Material Design 3 checkboxes feature a smooth animation and clear visual states for checked, unchecked, and indeterminate.</p>
+ *
+ * @cssprop --checkbox-size: Size of the checkbox container.
+ * @cssprop --checkbox-selected-color: Color of the checkbox when selected.
+ * @cssprop --checkbox-unselected-color: Color of the checkbox border when unselected.
+ * @cssprop --checkbox-checkmark-color: Color of the checkmark icon.
+ * @cssprop --checkbox-state-layer-size: Size of the state layer for touch target.
+ *
+ * @fires {CustomEvent} change - Dispatched when the checkbox value changes.
+ * @fires {CustomEvent} blur - Dispatched when the checkbox loses focus.
+ * @fires {CustomEvent} focus - Dispatched when the checkbox receives focus.
+ *
+ * @example
+ * ```html
+ * <base-checkbox label="Accept terms"></base-checkbox>
+ * ```
+ * @tags input, form
+ */
+class Checkbox extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * The input field name.
+         */
+        this.name = '';
+        /**
+         * The checkbox label.
+         */
+        this.label = '';
+        /**
+         * The input field value (checked state).
+         */
+        this.value = false;
+        /**
+         * If true, displays the checkbox in an indeterminate state.
+         */
+        this.indeterminate = false;
+        /**
+         * If true, the checkbox has rounded corners. Defaults to `false`.
+         */
+        this.rounded = false;
+        /**
+         * The checkbox size.
+         * Possible values are: `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
+         */
+        this.size = 'md';
+        /**
+         * If true, required icon is shown. Defaults to `false`.
+         */
+        this.required = false;
+        /**
+         * If true, the checkbox is readonly. Defaults to `false`.
+         */
+        this.readonly = false;
+        /**
+         * If true, the user cannot interact with the checkbox. Defaults to `false`.
+         */
+        this.disabled = false;
+        /**
+         * Configuration object for aria attributes.
+         */
+        this.configAria = {};
+        this.hasFocus = false;
+        this.isActive = false;
+        this.slotHasContent = false;
+        this.windowMouseUp = () => {
+            if (this.isActive) {
+                this.isActive = false;
+            }
+        };
+        this.windowKeyUp = (evt) => {
+            if (this.isActive && evt.key === ' ') {
+                this.isActive = false;
+            }
+        };
+        this.mouseDownHandler = () => {
+            this.isActive = true;
+        };
+        this.keyDownHandler = (evt) => {
+            if (evt.key === ' ') {
+                evt.preventDefault();
+                this.isActive = true;
+                this.clickHandler(evt);
+            }
+        };
+        this.clickHandler = (ev) => {
+            if (!this.disabled && !this.readonly) {
+                this.value = !this.value;
+                this.indeterminate = false;
+                this.dispatchEvent(new CustomEvent('change', {
+                    detail: { value: this.value, originalEvent: ev },
+                    bubbles: true,
+                    composed: true,
+                }));
+                this.containerElement?.focus();
+            }
+        };
+        this.blurHandler = (ev) => {
+            this.hasFocus = false;
+            this.dispatchEvent(new CustomEvent('blur', {
+                detail: ev,
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this.focusHandler = (ev) => {
+            this.hasFocus = true;
+            this.dispatchEvent(new CustomEvent('focus', {
+                detail: ev,
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this.handleKeyUp = (evt) => {
+            if (evt.key === 'Enter') {
+                this.clickHandler(evt);
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.handleInitialAttributes();
+        window.addEventListener('mouseup', this.windowMouseUp);
+        window.addEventListener('keyup', this.windowKeyUp);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('mouseup', this.windowMouseUp);
+        window.removeEventListener('keyup', this.windowKeyUp);
+    }
+    firstUpdated() {
+        this.slotHasContent = this.hasChildNodes();
+    }
+    handleInitialAttributes() {
+        if (this.hasAttribute('tabindex')) {
+            this.tabindex = this.getAttribute('tabindex') || undefined;
+            this.removeAttribute('tabindex');
+        }
+        Array.from(this.attributes).forEach(attr => {
+            if (attr.name.startsWith('aria-')) {
+                this.configAria[attr.name] = attr.value;
+                this.removeAttribute(attr.name);
+            }
+        });
+    }
+    /**
+     * Sets focus on the checkbox.
+     */
+    focus() {
+        this.containerElement?.focus();
+    }
+    /**
+     * Removes focus from the checkbox.
+     */
+    blur() {
+        this.containerElement?.blur();
+    }
+    render() {
+        const cssClasses = {
+            checkbox: true,
+            'state-checked': this.value,
+            'state-indeterminate': !this.value && this.indeterminate,
+            [`size-${this.size}`]: true,
+            'has-focus': this.hasFocus,
+            active: this.isActive,
+            disabled: this.disabled,
+            readonly: this.readonly,
+            required: this.required,
+            rounded: this.rounded,
+            'has-content': this.slotHasContent,
+        };
+        return b `
+      <label class=${e$1(cssClasses)}>
+        <div
+          class="container"
+          tabindex=${this.tabindex || 0}
+          @keyup=${this.handleKeyUp}
+          @mousedown=${this.mouseDownHandler}
+          @keydown=${this.keyDownHandler}
+          @blur=${this.blurHandler}
+          @focus=${this.focusHandler}
+          role="checkbox"
+          aria-disabled=${this.disabled}
+          aria-required=${this.required}
+          aria-checked=${this.value
+            ? 'true'
+            : this.indeterminate
+                ? 'mixed'
+                : 'false'}
+          ${spread(this.configAria)}
+        >
+          <div class="state-layer"></div>
+          <div class="outline"></div>
+          <div class="background"></div>
+          <svg class="icon" viewBox="0 0 12 12">
+            ${this.value
+            ? w `
+                  <path
+                    class="checkmark"
+                    d="M2 6L5 9L10 2"
+                  />
+                `
+            : this.indeterminate
+                ? w `<rect
+                    class="indeterminate"
+                    x="2"
+                    y="5"
+                    width="8"
+                    height="2"
+                  />`
+                : ''}
+          </svg>
+        </div>
+
+        <input
+          type="checkbox"
+          class="input-native"
+          name=${this.name}
+          .checked=${this.value}
+          .indeterminate=${this.indeterminate}
+          aria-hidden="true"
+          ?required=${this.required}
+          tabindex="-1"
+          @click=${this.clickHandler}
+        />
+
+        ${this.label
+            ? b `<div class="label">${this.label}</div>`
+            : b `<div class="label slot-container"><slot></slot></div>`}
+      </label>
+    `;
+    }
+}
+Checkbox.styles = [css_248z$3];
+__decorate([
+    n({ type: String })
+], Checkbox.prototype, "name", void 0);
+__decorate([
+    n({ type: String })
+], Checkbox.prototype, "label", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Checkbox.prototype, "value", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Checkbox.prototype, "indeterminate", void 0);
+__decorate([
+    n({ type: Boolean })
+], Checkbox.prototype, "rounded", void 0);
+__decorate([
+    n({ type: String })
+], Checkbox.prototype, "size", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Checkbox.prototype, "required", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Checkbox.prototype, "readonly", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Checkbox.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Object })
+], Checkbox.prototype, "configAria", void 0);
+__decorate([
+    r()
+], Checkbox.prototype, "hasFocus", void 0);
+__decorate([
+    r()
+], Checkbox.prototype, "isActive", void 0);
+__decorate([
+    r()
+], Checkbox.prototype, "slotHasContent", void 0);
+__decorate([
+    e('.container')
+], Checkbox.prototype, "containerElement", void 0);
+__decorate([
+    e('.input-native')
+], Checkbox.prototype, "nativeElement", void 0);
+
+class Menu extends i$1 {
+    constructor() {
+        super();
+        this.open = false;
+        // Position: 'bottom-start' | 'bottom-end' | etc. (Simplified here to generic dropdown)
+        this.align = 'start';
+        this._boundClickOutside = this._handleClickOutside.bind(this);
+    }
+    connectedCallback() {
+        // eslint-disable-next-line wc/guard-super-call
+        super.connectedCallback();
+        window.addEventListener('click', this._boundClickOutside);
+        // Listen for menu-item clicks bubbling up
+        this.addEventListener('click', this._handleItemClick);
+    }
+    disconnectedCallback() {
+        // eslint-disable-next-line wc/guard-super-call
+        super.disconnectedCallback();
+        window.removeEventListener('click', this._boundClickOutside);
+        this.removeEventListener('click', this._handleItemClick);
+    }
+    _handleClickOutside(e) {
+        if (!this.open)
+            return;
+        const path = e.composedPath();
+        if (!path.includes(this)) {
+            this.open = false;
+        }
+    }
+    _handleItemClick(e) {
+        const target = e.target;
+        // Check if the clicked element is a menu-item
+        if (target.tagName.toLowerCase() === 'menu-item') {
+            // Dispatch custom event with value
+            const value = target.value;
+            this.dispatchEvent(new CustomEvent('menu-selected', {
+                detail: { value },
+                bubbles: true,
+                composed: true,
+            }));
+            this.open = false;
+        }
+    }
+    _toggleMenu(e) {
+        e.stopPropagation(); // Prevent immediate closing via window listener
+        this.open = !this.open;
+    }
+    render() {
+        return b `
+      <div class="trigger" @click="${this._toggleMenu}">
+        <slot name="trigger"></slot>
+      </div>
+
+      <div class="menu-wrapper">
+        <!-- We expect a menu-list to be passed here -->
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+Menu.styles = i `
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+
+    .trigger {
+      cursor: pointer;
+      display: inline-block;
+    }
+
+    .menu-wrapper {
+      position: absolute;
+      top: 100%;
+      z-index: 10;
+      opacity: 0;
+      transform: scale(0.95);
+      transform-origin: top left;
+      transition:
+        opacity 0.1s ease-out,
+        transform 0.1s ease-out;
+      pointer-events: none; /* Prevent clicking when hidden */
+      margin-top: 4px; /* Slight gap */
+    }
+
+    :host([open]) .menu-wrapper {
+      opacity: 1;
+      transform: scale(1);
+      pointer-events: auto;
+    }
+
+    /* Alignment logic */
+    :host([align='end']) .menu-wrapper {
+      right: 0;
+      transform-origin: top right;
+    }
+    :host([align='start']) .menu-wrapper {
+      left: 0;
+      transform-origin: top left;
+    }
+  `;
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Menu.prototype, "open", void 0);
+__decorate([
+    n({ type: String })
+], Menu.prototype, "align", void 0);
+__decorate([
+    e('.menu-wrapper')
+], Menu.prototype, "menuWrapper", void 0);
+
+var css_248z$2 = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  padding-inline: var(--spacing-050);
+}
+
+.menu-item {
+  position: relative;
+  height: 3rem;
+  display: flex;
+  align-items: center;
+  padding-inline: 0.75rem;
+  outline: 0;
+  font-family: var(--typography-label-large-font-family) !important;
+  font-size: var(--typography-label-large-font-size) !important;
+  font-weight: var(--typography-label-large-font-weight) !important;
+  line-height: var(--typography-label-large-line-height) !important;
+  letter-spacing: var(--typography-label-large-letter-spacing) !important;
+}
+.menu-item .menu-item-content {
+  display: flex;
+  align-items: center;
+  z-index: 1;
+  width: 100%;
+  gap: var(--spacing-100);
+  color: var(--_label-text-color);
+  opacity: var(--_label-text-opacity, 1);
+  --icon-size: var(--button-icon-size, var(--_button-icon-size));
+  --icon-color: var(--_label-text-color);
+}
+.menu-item .menu-item-content .slot-container {
+  flex: 1;
+}
+.menu-item .background {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--_container-color);
+  opacity: var(--_container-opacity, 1);
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+  corner-shape: var(--_container-corner-shape-variant);
+  pointer-events: none;
+}
+.menu-item {
+  /*
+   Background layers
+  */
+}
+.menu-item .focus-ring {
+  z-index: 2;
+  --focus-ring-container-shape-start-start: var(--_container-shape-start-start);
+  --focus-ring-container-shape-start-end: var(--_container-shape-start-end);
+  --focus-ring-container-shape-end-start: var(--_container-shape-end-start);
+  --focus-ring-container-shape-end-end: var(--_container-shape-end-end);
+  --focus-ring-container-shape-variant: var(--_container-corner-shape-variant);
+}
+.menu-item .ripple {
+  --ripple-state-opacity: var(--_container-state-opacity, 0);
+  --ripple-pressed-color: var(--_container-state-color);
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+  corner-shape: var(--_container-corner-shape-variant);
+}
+
+.menu-item {
+  --_container-shape-start-start: var(--menu-item-container-shape-start-start, var(--shape-corner-extra-small));
+  --_container-shape-start-end: var(--menu-item-container-shape-start-end, var(--shape-corner-extra-small));
+  --_container-shape-end-start: var(--menu-item-container-shape-end-start, var(--shape-corner-extra-small));
+  --_container-shape-end-end: var(--menu-item-container-shape-end-end, var(--shape-corner-extra-small));
+  --_container-corner-shape-variant: none;
+  --_label-text-color: var(--menu-item-label-color);
+  --_container-state-color: var(--_label-text-color);
+}
+.menu-item:hover:not(:where(.disabled, .selected)) {
+  --_container-state-opacity: 0.08;
+}
+.menu-item.selected {
+  --_container-color: var(--menu-item-container-selected-color);
+  --_label-text-color: var(--menu-item-label-selected-color);
+  --_container-shape-start-start: var(--menu-item-container-shape-start-start, var(--shape-corner-large));
+  --_container-shape-start-end: var(--menu-item-container-shape-start-end, var(--shape-corner-large));
+  --_container-shape-end-start: var(--menu-item-container-shape-end-start, var(--shape-corner-large));
+  --_container-shape-end-end: var(--menu-item-container-shape-end-end, var(--shape-corner-large));
+  --_container-corner-shape-variant: none;
+}
+.menu-item.disabled {
+  cursor: not-allowed;
+  --_container-color: var(--color-on-surface);
+  --_container-opacity: 0.1;
+  --_label-text-color: var(--color-on-surface);
+  --_label-text-opacity: 0.38;
+}
+.menu-item.disabled .ripple {
+  display: none;
+}`;
+
+var css_248z$1 = i`:host-context(menu-list[variant=standard]) {
+  --menu-item-label-color: var(--color-on-surface-variant);
+  --menu-item-label-selected-color: var(--color-on-tertiary-container);
+  --menu-item-container-selected-color: var(--color-tertiary-container);
+}
+
+:host-context(menu-list[variant=vibrant]) {
+  --menu-item-label-color: var(--color-on-tertiary-container);
+  --menu-item-label-selected-color: var(--color-on-tertiary);
+  --menu-item-container-selected-color: var(--color-tertiary);
+}`;
+
+class MenuItem extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.value = '';
+        this.selected = false;
+        /**
+        * Sets or retrieves the window or frame at which to target content.
+        */
+        this.target = '_self';
+        this.variant = 'standard';
+    }
+    connectedCallback() {
+        // eslint-disable-next-line wc/guard-super-call
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'menuitem');
+        }
+    }
+    // Handle keyboard activation (Enter/Space)
+    _handleKeyDown(e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this.click();
+        }
+    }
+    __isLink() {
+        return !!this.href;
+    }
+    focus() {
+        this.menuItemElement?.focus();
+    }
+    blur() {
+        this.menuItemElement?.blur();
+    }
+    render() {
+        const isLink = this.__isLink();
+        const cssClasses = {
+            'menu-item': true,
+            disabled: this.disabled,
+            selected: this.selected,
+        };
+        if (isLink) {
+            return b `<a
+        class=${e$1(cssClasses)}
+        href=${this.href}
+        target=${this.target}
+      >
+        ${this.renderContent()}
+      </a>
+    `;
+        }
+        return b `<div
+        class=${e$1(cssClasses)}
+        tabindex=${!this.disabled ? 0 : -1}
+        @keydown="${this._handleKeyDown}"
+      >
+        ${this.renderContent()}
+      </div>
+    `;
+    }
+    renderContent() {
+        return b `
+      <focus-ring class="focus-ring" .control=${this}  element="menuItemElement"></focus-ring>
+      <div class="background"></div>
+      <base-ripple class="ripple"></base-ripple>
+
+      <div class="menu-item-content">
+        <slot name="leading-icon"></slot>
+        <div class="slot-container">
+          <slot></slot>
+        </div>
+        <slot
+          name="trailing-supporting-text"
+        ></slot>
+      </div>
+    `;
+    }
+}
+MenuItem.styles = [css_248z$2, css_248z$1];
+__decorate([
+    n({ type: Boolean, reflect: true })
+], MenuItem.prototype, "disabled", void 0);
+__decorate([
+    n({ type: String })
+], MenuItem.prototype, "value", void 0);
+__decorate([
+    n({ type: Boolean })
+], MenuItem.prototype, "selected", void 0);
+__decorate([
+    n({ reflect: true })
+], MenuItem.prototype, "href", void 0);
+__decorate([
+    n()
+], MenuItem.prototype, "target", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], MenuItem.prototype, "variant", void 0);
+__decorate([
+    e('.menu-item')
+], MenuItem.prototype, "menuItemElement", void 0);
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+.menu-list {
+  display: flex;
+  position: relative;
+  min-width: 112px;
+  padding-block: var(--spacing-050);
+}
+.menu-list .menu-list-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-050);
+  z-index: 1;
+}
+.menu-list .menu-list-content ::slotted(:first-child) {
+  --menu-item-container-shape-start-start: var(--shape-corner-medium);
+  --menu-item-container-shape-start-end: var(--shape-corner-medium);
+}
+.menu-list .menu-list-content ::slotted(:last-child) {
+  --menu-item-container-shape-end-start: var(--shape-corner-medium);
+  --menu-item-container-shape-end-end: var(--shape-corner-medium);
+}
+.menu-list .menu-list-content ::slotted(base-divider) {
+  --divider-spacing: var(--spacing-100);
+  padding-inline: var(--spacing-050);
+}
+.menu-list .background {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--_container-color);
+  opacity: var(--_container-opacity, 1);
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+  pointer-events: none;
+}
+.menu-list .elevation {
+  --elevation-level: 2;
+  transition-duration: 280ms;
+  --elevation-container-shape-start-start: var(--_container-shape-start-start);
+  --elevation-container-shape-start-end: var(--_container-shape-start-end);
+  --elevation-container-shape-end-start: var(--_container-shape-end-start);
+  --elevation-container-shape-end-end: var(--_container-shape-end-end);
+  --elevation-container-shape-variant: var(--_container-corner-shape-variant);
+}
+
+.menu-list {
+  --_container-shape-start-start: var(--shape-corner-large);
+  --_container-shape-start-end: var(--shape-corner-large);
+  --_container-shape-end-start: var(--shape-corner-large);
+  --_container-shape-end-end: var(--shape-corner-large);
+}
+.menu-list.variant-standard {
+  --_container-color: var(--color-surface-container);
+}
+.menu-list.variant-vibrant {
+  --_container-color: var(--color-tertiary-container);
+}`;
+
+class MenuList extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.variant = 'standard';
+    }
+    connectedCallback() {
+        // eslint-disable-next-line wc/guard-super-call
+        super.connectedCallback();
+        this.setAttribute('role', 'menu');
+    }
+    render() {
+        return b `<div
+      class=${e$1({
+            'menu-list': true,
+            [`variant-${this.variant}`]: true,
+        })}
+    >
+      <div class="background"></div>
+      <base-elevation class="elevation"></base-elevation>
+
+      <div class="menu-list-content">
+        <slot></slot>
+      </div>
+    </div>`;
+    }
+}
+MenuList.styles = [css_248z];
+__decorate([
+    n({ type: String, reflect: true })
+], MenuList.prototype, "variant", void 0);
 
 class LoaderUtils {
     constructor(loaderConfig) {
@@ -116,506 +1039,54 @@ class LoaderUtils {
     }
 }
 
-var css_248z$2 = i`* {
-  box-sizing: border-box;
-}
-
-.screen-reader-only {
-  display: none !important;
-}
-
-.link {
-  border-radius: inherit;
-  corner-shape: inherit;
-  color: var(--color-primary);
-  --icon-color: currentColor;
-  text-decoration: none;
-}
-.link:hover, .link:focus-visible {
-  text-decoration: underline;
-}
-.link.inherit {
-  color: inherit;
-  text-decoration: none !important;
-}
-.link.with-icon {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5em;
-}`;
-
-var css_248z$1 = i`* {
-  box-sizing: border-box;
-}
-
-.screen-reader-only {
-  display: none !important;
-}
-
-.text-display {
-  font-family: var(--typography-display-medium-font-family) !important;
-  font-size: var(--typography-display-medium-font-size) !important;
-  font-weight: var(--typography-display-medium-font-weight) !important;
-  line-height: var(--typography-display-medium-line-height) !important;
-  letter-spacing: var(--typography-display-medium-letter-spacing) !important;
-  margin-block-end: var(--spacing-400);
-}
-
-.text-display-emphasized {
-  font-family: var(--typography-display-medium-emphasized-font-family) !important;
-  font-size: var(--typography-display-medium-emphasized-font-size) !important;
-  font-weight: var(--typography-display-medium-emphasized-font-weight) !important;
-  line-height: var(--typography-display-medium-emphasized-line-height) !important;
-  letter-spacing: var(--typography-display-medium-emphasized-letter-spacing) !important;
-  margin-block-end: var(--spacing-400);
-}
-
-.text-display-large {
-  font-family: var(--typography-display-large-font-family) !important;
-  font-size: var(--typography-display-large-font-size) !important;
-  font-weight: var(--typography-display-large-font-weight) !important;
-  line-height: var(--typography-display-large-line-height) !important;
-  letter-spacing: var(--typography-display-large-letter-spacing) !important;
-  margin-block-end: var(--spacing-400);
-}
-
-.text-display-large-emphasized {
-  font-family: var(--typography-display-large-emphasized-font-family) !important;
-  font-size: var(--typography-display-large-emphasized-font-size) !important;
-  font-weight: var(--typography-display-large-emphasized-font-weight) !important;
-  line-height: var(--typography-display-large-emphasized-line-height) !important;
-  letter-spacing: var(--typography-display-large-emphasized-letter-spacing) !important;
-  margin-block-end: var(--spacing-400);
-}
-
-.text-display-medium {
-  font-family: var(--typography-display-medium-font-family) !important;
-  font-size: var(--typography-display-medium-font-size) !important;
-  font-weight: var(--typography-display-medium-font-weight) !important;
-  line-height: var(--typography-display-medium-line-height) !important;
-  letter-spacing: var(--typography-display-medium-letter-spacing) !important;
-  margin-block-end: var(--spacing-400);
-}
-
-.text-display-medium-emphasized {
-  font-family: var(--typography-display-medium-emphasized-font-family) !important;
-  font-size: var(--typography-display-medium-emphasized-font-size) !important;
-  font-weight: var(--typography-display-medium-emphasized-font-weight) !important;
-  line-height: var(--typography-display-medium-emphasized-line-height) !important;
-  letter-spacing: var(--typography-display-medium-emphasized-letter-spacing) !important;
-  margin-block-end: var(--spacing-400);
-}
-
-.text-display-small {
-  font-family: var(--typography-display-small-font-family) !important;
-  font-size: var(--typography-display-small-font-size) !important;
-  font-weight: var(--typography-display-small-font-weight) !important;
-  line-height: var(--typography-display-small-line-height) !important;
-  letter-spacing: var(--typography-display-small-letter-spacing) !important;
-  margin-block-end: var(--spacing-400);
-}
-
-.text-display-small-emphasized {
-  font-family: var(--typography-display-small-emphasized-font-family) !important;
-  font-size: var(--typography-display-small-emphasized-font-size) !important;
-  font-weight: var(--typography-display-small-emphasized-font-weight) !important;
-  line-height: var(--typography-display-small-emphasized-line-height) !important;
-  letter-spacing: var(--typography-display-small-emphasized-letter-spacing) !important;
-  margin-block-end: var(--spacing-400);
-}
-
-.text-headline {
-  font-family: var(--typography-headline-medium-font-family) !important;
-  font-size: var(--typography-headline-medium-font-size) !important;
-  font-weight: var(--typography-headline-medium-font-weight) !important;
-  line-height: var(--typography-headline-medium-line-height) !important;
-  letter-spacing: var(--typography-headline-medium-letter-spacing) !important;
-  margin-block-end: var(--spacing-200);
-}
-
-.text-headline-emphasized {
-  font-family: var(--typography-headline-medium-emphasized-font-family) !important;
-  font-size: var(--typography-headline-medium-emphasized-font-size) !important;
-  font-weight: var(--typography-headline-medium-emphasized-font-weight) !important;
-  line-height: var(--typography-headline-medium-emphasized-line-height) !important;
-  letter-spacing: var(--typography-headline-medium-emphasized-letter-spacing) !important;
-  margin-block-end: var(--spacing-200);
-}
-
-.text-headline-large {
-  font-family: var(--typography-headline-large-font-family) !important;
-  font-size: var(--typography-headline-large-font-size) !important;
-  font-weight: var(--typography-headline-large-font-weight) !important;
-  line-height: var(--typography-headline-large-line-height) !important;
-  letter-spacing: var(--typography-headline-large-letter-spacing) !important;
-  margin-block-end: var(--spacing-200);
-}
-
-.text-headline-large-emphasized {
-  font-family: var(--typography-headline-large-emphasized-font-family) !important;
-  font-size: var(--typography-headline-large-emphasized-font-size) !important;
-  font-weight: var(--typography-headline-large-emphasized-font-weight) !important;
-  line-height: var(--typography-headline-large-emphasized-line-height) !important;
-  letter-spacing: var(--typography-headline-large-emphasized-letter-spacing) !important;
-  margin-block-end: var(--spacing-200);
-}
-
-.text-headline-medium {
-  font-family: var(--typography-headline-medium-font-family) !important;
-  font-size: var(--typography-headline-medium-font-size) !important;
-  font-weight: var(--typography-headline-medium-font-weight) !important;
-  line-height: var(--typography-headline-medium-line-height) !important;
-  letter-spacing: var(--typography-headline-medium-letter-spacing) !important;
-  margin-block-end: var(--spacing-200);
-}
-
-.text-headline-medium-emphasized {
-  font-family: var(--typography-headline-medium-emphasized-font-family) !important;
-  font-size: var(--typography-headline-medium-emphasized-font-size) !important;
-  font-weight: var(--typography-headline-medium-emphasized-font-weight) !important;
-  line-height: var(--typography-headline-medium-emphasized-line-height) !important;
-  letter-spacing: var(--typography-headline-medium-emphasized-letter-spacing) !important;
-  margin-block-end: var(--spacing-200);
-}
-
-.text-headline-small {
-  font-family: var(--typography-headline-small-font-family) !important;
-  font-size: var(--typography-headline-small-font-size) !important;
-  font-weight: var(--typography-headline-small-font-weight) !important;
-  line-height: var(--typography-headline-small-line-height) !important;
-  letter-spacing: var(--typography-headline-small-letter-spacing) !important;
-  margin-block-end: var(--spacing-200);
-}
-
-.text-headline-small-emphasized {
-  font-family: var(--typography-headline-small-emphasized-font-family) !important;
-  font-size: var(--typography-headline-small-emphasized-font-size) !important;
-  font-weight: var(--typography-headline-small-emphasized-font-weight) !important;
-  line-height: var(--typography-headline-small-emphasized-line-height) !important;
-  letter-spacing: var(--typography-headline-small-emphasized-letter-spacing) !important;
-  margin-block-end: var(--spacing-200);
-}
-
-.text-body {
-  font-family: var(--typography-body-medium-font-family) !important;
-  font-size: var(--typography-body-medium-font-size) !important;
-  font-weight: var(--typography-body-medium-font-weight) !important;
-  line-height: var(--typography-body-medium-line-height) !important;
-  letter-spacing: var(--typography-body-medium-letter-spacing) !important;
-  margin-block-end: var(--spacing-200);
-}
-
-.text-body-emphasized {
-  font-family: var(--typography-body-medium-emphasized-font-family) !important;
-  font-size: var(--typography-body-medium-emphasized-font-size) !important;
-  font-weight: var(--typography-body-medium-emphasized-font-weight) !important;
-  line-height: var(--typography-body-medium-emphasized-line-height) !important;
-  letter-spacing: var(--typography-body-medium-emphasized-letter-spacing) !important;
-  margin-block-end: var(--spacing-200);
-}
-
-.text-body-large {
-  font-family: var(--typography-body-large-font-family) !important;
-  font-size: var(--typography-body-large-font-size) !important;
-  font-weight: var(--typography-body-large-font-weight) !important;
-  line-height: var(--typography-body-large-line-height) !important;
-  letter-spacing: var(--typography-body-large-letter-spacing) !important;
-  margin-block-end: var(--spacing-200);
-}
-
-.text-body-large-emphasized {
-  font-family: var(--typography-body-large-emphasized-font-family) !important;
-  font-size: var(--typography-body-large-emphasized-font-size) !important;
-  font-weight: var(--typography-body-large-emphasized-font-weight) !important;
-  line-height: var(--typography-body-large-emphasized-line-height) !important;
-  letter-spacing: var(--typography-body-large-emphasized-letter-spacing) !important;
-  margin-block-end: var(--spacing-200);
-}
-
-.text-body-medium {
-  font-family: var(--typography-body-medium-font-family) !important;
-  font-size: var(--typography-body-medium-font-size) !important;
-  font-weight: var(--typography-body-medium-font-weight) !important;
-  line-height: var(--typography-body-medium-line-height) !important;
-  letter-spacing: var(--typography-body-medium-letter-spacing) !important;
-  margin-block-end: var(--spacing-200);
-}
-
-.text-body-medium-emphasized {
-  font-family: var(--typography-body-medium-emphasized-font-family) !important;
-  font-size: var(--typography-body-medium-emphasized-font-size) !important;
-  font-weight: var(--typography-body-medium-emphasized-font-weight) !important;
-  line-height: var(--typography-body-medium-emphasized-line-height) !important;
-  letter-spacing: var(--typography-body-medium-emphasized-letter-spacing) !important;
-  margin-block-end: var(--spacing-200);
-}
-
-.text-body-small {
-  font-family: var(--typography-body-small-font-family) !important;
-  font-size: var(--typography-body-small-font-size) !important;
-  font-weight: var(--typography-body-small-font-weight) !important;
-  line-height: var(--typography-body-small-line-height) !important;
-  letter-spacing: var(--typography-body-small-letter-spacing) !important;
-  margin-block-end: var(--spacing-200);
-}
-
-.text-body-small-emphasized {
-  font-family: var(--typography-body-small-emphasized-font-family) !important;
-  font-size: var(--typography-body-small-emphasized-font-size) !important;
-  font-weight: var(--typography-body-small-emphasized-font-weight) !important;
-  line-height: var(--typography-body-small-emphasized-line-height) !important;
-  letter-spacing: var(--typography-body-small-emphasized-letter-spacing) !important;
-  margin-block-end: var(--spacing-200);
-}
-
-.text-code {
-  font-family: var(--typography-code-medium-font-family) !important;
-  font-size: var(--typography-code-medium-font-size) !important;
-  font-weight: var(--typography-code-medium-font-weight) !important;
-  line-height: var(--typography-code-medium-line-height) !important;
-  letter-spacing: var(--typography-code-medium-letter-spacing) !important;
-}
-
-.text-code-emphasized {
-  font-family: var(--typography-code-medium-emphasized-font-family) !important;
-  font-size: var(--typography-code-medium-emphasized-font-size) !important;
-  font-weight: var(--typography-code-medium-emphasized-font-weight) !important;
-  line-height: var(--typography-code-medium-emphasized-line-height) !important;
-  letter-spacing: var(--typography-code-medium-emphasized-letter-spacing) !important;
-}
-
-.text-code-large {
-  font-family: var(--typography-code-large-font-family) !important;
-  font-size: var(--typography-code-large-font-size) !important;
-  font-weight: var(--typography-code-large-font-weight) !important;
-  line-height: var(--typography-code-large-line-height) !important;
-  letter-spacing: var(--typography-code-large-letter-spacing) !important;
-}
-
-.text-code-large-emphasized {
-  font-family: var(--typography-code-large-emphasized-font-family) !important;
-  font-size: var(--typography-code-large-emphasized-font-size) !important;
-  font-weight: var(--typography-code-large-emphasized-font-weight) !important;
-  line-height: var(--typography-code-large-emphasized-line-height) !important;
-  letter-spacing: var(--typography-code-large-emphasized-letter-spacing) !important;
-}
-
-.text-code-medium {
-  font-family: var(--typography-code-medium-font-family) !important;
-  font-size: var(--typography-code-medium-font-size) !important;
-  font-weight: var(--typography-code-medium-font-weight) !important;
-  line-height: var(--typography-code-medium-line-height) !important;
-  letter-spacing: var(--typography-code-medium-letter-spacing) !important;
-}
-
-.text-code-medium-emphasized {
-  font-family: var(--typography-code-medium-emphasized-font-family) !important;
-  font-size: var(--typography-code-medium-emphasized-font-size) !important;
-  font-weight: var(--typography-code-medium-emphasized-font-weight) !important;
-  line-height: var(--typography-code-medium-emphasized-line-height) !important;
-  letter-spacing: var(--typography-code-medium-emphasized-letter-spacing) !important;
-}
-
-.text-code-small {
-  font-family: var(--typography-code-small-font-family) !important;
-  font-size: var(--typography-code-small-font-size) !important;
-  font-weight: var(--typography-code-small-font-weight) !important;
-  line-height: var(--typography-code-small-line-height) !important;
-  letter-spacing: var(--typography-code-small-letter-spacing) !important;
-}
-
-.text-code-small-emphasized {
-  font-family: var(--typography-code-small-emphasized-font-family) !important;
-  font-size: var(--typography-code-small-emphasized-font-size) !important;
-  font-weight: var(--typography-code-small-emphasized-font-weight) !important;
-  line-height: var(--typography-code-small-emphasized-line-height) !important;
-  letter-spacing: var(--typography-code-small-emphasized-letter-spacing) !important;
-}
-
-.text-label {
-  font-family: var(--typography-label-medium-font-family) !important;
-  font-size: var(--typography-label-medium-font-size) !important;
-  font-weight: var(--typography-label-medium-font-weight) !important;
-  line-height: var(--typography-label-medium-line-height) !important;
-  letter-spacing: var(--typography-label-medium-letter-spacing) !important;
-}
-
-.text-label-emphasized {
-  font-family: var(--typography-label-medium-emphasized-font-family) !important;
-  font-size: var(--typography-label-medium-emphasized-font-size) !important;
-  font-weight: var(--typography-label-medium-emphasized-font-weight) !important;
-  line-height: var(--typography-label-medium-emphasized-line-height) !important;
-  letter-spacing: var(--typography-label-medium-emphasized-letter-spacing) !important;
-}
-
-.text-label-large {
-  font-family: var(--typography-label-large-font-family) !important;
-  font-size: var(--typography-label-large-font-size) !important;
-  font-weight: var(--typography-label-large-font-weight) !important;
-  line-height: var(--typography-label-large-line-height) !important;
-  letter-spacing: var(--typography-label-large-letter-spacing) !important;
-}
-
-.text-label-large-emphasized {
-  font-family: var(--typography-label-large-emphasized-font-family) !important;
-  font-size: var(--typography-label-large-emphasized-font-size) !important;
-  font-weight: var(--typography-label-large-emphasized-font-weight) !important;
-  line-height: var(--typography-label-large-emphasized-line-height) !important;
-  letter-spacing: var(--typography-label-large-emphasized-letter-spacing) !important;
-}
-
-.text-label-medium {
-  font-family: var(--typography-label-medium-font-family) !important;
-  font-size: var(--typography-label-medium-font-size) !important;
-  font-weight: var(--typography-label-medium-font-weight) !important;
-  line-height: var(--typography-label-medium-line-height) !important;
-  letter-spacing: var(--typography-label-medium-letter-spacing) !important;
-}
-
-.text-label-medium-emphasized {
-  font-family: var(--typography-label-medium-emphasized-font-family) !important;
-  font-size: var(--typography-label-medium-emphasized-font-size) !important;
-  font-weight: var(--typography-label-medium-emphasized-font-weight) !important;
-  line-height: var(--typography-label-medium-emphasized-line-height) !important;
-  letter-spacing: var(--typography-label-medium-emphasized-letter-spacing) !important;
-}
-
-.text-label-small {
-  font-family: var(--typography-label-small-font-family) !important;
-  font-size: var(--typography-label-small-font-size) !important;
-  font-weight: var(--typography-label-small-font-weight) !important;
-  line-height: var(--typography-label-small-line-height) !important;
-  letter-spacing: var(--typography-label-small-letter-spacing) !important;
-}
-
-.text-label-small-emphasized {
-  font-family: var(--typography-label-small-emphasized-font-family) !important;
-  font-size: var(--typography-label-small-emphasized-font-size) !important;
-  font-weight: var(--typography-label-small-emphasized-font-weight) !important;
-  line-height: var(--typography-label-small-emphasized-line-height) !important;
-  letter-spacing: var(--typography-label-small-emphasized-letter-spacing) !important;
-}
-
-.text-title {
-  font-family: var(--typography-title-medium-font-family) !important;
-  font-size: var(--typography-title-medium-font-size) !important;
-  font-weight: var(--typography-title-medium-font-weight) !important;
-  line-height: var(--typography-title-medium-line-height) !important;
-  letter-spacing: var(--typography-title-medium-letter-spacing) !important;
-  margin-block-end: var(--spacing-400);
-}
-
-.text-title-emphasized {
-  font-family: var(--typography-title-medium-emphasized-font-family) !important;
-  font-size: var(--typography-title-medium-emphasized-font-size) !important;
-  font-weight: var(--typography-title-medium-emphasized-font-weight) !important;
-  line-height: var(--typography-title-medium-emphasized-line-height) !important;
-  letter-spacing: var(--typography-title-medium-emphasized-letter-spacing) !important;
-  margin-block-end: var(--spacing-400);
-}
-
-.text-title-large {
-  font-family: var(--typography-title-large-font-family) !important;
-  font-size: var(--typography-title-large-font-size) !important;
-  font-weight: var(--typography-title-large-font-weight) !important;
-  line-height: var(--typography-title-large-line-height) !important;
-  letter-spacing: var(--typography-title-large-letter-spacing) !important;
-  margin-block-end: var(--spacing-400);
-}
-
-.text-title-large-emphasized {
-  font-family: var(--typography-title-large-emphasized-font-family) !important;
-  font-size: var(--typography-title-large-emphasized-font-size) !important;
-  font-weight: var(--typography-title-large-emphasized-font-weight) !important;
-  line-height: var(--typography-title-large-emphasized-line-height) !important;
-  letter-spacing: var(--typography-title-large-emphasized-letter-spacing) !important;
-  margin-block-end: var(--spacing-400);
-}
-
-.text-title-medium {
-  font-family: var(--typography-title-medium-font-family) !important;
-  font-size: var(--typography-title-medium-font-size) !important;
-  font-weight: var(--typography-title-medium-font-weight) !important;
-  line-height: var(--typography-title-medium-line-height) !important;
-  letter-spacing: var(--typography-title-medium-letter-spacing) !important;
-  margin-block-end: var(--spacing-400);
-}
-
-.text-title-medium-emphasized {
-  font-family: var(--typography-title-medium-emphasized-font-family) !important;
-  font-size: var(--typography-title-medium-emphasized-font-size) !important;
-  font-weight: var(--typography-title-medium-emphasized-font-weight) !important;
-  line-height: var(--typography-title-medium-emphasized-line-height) !important;
-  letter-spacing: var(--typography-title-medium-emphasized-letter-spacing) !important;
-  margin-block-end: var(--spacing-400);
-}
-
-.text-title-small {
-  font-family: var(--typography-title-small-font-family) !important;
-  font-size: var(--typography-title-small-font-size) !important;
-  font-weight: var(--typography-title-small-font-weight) !important;
-  line-height: var(--typography-title-small-line-height) !important;
-  letter-spacing: var(--typography-title-small-letter-spacing) !important;
-  margin-block-end: var(--spacing-400);
-}
-
-.text-title-small-emphasized {
-  font-family: var(--typography-title-small-emphasized-font-family) !important;
-  font-size: var(--typography-title-small-emphasized-font-size) !important;
-  font-weight: var(--typography-title-small-emphasized-font-weight) !important;
-  line-height: var(--typography-title-small-emphasized-line-height) !important;
-  letter-spacing: var(--typography-title-small-emphasized-letter-spacing) !important;
-  margin-block-end: var(--spacing-400);
-}
-
-.text-code-block {
-  font-family: var(--font-family-monospace);
-  background: var(--color-primary-container);
-  border-radius: var(--shape-corner-extra-small);
-  padding-inline: var(--spacing-050);
-}`;
-
-var css_248z = i`* {
-  box-sizing: border-box;
+const sheetCache = new Map();
+async function loadCSS(url, options = {}) {
+    const { priority = "high", cache = "force-cache", media = "all", } = options;
+    // Return cached sheet immediately
+    if (sheetCache.has(url)) {
+        const cached = sheetCache.get(url);
+        if (!document.adoptedStyleSheets.includes(cached)) {
+            document.adoptedStyleSheets = [...document.adoptedStyleSheets, cached];
+        }
+        return cached;
+    }
+    const response = await fetch(url, {
+        cache,
+        priority,
+    });
+    if (!response.ok) {
+        throw new Error(`Failed to load CSS [${response.status}]: ${url}`);
+    }
+    const css = await response.text();
+    const sheet = new CSSStyleSheet({ media });
+    sheet.replaceSync(css);
+    sheetCache.set(url, sheet);
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+    return sheet;
 }
 
-.screen-reader-only {
-  display: none !important;
-}
+// Eager loaded
+const distDirectory = `${import.meta.url}/..`;
+await loadCSS(`${distDirectory}/assets/styles.css`);
+/*
+import tooltipStyles from './popover/tooltip.css-component.scss';
 
-.tooltip {
-  display: inline-block;
-  font-family: var(--typography-body-small-font-family) !important;
-  font-size: var(--typography-body-small-font-size) !important;
-  font-weight: var(--typography-body-small-font-weight) !important;
-  line-height: var(--typography-body-small-line-height) !important;
-  letter-spacing: var(--typography-body-small-letter-spacing) !important;
-  max-width: 17.5rem;
-  padding-inline: var(--spacing-100);
-  padding-block: var(--spacing-050);
-  color: var(--color-inverse-on-surface);
-  background-color: var(--color-inverse-surface);
-  border-radius: var(--shape-corner-extra-small);
+function buildSheet(styleSheet: any) {
+  const sheet = new CSSStyleSheet();
+  // Add rules
+  sheet.replaceSync(styleSheet.toString());
+  return sheet;
 }
 
-.tooltip-link {
-  border-bottom: 1px dashed var(--color-on-surface);
-}`;
-
-// Eager loaded
-function buildSheet(styleSheet) {
-    const sheet = new CSSStyleSheet();
-    // Add rules
-    sheet.replaceSync(styleSheet.toString());
-    return sheet;
-}
 const styleSheets = [
-    buildSheet(css_248z$3),
-    buildSheet(css_248z$2),
-    buildSheet(css_248z$1),
-    buildSheet(css_248z),
+// buildSheet(cssComponentsStyleSheet),
+// buildSheet(linkStyles),
+// buildSheet(textStylesheet),
+  buildSheet(tooltipStyles),
 ];
+
 document.adoptedStyleSheets = styleSheets;
+*/
 const loaderConfig = {
     components: {
         'base-icon': {
@@ -647,7 +1118,7 @@ const loaderConfig = {
             CustomElementClass: Elevation,
         },
         'base-clock': {
-            importPath: './clock.js',
+            importPath: `${distDirectory}/clock.js`,
         },
         'base-ripple': {
             CustomElementClass: Ripple,
@@ -698,10 +1169,10 @@ const loaderConfig = {
             CustomElementClass: Tooltip,
         },
         'number-counter': {
-            importPath: './number-counter.js',
+            importPath: `${distDirectory}/number-counter.js`,
         },
         'code-highlighter': {
-            importPath: './code-highlighter.js',
+            importPath: `${distDirectory}/code-highlighter.js`,
         },
         'base-breadcrumb': {
             CustomElementClass: Breadcrumb,