@takazudo/zdtp 0.6.1 → 0.7.0

package/CHANGELOG.md

@@ -4,6 +4,40 @@ All notable changes to `@takazudo/zdtp` are documented in this file.
 
 The format is based on Keep a Changelog, and release notes are generated from the changelog MDX pages.
 
+## [Unreleased]
+
+No unreleased changes yet.
+
+## [0.7.0] - 2026-09-09
+
+### Breaking Changes
+
+- feat(dashboard): separate chrome theme from specimen mode (84d4d8a). `TokenDashboard` no longer derives its chrome appearance from `mode`: with `mode="dark"` the inventory scope previously carried `color-scheme: dark`, and now only `.zdtp-dashboard__specimen` does, with chrome defaulting to light. **Migration**: pass the new `chrome="dark"` prop alongside `mode="dark"` to restore the previous dark chrome, or `chrome="host"` to inherit the host's effective color scheme.
+
+### Features
+
+- feat: resolve CSS color expressions in host context ([#919](https://github.com/Takazudo/zudo-design-token-panel/issues/919)) (30dbabc)
+- feat: require explicit conversion before editing color expressions (ffad163)
+
+### Fixed
+
+- Fix invalid CSS color probe fallback (a1d468f)
+- Reject unchanged invalid color declarations before measurement (27fbc70)
+
+### Other Changes
+
+- docs(dashboard): document host chrome and add static theme examples (1b8e26d)
+- docs(dashboard): document chrome contract (83778e8)
+- test: cover dashboard chrome themes in browser (5682c72)
+- test: strengthen dashboard specimen isolation assertions (cc62be6)
+- test: prove dashboard host chrome from packed consumer (7a251f0)
+- test(evidence): record dashboard chrome integration proof (690af1f)
+- test: wire semantic expression picker modes (90af515)
+- Cover empty CSS color resolution (18f45ba)
+- docs: record reference-aware color picker fix (b1bb048)
+- test: record reference-aware picker confirmation (045603b)
+- docs: correct picker evidence provenance (89e0322)
+
 ## [0.6.1] - 2026-09-08
 
 ### Features

package/PORTABLE-CONTRACT.md

@@ -1743,15 +1743,18 @@ on across a release bump.
 
 ## 12. Static token dashboard
 
-This entry is available from v0.6.1. It does
-not change the `configurePanel` or persistence contracts above.
+This entry is available from v0.6.1. The `chrome` prop is **unreleased (next
+release)** and is not supported in v0.6.1. It does not change the
+`configurePanel` or persistence contracts above.
 
 `@takazudo/zdtp/dashboard` exports the Preact `TokenDashboard` component and
-`TokenDashboardProps`, `DashboardMode`, `DashboardPreviewKind`, `TabConfig`,
-`TierConfig`, and `TierItem` types. The internal value model is not a public API.
+`TokenDashboardProps`, `DashboardMode`, `DashboardChrome`,
+`DashboardPreviewKind`, `TabConfig`, `TierConfig`, and `TierItem` types. The
+internal value model is not a public API.
 
 ```ts
 export type DashboardMode = 'light' | 'dark';
+export type DashboardChrome = 'light' | 'dark' | 'host';
 export type DashboardPreviewKind =
   | 'bar' | 'size' | 'line-height' | 'family' | 'weight' | 'radius' | 'duration'
   | 'color' | 'shadow' | 'text';
@@ -1759,6 +1762,7 @@ export type DashboardPreviewKind =
 export interface TokenDashboardProps {
   tabs: readonly TabConfig[];
   mode?: DashboardMode; // default: light
+  chrome?: DashboardChrome; // default: light; unreleased (next release)
   title?: string; // default: Token dashboard
   previewText?: string; // static typography passage; default English/Japanese prose
   id?: string; // optional root ID; caller owns uniqueness
@@ -1775,9 +1779,15 @@ export interface TokenDashboardProps {
   JavaScript has no CSS side-effect import; the host must include this asset
   through its CSS build or a static stylesheet link. It is not appended to the
   existing panel stylesheet, which is unnecessary for a dashboard-only page.
-- Each instance declares known token variables inside its inventory and sets
-  `color-scheme` to its explicit `mode`. It never writes to `:root` or host
-  state. Dashboard chrome styles are independent of inventory variables.
+- The dashboard root's chrome appearance follows `chrome`: `light` and `dark`
+  fix the shell scheme, while `host` inherits the host's effective
+  `color-scheme` and requires the host to set it on an ancestor. The dashboard
+  uses no media query, so an explicit application theme takes precedence over
+  the OS preference. Inventory specimens retain their own `color-scheme` from
+  `mode`, which also selects declared per-mode defaults. Chrome and specimens
+  are independent; chrome uses package-owned CSS custom properties and never
+  reads inventory variables. The component never writes to `:root` or host
+  state.
 - Tabs, tiers, and rows render in input order. All token rows remain visible;
   no collapsed sections or automatic IDs are introduced. Empty input is valid.
   Notes-only tabs are omitted, and arbitrary notes HTML is never injected.

package/README.md

@@ -43,7 +43,8 @@ walkthrough and the shortcut table.
 ## Static token dashboard
 
 Import `TokenDashboard` from `@takazudo/zdtp/dashboard` to render the same tab
-manifest on a plain page. This entry is available from v0.6.1. The [live workspace demo](https://zdtp-playground.zudolab.dev/dashboard/)
+manifest on a plain page. This entry is available from v0.6.1. The `chrome`
+prop is **unreleased (next release)** and is not supported in v0.6.1. The [live workspace demo](https://zdtp-playground.zudolab.dev/dashboard/)
 shows both modes and a compact embedded instance.
 
 ```tsx
@@ -92,9 +93,18 @@ public assets directory and add a stylesheet link. The
 [static dashboard recipe](https://zdtp.zudolab.dev/docs/recipes/static-token-dashboard/)
 provides complete data and CSS-copy examples.
 
-Optional props are `mode` (`light` by default), `title`, caller-owned unique
-`id`, `previewText`, and `previewOverrides` keyed by CSS variable (for example,
-a text-editor shadow can use `'shadow'`). Existing `TierConfig.preview` metadata is reused.
+Optional props are `mode` (`light` by default), `chrome` (`light` by default;
+**unreleased for the next release**), `title`, caller-owned unique `id`,
+`previewText`, and `previewOverrides` keyed by CSS variable (for example, a
+text-editor shadow can use `'shadow'`). Existing `TierConfig.preview` metadata is reused.
+
+`chrome="light"` and `chrome="dark"` fix the dashboard shell appearance;
+`chrome="host"` inherits the host's effective `color-scheme` and requires the
+host to set it on an ancestor. Chrome is independent of `mode`: `mode` selects
+declared per-mode defaults and each specimen's own `color-scheme`, while chrome
+uses package-owned CSS custom properties and never reads inventory variables.
+The dashboard uses no media query, so an explicit application theme wins over
+the OS preference.
 
 Spacing uses actual-size rulers with local scrolling. Nonnegative px/rem, zero,
 and resolved direct aliases are supported; other lengths keep a readable fallback.
@@ -110,9 +120,10 @@ The inventory uses **declared defaults**: item defaults, per-mode
 named color presets, panel initialization, or persisted edits. CSS expressions
 remain expressions; samples depend on browser layout and available fonts.
 Missing/context-dependent references and invalid declarations remain readable
-with diagnostics rather than misleading samples. Preview variables and
-`color-scheme` are local to each instance; the component never writes to
-`:root`. Arbitrary notes HTML and URL/mask assets are not rendered or loaded.
+with diagnostics rather than misleading samples. The dashboard root's chrome
+scheme follows `chrome`, while each specimen's `color-scheme` follows `mode`;
+both are local to the instance, and the component never writes to `:root`.
+Arbitrary notes HTML and URL/mask assets are not rendered or loaded.
 
 This checkpoint provides a Preact component. An HTML-export API/CLI, React
 adapter, and automatic panel-state synchronization are outside its scope.

package/dist/astro/host-adapter.js

@@ -1,5 +1,5 @@
 import { c as y, g as m, a as w, b, i as P } from "../panel-config-Crn5QJGy.js";
-import { g, Z as A } from "../tweak-state-Dzr5kDhX.js";
+import { g, Z as A } from "../tweak-state-Dhjqig0C.js";
 import { s as D, l as E, a as _, i as c, r as f, c as k, b as S, d } from "../autoload-state-CGnis85c.js";
 import { READABLE_STATE_KEY_SUFFIXES as T } from "../constants.js";
 const u = "tokenpanel-config";

package/dist/components/color-picker/color-field.d.ts

@@ -18,6 +18,8 @@ export interface ColorFieldProps {
      * with the native <input type="color"> path).
      */
     valueFormat?: ColorPickerValueFormat;
+    /** Host color scheme used to resolve CSS expressions. */
+    resolveMode?: 'light' | 'dark';
     /** Display label shown in the picker header and aria-label. */
     label: string;
     /** Optional CSS custom property name (e.g. `--my-color`). Used for aria-label. */
@@ -33,5 +35,5 @@ export interface ColorFieldProps {
  *
  * Readonly items show the swatch but do not open the picker on interaction.
  */
-export declare function ColorField({ value, onChange, valueFormat, label, cssVar, readonly: isReadonly, }: ColorFieldProps): import("preact").JSX.Element;
+export declare function ColorField({ value, onChange, valueFormat, resolveMode, label, cssVar, readonly: isReadonly, }: ColorFieldProps): import("preact").JSX.Element;
 export default ColorField;

package/dist/components/color-picker/color-picker.d.ts

@@ -48,6 +48,8 @@ export interface ColorPickerProps {
      * with existing callers that pass no value).
      */
     valueFormat?: ColorPickerValueFormat;
+    /** Host color scheme used to resolve CSS expressions. */
+    resolveMode?: 'light' | 'dark';
     /** Optional label rendered in the picker header. */
     label?: string;
     /**
@@ -93,5 +95,5 @@ export declare function usePopoverClose(containerRef: React.RefObject<HTMLElemen
  * The parent renders `{isOpen && <ColorPicker ... />}`. This component does
  * NOT render a trigger swatch and does NOT use createPortal.
  */
-export declare function ColorPicker({ color, onChange, valueFormat, label, defaultMode, anchorRef, onClose, }: ColorPickerProps): JSX.Element;
+export declare function ColorPicker({ color, onChange, valueFormat, resolveMode, label, defaultMode, anchorRef, onClose, }: ColorPickerProps): JSX.Element;
 export default ColorPicker;

package/dist/components/color-picker/custom-slider.d.ts

@@ -12,6 +12,7 @@ export interface SliderConfig {
     format: (v: number) => string;
 }
 export interface CustomSliderProps {
+    disabled?: boolean;
     config: SliderConfig;
     value: number;
     /** CSS gradient string applied to the track div's background. */
@@ -20,5 +21,5 @@ export interface CustomSliderProps {
     onDragStart: () => void;
     onDragEnd: () => void;
 }
-export declare function CustomSlider({ config, value, gradient, onChange, onDragStart, onDragEnd, }: CustomSliderProps): JSX.Element;
+export declare function CustomSlider({ disabled, config, value, gradient, onChange, onDragStart, onDragEnd, }: CustomSliderProps): JSX.Element;
 export default CustomSlider;

package/dist/dashboard/index.d.ts

@@ -1,4 +1,4 @@
 export { TokenDashboard } from "./token-dashboard.js";
 export type { TokenDashboardProps, DashboardPreviewKind } from "./token-dashboard.js";
-export type { DashboardMode } from "./types.js";
+export type { DashboardMode, DashboardChrome } from "./types.js";
 export type { TabConfig, TierConfig, TierItem } from "../tokens/tier-model.js";