@vielzeug/refine 2.4.0 → 3.1.0

package/dist/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../src/inputs/button/button.ts"],"sourcesContent":["import { bind, define, getHost, html, inject, prop, useField } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { commonProps } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledLoadingMixin,\n  forcedColorsMixin,\n  frostVariantMixin,\n  rainbowEffectMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n  shineEffectMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { ButtonType, ComponentSize, LinkTarget, RoundedSize, ThemeColor } from '../../types';\nimport { useLinkProps } from '../../utils';\nimport { BUTTON_GROUP_CTX } from '../button-group/button-group';\nimport { useFormAction } from '../shared';\nimport componentStyles from './button.css?inline';\n\nexport const BUTTON_VARIANTS = ['solid', 'flat', 'bordered', 'outline', 'ghost', 'text', 'frost'] as const;\n\n/** Visual variant for ore-button — derived from BUTTON_VARIANTS for a single source of truth. */\nexport type ButtonVariant = (typeof BUTTON_VARIANTS)[number];\n\n/** Animated border effect for ore-button. */\nexport type ButtonEffect = 'shine' | 'rainbow';\n\n/** Button component properties */\nexport type OreButtonProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Animated border effect: 'shine' (color-aware neon sweep) or 'rainbow' */\n  effect?: ButtonEffect;\n  /**\n   * Full height button (100% of container) — the inner `[part=\"button\"]` fills its host's\n   * height instead of the size preset's fixed height. Useful when the button itself is the\n   * whole tappable surface of a container it doesn't otherwise control the size of (e.g. a\n   * swipe-revealed row action in `ore-list-item`'s `actions-left`/`actions-right` slots).\n   */\n  fullheight?: boolean;\n  /** Full width button (100% of container) */\n  fullwidth?: boolean;\n  /** When set, renders an `<a>` instead of `<button>` */\n  href?: string;\n  /** Icon-only mode (square aspect ratio, no padding) */\n  iconOnly?: boolean;\n  /** Accessible label for the inner button — required for icon-only buttons */\n  label?: string;\n  /** Show loading state with spinner */\n  loading?: boolean;\n  /** Link rel attribute (requires href) */\n  rel?: string;\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** Component size */\n  size?: ComponentSize;\n  /** Link target (requires href) */\n  target?: LinkTarget;\n  /** HTML button type attribute */\n  type?: ButtonType;\n  /** Visual style variant */\n  variant?: ButtonVariant;\n};\n\n/**\n * A customizable button component with multiple variants, sizes, and states.\n * Supports icons, loading states, and animated border effects.\n *\n * @element ore-button\n *\n * @attr {string} type - HTML button type: 'button' | 'submit' | 'reset'\n * @attr {boolean} disabled - Disable button interaction\n * @attr {boolean} loading - Show loading state with spinner\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text' | 'frost'\n * @attr {string} size - Button size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} effect - Animated border effect: 'shine' | 'rainbow'\n * @attr {boolean} icon-only - Icon-only mode (square aspect ratio, no padding)\n * @attr {boolean} fullwidth - Full width button (100% of container)\n * @attr {boolean} fullheight - Full height button (100% of container)\n *\n * @fires click - Emitted when button is clicked (unless disabled/loading)\n *\n * @slot - Button content (text, icons, etc.)\n * @slot prefix - Content before the button text (e.g., icons)\n * @slot suffix - Content after the button text (e.g., icons, badges)\n *\n * @part button - The inner button or anchor element\n * @part loader - The loading spinner element\n * @part content - The button content wrapper\n *\n * @cssprop --button-bg - Background color override\n * @cssprop --button-color - Text color override\n * @cssprop --button-border - Border width override\n * @cssprop --button-border-color - Border color override\n * @cssprop --button-radius - Border radius override\n * @cssprop --button-padding - Inner padding override\n * @cssprop --button-gap - Gap between icon and text override\n * @cssprop --button-font-size - Font size override\n * @cssprop --button-frost-active-bg - Background when pressed (frost variant)\n * @cssprop --button-frost-active-border-color - Border color when pressed (frost variant)\n *\n * @example\n * ```html\n * <ore-button variant=\"solid\" color=\"primary\">Click me</ore-button>\n * <ore-button loading color=\"success\">Processing...</ore-button>\n * <ore-button effect=\"shine\" color=\"primary\">Shine</ore-button>\n * <ore-button effect=\"rainbow\" variant=\"frost\">Rainbow</ore-button>\n * ```\n */\nexport const BUTTON_TAG = 'ore-button' as const;\ndefine<OreButtonProps>(BUTTON_TAG, {\n  formAssociated: true,\n  props: {\n    ...commonProps,\n    effect: prop.string<ButtonEffect>(),\n    fullheight: prop.bool(false),\n    fullwidth: prop.bool(false),\n    href: prop.string(),\n    iconOnly: prop.bool(false),\n    label: prop.string(),\n    rel: prop.string(),\n    target: prop.string<LinkTarget>(),\n    type: prop.oneOf(['button', 'submit', 'reset'] as const, 'button'),\n    variant: prop.oneOf(BUTTON_VARIANTS, 'solid'),\n  },\n  setup(props) {\n    const el = getHost();\n\n    // Prefer group context over own props for color/size/variant.\n    const groupCtx = inject(BUTTON_GROUP_CTX);\n    const effectiveColor = computed(() => groupCtx?.color.value ?? props.color.value);\n    const effectiveSize = computed(() => groupCtx?.size.value ?? props.size.value);\n    const effectiveVariant = computed(() => groupCtx?.variant.value ?? props.variant.value);\n\n    const isDisabled = computed(() => !!(props.disabled.value || props.loading.value));\n\n    // isLink and effectiveRel are computed from signals — correct even if href changes at runtime.\n    const { effectiveRel, isLink } = useLinkProps(props.href, props.rel, props.target);\n\n    // Form association: relay submit/reset clicks to the associated form.\n    // The inner <button> always has type=\"button\" so shadow DOM never drives native form actions.\n    // getForm() returns null for link mode at runtime, so no form actions fire.\n    const formField = useField({\n      disabled: isDisabled,\n      toFormValue: () => null,\n      value: computed(() => ''),\n    });\n\n    const handleClick = (e: MouseEvent) => {\n      if (isDisabled.value) {\n        e.preventDefault();\n\n        return;\n      }\n\n      // Link mode renders a real <a href> below — the browser handles left/middle/ctrl-click\n      // navigation, target, and rel natively. No manual window.open/location.href needed.\n      useFormAction(() => (isLink.value ? null : formField.internals.form), props.type, isDisabled, el)(e);\n    };\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        (el.shadowRoot?.querySelector('[part=\"button\"]') as HTMLElement)?.click();\n      }\n    };\n\n    // ARIA attributes live on the host.\n    bind({\n      attr: {\n        'aria-busy': props.loading,\n        'aria-disabled': isDisabled,\n        'aria-label': props.label,\n        color: effectiveColor,\n        effect: props.effect,\n        role: computed(() => el.getAttribute('role') ?? (isLink.value ? 'link' : 'button')),\n        size: effectiveSize,\n        tabindex: computed(() => (isDisabled.value ? '-1' : '0')),\n        variant: effectiveVariant,\n      },\n      on: {\n        keydown: handleKeydown,\n      },\n    });\n\n    const buttonContent = html`\n      <span class=\"loader\" part=\"loader\" aria-label=\"Loading\" ?hidden=${() => !props.loading.value}></span>\n      <slot name=\"prefix\"></slot>\n      <span class=\"content\" part=\"content\"><slot></slot></span>\n      <slot name=\"suffix\"></slot>\n    `;\n\n    // The inner element (<a> or <span>) is deliberately non-focusable/decorative — this\n    // component's real interactive semantics (role, tabindex, aria-label) live on the\n    // custom-element host itself (see the `bind()` block above), since ore-button is\n    // formAssociated and needs the host, not an inner element, to carry ElementInternals.\n    // This differs from ore-navbar-item / ore-sidebar-item, which aren't form-associated\n    // and so render their <a> as the one real focusable/semantic element.\n    return html`\n      ${() =>\n        isLink.value\n          ? html`\n              <a\n                part=\"button\"\n                role=\"presentation\"\n                tabindex=\"-1\"\n                href=\"${props.href}\"\n                rel=\"${effectiveRel}\"\n                target=\"${props.target}\"\n                @click=\"${handleClick}\">\n                ${buttonContent}\n              </a>\n            `\n          : html`\n              <span part=\"button\" role=\"presentation\" @click=\"${handleClick}\">${buttonContent}</span>\n            `}\n    `;\n  },\n  shadow: { delegatesFocus: false },\n  styles: [\n    colorThemeMixin,\n    coarsePointerMixin,\n    reducedMotionMixin,\n    roundedVariantMixin,\n    forcedColorsMixin,\n    sizeVariantMixin({\n      lg: {\n        fontSize: 'var(--text-base)',\n        gap: 'var(--size-2-5)',\n        height: 'var(--size-12)',\n        iconSize: 'var(--size-6)',\n        lineHeight: 'var(--leading-relaxed)',\n        padding: 'var(--size-2-5) var(--size-5)',\n      },\n      sm: {\n        fontSize: 'var(--text-sm)',\n        gap: 'var(--size-1-5)',\n        height: 'var(--size-8)',\n        iconSize: 'var(--size-4)',\n        lineHeight: 'var(--leading-tight)',\n        padding: 'var(--size-1-5) var(--size-3)',\n      },\n    }),\n    frostVariantMixin('[part=\"button\"]'),\n    rainbowEffectMixin('[part=\"button\"]'),\n    shineEffectMixin('[part=\"button\"]'),\n    disabledLoadingMixin,\n    componentStyles,\n  ],\n});\n"],"mappings":";;;;;;;;;;;;;;AAqBA,IAAa,IAAkB;CAAC;CAAS;CAAQ;CAAY;CAAW;CAAS;CAAQ;AAAO,GA8FnF,IAAa;AAC1B,EAAuB,GAAY;CACjC,gBAAgB;CAChB,OAAO;EACL,GAAG;EACH,QAAQ,EAAK,OAAqB;EAClC,YAAY,EAAK,KAAK,EAAK;EAC3B,WAAW,EAAK,KAAK,EAAK;EAC1B,MAAM,EAAK,OAAO;EAClB,UAAU,EAAK,KAAK,EAAK;EACzB,OAAO,EAAK,OAAO;EACnB,KAAK,EAAK,OAAO;EACjB,QAAQ,EAAK,OAAmB;EAChC,MAAM,EAAK,MAAM;GAAC;GAAU;GAAU;EAAO,GAAY,QAAQ;EACjE,SAAS,EAAK,MAAM,GAAiB,OAAO;CAC9C;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GAGb,IAAW,EAAO,CAAgB,GAClC,IAAiB,QAAe,GAAU,MAAM,SAAS,EAAM,MAAM,KAAK,GAC1E,IAAgB,QAAe,GAAU,KAAK,SAAS,EAAM,KAAK,KAAK,GACvE,IAAmB,QAAe,GAAU,QAAQ,SAAS,EAAM,QAAQ,KAAK,GAEhF,IAAa,QAAe,CAAC,EAAE,EAAM,SAAS,SAAS,EAAM,QAAQ,MAAM,GAG3E,EAAE,iBAAc,cAAW,EAAa,EAAM,MAAM,EAAM,KAAK,EAAM,MAAM,GAK3E,IAAY,EAAS;GACzB,UAAU;GACV,mBAAmB;GACnB,OAAO,QAAe,EAAE;EAC1B,CAAC,GAEK,KAAe,MAAkB;GACrC,IAAI,EAAW,OAAO;IACpB,EAAE,eAAe;IAEjB;GACF;GAIA,QAAqB,EAAO,QAAQ,OAAO,EAAU,UAAU,MAAO,EAAM,MAAM,GAAY,CAAE,CAAC,CAAC,CAAC;EACrG;EAUA,EAAK;GACH,MAAM;IACJ,aAAa,EAAM;IACnB,iBAAiB;IACjB,cAAc,EAAM;IACpB,OAAO;IACP,QAAQ,EAAM;IACd,MAAM,QAAe,EAAG,aAAa,MAAM,MAAM,EAAO,QAAQ,SAAS,SAAS;IAClF,MAAM;IACN,UAAU,QAAgB,EAAW,QAAQ,OAAO,GAAI;IACxD,SAAS;GACX;GACA,IAAI,EACF,UArBmB,MAAqB;IAC1C,CAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAe,IAChB,EAAG,YAAY,cAAc,mBAAiB,EAAA,EAAmB,MAAM;GAE5E,EAiBE;EACF,CAAC;EAED,IAAM,IAAgB,CAAI;8EACgD,CAAC,EAAM,QAAQ,MAAM;;;;;EAY/F,OAAO,CAAI;cAEP,EAAO,QACH,CAAI;;;;;wBAKQ,EAAM,KAAK;uBACZ,EAAa;0BACV,EAAM,OAAO;0BACb,EAAY;kBACpB,EAAc;;gBAGpB,CAAI;gEACgD,EAAY,IAAI,EAAc;cAChF;;CAEZ;CACA,QAAQ,EAAE,gBAAgB,GAAM;CAChC,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA,EAAiB;GACf,IAAI;IACF,UAAU;IACV,KAAK;IACL,QAAQ;IACR,UAAU;IACV,YAAY;IACZ,SAAS;GACX;GACA,IAAI;IACF,UAAU;IACV,KAAK;IACL,QAAQ;IACR,UAAU;IACV,YAAY;IACZ,SAAS;GACX;EACF,CAAC;EACD,EAAkB,mBAAiB;EACnC,EAAmB,mBAAiB;EACpC,EAAiB,mBAAiB;EAClC;EACA;CACF;AACF,CAAC"}
+{"version":3,"file":"button.js","names":[],"sources":["../src/inputs/button/button.ts"],"sourcesContent":["import { bind, define, getHost, html, inject, prop, useField } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { commonProps } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledLoadingMixin,\n  forcedColorsMixin,\n  frostVariantMixin,\n  rainbowEffectMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n  shineEffectMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { ButtonType, ComponentSize, LinkTarget, RoundedSize, ThemeColor } from '../../types';\nimport { useLinkProps } from '../../utils';\nimport { BUTTON_GROUP_CTX } from '../button-group/button-group';\nimport { useFormAction } from '../shared';\nimport componentStyles from './button.css?inline';\n\nexport const BUTTON_VARIANTS = ['solid', 'flat', 'bordered', 'outline', 'ghost', 'text', 'frost'] as const;\n\n/** Visual variant for ore-button — derived from BUTTON_VARIANTS for a single source of truth. */\nexport type ButtonVariant = (typeof BUTTON_VARIANTS)[number];\n\n/** Animated border effect for ore-button. */\nexport type ButtonEffect = 'shine' | 'rainbow';\n\n/** Button component properties */\nexport type OreButtonProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Animated border effect: 'shine' (color-aware neon sweep) or 'rainbow' */\n  effect?: ButtonEffect;\n  /**\n   * Full height button (100% of container) — the inner `[part=\"button\"]` fills its host's\n   * height instead of the size preset's fixed height. Useful when the button itself is the\n   * whole tappable surface of a container it doesn't otherwise control the size of (e.g. a\n   * swipe-revealed row action in `ore-list-item`'s `actions-left`/`actions-right` slots).\n   */\n  fullheight?: boolean;\n  /** Full width button (100% of container) */\n  fullwidth?: boolean;\n  /** When set, renders an `<a>` instead of `<button>` */\n  href?: string;\n  /** Icon-only mode (square aspect ratio, no padding) */\n  iconOnly?: boolean;\n  /** Accessible label for the inner button — required for icon-only buttons */\n  label?: string;\n  /** Show loading state with spinner */\n  loading?: boolean;\n  /** Link rel attribute (requires href) */\n  rel?: string;\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** Component size */\n  size?: ComponentSize;\n  /** Link target (requires href) */\n  target?: LinkTarget;\n  /** HTML button type attribute */\n  type?: ButtonType;\n  /** Visual style variant */\n  variant?: ButtonVariant;\n};\n\n/**\n * A customizable button component with multiple variants, sizes, and states.\n * Supports icons, loading states, and animated border effects.\n *\n * @element ore-button\n *\n * @attr {string} type - HTML button type: 'button' | 'submit' | 'reset'\n * @attr {boolean} disabled - Disable button interaction\n * @attr {boolean} loading - Show loading state with spinner\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text' | 'frost'\n * @attr {string} size - Button size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} effect - Animated border effect: 'shine' | 'rainbow'\n * @attr {boolean} icon-only - Icon-only mode (square aspect ratio, no padding)\n * @attr {boolean} fullwidth - Full width button (100% of container)\n * @attr {boolean} fullheight - Full height button (100% of container)\n *\n * @fires click - Emitted when button is clicked (unless disabled/loading)\n *\n * @slot - Button content (text, icons, etc.)\n * @slot prefix - Content before the button text (e.g., icons)\n * @slot suffix - Content after the button text (e.g., icons, badges)\n *\n * @part button - The inner button or anchor element\n * @part loader - The loading spinner element\n * @part content - The button content wrapper\n *\n * @cssprop --button-bg - Background color override\n * @cssprop --button-color - Text color override\n * @cssprop --button-border - Border width override\n * @cssprop --button-border-color - Border color override\n * @cssprop --button-radius - Border radius override\n * @cssprop --button-padding - Inner padding override\n * @cssprop --button-gap - Gap between icon and text override\n * @cssprop --button-font-size - Font size override\n * @cssprop --button-frost-active-bg - Background when pressed (frost variant)\n * @cssprop --button-frost-active-border-color - Border color when pressed (frost variant)\n *\n * @example\n * ```html\n * <ore-button variant=\"solid\" color=\"primary\">Click me</ore-button>\n * <ore-button loading color=\"success\">Processing...</ore-button>\n * <ore-button effect=\"shine\" color=\"primary\">Shine</ore-button>\n * <ore-button effect=\"rainbow\" variant=\"frost\">Rainbow</ore-button>\n * ```\n */\nexport const BUTTON_TAG = 'ore-button' as const;\ndefine<OreButtonProps>(BUTTON_TAG, {\n  formAssociated: true,\n  props: {\n    ...commonProps,\n    effect: prop.string<ButtonEffect>(),\n    fullheight: prop.bool(false),\n    fullwidth: prop.bool(false),\n    href: prop.string(),\n    iconOnly: prop.bool(false),\n    label: prop.string(),\n    rel: prop.string(),\n    target: prop.string<LinkTarget>(),\n    type: prop.oneOf(['button', 'submit', 'reset'] as const, 'button'),\n    variant: prop.oneOf(BUTTON_VARIANTS, 'solid'),\n  },\n  setup(props) {\n    const el = getHost();\n\n    // Prefer group context over own props for color/size/variant.\n    const groupCtx = inject(BUTTON_GROUP_CTX);\n    const effectiveColor = computed(() => groupCtx?.color.value ?? props.color.value);\n    const effectiveSize = computed(() => groupCtx?.size.value ?? props.size.value);\n    const effectiveVariant = computed(() => groupCtx?.variant.value ?? props.variant.value);\n\n    const isDisabled = computed(() => !!(props.disabled.value || props.loading.value));\n\n    // isLink and effectiveRel are computed from signals — correct even if href changes at runtime.\n    const { effectiveRel, isLink } = useLinkProps(props.href, props.rel, props.target);\n\n    // Form association: relay submit/reset clicks to the associated form.\n    // The inner <button> always has type=\"button\" so shadow DOM never drives native form actions.\n    // getForm() returns null for link mode at runtime, so no form actions fire.\n    const formField = useField({\n      disabled: isDisabled,\n      toFormValue: () => null,\n      value: computed(() => ''),\n    });\n\n    const handleClick = (e: MouseEvent) => {\n      if (isDisabled.value) {\n        e.preventDefault();\n\n        return;\n      }\n\n      // Link mode renders a real <a href> below — the browser handles left/middle/ctrl-click\n      // navigation, target, and rel natively. No manual window.open/location.href needed.\n      useFormAction(() => (isLink.value ? null : formField.internals.form), props.type, isDisabled, el)(e);\n    };\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      if (isLink.value) return;\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        (el.shadowRoot?.querySelector('[part=\"button\"]') as HTMLElement)?.click();\n      }\n    };\n\n    // ARIA attributes live on the host.\n    bind({\n      attr: {\n        'aria-busy': computed(() => (isLink.value ? null : props.loading.value)),\n        'aria-disabled': computed(() => (isLink.value ? null : isDisabled.value)),\n        'aria-label': computed(() => (isLink.value ? null : props.label.value)),\n        color: effectiveColor,\n        effect: props.effect,\n        role: computed(() => (isLink.value ? null : (el.getAttribute('role') ?? 'button'))),\n        size: effectiveSize,\n        tabindex: computed(() => (isLink.value ? null : isDisabled.value ? '-1' : '0')),\n        variant: effectiveVariant,\n      },\n      on: {\n        keydown: handleKeydown,\n      },\n    });\n\n    const buttonContent = html`\n      <span class=\"loader\" part=\"loader\" aria-label=\"Loading\" ?hidden=${() => !props.loading.value}></span>\n      <slot name=\"prefix\"></slot>\n      <span class=\"content\" part=\"content\"><slot></slot></span>\n      <slot name=\"suffix\"></slot>\n    `;\n\n    // Link mode delegates semantics and focus to the native anchor. Button mode keeps them on\n    // the form-associated host because its visual part is intentionally a non-semantic span.\n    return html`\n      ${() =>\n        isLink.value\n          ? html`\n              <a\n                part=\"button\"\n                aria-busy=\"${props.loading}\"\n                aria-disabled=\"${isDisabled}\"\n                aria-label=\"${computed(() => props.label.value || el.textContent?.trim() || null)}\"\n                tabindex=\"${computed(() => (isDisabled.value ? '-1' : null))}\"\n                href=\"${computed(() => (isDisabled.value ? null : props.href.value))}\"\n                rel=\"${effectiveRel}\"\n                target=\"${props.target}\"\n                @click=\"${handleClick}\">\n                ${buttonContent}\n              </a>\n            `\n          : html`\n              <span part=\"button\" role=\"presentation\" @click=\"${handleClick}\">${buttonContent}</span>\n            `}\n    `;\n  },\n  shadow: { delegatesFocus: false },\n  styles: [\n    colorThemeMixin,\n    coarsePointerMixin,\n    reducedMotionMixin,\n    roundedVariantMixin,\n    forcedColorsMixin,\n    sizeVariantMixin({\n      lg: {\n        fontSize: 'var(--text-base)',\n        gap: 'var(--size-2-5)',\n        height: 'var(--size-12)',\n        iconSize: 'var(--size-6)',\n        lineHeight: 'var(--leading-relaxed)',\n        padding: 'var(--size-2-5) var(--size-5)',\n      },\n      sm: {\n        fontSize: 'var(--text-sm)',\n        gap: 'var(--size-1-5)',\n        height: 'var(--size-8)',\n        iconSize: 'var(--size-4)',\n        lineHeight: 'var(--leading-tight)',\n        padding: 'var(--size-1-5) var(--size-3)',\n      },\n    }),\n    frostVariantMixin('[part=\"button\"]'),\n    rainbowEffectMixin('[part=\"button\"]'),\n    shineEffectMixin('[part=\"button\"]'),\n    disabledLoadingMixin,\n    componentStyles,\n  ],\n});\n"],"mappings":"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"}

package/dist/card.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./styles/mixins/variants.css.cjs"),i=require("./core/keyboard.cjs"),a=require("./shared/prop-bundles.cjs"),o=require("./content/card/card.css.cjs");let s=require("@vielzeug/ore"),c=require("@vielzeug/ripple");var l=`button, a[href], input, select, textarea, summary, [role="button"], [role="link"], [contenteditable=""], [contenteditable="true"]`;function u(e,t){for(let n of t.composedPath())if(n instanceof HTMLElement){if(n===e)return!1;if(n.matches(l)||n.closest(l))return!0}return!1}var d=`ore-card`;(0,s.define)(d,{props:{...a.themableBundle,...a.disablableBundle,...a.loadableBundle,elevation:s.prop.number(),interactive:s.prop.bool(!1),orientation:s.prop.string(),padding:s.prop.string(),variant:s.prop.string()},setup(e){let t=(0,s.getHost)(),n=(0,s.useEmit)(),r=(0,s.useSlots)(),a=s.watchEffect;(0,s.bind)({attr:{ariaBusy:()=>e.loading.value?`true`:`false`,ariaDisabled:()=>e.interactive.value?String(e.disabled.value):null,role:()=>e.interactive.value?`button`:null}}),a(()=>{e.interactive.value?t.setAttribute(`tabindex`,e.disabled.value?`-1`:`0`):t.removeAttribute(`tabindex`)});let o=i.createInteraction({disabled:(0,c.computed)(()=>!e.interactive.value||!!e.disabled.value),onPress:(e,t)=>{n(`activate`,{originalEvent:e,trigger:t})}}),l=n=>{e.interactive.value&&!e.disabled.value&&(u(t,n)||o.handleClick(n))},d=e=>{o.handleKeydown(e)};return(0,s.bind)({on:{click:e=>l(e),keydown:e=>d(e)}}),s.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./styles/mixins/variants.css.cjs"),i=require("./core/keyboard.cjs"),a=require("./shared/prop-bundles.cjs"),o=require("./content/card/card.css.cjs");let s=require("@vielzeug/ore"),c=require("@vielzeug/ripple");var l=`button, a[href], input, select, textarea, summary, [role="button"], [role="link"], [contenteditable=""], [contenteditable="true"]`;function u(e,t){for(let n of t.composedPath()){if(!(n instanceof HTMLElement))continue;if(n===e)return!1;let t=n.closest(l);if(t&&t!==e)return!0}return!1}var d=`ore-card`;(0,s.define)(d,{props:{...a.themableBundle,...a.disablableBundle,...a.loadableBundle,elevation:s.prop.number(),interactive:s.prop.bool(!1),orientation:s.prop.string(),padding:s.prop.string(),variant:s.prop.string()},setup(e){let t=(0,s.getHost)(),n=(0,s.useEmit)(),r=(0,s.useSlots)(),a=s.watchEffect;(0,s.bind)({attr:{"aria-busy":()=>e.loading.value?`true`:`false`,"aria-disabled":()=>e.interactive.value?String(e.disabled.value):null,role:()=>e.interactive.value?`button`:null}}),a(()=>{e.interactive.value?t.setAttribute(`tabindex`,e.disabled.value?`-1`:`0`):t.removeAttribute(`tabindex`)});let o=i.createInteraction({disabled:(0,c.computed)(()=>!e.interactive.value||!!e.disabled.value),onPress:(e,t)=>{n(`activate`,{originalEvent:e,trigger:t})}}),l=n=>{e.interactive.value&&!e.disabled.value&&(u(t,n)||o.handleClick(n))},d=e=>{o.handleKeydown(e)};return(0,s.bind)({on:{click:e=>l(e),keydown:e=>d(e)}}),s.html`
       <div class="card" part="card">
         <div class="loading-bar" part="loading-bar"></div>
         <div class="card-media" part="media" ?hidden="${()=>!r.has(`media`).value}">

package/dist/card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"card.cjs","names":[],"sources":["../src/content/card/card.ts"],"sourcesContent":["import { bind, define, getHost, html, prop, useEmit, useSlots, watchEffect } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { createInteraction } from '../../core';\nimport { disablableBundle, loadableBundle, themableBundle } from '../../shared';\nimport {\n  colorThemeMixin,\n  elevationMixin,\n  frostVariantMixin,\n  paddingMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n} from '../../styles';\nimport type { ElevationLevel, PaddingSize, ThemeColor } from '../../types';\nimport componentStyles from './card.css?inline';\n\nconst INTERACTIVE_DESCENDANT_SELECTOR =\n  'button, a[href], input, select, textarea, summary, [role=\"button\"], [role=\"link\"], [contenteditable=\"\"], [contenteditable=\"true\"]';\n\nfunction isNestedInteractiveTarget(host: HTMLElement, event: Event): boolean {\n  for (const node of event.composedPath()) {\n    if (!(node instanceof HTMLElement)) continue;\n\n    if (node === host) return false;\n\n    if (node.matches(INTERACTIVE_DESCENDANT_SELECTOR) || node.closest(INTERACTIVE_DESCENDANT_SELECTOR)) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\n/** Card component properties */\n\nexport type OreCardEvents = {\n  activate: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' };\n};\n\nexport type OreCardProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Shadow elevation level (0-5) */\n  elevation?: ElevationLevel;\n  /** Make the card interactive (role=button, keyboard nav, emits activate) */\n  interactive?: boolean;\n  /** Show a loading progress bar */\n  loading?: boolean;\n  /** Card orientation */\n  orientation?: 'horizontal';\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'glass' | 'frost';\n};\n\n/**\n * A versatile card container with semantic slots for media, header, body, footer, and actions.\n *\n * @element ore-card\n *\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'glass' | 'frost'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} padding - Internal padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n * @attr {string} orientation - Card layout: 'horizontal'\n * @attr {boolean} interactive - Enable pointer/keyboard activation\n * @attr {boolean} disabled - Disable card interaction\n * @attr {boolean} loading - Show loading progress bar\n *\n * @fires activate - Emitted when an interactive card is activated. detail: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' }\n *\n * @slot media - Media content displayed at top/left\n * @slot header - Card header (title, subtitle)\n * @slot - Main card content\n * @slot footer - Card footer content\n * @slot actions - Action buttons or links\n *\n * @cssprop --card-bg - Background color\n * @cssprop --card-color - Text color\n * @cssprop --card-border - Border width\n * @cssprop --card-border-color - Border color\n * @cssprop --card-radius - Border radius\n * @cssprop --card-padding - Internal padding\n * @cssprop --card-shadow - Box shadow\n * @cssprop --card-hover-shadow - Shadow on hover\n *\n * @part card - Card root container.\n * @part loading-bar - Loading progress bar.\n * @part media - Media slot container.\n * @part body - Body content container.\n * @part header - Header container.\n * @part content - Content container.\n * @part footer - Footer container.\n * @part actions - Actions slot container.\n * @example\n * ```html\n * <ore-card elevation=\"2\"><h3 slot=\"header\">Title</h3><p>Content</p></ore-card>\n * <ore-card interactive color=\"primary\"><h3 slot=\"header\">Click me</h3></ore-card>\n * <ore-card variant=\"frost\" color=\"secondary\">Frosted card</ore-card>\n * ```\n */\nexport const CARD_TAG = 'ore-card' as const;\ndefine<OreCardProps>(CARD_TAG, {\n  props: {\n    ...themableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    elevation: prop.number<ElevationLevel>(),\n    interactive: prop.bool(false),\n    orientation: prop.string<'horizontal'>(),\n    padding: prop.string<PaddingSize>(),\n    variant: prop.string<'solid' | 'flat' | 'glass' | 'frost'>(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCardEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    bind({\n      attr: {\n        ariaBusy: () => (props.loading.value ? 'true' : 'false'),\n        ariaDisabled: () => (props.interactive.value ? String(props.disabled.value) : null),\n        role: () => (props.interactive.value ? 'button' : null),\n      },\n    });\n\n    watch(() => {\n      if (props.interactive.value) {\n        el.setAttribute('tabindex', props.disabled.value ? '-1' : '0');\n      } else {\n        el.removeAttribute('tabindex');\n      }\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Event Handlers\n    // ────────────────────────────────────────────────────────────────\n\n    const pressControl = createInteraction({\n      disabled: computed(() => !props.interactive.value || Boolean(props.disabled.value)),\n      onPress: (originalEvent, trigger) => {\n        emit('activate', { originalEvent, trigger });\n      },\n    });\n\n    const handleClick = (e: MouseEvent) => {\n      if (!props.interactive.value || props.disabled.value) return;\n\n      if (isNestedInteractiveTarget(el, e)) return;\n\n      pressControl.handleClick(e);\n    };\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      pressControl.handleKeydown(e);\n    };\n\n    bind({\n      on: {\n        click: (e: MouseEvent) => handleClick(e),\n        keydown: (e: KeyboardEvent) => handleKeydown(e),\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Template\n    // ────────────────────────────────────────────────────────────────\n\n    return html`\n      <div class=\"card\" part=\"card\">\n        <div class=\"loading-bar\" part=\"loading-bar\"></div>\n        <div class=\"card-media\" part=\"media\" ?hidden=\"${() => !slots.has('media').value}\">\n          <slot name=\"media\"></slot>\n        </div>\n        <div class=\"card-body\" part=\"body\">\n          <div class=\"card-header\" part=\"header\" ?hidden=\"${() => !slots.has('header').value}\">\n            <slot name=\"header\"></slot>\n          </div>\n          <div class=\"card-content\" part=\"content\" ?hidden=\"${() => !slots.has().value}\">\n            <slot></slot>\n          </div>\n          <div class=\"card-footer\" part=\"footer\" ?hidden=\"${() => !slots.has('footer').value}\">\n            <slot name=\"footer\"></slot>\n          </div>\n          <div class=\"card-actions\" part=\"actions\" ?hidden=\"${() => !slots.has('actions').value}\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  },\n\n  styles: [\n    colorThemeMixin,\n    elevationMixin,\n    paddingMixin,\n    roundedVariantMixin,\n    frostVariantMixin('.card'),\n    reducedMotionMixin,\n    componentStyles,\n  ],\n});\n"],"mappings":"8aAeA,IAAM,EACJ,oIAEF,SAAS,EAA0B,EAAmB,EAAuB,CAC3E,IAAK,IAAM,KAAQ,EAAM,aAAa,EAC9B,gBAAgB,YAEtB,IAAI,IAAS,EAAM,MAAO,GAE1B,GAAI,EAAK,QAAQ,CAA+B,GAAK,EAAK,QAAQ,CAA+B,EAC/F,MAAO,EAHiB,CAO5B,MAAO,EACT,CAyEA,IAAa,EAAW,YACxB,EAAA,EAAA,OAAA,CAAqB,EAAU,CAC7B,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,iBACH,GAAG,EAAA,eACH,UAAW,EAAA,KAAK,OAAuB,EACvC,YAAa,EAAA,KAAK,KAAK,EAAK,EAC5B,YAAa,EAAA,KAAK,OAAqB,EACvC,QAAS,EAAA,KAAK,OAAoB,EAClC,QAAS,EAAA,KAAK,OAA6C,CAC7D,EAEA,MAAM,EAAO,CACX,IAAM,GAAA,EAAK,EAAA,QAAA,CAAQ,EACb,GAAA,EAAO,EAAA,QAAA,CAAuB,EAC9B,GAAA,EAAQ,EAAA,SAAA,CAAS,EACjB,EAAQ,EAAA,aAEd,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,aAAiB,EAAM,QAAQ,MAAQ,OAAS,QAChD,iBAAqB,EAAM,YAAY,MAAQ,OAAO,EAAM,SAAS,KAAK,EAAI,KAC9E,SAAa,EAAM,YAAY,MAAQ,SAAW,IACpD,CACF,CAAC,EAED,MAAY,CACN,EAAM,YAAY,MACpB,EAAG,aAAa,WAAY,EAAM,SAAS,MAAQ,KAAO,GAAG,EAE7D,EAAG,gBAAgB,UAAU,CAEjC,CAAC,EAMD,IAAM,EAAe,EAAA,kBAAkB,CACrC,UAAA,EAAU,EAAA,SAAA,KAAe,CAAC,EAAM,YAAY,OAAS,EAAQ,EAAM,SAAS,KAAM,EAClF,SAAU,EAAe,IAAY,CACnC,EAAK,WAAY,CAAE,gBAAe,SAAQ,CAAC,CAC7C,CACF,CAAC,EAEK,EAAe,GAAkB,CAChC,EAAM,YAAY,OAAS,GAAM,SAAS,QAE3C,EAA0B,EAAI,CAAC,GAEnC,EAAa,YAAY,CAAC,EAC5B,EAEM,EAAiB,GAAqB,CAC1C,EAAa,cAAc,CAAC,CAC9B,EAaA,OAXA,EAAA,EAAA,KAAA,CAAK,CACH,GAAI,CACF,MAAQ,GAAkB,EAAY,CAAC,EACvC,QAAU,GAAqB,EAAc,CAAC,CAChD,CACF,CAAC,EAMM,EAAA,IAAI;;;4DAG+C,CAAC,EAAM,IAAI,OAAO,CAAC,CAAC,MAAM;;;;gEAItB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;kEAGzB,CAAC,EAAM,IAAI,CAAC,CAAC,MAAM;;;gEAGrB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;kEAGzB,CAAC,EAAM,IAAI,SAAS,CAAC,CAAC,MAAM;;;;;KAM9F,EAEA,OAAQ,CACN,EAAA,gBACA,EAAA,eACA,EAAA,aACA,EAAA,oBACA,EAAA,kBAAkB,OAAO,EACzB,EAAA,mBACA,EAAA,OACF,CACF,CAAC"}
+{"version":3,"file":"card.cjs","names":[],"sources":["../src/content/card/card.ts"],"sourcesContent":["import { bind, define, getHost, html, prop, useEmit, useSlots, watchEffect } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { createInteraction } from '../../core';\nimport { disablableBundle, loadableBundle, themableBundle } from '../../shared';\nimport {\n  colorThemeMixin,\n  elevationMixin,\n  frostVariantMixin,\n  paddingMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n} from '../../styles';\nimport type { ElevationLevel, PaddingSize, ThemeColor } from '../../types';\nimport componentStyles from './card.css?inline';\n\nconst INTERACTIVE_DESCENDANT_SELECTOR =\n  'button, a[href], input, select, textarea, summary, [role=\"button\"], [role=\"link\"], [contenteditable=\"\"], [contenteditable=\"true\"]';\n\nfunction isNestedInteractiveTarget(host: HTMLElement, event: Event): boolean {\n  for (const node of event.composedPath()) {\n    if (!(node instanceof HTMLElement)) continue;\n\n    if (node === host) return false;\n\n    const interactiveTarget = node.closest(INTERACTIVE_DESCENDANT_SELECTOR);\n\n    if (interactiveTarget && interactiveTarget !== host) return true;\n  }\n\n  return false;\n}\n\n/** Card component properties */\n\nexport type OreCardEvents = {\n  activate: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' };\n};\n\nexport type OreCardProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Shadow elevation level (0-5) */\n  elevation?: ElevationLevel;\n  /** Make the card interactive (role=button, keyboard nav, emits activate) */\n  interactive?: boolean;\n  /** Show a loading progress bar */\n  loading?: boolean;\n  /** Card orientation */\n  orientation?: 'horizontal';\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'frost';\n};\n\n/**\n * A versatile card container with semantic slots for media, header, body, footer, and actions.\n *\n * @element ore-card\n *\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'frost'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} padding - Internal padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n * @attr {string} orientation - Card layout: 'horizontal'\n * @attr {boolean} interactive - Enable pointer/keyboard activation\n * @attr {boolean} disabled - Disable card interaction\n * @attr {boolean} loading - Show loading progress bar\n *\n * @fires activate - Emitted when an interactive card is activated. detail: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' }\n *\n * @slot media - Media content displayed at top/left\n * @slot header - Card header (title, subtitle)\n * @slot - Main card content\n * @slot footer - Card footer content\n * @slot actions - Action buttons or links\n *\n * @cssprop --card-bg - Background color\n * @cssprop --card-color - Text color\n * @cssprop --card-border - Border width\n * @cssprop --card-border-color - Border color\n * @cssprop --card-radius - Border radius\n * @cssprop --card-padding - Internal padding\n * @cssprop --card-shadow - Box shadow\n * @cssprop --card-hover-shadow - Shadow on hover\n *\n * @part card - Card root container.\n * @part loading-bar - Loading progress bar.\n * @part media - Media slot container.\n * @part body - Body content container.\n * @part header - Header container.\n * @part content - Content container.\n * @part footer - Footer container.\n * @part actions - Actions slot container.\n * @example\n * ```html\n * <ore-card elevation=\"2\"><h3 slot=\"header\">Title</h3><p>Content</p></ore-card>\n * <ore-card interactive color=\"primary\"><h3 slot=\"header\">Click me</h3></ore-card>\n * <ore-card variant=\"frost\" color=\"secondary\">Frosted card</ore-card>\n * ```\n */\nexport const CARD_TAG = 'ore-card' as const;\ndefine<OreCardProps>(CARD_TAG, {\n  props: {\n    ...themableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    elevation: prop.number<ElevationLevel>(),\n    interactive: prop.bool(false),\n    orientation: prop.string<'horizontal'>(),\n    padding: prop.string<PaddingSize>(),\n    variant: prop.string<'solid' | 'flat' | 'frost'>(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCardEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    bind({\n      attr: {\n        'aria-busy': () => (props.loading.value ? 'true' : 'false'),\n        'aria-disabled': () => (props.interactive.value ? String(props.disabled.value) : null),\n        role: () => (props.interactive.value ? 'button' : null),\n      },\n    });\n\n    watch(() => {\n      if (props.interactive.value) {\n        el.setAttribute('tabindex', props.disabled.value ? '-1' : '0');\n      } else {\n        el.removeAttribute('tabindex');\n      }\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Event Handlers\n    // ────────────────────────────────────────────────────────────────\n\n    const pressControl = createInteraction({\n      disabled: computed(() => !props.interactive.value || Boolean(props.disabled.value)),\n      onPress: (originalEvent, trigger) => {\n        emit('activate', { originalEvent, trigger });\n      },\n    });\n\n    const handleClick = (e: MouseEvent) => {\n      if (!props.interactive.value || props.disabled.value) return;\n\n      if (isNestedInteractiveTarget(el, e)) return;\n\n      pressControl.handleClick(e);\n    };\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      pressControl.handleKeydown(e);\n    };\n\n    bind({\n      on: {\n        click: (e: MouseEvent) => handleClick(e),\n        keydown: (e: KeyboardEvent) => handleKeydown(e),\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Template\n    // ────────────────────────────────────────────────────────────────\n\n    return html`\n      <div class=\"card\" part=\"card\">\n        <div class=\"loading-bar\" part=\"loading-bar\"></div>\n        <div class=\"card-media\" part=\"media\" ?hidden=\"${() => !slots.has('media').value}\">\n          <slot name=\"media\"></slot>\n        </div>\n        <div class=\"card-body\" part=\"body\">\n          <div class=\"card-header\" part=\"header\" ?hidden=\"${() => !slots.has('header').value}\">\n            <slot name=\"header\"></slot>\n          </div>\n          <div class=\"card-content\" part=\"content\" ?hidden=\"${() => !slots.has().value}\">\n            <slot></slot>\n          </div>\n          <div class=\"card-footer\" part=\"footer\" ?hidden=\"${() => !slots.has('footer').value}\">\n            <slot name=\"footer\"></slot>\n          </div>\n          <div class=\"card-actions\" part=\"actions\" ?hidden=\"${() => !slots.has('actions').value}\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  },\n\n  styles: [\n    colorThemeMixin,\n    elevationMixin,\n    paddingMixin,\n    roundedVariantMixin,\n    frostVariantMixin('.card'),\n    reducedMotionMixin,\n    componentStyles,\n  ],\n});\n"],"mappings":"8aAeA,IAAM,EACJ,oIAEF,SAAS,EAA0B,EAAmB,EAAuB,CAC3E,IAAK,IAAM,KAAQ,EAAM,aAAa,EAAG,CACvC,GAAI,EAAE,aAAgB,aAAc,SAEpC,GAAI,IAAS,EAAM,MAAO,GAE1B,IAAM,EAAoB,EAAK,QAAQ,CAA+B,EAEtE,GAAI,GAAqB,IAAsB,EAAM,MAAO,EAC9D,CAEA,MAAO,EACT,CAyEA,IAAa,EAAW,YACxB,EAAA,EAAA,OAAA,CAAqB,EAAU,CAC7B,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,iBACH,GAAG,EAAA,eACH,UAAW,EAAA,KAAK,OAAuB,EACvC,YAAa,EAAA,KAAK,KAAK,EAAK,EAC5B,YAAa,EAAA,KAAK,OAAqB,EACvC,QAAS,EAAA,KAAK,OAAoB,EAClC,QAAS,EAAA,KAAK,OAAmC,CACnD,EAEA,MAAM,EAAO,CACX,IAAM,GAAA,EAAK,EAAA,QAAA,CAAQ,EACb,GAAA,EAAO,EAAA,QAAA,CAAuB,EAC9B,GAAA,EAAQ,EAAA,SAAA,CAAS,EACjB,EAAQ,EAAA,aAEd,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,gBAAoB,EAAM,QAAQ,MAAQ,OAAS,QACnD,oBAAwB,EAAM,YAAY,MAAQ,OAAO,EAAM,SAAS,KAAK,EAAI,KACjF,SAAa,EAAM,YAAY,MAAQ,SAAW,IACpD,CACF,CAAC,EAED,MAAY,CACN,EAAM,YAAY,MACpB,EAAG,aAAa,WAAY,EAAM,SAAS,MAAQ,KAAO,GAAG,EAE7D,EAAG,gBAAgB,UAAU,CAEjC,CAAC,EAMD,IAAM,EAAe,EAAA,kBAAkB,CACrC,UAAA,EAAU,EAAA,SAAA,KAAe,CAAC,EAAM,YAAY,OAAS,EAAQ,EAAM,SAAS,KAAM,EAClF,SAAU,EAAe,IAAY,CACnC,EAAK,WAAY,CAAE,gBAAe,SAAQ,CAAC,CAC7C,CACF,CAAC,EAEK,EAAe,GAAkB,CAChC,EAAM,YAAY,OAAS,GAAM,SAAS,QAE3C,EAA0B,EAAI,CAAC,GAEnC,EAAa,YAAY,CAAC,EAC5B,EAEM,EAAiB,GAAqB,CAC1C,EAAa,cAAc,CAAC,CAC9B,EAaA,OAXA,EAAA,EAAA,KAAA,CAAK,CACH,GAAI,CACF,MAAQ,GAAkB,EAAY,CAAC,EACvC,QAAU,GAAqB,EAAc,CAAC,CAChD,CACF,CAAC,EAMM,EAAA,IAAI;;;4DAG+C,CAAC,EAAM,IAAI,OAAO,CAAC,CAAC,MAAM;;;;gEAItB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;kEAGzB,CAAC,EAAM,IAAI,CAAC,CAAC,MAAM;;;gEAGrB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;kEAGzB,CAAC,EAAM,IAAI,SAAS,CAAC,CAAC,MAAM;;;;;KAM9F,EAEA,OAAQ,CACN,EAAA,gBACA,EAAA,eACA,EAAA,aACA,EAAA,oBACA,EAAA,kBAAkB,OAAO,EACzB,EAAA,mBACA,EAAA,OACF,CACF,CAAC"}

package/dist/card.js

@@ -10,9 +10,11 @@ import { computed as y } from "@vielzeug/ripple";
 //#region src/content/card/card.ts
 var b = "button, a[href], input, select, textarea, summary, [role=\"button\"], [role=\"link\"], [contenteditable=\"\"], [contenteditable=\"true\"]";
 function x(e, t) {
-	for (let n of t.composedPath()) if (n instanceof HTMLElement) {
+	for (let n of t.composedPath()) {
+		if (!(n instanceof HTMLElement)) continue;
 		if (n === e) return !1;
-		if (n.matches(b) || n.closest(b)) return !0;
+		let t = n.closest(b);
+		if (t && t !== e) return !0;
 	}
 	return !1;
 }
@@ -31,8 +33,8 @@ f(S, {
 	setup(e) {
 		let t = p(), n = g(), r = _(), i = v;
 		d({ attr: {
-			ariaBusy: () => e.loading.value ? "true" : "false",
-			ariaDisabled: () => e.interactive.value ? String(e.disabled.value) : null,
+			"aria-busy": () => e.loading.value ? "true" : "false",
+			"aria-disabled": () => e.interactive.value ? String(e.disabled.value) : null,
 			role: () => e.interactive.value ? "button" : null
 		} }), i(() => {
 			e.interactive.value ? t.setAttribute("tabindex", e.disabled.value ? "-1" : "0") : t.removeAttribute("tabindex");

package/dist/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../src/content/card/card.ts"],"sourcesContent":["import { bind, define, getHost, html, prop, useEmit, useSlots, watchEffect } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { createInteraction } from '../../core';\nimport { disablableBundle, loadableBundle, themableBundle } from '../../shared';\nimport {\n  colorThemeMixin,\n  elevationMixin,\n  frostVariantMixin,\n  paddingMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n} from '../../styles';\nimport type { ElevationLevel, PaddingSize, ThemeColor } from '../../types';\nimport componentStyles from './card.css?inline';\n\nconst INTERACTIVE_DESCENDANT_SELECTOR =\n  'button, a[href], input, select, textarea, summary, [role=\"button\"], [role=\"link\"], [contenteditable=\"\"], [contenteditable=\"true\"]';\n\nfunction isNestedInteractiveTarget(host: HTMLElement, event: Event): boolean {\n  for (const node of event.composedPath()) {\n    if (!(node instanceof HTMLElement)) continue;\n\n    if (node === host) return false;\n\n    if (node.matches(INTERACTIVE_DESCENDANT_SELECTOR) || node.closest(INTERACTIVE_DESCENDANT_SELECTOR)) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\n/** Card component properties */\n\nexport type OreCardEvents = {\n  activate: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' };\n};\n\nexport type OreCardProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Shadow elevation level (0-5) */\n  elevation?: ElevationLevel;\n  /** Make the card interactive (role=button, keyboard nav, emits activate) */\n  interactive?: boolean;\n  /** Show a loading progress bar */\n  loading?: boolean;\n  /** Card orientation */\n  orientation?: 'horizontal';\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'glass' | 'frost';\n};\n\n/**\n * A versatile card container with semantic slots for media, header, body, footer, and actions.\n *\n * @element ore-card\n *\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'glass' | 'frost'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} padding - Internal padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n * @attr {string} orientation - Card layout: 'horizontal'\n * @attr {boolean} interactive - Enable pointer/keyboard activation\n * @attr {boolean} disabled - Disable card interaction\n * @attr {boolean} loading - Show loading progress bar\n *\n * @fires activate - Emitted when an interactive card is activated. detail: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' }\n *\n * @slot media - Media content displayed at top/left\n * @slot header - Card header (title, subtitle)\n * @slot - Main card content\n * @slot footer - Card footer content\n * @slot actions - Action buttons or links\n *\n * @cssprop --card-bg - Background color\n * @cssprop --card-color - Text color\n * @cssprop --card-border - Border width\n * @cssprop --card-border-color - Border color\n * @cssprop --card-radius - Border radius\n * @cssprop --card-padding - Internal padding\n * @cssprop --card-shadow - Box shadow\n * @cssprop --card-hover-shadow - Shadow on hover\n *\n * @part card - Card root container.\n * @part loading-bar - Loading progress bar.\n * @part media - Media slot container.\n * @part body - Body content container.\n * @part header - Header container.\n * @part content - Content container.\n * @part footer - Footer container.\n * @part actions - Actions slot container.\n * @example\n * ```html\n * <ore-card elevation=\"2\"><h3 slot=\"header\">Title</h3><p>Content</p></ore-card>\n * <ore-card interactive color=\"primary\"><h3 slot=\"header\">Click me</h3></ore-card>\n * <ore-card variant=\"frost\" color=\"secondary\">Frosted card</ore-card>\n * ```\n */\nexport const CARD_TAG = 'ore-card' as const;\ndefine<OreCardProps>(CARD_TAG, {\n  props: {\n    ...themableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    elevation: prop.number<ElevationLevel>(),\n    interactive: prop.bool(false),\n    orientation: prop.string<'horizontal'>(),\n    padding: prop.string<PaddingSize>(),\n    variant: prop.string<'solid' | 'flat' | 'glass' | 'frost'>(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCardEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    bind({\n      attr: {\n        ariaBusy: () => (props.loading.value ? 'true' : 'false'),\n        ariaDisabled: () => (props.interactive.value ? String(props.disabled.value) : null),\n        role: () => (props.interactive.value ? 'button' : null),\n      },\n    });\n\n    watch(() => {\n      if (props.interactive.value) {\n        el.setAttribute('tabindex', props.disabled.value ? '-1' : '0');\n      } else {\n        el.removeAttribute('tabindex');\n      }\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Event Handlers\n    // ────────────────────────────────────────────────────────────────\n\n    const pressControl = createInteraction({\n      disabled: computed(() => !props.interactive.value || Boolean(props.disabled.value)),\n      onPress: (originalEvent, trigger) => {\n        emit('activate', { originalEvent, trigger });\n      },\n    });\n\n    const handleClick = (e: MouseEvent) => {\n      if (!props.interactive.value || props.disabled.value) return;\n\n      if (isNestedInteractiveTarget(el, e)) return;\n\n      pressControl.handleClick(e);\n    };\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      pressControl.handleKeydown(e);\n    };\n\n    bind({\n      on: {\n        click: (e: MouseEvent) => handleClick(e),\n        keydown: (e: KeyboardEvent) => handleKeydown(e),\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Template\n    // ────────────────────────────────────────────────────────────────\n\n    return html`\n      <div class=\"card\" part=\"card\">\n        <div class=\"loading-bar\" part=\"loading-bar\"></div>\n        <div class=\"card-media\" part=\"media\" ?hidden=\"${() => !slots.has('media').value}\">\n          <slot name=\"media\"></slot>\n        </div>\n        <div class=\"card-body\" part=\"body\">\n          <div class=\"card-header\" part=\"header\" ?hidden=\"${() => !slots.has('header').value}\">\n            <slot name=\"header\"></slot>\n          </div>\n          <div class=\"card-content\" part=\"content\" ?hidden=\"${() => !slots.has().value}\">\n            <slot></slot>\n          </div>\n          <div class=\"card-footer\" part=\"footer\" ?hidden=\"${() => !slots.has('footer').value}\">\n            <slot name=\"footer\"></slot>\n          </div>\n          <div class=\"card-actions\" part=\"actions\" ?hidden=\"${() => !slots.has('actions').value}\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  },\n\n  styles: [\n    colorThemeMixin,\n    elevationMixin,\n    paddingMixin,\n    roundedVariantMixin,\n    frostVariantMixin('.card'),\n    reducedMotionMixin,\n    componentStyles,\n  ],\n});\n"],"mappings":";;;;;;;;;;AAeA,IAAM,IACJ;AAEF,SAAS,EAA0B,GAAmB,GAAuB;CAC3E,KAAK,IAAM,KAAQ,EAAM,aAAa,GAC9B,iBAAgB,aAEtB;MAAI,MAAS,GAAM,OAAO;EAE1B,IAAI,EAAK,QAAQ,CAA+B,KAAK,EAAK,QAAQ,CAA+B,GAC/F,OAAO;CAHiB;CAO5B,OAAO;AACT;AAyEA,IAAa,IAAW;AACxB,EAAqB,GAAU;CAC7B,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,WAAW,EAAK,OAAuB;EACvC,aAAa,EAAK,KAAK,EAAK;EAC5B,aAAa,EAAK,OAAqB;EACvC,SAAS,EAAK,OAAoB;EAClC,SAAS,EAAK,OAA6C;CAC7D;CAEA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAAuB,GAC9B,IAAQ,EAAS,GACjB,IAAQ;EAUd,AARA,EAAK,EACH,MAAM;GACJ,gBAAiB,EAAM,QAAQ,QAAQ,SAAS;GAChD,oBAAqB,EAAM,YAAY,QAAQ,OAAO,EAAM,SAAS,KAAK,IAAI;GAC9E,YAAa,EAAM,YAAY,QAAQ,WAAW;EACpD,EACF,CAAC,GAED,QAAY;GACV,AAAI,EAAM,YAAY,QACpB,EAAG,aAAa,YAAY,EAAM,SAAS,QAAQ,OAAO,GAAG,IAE7D,EAAG,gBAAgB,UAAU;EAEjC,CAAC;EAMD,IAAM,IAAe,EAAkB;GACrC,UAAU,QAAe,CAAC,EAAM,YAAY,SAAS,EAAQ,EAAM,SAAS,KAAM;GAClF,UAAU,GAAe,MAAY;IACnC,EAAK,YAAY;KAAE;KAAe;IAAQ,CAAC;GAC7C;EACF,CAAC,GAEK,KAAe,MAAkB;GACjC,AAAC,EAAM,YAAY,SAAS,GAAM,SAAS,UAE3C,EAA0B,GAAI,CAAC,KAEnC,EAAa,YAAY,CAAC;EAC5B,GAEM,KAAiB,MAAqB;GAC1C,EAAa,cAAc,CAAC;EAC9B;EAaA,OAXA,EAAK,EACH,IAAI;GACF,QAAQ,MAAkB,EAAY,CAAC;GACvC,UAAU,MAAqB,EAAc,CAAC;EAChD,EACF,CAAC,GAMM,CAAI;;;8DAG+C,CAAC,EAAM,IAAI,OAAO,CAAC,CAAC,MAAM;;;;kEAItB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;oEAGzB,CAAC,EAAM,IAAI,CAAC,CAAC,MAAM;;;kEAGrB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;oEAGzB,CAAC,EAAM,IAAI,SAAS,CAAC,CAAC,MAAM;;;;;;CAM9F;CAEA,QAAQ;EACN;EACA;EACA;EACA;EACA,EAAkB,OAAO;EACzB;EACA;CACF;AACF,CAAC"}
+{"version":3,"file":"card.js","names":[],"sources":["../src/content/card/card.ts"],"sourcesContent":["import { bind, define, getHost, html, prop, useEmit, useSlots, watchEffect } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { createInteraction } from '../../core';\nimport { disablableBundle, loadableBundle, themableBundle } from '../../shared';\nimport {\n  colorThemeMixin,\n  elevationMixin,\n  frostVariantMixin,\n  paddingMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n} from '../../styles';\nimport type { ElevationLevel, PaddingSize, ThemeColor } from '../../types';\nimport componentStyles from './card.css?inline';\n\nconst INTERACTIVE_DESCENDANT_SELECTOR =\n  'button, a[href], input, select, textarea, summary, [role=\"button\"], [role=\"link\"], [contenteditable=\"\"], [contenteditable=\"true\"]';\n\nfunction isNestedInteractiveTarget(host: HTMLElement, event: Event): boolean {\n  for (const node of event.composedPath()) {\n    if (!(node instanceof HTMLElement)) continue;\n\n    if (node === host) return false;\n\n    const interactiveTarget = node.closest(INTERACTIVE_DESCENDANT_SELECTOR);\n\n    if (interactiveTarget && interactiveTarget !== host) return true;\n  }\n\n  return false;\n}\n\n/** Card component properties */\n\nexport type OreCardEvents = {\n  activate: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' };\n};\n\nexport type OreCardProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Shadow elevation level (0-5) */\n  elevation?: ElevationLevel;\n  /** Make the card interactive (role=button, keyboard nav, emits activate) */\n  interactive?: boolean;\n  /** Show a loading progress bar */\n  loading?: boolean;\n  /** Card orientation */\n  orientation?: 'horizontal';\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'frost';\n};\n\n/**\n * A versatile card container with semantic slots for media, header, body, footer, and actions.\n *\n * @element ore-card\n *\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'frost'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} padding - Internal padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n * @attr {string} orientation - Card layout: 'horizontal'\n * @attr {boolean} interactive - Enable pointer/keyboard activation\n * @attr {boolean} disabled - Disable card interaction\n * @attr {boolean} loading - Show loading progress bar\n *\n * @fires activate - Emitted when an interactive card is activated. detail: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' }\n *\n * @slot media - Media content displayed at top/left\n * @slot header - Card header (title, subtitle)\n * @slot - Main card content\n * @slot footer - Card footer content\n * @slot actions - Action buttons or links\n *\n * @cssprop --card-bg - Background color\n * @cssprop --card-color - Text color\n * @cssprop --card-border - Border width\n * @cssprop --card-border-color - Border color\n * @cssprop --card-radius - Border radius\n * @cssprop --card-padding - Internal padding\n * @cssprop --card-shadow - Box shadow\n * @cssprop --card-hover-shadow - Shadow on hover\n *\n * @part card - Card root container.\n * @part loading-bar - Loading progress bar.\n * @part media - Media slot container.\n * @part body - Body content container.\n * @part header - Header container.\n * @part content - Content container.\n * @part footer - Footer container.\n * @part actions - Actions slot container.\n * @example\n * ```html\n * <ore-card elevation=\"2\"><h3 slot=\"header\">Title</h3><p>Content</p></ore-card>\n * <ore-card interactive color=\"primary\"><h3 slot=\"header\">Click me</h3></ore-card>\n * <ore-card variant=\"frost\" color=\"secondary\">Frosted card</ore-card>\n * ```\n */\nexport const CARD_TAG = 'ore-card' as const;\ndefine<OreCardProps>(CARD_TAG, {\n  props: {\n    ...themableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    elevation: prop.number<ElevationLevel>(),\n    interactive: prop.bool(false),\n    orientation: prop.string<'horizontal'>(),\n    padding: prop.string<PaddingSize>(),\n    variant: prop.string<'solid' | 'flat' | 'frost'>(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCardEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    bind({\n      attr: {\n        'aria-busy': () => (props.loading.value ? 'true' : 'false'),\n        'aria-disabled': () => (props.interactive.value ? String(props.disabled.value) : null),\n        role: () => (props.interactive.value ? 'button' : null),\n      },\n    });\n\n    watch(() => {\n      if (props.interactive.value) {\n        el.setAttribute('tabindex', props.disabled.value ? '-1' : '0');\n      } else {\n        el.removeAttribute('tabindex');\n      }\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Event Handlers\n    // ────────────────────────────────────────────────────────────────\n\n    const pressControl = createInteraction({\n      disabled: computed(() => !props.interactive.value || Boolean(props.disabled.value)),\n      onPress: (originalEvent, trigger) => {\n        emit('activate', { originalEvent, trigger });\n      },\n    });\n\n    const handleClick = (e: MouseEvent) => {\n      if (!props.interactive.value || props.disabled.value) return;\n\n      if (isNestedInteractiveTarget(el, e)) return;\n\n      pressControl.handleClick(e);\n    };\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      pressControl.handleKeydown(e);\n    };\n\n    bind({\n      on: {\n        click: (e: MouseEvent) => handleClick(e),\n        keydown: (e: KeyboardEvent) => handleKeydown(e),\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Template\n    // ────────────────────────────────────────────────────────────────\n\n    return html`\n      <div class=\"card\" part=\"card\">\n        <div class=\"loading-bar\" part=\"loading-bar\"></div>\n        <div class=\"card-media\" part=\"media\" ?hidden=\"${() => !slots.has('media').value}\">\n          <slot name=\"media\"></slot>\n        </div>\n        <div class=\"card-body\" part=\"body\">\n          <div class=\"card-header\" part=\"header\" ?hidden=\"${() => !slots.has('header').value}\">\n            <slot name=\"header\"></slot>\n          </div>\n          <div class=\"card-content\" part=\"content\" ?hidden=\"${() => !slots.has().value}\">\n            <slot></slot>\n          </div>\n          <div class=\"card-footer\" part=\"footer\" ?hidden=\"${() => !slots.has('footer').value}\">\n            <slot name=\"footer\"></slot>\n          </div>\n          <div class=\"card-actions\" part=\"actions\" ?hidden=\"${() => !slots.has('actions').value}\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  },\n\n  styles: [\n    colorThemeMixin,\n    elevationMixin,\n    paddingMixin,\n    roundedVariantMixin,\n    frostVariantMixin('.card'),\n    reducedMotionMixin,\n    componentStyles,\n  ],\n});\n"],"mappings":";;;;;;;;;;AAeA,IAAM,IACJ;AAEF,SAAS,EAA0B,GAAmB,GAAuB;CAC3E,KAAK,IAAM,KAAQ,EAAM,aAAa,GAAG;EACvC,IAAI,EAAE,aAAgB,cAAc;EAEpC,IAAI,MAAS,GAAM,OAAO;EAE1B,IAAM,IAAoB,EAAK,QAAQ,CAA+B;EAEtE,IAAI,KAAqB,MAAsB,GAAM,OAAO;CAC9D;CAEA,OAAO;AACT;AAyEA,IAAa,IAAW;AACxB,EAAqB,GAAU;CAC7B,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,WAAW,EAAK,OAAuB;EACvC,aAAa,EAAK,KAAK,EAAK;EAC5B,aAAa,EAAK,OAAqB;EACvC,SAAS,EAAK,OAAoB;EAClC,SAAS,EAAK,OAAmC;CACnD;CAEA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAAuB,GAC9B,IAAQ,EAAS,GACjB,IAAQ;EAUd,AARA,EAAK,EACH,MAAM;GACJ,mBAAoB,EAAM,QAAQ,QAAQ,SAAS;GACnD,uBAAwB,EAAM,YAAY,QAAQ,OAAO,EAAM,SAAS,KAAK,IAAI;GACjF,YAAa,EAAM,YAAY,QAAQ,WAAW;EACpD,EACF,CAAC,GAED,QAAY;GACV,AAAI,EAAM,YAAY,QACpB,EAAG,aAAa,YAAY,EAAM,SAAS,QAAQ,OAAO,GAAG,IAE7D,EAAG,gBAAgB,UAAU;EAEjC,CAAC;EAMD,IAAM,IAAe,EAAkB;GACrC,UAAU,QAAe,CAAC,EAAM,YAAY,SAAS,EAAQ,EAAM,SAAS,KAAM;GAClF,UAAU,GAAe,MAAY;IACnC,EAAK,YAAY;KAAE;KAAe;IAAQ,CAAC;GAC7C;EACF,CAAC,GAEK,KAAe,MAAkB;GACjC,AAAC,EAAM,YAAY,SAAS,GAAM,SAAS,UAE3C,EAA0B,GAAI,CAAC,KAEnC,EAAa,YAAY,CAAC;EAC5B,GAEM,KAAiB,MAAqB;GAC1C,EAAa,cAAc,CAAC;EAC9B;EAaA,OAXA,EAAK,EACH,IAAI;GACF,QAAQ,MAAkB,EAAY,CAAC;GACvC,UAAU,MAAqB,EAAc,CAAC;EAChD,EACF,CAAC,GAMM,CAAI;;;8DAG+C,CAAC,EAAM,IAAI,OAAO,CAAC,CAAC,MAAM;;;;kEAItB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;oEAGzB,CAAC,EAAM,IAAI,CAAC,CAAC,MAAM;;;kEAGrB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;oEAGzB,CAAC,EAAM,IAAI,SAAS,CAAC,CAAC,MAAM;;;;;;CAM9F;CAEA,QAAQ;EACN;EACA;EACA;EACA;EACA,EAAkB,OAAO;EACzB;EACA;CACF;AACF,CAAC"}

package/dist/checkbox-group.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/states.css.cjs"),t=require("./core/choice-field.cjs"),n=require("./core/light-dom.cjs"),r=require("./core/ore.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./inputs/checkbox-group/checkbox-group.css.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple");var c=(0,o.createContext)(`CheckboxGroupContext`),l=`ore-checkbox-group`;(0,o.define)(l,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,error:o.prop.string(),helper:o.prop.string(),label:o.prop.string(),name:o.prop.string(),orientation:o.prop.string(`vertical`),required:o.prop.bool(!1),values:{...o.prop.string(),reflect:!1}},setup(e){let i=(0,o.getHost)(),a=(0,o.useEmit)(),l=(0,o.useSlots)(),u=o.watchEffect,d=t.createChoiceField({disabled:e.disabled,error:e.error,helper:e.helper,multiple:(0,s.signal)(!0),prefix:`checkbox-group`,required:e.required,signal:r.lifecycleSignal(o.onCleanup),value:e.values});d.attachFormField((0,o.useField)({disabled:d.disabled,onReset:d.reset,toFormValue:e=>e,validationMessage:d.validationMessage,validity:d.validity,value:d.formValue}));let f=d.selectedValues,p=()=>n.getLightChildrenByTag(i,`ore-checkbox`),m=e=>n.getChoiceLabel(p(),e),h=e=>{let t=f.value,n=t.map(m);a(`change`,{labels:n,originalEvent:e,values:t})},g=(e,t)=>{d.toggleValue(e),d.triggerValidation(`change`),h(t)};(0,o.provide)(c,{color:e.color,disabled:(0,s.computed)(()=>!!e.disabled.value),size:e.size,toggle:g,values:f});let _=()=>{let t=f.value,n=e.color.value,r=e.size.value,i=e.disabled.value,a=p();for(let e of a){let a=e.getAttribute(`value`)??``;e.toggleAttribute(`checked`,t.includes(a)),n?e.setAttribute(`color`,n):e.removeAttribute(`color`),r?e.setAttribute(`size`,r):e.removeAttribute(`size`),e.toggleAttribute(`disabled`,!!i)}};u(()=>{l.elements().value,_()}),u(()=>{l.elements().value;let e=p().map(e=>{let t=t=>{t.stopPropagation();let n=(e.getAttribute(`value`)??``).trim();n&&g(n,t)};return e.addEventListener(`change`,t),()=>{e.removeEventListener(`change`,t)}});return()=>{for(let t of e)t()}});let v=(0,o.createStableId)(`checkbox-group-legend`),y=`${v}-error`,b=`${v}-helper`,x=()=>!!e.error.value,S=()=>!!e.helper.value&&!x();return(0,o.bind)({attr:{size:e.size,values:d.formValue}}),o.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/states.css.cjs"),t=require("./core/choice-field.cjs"),n=require("./core/light-dom.cjs"),r=require("./core/ore.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./inputs/checkbox-group/checkbox-group.css.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple");var c=(0,o.createContext)(`CheckboxGroupContext`),l=`ore-checkbox-group`;(0,o.define)(l,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,error:o.prop.string(),helper:o.prop.string(),label:o.prop.string(),name:o.prop.string(),orientation:o.prop.string(`vertical`),required:o.prop.bool(!1),values:{...o.prop.string(),reflect:!1}},setup(e){let i=(0,o.getHost)(),a=(0,o.useEmit)(),l=(0,o.useSlots)(),u=o.watchEffect,d=t.createChoiceField({disabled:e.disabled,error:e.error,helper:e.helper,multiple:(0,s.signal)(!0),prefix:`checkbox-group`,required:e.required,signal:r.lifecycleSignal(o.onCleanup),value:e.values});d.attachFormField((0,o.useField)({disabled:d.disabled,onReset:d.reset,toFormValue:e=>e,validationMessage:d.validationMessage,validity:d.validity,value:d.formValue}));let f=d.selectedValues,p=()=>n.getLightChildrenByTag(i,`ore-checkbox`),m=e=>n.getChoiceLabel(p(),e),h=e=>{let t=f.value,n=t.map(m);a(`change`,{labels:n,originalEvent:e,values:t})},g=(e,t)=>{d.toggleValue(e),d.triggerValidation(`change`),h(t)};(0,o.provide)(c,{color:e.color,disabled:(0,s.computed)(()=>!!e.disabled.value),size:e.size,toggle:g,values:f});let _=()=>{let t=f.value,n=e.color.value,r=e.size.value,i=e.disabled.value,a=p();for(let e of a){let a=e.getAttribute(`value`)??``;e.toggleAttribute(`checked`,t.includes(a)),n?e.setAttribute(`color`,n):e.removeAttribute(`color`),r?e.setAttribute(`size`,r):e.removeAttribute(`size`),e.toggleAttribute(`disabled`,!!i)}};u(()=>{l.elements().value,_()}),u(()=>{l.elements().value;let e=p().map(e=>{let t=t=>{t.stopPropagation();let n=(e.getAttribute(`value`)??``).trim();n&&g(n,t)};return e.addEventListener(`change`,t),()=>{e.removeEventListener(`change`,t)}});return()=>{for(let t of e)t()}});let v=(0,o.createId)(`checkbox-group-legend`),y=`${v}-error`,b=`${v}-helper`,x=()=>!!e.error.value,S=()=>!!e.helper.value&&!x();return(0,o.bind)({attr:{size:e.size,values:d.formValue}}),o.html`
       <fieldset
         role="group"
         aria-required="${()=>String(!!e.required.value)}"

package/dist/checkbox-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.cjs","names":[],"sources":["../src/inputs/checkbox-group/checkbox-group.ts"],"sourcesContent":["import {\n  bind,\n  createContext,\n  createStableId,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  prop,\n  provide,\n  useEmit,\n  useField,\n  useSlots,\n  watchEffect,\n  when,\n} from '@vielzeug/ore';\nimport { computed, type Readable, signal } from '@vielzeug/ripple';\nimport {\n  type ChoiceChangeDetail,\n  createChoiceField,\n  getChoiceLabel,\n  getLightChildrenByTag,\n  lifecycleSignal,\n} from '../../core';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { disabledStateMixin } from '../../styles';\nimport type { ComponentSize, ThemeColor } from '../../types';\nimport componentStyles from './checkbox-group.css?inline';\n\n// ─── Context ──────────────────────────────────────────────────────────────────\n\nexport type CheckboxGroupContext = {\n  color: Readable<ThemeColor | undefined>;\n  disabled: Readable<boolean>;\n  size: Readable<ComponentSize | undefined>;\n  toggle: (value: string, originalEvent?: Event) => void;\n  values: Readable<string[]>;\n};\n\nexport const CHECKBOX_GROUP_CTX = createContext<CheckboxGroupContext>('CheckboxGroupContext');\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type OreCheckboxGroupProps = {\n  /** Theme color — propagated to all child ore-checkbox elements */\n  color?: ThemeColor;\n  /** Disable all checkboxes in the group */\n  disabled?: boolean;\n  /** Error message shown below the group */\n  error?: string;\n  /** Helper text shown below the group */\n  helper?: string;\n  /** Legend / label for the fieldset. Required for accessibility. */\n  label?: string;\n  /** Form field name used during submission */\n  name?: string;\n  /** Layout direction of the checkbox options */\n  orientation?: 'vertical' | 'horizontal';\n  /** Mark the group as required */\n  required?: boolean;\n  /** Size — propagated to all child ore-checkbox elements */\n  size?: ComponentSize;\n  /** Comma-separated list of currently checked values */\n  values?: string;\n};\n\nexport type OreCheckboxGroupEvents = {\n  change: ChoiceChangeDetail;\n};\n\n/**\n * A fieldset wrapper that groups `ore-checkbox` elements, provides shared\n * `color` and `size` via context, and manages multi-value selection state.\n *\n * @element ore-checkbox-group\n *\n * @attr {string} label - Legend text (required for a11y)\n * @attr {string} values - Comma-separated list of checked values\n * @attr {boolean} disabled - Disable all checkboxes in the group\n * @attr {string} error - Error message\n * @attr {string} helper - Helper text\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when selection changes. detail: { value: string, values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-checkbox` elements here\n *\n * @cssprop --checkbox-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --checkbox-group-gap - Gap between checkbox items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-checkbox-group name=\"fruits\" label=\"Favourite fruits\" required>\n *   <ore-checkbox value=\"apple\">Apple</ore-checkbox>\n *   <ore-checkbox value=\"banana\">Banana</ore-checkbox>\n *   <ore-checkbox value=\"cherry\">Cherry</ore-checkbox>\n * </ore-checkbox-group>\n * <ore-checkbox-group name=\"options\" orientation=\"horizontal\" color=\"primary\">\n *   <ore-checkbox value=\"a\">Option A</ore-checkbox>\n *   <ore-checkbox value=\"b\">Option B</ore-checkbox>\n * </ore-checkbox-group>\n * ```\n */\nexport const CHECKBOX_GROUP_TAG = 'ore-checkbox-group' as const;\ndefine<OreCheckboxGroupProps>(CHECKBOX_GROUP_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string(),\n    name: prop.string(),\n    orientation: prop.string('vertical'),\n    required: prop.bool(false),\n    // Not auto-reflected (`reflect: false`) — the derived, interaction-updated selection\n    // (`choice.formValue`) is the single writer for this attribute, via `bind()` below;\n    // letting `prop.string()`'s own default reflection also write the raw incoming value\n    // would leave two effects racing to set the same attribute from different sources.\n    values: { ...prop.string(), reflect: false },\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCheckboxGroupEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const choice = createChoiceField({\n      disabled: props.disabled,\n      error: props.error,\n      helper: props.helper,\n      multiple: signal(true),\n      prefix: 'checkbox-group',\n      required: props.required,\n      signal: lifecycleSignal(onCleanup),\n      value: props.values,\n    });\n\n    choice.attachFormField(\n      useField<string>({\n        disabled: choice.disabled,\n        onReset: choice.reset,\n        toFormValue: (v) => v,\n        validationMessage: choice.validationMessage,\n        validity: choice.validity,\n        value: choice.formValue,\n      }),\n    );\n\n    const checkedValues = choice.selectedValues;\n\n    const getCheckboxes = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-checkbox');\n    const getLabelForValue = (value: string): string => getChoiceLabel(getCheckboxes(), value);\n    const emitChange = (originalEvent?: Event) => {\n      const values = checkedValues.value;\n\n      const labels = values.map(getLabelForValue);\n\n      emit('change', { labels, originalEvent, values });\n    };\n\n    const toggleCheckbox = (val: string, originalEvent?: Event) => {\n      choice.toggleValue(val);\n      choice.triggerValidation('change');\n      emitChange(originalEvent);\n    };\n\n    provide(CHECKBOX_GROUP_CTX, {\n      color: props.color,\n      disabled: computed(() => Boolean(props.disabled.value)),\n      size: props.size,\n      toggle: toggleCheckbox,\n      values: checkedValues,\n    });\n\n    // Sync checked state + color/size/disabled onto slotted ore-checkbox children\n    const syncChildren = () => {\n      const values = checkedValues.value;\n      const color = props.color.value;\n      const size = props.size.value;\n      const disabled = props.disabled.value;\n      const checkboxes = getCheckboxes();\n\n      for (const checkbox of checkboxes) {\n        const val = checkbox.getAttribute('value') ?? '';\n\n        checkbox.toggleAttribute('checked', values.includes(val));\n\n        if (color) checkbox.setAttribute('color', color);\n        else checkbox.removeAttribute('color');\n\n        if (size) checkbox.setAttribute('size', size);\n        else checkbox.removeAttribute('size');\n\n        checkbox.toggleAttribute('disabled', Boolean(disabled));\n      }\n    };\n\n    watch(() => {\n      void slots.elements().value;\n      syncChildren();\n    });\n\n    watch(() => {\n      void slots.elements().value;\n\n      const listeners = getCheckboxes().map((checkbox) => {\n        const handler = (event: Event) => {\n          event.stopPropagation();\n\n          const val = (checkbox.getAttribute('value') ?? '').trim();\n\n          if (!val) return;\n\n          toggleCheckbox(val, event);\n        };\n\n        checkbox.addEventListener('change', handler);\n\n        return () => {\n          checkbox.removeEventListener('change', handler);\n        };\n      });\n\n      return () => {\n        for (const dispose of listeners) dispose();\n      };\n    });\n\n    const legendId = createStableId('checkbox-group-legend');\n    const errorId = `${legendId}-error`;\n    const helperId = `${legendId}-helper`;\n    const hasError = () => Boolean(props.error.value);\n    const hasHelper = () => Boolean(props.helper.value) && !hasError();\n\n    // Reactive, not a one-off `el.setAttribute()` inside the click handler: the host's `values`\n    // attribute must stay in sync with the selection regardless of *why* it changed (a click,\n    // or `reset()` on ancestor form reset — neither of which should need its own copy of this).\n    bind({ attr: { size: props.size, values: choice.formValue } });\n\n    return html`\n      <fieldset\n        role=\"group\"\n        aria-required=\"${() => String(Boolean(props.required.value))}\"\n        aria-invalid=\"${() => String(hasError())}\"\n        aria-errormessage=\"${() => (hasError() ? errorId : null)}\"\n        aria-describedby=\"${() => (hasError() ? errorId : hasHelper() ? helperId : null)}\">\n        <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n          ${props.label}${when(\n            () => Boolean(props.required.value),\n            () => html`\n              <span aria-hidden=\"true\">*</span>\n            `,\n          )}\n        </legend>\n        <div class=\"checkbox-group-items\" part=\"items\">\n          <slot></slot>\n        </div>\n        <div class=\"error-text\" id=\"${errorId}\" role=\"alert\" ?hidden=${() => !hasError()}>${props.error}</div>\n        <div class=\"helper-text\" id=\"${helperId}\" ?hidden=${() => !hasHelper()}>${props.helper}</div>\n      </fieldset>\n    `;\n  },\n  styles: [disabledStateMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"checkbox-group.cjs","names":[],"sources":["../src/inputs/checkbox-group/checkbox-group.ts"],"sourcesContent":["import {\n  bind,\n  createContext,\n  createId,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  prop,\n  provide,\n  useEmit,\n  useField,\n  useSlots,\n  watchEffect,\n  when,\n} from '@vielzeug/ore';\nimport { computed, type Readable, signal } from '@vielzeug/ripple';\nimport {\n  type ChoiceChangeDetail,\n  createChoiceField,\n  getChoiceLabel,\n  getLightChildrenByTag,\n  lifecycleSignal,\n} from '../../core';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { disabledStateMixin } from '../../styles';\nimport type { ComponentSize, ThemeColor } from '../../types';\nimport componentStyles from './checkbox-group.css?inline';\n\n// ─── Context ──────────────────────────────────────────────────────────────────\n\nexport type CheckboxGroupContext = {\n  color: Readable<ThemeColor | undefined>;\n  disabled: Readable<boolean>;\n  size: Readable<ComponentSize | undefined>;\n  toggle: (value: string, originalEvent?: Event) => void;\n  values: Readable<string[]>;\n};\n\nexport const CHECKBOX_GROUP_CTX = createContext<CheckboxGroupContext>('CheckboxGroupContext');\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type OreCheckboxGroupProps = {\n  /** Theme color — propagated to all child ore-checkbox elements */\n  color?: ThemeColor;\n  /** Disable all checkboxes in the group */\n  disabled?: boolean;\n  /** Error message shown below the group */\n  error?: string;\n  /** Helper text shown below the group */\n  helper?: string;\n  /** Legend / label for the fieldset. Required for accessibility. */\n  label?: string;\n  /** Form field name used during submission */\n  name?: string;\n  /** Layout direction of the checkbox options */\n  orientation?: 'vertical' | 'horizontal';\n  /** Mark the group as required */\n  required?: boolean;\n  /** Size — propagated to all child ore-checkbox elements */\n  size?: ComponentSize;\n  /** Comma-separated list of currently checked values */\n  values?: string;\n};\n\nexport type OreCheckboxGroupEvents = {\n  change: ChoiceChangeDetail;\n};\n\n/**\n * A fieldset wrapper that groups `ore-checkbox` elements, provides shared\n * `color` and `size` via context, and manages multi-value selection state.\n *\n * @element ore-checkbox-group\n *\n * @attr {string} label - Legend text (required for a11y)\n * @attr {string} values - Comma-separated list of checked values\n * @attr {boolean} disabled - Disable all checkboxes in the group\n * @attr {string} error - Error message\n * @attr {string} helper - Helper text\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when selection changes. detail: { value: string, values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-checkbox` elements here\n *\n * @cssprop --checkbox-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --checkbox-group-gap - Gap between checkbox items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-checkbox-group name=\"fruits\" label=\"Favourite fruits\" required>\n *   <ore-checkbox value=\"apple\">Apple</ore-checkbox>\n *   <ore-checkbox value=\"banana\">Banana</ore-checkbox>\n *   <ore-checkbox value=\"cherry\">Cherry</ore-checkbox>\n * </ore-checkbox-group>\n * <ore-checkbox-group name=\"options\" orientation=\"horizontal\" color=\"primary\">\n *   <ore-checkbox value=\"a\">Option A</ore-checkbox>\n *   <ore-checkbox value=\"b\">Option B</ore-checkbox>\n * </ore-checkbox-group>\n * ```\n */\nexport const CHECKBOX_GROUP_TAG = 'ore-checkbox-group' as const;\ndefine<OreCheckboxGroupProps>(CHECKBOX_GROUP_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string(),\n    name: prop.string(),\n    orientation: prop.string('vertical'),\n    required: prop.bool(false),\n    // Not auto-reflected (`reflect: false`) — the derived, interaction-updated selection\n    // (`choice.formValue`) is the single writer for this attribute, via `bind()` below;\n    // letting `prop.string()`'s own default reflection also write the raw incoming value\n    // would leave two effects racing to set the same attribute from different sources.\n    values: { ...prop.string(), reflect: false },\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCheckboxGroupEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const choice = createChoiceField({\n      disabled: props.disabled,\n      error: props.error,\n      helper: props.helper,\n      multiple: signal(true),\n      prefix: 'checkbox-group',\n      required: props.required,\n      signal: lifecycleSignal(onCleanup),\n      value: props.values,\n    });\n\n    choice.attachFormField(\n      useField<string>({\n        disabled: choice.disabled,\n        onReset: choice.reset,\n        toFormValue: (v) => v,\n        validationMessage: choice.validationMessage,\n        validity: choice.validity,\n        value: choice.formValue,\n      }),\n    );\n\n    const checkedValues = choice.selectedValues;\n\n    const getCheckboxes = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-checkbox');\n    const getLabelForValue = (value: string): string => getChoiceLabel(getCheckboxes(), value);\n    const emitChange = (originalEvent?: Event) => {\n      const values = checkedValues.value;\n\n      const labels = values.map(getLabelForValue);\n\n      emit('change', { labels, originalEvent, values });\n    };\n\n    const toggleCheckbox = (val: string, originalEvent?: Event) => {\n      choice.toggleValue(val);\n      choice.triggerValidation('change');\n      emitChange(originalEvent);\n    };\n\n    provide(CHECKBOX_GROUP_CTX, {\n      color: props.color,\n      disabled: computed(() => Boolean(props.disabled.value)),\n      size: props.size,\n      toggle: toggleCheckbox,\n      values: checkedValues,\n    });\n\n    // Sync checked state + color/size/disabled onto slotted ore-checkbox children\n    const syncChildren = () => {\n      const values = checkedValues.value;\n      const color = props.color.value;\n      const size = props.size.value;\n      const disabled = props.disabled.value;\n      const checkboxes = getCheckboxes();\n\n      for (const checkbox of checkboxes) {\n        const val = checkbox.getAttribute('value') ?? '';\n\n        checkbox.toggleAttribute('checked', values.includes(val));\n\n        if (color) checkbox.setAttribute('color', color);\n        else checkbox.removeAttribute('color');\n\n        if (size) checkbox.setAttribute('size', size);\n        else checkbox.removeAttribute('size');\n\n        checkbox.toggleAttribute('disabled', Boolean(disabled));\n      }\n    };\n\n    watch(() => {\n      void slots.elements().value;\n      syncChildren();\n    });\n\n    watch(() => {\n      void slots.elements().value;\n\n      const listeners = getCheckboxes().map((checkbox) => {\n        const handler = (event: Event) => {\n          event.stopPropagation();\n\n          const val = (checkbox.getAttribute('value') ?? '').trim();\n\n          if (!val) return;\n\n          toggleCheckbox(val, event);\n        };\n\n        checkbox.addEventListener('change', handler);\n\n        return () => {\n          checkbox.removeEventListener('change', handler);\n        };\n      });\n\n      return () => {\n        for (const dispose of listeners) dispose();\n      };\n    });\n\n    const legendId = createId('checkbox-group-legend');\n    const errorId = `${legendId}-error`;\n    const helperId = `${legendId}-helper`;\n    const hasError = () => Boolean(props.error.value);\n    const hasHelper = () => Boolean(props.helper.value) && !hasError();\n\n    // Reactive, not a one-off `el.setAttribute()` inside the click handler: the host's `values`\n    // attribute must stay in sync with the selection regardless of *why* it changed (a click,\n    // or `reset()` on ancestor form reset — neither of which should need its own copy of this).\n    bind({ attr: { size: props.size, values: choice.formValue } });\n\n    return html`\n      <fieldset\n        role=\"group\"\n        aria-required=\"${() => String(Boolean(props.required.value))}\"\n        aria-invalid=\"${() => String(hasError())}\"\n        aria-errormessage=\"${() => (hasError() ? errorId : null)}\"\n        aria-describedby=\"${() => (hasError() ? errorId : hasHelper() ? helperId : null)}\">\n        <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n          ${props.label}${when(\n            () => Boolean(props.required.value),\n            () => html`\n              <span aria-hidden=\"true\">*</span>\n            `,\n          )}\n        </legend>\n        <div class=\"checkbox-group-items\" part=\"items\">\n          <slot></slot>\n        </div>\n        <div class=\"error-text\" id=\"${errorId}\" role=\"alert\" ?hidden=${() => !hasError()}>${props.error}</div>\n        <div class=\"helper-text\" id=\"${helperId}\" ?hidden=${() => !hasHelper()}>${props.helper}</div>\n      </fieldset>\n    `;\n  },\n  styles: [disabledStateMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/checkbox-group.js

@@ -4,7 +4,7 @@ import { getChoiceLabel as n, getLightChildrenByTag as r } from "./core/light-do
 import { lifecycleSignal as i } from "./core/ore.js";
 import { disablableBundle as a, sizableBundle as o, themableBundle as s } from "./shared/prop-bundles.js";
 import c from "./inputs/checkbox-group/checkbox-group.css.js";
-import { bind as l, createContext as u, createStableId as d, define as f, getHost as p, html as m, onCleanup as h, prop as g, provide as _, useEmit as v, useField as y, useSlots as b, watchEffect as x, when as S } from "@vielzeug/ore";
+import { bind as l, createContext as u, createId as d, define as f, getHost as p, html as m, onCleanup as h, prop as g, provide as _, useEmit as v, useField as y, useSlots as b, watchEffect as x, when as S } from "@vielzeug/ore";
 import { computed as C, signal as w } from "@vielzeug/ripple";
 //#region src/inputs/checkbox-group/checkbox-group.ts
 var T = u("CheckboxGroupContext"), E = "ore-checkbox-group";

package/dist/checkbox-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.js","names":[],"sources":["../src/inputs/checkbox-group/checkbox-group.ts"],"sourcesContent":["import {\n  bind,\n  createContext,\n  createStableId,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  prop,\n  provide,\n  useEmit,\n  useField,\n  useSlots,\n  watchEffect,\n  when,\n} from '@vielzeug/ore';\nimport { computed, type Readable, signal } from '@vielzeug/ripple';\nimport {\n  type ChoiceChangeDetail,\n  createChoiceField,\n  getChoiceLabel,\n  getLightChildrenByTag,\n  lifecycleSignal,\n} from '../../core';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { disabledStateMixin } from '../../styles';\nimport type { ComponentSize, ThemeColor } from '../../types';\nimport componentStyles from './checkbox-group.css?inline';\n\n// ─── Context ──────────────────────────────────────────────────────────────────\n\nexport type CheckboxGroupContext = {\n  color: Readable<ThemeColor | undefined>;\n  disabled: Readable<boolean>;\n  size: Readable<ComponentSize | undefined>;\n  toggle: (value: string, originalEvent?: Event) => void;\n  values: Readable<string[]>;\n};\n\nexport const CHECKBOX_GROUP_CTX = createContext<CheckboxGroupContext>('CheckboxGroupContext');\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type OreCheckboxGroupProps = {\n  /** Theme color — propagated to all child ore-checkbox elements */\n  color?: ThemeColor;\n  /** Disable all checkboxes in the group */\n  disabled?: boolean;\n  /** Error message shown below the group */\n  error?: string;\n  /** Helper text shown below the group */\n  helper?: string;\n  /** Legend / label for the fieldset. Required for accessibility. */\n  label?: string;\n  /** Form field name used during submission */\n  name?: string;\n  /** Layout direction of the checkbox options */\n  orientation?: 'vertical' | 'horizontal';\n  /** Mark the group as required */\n  required?: boolean;\n  /** Size — propagated to all child ore-checkbox elements */\n  size?: ComponentSize;\n  /** Comma-separated list of currently checked values */\n  values?: string;\n};\n\nexport type OreCheckboxGroupEvents = {\n  change: ChoiceChangeDetail;\n};\n\n/**\n * A fieldset wrapper that groups `ore-checkbox` elements, provides shared\n * `color` and `size` via context, and manages multi-value selection state.\n *\n * @element ore-checkbox-group\n *\n * @attr {string} label - Legend text (required for a11y)\n * @attr {string} values - Comma-separated list of checked values\n * @attr {boolean} disabled - Disable all checkboxes in the group\n * @attr {string} error - Error message\n * @attr {string} helper - Helper text\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when selection changes. detail: { value: string, values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-checkbox` elements here\n *\n * @cssprop --checkbox-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --checkbox-group-gap - Gap between checkbox items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-checkbox-group name=\"fruits\" label=\"Favourite fruits\" required>\n *   <ore-checkbox value=\"apple\">Apple</ore-checkbox>\n *   <ore-checkbox value=\"banana\">Banana</ore-checkbox>\n *   <ore-checkbox value=\"cherry\">Cherry</ore-checkbox>\n * </ore-checkbox-group>\n * <ore-checkbox-group name=\"options\" orientation=\"horizontal\" color=\"primary\">\n *   <ore-checkbox value=\"a\">Option A</ore-checkbox>\n *   <ore-checkbox value=\"b\">Option B</ore-checkbox>\n * </ore-checkbox-group>\n * ```\n */\nexport const CHECKBOX_GROUP_TAG = 'ore-checkbox-group' as const;\ndefine<OreCheckboxGroupProps>(CHECKBOX_GROUP_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string(),\n    name: prop.string(),\n    orientation: prop.string('vertical'),\n    required: prop.bool(false),\n    // Not auto-reflected (`reflect: false`) — the derived, interaction-updated selection\n    // (`choice.formValue`) is the single writer for this attribute, via `bind()` below;\n    // letting `prop.string()`'s own default reflection also write the raw incoming value\n    // would leave two effects racing to set the same attribute from different sources.\n    values: { ...prop.string(), reflect: false },\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCheckboxGroupEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const choice = createChoiceField({\n      disabled: props.disabled,\n      error: props.error,\n      helper: props.helper,\n      multiple: signal(true),\n      prefix: 'checkbox-group',\n      required: props.required,\n      signal: lifecycleSignal(onCleanup),\n      value: props.values,\n    });\n\n    choice.attachFormField(\n      useField<string>({\n        disabled: choice.disabled,\n        onReset: choice.reset,\n        toFormValue: (v) => v,\n        validationMessage: choice.validationMessage,\n        validity: choice.validity,\n        value: choice.formValue,\n      }),\n    );\n\n    const checkedValues = choice.selectedValues;\n\n    const getCheckboxes = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-checkbox');\n    const getLabelForValue = (value: string): string => getChoiceLabel(getCheckboxes(), value);\n    const emitChange = (originalEvent?: Event) => {\n      const values = checkedValues.value;\n\n      const labels = values.map(getLabelForValue);\n\n      emit('change', { labels, originalEvent, values });\n    };\n\n    const toggleCheckbox = (val: string, originalEvent?: Event) => {\n      choice.toggleValue(val);\n      choice.triggerValidation('change');\n      emitChange(originalEvent);\n    };\n\n    provide(CHECKBOX_GROUP_CTX, {\n      color: props.color,\n      disabled: computed(() => Boolean(props.disabled.value)),\n      size: props.size,\n      toggle: toggleCheckbox,\n      values: checkedValues,\n    });\n\n    // Sync checked state + color/size/disabled onto slotted ore-checkbox children\n    const syncChildren = () => {\n      const values = checkedValues.value;\n      const color = props.color.value;\n      const size = props.size.value;\n      const disabled = props.disabled.value;\n      const checkboxes = getCheckboxes();\n\n      for (const checkbox of checkboxes) {\n        const val = checkbox.getAttribute('value') ?? '';\n\n        checkbox.toggleAttribute('checked', values.includes(val));\n\n        if (color) checkbox.setAttribute('color', color);\n        else checkbox.removeAttribute('color');\n\n        if (size) checkbox.setAttribute('size', size);\n        else checkbox.removeAttribute('size');\n\n        checkbox.toggleAttribute('disabled', Boolean(disabled));\n      }\n    };\n\n    watch(() => {\n      void slots.elements().value;\n      syncChildren();\n    });\n\n    watch(() => {\n      void slots.elements().value;\n\n      const listeners = getCheckboxes().map((checkbox) => {\n        const handler = (event: Event) => {\n          event.stopPropagation();\n\n          const val = (checkbox.getAttribute('value') ?? '').trim();\n\n          if (!val) return;\n\n          toggleCheckbox(val, event);\n        };\n\n        checkbox.addEventListener('change', handler);\n\n        return () => {\n          checkbox.removeEventListener('change', handler);\n        };\n      });\n\n      return () => {\n        for (const dispose of listeners) dispose();\n      };\n    });\n\n    const legendId = createStableId('checkbox-group-legend');\n    const errorId = `${legendId}-error`;\n    const helperId = `${legendId}-helper`;\n    const hasError = () => Boolean(props.error.value);\n    const hasHelper = () => Boolean(props.helper.value) && !hasError();\n\n    // Reactive, not a one-off `el.setAttribute()` inside the click handler: the host's `values`\n    // attribute must stay in sync with the selection regardless of *why* it changed (a click,\n    // or `reset()` on ancestor form reset — neither of which should need its own copy of this).\n    bind({ attr: { size: props.size, values: choice.formValue } });\n\n    return html`\n      <fieldset\n        role=\"group\"\n        aria-required=\"${() => String(Boolean(props.required.value))}\"\n        aria-invalid=\"${() => String(hasError())}\"\n        aria-errormessage=\"${() => (hasError() ? errorId : null)}\"\n        aria-describedby=\"${() => (hasError() ? errorId : hasHelper() ? helperId : null)}\">\n        <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n          ${props.label}${when(\n            () => Boolean(props.required.value),\n            () => html`\n              <span aria-hidden=\"true\">*</span>\n            `,\n          )}\n        </legend>\n        <div class=\"checkbox-group-items\" part=\"items\">\n          <slot></slot>\n        </div>\n        <div class=\"error-text\" id=\"${errorId}\" role=\"alert\" ?hidden=${() => !hasError()}>${props.error}</div>\n        <div class=\"helper-text\" id=\"${helperId}\" ?hidden=${() => !hasHelper()}>${props.helper}</div>\n      </fieldset>\n    `;\n  },\n  styles: [disabledStateMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"checkbox-group.js","names":[],"sources":["../src/inputs/checkbox-group/checkbox-group.ts"],"sourcesContent":["import {\n  bind,\n  createContext,\n  createId,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  prop,\n  provide,\n  useEmit,\n  useField,\n  useSlots,\n  watchEffect,\n  when,\n} from '@vielzeug/ore';\nimport { computed, type Readable, signal } from '@vielzeug/ripple';\nimport {\n  type ChoiceChangeDetail,\n  createChoiceField,\n  getChoiceLabel,\n  getLightChildrenByTag,\n  lifecycleSignal,\n} from '../../core';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { disabledStateMixin } from '../../styles';\nimport type { ComponentSize, ThemeColor } from '../../types';\nimport componentStyles from './checkbox-group.css?inline';\n\n// ─── Context ──────────────────────────────────────────────────────────────────\n\nexport type CheckboxGroupContext = {\n  color: Readable<ThemeColor | undefined>;\n  disabled: Readable<boolean>;\n  size: Readable<ComponentSize | undefined>;\n  toggle: (value: string, originalEvent?: Event) => void;\n  values: Readable<string[]>;\n};\n\nexport const CHECKBOX_GROUP_CTX = createContext<CheckboxGroupContext>('CheckboxGroupContext');\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type OreCheckboxGroupProps = {\n  /** Theme color — propagated to all child ore-checkbox elements */\n  color?: ThemeColor;\n  /** Disable all checkboxes in the group */\n  disabled?: boolean;\n  /** Error message shown below the group */\n  error?: string;\n  /** Helper text shown below the group */\n  helper?: string;\n  /** Legend / label for the fieldset. Required for accessibility. */\n  label?: string;\n  /** Form field name used during submission */\n  name?: string;\n  /** Layout direction of the checkbox options */\n  orientation?: 'vertical' | 'horizontal';\n  /** Mark the group as required */\n  required?: boolean;\n  /** Size — propagated to all child ore-checkbox elements */\n  size?: ComponentSize;\n  /** Comma-separated list of currently checked values */\n  values?: string;\n};\n\nexport type OreCheckboxGroupEvents = {\n  change: ChoiceChangeDetail;\n};\n\n/**\n * A fieldset wrapper that groups `ore-checkbox` elements, provides shared\n * `color` and `size` via context, and manages multi-value selection state.\n *\n * @element ore-checkbox-group\n *\n * @attr {string} label - Legend text (required for a11y)\n * @attr {string} values - Comma-separated list of checked values\n * @attr {boolean} disabled - Disable all checkboxes in the group\n * @attr {string} error - Error message\n * @attr {string} helper - Helper text\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when selection changes. detail: { value: string, values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-checkbox` elements here\n *\n * @cssprop --checkbox-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --checkbox-group-gap - Gap between checkbox items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-checkbox-group name=\"fruits\" label=\"Favourite fruits\" required>\n *   <ore-checkbox value=\"apple\">Apple</ore-checkbox>\n *   <ore-checkbox value=\"banana\">Banana</ore-checkbox>\n *   <ore-checkbox value=\"cherry\">Cherry</ore-checkbox>\n * </ore-checkbox-group>\n * <ore-checkbox-group name=\"options\" orientation=\"horizontal\" color=\"primary\">\n *   <ore-checkbox value=\"a\">Option A</ore-checkbox>\n *   <ore-checkbox value=\"b\">Option B</ore-checkbox>\n * </ore-checkbox-group>\n * ```\n */\nexport const CHECKBOX_GROUP_TAG = 'ore-checkbox-group' as const;\ndefine<OreCheckboxGroupProps>(CHECKBOX_GROUP_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string(),\n    name: prop.string(),\n    orientation: prop.string('vertical'),\n    required: prop.bool(false),\n    // Not auto-reflected (`reflect: false`) — the derived, interaction-updated selection\n    // (`choice.formValue`) is the single writer for this attribute, via `bind()` below;\n    // letting `prop.string()`'s own default reflection also write the raw incoming value\n    // would leave two effects racing to set the same attribute from different sources.\n    values: { ...prop.string(), reflect: false },\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCheckboxGroupEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const choice = createChoiceField({\n      disabled: props.disabled,\n      error: props.error,\n      helper: props.helper,\n      multiple: signal(true),\n      prefix: 'checkbox-group',\n      required: props.required,\n      signal: lifecycleSignal(onCleanup),\n      value: props.values,\n    });\n\n    choice.attachFormField(\n      useField<string>({\n        disabled: choice.disabled,\n        onReset: choice.reset,\n        toFormValue: (v) => v,\n        validationMessage: choice.validationMessage,\n        validity: choice.validity,\n        value: choice.formValue,\n      }),\n    );\n\n    const checkedValues = choice.selectedValues;\n\n    const getCheckboxes = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-checkbox');\n    const getLabelForValue = (value: string): string => getChoiceLabel(getCheckboxes(), value);\n    const emitChange = (originalEvent?: Event) => {\n      const values = checkedValues.value;\n\n      const labels = values.map(getLabelForValue);\n\n      emit('change', { labels, originalEvent, values });\n    };\n\n    const toggleCheckbox = (val: string, originalEvent?: Event) => {\n      choice.toggleValue(val);\n      choice.triggerValidation('change');\n      emitChange(originalEvent);\n    };\n\n    provide(CHECKBOX_GROUP_CTX, {\n      color: props.color,\n      disabled: computed(() => Boolean(props.disabled.value)),\n      size: props.size,\n      toggle: toggleCheckbox,\n      values: checkedValues,\n    });\n\n    // Sync checked state + color/size/disabled onto slotted ore-checkbox children\n    const syncChildren = () => {\n      const values = checkedValues.value;\n      const color = props.color.value;\n      const size = props.size.value;\n      const disabled = props.disabled.value;\n      const checkboxes = getCheckboxes();\n\n      for (const checkbox of checkboxes) {\n        const val = checkbox.getAttribute('value') ?? '';\n\n        checkbox.toggleAttribute('checked', values.includes(val));\n\n        if (color) checkbox.setAttribute('color', color);\n        else checkbox.removeAttribute('color');\n\n        if (size) checkbox.setAttribute('size', size);\n        else checkbox.removeAttribute('size');\n\n        checkbox.toggleAttribute('disabled', Boolean(disabled));\n      }\n    };\n\n    watch(() => {\n      void slots.elements().value;\n      syncChildren();\n    });\n\n    watch(() => {\n      void slots.elements().value;\n\n      const listeners = getCheckboxes().map((checkbox) => {\n        const handler = (event: Event) => {\n          event.stopPropagation();\n\n          const val = (checkbox.getAttribute('value') ?? '').trim();\n\n          if (!val) return;\n\n          toggleCheckbox(val, event);\n        };\n\n        checkbox.addEventListener('change', handler);\n\n        return () => {\n          checkbox.removeEventListener('change', handler);\n        };\n      });\n\n      return () => {\n        for (const dispose of listeners) dispose();\n      };\n    });\n\n    const legendId = createId('checkbox-group-legend');\n    const errorId = `${legendId}-error`;\n    const helperId = `${legendId}-helper`;\n    const hasError = () => Boolean(props.error.value);\n    const hasHelper = () => Boolean(props.helper.value) && !hasError();\n\n    // Reactive, not a one-off `el.setAttribute()` inside the click handler: the host's `values`\n    // attribute must stay in sync with the selection regardless of *why* it changed (a click,\n    // or `reset()` on ancestor form reset — neither of which should need its own copy of this).\n    bind({ attr: { size: props.size, values: choice.formValue } });\n\n    return html`\n      <fieldset\n        role=\"group\"\n        aria-required=\"${() => String(Boolean(props.required.value))}\"\n        aria-invalid=\"${() => String(hasError())}\"\n        aria-errormessage=\"${() => (hasError() ? errorId : null)}\"\n        aria-describedby=\"${() => (hasError() ? errorId : hasHelper() ? helperId : null)}\">\n        <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n          ${props.label}${when(\n            () => Boolean(props.required.value),\n            () => html`\n              <span aria-hidden=\"true\">*</span>\n            `,\n          )}\n        </legend>\n        <div class=\"checkbox-group-items\" part=\"items\">\n          <slot></slot>\n        </div>\n        <div class=\"error-text\" id=\"${errorId}\" role=\"alert\" ?hidden=${() => !hasError()}>${props.error}</div>\n        <div class=\"helper-text\" id=\"${helperId}\" ?hidden=${() => !hasHelper()}>${props.helper}</div>\n      </fieldset>\n    `;\n  },\n  styles: [disabledStateMixin, componentStyles],\n});\n"],"mappings":";;;;;;;;;AAuCA,IAAa,IAAqB,EAAoC,sBAAsB,GAoE/E,IAAqB;AAClC,EAA8B,GAAoB;CAChD,gBAAgB;CAChB,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,OAAO,EAAK,OAAO;EACnB,QAAQ,EAAK,OAAO;EACpB,OAAO,EAAK,OAAO;EACnB,MAAM,EAAK,OAAO;EAClB,aAAa,EAAK,OAAO,UAAU;EACnC,UAAU,EAAK,KAAK,EAAK;EAKzB,QAAQ;GAAE,GAAG,EAAK,OAAO;GAAG,SAAS;EAAM;CAC7C;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAAgC,GACvC,IAAQ,EAAS,GACjB,IAAQ,GAER,IAAS,EAAkB;GAC/B,UAAU,EAAM;GAChB,OAAO,EAAM;GACb,QAAQ,EAAM;GACd,UAAU,EAAO,EAAI;GACrB,QAAQ;GACR,UAAU,EAAM;GAChB,QAAQ,EAAgB,CAAS;GACjC,OAAO,EAAM;EACf,CAAC;EAED,EAAO,gBACL,EAAiB;GACf,UAAU,EAAO;GACjB,SAAS,EAAO;GAChB,cAAc,MAAM;GACpB,mBAAmB,EAAO;GAC1B,UAAU,EAAO;GACjB,OAAO,EAAO;EAChB,CAAC,CACH;EAEA,IAAM,IAAgB,EAAO,gBAEvB,UAAqC,EAAsB,GAAI,cAAc,GAC7E,KAAoB,MAA0B,EAAe,EAAc,GAAG,CAAK,GACnF,KAAc,MAA0B;GAC5C,IAAM,IAAS,EAAc,OAEvB,IAAS,EAAO,IAAI,CAAgB;GAE1C,EAAK,UAAU;IAAE;IAAQ;IAAe;GAAO,CAAC;EAClD,GAEM,KAAkB,GAAa,MAA0B;GAG7D,AAFA,EAAO,YAAY,CAAG,GACtB,EAAO,kBAAkB,QAAQ,GACjC,EAAW,CAAa;EAC1B;EAEA,EAAQ,GAAoB;GAC1B,OAAO,EAAM;GACb,UAAU,QAAe,EAAQ,EAAM,SAAS,KAAM;GACtD,MAAM,EAAM;GACZ,QAAQ;GACR,QAAQ;EACV,CAAC;EAGD,IAAM,UAAqB;GACzB,IAAM,IAAS,EAAc,OACvB,IAAQ,EAAM,MAAM,OACpB,IAAO,EAAM,KAAK,OAClB,IAAW,EAAM,SAAS,OAC1B,IAAa,EAAc;GAEjC,KAAK,IAAM,KAAY,GAAY;IACjC,IAAM,IAAM,EAAS,aAAa,OAAO,KAAK;IAU9C,AARA,EAAS,gBAAgB,WAAW,EAAO,SAAS,CAAG,CAAC,GAEpD,IAAO,EAAS,aAAa,SAAS,CAAK,IAC1C,EAAS,gBAAgB,OAAO,GAEjC,IAAM,EAAS,aAAa,QAAQ,CAAI,IACvC,EAAS,gBAAgB,MAAM,GAEpC,EAAS,gBAAgB,YAAY,EAAQ,CAAS;GACxD;EACF;EAOA,AALA,QAAY;GAEV,AADA,EAAW,SAAS,CAAC,CAAC,OACtB,EAAa;EACf,CAAC,GAED,QAAY;GACV,EAAW,SAAS,CAAC,CAAC;GAEtB,IAAM,IAAY,EAAc,CAAC,CAAC,KAAK,MAAa;IAClD,IAAM,KAAW,MAAiB;KAChC,EAAM,gBAAgB;KAEtB,IAAM,KAAO,EAAS,aAAa,OAAO,KAAK,GAAA,CAAI,KAAK;KAEnD,KAEL,EAAe,GAAK,CAAK;IAC3B;IAIA,OAFA,EAAS,iBAAiB,UAAU,CAAO,SAE9B;KACX,EAAS,oBAAoB,UAAU,CAAO;IAChD;GACF,CAAC;GAED,aAAa;IACX,KAAK,IAAM,KAAW,GAAW,EAAQ;GAC3C;EACF,CAAC;EAED,IAAM,IAAW,EAAS,uBAAuB,GAC3C,IAAU,GAAG,EAAS,SACtB,IAAW,GAAG,EAAS,UACvB,UAAiB,EAAQ,EAAM,MAAM,OACrC,UAAkB,EAAQ,EAAM,OAAO,SAAU,CAAC,EAAS;EAOjE,OAFA,EAAK,EAAE,MAAM;GAAE,MAAM,EAAM;GAAM,QAAQ,EAAO;EAAU,EAAE,CAAC,GAEtD,CAAI;;;+BAGgB,OAAO,EAAQ,EAAM,SAAS,KAAM,EAAE;8BACvC,OAAO,EAAS,CAAC,EAAE;mCACb,EAAS,IAAI,IAAU,KAAM;kCAC9B,EAAS,IAAI,IAAU,EAAU,IAAI,IAAW,KAAM;sBACnE,EAAS,kBAAkB,CAAC,EAAM,MAAM,MAAM;YACxD,EAAM,QAAQ,QACR,EAAQ,EAAM,SAAS,aACvB,CAAI;;aAGZ,EAAE;;;;;sCAK0B,EAAQ,+BAA+B,CAAC,EAAS,EAAE,GAAG,EAAM,MAAM;uCACjE,EAAS,kBAAkB,CAAC,EAAU,EAAE,GAAG,EAAM,OAAO;;;CAG7F;CACA,QAAQ,CAAC,GAAoB,CAAe;AAC9C,CAAC"}

package/dist/combobox.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./core/keyboard.cjs"),i=require("./core/choice-field.cjs"),a=require("./core/ore.cjs"),ee=require("./core/option-list.cjs"),o=require("./inputs/shared/native-field-event.cjs"),s=require("./inputs/combobox/combobox-options.cjs"),c=require("./inputs/combobox/combobox.css.cjs");let l=require("@vielzeug/ore"),u=require("@vielzeug/ripple");var d=`ore-combobox`;(0,l.define)(d,{formAssociated:!0,props:{autoclose:l.prop.bool(!1),color:l.prop.string(),creatable:l.prop.bool(!1),disabled:l.prop.bool(!1),error:l.prop.string(),fullwidth:l.prop.bool(!1),helper:l.prop.string(),"hide-label":l.prop.bool(!1),label:l.prop.string(),"label-placement":l.prop.oneOf([`inset`,`outside`],`inset`),loading:l.prop.bool(!1),multiple:l.prop.bool(!1),name:l.prop.string(),"no-filter":l.prop.bool(!1),options:l.prop.data(),placeholder:l.prop.string(`Select...`),required:l.prop.bool(!1),rounded:l.prop.string(),size:l.prop.string(),success:l.prop.bool(!1),value:l.prop.string(),variant:l.prop.string()},setup(e){let t=(0,l.getHost)(),n=(0,l.useEmit)(),c=l.watchEffect,d=(0,u.signal)(``),f=null,p=null,m=null,h=null,g=(0,l.ref)(),_=a.lifecycleSignal(l.onCleanup),v=i.createChoiceField({disabled:e.disabled,error:e.error,helper:e.helper,label:e.label,labelPlacement:e[`label-placement`],multiple:e.multiple,prefix:`combobox`,required:e.required,signal:_,value:e.value}),y=(0,u.signal)([]),b=ee.createListboxDropdown({getBoundary:()=>t,getFocusedOptionElement:()=>m?.querySelector(`[data-focused]`)??null,getItems:()=>y.value,getOptionId:e=>`${v.fieldId}-opt-${e}`,getPanel:()=>m,getReference:()=>p,getTrigger:()=>f,isDisabled:()=>v.disabled.value,isItemDisabled:e=>e.disabled,onClose:e=>{n(`open-change`,{open:!1,reason:e}),_.aborted||se(),v.triggerValidation(`blur`)},onOpen:e=>n(`open-change`,{open:!0,reason:e}),restoreFocus:!1,signal:_}),{disabled:x,fieldId:S,selectedValues:C,triggerValidation:w}=v;v.attachFormField((0,l.useField)({disabled:v.disabled,onReset:v.reset,toFormValue:e=>e,validationMessage:v.validationMessage,validity:v.validity,value:v.formValue}));let{focusedIndex:T,isOpen:E,scrollFocusedIntoView:te,updatePosition:ne}=b,D=()=>!!e.multiple.value,O=()=>!!e.creatable.value,k=()=>!!e[`no-filter`].value;(0,l.bind)({attr:{open:()=>E.value?!0:void 0,size:e.size,variant:e.variant}});let A=null,j=!1,M=(0,u.computed)(()=>C.value[0]??``);Object.defineProperty(t,"value",{configurable:!0,get:()=>v.formValue.value,set:e=>{let t=e;if(Array.isArray(t)){v.setValues(t.map(e=>String(e??``)));return}if(t==null||t===``){v.clear();return}v.setValues(D()?String(t).split(`,`):[String(t)])}});let re=()=>C.value.length>0;function N(){f?.focus()}let P=(0,u.signal)([]),F=(0,u.signal)([]),ie=()=>!!e.loading.value;function I(e){return{disabled:!!e.disabled,disabledReason:e.disabledReason,iconEl:e.iconEl??null,label:e.label??e.value,value:e.value}}let L=(0,u.computed)(()=>{let t=e.options.value,n=Array.isArray(t)?t.map(I):P.value;return F.value.length===0?n:[...n,...F.value]}),R={clear:()=>{v.clear()},remove:e=>{v.removeValue(e)},select:e=>{v.selectValue(e)},toggle:e=>{v.toggleValue(e)}};function z(e=Array.from(t.children)){if(P.value=s.parseSlottedOptions(e),!D()){let e=L.value.find(e=>e.value===M.value);d.value=e?.label??M.value}}z(),c(()=>{let e=s.filterOptions(L.value,d.value,k());y.value=D()?e.filter(e=>!C.value.includes(e.value)):e});let B=(0,u.computed)(()=>s.getCreatableLabel(d.value,O(),y.value)),ae=()=>D()&&C.value.length>0?``:e.placeholder.value||``;function V(){o.dispatchNativeFieldEvent(t,`input`),o.dispatchNativeFieldEvent(t,`change`)}function oe(e){e.stopPropagation();let t=e.detail?.value;t!==void 0&&(R.remove(t),V(),w(`change`))}function se(){if(!D()){let e=L.value.find(e=>e.value===M.value);j=!0,d.value=e?.label??``,Promise.resolve().then(()=>{j=!1});return}d.value=``}c(()=>{if(E.value&&!D()&&M.value&&T.value===-1&&d.value===``){let e=y.value.findIndex(e=>e.value===M.value);e>=0&&b.set(e)}});function H(e=!0,t=`programmatic`){if(e&&(A=d.value,d.value=``),!D()&&M.value){let e=s.filterOptions(L.value,``,k()).findIndex(e=>e.value===M.value);e>=0&&b.set(e)}b.open(t),!D()&&M.value&&T.value>=0&&requestAnimationFrame(()=>{te()})}function U(e=`programmatic`){b.close(e)}let ce=r.createInteraction({disabled:x,onPress:()=>{E.value||H(!0,`click`),N()}}),le=r.createInteraction({disabled:x,keys:[`Enter`],onPress:e=>{let t=y.value;E.value&&T.value>=0&&T.value<t.length?W(t[T.value],e):E.value&&T.value===-1&&B.value?Y(d.value,e):E.value||H(!0,`keyboard`)}});function W(t,n){t.disabled||(D()?(R.toggle(t.value),d.value=``,V(),w(`change`),e.autoclose.value&&U(),N(),requestAnimationFrame(()=>N())):(R.select(t.value),d.value=t.label,V(),w(`change`),U(),N()))}function G(e){let t=e.getAttribute(`data-option-index`),n=t?Number(t):-1;if(Number.isInteger(n)&&n>=0&&n<y.value.length)return y.value[n]??null;let r=e.getAttribute(`data-option-value`);if(r){let e=y.value.find(e=>e.value===r);if(e)return e}let i=e.querySelector(`span`)?.textContent?.trim()??e.textContent?.trim()??``;return i?y.value.find(e=>e.label===i||e.value===i)??null:null}function ue(e){e.stopPropagation(),R.clear(),d.value=``,V(),w(`change`),N()}function K(e){let t=e.target,r=t.value;if(!j&&r!==d.value){if(d.value=r,!D()){let e=C.value[0],t=e?L.value.find(t=>t.value===e)?.label??e:``;r===``&&A===t&&(A=null)}b.navigate(`first`),E.value||H(!1,`keyboard`),n(`search`,{query:t.value})}}function q(){}function J(e){if(!x.value&&!b.handleKeydown(e))switch(e.key){case`ArrowDown`:e.preventDefault(),E.value?b.navigate(`next`):(H(!0,`keyboard`),b.navigate(`first`));break;case`ArrowUp`:e.preventDefault(),E.value?b.navigate(`prev`):H(!0,`keyboard`);break;case`Backspace`:D()&&!d.value&&C.value.length>0&&(v.removeValue(C.value[C.value.length-1]??``),V(),w(`change`));break;case`Enter`:le.handleKeydown(e);break;case`Tab`:U(`programmatic`)}}function Y(e,t){let n=e.trim();if(!n)return;let r={disabled:!1,iconEl:null,label:n,value:s.makeCreatableValue(n)};F.value=[...F.value,r],W(r,t)}let de=(()=>{let e=new MutationObserver(()=>{z()});return e.observe(t,{attributeFilter:[`disabled`,`disabled-reason`,`label`,`value`],attributes:!0,childList:!0,subtree:!0}),()=>e.disconnect()})(),X=e=>{let t=e=>{let t=e.target;if(!(t instanceof Element))return;if(t.closest(`.no-results-create`)){e.preventDefault(),e.stopPropagation(),Y(d.value,e);return}let n=t.closest(`.option`);if(!n)return;e.preventDefault(),e.stopPropagation();let r=G(n);r&&!r.disabled&&W(r,e)},n=e=>{let t=e.target;if(!(t instanceof Element))return;let n=t.closest(`.option`);if(!n)return;let r=G(n);if(!r)return;let i=y.value.findIndex(e=>e.value===r.value);i>=0&&b.set(i)};return e.addEventListener(`click`,t),e.addEventListener(`pointermove`,n),()=>{e.removeEventListener(`click`,t),e.removeEventListener(`pointermove`,n)}},Z=null,Q=null,fe=e=>{h=e,Q!==e&&(Z?.(),Z=null,Q=null,e&&(Z=X(e),Q=e))},pe=()=>{h&&(Q===h&&Z||(Z?.(),Z=X(h),Q=h))};c(()=>{pe(),E.value?(m&&`showPopover`in m&&!m.matches(`:popover-open`)&&m.showPopover(),ne()):m&&`hidePopover`in m&&m.matches(`:popover-open`)&&m.hidePopover()}),(0,l.onElement)(g,e=>{p=e;let t=e.shadowRoot?.querySelector(`input`)??null;if(!t)return;f=t,t.setAttribute(`role`,`combobox`),t.setAttribute(`autocomplete`,`off`),t.setAttribute(`aria-autocomplete`,`list`),t.setAttribute(`aria-haspopup`,`listbox`),t.setAttribute(`spellcheck`,`false`),t.setAttribute(`aria-controls`,`${S}-listbox`);let n=()=>{E.value||H(!0,`click`),N()};return t.addEventListener(`input`,K),t.addEventListener(`keydown`,J),t.addEventListener(`focus`,q),t.addEventListener(`click`,n),()=>{f=null,p=null,t.removeEventListener(`input`,K),t.removeEventListener(`keydown`,J),t.removeEventListener(`focus`,q),t.removeEventListener(`click`,n)}}),c(()=>{if(!g.value)return;let t=f;t&&(t.setAttribute(`aria-expanded`,String(E.value)),x.value?t.setAttribute(`aria-disabled`,`true`):t.removeAttribute(`aria-disabled`),e.error.value?(t.setAttribute(`aria-invalid`,`true`),t.setAttribute(`aria-errormessage`,`${S}-error`)):(t.removeAttribute(`aria-invalid`),t.removeAttribute(`aria-errormessage`)))}),c(()=>{if(!g.value)return;let e=f;e&&e.value!==d.value&&(e.value=d.value)}),(0,l.onCleanup)(()=>{Z?.(),Z=null,Q=null,de()});let $=()=>e[`hide-label`].value;return l.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./core/keyboard.cjs"),i=require("./core/choice-field.cjs"),a=require("./core/ore.cjs"),ee=require("./core/option-list.cjs"),o=require("./inputs/shared/native-field-event.cjs"),s=require("./inputs/combobox/combobox-options.cjs"),c=require("./inputs/combobox/combobox.css.cjs");let l=require("@vielzeug/ore"),u=require("@vielzeug/ripple");var d=`ore-combobox-option`;(0,l.define)(d,{setup(){return l.html``}});var f=`ore-combobox`;(0,l.define)(f,{formAssociated:!0,props:{autoclose:l.prop.bool(!1),color:l.prop.string(),creatable:l.prop.bool(!1),disabled:l.prop.bool(!1),error:l.prop.string(),fullwidth:l.prop.bool(!1),helper:l.prop.string(),"hide-label":l.prop.bool(!1),label:l.prop.string(),"label-placement":l.prop.oneOf([`inset`,`outside`],`inset`),loading:l.prop.bool(!1),multiple:l.prop.bool(!1),name:l.prop.string(),"no-filter":l.prop.bool(!1),options:l.prop.data(),placeholder:l.prop.string(`Select...`),required:l.prop.bool(!1),rounded:l.prop.string(),size:l.prop.string(),success:l.prop.bool(!1),value:l.prop.string(),variant:l.prop.string()},setup(e){let t=(0,l.getHost)(),n=(0,l.useEmit)(),c=l.watchEffect,d=(0,u.signal)(``),f=null,p=null,m=null,h=null,g=(0,l.ref)(),_=a.lifecycleSignal(l.onCleanup),v=i.createChoiceField({disabled:e.disabled,error:e.error,helper:e.helper,label:e.label,labelPlacement:e[`label-placement`],multiple:e.multiple,prefix:`combobox`,required:e.required,signal:_,value:e.value}),y=(0,u.signal)([]),b=ee.createListboxDropdown({getBoundary:()=>t,getFocusedOptionElement:()=>m?.querySelector(`[data-focused]`)??null,getItems:()=>y.value,getOptionId:e=>`${v.fieldId}-opt-${e}`,getPanel:()=>m,getReference:()=>p,getTrigger:()=>f,isDisabled:()=>v.disabled.value,isItemDisabled:e=>e.disabled,onClose:e=>{n(`open-change`,{open:!1,reason:e}),_.aborted||se(),v.triggerValidation(`blur`)},onOpen:e=>n(`open-change`,{open:!0,reason:e}),restoreFocus:!1,signal:_}),{disabled:x,fieldId:S,selectedValues:C,triggerValidation:w}=v;v.attachFormField((0,l.useField)({disabled:v.disabled,onReset:v.reset,toFormValue:e=>e,validationMessage:v.validationMessage,validity:v.validity,value:v.formValue}));let{focusedIndex:T,isOpen:E,scrollFocusedIntoView:te,updatePosition:ne}=b,D=()=>!!e.multiple.value,O=()=>!!e.creatable.value,k=()=>!!e[`no-filter`].value;(0,l.bind)({attr:{open:()=>E.value?!0:void 0,size:e.size,variant:e.variant}});let A=null,j=!1,M=(0,u.computed)(()=>C.value[0]??``);Object.defineProperty(t,"value",{configurable:!0,get:()=>v.formValue.value,set:e=>{let t=e;if(Array.isArray(t)){v.setValues(t.map(e=>String(e??``)));return}if(t==null||t===``){v.clear();return}v.setValues(D()?String(t).split(`,`):[String(t)])}});let re=()=>C.value.length>0;function N(){f?.focus()}let P=(0,u.signal)([]),F=(0,u.signal)([]),ie=()=>!!e.loading.value;function I(e){return{disabled:!!e.disabled,disabledReason:e.disabledReason,iconEl:e.iconEl??null,label:e.label??e.value,value:e.value}}let L=(0,u.computed)(()=>{let t=e.options.value,n=Array.isArray(t)?t.map(I):P.value;return F.value.length===0?n:[...n,...F.value]}),R={clear:()=>{v.clear()},remove:e=>{v.removeValue(e)},select:e=>{v.selectValue(e)},toggle:e=>{v.toggleValue(e)}};function z(e=Array.from(t.children)){if(P.value=s.parseSlottedOptions(e),!D()){let e=L.value.find(e=>e.value===M.value);d.value=e?.label??M.value}}z(),c(()=>{let e=s.filterOptions(L.value,d.value,k());y.value=D()?e.filter(e=>!C.value.includes(e.value)):e});let B=(0,u.computed)(()=>s.getCreatableLabel(d.value,O(),y.value)),ae=()=>D()&&C.value.length>0?``:e.placeholder.value||``;function V(){o.dispatchNativeFieldEvent(t,`input`),o.dispatchNativeFieldEvent(t,`change`)}function oe(e){e.stopPropagation();let t=e.detail?.value;t!==void 0&&(R.remove(t),V(),w(`change`))}function se(){if(!D()){let e=L.value.find(e=>e.value===M.value);j=!0,d.value=e?.label??``,Promise.resolve().then(()=>{j=!1});return}d.value=``}c(()=>{if(E.value&&!D()&&M.value&&T.value===-1&&d.value===``){let e=y.value.findIndex(e=>e.value===M.value);e>=0&&b.set(e)}});function H(e=!0,t=`programmatic`){if(e&&(A=d.value,d.value=``),!D()&&M.value){let e=s.filterOptions(L.value,``,k()).findIndex(e=>e.value===M.value);e>=0&&b.set(e)}b.open(t),!D()&&M.value&&T.value>=0&&requestAnimationFrame(()=>{te()})}function U(e=`programmatic`){b.close(e)}let ce=r.createInteraction({disabled:x,onPress:()=>{E.value||H(!0,`click`),N()}}),le=r.createInteraction({disabled:x,keys:[`Enter`],onPress:e=>{let t=y.value;E.value&&T.value>=0&&T.value<t.length?W(t[T.value],e):E.value&&T.value===-1&&B.value?Y(d.value,e):E.value||H(!0,`keyboard`)}});function W(t,n){t.disabled||(D()?(R.toggle(t.value),d.value=``,V(),w(`change`),e.autoclose.value&&U(),N(),requestAnimationFrame(()=>N())):(R.select(t.value),d.value=t.label,V(),w(`change`),U(),N()))}function G(e){let t=e.getAttribute(`data-option-index`),n=t?Number(t):-1;if(Number.isInteger(n)&&n>=0&&n<y.value.length)return y.value[n]??null;let r=e.getAttribute(`data-option-value`);if(r){let e=y.value.find(e=>e.value===r);if(e)return e}let i=e.querySelector(`span`)?.textContent?.trim()??e.textContent?.trim()??``;return i?y.value.find(e=>e.label===i||e.value===i)??null:null}function ue(e){e.stopPropagation(),R.clear(),d.value=``,V(),w(`change`),N()}function K(e){let t=e.target,r=t.value;if(!j&&r!==d.value){if(d.value=r,!D()){let e=C.value[0],t=e?L.value.find(t=>t.value===e)?.label??e:``;r===``&&A===t&&(A=null)}b.navigate(`first`),E.value||H(!1,`keyboard`),n(`search`,{query:t.value})}}function q(){}function J(e){if(!x.value&&!b.handleKeydown(e))switch(e.key){case`ArrowDown`:e.preventDefault(),E.value?b.navigate(`next`):(H(!0,`keyboard`),b.navigate(`first`));break;case`ArrowUp`:e.preventDefault(),E.value?b.navigate(`prev`):H(!0,`keyboard`);break;case`Backspace`:D()&&!d.value&&C.value.length>0&&(v.removeValue(C.value[C.value.length-1]??``),V(),w(`change`));break;case`Enter`:le.handleKeydown(e);break;case`Tab`:U(`programmatic`)}}function Y(e,t){let n=e.trim();if(!n)return;let r={disabled:!1,iconEl:null,label:n,value:s.makeCreatableValue(n)};F.value=[...F.value,r],W(r,t)}let de=(()=>{let e=new MutationObserver(()=>{z()});return e.observe(t,{attributeFilter:[`disabled`,`disabled-reason`,`label`,`value`],attributes:!0,childList:!0,subtree:!0}),()=>e.disconnect()})(),X=e=>{let t=e=>{let t=e.target;if(!(t instanceof Element))return;if(t.closest(`.no-results-create`)){e.preventDefault(),e.stopPropagation(),Y(d.value,e);return}let n=t.closest(`.option`);if(!n)return;e.preventDefault(),e.stopPropagation();let r=G(n);r&&!r.disabled&&W(r,e)},n=e=>{let t=e.target;if(!(t instanceof Element))return;let n=t.closest(`.option`);if(!n)return;let r=G(n);if(!r)return;let i=y.value.findIndex(e=>e.value===r.value);i>=0&&b.set(i)};return e.addEventListener(`click`,t),e.addEventListener(`pointermove`,n),()=>{e.removeEventListener(`click`,t),e.removeEventListener(`pointermove`,n)}},Z=null,Q=null,fe=e=>{h=e,Q!==e&&(Z?.(),Z=null,Q=null,e&&(Z=X(e),Q=e))},pe=()=>{h&&(Q===h&&Z||(Z?.(),Z=X(h),Q=h))};c(()=>{pe(),E.value?(m&&`showPopover`in m&&!m.matches(`:popover-open`)&&m.showPopover(),ne()):m&&`hidePopover`in m&&m.matches(`:popover-open`)&&m.hidePopover()}),(0,l.onElement)(g,e=>{p=e;let t=e.shadowRoot?.querySelector(`input`)??null;if(!t)return;f=t,t.setAttribute(`role`,`combobox`),t.setAttribute(`autocomplete`,`off`),t.setAttribute(`aria-autocomplete`,`list`),t.setAttribute(`aria-haspopup`,`listbox`),t.setAttribute(`spellcheck`,`false`),t.setAttribute(`aria-controls`,`${S}-listbox`);let n=()=>{E.value||H(!0,`click`),N()};return t.addEventListener(`input`,K),t.addEventListener(`keydown`,J),t.addEventListener(`focus`,q),t.addEventListener(`click`,n),()=>{f=null,p=null,t.removeEventListener(`input`,K),t.removeEventListener(`keydown`,J),t.removeEventListener(`focus`,q),t.removeEventListener(`click`,n)}}),c(()=>{if(!g.value)return;let t=f;t&&(t.setAttribute(`aria-expanded`,String(E.value)),x.value?t.setAttribute(`aria-disabled`,`true`):t.removeAttribute(`aria-disabled`),e.error.value?(t.setAttribute(`aria-invalid`,`true`),t.setAttribute(`aria-errormessage`,`${S}-error`)):(t.removeAttribute(`aria-invalid`),t.removeAttribute(`aria-errormessage`)))}),c(()=>{if(!g.value)return;let e=f;e&&e.value!==d.value&&(e.value=d.value)}),(0,l.onCleanup)(()=>{Z?.(),Z=null,Q=null,de()});let $=()=>e[`hide-label`].value;return l.html`
       <slot></slot>
       <ore-input
         class="trigger"
@@ -107,5 +107,5 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               `):``}
         </div>
       </div>
-    `},shadow:{delegatesFocus:!0},styles:[n.colorThemeMixin,e.reducedMotionMixin,t.roundedVariantMixin,e.srOnlyMixin,c.default]}),exports.COMBOBOX_TAG=d;
+    `},shadow:{delegatesFocus:!0},styles:[n.colorThemeMixin,e.reducedMotionMixin,t.roundedVariantMixin,e.srOnlyMixin,c.default]}),exports.COMBOBOX_OPTION_TAG=d,exports.COMBOBOX_TAG=f;
 //# sourceMappingURL=combobox.cjs.map