@skdx/web-components 0.28.0 → 0.29.0

package/dist/calendar/CalendarGrid.d.ts

@@ -1,12 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Grid container for `<skdx-calendar>` dates with roving-focus navigation:
- * arrows move by day/week, Home/End jump week bounds, PageUp/PageDown move by
- * month (Shift+PageUp/Down by year). Navigating outside displayed months
- * updates the calendar's month.
- *
- * For multi-month calendars, create one grid per month with `month-offset` to
- * mark outside dates.
+ * Grid container for `<skdx-calendar>` dates with roving-focus navigation via arrows, Home/End, and PageUp/PageDown.
  */
 export declare class SkdxCalendarGrid extends LitElement {
     static styles: import("lit").CSSResult;
@@ -17,28 +11,21 @@ export declare class SkdxCalendarGrid extends LitElement {
      */
     monthOffset: number;
     /**
-     * Overrides the grid's accessible name, which defaults to the locale-formatted
-     * month. Grids have no implicit name, so unnamed ones announce bare "grid";
-     * with `number-of-months > 1`, several identical-sounding grids confuse
-     * screen readers. Defaults to the same month label as
-     * `<skdx-calendar-heading>` for consistency. Since the host is the grid,
-     * markup `aria-label` is overwritten; set this property instead.
+     * Overrides the grid's accessible name, which otherwise defaults to the locale-formatted month.
      * @default undefined — the locale-formatted month.
      */
     label?: string;
     private root;
     private readonly onUpdate;
-    /**
-     * The month this grid renders — read by cells instead of the root's month,
-     * so they know which month they belong to in multi-month calendars.
-     */
+    /** The month this grid renders, since cells read it instead of the root's month. */
     get gridMonth(): Date | undefined;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(): void;
+    private syncAriaLabel;
     private moveFocus;
     private readonly handleKeyDown;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/calendar/CalendarGrid.js

@@ -1,11 +1,10 @@
-var m=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var i=(d,a,o,e)=>{for(var t=e>1?void 0:e?f(a,o):a,r=d.length-1,l;r>=0;r--)(l=d[r])&&(t=(e?l(a,o,t):l(t))||t);return e&&t&&m(a,o,t),t};import{css as b,html as p,LitElement as v}from"lit";import{property as c}from"lit/decorators.js";import{customElement as y}from"../internal/define.js";import{directionalKey as D}from"../internal/direction.js";import{addDays as n,addMonths as h,addYears as u,clampToDateRange as k,endOfWeek as g,isSameMonth as w,startOfMonth as A,startOfWeek as M,toISODateString as E}from"./Calendar.js";import{formatMonthLabel as L}from"./locale.js";var s=class extends v{constructor(){super(...arguments);this.monthOffset=0;this.root=null;this.onUpdate=()=>this.requestUpdate();this.handleKeyDown=o=>{let e=this.root;if(!e)return;let t;switch(D(o.key,this)){case"ArrowLeft":t=n(e.focusedDate,-1);break;case"ArrowRight":t=n(e.focusedDate,1);break;case"ArrowUp":t=n(e.focusedDate,-7);break;case"ArrowDown":t=n(e.focusedDate,7);break;case"Home":t=M(e.focusedDate,e.resolvedWeekStartsOn);break;case"End":t=g(e.focusedDate,e.resolvedWeekStartsOn);break;case"PageUp":t=o.shiftKey?u(e.focusedDate,-1):h(e.focusedDate,-1);break;case"PageDown":t=o.shiftKey?u(e.focusedDate,1):h(e.focusedDate,1);break;default:return}o.preventDefault(),this.moveFocus(t)}}get gridMonth(){let o=this.root;if(o)return o.months[this.monthOffset]??o.month}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-calendar"),this.setAttribute("role","grid"),this.root?.addEventListener("skdx-calendar-internal-update",this.onUpdate),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.root?.removeEventListener("skdx-calendar-internal-update",this.onUpdate),this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}willUpdate(){let o=(this.root?.view??"day")==="day";if(this.hidden=!o,!o){this.removeAttribute("role"),this.removeAttribute("aria-label"),this.removeAttribute("aria-multiselectable");return}this.setAttribute("role","grid"),this.setAttribute("aria-multiselectable",String((this.root?.selectionMode??"single")!=="single"));let e=this.gridMonth;this.setAttribute("aria-label",this.label??(e?L(e,this.root?.locale):""));for(let[t,r]of[["aria-readonly",this.root?.readOnly??!1],["aria-disabled",this.root?.resolvedDisabled.disabled??!1]])r?this.setAttribute(t,"true"):this.removeAttribute(t)}moveFocus(o){let e=this.root;if(!e)return;let t=k(o,e.minDate,e.maxDate);e.months.some(r=>w(t,r))||e.setMonth(A(t)),e.setFocusedDate(t),requestAnimationFrame(()=>{let r=E(t);e.querySelector(`[data-skdx-calendar-cell="${r}"]:not([disabled])`)?.focus()})}render(){return p`<slot></slot>`}};s.styles=b`
+var f=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var i=(d,a,o,e)=>{for(var t=e>1?void 0:e?b(a,o):a,r=d.length-1,l;r>=0;r--)(l=d[r])&&(t=(e?l(a,o,t):l(t))||t);return e&&t&&f(a,o,t),t};import{css as p,html as v,LitElement as y}from"lit";import{property as c}from"lit/decorators.js";import{formatMonthLabel as D}from"../internal/calendar-locale.js";import{customElement as A}from"../internal/define.js";import{directionalKey as k}from"../internal/direction.js";import{addDays as n,addMonths as u,addYears as m,clampToDateRange as g,endOfWeek as w,isSameMonth as L,startOfMonth as M,startOfWeek as E,toISODateString as O}from"./Calendar.js";import{CALENDAR_FAMILY as h}from"./family.js";var s=class extends y{constructor(){super(...arguments);this.monthOffset=0;this.root=null;this.onUpdate=()=>this.requestUpdate();this.handleKeyDown=o=>{let e=this.root;if(!e)return;let t;switch(k(o.key,this)){case"ArrowLeft":t=n(e.focusedDate,-1);break;case"ArrowRight":t=n(e.focusedDate,1);break;case"ArrowUp":t=n(e.focusedDate,-7);break;case"ArrowDown":t=n(e.focusedDate,7);break;case"Home":t=E(e.focusedDate,e.resolvedWeekStartsOn);break;case"End":t=w(e.focusedDate,e.resolvedWeekStartsOn);break;case"PageUp":t=o.shiftKey?m(e.focusedDate,-1):u(e.focusedDate,-1);break;case"PageDown":t=o.shiftKey?m(e.focusedDate,1):u(e.focusedDate,1);break;default:return}o.preventDefault(),this.moveFocus(t)}}get gridMonth(){let o=this.root;if(o)return o.months[this.monthOffset]??o.month}connectedCallback(){super.connectedCallback(),this.root=h.root(this),this.setAttribute("role","grid"),this.root?.addEventListener(h.event,this.onUpdate),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.root?.removeEventListener(h.event,this.onUpdate),this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}willUpdate(){let o=(this.root?.view??"day")==="day";if(this.hidden=!o,!o){this.removeAttribute("role"),this.removeAttribute("aria-label"),this.removeAttribute("aria-multiselectable");return}this.setAttribute("role","grid"),this.setAttribute("aria-multiselectable",String((this.root?.selectionMode??"single")!=="single")),this.syncAriaLabel();for(let[e,t]of[["aria-readonly",this.root?.readOnly??!1],["aria-disabled",this.root?.resolvedDisabled.disabled??!1]])t?this.setAttribute(e,"true"):this.removeAttribute(e)}syncAriaLabel(){if(this.label!==void 0){this.setAttribute("aria-label",this.label);return}if(this.hasAttribute("aria-labelledby")){this.removeAttribute("aria-label");return}let o=this.gridMonth;this.setAttribute("aria-label",o?D(o,this.root?.locale):"")}moveFocus(o){let e=this.root;if(!e)return;let t=g(o,e.minDate,e.maxDate);e.months.some(r=>L(t,r))||e.setMonth(M(t)),e.setFocusedDate(t),requestAnimationFrame(()=>{let r=O(t);e.querySelector(`[data-skdx-calendar-cell="${r}"]:not([disabled])`)?.focus()})}render(){return v`<slot></slot>`}};s.styles=p`
     :host {
       display: block;
     }
 
-    /* Shadow styles override UA [hidden], so :host rule prevents
-       a role-less empty grid. */
+    /* :host rule needed since shadow styles would otherwise beat the UA's [hidden]. */
     :host([hidden]) {
       display: none;
     }
-  `,i([c({type:Number,attribute:"month-offset"})],s.prototype,"monthOffset",2),i([c({type:String})],s.prototype,"label",2),s=i([y("skdx-calendar-grid","calendar","grid")],s);export{s as SkdxCalendarGrid};
+  `,i([c({type:Number,attribute:"month-offset"})],s.prototype,"monthOffset",2),i([c({type:String})],s.prototype,"label",2),s=i([A("skdx-calendar-grid","calendar","grid")],s);export{s as SkdxCalendarGrid};

package/dist/calendar/CalendarGridBody.cjs

@@ -1,5 +1,5 @@
-"use strict";var m=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var E=(a,t)=>{for(var r in t)m(a,r,{get:t[r],enumerable:!0})},y=(a,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of v(t))!g.call(a,e)&&e!==r&&m(a,e,{get:()=>t[e],enumerable:!(n=b(t,e))||n.enumerable});return a};var S=a=>y(m({},"__esModule",{value:!0}),a),C=(a,t,r,n)=>{for(var e=n>1?void 0:n?b(t,r):t,o=a.length-1,d;o>=0;o--)(d=a[o])&&(e=(n?d(t,r,e):d(e))||e);return n&&e&&m(t,r,e),e};var N={};E(N,{SkdxCalendarGridBody:()=>l});module.exports=S(N);var i=require("lit"),h=require("../internal/authored.cjs"),x=require("../internal/define.cjs"),k=require("./Calendar.cjs"),A=require("./CalendarCell.cjs"),W=require("./CalendarRow.cjs"),F=require("./CalendarWeekNumber.cjs");var p="data-skdx-calendar-generated",l=class extends i.LitElement{constructor(){super(...arguments);this.root=null;this.onUpdate=()=>this.fill();this.filledFor=""}connectedCallback(){super.connectedCallback(),this.setAttribute("role","rowgroup"),this.root=this.closest("skdx-calendar"),this.root?.addEventListener("skdx-calendar-internal-update",this.onUpdate),this.fill()}disconnectedCallback(){this.root?.removeEventListener("skdx-calendar-internal-update",this.onUpdate),super.disconnectedCallback()}fill(){let r=this.root;if(!r)return;if((0,h.hasAuthoredContent)(this,p)){(0,h.removeGeneratedContent)(this,p),this.filledFor="";return}let e=this.closest("skdx-calendar-grid")?.gridMonth??r.month,o=r.resolvedWeekStartsOn,d=`${(0,k.toISODateString)(e)}/${o}/${r.weekNumbers}`;d===this.filledFor&&this.children.length>0||(this.filledFor=d,this.replaceChildren(...(0,k.getVisibleWeeks)(e,o).map(f=>{let s=document.createElement("skdx-calendar-row");if(s.setAttribute(p,""),r.weekNumbers){let c=document.createElement("skdx-calendar-week-number");c.date=f[0].date,s.append(c)}for(let c of f){let u=document.createElement("skdx-calendar-cell");u.setAttribute(p,""),u.date=c.date,s.append(u)}return s})))}render(){return i.html`<slot @slotchange=${this.onUpdate}></slot>`}};l.styles=i.css`
+"use strict";var m=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var y=(o,t)=>{for(var r in t)m(o,r,{get:t[r],enumerable:!0})},A=(o,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of x(t))!C.call(o,e)&&e!==r&&m(o,e,{get:()=>t[e],enumerable:!(n=b(t,e))||n.enumerable});return o};var w=o=>A(m({},"__esModule",{value:!0}),o),g=(o,t,r,n)=>{for(var e=n>1?void 0:n?b(t,r):t,i=o.length-1,l;i>=0;i--)(l=o[i])&&(e=(n?l(t,r,e):l(e))||e);return n&&e&&m(t,r,e),e};var L={};y(L,{SkdxCalendarGridBody:()=>s});module.exports=w(L);var a=require("lit"),u=require("../internal/authored.cjs"),E=require("../internal/define.cjs"),f=require("./Calendar.cjs"),F=require("./CalendarCell.cjs"),S=require("./CalendarRow.cjs"),T=require("./CalendarWeekNumber.cjs"),h=require("./family.cjs");var p="data-skdx-calendar-generated",s=class extends a.LitElement{constructor(){super(...arguments);this.root=null;this.onUpdate=()=>this.fill();this.filledFor=""}connectedCallback(){super.connectedCallback(),this.setAttribute("role","rowgroup"),this.root=h.CALENDAR_FAMILY.root(this),this.root?.addEventListener(h.CALENDAR_FAMILY.event,this.onUpdate),this.fill()}disconnectedCallback(){this.root?.removeEventListener(h.CALENDAR_FAMILY.event,this.onUpdate),super.disconnectedCallback()}fill(){let r=this.root;if(!r)return;if((0,u.hasAuthoredContent)(this,p)){(0,u.removeGeneratedContent)(this,p),this.filledFor="";return}let e=this.closest("skdx-calendar-grid")?.gridMonth??r.month,i=r.resolvedWeekStartsOn,l=`${(0,f.toISODateString)(e)}/${i}/${r.weekNumbers}`;l===this.filledFor&&this.children.length>0||(this.filledFor=l,this.replaceChildren(...(0,f.getVisibleWeeks)(e,i).map(v=>{let d=document.createElement("skdx-calendar-row");if(d.setAttribute(p,""),r.weekNumbers){let c=document.createElement("skdx-calendar-week-number");c.date=v[0].date,d.append(c)}for(let c of v){let k=document.createElement("skdx-calendar-cell");k.setAttribute(p,""),k.date=c.date,d.append(k)}return d})))}render(){return a.html`<slot @slotchange=${this.onUpdate}></slot>`}};s.styles=a.css`
     :host {
       display: block;
     }
-  `,l=C([(0,x.customElement)("skdx-calendar-grid-body","calendar","grid-body")],l);0&&(module.exports={SkdxCalendarGridBody});
+  `,s=g([(0,E.customElement)("skdx-calendar-grid-body","calendar","grid-body")],s);0&&(module.exports={SkdxCalendarGridBody});

package/dist/calendar/CalendarGridBody.d.cts

@@ -1,12 +1,9 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import './CalendarCell.cjs';
 import './CalendarRow.cjs';
 import './CalendarWeekNumber.cjs';
 /**
- * `role="rowgroup"` wrapper around calendar week rows. Empty renders the
- * displayed month (one row per visible week, one cell per day). Rows live in
- * light DOM so cells are reachable by document stylesheet and focus lookup.
- * Author children win; `rowgroup` fixes axe's `aria-required-children` on grid nesting.
+ * `role="rowgroup"` wrapper around calendar week rows, satisfying axe's `aria-required-children` rule on grid nesting.
  */
 export declare class SkdxCalendarGridBody extends LitElement {
     static styles: import("lit").CSSResult;
@@ -16,7 +13,7 @@ export declare class SkdxCalendarGridBody extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private fill;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/calendar/CalendarGridBody.d.ts

@@ -1,12 +1,9 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import './CalendarCell.js';
 import './CalendarRow.js';
 import './CalendarWeekNumber.js';
 /**
- * `role="rowgroup"` wrapper around calendar week rows. Empty renders the
- * displayed month (one row per visible week, one cell per day). Rows live in
- * light DOM so cells are reachable by document stylesheet and focus lookup.
- * Author children win; `rowgroup` fixes axe's `aria-required-children` on grid nesting.
+ * `role="rowgroup"` wrapper around calendar week rows, satisfying axe's `aria-required-children` rule on grid nesting.
  */
 export declare class SkdxCalendarGridBody extends LitElement {
     static styles: import("lit").CSSResult;
@@ -16,7 +13,7 @@ export declare class SkdxCalendarGridBody extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private fill;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/calendar/CalendarGridBody.js

@@ -1,5 +1,5 @@
-var k=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=(c,n,t,o)=>{for(var e=o>1?void 0:o?u(n,t):n,r=c.length-1,a;r>=0;r--)(a=c[r])&&(e=(o?a(n,t,e):a(e))||e);return o&&e&&k(n,t,e),e};import{css as f,html as b,LitElement as C}from"lit";import{hasAuthoredContent as x,removeGeneratedContent as v}from"../internal/authored.js";import{customElement as g}from"../internal/define.js";import{getVisibleWeeks as E,toISODateString as y}from"./Calendar.js";import"./CalendarCell.js";import"./CalendarRow.js";import"./CalendarWeekNumber.js";var s="data-skdx-calendar-generated",d=class extends C{constructor(){super(...arguments);this.root=null;this.onUpdate=()=>this.fill();this.filledFor=""}connectedCallback(){super.connectedCallback(),this.setAttribute("role","rowgroup"),this.root=this.closest("skdx-calendar"),this.root?.addEventListener("skdx-calendar-internal-update",this.onUpdate),this.fill()}disconnectedCallback(){this.root?.removeEventListener("skdx-calendar-internal-update",this.onUpdate),super.disconnectedCallback()}fill(){let t=this.root;if(!t)return;if(x(this,s)){v(this,s),this.filledFor="";return}let e=this.closest("skdx-calendar-grid")?.gridMonth??t.month,r=t.resolvedWeekStartsOn,a=`${y(e)}/${r}/${t.weekNumbers}`;a===this.filledFor&&this.children.length>0||(this.filledFor=a,this.replaceChildren(...E(e,r).map(p=>{let l=document.createElement("skdx-calendar-row");if(l.setAttribute(s,""),t.weekNumbers){let i=document.createElement("skdx-calendar-week-number");i.date=p[0].date,l.append(i)}for(let i of p){let m=document.createElement("skdx-calendar-cell");m.setAttribute(s,""),m.date=i.date,l.append(m)}return l})))}render(){return b`<slot @slotchange=${this.onUpdate}></slot>`}};d.styles=f`
+var f=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var u=(c,n,t,i)=>{for(var e=i>1?void 0:i?k(n,t):n,r=c.length-1,o;r>=0;r--)(o=c[r])&&(e=(i?o(n,t,e):o(e))||e);return i&&e&&f(n,t,e),e};import{css as v,html as b,LitElement as g}from"lit";import{hasAuthoredContent as E,removeGeneratedContent as x}from"../internal/authored.js";import{customElement as C}from"../internal/define.js";import{getVisibleWeeks as y,toISODateString as A}from"./Calendar.js";import"./CalendarCell.js";import"./CalendarRow.js";import"./CalendarWeekNumber.js";import{CALENDAR_FAMILY as p}from"./family.js";var d="data-skdx-calendar-generated",l=class extends g{constructor(){super(...arguments);this.root=null;this.onUpdate=()=>this.fill();this.filledFor=""}connectedCallback(){super.connectedCallback(),this.setAttribute("role","rowgroup"),this.root=p.root(this),this.root?.addEventListener(p.event,this.onUpdate),this.fill()}disconnectedCallback(){this.root?.removeEventListener(p.event,this.onUpdate),super.disconnectedCallback()}fill(){let t=this.root;if(!t)return;if(E(this,d)){x(this,d),this.filledFor="";return}let e=this.closest("skdx-calendar-grid")?.gridMonth??t.month,r=t.resolvedWeekStartsOn,o=`${A(e)}/${r}/${t.weekNumbers}`;o===this.filledFor&&this.children.length>0||(this.filledFor=o,this.replaceChildren(...y(e,r).map(h=>{let s=document.createElement("skdx-calendar-row");if(s.setAttribute(d,""),t.weekNumbers){let a=document.createElement("skdx-calendar-week-number");a.date=h[0].date,s.append(a)}for(let a of h){let m=document.createElement("skdx-calendar-cell");m.setAttribute(d,""),m.date=a.date,s.append(m)}return s})))}render(){return b`<slot @slotchange=${this.onUpdate}></slot>`}};l.styles=v`
     :host {
       display: block;
     }
-  `,d=h([g("skdx-calendar-grid-body","calendar","grid-body")],d);export{d as SkdxCalendarGridBody};
+  `,l=u([C("skdx-calendar-grid-body","calendar","grid-body")],l);export{l as SkdxCalendarGridBody};

package/dist/calendar/CalendarGridHead.cjs

@@ -1,5 +1,5 @@
-"use strict";var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var v=(n,t)=>{for(var r in t)i(n,r,{get:t[r],enumerable:!0})},b=(n,t,r,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of k(t))!y.call(n,e)&&e!==r&&i(n,e,{get:()=>t[e],enumerable:!(a=m(t,e))||a.enumerable});return n};var f=n=>b(i({},"__esModule",{value:!0}),n),p=(n,t,r,a)=>{for(var e=a>1?void 0:a?m(t,r):t,s=n.length-1,o;s>=0;s--)(o=n[s])&&(e=(a?o(t,r,e):o(e))||e);return a&&e&&i(t,r,e),e};var x={};v(x,{SkdxCalendarGridHead:()=>d});module.exports=f(x);var l=require("lit"),c=require("../internal/authored.cjs"),u=require("../internal/define.cjs"),g=require("./CalendarRow.cjs"),C=require("./CalendarWeekDay.cjs"),w=require("./CalendarWeekNumberHeader.cjs");var h="data-skdx-calendar-generated",d=class extends l.LitElement{constructor(){super(...arguments);this.root=null;this.renderedKey=null;this.onUpdate=()=>this.syncWeekDays()}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-calendar"),this.setAttribute("role","rowgroup"),this.root?.addEventListener("skdx-calendar-internal-update",this.onUpdate),queueMicrotask(()=>this.syncWeekDays())}disconnectedCallback(){this.root?.removeEventListener("skdx-calendar-internal-update",this.onUpdate),super.disconnectedCallback()}syncWeekDays(){let r=this.root;if(!r)return;if((0,c.hasAuthoredContent)(this,h)){(0,c.removeGeneratedContent)(this,h),this.renderedKey=null;return}let a=`${r.locale??""}|${r.resolvedWeekStartsOn}|${r.weekNumbers}`;if(a===this.renderedKey)return;this.renderedKey=a;let e=document.createElement("skdx-calendar-row");e.setAttribute(h,""),r.weekNumbers&&e.appendChild(document.createElement("skdx-calendar-week-number-header"));for(let s of r.weekDayNames){let o=document.createElement("skdx-calendar-week-day");o.setAttribute("aria-label",s.long),o.textContent=s.short,e.appendChild(o)}this.replaceChildren(e)}render(){return l.html`<slot @slotchange=${this.onUpdate}></slot>`}};d.styles=l.css`
+"use strict";var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var b=(o,t)=>{for(var r in t)i(o,r,{get:t[r],enumerable:!0})},f=(o,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of y(t))!v.call(o,e)&&e!==r&&i(o,e,{get:()=>t[e],enumerable:!(n=h(t,e))||n.enumerable});return o};var E=o=>f(i({},"__esModule",{value:!0}),o),u=(o,t,r,n)=>{for(var e=n>1?void 0:n?h(t,r):t,s=o.length-1,a;s>=0;s--)(a=o[s])&&(e=(n?a(t,r,e):a(e))||e);return n&&e&&i(t,r,e),e};var C={};b(C,{SkdxCalendarGridHead:()=>d});module.exports=E(C);var l=require("lit"),m=require("../internal/authored.cjs"),k=require("../internal/define.cjs"),w=require("./CalendarRow.cjs"),x=require("./CalendarWeekDay.cjs"),A=require("./CalendarWeekNumberHeader.cjs"),c=require("./family.cjs");var p="data-skdx-calendar-generated",d=class extends l.LitElement{constructor(){super(...arguments);this.root=null;this.renderedKey=null;this.onUpdate=()=>this.syncWeekDays()}connectedCallback(){super.connectedCallback(),this.root=c.CALENDAR_FAMILY.root(this),this.setAttribute("role","rowgroup"),this.root?.addEventListener(c.CALENDAR_FAMILY.event,this.onUpdate),queueMicrotask(()=>this.syncWeekDays())}disconnectedCallback(){this.root?.removeEventListener(c.CALENDAR_FAMILY.event,this.onUpdate),super.disconnectedCallback()}syncWeekDays(){let r=this.root;if(!r)return;if((0,m.hasAuthoredContent)(this,p)){(0,m.removeGeneratedContent)(this,p),this.renderedKey=null;return}let n=`${r.locale??""}|${r.resolvedWeekStartsOn}|${r.weekNumbers}`;if(n===this.renderedKey)return;this.renderedKey=n;let e=document.createElement("skdx-calendar-row");e.setAttribute(p,""),r.weekNumbers&&e.appendChild(document.createElement("skdx-calendar-week-number-header"));for(let s of r.weekDayNames){let a=document.createElement("skdx-calendar-week-day");a.setAttribute("aria-label",s.long),a.textContent=s.short,e.appendChild(a)}this.replaceChildren(e)}render(){return l.html`<slot @slotchange=${this.onUpdate}></slot>`}};d.styles=l.css`
     :host {
       display: block;
     }
-  `,d=p([(0,u.customElement)("skdx-calendar-grid-head","calendar","grid-head")],d);0&&(module.exports={SkdxCalendarGridHead});
+  `,d=u([(0,k.customElement)("skdx-calendar-grid-head","calendar","grid-head")],d);0&&(module.exports={SkdxCalendarGridHead});

package/dist/calendar/CalendarGridHead.d.cts

@@ -1,12 +1,9 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import './CalendarRow.cjs';
 import './CalendarWeekDay.cjs';
 import './CalendarWeekNumberHeader.cjs';
 /**
- * `role="rowgroup"` wrapper for the weekday header. Renders the row from the
- * closest `<skdx-calendar>`'s locale and week start (short name visible,
- * full name in `aria-label`). Supply your own `<skdx-calendar-row>` to override.
- * Uses `rowgroup` not `row` (fixes nesting axe flagged as `aria-required-children`/`aria-required-parent`).
+ * `role="rowgroup"` wrapper for the weekday header, satisfying axe's `aria-required-children`/`aria-required-parent` rules on grid nesting.
  *
  * @example
  * ```html
@@ -21,7 +18,7 @@ export declare class SkdxCalendarGridHead extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private syncWeekDays;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/calendar/CalendarGridHead.d.ts

@@ -1,12 +1,9 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import './CalendarRow.js';
 import './CalendarWeekDay.js';
 import './CalendarWeekNumberHeader.js';
 /**
- * `role="rowgroup"` wrapper for the weekday header. Renders the row from the
- * closest `<skdx-calendar>`'s locale and week start (short name visible,
- * full name in `aria-label`). Supply your own `<skdx-calendar-row>` to override.
- * Uses `rowgroup` not `row` (fixes nesting axe flagged as `aria-required-children`/`aria-required-parent`).
+ * `role="rowgroup"` wrapper for the weekday header, satisfying axe's `aria-required-children`/`aria-required-parent` rules on grid nesting.
  *
  * @example
  * ```html
@@ -21,7 +18,7 @@ export declare class SkdxCalendarGridHead extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private syncWeekDays;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/calendar/CalendarGridHead.js

@@ -1,5 +1,5 @@
-var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var i=(d,o,t,r)=>{for(var e=r>1?void 0:r?h(o,t):o,a=d.length-1,n;a>=0;a--)(n=d[a])&&(e=(r?n(o,t,e):n(e))||e);return r&&e&&c(o,t,e),e};import{css as m,html as p,LitElement as u}from"lit";import{hasAuthoredContent as k,removeGeneratedContent as y}from"../internal/authored.js";import{customElement as v}from"../internal/define.js";import"./CalendarRow.js";import"./CalendarWeekDay.js";import"./CalendarWeekNumberHeader.js";var l="data-skdx-calendar-generated",s=class extends u{constructor(){super(...arguments);this.root=null;this.renderedKey=null;this.onUpdate=()=>this.syncWeekDays()}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-calendar"),this.setAttribute("role","rowgroup"),this.root?.addEventListener("skdx-calendar-internal-update",this.onUpdate),queueMicrotask(()=>this.syncWeekDays())}disconnectedCallback(){this.root?.removeEventListener("skdx-calendar-internal-update",this.onUpdate),super.disconnectedCallback()}syncWeekDays(){let t=this.root;if(!t)return;if(k(this,l)){y(this,l),this.renderedKey=null;return}let r=`${t.locale??""}|${t.resolvedWeekStartsOn}|${t.weekNumbers}`;if(r===this.renderedKey)return;this.renderedKey=r;let e=document.createElement("skdx-calendar-row");e.setAttribute(l,""),t.weekNumbers&&e.appendChild(document.createElement("skdx-calendar-week-number-header"));for(let a of t.weekDayNames){let n=document.createElement("skdx-calendar-week-day");n.setAttribute("aria-label",a.long),n.textContent=a.short,e.appendChild(n)}this.replaceChildren(e)}render(){return p`<slot @slotchange=${this.onUpdate}></slot>`}};s.styles=m`
+var m=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var c=(d,a,t,r)=>{for(var e=r>1?void 0:r?p(a,t):a,n=d.length-1,o;n>=0;n--)(o=d[n])&&(e=(r?o(a,t,e):o(e))||e);return r&&e&&m(a,t,e),e};import{css as h,html as u,LitElement as k}from"lit";import{hasAuthoredContent as y,removeGeneratedContent as v}from"../internal/authored.js";import{customElement as b}from"../internal/define.js";import"./CalendarRow.js";import"./CalendarWeekDay.js";import"./CalendarWeekNumberHeader.js";import{CALENDAR_FAMILY as l}from"./family.js";var i="data-skdx-calendar-generated",s=class extends k{constructor(){super(...arguments);this.root=null;this.renderedKey=null;this.onUpdate=()=>this.syncWeekDays()}connectedCallback(){super.connectedCallback(),this.root=l.root(this),this.setAttribute("role","rowgroup"),this.root?.addEventListener(l.event,this.onUpdate),queueMicrotask(()=>this.syncWeekDays())}disconnectedCallback(){this.root?.removeEventListener(l.event,this.onUpdate),super.disconnectedCallback()}syncWeekDays(){let t=this.root;if(!t)return;if(y(this,i)){v(this,i),this.renderedKey=null;return}let r=`${t.locale??""}|${t.resolvedWeekStartsOn}|${t.weekNumbers}`;if(r===this.renderedKey)return;this.renderedKey=r;let e=document.createElement("skdx-calendar-row");e.setAttribute(i,""),t.weekNumbers&&e.appendChild(document.createElement("skdx-calendar-week-number-header"));for(let n of t.weekDayNames){let o=document.createElement("skdx-calendar-week-day");o.setAttribute("aria-label",n.long),o.textContent=n.short,e.appendChild(o)}this.replaceChildren(e)}render(){return u`<slot @slotchange=${this.onUpdate}></slot>`}};s.styles=h`
     :host {
       display: block;
     }
-  `,s=i([v("skdx-calendar-grid-head","calendar","grid-head")],s);export{s as SkdxCalendarGridHead};
+  `,s=c([b("skdx-calendar-grid-head","calendar","grid-head")],s);export{s as SkdxCalendarGridHead};

package/dist/calendar/CalendarHeader.cjs

@@ -1,5 +1,5 @@
-"use strict";var m=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var E=(r,e)=>{for(var s in e)m(r,s,{get:e[s],enumerable:!0})},b=(r,e,s,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of p(e))!f.call(r,t)&&t!==s&&m(r,t,{get:()=>e[t],enumerable:!(l=n(e,t))||l.enumerable});return r};var g=r=>b(m({},"__esModule",{value:!0}),r),d=(r,e,s,l)=>{for(var t=l>1?void 0:l?n(e,s):e,a=r.length-1,i;a>=0;a--)(i=r[a])&&(t=(l?i(e,s,t):i(t))||t);return l&&t&&m(e,s,t),t};var u={};E(u,{SkdxCalendarHeader:()=>o});module.exports=g(u);var c=require("lit"),h=require("../internal/define.cjs");var o=class extends c.LitElement{render(){return c.html`<slot></slot>`}};o.styles=c.css`
+"use strict";var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var T=(l,e)=>{for(var s in e)a(l,s,{get:e[s],enumerable:!0})},f=(l,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of h(e))!u.call(l,t)&&t!==s&&a(l,t,{get:()=>e[t],enumerable:!(r=p(e,t))||r.enumerable});return l};var y=l=>f(a({},"__esModule",{value:!0}),l),n=(l,e,s,r)=>{for(var t=r>1?void 0:r?p(e,s):e,c=l.length-1,i;c>=0;c--)(i=l[c])&&(t=(r?i(e,s,t):i(t))||t);return r&&t&&a(e,s,t),t};var E={};T(E,{SkdxCalendarHeader:()=>o});module.exports=y(E);var m=require("lit"),d=require("../internal/define.cjs");var o=class extends m.LitElement{render(){return m.html`<slot></slot>`}};o.styles=m.css`
     :host {
       display: block;
     }
-  `,o=d([(0,h.customElement)("skdx-calendar-header","calendar","header")],o);0&&(module.exports={SkdxCalendarHeader});
+  `,o=n([(0,d.customElement)("skdx-calendar-header","calendar","header")],o);0&&(module.exports={SkdxCalendarHeader});

package/dist/calendar/CalendarHeader.d.cts

@@ -1,11 +1,11 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * `<skdx-calendar-header>` — purely presentational wrapper around a
  * `<skdx-calendar>`'s month navigation row (previous/next buttons + heading).
  */
 export declare class SkdxCalendarHeader extends LitElement {
     static styles: import("lit").CSSResult;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/calendar/CalendarHeader.d.ts

@@ -1,11 +1,11 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * `<skdx-calendar-header>` — purely presentational wrapper around a
  * `<skdx-calendar>`'s month navigation row (previous/next buttons + heading).
  */
 export declare class SkdxCalendarHeader extends LitElement {
     static styles: import("lit").CSSResult;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/calendar/CalendarHeader.js

@@ -1,5 +1,5 @@
-var i=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var a=(l,r,o,s)=>{for(var e=s>1?void 0:s?n(r,o):r,c=l.length-1,m;c>=0;c--)(m=l[c])&&(e=(s?m(r,o,e):m(e))||e);return s&&e&&i(r,o,e),e};import{css as d,html as h,LitElement as p}from"lit";import{customElement as f}from"../internal/define.js";var t=class extends p{render(){return h`<slot></slot>`}};t.styles=d`
+var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var c=(r,l,o,s)=>{for(var e=s>1?void 0:s?p(l,o):l,m=r.length-1,a;m>=0;m--)(a=r[m])&&(e=(s?a(l,o,e):a(e))||e);return s&&e&&i(l,o,e),e};import{css as n,html as d,LitElement as h}from"lit";import{customElement as u}from"../internal/define.js";var t=class extends h{render(){return d`<slot></slot>`}};t.styles=n`
     :host {
       display: block;
     }
-  `,t=a([f("skdx-calendar-header","calendar","header")],t);export{t as SkdxCalendarHeader};
+  `,t=c([u("skdx-calendar-header","calendar","header")],t);export{t as SkdxCalendarHeader};

package/dist/calendar/CalendarHeading.cjs

@@ -1,9 +1,17 @@
-"use strict";var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var w=(n,o)=>{for(var e in o)p(n,e,{get:o[e],enumerable:!0})},x=(n,o,e,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of v(o))!b.call(n,t)&&t!==e&&p(n,t,{get:()=>o[t],enumerable:!(r=h(o,t))||r.enumerable});return n};var y=n=>x(p({},"__esModule",{value:!0}),n),m=(n,o,e,r)=>{for(var t=r>1?void 0:r?h(o,e):o,l=n.length-1,c;l>=0;l--)(c=n[l])&&(t=(r?c(o,e,t):c(t))||t);return r&&t&&p(o,e,t),t};var k={};w(k,{SkdxCalendarHeading:()=>s});module.exports=y(k);var a=require("lit"),f=require("lit/decorators.js"),u=require("../internal/define.cjs"),d=require("../internal/styles.cjs"),i=require("./Calendar.cjs");var s=class extends a.LitElement{constructor(){super(...arguments);this.monthOffset=0;this.root=null;this.onUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-calendar"),this.root?.addEventListener("skdx-calendar-internal-update",this.onUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-calendar-internal-update",this.onUpdate),super.disconnectedCallback()}render(){let e=this.root;if(!e)return a.html`<slot></slot>`;let r=e.view==="day"?e.months[this.monthOffset]??e.month:e.focusedDate,t=(0,i.formatViewPageLabel)(r,e.view,e.locale),l=i.CALENDAR_VIEWS[i.CALENDAR_VIEWS.indexOf(e.view)+1];return l!==void 0&&i.CALENDAR_VIEWS.indexOf(e.view)<i.CALENDAR_VIEWS.indexOf(e.maxView)?a.html`
-      <button type="button" @click=${()=>e.setView(l)}>
-        <slot>${t}</slot>
+"use strict";var p=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var y=(r,o)=>{for(var t in o)p(r,t,{get:o[t],enumerable:!0})},x=(r,o,t,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of b(o))!w.call(r,e)&&e!==t&&p(r,e,{get:()=>o[e],enumerable:!(n=f(o,e))||n.enumerable});return r};var E=r=>x(p({},"__esModule",{value:!0}),r),h=(r,o,t,n)=>{for(var e=n>1?void 0:n?f(o,t):o,l=r.length-1,c;l>=0;l--)(c=r[l])&&(e=(n?c(o,t,e):c(e))||e);return n&&e&&p(o,t,e),e};var L={};y(L,{SkdxCalendarHeading:()=>s});module.exports=E(L);var i=require("lit"),u=require("lit/decorators.js"),v=require("../internal/define.cjs"),d=require("../internal/styles.cjs"),a=require("./Calendar.cjs"),m=require("./family.cjs");var s=class extends i.LitElement{constructor(){super(...arguments);this.monthOffset=0;this.root=null;this.onUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.root=m.CALENDAR_FAMILY.root(this),this.root?.addEventListener(m.CALENDAR_FAMILY.event,this.onUpdate)}disconnectedCallback(){this.root?.removeEventListener(m.CALENDAR_FAMILY.event,this.onUpdate),super.disconnectedCallback()}render(){let t=this.root;if(!t)return i.html`<slot></slot>`;let n=t.view==="day"?t.months[this.monthOffset]??t.month:t.focusedDate,e=(0,a.formatViewPageLabel)(n,t.view,t.locale),l=a.CALENDAR_VIEWS[a.CALENDAR_VIEWS.indexOf(t.view)+1];return l!==void 0&&a.CALENDAR_VIEWS.indexOf(t.view)<a.CALENDAR_VIEWS.indexOf(t.maxView)?i.html`
+      <button
+        type="button"
+        @click=${()=>t.setView(l)}
+      >
+        <slot>${e}</slot>
       </button>
-    `:a.html`<slot>${t}</slot>`}};s.shadowRootOptions=d.delegatesFocusShadowRootOptions,s.styles=[d.resetNativeControl,a.css`
+    `:i.html`<slot>${e}</slot>`}};s.shadowRootOptions=d.delegatesFocusShadowRootOptions,s.styles=[d.resetNativeControl,i.css`
       :host {
         display: block;
       }
-    `,d.controlBoxOnHost],m([(0,f.property)({type:Number,attribute:"month-offset"})],s.prototype,"monthOffset",2),s=m([(0,u.customElement)("skdx-calendar-heading","calendar","heading")],s);0&&(module.exports={SkdxCalendarHeading});
+      /* The skin sets no padding on the heading, so its box is the UA button
+         padding the other frameworks render with. */
+      button {
+        padding: revert;
+      }
+    `,d.controlBoxOnHost],h([(0,u.property)({type:Number,attribute:"month-offset"})],s.prototype,"monthOffset",2),s=h([(0,v.customElement)("skdx-calendar-heading","calendar","heading")],s);0&&(module.exports={SkdxCalendarHeading});

package/dist/calendar/CalendarHeading.d.cts

@@ -1,6 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Label for calendar view (month/year/20-year page) and view-up trigger. Falls back to formatted label via `Intl`; override with light-DOM content. Renders button below `max-view`, label at `max-view`. With multi-month, `month-offset` selects month.
+ * Label for the calendar's current view and a trigger to step up to a coarser one.
  *
  * @example
  * ```html
@@ -21,7 +21,7 @@ export declare class SkdxCalendarHeading extends LitElement {
     private readonly onUpdate;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/calendar/CalendarHeading.d.ts

@@ -1,6 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Label for calendar view (month/year/20-year page) and view-up trigger. Falls back to formatted label via `Intl`; override with light-DOM content. Renders button below `max-view`, label at `max-view`. With multi-month, `month-offset` selects month.
+ * Label for the calendar's current view and a trigger to step up to a coarser one.
  *
  * @example
  * ```html
@@ -21,7 +21,7 @@ export declare class SkdxCalendarHeading extends LitElement {
     private readonly onUpdate;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/calendar/CalendarHeading.js

@@ -1,9 +1,17 @@
-var p=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var d=(l,s,e,n)=>{for(var t=n>1?void 0:n?m(s,e):s,r=l.length-1,a;r>=0;r--)(a=l[r])&&(t=(n?a(s,e,t):a(t))||t);return n&&t&&p(s,e,t),t};import{css as h,html as c,LitElement as f}from"lit";import{property as u}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{controlBoxOnHost as b,delegatesFocusShadowRootOptions as w,resetNativeControl as x}from"../internal/styles.js";import{CALENDAR_VIEWS as i,formatViewPageLabel as y}from"./Calendar.js";var o=class extends f{constructor(){super(...arguments);this.monthOffset=0;this.root=null;this.onUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-calendar"),this.root?.addEventListener("skdx-calendar-internal-update",this.onUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-calendar-internal-update",this.onUpdate),super.disconnectedCallback()}render(){let e=this.root;if(!e)return c`<slot></slot>`;let n=e.view==="day"?e.months[this.monthOffset]??e.month:e.focusedDate,t=y(n,e.view,e.locale),r=i[i.indexOf(e.view)+1];return r!==void 0&&i.indexOf(e.view)<i.indexOf(e.maxView)?c`
-      <button type="button" @click=${()=>e.setView(r)}>
-        <slot>${t}</slot>
+var m=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(l,s,t,r)=>{for(var e=r>1?void 0:r?h(s,t):s,n=l.length-1,i;n>=0;n--)(i=l[n])&&(e=(r?i(s,t,e):i(e))||e);return r&&e&&m(s,t,e),e};import{css as f,html as c,LitElement as u}from"lit";import{property as v}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{controlBoxOnHost as w,delegatesFocusShadowRootOptions as y,resetNativeControl as x}from"../internal/styles.js";import{CALENDAR_VIEWS as a,formatViewPageLabel as E}from"./Calendar.js";import{CALENDAR_FAMILY as p}from"./family.js";var o=class extends u{constructor(){super(...arguments);this.monthOffset=0;this.root=null;this.onUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.root=p.root(this),this.root?.addEventListener(p.event,this.onUpdate)}disconnectedCallback(){this.root?.removeEventListener(p.event,this.onUpdate),super.disconnectedCallback()}render(){let t=this.root;if(!t)return c`<slot></slot>`;let r=t.view==="day"?t.months[this.monthOffset]??t.month:t.focusedDate,e=E(r,t.view,t.locale),n=a[a.indexOf(t.view)+1];return n!==void 0&&a.indexOf(t.view)<a.indexOf(t.maxView)?c`
+      <button
+        type="button"
+        @click=${()=>t.setView(n)}
+      >
+        <slot>${e}</slot>
       </button>
-    `:c`<slot>${t}</slot>`}};o.shadowRootOptions=w,o.styles=[x,h`
+    `:c`<slot>${e}</slot>`}};o.shadowRootOptions=y,o.styles=[x,f`
       :host {
         display: block;
       }
-    `,b],d([u({type:Number,attribute:"month-offset"})],o.prototype,"monthOffset",2),o=d([v("skdx-calendar-heading","calendar","heading")],o);export{o as SkdxCalendarHeading};
+      /* The skin sets no padding on the heading, so its box is the UA button
+         padding the other frameworks render with. */
+      button {
+        padding: revert;
+      }
+    `,w],d([v({type:Number,attribute:"month-offset"})],o.prototype,"monthOffset",2),o=d([b("skdx-calendar-heading","calendar","heading")],o);export{o as SkdxCalendarHeading};

package/dist/calendar/CalendarNextButton.cjs

@@ -1,8 +1,8 @@
-"use strict";var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var u=(o,e)=>{for(var r in e)s(o,r,{get:e[r],enumerable:!0})},k=(o,e,r,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of v(e))!y.call(o,t)&&t!==r&&s(o,t,{get:()=>e[t],enumerable:!(n=h(e,t))||n.enumerable});return o};var E=o=>k(s({},"__esModule",{value:!0}),o),p=(o,e,r,n)=>{for(var t=n>1?void 0:n?h(e,r):e,d=o.length-1,c;d>=0;d--)(c=o[d])&&(t=(n?c(e,r,t):c(t))||t);return n&&t&&s(e,r,t),t};var x={};u(x,{SkdxCalendarNextButton:()=>a});module.exports=E(x);var i=require("lit"),m=require("lit/decorators.js"),b=require("../internal/define.cjs"),l=require("../internal/styles.cjs");var g={day:"Next month",month:"Next year",year:"Next 20 years"},a=class extends i.LitElement{constructor(){super(...arguments);this.root=null;this.onUpdate=()=>this.requestUpdate();this.handleClick=()=>{this.root?.pageMonths(1)}}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-calendar"),this.root?.addEventListener("skdx-calendar-internal-update",this.onUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-calendar-internal-update",this.onUpdate),super.disconnectedCallback()}render(){return i.html`
+"use strict";var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var E=(o,e)=>{for(var r in e)s(o,r,{get:e[r],enumerable:!0})},C=(o,e,r,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of y(e))!u.call(o,t)&&t!==r&&s(o,t,{get:()=>e[t],enumerable:!(n=h(e,t))||n.enumerable});return o};var L=o=>C(s({},"__esModule",{value:!0}),o),m=(o,e,r,n)=>{for(var t=n>1?void 0:n?h(e,r):e,c=o.length-1,p;c>=0;c--)(p=o[c])&&(t=(n?p(e,r,t):p(t))||t);return n&&t&&s(e,r,t),t};var g={};E(g,{SkdxCalendarNextButton:()=>a});module.exports=L(g);var i=require("lit"),v=require("lit/decorators.js"),b=require("../internal/define.cjs"),l=require("../internal/styles.cjs"),d=require("./family.cjs");var f={day:"Next month",month:"Next year",year:"Next 20 years"},a=class extends i.LitElement{constructor(){super(...arguments);this.root=null;this.onUpdate=()=>this.requestUpdate();this.handleClick=()=>{this.root?.pageMonths(1)}}connectedCallback(){super.connectedCallback(),this.root=d.CALENDAR_FAMILY.root(this),this.root?.addEventListener(d.CALENDAR_FAMILY.event,this.onUpdate)}disconnectedCallback(){this.root?.removeEventListener(d.CALENDAR_FAMILY.event,this.onUpdate),super.disconnectedCallback()}render(){return i.html`
       <button
         part="next-button"
         type="button"
-        aria-label=${this.label??g[this.root?.view??"day"]}
+        aria-label=${this.label??f[this.root?.view??"day"]}
         @click=${this.handleClick}
       >
         <slot>›</slot>
@@ -11,4 +11,4 @@
       :host {
         display: inline-block;
       }
-    `,l.controlBoxOnHost],p([(0,m.property)({type:String})],a.prototype,"label",2),a=p([(0,b.customElement)("skdx-calendar-next-button","calendar","next-button")],a);0&&(module.exports={SkdxCalendarNextButton});
+    `,l.controlBoxOnHost],m([(0,v.property)({type:String})],a.prototype,"label",2),a=m([(0,b.customElement)("skdx-calendar-next-button","calendar","next-button")],a);0&&(module.exports={SkdxCalendarNextButton});

package/dist/calendar/CalendarNextButton.d.cts

@@ -1,14 +1,14 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Navigates ancestor calendar to next month, clamping roving-focus date.
- * Default accessible name tracks calendar view.
+ * Navigates the ancestor calendar to the next month, clamping the roving-focus date.
+ *
  * @csspart next-button - The native `<button>` element, styled apart from previous button.
  */
 export declare class SkdxCalendarNextButton extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     /**
-     * Accessible name for inner button (aria-label on host reaches nothing in shadow root).
+     * Accessible name for the inner button, since `aria-label` on the host doesn't reach shadow DOM.
      * @default undefined — "Next month", "Next year" or "Next 20 years", by the calendar's view.
      */
     label?: string;
@@ -17,7 +17,7 @@ export declare class SkdxCalendarNextButton extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private readonly handleClick;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/calendar/CalendarNextButton.d.ts

@@ -1,14 +1,14 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Navigates ancestor calendar to next month, clamping roving-focus date.
- * Default accessible name tracks calendar view.
+ * Navigates the ancestor calendar to the next month, clamping the roving-focus date.
+ *
  * @csspart next-button - The native `<button>` element, styled apart from previous button.
  */
 export declare class SkdxCalendarNextButton extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     /**
-     * Accessible name for inner button (aria-label on host reaches nothing in shadow root).
+     * Accessible name for the inner button, since `aria-label` on the host doesn't reach shadow DOM.
      * @default undefined — "Next month", "Next year" or "Next 20 years", by the calendar's view.
      */
     label?: string;
@@ -17,7 +17,7 @@ export declare class SkdxCalendarNextButton extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private readonly handleClick;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/calendar/CalendarNextButton.js

@@ -1,14 +1,14 @@
-var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var s=(a,o,n,r)=>{for(var e=r>1?void 0:r?c(o,n):o,i=a.length-1,l;i>=0;i--)(l=a[i])&&(e=(r?l(o,n,e):l(e))||e);return r&&e&&d(o,n,e),e};import{css as p,html as h,LitElement as m}from"lit";import{property as b}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{controlBoxOnHost as y,delegatesFocusShadowRootOptions as u,resetNativeControl as k}from"../internal/styles.js";var E={day:"Next month",month:"Next year",year:"Next 20 years"},t=class extends m{constructor(){super(...arguments);this.root=null;this.onUpdate=()=>this.requestUpdate();this.handleClick=()=>{this.root?.pageMonths(1)}}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-calendar"),this.root?.addEventListener("skdx-calendar-internal-update",this.onUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-calendar-internal-update",this.onUpdate),super.disconnectedCallback()}render(){return h`
+var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var s=(a,o,n,r)=>{for(var e=r>1?void 0:r?p(o,n):o,i=a.length-1,l;i>=0;i--)(l=a[i])&&(e=(r?l(o,n,e):l(e))||e);return r&&e&&c(o,n,e),e};import{css as m,html as h,LitElement as v}from"lit";import{property as b}from"lit/decorators.js";import{customElement as y}from"../internal/define.js";import{controlBoxOnHost as u,delegatesFocusShadowRootOptions as E,resetNativeControl as C}from"../internal/styles.js";import{CALENDAR_FAMILY as d}from"./family.js";var L={day:"Next month",month:"Next year",year:"Next 20 years"},t=class extends v{constructor(){super(...arguments);this.root=null;this.onUpdate=()=>this.requestUpdate();this.handleClick=()=>{this.root?.pageMonths(1)}}connectedCallback(){super.connectedCallback(),this.root=d.root(this),this.root?.addEventListener(d.event,this.onUpdate)}disconnectedCallback(){this.root?.removeEventListener(d.event,this.onUpdate),super.disconnectedCallback()}render(){return h`
       <button
         part="next-button"
         type="button"
-        aria-label=${this.label??E[this.root?.view??"day"]}
+        aria-label=${this.label??L[this.root?.view??"day"]}
         @click=${this.handleClick}
       >
         <slot>›</slot>
       </button>
-    `}};t.shadowRootOptions=u,t.styles=[k,p`
+    `}};t.shadowRootOptions=E,t.styles=[C,m`
       :host {
         display: inline-block;
       }
-    `,y],s([b({type:String})],t.prototype,"label",2),t=s([v("skdx-calendar-next-button","calendar","next-button")],t);export{t as SkdxCalendarNextButton};
+    `,u],s([b({type:String})],t.prototype,"label",2),t=s([y("skdx-calendar-next-button","calendar","next-button")],t);export{t as SkdxCalendarNextButton};

package/dist/calendar/CalendarPreviousButton.cjs

@@ -1,14 +1,14 @@
-"use strict";var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var y=(o,e)=>{for(var r in e)l(o,r,{get:e[r],enumerable:!0})},k=(o,e,r,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of b(e))!u.call(o,t)&&t!==r&&l(o,t,{get:()=>e[t],enumerable:!(i=h(e,t))||i.enumerable});return o};var E=o=>k(l({},"__esModule",{value:!0}),o),p=(o,e,r,i)=>{for(var t=i>1?void 0:i?h(e,r):e,d=o.length-1,c;d>=0;d--)(c=o[d])&&(t=(i?c(e,r,t):c(t))||t);return i&&t&&l(e,r,t),t};var C={};y(C,{SkdxCalendarPreviousButton:()=>a});module.exports=E(C);var n=require("lit"),m=require("lit/decorators.js"),v=require("../internal/define.cjs"),s=require("../internal/styles.cjs");var g={day:"Previous month",month:"Previous year",year:"Previous 20 years"},a=class extends n.LitElement{constructor(){super(...arguments);this.root=null;this.onUpdate=()=>this.requestUpdate();this.handleClick=()=>{this.root?.pageMonths(-1)}}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-calendar"),this.root?.addEventListener("skdx-calendar-internal-update",this.onUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-calendar-internal-update",this.onUpdate),super.disconnectedCallback()}render(){return n.html`
+"use strict";var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var E=(o,e)=>{for(var r in e)n(o,r,{get:e[r],enumerable:!0})},C=(o,e,r,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!y.call(o,t)&&t!==r&&n(o,t,{get:()=>e[t],enumerable:!(i=h(e,t))||i.enumerable});return o};var L=o=>C(n({},"__esModule",{value:!0}),o),m=(o,e,r,i)=>{for(var t=i>1?void 0:i?h(e,r):e,p=o.length-1,c;p>=0;p--)(c=o[p])&&(t=(i?c(e,r,t):c(t))||t);return i&&t&&n(e,r,t),t};var g={};E(g,{SkdxCalendarPreviousButton:()=>a});module.exports=L(g);var s=require("lit"),v=require("lit/decorators.js"),b=require("../internal/define.cjs"),l=require("../internal/styles.cjs"),d=require("./family.cjs");var f={day:"Previous month",month:"Previous year",year:"Previous 20 years"},a=class extends s.LitElement{constructor(){super(...arguments);this.root=null;this.onUpdate=()=>this.requestUpdate();this.handleClick=()=>{this.root?.pageMonths(-1)}}connectedCallback(){super.connectedCallback(),this.root=d.CALENDAR_FAMILY.root(this),this.root?.addEventListener(d.CALENDAR_FAMILY.event,this.onUpdate)}disconnectedCallback(){this.root?.removeEventListener(d.CALENDAR_FAMILY.event,this.onUpdate),super.disconnectedCallback()}render(){return s.html`
       <button
         part="previous-button"
         type="button"
-        aria-label=${this.label??g[this.root?.view??"day"]}
+        aria-label=${this.label??f[this.root?.view??"day"]}
         @click=${this.handleClick}
       >
         <slot>‹</slot>
       </button>
-    `}};a.shadowRootOptions=s.delegatesFocusShadowRootOptions,a.styles=[s.resetNativeControl,n.css`
+    `}};a.shadowRootOptions=l.delegatesFocusShadowRootOptions,a.styles=[l.resetNativeControl,s.css`
       :host {
         display: inline-block;
       }
-    `,s.controlBoxOnHost],p([(0,m.property)({type:String})],a.prototype,"label",2),a=p([(0,v.customElement)("skdx-calendar-previous-button","calendar","previous-button")],a);0&&(module.exports={SkdxCalendarPreviousButton});
+    `,l.controlBoxOnHost],m([(0,v.property)({type:String})],a.prototype,"label",2),a=m([(0,b.customElement)("skdx-calendar-previous-button","calendar","previous-button")],a);0&&(module.exports={SkdxCalendarPreviousButton});

package/dist/calendar/CalendarPreviousButton.d.cts

@@ -1,6 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Navigates closest `<skdx-calendar>` to previous month, clamping roving-focus date. Part name is positional (previous/next buttons style apart).
+ * Navigates the closest `<skdx-calendar>` to the previous month, clamping the roving-focus date.
  *
  * @csspart previous-button - The native `<button>` element inside the shadow root.
  */
@@ -8,7 +8,7 @@ export declare class SkdxCalendarPreviousButton extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     /**
-     * Accessible name (shadow button can't inherit host aria-label). Defaults to view-dependent label; override to translate. Must match arrow behavior.
+     * Accessible name for the shadow button, defaulting to a view-dependent label.
      * @default undefined
      */
     label?: string;
@@ -17,7 +17,7 @@ export declare class SkdxCalendarPreviousButton extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private readonly handleClick;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {