{ "version": 1.1, "tags": [ { "name": "dds-accordion", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "dds-accordion-group", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "dds-attachment", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "dds-avatar", "description": { "kind": "markdown", "value": "A person's avatar: their image, falling back to their initials, falling back to a generic placeholder. It is decorative and hidden from assistive technology unless the consumer sets `aria-label`, which turns it into an image with that name; `name` never becomes the accessible name." }, "attributes": [ { "name": "fallback-src", "description": "The URL of the image to show instead if `src` fails to load." }, { "name": "name", "description": "The person's name, which the initials and the visible label are drawn from." }, { "name": "shape", "description": "Whether the avatar is a circle or a rounded square.", "values": [ { "name": "circle" }, { "name": "square" } ] }, { "name": "show-name", "description": "Whether to show `name` as a visible label beside the avatar." }, { "name": "size", "description": "Which step of the size scale to render at.", "values": [ { "name": "2xl" }, { "name": "l" }, { "name": "m" }, { "name": "s" }, { "name": "xl" }, { "name": "xs" } ] }, { "name": "src", "description": "The URL of the image to show." } ] }, { "name": "dds-avatar-group", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "tone", "description": "", "values": [ { "name": "error" }, { "name": "info" }, { "name": "success" }, { "name": "warning" } ] } ] }, { "name": "dds-banner", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "tone", "description": "", "values": [ { "name": "error" }, { "name": "info" }, { "name": "success" }, { "name": "warning" } ] } ] }, { "name": "dds-box", "description": { "kind": "markdown", "value": "A surface primitive: a block container with token-scaled padding, background, border and radius, and no layout opinion of its own. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning." }, "attributes": [ { "name": "background", "description": "The surface colour, as a step on the surface scale.", "values": [ { "name": "1" }, { "name": "2" }, { "name": "3" }, { "name": "4" }, { "name": "5" }, { "name": "6" }, { "name": "7" }, { "name": "none" } ] }, { "name": "block-size", "description": "The size on the block axis. Takes a length, `auto`, or an intrinsic keyword.", "values": [ { "name": "0" }, { "name": "auto" }, { "name": "fit-content" }, { "name": "max-content" }, { "name": "min-content" } ] }, { "name": "border", "description": "The border width. The border is always solid.", "values": [ { "name": "m" }, { "name": "none" }, { "name": "s" } ] }, { "name": "border-color", "description": "The border colour, as a step on the border scale. Has no effect unless `border` is set.", "values": [ { "name": "1" }, { "name": "2" }, { "name": "3" }, { "name": "4" }, { "name": "5" }, { "name": "6" } ] }, { "name": "display", "description": "Whether the surface is shown. `auto` leaves the host's own display alone; `none` hides it.", "values": [ { "name": "auto" }, { "name": "none" } ] }, { "name": "inline-size", "description": "The size on the inline axis. Takes a length, `auto`, or an intrinsic keyword.", "values": [ { "name": "0" }, { "name": "auto" }, { "name": "fit-content" }, { "name": "max-content" }, { "name": "min-content" } ] }, { "name": "max-block-size", "description": "The maximum size on the block axis. Takes a length, `none`, or an intrinsic keyword.", "values": [ { "name": "0" }, { "name": "fit-content" }, { "name": "max-content" }, { "name": "min-content" }, { "name": "none" } ] }, { "name": "max-inline-size", "description": "The maximum size on the inline axis. Takes a length, `none`, or an intrinsic keyword.", "values": [ { "name": "0" }, { "name": "fit-content" }, { "name": "max-content" }, { "name": "min-content" }, { "name": "none" } ] }, { "name": "min-block-size", "description": "The minimum size on the block axis. Takes a length or an intrinsic keyword.", "values": [ { "name": "0" }, { "name": "fit-content" }, { "name": "max-content" }, { "name": "min-content" } ] }, { "name": "min-inline-size", "description": "The minimum size on the inline axis. Takes a length or an intrinsic keyword.", "values": [ { "name": "0" }, { "name": "fit-content" }, { "name": "max-content" }, { "name": "min-content" } ] }, { "name": "overflow", "description": "How content that overflows the surface is handled.", "values": [ { "name": "auto" }, { "name": "clip" }, { "name": "hidden" }, { "name": "scroll" }, { "name": "visible" } ] }, { "name": "padding", "description": "The space between the surface edge and its content on both axes. `paddingBlock` and `paddingInline` override it per axis.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "none" }, { "name": "s" }, { "name": "xl" }, { "name": "xs" }, { "name": "xxs" } ] }, { "name": "padding-block", "description": "The space on the block axis. Overrides the block value of `padding`.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "none" }, { "name": "s" }, { "name": "xl" }, { "name": "xs" }, { "name": "xxs" } ] }, { "name": "padding-inline", "description": "The space on the inline axis. Overrides the inline value of `padding`.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "none" }, { "name": "s" }, { "name": "xl" }, { "name": "xs" }, { "name": "xxs" } ] }, { "name": "radius", "description": "The corner radius.", "values": [ { "name": "container" }, { "name": "element" }, { "name": "full" }, { "name": "inner" }, { "name": "none" }, { "name": "page" } ] } ] }, { "name": "dds-breadcrumb", "description": { "kind": "markdown", "value": "One step in a breadcrumb trail: a link to a page above the current one, or the current page itself as plain text. Place it directly inside a `dds-breadcrumb-group`, which names the trail and marks the last item as current." }, "attributes": [ { "name": "disabled", "description": "Renders the item inert: it is not focusable and does not navigate." }, { "name": "external", "description": "Opens the link in a new tab and appends an external link icon." }, { "name": "href", "description": "The URL to link to. Ignored while `disabled`, and while the item is the current page." } ] }, { "name": "dds-breadcrumb-group", "description": { "kind": "markdown", "value": "Names a trail of `dds-breadcrumb` items as a navigation landmark and marks the last one as the current page. Set `aria-label` on the group to name the landmark; the component supplies no label of its own." }, "attributes": [] }, { "name": "dds-button", "description": { "kind": "markdown", "value": "The button is an interactive object that emphasizes an action." }, "attributes": [ { "name": "disabled", "description": "Prevents interaction and dims the button." }, { "name": "disclosure", "description": "Shows a chevron after the label, pointing the way the button opens.", "values": [ { "name": "down" }, { "name": "left" }, { "name": "right" }, { "name": "up" }, { "name": "up-down" } ] }, { "name": "expand", "description": "Stretches the button to the full width of its container." }, { "name": "href", "description": "The destination of the link variant." }, { "name": "icon", "description": "The name of an icon shown before the label." }, { "name": "loading", "description": "Shows a spinner and blocks interaction while work is in progress." }, { "name": "name", "description": "The name submitted with the form value." }, { "name": "size", "description": "Which step of the size scale to render at.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "target", "description": "Where the link variant opens its destination." }, { "name": "tone", "description": "The intent the button conveys.", "values": [ { "name": "critical" }, { "name": "default" } ] }, { "name": "type", "description": "The native button type. Ignored by the link variant.", "values": [ { "name": "button" }, { "name": "reset" }, { "name": "submit" } ] }, { "name": "variant", "description": "The visual emphasis of the button. The link variant renders an anchor.", "values": [ { "name": "link" }, { "name": "plain" }, { "name": "primary" }, { "name": "secondary" }, { "name": "tertiary" } ] } ] }, { "name": "dds-button-group", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "gap", "description": "", "values": [ { "name": "auto" }, { "name": "none" } ] } ] }, { "name": "dds-card", "description": { "kind": "markdown", "value": "A slotted surface that groups related content, with optional header and footer regions. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning. Set `href` to make the whole card a link, and name it with `aria-label`." }, "attributes": [ { "name": "background", "description": "The card's surface colour, as a step on the surface scale.", "values": [ { "name": "1" }, { "name": "2" }, { "name": "3" }, { "name": "4" }, { "name": "5" }, { "name": "6" }, { "name": "7" }, { "name": "none" } ] }, { "name": "border", "description": "The border width. The border is always solid.", "values": [ { "name": "m" }, { "name": "none" }, { "name": "s" } ] }, { "name": "border-color", "description": "The border colour, as a step on the border scale. Has no effect unless `border` is set.", "values": [ { "name": "1" }, { "name": "2" }, { "name": "3" }, { "name": "4" }, { "name": "5" }, { "name": "6" } ] }, { "name": "external", "description": "Opens the link in a new tab. Has no effect without `href`." }, { "name": "href", "description": "The URL the whole card links to. The link takes its accessible name from `aria-label` on the card, since `aria-labelledby` cannot cross the shadow root." }, { "name": "padding", "description": "The space between the card's edge and its content.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "none" }, { "name": "s" }, { "name": "xl" }, { "name": "xs" }, { "name": "xxs" } ] } ] }, { "name": "dds-checkbox", "description": { "kind": "markdown", "value": "A single checkbox control for a binary choice, or a partial one when indeterminate. It is form-associated, so it submits its own `name` and `value` and responds to `form.reset()`." }, "attributes": [ { "name": "checked", "description": "Whether the checkbox is checked. The attribute is the default; the property follows user input." }, { "name": "decoration", "description": "Strikes through the label while the checkbox is checked or indeterminate." }, { "name": "disabled", "description": "Prevents interaction and removes the checkbox from the tab order." }, { "name": "error", "description": "An error message shown below the label. While set, the checkbox is invalid, styled as an error and announced as invalid." }, { "name": "hint", "description": "Supporting text shown below the label and announced as the checkbox's description." }, { "name": "indeterminate", "description": "Shows the partial-selection state. Cleared when the user toggles the checkbox." }, { "name": "name", "description": "The name submitted with the form." }, { "name": "readonly", "description": "Prevents the user from changing the checked state while keeping the checkbox focusable." }, { "name": "required", "description": "Makes the checkbox invalid until it is checked." }, { "name": "shape", "description": "Whether the control's corners are square or fully rounded.", "values": [ { "name": "circle" }, { "name": "square" } ] }, { "name": "size", "description": "Which step of the size scale to render at.", "values": [ { "name": "m" }, { "name": "s" } ] }, { "name": "value", "description": "The value submitted with the form when checked. Submits `on` when omitted." } ] }, { "name": "dds-checkbox-group", "description": { "kind": "markdown", "value": "Groups related `dds-checkbox` members under a shared label, hint and error. Each checkbox stays its own form control and tab stop; the group names them as a set, can disable or lock them together, and owns an explicit error. Selection is read from the members, and the group reports the whole selection through `ddsChange`." }, "attributes": [ { "name": "disabled", "description": "Disables every member and removes them from the tab order." }, { "name": "error", "description": "An error message shown below the label. While set, the group is invalid and announced as invalid." }, { "name": "hint", "description": "Supporting text shown below the label and announced as the group's description." }, { "name": "orientation", "description": "Whether the members stack vertically or flow in a wrapping row.", "values": [ { "name": "horizontal" }, { "name": "vertical" } ] }, { "name": "readonly", "description": "Prevents the user from changing any member while keeping them focusable." }, { "name": "shape", "description": "Sets the shape of every member. Members keep their own shape when omitted.", "values": [ { "name": "circle" }, { "name": "square" } ] }, { "name": "size", "description": "Sets the size of every member. Members keep their own size when omitted.", "values": [ { "name": "m" }, { "name": "s" } ] } ] }, { "name": "dds-chip", "description": { "kind": "markdown", "value": "A chip is a small inline token that labels a piece of information, such as an attribute or a filter value." }, "attributes": [ { "name": "dot", "description": "Shows a dot before the content, coloured by the status." }, { "name": "size", "description": "Which step of the size scale to render at.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "status", "description": "The meaning the chip's colour conveys.", "values": [ { "name": "ai" }, { "name": "error" }, { "name": "info" }, { "name": "neutral" }, { "name": "positive" }, { "name": "warning" } ] }, { "name": "variant", "description": "The visual treatment of the chip. The ghost variant removes the surface fill.", "values": [ { "name": "default" }, { "name": "ghost" } ] } ] }, { "name": "dds-code", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "dds-color-scheme", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "theme", "description": "", "values": [ { "name": "dark" }, { "name": "light" } ] } ] }, { "name": "dds-country", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "code", "description": "" }, { "name": "lang", "description": "" } ] }, { "name": "dds-date-time", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "dds-dialog", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "dds-divider", "description": { "kind": "markdown", "value": "A thin line that separates content into sections, horizontal or vertical. It is a separator to assistive technology; set `aria-label` on the host to name it." }, "attributes": [ { "name": "margin", "description": "Whether to add standard spacing around the line.", "values": [ { "name": "none" }, { "name": "normal" } ] }, { "name": "orientation", "description": "Whether the line runs across the inline axis or down the block axis.", "values": [ { "name": "horizontal" }, { "name": "vertical" } ] } ] }, { "name": "dds-fieldset", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "hint", "description": "" }, { "name": "legend", "description": "" } ] }, { "name": "dds-flag", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "code", "description": "" }, { "name": "size", "description": "", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] } ] }, { "name": "dds-global-frame", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "dds-global-header", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "logo-alt", "description": "" }, { "name": "logo-src", "description": "" } ] }, { "name": "dds-global-navigation", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "dds-grid", "description": { "kind": "markdown", "value": "A layout container that arranges its children in rows and columns, with a uniform gap and configurable alignment. Place `dds-grid-item` in it to span several columns or rows. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning." }, "attributes": [ { "name": "align-content", "description": "How the rows are distributed on the block axis when the grid is larger than its tracks.", "values": [ { "name": "baseline" }, { "name": "center" }, { "name": "end" }, { "name": "normal" }, { "name": "space-around" }, { "name": "space-between" }, { "name": "space-evenly" }, { "name": "start" }, { "name": "stretch" } ] }, { "name": "align-items", "description": "How items align within their cell on the block axis.", "values": [ { "name": "baseline" }, { "name": "center" }, { "name": "end" }, { "name": "normal" }, { "name": "start" }, { "name": "stretch" } ] }, { "name": "column-gap", "description": "The space between columns, on the inline axis. Overrides the column value of `gap`.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "none" }, { "name": "s" }, { "name": "xl" }, { "name": "xs" }, { "name": "xxs" } ] }, { "name": "gap", "description": "The space between rows and columns on both axes. `rowGap` and `columnGap` override it per axis.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "none" }, { "name": "s" }, { "name": "xl" }, { "name": "xs" }, { "name": "xxs" } ] }, { "name": "grid-template-columns", "description": "The column tracks, as a CSS track list such as `repeat(3, 1fr)` or `1fr auto`. No scale backs it and the track grammar is too open for an allowlist, so an invalid value is dropped by the browser." }, { "name": "grid-template-rows", "description": "The row tracks, as a CSS track list such as `auto 1fr`. No scale backs it and the track grammar is too open for an allowlist, so an invalid value is dropped by the browser." }, { "name": "justify-content", "description": "How the columns are distributed on the inline axis when the grid is larger than its tracks.", "values": [ { "name": "baseline" }, { "name": "center" }, { "name": "end" }, { "name": "normal" }, { "name": "space-around" }, { "name": "space-between" }, { "name": "space-evenly" }, { "name": "start" }, { "name": "stretch" } ] }, { "name": "justify-items", "description": "How items align within their cell on the inline axis.", "values": [ { "name": "baseline" }, { "name": "center" }, { "name": "end" }, { "name": "normal" }, { "name": "start" }, { "name": "stretch" } ] }, { "name": "row-gap", "description": "The space between rows, on the block axis. Overrides the row value of `gap`.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "none" }, { "name": "s" }, { "name": "xl" }, { "name": "xs" }, { "name": "xxs" } ] } ] }, { "name": "dds-grid-item", "description": { "kind": "markdown", "value": "A single item of a `dds-grid`, controlling how many columns and rows it spans. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning. Outside a `dds-grid` the spans have no effect." }, "attributes": [ { "name": "colspan", "description": "The number of columns the item spans. An integer of 1 or more." }, { "name": "rowspan", "description": "The number of rows the item spans. An integer of 1 or more." } ] }, { "name": "dds-heading", "description": { "kind": "markdown", "value": "A page or section heading. `as` chooses the heading level, which is what gives the heading its place in the document outline; `size`, `weight` and `contrast` only style it, so a heading's level and its size are chosen separately.\nUse for the titles of a page and its sections. Use `dds-text` for body text, captions and inline text." }, "attributes": [ { "name": "as", "description": "The heading level, which sets the heading's place in the document outline and its default size.", "values": [ { "name": "h1" }, { "name": "h2" }, { "name": "h3" }, { "name": "h4" }, { "name": "h5" }, { "name": "h6" } ] }, { "name": "contrast", "description": "How strongly the heading stands out against its background.", "values": [ { "name": "high" }, { "name": "low" } ] }, { "name": "size", "description": "Which step of the type scale to render at. When not set, the size follows `as`.", "values": [ { "name": "10xl" }, { "name": "2xl" }, { "name": "3xl" }, { "name": "4xl" }, { "name": "5xl" }, { "name": "6xl" }, { "name": "7xl" }, { "name": "8xl" }, { "name": "9xl" }, { "name": "xl" } ] }, { "name": "text-align", "description": "Overrides the `text-align` the heading would inherit.", "values": [ { "name": "center" }, { "name": "end" }, { "name": "justify" }, { "name": "start" } ] }, { "name": "text-wrap", "description": "Overrides the `text-wrap` the heading would inherit.", "values": [ { "name": "balance" }, { "name": "nowrap" }, { "name": "pretty" }, { "name": "wrap" } ] }, { "name": "weight", "description": "How heavy the heading is.", "values": [ { "name": "bold" }, { "name": "medium" }, { "name": "normal" }, { "name": "semibold" } ] } ] }, { "name": "dds-highlight", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "dds-icon", "description": { "kind": "markdown", "value": "A glyph from the icon set, drawn at a fixed size and tinted by a colour role. It is decorative and hidden from assistive technology unless the consumer sets `aria-label`, which turns it into an image with that name." }, "attributes": [ { "name": "color", "description": "Which colour role the glyph takes, or `inherit` to follow the surrounding text colour.", "values": [ { "name": "disabled" }, { "name": "error" }, { "name": "inherit" }, { "name": "primary" }, { "name": "secondary" }, { "name": "success" }, { "name": "tertiary" }, { "name": "warning" } ] }, { "name": "name", "description": "The key of the glyph to draw from the icon set." }, { "name": "size", "description": "Which step of the size scale to render at.", "values": [ { "name": "2xs" }, { "name": "l" }, { "name": "m" }, { "name": "s" }, { "name": "xs" } ] } ] }, { "name": "dds-keyboard", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "dds-label", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "dds-link", "description": { "kind": "markdown", "value": "A navigational element that takes users to another page or resource, most often placed within or directly following a sentence." }, "attributes": [ { "name": "disabled", "description": "Renders the link inert: it is not focusable and does not navigate." }, { "name": "external", "description": "Opens the link in a new tab and appends an external link icon." }, { "name": "href", "description": "The URL to link to. Ignored while `disabled`." }, { "name": "icon-end", "description": "Name of the icon to display after the link label." }, { "name": "icon-start", "description": "Name of the icon to display before the link label." }, { "name": "size", "description": "Controls the visual size of the link.", "values": [ { "name": "m" }, { "name": "s" } ] }, { "name": "variant", "description": "Controls the visual style of the link.", "values": [ { "name": "ai" }, { "name": "default" }, { "name": "subtle" } ] } ] }, { "name": "dds-meter", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "dds-navigation", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "dds-number", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "dds-pagination", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "dds-popover", "description": { "kind": "markdown", "value": "A popover is a floating panel anchored to a trigger that reveals contextual information or secondary actions on demand. It opens in the browser's top layer and closes on `Esc` or a click outside." }, "attributes": [ { "name": "open", "description": "Whether the panel is open. The attribute follows the user opening and closing the panel, and setting it opens or closes the panel." }, { "name": "placement", "description": "The preferred side and alignment of the panel relative to the trigger. The panel flips to stay in view.", "values": [ { "name": "bottom" }, { "name": "bottom-end" }, { "name": "bottom-start" }, { "name": "left" }, { "name": "left-end" }, { "name": "left-start" }, { "name": "right" }, { "name": "right-end" }, { "name": "right-start" }, { "name": "top" }, { "name": "top-end" }, { "name": "top-start" } ] } ] }, { "name": "dds-progress-circle", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "dds-radio", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "dds-radio-group", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "dds-root", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "dds-segmented-control", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "dds-segmented-control-group", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "dds-sparkline", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "color", "description": "" }, { "name": "type", "description": "", "values": [ { "name": "bar" }, { "name": "line" }, { "name": "pie" } ] } ] }, { "name": "dds-spinner", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "duration", "description": "", "values": [ { "name": "fast" }, { "name": "normal" }, { "name": "slow" } ] }, { "name": "size", "description": "", "values": [ { "name": "2xs" }, { "name": "l" }, { "name": "m" }, { "name": "s" }, { "name": "xs" } ] } ] }, { "name": "dds-stack", "description": { "kind": "markdown", "value": "A layout container that arranges its children along a single axis with a uniform gap and configurable alignment. It is a generic container to assistive technology; set `role` and `aria-*` on the host where the content has meaning." }, "attributes": [ { "name": "align-content", "description": "How wrapped lines are distributed on the axis perpendicular to `direction`. Has no effect unless `wrap` is set.", "values": [ { "name": "baseline" }, { "name": "center" }, { "name": "end" }, { "name": "normal" }, { "name": "space-around" }, { "name": "space-between" }, { "name": "space-evenly" }, { "name": "start" }, { "name": "stretch" } ] }, { "name": "align-items", "description": "How children align on the axis perpendicular to `direction`.", "values": [ { "name": "baseline" }, { "name": "center" }, { "name": "end" }, { "name": "normal" }, { "name": "start" }, { "name": "stretch" } ] }, { "name": "column-gap", "description": "The space between columns, on the inline axis. Overrides the column value of `gap`.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "none" }, { "name": "s" }, { "name": "xl" }, { "name": "xs" }, { "name": "xxs" } ] }, { "name": "direction", "description": "The axis children are placed along: `block` stacks them vertically, `inline` places them in a row.", "values": [ { "name": "block" }, { "name": "inline" } ] }, { "name": "gap", "description": "The space between children on both axes. `rowGap` and `columnGap` override it per axis.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "none" }, { "name": "s" }, { "name": "xl" }, { "name": "xs" }, { "name": "xxs" } ] }, { "name": "justify-content", "description": "How children are distributed along `direction`.", "values": [ { "name": "baseline" }, { "name": "center" }, { "name": "end" }, { "name": "normal" }, { "name": "space-around" }, { "name": "space-between" }, { "name": "space-evenly" }, { "name": "start" }, { "name": "stretch" } ] }, { "name": "row-gap", "description": "The space between rows, on the block axis. Overrides the row value of `gap`.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "none" }, { "name": "s" }, { "name": "xl" }, { "name": "xs" }, { "name": "xxs" } ] }, { "name": "wrap", "description": "Whether children flow onto the next line when they do not fit." } ] }, { "name": "dds-switch", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "label", "description": "" }, { "name": "size", "description": "", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] } ] }, { "name": "dds-tab", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "theme", "description": "", "values": [ { "name": "dark" }, { "name": "light" } ] } ] }, { "name": "dds-tab-group", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "dds-text", "description": { "kind": "markdown", "value": "Body text for the interface, set in the design system's type scale: paragraphs, captions, supporting copy and inline emphasis.\n`as` chooses the element, which gives the text its meaning and decides whether it sits on its own line or inside one. `size`, `weight` and `contrast` only change how it looks.\nUse it for any text that needs design system styling, and a plain HTML element where it doesn't. For headings use `dds-heading`." }, "attributes": [ { "name": "as", "description": "The element the text renders as, which sets its meaning and whether it is a block or inline.", "values": [ { "name": "div" }, { "name": "em" }, { "name": "p" }, { "name": "small" }, { "name": "span" }, { "name": "strong" } ] }, { "name": "contrast", "description": "How strongly the text stands out against its background.", "values": [ { "name": "high" }, { "name": "low" } ] }, { "name": "font-variant-numeric", "description": "The `font-variant-numeric` property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.\n- `auto`: The default value. The browser determines whether to use alternate glyphs based on the font and context.\n- `tabular-nums`: Uses fixed-width digits, which are ideal for aligning numbers in tables or lists.\n- `diagonal-fractions`: Uses diagonal fraction glyphs, which are ideal for displaying fractions in a more compact and visually appealing way.\nFor more information, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", "values": [ { "name": "auto" }, { "name": "diagonal-fractions" }, { "name": "tabular-nums" } ] }, { "name": "size", "description": "Which step of the type scale to render at. Each step carries its own line height.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" }, { "name": "xs" } ] }, { "name": "text-align", "description": "Overrides the `text-align` the text would inherit.", "values": [ { "name": "center" }, { "name": "end" }, { "name": "justify" }, { "name": "start" } ] }, { "name": "text-wrap", "description": "Overrides the `text-wrap` the text would inherit.", "values": [ { "name": "balance" }, { "name": "nowrap" }, { "name": "pretty" }, { "name": "wrap" } ] }, { "name": "weight", "description": "How heavy the text is.", "values": [ { "name": "bold" }, { "name": "medium" }, { "name": "normal" }, { "name": "semibold" } ] } ] }, { "name": "dds-text-field", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "dds-tooltip", "description": { "kind": "markdown", "value": "A tooltip is a short floating label that explains the element it is anchored to. It opens while a pointer is over the trigger or focus is inside it, and closes on `Esc`. It is a visual aid only: link the content to the trigger with `aria-describedby` so assistive technology announces it, and give a trigger that is not natively focusable `tabindex=\"0\"`." }, "attributes": [ { "name": "placement", "description": "The side of the trigger the tooltip prefers. It flips to stay in view.", "values": [ { "name": "bottom" }, { "name": "end" }, { "name": "start" }, { "name": "top" } ] }, { "name": "size", "description": "The maximum width of the tooltip.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] } ] } ] }