@vielzeug/refine 1.7.0 → 1.8.0

package/dist/async.cjs

@@ -1,11 +1,11 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./feedback/async/async.css.cjs");let n=require("@vielzeug/ore"),r=require("@vielzeug/ore/directives"),i=require("@vielzeug/ripple");var a=`ore-async`;(0,n.define)(a,{props:{"empty-description":n.prop.string(),"empty-label":n.prop.string(`No content yet`),"error-description":n.prop.string(),"error-label":n.prop.string(`Something went wrong`),retryable:n.prop.bool(!1),status:n.prop.oneOf([`idle`,`loading`,`empty`,`error`,`success`],`success`)},setup(e){let t=(0,n.useEmit)(),a=(0,i.signal)(!1),o=(0,i.signal)(!1),s=(0,i.signal)(!1);(0,n.bind)({attr:{ariaBusy:()=>e.status.value===`loading`?`true`:`false`,ariaLabel:()=>e.status.value===`loading`?`Loading…`:null,ariaLive:()=>e.status.value===`error`?`assertive`:`polite`,status:e.status}});let c=(e,t)=>()=>t?.value?n.html`<p class="${e}">${t}</p>`:``;return n.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./feedback/async/async.css.cjs");let n=require("@vielzeug/ore"),r=require("@vielzeug/ripple");var i=`ore-async`;(0,n.define)(i,{props:{"empty-description":n.prop.string(),"empty-label":n.prop.string(`No content yet`),"error-description":n.prop.string(),"error-label":n.prop.string(`Something went wrong`),retryable:n.prop.bool(!1),status:n.prop.oneOf([`idle`,`loading`,`empty`,`error`,`success`],`success`)},setup(e){let t=(0,n.useEmit)(),i=(0,r.signal)(!1),a=(0,r.signal)(!1),o=(0,r.signal)(!1);(0,n.bind)({attr:{ariaBusy:()=>e.status.value===`loading`?`true`:`false`,ariaLabel:()=>e.status.value===`loading`?`Loading…`:null,ariaLive:()=>e.status.value===`error`?`assertive`:`polite`,status:e.status}});let s=(e,t)=>()=>t?.value?n.html`<p class="${e}">${t}</p>`:``;return n.html`
       <div class="region region-idle" role="presentation"></div>
 
       <div class="region region-loading" role="status">
         <slot
           name="loading"
-          @slotchange=${e=>{a.value=e.target.assignedNodes().length>0}}></slot>
-        ${(0,r.when)(a,()=>n.html``,()=>n.html`
+          @slotchange=${e=>{i.value=e.target.assignedNodes().length>0}}></slot>
+        ${(0,n.when)(i,()=>n.html``,()=>n.html`
             <div class="loading-default" aria-hidden="true">
               <ore-skeleton variant="text" lines="1" width="40%"></ore-skeleton>
               <ore-skeleton variant="text" lines="3" width="100%"></ore-skeleton>
@@ -17,13 +17,13 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
       <div class="region region-empty">
         <slot
           name="empty"
-          @slotchange=${e=>{o.value=e.target.assignedNodes().length>0}}></slot>
-        ${(0,r.when)(o,()=>n.html``,()=>n.html`
+          @slotchange=${e=>{a.value=e.target.assignedNodes().length>0}}></slot>
+        ${(0,n.when)(a,()=>n.html``,()=>n.html`
             <div class="empty-state" role="status">
               <div class="icon">
                 <ore-icon name="inbox" size="100%" stroke-width="1.75" aria-hidden="true"></ore-icon>
               </div>
-              ${c(`title`,e[`empty-label`])} ${c(`description`,e[`empty-description`])}
+              ${s(`title`,e[`empty-label`])} ${s(`description`,e[`empty-description`])}
             </div>
           `)}
       </div>
@@ -31,14 +31,14 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
       <div class="region region-error">
         <slot
           name="error"
-          @slotchange=${e=>{s.value=e.target.assignedNodes().length>0}}></slot>
-        ${(0,r.when)(s,()=>n.html``,()=>n.html`
+          @slotchange=${e=>{o.value=e.target.assignedNodes().length>0}}></slot>
+        ${(0,n.when)(o,()=>n.html``,()=>n.html`
             <div class="error-state" role="alert">
               <div class="icon">
                 <ore-icon name="triangle-alert" size="100%" stroke-width="1.75" aria-hidden="true"></ore-icon>
               </div>
-              ${c(`title`,e[`error-label`])} ${c(`description`,e[`error-description`])}
-              ${(0,r.when)(()=>!!e.retryable.value,()=>n.html`
+              ${s(`title`,e[`error-label`])} ${s(`description`,e[`error-description`])}
+              ${(0,n.when)(()=>!!e.retryable.value,()=>n.html`
                   <button class="retry-btn" type="button" @click=${()=>t(`retry`)}>
                     <ore-icon name="refresh-cw" size="1em" stroke-width="2" aria-hidden="true"></ore-icon>
                     Try again
@@ -51,5 +51,5 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
       <div class="region region-success" role="presentation">
         <slot></slot>
       </div>
-    `},styles:[e.reducedMotionMixin,t.default]}),exports.ASYNC_TAG=a;
+    `},styles:[e.reducedMotionMixin,t.default]}),exports.ASYNC_TAG=i;
 //# sourceMappingURL=async.cjs.map

package/dist/async.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"async.cjs","names":[],"sources":["../src/feedback/async/async.ts"],"sourcesContent":["import { define, html, prop, bind, useEmit } from '@vielzeug/ore';\nimport { when } from '@vielzeug/ore/directives';\nimport { type Readable, signal } from '@vielzeug/ripple';\n\nimport { reducedMotionMixin } from '../../styles';\nimport componentStyles from './async.css?inline';\n\nexport type AsyncStatus = 'idle' | 'loading' | 'empty' | 'error' | 'success';\n\nexport type OreAsyncEvents = {\n  retry: void;\n};\n\nexport type OreAsyncProps = {\n  'empty-description'?: string;\n  'empty-label'?: string;\n  'error-description'?: string;\n  'error-label'?: string;\n  retryable?: boolean;\n  status?: AsyncStatus;\n};\n\n/**\n * A container for handling asynchronous states (loading, empty, error, success).\n * Simplifies data fetching UI by providing consistent fallbacks.\n *\n * @element ore-async\n *\n * @attr {string} status - current state: 'idle' | 'loading' | 'empty' | 'error' | 'success' (default: 'success')\n * @attr {boolean} retryable - show retry button in error state (default: false)\n * @attr {string} empty-label - title for empty state (default: 'No content yet')\n * @attr {string} empty-description - optional text for empty state\n * @attr {string} error-label - title for error state (default: 'Something went wrong')\n * @attr {string} error-description - optional text for error state\n *\n * @fires retry - Emitted when the retry button is clicked (no detail payload)\n *\n * @slot - default content shown in 'success' state\n * @slot loading - custom loading UI (overrides default skeletons)\n * @slot empty - custom empty UI (overrides default icon/label)\n * @slot error - custom error UI (overrides default icon/label)\n *\n * @cssprop --async-color - Text/icon color used by default async state content\n * @cssprop --async-gap - Vertical spacing between icon, title, description, and actions\n * @cssprop --async-icon-size - Icon size for built-in loading/empty/error visuals\n * @example\n * ```html\n * <!-- Success state: default slot is shown -->\n * <ore-async status=\"success\">\n *   <ul><li>Item one</li><li>Item two</li></ul>\n * </ore-async>\n *\n * <!-- Loading state: shows skeleton placeholders -->\n * <ore-async status=\"loading\"></ore-async>\n *\n * <!-- Empty state with custom message -->\n * <ore-async status=\"empty\" empty-label=\"No results\" empty-description=\"Try adjusting your filters.\"></ore-async>\n *\n * <!-- Error state with retry button -->\n * <ore-async status=\"error\" retryable error-label=\"Failed to load\" error-description=\"Check your connection.\"></ore-async>\n * ```\n */\nexport const ASYNC_TAG = 'ore-async' as const;\ndefine<OreAsyncProps>(ASYNC_TAG, {\n  props: {\n    'empty-description': prop.string(),\n    'empty-label': prop.string('No content yet'),\n    'error-description': prop.string(),\n    'error-label': prop.string('Something went wrong'),\n    retryable: prop.bool(false),\n    status: prop.oneOf(['idle', 'loading', 'empty', 'error', 'success'] as const, 'success'),\n  },\n  setup(props) {\n    const emit = useEmit<OreAsyncEvents>();\n\n    const hasLoadingSlot = signal(false);\n    const hasEmptySlot = signal(false);\n    const hasErrorSlot = signal(false);\n\n    // Reflect status onto the host so CSS can show/hide each region.\n    // ARIA attributes are driven reactively by bind().\n    bind({\n      attr: {\n        ariaBusy: () => (props.status.value === 'loading' ? 'true' : 'false'),\n        ariaLabel: () => (props.status.value === 'loading' ? 'Loading…' : null),\n        ariaLive: () => (props.status.value === 'error' ? 'assertive' : 'polite'),\n        status: props.status,\n      },\n    });\n\n    const renderText = (className: 'title' | 'description', text: Readable<string | undefined> | undefined) => () =>\n      text?.value ? html`<p class=\"${className}\">${text}</p>` : '';\n\n    // All four regions are always in the shadow DOM — CSS on :host([status=\"…\"])\n    // toggles their visibility. This means:\n    // - No DOM churn on status transitions (no teardown/rebuild of slot elements).\n    // - Live regions are always present, so screen readers announce correctly.\n    // - focus is never lost across status changes.\n    return html`\n      <div class=\"region region-idle\" role=\"presentation\"></div>\n\n      <div class=\"region region-loading\" role=\"status\">\n        <slot\n          name=\"loading\"\n          @slotchange=${(e: Event) => {\n            hasLoadingSlot.value = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n          }}></slot>\n        ${when(\n          hasLoadingSlot,\n          () => html``,\n          () => html`\n            <div class=\"loading-default\" aria-hidden=\"true\">\n              <ore-skeleton variant=\"text\" lines=\"1\" width=\"40%\"></ore-skeleton>\n              <ore-skeleton variant=\"text\" lines=\"3\" width=\"100%\"></ore-skeleton>\n              <ore-skeleton variant=\"text\" lines=\"1\" width=\"60%\"></ore-skeleton>\n            </div>\n          `,\n        )}\n      </div>\n\n      <div class=\"region region-empty\">\n        <slot\n          name=\"empty\"\n          @slotchange=${(e: Event) => {\n            hasEmptySlot.value = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n          }}></slot>\n        ${when(\n          hasEmptySlot,\n          () => html``,\n          () => html`\n            <div class=\"empty-state\" role=\"status\">\n              <div class=\"icon\">\n                <ore-icon name=\"inbox\" size=\"100%\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n              </div>\n              ${renderText('title', props['empty-label'])} ${renderText('description', props['empty-description'])}\n            </div>\n          `,\n        )}\n      </div>\n\n      <div class=\"region region-error\">\n        <slot\n          name=\"error\"\n          @slotchange=${(e: Event) => {\n            hasErrorSlot.value = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n          }}></slot>\n        ${when(\n          hasErrorSlot,\n          () => html``,\n          () => html`\n            <div class=\"error-state\" role=\"alert\">\n              <div class=\"icon\">\n                <ore-icon name=\"triangle-alert\" size=\"100%\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n              </div>\n              ${renderText('title', props['error-label'])} ${renderText('description', props['error-description'])}\n              ${when(\n                () => Boolean(props.retryable.value),\n                () => html`\n                  <button class=\"retry-btn\" type=\"button\" @click=${() => emit('retry')}>\n                    <ore-icon name=\"refresh-cw\" size=\"1em\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                    Try again\n                  </button>\n                `,\n              )}\n            </div>\n          `,\n        )}\n      </div>\n\n      <div class=\"region region-success\" role=\"presentation\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"2QA8DA,IAAa,EAAY,yBACH,EAAW,CAC/B,MAAO,CACL,oBAAqB,EAAA,KAAK,OAAO,EACjC,cAAe,EAAA,KAAK,OAAO,gBAAgB,EAC3C,oBAAqB,EAAA,KAAK,OAAO,EACjC,cAAe,EAAA,KAAK,OAAO,sBAAsB,EACjD,UAAW,EAAA,KAAK,KAAK,EAAK,EAC1B,OAAQ,EAAA,KAAK,MAAM,CAAC,OAAQ,UAAW,QAAS,QAAS,SAAS,EAAY,SAAS,CACzF,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAA+B,EAE/B,GAAA,EAAA,EAAA,OAAA,CAAwB,EAAK,EAC7B,GAAA,EAAA,EAAA,OAAA,CAAsB,EAAK,EAC3B,GAAA,EAAA,EAAA,OAAA,CAAsB,EAAK,GAIjC,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,aAAiB,EAAM,OAAO,QAAU,UAAY,OAAS,QAC7D,cAAkB,EAAM,OAAO,QAAU,UAAY,WAAa,KAClE,aAAiB,EAAM,OAAO,QAAU,QAAU,YAAc,SAChE,OAAQ,EAAM,MAChB,CACF,CAAC,EAED,IAAM,GAAc,EAAoC,QACtD,GAAM,MAAQ,EAAA,IAAI,aAAa,EAAU,IAAI,EAAK,MAAQ,GAO5D,MAAO,GAAA,IAAI;;;;;;wBAMU,GAAa,CAC1B,EAAe,MAAS,EAAE,OAA2B,cAAc,CAAC,CAAC,OAAS,CAChF,EAAE;qBAEF,MACM,EAAA,IAAI,OACJ,EAAA,IAAI;;;;;;WAOZ,EAAE;;;;;;wBAMe,GAAa,CAC1B,EAAa,MAAS,EAAE,OAA2B,cAAc,CAAC,CAAC,OAAS,CAC9E,EAAE;qBAEF,MACM,EAAA,IAAI,OACJ,EAAA,IAAI;;;;;gBAKJ,EAAW,QAAS,EAAM,cAAc,EAAE,GAAG,EAAW,cAAe,EAAM,oBAAoB,EAAE;;WAG3G,EAAE;;;;;;wBAMe,GAAa,CAC1B,EAAa,MAAS,EAAE,OAA2B,cAAc,CAAC,CAAC,OAAS,CAC9E,EAAE;qBAEF,MACM,EAAA,IAAI,OACJ,EAAA,IAAI;;;;;gBAKJ,EAAW,QAAS,EAAM,cAAc,EAAE,GAAG,EAAW,cAAe,EAAM,oBAAoB,EAAE;+BAE7F,EAAQ,EAAM,UAAU,UACxB,EAAA,IAAI;uEAC+C,EAAK,OAAO,EAAE;;;;iBAKzE,EAAE;;WAGR,EAAE;;;;;;KAOR,EACA,OAAQ,CAAC,EAAA,mBAAoB,EAAA,OAAe,CAC9C,CAAC"}
+{"version":3,"file":"async.cjs","names":[],"sources":["../src/feedback/async/async.ts"],"sourcesContent":["import { define, html, prop, bind, useEmit, when } from '@vielzeug/ore';\nimport { type Readable, signal } from '@vielzeug/ripple';\n\nimport { reducedMotionMixin } from '../../styles';\nimport componentStyles from './async.css?inline';\n\nexport type AsyncStatus = 'idle' | 'loading' | 'empty' | 'error' | 'success';\n\nexport type OreAsyncEvents = {\n  retry: void;\n};\n\nexport type OreAsyncProps = {\n  'empty-description'?: string;\n  'empty-label'?: string;\n  'error-description'?: string;\n  'error-label'?: string;\n  retryable?: boolean;\n  status?: AsyncStatus;\n};\n\n/**\n * A container for handling asynchronous states (loading, empty, error, success).\n * Simplifies data fetching UI by providing consistent fallbacks.\n *\n * @element ore-async\n *\n * @attr {string} status - current state: 'idle' | 'loading' | 'empty' | 'error' | 'success' (default: 'success')\n * @attr {boolean} retryable - show retry button in error state (default: false)\n * @attr {string} empty-label - title for empty state (default: 'No content yet')\n * @attr {string} empty-description - optional text for empty state\n * @attr {string} error-label - title for error state (default: 'Something went wrong')\n * @attr {string} error-description - optional text for error state\n *\n * @fires retry - Emitted when the retry button is clicked (no detail payload)\n *\n * @slot - default content shown in 'success' state\n * @slot loading - custom loading UI (overrides default skeletons)\n * @slot empty - custom empty UI (overrides default icon/label)\n * @slot error - custom error UI (overrides default icon/label)\n *\n * @cssprop --async-color - Text/icon color used by default async state content\n * @cssprop --async-gap - Vertical spacing between icon, title, description, and actions\n * @cssprop --async-icon-size - Icon size for built-in loading/empty/error visuals\n * @example\n * ```html\n * <!-- Success state: default slot is shown -->\n * <ore-async status=\"success\">\n *   <ul><li>Item one</li><li>Item two</li></ul>\n * </ore-async>\n *\n * <!-- Loading state: shows skeleton placeholders -->\n * <ore-async status=\"loading\"></ore-async>\n *\n * <!-- Empty state with custom message -->\n * <ore-async status=\"empty\" empty-label=\"No results\" empty-description=\"Try adjusting your filters.\"></ore-async>\n *\n * <!-- Error state with retry button -->\n * <ore-async status=\"error\" retryable error-label=\"Failed to load\" error-description=\"Check your connection.\"></ore-async>\n * ```\n */\nexport const ASYNC_TAG = 'ore-async' as const;\ndefine<OreAsyncProps>(ASYNC_TAG, {\n  props: {\n    'empty-description': prop.string(),\n    'empty-label': prop.string('No content yet'),\n    'error-description': prop.string(),\n    'error-label': prop.string('Something went wrong'),\n    retryable: prop.bool(false),\n    status: prop.oneOf(['idle', 'loading', 'empty', 'error', 'success'] as const, 'success'),\n  },\n  setup(props) {\n    const emit = useEmit<OreAsyncEvents>();\n\n    const hasLoadingSlot = signal(false);\n    const hasEmptySlot = signal(false);\n    const hasErrorSlot = signal(false);\n\n    // Reflect status onto the host so CSS can show/hide each region.\n    // ARIA attributes are driven reactively by bind().\n    bind({\n      attr: {\n        ariaBusy: () => (props.status.value === 'loading' ? 'true' : 'false'),\n        ariaLabel: () => (props.status.value === 'loading' ? 'Loading…' : null),\n        ariaLive: () => (props.status.value === 'error' ? 'assertive' : 'polite'),\n        status: props.status,\n      },\n    });\n\n    const renderText = (className: 'title' | 'description', text: Readable<string | undefined> | undefined) => () =>\n      text?.value ? html`<p class=\"${className}\">${text}</p>` : '';\n\n    // All four regions are always in the shadow DOM — CSS on :host([status=\"…\"])\n    // toggles their visibility. This means:\n    // - No DOM churn on status transitions (no teardown/rebuild of slot elements).\n    // - Live regions are always present, so screen readers announce correctly.\n    // - focus is never lost across status changes.\n    return html`\n      <div class=\"region region-idle\" role=\"presentation\"></div>\n\n      <div class=\"region region-loading\" role=\"status\">\n        <slot\n          name=\"loading\"\n          @slotchange=${(e: Event) => {\n            hasLoadingSlot.value = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n          }}></slot>\n        ${when(\n          hasLoadingSlot,\n          () => html``,\n          () => html`\n            <div class=\"loading-default\" aria-hidden=\"true\">\n              <ore-skeleton variant=\"text\" lines=\"1\" width=\"40%\"></ore-skeleton>\n              <ore-skeleton variant=\"text\" lines=\"3\" width=\"100%\"></ore-skeleton>\n              <ore-skeleton variant=\"text\" lines=\"1\" width=\"60%\"></ore-skeleton>\n            </div>\n          `,\n        )}\n      </div>\n\n      <div class=\"region region-empty\">\n        <slot\n          name=\"empty\"\n          @slotchange=${(e: Event) => {\n            hasEmptySlot.value = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n          }}></slot>\n        ${when(\n          hasEmptySlot,\n          () => html``,\n          () => html`\n            <div class=\"empty-state\" role=\"status\">\n              <div class=\"icon\">\n                <ore-icon name=\"inbox\" size=\"100%\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n              </div>\n              ${renderText('title', props['empty-label'])} ${renderText('description', props['empty-description'])}\n            </div>\n          `,\n        )}\n      </div>\n\n      <div class=\"region region-error\">\n        <slot\n          name=\"error\"\n          @slotchange=${(e: Event) => {\n            hasErrorSlot.value = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n          }}></slot>\n        ${when(\n          hasErrorSlot,\n          () => html``,\n          () => html`\n            <div class=\"error-state\" role=\"alert\">\n              <div class=\"icon\">\n                <ore-icon name=\"triangle-alert\" size=\"100%\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n              </div>\n              ${renderText('title', props['error-label'])} ${renderText('description', props['error-description'])}\n              ${when(\n                () => Boolean(props.retryable.value),\n                () => html`\n                  <button class=\"retry-btn\" type=\"button\" @click=${() => emit('retry')}>\n                    <ore-icon name=\"refresh-cw\" size=\"1em\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                    Try again\n                  </button>\n                `,\n              )}\n            </div>\n          `,\n        )}\n      </div>\n\n      <div class=\"region region-success\" role=\"presentation\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"qOA6DA,IAAa,EAAY,yBACH,EAAW,CAC/B,MAAO,CACL,oBAAqB,EAAA,KAAK,OAAO,EACjC,cAAe,EAAA,KAAK,OAAO,gBAAgB,EAC3C,oBAAqB,EAAA,KAAK,OAAO,EACjC,cAAe,EAAA,KAAK,OAAO,sBAAsB,EACjD,UAAW,EAAA,KAAK,KAAK,EAAK,EAC1B,OAAQ,EAAA,KAAK,MAAM,CAAC,OAAQ,UAAW,QAAS,QAAS,SAAS,EAAY,SAAS,CACzF,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAA+B,EAE/B,GAAA,EAAA,EAAA,OAAA,CAAwB,EAAK,EAC7B,GAAA,EAAA,EAAA,OAAA,CAAsB,EAAK,EAC3B,GAAA,EAAA,EAAA,OAAA,CAAsB,EAAK,GAIjC,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,aAAiB,EAAM,OAAO,QAAU,UAAY,OAAS,QAC7D,cAAkB,EAAM,OAAO,QAAU,UAAY,WAAa,KAClE,aAAiB,EAAM,OAAO,QAAU,QAAU,YAAc,SAChE,OAAQ,EAAM,MAChB,CACF,CAAC,EAED,IAAM,GAAc,EAAoC,QACtD,GAAM,MAAQ,EAAA,IAAI,aAAa,EAAU,IAAI,EAAK,MAAQ,GAO5D,MAAO,GAAA,IAAI;;;;;;wBAMU,GAAa,CAC1B,EAAe,MAAS,EAAE,OAA2B,cAAc,CAAC,CAAC,OAAS,CAChF,EAAE;qBAEF,MACM,EAAA,IAAI,OACJ,EAAA,IAAI;;;;;;WAOZ,EAAE;;;;;;wBAMe,GAAa,CAC1B,EAAa,MAAS,EAAE,OAA2B,cAAc,CAAC,CAAC,OAAS,CAC9E,EAAE;qBAEF,MACM,EAAA,IAAI,OACJ,EAAA,IAAI;;;;;gBAKJ,EAAW,QAAS,EAAM,cAAc,EAAE,GAAG,EAAW,cAAe,EAAM,oBAAoB,EAAE;;WAG3G,EAAE;;;;;;wBAMe,GAAa,CAC1B,EAAa,MAAS,EAAE,OAA2B,cAAc,CAAC,CAAC,OAAS,CAC9E,EAAE;qBAEF,MACM,EAAA,IAAI,OACJ,EAAA,IAAI;;;;;gBAKJ,EAAW,QAAS,EAAM,cAAc,EAAE,GAAG,EAAW,cAAe,EAAM,oBAAoB,EAAE;+BAE7F,EAAQ,EAAM,UAAU,UACxB,EAAA,IAAI;uEAC+C,EAAK,OAAO,EAAE;;;;iBAKzE,EAAE;;WAGR,EAAE;;;;;;KAOR,EACA,OAAQ,CAAC,EAAA,mBAAoB,EAAA,OAAe,CAC9C,CAAC"}

package/dist/async.js

@@ -1,7 +1,6 @@
 import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
 import t from "./feedback/async/async.css.js";
-import { bind as n, define as r, html as i, prop as a, useEmit as o } from "@vielzeug/ore";
-import { when as s } from "@vielzeug/ore/directives";
+import { bind as n, define as r, html as i, prop as a, useEmit as o, when as s } from "@vielzeug/ore";
 import { signal as c } from "@vielzeug/ripple";
 //#region src/feedback/async/async.ts
 var l = "ore-async";

package/dist/async.js.map

@@ -1 +1 @@
-{"version":3,"file":"async.js","names":[],"sources":["../src/feedback/async/async.ts"],"sourcesContent":["import { define, html, prop, bind, useEmit } from '@vielzeug/ore';\nimport { when } from '@vielzeug/ore/directives';\nimport { type Readable, signal } from '@vielzeug/ripple';\n\nimport { reducedMotionMixin } from '../../styles';\nimport componentStyles from './async.css?inline';\n\nexport type AsyncStatus = 'idle' | 'loading' | 'empty' | 'error' | 'success';\n\nexport type OreAsyncEvents = {\n  retry: void;\n};\n\nexport type OreAsyncProps = {\n  'empty-description'?: string;\n  'empty-label'?: string;\n  'error-description'?: string;\n  'error-label'?: string;\n  retryable?: boolean;\n  status?: AsyncStatus;\n};\n\n/**\n * A container for handling asynchronous states (loading, empty, error, success).\n * Simplifies data fetching UI by providing consistent fallbacks.\n *\n * @element ore-async\n *\n * @attr {string} status - current state: 'idle' | 'loading' | 'empty' | 'error' | 'success' (default: 'success')\n * @attr {boolean} retryable - show retry button in error state (default: false)\n * @attr {string} empty-label - title for empty state (default: 'No content yet')\n * @attr {string} empty-description - optional text for empty state\n * @attr {string} error-label - title for error state (default: 'Something went wrong')\n * @attr {string} error-description - optional text for error state\n *\n * @fires retry - Emitted when the retry button is clicked (no detail payload)\n *\n * @slot - default content shown in 'success' state\n * @slot loading - custom loading UI (overrides default skeletons)\n * @slot empty - custom empty UI (overrides default icon/label)\n * @slot error - custom error UI (overrides default icon/label)\n *\n * @cssprop --async-color - Text/icon color used by default async state content\n * @cssprop --async-gap - Vertical spacing between icon, title, description, and actions\n * @cssprop --async-icon-size - Icon size for built-in loading/empty/error visuals\n * @example\n * ```html\n * <!-- Success state: default slot is shown -->\n * <ore-async status=\"success\">\n *   <ul><li>Item one</li><li>Item two</li></ul>\n * </ore-async>\n *\n * <!-- Loading state: shows skeleton placeholders -->\n * <ore-async status=\"loading\"></ore-async>\n *\n * <!-- Empty state with custom message -->\n * <ore-async status=\"empty\" empty-label=\"No results\" empty-description=\"Try adjusting your filters.\"></ore-async>\n *\n * <!-- Error state with retry button -->\n * <ore-async status=\"error\" retryable error-label=\"Failed to load\" error-description=\"Check your connection.\"></ore-async>\n * ```\n */\nexport const ASYNC_TAG = 'ore-async' as const;\ndefine<OreAsyncProps>(ASYNC_TAG, {\n  props: {\n    'empty-description': prop.string(),\n    'empty-label': prop.string('No content yet'),\n    'error-description': prop.string(),\n    'error-label': prop.string('Something went wrong'),\n    retryable: prop.bool(false),\n    status: prop.oneOf(['idle', 'loading', 'empty', 'error', 'success'] as const, 'success'),\n  },\n  setup(props) {\n    const emit = useEmit<OreAsyncEvents>();\n\n    const hasLoadingSlot = signal(false);\n    const hasEmptySlot = signal(false);\n    const hasErrorSlot = signal(false);\n\n    // Reflect status onto the host so CSS can show/hide each region.\n    // ARIA attributes are driven reactively by bind().\n    bind({\n      attr: {\n        ariaBusy: () => (props.status.value === 'loading' ? 'true' : 'false'),\n        ariaLabel: () => (props.status.value === 'loading' ? 'Loading…' : null),\n        ariaLive: () => (props.status.value === 'error' ? 'assertive' : 'polite'),\n        status: props.status,\n      },\n    });\n\n    const renderText = (className: 'title' | 'description', text: Readable<string | undefined> | undefined) => () =>\n      text?.value ? html`<p class=\"${className}\">${text}</p>` : '';\n\n    // All four regions are always in the shadow DOM — CSS on :host([status=\"…\"])\n    // toggles their visibility. This means:\n    // - No DOM churn on status transitions (no teardown/rebuild of slot elements).\n    // - Live regions are always present, so screen readers announce correctly.\n    // - focus is never lost across status changes.\n    return html`\n      <div class=\"region region-idle\" role=\"presentation\"></div>\n\n      <div class=\"region region-loading\" role=\"status\">\n        <slot\n          name=\"loading\"\n          @slotchange=${(e: Event) => {\n            hasLoadingSlot.value = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n          }}></slot>\n        ${when(\n          hasLoadingSlot,\n          () => html``,\n          () => html`\n            <div class=\"loading-default\" aria-hidden=\"true\">\n              <ore-skeleton variant=\"text\" lines=\"1\" width=\"40%\"></ore-skeleton>\n              <ore-skeleton variant=\"text\" lines=\"3\" width=\"100%\"></ore-skeleton>\n              <ore-skeleton variant=\"text\" lines=\"1\" width=\"60%\"></ore-skeleton>\n            </div>\n          `,\n        )}\n      </div>\n\n      <div class=\"region region-empty\">\n        <slot\n          name=\"empty\"\n          @slotchange=${(e: Event) => {\n            hasEmptySlot.value = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n          }}></slot>\n        ${when(\n          hasEmptySlot,\n          () => html``,\n          () => html`\n            <div class=\"empty-state\" role=\"status\">\n              <div class=\"icon\">\n                <ore-icon name=\"inbox\" size=\"100%\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n              </div>\n              ${renderText('title', props['empty-label'])} ${renderText('description', props['empty-description'])}\n            </div>\n          `,\n        )}\n      </div>\n\n      <div class=\"region region-error\">\n        <slot\n          name=\"error\"\n          @slotchange=${(e: Event) => {\n            hasErrorSlot.value = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n          }}></slot>\n        ${when(\n          hasErrorSlot,\n          () => html``,\n          () => html`\n            <div class=\"error-state\" role=\"alert\">\n              <div class=\"icon\">\n                <ore-icon name=\"triangle-alert\" size=\"100%\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n              </div>\n              ${renderText('title', props['error-label'])} ${renderText('description', props['error-description'])}\n              ${when(\n                () => Boolean(props.retryable.value),\n                () => html`\n                  <button class=\"retry-btn\" type=\"button\" @click=${() => emit('retry')}>\n                    <ore-icon name=\"refresh-cw\" size=\"1em\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                    Try again\n                  </button>\n                `,\n              )}\n            </div>\n          `,\n        )}\n      </div>\n\n      <div class=\"region region-success\" role=\"presentation\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":";;;;;;AA8DA,IAAa,IAAY;AACzB,EAAsB,GAAW;CAC/B,OAAO;EACL,qBAAqB,EAAK,OAAO;EACjC,eAAe,EAAK,OAAO,gBAAgB;EAC3C,qBAAqB,EAAK,OAAO;EACjC,eAAe,EAAK,OAAO,sBAAsB;EACjD,WAAW,EAAK,KAAK,EAAK;EAC1B,QAAQ,EAAK,MAAM;GAAC;GAAQ;GAAW;GAAS;GAAS;EAAS,GAAY,SAAS;CACzF;CACA,MAAM,GAAO;EACX,IAAM,IAAO,EAAwB,GAE/B,IAAiB,EAAO,EAAK,GAC7B,IAAe,EAAO,EAAK,GAC3B,IAAe,EAAO,EAAK;EAIjC,EAAK,EACH,MAAM;GACJ,gBAAiB,EAAM,OAAO,UAAU,YAAY,SAAS;GAC7D,iBAAkB,EAAM,OAAO,UAAU,YAAY,aAAa;GAClE,gBAAiB,EAAM,OAAO,UAAU,UAAU,cAAc;GAChE,QAAQ,EAAM;EAChB,EACF,CAAC;EAED,IAAM,KAAc,GAAoC,YACtD,GAAM,QAAQ,CAAI,aAAa,EAAU,IAAI,EAAK,QAAQ;EAO5D,OAAO,CAAI;;;;;;yBAMU,MAAa;GAC1B,EAAe,QAAS,EAAE,OAA2B,cAAc,CAAC,CAAC,SAAS;EAChF,EAAE;UACF,EACA,SACM,CAAI,UACJ,CAAI;;;;;;WAOZ,EAAE;;;;;;yBAMe,MAAa;GAC1B,EAAa,QAAS,EAAE,OAA2B,cAAc,CAAC,CAAC,SAAS;EAC9E,EAAE;UACF,EACA,SACM,CAAI,UACJ,CAAI;;;;;gBAKJ,EAAW,SAAS,EAAM,cAAc,EAAE,GAAG,EAAW,eAAe,EAAM,oBAAoB,EAAE;;WAG3G,EAAE;;;;;;yBAMe,MAAa;GAC1B,EAAa,QAAS,EAAE,OAA2B,cAAc,CAAC,CAAC,SAAS;EAC9E,EAAE;UACF,EACA,SACM,CAAI,UACJ,CAAI;;;;;gBAKJ,EAAW,SAAS,EAAM,cAAc,EAAE,GAAG,EAAW,eAAe,EAAM,oBAAoB,EAAE;gBACnG,QACM,EAAQ,EAAM,UAAU,aACxB,CAAI;yEAC+C,EAAK,OAAO,EAAE;;;;iBAKzE,EAAE;;WAGR,EAAE;;;;;;;CAOR;CACA,QAAQ,CAAC,GAAoB,CAAe;AAC9C,CAAC"}
+{"version":3,"file":"async.js","names":[],"sources":["../src/feedback/async/async.ts"],"sourcesContent":["import { define, html, prop, bind, useEmit, when } from '@vielzeug/ore';\nimport { type Readable, signal } from '@vielzeug/ripple';\n\nimport { reducedMotionMixin } from '../../styles';\nimport componentStyles from './async.css?inline';\n\nexport type AsyncStatus = 'idle' | 'loading' | 'empty' | 'error' | 'success';\n\nexport type OreAsyncEvents = {\n  retry: void;\n};\n\nexport type OreAsyncProps = {\n  'empty-description'?: string;\n  'empty-label'?: string;\n  'error-description'?: string;\n  'error-label'?: string;\n  retryable?: boolean;\n  status?: AsyncStatus;\n};\n\n/**\n * A container for handling asynchronous states (loading, empty, error, success).\n * Simplifies data fetching UI by providing consistent fallbacks.\n *\n * @element ore-async\n *\n * @attr {string} status - current state: 'idle' | 'loading' | 'empty' | 'error' | 'success' (default: 'success')\n * @attr {boolean} retryable - show retry button in error state (default: false)\n * @attr {string} empty-label - title for empty state (default: 'No content yet')\n * @attr {string} empty-description - optional text for empty state\n * @attr {string} error-label - title for error state (default: 'Something went wrong')\n * @attr {string} error-description - optional text for error state\n *\n * @fires retry - Emitted when the retry button is clicked (no detail payload)\n *\n * @slot - default content shown in 'success' state\n * @slot loading - custom loading UI (overrides default skeletons)\n * @slot empty - custom empty UI (overrides default icon/label)\n * @slot error - custom error UI (overrides default icon/label)\n *\n * @cssprop --async-color - Text/icon color used by default async state content\n * @cssprop --async-gap - Vertical spacing between icon, title, description, and actions\n * @cssprop --async-icon-size - Icon size for built-in loading/empty/error visuals\n * @example\n * ```html\n * <!-- Success state: default slot is shown -->\n * <ore-async status=\"success\">\n *   <ul><li>Item one</li><li>Item two</li></ul>\n * </ore-async>\n *\n * <!-- Loading state: shows skeleton placeholders -->\n * <ore-async status=\"loading\"></ore-async>\n *\n * <!-- Empty state with custom message -->\n * <ore-async status=\"empty\" empty-label=\"No results\" empty-description=\"Try adjusting your filters.\"></ore-async>\n *\n * <!-- Error state with retry button -->\n * <ore-async status=\"error\" retryable error-label=\"Failed to load\" error-description=\"Check your connection.\"></ore-async>\n * ```\n */\nexport const ASYNC_TAG = 'ore-async' as const;\ndefine<OreAsyncProps>(ASYNC_TAG, {\n  props: {\n    'empty-description': prop.string(),\n    'empty-label': prop.string('No content yet'),\n    'error-description': prop.string(),\n    'error-label': prop.string('Something went wrong'),\n    retryable: prop.bool(false),\n    status: prop.oneOf(['idle', 'loading', 'empty', 'error', 'success'] as const, 'success'),\n  },\n  setup(props) {\n    const emit = useEmit<OreAsyncEvents>();\n\n    const hasLoadingSlot = signal(false);\n    const hasEmptySlot = signal(false);\n    const hasErrorSlot = signal(false);\n\n    // Reflect status onto the host so CSS can show/hide each region.\n    // ARIA attributes are driven reactively by bind().\n    bind({\n      attr: {\n        ariaBusy: () => (props.status.value === 'loading' ? 'true' : 'false'),\n        ariaLabel: () => (props.status.value === 'loading' ? 'Loading…' : null),\n        ariaLive: () => (props.status.value === 'error' ? 'assertive' : 'polite'),\n        status: props.status,\n      },\n    });\n\n    const renderText = (className: 'title' | 'description', text: Readable<string | undefined> | undefined) => () =>\n      text?.value ? html`<p class=\"${className}\">${text}</p>` : '';\n\n    // All four regions are always in the shadow DOM — CSS on :host([status=\"…\"])\n    // toggles their visibility. This means:\n    // - No DOM churn on status transitions (no teardown/rebuild of slot elements).\n    // - Live regions are always present, so screen readers announce correctly.\n    // - focus is never lost across status changes.\n    return html`\n      <div class=\"region region-idle\" role=\"presentation\"></div>\n\n      <div class=\"region region-loading\" role=\"status\">\n        <slot\n          name=\"loading\"\n          @slotchange=${(e: Event) => {\n            hasLoadingSlot.value = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n          }}></slot>\n        ${when(\n          hasLoadingSlot,\n          () => html``,\n          () => html`\n            <div class=\"loading-default\" aria-hidden=\"true\">\n              <ore-skeleton variant=\"text\" lines=\"1\" width=\"40%\"></ore-skeleton>\n              <ore-skeleton variant=\"text\" lines=\"3\" width=\"100%\"></ore-skeleton>\n              <ore-skeleton variant=\"text\" lines=\"1\" width=\"60%\"></ore-skeleton>\n            </div>\n          `,\n        )}\n      </div>\n\n      <div class=\"region region-empty\">\n        <slot\n          name=\"empty\"\n          @slotchange=${(e: Event) => {\n            hasEmptySlot.value = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n          }}></slot>\n        ${when(\n          hasEmptySlot,\n          () => html``,\n          () => html`\n            <div class=\"empty-state\" role=\"status\">\n              <div class=\"icon\">\n                <ore-icon name=\"inbox\" size=\"100%\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n              </div>\n              ${renderText('title', props['empty-label'])} ${renderText('description', props['empty-description'])}\n            </div>\n          `,\n        )}\n      </div>\n\n      <div class=\"region region-error\">\n        <slot\n          name=\"error\"\n          @slotchange=${(e: Event) => {\n            hasErrorSlot.value = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n          }}></slot>\n        ${when(\n          hasErrorSlot,\n          () => html``,\n          () => html`\n            <div class=\"error-state\" role=\"alert\">\n              <div class=\"icon\">\n                <ore-icon name=\"triangle-alert\" size=\"100%\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n              </div>\n              ${renderText('title', props['error-label'])} ${renderText('description', props['error-description'])}\n              ${when(\n                () => Boolean(props.retryable.value),\n                () => html`\n                  <button class=\"retry-btn\" type=\"button\" @click=${() => emit('retry')}>\n                    <ore-icon name=\"refresh-cw\" size=\"1em\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                    Try again\n                  </button>\n                `,\n              )}\n            </div>\n          `,\n        )}\n      </div>\n\n      <div class=\"region region-success\" role=\"presentation\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":";;;;;AA6DA,IAAa,IAAY;AACzB,EAAsB,GAAW;CAC/B,OAAO;EACL,qBAAqB,EAAK,OAAO;EACjC,eAAe,EAAK,OAAO,gBAAgB;EAC3C,qBAAqB,EAAK,OAAO;EACjC,eAAe,EAAK,OAAO,sBAAsB;EACjD,WAAW,EAAK,KAAK,EAAK;EAC1B,QAAQ,EAAK,MAAM;GAAC;GAAQ;GAAW;GAAS;GAAS;EAAS,GAAY,SAAS;CACzF;CACA,MAAM,GAAO;EACX,IAAM,IAAO,EAAwB,GAE/B,IAAiB,EAAO,EAAK,GAC7B,IAAe,EAAO,EAAK,GAC3B,IAAe,EAAO,EAAK;EAIjC,EAAK,EACH,MAAM;GACJ,gBAAiB,EAAM,OAAO,UAAU,YAAY,SAAS;GAC7D,iBAAkB,EAAM,OAAO,UAAU,YAAY,aAAa;GAClE,gBAAiB,EAAM,OAAO,UAAU,UAAU,cAAc;GAChE,QAAQ,EAAM;EAChB,EACF,CAAC;EAED,IAAM,KAAc,GAAoC,YACtD,GAAM,QAAQ,CAAI,aAAa,EAAU,IAAI,EAAK,QAAQ;EAO5D,OAAO,CAAI;;;;;;yBAMU,MAAa;GAC1B,EAAe,QAAS,EAAE,OAA2B,cAAc,CAAC,CAAC,SAAS;EAChF,EAAE;UACF,EACA,SACM,CAAI,UACJ,CAAI;;;;;;WAOZ,EAAE;;;;;;yBAMe,MAAa;GAC1B,EAAa,QAAS,EAAE,OAA2B,cAAc,CAAC,CAAC,SAAS;EAC9E,EAAE;UACF,EACA,SACM,CAAI,UACJ,CAAI;;;;;gBAKJ,EAAW,SAAS,EAAM,cAAc,EAAE,GAAG,EAAW,eAAe,EAAM,oBAAoB,EAAE;;WAG3G,EAAE;;;;;;yBAMe,MAAa;GAC1B,EAAa,QAAS,EAAE,OAA2B,cAAc,CAAC,CAAC,SAAS;EAC9E,EAAE;UACF,EACA,SACM,CAAI,UACJ,CAAI;;;;;gBAKJ,EAAW,SAAS,EAAM,cAAc,EAAE,GAAG,EAAW,eAAe,EAAM,oBAAoB,EAAE;gBACnG,QACM,EAAQ,EAAM,UAAU,aACxB,CAAI;yEAC+C,EAAK,OAAO,EAAE;;;;iBAKzE,EAAE;;WAGR,EAAE;;;;;;;CAOR;CACA,QAAQ,CAAC,GAAoB,CAAe;AAC9C,CAAC"}

package/dist/calendar.cjs

@@ -1,22 +1,22 @@
-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("./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/ripple"),s=require("@vielzeug/tempo"),c=require("@vielzeug/ore/forms");var l=`ore-calendar`,u=3;(0,a.define)(l,{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,o.computed)(()=>e.disabled.value===!0),i=(0,o.computed)(()=>e.expanded.value===!0),l=(0,o.signal)(void 0),d=(0,o.computed)(()=>l.value===void 0?r.parseIso(e.value.value):l.value),f=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){l.value=e,p.value=`day`,m.value=f.displayYear(),h.value=f.displayMonth(),t(`change`,{isoValue:r.toIsoString(e)})},get value(){return d.value},get weekendDays(){return e[`weekend-days`].value??[]}}),p=(0,o.signal)(`day`),m=(0,o.signal)(f.displayYear()),h=(0,o.signal)(f.displayMonth());(0,c.useField)({disabled:n,toFormValue:e=>e||null,value:(0,o.computed)(()=>r.toIsoString(d.value)??``)});let g=(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}),_=(0,o.computed)(()=>(m.value,h.value,d.value,f.dayCells())),v=(0,o.computed)(()=>(m.value,f.monthCells())),y=(0,o.computed)(()=>(m.value,f.yearCells())),b=(0,o.computed)(()=>f.weekdayLabels()),x=(0,o.computed)(()=>(0,s.format)(s.Temporal.PlainDate.from({day:1,month:h.value,year:m.value}),{intl:{month:`long`},locale:e.locale.value??(typeof navigator<`u`?navigator.language:`en`),tz:`UTC`})),S=(0,o.computed)(()=>String(m.value)),C=(0,o.computed)(()=>`${x.value} ${S.value}`);function w(){p.value===`day`?f.prevMonth():f.prevYear(),m.value=f.displayYear(),h.value=f.displayMonth()}function T(){p.value===`day`?f.nextMonth():f.nextYear(),m.value=f.displayYear(),h.value=f.displayMonth()}function E(){let e=[`day`,`month`,`year`],t=e[(e.indexOf(p.value)+1)%e.length];f.setView(t),p.value=t}function D(e){n.value||(f.goTo(f.displayYear(),e),f.setView(`day`),m.value=f.displayYear(),h.value=f.displayMonth(),p.value=`day`)}function O(e){n.value||(f.goTo(e,f.displayMonth()),f.setView(`month`),m.value=f.displayYear(),p.value=`month`)}function k(e){if(n.value)return;let t=r.parseIso(e);t&&f.select(t)}function A(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(),k(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 j(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":()=>C.value,role:`group`},class:{"is-disabled":n}}),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="${n}" @click="${w}">
             <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`}"
+            :aria-label="${()=>`Switch to ${p.value===`day`?`month`:p.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>
+            @click="${E}">
+            <span class="cal-label-month">${x}</span><span class="cal-label-sep" aria-hidden="true">/</span
+            ><span class="cal-label-year">${S}</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="${n}" @click="${T}">
             <ore-icon name="chevron-right" size="16" stroke-width="2" aria-hidden="true"></ore-icon>
           </button>
         </div>
@@ -26,12 +26,12 @@ 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="${()=>C.value}"
+          ?hidden="${()=>p.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>`)}
+            ${()=>b.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">
+          ${()=>{let e=_.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"
@@ -46,10 +46,10 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                         data-iso="${e.iso}"
                         data-day="${String(e.day)}"
                         tabindex="${()=>e.isDisabled||n.value?`-1`:`0`}"
-                        @click="${()=>A(e.iso)}"
-                        @keydown="${j}">
+                        @click="${()=>k(e.iso)}"
+                        @keydown="${A}">
                         ${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
+                        ${()=>{let t=g.value.get(e.iso)??[];if(!t.length)return a.html``;let n=t.slice(0,u),r=t.length-u;return i.value?a.html`<div
                               class="cal-events"
                               aria-label="${()=>`${t.length} event${t.length>1?`s`:``}`}">
                               ${n.map(e=>a.html`<ore-badge
@@ -57,7 +57,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                                     size="xs"
                                     rounded="sm"
                                     aria-label="${e.label}"
-                                    :style="${(0,o.styleMap)({"--badge-bg":e.color,"--badge-border-color":e.color})}">
+                                    :style="${(0,a.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"
@@ -71,7 +71,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                                   dot
                                   size="xs"
                                   aria-hidden="true"
-                                  :style="${(0,o.styleMap)({"--badge-bg":e.color,"--badge-border-color":e.color})}"></ore-badge>`)}
+                                  :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>`)}
@@ -82,9 +82,9 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         <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">
+          :aria-label="${()=>S.value}"
+          ?hidden="${()=>p.value!==`month`}">
+          ${()=>{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-month"
                         role="gridcell"
@@ -93,8 +93,8 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                         ?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))}">
+                        @click="${()=>D(e.month)}"
+                        @keydown="${t=>j(t,`.cal-cell-month`,4,()=>D(e.month))}">
                         ${e.shortLabel}
                       </div>`)}
                 </div>`)}}
@@ -105,8 +105,8 @@ 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">
+          ?hidden="${()=>p.value!==`year`}">
+          ${()=>{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
                         class="cal-cell cal-cell-year"
                         role="gridcell"
@@ -115,12 +115,12 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                         ?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))}">
+                        @click="${()=>O(e.year)}"
+                        @keydown="${t=>j(t,`.cal-cell-year`,4,()=>O(e.year))}">
                         ${String(e.year)}
                       </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=l;
 //# sourceMappingURL=calendar.cjs.map

package/dist/calendar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.cjs","names":[],"sources":["../src/inputs/calendar/calendar.ts"],"sourcesContent":["import { define, html, prop, bind, useEmit } from '@vielzeug/ore';\nimport { styleMap } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { Temporal, format } from '@vielzeug/tempo';\n\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../shared';\n\nimport '../../content/icon/icon';\nimport '../../feedback/badge/badge';\nimport { createDatePickerControl, parseIso, toIsoString, type DatePickerView } from '../../headless';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, reducedMotionMixin } from '../../styles';\nimport componentStyles from './calendar.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type OreCalendarEvents = {\n  change: { isoValue: string | null };\n};\n\n/**\n * A calendar event entry.\n * Dates must be ISO 8601 strings (yyyy-MM-dd).\n *\n * The `color` field accepts any valid CSS color value (e.g. `'#e11d48'`,\n * `'var(--color-primary)'`). An invalid value silently falls back to the\n * component's theme color. Only pass values you control.\n */\nexport type CalendarEvent = {\n  /**\n   * Any CSS color value for the event dot / pill.\n   * Defaults to the component's theme color when omitted.\n   * Rendered via `styleMap()`, which strips `;`/`{`/`}` so the value can't break out of\n   * its custom-property declaration — it is not a full CSS-color syntax validator, so an\n   * invalid (but injection-safe) value may still render as no color.\n   */\n  color?: string;\n  /** ISO date the event falls on (yyyy-MM-dd) */\n  date: string;\n  /** Unique identifier */\n  id: string;\n  /** Short label shown in the calendar cell */\n  label: string;\n};\n\nexport type OreCalendarProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable all date selection */\n  disabled?: boolean;\n  /**\n   * Array of calendar events to display on day cells.\n   * In normal mode each event renders as a small colored dot (max 3 dots, then \"+N\").\n   * In expanded mode each event renders as a full-width colored pill with its label.\n   * Pass as a JS property or as a JSON-encoded attribute.\n   * @example\n   * ```js\n   * calendar.events = [\n   *   { id: '1', date: '2025-06-15', label: 'Team standup', color: 'var(--color-primary)' },\n   *   { id: '2', date: '2025-06-20', label: 'Release', color: '#e11d48' },\n   * ];\n   * ```\n   */\n  events?: CalendarEvent[];\n  /**\n   * Expanded layout — large cells with top-aligned day numbers suitable\n   * for a full-page calendar app view.\n   */\n  expanded?: boolean;\n  /** Expand to container width */\n  fullwidth?: boolean;\n  /** Locale for day/month names (default: browser locale) */\n  locale?: string;\n  /** Latest selectable date in ISO 8601 format (yyyy-MM-dd) */\n  max?: string;\n  /** Earliest selectable date in ISO 8601 format (yyyy-MM-dd) */\n  min?: string;\n  /** Form field name (when used inside a form) */\n  name?: string;\n  /** Mark field as required */\n  required?: boolean;\n  /** Border radius override */\n  rounded?: RoundedSize;\n  /** Component size */\n  size?: ComponentSize;\n  /**\n   * Selected date in ISO 8601 format (yyyy-MM-dd).\n   * @example '2025-06-15'\n   */\n  value?: string;\n  /**\n   * Day-of-week indices to disable (0 = Sunday … 6 = Saturday).\n   * Pass as a JSON array attribute or a JS property.\n   * @example\n   * ```html\n   * <ore-calendar weekend-days=\"[0,6]\"></ore-calendar>\n   * ```\n   */\n  'weekend-days'?: number[];\n};\n\n/**\n * An accessible, keyboard-navigable inline calendar component.\n * Supports day/month/year drill-down views, min/max bounds, disabled weekend\n * days, and optional form association.\n *\n * @element ore-calendar\n *\n * @attr {string} value - Selected date in ISO 8601 format (yyyy-MM-dd)\n * @attr {string} min - Minimum selectable date (yyyy-MM-dd)\n * @attr {string} max - Maximum selectable date (yyyy-MM-dd)\n * @attr {boolean} disabled - Disable all interaction\n * @attr {boolean} required - Required field (form association)\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} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} locale - BCP 47 locale string\n * @attr {string} weekend-days - JSON array of day indices to disable (0=Sun…6=Sat)\n * @attr {boolean} fullwidth - Expand to full container width\n * @attr {boolean} expanded - Large-cell calendar-app layout with top-aligned day numbers\n *\n * @fires change - Fired when a date is selected. detail: { isoValue: string | null }\n *\n * @cssprop --calendar-bg - Calendar background\n * @cssprop --calendar-border-color - Calendar border color\n * @cssprop --calendar-radius - Calendar border radius\n * @cssprop --calendar-shadow - Calendar drop shadow\n * @cssprop --calendar-day-selected-bg - Background of selected day cell\n * @cssprop --calendar-day-today-color - Colour of today's date number\n * @cssprop --calendar-day-outside-opacity - Opacity of days outside visible month\n *\n * @part calendar - The root calendar panel\n * @part header - Calendar header (nav + label)\n * @part grid - Day grid\n * @part day - Individual day cell\n *\n * @example\n * ```html\n * <!-- Single date with bounds -->\n * <ore-calendar value=\"2025-06-15\" min=\"2025-01-01\" max=\"2025-12-31\" color=\"primary\"></ore-calendar>\n *\n * <!-- Expanded calendar-app layout -->\n * <ore-calendar expanded fullwidth color=\"primary\"></ore-calendar>\n * ```\n */\nexport const CALENDAR_TAG = 'ore-calendar' as const;\n\n/** Maximum event dots/pills shown per cell before \"+N\" overflow */\nconst MAX_EVENTS = 3;\n\n// ── Component ────────────────────────────────────────────────────────────────\n\ndefine<OreCalendarProps>(CALENDAR_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    events: prop.json([] as CalendarEvent[]),\n    expanded: prop.bool(false),\n    fullwidth: prop.bool(false),\n    locale: prop.string(),\n    max: prop.string(),\n    min: prop.string(),\n    name: prop.string(),\n    required: prop.bool(false),\n    value: prop.string(),\n    'weekend-days': prop.json([] as number[]),\n  },\n\n  setup(props) {\n    const emit = useEmit<OreCalendarEvents>();\n\n    // ── Derived flags ────────────────────────────────────────────────────────\n\n    const isDisabled = computed(() => props.disabled.value === true);\n    const isExpanded = computed(() => props.expanded.value === true);\n\n    // ── Selected date: local-override pattern ─────────────────────────────────\n    // `localSelection` holds a user-initiated pick (or undefined = no override).\n    // `selectedDate` derives from it, falling back to the value prop reactively.\n    // This eliminates setInterval polling — external prop changes propagate\n    // through the computed graph automatically.\n\n    const localSelection = signal<Temporal.PlainDate | null | undefined>(undefined);\n\n    const selectedDate = computed(() =>\n      localSelection.value !== undefined ? localSelection.value : parseIso(props.value.value),\n    );\n\n    // ── Date-picker control ──────────────────────────────────────────────────\n\n    const ctrl = createDatePickerControl({\n      get locale() {\n        return props.locale.value ?? (typeof navigator !== 'undefined' ? navigator.language : 'en');\n      },\n      get max() {\n        return parseIso(props.max.value);\n      },\n      get min() {\n        return parseIso(props.min.value);\n      },\n      onChange(date) {\n        localSelection.value = date;\n        currentView.value = 'day';\n        displayYear.value = ctrl.displayYear();\n        displayMonth.value = ctrl.displayMonth();\n        emit('change', { isoValue: toIsoString(date) });\n      },\n      get value() {\n        return selectedDate.value;\n      },\n      get weekendDays() {\n        return props['weekend-days'].value ?? [];\n      },\n    });\n\n    // ── Reactive display state ────────────────────────────────────────────────\n    // Three separate primitive signals — the proven pattern. Mutating any one\n    // of them invalidates only the computeds that read it.\n\n    const currentView = signal<DatePickerView>('day');\n    const displayYear = signal(ctrl.displayYear());\n    const displayMonth = signal(ctrl.displayMonth()); // 1-indexed (Temporal)\n\n    // ── Form value ───────────────────────────────────────────────────────────\n\n    useField<string>({\n      disabled: isDisabled,\n      toFormValue: (v) => v || null,\n      value: computed(() => toIsoString(selectedDate.value) ?? ''),\n    });\n\n    // ── Events lookup ─────────────────────────────────────────────────────────\n\n    const eventsByDate = computed(() => {\n      const map = new Map<string, CalendarEvent[]>();\n\n      for (const evt of props.events.value ?? []) {\n        const list = map.get(evt.date) ?? [];\n\n        list.push(evt);\n        map.set(evt.date, list);\n      }\n\n      return map;\n    });\n\n    // ── Derived cells ─────────────────────────────────────────────────────────\n    // Each reads a display signal so they re-run when navigation changes.\n\n    const dayCells = computed(() => {\n      void displayYear.value;\n      void displayMonth.value;\n      void selectedDate.value; // re-run when selection changes to refresh isSelected flags\n\n      return ctrl.dayCells();\n    });\n    const monthCells = computed(() => {\n      void displayYear.value;\n\n      return ctrl.monthCells();\n    });\n    const yearCells = computed(() => {\n      void displayYear.value;\n\n      return ctrl.yearCells();\n    });\n    const weekdayLabels = computed(() => ctrl.weekdayLabels());\n\n    const displayMonth_ = computed(() => {\n      const d = Temporal.PlainDate.from({ day: 1, month: displayMonth.value, year: displayYear.value });\n      const loc = props.locale.value ?? (typeof navigator !== 'undefined' ? navigator.language : 'en');\n\n      return format(d, { intl: { month: 'long' }, locale: loc, tz: 'UTC' });\n    });\n\n    const displayYear_ = computed(() => String(displayYear.value));\n    const displayLabel = computed(() => `${displayMonth_.value} ${displayYear_.value}`);\n\n    // ── Navigation ───────────────────────────────────────────────────────────\n\n    function handlePrev(): void {\n      if (currentView.value === 'day') ctrl.prevMonth();\n      else ctrl.prevYear();\n\n      displayYear.value = ctrl.displayYear();\n      displayMonth.value = ctrl.displayMonth();\n    }\n\n    function handleNext(): void {\n      if (currentView.value === 'day') ctrl.nextMonth();\n      else ctrl.nextYear();\n\n      displayYear.value = ctrl.displayYear();\n      displayMonth.value = ctrl.displayMonth();\n    }\n\n    function handleHeaderClick(): void {\n      const views: DatePickerView[] = ['day', 'month', 'year'];\n      const next = views[(views.indexOf(currentView.value) + 1) % views.length];\n\n      ctrl.setView(next);\n      currentView.value = next;\n    }\n\n    // ── Selection handlers — all disabled guards live here ────────────────────\n\n    function handleSelectMonth(month: number): void {\n      if (isDisabled.value) return;\n\n      ctrl.goTo(ctrl.displayYear(), month);\n      ctrl.setView('day');\n      displayYear.value = ctrl.displayYear();\n      displayMonth.value = ctrl.displayMonth();\n      currentView.value = 'day';\n    }\n\n    function handleSelectYear(year: number): void {\n      if (isDisabled.value) return;\n\n      ctrl.goTo(year, ctrl.displayMonth());\n      ctrl.setView('month');\n      displayYear.value = ctrl.displayYear();\n      currentView.value = 'month';\n    }\n\n    function handleSelectDay(isoStr: string): void {\n      if (isDisabled.value) return;\n\n      const date = parseIso(isoStr);\n\n      if (!date) return;\n\n      ctrl.select(date); // ctrl.select() internally rejects disabled/out-of-range dates\n    }\n\n    // ── Day-cell keyboard navigation (full ARIA grid pattern) ─────────────────\n\n    function handleDayKeydown(e: KeyboardEvent): void {\n      const cell = e.currentTarget as HTMLElement;\n      const grid = cell.closest('.cal-grid-days');\n\n      if (!grid) return;\n\n      const allCells = Array.from(grid.querySelectorAll<HTMLElement>('.cal-cell-day'));\n      const idx = allCells.indexOf(cell);\n\n      if (idx === -1) return;\n\n      let target: HTMLElement | undefined;\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        handleSelectDay(cell.dataset.iso ?? '');\n\n        return;\n      } else if (e.key === 'ArrowRight') {\n        target = allCells[idx + 1];\n      } else if (e.key === 'ArrowLeft') {\n        target = allCells[idx - 1];\n      } else if (e.key === 'ArrowDown') {\n        target = allCells[idx + 7];\n      } else if (e.key === 'ArrowUp') {\n        target = allCells[idx - 7];\n      } else if (e.key === 'Home') {\n        target = allCells[Math.floor(idx / 7) * 7]; // first cell in same row\n      } else if (e.key === 'End') {\n        target = allCells[Math.floor(idx / 7) * 7 + 6]; // last cell in same row\n      } else {\n        return;\n      }\n\n      e.preventDefault();\n      target?.focus();\n    }\n\n    // ── Month/year-cell keyboard navigation (fixed 4-column grid) ─────────────\n\n    function handleGridKeydown(e: KeyboardEvent, cellSelector: string, columns: number, onSelect: () => void): void {\n      const cell = e.currentTarget as HTMLElement;\n      const grid = cell.closest('.cal-grid');\n\n      if (!grid) return;\n\n      const allCells = Array.from(grid.querySelectorAll<HTMLElement>(cellSelector));\n      const idx = allCells.indexOf(cell);\n\n      if (idx === -1) return;\n\n      let target: HTMLElement | undefined;\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        onSelect();\n\n        return;\n      } else if (e.key === 'ArrowRight') {\n        target = allCells[idx + 1];\n      } else if (e.key === 'ArrowLeft') {\n        target = allCells[idx - 1];\n      } else if (e.key === 'ArrowDown') {\n        target = allCells[idx + columns];\n      } else if (e.key === 'ArrowUp') {\n        target = allCells[idx - columns];\n      } else if (e.key === 'Home') {\n        target = allCells[Math.floor(idx / columns) * columns];\n      } else if (e.key === 'End') {\n        target = allCells[Math.min(Math.floor(idx / columns) * columns + columns - 1, allCells.length - 1)];\n      } else {\n        return;\n      }\n\n      e.preventDefault();\n      target?.focus();\n    }\n\n    // ── Host bindings ────────────────────────────────────────────────────────\n\n    bind({\n      attr: {\n        'aria-disabled': () => (isDisabled.value ? 'true' : null),\n        'aria-label': () => displayLabel.value,\n        role: 'group',\n      },\n      class: {\n        'is-disabled': isDisabled,\n      },\n    });\n\n    // ── Template ─────────────────────────────────────────────────────────────\n\n    return html`\n      <div class=\"calendar\" part=\"calendar\" role=\"presentation\">\n        <!-- Header -->\n        <div class=\"cal-header\" part=\"header\">\n          <button class=\"nav-btn\" type=\"button\" aria-label=\"Previous\" ?disabled=\"${isDisabled}\" @click=\"${handlePrev}\">\n            <ore-icon name=\"chevron-left\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          </button>\n\n          <button\n            class=\"cal-label-btn\"\n            type=\"button\"\n            :aria-label=\"${() =>\n              `Switch to ${currentView.value === 'day' ? 'month' : currentView.value === 'month' ? 'year' : 'day'} view`}\"\n            ?disabled=\"${isDisabled}\"\n            @click=\"${handleHeaderClick}\">\n            <span class=\"cal-label-month\">${displayMonth_}</span><span class=\"cal-label-sep\" aria-hidden=\"true\">/</span\n            ><span class=\"cal-label-year\">${displayYear_}</span>\n          </button>\n\n          <button class=\"nav-btn\" type=\"button\" aria-label=\"Next\" ?disabled=\"${isDisabled}\" @click=\"${handleNext}\">\n            <ore-icon name=\"chevron-right\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          </button>\n        </div>\n\n        <!-- Day view -->\n        <div\n          class=\"cal-grid cal-grid-days\"\n          role=\"grid\"\n          part=\"grid\"\n          :aria-label=\"${() => displayLabel.value}\"\n          ?hidden=\"${() => currentView.value !== 'day'}\">\n          <div role=\"row\" class=\"cal-grid-row\">\n            ${() =>\n              weekdayLabels.value.map(\n                (lbl) => html`<div class=\"cal-cell cal-cell-head\" role=\"columnheader\" aria-label=\"${lbl}\">${lbl}</div>`,\n              )}\n          </div>\n          ${() => {\n            const cells = dayCells.value;\n            const rows: (typeof cells)[number][][] = [];\n\n            for (let i = 0; i < cells.length; i += 7) rows.push(cells.slice(i, i + 7));\n\n            return rows.map(\n              (row) =>\n                html`<div role=\"row\" class=\"cal-grid-row\">\n                  ${row.map(\n                    (cell) =>\n                      html`<div\n                        class=\"cal-cell cal-cell-day\"\n                        role=\"gridcell\"\n                        part=\"day\"\n                        :aria-selected=\"${() => String(cell.isSelected)}\"\n                        :aria-disabled=\"${() => String(cell.isDisabled || isDisabled.value)}\"\n                        :aria-current=\"${() => (cell.isToday ? 'date' : null)}\"\n                        ?data-selected=\"${() => cell.isSelected}\"\n                        ?data-today=\"${() => cell.isToday}\"\n                        ?data-outside=\"${() => cell.isOutsideMonth}\"\n                        ?data-disabled=\"${() => cell.isDisabled || isDisabled.value}\"\n                        data-iso=\"${cell.iso}\"\n                        data-day=\"${String(cell.day)}\"\n                        tabindex=\"${() => (cell.isDisabled || isDisabled.value ? '-1' : '0')}\"\n                        @click=\"${() => handleSelectDay(cell.iso)}\"\n                        @keydown=\"${handleDayKeydown}\">\n                        ${String(cell.day)}\n                        ${() => {\n                          const evts = eventsByDate.value.get(cell.iso) ?? [];\n\n                          if (!evts.length) return html``;\n\n                          const shown = evts.slice(0, MAX_EVENTS);\n                          const overflow = evts.length - MAX_EVENTS;\n\n                          if (isExpanded.value) {\n                            return html`<div\n                              class=\"cal-events\"\n                              aria-label=\"${() => `${evts.length} event${evts.length > 1 ? 's' : ''}`}\">\n                              ${shown.map(\n                                (evt) =>\n                                  html`<ore-badge\n                                    class=\"cal-event-pill\"\n                                    size=\"xs\"\n                                    rounded=\"sm\"\n                                    aria-label=\"${evt.label}\"\n                                    :style=\"${styleMap({\n                                      '--badge-bg': evt.color,\n                                      '--badge-border-color': evt.color,\n                                    })}\">\n                                    ${evt.label}\n                                  </ore-badge>`,\n                              )}\n                              ${\n                                overflow > 0\n                                  ? html`<span class=\"cal-event-pill-overflow\" aria-hidden=\"true\"\n                                      >+${overflow} more</span\n                                    >`\n                                  : html``\n                              }\n                            </div>`;\n                          }\n\n                          return html`<div\n                            class=\"cal-dots\"\n                            aria-label=\"${() => `${evts.length} event${evts.length > 1 ? 's' : ''}`}\">\n                            ${shown.map(\n                              (evt) =>\n                                html`<ore-badge\n                                  class=\"cal-dot\"\n                                  dot\n                                  size=\"xs\"\n                                  aria-hidden=\"true\"\n                                  :style=\"${styleMap({\n                                    '--badge-bg': evt.color,\n                                    '--badge-border-color': evt.color,\n                                  })}\"></ore-badge>`,\n                            )}\n                            ${\n                              overflow > 0\n                                ? html`<span class=\"cal-dot-overflow\" aria-hidden=\"true\">+${overflow}</span>`\n                                : html``\n                            }\n                          </div>`;\n                        }}\n                      </div>`,\n                  )}\n                </div>`,\n            );\n          }}\n        </div>\n\n        <!-- Month view -->\n        <div\n          class=\"cal-grid cal-grid-months\"\n          role=\"grid\"\n          :aria-label=\"${() => displayYear_.value}\"\n          ?hidden=\"${() => currentView.value !== 'month'}\">\n          ${() => {\n            const cells = monthCells.value;\n            const rows: (typeof cells)[number][][] = [];\n\n            for (let i = 0; i < cells.length; i += 4) rows.push(cells.slice(i, i + 4));\n\n            return rows.map(\n              (row) =>\n                html`<div role=\"row\">\n                  ${row.map(\n                    (cell) =>\n                      html`<div\n                        class=\"cal-cell cal-cell-month\"\n                        role=\"gridcell\"\n                        :aria-selected=\"${() => String(cell.isSelected)}\"\n                        :aria-disabled=\"${() => String(cell.isDisabled || isDisabled.value)}\"\n                        ?data-selected=\"${() => cell.isSelected}\"\n                        ?data-disabled=\"${() => cell.isDisabled || isDisabled.value}\"\n                        tabindex=\"${() => (cell.isDisabled || isDisabled.value ? '-1' : '0')}\"\n                        @click=\"${() => handleSelectMonth(cell.month)}\"\n                        @keydown=\"${(e: KeyboardEvent) =>\n                          handleGridKeydown(e, '.cal-cell-month', 4, () => handleSelectMonth(cell.month))}\">\n                        ${cell.shortLabel}\n                      </div>`,\n                  )}\n                </div>`,\n            );\n          }}\n        </div>\n\n        <!-- Year view -->\n        <div\n          class=\"cal-grid cal-grid-years\"\n          role=\"grid\"\n          aria-label=\"Select year\"\n          ?hidden=\"${() => currentView.value !== 'year'}\">\n          ${() => {\n            const cells = yearCells.value;\n            const rows: (typeof cells)[number][][] = [];\n\n            for (let i = 0; i < cells.length; i += 4) rows.push(cells.slice(i, i + 4));\n\n            return rows.map(\n              (row) =>\n                html`<div role=\"row\">\n                  ${row.map(\n                    (cell) =>\n                      html`<div\n                        class=\"cal-cell cal-cell-year\"\n                        role=\"gridcell\"\n                        :aria-selected=\"${() => String(cell.isSelected)}\"\n                        :aria-disabled=\"${() => String(cell.isDisabled || isDisabled.value)}\"\n                        ?data-selected=\"${() => cell.isSelected}\"\n                        ?data-disabled=\"${() => cell.isDisabled || isDisabled.value}\"\n                        tabindex=\"${() => (cell.isDisabled || isDisabled.value ? '-1' : '0')}\"\n                        @click=\"${() => handleSelectYear(cell.year)}\"\n                        @keydown=\"${(e: KeyboardEvent) =>\n                          handleGridKeydown(e, '.cal-cell-year', 4, () => handleSelectYear(cell.year))}\">\n                        ${String(cell.year)}\n                      </div>`,\n                  )}\n                </div>`,\n            );\n          }}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [colorThemeMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"calendar.cjs","names":[],"sources":["../src/inputs/calendar/calendar.ts"],"sourcesContent":["import { define, html, prop, bind, useEmit, styleMap } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { Temporal, format } from '@vielzeug/tempo';\n\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../shared';\n\nimport '../../content/icon/icon';\nimport '../../feedback/badge/badge';\nimport { createDatePickerControl, parseIso, toIsoString, type DatePickerView } from '../../headless';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, reducedMotionMixin } from '../../styles';\nimport componentStyles from './calendar.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type OreCalendarEvents = {\n  change: { isoValue: string | null };\n};\n\n/**\n * A calendar event entry.\n * Dates must be ISO 8601 strings (yyyy-MM-dd).\n *\n * The `color` field accepts any valid CSS color value (e.g. `'#e11d48'`,\n * `'var(--color-primary)'`). An invalid value silently falls back to the\n * component's theme color. Only pass values you control.\n */\nexport type CalendarEvent = {\n  /**\n   * Any CSS color value for the event dot / pill.\n   * Defaults to the component's theme color when omitted.\n   * Rendered via `styleMap()`, which strips `;`/`{`/`}` so the value can't break out of\n   * its custom-property declaration — it is not a full CSS-color syntax validator, so an\n   * invalid (but injection-safe) value may still render as no color.\n   */\n  color?: string;\n  /** ISO date the event falls on (yyyy-MM-dd) */\n  date: string;\n  /** Unique identifier */\n  id: string;\n  /** Short label shown in the calendar cell */\n  label: string;\n};\n\nexport type OreCalendarProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable all date selection */\n  disabled?: boolean;\n  /**\n   * Array of calendar events to display on day cells.\n   * In normal mode each event renders as a small colored dot (max 3 dots, then \"+N\").\n   * In expanded mode each event renders as a full-width colored pill with its label.\n   * Pass as a JS property or as a JSON-encoded attribute.\n   * @example\n   * ```js\n   * calendar.events = [\n   *   { id: '1', date: '2025-06-15', label: 'Team standup', color: 'var(--color-primary)' },\n   *   { id: '2', date: '2025-06-20', label: 'Release', color: '#e11d48' },\n   * ];\n   * ```\n   */\n  events?: CalendarEvent[];\n  /**\n   * Expanded layout — large cells with top-aligned day numbers suitable\n   * for a full-page calendar app view.\n   */\n  expanded?: boolean;\n  /** Expand to container width */\n  fullwidth?: boolean;\n  /** Locale for day/month names (default: browser locale) */\n  locale?: string;\n  /** Latest selectable date in ISO 8601 format (yyyy-MM-dd) */\n  max?: string;\n  /** Earliest selectable date in ISO 8601 format (yyyy-MM-dd) */\n  min?: string;\n  /** Form field name (when used inside a form) */\n  name?: string;\n  /** Mark field as required */\n  required?: boolean;\n  /** Border radius override */\n  rounded?: RoundedSize;\n  /** Component size */\n  size?: ComponentSize;\n  /**\n   * Selected date in ISO 8601 format (yyyy-MM-dd).\n   * @example '2025-06-15'\n   */\n  value?: string;\n  /**\n   * Day-of-week indices to disable (0 = Sunday … 6 = Saturday).\n   * Pass as a JSON array attribute or a JS property.\n   * @example\n   * ```html\n   * <ore-calendar weekend-days=\"[0,6]\"></ore-calendar>\n   * ```\n   */\n  'weekend-days'?: number[];\n};\n\n/**\n * An accessible, keyboard-navigable inline calendar component.\n * Supports day/month/year drill-down views, min/max bounds, disabled weekend\n * days, and optional form association.\n *\n * @element ore-calendar\n *\n * @attr {string} value - Selected date in ISO 8601 format (yyyy-MM-dd)\n * @attr {string} min - Minimum selectable date (yyyy-MM-dd)\n * @attr {string} max - Maximum selectable date (yyyy-MM-dd)\n * @attr {boolean} disabled - Disable all interaction\n * @attr {boolean} required - Required field (form association)\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} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} locale - BCP 47 locale string\n * @attr {string} weekend-days - JSON array of day indices to disable (0=Sun…6=Sat)\n * @attr {boolean} fullwidth - Expand to full container width\n * @attr {boolean} expanded - Large-cell calendar-app layout with top-aligned day numbers\n *\n * @fires change - Fired when a date is selected. detail: { isoValue: string | null }\n *\n * @cssprop --calendar-bg - Calendar background\n * @cssprop --calendar-border-color - Calendar border color\n * @cssprop --calendar-radius - Calendar border radius\n * @cssprop --calendar-shadow - Calendar drop shadow\n * @cssprop --calendar-day-selected-bg - Background of selected day cell\n * @cssprop --calendar-day-today-color - Colour of today's date number\n * @cssprop --calendar-day-outside-opacity - Opacity of days outside visible month\n *\n * @part calendar - The root calendar panel\n * @part header - Calendar header (nav + label)\n * @part grid - Day grid\n * @part day - Individual day cell\n *\n * @example\n * ```html\n * <!-- Single date with bounds -->\n * <ore-calendar value=\"2025-06-15\" min=\"2025-01-01\" max=\"2025-12-31\" color=\"primary\"></ore-calendar>\n *\n * <!-- Expanded calendar-app layout -->\n * <ore-calendar expanded fullwidth color=\"primary\"></ore-calendar>\n * ```\n */\nexport const CALENDAR_TAG = 'ore-calendar' as const;\n\n/** Maximum event dots/pills shown per cell before \"+N\" overflow */\nconst MAX_EVENTS = 3;\n\n// ── Component ────────────────────────────────────────────────────────────────\n\ndefine<OreCalendarProps>(CALENDAR_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    events: prop.json([] as CalendarEvent[]),\n    expanded: prop.bool(false),\n    fullwidth: prop.bool(false),\n    locale: prop.string(),\n    max: prop.string(),\n    min: prop.string(),\n    name: prop.string(),\n    required: prop.bool(false),\n    value: prop.string(),\n    'weekend-days': prop.json([] as number[]),\n  },\n\n  setup(props) {\n    const emit = useEmit<OreCalendarEvents>();\n\n    // ── Derived flags ────────────────────────────────────────────────────────\n\n    const isDisabled = computed(() => props.disabled.value === true);\n    const isExpanded = computed(() => props.expanded.value === true);\n\n    // ── Selected date: local-override pattern ─────────────────────────────────\n    // `localSelection` holds a user-initiated pick (or undefined = no override).\n    // `selectedDate` derives from it, falling back to the value prop reactively.\n    // This eliminates setInterval polling — external prop changes propagate\n    // through the computed graph automatically.\n\n    const localSelection = signal<Temporal.PlainDate | null | undefined>(undefined);\n\n    const selectedDate = computed(() =>\n      localSelection.value !== undefined ? localSelection.value : parseIso(props.value.value),\n    );\n\n    // ── Date-picker control ──────────────────────────────────────────────────\n\n    const ctrl = createDatePickerControl({\n      get locale() {\n        return props.locale.value ?? (typeof navigator !== 'undefined' ? navigator.language : 'en');\n      },\n      get max() {\n        return parseIso(props.max.value);\n      },\n      get min() {\n        return parseIso(props.min.value);\n      },\n      onChange(date) {\n        localSelection.value = date;\n        currentView.value = 'day';\n        displayYear.value = ctrl.displayYear();\n        displayMonth.value = ctrl.displayMonth();\n        emit('change', { isoValue: toIsoString(date) });\n      },\n      get value() {\n        return selectedDate.value;\n      },\n      get weekendDays() {\n        return props['weekend-days'].value ?? [];\n      },\n    });\n\n    // ── Reactive display state ────────────────────────────────────────────────\n    // Three separate primitive signals — the proven pattern. Mutating any one\n    // of them invalidates only the computeds that read it.\n\n    const currentView = signal<DatePickerView>('day');\n    const displayYear = signal(ctrl.displayYear());\n    const displayMonth = signal(ctrl.displayMonth()); // 1-indexed (Temporal)\n\n    // ── Form value ───────────────────────────────────────────────────────────\n\n    useField<string>({\n      disabled: isDisabled,\n      toFormValue: (v) => v || null,\n      value: computed(() => toIsoString(selectedDate.value) ?? ''),\n    });\n\n    // ── Events lookup ─────────────────────────────────────────────────────────\n\n    const eventsByDate = computed(() => {\n      const map = new Map<string, CalendarEvent[]>();\n\n      for (const evt of props.events.value ?? []) {\n        const list = map.get(evt.date) ?? [];\n\n        list.push(evt);\n        map.set(evt.date, list);\n      }\n\n      return map;\n    });\n\n    // ── Derived cells ─────────────────────────────────────────────────────────\n    // Each reads a display signal so they re-run when navigation changes.\n\n    const dayCells = computed(() => {\n      void displayYear.value;\n      void displayMonth.value;\n      void selectedDate.value; // re-run when selection changes to refresh isSelected flags\n\n      return ctrl.dayCells();\n    });\n    const monthCells = computed(() => {\n      void displayYear.value;\n\n      return ctrl.monthCells();\n    });\n    const yearCells = computed(() => {\n      void displayYear.value;\n\n      return ctrl.yearCells();\n    });\n    const weekdayLabels = computed(() => ctrl.weekdayLabels());\n\n    const displayMonth_ = computed(() => {\n      const d = Temporal.PlainDate.from({ day: 1, month: displayMonth.value, year: displayYear.value });\n      const loc = props.locale.value ?? (typeof navigator !== 'undefined' ? navigator.language : 'en');\n\n      return format(d, { intl: { month: 'long' }, locale: loc, tz: 'UTC' });\n    });\n\n    const displayYear_ = computed(() => String(displayYear.value));\n    const displayLabel = computed(() => `${displayMonth_.value} ${displayYear_.value}`);\n\n    // ── Navigation ───────────────────────────────────────────────────────────\n\n    function handlePrev(): void {\n      if (currentView.value === 'day') ctrl.prevMonth();\n      else ctrl.prevYear();\n\n      displayYear.value = ctrl.displayYear();\n      displayMonth.value = ctrl.displayMonth();\n    }\n\n    function handleNext(): void {\n      if (currentView.value === 'day') ctrl.nextMonth();\n      else ctrl.nextYear();\n\n      displayYear.value = ctrl.displayYear();\n      displayMonth.value = ctrl.displayMonth();\n    }\n\n    function handleHeaderClick(): void {\n      const views: DatePickerView[] = ['day', 'month', 'year'];\n      const next = views[(views.indexOf(currentView.value) + 1) % views.length];\n\n      ctrl.setView(next);\n      currentView.value = next;\n    }\n\n    // ── Selection handlers — all disabled guards live here ────────────────────\n\n    function handleSelectMonth(month: number): void {\n      if (isDisabled.value) return;\n\n      ctrl.goTo(ctrl.displayYear(), month);\n      ctrl.setView('day');\n      displayYear.value = ctrl.displayYear();\n      displayMonth.value = ctrl.displayMonth();\n      currentView.value = 'day';\n    }\n\n    function handleSelectYear(year: number): void {\n      if (isDisabled.value) return;\n\n      ctrl.goTo(year, ctrl.displayMonth());\n      ctrl.setView('month');\n      displayYear.value = ctrl.displayYear();\n      currentView.value = 'month';\n    }\n\n    function handleSelectDay(isoStr: string): void {\n      if (isDisabled.value) return;\n\n      const date = parseIso(isoStr);\n\n      if (!date) return;\n\n      ctrl.select(date); // ctrl.select() internally rejects disabled/out-of-range dates\n    }\n\n    // ── Day-cell keyboard navigation (full ARIA grid pattern) ─────────────────\n\n    function handleDayKeydown(e: KeyboardEvent): void {\n      const cell = e.currentTarget as HTMLElement;\n      const grid = cell.closest('.cal-grid-days');\n\n      if (!grid) return;\n\n      const allCells = Array.from(grid.querySelectorAll<HTMLElement>('.cal-cell-day'));\n      const idx = allCells.indexOf(cell);\n\n      if (idx === -1) return;\n\n      let target: HTMLElement | undefined;\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        handleSelectDay(cell.dataset.iso ?? '');\n\n        return;\n      } else if (e.key === 'ArrowRight') {\n        target = allCells[idx + 1];\n      } else if (e.key === 'ArrowLeft') {\n        target = allCells[idx - 1];\n      } else if (e.key === 'ArrowDown') {\n        target = allCells[idx + 7];\n      } else if (e.key === 'ArrowUp') {\n        target = allCells[idx - 7];\n      } else if (e.key === 'Home') {\n        target = allCells[Math.floor(idx / 7) * 7]; // first cell in same row\n      } else if (e.key === 'End') {\n        target = allCells[Math.floor(idx / 7) * 7 + 6]; // last cell in same row\n      } else {\n        return;\n      }\n\n      e.preventDefault();\n      target?.focus();\n    }\n\n    // ── Month/year-cell keyboard navigation (fixed 4-column grid) ─────────────\n\n    function handleGridKeydown(e: KeyboardEvent, cellSelector: string, columns: number, onSelect: () => void): void {\n      const cell = e.currentTarget as HTMLElement;\n      const grid = cell.closest('.cal-grid');\n\n      if (!grid) return;\n\n      const allCells = Array.from(grid.querySelectorAll<HTMLElement>(cellSelector));\n      const idx = allCells.indexOf(cell);\n\n      if (idx === -1) return;\n\n      let target: HTMLElement | undefined;\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        onSelect();\n\n        return;\n      } else if (e.key === 'ArrowRight') {\n        target = allCells[idx + 1];\n      } else if (e.key === 'ArrowLeft') {\n        target = allCells[idx - 1];\n      } else if (e.key === 'ArrowDown') {\n        target = allCells[idx + columns];\n      } else if (e.key === 'ArrowUp') {\n        target = allCells[idx - columns];\n      } else if (e.key === 'Home') {\n        target = allCells[Math.floor(idx / columns) * columns];\n      } else if (e.key === 'End') {\n        target = allCells[Math.min(Math.floor(idx / columns) * columns + columns - 1, allCells.length - 1)];\n      } else {\n        return;\n      }\n\n      e.preventDefault();\n      target?.focus();\n    }\n\n    // ── Host bindings ────────────────────────────────────────────────────────\n\n    bind({\n      attr: {\n        'aria-disabled': () => (isDisabled.value ? 'true' : null),\n        'aria-label': () => displayLabel.value,\n        role: 'group',\n      },\n      class: {\n        'is-disabled': isDisabled,\n      },\n    });\n\n    // ── Template ─────────────────────────────────────────────────────────────\n\n    return html`\n      <div class=\"calendar\" part=\"calendar\" role=\"presentation\">\n        <!-- Header -->\n        <div class=\"cal-header\" part=\"header\">\n          <button class=\"nav-btn\" type=\"button\" aria-label=\"Previous\" ?disabled=\"${isDisabled}\" @click=\"${handlePrev}\">\n            <ore-icon name=\"chevron-left\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          </button>\n\n          <button\n            class=\"cal-label-btn\"\n            type=\"button\"\n            :aria-label=\"${() =>\n              `Switch to ${currentView.value === 'day' ? 'month' : currentView.value === 'month' ? 'year' : 'day'} view`}\"\n            ?disabled=\"${isDisabled}\"\n            @click=\"${handleHeaderClick}\">\n            <span class=\"cal-label-month\">${displayMonth_}</span><span class=\"cal-label-sep\" aria-hidden=\"true\">/</span\n            ><span class=\"cal-label-year\">${displayYear_}</span>\n          </button>\n\n          <button class=\"nav-btn\" type=\"button\" aria-label=\"Next\" ?disabled=\"${isDisabled}\" @click=\"${handleNext}\">\n            <ore-icon name=\"chevron-right\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          </button>\n        </div>\n\n        <!-- Day view -->\n        <div\n          class=\"cal-grid cal-grid-days\"\n          role=\"grid\"\n          part=\"grid\"\n          :aria-label=\"${() => displayLabel.value}\"\n          ?hidden=\"${() => currentView.value !== 'day'}\">\n          <div role=\"row\" class=\"cal-grid-row\">\n            ${() =>\n              weekdayLabels.value.map(\n                (lbl) => html`<div class=\"cal-cell cal-cell-head\" role=\"columnheader\" aria-label=\"${lbl}\">${lbl}</div>`,\n              )}\n          </div>\n          ${() => {\n            const cells = dayCells.value;\n            const rows: (typeof cells)[number][][] = [];\n\n            for (let i = 0; i < cells.length; i += 7) rows.push(cells.slice(i, i + 7));\n\n            return rows.map(\n              (row) =>\n                html`<div role=\"row\" class=\"cal-grid-row\">\n                  ${row.map(\n                    (cell) =>\n                      html`<div\n                        class=\"cal-cell cal-cell-day\"\n                        role=\"gridcell\"\n                        part=\"day\"\n                        :aria-selected=\"${() => String(cell.isSelected)}\"\n                        :aria-disabled=\"${() => String(cell.isDisabled || isDisabled.value)}\"\n                        :aria-current=\"${() => (cell.isToday ? 'date' : null)}\"\n                        ?data-selected=\"${() => cell.isSelected}\"\n                        ?data-today=\"${() => cell.isToday}\"\n                        ?data-outside=\"${() => cell.isOutsideMonth}\"\n                        ?data-disabled=\"${() => cell.isDisabled || isDisabled.value}\"\n                        data-iso=\"${cell.iso}\"\n                        data-day=\"${String(cell.day)}\"\n                        tabindex=\"${() => (cell.isDisabled || isDisabled.value ? '-1' : '0')}\"\n                        @click=\"${() => handleSelectDay(cell.iso)}\"\n                        @keydown=\"${handleDayKeydown}\">\n                        ${String(cell.day)}\n                        ${() => {\n                          const evts = eventsByDate.value.get(cell.iso) ?? [];\n\n                          if (!evts.length) return html``;\n\n                          const shown = evts.slice(0, MAX_EVENTS);\n                          const overflow = evts.length - MAX_EVENTS;\n\n                          if (isExpanded.value) {\n                            return html`<div\n                              class=\"cal-events\"\n                              aria-label=\"${() => `${evts.length} event${evts.length > 1 ? 's' : ''}`}\">\n                              ${shown.map(\n                                (evt) =>\n                                  html`<ore-badge\n                                    class=\"cal-event-pill\"\n                                    size=\"xs\"\n                                    rounded=\"sm\"\n                                    aria-label=\"${evt.label}\"\n                                    :style=\"${styleMap({\n                                      '--badge-bg': evt.color,\n                                      '--badge-border-color': evt.color,\n                                    })}\">\n                                    ${evt.label}\n                                  </ore-badge>`,\n                              )}\n                              ${\n                                overflow > 0\n                                  ? html`<span class=\"cal-event-pill-overflow\" aria-hidden=\"true\"\n                                      >+${overflow} more</span\n                                    >`\n                                  : html``\n                              }\n                            </div>`;\n                          }\n\n                          return html`<div\n                            class=\"cal-dots\"\n                            aria-label=\"${() => `${evts.length} event${evts.length > 1 ? 's' : ''}`}\">\n                            ${shown.map(\n                              (evt) =>\n                                html`<ore-badge\n                                  class=\"cal-dot\"\n                                  dot\n                                  size=\"xs\"\n                                  aria-hidden=\"true\"\n                                  :style=\"${styleMap({\n                                    '--badge-bg': evt.color,\n                                    '--badge-border-color': evt.color,\n                                  })}\"></ore-badge>`,\n                            )}\n                            ${\n                              overflow > 0\n                                ? html`<span class=\"cal-dot-overflow\" aria-hidden=\"true\">+${overflow}</span>`\n                                : html``\n                            }\n                          </div>`;\n                        }}\n                      </div>`,\n                  )}\n                </div>`,\n            );\n          }}\n        </div>\n\n        <!-- Month view -->\n        <div\n          class=\"cal-grid cal-grid-months\"\n          role=\"grid\"\n          :aria-label=\"${() => displayYear_.value}\"\n          ?hidden=\"${() => currentView.value !== 'month'}\">\n          ${() => {\n            const cells = monthCells.value;\n            const rows: (typeof cells)[number][][] = [];\n\n            for (let i = 0; i < cells.length; i += 4) rows.push(cells.slice(i, i + 4));\n\n            return rows.map(\n              (row) =>\n                html`<div role=\"row\">\n                  ${row.map(\n                    (cell) =>\n                      html`<div\n                        class=\"cal-cell cal-cell-month\"\n                        role=\"gridcell\"\n                        :aria-selected=\"${() => String(cell.isSelected)}\"\n                        :aria-disabled=\"${() => String(cell.isDisabled || isDisabled.value)}\"\n                        ?data-selected=\"${() => cell.isSelected}\"\n                        ?data-disabled=\"${() => cell.isDisabled || isDisabled.value}\"\n                        tabindex=\"${() => (cell.isDisabled || isDisabled.value ? '-1' : '0')}\"\n                        @click=\"${() => handleSelectMonth(cell.month)}\"\n                        @keydown=\"${(e: KeyboardEvent) =>\n                          handleGridKeydown(e, '.cal-cell-month', 4, () => handleSelectMonth(cell.month))}\">\n                        ${cell.shortLabel}\n                      </div>`,\n                  )}\n                </div>`,\n            );\n          }}\n        </div>\n\n        <!-- Year view -->\n        <div\n          class=\"cal-grid cal-grid-years\"\n          role=\"grid\"\n          aria-label=\"Select year\"\n          ?hidden=\"${() => currentView.value !== 'year'}\">\n          ${() => {\n            const cells = yearCells.value;\n            const rows: (typeof cells)[number][][] = [];\n\n            for (let i = 0; i < cells.length; i += 4) rows.push(cells.slice(i, i + 4));\n\n            return rows.map(\n              (row) =>\n                html`<div role=\"row\">\n                  ${row.map(\n                    (cell) =>\n                      html`<div\n                        class=\"cal-cell cal-cell-year\"\n                        role=\"gridcell\"\n                        :aria-selected=\"${() => String(cell.isSelected)}\"\n                        :aria-disabled=\"${() => String(cell.isDisabled || isDisabled.value)}\"\n                        ?data-selected=\"${() => cell.isSelected}\"\n                        ?data-disabled=\"${() => cell.isDisabled || isDisabled.value}\"\n                        tabindex=\"${() => (cell.isDisabled || isDisabled.value ? '-1' : '0')}\"\n                        @click=\"${() => handleSelectYear(cell.year)}\"\n                        @keydown=\"${(e: KeyboardEvent) =>\n                          handleGridKeydown(e, '.cal-cell-year', 4, () => handleSelectYear(cell.year))}\">\n                        ${String(cell.year)}\n                      </div>`,\n                  )}\n                </div>`,\n            );\n          }}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [colorThemeMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/calendar.js

@@ -3,8 +3,7 @@ import { colorThemeMixin as t } from "./styles/mixins/theme.css.js";
 import { disablableBundle as n, roundableBundle as r, sizableBundle as i, themableBundle as a } from "./shared/prop-bundles.js";
 import { createDatePickerControl as o, parseIso as s, toIsoString as c } from "./headless/date-picker.js";
 import l from "./inputs/calendar/calendar.css.js";
-import { bind as u, define as d, html as f, prop as p, useEmit as m } from "@vielzeug/ore";
-import { styleMap as h } from "@vielzeug/ore/directives";
+import { bind as u, define as d, html as f, prop as p, styleMap as m, useEmit as h } from "@vielzeug/ore";
 import { computed as g, signal as _ } from "@vielzeug/ripple";
 import { Temporal as v, format as y } from "@vielzeug/tempo";
 import { useField as b } from "@vielzeug/ore/forms";
@@ -29,7 +28,7 @@ d(x, {
 		"weekend-days": p.json([])
 	},
 	setup(e) {
-		let t = m(), n = g(() => e.disabled.value === !0), r = g(() => e.expanded.value === !0), i = _(void 0), a = g(() => i.value === void 0 ? s(e.value.value) : i.value), l = o({
+		let t = h(), n = g(() => e.disabled.value === !0), r = g(() => e.expanded.value === !0), i = _(void 0), a = g(() => i.value === void 0 ? s(e.value.value) : i.value), l = o({
 			get locale() {
 				return e.locale.value ?? (typeof navigator < "u" ? navigator.language : "en");
 			},
@@ -204,7 +203,7 @@ d(x, {
                                     size="xs"
                                     rounded="sm"
                                     aria-label="${e.label}"
-                                    :style="${h({
+                                    :style="${m({
 					"--badge-bg": e.color,
 					"--badge-border-color": e.color
 				})}">
@@ -221,7 +220,7 @@ d(x, {
                                   dot
                                   size="xs"
                                   aria-hidden="true"
-                                  :style="${h({
+                                  :style="${m({
 					"--badge-bg": e.color,
 					"--badge-border-color": e.color
 				})}"></ore-badge>`)}