@skdx/web-components-blocks 0.39.0 → 0.40.0

package/dist/dashboard-layout/DashboardLayout.cjs

@@ -1,18 +1,18 @@
-"use strict";var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var _=Object.prototype.hasOwnProperty;var y=(n,e)=>{for(var a in e)s(n,a,{get:e[a],enumerable:!0})},k=(n,e,a,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of m(e))!_.call(n,r)&&r!==a&&s(n,r,{get:()=>e[r],enumerable:!(o=u(e,r))||o.enumerable});return n};var x=n=>k(s({},"__esModule",{value:!0}),n),l=(n,e,a,o)=>{for(var r=o>1?void 0:o?u(e,a):e,v=n.length-1,h;v>=0;v--)(h=n[v])&&(r=(o?h(e,a,r):h(r))||r);return o&&r&&s(e,a,r),r};var N={};y(N,{SkdxDashboardLayout:()=>i});module.exports=x(N);var t=require("lit"),d=require("lit/decorators.js"),c=require("../internal/define.cjs"),b=require("../internal/events.cjs"),g=require("../internal/slots.cjs");var f="data-skdx-dashboard-layout-generated",p={fromAttribute:n=>n!=="false"},$=0,i=class extends t.LitElement{constructor(){super(...arguments);this.title="";this.defaultNavOpen=!0;this.navLabel="Main navigation";this.navToggleLabel="Toggle navigation";this.navId=`skdx-dashboard-layout-nav-${++$}`;this.toggleNav=()=>{let a=!this.open;this.uncontrolledNavOpen=a,this.requestUpdate(),(0,b.emit)(this,"nav-open-change",a)}}createRenderRoot(){return this}get open(){return this.navOpen??this.uncontrolledNavOpen??this.defaultNavOpen}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this.requestUpdate())}region(a){return this.querySelector(`.skdx-dashboard-layout__${a}`)}updated(){this.toggleAttribute("data-nav-open",this.open),(0,g.placeSlotted)(this,f,{branding:this.region("branding"),actions:this.region("actions")},this.region("content"))}navList(a){return t.html`<ul class="skdx-dashboard-layout__nav-list">
-      ${a.map(o=>this.navItem(o))}
-    </ul>`}navItem(a){return a.kind==="divider"?t.html`<li>
+"use strict";var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var _=(n,a)=>{for(var t in a)s(n,t,{get:a[t],enumerable:!0})},f=(n,a,t,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of m(a))!y.call(n,r)&&r!==t&&s(n,r,{get:()=>a[r],enumerable:!(i=u(a,r))||i.enumerable});return n};var k=n=>f(s({},"__esModule",{value:!0}),n),d=(n,a,t,i)=>{for(var r=i>1?void 0:i?u(a,t):a,v=n.length-1,h;v>=0;v--)(h=n[v])&&(r=(i?h(a,t,r):h(r))||r);return i&&r&&s(a,t,r),r};var N={};_(N,{SkdxDashboardLayout:()=>o});module.exports=k(N);var e=require("lit"),l=require("lit/decorators.js"),p=require("../internal/define.cjs"),b=require("../internal/events.cjs"),g=require("../internal/slots.cjs");var x="data-skdx-dashboard-layout-generated",c={fromAttribute:n=>n!=="false"},$=0,o=class extends e.LitElement{constructor(){super(...arguments);this.title="";this.contentAs="main";this.defaultNavOpen=!0;this.navLabel="Main navigation";this.navToggleLabel="Toggle navigation";this.navId=`skdx-dashboard-layout-nav-${++$}`;this.toggleNav=()=>{let t=!this.open;this.uncontrolledNavOpen=t,this.requestUpdate(),(0,b.emit)(this,"nav-open-change",t)}}createRenderRoot(){return this}get open(){return this.navOpen??this.uncontrolledNavOpen??this.defaultNavOpen}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this.requestUpdate())}region(t){return this.querySelector(`.skdx-dashboard-layout__${t}`)}willUpdate(t){if(t.has("contentAs")){let i=this.region("content");i&&this.append(...Array.from(i.childNodes))}}updated(){this.toggleAttribute("data-nav-open",this.open),(0,g.placeSlotted)(this,x,{branding:this.region("branding"),actions:this.region("actions")},this.region("content"))}navList(t){return e.html`<ul class="skdx-dashboard-layout__nav-list">
+      ${t.map(i=>this.navItem(i))}
+    </ul>`}navItem(t){return t.kind==="divider"?e.html`<li>
         <hr class="skdx-dashboard-layout__nav-divider" />
-      </li>`:a.kind==="header"?t.html`<li class="skdx-dashboard-layout__nav-header">${a.label??""}</li>`:a.href!==void 0?t.html`<li>
+      </li>`:t.kind==="header"?e.html`<li class="skdx-dashboard-layout__nav-header">${t.label??""}</li>`:t.href!==void 0?e.html`<li>
         <a
           class="skdx-dashboard-layout__nav-item"
-          href=${a.href}
-          aria-current=${a.current?"page":t.nothing}
-          >${a.label??""}</a
+          href=${t.href}
+          aria-current=${t.current?"page":e.nothing}
+          >${t.label??""}</a
         >
-      </li>`:t.html`<li>
-      <span class="skdx-dashboard-layout__nav-item">${a.label??""}</span>
-      ${a.children?.length?this.navList(a.children):t.nothing}
-    </li>`}render(){let a=this.open;return t.html`
+      </li>`:e.html`<li>
+      <span class="skdx-dashboard-layout__nav-item">${t.label??""}</span>
+      ${t.children?.length?this.navList(t.children):e.nothing}
+    </li>`}render(){let t=this.open;return e.html`
       <header
         class="skdx-dashboard-layout__app-bar"
         data-skdx-dashboard-layout-generated
@@ -21,7 +21,7 @@
           class="skdx-button skdx-dashboard-layout__nav-toggle"
           type="button"
           data-icon-only
-          aria-expanded=${a?"true":"false"}
+          aria-expanded=${t?"true":"false"}
           aria-controls=${this.navId}
           aria-label=${this.navToggleLabel}
           @click=${this.toggleNav}
@@ -29,7 +29,7 @@
           ☰
         </button>
         <div class="skdx-dashboard-layout__branding"></div>
-        ${this.title?t.html`<span class="skdx-dashboard-layout__title">${this.title}</span>`:t.nothing}
+        ${this.title?e.html`<span class="skdx-dashboard-layout__title">${this.title}</span>`:e.nothing}
         <div class="skdx-dashboard-layout__actions"></div>
       </header>
       <div
@@ -40,10 +40,10 @@
           id=${this.navId}
           class="skdx-dashboard-layout__nav"
           aria-label=${this.navLabel}
-          ?hidden=${!a}
+          ?hidden=${!t}
         >
           ${this.navList(this.navigation??[])}
         </nav>
-        <main class="skdx-dashboard-layout__content"></main>
+        ${this.contentAs==="div"?e.html`<div class="skdx-dashboard-layout__content"></div>`:e.html`<main class="skdx-dashboard-layout__content"></main>`}
       </div>
-    `}};l([(0,d.property)({type:String})],i.prototype,"title",2),l([(0,d.property)({attribute:!1})],i.prototype,"navigation",2),l([(0,d.property)({converter:p,attribute:"nav-open"})],i.prototype,"navOpen",2),l([(0,d.property)({converter:p,attribute:"default-nav-open"})],i.prototype,"defaultNavOpen",2),l([(0,d.property)({type:String,attribute:"nav-label"})],i.prototype,"navLabel",2),l([(0,d.property)({type:String,attribute:"nav-toggle-label"})],i.prototype,"navToggleLabel",2),i=l([(0,c.customElement)("skdx-dashboard-layout","dashboard-layout","root")],i);0&&(module.exports={SkdxDashboardLayout});
+    `}};d([(0,l.property)({type:String,attribute:"heading"})],o.prototype,"title",2),d([(0,l.property)({attribute:!1})],o.prototype,"navigation",2),d([(0,l.property)({type:String,attribute:"content-as"})],o.prototype,"contentAs",2),d([(0,l.property)({converter:c,attribute:"nav-open"})],o.prototype,"navOpen",2),d([(0,l.property)({converter:c,attribute:"default-nav-open"})],o.prototype,"defaultNavOpen",2),d([(0,l.property)({type:String,attribute:"nav-label"})],o.prototype,"navLabel",2),d([(0,l.property)({type:String,attribute:"nav-toggle-label"})],o.prototype,"navToggleLabel",2),o=d([(0,p.customElement)("skdx-dashboard-layout","dashboard-layout","root")],o);0&&(module.exports={SkdxDashboardLayout});

package/dist/dashboard-layout/DashboardLayout.d.cts

@@ -1,4 +1,4 @@
-import { LitElement, type TemplateResult } from 'lit';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
 /** One entry of a `<skdx-dashboard-layout>` side navigation. */
 export interface SkdxDashboardNavigationItem {
     /** What the entry renders as: a navigation row, a group label, or a rule. @default 'item' */
@@ -23,7 +23,7 @@ export interface SkdxDashboardNavigationItem {
  *
  * @example
  * ```html
- * <skdx-dashboard-layout id="shell" title="Acme">
+ * <skdx-dashboard-layout id="shell" heading="Acme">
  *   <p>Dashboard content.</p>
  * </skdx-dashboard-layout>
  * <script>
@@ -40,12 +40,17 @@ export declare class SkdxDashboardLayout extends LitElement {
     /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
     createRenderRoot(): HTMLElement | DocumentFragment;
     /**
-     * Application title shown in the app bar after the branding, shadowing the native tooltip attribute.
+     * Application title shown in the app bar after the branding. The JavaScript property is `title`.
      * @default '' — no title renders.
      */
     title: string;
     /** The side navigation, one entry per row, nested through each entry's `children`. */
     navigation: readonly SkdxDashboardNavigationItem[];
+    /**
+     * Content element: use `div` when embedding inside an existing page main landmark.
+     * @default 'main'
+     */
+    contentAs: 'main' | 'div';
     /**
      * Whether the side navigation is shown, for controlled usage.
      * @default undefined — uncontrolled, following `defaultNavOpen`.
@@ -75,6 +80,7 @@ export declare class SkdxDashboardLayout extends LitElement {
     connectedCallback(): void;
     private readonly toggleNav;
     private region;
+    protected willUpdate(changed: PropertyValues<this>): void;
     protected updated(): void;
     private navList;
     private navItem;

package/dist/dashboard-layout/DashboardLayout.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, type TemplateResult } from 'lit';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
 /** One entry of a `<skdx-dashboard-layout>` side navigation. */
 export interface SkdxDashboardNavigationItem {
     /** What the entry renders as: a navigation row, a group label, or a rule. @default 'item' */
@@ -23,7 +23,7 @@ export interface SkdxDashboardNavigationItem {
  *
  * @example
  * ```html
- * <skdx-dashboard-layout id="shell" title="Acme">
+ * <skdx-dashboard-layout id="shell" heading="Acme">
  *   <p>Dashboard content.</p>
  * </skdx-dashboard-layout>
  * <script>
@@ -40,12 +40,17 @@ export declare class SkdxDashboardLayout extends LitElement {
     /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
     createRenderRoot(): HTMLElement | DocumentFragment;
     /**
-     * Application title shown in the app bar after the branding, shadowing the native tooltip attribute.
+     * Application title shown in the app bar after the branding. The JavaScript property is `title`.
      * @default '' — no title renders.
      */
     title: string;
     /** The side navigation, one entry per row, nested through each entry's `children`. */
     navigation: readonly SkdxDashboardNavigationItem[];
+    /**
+     * Content element: use `div` when embedding inside an existing page main landmark.
+     * @default 'main'
+     */
+    contentAs: 'main' | 'div';
     /**
      * Whether the side navigation is shown, for controlled usage.
      * @default undefined — uncontrolled, following `defaultNavOpen`.
@@ -75,6 +80,7 @@ export declare class SkdxDashboardLayout extends LitElement {
     connectedCallback(): void;
     private readonly toggleNav;
     private region;
+    protected willUpdate(changed: PropertyValues<this>): void;
     protected updated(): void;
     private navList;
     private navItem;

package/dist/dashboard-layout/DashboardLayout.js

@@ -1,18 +1,18 @@
-var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var t=(l,d,a,i)=>{for(var n=i>1?void 0:i?c(d,a):d,s=l.length-1,v;s>=0;s--)(v=l[s])&&(n=(i?v(d,a,n):v(n))||n);return i&&n&&p(d,a,n),n};import{html as r,LitElement as b,nothing as h}from"lit";import{property as o}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";import{emit as m}from"../internal/events.js";import{placeSlotted as _}from"../internal/slots.js";var y="data-skdx-dashboard-layout-generated",u={fromAttribute:l=>l!=="false"},k=0,e=class extends b{constructor(){super(...arguments);this.title="";this.defaultNavOpen=!0;this.navLabel="Main navigation";this.navToggleLabel="Toggle navigation";this.navId=`skdx-dashboard-layout-nav-${++k}`;this.toggleNav=()=>{let a=!this.open;this.uncontrolledNavOpen=a,this.requestUpdate(),m(this,"nav-open-change",a)}}createRenderRoot(){return this}get open(){return this.navOpen??this.uncontrolledNavOpen??this.defaultNavOpen}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this.requestUpdate())}region(a){return this.querySelector(`.skdx-dashboard-layout__${a}`)}updated(){this.toggleAttribute("data-nav-open",this.open),_(this,y,{branding:this.region("branding"),actions:this.region("actions")},this.region("content"))}navList(a){return r`<ul class="skdx-dashboard-layout__nav-list">
-      ${a.map(i=>this.navItem(i))}
-    </ul>`}navItem(a){return a.kind==="divider"?r`<li>
+var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var n=(d,l,t,a)=>{for(var i=a>1?void 0:a?p(l,t):l,s=d.length-1,v;s>=0;s--)(v=d[s])&&(i=(a?v(l,t,i):v(i))||i);return a&&i&&c(l,t,i),i};import{html as r,LitElement as b,nothing as h}from"lit";import{property as o}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";import{emit as m}from"../internal/events.js";import{placeSlotted as y}from"../internal/slots.js";var _="data-skdx-dashboard-layout-generated",u={fromAttribute:d=>d!=="false"},f=0,e=class extends b{constructor(){super(...arguments);this.title="";this.contentAs="main";this.defaultNavOpen=!0;this.navLabel="Main navigation";this.navToggleLabel="Toggle navigation";this.navId=`skdx-dashboard-layout-nav-${++f}`;this.toggleNav=()=>{let t=!this.open;this.uncontrolledNavOpen=t,this.requestUpdate(),m(this,"nav-open-change",t)}}createRenderRoot(){return this}get open(){return this.navOpen??this.uncontrolledNavOpen??this.defaultNavOpen}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this.requestUpdate())}region(t){return this.querySelector(`.skdx-dashboard-layout__${t}`)}willUpdate(t){if(t.has("contentAs")){let a=this.region("content");a&&this.append(...Array.from(a.childNodes))}}updated(){this.toggleAttribute("data-nav-open",this.open),y(this,_,{branding:this.region("branding"),actions:this.region("actions")},this.region("content"))}navList(t){return r`<ul class="skdx-dashboard-layout__nav-list">
+      ${t.map(a=>this.navItem(a))}
+    </ul>`}navItem(t){return t.kind==="divider"?r`<li>
         <hr class="skdx-dashboard-layout__nav-divider" />
-      </li>`:a.kind==="header"?r`<li class="skdx-dashboard-layout__nav-header">${a.label??""}</li>`:a.href!==void 0?r`<li>
+      </li>`:t.kind==="header"?r`<li class="skdx-dashboard-layout__nav-header">${t.label??""}</li>`:t.href!==void 0?r`<li>
         <a
           class="skdx-dashboard-layout__nav-item"
-          href=${a.href}
-          aria-current=${a.current?"page":h}
-          >${a.label??""}</a
+          href=${t.href}
+          aria-current=${t.current?"page":h}
+          >${t.label??""}</a
         >
       </li>`:r`<li>
-      <span class="skdx-dashboard-layout__nav-item">${a.label??""}</span>
-      ${a.children?.length?this.navList(a.children):h}
-    </li>`}render(){let a=this.open;return r`
+      <span class="skdx-dashboard-layout__nav-item">${t.label??""}</span>
+      ${t.children?.length?this.navList(t.children):h}
+    </li>`}render(){let t=this.open;return r`
       <header
         class="skdx-dashboard-layout__app-bar"
         data-skdx-dashboard-layout-generated
@@ -21,7 +21,7 @@ var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var t=(l,d,a,i
           class="skdx-button skdx-dashboard-layout__nav-toggle"
           type="button"
           data-icon-only
-          aria-expanded=${a?"true":"false"}
+          aria-expanded=${t?"true":"false"}
           aria-controls=${this.navId}
           aria-label=${this.navToggleLabel}
           @click=${this.toggleNav}
@@ -40,10 +40,10 @@ var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var t=(l,d,a,i
           id=${this.navId}
           class="skdx-dashboard-layout__nav"
           aria-label=${this.navLabel}
-          ?hidden=${!a}
+          ?hidden=${!t}
         >
           ${this.navList(this.navigation??[])}
         </nav>
-        <main class="skdx-dashboard-layout__content"></main>
+        ${this.contentAs==="div"?r`<div class="skdx-dashboard-layout__content"></div>`:r`<main class="skdx-dashboard-layout__content"></main>`}
       </div>
-    `}};t([o({type:String})],e.prototype,"title",2),t([o({attribute:!1})],e.prototype,"navigation",2),t([o({converter:u,attribute:"nav-open"})],e.prototype,"navOpen",2),t([o({converter:u,attribute:"default-nav-open"})],e.prototype,"defaultNavOpen",2),t([o({type:String,attribute:"nav-label"})],e.prototype,"navLabel",2),t([o({type:String,attribute:"nav-toggle-label"})],e.prototype,"navToggleLabel",2),e=t([g("skdx-dashboard-layout","dashboard-layout","root")],e);export{e as SkdxDashboardLayout};
+    `}};n([o({type:String,attribute:"heading"})],e.prototype,"title",2),n([o({attribute:!1})],e.prototype,"navigation",2),n([o({type:String,attribute:"content-as"})],e.prototype,"contentAs",2),n([o({converter:u,attribute:"nav-open"})],e.prototype,"navOpen",2),n([o({converter:u,attribute:"default-nav-open"})],e.prototype,"defaultNavOpen",2),n([o({type:String,attribute:"nav-label"})],e.prototype,"navLabel",2),n([o({type:String,attribute:"nav-toggle-label"})],e.prototype,"navToggleLabel",2),e=n([g("skdx-dashboard-layout","dashboard-layout","root")],e);export{e as SkdxDashboardLayout};

package/dist/empty-state/EmptyState.cjs

@@ -1,4 +1,4 @@
-"use strict";var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var x=(a,t)=>{for(var e in t)l(a,e,{get:t[e],enumerable:!0})},k=(a,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of v(t))!y.call(a,s)&&s!==e&&l(a,s,{get:()=>t[s],enumerable:!(r=m(t,s))||r.enumerable});return a};var $=a=>k(l({},"__esModule",{value:!0}),a),d=(a,t,e,r)=>{for(var s=r>1?void 0:r?m(t,e):t,p=a.length-1,c;p>=0;p--)(c=a[p])&&(s=(r?c(t,e,s):c(s))||s);return r&&s&&l(t,e,s),s};var b={};x(b,{SkdxEmptyState:()=>n});module.exports=$(b);var i=require("lit"),o=require("lit/decorators.js"),u=require("../internal/define.cjs"),h=require("../internal/slots.cjs"),T=require("@skdx/web-components/heading"),L=require("@skdx/web-components/text");var g="data-skdx-empty-state-generated",_=0,n=class extends i.LitElement{constructor(){super(...arguments);this.headingLevel=3;this.align="center";this.titleId=`skdx-empty-state-title-${++_}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this.requestUpdate())}region(e){return this.querySelector(`.skdx-empty-state__${e}`)}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}get hasContent(){return(0,h.hasUnslottedChild)(this,g)||(this.region("content")?.hasChildNodes()??!1)}updated(){this.setAttribute("data-align",this.align),this.size===void 0?this.removeAttribute("data-size"):this.setAttribute("data-size",this.size),(0,h.placeSlotted)(this,g,{icon:this.region("icon"),actions:this.region("actions")},this.region("content"))}render(){return i.html`
+"use strict";var l=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var x=(a,t)=>{for(var e in t)l(a,e,{get:t[e],enumerable:!0})},k=(a,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of v(t))!y.call(a,s)&&s!==e&&l(a,s,{get:()=>t[s],enumerable:!(r=g(t,s))||r.enumerable});return a};var $=a=>k(l({},"__esModule",{value:!0}),a),d=(a,t,e,r)=>{for(var s=r>1?void 0:r?g(t,e):t,p=a.length-1,c;p>=0;p--)(c=a[p])&&(s=(r?c(t,e,s):c(s))||s);return r&&s&&l(t,e,s),s};var b={};x(b,{SkdxEmptyState:()=>n});module.exports=$(b);var i=require("lit"),o=require("lit/decorators.js"),u=require("../internal/define.cjs"),h=require("../internal/slots.cjs"),T=require("@skdx/web-components/heading"),L=require("@skdx/web-components/text");var m="data-skdx-empty-state-generated",_=0,n=class extends i.LitElement{constructor(){super(...arguments);this.headingLevel=3;this.align="center";this.titleId=`skdx-empty-state-title-${++_}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this.requestUpdate())}region(e){return this.querySelector(`.skdx-empty-state__${e}`)}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}get hasContent(){return(0,h.hasUnslottedChild)(this,m)||(this.region("content")?.hasChildNodes()??!1)}updated(){this.setAttribute("data-align",this.align),this.size===void 0?this.removeAttribute("data-size"):this.setAttribute("data-size",this.size),(0,h.placeSlotted)(this,m,{icon:this.region("icon"),actions:this.region("actions")},this.region("content"))}render(){return i.html`
       ${this.hasSlotted("icon")?i.html`<div
               class="skdx-empty-state__icon"
               aria-hidden="true"
@@ -26,4 +26,4 @@
               class="skdx-empty-state__actions"
               data-skdx-empty-state-generated
             ></div>`:i.nothing}
-    `}};d([(0,o.property)({type:String})],n.prototype,"title",2),d([(0,o.property)({type:String})],n.prototype,"description",2),d([(0,o.property)({type:Number,attribute:"heading-level"})],n.prototype,"headingLevel",2),d([(0,o.property)({type:String})],n.prototype,"size",2),d([(0,o.property)({type:String})],n.prototype,"align",2),n=d([(0,u.customElement)("skdx-empty-state","empty-state","root")],n);0&&(module.exports={SkdxEmptyState});
+    `}};d([(0,o.property)({type:String,attribute:"heading"})],n.prototype,"title",2),d([(0,o.property)({type:String})],n.prototype,"description",2),d([(0,o.property)({type:Number,attribute:"heading-level"})],n.prototype,"headingLevel",2),d([(0,o.property)({type:String})],n.prototype,"size",2),d([(0,o.property)({type:String})],n.prototype,"align",2),n=d([(0,u.customElement)("skdx-empty-state","empty-state","root")],n);0&&(module.exports={SkdxEmptyState});

package/dist/empty-state/EmptyState.d.cts

@@ -15,7 +15,7 @@ import '@skdx/web-components/text';
  * @example
  * ```html
  * <skdx-empty-state
- *   title="No invoices yet"
+ *   heading="No invoices yet"
  *   description="Invoices you create will show up here."
  * >
  *   <svg slot="icon"></svg>
@@ -30,7 +30,7 @@ import '@skdx/web-components/text';
 export declare class SkdxEmptyState extends LitElement {
     /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
     createRenderRoot(): HTMLElement | DocumentFragment;
-    /** Heading text naming the empty region, rendered into a derived Heading. */
+    /** Heading text naming the empty region, rendered into a derived Heading. The JavaScript property is `title`. */
     title: string;
     /**
      * Supporting copy rendered below the title, explaining why the region is empty.

package/dist/empty-state/EmptyState.d.ts

@@ -15,7 +15,7 @@ import '@skdx/web-components/text';
  * @example
  * ```html
  * <skdx-empty-state
- *   title="No invoices yet"
+ *   heading="No invoices yet"
  *   description="Invoices you create will show up here."
  * >
  *   <svg slot="icon"></svg>
@@ -30,7 +30,7 @@ import '@skdx/web-components/text';
 export declare class SkdxEmptyState extends LitElement {
     /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
     createRenderRoot(): HTMLElement | DocumentFragment;
-    /** Heading text naming the empty region, rendered into a derived Heading. */
+    /** Heading text naming the empty region, rendered into a derived Heading. The JavaScript property is `title`. */
     title: string;
     /**
      * Supporting copy rendered below the title, explaining why the region is empty.

package/dist/empty-state/EmptyState.js

@@ -1,4 +1,4 @@
-var m=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(l,a,e,d)=>{for(var s=d>1?void 0:d?g(a,e):a,h=l.length-1,p;h>=0;h--)(p=l[h])&&(s=(d?p(a,e,s):p(s))||s);return d&&s&&m(a,e,s),s};import{html as n,LitElement as u,nothing as o}from"lit";import{property as r}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{hasUnslottedChild as y,placeSlotted as x}from"../internal/slots.js";import"@skdx/web-components/heading";import"@skdx/web-components/text";var c="data-skdx-empty-state-generated",k=0,t=class extends u{constructor(){super(...arguments);this.headingLevel=3;this.align="center";this.titleId=`skdx-empty-state-title-${++k}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this.requestUpdate())}region(e){return this.querySelector(`.skdx-empty-state__${e}`)}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}get hasContent(){return y(this,c)||(this.region("content")?.hasChildNodes()??!1)}updated(){this.setAttribute("data-align",this.align),this.size===void 0?this.removeAttribute("data-size"):this.setAttribute("data-size",this.size),x(this,c,{icon:this.region("icon"),actions:this.region("actions")},this.region("content"))}render(){return n`
+var g=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var i=(l,a,e,d)=>{for(var s=d>1?void 0:d?m(a,e):a,h=l.length-1,p;h>=0;h--)(p=l[h])&&(s=(d?p(a,e,s):p(s))||s);return d&&s&&g(a,e,s),s};import{html as n,LitElement as u,nothing as o}from"lit";import{property as r}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{hasUnslottedChild as y,placeSlotted as x}from"../internal/slots.js";import"@skdx/web-components/heading";import"@skdx/web-components/text";var c="data-skdx-empty-state-generated",k=0,t=class extends u{constructor(){super(...arguments);this.headingLevel=3;this.align="center";this.titleId=`skdx-empty-state-title-${++k}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this.requestUpdate())}region(e){return this.querySelector(`.skdx-empty-state__${e}`)}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}get hasContent(){return y(this,c)||(this.region("content")?.hasChildNodes()??!1)}updated(){this.setAttribute("data-align",this.align),this.size===void 0?this.removeAttribute("data-size"):this.setAttribute("data-size",this.size),x(this,c,{icon:this.region("icon"),actions:this.region("actions")},this.region("content"))}render(){return n`
       ${this.hasSlotted("icon")?n`<div
               class="skdx-empty-state__icon"
               aria-hidden="true"
@@ -26,4 +26,4 @@ var m=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(l,a,e,d
               class="skdx-empty-state__actions"
               data-skdx-empty-state-generated
             ></div>`:o}
-    `}};i([r({type:String})],t.prototype,"title",2),i([r({type:String})],t.prototype,"description",2),i([r({type:Number,attribute:"heading-level"})],t.prototype,"headingLevel",2),i([r({type:String})],t.prototype,"size",2),i([r({type:String})],t.prototype,"align",2),t=i([v("skdx-empty-state","empty-state","root")],t);export{t as SkdxEmptyState};
+    `}};i([r({type:String,attribute:"heading"})],t.prototype,"title",2),i([r({type:String})],t.prototype,"description",2),i([r({type:Number,attribute:"heading-level"})],t.prototype,"headingLevel",2),i([r({type:String})],t.prototype,"size",2),i([r({type:String})],t.prototype,"align",2),t=i([v("skdx-empty-state","empty-state","root")],t);export{t as SkdxEmptyState};

package/dist/forgot-password-page/ForgotPasswordPage.cjs

@@ -55,4 +55,4 @@
               </skdx-form>`}
         ${this.hasSlotted("footer")?r.html`<div class="skdx-forgot-password-page__footer"></div>`:r.nothing}
       </div>
-    `}};l([(0,d.property)({type:String})],i.prototype,"title",2),l([(0,d.property)({type:String})],i.prototype,"description",2),l([(0,d.property)({type:String})],i.prototype,"error",2),l([(0,d.property)({type:String})],i.prototype,"success",2),l([(0,d.property)({type:Boolean})],i.prototype,"pending",2),l([(0,d.property)({type:String,attribute:"email-label"})],i.prototype,"emailLabel",2),l([(0,d.property)({type:String,attribute:"submit-label"})],i.prototype,"submitLabel",2),i=l([(0,h.customElement)("skdx-forgot-password-page","forgot-password-page","root")],i);0&&(module.exports={SkdxForgotPasswordPage});
+    `}};l([(0,d.property)({type:String,attribute:"heading"})],i.prototype,"title",2),l([(0,d.property)({type:String})],i.prototype,"description",2),l([(0,d.property)({type:String})],i.prototype,"error",2),l([(0,d.property)({type:String})],i.prototype,"success",2),l([(0,d.property)({type:Boolean})],i.prototype,"pending",2),l([(0,d.property)({type:String,attribute:"email-label"})],i.prototype,"emailLabel",2),l([(0,d.property)({type:String,attribute:"submit-label"})],i.prototype,"submitLabel",2),i=l([(0,h.customElement)("skdx-forgot-password-page","forgot-password-page","root")],i);0&&(module.exports={SkdxForgotPasswordPage});

package/dist/forgot-password-page/ForgotPasswordPage.d.cts

@@ -41,7 +41,7 @@ export declare class SkdxForgotPasswordPage extends LitElement {
     /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
     createRenderRoot(): HTMLElement | DocumentFragment;
     /**
-     * Heading text, rendered into a derived `<h1>` that names the section.
+     * Heading text, rendered into a derived `<h1>` that names the section. The JavaScript property is `title`.
      * @default 'Reset your password'
      */
     title: string;

package/dist/forgot-password-page/ForgotPasswordPage.d.ts

@@ -41,7 +41,7 @@ export declare class SkdxForgotPasswordPage extends LitElement {
     /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
     createRenderRoot(): HTMLElement | DocumentFragment;
     /**
-     * Heading text, rendered into a derived `<h1>` that names the section.
+     * Heading text, rendered into a derived `<h1>` that names the section. The JavaScript property is `title`.
      * @default 'Reset your password'
      */
     title: string;

package/dist/forgot-password-page/ForgotPasswordPage.js

@@ -55,4 +55,4 @@ var u=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var r=(n,l,e,i
               </skdx-form>`}
         ${this.hasSlotted("footer")?o`<div class="skdx-forgot-password-page__footer"></div>`:d}
       </div>
-    `}};r([a({type:String})],t.prototype,"title",2),r([a({type:String})],t.prototype,"description",2),r([a({type:String})],t.prototype,"error",2),r([a({type:String})],t.prototype,"success",2),r([a({type:Boolean})],t.prototype,"pending",2),r([a({type:String,attribute:"email-label"})],t.prototype,"emailLabel",2),r([a({type:String,attribute:"submit-label"})],t.prototype,"submitLabel",2),t=r([f("skdx-forgot-password-page","forgot-password-page","root")],t);export{t as SkdxForgotPasswordPage};
+    `}};r([a({type:String,attribute:"heading"})],t.prototype,"title",2),r([a({type:String})],t.prototype,"description",2),r([a({type:String})],t.prototype,"error",2),r([a({type:String})],t.prototype,"success",2),r([a({type:Boolean})],t.prototype,"pending",2),r([a({type:String,attribute:"email-label"})],t.prototype,"emailLabel",2),r([a({type:String,attribute:"submit-label"})],t.prototype,"submitLabel",2),t=r([f("skdx-forgot-password-page","forgot-password-page","root")],t);export{t as SkdxForgotPasswordPage};

package/dist/form-section/FormSection.cjs

@@ -1,4 +1,4 @@
-"use strict";var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var b=(i,e)=>{for(var t in e)l(i,t,{get:e[t],enumerable:!0})},k=(i,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of v(e))!x.call(i,r)&&r!==t&&l(i,r,{get:()=>e[r],enumerable:!(n=m(e,r))||n.enumerable});return i};var $=i=>k(l({},"__esModule",{value:!0}),i),o=(i,e,t,n)=>{for(var r=n>1?void 0:n?m(e,t):e,c=i.length-1,p;c>=0;c--)(p=i[c])&&(r=(n?p(e,t,r):p(r))||r);return n&&r&&l(e,t,r),r};var _={};b(_,{SkdxFormSection:()=>s});module.exports=$(_);var d=require("lit"),a=require("lit/decorators.js"),f=require("../internal/define.cjs"),g=require("../internal/slots.cjs"),T=require("@skdx/web-components/heading"),L=require("@skdx/web-components/text");var y="data-skdx-form-section-generated",h=0;function u(i,e,t){t===void 0?i.removeAttribute(e):i.setAttribute(e,t)}var s=class extends d.LitElement{constructor(){super(...arguments);this.headingLevel=2;this.titleId=`skdx-form-section-title-${++h}`;this.descriptionId=`skdx-form-section-description-${h}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),queueMicrotask(()=>this.requestUpdate())}region(t){return this.querySelector(`.skdx-form-section__${t}`)}hasSlotted(t){return this.querySelector(`[slot="${t}"], [data-skdx-slot="${t}"]`)!==null}updated(){u(this,"data-variant",this.variant),u(this,"aria-describedby",this.description?this.descriptionId:void 0),(0,g.placeSlotted)(this,y,{actions:this.region("footer")},this.region("content"))}render(){return d.html`
+"use strict";var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var x=(i,e)=>{for(var t in e)l(i,t,{get:e[t],enumerable:!0})},k=(i,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of v(e))!b.call(i,r)&&r!==t&&l(i,r,{get:()=>e[r],enumerable:!(n=m(e,r))||n.enumerable});return i};var $=i=>k(l({},"__esModule",{value:!0}),i),o=(i,e,t,n)=>{for(var r=n>1?void 0:n?m(e,t):e,c=i.length-1,p;c>=0;c--)(p=i[c])&&(r=(n?p(e,t,r):p(r))||r);return n&&r&&l(e,t,r),r};var _={};x(_,{SkdxFormSection:()=>s});module.exports=$(_);var d=require("lit"),a=require("lit/decorators.js"),f=require("../internal/define.cjs"),g=require("../internal/slots.cjs"),T=require("@skdx/web-components/heading"),L=require("@skdx/web-components/text");var y="data-skdx-form-section-generated",h=0;function u(i,e,t){t===void 0?i.removeAttribute(e):i.setAttribute(e,t)}var s=class extends d.LitElement{constructor(){super(...arguments);this.headingLevel=2;this.titleId=`skdx-form-section-title-${++h}`;this.descriptionId=`skdx-form-section-description-${h}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),queueMicrotask(()=>this.requestUpdate())}region(t){return this.querySelector(`.skdx-form-section__${t}`)}hasSlotted(t){return this.querySelector(`[slot="${t}"], [data-skdx-slot="${t}"]`)!==null}updated(){u(this,"data-variant",this.variant),u(this,"aria-describedby",this.description?this.descriptionId:void 0),(0,g.placeSlotted)(this,y,{actions:this.region("footer")},this.region("content"))}render(){return d.html`
       <div
         class="skdx-form-section__header"
         data-skdx-form-section-generated
@@ -25,4 +25,4 @@
               class="skdx-form-section__footer"
               data-skdx-form-section-generated
             ></div>`:d.nothing}
-    `}};o([(0,a.property)({type:String})],s.prototype,"title",2),o([(0,a.property)({type:String})],s.prototype,"description",2),o([(0,a.property)({type:Number,attribute:"heading-level"})],s.prototype,"headingLevel",2),o([(0,a.property)({type:String})],s.prototype,"variant",2),s=o([(0,f.customElement)("skdx-form-section","form-section","root")],s);0&&(module.exports={SkdxFormSection});
+    `}};o([(0,a.property)({type:String,attribute:"heading"})],s.prototype,"title",2),o([(0,a.property)({type:String})],s.prototype,"description",2),o([(0,a.property)({type:Number,attribute:"heading-level"})],s.prototype,"headingLevel",2),o([(0,a.property)({type:String})],s.prototype,"variant",2),s=o([(0,f.customElement)("skdx-form-section","form-section","root")],s);0&&(module.exports={SkdxFormSection});

package/dist/form-section/FormSection.d.cts

@@ -14,7 +14,7 @@ import '@skdx/web-components/text';
  * @example
  * ```html
  * <skdx-form-section
- *   title="Billing address"
+ *   heading="Billing address"
  *   description="Used for invoices and receipts."
  * >
  *   <skdx-text-field label="Street"></skdx-text-field>
@@ -28,7 +28,7 @@ import '@skdx/web-components/text';
 export declare class SkdxFormSection extends LitElement {
     /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
     createRenderRoot(): HTMLElement | DocumentFragment;
-    /** Heading text naming the group, rendered into a derived Heading that names the section. */
+    /** Heading text naming the group, rendered into a derived Heading that names the section. The JavaScript property is `title`. */
     title: string;
     /**
      * Supporting copy rendered below the title, explaining the group's fields.

package/dist/form-section/FormSection.d.ts

@@ -14,7 +14,7 @@ import '@skdx/web-components/text';
  * @example
  * ```html
  * <skdx-form-section
- *   title="Billing address"
+ *   heading="Billing address"
  *   description="Used for invoices and receipts."
  * >
  *   <skdx-text-field label="Street"></skdx-text-field>
@@ -28,7 +28,7 @@ import '@skdx/web-components/text';
 export declare class SkdxFormSection extends LitElement {
     /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
     createRenderRoot(): HTMLElement | DocumentFragment;
-    /** Heading text naming the group, rendered into a derived Heading that names the section. */
+    /** Heading text naming the group, rendered into a derived Heading that names the section. The JavaScript property is `title`. */
     title: string;
     /**
      * Supporting copy rendered below the title, explaining the group's fields.

package/dist/form-section/FormSection.js

@@ -1,4 +1,4 @@
-var u=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var d=(s,t,e,n)=>{for(var r=n>1?void 0:n?f(t,e):t,a=s.length-1,l;a>=0;a--)(l=s[a])&&(r=(n?l(t,e,r):l(r))||r);return n&&r&&u(t,e,r),r};import{html as c,LitElement as g,nothing as p}from"lit";import{property as o}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{placeSlotted as x}from"../internal/slots.js";import"@skdx/web-components/heading";import"@skdx/web-components/text";var b="data-skdx-form-section-generated",m=0;function h(s,t,e){e===void 0?s.removeAttribute(t):s.setAttribute(t,e)}var i=class extends g{constructor(){super(...arguments);this.headingLevel=2;this.titleId=`skdx-form-section-title-${++m}`;this.descriptionId=`skdx-form-section-description-${m}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),queueMicrotask(()=>this.requestUpdate())}region(e){return this.querySelector(`.skdx-form-section__${e}`)}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}updated(){h(this,"data-variant",this.variant),h(this,"aria-describedby",this.description?this.descriptionId:void 0),x(this,b,{actions:this.region("footer")},this.region("content"))}render(){return c`
+var u=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var d=(s,t,e,n)=>{for(var r=n>1?void 0:n?f(t,e):t,a=s.length-1,l;a>=0;a--)(l=s[a])&&(r=(n?l(t,e,r):l(r))||r);return n&&r&&u(t,e,r),r};import{html as c,LitElement as g,nothing as p}from"lit";import{property as o}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{placeSlotted as b}from"../internal/slots.js";import"@skdx/web-components/heading";import"@skdx/web-components/text";var x="data-skdx-form-section-generated",m=0;function h(s,t,e){e===void 0?s.removeAttribute(t):s.setAttribute(t,e)}var i=class extends g{constructor(){super(...arguments);this.headingLevel=2;this.titleId=`skdx-form-section-title-${++m}`;this.descriptionId=`skdx-form-section-description-${m}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),queueMicrotask(()=>this.requestUpdate())}region(e){return this.querySelector(`.skdx-form-section__${e}`)}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}updated(){h(this,"data-variant",this.variant),h(this,"aria-describedby",this.description?this.descriptionId:void 0),b(this,x,{actions:this.region("footer")},this.region("content"))}render(){return c`
       <div
         class="skdx-form-section__header"
         data-skdx-form-section-generated
@@ -25,4 +25,4 @@ var u=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var d=(s,t,e,n
               class="skdx-form-section__footer"
               data-skdx-form-section-generated
             ></div>`:p}
-    `}};d([o({type:String})],i.prototype,"title",2),d([o({type:String})],i.prototype,"description",2),d([o({type:Number,attribute:"heading-level"})],i.prototype,"headingLevel",2),d([o({type:String})],i.prototype,"variant",2),i=d([v("skdx-form-section","form-section","root")],i);export{i as SkdxFormSection};
+    `}};d([o({type:String,attribute:"heading"})],i.prototype,"title",2),d([o({type:String})],i.prototype,"description",2),d([o({type:Number,attribute:"heading-level"})],i.prototype,"headingLevel",2),d([o({type:String})],i.prototype,"variant",2),i=d([v("skdx-form-section","form-section","root")],i);export{i as SkdxFormSection};

package/dist/internal/define.cjs

@@ -1 +1 @@
-"use strict";var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var r=Object.prototype.hasOwnProperty;var a=(e,t)=>{for(var o in t)l(e,o,{get:t[o],enumerable:!0})},C=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of i(t))!r.call(e,s)&&s!==o&&l(e,s,{get:()=>t[s],enumerable:!(n=m(t,s))||n.enumerable});return e};var p=e=>C(l({},"__esModule",{value:!0}),e);var d={};a(d,{customElement:()=>u});module.exports=p(d);var c=require("./part.cjs"),u=(e,t,o)=>n=>{E(n,t,o),customElements.get(e)===void 0&&customElements.define(e,n)};function E(e,t,o){let n=e.prototype,s=n.connectedCallback;n.connectedCallback=function(){(0,c.applyHostPart)(this,t,o),s?.call(this)}}0&&(module.exports={customElement});
+"use strict";var r=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var a=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},p=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of c(e))!m.call(t,s)&&s!==o&&r(t,s,{get:()=>e[s],enumerable:!(n=l(e,s))||n.enumerable});return t};var u=t=>p(r({},"__esModule",{value:!0}),t);var f={};a(f,{customElement:()=>C});module.exports=u(f);var i=require("./part.cjs");function d(t){t.hasAttribute("title")&&t.constructor.elementProperties?.has("title")&&t.removeAttribute("title")}var C=(t,e,o)=>n=>{E(n,e,o),customElements.get(t)===void 0&&customElements.define(t,n)};function E(t,e,o){let n=t.prototype,s=n.connectedCallback;n.connectedCallback=function(){(0,i.applyHostPart)(this,e,o),d(this),s?.call(this)}}0&&(module.exports={customElement});

package/dist/internal/define.js

@@ -1 +1 @@
-import{applyHostPart as l}from"./part.js";var i=(e,o,n)=>t=>{c(t,o,n),customElements.get(e)===void 0&&customElements.define(e,t)};function c(e,o,n){let t=e.prototype,s=t.connectedCallback;t.connectedCallback=function(){l(this,o,n),s?.call(this)}}export{i as customElement};
+import{applyHostPart as r}from"./part.js";function i(t){t.hasAttribute("title")&&t.constructor.elementProperties?.has("title")&&t.removeAttribute("title")}var m=(t,o,n)=>e=>{l(e,o,n),customElements.get(t)===void 0&&customElements.define(t,e)};function l(t,o,n){let e=t.prototype,s=e.connectedCallback;e.connectedCallback=function(){r(this,o,n),i(this),s?.call(this)}}export{m as customElement};

package/dist/notification-center/NotificationCenter.cjs

@@ -71,4 +71,4 @@
               </div>`:t.nothing}
       </div>
       ${this.content(e)}
-    `}};s([(0,o.property)({attribute:!1})],r.prototype,"notifications",2),s([(0,o.property)({type:String})],r.prototype,"title",2),s([(0,o.property)({type:Number,attribute:"heading-level"})],r.prototype,"headingLevel",2),s([(0,o.property)({type:String,attribute:"mark-all-read-label"})],r.prototype,"markAllReadLabel",2),s([(0,o.property)({type:String,attribute:"mark-read-label"})],r.prototype,"markReadLabel",2),s([(0,o.property)({type:String,attribute:"mark-unread-label"})],r.prototype,"markUnreadLabel",2),s([(0,o.property)({type:String,attribute:"empty-title"})],r.prototype,"emptyTitle",2),s([(0,o.property)({type:String,attribute:"empty-description"})],r.prototype,"emptyDescription",2),s([(0,o.property)({type:Boolean})],r.prototype,"loading",2),s([(0,o.property)({attribute:!1})],r.prototype,"now",2),s([(0,o.property)({attribute:!1})],r.prototype,"renderLeading",2),s([(0,o.property)({attribute:!1})],r.prototype,"renderActions",2),r=s([(0,v.customElement)("skdx-notification-center","notification-center","root")],r);0&&(module.exports={SkdxNotificationCenter});
+    `}};s([(0,o.property)({attribute:!1})],r.prototype,"notifications",2),s([(0,o.property)({type:String,attribute:"heading"})],r.prototype,"title",2),s([(0,o.property)({type:Number,attribute:"heading-level"})],r.prototype,"headingLevel",2),s([(0,o.property)({type:String,attribute:"mark-all-read-label"})],r.prototype,"markAllReadLabel",2),s([(0,o.property)({type:String,attribute:"mark-read-label"})],r.prototype,"markReadLabel",2),s([(0,o.property)({type:String,attribute:"mark-unread-label"})],r.prototype,"markUnreadLabel",2),s([(0,o.property)({type:String,attribute:"empty-title"})],r.prototype,"emptyTitle",2),s([(0,o.property)({type:String,attribute:"empty-description"})],r.prototype,"emptyDescription",2),s([(0,o.property)({type:Boolean})],r.prototype,"loading",2),s([(0,o.property)({attribute:!1})],r.prototype,"now",2),s([(0,o.property)({attribute:!1})],r.prototype,"renderLeading",2),s([(0,o.property)({attribute:!1})],r.prototype,"renderActions",2),r=s([(0,v.customElement)("skdx-notification-center","notification-center","root")],r);0&&(module.exports={SkdxNotificationCenter});

package/dist/notification-center/NotificationCenter.d.cts

@@ -62,7 +62,7 @@ export declare class SkdxNotificationCenter extends LitElement {
     /** The notifications to list, in render order, each with an id, a title and read state. */
     notifications: readonly SkdxNotificationCenterItem[];
     /**
-     * Heading text, rendered into a derived Heading that names the section.
+     * Heading text, rendered into a derived Heading that names the section. The JavaScript property is `title`.
      * @default 'Notifications'
      */
     title: string;

package/dist/notification-center/NotificationCenter.d.ts

@@ -62,7 +62,7 @@ export declare class SkdxNotificationCenter extends LitElement {
     /** The notifications to list, in render order, each with an id, a title and read state. */
     notifications: readonly SkdxNotificationCenterItem[];
     /**
-     * Heading text, rendered into a derived Heading that names the section.
+     * Heading text, rendered into a derived Heading that names the section. The JavaScript property is `title`.
      * @default 'Notifications'
      */
     title: string;

package/dist/notification-center/NotificationCenter.js

@@ -71,4 +71,4 @@ var u=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var a=(c,d,e,i
               </div>`:o}
       </div>
       ${this.content(e)}
-    `}};a([s({attribute:!1})],r.prototype,"notifications",2),a([s({type:String})],r.prototype,"title",2),a([s({type:Number,attribute:"heading-level"})],r.prototype,"headingLevel",2),a([s({type:String,attribute:"mark-all-read-label"})],r.prototype,"markAllReadLabel",2),a([s({type:String,attribute:"mark-read-label"})],r.prototype,"markReadLabel",2),a([s({type:String,attribute:"mark-unread-label"})],r.prototype,"markUnreadLabel",2),a([s({type:String,attribute:"empty-title"})],r.prototype,"emptyTitle",2),a([s({type:String,attribute:"empty-description"})],r.prototype,"emptyDescription",2),a([s({type:Boolean})],r.prototype,"loading",2),a([s({attribute:!1})],r.prototype,"now",2),a([s({attribute:!1})],r.prototype,"renderLeading",2),a([s({attribute:!1})],r.prototype,"renderActions",2),r=a([k("skdx-notification-center","notification-center","root")],r);export{r as SkdxNotificationCenter};
+    `}};a([s({attribute:!1})],r.prototype,"notifications",2),a([s({type:String,attribute:"heading"})],r.prototype,"title",2),a([s({type:Number,attribute:"heading-level"})],r.prototype,"headingLevel",2),a([s({type:String,attribute:"mark-all-read-label"})],r.prototype,"markAllReadLabel",2),a([s({type:String,attribute:"mark-read-label"})],r.prototype,"markReadLabel",2),a([s({type:String,attribute:"mark-unread-label"})],r.prototype,"markUnreadLabel",2),a([s({type:String,attribute:"empty-title"})],r.prototype,"emptyTitle",2),a([s({type:String,attribute:"empty-description"})],r.prototype,"emptyDescription",2),a([s({type:Boolean})],r.prototype,"loading",2),a([s({attribute:!1})],r.prototype,"now",2),a([s({attribute:!1})],r.prototype,"renderLeading",2),a([s({attribute:!1})],r.prototype,"renderActions",2),r=a([k("skdx-notification-center","notification-center","root")],r);export{r as SkdxNotificationCenter};

package/dist/onboarding-checklist/OnboardingChecklist.cjs

@@ -52,4 +52,4 @@
       <ol class="skdx-onboarding-checklist__list">
         ${e.map(r=>this.renderItem(r))}
       </ol>
-    `}};o([(0,d.property)({type:String})],l.prototype,"title",2),o([(0,d.property)({type:String})],l.prototype,"description",2),o([(0,d.property)({type:Number,attribute:"heading-level"})],l.prototype,"headingLevel",2),o([(0,d.property)({attribute:!1})],l.prototype,"items",2),o([(0,d.property)({attribute:!1})],l.prototype,"getProgressLabel",2),o([(0,d.property)({type:String,attribute:"complete-label"})],l.prototype,"completeLabel",2),o([(0,d.property)({type:String,attribute:"optional-label"})],l.prototype,"optionalLabel",2),l=o([(0,m.customElement)("skdx-onboarding-checklist","onboarding-checklist","root")],l);0&&(module.exports={SkdxOnboardingChecklist});
+    `}};o([(0,d.property)({type:String,attribute:"heading"})],l.prototype,"title",2),o([(0,d.property)({type:String})],l.prototype,"description",2),o([(0,d.property)({type:Number,attribute:"heading-level"})],l.prototype,"headingLevel",2),o([(0,d.property)({attribute:!1})],l.prototype,"items",2),o([(0,d.property)({attribute:!1})],l.prototype,"getProgressLabel",2),o([(0,d.property)({type:String,attribute:"complete-label"})],l.prototype,"completeLabel",2),o([(0,d.property)({type:String,attribute:"optional-label"})],l.prototype,"optionalLabel",2),l=o([(0,m.customElement)("skdx-onboarding-checklist","onboarding-checklist","root")],l);0&&(module.exports={SkdxOnboardingChecklist});

package/dist/onboarding-checklist/OnboardingChecklist.d.cts

@@ -34,7 +34,7 @@ export interface SkdxOnboardingChecklistItem {
  *
  * @example
  * ```html
- * <skdx-onboarding-checklist id="setup" title="Get started"></skdx-onboarding-checklist>
+ * <skdx-onboarding-checklist id="setup" heading="Get started"></skdx-onboarding-checklist>
  * <script>
  *   const list = document.getElementById('setup');
  *   list.items = [{ id: 'invite', label: 'Invite a teammate', actionLabel: 'Invite' }];
@@ -47,7 +47,7 @@ export interface SkdxOnboardingChecklistItem {
 export declare class SkdxOnboardingChecklist extends LitElement {
     /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
     createRenderRoot(): HTMLElement | DocumentFragment;
-    /** Heading text naming the checklist, rendered into a derived Heading that names the section. */
+    /** Heading text naming the checklist, rendered into a derived Heading that names the section. The JavaScript property is `title`. */
     title: string;
     /**
      * Supporting copy rendered below the title, explaining what the checklist covers.

package/dist/onboarding-checklist/OnboardingChecklist.d.ts

@@ -34,7 +34,7 @@ export interface SkdxOnboardingChecklistItem {
  *
  * @example
  * ```html
- * <skdx-onboarding-checklist id="setup" title="Get started"></skdx-onboarding-checklist>
+ * <skdx-onboarding-checklist id="setup" heading="Get started"></skdx-onboarding-checklist>
  * <script>
  *   const list = document.getElementById('setup');
  *   list.items = [{ id: 'invite', label: 'Invite a teammate', actionLabel: 'Invite' }];
@@ -47,7 +47,7 @@ export interface SkdxOnboardingChecklistItem {
 export declare class SkdxOnboardingChecklist extends LitElement {
     /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
     createRenderRoot(): HTMLElement | DocumentFragment;
-    /** Heading text naming the checklist, rendered into a derived Heading that names the section. */
+    /** Heading text naming the checklist, rendered into a derived Heading that names the section. The JavaScript property is `title`. */
     title: string;
     /**
      * Supporting copy rendered below the title, explaining what the checklist covers.

package/dist/onboarding-checklist/OnboardingChecklist.js

@@ -52,4 +52,4 @@ var m=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var n=(c,r,e,t
       <ol class="skdx-onboarding-checklist__list">
         ${e.map(a=>this.renderItem(a))}
       </ol>
-    `}};n([d({type:String})],i.prototype,"title",2),n([d({type:String})],i.prototype,"description",2),n([d({type:Number,attribute:"heading-level"})],i.prototype,"headingLevel",2),n([d({attribute:!1})],i.prototype,"items",2),n([d({attribute:!1})],i.prototype,"getProgressLabel",2),n([d({type:String,attribute:"complete-label"})],i.prototype,"completeLabel",2),n([d({type:String,attribute:"optional-label"})],i.prototype,"optionalLabel",2),i=n([u("skdx-onboarding-checklist","onboarding-checklist","root")],i);export{i as SkdxOnboardingChecklist};
+    `}};n([d({type:String,attribute:"heading"})],i.prototype,"title",2),n([d({type:String})],i.prototype,"description",2),n([d({type:Number,attribute:"heading-level"})],i.prototype,"headingLevel",2),n([d({attribute:!1})],i.prototype,"items",2),n([d({attribute:!1})],i.prototype,"getProgressLabel",2),n([d({type:String,attribute:"complete-label"})],i.prototype,"completeLabel",2),n([d({type:String,attribute:"optional-label"})],i.prototype,"optionalLabel",2),i=n([u("skdx-onboarding-checklist","onboarding-checklist","root")],i);export{i as SkdxOnboardingChecklist};

package/dist/page-container/PageContainer.cjs

@@ -1,14 +1,14 @@
-"use strict";var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var k=(r,e)=>{for(var a in e)d(r,a,{get:e[a],enumerable:!0})},x=(r,e,a,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of g(e))!h.call(r,t)&&t!==a&&d(r,t,{get:()=>e[t],enumerable:!(n=p(e,t))||n.enumerable});return r};var v=r=>x(d({},"__esModule",{value:!0}),r),o=(r,e,a,n)=>{for(var t=n>1?void 0:n?p(e,a):e,c=r.length-1,b;c>=0;c--)(b=r[c])&&(t=(n?b(e,a,t):b(t))||t);return n&&t&&d(e,a,t),t};var L={};k(L,{SkdxPageContainer:()=>i});module.exports=v(L);var s=require("lit"),l=require("lit/decorators.js"),m=require("../internal/define.cjs"),u=require("../internal/slots.cjs"),E=require("@skdx/web-components/breadcrumb"),f=require("@skdx/web-components/heading"),T=require("@skdx/web-components/toolbar");var _="data-skdx-page-container-generated",y=0,i=class extends s.LitElement{constructor(){super(...arguments);this.headingLevel=1;this.breadcrumbLabel="Breadcrumb";this.actionsLabel="Page actions";this.titleId=`skdx-page-container-title-${++y}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),queueMicrotask(()=>this.requestUpdate())}get hasActions(){return this.querySelector('[slot="actions"], [data-skdx-slot="actions"]')!==null}region(a){return this.querySelector(`.skdx-page-container__${a}`)}updated(){(0,u.placeSlotted)(this,_,{actions:this.region("actions")},this.region("content"))}render(){return s.html`
+"use strict";var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var k=(r,e)=>{for(var a in e)l(r,a,{get:e[a],enumerable:!0})},x=(r,e,a,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of g(e))!h.call(r,t)&&t!==a&&l(r,t,{get:()=>e[t],enumerable:!(s=p(e,t))||s.enumerable});return r};var v=r=>x(l({},"__esModule",{value:!0}),r),o=(r,e,a,s)=>{for(var t=s>1?void 0:s?p(e,a):e,c=r.length-1,b;c>=0;c--)(b=r[c])&&(t=(s?b(e,a,t):b(t))||t);return s&&t&&l(e,a,t),t};var L={};k(L,{SkdxPageContainer:()=>i});module.exports=v(L);var n=require("lit"),d=require("lit/decorators.js"),u=require("../internal/define.cjs"),m=require("../internal/slots.cjs"),E=require("@skdx/web-components/breadcrumb"),f=require("@skdx/web-components/heading"),T=require("@skdx/web-components/toolbar");var _="data-skdx-page-container-generated",y=0,i=class extends n.LitElement{constructor(){super(...arguments);this.headingLevel=1;this.breadcrumbLabel="Breadcrumb";this.actionsLabel="Page actions";this.titleId=`skdx-page-container-title-${++y}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),queueMicrotask(()=>this.requestUpdate())}get hasActions(){return this.querySelector('[slot="actions"], [data-skdx-slot="actions"]')!==null}region(a){return this.querySelector(`.skdx-page-container__${a}`)}updated(){(0,m.placeSlotted)(this,_,{actions:this.region("actions")},this.region("content"))}render(){return n.html`
       <header
         class="skdx-page-container__header"
         data-skdx-page-container-generated
         role="none"
       >
-        ${this.breadcrumbs?.length?s.html`<skdx-breadcrumb
+        ${this.breadcrumbs?.length?n.html`<skdx-breadcrumb
                 class="skdx-page-container__breadcrumbs"
                 label=${this.breadcrumbLabel}
                 .items=${this.breadcrumbs}
-              ></skdx-breadcrumb>`:s.nothing}
+              ></skdx-breadcrumb>`:n.nothing}
         <div class="skdx-page-container__heading-row">
           <skdx-heading
             class="skdx-page-container__title"
@@ -16,14 +16,14 @@
             id=${this.titleId}
             >${this.title??""}</skdx-heading
           >
-          ${this.hasActions?s.html`<skdx-toolbar
+          ${this.hasActions?n.html`<skdx-toolbar
                   class="skdx-page-container__actions"
                   aria-label=${this.actionsLabel}
-                ></skdx-toolbar>`:s.nothing}
+                ></skdx-toolbar>`:n.nothing}
         </div>
       </header>
       <div
         class="skdx-page-container__content"
         data-skdx-page-container-generated
       ></div>
-    `}};o([(0,l.property)({type:String})],i.prototype,"title",2),o([(0,l.property)({type:Number,attribute:"heading-level"})],i.prototype,"headingLevel",2),o([(0,l.property)({attribute:!1})],i.prototype,"breadcrumbs",2),o([(0,l.property)({type:String,attribute:"breadcrumb-label"})],i.prototype,"breadcrumbLabel",2),o([(0,l.property)({type:String,attribute:"actions-label"})],i.prototype,"actionsLabel",2),i=o([(0,m.customElement)("skdx-page-container","page-container","root")],i);0&&(module.exports={SkdxPageContainer});
+    `}};o([(0,d.property)({type:String,attribute:"heading"})],i.prototype,"title",2),o([(0,d.property)({type:Number,attribute:"heading-level"})],i.prototype,"headingLevel",2),o([(0,d.property)({attribute:!1})],i.prototype,"breadcrumbs",2),o([(0,d.property)({type:String,attribute:"breadcrumb-label"})],i.prototype,"breadcrumbLabel",2),o([(0,d.property)({type:String,attribute:"actions-label"})],i.prototype,"actionsLabel",2),i=o([(0,u.customElement)("skdx-page-container","page-container","root")],i);0&&(module.exports={SkdxPageContainer});

package/dist/page-container/PageContainer.d.cts

@@ -20,7 +20,7 @@ export interface SkdxPageContainerBreadcrumb {
  *
  * @example
  * ```html
- * <skdx-page-container title="Billing">
+ * <skdx-page-container heading="Billing">
  *   <skdx-button slot="actions">Export</skdx-button>
  *   <p>Invoices and payment methods.</p>
  * </skdx-page-container>
@@ -32,7 +32,7 @@ export interface SkdxPageContainerBreadcrumb {
 export declare class SkdxPageContainer extends LitElement {
     /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
     createRenderRoot(): HTMLElement | DocumentFragment;
-    /** The page heading text, rendered into a derived Heading that also names the section. */
+    /** The page heading text, rendered into a derived Heading that also names the section. The JavaScript property is `title`. */
     title: string;
     /**
      * Heading level of the derived title. A page container normally holds the page's only `<h1>`; lower it when the block sits inside a larger outline.