npm - @sekiui/elements - Versions diffs - 0.0.41 → 0.0.45 - Mend

@sekiui/elements 0.0.41 → 0.0.45

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 (111) hide show

package/README.md +79 -21
package/dist/cdn/index.d.ts +33 -0
package/dist/cdn/index.js +112 -0
package/dist/{components/p-qBYH2h9w.js → cdn/p-BLeUUc2-.js} +44 -6
package/dist/cdn/seki-button.d.ts +11 -0
package/dist/cdn/seki-button.js +66 -0
package/dist/cdn/seki-field-description.d.ts +11 -0
package/dist/cdn/seki-field-description.js +66 -0
package/dist/cdn/seki-field-error.d.ts +11 -0
package/dist/cdn/seki-field-error.js +94 -0
package/dist/cdn/seki-field-group.d.ts +11 -0
package/dist/cdn/seki-field-group.js +46 -0
package/dist/cdn/seki-field-label.d.ts +11 -0
package/dist/cdn/seki-field-label.js +45 -0
package/dist/cdn/seki-field-legend.d.ts +11 -0
package/dist/cdn/seki-field-legend.js +36 -0
package/dist/cdn/seki-field.d.ts +11 -0
package/dist/cdn/seki-field.js +69 -0
package/dist/cdn/seki-fieldset.d.ts +11 -0
package/dist/cdn/seki-fieldset.js +43 -0
package/dist/cdn/seki-input.d.ts +11 -0
package/dist/cdn/seki-input.js +133 -0
package/dist/cdn/seki-skeleton.d.ts +11 -0
package/dist/cdn/seki-skeleton.js +46 -0
package/dist/cdn/seki-switch.d.ts +11 -0
package/dist/cdn/seki-switch.js +6 -0
package/dist/cjs/{index-DwgP2ssn.js → index-BxD7Xe36.js} +50 -6
package/dist/cjs/index.cjs.js +2 -2
package/dist/cjs/loader.cjs.js +3 -4
package/dist/cjs/seki-button.cjs.entry.js +2 -2
package/dist/cjs/seki-field-description.cjs.entry.js +2 -2
package/dist/cjs/seki-field-error.cjs.entry.js +2 -2
package/dist/cjs/seki-field-group.cjs.entry.js +2 -2
package/dist/cjs/seki-field-label.cjs.entry.js +2 -2
package/dist/cjs/seki-field-legend.cjs.entry.js +2 -2
package/dist/cjs/seki-field.cjs.entry.js +2 -2
package/dist/cjs/seki-fieldset.cjs.entry.js +2 -2
package/dist/cjs/seki-input.cjs.entry.js +38 -3
package/dist/cjs/seki-skeleton.cjs.entry.js +2 -2
package/dist/cjs/seki-switch.cjs.entry.js +1 -1
package/dist/cjs/sekiui.cjs.js +3 -4
package/dist/collection/components/button/seki-button.css +8 -8
package/dist/collection/components/field/seki-field.css +15 -15
package/dist/collection/components/field-description/seki-field-description.css +8 -8
package/dist/collection/components/field-error/seki-field-error.css +8 -8
package/dist/collection/components/field-group/seki-field-group.css +8 -8
package/dist/collection/components/field-label/seki-field-label.css +8 -8
package/dist/collection/components/field-legend/seki-field-legend.css +8 -8
package/dist/collection/components/fieldset/seki-fieldset.css +8 -8
package/dist/collection/components/input/seki-input.css +8 -8
package/dist/collection/components/input/seki-input.js +30 -1
package/dist/collection/components/skeleton/seki-skeleton.css +8 -8
package/dist/collection/components/switch/seki-switch.css +355 -0
package/dist/components/index.js +3 -3
package/dist/components/p-BFmmBW7R.js +1363 -0
package/dist/components/seki-button.js +2 -2
package/dist/components/seki-field-description.js +2 -2
package/dist/components/seki-field-error.js +2 -2
package/dist/components/seki-field-group.js +2 -2
package/dist/components/seki-field-label.js +2 -2
package/dist/components/seki-field-legend.js +2 -2
package/dist/components/seki-field.js +2 -2
package/dist/components/seki-fieldset.js +2 -2
package/dist/components/seki-input.js +33 -4
package/dist/components/seki-skeleton.js +2 -2
package/dist/esm/{index-DVaKDPWs.js → index-ByHohxc0.js} +50 -7
package/dist/esm/index.js +2 -2
package/dist/esm/loader.js +3 -4
package/dist/esm/seki-button.entry.js +2 -2
package/dist/esm/seki-field-description.entry.js +2 -2
package/dist/esm/seki-field-error.entry.js +2 -2
package/dist/esm/seki-field-group.entry.js +2 -2
package/dist/esm/seki-field-label.entry.js +2 -2
package/dist/esm/seki-field-legend.entry.js +2 -2
package/dist/esm/seki-field.entry.js +2 -2
package/dist/esm/seki-fieldset.entry.js +2 -2
package/dist/esm/seki-input.entry.js +38 -3
package/dist/esm/seki-skeleton.entry.js +2 -2
package/dist/esm/seki-switch.entry.js +1 -1
package/dist/esm/sekiui.js +3 -4
package/dist/sekiui/index.esm.js +1 -1
package/dist/sekiui/p-128cfe90.entry.js +1 -0
package/dist/sekiui/p-1b1a5e38.entry.js +1 -0
package/dist/sekiui/p-1c923d08.entry.js +1 -0
package/dist/sekiui/p-281803dd.entry.js +1 -0
package/dist/sekiui/p-2ecf7587.entry.js +1 -0
package/dist/sekiui/p-3b2d3e96.entry.js +1 -0
package/dist/sekiui/p-459bb637.entry.js +1 -0
package/dist/sekiui/p-51f2af94.entry.js +1 -0
package/dist/sekiui/{p-9798772a.entry.js → p-70281e83.entry.js} +1 -1
package/dist/sekiui/p-ByHohxc0.js +2 -0
package/dist/sekiui/p-bc921daa.entry.js +1 -0
package/dist/sekiui/p-d034b071.entry.js +1 -0
package/dist/sekiui/sekiui.css +2 -0
package/dist/sekiui/sekiui.esm.js +1 -1
package/dist/types/components/input/seki-input.d.ts +4 -0
package/package.json +1 -1
package/dist/cjs/app-globals-V2Kpy_OQ.js +0 -5
package/dist/esm/app-globals-DQuL1Twl.js +0 -3
package/dist/sekiui/p-4471a11b.entry.js +0 -1
package/dist/sekiui/p-6e145af3.entry.js +0 -1
package/dist/sekiui/p-90ac85ad.entry.js +0 -1
package/dist/sekiui/p-9b51119c.entry.js +0 -1
package/dist/sekiui/p-DQuL1Twl.js +0 -1
package/dist/sekiui/p-DVaKDPWs.js +0 -2
package/dist/sekiui/p-b02ec16d.entry.js +0 -1
package/dist/sekiui/p-b47f6624.entry.js +0 -1
package/dist/sekiui/p-bfb09d37.entry.js +0 -1
package/dist/sekiui/p-cc81fc67.entry.js +0 -1
package/dist/sekiui/p-e57f16b3.entry.js +0 -1
package/dist/sekiui/p-ea04d3b5.entry.js +0 -1

package/README.md CHANGED Viewed

@@ -31,26 +31,33 @@ npm install @sekiui/elements
 ### Via CDN (No Build Required)
-For quick prototyping or projects without a build system, you can load SekiUI directly from a CDN:
+For quick prototyping or projects without a build system, you can load SekiUI directly from a CDN.
-**Latest Stable Version (GitHub Pages):**
+**⚠️ Important: You must include BOTH the CSS and JavaScript files.**
+**Latest Stable Version (unpkg):**
 ```html
-<script type="module" src="https://sekiui.github.io/SekiUI/latest/sekiui.esm.js"></script>
+<!-- 1. Include design tokens CSS in <head> -->
+<link rel="stylesheet" href="https://unpkg.com/@sekiui/elements@latest/dist/sekiui/sekiui.css">
+<!-- 2. Load Web Components at end of <body> -->
+<script type="module" src="https://unpkg.com/@sekiui/elements@latest/dist/sekiui/sekiui.esm.js"></script>
 ```
 **Latest Stable Version (jsDelivr):**
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@sekiui/elements@latest/dist/sekiui.esm.js"></script>
-```
+<!-- 1. Include design tokens CSS in <head> -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sekiui/elements@latest/dist/sekiui/sekiui.css">
-**Specific Version (GitHub Pages):**
-```html
-<script type="module" src="https://sekiui.github.io/SekiUI/v1.0.0/sekiui.esm.js"></script>
+<!-- 2. Load Web Components at end of <body> -->
+<script type="module" src="https://cdn.jsdelivr.net/npm/@sekiui/elements@latest/dist/sekiui/sekiui.esm.js"></script>
 ```
-**Specific Version (jsDelivr):**
+**Specific Version (recommended for production):**
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@sekiui/elements@1.0.0/dist/sekiui.esm.js"></script>
+<!-- Replace 0.0.41 with your desired version -->
+<link rel="stylesheet" href="https://unpkg.com/@sekiui/elements@0.0.41/dist/sekiui/sekiui.css">
+<script type="module" src="https://unpkg.com/@sekiui/elements@0.0.41/dist/sekiui/sekiui.esm.js"></script>
 ```
 **Complete Example:**
@@ -61,13 +68,20 @@ For quick prototyping or projects without a build system, you can load SekiUI di
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>SekiUI via CDN</title>
+  <!-- STEP 1: Include SekiUI design tokens CSS -->
+  <link rel="stylesheet" href="https://unpkg.com/@sekiui/elements@latest/dist/sekiui/sekiui.css">
 </head>
 <body>
-  <!-- Load SekiUI from CDN -->
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@sekiui/elements@latest/dist/sekiui.esm.js"></script>
+  <h1>SekiUI Components</h1>
   <!-- Use components directly -->
-  <seki-button variant="default">Click me</seki-button>
+  <seki-button variant="primary">Click me</seki-button>
+  <seki-button variant="secondary">Secondary</seki-button>
+  <seki-input type="email" placeholder="you@example.com"></seki-input>
+  <!-- STEP 2: Load SekiUI Web Components -->
+  <script type="module" src="https://unpkg.com/@sekiui/elements@latest/dist/sekiui/sekiui.esm.js"></script>
 </body>
 </html>
 ```
@@ -77,26 +91,59 @@ For quick prototyping or projects without a build system, you can load SekiUI di
 - ✅ CORS headers configured for cross-origin requests
 - ✅ Versioned URLs cached long-term (immutable)
 - ✅ Latest URLs cached short-term (updates automatically)
+- ⚠️ **You must include both CSS and JS files** for components to render with proper styling
 - ⚠️ For production, use versioned URLs to ensure consistency
 ## Usage
 ### Web Components (Vanilla JS)
+When using npm installation, you need to include both the CSS and JavaScript files:
 ```html
-<script type="module" src="node_modules/@sekiui/components/dist/sekiui/sekiui.esm.js"></script>
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- Include design tokens CSS -->
+  <link rel="stylesheet" href="node_modules/@sekiui/elements/dist/sekiui/sekiui.css">
+</head>
+<body>
+  <seki-button variant="primary">Click me</seki-button>
+  <seki-input type="email" placeholder="you@example.com"></seki-input>
+  <!-- Load Web Components -->
+  <script type="module" src="node_modules/@sekiui/elements/dist/sekiui/sekiui.esm.js"></script>
+</body>
+</html>
+```
+**Or with a bundler (Vite, Webpack, etc.):**
+```js
+// Import CSS in your main JS/TS file
+import '@sekiui/elements/dist/sekiui/sekiui.css';
+// Import and register components
+import { defineCustomElements } from '@sekiui/elements/loader';
+defineCustomElements();
+```
+Then use in your HTML:
-<seki-button variant="default">Click me</seki-button>
+```html
+<seki-button variant="primary">Click me</seki-button>
 <seki-input type="email" placeholder="you@example.com"></seki-input>
 ```
 ### React
 ```jsx
+// Import CSS in your main index.js or App.js
+import '@sekiui/elements/dist/sekiui/sekiui.css';
 import { SekiButton } from '@sekiui/elements/react';
 function App() {
-  return <SekiButton variant="default">Click me</SekiButton>;
+  return <SekiButton variant="primary">Click me</SekiButton>;
 }
 ```
@@ -111,6 +158,9 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import { defineCustomElements } from '@sekiui/elements/loader';
+// Import CSS once globally
+import '@sekiui/elements/dist/sekiui/sekiui.css';
 // Register custom elements once globally
 defineCustomElements();
@@ -121,7 +171,7 @@ Then use anywhere in your components:
 ```vue
 <template>
-  <seki-button variant="default">Click me</seki-button>
+  <seki-button variant="primary">Click me</seki-button>
 </template>
 ```
@@ -129,10 +179,11 @@ Then use anywhere in your components:
 ```vue
 <template>
-  <seki-button variant="default">Click me</seki-button>
+  <seki-button variant="primary">Click me</seki-button>
 </template>
 <script setup>
+import '@sekiui/elements/dist/sekiui/sekiui.css';
 import { defineCustomElements } from '@sekiui/elements/loader';
 defineCustomElements();
 </script>
@@ -156,7 +207,14 @@ export default {
 ### Angular
-In your `app.module.ts`:
+**Step 1:** Import CSS in `styles.css` or `styles.scss`:
+```css
+/* src/styles.css */
+@import '@sekiui/elements/dist/sekiui/sekiui.css';
+```
+**Step 2:** Register custom elements in `app.module.ts`:
 ```typescript
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@@ -174,10 +232,10 @@ defineCustomElements();
 export class AppModule { }
 ```
-Then use in your templates:
+**Step 3:** Use in your templates:
 ```html
-<seki-button variant="default">Click me</seki-button>
+<seki-button variant="primary">Click me</seki-button>
 ```
 ## License

package/dist/cdn/index.d.ts ADDED Viewed

@@ -0,0 +1,33 @@
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;

package/dist/cdn/index.js ADDED Viewed

@@ -0,0 +1,112 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './p-BLeUUc2-.js';
+export { g as getAssetPath, r as render, s as setAssetPath, b as setNonce, d as setPlatformOptions } from './p-BLeUUc2-.js';
+const sekiSwitchCss = ":host{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96.1%);--seki-neutral-200:hsl(0, 0%, 89.8%);--seki-neutral-300:hsl(0, 0%, 83.1%);--seki-neutral-400:hsl(0, 0%, 63.9%);--seki-neutral-500:hsl(0, 0%, 45.1%);--seki-neutral-600:hsl(0, 0%, 32.2%);--seki-neutral-700:hsl(0, 0%, 25.1%);--seki-neutral-800:hsl(0, 0%, 14.9%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 3.9%);--seki-primary-50:hsl(210, 100%, 97%);--seki-primary-100:hsl(210, 95%, 93%);--seki-primary-200:hsl(210, 95%, 85%);--seki-primary-300:hsl(210, 90%, 73%);--seki-primary-400:hsl(210, 85%, 58%);--seki-primary-500:hsl(210, 80%, 48%);--seki-primary-600:hsl(210, 75%, 40%);--seki-primary-700:hsl(210, 70%, 32%);--seki-primary-800:hsl(210, 65%, 25%);--seki-primary-900:hsl(210, 60%, 18%);--seki-primary-950:hsl(210, 55%, 10%);--seki-success-500:hsl(142, 71%, 45%);--seki-success-600:hsl(142, 71%, 35%);--seki-warning-500:hsl(38, 92%, 50%);--seki-warning-600:hsl(38, 92%, 40%);--seki-destructive-500:hsl(0, 84.2%, 60.2%);--seki-destructive-600:hsl(0, 72%, 41%)}:host{--seki-background:hsl(0, 0%, 100%);--seki-foreground:hsl(0, 0%, 3.9%);--seki-muted:hsl(0, 0%, 96.1%);--seki-muted-foreground:hsl(0, 0%, 45.1%);--seki-card:hsl(0, 0%, 100%);--seki-card-foreground:hsl(0, 0%, 3.9%);--seki-popover:hsl(0, 0%, 100%);--seki-popover-foreground:hsl(0, 0%, 3.9%);--seki-border:hsl(0, 0%, 89.8%);--seki-input:hsl(0, 0%, 89.8%);--seki-primary:hsl(0, 0%, 9%);--seki-primary-foreground:hsl(0, 0%, 98%);--seki-secondary:hsl(0, 0%, 96.1%);--seki-secondary-foreground:hsl(0, 0%, 9%);--seki-accent:hsl(0, 0%, 96.1%);--seki-accent-foreground:hsl(0, 0%, 9%);--seki-destructive:hsl(0, 84.2%, 60.2%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 3.9%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-400);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-300)}:host([data-theme='dark']){--seki-background:hsl(0, 0%, 3.9%);--seki-foreground:hsl(0, 0%, 98%);--seki-muted:hsl(0, 0%, 14.9%);--seki-muted-foreground:hsl(0, 0%, 63.9%);--seki-card:hsl(0, 0%, 3.9%);--seki-card-foreground:hsl(0, 0%, 98%);--seki-popover:hsl(0, 0%, 3.9%);--seki-popover-foreground:hsl(0, 0%, 98%);--seki-border:hsl(0, 0%, 14.9%);--seki-input:hsl(0, 0%, 14.9%);--seki-primary:hsl(0, 0%, 98%);--seki-primary-foreground:hsl(0, 0%, 9%);--seki-secondary:hsl(0, 0%, 14.9%);--seki-secondary-foreground:hsl(0, 0%, 98%);--seki-accent:hsl(0, 0%, 14.9%);--seki-accent-foreground:hsl(0, 0%, 98%);--seki-destructive:hsl(0, 62.8%, 30.6%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 83.1%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-600);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-700);--seki-button-primary-hover-bg:hsl(0, 0%, 98%, 0.9);--seki-button-secondary-hover-bg:hsl(0, 0%, 14.9%, 0.8)}:host{--seki-button-primary-bg:var(--seki-primary);--seki-button-primary-text:var(--seki-primary-foreground);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:hsl(0, 0%, 9%, 0.9);--seki-button-primary-hover-text:var(--seki-primary-foreground);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-secondary);--seki-button-secondary-text:var(--seki-secondary-foreground);--seki-button-secondary-border:transparent;--seki-button-secondary-hover-bg:hsl(0, 0%, 96.1%, 0.8);--seki-button-secondary-hover-text:var(--seki-secondary-foreground);--seki-button-secondary-hover-border:transparent;--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-foreground);--seki-button-outline-border:var(--seki-input);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-accent-foreground);--seki-button-outline-hover-border:var(--seki-input);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-foreground);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-accent);--seki-button-ghost-hover-text:var(--seki-accent-foreground);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-destructive-foreground);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:hsl(0, 84.2%, 60.2%, 0.9);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:0.375rem;--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2.25rem;--seki-button-md-padding-x:var(--seki-spacing-4, 1rem);--seki-button-md-padding-y:var(--seki-spacing-2, 0.5rem);--seki-button-md-font-size:var(--seki-text-base, 1rem);--seki-button-md-height:2.5rem;--seki-button-lg-padding-x:2rem;--seki-button-lg-padding-y:0.5rem;--seki-button-lg-font-size:1rem;--seki-button-lg-height:2.75rem;--seki-button-icon-sm-size:2rem;--seki-button-icon-size:2.5rem;--seki-button-icon-lg-size:3rem;--seki-button-icon-gap:0.5rem;--seki-button-link-bg:transparent;--seki-button-link-text:var(--seki-primary);--seki-button-link-border:transparent;--seki-button-link-hover-bg:transparent;--seki-button-link-hover-text:var(--seki-primary);--seki-button-link-hover-border:transparent;--seki-button-radius:var(--seki-radius-md, 0.375rem);--seki-button-font-weight:var(--seki-font-medium, 500);--seki-button-transition-duration:150ms;--seki-button-transition-timing:ease-in-out;--seki-button-shadow:var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));--seki-button-shadow-hover:var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));--seki-button-disabled-opacity:0.5;--seki-input-bg:var(--seki-background);--seki-input-border:var(--seki-border);--seki-input-text:var(--seki-foreground);--seki-input-placeholder:var(--seki-muted-foreground);--seki-input-ring:var(--seki-ring);--seki-input-invalid-border:var(--seki-destructive);--seki-input-invalid-ring:var(--seki-destructive);--seki-input-disabled-opacity:0.5;--seki-input-radius:var(--seki-radius-md)}:host{--seki-spacing-0:0;--seki-spacing-0-5:0.125rem;--seki-spacing-1:0.25rem;--seki-spacing-1-5:0.375rem;--seki-spacing-2:0.5rem;--seki-spacing-2-5:0.625rem;--seki-spacing-3:0.75rem;--seki-spacing-3-5:0.875rem;--seki-spacing-4:1rem;--seki-spacing-5:1.25rem;--seki-spacing-6:1.5rem;--seki-spacing-8:2rem;--seki-spacing-10:2.5rem;--seki-spacing-12:3rem;--seki-spacing-16:4rem;--seki-spacing-20:5rem;--seki-spacing-24:6rem;--seki-input-height-sm:2rem;--seki-input-height-md:2.5rem;--seki-input-height-lg:3rem;--seki-input-padding-x:0.75rem;--seki-input-padding-y:0.5rem;--seki-input-font-size:0.875rem;--seki-input-ring-offset:2px}:host{--seki-shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--seki-shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--seki-shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1)}:host{--seki-font-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',\n    Arial, sans-serif;--seki-font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;--seki-text-xs:0.75rem;--seki-text-sm:0.875rem;--seki-text-base:1rem;--seki-text-lg:1.125rem;--seki-text-xl:1.25rem;--seki-text-2xl:1.5rem;--seki-text-3xl:1.875rem;--seki-text-4xl:2.25rem;--seki-font-normal:400;--seki-font-medium:500;--seki-font-semibold:600;--seki-font-bold:700;--seki-leading-tight:1.25;--seki-leading-normal:1.5;--seki-leading-relaxed:1.75}:host{--seki-radius-sm:0.25rem;--seki-radius-md:0.375rem;--seki-radius-lg:0.5rem;--seki-radius-xl:1rem;}:host{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}.switch{width:var(--seki-switch-width, 2.75rem);height:var(--seki-switch-height, 1.5rem);position:relative;display:inline-flex;align-items:center;flex-shrink:0;background-color:var(--seki-switch-bg-unchecked, hsl(var(--muted, 240 4.8% 95.9%)));border-radius:9999px;cursor:pointer;transition:background-color var(--seki-switch-transition-duration, 150ms) ease-out;outline:none}.switch:focus-visible{outline:2px solid var(--seki-switch-focus-ring, hsl(var(--ring, 240 5% 64.9%)));outline-offset:2px}:host([data-state=\"checked\"]) .switch{background-color:var(--seki-switch-bg-checked, hsl(var(--primary, 240 5.9% 10%)))}:host([data-disabled]) .switch{background-color:var(--seki-switch-bg-disabled, hsl(var(--muted, 240 4.8% 95.9%) / 0.5));cursor:not-allowed;opacity:0.5}.thumb{width:var(--seki-switch-thumb-size, 1.25rem);height:var(--seki-switch-thumb-size, 1.25rem);background-color:var(--seki-switch-thumb-bg, hsl(var(--background, 0 0% 100%)));position:absolute;left:0.125rem;border-radius:50%;box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);transition:transform var(--seki-switch-transition-duration, 150ms) ease-out;pointer-events:none}:host([data-state=\"checked\"]) .thumb{transform:translateX(calc(var(--seki-switch-width, 2.75rem) - var(--seki-switch-thumb-size, 1.25rem) - 0.25rem))}@media (prefers-color-scheme: dark){.switch{--seki-switch-bg-unchecked:hsl(var(--muted, 240 3.7% 15.9%))}.thumb{--seki-switch-thumb-bg:hsl(var(--background, 240 10% 3.9%))}}";
+const SekiSwitch = /*@__PURE__*/ proxyCustomElement(class SekiSwitch extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.sekiChange = createEvent(this, "sekiChange");
+        /**
+         * @description Initial checked state for uncontrolled mode. Ignored if checked prop is provided.
+         */
+        this.defaultChecked = false;
+        /**
+         * @description Disables all interactions when true.
+         */
+        this.disabled = false;
+        /**
+         * @description Marks switch as required for form validation.
+         */
+        this.required = false;
+        /**
+         * @description Value sent in form data when switch is checked. Defaults to 'on'.
+         */
+        this.value = 'on';
+        /**
+         * @description Internal checked state for uncontrolled mode.
+         */
+        this.internalChecked = false;
+        /**
+         * Toggle switch state and emit event
+         */
+        this.toggle = () => {
+            if (this.disabled) {
+                return;
+            }
+            const newCheckedState = !this.isChecked;
+            // Update internal state only in uncontrolled mode
+            if (this.checked === undefined) {
+                this.internalChecked = newCheckedState;
+            }
+            // Always emit event (for both controlled and uncontrolled)
+            this.sekiChange.emit({ checked: newCheckedState });
+        };
+        /**
+         * Handle click events
+         */
+        this.handleClick = () => {
+            this.toggle();
+        };
+    }
+    /**
+     * Initialize internal checked state from defaultChecked
+     */
+    componentWillLoad() {
+        this.internalChecked = this.defaultChecked;
+    }
+    /**
+     * Get current checked state (controlled vs uncontrolled)
+     */
+    get isChecked() {
+        return this.checked !== undefined ? this.checked : this.internalChecked;
+    }
+    /**
+     * Handle keyboard events (Space and Enter keys)
+     */
+    handleKeyDown(event) {
+        if (this.disabled) {
+            return;
+        }
+        // Toggle on Space or Enter
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault(); // Prevent page scroll on Space
+            this.toggle();
+        }
+    }
+    render() {
+        const isChecked = this.isChecked;
+        const dataState = isChecked ? 'checked' : 'unchecked';
+        return (h(Host, { key: 'af5412cee9d097e57d8e626522619913b7459e4b', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("div", { key: 'a2c15a3f6b33b4e98e215d82c14cba9dd47bd951', class: "switch", part: "switch", role: "switch", "aria-checked": isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick }, h("span", { key: '51fb815c2710b8fd5ac12bdc90b09c44a3bf9b24', class: "thumb", part: "thumb" })), this.name && (h("input", { key: '37f059d43e01b82c9fc3e6f1f1df5c894e8a6102', type: "checkbox", name: this.name, value: this.value, checked: isChecked, required: this.required, disabled: this.disabled, style: { display: 'none' }, tabindex: -1, "aria-hidden": "true" }))));
+    }
+    static get style() { return sekiSwitchCss; }
+}, [257, "seki-switch", {
+        "checked": [4],
+        "defaultChecked": [4, "default-checked"],
+        "disabled": [4],
+        "required": [4],
+        "name": [1],
+        "value": [1],
+        "ariaLabel": [1, "aria-label"],
+        "internalChecked": [32]
+    }, [[0, "keydown", "handleKeyDown"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["seki-switch"];
+    components.forEach(tagName => { switch (tagName) {
+        case "seki-switch":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SekiSwitch);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+export { SekiSwitch, defineCustomElement as d };

package/dist/{components/p-qBYH2h9w.js → cdn/p-BLeUUc2-.js} RENAMED Viewed

@@ -1,3 +1,5 @@
+const globalStyles = ":host{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96.1%);--seki-neutral-200:hsl(0, 0%, 89.8%);--seki-neutral-300:hsl(0, 0%, 83.1%);--seki-neutral-400:hsl(0, 0%, 63.9%);--seki-neutral-500:hsl(0, 0%, 45.1%);--seki-neutral-600:hsl(0, 0%, 32.2%);--seki-neutral-700:hsl(0, 0%, 25.1%);--seki-neutral-800:hsl(0, 0%, 14.9%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 3.9%);--seki-primary-50:hsl(210, 100%, 97%);--seki-primary-100:hsl(210, 95%, 93%);--seki-primary-200:hsl(210, 95%, 85%);--seki-primary-300:hsl(210, 90%, 73%);--seki-primary-400:hsl(210, 85%, 58%);--seki-primary-500:hsl(210, 80%, 48%);--seki-primary-600:hsl(210, 75%, 40%);--seki-primary-700:hsl(210, 70%, 32%);--seki-primary-800:hsl(210, 65%, 25%);--seki-primary-900:hsl(210, 60%, 18%);--seki-primary-950:hsl(210, 55%, 10%);--seki-success-500:hsl(142, 71%, 45%);--seki-success-600:hsl(142, 71%, 35%);--seki-warning-500:hsl(38, 92%, 50%);--seki-warning-600:hsl(38, 92%, 40%);--seki-destructive-500:hsl(0, 84.2%, 60.2%);--seki-destructive-600:hsl(0, 72%, 41%)}:host{--seki-background:hsl(0, 0%, 100%);--seki-foreground:hsl(0, 0%, 3.9%);--seki-muted:hsl(0, 0%, 96.1%);--seki-muted-foreground:hsl(0, 0%, 45.1%);--seki-card:hsl(0, 0%, 100%);--seki-card-foreground:hsl(0, 0%, 3.9%);--seki-popover:hsl(0, 0%, 100%);--seki-popover-foreground:hsl(0, 0%, 3.9%);--seki-border:hsl(0, 0%, 89.8%);--seki-input:hsl(0, 0%, 89.8%);--seki-primary:hsl(0, 0%, 9%);--seki-primary-foreground:hsl(0, 0%, 98%);--seki-secondary:hsl(0, 0%, 96.1%);--seki-secondary-foreground:hsl(0, 0%, 9%);--seki-accent:hsl(0, 0%, 96.1%);--seki-accent-foreground:hsl(0, 0%, 9%);--seki-destructive:hsl(0, 84.2%, 60.2%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 3.9%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-400);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-300)}:host([data-theme='dark']){--seki-background:hsl(0, 0%, 3.9%);--seki-foreground:hsl(0, 0%, 98%);--seki-muted:hsl(0, 0%, 14.9%);--seki-muted-foreground:hsl(0, 0%, 63.9%);--seki-card:hsl(0, 0%, 3.9%);--seki-card-foreground:hsl(0, 0%, 98%);--seki-popover:hsl(0, 0%, 3.9%);--seki-popover-foreground:hsl(0, 0%, 98%);--seki-border:hsl(0, 0%, 14.9%);--seki-input:hsl(0, 0%, 14.9%);--seki-primary:hsl(0, 0%, 98%);--seki-primary-foreground:hsl(0, 0%, 9%);--seki-secondary:hsl(0, 0%, 14.9%);--seki-secondary-foreground:hsl(0, 0%, 98%);--seki-accent:hsl(0, 0%, 14.9%);--seki-accent-foreground:hsl(0, 0%, 98%);--seki-destructive:hsl(0, 62.8%, 30.6%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 83.1%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-600);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-700);--seki-button-primary-hover-bg:hsl(0, 0%, 98%, 0.9);--seki-button-secondary-hover-bg:hsl(0, 0%, 14.9%, 0.8)}:host{--seki-button-primary-bg:var(--seki-primary);--seki-button-primary-text:var(--seki-primary-foreground);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:hsl(0, 0%, 9%, 0.9);--seki-button-primary-hover-text:var(--seki-primary-foreground);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-secondary);--seki-button-secondary-text:var(--seki-secondary-foreground);--seki-button-secondary-border:transparent;--seki-button-secondary-hover-bg:hsl(0, 0%, 96.1%, 0.8);--seki-button-secondary-hover-text:var(--seki-secondary-foreground);--seki-button-secondary-hover-border:transparent;--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-foreground);--seki-button-outline-border:var(--seki-input);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-accent-foreground);--seki-button-outline-hover-border:var(--seki-input);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-foreground);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-accent);--seki-button-ghost-hover-text:var(--seki-accent-foreground);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-destructive-foreground);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:hsl(0, 84.2%, 60.2%, 0.9);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:0.375rem;--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2.25rem;--seki-button-md-padding-x:var(--seki-spacing-4, 1rem);--seki-button-md-padding-y:var(--seki-spacing-2, 0.5rem);--seki-button-md-font-size:var(--seki-text-base, 1rem);--seki-button-md-height:2.5rem;--seki-button-lg-padding-x:2rem;--seki-button-lg-padding-y:0.5rem;--seki-button-lg-font-size:1rem;--seki-button-lg-height:2.75rem;--seki-button-icon-sm-size:2rem;--seki-button-icon-size:2.5rem;--seki-button-icon-lg-size:3rem;--seki-button-icon-gap:0.5rem;--seki-button-link-bg:transparent;--seki-button-link-text:var(--seki-primary);--seki-button-link-border:transparent;--seki-button-link-hover-bg:transparent;--seki-button-link-hover-text:var(--seki-primary);--seki-button-link-hover-border:transparent;--seki-button-radius:var(--seki-radius-md, 0.375rem);--seki-button-font-weight:var(--seki-font-medium, 500);--seki-button-transition-duration:150ms;--seki-button-transition-timing:ease-in-out;--seki-button-shadow:var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));--seki-button-shadow-hover:var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));--seki-button-disabled-opacity:0.5;--seki-input-bg:var(--seki-background);--seki-input-border:var(--seki-border);--seki-input-text:var(--seki-foreground);--seki-input-placeholder:var(--seki-muted-foreground);--seki-input-ring:var(--seki-ring);--seki-input-invalid-border:var(--seki-destructive);--seki-input-invalid-ring:var(--seki-destructive);--seki-input-disabled-opacity:0.5;--seki-input-radius:var(--seki-radius-md)}:host{--seki-spacing-0:0;--seki-spacing-0-5:0.125rem;--seki-spacing-1:0.25rem;--seki-spacing-1-5:0.375rem;--seki-spacing-2:0.5rem;--seki-spacing-2-5:0.625rem;--seki-spacing-3:0.75rem;--seki-spacing-3-5:0.875rem;--seki-spacing-4:1rem;--seki-spacing-5:1.25rem;--seki-spacing-6:1.5rem;--seki-spacing-8:2rem;--seki-spacing-10:2.5rem;--seki-spacing-12:3rem;--seki-spacing-16:4rem;--seki-spacing-20:5rem;--seki-spacing-24:6rem;--seki-input-height-sm:2rem;--seki-input-height-md:2.5rem;--seki-input-height-lg:3rem;--seki-input-padding-x:0.75rem;--seki-input-padding-y:0.5rem;--seki-input-font-size:0.875rem;--seki-input-ring-offset:2px}:host{--seki-shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--seki-shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--seki-shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1)}:host{--seki-font-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',\n    Arial, sans-serif;--seki-font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;--seki-text-xs:0.75rem;--seki-text-sm:0.875rem;--seki-text-base:1rem;--seki-text-lg:1.125rem;--seki-text-xl:1.25rem;--seki-text-2xl:1.5rem;--seki-text-3xl:1.875rem;--seki-text-4xl:2.25rem;--seki-font-normal:400;--seki-font-medium:500;--seki-font-semibold:600;--seki-font-bold:700;--seki-leading-tight:1.25;--seki-leading-normal:1.5;--seki-leading-relaxed:1.75}:host{--seki-radius-sm:0.25rem;--seki-radius-md:0.375rem;--seki-radius-lg:0.5rem;--seki-radius-xl:1rem;}";
 const NAMESPACE = 'sekiui';
 const BUILD = /* sekiui */ { hydratedSelectorName: "hydrated", lazyLoad: false, updatable: true};
@@ -41,6 +43,12 @@ var consoleError = (e, el) => (0, console.error)(e, el);
 var styles = /* @__PURE__ */ new Map();
 var SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
 var XLINK_NS = "http://www.w3.org/1999/xlink";
+var FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [
+  "formAssociatedCallback",
+  "formResetCallback",
+  "formDisabledCallback",
+  "formStateRestoreCallback"
+];
 var win = typeof window !== "undefined" ? window : {};
 var H = win.HTMLElement || class {
 };
@@ -189,7 +197,10 @@ var unwrapErr = (result) => {
 // src/utils/style.ts
 function createStyleSheetIfNeededAndSupported(styles2) {
-  return void 0;
+  if (!supportsConstructableStylesheets) return void 0;
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(styles2);
+  return sheet;
 }
 // src/utils/shadow-root.ts
@@ -197,7 +208,7 @@ var globalStyleSheet;
 function createShadowRoot(cmpMeta) {
   var _a;
   const shadowRoot = this.attachShadow({ mode: "open" });
-  if (globalStyleSheet === void 0) globalStyleSheet = (_a = createStyleSheetIfNeededAndSupported()) != null ? _a : null;
+  if (globalStyleSheet === void 0) globalStyleSheet = (_a = createStyleSheetIfNeededAndSupported(globalStyles)) != null ? _a : null;
   if (globalStyleSheet) {
     if (supportsMutableAdoptedStyleSheets) {
       shadowRoot.adoptedStyleSheets.push(globalStyleSheet);
@@ -396,7 +407,9 @@ createSupportsRuleRe(":host-context");
 var parsePropertyValue = (propValue, propType, isFormAssociated) => {
   if (propValue != null && !isComplexType(propValue)) {
     if (propType & 4 /* Boolean */) {
-      {
+      if (isFormAssociated && typeof propValue === "string") {
+        return propValue === "" || !!propValue;
+      } else {
         return propValue === "false" ? false : propValue === "" || !!propValue;
       }
     }
@@ -981,7 +994,9 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
   const instance = elm;
   newVal = parsePropertyValue(
     newVal,
-    cmpMeta.$members$[propName][0]);
+    cmpMeta.$members$[propName][0],
+    !!(cmpMeta.$flags$ & 64 /* formAssociated */)
+  );
   const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
   const didValueChange = newVal !== oldVal && !areBothNaN;
   if (didValueChange) {
@@ -1015,6 +1030,27 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
 var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a, _b;
   const prototype = Cstr.prototype;
+  if (cmpMeta.$flags$ & 64 /* formAssociated */ && flags & 1 /* isElementConstructor */) {
+    FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS.forEach((cbName) => {
+      const originalFormAssociatedCallback = prototype[cbName];
+      Object.defineProperty(prototype, cbName, {
+        value(...args) {
+          var _a2;
+          const hostRef = getHostRef(this);
+          const instance = this;
+          if (!instance) {
+            (_a2 = hostRef == null ? void 0 : hostRef.$onReadyPromise$) == null ? void 0 : _a2.then((asyncInstance) => {
+              const cb = asyncInstance[cbName];
+              typeof cb === "function" && cb.call(asyncInstance, ...args);
+            });
+          } else {
+            const cb = originalFormAssociatedCallback;
+            typeof cb === "function" && cb.call(instance, ...args);
+          }
+        }
+      });
+    });
+  }
   {
     {
       if (Cstr.watchers && !cmpMeta.$watchers$) {
@@ -1058,7 +1094,9 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
               origSetter.apply(this, [
                 parsePropertyValue(
                   newValue,
-                  memberFlags)
+                  memberFlags,
+                  !!(cmpMeta.$flags$ & 64 /* formAssociated */)
+                )
               ]);
               newValue = memberFlags & 32 /* State */ ? this[memberName] : ref.$hostElement$[memberName];
               setValue(this, memberName, newValue, cmpMeta);
@@ -1276,7 +1314,7 @@ var proxyCustomElement = (Cstr, compactMeta) => {
     }
   });
   Cstr.is = cmpMeta.$tagName$;
-  return proxyComponent(Cstr, cmpMeta);
+  return proxyComponent(Cstr, cmpMeta, 1 /* isElementConstructor */ | 2 /* proxyState */);
 };
 var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
   if (listeners && win.document) {

package/dist/cdn/seki-button.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface SekiButton extends Components.SekiButton, HTMLElement {}
+export const SekiButton: {
+    prototype: SekiButton;
+    new (): SekiButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/cdn/seki-button.js ADDED Viewed

@@ -0,0 +1,66 @@
+import { p as proxyCustomElement, H, h } from './p-BLeUUc2-.js';
+const sekiButtonCss = ":host{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96.1%);--seki-neutral-200:hsl(0, 0%, 89.8%);--seki-neutral-300:hsl(0, 0%, 83.1%);--seki-neutral-400:hsl(0, 0%, 63.9%);--seki-neutral-500:hsl(0, 0%, 45.1%);--seki-neutral-600:hsl(0, 0%, 32.2%);--seki-neutral-700:hsl(0, 0%, 25.1%);--seki-neutral-800:hsl(0, 0%, 14.9%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 3.9%);--seki-primary-50:hsl(210, 100%, 97%);--seki-primary-100:hsl(210, 95%, 93%);--seki-primary-200:hsl(210, 95%, 85%);--seki-primary-300:hsl(210, 90%, 73%);--seki-primary-400:hsl(210, 85%, 58%);--seki-primary-500:hsl(210, 80%, 48%);--seki-primary-600:hsl(210, 75%, 40%);--seki-primary-700:hsl(210, 70%, 32%);--seki-primary-800:hsl(210, 65%, 25%);--seki-primary-900:hsl(210, 60%, 18%);--seki-primary-950:hsl(210, 55%, 10%);--seki-success-500:hsl(142, 71%, 45%);--seki-success-600:hsl(142, 71%, 35%);--seki-warning-500:hsl(38, 92%, 50%);--seki-warning-600:hsl(38, 92%, 40%);--seki-destructive-500:hsl(0, 84.2%, 60.2%);--seki-destructive-600:hsl(0, 72%, 41%)}:host{--seki-background:hsl(0, 0%, 100%);--seki-foreground:hsl(0, 0%, 3.9%);--seki-muted:hsl(0, 0%, 96.1%);--seki-muted-foreground:hsl(0, 0%, 45.1%);--seki-card:hsl(0, 0%, 100%);--seki-card-foreground:hsl(0, 0%, 3.9%);--seki-popover:hsl(0, 0%, 100%);--seki-popover-foreground:hsl(0, 0%, 3.9%);--seki-border:hsl(0, 0%, 89.8%);--seki-input:hsl(0, 0%, 89.8%);--seki-primary:hsl(0, 0%, 9%);--seki-primary-foreground:hsl(0, 0%, 98%);--seki-secondary:hsl(0, 0%, 96.1%);--seki-secondary-foreground:hsl(0, 0%, 9%);--seki-accent:hsl(0, 0%, 96.1%);--seki-accent-foreground:hsl(0, 0%, 9%);--seki-destructive:hsl(0, 84.2%, 60.2%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 3.9%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-400);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-300)}:host([data-theme='dark']){--seki-background:hsl(0, 0%, 3.9%);--seki-foreground:hsl(0, 0%, 98%);--seki-muted:hsl(0, 0%, 14.9%);--seki-muted-foreground:hsl(0, 0%, 63.9%);--seki-card:hsl(0, 0%, 3.9%);--seki-card-foreground:hsl(0, 0%, 98%);--seki-popover:hsl(0, 0%, 3.9%);--seki-popover-foreground:hsl(0, 0%, 98%);--seki-border:hsl(0, 0%, 14.9%);--seki-input:hsl(0, 0%, 14.9%);--seki-primary:hsl(0, 0%, 98%);--seki-primary-foreground:hsl(0, 0%, 9%);--seki-secondary:hsl(0, 0%, 14.9%);--seki-secondary-foreground:hsl(0, 0%, 98%);--seki-accent:hsl(0, 0%, 14.9%);--seki-accent-foreground:hsl(0, 0%, 98%);--seki-destructive:hsl(0, 62.8%, 30.6%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 83.1%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-600);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-700);--seki-button-primary-hover-bg:hsl(0, 0%, 98%, 0.9);--seki-button-secondary-hover-bg:hsl(0, 0%, 14.9%, 0.8)}:host{--seki-button-primary-bg:var(--seki-primary);--seki-button-primary-text:var(--seki-primary-foreground);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:hsl(0, 0%, 9%, 0.9);--seki-button-primary-hover-text:var(--seki-primary-foreground);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-secondary);--seki-button-secondary-text:var(--seki-secondary-foreground);--seki-button-secondary-border:transparent;--seki-button-secondary-hover-bg:hsl(0, 0%, 96.1%, 0.8);--seki-button-secondary-hover-text:var(--seki-secondary-foreground);--seki-button-secondary-hover-border:transparent;--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-foreground);--seki-button-outline-border:var(--seki-input);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-accent-foreground);--seki-button-outline-hover-border:var(--seki-input);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-foreground);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-accent);--seki-button-ghost-hover-text:var(--seki-accent-foreground);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-destructive-foreground);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:hsl(0, 84.2%, 60.2%, 0.9);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:0.375rem;--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2.25rem;--seki-button-md-padding-x:var(--seki-spacing-4, 1rem);--seki-button-md-padding-y:var(--seki-spacing-2, 0.5rem);--seki-button-md-font-size:var(--seki-text-base, 1rem);--seki-button-md-height:2.5rem;--seki-button-lg-padding-x:2rem;--seki-button-lg-padding-y:0.5rem;--seki-button-lg-font-size:1rem;--seki-button-lg-height:2.75rem;--seki-button-icon-sm-size:2rem;--seki-button-icon-size:2.5rem;--seki-button-icon-lg-size:3rem;--seki-button-icon-gap:0.5rem;--seki-button-link-bg:transparent;--seki-button-link-text:var(--seki-primary);--seki-button-link-border:transparent;--seki-button-link-hover-bg:transparent;--seki-button-link-hover-text:var(--seki-primary);--seki-button-link-hover-border:transparent;--seki-button-radius:var(--seki-radius-md, 0.375rem);--seki-button-font-weight:var(--seki-font-medium, 500);--seki-button-transition-duration:150ms;--seki-button-transition-timing:ease-in-out;--seki-button-shadow:var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));--seki-button-shadow-hover:var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));--seki-button-disabled-opacity:0.5;--seki-input-bg:var(--seki-background);--seki-input-border:var(--seki-border);--seki-input-text:var(--seki-foreground);--seki-input-placeholder:var(--seki-muted-foreground);--seki-input-ring:var(--seki-ring);--seki-input-invalid-border:var(--seki-destructive);--seki-input-invalid-ring:var(--seki-destructive);--seki-input-disabled-opacity:0.5;--seki-input-radius:var(--seki-radius-md)}:host{--seki-spacing-0:0;--seki-spacing-0-5:0.125rem;--seki-spacing-1:0.25rem;--seki-spacing-1-5:0.375rem;--seki-spacing-2:0.5rem;--seki-spacing-2-5:0.625rem;--seki-spacing-3:0.75rem;--seki-spacing-3-5:0.875rem;--seki-spacing-4:1rem;--seki-spacing-5:1.25rem;--seki-spacing-6:1.5rem;--seki-spacing-8:2rem;--seki-spacing-10:2.5rem;--seki-spacing-12:3rem;--seki-spacing-16:4rem;--seki-spacing-20:5rem;--seki-spacing-24:6rem;--seki-input-height-sm:2rem;--seki-input-height-md:2.5rem;--seki-input-height-lg:3rem;--seki-input-padding-x:0.75rem;--seki-input-padding-y:0.5rem;--seki-input-font-size:0.875rem;--seki-input-ring-offset:2px}:host{--seki-shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--seki-shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--seki-shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1)}:host{--seki-font-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',\n    Arial, sans-serif;--seki-font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;--seki-text-xs:0.75rem;--seki-text-sm:0.875rem;--seki-text-base:1rem;--seki-text-lg:1.125rem;--seki-text-xl:1.25rem;--seki-text-2xl:1.5rem;--seki-text-3xl:1.875rem;--seki-text-4xl:2.25rem;--seki-font-normal:400;--seki-font-medium:500;--seki-font-semibold:600;--seki-font-bold:700;--seki-leading-tight:1.25;--seki-leading-normal:1.5;--seki-leading-relaxed:1.75}:host{--seki-radius-sm:0.25rem;--seki-radius-md:0.375rem;--seki-radius-lg:0.5rem;--seki-radius-xl:1rem;}:host{display:inline-block}.button{box-sizing:border-box;font-family:var(--seki-font-sans);font-weight:var(--seki-button-font-weight);border-radius:var(--seki-button-radius);cursor:pointer;border:1px solid;transition:background-color var(--seki-button-transition-duration) var(--seki-button-transition-timing),\n              border-color var(--seki-button-transition-duration) var(--seki-button-transition-timing),\n              color var(--seki-button-transition-duration) var(--seki-button-transition-timing),\n              box-shadow var(--seki-button-transition-duration) var(--seki-button-transition-timing),\n              text-decoration var(--seki-button-transition-duration) var(--seki-button-transition-timing);box-shadow:var(--seki-button-shadow);display:inline-flex;align-items:center;justify-content:center;gap:var(--seki-button-icon-gap)}.button:hover:not(:disabled){box-shadow:var(--seki-button-shadow-hover)}.button:focus-visible{outline:2px solid var(--seki-accent);outline-offset:2px}.button:disabled{opacity:var(--seki-button-disabled-opacity);cursor:not-allowed}.button--primary{background:var(--seki-button-primary-bg);color:var(--seki-button-primary-text);border-color:var(--seki-button-primary-border)}.button--primary:hover:not(:disabled){background:var(--seki-button-primary-hover-bg);color:var(--seki-button-primary-hover-text, var(--seki-button-primary-text));border-color:var(--seki-button-primary-hover-border)}.button--secondary{background:var(--seki-button-secondary-bg);color:var(--seki-button-secondary-text);border-color:var(--seki-button-secondary-border)}.button--secondary:hover:not(:disabled){background:var(--seki-button-secondary-hover-bg);color:var(--seki-button-secondary-hover-text, var(--seki-button-secondary-text));border-color:var(--seki-button-secondary-hover-border)}.button--outline{background:var(--seki-button-outline-bg);color:var(--seki-button-outline-text);border-color:var(--seki-button-outline-border)}.button--outline:hover:not(:disabled){background:var(--seki-button-outline-hover-bg);color:var(--seki-button-outline-hover-text);border-color:var(--seki-button-outline-hover-border)}.button--ghost{background:var(--seki-button-ghost-bg);color:var(--seki-button-ghost-text);border-color:var(--seki-button-ghost-border)}.button--ghost:hover:not(:disabled){background:var(--seki-button-ghost-hover-bg);color:var(--seki-button-ghost-hover-text);border-color:var(--seki-button-ghost-hover-border)}.button--destructive{background:var(--seki-button-destructive-bg);color:var(--seki-button-destructive-text);border-color:var(--seki-button-destructive-border)}.button--destructive:hover:not(:disabled){background:var(--seki-button-destructive-hover-bg);color:var(--seki-button-destructive-text);border-color:var(--seki-button-destructive-hover-border)}.button--link{background:var(--seki-button-link-bg);color:var(--seki-button-link-text);border-color:var(--seki-button-link-border);text-decoration:none}.button--link:hover:not(:disabled){background:var(--seki-button-link-hover-bg);color:var(--seki-button-link-hover-text);border-color:var(--seki-button-link-hover-border);text-decoration:underline}.button--sm{padding:var(--seki-button-sm-padding-y) var(--seki-button-sm-padding-x);font-size:var(--seki-button-sm-font-size);height:var(--seki-button-sm-height)}.button--md{padding:var(--seki-button-md-padding-y) var(--seki-button-md-padding-x);font-size:var(--seki-button-md-font-size);height:var(--seki-button-md-height)}.button--lg{padding:var(--seki-button-lg-padding-y) var(--seki-button-lg-padding-x);font-size:var(--seki-button-lg-font-size);height:var(--seki-button-lg-height)}.button--icon-sm{width:var(--seki-button-icon-sm-size);height:var(--seki-button-icon-sm-size);padding:0}.button--icon{width:var(--seki-button-icon-size);height:var(--seki-button-icon-size);padding:0}.button--icon-lg{width:var(--seki-button-icon-lg-size);height:var(--seki-button-icon-lg-size);padding:0}@media (prefers-reduced-motion: reduce){.button{transition:none}}";
+const SekiButton$1 = /*@__PURE__*/ proxyCustomElement(class SekiButton extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * Visual style variant of the button
+         */
+        this.variant = 'primary';
+        /**
+         * Size of the button. Use icon-sm, icon, or icon-lg for icon-only buttons.
+         */
+        this.size = 'md';
+        /**
+         * Whether the button is disabled
+         */
+        this.disabled = false;
+        /**
+         * Button type attribute
+         */
+        this.type = 'button';
+    }
+    componentWillLoad() {
+        // Dev mode warning for missing aria-label on icon-only buttons
+        const isIconOnlySize = this.size === 'icon-sm' || this.size === 'icon' || this.size === 'icon-lg';
+        if (isIconOnlySize && !this.ariaLabel) {
+            console.warn(`[seki-button] Icon-only button (size="${this.size}") requires aria-label for accessibility. ` +
+                `Please add aria-label prop to provide an accessible name for screen readers.`);
+        }
+    }
+    render() {
+        return (h("button", { key: '3cc4cf0af6075fbe012388fa5adb953b64a2b1ca', class: `button button--${this.variant} button--${this.size}`, type: this.type, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.ariaLabel }, h("slot", { key: '7c90c49539e6721b6580a07c3f97e20148734b05' })));
+    }
+    static get style() { return sekiButtonCss; }
+}, [257, "seki-button", {
+        "variant": [1],
+        "size": [1],
+        "disabled": [4],
+        "type": [1],
+        "ariaLabel": [1, "aria-label"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["seki-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "seki-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SekiButton$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+const SekiButton = SekiButton$1;
+const defineCustomElement = defineCustomElement$1;
+export { SekiButton, defineCustomElement };

package/dist/cdn/seki-field-description.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface SekiFieldDescription extends Components.SekiFieldDescription, HTMLElement {}
+export const SekiFieldDescription: {
+    prototype: SekiFieldDescription;
+    new (): SekiFieldDescription;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;