@primer/primitives 11.4.0-rc.f798df25 → 11.4.1-rc.4e2d1de5

package/dist/build/schemas/shadowToken.js

@@ -6,6 +6,7 @@ import { alphaValue } from './alphaValue.js';
 import { dimensionValue } from './dimensionValue.js';
 import { tokenType } from './tokenType.js';
 import { collection, mode } from './collections.js';
+import { llmExtension } from './llmExtension.js';
 export const shadowValue = z
     .object({
     color: z.union([colorHexValue, referenceValue]),
@@ -58,6 +59,7 @@ export const shadowToken = baseToken
         })
             .strict()
             .optional(),
+        'org.primer.llm': llmExtension,
     })
         .optional(),
 })

package/dist/build/schemas/stringToken.d.ts

@@ -4,4 +4,10 @@ export declare const stringToken: z.ZodObject<{
     $deprecated: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodBoolean]>>;
     $value: z.ZodUnion<readonly [z.ZodString, z.ZodString]>;
     $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+    $extensions: z.ZodOptional<z.ZodObject<{
+        'org.primer.llm': z.ZodOptional<z.ZodObject<{
+            usage: z.ZodOptional<z.ZodArray<z.ZodString>>;
+            rules: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>;
+    }, z.core.$strip>>;
 }, z.core.$strict>;

package/dist/build/schemas/stringToken.js

@@ -2,9 +2,15 @@ import { z } from 'zod';
 import { baseToken } from './baseToken.js';
 import { referenceValue } from './referenceValue.js';
 import { tokenType } from './tokenType.js';
+import { llmExtension } from './llmExtension.js';
 export const stringToken = baseToken
     .extend({
     $value: z.union([z.string(), referenceValue]),
     $type: tokenType('string'),
+    $extensions: z
+        .object({
+        'org.primer.llm': llmExtension,
+    })
+        .optional(),
 })
     .strict();

package/dist/build/schemas/transitionToken.d.ts

@@ -3,9 +3,27 @@ export declare const transitionToken: z.ZodObject<{
     $description: z.ZodOptional<z.ZodString>;
     $deprecated: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodBoolean]>>;
     $value: z.ZodUnion<readonly [z.ZodObject<{
-        duration: z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodString, z.ZodString]>, z.ZodString]>;
+        duration: z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodObject<{
+            value: z.ZodNumber;
+            unit: z.ZodEnum<{
+                s: "s";
+                ms: "ms";
+            }>;
+        }, z.core.$strict>, z.ZodString]>, z.ZodString]>;
         timingFunction: z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodArray<z.ZodNumber>, z.ZodString]>, z.ZodString]>;
-        delay: z.ZodOptional<z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodString, z.ZodString]>, z.ZodString]>>;
+        delay: z.ZodOptional<z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodObject<{
+            value: z.ZodNumber;
+            unit: z.ZodEnum<{
+                s: "s";
+                ms: "ms";
+            }>;
+        }, z.core.$strict>, z.ZodString]>, z.ZodString]>>;
     }, z.core.$strip>, z.ZodString]>;
     $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+    $extensions: z.ZodOptional<z.ZodObject<{
+        'org.primer.llm': z.ZodOptional<z.ZodObject<{
+            usage: z.ZodOptional<z.ZodArray<z.ZodString>>;
+            rules: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>;
+    }, z.core.$strip>>;
 }, z.core.$strict>;

package/dist/build/schemas/transitionToken.js

@@ -4,6 +4,7 @@ import { referenceValue } from './referenceValue.js';
 import { durationToken } from './durationToken.js';
 import { cubicBezierToken } from './cubicBezierToken.js';
 import { tokenType } from './tokenType.js';
+import { llmExtension } from './llmExtension.js';
 export const transitionToken = baseToken
     .extend({
     $value: z.union([
@@ -15,5 +16,10 @@ export const transitionToken = baseToken
         referenceValue,
     ]),
     $type: tokenType('transition'),
+    $extensions: z
+        .object({
+        'org.primer.llm': llmExtension,
+    })
+        .optional(),
 })
     .strict();

package/dist/build/schemas/typographyToken.d.ts

@@ -1,7 +1,21 @@
 import { z } from 'zod';
 export declare const typographyValue: z.ZodObject<{
-    fontSize: z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodString, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodString]>;
-    lineHeight: z.ZodOptional<z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodString, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodString]>>;
+    fontSize: z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodObject<{
+        value: z.ZodNumber;
+        unit: z.ZodEnum<{
+            em: "em";
+            px: "px";
+            rem: "rem";
+        }>;
+    }, z.core.$strict>, z.ZodUnion<readonly [z.ZodString, z.ZodLiteral<"0">, z.ZodLiteral<0>]>]>, z.ZodString]>;
+    lineHeight: z.ZodOptional<z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodObject<{
+        value: z.ZodNumber;
+        unit: z.ZodEnum<{
+            em: "em";
+            px: "px";
+            rem: "rem";
+        }>;
+    }, z.core.$strict>, z.ZodUnion<readonly [z.ZodString, z.ZodLiteral<"0">, z.ZodLiteral<0>]>]>, z.ZodString]>>;
     fontWeight: z.ZodUnion<readonly [z.ZodNumber, z.ZodString]>;
     fontFamily: z.ZodUnion<readonly [z.ZodString, z.ZodString]>;
 }, z.core.$strip>;
@@ -9,10 +23,30 @@ export declare const typographyToken: z.ZodObject<{
     $description: z.ZodOptional<z.ZodString>;
     $deprecated: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodBoolean]>>;
     $value: z.ZodUnion<readonly [z.ZodObject<{
-        fontSize: z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodString, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodString]>;
-        lineHeight: z.ZodOptional<z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodString, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodString]>>;
+        fontSize: z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodObject<{
+            value: z.ZodNumber;
+            unit: z.ZodEnum<{
+                em: "em";
+                px: "px";
+                rem: "rem";
+            }>;
+        }, z.core.$strict>, z.ZodUnion<readonly [z.ZodString, z.ZodLiteral<"0">, z.ZodLiteral<0>]>]>, z.ZodString]>;
+        lineHeight: z.ZodOptional<z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodObject<{
+            value: z.ZodNumber;
+            unit: z.ZodEnum<{
+                em: "em";
+                px: "px";
+                rem: "rem";
+            }>;
+        }, z.core.$strict>, z.ZodUnion<readonly [z.ZodString, z.ZodLiteral<"0">, z.ZodLiteral<0>]>]>, z.ZodString]>>;
         fontWeight: z.ZodUnion<readonly [z.ZodNumber, z.ZodString]>;
         fontFamily: z.ZodUnion<readonly [z.ZodString, z.ZodString]>;
     }, z.core.$strip>, z.ZodString]>;
     $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+    $extensions: z.ZodOptional<z.ZodObject<{
+        'org.primer.llm': z.ZodOptional<z.ZodObject<{
+            usage: z.ZodOptional<z.ZodArray<z.ZodString>>;
+            rules: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>;
+    }, z.core.$strip>>;
 }, z.core.$strict>;

package/dist/build/schemas/typographyToken.js

@@ -4,6 +4,7 @@ import { dimensionValue } from './dimensionValue.js';
 import { baseToken } from './baseToken.js';
 import { fontWeightValue } from './fontWeightValue.js';
 import { tokenType } from './tokenType.js';
+import { llmExtension } from './llmExtension.js';
 export const typographyValue = z.object({
     fontSize: z.union([dimensionValue, referenceValue]),
     lineHeight: z.union([dimensionValue, referenceValue]).optional(),
@@ -14,5 +15,10 @@ export const typographyToken = baseToken
     .extend({
     $value: z.union([typographyValue, referenceValue]),
     $type: tokenType('typography'),
+    $extensions: z
+        .object({
+        'org.primer.llm': llmExtension,
+    })
+        .optional(),
 })
     .strict();

package/dist/build/schemas/validTokenType.d.ts

@@ -1,5 +1,9 @@
 import { z } from 'zod';
 declare const validTypes: readonly ["color", "cubicBezier", "typography", "dimension", "duration", "border", "shadow", "fontFamily", "fontWeight", "gradient", "number", "string", "transition", "custom-viewportRange"];
 export type TokenType = (typeof validTypes)[number];
-export declare const validateType: z.ZodRecord<z.ZodString, z.ZodLazy<z.ZodType<unknown, unknown, z.core.$ZodTypeInternals<unknown, unknown>>>>;
+/**
+ * Recursively validates $type properties in token structure
+ * Allows group-level properties ($description, $extensions) per W3C Design Tokens spec
+ */
+export declare const validateType: z.ZodType<unknown>;
 export {};

package/dist/build/schemas/validTokenType.js

@@ -16,23 +16,77 @@ const validTypes = [
     'transition',
     'custom-viewportRange',
 ];
+/**
+ * Token schema that validates $type property
+ */
+const tokenWithType = z
+    .object({
+    $value: z.any(),
+    $type: z.string().superRefine((value, ctx) => {
+        if (!validTypes.includes(value)) {
+            ctx.addIssue({
+                code: 'custom',
+                message: schemaErrorMessage(`Invalid token $type: "${value}"`, `Must be one of the following: ${joinFriendly([...validTypes], 'or')}`),
+            });
+        }
+    }),
+})
+    .required();
+/**
+ * Recursively validates $type properties in token structure
+ * Allows group-level properties ($description, $extensions) per W3C Design Tokens spec
+ */
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: TODO: fix this
-export const validateType = z.record(z.string(), z.lazy(() => {
-    return z.union([
-        z
-            .object({
-            $value: z.any(),
-            $type: z.string().superRefine((value, ctx) => {
-                if (!validTypes.includes(value)) {
-                    ctx.addIssue({
-                        code: 'custom',
-                        message: schemaErrorMessage(`Invalid token $type: "${value}"`, `Must be one of the following: ${joinFriendly([...validTypes], 'or')}`),
-                    });
+export const validateType = z.record(z.string(), z.unknown()).superRefine((obj, ctx) => {
+    for (const [key, value] of Object.entries(obj)) {
+        if (key === '$description') {
+            // Group-level $description must be a string
+            if (typeof value !== 'string') {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    message: `$description must be a string`,
+                    path: [key],
+                });
+            }
+        }
+        else if (key === '$extensions') {
+            // Group-level $extensions must be an object
+            if (typeof value !== 'object' || value === null) {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    message: `$extensions must be an object`,
+                    path: [key],
+                });
+            }
+        }
+        else if (key.startsWith('$')) {
+            // Unknown $-prefixed keys are not allowed
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: `Unknown group property: ${key}`,
+                path: [key],
+            });
+        }
+        else if (typeof value === 'object' && value !== null) {
+            // Check if it's a token (has $type) or a nested group
+            if ('$type' in value) {
+                const result = tokenWithType.safeParse(value);
+                if (!result.success) {
+                    for (const issue of result.error.issues) {
+                        ctx.addIssue(Object.assign(Object.assign({}, issue), { path: [key, ...issue.path] }));
+                    }
                 }
-            }),
-        })
-            .required(),
-        validateType,
-    ]);
-}));
+            }
+            else {
+                // Recursively validate nested group
+                const result = validateType.safeParse(value);
+                if (!result.success) {
+                    for (const issue of result.error.issues) {
+                        ctx.addIssue(Object.assign(Object.assign({}, issue), { path: [key, ...issue.path] }));
+                    }
+                }
+            }
+        }
+    }
+});

package/dist/build/schemas/viewportRangeToken.d.ts

@@ -4,4 +4,10 @@ export declare const viewportRangeToken: z.ZodObject<{
     $deprecated: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodBoolean]>>;
     $value: z.ZodUnion<readonly [z.ZodString, z.ZodString]>;
     $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+    $extensions: z.ZodOptional<z.ZodObject<{
+        'org.primer.llm': z.ZodOptional<z.ZodObject<{
+            usage: z.ZodOptional<z.ZodArray<z.ZodString>>;
+            rules: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>;
+    }, z.core.$strip>>;
 }, z.core.$strict>;

package/dist/build/schemas/viewportRangeToken.js

@@ -2,9 +2,15 @@ import { z } from 'zod';
 import { baseToken } from './baseToken.js';
 import { referenceValue } from './referenceValue.js';
 import { tokenType } from './tokenType.js';
+import { llmExtension } from './llmExtension.js';
 export const viewportRangeToken = baseToken
     .extend({
     $value: z.union([z.string(), referenceValue]),
     $type: tokenType('custom-viewportRange'),
+    $extensions: z
+        .object({
+        'org.primer.llm': llmExtension,
+    })
+        .optional(),
 })
     .strict();

package/dist/build/transformers/dimensionToPixelUnitless.d.ts

@@ -1,8 +1,9 @@
 import type { Transform } from 'style-dictionary/types';
 /**
- * @description converts dimension tokens value to pixel value without unit, ignores `em` as they are relative to the font size of the parent element
+ * @description converts dimension tokens value to pixel value without unit
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `dimension`
- * @transformer returns a float number
+ * @transformer returns a number for px/rem values, or a string with unit for em values (cannot convert to unitless)
+ * @note Expects W3C DTCG format { value: number, unit: "px" | "rem" | "em" }
  */
 export declare const dimensionToPixelUnitless: Transform;

package/dist/build/transformers/dimensionToPixelUnitless.js

@@ -1,4 +1,5 @@
 import { isDimension } from '../filters/index.js';
+import { parseDimension } from './utilities/parseDimension.js';
 /**
  * @description base font size from options or 16
  * @param options
@@ -6,22 +7,11 @@ import { isDimension } from '../filters/index.js';
  */
 const getBasePxFontSize = (options) => (options && options.basePxFontSize) || 16;
 /**
- * @description checks if token value has a specific unit
- * @param value token value
- * @param unit unit string like px or value
- * @returns boolean
- */
-const hasUnit = (value, unit) => {
-    if (typeof value === 'number') {
-        return false;
-    }
-    return value.indexOf(unit) > -1;
-};
-/**
- * @description converts dimension tokens value to pixel value without unit, ignores `em` as they are relative to the font size of the parent element
+ * @description converts dimension tokens value to pixel value without unit
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `dimension`
- * @transformer returns a float number
+ * @transformer returns a number for px/rem values, or a string with unit for em values (cannot convert to unitless)
+ * @note Expects W3C DTCG format { value: number, unit: "px" | "rem" | "em" }
  */
 export const dimensionToPixelUnitless = {
     name: 'dimension/pixelUnitless',
@@ -31,19 +21,25 @@ export const dimensionToPixelUnitless = {
     transform: (token, config, options) => {
         const valueProp = options.usesDtcg ? '$value' : 'value';
         const baseFont = getBasePxFontSize(config);
-        const floatVal = parseFloat(token[valueProp]);
-        if (isNaN(floatVal)) {
-            throw new Error(`Invalid dimension token: '${token.path.join('.')}: ${token[valueProp]}' is not valid and cannot be transform to 'float' \n`);
-        }
-        if (floatVal === 0) {
-            return 0;
-        }
-        if (hasUnit(token[valueProp], 'rem')) {
-            return floatVal * baseFont;
+        try {
+            const { value, unit } = parseDimension(token[valueProp]);
+            if (value === 0) {
+                return 0;
+            }
+            // rem values convert to px
+            if (unit === 'rem') {
+                return value * baseFont;
+            }
+            // em values pass through as string (relative to parent, cannot convert to unitless px)
+            if (unit === 'em') {
+                return `${value}em`;
+            }
+            // px values return the number directly
+            return value;
         }
-        if (hasUnit(token[valueProp], 'px')) {
-            return floatVal;
+        catch (error) {
+            const originalMessage = error instanceof Error ? error.message : String(error);
+            throw new Error(`Invalid dimension token: '${token.path.join('.')}: ${JSON.stringify(token[valueProp])}' - ${originalMessage}\n`);
         }
-        return token[valueProp];
     },
 };

package/dist/build/transformers/dimensionToRem.d.ts

@@ -1,8 +1,9 @@
 import type { Transform } from 'style-dictionary/types';
 /**
- * @description converts dimension tokens value to `rem`, ignores `em` as they are relative to the font size of the parent element
+ * @description converts dimension tokens value to `rem`
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `dimension`
  * @transformer returns a `rem` string
+ * @note Expects W3C DTCG format { value: number, unit: "px" | "rem" | "em" }
  */
 export declare const dimensionToRem: Transform;

package/dist/build/transformers/dimensionToRem.js

@@ -1,4 +1,5 @@
 import { isDimension } from '../filters/index.js';
+import { parseDimension } from './utilities/parseDimension.js';
 /**
  * @description base font size from options or 16
  * @param options
@@ -6,22 +7,11 @@ import { isDimension } from '../filters/index.js';
  */
 const getBasePxFontSize = (options) => (options && options.basePxFontSize) || 16;
 /**
- * @description checks if token value has a specific unit
- * @param value token value
- * @param unit unit string like px or value
- * @returns boolean
- */
-const hasUnit = (value, unit) => {
-    if (typeof value === 'number') {
-        return false;
-    }
-    return value.indexOf(unit) > -1;
-};
-/**
- * @description converts dimension tokens value to `rem`, ignores `em` as they are relative to the font size of the parent element
+ * @description converts dimension tokens value to `rem`
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `dimension`
  * @transformer returns a `rem` string
+ * @note Expects W3C DTCG format { value: number, unit: "px" | "rem" | "em" }
  */
 export const dimensionToRem = {
     name: 'dimension/rem',
@@ -31,16 +21,25 @@ export const dimensionToRem = {
     transform: (token, config, options) => {
         const valueProp = options.usesDtcg ? '$value' : 'value';
         const baseFont = getBasePxFontSize(config);
-        const floatVal = parseFloat(token[valueProp]);
-        if (isNaN(floatVal)) {
-            throw new Error(`Invalid dimension token: '${token.name}: ${token[valueProp]}' is not valid and cannot be transform to 'rem' \n`);
-        }
-        if (floatVal === 0) {
-            return '0';
+        try {
+            const { value, unit } = parseDimension(token[valueProp]);
+            if (value === 0) {
+                return '0';
+            }
+            // rem values pass through unchanged
+            if (unit === 'rem') {
+                return `${value}rem`;
+            }
+            // em values pass through unchanged (relative to parent, cannot convert)
+            if (unit === 'em') {
+                return `${value}em`;
+            }
+            // px values convert to rem
+            return `${value / baseFont}rem`;
         }
-        if (hasUnit(token[valueProp], 'rem') || hasUnit(token[valueProp], 'em')) {
-            return token[valueProp];
+        catch (error) {
+            const details = error instanceof Error && error.message ? ` - ${error.message}` : error ? ` - ${String(error)}` : '';
+            throw new Error(`Invalid dimension token: '${token.name}: ${JSON.stringify(token[valueProp])}' is not valid and cannot be transformed to 'rem'${details}\n`);
         }
-        return `${floatVal / baseFont}rem`;
     },
 };

package/dist/build/transformers/dimensionToRemPxArray.d.ts

@@ -1,8 +1,9 @@
 import type { Transform } from 'style-dictionary/types';
 /**
- * @description converts dimension tokens value to `rem`, ignores `em` as they are relative to the font size of the parent element
+ * @description converts dimension tokens value to an array with both `rem` and `px` values
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `dimension`
  * @transformer returns an array with the `rem` and `pixel` string
+ * @note Expects W3C DTCG format { value: number, unit: "px" | "rem" | "em" }
  */
 export declare const dimensionToRemPxArray: Transform;

package/dist/build/transformers/dimensionToRemPxArray.js

@@ -1,4 +1,5 @@
 import { isDimension } from '../filters/index.js';
+import { parseDimension } from './utilities/parseDimension.js';
 /**
  * @description base font size from options or 16
  * @param options
@@ -6,22 +7,11 @@ import { isDimension } from '../filters/index.js';
  */
 const getBasePxFontSize = (options) => (options && options.basePxFontSize) || 16;
 /**
- * @description checks if token value has a specific unit
- * @param value token value
- * @param unit unit string like px or value
- * @returns boolean
- */
-const hasUnit = (value, unit) => {
-    if (typeof value === 'number') {
-        return false;
-    }
-    return value.indexOf(unit) > -1;
-};
-/**
- * @description converts dimension tokens value to `rem`, ignores `em` as they are relative to the font size of the parent element
+ * @description converts dimension tokens value to an array with both `rem` and `px` values
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `dimension`
  * @transformer returns an array with the `rem` and `pixel` string
+ * @note Expects W3C DTCG format { value: number, unit: "px" | "rem" | "em" }
  */
 export const dimensionToRemPxArray = {
     name: 'dimension/remPxArray',
@@ -31,16 +21,25 @@ export const dimensionToRemPxArray = {
     transform: (token, config, options) => {
         const valueProp = options.usesDtcg ? '$value' : 'value';
         const baseFont = getBasePxFontSize(config);
-        const floatVal = parseFloat(token[valueProp]);
-        if (isNaN(floatVal)) {
-            throw new Error(`Invalid dimension token: '${token.name}: ${token[valueProp]}' is not valid and cannot be transform to 'rem' \n`);
-        }
-        if (floatVal === 0) {
-            return ['0', '0'];
+        try {
+            const { value, unit } = parseDimension(token[valueProp]);
+            if (value === 0) {
+                return ['0', '0'];
+            }
+            // em values pass through unchanged (relative to parent, cannot convert)
+            if (unit === 'em') {
+                return [`${value}em`, `${value}em`];
+            }
+            // rem values pass through, convert to px for second value
+            if (unit === 'rem') {
+                return [`${value}rem`, `${value * baseFont}px`];
+            }
+            // px values convert to rem for first value
+            return [`${value / baseFont}rem`, `${value}px`];
         }
-        if (hasUnit(token[valueProp], 'rem') || hasUnit(token[valueProp], 'em')) {
-            return [token.value, `${floatVal * baseFont}px`];
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            throw new Error(`Invalid dimension token: '${token.name}: ${JSON.stringify(token[valueProp])}' is not valid and cannot be transformed to 'rem' - ${errorMessage}\n`);
         }
-        return [`${floatVal / baseFont}rem`, `${floatVal}px`];
     },
 };

package/dist/build/transformers/durationToCss.d.ts

@@ -1,8 +1,9 @@
 import type { Transform } from 'style-dictionary/types';
 /**
- * @description converts duration tokens string value to number with `ms` unit
+ * @description converts duration tokens to css duration string
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `duration`
  * @transformer returns a css duration
+ * @note W3C DTCG format: { value: number, unit: "ms" | "s" }
  */
 export declare const durationToCss: Transform;

package/dist/build/transformers/durationToCss.js

@@ -1,9 +1,10 @@
 import { isDuration } from '../filters/index.js';
 /**
- * @description converts duration tokens string value to number with `ms` unit
+ * @description converts duration tokens to css duration string
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `duration`
  * @transformer returns a css duration
+ * @note W3C DTCG format: { value: number, unit: "ms" | "s" }
  */
 export const durationToCss = {
     name: 'duration/css',
@@ -12,18 +13,24 @@ export const durationToCss = {
     filter: isDuration,
     transform: (token, _config, options) => {
         const valueProp = options.usesDtcg ? '$value' : 'value';
-        // throw an error if token value is not a string or does not end with `ms`
-        if (typeof token[valueProp] !== `string` || !(token[valueProp].endsWith(`ms`) || token[valueProp].endsWith(`s`))) {
-            throw new Error(`duration token value must be a string with an "ms" || "s" unit, invalid token: ${token.name} with value: ${token[valueProp]}`);
+        const tokenValue = token[valueProp];
+        // Validate W3C DTCG object format: { value: number, unit: "ms" | "s" }
+        if (typeof tokenValue !== 'object' || tokenValue === null || !('value' in tokenValue) || !('unit' in tokenValue)) {
+            throw new Error(`duration token value must be an object with "value" and "unit" properties (W3C DTCG format). Invalid token: ${token.name} with value: ${JSON.stringify(tokenValue)}`);
         }
-        // get value
-        let value = parseInt(token[valueProp].replace('ms', ''));
-        let unit = `ms`;
-        if (value >= 1000) {
-            value = value / 1000;
-            unit = `s`;
+        const { value, unit } = tokenValue;
+        // Validate unit
+        if (unit !== 'ms' && unit !== 's') {
+            throw new Error(`duration token unit must be "ms" or "s", invalid token: ${token.name} with unit: ${unit}`);
+        }
+        // Validate value is a finite, non-negative number
+        if (typeof value !== 'number' || !Number.isFinite(value) || value < 0) {
+            throw new Error(`duration token value must be a finite, non-negative number, invalid token: ${token.name} with value: ${value}`);
+        }
+        // Convert ms >= 1000 to seconds for cleaner output
+        if (unit === 'ms' && value >= 1000) {
+            return `${value / 1000}s`;
         }
-        // return value
         return `${value}${unit}`;
     },
 };

package/dist/build/transformers/utilities/parseDimension.d.ts

@@ -0,0 +1,12 @@
+import type { DimensionTokenValue } from '../../types/dimensionTokenValue.js';
+/**
+ * @description Parses and validates a dimension value in W3C DTCG object format
+ * @param input - The dimension value in W3C object format { value: number, unit: "px" | "rem" | "em" }
+ * @returns Validated DimensionTokenValue
+ * @throws Error if the input is not a valid W3C dimension object
+ *
+ * W3C DTCG format: { value: 16, unit: "px" }
+ * @note `em` is not in the W3C spec but is supported for practical use
+ * @link https://www.designtokens.org/tr/drafts/format/#dimension
+ */
+export declare const parseDimension: (input: DimensionTokenValue) => DimensionTokenValue;