snice 1.14.3 → 2.1.0

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

@@ -0,0 +1,48 @@
+import { element } from 'snice';
+import css from './snice-layout-blog.css?inline';
+
+@element('snice-layout-blog')
+export 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;
+  }
+}

package/components/layout/snice-layout-card.css

@@ -0,0 +1,104 @@
+/* Card Grid Layout */
+:host {
+  display: block;
+  font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+}
+
+.layout {
+  min-height: 100vh;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  background: var(--snice-color-background-secondary, #f8fafc);
+}
+
+.header {
+  background: var(--snice-color-background, white);
+  border-bottom: 1px solid var(--snice-color-border, #d1d5db);
+  padding: var(--snice-spacing-lg, 2rem);
+}
+
+.main {
+  padding: var(--snice-spacing-lg, 2rem);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+/* Column variants */
+:host([columns="1"]) .grid {
+  grid-template-columns: 1fr;
+}
+
+:host([columns="2"]) .grid {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+:host([columns="3"]) .grid {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+:host([columns="4"]) .grid {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+:host([columns="6"]) .grid {
+  grid-template-columns: repeat(6, 1fr);
+}
+
+/* Gap variants */
+:host([gap="sm"]) .grid {
+  gap: var(--snice-spacing-sm, 0.75rem);
+}
+
+:host([gap="md"]) .grid,
+:host(:not([gap])) .grid {
+  gap: var(--snice-spacing-md, 1rem);
+}
+
+:host([gap="lg"]) .grid {
+  gap: var(--snice-spacing-lg, 2rem);
+}
+
+:host([gap="xl"]) .grid {
+  gap: var(--snice-spacing-xl, 3rem);
+}
+
+.footer {
+  background: var(--snice-color-background, white);
+  border-top: 1px solid var(--snice-color-border, #d1d5db);
+  padding: var(--snice-spacing-lg, 2rem);
+}
+
+/* Auto-responsive grid */
+@media (max-width: 1200px) {
+  :host([columns="6"]) .grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+@media (max-width: 992px) {
+  :host([columns="4"]) .grid,
+  :host([columns="6"]) .grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  :host([columns="3"]) .grid,
+  :host([columns="4"]) .grid,
+  :host([columns="6"]) .grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 480px) {
+  .grid {
+    grid-template-columns: 1fr !important;
+  }
+  
+  .main {
+    padding: var(--snice-spacing-md, 1rem);
+  }
+}

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

@@ -0,0 +1,35 @@
+import { element, property } from 'snice';
+import css from './snice-layout-card.css?inline';
+
+@element('snice-layout-card')
+export class SniceLayoutCard extends HTMLElement {
+  @property({ reflect: true })
+  columns: '1' | '2' | '3' | '4' | '6' = '3';
+  
+  @property({ reflect: true })
+  gap: 'sm' | 'md' | 'lg' | 'xl' = '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;
+  }
+}

package/components/layout/snice-layout-centered.css

@@ -0,0 +1,51 @@
+/* Centered Layout - For forms, auth pages, etc */
+:host {
+  display: block;
+  font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+}
+
+.layout {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--snice-spacing-lg, 2rem);
+  background: var(--snice-color-background-secondary, #f8fafc);
+}
+
+.container {
+  width: 100%;
+  max-width: 400px;
+  background: var(--snice-color-background, white);
+  border-radius: var(--snice-border-radius-lg, 8px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  padding: var(--snice-spacing-xl, 3rem);
+}
+
+/* Width variants */
+:host([width="sm"]) .container {
+  max-width: 320px;
+}
+
+:host([width="md"]) .container {
+  max-width: 400px;
+}
+
+:host([width="lg"]) .container {
+  max-width: 500px;
+}
+
+:host([width="xl"]) .container {
+  max-width: 600px;
+}
+
+/* Mobile responsive */
+@media (max-width: 480px) {
+  .layout {
+    padding: var(--snice-spacing-md, 1rem);
+  }
+  
+  .container {
+    padding: var(--snice-spacing-lg, 2rem);
+  }
+}

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

@@ -0,0 +1,22 @@
+import { element, property } from 'snice';
+import css from './snice-layout-centered.css?inline';
+
+@element('snice-layout-centered')
+export class SniceLayoutCentered extends HTMLElement {
+  @property({ reflect: true })
+  width: 'sm' | 'md' | 'lg' | 'xl' = 'md';
+
+  html() {
+    return /*html*/`
+      <div class="layout">
+        <div class="container">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  css() {
+    return css;
+  }
+}

package/components/layout/snice-layout-dashboard.css

@@ -0,0 +1,98 @@
+/* Dashboard Layout - Complex grid with multiple areas */
+:host {
+  display: block;
+  font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+}
+
+.layout {
+  display: grid;
+  grid-template-areas: 
+    "header header header"
+    "nav nav nav"
+    "sidebar main right-sidebar";
+  grid-template-rows: auto auto 1fr;
+  grid-template-columns: 250px 1fr 250px;
+  min-height: 100vh;
+  gap: 1px;
+  background: var(--snice-color-border, #d1d5db);
+}
+
+.header {
+  grid-area: header;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--snice-spacing-md, 1rem) var(--snice-spacing-lg, 2rem);
+  background: var(--snice-color-background, white);
+  border-bottom: 1px solid var(--snice-color-border, #d1d5db);
+}
+
+.header-start h1 {
+  margin: 0;
+  font-size: var(--snice-font-size-xl, 1.5rem);
+  font-weight: var(--snice-font-weight-semibold, 600);
+  color: var(--snice-color-text, #374151);
+}
+
+.header-center {
+  flex: 1;
+  max-width: 400px;
+  margin: 0 var(--snice-spacing-lg, 2rem);
+}
+
+.nav {
+  grid-area: nav;
+  padding: var(--snice-spacing-md, 1rem) var(--snice-spacing-lg, 2rem);
+  background: var(--snice-color-background, white);
+  border-bottom: 1px solid var(--snice-color-border, #d1d5db);
+}
+
+.sidebar {
+  grid-area: sidebar;
+  background: var(--snice-color-background, white);
+  padding: var(--snice-spacing-lg, 2rem);
+  overflow-y: auto;
+}
+
+.main {
+  grid-area: main;
+  padding: var(--snice-spacing-lg, 2rem);
+  background: var(--snice-color-background-secondary, #f8fafc);
+  overflow-y: auto;
+}
+
+.right-sidebar {
+  grid-area: right-sidebar;
+  background: var(--snice-color-background, white);
+  padding: var(--snice-spacing-lg, 2rem);
+  overflow-y: auto;
+}
+
+/* Responsive */
+@media (max-width: 1024px) {
+  .layout {
+    grid-template-areas: 
+      "header header"
+      "nav nav"
+      "main main";
+    grid-template-columns: 1fr;
+  }
+  
+  .sidebar,
+  .right-sidebar {
+    display: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .header {
+    flex-direction: column;
+    gap: var(--snice-spacing-md, 1rem);
+  }
+  
+  .header-center {
+    margin: 0;
+    max-width: none;
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,45 @@
+import { element } from 'snice';
+import css from './snice-layout-dashboard.css?inline';
+
+@element('snice-layout-dashboard')
+export 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;
+  }
+}

package/components/layout/snice-layout-fullscreen.css

@@ -0,0 +1,72 @@
+/* Fullscreen Layout - For presentations, media viewers, etc */
+:host {
+  display: block;
+  font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+}
+
+.layout {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background: var(--snice-color-background-dark, #111827);
+}
+
+.background {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+
+.overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity var(--snice-transition-normal, 0.25s) ease;
+  pointer-events: none;
+}
+
+:host([overlay]) .overlay {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.content {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--snice-spacing-lg, 2rem);
+}
+
+.controls {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 4;
+  padding: var(--snice-spacing-lg, 2rem);
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+  transform: translateY(100%);
+  transition: transform var(--snice-transition-normal, 0.25s) ease;
+}
+
+:host(:hover) .controls {
+  transform: translateY(0);
+}
+
+/* Media queries for mobile */
+@media (max-width: 768px) {
+  .controls {
+    transform: translateY(0);
+    background: rgba(0, 0, 0, 0.8);
+  }
+  
+  .content {
+    padding: var(--snice-spacing-md, 1rem);
+  }
+}

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

@@ -0,0 +1,34 @@
+import { element, property } from 'snice';
+import css from './snice-layout-fullscreen.css?inline';
+
+@element('snice-layout-fullscreen')
+export class SniceLayoutFullscreen extends HTMLElement {
+  @property({ type: Boolean, reflect: true })
+  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;
+  }
+}

package/components/layout/snice-layout-landing.css

@@ -0,0 +1,92 @@
+/* Landing Page Layout */
+:host {
+  display: block;
+  font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+}
+
+.layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--snice-spacing-lg, 2rem);
+}
+
+.header {
+  background: var(--snice-color-background, white);
+  border-bottom: 1px solid var(--snice-color-border, #d1d5db);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.header .container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: var(--snice-spacing-md, 1rem);
+  padding-bottom: var(--snice-spacing-md, 1rem);
+}
+
+.brand h1 {
+  margin: 0;
+  font-size: var(--snice-font-size-xl, 1.5rem);
+  font-weight: var(--snice-font-weight-bold, 700);
+  color: var(--snice-color-text, #374151);
+}
+
+.nav {
+  display: flex;
+  gap: var(--snice-spacing-lg, 2rem);
+}
+
+.nav ::slotted(a) {
+  text-decoration: none;
+  color: var(--snice-color-text-secondary, #6b7280);
+  font-weight: var(--snice-font-weight-medium, 500);
+  transition: color var(--snice-transition-fast, 0.15s) ease;
+}
+
+.nav ::slotted(a:hover) {
+  color: var(--snice-color-primary, #3b82f6);
+}
+
+.main {
+  flex: 1;
+}
+
+.hero {
+  background: var(--snice-color-background-secondary, #f8fafc);
+  padding: var(--snice-spacing-2xl, 4rem) 0;
+}
+
+.content {
+  background: var(--snice-color-background, white);
+}
+
+.footer {
+  background: var(--snice-color-background-tertiary, #f1f5f9);
+  border-top: 1px solid var(--snice-color-border, #d1d5db);
+  padding: var(--snice-spacing-xl, 3rem) 0;
+  margin-top: auto;
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .header .container {
+    flex-direction: column;
+    gap: var(--snice-spacing-md, 1rem);
+  }
+  
+  .nav {
+    gap: var(--snice-spacing-md, 1rem);
+  }
+  
+  .hero {
+    padding: var(--snice-spacing-xl, 3rem) 0;
+  }
+}

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

@@ -0,0 +1,47 @@
+import { element } from 'snice';
+import css from './snice-layout-landing.css?inline';
+
+@element('snice-layout-landing')
+export 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;
+  }
+}

package/components/layout/snice-layout-minimal.css

@@ -0,0 +1,16 @@
+/* Minimal Layout - Just content */
+:host {
+  display: block;
+  font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+}
+
+.layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.main {
+  flex: 1;
+  background: var(--snice-color-background, white);
+}

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

@@ -0,0 +1,19 @@
+import { element } from 'snice';
+import css from './snice-layout-minimal.css?inline';
+
+@element('snice-layout-minimal')
+export class SniceLayoutMinimal extends HTMLElement {
+  html() {
+    return /*html*/`
+      <div class="layout">
+        <main class="main">
+          <slot></slot>
+        </main>
+      </div>
+    `;
+  }
+
+  css() {
+    return css;
+  }
+}