diff --git a/apps/dialtone-documentation/docs/components/rich-text-editor.md b/apps/dialtone-documentation/docs/components/rich-text-editor.md
index 6dff6f31b1..1e9c3afb64 100644
--- a/apps/dialtone-documentation/docs/components/rich-text-editor.md
+++ b/apps/dialtone-documentation/docs/components/rich-text-editor.md
@@ -6,23 +6,8 @@ storybook: https://dialtone.dialpad.com/vue/?path=/story/components-rich-text-ed
 keywords: ["rte", "wysiwyg", "markdown", "d-rte", "DtRichTextEditor", "dt-rich-text-editor", "content editor", "rich editor"]
 ---
 
-<dt-notice
-  title="Note"
-  kind="info"
-  class="d-wmx100p d-mbs-300"
->
-  <span>Not a standalone component, please use Message Input instead</span>
-  <template #action>
-    <dt-button
-      :size="200"
-      importance="outlined"
-      kind="muted"
-      @click="onClick"
-    >
-      Action
-    </dt-button>
-  </template>
-</dt-notice>
+> [!INFO]
+> Not a standalone component, please use Message Input recipe instead
 
 <component-combinator component-name="DtRichTextEditor" />
 
diff --git a/packages/combinator/src/components/combinator.vue b/packages/combinator/src/components/combinator.vue
index 1c72dd0041..9b0ce10cb0 100644
--- a/packages/combinator/src/components/combinator.vue
+++ b/packages/combinator/src/components/combinator.vue
@@ -158,8 +158,9 @@ import DtcRenderer from './renderer/renderer.vue';
 import { enumerateGroups } from '@/src/lib/utils';
 import { shouldExclude } from '@/src/lib/exclusion_rules';
 import { buildDependencyMap, shouldHideProp } from '@/src/lib/prop_dependencies';
-import { computed, nextTick, onErrorCaptured, reactive, ref } from 'vue';
+import { computed, nextTick, onErrorCaptured, reactive, ref, watch } from 'vue';
 import { cachedRef, computedModel } from '@/src/lib/utils_vue';
+import { clearTokenCache } from '@/src/lib/tokens';
 import { getComponentInfo } from '@/src/lib/info';
 import {
   SETTINGS_BACKGROUND_KEY,
@@ -232,7 +233,7 @@ const _forceReset = ref(0);
 
 const variantOptions = computed(() => {
   return Object.keys(props.variants ?? {})
-    .filter(key => key !== 'exclusions')
+    .filter(key => key !== 'exclusions' && key !== 'defaults')
     .map(key => ({ value: key, label: key }));
 });
 
@@ -351,6 +352,8 @@ const settings = computedModel(
   },
 );
 
+watch(() => settings.value.root.theme, clearTokenCache);
+
 function updateVariant (e) {
   _presetChanging = true;
   selectedVariant.value = e;
@@ -361,20 +364,29 @@ function updateVariant (e) {
   nextTick(() => { _presetChanging = false; });
 }
 
+/**
+ * Merges variant override data into an info object.
+ *
+ * @param {object} info - The info object to merge into.
+ * @param {object} variantData - The variant data to merge.
+ */
+function mergeVariantData (info, variantData) {
+  if (!variantData) return;
+  Object.entries(variantData).forEach(([memberGroup, members]) => {
+    if (memberGroup === 'exclusions') return;
+    Object.entries(members).forEach(([memberName, member]) => {
+      const infoMember = info[memberGroup]?.find(m => m.name === memberName);
+      if (infoMember) Object.assign(infoMember, member);
+    });
+  });
+}
+
 const defaultInfo = computed(() => {
   const info = cloneInfoMembers(
     getComponentInfo(props.component, props.documentation),
   );
-  const defaultVariant = props.variants?.default;
-  if (defaultVariant) {
-    Object.entries(defaultVariant).forEach(([memberGroup, members]) => {
-      if (memberGroup === 'exclusions') return;
-      Object.entries(members).forEach(([memberName, member]) => {
-        const infoMember = info[memberGroup]?.find(m => m.name === memberName);
-        if (infoMember) Object.assign(infoMember, member);
-      });
-    });
-  }
+  mergeVariantData(info, props.variants?.defaults);
+  mergeVariantData(info, props.variants?.default);
   return info;
 });
 
@@ -406,19 +418,8 @@ function initializeInfo () {
     getComponentInfo(props.component, props.documentation),
   );
 
-  const variantInfo = props.variants?.[activeVariant.value];
-
-  if (variantInfo) {
-    Object.entries(variantInfo).forEach(([memberGroup, members]) => {
-      if (memberGroup === 'exclusions') return;
-      Object.entries(members).forEach(([memberName, member]) => {
-        const infoMember = info[memberGroup]?.find(m => m.name === memberName);
-        if (infoMember) {
-          Object.assign(infoMember, member);
-        }
-      });
-    });
-  }
+  mergeVariantData(info, props.variants?.defaults);
+  mergeVariantData(info, props.variants?.[activeVariant.value]);
 
   info.exclusions = props.variants?.exclusions ?? [];
 
@@ -580,15 +581,17 @@ export default {
     padding-inline-start: var(--dt-spacing-400);
     display: grid;
     flex: 1;
-    align-items: center;
-    justify-content: center;
-    position: relative;
+    place-items: center;
 
     @media screen and (min-width: 640px) {
       min-block-size: var(--dt-size-925);
     }
   }
 
+  &__component-content {
+    display: contents;
+  }
+
   &__resizer {
     inline-size: 32px;
     cursor: col-resize;
@@ -611,7 +614,7 @@ export default {
   }
 
   &__controls {
-    inline-size: var(--dt-size-875);
+    inline-size: var(--dt-size-900);
     max-inline-size: var(--dt-size-1000);
     flex-shrink: 0;
     max-block-size: var(--dt-size-950);
@@ -619,6 +622,7 @@ export default {
 
     :where(.dialtone-playground--fullscreen) & {
       @media screen and (min-width: 640px) {
+        inline-size: var(--dt-size-950);
         max-block-size: 100%;
       }
     }
diff --git a/packages/combinator/src/components/controls/control_segmented.vue b/packages/combinator/src/components/controls/control_segmented.vue
index 00120a9f26..ec5195a555 100644
--- a/packages/combinator/src/components/controls/control_segmented.vue
+++ b/packages/combinator/src/components/controls/control_segmented.vue
@@ -16,6 +16,7 @@
     <dt-segmented-control-item
       v-for="option in options"
       :key="option.value"
+      v-dt-tooltip="option.resolved ?? undefined"
       :value="String(option.value)"
     >
       {{ option.label }}
@@ -27,6 +28,7 @@
 import { DtSegmentedControl, DtSegmentedControlItem, DtText } from '@dialpad/dialtone-vue';
 
 import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { resolveTokenValue } from '@/src/lib/tokens';
 import { computed } from 'vue';
 
 const props = defineProps({
@@ -46,6 +48,14 @@ const props = defineProps({
     type: Function,
     default: (value) => value.toString(),
   },
+  tokenCategory: {
+    type: String,
+    default: undefined,
+  },
+  propValues: {
+    type: Object,
+    default: undefined,
+  },
 });
 
 const emit = defineEmits([VALUE_UPDATE_EVENT]);
@@ -54,6 +64,9 @@ const options = computed(() => {
   return props.validValues?.map(v => ({
     value: v,
     label: props.generateLabel(v),
+    resolved: props.tokenCategory
+      ? resolveTokenValue(props.tokenCategory, v, props.propValues)
+      : null,
   })) ?? [];
 });
 
diff --git a/packages/combinator/src/components/controls/control_selection.vue b/packages/combinator/src/components/controls/control_selection.vue
index c87393506a..dc97a600f9 100644
--- a/packages/combinator/src/components/controls/control_selection.vue
+++ b/packages/combinator/src/components/controls/control_selection.vue
@@ -10,7 +10,8 @@
   <dt-dropdown
     navigation-type="arrow-keys"
     placement="bottom-start"
-    content-class="d-w-250 d-hmx-350"
+    content-width="anchor"
+    content-class="d-hmx-400"
   >
     <template #anchor="{ attrs }">
       <dt-button
@@ -21,8 +22,28 @@
         :disabled="disabled"
         class="d-w100p"
         label-class="d-jc-space-between d-fw-normal"
+        leading-class="d-pis-75"
       >
-        {{ selectedLabel }}<span aria-hidden="true">&thinsp;<!-- hold the space --></span>
+        <template
+          v-if="selectedOption?.resolved && isColor(selectedOption.resolved)"
+          #leading
+        >
+          <span
+            class="d-ba d-bc-subtle d-bar-circle"
+            :style="swatchStyle(selectedOption.resolved)"
+          />
+        </template>
+        {{ selectedLabel }}
+        <span aria-hidden="true">&thinsp;<!-- hold the space --></span>
+        <dt-text
+          v-if="selectedOption?.resolved && !isColor(selectedOption.resolved)"
+          v-dt-tooltip="selectedOption.resolved.includes('/') ? 'Font Size / Line Height' : undefined"
+          kind="body"
+          :size="100"
+          tone="muted"
+        >
+          {{ selectedOption.resolved }}
+        </dt-text>
         <template #endIcon="{ iconSize }">
           <dt-icon-chevrons-up-down
             class="d-fc-muted"
@@ -37,12 +58,35 @@
         :key="option.value"
         role="menuitem"
         navigation-type="arrow-keys"
-        @click="onInput(option.value); close()"
+        :class="{ 'd-o50 d-pe-none': option.disabled, 'd-bgc-moderate-opaque': option.value === value }"
+        :aria-disabled="option.disabled || undefined"
+        @click="!option.disabled && (onInput(option.value), close())"
       >
-        {{ option.label }}
+        <dt-stack
+          direction="row"
+          gap="100"
+          align="baseline"
+          class="d-w100p"
+        >
+          <span
+            v-if="option.resolved && isColor(option.resolved)"
+            class="d-ba d-bc-subtle d-bar-circle d-as-center"
+            :style="swatchStyle(option.resolved)"
+          />
+          <span>{{ option.label }}</span>
+          <dt-text
+            v-if="option.resolved && !isColor(option.resolved)"
+            kind="body"
+            :size="100"
+            tone="muted"
+            class="d-mis-auto"
+          >
+            {{ option.resolved }}
+          </dt-text>
+        </dt-stack>
         <template #end>
           <dt-icon-check
-            size="200"
+            size="100"
             :class="option.value === value ? 'd-o100' : 'd-o0'"
           />
         </template>
@@ -52,10 +96,11 @@
 </template>
 
 <script setup>
-import { DtButton, DtText } from '@dialpad/dialtone-vue';
+import { DtButton, DtStack, DtText } from '@dialpad/dialtone-vue';
 import { DtIconChevronsUpDown, DtIconCheck } from '@dialpad/dialtone-icons/vue';
 
 import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { resolveTokenValue } from '@/src/lib/tokens';
 import { computed } from 'vue';
 
 const props = defineProps({
@@ -79,29 +124,56 @@ const props = defineProps({
     type: Function,
     default: (value) => value.toString(),
   },
+  tokenCategory: {
+    type: String,
+    default: undefined,
+  },
+  propValues: {
+    type: Object,
+    default: undefined,
+  },
+  disabledValues: {
+    type: Set,
+    default: undefined,
+  },
 });
 
 const emit = defineEmits([VALUE_UPDATE_EVENT]);
 
+const isColor = (v) => /^(rgb|oklch|#)/.test(v);
+
+const swatchStyle = (color) => ({
+  backgroundColor: color,
+  inlineSize: 'var(--dt-icon-size-100)',
+  blockSize: 'var(--dt-icon-size-100)',
+});
+
 function onInput (e) {
   emit(VALUE_UPDATE_EVENT, e === 'null' ? null : e);
 }
 
 const options = computed(() => {
   const valueOptions = props.validValues?.map(selection => {
-    return { value: selection, label: props.generateLabel(selection) };
+    const optionDisabled = props.disabledValues?.has(String(selection)) ?? false;
+    const rawResolved = props.tokenCategory
+      ? resolveTokenValue(props.tokenCategory, selection, props.propValues)
+      : null;
+    // Show color swatches even for disabled options; hide non-color values (misleading for disabled sizes)
+    const resolved = optionDisabled && rawResolved && !isColor(rawResolved) ? null : rawResolved;
+    return { value: selection, label: props.generateLabel(selection), resolved, disabled: optionDisabled };
   }) ?? [];
 
   if (props.defaultValue === null || props.defaultValue === undefined) {
-    return [{ value: null, label: 'null' }, ...valueOptions];
+    return [{ value: null, label: '\u2013' }, ...valueOptions];
   }
   return valueOptions;
 });
 
-const selectedLabel = computed(() => {
-  const option = options.value.find(o => o.value === props.value);
-  return option?.label ?? '';
+const selectedOption = computed(() => {
+  return options.value.find(o => String(o.value) === String(props.value));
 });
+
+const selectedLabel = computed(() => selectedOption.value?.label ?? '');
 </script>
 
 <script>
diff --git a/packages/combinator/src/components/option_bar/option_bar_member_group.vue b/packages/combinator/src/components/option_bar/option_bar_member_group.vue
index 258071d5a8..32cae3fc08 100644
--- a/packages/combinator/src/components/option_bar/option_bar_member_group.vue
+++ b/packages/combinator/src/components/option_bar/option_bar_member_group.vue
@@ -23,6 +23,9 @@
           validTypes: member.types,
           tags: member.tags,
           bindings: member.bindings,
+          tokenCategory: member.tokenCategory,
+          propValues,
+          disabledValues: getDisabledValues(key, props.exclusionRules, props.propValues),
         }"
         @update:value="e => updateMember(e, key)"
         @update:control="e => updateControl(e, key)"
@@ -38,16 +41,16 @@ import { computed, reactive } from 'vue';
 import { convert } from '@/src/lib/convert';
 import { controlMap } from '@/src/lib/control';
 import { buildDependencyMap, shouldHideProp } from '@/src/lib/prop_dependencies';
-import { shouldExclude } from '@/src/lib/exclusion_rules';
+import { shouldExclude, getDisabledValues } from '@/src/lib/exclusion_rules';
 import { isIconSlot } from '@/src/lib/icons';
 import { DtStack } from '@dialpad/dialtone-vue';
 
 const ICON_SLOT_ORDER = ['startIcon', 'endIcon', 'blockStartIcon', 'blockEndIcon', 'icon'];
 
 const PROP_PRIORITY = [
-  'title', 'as', 'label', 'size', 'kind',
-  'importance', 'placement', 'tone', 'align', 'density', 'strength',
-  'type', 'underline', 'selected', 'active', 'disabled', 'color', 'description',
+  'title', 'as', 'label', 'importance', 'kind', 'size',
+  'placement', 'tone', 'align', 'density', 'strength',
+  'type', 'underline', 'selected', 'active', 'disabled', 'showDivider', 'color', 'description',
 ];
 
 const SLOT_PRIORITY = ['start', 'end', 'inlineStart', 'inlineEnd', 'blockStart', 'blockEnd', 'leading', 'trailing'];
diff --git a/packages/combinator/src/components/renderer/renderer_target.vue b/packages/combinator/src/components/renderer/renderer_target.vue
index cdb065bf58..692bcc4c9d 100644
--- a/packages/combinator/src/components/renderer/renderer_target.vue
+++ b/packages/combinator/src/components/renderer/renderer_target.vue
@@ -89,7 +89,9 @@ function freshContainer () {
     render(null, wrapper.value.firstChild);
   }
   wrapper.value.replaceChildren();
-  return wrapper.value.appendChild(document.createElement('div'));
+  const container = document.createElement('div');
+  container.className = 'dialtone-playground__component-content';
+  return wrapper.value.appendChild(container);
 }
 
 /**
diff --git a/packages/combinator/src/lib/exclusion_rules.js b/packages/combinator/src/lib/exclusion_rules.js
index 77e39e6bbb..ac7cb746ed 100644
--- a/packages/combinator/src/lib/exclusion_rules.js
+++ b/packages/combinator/src/lib/exclusion_rules.js
@@ -1,3 +1,11 @@
+function areConditionsMet (rule, propValues) {
+  return Object.entries(rule.when).every(([prop, condition]) =>
+    typeof condition === 'function'
+      ? condition(propValues[prop])
+      : condition === propValues[prop],
+  );
+}
+
 /**
  * Determines if a member should be excluded (hidden) based on exclusion rules
  * and the current prop values.
@@ -11,12 +19,27 @@
 export function shouldExclude (memberName, memberGroup, exclusionRules, propValues) {
   if (!exclusionRules?.length) return false;
   return exclusionRules.some(rule => {
-    const conditionsMet = Object.entries(rule.when).every(([prop, condition]) =>
-      typeof condition === 'function'
-        ? condition(propValues[prop])
-        : condition === propValues[prop],
-    );
-    if (!conditionsMet) return false;
+    if (!areConditionsMet(rule, propValues)) return false;
     return rule.hide?.[memberGroup]?.includes(memberName) ?? false;
   });
 }
+
+/**
+ * Collects disabled values for a specific prop based on exclusion rules
+ * and the current prop values.
+ *
+ * @param {string} propName - The prop to check for disabled values.
+ * @param {Array} exclusionRules - Array of exclusion rule objects.
+ * @param {object} propValues - Current prop values.
+ * @returns {Set} Set of disabled value strings.
+ */
+export function getDisabledValues (propName, exclusionRules, propValues) {
+  const disabled = new Set();
+  if (!exclusionRules?.length) return disabled;
+  for (const rule of exclusionRules) {
+    if (!areConditionsMet(rule, propValues)) continue;
+    const values = rule.disableValues?.props?.[propName];
+    if (values) values.forEach(v => disabled.add(String(v)));
+  }
+  return disabled;
+}
diff --git a/packages/combinator/src/lib/exclusion_rules.test.js b/packages/combinator/src/lib/exclusion_rules.test.js
new file mode 100644
index 0000000000..0601854079
--- /dev/null
+++ b/packages/combinator/src/lib/exclusion_rules.test.js
@@ -0,0 +1,75 @@
+import { assert } from 'chai';
+import { shouldExclude, getDisabledValues } from './exclusion_rules';
+
+const EQUALITY_RULE = { when: { kind: 'body' }, disableValues: { props: { size: ['500'] } } };
+const PREDICATE_RULE = { when: { kind: v => v !== 'headline' }, disableValues: { props: { size: ['500'] } } };
+const HIDE_RULE = { when: { kind: 'count' }, hide: { props: ['decoration'] } };
+
+describe('exclusion_rules', function () {
+  describe('getDisabledValues', function () {
+    it('should return empty Set when no rules', function () {
+      assert.equal(getDisabledValues('size', [], { kind: 'body' }).size, 0);
+    });
+
+    it('should return empty Set when rules is undefined', function () {
+      assert.equal(getDisabledValues('size', undefined, { kind: 'body' }).size, 0);
+    });
+
+    it('should contain value when equality condition matches', function () {
+      assert.isTrue(getDisabledValues('size', [EQUALITY_RULE], { kind: 'body' }).has('500'));
+    });
+
+    it('should return empty Set when equality condition does not match', function () {
+      assert.equal(getDisabledValues('size', [EQUALITY_RULE], { kind: 'headline' }).size, 0);
+    });
+
+    it('should contain value when predicate condition matches', function () {
+      assert.isTrue(getDisabledValues('size', [PREDICATE_RULE], { kind: 'body' }).has('500'));
+    });
+
+    it('should return empty Set when predicate condition does not match', function () {
+      assert.equal(getDisabledValues('size', [PREDICATE_RULE], { kind: 'headline' }).size, 0);
+    });
+
+    it('should union disabled values across multiple matching rules', function () {
+      const rules = [
+        { when: { kind: 'body' }, disableValues: { props: { size: ['500'] } } },
+        { when: { kind: 'body' }, disableValues: { props: { size: ['600'] } } },
+      ];
+      assert.equal(getDisabledValues('size', rules, { kind: 'body' }).size, 2);
+    });
+
+    it('should coerce numeric values to strings', function () {
+      const rules = [
+        { when: { kind: 'body' }, disableValues: { props: { size: [500] } } },
+      ];
+      assert.isTrue(getDisabledValues('size', rules, { kind: 'body' }).has('500'));
+    });
+
+    it('should return empty Set for a prop not in disableValues', function () {
+      assert.equal(getDisabledValues('tone', [EQUALITY_RULE], { kind: 'body' }).size, 0);
+    });
+
+    it('should ignore rules that only have hide', function () {
+      assert.equal(getDisabledValues('decoration', [HIDE_RULE], { kind: 'count' }).size, 0);
+    });
+  });
+
+  describe('shouldExclude', function () {
+    it('should return false when no rules', function () {
+      assert.isFalse(shouldExclude('size', 'props', [], {}));
+    });
+
+    it('should return true when condition matches and member is in hide list', function () {
+      assert.isTrue(shouldExclude('decoration', 'props', [HIDE_RULE], { kind: 'count' }));
+    });
+
+    it('should return false when condition does not match', function () {
+      assert.isFalse(shouldExclude('decoration', 'props', [HIDE_RULE], { kind: 'label' }));
+    });
+
+    it('should return false when member is not in hide list', function () {
+      assert.isFalse(shouldExclude('size', 'props', [HIDE_RULE], { kind: 'count' }));
+    });
+  });
+});
diff --git a/packages/combinator/src/lib/prop_dependencies.js b/packages/combinator/src/lib/prop_dependencies.js
index e79ef4e46e..dc7cb859bf 100644
--- a/packages/combinator/src/lib/prop_dependencies.js
+++ b/packages/combinator/src/lib/prop_dependencies.js
@@ -24,6 +24,7 @@ const DESCRIPTION_RE = /only\s+appl\w+\s+when\s+(?:the\s+|using\s+the\s+)?[`"']?
  * @type {RegExp}
  */
 const EXCLUDED_SUFFIX_RE = /(?:Class|ChildProps|Id)$/;
+const EXCLUDED_NAMES = new Set(['showDivider']);
 
 /**
  * Builds a map from child prop name → parent prop name.
@@ -39,7 +40,7 @@ export function buildDependencyMap (members) {
 
   // Strategy 1: description parsing
   for (const member of members) {
-    if (!member.description) continue;
+    if (!member.description || EXCLUDED_NAMES.has(member.name)) continue;
     const match = member.description.match(DESCRIPTION_RE);
     if (match) {
       const parentName = match[1];
diff --git a/packages/combinator/src/lib/tokens.js b/packages/combinator/src/lib/tokens.js
new file mode 100644
index 0000000000..dbcf45265d
--- /dev/null
+++ b/packages/combinator/src/lib/tokens.js
@@ -0,0 +1,230 @@
+const TEXT_SIZE_TO_CSS_SUFFIX = {
+  100: 'xs',
+  200: 'sm',
+  300: 'md',
+  400: 'lg',
+  500: 'xl',
+  600: '2xl',
+  700: '3xl',
+};
+
+const cache = new Map();
+
+let measureEl = null;
+
+/**
+ * Clears the token resolution cache. Call on theme change so resolved
+ * values (which depend on live CSS custom properties) are re-read.
+ */
+export function clearTokenCache () {
+  cache.clear();
+}
+
+function getMeasureElement () {
+  if (!measureEl) {
+    measureEl = document.createElement('div');
+    measureEl.style.cssText = 'position:fixed;top:-9999px;left:-9999px;visibility:hidden;pointer-events:none;';
+    document.body.appendChild(measureEl);
+  }
+  return measureEl;
+}
+
+/**
+ * Resolves a CSS custom property to its computed px value
+ * by applying it to a hidden element's width.
+ *
+ * @param {string} varName - CSS custom property name (e.g. '--dt-spacing-200')
+ * @returns {string|null} Resolved value (e.g. '16px') or null
+ */
+function resolveCssVar (varName) {
+  const SENTINEL = '8739.5px';
+  const el = getMeasureElement();
+  el.style.width = `var(${varName}, ${SENTINEL})`;
+  const resolvedWidth = getComputedStyle(el).width;
+  el.style.width = '';
+  if (!resolvedWidth || resolvedWidth === 'auto' || resolvedWidth === SENTINEL) return null;
+  return resolvedWidth;
+}
+
+/**
+ * Formats a pixel string for display: strips trailing zeros, rounds to 1 decimal.
+ *
+ * @param {string} pxValue - e.g. '16px', '12.800000190734863px'
+ * @returns {string} e.g. '16px', '12.8px'
+ */
+function formatPx (pxValue) {
+  const num = parseFloat(pxValue);
+  if (isNaN(num)) return pxValue;
+  const rounded = Math.round(num * 10) / 10;
+  return `${rounded}px`;
+}
+
+/**
+ * Resolves a token value to a human-readable display string.
+ *
+ * @param {string} category - The token category (e.g. 'spacing', 'icon-size', 'typography-size')
+ * @param {string|number} value - The prop value (e.g. '200', '300')
+ * @param {object} [propValues] - Current prop values (needed for typography-size to read 'kind')
+ * @returns {string|null} Display string (e.g. '16px', '14px', '16px / 1.6') or null
+ */
+export function resolveTokenValue (category, value, propValues) {
+  const cacheKey = `${category}:${value}:${propValues?.kind ?? ''}`;
+  if (cache.has(cacheKey)) return cache.get(cacheKey);
+
+  let result = null;
+
+  // Support colon syntax: 'typography-size:label', 'color:d-fc:color'
+  const [baseCategory, ...categoryArgs] = category.split(':');
+
+  switch (baseCategory) {
+    case 'spacing':
+      result = resolveSpacing(value);
+      break;
+    case 'icon-size':
+      result = resolveIconSize(value);
+      break;
+    case 'typography-size':
+      result = resolveTypographySize(value, propValues, categoryArgs[0]);
+      break;
+    case 'line-height':
+      result = resolveLineHeight(value);
+      break;
+    case 'component-size':
+      if (categoryArgs[0]) result = resolveComponentSize(categoryArgs[0], value);
+      break;
+    case 'color':
+      if (categoryArgs[0]) result = resolveColor(categoryArgs[0], categoryArgs[1] || 'color', value);
+      break;
+  }
+
+  cache.set(cacheKey, result);
+  return result;
+}
+
+/**
+ * Resolves a computed color from CSS classes applied to the measure element.
+ *
+ * classPrefix patterns:
+ *   'class[attr]'       — sets attr=value, reads from child element (avatar family)
+ *   'class--'           — applies 'class class--{value}' (BEM modifier)
+ *   'class--modifier-'  — applies 'class class--modifier-{value}' (BEM sub-modifier)
+ *   'class'             — applies 'class-{value}' (utility class)
+ *
+ * cssProperty patterns:
+ *   'color', 'backgroundColor'  — standard computed style property
+ *   '--custom-prop'             — read via getPropertyValue
+ *   '--custom-prop-'            — value appended: '--x-' + 'foo' → '--x-foo'
+ */
+function resolveColor (classPrefix, cssProperty, value) {
+  const el = getMeasureElement();
+  const bracketMatch = classPrefix.match(/^(.+)\[(.+)\]$/);
+  try {
+    if (bracketMatch) {
+      el.className = bracketMatch[1];
+      el.setAttribute(bracketMatch[2], value);
+      // Avatar family needs a child element for OKLCH color computation
+      // (background-color is on .d-avatar__canvas-inner, inheriting vars from parent)
+      if (bracketMatch[2] === 'data-avatar-family') {
+        el.setAttribute('data-avatar-variant', '3');
+        let child = el.firstElementChild;
+        if (!child) {
+          child = document.createElement('div');
+          el.appendChild(child);
+        }
+        child.className = `${bracketMatch[1]}__canvas-inner`;
+      }
+    // BEM modifier pattern: prefix contains '--' (e.g., 'd-badge--', 'd-badge--decorate-')
+    // → class = 'd-badge d-badge--{value}' or 'd-badge d-badge--decorate-{value}'
+    } else if (classPrefix.includes('--')) {
+      const base = classPrefix.slice(0, classPrefix.indexOf('--'));
+      el.className = `${base} ${classPrefix}${value}`;
+    // Utility pattern: no '--' (e.g., 'd-fc')
+    // → class = 'd-fc-{value}'
+    } else {
+      el.className = `${classPrefix}-${value}`;
+    }
+    const target = (bracketMatch && el.firstElementChild) || el;
+    const styles = getComputedStyle(target);
+    // Custom property that ends with '-' gets value appended (e.g., '--presence-color-background-' + 'active')
+    const propName = cssProperty.endsWith('-') ? `${cssProperty}${value}` : cssProperty;
+    const resolved = propName.startsWith('--')
+      ? styles.getPropertyValue(propName).trim()
+      : styles[propName];
+    if (!resolved || resolved === 'rgba(0, 0, 0, 0)' || resolved === 'transparent') return null;
+    return resolved;
+  } finally {
+    el.className = '';
+    if (bracketMatch) {
+      el.removeAttribute(bracketMatch[2]);
+      el.removeAttribute('data-avatar-variant');
+      if (el.firstElementChild) el.removeChild(el.firstElementChild);
+    }
+  }
+}
+
+function resolveSpacing (value) {
+  const px = resolveCssVar(`--dt-spacing-${value}`);
+  return px ? formatPx(px) : null;
+}
+
+function resolveIconSize (value) {
+  const px = resolveCssVar(`--dt-icon-size-${value}`);
+  return px ? formatPx(px) : null;
+}
+
+function resolveComponentSize (componentClass, value) {
+  const el = getMeasureElement();
+  try {
+    // Apply the size modifier class to set the CSS custom property,
+    // then read it via width. The actual dimension lives on a child element
+    // (e.g. .d-avatar__canvas), but the custom property is set on the root.
+    el.className = `d-${componentClass} d-${componentClass}--size-${value}`;
+    el.style.width = `var(--${componentClass}-size-shape)`;
+    const size = getComputedStyle(el).width;
+    if (!size || size === 'auto' || size === '0px') return null;
+    return formatPx(size);
+  } finally {
+    el.className = '';
+    el.style.width = '';
+  }
+}
+
+function resolveLineHeight (value) {
+  const raw = getComputedStyle(document.documentElement)
+    .getPropertyValue(`--dt-font-line-height-${value}`)
+    .trim();
+  if (!raw) return null;
+  return raw;
+}
+
+function resolveTypographySize (value, propValues, kindOverride) {
+  const kind = kindOverride || propValues?.kind || 'body';
+  const suffix = TEXT_SIZE_TO_CSS_SUFFIX[value];
+  if (!suffix) return null;
+
+  const el = getMeasureElement();
+  let fontSize, lineHeight;
+  try {
+    el.className = `d-text-${kind} d-text-${kind}--${suffix}`;
+    el.textContent = 'X';
+    const styles = getComputedStyle(el);
+    fontSize = styles.fontSize;
+    lineHeight = styles.lineHeight;
+  } finally {
+    el.className = '';
+    el.textContent = '';
+  }
+
+  if (!fontSize || fontSize === '0px') return null;
+
+  const formattedSize = formatPx(fontSize);
+  if (lineHeight && lineHeight !== 'normal') {
+    const lhNum = parseFloat(lineHeight);
+    const fsNum = parseFloat(fontSize);
+    if (!isNaN(lhNum) && !isNaN(fsNum) && fsNum > 0) {
+      const ratio = Math.round((lhNum / fsNum) * 10) / 10;
+      return `${formattedSize} / ${ratio}`;
+    }
+  }
+  return formattedSize;
+}
diff --git a/packages/combinator/src/variants/variants_avatar.js b/packages/combinator/src/variants/variants_avatar.js
index de12f79ad9..49487dfd3d 100644
--- a/packages/combinator/src/variants/variants_avatar.js
+++ b/packages/combinator/src/variants/variants_avatar.js
@@ -1,6 +1,13 @@
-/* eslint-disable max-len */
+ 
 
 export default {
+  defaults: {
+    props: {
+      size: { tokenCategory: 'component-size:avatar' },
+      family: { tokenCategory: 'color:d-avatar[data-avatar-family]:backgroundColor' },
+    },
+  },
+
   exclusions: [
     {
       when: { iconOnly: true },
diff --git a/packages/combinator/src/variants/variants_badge.js b/packages/combinator/src/variants/variants_badge.js
index da24ad9c31..5091c52795 100644
--- a/packages/combinator/src/variants/variants_badge.js
+++ b/packages/combinator/src/variants/variants_badge.js
@@ -1,6 +1,14 @@
-/* eslint-disable max-len */
+ 
 
 export default {
+  defaults: {
+    props: {
+      iconSize: { tokenCategory: 'icon-size' },
+      type: { tokenCategory: 'color:d-badge--:backgroundColor' },
+      decoration: { tokenCategory: 'color:d-badge--decorate-:--badge-decorative-color' },
+    },
+  },
+
   exclusions: [
     {
       when: { kind: 'count' },
@@ -18,6 +26,14 @@ export default {
       when: { decoration: v => !!v },
       hide: { slots: ['startIcon', 'endIcon'] },
     },
+    {
+      when: { kind: 'count' },
+      disableValues: { props: { type: ['ai'] } },
+    },
+    {
+      when: { type: 'ai' },
+      disableValues: { props: { kind: ['count'] } },
+    },
   ],
 
   default: {
@@ -49,8 +65,8 @@ export default {
   },
 
   locked: {
-    iconSize: {
-      initialValue: '100',
+    props: {
+      iconSize: { initialValue: '100' },
     },
     slots: {
       startIcon: { initialValue: '<dt-icon-lock :size="iconSize" />' },
diff --git a/packages/combinator/src/variants/variants_button.js b/packages/combinator/src/variants/variants_button.js
index 73e20dffd8..fad2bfab3d 100644
--- a/packages/combinator/src/variants/variants_button.js
+++ b/packages/combinator/src/variants/variants_button.js
@@ -1,5 +1,12 @@
-/* eslint-disable max-len */
+
 export default {
+  defaults: {
+    props: {
+      kind: { tokenCategory: 'color:d-btn--:color' },
+      linkKind: { tokenCategory: 'color:d-link--:color' },
+    },
+  },
+
   exclusions: [
     {
       when: { link: true },
@@ -7,10 +14,38 @@ export default {
         props: ['importance', 'kind', 'circle', 'loading', 'active', 'type', 'size'],
       },
     },
+    {
+      when: { kind: 'muted' },
+      disableValues: { props: { importance: ['primary'] } },
+    },
+    {
+      when: { importance: 'primary' },
+      disableValues: { props: { kind: ['muted'] } },
+    },
     {
       when: { kind: 'unstyled' },
       hide: { props: ['importance'] },
     },
+    {
+      when: { circle: true, kind: 'default' },
+      disableValues: { props: { importance: ['primary'] } },
+    },
+    {
+      when: { circle: true, kind: 'critical' },
+      disableValues: { props: { importance: ['outlined'] } },
+    },
+    {
+      when: { circle: true, kind: 'muted' },
+      disableValues: { props: { importance: ['primary'] } },
+    },
+    {
+      when: { circle: true, importance: 'primary' },
+      disableValues: { props: { kind: ['default', 'muted'] } },
+    },
+    {
+      when: { circle: true, importance: 'outlined' },
+      disableValues: { props: { kind: ['critical'] } },
+    },
     {
       when: { href: v => !!v },
       hide: { props: ['type'] },
diff --git a/packages/combinator/src/variants/variants_checkbox.js b/packages/combinator/src/variants/variants_checkbox.js
index b0d14f31e2..ee8519ad31 100644
--- a/packages/combinator/src/variants/variants_checkbox.js
+++ b/packages/combinator/src/variants/variants_checkbox.js
@@ -1,5 +1,11 @@
 /* eslint-disable max-len */
 export default {
+  defaults: {
+    props: {
+      labelSize: { tokenCategory: 'typography-size:label' },
+    },
+  },
+
   default: {
     props: {
       label: {
diff --git a/packages/combinator/src/variants/variants_description_list.js b/packages/combinator/src/variants/variants_description_list.js
index 10f538b4b8..a722cb9eee 100644
--- a/packages/combinator/src/variants/variants_description_list.js
+++ b/packages/combinator/src/variants/variants_description_list.js
@@ -1,6 +1,12 @@
-/* eslint-disable max-len */
+
 
 export default {
+  defaults: {
+    props: {
+      gap: { tokenCategory: 'spacing' },
+    },
+  },
+
   default: {
     props: {
       items: {
@@ -14,7 +20,7 @@ export default {
         initialValue: 'row',
       },
       gap: {
-        initialValue: '400',
+        initialValue: '100',
       },
     },
   },
diff --git a/packages/combinator/src/variants/variants_emoji.js b/packages/combinator/src/variants/variants_emoji.js
index 9bfb937d51..812f325793 100644
--- a/packages/combinator/src/variants/variants_emoji.js
+++ b/packages/combinator/src/variants/variants_emoji.js
@@ -1,6 +1,12 @@
-/* eslint-disable max-len */
+ 
 
 export default {
+  defaults: {
+    props: {
+      size: { tokenCategory: 'icon-size' },
+    },
+  },
+
   default: {
     props: {
       code: {
diff --git a/packages/combinator/src/variants/variants_emoji_text_wrapper.js b/packages/combinator/src/variants/variants_emoji_text_wrapper.js
index 0f487c9255..cf5badc6e1 100644
--- a/packages/combinator/src/variants/variants_emoji_text_wrapper.js
+++ b/packages/combinator/src/variants/variants_emoji_text_wrapper.js
@@ -1,6 +1,12 @@
-/* eslint-disable max-len */
+ 
 
 export default {
+  defaults: {
+    props: {
+      size: { tokenCategory: 'icon-size' },
+    },
+  },
+
   default: {
     slots: {
       default: {
diff --git a/packages/combinator/src/variants/variants_icon.js b/packages/combinator/src/variants/variants_icon.js
index 27669a2670..d8c46ef20d 100644
--- a/packages/combinator/src/variants/variants_icon.js
+++ b/packages/combinator/src/variants/variants_icon.js
@@ -1,6 +1,12 @@
-/* eslint-disable max-len */
+ 
  
 export default {
+  defaults: {
+    props: {
+      size: { tokenCategory: 'icon-size' },
+    },
+  },
+
   default: {
     props: {
       name: {
diff --git a/packages/combinator/src/variants/variants_input.js b/packages/combinator/src/variants/variants_input.js
index f070b7e56f..b22fa81143 100644
--- a/packages/combinator/src/variants/variants_input.js
+++ b/packages/combinator/src/variants/variants_input.js
@@ -2,6 +2,12 @@
 
 
 export default {
+  defaults: {
+    props: {
+      labelSize: { tokenCategory: 'typography-size:label' },
+    },
+  },
+
   exclusions: [
     {
       when: { showLabel: false },
diff --git a/packages/combinator/src/variants/variants_link.js b/packages/combinator/src/variants/variants_link.js
index e50dbaa3f1..9301204c8c 100644
--- a/packages/combinator/src/variants/variants_link.js
+++ b/packages/combinator/src/variants/variants_link.js
@@ -1,6 +1,12 @@
-/* eslint-disable max-len */
+ 
  
 export default {
+  defaults: {
+    props: {
+      tone: { tokenCategory: 'color:d-link--:color' },
+    },
+  },
+
   default: {
     slots: {
       default: {
diff --git a/packages/combinator/src/variants/variants_loader.js b/packages/combinator/src/variants/variants_loader.js
index d7465848e8..f2b342bce0 100644
--- a/packages/combinator/src/variants/variants_loader.js
+++ b/packages/combinator/src/variants/variants_loader.js
@@ -1,6 +1,12 @@
-/* eslint-disable max-len */
+ 
 
 export default {
+  defaults: {
+    props: {
+      size: { tokenCategory: 'icon-size' },
+    },
+  },
+
   default: {
     props: {
       size: { initialValue: '500' },
diff --git a/packages/combinator/src/variants/variants_notice.js b/packages/combinator/src/variants/variants_notice.js
index f7a8656738..be2e9bae22 100644
--- a/packages/combinator/src/variants/variants_notice.js
+++ b/packages/combinator/src/variants/variants_notice.js
@@ -1,6 +1,15 @@
- 
- 
+
+
 export default {
+  defaults: {
+    props: {
+      kind: { tokenCategory: 'color:d-notice--:backgroundColor' },
+    },
+    slots: {
+      action: { initialValue: '<dt-button :size="200" importance="outlined" kind="muted">Action</dt-button>' },
+    },
+  },
+
   default: {
     slots: {
       default: {
diff --git a/packages/combinator/src/variants/variants_presence.js b/packages/combinator/src/variants/variants_presence.js
index b658585140..3c37d4aa26 100644
--- a/packages/combinator/src/variants/variants_presence.js
+++ b/packages/combinator/src/variants/variants_presence.js
@@ -1,6 +1,12 @@
-/* eslint-disable max-len */
+ 
  
 export default {
+  defaults: {
+    props: {
+      presence: { tokenCategory: 'color:d-presence--:--presence-color-background-' },
+    },
+  },
+
   default: {
     props: {
       presence: {
diff --git a/packages/combinator/src/variants/variants_progress_circle.js b/packages/combinator/src/variants/variants_progress_circle.js
index 603ac53c81..5034c52c72 100644
--- a/packages/combinator/src/variants/variants_progress_circle.js
+++ b/packages/combinator/src/variants/variants_progress_circle.js
@@ -1,6 +1,13 @@
-/* eslint-disable max-len */
+ 
 
 export default {
+  defaults: {
+    props: {
+      size: { tokenCategory: 'icon-size' },
+      kind: { tokenCategory: 'color:d-progress-circle--:--progress-color' },
+    },
+  },
+
   default: {
     props: {
       progress: {
diff --git a/packages/combinator/src/variants/variants_radio.js b/packages/combinator/src/variants/variants_radio.js
index 4843b073a8..9fbd052c3f 100644
--- a/packages/combinator/src/variants/variants_radio.js
+++ b/packages/combinator/src/variants/variants_radio.js
@@ -1,6 +1,12 @@
  
 
 export default {
+  defaults: {
+    props: {
+      labelSize: { tokenCategory: 'typography-size:label' },
+    },
+  },
+
   default: {
     props: {
       label: {
diff --git a/packages/combinator/src/variants/variants_select_menu.js b/packages/combinator/src/variants/variants_select_menu.js
index f421a20e2c..98b7776bde 100644
--- a/packages/combinator/src/variants/variants_select_menu.js
+++ b/packages/combinator/src/variants/variants_select_menu.js
@@ -2,6 +2,12 @@
  
 
 export default {
+  defaults: {
+    props: {
+      labelSize: { tokenCategory: 'typography-size:label' },
+    },
+  },
+
   exclusions: [
     {
       when: { showLabel: false },
diff --git a/packages/combinator/src/variants/variants_split_button.js b/packages/combinator/src/variants/variants_split_button.js
index 0e09dceda3..9f787bdef3 100644
--- a/packages/combinator/src/variants/variants_split_button.js
+++ b/packages/combinator/src/variants/variants_split_button.js
@@ -2,11 +2,25 @@
 
 
 export default {
+  defaults: {
+    props: {
+      kind: { tokenCategory: 'color:d-btn--:color' },
+    },
+  },
+
   exclusions: [
     {
       when: { importance: v => v !== 'clear' },
       hide: { props: ['showDivider'] },
     },
+    {
+      when: { kind: 'muted' },
+      disableValues: { props: { importance: ['primary'] } },
+    },
+    {
+      when: { importance: 'primary' },
+      disableValues: { props: { kind: ['muted'] } },
+    },
   ],
 
   default: {
diff --git a/packages/combinator/src/variants/variants_stack.js b/packages/combinator/src/variants/variants_stack.js
index 212083ff9a..8226e134d8 100644
--- a/packages/combinator/src/variants/variants_stack.js
+++ b/packages/combinator/src/variants/variants_stack.js
@@ -1,6 +1,12 @@
 /* eslint-disable max-len */
 
 export default {
+  defaults: {
+    props: {
+      gap: { tokenCategory: 'spacing' },
+    },
+  },
+
   default: {
     props: {
       gap: {
@@ -9,7 +15,9 @@ export default {
     },
     slots: {
       default: {
-        initialValue: '<div class="d-bgc-moderate-opaque d-p-200 d-bar8">Stack item 1</div><div class="d-bgc-moderate-opaque d-p-200 d-bar8">Stack item 2<br>with second line</div><div class="d-bgc-moderate-opaque d-p-200 d-bar8">Stack item 3</div>',
+        initialValue: `<div class="d-bgc-moderate-opaque d-p-200 d-bar8">Stack item 1</div>
+<div class="d-bgc-moderate-opaque d-p-200 d-bar8">Stack item 2<br>with second line</div>
+<div class="d-bgc-moderate-opaque d-p-200 d-bar8">Stack item 3</div>`,
       },
     },
   },
@@ -22,7 +30,9 @@ export default {
     },
     slots: {
       default: {
-        initialValue: '<div class="d-bgc-moderate-opaque d-p-200 d-bar8">Stack item 1</div><div class="d-bgc-moderate-opaque d-p-200 d-bar8">Stack item 2</div><div class="d-bgc-moderate-opaque d-p-200 d-bar8">Stack item 3</div>',
+        initialValue: `<div class="d-bgc-moderate-opaque d-p-200 d-bar8">Stack item 1</div>
+<div class="d-bgc-moderate-opaque d-p-200 d-bar8">Stack item 2</div>
+<div class="d-bgc-moderate-opaque d-p-200 d-bar8">Stack item 3</div>`,
       },
     },
   },
@@ -41,7 +51,9 @@ export default {
     },
     slots: {
       default: {
-        initialValue: '<div class="d-bgc-moderate-opaque d-p-200 d-bar8">Stack item 1</div><div class="d-bgc-moderate-opaque d-p-200 d-bar8">Stack item 2<br>with second line</div><div class="d-bgc-moderate-opaque d-p-200 d-bar8">Stack item 3</div>',
+        initialValue: `<div class="d-bgc-moderate-opaque d-p-200 d-bar8">Stack item 1</div>
+<div class="d-bgc-moderate-opaque d-p-200 d-bar8">Stack item 2<br>with second line</div>
+<div class="d-bgc-moderate-opaque d-p-200 d-bar8">Stack item 3</div>`,
       },
     },
   },
@@ -60,7 +72,9 @@ export default {
     },
     slots: {
       default: {
-        initialValue: '<div class="d-bgc-moderate-opaque d-p-200 d-bar8"> <dt-text kind="body" :size="100">Small body</dt-text> </div> <div class="d-bgc-moderate-opaque d-p-200 d-bar8"> <dt-text kind="headline" :size="600">2xl headline</dt-text> </div> <div class="d-bgc-moderate-opaque d-p-200 d-bar8"> <dt-text kind="headline" size="lg">Large headline</dt-text> </div>',
+        initialValue: `<div class="d-bgc-moderate-opaque d-p-100 d-bar8"> <dt-text kind="body" :size="100">Small body</dt-text> </div>
+<div class="d-bgc-moderate-opaque d-p-200 d-bar8"> <dt-text kind="headline" :size="600">2xl headline</dt-text> </div>
+<div class="d-bgc-moderate-opaque d-p-200 d-bar8"> <dt-text kind="headline" :size="400">Large headline</dt-text> </div>`,
       },
     },
   },
diff --git a/packages/combinator/src/variants/variants_tab_group.js b/packages/combinator/src/variants/variants_tab_group.js
index 780c819edb..7f6834df18 100644
--- a/packages/combinator/src/variants/variants_tab_group.js
+++ b/packages/combinator/src/variants/variants_tab_group.js
@@ -6,9 +6,6 @@ export default {
   default: {
     props: {
       selected: { initialValue: 'panel-1' },
-      tabListClass: {
-        initialValue: 'd-w-600',
-      },
     },
     slots: {
       tabs: {
@@ -23,9 +20,6 @@ export default {
   'spread tabs: equal': {
     props: {
       selected: { initialValue: 'panel-1' },
-      tabListClass: {
-        initialValue: 'd-w-600',
-      },
       spread: {
         initialValue: 'equal',
       },
@@ -43,9 +37,6 @@ export default {
   'spread tabs: grow': {
     props: {
       selected: { initialValue: 'panel-1' },
-      tabListClass: {
-        initialValue: 'd-w-600',
-      },
       spread: {
         initialValue: 'grow',
       },
@@ -65,9 +56,6 @@ export default {
       kind: { initialValue: 'muted' },
       selected: { initialValue: 'panel-1' },
       size: { initialValue: '200' },
-      tabListClass: {
-        initialValue: 'd-w-600',
-      },
     },
     slots: {
       tabs: {
@@ -85,9 +73,6 @@ export default {
       selected: { initialValue: 'panel-1' },
       size: { initialValue: '100' },
       borderless: { initialValue: true },
-      tabListClass: {
-        initialValue: 'd-w-600',
-      },
     },
     slots: {
       tabs: {
@@ -120,9 +105,6 @@ export default {
   'with icons': {
     props: {
       selected: { initialValue: 'panel-1' },
-      tabListClass: {
-        initialValue: 'd-w-600',
-      },
     },
     slots: {
       tabs: {
@@ -169,9 +151,6 @@ export default {
   'with trailing slot': {
     props: {
       selected: { initialValue: 'panel-1' },
-      tabListClass: {
-        initialValue: 'd-w-600',
-      },
     },
     slots: {
       tabs: {
diff --git a/packages/combinator/src/variants/variants_text.js b/packages/combinator/src/variants/variants_text.js
index fe65e04460..b2a70b0089 100644
--- a/packages/combinator/src/variants/variants_text.js
+++ b/packages/combinator/src/variants/variants_text.js
@@ -1,6 +1,26 @@
 /* eslint-disable max-len */
 
+
 export default {
+  defaults: {
+    props: {
+      size: { tokenCategory: 'typography-size' },
+      density: { tokenCategory: 'line-height' },
+      tone: { tokenCategory: 'color:d-text--tone-:--text-tone' },
+    },
+  },
+
+  exclusions: [
+    {
+      when: { kind: v => v !== 'headline' },
+      disableValues: { props: { size: ['500', '600', '700'] } },
+    },
+    {
+      when: { size: v => ['500', '600', '700'].includes(String(v)) },
+      disableValues: { props: { kind: ['body', 'label', 'code'] } },
+    },
+  ],
+
   default: {
     slots: {
       default: {
@@ -11,6 +31,9 @@ export default {
       kind: {
         initialValue: 'body',
       },
+      size: {
+        initialValue: '300',
+      },
     },
   },
   'Extra large headline': {
@@ -158,6 +181,9 @@ export default {
       align: {
         initialValue: 'center',
       },
+      wrap: {
+        initialValue: 'balance',
+      },
     },
   },
   'with numeric (tabular-nums)': {
diff --git a/packages/combinator/src/variants/variants_toast.js b/packages/combinator/src/variants/variants_toast.js
index ce1a482a96..17c72b757a 100644
--- a/packages/combinator/src/variants/variants_toast.js
+++ b/packages/combinator/src/variants/variants_toast.js
@@ -1,6 +1,12 @@
  
 
 export default {
+  defaults: {
+    props: {
+      kind: { tokenCategory: 'color:d-notice--:backgroundColor' },
+    },
+  },
+
   default: {
     slots: {
       default: {
diff --git a/packages/combinator/src/variants/variants_toggle.js b/packages/combinator/src/variants/variants_toggle.js
index c64f64c98a..d8d685ce46 100644
--- a/packages/combinator/src/variants/variants_toggle.js
+++ b/packages/combinator/src/variants/variants_toggle.js
@@ -6,7 +6,7 @@ export default {
       },
     },
     props: {
-      class: { initialValue: 'd-g-200' },
+      labelClass: { initialValue: 'd-pie-100' },
     },
   },
 
@@ -18,13 +18,4 @@ export default {
       default: { initialValue: 'Label' },
     },
   },
-
-  'with space between': {
-    props: {
-      class: { initialValue: 'd-g-200 d-w-200 d-jc-space-between' },
-    },
-    slots: {
-      default: { initialValue: 'Label' },
-    },
-  },
 };
diff --git a/packages/dialtone-vue/components/button/button.vue b/packages/dialtone-vue/components/button/button.vue
index 58d07f9e76..3b3af45392 100644
--- a/packages/dialtone-vue/components/button/button.vue
+++ b/packages/dialtone-vue/components/button/button.vue
@@ -324,7 +324,6 @@ export default {
 
     /**
      * The color of the button.
-     * The inverted value is deprecated — use v-dt-mode directive instead.
      * @values default, unstyled, muted, critical, positive
      */
     kind: {
diff --git a/packages/dialtone-vue/components/split_button/split_button.vue b/packages/dialtone-vue/components/split_button/split_button.vue
index 045f8fac9a..01b075e8df 100644
--- a/packages/dialtone-vue/components/split_button/split_button.vue
+++ b/packages/dialtone-vue/components/split_button/split_button.vue
@@ -370,7 +370,7 @@ export default {
 
     /**
      * The color of the button.
-     * @values default, muted, critical
+     * @values default, unstyled, muted, critical, positive
      */
     kind: {
       type: String,
diff --git a/packages/dialtone-vue/components/stack/stack.vue b/packages/dialtone-vue/components/stack/stack.vue
index 6853479099..d1501b7ab1 100644
--- a/packages/dialtone-vue/components/stack/stack.vue
+++ b/packages/dialtone-vue/components/stack/stack.vue
@@ -56,7 +56,7 @@ export default {
      * All the undefined breakpoints will have the 'default' value.
      * You can override the default gap with 'default' key.
      * In case of string, it will be applied to all the breakpoints.
-     * @values 0, 50, 100, 200, 300, 350, 400, 450, 500, 525, 550, 600, 625, 650, 700
+     * @values 0, 50, 100, 200, 300, 350, 400, 450, 500, 525, 550, 600, 650, 700
      */
     gap: {
       type: [String, Object],
diff --git a/packages/dialtone-vue/components/toggle/toggle.vue b/packages/dialtone-vue/components/toggle/toggle.vue
index 3efb2d0b65..ebaecdb881 100644
--- a/packages/dialtone-vue/components/toggle/toggle.vue
+++ b/packages/dialtone-vue/components/toggle/toggle.vue
@@ -66,7 +66,7 @@ export default {
     },
 
     /**
-     * Value of the toggle
+     * Value of the toggle, aka checked state.
      * @model modelValue
      * @values true, false, 'mixed'
      */