@orange-halo/components 1.0.0

package/dist/oh-drawer.js

@@ -0,0 +1,284 @@
+/**
+ * oh-drawer
+ *
+ * A slide-out drawer component for mobile navigation and side panels.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. POSITIONING
+ *    - Slides in from left or right
+ *    - Full height, configurable width
+ *    - Overlays content with warm backdrop
+ *
+ * 2. STYLING
+ *    - Chunky border on the edge
+ *    - Warm surface background
+ *    - Smooth slide animation
+ *
+ * 3. ACCESSIBILITY
+ *    - Focus trap when open
+ *    - Escape key closes
+ *    - aria-modal and role="dialog"
+ *    - Returns focus to trigger on close
+ *
+ * @element oh-drawer
+ *
+ * @slot - Default slot for drawer content
+ *
+ * @fires oh-close - When the drawer is closed
+ *
+ * @cssprop --oh-drawer-width - Width of the drawer (default: 280px)
+ */
+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, query } from "lit/decorators.js";
+import { OhElement, baseStyles } from "./base.js";
+import { trapFocus } from "@orange-halo/utils";
+import "./oh-button.js";
+import "./oh-icon.js";
+let OhDrawer = class OhDrawer extends OhElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the drawer is open */
+        this.open = false;
+        /** Position of the drawer */
+        this.position = "left";
+        /** Element that triggered the drawer (for focus return) */
+        this._triggerElement = null;
+    }
+    static { this.styles = [
+        baseStyles,
+        css `
+      :host {
+        display: contents;
+      }
+
+      /* Backdrop */
+      .drawer-backdrop {
+        position: fixed;
+        inset: 0;
+        background-color: var(--oh-color-surface-overlay);
+        z-index: 999;
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity var(--oh-motion-relaxed) var(--oh-motion-ease-gentle),
+                    visibility var(--oh-motion-relaxed) var(--oh-motion-ease-gentle);
+      }
+
+      .drawer-backdrop.is-open {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      /* Drawer panel */
+      .drawer {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        width: var(--oh-drawer-width, 280px);
+        max-width: calc(100vw - 48px);
+        background-color: var(--oh-color-surface-base);
+        z-index: 1000;
+        display: flex;
+        flex-direction: column;
+        transition: transform var(--oh-motion-relaxed) var(--oh-motion-ease-gentle);
+      }
+
+      /* Left position (default) */
+      .drawer--left {
+        left: 0;
+        border-right: var(--oh-border-width-lg) solid var(--oh-color-border-default);
+        box-shadow: var(--oh-shadow-lg);
+        transform: translateX(-100%);
+      }
+
+      .drawer--left.is-open {
+        transform: translateX(0);
+      }
+
+      /* Right position */
+      .drawer--right {
+        right: 0;
+        border-left: var(--oh-border-width-lg) solid var(--oh-color-border-default);
+        box-shadow: calc(-1 * var(--oh-shadow-offset-x, 4px)) var(--oh-shadow-offset-y, 4px) 0 0 var(--oh-color-warm-dune);
+        transform: translateX(100%);
+      }
+
+      .drawer--right.is-open {
+        transform: translateX(0);
+      }
+
+      /* Header */
+      .drawer__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--oh-spacing-4);
+        border-bottom: var(--oh-border-width-md) solid var(--oh-color-border-default);
+        flex-shrink: 0;
+      }
+
+      .drawer__title {
+        font-family: var(--oh-font-family-sans);
+        font-size: var(--oh-font-size-lg);
+        font-weight: var(--oh-font-weight-semibold);
+        color: var(--oh-color-text-primary);
+        margin: 0;
+      }
+
+      /* Content */
+      .drawer__content {
+        flex: 1;
+        overflow-y: auto;
+        padding: var(--oh-spacing-4);
+      }
+
+      /* Reduced motion */
+      @media (prefers-reduced-motion: reduce) {
+        .drawer-backdrop,
+        .drawer {
+          transition: none;
+        }
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this._handleKeydown = this._handleKeydown.bind(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener("keydown", this._handleKeydown);
+        this._cleanupFocusTrap?.();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has("open")) {
+            if (this.open) {
+                this._onOpen();
+            }
+            else {
+                this._onClose();
+            }
+        }
+    }
+    _onOpen() {
+        // Store the trigger element for focus return
+        this._triggerElement = document.activeElement;
+        // Prevent body scroll
+        document.body.style.overflow = "hidden";
+        // Add keydown listener
+        document.addEventListener("keydown", this._handleKeydown);
+        // Set up focus trap after render
+        requestAnimationFrame(() => {
+            if (this._drawer) {
+                this._cleanupFocusTrap = trapFocus(this._drawer);
+                // Focus the close button
+                const closeBtn = this._drawer.querySelector("oh-button");
+                closeBtn?.focus();
+            }
+        });
+    }
+    _onClose() {
+        // Restore body scroll
+        document.body.style.overflow = "";
+        // Remove keydown listener
+        document.removeEventListener("keydown", this._handleKeydown);
+        // Clean up focus trap
+        this._cleanupFocusTrap?.();
+        this._cleanupFocusTrap = undefined;
+        // Return focus to trigger
+        this._triggerElement?.focus();
+        this._triggerElement = null;
+    }
+    _handleKeydown(event) {
+        if (event.key === "Escape" && this.open) {
+            event.preventDefault();
+            this._close();
+        }
+    }
+    _close() {
+        this.open = false;
+        this.dispatchEvent(new CustomEvent("oh-close", { bubbles: true, composed: true }));
+    }
+    _handleBackdropClick() {
+        this._close();
+    }
+    /** Public method to open the drawer */
+    show() {
+        this.open = true;
+    }
+    /** Public method to close the drawer */
+    hide() {
+        this._close();
+    }
+    render() {
+        const drawerClasses = [
+            "drawer",
+            `drawer--${this.position}`,
+            this.open ? "is-open" : "",
+        ].filter(Boolean).join(" ");
+        const backdropClasses = [
+            "drawer-backdrop",
+            this.open ? "is-open" : "",
+        ].filter(Boolean).join(" ");
+        return html `
+      <div
+        class=${backdropClasses}
+        @click=${this._handleBackdropClick}
+        aria-hidden="true"
+      ></div>
+
+      <div
+        class=${drawerClasses}
+        role="dialog"
+        aria-modal="true"
+        aria-label=${this.heading || "Navigation menu"}
+        ?inert=${!this.open}
+      >
+        <div class="drawer__header">
+          ${this.heading
+            ? html `<h2 class="drawer__title">${this.heading}</h2>`
+            : html `<span></span>`}
+          <oh-button
+            variant="secondary"
+            size="sm"
+            icon-only
+            aria-label="Close menu"
+            @click=${this._close}
+          >
+            <oh-icon name="close"></oh-icon>
+          </oh-button>
+        </div>
+
+        <div class="drawer__content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OhDrawer.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], OhDrawer.prototype, "position", void 0);
+__decorate([
+    property({ type: String })
+], OhDrawer.prototype, "heading", void 0);
+__decorate([
+    state()
+], OhDrawer.prototype, "_triggerElement", void 0);
+__decorate([
+    query(".drawer")
+], OhDrawer.prototype, "_drawer", void 0);
+OhDrawer = __decorate([
+    customElement("oh-drawer")
+], OhDrawer);
+export { OhDrawer };
+//# sourceMappingURL=oh-drawer.js.map

package/dist/oh-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oh-drawer.js","sourceRoot":"","sources":["../src/oh-drawer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAGf,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QAkGL,iCAAiC;QAEjC,SAAI,GAAG,KAAK,CAAC;QAEb,6BAA6B;QAE7B,aAAQ,GAAqB,MAAM,CAAC;QAMpC,2DAA2D;QAEnD,oBAAe,GAAuB,IAAI,CAAC;IA0IrD,CAAC;aAzPiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4FF;KACF,AA/FqB,CA+FpB;IAuBF,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvD,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAC7D,IAAI,CAAC,iBAAiB,EAAE,EAAE,CAAC;IAC7B,CAAC;IAED,OAAO,CAAC,iBAAuC;QAC7C,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YAClC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,CAAC;QACH,CAAC;IACH,CAAC;IAEO,OAAO;QACb,6CAA6C;QAC7C,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,aAA4B,CAAC;QAE7D,sBAAsB;QACtB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAExC,uBAAuB;QACvB,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAE1D,iCAAiC;QACjC,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBACjD,yBAAyB;gBACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAc,WAAW,CAAC,CAAC;gBACtE,QAAQ,EAAE,KAAK,EAAE,CAAC;YACpB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,QAAQ;QACd,sBAAsB;QACtB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;QAElC,0BAA0B;QAC1B,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAE7D,sBAAsB;QACtB,IAAI,CAAC,iBAAiB,EAAE,EAAE,CAAC;QAC3B,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;QAEnC,0BAA0B;QAC1B,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,CAAC;QAC9B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;IAC9B,CAAC;IAEO,cAAc,CAAC,KAAoB;QACzC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACxC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;IACH,CAAC;IAEO,MAAM;QACZ,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACrF,CAAC;IAEO,oBAAoB;QAC1B,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,uCAAuC;IACvC,IAAI;QACF,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAED,wCAAwC;IACxC,IAAI;QACF,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,MAAM;QACJ,MAAM,aAAa,GAAG;YACpB,QAAQ;YACR,WAAW,IAAI,CAAC,QAAQ,EAAE;YAC1B,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;SAC3B,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE5B,MAAM,eAAe,GAAG;YACtB,iBAAiB;YACjB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;SAC3B,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE5B,OAAO,IAAI,CAAA;;gBAEC,eAAe;iBACd,IAAI,CAAC,oBAAoB;;;;;gBAK1B,aAAa;;;qBAGR,IAAI,CAAC,OAAO,IAAI,iBAAiB;iBACrC,CAAC,IAAI,CAAC,IAAI;;;YAGf,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,OAAO,OAAO;YACtD,CAAC,CAAC,IAAI,CAAA,eAAe;;;;;;qBAMZ,IAAI,CAAC,MAAM;;;;;;;;;;KAU3B,CAAC;IACJ,CAAC;;AArJD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAC9B;AAIb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACS;AAIpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACV;AAIT;IADP,KAAK,EAAE;iDAC2C;AAG3C;IADP,KAAK,CAAC,SAAS,CAAC;yCACa;AAnHnB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA0PpB"}

package/dist/oh-footer.d.ts

@@ -0,0 +1,40 @@
+/**
+ * oh-footer
+ *
+ * A footer component with logo, multi-column links, and social icons.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. LAYOUT
+ *    - Multi-column grid layout
+ *    - Logo and social on left
+ *    - Link columns on right
+ *
+ * 2. STYLING
+ *    - Accent blue background (dark)
+ *    - White/inverse text and links
+ *    - Generous padding
+ *
+ * @element oh-footer
+ *
+ * @slot logo - Slot for logo element
+ * @slot social - Slot for social media icons
+ * @slot - Default slot for link columns (use oh-stack for each column)
+ */
+import { OhElement } from "./base.js";
+import "./oh-container.js";
+import "./oh-grid.js";
+import "./oh-stack.js";
+import "./oh-cluster.js";
+export declare class OhFooter extends OhElement {
+    static styles: import("lit").CSSResult[];
+    /** Copyright text */
+    copyright: string;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "oh-footer": OhFooter;
+    }
+}
+//# sourceMappingURL=oh-footer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oh-footer.d.ts","sourceRoot":"","sources":["../src/oh-footer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,iBAAiB,CAAC;AAEzB,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BAmCpB;IAEF,qBAAqB;IAErB,SAAS,SAAM;IAEf,MAAM;CAyBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/oh-footer.js

@@ -0,0 +1,112 @@
+/**
+ * oh-footer
+ *
+ * A footer component with logo, multi-column links, and social icons.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. LAYOUT
+ *    - Multi-column grid layout
+ *    - Logo and social on left
+ *    - Link columns on right
+ *
+ * 2. STYLING
+ *    - Accent blue background (dark)
+ *    - White/inverse text and links
+ *    - Generous padding
+ *
+ * @element oh-footer
+ *
+ * @slot logo - Slot for logo element
+ * @slot social - Slot for social media icons
+ * @slot - Default slot for link columns (use oh-stack for each column)
+ */
+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";
+import "./oh-container.js";
+import "./oh-grid.js";
+import "./oh-stack.js";
+import "./oh-cluster.js";
+let OhFooter = class OhFooter extends OhElement {
+    constructor() {
+        super(...arguments);
+        /** Copyright text */
+        this.copyright = "";
+    }
+    static { this.styles = [
+        baseStyles,
+        css `
+      :host {
+        display: block;
+        background-color: var(--oh-color-accent-default);
+        color: var(--oh-color-text-on-accent);
+        font-family: var(--oh-font-family-sans);
+        font-size: var(--oh-font-size-base);
+        line-height: var(--oh-line-height-md);
+        padding: var(--oh-spacing-8) 0;
+      }
+
+      .footer__logo ::slotted(img) {
+        height: 32px;
+        width: auto;
+      }
+
+      .footer__copyright {
+        opacity: 0.8;
+        margin: 0;
+      }
+
+      /* Link columns */
+      ::slotted(oh-stack) {
+        min-width: 0;
+      }
+
+      /* Responsive - tablet: brand section spans full width */
+      @media (max-width: 900px) {
+        .footer__brand {
+          grid-column: 1 / -1;
+        }
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <footer>
+        <oh-container size="lg">
+          <oh-grid columns="4" gap="xl">
+            <!-- Brand section -->
+            <oh-stack gap="md" class="footer__brand">
+              <div class="footer__logo">
+                <slot name="logo"></slot>
+              </div>
+              ${this.copyright
+            ? html `<p class="footer__copyright">${this.copyright}</p>`
+            : null}
+              <oh-cluster gap="lg">
+                <slot name="social"></slot>
+              </oh-cluster>
+            </oh-stack>
+
+            <!-- Link columns (each slotted oh-stack becomes a grid column) -->
+            <slot></slot>
+          </oh-grid>
+        </oh-container>
+      </footer>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], OhFooter.prototype, "copyright", void 0);
+OhFooter = __decorate([
+    customElement("oh-footer")
+], OhFooter);
+export { OhFooter };
+//# sourceMappingURL=oh-footer.js.map

package/dist/oh-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oh-footer.js","sourceRoot":"","sources":["../src/oh-footer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;;;;;;;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;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,iBAAiB,CAAC;AAGlB,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QAsCL,qBAAqB;QAErB,cAAS,GAAG,EAAE,CAAC;IA2BjB,CAAC;aAlEiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCF;KACF,AAnCqB,CAmCpB;IAMF,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;gBASC,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA,gCAAgC,IAAI,CAAC,SAAS,MAAM;YAC1D,CAAC,CAAC,IAAI;;;;;;;;;;;KAWjB,CAAC;IACJ,CAAC;;AA1BD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACZ;AAxCJ,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAmEpB"}

package/dist/oh-grid.d.ts

@@ -0,0 +1,40 @@
+/**
+ * oh-grid
+ *
+ * CSS Grid layout with configurable columns.
+ * Flexible grid system for cards, galleries, and layouts.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. COLUMN PRESETS
+ *    - 1-4 fixed columns
+ *    - auto-fit: responsive columns with min-width
+ *    - auto-fill: fills available space
+ *
+ * 2. MIN-WIDTH FOR AUTO COLUMNS
+ *    - Configurable minimum column width
+ *    - Defaults to 280px for card-friendly layouts
+ *
+ * 3. GAP SCALE
+ *    - Uses design token spacing values
+ *
+ * @element oh-grid
+ */
+import { OhElement } from "./base.js";
+export type GridColumns = "1" | "2" | "3" | "4" | "auto-fit" | "auto-fill";
+export type GridGap = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+export declare class OhGrid extends OhElement {
+    static styles: import("lit").CSSResult[];
+    columns: GridColumns;
+    gap: GridGap;
+    minWidth: string;
+    alignItems: "start" | "center" | "end" | "stretch";
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "oh-grid": OhGrid;
+    }
+}
+//# sourceMappingURL=oh-grid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oh-grid.d.ts","sourceRoot":"","sources":["../src/oh-grid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,UAAU,GAAG,WAAW,CAAC;AAC3E,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhE,qBACa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,4BA8FpB;IAGF,OAAO,EAAE,WAAW,CAAc;IAGlC,GAAG,EAAE,OAAO,CAAQ;IAGpB,QAAQ,SAAW;IAGnB,UAAU,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAa;IAEtD,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAgBxD,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/oh-grid.js

@@ -0,0 +1,168 @@
+/**
+ * oh-grid
+ *
+ * CSS Grid layout with configurable columns.
+ * Flexible grid system for cards, galleries, and layouts.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. COLUMN PRESETS
+ *    - 1-4 fixed columns
+ *    - auto-fit: responsive columns with min-width
+ *    - auto-fill: fills available space
+ *
+ * 2. MIN-WIDTH FOR AUTO COLUMNS
+ *    - Configurable minimum column width
+ *    - Defaults to 280px for card-friendly layouts
+ *
+ * 3. GAP SCALE
+ *    - Uses design token spacing values
+ *
+ * @element oh-grid
+ */
+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 OhGrid = class OhGrid extends OhElement {
+    constructor() {
+        super(...arguments);
+        this.columns = "auto-fit";
+        this.gap = "md";
+        this.minWidth = "280px";
+        this.alignItems = "stretch";
+    }
+    static { this.styles = [
+        baseStyles,
+        css `
+      /* ═══════════════════════════════════════════════════════════════
+         ORANGE HALO GRID
+         CSS Grid layout • Responsive columns • Flexible gaps
+         ═══════════════════════════════════════════════════════════════ */
+
+      :host {
+        display: grid;
+        width: 100%;
+      }
+
+      /* Fixed column variants */
+      :host([columns="1"]) {
+        grid-template-columns: 1fr;
+      }
+
+      :host([columns="2"]) {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      :host([columns="3"]) {
+        grid-template-columns: repeat(3, 1fr);
+      }
+
+      :host([columns="4"]) {
+        grid-template-columns: repeat(4, 1fr);
+      }
+
+      /* 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);
+      }
+
+      /* Alignment */
+      :host([align-items="start"]) {
+        align-items: start;
+      }
+
+      :host([align-items="center"]) {
+        align-items: center;
+      }
+
+      :host([align-items="end"]) {
+        align-items: end;
+      }
+
+      :host([align-items="stretch"]) {
+        align-items: stretch;
+      }
+
+      /* Responsive: stack on mobile for fixed columns */
+      @media (max-width: 640px) {
+        :host([columns="2"]),
+        :host([columns="3"]),
+        :host([columns="4"]) {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      @media (min-width: 641px) and (max-width: 768px) {
+        :host([columns="3"]),
+        :host([columns="4"]) {
+          grid-template-columns: repeat(2, 1fr);
+        }
+      }
+
+      @media (min-width: 769px) and (max-width: 1024px) {
+        :host([columns="4"]) {
+          grid-template-columns: repeat(3, 1fr);
+        }
+      }
+    `,
+    ]; }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // Handle auto-fit and auto-fill with dynamic min-width
+        if (changedProperties.has("columns") ||
+            changedProperties.has("minWidth")) {
+            if (this.columns === "auto-fit" || this.columns === "auto-fill") {
+                this.style.gridTemplateColumns = `repeat(${this.columns}, minmax(${this.minWidth}, 1fr))`;
+            }
+            else {
+                this.style.gridTemplateColumns = "";
+            }
+        }
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], OhGrid.prototype, "columns", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], OhGrid.prototype, "gap", void 0);
+__decorate([
+    property({ type: String, attribute: "min-width" })
+], OhGrid.prototype, "minWidth", void 0);
+__decorate([
+    property({ type: String, attribute: "align-items", reflect: true })
+], OhGrid.prototype, "alignItems", void 0);
+OhGrid = __decorate([
+    customElement("oh-grid")
+], OhGrid);
+export { OhGrid };
+//# sourceMappingURL=oh-grid.js.map

package/dist/oh-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oh-grid.js","sourceRoot":"","sources":["../src/oh-grid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;;;;;;;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,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAA9B;;QAkGL,YAAO,GAAgB,UAAU,CAAC;QAGlC,QAAG,GAAY,IAAI,CAAC;QAGpB,aAAQ,GAAG,OAAO,CAAC;QAGnB,eAAU,GAA2C,SAAS,CAAC;IAqBjE,CAAC;aA/HiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2FF;KACF,AA9FqB,CA8FpB;IAcO,OAAO,CAAC,iBAAuC;QACtD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,uDAAuD;QACvD,IACE,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC;YAChC,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EACjC,CAAC;YACD,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,EAAE,CAAC;gBAChE,IAAI,CAAC,KAAK,CAAC,mBAAmB,GAAG,UAAU,IAAI,CAAC,OAAO,YAAY,IAAI,CAAC,QAAQ,SAAS,CAAC;YAC5F,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,KAAK,CAAC,mBAAmB,GAAG,EAAE,CAAC;YACtC,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AA7BD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACR;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCACtB;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;wCAChC;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACL;AA3GpD,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAgIlB"}