@sekiui/elements 0.0.23 → 0.0.25

package/dist/collection/components/button/seki-button.css

@@ -208,9 +208,9 @@
 
   /* Button Sizing: Small */
   --seki-button-sm-padding-x: var(--seki-spacing-3, 0.75rem);
-  --seki-button-sm-padding-y: var(--seki-spacing-1-5, 0.375rem);
+  --seki-button-sm-padding-y: 0.375rem;
   --seki-button-sm-font-size: var(--seki-text-sm, 0.875rem);
-  --seki-button-sm-height: 2rem;
+  --seki-button-sm-height: 2.25rem; /* Updated from 2rem to match shadcn (36px) */
 
   /* Button Sizing: Medium (default) */
   --seki-button-md-padding-x: var(--seki-spacing-4, 1rem);
@@ -219,10 +219,24 @@
   --seki-button-md-height: 2.5rem;
 
   /* Button Sizing: Large */
-  --seki-button-lg-padding-x: var(--seki-spacing-5, 1.25rem);
-  --seki-button-lg-padding-y: var(--seki-spacing-2-5, 0.625rem);
-  --seki-button-lg-font-size: var(--seki-text-lg, 1.125rem);
-  --seki-button-lg-height: 3rem;
+  --seki-button-lg-padding-x: 2rem; /* Updated from 1.25rem to match shadcn */
+  --seki-button-lg-padding-y: 0.5rem;
+  --seki-button-lg-font-size: 1rem; /* Updated from 1.125rem to match shadcn */
+  --seki-button-lg-height: 2.75rem; /* Updated from 3rem to match shadcn (44px) */
+
+  /* Button Sizing: Icon-only (NEW - shadcn compatibility) */
+  --seki-button-icon-sm-size: 2rem; /* 32x32px square */
+  --seki-button-icon-size: 2.5rem; /* 40x40px square */
+  --seki-button-icon-lg-size: 3rem; /* 48x48px square */
+  --seki-button-icon-gap: 0.5rem; /* 8px gap between icon and text */
+
+  /* Button Variant: Link (NEW - shadcn compatibility) */
+  --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;
 
   /* Button Common */
   --seki-button-radius: var(--seki-radius-md, 0.375rem);
@@ -232,6 +246,17 @@
   --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;
+
+  /* Input Component Colors */
+  --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);
 }
 
 /**
@@ -258,6 +283,15 @@
   --seki-spacing-16: 4rem;       /* 64px */
   --seki-spacing-20: 5rem;       /* 80px */
   --seki-spacing-24: 6rem;       /* 96px */
+
+  /* Input Component Tokens */
+  --seki-input-height-sm: 2rem;       /* 32px */
+  --seki-input-height-md: 2.5rem;     /* 40px - default */
+  --seki-input-height-lg: 3rem;       /* 48px */
+  --seki-input-padding-x: 0.75rem;    /* 12px */
+  --seki-input-padding-y: 0.5rem;     /* 8px */
+  --seki-input-font-size: 0.875rem;   /* 14px */
+  --seki-input-ring-offset: 2px;
 }
 
 /**
@@ -326,6 +360,7 @@
 
 .button {
   /* Base styles */
+  box-sizing: border-box;
   font-family: var(--seki-font-sans);
   font-weight: var(--seki-button-font-weight);
   border-radius: var(--seki-button-radius);
@@ -334,8 +369,15 @@
   transition: background-color var(--seki-button-transition-duration) var(--seki-button-transition-timing),
               border-color var(--seki-button-transition-duration) var(--seki-button-transition-timing),
               color var(--seki-button-transition-duration) var(--seki-button-transition-timing),
-              box-shadow var(--seki-button-transition-duration) var(--seki-button-transition-timing);
+              box-shadow var(--seki-button-transition-duration) var(--seki-button-transition-timing),
+              text-decoration var(--seki-button-transition-duration) var(--seki-button-transition-timing);
   box-shadow: var(--seki-button-shadow);
+
+  /* Flexbox layout for icon-text spacing */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--seki-button-icon-gap);
 }
 
 .button:hover:not(:disabled) {
@@ -417,6 +459,21 @@
   border-color: var(--seki-button-destructive-hover-border);
 }
 
+/* Variant: Link (NEW - shadcn compatibility) */
+.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;
+}
+
 /* Size: Small */
 .button--sm {
   padding: var(--seki-button-sm-padding-y) var(--seki-button-sm-padding-x);
@@ -438,6 +495,27 @@
   height: var(--seki-button-lg-height);
 }
 
+/* Size: Icon-only Small (NEW - shadcn compatibility) */
+.button--icon-sm {
+  width: var(--seki-button-icon-sm-size);
+  height: var(--seki-button-icon-sm-size);
+  padding: 0;
+}
+
+/* Size: Icon-only Medium/Default (NEW - shadcn compatibility) */
+.button--icon {
+  width: var(--seki-button-icon-size);
+  height: var(--seki-button-icon-size);
+  padding: 0;
+}
+
+/* Size: Icon-only Large (NEW - shadcn compatibility) */
+.button--icon-lg {
+  width: var(--seki-button-icon-lg-size);
+  height: var(--seki-button-icon-lg-size);
+  padding: 0;
+}
+
 /* Reduced Motion */
 @media (prefers-reduced-motion: reduce) {
   .button {

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

@@ -1,13 +1,33 @@
 import { h } from "@stencil/core";
 export class SekiButton {
     constructor() {
+        /**
+         * 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: '0a0740566a19505743488924d3971f75cf086ab8', class: `button button--${this.variant} button--${this.size}`, type: this.type, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, h("slot", { key: '6c715e7b707efb6dffc4b88773d7ea63c510f305' })));
+        return (h("button", { key: '7e92cd3ca41f6313debb5bdeb7997b4765b24742', 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: '53c535e16ce0ce1edb879d5b06d47f95c7f382de' })));
     }
     static get is() { return "seki-button"; }
     static get encapsulation() { return "shadow"; }
@@ -27,15 +47,15 @@ export class SekiButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive'",
-                    "resolved": "\"destructive\" | \"ghost\" | \"outline\" | \"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link'",
+                    "resolved": "\"destructive\" | \"ghost\" | \"link\" | \"outline\" | \"primary\" | \"secondary\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Visual style variant of the button"
                 },
                 "getter": false,
                 "setter": false,
@@ -47,15 +67,15 @@ export class SekiButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'sm' | 'md' | 'lg'",
-                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "original": "'sm' | 'md' | 'lg' | 'icon-sm' | 'icon' | 'icon-lg'",
+                    "resolved": "\"icon\" | \"icon-lg\" | \"icon-sm\" | \"lg\" | \"md\" | \"sm\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Size of the button. Use icon-sm, icon, or icon-lg for icon-only buttons."
                 },
                 "getter": false,
                 "setter": false,
@@ -75,7 +95,7 @@ export class SekiButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Whether the button is disabled"
                 },
                 "getter": false,
                 "setter": false,
@@ -95,13 +115,32 @@ export class SekiButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Button type attribute"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "type",
                 "defaultValue": "'button'"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for screen readers. Required for icon-only buttons."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label"
             }
         };
     }