snice 1.13.2 → 1.13.4

package/dist/components/input/snice-input.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snice-input.types.js","sourceRoot":"","sources":["../../../components/input/snice-input.types.ts"],"names":[],"mappings":""}

package/dist/components/layout/snice-layout-blog.d.ts

@@ -0,0 +1,4 @@
+export declare class SniceLayoutBlog extends HTMLElement {
+    html(): string;
+    css(): string;
+}

package/dist/components/layout/snice-layout-blog.js

@@ -0,0 +1,56 @@
+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 { element } from '../../src/index';
+import css from './snice-layout-blog.css?inline';
+let SniceLayoutBlog = class SniceLayoutBlog extends HTMLElement {
+    html() {
+        return /*html*/ `
+      <div class="layout">
+        <header class="header">
+          <div class="container">
+            <div class="brand">
+              <slot name="brand">
+                <h1>Blog</h1>
+              </slot>
+            </div>
+            <nav class="nav">
+              <slot name="nav"></slot>
+            </nav>
+          </div>
+        </header>
+        
+        <main class="main">
+          <div class="container">
+            <div class="content-area">
+              <article class="article">
+                <slot></slot>
+              </article>
+              
+              <aside class="sidebar">
+                <slot name="sidebar"></slot>
+              </aside>
+            </div>
+          </div>
+        </main>
+        
+        <footer class="footer">
+          <div class="container">
+            <slot name="footer"></slot>
+          </div>
+        </footer>
+      </div>
+    `;
+    }
+    css() {
+        return css;
+    }
+};
+SniceLayoutBlog = __decorate([
+    element('snice-layout-blog')
+], SniceLayoutBlog);
+export { SniceLayoutBlog };
+//# sourceMappingURL=snice-layout-blog.js.map

package/dist/components/layout/snice-layout-blog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snice-layout-blog.js","sourceRoot":"","sources":["../../../components/layout/snice-layout-blog.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,GAAG,MAAM,gCAAgC,CAAC;AAG1C,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,WAAW;IAC9C,IAAI;QACF,OAAO,QAAQ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmCd,CAAC;IACJ,CAAC;IAED,GAAG;QACD,OAAO,GAAG,CAAC;IACb,CAAC;CACF,CAAA;AA3CY,eAAe;IAD3B,OAAO,CAAC,mBAAmB,CAAC;GAChB,eAAe,CA2C3B"}

package/dist/components/layout/snice-layout-card.d.ts

@@ -0,0 +1,6 @@
+export declare class SniceLayoutCard extends HTMLElement {
+    columns: '1' | '2' | '3' | '4' | '6';
+    gap: 'sm' | 'md' | 'lg' | 'xl';
+    html(): string;
+    css(): string;
+}

package/dist/components/layout/snice-layout-card.js

@@ -0,0 +1,53 @@
+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;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { element, property } from '../../src/index';
+import css from './snice-layout-card.css?inline';
+let SniceLayoutCard = class SniceLayoutCard extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.columns = '3';
+        this.gap = 'md';
+    }
+    html() {
+        return /*html*/ `
+      <div class="layout">
+        <header class="header">
+          <slot name="header"></slot>
+        </header>
+        
+        <main class="main">
+          <div class="grid">
+            <slot></slot>
+          </div>
+        </main>
+        
+        <footer class="footer">
+          <slot name="footer"></slot>
+        </footer>
+      </div>
+    `;
+    }
+    css() {
+        return css;
+    }
+};
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", String)
+], SniceLayoutCard.prototype, "columns", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", String)
+], SniceLayoutCard.prototype, "gap", void 0);
+SniceLayoutCard = __decorate([
+    element('snice-layout-card')
+], SniceLayoutCard);
+export { SniceLayoutCard };
+//# sourceMappingURL=snice-layout-card.js.map

package/dist/components/layout/snice-layout-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snice-layout-card.js","sourceRoot":"","sources":["../../../components/layout/snice-layout-card.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,GAAG,MAAM,gCAAgC,CAAC;AAG1C,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,WAAW;IAAzC;;QAEL,YAAO,GAAgC,GAAG,CAAC;QAG3C,QAAG,GAA8B,IAAI,CAAC;IAyBxC,CAAC;IAvBC,IAAI;QACF,OAAO,QAAQ,CAAA;;;;;;;;;;;;;;;;KAgBd,CAAC;IACJ,CAAC;IAED,GAAG;QACD,OAAO,GAAG,CAAC;IACb,CAAC;CACF,CAAA;AA5BC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;gDACe;AAG3C;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;4CACU;AAL3B,eAAe;IAD3B,OAAO,CAAC,mBAAmB,CAAC;GAChB,eAAe,CA8B3B"}

package/dist/components/layout/snice-layout-centered.d.ts

@@ -0,0 +1,5 @@
+export declare class SniceLayoutCentered extends HTMLElement {
+    width: 'sm' | 'md' | 'lg' | 'xl';
+    html(): string;
+    css(): string;
+}

package/dist/components/layout/snice-layout-centered.js

@@ -0,0 +1,38 @@
+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;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { element, property } from '../../src/index';
+import css from './snice-layout-centered.css?inline';
+let SniceLayoutCentered = class SniceLayoutCentered extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.width = 'md';
+    }
+    html() {
+        return /*html*/ `
+      <div class="layout">
+        <div class="container">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+    css() {
+        return css;
+    }
+};
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", String)
+], SniceLayoutCentered.prototype, "width", void 0);
+SniceLayoutCentered = __decorate([
+    element('snice-layout-centered')
+], SniceLayoutCentered);
+export { SniceLayoutCentered };
+//# sourceMappingURL=snice-layout-centered.js.map

package/dist/components/layout/snice-layout-centered.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snice-layout-centered.js","sourceRoot":"","sources":["../../../components/layout/snice-layout-centered.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,GAAG,MAAM,oCAAoC,CAAC;AAG9C,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,WAAW;IAA7C;;QAEL,UAAK,GAA8B,IAAI,CAAC;IAe1C,CAAC;IAbC,IAAI;QACF,OAAO,QAAQ,CAAA;;;;;;KAMd,CAAC;IACJ,CAAC;IAED,GAAG;QACD,OAAO,GAAG,CAAC;IACb,CAAC;CACF,CAAA;AAfC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;kDACY;AAF7B,mBAAmB;IAD/B,OAAO,CAAC,uBAAuB,CAAC;GACpB,mBAAmB,CAiB/B"}

package/dist/components/layout/snice-layout-dashboard.d.ts

@@ -0,0 +1,4 @@
+export declare class SniceLayoutDashboard extends HTMLElement {
+    html(): string;
+    css(): string;
+}

package/dist/components/layout/snice-layout-dashboard.js

@@ -0,0 +1,53 @@
+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 { element } from '../../src/index';
+import css from './snice-layout-dashboard.css?inline';
+let SniceLayoutDashboard = class SniceLayoutDashboard extends HTMLElement {
+    html() {
+        return /*html*/ `
+      <div class="layout">
+        <header class="header">
+          <div class="header-start">
+            <slot name="brand">
+              <h1>Dashboard</h1>
+            </slot>
+          </div>
+          <div class="header-center">
+            <slot name="search"></slot>
+          </div>
+          <div class="header-end">
+            <slot name="user"></slot>
+          </div>
+        </header>
+        
+        <nav class="nav">
+          <slot name="nav"></slot>
+        </nav>
+        
+        <aside class="sidebar">
+          <slot name="sidebar"></slot>
+        </aside>
+        
+        <main class="main">
+          <slot></slot>
+        </main>
+        
+        <aside class="right-sidebar">
+          <slot name="right-sidebar"></slot>
+        </aside>
+      </div>
+    `;
+    }
+    css() {
+        return css;
+    }
+};
+SniceLayoutDashboard = __decorate([
+    element('snice-layout-dashboard')
+], SniceLayoutDashboard);
+export { SniceLayoutDashboard };
+//# sourceMappingURL=snice-layout-dashboard.js.map

package/dist/components/layout/snice-layout-dashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snice-layout-dashboard.js","sourceRoot":"","sources":["../../../components/layout/snice-layout-dashboard.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,GAAG,MAAM,qCAAqC,CAAC;AAG/C,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,WAAW;IACnD,IAAI;QACF,OAAO,QAAQ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCd,CAAC;IACJ,CAAC;IAED,GAAG;QACD,OAAO,GAAG,CAAC;IACb,CAAC;CACF,CAAA;AAxCY,oBAAoB;IADhC,OAAO,CAAC,wBAAwB,CAAC;GACrB,oBAAoB,CAwChC"}

package/dist/components/layout/snice-layout-fullscreen.d.ts

@@ -0,0 +1,5 @@
+export declare class SniceLayoutFullscreen extends HTMLElement {
+    overlay: boolean;
+    html(): string;
+    css(): string;
+}

package/dist/components/layout/snice-layout-fullscreen.js

@@ -0,0 +1,50 @@
+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;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { element, property } from '../../src/index';
+import css from './snice-layout-fullscreen.css?inline';
+let SniceLayoutFullscreen = class SniceLayoutFullscreen extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.overlay = false;
+    }
+    html() {
+        return /*html*/ `
+      <div class="layout">
+        <div class="background">
+          <slot name="background"></slot>
+        </div>
+        
+        <div class="overlay">
+          <slot name="overlay"></slot>
+        </div>
+        
+        <div class="content">
+          <slot></slot>
+        </div>
+        
+        <div class="controls">
+          <slot name="controls"></slot>
+        </div>
+      </div>
+    `;
+    }
+    css() {
+        return css;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], SniceLayoutFullscreen.prototype, "overlay", void 0);
+SniceLayoutFullscreen = __decorate([
+    element('snice-layout-fullscreen')
+], SniceLayoutFullscreen);
+export { SniceLayoutFullscreen };
+//# sourceMappingURL=snice-layout-fullscreen.js.map

package/dist/components/layout/snice-layout-fullscreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snice-layout-fullscreen.js","sourceRoot":"","sources":["../../../components/layout/snice-layout-fullscreen.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,GAAG,MAAM,sCAAsC,CAAC;AAGhD,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,WAAW;IAA/C;;QAEL,YAAO,GAAG,KAAK,CAAC;IA2BlB,CAAC;IAzBC,IAAI;QACF,OAAO,QAAQ,CAAA;;;;;;;;;;;;;;;;;;KAkBd,CAAC;IACJ,CAAC;IAED,GAAG;QACD,OAAO,GAAG,CAAC;IACb,CAAC;CACF,CAAA;AA3BC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;sDAC3B;AAFL,qBAAqB;IADjC,OAAO,CAAC,yBAAyB,CAAC;GACtB,qBAAqB,CA6BjC"}

package/dist/components/layout/snice-layout-landing.d.ts

@@ -0,0 +1,4 @@
+export declare class SniceLayoutLanding extends HTMLElement {
+    html(): string;
+    css(): string;
+}

package/dist/components/layout/snice-layout-landing.js

@@ -0,0 +1,55 @@
+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 { element } from '../../src/index';
+import css from './snice-layout-landing.css?inline';
+let SniceLayoutLanding = class SniceLayoutLanding extends HTMLElement {
+    html() {
+        return /*html*/ `
+      <div class="layout">
+        <header class="header">
+          <div class="container">
+            <div class="brand">
+              <slot name="brand">
+                <h1>Brand</h1>
+              </slot>
+            </div>
+            <nav class="nav">
+              <slot name="nav"></slot>
+            </nav>
+            <div class="cta">
+              <slot name="cta"></slot>
+            </div>
+          </div>
+        </header>
+        
+        <main class="main">
+          <section class="hero">
+            <slot name="hero"></slot>
+          </section>
+          
+          <div class="content">
+            <slot></slot>
+          </div>
+        </main>
+        
+        <footer class="footer">
+          <div class="container">
+            <slot name="footer"></slot>
+          </div>
+        </footer>
+      </div>
+    `;
+    }
+    css() {
+        return css;
+    }
+};
+SniceLayoutLanding = __decorate([
+    element('snice-layout-landing')
+], SniceLayoutLanding);
+export { SniceLayoutLanding };
+//# sourceMappingURL=snice-layout-landing.js.map

package/dist/components/layout/snice-layout-landing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snice-layout-landing.js","sourceRoot":"","sources":["../../../components/layout/snice-layout-landing.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,GAAG,MAAM,mCAAmC,CAAC;AAG7C,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,WAAW;IACjD,IAAI;QACF,OAAO,QAAQ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkCd,CAAC;IACJ,CAAC;IAED,GAAG;QACD,OAAO,GAAG,CAAC;IACb,CAAC;CACF,CAAA;AA1CY,kBAAkB;IAD9B,OAAO,CAAC,sBAAsB,CAAC;GACnB,kBAAkB,CA0C9B"}

package/dist/components/layout/snice-layout-minimal.d.ts

@@ -0,0 +1,4 @@
+export declare class SniceLayoutMinimal extends HTMLElement {
+    html(): string;
+    css(): string;
+}

package/dist/components/layout/snice-layout-minimal.js

@@ -0,0 +1,27 @@
+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 { element } from '../../src/index';
+import css from './snice-layout-minimal.css?inline';
+let SniceLayoutMinimal = class SniceLayoutMinimal extends HTMLElement {
+    html() {
+        return /*html*/ `
+      <div class="layout">
+        <main class="main">
+          <slot></slot>
+        </main>
+      </div>
+    `;
+    }
+    css() {
+        return css;
+    }
+};
+SniceLayoutMinimal = __decorate([
+    element('snice-layout-minimal')
+], SniceLayoutMinimal);
+export { SniceLayoutMinimal };
+//# sourceMappingURL=snice-layout-minimal.js.map

package/dist/components/layout/snice-layout-minimal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snice-layout-minimal.js","sourceRoot":"","sources":["../../../components/layout/snice-layout-minimal.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,GAAG,MAAM,mCAAmC,CAAC;AAG7C,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,WAAW;IACjD,IAAI;QACF,OAAO,QAAQ,CAAA;;;;;;KAMd,CAAC;IACJ,CAAC;IAED,GAAG;QACD,OAAO,GAAG,CAAC;IACb,CAAC;CACF,CAAA;AAdY,kBAAkB;IAD9B,OAAO,CAAC,sBAAsB,CAAC;GACnB,kBAAkB,CAc9B"}

package/dist/components/layout/snice-layout-sidebar.d.ts

@@ -0,0 +1,5 @@
+export declare class SniceLayoutSidebar extends HTMLElement {
+    collapsed: boolean;
+    html(): string;
+    css(): string;
+}

package/dist/components/layout/snice-layout-sidebar.js

@@ -0,0 +1,64 @@
+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;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { element, property } from '../../src/index';
+import css from './snice-layout-sidebar.css?inline';
+let SniceLayoutSidebar = class SniceLayoutSidebar extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.collapsed = false;
+    }
+    html() {
+        return /*html*/ `
+      <div class="layout">
+        <aside class="sidebar">
+          <div class="sidebar-header">
+            <slot name="brand">
+              <h2>App</h2>
+            </slot>
+          </div>
+          <nav class="sidebar-nav">
+            <slot name="nav"></slot>
+          </nav>
+        </aside>
+        
+        <div class="content-area">
+          <header class="header">
+            <button class="sidebar-toggle" type="button" aria-label="Toggle sidebar">
+              <svg viewBox="0 0 24 24" width="20" height="20">
+                <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="currentColor"/>
+              </svg>
+            </button>
+            <slot name="header"></slot>
+          </header>
+          
+          <main class="main">
+            <slot></slot>
+          </main>
+          
+          <footer class="footer">
+            <slot name="footer"></slot>
+          </footer>
+        </div>
+      </div>
+    `;
+    }
+    css() {
+        return css;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], SniceLayoutSidebar.prototype, "collapsed", void 0);
+SniceLayoutSidebar = __decorate([
+    element('snice-layout-sidebar')
+], SniceLayoutSidebar);
+export { SniceLayoutSidebar };
+//# sourceMappingURL=snice-layout-sidebar.js.map

package/dist/components/layout/snice-layout-sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snice-layout-sidebar.js","sourceRoot":"","sources":["../../../components/layout/snice-layout-sidebar.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,GAAG,MAAM,mCAAmC,CAAC;AAG7C,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,WAAW;IAA5C;;QAEL,cAAS,GAAG,KAAK,CAAC;IAyCpB,CAAC;IAvCC,IAAI;QACF,OAAO,QAAQ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCd,CAAC;IACJ,CAAC;IAED,GAAG;QACD,OAAO,GAAG,CAAC;IACb,CAAC;CACF,CAAA;AAzCC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;qDACzB;AAFP,kBAAkB;IAD9B,OAAO,CAAC,sBAAsB,CAAC;GACnB,kBAAkB,CA2C9B"}

package/dist/components/layout/snice-layout-split.d.ts

@@ -0,0 +1,6 @@
+export declare class SniceLayoutSplit extends HTMLElement {
+    direction: 'horizontal' | 'vertical';
+    ratio: '50-50' | '60-40' | '70-30' | '33-67' | '67-33';
+    html(): string;
+    css(): string;
+}

package/dist/components/layout/snice-layout-split.js

@@ -0,0 +1,47 @@
+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;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { element, property } from '../../src/index';
+import css from './snice-layout-split.css?inline';
+let SniceLayoutSplit = class SniceLayoutSplit extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.direction = 'horizontal';
+        this.ratio = '50-50';
+    }
+    html() {
+        return /*html*/ `
+      <div class="layout">
+        <div class="panel panel-left">
+          <slot name="left"></slot>
+        </div>
+        <div class="divider"></div>
+        <div class="panel panel-right">
+          <slot name="right"></slot>
+        </div>
+      </div>
+    `;
+    }
+    css() {
+        return css;
+    }
+};
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", String)
+], SniceLayoutSplit.prototype, "direction", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", String)
+], SniceLayoutSplit.prototype, "ratio", void 0);
+SniceLayoutSplit = __decorate([
+    element('snice-layout-split')
+], SniceLayoutSplit);
+export { SniceLayoutSplit };
+//# sourceMappingURL=snice-layout-split.js.map

package/dist/components/layout/snice-layout-split.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snice-layout-split.js","sourceRoot":"","sources":["../../../components/layout/snice-layout-split.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,GAAG,MAAM,iCAAiC,CAAC;AAG3C,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAW;IAA1C;;QAEL,cAAS,GAA8B,YAAY,CAAC;QAGpD,UAAK,GAAoD,OAAO,CAAC;IAmBnE,CAAC;IAjBC,IAAI;QACF,OAAO,QAAQ,CAAA;;;;;;;;;;KAUd,CAAC;IACJ,CAAC;IAED,GAAG;QACD,OAAO,GAAG,CAAC;IACb,CAAC;CACF,CAAA;AAtBC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;mDACwB;AAGpD;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;+CACqC;AALtD,gBAAgB;IAD5B,OAAO,CAAC,oBAAoB,CAAC;GACjB,gBAAgB,CAwB5B"}

package/dist/components/layout/snice-layout.d.ts

@@ -0,0 +1,4 @@
+export declare class SniceLayout extends HTMLElement {
+    html(): string;
+    css(): string;
+}

package/dist/components/layout/snice-layout.js

@@ -0,0 +1,43 @@
+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 { element } from '../../src/index';
+import css from './snice-layout.css?inline';
+let SniceLayout = class SniceLayout extends HTMLElement {
+    html() {
+        return /*html*/ `
+      <div class="layout">
+        <header class="header">
+          <div class="brand">
+            <slot name="brand">
+              <h1>App</h1>
+            </slot>
+          </div>
+          <nav class="nav">
+            <slot name="nav"></slot>
+          </nav>
+        </header>
+        
+        <main class="main">
+          <slot></slot>
+        </main>
+        
+        <footer class="footer">
+          <slot name="footer">
+          </slot>
+        </footer>
+      </div>
+    `;
+    }
+    css() {
+        return css;
+    }
+};
+SniceLayout = __decorate([
+    element('snice-layout')
+], SniceLayout);
+export { SniceLayout };
+//# sourceMappingURL=snice-layout.js.map

package/dist/components/layout/snice-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snice-layout.js","sourceRoot":"","sources":["../../../components/layout/snice-layout.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,GAAG,MAAM,2BAA2B,CAAC;AAGrC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;IAC1C,IAAI;QACF,OAAO,QAAQ,CAAA;;;;;;;;;;;;;;;;;;;;;;KAsBd,CAAC;IACJ,CAAC;IAED,GAAG;QACD,OAAO,GAAG,CAAC;IACb,CAAC;CACF,CAAA;AA9BY,WAAW;IADvB,OAAO,CAAC,cAAc,CAAC;GACX,WAAW,CA8BvB"}

package/dist/components/layout/snice-layout.types.d.ts

@@ -0,0 +1,3 @@
+import type { SniceElement } from '../../src/index';
+export interface SniceLayoutElement extends SniceElement {
+}

package/dist/components/layout/snice-layout.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=snice-layout.types.js.map

package/dist/components/layout/snice-layout.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snice-layout.types.js","sourceRoot":"","sources":["../../../components/layout/snice-layout.types.ts"],"names":[],"mappings":""}