@orange-halo/components 1.0.0

package/dist/oh-toggle.js

@@ -0,0 +1,219 @@
+/**
+ * oh-toggle
+ *
+ * A toggle/switch component for binary on/off states.
+ *
+ * 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
+ *
+ * 2. VISUAL STATES
+ *    - Off: Neutral track, thumb on left, shadow bottom-right
+ *    - On: Brand primary track, thumb on right, shadow bottom-left (flipped)
+ *
+ * 3. ACCESSIBILITY
+ *    - Uses role="switch" with aria-checked
+ *    - 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
+ */
+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, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { OhElement, baseStyles } from "./base.js";
+let OhToggle = class OhToggle extends OhElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the toggle is checked/on */
+        this.checked = false;
+        /** Accessible label when no visible label is provided */
+        this.ariaLabel = null;
+        /** Value for form submission */
+        this.value = "on";
+        this._labelId = `oh-toggle-label-${Math.random().toString(36).slice(2, 9)}`;
+    }
+    static { this.styles = [
+        baseStyles,
+        css `
+      :host {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--oh-spacing-3);
+        font-family: var(--oh-font-family-sans);
+        cursor: pointer;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         TOGGLE TRACK
+         Pill-shaped container
+         ═══════════════════════════════════════════════════════════════ */
+
+      .toggle__track {
+        position: relative;
+        display: inline-flex;
+        width: 48px;
+        height: 26px;
+        background-color: var(--oh-color-surface-raised);
+        border: none;
+        border-radius: 9999px;
+        transition: background-color var(--oh-motion-snappy) ease;
+      }
+
+      .toggle__track:focus {
+        outline: none;
+      }
+
+      .toggle__track:focus-visible {
+        outline: 2px solid var(--oh-color-border-focus);
+        outline-offset: 2px;
+        box-shadow: 0 0 0 4px var(--oh-focus-glow-color);
+      }
+
+      /* Checked state */
+      .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
+         ═══════════════════════════════════════════════════════════════ */
+
+      .toggle__thumb {
+        position: absolute;
+        top: -3px;
+        left: -3px;
+        width: 26px;
+        height: 26px;
+        background-color: var(--oh-color-surface-base);
+        border: var(--oh-input-base-border-width) solid var(--oh-color-border-emphasis);
+        border-radius: 50%;
+        box-shadow: 3px 3px 0 0 var(--oh-shadow-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 */
+      .toggle__track--checked .toggle__thumb {
+        transform: translateX(30px);
+        box-shadow: -3px 3px 0 0 var(--oh-shadow-primary);
+      }
+
+      /* Hover state - lift further up-left, shadow grows */
+      .toggle__track:hover .toggle__thumb {
+        transform: translate(-1px, -1px);
+        box-shadow: 4px 4px 0 0 var(--oh-shadow-secondary);
+      }
+
+      /* Checked hover - shadow flipped and grows */
+      .toggle__track--checked:hover .toggle__thumb {
+        transform: translateX(30px) translate(1px, -1px);
+        box-shadow: -4px 4px 0 0 var(--oh-shadow-primary);
+      }
+
+      /* Active/pressed state - press down, shadow shrinks */
+      .toggle__track:active .toggle__thumb {
+        transform: translate(1px, 1px);
+        box-shadow: 1px 1px 0 0 var(--oh-shadow-secondary);
+      }
+
+      /* Checked active - shadow flipped and shrinks */
+      .toggle__track--checked:active .toggle__thumb {
+        transform: translateX(30px) translate(-1px, 1px);
+        box-shadow: -1px 1px 0 0 var(--oh-shadow-primary);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         LABEL
+         ═══════════════════════════════════════════════════════════════ */
+
+      .toggle__label {
+        font-size: var(--oh-font-size-base);
+        color: var(--oh-color-text-primary);
+        user-select: none;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         REDUCED MOTION
+         ═══════════════════════════════════════════════════════════════ */
+
+      @media (prefers-reduced-motion: reduce) {
+        .toggle__track,
+        .toggle__thumb {
+          transition: none;
+        }
+      }
+    `,
+    ]; }
+    _toggle() {
+        this.checked = !this.checked;
+        this.dispatchEvent(new CustomEvent("oh-change", {
+            detail: { checked: this.checked },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _handleKeydown(e) {
+        if (e.key === " " || e.key === "Enter") {
+            e.preventDefault();
+            this._toggle();
+        }
+    }
+    _handleClick() {
+        this._toggle();
+    }
+    render() {
+        const hasVisibleLabel = Boolean(this.label);
+        return html `
+      <div
+        class="toggle__track ${this.checked ? "toggle__track--checked" : ""}"
+        role="switch"
+        aria-checked="${this.checked}"
+        aria-labelledby="${hasVisibleLabel ? this._labelId : nothing}"
+        aria-label="${!hasVisibleLabel && this.ariaLabel ? this.ariaLabel : nothing}"
+        tabindex="0"
+        @click="${this._handleClick}"
+        @keydown="${this._handleKeydown}"
+      >
+        <div class="toggle__thumb"></div>
+      </div>
+      ${hasVisibleLabel
+            ? html `<span id="${this._labelId}" class="toggle__label" @click="${this._handleClick}">${this.label}</span>`
+            : nothing}
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OhToggle.prototype, "checked", void 0);
+__decorate([
+    property({ type: String })
+], OhToggle.prototype, "label", void 0);
+__decorate([
+    property({ type: String, attribute: "aria-label" })
+], OhToggle.prototype, "ariaLabel", void 0);
+__decorate([
+    property({ type: String })
+], OhToggle.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], OhToggle.prototype, "value", void 0);
+OhToggle = __decorate([
+    customElement("oh-toggle")
+], OhToggle);
+export { OhToggle };
+//# sourceMappingURL=oh-toggle.js.map

package/dist/oh-toggle.js.map

@@ -0,0 +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;QAMhB,yDAAyD;QAEzD,cAAS,GAAkB,IAAI,CAAC;QAMhC,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;aArLiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+GF;KACF,AAlHqB,CAkHpB;IAsBM,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,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;;kBAEjE,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;;AA9DD;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;AAIf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;2CACpB;AAIhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACb;AAId;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACd;AAvIF,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAsLpB"}

package/dist/styles/typography.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Typography Styles
+ *
+ * CSS styles for typography that can be applied to host applications.
+ * Import this CSS in your app to apply Orange Halo typography tokens.
+ */
+/**
+ * Base typography styles using design tokens
+ */
+export declare const typographyStyles: import("lit").CSSResult;
+/**
+ * Export typography as a CSS string for use outside Lit
+ */
+export declare const typographyCSS: string;
+//# sourceMappingURL=typography.d.ts.map

package/dist/styles/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/styles/typography.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH;;GAEG;AACH,eAAO,MAAM,gBAAgB,yBA2N5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,QAA2B,CAAC"}

package/dist/styles/typography.js

@@ -0,0 +1,235 @@
+/**
+ * Typography Styles
+ *
+ * CSS styles for typography that can be applied to host applications.
+ * Import this CSS in your app to apply Orange Halo typography tokens.
+ */
+import { css } from "lit";
+/**
+ * Base typography styles using design tokens
+ */
+export const typographyStyles = css `
+  /* Base typography setup */
+  :host {
+    font-family: var(--oh-font-family-sans);
+    font-size: var(--oh-font-size-base);
+    line-height: var(--oh-font-line-height-normal);
+    color: var(--oh-color-text-primary);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /* Headings */
+  h1,
+  .oh-h1 {
+    font-size: var(--oh-font-size-4xl);
+    font-weight: var(--oh-font-weight-bold);
+    line-height: var(--oh-font-line-height-tight);
+    color: var(--oh-color-text-primary);
+    margin: 0 0 var(--oh-spacing-4);
+  }
+
+  h2,
+  .oh-h2 {
+    font-size: var(--oh-font-size-3xl);
+    font-weight: var(--oh-font-weight-bold);
+    line-height: var(--oh-font-line-height-tight);
+    color: var(--oh-color-text-primary);
+    margin: 0 0 var(--oh-spacing-4);
+  }
+
+  h3,
+  .oh-h3 {
+    font-size: var(--oh-font-size-2xl);
+    font-weight: var(--oh-font-weight-semibold);
+    line-height: var(--oh-font-line-height-snug);
+    color: var(--oh-color-text-primary);
+    margin: 0 0 var(--oh-spacing-3);
+  }
+
+  h4,
+  .oh-h4 {
+    font-size: var(--oh-font-size-xl);
+    font-weight: var(--oh-font-weight-semibold);
+    line-height: var(--oh-font-line-height-snug);
+    color: var(--oh-color-text-primary);
+    margin: 0 0 var(--oh-spacing-3);
+  }
+
+  h5,
+  .oh-h5 {
+    font-size: var(--oh-font-size-lg);
+    font-weight: var(--oh-font-weight-medium);
+    line-height: var(--oh-font-line-height-normal);
+    color: var(--oh-color-text-primary);
+    margin: 0 0 var(--oh-spacing-2);
+  }
+
+  h6,
+  .oh-h6 {
+    font-size: var(--oh-font-size-base);
+    font-weight: var(--oh-font-weight-medium);
+    line-height: var(--oh-font-line-height-normal);
+    color: var(--oh-color-text-primary);
+    margin: 0 0 var(--oh-spacing-2);
+  }
+
+  /* Body text */
+  p,
+  .oh-body {
+    font-size: var(--oh-font-size-base);
+    font-weight: var(--oh-font-weight-normal);
+    line-height: var(--oh-font-line-height-normal);
+    color: var(--oh-color-text-secondary);
+    margin: 0 0 var(--oh-spacing-4);
+  }
+
+  .oh-body-lg {
+    font-size: var(--oh-font-size-lg);
+    line-height: var(--oh-font-line-height-relaxed);
+  }
+
+  .oh-body-sm {
+    font-size: var(--oh-font-size-sm);
+  }
+
+  .oh-body-xs {
+    font-size: var(--oh-font-size-xs);
+  }
+
+  /* Labels */
+  .oh-label {
+    font-size: var(--oh-font-size-sm);
+    font-weight: var(--oh-font-weight-medium);
+    line-height: var(--oh-font-line-height-normal);
+    color: var(--oh-color-text-primary);
+  }
+
+  .oh-label-lg {
+    font-size: var(--oh-font-size-base);
+  }
+
+  .oh-label-sm {
+    font-size: var(--oh-font-size-xs);
+  }
+
+  /* Links - dashed underline with shrink animation */
+  a,
+  .oh-link {
+    position: relative;
+    color: var(--oh-color-brand-primary);
+    text-decoration: none;
+    font-weight: var(--oh-font-weight-semibold);
+  }
+
+  a::after,
+  .oh-link::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 2px;
+    background: repeating-linear-gradient(
+      to right,
+      currentColor 0,
+      currentColor 4px,
+      transparent 4px,
+      transparent 8px
+    );
+    transform-origin: right;
+    transition: transform var(--oh-motion-slow, 450ms) ease;
+  }
+
+  a:hover::after,
+  .oh-link:hover::after {
+    transform: scaleX(0);
+  }
+
+  a:focus-visible,
+  .oh-link:focus-visible {
+    outline: none;
+    background-color: var(--oh-color-surface-hover, rgba(0,0,0,0.05));
+    border-radius: 2px;
+    padding: 0 0.25rem;
+    margin: 0 -0.25rem;
+  }
+
+  a:focus-visible::after,
+  .oh-link:focus-visible::after {
+    background: currentColor;
+    transform: scaleX(1);
+  }
+
+  /* Code */
+  code,
+  .oh-code {
+    font-family: var(--oh-font-family-mono);
+    font-size: var(--oh-font-size-sm);
+    background-color: var(--oh-color-surface-inset);
+    padding: 0.125em 0.375em;
+    border-radius: var(--oh-radius-xs);
+  }
+
+  pre {
+    font-family: var(--oh-font-family-mono);
+    font-size: var(--oh-font-size-sm);
+    background-color: var(--oh-color-surface-inset);
+    padding: var(--oh-spacing-4);
+    border-radius: var(--oh-radius-sm);
+    overflow-x: auto;
+    margin: 0 0 var(--oh-spacing-4);
+  }
+
+  pre code {
+    background: none;
+    padding: 0;
+  }
+
+  /* Text utilities */
+  .oh-text-primary {
+    color: var(--oh-color-text-primary);
+  }
+
+  .oh-text-secondary {
+    color: var(--oh-color-text-secondary);
+  }
+
+  .oh-text-brand {
+    color: var(--oh-color-brand-primary);
+  }
+
+  .oh-text-success {
+    color: var(--oh-color-feedback-success);
+  }
+
+  .oh-text-error {
+    color: var(--oh-color-feedback-error);
+  }
+
+  .oh-text-warning {
+    color: var(--oh-color-feedback-warning);
+  }
+
+  /* Font weight utilities */
+  .oh-font-normal {
+    font-weight: var(--oh-font-weight-normal);
+  }
+
+  .oh-font-medium {
+    font-weight: var(--oh-font-weight-medium);
+  }
+
+  .oh-font-semibold {
+    font-weight: var(--oh-font-weight-semibold);
+  }
+
+  .oh-font-bold {
+    font-weight: var(--oh-font-weight-bold);
+  }
+`;
+/**
+ * Export typography as a CSS string for use outside Lit
+ */
+export const typographyCSS = typographyStyles.cssText;
+//# sourceMappingURL=typography.js.map

package/dist/styles/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../src/styles/typography.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2NlC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,gBAAgB,CAAC,OAAO,CAAC"}

package/package.json

@@ -0,0 +1,140 @@
+{
+  "name": "@orange-halo/components",
+  "version": "1.0.0",
+  "description": "Web Components for Orange Halo Design System",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./oh-accordion.js": {
+      "types": "./dist/oh-accordion.d.ts",
+      "import": "./dist/oh-accordion.js"
+    },
+    "./oh-alert.js": {
+      "types": "./dist/oh-alert.d.ts",
+      "import": "./dist/oh-alert.js"
+    },
+    "./oh-badge.js": {
+      "types": "./dist/oh-badge.d.ts",
+      "import": "./dist/oh-badge.js"
+    },
+    "./oh-breadcrumb.js": {
+      "types": "./dist/oh-breadcrumb.d.ts",
+      "import": "./dist/oh-breadcrumb.js"
+    },
+    "./oh-button.js": {
+      "types": "./dist/oh-button.d.ts",
+      "import": "./dist/oh-button.js"
+    },
+    "./oh-card.js": {
+      "types": "./dist/oh-card.d.ts",
+      "import": "./dist/oh-card.js"
+    },
+    "./oh-checkbox.js": {
+      "types": "./dist/oh-checkbox.d.ts",
+      "import": "./dist/oh-checkbox.js"
+    },
+    "./oh-checkbox-group.js": {
+      "types": "./dist/oh-checkbox-group.d.ts",
+      "import": "./dist/oh-checkbox-group.js"
+    },
+    "./oh-cluster.js": {
+      "types": "./dist/oh-cluster.d.ts",
+      "import": "./dist/oh-cluster.js"
+    },
+    "./oh-container.js": {
+      "types": "./dist/oh-container.d.ts",
+      "import": "./dist/oh-container.js"
+    },
+    "./oh-drawer.js": {
+      "types": "./dist/oh-drawer.d.ts",
+      "import": "./dist/oh-drawer.js"
+    },
+    "./oh-footer.js": {
+      "types": "./dist/oh-footer.d.ts",
+      "import": "./dist/oh-footer.js"
+    },
+    "./oh-grid.js": {
+      "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"
+    },
+    "./oh-input.js": {
+      "types": "./dist/oh-input.d.ts",
+      "import": "./dist/oh-input.js"
+    },
+    "./oh-link.js": {
+      "types": "./dist/oh-link.d.ts",
+      "import": "./dist/oh-link.js"
+    },
+    "./oh-modal.js": {
+      "types": "./dist/oh-modal.d.ts",
+      "import": "./dist/oh-modal.js"
+    },
+    "./oh-navbar.js": {
+      "types": "./dist/oh-navbar.d.ts",
+      "import": "./dist/oh-navbar.js"
+    },
+    "./oh-progress.js": {
+      "types": "./dist/oh-progress.d.ts",
+      "import": "./dist/oh-progress.js"
+    },
+    "./oh-radio.js": {
+      "types": "./dist/oh-radio.d.ts",
+      "import": "./dist/oh-radio.js"
+    },
+    "./oh-radio-group.js": {
+      "types": "./dist/oh-radio-group.d.ts",
+      "import": "./dist/oh-radio-group.js"
+    },
+    "./oh-select.js": {
+      "types": "./dist/oh-select.d.ts",
+      "import": "./dist/oh-select.js"
+    },
+    "./oh-skip-link.js": {
+      "types": "./dist/oh-skip-link.d.ts",
+      "import": "./dist/oh-skip-link.js"
+    },
+    "./oh-stack.js": {
+      "types": "./dist/oh-stack.d.ts",
+      "import": "./dist/oh-stack.js"
+    },
+    "./oh-tabs.js": {
+      "types": "./dist/oh-tabs.d.ts",
+      "import": "./dist/oh-tabs.js"
+    }
+  },
+  "files": [
+    "dist",
+    "custom-elements.json"
+  ],
+  "customElements": "custom-elements.json",
+  "dependencies": {
+    "lit": "^3.2.1"
+  },
+  "peerDependencies": {
+    "@orange-halo/tokens": "^1.0.0",
+    "@orange-halo/utils": "^1.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "clean": "rm -rf dist",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix"
+  }
+}