@orange-halo/components 1.0.0

package/dist/oh-tabs.js

@@ -0,0 +1,417 @@
+/**
+ * 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
+ */
+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, state } from "lit/decorators.js";
+import { OhElement, baseStyles } from "./base.js";
+let OhTabs = class OhTabs extends OhElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Array of tab items with id, label, and optional content
+         */
+        this.tabs = [];
+        /**
+         * ID of the currently selected tab
+         */
+        this.selected = "";
+        /**
+         * Orientation of the tabs (affects arrow key behavior)
+         */
+        this.orientation = "horizontal";
+        /**
+         * Index of the currently focused tab (for roving tabindex)
+         */
+        this._focusedIndex = 0;
+        /**
+         * Unique ID prefix for ARIA relationships
+         */
+        this._idPrefix = `oh-tabs-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    static { this.styles = [
+        baseStyles,
+        css `
+      /* ═══════════════════════════════════════════════════════════════
+         ORANGE HALO TABS
+         Chunky • Playful • Accessible
+         ═══════════════════════════════════════════════════════════════ */
+
+      :host {
+        display: block;
+        font-family: var(--oh-font-family-sans);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         TAB LIST CONTAINER
+         ═══════════════════════════════════════════════════════════════ */
+
+      .tablist {
+        display: flex;
+        gap: var(--oh-spacing-1);
+        padding-bottom: 0;
+        margin-bottom: 0;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         INDIVIDUAL TAB BUTTONS
+         Clean inactive state, chunky selected state
+         ═══════════════════════════════════════════════════════════════ */
+
+      .tab {
+        position: relative;
+        padding: var(--oh-spacing-3) var(--oh-spacing-5);
+        font-family: inherit;
+        font-size: var(--oh-font-size-base);
+        font-weight: var(--oh-font-weight-medium);
+        color: var(--oh-color-brand-primary);
+        background: transparent;
+        border: var(--oh-input-base-border-width) solid transparent;
+        border-bottom: none;
+        border-radius: var(--oh-radius-md) var(--oh-radius-md) 0 0;
+        cursor: pointer;
+        
+        /* No shadow for inactive tabs */
+        box-shadow: none;
+        
+        /* Position above the border line */
+        margin-bottom: -2.5px;
+        
+        transition: 
+          color var(--oh-motion-snappy) ease,
+          background-color var(--oh-motion-snappy) ease,
+          border-color var(--oh-motion-snappy) ease,
+          box-shadow var(--oh-motion-snappy) ease;
+      }
+
+      /* Dashed underline pseudo-element for animation */
+      .tab__label {
+        position: relative;
+      }
+
+      .tab:not([aria-selected="true"]) .tab__label::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: -3px;
+        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: left;
+        transform: scaleX(0);
+        transition: transform var(--oh-motion-relaxed) ease;
+      }
+
+      .tab:hover:not([aria-selected="true"]) .tab__label::after {
+        transform: scaleX(1);
+      }
+
+      .tab:active:not([aria-selected="true"]) .tab__label::after {
+        transform: scaleX(1);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         SELECTED TAB STATE
+         Uses grey for a softer look (4.3:1 contrast against cream bg)
+         ═══════════════════════════════════════════════════════════════ */
+
+      .tab[aria-selected="true"] {
+        color: var(--oh-color-text-primary);
+        background: var(--oh-color-surface-base);
+        border-color: var(--oh-color-border-emphasis);
+        border-bottom-color: transparent;
+        z-index: 1;
+        /* Extend down to overlap the content panel's top border */
+        margin-bottom: calc(-1 * var(--oh-input-base-border-width));
+        padding-bottom: calc(var(--oh-spacing-3) + var(--oh-input-base-border-width));
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         FOCUS STATE
+         Accessible underline indicator
+         ═══════════════════════════════════════════════════════════════ */
+
+      .tab:focus {
+        outline: none;
+      }
+
+      .tab:focus-visible {
+        outline: none;
+      }
+
+      .tab:focus-visible .tab__label {
+        text-decoration: underline;
+        text-underline-offset: var(--oh-spacing-1);
+        text-decoration-thickness: 2px;
+      }
+
+      .tab__label {
+        position: relative;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         TAB PANEL
+         Content area with warm styling, rounded top-right corner
+         ═══════════════════════════════════════════════════════════════ */
+
+      .tabpanel {
+        padding: var(--oh-spacing-6);
+        background: var(--oh-color-surface-base);
+        border: var(--oh-input-base-border-width) solid var(--oh-color-border-emphasis);
+        border-radius: 0 var(--oh-radius-md) var(--oh-radius-md) var(--oh-radius-md);
+        color: var(--oh-color-text-primary);
+      }
+
+      /* When first tab is not selected, round all corners */
+      .tabpanel--rounded-top-left {
+        border-radius: var(--oh-radius-md);
+      }
+
+      .tabpanel:focus {
+        outline: none;
+      }
+
+      .tabpanel:focus-visible {
+        outline: 2px solid var(--oh-color-border-emphasis);
+        outline-offset: -2px;
+      }
+
+      /* Hidden panels - properly hidden from assistive tech */
+      .tabpanel[hidden] {
+        display: none;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         REDUCED MOTION
+         ═══════════════════════════════════════════════════════════════ */
+
+      @media (prefers-reduced-motion: reduce) {
+        .tab {
+          transition-duration: 0.01ms !important;
+        }
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        // Set initial selected tab if not specified
+        if (!this.selected && this.tabs.length > 0) {
+            this.selected = this.tabs[0].id;
+        }
+        // Set initial focused index to match selected
+        this._focusedIndex = Math.max(0, this.tabs.findIndex(t => t.id === this.selected));
+    }
+    updated(changedProperties) {
+        if (changedProperties.has("tabs") && this.tabs.length > 0 && !this.selected) {
+            this.selected = this.tabs[0].id;
+        }
+    }
+    /**
+     * Handle keyboard navigation within the tablist
+     * Uses manual activation: arrows move focus, Enter/Space activates
+     */
+    async _handleKeyDown(e) {
+        const { key } = e;
+        const tabCount = this.tabs.length;
+        if (tabCount === 0)
+            return;
+        let newIndex = this._focusedIndex;
+        let handled = false;
+        let shouldActivate = false;
+        switch (key) {
+            case "ArrowLeft":
+                if (this.orientation === "horizontal") {
+                    newIndex = this._focusedIndex === 0 ? tabCount - 1 : this._focusedIndex - 1;
+                    handled = true;
+                }
+                break;
+            case "ArrowRight":
+                if (this.orientation === "horizontal") {
+                    newIndex = this._focusedIndex === tabCount - 1 ? 0 : this._focusedIndex + 1;
+                    handled = true;
+                }
+                break;
+            case "ArrowUp":
+                if (this.orientation === "vertical") {
+                    newIndex = this._focusedIndex === 0 ? tabCount - 1 : this._focusedIndex - 1;
+                    handled = true;
+                }
+                break;
+            case "ArrowDown":
+                if (this.orientation === "vertical") {
+                    newIndex = this._focusedIndex === tabCount - 1 ? 0 : this._focusedIndex + 1;
+                    handled = true;
+                }
+                break;
+            case "Home":
+                newIndex = 0;
+                handled = true;
+                break;
+            case "End":
+                newIndex = tabCount - 1;
+                handled = true;
+                break;
+            case "Enter":
+            case " ": // Space
+                shouldActivate = true;
+                handled = true;
+                break;
+        }
+        if (handled) {
+            e.preventDefault();
+            if (shouldActivate) {
+                // Activate the currently focused tab
+                this._selectTab(this.tabs[this._focusedIndex].id);
+                // Wait for render to complete, then move focus to panel
+                await this.updateComplete;
+                this._focusPanel(this.tabs[this._focusedIndex].id);
+            }
+            else if (newIndex !== this._focusedIndex) {
+                // Just move focus to the new tab (don't activate)
+                this._focusedIndex = newIndex;
+                this._focusTab(newIndex);
+            }
+        }
+    }
+    /**
+     * Focus the panel for a given tab
+     */
+    _focusPanel(tabId) {
+        const panelId = `${this._idPrefix}-panel-${tabId}`;
+        const panel = this.shadowRoot?.getElementById(panelId);
+        panel?.focus();
+    }
+    /**
+     * Focus a specific tab button
+     */
+    _focusTab(index) {
+        const tabButtons = this.shadowRoot?.querySelectorAll('.tab');
+        tabButtons?.[index]?.focus();
+    }
+    /**
+     * Select a tab and dispatch change event
+     */
+    _selectTab(tabId) {
+        if (this.selected !== tabId) {
+            this.selected = tabId;
+            this._focusedIndex = this.tabs.findIndex(t => t.id === tabId);
+            this.dispatchEvent(new CustomEvent("tab-change", {
+                detail: { tabId },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    }
+    /**
+     * Handle click on a tab
+     */
+    _handleTabClick(tabId, index) {
+        this._focusedIndex = index;
+        this._selectTab(tabId);
+    }
+    render() {
+        return html `
+      <div class="tabs-container">
+        <!-- Tab List -->
+        <div 
+          class="tablist"
+          role="tablist"
+          aria-orientation=${this.orientation}
+          @keydown=${this._handleKeyDown}
+        >
+          ${this.tabs.map((tab, index) => {
+            const isSelected = tab.id === this.selected;
+            const tabId = `${this._idPrefix}-tab-${tab.id}`;
+            const panelId = `${this._idPrefix}-panel-${tab.id}`;
+            return html `
+              <button
+                class="tab"
+                role="tab"
+                id=${tabId}
+                aria-selected=${isSelected ? "true" : "false"}
+                aria-controls=${panelId}
+                tabindex=${index === this._focusedIndex ? "0" : "-1"}
+                @click=${() => this._handleTabClick(tab.id, index)}
+              >
+                <span class="tab__label">${tab.label}</span>
+              </button>
+            `;
+        })}
+        </div>
+
+        <!-- Tab Panels -->
+        ${this.tabs.map((tab) => {
+            const isSelected = tab.id === this.selected;
+            const tabId = `${this._idPrefix}-tab-${tab.id}`;
+            const panelId = `${this._idPrefix}-panel-${tab.id}`;
+            const isFirstTabSelected = this.tabs.length > 0 && this.selected === this.tabs[0].id;
+            return html `
+            <div
+              class="tabpanel ${!isFirstTabSelected ? 'tabpanel--rounded-top-left' : ''}"
+              role="tabpanel"
+              id=${panelId}
+              aria-labelledby=${tabId}
+              ?hidden=${!isSelected}
+              tabindex=${isSelected ? "0" : "-1"}
+            >
+              ${tab.content
+                ? html `${tab.content}`
+                : html `<slot name=${tab.id}></slot>`}
+            </div>
+          `;
+        })}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], OhTabs.prototype, "tabs", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: "selected" })
+], OhTabs.prototype, "selected", void 0);
+__decorate([
+    property({ type: String })
+], OhTabs.prototype, "orientation", void 0);
+__decorate([
+    state()
+], OhTabs.prototype, "_focusedIndex", void 0);
+OhTabs = __decorate([
+    customElement("oh-tabs")
+], OhTabs);
+export { OhTabs };
+//# sourceMappingURL=oh-tabs.js.map

package/dist/oh-tabs.js.map

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

package/dist/oh-toggle.d.ts

@@ -0,0 +1,51 @@
+/**
+ * oh-toggle
+ *
+ * A toggle/switch component for binary on/off states.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. CHUNKY 3D FEEL
+ *    - Thumb offset up-left from center to appear "popping out"
+ *    - Shadow flips horizontally when checked (light source stays consistent)
+ *    - Smooth slide animation
+ *
+ * 2. VISUAL STATES
+ *    - Off: Neutral track, thumb on left, shadow bottom-right
+ *    - On: Brand primary track, thumb on right, shadow bottom-left (flipped)
+ *
+ * 3. ACCESSIBILITY
+ *    - Uses role="switch" with aria-checked
+ *    - Keyboard: Space/Enter to toggle
+ *    - Focus ring matches design system
+ *    - Label association via aria-labelledby
+ *
+ * @element oh-toggle
+ *
+ * @fires oh-change - Fired when the toggle state changes
+ */
+import { OhElement } from "./base.js";
+export declare class OhToggle extends OhElement {
+    static styles: import("lit").CSSResult[];
+    /** Whether the toggle is checked/on */
+    checked: boolean;
+    /** Label text displayed next to the toggle */
+    label?: string;
+    /** Accessible label when no visible label is provided */
+    ariaLabel: string | null;
+    /** Name for form submission */
+    name?: string;
+    /** Value for form submission */
+    value: string;
+    private _toggle;
+    private _handleKeydown;
+    private _handleClick;
+    private readonly _labelId;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "oh-toggle": OhToggle;
+    }
+}
+//# sourceMappingURL=oh-toggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oh-toggle.d.ts","sourceRoot":"","sources":["../src/oh-toggle.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BAkHpB;IAEF,uCAAuC;IAEvC,OAAO,UAAS;IAEhB,8CAA8C;IAE9C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,yDAAyD;IAEzD,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEhC,+BAA+B;IAE/B,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,gCAAgC;IAEhC,KAAK,SAAQ;IAEb,OAAO,CAAC,OAAO;IAWf,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA+D;IAExF,MAAM;CAqBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}