@orange-halo/components 1.0.0

package/dist/oh-hero.d.ts

@@ -0,0 +1,28 @@
+/**
+ * oh-hero
+ *
+ * A prominent hero section for page headers.
+ *
+ * @element oh-hero
+ */
+import { LitElement } from "lit";
+import "./oh-progress.js";
+export type HeroVariant = "content" | "journey";
+export type HeroSize = "sm" | "md" | "lg" | "xl";
+export declare class OhHero extends LitElement {
+    static styles: import("lit").CSSResult;
+    variant: HeroVariant;
+    size: HeroSize;
+    heading: string;
+    subtitle: string;
+    journeyName: string;
+    currentStep: number;
+    totalSteps: number;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "oh-hero": OhHero;
+    }
+}
+//# sourceMappingURL=oh-hero.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oh-hero.d.ts","sourceRoot":"","sources":["../src/oh-hero.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAGrD,OAAO,kBAAkB,CAAC;AAE1B,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,0BAgJpB;IAGF,OAAO,EAAE,WAAW,CAAa;IAGjC,IAAI,EAAE,QAAQ,CAAQ;IAGtB,OAAO,SAAM;IAGb,QAAQ,SAAM;IAGd,WAAW,SAAM;IAGjB,WAAW,SAAK;IAGhB,UAAU,SAAK;IAEN,MAAM;CA4ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/oh-hero.js

@@ -0,0 +1,242 @@
+/**
+ * oh-hero
+ *
+ * A prominent hero section for page headers.
+ *
+ * @element oh-hero
+ */
+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, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "./oh-progress.js";
+let OhHero = class OhHero extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = "content";
+        this.size = "lg";
+        this.heading = "";
+        this.subtitle = "";
+        this.journeyName = "";
+        this.currentStep = 1;
+        this.totalSteps = 1;
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      background-color: var(--oh-color-brand-primary, #C54300);
+      color: var(--oh-color-text-on-brand, #FFFFFF);
+      font-family: var(--oh-font-family-sans, system-ui, sans-serif);
+    }
+
+    .hero {
+      padding: 48px 0;
+    }
+
+    .hero--journey {
+      padding: 32px 0;
+    }
+
+    /* Container styles - matches oh-container */
+    .hero__container {
+      width: 100%;
+      max-width: var(--hero-max-width, 1024px);
+      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"]) {
+      --hero-max-width: 640px;
+    }
+
+    :host([size="md"]) {
+      --hero-max-width: 768px;
+    }
+
+    :host([size="lg"]) {
+      --hero-max-width: 1024px;
+    }
+
+    :host([size="xl"]) {
+      --hero-max-width: 1280px;
+    }
+
+    .hero__heading {
+      font-size: 42px;
+      font-weight: 700;
+      line-height: 1.2;
+      margin: 0 0 16px 0;
+      color: var(--oh-color-text-on-brand, #FFFFFF);
+    }
+
+    .hero__subtitle {
+      font-size: 20px;
+      font-weight: 400;
+      line-height: 1.5;
+      margin: 0 0 24px 0;
+      color: var(--oh-color-text-on-brand, #FFFFFF);
+      opacity: 0.85;
+      max-width: 65ch;
+    }
+
+    .hero__actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
+      margin-top: 24px;
+    }
+
+    .hero__journey-heading {
+      font-size: 32px;
+      font-weight: 700;
+      line-height: 1.2;
+      margin: 0 0 24px 0;
+      color: var(--oh-color-text-on-brand, #FFFFFF);
+    }
+
+    .hero__journey-name {
+      display: block;
+      font-size: 16px;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--oh-color-text-on-brand, #FFFFFF);
+      opacity: 0.9;
+      margin-bottom: 8px;
+    }
+
+    .hero__page-name {
+      display: block;
+    }
+
+    .hero__progress-wrapper {
+      margin-top: 16px;
+      max-width: 400px;
+    }
+
+    /* Responsive container padding - matches oh-container */
+    @media (min-width: 640px) {
+      .hero__container {
+        padding-left: var(--oh-spacing-6, 24px);
+        padding-right: var(--oh-spacing-6, 24px);
+      }
+    }
+
+    @media (min-width: 1024px) {
+      .hero__container {
+        padding-left: var(--oh-spacing-8, 32px);
+        padding-right: var(--oh-spacing-8, 32px);
+      }
+    }
+
+    @media (max-width: 768px) {
+      .hero {
+        padding: 32px 0;
+      }
+      .hero__heading {
+        font-size: 32px;
+      }
+      .hero__subtitle {
+        font-size: 18px;
+      }
+      .hero--journey {
+        padding: 24px 0;
+      }
+      .hero__journey-heading {
+        font-size: 26px;
+      }
+      .hero__progress-wrapper {
+        max-width: 100%;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .hero__heading {
+        font-size: 26px;
+      }
+      .hero__journey-heading {
+        font-size: 20px;
+      }
+      .hero__actions {
+        flex-direction: column;
+      }
+    }
+  `; }
+    render() {
+        if (this.variant === "journey") {
+            const progressLabel = `Step ${this.currentStep} of ${this.totalSteps}`;
+            return html `
+        <div class="hero hero--journey" role="banner">
+          <div class="hero__container">
+            <h1 class="hero__journey-heading">
+              ${this.journeyName
+                ? html `<span class="hero__journey-name">${this.journeyName}</span>`
+                : nothing}
+              <span class="hero__page-name">${this.heading}</span>
+            </h1>
+            <div class="hero__progress-wrapper">
+              <oh-progress
+                .value=${this.currentStep}
+                .max=${this.totalSteps}
+                label=${progressLabel}
+                size="md"
+                inverse
+                show-value
+              ></oh-progress>
+            </div>
+            <slot></slot>
+          </div>
+        </div>
+      `;
+        }
+        return html `
+      <div class="hero" role="banner">
+        <div class="hero__container">
+          ${this.heading
+            ? html `<h1 class="hero__heading">${this.heading}</h1>`
+            : nothing}
+          ${this.subtitle
+            ? html `<p class="hero__subtitle">${this.subtitle}</p>`
+            : nothing}
+          <div class="hero__actions">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], OhHero.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], OhHero.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], OhHero.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], OhHero.prototype, "subtitle", void 0);
+__decorate([
+    property({ type: String, attribute: "journey-name" })
+], OhHero.prototype, "journeyName", void 0);
+__decorate([
+    property({ type: Number, attribute: "current-step" })
+], OhHero.prototype, "currentStep", void 0);
+__decorate([
+    property({ type: Number, attribute: "total-steps" })
+], OhHero.prototype, "totalSteps", void 0);
+OhHero = __decorate([
+    customElement("oh-hero")
+], OhHero);
+export { OhHero };
+//# sourceMappingURL=oh-hero.js.map

package/dist/oh-hero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oh-hero.js","sourceRoot":"","sources":["../src/oh-hero.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,kBAAkB,CAAC;AAMnB,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAoJL,YAAO,GAAgB,SAAS,CAAC;QAGjC,SAAI,GAAa,IAAI,CAAC;QAGtB,YAAO,GAAG,EAAE,CAAC;QAGb,aAAQ,GAAG,EAAE,CAAC;QAGd,gBAAW,GAAG,EAAE,CAAC;QAGjB,gBAAW,GAAG,CAAC,CAAC;QAGhB,eAAU,GAAG,CAAC,CAAC;IA8CjB,CAAC;aAnNiB,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgJ3B,AAhJqB,CAgJpB;IAuBO,MAAM;QACb,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YAC/B,MAAM,aAAa,GAAG,QAAQ,IAAI,CAAC,WAAW,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;YACvE,OAAO,IAAI,CAAA;;;;gBAID,IAAI,CAAC,WAAW;gBAChB,CAAC,CAAC,IAAI,CAAA,oCAAoC,IAAI,CAAC,WAAW,SAAS;gBACnE,CAAC,CAAC,OAAO;8CACqB,IAAI,CAAC,OAAO;;;;yBAIjC,IAAI,CAAC,WAAW;uBAClB,IAAI,CAAC,UAAU;wBACd,aAAa;;;;;;;;;OAS9B,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,OAAO,OAAO;YACtD,CAAC,CAAC,OAAO;YACT,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,QAAQ,MAAM;YACtD,CAAC,CAAC,OAAO;;;;;;KAMhB,CAAC;IACJ,CAAC;;AA/DD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACT;AAGjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCACpB;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2CACrC;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2CACtC;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;0CACtC;AAtKJ,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAoNlB"}

package/dist/oh-icon.d.ts

@@ -0,0 +1,44 @@
+/**
+ * oh-icon
+ *
+ * A flexible icon component for the Orange Halo design system.
+ * Can render as a standalone icon or as an interactive link.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. SIZE
+ *    - Default size matches line-height (1em)
+ *    - Size variants: sm (16px), md (20px), lg (24px), xl (32px)
+ *
+ * 2. LINK MODE
+ *    - When `href` is provided, renders as an <a> tag
+ *    - Includes hover/focus states
+ *    - `label` is required for accessibility
+ *
+ * 3. ACCESSIBILITY
+ *    - Decorative by default (aria-hidden="true")
+ *    - Provide `label` for meaningful icons
+ *    - When used as link, label becomes aria-label
+ *
+ * @element oh-icon
+ */
+import { nothing } from "lit";
+import { OhElement } from "./base.js";
+export type IconName = "twitter" | "github" | "linkedin" | "instagram" | "youtube" | "facebook" | "email" | "substack" | "arrow-right" | "arrow-left" | "arrow-up" | "arrow-down" | "chevron-right" | "chevron-left" | "chevron-up" | "chevron-down" | "external-link" | "close" | "plus" | "minus" | "check" | "search" | "menu" | "settings" | "heart" | "sparkle" | "info" | "warning" | "error" | "success";
+export type IconSize = "sm" | "md" | "lg" | "xl";
+export declare class OhIcon extends OhElement {
+    static styles: import("lit").CSSResult[];
+    name: IconName;
+    size?: IconSize;
+    inverse: boolean;
+    label?: string;
+    href?: string;
+    target?: string;
+    render(): typeof nothing | import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "oh-icon": OhIcon;
+    }
+}
+//# sourceMappingURL=oh-icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oh-icon.d.ts","sourceRoot":"","sources":["../src/oh-icon.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,QAAQ,GAEhB,SAAS,GACT,QAAQ,GACR,UAAU,GACV,WAAW,GACX,SAAS,GACT,UAAU,GACV,OAAO,GACP,UAAU,GAEV,aAAa,GACb,YAAY,GACZ,UAAU,GACV,YAAY,GACZ,eAAe,GACf,cAAc,GACd,YAAY,GACZ,cAAc,GACd,eAAe,GAEf,OAAO,GACP,MAAM,GACN,OAAO,GACP,OAAO,GACP,QAAQ,GACR,MAAM,GACN,UAAU,GACV,OAAO,GACP,SAAS,GAET,MAAM,GACN,SAAS,GACT,OAAO,GACP,SAAS,CAAC;AAEd,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAqIjD,qBACa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,4BA6FpB;IAGF,IAAI,EAAE,QAAQ,CAAU;IAGxB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAGhB,OAAO,UAAS;IAGhB,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,MAAM;CA2CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/oh-icon.js

@@ -0,0 +1,321 @@
+/**
+ * oh-icon
+ *
+ * A flexible icon component for the Orange Halo design system.
+ * Can render as a standalone icon or as an interactive link.
+ *
+ * DESIGN DECISIONS:
+ * ─────────────────
+ * 1. SIZE
+ *    - Default size matches line-height (1em)
+ *    - Size variants: sm (16px), md (20px), lg (24px), xl (32px)
+ *
+ * 2. LINK MODE
+ *    - When `href` is provided, renders as an <a> tag
+ *    - Includes hover/focus states
+ *    - `label` is required for accessibility
+ *
+ * 3. ACCESSIBILITY
+ *    - Decorative by default (aria-hidden="true")
+ *    - Provide `label` for meaningful icons
+ *    - When used as link, label becomes aria-label
+ *
+ * @element oh-icon
+ */
+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 } from "lit/decorators.js";
+import { OhElement, baseStyles } from "./base.js";
+// Icon SVG paths
+const icons = {
+    // Social Media (24x24)
+    twitter: {
+        viewBox: "0 0 24 24",
+        path: `M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z`,
+    },
+    github: {
+        viewBox: "0 0 24 24",
+        path: `M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z`,
+    },
+    linkedin: {
+        viewBox: "0 0 24 24",
+        path: `M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z`,
+    },
+    instagram: {
+        viewBox: "0 0 24 24",
+        path: `M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z`,
+    },
+    youtube: {
+        viewBox: "0 0 24 24",
+        path: `M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z`,
+    },
+    facebook: {
+        viewBox: "0 0 24 24",
+        path: `M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z`,
+    },
+    email: {
+        viewBox: "0 0 24 24",
+        path: `M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z`,
+    },
+    substack: {
+        viewBox: "0 0 24 24",
+        path: `M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z`,
+    },
+    // Navigation (20x20)
+    "arrow-right": {
+        viewBox: "0 0 20 20",
+        path: `M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z`,
+    },
+    "arrow-left": {
+        viewBox: "0 0 20 20",
+        path: `M17 10a.75.75 0 00-.75-.75H5.612l4.158-3.96a.75.75 0 10-1.04-1.08l-5.5 5.25a.75.75 0 000 1.08l5.5 5.25a.75.75 0 101.04-1.08L5.612 10.75h10.638A.75.75 0 0017 10z`,
+    },
+    "arrow-up": {
+        viewBox: "0 0 20 20",
+        path: `M10 17a.75.75 0 01-.75-.75V5.612l-3.96 4.158a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158v10.638A.75.75 0 0110 17z`,
+    },
+    "arrow-down": {
+        viewBox: "0 0 20 20",
+        path: `M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z`,
+    },
+    "chevron-right": {
+        viewBox: "0 0 20 20",
+        path: `M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z`,
+    },
+    "chevron-left": {
+        viewBox: "0 0 20 20",
+        path: `M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z`,
+    },
+    "chevron-up": {
+        viewBox: "0 0 20 20",
+        path: `M14.77 12.79a.75.75 0 01-1.06-.02L10 8.832 6.29 12.77a.75.75 0 01-1.08-1.04l4.25-4.5a.75.75 0 011.08 0l4.25 4.5a.75.75 0 01-.02 1.06z`,
+    },
+    "chevron-down": {
+        viewBox: "0 0 20 20",
+        path: `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`,
+    },
+    "external-link": {
+        viewBox: "0 0 20 20",
+        path: `M4.25 5.5a.75.75 0 00-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 00.75-.75v-4a.75.75 0 011.5 0v4A2.25 2.25 0 0112.75 17h-8.5A2.25 2.25 0 012 14.75v-8.5A2.25 2.25 0 014.25 4h5a.75.75 0 010 1.5h-5zM6.194 12.753a.75.75 0 001.06.053L16.5 4.44v2.81a.75.75 0 001.5 0v-4.5a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h2.553l-9.056 8.194a.75.75 0 00-.053 1.06z`,
+    },
+    // Actions (20x20)
+    close: {
+        viewBox: "0 0 20 20",
+        path: `M5.47 5.47a.75.75 0 011.06 0L10 8.94l3.47-3.47a.75.75 0 111.06 1.06L11.06 10l3.47 3.47a.75.75 0 11-1.06 1.06L10 11.06l-3.47 3.47a.75.75 0 01-1.06-1.06L8.94 10 5.47 6.53a.75.75 0 010-1.06z`,
+    },
+    plus: {
+        viewBox: "0 0 20 20",
+        path: `M10 3a.75.75 0 01.75.75v5.5h5.5a.75.75 0 010 1.5h-5.5v5.5a.75.75 0 01-1.5 0v-5.5h-5.5a.75.75 0 010-1.5h5.5v-5.5A.75.75 0 0110 3z`,
+    },
+    minus: {
+        viewBox: "0 0 20 20",
+        path: `M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z`,
+    },
+    check: {
+        viewBox: "0 0 20 20",
+        path: `M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z`,
+    },
+    search: {
+        viewBox: "0 0 20 20",
+        path: `M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z`,
+    },
+    menu: {
+        viewBox: "0 0 20 20",
+        path: `M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 5A.75.75 0 012.75 9h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 9.75zm0 5a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z`,
+    },
+    settings: {
+        viewBox: "0 0 20 20",
+        path: `M10 3.75a2 2 0 10-4 0 2 2 0 004 0zM17.25 4.5a.75.75 0 000-1.5h-5.5a.75.75 0 000 1.5h5.5zM5 3.75a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5a.75.75 0 01.75.75zM4.25 17a.75.75 0 000-1.5h-1.5a.75.75 0 000 1.5h1.5zM17.25 17a.75.75 0 000-1.5h-5.5a.75.75 0 000 1.5h5.5zM9 10a.75.75 0 01-.75.75h-5.5a.75.75 0 010-1.5h5.5A.75.75 0 019 10zM17.25 10.75a.75.75 0 000-1.5h-1.5a.75.75 0 000 1.5h1.5zM14 10a2 2 0 10-4 0 2 2 0 004 0zM10 16.25a2 2 0 10-4 0 2 2 0 004 0z`,
+    },
+    heart: {
+        viewBox: "0 0 20 20",
+        path: `M9.653 16.915l-.005-.003-.019-.01a20.759 20.759 0 01-1.162-.682 22.045 22.045 0 01-2.582-1.9C4.045 12.733 2 10.352 2 7.5a4.5 4.5 0 018-2.828A4.5 4.5 0 0118 7.5c0 2.852-2.044 5.233-3.885 6.82a22.049 22.049 0 01-3.744 2.582l-.019.01-.005.003h-.002a.739.739 0 01-.69.001l-.002-.001z`,
+    },
+    sparkle: {
+        viewBox: "0 0 20 20",
+        path: `M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z`,
+    },
+    // Feedback (20x20)
+    info: {
+        viewBox: "0 0 20 20",
+        path: `M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z`,
+    },
+    warning: {
+        viewBox: "0 0 20 20",
+        path: `M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z`,
+    },
+    error: {
+        viewBox: "0 0 20 20",
+        path: `M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z`,
+    },
+    success: {
+        viewBox: "0 0 20 20",
+        path: `M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z`,
+    },
+};
+let OhIcon = class OhIcon extends OhElement {
+    constructor() {
+        super(...arguments);
+        this.name = "info";
+        this.inverse = false;
+    }
+    static { this.styles = [
+        baseStyles,
+        css `
+      :host {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: currentColor;
+        vertical-align: middle;
+      }
+
+      svg {
+        display: block;
+        fill: currentColor;
+        width: 1em;
+        height: 1em;
+      }
+
+      /* Sizes */
+      :host([size="sm"]) svg {
+        width: 16px;
+        height: 16px;
+      }
+
+      :host([size="md"]) svg {
+        width: 20px;
+        height: 20px;
+      }
+
+      :host([size="lg"]) svg {
+        width: 24px;
+        height: 24px;
+      }
+
+      :host([size="xl"]) svg {
+        width: 32px;
+        height: 32px;
+      }
+
+      /* Inverse (for dark/colored backgrounds) */
+      :host([inverse]) {
+        color: var(--oh-color-text-on-accent);
+      }
+
+      /* Link styles */
+      .icon-link {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: inherit;
+        text-decoration: none;
+        border-radius: var(--oh-shape-radius-sm, 6px);
+        padding: var(--oh-spacing-2, 8px);
+        margin: calc(-1 * var(--oh-spacing-2, 8px));
+        transition: 
+          transform var(--oh-motion-snappy, 150ms) var(--oh-motion-ease-gentle, ease),
+          box-shadow var(--oh-motion-snappy, 150ms) var(--oh-motion-ease-gentle, ease);
+      }
+
+      .icon-link:hover {
+        transform: translate(-2px, -2px);
+        box-shadow: 4px 4px 0 0 var(--oh-color-border-default);
+      }
+
+      .icon-link:active {
+        transform: translate(0, 0);
+        box-shadow: none;
+      }
+
+      .icon-link:focus {
+        outline: none;
+      }
+
+      .icon-link:focus-visible {
+        box-shadow: 0 0 0 2px var(--oh-color-border-focus);
+      }
+
+      /* Inverse link styles (for dark/colored backgrounds) */
+      :host([inverse]) .icon-link:hover {
+        box-shadow: 4px 4px 0 0 var(--oh-color-text-on-accent);
+      }
+
+      :host([inverse]) .icon-link:focus-visible {
+        box-shadow: 0 0 0 2px var(--oh-color-text-on-accent);
+      }
+
+      /* Reduced motion */
+      @media (prefers-reduced-motion: reduce) {
+        .icon-link {
+          transition: none;
+        }
+      }
+    `,
+    ]; }
+    render() {
+        const iconData = icons[this.name];
+        if (!iconData) {
+            console.warn(`[oh-icon] Unknown icon name: ${this.name}`);
+            return nothing;
+        }
+        const svg = html `
+      <svg
+        viewBox=${iconData.viewBox}
+        fill="currentColor"
+        aria-hidden=${this.href ? "true" : (this.label ? "false" : "true")}
+        role=${!this.href && this.label ? "img" : nothing}
+        aria-label=${!this.href && this.label ? this.label : nothing}
+      >
+        <path fill-rule="evenodd" clip-rule="evenodd" d=${iconData.path} />
+      </svg>
+    `;
+        // If href is provided, wrap in a link
+        if (this.href) {
+            if (!this.label) {
+                console.warn(`[oh-icon] When using href, label is required for accessibility`);
+            }
+            const rel = this.target === "_blank" ? "noopener noreferrer" : undefined;
+            return html `
+        <a
+          class="icon-link"
+          href=${this.href}
+          target=${this.target || nothing}
+          rel=${rel || nothing}
+          aria-label=${this.label || nothing}
+        >
+          ${svg}
+        </a>
+      `;
+        }
+        return svg;
+    }
+};
+__decorate([
+    property({ type: String })
+], OhIcon.prototype, "name", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], OhIcon.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], OhIcon.prototype, "inverse", void 0);
+__decorate([
+    property({ type: String })
+], OhIcon.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], OhIcon.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], OhIcon.prototype, "target", void 0);
+OhIcon = __decorate([
+    customElement("oh-icon")
+], OhIcon);
+export { OhIcon };
+//# sourceMappingURL=oh-icon.js.map

package/dist/oh-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oh-icon.js","sourceRoot":"","sources":["../src/oh-icon.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAwClD,iBAAiB;AACjB,MAAM,KAAK,GAAwD;IACjE,uBAAuB;IACvB,OAAO,EAAE;QACP,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,6JAA6J;KACpK;IACD,MAAM,EAAE;QACN,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,ktBAAktB;KACztB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,ofAAof;KAC3f;IACD,SAAS,EAAE;QACT,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,+2BAA+2B;KACt3B;IACD,OAAO,EAAE;QACP,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,8VAA8V;KACrW;IACD,QAAQ,EAAE;QACR,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,gSAAgS;KACvS;IACD,KAAK,EAAE;QACL,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,wLAAwL;KAC/L;IACD,QAAQ,EAAE;QACR,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,iHAAiH;KACxH;IAED,qBAAqB;IACrB,aAAa,EAAE;QACb,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,6JAA6J;KACpK;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,kKAAkK;KACzK;IACD,UAAU,EAAE;QACV,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,mKAAmK;KAC1K;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,6JAA6J;KACpK;IACD,eAAe,EAAE;QACf,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,qIAAqI;KAC5I;IACD,cAAc,EAAE;QACd,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,qIAAqI;KAC5I;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,uIAAuI;KAC9I;IACD,cAAc,EAAE;QACd,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,qIAAqI;KAC5I;IACD,eAAe,EAAE;QACf,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,gWAAgW;KACvW;IAED,kBAAkB;IAClB,KAAK,EAAE;QACL,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,6LAA6L;KACpM;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,kIAAkI;KACzI;IACD,KAAK,EAAE;QACL,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,sEAAsE;KAC7E;IACD,KAAK,EAAE;QACL,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,8IAA8I;KACrJ;IACD,MAAM,EAAE;QACN,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,gIAAgI;KACvI;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,oNAAoN;KAC3N;IACD,QAAQ,EAAE;QACR,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,wcAAwc;KAC/c;IACD,KAAK,EAAE;QACL,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,yRAAyR;KAChS;IACD,OAAO,EAAE;QACP,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,8RAA8R;KACrS;IAED,mBAAmB;IACnB,IAAI,EAAE;QACJ,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,yOAAyO;KAChP;IACD,OAAO,EAAE;QACP,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,4OAA4O;KACnP;IACD,KAAK,EAAE;QACL,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,+MAA+M;KACtN;IACD,OAAO,EAAE;QACP,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,wJAAwJ;KAC/J;CACF,CAAC;AAGK,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAA9B;;QAiGL,SAAI,GAAa,MAAM,CAAC;QAMxB,YAAO,GAAG,KAAK,CAAC;IAsDlB,CAAC;aA5JiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0FF;KACF,AA7FqB,CA6FpB;IAoBF,MAAM;QACJ,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAElC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,OAAO,CAAC,IAAI,CAAC,gCAAgC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;YAC1D,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,MAAM,GAAG,GAAG,IAAI,CAAA;;kBAEF,QAAQ,CAAC,OAAO;;sBAEZ,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;eAC3D,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO;qBACpC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO;;0DAEV,QAAQ,CAAC,IAAI;;KAElE,CAAC;QAEF,sCAAsC;QACtC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;gBAChB,OAAO,CAAC,IAAI,CAAC,gEAAgE,CAAC,CAAC;YACjF,CAAC;YAED,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC;YAEzE,OAAO,IAAI,CAAA;;;iBAGA,IAAI,CAAC,IAAI;mBACP,IAAI,CAAC,MAAM,IAAI,OAAO;gBACzB,GAAG,IAAI,OAAO;uBACP,IAAI,CAAC,KAAK,IAAI,OAAO;;YAEhC,GAAG;;OAER,CAAC;QACJ,CAAC;QAED,OAAO,GAAG,CAAC;IACb,CAAC;;AA3DD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACH;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAC1B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACX;AAhHL,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CA6JlB"}