@orange-halo/components 1.0.0

package/dist/oh-alert.js

@@ -0,0 +1,343 @@
+/**
+ * oh-alert
+ *
+ * A dismissible alert for feedback messages.
+ * Subtle backgrounds only, supports rich content including links.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. SUBTLE ONLY
+ *    - Muted backgrounds, not overwhelming
+ *    - Matches badge subtle variants
+ *
+ * 2. DISMISSIBLE
+ *    - Optional close button
+ *    - Emits event on dismiss
+ *
+ * 3. RICH CONTENT
+ *    - Supports text with links
+ *    - Default slot for flexible content
+ *
+ * 4. ACCESSIBLE
+ *    - role="alert" for important messages
+ *    - Close button has accessible label
+ *    - Links within inherit appropriate styling
+ *
+ * @element oh-alert
+ */
+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 OhAlert = class OhAlert extends OhElement {
+    constructor() {
+        super(...arguments);
+        this.variant = "info";
+        this.dismissible = false;
+        /**
+         * When true, adds role="alert" for screen reader announcement.
+         * Use for dynamically inserted alerts only, not for static page content.
+         */
+        this.live = false;
+    }
+    static { this.styles = [
+        baseStyles,
+        css `
+      /* ═══════════════════════════════════════════════════════════════
+         ORANGE HALO ALERT
+         Subtle • Dismissible • Rich Content
+         ═══════════════════════════════════════════════════════════════ */
+
+      :host {
+        display: block;
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+
+      .alert {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--oh-spacing-3);
+        
+        /* Shape */
+        padding: var(--oh-spacing-4);
+        border-radius: var(--oh-radius-md);
+        
+        /* Chunky border like other components */
+        border: var(--oh-input-base-border-width, 2.5px) solid;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         ICON
+         ═══════════════════════════════════════════════════════════════ */
+
+      .alert-icon {
+        flex-shrink: 0;
+        width: 1.25rem;
+        height: 1.25rem;
+        margin-top: 0.125rem; /* Align with text baseline */
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         CONTENT
+         ═══════════════════════════════════════════════════════════════ */
+
+      .alert-content {
+        flex: 1;
+        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);
+      }
+
+      /* 
+       * Links within alert - dashed underline with shrink animation
+       * Uses background-image approach which works with ::slotted()
+       */
+      .alert-content ::slotted(a) {
+        font-weight: var(--oh-font-weight-semibold);
+        text-decoration: none;
+        background-image: repeating-linear-gradient(
+          to right,
+          currentColor 0,
+          currentColor 4px,
+          transparent 4px,
+          transparent 8px
+        );
+        background-size: 100% 2px;
+        background-position: 0 100%;
+        background-repeat: no-repeat;
+        padding-bottom: 2px;
+        transition: background-size var(--oh-motion-slow, 450ms) ease;
+      }
+
+      .alert-content ::slotted(a:hover) {
+        background-size: 0% 2px;
+        background-position: 100% 100%;
+      }
+
+      .alert-content ::slotted(a:focus-visible) {
+        outline: 2px solid currentColor;
+        outline-offset: 2px;
+        border-radius: 2px;
+        background-image: linear-gradient(currentColor, currentColor);
+        background-size: 100% 2px;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         CLOSE BUTTON
+         ═══════════════════════════════════════════════════════════════ */
+
+      .alert-close {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        gap: var(--oh-spacing-1);
+        
+        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);
+        
+        background: transparent;
+        border: none;
+        border-radius: var(--oh-radius-sm);
+        cursor: pointer;
+        
+        /* Use primary text color for contrast */
+        color: var(--oh-color-text-primary);
+        
+        /* 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;
+      }
+
+      .alert-close:hover {
+        background-color: rgba(0, 0, 0, 0.08);
+        transform: translate(-2px, -2px);
+        box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.15);
+      }
+
+      .alert-close:active {
+        transform: translate(1px, 1px);
+        box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.15);
+      }
+
+      .alert-close:focus-visible {
+        outline: none;
+        text-decoration: underline;
+        text-underline-offset: 3px;
+      }
+
+      .alert-close svg {
+        width: 1rem;
+        height: 1rem;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         VARIANTS (Subtle only)
+         ═══════════════════════════════════════════════════════════════ */
+
+      .alert--success {
+        background-color: var(--oh-color-feedback-success-subtle);
+        border-color: var(--oh-color-feedback-success);
+        color: var(--oh-color-feedback-success);
+      }
+
+      .alert--success .alert-content {
+        color: var(--oh-color-text-primary);
+      }
+
+      .alert--success ::slotted(a),
+      .alert--success a {
+        color: var(--oh-color-feedback-success);
+      }
+
+      .alert--error {
+        background-color: var(--oh-color-feedback-error-subtle);
+        border-color: var(--oh-color-feedback-error);
+        color: var(--oh-color-feedback-error);
+      }
+
+      .alert--error .alert-content {
+        color: var(--oh-color-text-primary);
+      }
+
+      .alert--error ::slotted(a),
+      .alert--error a {
+        color: var(--oh-color-feedback-error);
+      }
+
+      .alert--warning {
+        background-color: var(--oh-color-feedback-warning-subtle);
+        border-color: var(--oh-color-feedback-warning);
+        color: var(--oh-color-feedback-warning);
+      }
+
+      .alert--warning .alert-content {
+        color: var(--oh-color-text-primary);
+      }
+
+      .alert--warning ::slotted(a),
+      .alert--warning a {
+        color: var(--oh-color-feedback-warning);
+      }
+
+      .alert--info {
+        background-color: var(--oh-color-feedback-info-subtle);
+        border-color: var(--oh-color-feedback-info);
+        color: var(--oh-color-feedback-info);
+      }
+
+      .alert--info .alert-content {
+        color: var(--oh-color-text-primary);
+      }
+
+      .alert--info ::slotted(a),
+      .alert--info a {
+        color: var(--oh-color-feedback-info);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         REDUCED MOTION
+         ═══════════════════════════════════════════════════════════════ */
+
+      @media (prefers-reduced-motion: reduce) {
+        .alert-close {
+          transition-duration: 0.01ms !important;
+        }
+      }
+    `,
+    ]; }
+    _handleDismiss() {
+        this.emit("oh-dismiss");
+        this.hidden = true;
+    }
+    _getIcon() {
+        switch (this.variant) {
+            case "success":
+                return html `
+          <svg class="alert-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+          </svg>
+        `;
+            case "error":
+                return html `
+          <svg class="alert-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+          </svg>
+        `;
+            case "warning":
+                return html `
+          <svg class="alert-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+          </svg>
+        `;
+            case "info":
+            default:
+                return html `
+          <svg class="alert-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+          </svg>
+        `;
+        }
+    }
+    render() {
+        const classes = this.classMap({
+            alert: true,
+            [`alert--${this.variant}`]: true,
+        });
+        return html `
+      <div class=${classes} role=${this.live ? "alert" : nothing} part="alert">
+        ${this._getIcon()}
+        
+        <div class="alert-content" part="content">
+          <slot></slot>
+        </div>
+        
+        ${this.dismissible
+            ? html `
+              <button
+                class="alert-close"
+                part="close"
+                type="button"
+                @click=${this._handleDismiss}
+              >
+                <span>Close</span>
+                <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+                </svg>
+              </button>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], OhAlert.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OhAlert.prototype, "dismissible", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OhAlert.prototype, "live", void 0);
+OhAlert = __decorate([
+    customElement("oh-alert")
+], OhAlert);
+export { OhAlert };
+//# sourceMappingURL=oh-alert.js.map

package/dist/oh-alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oh-alert.js","sourceRoot":"","sources":["../src/oh-alert.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;;;;;;;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;AAK3C,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;IAA/B;;QA4NL,YAAO,GAAiB,MAAM,CAAC;QAG/B,gBAAW,GAAG,KAAK,CAAC;QAEpB;;;WAGG;QAEH,SAAI,GAAG,KAAK,CAAC;IAqEf,CAAC;aA1SiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqNF;KACF,AAxNqB,CAwNpB;IAeM,cAAc;QACpB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IAEO,QAAQ;QACd,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,KAAK,SAAS;gBACZ,OAAO,IAAI,CAAA;;;;SAIV,CAAC;YACJ,KAAK,OAAO;gBACV,OAAO,IAAI,CAAA;;;;SAIV,CAAC;YACJ,KAAK,SAAS;gBACZ,OAAO,IAAI,CAAA;;;;SAIV,CAAC;YACJ,KAAK,MAAM,CAAC;YACZ;gBACE,OAAO,IAAI,CAAA;;;;SAIV,CAAC;QACN,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC5B,KAAK,EAAE,IAAI;YACX,CAAC,UAAU,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;SACjC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;mBACI,OAAO,SAAS,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;UACtD,IAAI,CAAC,QAAQ,EAAE;;;;;;UAMf,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA;;;;;yBAKS,IAAI,CAAC,cAAc;;;;;;;aAO/B;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AA9ED;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACX;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACvB;AAOpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAC9B;AAtOF,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA2SnB"}

package/dist/oh-badge.d.ts

@@ -0,0 +1,38 @@
+/**
+ * oh-badge
+ *
+ * A flat, non-interactive badge for status indicators and labels.
+ * Two styles per color: subtle (muted bg) and filled (strong bg).
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. FLAT & NON-INTERACTIVE
+ *    - No shadows, no hover states
+ *    - Pure informational element
+ *    - Not clickable
+ *
+ * 2. TWO INTENSITIES
+ *    - Subtle: muted background, darker text
+ *    - Filled: strong background, white/dark text
+ *
+ * 3. ACCESSIBLE CONTRAST
+ *    - All text meets WCAG AA (4.5:1)
+ *    - Filled variants use appropriate text color
+ *
+ * @element oh-badge
+ */
+import { OhElement } from "./base.js";
+export type BadgeVariant = "success" | "error" | "warning" | "info" | "brand" | "accent";
+export type BadgeType = "subtle" | "filled";
+export declare class OhBadge extends OhElement {
+    static styles: import("lit").CSSResult[];
+    variant: BadgeVariant;
+    type: BadgeType;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "oh-badge": OhBadge;
+    }
+}
+//# sourceMappingURL=oh-badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oh-badge.d.ts","sourceRoot":"","sources":["../src/oh-badge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AACzF,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE5C,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BAgHpB;IAGF,OAAO,EAAE,YAAY,CAAW;IAGhC,IAAI,EAAE,SAAS,CAAY;IAE3B,MAAM;CAcP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/oh-badge.js

@@ -0,0 +1,176 @@
+/**
+ * oh-badge
+ *
+ * A flat, non-interactive badge for status indicators and labels.
+ * Two styles per color: subtle (muted bg) and filled (strong bg).
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. FLAT & NON-INTERACTIVE
+ *    - No shadows, no hover states
+ *    - Pure informational element
+ *    - Not clickable
+ *
+ * 2. TWO INTENSITIES
+ *    - Subtle: muted background, darker text
+ *    - Filled: strong background, white/dark text
+ *
+ * 3. ACCESSIBLE CONTRAST
+ *    - All text meets WCAG AA (4.5:1)
+ *    - Filled variants use appropriate text color
+ *
+ * @element oh-badge
+ */
+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 } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { OhElement, baseStyles } from "./base.js";
+let OhBadge = class OhBadge extends OhElement {
+    constructor() {
+        super(...arguments);
+        this.variant = "brand";
+        this.type = "subtle";
+    }
+    static { this.styles = [
+        baseStyles,
+        css `
+      /* ═══════════════════════════════════════════════════════════════
+         ORANGE HALO BADGE
+         Flat • Non-interactive • Informational
+         ═══════════════════════════════════════════════════════════════ */
+
+      :host {
+        display: inline-block;
+      }
+
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        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);
+        
+        /* Shape */
+        padding: var(--oh-spacing-1) var(--oh-spacing-2-5);
+        border-radius: var(--oh-radius-sm);
+        
+        /* No interaction */
+        pointer-events: none;
+        user-select: none;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         SUBTLE VARIANTS (muted background)
+         ═══════════════════════════════════════════════════════════════ */
+
+      .badge--subtle.badge--success {
+        background-color: var(--oh-color-feedback-success-subtle);
+        color: var(--oh-color-feedback-success);
+      }
+
+      .badge--subtle.badge--error {
+        background-color: var(--oh-color-feedback-error-subtle);
+        color: var(--oh-color-feedback-error);
+      }
+
+      .badge--subtle.badge--warning {
+        background-color: var(--oh-color-feedback-warning-subtle);
+        color: var(--oh-color-feedback-warning);
+      }
+
+      .badge--subtle.badge--info {
+        background-color: var(--oh-color-feedback-info-subtle);
+        color: var(--oh-color-feedback-info);
+      }
+
+      .badge--subtle.badge--brand {
+        background-color: var(--oh-color-brand-subtle);
+        color: var(--oh-color-brand-primary);
+      }
+
+      .badge--subtle.badge--accent {
+        background-color: var(--oh-color-accent-subtle);
+        color: var(--oh-color-accent-default);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         FILLED VARIANTS (strong background)
+         ═══════════════════════════════════════════════════════════════ */
+
+      .badge--filled.badge--success {
+        background-color: var(--oh-color-feedback-success);
+        color: var(--oh-color-surface-white);
+      }
+
+      .badge--filled.badge--error {
+        background-color: var(--oh-color-feedback-error);
+        color: var(--oh-color-surface-white);
+      }
+
+      .badge--filled.badge--warning {
+        background-color: var(--oh-color-feedback-warning);
+        color: var(--oh-color-surface-white);
+      }
+
+      .badge--filled.badge--info {
+        background-color: var(--oh-color-feedback-info);
+        color: var(--oh-color-surface-white);
+      }
+
+      .badge--filled.badge--brand {
+        background-color: var(--oh-color-brand-primary);
+        color: var(--oh-color-text-on-brand);
+      }
+
+      .badge--filled.badge--accent {
+        background-color: var(--oh-color-accent-default);
+        color: var(--oh-color-text-on-accent);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         ICON SUPPORT
+         ═══════════════════════════════════════════════════════════════ */
+
+      ::slotted(svg),
+      ::slotted([slot="icon"]) {
+        width: 1em;
+        height: 1em;
+        flex-shrink: 0;
+      }
+    `,
+    ]; }
+    render() {
+        const classes = this.classMap({
+            badge: true,
+            [`badge--${this.variant}`]: true,
+            [`badge--${this.type}`]: true,
+        });
+        return html `
+      <span class=${classes} part="badge">
+        <slot name="icon"></slot>
+        <slot></slot>
+      </span>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], OhBadge.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], OhBadge.prototype, "type", void 0);
+OhBadge = __decorate([
+    customElement("oh-badge")
+], OhBadge);
+export { OhBadge };
+//# sourceMappingURL=oh-badge.js.map

package/dist/oh-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oh-badge.js","sourceRoot":"","sources":["../src/oh-badge.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;AAM3C,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;IAA/B;;QAoHL,YAAO,GAAiB,OAAO,CAAC;QAGhC,SAAI,GAAc,QAAQ,CAAC;IAgB7B,CAAC;aAtIiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6GF;KACF,AAhHqB,CAgHpB;IAQF,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC5B,KAAK,EAAE,IAAI;YACX,CAAC,UAAU,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YAChC,CAAC,UAAU,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;SAC9B,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACK,OAAO;;;;KAItB,CAAC;IACJ,CAAC;;AAlBD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACV;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCACf;AAvHhB,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAuInB"}

package/dist/oh-breadcrumb.d.ts

@@ -0,0 +1,39 @@
+/**
+ * oh-breadcrumb
+ *
+ * Accessible breadcrumb navigation with responsive collapse.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. SEMANTIC STRUCTURE
+ *    - <nav> with aria-label="Breadcrumb"
+ *    - <ol> for ordered list semantics
+ *    - aria-current="page" on last item
+ *
+ * 2. REUSES EXISTING STYLES
+ *    - Link styles match oh-link (dashed underline, shrink animation)
+ *    - Typography and spacing from tokens
+ *
+ * 3. RESPONSIVE
+ *    - Desktop: Full breadcrumb trail
+ *    - Mobile (<640px): Collapses to "← Back to [parent]"
+ *
+ * @element oh-breadcrumb
+ */
+import { nothing } from "lit";
+import { OhElement } from "./base.js";
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+export declare class OhBreadcrumb extends OhElement {
+    static styles: import("lit").CSSResult[];
+    items: BreadcrumbItem[];
+    render(): typeof nothing | import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "oh-breadcrumb": OhBreadcrumb;
+    }
+}
+//# sourceMappingURL=oh-breadcrumb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oh-breadcrumb.d.ts","sourceRoot":"","sources":["../src/oh-breadcrumb.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,qBACa,YAAa,SAAQ,SAAS;IACzC,OAAgB,MAAM,4BA8LpB;IAGF,KAAK,EAAE,cAAc,EAAE,CAAM;IAE7B,MAAM;CA4CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}