@vielzeug/refine 1.7.0 → 2.0.0

package/dist/button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button.cjs","names":[],"sources":["../src/inputs/button/button.ts"],"sourcesContent":["import { define, html, inject, prop, bind, getHost } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { ButtonType, ComponentSize, LinkTarget, RoundedSize, ThemeColor } from '../../types';\n\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 { 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`<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          : html`<span part=\"button\" role=\"presentation\" @click=\"${handleClick}\">${buttonContent}</span>`}\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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"}
+{"version":3,"file":"button.cjs","names":[],"sources":["../src/inputs/button/button.ts"],"sourcesContent":["import { define, html, inject, prop, bind, getHost } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { ButtonType, ComponentSize, LinkTarget, RoundedSize, ThemeColor } from '../../types';\n\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 { 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":"0lBAwBA,IAAa,EAAkB,CAAC,QAAS,OAAQ,WAAY,UAAW,QAAS,OAAQ,OAAO,EA8FnF,EAAa,cAC1B,EAAA,EAAA,OAAA,CAAuB,EAAY,CACjC,eAAgB,GAChB,MAAO,CACL,GAAG,EAAA,YACH,OAAQ,EAAA,KAAK,OAAqB,EAClC,WAAY,EAAA,KAAK,KAAK,EAAK,EAC3B,UAAW,EAAA,KAAK,KAAK,EAAK,EAC1B,KAAM,EAAA,KAAK,OAAO,EAClB,SAAU,EAAA,KAAK,KAAK,EAAK,EACzB,MAAO,EAAA,KAAK,OAAO,EACnB,IAAK,EAAA,KAAK,OAAO,EACjB,OAAQ,EAAA,KAAK,OAAmB,EAChC,KAAM,EAAA,KAAK,MAAM,CAAC,SAAU,SAAU,OAAO,EAAY,QAAQ,EACjE,QAAS,EAAA,KAAK,MAAM,EAAiB,OAAO,CAC9C,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAK,EAAA,QAAA,CAAQ,EAGb,GAAA,EAAW,EAAA,OAAA,CAAO,EAAA,gBAAgB,EAClC,GAAA,EAAiB,EAAA,SAAA,KAAe,GAAU,MAAM,OAAS,EAAM,MAAM,KAAK,EAC1E,GAAA,EAAgB,EAAA,SAAA,KAAe,GAAU,KAAK,OAAS,EAAM,KAAK,KAAK,EACvE,GAAA,EAAmB,EAAA,SAAA,KAAe,GAAU,QAAQ,OAAS,EAAM,QAAQ,KAAK,EAEhF,GAAA,EAAa,EAAA,SAAA,KAAe,CAAC,EAAE,EAAM,SAAS,OAAS,EAAM,QAAQ,MAAM,EAG3E,CAAE,eAAc,UAAW,EAAA,aAAa,EAAM,KAAM,EAAM,IAAK,EAAM,MAAM,EAK3E,GAAA,EAAY,EAAA,SAAA,CAAS,CACzB,SAAU,EACV,gBAAmB,KACnB,OAAA,EAAO,EAAA,SAAA,KAAe,EAAE,CAC1B,CAAC,EAEK,EAAe,GAAkB,CACrC,GAAI,EAAW,MAAO,CACpB,EAAE,eAAe,EAEjB,MACF,CAIA,EAAA,kBAAqB,EAAO,MAAQ,KAAO,EAAU,UAAU,KAAO,EAAM,KAAM,EAAY,CAAE,CAAC,CAAC,CAAC,CACrG,GAUA,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,YAAa,EAAM,QACnB,gBAAiB,EACjB,aAAc,EAAM,MACpB,MAAO,EACP,OAAQ,EAAM,OACd,MAAA,EAAM,EAAA,SAAA,KAAe,EAAG,aAAa,MAAM,IAAM,EAAO,MAAQ,OAAS,SAAS,EAClF,KAAM,EACN,UAAA,EAAU,EAAA,SAAA,KAAgB,EAAW,MAAQ,KAAO,GAAI,EACxD,QAAS,CACX,EACA,GAAI,CACF,QArBmB,GAAqB,EACtC,EAAE,MAAQ,SAAW,EAAE,MAAQ,OACjC,EAAE,eAAe,GAChB,EAAG,YAAY,cAAc,iBAAiB,EAAA,EAAmB,MAAM,EAE5E,CAiBE,CACF,CAAC,EAED,IAAM,EAAgB,EAAA,IAAI;4EACgD,CAAC,EAAM,QAAQ,MAAM;;;;MAY/F,MAAO,GAAA,IAAI;YAEP,EAAO,MACH,EAAA,IAAI;;;;;wBAKQ,EAAM,KAAK;uBACZ,EAAa;0BACV,EAAM,OAAO;0BACb,EAAY;kBACpB,EAAc;;cAGpB,EAAA,IAAI;gEACgD,EAAY,IAAI,EAAc;cAChF;KAEZ,EACA,OAAQ,CAAE,eAAgB,EAAM,EAChC,OAAQ,CACN,EAAA,gBACA,EAAA,mBACA,EAAA,mBACA,EAAA,oBACA,EAAA,kBACA,EAAA,iBAAiB,CACf,GAAI,CACF,SAAU,mBACV,IAAK,kBACL,OAAQ,iBACR,SAAU,gBACV,WAAY,yBACZ,QAAS,+BACX,EACA,GAAI,CACF,SAAU,iBACV,IAAK,kBACL,OAAQ,gBACR,SAAU,gBACV,WAAY,uBACZ,QAAS,+BACX,CACF,CAAC,EACD,EAAA,kBAAkB,iBAAiB,EACnC,EAAA,mBAAmB,iBAAiB,EACpC,EAAA,iBAAiB,iBAAiB,EAClC,EAAA,qBACA,EAAA,OACF,CACF,CAAC"}

package/dist/button.js

@@ -1,17 +1,16 @@
 import { coarsePointerMixin as e, reducedMotionMixin as t } from "./styles/mixins/accessibility.css.js";
-import { roundedVariantMixin as n, sizeVariantMixin as r } from "./styles/mixins/shape.css.js";
-import { disabledLoadingMixin as i } from "./styles/mixins/states.css.js";
-import { colorThemeMixin as a, forcedColorsMixin as o } from "./styles/mixins/theme.css.js";
-import { rainbowEffectMixin as s, shineEffectMixin as c } from "./styles/mixins/animation.css.js";
+import { rainbowEffectMixin as n, shineEffectMixin as r } from "./styles/mixins/animation.css.js";
+import { roundedVariantMixin as i, sizeVariantMixin as a } from "./styles/mixins/shape.css.js";
+import { disabledLoadingMixin as o } from "./styles/mixins/states.css.js";
+import { colorThemeMixin as s, forcedColorsMixin as c } from "./styles/mixins/theme.css.js";
 import { frostVariantMixin as l } from "./styles/mixins/variants.css.js";
 import { commonProps as u } from "./shared/prop-bundles.js";
 import { useLinkProps as d } from "./utils/link.js";
 import { BUTTON_GROUP_CTX as f } from "./button-group.js";
 import { useFormAction as p } from "./inputs/shared/use-form-action.js";
 import m from "./inputs/button/button.css.js";
-import { bind as h, define as g, getHost as _, html as v, inject as y, prop as b } from "@vielzeug/ore";
-import { computed as x } from "@vielzeug/ripple";
-import { useField as S } from "@vielzeug/ore/forms";
+import { bind as h, define as g, getHost as _, html as v, inject as y, prop as b, useField as x } from "@vielzeug/ore";
+import { computed as S } from "@vielzeug/ripple";
 //#region src/inputs/button/button.ts
 var C = [
 	"solid",
@@ -42,10 +41,10 @@ g(w, {
 		variant: b.oneOf(C, "solid")
 	},
 	setup(e) {
-		let t = _(), n = y(f), r = x(() => n?.color.value ?? e.color.value), i = x(() => n?.size.value ?? e.size.value), a = x(() => n?.variant.value ?? e.variant.value), o = x(() => !!(e.disabled.value || e.loading.value)), { effectiveRel: s, isLink: c } = d(e.href, e.rel, e.target), l = S({
+		let t = _(), n = y(f), r = S(() => n?.color.value ?? e.color.value), i = S(() => n?.size.value ?? e.size.value), a = S(() => n?.variant.value ?? e.variant.value), o = S(() => !!(e.disabled.value || e.loading.value)), { effectiveRel: s, isLink: c } = d(e.href, e.rel, e.target), l = x({
 			disabled: o,
 			toFormValue: () => null,
-			value: x(() => "")
+			value: S(() => "")
 		}), u = (n) => {
 			if (o.value) {
 				n.preventDefault();
@@ -60,9 +59,9 @@ g(w, {
 				"aria-label": e.label,
 				color: r,
 				effect: e.effect,
-				role: x(() => t.getAttribute("role") ?? (c.value ? "link" : "button")),
+				role: S(() => t.getAttribute("role") ?? (c.value ? "link" : "button")),
 				size: i,
-				tabindex: x(() => o.value ? "-1" : "0"),
+				tabindex: S(() => o.value ? "-1" : "0"),
 				variant: a
 			},
 			on: { keydown: (e) => {
@@ -76,26 +75,30 @@ g(w, {
       <slot name="suffix"></slot>
     `;
 		return v`
-      ${() => c.value ? v`<a
-              part="button"
-              role="presentation"
-              tabindex="-1"
-              href="${e.href}"
-              :rel="${s}"
-              :target="${e.target}"
-              @click="${u}">
-              ${m}
-            </a>` : v`<span part="button" role="presentation" @click="${u}">${m}</span>`}
+      ${() => c.value ? v`
+              <a
+                part="button"
+                role="presentation"
+                tabindex="-1"
+                href="${e.href}"
+                rel="${s}"
+                target="${e.target}"
+                @click="${u}">
+                ${m}
+              </a>
+            ` : v`
+              <span part="button" role="presentation" @click="${u}">${m}</span>
+            `}
     `;
 	},
 	shadow: { delegatesFocus: !1 },
 	styles: [
-		a,
+		s,
 		e,
 		t,
-		n,
-		o,
-		r({
+		i,
+		c,
+		a({
 			lg: {
 				fontSize: "var(--text-base)",
 				gap: "var(--size-2-5)",
@@ -114,9 +117,9 @@ g(w, {
 			}
 		}),
 		l("[part=\"button\"]"),
-		s("[part=\"button\"]"),
-		c("[part=\"button\"]"),
-		i,
+		n("[part=\"button\"]"),
+		r("[part=\"button\"]"),
+		o,
 		m
 	]
 });

package/dist/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../src/inputs/button/button.ts"],"sourcesContent":["import { define, html, inject, prop, bind, getHost } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { ButtonType, ComponentSize, LinkTarget, RoundedSize, ThemeColor } from '../../types';\n\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 { 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`<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          : html`<span part=\"button\" role=\"presentation\" @click=\"${handleClick}\">${buttonContent}</span>`}\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":";;;;;;;;;;;;;;;AAwBA,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;;;;sBAIM,EAAM,KAAK;sBACX,EAAa;yBACV,EAAM,OAAO;wBACd,EAAY;gBACpB,EAAc;oBAElB,CAAI,mDAAmD,EAAY,IAAI,EAAc,SAAS;;CAExG;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 { define, html, inject, prop, bind, getHost } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { ButtonType, ComponentSize, LinkTarget, RoundedSize, ThemeColor } from '../../types';\n\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 { 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":";;;;;;;;;;;;;;AAwBA,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"}

package/dist/calendar.cjs

@@ -1,22 +1,23 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./shared/prop-bundles.cjs"),r=require("./headless/date-picker.cjs"),i=require("./inputs/calendar/calendar.css.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ore/directives"),s=require("@vielzeug/ripple"),c=require("@vielzeug/tempo"),l=require("@vielzeug/ore/forms");var u=`ore-calendar`,d=3;(0,a.define)(u,{formAssociated:!0,props:{...n.themableBundle,...n.sizableBundle,...n.disablableBundle,...n.roundableBundle,events:a.prop.json([]),expanded:a.prop.bool(!1),fullwidth:a.prop.bool(!1),locale:a.prop.string(),max:a.prop.string(),min:a.prop.string(),name:a.prop.string(),required:a.prop.bool(!1),value:a.prop.string(),"weekend-days":a.prop.json([])},setup(e){let t=(0,a.useEmit)(),n=(0,s.computed)(()=>e.disabled.value===!0),i=(0,s.computed)(()=>e.expanded.value===!0),u=(0,s.signal)(void 0),f=(0,s.computed)(()=>u.value===void 0?r.parseIso(e.value.value):u.value),p=r.createDatePickerControl({get locale(){return e.locale.value??(typeof navigator<`u`?navigator.language:`en`)},get max(){return r.parseIso(e.max.value)},get min(){return r.parseIso(e.min.value)},onChange(e){u.value=e,m.value=`day`,h.value=p.displayYear(),g.value=p.displayMonth(),t(`change`,{isoValue:r.toIsoString(e)})},get value(){return f.value},get weekendDays(){return e[`weekend-days`].value??[]}}),m=(0,s.signal)(`day`),h=(0,s.signal)(p.displayYear()),g=(0,s.signal)(p.displayMonth());(0,l.useField)({disabled:n,toFormValue:e=>e||null,value:(0,s.computed)(()=>r.toIsoString(f.value)??``)});let _=(0,s.computed)(()=>{let t=new Map;for(let n of e.events.value??[]){let e=t.get(n.date)??[];e.push(n),t.set(n.date,e)}return t}),v=(0,s.computed)(()=>(h.value,g.value,f.value,p.dayCells())),y=(0,s.computed)(()=>(h.value,p.monthCells())),b=(0,s.computed)(()=>(h.value,p.yearCells())),x=(0,s.computed)(()=>p.weekdayLabels()),S=(0,s.computed)(()=>(0,c.format)(c.Temporal.PlainDate.from({day:1,month:g.value,year:h.value}),{intl:{month:`long`},locale:e.locale.value??(typeof navigator<`u`?navigator.language:`en`),tz:`UTC`})),C=(0,s.computed)(()=>String(h.value)),w=(0,s.computed)(()=>`${S.value} ${C.value}`);function T(){m.value===`day`?p.prevMonth():p.prevYear(),h.value=p.displayYear(),g.value=p.displayMonth()}function E(){m.value===`day`?p.nextMonth():p.nextYear(),h.value=p.displayYear(),g.value=p.displayMonth()}function D(){let e=[`day`,`month`,`year`],t=e[(e.indexOf(m.value)+1)%e.length];p.setView(t),m.value=t}function O(e){n.value||(p.goTo(p.displayYear(),e),p.setView(`day`),h.value=p.displayYear(),g.value=p.displayMonth(),m.value=`day`)}function k(e){n.value||(p.goTo(e,p.displayMonth()),p.setView(`month`),h.value=p.displayYear(),m.value=`month`)}function A(e){if(n.value)return;let t=r.parseIso(e);t&&p.select(t)}function j(e){let t=e.currentTarget,n=t.closest(`.cal-grid-days`);if(!n)return;let r=Array.from(n.querySelectorAll(`.cal-cell-day`)),i=r.indexOf(t);if(i===-1)return;let a;if(e.key===`Enter`||e.key===` `){e.preventDefault(),A(t.dataset.iso??``);return}else if(e.key===`ArrowRight`)a=r[i+1];else if(e.key===`ArrowLeft`)a=r[i-1];else if(e.key===`ArrowDown`)a=r[i+7];else if(e.key===`ArrowUp`)a=r[i-7];else if(e.key===`Home`)a=r[Math.floor(i/7)*7];else if(e.key===`End`)a=r[Math.floor(i/7)*7+6];else return;e.preventDefault(),a?.focus()}function M(e,t,n,r){let i=e.currentTarget,a=i.closest(`.cal-grid`);if(!a)return;let o=Array.from(a.querySelectorAll(t)),s=o.indexOf(i);if(s===-1)return;let c;if(e.key===`Enter`||e.key===` `){e.preventDefault(),r();return}else if(e.key===`ArrowRight`)c=o[s+1];else if(e.key===`ArrowLeft`)c=o[s-1];else if(e.key===`ArrowDown`)c=o[s+n];else if(e.key===`ArrowUp`)c=o[s-n];else if(e.key===`Home`)c=o[Math.floor(s/n)*n];else if(e.key===`End`)c=o[Math.min(Math.floor(s/n)*n+n-1,o.length-1)];else return;e.preventDefault(),c?.focus()}return(0,a.bind)({attr:{"aria-disabled":()=>n.value?`true`:null,"aria-label":()=>w.value,role:`group`},class:{"is-disabled":n}}),a.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./core/date-picker.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./inputs/calendar/calendar.css.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple"),s=require("@vielzeug/tempo");var c=`ore-calendar`,l=3;(0,a.define)(c,{formAssociated:!0,props:{...r.themableBundle,...r.sizableBundle,...r.disablableBundle,...r.roundableBundle,events:a.prop.json([]),expanded:a.prop.bool(!1),fullwidth:a.prop.bool(!1),locale:a.prop.string(),max:a.prop.string(),min:a.prop.string(),name:a.prop.string(),required:a.prop.bool(!1),value:a.prop.string(),"weekend-days":a.prop.json([])},setup(e){let t=(0,a.useEmit)(),r=(0,o.computed)(()=>e.disabled.value===!0),i=(0,o.computed)(()=>e.expanded.value===!0),c=(0,o.signal)(void 0),u=(0,o.computed)(()=>c.value===void 0?n.parseIso(e.value.value):c.value),d=n.createDatePickerControl({get locale(){return e.locale.value??(typeof navigator<`u`?navigator.language:`en`)},get max(){return n.parseIso(e.max.value)},get min(){return n.parseIso(e.min.value)},onChange(e){c.value=e,f.value=`day`,p.value=d.displayYear(),m.value=d.displayMonth(),t(`change`,{isoValue:n.toIsoString(e)})},get value(){return u.value},get weekendDays(){return e[`weekend-days`].value??[]}}),f=(0,o.signal)(`day`),p=(0,o.signal)(d.displayYear()),m=(0,o.signal)(d.displayMonth());(0,a.useField)({disabled:r,toFormValue:e=>e||null,value:(0,o.computed)(()=>n.toIsoString(u.value)??``)});let h=(0,o.computed)(()=>{let t=new Map;for(let n of e.events.value??[]){let e=t.get(n.date)??[];e.push(n),t.set(n.date,e)}return t}),g=(0,o.computed)(()=>(p.value,m.value,u.value,d.dayCells())),_=(0,o.computed)(()=>(p.value,d.monthCells())),v=(0,o.computed)(()=>(p.value,d.yearCells())),y=(0,o.computed)(()=>d.weekdayLabels()),b=(0,o.computed)(()=>{let t=s.Temporal.PlainDate.from({day:1,month:m.value,year:p.value}),n=e.locale.value??(typeof navigator<`u`?navigator.language:`en`);return(0,s.format)(t,{intl:{month:`long`},locale:n,tz:`UTC`})}),x=(0,o.computed)(()=>String(p.value)),S=(0,o.computed)(()=>`${b.value} ${x.value}`);function C(){f.value===`day`?d.prevMonth():d.prevYear(),p.value=d.displayYear(),m.value=d.displayMonth()}function w(){f.value===`day`?d.nextMonth():d.nextYear(),p.value=d.displayYear(),m.value=d.displayMonth()}function T(){let e=[`day`,`month`,`year`],t=e[(e.indexOf(f.value)+1)%e.length];d.setView(t),f.value=t}function E(e){r.value||(d.goTo(d.displayYear(),e),d.setView(`day`),p.value=d.displayYear(),m.value=d.displayMonth(),f.value=`day`)}function D(e){r.value||(d.goTo(e,d.displayMonth()),d.setView(`month`),p.value=d.displayYear(),f.value=`month`)}function O(e){if(r.value)return;let t=n.parseIso(e);t&&d.select(t)}function k(e){let t=e.currentTarget,n=t.closest(`.cal-grid-days`);if(!n)return;let r=Array.from(n.querySelectorAll(`.cal-cell-day`)),i=r.indexOf(t);if(i===-1)return;let a;if(e.key===`Enter`||e.key===` `){e.preventDefault(),O(t.dataset.iso??``);return}if(e.key===`ArrowRight`)a=r[i+1];else if(e.key===`ArrowLeft`)a=r[i-1];else if(e.key===`ArrowDown`)a=r[i+7];else if(e.key===`ArrowUp`)a=r[i-7];else if(e.key===`Home`)a=r[Math.floor(i/7)*7];else if(e.key===`End`)a=r[Math.floor(i/7)*7+6];else return;e.preventDefault(),a?.focus()}function A(e,t,n,r){let i=e.currentTarget,a=i.closest(`.cal-grid`);if(!a)return;let o=Array.from(a.querySelectorAll(t)),s=o.indexOf(i);if(s===-1)return;let c;if(e.key===`Enter`||e.key===` `){e.preventDefault(),r();return}if(e.key===`ArrowRight`)c=o[s+1];else if(e.key===`ArrowLeft`)c=o[s-1];else if(e.key===`ArrowDown`)c=o[s+n];else if(e.key===`ArrowUp`)c=o[s-n];else if(e.key===`Home`)c=o[Math.floor(s/n)*n];else if(e.key===`End`)c=o[Math.min(Math.floor(s/n)*n+n-1,o.length-1)];else return;e.preventDefault(),c?.focus()}return(0,a.bind)({attr:{"aria-disabled":()=>r.value?`true`:null,"aria-label":()=>S.value,role:`group`},class:{"is-disabled":r}}),a.html`
       <div class="calendar" part="calendar" role="presentation">
         <!-- Header -->
         <div class="cal-header" part="header">
-          <button class="nav-btn" type="button" aria-label="Previous" ?disabled="${n}" @click="${T}">
+          <button class="nav-btn" type="button" aria-label="Previous" ?disabled="${r}" @click="${C}">
             <ore-icon name="chevron-left" size="16" stroke-width="2" aria-hidden="true"></ore-icon>
           </button>
 
           <button
             class="cal-label-btn"
             type="button"
-            :aria-label="${()=>`Switch to ${m.value===`day`?`month`:m.value===`month`?`year`:`day`} view`}"
-            ?disabled="${n}"
-            @click="${D}">
-            <span class="cal-label-month">${S}</span><span class="cal-label-sep" aria-hidden="true">/</span
-            ><span class="cal-label-year">${C}</span>
+            aria-label="${()=>`Switch to ${f.value===`day`?`month`:f.value===`month`?`year`:`day`} view`}"
+            ?disabled="${r}"
+            @click="${T}">
+            <span class="cal-label-month">${b}</span>
+            <span class="cal-label-sep" aria-hidden="true">/</span>
+            <span class="cal-label-year">${x}</span>
           </button>
 
-          <button class="nav-btn" type="button" aria-label="Next" ?disabled="${n}" @click="${E}">
+          <button class="nav-btn" type="button" aria-label="Next" ?disabled="${r}" @click="${w}">
             <ore-icon name="chevron-right" size="16" stroke-width="2" aria-hidden="true"></ore-icon>
           </button>
         </div>
@@ -26,78 +27,98 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           class="cal-grid cal-grid-days"
           role="grid"
           part="grid"
-          :aria-label="${()=>w.value}"
-          ?hidden="${()=>m.value!==`day`}">
+          aria-label="${()=>S.value}"
+          ?hidden="${()=>f.value!==`day`}">
           <div role="row" class="cal-grid-row">
-            ${()=>x.value.map(e=>a.html`<div class="cal-cell cal-cell-head" role="columnheader" aria-label="${e}">${e}</div>`)}
+            ${()=>y.value.map(e=>a.html`
+                  <div class="cal-cell cal-cell-head" role="columnheader" aria-label="${e}">${e}</div>
+                `)}
           </div>
-          ${()=>{let e=v.value,t=[];for(let n=0;n<e.length;n+=7)t.push(e.slice(n,n+7));return t.map(e=>a.html`<div role="row" class="cal-grid-row">
-                  ${e.map(e=>a.html`<div
+          ${()=>{let e=g.value,t=[];for(let n=0;n<e.length;n+=7)t.push(e.slice(n,n+7));return t.map(e=>a.html`
+                <div role="row" class="cal-grid-row">
+                  ${e.map(e=>a.html`
+                      <div
                         class="cal-cell cal-cell-day"
                         role="gridcell"
                         part="day"
-                        :aria-selected="${()=>String(e.isSelected)}"
-                        :aria-disabled="${()=>String(e.isDisabled||n.value)}"
-                        :aria-current="${()=>e.isToday?`date`:null}"
+                        aria-selected="${()=>String(e.isSelected)}"
+                        aria-disabled="${()=>String(e.isDisabled||r.value)}"
+                        aria-current="${()=>e.isToday?`date`:null}"
                         ?data-selected="${()=>e.isSelected}"
                         ?data-today="${()=>e.isToday}"
                         ?data-outside="${()=>e.isOutsideMonth}"
-                        ?data-disabled="${()=>e.isDisabled||n.value}"
+                        ?data-disabled="${()=>e.isDisabled||r.value}"
                         data-iso="${e.iso}"
                         data-day="${String(e.day)}"
-                        tabindex="${()=>e.isDisabled||n.value?`-1`:`0`}"
-                        @click="${()=>A(e.iso)}"
-                        @keydown="${j}">
+                        tabindex="${()=>e.isDisabled||r.value?`-1`:`0`}"
+                        @click="${()=>O(e.iso)}"
+                        @keydown="${k}">
                         ${String(e.day)}
-                        ${()=>{let t=_.value.get(e.iso)??[];if(!t.length)return a.html``;let n=t.slice(0,d),r=t.length-d;return i.value?a.html`<div
-                              class="cal-events"
+                        ${()=>{let t=h.value.get(e.iso)??[];if(!t.length)return a.html``;let n=t.slice(0,l),r=t.length-l;if(i.value){let e=r>0?a.html`<span class="cal-event-pill-overflow" aria-hidden="true"
+                                  >+${r} more</span
+                                >`:a.html``;return a.html`
+                              <div
+                                class="cal-events"
+                                aria-label="${()=>`${t.length} event${t.length>1?`s`:``}`}">
+                                ${n.map(e=>a.html`
+                                    <ore-badge
+                                      class="cal-event-pill"
+                                      size="xs"
+                                      rounded="sm"
+                                      aria-label="${e.label}"
+                                      style="${(0,a.styleMap)({"--badge-bg":e.color,"--badge-border-color":e.color})}">
+                                      ${e.label}
+                                    </ore-badge>
+                                  `)}
+                                ${e}
+                              </div>
+                            `}return a.html`
+                            <div
+                              class="cal-dots"
                               aria-label="${()=>`${t.length} event${t.length>1?`s`:``}`}">
-                              ${n.map(e=>a.html`<ore-badge
-                                    class="cal-event-pill"
+                              ${n.map(e=>a.html`
+                                  <ore-badge
+                                    class="cal-dot"
+                                    dot
                                     size="xs"
-                                    rounded="sm"
-                                    aria-label="${e.label}"
-                                    :style="${(0,o.styleMap)({"--badge-bg":e.color,"--badge-border-color":e.color})}">
-                                    ${e.label}
-                                  </ore-badge>`)}
-                              ${r>0?a.html`<span class="cal-event-pill-overflow" aria-hidden="true"
-                                      >+${r} more</span
-                                    >`:a.html``}
-                            </div>`:a.html`<div
-                            class="cal-dots"
-                            aria-label="${()=>`${t.length} event${t.length>1?`s`:``}`}">
-                            ${n.map(e=>a.html`<ore-badge
-                                  class="cal-dot"
-                                  dot
-                                  size="xs"
-                                  aria-hidden="true"
-                                  :style="${(0,o.styleMap)({"--badge-bg":e.color,"--badge-border-color":e.color})}"></ore-badge>`)}
-                            ${r>0?a.html`<span class="cal-dot-overflow" aria-hidden="true">+${r}</span>`:a.html``}
-                          </div>`}}
-                      </div>`)}
-                </div>`)}}
+                                    aria-hidden="true"
+                                    style="${(0,a.styleMap)({"--badge-bg":e.color,"--badge-border-color":e.color})}"></ore-badge>
+                                `)}
+                              ${r>0?a.html`
+                                      <span class="cal-dot-overflow" aria-hidden="true">+${r}</span>
+                                    `:a.html``}
+                            </div>
+                          `}}
+                      </div>
+                    `)}
+                </div>
+              `)}}
         </div>
 
         <!-- Month view -->
         <div
           class="cal-grid cal-grid-months"
           role="grid"
-          :aria-label="${()=>C.value}"
-          ?hidden="${()=>m.value!==`month`}">
-          ${()=>{let e=y.value,t=[];for(let n=0;n<e.length;n+=4)t.push(e.slice(n,n+4));return t.map(e=>a.html`<div role="row">
-                  ${e.map(e=>a.html`<div
+          aria-label="${()=>x.value}"
+          ?hidden="${()=>f.value!==`month`}">
+          ${()=>{let e=_.value,t=[];for(let n=0;n<e.length;n+=4)t.push(e.slice(n,n+4));return t.map(e=>a.html`
+                <div role="row">
+                  ${e.map(e=>a.html`
+                      <div
                         class="cal-cell cal-cell-month"
                         role="gridcell"
-                        :aria-selected="${()=>String(e.isSelected)}"
-                        :aria-disabled="${()=>String(e.isDisabled||n.value)}"
+                        aria-selected="${()=>String(e.isSelected)}"
+                        aria-disabled="${()=>String(e.isDisabled||r.value)}"
                         ?data-selected="${()=>e.isSelected}"
-                        ?data-disabled="${()=>e.isDisabled||n.value}"
-                        tabindex="${()=>e.isDisabled||n.value?`-1`:`0`}"
-                        @click="${()=>O(e.month)}"
-                        @keydown="${t=>M(t,`.cal-cell-month`,4,()=>O(e.month))}">
+                        ?data-disabled="${()=>e.isDisabled||r.value}"
+                        tabindex="${()=>e.isDisabled||r.value?`-1`:`0`}"
+                        @click="${()=>E(e.month)}"
+                        @keydown="${t=>A(t,`.cal-cell-month`,4,()=>E(e.month))}">
                         ${e.shortLabel}
-                      </div>`)}
-                </div>`)}}
+                      </div>
+                    `)}
+                </div>
+              `)}}
         </div>
 
         <!-- Year view -->
@@ -105,22 +126,26 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           class="cal-grid cal-grid-years"
           role="grid"
           aria-label="Select year"
-          ?hidden="${()=>m.value!==`year`}">
-          ${()=>{let e=b.value,t=[];for(let n=0;n<e.length;n+=4)t.push(e.slice(n,n+4));return t.map(e=>a.html`<div role="row">
-                  ${e.map(e=>a.html`<div
+          ?hidden="${()=>f.value!==`year`}">
+          ${()=>{let e=v.value,t=[];for(let n=0;n<e.length;n+=4)t.push(e.slice(n,n+4));return t.map(e=>a.html`
+                <div role="row">
+                  ${e.map(e=>a.html`
+                      <div
                         class="cal-cell cal-cell-year"
                         role="gridcell"
-                        :aria-selected="${()=>String(e.isSelected)}"
-                        :aria-disabled="${()=>String(e.isDisabled||n.value)}"
+                        aria-selected="${()=>String(e.isSelected)}"
+                        aria-disabled="${()=>String(e.isDisabled||r.value)}"
                         ?data-selected="${()=>e.isSelected}"
-                        ?data-disabled="${()=>e.isDisabled||n.value}"
-                        tabindex="${()=>e.isDisabled||n.value?`-1`:`0`}"
-                        @click="${()=>k(e.year)}"
-                        @keydown="${t=>M(t,`.cal-cell-year`,4,()=>k(e.year))}">
+                        ?data-disabled="${()=>e.isDisabled||r.value}"
+                        tabindex="${()=>e.isDisabled||r.value?`-1`:`0`}"
+                        @click="${()=>D(e.year)}"
+                        @keydown="${t=>A(t,`.cal-cell-year`,4,()=>D(e.year))}">
                         ${String(e.year)}
-                      </div>`)}
-                </div>`)}}
+                      </div>
+                    `)}
+                </div>
+              `)}}
         </div>
       </div>
-    `},shadow:{delegatesFocus:!0},styles:[t.colorThemeMixin,e.reducedMotionMixin,i.default]}),exports.CALENDAR_TAG=u;
+    `},shadow:{delegatesFocus:!0},styles:[t.colorThemeMixin,e.reducedMotionMixin,i.default]}),exports.CALENDAR_TAG=c;
 //# sourceMappingURL=calendar.cjs.map