@orange-halo/components 1.0.0

package/dist/oh-select.js

@@ -0,0 +1,638 @@
+/**
+ * oh-select
+ *
+ * A chunky, playful dropdown select with hand-crafted feel.
+ * Custom-styled dropdown (not native) for full visual control.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. CHUNKY & TACTILE
+ *    - Thick 2.5px border
+ *    - Offset shadow (sticker effect like button)
+ *    - 10px border radius
+ *    - Solid warm fills
+ *
+ * 2. DROPDOWN PANEL
+ *    - Appears below trigger with shadow
+ *    - Options have hover/focus states
+ *    - Selected option highlighted
+ *    - Smooth open/close animation
+ *
+ * 3. ACCESSIBILITY
+ *    - role="combobox" with proper ARIA
+ *    - Keyboard navigation (arrows, enter, escape, home, end)
+ *    - Type-ahead search
+ *    - Focus management
+ *    - Label always required
+ *
+ * @element oh-select
+ */
+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, state, query } from "lit/decorators.js";
+import { OhElement, baseStyles } from "./base.js";
+let OhSelect = class OhSelect extends OhElement {
+    constructor() {
+        super(...arguments);
+        this.label = "";
+        this.placeholder = "Select an option";
+        this.name = "";
+        this.options = [];
+        this.value = "";
+        this.required = false;
+        this.helperText = "";
+        this.errorText = "";
+        this._open = false;
+        this._highlightedIndex = -1;
+        this._focused = false;
+        this._labelId = `oh-select-label-${Math.random().toString(36).substr(2, 9)}`;
+        this._listboxId = `oh-select-listbox-${Math.random().toString(36).substr(2, 9)}`;
+        this._errorId = `oh-select-error-${Math.random().toString(36).substr(2, 9)}`;
+        this._typeaheadBuffer = "";
+        this._typeaheadTimeout = null;
+        this._handleClickOutside = (event) => {
+            if (!this.contains(event.target)) {
+                this._close_dropdown();
+            }
+        };
+    }
+    static { this.styles = [
+        baseStyles,
+        css `
+      /* ═══════════════════════════════════════════════════════════════
+         ORANGE HALO SELECT
+         Chunky • Playful • Tactile Dropdown
+         ═══════════════════════════════════════════════════════════════ */
+
+      :host {
+        display: block;
+        position: relative;
+      }
+
+      .select-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: var(--oh-spacing-2);
+      }
+
+      /* ─── Label ─── */
+      .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);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         TRIGGER BUTTON
+         The clickable area that opens the dropdown
+         ═══════════════════════════════════════════════════════════════ */
+
+      .trigger {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--oh-spacing-3);
+        width: 100%;
+        min-height: var(--oh-input-size-md-min-height);
+        padding: var(--oh-spacing-3) var(--oh-spacing-4);
+        
+        font-family: var(--oh-font-family-sans);
+        font-size: var(--oh-font-size-lg);
+        color: var(--oh-color-text-primary);
+        text-align: left;
+        
+        background-color: var(--oh-color-surface-base);
+        border: var(--oh-input-base-border-width) solid var(--oh-color-border-emphasis);
+        border-radius: var(--oh-radius-md);
+        box-shadow: 4px 4px 0 0 var(--oh-shadow-secondary);
+        
+        cursor: pointer;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        
+        transition: 
+          transform var(--oh-motion-snappy) var(--oh-motion-ease-playful),
+          box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-playful),
+          border-color var(--oh-motion-snappy) ease,
+          background-color var(--oh-motion-quick) ease;
+      }
+
+      .trigger__text {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .trigger__text--placeholder {
+        color: var(--oh-color-text-secondary);
+      }
+
+      .trigger__icon {
+        flex-shrink: 0;
+        width: 20px;
+        height: 20px;
+        color: var(--oh-color-text-secondary);
+        transition: transform var(--oh-motion-gentle) ease;
+      }
+
+      .trigger__icon--open {
+        transform: rotate(180deg);
+      }
+
+      /* ─── Trigger States ─── */
+      .trigger:hover {
+        border-color: var(--oh-color-border-hover);
+        transform: translate(-2px, -2px);
+        box-shadow: 6px 6px 0 0 var(--oh-shadow-secondary);
+      }
+
+      .trigger:active {
+        transform: translate(1px, 1px);
+        box-shadow: 2px 2px 0 0 var(--oh-shadow-secondary);
+      }
+
+      .trigger--open {
+        border-color: var(--oh-color-border-focus);
+        background-color: var(--oh-color-surface-white);
+      }
+
+      /* Focus: underline trigger text (accessible indicator, like button) */
+      .trigger:focus {
+        outline: none;
+      }
+
+      .trigger:focus-visible .trigger__text,
+      .trigger--focused .trigger__text {
+        text-decoration: underline;
+        text-underline-offset: var(--oh-spacing-1);
+      }
+
+      /* Reorder for CSS sibling selector - label comes after trigger visually via flex order */
+      .label-container {
+        order: -1;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         DROPDOWN PANEL
+         ═══════════════════════════════════════════════════════════════ */
+
+      .dropdown {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        z-index: var(--oh-z-index-dropdown);
+        margin-top: var(--oh-spacing-1);
+        
+        background-color: var(--oh-color-surface-white);
+        border: var(--oh-input-base-border-width) solid var(--oh-color-border-emphasis);
+        border-radius: var(--oh-radius-md);
+        box-shadow: 6px 6px 0 0 var(--oh-shadow-secondary);
+        
+        max-height: 0;
+        overflow: hidden;
+        opacity: 0;
+        transform: translateY(-8px);
+        
+        transition: 
+          max-height var(--oh-motion-gentle) ease,
+          opacity var(--oh-motion-snappy) ease,
+          transform var(--oh-motion-snappy) var(--oh-motion-ease-playful);
+      }
+
+      .dropdown--open {
+        max-height: 280px;
+        overflow-y: auto;
+        opacity: 1;
+        transform: translateY(0);
+      }
+
+      .dropdown[role="listbox"] {
+        list-style: none;
+        margin: 0;
+        padding: var(--oh-spacing-2) 0;
+      }
+
+      /* ─── Option ─── */
+      .option {
+        display: flex;
+        align-items: center;
+        gap: var(--oh-spacing-3);
+        padding: var(--oh-spacing-3) var(--oh-spacing-4);
+        
+        font-family: var(--oh-font-family-sans);
+        font-size: var(--oh-font-size-lg);
+        color: var(--oh-color-text-primary);
+        
+        cursor: pointer;
+        transition: background-color var(--oh-motion-quick) ease;
+      }
+
+      .option:hover,
+      .option--highlighted {
+        background-color: var(--oh-color-surface-base);
+      }
+
+      /* Keyboard navigation: underline highlighted option */
+      .option--highlighted {
+        text-decoration: underline;
+        text-underline-offset: var(--oh-spacing-1);
+      }
+
+      .option--selected {
+        background-color: var(--oh-color-surface-hover);
+        font-weight: var(--oh-font-weight-semibold);
+      }
+
+      .option--selected::before {
+        content: '';
+        width: 8px;
+        height: 8px;
+        background-color: var(--oh-color-brand-primary);
+        border-radius: var(--oh-radius-full);
+        flex-shrink: 0;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         ERROR STATE
+         ═══════════════════════════════════════════════════════════════ */
+
+      .trigger--error {
+        border-color: var(--oh-color-feedback-error);
+        box-shadow: 4px 4px 0 0 var(--oh-shadow-error);
+      }
+
+      .trigger--error:hover {
+        border-color: var(--oh-color-feedback-error-hover);
+        box-shadow: 6px 6px 0 0 var(--oh-shadow-error);
+      }
+
+      .helper {
+        font-family: var(--oh-font-family-sans);
+        font-size: var(--oh-font-size-base);
+        color: var(--oh-color-text-secondary);
+      }
+
+      .error-message {
+        display: flex;
+        align-items: center;
+        gap: var(--oh-spacing-2);
+        font-family: var(--oh-font-family-sans);
+        font-size: var(--oh-font-size-base);
+        color: var(--oh-color-feedback-error);
+        margin-bottom: var(--oh-spacing-2);
+      }
+
+      .error-icon {
+        flex-shrink: 0;
+        width: var(--oh-spacing-4);
+        height: var(--oh-spacing-4);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         REDUCED MOTION
+         ═══════════════════════════════════════════════════════════════ */
+
+      @media (prefers-reduced-motion: reduce) {
+        .trigger,
+        .dropdown,
+        .trigger__icon,
+        .option {
+          transition-duration: 0.01ms !important;
+        }
+      }
+    `,
+    ]; }
+    get _selectedOption() {
+        return this.options.find(opt => opt.value === this.value);
+    }
+    _open_dropdown() {
+        this._open = true;
+        this._highlightedIndex = this.options.findIndex(opt => opt.value === this.value);
+        if (this._highlightedIndex === -1 && this.options.length > 0) {
+            this._highlightedIndex = 0;
+        }
+    }
+    _close_dropdown() {
+        this._open = false;
+        this._highlightedIndex = -1;
+    }
+    _toggle_dropdown() {
+        if (this._open) {
+            this._close_dropdown();
+        }
+        else {
+            this._open_dropdown();
+        }
+    }
+    _selectOption(option) {
+        this.value = option.value;
+        this._close_dropdown();
+        this._trigger?.focus();
+        this.emit("oh-change", { value: this.value });
+    }
+    _handleTriggerClick() {
+        this._toggle_dropdown();
+    }
+    _handleTriggerKeydown(event) {
+        switch (event.key) {
+            case "Enter":
+            case " ":
+                event.preventDefault();
+                if (this._open && this._highlightedIndex >= 0) {
+                    const option = this.options[this._highlightedIndex];
+                    if (option) {
+                        this._selectOption(option);
+                    }
+                }
+                else {
+                    this._open_dropdown();
+                }
+                break;
+            case "ArrowDown":
+                event.preventDefault();
+                if (!this._open) {
+                    this._open_dropdown();
+                }
+                else {
+                    this._highlightNext();
+                }
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                if (!this._open) {
+                    this._open_dropdown();
+                }
+                else {
+                    this._highlightPrevious();
+                }
+                break;
+            case "Home":
+                event.preventDefault();
+                if (this._open) {
+                    this._highlightFirst();
+                }
+                break;
+            case "End":
+                event.preventDefault();
+                if (this._open) {
+                    this._highlightLast();
+                }
+                break;
+            case "Escape":
+                if (this._open) {
+                    event.preventDefault();
+                    this._close_dropdown();
+                }
+                break;
+            case "Tab":
+                if (this._open) {
+                    this._close_dropdown();
+                }
+                break;
+            default:
+                // Type-ahead search
+                if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+                    this._handleTypeahead(event.key);
+                }
+                break;
+        }
+    }
+    _handleTypeahead(char) {
+        this._typeaheadBuffer += char.toLowerCase();
+        if (this._typeaheadTimeout) {
+            clearTimeout(this._typeaheadTimeout);
+        }
+        this._typeaheadTimeout = window.setTimeout(() => {
+            this._typeaheadBuffer = "";
+        }, 500);
+        const matchIndex = this.options.findIndex(opt => opt.label.toLowerCase().startsWith(this._typeaheadBuffer));
+        if (matchIndex >= 0) {
+            if (this._open) {
+                this._highlightedIndex = matchIndex;
+            }
+            else {
+                this._selectOption(this.options[matchIndex]);
+            }
+        }
+    }
+    _highlightNext() {
+        if (this.options.length === 0)
+            return;
+        this._highlightedIndex = (this._highlightedIndex + 1) % this.options.length;
+        this._scrollToHighlighted();
+    }
+    _highlightPrevious() {
+        if (this.options.length === 0)
+            return;
+        this._highlightedIndex = this._highlightedIndex <= 0
+            ? this.options.length - 1
+            : this._highlightedIndex - 1;
+        this._scrollToHighlighted();
+    }
+    _highlightFirst() {
+        if (this.options.length === 0)
+            return;
+        this._highlightedIndex = 0;
+        this._scrollToHighlighted();
+    }
+    _highlightLast() {
+        if (this.options.length === 0)
+            return;
+        this._highlightedIndex = this.options.length - 1;
+        this._scrollToHighlighted();
+    }
+    _scrollToHighlighted() {
+        requestAnimationFrame(() => {
+            const highlighted = this._listbox?.querySelector('.option--highlighted');
+            highlighted?.scrollIntoView({ block: 'nearest' });
+        });
+    }
+    _handleOptionClick(option, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._selectOption(option);
+    }
+    _handleOptionMouseenter(index) {
+        this._highlightedIndex = index;
+    }
+    _handleFocus() {
+        this._focused = true;
+    }
+    _handleBlur(event) {
+        // Check if focus is moving outside the component
+        const relatedTarget = event.relatedTarget;
+        if (!this.contains(relatedTarget)) {
+            this._focused = false;
+            this._close_dropdown();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this._handleClickOutside);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this._handleClickOutside);
+    }
+    render() {
+        const hasError = !!this.errorText;
+        const selectedLabel = this._selectedOption?.label;
+        const triggerClasses = this.classMap({
+            trigger: true,
+            "trigger--open": this._open,
+            "trigger--error": hasError,
+            "trigger--focused": this._focused,
+        });
+        return html `
+      <div class="select-wrapper">
+        <div class="label-container">
+          ${this.label
+            ? html `
+                <label 
+                  id=${this._labelId}
+                  class="label ${this.required ? "label--required" : ""}"
+                >
+                  ${this.label}
+                </label>
+              `
+            : nothing}
+        </div>
+
+        ${hasError
+            ? html `
+              <div id=${this._errorId} class="error-message" role="alert">
+                <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>
+                ${this.errorText}
+              </div>
+            `
+            : nothing}
+
+        <button
+          type="button"
+          class=${triggerClasses}
+          role="combobox"
+          aria-expanded=${this._open}
+          aria-haspopup="listbox"
+          aria-labelledby=${this.label ? this._labelId : nothing}
+          aria-controls=${this._listboxId}
+          aria-activedescendant=${this._open && this._highlightedIndex >= 0
+            ? `option-${this._highlightedIndex}`
+            : nothing}
+          aria-required=${this.required ? "true" : nothing}
+          aria-invalid=${hasError ? "true" : nothing}
+          aria-describedby=${hasError ? this._errorId : nothing}
+          @click=${this._handleTriggerClick}
+          @keydown=${this._handleTriggerKeydown}
+          @focus=${this._handleFocus}
+          @blur=${this._handleBlur}
+        >
+          <span class="trigger__text ${!selectedLabel ? 'trigger__text--placeholder' : ''}">
+            ${selectedLabel || this.placeholder}
+          </span>
+          <svg 
+            class="trigger__icon ${this._open ? 'trigger__icon--open' : ''}" 
+            viewBox="0 0 20 20" 
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
+          </svg>
+        </button>
+
+        <ul 
+          class="dropdown ${this._open ? 'dropdown--open' : ''}"
+          role="listbox"
+          id=${this._listboxId}
+          aria-labelledby=${this.label ? this._labelId : nothing}
+        >
+          ${this.options.map((option, index) => {
+            const isSelected = option.value === this.value;
+            const isHighlighted = index === this._highlightedIndex;
+            const optionClasses = this.classMap({
+                option: true,
+                "option--selected": isSelected,
+                "option--highlighted": isHighlighted,
+            });
+            return html `
+              <li
+                id="option-${index}"
+                class=${optionClasses}
+                role="option"
+                aria-selected=${isSelected}
+                @click=${(e) => this._handleOptionClick(option, e)}
+                @mouseenter=${() => this._handleOptionMouseenter(index)}
+              >
+                ${option.label}
+              </li>
+            `;
+        })}
+        </ul>
+
+        ${this.helperText && !hasError
+            ? html `<span class="helper">${this.helperText}</span>`
+            : nothing}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], OhSelect.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], OhSelect.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], OhSelect.prototype, "name", void 0);
+__decorate([
+    property({ type: Array })
+], OhSelect.prototype, "options", void 0);
+__decorate([
+    property({ type: String })
+], OhSelect.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OhSelect.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], OhSelect.prototype, "helperText", void 0);
+__decorate([
+    property({ type: String })
+], OhSelect.prototype, "errorText", void 0);
+__decorate([
+    state()
+], OhSelect.prototype, "_open", void 0);
+__decorate([
+    state()
+], OhSelect.prototype, "_highlightedIndex", void 0);
+__decorate([
+    state()
+], OhSelect.prototype, "_focused", void 0);
+__decorate([
+    query(".trigger")
+], OhSelect.prototype, "_trigger", void 0);
+__decorate([
+    query(".dropdown")
+], OhSelect.prototype, "_listbox", void 0);
+OhSelect = __decorate([
+    customElement("oh-select")
+], OhSelect);
+export { OhSelect };
+//# sourceMappingURL=oh-select.js.map

package/dist/oh-select.js.map

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

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

@@ -0,0 +1,37 @@
+/**
+ * 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
+ */
+import { OhElement } from "./base.js";
+export declare class OhSkipLink extends OhElement {
+    static styles: import("lit").CSSResult[];
+    href: string;
+    text: string;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "oh-skip-link": OhSkipLink;
+    }
+}
+//# sourceMappingURL=oh-skip-link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oh-skip-link.d.ts","sourceRoot":"","sources":["../src/oh-skip-link.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,qBACa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,4BAkFpB;IAGF,IAAI,SAAW;IAGf,IAAI,SAA0B;IAE9B,MAAM;CAWP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}