@ismail-elkorchi/ui-shell 0.1.0 → 0.1.1

package/dist/src/structures/uik-shell-activity-bar.js

@@ -0,0 +1,272 @@
+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 { LitElement, html, nothing, svg } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import '@ismail-elkorchi/ui-primitives/uik-button';
+import { ensureLightDomRoot, LightDomSlotController } from '../internal/light-dom-slot-controller';
+let UikShellActivityBar = class UikShellActivityBar extends LitElement {
+    #items_accessor_storage = [];
+    get items() { return this.#items_accessor_storage; }
+    set items(value) { this.#items_accessor_storage = value; }
+    #activeId_accessor_storage = '';
+    get activeId() { return this.#activeId_accessor_storage; }
+    set activeId(value) { this.#activeId_accessor_storage = value; }
+    #focusedId_accessor_storage = '';
+    get focusedId() { return this.#focusedId_accessor_storage; }
+    set focusedId(value) { this.#focusedId_accessor_storage = value; }
+    slotController;
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.style.display)
+            this.style.display = 'block';
+        if (!this.style.boxSizing)
+            this.style.boxSizing = 'border-box';
+        if (!this.style.height)
+            this.style.height = '100%';
+        this.slotController ??= new LightDomSlotController(this, '[data-shell-root]', [{ name: 'footer', containerSelector: '[data-shell-slot="footer"]' }]);
+        this.slotController.connect();
+    }
+    disconnectedCallback() {
+        this.slotController?.disconnect();
+        super.disconnectedCallback();
+    }
+    firstUpdated() {
+        this.slotController?.sync();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('items')) {
+            const hasFocused = this.items.some(item => item.id === this.focusedId);
+            if (!hasFocused) {
+                this.focusedId = this.resolveDefaultFocusId();
+            }
+        }
+        if (changedProperties.has('activeId') && this.activeId && !this.contains(document.activeElement)) {
+            this.focusedId = this.resolveDefaultFocusId();
+        }
+    }
+    createRenderRoot() {
+        return ensureLightDomRoot(this);
+    }
+    emitSelect(id) {
+        this.dispatchEvent(new CustomEvent('activity-bar-select', { detail: { id }, bubbles: true, composed: true }));
+    }
+    resolveDefaultFocusId() {
+        if (this.activeId && this.items.some(item => item.id === this.activeId))
+            return this.activeId;
+        return this.items[0]?.id ?? '';
+    }
+    focusItemById(id) {
+        const root = this.renderRoot;
+        const button = root?.querySelector(`uik-button[data-activity-id="${id}"]`);
+        button?.focus();
+    }
+    renderIcon(item) {
+        if (!item.icon) {
+            return html `<span
+        part="item-icon"
+        aria-hidden="true"
+        style=${styleMap({
+                fontSize: 'var(--uik-typography-font-size-1)',
+                fontWeight: 'var(--uik-typography-font-weight-semibold)',
+                lineHeight: 'var(--uik-typography-line-height-1)',
+            })}>
+        ${item.label.charAt(0).toUpperCase()}
+      </span>`;
+        }
+        if (typeof item.icon === 'string') {
+            return svg `<path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="var(--uik-border-width-1)"
+        d=${item.icon}></path>`;
+        }
+        return item.icon;
+    }
+    onItemClick = (event) => {
+        const currentTarget = event.currentTarget;
+        if (!(currentTarget instanceof HTMLElement))
+            return;
+        const { activityId } = currentTarget.dataset;
+        if (!activityId)
+            return;
+        this.emitSelect(activityId);
+    };
+    onItemFocus = (event) => {
+        const currentTarget = event.currentTarget;
+        if (!(currentTarget instanceof HTMLElement))
+            return;
+        const { activityId } = currentTarget.dataset;
+        if (!activityId)
+            return;
+        this.focusedId = activityId;
+    };
+    onItemKeydown = (event) => {
+        const currentTarget = event.currentTarget;
+        if (!(currentTarget instanceof HTMLElement))
+            return;
+        const { index } = currentTarget.dataset;
+        if (!index)
+            return;
+        const currentIndex = Number(index);
+        if (!Number.isFinite(currentIndex))
+            return;
+        const lastIndex = this.items.length - 1;
+        if (lastIndex < 0)
+            return;
+        let nextIndex = currentIndex;
+        switch (event.key) {
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                nextIndex = Math.max(0, currentIndex - 1);
+                break;
+            case 'ArrowDown':
+            case 'ArrowRight':
+                nextIndex = Math.min(lastIndex, currentIndex + 1);
+                break;
+            case 'Home':
+                nextIndex = 0;
+                break;
+            case 'End':
+                nextIndex = lastIndex;
+                break;
+            default:
+                return;
+        }
+        if (nextIndex === currentIndex)
+            return;
+        event.preventDefault();
+        const nextItem = this.items[nextIndex];
+        if (!nextItem)
+            return;
+        this.focusedId = nextItem.id;
+        void this.updateComplete.then(() => {
+            this.focusItemById(nextItem.id);
+        });
+    };
+    renderItem(item, index, focusId) {
+        const isActive = this.activeId === item.id;
+        const isFocused = focusId === item.id;
+        const itemStyles = {
+            width: 'var(--uik-size-control-lg)',
+            height: 'var(--uik-size-control-lg)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            position: 'relative',
+        };
+        const indicatorStyles = {
+            position: 'absolute',
+            insetInlineStart: 'var(--uik-space-0)',
+            insetBlock: 'var(--uik-space-0)',
+            width: 'var(--uik-border-width-2)',
+            backgroundColor: 'oklch(var(--uik-intent-primary-bg-default))',
+            borderTopRightRadius: 'var(--uik-radius-1)',
+            borderBottomRightRadius: 'var(--uik-radius-1)',
+        };
+        const iconStyles = {
+            width: 'var(--uik-size-icon-md)',
+            height: 'var(--uik-size-icon-md)',
+        };
+        const iconContent = this.renderIcon(item);
+        const iconTemplate = item.icon
+            ? html `<svg
+          part="item-icon"
+          aria-hidden="true"
+          style=${styleMap(iconStyles)}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24">
+          ${iconContent}
+        </svg>`
+            : iconContent;
+        return html `
+      <div part="item" style=${styleMap(itemStyles)}>
+        ${isActive ? html `<div part="item-indicator" style=${styleMap(indicatorStyles)}></div>` : nothing}
+        <uik-button
+          part="item-button"
+          data-activity-item="true"
+          data-activity-id=${item.id}
+          data-index=${String(index)}
+          variant="ghost"
+          size="icon"
+          style=${styleMap({ width: '100%', height: '100%' })}
+          ?muted=${!isActive}
+          ?active=${isActive}
+          .tabIndexValue=${isFocused ? 0 : -1}
+          aria-pressed=${isActive ? 'true' : 'false'}
+          aria-label=${item.label}
+          title=${item.tooltip ?? item.label}
+          @click=${this.onItemClick}
+          @focusin=${this.onItemFocus}
+          @keydown=${this.onItemKeydown}>
+          ${iconTemplate}
+        </uik-button>
+      </div>
+    `;
+    }
+    render() {
+        const ariaLabelledby = this.getAttribute('aria-labelledby');
+        const ariaLabel = this.getAttribute('aria-label');
+        const hasLabelledby = Boolean(ariaLabelledby);
+        const hasLabel = typeof ariaLabel === 'string' && ariaLabel.trim().length > 0;
+        const resolvedLabel = hasLabel ? ariaLabel : hasLabelledby ? null : 'Activity bar';
+        const focusId = this.focusedId || this.resolveDefaultFocusId();
+        const containerStyles = {
+            width: 'var(--uik-component-shell-activity-bar-width)',
+            backgroundColor: 'oklch(var(--uik-component-shell-activity-bar-bg))',
+            color: 'oklch(var(--uik-component-shell-activity-bar-fg))',
+            paddingBlock: 'var(--uik-space-2)',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            flexShrink: '0',
+            height: '100%',
+            boxSizing: 'border-box',
+        };
+        const spacerStyles = {
+            flex: '1 1 auto',
+            minHeight: 'var(--uik-space-0)',
+        };
+        const footerStyles = {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            width: '100%',
+        };
+        const items = this.items.map((item, index) => this.renderItem(item, index, focusId));
+        return html `
+      <aside
+        part="activity-bar"
+        data-region="activity-bar"
+        role="toolbar"
+        aria-orientation="vertical"
+        aria-label=${resolvedLabel ?? nothing}
+        aria-labelledby=${ariaLabelledby ?? nothing}
+        style=${styleMap(containerStyles)}>
+        ${items}
+        <div part="spacer" style=${styleMap(spacerStyles)}></div>
+        <div part="footer" style=${styleMap(footerStyles)} data-shell-slot="footer">
+        </div>
+      </aside>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], UikShellActivityBar.prototype, "items", null);
+__decorate([
+    property({ type: String })
+], UikShellActivityBar.prototype, "activeId", null);
+__decorate([
+    state()
+], UikShellActivityBar.prototype, "focusedId", null);
+UikShellActivityBar = __decorate([
+    customElement('uik-shell-activity-bar')
+], UikShellActivityBar);
+export { UikShellActivityBar };
+//# sourceMappingURL=uik-shell-activity-bar.js.map

package/dist/src/structures/uik-shell-activity-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uik-shell-activity-bar.js","sourceRoot":"","sources":["../../../src/structures/uik-shell-activity-bar.ts"],"names":[],"mappings":"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"}

package/dist/src/structures/uik-shell-layout.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+export declare class UikShellLayout extends LitElement {
+    accessor isSecondarySidebarVisible: boolean;
+    private slotController?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    createRenderRoot(): HTMLElement;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uik-shell-layout': UikShellLayout;
+    }
+}
+//# sourceMappingURL=uik-shell-layout.d.ts.map

package/dist/src/structures/uik-shell-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"uik-shell-layout.d.ts","sourceRoot":"","sources":["../../../src/structures/uik-shell-layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAMrC,qBACa,cAAe,SAAQ,UAAU;IACjB,QAAQ,CAAC,yBAAyB,UAAS;IACtE,OAAO,CAAC,cAAc,CAAC,CAAyB;IAEvC,iBAAiB;IAoBjB,oBAAoB;IAKpB,YAAY;IAIZ,gBAAgB;IAIhB,MAAM;CAuEhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/src/structures/uik-shell-layout.js

@@ -0,0 +1,123 @@
+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 { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { ensureLightDomRoot, LightDomSlotController } from '../internal/light-dom-slot-controller';
+let UikShellLayout = class UikShellLayout extends LitElement {
+    #isSecondarySidebarVisible_accessor_storage = false;
+    get isSecondarySidebarVisible() { return this.#isSecondarySidebarVisible_accessor_storage; }
+    set isSecondarySidebarVisible(value) { this.#isSecondarySidebarVisible_accessor_storage = value; }
+    slotController;
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.style.display)
+            this.style.display = 'block';
+        if (!this.style.boxSizing)
+            this.style.boxSizing = 'border-box';
+        if (!this.style.height)
+            this.style.height = '100%';
+        if (!this.style.width)
+            this.style.width = '100%';
+        this.slotController ??= new LightDomSlotController(this, '[data-shell-root]', [
+            { name: 'activity-bar', containerSelector: '[data-shell-slot="activity-bar"]' },
+            { name: 'primary-sidebar', containerSelector: '[data-shell-slot="primary-sidebar"]' },
+            { name: 'main-content', containerSelector: '[data-shell-slot="main-content"]' },
+            { name: 'secondary-sidebar', containerSelector: '[data-shell-slot="secondary-sidebar"]' },
+            { name: 'status-bar', containerSelector: '[data-shell-slot="status-bar"]' },
+        ]);
+        this.slotController.connect();
+    }
+    disconnectedCallback() {
+        this.slotController?.disconnect();
+        super.disconnectedCallback();
+    }
+    firstUpdated() {
+        this.slotController?.sync();
+    }
+    createRenderRoot() {
+        return ensureLightDomRoot(this);
+    }
+    render() {
+        const layoutStyles = {
+            backgroundColor: 'oklch(var(--uik-surface-bg))',
+            color: 'oklch(var(--uik-text-default))',
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            width: '100%',
+            boxSizing: 'border-box',
+        };
+        const rowStyles = {
+            display: 'flex',
+            flex: '1 1 auto',
+            minHeight: 'var(--uik-space-0)',
+            overflow: 'hidden',
+        };
+        const fixedRegionStyles = {
+            flexShrink: '0',
+        };
+        const mainStyles = {
+            display: 'flex',
+            flex: '1 1 auto',
+            flexDirection: 'column',
+            minWidth: 'var(--uik-space-0)',
+            minHeight: 'var(--uik-space-0)',
+        };
+        const statusBarStyles = {
+            flexShrink: '0',
+        };
+        const secondaryStyles = {
+            ...fixedRegionStyles,
+            display: this.isSecondarySidebarVisible ? 'block' : 'none',
+        };
+        const slotColumnStyles = {
+            height: '100%',
+            minHeight: 'var(--uik-space-0)',
+        };
+        const mainSlotStyles = {
+            display: 'flex',
+            flex: '1 1 auto',
+            flexDirection: 'column',
+            minWidth: 'var(--uik-space-0)',
+            minHeight: 'var(--uik-space-0)',
+            height: '100%',
+        };
+        const statusSlotStyles = {
+            width: '100%',
+        };
+        return html `
+      <div part="layout" style=${styleMap(layoutStyles)} data-layout-layer="shell">
+        <div part="row" style=${styleMap(rowStyles)}>
+          <div part="activity-bar" style=${styleMap(fixedRegionStyles)} data-region="activity-bar">
+            <div data-shell-slot="activity-bar" style=${styleMap(slotColumnStyles)}></div>
+          </div>
+          <div part="primary-sidebar" style=${styleMap(fixedRegionStyles)} data-region="primary-sidebar">
+            <div data-shell-slot="primary-sidebar" style=${styleMap(slotColumnStyles)}></div>
+          </div>
+          <div part="main-content" style=${styleMap(mainStyles)} data-region="main-content">
+            <div data-shell-slot="main-content" style=${styleMap(mainSlotStyles)}></div>
+          </div>
+          <div part="secondary-sidebar" style=${styleMap(secondaryStyles)} data-region="secondary-sidebar">
+            <div data-shell-slot="secondary-sidebar" style=${styleMap(slotColumnStyles)}></div>
+          </div>
+        </div>
+        <div part="status-bar" style=${styleMap(statusBarStyles)} data-region="status-bar">
+          <div data-shell-slot="status-bar" style=${styleMap(statusSlotStyles)}></div>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], UikShellLayout.prototype, "isSecondarySidebarVisible", null);
+UikShellLayout = __decorate([
+    customElement('uik-shell-layout')
+], UikShellLayout);
+export { UikShellLayout };
+//# sourceMappingURL=uik-shell-layout.js.map

package/dist/src/structures/uik-shell-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uik-shell-layout.js","sourceRoot":"","sources":["../../../src/structures/uik-shell-layout.ts"],"names":[],"mappings":"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"}

package/dist/src/structures/uik-shell-secondary-sidebar.d.ts

@@ -0,0 +1,21 @@
+import { LitElement, nothing } from 'lit';
+import '@ismail-elkorchi/ui-primitives/uik-button';
+import '@ismail-elkorchi/ui-primitives/uik-separator';
+export declare class UikShellSecondarySidebar extends LitElement {
+    accessor isOpen: boolean;
+    accessor heading: string;
+    private accessor hasFooter;
+    private slotController?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    createRenderRoot(): HTMLElement;
+    private close;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uik-shell-secondary-sidebar': UikShellSecondarySidebar;
+    }
+}
+//# sourceMappingURL=uik-shell-secondary-sidebar.d.ts.map

package/dist/src/structures/uik-shell-secondary-sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"uik-shell-secondary-sidebar.d.ts","sourceRoot":"","sources":["../../../src/structures/uik-shell-secondary-sidebar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAQ,OAAO,EAAC,MAAM,KAAK,CAAC;AAI9C,OAAO,2CAA2C,CAAC;AACnD,OAAO,8CAA8C,CAAC;AAItD,qBACa,wBAAyB,SAAQ,UAAU;IAC3B,QAAQ,CAAC,MAAM,UAAS;IACzB,QAAQ,CAAC,OAAO,SAAM;IACvC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAS;IAC5C,OAAO,CAAC,cAAc,CAAC,CAAyB;IAEvC,iBAAiB;IAqBjB,oBAAoB;IAKpB,YAAY;IAIZ,gBAAgB;IAIzB,OAAO,CAAC,KAAK,CAEX;IAEO,MAAM;CAqGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,6BAA6B,EAAE,wBAAwB,CAAC;KACzD;CACF"}

package/dist/src/structures/uik-shell-secondary-sidebar.js

@@ -0,0 +1,169 @@
+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 { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import '@ismail-elkorchi/ui-primitives/uik-button';
+import '@ismail-elkorchi/ui-primitives/uik-separator';
+import { ensureLightDomRoot, LightDomSlotController } from '../internal/light-dom-slot-controller';
+let UikShellSecondarySidebar = class UikShellSecondarySidebar extends LitElement {
+    #isOpen_accessor_storage = false;
+    get isOpen() { return this.#isOpen_accessor_storage; }
+    set isOpen(value) { this.#isOpen_accessor_storage = value; }
+    #heading_accessor_storage = '';
+    get heading() { return this.#heading_accessor_storage; }
+    set heading(value) { this.#heading_accessor_storage = value; }
+    #hasFooter_accessor_storage = false;
+    get hasFooter() { return this.#hasFooter_accessor_storage; }
+    set hasFooter(value) { this.#hasFooter_accessor_storage = value; }
+    slotController;
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.style.display)
+            this.style.display = 'block';
+        if (!this.style.boxSizing)
+            this.style.boxSizing = 'border-box';
+        if (!this.style.height)
+            this.style.height = '100%';
+        this.slotController ??= new LightDomSlotController(this, '[data-shell-root]', [
+            { name: null, containerSelector: '[data-shell-slot="default"]' },
+            { name: 'footer', containerSelector: '[data-shell-slot="footer"]' },
+        ], root => {
+            const footerContainer = root.querySelector('[data-shell-slot="footer"]');
+            const nextHasFooter = !!footerContainer?.querySelector('[slot="footer"]');
+            if (nextHasFooter !== this.hasFooter)
+                this.hasFooter = nextHasFooter;
+        });
+        this.slotController.connect();
+    }
+    disconnectedCallback() {
+        this.slotController?.disconnect();
+        super.disconnectedCallback();
+    }
+    firstUpdated() {
+        this.slotController?.sync();
+    }
+    createRenderRoot() {
+        return ensureLightDomRoot(this);
+    }
+    close = () => {
+        this.dispatchEvent(new CustomEvent('secondary-sidebar-close', { bubbles: true, composed: true }));
+    };
+    render() {
+        if (!this.isOpen)
+            return nothing;
+        const sidebarStyles = {
+            width: 'var(--uik-component-shell-secondary-sidebar-width)',
+            backgroundColor: 'oklch(var(--uik-component-shell-secondary-sidebar-bg))',
+            color: 'oklch(var(--uik-text-default))',
+            borderLeft: 'var(--uik-border-width-1) solid oklch(var(--uik-component-shell-divider-color))',
+            display: 'flex',
+            flexDirection: 'column',
+            flexShrink: '0',
+            height: '100%',
+            boxSizing: 'border-box',
+        };
+        const headerStyles = {
+            height: 'var(--uik-size-control-md)',
+            paddingInline: 'var(--uik-space-4)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            flexShrink: '0',
+            userSelect: 'none',
+        };
+        const headingStyles = {
+            fontSize: 'var(--uik-typography-font-size-1)',
+            fontWeight: 'var(--uik-typography-font-weight-bold)',
+            letterSpacing: 'var(--uik-typography-letter-spacing-wide)',
+            lineHeight: 'var(--uik-typography-line-height-2)',
+            color: 'oklch(var(--uik-text-muted))',
+            textTransform: 'uppercase',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+        };
+        const bodyContainerStyles = {
+            display: 'flex',
+            flexDirection: 'column',
+            flex: '1 1 auto',
+            minHeight: 'var(--uik-space-0)',
+        };
+        const bodyStyles = {
+            padding: 'var(--uik-space-4)',
+            overflowY: 'auto',
+            display: 'flex',
+            flexDirection: 'column',
+            flex: '1 1 auto',
+            minHeight: 'var(--uik-space-0)',
+            boxSizing: 'border-box',
+            scrollbarColor: 'oklch(var(--uik-component-shell-scrollbar-thumb)) oklch(var(--uik-component-shell-scrollbar-track))',
+            scrollbarWidth: 'thin',
+        };
+        const footerStyles = {
+            padding: 'var(--uik-space-3)',
+            backgroundColor: 'oklch(var(--uik-surface-card))',
+        };
+        return html `
+      <aside part="secondary-sidebar" data-region="secondary-sidebar" style=${styleMap(sidebarStyles)}>
+        <div part="header" style=${styleMap(headerStyles)}>
+          <span part="heading" style=${styleMap(headingStyles)}>${this.heading}</span>
+          <uik-button
+            part="close-button"
+            variant="ghost"
+            size="icon"
+            muted
+            aria-label="Close secondary sidebar"
+            title="Close secondary sidebar"
+            @click=${this.close}>
+            <svg
+              part="close-icon"
+              aria-hidden="true"
+              style=${styleMap({ width: 'var(--uik-size-icon-sm)', height: 'var(--uik-size-icon-sm)' })}
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="var(--uik-border-width-2)"
+                d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </uik-button>
+        </div>
+        <uik-separator
+          orientation="horizontal"
+          style="--uik-separator-color: var(--uik-component-shell-divider-color);"></uik-separator>
+        <div part="body-container" style=${styleMap(bodyContainerStyles)}>
+          <div part="body" style=${styleMap(bodyStyles)} data-shell-slot="default">
+          </div>
+        </div>
+        <div ?hidden=${!this.hasFooter}>
+          <uik-separator
+            orientation="horizontal"
+            style="--uik-separator-color: var(--uik-component-shell-divider-color);"></uik-separator>
+          <div part="footer" style=${styleMap(footerStyles)} data-shell-slot="footer">
+          </div>
+        </div>
+      </aside>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], UikShellSecondarySidebar.prototype, "isOpen", null);
+__decorate([
+    property({ type: String })
+], UikShellSecondarySidebar.prototype, "heading", null);
+__decorate([
+    state()
+], UikShellSecondarySidebar.prototype, "hasFooter", null);
+UikShellSecondarySidebar = __decorate([
+    customElement('uik-shell-secondary-sidebar')
+], UikShellSecondarySidebar);
+export { UikShellSecondarySidebar };
+//# sourceMappingURL=uik-shell-secondary-sidebar.js.map

package/dist/src/structures/uik-shell-secondary-sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uik-shell-secondary-sidebar.js","sourceRoot":"","sources":["../../../src/structures/uik-shell-secondary-sidebar.ts"],"names":[],"mappings":"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"}

package/dist/src/structures/uik-shell-sidebar.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+import '@ismail-elkorchi/ui-primitives/uik-separator';
+export declare class UikShellSidebar extends LitElement {
+    accessor heading: string;
+    accessor subtitle: string;
+    accessor isBodyPadded: boolean;
+    accessor isBodyScrollable: boolean;
+    private accessor hasFooter;
+    private slotController?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    createRenderRoot(): HTMLElement;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uik-shell-sidebar': UikShellSidebar;
+    }
+}
+//# sourceMappingURL=uik-shell-sidebar.d.ts.map