{ "revision": "c53efbb5-ae6b-46ca-832b-2db1e58e45ed", "contextVersion": 1, "system": { "id": "soft", "version": "1.0.0", "mode": "light" }, "locks": [], "tokens": { "color.background": { "type": "color", "value": "#E8DCC7", "source": "soft.modes.light.color.background", "legacy": "color-background" }, "color.bg": { "type": "color", "value": "#E8DCC7", "source": "soft.modes.light.color.bg", "legacy": "color-bg" }, "color.border": { "type": "color", "value": "#606C38", "source": "soft.modes.light.color.border", "legacy": "color-border" }, "color.border-strong": { "type": "color", "value": "#606C38", "source": "soft.modes.light.color.border-strong", "legacy": "color-border-strong" }, "color.foreground": { "type": "color", "value": "#292D24", "source": "soft.modes.light.color.foreground", "legacy": "color-foreground" }, "color.primary": { "type": "color", "value": "#606C38", "source": "soft.modes.light.color.primary", "legacy": "color-primary" }, "color.primary-active": { "type": "color", "value": "#3D4424", "source": "soft.modes.light.color.primary-active", "legacy": "color-primary-active" }, "color.primary-contrast": { "type": "color", "value": "#FFFFFF", "source": "soft.modes.light.color.primary-contrast", "legacy": "color-primary-contrast" }, "color.primary-hover": { "type": "color", "value": "#4B542C", "source": "soft.modes.light.color.primary-hover", "legacy": "color-primary-hover" }, "color.primary-muted": { "type": "color", "value": "#D4B895", "source": "soft.modes.light.color.primary-muted", "legacy": "color-primary-muted" }, "color.primary-soft": { "type": "color", "value": "#D4B895", "source": "soft.modes.light.color.primary-soft", "legacy": "color-primary-soft" }, "color.primary-text": { "type": "color", "value": "#3D4424", "source": "soft.modes.light.color.primary-text", "legacy": "color-primary-text" }, "color.surface": { "type": "color", "value": "#D4B895", "source": "soft.modes.light.color.surface", "legacy": "color-surface" }, "color.surface-2": { "type": "color", "value": "#E8DCC7", "source": "soft.modes.light.color.surface-2", "legacy": "color-surface-2" }, "color.surface-muted": { "type": "color", "value": "#E8DCC7", "source": "soft.modes.light.color.surface-muted", "legacy": "color-surface-muted" }, "color.surface-raised": { "type": "color", "value": "#D4B895", "source": "soft.modes.light.color.surface-raised", "legacy": "color-surface-raised" }, "color.surface-soft": { "type": "color", "value": "#E8DCC7", "source": "soft.modes.light.color.surface-soft", "legacy": "color-surface-soft" }, "color.text": { "type": "color", "value": "#292D24", "source": "soft.modes.light.color.text", "legacy": "color-text" }, "color.text-muted": { "type": "color", "value": "#4B5141", "source": "soft.modes.light.color.text-muted", "legacy": "color-text-muted" }, "color.text-subtle": { "type": "color", "value": "#4B5141", "source": "soft.modes.light.color.text-subtle", "legacy": "color-text-subtle" }, "control.height": { "type": "dimension", "value": "2.75rem", "source": "soft.tokens.control.height", "legacy": "control-height" }, "elevation.panel": { "type": "shadow", "value": "none", "source": "soft.tokens.elevation.panel", "legacy": "shadow-1" }, "scheme": { "type": "colorScheme", "value": "light", "source": "soft.modes.light.scheme", "legacy": "color-scheme" }, "shape.base": { "type": "dimension", "value": "24px", "source": "soft.tokens.shape.base", "legacy": "radius" }, "shape.control": { "type": "dimension", "value": "16px", "source": "soft.tokens.shape.control", "legacy": "radius-sm" }, "shape.dialog": { "type": "dimension", "value": "32px", "source": "soft.tokens.shape.dialog", "legacy": "radius-lg" }, "shape.panel": { "type": "dimension", "value": "24px", "source": "soft.tokens.shape.panel", "legacy": "radius-md" }, "space.control": { "type": "dimension", "value": "1.25rem", "source": "soft.tokens.space.control" }, "space.page": { "type": "dimension", "value": "1.5rem", "source": "soft.tokens.space.page" }, "space.panel": { "type": "dimension", "value": "1.5rem", "source": "soft.tokens.space.panel", "legacy": "space-panel" }, "type.body": { "type": "fontFamily", "value": "Georgia, serif", "source": "soft.tokens.type.body", "legacy": "font-sans" }, "type.heading": { "type": "fontFamily", "value": "Georgia, serif", "source": "soft.tokens.type.heading" } }, "components": { "PageHeader": { "contractVersion": 1, "axes": { "size": { "default": "default", "values": [ "default", "lg" ] }, "color": { "default": "primary", "values": [ "danger", "info", "primary", "secondary", "success", "warning" ] }, "variant": { "default": "default", "values": [ "default", "minimal", "raised", "soft", "solid", "tinted" ] } }, "parts": { "root": { "states": { "hover": ":hover" }, "elements": [ "section" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "decoration": { "states": { "hover": ":hover" }, "elements": [ "div" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "glow": { "states": { "hover": ":hover" }, "elements": [ "span" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "gridPattern": { "states": { "hover": ":hover" }, "elements": [ "span" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "inner": { "states": { "hover": ":hover" }, "elements": [ "div" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "breadcrumb": { "states": { "hover": ":hover" }, "elements": [ "div" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "layout": { "states": { "hover": ":hover" }, "elements": [ "div" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "content": { "states": { "hover": ":hover" }, "elements": [ "div" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "intro": { "states": { "hover": ":hover" }, "elements": [ "div" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "iconWrap": { "states": { "hover": ":hover" }, "elements": [ "span" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "icon": { "states": { "hover": ":hover" }, "elements": [ "span" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "copy": { "states": { "hover": ":hover" }, "elements": [ "div" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "eyebrowRow": { "states": { "hover": ":hover" }, "elements": [ "div" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "eyebrowMark": { "states": { "hover": ":hover" }, "elements": [ "span" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "eyebrow": { "states": { "hover": ":hover" }, "elements": [ "p" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "title": { "states": { "hover": ":hover" }, "elements": [ "h1" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "description": { "states": { "hover": ":hover" }, "elements": [ "p" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "meta": { "states": { "hover": ":hover" }, "elements": [ "div" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "actions": { "states": { "hover": ":hover" }, "elements": [ "div" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "body": { "states": { "hover": ":hover" }, "elements": [ "div" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] } }, "props": [ { "name": "eyebrow", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "title", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "description", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "icon", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "id", "type": "string", "required": false, "default": "\"page-title\"", "options": [] }, { "name": "align", "type": "string", "required": false, "default": "\"left\"", "options": [] }, { "name": "centered", "type": "boolean", "required": false, "default": "false", "options": [] }, { "name": "compact", "type": "boolean", "required": false, "default": "false", "options": [] }, { "name": "size", "type": "string", "required": false, "default": "\"default\"", "options": [] }, { "name": "maxWidth", "type": "string", "required": false, "default": "\"xl\"", "options": [] }, { "name": "showBreadcrumbs", "type": "boolean", "required": false, "default": "false", "options": [] }, { "name": "breadcrumbs", "type": "unknown[]", "required": false, "default": "[]", "options": [] }, { "name": "breadcrumbParent", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "breadcrumbParentHref", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "breadcrumbCurrent", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "primaryLabel", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "primaryHref", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "primaryIcon", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "secondaryLabel", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "secondaryHref", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "secondaryIcon", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "color", "type": "string", "required": false, "default": "\"primary\"", "options": [] }, { "name": "variant", "type": "string", "required": false, "default": "\"default\"", "options": [] }, { "name": "borderBottom", "type": "boolean", "required": false, "default": "true", "options": [] }, { "name": "class", "type": "string", "required": false, "default": "\"\"", "options": [] } ], "outputs": [], "slots": [ "meta", "actions" ], "constraints": [ "Styling only; semantics and events remain component-owned.", "Native popup and provider internals are outside this contract." ], "support": "recipe-supported" }, "Input": { "contractVersion": 1, "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": { "states": { "hover": ":hover", "invalid": "[data-invalid=\"true\"]" }, "elements": [ "div" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "heading": { "states": { "hover": ":hover" }, "elements": [ "div" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "label": { "states": { "hover": ":hover" }, "elements": [ "label" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "hint": { "states": { "hover": ":hover" }, "elements": [ "span" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "controlContainer": { "states": { "hover": ":hover" }, "elements": [ "div" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "icon": { "states": { "hover": ":hover" }, "elements": [ "span" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "control": { "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\"])" }, "elements": [ "input" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "floatingLabel": { "states": { "hover": ":hover" }, "elements": [ "span" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "help": { "states": { "hover": ":hover" }, "elements": [ "small" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "error": { "states": { "hover": ":hover" }, "elements": [ "small" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] } }, "props": [ { "name": "size", "type": "string", "required": false, "default": "\"default\"", "options": [] }, { "name": "color", "type": "string", "required": false, "default": "\"primary\"", "options": [] }, { "name": "id", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "name", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "label", "type": "string", "required": false, "default": "\"Input\"", "options": [] }, { "name": "hiddenLabel", "type": "boolean", "required": false, "default": "false", "options": [] }, { "name": "placeholder", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "value", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "type", "type": "string", "required": false, "default": "\"text\"", "options": [] }, { "name": "variant", "type": "string", "required": false, "default": "\"normal\"", "options": [] }, { "name": "icon", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "iconPosition", "type": "string", "required": false, "default": "\"start\"", "options": [] }, { "name": "helperText", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "cornerHint", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "error", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "invalidMessage", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "inline", "type": "boolean", "required": false, "default": "false", "options": [] }, { "name": "readonly", "type": "boolean", "required": false, "default": "false", "options": [] }, { "name": "disabled", "type": "boolean", "required": false, "default": "false", "options": [] }, { "name": "required", "type": "boolean", "required": false, "default": "false", "options": [] }, { "name": "autocomplete", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "inputmode", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "minlength", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "maxlength", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "pattern", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "min", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "max", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "step", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "class", "type": "string", "required": false, "default": "\"\"", "options": [] } ], "outputs": [ { "name": "input", "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" }, { "name": "change", "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" }, { "name": "focus", "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" }, { "name": "blur", "payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]" }, { "name": "invalid", "payloadType": "{ value: string | number | boolean | null | object; name: string; message: string; sourceEvent: Event }" }, { "name": "keydown", "payloadType": "{ key: string; value: string | number | boolean | null | object; name: string; sourceEvent: Event }" }, { "name": "keyup", "payloadType": "{ key: string; value: string | number | boolean | null | object; name: string; sourceEvent: Event }" } ], "slots": [], "constraints": [ "Styling only; semantics and events remain component-owned.", "Native popup and provider internals are outside this contract." ], "support": "recipe-supported" }, "Button": { "contractVersion": 1, "axes": { "variant": { "default": "default", "values": [ "default", "destructive", "ghost", "link", "outline", "secondary", "solid" ] }, "color": { "default": "primary", "values": [ "danger", "info", "primary", "secondary", "success", "warning" ] }, "size": { "default": "default", "values": [ "default", "icon", "icon-lg", "icon-sm", "icon-xs", "lg", "sm", "xs" ] }, "pill": { "default": "false", "values": [ "false", "true" ] } }, "parts": { "root": { "states": { "hover": ":hover" }, "elements": [ "span" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "control": { "states": { "hover": ":hover", "focusVisible": ":focus-visible", "active": ":active", "disabled": ":is(:disabled,[aria-disabled=\"true\"])", "loading": "[aria-busy=\"true\"]" }, "elements": [ "a", "button" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline", "rotate" ] }, "spinner": { "states": { "hover": ":hover" }, "elements": [ "span" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "icon": { "states": { "hover": ":hover" }, "elements": [ "span" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "copy": { "states": { "hover": ":hover" }, "elements": [ "span" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "label": { "states": { "hover": ":hover" }, "elements": [ "span" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "description": { "states": { "hover": ":hover" }, "elements": [ "span" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "tooltip": { "states": { "hover": ":hover" }, "elements": [ "span" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] } }, "props": [ { "name": "label", "type": "string", "required": false, "default": "\"Button\"", "options": [] }, { "name": "loadingLabel", "type": "string", "required": false, "default": "\"Loading…\"", "options": [] }, { "name": "description", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "as", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "href", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "target", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "rel", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "type", "type": "string", "required": false, "default": "\"button\"", "options": [] }, { "name": "variant", "type": "string", "required": false, "default": "\"default\"", "options": [] }, { "name": "color", "type": "string", "required": false, "default": "\"primary\"", "options": [] }, { "name": "size", "type": "string", "required": false, "default": "\"default\"", "options": [] }, { "name": "disabled", "type": "boolean", "required": false, "default": "false", "options": [] }, { "name": "loading", "type": "boolean", "required": false, "default": "false", "options": [] }, { "name": "pill", "type": "boolean", "required": false, "default": "false", "options": [] }, { "name": "fullWidth", "type": "boolean", "required": false, "default": "false", "options": [] }, { "name": "icon", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "iconPosition", "type": "string", "required": false, "default": "\"start\"", "options": [] }, { "name": "ariaLabel", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "ariaPressed", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "ariaExpanded", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "ariaControls", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "title", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "tooltipPlacement", "type": "string", "required": false, "default": "\"top\"", "options": [] }, { "name": "autofocus", "type": "boolean", "required": false, "default": "false", "options": [] }, { "name": "controlClass", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "class", "type": "string", "required": false, "default": "\"\"", "options": [] } ], "outputs": [ { "name": "click", "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" }, { "name": "focus", "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" }, { "name": "blur", "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], "slots": [], "constraints": [ "Styling only; semantics and events remain component-owned.", "Native popup and provider internals are outside this contract." ], "support": "recipe-supported" }, "Alert": { "contractVersion": 1, "axes": { "size": { "default": "default", "values": [ "default", "lg", "md", "sm", "xl", "xs" ] }, "color": { "default": "info", "values": [ "danger", "dark", "info", "light", "primary", "secondary", "success", "warning" ] }, "variant": { "default": "soft", "values": [ "action", "link", "soft" ] }, "radius": { "default": "md", "values": [ "lg", "md", "none", "sm", "xl" ] }, "shadow": { "default": "sm", "values": [ "lg", "md", "none", "sm" ] } }, "parts": { "root": { "states": { "hover": ":hover" }, "elements": [ "section" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "icon": { "states": { "hover": ":hover" }, "elements": [ "span" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "body": { "states": { "hover": ":hover" }, "elements": [ "div" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "title": { "states": { "hover": ":hover" }, "elements": [ "strong" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "actions": { "states": { "hover": ":hover" }, "elements": [ "div" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] }, "dismiss": { "states": { "hover": ":hover", "focusVisible": ":focus-visible", "active": ":active", "disabled": ":is(:disabled,[aria-disabled=\"true\"])" }, "elements": [ "button" ], "properties": [ "backgroundColor", "backgroundImage", "borderColor", "borderRadius", "borderStyle", "borderWidth", "boxShadow", "color", "fontFamily", "fontSize", "fontWeight", "gap", "letterSpacing", "minHeight", "opacity", "outlineColor", "paddingBlock", "paddingInline" ] } }, "props": [ { "name": "size", "type": "string", "required": false, "default": "\"default\"", "options": [] }, { "name": "color", "type": "string", "required": false, "default": "\"info\"", "options": [] }, { "name": "variant", "type": "string", "required": false, "default": "\"soft\"", "options": [] }, { "name": "class", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "radius", "type": "string", "required": false, "default": "\"md\"", "options": [] }, { "name": "shadow", "type": "string", "required": false, "default": "\"sm\"", "options": [] }, { "name": "title", "type": "string", "required": false, "default": "\"Alert\"", "options": [] }, { "name": "description", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "items", "type": "unknown[]", "required": false, "default": "[]", "options": [] }, { "name": "actions", "type": "unknown[]", "required": false, "default": "[]", "options": [] }, { "name": "showIcon", "type": "boolean", "required": false, "default": "false", "options": [] }, { "name": "icon", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "dismissible", "type": "boolean", "required": false, "default": "false", "options": [] }, { "name": "dismissLabel", "type": "string", "required": false, "default": "\"Dismiss alert\"", "options": [] }, { "name": "role", "type": "string", "required": false, "default": "\"alert\"", "options": [] }, { "name": "live", "type": "string", "required": false, "default": "\"polite\"", "options": [] }, { "name": "linkLabel", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "linkHref", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "actionLabel", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "actionHref", "type": "string", "required": false, "default": "\"\"", "options": [] }, { "name": "compact", "type": "boolean", "required": false, "default": "false", "options": [] } ], "outputs": [ { "name": "dismiss", "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" }, { "name": "action", "payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }" } ], "slots": [], "constraints": [ "Styling only; semantics and events remain component-owned.", "Native popup and provider internals are outside this contract." ], "support": "recipe-supported" } }, "composition": { "container": "Container", "spacingToken": "space.panel", "legacySpacing": "--wrn-space-panel", "rules": [ "Use declared component props and variants. Preserve instance APIs and explicit choices.", "Use semantic token references for styling. Do not invent variants or provider capabilities.", "Custom/ejected application components need separate contracts.", "Page-spec previews contain trusted shipped components only; arbitrary source is analyzed, never executed." ] }, "examples": [ "