@jsekulowicz/ds-components 0.1.0

package/dist/organisms/sidenav/sidenav.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidenav.styles.d.ts","sourceRoot":"","sources":["../../../src/organisms/sidenav/sidenav.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,yBA4DzB,CAAC"}

package/dist/organisms/sidenav/sidenav.styles.js

@@ -0,0 +1,63 @@
+import { css } from 'lit';
+export const sidenavStyles = css `
+  :host {
+    --ds-sidenav-item-height: var(--ds-space-10, 2.5rem);
+    --ds-sidenav-item-compact-size: var(--ds-space-12, 3rem);
+    --ds-sidenav-width: var(--ds-space-64, 16rem);
+
+    display: block;
+    width: var(--ds-sidenav-width);
+    max-width: 100%;
+    transition: width var(--ds-duration-slow) var(--ds-easing-standard);
+  }
+  :host([collapsed]) {
+    --ds-sidenav-collapsed-width: var(--ds-space-14, 3.5rem);
+    justify-items: flex-start;
+    width: var(--ds-sidenav-collapsed-width);
+
+    nav {
+      width: var(--ds-sidenav-collapsed-width);
+      scrollbar-width: none;
+    }
+  }
+  nav {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: var(--ds-space-1);
+    background: var(--ds-color-bg);
+    overflow-x: clip;
+    overflow-y: auto;
+    scrollbar-color: var(--ds-color-fg-subtle) transparent;
+    scrollbar-width: thin;
+  }
+  .header {
+    padding: 0 var(--ds-space-3);
+    margin-bottom: var(--ds-space-3);
+    font-family: var(--ds-font-display);
+    font-size: var(--ds-font-size-lg);
+    color: var(--ds-color-fg);
+  }
+  .header[hidden],
+  .footer[hidden] {
+    display: none;
+  }
+  .list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ds-space-1);
+    flex: 1;
+    min-height: 0;
+  }
+  .footer {
+    margin-top: var(--ds-space-4);
+    border-top: 1px solid var(--ds-color-border);
+    display: flex;
+    flex-direction: column;
+    gap: var(--ds-space-1);
+  }
+  :host-context(ds-page-shell:not([mobile-layout])) nav {
+    border-right: 1px solid var(--ds-color-border);
+  }
+`;
+//# sourceMappingURL=sidenav.styles.js.map

package/dist/organisms/sidenav/sidenav.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidenav.styles.js","sourceRoot":"","sources":["../../../src/organisms/sidenav/sidenav.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4D/B,CAAC"}

package/dist/pages/settings-page/define.d.ts

@@ -0,0 +1,7 @@
+import { DsSettingsPage } from './settings-page.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-settings-page': DsSettingsPage;
+    }
+}
+//# sourceMappingURL=define.d.ts.map

package/dist/pages/settings-page/define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../../../src/pages/settings-page/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAMpD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/pages/settings-page/define.js

@@ -0,0 +1,5 @@
+import { DsSettingsPage } from './settings-page.js';
+if (!customElements.get('ds-settings-page')) {
+    customElements.define('ds-settings-page', DsSettingsPage);
+}
+//# sourceMappingURL=define.js.map

package/dist/pages/settings-page/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/pages/settings-page/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC5C,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;AAC5D,CAAC"}

package/dist/pages/settings-page/index.d.ts

@@ -0,0 +1,2 @@
+export { DsSettingsPage, type SettingsSection } from './settings-page.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/pages/settings-page/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pages/settings-page/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/pages/settings-page/index.js

@@ -0,0 +1,2 @@
+export { DsSettingsPage } from './settings-page.js';
+//# sourceMappingURL=index.js.map

package/dist/pages/settings-page/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/pages/settings-page/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAwB,MAAM,oBAAoB,CAAC"}

package/dist/pages/settings-page/settings-page.d.ts

@@ -0,0 +1,21 @@
+import { type TemplateResult } from 'lit';
+import { DsElement } from '@jsekulowicz/ds-core';
+export interface SettingsSection {
+    id: string;
+    label: string;
+}
+/**
+ * @tag ds-settings-page
+ * @summary Composition example — settings page with sticky nav and slotted sections.
+ * @slot default - One or more `<section id="...">` blocks matching the nav items.
+ */
+export declare class DsSettingsPage extends DsElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    heading: string;
+    description: string;
+    sections: SettingsSection[];
+    private activeId;
+    render(): TemplateResult;
+}
+//# sourceMappingURL=settings-page.d.ts.map

package/dist/pages/settings-page/settings-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-page.d.ts","sourceRoot":"","sources":["../../../src/pages/settings-page/settings-page.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGjD,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,qBAAa,cAAe,SAAQ,SAAS;;IAC3C,OAAgB,MAAM,4BAA6C;IAEvD,OAAO,SAAc;IACrB,WAAW,SAAM;IACF,QAAQ,EAAE,eAAe,EAAE,CAAM;IACnD,OAAO,CAAC,QAAQ,CAAM;IAgBtB,MAAM,IAAI,cAAc;CAwBlC"}

package/dist/pages/settings-page/settings-page.js

@@ -0,0 +1,72 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { DsElement } from '@jsekulowicz/ds-core';
+import { settingsPageStyles } from './settings-page.styles.js';
+/**
+ * @tag ds-settings-page
+ * @summary Composition example — settings page with sticky nav and slotted sections.
+ * @slot default - One or more `<section id="...">` blocks matching the nav items.
+ */
+export class DsSettingsPage extends DsElement {
+    constructor() {
+        super(...arguments);
+        this.heading = 'Settings';
+        this.description = '';
+        this.sections = [];
+        this.activeId = '';
+        this.#scrollTo = (id) => (event) => {
+            event.preventDefault();
+            this.activeId = id;
+            const target = document.getElementById(id) ?? this.querySelector(`#${this.#escapeId(id)}`);
+            target?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        };
+    }
+    static { this.styles = [...DsElement.styles, settingsPageStyles]; }
+    #escapeId(value) {
+        if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
+            return CSS.escape(value);
+        }
+        return value.replaceAll('"', '\\"');
+    }
+    #scrollTo;
+    render() {
+        const current = this.activeId || this.sections[0]?.id || '';
+        const hasNav = this.sections.length > 0;
+        return html `<header class="hero" part="hero">
+        <h1 part="heading">${this.heading}</h1>
+        ${this.description ? html `<p>${this.description}</p>` : null}
+      </header>
+      ${hasNav
+            ? html `<div class="grid">
+            <nav aria-label="Settings sections" part="nav">
+              ${this.sections.map((section) => html `<a
+                    href=${`#${section.id}`}
+                    aria-current=${section.id === current ? 'true' : 'false'}
+                    @click=${this.#scrollTo(section.id)}
+                    >${section.label}</a
+                  >`)}
+            </nav>
+            <div class="sections" part="sections"><slot></slot></div>
+          </div>`
+            : html `<div class="sections" part="sections"><slot></slot></div>`}`;
+    }
+}
+__decorate([
+    property()
+], DsSettingsPage.prototype, "heading", void 0);
+__decorate([
+    property()
+], DsSettingsPage.prototype, "description", void 0);
+__decorate([
+    property({ type: Array })
+], DsSettingsPage.prototype, "sections", void 0);
+__decorate([
+    state()
+], DsSettingsPage.prototype, "activeId", void 0);
+//# sourceMappingURL=settings-page.js.map

package/dist/pages/settings-page/settings-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-page.js","sourceRoot":"","sources":["../../../src/pages/settings-page/settings-page.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAO/D;;;;GAIG;AACH,MAAM,OAAO,cAAe,SAAQ,SAAS;IAA7C;;QAGc,YAAO,GAAG,UAAU,CAAC;QACrB,gBAAW,GAAG,EAAE,CAAC;QACF,aAAQ,GAAsB,EAAE,CAAC;QAC3C,aAAQ,GAAG,EAAE,CAAC;QAS/B,cAAS,GAAG,CAAC,EAAU,EAAE,EAAE,CAAC,CAAC,KAAiB,EAAE,EAAE;YAChD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;YACnB,MAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;YAC3F,MAAM,EAAE,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;QACjE,CAAC,CAAC;IA0BJ,CAAC;aA7CiB,WAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,kBAAkB,CAAC,AAA5C,CAA6C;IAOnE,SAAS,CAAC,KAAa;QACrB,IAAI,OAAO,GAAG,KAAK,WAAW,IAAI,OAAO,GAAG,CAAC,MAAM,KAAK,UAAU,EAAE,CAAC;YACnE,OAAO,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;QACD,OAAO,KAAK,CAAC,UAAU,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IACtC,CAAC;IAED,SAAS,CAKP;IAEO,MAAM;QACb,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,CAAC;QAC5D,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;QACxC,OAAO,IAAI,CAAA;6BACc,IAAI,CAAC,OAAO;UAC/B,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,MAAM,IAAI,CAAC,WAAW,MAAM,CAAC,CAAC,CAAC,IAAI;;QAE5D,MAAM;YACN,CAAC,CAAC,IAAI,CAAA;;gBAEE,IAAI,CAAC,QAAQ,CAAC,GAAG,CACjB,CAAC,OAAO,EAAE,EAAE,CACV,IAAI,CAAA;2BACK,IAAI,OAAO,CAAC,EAAE,EAAE;mCACR,OAAO,CAAC,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;6BAC/C,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC;uBAChC,OAAO,CAAC,KAAK;oBAChB,CACL;;;iBAGE;YACT,CAAC,CAAC,IAAI,CAAA,2DAA2D,EAAE,CAAC;IAC1E,CAAC;;AA1CW;IAAX,QAAQ,EAAE;+CAAsB;AACrB;IAAX,QAAQ,EAAE;mDAAkB;AACF;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDAAkC;AAC3C;IAAhB,KAAK,EAAE;gDAAuB"}

package/dist/pages/settings-page/settings-page.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const settingsPageStyles: import("lit").CSSResult;
+//# sourceMappingURL=settings-page.styles.d.ts.map

package/dist/pages/settings-page/settings-page.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-page.styles.d.ts","sourceRoot":"","sources":["../../../src/pages/settings-page/settings-page.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,yBAqE9B,CAAC"}

package/dist/pages/settings-page/settings-page.styles.js

@@ -0,0 +1,72 @@
+import { css } from 'lit';
+export const settingsPageStyles = css `
+  :host {
+    display: block;
+  }
+  .hero {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ds-space-2);
+    padding-bottom: var(--ds-space-6);
+    border-bottom: 1px solid var(--ds-color-border);
+  }
+  .hero .eyebrow {
+    font-size: var(--ds-font-size-2xs);
+    letter-spacing: var(--ds-letter-spacing-wide);
+    text-transform: uppercase;
+    color: var(--ds-color-accent);
+  }
+  .hero h1 {
+    font-family: var(--ds-font-display);
+    font-weight: var(--ds-font-weight-semibold);
+    margin: 0;
+  }
+  .hero p {
+    color: var(--ds-color-fg-muted);
+    font-size: var(--ds-font-size-md);
+    max-width: 52ch;
+    margin: 0;
+  }
+  .grid {
+    display: grid;
+    grid-template-columns: minmax(12rem, 16rem) 1fr;
+    gap: var(--ds-space-10);
+    padding: var(--ds-space-8) 0;
+  }
+  @media (max-width: 768px) {
+    .grid {
+      grid-template-columns: 1fr;
+      gap: var(--ds-space-6);
+      padding: var(--ds-space-5) 0;
+    }
+  }
+  nav {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ds-space-1);
+    position: sticky;
+    top: calc(var(--ds-space-10) + var(--ds-space-4));
+    align-self: start;
+  }
+  nav a {
+    padding: var(--ds-space-2) var(--ds-space-3);
+    color: var(--ds-color-fg-muted);
+    text-decoration: none;
+    border-radius: var(--ds-radius-xs);
+    font-size: var(--ds-font-size-sm);
+  }
+  nav a[aria-current='true'] {
+    color: var(--ds-color-fg);
+    background: var(--ds-color-bg-subtle);
+    font-weight: var(--ds-font-weight-medium);
+  }
+  .sections {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ds-space-6);
+  }
+  :host > .sections {
+    padding-top: var(--ds-space-8);
+  }
+`;
+//# sourceMappingURL=settings-page.styles.js.map

package/dist/pages/settings-page/settings-page.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-page.styles.js","sourceRoot":"","sources":["../../../src/pages/settings-page/settings-page.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqEpC,CAAC"}

package/dist/shared/form-field.d.ts

@@ -0,0 +1,5 @@
+import { type TemplateResult, type CSSResult } from 'lit';
+export declare const formFieldStyles: CSSResult;
+export declare function renderFieldLabel(label: string, required: boolean, forId: string, optional?: boolean): TemplateResult;
+export declare function renderSubtext(description: string, error: string, invalid: boolean): TemplateResult;
+//# sourceMappingURL=form-field.d.ts.map

package/dist/shared/form-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../src/shared/form-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,KAAK,CAAC;AAE9E,eAAO,MAAM,eAAe,EAAE,SA0C7B,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,UAAQ,GAAG,cAAc,CAUlH;AAED,wBAAgB,aAAa,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,cAAc,CAgBlG"}

package/dist/shared/form-field.js

@@ -0,0 +1,73 @@
+import { html, nothing, css } from 'lit';
+export const formFieldStyles = css `
+  .label {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--ds-space-2);
+    font-size: var(--ds-font-size-sm);
+    font-weight: var(--ds-font-weight-medium);
+    color: var(--ds-color-fg);
+    line-height: 1.4;
+    cursor: default;
+  }
+  .required {
+    color: var(--ds-color-danger);
+  }
+  .optional {
+    font-size: var(--ds-font-size-2xs);
+    color: var(--ds-color-fg-muted);
+    letter-spacing: var(--ds-letter-spacing-wide);
+    text-transform: uppercase;
+    font-weight: var(--ds-font-weight-regular);
+  }
+  .description {
+    margin: 0;
+    font-size: var(--ds-font-size-xs);
+    color: var(--ds-color-fg-muted);
+    line-height: 1.4;
+  }
+  .error {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--ds-space-1);
+    font-size: var(--ds-font-size-xs);
+    color: var(--ds-color-fg-muted);
+    line-height: 1.4;
+  }
+  .error-icon {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    color: var(--ds-color-danger);
+  }
+`;
+export function renderFieldLabel(label, required, forId, optional = false) {
+    return html `
+    <label class="label" for=${forId}>
+      <span>
+        ${label}
+        ${required ? html `<span class="required" aria-hidden="true"> *</span>` : nothing}
+      </span>
+      ${optional ? html `<span class="optional" aria-hidden="true">optional</span>` : nothing}
+    </label>
+  `;
+}
+export function renderSubtext(description, error, invalid) {
+    if (invalid && error) {
+        return html `
+      <p class="error" role="alert">
+        <!-- Heroicons 2.2.0 — 16/solid: exclamation-circle -->
+        <svg class="error-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" />
+        </svg>
+        ${error}
+      </p>
+    `;
+    }
+    if (description) {
+        return html `<p class="description">${description}</p>`;
+    }
+    return html ``;
+}
+//# sourceMappingURL=form-field.js.map

package/dist/shared/form-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../src/shared/form-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAuC,MAAM,KAAK,CAAC;AAE9E,MAAM,CAAC,MAAM,eAAe,GAAc,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0C5C,CAAC;AAEF,MAAM,UAAU,gBAAgB,CAAC,KAAa,EAAE,QAAiB,EAAE,KAAa,EAAE,QAAQ,GAAG,KAAK;IAChG,OAAO,IAAI,CAAA;+BACkB,KAAK;;UAE1B,KAAK;UACL,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,qDAAqD,CAAC,CAAC,CAAC,OAAO;;QAEhF,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,2DAA2D,CAAC,CAAC,CAAC,OAAO;;GAEzF,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,WAAmB,EAAE,KAAa,EAAE,OAAgB;IAChF,IAAI,OAAO,IAAI,KAAK,EAAE,CAAC;QACrB,OAAO,IAAI,CAAA;;;;;;UAML,KAAK;;KAEV,CAAC;IACJ,CAAC;IACD,IAAI,WAAW,EAAE,CAAC;QAChB,OAAO,IAAI,CAAA,0BAA0B,WAAW,MAAM,CAAC;IACzD,CAAC;IACD,OAAO,IAAI,CAAA,EAAE,CAAC;AAChB,CAAC"}

package/dist/shared/virtual-list.d.ts

@@ -0,0 +1,5 @@
+import { type TemplateResult } from 'lit';
+export declare const ITEM_HEIGHT = 36;
+export declare const LISTBOX_HEIGHT = 240;
+export declare function renderVirtualItems<T>(items: T[], scrollTop: number, renderItem: (item: T, index: number) => TemplateResult): TemplateResult;
+//# sourceMappingURL=virtual-list.d.ts.map

package/dist/shared/virtual-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtual-list.d.ts","sourceRoot":"","sources":["../../src/shared/virtual-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,eAAO,MAAM,cAAc,MAAM,CAAC;AAIlC,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,KAAK,EAAE,CAAC,EAAE,EACV,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,cAAc,GACrD,cAAc,CAWhB"}

package/dist/shared/virtual-list.js

@@ -0,0 +1,16 @@
+import { html } from 'lit';
+export const ITEM_HEIGHT = 36;
+export const LISTBOX_HEIGHT = 240;
+const OVERSCAN = 3;
+export function renderVirtualItems(items, scrollTop, renderItem) {
+    const startIdx = Math.max(0, Math.floor(scrollTop / ITEM_HEIGHT) - OVERSCAN);
+    const endIdx = Math.min(items.length, startIdx + Math.ceil(LISTBOX_HEIGHT / ITEM_HEIGHT) + OVERSCAN * 2);
+    const topPad = startIdx * ITEM_HEIGHT;
+    const bottomPad = (items.length - endIdx) * ITEM_HEIGHT;
+    return html `
+    <div style="height:${topPad}px" aria-hidden="true"></div>
+    ${items.slice(startIdx, endIdx).map((item, i) => renderItem(item, startIdx + i))}
+    <div style="height:${bottomPad}px" aria-hidden="true"></div>
+  `;
+}
+//# sourceMappingURL=virtual-list.js.map

package/dist/shared/virtual-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtual-list.js","sourceRoot":"","sources":["../../src/shared/virtual-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAEhD,MAAM,CAAC,MAAM,WAAW,GAAG,EAAE,CAAC;AAC9B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAC;AAElC,MAAM,QAAQ,GAAG,CAAC,CAAC;AAEnB,MAAM,UAAU,kBAAkB,CAChC,KAAU,EACV,SAAiB,EACjB,UAAsD;IAEtD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC;IAC7E,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC,GAAG,QAAQ,GAAG,CAAC,CAAC,CAAC;IACzG,MAAM,MAAM,GAAG,QAAQ,GAAG,WAAW,CAAC;IACtC,MAAM,SAAS,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,WAAW,CAAC;IAExD,OAAO,IAAI,CAAA;yBACY,MAAM;MACzB,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,QAAQ,GAAG,CAAC,CAAC,CAAC;yBAC3D,SAAS;GAC/B,CAAC;AACJ,CAAC"}

package/dist/templates/page-shell/define.d.ts

@@ -0,0 +1,7 @@
+import { DsPageShell } from './page-shell.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-page-shell': DsPageShell;
+    }
+}
+//# sourceMappingURL=define.d.ts.map

package/dist/templates/page-shell/define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../../../src/templates/page-shell/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAM9C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/templates/page-shell/define.js

@@ -0,0 +1,5 @@
+import { DsPageShell } from './page-shell.js';
+if (!customElements.get('ds-page-shell')) {
+    customElements.define('ds-page-shell', DsPageShell);
+}
+//# sourceMappingURL=define.js.map

package/dist/templates/page-shell/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/templates/page-shell/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE,CAAC;IACzC,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;AACtD,CAAC"}

package/dist/templates/page-shell/index.d.ts

@@ -0,0 +1,2 @@
+export { DsPageShell } from './page-shell.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/templates/page-shell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/page-shell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/templates/page-shell/index.js

@@ -0,0 +1,2 @@
+export { DsPageShell } from './page-shell.js';
+//# sourceMappingURL=index.js.map

package/dist/templates/page-shell/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/templates/page-shell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/templates/page-shell/page-shell.d.ts

@@ -0,0 +1,26 @@
+import { type TemplateResult } from 'lit';
+import { DsElement } from '@jsekulowicz/ds-core';
+import '../../atoms/button/define.js';
+import '../../atoms/icon/define.js';
+import '../../atoms/icon/icons/bars-3.js';
+import '../../atoms/icon/icons/x-mark.js';
+/**
+ * @tag ds-page-shell
+ * @summary Application frame: header + aside + main + footer with responsive collapse.
+ * @slot brand - Top-left brand/logo.
+ * @slot header-actions - Top-right actions.
+ * @slot aside - Side navigation.
+ * @slot default - Main content.
+ * @slot footer - Footer content.
+ */
+export declare class DsPageShell extends DsElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    brand: string;
+    menuLabel: string;
+    private _mobileNavOpen;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+}
+//# sourceMappingURL=page-shell.d.ts.map

package/dist/templates/page-shell/page-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-shell.d.ts","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kCAAkC,CAAC;AAE1C;;;;;;;;GAQG;AACH,qBAAa,WAAY,SAAQ,SAAS;;IACxC,OAAgB,MAAM,4BAA0C;IAEpD,KAAK,SAAM;IACgB,SAAS,SAAqB;IAC5D,OAAO,CAAC,cAAc,CAAS;IAG/B,iBAAiB,IAAI,IAAI;IAezB,oBAAoB,IAAI,IAAI;IAuD5B,MAAM,IAAI,cAAc;CAkDlC"}

package/dist/templates/page-shell/page-shell.js

@@ -0,0 +1,159 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { DsElement } from '@jsekulowicz/ds-core';
+import { pageShellStyles } from './page-shell.styles.js';
+import '../../atoms/button/define.js';
+import '../../atoms/icon/define.js';
+import '../../atoms/icon/icons/bars-3.js';
+import '../../atoms/icon/icons/x-mark.js';
+/**
+ * @tag ds-page-shell
+ * @summary Application frame: header + aside + main + footer with responsive collapse.
+ * @slot brand - Top-left brand/logo.
+ * @slot header-actions - Top-right actions.
+ * @slot aside - Side navigation.
+ * @slot default - Main content.
+ * @slot footer - Footer content.
+ */
+export class DsPageShell extends DsElement {
+    constructor() {
+        super(...arguments);
+        this.brand = '';
+        this.menuLabel = 'Navigation menu';
+        this._mobileNavOpen = false;
+        this.#resizeObserver = null;
+        this.#syncLayout = (width) => {
+            const isMobileLayout = width < 768;
+            this.toggleAttribute('mobile-layout', isMobileLayout);
+            if (!isMobileLayout && this._mobileNavOpen) {
+                this.#setMobileNav(false);
+            }
+        };
+        this.#onDocumentKeydown = (event) => {
+            if (event.key === 'Escape' && this._mobileNavOpen) {
+                this.#setMobileNav(false);
+            }
+        };
+        this.#setMobileNav = (open) => {
+            this._mobileNavOpen = open;
+            this.toggleAttribute('data-mobile-nav-open', open);
+            if (open) {
+                this.querySelector('[slot="aside"]')?.removeAttribute('collapsed');
+            }
+        };
+        this.#toggleMobileNav = () => {
+            this.#setMobileNav(!this._mobileNavOpen);
+        };
+        this.#closeMobileNav = () => {
+            this.#setMobileNav(false);
+        };
+        this.#onAsideClick = (event) => {
+            if (!this.hasAttribute('mobile-layout')) {
+                return;
+            }
+            const clickedNavItem = event
+                .composedPath()
+                .some((node) => node instanceof HTMLElement &&
+                (node.tagName === 'DS-NAV-ITEM' ||
+                    node.tagName === 'A' ||
+                    node.getAttribute('href') !== null));
+            if (clickedNavItem) {
+                this.#closeMobileNav();
+            }
+        };
+    }
+    static { this.styles = [...DsElement.styles, pageShellStyles]; }
+    #resizeObserver;
+    connectedCallback() {
+        super.connectedCallback();
+        this.#setMobileNav(false);
+        document.addEventListener('keydown', this.#onDocumentKeydown);
+        this.#resizeObserver = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (!entry) {
+                return;
+            }
+            this.#syncLayout(entry.contentRect.width);
+        });
+        this.#resizeObserver.observe(this);
+        this.#syncLayout(this.getBoundingClientRect().width);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('keydown', this.#onDocumentKeydown);
+        this.#resizeObserver?.disconnect();
+        this.#resizeObserver = null;
+    }
+    #syncLayout;
+    #onDocumentKeydown;
+    #setMobileNav;
+    #toggleMobileNav;
+    #closeMobileNav;
+    #onAsideClick;
+    render() {
+        const menuIcon = this._mobileNavOpen ? 'x-mark' : 'bars-3';
+        const ariaExpanded = this._mobileNavOpen ? 'true' : 'false';
+        return html `<header part="header">
+        <ds-button
+          class="menu-toggle"
+          variant="ghost"
+          size="sm"
+          label=${this.menuLabel}
+          aria-label=${this.menuLabel}
+          aria-expanded=${ariaExpanded}
+          aria-controls="mobile-aside"
+          @click=${this.#toggleMobileNav}
+        >
+          <ds-icon slot="leading" name=${menuIcon} size="lg"></ds-icon>
+        </ds-button>
+        <div class="brand">
+          <slot name="brand">${this.brand}</slot>
+        </div>
+        <div><slot name="header-actions"></slot></div>
+      </header>
+      <button
+        class="mobile-backdrop"
+        type="button"
+        aria-label="Close navigation"
+        ?hidden=${!this._mobileNavOpen}
+        @click=${this.#closeMobileNav}
+      ></button>
+      <aside id="mobile-aside" part="aside" @click=${this.#onAsideClick}>
+        <div class="drawer-header">
+          <ds-button
+            class="drawer-close"
+            variant="ghost"
+            size="sm"
+            label="Close navigation"
+            aria-label="Close navigation"
+            @click=${this.#closeMobileNav}
+          >
+            <ds-icon slot="leading" name="x-mark" size="lg"></ds-icon>
+          </ds-button>
+        </div>
+        <slot name="aside"></slot>
+      </aside>
+      <main part="main">
+        <slot></slot>
+      </main>
+      <footer part="footer">
+        <slot name="footer"></slot>
+      </footer>`;
+    }
+}
+__decorate([
+    property()
+], DsPageShell.prototype, "brand", void 0);
+__decorate([
+    property({ attribute: 'menu-label' })
+], DsPageShell.prototype, "menuLabel", void 0);
+__decorate([
+    state()
+], DsPageShell.prototype, "_mobileNavOpen", void 0);
+//# sourceMappingURL=page-shell.js.map