@zylem/ui 0.8.14 → 0.9.1

package/dist/styles.js

@@ -1 +1 @@
-import"./chunk-V47CGFWX.js";
+import"./chunk-YJVLOHJL.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zylem/ui",
-  "version": "0.8.14",
+  "version": "0.9.1",
   "description": "Design tokens, global styles, and Solid components for Zylem, built with vanilla-extract",
   "license": "MIT",
   "repository": {

package/src/components/Accordion/Accordion.tsx

@@ -1,6 +1,8 @@
 import { Accordion as KAccordion } from '@kobalte/core';
+import ChevronDown from 'lucide-solid/icons/chevron-down';
 import { For } from 'solid-js';
 import type { JSX } from 'solid-js';
+import { headingTag, type HeadingLevel } from '../shared/Heading';
 
 export interface AccordionItemConfig {
   id: string;
@@ -16,6 +18,8 @@ export interface AccordionProps {
   onChange?: (value: string[]) => void;
   defaultValue?: string[];
   class?: string;
+  /** Heading level of each section header (default 3). */
+  headingLevel?: HeadingLevel;
   /** Extra class applied to each content region (e.g. scroll helpers). */
   contentClass?: string;
   /**
@@ -47,9 +51,10 @@ export function Accordion(props: AccordionProps) {
       <For each={props.items}>
         {(item) => (
           <KAccordion.Item value={item.id} class="accordion-item">
-            <KAccordion.Header class="accordion-header">
+            <KAccordion.Header as={headingTag(props.headingLevel ?? 3)} class="accordion-header">
               <KAccordion.Trigger class="accordion-trigger">
                 {item.title}
+                <ChevronDown class="accordion-chevron" aria-hidden="true" />
               </KAccordion.Trigger>
             </KAccordion.Header>
             <KAccordion.Content

package/src/components/BuildLabel/BuildLabel.tsx

@@ -28,7 +28,6 @@ export function BuildLabel(props: BuildLabelProps) {
     <div
       id={BUILD_LABEL_ID}
       class="zylem-build-label"
-      aria-label="Build version"
       title={title()}
     >
       {label()}

package/src/components/BuildLabel/mount-build-label.ts

@@ -62,7 +62,6 @@ export function mountBuildLabel(
   const el = document.createElement('div');
   el.id = BUILD_LABEL_ID;
   el.className = 'zylem-build-label';
-  el.setAttribute('aria-label', 'Build version');
   el.textContent = formatBuildLabel(resolveBuildVersion(model));
   const title = packagesTitle(model.packages);
   if (title) el.title = title;

package/src/components/Button/Button.css.ts

@@ -9,119 +9,138 @@ import { vars } from '../../theme.css';
  */
 
 globalStyle('.zylem-button', {
-  boxSizing: 'border-box',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  gap: vars.spacing.xs,
-  minHeight: '28px',
-  padding: `0 ${vars.spacing.md}`,
-  cursor: 'pointer',
-  userSelect: 'none',
-  whiteSpace: 'nowrap',
-  borderRadius: vars.radii.button,
-  border: '1px solid rgba(150, 210, 255, 0.55)',
-  color: '#F4FAFF',
-  background: vars.material.buttonGlass,
-  boxShadow: vars.effects.shadowButton,
-  textShadow: '0 1px 1px rgba(0,0,0,0.72)',
-  fontFamily: vars.typography.fontFamily,
-  fontSize: vars.typography.fontSize,
-  fontWeight: 600,
-  transition: `transform ${vars.motion.fast} ${vars.motion.easeOut}, box-shadow ${vars.motion.fast} ${vars.motion.easeOut}, filter ${vars.motion.fast} ${vars.motion.easeOut}, background ${vars.motion.fast} ${vars.motion.easeOut}`,
+	boxSizing: 'border-box',
+	display: 'inline-flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	gap: vars.spacing.xs,
+	minHeight: '28px',
+	padding: `0 ${vars.spacing.md}`,
+	cursor: 'pointer',
+	userSelect: 'none',
+	whiteSpace: 'nowrap',
+	borderRadius: vars.radii.button,
+	border: '1px solid rgba(150, 210, 255, 0.55)',
+	color: '#F4FAFF',
+	background: vars.material.buttonGlass,
+	boxShadow: vars.effects.shadowButton,
+	textShadow: '0 1px 1px rgba(0,0,0,0.72)',
+	fontFamily: vars.typography.fontFamily,
+	fontSize: vars.typography.fontSize,
+	fontWeight: 600,
+	transition: `transform ${vars.motion.fast} ${vars.motion.easeOut}, box-shadow ${vars.motion.fast} ${vars.motion.easeOut}, filter ${vars.motion.fast} ${vars.motion.easeOut}, background ${vars.motion.fast} ${vars.motion.easeOut}`,
 });
 
 globalStyle('.zylem-button:hover:not([disabled])', {
-  background: vars.material.buttonGlassHover,
-  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowPrimary}`,
-  transform: 'translateY(-1px)',
-  color: '#F4FAFF',
+	background: vars.material.buttonGlassHover,
+	boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowPrimary}`,
+	transform: 'translateY(-1px)',
+	color: '#F4FAFF',
 });
 
 globalStyle('.zylem-button:active:not([disabled])', {
-  transform: 'translateY(1px)',
-  filter: 'brightness(0.92)',
-  // CodePen-inspired press: compressed drop shadow + bright bottom rim flash.
-  boxShadow:
-    'inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(255,255,255,0.55), inset 0 2px 3px rgba(0,0,0,0.28), 0 1px 3px rgba(0,0,0,0.28)',
+	transform: 'translateY(1px)',
+	filter: 'brightness(0.92)',
+	// CodePen-inspired press: compressed drop shadow + bright bottom rim flash.
+	boxShadow:
+		'inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(255,255,255,0.55), inset 0 2px 3px rgba(0,0,0,0.28), 0 1px 3px rgba(0,0,0,0.28)',
 });
 
 globalStyle('.zylem-button:focus-visible', {
-  outline: 'none',
-  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.focusRing}`,
+	outline: 'none',
+	boxShadow: `${vars.effects.shadowButton}, ${vars.effects.focusRing}`,
 });
 
 globalStyle('.zylem-button[disabled], .zylem-button[data-disabled]', {
-  opacity: 0.45,
-  cursor: 'not-allowed',
+	opacity: 0.45,
+	cursor: 'not-allowed',
 });
 
 // Variants
 
 globalStyle('.zylem-button[data-variant="primary"]', {
-  borderColor: 'rgba(178, 219, 255, 0.8)',
-  background: vars.material.buttonGlassHover,
+	borderColor: 'rgba(178, 219, 255, 0.8)',
+	background: vars.material.buttonGlassHover,
 });
 
 globalStyle('.zylem-button[data-variant="primary"]:hover:not([disabled])', {
-  filter: 'brightness(1.08)',
+	filter: 'brightness(1.08)',
 });
 
 globalStyle('.zylem-button[data-variant="active"]', {
-  borderColor: 'rgba(20, 255, 60, 0.78)',
-  background: vars.material.buttonGlassActive,
-  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowActive}`,
+	borderColor: 'rgba(20, 255, 60, 0.78)',
+	background: vars.material.buttonGlassActive,
+	boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowActive}`,
 });
 
 globalStyle('.zylem-button[data-variant="active"]:hover:not([disabled])', {
-  background: vars.material.buttonGlassActive,
-  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowActive}`,
-  filter: 'brightness(1.1)',
+	background: vars.material.buttonGlassActive,
+	boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowActive}`,
+	filter: 'brightness(1.1)',
 });
 
 globalStyle('.zylem-button[data-variant="danger"]', {
-  borderColor: 'rgba(255, 132, 114, 0.78)',
-  background: vars.material.buttonGlassDanger,
-  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowDanger}`,
+	borderColor: 'rgba(255, 132, 114, 0.78)',
+	background: vars.material.buttonGlassDanger,
+	boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowDanger}`,
 });
 
 globalStyle('.zylem-button[data-variant="danger"]:hover:not([disabled])', {
-  background: vars.material.buttonGlassDanger,
-  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowDanger}`,
-  filter: 'brightness(1.1)',
+	background: vars.material.buttonGlassDanger,
+	boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowDanger}`,
+	filter: 'brightness(1.1)',
 });
 
 globalStyle('.zylem-button[data-variant="ghost"]', {
-  border: '1px solid rgba(97, 166, 232, 0.35)',
-  background: 'transparent',
-  boxShadow: 'none',
-  color: vars.colors.primary,
-  textShadow: 'none',
+	border: '1px solid rgba(97, 166, 232, 0.35)',
+	background: 'transparent',
+	boxShadow: 'none',
+	color: vars.colors.primary,
+	textShadow: 'none',
 });
 
 globalStyle('.zylem-button[data-variant="ghost"]:hover:not([disabled])', {
-  background: 'rgba(97, 166, 232, 0.12)',
-  boxShadow: vars.effects.glowPrimary,
-  color: vars.colors.primary,
+	background: 'rgba(97, 166, 232, 0.12)',
+	boxShadow: vars.effects.glowPrimary,
+	color: vars.colors.primary,
 });
 
 // Sizes
 
 globalStyle('.zylem-button[data-size="sm"]', {
-  minHeight: '22px',
-  padding: `0 ${vars.spacing.sm}`,
-  fontSize: `calc(${vars.typography.fontSize} - 2px)`,
+	minHeight: '22px',
+	padding: `0 ${vars.spacing.sm}`,
+	fontSize: `calc(${vars.typography.fontSize} - 2px)`,
 });
 
 globalStyle('.zylem-button[data-size="lg"]', {
-  minHeight: '36px',
-  padding: `0 ${vars.spacing.lg}`,
-  fontSize: `calc(${vars.typography.fontSize} + 1px)`,
+	minHeight: '36px',
+	padding: `0 ${vars.spacing.lg}`,
+	fontSize: `calc(${vars.typography.fontSize} + 4px)`,
 });
 
 globalStyle('.zylem-button[data-size="icon"]', {
-  minHeight: '28px',
-  minWidth: '28px',
-  padding: vars.spacing.xs,
-  borderRadius: vars.radii.control,
+	minHeight: '24px',
+	minWidth: '28px',
+	padding: vars.spacing.xs,
+	borderRadius: vars.radii.control,
+});
+
+globalStyle('.zylem-button-icon', {
+	display: 'inline-flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	flexShrink: 0,
+});
+
+globalStyle('.zylem-button svg', {
+	width: '16px',
+	height: '16px',
+	flexShrink: 0,
+	stroke: 'currentColor',
+});
+
+globalStyle('.zylem-button[data-size="sm"] svg', {
+	width: '14px',
+	height: '14px',
 });

package/src/components/Button/Button.tsx

@@ -1,5 +1,4 @@
-import type { JSX } from 'solid-js';
-import { splitProps } from 'solid-js';
+import { Show, splitProps, type JSX } from 'solid-js';
 
 export type ButtonVariant = 'default' | 'primary' | 'active' | 'danger' | 'ghost';
 export type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';
@@ -8,6 +7,8 @@ export interface ButtonProps
   extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: ButtonVariant;
   size?: ButtonSize;
+  /** Icon drawn before the label. Omitted, the button is label only. */
+  icon?: JSX.Element | undefined;
 }
 
 /**
@@ -19,7 +20,7 @@ export interface ButtonProps
  * `@zylem/ui/styles.css`), selected via `data-variant` / `data-size`.
  */
 export function Button(props: ButtonProps) {
-  const [local, rest] = splitProps(props, ['variant', 'size', 'class', 'children']);
+  const [local, rest] = splitProps(props, ['variant', 'size', 'class', 'children', 'icon']);
   return (
     <button
       type="button"
@@ -28,6 +29,11 @@ export function Button(props: ButtonProps) {
       data-size={local.size ?? 'md'}
       {...rest}
     >
+      <Show when={local.icon}>
+        <span class="zylem-button-icon" aria-hidden="true">
+          {local.icon}
+        </span>
+      </Show>
       {local.children}
     </button>
   );

package/src/components/Callout/Callout.css.ts

@@ -22,7 +22,7 @@ globalStyle('.zylem-callout-title', {
 });
 
 globalStyle('.zylem-callout-message code', {
-  fontFamily: "'Courier New', monospace",
+  fontFamily: vars.typography.fontFamilyMono,
   fontSize: '0.95em',
 });
 

package/src/components/Callout/Callout.tsx

@@ -26,7 +26,7 @@ export function Callout(props: CalloutProps) {
       <Show when={props.title}>
         <span class="zylem-callout-title">{props.title}</span>
       </Show>
-      <span class="zylem-callout-message">{props.children}</span>
+      <div class="zylem-callout-message">{props.children}</div>
     </div>
   );
 }

package/src/components/Card/Card.css.ts

@@ -64,6 +64,7 @@ globalStyle('.zylem-card-media > img', {
 });
 
 globalStyle('.zylem-card-title', {
+  margin: 0,
   fontSize: vars.typography.fontSize,
   fontWeight: 700,
   color: '#F4FAFF',

package/src/components/Card/Card.tsx

@@ -1,13 +1,19 @@
 import { Show, splitProps } from 'solid-js';
 import type { JSX } from 'solid-js';
+import { Heading, type HeadingLevel } from '../shared/Heading';
 
 export interface CardProps
   extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'title'> {
   title?: JSX.Element;
+  /** Heading level of the title (default 3). */
+  headingLevel?: HeadingLevel;
   description?: JSX.Element;
   /** Artwork above the title: a thumbnail, preview swatch, or icon well. */
   media?: JSX.Element;
-  /** Renders hover glow + pointer cursor and click affordances. */
+  /**
+   * Renders hover glow + pointer cursor and click affordances. The card
+   * becomes a button, so it must not contain other controls.
+   */
   interactive?: boolean;
   selected?: boolean;
   /** Rendered after the description: tags, actions, metadata. */
@@ -22,6 +28,7 @@ export interface CardProps
 export function Card(props: CardProps) {
   const [local, rest] = splitProps(props, [
     'title',
+    'headingLevel',
     'description',
     'media',
     'interactive',
@@ -66,7 +73,9 @@ export function Card(props: CardProps) {
         <div class="zylem-card-media">{local.media}</div>
       </Show>
       <Show when={local.title}>
-        <div class="zylem-card-title">{local.title}</div>
+        <Heading level={local.headingLevel ?? 3} class="zylem-card-title">
+          {local.title}
+        </Heading>
       </Show>
       <Show when={local.description}>
         <div class="zylem-card-description">{local.description}</div>

package/src/components/Checkbox/Checkbox.tsx

@@ -4,6 +4,8 @@ import { Show } from 'solid-js';
 
 export interface CheckboxProps {
   label?: string;
+  /** Accessible name when there is no visible `label`. */
+  'aria-label'?: string;
   checked?: boolean;
   defaultChecked?: boolean;
   onChange?: (checked: boolean) => void;
@@ -25,10 +27,10 @@ export function Checkbox(props: CheckboxProps) {
       disabled={props.disabled}
       name={props.name}
     >
-      <KCheckbox.Input class="zylem-checkbox-input" />
+      <KCheckbox.Input class="zylem-checkbox-input" aria-label={props['aria-label']} />
       <KCheckbox.Control class="zylem-checkbox-control">
         <KCheckbox.Indicator>
-          <Check class="zylem-checkbox-icon" />
+          <Check class="zylem-checkbox-icon" aria-hidden="true" />
         </KCheckbox.Indicator>
       </KCheckbox.Control>
       <Show when={props.label}>

package/src/components/ColorPalette/ColorPalette.tsx

@@ -50,7 +50,7 @@ export interface ColorPaletteProps {
 export function ColorPalette(props: ColorPaletteProps) {
   return (
     <div
-      role="listbox"
+      role="group"
       aria-label="Palette"
       class={props.class ? `zylem-palette ${props.class}` : 'zylem-palette'}
     >

package/src/components/Console/Console.css.ts

@@ -35,7 +35,7 @@ globalStyle('.zylem-console', {
   background: 'rgba(4, 12, 20, 0.72)',
   boxShadow: vars.effects.shadowInset,
   color: vars.colors.consoleText,
-  fontFamily: "'Courier New', monospace",
+  fontFamily: vars.typography.fontFamilyMono,
   fontSize: `calc(${vars.typography.fontSize} - 1px)`,
   lineHeight: 1.45,
   outline: 'none',

package/src/components/Console/Console.tsx

@@ -9,6 +9,8 @@ export interface ConsoleProps {
   onInput?: (value: string) => void;
   onClear?: () => void;
   readOnly?: boolean;
+  /** Accessible name of the text field (default "Console"). */
+  label?: string;
   class?: string;
   /** Extra action buttons rendered next to Clear. */
   actions?: JSX.Element;
@@ -30,6 +32,7 @@ export function Console(props: ConsoleProps) {
       <div class="zylem-console-wrapper">
         <textarea
           class="zylem-console zylem-scroll"
+          aria-label={props.label ?? 'Console'}
           value={props.value}
           spellcheck={false}
           readOnly={props.readOnly || !props.onInput}

package/src/components/Dialog/Dialog.css.ts

@@ -1,7 +1,8 @@
 import { globalStyle, keyframes } from '@vanilla-extract/css';
+import { LAYER_PORTAL_CLASS } from '../../layers/resolve-mount';
 import { vars } from '../../theme.css';
 
-const overlayEnter = keyframes({
+const backdropEnter = keyframes({
   from: { opacity: 0 },
   to: { opacity: 1 },
 });
@@ -11,26 +12,56 @@ const contentEnter = keyframes({
   to: { opacity: 1, transform: 'translateY(0) scale(1)' },
 });
 
-globalStyle('.zylem-dialog-overlay', {
+// The <dialog> is a transparent sheet over the whole viewport; the card inside
+// is the visible window. Undoes the UA's `dialog:modal` box (centered,
+// max-sized, scrolling) but never sets `display`, which would override the UA
+// rule that hides a closed dialog.
+globalStyle('.zylem-dialog', {
   position: 'fixed',
   inset: 0,
-  zIndex: vars.layers.modal,
+  width: '100%',
+  height: '100%',
+  maxWidth: 'none',
+  maxHeight: 'none',
+  margin: 0,
+  padding: 0,
+  border: 0,
+  background: 'transparent',
+  color: 'inherit',
+  font: 'inherit',
+  overflow: 'visible',
+  outline: 'none',
+});
+
+globalStyle('.zylem-dialog::backdrop', {
   background: 'rgba(5, 10, 18, 0.6)',
   backdropFilter: 'blur(3px)',
-  animation: `${overlayEnter} 0.15s ${vars.motion.easeOut}`,
+  animation: `${backdropEnter} 0.15s ${vars.motion.easeOut}`,
+});
+
+globalStyle('html:has(.zylem-dialog[open])', {
+  overflow: 'hidden',
 });
 
 globalStyle('.zylem-dialog-positioner', {
-  position: 'fixed',
-  inset: 0,
-  // One above the backdrop it shares a tier with.
-  zIndex: `calc(${vars.layers.modal} + 1)`,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
+  boxSizing: 'border-box',
+  width: '100%',
+  height: '100%',
   padding: vars.spacing.lg,
 });
 
+// The scope's portal container, where overlays opened from the dialog mount.
+// Out of flow so it takes no part in centering the card, at the dialog's
+// origin, which is the viewport's.
+globalStyle(`.zylem-dialog-positioner > .${LAYER_PORTAL_CLASS}`, {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+});
+
 globalStyle('.zylem-dialog-content', {
   display: 'flex',
   flexDirection: 'column',
@@ -124,20 +155,13 @@ globalStyle('.zylem-dialog-body', {
   lineHeight: 1.45,
 });
 
-// In fullscreen the body and its layer scope become flex columns so content
-// can lay out against the dialog's height (and own its scrolling).
+// In fullscreen the body becomes a flex column so content can lay out against
+// the dialog's height (and own its scrolling).
 globalStyle('.zylem-dialog-content[data-size="fullscreen"] .zylem-dialog-body', {
   display: 'flex',
   flexDirection: 'column',
 });
 
-globalStyle('.zylem-dialog-content[data-size="fullscreen"] .zylem-dialog-scope', {
-  display: 'flex',
-  flexDirection: 'column',
-  flex: '1 1 auto',
-  minHeight: 0,
-});
-
 globalStyle('.zylem-dialog-footer', {
   flex: 'none',
   display: 'flex',