@cognivo/components 0.8.0

package/dist/components/cg-app-shell/cg-app-shell.js

@@ -0,0 +1,135 @@
+import { css as p, LitElement as c, html as d } from "lit";
+import { property as l, customElement as m } from "lit/decorators.js";
+import { h, r as g } from "../../chunks/premium.css-9I4kHrsl.js";
+var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, t = (b, e, i, o) => {
+  for (var r = o > 1 ? void 0 : o ? f(e, i) : e, s = b.length - 1, n; s >= 0; s--)
+    (n = b[s]) && (r = (o ? n(e, i, r) : n(r)) || r);
+  return o && r && v(e, i, r), r;
+};
+let a = class extends c {
+  constructor() {
+    super(...arguments), this.sidebarPosition = "left", this.noNavbar = !1, this.noSidebar = !1;
+  }
+  render() {
+    return d`
+      ${this.noNavbar ? "" : d`<header class="navbar"><slot name="navbar"></slot></header>`}
+      ${this.noSidebar ? "" : d`<aside class="sidebar"><slot name="sidebar"></slot></aside>`}
+      <main class="main"><slot></slot></main>
+    `;
+  }
+};
+a.styles = [h, g, p`
+    :host {
+      display: grid;
+      width: 100%;
+      height: 100vh;
+      grid-template-rows: var(--cg-component-app-shell-navbar-height, 64px) 1fr;
+      grid-template-columns: var(--cg-component-app-shell-sidebar-width, 240px) 1fr;
+      grid-template-areas:
+        "navbar navbar"
+        "sidebar main";
+      background: var(--cg-color-surface-base-background);
+      color: var(--cg-color-surface-base-text);
+      overflow: hidden;
+    }
+
+    :host([sidebar-position="right"]) {
+      grid-template-columns: 1fr var(--cg-component-app-shell-sidebar-width, 240px);
+      grid-template-areas:
+        "navbar navbar"
+        "main sidebar";
+    }
+
+    :host([no-sidebar]) {
+      grid-template-columns: 1fr;
+      grid-template-areas:
+        "navbar"
+        "main";
+    }
+
+    :host([no-navbar]) {
+      grid-template-rows: 1fr;
+      grid-template-areas: "sidebar main";
+    }
+
+    :host([no-navbar][sidebar-position="right"]) {
+      grid-template-areas: "main sidebar";
+    }
+
+    :host([no-navbar][no-sidebar]) {
+      grid-template-rows: 1fr;
+      grid-template-columns: 1fr;
+      grid-template-areas: "main";
+    }
+
+    .navbar {
+      grid-area: navbar;
+      display: flex;
+      align-items: stretch;
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      background: var(--cg-color-surface-container-background);
+      z-index: 2;
+      min-width: 0;
+    }
+
+    .sidebar {
+      grid-area: sidebar;
+      display: flex;
+      flex-direction: column;
+      border-right: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      background: var(--cg-color-surface-container-background);
+      overflow-y: auto;
+      min-height: 0;
+    }
+
+    :host([sidebar-position="right"]) .sidebar {
+      border-right: none;
+      border-left: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+
+    .main {
+      grid-area: main;
+      overflow-y: auto;
+      overflow-x: hidden;
+      min-width: 0;
+      min-height: 0;
+    }
+
+    /* Hide sidebar on narrow viewports — consumers slot a drawer trigger
+       into the navbar instead. */
+    @media (max-width: 768px) {
+      :host(:not([sidebar-position="overlay"])) {
+        grid-template-columns: 1fr;
+      }
+      :host(:not([sidebar-position="overlay"])) {
+        grid-template-areas:
+          "navbar"
+          "main";
+      }
+      :host(:not([no-navbar]):not([sidebar-position="overlay"])) .sidebar {
+        display: none;
+      }
+      :host([no-navbar]:not([sidebar-position="overlay"])) {
+        grid-template-areas: "main";
+      }
+      :host([no-navbar]:not([sidebar-position="overlay"])) .sidebar {
+        display: none;
+      }
+    }
+  `];
+t([
+  l({ attribute: "sidebar-position", reflect: !0 })
+], a.prototype, "sidebarPosition", 2);
+t([
+  l({ type: Boolean, attribute: "no-navbar", reflect: !0 })
+], a.prototype, "noNavbar", 2);
+t([
+  l({ type: Boolean, attribute: "no-sidebar", reflect: !0 })
+], a.prototype, "noSidebar", 2);
+a = t([
+  m("cg-app-shell")
+], a);
+export {
+  a as CgAppShell
+};
+//# sourceMappingURL=cg-app-shell.js.map

package/dist/components/cg-app-shell/cg-app-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-app-shell.js","sources":["../../../src/components/cg-app-shell/cg-app-shell.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-app-shell\n * Composed application shell — a sticky top navbar, an optional sidebar, and\n * an independently scrolling main region. Handles the layout most apps\n * hand-roll on top of `cg-navbar` + `cg-sidebar`.\n *\n * The shell takes the full viewport height by default. The main region is the\n * only scrollable surface; the navbar and sidebar are pinned. Below\n * `--cg-component-app-shell-breakpoint` (768px), the sidebar collapses out\n * of the layout — consumers should provide a drawer trigger inside the\n * navbar slot for narrow viewports.\n *\n * @example\n * ```html\n * <cg-app-shell>\n *   <cg-navbar slot=\"navbar\">…</cg-navbar>\n *   <cg-sidebar slot=\"sidebar\">…</cg-sidebar>\n *   <article>…page content…</article>\n * </cg-app-shell>\n * ```\n *\n * @example Right sidebar, no navbar\n * ```html\n * <cg-app-shell sidebar-position=\"right\" no-navbar>\n *   <cg-sidebar slot=\"sidebar\">…</cg-sidebar>\n *   <article>…</article>\n * </cg-app-shell>\n * ```\n *\n * @slot navbar - Top navigation bar (sticky)\n * @slot sidebar - Side navigation (sticky, hidden on narrow viewports)\n * @slot - Main content (scrollable)\n *\n * @cssprop --cg-component-app-shell-navbar-height - Navbar fixed height (default 64px)\n * @cssprop --cg-component-app-shell-sidebar-width - Sidebar fixed width (default 240px)\n * @cssprop --cg-component-app-shell-breakpoint - Width below which sidebar collapses (default 768px)\n */\n@customElement('cg-app-shell')\nexport class CgAppShell extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: grid;\n      width: 100%;\n      height: 100vh;\n      grid-template-rows: var(--cg-component-app-shell-navbar-height, 64px) 1fr;\n      grid-template-columns: var(--cg-component-app-shell-sidebar-width, 240px) 1fr;\n      grid-template-areas:\n        \"navbar navbar\"\n        \"sidebar main\";\n      background: var(--cg-color-surface-base-background);\n      color: var(--cg-color-surface-base-text);\n      overflow: hidden;\n    }\n\n    :host([sidebar-position=\"right\"]) {\n      grid-template-columns: 1fr var(--cg-component-app-shell-sidebar-width, 240px);\n      grid-template-areas:\n        \"navbar navbar\"\n        \"main sidebar\";\n    }\n\n    :host([no-sidebar]) {\n      grid-template-columns: 1fr;\n      grid-template-areas:\n        \"navbar\"\n        \"main\";\n    }\n\n    :host([no-navbar]) {\n      grid-template-rows: 1fr;\n      grid-template-areas: \"sidebar main\";\n    }\n\n    :host([no-navbar][sidebar-position=\"right\"]) {\n      grid-template-areas: \"main sidebar\";\n    }\n\n    :host([no-navbar][no-sidebar]) {\n      grid-template-rows: 1fr;\n      grid-template-columns: 1fr;\n      grid-template-areas: \"main\";\n    }\n\n    .navbar {\n      grid-area: navbar;\n      display: flex;\n      align-items: stretch;\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: var(--cg-color-surface-container-background);\n      z-index: 2;\n      min-width: 0;\n    }\n\n    .sidebar {\n      grid-area: sidebar;\n      display: flex;\n      flex-direction: column;\n      border-right: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: var(--cg-color-surface-container-background);\n      overflow-y: auto;\n      min-height: 0;\n    }\n\n    :host([sidebar-position=\"right\"]) .sidebar {\n      border-right: none;\n      border-left: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n\n    .main {\n      grid-area: main;\n      overflow-y: auto;\n      overflow-x: hidden;\n      min-width: 0;\n      min-height: 0;\n    }\n\n    /* Hide sidebar on narrow viewports — consumers slot a drawer trigger\n       into the navbar instead. */\n    @media (max-width: 768px) {\n      :host(:not([sidebar-position=\"overlay\"])) {\n        grid-template-columns: 1fr;\n      }\n      :host(:not([sidebar-position=\"overlay\"])) {\n        grid-template-areas:\n          \"navbar\"\n          \"main\";\n      }\n      :host(:not([no-navbar]):not([sidebar-position=\"overlay\"])) .sidebar {\n        display: none;\n      }\n      :host([no-navbar]:not([sidebar-position=\"overlay\"])) {\n        grid-template-areas: \"main\";\n      }\n      :host([no-navbar]:not([sidebar-position=\"overlay\"])) .sidebar {\n        display: none;\n      }\n    }\n  `];\n\n  /** Position of the sidebar slot, or \"overlay\" to keep it visible on narrow viewports. */\n  @property({ attribute: 'sidebar-position', reflect: true })\n  sidebarPosition: 'left' | 'right' | 'overlay' = 'left';\n\n  /** Hide the navbar slot entirely. */\n  @property({ type: Boolean, attribute: 'no-navbar', reflect: true })\n  noNavbar = false;\n\n  /** Hide the sidebar slot entirely. */\n  @property({ type: Boolean, attribute: 'no-sidebar', reflect: true })\n  noSidebar = false;\n\n  override render() {\n    return html`\n      ${this.noNavbar ? '' : html`<header class=\"navbar\"><slot name=\"navbar\"></slot></header>`}\n      ${this.noSidebar ? '' : html`<aside class=\"sidebar\"><slot name=\"sidebar\"></slot></aside>`}\n      <main class=\"main\"><slot></slot></main>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-app-shell': CgAppShell;\n  }\n}\n"],"names":["CgAppShell","LitElement","html","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AA0CO,IAAMA,IAAN,cAAyBC,EAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAuGL,KAAA,kBAAgD,QAIhD,KAAA,WAAW,IAIX,KAAA,YAAY;AAAA,EAAA;AAAA,EAEH,SAAS;AAChB,WAAOC;AAAA,QACH,KAAK,WAAW,KAAKA,8DAAiE;AAAA,QACtF,KAAK,YAAY,KAAKA,8DAAiE;AAAA;AAAA;AAAA,EAG7F;AACF;AAxHaF,EACK,SAAS,CAACG,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkGnD;AAIDC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,oBAAoB,SAAS,IAAM;AAAA,GAtG/CP,EAuGX,WAAA,mBAAA,CAAA;AAIAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,aAAa,SAAS,IAAM;AAAA,GA1GvDP,EA2GX,WAAA,YAAA,CAAA;AAIAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,cAAc,SAAS,IAAM;AAAA,GA9GxDP,EA+GX,WAAA,aAAA,CAAA;AA/GWA,IAANM,EAAA;AAAA,EADNE,EAAc,cAAc;AAAA,GAChBR,CAAA;"}

package/dist/components/cg-aspect-ratio/cg-aspect-ratio.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-aspect-ratio
+ * Layout primitive that constrains its slotted child to a fixed aspect ratio.
+ * The slotted element is sized to fill the box — pick `fit` to control how it
+ * fills (default `cover` crops to fill; `contain` letterboxes; `fill` stretches).
+ *
+ * @example
+ * ```html
+ * <cg-aspect-ratio ratio="16/9">
+ *   <img src="hero.jpg" alt="Hero" />
+ * </cg-aspect-ratio>
+ *
+ * <cg-aspect-ratio ratio="1/1" fit="contain">
+ *   <img src="logo.svg" alt="Logo" />
+ * </cg-aspect-ratio>
+ * ```
+ *
+ * @slot - Content (usually an `<img>`, `<video>`, `<picture>`, or `<iframe>`).
+ */
+export declare class CgAspectRatio extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Aspect ratio expressed as `"W/H"` (e.g. `"16/9"`, `"1/1"`, `"4 / 3"`). */
+    ratio: string;
+    /** How the slotted element fills the box. Defaults to `cover` (cropped). */
+    fit: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-aspect-ratio': CgAspectRatio;
+    }
+}
+//# sourceMappingURL=cg-aspect-ratio.d.ts.map

package/dist/components/cg-aspect-ratio/cg-aspect-ratio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-aspect-ratio.d.ts","sourceRoot":"","sources":["../../../src/components/cg-aspect-ratio/cg-aspect-ratio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAYnB;IAEH,6EAA6E;IAChD,KAAK,EAAE,MAAM,CAAU;IAEpD,4EAA4E;IAC/C,GAAG,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,CAAW;IAExF,MAAM;CAUhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/cg-aspect-ratio/cg-aspect-ratio.js

@@ -0,0 +1,47 @@
+import { css as n, LitElement as f, html as m } from "lit";
+import { property as l, customElement as v } from "lit/decorators.js";
+import { h } from "../../chunks/premium.css-9I4kHrsl.js";
+var u = Object.defineProperty, d = Object.getOwnPropertyDescriptor, p = (s, e, a, o) => {
+  for (var t = o > 1 ? void 0 : o ? d(e, a) : e, c = s.length - 1, i; c >= 0; c--)
+    (i = s[c]) && (t = (o ? i(e, a, t) : i(t)) || t);
+  return o && t && u(e, a, t), t;
+};
+let r = class extends f {
+  constructor() {
+    super(...arguments), this.ratio = "16/9", this.fit = "cover";
+  }
+  render() {
+    const e = `--cg-component-aspect-ratio-value: ${this.ratio.replace("/", " / ")}; --cg-component-aspect-ratio-fit: ${this.fit};`;
+    return m`
+      <div class="wrap" style=${e}>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+r.styles = [h, n`
+    .wrap {
+      width: 100%;
+      aspect-ratio: var(--cg-component-aspect-ratio-value);
+      overflow: hidden;
+    }
+    .wrap ::slotted(*) {
+      width: 100%;
+      height: 100%;
+      object-fit: var(--cg-component-aspect-ratio-fit);
+      display: block;
+    }
+  `];
+p([
+  l({ reflect: !0 })
+], r.prototype, "ratio", 2);
+p([
+  l({ reflect: !0 })
+], r.prototype, "fit", 2);
+r = p([
+  v("cg-aspect-ratio")
+], r);
+export {
+  r as CgAspectRatio
+};
+//# sourceMappingURL=cg-aspect-ratio.js.map

package/dist/components/cg-aspect-ratio/cg-aspect-ratio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-aspect-ratio.js","sources":["../../../src/components/cg-aspect-ratio/cg-aspect-ratio.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock } from '../../styles/index.js';\n\n/**\n * @element cg-aspect-ratio\n * Layout primitive that constrains its slotted child to a fixed aspect ratio.\n * The slotted element is sized to fill the box — pick `fit` to control how it\n * fills (default `cover` crops to fill; `contain` letterboxes; `fill` stretches).\n *\n * @example\n * ```html\n * <cg-aspect-ratio ratio=\"16/9\">\n *   <img src=\"hero.jpg\" alt=\"Hero\" />\n * </cg-aspect-ratio>\n *\n * <cg-aspect-ratio ratio=\"1/1\" fit=\"contain\">\n *   <img src=\"logo.svg\" alt=\"Logo\" />\n * </cg-aspect-ratio>\n * ```\n *\n * @slot - Content (usually an `<img>`, `<video>`, `<picture>`, or `<iframe>`).\n */\n@customElement('cg-aspect-ratio')\nexport class CgAspectRatio extends LitElement {\n  static override styles = [hostBlock, css`\n    .wrap {\n      width: 100%;\n      aspect-ratio: var(--cg-component-aspect-ratio-value);\n      overflow: hidden;\n    }\n    .wrap ::slotted(*) {\n      width: 100%;\n      height: 100%;\n      object-fit: var(--cg-component-aspect-ratio-fit);\n      display: block;\n    }\n  `];\n\n  /** Aspect ratio expressed as `\"W/H\"` (e.g. `\"16/9\"`, `\"1/1\"`, `\"4 / 3\"`). */\n  @property({ reflect: true }) ratio: string = '16/9';\n\n  /** How the slotted element fills the box. Defaults to `cover` (cropped). */\n  @property({ reflect: true }) fit: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' = 'cover';\n\n  override render() {\n    // Accept \"16/9\" or \"16 / 9\" and normalize to CSS aspect-ratio syntax.\n    const normalized = this.ratio.replace('/', ' / ');\n    const styleVars = `--cg-component-aspect-ratio-value: ${normalized}; --cg-component-aspect-ratio-fit: ${this.fit};`;\n    return html`\n      <div class=\"wrap\" style=${styleVars}>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-aspect-ratio': CgAspectRatio;\n  }\n}\n"],"names":["CgAspectRatio","LitElement","styleVars","html","hostBlock","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAwBO,IAAMA,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAgBwB,KAAA,QAAgB,QAGhB,KAAA,MAA4D;AAAA,EAAA;AAAA,EAEhF,SAAS;AAGhB,UAAMC,IAAY,sCADC,KAAK,MAAM,QAAQ,KAAK,KAAK,CACkB,sCAAsC,KAAK,GAAG;AAChH,WAAOC;AAAA,gCACqBD,CAAS;AAAA;AAAA;AAAA;AAAA,EAIvC;AACF;AA/BaF,EACK,SAAS,CAACI,GAAWC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYpC;AAG4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAhBhBP,EAgBkB,WAAA,SAAA,CAAA;AAGAM,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAnBhBP,EAmBkB,WAAA,OAAA,CAAA;AAnBlBA,IAANM,EAAA;AAAA,EADNE,EAAc,iBAAiB;AAAA,GACnBR,CAAA;"}

package/dist/components/cg-auth-shell/cg-auth-shell.d.ts

@@ -0,0 +1,61 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-auth-shell
+ * Layout shell for authentication screens (sign-in, sign-up, magic-link,
+ * OTP challenge, password reset, MFA). Provides the canonical structure —
+ * brand mark, title, subtitle, form region, primary actions, footer links —
+ * with three layouts and consistent typography/spacing.
+ *
+ * The component is layout-only. Consumers slot in the actual form fields
+ * (`<cg-input>`, `<cg-password-input>`, `<cg-otp-input>`, etc.), the
+ * primary action button(s), and footer links to alternate flows.
+ *
+ * @example Sign-in
+ * ```html
+ * <cg-auth-shell mode="signin">
+ *   <cg-icon slot="brand" name="cognivo-logo"></cg-icon>
+ *   <span slot="title">Welcome back</span>
+ *   <span slot="subtitle">Sign in to your Cognivo account</span>
+ *
+ *   <cg-input label="Email" type="email" required></cg-input>
+ *   <cg-password-input label="Password" required></cg-password-input>
+ *
+ *   <cg-button slot="actions" variant="primary" submit>Sign in</cg-button>
+ *   <cg-link slot="footer" href="/forgot">Forgot password?</cg-link>
+ *   <cg-link slot="footer" href="/signup">Create account</cg-link>
+ * </cg-auth-shell>
+ * ```
+ *
+ * @example Split layout with marketing panel
+ * ```html
+ * <cg-auth-shell layout="split">
+ *   <div slot="aside">…hero / testimonial / brand visual…</div>
+ *   …form contents…
+ * </cg-auth-shell>
+ * ```
+ *
+ * @slot brand - Logo or wordmark above the title.
+ * @slot title - Page heading. Plain text or rich content.
+ * @slot subtitle - Supporting copy below the title.
+ * @slot - Form fields (default slot).
+ * @slot actions - Primary action button(s).
+ * @slot footer - Alternate-flow links and helper text.
+ * @slot aside - Marketing panel content (only renders when layout="split").
+ *
+ * @cssprop --cg-component-auth-shell-card-width - Form card width (default 420px)
+ * @cssprop --cg-component-auth-shell-card-radius - Form card radius (default 16px)
+ */
+export declare class CgAuthShell extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Visual mode tag — does not change behavior, only `data-mode` for consumer styling. */
+    mode: 'signin' | 'signup' | 'otp' | 'magic-link' | 'reset' | 'mfa';
+    /** Layout variant. */
+    layout: 'centered' | 'split' | 'full-bleed';
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-auth-shell': CgAuthShell;
+    }
+}
+//# sourceMappingURL=cg-auth-shell.d.ts.map

package/dist/components/cg-auth-shell/cg-auth-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-auth-shell.d.ts","sourceRoot":"","sources":["../../../src/components/cg-auth-shell/cg-auth-shell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAoHnB;IAEH,yFAAyF;IAC5D,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,YAAY,GAAG,OAAO,GAAG,KAAK,CAAY;IAE3G,sBAAsB;IACO,MAAM,EAAE,UAAU,GAAG,OAAO,GAAG,YAAY,CAAc;IAE7E,MAAM;CAwBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/components/cg-auth-shell/cg-auth-shell.js

@@ -0,0 +1,163 @@
+import { css as g, LitElement as p, html as c, nothing as h } from "lit";
+import { property as d, customElement as v } from "lit/decorators.js";
+import { h as u, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, l = (t, r, o, i) => {
+  for (var e = i > 1 ? void 0 : i ? y(r, o) : r, s = t.length - 1, n; s >= 0; s--)
+    (n = t[s]) && (e = (i ? n(r, o, e) : n(e)) || e);
+  return i && e && m(r, o, e), e;
+};
+let a = class extends p {
+  constructor() {
+    super(...arguments), this.mode = "signin", this.layout = "centered";
+  }
+  render() {
+    const t = () => c`
+      <form class="card" novalidate>
+        <div class="brand"><slot name="brand"></slot></div>
+        <div class="heading">
+          <span class="title"><slot name="title"></slot></span>
+          <span class="subtitle"><slot name="subtitle"></slot></span>
+        </div>
+        <div class="body"><slot></slot></div>
+        <div class="actions"><slot name="actions"></slot></div>
+        <div class="footer"><slot name="footer"></slot></div>
+      </form>
+    `;
+    return this.layout === "split" ? c`
+        <div class="container">
+          <div class="aside"><slot name="aside"></slot></div>
+          <div class="card-region">${t()}</div>
+        </div>
+      ` : c`<div class="container">${t()}</div>${h}`;
+  }
+};
+a.styles = [u, f, g`
+    :host {
+      display: block;
+      width: 100%;
+      min-height: 100vh;
+      background: var(--cg-color-surface-base-background);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    /* ── Centered layout (default) ───────────────────────────────────── */
+    .container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+      padding: var(--cg-spacing-32) var(--cg-spacing-16);
+    }
+
+    .card {
+      width: 100%;
+      max-width: var(--cg-component-auth-shell-card-width, 420px);
+      background: var(--cg-color-surface-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-auth-shell-card-radius, var(--cg-border-radius-200));
+      padding: var(--cg-spacing-32) var(--cg-spacing-24);
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-16);
+    }
+
+    /* ── Full-bleed layout — no card chrome ─────────────────────────── */
+    :host([layout="full-bleed"]) .card {
+      max-width: var(--cg-component-auth-shell-card-width, 420px);
+      background: transparent;
+      border: 0;
+      padding: 0;
+    }
+
+    /* ── Split layout — aside on left, form on right ────────────────── */
+    :host([layout="split"]) .container {
+      align-items: stretch;
+      padding: 0;
+    }
+    :host([layout="split"]) .aside {
+      display: flex;
+      flex: 1 1 0;
+      min-height: 100vh;
+      background: var(--cg-color-action-tertiary-background-hover);
+      align-items: center;
+      justify-content: center;
+      padding: var(--cg-spacing-48);
+    }
+    :host([layout="split"]) .card-region {
+      display: flex;
+      flex: 1 1 0;
+      align-items: center;
+      justify-content: center;
+      padding: var(--cg-spacing-32) var(--cg-spacing-16);
+    }
+    @media (max-width: 768px) {
+      :host([layout="split"]) .aside { display: none; }
+      :host([layout="split"]) .card-region { flex: 1 1 100%; }
+    }
+    :host(:not([layout="split"])) .aside { display: none; }
+
+    /* ── Internal regions ───────────────────────────────────────────── */
+    .brand {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: var(--cg-spacing-32);
+    }
+    .brand:empty { display: none; }
+
+    .heading {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-4);
+      text-align: center;
+    }
+    .title {
+      font-size: var(--cg-font-size-xl);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+      line-height: var(--cg-line-height-tight);
+    }
+    .subtitle {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-container-outlined);
+      line-height: var(--cg-line-height-snug);
+    }
+
+    .body {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-12);
+    }
+    .actions {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-8);
+      margin-top: var(--cg-spacing-8);
+    }
+    .actions ::slotted(*) { width: 100%; }
+
+    .footer {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--cg-spacing-8);
+      padding-top: var(--cg-spacing-16);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      font-size: var(--cg-font-size-xs);
+    }
+    .footer:empty { display: none; }
+  `];
+l([
+  d({ reflect: !0 })
+], a.prototype, "mode", 2);
+l([
+  d({ reflect: !0 })
+], a.prototype, "layout", 2);
+a = l([
+  v("cg-auth-shell")
+], a);
+export {
+  a as CgAuthShell
+};
+//# sourceMappingURL=cg-auth-shell.js.map

package/dist/components/cg-auth-shell/cg-auth-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-auth-shell.js","sources":["../../../src/components/cg-auth-shell/cg-auth-shell.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-auth-shell\n * Layout shell for authentication screens (sign-in, sign-up, magic-link,\n * OTP challenge, password reset, MFA). Provides the canonical structure —\n * brand mark, title, subtitle, form region, primary actions, footer links —\n * with three layouts and consistent typography/spacing.\n *\n * The component is layout-only. Consumers slot in the actual form fields\n * (`<cg-input>`, `<cg-password-input>`, `<cg-otp-input>`, etc.), the\n * primary action button(s), and footer links to alternate flows.\n *\n * @example Sign-in\n * ```html\n * <cg-auth-shell mode=\"signin\">\n *   <cg-icon slot=\"brand\" name=\"cognivo-logo\"></cg-icon>\n *   <span slot=\"title\">Welcome back</span>\n *   <span slot=\"subtitle\">Sign in to your Cognivo account</span>\n *\n *   <cg-input label=\"Email\" type=\"email\" required></cg-input>\n *   <cg-password-input label=\"Password\" required></cg-password-input>\n *\n *   <cg-button slot=\"actions\" variant=\"primary\" submit>Sign in</cg-button>\n *   <cg-link slot=\"footer\" href=\"/forgot\">Forgot password?</cg-link>\n *   <cg-link slot=\"footer\" href=\"/signup\">Create account</cg-link>\n * </cg-auth-shell>\n * ```\n *\n * @example Split layout with marketing panel\n * ```html\n * <cg-auth-shell layout=\"split\">\n *   <div slot=\"aside\">…hero / testimonial / brand visual…</div>\n *   …form contents…\n * </cg-auth-shell>\n * ```\n *\n * @slot brand - Logo or wordmark above the title.\n * @slot title - Page heading. Plain text or rich content.\n * @slot subtitle - Supporting copy below the title.\n * @slot - Form fields (default slot).\n * @slot actions - Primary action button(s).\n * @slot footer - Alternate-flow links and helper text.\n * @slot aside - Marketing panel content (only renders when layout=\"split\").\n *\n * @cssprop --cg-component-auth-shell-card-width - Form card width (default 420px)\n * @cssprop --cg-component-auth-shell-card-radius - Form card radius (default 16px)\n */\n@customElement('cg-auth-shell')\nexport class CgAuthShell extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n      width: 100%;\n      min-height: 100vh;\n      background: var(--cg-color-surface-base-background);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    /* ── Centered layout (default) ───────────────────────────────────── */\n    .container {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 100vh;\n      padding: var(--cg-spacing-32) var(--cg-spacing-16);\n    }\n\n    .card {\n      width: 100%;\n      max-width: var(--cg-component-auth-shell-card-width, 420px);\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-auth-shell-card-radius, var(--cg-border-radius-200));\n      padding: var(--cg-spacing-32) var(--cg-spacing-24);\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-16);\n    }\n\n    /* ── Full-bleed layout — no card chrome ─────────────────────────── */\n    :host([layout=\"full-bleed\"]) .card {\n      max-width: var(--cg-component-auth-shell-card-width, 420px);\n      background: transparent;\n      border: 0;\n      padding: 0;\n    }\n\n    /* ── Split layout — aside on left, form on right ────────────────── */\n    :host([layout=\"split\"]) .container {\n      align-items: stretch;\n      padding: 0;\n    }\n    :host([layout=\"split\"]) .aside {\n      display: flex;\n      flex: 1 1 0;\n      min-height: 100vh;\n      background: var(--cg-color-action-tertiary-background-hover);\n      align-items: center;\n      justify-content: center;\n      padding: var(--cg-spacing-48);\n    }\n    :host([layout=\"split\"]) .card-region {\n      display: flex;\n      flex: 1 1 0;\n      align-items: center;\n      justify-content: center;\n      padding: var(--cg-spacing-32) var(--cg-spacing-16);\n    }\n    @media (max-width: 768px) {\n      :host([layout=\"split\"]) .aside { display: none; }\n      :host([layout=\"split\"]) .card-region { flex: 1 1 100%; }\n    }\n    :host(:not([layout=\"split\"])) .aside { display: none; }\n\n    /* ── Internal regions ───────────────────────────────────────────── */\n    .brand {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: var(--cg-spacing-32);\n    }\n    .brand:empty { display: none; }\n\n    .heading {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-4);\n      text-align: center;\n    }\n    .title {\n      font-size: var(--cg-font-size-xl);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-tight);\n    }\n    .subtitle {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-snug);\n    }\n\n    .body {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-12);\n    }\n    .actions {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n      margin-top: var(--cg-spacing-8);\n    }\n    .actions ::slotted(*) { width: 100%; }\n\n    .footer {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--cg-spacing-8);\n      padding-top: var(--cg-spacing-16);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      font-size: var(--cg-font-size-xs);\n    }\n    .footer:empty { display: none; }\n  `];\n\n  /** Visual mode tag — does not change behavior, only `data-mode` for consumer styling. */\n  @property({ reflect: true }) mode: 'signin' | 'signup' | 'otp' | 'magic-link' | 'reset' | 'mfa' = 'signin';\n\n  /** Layout variant. */\n  @property({ reflect: true }) layout: 'centered' | 'split' | 'full-bleed' = 'centered';\n\n  override render() {\n    const renderCard = () => html`\n      <form class=\"card\" novalidate>\n        <div class=\"brand\"><slot name=\"brand\"></slot></div>\n        <div class=\"heading\">\n          <span class=\"title\"><slot name=\"title\"></slot></span>\n          <span class=\"subtitle\"><slot name=\"subtitle\"></slot></span>\n        </div>\n        <div class=\"body\"><slot></slot></div>\n        <div class=\"actions\"><slot name=\"actions\"></slot></div>\n        <div class=\"footer\"><slot name=\"footer\"></slot></div>\n      </form>\n    `;\n\n    if (this.layout === 'split') {\n      return html`\n        <div class=\"container\">\n          <div class=\"aside\"><slot name=\"aside\"></slot></div>\n          <div class=\"card-region\">${renderCard()}</div>\n        </div>\n      `;\n    }\n    return html`<div class=\"container\">${renderCard()}</div>${nothing}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-auth-shell': CgAuthShell;\n  }\n}\n"],"names":["CgAuthShell","LitElement","renderCard","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAmDO,IAAMA,IAAN,cAA0BC,EAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAwHwB,KAAA,OAAqE,UAGrE,KAAA,SAA8C;AAAA,EAAA;AAAA,EAElE,SAAS;AAChB,UAAMC,IAAa,MAAMC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAazB,WAAI,KAAK,WAAW,UACXA;AAAA;AAAA;AAAA,qCAGwBD,GAAY;AAAA;AAAA,UAItCC,2BAA8BD,EAAA,CAAY,SAASE,CAAO;AAAA,EACnE;AACF;AArJaJ,EACK,SAAS,CAACK,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAoHnD;AAG4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAxHhBT,EAwHkB,WAAA,QAAA,CAAA;AAGAQ,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA3HhBT,EA2HkB,WAAA,UAAA,CAAA;AA3HlBA,IAANQ,EAAA;AAAA,EADNE,EAAc,eAAe;AAAA,GACjBV,CAAA;"}

package/dist/components/cg-autocomplete/cg-autocomplete.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+export interface AutocompleteOption {
+    value: string;
+    label: string;
+    icon?: string;
+}
+/**
+ * <cg-autocomplete> — Combobox input with filtered dropdown suggestions.
+ *
+ * @example
+ * ```html
+ * <cg-autocomplete label="Country" placeholder="Search..." .options=${countries}></cg-autocomplete>
+ * ```
+ *
+ * @fires {CustomEvent<{query: string}>} cg-autocomplete-input - On input change
+ * @fires {CustomEvent<{value: string, label: string}>} cg-autocomplete-select - On option select
+ *
+ * @cssprop --cg-component-input-radius - Input border radius
+ * @cssprop --cg-component-input-height-md - Input height
+ * @cssprop --cg-color-input-border-default - Default border color
+ */
+export declare class CgAutocomplete extends LitElement {
+    static styles: import('lit').CSSResult[];
+    options: AutocompleteOption[];
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    value: string;
+    placeholder: string;
+    label: string;
+    disabled: boolean;
+    error: boolean;
+    clearable: boolean;
+    private _query;
+    private _open;
+    private _focused;
+    private _activeIndex;
+    private _input;
+    private get _filtered();
+    private _onInput;
+    private _select;
+    private _onKeyDown;
+    private _clear;
+    private _highlightMatch;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-autocomplete': CgAutocomplete;
+    }
+}
+//# sourceMappingURL=cg-autocomplete.d.ts.map

package/dist/components/cg-autocomplete/cg-autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/cg-autocomplete/cg-autocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;GAcG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAqJnB;IAEwB,OAAO,EAAE,kBAAkB,EAAE,CAAM;IACjC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACtE,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,KAAK,SAAM;IACM,QAAQ,UAAS;IACF,KAAK,UAAS;IAC7B,SAAS,UAAS;IAEtC,OAAO,CAAC,MAAM,CAAM;IACpB,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,YAAY,CAAM;IAEnB,OAAO,CAAC,MAAM,CAAoB;IAElD,OAAO,KAAK,SAAS,GAIpB;IAED,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,OAAO;IAOf,OAAO,CAAC,UAAU;IAiBlB,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,eAAe;IAUd,MAAM;CA4ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAC;KACnC;CACF"}