agnosticui-core 2.0.0-alpha.2

package/dist/shared/form-control-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Shared form control styles
+ *
+ * Common CSS styles for form controls (Input, Checkbox, Radio, Toggle, etc.)
+ * Import these styles in component static styles array.
+ */
+export declare const formControlStyles: import('lit').CSSResult;
+//# sourceMappingURL=form-control-styles.d.ts.map

package/dist/shared/form-control-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-control-styles.d.ts","sourceRoot":"","sources":["../../src/shared/form-control-styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,eAAO,MAAM,iBAAiB,yBA6G7B,CAAC"}

package/dist/shared/form-control-styles.js

@@ -0,0 +1,114 @@
+import { css as o } from "lit";
+const a = o`
+  /* Label - Default (top position) */
+  .ag-form-control__label {
+    display: block;
+    font-size: var(--ag-font-size-base);
+    font-weight: 600;
+    color: var(--ag-text-primary);
+    line-height: var(--ag-line-height-base);
+    margin-block-end: var(--ag-space-2);
+  }
+
+  /* Label bottom position - label appears below control */
+  .ag-form-control__label--bottom {
+    margin-block-end: 0;
+    margin-block-start: var(--ag-space-2);
+  }
+
+  /* Visually hidden label (still accessible to screen readers) */
+  .ag-form-control__label--hidden {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+  }
+
+  /* Horizontal layout wrapper - for start/end label positions */
+  .ag-form-control--horizontal {
+    display: flex;
+    align-items: baseline; /* Align text baselines for visual centering */
+    gap: var(--ag-space-3);
+  }
+
+  /* Horizontal label layout (start or end) - overrides display: block */
+  .ag-form-control__label--horizontal {
+    display: inline-block; /* Override display: block */
+    min-inline-size: 100px;
+    max-inline-size: 200px; /* Prevent super long labels */
+    margin-inline-end: 0; /* Gap handles spacing */
+    margin-block-end: 0;
+    flex-shrink: 0; /* Don't let label shrink */
+  }
+
+  /* Label at start (before control) */
+  .ag-form-control__label--start {
+    order: -1; /* Ensure label comes first in flex layout */
+  }
+
+  /* Label at end (after control) */
+  .ag-form-control__label--end {
+    order: 1; /* Ensure label comes after in flex layout */
+  }
+
+  /* Input/control sizing for horizontal layout - progressive enhancement */
+  .ag-form-control--horizontal input,
+  .ag-form-control--horizontal textarea,
+  .ag-form-control--horizontal select {
+    /* Progressive enhancement with field-sizing (Chrome/Safari TP) */
+    field-sizing: content;
+    max-inline-size: 100%;
+    min-inline-size: 100px;
+
+    /* Fallback for browsers without field-sizing support */
+    width: 200px;
+    box-sizing: border-box;
+  }
+
+  /* When field-sizing is supported, allow natural growth */
+  @supports (field-sizing: content) {
+    .ag-form-control--horizontal input,
+    .ag-form-control--horizontal textarea,
+    .ag-form-control--horizontal select {
+      width: auto;
+    }
+  }
+
+  /* Required indicator (asterisk) */
+  .ag-form-control__required {
+    /* COLOR: We use a CSS variable for error text color to more easily toggle light and dark modes */
+    color: var(--ag-error-text);
+    margin-inline-start: var(--ag-space-1);
+  }
+
+  /* Helper text */
+  .ag-form-control__helper {
+    display: block;
+    font-size: var(--ag-font-size-sm);
+    color: var(--ag-text-primary);
+    margin-block-start: var(--ag-space-1);
+    margin-block-end: var(--ag-space-1);
+  }
+
+  /* Error text */
+  .ag-form-control__error {
+    display: block;
+    font-size: var(--ag-font-size-sm);
+    /* COLOR: We use a CSS variable for error text color to more easily toggle light and dark modes */
+    color: var(--ag-error-text);
+    margin-block-start: var(--ag-space-1);
+    margin-block-end: var(--ag-space-1);
+  }
+
+  .ag-form-control__error[hidden] {
+    display: none;
+  }
+`;
+export {
+  a as formControlStyles
+};

package/dist/shared/form-control-utils.d.ts

@@ -0,0 +1,88 @@
+import { TemplateResult, nothing } from 'lit';
+
+/**
+ * Stable IDs for form control elements
+ */
+export interface FormControlIds {
+    inputId: string;
+    labelId: string;
+    helperId: string;
+    errorId: string;
+}
+/**
+ * Generate stable IDs for form control elements
+ * Call this once in the component constructor or as a class field
+ *
+ * @param prefix - Component prefix (e.g., 'ag-input')
+ * @returns Object with inputId, labelId, helperId, errorId
+ */
+export declare function createFormControlIds(prefix: string): FormControlIds;
+/**
+ * Build aria-describedby attribute value
+ * Only includes IDs for elements that actually exist
+ *
+ * @param options - Configuration for which elements are present
+ * @returns Space-separated ID string or undefined if no IDs
+ */
+export declare function buildAriaDescribedBy(options: {
+    helperId: string;
+    errorId: string;
+    hasHelper: boolean;
+    hasError: boolean;
+}): string | undefined;
+/**
+ * Label position options for form controls
+ *
+ * Directional values that work for all form controls:
+ * - 'top': Label above control (default for Input, Select, etc.)
+ * - 'bottom': Label below control
+ * - 'start': Label to the start of control (respects RTL, default for Checkbox/Radio/Toggle)
+ * - 'end': Label to the end of control (respects RTL)
+ */
+export type LabelPosition = 'top' | 'end' | 'bottom' | 'start';
+/**
+ * Check if label position is horizontal (start or end)
+ */
+export declare function isHorizontalLabel(position: LabelPosition): boolean;
+/**
+ * Check if label position is vertical (top or bottom)
+ */
+export declare function isVerticalLabel(position: LabelPosition): boolean;
+/**
+ * Render a form control label
+ * Uses native <label for="..."> association within shadow DOM
+ *
+ * @param options - Label rendering options
+ * @returns TemplateResult or nothing if no label
+ */
+export declare function renderFormLabel(options: {
+    label: string;
+    labelId: string;
+    inputId: string;
+    required: boolean;
+    hidden: boolean;
+    position?: LabelPosition;
+}): TemplateResult | typeof nothing;
+/**
+ * Render helper text
+ *
+ * @param options - Helper text rendering options
+ * @returns TemplateResult or nothing if no helper text
+ */
+export declare function renderFormHelper(options: {
+    helpText: string;
+    helperId: string;
+}): TemplateResult | typeof nothing;
+/**
+ * Render error text
+ * Hidden when not invalid or no error message
+ *
+ * @param options - Error text rendering options
+ * @returns TemplateResult (always rendered but may be hidden)
+ */
+export declare function renderFormError(options: {
+    errorMessage: string;
+    errorId: string;
+    invalid: boolean;
+}): TemplateResult;
+//# sourceMappingURL=form-control-utils.d.ts.map

package/dist/shared/form-control-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-control-utils.d.ts","sourceRoot":"","sources":["../../src/shared/form-control-utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAQ,KAAK,cAAc,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGzD;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,MAAM,GAAG,cAAc,CAQnE;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE;IAC5C,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB,GAAG,MAAM,GAAG,SAAS,CAKrB;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE/D;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,aAAa,GAAG,OAAO,CAElE;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,aAAa,GAAG,OAAO,CAEhE;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B,GAAG,cAAc,GAAG,OAAO,OAAO,CAyBlC;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE;IACxC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,cAAc,GAAG,OAAO,OAAO,CAYlC;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE;IACvC,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB,GAAG,cAAc,CAWjB"}

package/dist/shared/form-control-utils.js

@@ -0,0 +1,70 @@
+import { nothing as a, html as l } from "lit";
+import { generateUniqueId as n } from "../utils/unique-id.js";
+function i(r) {
+  const e = n(r);
+  return {
+    inputId: `${e}-input`,
+    labelId: `${e}-label`,
+    helperId: `${e}-helper`,
+    errorId: `${e}-error`
+  };
+}
+function u(r) {
+  const e = [];
+  return r.hasHelper && e.push(r.helperId), r.hasError && e.push(r.errorId), e.length > 0 ? e.join(" ") : void 0;
+}
+function t(r) {
+  return r === "start" || r === "end";
+}
+function c(r) {
+  return r === "top" || r === "bottom";
+}
+function f(r) {
+  if (!r.label) return a;
+  const e = [];
+  return r.position && t(r.position) ? (e.push("ag-form-control__label--horizontal"), e.push(`ag-form-control__label--${r.position}`)) : r.position === "bottom" && e.push(`ag-form-control__label--${r.position}`), l`
+    <label
+      id="${r.labelId}"
+      for="${r.inputId}"
+      class="ag-form-control__label ${r.hidden ? "ag-form-control__label--hidden" : ""} ${e.join(" ")}"
+      part="ag-label"
+    >
+      ${r.label}
+      ${r.required ? l`
+        <span class="ag-form-control__required" part="ag-required" aria-hidden="true">*</span>
+      ` : a}
+    </label>
+  `;
+}
+function h(r) {
+  return r.helpText ? l`
+    <div
+      id="${r.helperId}"
+      class="ag-form-control__helper"
+      part="ag-helper"
+    >
+      ${r.helpText}
+    </div>
+  ` : a;
+}
+function b(r) {
+  return l`
+    <div
+      id="${r.errorId}"
+      class="ag-form-control__error"
+      part="ag-error"
+      ?hidden="${!r.invalid || !r.errorMessage}"
+    >
+      ${r.errorMessage || ""}
+    </div>
+  `;
+}
+export {
+  u as buildAriaDescribedBy,
+  i as createFormControlIds,
+  t as isHorizontalLabel,
+  c as isVerticalLabel,
+  b as renderFormError,
+  h as renderFormHelper,
+  f as renderFormLabel
+};

package/dist/state-CovhUvdr.js

@@ -0,0 +1,12 @@
+import { n as r } from "./property-CemaeiRl.js";
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function n(t) {
+  return r({ ...t, state: !0, attribute: !1 });
+}
+export {
+  n as r
+};

package/dist/styles/ag-tokens-dark.css

@@ -0,0 +1,127 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-theme="dark"] {
+  --ag-black: #010409;
+  --ag-white: #ffffff;
+  --ag-neutral-50: #F0F6FC;
+  --ag-neutral-100: #D1D7E0;
+  --ag-neutral-200: #B7BDC8;
+  --ag-neutral-300: #9EA5AF;
+  --ag-neutral-400: #9198A1;
+  --ag-neutral-500: #656C76;
+  --ag-neutral-600: #3D444D;
+  --ag-neutral-700: #212730;
+  --ag-neutral-800: #171c24;
+  --ag-neutral-900: #0D1117;
+  --ag-blue-50: #cae8ff;
+  --ag-blue-100: #a5d6ff;
+  --ag-blue-200: #79c0ff;
+  --ag-blue-300: #58a6ff;
+  --ag-blue-400: #388bfd;
+  --ag-blue-500: #1f6feb;
+  --ag-blue-600: #1158c7;
+  --ag-blue-700: #0d419d;
+  --ag-blue-800: #0c2d6b;
+  --ag-blue-900: #051d4d;
+  --ag-green-50: #aff5b4;
+  --ag-green-100: #7ee787;
+  --ag-green-200: #56d364;
+  --ag-green-300: #3fb950;
+  --ag-green-400: #2EA043;
+  --ag-green-500: #238636;
+  --ag-green-600: #196c2e;
+  --ag-green-700: #0f5323;
+  --ag-green-800: #033a16;
+  --ag-green-900: #04260f;
+  --ag-yellow-50: #f8e3a1;
+  --ag-yellow-100: #f2cc60;
+  --ag-yellow-200: #e3b341;
+  --ag-yellow-300: #d29922;
+  --ag-yellow-400: #bb8009;
+  --ag-yellow-500: #9e6a03;
+  --ag-yellow-600: #845306;
+  --ag-yellow-700: #693e00;
+  --ag-yellow-800: #4b2900;
+  --ag-yellow-900: #341a00;
+  --ag-red-50: #ffdcd7;
+  --ag-red-100: #ffc1ba;
+  --ag-red-200: #ffa198;
+  --ag-red-300: #ff7b72;
+  --ag-red-400: #f85149;
+  --ag-red-500: #da3633;
+  --ag-red-600: #b62324;
+  --ag-red-700: #8e1519;
+  --ag-red-800: #67060c;
+  --ag-red-900: #490202;
+  --ag-purple-50: #eddeff;
+  --ag-purple-100: #e2c5ff;
+  --ag-purple-200: #d2a8ff;
+  --ag-purple-300: #BE8FFF;
+  --ag-purple-400: #AB7DF8;
+  --ag-purple-500: #8957e5;
+  --ag-purple-600: #6e40c9;
+  --ag-purple-700: #553098;
+  --ag-purple-800: #3c1e70;
+  --ag-purple-900: #271052;
+  --ag-coral-50: #ffddd2;
+  --ag-coral-100: #ffc2b2;
+  --ag-coral-200: #ffa28b;
+  --ag-coral-300: #f78166;
+  --ag-coral-400: #ea6045;
+  --ag-coral-500: #cf462d;
+  --ag-coral-600: #ac3220;
+  --ag-coral-700: #872012;
+  --ag-coral-800: #640d04;
+  --ag-coral-900: #460701;
+  --ag-text-primary: #F0F6FC;
+  --ag-text-secondary: #D1D7E0;
+  --ag-text-muted: #D1D7E0;
+  --ag-text-primary-muted: #D1D7E0;
+  --ag-text-primary-inverted: #010409;
+  --ag-background-primary: #010409;
+  --ag-background-primary-inverted: #ffffff;
+  --ag-background-secondary: #212730;
+  --ag-background-secondary-inverted: #D1D7E0;
+  --ag-background-tertiary: #3D444D;
+  --ag-background-disabled: #656C76;
+  --ag-primary-background: #051d4d;
+  --ag-primary-text: #a5d6ff;
+  --ag-success-background: #04260f;
+  --ag-success-text: #7ee787;
+  --ag-info-background: #171c24;
+  --ag-info-text: #D1D7E0;
+  --ag-warning-background: #341a00;
+  --ag-warning-text: #f2cc60;
+  --ag-danger-background: #490202;
+  --ag-danger-text: #ffc1ba;
+  --ag-border: #3D444D;
+  --ag-border-subtle: #656C76;
+  --ag-primary: #1158c7;
+  --ag-primary-rgb: 17, 88, 199;
+  --ag-primary-border: #1f6feb;
+  --ag-primary-dark: #0d419d;
+  --ag-secondary: #9198A1;
+  --ag-secondary-dark: #656C76;
+  --ag-danger: #DC2626;
+  --ag-danger-rgb: 220, 38, 38;
+  --ag-danger-dark: #f85149;
+  --ag-error-text: #ffa198;
+  --ag-warning-rgb: 212, 167, 44;
+  --ag-warning: #d29922;
+  --ag-warning-dark: #9e6a03;
+  --ag-success: #238636;
+  --ag-success-rgb: 26, 127, 55;
+  --ag-success-dark: #196c2e;
+  --ag-info: #9198A1;
+  --ag-info-dark: #656C76;
+  --ag-focus: 88, 166, 255;
+  --ag-focus-dark: #388bfd;
+  --ag-rating-filled: #d29922;
+  --ag-rating-filled-primary: #388bfd;
+  --ag-rating-filled-success: #3fb950;
+  --ag-rating-filled-warning: #d29922;
+  --ag-rating-filled-danger: #f85149;
+  --ag-rating-filled-secondary: #F0F6FC;
+}

package/dist/styles/ag-tokens.css

@@ -0,0 +1,193 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:where(html) {
+  --ag-drawer-width: 25rem;
+  --ag-sheet-height: 25vh;
+  --ag-space-0: 0;
+  --ag-space-1: 0.25rem;
+  --ag-space-2: 0.5rem;
+  --ag-space-3: 0.75rem;
+  --ag-space-4: 1rem;
+  --ag-space-5: 1.25rem;
+  --ag-space-6: 1.5rem;
+  --ag-space-7: 1.75rem;
+  --ag-space-8: 2rem;
+  --ag-space-9: 2.25rem;
+  --ag-space-10: 2.5rem;
+  --ag-space-12: 3rem;
+  --ag-space-14: 3.5rem;
+  --ag-font-size-xs: 0.75rem;
+  --ag-font-size-sm: 0.875rem;
+  --ag-font-size-base: 1rem;
+  --ag-font-size-md: 1.125rem;
+  --ag-font-size-lg: 1.25rem;
+  --ag-font-size-xl: 1.5rem;
+  --ag-font-size-2x: 2rem;
+  --ag-font-size-3x: 2.25rem;
+  --ag-font-size-4x: 2.5rem;
+  --ag-font-size-5x: 3rem;
+  --ag-line-height-sm: 1.25rem;
+  --ag-line-height-base: 1.5rem;
+  --ag-line-height-lg: 1.75rem;
+  --ag-radius-none: 0;
+  --ag-radius-sm: 0.25rem;
+  --ag-radius-md: 0.375rem;
+  --ag-radius-lg: 1rem;
+  --ag-radius-full: 9999px;
+  --ag-motion-fast: 100ms;
+  --ag-motion-medium-fast: 150ms;
+  --ag-motion-medium: 225ms;
+  --ag-motion-medium-slow: 325ms;
+  --ag-motion-slow: 480ms;
+  --ag-fx-duration-xs: 100ms;
+  --ag-fx-duration-sm: 150ms;
+  --ag-fx-duration-md: 225ms;
+  --ag-fx-duration-lg: 325ms;
+  --ag-fx-duration-xl: 480ms;
+  --ag-fx-ease-ease: ease;
+  --ag-fx-ease-ease-in: ease-in;
+  --ag-fx-ease-ease-out: ease-out;
+  --ag-fx-ease-ease-in-out: ease-in-out;
+  --ag-fx-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --ag-fx-ease-spring-sm: cubic-bezier(0.5, 1.5, 0.5, 1);
+  --ag-fx-ease-spring-md: cubic-bezier(0.5, 1.8, 0.5, 1);
+  --ag-fx-ease-spring-lg: cubic-bezier(0.5, 2.5, 0.5, 1);
+  --ag-focus-width: 2px;
+  --ag-focus-offset: 2px;
+  --ag-shadow-none: none;
+  --ag-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --ag-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --ag-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --ag-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --ag-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  --ag-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --ag-z-index-dropdown: 100;
+  --ag-z-index-modal: 1000;
+  --ag-z-index-toast: 1100;
+  --ag-z-index-sticky: 900;
+  --ag-border-width-1: 1px;
+  --ag-border-width-2: 2px;
+  --ag-border-width-3: 3px;
+  --ag-black: #1f2328;
+  --ag-white: #ffffff;
+  --ag-neutral-50: #f9fafb;
+  --ag-neutral-100: #f3f4f6;
+  --ag-neutral-200: #e5e7eb;
+  --ag-neutral-300: #d1d5db;
+  --ag-neutral-400: #9ca3af;
+  --ag-neutral-500: #6b7280;
+  --ag-neutral-600: #4b5563;
+  --ag-neutral-700: #2e3745;
+  --ag-neutral-800: #202736;
+  --ag-neutral-900: #111827;
+  --ag-blue-50: #ddf4ff;
+  --ag-blue-100: #b6e3ff;
+  --ag-blue-200: #80ccff;
+  --ag-blue-300: #54aeff;
+  --ag-blue-400: #218bff;
+  --ag-blue-500: #0969da;
+  --ag-blue-600: #0550ae;
+  --ag-blue-700: #033d8b;
+  --ag-blue-800: #0a3069;
+  --ag-blue-900: #002155;
+  --ag-green-50: #dafbe1;
+  --ag-green-100: #aceebb;
+  --ag-green-200: #6fdd8b;
+  --ag-green-300: #4ac26b;
+  --ag-green-400: #2da44e;
+  --ag-green-500: #238636;
+  --ag-green-600: #116329;
+  --ag-green-700: #044f1e;
+  --ag-green-800: #003d16;
+  --ag-green-900: #002d11;
+  --ag-yellow-50: #fff8c5;
+  --ag-yellow-100: #fae17d;
+  --ag-yellow-200: #eac54f;
+  --ag-yellow-300: #d4a72c;
+  --ag-yellow-400: #bf8700;
+  --ag-yellow-500: #9a6700;
+  --ag-yellow-600: #7d4e00;
+  --ag-yellow-700: #633c01;
+  --ag-yellow-800: #4d2d00;
+  --ag-yellow-900: #3b2300;
+  --ag-red-50: #ffebe9;
+  --ag-red-100: #ffcecb;
+  --ag-red-200: #ffaba8;
+  --ag-red-300: #ff8182;
+  --ag-red-400: #fa4549;
+  --ag-red-500: #cf222e;
+  --ag-red-600: #a40e26;
+  --ag-red-700: #82071e;
+  --ag-red-800: #660018;
+  --ag-red-900: #4c0014;
+  --ag-purple-50: #fbefff;
+  --ag-purple-100: #ecd8ff;
+  --ag-purple-200: #d8b9ff;
+  --ag-purple-300: #c297ff;
+  --ag-purple-400: #a475f9;
+  --ag-purple-500: #8250df;
+  --ag-purple-600: #6639ba;
+  --ag-purple-700: #512a97;
+  --ag-purple-800: #3e1f79;
+  --ag-purple-900: #2e1461;
+  --ag-coral-50: #fff0eb;
+  --ag-coral-100: #ffd6cc;
+  --ag-coral-200: #ffb4a1;
+  --ag-coral-300: #fd8c73;
+  --ag-coral-400: #ec6547;
+  --ag-coral-500: #c4432b;
+  --ag-coral-600: #9e2f1c;
+  --ag-coral-700: #801f0f;
+  --ag-coral-800: #691105;
+  --ag-coral-900: #510901;
+  --ag-text-primary: #111827;
+  --ag-text-secondary: #4b5563;
+  --ag-text-muted: #4b5563;
+  --ag-text-primary-muted: #2e3745;
+  --ag-text-primary-inverted: #ffffff;
+  --ag-background-primary: #ffffff;
+  --ag-background-primary-inverted: #1f2328;
+  --ag-background-secondary: #f3f4f6;
+  --ag-background-secondary-inverted: #111827;
+  --ag-background-tertiary: #e5e7eb;
+  --ag-background-disabled: #f3f4f6;
+  --ag-primary-background: #ddf4ff;
+  --ag-primary-text: #0550ae;
+  --ag-success-background: #dafbe1;
+  --ag-success-text: #116329;
+  --ag-info-background: #f3f4f6;
+  --ag-info-text: #4b5563;
+  --ag-warning-background: #fff8c5;
+  --ag-warning-text: #7d4e00;
+  --ag-danger-background: #ffebe9;
+  --ag-danger-text: #a40e26;
+  --ag-border: #e5e7eb;
+  --ag-border-subtle: #d1d5db;
+  --ag-primary: #0550ae;
+  --ag-primary-rgb: 5, 80, 174;
+  --ag-primary-border: #d1d5db;
+  --ag-primary-dark: #0a3069;
+  --ag-secondary: #6b7280;
+  --ag-secondary-dark: #4b5563;
+  --ag-danger-rgb: 202, 29, 29;
+  --ag-danger: #CA1D1D;
+  --ag-danger-dark: #a40e26;
+  --ag-error-text: #a40e26;
+  --ag-warning-rgb: 212, 167, 44;
+  --ag-warning: #d4a72c;
+  --ag-warning-dark: #9a6700;
+  --ag-success: #238636;
+  --ag-success-rgb: 26, 127, 55;
+  --ag-success-dark: #116329;
+  --ag-info: #4b5563;
+  --ag-info-dark: #2e3745;
+  --ag-focus: 37, 99, 235;
+  --ag-focus-dark: #218bff;
+  --ag-rating-filled: #bf8700;
+  --ag-rating-filled-primary: #0969da;
+  --ag-rating-filled-success: #238636;
+  --ag-rating-filled-warning: #9a6700;
+  --ag-rating-filled-danger: #cf222e;
+}

package/dist/styles/motion.styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Shared motion styles - Reusable CSS keyframes and animation utilities
+ *
+ * These styles can be imported and used by any component that needs animation effects.
+ * Usage:
+ * ```
+ * import { motionStyles } from '../../styles/motion.styles.js';
+ *
+ * static styles = [motionStyles, css`...component-specific styles...`];
+ * ```
+ */
+export declare const motionStyles: import('lit').CSSResult;
+//# sourceMappingURL=motion.styles.d.ts.map

package/dist/styles/motion.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.styles.d.ts","sourceRoot":"","sources":["../../src/styles/motion.styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,yBAuLxB,CAAC"}