@orange-halo/components 1.0.0

package/dist/oh-link.js

@@ -0,0 +1,392 @@
+/**
+ * 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
+ */
+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 OhLink = class OhLink extends OhElement {
+    constructor() {
+        super(...arguments);
+        this.href = "";
+        this.target = "";
+        this.rel = "";
+        this.variant = "inline";
+        this.arrow = false;
+        this.inverse = false;
+    }
+    static { this.styles = [
+        baseStyles,
+        css `
+      /* ═══════════════════════════════════════════════════════════════
+         ORANGE HALO LINK
+         Warm • Playful • Retro-inspired
+         ═══════════════════════════════════════════════════════════════ */
+
+      :host {
+        display: inline;
+      }
+
+      .link {
+        font-family: var(--oh-font-family-sans);
+        color: var(--oh-color-brand-primary);
+        text-decoration: none;
+        cursor: pointer;
+        position: relative;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         LINK TEXT WRAPPER
+         Uses pseudo-element for animated underline
+         ═══════════════════════════════════════════════════════════════ */
+
+      .link__text {
+        position: relative;
+        text-decoration: none;
+      }
+
+      /* Dashed underline via pseudo-element (animatable) */
+      .link__text::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 2px;
+        background: repeating-linear-gradient(
+          to right,
+          var(--oh-color-brand-primary) 0,
+          var(--oh-color-brand-primary) 4px,
+          transparent 4px,
+          transparent 8px
+        );
+        transform-origin: right;
+        transform: scaleX(1);
+        transition: transform var(--oh-motion-slow) ease;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         INLINE VARIANT
+         Dashed underline shrinks right-to-left on hover
+         ═══════════════════════════════════════════════════════════════ */
+
+      .link--inline {
+        display: inline-flex;
+        align-items: center;
+        text-decoration: none;
+      }
+
+      .link--inline:hover .link__text::after {
+        transform: scaleX(0);
+      }
+
+      .link--inline:active .link__text::after {
+        transform: scaleX(0);
+      }
+
+      /* Focus: solid underline + subtle background */
+      .link--inline:focus {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+        background-color: var(--oh-focus-glow-color);
+        border-radius: 2px;
+        padding: 0 2px;
+        margin: 0 -2px;
+      }
+
+      .link--inline:focus .link__text::after {
+        /* Solid underline on focus */
+        background: var(--oh-color-brand-primary);
+        height: 3px;
+        transform: scaleX(1);
+      }
+
+      /* Remove background for mouse users (click focus) */
+      .link--inline:focus:not(:focus-visible) {
+        background-color: transparent;
+      }
+
+      .link--inline:focus:not(:focus-visible) .link__text::after {
+        background: repeating-linear-gradient(
+          to right,
+          var(--oh-color-brand-primary) 0,
+          var(--oh-color-brand-primary) 4px,
+          transparent 4px,
+          transparent 8px
+        );
+        height: 2px;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         STANDALONE VARIANT
+         CTA-style with hover lift, dashed underline shrinks on hover
+         ═══════════════════════════════════════════════════════════════ */
+
+      .link--standalone {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--oh-spacing-2);
+        font-weight: var(--oh-font-weight-semibold);
+        font-size: var(--oh-font-size-lg);
+        text-decoration: none;
+        padding: var(--oh-spacing-1) 0;
+      }
+
+      .link--standalone:hover .link__text::after {
+        transform: scaleX(0);
+      }
+
+      .link--standalone:active .link__text::after {
+        transform: scaleX(0);
+      }
+
+      /* Focus: solid underline + background */
+      .link--standalone:focus {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+        background-color: var(--oh-focus-glow-color);
+        border-radius: var(--oh-radius-xs);
+        padding: var(--oh-spacing-1) var(--oh-spacing-2);
+        margin: 0 calc(-1 * var(--oh-spacing-2));
+      }
+
+      .link--standalone:focus .link__text::after {
+        background: var(--oh-color-brand-primary);
+        height: 3px;
+        transform: scaleX(1);
+      }
+
+      /* Remove background for mouse users (click focus) */
+      .link--standalone:focus:not(:focus-visible) {
+        background-color: transparent;
+        padding: var(--oh-spacing-1) 0;
+        margin: 0;
+      }
+
+      .link--standalone:focus:not(:focus-visible) .link__text::after {
+        background: repeating-linear-gradient(
+          to right,
+          var(--oh-color-brand-primary) 0,
+          var(--oh-color-brand-primary) 4px,
+          transparent 4px,
+          transparent 8px
+        );
+        height: 2px;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         ARROW ICON
+         Size matches line-height for visual balance
+         ═══════════════════════════════════════════════════════════════ */
+
+      .link__arrow {
+        width: 1lh;
+        height: 1lh;
+        transition: transform var(--oh-motion-snappy) ease;
+      }
+
+      .link--standalone:hover .link__arrow {
+        transform: translateX(3px);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         EXTERNAL LINK ICON
+         Required for accessibility when opening new window
+         Size matches line-height for visual balance
+         ═══════════════════════════════════════════════════════════════ */
+
+      .link__external {
+        width: 1em;
+        height: 1em;
+        margin-left: 0.25em;
+        flex-shrink: 0;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         VISUALLY HIDDEN (for screen readers)
+         ═══════════════════════════════════════════════════════════════ */
+
+      .visually-hidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         VISITED STATE
+         Same as default for consistent appearance
+         ═══════════════════════════════════════════════════════════════ */
+
+      .link:visited {
+        color: var(--oh-color-brand-primary);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         INVERSE VARIANT (for colored backgrounds)
+         Contrasting text/underline for use on brand/accent surfaces
+         ═══════════════════════════════════════════════════════════════ */
+
+      :host([inverse]) .link {
+        color: var(--oh-color-text-on-accent);
+      }
+
+      :host([inverse]) .link:visited {
+        color: var(--oh-color-text-on-accent);
+      }
+
+      :host([inverse]) .link__text::after {
+        background: repeating-linear-gradient(
+          to right,
+          var(--oh-color-text-on-accent) 0,
+          var(--oh-color-text-on-accent) 4px,
+          transparent 4px,
+          transparent 8px
+        );
+      }
+
+      :host([inverse]) .link--inline:focus {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+
+      :host([inverse]) .link--inline:focus .link__text::after {
+        background: var(--oh-color-text-on-accent);
+      }
+
+      :host([inverse]) .link--inline:focus:not(:focus-visible) {
+        background-color: transparent;
+      }
+
+      :host([inverse]) .link--inline:focus:not(:focus-visible) .link__text::after {
+        background: repeating-linear-gradient(
+          to right,
+          var(--oh-color-text-on-accent) 0,
+          var(--oh-color-text-on-accent) 4px,
+          transparent 4px,
+          transparent 8px
+        );
+      }
+
+      :host([inverse]) .link--standalone:focus {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+
+      :host([inverse]) .link--standalone:focus .link__text::after {
+        background: var(--oh-color-text-on-accent);
+      }
+
+      :host([inverse]) .link--standalone:focus:not(:focus-visible) {
+        background-color: transparent;
+      }
+
+      :host([inverse]) .link--standalone:focus:not(:focus-visible) .link__text::after {
+        background: repeating-linear-gradient(
+          to right,
+          var(--oh-color-text-on-accent) 0,
+          var(--oh-color-text-on-accent) 4px,
+          transparent 4px,
+          transparent 8px
+        );
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         REDUCED MOTION
+         ═══════════════════════════════════════════════════════════════ */
+
+      @media (prefers-reduced-motion: reduce) {
+        .link,
+        .link__arrow,
+        .link__text::after {
+          transition-duration: 0.01ms !important;
+        }
+      }
+    `,
+    ]; }
+    render() {
+        const linkClasses = this.classMap({
+            link: true,
+            "link--inline": this.variant === "inline",
+            "link--standalone": this.variant === "standalone",
+        });
+        // Auto-add rel="noopener noreferrer" for external links
+        const computedRel = this.target === "_blank" && !this.rel
+            ? "noopener noreferrer"
+            : this.rel;
+        const isExternal = this.target === "_blank";
+        return html `
+      <a
+        class=${linkClasses}
+        href=${this.href}
+        target=${this.target || nothing}
+        rel=${computedRel || nothing}
+      >
+        <span class="link__text"><slot></slot></span>${isExternal
+            ? html `<svg class="link__external" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M4.25 5.5a.75.75 0 00-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 00.75-.75v-4a.75.75 0 011.5 0v4A2.25 2.25 0 0112.75 17h-8.5A2.25 2.25 0 012 14.75v-8.5A2.25 2.25 0 014.25 4h5a.75.75 0 010 1.5h-5z" clip-rule="evenodd" /><path fill-rule="evenodd" d="M6.194 12.753a.75.75 0 001.06.053L16.5 4.44v2.81a.75.75 0 001.5 0v-4.5a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h2.553l-9.056 8.194a.75.75 0 00-.053 1.06z" clip-rule="evenodd" /></svg><span class="visually-hidden">(opens in new tab)</span>`
+            : nothing}${this.variant === "standalone" && this.arrow && !isExternal
+            ? html `
+              <svg class="link__arrow" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
+              </svg>
+            `
+            : nothing}
+      </a>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], OhLink.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], OhLink.prototype, "target", void 0);
+__decorate([
+    property({ type: String })
+], OhLink.prototype, "rel", void 0);
+__decorate([
+    property({ type: String })
+], OhLink.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean })
+], OhLink.prototype, "arrow", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OhLink.prototype, "inverse", void 0);
+OhLink = __decorate([
+    customElement("oh-link")
+], OhLink);
+export { OhLink };
+//# sourceMappingURL=oh-link.js.map

package/dist/oh-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oh-link.js","sourceRoot":"","sources":["../src/oh-link.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,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAA9B;;QAuSL,SAAI,GAAG,EAAE,CAAC;QAGV,WAAM,GAAG,EAAE,CAAC;QAGZ,QAAG,GAAG,EAAE,CAAC;QAGT,YAAO,GAAgB,QAAQ,CAAC;QAGhC,UAAK,GAAG,KAAK,CAAC;QAGd,YAAO,GAAG,KAAK,CAAC;IAmClB,CAAC;aAxViB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgSF;KACF,AAnSqB,CAmSpB;IAoBF,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC;YAChC,IAAI,EAAE,IAAI;YACV,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YACzC,kBAAkB,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;SAClD,CAAC,CAAC;QAEH,wDAAwD;QACxD,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,GAAG;YACvD,CAAC,CAAC,qBAAqB;YACvB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QAEb,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC;QAE5C,OAAO,IAAI,CAAA;;gBAEC,WAAW;eACZ,IAAI,CAAC,IAAI;iBACP,IAAI,CAAC,MAAM,IAAI,OAAO;cACzB,WAAW,IAAI,OAAO;;uDAEmB,UAAU;YACvD,CAAC,CAAC,IAAI,CAAA,8lBAA8lB;YACpmB,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,UAAU;YACtE,CAAC,CAAC,IAAI,CAAA;;;;aAIH;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AAjDD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAClB;AAGT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACK;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACd;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAC3B;AAtTL,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAyVlB"}

package/dist/oh-modal.d.ts

@@ -0,0 +1,54 @@
+/**
+ * oh-modal
+ *
+ * A chunky, accessible modal dialog with focus trapping.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. CHUNKY & LIFTED
+ *    - 2.5px border like other components
+ *    - Offset shadow (4px 4px) — feels like a lifted surface
+ *    - Warm backdrop, not pure black
+ *
+ * 2. ACCESSIBLE
+ *    - Focus trap when open
+ *    - Escape key closes (when dismissible)
+ *    - Focus returns to trigger on close
+ *    - role="dialog" + aria-modal="true"
+ *
+ * 3. FLEXIBLE STRUCTURE
+ *    - Optional heading
+ *    - Scrollable body content
+ *    - Optional footer slot for actions
+ *
+ * @element oh-modal
+ */
+import { OhElement } from "./base.js";
+export type ModalSize = "sm" | "md" | "lg";
+export declare class OhModal extends OhElement {
+    static styles: import("lit").CSSResult[];
+    open: boolean;
+    heading: string;
+    dismissible: boolean;
+    size: ModalSize;
+    private _previousActiveElement;
+    private _closeButton;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private _onOpen;
+    private _onClose;
+    private _handleKeyDown;
+    private _trapFocus;
+    private _getFocusableElements;
+    private _focusFirstElement;
+    private _handleBackdropClick;
+    private _requestClose;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "oh-modal": OhModal;
+    }
+}
+//# sourceMappingURL=oh-modal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oh-modal.d.ts","sourceRoot":"","sources":["../src/oh-modal.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BA0NpB;IAGF,IAAI,UAAS;IAGb,OAAO,SAAM;IAGb,WAAW,UAAQ;IAGnB,IAAI,EAAE,SAAS,CAAQ;IAGvB,OAAO,CAAC,sBAAsB,CAA4B;IAI1D,OAAO,CAAC,YAAY,CAAqB;IAEzC,iBAAiB;IAKjB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU/C,OAAO,CAAC,OAAO;IAoBf,OAAO,CAAC,QAAQ;IAchB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,UAAU;IAsBlB,OAAO,CAAC,qBAAqB;IAqB7B,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,aAAa;IAKrB,oBAAoB;IAMpB,MAAM;CA8DP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}