snice 2.1.5 → 2.2.0

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

@@ -1,48 +0,0 @@
-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

@@ -1,104 +0,0 @@
-/* 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

@@ -1,35 +0,0 @@
-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

@@ -1,51 +0,0 @@
-/* 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

@@ -1,22 +0,0 @@
-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

@@ -1,98 +0,0 @@
-/* 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

@@ -1,45 +0,0 @@
-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

@@ -1,72 +0,0 @@
-/* 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

@@ -1,34 +0,0 @@
-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

@@ -1,92 +0,0 @@
-/* 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

@@ -1,47 +0,0 @@
-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

@@ -1,16 +0,0 @@
-/* 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

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