@cube-dev/ui-kit 0.157.1 → 0.157.3

package/dist/utils/random.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 //#region src/utils/random.ts
 function random(min, max) {
 	const realMin = min < max ? min : max;

package/dist/utils/range.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 //#region src/utils/range.ts
 function range(count) {
 	return Array.from({ length: count }, (_, i) => i);

package/dist/utils/react/RenderCache.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 import { useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 

package/dist/utils/react/Slots.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 import { mergeProps } from "./mergeProps.js";
 import { Children, cloneElement, createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/utils/react/chain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 //#region src/utils/react/chain.ts
 /**
 * Calls all functions in the order they were chained with the same arguments.

package/dist/utils/react/forwardRefWithGenerics.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 //#region src/utils/react/forwardRefWithGenerics.tsx
 /**
 * A helper for creating forwardRef components with generic types.

package/dist/utils/react/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";
 import { isTextOnly } from "./isTextOnly.js";

package/dist/utils/react/interactions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 import { useState } from "react";
 import { useFocus, useFocusVisible } from "react-aria";
 

package/dist/utils/react/isTextOnly.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 import { Children, isValidElement } from "react";
 
 //#region src/utils/react/isTextOnly.ts

package/dist/utils/react/mapProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 //#region src/utils/react/mapProps.ts
 /** Converts AriaButtonProps to CubeButtonProps */
 function ariaToCubeButtonProps(props) {

package/dist/utils/react/mergeProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { mergeIds } from "./useId.js";
 import { mergeStyles } from "@tenphi/tasty";

package/dist/utils/react/nullableValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 //#region src/utils/react/nullableValue.ts
 function castNullableStringValue(props) {
 	return castNullableField(props, ["value", "defaultValue"], "string", (v) => String(v));

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 //#region src/utils/react/resolveIcon.ts
 /**
 * Resolves a dynamic icon prop to its content and slot state.

package/dist/utils/react/sharedStore.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useSyncExternalStore } from "react";
 

package/dist/utils/react/useBufferedValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useCallback, useRef, useState } from "react";
 

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 import { useEffect, useRef } from "react";
 
 //#region src/utils/react/useCombinedRefs.ts

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { useEffect } from "react";
 import { useFocusVisible } from "react-aria";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef } from "react";
 
 //#region src/utils/react/useEventBus.ts

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useEffect, useRef, useState } from "react";
 import { useSSRSafeId } from "@react-aria/ssr";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useIsDarwin.ts

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { useMemo } from "react";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 import * as React$1 from "react";
 
 //#region src/utils/react/useLayoutEffect.tsx

package/dist/utils/react/useLocalStorage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useSyncExternalStore } from "react";
 

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { useCallback, useContext, useEffect, useRef } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useViewportSize.ts

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 //#region src/utils/selection.ts
 /**
 * Deduplicate/toggle keys in a selection: if a key appears twice it is

package/dist/utils/styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 //#region src/utils/styles.ts
 /**
 * Split properties into style and non-style properties.

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.157.1";
+const VERSION = "0.157.3";
 const TASTY_VERSION = "3.0.1";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.157.1",
+  "version": "0.157.3",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -29,7 +29,8 @@
     "docs/components",
     "docs/tasty",
     "docs/glaze",
-    "docs/*.md"
+    "docs/*.md",
+    "tasty.config.ts"
   ],
   "keywords": [
     "uikit"
@@ -91,7 +92,7 @@
     "@statoscope/cli": "^5.20.1",
     "@storybook/addon-docs": "^10.3.6",
     "@storybook/react-vite": "^10.3.6",
-    "@tenphi/eslint-plugin-tasty": "^1.0.0",
+    "@tenphi/eslint-plugin-tasty": "^1.0.3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",

package/tasty.config.ts

@@ -0,0 +1,390 @@
+/**
+ * Tasty Extension Configuration
+ *
+ * This file configures the tasty VSCode extension for the @cube-dev/ui-kit project.
+ * It provides token names, units, presets, and state aliases for validation and autocomplete.
+ *
+ * Projects using @cube-dev/ui-kit can extend this config:
+ * ```typescript
+ * export default {
+ *   extends: '@cube-dev/ui-kit',
+ *   // Add project-specific tokens, presets, etc.
+ * };
+ * ```
+ *
+ * @see https://github.com/tenphi/tasty-vscode-extension for extension documentation
+ */
+
+export default {
+  extends: '@tenphi/tasty',
+
+  /**
+   * Consumers re-export `tasty` from this package rather than from
+   * `@tenphi/tasty`, and the ESLint plugin only inspects `tasty({ styles })`
+   * calls whose import it can trace back to a tracked source. Without this,
+   * every downstream project sees zero findings. Unioned with the parent's
+   * list, so ui-kit's own `@tenphi/tasty` imports stay covered.
+   */
+  importSources: ['@cube-dev/ui-kit'],
+
+  tokens: [
+    // Declared in src/tasty-augment.d.ts but previously absent here, so the
+    // ESLint plugin reported them as unknown once story files started being
+    // linted. Keep the two lists in sync.
+    '#accent-surface-border',
+    '#black',
+    '#danger-border',
+    '#draft',
+    '#light-grey',
+    '#note-border',
+    '#pink-01',
+    '#pink-02',
+    '#primary-border',
+    '#success-border',
+    '#warning-border',
+    '#white',
+    // ---- Glaze: neutral surface ramp (default theme) ----
+    '#surface',
+    '#surface-2',
+    '#surface-3',
+    '#surface-4',
+    '#surface-inverse',
+    '#surface-text',
+    '#surface-text-soft',
+    '#surface-text-soft-2',
+    '#surface-2-text',
+    '#surface-2-text-soft',
+    '#surface-3-text',
+    '#surface-3-text-soft',
+
+    // ---- Glaze: accent system (default theme) ----
+    '#accent-surface',
+    '#accent-surface-2',
+    '#accent-surface-3',
+    '#accent-surface-hover',
+    '#accent-surface-text',
+    '#accent-text',
+    '#accent-text-soft',
+    '#accent-icon',
+    '#accent-disabled-surface',
+    '#accent-disabled-surface-text',
+
+    // ---- Glaze: per-theme primary / purple (purple is alias of primary) ----
+    '#primary',
+    '#primary-bg',
+    '#primary-text',
+    '#primary-text-soft',
+    '#primary-icon',
+    '#primary-hover',
+    '#primary-disabled',
+    '#primary-desaturated',
+    '#primary-surface',
+    '#primary-surface-text',
+    '#primary-accent-surface',
+    '#primary-accent-surface-2',
+    '#primary-accent-surface-3',
+    '#primary-accent-surface-hover',
+    '#primary-accent-surface-text',
+    '#primary-accent-text',
+    '#primary-accent-text-soft',
+    '#primary-accent-icon',
+    '#primary-accent-disabled-surface',
+    '#primary-accent-disabled-surface-text',
+    '#purple',
+    '#purple-bg',
+    '#purple-text',
+    '#purple-text-soft',
+    '#purple-icon',
+    '#purple-hover',
+    '#purple-disabled',
+    '#purple-surface',
+    '#purple-surface-text',
+    '#purple-accent-surface',
+    '#purple-accent-surface-2',
+    '#purple-accent-surface-3',
+    '#purple-accent-surface-hover',
+    '#purple-accent-surface-text',
+    '#purple-accent-text',
+    '#purple-accent-text-soft',
+    '#purple-accent-icon',
+    '#purple-accent-disabled-surface',
+    '#purple-accent-disabled-surface-text',
+
+    // ---- Glaze: per-theme danger ----
+    '#danger',
+    '#danger-bg',
+    '#danger-text',
+    '#danger-text-soft',
+    '#danger-icon',
+    '#danger-hover',
+    '#danger-disabled',
+    '#danger-desaturated',
+    '#danger-surface',
+    '#danger-surface-text',
+    '#danger-accent-surface',
+    '#danger-accent-surface-2',
+    '#danger-accent-surface-3',
+    '#danger-accent-surface-hover',
+    '#danger-accent-surface-text',
+    '#danger-accent-text',
+    '#danger-accent-text-soft',
+    '#danger-accent-icon',
+    '#danger-accent-disabled-surface',
+    '#danger-accent-disabled-surface-text',
+
+    // ---- Glaze: per-theme success ----
+    '#success',
+    '#success-bg',
+    '#success-text',
+    '#success-text-soft',
+    '#success-icon',
+    '#success-hover',
+    '#success-disabled',
+    '#success-desaturated',
+    '#success-surface',
+    '#success-surface-text',
+    '#success-accent-surface',
+    '#success-accent-surface-2',
+    '#success-accent-surface-3',
+    '#success-accent-surface-hover',
+    '#success-accent-surface-text',
+    '#success-accent-text',
+    '#success-accent-text-soft',
+    '#success-accent-icon',
+    '#success-accent-disabled-surface',
+    '#success-accent-disabled-surface-text',
+
+    // ---- Glaze: per-theme warning ----
+    '#warning',
+    '#warning-bg',
+    '#warning-text',
+    '#warning-text-soft',
+    '#warning-icon',
+    '#warning-hover',
+    '#warning-disabled',
+    '#warning-desaturated',
+    '#warning-surface',
+    '#warning-surface-text',
+    '#warning-accent-surface',
+    '#warning-accent-surface-2',
+    '#warning-accent-surface-3',
+    '#warning-accent-surface-hover',
+    '#warning-accent-surface-text',
+    '#warning-accent-text',
+    '#warning-accent-text-soft',
+    '#warning-accent-icon',
+    '#warning-accent-disabled-surface',
+    '#warning-accent-disabled-surface-text',
+
+    // ---- Glaze: per-theme note ----
+    '#note',
+    '#note-bg',
+    '#note-text',
+    '#note-text-soft',
+    '#note-icon',
+    '#note-hover',
+    '#note-disabled',
+    '#note-desaturated',
+    '#note-surface',
+    '#note-surface-text',
+    '#note-accent-surface',
+    '#note-accent-surface-2',
+    '#note-accent-surface-3',
+    '#note-accent-surface-hover',
+    '#note-accent-surface-text',
+    '#note-accent-text',
+    '#note-accent-text-soft',
+    '#note-accent-icon',
+    '#note-accent-disabled-surface',
+    '#note-accent-disabled-surface-text',
+
+    // ---- Glaze: PrismCode syntax palette ----
+    '#code-comment',
+    '#code-punctuation',
+    '#code-keyword',
+    '#code-string',
+    '#code-number',
+    '#code-function',
+    '#code-attribute',
+
+    // ---- Glaze: LoadingAnimation cube faces (opaque) ----
+    '#loading-face-1',
+    '#loading-face-2',
+    '#loading-face-3',
+
+    // ---- Glaze: shadows / overlays / focus / placeholder ----
+    '#shadow-sm',
+    '#shadow-md',
+    '#shadow-lg',
+    '#overlay',
+    '#focus',
+    '#placeholder',
+
+    // ---- Legacy aliases (mapped in src/tokens/colors.ts) ----
+    '#pink',
+    '#text',
+    '#dark',
+    '#dark-bg',
+    '#dark-01',
+    '#dark-02',
+    '#dark-03',
+    '#dark-04',
+    '#dark-05',
+    '#purple-01',
+    '#purple-02',
+    '#purple-03',
+    '#purple-04',
+    '#light',
+    '#border',
+    '#clear',
+    '#shadow',
+    '#minor',
+    '#disabled',
+    '#disabled-surface-text',
+    '#disabled-surface',
+    '#disabled-opacity',
+
+    // ---- Component-local custom tokens ----
+    '#scrollbar-thumb',
+    '#scrollbar-outline',
+    '#scrollbar-bg',
+    '#scrollbar-corner',
+    '#tabs-fade-left',
+    '#tabs-fade-right',
+    '#slider-thumb',
+    '#slider-thumb-hovered',
+    // ColorPicker: the color being edited, and the black/white that reads on
+    // top of it. Both are set as inline custom properties per render.
+    '#color-picker',
+    '#color-picker-contrast',
+    // ColorSwatchGroup: the color of an individual swatch, set inline per option.
+    '#color-swatch',
+
+    // Custom Property Tokens (from src/tokens/base.ts)
+    '$tab-indicator-size',
+    '$font-size',
+    '$line-height',
+    '$input-font-size',
+    '$input-line-height',
+    '$input-letter-spacing',
+    '$disabled-opacity',
+    '$stroke-width',
+    '$large-radius',
+    '$card-radius',
+    '$leaf-sharp-radius',
+    '$fade-width',
+    '$min-dialog-size',
+    '$disclosure-transition',
+    '$tab-transition',
+    '$fade-transition',
+    '$scrollbar-width',
+    '$scrollbar-outline-width',
+    '$scrollbar-radius',
+
+    // Spacing Tokens
+    '$space-xs',
+    '$space-sm',
+    '$space-md',
+    '$space-lg',
+    '$space-xl',
+
+    // Size Tokens
+    '$size-xs',
+    '$size-sm',
+    '$size-md',
+    '$size-lg',
+    '$size-xl',
+
+    // Shadow Tokens
+    '$item-shadow',
+    '$card-shadow',
+    '$dialog-shadow',
+
+    // Layout Tokens
+    '$max-content-width',
+    '$topbar-height',
+    '$devmodebar-height',
+    '$sidebar-width',
+    '$border-radius-base',
+    '$scrollbar-h-left',
+    '$scrollbar-h-width',
+  ],
+
+  // Note: Built-in units (x, r, cr, bw, ow, fs, lh, sf) are always available.
+  // No need to list them here - they're automatically included by the extension.
+
+  /**
+   * Valid recipe names for the `recipe` style property.
+   * These are defined in src/components/Root.tsx via configure().
+   */
+  recipes: [
+    'reset',
+    'button',
+    'input',
+    'input-autofill',
+    'input-placeholder',
+    'input-search-cancel-button',
+  ],
+
+  /**
+   * State alias names for autocomplete.
+   * These are predefined responsive and theme states.
+   */
+  states: ['@mobile', '@compact'],
+
+  /**
+   * Valid preset names for the `preset` style property.
+   * These are defined in src/tokens/typography.ts.
+   *
+   * Note: Preset modifiers (strong, italic, icon, tight) are built-in
+   * and can be combined with any preset using `/` separator (e.g., 't1 / strong', 'h2 / italic').
+   */
+  presets: [
+    // Base text
+    'default',
+
+    // Headings (h1-h6)
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+
+    // Text styles (t1-t4, with medium weight variants)
+    't1',
+    't2',
+    't2m',
+    't3',
+    't3m',
+    't4',
+    't4m',
+
+    // Markdown/prose styles (m1-m3)
+    'm1',
+    'm2',
+    'm3',
+
+    // Paragraph styles (p1-p4)
+    'p1',
+    'p2',
+    'p3',
+    'p4',
+
+    // Caption/uppercase styles (c1-c2)
+    'c1',
+    'c2',
+    'c3',
+
+    // Snippet / monospace styles (s2-s4)
+    's2',
+    's3',
+    's4',
+
+    // Tag typography
+    'tag',
+
+    // Inline semantic styles
+    'inline',
+  ],
+};