@orange-halo/components 1.0.0

package/dist/oh-cluster.d.ts

@@ -0,0 +1,38 @@
+/**
+ * oh-cluster
+ *
+ * Horizontal grouping with wrap and gap.
+ * Perfect for button groups, tags, navigation items.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. FLEX WRAP BY DEFAULT
+ *    - Items wrap to next line when needed
+ *    - Consistent gaps in both directions
+ *
+ * 2. JUSTIFY OPTIONS
+ *    - start, center, end, between, around
+ *
+ * 3. ALIGNMENT OPTIONS
+ *    - start, center, end, baseline
+ *
+ * @element oh-cluster
+ */
+import { OhElement } from "./base.js";
+export type ClusterGap = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+export type ClusterJustify = "start" | "center" | "end" | "between" | "around";
+export type ClusterAlign = "start" | "center" | "end" | "baseline";
+export declare class OhCluster extends OhElement {
+    static styles: import("lit").CSSResult[];
+    gap: ClusterGap;
+    justify: ClusterJustify;
+    align: ClusterAlign;
+    nowrap: boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "oh-cluster": OhCluster;
+    }
+}
+//# sourceMappingURL=oh-cluster.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oh-cluster.d.ts","sourceRoot":"","sources":["../src/oh-cluster.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnE,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,CAAC;AAEnE,qBACa,SAAU,SAAQ,SAAS;IACtC,OAAgB,MAAM,4BAkFpB;IAGF,GAAG,EAAE,UAAU,CAAQ;IAGvB,OAAO,EAAE,cAAc,CAAW;IAGlC,KAAK,EAAE,YAAY,CAAY;IAG/B,MAAM,UAAS;IAEf,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/oh-cluster.js

@@ -0,0 +1,141 @@
+/**
+ * oh-cluster
+ *
+ * Horizontal grouping with wrap and gap.
+ * Perfect for button groups, tags, navigation items.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. FLEX WRAP BY DEFAULT
+ *    - Items wrap to next line when needed
+ *    - Consistent gaps in both directions
+ *
+ * 2. JUSTIFY OPTIONS
+ *    - start, center, end, between, around
+ *
+ * 3. ALIGNMENT OPTIONS
+ *    - start, center, end, baseline
+ *
+ * @element oh-cluster
+ */
+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 OhCluster = class OhCluster extends OhElement {
+    constructor() {
+        super(...arguments);
+        this.gap = "md";
+        this.justify = "start";
+        this.align = "center";
+        this.nowrap = false;
+    }
+    static { this.styles = [
+        baseStyles,
+        css `
+      /* ═══════════════════════════════════════════════════════════════
+         ORANGE HALO CLUSTER
+         Horizontal grouping • Flex wrap • Consistent gaps
+         ═══════════════════════════════════════════════════════════════ */
+
+      :host {
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+      }
+
+      /* No wrap option */
+      :host([nowrap]) {
+        flex-wrap: nowrap;
+      }
+
+      /* 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);
+      }
+
+      /* Justify variants */
+      :host([justify="start"]) {
+        justify-content: flex-start;
+      }
+
+      :host([justify="center"]) {
+        justify-content: center;
+      }
+
+      :host([justify="end"]) {
+        justify-content: flex-end;
+      }
+
+      :host([justify="between"]) {
+        justify-content: space-between;
+      }
+
+      :host([justify="around"]) {
+        justify-content: space-around;
+      }
+
+      /* Alignment variants */
+      :host([align="start"]) {
+        align-items: flex-start;
+      }
+
+      :host([align="center"]) {
+        align-items: center;
+      }
+
+      :host([align="end"]) {
+        align-items: flex-end;
+      }
+
+      :host([align="baseline"]) {
+        align-items: baseline;
+      }
+    `,
+    ]; }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], OhCluster.prototype, "gap", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], OhCluster.prototype, "justify", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], OhCluster.prototype, "align", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OhCluster.prototype, "nowrap", void 0);
+OhCluster = __decorate([
+    customElement("oh-cluster")
+], OhCluster);
+export { OhCluster };
+//# sourceMappingURL=oh-cluster.js.map

package/dist/oh-cluster.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oh-cluster.js","sourceRoot":"","sources":["../src/oh-cluster.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;;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;AAO3C,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,SAAS;IAAjC;;QAsFL,QAAG,GAAe,IAAI,CAAC;QAGvB,YAAO,GAAmB,OAAO,CAAC;QAGlC,UAAK,GAAiB,QAAQ,CAAC;QAG/B,WAAM,GAAG,KAAK,CAAC;IAKjB,CAAC;aAnGiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+EF;KACF,AAlFqB,CAkFpB;IAcF,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAbD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACnB;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACR;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACX;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAC5B;AA/FJ,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAoGrB"}

package/dist/oh-container.d.ts

@@ -0,0 +1,38 @@
+/**
+ * oh-container
+ *
+ * Max-width wrapper with centered content.
+ * Used to constrain content width and provide consistent horizontal padding.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. RESPONSIVE MAX-WIDTHS
+ *    - sm: 640px (tight, focused content)
+ *    - md: 768px (articles, forms)
+ *    - lg: 1024px (standard pages)
+ *    - xl: 1280px (wide layouts)
+ *    - full: 100% (edge-to-edge)
+ *
+ * 2. CONSISTENT PADDING
+ *    - Uses spacing tokens for horizontal padding
+ *    - Responsive padding on smaller screens
+ *
+ * 3. CENTERED BY DEFAULT
+ *    - margin: 0 auto for horizontal centering
+ *
+ * @element oh-container
+ */
+import { OhElement } from "./base.js";
+export type ContainerSize = "sm" | "md" | "lg" | "xl" | "full";
+export declare class OhContainer extends OhElement {
+    static styles: import("lit").CSSResult[];
+    size: ContainerSize;
+    center: boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "oh-container": OhContainer;
+    }
+}
+//# sourceMappingURL=oh-container.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oh-container.d.ts","sourceRoot":"","sources":["../src/oh-container.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE/D,qBACa,WAAY,SAAQ,SAAS;IACxC,OAAgB,MAAM,4BA6DpB;IAGF,IAAI,EAAE,aAAa,CAAQ;IAG3B,MAAM,UAAS;IAEf,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/dist/oh-container.js

@@ -0,0 +1,116 @@
+/**
+ * oh-container
+ *
+ * Max-width wrapper with centered content.
+ * Used to constrain content width and provide consistent horizontal padding.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. RESPONSIVE MAX-WIDTHS
+ *    - sm: 640px (tight, focused content)
+ *    - md: 768px (articles, forms)
+ *    - lg: 1024px (standard pages)
+ *    - xl: 1280px (wide layouts)
+ *    - full: 100% (edge-to-edge)
+ *
+ * 2. CONSISTENT PADDING
+ *    - Uses spacing tokens for horizontal padding
+ *    - Responsive padding on smaller screens
+ *
+ * 3. CENTERED BY DEFAULT
+ *    - margin: 0 auto for horizontal centering
+ *
+ * @element oh-container
+ */
+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 OhContainer = class OhContainer extends OhElement {
+    constructor() {
+        super(...arguments);
+        this.size = "lg";
+        this.center = false;
+    }
+    static { this.styles = [
+        baseStyles,
+        css `
+      /* ═══════════════════════════════════════════════════════════════
+         ORANGE HALO CONTAINER
+         Max-width wrapper • Centered content • Responsive padding
+         ═══════════════════════════════════════════════════════════════ */
+
+      :host {
+        display: block;
+        width: 100%;
+        margin-left: auto;
+        margin-right: auto;
+        padding-left: var(--oh-spacing-4, 16px);
+        padding-right: var(--oh-spacing-4, 16px);
+        box-sizing: border-box;
+      }
+
+      /* Size variants */
+      :host([size="sm"]) {
+        max-width: 640px;
+      }
+
+      :host([size="md"]) {
+        max-width: 768px;
+      }
+
+      :host([size="lg"]) {
+        max-width: 1024px;
+      }
+
+      :host([size="xl"]) {
+        max-width: 1280px;
+      }
+
+      :host([size="full"]) {
+        max-width: 100%;
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      /* Responsive padding */
+      @media (min-width: 640px) {
+        :host {
+          padding-left: var(--oh-spacing-6, 24px);
+          padding-right: var(--oh-spacing-6, 24px);
+        }
+      }
+
+      @media (min-width: 1024px) {
+        :host {
+          padding-left: var(--oh-spacing-8, 32px);
+          padding-right: var(--oh-spacing-8, 32px);
+        }
+      }
+
+      /* Center alignment option */
+      :host([center]) {
+        text-align: center;
+      }
+    `,
+    ]; }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], OhContainer.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OhContainer.prototype, "center", void 0);
+OhContainer = __decorate([
+    customElement("oh-container")
+], OhContainer);
+export { OhContainer };
+//# sourceMappingURL=oh-container.js.map

package/dist/oh-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oh-container.js","sourceRoot":"","sources":["../src/oh-container.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;;;;;;;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;AAK3C,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS;IAAnC;;QAiEL,SAAI,GAAkB,IAAI,CAAC;QAG3B,WAAM,GAAG,KAAK,CAAC;IAKjB,CAAC;aAxEiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0DF;KACF,AA7DqB,CA6DpB;IAQF,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAPD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACf;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC5B;AApEJ,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAyEvB"}

package/dist/oh-drawer.d.ts

@@ -0,0 +1,66 @@
+/**
+ * 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)
+ */
+import { OhElement } from "./base.js";
+import "./oh-button.js";
+import "./oh-icon.js";
+export declare class OhDrawer extends OhElement {
+    static styles: import("lit").CSSResult[];
+    /** Whether the drawer is open */
+    open: boolean;
+    /** Position of the drawer */
+    position: "left" | "right";
+    /** Title shown in the drawer header */
+    heading?: string;
+    /** Element that triggered the drawer (for focus return) */
+    private _triggerElement;
+    private _drawer;
+    private _cleanupFocusTrap?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private _onOpen;
+    private _onClose;
+    private _handleKeydown;
+    private _close;
+    private _handleBackdropClick;
+    /** Public method to open the drawer */
+    show(): void;
+    /** Public method to close the drawer */
+    hide(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "oh-drawer": OhDrawer;
+    }
+}
+//# sourceMappingURL=oh-drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oh-drawer.d.ts","sourceRoot":"","sources":["../src/oh-drawer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAGlD,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BA+FpB;IAEF,iCAAiC;IAEjC,IAAI,UAAS;IAEb,6BAA6B;IAE7B,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAU;IAEpC,uCAAuC;IAEvC,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,2DAA2D;IAE3D,OAAO,CAAC,eAAe,CAA4B;IAGnD,OAAO,CAAC,OAAO,CAAe;IAE9B,OAAO,CAAC,iBAAiB,CAAC,CAAa;IAEvC,iBAAiB;IAKjB,oBAAoB;IAMpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU/C,OAAO,CAAC,OAAO;IAqBf,OAAO,CAAC,QAAQ;IAgBhB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,oBAAoB;IAI5B,uCAAuC;IACvC,IAAI;IAIJ,wCAAwC;IACxC,IAAI;IAIJ,MAAM;CA+CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}