@sekiui/elements 0.0.38 → 0.0.40

package/dist/collection/components/field-description/seki-field-description.js

@@ -13,12 +13,12 @@ export class SekiFieldDescription {
         this.componentId = '';
     }
     componentWillLoad() {
-        this.componentId = this.id || generateId();
+        this.componentId = this.descriptorId || generateId();
     }
     componentWillUpdate() {
-        // Update componentId if id prop changes
-        if (this.id && this.id !== this.componentId) {
-            this.componentId = this.id;
+        // Update componentId if descriptorId prop changes
+        if (this.descriptorId && this.descriptorId !== this.componentId) {
+            this.componentId = this.descriptorId;
         }
     }
     /**
@@ -29,7 +29,7 @@ export class SekiFieldDescription {
         return this.componentId;
     }
     render() {
-        return (h("div", { key: 'ddd92769c6eed18b11eacd6005e1820a6abf1aa5', id: this.componentId, class: "description" }, h("slot", { key: '6da6a0a3300cf2bdfb20ae9c6cf972ab0f014726' })));
+        return (h("div", { key: '8dd37eb65e7c8c7608b070762681bb8586c53c9e', id: this.componentId, class: "description" }, h("slot", { key: '508d77bad3bf08741dc4c4e6e0f6167d7bf11688' })));
     }
     static get is() { return "seki-field-description"; }
     static get encapsulation() { return "shadow"; }
@@ -45,7 +45,7 @@ export class SekiFieldDescription {
     }
     static get properties() {
         return {
-            "id": {
+            "descriptorId": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -62,7 +62,7 @@ export class SekiFieldDescription {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "id"
+                "attribute": "descriptor-id"
             }
         };
     }

package/dist/collection/components/field-error/seki-field-error.js

@@ -22,13 +22,13 @@ export class SekiFieldError {
         this.previousVisible = true;
     }
     componentWillLoad() {
-        this.componentId = this.id || generateId();
+        this.componentId = this.errorId || generateId();
         this.previousVisible = this.visible;
     }
     componentWillUpdate() {
-        // Update componentId if id prop changes
-        if (this.id && this.id !== this.componentId) {
-            this.componentId = this.id;
+        // Update componentId if errorId prop changes
+        if (this.errorId && this.errorId !== this.componentId) {
+            this.componentId = this.errorId;
         }
     }
     handleVisibleChange(newValue) {
@@ -49,7 +49,7 @@ export class SekiFieldError {
     }
     render() {
         const style = this.visible ? {} : { display: 'none' };
-        return (h("div", { key: 'ce75b19705fe6cfe21a9815f321a6e8fc95edcb5', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: '82f038546edafec2a383031941d928e8a6a623dd' })));
+        return (h("div", { key: 'aa140f9212c3f47d50113f77af0c33cf106177ed', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: '6fcdf53d218e817fa12792fadb3a946229b2dcf3' })));
     }
     static get is() { return "seki-field-error"; }
     static get encapsulation() { return "shadow"; }
@@ -65,7 +65,7 @@ export class SekiFieldError {
     }
     static get properties() {
         return {
-            "id": {
+            "errorId": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -82,7 +82,7 @@ export class SekiFieldError {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "id"
+                "attribute": "error-id"
             },
             "visible": {
                 "type": "boolean",

package/dist/collection/components/field-group/seki-field-group.js

@@ -11,7 +11,7 @@ export class SekiFieldGroup {
         const style = {
             '--seki-field-group-gap': this.gap,
         };
-        return (h("div", { key: '1ed413559e067c467933876185a446761c14a8fb', class: "field-group", style: style }, h("slot", { key: 'a8d7c2fd5bd89f89c76620ae6a6c4c9fbab5c36e' })));
+        return (h("div", { key: '479c3e657ce82b3ab5243b10ef5cccd26e17478b', class: "field-group", style: style }, h("slot", { key: '15d665a73e3d2d2eca773bdb216b4276feaf2071' })));
     }
     static get is() { return "seki-field-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-label/seki-field-label.js

@@ -8,7 +8,8 @@ export class SekiFieldLabel {
         this.required = false;
     }
     render() {
-        return (h("label", { key: '5a216d28d5324958cb9ba213c6ce4ec06b9262d6', htmlFor: this.htmlFor }, h("slot", { key: '7445f98ff6ba049e8f8a1d89d1f8c278a2a49047' }), this.required && h("span", { key: 'a42b90d3c61506b0d4659d7539f60f7eb318a12e', class: "required-indicator" }, " *")));
+        const labelProps = this.htmlFor ? { for: this.htmlFor } : {};
+        return (h("label", Object.assign({ key: 'f9f2b492f80fe46110f4f8766c88a1aec53342be' }, labelProps), h("slot", { key: '35564e4ea62df56807c7d2a90a4f9e66a7c09c4c' }), this.required && h("span", { key: '8f6f7a454790995b9d968fb1e0078fb9951fcba6', class: "required-indicator" }, " *")));
     }
     static get is() { return "seki-field-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-legend/seki-field-legend.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiFieldLegend {
     render() {
-        return (h("legend", { key: 'd21cea8cee39d4c180c75b39271c0d027fddf70d' }, h("slot", { key: '1b50582352cbfb9836a0cb075ea1ffaa9908ec9a' })));
+        return (h("legend", { key: '34aa222c29443bbded4ba43c8592212e5328fb52' }, h("slot", { key: '59fddfd2160e0c3a512dc92f38465ed015b860ca' })));
     }
     static get is() { return "seki-field-legend"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/fieldset/seki-fieldset.js

@@ -8,7 +8,7 @@ export class SekiFieldset {
         this.disabled = false;
     }
     render() {
-        return (h("fieldset", { key: '4fd921680b8dcbb677eefaf4d29120e2901c7f51', disabled: this.disabled, class: "fieldset" }, h("slot", { key: '11b9e963faecd9fc6af387eb22689a91e482c183', name: "legend" }), h("div", { key: 'f1d6a247fc0615b1b734a89d2ab7cbac54e810e8', class: "fieldset-content" }, h("slot", { key: '93b1d28863b927d08921ebba2b694ec5bc242410' }))));
+        return (h("fieldset", { key: '8d7a47b3f837d34c11b905f64a35fe167fd9b16f', disabled: this.disabled, class: "fieldset" }, h("slot", { key: 'b620fe4fe86449d3cfb9e47db6837dbc5a8ad771', name: "legend" }), h("div", { key: 'd122e6eb636e8742cb8ac429c5879cb54bfce392', class: "fieldset-content" }, h("slot", { key: 'ea7f4dbea6e07c9b9cf68d7f3be5ea40500ed11f' }))));
     }
     static get is() { return "seki-fieldset"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input/seki-input.js

@@ -48,7 +48,7 @@ export class SekiInput {
         };
     }
     render() {
-        return (h("input", { key: '6850324b28178a320ee55533501fec32dd2c97d7', type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, autocomplete: this.autocomplete, min: this.min, max: this.max, step: this.step, pattern: this.pattern, minlength: this.minlength, maxlength: this.maxlength, class: `input input--${this.size}${this.invalid ? ' input--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
+        return (h("input", { key: '95dc9689258f013b3eeda42f2d0df353cc3d0edc', type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, autocomplete: this.autocomplete, min: this.min, max: this.max, step: this.step, pattern: this.pattern, minlength: this.minlength, maxlength: this.maxlength, class: `input input--${this.size}${this.invalid ? ' input--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
     }
     static get is() { return "seki-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/skeleton/seki-skeleton.js

@@ -15,7 +15,7 @@ export class SekiSkeleton {
         }
     }
     render() {
-        return (h("div", { key: '12cf6b0b060e26aa0b991890e2667139fa43b507', class: "skeleton", part: "skeleton", role: "status", "aria-busy": "true", "aria-label": this.ariaLabel || undefined }));
+        return (h("div", { key: 'fb7e3abe8762cca61f0f950d6fb051c8ac30cec8', class: "skeleton", part: "skeleton", role: "status", "aria-busy": "true", "aria-label": this.ariaLabel || undefined }));
     }
     static get is() { return "seki-skeleton"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/styles/tokens/typography-tokens.js

@@ -0,0 +1,8 @@
+/**
+ * Typography Design Tokens
+ * TypeScript exports for programmatic token access
+ * Reference: specs/012-time-to-do/research.md Section 7
+ */
+export const typographyTokens = {
+// Token definitions will be added in T028
+};

package/dist/collection/styles/tokens/typography-tokens.ts

@@ -0,0 +1,9 @@
+/**
+ * Typography Design Tokens
+ * TypeScript exports for programmatic token access
+ * Reference: specs/012-time-to-do/research.md Section 7
+ */
+
+export const typographyTokens = {
+  // Token definitions will be added in T028
+};

package/dist/collection/styles/typography/base.css

@@ -0,0 +1,137 @@
+/* Typography Base Classes
+ * Heading classes (h1-h4), paragraph, blockquote, list, table, code
+ * Reference: specs/012-time-to-do/data-model.md
+ */
+
+/* Heading Classes */
+.seki-h1 {
+  scroll-margin-top: 5rem;
+  font-size: clamp(var(--seki-typography-h1-size-min), 5vw, var(--seki-typography-h1-size-max));
+  font-weight: var(--seki-typography-h1-weight);
+  font-family: var(--seki-typography-heading-font);
+  letter-spacing: var(--seki-typography-heading-spacing);
+  color: var(--seki-color-text);
+  text-wrap: balance;
+}
+
+.seki-h2 {
+  margin-top: 2.5rem;
+  scroll-margin-top: 5rem;
+  border-bottom: 1px solid var(--seki-color-border);
+  padding-bottom: 0.5rem;
+  font-size: clamp(var(--seki-typography-h2-size-min), 4vw, var(--seki-typography-h2-size-max));
+  font-weight: var(--seki-typography-h2-weight);
+  font-family: var(--seki-typography-heading-font);
+  letter-spacing: var(--seki-typography-heading-spacing);
+  color: var(--seki-color-text);
+  transition: color 200ms;
+}
+
+.seki-h2:first-child {
+  margin-top: 0;
+}
+
+.seki-h3 {
+  margin-top: 2rem;
+  scroll-margin-top: 5rem;
+  font-size: clamp(var(--seki-typography-h3-size-min), 3.5vw, var(--seki-typography-h3-size-max));
+  font-weight: var(--seki-typography-h3-weight);
+  font-family: var(--seki-typography-heading-font);
+  letter-spacing: var(--seki-typography-heading-spacing);
+  color: var(--seki-color-text);
+}
+
+.seki-h4 {
+  margin-top: 1.5rem;
+  scroll-margin-top: 5rem;
+  font-size: clamp(var(--seki-typography-h4-size-min), 3vw, var(--seki-typography-h4-size-max));
+  font-weight: var(--seki-typography-h4-weight);
+  font-family: var(--seki-typography-heading-font);
+  letter-spacing: var(--seki-typography-heading-spacing);
+  color: var(--seki-color-text);
+}
+
+/* Paragraph Classes */
+.seki-p {
+  font-family: var(--seki-typography-body-font);
+  font-size: var(--seki-font-size-base);
+  font-weight: var(--seki-font-weight-normal);
+  line-height: var(--seki-typography-body-line-height);
+  color: var(--seki-color-text);
+}
+
+.seki-p:not(:first-child) {
+  margin-top: 1.5rem;
+}
+
+.seki-lead {
+  font-family: var(--seki-typography-body-font);
+  font-size: clamp(var(--seki-font-size-lg), 3vw, var(--seki-font-size-xl));
+  color: var(--seki-color-text-muted);
+  line-height: var(--seki-typography-body-line-height);
+}
+
+/* Blockquote Class */
+.seki-blockquote {
+  margin-top: 1.5rem;
+  border-left: 2px solid var(--seki-color-border);
+  padding-left: 1.5rem;
+  font-style: italic;
+  color: var(--seki-color-text-muted);
+  font-family: var(--seki-typography-body-font);
+}
+
+/* List Class */
+.seki-list {
+  margin: 1.5rem 0;
+  padding-left: 1.5rem;
+  font-family: var(--seki-typography-body-font);
+  color: var(--seki-color-text);
+}
+
+.seki-list > li {
+  margin-top: 0.5rem;
+  line-height: var(--seki-typography-body-line-height);
+}
+
+.seki-list > li::marker {
+  color: var(--seki-color-text-muted);
+}
+
+/* Table Class */
+.seki-table {
+  width: 100%;
+  caption-side: bottom;
+  border-collapse: collapse;
+  margin: 1.5rem 0;
+  font-family: var(--seki-typography-body-font);
+  color: var(--seki-color-text);
+}
+
+.seki-table th {
+  border-bottom: 1px solid var(--seki-color-border);
+  padding: 0.75rem;
+  text-align: left;
+  font-weight: var(--seki-font-weight-semibold);
+}
+
+.seki-table td {
+  border-bottom: 1px solid var(--seki-color-border-subtle);
+  padding: 0.75rem;
+  text-align: left;
+}
+
+.seki-table tr:last-child td {
+  border-bottom: none;
+}
+
+/* Inline Code Class */
+.seki-inline-code {
+  position: relative;
+  border-radius: 0.25rem;
+  background-color: var(--seki-color-muted);
+  padding: 0.125rem 0.375rem;
+  font-family: var(--seki-typography-code-font);
+  font-size: 0.875em; /* 87.5% of parent - inherits parent size then scales */
+  font-weight: var(--seki-font-weight-medium);
+}

package/dist/collection/styles/typography/index.css

@@ -0,0 +1,9 @@
+/* Typography System - Main Entry Point
+ * Import this file to get all typography styles
+ * Or import individual files for selective loading
+ */
+
+@import './tokens.css';
+@import './base.css';
+@import './variants.css';
+@import './prose.css';

package/dist/collection/styles/typography/prose.css

@@ -0,0 +1,132 @@
+/* Prose Wrapper
+ * Automatic typography styling for content areas
+ * Reference: specs/012-time-to-do/research.md Section 3
+ */
+
+.seki-prose {
+  max-width: 65ch;
+  color: var(--seki-color-text);
+}
+
+/* Use :where() for low specificity - allows easy overrides */
+.seki-prose :where(h1) {
+  scroll-margin-top: 5rem;
+  font-size: clamp(var(--seki-typography-h1-size-min), 5vw, var(--seki-typography-h1-size-max));
+  font-weight: var(--seki-typography-h1-weight);
+  font-family: var(--seki-typography-heading-font);
+  letter-spacing: var(--seki-typography-heading-spacing);
+  text-wrap: balance;
+}
+
+.seki-prose :where(h2) {
+  margin-top: 2.5rem;
+  scroll-margin-top: 5rem;
+  border-bottom: 1px solid var(--seki-color-border);
+  padding-bottom: 0.5rem;
+  font-size: clamp(var(--seki-typography-h2-size-min), 4vw, var(--seki-typography-h2-size-max));
+  font-weight: var(--seki-typography-h2-weight);
+  font-family: var(--seki-typography-heading-font);
+  letter-spacing: var(--seki-typography-heading-spacing);
+}
+
+.seki-prose :where(h2:first-child) {
+  margin-top: 0;
+}
+
+.seki-prose :where(h3) {
+  margin-top: 2rem;
+  scroll-margin-top: 5rem;
+  font-size: clamp(var(--seki-typography-h3-size-min), 3.5vw, var(--seki-typography-h3-size-max));
+  font-weight: var(--seki-typography-h3-weight);
+  font-family: var(--seki-typography-heading-font);
+  letter-spacing: var(--seki-typography-heading-spacing);
+}
+
+.seki-prose :where(h4) {
+  margin-top: 1.5rem;
+  scroll-margin-top: 5rem;
+  font-size: clamp(var(--seki-typography-h4-size-min), 3vw, var(--seki-typography-h4-size-max));
+  font-weight: var(--seki-typography-h4-weight);
+  font-family: var(--seki-typography-heading-font);
+  letter-spacing: var(--seki-typography-heading-spacing);
+}
+
+.seki-prose :where(p) {
+  font-family: var(--seki-typography-body-font);
+  font-size: var(--seki-font-size-base);
+  font-weight: var(--seki-font-weight-normal);
+  line-height: var(--seki-typography-body-line-height);
+}
+
+.seki-prose :where(p:not(:first-child)) {
+  margin-top: 1.5rem;
+}
+
+.seki-prose :where(blockquote) {
+  margin-top: 1.5rem;
+  border-left: 2px solid var(--seki-color-border);
+  padding-left: 1.5rem;
+  font-style: italic;
+  color: var(--seki-color-text-muted);
+  font-family: var(--seki-typography-body-font);
+}
+
+.seki-prose :where(ul, ol) {
+  margin: 1.5rem 0;
+  padding-left: 1.5rem;
+  font-family: var(--seki-typography-body-font);
+}
+
+.seki-prose :where(li) {
+  margin-top: 0.5rem;
+  line-height: var(--seki-typography-body-line-height);
+}
+
+.seki-prose :where(li::marker) {
+  color: var(--seki-color-text-muted);
+}
+
+.seki-prose :where(code) {
+  position: relative;
+  border-radius: 0.25rem;
+  background-color: var(--seki-color-muted);
+  padding: 0.125rem 0.375rem;
+  font-family: var(--seki-typography-code-font);
+  font-size: 0.875em;
+  font-weight: var(--seki-font-weight-medium);
+}
+
+.seki-prose :where(table) {
+  width: 100%;
+  caption-side: bottom;
+  border-collapse: collapse;
+  margin: 1.5rem 0;
+  font-family: var(--seki-typography-body-font);
+}
+
+.seki-prose :where(th) {
+  border-bottom: 1px solid var(--seki-color-border);
+  padding: 0.75rem;
+  text-align: left;
+  font-weight: var(--seki-font-weight-semibold);
+}
+
+.seki-prose :where(td) {
+  border-bottom: 1px solid var(--seki-color-border-subtle);
+  padding: 0.75rem;
+  text-align: left;
+}
+
+.seki-prose :where(tr:last-child td) {
+  border-bottom: none;
+}
+
+/* Flow spacing - space between sibling elements */
+.seki-prose > * + * {
+  margin-top: 1.5rem;
+}
+
+/* Reduced spacing after headings */
+.seki-prose > :is(h2, h3, h4) + * {
+  margin-top: 1rem;
+}

package/dist/collection/styles/typography/tokens.css

@@ -0,0 +1,77 @@
+/* Typography Design Tokens
+ * This file defines all CSS custom properties for the typography system
+ * Reference: specs/012-time-to-do/data-model.md
+ */
+
+:root {
+  /* Font Family Tokens */
+  --seki-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --seki-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+  /* Font Size Tokens (Primitive Scale) */
+  --seki-font-size-xs: 0.75rem;      /* 12px */
+  --seki-font-size-sm: 0.875rem;     /* 14px */
+  --seki-font-size-base: 1rem;       /* 16px */
+  --seki-font-size-lg: 1.125rem;     /* 18px */
+  --seki-font-size-xl: 1.25rem;      /* 20px */
+  --seki-font-size-2xl: 1.5rem;      /* 24px */
+  --seki-font-size-3xl: 1.875rem;    /* 30px */
+  --seki-font-size-4xl: 2.4rem;      /* 38.4px */
+
+  /* Font Weight Tokens */
+  --seki-font-weight-normal: 400;
+  --seki-font-weight-medium: 500;
+  --seki-font-weight-semibold: 600;
+  --seki-font-weight-bold: 700;
+  --seki-font-weight-extrabold: 800;
+
+  /* Line Height Tokens */
+  --seki-line-height-tight: 1.25;
+  --seki-line-height-normal: 1.5;
+  --seki-line-height-relaxed: 1.75;
+
+  /* Letter Spacing Tokens */
+  --seki-letter-spacing-tight: -0.025em;
+  --seki-letter-spacing-normal: 0;
+  --seki-letter-spacing-wide: 0.025em;
+
+  /* Color Tokens - Light Mode */
+  --seki-color-text: hsl(0, 0%, 10%);           /* #1a1a1a - 16.5:1 contrast on white */
+  --seki-color-text-muted: hsl(0, 0%, 45%);    /* #737373 - 4.7:1 contrast (WCAG AA) */
+  --seki-color-border: hsl(0, 0%, 88%);        /* #e0e0e0 */
+  --seki-color-border-subtle: hsl(0, 0%, 93%); /* #ededed */
+  --seki-color-muted: hsl(0, 0%, 96%);         /* #f5f5f5 - for code backgrounds */
+
+  /* Component-Specific Tokens - Heading Sizes */
+  --seki-typography-h1-size-min: 2rem;
+  --seki-typography-h1-size-max: 2.4rem;
+  --seki-typography-h1-weight: var(--seki-font-weight-extrabold);
+
+  --seki-typography-h2-size-min: 1.5rem;
+  --seki-typography-h2-size-max: 1.875rem;
+  --seki-typography-h2-weight: var(--seki-font-weight-semibold);
+
+  --seki-typography-h3-size-min: 1.25rem;
+  --seki-typography-h3-size-max: 1.5rem;
+  --seki-typography-h3-weight: var(--seki-font-weight-semibold);
+
+  --seki-typography-h4-size-min: 1.125rem;
+  --seki-typography-h4-size-max: 1.25rem;
+  --seki-typography-h4-weight: var(--seki-font-weight-semibold);
+
+  /* Semantic Grouping Tokens */
+  --seki-typography-heading-font: var(--seki-font-sans);
+  --seki-typography-heading-spacing: var(--seki-letter-spacing-tight);
+  --seki-typography-body-font: var(--seki-font-sans);
+  --seki-typography-body-line-height: var(--seki-line-height-relaxed);
+  --seki-typography-code-font: var(--seki-font-mono);
+}
+
+/* Dark Mode Color Tokens (matching shadcn/ui) */
+[data-theme="dark"] {
+  --seki-color-text: hsl(0, 0%, 98%);         /* shadcn --foreground: oklch(0.985 0 0) ≈ 98.5% */
+  --seki-color-text-muted: hsl(0, 0%, 65%);   /* shadcn --muted-foreground: oklch(0.708 0 0) ≈ 64.5% */
+  --seki-color-border: hsl(0, 0%, 27%);       /* shadcn --border: oklch(0.269 0 0) */
+  --seki-color-border-subtle: hsl(0, 0%, 20%);/* slightly darker variant */
+  --seki-color-muted: hsl(0, 0%, 20%);        /* shadcn --muted: oklch(0.269 0 0) */
+}

package/dist/collection/styles/typography/variants.css

@@ -0,0 +1,25 @@
+/* Typography Variants
+ * Text emphasis classes: lead, large, small, muted
+ * Reference: specs/012-time-to-do/data-model.md
+ */
+
+.seki-large {
+  font-size: clamp(var(--seki-font-size-lg), 3vw, var(--seki-font-size-xl));
+  font-weight: var(--seki-font-weight-semibold);
+  font-family: var(--seki-font-sans);
+  color: var(--seki-color-text);
+}
+
+.seki-small {
+  font-size: var(--seki-font-size-sm);
+  font-weight: var(--seki-font-weight-medium);
+  line-height: 1.25rem;
+  font-family: var(--seki-font-sans);
+  color: var(--seki-color-text);
+}
+
+.seki-muted {
+  font-size: var(--seki-font-size-sm);
+  color: var(--seki-color-text-muted);
+  font-family: var(--seki-font-sans);
+}

package/dist/components/index.js

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './p-ag6agK1v.js';
-export { g as getAssetPath, r as render, s as setAssetPath, b as setNonce, d as setPlatformOptions } from './p-ag6agK1v.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './p-qBYH2h9w.js';
+export { g as getAssetPath, r as render, s as setAssetPath, b as setNonce, d as setPlatformOptions } from './p-qBYH2h9w.js';
 
 const sekiSwitchCss = ":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%))}}";
 

package/dist/components/{p-ag6agK1v.js → p-qBYH2h9w.js}

@@ -40,6 +40,7 @@ var consoleError = (e, el) => (0, console.error)(e, el);
 // src/client/client-style.ts
 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 win = typeof window !== "undefined" ? window : {};
 var H = win.HTMLElement || class {
 };
@@ -467,7 +468,11 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
         }
       }
     }
-  } else if (memberName === "key") ; else if ((!elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
+  } else if (memberName === "key") ; else if (memberName === "ref") {
+    if (newValue) {
+      newValue(elm);
+    }
+  } else if ((!elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
     if (memberName[2] === "-") {
       memberName = memberName.slice(3);
     } else if (isMemberInElement(win, ln)) {
@@ -506,15 +511,26 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
       } catch (e) {
       }
     }
+    let xlink = false;
+    {
+      if (ln !== (ln = ln.replace(/^xlink\:?/, ""))) {
+        memberName = ln;
+        xlink = true;
+      }
+    }
     if (newValue == null || newValue === false) {
       if (newValue !== false || elm.getAttribute(memberName) === "") {
-        {
+        if (xlink) {
+          elm.removeAttributeNS(XLINK_NS, memberName);
+        } else {
           elm.removeAttribute(memberName);
         }
       }
     } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex && elm.nodeType === 1 /* ElementNode */) {
       newValue = newValue === true ? "" : newValue;
-      {
+      if (xlink) {
+        elm.setAttributeNS(XLINK_NS, memberName, newValue);
+      } else {
         elm.setAttribute(memberName, newValue);
       }
     }
@@ -624,6 +640,7 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
     const vnode = vnodes[index];
     if (vnode) {
       const elm = vnode.$elm$;
+      nullifyVNodeRefs(vnode);
       if (elm) {
         elm.remove();
       }
@@ -752,6 +769,12 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     elm.data = text;
   }
 };
+var nullifyVNodeRefs = (vNode) => {
+  {
+    vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+    vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
+  }
+};
 var insertBefore = (parent, newNode, reference) => {
   {
     return parent == null ? void 0 : parent.insertBefore(newNode, reference);