5251 lines
118 KiB
TypeScript
5251 lines
118 KiB
TypeScript
// Version 1 core UI design contracts. Public behavior remains in @wrnexus/ui.
|
|
export const CORE_COMPONENT_CONTRACTS = {
|
|
Button: {
|
|
contractVersion: 1,
|
|
component: "Button",
|
|
source: "packages/ui/components/button.wrn",
|
|
family: "actions",
|
|
support: "recipe-supported",
|
|
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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
},
|
|
slots: [],
|
|
tokens: [
|
|
"btn-color",
|
|
"btn-contrast",
|
|
"color-bg",
|
|
"color-border",
|
|
"color-border-strong",
|
|
"color-danger",
|
|
"color-info",
|
|
"color-muted",
|
|
"color-primary",
|
|
"color-primary-contrast",
|
|
"color-success",
|
|
"color-surface",
|
|
"color-surface-soft",
|
|
"color-text",
|
|
"color-warning",
|
|
"control-height",
|
|
"control-height-lg",
|
|
"control-height-sm",
|
|
"ease-emphasized",
|
|
"ease-standard",
|
|
"highlight-edge",
|
|
"motion-base",
|
|
"motion-fast",
|
|
"radius-sm",
|
|
"shadow-1",
|
|
"shadow-2",
|
|
],
|
|
constraints: [
|
|
"Styling only; semantics and events remain component-owned.",
|
|
"Native popup and provider internals are outside this contract.",
|
|
],
|
|
fixtures: [
|
|
"baseline",
|
|
"square",
|
|
"soft",
|
|
"angular",
|
|
"light",
|
|
"dark",
|
|
"keyboard",
|
|
"narrow",
|
|
"long-content",
|
|
],
|
|
compatibility: {
|
|
engine: 1,
|
|
componentContract: 1,
|
|
},
|
|
},
|
|
Input: {
|
|
contractVersion: 1,
|
|
component: "Input",
|
|
source: "packages/ui/components/input.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: {
|
|
states: {
|
|
hover: ":hover",
|
|
invalid: '[data-invalid="true"]',
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
},
|
|
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-input-placeholder",
|
|
"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",
|
|
],
|
|
constraints: [
|
|
"Styling only; semantics and events remain component-owned.",
|
|
"Native popup and provider internals are outside this contract.",
|
|
],
|
|
fixtures: [
|
|
"baseline",
|
|
"square",
|
|
"soft",
|
|
"angular",
|
|
"light",
|
|
"dark",
|
|
"keyboard",
|
|
"narrow",
|
|
"long-content",
|
|
],
|
|
compatibility: {
|
|
engine: 1,
|
|
componentContract: 1,
|
|
},
|
|
},
|
|
Textarea: {
|
|
contractVersion: 1,
|
|
component: "Textarea",
|
|
source: "packages/ui/components/textarea.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: {
|
|
states: {
|
|
hover: ":hover",
|
|
invalid: '[data-invalid="true"]',
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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: ["textarea"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
},
|
|
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",
|
|
],
|
|
constraints: [
|
|
"Styling only; semantics and events remain component-owned.",
|
|
"Native popup and provider internals are outside this contract.",
|
|
],
|
|
fixtures: [
|
|
"baseline",
|
|
"square",
|
|
"soft",
|
|
"angular",
|
|
"light",
|
|
"dark",
|
|
"keyboard",
|
|
"narrow",
|
|
"long-content",
|
|
],
|
|
compatibility: {
|
|
engine: 1,
|
|
componentContract: 1,
|
|
},
|
|
},
|
|
Select: {
|
|
contractVersion: 1,
|
|
component: "Select",
|
|
source: "packages/ui/components/select.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: {
|
|
states: {
|
|
hover: ":hover",
|
|
invalid: '[data-invalid="true"]',
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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: ["select"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
indicator: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["svg"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
},
|
|
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",
|
|
],
|
|
constraints: [
|
|
"Styling only; semantics and events remain component-owned.",
|
|
"Native popup and provider internals are outside this contract.",
|
|
],
|
|
fixtures: [
|
|
"baseline",
|
|
"square",
|
|
"soft",
|
|
"angular",
|
|
"light",
|
|
"dark",
|
|
"keyboard",
|
|
"narrow",
|
|
"long-content",
|
|
],
|
|
compatibility: {
|
|
engine: 1,
|
|
componentContract: 1,
|
|
},
|
|
},
|
|
Checkbox: {
|
|
contractVersion: 1,
|
|
component: "Checkbox",
|
|
source: "packages/ui/components/checkbox.wrn",
|
|
family: "selection",
|
|
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: {
|
|
states: {
|
|
hover: ":hover",
|
|
invalid: '[data-invalid="true"]',
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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"])',
|
|
checked: ":checked",
|
|
},
|
|
elements: ["input"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
},
|
|
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",
|
|
],
|
|
constraints: [
|
|
"Styling only; semantics and events remain component-owned.",
|
|
"Native popup and provider internals are outside this contract.",
|
|
],
|
|
fixtures: [
|
|
"baseline",
|
|
"square",
|
|
"soft",
|
|
"angular",
|
|
"light",
|
|
"dark",
|
|
"keyboard",
|
|
"narrow",
|
|
"long-content",
|
|
],
|
|
compatibility: {
|
|
engine: 1,
|
|
componentContract: 1,
|
|
},
|
|
},
|
|
Radio: {
|
|
contractVersion: 1,
|
|
component: "Radio",
|
|
source: "packages/ui/components/radio.wrn",
|
|
family: "selection",
|
|
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: {
|
|
states: {
|
|
hover: ":hover",
|
|
invalid: '[data-invalid="true"]',
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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"])',
|
|
checked: ":checked",
|
|
},
|
|
elements: ["input"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
},
|
|
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",
|
|
],
|
|
constraints: [
|
|
"Styling only; semantics and events remain component-owned.",
|
|
"Native popup and provider internals are outside this contract.",
|
|
],
|
|
fixtures: [
|
|
"baseline",
|
|
"square",
|
|
"soft",
|
|
"angular",
|
|
"light",
|
|
"dark",
|
|
"keyboard",
|
|
"narrow",
|
|
"long-content",
|
|
],
|
|
compatibility: {
|
|
engine: 1,
|
|
componentContract: 1,
|
|
},
|
|
},
|
|
Switch: {
|
|
contractVersion: 1,
|
|
component: "Switch",
|
|
source: "packages/ui/components/switch.wrn",
|
|
family: "selection",
|
|
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: {
|
|
states: {
|
|
hover: ":hover",
|
|
invalid: '[data-invalid="true"]',
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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"])',
|
|
checked: ":checked",
|
|
},
|
|
elements: ["input"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
},
|
|
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",
|
|
],
|
|
constraints: [
|
|
"Styling only; semantics and events remain component-owned.",
|
|
"Native popup and provider internals are outside this contract.",
|
|
],
|
|
fixtures: [
|
|
"baseline",
|
|
"square",
|
|
"soft",
|
|
"angular",
|
|
"light",
|
|
"dark",
|
|
"keyboard",
|
|
"narrow",
|
|
"long-content",
|
|
],
|
|
compatibility: {
|
|
engine: 1,
|
|
componentContract: 1,
|
|
},
|
|
},
|
|
Card: {
|
|
contractVersion: 1,
|
|
component: "Card",
|
|
source: "packages/ui/components/Card.wrn",
|
|
family: "surfaces",
|
|
support: "recipe-supported",
|
|
axes: {
|
|
size: {
|
|
default: "md",
|
|
values: ["compact", "default", "lg", "md", "sm", "xl", "xs"],
|
|
},
|
|
color: {
|
|
default: "primary",
|
|
values: ["danger", "info", "primary", "secondary", "success", "warning"],
|
|
},
|
|
variant: {
|
|
default: "default",
|
|
values: ["accent", "default", "top-border"],
|
|
},
|
|
radius: {
|
|
default: "default",
|
|
values: ["default", "lg"],
|
|
},
|
|
shadow: {
|
|
default: "default",
|
|
values: ["default", "none"],
|
|
},
|
|
},
|
|
parts: {
|
|
root: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
group: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
panel: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["article"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
"rotate",
|
|
],
|
|
},
|
|
media: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
subtitle: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["p"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
action: {
|
|
states: {
|
|
hover: ":hover",
|
|
focusVisible: ":focus-visible",
|
|
active: ":active",
|
|
disabled: ':is(:disabled,[aria-disabled="true"])',
|
|
},
|
|
elements: ["a"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
overlay: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
overlayShade: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
header: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["header"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
headerActions: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
navigation: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["nav"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"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: ["select"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
tabs: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
tabBadge: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["span"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
alert: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
empty: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
footer: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["footer"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
customFooter: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
},
|
|
slots: ["header", "footer"],
|
|
tokens: [
|
|
"card-color",
|
|
"card-icon-color",
|
|
"card-max-height",
|
|
"card-padding",
|
|
"color-border",
|
|
"color-danger",
|
|
"color-danger-text",
|
|
"color-info",
|
|
"color-info-text",
|
|
"color-muted",
|
|
"color-primary",
|
|
"color-primary-text",
|
|
"color-secondary",
|
|
"color-secondary-text",
|
|
"color-success",
|
|
"color-success-text",
|
|
"color-surface",
|
|
"color-surface-2",
|
|
"color-surface-soft",
|
|
"color-text",
|
|
"color-text-muted",
|
|
"color-warning",
|
|
"color-warning-text",
|
|
"component-color",
|
|
"component-scale",
|
|
"ease-emphasized",
|
|
"font-mono",
|
|
"font-sans",
|
|
"motion-base",
|
|
"radius",
|
|
"radius-md",
|
|
"radius-sm",
|
|
"shadow-1",
|
|
"shadow-2",
|
|
"space-panel",
|
|
],
|
|
constraints: [
|
|
"Styling only; semantics and events remain component-owned.",
|
|
"Native popup and provider internals are outside this contract.",
|
|
],
|
|
fixtures: [
|
|
"baseline",
|
|
"square",
|
|
"soft",
|
|
"angular",
|
|
"light",
|
|
"dark",
|
|
"keyboard",
|
|
"narrow",
|
|
"long-content",
|
|
],
|
|
compatibility: {
|
|
engine: 1,
|
|
componentContract: 1,
|
|
},
|
|
},
|
|
Alert: {
|
|
contractVersion: 1,
|
|
component: "Alert",
|
|
source: "packages/ui/components/alert.wrn",
|
|
family: "feedback",
|
|
support: "recipe-supported",
|
|
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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
},
|
|
slots: [],
|
|
tokens: [
|
|
"alert-color",
|
|
"alert-ink",
|
|
"alert-soft",
|
|
"color-border",
|
|
"color-danger",
|
|
"color-danger-text",
|
|
"color-info",
|
|
"color-info-text",
|
|
"color-muted",
|
|
"color-primary",
|
|
"color-primary-text",
|
|
"color-secondary",
|
|
"color-success",
|
|
"color-success-text",
|
|
"color-surface",
|
|
"color-text",
|
|
"color-text-muted",
|
|
"color-warning",
|
|
"color-warning-text",
|
|
"component-color",
|
|
"component-scale",
|
|
"font-sans",
|
|
"radius",
|
|
"radius-sm",
|
|
"shadow-1",
|
|
"shadow-2",
|
|
"shadow-3",
|
|
],
|
|
constraints: [
|
|
"Styling only; semantics and events remain component-owned.",
|
|
"Native popup and provider internals are outside this contract.",
|
|
],
|
|
fixtures: [
|
|
"baseline",
|
|
"square",
|
|
"soft",
|
|
"angular",
|
|
"light",
|
|
"dark",
|
|
"keyboard",
|
|
"narrow",
|
|
"long-content",
|
|
],
|
|
compatibility: {
|
|
engine: 1,
|
|
componentContract: 1,
|
|
},
|
|
},
|
|
Modal: {
|
|
contractVersion: 1,
|
|
component: "Modal",
|
|
source: "packages/ui/components/Modal.wrn",
|
|
family: "overlays",
|
|
support: "recipe-supported",
|
|
axes: {
|
|
size: {
|
|
default: "md",
|
|
values: ["full", "lg", "md", "sm", "xl", "xs"],
|
|
},
|
|
color: {
|
|
default: "primary",
|
|
values: ["danger", "info", "primary", "secondary", "success", "warning"],
|
|
},
|
|
variant: {
|
|
default: "default",
|
|
values: ["default", "outline", "soft", "solid"],
|
|
},
|
|
},
|
|
parts: {
|
|
root: {
|
|
states: {
|
|
hover: ":hover",
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
trigger: {
|
|
states: {
|
|
hover: ":hover",
|
|
focusVisible: ":focus-visible",
|
|
active: ":active",
|
|
disabled: ':is(:disabled,[aria-disabled="true"])',
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["button"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
triggerSlot: {
|
|
states: {
|
|
hover: ":hover",
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["span"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
layer: {
|
|
states: {
|
|
hover: ":hover",
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
backdrop: {
|
|
states: {
|
|
hover: ":hover",
|
|
focusVisible: ":focus-visible",
|
|
active: ":active",
|
|
disabled: ':is(:disabled,[aria-disabled="true"])',
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["button"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
panel: {
|
|
states: {
|
|
hover: ":hover",
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["section"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
header: {
|
|
states: {
|
|
hover: ":hover",
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["header"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
heading: {
|
|
states: {
|
|
hover: ":hover",
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
icon: {
|
|
states: {
|
|
hover: ":hover",
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["span"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
headingCopy: {
|
|
states: {
|
|
hover: ":hover",
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
close: {
|
|
states: {
|
|
hover: ":hover",
|
|
focusVisible: ":focus-visible",
|
|
active: ":active",
|
|
disabled: ':is(:disabled,[aria-disabled="true"])',
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["button"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
body: {
|
|
states: {
|
|
hover: ":hover",
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
footer: {
|
|
states: {
|
|
hover: ":hover",
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["footer"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
customFooter: {
|
|
states: {
|
|
hover: ":hover",
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
actions: {
|
|
states: {
|
|
hover: ":hover",
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
button: {
|
|
states: {
|
|
hover: ":hover",
|
|
focusVisible: ":focus-visible",
|
|
active: ":active",
|
|
disabled: ':is(:disabled,[aria-disabled="true"])',
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["button"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
spinner: {
|
|
states: {
|
|
hover: ":hover",
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["span"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
},
|
|
slots: ["trigger", "header", "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-muted",
|
|
"color-surface-raised",
|
|
"color-surface-soft",
|
|
"color-text",
|
|
"color-text-muted",
|
|
"color-warning",
|
|
"color-warning-soft",
|
|
"color-warning-text",
|
|
"control-height",
|
|
"highlight-edge",
|
|
"radius-lg",
|
|
"radius-sm",
|
|
"shadow-1",
|
|
"shadow-3",
|
|
],
|
|
constraints: [
|
|
"Styling only; semantics and events remain component-owned.",
|
|
"Native popup and provider internals are outside this contract.",
|
|
],
|
|
fixtures: [
|
|
"baseline",
|
|
"square",
|
|
"soft",
|
|
"angular",
|
|
"light",
|
|
"dark",
|
|
"keyboard",
|
|
"narrow",
|
|
"long-content",
|
|
],
|
|
compatibility: {
|
|
engine: 1,
|
|
componentContract: 1,
|
|
},
|
|
},
|
|
Nav: {
|
|
contractVersion: 1,
|
|
component: "Nav",
|
|
source: "packages/ui/components/Nav.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: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["nav"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
toggle: {
|
|
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",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
toggleBar: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["span"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
toggleText: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["span"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
list: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["ul"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
item: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["li"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
link: {
|
|
states: {
|
|
hover: ":hover",
|
|
focusVisible: ":focus-visible",
|
|
active: ":active",
|
|
disabled: ':is(:disabled,[aria-disabled="true"])',
|
|
selected: '[aria-current="page"]',
|
|
},
|
|
elements: ["a"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
badge: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["span"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
arrow: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["span"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
submenu: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["ul"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
},
|
|
slots: [],
|
|
tokens: [
|
|
"color-border",
|
|
"color-danger",
|
|
"color-info",
|
|
"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",
|
|
"highlight-edge",
|
|
"radius",
|
|
"radius-sm",
|
|
"shadow-1",
|
|
"shadow-3",
|
|
],
|
|
constraints: [
|
|
"Styling only; semantics and events remain component-owned.",
|
|
"Native popup and provider internals are outside this contract.",
|
|
],
|
|
fixtures: [
|
|
"baseline",
|
|
"square",
|
|
"soft",
|
|
"angular",
|
|
"light",
|
|
"dark",
|
|
"keyboard",
|
|
"narrow",
|
|
"long-content",
|
|
],
|
|
compatibility: {
|
|
engine: 1,
|
|
componentContract: 1,
|
|
},
|
|
},
|
|
ContextMenu: {
|
|
contractVersion: 1,
|
|
component: "ContextMenu",
|
|
source: "packages/ui/components/ContextMenu.wrn",
|
|
family: "overlays",
|
|
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: {
|
|
states: {
|
|
hover: ":hover",
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
trigger: {
|
|
states: {
|
|
hover: ":hover",
|
|
open: '[data-wrn-open="true"]',
|
|
focusVisible: ":focus-visible",
|
|
active: ":active",
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
dismissLayer: {
|
|
states: {
|
|
hover: ":hover",
|
|
focusVisible: ":focus-visible",
|
|
active: ":active",
|
|
disabled: ':is(:disabled,[aria-disabled="true"])',
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["button"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
panel: {
|
|
states: {
|
|
hover: ":hover",
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
header: {
|
|
states: {
|
|
hover: ":hover",
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
items: {
|
|
states: {
|
|
hover: ":hover",
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
divider: {
|
|
states: {
|
|
hover: ":hover",
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
sectionLabel: {
|
|
states: {
|
|
hover: ":hover",
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
item: {
|
|
states: {
|
|
hover: ":hover",
|
|
focusVisible: ":focus-visible",
|
|
active: ":active",
|
|
disabled: ':is(:disabled,[aria-disabled="true"])',
|
|
open: '[data-wrn-open="true"]',
|
|
selected: '[data-selected="true"]',
|
|
},
|
|
elements: ["a", "button"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
icon: {
|
|
states: {
|
|
hover: ":hover",
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["span"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
copy: {
|
|
states: {
|
|
hover: ":hover",
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["span"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
status: {
|
|
states: {
|
|
hover: ":hover",
|
|
open: '[data-wrn-open="true"]',
|
|
},
|
|
elements: ["span"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
},
|
|
slots: ["trigger", "header", "footer"],
|
|
tokens: [
|
|
"color-border",
|
|
"color-danger",
|
|
"color-danger-soft",
|
|
"color-focus",
|
|
"color-info",
|
|
"color-info-soft",
|
|
"color-primary",
|
|
"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-text-subtle",
|
|
"color-warning",
|
|
"color-warning-soft",
|
|
"context-max-width",
|
|
"context-min-width",
|
|
"context-x",
|
|
"context-y",
|
|
"font-mono",
|
|
"highlight-edge",
|
|
"radius",
|
|
"radius-sm",
|
|
"shadow-3",
|
|
],
|
|
constraints: [
|
|
"Styling only; semantics and events remain component-owned.",
|
|
"Native popup and provider internals are outside this contract.",
|
|
],
|
|
fixtures: [
|
|
"baseline",
|
|
"square",
|
|
"soft",
|
|
"angular",
|
|
"light",
|
|
"dark",
|
|
"keyboard",
|
|
"narrow",
|
|
"long-content",
|
|
],
|
|
compatibility: {
|
|
engine: 1,
|
|
componentContract: 1,
|
|
},
|
|
},
|
|
PageHeader: {
|
|
contractVersion: 1,
|
|
component: "PageHeader",
|
|
source: "packages/ui/components/PageHeader.wrn",
|
|
family: "typography",
|
|
support: "recipe-supported",
|
|
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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"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",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
},
|
|
slots: ["meta", "actions"],
|
|
tokens: [
|
|
"color-background",
|
|
"color-border",
|
|
"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",
|
|
"color-surface-raised",
|
|
"color-text",
|
|
"color-text-muted",
|
|
"color-warning",
|
|
"color-warning-muted",
|
|
"color-warning-soft",
|
|
"color-warning-text",
|
|
"shadow-sm",
|
|
],
|
|
constraints: [
|
|
"Styling only; semantics and events remain component-owned.",
|
|
"Native popup and provider internals are outside this contract.",
|
|
],
|
|
fixtures: [
|
|
"baseline",
|
|
"square",
|
|
"soft",
|
|
"angular",
|
|
"light",
|
|
"dark",
|
|
"keyboard",
|
|
"narrow",
|
|
"long-content",
|
|
],
|
|
compatibility: {
|
|
engine: 1,
|
|
componentContract: 1,
|
|
},
|
|
},
|
|
Container: {
|
|
contractVersion: 1,
|
|
component: "Container",
|
|
source: "packages/ui/components/Container.wrn",
|
|
family: "layout",
|
|
support: "recipe-supported",
|
|
axes: {
|
|
size: {
|
|
default: "default",
|
|
values: ["comfortable", "compact", "default", "spacious"],
|
|
},
|
|
color: {
|
|
default: "primary",
|
|
values: ["primary"],
|
|
},
|
|
},
|
|
parts: {
|
|
root: {
|
|
states: {
|
|
hover: ":hover",
|
|
},
|
|
elements: ["div"],
|
|
properties: [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"lineHeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
],
|
|
},
|
|
},
|
|
slots: [],
|
|
tokens: [],
|
|
constraints: [
|
|
"Styling only; semantics and events remain component-owned.",
|
|
"Native popup and provider internals are outside this contract.",
|
|
],
|
|
fixtures: [
|
|
"baseline",
|
|
"square",
|
|
"soft",
|
|
"angular",
|
|
"light",
|
|
"dark",
|
|
"keyboard",
|
|
"narrow",
|
|
"long-content",
|
|
],
|
|
compatibility: {
|
|
engine: 1,
|
|
componentContract: 1,
|
|
},
|
|
},
|
|
} as const;
|