@orange-halo/components 1.0.0

package/dist/oh-modal.js

@@ -0,0 +1,450 @@
+/**
+ * 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
+ */
+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, query, state } from "lit/decorators.js";
+import { OhElement, baseStyles } from "./base.js";
+let OhModal = class OhModal extends OhElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.heading = "";
+        this.dismissible = true;
+        this.size = "md";
+        this._previousActiveElement = null;
+    }
+    static { this.styles = [
+        baseStyles,
+        css `
+      /* ═══════════════════════════════════════════════════════════════
+         ORANGE HALO MODAL
+         Chunky • Lifted • Accessible
+         ═══════════════════════════════════════════════════════════════ */
+
+      :host {
+        display: contents;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         BACKDROP
+         ═══════════════════════════════════════════════════════════════ */
+
+      .backdrop {
+        position: fixed;
+        inset: 0;
+        z-index: 1000;
+        
+        /* Warm semi-transparent overlay */
+        background-color: rgba(61, 50, 41, 0.6);
+        
+        /* Flexbox centering */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--oh-spacing-4);
+        
+        /* Animation */
+        opacity: 0;
+        visibility: hidden;
+        transition: 
+          opacity var(--oh-motion-gentle, 200ms) ease,
+          visibility var(--oh-motion-gentle, 200ms) ease;
+      }
+
+      .backdrop--open {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         DIALOG PANEL
+         ═══════════════════════════════════════════════════════════════ */
+
+      .modal {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        max-height: calc(100vh - var(--oh-spacing-8));
+        max-width: 100%;
+        
+        /* Warm surface */
+        background-color: var(--oh-color-surface-base);
+        
+        /* Chunky border */
+        border: var(--oh-input-base-border-width, 2.5px) solid var(--oh-color-border-emphasis);
+        border-radius: var(--oh-radius-md);
+        
+        /* Offset shadow — lifted surface */
+        box-shadow: 6px 6px 0 0 rgba(107, 93, 77, 0.25);
+        
+        /* Animation */
+        transform: scale(0.95) translateY(10px);
+        opacity: 0;
+        transition: 
+          transform var(--oh-motion-gentle, 200ms) var(--oh-motion-ease-playful, cubic-bezier(0.34, 1.56, 0.64, 1)),
+          opacity var(--oh-motion-gentle, 200ms) ease;
+      }
+
+      .backdrop--open .modal {
+        transform: scale(1) translateY(0);
+        opacity: 1;
+      }
+
+      /* Size variants */
+      .modal--sm {
+        width: 400px;
+      }
+
+      .modal--md {
+        width: 560px;
+      }
+
+      .modal--lg {
+        width: 720px;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         HEADER
+         ═══════════════════════════════════════════════════════════════ */
+
+      .modal-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--oh-spacing-4);
+        padding: var(--oh-spacing-4) var(--oh-spacing-5);
+        border-bottom: var(--oh-input-base-border-width, 2.5px) solid var(--oh-color-border-subtle);
+      }
+
+      .modal-title {
+        margin: 0;
+        font-family: var(--oh-font-family-sans);
+        font-size: var(--oh-font-size-xl);
+        font-weight: var(--oh-font-weight-semibold);
+        color: var(--oh-color-text-primary);
+        line-height: var(--oh-font-line-height-tight, 1.25);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         CLOSE BUTTON
+         ═══════════════════════════════════════════════════════════════ */
+
+      .modal-close {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        gap: var(--oh-spacing-1);
+        
+        padding: var(--oh-spacing-1) var(--oh-spacing-2);
+        
+        font-family: var(--oh-font-family-sans);
+        font-size: var(--oh-font-size-base);
+        font-weight: var(--oh-font-weight-medium);
+        
+        background: transparent;
+        border: none;
+        border-radius: var(--oh-radius-sm);
+        cursor: pointer;
+        color: var(--oh-color-text-primary);
+        
+        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)),
+          background-color var(--oh-motion-quick, 120ms) ease;
+      }
+
+      .modal-close:hover {
+        background-color: rgba(0, 0, 0, 0.08);
+        transform: translate(-2px, -2px);
+        box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.15);
+      }
+
+      .modal-close:active {
+        transform: translate(1px, 1px);
+        box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.15);
+      }
+
+      .modal-close:focus-visible {
+        outline: none;
+        text-decoration: underline;
+        text-underline-offset: 3px;
+      }
+
+      .modal-close svg {
+        width: 1rem;
+        height: 1rem;
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         BODY
+         ═══════════════════════════════════════════════════════════════ */
+
+      .modal-body {
+        flex: 1;
+        overflow-y: auto;
+        padding: var(--oh-spacing-5);
+        
+        font-family: var(--oh-font-family-sans);
+        font-size: var(--oh-font-size-base);
+        line-height: var(--oh-font-line-height-normal);
+        color: var(--oh-color-text-primary);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         FOOTER
+         ═══════════════════════════════════════════════════════════════ */
+
+      .modal-footer {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: var(--oh-spacing-6);
+        padding: var(--oh-spacing-4) var(--oh-spacing-5);
+        border-top: var(--oh-input-base-border-width, 2.5px) solid var(--oh-color-border-subtle);
+      }
+
+      /* Hide footer if empty */
+      .modal-footer:empty {
+        display: none;
+      }
+
+      /* Style slotted footer content */
+      .modal-footer ::slotted(*) {
+        display: flex;
+        align-items: center;
+        gap: var(--oh-spacing-6);
+      }
+
+      /* ═══════════════════════════════════════════════════════════════
+         REDUCED MOTION
+         ═══════════════════════════════════════════════════════════════ */
+
+      @media (prefers-reduced-motion: reduce) {
+        .backdrop,
+        .modal,
+        .modal-close {
+          transition-duration: 0.01ms !important;
+        }
+        
+        .modal {
+          transform: none !important;
+        }
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this._handleKeyDown = this._handleKeyDown.bind(this);
+    }
+    updated(changedProperties) {
+        if (changedProperties.has("open")) {
+            if (this.open) {
+                this._onOpen();
+            }
+            else {
+                this._onClose();
+            }
+        }
+    }
+    _onOpen() {
+        // Store the currently focused element
+        this._previousActiveElement = document.activeElement;
+        // Prevent body scroll
+        document.body.style.overflow = "hidden";
+        // Add keyboard listener
+        document.addEventListener("keydown", this._handleKeyDown);
+        // Focus the close button or first focusable element
+        requestAnimationFrame(() => {
+            if (this._closeButton) {
+                this._closeButton.focus();
+            }
+            else {
+                this._focusFirstElement();
+            }
+        });
+    }
+    _onClose() {
+        // Restore body scroll
+        document.body.style.overflow = "";
+        // Remove keyboard listener
+        document.removeEventListener("keydown", this._handleKeyDown);
+        // Return focus to previous element
+        if (this._previousActiveElement) {
+            this._previousActiveElement.focus();
+            this._previousActiveElement = null;
+        }
+    }
+    _handleKeyDown(event) {
+        if (event.key === "Escape" && this.dismissible) {
+            this._requestClose();
+            return;
+        }
+        if (event.key === "Tab") {
+            this._trapFocus(event);
+        }
+    }
+    _trapFocus(event) {
+        const focusableElements = this._getFocusableElements();
+        if (focusableElements.length === 0)
+            return;
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        if (event.shiftKey) {
+            // Shift + Tab
+            if (document.activeElement === firstElement) {
+                event.preventDefault();
+                lastElement.focus();
+            }
+        }
+        else {
+            // Tab
+            if (document.activeElement === lastElement) {
+                event.preventDefault();
+                firstElement.focus();
+            }
+        }
+    }
+    _getFocusableElements() {
+        const selector = [
+            'button:not([disabled])',
+            'a[href]',
+            'input:not([disabled])',
+            'select:not([disabled])',
+            'textarea:not([disabled])',
+            '[tabindex]:not([tabindex="-1"])',
+        ].join(', ');
+        const shadowElements = Array.from(this.shadowRoot?.querySelectorAll(selector) || []);
+        const slottedElements = Array.from(this.querySelectorAll(selector));
+        return [...shadowElements, ...slottedElements];
+    }
+    _focusFirstElement() {
+        const focusableElements = this._getFocusableElements();
+        if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+        }
+    }
+    _handleBackdropClick(event) {
+        if (event.target === event.currentTarget && this.dismissible) {
+            this._requestClose();
+        }
+    }
+    _requestClose() {
+        this.emit("oh-close");
+        this.open = false;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener("keydown", this._handleKeyDown);
+        document.body.style.overflow = "";
+    }
+    render() {
+        const backdropClasses = this.classMap({
+            backdrop: true,
+            "backdrop--open": this.open,
+        });
+        const modalClasses = this.classMap({
+            modal: true,
+            [`modal--${this.size}`]: true,
+        });
+        const labelId = this.heading ? "modal-title" : undefined;
+        return html `
+      <div
+        class=${backdropClasses}
+        @click=${this._handleBackdropClick}
+        aria-hidden=${!this.open}
+      >
+        <div
+          class=${modalClasses}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby=${labelId || nothing}
+          part="modal"
+        >
+          ${this.heading || this.dismissible
+            ? html `
+                <header class="modal-header" part="header">
+                  ${this.heading
+                ? html `<h2 id="modal-title" class="modal-title">${this.heading}</h2>`
+                : html `<span></span>`}
+                  ${this.dismissible
+                ? html `
+                        <button
+                          class="modal-close"
+                          type="button"
+                          @click=${this._requestClose}
+                          part="close"
+                        >
+                          <span>Close</span>
+                          <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+                          </svg>
+                        </button>
+                      `
+                : nothing}
+                </header>
+              `
+            : nothing}
+
+          <div class="modal-body" part="body">
+            <slot></slot>
+          </div>
+
+          <footer class="modal-footer" part="footer">
+            <slot name="footer"></slot>
+          </footer>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OhModal.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], OhModal.prototype, "heading", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OhModal.prototype, "dismissible", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], OhModal.prototype, "size", void 0);
+__decorate([
+    state()
+], OhModal.prototype, "_previousActiveElement", void 0);
+__decorate([
+    query(".modal-close")
+], OhModal.prototype, "_closeButton", void 0);
+OhModal = __decorate([
+    customElement("oh-modal")
+], OhModal);
+export { OhModal };
+//# sourceMappingURL=oh-modal.js.map

package/dist/oh-modal.js.map

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

package/dist/oh-navbar.d.ts

@@ -0,0 +1,49 @@
+/**
+ * oh-navbar
+ *
+ * A responsive navigation bar component with logo, links, and mobile drawer.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. LAYOUT
+ *    - Logo on the left
+ *    - Navigation links on the right (desktop)
+ *    - Hamburger menu on mobile triggers drawer
+ *
+ * 2. STYLING
+ *    - Surface base background
+ *    - Chunky bottom border
+ *    - Links use oh-link styling
+ *
+ * 3. RESPONSIVE
+ *    - Desktop: horizontal links
+ *    - Mobile (< 768px): hamburger + drawer
+ *
+ * @element oh-navbar
+ *
+ * @slot logo - Slot for logo/brand element
+ * @slot - Default slot for navigation links
+ *
+ * @cssprop --oh-navbar-breakpoint - Mobile breakpoint (default: 768px)
+ */
+import { OhElement } from "./base.js";
+import "./oh-container.js";
+import "./oh-cluster.js";
+import "./oh-drawer.js";
+import "./oh-button.js";
+import "./oh-icon.js";
+export declare class OhNavbar extends OhElement {
+    static styles: import("lit").CSSResult[];
+    /** Heading shown in the mobile drawer */
+    drawerHeading: string;
+    private _drawerOpen;
+    private _openDrawer;
+    private _closeDrawer;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "oh-navbar": OhNavbar;
+    }
+}
+//# sourceMappingURL=oh-navbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oh-navbar.d.ts","sourceRoot":"","sources":["../src/oh-navbar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BA2EpB;IAEF,yCAAyC;IAEzC,aAAa,SAAU;IAGvB,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAIpB,MAAM;CA0CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/oh-navbar.js

@@ -0,0 +1,185 @@
+/**
+ * oh-navbar
+ *
+ * A responsive navigation bar component with logo, links, and mobile drawer.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. LAYOUT
+ *    - Logo on the left
+ *    - Navigation links on the right (desktop)
+ *    - Hamburger menu on mobile triggers drawer
+ *
+ * 2. STYLING
+ *    - Surface base background
+ *    - Chunky bottom border
+ *    - Links use oh-link styling
+ *
+ * 3. RESPONSIVE
+ *    - Desktop: horizontal links
+ *    - Mobile (< 768px): hamburger + drawer
+ *
+ * @element oh-navbar
+ *
+ * @slot logo - Slot for logo/brand element
+ * @slot - Default slot for navigation links
+ *
+ * @cssprop --oh-navbar-breakpoint - Mobile breakpoint (default: 768px)
+ */
+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";
+import "./oh-container.js";
+import "./oh-cluster.js";
+import "./oh-drawer.js";
+import "./oh-button.js";
+import "./oh-icon.js";
+let OhNavbar = class OhNavbar extends OhElement {
+    constructor() {
+        super(...arguments);
+        /** Heading shown in the mobile drawer */
+        this.drawerHeading = "Menu";
+        this._drawerOpen = false;
+    }
+    static { this.styles = [
+        baseStyles,
+        css `
+      :host {
+        display: block;
+        background-color: var(--oh-color-surface-base);
+        border-bottom: var(--oh-border-width-md) solid var(--oh-color-border-default);
+        box-shadow: 0 2px 8px var(--oh-focus-glow-color);
+        font-family: var(--oh-font-family-sans);
+        font-size: var(--oh-font-size-base);
+      }
+
+      .navbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--oh-spacing-4) 0;
+      }
+
+      /* Logo slot */
+      .navbar__logo {
+        display: flex;
+        align-items: center;
+      }
+
+      .navbar__logo ::slotted(a) {
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        height: var(--oh-navbar-logo-height, 40px);
+      }
+
+      .navbar__logo ::slotted(img) {
+        height: var(--oh-navbar-logo-height, 40px);
+        width: auto;
+      }
+
+      /* Desktop links - pushed to the right */
+      .navbar__links {
+        margin-left: auto;
+        width: auto; /* Override oh-cluster's width: 100% */
+      }
+
+      /* Mobile toggle - hidden on desktop */
+      .navbar__mobile-toggle {
+        display: none;
+      }
+
+      /* Drawer nav styling */
+      .drawer-nav {
+        display: flex;
+        flex-direction: column;
+        gap: var(--oh-spacing-2);
+      }
+
+      .drawer-nav ::slotted(oh-link) {
+        padding: var(--oh-spacing-3) 0;
+        border-bottom: 1px solid var(--oh-color-border-subtle);
+      }
+
+      .drawer-nav ::slotted(oh-link:last-child) {
+        border-bottom: none;
+      }
+
+      /* Mobile styles */
+      @media (max-width: 768px) {
+        .navbar__links {
+          display: none;
+        }
+
+        .navbar__mobile-toggle {
+          display: block;
+        }
+      }
+    `,
+    ]; }
+    _openDrawer() {
+        this._drawerOpen = true;
+    }
+    _closeDrawer() {
+        this._drawerOpen = false;
+    }
+    render() {
+        return html `
+      <oh-container size="lg">
+        <nav class="navbar">
+          <!-- Logo -->
+          <div class="navbar__logo">
+            <slot name="logo"></slot>
+          </div>
+
+          <!-- Desktop Navigation Links -->
+          <oh-cluster gap="lg" align="center" class="navbar__links">
+            <slot></slot>
+          </oh-cluster>
+
+          <!-- Mobile Menu Toggle -->
+          <div class="navbar__mobile-toggle">
+            <oh-button
+              variant="primary"
+              size="sm"
+              icon-only
+              aria-label="Open navigation menu"
+              @click=${this._openDrawer}
+            >
+              <oh-icon name="menu"></oh-icon>
+            </oh-button>
+          </div>
+        </nav>
+      </oh-container>
+
+      <!-- Mobile Navigation Drawer -->
+      <oh-drawer
+        position="left"
+        heading=${this.drawerHeading}
+        ?open=${this._drawerOpen}
+        @oh-close=${this._closeDrawer}
+      >
+        <nav class="drawer-nav">
+          <slot name="mobile"></slot>
+        </nav>
+      </oh-drawer>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: "drawer-heading" })
+], OhNavbar.prototype, "drawerHeading", void 0);
+__decorate([
+    state()
+], OhNavbar.prototype, "_drawerOpen", void 0);
+OhNavbar = __decorate([
+    customElement("oh-navbar")
+], OhNavbar);
+export { OhNavbar };
+//# sourceMappingURL=oh-navbar.js.map