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/select/demo.html ADDED Viewed

@@ -0,0 +1,511 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Select/Dropdown Demo</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);
+      max-width: 800px;
+      margin: 0 auto;
+    }
+    .section {
+      margin-bottom: 40px;
+    }
+    h2 {
+      color: var(--snice-color-text);
+      margin-bottom: 20px;
+      font-size: var(--snice-font-size-2xl);
+    }
+    h3 {
+      color: var(--snice-color-text-secondary);
+      margin-bottom: 16px;
+      font-size: var(--snice-font-size-lg);
+    }
+    .select-group {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      margin-bottom: 20px;
+    }
+    .row {
+      display: flex;
+      gap: 20px;
+      align-items: flex-start;
+      flex-wrap: wrap;
+    }
+    .output {
+      padding: 10px;
+      background: var(--snice-color-background-secondary);
+      border-radius: var(--snice-border-radius-md);
+      font-family: monospace;
+      font-size: var(--snice-font-size-sm);
+      margin-top: 10px;
+    }
+    button {
+      padding: 8px 16px;
+      background: var(--snice-color-primary);
+      color: white;
+      border: none;
+      border-radius: var(--snice-border-radius-md);
+      cursor: pointer;
+      font-size: var(--snice-font-size-md);
+      margin-right: 8px;
+    }
+    button:hover {
+      background: var(--snice-color-primary-hover);
+    }
+    .form-row {
+      margin-bottom: 16px;
+    }
+    .card {
+      background: var(--snice-color-background-secondary);
+      border: 1px solid var(--snice-color-border);
+      border-radius: var(--snice-border-radius-lg);
+      padding: 20px;
+      margin-bottom: 20px;
+    }
+    snice-select {
+      width: 250px;
+    }
+  </style>
+</head>
+<body>
+  <h2>Select/Dropdown Component Demo</h2>
+  <div class="section">
+    <h3>Basic Select</h3>
+    <div class="select-group">
+      <snice-select
+        id="basic-select"
+        label="Choose an option"
+        placeholder="Select an option">
+        <snice-option value="option1">Option 1</snice-option>
+        <snice-option value="option2">Option 2</snice-option>
+        <snice-option value="option3">Option 3</snice-option>
+        <snice-option value="option4" disabled>Option 4 (disabled)</snice-option>
+        <snice-option value="option5">Option 5</snice-option>
+      </snice-select>
+      <snice-select
+        id="pre-selected"
+        label="Pre-selected value"
+        value="option2">
+        <snice-option value="option1">Option 1</snice-option>
+        <snice-option value="option2">Option 2</snice-option>
+        <snice-option value="option3">Option 3</snice-option>
+      </snice-select>
+      <snice-select
+        label="Disabled select"
+        value="option1"
+        disabled>
+        <snice-option value="option1">Option 1</snice-option>
+        <snice-option value="option2">Option 2</snice-option>
+        <snice-option value="option3">Option 3</snice-option>
+      </snice-select>
+    </div>
+  </div>
+  <div class="section">
+    <h3>Sizes</h3>
+    <div class="row">
+      <snice-select
+        size="small"
+        label="Small select"
+        placeholder="Small size">
+        <snice-option value="1">First Option</snice-option>
+        <snice-option value="2">Second Option</snice-option>
+        <snice-option value="3">Third Option</snice-option>
+      </snice-select>
+      <snice-select
+        size="medium"
+        label="Medium select (default)"
+        placeholder="Medium size">
+        <snice-option value="1">First Option</snice-option>
+        <snice-option value="2">Second Option</snice-option>
+        <snice-option value="3">Third Option</snice-option>
+      </snice-select>
+      <snice-select
+        size="large"
+        label="Large select"
+        placeholder="Large size">
+        <snice-option value="1">First Option</snice-option>
+        <snice-option value="2">Second Option</snice-option>
+        <snice-option value="3">Third Option</snice-option>
+      </snice-select>
+    </div>
+  </div>
+  <div class="section">
+    <h3>Features</h3>
+    <div class="row">
+      <snice-select
+        id="searchable-select"
+        label="Searchable"
+        placeholder="Type to search..."
+        searchable>
+        <snice-option value="us" icon="https://flagcdn.com/w20/us.png">United States</snice-option>
+        <snice-option value="uk" icon="https://flagcdn.com/w20/gb.png">United Kingdom</snice-option>
+        <snice-option value="ca" icon="https://flagcdn.com/w20/ca.png">Canada</snice-option>
+        <snice-option value="au" icon="https://flagcdn.com/w20/au.png">Australia</snice-option>
+        <snice-option value="de" icon="https://flagcdn.com/w20/de.png">Germany</snice-option>
+        <snice-option value="fr" icon="https://flagcdn.com/w20/fr.png">France</snice-option>
+        <snice-option value="es" icon="https://flagcdn.com/w20/es.png">Spain</snice-option>
+        <snice-option value="it" icon="https://flagcdn.com/w20/it.png">Italy</snice-option>
+        <snice-option value="jp" icon="https://flagcdn.com/w20/jp.png">Japan</snice-option>
+        <snice-option value="cn" icon="https://flagcdn.com/w20/cn.png">China</snice-option>
+        <snice-option value="in" icon="https://flagcdn.com/w20/in.png">India</snice-option>
+        <snice-option value="br" icon="https://flagcdn.com/w20/br.png">Brazil</snice-option>
+        <snice-option value="mx" icon="https://flagcdn.com/w20/mx.png">Mexico</snice-option>
+      </snice-select>
+      <snice-select
+        id="clearable-select"
+        label="Clearable"
+        placeholder="Can be cleared"
+        clearable
+        value="option2">
+        <snice-option value="option1">Option 1</snice-option>
+        <snice-option value="option2">Option 2</snice-option>
+        <snice-option value="option3">Option 3</snice-option>
+      </snice-select>
+      <snice-select
+        id="required-select"
+        label="Required field"
+        placeholder="This is required"
+        required>
+        <snice-option value="">Select one...</snice-option>
+        <snice-option value="yes">Yes</snice-option>
+        <snice-option value="no">No</snice-option>
+        <snice-option value="maybe">Maybe</snice-option>
+      </snice-select>
+    </div>
+  </div>
+  <div class="section">
+    <h3>Multiple Selection</h3>
+    <snice-select
+      id="multiple-select"
+      label="Select multiple options"
+      placeholder="Choose one or more..."
+      multiple
+      clearable>
+      <snice-option value="electronics">Electronics</snice-option>
+      <snice-option value="clothing">Clothing</snice-option>
+      <snice-option value="books">Books</snice-option>
+      <snice-option value="home">Home & Garden</snice-option>
+      <snice-option value="sports">Sports & Outdoors</snice-option>
+      <snice-option value="toys">Toys & Games</snice-option>
+    </snice-select>
+    <snice-select
+      id="multiple-searchable"
+      label="Multiple with search"
+      placeholder="Search and select..."
+      multiple
+      searchable
+      clearable
+      style="width: 350px;">
+      <snice-option value="html">HTML</snice-option>
+      <snice-option value="css">CSS</snice-option>
+      <snice-option value="js">JavaScript</snice-option>
+      <snice-option value="react">React</snice-option>
+      <snice-option value="vue">Vue.js</snice-option>
+      <snice-option value="angular">Angular</snice-option>
+      <snice-option value="node">Node.js</snice-option>
+      <snice-option value="python">Python</snice-option>
+      <snice-option value="django">Django</snice-option>
+      <snice-option value="sql">SQL</snice-option>
+      <snice-option value="mongodb">MongoDB</snice-option>
+      <snice-option value="aws">AWS</snice-option>
+    </snice-select>
+  </div>
+  <div class="section">
+    <h3>Country Selector Example</h3>
+    <div class="card">
+      <snice-select
+        id="country-select"
+        label="Select your country"
+        placeholder="Choose a country..."
+        searchable
+        clearable>
+        <snice-option value="us" icon="https://flagcdn.com/w20/us.png">United States</snice-option>
+        <snice-option value="uk" icon="https://flagcdn.com/w20/gb.png">United Kingdom</snice-option>
+        <snice-option value="ca" icon="https://flagcdn.com/w20/ca.png">Canada</snice-option>
+        <snice-option value="au" icon="https://flagcdn.com/w20/au.png">Australia</snice-option>
+        <snice-option value="de" icon="https://flagcdn.com/w20/de.png">Germany</snice-option>
+        <snice-option value="fr" icon="https://flagcdn.com/w20/fr.png">France</snice-option>
+        <snice-option value="es" icon="https://flagcdn.com/w20/es.png">Spain</snice-option>
+        <snice-option value="it" icon="https://flagcdn.com/w20/it.png">Italy</snice-option>
+        <snice-option value="jp" icon="https://flagcdn.com/w20/jp.png">Japan</snice-option>
+        <snice-option value="cn" icon="https://flagcdn.com/w20/cn.png">China</snice-option>
+        <snice-option value="in" icon="https://flagcdn.com/w20/in.png">India</snice-option>
+        <snice-option value="br" icon="https://flagcdn.com/w20/br.png">Brazil</snice-option>
+        <snice-option value="mx" icon="https://flagcdn.com/w20/mx.png">Mexico</snice-option>
+        <snice-option value="kr" icon="https://flagcdn.com/w20/kr.png">South Korea</snice-option>
+        <snice-option value="nl" icon="https://flagcdn.com/w20/nl.png">Netherlands</snice-option>
+      </snice-select>
+      <div id="country-output" class="output">No country selected</div>
+    </div>
+  </div>
+  <div class="section">
+    <h3>Product Filter Example</h3>
+    <div class="card">
+      <div class="form-row">
+        <snice-select
+          id="category-select"
+          label="Category"
+          placeholder="All categories"
+          clearable>
+          <snice-option value="">All Categories</snice-option>
+          <snice-option value="electronics">Electronics</snice-option>
+          <snice-option value="clothing">Clothing</snice-option>
+          <snice-option value="books">Books</snice-option>
+          <snice-option value="home">Home & Garden</snice-option>
+          <snice-option value="sports">Sports & Outdoors</snice-option>
+          <snice-option value="toys">Toys & Games</snice-option>
+        </snice-select>
+      </div>
+      <div class="form-row">
+        <snice-select
+          id="brand-select"
+          label="Brands"
+          placeholder="Select brands..."
+          multiple
+          searchable
+          clearable>
+          <snice-option value="apple">Apple</snice-option>
+          <snice-option value="samsung">Samsung</snice-option>
+          <snice-option value="sony">Sony</snice-option>
+          <snice-option value="lg">LG</snice-option>
+          <snice-option value="nike">Nike</snice-option>
+          <snice-option value="adidas">Adidas</snice-option>
+          <snice-option value="puma">Puma</snice-option>
+        </snice-select>
+      </div>
+      <div class="form-row">
+        <snice-select
+          id="sort-select"
+          label="Sort by"
+          value="relevance">
+          <snice-option value="relevance">Relevance</snice-option>
+          <snice-option value="price-low">Price: Low to High</snice-option>
+          <snice-option value="price-high">Price: High to Low</snice-option>
+          <snice-option value="rating">Customer Rating</snice-option>
+          <snice-option value="newest">Newest First</snice-option>
+        </snice-select>
+      </div>
+      <button onclick="applyFilters()">Apply Filters</button>
+      <div id="filter-output" class="output">No filters applied</div>
+    </div>
+  </div>
+  <div class="section">
+    <h3>States</h3>
+    <div class="select-group">
+      <snice-select
+        label="Invalid state"
+        placeholder="This has an error"
+        invalid
+        value="option1">
+        <snice-option value="option1">Option 1</snice-option>
+        <snice-option value="option2">Option 2</snice-option>
+        <snice-option value="option3">Option 3</snice-option>
+      </snice-select>
+      <snice-select
+        label="Read-only"
+        value="option2"
+        readonly>
+        <snice-option value="option1">Option 1</snice-option>
+        <snice-option value="option2">Option 2</snice-option>
+        <snice-option value="option3">Option 3</snice-option>
+      </snice-select>
+      <snice-select
+        label="Disabled with value"
+        value="option3"
+        disabled>
+        <snice-option value="option1">Option 1</snice-option>
+        <snice-option value="option2">Option 2</snice-option>
+        <snice-option value="option3">Option 3</snice-option>
+      </snice-select>
+    </div>
+  </div>
+  <div class="section">
+    <h3>Interactive Example</h3>
+    <snice-select
+      id="interactive-select"
+      label="Programming Languages"
+      placeholder="Select a language..."
+      searchable
+      clearable>
+      <snice-option value="javascript">JavaScript</snice-option>
+      <snice-option value="python">Python</snice-option>
+      <snice-option value="java">Java</snice-option>
+      <snice-option value="csharp">C#</snice-option>
+      <snice-option value="cpp">C++</snice-option>
+      <snice-option value="ruby">Ruby</snice-option>
+      <snice-option value="go">Go</snice-option>
+      <snice-option value="rust">Rust</snice-option>
+      <snice-option value="typescript">TypeScript</snice-option>
+      <snice-option value="swift">Swift</snice-option>
+      <snice-option value="kotlin">Kotlin</snice-option>
+      <snice-option value="php">PHP</snice-option>
+    </snice-select>
+    <div class="row" style="margin-top: 16px;">
+      <button onclick="document.getElementById('interactive-select').openDropdown()">Open</button>
+      <button onclick="document.getElementById('interactive-select').closeDropdown()">Close</button>
+      <button onclick="document.getElementById('interactive-select').toggleDropdown()">Toggle</button>
+      <button onclick="document.getElementById('interactive-select').selectOption('python')">Select Python</button>
+      <button onclick="document.getElementById('interactive-select').clear()">Clear</button>
+      <button onclick="document.getElementById('interactive-select').focus()">Focus</button>
+      <button onclick="getValue('interactive-select')">Get Value</button>
+    </div>
+    <div id="interactive-output" class="output">Events will appear here...</div>
+  </div>
+  <div class="section">
+    <h3>Form Example</h3>
+    <form id="demo-form">
+      <div class="form-row">
+        <snice-select
+          name="department"
+          label="Department"
+          placeholder="Select department"
+          required>
+          <snice-option value="">Choose...</snice-option>
+          <snice-option value="engineering">Engineering</snice-option>
+          <snice-option value="marketing">Marketing</snice-option>
+          <snice-option value="sales">Sales</snice-option>
+          <snice-option value="hr">Human Resources</snice-option>
+          <snice-option value="finance">Finance</snice-option>
+          <snice-option value="operations">Operations</snice-option>
+        </snice-select>
+      </div>
+      <div class="form-row">
+        <snice-select
+          name="skills"
+          label="Skills"
+          placeholder="Select your skills..."
+          multiple
+          searchable>
+          <snice-option value="html">HTML</snice-option>
+          <snice-option value="css">CSS</snice-option>
+          <snice-option value="js">JavaScript</snice-option>
+          <snice-option value="react">React</snice-option>
+          <snice-option value="vue">Vue.js</snice-option>
+          <snice-option value="angular">Angular</snice-option>
+          <snice-option value="node">Node.js</snice-option>
+          <snice-option value="python">Python</snice-option>
+          <snice-option value="django">Django</snice-option>
+          <snice-option value="sql">SQL</snice-option>
+        </snice-select>
+      </div>
+      <div class="form-row">
+        <snice-select
+          name="experience"
+          label="Years of Experience"
+          required>
+          <snice-option value="">Select...</snice-option>
+          <snice-option value="0-1">0-1 years</snice-option>
+          <snice-option value="1-3">1-3 years</snice-option>
+          <snice-option value="3-5">3-5 years</snice-option>
+          <snice-option value="5-10">5-10 years</snice-option>
+          <snice-option value="10+">10+ years</snice-option>
+        </snice-select>
+      </div>
+      <button type="submit">Submit Form</button>
+    </form>
+    <div id="form-output" class="output">Form data will appear here...</div>
+  </div>
+  <script type="module">
+    import './snice-select.ts';
+    import './snice-option.ts';
+    // Event listeners
+    document.getElementById('country-select').addEventListener('@snice/select-change', (e) => {
+      const selected = e.detail.option;
+      document.getElementById('country-output').textContent =
+        selected ? `Selected: ${selected.label} (${selected.value})` : 'No country selected';
+    });
+    // Product filter
+    window.applyFilters = function() {
+      const filters = {
+        category: document.getElementById('category-select').value,
+        brands: document.getElementById('brand-select').value.split(',').filter(v => v),
+        sort: document.getElementById('sort-select').value
+      };
+      document.getElementById('filter-output').textContent =
+        `Applied filters: ${JSON.stringify(filters, null, 2)}`;
+    };
+    // Interactive events
+    const interactiveSelect = document.getElementById('interactive-select');
+    const interactiveOutput = document.getElementById('interactive-output');
+    interactiveSelect.addEventListener('@snice/select-change', (e) => {
+      interactiveOutput.textContent = `Changed: value=${e.detail.value}, label=${e.detail.option?.label || 'cleared'}`;
+    });
+    interactiveSelect.addEventListener('@snice/select-open', () => {
+      console.log('Dropdown opened');
+    });
+    interactiveSelect.addEventListener('@snice/select-close', () => {
+      console.log('Dropdown closed');
+    });
+    window.getValue = function(id) {
+      const select = document.getElementById(id);
+      interactiveOutput.textContent = `Current value: ${select.value || 'none'}`;
+    };
+    // Form submission
+    document.getElementById('demo-form').addEventListener('submit', (e) => {
+      e.preventDefault();
+      const data = {};
+      // Get select values manually since custom elements might not work with FormData
+      data.department = document.querySelector('[name="department"]').value;
+      data.skills = document.querySelector('[name="skills"]').value.split(',').filter(v => v);
+      data.experience = document.querySelector('[name="experience"]').value;
+      document.getElementById('form-output').textContent =
+        `Form data: ${JSON.stringify(data, null, 2)}`;
+    });
+  </script>
+</body>
+</html>

package/components/select/snice-option.ts ADDED Viewed

@@ -0,0 +1,52 @@
+import { element, property, ready } from 'snice';
+import type { SniceOptionElement } from './snice-option.types';
+@element('snice-option')
+export class SniceOption extends HTMLElement implements SniceOptionElement {
+  @property({ reflect: true })
+  value = '';
+  @property({ reflect: true })
+  label = '';
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+  @property({ type: Boolean, reflect: true })
+  selected = false;
+  @property({ reflect: true })
+  icon = '';
+  html() {
+    // Options are data-only elements, no shadow DOM needed
+    return '';
+  }
+  @ready()
+  init() {
+    // Hide the option element itself as it's only used for data
+    this.style.display = 'none';
+    // If no label is provided, use the text content
+    if (!this.label && this.textContent) {
+      this.label = this.textContent.trim();
+    }
+    // If no value is provided, use the label
+    if (!this.value && this.label) {
+      this.value = this.label;
+    }
+  }
+  // Getter for the option data
+  get optionData() {
+    return {
+      value: this.value,
+      label: this.label || this.textContent?.trim() || this.value,
+      disabled: this.disabled,
+      selected: this.selected,
+      icon: this.icon
+    };
+  }
+}

package/components/select/snice-option.types.ts ADDED Viewed

@@ -0,0 +1,14 @@
+export interface SniceOptionElement extends HTMLElement {
+  value: string;
+  label: string;
+  disabled: boolean;
+  selected: boolean;
+  icon: string;
+  readonly optionData: {
+    value: string;
+    label: string;
+    disabled: boolean;
+    selected: boolean;
+    icon: string;
+  };
+}