@orange-halo/components 1.0.0 → 2.0.0

package/dist/base.js

@@ -22,9 +22,9 @@ export const baseStyles = css `
 
   /* Focus ring for keyboard navigation */
   :host(:focus-visible) {
-    outline: var(--oh-focus-ring-width, 2px) solid
-      var(--oh-focus-ring-color, #c54300);
-    outline-offset: var(--oh-focus-ring-offset, 2px);
+    outline: var(--oh-focus-ring-width) solid
+      var(--oh-focus-ring-color);
+    outline-offset: var(--oh-focus-ring-offset);
   }
 
   /* Hide focus ring for mouse users */

package/dist/oh-accordion.js

@@ -49,9 +49,9 @@ let OhAccordion = class OhAccordion extends OhElement {
 
       :host {
         display: block;
-        font-family: var(--oh-font-family-sans);
-        font-size: var(--oh-font-size-base);
-        line-height: var(--oh-font-line-height-normal);
+        font-family: var(--oh-typography-body-font-family);
+        font-size: var(--oh-typography-body-base-font-size);
+        line-height: var(--oh-typography-body-base-line-height);
       }
 
       .accordion {
@@ -94,9 +94,9 @@ let OhAccordion = class OhAccordion extends OhElement {
         cursor: pointer;
         text-align: left;
         
-        font-family: var(--oh-font-family-sans);
-        font-size: var(--oh-font-size-base);
-        font-weight: var(--oh-font-weight-medium);
+        font-family: var(--oh-typography-body-font-family);
+        font-size: var(--oh-typography-body-base-font-size);
+        font-weight: var(--oh-typography-label-base-font-weight);
         color: var(--oh-color-text-link);
       }
 
@@ -127,7 +127,7 @@ let OhAccordion = class OhAccordion extends OhElement {
         background-size: 100% 100%;
         background-repeat: no-repeat;
         transform-origin: right;
-        transition: transform var(--oh-motion-relaxed, 300ms) var(--oh-motion-ease-gentle, ease);
+        transition: transform var(--oh-motion-relaxed) var(--oh-motion-ease-gentle);
       }
 
       .accordion--subtle .accordion-trigger:hover .accordion-text::after {
@@ -156,15 +156,15 @@ let OhAccordion = class OhAccordion extends OhElement {
 
       .accordion--standout .accordion-item {
         background-color: var(--oh-color-surface-raised);
-        border: var(--oh-input-base-border-width, 2.5px) solid var(--oh-color-border-emphasis);
-        border-radius: var(--oh-radius-md);
+        border: var(--oh-input-base-border-width) solid var(--oh-color-border-emphasis);
+        border-radius: var(--oh-shape-container);
         overflow: hidden;
         
         /* Base shadow and lift animation */
         box-shadow: 3px 3px 0 0 rgba(107, 93, 77, 0.15);
         transition: 
-          transform var(--oh-motion-snappy, 150ms) var(--oh-motion-ease-playful, cubic-bezier(0.34, 1.56, 0.64, 1)),
-          box-shadow var(--oh-motion-snappy, 150ms) var(--oh-motion-ease-playful, cubic-bezier(0.34, 1.56, 0.64, 1));
+          transform var(--oh-motion-snappy) var(--oh-motion-ease-playful),
+          box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-playful);
       }
 
       /* Lift whole accordion only when trigger is hovered */
@@ -189,9 +189,9 @@ let OhAccordion = class OhAccordion extends OhElement {
         cursor: pointer;
         text-align: left;
         
-        font-family: var(--oh-font-family-sans);
-        font-size: var(--oh-font-size-base);
-        font-weight: var(--oh-font-weight-semibold);
+        font-family: var(--oh-typography-body-font-family);
+        font-size: var(--oh-typography-body-base-font-size);
+        font-weight: var(--oh-typography-control-font-weight);
         color: var(--oh-color-text-primary);
       }
 
@@ -228,7 +228,7 @@ let OhAccordion = class OhAccordion extends OhElement {
         background-repeat: no-repeat;
         transform-origin: left;
         transform: scaleX(0);
-        transition: transform var(--oh-motion-relaxed, 300ms) var(--oh-motion-ease-gentle, ease);
+        transition: transform var(--oh-motion-relaxed) var(--oh-motion-ease-gentle);
       }
 
       .accordion--standout .accordion-trigger:hover .accordion-text::after {
@@ -249,7 +249,7 @@ let OhAccordion = class OhAccordion extends OhElement {
         flex-shrink: 0;
         width: 1rem;
         height: 1rem;
-        transition: transform var(--oh-motion-gentle, 200ms) var(--oh-motion-ease-gentle, ease);
+        transition: transform var(--oh-motion-gentle) var(--oh-motion-ease-gentle);
       }
 
       .accordion--subtle .accordion-icon {
@@ -271,7 +271,7 @@ let OhAccordion = class OhAccordion extends OhElement {
       .accordion-panel {
         display: grid;
         grid-template-rows: 0fr;
-        transition: grid-template-rows var(--oh-motion-gentle, 200ms) ease;
+        transition: grid-template-rows var(--oh-motion-gentle) ease;
       }
 
       .accordion-panel[data-expanded="true"] {

package/dist/oh-alert.js

@@ -68,10 +68,10 @@ let OhAlert = class OhAlert extends OhElement {
         
         /* Shape */
         padding: var(--oh-spacing-4);
-        border-radius: var(--oh-radius-md);
+        border-radius: var(--oh-shape-container);
         
         /* Chunky border like other components */
-        border: var(--oh-input-base-border-width, 2.5px) solid;
+        border: var(--oh-input-base-border-width) solid;
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -94,9 +94,9 @@ let OhAlert = class OhAlert extends OhElement {
         min-width: 0;
         
         /* Typography */
-        font-family: var(--oh-font-family-sans);
-        font-size: var(--oh-font-size-base);
-        line-height: var(--oh-font-line-height-normal);
+        font-family: var(--oh-typography-body-font-family);
+        font-size: var(--oh-typography-body-base-font-size);
+        line-height: var(--oh-typography-body-base-line-height);
       }
 
       /* 
@@ -104,7 +104,7 @@ let OhAlert = class OhAlert extends OhElement {
        * Uses background-image approach which works with ::slotted()
        */
       .alert-content ::slotted(a) {
-        font-weight: var(--oh-font-weight-semibold);
+        font-weight: var(--oh-typography-emphasis-font-weight);
         text-decoration: none;
         background-image: repeating-linear-gradient(
           to right,
@@ -117,7 +117,7 @@ let OhAlert = class OhAlert extends OhElement {
         background-position: 0 100%;
         background-repeat: no-repeat;
         padding-bottom: 2px;
-        transition: background-size var(--oh-motion-slow, 450ms) ease;
+        transition: background-size var(--oh-motion-slow) ease;
       }
 
       .alert-content ::slotted(a:hover) {
@@ -146,13 +146,13 @@ let OhAlert = class OhAlert extends OhElement {
         padding: var(--oh-spacing-1) var(--oh-spacing-2);
         margin: -0.25rem -0.5rem -0.25rem 0;
         
-        font-family: var(--oh-font-family-sans);
-        font-size: var(--oh-font-size-base);
-        font-weight: var(--oh-font-weight-medium);
+        font-family: var(--oh-typography-body-font-family);
+        font-size: var(--oh-typography-body-base-font-size);
+        font-weight: var(--oh-typography-label-base-font-weight);
         
         background: transparent;
         border: none;
-        border-radius: var(--oh-radius-sm);
+        border-radius: var(--oh-shape-compact);
         cursor: pointer;
         
         /* Use primary text color for contrast */
@@ -160,13 +160,13 @@ let OhAlert = class OhAlert extends OhElement {
         
         /* Chunky animation setup */
         transition: 
-          transform var(--oh-motion-snappy, 150ms) var(--oh-motion-ease-playful, cubic-bezier(0.34, 1.56, 0.64, 1)),
-          box-shadow var(--oh-motion-snappy, 150ms) var(--oh-motion-ease-playful, cubic-bezier(0.34, 1.56, 0.64, 1)),
-          background-color var(--oh-motion-quick, 120ms) ease;
+          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;
       }
 
       .alert-close:hover {
-        background-color: rgba(0, 0, 0, 0.08);
+        background-color: var(--oh-close-button-background-hover);
         transform: translate(-2px, -2px);
         box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.15);
       }

package/dist/oh-badge.js

@@ -54,15 +54,15 @@ let OhBadge = class OhBadge extends OhElement {
         gap: var(--oh-spacing-1);
         
         /* Typography */
-        font-family: var(--oh-font-family-sans);
-        font-size: var(--oh-font-size-base);
-        font-weight: var(--oh-font-weight-medium);
-        line-height: var(--oh-font-line-height-tight, 1.25);
-        letter-spacing: var(--oh-font-letter-spacing-wide);
+        font-family: var(--oh-typography-body-font-family);
+        font-size: var(--oh-typography-body-base-font-size);
+        font-weight: var(--oh-typography-label-base-font-weight);
+        line-height: var(--oh-typography-heading-h1-line-height);
+        letter-spacing: var(--oh-typography-control-letter-spacing);
         
         /* Shape */
         padding: var(--oh-spacing-1) var(--oh-spacing-2-5);
-        border-radius: var(--oh-radius-sm);
+        border-radius: var(--oh-shape-compact);
         
         /* No interaction */
         pointer-events: none;
@@ -94,7 +94,7 @@ let OhBadge = class OhBadge extends OhElement {
       }
 
       .badge--subtle.badge--brand {
-        background-color: var(--oh-color-brand-subtle);
+        background-color: var(--oh-color-brand-primary-subtle);
         color: var(--oh-color-brand-primary);
       }
 
@@ -109,22 +109,22 @@ let OhBadge = class OhBadge extends OhElement {
 
       .badge--filled.badge--success {
         background-color: var(--oh-color-feedback-success);
-        color: var(--oh-color-surface-white);
+        color: var(--oh-color-text-on-success);
       }
 
       .badge--filled.badge--error {
         background-color: var(--oh-color-feedback-error);
-        color: var(--oh-color-surface-white);
+        color: var(--oh-color-text-on-error);
       }
 
       .badge--filled.badge--warning {
         background-color: var(--oh-color-feedback-warning);
-        color: var(--oh-color-surface-white);
+        color: var(--oh-color-text-on-warning);
       }
 
       .badge--filled.badge--info {
         background-color: var(--oh-color-feedback-info);
-        color: var(--oh-color-surface-white);
+        color: var(--oh-color-text-on-info);
       }
 
       .badge--filled.badge--brand {

package/dist/oh-breadcrumb.js

@@ -44,9 +44,9 @@ let OhBreadcrumb = class OhBreadcrumb extends OhElement {
 
       :host {
         display: block;
-        font-family: var(--oh-font-family-sans);
-        font-size: var(--oh-font-size-base);
-        line-height: var(--oh-font-line-height-normal);
+        font-family: var(--oh-typography-body-font-family);
+        font-size: var(--oh-typography-body-base-font-size);
+        line-height: var(--oh-typography-body-base-line-height);
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -107,7 +107,7 @@ let OhBreadcrumb = class OhBreadcrumb extends OhElement {
         background-size: 100% 100%;
         background-repeat: no-repeat;
         transform-origin: right;
-        transition: transform var(--oh-motion-relaxed, 300ms) var(--oh-motion-ease-gentle, ease);
+        transition: transform var(--oh-motion-relaxed) var(--oh-motion-ease-gentle);
       }
 
       .breadcrumb-link:hover::after {
@@ -117,7 +117,7 @@ let OhBreadcrumb = class OhBreadcrumb extends OhElement {
       .breadcrumb-link:focus-visible {
         outline: none;
         background-color: var(--oh-color-surface-hover);
-        border-radius: var(--oh-radius-xs);
+        border-radius: var(--oh-shape-tight);
         padding: 0 2px 2px 2px;
         margin: 0 -2px;
       }
@@ -135,7 +135,7 @@ let OhBreadcrumb = class OhBreadcrumb extends OhElement {
 
       .breadcrumb-current {
         color: var(--oh-color-text-primary);
-        font-weight: var(--oh-font-weight-medium);
+        font-weight: var(--oh-typography-label-base-font-weight);
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -173,7 +173,7 @@ let OhBreadcrumb = class OhBreadcrumb extends OhElement {
         background-size: 100% 100%;
         background-repeat: no-repeat;
         transform-origin: right;
-        transition: transform var(--oh-motion-relaxed, 300ms) var(--oh-motion-ease-gentle, ease);
+        transition: transform var(--oh-motion-relaxed) var(--oh-motion-ease-gentle);
       }
 
       .back-link:hover::after {
@@ -183,7 +183,7 @@ let OhBreadcrumb = class OhBreadcrumb extends OhElement {
       .back-link:focus-visible {
         outline: none;
         background-color: var(--oh-color-surface-hover);
-        border-radius: var(--oh-radius-xs);
+        border-radius: var(--oh-shape-tight);
         padding: 0 2px 2px 2px;
         margin: 0 -2px;
       }

package/dist/oh-button.d.ts

@@ -38,6 +38,12 @@ export declare class OhButton extends OhElement {
     size: ButtonSize;
     loading: boolean;
     iconOnly: boolean;
+    /**
+     * Accessible name for the inner button/anchor. Required for icon-only
+     * buttons. Use this, not aria-label: an aria-label on the host isn't
+     * forwarded into the shadow root.
+     */
+    accessibleLabel?: string;
     /**
      * Force a visual state (for documentation/Figma sync only)
      * Values: 'hover' | 'active' | 'focus'

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

@@ -1 +1 @@
-{"version":3,"file":"oh-button.d.ts","sourceRoot":"","sources":["../src/oh-button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;AAC/D,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEnE,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BA8VpB;IAGF,OAAO,EAAE,aAAa,CAAa;IAGnC,IAAI,EAAE,UAAU,CAAQ;IAGxB,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,UAAU,EAAE,WAAW,CAAa;IAEpC,kEAAkE;IAElE,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,uDAAuD;IAEvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,OAAO,CAAC,YAAY;IASpB,+CAA+C;IACtC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAKrC,8CAA8C;IACrC,IAAI;IAKb,MAAM;CA6CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"oh-button.d.ts","sourceRoot":"","sources":["../src/oh-button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;AAC/D,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEnE,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BA8WpB;IAGF,OAAO,EAAE,aAAa,CAAa;IAGnC,IAAI,EAAE,UAAU,CAAQ;IAGxB,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IAEH,UAAU,EAAE,WAAW,CAAa;IAEpC,kEAAkE;IAElE,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,uDAAuD;IAEvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,OAAO,CAAC,YAAY;IASpB,+CAA+C;IACtC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAKrC,8CAA8C;IACrC,IAAI;IAKb,MAAM;CAuDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}