@floegence/floe-webapp-core 0.50.5 → 0.51.0

package/dist/index.js

@@ -1,154 +1,157 @@
 import { FloeProvider as r } from "./app/FloeProvider.js";
-import { applyShellThemeAttribute as i, applyTheme as s, builtInThemes as n, getSystemTheme as m, isThemeType as a, mergeThemeTokenMaps as l, resolveThemeTokenOverrides as p, resolveThemeTokens as f, syncThemeTokenOverrides as d } from "./styles/themes/index.js";
-import { floeColorTokenCategories as g, floeDesignTokens as u, floeFontFamilyTokens as c, floeMotionTokens as x, floeRadiusTokens as C, floeSharedCssVariables as h, floeSpacingTokens as y, floeThemeColorVariables as S, floeTypographyTokens as F, getFloeColorTokenValue as v } from "./styles/tokens.js";
-import { BUILT_IN_SHELL_THEME_DEFAULTS as k, REQUIRED_SHELL_THEME_TOKENS as I, assertUniqueThemePresetNames as R, builtInShellThemePresets as D, createShellThemePreset as E, getShellThemePresetsForMode as L, normalizeShellThemeSelection as _, presetSupportsMode as b, resolveShellThemePresetName as N } from "./styles/themes/presets.js";
-import { CommandProvider as A, createCommandService as M, useCommand as B } from "./context/CommandContext.js";
-import { ComponentRegistryProvider as G, createComponentRegistry as H, hasComponentRegistryContext as U, useComponentContextFactory as W, useComponentRegistry as K, useOptionalComponentRegistry as V } from "./context/ComponentRegistry.js";
-import { DEFAULT_FLOE_CONFIG as Q, FloeConfigProvider as q, useFloeConfig as Y, useResolvedFloeConfig as j } from "./context/FloeConfigContext.js";
-import { DeckProvider as X, createDeckService as Z, useDeck as $ } from "./context/DeckContext.js";
-import { FLOE_GEOMETRY_SURFACE_ATTR as oe, FLOE_HOT_INTERACTION_ATTR as re, startHotInteraction as te } from "./utils/hotInteraction.js";
-import { FileBrowserDragProvider as se, hasFileBrowserDragContext as ne, useFileBrowserDrag as me } from "./context/FileBrowserDragContext.js";
-import { LayoutProvider as le, createLayoutService as pe, useLayout as fe } from "./context/LayoutContext.js";
-import { NotificationContainer as Te, NotificationProvider as ge, createNotificationService as ue, useNotification as ce } from "./context/NotificationContext.js";
-import { ThemeProvider as Ce, createThemeService as he, useTheme as ye } from "./context/ThemeContext.js";
-import { ViewActivationProvider as Fe, useViewActivation as ve } from "./context/ViewActivationContext.js";
-import { WidgetRegistryProvider as ke, createWidgetRegistry as Ie, useWidgetRegistry as Re } from "./context/WidgetRegistry.js";
-import { WidgetStateProvider as Ee, useCurrentWidgetId as Le, useWidgetState as _e, useWidgetStateContext as be } from "./context/WidgetStateContext.js";
-import { applyDragDelta as Oe, applyResizeDelta as Ae, getGridCellSize as Me, pixelDeltaToGridDelta as Be, positionToGridArea as we, snapToGrid as Ge } from "./utils/gridLayout.js";
-import { checkCollision as Ue, constrainPosition as We, findFreePosition as Ke, hasCollision as Ve, sameGridPosition as ze } from "./utils/gridCollision.js";
-import { cn as qe } from "./utils/cn.js";
-import { createSimpleContext as je } from "./context/createSimpleContext.js";
-import { createUIFirstSelection as Xe } from "./utils/uiFirstSelection.js";
-import { deferAfterPaint as $e, deferNonBlocking as eo } from "./utils/defer.js";
-import { duration as ro, easing as to, fadeIn as io, listContainer as so, listItem as no, panelResize as mo, popIn as ao, scaleIn as lo, sidebarVariants as po, slideInFromBottom as fo, slideInFromLeft as To, slideInFromRight as go, slideInFromTop as uo, springConfig as co } from "./utils/animations.js";
-import { formatKeybind as Co, isMacLikePlatform as ho, isPrimaryModKeyPressed as yo, matchKeybind as So, parseKeybind as Fo } from "./utils/keybind.js";
-import { isTypingElement as Po, shouldIgnoreHotkeys as ko } from "./utils/dom.js";
-import { lockBodyStyle as Ro } from "./utils/bodyStyleLock.js";
-import { registerCommandContributions as Eo, useCommandContributions as Lo } from "./hooks/useCommandContributions.js";
-import { useDebounce as bo } from "./hooks/useDebounce.js";
-import { useDeckDrag as Oo } from "./hooks/useDeckDrag.js";
-import { useFileBrowserDropTarget as Mo, useFileBrowserItemDrag as Bo } from "./hooks/useFileBrowserDrag.js";
-import { useKeybind as Go } from "./hooks/useKeybind.js";
-import { useMediaQuery as Uo } from "./hooks/useMediaQuery.js";
-import { usePersisted as Ko } from "./hooks/usePersisted.js";
-import { useResizeObserver as zo } from "./hooks/useResizeObserver.js";
+import { applyShellThemeAttribute as i, applySurfaceStyleAttribute as s, applyTheme as n, builtInThemes as a, getSystemTheme as m, isFloeSurfaceStyle as l, isThemeType as p, mergeThemeTokenMaps as f, resolveThemeTokenOverrides as d, resolveThemeTokens as T, syncThemeTokenOverrides as u } from "./styles/themes/index.js";
+import { floeColorTokenCategories as g, floeDesignTokens as x, floeFontFamilyTokens as y, floeMotionTokens as C, floeRadiusTokens as h, floeSharedCssVariables as S, floeSpacingTokens as F, floeSurfaceTokens as v, floeThemeColorVariables as P, floeTypographyTokens as k, getFloeColorTokenValue as I } from "./styles/tokens.js";
+import { BUILT_IN_SHELL_THEME_DEFAULTS as D, REQUIRED_SHELL_THEME_TOKENS as E, assertUniqueThemePresetNames as b, builtInShellThemePresets as L, createShellThemePreset as _, getShellThemePresetsForMode as A, normalizeShellThemeSelection as N, presetSupportsMode as O, resolveShellThemePresetName as M } from "./styles/themes/presets.js";
+import { CommandProvider as w, createCommandService as G, useCommand as H } from "./context/CommandContext.js";
+import { ComponentRegistryProvider as W, createComponentRegistry as K, hasComponentRegistryContext as V, useComponentContextFactory as z, useComponentRegistry as Q, useOptionalComponentRegistry as q } from "./context/ComponentRegistry.js";
+import { DEFAULT_FLOE_CONFIG as j, FloeConfigProvider as J, useFloeConfig as X, useResolvedFloeConfig as Z } from "./context/FloeConfigContext.js";
+import { DeckProvider as ee, createDeckService as oe, useDeck as re } from "./context/DeckContext.js";
+import { FLOE_GEOMETRY_SURFACE_ATTR as ie, FLOE_HOT_INTERACTION_ATTR as se, startHotInteraction as ne } from "./utils/hotInteraction.js";
+import { FileBrowserDragProvider as me, hasFileBrowserDragContext as le, useFileBrowserDrag as pe } from "./context/FileBrowserDragContext.js";
+import { LayoutProvider as de, createLayoutService as Te, useLayout as ue } from "./context/LayoutContext.js";
+import { NotificationContainer as ge, NotificationProvider as xe, createNotificationService as ye, useNotification as Ce } from "./context/NotificationContext.js";
+import { ThemeProvider as Se, createThemeService as Fe, useTheme as ve } from "./context/ThemeContext.js";
+import { ViewActivationProvider as ke, useViewActivation as Ie } from "./context/ViewActivationContext.js";
+import { WidgetRegistryProvider as De, createWidgetRegistry as Ee, useWidgetRegistry as be } from "./context/WidgetRegistry.js";
+import { WidgetStateProvider as _e, useCurrentWidgetId as Ae, useWidgetState as Ne, useWidgetStateContext as Oe } from "./context/WidgetStateContext.js";
+import { applyDragDelta as Be, applyResizeDelta as we, getGridCellSize as Ge, pixelDeltaToGridDelta as He, positionToGridArea as Ue, snapToGrid as We } from "./utils/gridLayout.js";
+import { checkCollision as Ve, constrainPosition as ze, findFreePosition as Qe, hasCollision as qe, sameGridPosition as Ye } from "./utils/gridCollision.js";
+import { cn as Je } from "./utils/cn.js";
+import { createSimpleContext as Ze } from "./context/createSimpleContext.js";
+import { createUIFirstSelection as eo } from "./utils/uiFirstSelection.js";
+import { deferAfterPaint as ro, deferNonBlocking as to } from "./utils/defer.js";
+import { duration as so, easing as no, fadeIn as ao, listContainer as mo, listItem as lo, panelResize as po, popIn as fo, scaleIn as To, sidebarVariants as uo, slideInFromBottom as co, slideInFromLeft as go, slideInFromRight as xo, slideInFromTop as yo, springConfig as Co } from "./utils/animations.js";
+import { formatKeybind as So, isMacLikePlatform as Fo, isPrimaryModKeyPressed as vo, matchKeybind as Po, parseKeybind as ko } from "./utils/keybind.js";
+import { isTypingElement as Ro, shouldIgnoreHotkeys as Do } from "./utils/dom.js";
+import { lockBodyStyle as bo } from "./utils/bodyStyleLock.js";
+import { registerCommandContributions as _o, useCommandContributions as Ao } from "./hooks/useCommandContributions.js";
+import { useDebounce as Oo } from "./hooks/useDebounce.js";
+import { useDeckDrag as Bo } from "./hooks/useDeckDrag.js";
+import { useFileBrowserDropTarget as Go, useFileBrowserItemDrag as Ho } from "./hooks/useFileBrowserDrag.js";
+import { useKeybind as Wo } from "./hooks/useKeybind.js";
+import { useMediaQuery as Vo } from "./hooks/useMediaQuery.js";
+import { usePersisted as Qo } from "./hooks/usePersisted.js";
+import { useResizeObserver as Yo } from "./hooks/useResizeObserver.js";
 export {
-  k as BUILT_IN_SHELL_THEME_DEFAULTS,
-  A as CommandProvider,
-  G as ComponentRegistryProvider,
-  Q as DEFAULT_FLOE_CONFIG,
-  X as DeckProvider,
-  oe as FLOE_GEOMETRY_SURFACE_ATTR,
-  re as FLOE_HOT_INTERACTION_ATTR,
-  se as FileBrowserDragProvider,
-  q as FloeConfigProvider,
+  D as BUILT_IN_SHELL_THEME_DEFAULTS,
+  w as CommandProvider,
+  W as ComponentRegistryProvider,
+  j as DEFAULT_FLOE_CONFIG,
+  ee as DeckProvider,
+  ie as FLOE_GEOMETRY_SURFACE_ATTR,
+  se as FLOE_HOT_INTERACTION_ATTR,
+  me as FileBrowserDragProvider,
+  J as FloeConfigProvider,
   r as FloeProvider,
-  le as LayoutProvider,
-  Te as NotificationContainer,
-  ge as NotificationProvider,
-  I as REQUIRED_SHELL_THEME_TOKENS,
-  Ce as ThemeProvider,
-  Fe as ViewActivationProvider,
-  ke as WidgetRegistryProvider,
-  Ee as WidgetStateProvider,
-  Oe as applyDragDelta,
-  Ae as applyResizeDelta,
+  de as LayoutProvider,
+  ge as NotificationContainer,
+  xe as NotificationProvider,
+  E as REQUIRED_SHELL_THEME_TOKENS,
+  Se as ThemeProvider,
+  ke as ViewActivationProvider,
+  De as WidgetRegistryProvider,
+  _e as WidgetStateProvider,
+  Be as applyDragDelta,
+  we as applyResizeDelta,
   i as applyShellThemeAttribute,
-  s as applyTheme,
-  R as assertUniqueThemePresetNames,
-  D as builtInShellThemePresets,
-  n as builtInThemes,
-  Ue as checkCollision,
-  qe as cn,
-  We as constrainPosition,
-  M as createCommandService,
-  H as createComponentRegistry,
-  Z as createDeckService,
-  pe as createLayoutService,
-  ue as createNotificationService,
-  E as createShellThemePreset,
-  je as createSimpleContext,
-  he as createThemeService,
-  Xe as createUIFirstSelection,
-  Ie as createWidgetRegistry,
-  $e as deferAfterPaint,
-  eo as deferNonBlocking,
-  ro as duration,
-  to as easing,
-  io as fadeIn,
-  Ke as findFreePosition,
+  s as applySurfaceStyleAttribute,
+  n as applyTheme,
+  b as assertUniqueThemePresetNames,
+  L as builtInShellThemePresets,
+  a as builtInThemes,
+  Ve as checkCollision,
+  Je as cn,
+  ze as constrainPosition,
+  G as createCommandService,
+  K as createComponentRegistry,
+  oe as createDeckService,
+  Te as createLayoutService,
+  ye as createNotificationService,
+  _ as createShellThemePreset,
+  Ze as createSimpleContext,
+  Fe as createThemeService,
+  eo as createUIFirstSelection,
+  Ee as createWidgetRegistry,
+  ro as deferAfterPaint,
+  to as deferNonBlocking,
+  so as duration,
+  no as easing,
+  ao as fadeIn,
+  Qe as findFreePosition,
   g as floeColorTokenCategories,
-  u as floeDesignTokens,
-  c as floeFontFamilyTokens,
-  x as floeMotionTokens,
-  C as floeRadiusTokens,
-  h as floeSharedCssVariables,
-  y as floeSpacingTokens,
-  S as floeThemeColorVariables,
-  F as floeTypographyTokens,
-  Co as formatKeybind,
-  v as getFloeColorTokenValue,
-  Me as getGridCellSize,
-  L as getShellThemePresetsForMode,
+  x as floeDesignTokens,
+  y as floeFontFamilyTokens,
+  C as floeMotionTokens,
+  h as floeRadiusTokens,
+  S as floeSharedCssVariables,
+  F as floeSpacingTokens,
+  v as floeSurfaceTokens,
+  P as floeThemeColorVariables,
+  k as floeTypographyTokens,
+  So as formatKeybind,
+  I as getFloeColorTokenValue,
+  Ge as getGridCellSize,
+  A as getShellThemePresetsForMode,
   m as getSystemTheme,
-  Ve as hasCollision,
-  U as hasComponentRegistryContext,
-  ne as hasFileBrowserDragContext,
-  ho as isMacLikePlatform,
-  yo as isPrimaryModKeyPressed,
-  a as isThemeType,
-  Po as isTypingElement,
-  so as listContainer,
-  no as listItem,
-  Ro as lockBodyStyle,
-  So as matchKeybind,
-  l as mergeThemeTokenMaps,
-  _ as normalizeShellThemeSelection,
-  mo as panelResize,
-  Fo as parseKeybind,
-  Be as pixelDeltaToGridDelta,
-  ao as popIn,
-  we as positionToGridArea,
-  b as presetSupportsMode,
-  Eo as registerCommandContributions,
-  N as resolveShellThemePresetName,
-  p as resolveThemeTokenOverrides,
-  f as resolveThemeTokens,
-  ze as sameGridPosition,
-  lo as scaleIn,
-  ko as shouldIgnoreHotkeys,
-  po as sidebarVariants,
-  fo as slideInFromBottom,
-  To as slideInFromLeft,
-  go as slideInFromRight,
-  uo as slideInFromTop,
-  Ge as snapToGrid,
-  co as springConfig,
-  te as startHotInteraction,
-  d as syncThemeTokenOverrides,
-  B as useCommand,
-  Lo as useCommandContributions,
-  W as useComponentContextFactory,
-  K as useComponentRegistry,
-  Le as useCurrentWidgetId,
-  bo as useDebounce,
-  $ as useDeck,
-  Oo as useDeckDrag,
-  me as useFileBrowserDrag,
-  Mo as useFileBrowserDropTarget,
-  Bo as useFileBrowserItemDrag,
-  Y as useFloeConfig,
-  Go as useKeybind,
-  fe as useLayout,
-  Uo as useMediaQuery,
-  ce as useNotification,
-  V as useOptionalComponentRegistry,
-  Ko as usePersisted,
-  zo as useResizeObserver,
-  j as useResolvedFloeConfig,
-  ye as useTheme,
-  ve as useViewActivation,
-  Re as useWidgetRegistry,
-  _e as useWidgetState,
-  be as useWidgetStateContext
+  qe as hasCollision,
+  V as hasComponentRegistryContext,
+  le as hasFileBrowserDragContext,
+  l as isFloeSurfaceStyle,
+  Fo as isMacLikePlatform,
+  vo as isPrimaryModKeyPressed,
+  p as isThemeType,
+  Ro as isTypingElement,
+  mo as listContainer,
+  lo as listItem,
+  bo as lockBodyStyle,
+  Po as matchKeybind,
+  f as mergeThemeTokenMaps,
+  N as normalizeShellThemeSelection,
+  po as panelResize,
+  ko as parseKeybind,
+  He as pixelDeltaToGridDelta,
+  fo as popIn,
+  Ue as positionToGridArea,
+  O as presetSupportsMode,
+  _o as registerCommandContributions,
+  M as resolveShellThemePresetName,
+  d as resolveThemeTokenOverrides,
+  T as resolveThemeTokens,
+  Ye as sameGridPosition,
+  To as scaleIn,
+  Do as shouldIgnoreHotkeys,
+  uo as sidebarVariants,
+  co as slideInFromBottom,
+  go as slideInFromLeft,
+  xo as slideInFromRight,
+  yo as slideInFromTop,
+  We as snapToGrid,
+  Co as springConfig,
+  ne as startHotInteraction,
+  u as syncThemeTokenOverrides,
+  H as useCommand,
+  Ao as useCommandContributions,
+  z as useComponentContextFactory,
+  Q as useComponentRegistry,
+  Ae as useCurrentWidgetId,
+  Oo as useDebounce,
+  re as useDeck,
+  Bo as useDeckDrag,
+  pe as useFileBrowserDrag,
+  Go as useFileBrowserDropTarget,
+  Ho as useFileBrowserItemDrag,
+  X as useFloeConfig,
+  Wo as useKeybind,
+  ue as useLayout,
+  Vo as useMediaQuery,
+  Ce as useNotification,
+  q as useOptionalComponentRegistry,
+  Qo as usePersisted,
+  Yo as useResizeObserver,
+  Z as useResolvedFloeConfig,
+  ve as useTheme,
+  Ie as useViewActivation,
+  be as useWidgetRegistry,
+  Ne as useWidgetState,
+  Oe as useWidgetStateContext
 };

package/dist/input-focus.css

@@ -0,0 +1,36 @@
+/* A field has one visible border. Compound controls mark the element that owns it.
+ * Keep the contract unlayered so host base borders cannot silently hide focus.
+ * It changes color only and never replaces an existing decorative shadow.
+ */
+:is(
+  input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='button'], [type='submit'], [type='reset'], [type='image']),
+  textarea, select, [data-floe-input-surface]
+) {
+  outline: none;
+}
+
+:is(
+  input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='button'], [type='submit'], [type='reset'], [type='image']),
+  textarea, select, [data-floe-input-surface]
+):focus:not(:disabled):not([aria-disabled='true']):not([data-floe-input-surface] :is(input, textarea, select)),
+[data-floe-input-surface]:focus-within:not(:disabled):not([aria-disabled='true']) {
+  border-color: var(--floe-input-focus-color, var(--ring));
+}
+
+:is(input, textarea, select, [data-floe-input-surface])[aria-invalid='true'] {
+  --floe-input-focus-color: var(--error);
+}
+
+/* Internal buttons use a local fill to identify keyboard focus without a second frame. */
+[data-floe-input-surface] button:focus-visible {
+  outline: none;
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+@media (forced-colors: active) {
+  :is(input, textarea, select, [data-floe-input-surface]),
+  :is(input, textarea, select, [data-floe-input-surface])[aria-invalid='true'] {
+    --floe-input-focus-color: Highlight;
+  }
+}

package/dist/styles/themes/index.d.ts

@@ -1,4 +1,7 @@
 export type ThemeType = 'light' | 'dark' | 'system';
+export type FloeSurfaceStyle = 'standard' | 'soft-neumorphic';
+export declare function isFloeSurfaceStyle(value: unknown): value is FloeSurfaceStyle;
+export declare function applySurfaceStyleAttribute(style: FloeSurfaceStyle | undefined, target?: ThemeTarget): void;
 export type FloeThemePresetMode = 'light' | 'dark' | 'both';
 export type FloeThemeTokenMap = Partial<Record<`--${string}`, string>>;
 export interface FloeMonacoTokenRule {

package/dist/styles/themes/index.js

@@ -1,11 +1,18 @@
-const f = [
+function m(e) {
+  return e === "standard" || e === "soft-neumorphic";
+}
+function d(e, r) {
+  const t = i(r);
+  e ? t?.setAttribute?.("data-floe-surface-style", e) : t?.removeAttribute?.("data-floe-surface-style");
+}
+const h = [
   { name: "light", displayName: "Light", type: "light" },
   { name: "dark", displayName: "Dark", type: "dark" }
 ];
-function h(e) {
+function y(e) {
   return e === "light" || e === "dark" || e === "system";
 }
-function m() {
+function u() {
   return typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
 function i(e) {
@@ -13,51 +20,53 @@ function i(e) {
   if (!(typeof document > "u"))
     return document.documentElement;
 }
-function c(e, n) {
+function c(e, r) {
   return {
     ...e?.shared ?? {},
-    ...n === "light" ? e?.light ?? {} : e?.dark ?? {}
+    ...r === "light" ? e?.light ?? {} : e?.dark ?? {}
   };
 }
-function u(...e) {
+function f(...e) {
   return Object.assign({}, ...e.filter(Boolean));
 }
-function d(e, ...n) {
-  return u(
-    ...n.map((t) => c(t, e))
+function p(e, ...r) {
+  return f(
+    ...r.map((t) => c(t, e))
   );
 }
-function y(e, n) {
-  const t = i(n);
+function T(e, r) {
+  const t = i(r);
   if (!t) return;
-  const o = e === "system" ? m() : e;
+  const o = e === "system" ? u() : e;
   t.classList.remove("light", "dark"), t.classList.add(o), t.style.colorScheme = o;
 }
-function p(e, n) {
-  const t = i(n);
+function g(e, r) {
+  const t = i(r);
   t && (e ? t.setAttribute?.("data-floe-shell-theme", e) : t.removeAttribute?.("data-floe-shell-theme"));
 }
-function T(e, n = [], t) {
+function k(e, r = [], t) {
   const o = i(t);
   if (!o) return [];
-  const l = Object.entries(e ?? {}).filter((r) => {
-    const [, s] = r;
+  const a = Object.entries(e ?? {}).filter((n) => {
+    const [, s] = n;
     return typeof s == "string" && s.length > 0;
-  }), a = new Set(l.map(([r]) => r));
-  for (const r of n)
-    a.has(r) || o.style.removeProperty(r);
-  for (const [r, s] of l)
-    o.style.setProperty(r, s);
-  return [...a];
+  }), l = new Set(a.map(([n]) => n));
+  for (const n of r)
+    l.has(n) || o.style.removeProperty(n);
+  for (const [n, s] of a)
+    o.style.setProperty(n, s);
+  return [...l];
 }
 export {
-  p as applyShellThemeAttribute,
-  y as applyTheme,
-  f as builtInThemes,
-  m as getSystemTheme,
-  h as isThemeType,
-  u as mergeThemeTokenMaps,
+  g as applyShellThemeAttribute,
+  d as applySurfaceStyleAttribute,
+  T as applyTheme,
+  h as builtInThemes,
+  u as getSystemTheme,
+  m as isFloeSurfaceStyle,
+  y as isThemeType,
+  f as mergeThemeTokenMaps,
   c as resolveThemeTokenOverrides,
-  d as resolveThemeTokens,
-  T as syncThemeTokenOverrides
+  p as resolveThemeTokens,
+  k as syncThemeTokenOverrides
 };

package/dist/styles/tokens.d.ts

@@ -637,6 +637,25 @@ export declare const floeThemeColorVariables: {
     readonly dark: Record<`--${string}`, string>;
 };
 export declare function getFloeColorTokenValue(variable: FloeCssVariableName, theme: FloeResolvedTheme): string | undefined;
+/** Optional shadow overrides. Defaults resolve at each role so local palettes
+ * participate without masking overrides supplied by the theme service. */
+export declare const floeSurfaceTokens: readonly [{
+    readonly variable: "--floe-surface-shadow-raised";
+    readonly role: "raised";
+    readonly fallback: "0 2px 5px -2px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
+}, {
+    readonly variable: "--floe-surface-shadow-inset";
+    readonly role: "inset";
+    readonly fallback: "inset 0 1px 2px var(--floe-surface-shade), inset 0 -1px 1px var(--floe-surface-highlight)";
+}, {
+    readonly variable: "--floe-surface-shadow-floating";
+    readonly role: "floating";
+    readonly fallback: "0 8px 20px -6px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
+}, {
+    readonly variable: "--floe-surface-shadow-interacting";
+    readonly role: "interacting";
+    readonly fallback: "0 1px 2px var(--floe-surface-shade)";
+}];
 export declare const floeDesignTokens: {
     readonly colors: readonly [{
         readonly name: "Base Colors";
@@ -1227,4 +1246,21 @@ export declare const floeDesignTokens: {
         readonly '--font-sans': "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
         readonly '--font-mono': "'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace";
     };
+    readonly surface: readonly [{
+        readonly variable: "--floe-surface-shadow-raised";
+        readonly role: "raised";
+        readonly fallback: "0 2px 5px -2px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
+    }, {
+        readonly variable: "--floe-surface-shadow-inset";
+        readonly role: "inset";
+        readonly fallback: "inset 0 1px 2px var(--floe-surface-shade), inset 0 -1px 1px var(--floe-surface-highlight)";
+    }, {
+        readonly variable: "--floe-surface-shadow-floating";
+        readonly role: "floating";
+        readonly fallback: "0 8px 20px -6px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
+    }, {
+        readonly variable: "--floe-surface-shadow-interacting";
+        readonly role: "interacting";
+        readonly fallback: "0 1px 2px var(--floe-surface-shade)";
+    }];
 };

package/dist/styles/tokens.js

@@ -628,27 +628,34 @@ const u = {
   light: o("light"),
   dark: o("dark")
 };
-function h(a, e) {
+function g(a, e) {
   return u[e][a];
 }
-const g = {
+const h = [
+  { variable: "--floe-surface-shadow-raised", role: "raised", fallback: "0 2px 5px -2px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)" },
+  { variable: "--floe-surface-shadow-inset", role: "inset", fallback: "inset 0 1px 2px var(--floe-surface-shade), inset 0 -1px 1px var(--floe-surface-highlight)" },
+  { variable: "--floe-surface-shadow-floating", role: "floating", fallback: "0 8px 20px -6px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)" },
+  { variable: "--floe-surface-shadow-interacting", role: "interacting", fallback: "0 1px 2px var(--floe-surface-shade)" }
+], m = {
   colors: l,
   typography: i,
   fonts: n,
   spacing: s,
   radius: t,
   motion: c,
-  shared: r
+  shared: r,
+  surface: h
 };
 export {
   l as floeColorTokenCategories,
-  g as floeDesignTokens,
+  m as floeDesignTokens,
   n as floeFontFamilyTokens,
   c as floeMotionTokens,
   t as floeRadiusTokens,
   r as floeSharedCssVariables,
   s as floeSpacingTokens,
+  h as floeSurfaceTokens,
   u as floeThemeColorVariables,
   i as floeTypographyTokens,
-  h as getFloeColorTokenValue
+  g as getFloeColorTokenValue
 };