@lazhus/kg-ui 0.10.0 → 0.10.2

package/custom-elements.json

@@ -5685,7 +5685,7 @@
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: inline-block; vertical-align: middle; cursor: pointer; user-select: none; font-family: inherit; outline: none; } .kg-switch-wrapper:focus-within .kg-switch-track { box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); border-color: var(--kg-primary); } :host([disabled]) { cursor: not-allowed; opacity: 0.5; } .kg-switch-wrapper { display: flex; align-items: center; gap: 0.75rem; } .kg-switch-track { position: relative; width: 44px; height: 24px; background: var(--kg-border); border-radius: 24px; transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); } .kg-switch-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transform: translateX(0); will-change: transform; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s ease, background-color 0.3s ease; } /* Micro-animation: stretch effect on click */ .kg-switch-wrapper:active .kg-switch-thumb { width: 26px; } /* Checked State */ :host([checked]) .kg-switch-track { background: var(--switch-active-color, var(--kg-primary)); } :host([checked]) .kg-switch-thumb { transform: translateX(20px); } :host([checked]) .kg-switch-wrapper:active .kg-switch-thumb { transform: translateX(14px); /* Adjust position when stretched */ } .label { font-size: 0.95rem; font-weight: 500; color: var(--kg-text); transition: color 0.3s ease; } .error-text { position: absolute; top: 100%; left: 2px; color: #DB2828; font-size: 0.75rem; margin-top: 4px; font-weight: 500; animation: fadeIn 0.2s ease-in; white-space: nowrap; } .error .kg-switch-track { box-shadow: 0 0 0 2px rgba(219, 40, 40, 0.2); } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } `"
+              "default": "css` :host { display: inline-block; vertical-align: middle; cursor: pointer; user-select: none; font-family: inherit; outline: none; } .kg-switch-wrapper:focus-within .kg-switch-track { box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); border-color: var(--kg-primary); } :host([disabled]) { cursor: not-allowed; opacity: 0.5; } .kg-switch-wrapper { display: flex; align-items: center; gap: 0.75rem; } .kg-switch-track { position: relative; width: 44px; min-width: 44px; flex-shrink: 0; height: 24px; background: var(--kg-border); border-radius: 24px; transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); } .kg-switch-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transform: translateX(0); will-change: transform; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s ease, background-color 0.3s ease; } /* Micro-animation: stretch effect on click */ .kg-switch-wrapper:active .kg-switch-thumb { width: 26px; } /* Checked State */ :host([checked]) .kg-switch-track { background: var(--switch-active-color, var(--kg-primary)); } :host([checked]) .kg-switch-thumb { transform: translateX(20px); } :host([checked]) .kg-switch-wrapper:active .kg-switch-thumb { transform: translateX(14px); /* Adjust position when stretched */ } .label { font-size: 0.95rem; font-weight: 500; color: var(--kg-text); transition: color 0.3s ease; } .error-text { position: absolute; top: 100%; left: 2px; color: #DB2828; font-size: 0.75rem; margin-top: 4px; font-weight: 500; animation: fadeIn 0.2s ease-in; white-space: nowrap; } .error .kg-switch-track { box-shadow: 0 0 0 2px rgba(219, 40, 40, 0.2); } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } `"
             },
             {
               "kind": "method",

package/dist/components/kg-switch.js

@@ -56,6 +56,8 @@ var e=Object.defineProperty,t=(t,s,r)=>((t,s,r)=>s in t?e(t,s,{enumerable:!0,con
     .kg-switch-track {
       position: relative;
       width: 44px;
+      min-width: 44px;
+      flex-shrink: 0;
       height: 24px;
       background: var(--kg-border);
       border-radius: 24px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazhus/kg-ui",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "type": "module",
   "files": [
     "dist",