@orange-halo/components 1.0.0

package/dist/oh-breadcrumb.js

@@ -0,0 +1,277 @@
+/**
+ * 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
+ */
+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 OhBreadcrumb = class OhBreadcrumb extends OhElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+    }
+    static { this.styles = [
+        baseStyles,
+        css `
+      /* ═══════════════════════════════════════════════════════════════
+         ORANGE HALO BREADCRUMB
+         Semantic • Responsive • Accessible
+         ═══════════════════════════════════════════════════════════════ */
+
+      :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);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         BREADCRUMB LIST
+         ═══════════════════════════════════════════════════════════════ */
+
+      .breadcrumb-list {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--oh-spacing-2);
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      .breadcrumb-item {
+        display: flex;
+        align-items: center;
+        gap: var(--oh-spacing-2);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         SEPARATOR
+         ═══════════════════════════════════════════════════════════════ */
+
+      .breadcrumb-separator {
+        color: var(--oh-color-text-secondary);
+        user-select: none;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         LINKS — Reusing oh-link inline styles
+         ═══════════════════════════════════════════════════════════════ */
+
+      .breadcrumb-link {
+        position: relative;
+        display: inline-block;
+        color: var(--oh-color-text-link);
+        text-decoration: none;
+        padding-bottom: 2px;
+      }
+
+      .breadcrumb-link::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: 2px;
+        background-image: repeating-linear-gradient(
+          to right,
+          var(--oh-color-text-link) 0,
+          var(--oh-color-text-link) 4px,
+          transparent 4px,
+          transparent 8px
+        );
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        transform-origin: right;
+        transition: transform var(--oh-motion-relaxed, 300ms) var(--oh-motion-ease-gentle, ease);
+      }
+
+      .breadcrumb-link:hover::after {
+        transform: scaleX(0);
+      }
+
+      .breadcrumb-link:focus-visible {
+        outline: none;
+        background-color: var(--oh-color-surface-hover);
+        border-radius: var(--oh-radius-xs);
+        padding: 0 2px 2px 2px;
+        margin: 0 -2px;
+      }
+
+      .breadcrumb-link:focus-visible::after {
+        background-image: none;
+        background-color: var(--oh-color-brand-primary);
+        height: 2px;
+        transform: scaleX(1);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         CURRENT PAGE
+         ═══════════════════════════════════════════════════════════════ */
+
+      .breadcrumb-current {
+        color: var(--oh-color-text-primary);
+        font-weight: var(--oh-font-weight-medium);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         MOBILE BACK LINK
+         ═══════════════════════════════════════════════════════════════ */
+
+      .breadcrumb-back {
+        display: none;
+      }
+
+      .back-link {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        gap: var(--oh-spacing-1);
+        color: var(--oh-color-text-link);
+        text-decoration: none;
+        padding-bottom: 2px;
+      }
+
+      .back-link::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: 2px;
+        background-image: repeating-linear-gradient(
+          to right,
+          var(--oh-color-text-link) 0,
+          var(--oh-color-text-link) 4px,
+          transparent 4px,
+          transparent 8px
+        );
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        transform-origin: right;
+        transition: transform var(--oh-motion-relaxed, 300ms) var(--oh-motion-ease-gentle, ease);
+      }
+
+      .back-link:hover::after {
+        transform: scaleX(0);
+      }
+
+      .back-link:focus-visible {
+        outline: none;
+        background-color: var(--oh-color-surface-hover);
+        border-radius: var(--oh-radius-xs);
+        padding: 0 2px 2px 2px;
+        margin: 0 -2px;
+      }
+
+      .back-link:focus-visible::after {
+        background-image: none;
+        background-color: var(--oh-color-brand-primary);
+        height: 2px;
+        transform: scaleX(1);
+      }
+
+      .back-arrow {
+        flex-shrink: 0;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         RESPONSIVE — Mobile collapse
+         ═══════════════════════════════════════════════════════════════ */
+
+      @media (max-width: 639px) {
+        .breadcrumb-list {
+          display: none;
+        }
+
+        .breadcrumb-back {
+          display: block;
+        }
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         REDUCED MOTION
+         ═══════════════════════════════════════════════════════════════ */
+
+      @media (prefers-reduced-motion: reduce) {
+        .breadcrumb-link::after,
+        .back-link::after {
+          transition-duration: 0.01ms !important;
+        }
+      }
+    `,
+    ]; }
+    render() {
+        if (this.items.length === 0) {
+            return nothing;
+        }
+        const parentItem = this.items.length > 1 ? this.items[this.items.length - 2] : null;
+        return html `
+      <nav aria-label="Breadcrumb">
+        <!-- Desktop: Full breadcrumb -->
+        <ol class="breadcrumb-list">
+          ${this.items.map((item, index) => {
+            const isLast = index === this.items.length - 1;
+            const showSeparator = index < this.items.length - 1;
+            return html `
+              <li class="breadcrumb-item">
+                ${isLast
+                ? html `<span class="breadcrumb-current" aria-current="page">${item.label}</span>`
+                : html `<a class="breadcrumb-link" href=${item.href || "#"}>${item.label}</a>`}
+                ${showSeparator
+                ? html `<span class="breadcrumb-separator" aria-hidden="true">/</span>`
+                : nothing}
+              </li>
+            `;
+        })}
+        </ol>
+
+        <!-- Mobile: Back link -->
+        ${parentItem
+            ? html `
+              <div class="breadcrumb-back">
+                <a class="back-link" href=${parentItem.href || "#"}>
+                  <svg class="back-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M10 12L6 8L10 4" />
+                  </svg>
+                  <span>Back to ${parentItem.label}</span>
+                </a>
+              </div>
+            `
+            : nothing}
+      </nav>
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], OhBreadcrumb.prototype, "items", void 0);
+OhBreadcrumb = __decorate([
+    customElement("oh-breadcrumb")
+], OhBreadcrumb);
+export { OhBreadcrumb };
+//# sourceMappingURL=oh-breadcrumb.js.map

package/dist/oh-breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oh-breadcrumb.js","sourceRoot":"","sources":["../src/oh-breadcrumb.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;;;;;;;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;AAQ3C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,SAAS;IAApC;;QAkML,UAAK,GAAqB,EAAE,CAAC;IA8C/B,CAAC;aA/OiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2LF;KACF,AA9LqB,CA8LpB;IAKF,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC5B,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAEpF,OAAO,IAAI,CAAA;;;;YAIH,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC/B,MAAM,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YAC/C,MAAM,aAAa,GAAG,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YAEpD,OAAO,IAAI,CAAA;;kBAEL,MAAM;gBACN,CAAC,CAAC,IAAI,CAAA,wDAAwD,IAAI,CAAC,KAAK,SAAS;gBACjF,CAAC,CAAC,IAAI,CAAA,mCAAmC,IAAI,CAAC,IAAI,IAAI,GAAG,IAAI,IAAI,CAAC,KAAK,MAAM;kBAC7E,aAAa;gBACb,CAAC,CAAC,IAAI,CAAA,gEAAgE;gBACtE,CAAC,CAAC,OAAO;;aAEd,CAAC;QACJ,CAAC,CAAC;;;;UAIF,UAAU;YACV,CAAC,CAAC,IAAI,CAAA;;4CAE4B,UAAU,CAAC,IAAI,IAAI,GAAG;;;;kCAIhC,UAAU,CAAC,KAAK;;;aAGrC;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AA7CD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CACG;AAlMlB,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAgPxB"}

package/dist/oh-button.d.ts

@@ -0,0 +1,62 @@
+/**
+ * oh-button
+ *
+ * A chunky, confident button with playful personality.
+ * Inspired by hand-crafted, illustrative UI — not corporate SaaS.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. CHUNKY & CONFIDENT
+ *    - Thick border (2px) that feels illustrative
+ *    - Solid fills, no subtle gradients
+ *    - Generous padding, substantial presence
+ *
+ * 2. OFFSET SHADOW (STICKER EFFECT)
+ *    - Shadow offset to bottom-right
+ *    - Feels like a physical sticker or stamp
+ *    - Not a generic centered drop shadow
+ *
+ * 3. PLAYFUL INTERACTIONS
+ *    - Hover: slight upward lift + shadow grows
+ *    - Active: pressed down, shadow shrinks (stamp effect)
+ *    - Focus: warm glow + accessible underline
+ *
+ * 4. HAND-CRAFTED FEEL
+ *    - Bold, defined edges
+ *    - Confident color choices
+ *    - Personality over polish
+ *
+ * @element oh-button
+ */
+import { OhElement } from "./base.js";
+export type ButtonVariant = "primary" | "secondary" | "accent";
+export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonState = "default" | "hover" | "active" | "focus";
+export declare class OhButton extends OhElement {
+    static styles: import("lit").CSSResult[];
+    variant: ButtonVariant;
+    size: ButtonSize;
+    loading: boolean;
+    iconOnly: boolean;
+    /**
+     * Force a visual state (for documentation/Figma sync only)
+     * Values: 'hover' | 'active' | 'focus'
+     */
+    forceState: ButtonState;
+    /** When provided, renders as an anchor tag instead of a button */
+    href?: string;
+    /** Target for the link (e.g., "_blank" for new tab) */
+    target?: string;
+    private _handleClick;
+    /** Focus the internal button/anchor element */
+    focus(options?: FocusOptions): void;
+    /** Blur the internal button/anchor element */
+    blur(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "oh-button": OhButton;
+    }
+}
+//# sourceMappingURL=oh-button.d.ts.map

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

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

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=oh-button.figma.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oh-button.figma.d.ts","sourceRoot":"","sources":["../src/oh-button.figma.ts"],"names":[],"mappings":""}

package/dist/oh-button.figma.js

@@ -0,0 +1,20 @@
+import figma, { html } from "@figma/code-connect/html";
+/**
+ * Code Connect for oh-button
+ */
+figma.connect("https://www.figma.com/design/q9ZYrOj2w9DrTVmgQFU7bu/OHDS?node-id=1-21", {
+    props: {
+        variant: figma.enum("Variant", {
+            Primary: "primary",
+            Secondary: "secondary",
+            Accent: "accent",
+        }),
+        label: figma.string("Label"),
+    },
+    example: (props) => html `
+      <oh-button variant="${props.variant}">
+        ${props.label}
+      </oh-button>
+    `,
+});
+//# sourceMappingURL=oh-button.figma.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oh-button.figma.js","sourceRoot":"","sources":["../src/oh-button.figma.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEvD;;GAEG;AAEH,KAAK,CAAC,OAAO,CACX,uEAAuE,EACvE;IACE,KAAK,EAAE;QACL,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE;YAC7B,OAAO,EAAE,SAAS;YAClB,SAAS,EAAE,WAAW;YACtB,MAAM,EAAE,QAAQ;SACjB,CAAC;QACF,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;KAC7B;IACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;4BACA,KAAK,CAAC,OAAO;UAC/B,KAAK,CAAC,KAAK;;KAEhB;CACF,CACF,CAAC"}