npm - snice - Versions diffs - 1.14.3 → 2.1.0 - Mend

snice 1.14.3 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (185) hide show

package/bin/templates/base/tsconfig.json +5 -4
package/components/accordion/demo.html +403 -0
package/components/accordion/snice-accordion-item.css +85 -0
package/components/accordion/snice-accordion-item.ts +226 -0
package/components/accordion/snice-accordion.css +31 -0
package/components/accordion/snice-accordion.ts +182 -0
package/components/accordion/snice-accordion.types.ts +32 -0
package/components/alert/demo.html +445 -0
package/components/alert/snice-alert.css +195 -0
package/components/alert/snice-alert.ts +141 -0
package/components/alert/snice-alert.types.ts +12 -0
package/components/avatar/demo.html +598 -0
package/components/avatar/snice-avatar.css +131 -0
package/components/avatar/snice-avatar.ts +136 -0
package/components/avatar/snice-avatar.types.ts +13 -0
package/components/badge/demo.html +523 -0
package/components/badge/snice-badge.css +161 -0
package/components/badge/snice-badge.ts +117 -0
package/components/badge/snice-badge.types.ts +16 -0
package/components/breadcrumbs/demo.html +404 -0
package/components/breadcrumbs/snice-breadcrumbs.css +133 -0
package/components/breadcrumbs/snice-breadcrumbs.ts +191 -0
package/components/breadcrumbs/snice-breadcrumbs.types.ts +26 -0
package/components/breadcrumbs/snice-crumb.ts +26 -0
package/components/button/demo.html +42 -0
package/components/button/snice-button.css +230 -0
package/components/button/snice-button.ts +169 -0
package/components/button/snice-button.types.ts +25 -0
package/components/card/demo.html +525 -0
package/components/card/snice-card.css +140 -0
package/components/card/snice-card.ts +102 -0
package/components/card/snice-card.types.ts +10 -0
package/components/checkbox/demo.html +253 -0
package/components/checkbox/snice-checkbox.css +164 -0
package/components/checkbox/snice-checkbox.ts +223 -0
package/components/checkbox/snice-checkbox.types.ts +22 -0
package/components/chip/demo.html +383 -0
package/components/chip/snice-chip.css +195 -0
package/components/chip/snice-chip.ts +139 -0
package/components/chip/snice-chip.types.ts +15 -0
package/components/date-picker/README.md +233 -0
package/components/date-picker/demo.html +191 -0
package/components/date-picker/snice-date-picker.css +330 -0
package/components/date-picker/snice-date-picker.ts +777 -0
package/components/date-picker/snice-date-picker.types.ts +83 -0
package/components/divider/demo.html +233 -0
package/components/divider/snice-divider.css +155 -0
package/components/divider/snice-divider.ts +69 -0
package/components/divider/snice-divider.types.ts +15 -0
package/components/drawer/demo.html +328 -0
package/components/drawer/snice-drawer.css +476 -0
package/components/drawer/snice-drawer.ts +287 -0
package/components/drawer/snice-drawer.types.ts +17 -0
package/components/global.d.ts +14 -0
package/components/input/demo.html +303 -0
package/components/input/snice-input.css +257 -0
package/components/input/snice-input.ts +442 -0
package/components/input/snice-input.types.ts +59 -0
package/components/input/test.html +77 -0
package/components/layout/README.md +260 -0
package/components/layout/demo.html +538 -0
package/components/layout/snice-layout-blog.css +129 -0
package/components/layout/snice-layout-blog.ts +48 -0
package/components/layout/snice-layout-card.css +104 -0
package/components/layout/snice-layout-card.ts +35 -0
package/components/layout/snice-layout-centered.css +51 -0
package/components/layout/snice-layout-centered.ts +22 -0
package/components/layout/snice-layout-dashboard.css +98 -0
package/components/layout/snice-layout-dashboard.ts +45 -0
package/components/layout/snice-layout-fullscreen.css +72 -0
package/components/layout/snice-layout-fullscreen.ts +34 -0
package/components/layout/snice-layout-landing.css +92 -0
package/components/layout/snice-layout-landing.ts +47 -0
package/components/layout/snice-layout-minimal.css +16 -0
package/components/layout/snice-layout-minimal.ts +19 -0
package/components/layout/snice-layout-sidebar.css +117 -0
package/components/layout/snice-layout-sidebar.ts +48 -0
package/components/layout/snice-layout-split.css +103 -0
package/components/layout/snice-layout-split.ts +29 -0
package/components/layout/snice-layout.css +72 -0
package/components/layout/snice-layout.ts +35 -0
package/components/layout/snice-layout.types.ts +5 -0
package/components/login/demo-auth-controller.ts +185 -0
package/components/login/demo.html +470 -0
package/components/login/snice-login.css +204 -0
package/components/login/snice-login.ts +337 -0
package/components/login/snice-login.types.ts +34 -0
package/components/modal/demo.html +291 -0
package/components/modal/snice-modal.css +203 -0
package/components/modal/snice-modal.ts +233 -0
package/components/modal/snice-modal.types.ts +21 -0
package/components/pagination/demo.html +395 -0
package/components/pagination/snice-pagination.ts +333 -0
package/components/pagination/snice-pagination.types.ts +21 -0
package/components/progress/demo.html +510 -0
package/components/progress/snice-progress.css +267 -0
package/components/progress/snice-progress.ts +247 -0
package/components/progress/snice-progress.types.ts +19 -0
package/components/radio/demo.html +287 -0
package/components/radio/snice-radio.css +171 -0
package/components/radio/snice-radio.ts +218 -0
package/components/radio/snice-radio.types.ts +21 -0
package/components/select/demo.html +511 -0
package/components/select/snice-option.ts +52 -0
package/components/select/snice-option.types.ts +14 -0
package/components/select/snice-select.css +392 -0
package/components/select/snice-select.ts +796 -0
package/components/select/snice-select.types.ts +55 -0
package/components/skeleton/demo.html +514 -0
package/components/skeleton/snice-skeleton.css +109 -0
package/components/skeleton/snice-skeleton.ts +126 -0
package/components/skeleton/snice-skeleton.types.ts +11 -0
package/components/switch/demo.html +284 -0
package/components/switch/snice-switch.css +221 -0
package/components/switch/snice-switch.ts +229 -0
package/components/switch/snice-switch.types.ts +23 -0
package/components/symbols.ts +23 -0
package/components/table/demo-table-controller.ts +100 -0
package/components/table/demo.html +480 -0
package/components/table/snice-cell-boolean.ts +112 -0
package/components/table/snice-cell-date.ts +210 -0
package/components/table/snice-cell-duration.ts +91 -0
package/components/table/snice-cell-filesize.ts +90 -0
package/components/table/snice-cell-number.ts +165 -0
package/components/table/snice-cell-progress.ts +83 -0
package/components/table/snice-cell-rating.ts +82 -0
package/components/table/snice-cell-sparkline.ts +253 -0
package/components/table/snice-cell-text.ts +125 -0
package/components/table/snice-cell.css +296 -0
package/components/table/snice-cell.ts +473 -0
package/components/table/snice-column.ts +353 -0
package/components/table/snice-header.css +243 -0
package/components/table/snice-header.ts +261 -0
package/components/table/snice-progress.ts +66 -0
package/components/table/snice-rating.ts +45 -0
package/components/table/snice-row.css +255 -0
package/components/table/snice-row.ts +331 -0
package/components/table/snice-table.css +241 -0
package/components/table/snice-table.ts +737 -0
package/components/table/snice-table.types.ts +158 -0
package/components/tabs/demo.html +487 -0
package/components/tabs/snice-tab-panel.css +264 -0
package/components/tabs/snice-tab-panel.ts +47 -0
package/components/tabs/snice-tab.css +96 -0
package/components/tabs/snice-tab.ts +65 -0
package/components/tabs/snice-tabs.css +189 -0
package/components/tabs/snice-tabs.ts +332 -0
package/components/tabs/snice-tabs.types.ts +28 -0
package/components/theme/theme.css +234 -0
package/components/toast/demo.html +329 -0
package/components/toast/snice-toast-container.ts +256 -0
package/components/toast/snice-toast.css +213 -0
package/components/toast/snice-toast.ts +276 -0
package/components/toast/snice-toast.types.ts +35 -0
package/components/tooltip/demo.html +350 -0
package/components/tooltip/snice-tooltip-portal.css +79 -0
package/components/tooltip/snice-tooltip.css +117 -0
package/components/tooltip/snice-tooltip.ts +612 -0
package/components/tooltip/snice-tooltip.types.ts +32 -0
package/components/transitions.ts +94 -0
package/components/tsconfig.json +18 -0
package/dist/index.cjs +441 -329
package/dist/index.cjs.map +1 -1
package/dist/index.cjs.min.map +1 -1
package/dist/index.esm.js +441 -329
package/dist/index.esm.js.map +1 -1
package/dist/index.esm.min.js +3 -3
package/dist/index.esm.min.js.map +1 -1
package/dist/index.iife.js +441 -329
package/dist/index.iife.js.map +1 -1
package/dist/index.iife.min.js +3 -3
package/dist/index.iife.min.js.map +1 -1
package/dist/symbols.esm.js +1 -1
package/dist/transitions.esm.js +1 -1
package/dist/types/controller.d.ts +1 -1
package/dist/types/element.d.ts +10 -10
package/dist/types/events.d.ts +2 -2
package/dist/types/index.d.ts +1 -1
package/dist/types/observe.d.ts +1 -1
package/dist/types/request-response.d.ts +2 -3
package/dist/types/router.d.ts +1 -1
package/package.json +9 -3
package/dist/index.cjs.min +0 -15
package/dist/symbols.cjs +0 -103
package/dist/transitions.cjs +0 -219

package/components/input/snice-input.types.ts ADDED Viewed

@@ -0,0 +1,59 @@
+export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local';
+export type InputSize = 'small' | 'medium' | 'large';
+export type InputVariant = 'outlined' | 'filled' | 'underlined';
+export interface SniceInputElement extends HTMLElement {
+  type: InputType;
+  size: InputSize;
+  variant: InputVariant;
+  value: string;
+  placeholder: string;
+  label: string;
+  helperText: string;
+  errorText: string;
+  disabled: boolean;
+  readonly: boolean;
+  required: boolean;
+  invalid: boolean;
+  clearable: boolean;
+  password: boolean;
+  min: string;
+  max: string;
+  step: string;
+  pattern: string;
+  maxlength: number;
+  minlength: number;
+  autocomplete: string;
+  name: string;
+  prefixIcon: string;
+  suffixIcon: string;
+  focus(): void;
+  blur(): void;
+  select(): void;
+  clear(): void;
+  checkValidity(): boolean;
+  reportValidity(): boolean;
+  setCustomValidity(message: string): void;
+}
+export interface InputChangeDetail {
+  value: string;
+  input: SniceInputElement;
+}
+export interface InputInputDetail {
+  value: string;
+  input: SniceInputElement;
+}
+export interface InputFocusDetail {
+  input: SniceInputElement;
+}
+export interface InputBlurDetail {
+  input: SniceInputElement;
+}
+export interface InputClearDetail {
+  input: SniceInputElement;
+}

package/components/input/test.html ADDED Viewed

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Input Test</title>
+  <link rel="stylesheet" href="../theme/theme.css">
+  <style>
+    body {
+      padding: 40px;
+      font-family: var(--snice-font-family);
+      background: var(--snice-color-background);
+      color: var(--snice-color-text);
+    }
+    .test-group {
+      margin-bottom: 30px;
+      padding: 20px;
+      background: var(--snice-color-background-secondary);
+      border-radius: 8px;
+    }
+  </style>
+</head>
+<body>
+  <h2>Input Component Test</h2>
+  <div class="test-group">
+    <h3>Test 1: Basic with Label</h3>
+    <snice-input label="Test Label" placeholder="Enter text..."></snice-input>
+  </div>
+  <div class="test-group">
+    <h3>Test 2: Number with Max/Min</h3>
+    <snice-input
+      type="number"
+      label="Number Input (0-100)"
+      min="0"
+      max="100"
+      step="5"
+      placeholder="0-100">
+    </snice-input>
+  </div>
+  <div class="test-group">
+    <h3>Test 3: Required Field</h3>
+    <snice-input
+      label="Required Field"
+      placeholder="This is required"
+      required>
+    </snice-input>
+  </div>
+  <div class="test-group">
+    <h3>Test 4: Max Length</h3>
+    <snice-input
+      label="Max 10 Characters"
+      maxlength="10"
+      placeholder="Max 10 chars">
+    </snice-input>
+  </div>
+  <script type="module">
+    import './snice-input.ts';
+    // Test that we can access the element and its properties
+    setTimeout(() => {
+      const inputs = document.querySelectorAll('snice-input');
+      inputs.forEach(input => {
+        console.log('Input label:', input.label);
+        console.log('Shadow root:', input.shadowRoot);
+        const labelEl = input.shadowRoot?.querySelector('.label');
+        console.log('Label element:', labelEl);
+        console.log('Label text:', labelEl?.textContent);
+      });
+    }, 1000);
+  </script>
+</body>
+</html>

package/components/layout/README.md ADDED Viewed

@@ -0,0 +1,260 @@
+# Layout Components
+A collection of layout components for structuring web applications.
+## Components
+### snice-layout
+Basic layout with header, main content, and footer areas.
+```html
+<snice-layout>
+  <div slot="brand"><h1>My App</h1></div>
+  <nav slot="nav">
+    <a href="/">Home</a>
+    <a href="/about">About</a>
+  </nav>
+  <!-- Main content -->
+  <div>
+    <h1>Welcome</h1>
+    <p>This is the main content area.</p>
+  </div>
+  <div slot="footer">
+    <p>&copy; 2024 My Company</p>
+  </div>
+</snice-layout>
+```
+### snice-layout-sidebar
+Layout with collapsible sidebar navigation.
+```html
+<snice-layout-sidebar>
+  <div slot="brand"><h2>Dashboard</h2></div>
+  <nav slot="nav">
+    <a href="/dashboard">Overview</a>
+    <a href="/users">Users</a>
+    <a href="/settings">Settings</a>
+  </nav>
+  <div slot="header">
+    <h1>Page Title</h1>
+  </div>
+  <!-- Main content -->
+  <div>
+    <p>Dashboard content goes here</p>
+  </div>
+</snice-layout-sidebar>
+```
+### snice-layout-minimal
+Clean layout with just content area.
+```html
+<snice-layout-minimal>
+  <div>
+    <h1>Simple Page</h1>
+    <p>Minimal layout for focused content.</p>
+  </div>
+</snice-layout-minimal>
+```
+### snice-layout-centered
+Centered container perfect for forms, authentication pages.
+```html
+<snice-layout-centered width="md">
+  <form>
+    <h2>Sign In</h2>
+    <input type="email" placeholder="Email">
+    <input type="password" placeholder="Password">
+    <button type="submit">Sign In</button>
+  </form>
+</snice-layout-centered>
+```
+#### Properties
+- `width`: Container width - `"sm"` | `"md"` | `"lg"` | `"xl"` (default: `"md"`)
+### snice-layout-landing
+Marketing/landing page layout with hero section.
+```html
+<snice-layout-landing>
+  <div slot="brand"><h1>Company</h1></div>
+  <nav slot="nav">
+    <a href="#features">Features</a>
+    <a href="#pricing">Pricing</a>
+  </nav>
+  <button slot="cta">Get Started</button>
+  <div slot="hero">
+    <h1>Amazing Product</h1>
+    <p>Transform your business today</p>
+  </div>
+  <!-- Main content sections -->
+  <section>
+    <h2>Features</h2>
+    <p>Feature content...</p>
+  </section>
+</snice-layout-landing>
+```
+### snice-layout-split
+Two-panel layout with configurable split ratios.
+```html
+<snice-layout-split direction="horizontal" ratio="60-40">
+  <div slot="left">
+    <h2>Left Panel</h2>
+    <p>Content for left side</p>
+  </div>
+  <div slot="right">
+    <h2>Right Panel</h2>
+    <p>Content for right side</p>
+  </div>
+</snice-layout-split>
+```
+#### Properties
+- `direction`: Split direction - `"horizontal"` | `"vertical"` (default: `"horizontal"`)
+- `ratio`: Panel size ratio - `"50-50"` | `"60-40"` | `"70-30"` | `"33-67"` | `"67-33"` (default: `"50-50"`)
+### snice-layout-card
+Grid layout optimized for card-based content.
+```html
+<snice-layout-card columns="3" gap="lg">
+  <div slot="header">
+    <h1>Product Gallery</h1>
+  </div>
+  <!-- Cards go in main slot -->
+  <div class="card">Product 1</div>
+  <div class="card">Product 2</div>
+  <div class="card">Product 3</div>
+</snice-layout-card>
+```
+#### Properties
+- `columns`: Number of columns - `"1"` | `"2"` | `"3"` | `"4"` | `"6"` (default: `"3"`)
+- `gap`: Grid gap size - `"sm"` | `"md"` | `"lg"` | `"xl"` (default: `"md"`)
+### snice-layout-blog
+Article layout with sidebar for additional content.
+```html
+<snice-layout-blog>
+  <div slot="brand"><h1>My Blog</h1></div>
+  <nav slot="nav">
+    <a href="/">Home</a>
+    <a href="/archive">Archive</a>
+  </nav>
+  <!-- Article content -->
+  <article>
+    <h1>Blog Post Title</h1>
+    <p>Article content goes here...</p>
+  </article>
+  <div slot="sidebar">
+    <h3>Recent Posts</h3>
+    <ul>
+      <li><a href="/post1">Post 1</a></li>
+      <li><a href="/post2">Post 2</a></li>
+    </ul>
+  </div>
+</snice-layout-blog>
+```
+### snice-layout-dashboard
+Complex dashboard layout with multiple content areas.
+```html
+<snice-layout-dashboard>
+  <div slot="brand"><h1>Analytics</h1></div>
+  <input slot="search" type="search" placeholder="Search...">
+  <div slot="user">Welcome, John!</div>
+  <nav slot="nav">
+    <a href="/dashboard">Overview</a>
+    <a href="/analytics">Analytics</a>
+  </nav>
+  <div slot="sidebar">
+    <h3>Quick Actions</h3>
+    <button>New Report</button>
+  </div>
+  <!-- Main dashboard content -->
+  <div>
+    <h2>Dashboard Overview</h2>
+    <div class="metrics">...</div>
+  </div>
+  <div slot="right-sidebar">
+    <h3>Recent Activity</h3>
+    <ul>...</ul>
+  </div>
+</snice-layout-dashboard>
+```
+### snice-layout-fullscreen
+Immersive fullscreen layout for presentations, media viewers.
+```html
+<snice-layout-fullscreen overlay>
+  <img slot="background" src="background.jpg" alt="Background">
+  <div slot="overlay">
+    <h1>Overlay Content</h1>
+  </div>
+  <!-- Main fullscreen content -->
+  <div>
+    <h2>Centered Content</h2>
+  </div>
+  <div slot="controls">
+    <button>Play</button>
+    <button>Pause</button>
+    <button>Fullscreen</button>
+  </div>
+</snice-layout-fullscreen>
+```
+#### Properties
+- `overlay`: Show overlay background - `boolean` (default: `false`)
+## Styling
+All layout components use the Snice design system CSS custom properties for consistent theming. You can override these variables to customize the appearance:
+```css
+:root {
+  --snice-color-primary: #your-primary-color;
+  --snice-color-background: #your-background-color;
+  --snice-spacing-md: your-spacing-value;
+  /* ... other theme variables */
+}
+```
+## Responsive Design
+All layouts include responsive breakpoints and will adapt to mobile devices automatically. Most layouts stack vertically on small screens for optimal mobile experience.
+## Events
+Layout components are structural and don't emit custom events. However, you can listen for standard DOM events on slotted content:
+```javascript
+document.querySelector('snice-layout-sidebar')
+  .addEventListener('click', (e) => {
+    if (e.target.matches('.sidebar-toggle')) {
+      // Handle sidebar toggle
+    }
+  });
+```