@hjmds/design-contracts 0.8.2

package/dist/foundations.js

@@ -0,0 +1,238 @@
+/** Numeric units are consumed as CSS pixels on web and density-independent points on native. */
+export const spacing = {
+    xxs: 4,
+    xs: 8,
+    sm: 12,
+    md: 16,
+    lg: 20,
+    xl: 24,
+    xxl: 32,
+    xxxl: 40,
+};
+export const radius = {
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+    full: 999,
+};
+/**
+ * Ordered fallbacks keep the contract platform-neutral: Web renderers join
+ * the list as a CSS stack, while native renderers select the first family
+ * available on the device instead of receiving a CSS-only string.
+ */
+export const fontFamily = {
+    ui: [
+        "Inter",
+        "Pretendard",
+        "-apple-system",
+        "BlinkMacSystemFont",
+        "Segoe UI",
+        "sans-serif",
+    ],
+    code: [
+        "ui-monospace",
+        "SFMono-Regular",
+        "Consolas",
+        "Liberation Mono",
+        "monospace",
+    ],
+};
+/** String weights translate unchanged to CSS and React Native text styles. */
+export const fontWeight = {
+    regular: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700",
+    heavy: "800",
+};
+/** Numeric tracking uses CSS pixels on Web and density-independent points on Native. */
+export const letterSpacing = {
+    tight: -0.2,
+    normal: 0,
+    wide: 0.2,
+};
+/** Renderers map the shared intent to `font-variant-numeric` / `fontVariant`. */
+export const numeric = {
+    proportional: "proportional-nums",
+    tabular: "tabular-nums",
+};
+export const typography = {
+    caption: { fontSize: 11, lineHeight: 16, fontWeight: fontWeight.regular },
+    label: { fontSize: 12, lineHeight: 18, fontWeight: fontWeight.semibold },
+    body: { fontSize: 14, lineHeight: 20, fontWeight: fontWeight.regular },
+    bodyLarge: { fontSize: 16, lineHeight: 24, fontWeight: fontWeight.regular },
+    title: { fontSize: 18, lineHeight: 26, fontWeight: fontWeight.bold },
+    titleLarge: { fontSize: 20, lineHeight: 28, fontWeight: fontWeight.heavy },
+    heading: { fontSize: 24, lineHeight: 32, fontWeight: fontWeight.heavy },
+};
+/**
+ * Document heading hierarchy without widening the established `TextVariant`
+ * union. Levels 3–5 reuse the existing semantic styles; larger levels are
+ * additive display roles for dense product pages and documentation.
+ */
+export const heading = {
+    level1: { fontSize: 40, lineHeight: 48, fontWeight: fontWeight.heavy },
+    level2: { fontSize: 32, lineHeight: 40, fontWeight: fontWeight.heavy },
+    level3: typography.heading,
+    level4: typography.titleLarge,
+    level5: typography.title,
+};
+/** Glyphs include icons and avatars; they do not inherit paragraph line-height. */
+export const glyph = {
+    xs: 14,
+    sm: 20,
+    md: 24,
+    lg: 28,
+    xl: 32,
+    xxl: 44,
+    xxxl: 48,
+};
+export const motion = {
+    fast: 120,
+    normal: 200,
+    slow: 320,
+};
+/**
+ * Curves are stored as normalized cubic-bezier tuples so CSS and native
+ * animation drivers can translate the same motion intent without sharing a
+ * renderer dependency.
+ */
+export const easing = {
+    standard: [0.2, 0, 0, 1],
+    enter: [0, 0, 0, 1],
+    exit: [0.3, 0, 1, 1],
+    emphasized: [0.2, 0, 0, 1],
+};
+/** Shared transition intent; renderers translate easing tuples to their animation API. */
+export const motionPreset = {
+    micro: {
+        duration: motion.fast,
+        easing: "standard",
+        reducedMotion: "instant",
+    },
+    enter: {
+        duration: motion.normal,
+        easing: "enter",
+        reducedMotion: "opacity",
+    },
+    exit: {
+        duration: motion.fast,
+        easing: "exit",
+        reducedMotion: "instant",
+    },
+    context: {
+        duration: motion.slow,
+        easing: "emphasized",
+        reducedMotion: "opacity",
+    },
+};
+/** Native renderers may use these values directly; web renderers use easing. */
+export const spring = {
+    responsive: { stiffness: 760, damping: 52, mass: 1 },
+    expressive: { stiffness: 520, damping: 38, mass: 1 },
+};
+/** Reusable state strengths. Components still decide which states are valid. */
+export const opacity = {
+    disabled: 0.5,
+    muted: 0.72,
+    pressed: 0.86,
+    dragged: 0.64,
+};
+/** Overlaying the content color at these strengths creates predictable states. */
+export const stateLayer = {
+    hover: 0.06,
+    focus: 0.08,
+    pressed: 0.1,
+    selected: 0.1,
+};
+export const stroke = {
+    subtle: 1,
+    default: 1,
+    strong: 2,
+    focus: 2,
+};
+export const control = {
+    minTouchTarget: 44,
+    buttonHeight: {
+        small: 36,
+        medium: 44,
+        large: 52,
+    },
+    buttonHitSlop: {
+        small: 4,
+        medium: 0,
+        large: 0,
+    },
+    fieldHeight: 44,
+    chipHeight: {
+        small: 36,
+        medium: 44,
+    },
+    selectionIndicator: 24,
+};
+/** Product renderers may narrow these widths, but should not invent new rhythm. */
+export const layout = {
+    pagePadding: {
+        compact: spacing.md,
+        regular: spacing.lg,
+        spacious: spacing.xl,
+    },
+    sectionGap: spacing.xl,
+    contentGap: spacing.md,
+    rowHeight: {
+        singleLine: 56,
+        twoLine: 68,
+    },
+    readingMaxWidth: 720,
+    contentMaxWidth: 1200,
+};
+/** Width thresholds use CSS pixels on Web and density-independent points on Native. */
+export const breakpoint = {
+    compact: 0,
+    medium: 600,
+    expanded: 960,
+    wide: 1280,
+};
+/** Shared stacking intent. Values remain sparse to leave room for app layers. */
+export const layer = {
+    base: 0,
+    sticky: 100,
+    dropdown: 400,
+    overlay: 800,
+    modal: 900,
+    tooltip: 950,
+    toast: 1000,
+};
+export const overlay = {
+    scrim: 0.6,
+    veil: 0.25,
+};
+/** Fixed backdrop contracts avoid renderer-specific names such as CSS `scrim`. */
+export const backdrop = {
+    modal: { color: "#000000", opacity: overlay.scrim },
+    veil: { color: "#000000", opacity: overlay.veil },
+};
+export const scrim = `rgba(0, 0, 0, ${overlay.scrim})`;
+/** Renderers translate this contract to box-shadow or native shadow/elevation properties. */
+export const shadow = {
+    raised: {
+        color: "#000000",
+        opacity: 0.08,
+        radius: 4,
+        offsetY: 1,
+    },
+    floating: {
+        color: "#000000",
+        opacity: 0.12,
+        radius: 12,
+        offsetY: 4,
+    },
+    overlay: {
+        color: "#000000",
+        opacity: 0.16,
+        radius: 24,
+        offsetY: 8,
+    },
+};
+//# sourceMappingURL=foundations.js.map

package/dist/foundations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundations.js","sourceRoot":"","sources":["../src/foundations.ts"],"names":[],"mappings":"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","sourcesContent":["/** Numeric units are consumed as CSS pixels on web and density-independent points on native. */\nexport const spacing = {\n  xxs: 4,\n  xs: 8,\n  sm: 12,\n  md: 16,\n  lg: 20,\n  xl: 24,\n  xxl: 32,\n  xxxl: 40,\n} as const;\n\nexport const radius = {\n  sm: 8,\n  md: 12,\n  lg: 16,\n  xl: 24,\n  full: 999,\n} as const;\n\n/**\n * Ordered fallbacks keep the contract platform-neutral: Web renderers join\n * the list as a CSS stack, while native renderers select the first family\n * available on the device instead of receiving a CSS-only string.\n */\nexport const fontFamily = {\n  ui: [\n    \"Inter\",\n    \"Pretendard\",\n    \"-apple-system\",\n    \"BlinkMacSystemFont\",\n    \"Segoe UI\",\n    \"sans-serif\",\n  ],\n  code: [\n    \"ui-monospace\",\n    \"SFMono-Regular\",\n    \"Consolas\",\n    \"Liberation Mono\",\n    \"monospace\",\n  ],\n} as const;\n\nexport type FontFamily = keyof typeof fontFamily;\n\n/** String weights translate unchanged to CSS and React Native text styles. */\nexport const fontWeight = {\n  regular: \"400\",\n  medium: \"500\",\n  semibold: \"600\",\n  bold: \"700\",\n  heavy: \"800\",\n} as const;\n\nexport type FontWeight = keyof typeof fontWeight;\nexport type FontWeightValue = (typeof fontWeight)[FontWeight];\n\n/** Numeric tracking uses CSS pixels on Web and density-independent points on Native. */\nexport const letterSpacing = {\n  tight: -0.2,\n  normal: 0,\n  wide: 0.2,\n} as const;\n\nexport type LetterSpacing = keyof typeof letterSpacing;\n\n/** Renderers map the shared intent to `font-variant-numeric` / `fontVariant`. */\nexport const numeric = {\n  proportional: \"proportional-nums\",\n  tabular: \"tabular-nums\",\n} as const;\n\nexport type NumericVariant = keyof typeof numeric;\n\nexport const typography = {\n  caption: { fontSize: 11, lineHeight: 16, fontWeight: fontWeight.regular },\n  label: { fontSize: 12, lineHeight: 18, fontWeight: fontWeight.semibold },\n  body: { fontSize: 14, lineHeight: 20, fontWeight: fontWeight.regular },\n  bodyLarge: { fontSize: 16, lineHeight: 24, fontWeight: fontWeight.regular },\n  title: { fontSize: 18, lineHeight: 26, fontWeight: fontWeight.bold },\n  titleLarge: { fontSize: 20, lineHeight: 28, fontWeight: fontWeight.heavy },\n  heading: { fontSize: 24, lineHeight: 32, fontWeight: fontWeight.heavy },\n} as const;\n\nexport type TextVariant = keyof typeof typography;\n\n/**\n * Document heading hierarchy without widening the established `TextVariant`\n * union. Levels 3–5 reuse the existing semantic styles; larger levels are\n * additive display roles for dense product pages and documentation.\n */\nexport const heading = {\n  level1: { fontSize: 40, lineHeight: 48, fontWeight: fontWeight.heavy },\n  level2: { fontSize: 32, lineHeight: 40, fontWeight: fontWeight.heavy },\n  level3: typography.heading,\n  level4: typography.titleLarge,\n  level5: typography.title,\n} as const;\n\nexport type HeadingLevel = keyof typeof heading;\n\n/** Glyphs include icons and avatars; they do not inherit paragraph line-height. */\nexport const glyph = {\n  xs: 14,\n  sm: 20,\n  md: 24,\n  lg: 28,\n  xl: 32,\n  xxl: 44,\n  xxxl: 48,\n} as const;\n\nexport type GlyphSize = keyof typeof glyph;\n\nexport const motion = {\n  fast: 120,\n  normal: 200,\n  slow: 320,\n} as const;\n\n/**\n * Curves are stored as normalized cubic-bezier tuples so CSS and native\n * animation drivers can translate the same motion intent without sharing a\n * renderer dependency.\n */\nexport const easing = {\n  standard: [0.2, 0, 0, 1],\n  enter: [0, 0, 0, 1],\n  exit: [0.3, 0, 1, 1],\n  emphasized: [0.2, 0, 0, 1],\n} as const;\n\nexport type ReducedMotionBehavior = \"instant\" | \"opacity\" | \"static\";\n\n/** Shared transition intent; renderers translate easing tuples to their animation API. */\nexport const motionPreset = {\n  micro: {\n    duration: motion.fast,\n    easing: \"standard\",\n    reducedMotion: \"instant\",\n  },\n  enter: {\n    duration: motion.normal,\n    easing: \"enter\",\n    reducedMotion: \"opacity\",\n  },\n  exit: {\n    duration: motion.fast,\n    easing: \"exit\",\n    reducedMotion: \"instant\",\n  },\n  context: {\n    duration: motion.slow,\n    easing: \"emphasized\",\n    reducedMotion: \"opacity\",\n  },\n} as const satisfies Record<\n  \"micro\" | \"enter\" | \"exit\" | \"context\",\n  {\n    duration: number;\n    easing: keyof typeof easing;\n    reducedMotion: ReducedMotionBehavior;\n  }\n>;\n\n/** Native renderers may use these values directly; web renderers use easing. */\nexport const spring = {\n  responsive: { stiffness: 760, damping: 52, mass: 1 },\n  expressive: { stiffness: 520, damping: 38, mass: 1 },\n} as const;\n\n/** Reusable state strengths. Components still decide which states are valid. */\nexport const opacity = {\n  disabled: 0.5,\n  muted: 0.72,\n  pressed: 0.86,\n  dragged: 0.64,\n} as const;\n\n/** Overlaying the content color at these strengths creates predictable states. */\nexport const stateLayer = {\n  hover: 0.06,\n  focus: 0.08,\n  pressed: 0.1,\n  selected: 0.1,\n} as const;\n\nexport const stroke = {\n  subtle: 1,\n  default: 1,\n  strong: 2,\n  focus: 2,\n} as const;\n\nexport const control = {\n  minTouchTarget: 44,\n  buttonHeight: {\n    small: 36,\n    medium: 44,\n    large: 52,\n  },\n  buttonHitSlop: {\n    small: 4,\n    medium: 0,\n    large: 0,\n  },\n  fieldHeight: 44,\n  chipHeight: {\n    small: 36,\n    medium: 44,\n  },\n  selectionIndicator: 24,\n} as const;\n\n/** Product renderers may narrow these widths, but should not invent new rhythm. */\nexport const layout = {\n  pagePadding: {\n    compact: spacing.md,\n    regular: spacing.lg,\n    spacious: spacing.xl,\n  },\n  sectionGap: spacing.xl,\n  contentGap: spacing.md,\n  rowHeight: {\n    singleLine: 56,\n    twoLine: 68,\n  },\n  readingMaxWidth: 720,\n  contentMaxWidth: 1200,\n} as const;\n\n/** Width thresholds use CSS pixels on Web and density-independent points on Native. */\nexport const breakpoint = {\n  compact: 0,\n  medium: 600,\n  expanded: 960,\n  wide: 1280,\n} as const;\n\n/** Shared stacking intent. Values remain sparse to leave room for app layers. */\nexport const layer = {\n  base: 0,\n  sticky: 100,\n  dropdown: 400,\n  overlay: 800,\n  modal: 900,\n  tooltip: 950,\n  toast: 1000,\n} as const;\n\nexport const overlay = {\n  scrim: 0.6,\n  veil: 0.25,\n} as const;\n\nexport type BackdropReference = Readonly<{\n  color: \"#000000\";\n  opacity: number;\n}>;\n\n/** Fixed backdrop contracts avoid renderer-specific names such as CSS `scrim`. */\nexport const backdrop = {\n  modal: { color: \"#000000\", opacity: overlay.scrim },\n  veil: { color: \"#000000\", opacity: overlay.veil },\n} as const satisfies Record<\"modal\" | \"veil\", BackdropReference>;\n\nexport const scrim = `rgba(0, 0, 0, ${overlay.scrim})`;\n\n/** Renderers translate this contract to box-shadow or native shadow/elevation properties. */\nexport const shadow = {\n  raised: {\n    color: \"#000000\",\n    opacity: 0.08,\n    radius: 4,\n    offsetY: 1,\n  },\n  floating: {\n    color: \"#000000\",\n    opacity: 0.12,\n    radius: 12,\n    offsetY: 4,\n  },\n  overlay: {\n    color: \"#000000\",\n    opacity: 0.16,\n    radius: 24,\n    offsetY: 8,\n  },\n} as const;\n"]}

package/dist/grid.d.ts

@@ -0,0 +1,75 @@
+import { type ResponsiveValue, type WindowClass } from "./responsive.js";
+/** `none` is the only non-token gap: the semantic absence of space. */
+export declare const gridGaps: {
+    readonly xxs: 4;
+    readonly xs: 8;
+    readonly sm: 12;
+    readonly md: 16;
+    readonly lg: 20;
+    readonly xl: 24;
+    readonly xxl: 32;
+    readonly xxxl: 40;
+    readonly none: 0;
+};
+export type GridGapToken = keyof typeof gridGaps;
+/** A single token applies to both axes; the object form allows independent axes. */
+export type GridGap = GridGapToken | Readonly<{
+    row: GridGapToken;
+    column: GridGapToken;
+}>;
+export type GridDescriptor = Readonly<{
+    /** Requested column count at each window class; every value must be a positive integer. */
+    columns: ResponsiveValue<number>;
+    /** Token-only spacing. Missing larger classes inherit toward compact. */
+    gap?: ResponsiveValue<GridGap>;
+    /**
+     * Optional target floor. The resolver reduces `columns` before allowing
+     * multiple columns below this width; one column still shrinks to its container.
+     */
+    minColumnWidth?: ResponsiveValue<number>;
+}>;
+export declare const gridDefaults: {
+    readonly gap: "md";
+    readonly flow: "row-major";
+};
+export declare const gridRecipe: {
+    readonly slots: readonly ["root", "item"];
+    readonly defaults: {
+        readonly gap: "md";
+        readonly flow: "row-major";
+    };
+    readonly gaps: {
+        readonly xxs: 4;
+        readonly xs: 8;
+        readonly sm: 12;
+        readonly md: 16;
+        readonly lg: 20;
+        readonly xl: 24;
+        readonly xxl: 32;
+        readonly xxxl: 40;
+        readonly none: 0;
+    };
+};
+export type ResolveGridLayoutOptions = Readonly<{
+    /** Full window/viewport width used only to choose the shared WindowClass. */
+    windowWidth: number;
+    /** Inner grid width after page padding/sidebar; defaults to windowWidth. */
+    availableWidth?: number;
+}>;
+export type ResolvedGridLayout = Readonly<{
+    windowClass: WindowClass;
+    flow: "row-major";
+    requestedColumns: number;
+    columns: number;
+    rowGap: number;
+    columnGap: number;
+    columnWidth: number;
+}>;
+export declare function validateGridDescriptor(descriptor: GridDescriptor): void;
+/**
+ * Resolves renderer-neutral grid geometry. Columns may only collapse from
+ * the requested count when `minColumnWidth` requires it; they never widen.
+ * Renderers must preserve child source order (`row-major`) on both platforms.
+ */
+export declare function resolveGridLayout(descriptor: GridDescriptor, options: ResolveGridLayoutOptions): ResolvedGridLayout;
+//# sourceMappingURL=grid.d.ts.map

package/dist/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../src/grid.ts"],"names":[],"mappings":"AACA,OAAO,EAKL,KAAK,eAAe,EACpB,KAAK,WAAW,EACjB,MAAM,iBAAiB,CAAC;AAEzB,uEAAuE;AACvE,eAAO,MAAM,QAAQ;;;;;;;;;;CAGX,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,QAAQ,CAAC;AAEjD,oFAAoF;AACpF,MAAM,MAAM,OAAO,GACf,YAAY,GACZ,QAAQ,CAAC;IACP,GAAG,EAAE,YAAY,CAAC;IAClB,MAAM,EAAE,YAAY,CAAC;CACtB,CAAC,CAAC;AAEP,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;IACpC,2FAA2F;IAC3F,OAAO,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACjC,yEAAyE;IACzE,GAAG,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IAC/B;;;OAGG;IACH,cAAc,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CAC1C,CAAC,CAAC;AAEH,eAAO,MAAM,YAAY;;;CAMvB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;CAIb,CAAC;AAEX,MAAM,MAAM,wBAAwB,GAAG,QAAQ,CAAC;IAC9C,6EAA6E;IAC7E,WAAW,EAAE,MAAM,CAAC;IACpB,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC;IACxC,WAAW,EAAE,WAAW,CAAC;IACzB,IAAI,EAAE,WAAW,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AAsEH,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,cAAc,GAAG,IAAI,CAevE;AA4BD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,cAAc,EAC1B,OAAO,EAAE,wBAAwB,GAChC,kBAAkB,CAuCpB"}

package/dist/grid.js

@@ -0,0 +1,133 @@
+import { spacing } from "./foundations.js";
+import { resolveResponsiveValue, resolveWindowClass, validateResponsiveValue, windowClassOrder, } from "./responsive.js";
+/** `none` is the only non-token gap: the semantic absence of space. */
+export const gridGaps = {
+    none: 0,
+    ...spacing,
+};
+export const gridDefaults = {
+    gap: "md",
+    flow: "row-major",
+};
+export const gridRecipe = {
+    slots: ["root", "item"],
+    defaults: gridDefaults,
+    gaps: gridGaps,
+};
+const descriptorKeys = new Set(["columns", "gap", "minColumnWidth"]);
+const gapKeys = new Set(["row", "column"]);
+const optionKeys = new Set(["windowWidth", "availableWidth"]);
+const gapTokens = new Set(Object.keys(gridGaps));
+function isRecord(value) {
+    return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function rejectUnknownKeys(value, allowed, field) {
+    for (const key of Object.keys(value)) {
+        if (!allowed.has(key)) {
+            throw new TypeError(`Unsupported Grid ${field} field: ${key}`);
+        }
+    }
+}
+function forEachResponsiveValue(responsive, visit) {
+    validateResponsiveValue(responsive);
+    for (const windowClass of windowClassOrder) {
+        if (Object.hasOwn(responsive, windowClass)) {
+            visit(responsive[windowClass], windowClass);
+        }
+    }
+}
+function validateColumnCount(value, windowClass) {
+    if (!Number.isInteger(value) || value <= 0) {
+        throw new RangeError(`Grid columns at ${windowClass} must be a positive integer`);
+    }
+}
+function validatePositiveWidth(value, field) {
+    if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) {
+        throw new RangeError(`Grid ${field} must be a positive finite number`);
+    }
+}
+function validateGapToken(value, field) {
+    if (typeof value !== "string" || !gapTokens.has(value)) {
+        throw new TypeError(`Unsupported Grid ${field} gap: ${String(value)}`);
+    }
+}
+function validateGap(value, windowClass) {
+    if (typeof value === "string") {
+        validateGapToken(value, windowClass);
+        return;
+    }
+    if (!isRecord(value)) {
+        throw new TypeError(`Grid gap at ${windowClass} must be a token or axis object`);
+    }
+    rejectUnknownKeys(value, gapKeys, `gap.${windowClass}`);
+    validateGapToken(value.row, `${windowClass}.row`);
+    validateGapToken(value.column, `${windowClass}.column`);
+}
+export function validateGridDescriptor(descriptor) {
+    if (!isRecord(descriptor)) {
+        throw new TypeError("Grid descriptor must be an object");
+    }
+    rejectUnknownKeys(descriptor, descriptorKeys, "descriptor");
+    forEachResponsiveValue(descriptor.columns, validateColumnCount);
+    if (descriptor.gap !== undefined) {
+        forEachResponsiveValue(descriptor.gap, validateGap);
+    }
+    if (descriptor.minColumnWidth !== undefined) {
+        forEachResponsiveValue(descriptor.minColumnWidth, (value, windowClass) => {
+            validatePositiveWidth(value, `minColumnWidth at ${windowClass}`);
+        });
+    }
+}
+function validateResolveOptions(options) {
+    if (!isRecord(options)) {
+        throw new TypeError("Grid layout options must be an object");
+    }
+    rejectUnknownKeys(options, optionKeys, "layout options");
+    // resolveWindowClass owns the zero-width/negative distinction for the window.
+    const windowClass = resolveWindowClass(options.windowWidth);
+    const availableWidth = options.availableWidth ?? options.windowWidth;
+    validatePositiveWidth(availableWidth, "availableWidth");
+    return { availableWidth, windowClass };
+}
+function resolveGap(gap) {
+    if (typeof gap === "string") {
+        const resolved = gridGaps[gap];
+        return { row: resolved, column: resolved };
+    }
+    return {
+        row: gridGaps[gap.row],
+        column: gridGaps[gap.column],
+    };
+}
+/**
+ * Resolves renderer-neutral grid geometry. Columns may only collapse from
+ * the requested count when `minColumnWidth` requires it; they never widen.
+ * Renderers must preserve child source order (`row-major`) on both platforms.
+ */
+export function resolveGridLayout(descriptor, options) {
+    validateGridDescriptor(descriptor);
+    const { availableWidth, windowClass } = validateResolveOptions(options);
+    const requestedColumns = resolveResponsiveValue(descriptor.columns, windowClass);
+    const responsiveGap = descriptor.gap ?? { compact: gridDefaults.gap };
+    const { row: rowGap, column: columnGap } = resolveGap(resolveResponsiveValue(responsiveGap, windowClass));
+    let columns = requestedColumns;
+    if (descriptor.minColumnWidth !== undefined) {
+        const minColumnWidth = resolveResponsiveValue(descriptor.minColumnWidth, windowClass);
+        const fittingColumns = Math.max(1, Math.floor((availableWidth + columnGap) / (minColumnWidth + columnGap)));
+        columns = Math.min(requestedColumns, fittingColumns);
+    }
+    const columnWidth = (availableWidth - columnGap * (columns - 1)) / columns;
+    if (!Number.isFinite(columnWidth) || columnWidth <= 0) {
+        throw new RangeError("Grid columns and column gap leave no positive column width");
+    }
+    return {
+        windowClass,
+        flow: gridDefaults.flow,
+        requestedColumns,
+        columns,
+        rowGap,
+        columnGap,
+        columnWidth,
+    };
+}
+//# sourceMappingURL=grid.js.map

package/dist/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../src/grid.ts"],"names":[],"mappings":"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","sourcesContent":["import { spacing } from \"./foundations.js\";\nimport {\n  resolveResponsiveValue,\n  resolveWindowClass,\n  validateResponsiveValue,\n  windowClassOrder,\n  type ResponsiveValue,\n  type WindowClass,\n} from \"./responsive.js\";\n\n/** `none` is the only non-token gap: the semantic absence of space. */\nexport const gridGaps = {\n  none: 0,\n  ...spacing,\n} as const;\n\nexport type GridGapToken = keyof typeof gridGaps;\n\n/** A single token applies to both axes; the object form allows independent axes. */\nexport type GridGap =\n  | GridGapToken\n  | Readonly<{\n      row: GridGapToken;\n      column: GridGapToken;\n    }>;\n\nexport type GridDescriptor = Readonly<{\n  /** Requested column count at each window class; every value must be a positive integer. */\n  columns: ResponsiveValue<number>;\n  /** Token-only spacing. Missing larger classes inherit toward compact. */\n  gap?: ResponsiveValue<GridGap>;\n  /**\n   * Optional target floor. The resolver reduces `columns` before allowing\n   * multiple columns below this width; one column still shrinks to its container.\n   */\n  minColumnWidth?: ResponsiveValue<number>;\n}>;\n\nexport const gridDefaults = {\n  gap: \"md\",\n  flow: \"row-major\",\n} as const satisfies Readonly<{\n  gap: GridGapToken;\n  flow: \"row-major\";\n}>;\n\nexport const gridRecipe = {\n  slots: [\"root\", \"item\"] as const,\n  defaults: gridDefaults,\n  gaps: gridGaps,\n} as const;\n\nexport type ResolveGridLayoutOptions = Readonly<{\n  /** Full window/viewport width used only to choose the shared WindowClass. */\n  windowWidth: number;\n  /** Inner grid width after page padding/sidebar; defaults to windowWidth. */\n  availableWidth?: number;\n}>;\n\nexport type ResolvedGridLayout = Readonly<{\n  windowClass: WindowClass;\n  flow: \"row-major\";\n  requestedColumns: number;\n  columns: number;\n  rowGap: number;\n  columnGap: number;\n  columnWidth: number;\n}>;\n\nconst descriptorKeys = new Set([\"columns\", \"gap\", \"minColumnWidth\"]);\nconst gapKeys = new Set([\"row\", \"column\"]);\nconst optionKeys = new Set([\"windowWidth\", \"availableWidth\"]);\nconst gapTokens = new Set<GridGapToken>(\n  Object.keys(gridGaps) as GridGapToken[],\n);\n\nfunction isRecord(value: unknown): value is Readonly<Record<string, unknown>> {\n  return value !== null && typeof value === \"object\" && !Array.isArray(value);\n}\n\nfunction rejectUnknownKeys(\n  value: Readonly<Record<string, unknown>>,\n  allowed: ReadonlySet<string>,\n  field: string,\n): void {\n  for (const key of Object.keys(value)) {\n    if (!allowed.has(key)) {\n      throw new TypeError(`Unsupported Grid ${field} field: ${key}`);\n    }\n  }\n}\n\nfunction forEachResponsiveValue<Value>(\n  responsive: ResponsiveValue<Value>,\n  visit: (value: Value, windowClass: WindowClass) => void,\n): void {\n  validateResponsiveValue(responsive);\n  for (const windowClass of windowClassOrder) {\n    if (Object.hasOwn(responsive, windowClass)) {\n      visit(responsive[windowClass] as Value, windowClass);\n    }\n  }\n}\n\nfunction validateColumnCount(value: number, windowClass: WindowClass): void {\n  if (!Number.isInteger(value) || value <= 0) {\n    throw new RangeError(\n      `Grid columns at ${windowClass} must be a positive integer`,\n    );\n  }\n}\n\nfunction validatePositiveWidth(value: number, field: string): void {\n  if (typeof value !== \"number\" || !Number.isFinite(value) || value <= 0) {\n    throw new RangeError(`Grid ${field} must be a positive finite number`);\n  }\n}\n\nfunction validateGapToken(value: unknown, field: string): asserts value is GridGapToken {\n  if (typeof value !== \"string\" || !gapTokens.has(value as GridGapToken)) {\n    throw new TypeError(`Unsupported Grid ${field} gap: ${String(value)}`);\n  }\n}\n\nfunction validateGap(value: GridGap, windowClass: WindowClass): void {\n  if (typeof value === \"string\") {\n    validateGapToken(value, windowClass);\n    return;\n  }\n  if (!isRecord(value)) {\n    throw new TypeError(`Grid gap at ${windowClass} must be a token or axis object`);\n  }\n  rejectUnknownKeys(value, gapKeys, `gap.${windowClass}`);\n  validateGapToken(value.row, `${windowClass}.row`);\n  validateGapToken(value.column, `${windowClass}.column`);\n}\n\nexport function validateGridDescriptor(descriptor: GridDescriptor): void {\n  if (!isRecord(descriptor)) {\n    throw new TypeError(\"Grid descriptor must be an object\");\n  }\n  rejectUnknownKeys(descriptor, descriptorKeys, \"descriptor\");\n\n  forEachResponsiveValue(descriptor.columns, validateColumnCount);\n  if (descriptor.gap !== undefined) {\n    forEachResponsiveValue(descriptor.gap, validateGap);\n  }\n  if (descriptor.minColumnWidth !== undefined) {\n    forEachResponsiveValue(descriptor.minColumnWidth, (value, windowClass) => {\n      validatePositiveWidth(value, `minColumnWidth at ${windowClass}`);\n    });\n  }\n}\n\nfunction validateResolveOptions(options: ResolveGridLayoutOptions): Readonly<{\n  availableWidth: number;\n  windowClass: WindowClass;\n}> {\n  if (!isRecord(options)) {\n    throw new TypeError(\"Grid layout options must be an object\");\n  }\n  rejectUnknownKeys(options, optionKeys, \"layout options\");\n  // resolveWindowClass owns the zero-width/negative distinction for the window.\n  const windowClass = resolveWindowClass(options.windowWidth);\n  const availableWidth = options.availableWidth ?? options.windowWidth;\n  validatePositiveWidth(availableWidth, \"availableWidth\");\n  return { availableWidth, windowClass };\n}\n\nfunction resolveGap(gap: GridGap): Readonly<{ row: number; column: number }> {\n  if (typeof gap === \"string\") {\n    const resolved = gridGaps[gap];\n    return { row: resolved, column: resolved };\n  }\n  return {\n    row: gridGaps[gap.row],\n    column: gridGaps[gap.column],\n  };\n}\n\n/**\n * Resolves renderer-neutral grid geometry. Columns may only collapse from\n * the requested count when `minColumnWidth` requires it; they never widen.\n * Renderers must preserve child source order (`row-major`) on both platforms.\n */\nexport function resolveGridLayout(\n  descriptor: GridDescriptor,\n  options: ResolveGridLayoutOptions,\n): ResolvedGridLayout {\n  validateGridDescriptor(descriptor);\n  const { availableWidth, windowClass } = validateResolveOptions(options);\n  const requestedColumns = resolveResponsiveValue(descriptor.columns, windowClass);\n  const responsiveGap = descriptor.gap ?? { compact: gridDefaults.gap };\n  const { row: rowGap, column: columnGap } = resolveGap(\n    resolveResponsiveValue(responsiveGap, windowClass),\n  );\n\n  let columns = requestedColumns;\n  if (descriptor.minColumnWidth !== undefined) {\n    const minColumnWidth = resolveResponsiveValue(\n      descriptor.minColumnWidth,\n      windowClass,\n    );\n    const fittingColumns = Math.max(\n      1,\n      Math.floor((availableWidth + columnGap) / (minColumnWidth + columnGap)),\n    );\n    columns = Math.min(requestedColumns, fittingColumns);\n  }\n\n  const columnWidth =\n    (availableWidth - columnGap * (columns - 1)) / columns;\n  if (!Number.isFinite(columnWidth) || columnWidth <= 0) {\n    throw new RangeError(\n      \"Grid columns and column gap leave no positive column width\",\n    );\n  }\n\n  return {\n    windowClass,\n    flow: gridDefaults.flow,\n    requestedColumns,\n    columns,\n    rowGap,\n    columnGap,\n    columnWidth,\n  };\n}\n"]}

package/dist/icon-button-recipe.d.ts

@@ -0,0 +1,99 @@
+import { type ColorReferencePalette } from "./color-references.js";
+export type IconButtonSize = "small" | "medium" | "large";
+export type IconButtonShape = "rounded" | "circle";
+export type IconButtonTone = "primary" | "secondary" | "ghost" | "danger";
+export declare const iconButtonRecipe: {
+    readonly slots: readonly ["root", "icon", "spinner"];
+    readonly defaults: {
+        readonly tone: "ghost";
+        readonly size: "medium";
+        readonly shape: "rounded";
+    };
+    readonly tones: {
+        readonly primary: {
+            readonly background: Readonly<{
+                source: "theme";
+                key: "primary";
+                alpha?: number;
+            }>;
+            readonly content: Readonly<{
+                source: "theme";
+                key: "onPrimary";
+                alpha?: number;
+            }>;
+            readonly border: null;
+        };
+        readonly secondary: {
+            readonly background: Readonly<{
+                source: "theme";
+                key: "surfaceAlt";
+                alpha?: number;
+            }>;
+            readonly content: Readonly<{
+                source: "theme";
+                key: "text";
+                alpha?: number;
+            }>;
+            readonly border: Readonly<{
+                source: "theme";
+                key: "border";
+                alpha?: number;
+            }>;
+        };
+        readonly ghost: {
+            readonly background: null;
+            readonly content: Readonly<{
+                source: "theme";
+                key: "textMuted";
+                alpha?: number;
+            }>;
+            readonly border: null;
+        };
+        readonly danger: {
+            readonly background: Readonly<{
+                source: "theme";
+                key: "dangerFill";
+                alpha?: number;
+            }>;
+            readonly content: Readonly<{
+                source: "theme";
+                key: "onDanger";
+                alpha?: number;
+            }>;
+            readonly border: null;
+        };
+    };
+    readonly sizes: {
+        readonly small: {
+            readonly diameter: 36;
+            readonly hitSlop: 4;
+            readonly glyph: "sm";
+        };
+        readonly medium: {
+            readonly diameter: 44;
+            readonly hitSlop: 0;
+            readonly glyph: "md";
+        };
+        readonly large: {
+            readonly diameter: 52;
+            readonly hitSlop: 0;
+            readonly glyph: "lg";
+        };
+    };
+    readonly shapes: {
+        readonly rounded: "md";
+        readonly circle: "full";
+    };
+    readonly states: {
+        readonly pressedOpacity: 0.86;
+        readonly disabledOpacity: 0.5;
+    };
+};
+export type ResolvedIconButtonPresentation = Readonly<{
+    background: string | null;
+    content: string;
+    border: string | null;
+}>;
+/** Resolve one recipe tone for non-CSS renderers without a second tone table. */
+export declare function resolveIconButtonPresentation(tone: IconButtonTone, palette: ColorReferencePalette): ResolvedIconButtonPresentation;
+//# sourceMappingURL=icon-button-recipe.d.ts.map

package/dist/icon-button-recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button-recipe.d.ts","sourceRoot":"","sources":["../src/icon-button-recipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,uBAAuB,CAAC;AAQ/B,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC1D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,QAAQ,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE1E,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiD5B,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG,QAAQ,CAAC;IACpD,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,CAAC,CAAC;AAEH,iFAAiF;AACjF,wBAAgB,6BAA6B,CAC3C,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,qBAAqB,GAC7B,8BAA8B,CAahC"}

package/dist/icon-button-recipe.js

@@ -0,0 +1,53 @@
+import { resolveColorReference, } from "./color-references.js";
+import { opacity, radius, } from "./foundations.js";
+import { semanticColors } from "./semantic-colors.js";
+export const iconButtonRecipe = {
+    slots: ["root", "icon", "spinner"],
+    defaults: { tone: "ghost", size: "medium", shape: "rounded" },
+    tones: {
+        primary: {
+            background: semanticColors.action.brand.background,
+            content: semanticColors.action.brand.content,
+            border: null,
+        },
+        secondary: {
+            background: semanticColors.action.neutral.background,
+            content: semanticColors.action.neutral.content,
+            border: semanticColors.border.default,
+        },
+        ghost: {
+            background: null,
+            content: semanticColors.content.secondary,
+            border: null,
+        },
+        danger: {
+            background: semanticColors.action.danger.background,
+            content: semanticColors.action.danger.content,
+            border: null,
+        },
+    },
+    sizes: {
+        small: { diameter: 36, hitSlop: 4, glyph: "sm" },
+        medium: { diameter: 44, hitSlop: 0, glyph: "md" },
+        large: { diameter: 52, hitSlop: 0, glyph: "lg" },
+    },
+    shapes: { rounded: "md", circle: "full" },
+    states: {
+        pressedOpacity: opacity.pressed,
+        disabledOpacity: opacity.disabled,
+    },
+};
+/** Resolve one recipe tone for non-CSS renderers without a second tone table. */
+export function resolveIconButtonPresentation(tone, palette) {
+    const contract = iconButtonRecipe.tones[tone];
+    return {
+        background: contract.background === null
+            ? null
+            : resolveColorReference(contract.background, palette),
+        content: resolveColorReference(contract.content, palette),
+        border: contract.border === null
+            ? null
+            : resolveColorReference(contract.border, palette),
+    };
+}
+//# sourceMappingURL=icon-button-recipe.js.map