@zylem/ui 0.9.5 → 0.9.6

package/package.json

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

package/src/components/WindowControls/WindowControls.tsx

@@ -1,8 +1,8 @@
 import { Show } from 'solid-js';
 import ChevronDown from 'lucide-solid/icons/chevron-down';
 import ChevronUp from 'lucide-solid/icons/chevron-up';
-import Dock from 'lucide-solid/icons/dock';
 import X from 'lucide-solid/icons/x';
+import { Dock } from '../../icons';
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu';
 
 /** Where a panel sits. `float` leaves it free of the top and bottom edges. */
@@ -45,7 +45,7 @@ export function WindowControls(props: WindowControlsProps) {
             triggerLabel="Dock panel"
             triggerClass="zylem-window-control zylem-window-control--dock"
             placement="bottom-end"
-            trigger={<Dock size={11} strokeWidth={2.5} aria-hidden="true" />}
+            trigger={<Dock size={11} aria-hidden="true" />}
             items={DOCK_OPTIONS.map((option) => ({
               id: option.id,
               label: option.label,

package/src/components/index.ts

@@ -237,10 +237,12 @@ export {
   Perspective,
   SideviewPerspective,
   TopDownPerspective,
+  Dock,
   cameraIconNodes,
   createZylemIcon,
   type CameraIcon,
   type CameraIconName,
   type IconNode,
+  type ZylemIconOptions,
   type ZylemIconProps,
 } from '../icons';

package/src/icons/create-icon.tsx

@@ -21,6 +21,19 @@ function kebab(name: string): string {
   return name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
 }
 
+export interface ZylemIconOptions {
+  /**
+   * Replaces the `zylem-icon` class. Toolbar icons keep that class, which
+   * sizes them to 18px; chrome glyphs omit it so `size` wins, the way a
+   * Lucide chevron does.
+   */
+  className?: string;
+  /** Draw with `currentColor` fill instead of a stroke. */
+  filled?: boolean;
+  /** Defaults to the 24×24 Lucide grid. */
+  viewBox?: string;
+}
+
 /**
  * Solid icon factory matching lucide-solid's size / color / strokeWidth
  * props so these glyphs drop into the same toolbar buttons and CSS.
@@ -28,6 +41,7 @@ function kebab(name: string): string {
 export function createZylemIcon(
   name: string,
   iconNode: IconNode,
+  options?: ZylemIconOptions,
 ): Component<ZylemIconProps> {
   const Icon: Component<ZylemIconProps> = (props) => {
     const [local, rest] = splitProps(props, [
@@ -46,17 +60,22 @@ export function createZylemIcon(
       return width;
     };
     const classes = () =>
-      ['zylem-icon', `zylem-icon-${kebab(name)}`, local.class]
+      [options?.className ?? 'zylem-icon', `zylem-icon-${kebab(name)}`, local.class]
         .filter((value) => Boolean(value))
         .join(' ');
 
+    const filled = options?.filled === true;
+    const paint = () => local.color ?? 'currentColor';
+
     return (
       <svg
         {...DEFAULTS}
+        viewBox={options?.viewBox ?? DEFAULTS.viewBox}
         width={size()}
         height={size()}
-        stroke={local.color ?? 'currentColor'}
-        stroke-width={strokeWidth()}
+        fill={filled ? paint() : 'none'}
+        stroke={filled ? 'none' : paint()}
+        stroke-width={filled ? 0 : strokeWidth()}
         class={classes()}
         aria-hidden="true"
         {...rest}

package/src/icons/icon-nodes.ts

@@ -63,6 +63,16 @@ export const GameCameraNode: IconNode = [
   ['path', { d: 'M14 10h.01M14 14h.01' }],
 ];
 
+/** Filled window frame for the dock control. 16×16, not the 24 stroke grid. */
+export const DockNode: IconNode = [
+  [
+    'path',
+    {
+      d: 'M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 14.25 15H1.75A1.75 1.75 0 0 1 0 13.25ZM14.5 6h-13v7.25c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25Zm-6-3.5v2h6V2.75a.25.25 0 0 0-.25-.25ZM5 2.5v2h2v-2Zm-3.25 0a.25.25 0 0 0-.25.25V4.5h2v-2Z',
+    },
+  ],
+];
+
 export const cameraIconNodes = {
   perspective: PerspectiveNode,
   'sideview-perspective': SideviewPerspectiveNode,

package/src/icons/index.ts

@@ -1,6 +1,7 @@
 import type { Component } from 'solid-js';
 import { createZylemIcon, type ZylemIconProps } from './create-icon';
 import {
+  DockNode,
   FreePerspectiveNode,
   GameCameraNode,
   IsometricPerspectiveNode,
@@ -19,7 +20,7 @@ export {
   SideviewPerspectiveNode,
   TopDownPerspectiveNode,
 } from './icon-nodes';
-export { createZylemIcon, type ZylemIconProps } from './create-icon';
+export { createZylemIcon, type ZylemIconOptions, type ZylemIconProps } from './create-icon';
 
 export type CameraIcon = Component<ZylemIconProps>;
 
@@ -44,6 +45,13 @@ export const FreePerspective = createZylemIcon('FreePerspective', FreePerspectiv
 /** Recorder with controller buttons (game camera). */
 export const GameCamera = createZylemIcon('GameCamera', GameCameraNode);
 
+/** Filled window frame. Skips the 18px toolbar metric so `size` matches a chevron. */
+export const Dock = createZylemIcon('Dock', DockNode, {
+  className: 'zylem-dock',
+  filled: true,
+  viewBox: '0 0 16 16',
+});
+
 export const CAMERA_ICONS = [
   { name: 'perspective', label: 'Perspective', Icon: Perspective },
   { name: 'sideview-perspective', label: 'Side view', Icon: SideviewPerspective },