atomicuilibrary 0.0.1 → 0.1.3

package/dist/collection/components/switch/switch.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 .sr-only {
   position: absolute !important;
   width: 1px !important;
@@ -37,7 +38,7 @@
   --switch-danger-rgb: 239, 68, 104;
   --switch-warning-rgb: 245, 158, 11;
   --switch-info-rgb: 59, 130, 246;
-  --switch-track-bg: var(--bg-primary, #e2e8f0);
+  --switch-track-bg: #b8c4d0;
   --switch-thumb-bg: var(--bg-primary, #ffffff);
   --switch-text: var(--label-color, var(--text-primary, #1e293b));
   --switch-text-muted: var(--label-subtitle-color, var(--text-secondary, #64748b));
@@ -53,8 +54,18 @@
 :host-context([data-theme=pink]),
 :host-context([data-theme=blue]),
 :host-context([data-theme=green]) {
-  --switch-track-bg: var(--bg-secondary, #1e293b);
-  --switch-thumb-bg: var(--bg-primary, #334155);
+  --switch-track-bg: var(--bg-tertiary, #334155);
+  --switch-thumb-bg: var(--text-emphasized, #ffffff);
+  --switch-text: var(--label-color, #f1f5f9);
+  --switch-text-muted: var(--label-subtitle-color, #cbd5e1);
+}
+:host-context(.dark) .switch-track,
+:host-context([data-theme=dark]) .switch-track,
+:host-context([data-theme=violet]) .switch-track,
+:host-context([data-theme=pink]) .switch-track,
+:host-context([data-theme=blue]) .switch-track,
+:host-context([data-theme=green]) .switch-track {
+  border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.12));
 }
 
 .switch-host {
@@ -274,7 +285,7 @@
   border-radius: 9999px;
   transition: background-color var(--switch-duration) var(--switch-easing), box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   overflow: hidden;
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.14);
 }
 .switch-container:hover .switch-track {
   filter: brightness(1.05);
@@ -345,19 +356,19 @@
 }
 .switch-thumb {
   position: absolute;
-  background-color: var(--bg-primary, #ffffff);
+  background-color: var(--switch-thumb-bg, var(--bg-primary, #ffffff));
   border-radius: 50%;
-  box-shadow: var(--shadow-sm);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.12);
   transition: transform var(--switch-duration) var(--switch-easing), background-color var(--switch-duration) var(--switch-easing), box-shadow var(--switch-duration) var(--switch-easing);
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 0.5px solid rgba(0, 0, 0, 0.04);
+  border: 0.5px solid rgba(0, 0, 0, 0.1);
 }
 .switch-thumb:hover {
   transform: scale(1.05) translateZ(0);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.12);
 }
 
 .switch-icon {
@@ -909,6 +920,7 @@
   text-transform: uppercase;
   letter-spacing: 0.08em;
   opacity: 0.65;
+  color: var(--switch-text);
   display: flex;
   flex-direction: column;
   line-height: 1.2;
@@ -1096,4 +1108,351 @@
     transform: translateY(0);
     opacity: 1;
   }
+}
+.switch-flat .switch-track {
+  background: transparent !important;
+  border: 2px solid var(--switch-track-bg) !important;
+  box-shadow: none !important;
+}
+.switch-flat .switch-thumb {
+  background: var(--switch-track-bg) !important;
+  box-shadow: none !important;
+  border: none !important;
+}
+
+:host(.switch-checked.switch-flat) .switch-track {
+  border-color: var(--switch-active-bg) !important;
+}
+
+:host(.switch-checked.switch-flat) .switch-thumb {
+  background: var(--switch-active-bg) !important;
+  box-shadow: 0 2px 8px rgba(var(--switch-active-bg-rgb, 37, 99, 235), 0.35) !important;
+}
+
+.switch-dot .switch-wrapper {
+  padding-top: 14px;
+}
+.switch-dot .switch-wrapper::before {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--switch-track-bg);
+  transition: background var(--switch-duration) var(--switch-easing), transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
+}
+
+:host(.switch-checked.switch-dot) .switch-wrapper::before {
+  background: var(--switch-active-bg);
+  box-shadow: 0 0 7px rgba(var(--switch-active-bg-rgb, 37, 99, 235), 0.55);
+  transform: translateX(-50%) scale(1.2);
+}
+
+.switch-metallic .switch-track {
+  background: linear-gradient(145deg, #2d2d2d, #484848) !important;
+  border: 1px solid rgba(0, 0, 0, 0.5) !important;
+  box-shadow: inset 3px 3px 7px rgba(0, 0, 0, 0.55), inset -2px -2px 5px rgba(255, 255, 255, 0.06) !important;
+}
+.switch-metallic .switch-thumb {
+  background: radial-gradient(circle at 35% 30%, #f5f5f5, #b0b0b0 50%, #707070) !important;
+  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.45), -1px -1px 4px rgba(255, 255, 255, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
+  border: 1px solid rgba(80, 80, 80, 0.4) !important;
+}
+
+:host(.switch-checked.switch-metallic) .switch-track {
+  background: linear-gradient(145deg, #0f3020, #1a5535) !important;
+  box-shadow: inset 3px 3px 7px rgba(0, 0, 0, 0.55), 0 0 16px rgba(var(--switch-success-rgb, 16, 185, 129), 0.3) !important;
+  border-color: rgba(16, 185, 129, 0.4) !important;
+}
+
+.switch-slider .switch-track {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  overflow: visible !important;
+}
+.switch-slider .switch-track::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 4px;
+  transform: translateY(-50%);
+  background: var(--switch-track-bg);
+  border-radius: 2px;
+  z-index: 0;
+  transition: background var(--switch-duration) var(--switch-easing);
+}
+.switch-slider .switch-thumb {
+  z-index: 3;
+  background: var(--switch-thumb-bg) !important;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.7) !important;
+  border: 1.5px solid rgba(0, 0, 0, 0.07) !important;
+}
+
+:host(.switch-checked.switch-slider) .switch-track::before {
+  background: var(--switch-active-bg);
+}
+
+:host(.switch-checked.switch-slider) .switch-thumb {
+  background: var(--switch-active-bg) !important;
+  box-shadow: 0 3px 10px rgba(var(--switch-active-bg-rgb, 37, 99, 235), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
+  border-color: rgba(var(--switch-active-bg-rgb, 37, 99, 235), 0.2) !important;
+}
+
+.switch-pill-flat .switch-track {
+  background: var(--switch-track-bg) !important;
+  border: none !important;
+  box-shadow: none !important;
+  border-radius: 9999px !important;
+}
+.switch-pill-flat .switch-thumb {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
+  border: none !important;
+  border-radius: 9999px !important;
+  background: #ffffff !important;
+}
+
+:host(.switch-checked.switch-pill-flat) .switch-track {
+  background: var(--switch-active-bg) !important;
+}
+
+:host(.switch-checked.switch-pill-flat) .switch-thumb {
+  box-shadow: 0 1px 4px rgba(var(--switch-active-bg-rgb, 37, 99, 235), 0.25) !important;
+}
+
+.switch-soft .switch-track {
+  background: rgba(var(--switch-active-bg-rgb, 148, 163, 184), 0.12) !important;
+  border: 1.5px solid rgba(var(--switch-active-bg-rgb, 148, 163, 184), 0.28) !important;
+  box-shadow: none !important;
+}
+.switch-soft .switch-thumb {
+  background: rgba(var(--switch-active-bg-rgb, 148, 163, 184), 0.65) !important;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
+  border: none !important;
+}
+
+:host(.switch-checked.switch-soft) .switch-track {
+  background: rgba(var(--switch-active-bg-rgb, 37, 99, 235), 0.18) !important;
+  border-color: var(--switch-active-bg) !important;
+}
+
+:host(.switch-checked.switch-soft) .switch-thumb {
+  background: var(--switch-active-bg) !important;
+  box-shadow: 0 2px 8px rgba(var(--switch-active-bg-rgb, 37, 99, 235), 0.35) !important;
+}
+
+.switch-bicolor .switch-track {
+  background: linear-gradient(to right, #22c55e 50%, #ef4444 50%) !important;
+  border: none !important;
+  box-shadow: none !important;
+  overflow: hidden;
+}
+.switch-bicolor .switch-track::before {
+  content: "✓";
+  position: absolute;
+  left: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: rgba(255, 255, 255, 0.95);
+  font-size: calc(var(--switch-thumb-size, 20px) * 0.55);
+  font-weight: 900;
+  z-index: 1;
+  pointer-events: none;
+  line-height: 1;
+}
+.switch-bicolor .switch-track::after {
+  content: "✕";
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: rgba(255, 255, 255, 0.95);
+  font-size: calc(var(--switch-thumb-size, 20px) * 0.55);
+  font-weight: 900;
+  z-index: 1;
+  pointer-events: none;
+  line-height: 1;
+}
+.switch-bicolor .switch-thumb {
+  z-index: 2;
+  background: #ffffff !important;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.15) !important;
+  border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
+}
+
+:host-context(.dark) .switch-bicolor .switch-track,
+[data-theme=dark] .switch-bicolor .switch-track {
+  background: linear-gradient(to right, #16a34a 50%, #dc2626 50%) !important;
+}
+
+.switch-power .switch-track {
+  height: var(--switch-track-width) !important;
+  border-radius: 50% !important;
+  background: var(--bg-primary, #ffffff) !important;
+  border: 5px solid #94a3b8 !important;
+  box-shadow: inset 2px 2px 8px rgba(0, 0, 0, 0.1), inset -2px -2px 6px rgba(255, 255, 255, 0.85), 0 4px 16px rgba(0, 0, 0, 0.1) !important;
+  justify-content: center;
+  align-items: center;
+}
+.switch-power .switch-track::before {
+  content: "OFF";
+  color: #94a3b8;
+  font-size: calc(var(--switch-track-width, 44px) * 0.22);
+  font-weight: 900;
+  letter-spacing: 0.05em;
+  pointer-events: none;
+  z-index: 2;
+  transition: color 0.3s ease;
+}
+.switch-power .switch-thumb {
+  display: none !important;
+}
+
+:host(.switch-checked.switch-power) .switch-track {
+  border-color: var(--switch-active-bg) !important;
+  background: var(--bg-primary, #ffffff) !important;
+  box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.05), inset -1px -1px 4px rgba(255, 255, 255, 0.9), 0 0 24px rgba(var(--switch-active-bg-rgb, 37, 99, 235), 0.35) !important;
+}
+
+:host(.switch-checked.switch-power) .switch-track::before {
+  content: "ON";
+  color: var(--switch-active-bg);
+}
+
+:host-context(.dark) .switch-power .switch-track,
+[data-theme=dark] .switch-power .switch-track {
+  background: #1e293b !important;
+  box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.5), inset -2px -2px 6px rgba(255, 255, 255, 0.05), 0 4px 16px rgba(0, 0, 0, 0.3) !important;
+}
+
+:host(.switch-status) {
+  --switch-track-width: 104px;
+}
+
+.switch-status .switch-track {
+  background: linear-gradient(to right, #22c55e 52%, var(--bg-secondary, #f1f5f9) 48%) !important;
+  border: 2px solid #22c55e !important;
+  box-shadow: none !important;
+  overflow: hidden;
+}
+.switch-status .switch-track::before {
+  content: "✓";
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #22c55e;
+  font-size: calc(var(--switch-thumb-size, 20px) * 0.7);
+  font-weight: 900;
+  z-index: 1;
+  pointer-events: none;
+  line-height: 1;
+  transition: color 0.3s ease;
+}
+.switch-status .switch-track-text {
+  position: absolute !important;
+  top: 50% !important;
+  left: 8px !important;
+  right: auto !important;
+  transform: translateY(-50%) !important;
+  width: auto !important;
+  color: #ffffff !important;
+  font-size: 10px !important;
+  font-weight: 900 !important;
+  letter-spacing: 0.05em !important;
+  opacity: 1 !important;
+  white-space: nowrap;
+  transition: none !important;
+}
+.switch-status .switch-thumb {
+  display: none !important;
+}
+
+:host(.switch-checked.switch-status) .switch-track {
+  background: linear-gradient(to right, var(--bg-secondary, #f1f5f9) 48%, #ef4444 52%) !important;
+  border-color: #ef4444 !important;
+}
+
+:host(.switch-checked.switch-status) .switch-track::before {
+  content: "✕";
+  right: auto;
+  left: 10px;
+  color: #ef4444;
+}
+
+:host(.switch-checked.switch-status) .switch-track-text {
+  left: auto !important;
+  right: 8px !important;
+  color: #ffffff !important;
+}
+
+:host(.switch-labeled) {
+  --switch-track-width: 120px;
+}
+
+.switch-labeled .switch-track {
+  background: #cbd5e1 !important;
+  border: none !important;
+  box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.14), inset -1px -1px 4px rgba(255, 255, 255, 0.85) !important;
+}
+.switch-labeled .switch-track-text {
+  color: #475569 !important;
+  font-size: 11px !important;
+  font-weight: 800 !important;
+  letter-spacing: 0.04em !important;
+  text-transform: uppercase !important;
+  opacity: 1 !important;
+  width: auto !important;
+  white-space: nowrap;
+}
+.switch-labeled .switch-thumb {
+  position: relative;
+  background: #ffffff !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
+  border: none !important;
+}
+.switch-labeled .switch-thumb::after {
+  content: "⊘";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: block;
+  color: #94a3b8;
+  font-size: calc(var(--switch-thumb-size, 20px) * 0.52);
+  font-weight: 400;
+  pointer-events: none;
+  line-height: 1;
+}
+
+:host(.switch-checked.switch-labeled) .switch-track {
+  background: var(--switch-active-bg) !important;
+  box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.1), inset -1px -1px 3px rgba(255, 255, 255, 0.12), 0 0 12px rgba(var(--switch-active-bg-rgb, 37, 99, 235), 0.2) !important;
+}
+
+:host(.switch-checked.switch-labeled) .switch-track-text {
+  color: #ffffff !important;
+}
+
+:host(.switch-checked.switch-labeled) .switch-thumb::after {
+  content: "✓";
+  color: var(--switch-active-bg);
+  font-weight: 900;
+  font-size: calc(var(--switch-thumb-size, 20px) * 0.6);
+}
+
+:host-context(.dark) .switch-labeled .switch-track,
+[data-theme=dark] .switch-labeled .switch-track {
+  background: #334155 !important;
+  box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.4), inset -1px -1px 3px rgba(255, 255, 255, 0.05) !important;
+}
+
+:host-context(.dark) .switch-labeled .switch-track-text,
+[data-theme=dark] .switch-labeled .switch-track-text {
+  color: #94a3b8 !important;
 }

package/dist/collection/components/switch/switch.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { normalizeComponentSize } from "../../utils/component-size";
 export class UISwitch {
     el;
     /** Checked state */
@@ -306,8 +307,8 @@ export class UISwitch {
         return (h("div", { class: "switch-confirm-overlay", onClick: this.handleCancel }, h("div", { class: "switch-confirm-dialog", onClick: e => e.stopPropagation() }, h("div", { class: "confirm-message" }, this.confirmationMessage), h("div", { class: "confirm-actions" }, h("ui-button", { variant: "ghost", size: "sm", onClick: this.handleCancel, label: "Cancel" }), h("ui-button", { variant: "primary", size: "sm", onClick: this.handleConfirm, label: "Confirm" })))));
     }
     render() {
-        const labelElement = this.label && (h("span", { key: 'aaea5d41fe17902800129034edee86b1ba98d9e9', class: "switch-label" }, this.label, this.required && h("span", { key: '93e398287cfb42f1d43052d6f0492dc1cc1b7133', class: "switch-required" }, "*"), this.description && this.descriptionPosition === 'bottom' && (h("span", { key: '91cc70cec284734e944886bbf28deeafb161eec0', class: "switch-description-bottom" }, this.description))));
-        const sideDescription = this.description && this.descriptionPosition === 'side' && (h("span", { key: '5c6b858c2d9e135407a82a394f1472475bca1222', class: "switch-description-side" }, this.description));
+        const labelElement = this.label && (h("span", { key: 'f905beb970bc012fe3dd7f4bd7acf493cf3fb3f6', class: "switch-label" }, this.label, this.required && h("span", { key: '81a78c65abe3d6479c7d41328bca0e88a8735161', class: "switch-required" }, "*"), this.description && this.descriptionPosition === 'bottom' && (h("span", { key: '365373b18336c14fbfa70873b71141fe9e1c96e2', class: "switch-description-bottom" }, this.description))));
+        const sideDescription = this.description && this.descriptionPosition === 'side' && (h("span", { key: '52abfd268f4fd11c36d9f5e9936db895dd5408f1', class: "switch-description-side" }, this.description));
         const trackStyle = {};
         if (this.gradient && this.gradientColors) {
             try {
@@ -322,7 +323,7 @@ export class UISwitch {
         if (this.width) {
             hostStyle['--switch-track-width'] = this.width;
         }
-        return (h(Host, { key: '41e4d34b8c2aa2ee57e25823ffc67ac5316ec3e6', style: hostStyle, class: {
+        return (h(Host, { key: 'b7ba49c8d24a3a2cfc13e1ce958b5457b88d784f', style: hostStyle, class: {
                 'switch-host': true,
                 'switch-disabled': this.disabled || this.loading,
                 'switch-readonly': this.readonly,
@@ -339,9 +340,9 @@ export class UISwitch {
                 [`switch-elevation-${this.elevation}`]: this.elevation > 0,
                 [`switch-color-${this.color}`]: true,
                 [`switch-${this.variant}`]: true,
-            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '6684aba1b0aa8ebb37558a0c7aee00c0be7cb1e9', part: "container", class: {
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '17e3523dd99ee0267d2b6f76e23312c6fa0f0101', part: "container", class: {
                 'switch-container-outer': true,
-                [`switch-${this.size}`]: true,
+                [`switch-${normalizeComponentSize(this.size, 'md')}`]: true,
                 [`switch-color-${this.color}`]: true,
                 [`switch-physics-${this.physics}`]: true,
                 [`switch-variant-${this.variant}`]: true,
@@ -358,28 +359,28 @@ export class UISwitch {
                 'switch-shaking': this.isShaking,
                 'switch-animate': this.enableAnimation,
                 'switch-indeterminate': this.indeterminate,
-            } }, h("label", { key: 'd8092db9b999f61d13ed28de07b51f0756b90203', part: "label", class: {
+            } }, h("label", { key: '0eaca201f9bfb9441af8c66ad61342debf248910', part: "label", class: {
                 'switch-container': true,
-                [`switch-${this.size}`]: true,
+                [`switch-${normalizeComponentSize(this.size, 'md')}`]: true,
                 [`switch-color-${this.color}`]: true,
                 [`switch-${this.variant}`]: true,
                 [`switch-${this.shape}`]: true,
                 [`thumb-${this.thumbShape}`]: true,
                 'switch-label-left': this.labelPosition === 'left',
                 'switch-label-right': this.labelPosition === 'right' || !this.labelPosition,
-            } }, this.labelPosition === 'left' && labelElement, h("div", { key: '45e4aebf40ca6590d98871188c95fc0cb7167820', part: "wrapper", class: "switch-wrapper" }, h("input", { key: '2f4f3b4641e4f2f8e53debbabc06ddedb57118a7', type: "checkbox", class: "switch-input", checked: this.checked, disabled: this.disabled || this.loading, readonly: this.readonly, name: this.name, value: this.value, required: this.required, tabindex: this.switchTabIndex, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, "aria-label": this.ariaLabel || this.label, "aria-checked": this.indeterminate ? 'mixed' : (this.checked ? 'true' : 'false'), "aria-disabled": (this.disabled || this.loading).toString(), "aria-invalid": this.invalid.toString(), ref: el => {
+            } }, this.labelPosition === 'left' && labelElement, h("div", { key: '96a10112cb18eb3fe11dfe32c266d9aa35d3d2d3', part: "wrapper", class: "switch-wrapper" }, h("input", { key: 'cd6b45812dbe942086571fd9c9d8a37a28e80d90', type: "checkbox", class: "switch-input", checked: this.checked, disabled: this.disabled || this.loading, readonly: this.readonly, name: this.name, value: this.value, required: this.required, tabindex: this.switchTabIndex, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, "aria-label": this.ariaLabel || this.label, "aria-checked": this.indeterminate ? 'mixed' : (this.checked ? 'true' : 'false'), "aria-disabled": (this.disabled || this.loading).toString(), "aria-invalid": this.invalid.toString(), ref: el => {
                 if (el && this.indeterminate)
                     el.indeterminate = true;
-            } }), h("div", { key: 'affc51e292c88c6eca57e14ea23ef57c88ef1719', part: "track", class: {
+            } }), h("div", { key: '857bbb32f9ba5f0dd4091d0876ff015a1feaebbd', part: "track", class: {
                 'switch-track': true,
                 'switch-track-checked': this.checked,
                 'switch-track-disabled': this.disabled || this.loading,
                 'switch-gradient': this.gradient,
-            }, style: trackStyle }, this.renderTrackText(), h("div", { key: 'be816a97508c3ec53b08a9436079e7475017c503', part: "thumb", class: {
+            }, style: trackStyle }, this.renderTrackText(), h("div", { key: '6ff1c6881314adc05e6dd21a1d559da3a7fa974b', part: "thumb", class: {
                 'switch-thumb': true,
                 'switch-thumb-checked': this.checked,
                 'switch-thumb-loading': this.loading,
-            } }, this.getIcon()), this.showRipple && h("div", { key: 'abc8476dd3e164ac6397443dfe46f89c244a8bdb', class: "switch-ripple" }), this.loading && h("div", { key: '049d77febd86e72fb513f4c8ba9012c31b0c55a9', class: "switch-loading-overlay" }))), this.labelPosition === 'right' && labelElement, sideDescription, this.renderSuccessFeedback()), this.renderHelperText(), this.renderTooltip()), this.renderConfirmDialog()));
+            } }, this.getIcon()), this.showRipple && h("div", { key: '4823c08f49784985cb598c001e25dd83a7417143', class: "switch-ripple" }), this.loading && h("div", { key: '3eafccb3b4f423091ed2e8b408d7123b89e7cb58', class: "switch-loading-overlay" }))), this.labelPosition === 'right' && labelElement, sideDescription, this.renderSuccessFeedback()), this.renderHelperText(), this.renderTooltip()), this.renderConfirmDialog()));
     }
     static get is() { return "ui-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -527,7 +528,7 @@ export class UISwitch {
                 "mutable": false,
                 "complexType": {
                     "original": "StatusColor",
-                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
                     "references": {
                         "StatusColor": {
                             "location": "import",
@@ -554,7 +555,7 @@ export class UISwitch {
                 "mutable": false,
                 "complexType": {
                     "original": "ComponentVariant",
-                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
+                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"status\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
                     "references": {
                         "ComponentVariant": {
                             "location": "import",

package/dist/collection/components/tag/tag.css

@@ -38,28 +38,44 @@
 }
 
 /* Sizes (Design Guide Normalized) */
+.tag-xs {
+  padding: 2px 6px;
+  font-size: 10px;
+  height: 20px;
+  gap: 4px;
+  --tag-notch-size: 4px;
+  --tag-remove-size: 14px;
+  --tag-remove-icon-size: 10px;
+}
+
 .tag-sm {
-  padding: 0 8px;
+  padding: 4px 8px;
   font-size: 11px;
   height: 24px;
   gap: 4px;
   --tag-notch-size: 6px;
+  --tag-remove-size: 16px;
+  --tag-remove-icon-size: 12px;
 }
 
 .tag-md {
-  padding: 0 12px;
+  padding: 4px 12px;
   font-size: 13px;
   height: 32px;
   gap: 8px;
   --tag-notch-size: 8px;
+  --tag-remove-size: 20px;
+  --tag-remove-icon-size: 14px;
 }
 
 .tag-lg {
-  padding: 0 16px;
+  padding: 4px 16px;
   font-size: 15px;
   height: 40px;
   gap: 10px;
   --tag-notch-size: 10px;
+  --tag-remove-size: 24px;
+  --tag-remove-icon-size: 16px;
 }
 
 .tag-checkable,
@@ -244,11 +260,11 @@
   background: none;
   border: none;
   color: inherit;
-  font-size: 16px;
+  font-size: var(--tag-remove-icon-size, 14px);
   cursor: pointer;
   padding: 0;
-  width: 20px;
-  height: 20px;
+  width: var(--tag-remove-size, 20px);
+  height: var(--tag-remove-size, 20px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -642,21 +658,24 @@
 }
 
 .tag-shape-circle {
-  border-radius: 50% !important;
-  padding: 0 !important;
-  width: 32px;
+  border-radius: 9999px;
+  min-width: 32px;
+  width: auto;
   height: 32px;
+  padding: 0 6px;
   justify-content: center;
 }
 
 .tag-shape-circle.tag-sm {
-  width: 24px;
+  min-width: 24px;
   height: 24px;
+  padding: 0 4px;
 }
 
 .tag-shape-circle.tag-lg {
-  width: 40px;
+  min-width: 40px;
   height: 40px;
+  padding: 0 8px;
 }
 
 .tag-disabled {
@@ -708,7 +727,14 @@
   text-align: center;
 }
 
-/* Variants - Soft (Subtle background) */
+.tag-soft {
+  padding: 4px 10px;
+}
+
+.tag-bordered {
+  padding: 4px 10px;
+}
+
 .tag-soft.tag-primary {
   background-color: rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
   color: var(--color-primary, #10b981);