@orange-halo/components 2.0.0 → 2.1.0

package/dist/oh-card.js

@@ -85,16 +85,13 @@ let OhCard = class OhCard extends OhElement {
         );
         
         /* 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);
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -112,14 +109,10 @@ let OhCard = class OhCard extends OhElement {
         );
         
         /* 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);
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -136,12 +129,10 @@ let OhCard = class OhCard extends OhElement {
         );
         
         /* 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 +147,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 +169,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 */
@@ -203,17 +181,11 @@ let OhCard = class OhCard extends OhElement {
 
       .card--interactive.card--raised:focus-visible,
       .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);
+        box-shadow: 0 0 16px var(--oh-focus-glow-color), 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);
+        box-shadow: 0 0 20px var(--oh-focus-glow-color), var(--oh-elevation-surface-featured-focused);
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -230,7 +202,7 @@ 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%,
@@ -246,7 +218,7 @@ 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%,

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;;QAyNL,YAAO,GAAgB,QAAQ,CAAC;QAGhC,gBAAW,GAAG,KAAK,CAAC;QAGpB,YAAO,GAAgB,IAAI,CAAC;IA8C9B,CAAC;aA5QiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkNF;KACF,AArNqB,CAqNpB;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;AA/NjB,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CA6QlB"}

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,10 +108,10 @@ 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);
+        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),
@@ -148,21 +148,21 @@ 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 +173,15 @@ 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 +196,12 @@ 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 {

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.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
@@ -98,12 +98,12 @@ let OhCheckbox = class OhCheckbox extends OhElement {
         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);
+        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),
@@ -134,21 +134,21 @@ 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 +159,15 @@ 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 +195,12 @@ 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 +238,8 @@ 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 +252,8 @@ 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);
       }
     `,
     ]; }

package/dist/oh-drawer.js

@@ -117,7 +117,7 @@ let OhDrawer = class OhDrawer extends OhElement {
       /* Right position */
       .drawer--right {
         right: 0;
-        box-shadow: -4px 4px 0 0 var(--oh-color-border-strong);
+        box-shadow: calc(-1 * var(--oh-elevation-offset-lg)) var(--oh-elevation-offset-lg) 0 0 var(--oh-color-border-strong);
         transform: translateX(100%);
       }
 

package/dist/oh-footer.d.ts

@@ -15,6 +15,11 @@
  *    - White/inverse text and links
  *    - Generous padding
  *
+ * BRAND PATTERN: this belongs to the Orange Halo brand, not the core. Import
+ * it from @orange-halo/brand-orange-halo; importing it from components is
+ * deprecated and stops working in components 3.0, when this file moves to
+ * the brand package (brand plan phase 8).
+ *
  * @element oh-footer
  *
  * @slot logo - Slot for logo element

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

@@ -1 +1 @@
-{"version":3,"file":"oh-footer.d.ts","sourceRoot":"","sources":["../src/oh-footer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,iBAAiB,CAAC;AAEzB,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BAmCpB;IAEF,qBAAqB;IAErB,SAAS,SAAM;IAEf,MAAM;CAyBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"oh-footer.d.ts","sourceRoot":"","sources":["../src/oh-footer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,iBAAiB,CAAC;AAEzB,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BAmCpB;IAEF,qBAAqB;IAErB,SAAS,SAAM;IAEf,MAAM;CAyBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/oh-footer.js

@@ -15,6 +15,11 @@
  *    - White/inverse text and links
  *    - Generous padding
  *
+ * BRAND PATTERN: this belongs to the Orange Halo brand, not the core. Import
+ * it from @orange-halo/brand-orange-halo; importing it from components is
+ * deprecated and stops working in components 3.0, when this file moves to
+ * the brand package (brand plan phase 8).
+ *
  * @element oh-footer
  *
  * @slot logo - Slot for logo element

package/dist/oh-footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-footer.js","sourceRoot":"","sources":["../src/oh-footer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,iBAAiB,CAAC;AAGlB,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QAsCL,qBAAqB;QAErB,cAAS,GAAG,EAAE,CAAC;IA2BjB,CAAC;aAlEiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCF;KACF,AAnCqB,CAmCpB;IAMF,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;gBASC,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA,gCAAgC,IAAI,CAAC,SAAS,MAAM;YAC1D,CAAC,CAAC,IAAI;;;;;;;;;;;KAWjB,CAAC;IACJ,CAAC;;AA1BD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACZ;AAxCJ,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAmEpB"}
+{"version":3,"file":"oh-footer.js","sourceRoot":"","sources":["../src/oh-footer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,iBAAiB,CAAC;AAGlB,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QAsCL,qBAAqB;QAErB,cAAS,GAAG,EAAE,CAAC;IA2BjB,CAAC;aAlEiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCF;KACF,AAnCqB,CAmCpB;IAMF,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;gBASC,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA,gCAAgC,IAAI,CAAC,SAAS,MAAM;YAC1D,CAAC,CAAC,IAAI;;;;;;;;;;;KAWjB,CAAC;IACJ,CAAC;;AA1BD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACZ;AAxCJ,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAmEpB"}

package/dist/oh-hero.d.ts

@@ -3,6 +3,11 @@
  *
  * A prominent hero section for page headers.
  *
+ * BRAND PATTERN: this belongs to the Orange Halo brand, not the core. Import
+ * it from @orange-halo/brand-orange-halo; importing it from components is
+ * deprecated and stops working in components 3.0, when this file moves to
+ * the brand package (brand plan phase 8).
+ *
  * @element oh-hero
  */
 import { LitElement } from "lit";

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

@@ -1 +1 @@
-{"version":3,"file":"oh-hero.d.ts","sourceRoot":"","sources":["../src/oh-hero.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAGrD,OAAO,kBAAkB,CAAC;AAE1B,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,0BA+IpB;IAGF,OAAO,EAAE,WAAW,CAAa;IAGjC,IAAI,EAAE,QAAQ,CAAQ;IAGtB,OAAO,SAAM;IAGb,QAAQ,SAAM;IAGd,WAAW,SAAM;IAGjB,WAAW,SAAK;IAGhB,UAAU,SAAK;IAEN,MAAM;CA4ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
+{"version":3,"file":"oh-hero.d.ts","sourceRoot":"","sources":["../src/oh-hero.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAGrD,OAAO,kBAAkB,CAAC;AAE1B,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,0BA+IpB;IAGF,OAAO,EAAE,WAAW,CAAa;IAGjC,IAAI,EAAE,QAAQ,CAAQ;IAGtB,OAAO,SAAM;IAGb,QAAQ,SAAM;IAGd,WAAW,SAAM;IAGjB,WAAW,SAAK;IAGhB,UAAU,SAAK;IAEN,MAAM;CA4ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/oh-hero.js

@@ -3,6 +3,11 @@
  *
  * A prominent hero section for page headers.
  *
+ * BRAND PATTERN: this belongs to the Orange Halo brand, not the core. Import
+ * it from @orange-halo/brand-orange-halo; importing it from components is
+ * deprecated and stops working in components 3.0, when this file moves to
+ * the brand package (brand plan phase 8).
+ *
  * @element oh-hero
  */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {

package/dist/oh-hero.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-hero.js","sourceRoot":"","sources":["../src/oh-hero.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,kBAAkB,CAAC;AAMnB,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAmJL,YAAO,GAAgB,SAAS,CAAC;QAGjC,SAAI,GAAa,IAAI,CAAC;QAGtB,YAAO,GAAG,EAAE,CAAC;QAGb,aAAQ,GAAG,EAAE,CAAC;QAGd,gBAAW,GAAG,EAAE,CAAC;QAGjB,gBAAW,GAAG,CAAC,CAAC;QAGhB,eAAU,GAAG,CAAC,CAAC;IA8CjB,CAAC;aAlNiB,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+I3B,AA/IqB,CA+IpB;IAuBO,MAAM;QACb,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YAC/B,MAAM,aAAa,GAAG,QAAQ,IAAI,CAAC,WAAW,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;YACvE,OAAO,IAAI,CAAA;;;;gBAID,IAAI,CAAC,WAAW;gBAChB,CAAC,CAAC,IAAI,CAAA,oCAAoC,IAAI,CAAC,WAAW,SAAS;gBACnE,CAAC,CAAC,OAAO;8CACqB,IAAI,CAAC,OAAO;;;;yBAIjC,IAAI,CAAC,WAAW;uBAClB,IAAI,CAAC,UAAU;wBACd,aAAa;;;;;;;;;OAS9B,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,OAAO,OAAO;YACtD,CAAC,CAAC,OAAO;YACT,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,QAAQ,MAAM;YACtD,CAAC,CAAC,OAAO;;;;;;KAMhB,CAAC;IACJ,CAAC;;AA/DD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACT;AAGjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCACpB;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2CACrC;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2CACtC;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;0CACtC;AArKJ,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAmNlB"}
+{"version":3,"file":"oh-hero.js","sourceRoot":"","sources":["../src/oh-hero.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,kBAAkB,CAAC;AAMnB,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAmJL,YAAO,GAAgB,SAAS,CAAC;QAGjC,SAAI,GAAa,IAAI,CAAC;QAGtB,YAAO,GAAG,EAAE,CAAC;QAGb,aAAQ,GAAG,EAAE,CAAC;QAGd,gBAAW,GAAG,EAAE,CAAC;QAGjB,gBAAW,GAAG,CAAC,CAAC;QAGhB,eAAU,GAAG,CAAC,CAAC;IA8CjB,CAAC;aAlNiB,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+I3B,AA/IqB,CA+IpB;IAuBO,MAAM;QACb,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YAC/B,MAAM,aAAa,GAAG,QAAQ,IAAI,CAAC,WAAW,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;YACvE,OAAO,IAAI,CAAA;;;;gBAID,IAAI,CAAC,WAAW;gBAChB,CAAC,CAAC,IAAI,CAAA,oCAAoC,IAAI,CAAC,WAAW,SAAS;gBACnE,CAAC,CAAC,OAAO;8CACqB,IAAI,CAAC,OAAO;;;;yBAIjC,IAAI,CAAC,WAAW;uBAClB,IAAI,CAAC,UAAU;wBACd,aAAa;;;;;;;;;OAS9B,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,OAAO,OAAO;YACtD,CAAC,CAAC,OAAO;YACT,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,QAAQ,MAAM;YACtD,CAAC,CAAC,OAAO;;;;;;KAMhB,CAAC;IACJ,CAAC;;AA/DD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACT;AAGjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCACpB;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2CACrC;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2CACtC;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;0CACtC;AArKJ,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAmNlB"}

package/dist/oh-icon.js

@@ -224,8 +224,8 @@ let OhIcon = class OhIcon extends OhElement {
       }
 
       .icon-link:hover {
-        transform: translate(-2px, -2px);
-        box-shadow: 4px 4px 0 0 var(--oh-color-border-default);
+        transform: translate(var(--oh-lift-hover-md), var(--oh-lift-hover-md));
+        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-color-border-default);
       }
 
       .icon-link:active {
@@ -243,7 +243,7 @@ let OhIcon = class OhIcon extends OhElement {
 
       /* Inverse link styles (for dark/colored backgrounds) */
       :host([inverse]) .icon-link:hover {
-        box-shadow: 4px 4px 0 0 var(--oh-color-text-on-accent);
+        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-color-text-on-accent);
       }
 
       :host([inverse]) .icon-link:focus-visible {

package/dist/oh-input.d.ts

@@ -7,9 +7,9 @@
  * DESIGN DECISIONS:
  * ─────────────────
  * 1. CHUNKY & CONFIDENT
- *    - Thick border (2.5px) that feels illustrative
+ *    - Thick border (stroke.control) that feels illustrative
  *    - Solid fill, no subtle gradients
- *    - 10px rounded corners (matches button)
+ *    - shape.control corners (matches button)
  *
  * 2. INSET SHADOW (PRESSED IN)
  *    - Shadow offset to top-left (inset)

package/dist/oh-input.figma.js

@@ -28,8 +28,8 @@ figma.connect("https://www.figma.com/design/q9ZYrOj2w9DrTVmgQFU7bu/OHDS?node-id=
         value="${props.value}"
         placeholder="${props.showPlaceholder ? props.placeholder : ""}"
         ?required="${props.required}"
-        helper-text="${props.helperText}"
-        error-text="${props.errorText}"
+        helpertext="${props.helperText}"
+        errortext="${props.errorText}"
       ></oh-input>
     `,
 });

package/dist/oh-input.figma.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-input.figma.js","sourceRoot":"","sources":["../src/oh-input.figma.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEvD;;;;;;;;;;;;GAYG;AAEH,KAAK,CAAC,OAAO,CACX,uEAAuE,EACvE;IACE,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5B,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC;QAClD,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;QACxC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC;QACnC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;QACvC,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC;KACtC;IACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;iBAEX,KAAK,CAAC,KAAK;iBACX,KAAK,CAAC,KAAK;uBACL,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;qBAChD,KAAK,CAAC,QAAQ;uBACZ,KAAK,CAAC,UAAU;sBACjB,KAAK,CAAC,SAAS;;KAEhC;CACF,CACF,CAAC"}
+{"version":3,"file":"oh-input.figma.js","sourceRoot":"","sources":["../src/oh-input.figma.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEvD;;;;;;;;;;;;GAYG;AAEH,KAAK,CAAC,OAAO,CACX,uEAAuE,EACvE;IACE,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5B,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC;QAClD,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;QACxC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC;QACnC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;QACvC,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC;KACtC;IACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;iBAEX,KAAK,CAAC,KAAK;iBACX,KAAK,CAAC,KAAK;uBACL,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;qBAChD,KAAK,CAAC,QAAQ;sBACb,KAAK,CAAC,UAAU;qBACjB,KAAK,CAAC,SAAS;;KAE/B;CACF,CACF,CAAC"}

package/dist/oh-input.js

@@ -7,9 +7,9 @@
  * DESIGN DECISIONS:
  * ─────────────────
  * 1. CHUNKY & CONFIDENT
- *    - Thick border (2.5px) that feels illustrative
+ *    - Thick border (stroke.control) that feels illustrative
  *    - Solid fill, no subtle gradients
- *    - 10px rounded corners (matches button)
+ *    - shape.control corners (matches button)
  *
  * 2. INSET SHADOW (PRESSED IN)
  *    - Shadow offset to top-left (inset)
@@ -105,7 +105,7 @@ let OhInput = class OhInput extends OhElement {
         border-radius: var(--oh-shape-control);
         
         /* Inset offset shadow: pressed into page */
-        box-shadow: inset 3px 3px 0 0 rgba(61, 50, 41, 0.15);
+        box-shadow: inset var(--oh-elevation-offset-md) var(--oh-elevation-offset-md) 0 0 var(--oh-shadow-field);
         
         transition: 
           border-color var(--oh-motion-snappy) ease,
@@ -128,7 +128,7 @@ let OhInput = class OhInput extends OhElement {
         background-color: var(--oh-color-surface-highlight);
         border-color: var(--oh-focus-ring-color);
         
-        /* 2px inset ring + 2.5px border = ~4.5px total, even on all sides */
+        /* Inset ring + border, even on all sides */
         box-shadow: inset 0 0 0 2px var(--oh-focus-ring-color);
       }
 
@@ -150,7 +150,7 @@ let OhInput = class OhInput extends OhElement {
       .input--error {
         border-color: var(--oh-color-feedback-error);
         background-color: var(--oh-color-feedback-error-subtle);
-        box-shadow: inset 3px 3px 0 0 var(--oh-shadow-error);
+        box-shadow: inset var(--oh-elevation-offset-md) var(--oh-elevation-offset-md) 0 0 var(--oh-shadow-error);
       }
 
       .input--error:focus {