@orange-halo/components 1.0.0

package/dist/oh-input.d.ts

@@ -0,0 +1,56 @@
+/**
+ * oh-input
+ *
+ * A chunky, inset input field that feels pressed into the page.
+ * On focus, it rises to meet you.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. CHUNKY & CONFIDENT
+ *    - Thick border (2.5px) that feels illustrative
+ *    - Solid fill, no subtle gradients
+ *    - 10px rounded corners (matches button)
+ *
+ * 2. INSET SHADOW (PRESSED IN)
+ *    - Shadow offset to top-left (inset)
+ *    - Feels pressed into the surface
+ *    - Opposite of button's outset sticker effect
+ *
+ * 3. FOCUS RISES UP
+ *    - Inset shadow disappears
+ *    - Outset shadow appears (field lifts)
+ *    - Border turns marmalade
+ *    - Clear visual hierarchy
+ *
+ * @element oh-input
+ */
+import { OhElement } from "./base.js";
+export type InputType = "text" | "email" | "password" | "search" | "tel" | "url";
+export type InputState = "default" | "hover" | "focus";
+export declare class OhInput extends OhElement {
+    static styles: import("lit").CSSResult[];
+    type: InputType;
+    value: string;
+    placeholder: string;
+    label: string;
+    helperText: string;
+    errorText: string;
+    required: boolean;
+    /**
+     * Force a visual state (for documentation/Figma sync only)
+     * Values: 'hover' | 'focus'
+     */
+    forceState: InputState;
+    private _input;
+    private _handleInput;
+    private _handleChange;
+    focus(): void;
+    blur(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "oh-input": OhInput;
+    }
+}
+//# sourceMappingURL=oh-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oh-input.d.ts","sourceRoot":"","sources":["../src/oh-input.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;AACjF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAEvD,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BAoKpB;IAGF,IAAI,EAAE,SAAS,CAAU;IAGzB,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,KAAK,SAAM;IAGX,UAAU,SAAM;IAGhB,SAAS,SAAM;IAGf,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,UAAU,EAAE,UAAU,CAAa;IAGnC,OAAO,CAAC,MAAM,CAAoB;IAElC,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,aAAa;IAIrB,KAAK;IAIL,IAAI;IAIJ,MAAM;CA2DP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

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

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

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

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

package/dist/oh-input.figma.js

@@ -0,0 +1,36 @@
+import figma, { html } from "@figma/code-connect/html";
+/**
+ * Code Connect for oh-input
+ *
+ * Figma Properties:
+ * - Label (text): Field label
+ * - Value (text): Input content
+ * - Show Placeholder (boolean): Whether to show placeholder
+ * - Placeholder (text): Placeholder text when empty
+ * - Helper Text (text): Help text below input
+ * - Error Text (text): Error message (triggers error styling when set)
+ * - Required (boolean): Shows asterisk on label
+ * - State (variant): Default, Hover, Focus
+ */
+figma.connect("https://www.figma.com/design/q9ZYrOj2w9DrTVmgQFU7bu/OHDS?node-id=1-40", {
+    props: {
+        label: figma.string("Label"),
+        value: figma.string("Value"),
+        showPlaceholder: figma.boolean("Show Placeholder"),
+        placeholder: figma.string("Placeholder"),
+        required: figma.boolean("Required"),
+        helperText: figma.string("Helper Text"),
+        errorText: figma.string("Error Text"),
+    },
+    example: (props) => html `
+      <oh-input
+        label="${props.label}"
+        value="${props.value}"
+        placeholder="${props.showPlaceholder ? props.placeholder : ""}"
+        ?required="${props.required}"
+        helper-text="${props.helperText}"
+        error-text="${props.errorText}"
+      ></oh-input>
+    `,
+});
+//# sourceMappingURL=oh-input.figma.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oh-input.figma.js","sourceRoot":"","sources":["../src/oh-input.figma.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEvD;;;;;;;;;;;;GAYG;AAEH,KAAK,CAAC,OAAO,CACX,uEAAuE,EACvE;IACE,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5B,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC;QAClD,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;QACxC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC;QACnC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;QACvC,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC;KACtC;IACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;iBAEX,KAAK,CAAC,KAAK;iBACX,KAAK,CAAC,KAAK;uBACL,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;qBAChD,KAAK,CAAC,QAAQ;uBACZ,KAAK,CAAC,UAAU;sBACjB,KAAK,CAAC,SAAS;;KAEhC;CACF,CACF,CAAC"}

package/dist/oh-input.js

@@ -0,0 +1,320 @@
+/**
+ * oh-input
+ *
+ * A chunky, inset input field that feels pressed into the page.
+ * On focus, it rises to meet you.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. CHUNKY & CONFIDENT
+ *    - Thick border (2.5px) that feels illustrative
+ *    - Solid fill, no subtle gradients
+ *    - 10px rounded corners (matches button)
+ *
+ * 2. INSET SHADOW (PRESSED IN)
+ *    - Shadow offset to top-left (inset)
+ *    - Feels pressed into the surface
+ *    - Opposite of button's outset sticker effect
+ *
+ * 3. FOCUS RISES UP
+ *    - Inset shadow disappears
+ *    - Outset shadow appears (field lifts)
+ *    - Border turns marmalade
+ *    - Clear visual hierarchy
+ *
+ * @element oh-input
+ */
+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, query } from "lit/decorators.js";
+import { OhElement, baseStyles } from "./base.js";
+let OhInput = class OhInput extends OhElement {
+    constructor() {
+        super(...arguments);
+        this.type = "text";
+        this.value = "";
+        this.placeholder = "";
+        this.label = "";
+        this.helperText = "";
+        this.errorText = "";
+        this.required = false;
+        /**
+         * Force a visual state (for documentation/Figma sync only)
+         * Values: 'hover' | 'focus'
+         */
+        this.forceState = "default";
+    }
+    static { this.styles = [
+        baseStyles,
+        css `
+      /* ═══════════════════════════════════════════════════════════════
+         ORANGE HALO INPUT
+         Chunky • Inset • Rises on Focus
+         ═══════════════════════════════════════════════════════════════ */
+
+      :host {
+        display: block;
+      }
+
+      .input-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: var(--oh-spacing-2);
+      }
+
+      /* ─── Label: friendly and readable (16px minimum) ─── */
+      .label {
+        font-family: var(--oh-font-family-sans);
+        font-size: var(--oh-font-size-base);
+        font-weight: var(--oh-font-weight-semibold);
+        color: var(--oh-color-text-primary);
+        letter-spacing: var(--oh-font-letter-spacing-wide);
+      }
+
+      .label--required::after {
+        content: " *";
+        color: var(--oh-color-feedback-error);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         INPUT FIELD
+         Thick border, inset shadow, solid fill
+         ═══════════════════════════════════════════════════════════════ */
+
+      .input {
+        width: 100%;
+        font-family: var(--oh-font-family-sans);
+        color: var(--oh-color-text-primary);
+        
+        /* Solid fill — no gradients */
+        background-color: var(--oh-color-surface-base);
+        
+        /* Thick illustrative border (WCAG 3:1 compliant) */
+        border: var(--oh-input-base-border-width) solid var(--oh-color-border-emphasis);
+        border-radius: var(--oh-radius-md);
+        
+        /* Inset offset shadow: pressed into page */
+        box-shadow: var(--oh-shadow-chunky-inset, inset 3px 3px 0 0 rgba(61, 50, 41, 0.15));
+        
+        transition: 
+          border-color var(--oh-motion-snappy) ease,
+          box-shadow var(--oh-motion-snappy) ease,
+          background-color var(--oh-motion-quick) ease;
+      }
+
+      .input::placeholder {
+        color: var(--oh-color-text-secondary); /* Readable placeholder */
+      }
+
+      /* ─── Hover: border warms up ─── */
+      .input:hover:not(:focus) {
+        border-color: var(--oh-color-border-hover);
+      }
+
+      /* ─── Focus: even inner ring on all sides (no layout shift) ─── */
+      .input:focus {
+        outline: none;
+        background-color: var(--oh-color-surface-white);
+        border-color: var(--oh-color-border-focus);
+        
+        /* 2px inset ring + 2.5px border = ~4.5px total, even on all sides */
+        box-shadow: inset 0 0 0 2px var(--oh-color-border-focus);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         SIZE (single size for consistency)
+         ═══════════════════════════════════════════════════════════════ */
+
+      .input {
+        font-size: var(--oh-font-size-lg);
+        padding: var(--oh-spacing-3) var(--oh-spacing-4);
+        min-height: var(--oh-input-size-md-min-height);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         ERROR STATE
+         Warm red, chunky — still follows the same language
+         ═══════════════════════════════════════════════════════════════ */
+
+      .input--error {
+        border-color: var(--oh-color-feedback-error);
+        background-color: var(--oh-color-feedback-error-subtle);
+        box-shadow: inset 3px 3px 0 0 var(--oh-shadow-error);
+      }
+
+      .input--error:focus {
+        border-color: var(--oh-color-feedback-error);
+        box-shadow: inset 0 0 0 2px var(--oh-color-feedback-error);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         HELPER TEXT
+         ═══════════════════════════════════════════════════════════════ */
+
+      .helper {
+        font-family: var(--oh-font-family-sans);
+        font-size: var(--oh-font-size-base);
+        color: var(--oh-color-text-secondary);
+        letter-spacing: var(--oh-font-letter-spacing-wide);
+      }
+
+      .helper--error {
+        display: flex;
+        align-items: center;
+        gap: var(--oh-spacing-2);
+        color: var(--oh-color-feedback-error);
+      }
+
+      .error-icon {
+        flex-shrink: 0;
+        width: var(--oh-spacing-4);
+        height: var(--oh-spacing-4);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         REDUCED MOTION
+         ═══════════════════════════════════════════════════════════════ */
+
+      @media (prefers-reduced-motion: reduce) {
+        .input {
+          transition-duration: 0.01ms !important;
+        }
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         FORCED STATES (for Figma Sync / documentation)
+         ═══════════════════════════════════════════════════════════════ */
+
+      /* Forced Hover */
+      :host([force-state="hover"]) .input {
+        border-color: var(--oh-color-border-hover);
+      }
+
+      /* Forced Focus */
+      :host([force-state="focus"]) .input {
+        background-color: var(--oh-color-surface-white);
+        border-color: var(--oh-color-border-focus);
+        box-shadow: inset 0 0 0 2px var(--oh-color-border-focus);
+      }
+
+      /* Error + Forced Hover */
+      :host([force-state="hover"]) .input--error {
+        border-color: var(--oh-color-feedback-error-hover, #b83a00);
+      }
+
+      /* Error + Forced Focus */
+      :host([force-state="focus"]) .input--error {
+        border-color: var(--oh-color-feedback-error);
+        box-shadow: inset 0 0 0 2px var(--oh-color-feedback-error);
+      }
+    `,
+    ]; }
+    _handleInput(event) {
+        const target = event.target;
+        this.value = target.value;
+        this.emit("oh-input", { value: this.value, originalEvent: event });
+    }
+    _handleChange(event) {
+        this.emit("oh-change", { value: this.value, originalEvent: event });
+    }
+    focus() {
+        this._input?.focus();
+    }
+    blur() {
+        this._input?.blur();
+    }
+    render() {
+        const hasError = !!this.errorText;
+        const helperContent = hasError ? this.errorText : this.helperText;
+        const inputClasses = this.classMap({
+            input: true,
+            "input--error": hasError,
+        });
+        return html `
+      <div class="input-wrapper">
+        ${this.label
+            ? html `
+              <label 
+                class="label ${this.required ? "label--required" : ""}" 
+                part="label"
+                for="input"
+              >
+                ${this.label}
+              </label>
+            `
+            : nothing}
+
+        <input
+          id="input"
+          part="input"
+          class=${inputClasses}
+          type=${this.type}
+          .value=${this.value}
+          placeholder=${this.placeholder || nothing}
+          ?required=${this.required}
+          aria-invalid=${hasError ? "true" : nothing}
+          aria-describedby=${helperContent ? "helper" : nothing}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+        />
+
+        ${helperContent
+            ? html `
+              <span 
+                id="helper"
+                class="helper ${hasError ? "helper--error" : ""}" 
+                part="helper"
+                role=${hasError ? "alert" : nothing}
+              >
+                ${hasError
+                ? html `
+                      <svg class="error-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-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+                      </svg>
+                    `
+                : nothing}
+                ${helperContent}
+              </span>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], OhInput.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], OhInput.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], OhInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], OhInput.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], OhInput.prototype, "helperText", void 0);
+__decorate([
+    property({ type: String })
+], OhInput.prototype, "errorText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OhInput.prototype, "required", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: "force-state" })
+], OhInput.prototype, "forceState", void 0);
+__decorate([
+    query("input")
+], OhInput.prototype, "_input", void 0);
+OhInput = __decorate([
+    customElement("oh-input")
+], OhInput);
+export { OhInput };
+//# sourceMappingURL=oh-input.js.map

package/dist/oh-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oh-input.js","sourceRoot":"","sources":["../src/oh-input.ts"],"names":[],"mappings":"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"}

package/dist/oh-link.d.ts

@@ -0,0 +1,45 @@
+/**
+ * oh-link
+ *
+ * A warm, playful link with retro-inspired styling.
+ * Two variants: inline (for body text) and standalone (for CTAs).
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. INLINE VARIANT
+ *    - Dotted underline (quirky, retro feel)
+ *    - Becomes solid on hover
+ *    - Warm marmalade color
+ *    - Subtle but distinctive
+ *
+ * 2. STANDALONE VARIANT
+ *    - Bolder presence for CTAs
+ *    - Offset shadow on hover (mini sticker effect)
+ *    - Lift animation like other components
+ *    - Arrow icon option
+ *
+ * 3. ACCESSIBILITY
+ *    - Underline always visible (not color-only)
+ *    - Clear focus state
+ *    - Proper contrast ratios
+ *
+ * @element oh-link
+ */
+import { OhElement } from "./base.js";
+export type LinkVariant = "inline" | "standalone";
+export declare class OhLink extends OhElement {
+    static styles: import("lit").CSSResult[];
+    href: string;
+    target: string;
+    rel: string;
+    variant: LinkVariant;
+    arrow: boolean;
+    inverse: boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "oh-link": OhLink;
+    }
+}
+//# sourceMappingURL=oh-link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oh-link.d.ts","sourceRoot":"","sources":["../src/oh-link.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,YAAY,CAAC;AAElD,qBACa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,4BAmSpB;IAGF,IAAI,SAAM;IAGV,MAAM,SAAM;IAGZ,GAAG,SAAM;IAGT,OAAO,EAAE,WAAW,CAAY;IAGhC,KAAK,UAAS;IAGd,OAAO,UAAS;IAEhB,MAAM;CAiCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}