@orange-halo/components 2.0.0 → 2.2.0

package/dist/oh-card.js

@@ -63,8 +63,8 @@ let OhCard = class OhCard extends OhElement {
         /* Shape: friendly rounded corners */
         border-radius: var(--oh-shape-large);
         overflow: hidden;
-        
-        transition: 
+
+        transition:
           transform var(--oh-motion-gentle) var(--oh-motion-ease-gentle),
           box-shadow var(--oh-motion-gentle) var(--oh-motion-ease-gentle),
           border-color var(--oh-motion-gentle) var(--oh-motion-ease-gentle);
@@ -83,18 +83,16 @@ let OhCard = class OhCard extends OhElement {
           var(--oh-card-raised-gradient-mid) 40%,
           var(--oh-card-raised-gradient-end) 100%
         );
-        
+
         /* Border: visible warm edge */
-        border: 1px solid var(--oh-card-raised-border-color);
-        
+        border: var(--oh-card-base-border-width) solid
+          var(--oh-card-raised-border-color);
+
         /* Layered shadows:
            1. Outer: soft, offset shadow (tactile)
            2. Deeper: ambient depth
            3. Inner top: sunlit highlight */
-        box-shadow:
-          0 2px 6px rgba(61, 50, 41, 0.08),
-          0 6px 16px rgba(61, 50, 41, 0.05),
-          inset 0 1px 0 rgba(255, 255, 255, 0.8);
+        box-shadow: var(--oh-elevation-surface-raised);
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -110,16 +108,13 @@ let OhCard = class OhCard extends OhElement {
           var(--oh-card-sunlit-gradient-mid) 30%,
           var(--oh-card-sunlit-gradient-end) 100%
         );
-        
+
         /* Border: warm tinted edge */
-        border: 1px solid var(--oh-card-sunlit-border-color);
-        
+        border: var(--oh-card-base-border-width) solid
+          var(--oh-card-sunlit-border-color);
+
         /* Layered shadows with warm glow */
-        box-shadow:
-          0 2px 8px rgba(139, 69, 19, 0.08),
-          0 8px 24px rgba(139, 69, 19, 0.06),
-          0 0 20px rgba(197, 67, 0, 0.04),
-          inset 0 1px 0 rgba(255, 255, 255, 0.9);
+        box-shadow: var(--oh-elevation-surface-featured);
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -134,14 +129,13 @@ let OhCard = class OhCard extends OhElement {
           var(--oh-card-flat-gradient-start) 0%,
           var(--oh-card-flat-gradient-end) 100%
         );
-        
+
         /* Border: visible edge */
-        border: 1px solid var(--oh-card-flat-border-color);
-        
+        border: var(--oh-card-base-border-width) solid
+          var(--oh-card-flat-border-color);
+
         /* Minimal shadow */
-        box-shadow:
-          0 1px 2px rgba(61, 50, 41, 0.04),
-          inset 0 1px 0 rgba(255, 255, 255, 0.6);
+        box-shadow: var(--oh-elevation-surface-flat);
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -156,30 +150,20 @@ let OhCard = class OhCard extends OhElement {
       /* Hover: warm light, lifted */
       .card--interactive.card--raised:hover {
         border-color: var(--oh-color-border-strong);
-        box-shadow:
-          0 4px 12px rgba(61, 50, 41, 0.1),
-          0 12px 28px rgba(61, 50, 41, 0.08),
-          inset 0 1px 0 rgba(255, 255, 255, 0.9);
-        transform: translateY(-2px);
+        box-shadow: var(--oh-elevation-surface-lifted);
+        transform: translateY(var(--oh-lift-hover-md));
       }
 
       .card--interactive.card--sunlit:hover {
         border-color: var(--oh-card-sunlit-border-color-hover);
-        box-shadow:
-          0 4px 12px rgba(139, 69, 19, 0.12),
-          0 12px 32px rgba(139, 69, 19, 0.08),
-          0 0 28px rgba(197, 67, 0, 0.06),
-          inset 0 1px 0 rgba(255, 255, 255, 1);
-        transform: translateY(-2px);
+        box-shadow: var(--oh-elevation-surface-featured-lifted);
+        transform: translateY(var(--oh-lift-hover-md));
       }
 
       .card--interactive.card--flat:hover {
         border-color: var(--oh-color-border-strong);
-        box-shadow:
-          0 2px 6px rgba(61, 50, 41, 0.08),
-          0 6px 16px rgba(61, 50, 41, 0.05),
-          inset 0 1px 0 rgba(255, 255, 255, 0.8);
-        transform: translateY(-1px);
+        box-shadow: var(--oh-elevation-surface-raised);
+        transform: translateY(var(--oh-lift-hover-sm));
       }
 
       /* Active: pressed */
@@ -188,10 +172,7 @@ let OhCard = class OhCard extends OhElement {
       }
 
       .card--interactive.card--raised:active {
-        box-shadow:
-          0 1px 3px rgba(61, 50, 41, 0.1),
-          0 3px 8px rgba(61, 50, 41, 0.06),
-          inset 0 1px 2px rgba(61, 50, 41, 0.04);
+        box-shadow: var(--oh-elevation-surface-pressed);
       }
 
       /* Focus: solid outline is the indicator; the glow is decoration only */
@@ -205,24 +186,28 @@ let OhCard = class OhCard extends OhElement {
       .card--interactive.card--flat:focus-visible {
         box-shadow:
           0 0 16px var(--oh-focus-glow-color),
-          0 2px 6px rgba(61, 50, 41, 0.08),
-          inset 0 1px 0 rgba(255, 255, 255, 0.8);
+          var(--oh-elevation-surface-focused);
       }
 
       .card--interactive.card--sunlit:focus-visible {
         box-shadow:
           0 0 20px var(--oh-focus-glow-color),
-          0 2px 8px rgba(139, 69, 19, 0.08),
-          inset 0 1px 0 rgba(255, 255, 255, 0.9);
+          var(--oh-elevation-surface-featured-focused);
       }
 
       /* ═══════════════════════════════════════════════════════════════
          PADDING VARIANTS
          ═══════════════════════════════════════════════════════════════ */
 
-      .card--padding-sm .content { padding: var(--oh-spacing-3-5); }
-      .card--padding-md .content { padding: var(--oh-spacing-5); }
-      .card--padding-lg .content { padding: var(--oh-spacing-7); }
+      .card--padding-sm .content {
+        padding: var(--oh-spacing-3-5);
+      }
+      .card--padding-md .content {
+        padding: var(--oh-spacing-5);
+      }
+      .card--padding-lg .content {
+        padding: var(--oh-spacing-7);
+      }
 
       /* ═══════════════════════════════════════════════════════════════
          SLOTS: Header, Content, Footer
@@ -230,7 +215,8 @@ let OhCard = class OhCard extends OhElement {
 
       .header {
         padding: var(--oh-spacing-4) var(--oh-spacing-5);
-        border-bottom: 1px solid var(--oh-card-section-divider-color);
+        border-bottom: var(--oh-stroke-divider) solid
+          var(--oh-card-section-divider-color);
         background: linear-gradient(
           180deg,
           var(--oh-card-section-header-gradient-start) 0%,
@@ -238,7 +224,9 @@ let OhCard = class OhCard extends OhElement {
         );
       }
 
-      .header:empty { display: none; }
+      .header:empty {
+        display: none;
+      }
 
       .content {
         /* Padding handled by variant */
@@ -246,7 +234,8 @@ let OhCard = class OhCard extends OhElement {
 
       .footer {
         padding: var(--oh-spacing-4) var(--oh-spacing-5);
-        border-top: 1px solid var(--oh-card-section-divider-color);
+        border-top: var(--oh-stroke-divider) solid
+          var(--oh-card-section-divider-color);
         background: linear-gradient(
           180deg,
           var(--oh-color-surface-raised) 0%,
@@ -254,7 +243,9 @@ let OhCard = class OhCard extends OhElement {
         );
       }
 
-      .footer:empty { display: none; }
+      .footer:empty {
+        display: none;
+      }
 
       /* Padding adjustments for slots */
       .card--padding-sm .header,
@@ -275,7 +266,7 @@ let OhCard = class OhCard extends OhElement {
         .card {
           transition-duration: 0.01ms !important;
         }
-        
+
         .card--interactive:hover {
           transform: none !important;
         }
@@ -312,11 +303,11 @@ let OhCard = class OhCard extends OhElement {
         <div class="header" part="header">
           <slot name="header"></slot>
         </div>
-        
+
         <div class="content" part="content">
           <slot></slot>
         </div>
-        
+
         <div class="footer" part="footer">
           <slot name="footer"></slot>
         </div>

package/dist/oh-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-card.js","sourceRoot":"","sources":["../src/oh-card.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAM3C,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAA9B;;QAqPL,YAAO,GAAgB,QAAQ,CAAC;QAGhC,gBAAW,GAAG,KAAK,CAAC;QAGpB,YAAO,GAAgB,IAAI,CAAC;IA8C9B,CAAC;aAxSiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8OF;KACF,AAjPqB,CAiPpB;IAWM,YAAY,CAAC,KAAiB;QACpC,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,CAAC;QAClD,CAAC;IACH,CAAC;IAEO,cAAc,CAAC,KAAoB;QACzC,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC;YACrE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,YAAY,CAAC,KAA8B,CAAC,CAAC;QACpD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC5B,IAAI,EAAE,IAAI;YACV,CAAC,SAAS,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YAC/B,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YACvC,mBAAmB,EAAE,IAAI,CAAC,WAAW;SACtC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;;;gBAGC,OAAO;eACR,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;mBACjC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO;iBAClC,IAAI,CAAC,YAAY;mBACf,IAAI,CAAC,cAAc;;;;;;;;;;;;;;KAcjC,CAAC;IACJ,CAAC;;AAnDD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACV;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACvB;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACd;AA3PjB,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAySlB"}
+{"version":3,"file":"oh-card.js","sourceRoot":"","sources":["../src/oh-card.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAM3C,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAA9B;;QA4OL,YAAO,GAAgB,QAAQ,CAAC;QAGhC,gBAAW,GAAG,KAAK,CAAC;QAGpB,YAAO,GAAgB,IAAI,CAAC;IA8C9B,CAAC;aA/RiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqOF;KACF,AAxOqB,CAwOpB;IAWM,YAAY,CAAC,KAAiB;QACpC,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,CAAC;QAClD,CAAC;IACH,CAAC;IAEO,cAAc,CAAC,KAAoB;QACzC,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC;YACrE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,YAAY,CAAC,KAA8B,CAAC,CAAC;QACpD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC5B,IAAI,EAAE,IAAI;YACV,CAAC,SAAS,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YAC/B,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YACvC,mBAAmB,EAAE,IAAI,CAAC,WAAW;SACtC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;;;gBAGC,OAAO;eACR,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;mBACjC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO;iBAClC,IAAI,CAAC,YAAY;mBACf,IAAI,CAAC,cAAc;;;;;;;;;;;;;;KAcjC,CAAC;IACJ,CAAC;;AAnDD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACV;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACvB;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACd;AAlPjB,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAgSlB"}

package/dist/oh-checkbox-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"oh-checkbox-group.d.ts","sourceRoot":"","sources":["../src/oh-checkbox-group.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,qBACa,eAAgB,SAAQ,SAAS;IAC5C,OAAgB,MAAM,4BAgMpB;IAGF,MAAM,SAAM;IAGZ,IAAI,SAAM;IAGV,OAAO,EAAE,cAAc,EAAE,CAAM;IAG/B,KAAK,EAAE,MAAM,EAAE,CAAM;IAGrB,QAAQ,UAAS;IAGjB,KAAK,UAAS;IAGd,YAAY,SAAM;IAElB,OAAO,CAAC,aAAa;IAYrB;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,UAAU,CAAC,OAAO,EAAE,cAAc;IAMlC,MAAM;CA8CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
+{"version":3,"file":"oh-checkbox-group.d.ts","sourceRoot":"","sources":["../src/oh-checkbox-group.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,qBACa,eAAgB,SAAQ,SAAS;IAC5C,OAAgB,MAAM,4BAwMpB;IAGF,MAAM,SAAM;IAGZ,IAAI,SAAM;IAGV,OAAO,EAAE,cAAc,EAAE,CAAM;IAG/B,KAAK,EAAE,MAAM,EAAE,CAAM;IAGrB,QAAQ,UAAS;IAGjB,KAAK,UAAS;IAGd,YAAY,SAAM;IAElB,OAAO,CAAC,aAAa;IAYrB;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,UAAU,CAAC,OAAO,EAAE,cAAc;IASlC,MAAM;CA4DP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/oh-checkbox-group.figma.js

@@ -16,7 +16,7 @@ figma.connect("https://www.figma.com/design/q9ZYrOj2w9DrTVmgQFU7bu/OHDS?node-id=
         legend="${props.legend}"
         ?required="${props.required}"
         ?error="${props.error}"
-        error-message="${props.errorMessage}"
+        errormessage="${props.errorMessage}"
         .options="\${options}"
       ></oh-checkbox-group>
     `,

package/dist/oh-checkbox-group.figma.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-checkbox-group.figma.js","sourceRoot":"","sources":["../src/oh-checkbox-group.figma.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEvD;;;;GAIG;AAEH,KAAK,CAAC,OAAO,CACX,uEAAuE,EACvE;IACE,KAAK,EAAE;QACL,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;QAC9B,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC;QACnC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;QAC7B,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,eAAe,CAAC;KAC5C;IACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;kBAEV,KAAK,CAAC,MAAM;qBACT,KAAK,CAAC,QAAQ;kBACjB,KAAK,CAAC,KAAK;yBACJ,KAAK,CAAC,YAAY;;;KAGtC;CACF,CACF,CAAC"}
+{"version":3,"file":"oh-checkbox-group.figma.js","sourceRoot":"","sources":["../src/oh-checkbox-group.figma.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEvD;;;;GAIG;AAEH,KAAK,CAAC,OAAO,CACX,uEAAuE,EACvE;IACE,KAAK,EAAE;QACL,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;QAC9B,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC;QACnC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;QAC7B,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,eAAe,CAAC;KAC5C;IACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;kBAEV,KAAK,CAAC,MAAM;qBACT,KAAK,CAAC,QAAQ;kBACjB,KAAK,CAAC,KAAK;wBACL,KAAK,CAAC,YAAY;;;KAGrC;CACF,CACF,CAAC"}

package/dist/oh-checkbox-group.js

@@ -108,11 +108,12 @@ let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
         width: 24px;
         height: 24px;
         flex-shrink: 0;
-        border: var(--oh-input-base-border-width) solid var(--oh-color-border-emphasis);
+        border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
         border-radius: var(--oh-shape-compact);
         background-color: var(--oh-color-surface-base);
-        box-shadow: 3px 3px 0 0 var(--oh-shadow-secondary);
-        transition: 
+        box-shadow: var(--oh-elevation-offset-md) var(--oh-elevation-offset-md)
+          0 0 var(--oh-shadow-secondary);
+        transition:
           transform var(--oh-motion-snappy) var(--oh-motion-ease-playful),
           box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-playful),
           background-color var(--oh-motion-quick) ease,
@@ -120,7 +121,7 @@ let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
       }
 
       .checkbox-box::after {
-        content: '';
+        content: "";
         position: absolute;
         top: 3px;
         left: 7px;
@@ -148,21 +149,24 @@ let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
       /* Hover: lift up-left, shadow grows */
       .checkbox-option:hover .checkbox-box {
         border-color: var(--oh-color-border-hover);
-        transform: translate(-1px, -1px);
-        box-shadow: 4px 4px 0 0 var(--oh-shadow-secondary);
+        transform: translate(var(--oh-lift-hover-sm), var(--oh-lift-hover-sm));
+        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
+          0 0 var(--oh-shadow-secondary);
       }
 
       /* Active: press down-right, shadow shrinks */
       .checkbox-option:active .checkbox-box {
-        transform: translate(1px, 1px);
-        box-shadow: 1px 1px 0 0 var(--oh-shadow-secondary);
+        transform: translate(var(--oh-lift-press-sm), var(--oh-lift-press-sm));
+        box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs)
+          0 0 var(--oh-shadow-secondary);
       }
 
       /* Checked: primary color with warm shadow */
       .native-checkbox:checked + .checkbox-box {
         background-color: var(--oh-color-brand-primary);
         border-color: var(--oh-color-brand-primary);
-        box-shadow: 3px 3px 0 0 var(--oh-shadow-primary);
+        box-shadow: var(--oh-elevation-offset-md) var(--oh-elevation-offset-md)
+          0 0 var(--oh-shadow-primary);
       }
 
       .native-checkbox:checked + .checkbox-box::after {
@@ -173,15 +177,17 @@ let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
       .checkbox-option:hover .native-checkbox:checked + .checkbox-box {
         background-color: var(--oh-color-brand-primary-hover);
         border-color: var(--oh-color-brand-primary-hover);
-        transform: translate(-1px, -1px);
-        box-shadow: 4px 4px 0 0 var(--oh-shadow-primary);
+        transform: translate(var(--oh-lift-hover-sm), var(--oh-lift-hover-sm));
+        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
+          0 0 var(--oh-shadow-primary);
       }
 
       /* Checked + Active */
       .checkbox-option:active .native-checkbox:checked + .checkbox-box {
         background-color: var(--oh-color-brand-primary-active);
-        transform: translate(1px, 1px);
-        box-shadow: 1px 1px 0 0 var(--oh-shadow-primary);
+        transform: translate(var(--oh-lift-press-sm), var(--oh-lift-press-sm));
+        box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs)
+          0 0 var(--oh-shadow-primary);
       }
 
       /* Focus: underline the label (accessible indicator) */
@@ -196,12 +202,14 @@ let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
 
       :host([error]) .checkbox-box {
         border-color: var(--oh-color-feedback-error);
-        box-shadow: 3px 3px 0 0 var(--oh-shadow-error);
+        box-shadow: var(--oh-elevation-offset-md) var(--oh-elevation-offset-md)
+          0 0 var(--oh-shadow-error);
       }
 
       :host([error]) .checkbox-option:hover .checkbox-box {
         border-color: var(--oh-color-feedback-error-hover);
-        box-shadow: 4px 4px 0 0 var(--oh-shadow-error);
+        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
+          0 0 var(--oh-shadow-error);
       }
 
       .error-message {
@@ -238,12 +246,13 @@ let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
             this.value = [...this.value, optionValue];
         }
         else {
-            this.value = this.value.filter(v => v !== optionValue);
+            this.value = this.value.filter((v) => v !== optionValue);
         }
         this.emit("oh-change", { value: this.value });
     }
     willUpdate(changed) {
-        if (this.hasUpdated && (changed.has("error") || changed.has("errorMessage"))) {
+        if (this.hasUpdated &&
+            (changed.has("error") || changed.has("errorMessage"))) {
             this._announceError = !!(this.error && this.errorMessage);
         }
     }
@@ -251,7 +260,9 @@ let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
         return html `
       <fieldset
         aria-invalid=${this.error ? "true" : nothing}
-        aria-describedby=${this.error && this.errorMessage ? "error-msg" : nothing}
+        aria-describedby=${this.error && this.errorMessage
+            ? "error-msg"
+            : nothing}
       >
         ${this.legend
             ? html `
@@ -260,18 +271,30 @@ let OhCheckboxGroup = class OhCheckboxGroup extends OhElement {
               </legend>
             `
             : nothing}
-
         ${this.error && this.errorMessage
             ? html `
-              <div id="error-msg" class="error-message" role=${this._announceError ? "alert" : nothing}>
-                <svg class="error-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                  <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+              <div
+                id="error-msg"
+                class="error-message"
+                role=${this._announceError ? "alert" : nothing}
+              >
+                <svg
+                  class="error-icon"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z"
+                    clip-rule="evenodd"
+                  />
                 </svg>
                 ${this.errorMessage}
               </div>
             `
             : nothing}
-        
+
         <div class="checkbox-group">
           ${this.options.map((option) => html `
               <label class="checkbox-option">

package/dist/oh-checkbox-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-checkbox-group.js","sourceRoot":"","sources":["../src/oh-checkbox-group.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"oh-checkbox-group.js","sourceRoot":"","sources":["../src/oh-checkbox-group.ts"],"names":[],"mappings":"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"}

package/dist/oh-checkbox.d.ts

@@ -7,9 +7,9 @@
  * DESIGN DECISIONS:
  * ─────────────────
  * 1. CHUNKY & TACTILE
- *    - Thick 2.5px border
+ *    - Thick border (stroke.control)
  *    - Inset shadow when unchecked (pressed into page)
- *    - 6px border radius (slightly less than buttons)
+ *    - shape.compact corners (smaller than buttons)
  *
  * 2. CHECKED STATE
  *    - Filled with primary color

package/dist/oh-checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"oh-checkbox.d.ts","sourceRoot":"","sources":["../src/oh-checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1D,qBACa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,4BAyMpB;IAGF,OAAO,UAAS;IAGhB,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,KAAK,UAAS;IAGd,YAAY,SAAM;IAElB;;;OAGG;IAEH,UAAU,EAAE,aAAa,CAAa;IAEtC,OAAO,CAAC,aAAa;IAMrB;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,QAAQ,CAAkE;IAElF,UAAU,CAAC,OAAO,EAAE,cAAc;IAMlC,MAAM;CAiCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"oh-checkbox.d.ts","sourceRoot":"","sources":["../src/oh-checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1D,qBACa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,4BAmNpB;IAGF,OAAO,UAAS;IAGhB,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,KAAK,UAAS;IAGd,YAAY,SAAM;IAElB;;;OAGG;IAEH,UAAU,EAAE,aAAa,CAAa;IAEtC,OAAO,CAAC,aAAa;IAMrB;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,QAAQ,CAAkE;IAElF,UAAU,CAAC,OAAO,EAAE,cAAc;IASlC,MAAM;CAkDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/oh-checkbox.js

@@ -7,9 +7,9 @@
  * DESIGN DECISIONS:
  * ─────────────────
  * 1. CHUNKY & TACTILE
- *    - Thick 2.5px border
+ *    - Thick border (stroke.control)
  *    - Inset shadow when unchecked (pressed into page)
- *    - 6px border radius (slightly less than buttons)
+ *    - shape.compact corners (smaller than buttons)
  *
  * 2. CHECKED STATE
  *    - Filled with primary color
@@ -96,16 +96,17 @@ let OhCheckbox = class OhCheckbox extends OhElement {
         width: 24px;
         height: 24px;
         flex-shrink: 0;
-        
+
         /* Chunky border */
-        border: var(--oh-input-base-border-width) solid var(--oh-color-border-emphasis);
+        border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
         border-radius: var(--oh-shape-compact);
-        
+
         /* Offset shadow like primary button */
         background-color: var(--oh-color-surface-base);
-        box-shadow: 3px 3px 0 0 var(--oh-shadow-secondary);
-        
-        transition: 
+        box-shadow: var(--oh-elevation-offset-md) var(--oh-elevation-offset-md)
+          0 0 var(--oh-shadow-secondary);
+
+        transition:
           transform var(--oh-motion-snappy) var(--oh-motion-ease-playful),
           box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-playful),
           background-color var(--oh-motion-quick) ease,
@@ -114,7 +115,7 @@ let OhCheckbox = class OhCheckbox extends OhElement {
 
       /* Checkmark (hidden by default) */
       .checkbox-box::after {
-        content: '';
+        content: "";
         position: absolute;
         top: 3px;
         left: 7px;
@@ -134,21 +135,24 @@ let OhCheckbox = class OhCheckbox extends OhElement {
       /* Hover: lift up-left, shadow grows */
       .checkbox-wrapper:hover .checkbox-box {
         border-color: var(--oh-color-border-hover);
-        transform: translate(-1px, -1px);
-        box-shadow: 4px 4px 0 0 var(--oh-shadow-secondary);
+        transform: translate(var(--oh-lift-hover-sm), var(--oh-lift-hover-sm));
+        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
+          0 0 var(--oh-shadow-secondary);
       }
 
       /* Active: press down-right, shadow shrinks */
       .checkbox-wrapper:active .checkbox-box {
-        transform: translate(1px, 1px);
-        box-shadow: 1px 1px 0 0 var(--oh-shadow-secondary);
+        transform: translate(var(--oh-lift-press-sm), var(--oh-lift-press-sm));
+        box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs)
+          0 0 var(--oh-shadow-secondary);
       }
 
       /* Checked: primary color with warm shadow */
       .native-checkbox:checked + .checkbox-box {
         background-color: var(--oh-color-brand-primary);
         border-color: var(--oh-color-brand-primary);
-        box-shadow: 3px 3px 0 0 var(--oh-shadow-primary);
+        box-shadow: var(--oh-elevation-offset-md) var(--oh-elevation-offset-md)
+          0 0 var(--oh-shadow-primary);
       }
 
       .native-checkbox:checked + .checkbox-box::after {
@@ -159,15 +163,17 @@ let OhCheckbox = class OhCheckbox extends OhElement {
       .checkbox-wrapper:hover .native-checkbox:checked + .checkbox-box {
         background-color: var(--oh-color-brand-primary-hover);
         border-color: var(--oh-color-brand-primary-hover);
-        transform: translate(-1px, -1px);
-        box-shadow: 4px 4px 0 0 var(--oh-shadow-primary);
+        transform: translate(var(--oh-lift-hover-sm), var(--oh-lift-hover-sm));
+        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
+          0 0 var(--oh-shadow-primary);
       }
 
       /* Checked + Active */
       .checkbox-wrapper:active .native-checkbox:checked + .checkbox-box {
         background-color: var(--oh-color-brand-primary-active);
-        transform: translate(1px, 1px);
-        box-shadow: 1px 1px 0 0 var(--oh-shadow-primary);
+        transform: translate(var(--oh-lift-press-sm), var(--oh-lift-press-sm));
+        box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs)
+          0 0 var(--oh-shadow-primary);
       }
 
       /* Focus: underline the label (accessible indicator) */
@@ -195,12 +201,14 @@ let OhCheckbox = class OhCheckbox extends OhElement {
 
       :host([error]) .checkbox-box {
         border-color: var(--oh-color-feedback-error);
-        box-shadow: 3px 3px 0 0 var(--oh-shadow-error);
+        box-shadow: var(--oh-elevation-offset-md) var(--oh-elevation-offset-md)
+          0 0 var(--oh-shadow-error);
       }
 
       :host([error]) .checkbox-wrapper:hover .checkbox-box {
         border-color: var(--oh-color-feedback-error-hover);
-        box-shadow: 4px 4px 0 0 var(--oh-shadow-error);
+        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
+          0 0 var(--oh-shadow-error);
       }
 
       .error-message {
@@ -238,8 +246,9 @@ let OhCheckbox = class OhCheckbox extends OhElement {
       /* Forced Hover - Unchecked */
       :host([force-state="hover"]) .checkbox-box {
         border-color: var(--oh-color-border-hover);
-        transform: translate(-1px, -1px);
-        box-shadow: 4px 4px 0 0 var(--oh-shadow-secondary);
+        transform: translate(var(--oh-lift-hover-sm), var(--oh-lift-hover-sm));
+        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
+          0 0 var(--oh-shadow-secondary);
       }
 
       /* Forced Focus - Unchecked */
@@ -252,8 +261,9 @@ let OhCheckbox = class OhCheckbox extends OhElement {
       :host([force-state="hover"][checked]) .checkbox-box {
         background-color: var(--oh-color-brand-primary-hover);
         border-color: var(--oh-color-brand-primary-hover);
-        transform: translate(-1px, -1px);
-        box-shadow: 4px 4px 0 0 var(--oh-shadow-primary);
+        transform: translate(var(--oh-lift-hover-sm), var(--oh-lift-hover-sm));
+        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
+          0 0 var(--oh-shadow-primary);
       }
     `,
     ]; }
@@ -263,7 +273,8 @@ let OhCheckbox = class OhCheckbox extends OhElement {
         this.emit("oh-change", { checked: this.checked, value: this.value });
     }
     willUpdate(changed) {
-        if (this.hasUpdated && (changed.has("error") || changed.has("errorMessage"))) {
+        if (this.hasUpdated &&
+            (changed.has("error") || changed.has("errorMessage"))) {
             this._announceError = !!(this.error && this.errorMessage);
         }
     }
@@ -280,7 +291,9 @@ let OhCheckbox = class OhCheckbox extends OhElement {
             .value=${this.value}
             .checked=${this.checked}
             aria-invalid=${this.error ? "true" : "false"}
-            aria-describedby=${this.error && this.errorMessage ? this._errorId : nothing}
+            aria-describedby=${this.error && this.errorMessage
+            ? this._errorId
+            : nothing}
             @change=${this._handleChange}
           />
           <span class="checkbox-box" part="box"></span>
@@ -288,9 +301,23 @@ let OhCheckbox = class OhCheckbox extends OhElement {
         </label>
         ${this.error && this.errorMessage
             ? html `
-              <div id=${this._errorId} class="error-message" part="error" role=${this._announceError ? "alert" : nothing}>
-                <svg class="error-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                  <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+              <div
+                id=${this._errorId}
+                class="error-message"
+                part="error"
+                role=${this._announceError ? "alert" : nothing}
+              >
+                <svg
+                  class="error-icon"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z"
+                    clip-rule="evenodd"
+                  />
                 </svg>
                 ${this.errorMessage}
               </div>

package/dist/oh-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-checkbox.js","sourceRoot":"","sources":["../src/oh-checkbox.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"oh-checkbox.js","sourceRoot":"","sources":["../src/oh-checkbox.ts"],"names":[],"mappings":"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"}