@skdx/web-components 0.26.0 → 0.28.0

package/dist/breadcrumb/BreadcrumbSeparator.d.ts

@@ -2,14 +2,19 @@ import { LitElement } from 'lit';
 /**
  * `<skdx-breadcrumb-separator>` — divider between two
  * `<skdx-breadcrumb-item>`s: renders an `<li role="presentation"
- * aria-hidden="true">` so assistive tech skips it. Defaults to `/`; slot
- * content (e.g. an icon) overrides it.
+ * aria-hidden="true">` so assistive tech skips it. With no children of its
+ * own it falls back to the nearest `<skdx-breadcrumb>`'s `separator` prop
+ * (`/` by default); slot content (e.g. an icon) overrides it.
  *
  * @csspart separator - The inner `<li>` element inside the shadow root.
  */
 export declare class SkdxBreadcrumbSeparator extends LitElement {
     static styles: import("lit").CSSResult[];
+    private root;
+    private readonly rootObserver;
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get fallback();
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/breadcrumb/BreadcrumbSeparator.js

@@ -1,4 +1,6 @@
-var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var n=(o,r,s,i)=>{for(var e=i>1?void 0:i?c(r,s):r,l=o.length-1,a;l>=0;l--)(a=o[l])&&(e=(i?a(r,s,e):a(e))||e);return i&&e&&d(r,s,e),e};import{css as m,html as p,LitElement as b}from"lit";import{customElement as h}from"../internal/define.js";import{hiddenHostStyles as u}from"../internal/styles.js";var t=class extends b{connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true")}render(){return p`<li part="separator" role="presentation" aria-hidden="true"><slot>/</slot></li>`}};t.styles=[u,m`
+var c=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var n=(i,t,s,o)=>{for(var e=o>1?void 0:o?d(t,s):t,a=i.length-1,l;a>=0;a--)(l=i[a])&&(e=(o?l(t,s,e):l(e))||e);return o&&e&&c(t,s,e),e};import{css as b,html as h,LitElement as p}from"lit";import{customElement as u}from"../internal/define.js";import{hiddenHostStyles as m}from"../internal/styles.js";var r=class extends p{constructor(){super(...arguments);this.root=null;this.rootObserver=new MutationObserver(()=>this.requestUpdate())}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true"),this.root=this.closest("skdx-breadcrumb"),this.root&&this.rootObserver.observe(this.root,{attributes:!0,attributeFilter:["separator"]})}disconnectedCallback(){this.rootObserver.disconnect(),super.disconnectedCallback()}get fallback(){return this.root?.getAttribute("separator")??"/"}render(){return h`<li part="separator" role="presentation" aria-hidden="true">
+      <slot>${this.fallback}</slot>
+    </li>`}};r.styles=[m,b`
       :host {
         display: inline-block;
       }
@@ -6,4 +8,4 @@ var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var n=(o,r,s,i
         font: inherit;
         color: inherit;
       }
-    `],t=n([h("skdx-breadcrumb-separator","breadcrumb","separator")],t);export{t as SkdxBreadcrumbSeparator};
+    `],r=n([u("skdx-breadcrumb-separator","breadcrumb","separator")],r);export{r as SkdxBreadcrumbSeparator};

package/dist/breadcrumb/index.cjs

@@ -1 +1 @@
-"use strict";var d=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var B=Object.prototype.hasOwnProperty;var i=(e,r)=>{for(var o in r)d(e,o,{get:r[o],enumerable:!0})},s=(e,r,o,x)=>{if(r&&typeof r=="object"||typeof r=="function")for(let m of u(r))!B.call(e,m)&&m!==o&&d(e,m,{get:()=>r[m],enumerable:!(x=f(r,m))||x.enumerable});return e};var l=e=>s(d({},"__esModule",{value:!0}),e);var L={};i(L,{SkdxBreadcrumb:()=>a.SkdxBreadcrumb,SkdxBreadcrumbEllipsis:()=>c.SkdxBreadcrumbEllipsis,SkdxBreadcrumbItem:()=>p.SkdxBreadcrumbItem,SkdxBreadcrumbLink:()=>k.SkdxBreadcrumbLink,SkdxBreadcrumbList:()=>t.SkdxBreadcrumbList,SkdxBreadcrumbPage:()=>S.SkdxBreadcrumbPage,SkdxBreadcrumbSeparator:()=>b.SkdxBreadcrumbSeparator});module.exports=l(L);var a=require("./Breadcrumb.cjs"),t=require("./BreadcrumbList.cjs"),p=require("./BreadcrumbItem.cjs"),k=require("./BreadcrumbLink.cjs"),S=require("./BreadcrumbPage.cjs"),b=require("./BreadcrumbSeparator.cjs"),c=require("./BreadcrumbEllipsis.cjs");0&&(module.exports={SkdxBreadcrumb,SkdxBreadcrumbEllipsis,SkdxBreadcrumbItem,SkdxBreadcrumbLink,SkdxBreadcrumbList,SkdxBreadcrumbPage,SkdxBreadcrumbSeparator});
+"use strict";var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var b=(e,r)=>{for(var m in r)t(e,m,{get:r[m],enumerable:!0})},k=(e,r,m,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let d of x(r))!a.call(e,d)&&d!==m&&t(e,d,{get:()=>r[d],enumerable:!(c=p(r,d))||c.enumerable});return e};var u=e=>k(t({},"__esModule",{value:!0}),e);var B={};b(B,{SkdxBreadcrumb:()=>o.SkdxBreadcrumb});module.exports=u(B);var o=require("./Breadcrumb.cjs");0&&(module.exports={SkdxBreadcrumb});

package/dist/breadcrumb/index.d.cts

@@ -1,7 +1 @@
-export { SkdxBreadcrumb } from './Breadcrumb.cjs';
-export { SkdxBreadcrumbList } from './BreadcrumbList.cjs';
-export { SkdxBreadcrumbItem } from './BreadcrumbItem.cjs';
-export { SkdxBreadcrumbLink } from './BreadcrumbLink.cjs';
-export { SkdxBreadcrumbPage } from './BreadcrumbPage.cjs';
-export { SkdxBreadcrumbSeparator } from './BreadcrumbSeparator.cjs';
-export { SkdxBreadcrumbEllipsis } from './BreadcrumbEllipsis.cjs';
+export { SkdxBreadcrumb, type SkdxBreadcrumbItemDescriptor } from './Breadcrumb.cjs';

package/dist/breadcrumb/index.d.ts

@@ -1,7 +1 @@
-export { SkdxBreadcrumb } from './Breadcrumb.js';
-export { SkdxBreadcrumbList } from './BreadcrumbList.js';
-export { SkdxBreadcrumbItem } from './BreadcrumbItem.js';
-export { SkdxBreadcrumbLink } from './BreadcrumbLink.js';
-export { SkdxBreadcrumbPage } from './BreadcrumbPage.js';
-export { SkdxBreadcrumbSeparator } from './BreadcrumbSeparator.js';
-export { SkdxBreadcrumbEllipsis } from './BreadcrumbEllipsis.js';
+export { SkdxBreadcrumb, type SkdxBreadcrumbItemDescriptor } from './Breadcrumb.js';

package/dist/breadcrumb/index.js

@@ -1 +1 @@
-import{SkdxBreadcrumb as m}from"./Breadcrumb.js";import{SkdxBreadcrumbList as d}from"./BreadcrumbList.js";import{SkdxBreadcrumbItem as a}from"./BreadcrumbItem.js";import{SkdxBreadcrumbLink as p}from"./BreadcrumbLink.js";import{SkdxBreadcrumbPage as S}from"./BreadcrumbPage.js";import{SkdxBreadcrumbSeparator as c}from"./BreadcrumbSeparator.js";import{SkdxBreadcrumbEllipsis as u}from"./BreadcrumbEllipsis.js";export{m as SkdxBreadcrumb,u as SkdxBreadcrumbEllipsis,a as SkdxBreadcrumbItem,p as SkdxBreadcrumbLink,d as SkdxBreadcrumbList,S as SkdxBreadcrumbPage,c as SkdxBreadcrumbSeparator};
+import{SkdxBreadcrumb as d}from"./Breadcrumb.js";export{d as SkdxBreadcrumb};

package/dist/breadcrumb/primitives.cjs

@@ -0,0 +1 @@
+"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var B=(e,r)=>{for(var o in r)d(e,o,{get:r[o],enumerable:!0})},i=(e,r,o,x)=>{if(r&&typeof r=="object"||typeof r=="function")for(let m of f(r))!u.call(e,m)&&m!==o&&d(e,m,{get:()=>r[m],enumerable:!(x=c(r,m))||x.enumerable});return e};var s=e=>i(d({},"__esModule",{value:!0}),e);var l={};B(l,{SkdxBreadcrumbEllipsis:()=>b.SkdxBreadcrumbEllipsis,SkdxBreadcrumbItem:()=>t.SkdxBreadcrumbItem,SkdxBreadcrumbLink:()=>p.SkdxBreadcrumbLink,SkdxBreadcrumbList:()=>a.SkdxBreadcrumbList,SkdxBreadcrumbPage:()=>k.SkdxBreadcrumbPage,SkdxBreadcrumbSeparator:()=>S.SkdxBreadcrumbSeparator});module.exports=s(l);var a=require("./BreadcrumbList.cjs"),t=require("./BreadcrumbItem.cjs"),p=require("./BreadcrumbLink.cjs"),k=require("./BreadcrumbPage.cjs"),S=require("./BreadcrumbSeparator.cjs"),b=require("./BreadcrumbEllipsis.cjs");0&&(module.exports={SkdxBreadcrumbEllipsis,SkdxBreadcrumbItem,SkdxBreadcrumbLink,SkdxBreadcrumbList,SkdxBreadcrumbPage,SkdxBreadcrumbSeparator});

package/dist/breadcrumb/primitives.d.cts

@@ -0,0 +1,25 @@
+/**
+ * Advanced primitives for `<skdx-breadcrumb>` — component parts you can
+ * compose when the derived anatomy doesn't suit your needs. Examples include
+ * a menu trigger beside an ellipsis or rich-markup crumb labels.
+ *
+ * @example
+ * ```ts
+ * import * as Breadcrumb from '@skdx/web-components/primitives/breadcrumb';
+ * ```
+ * ```html
+ * <skdx-breadcrumb aria-label="Breadcrumb">
+ *   <skdx-breadcrumb-list>
+ *     <skdx-breadcrumb-item><skdx-breadcrumb-link href="/">Home</skdx-breadcrumb-link></skdx-breadcrumb-item>
+ *     <skdx-breadcrumb-separator></skdx-breadcrumb-separator>
+ *     <skdx-breadcrumb-item><skdx-breadcrumb-page>Docs</skdx-breadcrumb-page></skdx-breadcrumb-item>
+ *   </skdx-breadcrumb-list>
+ * </skdx-breadcrumb>
+ * ```
+ */
+export { SkdxBreadcrumbList } from './BreadcrumbList.cjs';
+export { SkdxBreadcrumbItem } from './BreadcrumbItem.cjs';
+export { SkdxBreadcrumbLink } from './BreadcrumbLink.cjs';
+export { SkdxBreadcrumbPage } from './BreadcrumbPage.cjs';
+export { SkdxBreadcrumbSeparator } from './BreadcrumbSeparator.cjs';
+export { SkdxBreadcrumbEllipsis } from './BreadcrumbEllipsis.cjs';

package/dist/breadcrumb/primitives.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Advanced primitives for `<skdx-breadcrumb>` — component parts you can
+ * compose when the derived anatomy doesn't suit your needs. Examples include
+ * a menu trigger beside an ellipsis or rich-markup crumb labels.
+ *
+ * @example
+ * ```ts
+ * import * as Breadcrumb from '@skdx/web-components/primitives/breadcrumb';
+ * ```
+ * ```html
+ * <skdx-breadcrumb aria-label="Breadcrumb">
+ *   <skdx-breadcrumb-list>
+ *     <skdx-breadcrumb-item><skdx-breadcrumb-link href="/">Home</skdx-breadcrumb-link></skdx-breadcrumb-item>
+ *     <skdx-breadcrumb-separator></skdx-breadcrumb-separator>
+ *     <skdx-breadcrumb-item><skdx-breadcrumb-page>Docs</skdx-breadcrumb-page></skdx-breadcrumb-item>
+ *   </skdx-breadcrumb-list>
+ * </skdx-breadcrumb>
+ * ```
+ */
+export { SkdxBreadcrumbList } from './BreadcrumbList.js';
+export { SkdxBreadcrumbItem } from './BreadcrumbItem.js';
+export { SkdxBreadcrumbLink } from './BreadcrumbLink.js';
+export { SkdxBreadcrumbPage } from './BreadcrumbPage.js';
+export { SkdxBreadcrumbSeparator } from './BreadcrumbSeparator.js';
+export { SkdxBreadcrumbEllipsis } from './BreadcrumbEllipsis.js';

package/dist/breadcrumb/primitives.js

@@ -0,0 +1 @@
+import{SkdxBreadcrumbList as m}from"./BreadcrumbList.js";import{SkdxBreadcrumbItem as d}from"./BreadcrumbItem.js";import{SkdxBreadcrumbLink as a}from"./BreadcrumbLink.js";import{SkdxBreadcrumbPage as p}from"./BreadcrumbPage.js";import{SkdxBreadcrumbSeparator as S}from"./BreadcrumbSeparator.js";import{SkdxBreadcrumbEllipsis as c}from"./BreadcrumbEllipsis.js";export{c as SkdxBreadcrumbEllipsis,d as SkdxBreadcrumbItem,a as SkdxBreadcrumbLink,m as SkdxBreadcrumbList,p as SkdxBreadcrumbPage,S as SkdxBreadcrumbSeparator};

package/dist/button/Button.cjs

@@ -1,17 +1,21 @@
-"use strict";var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var v=(i,t)=>{for(var o in t)n(i,o,{get:t[o],enumerable:!0})},$=(i,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of y(t))!g.call(i,e)&&e!==o&&n(i,e,{get:()=>t[e],enumerable:!(a=h(t,e))||a.enumerable});return i};var H=i=>$(n({},"__esModule",{value:!0}),i),d=(i,t,o,a)=>{for(var e=a>1?void 0:a?h(t,o):t,m=i.length-1,b;m>=0;m--)(b=i[m])&&(e=(a?b(t,o,e):b(e))||e);return a&&e&&n(t,o,e),e};var C={};v(C,{SkdxButton:()=>s});module.exports=H(C);var r=require("lit"),p=require("lit/decorators.js"),c=require("../internal/define.cjs"),f=require("../internal/form-associated.cjs"),u=require("../internal/part.cjs"),l=require("../internal/styles.cjs");var s=class extends(0,f.FormAssociated)(r.LitElement){constructor(){super(...arguments);this.loading=!1;this.disabled=!1;this.type="button";this.handleClick=()=>{this.type==="submit"?this.form?.requestSubmit():this.type==="reset"&&this.form?.reset()}}updated(){(0,u.reflectHostState)(this,{"data-disabled":this.disabled?"":null,"data-loading":this.loading?"":null})}render(){let o=this.disabled||this.loading;return r.html`
-      <button
+"use strict";var b=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var O=(o,t)=>{for(var e in t)b(o,e,{get:t[e],enumerable:!0})},T=(o,t,e,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of $(t))!L.call(o,i)&&i!==e&&b(o,i,{get:()=>t[i],enumerable:!(d=f(t,i))||d.enumerable});return o};var E=o=>T(b({},"__esModule",{value:!0}),o),r=(o,t,e,d)=>{for(var i=d>1?void 0:d?f(t,e):t,h=o.length-1,p;h>=0;h--)(p=o[h])&&(i=(d?p(t,e,i):p(i))||i);return d&&i&&b(t,e,i),i};var H={};O(H,{SkdxButton:()=>s});module.exports=E(H);var a=require("lit"),n=require("lit/decorators.js"),u=require("lit/static-html.js"),g=require("../form/described-by.cjs"),m=require("../internal/define.cjs"),c=require("../internal/form-associated.cjs"),y=require("../internal/ids.cjs"),v=require("../internal/part.cjs"),l=require("../internal/styles.cjs"),D=require("../utils/polymorphic.cjs"),W=require("../utils/visually-hidden.cjs");var s=class extends(0,c.FormAssociated)(a.LitElement){constructor(){super(...arguments);this.loading=!1;this.loadingLabel="Loading";this.loadingLabelId=(0,y.nextId)("skdx-button-loading-label");this.disabled=!1;this.focusableWhenDisabled=!1;this.type="button";this.as="button";this.handleClick=e=>{if(this.pressSuppressed){e.preventDefault(),e.stopPropagation();return}this.nativeButton&&(this.type==="submit"?this.form?.requestSubmit():this.type==="reset"&&this.form?.reset())}}get nativeButton(){return this.as==="button"}get busy(){return this.loading&&!this.disabled}get softDisabled(){return this.disabled&&this.focusableWhenDisabled||this.busy}get nativelyDisabled(){return this.disabled&&!this.focusableWhenDisabled}get hardDisabledOffButton(){return this.nativelyDisabled&&!this.nativeButton}get pressSuppressed(){return this.softDisabled||this.hardDisabledOffButton}updated(){(0,v.reflectHostState)(this,{"data-disabled":this.disabled||this.loading?"":null,"data-loading":this.loading?"":null})}render(){let e=(0,D.resolveTag)(this.as,"button");return u.html`
+      <${e}
         part="button"
-        type=${this.type}
-        ?disabled=${o}
-        aria-busy=${this.loading?"true":r.nothing}
-        data-disabled=${this.disabled?"":r.nothing}
-        data-loading=${this.loading?"":r.nothing}
+        type=${this.nativeButton?this.type:a.nothing}
+        ?disabled=${this.nativeButton&&this.nativelyDisabled}
+        aria-disabled=${this.pressSuppressed?"true":a.nothing}
+        aria-busy=${this.busy?"true":a.nothing}
+        aria-describedby=${this.loading?(0,g.mergeDescribedBy)(this.getAttribute("aria-describedby"),this.loadingLabelId):a.nothing}
+        tabindex=${this.disabled&&this.focusableWhenDisabled?"0":this.hardDisabledOffButton?"-1":a.nothing}
+        data-disabled=${this.disabled||this.loading?"":a.nothing}
+        data-loading=${this.loading?"":a.nothing}
         @click=${this.handleClick}
       >
         <slot></slot>
-      </button>
-    `}};s.shadowRootOptions=l.delegatesFocusShadowRootOptions,s.styles=[l.resetNativeControl,l.hiddenHostStyles,r.css`
+        ${this.loading?u.html`<skdx-visually-hidden id=${this.loadingLabelId}>${this.loadingLabel}</skdx-visually-hidden>`:a.nothing}
+      </${e}>
+    `}};s.shadowRootOptions=l.delegatesFocusShadowRootOptions,s.styles=[l.resetNativeControl,l.hiddenHostStyles,a.css`
       :host {
         display: inline-block;
       }
-    `,l.controlBoxOnHost],d([(0,p.property)({type:Boolean,reflect:!0})],s.prototype,"loading",2),d([(0,p.property)({type:Boolean,reflect:!0})],s.prototype,"disabled",2),d([(0,p.property)({type:String,reflect:!0})],s.prototype,"type",2),s=d([(0,c.customElement)("skdx-button","button","root")],s);0&&(module.exports={SkdxButton});
+    `,l.controlBoxOnHost],r([(0,n.property)({type:Boolean,reflect:!0})],s.prototype,"loading",2),r([(0,n.property)({type:String,attribute:"loading-label"})],s.prototype,"loadingLabel",2),r([(0,n.property)({type:Boolean,reflect:!0})],s.prototype,"disabled",2),r([(0,n.property)({type:Boolean,reflect:!0,attribute:"focusable-when-disabled"})],s.prototype,"focusableWhenDisabled",2),r([(0,n.property)({type:String,reflect:!0})],s.prototype,"type",2),r([(0,n.property)({type:String,reflect:!0})],s.prototype,"as",2),s=r([(0,m.customElement)("skdx-button","button","root")],s);0&&(module.exports={SkdxButton});

package/dist/button/Button.d.cts

@@ -1,44 +1,60 @@
 import { LitElement } from 'lit';
+import { type PolymorphicTag } from '../utils/polymorphic.cjs';
+import '../utils/visually-hidden.cjs';
 declare const SkdxButton_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
 /**
- * `<skdx-button>` — the Web Components implementation of the shared Button
- * contract (see `@skdx/shared`'s `buttonContract`). Renders a native
- * `<button>` in shadow DOM: behavior and accessibility only, no visual
- * style — style the inner button with `skdx-button::part(button)`.
- *
- * Form association comes from the shared `FormAssociated` mixin rather than
- * from the shadow-DOM-nested native button, since a `<button type="submit">`
- * inside a shadow root does not automatically submit a light-DOM ancestor
- * form (the browser only associates it through the element's own
- * `ElementInternals.form`). The mixin also brings `formDisabledCallback`, so a
- * `<fieldset disabled>` ancestor disables the button the way it disables a
- * native one.
+ * Form-associated button. Renders as native `<button>` or other tags via `as`.
+ * Supports `loading` state and soft-disable for menu/toolbar contexts.
  *
  * @example
  * ```html
  * <skdx-button id="save">Save</skdx-button>
- * <script type="module">
- *   import '@skdx/web-components/button';
+ * <script>
  *   document.getElementById('save').addEventListener('click', () => { ... });
  * </script>
  * ```
  *
- * @csspart button - The native `<button>` element inside the shadow root.
+ * @csspart button - The rendered button element.
  */
 export declare class SkdxButton extends SkdxButton_base {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    /** Marks the button busy (e.g. while submitting). Sets `aria-busy` and disables the button. */
+    /** Marks button busy; suppresses activation while keeping focus and tab stop. */
     loading: boolean;
-    /** Native disabled state. Combined with `loading`: disabled if either is true. */
+    /** Text announced while `loading` is true, rendered visually-hidden. @default 'Loading' */
+    loadingLabel: string;
+    /** Id of the loading-label node, referenced by the button's `aria-describedby` while `loading`. */
+    private readonly loadingLabelId;
+    /** Native disabled state. Outranks `loading`: sets the native `disabled` attribute. */
     disabled: boolean;
-    /** Native button type. Defaults to `"button"` so it never accidentally submits an enclosing form. */
+    /**
+     * Keeps a disabled button in the tab order via `aria-disabled` and `tabindex="0"`,
+     * suppressing activation. Needed for disabled actions in Toolbar or menu bar,
+     * where arrow navigation requires the control to remain reachable.
+     * @default false
+     */
+    focusableWhenDisabled: boolean;
+    /** Native button type (ignored off `<button>` rendering). */
     type: 'button' | 'submit' | 'reset';
+    /** Tag name to render (e.g., `"a"` for a link styled as a button). @default 'button' */
+    as: PolymorphicTag;
+    /** Whether the rendered element is a native `<button>` — `type` and the native `disabled` attribute apply only there. */
+    private get nativeButton();
+    /** Whether the button is busy (loading and not explicitly disabled). */
+    private get busy();
+    /** Unactivatable but retains focus (loading or disabled with focusableWhenDisabled). */
+    private get softDisabled();
+    /** Whether to set the native `disabled` attribute. */
+    private get nativelyDisabled();
+    /** Whether hard-disabled off a native button (disabled non-button tag). */
+    private get hardDisabledOffButton();
+    /** Whether the click should be suppressed. */
+    private get pressSuppressed();
     private handleClick;
     protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/button/Button.d.ts

@@ -1,44 +1,60 @@
 import { LitElement } from 'lit';
+import { type PolymorphicTag } from '../utils/polymorphic.js';
+import '../utils/visually-hidden.js';
 declare const SkdxButton_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
 /**
- * `<skdx-button>` — the Web Components implementation of the shared Button
- * contract (see `@skdx/shared`'s `buttonContract`). Renders a native
- * `<button>` in shadow DOM: behavior and accessibility only, no visual
- * style — style the inner button with `skdx-button::part(button)`.
- *
- * Form association comes from the shared `FormAssociated` mixin rather than
- * from the shadow-DOM-nested native button, since a `<button type="submit">`
- * inside a shadow root does not automatically submit a light-DOM ancestor
- * form (the browser only associates it through the element's own
- * `ElementInternals.form`). The mixin also brings `formDisabledCallback`, so a
- * `<fieldset disabled>` ancestor disables the button the way it disables a
- * native one.
+ * Form-associated button. Renders as native `<button>` or other tags via `as`.
+ * Supports `loading` state and soft-disable for menu/toolbar contexts.
  *
  * @example
  * ```html
  * <skdx-button id="save">Save</skdx-button>
- * <script type="module">
- *   import '@skdx/web-components/button';
+ * <script>
  *   document.getElementById('save').addEventListener('click', () => { ... });
  * </script>
  * ```
  *
- * @csspart button - The native `<button>` element inside the shadow root.
+ * @csspart button - The rendered button element.
  */
 export declare class SkdxButton extends SkdxButton_base {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    /** Marks the button busy (e.g. while submitting). Sets `aria-busy` and disables the button. */
+    /** Marks button busy; suppresses activation while keeping focus and tab stop. */
     loading: boolean;
-    /** Native disabled state. Combined with `loading`: disabled if either is true. */
+    /** Text announced while `loading` is true, rendered visually-hidden. @default 'Loading' */
+    loadingLabel: string;
+    /** Id of the loading-label node, referenced by the button's `aria-describedby` while `loading`. */
+    private readonly loadingLabelId;
+    /** Native disabled state. Outranks `loading`: sets the native `disabled` attribute. */
     disabled: boolean;
-    /** Native button type. Defaults to `"button"` so it never accidentally submits an enclosing form. */
+    /**
+     * Keeps a disabled button in the tab order via `aria-disabled` and `tabindex="0"`,
+     * suppressing activation. Needed for disabled actions in Toolbar or menu bar,
+     * where arrow navigation requires the control to remain reachable.
+     * @default false
+     */
+    focusableWhenDisabled: boolean;
+    /** Native button type (ignored off `<button>` rendering). */
     type: 'button' | 'submit' | 'reset';
+    /** Tag name to render (e.g., `"a"` for a link styled as a button). @default 'button' */
+    as: PolymorphicTag;
+    /** Whether the rendered element is a native `<button>` — `type` and the native `disabled` attribute apply only there. */
+    private get nativeButton();
+    /** Whether the button is busy (loading and not explicitly disabled). */
+    private get busy();
+    /** Unactivatable but retains focus (loading or disabled with focusableWhenDisabled). */
+    private get softDisabled();
+    /** Whether to set the native `disabled` attribute. */
+    private get nativelyDisabled();
+    /** Whether hard-disabled off a native button (disabled non-button tag). */
+    private get hardDisabledOffButton();
+    /** Whether the click should be suppressed. */
+    private get pressSuppressed();
     private handleClick;
     protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/button/Button.js

@@ -1,17 +1,21 @@
-var m=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var s=(l,i,o,r)=>{for(var e=r>1?void 0:r?b(i,o):i,a=l.length-1,d;a>=0;a--)(d=l[a])&&(e=(r?d(i,o,e):d(e))||e);return r&&e&&m(i,o,e),e};import{css as h,html as c,LitElement as f,nothing as n}from"lit";import{property as p}from"lit/decorators.js";import{customElement as u}from"../internal/define.js";import{FormAssociated as y}from"../internal/form-associated.js";import{reflectHostState as g}from"../internal/part.js";import{controlBoxOnHost as v,delegatesFocusShadowRootOptions as $,hiddenHostStyles as H,resetNativeControl as C}from"../internal/styles.js";var t=class extends y(f){constructor(){super(...arguments);this.loading=!1;this.disabled=!1;this.type="button";this.handleClick=()=>{this.type==="submit"?this.form?.requestSubmit():this.type==="reset"&&this.form?.reset()}}updated(){g(this,{"data-disabled":this.disabled?"":null,"data-loading":this.loading?"":null})}render(){let o=this.disabled||this.loading;return c`
-      <button
+var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var i=(d,r,e,l)=>{for(var a=l>1?void 0:l?u(r,e):r,n=d.length-1,b;n>=0;n--)(b=d[n])&&(a=(l?b(r,e,a):b(a))||a);return l&&a&&p(r,e,a),a};import{css as f,LitElement as g,nothing as s}from"lit";import{property as o}from"lit/decorators.js";import{html as h}from"lit/static-html.js";import{mergeDescribedBy as m}from"../form/described-by.js";import{customElement as c}from"../internal/define.js";import{FormAssociated as y}from"../internal/form-associated.js";import{nextId as v}from"../internal/ids.js";import{reflectHostState as D}from"../internal/part.js";import{controlBoxOnHost as $,delegatesFocusShadowRootOptions as L,hiddenHostStyles as O,resetNativeControl as T}from"../internal/styles.js";import{resolveTag as E}from"../utils/polymorphic.js";import"../utils/visually-hidden.js";var t=class extends y(g){constructor(){super(...arguments);this.loading=!1;this.loadingLabel="Loading";this.loadingLabelId=v("skdx-button-loading-label");this.disabled=!1;this.focusableWhenDisabled=!1;this.type="button";this.as="button";this.handleClick=e=>{if(this.pressSuppressed){e.preventDefault(),e.stopPropagation();return}this.nativeButton&&(this.type==="submit"?this.form?.requestSubmit():this.type==="reset"&&this.form?.reset())}}get nativeButton(){return this.as==="button"}get busy(){return this.loading&&!this.disabled}get softDisabled(){return this.disabled&&this.focusableWhenDisabled||this.busy}get nativelyDisabled(){return this.disabled&&!this.focusableWhenDisabled}get hardDisabledOffButton(){return this.nativelyDisabled&&!this.nativeButton}get pressSuppressed(){return this.softDisabled||this.hardDisabledOffButton}updated(){D(this,{"data-disabled":this.disabled||this.loading?"":null,"data-loading":this.loading?"":null})}render(){let e=E(this.as,"button");return h`
+      <${e}
         part="button"
-        type=${this.type}
-        ?disabled=${o}
-        aria-busy=${this.loading?"true":n}
-        data-disabled=${this.disabled?"":n}
-        data-loading=${this.loading?"":n}
+        type=${this.nativeButton?this.type:s}
+        ?disabled=${this.nativeButton&&this.nativelyDisabled}
+        aria-disabled=${this.pressSuppressed?"true":s}
+        aria-busy=${this.busy?"true":s}
+        aria-describedby=${this.loading?m(this.getAttribute("aria-describedby"),this.loadingLabelId):s}
+        tabindex=${this.disabled&&this.focusableWhenDisabled?"0":this.hardDisabledOffButton?"-1":s}
+        data-disabled=${this.disabled||this.loading?"":s}
+        data-loading=${this.loading?"":s}
         @click=${this.handleClick}
       >
         <slot></slot>
-      </button>
-    `}};t.shadowRootOptions=$,t.styles=[C,H,h`
+        ${this.loading?h`<skdx-visually-hidden id=${this.loadingLabelId}>${this.loadingLabel}</skdx-visually-hidden>`:s}
+      </${e}>
+    `}};t.shadowRootOptions=L,t.styles=[T,O,f`
       :host {
         display: inline-block;
       }
-    `,v],s([p({type:Boolean,reflect:!0})],t.prototype,"loading",2),s([p({type:Boolean,reflect:!0})],t.prototype,"disabled",2),s([p({type:String,reflect:!0})],t.prototype,"type",2),t=s([u("skdx-button","button","root")],t);export{t as SkdxButton};
+    `,$],i([o({type:Boolean,reflect:!0})],t.prototype,"loading",2),i([o({type:String,attribute:"loading-label"})],t.prototype,"loadingLabel",2),i([o({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([o({type:Boolean,reflect:!0,attribute:"focusable-when-disabled"})],t.prototype,"focusableWhenDisabled",2),i([o({type:String,reflect:!0})],t.prototype,"type",2),i([o({type:String,reflect:!0})],t.prototype,"as",2),t=i([c("skdx-button","button","root")],t);export{t as SkdxButton};

package/dist/calendar/Calendar.cjs

@@ -1,5 +1,5 @@
-"use strict";var p=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var N=Object.prototype.hasOwnProperty;var C=(e,t)=>{for(var n in t)p(e,n,{get:t[n],enumerable:!0})},E=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of Y(t))!N.call(e,a)&&a!==n&&p(e,a,{get:()=>t[a],enumerable:!(r=T(t,a))||r.enumerable});return e};var $=e=>E(p({},"__esModule",{value:!0}),e),i=(e,t,n,r)=>{for(var a=r>1?void 0:r?T(t,n):t,l=e.length-1,u;l>=0;l--)(u=e[l])&&(a=(r?u(t,n,a):u(a))||a);return r&&a&&p(t,n,a),a};var z={};C(z,{SkdxCalendar:()=>o,addDays:()=>w,addMonths:()=>M,addYears:()=>R,anchorOf:()=>m,clampToMonth:()=>P,emptySelection:()=>L,endOfWeek:()=>W,getDaysInMonth:()=>y,getVisibleWeeks:()=>I,isDateDisabled:()=>_,isDateRange:()=>D,isDateSelected:()=>U,isSameDay:()=>b,isSameMonth:()=>x,nextSelection:()=>F,rangePositionOf:()=>V,selectionAnnouncement:()=>O,startOfMonth:()=>f,startOfWeek:()=>v,stripTime:()=>c,toISODateString:()=>k});module.exports=$(z);var h=require("lit"),s=require("lit/decorators.js"),A=require("../internal/define.cjs"),S=require("../utils/live-announcer.cjs"),d=require("./locale.cjs");function y(e,t){return new Date(e,t+1,0).getDate()}function f(e){return new Date(e.getFullYear(),e.getMonth(),1)}function M(e,t){let n=e.getDate(),r=new Date(e.getFullYear(),e.getMonth(),1);r.setMonth(r.getMonth()+t);let a=y(r.getFullYear(),r.getMonth());return r.setDate(Math.min(n,a)),r}function R(e,t){return M(e,t*12)}function w(e,t){let n=new Date(e);return n.setDate(n.getDate()+t),n}function b(e,t){return!e||!t?!1:e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}function x(e,t){return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()}function v(e,t){let n=new Date(e.getFullYear(),e.getMonth(),e.getDate()),r=(n.getDay()-t+7)%7;return n.setDate(n.getDate()-r),n}function W(e,t){return w(v(e,t),6)}function c(e){return new Date(e.getFullYear(),e.getMonth(),e.getDate())}function _(e,t,n,r){let a=c(e).getTime();return!!(t&&a<c(t).getTime()||n&&a>c(n).getTime()||r?.(e))}function k(e){let t=e.getFullYear(),n=String(e.getMonth()+1).padStart(2,"0"),r=String(e.getDate()).padStart(2,"0");return`${t}-${n}-${r}`}function P(e,t){if(x(e,t))return e;let n=y(t.getFullYear(),t.getMonth());return new Date(t.getFullYear(),t.getMonth(),Math.min(e.getDate(),n))}function I(e,t=0){let n=v(f(e),t),r=[],a=n;for(let l=0;l<6;l++){let u=[];for(let g=0;g<7;g++)u.push({date:a,outsideMonth:!x(a,e)}),a=w(a,1);r.push(u)}return r}function D(e){return e!==null&&!Array.isArray(e)&&!(e instanceof Date)}function L(e){return e==="multiple"?[]:null}function V(e,t){let n=c(t).getTime(),r=c(e.start).getTime();if(e.end===null)return n===r?"start":void 0;let a=c(e.end).getTime();if(!(n<r||n>a))return n===r?"start":n===a?"end":"middle"}function U(e,t){return e===null?!1:Array.isArray(e)?e.some(n=>b(n,t)):D(e)?V(e,t)!==void 0:b(e,t)}function F(e,t,n){if(e==="single")return n;if(e==="multiple"){let a=Array.isArray(t)?t:[],l=a.filter(u=>!b(u,n));return l.length!==a.length?l:[...a,n].sort((u,g)=>u.getTime()-g.getTime())}let r=D(t)&&t.end===null?t:void 0;return r?c(n).getTime()<c(r.start).getTime()?{start:n,end:r.start}:{start:r.start,end:n}:{start:n,end:null}}function O(e,t){return D(e)?e.end===null?`${(0,d.formatDateLabel)(e.start,t)} selected as the range start. Select an end date.`:`Range selected, ${(0,d.formatDateLabel)(e.start,t)} to ${(0,d.formatDateLabel)(e.end,t)}.`:Array.isArray(e)?`${e.length} ${e.length===1?"date":"dates"} selected.`:""}var q={fromAttribute(e){if(e==null)return;let t=/^(\d{4})-(\d{2})(?:-(\d{2}))?$/.exec(e.trim()),n=t?new Date(Number(t[1]),Number(t[2])-1,Number(t[3]??"1")):new Date(e);return Number.isNaN(n.getTime())?void 0:n},toAttribute(){}};function m(e){return e===null?null:Array.isArray(e)?e[0]??null:D(e)?e.start:e}var o=class extends h.LitElement{constructor(){super(...arguments);this.selectionMode="single";this.value=null;this.month=f(new Date);this._constructedMonth=this.month;this._monthSeeded=!1;this.numberOfMonths=1;this.focusedDate=m(this.value)??this.month}get resolvedWeekStartsOn(){return this.weekStartsOn??(0,d.getLocaleWeekStartsOn)(this.locale)}get months(){return Array.from({length:Math.max(1,this.numberOfMonths)},(n,r)=>M(this.month,r))}get weekDayNames(){let n=this.resolvedWeekStartsOn,r=(0,d.getWeekDayNames)(this.locale,n,"short"),a=(0,d.getWeekDayNames)(this.locale,n,"long");return r.map((l,u)=>({short:l,long:a[u]}))}connectedCallback(){super.connectedCallback(),this.focusedDate=m(this.value)??this.month}setValue(n){let r=F(this.selectionMode,this.value,n);this.value=r,this.focusedDate=n,this.emit("value-change",r);let a=(this.getSelectionAnnouncement??O)(r,this.locale);a&&(0,S.announce)(a)}setMonth(n){let r=f(n);r.getTime()!==f(this.month).getTime()&&(this.month=r,this.emit("month-change",this.month))}setFocusedDate(n){this.focusedDate=n,this.notify()}emit(n,r){this.dispatchEvent(new CustomEvent(n,{detail:r,bubbles:!0,composed:!0})),this.notify()}notify(){this.dispatchEvent(new CustomEvent("skdx-calendar-internal-update",{bubbles:!0,composed:!0})),this.requestUpdate()}willUpdate(n){if(this._monthSeeded||!(n.has("defaultMonth")||n.has("value")))return;if(this.month!==this._constructedMonth){this._monthSeeded=!0;return}let r=this.defaultMonth??m(this.value);r&&(this._monthSeeded=!0,this.month=f(r),this.focusedDate=m(this.value)??this.month)}updated(n){n.size>0&&this.dispatchEvent(new CustomEvent("skdx-calendar-internal-update",{bubbles:!0,composed:!0}))}render(){return h.html`<slot></slot>`}};o.styles=h.css`
+"use strict";var A=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var J=Object.prototype.hasOwnProperty;var K=(e,n)=>{for(var t in n)A(e,t,{get:n[t],enumerable:!0})},Q=(e,n,t,a)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of j(n))!J.call(e,i)&&i!==t&&A(e,i,{get:()=>n[i],enumerable:!(a=R(n,i))||a.enumerable});return e};var X=e=>Q(A({},"__esModule",{value:!0}),e),s=(e,n,t,a)=>{for(var i=a>1?void 0:a?R(n,t):n,l=e.length-1,d;l>=0;l--)(d=e[l])&&(i=(a?d(n,t,i):d(i))||i);return a&&i&&A(n,t,i),i};var ue={};K(ue,{CALENDAR_VIEWS:()=>p,CALENDAR_YEAR_PAGE:()=>M,SkdxCalendar:()=>r,addDays:()=>T,addMonths:()=>y,addYears:()=>Z,anchorOf:()=>c,clampToDateRange:()=>N,clampToMonth:()=>q,clampView:()=>S,emptySelection:()=>se,endOfWeek:()=>k,formatViewPageLabel:()=>B,getDaysInMonth:()=>Y,getISOWeek:()=>ae,getVisibleWeeks:()=>re,hasAvailableDate:()=>ne,isDateDisabled:()=>ee,isDateRange:()=>_,isDateSelected:()=>oe,isSameDay:()=>w,isSameMonth:()=>V,nextSelection:()=>z,rangePositionOf:()=>G,resetInstantDateWarning:()=>te,resolveCalendarDisabled:()=>P,selectionAnnouncement:()=>H,startOfMonth:()=>g,startOfWeek:()=>O,stripTime:()=>u,toISODateString:()=>ie,warnInstantDate:()=>W,yearPageStart:()=>L});module.exports=X(ue);var v=require("lit"),o=require("lit/decorators.js"),F=require("../internal/authored.cjs"),D=require("../internal/date-value.cjs"),U=require("../internal/define.cjs"),$=require("../utils/is-dev-mode.cjs"),C=require("../utils/live-announcer.cjs"),b=require("./CalendarAnatomy.cjs"),h=require("./locale.cjs");function Y(e,n){return new Date(e,n+1,0).getDate()}function g(e){return new Date(e.getFullYear(),e.getMonth(),1)}function y(e,n){let t=e.getDate(),a=new Date(e.getFullYear(),e.getMonth(),1);a.setMonth(a.getMonth()+n);let i=Y(a.getFullYear(),a.getMonth());return a.setDate(Math.min(t,i)),a}function Z(e,n){return y(e,n*12)}function T(e,n){let t=new Date(e);return t.setDate(t.getDate()+n),t}function w(e,n){return!e||!n?!1:e.getFullYear()===n.getFullYear()&&e.getMonth()===n.getMonth()&&e.getDate()===n.getDate()}function V(e,n){return e.getFullYear()===n.getFullYear()&&e.getMonth()===n.getMonth()}function O(e,n){let t=new Date(e.getFullYear(),e.getMonth(),e.getDate()),a=(t.getDay()-n+7)%7;return t.setDate(t.getDate()-a),t}function k(e,n){return T(O(e,n),6)}function u(e){return new Date(e.getFullYear(),e.getMonth(),e.getDate())}function N(e,n,t){return n&&u(e).getTime()<u(n).getTime()?n:t&&u(e).getTime()>u(t).getTime()?t:e}function ee(e,n,t,a){let i=u(e).getTime();return!!(n&&i<u(n).getTime()||t&&i>u(t).getTime()||a?.(e))}function P(e,n){return{disabled:e??!1,isDateDisabled:n}}var x=!1;function te(){x=!1}function W(e,n){!e||x||!(e.getUTCHours()===0&&e.getUTCMinutes()===0&&e.getUTCSeconds()===0&&e.getUTCMilliseconds()===0)||e.getDate()===e.getUTCDate()&&e.getMonth()===e.getUTCMonth()||(x=!0,(0,$.isDevMode)()&&console.warn(`[skdx] Calendar: \`${n}\` was given ${e.toISOString()}, which is midnight UTC and therefore ${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")} in this time zone \u2014 a different day from the one the string says. A selection here is a local wall-clock date, never an instant: build it as \`new Date(year, monthIndex, day)\` rather than \`new Date('YYYY-MM-DD')\`, which the platform reads as UTC.`))}var p=["day","month","year"],M=20;function S(e,n,t){let a=p.indexOf(n),i=Math.max(a,p.indexOf(t));return p[Math.min(Math.max(p.indexOf(e),a),i)]}function L(e){return Math.floor(e/M)*M}function ne(e,n,t,a,i){let l=t&&u(t)>u(e)?u(t):u(e),d=a&&u(a)<u(n)?u(a):u(n);if(l.getTime()>d.getTime())return!1;if(!i)return!0;for(let f=l;f.getTime()<=d.getTime();f=T(f,1))if(!i(f))return!0;return!1}function B(e,n,t){if(n==="day")return(0,h.formatMonthLabel)(e,t);if(n==="month")return(0,h.formatYear)(e.getFullYear(),t);let a=L(e.getFullYear());return(0,h.formatYearRange)(a,a+M-1,t)}function ae(e){let n=new Date(e.getFullYear(),e.getMonth(),e.getDate());n.setDate(n.getDate()-(n.getDay()+6)%7+3);let t=new Date(n.getFullYear(),0,4);return t.setDate(t.getDate()-(t.getDay()+6)%7+3),1+Math.round((n.getTime()-t.getTime())/(10080*60*1e3))}function ie(e){let n=e.getFullYear(),t=String(e.getMonth()+1).padStart(2,"0"),a=String(e.getDate()).padStart(2,"0");return`${n}-${t}-${a}`}function q(e,n){if(V(e,n))return e;let t=Y(n.getFullYear(),n.getMonth());return new Date(n.getFullYear(),n.getMonth(),Math.min(e.getDate(),t))}function re(e,n=0){let t=O(g(e),n),a=[],i=t;for(let l=0;l<6;l++){let d=[];for(let f=0;f<7;f++)d.push({date:i,outsideMonth:!V(i,e)}),i=T(i,1);a.push(d)}return a}function _(e){return e!==null&&!Array.isArray(e)&&!(e instanceof Date)}function se(e){return e==="multiple"?[]:null}function G(e,n){let t=u(n).getTime(),a=u(e.start).getTime();if(e.end===null)return t===a?"start":void 0;let i=u(e.end).getTime();if(!(t<a||t>i))return t===a?"start":t===i?"end":"middle"}function oe(e,n){return e===null?!1:Array.isArray(e)?e.some(t=>w(t,n)):_(e)?G(e,n)!==void 0:w(e,n)}function z(e,n,t){if(e==="single")return t;if(e==="multiple"){let i=Array.isArray(n)?n:[],l=i.filter(d=>!w(d,t));return l.length!==i.length?l:[...i,t].sort((d,f)=>d.getTime()-f.getTime())}let a=_(n)&&n.end===null?n:void 0;return a?u(t).getTime()<u(a.start).getTime()?{start:t,end:a.start}:{start:a.start,end:t}:{start:t,end:null}}function H(e,n){return _(e)?e.end===null?`${(0,h.formatDateLabel)(e.start,n)} selected as the range start. Select an end date.`:`Range selected, ${(0,h.formatDateLabel)(e.start,n)} to ${(0,h.formatDateLabel)(e.end,n)}.`:Array.isArray(e)?`${e.length} ${e.length===1?"date":"dates"} selected.`:""}var m={fromAttribute(e){if(e!=null)return(0,D.toDate)(e,"a date attribute")??void 0},toAttribute(){}},E={fromAttribute(e){return e==null?null:(0,D.toCalendarValue)(e,"single","value")??null},toAttribute(){}};function c(e){return e===null?null:Array.isArray(e)?e[0]??null:_(e)?e.start:e}var r=class extends v.LitElement{constructor(){super(...arguments);this.selectionMode="single";this._value=null;this.month=g(new Date);this._constructedMonth=this.month;this._monthSeeded=!1;this._valueSeeded=!1;this.numberOfMonths=1;this.readOnly=!1;this.outsideDaySelectable=!1;this.disabled=!1;this.pageBehavior="visible";this._constructedToday=new Date;this._focusedDate=c(this.value)??this.month;this._focusAuto=!0;this._focusSeeded=!1;this._view="day";this._viewAuto=!0;this._viewSeeded=!1;this.minView="day";this.maxView="year";this.weekNumbers=!1;this._anatomyFilledFor="";this.fillAnatomy=()=>{if((0,F.hasAuthoredContent)(this,b.CALENDAR_ANATOMY_GENERATED)){(0,F.removeGeneratedContent)(this,b.CALENDAR_ANATOMY_GENERATED),this._anatomyFilledFor="";return}let t=String(this.numberOfMonths);t===this._anatomyFilledFor&&this.children.length>0||(this._anatomyFilledFor=t,(0,b.fillCalendarAnatomy)(this))}}get value(){return this._value}set value(t){let a=this._value;this._value=(0,D.toCalendarValue)(t,"single","value")??null,this.requestUpdate("value",a)}get defaultValue(){return this._defaultValue}set defaultValue(t){let a=this._defaultValue;this._defaultValue=(0,D.toCalendarValue)(t,"single","defaultValue"),this.requestUpdate("defaultValue",a)}get resolvedDisabled(){return P(this.disabled,this.isDateDisabled)}get todayDate(){return this.today??this._constructedToday}get focusedDate(){return this._focusedDate}set focusedDate(t){this._focusAuto=!1,this.moveFocusedDate(t)}moveFocusedDate(t){let a=this._focusedDate;this._focusedDate=t,this.requestUpdate("focusedDate",a)}get view(){return S(this._view,this.minView,this.maxView)}set view(t){this._viewAuto=!1,this.moveView(t)}moveView(t){let a=this._view;this._view=t,this.requestUpdate("view",a)}get valueAsString(){return(0,D.toCalendarString)(this.value)}get resolvedWeekStartsOn(){return this.weekStartsOn??(0,h.getLocaleWeekStartsOn)(this.locale)}get months(){return Array.from({length:Math.max(1,this.numberOfMonths)},(t,a)=>y(this.month,a))}get weekDayNames(){let t=this.resolvedWeekStartsOn,a=(0,h.getWeekDayNames)(this.locale,t,"short"),i=(0,h.getWeekDayNames)(this.locale,t,"long");return a.map((l,d)=>({short:l,long:i[d]}))}connectedCallback(){super.connectedCallback(),this._focusAuto&&this.moveFocusedDate(c(this.value)??this.month),queueMicrotask(this.fillAnatomy)}setValue(t){if(this.readOnly||this.resolvedDisabled.disabled)return;let a=z(this.selectionMode,this.value,t);this.value=a,this.setFocusedDate(t),this.emit("value-change",a);let i=(this.getSelectionAnnouncement??H)(a,this.locale);i&&(0,C.announce)(i)}setMonth(t){let a=g(t);a.getTime()!==g(this.month).getTime()&&(this.month=a,this.emit("month-change",this.month))}pageMonths(t){let a=this.view;if(a!=="day"){let f=a==="month"?12:12*M,I=y(this.focusedDate,t*f);this.setFocusedDate(I),(0,C.announce)(B(I,a,this.locale));return}let i=this.pageBehavior==="single"?1:Math.max(1,this.numberOfMonths),l=y(this.month,t*i);this.setMonth(l),this.setFocusedDate(q(this.focusedDate,l));let d=(this.getMonthAnnouncement??h.formatMonthLabel)(g(l),this.locale);d&&(0,C.announce)(d)}setFocusedDate(t){let a=N(t,this.minDate,this.maxDate);w(a,this._focusedDate)||(this.moveFocusedDate(a),this.emit("focus-change",a))}setView(t){let a=S(t,this.minView,this.maxView);a!==this.view&&(this.moveView(a),this.emit("view-change",a))}navigateToUnit(t){this.setFocusedDate(t),this.months.some(a=>V(t,a))||this.setMonth(t),this.setView(p[p.indexOf(this.view)-1]??"day")}emit(t,a){this.dispatchEvent(new CustomEvent(t,{detail:a,bubbles:!0,composed:!0})),this.notify()}notify(){this.dispatchEvent(new CustomEvent("skdx-calendar-internal-update",{bubbles:!0,composed:!0})),this.requestUpdate()}willUpdate(t){if(this.selectionMode==="multiple"&&(this.value instanceof Date&&(this.value=[this.value]),this.defaultValue instanceof Date&&(this.defaultValue=[this.defaultValue])),!this._viewSeeded&&t.has("defaultView")&&(this._viewSeeded=!0,this.defaultView&&this._viewAuto&&this.moveView(this.defaultView)),!this._focusSeeded&&t.has("defaultFocusedDate")&&(this._focusSeeded=!0,this.defaultFocusedDate&&this._focusAuto&&this.moveFocusedDate(this.defaultFocusedDate)),!this._valueSeeded&&t.has("defaultValue")){this._valueSeeded=!0;let i=this.defaultValue??null,l=this.value===null||Array.isArray(this.value)&&this.value.length===0;i!==null&&l&&(this.value=i,this.moveFocusedDate(c(i)??this._focusedDate))}if(this._monthSeeded||!(t.has("defaultMonth")||t.has("value")))return;if(this.month!==this._constructedMonth){this._monthSeeded=!0;return}let a=this.defaultMonth??c(this.value);a&&(this._monthSeeded=!0,this.month=g(a),this._focusAuto&&this.moveFocusedDate(c(this.value)??this.month))}update(t){if(super.update(t),t.has("value")&&W(c(this.value),"value"),!t.has("value")||!this._monthSeeded)return;let a=c(this.value);a&&(this.months.some(i=>V(a,i))||(this.setFocusedDate(a),this.setMonth(a)))}updated(t){this.fillAnatomy(),t.size>0&&this.dispatchEvent(new CustomEvent("skdx-calendar-internal-update",{bubbles:!0,composed:!0}))}render(){return v.html`<slot @slotchange=${this.fillAnatomy}></slot>`}};r.styles=v.css`
     :host {
       display: block;
     }
-  `,i([(0,s.property)({type:String,reflect:!0,attribute:"selection-mode"})],o.prototype,"selectionMode",2),i([(0,s.property)({attribute:!1})],o.prototype,"value",2),i([(0,s.property)({attribute:!1})],o.prototype,"month",2),i([(0,s.property)({converter:q,attribute:"default-month"})],o.prototype,"defaultMonth",2),i([(0,s.property)({type:Number,attribute:"number-of-months"})],o.prototype,"numberOfMonths",2),i([(0,s.property)({type:String})],o.prototype,"locale",2),i([(0,s.property)({type:Number,attribute:"week-starts-on"})],o.prototype,"weekStartsOn",2),i([(0,s.property)({attribute:!1})],o.prototype,"minDate",2),i([(0,s.property)({attribute:!1})],o.prototype,"maxDate",2),i([(0,s.property)({attribute:!1})],o.prototype,"disabled",2),i([(0,s.property)({attribute:!1})],o.prototype,"isDateUnavailable",2),i([(0,s.property)({attribute:!1})],o.prototype,"getSelectionAnnouncement",2),o=i([(0,A.customElement)("skdx-calendar","calendar","root")],o);0&&(module.exports={SkdxCalendar,addDays,addMonths,addYears,anchorOf,clampToMonth,emptySelection,endOfWeek,getDaysInMonth,getVisibleWeeks,isDateDisabled,isDateRange,isDateSelected,isSameDay,isSameMonth,nextSelection,rangePositionOf,selectionAnnouncement,startOfMonth,startOfWeek,stripTime,toISODateString});
+  `,s([(0,o.property)({type:String,reflect:!0,attribute:"selection-mode"})],r.prototype,"selectionMode",2),s([(0,o.property)({converter:E})],r.prototype,"value",1),s([(0,o.property)({converter:m})],r.prototype,"month",2),s([(0,o.property)({converter:m,attribute:"default-month"})],r.prototype,"defaultMonth",2),s([(0,o.property)({type:Number,attribute:"number-of-months"})],r.prototype,"numberOfMonths",2),s([(0,o.property)({type:String})],r.prototype,"locale",2),s([(0,o.property)({type:Number,attribute:"week-starts-on"})],r.prototype,"weekStartsOn",2),s([(0,o.property)({converter:m,attribute:"min-date"})],r.prototype,"minDate",2),s([(0,o.property)({converter:m,attribute:"max-date"})],r.prototype,"maxDate",2),s([(0,o.property)({converter:E,attribute:"default-value"})],r.prototype,"defaultValue",1),s([(0,o.property)({type:Boolean,reflect:!0,attribute:"read-only"})],r.prototype,"readOnly",2),s([(0,o.property)({type:Boolean,reflect:!0,attribute:"outside-day-selectable"})],r.prototype,"outsideDaySelectable",2),s([(0,o.property)({type:Boolean})],r.prototype,"disabled",2),s([(0,o.property)({attribute:!1})],r.prototype,"isDateDisabled",2),s([(0,o.property)({attribute:!1})],r.prototype,"isDateUnavailable",2),s([(0,o.property)({attribute:!1})],r.prototype,"getSelectionAnnouncement",2),s([(0,o.property)({attribute:!1})],r.prototype,"getMonthAnnouncement",2),s([(0,o.property)({type:String,attribute:"page-behavior"})],r.prototype,"pageBehavior",2),s([(0,o.property)({converter:m})],r.prototype,"today",2),s([(0,o.property)({converter:m,attribute:"focused-date"})],r.prototype,"focusedDate",1),s([(0,o.property)({converter:m,attribute:"default-focused-date"})],r.prototype,"defaultFocusedDate",2),s([(0,o.property)({type:String,reflect:!0})],r.prototype,"view",1),s([(0,o.property)({type:String,attribute:"default-view"})],r.prototype,"defaultView",2),s([(0,o.property)({type:String,attribute:"min-view"})],r.prototype,"minView",2),s([(0,o.property)({type:String,attribute:"max-view"})],r.prototype,"maxView",2),s([(0,o.property)({type:Boolean,reflect:!0,attribute:"week-numbers"})],r.prototype,"weekNumbers",2),r=s([(0,U.customElement)("skdx-calendar","calendar","root")],r);0&&(module.exports={CALENDAR_VIEWS,CALENDAR_YEAR_PAGE,SkdxCalendar,addDays,addMonths,addYears,anchorOf,clampToDateRange,clampToMonth,clampView,emptySelection,endOfWeek,formatViewPageLabel,getDaysInMonth,getISOWeek,getVisibleWeeks,hasAvailableDate,isDateDisabled,isDateRange,isDateSelected,isSameDay,isSameMonth,nextSelection,rangePositionOf,resetInstantDateWarning,resolveCalendarDisabled,selectionAnnouncement,startOfMonth,startOfWeek,stripTime,toISODateString,warnInstantDate,yearPageStart});