@orange-halo/components 2.1.0 → 3.0.0

package/dist/oh-toggle.js

@@ -1,28 +1,27 @@
 /**
  * oh-toggle
  *
- * A toggle/switch component for binary on/off states.
+ * A switch for binary on/off settings.
  *
  * DESIGN DECISIONS:
  * ─────────────────
- * 1. CHUNKY 3D FEEL
- *    - Thumb offset up-left from center to appear "popping out"
- *    - Shadow flips horizontally when checked (light source stays consistent)
- *    - Smooth slide animation
+ * 1. LOOK FROM TOKENS
+ *    - Track: shape.pill, color.surface.raised off, color.brand.primary on
+ *    - Thumb: color.surface.base with a stroke.control border in
+ *      color.border.emphasis, and a shadow offset by elevation.offset.*
+ *      (elevation.color.secondary off, elevation.color.primary on). The shadow's horizontal
+ *      offset flips when checked; hover and press move the thumb by
+ *      lift.hoverSm / lift.pressSm
  *
  * 2. VISUAL STATES
- *    - Off: Neutral track, thumb on left, shadow bottom-right
- *    - On: Brand primary track, thumb on right, shadow bottom-left (flipped)
+ *    - Off: thumb at the start of the track; on: thumb at the end
  *
  * 3. ACCESSIBILITY
- *    - Uses role="switch" with aria-checked
+ *    - role="switch" with aria-checked on a focusable track
  *    - Keyboard: Space/Enter to toggle
- *    - Focus ring matches design system
- *    - Label association via aria-labelledby
- *
- * @element oh-toggle
- *
- * @fires oh-change - Fired when the toggle state changes
+ *    - Focus: a solid outline in focus.ringColor (focus.glowColor adds a
+ *      glow around it, as decoration)
+ *    - Named by its visible label (aria-labelledby) or accessible-label
  */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -33,6 +32,40 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { OhElement, baseStyles } from "./base.js";
+/**
+ * A switch that turns a setting on or off.
+ *
+ * **Use it for** a setting that takes effect straight away, such as turning
+ * notifications on. **Don't use it for** a choice that's only applied when a
+ * form is submitted, or one that must be agreed to (use `oh-checkbox`), or
+ * a choice between more than two options (use `oh-radio-group`).
+ *
+ * **States:** off, on, hover, active, focus.
+ *
+ * **Behaviour:** clicking the switch or its label, or pressing Space or
+ * Enter while it's focused, flips `checked` and fires `oh-change` with
+ * `{ checked }`. `name` and `value` are stored but it isn't form-associated,
+ * so it doesn't submit with a native form: listen for `oh-change`. It has no
+ * `disabled` property. Under `prefers-reduced-motion` it doesn't animate.
+ *
+ * **Accessibility:** `role="switch"` with `aria-checked`, in the tab order.
+ * Set `label` (a visible label, linked with `aria-labelledby`), or
+ * `accessible-label` when there's no visible label (not `aria-label`, which
+ * isn't forwarded into the shadow root). Focus is a solid outline in
+ * `focus.ringColor`.
+ *
+ * **Look:** set by tokens — `shape.pill` (track), `color.surface.raised` /
+ * `color.brand.primary` (track off / on), `color.surface.base`,
+ * `stroke.control` and `color.border.emphasis` (thumb),
+ * `elevation.offset.*` with `elevation.color.secondary` / `elevation.color.primary` (thumb
+ * shadow off / on), `lift.hoverSm` / `lift.pressSm` (movement on hover and
+ * press), `focus.ringColor` and `focus.glowColor` (focus),
+ * `typography.body.*` (label).
+ *
+ * @element oh-toggle
+ *
+ * @fires oh-change - Fired when the toggle state changes. detail: { checked }
+ */
 let OhToggle = class OhToggle extends OhElement {
     constructor() {
         super(...arguments);
@@ -55,7 +88,7 @@ let OhToggle = class OhToggle extends OhElement {
 
       /* ═══════════════════════════════════════════════════════════════
          TOGGLE TRACK
-         Pill-shaped container
+         shape.pill corners
          ═══════════════════════════════════════════════════════════════ */
 
       .toggle__track {
@@ -79,15 +112,16 @@ let OhToggle = class OhToggle extends OhElement {
         box-shadow: 0 0 0 4px var(--oh-focus-glow-color);
       }
 
-      /* Checked state */
+      /* Checked: track in color.brand.primary */
       .toggle__track--checked {
         background-color: var(--oh-color-brand-primary);
       }
 
       /* ═══════════════════════════════════════════════════════════════
          TOGGLE THUMB
-         Chunky circle offset up-left to appear raised/3D
-         Shadow flips horizontally when checked
+         Circle overlapping the track edge, with an offset shadow
+         (elevation.offset.*). The shadow's horizontal offset flips when
+         checked
          ═══════════════════════════════════════════════════════════════ */
 
       .toggle__thumb {
@@ -99,40 +133,49 @@ let OhToggle = class OhToggle extends OhElement {
         background-color: var(--oh-color-surface-base);
         border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
         border-radius: 50%;
-        box-shadow: var(--oh-elevation-offset-md) var(--oh-elevation-offset-md) 0 0 var(--oh-shadow-secondary);
-        transition: 
+        box-shadow: var(--oh-elevation-offset-md) var(--oh-elevation-offset-md)
+          0 0 var(--oh-elevation-color-secondary);
+        transition:
           transform var(--oh-motion-snappy) var(--oh-motion-ease-gentle),
           box-shadow var(--oh-motion-snappy) ease;
       }
 
-      /* Checked: thumb moves right, shadow flips to bottom-left */
+      /* Checked: thumb moves to the end of the track; shadow offset flips
+         horizontally, in elevation.color.primary */
       .toggle__track--checked .toggle__thumb {
         transform: translateX(30px);
-        box-shadow: calc(-1 * var(--oh-elevation-offset-md)) var(--oh-elevation-offset-md) 0 0 var(--oh-shadow-primary);
+        box-shadow: calc(-1 * var(--oh-elevation-offset-md))
+          var(--oh-elevation-offset-md) 0 0 var(--oh-elevation-color-primary);
       }
 
-      /* Hover state - lift further up-left, shadow grows */
+      /* Hover: thumb moves by lift.hoverSm; shadow offset elevation.offset.lg */
       .toggle__track:hover .toggle__thumb {
         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);
+        box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
+          0 0 var(--oh-elevation-color-secondary);
       }
 
-      /* Checked hover - shadow flipped and grows */
+      /* Checked + hover: flipped shadow at elevation.offset.lg */
       .toggle__track--checked:hover .toggle__thumb {
-        transform: translateX(30px) translate(var(--oh-lift-press-sm), var(--oh-lift-hover-sm));
-        box-shadow: calc(-1 * var(--oh-elevation-offset-lg)) var(--oh-elevation-offset-lg) 0 0 var(--oh-shadow-primary);
+        transform: translateX(30px)
+          translate(var(--oh-lift-press-sm), var(--oh-lift-hover-sm));
+        box-shadow: calc(-1 * var(--oh-elevation-offset-lg))
+          var(--oh-elevation-offset-lg) 0 0 var(--oh-elevation-color-primary);
       }
 
-      /* Active/pressed state - press down, shadow shrinks */
+      /* Active: thumb moves by lift.pressSm; shadow offset elevation.offset.xs */
       .toggle__track:active .toggle__thumb {
         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);
+        box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs)
+          0 0 var(--oh-elevation-color-secondary);
       }
 
-      /* Checked active - shadow flipped and shrinks */
+      /* Checked + active: flipped shadow at elevation.offset.xs */
       .toggle__track--checked:active .toggle__thumb {
-        transform: translateX(30px) translate(var(--oh-lift-hover-sm), var(--oh-lift-press-sm));
-        box-shadow: calc(-1 * var(--oh-elevation-offset-xs)) var(--oh-elevation-offset-xs) 0 0 var(--oh-shadow-primary);
+        transform: translateX(30px)
+          translate(var(--oh-lift-hover-sm), var(--oh-lift-press-sm));
+        box-shadow: calc(-1 * var(--oh-elevation-offset-xs))
+          var(--oh-elevation-offset-xs) 0 0 var(--oh-elevation-color-primary);
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -182,7 +225,9 @@ let OhToggle = class OhToggle extends OhElement {
         role="switch"
         aria-checked="${this.checked}"
         aria-labelledby="${hasVisibleLabel ? this._labelId : nothing}"
-        aria-label="${!hasVisibleLabel && this.accessibleLabel ? this.accessibleLabel : nothing}"
+        aria-label="${!hasVisibleLabel && this.accessibleLabel
+            ? this.accessibleLabel
+            : nothing}"
         tabindex="0"
         @click="${this._handleClick}"
         @keydown="${this._handleKeydown}"
@@ -190,7 +235,12 @@ let OhToggle = class OhToggle extends OhElement {
         <div class="toggle__thumb"></div>
       </div>
       ${hasVisibleLabel
-            ? html `<span id="${this._labelId}" class="toggle__label" @click="${this._handleClick}">${this.label}</span>`
+            ? html `<span
+            id="${this._labelId}"
+            class="toggle__label"
+            @click="${this._handleClick}"
+            >${this.label}</span
+          >`
             : nothing}
     `;
     }

package/dist/oh-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"oh-toggle.js","sourceRoot":"","sources":["../src/oh-toggle.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;AAG3C,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QAqHL,uCAAuC;QAEvC,YAAO,GAAG,KAAK,CAAC;QAiBhB,gCAAgC;QAEhC,UAAK,GAAG,IAAI,CAAC;QAwBI,aAAQ,GAAG,mBAAmB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IAuB1F,CAAC;aAxLiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+GF;KACF,AAlHqB,CAkHpB;IAyBM,OAAO;QACb,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,WAAW,EAAE;YAC3B,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;YACjC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,cAAc,CAAC,CAAgB;QACrC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACvC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,OAAO,EAAE,CAAC;QACjB,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAID,MAAM;QACJ,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAE5C,OAAO,IAAI,CAAA;;+BAEgB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;;wBAEnD,IAAI,CAAC,OAAO;2BACT,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;sBAC9C,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO;;kBAE7E,IAAI,CAAC,YAAY;oBACf,IAAI,CAAC,cAAc;;;;QAI/B,eAAe;YACf,CAAC,CAAC,IAAI,CAAA,aAAa,IAAI,CAAC,QAAQ,mCAAmC,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,KAAK,SAAS;YAC5G,CAAC,CAAC,OAAO;KACZ,CAAC;IACJ,CAAC;;AAjED;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAC3B;AAIhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACZ;AAOf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;iDACjC;AAIzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACb;AAId;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACd;AA1IF,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAyLpB"}
+{"version":3,"file":"oh-toggle.js","sourceRoot":"","sources":["../src/oh-toggle.ts"],"names":[],"mappings":"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"}

package/dist/styles/typography.js

@@ -124,7 +124,7 @@ export const typographyStyles = css `
 
   a::after,
   .oh-link::after {
-    content: '';
+    content: "";
     position: absolute;
     left: 0;
     right: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orange-halo/components",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "Web Components for Orange Halo Design System",
   "type": "module",
   "main": "./dist/index.js",
@@ -63,10 +63,6 @@
       "types": "./dist/oh-grid.d.ts",
       "import": "./dist/oh-grid.js"
     },
-    "./oh-hero.js": {
-      "types": "./dist/oh-hero.d.ts",
-      "import": "./dist/oh-hero.js"
-    },
     "./oh-icon.js": {
       "types": "./dist/oh-icon.d.ts",
       "import": "./dist/oh-icon.js"
@@ -115,6 +111,10 @@
       "types": "./dist/oh-tabs.d.ts",
       "import": "./dist/oh-tabs.js"
     },
+    "./oh-textarea.js": {
+      "types": "./dist/oh-textarea.d.ts",
+      "import": "./dist/oh-textarea.js"
+    },
     "./oh-toggle.js": {
       "types": "./dist/oh-toggle.d.ts",
       "import": "./dist/oh-toggle.js"
@@ -129,12 +129,12 @@
     "lit": "^3.2.1"
   },
   "peerDependencies": {
-    "@orange-halo/tokens": "^2.1.0",
+    "@orange-halo/tokens": "^3.0.0",
     "@orange-halo/utils": "^1.1.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@orange-halo/tokens": "2.1.0",
+    "@orange-halo/tokens": "3.0.0",
     "@orange-halo/utils": "1.1.0"
   },
   "publishConfig": {

package/dist/oh-hero.d.ts

@@ -1,33 +0,0 @@
-/**
- * oh-hero
- *
- * 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";
-import "./oh-progress.js";
-export type HeroVariant = "content" | "journey";
-export type HeroSize = "sm" | "md" | "lg" | "xl";
-export declare class OhHero extends LitElement {
-    static styles: import("lit").CSSResult;
-    variant: HeroVariant;
-    size: HeroSize;
-    heading: string;
-    subtitle: string;
-    journeyName: string;
-    currentStep: number;
-    totalSteps: number;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "oh-hero": OhHero;
-    }
-}
-//# sourceMappingURL=oh-hero.d.ts.map

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

@@ -1 +0,0 @@
-{"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

@@ -1,246 +0,0 @@
-/**
- * oh-hero
- *
- * 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) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, css, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import "./oh-progress.js";
-let OhHero = class OhHero extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.variant = "content";
-        this.size = "lg";
-        this.heading = "";
-        this.subtitle = "";
-        this.journeyName = "";
-        this.currentStep = 1;
-        this.totalSteps = 1;
-    }
-    static { this.styles = css `
-    :host {
-      display: block;
-      background-color: var(--oh-color-brand-primary);
-      color: var(--oh-color-text-on-brand);
-      font-family: var(--oh-typography-body-font-family);
-    }
-
-    .hero {
-      padding: var(--oh-spacing-12) 0;
-    }
-
-    .hero--journey {
-      padding: var(--oh-spacing-8) 0;
-    }
-
-    /* Container styles - matches oh-container */
-    .hero__container {
-      width: 100%;
-      max-width: var(--hero-max-width, var(--oh-layout-container-lg));
-      margin-left: auto;
-      margin-right: auto;
-      padding-left: var(--oh-spacing-4);
-      padding-right: var(--oh-spacing-4);
-      box-sizing: border-box;
-    }
-
-    /* Size variants */
-    :host([size="sm"]) {
-      --hero-max-width: var(--oh-layout-container-sm);
-    }
-
-    :host([size="md"]) {
-      --hero-max-width: var(--oh-layout-container-md);
-    }
-
-    :host([size="lg"]) {
-      --hero-max-width: var(--oh-layout-container-lg);
-    }
-
-    :host([size="xl"]) {
-      --hero-max-width: var(--oh-layout-container-xl);
-    }
-
-    .hero__heading {
-      font-size: var(--oh-typography-heading-h1-font-size);
-      font-weight: var(--oh-typography-heading-h1-font-weight);
-      line-height: var(--oh-typography-heading-h1-line-height);
-      margin: 0 0 var(--oh-spacing-4) 0;
-      color: var(--oh-color-text-on-brand);
-    }
-
-    .hero__subtitle {
-      font-size: var(--oh-typography-body-xl-font-size);
-      font-weight: var(--oh-typography-body-xl-font-weight);
-      line-height: var(--oh-typography-body-xl-line-height);
-      margin: 0 0 var(--oh-spacing-6) 0;
-      color: var(--oh-color-text-on-brand);
-      max-width: 65ch;
-    }
-
-    .hero__actions {
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--oh-spacing-4);
-      margin-top: var(--oh-spacing-6);
-    }
-
-    .hero__journey-heading {
-      font-size: var(--oh-typography-heading-h2-font-size);
-      font-weight: var(--oh-typography-heading-h2-font-weight);
-      line-height: var(--oh-typography-heading-h2-line-height);
-      margin: 0 0 var(--oh-spacing-6) 0;
-      color: var(--oh-color-text-on-brand);
-    }
-
-    .hero__journey-name {
-      display: block;
-      font-family: var(--oh-typography-eyebrow-font-family);
-      font-size: var(--oh-typography-eyebrow-font-size);
-      font-weight: var(--oh-typography-eyebrow-font-weight);
-      text-transform: uppercase;
-      letter-spacing: var(--oh-typography-eyebrow-letter-spacing);
-      color: var(--oh-color-text-on-brand);
-      margin-bottom: var(--oh-spacing-2);
-    }
-
-    .hero__page-name {
-      display: block;
-    }
-
-    .hero__progress-wrapper {
-      margin-top: var(--oh-spacing-4);
-      max-width: var(--oh-layout-container-sm);
-    }
-
-    /* Responsive container padding - matches oh-container */
-    @media (min-width: 640px) {
-      .hero__container {
-        padding-left: var(--oh-spacing-6);
-        padding-right: var(--oh-spacing-6);
-      }
-    }
-
-    @media (min-width: 1024px) {
-      .hero__container {
-        padding-left: var(--oh-spacing-8);
-        padding-right: var(--oh-spacing-8);
-      }
-    }
-
-    @media (max-width: 768px) {
-      .hero {
-        padding: var(--oh-spacing-8) 0;
-      }
-      .hero__heading {
-        font-size: var(--oh-typography-heading-h2-font-size);
-      }
-      .hero__subtitle {
-        font-size: var(--oh-typography-body-lg-font-size);
-      }
-      .hero--journey {
-        padding: var(--oh-spacing-6) 0;
-      }
-      .hero__journey-heading {
-        font-size: var(--oh-typography-heading-h3-font-size);
-      }
-      .hero__progress-wrapper {
-        max-width: 100%;
-      }
-    }
-
-    @media (max-width: 480px) {
-      .hero__heading {
-        font-size: var(--oh-typography-heading-h3-font-size);
-      }
-      .hero__journey-heading {
-        font-size: var(--oh-typography-heading-h4-font-size);
-      }
-      .hero__actions {
-        flex-direction: column;
-      }
-    }
-  `; }
-    render() {
-        if (this.variant === "journey") {
-            const progressLabel = `Step ${this.currentStep} of ${this.totalSteps}`;
-            return html `
-        <div class="hero hero--journey">
-          <div class="hero__container">
-            <h1 class="hero__journey-heading">
-              ${this.journeyName
-                ? html `<span class="hero__journey-name">${this.journeyName}</span>`
-                : nothing}
-              <span class="hero__page-name">${this.heading}</span>
-            </h1>
-            <div class="hero__progress-wrapper">
-              <oh-progress
-                .value=${this.currentStep}
-                .max=${this.totalSteps}
-                label=${progressLabel}
-                size="md"
-                inverse
-                show-value
-              ></oh-progress>
-            </div>
-            <slot></slot>
-          </div>
-        </div>
-      `;
-        }
-        return html `
-      <div class="hero">
-        <div class="hero__container">
-          ${this.heading
-            ? html `<h1 class="hero__heading">${this.heading}</h1>`
-            : nothing}
-          ${this.subtitle
-            ? html `<p class="hero__subtitle">${this.subtitle}</p>`
-            : nothing}
-          <div class="hero__actions">
-            <slot></slot>
-          </div>
-        </div>
-      </div>
-    `;
-    }
-};
-__decorate([
-    property({ type: String, reflect: true })
-], OhHero.prototype, "variant", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], OhHero.prototype, "size", void 0);
-__decorate([
-    property({ type: String })
-], OhHero.prototype, "heading", void 0);
-__decorate([
-    property({ type: String })
-], OhHero.prototype, "subtitle", void 0);
-__decorate([
-    property({ type: String, attribute: "journey-name" })
-], OhHero.prototype, "journeyName", void 0);
-__decorate([
-    property({ type: Number, attribute: "current-step" })
-], OhHero.prototype, "currentStep", void 0);
-__decorate([
-    property({ type: Number, attribute: "total-steps" })
-], OhHero.prototype, "totalSteps", void 0);
-OhHero = __decorate([
-    customElement("oh-hero")
-], OhHero);
-export { OhHero };
-//# sourceMappingURL=oh-hero.js.map

package/dist/oh-hero.js.map

@@ -1 +0,0 @@
-{"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"}