or {content}
"
}
},
"attributes": {},
"dataAttributes": [],
"examples": [
{
"name": "basic",
"html": "const greeting = 'Hello, world!';\nconsole.log(greeting);
"
},
{
"name": "light",
"html": "const greeting = 'Hello, world!';\nconsole.log(greeting);
"
},
{
"name": "wrap",
"html": "This is a long line of code that will wrap instead of scrolling horizontally when it exceeds the container width.
"
},
{
"name": "auto",
"html": "// Auto-height adjusts to content\nconst a = 1;\nconst b = 2;
"
},
{
"name": "with-caption",
"html": "example.jsfunction add(a, b) {\n return a + b;\n}
"
},
{
"name": "with-tag",
"html": "JavaScriptconst items = [1, 2, 3];\nitems.forEach(item => console.log(item));
"
}
]
},
"ds-cols": {
"$schema": "./manifest.schema.json",
"schemaVersion": "1.0.0",
"name": "ds-cols",
"description": "Column-based layout container",
"docUrl": "https://design.soracom.io/design-system/containers/cols/",
"category": "containers",
"htmlElements": [
"div"
],
"isWebComponent": false,
"modifiers": {
"size": {
"support": "custom",
"values": [
"--small",
"--limit"
]
},
"width": {
"support": "custom",
"values": [
"--width-narrow",
"--width-default",
"--width-medium",
"--width-wide"
]
},
"layout": {
"support": "custom",
"values": [
"--center",
"--middle",
"--baseline",
"--top",
"--bottom",
"--end",
"--spaced",
"--distributed",
"--reverse",
"--stretch",
"--nowrap",
"--no-wrap",
"--uniform",
"--connected",
"--responsive-md",
"--responsive-sm"
]
},
"gap": {
"support": "all"
},
"indent": {
"support": "all"
},
"utility": {
"support": "custom",
"values": [
"--1",
"--2",
"--3",
"--4",
"--5",
"--6",
"--7",
"--8",
"--9",
"--10",
"--11",
"--12"
]
}
},
"cssCustomProperties": [
{
"name": "--ds-cols-width",
"default": "320px",
"description": "Minimum column width used by the --uniform layout"
}
],
"attributes": {},
"dataAttributes": [],
"examples": [
{
"name": "basic",
"html": ""
},
{
"name": "centered",
"html": "Centered content
Centered content
Equal width
Equal width
Equal width
Max-width 1200px content
Centered
| Name | Status | Date |
|---|
| Item 1 | Active | 2024-01-01 |
| Item 2 | Inactive | 2024-01-02 |
"
},
{
"name": "embedded",
"html": "| Name | Value |
|---|
| Setting A | Enabled |
| Setting B | Disabled |
"
},
{
"name": "striped",
"html": "| Name | Status | Date |
|---|
| Item 1 | Active | 2024-01-01 |
| Item 2 | Inactive | 2024-01-02 |
| Item 3 | Active | 2024-01-03 |
"
},
{
"name": "sticky-header",
"html": "| Name | Status | Date |
|---|
| Item 1 | Active | 2024-01-01 |
| Item 2 | Inactive | 2024-01-02 |
"
},
{
"name": "sticky-thead",
"html": "| Name | Status | Date |
|---|
| Item 1 | Active | 2024-01-01 |
| Item 2 | Inactive | 2024-01-02 |
| Item 3 | Active | 2024-01-03 |
| Item 4 | Inactive | 2024-01-04 |
Data Summary| Name | Value |
|---|
| Total | 100 |
| Average | 50 |
"
},
{
"name": "feature",
"html": "| Plan | Price | Features |
|---|
| Basic | $10 | 5 users |
| Pro | $25 | 25 users |
"
},
{
"name": "compact",
"html": "| ID | Name | Value |
|---|
| 1 | Item A | 100 |
| 2 | Item B | 200 |
"
},
{
"name": "condensed",
"html": "| ID | Name | Value |
|---|
| 1 | Item A | 100 |
| 2 | Item B | 200 |
"
},
{
"name": "plain",
"html": "| Name | Status | Date |
|---|
| Item 1 | Active | 2024-01-01 |
| Item 2 | Inactive | 2024-01-02 |
"
},
{
"name": "loading",
"html": "| Name | Status | Date |
|---|
| Item 1 | Active | 2024-01-01 |
"
},
{
"name": "loading-refresh",
"html": "| Name | Status | Date |
|---|
| Item 1 | Active | 2024-01-01 |
"
},
{
"name": "with-message",
"html": ""
},
{
"name": "clickable",
"html": "| Name | Status |
|---|
| Clickable Row 1 | Active |
| Clickable Row 2 | Inactive |
"
},
{
"name": "selectable",
"html": "| Name | Status |
|---|
| Selected Row | Active |
| Unselected Row | Inactive |
"
},
{
"name": "spreadsheet",
"html": ""
},
{
"name": "pin-first",
"html": "| Pinned | Col 2 | Col 3 | Col 4 | Col 5 |
|---|
| Fixed | Content | Content | Content | Content |
| Name | Status | Date |
|---|
| Item 1 | Active | 2024-01-01 |
| Item 2 | Inactive | 2024-01-02 |
"
},
{
"name": "sortable-headers",
"html": " | | |
|---|
| A | 1 | X |
| B | 2 | Y |
"
},
{
"name": "with-tfoot",
"html": "| Item | Qty | Price |
|---|
| Widget A | 10 | $100 |
| Widget B | 5 | $75 |
| Total | 15 | $175 |
"
},
{
"name": "cards",
"html": "| Name | Status | Date |
|---|
| Item 1 | Active | 2024-01-01 |
| Item 2 | Inactive | 2024-01-02 |
"
}
]
},
"ds-datetime-panel": {
"$schema": "./manifest.schema.json",
"schemaVersion": "1.0.0",
"name": "ds-datetime-panel",
"description": "Date/time picker panel",
"docUrl": "https://design.soracom.io/design-system/ux-patterns/datetime-panel/",
"category": "utility",
"htmlElements": [
"div"
],
"isWebComponent": false,
"modifiers": {},
"structure": {
"parts": {
"range": {
"element": "div",
"selector": ".__range",
"required": true
},
"recent": {
"element": "div",
"selector": ".__recent",
"required": true
},
"relative": {
"element": "div",
"selector": ".__relative",
"required": true
},
"timezone": {
"element": "div",
"selector": ".__timezone",
"optional": true
}
},
"patterns": {
"basic": "{absoluteControls}
{recentRanges}
{relativeRanges}
- {label}
{value}
",
"table-root": "",
"table-wrapper": ""
}
},
"attributes": {},
"dataAttributes": [
{
"name": "data-label",
"description": "Enables the responsive stacked layout when present on thead and rows; on table cells, its text becomes the mobile field label.",
"valueType": "string"
},
{
"name": "data-ds-message",
"description": "Message text that hides the details contents and renders the SDS message state.",
"valueType": "string"
}
],
"examples": [
{
"name": "basic-dl",
"html": "- Label
Value
- Another Label
Another Value
| Label | Value |
|---|
| Another Label | Another Value |
|---|
"
},
{
"name": "vertical",
"html": "- Label
Value
- Another Label
Another Value
| Label | Value |
|---|
| Another Label | Another Value |
|---|
"
},
{
"name": "plain",
"html": "- Label
Value
- Another Label
Another Value
- Label
Value
- Another Label
Another Value
Click to expand
This content is hidden by default and revealed when the disclosure is opened.
Already Open
This disclosure starts in the open state.
Alert Information
Important alert content that needs attention.
Warning Notice
Warning content that users should be aware of.
Success Details
Additional details about the successful operation.
More Information
Additional information that might be helpful.
Simple Style
Simplified disclosure without border.
No Arrow
This disclosure has no arrow indicator, uses underline text instead.
Light Disclosure
Light disclosure with reduced background opacity.
Blue Disclosure
Content with blue color theme.
FAQ Item
Frequently asked question content.
Advanced Content
Heading
Text content
{content}
",
"fieldset": "",
"disclosure": "{title}
{content}This is a group container that provides proper spacing and organization for related content elements.
Content paragraph with proper text styling.
Additional paragraph content.
Group content follows the banner header.
Main content area with important information.
This is a footer notice providing additional context.
Body content with various elements.
This group demonstrates size, state, and gap modifiers.
You have important notifications.
This group has a light blue color theme applied.
Heading Text
"
},
{
"name": "h1",
"html": "Heading 1
"
},
{
"name": "h3",
"html": "Heading 3
"
},
{
"name": "h4",
"html": "Heading 4
"
},
{
"name": "small",
"html": "Small Heading
"
},
{
"name": "large",
"html": "Large Heading
"
},
{
"name": "xlarge",
"html": "Extra Large Heading
"
},
{
"name": "2xlarge",
"html": "2XL Heading
"
},
{
"name": "color-blue",
"html": "Blue Heading
"
},
{
"name": "alert",
"html": "Alert Heading
"
},
{
"name": "with-icon",
"html": "Starred Heading
"
},
{
"name": "ds-heading-class",
"html": "Div as heading
"
}
]
},
"ds-icon": {
"$schema": "./manifest.schema.json",
"schemaVersion": "1.0.0",
"name": "ds-icon",
"description": "Icon component with SDS icon set",
"docUrl": "https://design.soracom.io/design-system/images/icons/",
"category": "elements",
"htmlElements": [
"i",
"ds-icon"
],
"isWebComponent": true,
"modifiers": {
"size": {
"support": "custom",
"values": [
"--4xsmall",
"--3xsmall",
"--2xsmall",
"--xsmall",
"--small",
"--medium",
"--large",
"--xlarge",
"--2xlarge",
"--3xlarge",
"--4xlarge",
"--huge",
"--xhuge",
"--2xhuge",
"--3xhuge",
"--4xhuge",
"--xxtiny",
"--xtiny",
"--tiny",
"--xxsmall",
"--xxlarge",
"--xxhuge",
"--massive",
"--xmassive",
"--xxmassive"
]
},
"color": {
"support": "all"
},
"visual-state": {
"support": "all"
},
"shape": {
"support": "subset",
"values": [
"--round",
"--square",
"--rounded"
]
},
"animation": {
"support": "subset",
"values": [
"--spin",
"--pulse",
"--glow",
"--blink"
]
},
"indent": {
"support": "all"
},
"icon": {
"support": "all"
}
},
"attributes": {
"icon": {
"description": "Icon name rendered as the corresponding --icon-* class.",
"pattern": "^[a-z0-9]+(-[a-z0-9]+)*$",
"allowUnknown": true,
"appliesTo": [
{
"elements": [
"ds-icon"
]
}
]
},
"color": {
"description": "SDS color name rendered as the corresponding --color-* class.",
"pattern": "^[a-z0-9]+(-[a-z0-9]+)*$",
"allowUnknown": true,
"appliesTo": [
{
"elements": [
"ds-icon"
]
}
]
},
"size": {
"description": "Icon size.",
"values": [
"4xsmall",
"3xsmall",
"2xsmall",
"xsmall",
"small",
"medium",
"large",
"xlarge",
"2xlarge",
"3xlarge",
"4xlarge",
"huge",
"xhuge",
"2xhuge",
"3xhuge",
"4xhuge",
"xxtiny",
"xtiny",
"tiny",
"xxsmall",
"xxlarge",
"xxhuge",
"massive",
"xmassive",
"xxmassive"
],
"appliesTo": [
{
"elements": [
"ds-icon"
]
}
]
},
"state": {
"description": "Visual state applied to the icon.",
"values": [
"alert",
"warning",
"success",
"info",
"muted"
],
"appliesTo": [
{
"elements": [
"ds-icon"
]
}
]
},
"animation": {
"description": "One or more comma-separated icon animations.",
"pattern": "^(spin|pulse|glow|blink)(\\s*,\\s*(spin|pulse|glow|blink))*$",
"appliesTo": [
{
"elements": [
"ds-icon"
]
}
]
},
"css": {
"description": "CSS loading mode. Global CSS is used by default; shadow loads component CSS into Shadow DOM.",
"values": [
"global",
"shadow"
],
"default": "global",
"appliesTo": [
{
"elements": [
"ds-icon"
]
}
]
}
},
"dataAttributes": [],
"webComponentApi": {
"tagName": "ds-icon",
"className": "DsIcon",
"observedAttributes": [
"icon",
"color",
"size",
"state",
"animation"
]
},
"registries": {
"icons": {
"path": "./ds-icons.json",
"description": "SDS icon metadata, including names, aliases, categories, and source URLs."
}
},
"examples": [
{
"name": "basic",
"html": ""
},
{
"name": "star",
"html": ""
},
{
"name": "settings",
"html": ""
},
{
"name": "search",
"html": ""
},
{
"name": "close",
"html": ""
},
{
"name": "check",
"html": ""
},
{
"name": "warning",
"html": ""
},
{
"name": "info",
"html": ""
},
{
"name": "edit",
"html": ""
},
{
"name": "trash",
"html": ""
},
{
"name": "download",
"html": ""
},
{
"name": "upload",
"html": ""
},
{
"name": "_comment_sizes",
"html": "Size examples"
},
{
"name": "xsmall",
"html": ""
},
{
"name": "small",
"html": ""
},
{
"name": "medium",
"html": ""
},
{
"name": "large",
"html": ""
},
{
"name": "xlarge",
"html": ""
},
{
"name": "2xlarge",
"html": ""
},
{
"name": "huge",
"html": ""
},
{
"name": "_comment_colors",
"html": "Color examples"
},
{
"name": "color-red",
"html": ""
},
{
"name": "color-blue",
"html": ""
},
{
"name": "color-green",
"html": ""
},
{
"name": "color-celeste",
"html": ""
},
{
"name": "_comment_visual_states",
"html": "Visual state examples"
},
{
"name": "alert-state",
"html": ""
},
{
"name": "success-state",
"html": ""
},
{
"name": "info-state",
"html": ""
},
{
"name": "_comment_shapes",
"html": "Shape modifiers"
},
{
"name": "round",
"html": ""
},
{
"name": "square",
"html": ""
},
{
"name": "rounded",
"html": ""
},
{
"name": "_comment_animations",
"html": "Animation examples"
},
{
"name": "spin",
"html": ""
},
{
"name": "pulse",
"html": ""
},
{
"name": "glow",
"html": ""
},
{
"name": "blink",
"html": ""
},
{
"name": "_comment_indents",
"html": "Indent examples"
},
{
"name": "indent-small",
"html": ""
},
{
"name": "indent-medium",
"html": ""
},
{
"name": "_comment_complex",
"html": "Complex combinations"
},
{
"name": "round-large-colored",
"html": ""
},
{
"name": "loading-spinner",
"html": ""
},
{
"name": "alert-blink",
"html": ""
}
]
},
"ds-input": {
"$schema": "./manifest.schema.json",
"schemaVersion": "1.0.0",
"name": "ds-input",
"description": "Text input field component. Supports input, textarea, and div container wrapper. Icons require div wrapper. Includes date/time pickers, color picker, copy-to-clipboard, and resize variants.",
"docUrl": "https://design.soracom.io/design-system/elements/input/",
"category": "elements",
"htmlElements": [
"input",
"textarea",
"div"
],
"isWebComponent": false,
"modifiers": {
"size": {
"support": "subset",
"values": [
"--small",
"--large"
]
},
"width": {
"support": "subset",
"values": [
"--narrow",
"--mid",
"--wide",
"--extra-wide",
"--full-width",
"--full"
]
},
"visual-state": {
"support": "all"
},
"state": {
"support": "subset",
"values": [
"--disabled"
]
},
"variant": {
"support": "custom",
"values": [
"--text",
"--date",
"--time",
"--datetime-split",
"--color-picker",
"--copy",
"--addon"
]
},
"utility": {
"support": "custom",
"values": [
"--resize-horizontal",
"--resize-vertical",
"--resize-none",
"--no-resize",
"--resize",
"--narrow",
"--auto-sizing"
]
},
"icon": {
"support": "all"
}
},
"cssCustomProperties": [
{
"name": "--ds-input-text-color",
"default": "var(--color-default)",
"description": "Text color for the input control"
},
{
"name": "--ds-input-background-color",
"default": "var(--color-background)",
"description": "Background color for the input control"
},
{
"name": "--ds-input-border-radius",
"default": "2px",
"description": "Border radius for the input and its wrapper"
}
],
"structure": {
"containerWrapper": "div",
"parts": {
"control": {
"element": "input",
"alternativeElements": [
"textarea"
],
"optional": true
},
"addon": {
"element": "button",
"alternativeElements": [
"span"
],
"selector": ".ds-button, .ds-text",
"optional": true
}
},
"patterns": {
"input": "",
"textarea": "",
"wrapper": "",
"datetime-split": "",
"addon": ""
}
},
"attributes": {
"type": {
"description": "Native input type, including text, date, time, datetime-local, and file controls.",
"appliesTo": [
{
"part": "control",
"elements": [
"input"
]
}
]
},
"name": {
"description": "Form field name submitted with the control value.",
"appliesTo": [
{
"part": "control",
"elements": [
"input",
"textarea"
]
}
]
},
"value": {
"description": "Initial value for an input control. Use text content for textarea values.",
"appliesTo": [
{
"part": "control",
"elements": [
"input"
]
}
]
},
"placeholder": {
"description": "Placeholder text shown when the control is empty.",
"appliesTo": [
{
"part": "control",
"elements": [
"input",
"textarea"
]
}
]
},
"disabled": {
"description": "Disables the control and applies the SDS disabled appearance.",
"appliesTo": [
{
"part": "control",
"elements": [
"input",
"textarea"
]
}
]
},
"readonly": {
"description": "Makes the control read-only and applies the SDS read-only appearance.",
"appliesTo": [
{
"part": "control",
"elements": [
"input",
"textarea"
]
}
]
},
"required": {
"description": "Marks the control as required for native form validation.",
"appliesTo": [
{
"part": "control",
"elements": [
"input",
"textarea"
]
}
]
},
"rows": {
"description": "Visible text rows for a textarea control.",
"appliesTo": [
{
"part": "control",
"elements": [
"textarea"
]
}
]
},
"min": {
"description": "Minimum value for date, time, datetime-local, and other constrained input types.",
"appliesTo": [
{
"part": "control",
"elements": [
"input"
]
}
]
},
"max": {
"description": "Maximum value for date, time, datetime-local, and other constrained input types.",
"appliesTo": [
{
"part": "control",
"elements": [
"input"
]
}
]
},
"step": {
"description": "Permitted value increment for date, time, datetime-local, and other constrained input types.",
"appliesTo": [
{
"part": "control",
"elements": [
"input"
]
}
]
},
"pattern": {
"description": "Native validation pattern for input values.",
"appliesTo": [
{
"part": "control",
"elements": [
"input"
]
}
]
}
},
"dataAttributes": [],
"examples": [
{
"name": "basic",
"html": ""
},
{
"name": "container",
"html": ""
},
{
"name": "withLabel",
"html": ""
},
{
"name": "required",
"html": ""
},
{
"name": "small",
"html": ""
},
{
"name": "large",
"html": ""
},
{
"name": "alert",
"html": ""
},
{
"name": "warning",
"html": ""
},
{
"name": "success",
"html": ""
},
{
"name": "info",
"html": ""
},
{
"name": "with-icon",
"html": ""
},
{
"name": "icon-and-state",
"html": ""
},
{
"name": "textarea",
"html": ""
},
{
"name": "auto-sizing",
"html": ""
},
{
"name": "textarea-container",
"html": ""
},
{
"name": "date-picker",
"html": ""
},
{
"name": "time-picker",
"html": ""
},
{
"name": "datetime-split",
"html": ""
},
{
"name": "readonly",
"html": ""
},
{
"name": "disabled",
"html": ""
},
{
"name": "addon",
"html": ""
},
{
"name": "file",
"html": ""
},
{
"name": "text-style",
"html": ""
},
{
"name": "copy",
"html": ""
}
]
},
"ds-label": {
"$schema": "./manifest.schema.json",
"schemaVersion": "1.0.0",
"name": "ds-label",
"description": "Label component for forms and content",
"category": "utility",
"htmlElements": [
"label",
"span"
],
"isWebComponent": false,
"modifiers": {
"notification-state": {
"support": "all"
}
},
"structure": {
"wrapContent": false,
"parts": {
"note": {
"element": "span",
"selector": ".__note",
"optional": true,
"position": [
"last"
]
}
},
"patterns": {
"label": "",
"with-note": ""
}
},
"attributes": {
"for": {
"description": "Associates the label with a form control when ds-label is applied to a label element.",
"appliesTo": [
{
"elements": [
"label"
]
}
]
}
},
"dataAttributes": [
{
"name": "data-notification-counter",
"description": "Displays a numeric counter badge on the label root. Used with a --notification modifier.",
"valueType": "number"
}
]
},
"ds-list": {
"$schema": "./manifest.schema.json",
"schemaVersion": "1.0.0",
"name": "ds-list",
"description": "List component with styling options",
"docUrl": "https://design.soracom.io/design-system/elements/list/",
"category": "elements",
"htmlElements": [
"ul",
"ol"
],
"isWebComponent": false,
"modifiers": {
"variant": {
"support": "custom",
"values": [
"--lined",
"--numbered",
"--section"
]
},
"icon": {
"support": "all"
},
"indent": {
"support": "all"
},
"gap": {
"support": "all"
}
},
"structure": {
"requiredChildren": [
"li"
],
"parts": {
"item": {
"element": "li",
"required": true,
"repeatable": true
}
},
"patterns": {
"unordered": "",
"ordered": "- {item}
"
}
},
"attributes": {
"start": {
"description": "Initial counter value for the SDS numbered ordered-list variant.",
"pattern": "^(?:[1-9]|[12]\\d|3\\d|40)$",
"default": "1",
"appliesTo": [
{
"elements": [
"ol"
]
}
]
}
},
"dataAttributes": [],
"examples": [
{
"name": "basic",
"html": "- List item 1
- List item 2
- List item 3
"
},
{
"name": "numbered",
"html": "- First item
- Second item
- Third item
"
},
{
"name": "numbered-start",
"html": "- Fourth item
- Fifth item
- Sixth item
"
},
{
"name": "lined",
"html": "- Lined item 1
- Lined item 2
- Lined item 3
"
},
{
"name": "with-icon",
"html": "- Item with icon
- Another item
"
},
{
"name": "item-icons",
"html": "- Check item
- Star item
- Info item
"
},
{
"name": "section-divider",
"html": "- Group 1 - Item 1
- Group 1 - Item 2
- Group 2 - Item 1
- Group 2 - Item 2
"
}
]
},
"ds-menu": {
"$schema": "./manifest.schema.json",
"schemaVersion": "1.0.0",
"name": "ds-menu",
"description": "Menu component for navigation",
"docUrl": "https://design.soracom.io/design-system/elements/menu/",
"category": "elements",
"htmlElements": [
"div",
"nav"
],
"isWebComponent": false,
"modifiers": {
"variant": {
"support": "custom",
"values": [
"--simple",
"--toc",
"--dropdown",
"--select-menu"
]
},
"size": {
"support": "custom",
"values": [
"--compact"
]
},
"width": {
"support": "subset",
"values": [
"--narrow",
"--mid",
"--wide",
"--full"
]
},
"layout": {
"support": "custom",
"values": [
"--viewport",
"--max-viewport"
]
},
"icon": {
"support": "all"
}
},
"cssCustomProperties": [
{
"name": "--ds-menu-height",
"default": "auto",
"description": "Fixed menu height before overflow scrolling"
},
{
"name": "--ds-menu-max-height",
"default": "var(--ds-menu-height)",
"description": "Maximum menu height before overflow scrolling"
}
],
"structure": {
"parts": {
"label": {
"element": "div",
"alternativeElements": [
"span"
],
"selector": ".ds-text.--label",
"optional": true,
"repeatable": true
},
"group": {
"element": "ul",
"optional": true,
"repeatable": true
},
"item": {
"element": "li",
"optional": true,
"repeatable": true
},
"action": {
"element": "a",
"alternativeElements": [
"button"
],
"optional": true,
"repeatable": true
}
},
"patterns": {
"links": "",
"actions": "",
"groups": ""
}
},
"attributes": {},
"dataAttributes": [
{
"name": "data-notification-counter",
"description": "Displays a numeric counter badge when set on a descendant .__item element with a --notification modifier.",
"valueType": "number"
}
],
"examples": [
{
"name": "basic",
"html": ""
},
{
"name": "with-buttons",
"html": ""
},
{
"name": "dropdown",
"html": ""
},
{
"name": "simple",
"html": ""
},
{
"name": "with-icons",
"html": ""
},
{
"name": "with-groups",
"html": ""
},
{
"name": "compact",
"html": ""
},
{
"name": "select-menu",
"html": ""
},
{
"name": "narrow",
"html": ""
},
{
"name": "wide",
"html": ""
},
{
"name": "toc",
"html": ""
}
]
},
"ds-menubutton": {
"$schema": "./manifest.schema.json",
"schemaVersion": "1.0.0",
"name": "ds-menubutton",
"description": "Button that opens a menu",
"docUrl": "https://design.soracom.io/design-system/elements/menubutton/",
"category": "elements",
"htmlElements": [
"details",
"div"
],
"isWebComponent": false,
"modifiers": {
"variant": {
"support": "custom",
"values": [
"--inline",
"--addon",
"--no-background",
"--force-background",
"--no-dismiss",
"--constrain-vh"
]
},
"position": {
"support": "custom",
"values": [
"--top",
"--top-left",
"--bottom",
"--right",
"--fixed-left",
"--fixed-right",
"--fixed-top-left",
"--fixed-top-right"
]
},
"color": {
"support": "all"
}
},
"structure": {
"parts": {
"trigger": {
"element": "summary",
"alternativeElements": [
"button"
],
"selector": "summary, button, [aria-expanded]",
"required": true,
"position": [
"first"
]
},
"content": {
"element": "div",
"selector": ".ds-menu, .__content",
"required": true,
"position": [
"after trigger"
]
}
},
"patterns": {
"details": "",
"scripted": "",
"popover": ""
}
},
"attributes": {
"open": {
"description": "Controls the expanded state when ds-menubutton is applied to a details element.",
"appliesTo": [
{
"elements": [
"details"
]
}
]
},
"popovertarget": {
"description": "References the id of the menu content controlled by a native popover trigger.",
"appliesTo": [
{
"part": "trigger",
"elements": [
"button"
]
}
]
},
"popover": {
"description": "Enables native popover behavior on the menu content.",
"default": "auto",
"appliesTo": [
{
"part": "content",
"elements": [
"div"
]
}
]
}
},
"dataAttributes": [
{
"name": "data-ds-viewport",
"description": "Set to true on the component root after measuring its trigger to constrain menu content to the remaining viewport height.",
"valueType": "boolean",
"values": [
"true"
]
}
],
"accessibility": {
"ariaAttributeContracts": [
{
"name": "aria-expanded",
"description": "Reports the current menu state for a scripted button trigger.",
"values": [
"true",
"false"
],
"appliesTo": [
{
"part": "trigger",
"elements": [
"button"
]
}
]
},
{
"name": "aria-haspopup",
"description": "Identifies that the button trigger opens a menu.",
"values": [
"menu"
],
"appliesTo": [
{
"part": "trigger",
"elements": [
"button"
]
}
]
},
{
"name": "aria-controls",
"description": "References the menu content controlled by a scripted button trigger.",
"appliesTo": [
{
"part": "trigger",
"elements": [
"button"
]
}
]
}
],
"notes": [
"Application code must keep aria-expanded synchronized with the visible state of a scripted menu.",
"A popovertarget trigger uses the browser-managed expanded state and does not need a duplicated aria-expanded attribute."
]
},
"examples": [
{
"name": "basic",
"html": ""
},
{
"name": "with-icon",
"html": ""
},
{
"name": "top",
"html": ""
},
{
"name": "right",
"html": ""
},
{
"name": "inline",
"html": ""
},
{
"name": "no-background",
"html": ""
},
{
"name": "text-trigger",
"html": ""
},
{
"name": "primary",
"html": ""
},
{
"name": "with-sections",
"html": ""
},
{
"name": "popover",
"html": ""
},
{
"name": "div-button",
"html": ""
}
]
},
"ds-modal": {
"$schema": "./manifest.schema.json",
"schemaVersion": "1.0.0",
"name": "ds-modal",
"description": "Modal overlay container",
"docUrl": "https://design.soracom.io/design-system/containers/modal/",
"category": "containers",
"htmlElements": [
"div"
],
"isWebComponent": false,
"modifiers": {},
"structure": {
"parts": {
"dialog": {
"element": "dialog",
"alternativeElements": [
"div"
],
"selector": ".ds-dialog",
"optional": true
},
"image": {
"element": "img",
"optional": true
}
},
"patterns": {
"content": "",
"dialog": "",
"image": ""
}
},
"attributes": {},
"dataAttributes": [
{
"name": "data-ds-message",
"description": "Message text that hides the modal contents and renders the SDS message state.",
"valueType": "string"
}
],
"accessibility": {
"notes": [
"Treat ds-modal as the visual backdrop; its ds-dialog descendant owns the dialog role and accessible name.",
"When displayed, prevent interaction with background content and keep keyboard focus within the active dialog."
]
},
"examples": [
{
"name": "basic",
"html": ""
}
]
},
"ds-notice": {
"$schema": "./manifest.schema.json",
"schemaVersion": "1.0.0",
"name": "ds-notice",
"description": "Notice/alert component",
"docUrl": "https://design.soracom.io/design-system/elements/notice/",
"category": "elements",
"htmlElements": [
"div",
"a"
],
"isWebComponent": false,
"modifiers": {
"color": {
"support": "all"
},
"gradient": {
"support": "all"
},
"visual-state": {
"support": "all"
},
"variant": {
"support": "custom",
"values": [
"--plain",
"--light",
"--strong",
"--fee",
"--flag",
"--pinned",
"--flow-down"
]
},
"layout": {
"support": "custom",
"values": [
"--center"
]
},
"state": {
"support": "subset",
"values": [
"--loading",
"--loading-refresh"
]
},
"icon": {
"support": "all"
},
"indent": {
"support": "all"
}
},
"structure": {
"parts": {
"pinnedTag": {
"element": "span",
"alternativeElements": [
"p"
],
"selector": ".ds-tag.--pinned",
"optional": true,
"position": [
"first"
]
},
"close": {
"element": "button",
"selector": ".__close, .ds-button.--close",
"optional": true,
"position": [
"first"
]
},
"heading": {
"element": "h2",
"alternativeElements": [
"h3",
"h4"
],
"optional": true
},
"action": {
"element": "a",
"alternativeElements": [
"button"
],
"selector": ".ds-button",
"optional": true,
"position": [
"last"
]
}
},
"patterns": {
"basic": "",
"heading": "",
"dismissible": ""
}
},
"attributes": {
"href": {
"description": "Navigation target when the notice root or its action is an anchor.",
"appliesTo": [
{
"elements": [
"a"
]
},
{
"part": "action",
"elements": [
"a"
]
}
]
}
},
"dataAttributes": [
{
"name": "data-ds-message",
"description": "Message text that hides the notice contents and renders the SDS message state.",
"valueType": "string"
}
],
"examples": [
{
"name": "basic",
"html": ""
},
{
"name": "alert",
"html": "Alert notice with automatic warning icon.
Warning notice with automatic notice icon.
Success notice with automatic check icon.
Info notice with automatic info icon.
Strong notice with full background and contrasting text.
Plain notice with transparent background.
Light notice with reduced background opacity.
Fee notice with gradient styling.
Pinned notice with no border radius, for top-of-page placement.
Notice with a close button.
Important Notice
Alert notice with a heading.
- {step}
"
}
},
"attributes": {},
"dataAttributes": [],
"examples": [
{
"name": "basic",
"html": ""
},
{
"name": "step-1",
"html": "- Register
- Configure
- Verify
- Complete
"
},
{
"name": "step-2",
"html": "- Register
- Configure
- Verify
- Complete
"
},
{
"name": "step-3",
"html": "- Register
- Configure
- Verify
- Complete
"
},
{
"name": "completed",
"html": "- Register
- Configure
- Verify
- Complete
"
}
]
},
"ds-promotion": {
"$schema": "./manifest.schema.json",
"schemaVersion": "1.0.0",
"name": "ds-promotion",
"description": "Promotion/offer display",
"category": "specialized",
"htmlElements": [
"div"
],
"isWebComponent": false,
"modifiers": {},
"attributes": {},
"dataAttributes": []
},
"ds-radio": {
"$schema": "./manifest.schema.json",
"schemaVersion": "1.0.0",
"name": "ds-radio",
"description": "Radio button input component",
"docUrl": "https://design.soracom.io/design-system/elements/radio/",
"category": "elements",
"htmlElements": [
"label",
"div"
],
"isWebComponent": false,
"modifiers": {
"size": {
"support": "subset",
"values": [
"--small",
"--medium",
"--large"
]
},
"color": {
"support": "all"
},
"visual-state": {
"support": "all"
},
"state": {
"support": "subset",
"values": [
"--disabled"
]
},
"variant": {
"support": "custom",
"values": [
"--panel",
"--panel-simple",
"--dots",
"--swatch",
"--round",
"--square",
"--hide-label",
"--image",
"--fee"
]
},
"icon": {
"support": "all"
},
"indent": {
"support": "all"
},
"gap": {
"support": "all"
}
},
"cssCustomProperties": [
{
"name": "--ds-radio-color",
"description": "Custom swatch color used by the --swatch variant"
}
],
"structure": {
"parts": {
"control": {
"element": "input",
"selector": "input[type=\"radio\"]",
"attributes": {
"type": "radio"
},
"optional": true,
"position": [
"first"
]
},
"label": {
"element": "div",
"alternativeElements": [
"span"
],
"optional": true,
"position": [
"after control"
]
},
"option": {
"element": "label",
"optional": true,
"repeatable": true
}
},
"patterns": {
"single": "",
"group": ""
}
},
"attributes": {},
"dataAttributes": [
{
"name": "data-ds-message",
"description": "Message text that hides the radio contents and renders the SDS message state.",
"valueType": "string"
}
],
"examples": [
{
"name": "basic",
"html": ""
},
{
"name": "checked",
"html": ""
},
{
"name": "small",
"html": ""
},
{
"name": "large",
"html": ""
},
{
"name": "alert",
"html": ""
},
{
"name": "success",
"html": ""
},
{
"name": "color-blue",
"html": ""
},
{
"name": "color-purple",
"html": ""
},
{
"name": "with-icon",
"html": ""
},
{
"name": "panel",
"html": ""
},
{
"name": "panel-simple",
"html": ""
},
{
"name": "dots",
"html": ""
},
{
"name": "swatch",
"html": ""
},
{
"name": "square",
"html": ""
},
{
"name": "hide-label",
"html": ""
},
{
"name": "disabled",
"html": ""
}
]
},
"ds-range": {
"$schema": "./manifest.schema.json",
"schemaVersion": "1.0.0",
"name": "ds-range",
"description": "Range slider input component",
"docUrl": "https://design.soracom.io/design-system/elements/range/",
"category": "elements",
"htmlElements": [
"div"
],
"isWebComponent": false,
"modifiers": {},
"structure": {
"parts": {
"control": {
"element": "input",
"selector": "input[type=\"range\"]",
"attributes": {
"type": "range"
},
"required": true
},
"ticks": {
"element": "datalist",
"optional": true,
"position": [
"after control"
]
},
"icon": {
"element": "i",
"selector": ".ds-icon",
"optional": true,
"repeatable": true
},
"action": {
"element": "button",
"selector": ".ds-button",
"optional": true,
"position": [
"last"
]
}
},
"patterns": {
"basic": "",
"ticks": "
",
"with-icons": "
"
}
},
"attributes": {
"type": {
"description": "Required native input type for the range control.",
"values": [
"range"
],
"default": "range",
"appliesTo": [
{
"part": "control",
"elements": [
"input"
]
}
]
},
"name": {
"description": "Form field name submitted with the range value.",
"appliesTo": [
{
"part": "control",
"elements": [
"input"
]
}
]
},
"value": {
"description": "Initial value for the range control.",
"appliesTo": [
{
"part": "control",
"elements": [
"input"
]
}
]
},
"min": {
"description": "Minimum permitted range value.",
"appliesTo": [
{
"part": "control",
"elements": [
"input"
]
}
]
},
"max": {
"description": "Maximum permitted range value.",
"appliesTo": [
{
"part": "control",
"elements": [
"input"
]
}
]
},
"step": {
"description": "Permitted increment between range values.",
"appliesTo": [
{
"part": "control",
"elements": [
"input"
]
}
]
},
"list": {
"description": "ID of a datalist that supplies tick marks for the range control.",
"appliesTo": [
{
"part": "control",
"elements": [
"input"
]
}
]
},
"disabled": {
"description": "Disables the range control and applies the SDS disabled appearance.",
"appliesTo": [
{
"part": "control",
"elements": [
"input"
]
}
]
}
},
"dataAttributes": [],
"examples": [
{
"name": "basic",
"html": ""
},
{
"name": "withLabel",
"html": ""
},
{
"name": "with-datalist",
"html": "
"
},
{
"name": "disabled",
"html": ""
},
{
"name": "with-button",
"html": ""
},
{
"name": "with-icons",
"html": "
"
}
]
},
"ds-required": {
"$schema": "./manifest.schema.json",
"schemaVersion": "1.0.0",
"name": "ds-required",
"description": "Required field indicator",
"docUrl": "https://design.soracom.io/design-system/web-components/required/",
"category": "utility",
"htmlElements": [
"ds-required"
],
"isWebComponent": true,
"modifiers": {},
"attributes": {
"css": {
"description": "CSS loading mode. Global CSS is used by default; shadow loads base CSS into Shadow DOM.",
"values": [
"global",
"shadow"
],
"default": "global",
"appliesTo": [
{
"elements": [
"ds-required"
]
}
]
}
},
"dataAttributes": [],
"webComponentApi": {
"tagName": "ds-required",
"className": "DsRequired",
"observedAttributes": []
},
"examples": [
{
"name": "basic",
"html": ""
},
{
"name": "in-label",
"html": ""
},
{
"name": "native-abbr",
"html": "*"
}
]
},
"ds-richtip": {
"$schema": "./manifest.schema.json",
"schemaVersion": "1.0.0",
"name": "ds-richtip",
"description": "Rich content tooltip component",
"docUrl": "https://design.soracom.io/design-system/elements/richtip/",
"category": "elements",
"htmlElements": [
"div",
"details"
],
"isWebComponent": false,
"modifiers": {
"state": {
"support": "subset",
"values": [
"--active"
]
},
"visual-state": {
"support": "all"
},
"color": {
"support": "all"
},
"position": {
"support": "custom",
"values": [
"--tip-top-left",
"--tip-top",
"--tip-top-right",
"--tip-bottom-left",
"--tip-bottom",
"--tip-bottom-right",
"--tip-left-top",
"--tip-left",
"--tip-left-bottom",
"--tip-right-top",
"--tip-right",
"--tip-right-bottom"
]
}
},
"cssCustomProperties": [
{
"name": "--ds-richtip-max-width",
"default": "340px",
"description": "Maximum width of the rich tooltip content"
}
],
"structure": {
"parts": {
"trigger": {
"element": "summary",
"alternativeElements": [
"button",
"i",
"div"
],
"selector": "summary, [class*=\"__button\"]",
"required": true,
"position": [
"first"
]
},
"content": {
"element": "div",
"selector": "[class*=\"__content\"]",
"required": true,
"position": [
"after trigger"
]
}
},
"patterns": {
"hover": "",
"details": "
{content}
Global multicarrier cellular connectivity
built for IoT & M2M. Pay as you go with no commitments and all the
tools you need to manage and secure your IoT network and devices.
Text Content
Rich tooltip content with formatting.
Rich tooltip content with formatting.
Click the icon to toggle this rich content tooltip.
This tooltip is always visible with the --active modifier.
Centered vertically and horizontally
Max-width 1200px centered content
Row with large indent
Another row
Takes full height of parent
- Label One
- Label Two
- Label Three
"
}
]
},
"ds-tag": {
"$schema": "./manifest.schema.json",
"schemaVersion": "1.0.0",
"name": "ds-tag",
"description": "Tag/badge component",
"docUrl": "https://design.soracom.io/design-system/elements/tag/",
"category": "elements",
"htmlElements": [
"span",
"div",
"label"
],
"isWebComponent": false,
"modifiers": {
"size": {
"support": "subset",
"values": [
"--xsmall",
"--small",
"--medium",
"--large"
]
},
"color": {
"support": "all"
},
"visual-state": {
"support": "all"
},
"variant": {
"support": "custom",
"values": [
"--outline",
"--pinned",
"--flag",
"--fence",
"--fee",
"--plan",
"--ai",
"--no-case"
]
},
"shape": {
"support": "subset",
"values": [
"--square",
"--rounded"
]
},
"icon": {
"support": "all"
},
"state": {
"support": "subset",
"values": [
"--disabled"
]
},
"utility": {
"support": "subset",
"values": [
"--hide-label"
]
},
"animation": {
"support": "subset",
"values": [
"--pulse",
"--glow",
"--blink"
]
}
},
"structure": {
"requiredChildren": [
"span"
],
"wrapContent": "span",
"parts": {
"control": {
"element": "input",
"selector": "input[type=\"checkbox\"], input[type=\"radio\"]",
"optional": true,
"position": [
"first"
]
},
"icon": {
"element": "i",
"selector": ".ds-icon",
"optional": true,
"position": [
"before label"
]
},
"label": {
"element": "span",
"required": true
},
"action": {
"element": "button",
"selector": ".ds-button",
"optional": true,
"position": [
"last"
]
}
},
"patterns": {
"label": "{content}",
"checkbox": "",
"radio": "",
"dismissible": "{content}
"
}
},
"attributes": {
"type": {
"description": "Native input type for a selectable tag control.",
"values": [
"checkbox",
"radio"
],
"appliesTo": [
{
"part": "control",
"elements": [
"input"
]
}
]
},
"name": {
"description": "Form field name submitted with the selectable tag value.",
"appliesTo": [
{
"part": "control",
"elements": [
"input"
]
}
]
},
"value": {
"description": "Value submitted when the selectable tag is selected.",
"appliesTo": [
{
"part": "control",
"elements": [
"input"
]
}
]
},
"checked": {
"description": "Selects the tag control and applies its checked appearance.",
"appliesTo": [
{
"part": "control",
"elements": [
"input"
]
}
]
},
"disabled": {
"description": "Disables the tag control and applies the SDS disabled appearance.",
"appliesTo": [
{
"part": "control",
"elements": [
"input"
]
}
]
},
"required": {
"description": "Marks the tag control as required for native form validation.",
"appliesTo": [
{
"part": "control",
"elements": [
"input"
]
}
]
}
},
"dataAttributes": [],
"examples": [
{
"name": "basic",
"html": "Tag"
},
{
"name": "small",
"html": "Small"
},
{
"name": "medium",
"html": "Medium"
},
{
"name": "large",
"html": "Large"
},
{
"name": "alert",
"html": "Alert"
},
{
"name": "warning",
"html": "Warning"
},
{
"name": "success",
"html": "Success"
},
{
"name": "info",
"html": "Info"
},
{
"name": "color",
"html": "Blue"
},
{
"name": "outline",
"html": "Outline"
},
{
"name": "outline-color",
"html": "Magenta Outline"
},
{
"name": "with-icon",
"html": "With Icon"
},
{
"name": "with-inline-icon",
"html": "Inline Icon"
},
{
"name": "with-strong",
"html": "LabelValue"
},
{
"name": "with-close-button",
"html": "Closable
"
},
{
"name": "checkbox",
"html": ""
},
{
"name": "radio",
"html": ""
},
{
"name": "pinned",
"html": "Pinned"
},
{
"name": "fee",
"html": "Fee"
},
{
"name": "no-case",
"html": "No Uppercase"
},
{
"name": "square",
"html": "Square"
},
{
"name": "disabled",
"html": ""
}
]
},
"ds-text": {
"$schema": "./manifest.schema.json",
"schemaVersion": "1.0.0",
"name": "ds-text",
"description": "Styled text component",
"docUrl": "https://design.soracom.io/design-system/elements/text/",
"category": "elements",
"htmlElements": [
"div",
"p",
"span",
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"label",
"summary",
"li",
"a",
"strong",
"em"
],
"isWebComponent": false,
"modifiers": {
"size": {
"support": "custom",
"values": [
"--4xsmall",
"--3xsmall",
"--2xsmall",
"--xsmall",
"--small",
"--medium",
"--medium-bold",
"--large",
"--xlarge",
"--2xlarge",
"--3xlarge",
"--4xlarge",
"--huge",
"--xhuge",
"--2xhuge",
"--3xhuge",
"--4xhuge",
"--xxsmall",
"--xxlarge",
"--xxhuge"
]
},
"color": {
"support": "all"
},
"visual-state": {
"support": "all"
},
"notification-state": {
"support": "all"
},
"variant": {
"support": "custom",
"values": [
"--inset",
"--fee",
"--fee-light",
"--fee-strong",
"--addon",
"--note",
"--nowrap",
"--no-wrap"
]
},
"layout": {
"support": "custom",
"values": [
"--end",
"--right"
]
},
"icon": {
"support": "all"
},
"indent": {
"support": "all"
}
},
"attributes": {
"href": {
"description": "Navigation target when ds-text is applied to an anchor element.",
"appliesTo": [
{
"elements": [
"a"
]
}
]
}
},
"dataAttributes": [
{
"name": "data-notification-counter",
"description": "Displays a numeric counter badge on the text root. Used with a --notification modifier.",
"valueType": "number"
}
],
"examples": [
{
"name": "basic",
"html": "Text content
"
},
{
"name": "small",
"html": "Small text
"
},
{
"name": "large",
"html": "Large text
"
},
{
"name": "xsmall",
"html": "Extra small text
"
},
{
"name": "xlarge",
"html": "Extra large text
"
},
{
"name": "bold",
"html": "Bold medium text
"
},
{
"name": "color-red",
"html": "Red text
"
},
{
"name": "color-blue",
"html": "Blue text
"
},
{
"name": "alert",
"html": "Alert text
"
},
{
"name": "with-icon",
"html": "Text with icon
"
},
{
"name": "inset",
"html": "Inset text with padding
"
},
{
"name": "fee",
"html": "Fee text with gradient icon
"
},
{
"name": "note",
"html": "Note text with left border accent
"
},
{
"name": "nowrap",
"html": "Text that does not wrap
"
},
{
"name": "as-span",
"html": "Inline text element"
}
]
},
"ds-texttip": {
"$schema": "./manifest.schema.json",
"schemaVersion": "1.0.0",
"name": "ds-texttip",
"description": "Text tooltip component",
"docUrl": "https://design.soracom.io/design-system/elements/texttip/",
"category": "elements",
"htmlElements": [
"span",
"div",
"button",
"i"
],
"isWebComponent": false,
"modifiers": {
"position": {
"support": "custom",
"values": [
"--tip-top-left",
"--tip-top",
"--tip-top-right",
"--tip-bottom-left",
"--tip-bottom",
"--tip-bottom-right",
"--tip-left-top",
"--tip-left",
"--tip-left-bottom",
"--tip-right-top",
"--tip-right",
"--tip-right-bottom"
]
},
"visual-state": {
"support": "all"
},
"color": {
"support": "all"
}
},
"attributes": {},
"dataAttributes": [],
"examples": [
{
"name": "basic",
"html": "Hover me"
},
{
"name": "on-text",
"html": "Hover for details
"
},
{
"name": "on-button",
"html": ""
},
{
"name": "on-icon",
"html": ""
},
{
"name": "on-label",
"html": "Label text
"
},
{
"name": "inline",
"html": "This text has an API reference with tooltip.
"
},
{
"name": "tip-bottom",
"html": "Hover (bottom)"
},
{
"name": "tip-left",
"html": "Hover (left)"
},
{
"name": "tip-right",
"html": "Hover (right)"
},
{
"name": "tip-bottom-right",
"html": ""
}
]
},
"ds-theme": {
"$schema": "./manifest.schema.json",
"schemaVersion": "1.0.0",
"name": "ds-theme",
"description": "Theme selector web component for light, system, and dark color modes",
"docUrl": "https://design.soracom.io/design-system/web-components/theme/",
"category": "utility",
"htmlElements": [
"ds-theme"
],
"isWebComponent": true,
"modifiers": {},
"attributes": {
"aria-label": {
"description": "Accessible label for the internal theme radiogroup. Defaults to the localized Theme label.",
"appliesTo": [
{
"elements": [
"ds-theme"
]
}
]
},
"name": {
"description": "Name assigned to the internal radio group. A unique name is generated by default.",
"appliesTo": [
{
"elements": [
"ds-theme"
]
}
]
},
"storage-key": {
"description": "localStorage key used to persist the selected theme.",
"default": "ds:theme",
"appliesTo": [
{
"elements": [
"ds-theme"
]
}
]
},
"value": {
"description": "Current theme selection.",
"values": [
"light",
"system",
"dark"
],
"default": "system",
"appliesTo": [
{
"elements": [
"ds-theme"
]
}
]
},
"css": {
"description": "CSS loading mode. Global CSS is used by default; shadow loads component CSS into Shadow DOM.",
"values": [
"global",
"shadow"
],
"default": "global",
"appliesTo": [
{
"elements": [
"ds-theme"
]
}
]
}
},
"dataAttributes": [],
"webComponentApi": {
"tagName": "ds-theme",
"className": "DsTheme",
"observedAttributes": [
"aria-label",
"name",
"storage-key",
"value"
],
"properties": {
"value": {
"type": "'light' | 'system' | 'dark'",
"description": "Current theme selection. System removes data-ds-theme; light and dark set it explicitly."
}
},
"events": [
{
"name": "ds-theme-change",
"description": "Dispatched when the selected theme changes with detail { value: 'light' | 'system' | 'dark' }."
}
]
},
"accessibility": {
"role": "radiogroup",
"ariaAttributes": [
"aria-label"
],
"notes": [
"Renders native radio inputs inside a labelled SDS theme switch.",
"Labels follow the document language from html[lang], supporting English and Japanese with English fallback."
]
},
"examples": [
{
"name": "basic",
"html": ""
},
{
"name": "initial-light",
"html": ""
},
{
"name": "custom-storage-key",
"html": ""
}
]
},
"ds-timecontroller": {
"$schema": "./manifest.schema.json",
"schemaVersion": "1.0.0",
"name": "ds-timecontroller",
"description": "Time range controller",
"category": "utility",
"htmlElements": [
"div"
],
"isWebComponent": false,
"modifiers": {},
"structure": {
"parts": {
"oldest": {
"element": "button",
"selector": ".__control-oldest",
"required": true
},
"increment": {
"element": "button",
"selector": "[class*=\"__control-top-\"]",
"required": true,
"repeatable": true
},
"display": {
"element": "div",
"alternativeElements": [
"span"
],
"selector": "[class*=\"__display-\"]",
"required": true,
"repeatable": true
},
"decrement": {
"element": "button",
"selector": "[class*=\"__control-bottom-\"]",
"required": true,
"repeatable": true
},
"latest": {
"element": "button",
"selector": ".__control-latest",
"required": true
}
},
"patterns": {
"basic": "{incrementControls}{year}{month}{date}{weekday}{hour}{minute}{second}{decrementControls}
"
}
},
"attributes": {},
"dataAttributes": []
},
"ds-video": {
"$schema": "./manifest.schema.json",
"schemaVersion": "1.0.0",
"name": "ds-video",
"description": "Video player component",
"docUrl": "https://design.soracom.io/design-system/elements/video/",
"category": "elements",
"htmlElements": [
"video",
"div"
],
"isWebComponent": false,
"modifiers": {
"state": {
"support": "custom",
"values": [
"--playing"
]
},
"layout": {
"support": "subset",
"values": [
"--full-width"
]
}
},
"cssCustomProperties": [
{
"name": "--ds-video-width",
"default": "800px",
"description": "Width of the video player before its max-width constraint"
}
],
"structure": {
"parts": {
"video": {
"element": "video",
"required": true
},
"playPause": {
"element": "button",
"selector": ".__playpause",
"optional": true
},
"controls": {
"element": "div",
"selector": ".__controls, .ds-switch",
"optional": true
}
},
"patterns": {
"direct": "",
"wrapper": "",
"custom": ""
}
},
"attributes": {
"src": {
"description": "URL of the video resource.",
"appliesTo": [
{
"elements": [
"video"
]
},
{
"part": "video",
"elements": [
"video"
]
}
]
},
"controls": {
"description": "Displays the browser-provided video controls.",
"appliesTo": [
{
"elements": [
"video"
]
},
{
"part": "video",
"elements": [
"video"
]
}
]
},
"autoplay": {
"description": "Starts playback automatically when browser policy permits it.",
"appliesTo": [
{
"elements": [
"video"
]
},
{
"part": "video",
"elements": [
"video"
]
}
]
},
"loop": {
"description": "Restarts playback automatically after the video ends.",
"appliesTo": [
{
"elements": [
"video"
]
},
{
"part": "video",
"elements": [
"video"
]
}
]
},
"muted": {
"description": "Mutes the video audio by default.",
"appliesTo": [
{
"elements": [
"video"
]
},
{
"part": "video",
"elements": [
"video"
]
}
]
},
"poster": {
"description": "Image displayed before the video starts playing.",
"appliesTo": [
{
"elements": [
"video"
]
},
{
"part": "video",
"elements": [
"video"
]
}
]
},
"preload": {
"description": "Hint for how much video data the browser should preload.",
"values": [
"none",
"metadata",
"auto"
],
"appliesTo": [
{
"elements": [
"video"
]
},
{
"part": "video",
"elements": [
"video"
]
}
]
},
"playsinline": {
"description": "Requests inline playback on devices that otherwise use a fullscreen player.",
"appliesTo": [
{
"elements": [
"video"
]
},
{
"part": "video",
"elements": [
"video"
]
}
]
}
},
"dataAttributes": [],
"examples": [
{
"name": "basic",
"html": ""
},
{
"name": "direct",
"html": ""
},
{
"name": "full-width",
"html": ""
},
{
"name": "with-playpause",
"html": ""
},
{
"name": "with-controls",
"html": ""
},
{
"name": "playing",
"html": ""
}
]
}
}