@cocoar/vue-ui 2.10.0 → 2.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocoar/vue-ui",
-  "version": "2.10.0",
+  "version": "2.12.0",
   "description": "Cocoar Design System — a touch-first Vue 3 component library with 30+ accessible, themeable components",
   "license": "Apache-2.0",
   "repository": {
@@ -49,7 +49,7 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "@cocoar/vue-localization": "2.10.0",
+    "@cocoar/vue-localization": "2.12.0",
     "@fontsource/cascadia-code": "^5.2.3",
     "@fontsource/inter": "^5.2.8",
     "@fontsource/poppins": "^5.2.7",

package/styles/tokens/components-shared.css

@@ -28,6 +28,16 @@
   --coar-component-m-font-size: 14px;
   --coar-component-l-font-size: 16px;
 
+  /* Component Size Scale — per-size, unitless multiplier for size-derived
+     dimensions (e.g. field padding). Derived from the height ratio (÷ m), so a
+     size's padding tracks its height. m is the 1.0 base; a component reads this
+     into --coar-component-scale on its size modifier. Fixed design constants —
+     the editable knob is the base value (e.g. --coar-field-padding-x). */
+  --coar-component-xs-scale: 0.675; /* 27 / 40 */
+  --coar-component-s-scale:  0.8;   /* 32 / 40 */
+  --coar-component-m-scale:  1;     /* 40 / 40 — base */
+  --coar-component-l-scale:  1.2;   /* 48 / 40 */
+
   /* Component Label Font Sizes (slightly smaller for labels) */
   --coar-component-xs-label-font-size: 11px;
   --coar-component-s-label-font-size: 13px;

package/styles/tokens/new-components.css

@@ -9,6 +9,8 @@
      ========================================================================== */
 
   /* Track dimensions */
+  --coar-switch-xs-track-width: 24px;
+  --coar-switch-xs-track-height: 14px;
   --coar-switch-s-track-width: 32px;
   --coar-switch-s-track-height: 18px;
   --coar-switch-m-track-width: 40px;
@@ -17,6 +19,7 @@
   --coar-switch-l-track-height: 26px;
 
   /* Thumb dimensions (circle inside track) */
+  --coar-switch-xs-thumb-size: 10px;
   --coar-switch-s-thumb-size: 14px;
   --coar-switch-m-thumb-size: 18px;
   --coar-switch-l-thumb-size: 22px;
@@ -143,12 +146,18 @@
   /* Radius — per component group */
   --coar-button-radius:    var(--coar-radius-xs);   /* CoarButton, CoarSegmentedControl, CoarPagination */
   --coar-input-radius:     var(--coar-radius-xs);   /* all text/number/otp/password/select inputs */
+
+  /* Field horizontal padding — a dedicated component token, intentionally NOT on
+     the spacing scale (12px sits in the scale's 8→16 gap). Single source of truth
+     for text/password/number/select fields; the consumer multiplies by density. */
+  --coar-field-padding-x:       12px;                                  /* canonical field padding */
+  --coar-field-padding-x-tight: calc(var(--coar-field-padding-x) / 2); /* tighter inset for affixes/toggles inside a field */
   --coar-tag-radius:       var(--coar-radius-xs);   /* CoarTag + inline chips inside multi-selects */
   --coar-badge-radius:     var(--coar-radius-full); /* CoarBadge */
   --coar-card-radius:      var(--coar-radius-s);    /* CoarCard */
   --coar-menu-radius:      var(--coar-radius-s);    /* CoarMenu */
   --coar-popover-radius:   var(--coar-radius-s);    /* CoarPopover, CoarPopconfirm */
-  --coar-dropdown-radius:  var(--coar-radius-s);    /* select/multi/tag dropdown panels */
+  --coar-dropdown-radius:  var(--coar-input-radius); /* select/multi/tag dropdown panels — track the input radius (the panel is part of the field); the panel CSS caps it per size at the trigger's pill end */
 
   /* Shadow — per component group */
   --coar-card-shadow:      var(--coar-elevation-medium);

package/styles/tokens/spacing.css

@@ -1,18 +1,15 @@
 /**
  * Cocoar Design System - Design Tokens
  * Spacing - Margins, padding, and gaps
- * Based on 4px grid system
+ * Based on 4px grid system (with 1px/2px sub-steps for tight UI).
  */
 
 :root {
   --coar-spacing-3xs: 1px;
   --coar-spacing-xxs: 2px;
-  --coar-spacing-2xs: 2px;
   --coar-spacing-xs: 4px;
   --coar-spacing-s: 8px;
   --coar-spacing-m: 16px;
   --coar-spacing-l: 24px;
   --coar-spacing-xl: 32px;
-  --coar-spacing-xxl: 48px;
-  --coar-spacing-xxxl: 64px;
 }

package/styles/tokens/theme-none.css

@@ -140,7 +140,7 @@
   --coar-card-radius:              var(--coar-radius-s);
   --coar-menu-radius:              var(--coar-radius-s);
   --coar-popover-radius:           var(--coar-radius-s);
-  --coar-dropdown-radius:          var(--coar-radius-s);
+  --coar-dropdown-radius:          var(--coar-input-radius);
   --coar-dialog-border-radius:     var(--coar-radius-l);
   --coar-toast-border-radius:      var(--coar-radius-m);
   --coar-card-shadow:              var(--coar-elevation-medium);