@orange-halo/components 1.0.0

package/dist/oh-accordion.js

@@ -0,0 +1,387 @@
+/**
+ * oh-accordion
+ *
+ * Accessible accordion with two variants: subtle (inline) and standout (boxed).
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. TWO VARIANTS
+ *    - Subtle: Minimal, blends with content, follows link styling rules
+ *    - Standout: Chunky border, shadow, lifts on hover
+ *
+ * 2. CONSISTENT ICON
+ *    - Chevron that rotates 90° when expanded
+ *    - Same icon for both variants
+ *
+ * 3. ACCESSIBLE
+ *    - Button trigger with aria-expanded
+ *    - Content region with aria-hidden
+ *    - Keyboard support (Enter/Space)
+ *    - Focus state with underline
+ *
+ * @element oh-accordion
+ */
+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 { unsafeStatic, html as staticHtml } from "lit/static-html.js";
+import { customElement, property, state } from "lit/decorators.js";
+import { OhElement, baseStyles } from "./base.js";
+let OhAccordion = class OhAccordion extends OhElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.variant = "subtle";
+        this.headingLevel = 3;
+        this._expandedItems = new Set();
+    }
+    static { this.styles = [
+        baseStyles,
+        css `
+      /* ═══════════════════════════════════════════════════════════════
+         ORANGE HALO ACCORDION
+         Subtle (inline) • Standout (boxed) • Accessible
+         ═══════════════════════════════════════════════════════════════ */
+
+      :host {
+        display: block;
+        font-family: var(--oh-font-family-sans);
+        font-size: var(--oh-font-size-base);
+        line-height: var(--oh-font-line-height-normal);
+      }
+
+      .accordion {
+        display: flex;
+        flex-direction: column;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         SUBTLE VARIANT — Inline, minimal, follows link rules
+         ═══════════════════════════════════════════════════════════════ */
+
+      .accordion--subtle {
+        gap: 0;
+      }
+
+      .accordion--subtle .accordion-item {
+        border-bottom: 1px solid var(--oh-color-border-subtle);
+      }
+
+      .accordion--subtle .accordion-item:last-child {
+        border-bottom: none;
+      }
+
+      /* Heading wrapper — reset default heading styles */
+      .accordion-heading {
+        margin: 0;
+        font-size: inherit;
+        font-weight: inherit;
+      }
+
+      .accordion--subtle .accordion-trigger {
+        display: flex;
+        align-items: center;
+        gap: var(--oh-spacing-2);
+        width: 100%;
+        padding: var(--oh-spacing-3) 0;
+        
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        text-align: left;
+        
+        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);
+      }
+
+      .accordion--subtle .accordion-trigger:focus-visible {
+        outline: none;
+      }
+
+      /* Text span with dashed underline — follows link rules */
+      .accordion--subtle .accordion-text {
+        position: relative;
+        padding-bottom: 2px;
+      }
+
+      .accordion--subtle .accordion-text::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: 2px;
+        background-image: repeating-linear-gradient(
+          to right,
+          var(--oh-color-text-link) 0,
+          var(--oh-color-text-link) 4px,
+          transparent 4px,
+          transparent 8px
+        );
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        transform-origin: right;
+        transition: transform var(--oh-motion-relaxed, 300ms) var(--oh-motion-ease-gentle, ease);
+      }
+
+      .accordion--subtle .accordion-trigger:hover .accordion-text::after {
+        transform: scaleX(0);
+      }
+
+      .accordion--subtle .accordion-trigger:focus-visible .accordion-text::after {
+        background-image: none;
+        background-color: var(--oh-color-brand-primary);
+        height: 2px;
+        transform: scaleX(1);
+      }
+
+      .accordion--subtle .accordion-content {
+        padding: 0 0 var(--oh-spacing-4) 0;
+        color: var(--oh-color-text-primary);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         STANDOUT VARIANT — Boxed, chunky, lifts on hover
+         ═══════════════════════════════════════════════════════════════ */
+
+      .accordion--standout {
+        gap: var(--oh-spacing-3);
+      }
+
+      .accordion--standout .accordion-item {
+        background-color: var(--oh-color-surface-raised);
+        border: var(--oh-input-base-border-width, 2.5px) solid var(--oh-color-border-emphasis);
+        border-radius: var(--oh-radius-md);
+        overflow: hidden;
+        
+        /* Base shadow and lift animation */
+        box-shadow: 3px 3px 0 0 rgba(107, 93, 77, 0.15);
+        transition: 
+          transform var(--oh-motion-snappy, 150ms) var(--oh-motion-ease-playful, cubic-bezier(0.34, 1.56, 0.64, 1)),
+          box-shadow var(--oh-motion-snappy, 150ms) var(--oh-motion-ease-playful, cubic-bezier(0.34, 1.56, 0.64, 1));
+      }
+
+      /* Lift whole accordion only when trigger is hovered */
+      .accordion--standout .accordion-item:has(.accordion-trigger:hover) {
+        transform: translate(-2px, -2px);
+        box-shadow: 5px 5px 0 0 rgba(107, 93, 77, 0.2);
+      }
+
+      .accordion--standout .accordion-item[data-expanded="true"] {
+        border-color: var(--oh-color-brand-primary);
+      }
+
+      .accordion--standout .accordion-trigger {
+        display: flex;
+        align-items: center;
+        gap: var(--oh-spacing-3);
+        width: 100%;
+        padding: var(--oh-spacing-4);
+        
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        text-align: left;
+        
+        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);
+      }
+
+      .accordion--standout .accordion-trigger:focus-visible {
+        outline: none;
+      }
+
+      .accordion--standout .accordion-trigger:focus-visible .accordion-text {
+        text-decoration: underline;
+        text-underline-offset: 3px;
+      }
+
+      /* Text span for standout — dashed underline appears on hover */
+      .accordion--standout .accordion-text {
+        position: relative;
+        padding-bottom: 2px;
+      }
+
+      .accordion--standout .accordion-text::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: 2px;
+        background-image: repeating-linear-gradient(
+          to right,
+          var(--oh-color-text-primary) 0,
+          var(--oh-color-text-primary) 4px,
+          transparent 4px,
+          transparent 8px
+        );
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        transform-origin: left;
+        transform: scaleX(0);
+        transition: transform var(--oh-motion-relaxed, 300ms) var(--oh-motion-ease-gentle, ease);
+      }
+
+      .accordion--standout .accordion-trigger:hover .accordion-text::after {
+        transform: scaleX(1);
+      }
+
+      .accordion--standout .accordion-content {
+        padding: var(--oh-spacing-4);
+        color: var(--oh-color-text-primary);
+        border-top: 1px solid var(--oh-color-border-subtle);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         ICON — Chevron, rotates on expand
+         ═══════════════════════════════════════════════════════════════ */
+
+      .accordion-icon {
+        flex-shrink: 0;
+        width: 1rem;
+        height: 1rem;
+        transition: transform var(--oh-motion-gentle, 200ms) var(--oh-motion-ease-gentle, ease);
+      }
+
+      .accordion--subtle .accordion-icon {
+        color: var(--oh-color-text-link);
+      }
+
+      .accordion--standout .accordion-icon {
+        color: var(--oh-color-text-secondary);
+      }
+
+      .accordion-trigger[aria-expanded="true"] .accordion-icon {
+        transform: rotate(90deg);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         CONTENT ANIMATION
+         ═══════════════════════════════════════════════════════════════ */
+
+      .accordion-panel {
+        display: grid;
+        grid-template-rows: 0fr;
+        transition: grid-template-rows var(--oh-motion-gentle, 200ms) ease;
+      }
+
+      .accordion-panel[data-expanded="true"] {
+        grid-template-rows: 1fr;
+      }
+
+      .accordion-panel-inner {
+        overflow: hidden;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         REDUCED MOTION
+         ═══════════════════════════════════════════════════════════════ */
+
+      @media (prefers-reduced-motion: reduce) {
+        .accordion--standout .accordion-item,
+        .accordion-icon,
+        .accordion-panel,
+        .accordion--subtle .accordion-text::after {
+          transition-duration: 0.01ms !important;
+        }
+        
+        .accordion--standout .accordion-item:has(.accordion-trigger:hover) {
+          transform: none !important;
+        }
+      }
+    `,
+    ]; }
+    _toggleItem(index) {
+        if (this._expandedItems.has(index)) {
+            this._expandedItems.delete(index);
+        }
+        else {
+            this._expandedItems.add(index);
+        }
+        this._expandedItems = new Set(this._expandedItems);
+    }
+    _isExpanded(index) {
+        return this._expandedItems.has(index);
+    }
+    render() {
+        if (this.items.length === 0) {
+            return nothing;
+        }
+        const accordionClasses = this.classMap({
+            accordion: true,
+            [`accordion--${this.variant}`]: true,
+        });
+        return html `
+      <div class=${accordionClasses}>
+        ${this.items.map((item, index) => {
+            const isExpanded = this._isExpanded(index);
+            const triggerId = `accordion-trigger-${index}`;
+            const panelId = `accordion-panel-${index}`;
+            const headingTag = unsafeStatic(`h${this.headingLevel}`);
+            return staticHtml `
+            <div 
+              class="accordion-item" 
+              data-expanded=${isExpanded ? "true" : "false"}
+            >
+              <${headingTag} class="accordion-heading">
+                <button
+                  id=${triggerId}
+                  class="accordion-trigger"
+                  type="button"
+                  aria-expanded=${isExpanded ? "true" : "false"}
+                  aria-controls=${panelId}
+                  @click=${() => this._toggleItem(index)}
+                >
+                <svg class="accordion-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M6 4L10 8L6 12" />
+                </svg>
+                <span class="accordion-text">${item.heading}</span>
+                </button>
+              </${headingTag}>
+              <div
+                id=${panelId}
+                class="accordion-panel"
+                role="region"
+                aria-labelledby=${triggerId}
+                aria-hidden=${!isExpanded}
+                data-expanded=${isExpanded ? "true" : "false"}
+              >
+                <div class="accordion-panel-inner">
+                  <div class="accordion-content">
+                    ${item.content}
+                  </div>
+                </div>
+              </div>
+            </div>
+          `;
+        })}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], OhAccordion.prototype, "items", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], OhAccordion.prototype, "variant", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: "heading-level" })
+], OhAccordion.prototype, "headingLevel", void 0);
+__decorate([
+    state()
+], OhAccordion.prototype, "_expandedItems", void 0);
+OhAccordion = __decorate([
+    customElement("oh-accordion")
+], OhAccordion);
+export { OhAccordion };
+//# sourceMappingURL=oh-accordion.js.map

package/dist/oh-accordion.js.map

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

package/dist/oh-alert.d.ts

@@ -0,0 +1,48 @@
+/**
+ * oh-alert
+ *
+ * A dismissible alert for feedback messages.
+ * Subtle backgrounds only, supports rich content including links.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. SUBTLE ONLY
+ *    - Muted backgrounds, not overwhelming
+ *    - Matches badge subtle variants
+ *
+ * 2. DISMISSIBLE
+ *    - Optional close button
+ *    - Emits event on dismiss
+ *
+ * 3. RICH CONTENT
+ *    - Supports text with links
+ *    - Default slot for flexible content
+ *
+ * 4. ACCESSIBLE
+ *    - role="alert" for important messages
+ *    - Close button has accessible label
+ *    - Links within inherit appropriate styling
+ *
+ * @element oh-alert
+ */
+import { OhElement } from "./base.js";
+export type AlertVariant = "success" | "error" | "warning" | "info";
+export declare class OhAlert extends OhElement {
+    static styles: import("lit").CSSResult[];
+    variant: AlertVariant;
+    dismissible: boolean;
+    /**
+     * When true, adds role="alert" for screen reader announcement.
+     * Use for dynamically inserted alerts only, not for static page content.
+     */
+    live: boolean;
+    private _handleDismiss;
+    private _getIcon;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "oh-alert": OhAlert;
+    }
+}
+//# sourceMappingURL=oh-alert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oh-alert.d.ts","sourceRoot":"","sources":["../src/oh-alert.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEpE,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BAwNpB;IAGF,OAAO,EAAE,YAAY,CAAU;IAG/B,WAAW,UAAS;IAEpB;;;OAGG;IAEH,IAAI,UAAS;IAEb,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,QAAQ;IA8BhB,MAAM;CAgCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}