@ccslabs/xtend 0.1.0-rc.1

package/xtend-builder/typing/component-shell-contract.js

@@ -0,0 +1,312 @@
+const COMPONENT_SHELL_CONTRACT_SCHEMA = 'xtend.component.shell.v1';
+const COMPONENT_SHELL_REPORT_SCHEMA = 'xtend.component.shell-report.v1';
+const COMPONENT_SHELL_WORKPACKAGE = 'WP-E11-02';
+const COMPONENT_SHELL_CONTRACT_DOC = 'development/XTend-Component-Shell-Contract.md';
+const COMPONENT_CONTRACT_V2_SCHEMA = 'xtend.component.contract.v2';
+const UX_MATURITY_MODEL_SCHEMA = 'xtend.component.ux-maturity-model.v1';
+const RMT_SHELL_AUTHORING_SCHEMA = 'xtend.rmt.shell-authoring.v1';
+const FABRIC_BOUNDARY_SCHEMA = 'xtend.component.fabric-boundary.v2';
+const A11Y_COMPONENT_CONTRACT_SCHEMA = 'xtend.a11y.component-contract.v1';
+const PERFORMANCE_COMPONENT_PROFILE_SCHEMA = 'xtend.performance.component-profile.v1';
+const KERNEL_BOUNDARY = 'no-rmt-kernel-import-of-xtend-types';
+
+const SHELL_REQUIRED_DOMAINS = [
+  'dom',
+  'states',
+  'slots',
+  'parts',
+  'tokens',
+  'focus',
+  'a11y',
+  'performance',
+  'rmt',
+  'fabric',
+  'compatibility',
+  'docs',
+  'tests'
+];
+
+const SHELL_DOM_MODES = ['shadow', 'light', 'hybrid'];
+
+const SHELL_REQUIRED_STATES = [
+  'empty',
+  'loading',
+  'ready',
+  'error',
+  'disabled',
+  'busy',
+  'invalid'
+];
+
+const SHELL_DEFAULT_SLOTS = [
+  'default',
+  'label',
+  'helper',
+  'error',
+  'prefix',
+  'suffix'
+];
+
+const SHELL_DEFAULT_PARTS = [
+  'root',
+  'control',
+  'label',
+  'content',
+  'helper',
+  'error',
+  'icon'
+];
+
+const SHELL_FOCUS_STRATEGIES = [
+  'none',
+  'host',
+  'delegates-focus',
+  'managed-roving',
+  'trap'
+];
+
+function normalizeArray(value) {
+  return Array.isArray(value) ? value.slice() : [];
+}
+
+function unique(values) {
+  return Array.from(new Set(normalizeArray(values).filter(Boolean)));
+}
+
+function toBasename(tag) {
+  return String(tag || 'x-example').replace(/-/g, '');
+}
+
+function normalizeSlot(slot) {
+  if (typeof slot === 'string') {
+    return {
+      name: slot,
+      required: slot === 'default',
+      accepts: 'RmtTemplateRef | string | HTMLElement'
+    };
+  }
+  return {
+    name: slot.name,
+    required: Boolean(slot.required),
+    accepts: slot.accepts || 'RmtTemplateRef | string | HTMLElement'
+  };
+}
+
+function normalizePart(part) {
+  if (typeof part === 'string') {
+    return {
+      name: part,
+      required: part === 'root',
+      purpose: part === 'root' ? 'stable shell root' : 'stable styling entry point'
+    };
+  }
+  return {
+    name: part.name,
+    required: Boolean(part.required),
+    purpose: part.purpose || 'stable styling entry point'
+  };
+}
+
+function normalizeToken(token) {
+  if (typeof token === 'string') {
+    return {
+      name: token,
+      defaultValue: 'inherit',
+      category: 'component'
+    };
+  }
+  return {
+    name: token.name,
+    defaultValue: token.defaultValue || 'inherit',
+    category: token.category || 'component'
+  };
+}
+
+function createComponentShellContract(input = {}, options = {}) {
+  const tag = input.tag || 'x-example';
+  const basename = input.basename || toBasename(tag);
+  const domInput = input.dom || {};
+  const focusInput = input.focus || {};
+  const a11yInput = input.a11y || {};
+  const performanceInput = input.performance || {};
+  const slots = normalizeArray(input.slots).length > 0
+    ? normalizeArray(input.slots).map(normalizeSlot)
+    : SHELL_DEFAULT_SLOTS.map(normalizeSlot);
+  const parts = normalizeArray(input.parts).length > 0
+    ? normalizeArray(input.parts).map(normalizePart)
+    : SHELL_DEFAULT_PARTS.map(normalizePart);
+  const tokens = normalizeArray(input.tokens).length > 0
+    ? normalizeArray(input.tokens).map(normalizeToken)
+    : [
+      `--xtend-${basename}-color`,
+      `--xtend-${basename}-surface`,
+      `--xtend-${basename}-radius`,
+      `--xtend-${basename}-gap`,
+      `--xtend-${basename}-motion-duration`
+    ].map(normalizeToken);
+  const states = unique(SHELL_REQUIRED_STATES.concat(normalizeArray(input.states)));
+
+  return {
+    schema: COMPONENT_SHELL_CONTRACT_SCHEMA,
+    status: 'contract-draft',
+    workpackage: COMPONENT_SHELL_WORKPACKAGE,
+    componentContract: COMPONENT_CONTRACT_V2_SCHEMA,
+    uxMaturityModel: UX_MATURITY_MODEL_SCHEMA,
+    tag,
+    dom: {
+      mode: domInput.mode || input.domMode || 'shadow',
+      delegatesFocus: Boolean(domInput.delegatesFocus),
+      formAssociated: Boolean(domInput.formAssociated),
+      rootPart: domInput.rootPart || 'root',
+      attributeStatePrefix: domInput.attributeStatePrefix || 'data-xtend-state'
+    },
+    states,
+    slots,
+    parts,
+    tokens,
+    focus: {
+      strategy: focusInput.strategy || 'host',
+      visibleFocusRequired: focusInput.visibleFocusRequired !== false,
+      keyboardRequired: focusInput.keyboardRequired !== false,
+      restoreOnRouteChange: Boolean(focusInput.restoreOnRouteChange)
+    },
+    a11y: {
+      schema: A11Y_COMPONENT_CONTRACT_SCHEMA,
+      runtimeBehaviorRequired: true,
+      requiredSignals: a11yInput.requiredSignals || ['role', 'name', 'state', 'keyboard', 'screenreader'],
+      ariaOnlyWhenNativeSemanticsAreInsufficient: a11yInput.ariaOnlyWhenNativeSemanticsAreInsufficient !== false,
+      reducedMotionSafe: a11yInput.reducedMotionSafe !== false,
+      forcedColorsSafe: a11yInput.forcedColorsSafe !== false
+    },
+    performance: {
+      schema: PERFORMANCE_COMPONENT_PROFILE_SCHEMA,
+      mountBudgetMs: performanceInput.mountBudgetMs || options.mountBudgetMs || 16,
+      hydrateBudgetMs: performanceInput.hydrateBudgetMs || options.hydrateBudgetMs || 24,
+      eventBudgetMs: performanceInput.eventBudgetMs || options.eventBudgetMs || 8,
+      noLayoutThrashing: performanceInput.noLayoutThrashing !== false,
+      cleanupRequired: performanceInput.cleanupRequired !== false
+    },
+    rmt: {
+      schema: RMT_SHELL_AUTHORING_SCHEMA,
+      adapter: 'xtend.component',
+      templateMode: input.templateMode || 'dom_descriptor',
+      fields: ['shell', 'style', 'a11y', 'commands', 'events', 'variants', 'density', 'hydration', 'schedule', 'fabric'],
+      kernelBoundary: KERNEL_BOUNDARY
+    },
+    fabric: {
+      schema: FABRIC_BOUNDARY_SCHEMA,
+      api: '@xtend-fabric',
+      laneIngestion: true,
+      fiberHints: ['component.mount', 'component.hydrate', 'component.render', 'component.event'],
+      errorBoundaryRequired: true
+    },
+    compatibility: {
+      hostModes: ['xtend-only', 'rmt-first', 'vanilla', 'react', 'vue', 'custom-shell'],
+      nativeCustomElementRequired: true,
+      noGlobalMagicState: true,
+      noRuntimeDependenciesAllowed: true
+    },
+    docs: {
+      contract: COMPONENT_SHELL_CONTRACT_DOC,
+      componentGuide: `docs/components/${tag.replace(/^x-/, '')}.md`,
+      requiredSections: ['Shell', 'States', 'Slots', 'Parts', 'Focus', 'A11y', 'Performance', 'RMT Authoring']
+    },
+    tests: {
+      requiredSuites: ['component-shell-contract', 'components', 'a11y-hydration', 'performance-regression', 'references'],
+      fixtureRequired: true,
+      browserSmokeRequiredForInteractiveShells: true
+    }
+  };
+}
+
+function validateComponentShellContract(contract = {}) {
+  const errors = [];
+
+  if (contract.schema !== COMPONENT_SHELL_CONTRACT_SCHEMA) {
+    errors.push(`schema must be ${COMPONENT_SHELL_CONTRACT_SCHEMA}`);
+  }
+  if (!/^x-[a-z0-9]+(?:-[a-z0-9]+)*$/.test(String(contract.tag || ''))) {
+    errors.push('tag must be a valid XTend custom element tag');
+  }
+
+  SHELL_REQUIRED_DOMAINS.forEach((domain) => {
+    if (!contract[domain]) {
+      errors.push(`missing domain: ${domain}`);
+    }
+  });
+
+  if (contract.dom && !SHELL_DOM_MODES.includes(contract.dom.mode)) {
+    errors.push(`dom.mode must be one of: ${SHELL_DOM_MODES.join(', ')}`);
+  }
+  if (!Array.isArray(contract.states)) {
+    errors.push('states must be an array');
+  } else {
+    SHELL_REQUIRED_STATES.forEach((state) => {
+      if (!contract.states.includes(state)) {
+        errors.push(`states must include ${state}`);
+      }
+    });
+  }
+  if (!Array.isArray(contract.slots) || !contract.slots.some((slot) => slot && slot.name === 'default')) {
+    errors.push('slots must include a default slot');
+  }
+  if (!Array.isArray(contract.parts) || !contract.parts.some((part) => part && part.name === 'root')) {
+    errors.push('parts must include a root part');
+  }
+  if (!Array.isArray(contract.tokens) || contract.tokens.length === 0) {
+    errors.push('tokens must include at least one design token');
+  }
+  if (contract.focus && !SHELL_FOCUS_STRATEGIES.includes(contract.focus.strategy)) {
+    errors.push(`focus.strategy must be one of: ${SHELL_FOCUS_STRATEGIES.join(', ')}`);
+  }
+  if (contract.focus && contract.focus.visibleFocusRequired !== true) {
+    errors.push('focus.visibleFocusRequired must be true');
+  }
+  if (contract.a11y && contract.a11y.runtimeBehaviorRequired !== true) {
+    errors.push('a11y.runtimeBehaviorRequired must be true');
+  }
+  if (contract.performance) {
+    ['mountBudgetMs', 'hydrateBudgetMs', 'eventBudgetMs'].forEach((field) => {
+      if (typeof contract.performance[field] !== 'number' || contract.performance[field] <= 0) {
+        errors.push(`performance.${field} must be a positive number`);
+      }
+    });
+  }
+  if (contract.rmt && contract.rmt.kernelBoundary !== KERNEL_BOUNDARY) {
+    errors.push('rmt.kernelBoundary must keep the RMT kernel decoupled from XTend types');
+  }
+  if (contract.fabric && contract.fabric.api !== '@xtend-fabric') {
+    errors.push('fabric.api must be @xtend-fabric');
+  }
+  if (contract.compatibility && !normalizeArray(contract.compatibility.hostModes).includes('rmt-first')) {
+    errors.push('compatibility.hostModes must include rmt-first');
+  }
+
+  return {
+    schema: COMPONENT_SHELL_REPORT_SCHEMA,
+    ok: errors.length === 0,
+    errors
+  };
+}
+
+module.exports = {
+  COMPONENT_SHELL_CONTRACT_SCHEMA,
+  COMPONENT_SHELL_REPORT_SCHEMA,
+  COMPONENT_SHELL_WORKPACKAGE,
+  COMPONENT_SHELL_CONTRACT_DOC,
+  COMPONENT_CONTRACT_V2_SCHEMA,
+  UX_MATURITY_MODEL_SCHEMA,
+  RMT_SHELL_AUTHORING_SCHEMA,
+  FABRIC_BOUNDARY_SCHEMA,
+  A11Y_COMPONENT_CONTRACT_SCHEMA,
+  PERFORMANCE_COMPONENT_PROFILE_SCHEMA,
+  KERNEL_BOUNDARY,
+  SHELL_REQUIRED_DOMAINS,
+  SHELL_DOM_MODES,
+  SHELL_REQUIRED_STATES,
+  SHELL_DEFAULT_SLOTS,
+  SHELL_DEFAULT_PARTS,
+  SHELL_FOCUS_STRATEGIES,
+  createComponentShellContract,
+  validateComponentShellContract
+};

package/xtend-builder/typing/component-styling-contract.d.ts

@@ -0,0 +1,22 @@
+import type { XtendBuilderComponentInput, XtendBuilderOptions, XtendBuilderRecord, XtendBuilderReport } from '../builder-public-types';
+
+export declare const COMPONENT_STYLING_CONTRACT_SCHEMA: string;
+export declare const COMPONENT_STYLING_REPORT_SCHEMA: string;
+export declare const COMPONENT_STYLING_WORKPACKAGE: string;
+export declare const COMPONENT_STYLING_CONTRACT_DOC: string;
+export declare const COMPONENT_SHELL_CONTRACT_SCHEMA: string;
+export declare const COMPONENT_CONTRACT_V2_SCHEMA: string;
+export declare const UX_MATURITY_MODEL_SCHEMA: string;
+export declare const RMT_STYLE_AUTHORING_SCHEMA: string;
+export declare const FABRIC_BOUNDARY_SCHEMA: string;
+export declare const KERNEL_BOUNDARY: string;
+export declare const STYLING_REQUIRED_DOMAINS: string[];
+export declare const STYLING_TOKEN_CATEGORIES: string[];
+export declare const STYLING_REQUIRED_VARIANTS: string[];
+export declare const STYLING_REQUIRED_SIZES: string[];
+export declare const STYLING_REQUIRED_DENSITIES: string[];
+export declare const STYLING_REQUIRED_THEMES: string[];
+export declare const STYLING_REQUIRED_PARTS: string[];
+export declare const STYLING_MOTION_POLICIES: string[];
+export declare function createComponentStylingContract(input?: XtendBuilderComponentInput, options?: XtendBuilderOptions): XtendBuilderRecord;
+export declare function validateComponentStylingContract(contract: unknown): XtendBuilderReport<XtendBuilderRecord>;

package/xtend-builder/typing/component-styling-contract.js

@@ -0,0 +1,301 @@
+const COMPONENT_STYLING_CONTRACT_SCHEMA = 'xtend.component.styling.v1';
+const COMPONENT_STYLING_REPORT_SCHEMA = 'xtend.component.styling-report.v1';
+const COMPONENT_STYLING_WORKPACKAGE = 'WP-E11-03';
+const COMPONENT_STYLING_CONTRACT_DOC = 'development/XTend-Component-Styling-Token-und-Part-Contract.md';
+const COMPONENT_SHELL_CONTRACT_SCHEMA = 'xtend.component.shell.v1';
+const COMPONENT_CONTRACT_V2_SCHEMA = 'xtend.component.contract.v2';
+const UX_MATURITY_MODEL_SCHEMA = 'xtend.component.ux-maturity-model.v1';
+const RMT_STYLE_AUTHORING_SCHEMA = 'xtend.rmt.style-authoring.v1';
+const FABRIC_BOUNDARY_SCHEMA = 'xtend.component.fabric-boundary.v2';
+const KERNEL_BOUNDARY = 'no-rmt-kernel-import-of-xtend-types';
+
+const STYLING_REQUIRED_DOMAINS = [
+  'tokens',
+  'customProperties',
+  'parts',
+  'variants',
+  'sizes',
+  'density',
+  'themes',
+  'motion',
+  'contrast',
+  'rmt',
+  'fabric',
+  'compatibility',
+  'docs',
+  'tests'
+];
+
+const STYLING_TOKEN_CATEGORIES = [
+  'color',
+  'surface',
+  'text',
+  'space',
+  'radius',
+  'typography',
+  'motion',
+  'elevation',
+  'state'
+];
+
+const STYLING_REQUIRED_VARIANTS = [
+  'default',
+  'primary',
+  'secondary',
+  'success',
+  'warning',
+  'danger',
+  'neutral'
+];
+
+const STYLING_REQUIRED_SIZES = ['sm', 'md', 'lg'];
+const STYLING_REQUIRED_DENSITIES = ['comfortable', 'compact', 'dense'];
+const STYLING_REQUIRED_THEMES = ['light', 'dark', 'high-contrast', 'forced-colors'];
+const STYLING_REQUIRED_PARTS = ['root', 'control', 'label', 'content', 'helper', 'error'];
+const STYLING_MOTION_POLICIES = ['standard', 'reduced'];
+
+function normalizeArray(value) {
+  return Array.isArray(value) ? value.slice() : [];
+}
+
+function unique(values) {
+  return Array.from(new Set(normalizeArray(values).filter(Boolean)));
+}
+
+function toBasename(tag) {
+  return String(tag || 'x-example').replace(/^x-/, '').replace(/-/g, '-');
+}
+
+function normalizeToken(token, tag) {
+  if (typeof token === 'string') {
+    return {
+      name: token,
+      category: 'state',
+      defaultValue: `var(--xtend-${toBasename(tag)}-surface, inherit)`,
+      fallbackRequired: true
+    };
+  }
+  return {
+    name: token.name,
+    category: token.category || 'state',
+    defaultValue: token.defaultValue || 'inherit',
+    fallbackRequired: token.fallbackRequired !== false
+  };
+}
+
+function createDefaultTokens(tag) {
+  const basename = toBasename(tag);
+  return [
+    { name: `--xtend-${basename}-color`, category: 'color', defaultValue: 'var(--xtend-color-text, currentColor)' },
+    { name: `--xtend-${basename}-surface`, category: 'surface', defaultValue: 'var(--xtend-color-surface, transparent)' },
+    { name: `--xtend-${basename}-text`, category: 'text', defaultValue: 'var(--xtend-color-text, currentColor)' },
+    { name: `--xtend-${basename}-gap`, category: 'space', defaultValue: 'var(--xtend-space-2, 0.5rem)' },
+    { name: `--xtend-${basename}-radius`, category: 'radius', defaultValue: 'var(--xtend-radius-sm, 4px)' },
+    { name: `--xtend-${basename}-font`, category: 'typography', defaultValue: 'var(--xtend-font-family, inherit)' },
+    { name: `--xtend-${basename}-motion-duration`, category: 'motion', defaultValue: 'var(--xtend-motion-duration-fast, 120ms)' },
+    { name: `--xtend-${basename}-elevation`, category: 'elevation', defaultValue: 'var(--xtend-elevation-0, none)' },
+    { name: `--xtend-${basename}-state-color`, category: 'state', defaultValue: 'var(--xtend-color-accent, currentColor)' }
+  ].map((token) => normalizeToken(token, tag));
+}
+
+function normalizePart(part) {
+  if (typeof part === 'string') {
+    return {
+      name: part,
+      stable: true,
+      selector: `::part(${part})`
+    };
+  }
+  return {
+    name: part.name,
+    stable: part.stable !== false,
+    selector: part.selector || `::part(${part.name})`
+  };
+}
+
+function createComponentStylingContract(input = {}) {
+  const tag = input.tag || 'x-example';
+  const tokenInput = normalizeArray(input.tokens);
+  const parts = normalizeArray(input.parts).length > 0
+    ? normalizeArray(input.parts).map(normalizePart)
+    : STYLING_REQUIRED_PARTS.map(normalizePart);
+  const tokens = tokenInput.length > 0
+    ? tokenInput.map((token) => normalizeToken(token, tag))
+    : createDefaultTokens(tag);
+  const variants = unique(STYLING_REQUIRED_VARIANTS.concat(normalizeArray(input.variants)));
+  const sizes = unique(STYLING_REQUIRED_SIZES.concat(normalizeArray(input.sizes)));
+  const density = unique(STYLING_REQUIRED_DENSITIES.concat(normalizeArray(input.density)));
+  const themes = unique(STYLING_REQUIRED_THEMES.concat(normalizeArray(input.themes)));
+
+  return {
+    schema: COMPONENT_STYLING_CONTRACT_SCHEMA,
+    status: 'contract-draft',
+    workpackage: COMPONENT_STYLING_WORKPACKAGE,
+    componentContract: COMPONENT_CONTRACT_V2_SCHEMA,
+    shellContract: COMPONENT_SHELL_CONTRACT_SCHEMA,
+    uxMaturityModel: UX_MATURITY_MODEL_SCHEMA,
+    tag,
+    tokens,
+    customProperties: {
+      prefix: `--xtend-${toBasename(tag)}-`,
+      fallbackRequired: true,
+      hostThemeBridge: true,
+      noUnscopedGlobals: true
+    },
+    parts,
+    variants: {
+      allowed: variants,
+      defaultVariant: input.defaultVariant || 'default',
+      unknownVariantPolicy: 'ignore-and-diagnose'
+    },
+    sizes: {
+      allowed: sizes,
+      defaultSize: input.defaultSize || 'md'
+    },
+    density: {
+      allowed: density,
+      defaultDensity: input.defaultDensity || 'comfortable',
+      hostPropagation: true
+    },
+    themes: {
+      supported: themes,
+      bridge: 'x-theme',
+      tokenInheritance: true,
+      forcedColorsRequired: true
+    },
+    motion: {
+      policies: STYLING_MOTION_POLICIES.slice(),
+      reducedMotionSafe: true,
+      noMotionRequiredForCoreFunction: true
+    },
+    contrast: {
+      highContrastRequired: true,
+      forcedColorsRequired: true,
+      noColorOnlyState: true,
+      focusVisibleRequired: true
+    },
+    rmt: {
+      schema: RMT_STYLE_AUTHORING_SCHEMA,
+      adapter: 'xtend.component',
+      fields: ['style', 'tokens', 'parts', 'variant', 'size', 'density', 'theme', 'motion', 'contrast'],
+      kernelBoundary: KERNEL_BOUNDARY
+    },
+    fabric: {
+      schema: FABRIC_BOUNDARY_SCHEMA,
+      diagnostics: ['style.token.missing', 'style.variant.unknown', 'style.theme.unsupported'],
+      telemetryFields: ['componentId', 'variant', 'size', 'density', 'theme', 'forcedColors', 'reducedMotion']
+    },
+    compatibility: {
+      hostModes: ['xtend-only', 'rmt-first', 'vanilla', 'react', 'vue', 'custom-shell'],
+      cssPartsRequired: true,
+      shadowDomSkinningAllowed: true,
+      inlineStylePolicy: 'tokens-only',
+      noCdnThemeDependency: true
+    },
+    docs: {
+      contract: COMPONENT_STYLING_CONTRACT_DOC,
+      componentGuideSection: 'Styling',
+      requiredSections: ['Tokens', 'CSS Custom Properties', 'CSS Parts', 'Variants', 'Sizes', 'Density', 'Themes', 'Motion', 'Contrast', 'RMT Authoring']
+    },
+    tests: {
+      requiredSuites: ['component-styling-contract', 'component-shell-contract', 'motion-contrast', 'references'],
+      visualRegressionRequiredForP0: true,
+      fixtureRequired: true
+    }
+  };
+}
+
+function validateComponentStylingContract(contract = {}) {
+  const errors = [];
+
+  if (contract.schema !== COMPONENT_STYLING_CONTRACT_SCHEMA) {
+    errors.push(`schema must be ${COMPONENT_STYLING_CONTRACT_SCHEMA}`);
+  }
+  if (!/^x-[a-z0-9]+(?:-[a-z0-9]+)*$/.test(String(contract.tag || ''))) {
+    errors.push('tag must be a valid XTend custom element tag');
+  }
+
+  STYLING_REQUIRED_DOMAINS.forEach((domain) => {
+    if (!contract[domain]) {
+      errors.push(`missing domain: ${domain}`);
+    }
+  });
+
+  if (!Array.isArray(contract.tokens) || contract.tokens.length === 0) {
+    errors.push('tokens must include at least one token');
+  } else {
+    STYLING_TOKEN_CATEGORIES.forEach((category) => {
+      if (!contract.tokens.some((token) => token && token.category === category)) {
+        errors.push(`tokens must include category ${category}`);
+      }
+    });
+    contract.tokens.forEach((token) => {
+      if (!/^--xtend-[a-z0-9-]+$/.test(String(token.name || ''))) {
+        errors.push(`token name must use --xtend-* prefix: ${token.name}`);
+      }
+      if (token.fallbackRequired !== true) {
+        errors.push(`token ${token.name} must require a fallback`);
+      }
+    });
+  }
+
+  if (!contract.customProperties || contract.customProperties.fallbackRequired !== true) {
+    errors.push('customProperties.fallbackRequired must be true');
+  }
+  if (!Array.isArray(contract.parts) || !STYLING_REQUIRED_PARTS.every((partName) => contract.parts.some((part) => part && part.name === partName))) {
+    errors.push(`parts must include ${STYLING_REQUIRED_PARTS.join(', ')}`);
+  }
+  if (!contract.variants || !STYLING_REQUIRED_VARIANTS.every((variant) => normalizeArray(contract.variants.allowed).includes(variant))) {
+    errors.push(`variants.allowed must include ${STYLING_REQUIRED_VARIANTS.join(', ')}`);
+  }
+  if (!contract.sizes || !STYLING_REQUIRED_SIZES.every((size) => normalizeArray(contract.sizes.allowed).includes(size))) {
+    errors.push(`sizes.allowed must include ${STYLING_REQUIRED_SIZES.join(', ')}`);
+  }
+  if (!contract.density || !STYLING_REQUIRED_DENSITIES.every((density) => normalizeArray(contract.density.allowed).includes(density))) {
+    errors.push(`density.allowed must include ${STYLING_REQUIRED_DENSITIES.join(', ')}`);
+  }
+  if (!contract.themes || !STYLING_REQUIRED_THEMES.every((theme) => normalizeArray(contract.themes.supported).includes(theme))) {
+    errors.push(`themes.supported must include ${STYLING_REQUIRED_THEMES.join(', ')}`);
+  }
+  if (contract.motion && contract.motion.reducedMotionSafe !== true) {
+    errors.push('motion.reducedMotionSafe must be true');
+  }
+  if (contract.contrast && contract.contrast.focusVisibleRequired !== true) {
+    errors.push('contrast.focusVisibleRequired must be true');
+  }
+  if (contract.rmt && contract.rmt.kernelBoundary !== KERNEL_BOUNDARY) {
+    errors.push('rmt.kernelBoundary must keep the RMT kernel decoupled from XTend types');
+  }
+  if (contract.compatibility && contract.compatibility.noCdnThemeDependency !== true) {
+    errors.push('compatibility.noCdnThemeDependency must be true');
+  }
+
+  return {
+    schema: COMPONENT_STYLING_REPORT_SCHEMA,
+    ok: errors.length === 0,
+    errors
+  };
+}
+
+module.exports = {
+  COMPONENT_STYLING_CONTRACT_SCHEMA,
+  COMPONENT_STYLING_REPORT_SCHEMA,
+  COMPONENT_STYLING_WORKPACKAGE,
+  COMPONENT_STYLING_CONTRACT_DOC,
+  COMPONENT_SHELL_CONTRACT_SCHEMA,
+  COMPONENT_CONTRACT_V2_SCHEMA,
+  UX_MATURITY_MODEL_SCHEMA,
+  RMT_STYLE_AUTHORING_SCHEMA,
+  FABRIC_BOUNDARY_SCHEMA,
+  KERNEL_BOUNDARY,
+  STYLING_REQUIRED_DOMAINS,
+  STYLING_TOKEN_CATEGORIES,
+  STYLING_REQUIRED_VARIANTS,
+  STYLING_REQUIRED_SIZES,
+  STYLING_REQUIRED_DENSITIES,
+  STYLING_REQUIRED_THEMES,
+  STYLING_REQUIRED_PARTS,
+  STYLING_MOTION_POLICIES,
+  createComponentStylingContract,
+  validateComponentStylingContract
+};

package/xtend-builder/typing/component-types.d.ts

@@ -0,0 +1,10 @@
+import type { XtendBuilderComponentInput, XtendBuilderOptions, XtendBuilderRecord } from '../builder-public-types';
+
+export declare const COMPONENT_TYPING_SCHEMA: string;
+export declare const RMT_ATTACHMENT_SCHEMA: string;
+export declare const RMT_COMPONENT_CONTRACT_VERSION: string;
+export declare const RMT_TEMPLATE_AUTHORING_CONTRACT_VERSION: string;
+export declare const RMT_ROOT_HANDSHAKE_CONTRACT_VERSION: string;
+export declare const RMT_HOST_CAPABILITIES_CONTRACT_VERSION: string;
+export declare const RMT_COMPATIBILITY_BINDING_SCHEMA: string;
+export declare function createComponentTypingContract(input?: XtendBuilderComponentInput, options?: XtendBuilderOptions): XtendBuilderRecord;