@zylem/ui 0.1.1 → 0.2.3

package/src/components/MenuButton/MenuButton.tsx

@@ -0,0 +1,153 @@
+import { Popover as KPopover } from '@kobalte/core';
+import { Show, createSignal, type JSX } from 'solid-js';
+import { createDismissGuard, useLayer } from '../../layers';
+import { Tooltip } from '../Tooltip/Tooltip';
+
+export interface MenuButtonProps {
+  /** Accessible name, and the tooltip text unless `tooltip` overrides it. */
+  label: string;
+  /** Button face content, usually an icon. */
+  children: JSX.Element;
+  /** Panel content: a menu, a picker, anything. Rendered only while open. */
+  menu: (close: () => void) => JSX.Element;
+  /**
+   * Primary action for the face. Given one, the button splits: the face fires
+   * this and the chevron opens the menu. Without one, the whole button opens
+   * the menu and the chevron is only there to say so.
+   *
+   * Optional props here accept an explicit `undefined` so a caller compiled with
+   * `exactOptionalPropertyTypes` can decide the split at the call site.
+   */
+  onAction?: (() => void) | undefined;
+  /** Renders the face in its selected state. */
+  selected?: boolean | undefined;
+  disabled?: boolean | undefined;
+  /** Tooltip text; defaults to `label`. Pass `null` for no tooltip. */
+  tooltip?: string | null | undefined;
+  placement?:
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'bottom'
+    | 'top-start'
+    | 'top-end'
+    | 'top'
+    | undefined;
+  /** Controlled open state. Omit to let the button own it. */
+  open?: boolean | undefined;
+  onOpenChange?: ((open: boolean) => void) | undefined;
+  class?: string | undefined;
+}
+
+/**
+ * Shown in both modes, because a chevron means "this has a menu" and that is
+ * true whether or not the face carries its own action.
+ */
+const CHEVRON = '▾';
+
+/**
+ * A toolbar button that owns a menu, optionally split.
+ *
+ * Split mode exists because choosing and doing are separate jobs: the face
+ * repeats the last choice and the chevron is there for picking a different one.
+ * Placing ten of the same thing is then one trip through the menu and ten
+ * clicks, rather than ten trips.
+ *
+ * The panel is layered at the `menu` tier and portaled out of the button's own
+ * subtree, so a toolbar that clips its overflow or sits in a lower stacking
+ * context cannot hide it.
+ */
+export function MenuButton(props: MenuButtonProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = createSignal(false);
+  const layer = useLayer('menu');
+  const dismiss = createDismissGuard();
+
+  const isOpen = () => props.open ?? uncontrolledOpen();
+  const setOpen = (open: boolean) => {
+    setUncontrolledOpen(open);
+    props.onOpenChange?.(open);
+  };
+
+  const isSplit = () => props.onAction !== undefined;
+  const tooltipText = () =>
+    props.tooltip === null ? null : props.tooltip ?? props.label;
+
+  /** Wrap in a tooltip only when there is text for one. */
+  const described = (content: JSX.Element) => (
+    <Show when={tooltipText()} fallback={content} keyed>
+      {(text) => <Tooltip content={text}>{content}</Tooltip>}
+    </Show>
+  );
+
+  return (
+    <div
+      class={props.class ? `zylem-menu-button ${props.class}` : 'zylem-menu-button'}
+      data-split={isSplit() ? '' : undefined}
+    >
+      <KPopover.Root
+        open={isOpen()}
+        onOpenChange={setOpen}
+        placement={props.placement ?? 'bottom-start'}
+      >
+        <Show
+          when={isSplit()}
+          fallback={described(
+            <KPopover.Trigger
+              ref={layer.anchorRef}
+              class="zylem-toolbar-btn zylem-menu-button__face"
+              aria-label={props.label}
+              disabled={props.disabled}
+              data-selected={props.selected ? '' : undefined}
+            >
+              {props.children}
+              {/*
+               * Signage only: the button around it already opens the menu, so
+               * this must not read as a second control.
+               */}
+              <span
+                class="zylem-menu-button__chevron zylem-menu-button__chevron--static"
+                aria-hidden="true"
+              >
+                {CHEVRON}
+              </span>
+            </KPopover.Trigger>,
+          )}
+        >
+          {described(
+            <button
+              type="button"
+              ref={layer.anchorRef}
+              class="zylem-toolbar-btn zylem-menu-button__face"
+              aria-label={props.label}
+              disabled={props.disabled}
+              data-selected={props.selected ? '' : undefined}
+              onClick={() => props.onAction?.()}
+            >
+              {props.children}
+            </button>,
+          )}
+          <KPopover.Trigger
+            class="zylem-menu-button__chevron"
+            aria-label={`${props.label} options`}
+            disabled={props.disabled}
+          >
+            <span aria-hidden="true">{CHEVRON}</span>
+          </KPopover.Trigger>
+        </Show>
+
+        <Show when={layer.mount()} keyed>
+          {(mount) => (
+            <KPopover.Portal mount={mount}>
+              <KPopover.Content
+                ref={dismiss.ref}
+                class="zylem-menu-button__panel"
+                onInteractOutside={dismiss.onInteractOutside}
+              >
+                {props.menu(() => setOpen(false))}
+              </KPopover.Content>
+            </KPopover.Portal>
+          )}
+        </Show>
+      </KPopover.Root>
+    </div>
+  );
+}

package/src/components/Property/Property.tsx

@@ -25,17 +25,19 @@ export function PropertyList(props: PropertyListProps) {
 
 export interface PropertyRowProps {
   label: string;
+  // Optional props accept an explicit `undefined` so callers compiled with
+  // `exactOptionalPropertyTypes` can forward their own optional props directly.
   /** The value to display. Can be a string, number, or JSX element. */
-  value?: string | number | JSX.Element;
+  value?: string | number | JSX.Element | undefined;
   /** If true, treat string values as paths and truncate long ones. */
-  isPath?: boolean;
+  isPath?: boolean | undefined;
   /** Maximum path segments to show (default: 3). */
-  maxPathSegments?: number;
+  maxPathSegments?: number | undefined;
   /** Called with the full value when a truncated path is clicked. */
-  onPathClick?: (fullValue: string) => void;
-  valueClass?: string;
+  onPathClick?: ((fullValue: string) => void) | undefined;
+  valueClass?: string | undefined;
   /** Children can be used instead of value for complex content. */
-  children?: JSX.Element;
+  children?: JSX.Element | undefined;
 }
 
 function truncatePath(

package/src/components/SearchInput/SearchInput.tsx

@@ -8,6 +8,8 @@ export interface SearchInputProps {
   class?: string;
   'aria-label'?: string;
   onKeyDown?: JSX.EventHandlerUnion<HTMLInputElement, KeyboardEvent>;
+  /** Handle on the input itself, for callers that need to focus it. */
+  ref?: (element: HTMLInputElement) => void;
 }
 
 /**
@@ -19,6 +21,7 @@ export function SearchInput(props: SearchInputProps) {
       <Search class="zylem-search-icon" />
       <input
         type="search"
+        ref={props.ref}
         class="zylem-field zylem-search-input"
         value={props.value ?? ''}
         placeholder={props.placeholder ?? 'Search...'}

package/src/components/Select/Select.css.ts

@@ -31,7 +31,7 @@ globalStyle('.zylem-select-trigger[data-expanded] .zylem-select-icon', {
 });
 
 globalStyle('.zylem-select-content', {
-  zIndex: 10000,
+  zIndex: vars.layers.menu,
   borderRadius: vars.radii.control,
   border: '1px solid rgba(97, 166, 232, 0.45)',
   background: vars.material.glassPanelDark,

package/src/components/Select/Select.tsx

@@ -1,5 +1,6 @@
 import { Select as KSelect } from '@kobalte/core';
 import { Show } from 'solid-js';
+import { createDismissGuard, useLayer } from '../../layers';
 
 export interface SelectOption {
   value: string;
@@ -22,6 +23,8 @@ export interface SelectProps {
  * HyperGlass select: inset glass trigger opening a floating glass sheet.
  */
 export function Select(props: SelectProps) {
+  const layer = useLayer('menu');
+  const dismiss = createDismissGuard();
   const selected = () =>
     props.options.find((option) => option.value === props.value) ?? null;
 
@@ -50,6 +53,7 @@ export function Select(props: SelectProps) {
         <KSelect.Label class="zylem-field-label">{props.label}</KSelect.Label>
       </Show>
       <KSelect.Trigger
+        ref={layer.anchorRef}
         class="zylem-field zylem-select-trigger"
         aria-label={props.label}
       >
@@ -58,11 +62,19 @@ export function Select(props: SelectProps) {
         </KSelect.Value>
         <KSelect.Icon class="zylem-select-icon">▼</KSelect.Icon>
       </KSelect.Trigger>
-      <KSelect.Portal>
-        <KSelect.Content class="zylem-select-content">
-          <KSelect.Listbox class="zylem-select-listbox zylem-scroll" />
-        </KSelect.Content>
-      </KSelect.Portal>
+      <Show when={layer.mount()} keyed>
+        {(mount) => (
+          <KSelect.Portal mount={mount}>
+            <KSelect.Content
+              ref={dismiss.ref}
+              class="zylem-select-content"
+              onInteractOutside={dismiss.onInteractOutside}
+            >
+              <KSelect.Listbox class="zylem-select-listbox zylem-scroll" />
+            </KSelect.Content>
+          </KSelect.Portal>
+        )}
+      </Show>
     </KSelect.Root>
   );
 }

package/src/components/ToolbarButton/ToolbarButton.css.ts

@@ -38,6 +38,9 @@ globalStyle('.zylem-toolbar-btn:hover', {
 globalStyle('.zylem-toolbar-btn:active', {
   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-toolbar-btn:focus-visible', {

package/src/components/ToolbarButton/ToolbarButton.tsx

@@ -1,5 +1,6 @@
 import { Button as KButton, Tooltip as KTooltip } from '@kobalte/core';
-import type { JSX } from 'solid-js';
+import { Show, type JSX } from 'solid-js';
+import { useLayer } from '../../layers';
 
 export interface ToolbarButtonProps {
   label: string;
@@ -13,11 +14,16 @@ export interface ToolbarButtonProps {
 /**
  * HyperGlass toolbar button: square glass icon button with a tooltip.
  * Selected state renders as a live-green jewel.
+ *
+ * The tooltip portals into the layer container for its own tree, so it stays
+ * styled when the toolbar lives inside a web component's shadow root.
  */
 export function ToolbarButton(props: ToolbarButtonProps) {
+  const layer = useLayer('tooltip');
+
   return (
     <KTooltip.Root openDelay={400}>
-      <KTooltip.Trigger as="span">
+      <KTooltip.Trigger as="span" ref={layer.anchorRef}>
         <KButton.Root
           aria-label={props.label}
           onClick={props.onClick}
@@ -32,11 +38,15 @@ export function ToolbarButton(props: ToolbarButtonProps) {
           {props.children}
         </KButton.Root>
       </KTooltip.Trigger>
-      <KTooltip.Portal>
-        <KTooltip.Content class="zylem-tooltip">
-          {props.label}
-        </KTooltip.Content>
-      </KTooltip.Portal>
+      <Show when={layer.mount()} keyed>
+        {(mount) => (
+          <KTooltip.Portal mount={mount}>
+            <KTooltip.Content class="zylem-tooltip">
+              {props.label}
+            </KTooltip.Content>
+          </KTooltip.Portal>
+        )}
+      </Show>
     </KTooltip.Root>
   );
 }

package/src/components/Tooltip/Tooltip.css.ts

@@ -7,7 +7,8 @@ const enter = keyframes({
 });
 
 globalStyle('.zylem-tooltip', {
-  zIndex: 10000,
+  position: 'relative',
+  zIndex: vars.layers.tooltip,
   maxWidth: '260px',
   padding: `${vars.spacing.xs} ${vars.spacing.sm}`,
   borderRadius: vars.radii.control,
@@ -19,6 +20,8 @@ globalStyle('.zylem-tooltip', {
   color: vars.colors.text,
   fontFamily: vars.typography.fontFamily,
   fontSize: `calc(${vars.typography.fontSize} - 1px)`,
+  fontWeight: 600,
+  letterSpacing: '0.02em',
   pointerEvents: 'none',
   '@supports': {
     'not (backdrop-filter: blur(1px))': {

package/src/components/Tooltip/Tooltip.tsx

@@ -1,5 +1,6 @@
 import { Tooltip as KTooltip } from '@kobalte/core';
-import type { JSX } from 'solid-js';
+import { Show, type JSX } from 'solid-js';
+import { useLayer } from '../../layers';
 
 export interface TooltipProps {
   /** Tooltip body. */
@@ -11,17 +12,34 @@ export interface TooltipProps {
 }
 
 /**
- * HyperGlass tooltip: small floating glass sheet.
+ * HyperGlass tooltip: small floating glass sheet, portaled above page chrome
+ * so it is not trapped by local stacking contexts (grids, panels, etc.).
+ *
+ * The portal target is resolved from the trigger rather than assumed to be
+ * `document.body`, so a tooltip inside a web component's shadow root still
+ * picks up the styles injected there.
  */
 export function Tooltip(props: TooltipProps) {
+  const layer = useLayer('tooltip');
+
   return (
     <KTooltip.Root placement={props.placement} openDelay={props.openDelay ?? 400}>
-      <KTooltip.Trigger as="span">{props.children}</KTooltip.Trigger>
-      <KTooltip.Portal>
-        <KTooltip.Content class="zylem-tooltip">
-          {props.content}
-        </KTooltip.Content>
-      </KTooltip.Portal>
+      <KTooltip.Trigger
+        as="span"
+        ref={layer.anchorRef}
+        style={{ display: 'flex', width: '100%', height: '100%', 'min-width': 0 }}
+      >
+        {props.children}
+      </KTooltip.Trigger>
+      <Show when={layer.mount()}>
+        {(mount) => (
+          <KTooltip.Portal mount={mount()}>
+            <KTooltip.Content class="zylem-tooltip">
+              {props.content}
+            </KTooltip.Content>
+          </KTooltip.Portal>
+        )}
+      </Show>
     </KTooltip.Root>
   );
 }

package/src/components/WindowControls/WindowControls.tsx

@@ -4,14 +4,16 @@ import PanelBottomOpen from 'lucide-solid/icons/panel-bottom-open';
 import X from 'lucide-solid/icons/x';
 
 export interface WindowControlsProps {
-  onClose?: () => void;
-  onCollapse?: () => void;
+  // Optional props accept an explicit `undefined` so callers compiled with
+  // `exactOptionalPropertyTypes` can forward their own optional props directly.
+  onClose?: (() => void) | undefined;
+  onCollapse?: (() => void) | undefined;
   /** Show the "expand" collapse icon when the panel is collapsed. */
-  collapsed?: boolean;
+  collapsed?: boolean | undefined;
   /** Accessible label/title for the close button (default "Close panel"). */
-  closeLabel?: string;
+  closeLabel?: string | undefined;
   /** Forwarded as data-testid on the close button. */
-  closeTestId?: string;
+  closeTestId?: string | undefined;
 }
 
 /**

package/src/components/index.ts

@@ -5,6 +5,24 @@
  * vanilla-extract recipes/styles driven by the Zylem token system.
  */
 
+// Layering. Overlays here use it by default; consumers need it only to scope a
+// subtree (a modal) or to layer their own chrome on the same ladder.
+export {
+  LayerProvider,
+  LayerScope,
+  useLayer,
+  resolveLayerRoot,
+  ensureLayerContainer,
+  createDismissGuard,
+  LAYER_PORTAL_CLASS,
+  type DismissalEvent,
+  type DismissGuard,
+  type LayerProviderProps,
+  type LayerScopeProps,
+  type LayerTier,
+  type ResolvedLayer,
+} from '../layers';
+
 // Primitives
 export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from './Button/Button';
 export { ToolbarButton, type ToolbarButtonProps } from './ToolbarButton/ToolbarButton';
@@ -64,6 +82,15 @@ export {
   type SidebarItemProps,
 } from './Sidebar/Sidebar';
 export { Card, type CardProps } from './Card/Card';
+export { MenuButton, type MenuButtonProps } from './MenuButton/MenuButton';
+export { ItemPicker, type ItemPickerProps } from './ItemPicker/ItemPicker';
+export {
+  filterItems,
+  groupItems,
+  UNGROUPED_LABEL,
+  type PickerItem,
+  type PickerGroup,
+} from './ItemPicker/filter-items';
 export { SearchInput, type SearchInputProps } from './SearchInput/SearchInput';
 export { EmptyState, type EmptyStateProps } from './EmptyState/EmptyState';
 export { ScrollArea, type ScrollAreaProps } from './ScrollArea/ScrollArea';

package/src/global/detached-panel.css.ts

@@ -74,7 +74,10 @@ globalStyle('.accordion-drag-ghost', {
   backdropFilter: `blur(${vars.effects.blurSm})`,
   boxShadow: `0 8px 24px rgba(0, 0, 0, 0.5), ${vars.effects.glowDanger}`,
   position: 'fixed',
-  zIndex: 9999,
+  // Top of the panel tier: the ghost follows the cursor over every panel,
+  // including the one it was torn from, but is still page furniture rather than
+  // an overlay, so it stays under modals and menus.
+  zIndex: `calc(${vars.layers.panel} + 900)`,
   pointerEvents: 'none',
 });
 

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

@@ -155,42 +155,64 @@ globalStyle('.zylem-section-title', {
   textTransform: 'uppercase',
 });
 
-/** Entity grid: index-card jewel tiles. */
+/** Entity grid: glossy glass icon tiles. Type names use portaled `.zylem-tooltip`. */
 globalStyle('.entity-grid', {
   display: 'grid',
   gridTemplateColumns: 'repeat(auto-fill, minmax(40px, 1fr))',
   gap: vars.spacing.xs,
 });
 
-globalStyle('.entity-grid-item', {
+/** Tooltip/trigger wrappers must fill the cell so the icon button keeps a square. */
+globalStyle('.entity-grid > *', {
+  display: 'flex',
+  minWidth: 0,
   aspectRatio: '1',
+});
+
+globalStyle('.entity-grid-item', {
+  position: 'relative',
+  flex: 1,
+  width: '100%',
+  height: '100%',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  background: vars.material.glassPanelDark,
-  border: '1px solid rgba(97, 166, 232, 0.32)',
+  background: vars.material.buttonGlass,
+  border: '1px solid rgba(150, 210, 255, 0.5)',
   borderRadius: vars.radii.control,
-  boxShadow:
-    'inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 6px rgba(0,0,0,0.3)',
+  boxShadow: vars.effects.shadowButton,
   cursor: 'pointer',
-  transition: `background ${vars.motion.fast} ${vars.motion.easeOut}, border-color ${vars.motion.fast} ${vars.motion.easeOut}, transform ${vars.motion.fast} ${vars.motion.easeOut}, box-shadow ${vars.motion.fast} ${vars.motion.easeOut}`,
+  color: vars.colors.textSecondary,
+  transition: `background ${vars.motion.fast} ${vars.motion.easeOut}, border-color ${vars.motion.fast} ${vars.motion.easeOut}, transform ${vars.motion.fast} ${vars.motion.easeOut}, box-shadow ${vars.motion.fast} ${vars.motion.easeOut}, filter ${vars.motion.fast} ${vars.motion.easeOut}`,
 });
 
 globalStyle('.entity-grid-item:hover', {
   background: vars.material.buttonGlassHover,
-  borderColor: 'rgba(150, 210, 255, 0.6)',
-  boxShadow: `inset 0 1px 0 rgba(255,255,255,0.3), ${vars.effects.glowPrimary}`,
+  borderColor: 'rgba(150, 210, 255, 0.75)',
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowPrimary}`,
   transform: 'translateY(-1px)',
+  color: '#F4FAFF',
 });
 
 globalStyle('.entity-grid-item:active', {
   transform: 'translateY(1px)',
+  filter: 'brightness(0.92)',
+  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('.entity-grid-item:focus-visible', {
+  outline: 'none',
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.focusRing}`,
 });
 
 globalStyle('.entity-icon', {
   width: '20px',
   height: '20px',
-  color: vars.colors.textSecondary,
+  color: 'currentColor',
+  position: 'relative',
+  zIndex: 1,
+  filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.55))',
 });
 
 globalStyle('.entity-grid-item:hover .entity-icon', {

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

@@ -3,12 +3,14 @@ import { vars } from '../theme.css';
 
 /**
  * HyperGlass foundation styles: app root background treatment, visible
- * Aqua-inspired glass scrollbars, and shared focus rings. Component-level
- * glass treatments live in each component's recipe; this file only covers
- * page-level chrome.
+ * Aqua-inspired glass scrollbars, shared focus rings, and a light CodePen-
+ * inspired specular sheen on glossy controls. Component-level glass
+ * treatments live in each component's recipe; this file covers page-level
+ * chrome plus shared lighting primitives.
  */
 
-// Root surface: dark navy with a soft radial glow and a faint blueprint grid.
+// Root surface: dark navy with a soft radial glow, angled light wash, and a
+// faint blueprint grid.
 globalStyle('.zylem-hyperglass-root', {
   minHeight: '100vh',
   color: vars.colors.text,
@@ -16,10 +18,11 @@ globalStyle('.zylem-hyperglass-root', {
   backgroundColor: vars.colors.background,
   backgroundImage: `
     radial-gradient(circle at 30% 0%, rgba(97, 166, 232, 0.18), transparent 32%),
+    linear-gradient(-75deg, rgba(255, 255, 255, 0) 0%, rgba(97, 166, 232, 0.07) 42%, rgba(255, 255, 255, 0) 68%),
     linear-gradient(rgba(97, 166, 232, 0.045) 1px, transparent 1px),
     linear-gradient(90deg, rgba(97, 166, 232, 0.045) 1px, transparent 1px)
   `,
-  backgroundSize: '100% 100%, 24px 24px, 24px 24px',
+  backgroundSize: '100% 100%, 100% 100%, 24px 24px, 24px 24px',
 });
 
 // Visible focus ring on any keyboard-focused interactive element.
@@ -31,6 +34,78 @@ globalStyle(
   },
 );
 
+/**
+ * Specular sheen on glossy interactive hosts — a soft diagonal band that
+ * nudges on hover and shifts toward the top on press (CodePen glass lighting,
+ * dialed down for HyperGlass). Uses ::before so label/icon content paints above.
+ * Applied on the control classes themselves (not under `.zylem-hyperglass-root`)
+ * so portaled surfaces like Dialog keep the same look.
+ * Pseudo selectors are listed per-host (comma lists don't inherit a trailing ::before).
+ */
+// Absolute-positioned hosts (e.g. `.zylem-console-clear`) already form a
+// containing block for the sheen — don't override them to `relative` or they
+// stretch in flex parents. `.entity-grid-item` already sets `relative` in
+// editor-base.
+globalStyle('.zylem-button:not(.zylem-console-clear), .zylem-toolbar-btn', {
+  position: 'relative',
+});
+
+globalStyle(
+  '.zylem-button::before, .zylem-toolbar-btn::before, .entity-grid-item::before',
+  {
+    content: '""',
+    position: 'absolute',
+    inset: 0,
+    borderRadius: 'inherit',
+    pointerEvents: 'none',
+    background: `linear-gradient(
+    -45deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.42) 40%,
+    rgba(255, 255, 255, 0.42) 50%,
+    rgba(255, 255, 255, 0) 55%
+  )`,
+    backgroundSize: '200% 200%',
+    backgroundPosition: '0% 50%',
+    backgroundRepeat: 'no-repeat',
+    mixBlendMode: 'screen',
+    opacity: 0.4,
+    transition: `background-position ${vars.motion.normal} ${vars.motion.easeOut}, opacity ${vars.motion.fast} ${vars.motion.easeOut}`,
+    '@media': {
+      '(prefers-reduced-motion: reduce)': {
+        transition: 'none',
+        backgroundPosition: '0% 50%',
+      },
+    },
+  },
+);
+
+globalStyle(
+  '.zylem-button:hover:not([disabled])::before, .zylem-toolbar-btn:hover:not([disabled])::before, .entity-grid-item:hover::before',
+  {
+    backgroundPosition: '25% 50%',
+    opacity: 0.5,
+    '@media': {
+      '(prefers-reduced-motion: reduce)': {
+        backgroundPosition: '0% 50%',
+      },
+    },
+  },
+);
+
+globalStyle(
+  '.zylem-button:active:not([disabled])::before, .zylem-toolbar-btn:active:not([disabled])::before, .entity-grid-item:active::before',
+  {
+    backgroundPosition: '50% 15%',
+    opacity: 0.58,
+    '@media': {
+      '(prefers-reduced-motion: reduce)': {
+        backgroundPosition: '0% 50%',
+      },
+    },
+  },
+);
+
 /**
  * Glass scrollbars — apply `.zylem-scroll` (or rely on the root cascade for
  * `.zylem-hyperglass-root`) to get the visible Aqua-style rail.