npm - @sekiui/elements - Versions diffs - 0.0.72 → 0.0.75 - Mend

@sekiui/elements 0.0.72 → 0.0.75

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

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

@@ -29,7 +29,7 @@ export class SekiFieldDescription {
         return this.componentId;
     }
     render() {
-        return (h("div", { key: '24fcba94d3395b75f7481efb6b0f3aa501487bf5', id: this.componentId, class: "description" }, h("slot", { key: 'd582c824acba3faf8dcf8fcf2ee1d1bea8262c4b' })));
+        return (h("div", { key: '93b6b20ec452ccc43f4cc5ae2db62a613f8fde30', id: this.componentId, class: "description" }, h("slot", { key: 'ac8b697eaaf61a81251050ce6ec71ca15a94cac9' })));
     }
     static get is() { return "seki-field-description"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-error/seki-field-error.css CHANGED Viewed

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

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

@@ -20,10 +20,17 @@ export class SekiFieldError {
          * Track previous visible state for aria-live announcements
          */
         this.previousVisible = true;
+        /**
+         * Internal mirror of the `visible` prop.
+         * Written by both external prop changes (@Watch) and the setVisible() method
+         * so that neither path violates Stencil's prop immutability contract.
+         */
+        this._visible = true;
     }
     componentWillLoad() {
         this.componentId = this.errorId || generateId();
         this.previousVisible = this.visible;
+        this._visible = this.visible;
     }
     componentWillUpdate() {
         // Update componentId if errorId prop changes
@@ -33,6 +40,7 @@ export class SekiFieldError {
     }
     handleVisibleChange(newValue) {
         this.previousVisible = newValue;
+        this._visible = newValue;
     }
     /**
      * Get the component's ID
@@ -45,11 +53,11 @@ export class SekiFieldError {
      * Programmatically show/hide the error message
      */
     async setVisible(visible) {
-        this.visible = visible;
+        this._visible = visible;
     }
     render() {
-        const style = this.visible ? {} : { display: 'none' };
-        return (h("div", { key: 'b3c824bdbbb1cefb93fb794a5785736cfa110faf', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: '296f5ad85a517e6b3cb8786f18a9a14171b19332' })));
+        const style = this._visible ? {} : { display: 'none' };
+        return (h("div", { key: '5682cd708f1e268ec859c75be829a2a1c0c417e0', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: '448efdf48a937c47ed73b4892fbb725685184d67' })));
     }
     static get is() { return "seki-field-error"; }
     static get encapsulation() { return "shadow"; }
@@ -109,7 +117,8 @@ export class SekiFieldError {
     static get states() {
         return {
             "componentId": {},
-            "previousVisible": {}
+            "previousVisible": {},
+            "_visible": {}
         };
     }
     static get methods() {

package/dist/collection/components/field-group/seki-field-group.css CHANGED Viewed

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

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

@@ -11,7 +11,7 @@ export class SekiFieldGroup {
         const style = {
             '--seki-field-group-gap': this.gap,
         };
-        return (h("div", { key: 'd504db3fb7ed73b5776b20dffbdf6c1547377afb', class: "field-group", style: style }, h("slot", { key: '1c479c97a25857a1a4b2523ce3f5090e84a93e2d' })));
+        return (h("div", { key: '4790f77c090c3a3ecf09c7231bb29a6827bae2b4', class: "field-group", style: style }, h("slot", { key: '1dac5a2aeb7cacaf25592f53493500a25bc49008' })));
     }
     static get is() { return "seki-field-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-label/seki-field-label.css CHANGED Viewed

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

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

@@ -9,7 +9,7 @@ export class SekiFieldLabel {
     }
     render() {
         const labelProps = this.htmlFor ? { for: this.htmlFor } : {};
-        return (h("label", Object.assign({ key: 'd272845c4d506046e443b610bd4705f3fa70f39a' }, labelProps), h("slot", { key: 'ecf8ad604d0997965d74d6b823366bb1f0dc82fb' }), this.required && h("span", { key: 'c76be74b5612990377d55616c63b0ed2d30646f9', class: "required-indicator" }, " *")));
+        return (h("label", Object.assign({ key: 'c0749f5d66f1cb8536e87aaae35fe42d4bd5a03d' }, labelProps), h("slot", { key: 'faf8f9d473c5083de897caf08714893a1a6bd545' }), this.required && h("span", { key: '9706a790d8689cf1afbee908c7e091664d5de07b', class: "required-indicator" }, " *")));
     }
     static get is() { return "seki-field-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-legend/seki-field-legend.css CHANGED Viewed

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiFieldLegend {
     render() {
-        return (h("legend", { key: '79fb0b7882517c6718b80524dbc9604b2ce64302' }, h("slot", { key: '71cc819eb7be508a0326baf507cd80bf797b4a07' })));
+        return (h("legend", { key: '396dd9e536a40fbf35368131831120869cf341b7' }, h("slot", { key: '4faf3b993173031b14789d1d3e5b2d752726dfa5' })));
     }
     static get is() { return "seki-field-legend"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/fieldset/seki-fieldset.css CHANGED Viewed

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

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

@@ -8,7 +8,7 @@ export class SekiFieldset {
         this.disabled = false;
     }
     render() {
-        return (h("fieldset", { key: '9466ace26c8ddd4fd2e4dd18ea9e87478e00b9cb', disabled: this.disabled, class: "fieldset" }, h("slot", { key: 'e748face6e8bae6e50ac0c024f5c5087a7c85dbf', name: "legend" }), h("div", { key: 'a35619921d96431da20138340a9e30a64055c61b', class: "fieldset-content" }, h("slot", { key: '0863fe78cfd6c922387c7cfeeb82ed50dc5189e0' }))));
+        return (h("fieldset", { key: '3976b94936eebe92300108b8ffb98d059792bece', disabled: this.disabled, class: "fieldset" }, h("slot", { key: '6e8e25a89ca5f497c608fa70cea16209f4fed30b', name: "legend" }), h("div", { key: '29610fedff85674dbf3a94bc226ee80577ca9661', class: "fieldset-content" }, h("slot", { key: '2436d8ce8f17460756f3d68f94da13fb89110ec7' }))));
     }
     static get is() { return "seki-fieldset"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/hover-card/seki-hover-card-content.css CHANGED Viewed

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

package/dist/collection/components/hover-card/seki-hover-card-trigger.css CHANGED Viewed

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

package/dist/collection/components/hover-card/seki-hover-card-trigger.js CHANGED Viewed

@@ -109,7 +109,7 @@ export class SekiHoverCardTrigger {
         this.isOpen = event.detail.open;
     }
     render() {
-        return (h(Host, { key: 'b0096cd1955900bd08887cd0d4dc540cafb195ef' }, h("span", { key: '75c41ea382f7044eb907970e7a14917b34b532d4', part: "trigger", class: "hover-card-trigger", "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick }, h("slot", { key: 'fb3d377e9e3fc200ab2d5a6bce05dbd0dba516d8' }))));
+        return (h(Host, { key: 'e28f2b08392be8441dc85935db02ea586e947c41' }, h("span", { key: 'c8a3c5fe7b627aa5776210d207444782769a7129', part: "trigger", class: "hover-card-trigger", "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick }, h("slot", { key: '389139801052402c58bc09e6c24e5366a3d120b4' }))));
     }
     static get is() { return "seki-hover-card-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/hover-card/seki-hover-card.css CHANGED Viewed

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

package/dist/collection/components/input/seki-input.css CHANGED Viewed

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

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

@@ -75,7 +75,7 @@ export class SekiInput {
         }
     }
     render() {
-        return (h("input", { key: 'e076e4385f1d98367a62a92d9027cc722a9d3181', 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: 'ad4f39fae83a75cd901ed9cf5c33b3989742af92', 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/input-group/seki-input-addon.css CHANGED Viewed

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

package/dist/collection/components/input-group/seki-input-addon.js CHANGED Viewed

@@ -7,7 +7,7 @@ export class SekiInputAddon {
         this.size = 'md';
     }
     render() {
-        return (h(Host, { key: 'ea0e49f07d0b89ca812b827a145ef62fcdea3cfc' }, h("div", { key: 'cd97b8298345e5f1736d9def5d56dbf397eb8ea1', class: `addon addon--${this.size}` }, h("slot", { key: '24af4759fdcd692515f42a1b573cf3bebef1384c' }))));
+        return (h(Host, { key: '4e687090261154281a62d2ab4c59a5cdd5f13964' }, h("div", { key: 'e67248f2cb32cba04383397c0d3b00f697f7f48c', class: `addon addon--${this.size}` }, h("slot", { key: 'a8092b4c68cdbd824f573c2e3a923f006179f3e7' }))));
     }
     static get is() { return "seki-input-addon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-group/seki-input-group.css CHANGED Viewed

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

package/dist/collection/components/input-group/seki-input-group.js CHANGED Viewed

@@ -53,7 +53,7 @@ export class SekiInputGroup {
         });
     }
     render() {
-        return (h(Host, { key: '4a1ccea7c7bfffd7e7dc3af6f54d9939a4947452' }, h("div", { key: '1141112c1aa063f828d327caed3c1483fca4652c', class: "input-group", role: "group", "aria-label": this.ariaLabel }, h("slot", { key: 'eff2b7e136dffc57b7149019da289f93fbed218b', onSlotchange: () => this.updateChildren() }))));
+        return (h(Host, { key: '1ce1f5b51a0f18450db8993990bfda0040f34854' }, h("div", { key: '0a1b206a85a2ac8826bc251e08aa8060aff74b8a', class: "input-group", role: "group", "aria-label": this.ariaLabel }, h("slot", { key: '36f9e8ea6db435aa9ddfc92f6c996080fa4e81e8', onSlotchange: () => this.updateChildren() }))));
     }
     static get is() { return "seki-input-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-otp/seki-input-otp-group.css CHANGED Viewed

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

package/dist/collection/components/input-otp/seki-input-otp-group.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiInputOtpGroup {
     render() {
-        return (h("div", { key: '2c6171d217fbd876c62e5fa1ec293b3ca0c1b012', class: "group", role: "group" }, h("slot", { key: '93a014b80147982b0bb3e256f82db6ff3c58e576' })));
+        return (h("div", { key: 'ea05f89e0e527d285149b8f903f83c9ed35dd9fb', class: "group", role: "group" }, h("slot", { key: '575ed924e8e2b099f89a82b4d7496fb13e7e9428' })));
     }
     static get is() { return "seki-input-otp-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-otp/seki-input-otp-separator.css CHANGED Viewed

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;
@@ -762,6 +763,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  font-family: var(--seki-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
 }
 .separator {

package/dist/collection/components/input-otp/seki-input-otp-separator.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiInputOtpSeparator {
     render() {
-        return (h("div", { key: '9c9eb8ae7aa94347f126861ad5e23c6e73e7be3f', role: "separator", "aria-orientation": "vertical", class: "separator" }, h("slot", { key: 'c2169fe06aa2ab8498d045585bf8f5789e824ddd' }, h("span", { key: '0e25f288407a20fb77f9cc917c112c12e82f7bf1', "aria-hidden": "true" }, "-"))));
+        return (h("div", { key: 'b912b705b23e967321ebf027c21a00b08fdc11b6', role: "separator", "aria-orientation": "vertical", class: "separator" }, h("slot", { key: 'b7f92dab56e561b2936db467bb78945955aa9dc8' }, h("span", { key: '890937dbd45369d261a00e71f45b9b39fc286bf9', "aria-hidden": "true" }, "-"))));
     }
     static get is() { return "seki-input-otp-separator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-otp/seki-input-otp-slot.css CHANGED Viewed

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

package/dist/collection/components/input-otp/seki-input-otp-slot.js CHANGED Viewed

@@ -64,7 +64,7 @@ export class SekiInputOtpSlot {
             'slot--invalid': this.isInvalid,
             'slot--focused': this.hasFocus,
         };
-        return (h("div", { key: 'fc97f35586c5636dbbb327e1b7bd5d358d2789f0', class: classes, "aria-hidden": "true", onClick: this.handleClick }, h("span", { key: 'a5a401ca3876a1377a3adc32df2eaaf93945578b', class: "char" }, this.getDisplayChar()), this.isActive && h("span", { key: '217edf12c4711003220bad9d73eee5bec80f520f', class: "caret" })));
+        return (h("div", { key: 'd3974dd9d02b3980eabf494c4846b7596af7f824', class: classes, "aria-hidden": "true", onClick: this.handleClick }, h("span", { key: 'f728a1c36b826552dcd61ae4f90a37b4d4d166a0', class: "char" }, this.getDisplayChar()), this.isActive && h("span", { key: '12cc8b14fa275dbffb204e0a8f243a7a57d30876', class: "caret" })));
     }
     static get is() { return "seki-input-otp-slot"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-otp/seki-input-otp.css CHANGED Viewed

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

package/dist/collection/components/input-otp/seki-input-otp.js CHANGED Viewed

@@ -209,11 +209,11 @@ export class SekiInputOtp {
         const inputMode = this.pattern === 'digits' ? 'numeric' : 'text';
         const inputPattern = this.pattern === 'digits' ? '[0-9]*' : '[a-zA-Z0-9]*';
         const ariaLabelText = this.ariaLabel || `Enter ${this.maxlength}-digit code`;
-        return (h("div", { key: 'f293b2a456e1baf4c9d8b08ac2464bc873c5fc8f', class: {
+        return (h("div", { key: '0f93332f20e86ffba635f6fed88fe2cccf04d7bd', class: {
                 'input-otp-container': true,
                 'input-otp-container--disabled': this.disabled,
                 'input-otp-container--invalid': this.invalid,
-            }, onClick: this.handleContainerClick }, h("input", { key: 'fb6c1e78e18026466d27ffaf03905a4a9e3b09af', ref: (el) => (this.inputRef = el), type: "text", inputMode: inputMode, autocomplete: this.autocomplete, pattern: inputPattern, maxLength: this.maxlength, value: this.value, disabled: this.disabled, required: this.required, name: this.name, class: "input-otp-hidden", "aria-label": ariaLabelText, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur }), h("slot", { key: 'c61374b47414538cc6b7b18d50c199807c7fd0e5' })));
+            }, onClick: this.handleContainerClick }, h("input", { key: '08abf6cc3c7f427bc7811ac619df37147e276caa', ref: (el) => (this.inputRef = el), type: "text", inputMode: inputMode, autocomplete: this.autocomplete, pattern: inputPattern, maxLength: this.maxlength, value: this.value, disabled: this.disabled, required: this.required, name: this.name, class: "input-otp-hidden", "aria-label": ariaLabelText, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur }), h("slot", { key: '1b657601f5531c7f50d9cc9d418bacbd0b051880' })));
     }
     static get is() { return "seki-input-otp"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/kbd/seki-kbd.css CHANGED Viewed

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

package/dist/collection/components/kbd/seki-kbd.js CHANGED Viewed

@@ -7,7 +7,7 @@ export class SekiKbd {
         this.size = 'md';
     }
     render() {
-        return (h("kbd", { key: '4e7d58af5cb59b9a274e48a646bfb1576bad8dde', class: `kbd kbd--${this.size}` }, h("slot", { key: '724b4d0bf5127624e7efb794cb521efce65fe50e' })));
+        return (h("kbd", { key: '720fbd65437fcc6636094b93e5fd0517c249a56d', class: `kbd kbd--${this.size}` }, h("slot", { key: 'c96ad0e080fd65a64779c14b520ff42ee7ebcf46' })));
     }
     static get is() { return "seki-kbd"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/label/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { SekiLabel } from './seki-label';

package/dist/collection/components/label/seki-label.css ADDED Viewed

@@ -0,0 +1,67 @@
+/* Label Component Styles with Design Tokens
+ * Uses typography system for text sizing
+ * Reference: src/styles/typography/tokens.css
+ */
+:host {
+  /* Typography tokens */
+  --seki-label-font-size: var(--seki-font-size-sm, 12px);
+  --seki-label-font-weight: var(--seki-font-weight-medium, 500);
+  --seki-label-font-family: var(--seki-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);
+  --seki-label-line-height: var(--seki-line-height-tight, 1.25);
+  /* Color tokens */
+  --seki-label-color: var(--color-text-primary, #1f2937);
+  --seki-label-muted-color: var(--color-text-secondary, #6b7280);
+  --seki-label-required-color: var(--color-destructive, #ef4444);
+  display: inline-block;
+}
+/* Dark mode support */
+:host([data-theme='dark']) {
+  --seki-label-color: var(--color-text-primary-dark, #f3f4f6);
+  --seki-label-muted-color: var(--color-text-secondary-dark, #9ca3af);
+}
+/* Base label styles */
+.seki-label {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--seki-label-font-family);
+  font-size: var(--seki-label-font-size);
+  font-weight: var(--seki-label-font-weight);
+  line-height: var(--seki-label-line-height);
+  color: var(--seki-label-color);
+  cursor: default;
+  user-select: none;
+}
+/* Disabled state */
+.seki-label--disabled {
+  color: var(--seki-label-muted-color);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+/* Required indicator */
+.seki-label__required {
+  color: var(--seki-label-required-color);
+  font-weight: var(--seki-font-weight-bold, 700);
+  margin-inline-start: var(--seki-spacing-0-5, 0.125rem);
+}
+/* Accessibility: High contrast mode support */
+@media (prefers-contrast: more) {
+  .seki-label__required {
+    font-weight: var(--seki-font-weight-bold, 700);
+    text-decoration: underline;
+  }
+}
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .seki-label {
+    transition: none;
+  }
+}

package/dist/collection/components/label/seki-label.js ADDED Viewed

@@ -0,0 +1,112 @@
+import { h } from "@stencil/core";
+/**
+ * seki-label: A styled label component for form elements
+ *
+ * @component Label
+ * @example
+ * <seki-label for="email">Email Address</seki-label>
+ * <seki-label required>Username</seki-label>
+ * <seki-label disabled>Disabled Field</seki-label>
+ */
+export class SekiLabel {
+    constructor() {
+        /**
+         * When true, renders a required indicator (*) after the label text.
+         * @default false
+         */
+        this.required = false;
+        /**
+         * When true, applies disabled styling (muted color, not-allowed cursor).
+         * @default false
+         */
+        this.disabled = false;
+    }
+    render() {
+        const labelProps = this.for ? { for: this.for } : {};
+        return (h("label", Object.assign({ key: '0cee40e30af673530b862666524169a136405de0', part: "label" }, labelProps, { class: {
+                'seki-label': true,
+                'seki-label--disabled': !!this.disabled,
+            } }), h("slot", { key: '898c9b2cc21b570625b56f30105758dae80f4d38' }), this.required && h("span", { key: 'f4e19e4b02266b3bd7ea6041ba9331caf5d3c170', class: "seki-label__required" }, " *")));
+    }
+    static get is() { return "seki-label"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-label.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-label.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "for": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The ID of the form element this label is associated with.\nMaps to the `htmlFor` attribute on the inner `<label>` element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "for"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "When true, renders a required indicator (*) after the label text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "When true, applies disabled styling (muted color, not-allowed cursor)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/menubar/seki-menubar-checkbox.css CHANGED Viewed

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;
@@ -760,6 +761,7 @@
 :host {
   display: contents;
+  font-family: var(--seki-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
 }
 .menubar-checkbox {

package/dist/collection/components/menubar/seki-menubar-checkbox.js CHANGED Viewed

@@ -42,10 +42,10 @@ export class SekiMenubarCheckbox {
         this._checked = this.checked;
     }
     render() {
-        return (h(Host, { key: '786f039e08fed20cf13cd38613d9ae0390619179' }, h("div", { key: '551056a52421cf95218501dbf82bf38c88b76082', part: "item", role: "menuitemcheckbox", class: {
+        return (h(Host, { key: 'd2cacc42db5ed1dce9a7b48999f3be6f0b8f4be7' }, h("div", { key: '55e70d7217d4f2a57e0440fa143b590c05679ab1', part: "item", role: "menuitemcheckbox", class: {
                 'menubar-checkbox': true,
                 'menubar-checkbox--disabled': this.disabled,
-            }, tabindex: this.disabled ? -1 : 0, "aria-checked": this._checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '39064961c219f1fccd00bae07a0d15049ed81d20', part: "indicator", class: "menubar-checkbox__indicator" }, this._checked && (h("svg", { key: '44093b4a3d1418bf63aebfe5951cf9ffe8e78ae3', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '9f0513c84d923d94125bb1af56cb60cda240e243', points: "20 6 9 17 4 12" })))), h("slot", { key: 'c2840bc94e32b30d81265343ef5fb1215eb5b359' }), this.shortcut && (h("span", { key: '4a550b967e5eab634f1269855042082d142b84f6', part: "shortcut", class: "menubar-checkbox-shortcut" }, this.shortcut)))));
+            }, tabindex: this.disabled ? -1 : 0, "aria-checked": this._checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '21338485de9e308957898f5bd24f3c0a8653fee8', part: "indicator", class: "menubar-checkbox__indicator" }, this._checked && (h("svg", { key: '9e8f45aec473622a4f4d3dfa35b54a67697060a7', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: 'af90b1b6cf242c3d12ce64fe3dfebae5b7f45515', points: "20 6 9 17 4 12" })))), h("slot", { key: '8f749e575fafc3977f2fefe0f29cc08f2d274ae6' }), this.shortcut && (h("span", { key: '4d19a0853d66738f324ae9bcd0d3ce0ce90f4e32', part: "shortcut", class: "menubar-checkbox-shortcut" }, this.shortcut)))));
     }
     static get is() { return "seki-menubar-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menubar/seki-menubar-content.css CHANGED Viewed

@@ -373,6 +373,7 @@
   --seki-font-bold: 700;
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;

package/dist/collection/components/menubar/seki-menubar-group.css CHANGED Viewed

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;
@@ -760,6 +761,7 @@
 :host {
   display: contents;
+  font-family: var(--seki-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
 }
 .menubar-group {

package/dist/collection/components/menubar/seki-menubar-group.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiMenubarGroup {
     render() {
-        return (h(Host, { key: '6b49d70727e4ba6ffcd83c865cddd835f9c0c196' }, h("div", { key: 'f7deccc69f8d14361b9e8b2f8d6731cbdca0a8b5', part: "group", role: "group", class: "menubar-group" }, this.label && (h("div", { key: '2589b5f9d9f213d2309c209625c91990f590a381', part: "label", class: "menubar-group-label" }, this.label)), h("slot", { key: '91158fadb259a26f5e396ea476fcea0c9b5d0e4b' }))));
+        return (h(Host, { key: '8cfcd616fb02705767992456665b0d1cc990105c' }, h("div", { key: 'e4e8ed8aa10d468bd8e0f6d6e76b78a34fd00bd4', part: "group", role: "group", class: "menubar-group" }, this.label && (h("div", { key: 'ad8caad596c82e410e6b0427131a9321028cedd5', part: "label", class: "menubar-group-label" }, this.label)), h("slot", { key: 'f6633043fbf282bd6995ed2bbf7cae001d55dfd7' }))));
     }
     static get is() { return "seki-menubar-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menubar/seki-menubar-item.css CHANGED Viewed

@@ -372,6 +372,7 @@
   --seki-font-bold: 700;
   /* Line Heights */
+  --seki-leading-none: 1;
   --seki-leading-tight: 1.25;
   --seki-leading-normal: 1.5;
   --seki-leading-relaxed: 1.75;
@@ -760,6 +761,7 @@
 :host {
   display: contents;
+  font-family: var(--seki-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
 }
 .menubar-item {