2450 lines
58 KiB
JSON
2450 lines
58 KiB
JSON
{
|
|
"revision": "be35d4e7-97dd-4666-a1f3-9c1bf9ef2cc0",
|
|
"contextVersion": 1,
|
|
"system": {
|
|
"id": "square",
|
|
"version": "1.0.0",
|
|
"mode": "dark"
|
|
},
|
|
"locks": [],
|
|
"tokens": {
|
|
"color.background": {
|
|
"type": "color",
|
|
"value": "#0B0C0A",
|
|
"source": "square.modes.dark.color.background",
|
|
"legacy": "color-background"
|
|
},
|
|
"color.bg": {
|
|
"type": "color",
|
|
"value": "#0B0C0A",
|
|
"source": "square.modes.dark.color.bg",
|
|
"legacy": "color-bg"
|
|
},
|
|
"color.border": {
|
|
"type": "color",
|
|
"value": "#696C63",
|
|
"source": "square.modes.dark.color.border",
|
|
"legacy": "color-border"
|
|
},
|
|
"color.border-strong": {
|
|
"type": "color",
|
|
"value": "#696C63",
|
|
"source": "square.modes.dark.color.border-strong",
|
|
"legacy": "color-border-strong"
|
|
},
|
|
"color.foreground": {
|
|
"type": "color",
|
|
"value": "#F7F7F8",
|
|
"source": "square.modes.dark.color.foreground",
|
|
"legacy": "color-foreground"
|
|
},
|
|
"color.primary": {
|
|
"type": "color",
|
|
"value": "#FFB800",
|
|
"source": "square.modes.dark.color.primary",
|
|
"legacy": "color-primary"
|
|
},
|
|
"color.primary-active": {
|
|
"type": "color",
|
|
"value": "#FFE099",
|
|
"source": "square.modes.dark.color.primary-active",
|
|
"legacy": "color-primary-active"
|
|
},
|
|
"color.primary-contrast": {
|
|
"type": "color",
|
|
"value": "#000000",
|
|
"source": "square.modes.dark.color.primary-contrast",
|
|
"legacy": "color-primary-contrast"
|
|
},
|
|
"color.primary-hover": {
|
|
"type": "color",
|
|
"value": "#FFD15C",
|
|
"source": "square.modes.dark.color.primary-hover",
|
|
"legacy": "color-primary-hover"
|
|
},
|
|
"color.primary-muted": {
|
|
"type": "color",
|
|
"value": "#0B0C0A",
|
|
"source": "square.modes.dark.color.primary-muted",
|
|
"legacy": "color-primary-muted"
|
|
},
|
|
"color.primary-soft": {
|
|
"type": "color",
|
|
"value": "#0B0C0A",
|
|
"source": "square.modes.dark.color.primary-soft",
|
|
"legacy": "color-primary-soft"
|
|
},
|
|
"color.primary-text": {
|
|
"type": "color",
|
|
"value": "#FFB800",
|
|
"source": "square.modes.dark.color.primary-text",
|
|
"legacy": "color-primary-text"
|
|
},
|
|
"color.surface": {
|
|
"type": "color",
|
|
"value": "#000000",
|
|
"source": "square.modes.dark.color.surface",
|
|
"legacy": "color-surface"
|
|
},
|
|
"color.surface-2": {
|
|
"type": "color",
|
|
"value": "#0B0C0A",
|
|
"source": "square.modes.dark.color.surface-2",
|
|
"legacy": "color-surface-2"
|
|
},
|
|
"color.surface-muted": {
|
|
"type": "color",
|
|
"value": "#0B0C0A",
|
|
"source": "square.modes.dark.color.surface-muted",
|
|
"legacy": "color-surface-muted"
|
|
},
|
|
"color.surface-raised": {
|
|
"type": "color",
|
|
"value": "#000000",
|
|
"source": "square.modes.dark.color.surface-raised",
|
|
"legacy": "color-surface-raised"
|
|
},
|
|
"color.surface-soft": {
|
|
"type": "color",
|
|
"value": "#0B0C0A",
|
|
"source": "square.modes.dark.color.surface-soft",
|
|
"legacy": "color-surface-soft"
|
|
},
|
|
"color.text": {
|
|
"type": "color",
|
|
"value": "#F7F7F8",
|
|
"source": "square.modes.dark.color.text",
|
|
"legacy": "color-text"
|
|
},
|
|
"color.text-muted": {
|
|
"type": "color",
|
|
"value": "#BEC0B9",
|
|
"source": "square.modes.dark.color.text-muted",
|
|
"legacy": "color-text-muted"
|
|
},
|
|
"color.text-subtle": {
|
|
"type": "color",
|
|
"value": "#BEC0B9",
|
|
"source": "square.modes.dark.color.text-subtle",
|
|
"legacy": "color-text-subtle"
|
|
},
|
|
"control.height": {
|
|
"type": "dimension",
|
|
"value": "2.5rem",
|
|
"source": "square.tokens.control.height",
|
|
"legacy": "control-height"
|
|
},
|
|
"elevation.panel": {
|
|
"type": "shadow",
|
|
"value": "none",
|
|
"source": "square.tokens.elevation.panel",
|
|
"legacy": "shadow-1"
|
|
},
|
|
"scheme": {
|
|
"type": "colorScheme",
|
|
"value": "dark",
|
|
"source": "square.modes.dark.scheme",
|
|
"legacy": "color-scheme"
|
|
},
|
|
"shape.base": {
|
|
"type": "dimension",
|
|
"value": "0",
|
|
"source": "square.tokens.shape.base",
|
|
"legacy": "radius"
|
|
},
|
|
"shape.control": {
|
|
"type": "dimension",
|
|
"value": "0",
|
|
"source": "square.tokens.shape.control",
|
|
"legacy": "radius-sm"
|
|
},
|
|
"shape.dialog": {
|
|
"type": "dimension",
|
|
"value": "0",
|
|
"source": "square.tokens.shape.dialog",
|
|
"legacy": "radius-lg"
|
|
},
|
|
"shape.panel": {
|
|
"type": "dimension",
|
|
"value": "0",
|
|
"source": "square.tokens.shape.panel",
|
|
"legacy": "radius-md"
|
|
},
|
|
"space.control": {
|
|
"type": "dimension",
|
|
"value": "0.75rem",
|
|
"source": "square.tokens.space.control"
|
|
},
|
|
"space.page": {
|
|
"type": "dimension",
|
|
"value": "1rem",
|
|
"source": "square.tokens.space.page"
|
|
},
|
|
"space.panel": {
|
|
"type": "dimension",
|
|
"value": "1rem",
|
|
"source": "square.tokens.space.panel",
|
|
"legacy": "space-panel"
|
|
},
|
|
"type.body": {
|
|
"type": "fontFamily",
|
|
"value": "\"IBM Plex Mono\", \"Courier New\", monospace",
|
|
"source": "square.tokens.type.body",
|
|
"legacy": "font-sans"
|
|
},
|
|
"type.heading": {
|
|
"type": "fontFamily",
|
|
"value": "\"IBM Plex Mono\", \"Courier New\", monospace",
|
|
"source": "square.tokens.type.heading"
|
|
}
|
|
},
|
|
"components": {
|
|
"PageHeader": {
|
|
"contractVersion": 1,
|
|
"axes": {
|
|
"size": {
|
|
"default": "default",
|
|
"values": [
|
|
"default",
|
|
"lg"
|
|
]
|
|
},
|
|
"color": {
|
|
"default": "primary",
|
|
"values": [
|
|
"danger",
|
|
"info",
|
|
"primary",
|
|
"secondary",
|
|
"success",
|
|
"warning"
|
|
]
|
|
},
|
|
"variant": {
|
|
"default": "default",
|
|
"values": [
|
|
"default",
|
|
"minimal",
|
|
"raised",
|
|
"soft",
|
|
"solid",
|
|
"tinted"
|
|
]
|
|
}
|
|
},
|
|
"parts": {
|
|
"root": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"section"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"decoration": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"div"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"glow": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"span"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"gridPattern": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"span"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"inner": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"div"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"breadcrumb": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"div"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"layout": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"div"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"content": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"div"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"intro": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"div"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"iconWrap": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"span"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"icon": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"span"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"copy": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"div"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"eyebrowRow": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"div"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"eyebrowMark": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"span"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"eyebrow": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"p"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"title": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"h1"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"description": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"p"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"meta": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"div"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"actions": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"div"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"body": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"div"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
}
|
|
},
|
|
"props": [
|
|
{
|
|
"name": "eyebrow",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "title",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "description",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "icon",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "id",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"page-title\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "align",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"left\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "centered",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": "false",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "compact",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": "false",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "size",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"default\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "maxWidth",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"xl\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "showBreadcrumbs",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": "false",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "breadcrumbs",
|
|
"type": "unknown[]",
|
|
"required": false,
|
|
"default": "[]",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "breadcrumbParent",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "breadcrumbParentHref",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "breadcrumbCurrent",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "primaryLabel",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "primaryHref",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "primaryIcon",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "secondaryLabel",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "secondaryHref",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "secondaryIcon",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "color",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"primary\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "variant",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"default\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "borderBottom",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": "true",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "class",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
}
|
|
],
|
|
"outputs": [],
|
|
"slots": [
|
|
"meta",
|
|
"actions"
|
|
],
|
|
"constraints": [
|
|
"Styling only; semantics and events remain component-owned.",
|
|
"Native popup and provider internals are outside this contract."
|
|
],
|
|
"support": "recipe-supported"
|
|
},
|
|
"Input": {
|
|
"contractVersion": 1,
|
|
"axes": {
|
|
"size": {
|
|
"default": "default",
|
|
"values": [
|
|
"default",
|
|
"lg",
|
|
"md",
|
|
"sm",
|
|
"xl",
|
|
"xs"
|
|
]
|
|
},
|
|
"color": {
|
|
"default": "primary",
|
|
"values": [
|
|
"danger",
|
|
"info",
|
|
"primary",
|
|
"secondary",
|
|
"success",
|
|
"warning"
|
|
]
|
|
},
|
|
"variant": {
|
|
"default": "normal",
|
|
"values": [
|
|
"floating",
|
|
"ghost",
|
|
"normal",
|
|
"outlined",
|
|
"pill",
|
|
"underline"
|
|
]
|
|
}
|
|
},
|
|
"parts": {
|
|
"root": {
|
|
"states": {
|
|
"hover": ":hover",
|
|
"invalid": "[data-invalid=\"true\"]"
|
|
},
|
|
"elements": [
|
|
"div"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"heading": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"div"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"label": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"label"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"hint": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"span"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"controlContainer": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"div"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"icon": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"span"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"control": {
|
|
"states": {
|
|
"hover": ":hover",
|
|
"focusVisible": ":focus-visible",
|
|
"active": ":active",
|
|
"disabled": ":is(:disabled,[aria-disabled=\"true\"])",
|
|
"invalid": ":is([aria-invalid=\"true\"],[data-invalid=\"true\"])",
|
|
"readonly": ":is([readonly],[aria-readonly=\"true\"])"
|
|
},
|
|
"elements": [
|
|
"input"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"floatingLabel": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"span"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"help": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"small"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"error": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"small"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
}
|
|
},
|
|
"props": [
|
|
{
|
|
"name": "size",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"default\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "color",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"primary\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "id",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "name",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "label",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"Input\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "hiddenLabel",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": "false",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "placeholder",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "value",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "type",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"text\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "variant",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"normal\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "icon",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "iconPosition",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"start\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "helperText",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "cornerHint",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "error",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "invalidMessage",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "inline",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": "false",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "readonly",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": "false",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": "false",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "required",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": "false",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "autocomplete",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "inputmode",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "minlength",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "maxlength",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "pattern",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "min",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "max",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "step",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "class",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
}
|
|
],
|
|
"outputs": [
|
|
{
|
|
"name": "input",
|
|
"payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]"
|
|
},
|
|
{
|
|
"name": "change",
|
|
"payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]"
|
|
},
|
|
{
|
|
"name": "focus",
|
|
"payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]"
|
|
},
|
|
{
|
|
"name": "blur",
|
|
"payloadType": "{ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]"
|
|
},
|
|
{
|
|
"name": "invalid",
|
|
"payloadType": "{ value: string | number | boolean | null | object; name: string; message: string; sourceEvent: Event }"
|
|
},
|
|
{
|
|
"name": "keydown",
|
|
"payloadType": "{ key: string; value: string | number | boolean | null | object; name: string; sourceEvent: Event }"
|
|
},
|
|
{
|
|
"name": "keyup",
|
|
"payloadType": "{ key: string; value: string | number | boolean | null | object; name: string; sourceEvent: Event }"
|
|
}
|
|
],
|
|
"slots": [],
|
|
"constraints": [
|
|
"Styling only; semantics and events remain component-owned.",
|
|
"Native popup and provider internals are outside this contract."
|
|
],
|
|
"support": "recipe-supported"
|
|
},
|
|
"Button": {
|
|
"contractVersion": 1,
|
|
"axes": {
|
|
"variant": {
|
|
"default": "default",
|
|
"values": [
|
|
"default",
|
|
"destructive",
|
|
"ghost",
|
|
"link",
|
|
"outline",
|
|
"secondary",
|
|
"solid"
|
|
]
|
|
},
|
|
"color": {
|
|
"default": "primary",
|
|
"values": [
|
|
"danger",
|
|
"info",
|
|
"primary",
|
|
"secondary",
|
|
"success",
|
|
"warning"
|
|
]
|
|
},
|
|
"size": {
|
|
"default": "default",
|
|
"values": [
|
|
"default",
|
|
"icon",
|
|
"icon-lg",
|
|
"icon-sm",
|
|
"icon-xs",
|
|
"lg",
|
|
"sm",
|
|
"xs"
|
|
]
|
|
},
|
|
"pill": {
|
|
"default": "false",
|
|
"values": [
|
|
"false",
|
|
"true"
|
|
]
|
|
}
|
|
},
|
|
"parts": {
|
|
"root": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"span"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"control": {
|
|
"states": {
|
|
"hover": ":hover",
|
|
"focusVisible": ":focus-visible",
|
|
"active": ":active",
|
|
"disabled": ":is(:disabled,[aria-disabled=\"true\"])",
|
|
"loading": "[aria-busy=\"true\"]"
|
|
},
|
|
"elements": [
|
|
"a",
|
|
"button"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline",
|
|
"rotate"
|
|
]
|
|
},
|
|
"spinner": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"span"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"icon": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"span"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"copy": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"span"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"label": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"span"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"description": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"span"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"tooltip": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"span"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
}
|
|
},
|
|
"props": [
|
|
{
|
|
"name": "label",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"Button\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "loadingLabel",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"Loading…\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "description",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "as",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "href",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "target",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "rel",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "type",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"button\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "variant",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"default\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "color",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"primary\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "size",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"default\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": "false",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "loading",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": "false",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "pill",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": "false",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "fullWidth",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": "false",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "icon",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "iconPosition",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"start\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "ariaLabel",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "ariaPressed",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "ariaExpanded",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "ariaControls",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "title",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "tooltipPlacement",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"top\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "autofocus",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": "false",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "controlClass",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "class",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
}
|
|
],
|
|
"outputs": [
|
|
{
|
|
"name": "click",
|
|
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
|
|
},
|
|
{
|
|
"name": "focus",
|
|
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
|
|
},
|
|
{
|
|
"name": "blur",
|
|
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
|
|
}
|
|
],
|
|
"slots": [],
|
|
"constraints": [
|
|
"Styling only; semantics and events remain component-owned.",
|
|
"Native popup and provider internals are outside this contract."
|
|
],
|
|
"support": "recipe-supported"
|
|
},
|
|
"Alert": {
|
|
"contractVersion": 1,
|
|
"axes": {
|
|
"size": {
|
|
"default": "default",
|
|
"values": [
|
|
"default",
|
|
"lg",
|
|
"md",
|
|
"sm",
|
|
"xl",
|
|
"xs"
|
|
]
|
|
},
|
|
"color": {
|
|
"default": "info",
|
|
"values": [
|
|
"danger",
|
|
"dark",
|
|
"info",
|
|
"light",
|
|
"primary",
|
|
"secondary",
|
|
"success",
|
|
"warning"
|
|
]
|
|
},
|
|
"variant": {
|
|
"default": "soft",
|
|
"values": [
|
|
"action",
|
|
"link",
|
|
"soft"
|
|
]
|
|
},
|
|
"radius": {
|
|
"default": "md",
|
|
"values": [
|
|
"lg",
|
|
"md",
|
|
"none",
|
|
"sm",
|
|
"xl"
|
|
]
|
|
},
|
|
"shadow": {
|
|
"default": "sm",
|
|
"values": [
|
|
"lg",
|
|
"md",
|
|
"none",
|
|
"sm"
|
|
]
|
|
}
|
|
},
|
|
"parts": {
|
|
"root": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"section"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"icon": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"span"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"body": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"div"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"title": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"strong"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"actions": {
|
|
"states": {
|
|
"hover": ":hover"
|
|
},
|
|
"elements": [
|
|
"div"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
},
|
|
"dismiss": {
|
|
"states": {
|
|
"hover": ":hover",
|
|
"focusVisible": ":focus-visible",
|
|
"active": ":active",
|
|
"disabled": ":is(:disabled,[aria-disabled=\"true\"])"
|
|
},
|
|
"elements": [
|
|
"button"
|
|
],
|
|
"properties": [
|
|
"backgroundColor",
|
|
"backgroundImage",
|
|
"borderColor",
|
|
"borderRadius",
|
|
"borderStyle",
|
|
"borderWidth",
|
|
"boxShadow",
|
|
"color",
|
|
"fontFamily",
|
|
"fontSize",
|
|
"fontWeight",
|
|
"gap",
|
|
"letterSpacing",
|
|
"minHeight",
|
|
"opacity",
|
|
"outlineColor",
|
|
"paddingBlock",
|
|
"paddingInline"
|
|
]
|
|
}
|
|
},
|
|
"props": [
|
|
{
|
|
"name": "size",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"default\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "color",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"info\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "variant",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"soft\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "class",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "radius",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"md\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "shadow",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"sm\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "title",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"Alert\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "description",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "items",
|
|
"type": "unknown[]",
|
|
"required": false,
|
|
"default": "[]",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "actions",
|
|
"type": "unknown[]",
|
|
"required": false,
|
|
"default": "[]",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "showIcon",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": "false",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "icon",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "dismissible",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": "false",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "dismissLabel",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"Dismiss alert\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "role",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"alert\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "live",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"polite\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "linkLabel",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "linkHref",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "actionLabel",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "actionHref",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "\"\"",
|
|
"options": []
|
|
},
|
|
{
|
|
"name": "compact",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": "false",
|
|
"options": []
|
|
}
|
|
],
|
|
"outputs": [
|
|
{
|
|
"name": "dismiss",
|
|
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
|
|
},
|
|
{
|
|
"name": "action",
|
|
"payloadType": "{ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }"
|
|
}
|
|
],
|
|
"slots": [],
|
|
"constraints": [
|
|
"Styling only; semantics and events remain component-owned.",
|
|
"Native popup and provider internals are outside this contract."
|
|
],
|
|
"support": "recipe-supported"
|
|
}
|
|
},
|
|
"composition": {
|
|
"container": "Container",
|
|
"spacingToken": "space.panel",
|
|
"legacySpacing": "--wrn-space-panel",
|
|
"rules": [
|
|
"Use declared component props and variants. Preserve instance APIs and explicit choices.",
|
|
"Use semantic token references for styling. Do not invent variants or provider capabilities.",
|
|
"Custom/ejected application components need separate contracts.",
|
|
"Page-spec previews contain trusted shipped components only; arbitrary source is analyzed, never executed."
|
|
]
|
|
},
|
|
"examples": [
|
|
"<Button label={\"Continue\"} variant={\"default\"} />",
|
|
"color: var(--wrn-color-text); gap: var(--wrn-space-panel);"
|
|
],
|
|
"limitations": [
|
|
"Static conformance does not certify accessibility, contrast, dynamic expressions or visual quality.",
|
|
"Native/provider/content-owned regions retain their contract limits."
|
|
]
|
|
} |