@orange-halo/components 1.0.0

package/dist/oh-skip-link.js

@@ -0,0 +1,145 @@
+/**
+ * oh-skip-link
+ *
+ * Accessibility skip link for keyboard navigation.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. ACCESSIBILITY FIRST
+ *    - Hidden until Tab focus
+ *    - High contrast focus state
+ *    - Semantic anchor link
+ *
+ * 2. POSITIONING
+ *    - Fixed top-left position
+ *    - Smooth transition on focus
+ *    - Z-index above other content
+ *
+ * 3. STYLING
+ *    - Warm orange focus state
+ *    - Chunky padding and border
+ *    - Clear typography
+ *
+ * @element oh-skip-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 } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { OhElement, baseStyles } from "./base.js";
+let OhSkipLink = class OhSkipLink extends OhElement {
+    constructor() {
+        super(...arguments);
+        this.href = "#main";
+        this.text = "Skip to main content";
+    }
+    static { this.styles = [
+        baseStyles,
+        css `
+      /* ═══════════════════════════════════════════════════════════════
+         ORANGE HALO SKIP LINK
+         Accessibility • Keyboard Navigation • Hidden until focus
+         ═══════════════════════════════════════════════════════════════ */
+
+      :host {
+        display: contents;
+      }
+
+      .skip-link {
+        position: fixed;
+        top: var(--oh-spacing-4);
+        left: var(--oh-spacing-4);
+        z-index: 10000;
+
+        /* Hidden by default */
+        opacity: 0;
+        transform: translateY(-100%);
+        pointer-events: none;
+
+        /* Smooth transition */
+        transition: 
+          opacity var(--oh-motion-gentle, 200ms) ease,
+          transform var(--oh-motion-gentle, 200ms) ease;
+
+        /* Link styling */
+        display: inline-block;
+        padding: var(--oh-spacing-2) var(--oh-spacing-4);
+        background-color: var(--oh-color-surface-base);
+        border: var(--oh-input-base-border-width, 2.5px) solid var(--oh-color-border-emphasis);
+        border-radius: var(--oh-radius-md);
+        box-shadow: 4px 4px 0 0 rgba(107, 93, 77, 0.15);
+
+        font-family: var(--oh-font-family-sans);
+        font-size: var(--oh-font-size-base);
+        font-weight: var(--oh-font-weight-medium);
+        color: var(--oh-color-text-link);
+        text-decoration: none;
+
+        /* Focus state */
+        transition: 
+          opacity var(--oh-motion-gentle, 200ms) ease,
+          transform var(--oh-motion-gentle, 200ms) ease,
+          background-color var(--oh-motion-quick, 120ms) ease,
+          border-color var(--oh-motion-quick, 120ms) ease,
+          box-shadow var(--oh-motion-snappy, 150ms) ease;
+      }
+
+      .skip-link:focus {
+        outline: none;
+        opacity: 1;
+        transform: translateY(0);
+        pointer-events: auto;
+        background-color: var(--oh-color-surface-raised);
+        border-color: var(--oh-color-brand-primary);
+        box-shadow: 4px 4px 0 0 var(--oh-shadow-primary);
+      }
+
+      /* Screen reader only when not focused */
+      .skip-link:not(:focus) {
+        clip: rect(0 0 0 0);
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         REDUCED MOTION
+         ═══════════════════════════════════════════════════════════════ */
+
+      @media (prefers-reduced-motion: reduce) {
+        .skip-link {
+          transition-duration: 0.01ms !important;
+        }
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <a
+        class="skip-link"
+        href=${this.href}
+        aria-label=${this.text}
+      >
+        ${this.text}
+      </a>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], OhSkipLink.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], OhSkipLink.prototype, "text", void 0);
+OhSkipLink = __decorate([
+    customElement("oh-skip-link")
+], OhSkipLink);
+export { OhSkipLink };
+//# sourceMappingURL=oh-skip-link.js.map

package/dist/oh-skip-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oh-skip-link.js","sourceRoot":"","sources":["../src/oh-skip-link.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;;;;;;;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;AAG3C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,SAAS;IAAlC;;QAsFL,SAAI,GAAG,OAAO,CAAC;QAGf,SAAI,GAAG,sBAAsB,CAAC;IAahC,CAAC;aArGiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+EF;KACF,AAlFqB,CAkFpB;IAQF,MAAM;QACJ,OAAO,IAAI,CAAA;;;eAGA,IAAI,CAAC,IAAI;qBACH,IAAI,CAAC,IAAI;;UAEpB,IAAI,CAAC,IAAI;;KAEd,CAAC;IACJ,CAAC;;AAfD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACG;AAzFnB,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAsGtB"}

package/dist/oh-stack.d.ts

@@ -0,0 +1,36 @@
+/**
+ * oh-stack
+ *
+ * Vertical spacing between children.
+ * Creates consistent vertical rhythm without manual margins.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. SPACING SCALE
+ *    - Uses design token spacing values
+ *    - xs: 4px, sm: 8px, md: 16px, lg: 24px, xl: 32px, 2xl: 48px
+ *
+ * 2. FLEX COLUMN LAYOUT
+ *    - Simple vertical stacking
+ *    - Gap property for consistent spacing
+ *
+ * 3. ALIGNMENT OPTIONS
+ *    - start, center, end, stretch
+ *
+ * @element oh-stack
+ */
+import { OhElement } from "./base.js";
+export type StackGap = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type StackAlign = "start" | "center" | "end" | "stretch";
+export declare class OhStack extends OhElement {
+    static styles: import("lit").CSSResult[];
+    gap: StackGap;
+    align: StackAlign;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "oh-stack": OhStack;
+    }
+}
+//# sourceMappingURL=oh-stack.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oh-stack.d.ts","sourceRoot":"","sources":["../src/oh-stack.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAEhE,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BA4DpB;IAGF,GAAG,EAAE,QAAQ,CAAQ;IAGrB,KAAK,EAAE,UAAU,CAAa;IAE9B,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/oh-stack.js

@@ -0,0 +1,112 @@
+/**
+ * oh-stack
+ *
+ * Vertical spacing between children.
+ * Creates consistent vertical rhythm without manual margins.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. SPACING SCALE
+ *    - Uses design token spacing values
+ *    - xs: 4px, sm: 8px, md: 16px, lg: 24px, xl: 32px, 2xl: 48px
+ *
+ * 2. FLEX COLUMN LAYOUT
+ *    - Simple vertical stacking
+ *    - Gap property for consistent spacing
+ *
+ * 3. ALIGNMENT OPTIONS
+ *    - start, center, end, stretch
+ *
+ * @element oh-stack
+ */
+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 OhStack = class OhStack extends OhElement {
+    constructor() {
+        super(...arguments);
+        this.gap = "md";
+        this.align = "stretch";
+    }
+    static { this.styles = [
+        baseStyles,
+        css `
+      /* ═══════════════════════════════════════════════════════════════
+         ORANGE HALO STACK
+         Vertical spacing • Consistent rhythm • Flexible alignment
+         ═══════════════════════════════════════════════════════════════ */
+
+      :host {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+      }
+
+      /* Gap variants */
+      :host([gap="none"]) {
+        gap: 0;
+      }
+
+      :host([gap="xs"]) {
+        gap: var(--oh-spacing-1);
+      }
+
+      :host([gap="sm"]) {
+        gap: var(--oh-spacing-2);
+      }
+
+      :host([gap="md"]) {
+        gap: var(--oh-spacing-4);
+      }
+
+      :host([gap="lg"]) {
+        gap: var(--oh-spacing-6);
+      }
+
+      :host([gap="xl"]) {
+        gap: var(--oh-spacing-8);
+      }
+
+      :host([gap="2xl"]) {
+        gap: var(--oh-spacing-12);
+      }
+
+      /* Alignment variants */
+      :host([align="start"]) {
+        align-items: flex-start;
+      }
+
+      :host([align="center"]) {
+        align-items: center;
+      }
+
+      :host([align="end"]) {
+        align-items: flex-end;
+      }
+
+      :host([align="stretch"]) {
+        align-items: stretch;
+      }
+    `,
+    ]; }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], OhStack.prototype, "gap", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], OhStack.prototype, "align", void 0);
+OhStack = __decorate([
+    customElement("oh-stack")
+], OhStack);
+export { OhStack };
+//# sourceMappingURL=oh-stack.js.map

package/dist/oh-stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oh-stack.js","sourceRoot":"","sources":["../src/oh-stack.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;;;;;;;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;;QAgEL,QAAG,GAAa,IAAI,CAAC;QAGrB,UAAK,GAAe,SAAS,CAAC;IAKhC,CAAC;aAvEiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyDF;KACF,AA5DqB,CA4DpB;IAQF,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAPD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCACrB;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACZ;AAnEnB,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAwEnB"}

package/dist/oh-tabs.d.ts

@@ -0,0 +1,85 @@
+/**
+ * oh-tabs
+ *
+ * Accessible tabbed interface with full keyboard support.
+ *
+ * ACCESSIBILITY FEATURES:
+ * ───────────────────────
+ * - Full ARIA support (tablist, tab, tabpanel roles)
+ * - Roving tabindex for keyboard navigation
+ * - Manual activation (arrow keys move focus, Enter/Space activates)
+ * - Home/End jump to first/last tab
+ * - Focus moves to panel content after activation
+ * - Focus indicators meet WCAG requirements
+ * - Panels properly hidden from assistive tech when inactive
+ *
+ * KEYBOARD INTERACTIONS:
+ * ──────────────────────
+ * - Left Arrow: Move focus to previous tab (wraps to last)
+ * - Right Arrow: Move focus to next tab (wraps to first)
+ * - Home: Move focus to first tab
+ * - End: Move focus to last tab
+ * - Enter/Space: Activate focused tab and move focus to panel
+ * - Tab: Move focus out of tablist
+ *
+ * @element oh-tabs
+ */
+import { OhElement } from "./base.js";
+export interface TabItem {
+    id: string;
+    label: string;
+    content?: string;
+}
+export declare class OhTabs extends OhElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Array of tab items with id, label, and optional content
+     */
+    tabs: TabItem[];
+    /**
+     * ID of the currently selected tab
+     */
+    selected: string;
+    /**
+     * Orientation of the tabs (affects arrow key behavior)
+     */
+    orientation: "horizontal" | "vertical";
+    /**
+     * Index of the currently focused tab (for roving tabindex)
+     */
+    private _focusedIndex;
+    /**
+     * Unique ID prefix for ARIA relationships
+     */
+    private _idPrefix;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    /**
+     * Handle keyboard navigation within the tablist
+     * Uses manual activation: arrows move focus, Enter/Space activates
+     */
+    private _handleKeyDown;
+    /**
+     * Focus the panel for a given tab
+     */
+    private _focusPanel;
+    /**
+     * Focus a specific tab button
+     */
+    private _focusTab;
+    /**
+     * Select a tab and dispatch change event
+     */
+    private _selectTab;
+    /**
+     * Handle click on a tab
+     */
+    private _handleTabClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "oh-tabs": OhTabs;
+    }
+}
+//# sourceMappingURL=oh-tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oh-tabs.d.ts","sourceRoot":"","sources":["../src/oh-tabs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,qBACa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,4BAwKpB;IAEF;;OAEG;IAEH,IAAI,EAAE,OAAO,EAAE,CAAM;IAErB;;OAEG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IAEH,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IAEtD;;OAEG;IAEH,OAAO,CAAC,aAAa,CAAK;IAE1B;;OAEG;IACH,OAAO,CAAC,SAAS,CAAwD;IAEhE,iBAAiB;IAUjB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMxD;;;OAGG;YACW,cAAc;IAmE5B;;OAEG;IACH,OAAO,CAAC,WAAW;IAMnB;;OAEG;IACH,OAAO,CAAC,SAAS;IAKjB;;OAEG;IACH,OAAO,CAAC,UAAU;IAalB;;OAEG;IACH,OAAO,CAAC,eAAe;IAKvB,MAAM;CAyDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}