// Generated by scripts/rollout-design-contracts.ts. Review contract boundaries when changing markup. import { CATALOG_PART_PROPERTIES } from "./contract-properties.ts"; export const CATALOG_COMPONENT_CONTRACTS = { Accordion: { contractVersion: 1, component: "Accordion", source: "packages/ui/components/Accordion.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "default", values: ["default"], }, bordered: { default: "false", values: ["false", "true"], }, separated: { default: "false", values: ["false", "true"], }, flush: { default: "false", values: ["false", "true"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, item: { elements: ["section"], states: { hover: ":hover", open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, heading: { elements: ["h3", "h4"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, trigger: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, indicator: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, panel: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, content: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, nested: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "accordion-accent", "color-border", "color-border-strong", "color-danger", "color-info", "color-muted", "color-primary", "color-primary-text", "color-secondary", "color-success", "color-surface", "color-text", "color-text-muted", "color-warning", "component-color", "component-scale", "ease-standard", "font-sans", "motion-base", "motion-fast", "radius", "radius-sm", "shadow-1", "shadow-2", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, AdvancedSelect: { contractVersion: 1, component: "AdvancedSelect", source: "packages/ui/components/AdvancedSelect.wrn", family: "forms", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, row: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, label: { elements: ["label"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, selectControl: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, selectTrigger: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', invalid: ':is([aria-invalid="true"],[data-invalid="true"])', open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, selectValue: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, selectTags: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, colorDot: { elements: ["i"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, placeholder: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, selectChevron: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, clearSelect: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, selectDropdown: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, selectSearch: { elements: ["label"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, searchIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, control: { elements: ["input"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "layout", ownership: "framework", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, selectMessage: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, selectList: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, optionGroup: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, groupLabel: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, selectOption: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', selected: ':is([aria-selected="true"],[data-selected="true"],[aria-current="page"],[data-active="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, check: { elements: ["i"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, createOption: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, loadMore: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, validation: { elements: ["small"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-border", "color-danger", "color-info", "color-input-placeholder", "color-muted", "color-primary", "color-secondary", "color-success", "color-surface-2", "color-surface-muted", "color-text", "color-text-muted", "color-warning", "component-color", "component-scale", "control-height", "font-sans", "radius-sm", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, AnnouncementBar: { contractVersion: 1, component: "AnnouncementBar", source: "packages/ui/components/AnnouncementBar.wrn", family: "collections", support: "recipe-supported", axes: { compact: { default: "false", values: ["false", "true"], }, flush: { default: "false", values: ["false", "true"], }, size: { default: "default", values: ["default", "lg", "sm"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "soft", values: ["minimal", "outline", "soft", "solid"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: { flush: '{flush ? "true" : "false"}', }, }, surface: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, accent: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, glow: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, inner: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, content: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, icon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, copy: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, headline: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, badge: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, message: { elements: ["p"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, description: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, actions: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, action: { elements: ["a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, dismiss: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-border", "color-danger", "color-danger-contrast", "color-danger-muted", "color-danger-soft", "color-focus", "color-info", "color-info-contrast", "color-info-muted", "color-info-soft", "color-primary", "color-primary-contrast", "color-primary-muted", "color-primary-soft", "color-secondary", "color-secondary-contrast", "color-secondary-muted", "color-secondary-soft", "color-success", "color-success-contrast", "color-success-muted", "color-success-soft", "color-surface-raised", "color-text", "color-text-muted", "color-warning", "color-warning-contrast", "color-warning-muted", "color-warning-soft", "shadow-2", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, AuthForm: { contractVersion: 1, component: "AuthForm", source: "packages/ui/components/AuthForm.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, icon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, title: { elements: ["h2"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, control: { elements: ["input"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "managed", ownership: "framework", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, options: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, link: { elements: ["a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-danger", "color-info", "color-muted", "color-primary", "color-secondary", "color-success", "color-text", "color-text-muted", "color-warning", "component-color", "component-scale", "font-sans", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, AuthSplitLayout: { contractVersion: 1, component: "AuthSplitLayout", source: "packages/ui/components/AuthSplitLayout.wrn", family: "layout", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, }, parts: { root: { elements: ["main"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, content: { elements: ["section"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, brand: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, message: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, eyebrow: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, title: { elements: ["h1"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, features: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, legal: { elements: ["small"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, form: { elements: ["section"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, formInner: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["aside-extra", "form"], tokens: [ "color-bg", "color-border", "color-danger", "color-info", "color-muted", "color-primary", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-text", "color-text-muted", "color-warning", "component-color", "component-scale", "font-sans", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, AvatarGroup: { contractVersion: 1, component: "AvatarGroup", source: "packages/ui/components/AvatarGroup.wrn", family: "media", support: "recipe-supported", axes: { size: { default: "md", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "solid", values: ["solid"], }, shape: { default: "circle", values: ["circle", "rounded"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: true, explicitAxes: {}, }, members: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, member: { elements: ["span"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: true, explicitAxes: { size: "{item.size || size}", color: "{item.color || color}", variant: "{item.variant || variant}", shape: "{item.shape || shape}", }, }, avatar: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, tooltip: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, overflow: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, overflowButton: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, menu: { elements: ["span"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, menuItem: { elements: ["span"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, menuAvatar: { elements: ["span"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "avatar-group-color", "avatar-group-columns", "avatar-group-size", "color-bg", "color-border", "color-danger", "color-info", "color-muted", "color-primary", "color-primary-text", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-surface-muted", "color-surface-raised", "color-text", "color-text-muted", "color-warning", "component-color", "component-scale", "ease-emphasized", "font-sans", "highlight-edge", "motion-base", "motion-fast", "radius", "radius-sm", "shadow-1", "shadow-3", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, BackToTop: { contractVersion: 1, component: "BackToTop", source: "packages/ui/components/BackToTop.wrn", family: "navigation", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "sm"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "solid", values: ["ghost", "minimal", "outline", "soft", "solid"], }, shape: { default: "round", values: ["pill", "round", "rounded"], }, }, parts: { root: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: true, explicitAxes: {}, }, progress: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, surface: { elements: ["span"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, icon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, label: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, sr: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "back-to-top-progress", "color-border", "color-danger", "color-danger-contrast", "color-danger-hover", "color-danger-soft", "color-focus", "color-info", "color-info-contrast", "color-info-hover", "color-info-soft", "color-primary", "color-primary-contrast", "color-primary-hover", "color-primary-soft", "color-secondary", "color-secondary-contrast", "color-secondary-hover", "color-secondary-soft", "color-success", "color-success-contrast", "color-success-hover", "color-success-soft", "color-surface-raised", "color-warning", "color-warning-contrast", "color-warning-hover", "color-warning-soft", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Blockquote: { contractVersion: 1, component: "Blockquote", source: "packages/ui/components/Blockquote.wrn", family: "typography", support: "recipe-supported", axes: { size: { default: "md", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "default", values: ["border", "bordered", "card", "contained", "default", "left-border", "spotlight"], }, }, parts: { root: { elements: ["figure"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, mark: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, copy: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, citation: { elements: ["figcaption"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, avatar: { elements: ["img"], states: { hover: ":hover", }, profile: "media", ownership: "framework", role: "media", properties: CATALOG_PART_PROPERTIES.media, shapeBinding: false, explicitAxes: {}, }, attribution: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, link: { elements: ["a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "blockquote-color", "blockquote-font-size", "blockquote-mark-size", "blockquote-max-width", "color-border", "color-danger", "color-info", "color-muted", "color-primary", "color-secondary", "color-success", "color-surface-raised", "color-text", "color-text-muted", "color-warning", "component-color", "component-scale", "font-sans", "radius", "shadow-1", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Breadcrumb: { contractVersion: 1, component: "Breadcrumb", source: "packages/ui/components/Breadcrumb.wrn", family: "navigation", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "sm"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "minimal", values: ["contrast", "minimal", "outline", "soft"], }, }, parts: { root: { elements: ["nav"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, list: { elements: ["ol"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, item: { elements: ["li"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, link: { elements: ["a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, icon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, homeLabel: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, separator: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, separatorIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, label: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, external: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, current: { elements: ["span"], states: { hover: ":hover", disabled: ':is(:disabled,[aria-disabled="true"])', selected: ':is([aria-selected="true"],[data-selected="true"],[aria-current="page"],[data-active="true"])', }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-border", "color-border-strong", "color-danger", "color-danger-muted", "color-danger-soft", "color-danger-text", "color-info", "color-info-muted", "color-info-soft", "color-info-text", "color-primary", "color-primary-muted", "color-primary-soft", "color-primary-text", "color-secondary", "color-secondary-muted", "color-secondary-soft", "color-secondary-text", "color-success", "color-success-muted", "color-success-soft", "color-success-text", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "color-warning-muted", "color-warning-soft", "color-warning-text", "radius-sm", "shadow-1", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, ButtonGroup: { contractVersion: 1, component: "ButtonGroup", source: "packages/ui/components/ButtonGroup.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "md", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "default", values: ["default"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, button: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', selected: ':is([aria-selected="true"],[data-selected="true"],[aria-current="page"],[data-active="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, icon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, label: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-border", "color-danger", "color-info", "color-muted", "color-primary", "color-primary-text", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-text", "color-text-muted", "color-warning", "component-color", "component-scale", "control-height", "font-sans", "radius-sm", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, CTASection: { contractVersion: 1, component: "CTASection", source: "packages/ui/components/CTASection.wrn", family: "layout", support: "recipe-supported", axes: { size: { default: "default", values: ["compact", "default", "lg", "sm"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "solid", values: ["gradient", "outline", "soft", "solid"], }, radius: { default: "default", values: ["default", "xl"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, outer: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, surface: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, backgroundImage: { elements: ["img"], states: { hover: ":hover", }, profile: "media", ownership: "framework", role: "media", properties: CATALOG_PART_PROPERTIES.media, shapeBinding: false, explicitAxes: {}, }, glow: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, layout: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, content: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, icon: { elements: ["div"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, eyebrow: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, title: { elements: ["h2"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, description: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, actions: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, action: { elements: ["a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, actionIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, visualColumn: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, visual: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, visualMedia: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, visualImage: { elements: ["img"], states: { hover: ":hover", }, profile: "media", ownership: "framework", role: "media", properties: CATALOG_PART_PROPERTIES.media, shapeBinding: false, explicitAxes: {}, }, visualHeader: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, visualIcon: { elements: ["div"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, visualCopy: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, visualTitle: { elements: ["h3"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, visualDescription: { elements: ["p"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, visualList: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, visualItem: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, visualItemIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, footer: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default", "actions", "visual", "footer"], tokens: [ "color-border", "color-danger", "color-danger-contrast", "color-danger-hover", "color-danger-muted", "color-danger-soft", "color-focus", "color-info", "color-info-contrast", "color-info-hover", "color-info-muted", "color-info-soft", "color-primary", "color-primary-contrast", "color-primary-hover", "color-primary-muted", "color-primary-soft", "color-secondary", "color-secondary-contrast", "color-secondary-hover", "color-secondary-muted", "color-secondary-soft", "color-success", "color-success-contrast", "color-success-hover", "color-success-muted", "color-success-soft", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-warning", "color-warning-contrast", "color-warning-hover", "color-warning-muted", "color-warning-soft", "cta-title-max-width", "highlight-edge", "shadow-3", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Carousel: { contractVersion: 1, component: "Carousel", source: "packages/ui/components/Carousel.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "default", values: ["default"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, header: { elements: ["header"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, title: { elements: ["h3", "h4"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, layout: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, thumbnails: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, button: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', selected: ':is([aria-selected="true"],[data-selected="true"],[aria-current="page"],[data-active="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, main: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, stage: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, viewport: { elements: ["div"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, track: { elements: ["div"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, slide: { elements: ["article"], states: { hover: ":hover", selected: ':is([aria-selected="true"],[data-selected="true"],[aria-current="page"],[data-active="true"])', }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, slideContent: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, link: { elements: ["a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, control: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, counter: { elements: ["output"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, pagination: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "carousel-color", "carousel-drag-offset", "carousel-gap", "carousel-index", "carousel-per-view", "carousel-snap-slide", "color-border", "color-danger", "color-info", "color-muted", "color-primary", "color-secondary", "color-success", "color-surface", "color-surface-raised", "color-surface-subtle", "color-text", "color-text-muted", "color-warning", "component-color", "component-scale", "ease-emphasized", "font-sans", "motion-base", "radius-md", "radius-sm", "shadow-1", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Chart: { contractVersion: 1, component: "Chart", source: "packages/ui/components/Chart.wrn", family: "providers", support: "recipe-supported", axes: { size: { default: "default", values: ["default"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "bar", values: ["bar"], }, }, parts: { root: { elements: ["figure"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, header: { elements: ["figcaption"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, stage: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, canvas: { elements: ["canvas"], states: { hover: ":hover", }, profile: "managed", ownership: "provider", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, status: { elements: ["p"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, accessible: { elements: ["div"], states: { hover: ":hover", }, profile: "managed", ownership: "provider", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-border", "color-danger", "color-info", "color-primary", "color-secondary", "color-success", "color-surface", "color-text", "color-text-muted", "color-warning", "radius", ], regions: { canvas: { ownership: "provider", parts: ["canvas"], limitations: "Chart.js draws canvas pixels; use the existing chart options/data API.", }, accessible: { ownership: "provider", parts: ["accessible"], limitations: "Runtime-generated accessible data table is owned by the chart adapter.", }, }, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, ChatBubble: { contractVersion: 1, component: "ChatBubble", source: "packages/ui/components/ChatBubble.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "default", values: ["default"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, chatHeader: { elements: ["header"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, title: { elements: ["h3", "h4"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, chatThread: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, chatMessage: { elements: ["article"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, chatRow: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, chatAvatar: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, chatContent: { elements: ["div"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, link: { elements: ["a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, chatMeta: { elements: ["footer"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, chatStatus: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, chatReceipt: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, vector: { elements: ["svg"], states: { hover: ":hover", }, profile: "managed", ownership: "framework", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, button: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "chat-color", "color-border", "color-danger", "color-danger-text", "color-info", "color-muted", "color-primary", "color-primary-contrast", "color-primary-text", "color-secondary", "color-success", "color-surface", "color-surface-raised", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "component-color", "component-scale", "font-sans", "highlight-edge", "shadow-1", ], regions: { vector: { ownership: "framework", parts: ["vector"], limitations: "Rendered pixels and vector geometry are owned by the existing renderer; recipes style surrounding parts only.", }, }, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Clipboard: { contractVersion: 1, component: "Clipboard", source: "packages/ui/components/Clipboard.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "default", values: ["default"], }, color: { default: "primary", values: ["primary"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, title: { elements: ["strong"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, description: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, control: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, value: { elements: ["code", "span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, button: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, icon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-border", "color-border-strong", "color-code-background", "color-code-border", "color-code-text", "color-danger", "color-focus", "color-input-background", "color-input-border", "color-muted", "color-success", "color-surface", "color-surface-soft", "color-text", "color-text-muted", "font-mono", "radius-sm", "shadow-1", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Collapse: { contractVersion: 1, component: "Collapse", source: "packages/ui/components/Collapse.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, item: { elements: ["article"], states: { hover: ":hover", open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, preview: { elements: ["p"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, trigger: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, chevron: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, panel: { elements: ["div"], states: { hover: ":hover", open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, content: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, title: { elements: ["h4"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, link: { elements: ["a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "collapse-color", "color-border", "color-border-strong", "color-danger", "color-info", "color-muted", "color-primary", "color-primary-text", "color-secondary", "color-success", "color-surface", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "component-color", "component-scale", "ease-emphasized", "ease-standard", "font-sans", "motion-base", "radius", "shadow-1", "shadow-2", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, ColorPicker: { contractVersion: 1, component: "ColorPicker", source: "packages/ui/components/ColorPicker.wrn", family: "forms", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "picker", "primary", "secondary", "success", "warning"], }, variant: { default: "normal", values: ["floating", "ghost", "normal", "outlined", "pill", "underline"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", invalid: ':is([aria-invalid="true"],[data-invalid="true"])', }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, heading: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, srOnly: { elements: ["label"], states: { hover: ":hover", }, profile: "managed", ownership: "framework", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, hint: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, colorControl: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, control: { elements: ["input"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', invalid: ':is([aria-invalid="true"],[data-invalid="true"])', readonly: ':is([readonly],[aria-readonly="true"])', }, profile: "text", ownership: "native", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, help: { elements: ["small"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, error: { elements: ["small"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-border", "color-border-strong", "color-danger", "color-danger-text", "color-info", "color-input-background", "color-input-border", "color-input-border-hover", "color-muted", "color-primary", "color-primary-contrast", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "component-color", "component-scale", "control-height", "ease-emphasized", "ease-standard", "field-color", "font-mono", "font-sans", "highlight-edge", "motion-base", "motion-fast", "radius", "radius-sm", "shadow-1", "shadow-3", ], regions: { control: { ownership: "native", parts: ["control"], limitations: "Only the outer native control is styled; picker dialogs, option popups, tracks and thumbs remain native or existing component CSS.", }, }, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Columns: { contractVersion: 1, component: "Columns", source: "packages/ui/components/Columns.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "default", values: ["default"], }, color: { default: "primary", values: ["primary"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, ComboBox: { contractVersion: 1, component: "ComboBox", source: "packages/ui/components/Combobox.wrn", family: "forms", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, label: { elements: ["label"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, selectControl: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, searchIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, selectTrigger: { elements: ["input"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', invalid: ':is([aria-invalid="true"],[data-invalid="true"])', open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, clearSelect: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, comboboxToggle: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, selectChevron: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, selectDropdown: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, selectMessage: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, selectList: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, optionGroup: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, groupLabel: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, selectOption: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', selected: ':is([aria-selected="true"],[data-selected="true"],[aria-current="page"],[data-active="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, colorDot: { elements: ["i"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, check: { elements: ["i"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, loadMore: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, control: { elements: ["input"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "managed", ownership: "framework", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, validation: { elements: ["small"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-danger", "color-info", "color-muted", "color-primary", "color-secondary", "color-success", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "component-color", "component-scale", "font-sans", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Confetti: { contractVersion: 1, component: "Confetti", source: "packages/ui/components/Confetti.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "default", values: ["default"], }, color: { default: "primary", values: ["primary"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, trigger: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, canvas: { elements: ["canvas"], states: { hover: ":hover", }, profile: "managed", ownership: "framework", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, burst: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-focus", "color-on-primary", "color-primary", "confetti-delay", "confetti-duration", "confetti-index", "confetti-x", "radius", ], regions: { canvas: { ownership: "framework", parts: ["canvas"], limitations: "Rendered pixels and vector geometry are owned by the existing renderer; recipes style surrounding parts only.", }, }, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, CustomScrollbar: { contractVersion: 1, component: "CustomScrollbar", source: "packages/ui/components/CustomScrollbar.wrn", family: "collections", support: "recipe-supported", axes: { color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success"], }, size: { default: "default", values: ["default"], }, radius: { default: "999px", values: ["999px"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-danger", "color-info", "color-primary", "color-secondary", "color-success", "color-surface-soft", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, DataMap: { contractVersion: 1, component: "DataMap", source: "packages/ui/components/DataMap.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "default", values: ["default"], }, color: { default: "primary", values: ["primary"], }, variant: { default: "default", values: ["default"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, grid: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, button: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, legend: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-border", "color-muted", "color-primary", "color-primary-soft", "color-primary-text", "color-surface", "color-text", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, DataTable: { contractVersion: 1, component: "DataTable", source: "packages/ui/components/DataTable.wrn", family: "collections", support: "recipe-supported", axes: { color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, bordered: { default: "true", values: ["false", "true"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: { bordered: '{bordered ? "true" : "false"}', }, }, toolbar: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, heading: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, caption: { elements: ["h3"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, description: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, actions: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, selectedCount: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, action: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, search: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, vector: { elements: ["svg"], states: { hover: ":hover", }, profile: "managed", ownership: "framework", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, control: { elements: ["input"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, scroll: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, table: { elements: ["table"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, selectCell: { elements: ["th", "td"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, check: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, sort: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', selected: ':is([aria-selected="true"],[data-selected="true"],[aria-current="page"],[data-active="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, sortIcon: { elements: ["svg"], states: { hover: ":hover", }, profile: "managed", ownership: "framework", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, fieldLabel: { elements: ["th"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, status: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, spinner: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, footer: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, range: { elements: ["p"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, pager: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, pageSize: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, pageButton: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, pageIndicator: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, pageNumbers: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, pageNumber: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', selected: ':is([aria-selected="true"],[data-selected="true"],[aria-current="page"],[data-active="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-border", "color-border-strong", "color-danger", "color-info", "color-input-background", "color-input-border", "color-muted", "color-primary", "color-primary-contrast", "color-secondary", "color-success", "color-surface", "color-surface-muted", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "component-color", "component-scale", "font-mono", "font-sans", "highlight-edge", "radius", "radius-md", "radius-sm", "shadow-1", ], regions: { vector: { ownership: "framework", parts: ["vector"], limitations: "Rendered pixels and vector geometry are owned by the existing renderer; recipes style surrounding parts only.", }, sortIcon: { ownership: "framework", parts: ["sortIcon"], limitations: "Rendered pixels and vector geometry are owned by the existing renderer; recipes style surrounding parts only.", }, }, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, DatePicker: { contractVersion: 1, component: "DatePicker", source: "packages/ui/components/DatePicker.wrn", family: "forms", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "normal", values: ["floating", "ghost", "normal", "outlined", "pill", "underline"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", invalid: ':is([aria-invalid="true"],[data-invalid="true"])', }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, heading: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, label: { elements: ["label"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, hint: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, pickerControl: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, srOnly: { elements: ["input"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', readonly: ':is([readonly],[aria-readonly="true"])', }, profile: "managed", ownership: "framework", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, dateTrigger: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, pickerClear: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, button: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, calendar: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, dateSelectors: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, control: { elements: ["select"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "text", ownership: "native", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, calendarWeekdays: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, calendarGrid: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, dateDone: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, help: { elements: ["small"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, error: { elements: ["small"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-border", "color-danger", "color-danger-text", "color-info", "color-input-background", "color-input-border", "color-muted", "color-primary", "color-primary-contrast", "color-primary-text", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "component-color", "component-scale", "control-height", "ease-emphasized", "ease-standard", "field-color", "font-mono", "font-sans", "highlight-edge", "motion-base", "motion-fast", "radius", "radius-sm", "shadow-1", "shadow-3", ], regions: { control: { ownership: "native", parts: ["control"], limitations: "Only the outer native control is styled; picker dialogs, option popups, tracks and thumbs remain native or existing component CSS.", }, }, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, DeviceFrame: { contractVersion: 1, component: "DeviceFrame", source: "packages/ui/components/DeviceFrame.wrn", family: "media", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "default", values: ["default"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, deviceActions: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, button: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, deviceShell: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, embeddedFrame: { elements: ["iframe"], states: { hover: ":hover", }, profile: "managed", ownership: "provider", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, deviceContent: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-background", "color-border", "color-danger", "color-info", "color-muted", "color-primary", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-text", "color-text-muted", "color-warning", "component-color", "component-scale", "ease-standard", "font-sans", "motion-normal", "radius-md", "radius-sm", "shadow-1", ], regions: { embeddedFrame: { ownership: "provider", parts: ["embeddedFrame"], limitations: "Cross-origin embedded content cannot be styled through this contract.", }, }, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Divider: { contractVersion: 1, component: "Divider", source: "packages/ui/components/Divider.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg"], }, color: { default: "primary", values: ["primary"], }, variant: { default: "solid", values: ["dashed", "dotted", "solid"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, rule: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, label: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-border", "color-danger", "color-primary", "color-secondary", "color-success", "color-text-muted", "color-warning", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, DragAndDrop: { contractVersion: 1, component: "DragAndDrop", source: "packages/ui/components/DragAndDrop.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "default", values: ["default"], }, color: { default: "primary", values: ["primary"], }, variant: { default: "default", values: ["default"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, button: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: ["color-border", "color-muted", "color-surface", "color-text", "radius-sm"], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Drawer: { contractVersion: 1, component: "Drawer", source: "packages/ui/components/Drawer.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "md", values: ["full", "lg", "md", "sm", "xl"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "default", values: ["default", "soft", "solid"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, trigger: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, triggerSlot: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, layer: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, backdrop: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, panel: { elements: ["section"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, handle: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, header: { elements: ["header"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, heading: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, icon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, headingCopy: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, title: { elements: ["h2"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, close: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, vector: { elements: ["svg"], states: { hover: ":hover", }, profile: "managed", ownership: "framework", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, body: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, footer: { elements: ["footer"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["trigger", "header", "default", "footer"], tokens: [ "color-border", "color-danger", "color-danger-soft", "color-info", "color-info-soft", "color-primary", "color-primary-contrast", "color-primary-soft", "color-secondary", "color-secondary-soft", "color-success", "color-success-soft", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-warning", "color-warning-soft", "control-height", "highlight-edge", "radius-lg", "radius-sm", "shadow-3", ], regions: { vector: { ownership: "framework", parts: ["vector"], limitations: "Rendered pixels and vector geometry are owned by the existing renderer; recipes style surrounding parts only.", }, }, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, DrawflowCanvas: { contractVersion: 1, component: "DrawflowCanvas", source: "packages/ui/components/DrawflowCanvas.wrn", family: "providers", support: "recipe-supported", axes: { color: { default: "primary", values: ["primary"], }, size: { default: "default", values: ["default"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, toolbar: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, button: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, viewport: { elements: ["div"], states: { hover: ":hover", }, profile: "managed", ownership: "provider", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [], regions: { viewport: { ownership: "provider", parts: ["viewport"], limitations: "Drawflow owns generated graph DOM and its styles. Use the existing provider options and CSS integration.", }, }, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Dropdown: { contractVersion: 1, component: "Dropdown", source: "packages/ui/components/Dropdown.wrn", family: "navigation", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "sm"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "raised", values: ["outline", "raised", "soft"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, trigger: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, triggerIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, triggerLabel: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, chevron: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, dismissLayer: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, panel: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, items: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, divider: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, sectionLabel: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, item: { elements: ["a", "button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', selected: ':is([aria-selected="true"],[data-selected="true"],[aria-current="page"],[data-active="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, itemIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, copy: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, badge: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, status: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, empty: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["trigger", "header", "default", "footer"], tokens: [ "color-border", "color-border-strong", "color-danger", "color-danger-soft", "color-info", "color-info-soft", "color-primary", "color-primary-soft", "color-primary-text", "color-secondary", "color-secondary-soft", "color-success", "color-success-soft", "color-surface", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "color-warning-soft", "control-height", "control-height-lg", "control-height-sm", "font-mono", "highlight-edge", "radius", "radius-sm", "shadow-1", "shadow-3", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, FeatureCard: { contractVersion: 1, component: "FeatureCard", source: "packages/ui/components/FeatureCard.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "sm"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "default", values: ["default", "ghost", "gradient", "minimal", "outline", "raised", "soft", "solid"], }, }, parts: { root: { elements: ["article"], states: { hover: ":hover", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, media: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, image: { elements: ["img"], states: { hover: ":hover", }, profile: "media", ownership: "framework", role: "media", properties: CATALOG_PART_PROPERTIES.media, shapeBinding: false, explicitAxes: {}, }, mediaOverlay: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, body: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, top: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, leading: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, icon: { elements: ["div"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, badge: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: { color: "{badgeColor}", }, }, copy: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, eyebrow: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, title: { elements: ["h3"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, description: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, content: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, footer: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, footerContent: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, action: { elements: ["a", "span"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "layout", ownership: "framework", role: "layout", properties: ["color", "fontFamily", "paddingBlock", "paddingInline"], shapeBinding: false, explicitAxes: {}, }, actionIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, }, slots: ["media", "icon", "default", "footer"], tokens: [ "color-border", "color-danger", "color-danger-contrast", "color-danger-muted", "color-danger-soft", "color-focus", "color-info", "color-info-contrast", "color-info-muted", "color-info-soft", "color-primary", "color-primary-contrast", "color-primary-hover", "color-primary-muted", "color-primary-soft", "color-secondary", "color-secondary-contrast", "color-secondary-hover", "color-secondary-muted", "color-secondary-soft", "color-success", "color-success-contrast", "color-success-muted", "color-success-soft", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-warning", "color-warning-contrast", "color-warning-muted", "color-warning-soft", "color-warning-text", "highlight-edge", "shadow-2", "shadow-3", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, FeatureGrid: { contractVersion: 1, component: "FeatureGrid", source: "packages/ui/components/FeatureGrid.wrn", family: "layout", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "default", values: ["default", "panel", "soft"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, inner: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, grid: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-border", "color-danger", "color-info", "color-muted", "color-primary", "color-secondary", "color-success", "color-surface-raised", "color-text", "color-text-muted", "color-warning", "component-color", "component-scale", "feature-grid-columns", "feature-grid-min-item-width", "feature-grid-mobile-columns", "feature-grid-tablet-columns", "font-sans", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, FeatureIconCard: { contractVersion: 1, component: "FeatureIconCard", source: "packages/ui/components/FeatureIconCard.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "default", values: ["compact", "default", "lg", "sm"], }, color: { default: "primary", values: ["danger", "primary", "success", "warning"], }, variant: { default: "default", values: ["default", "ghost", "soft", "solid"], }, radius: { default: "default", values: ["default", "lg"], }, shadow: { default: "default", values: ["default", "sm"], }, }, parts: { root: { elements: ["article"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, icon: { elements: ["div"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: { size: "{iconSize}", variant: "{iconVariant}", }, }, iconGlyph: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, badge: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, title: { elements: ["h3"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, description: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default", "footer"], tokens: [ "color-border", "color-danger", "color-danger-soft", "color-on-primary", "color-primary", "color-primary-muted", "color-primary-soft", "color-success", "color-success-soft", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-warning-soft", "color-warning-text", "motion-base", "radius", "shadow-1", "shadow-3", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, FileInput: { contractVersion: 1, component: "FileInput", source: "packages/ui/components/FileInput.wrn", family: "forms", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "normal", values: ["floating", "ghost", "normal", "outlined", "pill", "underline"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", invalid: ':is([aria-invalid="true"],[data-invalid="true"])', }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, heading: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, srOnly: { elements: ["label"], states: { hover: ":hover", }, profile: "managed", ownership: "framework", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, hint: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, fileControl: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, control: { elements: ["input"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', invalid: ':is([aria-invalid="true"],[data-invalid="true"])', readonly: ':is([readonly],[aria-readonly="true"])', }, profile: "text", ownership: "native", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, help: { elements: ["small"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, error: { elements: ["small"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-border", "color-border-strong", "color-danger", "color-danger-text", "color-focus", "color-info", "color-input-background", "color-input-border", "color-muted", "color-primary", "color-primary-contrast", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "component-color", "component-scale", "control-height", "ease-emphasized", "ease-standard", "field-color", "font-mono", "font-sans", "highlight-edge", "motion-base", "motion-fast", "radius", "radius-sm", "shadow-1", "shadow-3", ], regions: { control: { ownership: "native", parts: ["control"], limitations: "Only the outer native control is styled; picker dialogs, option popups, tracks and thumbs remain native or existing component CSS.", }, }, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, FileUploadProgress: { contractVersion: 1, component: "FileUploadProgress", source: "packages/ui/components/FileUploadProgress.wrn", family: "forms", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, row: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, uploadFile: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, uploadInfo: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, uploadStatus: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, uploadStatusIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, uploadActions: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, button: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-border", "color-border-strong", "color-danger", "color-danger-text", "color-info", "color-input-background", "color-input-border", "color-muted", "color-primary", "color-primary-contrast", "color-secondary", "color-success", "color-success-text", "color-surface", "color-surface-2", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "component-color", "component-scale", "control-height", "ease-emphasized", "ease-standard", "field-color", "font-mono", "font-sans", "highlight-edge", "motion-base", "motion-fast", "motion-slow", "radius", "radius-sm", "shadow-1", "shadow-3", "upload-color", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, FlowCanvas: { contractVersion: 1, component: "FlowCanvas", source: "packages/ui/components/FlowCanvas.wrn", family: "editors", support: "recipe-supported", axes: { color: { default: "primary", values: ["primary"], }, size: { default: "default", values: ["default"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, toolbar: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, button: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, viewport: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, stage: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, links: { elements: ["svg"], states: { hover: ":hover", }, profile: "managed", ownership: "framework", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, node: { elements: ["div"], states: { hover: ":hover", selected: ':is([aria-selected="true"],[data-selected="true"],[aria-current="page"],[data-active="true"])', }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, nodeTitle: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, port: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-border", "color-primary", "color-surface", "color-surface-muted", "color-text", "color-text-muted", "radius-lg", ], regions: { links: { ownership: "framework", parts: ["links"], limitations: "Rendered pixels and vector geometry are owned by the existing renderer; recipes style surrounding parts only.", }, }, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Footer: { contractVersion: 1, component: "Footer", source: "packages/ui/components/Footer.wrn", family: "navigation", support: "recipe-supported", axes: { size: { default: "default", values: ["default"], }, color: { default: "primary", values: ["primary"], }, }, parts: { root: { elements: ["footer"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, grid: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, pre: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, links: { elements: ["nav"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, column: { elements: ["section"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, heading: { elements: ["h2"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, columnLinks: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, link: { elements: ["a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", selected: ':is([aria-selected="true"],[data-selected="true"],[aria-current="page"],[data-active="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, post: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, bottom: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, copyrightLeft: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, copyright: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, copyrightRight: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, }, slots: ["pre-footer", "post-footer", "copyright-left", "copyright-right"], tokens: [ "color-border", "color-muted", "color-primary", "color-surface", "color-surface-2", "color-text", "component-color", "footer-columns", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Grid: { contractVersion: 1, component: "Grid", source: "packages/ui/components/Grid.wrn", family: "layout", support: "recipe-supported", axes: { size: { default: "default", values: ["compact", "default"], }, color: { default: "primary", values: ["primary"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Hero: { contractVersion: 1, component: "Hero", source: "packages/ui/components/Hero.wrn", family: "layout", support: "recipe-supported", axes: { size: { default: "default", values: ["compact", "default", "large", "lg", "sm", "xl"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "default", values: ["default", "gradient", "minimal", "outline", "raised", "soft", "solid"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, decorations: { elements: ["div"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, glow: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, gridPattern: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, inner: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, layout: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, content: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, eyebrow: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, eyebrowIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, eyebrowDot: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, headingRow: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, icon: { elements: ["div"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, headingCopy: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, title: { elements: ["h1"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, highlight: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, description: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, badges: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, actions: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, action: { elements: ["a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, actionIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, trust: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, trustItem: { elements: ["span"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, trustIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, visual: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, visualCard: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, visualMedia: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, visualImage: { elements: ["img"], states: { hover: ":hover", }, profile: "media", ownership: "framework", role: "media", properties: CATALOG_PART_PROPERTIES.media, shapeBinding: false, explicitAxes: {}, }, visualHeader: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, visualIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, visualCopy: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, visualEyebrow: { elements: ["p"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, visualTitle: { elements: ["h2"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, visualDescription: { elements: ["p"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, visualItems: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, visualItem: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, visualItemIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, visualItemCopy: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, visualItemLabel: { elements: ["span"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, visualItemDescription: { elements: ["span"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, visualItemValue: { elements: ["strong"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, footer: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["eyebrow", "actions", "trust", "default", "visual", "footer"], tokens: [ "color-border", "color-danger", "color-danger-contrast", "color-danger-muted", "color-danger-soft", "color-info", "color-info-contrast", "color-info-muted", "color-info-soft", "color-primary", "color-primary-contrast", "color-primary-muted", "color-primary-soft", "color-secondary", "color-secondary-contrast", "color-secondary-muted", "color-secondary-soft", "color-success", "color-success-contrast", "color-success-muted", "color-success-soft", "color-surface", "color-surface-raised", "color-text", "color-text-muted", "color-warning", "color-warning-contrast", "color-warning-muted", "color-warning-soft", "hero-accent", "hero-accent-muted", "hero-accent-soft", "hero-contrast", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, HeroActions: { contractVersion: 1, component: "HeroActions", source: "packages/ui/components/HeroActions.wrn", family: "layout", support: "recipe-supported", axes: { size: { default: "default", values: ["default"], }, color: { default: "primary", values: ["primary"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Image: { contractVersion: 1, component: "Image", source: "packages/ui/components/Image.wrn", family: "media", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "landscape", "portrait", "square", "video"], }, color: { default: "primary", values: ["primary"], }, rounded: { default: "false", values: ["false", "true"], }, }, parts: { root: { elements: ["figure"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: true, explicitAxes: {}, }, img: { elements: ["img"], states: { hover: ":hover", }, profile: "media", ownership: "framework", role: "media", properties: CATALOG_PART_PROPERTIES.media, shapeBinding: false, explicitAxes: {}, }, placeholder: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, placeholderIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: ["color-surface-soft", "color-text-muted", "radius-lg"], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, InputGroup: { contractVersion: 1, component: "InputGroup", source: "packages/ui/components/InputGroup.wrn", family: "forms", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "normal", values: ["floating", "ghost", "normal", "outlined", "pill", "underline"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", invalid: ':is([aria-invalid="true"],[data-invalid="true"])', }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, heading: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, srOnly: { elements: ["label"], states: { hover: ":hover", }, profile: "managed", ownership: "framework", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, hint: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, inputGroupControl: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, inputAddon: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, icon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, control: { elements: ["input"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', invalid: ':is([aria-invalid="true"],[data-invalid="true"])', readonly: ':is([readonly],[aria-readonly="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, button: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, help: { elements: ["small"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, error: { elements: ["small"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-border", "color-danger", "color-danger-text", "color-info", "color-input-background", "color-input-border", "color-muted", "color-primary", "color-primary-contrast", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "component-color", "component-scale", "control-height", "ease-emphasized", "ease-standard", "field-color", "font-mono", "font-sans", "highlight-edge", "motion-base", "motion-fast", "radius", "radius-sm", "shadow-1", "shadow-3", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, InputNumber: { contractVersion: 1, component: "InputNumber", source: "packages/ui/components/InputNumber.wrn", family: "forms", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "sm", "xl", "xs"], }, color: { default: "primary", values: ["primary"], }, variant: { default: "default", values: ["compact", "default", "horizontal", "labeled", "seat", "vertical"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", invalid: ':is([aria-invalid="true"],[data-invalid="true"])', }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, label: { elements: ["label"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, required: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, description: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, control: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, button: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, icon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, content: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, copy: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, innerLabel: { elements: ["label"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, innerDescription: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, field: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, prefix: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, input: { elements: ["input"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', invalid: ':is([aria-invalid="true"],[data-invalid="true"])', readonly: ':is([readonly],[aria-readonly="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, suffix: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, buttons: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, message: { elements: ["p"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, errorIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-border", "color-danger", "color-info", "color-input-background", "color-input-border", "color-muted", "color-primary", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-surface-muted", "color-surface-soft", "color-text", "color-text-muted", "color-warning", "motion-base", "motion-fast", "radius-sm", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Kbd: { contractVersion: 1, component: "Kbd", source: "packages/ui/components/Kbd.wrn", family: "typography", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "sm"], }, color: { default: "primary", values: ["primary"], }, }, parts: { root: { elements: ["kbd"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "code", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-border", "color-border-strong", "color-surface", "color-surface-soft", "color-text", "color-text-muted", "font-mono", "highlight-edge", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, LayoutSplitter: { contractVersion: 1, component: "LayoutSplitter", source: "packages/ui/components/LayoutSplitter.wrn", family: "layout", support: "recipe-supported", axes: { color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, pane: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, handle: { elements: ["div"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, grip: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["start", "end", "default"], tokens: [ "color-border", "color-border-strong", "color-danger", "color-info", "color-primary", "color-secondary", "color-success", "color-surface", "color-surface-raised", "color-surface-soft", "color-text", "radius", "radius-sm", "shadow-1", "split", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, LegendIndicator: { contractVersion: 1, component: "LegendIndicator", source: "packages/ui/components/LegendIndicator.wrn", family: "feedback", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "default", values: ["default"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, items: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, button: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-border", "color-danger", "color-info", "color-muted", "color-primary", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-text", "color-text-muted", "color-warning", "component-color", "component-scale", "font-sans", "radius", "radius-sm", "shadow-1", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Link: { contractVersion: 1, component: "Link", source: "packages/ui/components/Link.wrn", family: "navigation", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "xs"], }, color: { default: "primary", values: ["danger", "info", "neutral", "primary", "secondary", "success", "warning"], }, }, parts: { root: { elements: ["a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, label: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, icon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-danger", "color-focus", "color-info", "color-primary", "color-primary-hover", "color-secondary", "color-secondary-hover", "color-success", "color-text", "color-warning-text", "radius-sm", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, List: { contractVersion: 1, component: "List", source: "packages/ui/components/List.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "sm"], }, color: { default: "primary", values: ["primary"], }, variant: { default: "default", values: ["card", "default", "divided", "separated"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, header: { elements: ["header"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, title: { elements: ["h3"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, description: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, items: { elements: ["ul"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, item: { elements: ["li"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, row: { elements: ["a", "div"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "layout", ownership: "framework", role: "layout", properties: ["color", "fontFamily", "paddingBlock", "paddingInline"], shapeBinding: false, explicitAxes: {}, }, leadingIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, image: { elements: ["img"], states: { hover: ":hover", }, profile: "media", ownership: "framework", role: "media", properties: CATALOG_PART_PROPERTIES.media, shapeBinding: false, explicitAxes: {}, }, body: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, heading: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, itemTitle: { elements: ["p"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, meta: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, itemDescription: { elements: ["p"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, badge: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, chevron: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, empty: { elements: ["li"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-border", "color-border-strong", "color-focus", "color-primary", "color-primary-text", "color-surface", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "motion-base", "radius", "radius-sm", "shadow-1", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, ListGroup: { contractVersion: 1, component: "ListGroup", source: "packages/ui/components/ListGroup.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "default", values: ["default"], }, color: { default: "primary", values: ["primary"], }, variant: { default: "default", values: ["default"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, items: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, button: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, badge: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-border", "color-muted", "color-primary", "color-surface", "color-text", "radius", "shadow-1", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Map: { contractVersion: 1, component: "Map", source: "packages/ui/components/Map.wrn", family: "providers", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "sm"], }, color: { default: "primary", values: ["primary"], }, variant: { default: "default", values: ["default"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, header: { elements: ["header"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, title: { elements: ["h3"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, description: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, headerIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, viewport: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, selection: { elements: ["p", "output"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, embeddedFrame: { elements: ["iframe"], states: { hover: ":hover", }, profile: "managed", ownership: "provider", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, canvas: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, image: { elements: ["img"], states: { hover: ":hover", }, profile: "media", ownership: "framework", role: "media", properties: CATALOG_PART_PROPERTIES.media, shapeBinding: false, explicitAxes: {}, }, grid: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, content: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, marker: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, controls: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, control: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, controlIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-border", "color-focus", "color-on-primary", "color-primary", "color-primary-soft", "color-surface", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "ease-standard", "motion-base", "radius", "shadow-1", "shadow-3", ], regions: { embeddedFrame: { ownership: "provider", parts: ["embeddedFrame"], limitations: "Cross-origin embedded content cannot be styled through this contract.", }, }, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, MarketingSectionHeader: { contractVersion: 1, component: "MarketingSectionHeader", source: "packages/ui/components/MarketingSectionHeader.wrn", family: "layout", support: "recipe-supported", axes: { size: { default: "default", values: ["default"], }, color: { default: "primary", values: ["primary"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["icon", "actions", "default"], tokens: [], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Marquee: { contractVersion: 1, component: "Marquee", source: "packages/ui/components/Marquee.wrn", family: "layout", support: "recipe-supported", axes: { size: { default: "default", values: ["default"], }, color: { default: "primary", values: ["danger", "primary", "success", "warning"], }, variant: { default: "default", values: ["default"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, layout: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, title: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, icon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, window: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, track: { elements: ["div"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, item: { elements: ["a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, dot: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: { color: '{item.color || "primary"}', }, }, meta: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, empty: { elements: ["p"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, toggle: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-border", "color-danger", "color-focus", "color-on-primary", "color-primary", "color-primary-soft", "color-success", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-warning", "motion-base", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, MegaMenu: { contractVersion: 1, component: "MegaMenu", source: "packages/ui/components/MegaMenu.wrn", family: "navigation", support: "recipe-supported", axes: { color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success"], }, size: { default: "default", values: ["default", "lg", "sm"], }, variant: { default: "default", values: ["catalog", "dark", "default", "icon-grid"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, trigger: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, triggerIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, triggerLabel: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, arrow: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, panel: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, layout: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, rail: { elements: ["aside"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, railLink: { elements: ["button", "a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', selected: ':is([aria-selected="true"],[data-selected="true"],[aria-current="page"],[data-active="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, railIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, columns: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, column: { elements: ["section"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, columnHeader: { elements: ["header"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, eyebrow: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, heading: { elements: ["h3"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, columnDescription: { elements: ["p"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, columnImage: { elements: ["img"], states: { hover: ":hover", }, profile: "media", ownership: "framework", role: "media", properties: CATALOG_PART_PROPERTIES.media, shapeBinding: false, explicitAxes: {}, }, list: { elements: ["ul"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, link: { elements: ["a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, linkImage: { elements: ["img"], states: { hover: ":hover", }, profile: "media", ownership: "framework", role: "media", properties: CATALOG_PART_PROPERTIES.media, shapeBinding: false, explicitAxes: {}, }, linkIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, vector: { elements: ["svg"], states: { hover: ":hover", }, profile: "managed", ownership: "framework", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, linkBody: { elements: ["span"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, linkEyebrow: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, linkLabel: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, badge: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, linkDescription: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, columnAction: { elements: ["a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, featured: { elements: ["aside"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, footer: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-border", "color-danger", "color-info", "color-primary", "color-secondary", "color-success", "color-surface", "color-surface-soft", "color-text", "color-text-muted", "radius-lg", "radius-sm", "shadow-1", ], regions: { vector: { ownership: "framework", parts: ["vector"], limitations: "Rendered pixels and vector geometry are owned by the existing renderer; recipes style surrounding parts only.", }, }, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, MetricCard: { contractVersion: 1, component: "MetricCard", source: "packages/ui/components/MetricCard.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "sm"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "default", values: ["default", "gradient", "minimal", "outline", "raised", "soft", "solid"], }, }, parts: { root: { elements: ["article"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, top: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, heading: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, label: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, badge: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, icon: { elements: ["div"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, valueRow: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, prefix: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, value: { elements: ["strong"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, suffix: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, description: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, progressBlock: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, progressMeta: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, progressTrack: { elements: ["div"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, progressValue: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, trend: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, trendIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, trendValue: { elements: ["strong"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, trendLabel: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, footer: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, action: { elements: ["a", "button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, actionIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default", "footer"], tokens: [ "color-border", "color-border-strong", "color-danger", "color-danger-contrast", "color-danger-hover", "color-danger-muted", "color-danger-soft", "color-danger-text", "color-focus", "color-info", "color-info-contrast", "color-info-hover", "color-info-muted", "color-info-soft", "color-primary", "color-primary-contrast", "color-primary-hover", "color-primary-muted", "color-primary-soft", "color-primary-text", "color-secondary", "color-secondary-contrast", "color-secondary-hover", "color-secondary-muted", "color-secondary-soft", "color-success", "color-success-contrast", "color-success-hover", "color-success-muted", "color-success-soft", "color-success-text", "color-surface", "color-surface-2", "color-surface-muted", "color-surface-raised", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "color-warning-contrast", "color-warning-hover", "color-warning-muted", "color-warning-soft", "highlight-edge", "metric-progress", "radius", "radius-lg", "radius-sm", "shadow-1", "shadow-2", "shadow-3", "space-panel", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, MetricGrid: { contractVersion: 1, component: "MetricGrid", source: "packages/ui/components/MetricGrid.wrn", family: "layout", support: "recipe-supported", axes: { size: { default: "default", values: ["default"], }, color: { default: "primary", values: ["primary"], }, variant: { default: "default", values: ["default", "panel", "soft"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, frame: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, surface: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, empty: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-border", "color-border-strong", "color-surface-raised", "color-surface-soft", "color-text-muted", "metric-columns", "metric-min-item-width", "metric-mobile-columns", "metric-tablet-columns", "radius", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Navbar: { contractVersion: 1, component: "Navbar", source: "packages/ui/components/Navbar.wrn", family: "navigation", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, }, parts: { root: { elements: ["header"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, topbar: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, main: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, brand: { elements: ["a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, brandLogo: { elements: ["img"], states: { hover: ":hover", }, profile: "media", ownership: "framework", role: "media", properties: CATALOG_PART_PROPERTIES.media, shapeBinding: false, explicitAxes: {}, }, brandIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, brandCopy: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, collapse: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, menus: { elements: ["nav"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, menuLink: { elements: ["a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", selected: ':is([aria-selected="true"],[data-selected="true"],[aria-current="page"],[data-active="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, dropdown: { elements: ["div"], states: { hover: ":hover", open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, trigger: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', open: ':is([aria-expanded="true"],[data-open="true"])', selected: ':is([aria-selected="true"],[data-selected="true"],[aria-current="page"],[data-active="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, chevron: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, panel: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, panelIntro: { elements: ["p"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, group: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, groupTitle: { elements: ["strong"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, link: { elements: ["a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", selected: ':is([aria-selected="true"],[data-selected="true"],[aria-current="page"],[data-active="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, actions: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, action: { elements: ["a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, utilities: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, toggle: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, }, slots: ["topbar", "brand", "actions", "utilities"], tokens: [ "color-border", "color-border-strong", "color-danger", "color-info", "color-muted", "color-on-primary", "color-primary", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "component-color", "component-scale", "font-mono", "font-sans", "highlight-edge", "motion-fast", "navbar-floating-start", "radius", "radius-sm", "shadow-1", "shadow-2", "shadow-3", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Pagination: { contractVersion: 1, component: "Pagination", source: "packages/ui/components/Pagination.wrn", family: "navigation", support: "recipe-supported", axes: { color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success"], }, size: { default: "default", values: ["default", "lg", "sm"], }, variant: { default: "compact", values: ["compact"], }, }, parts: { root: { elements: ["nav"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, summary: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, controls: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, step: { elements: ["a", "button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, stepIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, stepLabel: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, pages: { elements: ["ol"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, slot: { elements: ["li"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, gap: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, page: { elements: ["a", "button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", selected: ':is([aria-selected="true"],[data-selected="true"],[aria-current="page"],[data-active="true"])', disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, compact: { elements: ["p"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-border", "color-border-strong", "color-danger", "color-info", "color-primary", "color-primary-contrast", "color-secondary", "color-success", "color-surface", "color-surface-muted", "color-surface-soft", "color-text", "color-text-muted", "highlight-edge", "radius-sm", "shadow-1", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, PinInput: { contractVersion: 1, component: "PinInput", source: "packages/ui/components/PinInput.wrn", family: "forms", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, }, parts: { root: { elements: ["fieldset"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, pinHeading: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, pinClear: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, pinCells: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, control: { elements: ["input"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', readonly: ':is([readonly],[aria-readonly="true"])', }, profile: "layout", ownership: "framework", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, pinSeparator: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, validation: { elements: ["small"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-border", "color-border-strong", "color-danger", "color-info", "color-input-background", "color-input-border", "color-muted", "color-primary", "color-secondary", "color-success", "color-surface", "color-text", "color-text-muted", "color-warning", "component-color", "component-scale", "control-height", "ease-standard", "font-mono", "font-sans", "motion-base", "radius-sm", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Popover: { contractVersion: 1, component: "Popover", source: "packages/ui/components/Popover.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "sm"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "raised", values: ["outline", "raised", "soft", "solid"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, trigger: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, dismissLayer: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, panel: { elements: ["section"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, arrow: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, header: { elements: ["header"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, heading: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, icon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, headingCopy: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, title: { elements: ["h3"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, close: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, body: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, footer: { elements: ["footer"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, action: { elements: ["a", "button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, }, slots: ["trigger", "header", "default", "footer"], tokens: [ "color-border", "color-border-strong", "color-danger", "color-danger-soft", "color-info", "color-info-contrast", "color-info-soft", "color-on-danger", "color-primary", "color-primary-contrast", "color-primary-soft", "color-secondary", "color-secondary-contrast", "color-secondary-soft", "color-success", "color-success-contrast", "color-success-soft", "color-surface", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-warning", "color-warning-soft", "color-warning-text", "control-height", "control-height-lg", "control-height-sm", "highlight-edge", "radius", "radius-sm", "shadow-1", "shadow-3", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, PortalDashboard: { contractVersion: 1, component: "PortalDashboard", source: "packages/ui/components/PortalDashboard.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, }, parts: { root: { elements: ["main"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, hero: { elements: ["header"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, eyebrow: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, title: { elements: ["h1", "h2"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, heroSlot: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, metrics: { elements: ["section"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, metric: { elements: ["article"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, metricIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, grid: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, panel: { elements: ["section"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, panelHeading: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, actions: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, link: { elements: ["a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, list: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, status: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, timeline: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["hero-action"], tokens: [ "color-border", "color-danger", "color-info", "color-muted", "color-primary", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-text", "color-text-muted", "color-warning", "component-color", "component-scale", "font-sans", "radius-md", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, PreferenceSwitcher: { contractVersion: 1, component: "PreferenceSwitcher", source: "packages/ui/components/PreferenceSwitcher.wrn", family: "navigation", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, compact: { default: "true", values: ["false", "true"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, menu: { elements: ["div"], states: { hover: ":hover", open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, trigger: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, panel: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, options: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, button: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, swatches: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, currentLanguage: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-border", "color-danger", "color-info", "color-muted", "color-primary", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-text", "color-text-muted", "color-warning", "component-color", "component-scale", "font-sans", "preference-swatch", "radius-sm", "shadow-lg", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, PublicPageShell: { contractVersion: 1, component: "PublicPageShell", source: "packages/ui/components/PublicPageShell.wrn", family: "layout", support: "recipe-supported", axes: { size: { default: "default", values: ["default"], }, color: { default: "primary", values: ["primary"], }, variant: { default: "default", values: ["default"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, main: { elements: ["main"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["before", "default", "after"], tokens: ["color-background", "color-surface-raised", "color-surface-soft", "color-text"], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, RangeSlider: { contractVersion: 1, component: "RangeSlider", source: "packages/ui/components/RangeSlider.wrn", family: "forms", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "normal", values: ["floating", "ghost", "normal", "outlined", "pill", "underline"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", invalid: ':is([aria-invalid="true"],[data-invalid="true"])', }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, heading: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, srOnly: { elements: ["label", "input"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', readonly: ':is([readonly],[aria-readonly="true"])', }, profile: "managed", ownership: "framework", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, hint: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, rangeControl: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, rangeStepper: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, vector: { elements: ["svg"], states: { hover: ":hover", }, profile: "managed", ownership: "framework", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, rangeTrack: { elements: ["div"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, customSlider: { elements: ["div"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', invalid: ':is([aria-invalid="true"],[data-invalid="true"])', readonly: ':is([readonly],[aria-readonly="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, sliderFill: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, sliderThumb: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, sliderMarks: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, button: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, rangeBounds: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, help: { elements: ["small"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, error: { elements: ["small"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-border", "color-border-strong", "color-danger", "color-danger-text", "color-info", "color-input-background", "color-input-border", "color-muted", "color-primary", "color-primary-contrast", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "component-color", "component-scale", "control-height", "ease-emphasized", "ease-standard", "field-color", "font-mono", "font-sans", "highlight-edge", "motion-base", "motion-fast", "radius", "radius-sm", "range-progress", "shadow-1", "shadow-3", ], regions: { vector: { ownership: "framework", parts: ["vector"], limitations: "Rendered pixels and vector geometry are owned by the existing renderer; recipes style surrounding parts only.", }, }, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Rating: { contractVersion: 1, component: "Rating", source: "packages/ui/components/Rating.wrn", family: "feedback", support: "recipe-supported", axes: { size: { default: "default", values: ["default"], }, color: { default: "primary", values: ["primary"], }, variant: { default: "default", values: ["default"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, stars: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, button: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, vector: { elements: ["svg"], states: { hover: ":hover", }, profile: "managed", ownership: "framework", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, fill: { elements: ["svg"], states: { hover: ":hover", }, profile: "managed", ownership: "framework", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, precise: { elements: ["input"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "text", ownership: "native", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-border-strong", "color-focus", "color-muted", "color-primary", "color-text", "color-warning", "font-mono", "radius-sm", ], regions: { vector: { ownership: "framework", parts: ["vector"], limitations: "Rendered pixels and vector geometry are owned by the existing renderer; recipes style surrounding parts only.", }, fill: { ownership: "framework", parts: ["fill"], limitations: "Rendered pixels and vector geometry are owned by the existing renderer; recipes style surrounding parts only.", }, precise: { ownership: "native", parts: ["precise"], limitations: "Only the outer native control is styled; picker dialogs, option popups, tracks and thumbs remain native or existing component CSS.", }, }, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Scrollspy: { contractVersion: 1, component: "Scrollspy", source: "packages/ui/components/Scrollspy.wrn", family: "navigation", support: "recipe-supported", axes: { color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success"], }, size: { default: "default", values: ["default", "lg", "sm"], }, }, parts: { root: { elements: ["nav"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, heading: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, list: { elements: ["ul"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, item: { elements: ["li"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, link: { elements: ["a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", selected: ':is([aria-selected="true"],[data-selected="true"],[aria-current="page"],[data-active="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, label: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-border", "color-danger", "color-info", "color-primary", "color-secondary", "color-success", "color-text", "color-text-muted", "color-text-subtle", "font-mono", "scrollspy-section-offset", "scrollspy-top", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, SearchBox: { contractVersion: 1, component: "SearchBox", source: "packages/ui/components/SearchBox.wrn", family: "forms", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "sm"], }, color: { default: "primary", values: ["primary"], }, }, parts: { root: { elements: ["form"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, label: { elements: ["label"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, control: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, searchIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, input: { elements: ["input"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, button: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, buttonIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-focus", "color-input-background", "color-input-border", "color-input-border-focus", "color-input-border-hover", "color-input-placeholder", "color-input-text", "color-on-primary", "color-primary", "color-primary-hover", "color-surface-soft", "color-text", "color-text-muted", "highlight-edge", "motion-base", "radius-sm", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Section: { contractVersion: 1, component: "Section", source: "packages/ui/components/Section.wrn", family: "layout", support: "recipe-supported", axes: { size: { default: "default", values: ["default"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "default", values: ["default", "grid", "panel", "raised", "soft", "solid", "tinted"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-border", "color-danger", "color-danger-soft", "color-info", "color-info-soft", "color-on-danger", "color-on-primary", "color-on-secondary", "color-primary", "color-primary-soft", "color-secondary", "color-success", "color-success-soft", "color-surface", "color-surface-raised", "color-surface-soft", "color-warning", "color-warning-soft", "radius-lg", "shadow-1", "sticky-header-offset", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, SectionHeader: { contractVersion: 1, component: "SectionHeader", source: "packages/ui/components/SectionHeader.wrn", family: "layout", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "sm"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, }, parts: { root: { elements: ["header"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, copy: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, eyebrowRow: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, eyebrow: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, title: { elements: ["h1", "h3", "h2"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, description: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, actions: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["icon", "default", "actions"], tokens: [ "color-danger", "color-info", "color-primary", "color-secondary", "color-success", "color-text", "color-text-muted", "color-warning-text", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Sidebar: { contractVersion: 1, component: "Sidebar", source: "packages/ui/components/Sidebar.wrn", family: "navigation", support: "recipe-supported", axes: { color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success"], }, size: { default: "default", values: ["default", "lg", "sm"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, launcher: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, launcherBar: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, launcherText: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, rail: { elements: ["nav"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, list: { elements: ["ul"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, entry: { elements: ["li"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, heading: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, link: { elements: ["a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', selected: ':is([aria-selected="true"],[data-selected="true"],[aria-current="page"],[data-active="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, icon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, label: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, badge: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, sublist: { elements: ["ul"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, drawerNav: { elements: ["nav"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default", "drawer"], tokens: [ "color-border", "color-border-strong", "color-danger", "color-info", "color-primary", "color-primary-text", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "font-mono", "radius", "radius-sm", "shadow-1", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, SplitHero: { contractVersion: 1, component: "SplitHero", source: "packages/ui/components/SplitHero.wrn", family: "layout", support: "recipe-supported", axes: { size: { default: "default", values: ["compact", "default", "lg", "sm"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "default", values: ["default", "gradient", "outline", "raised", "soft", "solid"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, backgroundImage: { elements: ["img"], states: { hover: ":hover", }, profile: "media", ownership: "framework", role: "media", properties: CATALOG_PART_PROPERTIES.media, shapeBinding: false, explicitAxes: {}, }, glow: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, inner: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, layout: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, content: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, eyebrow: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, eyebrowIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, title: { elements: ["h1"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, highlight: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, description: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, actions: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, action: { elements: ["a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, actionIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, trust: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, trustItem: { elements: ["span"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, visualColumn: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, visual: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, visualMedia: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, visualImage: { elements: ["img"], states: { hover: ":hover", }, profile: "media", ownership: "framework", role: "media", properties: CATALOG_PART_PROPERTIES.media, shapeBinding: false, explicitAxes: {}, }, visualHeader: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, visualIcon: { elements: ["div"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, visualCopy: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, visualEyebrow: { elements: ["p"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, visualTitle: { elements: ["h2"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, visualDescription: { elements: ["p"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, visualList: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, visualItem: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, visualItemIcon: { elements: ["div"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, visualItemCopy: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, visualItemHeading: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default", "actions", "trust", "visual"], tokens: [ "color-background", "color-border", "color-danger", "color-danger-contrast", "color-danger-hover", "color-danger-muted", "color-danger-soft", "color-focus", "color-info", "color-info-contrast", "color-info-hover", "color-info-muted", "color-info-soft", "color-primary", "color-primary-contrast", "color-primary-hover", "color-primary-muted", "color-primary-soft", "color-secondary", "color-secondary-contrast", "color-secondary-hover", "color-secondary-muted", "color-secondary-soft", "color-success", "color-success-contrast", "color-success-hover", "color-success-muted", "color-success-soft", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-warning", "color-warning-contrast", "color-warning-hover", "color-warning-muted", "color-warning-soft", "highlight-edge", "shadow-3", "split-title-max-width", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, StatsBar: { contractVersion: 1, component: "StatsBar", source: "packages/ui/components/StatsBar.wrn", family: "collections", support: "recipe-supported", axes: { compact: { default: "true", values: ["false", "true"], }, size: { default: "default", values: ["default", "lg", "sm"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "raised", values: ["card", "default", "minimal", "outline", "raised", "soft", "solid"], }, radius: { default: "default", values: ["default", "xl"], }, shadow: { default: "default", values: ["default", "sm"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: { compact: '{compact ? "true" : "false"}', }, }, inner: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, surface: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, item: { elements: ["article"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: { color: "{item.color || color}", }, }, content: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, label: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, valueRow: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, value: { elements: ["strong"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, suffix: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, description: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, trend: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, trendIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, trendValue: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, trendLabel: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, icon: { elements: ["div"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, empty: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-border", "color-border-strong", "color-danger", "color-danger-contrast", "color-danger-text", "color-info", "color-info-contrast", "color-primary", "color-primary-contrast", "color-secondary", "color-secondary-contrast", "color-success", "color-success-contrast", "color-success-text", "color-surface", "color-surface-2", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "color-warning-contrast", "radius", "radius-lg", "radius-sm", "shadow-2", "shadow-3", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Stepper: { contractVersion: 1, component: "Stepper", source: "packages/ui/components/Stepper.wrn", family: "collections", support: "recipe-supported", axes: { color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success"], }, size: { default: "default", values: ["default", "lg", "sm"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, list: { elements: ["ol"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, step: { elements: ["li"], states: { hover: ":hover", selected: ':is([aria-selected="true"],[data-selected="true"],[aria-current="page"],[data-active="true"])', }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, button: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, marker: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, icon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, number: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, body: { elements: ["span"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, label: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, description: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, custom: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, panels: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, panel: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, panelTitle: { elements: ["h4"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, panelBody: { elements: ["p"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, controls: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, buttonControl: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, controlsSpacer: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["step-{index}", "panel-{index}", "default"], tokens: [ "color-border", "color-border-strong", "color-danger", "color-info", "color-primary", "color-primary-contrast", "color-primary-text", "color-secondary", "color-success", "color-surface", "color-surface-soft", "color-text", "color-text-muted", "control-height", "font-mono", "highlight-edge", "radius", "radius-sm", "shadow-1", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, StrongPassword: { contractVersion: 1, component: "StrongPassword", source: "packages/ui/components/StrongPassword.wrn", family: "forms", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, label: { elements: ["label"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, anchor: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, leadingIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, control: { elements: ["input"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', invalid: ':is([aria-invalid="true"],[data-invalid="true"])', readonly: ':is([readonly],[aria-readonly="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, toggle: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, popover: { elements: ["div"], states: { hover: ":hover", open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, popoverArrow: { elements: ["div"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, details: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, summary: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, meter: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, requirements: { elements: ["ul"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, special: { elements: ["li"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, validation: { elements: ["small"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-border", "color-danger", "color-danger-text", "color-info", "color-input-background", "color-input-border", "color-muted", "color-primary", "color-primary-contrast", "color-secondary", "color-success", "color-success-text", "color-surface", "color-surface-2", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "component-color", "component-scale", "control-height", "ease-emphasized", "ease-standard", "field-color", "font-mono", "font-sans", "highlight-edge", "motion-base", "motion-fast", "radius", "radius-sm", "shadow-1", "shadow-3", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, StyledIcon: { contractVersion: 1, component: "StyledIcon", source: "packages/ui/components/StyledIcon.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "sm"], }, color: { default: "primary", values: ["primary", "success", "warning"], }, variant: { default: "default", values: ["default", "outline", "plain"], }, }, parts: { root: { elements: ["span"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: ["color-primary-text", "color-success-text", "color-warning-text", "radius-sm"], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Tabs: { contractVersion: 1, component: "Tabs", source: "packages/ui/components/Tabs.wrn", family: "collections", support: "recipe-supported", axes: { color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success"], }, size: { default: "default", values: ["default", "lg", "sm"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, list: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, tab: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', selected: ':is([aria-selected="true"],[data-selected="true"],[aria-current="page"],[data-active="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, icon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, label: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, badge: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, panels: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, panel: { elements: ["div"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, title: { elements: ["h3"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, description: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, content: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, }, slots: ["{panelSlot(item, index)}", "default"], tokens: [ "color-border", "color-danger", "color-info", "color-primary", "color-secondary", "color-success", "color-surface", "color-surface-muted", "color-surface-soft", "color-text", "color-text-muted", "radius-md", "radius-sm", "shadow-1", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, TextLink: { contractVersion: 1, component: "TextLink", source: "packages/ui/components/TextLink.wrn", family: "navigation", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm"], }, color: { default: "primary", values: ["danger", "info", "neutral", "primary", "secondary", "success", "warning"], }, variant: { default: "default", values: ["button", "default"], }, }, parts: { root: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, control: { elements: ["span", "a"], states: { hover: ":hover", disabled: ':is(:disabled,[aria-disabled="true"])', focusVisible: ":focus-visible", active: ":active", }, profile: "layout", ownership: "framework", role: "control", properties: ["color", "fontFamily", "paddingBlock", "paddingInline"], shapeBinding: false, explicitAxes: {}, }, icon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-danger", "color-focus", "color-info", "color-primary", "color-primary-hover", "color-primary-soft", "color-secondary", "color-success", "color-text", "color-warning-text", "ease-standard", "motion-base", "radius", "radius-sm", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, TimePicker: { contractVersion: 1, component: "TimePicker", source: "packages/ui/components/TimePicker.wrn", family: "forms", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "normal", values: ["floating", "ghost", "normal", "outlined", "pill", "underline"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", invalid: ':is([aria-invalid="true"],[data-invalid="true"])', }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, heading: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, srOnly: { elements: ["label", "input"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', readonly: ':is([readonly],[aria-readonly="true"])', }, profile: "managed", ownership: "framework", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, hint: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, control: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, icon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, timeTrigger: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, button: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, timePanel: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, timeOptions: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, timeDone: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, help: { elements: ["small"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, error: { elements: ["small"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-border", "color-border-strong", "color-danger", "color-danger-text", "color-info", "color-input-background", "color-input-border", "color-muted", "color-primary", "color-primary-contrast", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "component-color", "component-scale", "control-height", "ease-emphasized", "ease-standard", "field-color", "font-mono", "font-sans", "highlight-edge", "motion-base", "motion-fast", "radius", "radius-sm", "shadow-1", "shadow-3", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Timeline: { contractVersion: 1, component: "Timeline", source: "packages/ui/components/Timeline.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "sm"], }, color: { default: "primary", values: ["info", "primary", "success"], }, variant: { default: "default", values: ["alternate", "compact", "default", "minimal", "outline", "raised", "soft"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, header: { elements: ["header"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, title: { elements: ["h3"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, description: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, list: { elements: ["ol"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, item: { elements: ["li"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, marker: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, number: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, card: { elements: ["article"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, cardHeader: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, itemTitle: { elements: ["h4", "h3"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, subtitle: { elements: ["p"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, time: { elements: ["time"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, copy: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, action: { elements: ["a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, actionIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, empty: { elements: ["li"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-bg", "color-border", "color-border-strong", "color-danger", "color-info", "color-on-primary", "color-primary", "color-primary-hover", "color-primary-text", "color-success", "color-surface", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "font-mono", "highlight-edge", "radius", "shadow-1", "shadow-2", "timeline-accent", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Toaster: { contractVersion: 1, component: "Toaster", source: "packages/ui/components/Toaster.wrn", family: "feedback", support: "recipe-supported", axes: { color: { default: "info", values: ["info"], }, size: { default: "default", values: ["default", "lg", "sm"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, list: { elements: ["ol"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, indicator: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, icon: { elements: ["span", "svg"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, body: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, title: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, message: { elements: ["p"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, actions: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, action: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, close: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, vector: { elements: ["svg"], states: { hover: ":hover", }, profile: "managed", ownership: "framework", role: "managed", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, progress: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-border", "color-border-strong", "color-danger", "color-info", "color-primary", "color-success", "color-surface", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-warning", "highlight-edge", "radius", "radius-sm", "shadow-1", "shadow-3", ], regions: { icon: { ownership: "framework", parts: ["icon"], limitations: "Rendered pixels and vector geometry are owned by the existing renderer; recipes style surrounding parts only.", }, vector: { ownership: "framework", parts: ["vector"], limitations: "Rendered pixels and vector geometry are owned by the existing renderer; recipes style surrounding parts only.", }, }, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, ToggleCount: { contractVersion: 1, component: "ToggleCount", source: "packages/ui/components/ToggleCount.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "segmented", values: ["segmented"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, control: { elements: ["input", "div"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.managed, shapeBinding: false, explicitAxes: {}, }, switch: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, segmented: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, button: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, items: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-border", "color-border-strong", "color-danger", "color-info", "color-muted", "color-primary", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-surface-muted", "color-surface-raised", "color-text", "color-text-muted", "color-warning", "component-color", "component-scale", "ease-emphasized", "ease-standard", "font-sans", "motion-base", "motion-fast", "radius", "radius-sm", "shadow-1", "toggle-count-accent", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, TogglePassword: { contractVersion: 1, component: "TogglePassword", source: "packages/ui/components/TogglePassword.wrn", family: "forms", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, }, parts: { root: { elements: ["fieldset"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, passwordFields: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, passwordField: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, label: { elements: ["label"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, passwordControl: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, control: { elements: ["input"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', invalid: ':is([aria-invalid="true"],[data-invalid="true"])', readonly: ':is([readonly],[aria-readonly="true"])', checked: ":checked", unchecked: ":not(:checked)", indeterminate: ":indeterminate", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, passwordToggle: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, passwordIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, passwordHeading: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, link: { elements: ["a"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, passwordLeadingIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, passwordCheckbox: { elements: ["label"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, validation: { elements: ["small"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-bg", "color-border", "color-danger", "color-danger-text", "color-info", "color-input-background", "color-input-border", "color-muted", "color-primary", "color-primary-contrast", "color-primary-text", "color-secondary", "color-success", "color-surface", "color-surface-2", "color-surface-muted", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", "color-text-subtle", "color-warning", "component-color", "component-scale", "control-height", "ease-emphasized", "ease-standard", "field-color", "font-mono", "font-sans", "highlight-edge", "motion-base", "motion-fast", "radius", "radius-sm", "shadow-1", "shadow-3", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, TreeView: { contractVersion: 1, component: "TreeView", source: "packages/ui/components/TreeView.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "default", values: ["default"], }, color: { default: "primary", values: ["primary"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, title: { elements: ["strong"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, description: { elements: ["p"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, tree: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, branch: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, row: { elements: ["div"], states: { hover: ":hover", open: ':is([aria-expanded="true"],[data-open="true"])', selected: ':is([aria-selected="true"],[data-selected="true"],[aria-current="page"],[data-active="true"])', }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, toggle: { elements: ["button", "span"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "layout", ownership: "framework", role: "layout", properties: ["color", "fontFamily", "paddingBlock", "paddingInline"], shapeBinding: false, explicitAxes: {}, }, node: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, group: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, empty: { elements: ["p"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-border", "color-focus", "color-muted", "color-primary", "color-surface", "color-surface-2", "color-surface-muted", "color-text", "color-text-subtle", "motion-fast", "radius", "radius-sm", "shadow-1", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Typography: { contractVersion: 1, component: "Typography", source: "packages/ui/components/Typography.wrn", family: "typography", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "sm"], }, color: { default: "primary", values: ["primary"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-border", "color-primary", "color-primary-hover", "color-primary-soft", "color-surface-raised", "color-surface-soft", "color-text", "color-text-muted", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, WysiwygEditor: { contractVersion: 1, component: "WysiwygEditor", source: "packages/ui/components/WysiwygEditor.wrn", family: "editors", support: "recipe-supported", axes: { size: { default: "default", values: ["default"], }, color: { default: "primary", values: ["primary"], }, variant: { default: "default", values: ["default"], }, }, parts: { root: { elements: ["section"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, surface: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, toolbar: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, button: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, content: { elements: ["div"], states: { hover: ":hover", readonly: ':is([readonly],[aria-readonly="true"])', }, profile: "text", ownership: "content", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, }, slots: ["default"], tokens: [ "color-border", "color-muted", "color-surface", "color-surface-2", "color-text", "radius-md", ], regions: { content: { ownership: "content", parts: ["content"], limitations: "Styles apply to the editor container, never rewrite the user-authored document or formatting.", }, }, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Avatar: { contractVersion: 1, component: "Avatar", source: "packages/ui/components/avatar.wrn", family: "media", support: "recipe-supported", axes: { size: { default: "md", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "dark", "info", "light", "primary", "secondary", "success", "warning"], }, variant: { default: "solid", values: ["outline", "soft", "solid", "white"], }, shape: { default: "circle", values: ["circle", "rounded", "square"], }, }, parts: { root: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, wrap: { elements: ["span"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: true, explicitAxes: {}, }, avatar: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, initials: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, placeholder: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, status: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, badge: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, tooltip: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, copy: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "avatar-color", "avatar-size", "color-bg", "color-border", "color-danger", "color-info", "color-muted", "color-primary", "color-secondary", "color-success", "color-surface", "color-text", "color-text-muted", "color-warning", "component-color", "component-scale", "ease-standard", "font-sans", "motion-fast", "shadow-1", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Badge: { contractVersion: 1, component: "Badge", source: "packages/ui/components/badge.wrn", family: "collections", support: "recipe-supported", axes: { size: { default: "md", values: ["default", "lg", "md", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "dark", "info", "light", "primary", "secondary", "success", "warning"], }, variant: { default: "solid", values: ["outline", "soft", "solid", "white"], }, shape: { default: "pill", values: ["pill", "rounded", "square"], }, }, parts: { root: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, badgeAnchor: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, badge: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: true, explicitAxes: {}, }, badgePing: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, badgeAvatar: { elements: ["img"], states: { hover: ":hover", }, profile: "media", ownership: "framework", role: "media", properties: CATALOG_PART_PROPERTIES.media, shapeBinding: false, explicitAxes: {}, }, badgeDot: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, badgeIcon: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, badgeLabel: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, badgeDismiss: { elements: ["button"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", disabled: ':is(:disabled,[aria-disabled="true"])', }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "badge-color", "badge-ink", "badge-max-width", "color-bg", "color-border", "color-border-strong", "color-danger", "color-danger-text", "color-info", "color-info-text", "color-muted", "color-primary", "color-primary-contrast", "color-primary-text", "color-secondary", "color-secondary-text", "color-success", "color-success-text", "color-surface", "color-text", "color-text-muted", "color-warning", "color-warning-text", "component-color", "component-scale", "font-sans", "highlight-edge", "radius-sm", "shadow-1", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Progress: { contractVersion: 1, component: "Progress", source: "packages/ui/components/progress.wrn", family: "feedback", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "sm", "xl", "xs"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, row: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, track: { elements: ["progress"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-danger", "color-info", "color-muted", "color-primary", "color-secondary", "color-success", "color-surface-2", "color-surface-muted", "color-text", "color-text-muted", "color-warning", "ease-emphasized", "font-mono", "motion-slow", "progress-color", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Skeleton: { contractVersion: 1, component: "Skeleton", source: "packages/ui/components/skeleton.wrn", family: "feedback", support: "recipe-supported", axes: { color: { default: "primary", values: ["primary", "secondary"], }, size: { default: "md", values: ["lg", "md", "sm", "xl", "xs"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, head: { elements: ["div"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, avatar: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, heading: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, bar: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, body: { elements: ["div"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, line: { elements: ["span"], states: { hover: ":hover", }, profile: "layout", ownership: "framework", role: "layout", properties: CATALOG_PART_PROPERTIES.layout, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-primary", "color-secondary", "color-surface", "color-text", "skeleton-base", "skeleton-line", "skeleton-shine", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Spinner: { contractVersion: 1, component: "Spinner", source: "packages/ui/components/spinner.wrn", family: "feedback", support: "recipe-supported", axes: { color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, size: { default: "md", values: ["lg", "md", "sm", "xl", "xs"], }, }, parts: { root: { elements: ["div"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, indicator: { elements: ["i"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, }, slots: [], tokens: [ "color-danger", "color-info", "color-primary", "color-secondary", "color-success", "color-warning", "spinner-color", "spinner-size", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, Tooltip: { contractVersion: 1, component: "Tooltip", source: "packages/ui/components/tooltip.wrn", family: "feedback", support: "recipe-supported", axes: { size: { default: "default", values: ["default", "lg", "sm"], }, color: { default: "primary", values: ["danger", "info", "primary", "secondary", "success", "warning"], }, variant: { default: "dark", values: ["dark", "light", "soft", "solid"], }, }, parts: { root: { elements: ["span"], states: { hover: ":hover", open: ':is([aria-expanded="true"],[data-open="true"])', }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, trigger: { elements: ["span"], states: { hover: ":hover", focusVisible: ":focus-visible", active: ":active", }, profile: "control", ownership: "framework", role: "control", properties: CATALOG_PART_PROPERTIES.control, shapeBinding: false, explicitAxes: {}, }, content: { elements: ["span"], states: { hover: ":hover", }, profile: "surface", ownership: "framework", role: "surface", properties: CATALOG_PART_PROPERTIES.surface, shapeBinding: false, explicitAxes: {}, }, arrow: { elements: ["span"], states: { hover: ":hover", }, profile: "decoration", ownership: "framework", role: "decoration", properties: CATALOG_PART_PROPERTIES.decoration, shapeBinding: false, explicitAxes: {}, }, description: { elements: ["span"], states: { hover: ":hover", }, profile: "text", ownership: "framework", role: "text", properties: CATALOG_PART_PROPERTIES.text, shapeBinding: false, explicitAxes: {}, }, }, slots: ["trigger", "default"], tokens: [ "color-border", "color-danger", "color-danger-soft", "color-focus", "color-info", "color-info-soft", "color-primary", "color-primary-contrast", "color-primary-soft", "color-secondary", "color-secondary-soft", "color-success", "color-success-soft", "color-surface", "color-surface-raised", "color-text", "color-warning", "color-warning-soft", "radius-sm", "shadow-2", "tooltip-max-width", "tooltip-offset", ], regions: {}, constraints: [ "Only declared outer parts are styled. Existing events, markup, slots and state transitions are unchanged.", "Geometry, text scale and semantic color choices supplied by instance props retain precedence.", ], fixtures: [ "baseline", "square", "soft", "angular", "light", "dark", "narrow", "interaction-regression", ], compatibility: { engine: 1, componentContract: 1, }, }, } as const;