@skdx/web-components-blocks 0.1.0

package/dist/dashboard-layout/DashboardLayout.cjs

@@ -0,0 +1,50 @@
+"use strict";var s=Object.defineProperty;var h=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,i)=>{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:!(i=h(e,r))||i.enumerable});return n};var x=n=>k(s({},"__esModule",{value:!0}),n),l=(n,e,a,i)=>{for(var r=i>1?void 0:i?h(e,a):e,v=n.length-1,u;v>=0;v--)(u=n[v])&&(r=(i?u(e,a,r):u(r))||r);return i&&r&&s(e,a,r),r};var N={};y(N,{SkdxDashboardLayout:()=>o});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,o=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(i=>this.navItem(i))}
+    </ul>`}navItem(a){return a.kind==="divider"?t.html`<li
+        role="separator"
+        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>
+        <a
+          class="skdx-dashboard-layout__nav-item"
+          href=${a.href}
+          aria-current=${a.current?"page":t.nothing}
+          >${a.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`
+      <header
+        class="skdx-dashboard-layout__app-bar"
+        data-skdx-dashboard-layout-generated
+      >
+        <button
+          class="skdx-button skdx-dashboard-layout__nav-toggle"
+          type="button"
+          data-icon-only
+          aria-expanded=${a?"true":"false"}
+          aria-controls=${this.navId}
+          aria-label=${this.navToggleLabel}
+          @click=${this.toggleNav}
+        >
+          ☰
+        </button>
+        <div class="skdx-dashboard-layout__branding"></div>
+        ${this.title?t.html`<span class="skdx-dashboard-layout__title">${this.title}</span>`:t.nothing}
+        <div class="skdx-dashboard-layout__actions"></div>
+      </header>
+      <div
+        class="skdx-dashboard-layout__body"
+        data-skdx-dashboard-layout-generated
+      >
+        <nav
+          id=${this.navId}
+          class="skdx-dashboard-layout__nav"
+          aria-label=${this.navLabel}
+          ?hidden=${!a}
+        >
+          ${this.navList(this.navigation??[])}
+        </nav>
+        <main class="skdx-dashboard-layout__content"></main>
+      </div>
+    `}};l([(0,d.property)({type:String})],o.prototype,"title",2),l([(0,d.property)({attribute:!1})],o.prototype,"navigation",2),l([(0,d.property)({converter:p,attribute:"nav-open"})],o.prototype,"navOpen",2),l([(0,d.property)({converter:p,attribute:"default-nav-open"})],o.prototype,"defaultNavOpen",2),l([(0,d.property)({type:String,attribute:"nav-label"})],o.prototype,"navLabel",2),l([(0,d.property)({type:String,attribute:"nav-toggle-label"})],o.prototype,"navToggleLabel",2),o=l([(0,c.customElement)("skdx-dashboard-layout","dashboard-layout","root")],o);0&&(module.exports={SkdxDashboardLayout});

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

@@ -0,0 +1,87 @@
+import { LitElement, 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' */
+    kind?: 'item' | 'header' | 'divider';
+    /** The entry's visible text; a divider carries none. @default undefined */
+    label?: string;
+    /** Where the entry navigates; without it the entry is a plain label row. @default undefined */
+    href?: string;
+    /** Marks the entry as the current page, emitting `aria-current="page"`. @default false */
+    current?: boolean;
+    /** Entries nested under this one, rendered as a list inside its row. @default undefined */
+    children?: readonly SkdxDashboardNavigationItem[];
+}
+/**
+ * Application shell block: an app bar, a collapsible side navigation and the content region.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-dashboard-layout` on the host, then `__app-bar`,
+ * `__nav-toggle`, `__branding`, `__title`, `__actions`, `__body`, `__nav`,
+ * `__nav-list`, `__nav-item`, `__nav-header`, `__nav-divider` and `__content`.
+ * `data-nav-open` sits on the host while the navigation is shown.
+ *
+ * @example
+ * ```html
+ * <skdx-dashboard-layout id="shell" title="Acme">
+ *   <p>Dashboard content.</p>
+ * </skdx-dashboard-layout>
+ * <script>
+ *   document.getElementById('shell').navigation = [{ label: 'Home', href: '#', current: true }];
+ * </script>
+ * ```
+ *
+ * @slot - The page content rendered inside the `<main>` region.
+ * @slot branding - Logo or product mark at the start of the app bar.
+ * @slot actions - Controls at the end of the app bar.
+ * @fires nav-open-change - Fires with the new open state whenever the navigation toggle is activated.
+ */
+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.
+     * @default '' — no title renders.
+     */
+    title: string;
+    /** The side navigation, one entry per row, nested through each entry's `children`. */
+    navigation: readonly SkdxDashboardNavigationItem[];
+    /**
+     * Whether the side navigation is shown, for controlled usage.
+     * @default undefined — uncontrolled, following `defaultNavOpen`.
+     */
+    navOpen?: boolean;
+    /**
+     * Whether the side navigation starts shown, for uncontrolled usage.
+     * @default true
+     */
+    defaultNavOpen: boolean;
+    /**
+     * Accessible name of the side navigation landmark.
+     * @default 'Main navigation'
+     */
+    navLabel: string;
+    /**
+     * Accessible name of the icon-only button that shows and hides the navigation.
+     * @default 'Toggle navigation'
+     */
+    navToggleLabel: string;
+    /** Generated navigation id, published as the toggle's `aria-controls`. */
+    private readonly navId;
+    /** What the toggle last chose; outranked by `navOpen` whenever the consumer controls the state. */
+    private uncontrolledNavOpen?;
+    /** Whether the navigation is shown right now, controlled or not. */
+    private get open();
+    connectedCallback(): void;
+    private readonly toggleNav;
+    private region;
+    protected updated(): void;
+    private navList;
+    private navItem;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-dashboard-layout': SkdxDashboardLayout;
+    }
+}

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

@@ -0,0 +1,87 @@
+import { LitElement, 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' */
+    kind?: 'item' | 'header' | 'divider';
+    /** The entry's visible text; a divider carries none. @default undefined */
+    label?: string;
+    /** Where the entry navigates; without it the entry is a plain label row. @default undefined */
+    href?: string;
+    /** Marks the entry as the current page, emitting `aria-current="page"`. @default false */
+    current?: boolean;
+    /** Entries nested under this one, rendered as a list inside its row. @default undefined */
+    children?: readonly SkdxDashboardNavigationItem[];
+}
+/**
+ * Application shell block: an app bar, a collapsible side navigation and the content region.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-dashboard-layout` on the host, then `__app-bar`,
+ * `__nav-toggle`, `__branding`, `__title`, `__actions`, `__body`, `__nav`,
+ * `__nav-list`, `__nav-item`, `__nav-header`, `__nav-divider` and `__content`.
+ * `data-nav-open` sits on the host while the navigation is shown.
+ *
+ * @example
+ * ```html
+ * <skdx-dashboard-layout id="shell" title="Acme">
+ *   <p>Dashboard content.</p>
+ * </skdx-dashboard-layout>
+ * <script>
+ *   document.getElementById('shell').navigation = [{ label: 'Home', href: '#', current: true }];
+ * </script>
+ * ```
+ *
+ * @slot - The page content rendered inside the `<main>` region.
+ * @slot branding - Logo or product mark at the start of the app bar.
+ * @slot actions - Controls at the end of the app bar.
+ * @fires nav-open-change - Fires with the new open state whenever the navigation toggle is activated.
+ */
+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.
+     * @default '' — no title renders.
+     */
+    title: string;
+    /** The side navigation, one entry per row, nested through each entry's `children`. */
+    navigation: readonly SkdxDashboardNavigationItem[];
+    /**
+     * Whether the side navigation is shown, for controlled usage.
+     * @default undefined — uncontrolled, following `defaultNavOpen`.
+     */
+    navOpen?: boolean;
+    /**
+     * Whether the side navigation starts shown, for uncontrolled usage.
+     * @default true
+     */
+    defaultNavOpen: boolean;
+    /**
+     * Accessible name of the side navigation landmark.
+     * @default 'Main navigation'
+     */
+    navLabel: string;
+    /**
+     * Accessible name of the icon-only button that shows and hides the navigation.
+     * @default 'Toggle navigation'
+     */
+    navToggleLabel: string;
+    /** Generated navigation id, published as the toggle's `aria-controls`. */
+    private readonly navId;
+    /** What the toggle last chose; outranked by `navOpen` whenever the consumer controls the state. */
+    private uncontrolledNavOpen?;
+    /** Whether the navigation is shown right now, controlled or not. */
+    private get open();
+    connectedCallback(): void;
+    private readonly toggleNav;
+    private region;
+    protected updated(): void;
+    private navList;
+    private navItem;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-dashboard-layout': SkdxDashboardLayout;
+    }
+}

package/dist/dashboard-layout/DashboardLayout.js

@@ -0,0 +1,50 @@
+var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var t=(l,d,a,o)=>{for(var n=o>1?void 0:o?c(d,a):d,s=l.length-1,v;s>=0;s--)(v=l[s])&&(n=(o?v(d,a,n):v(n))||n);return o&&n&&p(d,a,n),n};import{html as r,LitElement as b,nothing as u}from"lit";import{property as i}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",h={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(o=>this.navItem(o))}
+    </ul>`}navItem(a){return a.kind==="divider"?r`<li
+        role="separator"
+        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>
+        <a
+          class="skdx-dashboard-layout__nav-item"
+          href=${a.href}
+          aria-current=${a.current?"page":u}
+          >${a.label??""}</a
+        >
+      </li>`:r`<li>
+      <span class="skdx-dashboard-layout__nav-item">${a.label??""}</span>
+      ${a.children?.length?this.navList(a.children):u}
+    </li>`}render(){let a=this.open;return r`
+      <header
+        class="skdx-dashboard-layout__app-bar"
+        data-skdx-dashboard-layout-generated
+      >
+        <button
+          class="skdx-button skdx-dashboard-layout__nav-toggle"
+          type="button"
+          data-icon-only
+          aria-expanded=${a?"true":"false"}
+          aria-controls=${this.navId}
+          aria-label=${this.navToggleLabel}
+          @click=${this.toggleNav}
+        >
+          ☰
+        </button>
+        <div class="skdx-dashboard-layout__branding"></div>
+        ${this.title?r`<span class="skdx-dashboard-layout__title">${this.title}</span>`:u}
+        <div class="skdx-dashboard-layout__actions"></div>
+      </header>
+      <div
+        class="skdx-dashboard-layout__body"
+        data-skdx-dashboard-layout-generated
+      >
+        <nav
+          id=${this.navId}
+          class="skdx-dashboard-layout__nav"
+          aria-label=${this.navLabel}
+          ?hidden=${!a}
+        >
+          ${this.navList(this.navigation??[])}
+        </nav>
+        <main class="skdx-dashboard-layout__content"></main>
+      </div>
+    `}};t([i({type:String})],e.prototype,"title",2),t([i({attribute:!1})],e.prototype,"navigation",2),t([i({converter:h,attribute:"nav-open"})],e.prototype,"navOpen",2),t([i({converter:h,attribute:"default-nav-open"})],e.prototype,"defaultNavOpen",2),t([i({type:String,attribute:"nav-label"})],e.prototype,"navLabel",2),t([i({type:String,attribute:"nav-toggle-label"})],e.prototype,"navToggleLabel",2),e=t([g("skdx-dashboard-layout","dashboard-layout","root")],e);export{e as SkdxDashboardLayout};

package/dist/dashboard-layout/index.cjs

@@ -0,0 +1 @@
+"use strict";var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var i=Object.prototype.hasOwnProperty;var k=(o,a)=>{for(var d in a)r(o,d,{get:a[d],enumerable:!0})},m=(o,a,d,e)=>{if(a&&typeof a=="object"||typeof a=="function")for(let t of h(a))!i.call(o,t)&&t!==d&&r(o,t,{get:()=>a[t],enumerable:!(e=b(a,t))||e.enumerable});return o};var p=o=>m(r({},"__esModule",{value:!0}),o);var s={};k(s,{SkdxDashboardLayout:()=>x.SkdxDashboardLayout});module.exports=p(s);var x=require("./DashboardLayout.cjs");0&&(module.exports={SkdxDashboardLayout});

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

@@ -0,0 +1 @@
+export { SkdxDashboardLayout, type SkdxDashboardNavigationItem } from './DashboardLayout.cjs';

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

@@ -0,0 +1 @@
+export { SkdxDashboardLayout, type SkdxDashboardNavigationItem } from './DashboardLayout.js';

package/dist/dashboard-layout/index.js

@@ -0,0 +1 @@
+import{SkdxDashboardLayout as t}from"./DashboardLayout.js";export{t as SkdxDashboardLayout};

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";var d=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var p=(a,e)=>{for(var o in e)d(a,o,{get:e[o],enumerable:!0})},m=(a,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of g(e))!k.call(a,r)&&r!==o&&d(a,r,{get:()=>e[r],enumerable:!(n=S(e,r))||n.enumerable});return a};var y=a=>m(d({},"__esModule",{value:!0}),a);var P={};p(P,{SkdxDashboardLayout:()=>i.SkdxDashboardLayout,SkdxPageContainer:()=>x.SkdxPageContainer,SkdxSignInPage:()=>t.SkdxSignInPage,defaultProviderLabel:()=>t.defaultProviderLabel});module.exports=y(P);var i=require("./dashboard-layout/index.cjs"),x=require("./page-container/index.cjs"),t=require("./sign-in-page/index.cjs");0&&(module.exports={SkdxDashboardLayout,SkdxPageContainer,SkdxSignInPage,defaultProviderLabel});

package/dist/index.d.cts

@@ -0,0 +1,3 @@
+export { SkdxDashboardLayout, type SkdxDashboardNavigationItem } from './dashboard-layout/index.cjs';
+export { SkdxPageContainer, type SkdxPageContainerBreadcrumb } from './page-container/index.cjs';
+export { defaultProviderLabel, SkdxSignInPage, type SkdxSignInDetail, type SkdxSignInProvider, } from './sign-in-page/index.cjs';

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { SkdxDashboardLayout, type SkdxDashboardNavigationItem } from './dashboard-layout/index.js';
+export { SkdxPageContainer, type SkdxPageContainerBreadcrumb } from './page-container/index.js';
+export { defaultProviderLabel, SkdxSignInPage, type SkdxSignInDetail, type SkdxSignInProvider, } from './sign-in-page/index.js';

package/dist/index.js

@@ -0,0 +1 @@
+import{SkdxDashboardLayout as r}from"./dashboard-layout/index.js";import{SkdxPageContainer as t}from"./page-container/index.js";import{defaultProviderLabel as n,SkdxSignInPage as i}from"./sign-in-page/index.js";export{r as SkdxDashboardLayout,t as SkdxPageContainer,i as SkdxSignInPage,n as defaultProviderLabel};

package/dist/internal/define.cjs

@@ -0,0 +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});

package/dist/internal/define.d.cts

@@ -0,0 +1,8 @@
+import type { CustomElementDecorator } from 'lit/decorators.js';
+/**
+ * Decorator that registers `tagName` once — skipping a tag another copy of this
+ * package already defined — and applies the block's host class and `data-part`
+ * on connect.
+ * @internal
+ */
+export declare const customElement: (tagName: string, component: string, part: string) => CustomElementDecorator;

package/dist/internal/define.d.ts

@@ -0,0 +1,8 @@
+import type { CustomElementDecorator } from 'lit/decorators.js';
+/**
+ * Decorator that registers `tagName` once — skipping a tag another copy of this
+ * package already defined — and applies the block's host class and `data-part`
+ * on connect.
+ * @internal
+ */
+export declare const customElement: (tagName: string, component: string, part: string) => CustomElementDecorator;

package/dist/internal/define.js

@@ -0,0 +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};

package/dist/internal/events.cjs

@@ -0,0 +1 @@
+"use strict";var i=Object.defineProperty;var r=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var T=(e,t)=>{for(var o in t)i(e,o,{get:t[o],enumerable:!0})},E=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of u(t))!v.call(e,n)&&n!==o&&i(e,n,{get:()=>t[n],enumerable:!(s=r(t,n))||s.enumerable});return e};var a=e=>E(i({},"__esModule",{value:!0}),e);var d={};T(d,{emit:()=>c});module.exports=a(d);function c(e,t,o,s){let n=new CustomEvent(t,{detail:o,bubbles:!0,composed:!0,...s});return e.dispatchEvent(n),n}0&&(module.exports={emit});

package/dist/internal/events.d.cts

@@ -0,0 +1,12 @@
+/**
+ * Dispatches `name` on `host` as a `CustomEvent`, defaulting to this package's
+ * `{ bubbles: true, composed: true }` so a public event reaches a listener bound
+ * on an ancestor.
+ *
+ * @param detail - the event's `detail`; omit for a `CustomEvent<void>`.
+ * @param init - overrides merged over the defaults, for `cancelable` or a
+ * deliberately non-bubbling event.
+ * @returns the dispatched event, so a caller can read `defaultPrevented`.
+ * @internal
+ */
+export declare function emit<T = void>(host: EventTarget, name: string, detail?: T, init?: EventInit): CustomEvent<T>;

package/dist/internal/events.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Dispatches `name` on `host` as a `CustomEvent`, defaulting to this package's
+ * `{ bubbles: true, composed: true }` so a public event reaches a listener bound
+ * on an ancestor.
+ *
+ * @param detail - the event's `detail`; omit for a `CustomEvent<void>`.
+ * @param init - overrides merged over the defaults, for `cancelable` or a
+ * deliberately non-bubbling event.
+ * @returns the dispatched event, so a caller can read `defaultPrevented`.
+ * @internal
+ */
+export declare function emit<T = void>(host: EventTarget, name: string, detail?: T, init?: EventInit): CustomEvent<T>;

package/dist/internal/events.js

@@ -0,0 +1 @@
+function i(e,n,o,s){let t=new CustomEvent(n,{detail:o,bubbles:!0,composed:!0,...s});return e.dispatchEvent(t),t}export{i as emit};

package/dist/internal/part.cjs

@@ -0,0 +1 @@
+"use strict";var e=Object.defineProperty;var r=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var l=(a,t)=>{for(var s in t)e(a,s,{get:t[s],enumerable:!0})},u=(a,t,s,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let d of n(t))!p.call(a,d)&&d!==s&&e(a,d,{get:()=>t[d],enumerable:!(i=r(t,d))||i.enumerable});return a};var x=a=>u(e({},"__esModule",{value:!0}),a);var c={};l(c,{applyHostPart:()=>b});module.exports=x(c);function b(a,t,s){a.classList.add(`skdx-${t}`),a.setAttribute("data-part",s),a.setAttribute("data-skdx-component",t)}0&&(module.exports={applyHostPart});

package/dist/internal/part.d.cts

@@ -0,0 +1,10 @@
+/**
+ * Adds a block's styling hooks to its host through `classList.add`, so a consumer's own classes survive.
+ * Every block element is its family's root, so the class is the bare family name.
+ *
+ * @param host - The custom element itself.
+ * @param component - Family name in kebab-case, e.g. `'page-container'`.
+ * @param part - Part name written to `data-part`, always `'root'` here.
+ * @internal
+ */
+export declare function applyHostPart(host: HTMLElement, component: string, part: string): void;

package/dist/internal/part.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Adds a block's styling hooks to its host through `classList.add`, so a consumer's own classes survive.
+ * Every block element is its family's root, so the class is the bare family name.
+ *
+ * @param host - The custom element itself.
+ * @param component - Family name in kebab-case, e.g. `'page-container'`.
+ * @param part - Part name written to `data-part`, always `'root'` here.
+ * @internal
+ */
+export declare function applyHostPart(host: HTMLElement, component: string, part: string): void;

package/dist/internal/part.js

@@ -0,0 +1 @@
+function d(t,a,s){t.classList.add(`skdx-${a}`),t.setAttribute("data-part",s),t.setAttribute("data-skdx-component",a)}export{d as applyHostPart};

package/dist/internal/slots.cjs

@@ -0,0 +1 @@
+"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var E=(n,e)=>{for(var o in e)d(n,o,{get:e[o],enumerable:!0})},a=(n,e,o,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of s(e))!u.call(n,t)&&t!==o&&d(n,t,{get:()=>e[t],enumerable:!(l=c(e,t))||l.enumerable});return n};var m=n=>a(d({},"__esModule",{value:!0}),n);var f={};E(f,{placeSlotted:()=>p});module.exports=m(f);function p(n,e,o,l){for(let t of Array.from(n.childNodes)){if(t.nodeType===Node.COMMENT_NODE)continue;if(t.nodeType!==Node.ELEMENT_NODE){t.textContent?.trim()&&l?.append(t);continue}let i=t;if(i.hasAttribute(e))continue;let r=i.getAttribute("slot");(r===null?l:o[r]??null)?.append(i)}}0&&(module.exports={placeSlotted});

package/dist/internal/slots.d.cts

@@ -0,0 +1,9 @@
+/**
+ * Moves a block's consumer children into the regions it generated: an element
+ * carrying `slot="name"` goes to `regions[name]`, everything else to `fallback`.
+ * A block renders light DOM, where `<slot>` is inert, so placement is a move.
+ *
+ * A node whose region has not rendered yet is left where it is, for the next pass.
+ * @internal
+ */
+export declare function placeSlotted(host: HTMLElement, marker: string, regions: Readonly<Record<string, HTMLElement | null>>, fallback: HTMLElement | null): void;

package/dist/internal/slots.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Moves a block's consumer children into the regions it generated: an element
+ * carrying `slot="name"` goes to `regions[name]`, everything else to `fallback`.
+ * A block renders light DOM, where `<slot>` is inert, so placement is a move.
+ *
+ * A node whose region has not rendered yet is left where it is, for the next pass.
+ * @internal
+ */
+export declare function placeSlotted(host: HTMLElement, marker: string, regions: Readonly<Record<string, HTMLElement | null>>, fallback: HTMLElement | null): void;

package/dist/internal/slots.js

@@ -0,0 +1 @@
+function c(l,i,d,n){for(let e of Array.from(l.childNodes)){if(e.nodeType===Node.COMMENT_NODE)continue;if(e.nodeType!==Node.ELEMENT_NODE){e.textContent?.trim()&&n?.append(e);continue}let t=e;if(t.hasAttribute(i))continue;let o=t.getAttribute("slot");(o===null?n:d[o]??null)?.append(t)}}export{c as placeSlotted};

package/dist/page-container/PageContainer.cjs

@@ -0,0 +1,29 @@
+"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})},v=(r,e,a,s)=>{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:!(s=p(e,t))||s.enumerable});return r};var x=r=>v(d({},"__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&&d(e,a,t),t};var L={};k(L,{SkdxPageContainer:()=>i});module.exports=x(L);var n=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 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"]')!==null}region(a){return this.querySelector(`.skdx-page-container__${a}`)}updated(){(0,u.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?n.html`<skdx-breadcrumb
+                class="skdx-page-container__breadcrumbs"
+                label=${this.breadcrumbLabel}
+                .items=${this.breadcrumbs}
+              ></skdx-breadcrumb>`:n.nothing}
+        <div class="skdx-page-container__heading-row">
+          <skdx-heading
+            class="skdx-page-container__title"
+            as=${`h${this.headingLevel}`}
+            id=${this.titleId}
+            >${this.title??""}</skdx-heading
+          >
+          ${this.hasActions?n.html`<skdx-toolbar
+                  class="skdx-page-container__actions"
+                  aria-label=${this.actionsLabel}
+                ></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});

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

@@ -0,0 +1,70 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/breadcrumb';
+import '@skdx/web-components/heading';
+import '@skdx/web-components/toolbar';
+/** One crumb of a `<skdx-page-container>` trail, ancestor first. */
+export interface SkdxPageContainerBreadcrumb {
+    /** The crumb's text. */
+    label: string;
+    /** Where the crumb navigates; without it the crumb is non-navigable current-page text. @default undefined */
+    href?: string;
+    /** Marks a navigable crumb as the current page, emitting `aria-current="page"`. @default false */
+    current?: boolean;
+}
+/**
+ * Page header block: a breadcrumb trail, a heading and page-level actions above the page content.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-page-container` on the host, then `__header`,
+ * `__breadcrumbs`, `__heading-row`, `__title`, `__actions` and `__content`.
+ *
+ * @example
+ * ```html
+ * <skdx-page-container title="Billing">
+ *   <skdx-button slot="actions">Export</skdx-button>
+ *   <p>Invoices and payment methods.</p>
+ * </skdx-page-container>
+ * ```
+ *
+ * @slot - The page content below the header.
+ * @slot actions - Controls placed in the toolbar beside the heading.
+ */
+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. */
+    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.
+     * @default 1
+     */
+    headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Trail rendered into a derived Breadcrumb above the heading.
+     * @default undefined — no breadcrumb region renders.
+     */
+    breadcrumbs?: readonly SkdxPageContainerBreadcrumb[];
+    /**
+     * Accessible name of the derived breadcrumb `<nav>` landmark.
+     * @default 'Breadcrumb'
+     */
+    breadcrumbLabel: string;
+    /**
+     * Accessible name of the derived actions Toolbar beside the heading.
+     * @default 'Page actions'
+     */
+    actionsLabel: string;
+    /** Generated title id, published as the section's `aria-labelledby`. */
+    private readonly titleId;
+    connectedCallback(): void;
+    /** Whether the consumer supplied anything for the toolbar — still true once it has been moved in. */
+    private get hasActions();
+    private region;
+    protected updated(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-page-container': SkdxPageContainer;
+    }
+}

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

@@ -0,0 +1,70 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/breadcrumb';
+import '@skdx/web-components/heading';
+import '@skdx/web-components/toolbar';
+/** One crumb of a `<skdx-page-container>` trail, ancestor first. */
+export interface SkdxPageContainerBreadcrumb {
+    /** The crumb's text. */
+    label: string;
+    /** Where the crumb navigates; without it the crumb is non-navigable current-page text. @default undefined */
+    href?: string;
+    /** Marks a navigable crumb as the current page, emitting `aria-current="page"`. @default false */
+    current?: boolean;
+}
+/**
+ * Page header block: a breadcrumb trail, a heading and page-level actions above the page content.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-page-container` on the host, then `__header`,
+ * `__breadcrumbs`, `__heading-row`, `__title`, `__actions` and `__content`.
+ *
+ * @example
+ * ```html
+ * <skdx-page-container title="Billing">
+ *   <skdx-button slot="actions">Export</skdx-button>
+ *   <p>Invoices and payment methods.</p>
+ * </skdx-page-container>
+ * ```
+ *
+ * @slot - The page content below the header.
+ * @slot actions - Controls placed in the toolbar beside the heading.
+ */
+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. */
+    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.
+     * @default 1
+     */
+    headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Trail rendered into a derived Breadcrumb above the heading.
+     * @default undefined — no breadcrumb region renders.
+     */
+    breadcrumbs?: readonly SkdxPageContainerBreadcrumb[];
+    /**
+     * Accessible name of the derived breadcrumb `<nav>` landmark.
+     * @default 'Breadcrumb'
+     */
+    breadcrumbLabel: string;
+    /**
+     * Accessible name of the derived actions Toolbar beside the heading.
+     * @default 'Page actions'
+     */
+    actionsLabel: string;
+    /** Generated title id, published as the section's `aria-labelledby`. */
+    private readonly titleId;
+    connectedCallback(): void;
+    /** Whether the consumer supplied anything for the toolbar — still true once it has been moved in. */
+    private get hasActions();
+    private region;
+    protected updated(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-page-container': SkdxPageContainer;
+    }
+}