@orange-halo/components 1.0.0

package/dist/oh-card.js

@@ -0,0 +1,340 @@
+/**
+ * oh-card
+ *
+ * A tactile, raised surface with visible frame.
+ * Designed with the same layered construction as oh-button.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. LAYERED CONSTRUCTION
+ *    - Surface: subtle gradient for depth
+ *    - Border: visible warm edge
+ *    - Inner highlight: sunlit top edge
+ *    - Outer shadow: soft, slightly offset
+ *
+ * 2. RETRO-MODERN DETAILS
+ *    - Warm, tactile shadows (never harsh)
+ *    - Visible border that warms on hover
+ *    - Subtle gradient background
+ *
+ * 3. VARIANTS
+ *    - Raised: default with layered depth
+ *    - Sunlit: featured with warm gradient
+ *    - Flat: border-only, minimal shadow
+ *
+ * @element oh-card
+ */
+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 OhCard = class OhCard extends OhElement {
+    constructor() {
+        super(...arguments);
+        this.variant = "raised";
+        this.interactive = false;
+        this.padding = "md";
+    }
+    static { this.styles = [
+        baseStyles,
+        css `
+      /* ═══════════════════════════════════════════════════════════════
+         ORANGE HALO CARD
+         Tactile • Layered • Warm • Personal
+         ═══════════════════════════════════════════════════════════════ */
+
+      :host {
+        display: block;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         BASE CARD
+         Layered construction — feels like a physical object
+         ═══════════════════════════════════════════════════════════════ */
+
+      .card {
+        /* Shape: friendly rounded corners */
+        border-radius: var(--oh-radius-lg);
+        overflow: hidden;
+        
+        transition: 
+          transform var(--oh-motion-gentle) var(--oh-motion-ease-gentle),
+          box-shadow var(--oh-motion-gentle) var(--oh-motion-ease-gentle),
+          border-color var(--oh-motion-gentle) var(--oh-motion-ease-gentle);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         RAISED VARIANT (Default)
+         Subtle gradient surface with layered shadows
+         ═══════════════════════════════════════════════════════════════ */
+
+      .card--raised {
+        /* Surface: subtle gradient for depth */
+        background: linear-gradient(
+          180deg,
+          #FFFFFF 0%,
+          #FAF7F2 40%,
+          #F5F0E8 100%
+        );
+        
+        /* Border: visible warm edge */
+        border: 1px solid #E2D5C8;
+        
+        /* Layered shadows:
+           1. Outer: soft, offset shadow (tactile)
+           2. Deeper: ambient depth
+           3. Inner top: sunlit highlight */
+        box-shadow:
+          0 2px 6px rgba(61, 50, 41, 0.08),
+          0 6px 16px rgba(61, 50, 41, 0.05),
+          inset 0 1px 0 rgba(255, 255, 255, 0.8);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         SUNLIT VARIANT
+         Featured content with warm gradient and glow
+         ═══════════════════════════════════════════════════════════════ */
+
+      .card--sunlit {
+        /* Surface: warm sunlit gradient */
+        background: linear-gradient(
+          180deg,
+          #FFFBF5 0%,
+          #FDF6EE 30%,
+          #F8EFE4 100%
+        );
+        
+        /* Border: warm tinted edge */
+        border: 1px solid rgba(197, 67, 0, 0.2);
+        
+        /* Layered shadows with warm glow */
+        box-shadow:
+          0 2px 8px rgba(139, 69, 19, 0.08),
+          0 8px 24px rgba(139, 69, 19, 0.06),
+          0 0 20px rgba(197, 67, 0, 0.04),
+          inset 0 1px 0 rgba(255, 255, 255, 0.9);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         FLAT VARIANT
+         Border-only, minimal shadow — still layered
+         ═══════════════════════════════════════════════════════════════ */
+
+      .card--flat {
+        /* Surface: subtle gradient */
+        background: linear-gradient(
+          180deg,
+          #FAFAF8 0%,
+          #F5F2EE 100%
+        );
+        
+        /* Border: visible edge */
+        border: 1px solid #E2DCD2;
+        
+        /* Minimal shadow */
+        box-shadow:
+          0 1px 2px rgba(61, 50, 41, 0.04),
+          inset 0 1px 0 rgba(255, 255, 255, 0.6);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         INTERACTIVE STATES
+         Hover lifts, focus shows warm glow
+         ═══════════════════════════════════════════════════════════════ */
+
+      .card--interactive {
+        cursor: pointer;
+      }
+
+      /* Hover: warm light, lifted */
+      .card--interactive.card--raised:hover {
+        border-color: var(--oh-color-warm-dune);
+        box-shadow:
+          0 4px 12px rgba(61, 50, 41, 0.1),
+          0 12px 28px rgba(61, 50, 41, 0.08),
+          inset 0 1px 0 rgba(255, 255, 255, 0.9);
+        transform: translateY(-2px);
+      }
+
+      .card--interactive.card--sunlit:hover {
+        border-color: rgba(197, 67, 0, 0.35);
+        box-shadow:
+          0 4px 12px rgba(139, 69, 19, 0.12),
+          0 12px 32px rgba(139, 69, 19, 0.08),
+          0 0 28px rgba(197, 67, 0, 0.06),
+          inset 0 1px 0 rgba(255, 255, 255, 1);
+        transform: translateY(-2px);
+      }
+
+      .card--interactive.card--flat:hover {
+        border-color: var(--oh-color-warm-dune);
+        box-shadow:
+          0 2px 6px rgba(61, 50, 41, 0.08),
+          0 6px 16px rgba(61, 50, 41, 0.05),
+          inset 0 1px 0 rgba(255, 255, 255, 0.8);
+        transform: translateY(-1px);
+      }
+
+      /* Active: pressed */
+      .card--interactive:active {
+        transform: translateY(0) !important;
+      }
+
+      .card--interactive.card--raised:active {
+        box-shadow:
+          0 1px 3px rgba(61, 50, 41, 0.1),
+          0 3px 8px rgba(61, 50, 41, 0.06),
+          inset 0 1px 2px rgba(61, 50, 41, 0.04);
+      }
+
+      /* Focus: warm glow ring */
+      .card--interactive:focus-visible {
+        outline: none;
+      }
+
+      .card--interactive.card--raised:focus-visible,
+      .card--interactive.card--flat:focus-visible {
+        border-color: var(--oh-color-brand-primary);
+        box-shadow:
+          0 0 0 3px rgba(197, 67, 0, 0.25),
+          0 0 16px rgba(197, 67, 0, 0.1),
+          0 2px 6px rgba(61, 50, 41, 0.08),
+          inset 0 1px 0 rgba(255, 255, 255, 0.8);
+      }
+
+      .card--interactive.card--sunlit:focus-visible {
+        border-color: rgba(197, 67, 0, 0.5);
+        box-shadow:
+          0 0 0 3px rgba(197, 67, 0, 0.3),
+          0 0 20px rgba(197, 67, 0, 0.15),
+          0 2px 8px rgba(139, 69, 19, 0.08),
+          inset 0 1px 0 rgba(255, 255, 255, 0.9);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         PADDING VARIANTS
+         ═══════════════════════════════════════════════════════════════ */
+
+      .card--padding-sm .content { padding: var(--oh-spacing-3-5); }
+      .card--padding-md .content { padding: var(--oh-spacing-5); }
+      .card--padding-lg .content { padding: var(--oh-spacing-7); }
+
+      /* ═══════════════════════════════════════════════════════════════
+         SLOTS: Header, Content, Footer
+         ═══════════════════════════════════════════════════════════════ */
+
+      .header {
+        padding: var(--oh-spacing-4) var(--oh-spacing-5);
+        border-bottom: 1px solid rgba(226, 213, 200, 0.6);
+        background: linear-gradient(
+          180deg,
+          rgba(255, 255, 255, 0.5) 0%,
+          rgba(255, 255, 255, 0) 100%
+        );
+      }
+
+      .header:empty { display: none; }
+
+      .content {
+        /* Padding handled by variant */
+      }
+
+      .footer {
+        padding: var(--oh-spacing-4) var(--oh-spacing-5);
+        border-top: 1px solid rgba(226, 213, 200, 0.6);
+        background: linear-gradient(
+          180deg,
+          var(--oh-color-surface-raised) 0%,
+          var(--oh-color-surface-inset) 100%
+        );
+      }
+
+      .footer:empty { display: none; }
+
+      /* Padding adjustments for slots */
+      .card--padding-sm .header,
+      .card--padding-sm .footer {
+        padding: var(--oh-spacing-2-5) var(--oh-spacing-3-5);
+      }
+
+      .card--padding-lg .header,
+      .card--padding-lg .footer {
+        padding: var(--oh-spacing-5) var(--oh-spacing-7);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         REDUCED MOTION
+         ═══════════════════════════════════════════════════════════════ */
+
+      @media (prefers-reduced-motion: reduce) {
+        .card {
+          transition-duration: 0.01ms !important;
+        }
+        
+        .card--interactive:hover {
+          transform: none !important;
+        }
+      }
+    `,
+    ]; }
+    _handleClick(event) {
+        if (this.interactive) {
+            this.emit("oh-click", { originalEvent: event });
+        }
+    }
+    _handleKeyDown(event) {
+        if (this.interactive && (event.key === "Enter" || event.key === " ")) {
+            event.preventDefault();
+            this._handleClick(event);
+        }
+    }
+    render() {
+        const classes = this.classMap({
+            card: true,
+            [`card--${this.variant}`]: true,
+            [`card--padding-${this.padding}`]: true,
+            "card--interactive": this.interactive,
+        });
+        return html `
+      <div
+        part="card"
+        class=${classes}
+        role=${this.interactive ? "button" : nothing}
+        tabindex=${this.interactive ? "0" : nothing}
+        @click=${this._handleClick}
+        @keydown=${this._handleKeyDown}
+      >
+        <div class="header" part="header">
+          <slot name="header"></slot>
+        </div>
+        
+        <div class="content" part="content">
+          <slot></slot>
+        </div>
+        
+        <div class="footer" part="footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], OhCard.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OhCard.prototype, "interactive", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], OhCard.prototype, "padding", void 0);
+OhCard = __decorate([
+    customElement("oh-card")
+], OhCard);
+export { OhCard };
+//# sourceMappingURL=oh-card.js.map

package/dist/oh-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oh-card.js","sourceRoot":"","sources":["../src/oh-card.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;AAM3C,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAA9B;;QAqPL,YAAO,GAAgB,QAAQ,CAAC;QAGhC,gBAAW,GAAG,KAAK,CAAC;QAGpB,YAAO,GAAgB,IAAI,CAAC;IA8C9B,CAAC;aAxSiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8OF;KACF,AAjPqB,CAiPpB;IAWM,YAAY,CAAC,KAAiB;QACpC,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,CAAC;QAClD,CAAC;IACH,CAAC;IAEO,cAAc,CAAC,KAAoB;QACzC,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC;YACrE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,YAAY,CAAC,KAA8B,CAAC,CAAC;QACpD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC5B,IAAI,EAAE,IAAI;YACV,CAAC,SAAS,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YAC/B,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YACvC,mBAAmB,EAAE,IAAI,CAAC,WAAW;SACtC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;;;gBAGC,OAAO;eACR,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;mBACjC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO;iBAClC,IAAI,CAAC,YAAY;mBACf,IAAI,CAAC,cAAc;;;;;;;;;;;;;;KAcjC,CAAC;IACJ,CAAC;;AAnDD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACV;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACvB;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACd;AA3PjB,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAySlB"}

package/dist/oh-checkbox-group.d.ts

@@ -0,0 +1,39 @@
+/**
+ * oh-checkbox-group
+ *
+ * A checkbox group with proper semantics and group-level error handling.
+ * For single checkboxes, use oh-checkbox directly.
+ *
+ * ACCESSIBILITY:
+ * ─────────────
+ * - Uses <fieldset> and <legend> for proper semantics
+ * - Group-level error messaging with aria-describedby
+ * - Visible focus ring (outline, not inset)
+ * - aria-invalid for error state
+ *
+ * @element oh-checkbox-group
+ */
+import { OhElement } from "./base.js";
+export interface CheckboxOption {
+    label: string;
+    value: string;
+    checked?: boolean;
+}
+export declare class OhCheckboxGroup extends OhElement {
+    static styles: import("lit").CSSResult[];
+    legend: string;
+    name: string;
+    options: CheckboxOption[];
+    value: string[];
+    required: boolean;
+    error: boolean;
+    errorMessage: string;
+    private _handleChange;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "oh-checkbox-group": OhCheckboxGroup;
+    }
+}
+//# sourceMappingURL=oh-checkbox-group.d.ts.map

package/dist/oh-checkbox-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"oh-checkbox-group.d.ts","sourceRoot":"","sources":["../src/oh-checkbox-group.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,qBACa,eAAgB,SAAQ,SAAS;IAC5C,OAAgB,MAAM,4BAgMpB;IAGF,MAAM,SAAM;IAGZ,IAAI,SAAM;IAGV,OAAO,EAAE,cAAc,EAAE,CAAM;IAG/B,KAAK,EAAE,MAAM,EAAE,CAAM;IAGrB,QAAQ,UAAS;IAGjB,KAAK,UAAS;IAGd,YAAY,SAAM;IAElB,OAAO,CAAC,aAAa;IAYrB,MAAM;CA8CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/oh-checkbox-group.figma.d.ts

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

package/dist/oh-checkbox-group.figma.d.ts.map

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

package/dist/oh-checkbox-group.figma.js

@@ -0,0 +1,24 @@
+import figma, { html } from "@figma/code-connect/html";
+/**
+ * Code Connect for oh-checkbox-group
+ *
+ * Replace the Figma URL below with your actual component URL.
+ */
+figma.connect("https://www.figma.com/design/q9ZYrOj2w9DrTVmgQFU7bu/OHDS?node-id=1-77", {
+    props: {
+        legend: figma.string("Legend"),
+        required: figma.boolean("Required"),
+        error: figma.boolean("Error"),
+        errorMessage: figma.string("Error Message"),
+    },
+    example: (props) => html `
+      <oh-checkbox-group
+        legend="${props.legend}"
+        ?required="${props.required}"
+        ?error="${props.error}"
+        error-message="${props.errorMessage}"
+        .options="\${options}"
+      ></oh-checkbox-group>
+    `,
+});
+//# sourceMappingURL=oh-checkbox-group.figma.js.map

package/dist/oh-checkbox-group.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oh-checkbox-group.figma.js","sourceRoot":"","sources":["../src/oh-checkbox-group.figma.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEvD;;;;GAIG;AAEH,KAAK,CAAC,OAAO,CACX,uEAAuE,EACvE;IACE,KAAK,EAAE;QACL,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;QAC9B,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC;QACnC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;QAC7B,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,eAAe,CAAC;KAC5C;IACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;kBAEV,KAAK,CAAC,MAAM;qBACT,KAAK,CAAC,QAAQ;kBACjB,KAAK,CAAC,KAAK;yBACJ,KAAK,CAAC,YAAY;;;KAGtC;CACF,CACF,CAAC"}