@zylem/ui 0.8.14 → 0.9.1

package/src/components/TransportBar/TransportBar.tsx

@@ -3,7 +3,7 @@ import { type JSX, Show } from 'solid-js';
 import { NumberField } from '../NumberField/NumberField';
 import { PlaybackControls } from '../PlaybackControls/PlaybackControls';
 import { Select } from '../Select/Select';
-import { formatBeats, formatClock, type TimeUnit } from '../TimelineLanes/lanes-math';
+import { describeTime, formatBeats, formatClock, type TimeUnit } from '../TimelineLanes/lanes-math';
 import { TimelineTrack } from '../TimelineTrack/TimelineTrack';
 import { ToolbarButton } from '../ToolbarButton/ToolbarButton';
 
@@ -107,6 +107,8 @@ export function TransportBar(props: TransportBarProps) {
           max={props.length}
           onChange={(value) => props.onSeek?.(value)}
           disabled={props.disabled || !props.onSeek}
+          aria-label="Position"
+          valueText={(value) => describeTime(value, { unit: unit(), beatsPerBar: bpb() })}
           class="zylem-transport-track"
         />
         <span class="zylem-transport-time" aria-live="off">
@@ -133,6 +135,7 @@ export function TransportBar(props: TransportBarProps) {
         <Show when={props.timeSignature}>
           {(signature) => (
             <Select
+              aria-label="Time signature"
               options={signatureOptions()}
               value={signatureKey(signature())}
               disabled={props.disabled || !props.onTimeSignatureChange}

package/src/components/Waveform/Waveform.css.ts

@@ -66,6 +66,16 @@ globalStyle('.zylem-waveform-edge::after', {
   boxSizing: 'border-box',
 });
 
+// The ring goes on the grip: around the full-height edge it would be clipped.
+globalStyle('.zylem-waveform-edge:focus-visible', {
+  outline: 'none',
+  boxShadow: 'none',
+});
+
+globalStyle('.zylem-waveform-edge:focus-visible::after', {
+  boxShadow: vars.effects.focusRing,
+});
+
 globalStyle('.zylem-waveform-playhead', {
   position: 'absolute',
   top: 0,

package/src/components/Waveform/Waveform.tsx

@@ -1,7 +1,15 @@
-import { createEffect, createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js';
-import { clamp } from '../TimelineLanes/lanes-math';
+import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from 'solid-js';
+import { clamp, describeSeconds, sliderKeyValue } from '../TimelineLanes/lanes-math';
 import { computePeaks, peaksFromAudioBuffer } from './peaks';
 
+/** Seconds the trim edges must stay apart. */
+const MIN_REGION = 0.01;
+
+const EDGES = [
+  { edge: 'start', label: 'Trim start' },
+  { edge: 'end', label: 'Trim end' },
+] as const;
+
 export type { PeakSource } from './peaks';
 
 export interface WaveformRegion {
@@ -17,7 +25,10 @@ export interface WaveformProps {
   buffer?: { duration: number; numberOfChannels: number; getChannelData(channel: number): Float32Array };
   /** Seconds the peaks span; defaults to `buffer.duration`. Needed for regions and the playhead. */
   duration?: number;
-  /** Highlighted span with draggable edges. */
+  /**
+   * Highlighted span with draggable edges. Focused, an edge also takes the
+   * arrow keys (1% of the duration, 10% with Shift) and Home / End.
+   */
   region?: WaveformRegion;
   onRegionChange?: (region: WaveformRegion) => void;
   onRegionCommit?: (region: WaveformRegion) => void;
@@ -106,14 +117,15 @@ export function Waveform(props: WaveformProps) {
     event.preventDefault();
     event.stopPropagation();
     const target = event.currentTarget as HTMLElement;
+    target.focus({ preventScroll: true });
     target.setPointerCapture?.(event.pointerId);
     let last = region;
     const move = (moveEvent: PointerEvent) => {
       const seconds = secondsAt(moveEvent.clientX);
       last =
         edge === 'start'
-          ? { start: Math.min(seconds, region.end - 0.01), end: region.end }
-          : { start: region.start, end: Math.max(seconds, region.start + 0.01) };
+          ? { start: Math.min(seconds, region.end - MIN_REGION), end: region.end }
+          : { start: region.start, end: Math.max(seconds, region.start + MIN_REGION) };
       props.onRegionChange?.(last);
     };
     const stop = () => {
@@ -128,6 +140,29 @@ export function Waveform(props: WaveformProps) {
     target.addEventListener('pointercancel', stop);
   };
 
+  /** The span each edge may move in, short of crossing the other edge. */
+  const edgeBounds = (edge: 'start' | 'end', region: WaveformRegion) =>
+    edge === 'start'
+      ? { min: 0, max: Math.max(0, region.end - MIN_REGION) }
+      : { min: Math.min(duration(), region.start + MIN_REGION), max: duration() };
+
+  const nudgeEdge = (edge: 'start' | 'end') => (event: KeyboardEvent) => {
+    const region = props.region;
+    if (props.disabled || !region) return;
+    const next = sliderKeyValue(event, {
+      value: region[edge],
+      ...edgeBounds(edge, region),
+      step: duration() / 100,
+    });
+    if (next === null) return;
+    event.preventDefault();
+    // Page-level shortcuts (Home to rewind, arrows to seek) must not also act on it.
+    event.stopPropagation();
+    const changed = { ...region, [edge]: next };
+    props.onRegionChange?.(changed);
+    props.onRegionCommit?.(changed);
+  };
+
   return (
     <div
       ref={host}
@@ -153,28 +188,25 @@ export function Waveform(props: WaveformProps) {
                 class="zylem-waveform-shade"
                 style={{ left: `${percent(region().end)}%`, right: 0 }}
               />
-              <div
-                class="zylem-waveform-edge"
-                data-edge="start"
-                style={{ left: `${percent(region().start)}%` }}
-                onPointerDown={beginRegionDrag('start')}
-                role="slider"
-                aria-label="Trim start"
-                aria-valuenow={region().start}
-                aria-valuemin={0}
-                aria-valuemax={duration()}
-              />
-              <div
-                class="zylem-waveform-edge"
-                data-edge="end"
-                style={{ left: `${percent(region().end)}%` }}
-                onPointerDown={beginRegionDrag('end')}
-                role="slider"
-                aria-label="Trim end"
-                aria-valuenow={region().end}
-                aria-valuemin={0}
-                aria-valuemax={duration()}
-              />
+              <For each={EDGES}>
+                {(edge) => (
+                  <div
+                    class="zylem-waveform-edge"
+                    data-edge={edge.edge}
+                    style={{ left: `${percent(region()[edge.edge])}%` }}
+                    onPointerDown={beginRegionDrag(edge.edge)}
+                    onKeyDown={nudgeEdge(edge.edge)}
+                    role="slider"
+                    tabIndex={props.disabled ? -1 : 0}
+                    aria-label={edge.label}
+                    aria-valuenow={region()[edge.edge]}
+                    aria-valuemin={edgeBounds(edge.edge, region()).min}
+                    aria-valuemax={edgeBounds(edge.edge, region()).max}
+                    aria-valuetext={describeSeconds(region()[edge.edge])}
+                    aria-disabled={props.disabled ? 'true' : undefined}
+                  />
+                )}
+              </For>
             </>
           );
         }}

package/src/components/WindowControls/WindowControls.css.ts

@@ -1,89 +1,72 @@
 import { globalStyle } from '@vanilla-extract/css';
 import { vars } from '../../theme.css';
 
-/** Soft drop plus a light top rim and a darker lower edge. */
-const jewelDepth =
-  'inset 0 1px 0 rgba(255,255,255,0.72), inset 0 -1px 0 rgba(0,0,0,0.28), 0 2px 4px rgba(0,0,0,0.4)';
-
 globalStyle('.zylem-window-controls', {
-  display: 'flex',
-  alignItems: 'center',
-  flexShrink: 0,
-  gap: '6px',
+	display: 'flex',
+	alignItems: 'center',
+	flexShrink: 0,
+	gap: '6px',
 });
 
 /**
- * Shared glass jewel used for all panel chrome: window controls, floating
+ * Shared ghost control used for panel chrome: window controls, floating
  * panels, and detached panels. `.floating-panel-button` is kept as an alias
  * so existing panel markup shares this single definition.
  *
- * Collapse (and the untyped alias) is blue glass; close is red glass.
+ * Resting controls match the ghost button. Close stays that way until it is
+ * hovered or focused, when it takes the danger color.
  */
 globalStyle('.zylem-window-control, .floating-panel-button', {
-  all: 'unset',
-  boxSizing: 'border-box',
-  position: 'relative',
-  cursor: 'pointer',
-  flexShrink: 0,
-  width: '28px',
-  height: '18px',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  color: '#FFFFFF',
-  borderRadius: '6px',
-  border: '1px solid rgba(214, 234, 255, 0.82)',
-  background:
-    'linear-gradient(180deg, rgba(206, 230, 255, 0.78) 0%, rgba(96, 158, 216, 0.84) 42%, rgba(48, 108, 172, 0.92) 100%)',
-  boxShadow: `${jewelDepth}, 0 0 8px rgba(97, 166, 232, 0.28)`,
-  transition: `filter ${vars.motion.fast} ${vars.motion.easeOut}, transform ${vars.motion.fast} ${vars.motion.easeOut}, background ${vars.motion.fast} ${vars.motion.easeOut}, border-color ${vars.motion.fast} ${vars.motion.easeOut}, box-shadow ${vars.motion.fast} ${vars.motion.easeOut}`,
-});
-
-/** Top-edge gloss. Clipped by the button; the icon sits above it. */
-globalStyle('.zylem-window-control::before, .floating-panel-button::before', {
-  content: '""',
-  position: 'absolute',
-  left: '2px',
-  right: '2px',
-  top: '1px',
-  height: '48%',
-  borderRadius: '5px 5px 46% 46%',
-  background:
-    'linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.1) 55%, rgba(255,255,255,0))',
-  pointerEvents: 'none',
+	all: 'unset',
+	boxSizing: 'border-box',
+	position: 'relative',
+	cursor: 'pointer',
+	flexShrink: 0,
+	width: '28px',
+	height: '18px',
+	display: 'inline-flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	color: vars.colors.primary,
+	borderRadius: '6px',
+	border: '1px solid rgba(97, 166, 232, 0.35)',
+	background: 'transparent',
+	boxShadow: 'none',
+	transition: `color ${vars.motion.fast} ${vars.motion.easeOut}, transform ${vars.motion.fast} ${vars.motion.easeOut}, background ${vars.motion.fast} ${vars.motion.easeOut}, border-color ${vars.motion.fast} ${vars.motion.easeOut}, box-shadow ${vars.motion.fast} ${vars.motion.easeOut}`,
 });
 
 globalStyle('.zylem-window-control svg, .floating-panel-button svg', {
-  position: 'relative',
-  zIndex: 1,
-  display: 'block',
-  filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.4))',
-});
-
-globalStyle('.zylem-window-control--close', {
-  borderColor: 'rgba(255, 198, 188, 0.88)',
-  background:
-    'linear-gradient(180deg, rgba(255, 196, 186, 0.78) 0%, rgba(228, 82, 70, 0.9) 44%, rgba(186, 46, 40, 0.96) 100%)',
-  boxShadow: `${jewelDepth}, 0 0 8px rgba(230, 69, 52, 0.34)`,
+	position: 'relative',
+	zIndex: 1,
+	display: 'block',
 });
 
 globalStyle('.zylem-window-control:hover, .floating-panel-button:hover', {
-  filter: 'brightness(1.12)',
-  transform: 'translateY(-1px)',
+	background: 'rgba(97, 166, 232, 0.12)',
+	boxShadow: vars.effects.glowPrimary,
+	color: vars.colors.primary,
+	transform: 'translateY(-1px)',
 });
 
 globalStyle('.zylem-window-control:active, .floating-panel-button:active', {
-  filter: 'brightness(0.92)',
-  transform: 'translateY(1px)',
+	transform: 'translateY(1px)',
+});
+
+globalStyle('.zylem-window-control:focus-visible, .floating-panel-button:focus-visible', {
+	background: 'rgba(97, 166, 232, 0.12)',
+	boxShadow: `${vars.effects.glowPrimary}, ${vars.effects.focusRing}`,
 });
 
-globalStyle(
-  '.zylem-window-control:focus-visible, .floating-panel-button:focus-visible',
-  {
-    boxShadow: `${jewelDepth}, 0 0 8px rgba(97, 166, 232, 0.28), ${vars.effects.focusRing}`,
-  },
-);
+globalStyle('.zylem-window-control--close:hover', {
+	borderColor: 'rgba(255, 132, 114, 0.78)',
+	background: 'rgba(230, 69, 52, 0.16)',
+	color: '#ffb4a8',
+	boxShadow: vars.effects.glowDanger,
+});
 
 globalStyle('.zylem-window-control--close:focus-visible', {
-  boxShadow: `${jewelDepth}, 0 0 8px rgba(230, 69, 52, 0.34), ${vars.effects.focusRing}`,
+	borderColor: 'rgba(255, 132, 114, 0.78)',
+	background: 'rgba(230, 69, 52, 0.16)',
+	color: '#ffb4a8',
+	boxShadow: `${vars.effects.glowDanger}, ${vars.effects.focusRing}`,
 });

package/src/components/WindowControls/WindowControls.tsx

@@ -17,13 +17,14 @@ export interface WindowControlsProps {
 }
 
 /**
- * Shared glass window controls: blue collapse jewel and red close jewel, used
- * by floating and detached panels. Only controls with a handler are rendered.
+ * Shared ghost window controls, used by floating and detached panels. Close
+ * takes the danger color only while hovered or focused. Only controls with a
+ * handler are rendered.
  */
 export function WindowControls(props: WindowControlsProps) {
   return (
     <Show when={props.onClose || props.onCollapse}>
-      <div class="zylem-window-controls" aria-label="Window controls">
+      <div class="zylem-window-controls" role="group" aria-label="Window controls">
         <Show when={props.onCollapse}>
           <button
             type="button"
@@ -33,9 +34,9 @@ export function WindowControls(props: WindowControlsProps) {
             onClick={() => props.onCollapse?.()}
           >
             {props.collapsed ? (
-              <ChevronUp size={11} strokeWidth={2.5} />
+              <ChevronUp size={11} strokeWidth={2.5} aria-hidden="true" />
             ) : (
-              <ChevronDown size={11} strokeWidth={2.5} />
+              <ChevronDown size={11} strokeWidth={2.5} aria-hidden="true" />
             )}
           </button>
         </Show>
@@ -48,7 +49,7 @@ export function WindowControls(props: WindowControlsProps) {
             data-testid={props.closeTestId}
             onClick={() => props.onClose?.()}
           >
-            <X size={11} strokeWidth={2.5} />
+            <X size={11} strokeWidth={2.5} aria-hidden="true" />
           </button>
         </Show>
       </div>

package/src/components/index.ts

@@ -24,6 +24,7 @@ export {
 } from '../layers';
 
 // Primitives
+export { type HeadingLevel } from './shared/Heading';
 export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from './Button/Button';
 export { ToolbarButton, type ToolbarButtonProps } from './ToolbarButton/ToolbarButton';
 export { TextField, type TextFieldProps } from './TextField/TextField';

package/src/components/shared/Heading.tsx

@@ -0,0 +1,30 @@
+import type { JSX } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+
+/** Outline level of a component's title: `2` renders an `<h2>`. */
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+/** The element name for a level, for primitives that take an `as` tag. */
+export function headingTag(level: HeadingLevel) {
+  return `h${level}` as const;
+}
+
+export interface HeadingProps {
+  level: HeadingLevel;
+  id?: string | undefined;
+  class?: string | undefined;
+  title?: string | undefined;
+  children: JSX.Element;
+}
+
+/**
+ * An `<h1>`…`<h6>` chosen at runtime, for titles whose place in the page
+ * outline is the host's call.
+ */
+export function Heading(props: HeadingProps) {
+  return (
+    <Dynamic component={headingTag(props.level)} id={props.id} class={props.class} title={props.title}>
+      {props.children}
+    </Dynamic>
+  );
+}

package/src/fonts.css

@@ -1 +1 @@
-@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

package/src/global/accordion.css.ts

@@ -14,11 +14,14 @@ globalStyle('.zylem-accordion', {
   minHeight: 0,
 });
 
+// The header is a heading element; its UA margins would open gaps around the
+// trigger, and differ by heading level.
 globalStyle('.accordion-header', {
   position: 'sticky',
   top: 0,
   zIndex: 1,
   display: 'flex',
+  margin: 0,
 });
 
 globalStyle('.accordion-item', {
@@ -104,15 +107,16 @@ globalStyle('.zylem-accordion--stack .accordion-content', {
   overflow: 'visible',
 });
 
-globalStyle('.accordion-trigger::after', {
-  content: "'\\25BC'",
-  position: 'relative',
+globalStyle('.accordion-chevron', {
+  width: '16px',
+  height: '16px',
+  flexShrink: 0,
+  stroke: 'currentColor',
   color: vars.colors.textSecondary,
-  fontSize: '10px',
   transition: `transform ${vars.motion.normal} ${vars.motion.easeOut}`,
 });
 
-globalStyle('.accordion-trigger[data-expanded]::after', {
+globalStyle('.accordion-trigger[data-expanded] .accordion-chevron', {
   transform: 'rotate(180deg)',
   color: '#F4FAFF',
 });

package/src/global/common.css.ts

@@ -13,6 +13,19 @@ globalStyle('.overlay', {
   pointerEvents: 'none',
 });
 
+// Text for assistive tech only: off screen, still in the accessibility tree.
+globalStyle('.zylem-visually-hidden', {
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap',
+  border: 0,
+});
+
 // Default scrollbars: slim glass rail (use `.zylem-scroll` for the full
 // 13px HyperGlass treatment defined in hyperglass-base.css.ts).
 globalStyle('::-webkit-scrollbar', {

package/src/global/editor-base.css.ts

@@ -37,6 +37,15 @@ globalStyle('.zylem-exo-2', {
   fontStyle: 'normal',
 });
 
+/** Time and units: clocks, beats, dimensions, levels. */
+globalStyle('.zylem-mono', {
+  fontFamily: vars.typography.fontFamilyMono,
+  fontOpticalSizing: 'auto',
+  fontWeight: 400,
+  fontStyle: 'normal',
+  fontVariantNumeric: 'tabular-nums',
+});
+
 globalStyle('.scrollable-y', {
   overflowY: 'scroll',
   overflowX: 'hidden',

package/src/layers/LayerContext.tsx

@@ -60,8 +60,8 @@ export interface LayerScopeProps {
  * them can paint above anything outside; and the scope owns the portal container
  * its descendants mount into, so overlays opened inside it stay inside it.
  *
- * A dialog wraps its content in one, so a tooltip opened within the dialog floats
- * over the dialog body without also floating over a menu belonging to the page.
+ * A dialog puts its card in one, so a menu opened within the dialog mounts
+ * inside the `<dialog>`, floats over the card, and is not clipped by it.
  */
 export function LayerScope(props: LayerScopeProps) {
 	const [container, setContainer] = createSignal<HTMLElement>();

package/src/sprinkles.css.ts

@@ -149,7 +149,10 @@ const visual = defineProperties({
       bold: '2px',
     },
     borderStyle: ['solid', 'dashed', 'dotted', 'none'],
-    fontFamily: { default: vars.typography.fontFamily },
+    fontFamily: {
+      default: vars.typography.fontFamily,
+      mono: vars.typography.fontFamilyMono,
+    },
     fontSize: { default: vars.typography.fontSize },
     lineHeight: ['1', '1.2', '1.35', '1.45', '1.5'],
     letterSpacing: {

package/src/theme.css.ts

@@ -53,8 +53,13 @@ const tokens = {
 		iconSm: '16px',
 		iconLg: '96px',
 	},
+	/**
+	 * Exo 2 is the interface face. JetBrains Mono is for time and units
+	 * (clocks, beats, dimensions, levels) so digits keep a stable width.
+	 */
 	typography: {
 		fontFamily: "'Exo 2', sans-serif",
+		fontFamilyMono: "'JetBrains Mono', ui-monospace, monospace",
 		fontSize: '14px',
 	},
 	borders: {
@@ -178,6 +183,7 @@ const varNames = {
 	},
 	typography: {
 		fontFamily: 'zylem-font-family',
+		fontFamilyMono: 'zylem-font-family-mono',
 		fontSize: 'zylem-font-size',
 	},
 	borders: {

package/dist/chunk-V47CGFWX.js

@@ -1 +0,0 @@
-var l={colors:{primary:"#61A6E8",primaryHover:"#3B8AD8",primaryActive:"#0C6EB8",accent:"#E64534",accentHover:"#C93A2C",accentActive:"#A82F24",background:"#11151C",backgroundTranslucent:"rgba(10, 20, 30, 0.46)",surface:"#1A1F27",surfaceHover:"#222831",border:"#2D3643",active:"rgba(20, 255, 60, 0.7)",activeHover:"rgba(20, 255, 60, 0.4)",successHover:"#2a6734b3",text:"#E6EBEF",textSecondary:"#88929E",consoleBackground:"rgba(20, 40, 60, 0.25)",consoleText:"#61A6E8"},spacing:{xxs:"0.125rem",xs:"0.25rem",sm:"0.5rem",md:"0.75rem",lg:"1rem",xl:"1.5rem",xxl:"2rem",xxxl:"3rem"},sizes:{icon:"28px",iconSm:"16px",iconLg:"96px"},typography:{fontFamily:"'Exo 2', sans-serif",fontSize:"14px"},borders:{radius:"12px",width:"1.5px"},material:{glassPanel:"linear-gradient(180deg, rgba(38, 76, 112, 0.74), rgba(10, 24, 38, 0.58))",glassPanelDark:"linear-gradient(180deg, rgba(26, 31, 39, 0.75), rgba(10, 20, 30, 0.68))",glossyBar:"linear-gradient(180deg, rgba(205, 232, 255, 0.55) 0%, rgba(97, 166, 232, 0.34) 38%, rgba(18, 54, 88, 0.86) 100%)",buttonGlass:"linear-gradient(180deg, rgba(178, 219, 255, 0.34), rgba(30, 94, 148, 0.72) 48%, rgba(9, 34, 58, 0.92))",buttonGlassHover:"linear-gradient(180deg, rgba(218, 242, 255, 0.58), rgba(48, 137, 220, 0.86) 48%, rgba(11, 62, 112, 0.96))",buttonGlassActive:"linear-gradient(180deg, rgba(190, 255, 203, 0.42), rgba(28, 174, 63, 0.78) 50%, rgba(9, 86, 31, 0.95))",buttonGlassDanger:"linear-gradient(180deg, rgba(255, 210, 202, 0.36), rgba(230, 69, 52, 0.82) 50%, rgba(96, 18, 13, 0.94))",fieldGlass:"linear-gradient(180deg, rgba(8, 19, 31, 0.82), rgba(15, 39, 62, 0.72))",panelHeaderGloss:"linear-gradient(180deg, rgba(190, 226, 255, 0.18), rgba(61, 118, 165, 0.16) 46%, rgba(10, 27, 44, 0.26))"},effects:{blurSm:"8px",blurMd:"14px",blurLg:"24px",shadowPanel:"0 22px 54px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.10)",shadowButton:"inset 0 1px 0 rgba(255,255,255,0.38), inset 0 -1px 0 rgba(0,0,0,0.45), 0 2px 7px rgba(0,0,0,0.35)",shadowInset:"inset 0 1px 2px rgba(0,0,0,0.42), inset 0 -1px 0 rgba(255,255,255,0.08)",glowPrimary:"0 0 18px rgba(97, 166, 232, 0.28)",glowActive:"0 0 20px rgba(20, 255, 60, 0.26)",glowDanger:"0 0 20px rgba(230, 69, 52, 0.24)",focusRing:"0 0 0 2px rgba(97, 166, 232, 0.38), 0 0 18px rgba(97, 166, 232, 0.22)"},radii:{window:"14px",panel:"12px",button:"7px",control:"6px",card:"10px"},motion:{fast:"120ms",normal:"160ms",easeOut:"cubic-bezier(.2,.8,.2,1)"},art:{checkerLight:"#4F5C72",checkerDark:"#3C4759",canvasBorder:"rgba(150, 210, 255, 0.5)"},layers:{base:"0",panel:"1000",modal:"2000",popover:"3000",tooltip:"4000",menu:"5000"}},o={colors:{primary:"var(--zylem-color-primary)",primaryHover:"var(--zylem-color-primary-hover)",primaryActive:"var(--zylem-color-primary-active)",accent:"var(--zylem-color-accent)",accentHover:"var(--zylem-color-accent-hover)",accentActive:"var(--zylem-color-accent-active)",background:"var(--zylem-color-background)",backgroundTranslucent:"var(--zylem-color-background-translucent)",surface:"var(--zylem-color-surface)",surfaceHover:"var(--zylem-color-surface-hover)",border:"var(--zylem-color-border)",active:"var(--zylem-color-active)",activeHover:"var(--zylem-color-active-hover)",successHover:"var(--zylem-color-success-hover)",text:"var(--zylem-color-text)",textSecondary:"var(--zylem-color-text-secondary)",consoleBackground:"var(--zylem-color-console-background)",consoleText:"var(--zylem-color-console-text)"},spacing:{xxs:"var(--zylem-spacing-xxs)",xs:"var(--zylem-spacing-xs)",sm:"var(--zylem-spacing-sm)",md:"var(--zylem-spacing-md)",lg:"var(--zylem-spacing-lg)",xl:"var(--zylem-spacing-xl)",xxl:"var(--zylem-spacing-xxl)",xxxl:"var(--zylem-spacing-xxxl)"},sizes:{icon:"var(--zylem-size-icon)",iconSm:"var(--zylem-size-icon-sm)",iconLg:"var(--zylem-size-icon-lg)"},typography:{fontFamily:"var(--zylem-font-family)",fontSize:"var(--zylem-font-size)"},borders:{radius:"var(--zylem-radius)",width:"var(--zylem-border)"},material:{glassPanel:"var(--zylem-material-glass-panel)",glassPanelDark:"var(--zylem-material-glass-panel-dark)",glossyBar:"var(--zylem-material-glossy-bar)",buttonGlass:"var(--zylem-material-button-glass)",buttonGlassHover:"var(--zylem-material-button-glass-hover)",buttonGlassActive:"var(--zylem-material-button-glass-active)",buttonGlassDanger:"var(--zylem-material-button-glass-danger)",fieldGlass:"var(--zylem-material-field-glass)",panelHeaderGloss:"var(--zylem-material-panel-header-gloss)"},effects:{blurSm:"var(--zylem-effect-blur-sm)",blurMd:"var(--zylem-effect-blur-md)",blurLg:"var(--zylem-effect-blur-lg)",shadowPanel:"var(--zylem-effect-shadow-panel)",shadowButton:"var(--zylem-effect-shadow-button)",shadowInset:"var(--zylem-effect-shadow-inset)",glowPrimary:"var(--zylem-effect-glow-primary)",glowActive:"var(--zylem-effect-glow-active)",glowDanger:"var(--zylem-effect-glow-danger)",focusRing:"var(--zylem-effect-focus-ring)"},radii:{window:"var(--zylem-radius-window)",panel:"var(--zylem-radius-panel)",button:"var(--zylem-radius-button)",control:"var(--zylem-radius-control)",card:"var(--zylem-radius-card)"},motion:{fast:"var(--zylem-motion-fast)",normal:"var(--zylem-motion-normal)",easeOut:"var(--zylem-motion-ease-out)"},art:{checkerLight:"var(--zylem-art-checker-light)",checkerDark:"var(--zylem-art-checker-dark)",canvasBorder:"var(--zylem-art-canvas-border)"},layers:{base:"var(--zylem-layer-base)",panel:"var(--zylem-layer-panel)",modal:"var(--zylem-layer-modal)",popover:"var(--zylem-layer-popover)",tooltip:"var(--zylem-layer-tooltip)",menu:"var(--zylem-layer-menu)"}};export{l as a,o as b};