@cognivo/components 0.8.2 → 0.8.3

package/dist/chunks/{premium.css-DHekUEUt.js → premium.css-B0hBr_uS.js}

@@ -1,14 +1,13 @@
 import { css as a } from "lit";
-a`
+const t = a`
   box-shadow:
     0 0 0 2px var(--cg-color-surface-base-background),
     0 0 0 4px var(--cg-focus-ring-color);
   outline: none;
-`;
-const t = a`
+`, e = a`
   box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
   outline: none;
-`, e = a`
+`, o = a`
   .menu {
     display: flex;
     flex-direction: column;
@@ -162,7 +161,7 @@ a`
 a`
   transform: scale(var(--cg-interaction-press-scale));
 `;
-const o = a`
+const n = a`
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {
       transition-duration: 0.01ms !important;
@@ -170,31 +169,31 @@ const o = a`
       animation-iteration-count: 1 !important;
     }
   }
-`, n = a`
+`, i = a`
   @keyframes spin {
     to { transform: rotate(360deg); }
   }
-`, i = a`
+`, s = a`
   @keyframes fadeIn {
     from { opacity: 0; }
     to { opacity: 1; }
   }
-`, s = a`
+`, c = a`
   @keyframes fadeSlideIn {
     from { opacity: 0; transform: translateY(4px); }
     to { opacity: 1; transform: translateY(0); }
   }
-`, c = a`
+`, d = a`
   @keyframes shimmer {
     from { background-position: 200% 0; }
     to { background-position: -200% 0; }
   }
-`, d = a`
+`, l = a`
   @keyframes pulse {
     0%, 100% { opacity: 1; }
     50% { opacity: 0.4; }
   }
-`, l = a`
+`, g = a`
   @keyframes scaleIn {
     from { opacity: 0; transform: scale(0.95); }
     to { opacity: 1; transform: scale(1); }
@@ -241,7 +240,7 @@ a`
     transform: translateY(0);
   }
 `;
-const g = a`
+const u = a`
   :host {
     display: inline-flex;
     font-family: var(--cg-font-family-primary);
@@ -355,7 +354,7 @@ a`
     transition: 0s;
   }
 `;
-const u = a`
+const m = a`
   @keyframes dotPulse {
     0%, 100% { transform: scale(1); opacity: 1; }
     50% { transform: scale(1.4); opacity: 0.7; }
@@ -368,7 +367,7 @@ a`
     100% { transform: scale(1); }
   }
 `;
-const m = a`
+const v = a`
   @keyframes staggerFadeIn {
     from {
       opacity: 0;
@@ -449,18 +448,19 @@ a`
   }
 `;
 export {
-  g as a,
-  c as b,
-  n as c,
-  u as d,
-  m as e,
-  s as f,
-  t as g,
+  u as a,
+  d as b,
+  i as c,
+  m as d,
+  v as e,
+  c as f,
+  e as g,
   f as h,
-  i,
-  e as m,
-  d as p,
-  o as r,
-  l as s
+  s as i,
+  t as j,
+  o as m,
+  l as p,
+  n as r,
+  g as s
 };
-//# sourceMappingURL=premium.css-DHekUEUt.js.map
+//# sourceMappingURL=premium.css-B0hBr_uS.js.map

package/dist/chunks/{premium.css-DHekUEUt.js.map → premium.css-B0hBr_uS.js.map}

@@ -1 +1 @@
-{"version":3,"file":"premium.css-DHekUEUt.js","sources":["../../src/styles/focus.css.ts","../../src/styles/menu.css.ts","../../src/styles/motion.css.ts","../../src/styles/base.css.ts","../../src/styles/elevation.css.ts","../../src/styles/ai-effects.css.ts","../../src/styles/premium.css.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Dual-layer focus ring for standalone interactive elements (buttons, links, nav items).\n * Uses the focus-ring token set from tier 2 semantic tokens.\n */\nexport const focusRingDual = css`\n  box-shadow:\n    0 0 0 2px var(--cg-color-surface-base-background),\n    0 0 0 4px var(--cg-focus-ring-color);\n  outline: none;\n`;\n\n/**\n * Single-layer focus ring for form fields (input, textarea, select).\n * Softer glow that works with existing borders.\n */\nexport const focusRingSingle = css`\n  box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n  outline: none;\n`;\n","import { css } from 'lit';\n\n/**\n * Shared menu-list styling used by cg-dropdown, cg-split-button, and any\n * component that renders a list of keyboard-navigable menu items.\n *\n * Covers: surface (background/border/radius/shadow/padding), entrance and\n * exit animation, reduced-motion fallback, `.menu-item` layout and states,\n * `.menu-item-icon`, `.menu-item-shortcut`, `.divider`, and rounded variants\n * driven by a `rounded` attribute on the host.\n *\n * Positioning (absolute vs fixed, top/left placement) is intentionally NOT\n * included — each consumer owns its own positioning strategy.\n */\nexport const menuListStyles = css`\n  .menu {\n    display: flex;\n    flex-direction: column;\n    min-width: 200px;\n    max-width: 320px;\n    padding: var(--cg-spacing-6);\n    background: var(--cg-color-modal-container-background);\n    border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n    border-radius: var(--cg-border-radius-100);\n    box-shadow: var(--cg-elevation-3);\n    opacity: 0;\n    transform: scale(0.96);\n    transform-origin: top left;\n    pointer-events: none;\n    transition:\n      opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n      transform var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    list-style: none;\n    margin: 0;\n  }\n\n  @keyframes cg-menu-enter {\n    0% { transform: scale(0.96); }\n    60% { transform: scale(1.03); }\n    100% { transform: scale(1); }\n  }\n  :host([open]) .menu {\n    opacity: 1;\n    transform: scale(1);\n    pointer-events: auto;\n    animation: cg-menu-enter var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n  }\n\n  @keyframes cg-menu-exit {\n    from { opacity: 1; transform: scale(1); }\n    to { opacity: 0; transform: scale(0.95); }\n  }\n  .menu.closing {\n    animation: cg-menu-exit var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-in) forwards;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .menu {\n      transition: opacity var(--cg-transition-duration-fast) ease;\n      transform: scale(1) !important;\n    }\n    :host([open]) .menu { animation: none; }\n    .menu.closing { animation: none; opacity: 0; }\n  }\n\n  /* Rounded variants — picked up by host attribute */\n  :host([rounded=\"none\"]) .menu { border-radius: 0; }\n  :host([rounded=\"none\"]) .menu-item { border-radius: 0; }\n  :host([rounded=\"sm\"]) .menu { border-radius: var(--cg-border-radius-50); }\n  :host([rounded=\"sm\"]) .menu-item { border-radius: var(--cg-border-radius-50); }\n  :host([rounded=\"md\"]) .menu { border-radius: var(--cg-border-radius-100); }\n  :host([rounded=\"md\"]) .menu-item { border-radius: var(--cg-border-radius-50); }\n  :host([rounded=\"lg\"]) .menu { border-radius: var(--cg-border-radius-150); }\n  :host([rounded=\"lg\"]) .menu-item { border-radius: var(--cg-border-radius-100); }\n\n  .menu-item {\n    display: flex;\n    align-items: center;\n    gap: var(--cg-spacing-8);\n    padding: var(--cg-spacing-8) var(--cg-spacing-12);\n    border-radius: var(--cg-border-radius-50);\n    font-size: var(--cg-font-size-sm);\n    color: var(--cg-color-surface-container-text);\n    background: transparent;\n    border: none;\n    width: 100%;\n    box-sizing: border-box;\n    text-align: left;\n    cursor: pointer;\n    font-family: inherit;\n    line-height: var(--cg-line-height-snug);\n    white-space: nowrap;\n    transition:\n      background-color var(--cg-transition-duration-fast) ease,\n      color var(--cg-transition-duration-fast) ease;\n    -webkit-font-smoothing: antialiased;\n    animation: staggerFadeIn var(--cg-transition-duration-fast) ease-out both;\n    animation-delay: calc(var(--stagger-index, 0) * 40ms);\n  }\n\n  .menu-item:hover:not([disabled]):not(.disabled),\n  .menu-item[data-active]:not([disabled]):not(.disabled),\n  .menu-item.active:not([disabled]):not(.disabled) {\n    background: var(--cg-color-action-tertiary-background-hover);\n  }\n  .menu-item:active:not([disabled]):not(.disabled) {\n    background: var(--cg-color-action-tertiary-background-active);\n  }\n  .menu-item:focus-visible {\n    box-shadow:\n      0 0 0 2px var(--cg-color-focus-ring-offset),\n      0 0 0 calc(2px + 2px) var(--cg-color-focus-ring);\n    outline: none;\n  }\n  .menu-item.active {\n    font-weight: var(--cg-font-weight-medium);\n  }\n  .menu-item[disabled],\n  .menu-item.disabled {\n    color: var(--cg-color-surface-container-outlined);\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n  .menu-item.danger {\n    color: var(--cg-color-status-error-text-default);\n  }\n  .menu-item.danger:hover:not([disabled]):not(.disabled),\n  .menu-item.danger[data-active]:not([disabled]):not(.disabled) {\n    background: var(--cg-color-status-error-background-default);\n  }\n\n  .menu-item-icon {\n    flex-shrink: 0;\n    opacity: 0.7;\n  }\n  .menu-item:hover:not([disabled]):not(.disabled) .menu-item-icon {\n    opacity: 1;\n  }\n\n  .menu-item-shortcut {\n    margin-left: auto;\n    padding-left: var(--cg-spacing-16);\n    font-size: var(--cg-font-size-xs);\n    color: var(--cg-color-surface-container-outlined);\n    font-family: inherit;\n    pointer-events: none;\n  }\n\n  .divider {\n    height: var(--cg-border-width-50);\n    margin: var(--cg-spacing-4) 0;\n    background: var(--cg-color-modal-container-border);\n    border: none;\n  }\n`;\n","import { css } from 'lit';\n\n/**\n * Standard color/opacity transition for :host elements.\n * Maps to --cg-transition-duration-fast + --cg-transition-easing-default.\n */\nexport const hostTransition = css`\n  transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n`;\n\n/**\n * Multi-property transition for interactive elements (buttons, cards, list items).\n * Covers transform, background, border, and box-shadow.\n */\nexport const interactiveTransition = css`\n  transition:\n    transform var(--cg-transition-duration-slow) var(--cg-transition-easing-default),\n    background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n    border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n    box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n`;\n\n/**\n * Press scale feedback for :active state.\n */\nexport const pressScale = css`\n  transform: scale(var(--cg-interaction-press-scale));\n`;\n\n/** Reduced motion media query — disables transitions and animations for a11y. */\nexport const reducedMotion = css`\n  @media (prefers-reduced-motion: reduce) {\n    *, *::before, *::after {\n      transition-duration: 0.01ms !important;\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n    }\n  }\n`;\n\n/** Spin keyframes for loading spinners. */\nexport const spinKeyframes = css`\n  @keyframes spin {\n    to { transform: rotate(360deg); }\n  }\n`;\n\n/** Fade-in keyframes. */\nexport const fadeInKeyframes = css`\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n\n/** Slide + fade entrance animation. */\nexport const fadeSlideInKeyframes = css`\n  @keyframes fadeSlideIn {\n    from { opacity: 0; transform: translateY(4px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n`;\n\n/** Shimmer sweep for loading skeletons and AI text effects. */\nexport const shimmerKeyframes = css`\n  @keyframes shimmer {\n    from { background-position: 200% 0; }\n    to { background-position: -200% 0; }\n  }\n`;\n\n/** Opacity pulse for thinking indicators. */\nexport const pulseKeyframes = css`\n  @keyframes pulse {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.4; }\n  }\n`;\n\n/** Scale + fade entrance for modals and dropdowns. */\nexport const scaleInKeyframes = css`\n  @keyframes scaleIn {\n    from { opacity: 0; transform: scale(0.95); }\n    to { opacity: 1; transform: scale(1); }\n  }\n`;\n\n/** Scale + fade exit for modals and dropdowns. */\nexport const scaleOutKeyframes = css`\n  @keyframes scaleOut {\n    from { opacity: 1; transform: scale(1); }\n    to { opacity: 0; transform: scale(0.95); }\n  }\n`;\n\n/** Fade out. */\nexport const fadeOutKeyframes = css`\n  @keyframes fadeOut {\n    from { opacity: 1; }\n    to { opacity: 0; }\n  }\n`;\n\n/** Slide in from left for drawers. */\nexport const slideInLeftKeyframes = css`\n  @keyframes slideInLeft {\n    from { transform: translateX(-100%); }\n    to { transform: translateX(0); }\n  }\n`;\n\n/** Slide in from right for drawers. */\nexport const slideInRightKeyframes = css`\n  @keyframes slideInRight {\n    from { transform: translateX(100%); }\n    to { transform: translateX(0); }\n  }\n`;\n\n/** Hover lift for interactive cards and surfaces. */\nexport const hoverLift = css`\n  transform: translateY(var(--cg-interaction-hover-lift));\n`;\n\n/** Card hover pattern: lift + enhanced shadow on hover, settle on active. */\nexport const cardHoverLift = css`\n  transition:\n    transform var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n    box-shadow var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n\n  &:hover {\n    transform: translateY(var(--cg-interaction-hover-lift));\n    box-shadow: var(--cg-elevation-2);\n  }\n\n  &:active {\n    transform: translateY(0);\n  }\n`;\n","import { css } from 'lit';\n\n/**\n * Base :host styles for inline-flex components (buttons, badges, chips).\n * Includes font-family, color transition, and box-sizing.\n */\nexport const hostBase = css`\n  :host {\n    display: inline-flex;\n    font-family: var(--cg-font-family-primary);\n    box-sizing: border-box;\n    transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n  }\n`;\n\n/**\n * Base :host styles for block-level components (cards, inputs, containers).\n */\nexport const hostBlock = css`\n  :host {\n    display: block;\n    font-family: var(--cg-font-family-primary);\n    box-sizing: border-box;\n    transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n  }\n`;\n\n/** Hide host when [hidden] attribute is present. */\nexport const hostHidden = css`\n  :host([hidden]) { display: none; }\n`;\n","import { css } from 'lit';\n\n// ── Elevation utilities ──\n// These box-shadow exports are no longer consumed by any component\n// (shadows were removed in the design-token cleanup pass).\n// Exports are kept to avoid breaking downstream imports, but values\n// are emptied. Use border / border-color tokens instead for depth cues.\n\n/** @deprecated No component uses box-shadow elevation. */\nexport const elevation1 = css``;\n\n/** @deprecated No component uses box-shadow elevation. */\nexport const elevation2 = css``;\n\n/** @deprecated No component uses box-shadow elevation. */\nexport const elevation3 = css``;\n\n/** @deprecated No component uses box-shadow elevation. */\nexport const elevation4 = css``;\n\n/** @deprecated No component uses box-shadow elevation. */\nexport const elevation5 = css``;\n","import { css } from 'lit';\n\n/** AI glow effect using ai-effect tokens. */\nexport const aiGlow = css`\n  box-shadow: 0 0 var(--cg-ai-effect-glow-blur) var(--cg-ai-effect-glow-spread) var(--cg-ai-effect-glow-color);\n`;\n\n/** AI gradient background (lime-yellow brand). */\nexport const aiGradient = css`\n  background: linear-gradient(135deg, var(--cg-ai-effect-gradient-from), var(--cg-ai-effect-gradient-to));\n`;\n\n/** AI shimmer text effect — gradient that sweeps across text. */\nexport const aiShimmerText = css`\n  background: linear-gradient(\n    90deg,\n    var(--cg-color-surface-base-text) 25%,\n    var(--cg-color-accent-text) 50%,\n    var(--cg-color-surface-base-text) 75%\n  );\n  background-size: 200% 100%;\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  animation: shimmer var(--cg-ai-effect-shimmer-duration) linear infinite;\n`;\n\n/** AI shimmer loading skeleton effect. */\nexport const aiShimmerSkeleton = css`\n  background: linear-gradient(\n    90deg,\n    var(--cg-color-surface-container-background) 25%,\n    var(--cg-color-surface-container-border) 50%,\n    var(--cg-color-surface-container-background) 75%\n  );\n  background-size: 200% 100%;\n  animation: shimmer var(--cg-ai-effect-shimmer-duration) linear infinite;\n`;\n\n/** AI backdrop blur. */\nexport const aiBackdropBlur = css`\n  backdrop-filter: blur(var(--cg-ai-effect-backdropBlur));\n  -webkit-backdrop-filter: blur(var(--cg-ai-effect-backdropBlur));\n`;\n","import { css } from 'lit';\n\n// ─────────────────────────────────────────────────────────\n// Premium Visual Effects — shared across all components\n// Inspired by HeroUI, Shadcn, Radix, Aceternity patterns\n// ─────────────────────────────────────────────────────────\n\n/**\n * Top-edge light simulation on dark surfaces.\n * Creates a 1px white highlight at the top of the element,\n * simulating overhead lighting hitting a raised surface.\n * (Apple/macOS pattern used in premium dark UIs)\n */\nexport const insetHighlight = css`\n  box-shadow: inset 0 1px 0 0 var(--cg-overlay-white-light);\n`;\n\n/**\n * Subtle top-to-bottom gradient on surfaces for depth.\n * The 3% lightness difference creates a physical-object feel\n * without being visually distracting.\n */\nexport const surfaceGradient = css`\n  background-image: linear-gradient(\n    to bottom,\n    var(--cg-overlay-white-subtle) 0%,\n    transparent 100%\n  );\n`;\n\n/**\n * Micro-scale on hover for interactive elements.\n * The 1.02 scale is subtle enough to feel natural but\n * noticeable enough to communicate interactivity.\n */\nexport const hoverScale = css`\n  transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n  &:hover:not(:disabled):not([disabled]):not(.disabled) {\n    transform: scale(1.02);\n  }\n  &:active:not(:disabled):not([disabled]):not(.disabled) {\n    transform: scale(var(--cg-interaction-press-scale));\n  }\n`;\n\n/**\n * Color-matched hover background using the accent hue\n * at very low opacity. This feels intentional rather than\n * a generic gray overlay. (Radix/Shadcn pattern)\n */\nexport const colorMatchedHover = css`\n  &:hover:not(:disabled):not([disabled]):not(.disabled) {\n    background-color: var(--cg-overlay-accent-subtle);\n  }\n`;\n\n/**\n * Focus ring that transitions in smoothly rather than\n * appearing instantly. The ring spreads from 0px to full\n * size over 150ms with deceleration easing.\n */\nexport const focusRingAnimated = css`\n  box-shadow: 0 0 0 0px transparent, 0 0 0 0px transparent;\n  transition: box-shadow var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n  &:focus-visible {\n    box-shadow:\n      0 0 0 2px var(--cg-color-surface-base-background),\n      0 0 0 4px var(--cg-focus-ring-color);\n    outline: none;\n  }\n`;\n\n/**\n * CSS-only ripple effect on click.\n * Uses ::after pseudo-element with radial gradient that\n * expands from center on :active. Requires parent to have\n * position: relative and overflow: hidden.\n */\nexport const rippleEffect = css`\n  position: relative;\n  overflow: hidden;\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: radial-gradient(\n      circle at 50% 50%,\n      var(--cg-overlay-white-strong) 0%,\n      transparent 70%\n    );\n    opacity: 0;\n    transform: scale(0);\n    transition: transform 400ms ease-out, opacity 400ms ease-out;\n    pointer-events: none;\n    border-radius: inherit;\n  }\n  &:active:not(:disabled)::after {\n    opacity: 1;\n    transform: scale(2.5);\n    transition: 0s;\n  }\n`;\n\n/** Dot/indicator pulse animation for badges and status indicators. */\nexport const dotPulseKeyframes = css`\n  @keyframes dotPulse {\n    0%, 100% { transform: scale(1); opacity: 1; }\n    50% { transform: scale(1.4); opacity: 0.7; }\n  }\n`;\n\n/** Value change pulse for numbers and metrics. */\nexport const valueChangePulseKeyframes = css`\n  @keyframes valueChangePulse {\n    0% { transform: scale(1); }\n    40% { transform: scale(1.05); }\n    100% { transform: scale(1); }\n  }\n`;\n\n/** Entrance animation with stagger support via --stagger-index custom property. */\nexport const entranceStagger = css`\n  @keyframes staggerFadeIn {\n    from {\n      opacity: 0;\n      transform: translateY(8px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n`;\n\n/** Exit animation for removed elements (badges, chips, list items). */\nexport const exitFadeScaleKeyframes = css`\n  @keyframes exitFadeScale {\n    from { opacity: 1; transform: scale(1); }\n    to { opacity: 0; transform: scale(0.85); }\n  }\n`;\n\n// ─────────────────────────────────────────────────────────\n// Advanced Effects — cutting-edge CSS techniques\n// ─────────────────────────────────────────────────────────\n\n/**\n * Dark glassmorphism card — frosted glass with layered shadows.\n * The saturate(1.1) adds vibrancy behind the blur.\n * Use sparingly: max 2-3 glass elements per viewport.\n */\nexport const glassCard = css`\n  background: var(--cg-overlay-white-subtle);\n  backdrop-filter: blur(12px) saturate(1.1);\n  -webkit-backdrop-filter: blur(12px) saturate(1.1);\n  border: 1px solid var(--cg-overlay-white-medium);\n  box-shadow:\n    0 8px 32px var(--cg-overlay-dark-strong),\n    inset 0 1px 0 var(--cg-overlay-white-light);\n`;\n\n/**\n * Noise texture overlay for premium dark surfaces.\n * Inline SVG avoids external file dependencies in Shadow DOM.\n * The mix-blend-mode: overlay enhances surfaces without washing out.\n */\nexport const noiseOverlay = css`\n  &::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    opacity: 0.02;\n    pointer-events: none;\n    z-index: 1;\n    background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\");\n    mix-blend-mode: overlay;\n  }\n`;\n\n/**\n * Liquid fill hover — gradient sweeps up from bottom on hover.\n * More dramatic than colorMatchedHover, for hero/featured elements.\n */\nexport const liquidFillHover = css`\n  position: relative;\n  overflow: hidden;\n  z-index: 0;\n  &::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(\n      180deg,\n      var(--cg-color-accent-text) 0%,\n      var(--cg-overlay-accent-subtle) 100%\n    );\n    opacity: 0.06;\n    transform: translateY(102%);\n    transition: transform var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    z-index: -1;\n    border-radius: inherit;\n  }\n  &:hover::before {\n    transform: translateY(0);\n  }\n`;\n\n/**\n * AI processing glow ring — rotating conic gradient border.\n * Register --cg-border-angle via CSS.registerProperty() in connectedCallback.\n */\nexport const aiGlowRing = css`\n  @keyframes cgBorderSpin {\n    to { --cg-border-angle: 360deg; }\n  }\n`;\n\n/**\n * Scroll-driven reveal animation.\n * Elements fade+slide in as they enter the viewport.\n * Progressive enhancement — works in Chrome 115+, Firefox 110+, Safari 18+.\n */\nexport const scrollReveal = css`\n  @keyframes cgScrollReveal {\n    from {\n      opacity: 0;\n      transform: translateY(20px) scale(0.98);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n`;\n"],"names":["css","focusRingSingle","menuListStyles","reducedMotion","spinKeyframes","fadeInKeyframes","fadeSlideInKeyframes","shimmerKeyframes","pulseKeyframes","scaleInKeyframes","hostBase","hostBlock","dotPulseKeyframes","entranceStagger"],"mappings":"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"}
+{"version":3,"file":"premium.css-B0hBr_uS.js","sources":["../../src/styles/focus.css.ts","../../src/styles/menu.css.ts","../../src/styles/motion.css.ts","../../src/styles/base.css.ts","../../src/styles/elevation.css.ts","../../src/styles/ai-effects.css.ts","../../src/styles/premium.css.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Dual-layer focus ring for standalone interactive elements (buttons, links, nav items).\n * Uses the focus-ring token set from tier 2 semantic tokens.\n */\nexport const focusRingDual = css`\n  box-shadow:\n    0 0 0 2px var(--cg-color-surface-base-background),\n    0 0 0 4px var(--cg-focus-ring-color);\n  outline: none;\n`;\n\n/**\n * Single-layer focus ring for form fields (input, textarea, select).\n * Softer glow that works with existing borders.\n */\nexport const focusRingSingle = css`\n  box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n  outline: none;\n`;\n","import { css } from 'lit';\n\n/**\n * Shared menu-list styling used by cg-dropdown, cg-split-button, and any\n * component that renders a list of keyboard-navigable menu items.\n *\n * Covers: surface (background/border/radius/shadow/padding), entrance and\n * exit animation, reduced-motion fallback, `.menu-item` layout and states,\n * `.menu-item-icon`, `.menu-item-shortcut`, `.divider`, and rounded variants\n * driven by a `rounded` attribute on the host.\n *\n * Positioning (absolute vs fixed, top/left placement) is intentionally NOT\n * included — each consumer owns its own positioning strategy.\n */\nexport const menuListStyles = css`\n  .menu {\n    display: flex;\n    flex-direction: column;\n    min-width: 200px;\n    max-width: 320px;\n    padding: var(--cg-spacing-6);\n    background: var(--cg-color-modal-container-background);\n    border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n    border-radius: var(--cg-border-radius-100);\n    box-shadow: var(--cg-elevation-3);\n    opacity: 0;\n    transform: scale(0.96);\n    transform-origin: top left;\n    pointer-events: none;\n    transition:\n      opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n      transform var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    list-style: none;\n    margin: 0;\n  }\n\n  @keyframes cg-menu-enter {\n    0% { transform: scale(0.96); }\n    60% { transform: scale(1.03); }\n    100% { transform: scale(1); }\n  }\n  :host([open]) .menu {\n    opacity: 1;\n    transform: scale(1);\n    pointer-events: auto;\n    animation: cg-menu-enter var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n  }\n\n  @keyframes cg-menu-exit {\n    from { opacity: 1; transform: scale(1); }\n    to { opacity: 0; transform: scale(0.95); }\n  }\n  .menu.closing {\n    animation: cg-menu-exit var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-in) forwards;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .menu {\n      transition: opacity var(--cg-transition-duration-fast) ease;\n      transform: scale(1) !important;\n    }\n    :host([open]) .menu { animation: none; }\n    .menu.closing { animation: none; opacity: 0; }\n  }\n\n  /* Rounded variants — picked up by host attribute */\n  :host([rounded=\"none\"]) .menu { border-radius: 0; }\n  :host([rounded=\"none\"]) .menu-item { border-radius: 0; }\n  :host([rounded=\"sm\"]) .menu { border-radius: var(--cg-border-radius-50); }\n  :host([rounded=\"sm\"]) .menu-item { border-radius: var(--cg-border-radius-50); }\n  :host([rounded=\"md\"]) .menu { border-radius: var(--cg-border-radius-100); }\n  :host([rounded=\"md\"]) .menu-item { border-radius: var(--cg-border-radius-50); }\n  :host([rounded=\"lg\"]) .menu { border-radius: var(--cg-border-radius-150); }\n  :host([rounded=\"lg\"]) .menu-item { border-radius: var(--cg-border-radius-100); }\n\n  .menu-item {\n    display: flex;\n    align-items: center;\n    gap: var(--cg-spacing-8);\n    padding: var(--cg-spacing-8) var(--cg-spacing-12);\n    border-radius: var(--cg-border-radius-50);\n    font-size: var(--cg-font-size-sm);\n    color: var(--cg-color-surface-container-text);\n    background: transparent;\n    border: none;\n    width: 100%;\n    box-sizing: border-box;\n    text-align: left;\n    cursor: pointer;\n    font-family: inherit;\n    line-height: var(--cg-line-height-snug);\n    white-space: nowrap;\n    transition:\n      background-color var(--cg-transition-duration-fast) ease,\n      color var(--cg-transition-duration-fast) ease;\n    -webkit-font-smoothing: antialiased;\n    animation: staggerFadeIn var(--cg-transition-duration-fast) ease-out both;\n    animation-delay: calc(var(--stagger-index, 0) * 40ms);\n  }\n\n  .menu-item:hover:not([disabled]):not(.disabled),\n  .menu-item[data-active]:not([disabled]):not(.disabled),\n  .menu-item.active:not([disabled]):not(.disabled) {\n    background: var(--cg-color-action-tertiary-background-hover);\n  }\n  .menu-item:active:not([disabled]):not(.disabled) {\n    background: var(--cg-color-action-tertiary-background-active);\n  }\n  .menu-item:focus-visible {\n    box-shadow:\n      0 0 0 2px var(--cg-color-focus-ring-offset),\n      0 0 0 calc(2px + 2px) var(--cg-color-focus-ring);\n    outline: none;\n  }\n  .menu-item.active {\n    font-weight: var(--cg-font-weight-medium);\n  }\n  .menu-item[disabled],\n  .menu-item.disabled {\n    color: var(--cg-color-surface-container-outlined);\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n  .menu-item.danger {\n    color: var(--cg-color-status-error-text-default);\n  }\n  .menu-item.danger:hover:not([disabled]):not(.disabled),\n  .menu-item.danger[data-active]:not([disabled]):not(.disabled) {\n    background: var(--cg-color-status-error-background-default);\n  }\n\n  .menu-item-icon {\n    flex-shrink: 0;\n    opacity: 0.7;\n  }\n  .menu-item:hover:not([disabled]):not(.disabled) .menu-item-icon {\n    opacity: 1;\n  }\n\n  .menu-item-shortcut {\n    margin-left: auto;\n    padding-left: var(--cg-spacing-16);\n    font-size: var(--cg-font-size-xs);\n    color: var(--cg-color-surface-container-outlined);\n    font-family: inherit;\n    pointer-events: none;\n  }\n\n  .divider {\n    height: var(--cg-border-width-50);\n    margin: var(--cg-spacing-4) 0;\n    background: var(--cg-color-modal-container-border);\n    border: none;\n  }\n`;\n","import { css } from 'lit';\n\n/**\n * Standard color/opacity transition for :host elements.\n * Maps to --cg-transition-duration-fast + --cg-transition-easing-default.\n */\nexport const hostTransition = css`\n  transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n`;\n\n/**\n * Multi-property transition for interactive elements (buttons, cards, list items).\n * Covers transform, background, border, and box-shadow.\n */\nexport const interactiveTransition = css`\n  transition:\n    transform var(--cg-transition-duration-slow) var(--cg-transition-easing-default),\n    background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n    border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n    box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n`;\n\n/**\n * Press scale feedback for :active state.\n */\nexport const pressScale = css`\n  transform: scale(var(--cg-interaction-press-scale));\n`;\n\n/** Reduced motion media query — disables transitions and animations for a11y. */\nexport const reducedMotion = css`\n  @media (prefers-reduced-motion: reduce) {\n    *, *::before, *::after {\n      transition-duration: 0.01ms !important;\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n    }\n  }\n`;\n\n/** Spin keyframes for loading spinners. */\nexport const spinKeyframes = css`\n  @keyframes spin {\n    to { transform: rotate(360deg); }\n  }\n`;\n\n/** Fade-in keyframes. */\nexport const fadeInKeyframes = css`\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n\n/** Slide + fade entrance animation. */\nexport const fadeSlideInKeyframes = css`\n  @keyframes fadeSlideIn {\n    from { opacity: 0; transform: translateY(4px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n`;\n\n/** Shimmer sweep for loading skeletons and AI text effects. */\nexport const shimmerKeyframes = css`\n  @keyframes shimmer {\n    from { background-position: 200% 0; }\n    to { background-position: -200% 0; }\n  }\n`;\n\n/** Opacity pulse for thinking indicators. */\nexport const pulseKeyframes = css`\n  @keyframes pulse {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.4; }\n  }\n`;\n\n/** Scale + fade entrance for modals and dropdowns. */\nexport const scaleInKeyframes = css`\n  @keyframes scaleIn {\n    from { opacity: 0; transform: scale(0.95); }\n    to { opacity: 1; transform: scale(1); }\n  }\n`;\n\n/** Scale + fade exit for modals and dropdowns. */\nexport const scaleOutKeyframes = css`\n  @keyframes scaleOut {\n    from { opacity: 1; transform: scale(1); }\n    to { opacity: 0; transform: scale(0.95); }\n  }\n`;\n\n/** Fade out. */\nexport const fadeOutKeyframes = css`\n  @keyframes fadeOut {\n    from { opacity: 1; }\n    to { opacity: 0; }\n  }\n`;\n\n/** Slide in from left for drawers. */\nexport const slideInLeftKeyframes = css`\n  @keyframes slideInLeft {\n    from { transform: translateX(-100%); }\n    to { transform: translateX(0); }\n  }\n`;\n\n/** Slide in from right for drawers. */\nexport const slideInRightKeyframes = css`\n  @keyframes slideInRight {\n    from { transform: translateX(100%); }\n    to { transform: translateX(0); }\n  }\n`;\n\n/** Hover lift for interactive cards and surfaces. */\nexport const hoverLift = css`\n  transform: translateY(var(--cg-interaction-hover-lift));\n`;\n\n/** Card hover pattern: lift + enhanced shadow on hover, settle on active. */\nexport const cardHoverLift = css`\n  transition:\n    transform var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n    box-shadow var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n\n  &:hover {\n    transform: translateY(var(--cg-interaction-hover-lift));\n    box-shadow: var(--cg-elevation-2);\n  }\n\n  &:active {\n    transform: translateY(0);\n  }\n`;\n","import { css } from 'lit';\n\n/**\n * Base :host styles for inline-flex components (buttons, badges, chips).\n * Includes font-family, color transition, and box-sizing.\n */\nexport const hostBase = css`\n  :host {\n    display: inline-flex;\n    font-family: var(--cg-font-family-primary);\n    box-sizing: border-box;\n    transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n  }\n`;\n\n/**\n * Base :host styles for block-level components (cards, inputs, containers).\n */\nexport const hostBlock = css`\n  :host {\n    display: block;\n    font-family: var(--cg-font-family-primary);\n    box-sizing: border-box;\n    transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n  }\n`;\n\n/** Hide host when [hidden] attribute is present. */\nexport const hostHidden = css`\n  :host([hidden]) { display: none; }\n`;\n","import { css } from 'lit';\n\n// ── Elevation utilities ──\n// These box-shadow exports are no longer consumed by any component\n// (shadows were removed in the design-token cleanup pass).\n// Exports are kept to avoid breaking downstream imports, but values\n// are emptied. Use border / border-color tokens instead for depth cues.\n\n/** @deprecated No component uses box-shadow elevation. */\nexport const elevation1 = css``;\n\n/** @deprecated No component uses box-shadow elevation. */\nexport const elevation2 = css``;\n\n/** @deprecated No component uses box-shadow elevation. */\nexport const elevation3 = css``;\n\n/** @deprecated No component uses box-shadow elevation. */\nexport const elevation4 = css``;\n\n/** @deprecated No component uses box-shadow elevation. */\nexport const elevation5 = css``;\n","import { css } from 'lit';\n\n/** AI glow effect using ai-effect tokens. */\nexport const aiGlow = css`\n  box-shadow: 0 0 var(--cg-ai-effect-glow-blur) var(--cg-ai-effect-glow-spread) var(--cg-ai-effect-glow-color);\n`;\n\n/** AI gradient background (lime-yellow brand). */\nexport const aiGradient = css`\n  background: linear-gradient(135deg, var(--cg-ai-effect-gradient-from), var(--cg-ai-effect-gradient-to));\n`;\n\n/** AI shimmer text effect — gradient that sweeps across text. */\nexport const aiShimmerText = css`\n  background: linear-gradient(\n    90deg,\n    var(--cg-color-surface-base-text) 25%,\n    var(--cg-color-accent-text) 50%,\n    var(--cg-color-surface-base-text) 75%\n  );\n  background-size: 200% 100%;\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  animation: shimmer var(--cg-ai-effect-shimmer-duration) linear infinite;\n`;\n\n/** AI shimmer loading skeleton effect. */\nexport const aiShimmerSkeleton = css`\n  background: linear-gradient(\n    90deg,\n    var(--cg-color-surface-container-background) 25%,\n    var(--cg-color-surface-container-border) 50%,\n    var(--cg-color-surface-container-background) 75%\n  );\n  background-size: 200% 100%;\n  animation: shimmer var(--cg-ai-effect-shimmer-duration) linear infinite;\n`;\n\n/** AI backdrop blur. */\nexport const aiBackdropBlur = css`\n  backdrop-filter: blur(var(--cg-ai-effect-backdropBlur));\n  -webkit-backdrop-filter: blur(var(--cg-ai-effect-backdropBlur));\n`;\n","import { css } from 'lit';\n\n// ─────────────────────────────────────────────────────────\n// Premium Visual Effects — shared across all components\n// Inspired by HeroUI, Shadcn, Radix, Aceternity patterns\n// ─────────────────────────────────────────────────────────\n\n/**\n * Top-edge light simulation on dark surfaces.\n * Creates a 1px white highlight at the top of the element,\n * simulating overhead lighting hitting a raised surface.\n * (Apple/macOS pattern used in premium dark UIs)\n */\nexport const insetHighlight = css`\n  box-shadow: inset 0 1px 0 0 var(--cg-overlay-white-light);\n`;\n\n/**\n * Subtle top-to-bottom gradient on surfaces for depth.\n * The 3% lightness difference creates a physical-object feel\n * without being visually distracting.\n */\nexport const surfaceGradient = css`\n  background-image: linear-gradient(\n    to bottom,\n    var(--cg-overlay-white-subtle) 0%,\n    transparent 100%\n  );\n`;\n\n/**\n * Micro-scale on hover for interactive elements.\n * The 1.02 scale is subtle enough to feel natural but\n * noticeable enough to communicate interactivity.\n */\nexport const hoverScale = css`\n  transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n  &:hover:not(:disabled):not([disabled]):not(.disabled) {\n    transform: scale(1.02);\n  }\n  &:active:not(:disabled):not([disabled]):not(.disabled) {\n    transform: scale(var(--cg-interaction-press-scale));\n  }\n`;\n\n/**\n * Color-matched hover background using the accent hue\n * at very low opacity. This feels intentional rather than\n * a generic gray overlay. (Radix/Shadcn pattern)\n */\nexport const colorMatchedHover = css`\n  &:hover:not(:disabled):not([disabled]):not(.disabled) {\n    background-color: var(--cg-overlay-accent-subtle);\n  }\n`;\n\n/**\n * Focus ring that transitions in smoothly rather than\n * appearing instantly. The ring spreads from 0px to full\n * size over 150ms with deceleration easing.\n */\nexport const focusRingAnimated = css`\n  box-shadow: 0 0 0 0px transparent, 0 0 0 0px transparent;\n  transition: box-shadow var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n  &:focus-visible {\n    box-shadow:\n      0 0 0 2px var(--cg-color-surface-base-background),\n      0 0 0 4px var(--cg-focus-ring-color);\n    outline: none;\n  }\n`;\n\n/**\n * CSS-only ripple effect on click.\n * Uses ::after pseudo-element with radial gradient that\n * expands from center on :active. Requires parent to have\n * position: relative and overflow: hidden.\n */\nexport const rippleEffect = css`\n  position: relative;\n  overflow: hidden;\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: radial-gradient(\n      circle at 50% 50%,\n      var(--cg-overlay-white-strong) 0%,\n      transparent 70%\n    );\n    opacity: 0;\n    transform: scale(0);\n    transition: transform 400ms ease-out, opacity 400ms ease-out;\n    pointer-events: none;\n    border-radius: inherit;\n  }\n  &:active:not(:disabled)::after {\n    opacity: 1;\n    transform: scale(2.5);\n    transition: 0s;\n  }\n`;\n\n/** Dot/indicator pulse animation for badges and status indicators. */\nexport const dotPulseKeyframes = css`\n  @keyframes dotPulse {\n    0%, 100% { transform: scale(1); opacity: 1; }\n    50% { transform: scale(1.4); opacity: 0.7; }\n  }\n`;\n\n/** Value change pulse for numbers and metrics. */\nexport const valueChangePulseKeyframes = css`\n  @keyframes valueChangePulse {\n    0% { transform: scale(1); }\n    40% { transform: scale(1.05); }\n    100% { transform: scale(1); }\n  }\n`;\n\n/** Entrance animation with stagger support via --stagger-index custom property. */\nexport const entranceStagger = css`\n  @keyframes staggerFadeIn {\n    from {\n      opacity: 0;\n      transform: translateY(8px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n`;\n\n/** Exit animation for removed elements (badges, chips, list items). */\nexport const exitFadeScaleKeyframes = css`\n  @keyframes exitFadeScale {\n    from { opacity: 1; transform: scale(1); }\n    to { opacity: 0; transform: scale(0.85); }\n  }\n`;\n\n// ─────────────────────────────────────────────────────────\n// Advanced Effects — cutting-edge CSS techniques\n// ─────────────────────────────────────────────────────────\n\n/**\n * Dark glassmorphism card — frosted glass with layered shadows.\n * The saturate(1.1) adds vibrancy behind the blur.\n * Use sparingly: max 2-3 glass elements per viewport.\n */\nexport const glassCard = css`\n  background: var(--cg-overlay-white-subtle);\n  backdrop-filter: blur(12px) saturate(1.1);\n  -webkit-backdrop-filter: blur(12px) saturate(1.1);\n  border: 1px solid var(--cg-overlay-white-medium);\n  box-shadow:\n    0 8px 32px var(--cg-overlay-dark-strong),\n    inset 0 1px 0 var(--cg-overlay-white-light);\n`;\n\n/**\n * Noise texture overlay for premium dark surfaces.\n * Inline SVG avoids external file dependencies in Shadow DOM.\n * The mix-blend-mode: overlay enhances surfaces without washing out.\n */\nexport const noiseOverlay = css`\n  &::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    opacity: 0.02;\n    pointer-events: none;\n    z-index: 1;\n    background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\");\n    mix-blend-mode: overlay;\n  }\n`;\n\n/**\n * Liquid fill hover — gradient sweeps up from bottom on hover.\n * More dramatic than colorMatchedHover, for hero/featured elements.\n */\nexport const liquidFillHover = css`\n  position: relative;\n  overflow: hidden;\n  z-index: 0;\n  &::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(\n      180deg,\n      var(--cg-color-accent-text) 0%,\n      var(--cg-overlay-accent-subtle) 100%\n    );\n    opacity: 0.06;\n    transform: translateY(102%);\n    transition: transform var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    z-index: -1;\n    border-radius: inherit;\n  }\n  &:hover::before {\n    transform: translateY(0);\n  }\n`;\n\n/**\n * AI processing glow ring — rotating conic gradient border.\n * Register --cg-border-angle via CSS.registerProperty() in connectedCallback.\n */\nexport const aiGlowRing = css`\n  @keyframes cgBorderSpin {\n    to { --cg-border-angle: 360deg; }\n  }\n`;\n\n/**\n * Scroll-driven reveal animation.\n * Elements fade+slide in as they enter the viewport.\n * Progressive enhancement — works in Chrome 115+, Firefox 110+, Safari 18+.\n */\nexport const scrollReveal = css`\n  @keyframes cgScrollReveal {\n    from {\n      opacity: 0;\n      transform: translateY(20px) scale(0.98);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n`;\n"],"names":["focusRingDual","css","focusRingSingle","menuListStyles","reducedMotion","spinKeyframes","fadeInKeyframes","fadeSlideInKeyframes","shimmerKeyframes","pulseKeyframes","scaleInKeyframes","hostBase","hostBlock","dotPulseKeyframes","entranceStagger"],"mappings":"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"}