\n An alert with the default info color, and a custom icon.\n
\n\n An alert with the default info color, and a custom icon.\n
\n\n Congratulations! You're using the \"success\" color.\n \n \n
\n\n Congratulations! You're using the \"success\" color.\n \n \n
\n\n Oops! You're using the \"error\" color.\n \n \n
\n\n Oops! You're using the \"error\" color.\n \n \n
\n\n Watch out! You're using the \"warning\" color.\n \n \n
\n\n Watch out! You're using the \"warning\" color.\n \n \n
\n```"
],
"structure": [
{
"selector": ".instui-alert",
"children": [
{
"selector": "slot",
"children": []
},
{
"selector": "",
"variants": [
{
"name": "bare-button",
"nodes": [
{
"selector": "@component button",
"cardinality": "max-1",
"children": []
}
]
},
{
"name": "button-group",
"nodes": [
{
"selector": ".button-group",
"children": [
{
"selector": "@component button",
"cardinality": "one-or-more-max-2",
"children": []
}
]
}
]
}
],
"children": []
},
{
"selector": "@component close-button",
"cardinality": "optional",
"children": []
}
]
}
],
"see": [],
"annotations": [],
"refs": [],
"decorators": [
"sealed"
],
"compat": [],
"related": [
{
"name": "close-button",
"description": "The dismiss control an alert may include."
}
],
"elements": {
"default": {
"any": true,
"allowed": [],
"include": [],
"exclude": [],
"groups": [],
"excludedGroups": []
},
"profiles": {}
},
"source": {
"line": 654,
"column": 1
}
},
{
"name": "badge",
"kind": "component",
"className": ".instui-badge",
"summary": "A small count or status dot placed over a target's corner.",
"remarks": "To place a badge over a target, wrap both in a `.instui-badge-wrapper` (the position anchor) and pin the badge with a `-placement-*` modifier.",
"modifiers": [
{
"name": "-color-danger",
"prop": "color",
"value": "danger",
"description": "An attention/error count."
},
{
"name": "-color-inverse",
"prop": "color",
"value": "inverse",
"description": "On-dark: a light chip with dark text."
},
{
"name": "-color-success",
"prop": "color",
"value": "success",
"description": "A positive/complete count."
},
{
"name": "-placement-bottom-end",
"prop": "placement",
"value": "bottom-end",
"description": "Position at the bottom-end corner."
},
{
"name": "-placement-bottom-start",
"prop": "placement",
"value": "bottom-start",
"description": "Position at the bottom-start corner."
},
{
"name": "-placement-end-center",
"prop": "placement",
"value": "end-center",
"description": "Position centred on the end edge."
},
{
"name": "-placement-start-center",
"prop": "placement",
"value": "start-center",
"description": "Position centred on the start edge."
},
{
"name": "-placement-top-end",
"prop": "placement",
"value": "top-end",
"description": "Position at the top-end corner."
},
{
"name": "-placement-top-start",
"prop": "placement",
"value": "top-start",
"description": "Position at the top-start corner."
},
{
"name": "-pulse",
"prop": "pulse",
"description": "A pulsing attention ring."
},
{
"name": "-standalone",
"prop": "standalone",
"description": "Render inline, not positioned over a target's corner."
},
{
"name": "-type-notification",
"prop": "type",
"value": "notification",
"description": "A dot only, no count."
}
],
"parts": [],
"shadowParts": [],
"pseudoElements": [
{
"name": "before",
"description": "The pulsing attention ring drawn in the badge's accent colour (the `-pulse` variant)."
}
],
"states": [],
"slots": [],
"todos": [],
"cssPropertiesConsumed": [
{
"name": "--instui-border-width-md"
},
{
"name": "--instui-component-badge-border-radius"
},
{
"name": "--instui-component-badge-color"
},
{
"name": "--instui-component-badge-color-danger"
},
{
"name": "--instui-component-badge-color-inverse"
},
{
"name": "--instui-component-badge-color-primary"
},
{
"name": "--instui-component-badge-color-success"
},
{
"name": "--instui-component-badge-font-family"
},
{
"name": "--instui-component-badge-font-size"
},
{
"name": "--instui-component-badge-font-weight"
},
{
"name": "--instui-component-badge-padding"
},
{
"name": "--instui-component-badge-size"
},
{
"name": "--instui-spacing-space-sm"
},
{
"name": "--pantoken-badge-accent"
},
{
"name": "--pantoken-badge-text"
}
],
"cssPropertiesDeclared": [
{
"name": "--pantoken-badge-accent",
"syntax": "\n Published\n Draft\n In review\n Stale\n Blocked\n Pastel\n
\n```"
],
"see": [],
"annotations": [],
"refs": [],
"decorators": [],
"compat": [],
"related": [
{
"name": "badge",
"description": "A badge is the count or notification counterpart."
},
{
"name": "tag",
"description": "A tag is the removable, form-oriented counterpart."
}
],
"elements": {
"default": {
"any": true,
"allowed": [],
"include": [],
"exclude": [],
"groups": [],
"excludedGroups": []
},
"profiles": {}
},
"source": {
"line": 1225,
"column": 1
}
},
{
"name": "tag",
"kind": "component",
"className": ".instui-tag",
"summary": "An inline chip for a keyword or filter.",
"remarks": "Sets its own horizontal `padding` (`-size-sm`/`-size-lg` scale it); chaining a `-p-*`/`-padding-*` spacing utility modifier overrides that built-in value.",
"modifiers": [
{
"name": "-inline",
"prop": "inline",
"description": "Reads inline with text and gets a trailing dismiss glyph."
},
{
"name": "-readonly",
"prop": "readonly",
"description": "Read-only (non-dismissable) tag."
},
{
"name": "-size-large",
"prop": "size",
"value": "large",
"description": "A large tag. Long-form alias of `-size-lg`."
},
{
"name": "-size-lg",
"prop": "size",
"value": "lg",
"description": "A large tag."
},
{
"name": "-size-sm",
"prop": "size",
"value": "sm",
"description": "A small tag."
},
{
"name": "-size-small",
"prop": "size",
"value": "small",
"description": "A small tag. Long-form alias of `-size-sm`."
}
],
"parts": [],
"shadowParts": [],
"pseudoElements": [
{
"name": "after",
"description": "Renders the trailing dismiss glyph on a dismissible inline tag."
}
],
"states": [],
"slots": [],
"todos": [],
"cssPropertiesConsumed": [
{
"name": "--instui-component-tag-default-background"
},
{
"name": "--instui-component-tag-default-background-hover"
},
{
"name": "--instui-component-tag-default-border-color"
},
{
"name": "--instui-component-tag-default-border-radius"
},
{
"name": "--instui-component-tag-default-border-style"
},
{
"name": "--instui-component-tag-default-border-width"
},
{
"name": "--instui-component-tag-default-color"
},
{
"name": "--instui-component-tag-font-family"
},
{
"name": "--instui-component-tag-font-size-large"
},
{
"name": "--instui-component-tag-font-size-medium"
},
{
"name": "--instui-component-tag-font-size-small"
},
{
"name": "--instui-component-tag-height-large"
},
{
"name": "--instui-component-tag-height-medium"
},
{
"name": "--instui-component-tag-height-small"
},
{
"name": "--instui-component-tag-inline-background"
},
{
"name": "--instui-component-tag-inline-background-hover"
},
{
"name": "--instui-component-tag-inline-border-color"
},
{
"name": "--instui-component-tag-inline-border-radius"
},
{
"name": "--instui-component-tag-inline-color"
},
{
"name": "--instui-component-tag-inline-icon-color"
},
{
"name": "--instui-component-tag-inline-icon-hover-color"
},
{
"name": "--instui-component-tag-max-width"
},
{
"name": "--instui-component-tag-padding-horizontal"
},
{
"name": "--instui-component-tag-padding-horizontal-small"
},
{
"name": "--instui-icon-x"
},
{
"name": "--instui-spacing-space-xs"
}
],
"cssPropertiesDeclared": [],
"functions": [],
"animations": [],
"layers": [],
"conditions": [],
"examples": [
"small"
],
"demo": "self:tag",
"see": [],
"annotations": [],
"refs": [],
"decorators": [],
"compat": [],
"related": [
{
"name": "pill",
"description": "The read-only label-chip counterpart."
}
],
"elements": {
"default": {
"any": true,
"allowed": [],
"include": [],
"exclude": [],
"groups": [],
"excludedGroups": []
},
"profiles": {}
},
"source": {
"line": 1392,
"column": 1
}
},
{
"name": "avatar",
"kind": "component",
"className": ".instui-avatar",
"summary": "A user avatar showing initials or an image, circular by default.",
"remarks": "By default the palette colour tints the initials on a transparent surface; `-has-inverse-color` fills the surface with the colour and puts the initials on-colour. The `-color-ai` variant always fills with the violet→sea gradient. For a full display name, put it in the content (so it stays in the accessibility tree) and add `data-initials=\"XX\"` for the compact visual — the real text is what a screen reader announces. Without `data-initials`, overflowing content just hard-clips (no ellipsis); wrap it in `.name` for a precise single-leading-letter clip instead, or split it into `.first-name`/`.last-name` for two clipped letters (either half can be omitted and the other stays centred).",
"releaseStage": "stable",
"accessibility": "Give an image avatar a meaningful `alt` (the person's name), not a generic \"avatar\"; for initials-only avatars, prefer real name content (bare text, data-initials, .name, or .first-name/.last-name) over pre-abbreviated letters, so assistive tech announces the real name.",
"modifiers": [
{
"name": "-color-accent1",
"prop": "color",
"value": "accent1",
"deprecated": {
"canonical": "-color-blue"
}
},
{
"name": "-color-accent2",
"prop": "color",
"value": "accent2",
"deprecated": {
"canonical": "-color-green"
}
},
{
"name": "-color-accent3",
"prop": "color",
"value": "accent3",
"deprecated": {
"canonical": "-color-red"
}
},
{
"name": "-color-accent4",
"prop": "color",
"value": "accent4",
"deprecated": {
"canonical": "-color-orange"
}
},
{
"name": "-color-accent5",
"prop": "color",
"value": "accent5",
"deprecated": {
"canonical": "-color-ash"
}
},
{
"name": "-color-accent6",
"prop": "color",
"value": "accent6",
"deprecated": {
"canonical": "-color-grey"
}
},
{
"name": "-color-ai",
"prop": "color",
"value": "ai",
"description": "AI-accent palette colour."
},
{
"name": "-color-ash",
"prop": "color",
"value": "ash",
"deprecated": {
"canonical": "-color-grey"
}
},
{
"name": "-color-blue",
"prop": "color",
"value": "blue",
"description": "Blue palette colour."
},
{
"name": "-color-green",
"prop": "color",
"value": "green",
"description": "Green palette colour."
},
{
"name": "-color-grey",
"prop": "color",
"value": "grey",
"description": "Grey palette colour."
},
{
"name": "-color-orange",
"prop": "color",
"value": "orange",
"description": "Orange palette colour."
},
{
"name": "-color-red",
"prop": "color",
"value": "red",
"description": "Red palette colour."
},
{
"name": "-has-inverse-color",
"prop": "has",
"value": "inverse-color",
"description": "Use the inverse (on-dark) text colour."
},
{
"name": "-shape-rectangle",
"prop": "shape",
"value": "rectangle",
"description": "Square (rectangular) shape instead of a circle."
},
{
"name": "-show-border",
"prop": "show",
"value": "border",
"alias": {
"canonical": "-show-border-always"
}
},
{
"name": "-show-border-always",
"prop": "show",
"value": "border-always",
"description": "Force the border ring on, even over an image or an inverse fill."
},
{
"name": "-show-border-never",
"prop": "show",
"value": "border-never",
"description": "Force the border ring off."
},
{
"name": "-size-2xl",
"prop": "size",
"value": "2xl",
"description": "Two sizes larger."
},
{
"name": "-size-2xs",
"prop": "size",
"value": "2xs",
"description": "Two sizes smaller."
},
{
"name": "-size-large",
"prop": "size",
"value": "large",
"description": "Large. Long-form alias of `-size-lg`."
},
{
"name": "-size-lg",
"prop": "size",
"value": "lg",
"description": "Large."
},
{
"name": "-size-md",
"prop": "size",
"value": "md",
"description": "Medium (the default)."
},
{
"name": "-size-medium",
"prop": "size",
"value": "medium",
"description": "Medium (the default). Long-form alias of `-size-md`."
},
{
"name": "-size-sm",
"prop": "size",
"value": "sm",
"description": "Small."
},
{
"name": "-size-small",
"prop": "size",
"value": "small",
"description": "Small. Long-form alias of `-size-sm`."
},
{
"name": "-size-x-large",
"prop": "size",
"value": "x-large",
"description": "Extra large. Long-form alias of `-size-xl`."
},
{
"name": "-size-x-small",
"prop": "size",
"value": "x-small",
"description": "Extra small. Long-form alias of `-size-xs`."
},
{
"name": "-size-xl",
"prop": "size",
"value": "xl",
"description": "Extra large."
},
{
"name": "-size-xs",
"prop": "size",
"value": "xs",
"description": "Extra small."
},
{
"name": "-size-xx-large",
"prop": "size",
"value": "xx-large",
"description": "Two sizes larger. Long-form alias of `-size-2xl`."
},
{
"name": "-size-xx-small",
"prop": "size",
"value": "xx-small",
"description": "Two sizes smaller. Long-form alias of `-size-2xs`."
}
],
"parts": [
{
"name": "first-name",
"description": "Optional (pairs with .last-name): wraps the given name, clipped to its leading letter."
},
{
"name": "last-name",
"description": "Optional (pairs with .first-name): wraps the family name, clipped to its leading letter."
},
{
"name": "name",
"description": "Optional: wrap the full name to clip it to a single leading letter without data-initials or JS."
}
],
"shadowParts": [],
"pseudoElements": [
{
"name": "before"
}
],
"states": [],
"slots": [],
"todos": [],
"cssPropertiesConsumed": [
{
"name": "--instui-component-avatar-ai-bottom-gradient-color"
},
{
"name": "--instui-component-avatar-ai-top-gradient-color"
},
{
"name": "--instui-component-avatar-ash-background-color"
},
{
"name": "--instui-component-avatar-ash-text-color"
},
{
"name": "--instui-component-avatar-background-color"
},
{
"name": "--instui-component-avatar-blue-background-color"
},
{
"name": "--instui-component-avatar-blue-text-color"
},
{
"name": "--instui-component-avatar-border-color"
},
{
"name": "--instui-component-avatar-border-width-md"
},
{
"name": "--instui-component-avatar-border-width-sm"
},
{
"name": "--instui-component-avatar-font-family"
},
{
"name": "--instui-component-avatar-font-size-lg"
},
{
"name": "--instui-component-avatar-font-size-md"
},
{
"name": "--instui-component-avatar-font-size-sm"
},
{
"name": "--instui-component-avatar-font-size-xl"
},
{
"name": "--instui-component-avatar-font-size-xs"
},
{
"name": "--instui-component-avatar-font-size2xl"
},
{
"name": "--instui-component-avatar-font-size2xs"
},
{
"name": "--instui-component-avatar-font-weight"
},
{
"name": "--instui-component-avatar-green-background-color"
},
{
"name": "--instui-component-avatar-green-text-color"
},
{
"name": "--instui-component-avatar-grey-background-color"
},
{
"name": "--instui-component-avatar-grey-text-color"
},
{
"name": "--instui-component-avatar-orange-background-color"
},
{
"name": "--instui-component-avatar-orange-text-color"
},
{
"name": "--instui-component-avatar-rectangle-radius"
},
{
"name": "--instui-component-avatar-red-background-color"
},
{
"name": "--instui-component-avatar-red-text-color"
},
{
"name": "--instui-component-avatar-size-lg"
},
{
"name": "--instui-component-avatar-size-md"
},
{
"name": "--instui-component-avatar-size-sm"
},
{
"name": "--instui-component-avatar-size-xl"
},
{
"name": "--instui-component-avatar-size-xs"
},
{
"name": "--instui-component-avatar-size2xl"
},
{
"name": "--instui-component-avatar-size2xs"
},
{
"name": "--instui-component-avatar-text-on-color"
}
],
"cssPropertiesDeclared": [],
"functions": [],
"animations": [],
"layers": [],
"conditions": [],
"examples": [
"```html\nLH\nAI\nDr. Nguyen Van Thoc\nMiguel Sanchez\nMiguel Sanchez\n```"
],
"structure": [
{
"selector": ".instui-avatar",
"children": [
{
"selector": "img",
"children": [],
"cardinality": "optional"
},
{
"selector": ".name",
"children": [],
"cardinality": "optional"
},
{
"selector": ".first-name",
"children": [],
"cardinality": "optional"
},
{
"selector": ".last-name",
"children": [],
"cardinality": "optional"
}
]
}
],
"structureDescription": "The avatar shows one of: an \n
"
],
"structure": [
{
"selector": ".instui-tabs",
"children": [
{
"selector": ".list",
"children": [
{
"selector": ".tab",
"children": [],
"cardinality": "many"
}
]
},
{
"selector": ".panel",
"children": [],
"cardinality": "many"
}
]
}
],
"see": [],
"annotations": [],
"refs": [],
"decorators": [],
"compat": [],
"related": [],
"elements": {
"default": {
"any": true,
"allowed": [],
"include": [],
"exclude": [],
"groups": [],
"excludedGroups": []
},
"profiles": {}
},
"source": {
"line": 1883,
"column": 1
}
},
{
"name": "tabs.tab",
"kind": "component",
"className": ".tab",
"summary": "A single tab button (InstUI `Tabs.Tab`, configured via the parent `Tabs`'s tab list); `-selected` marks the active one.",
"remarks": "The parent `tabs`'s `-variant-secondary` modifier restyles this member into a rounded \"folder\" tab — see `tabs`'s own doc for that modifier.",
"modifiers": [
{
"name": "-disabled",
"prop": "disabled",
"description": "Non-interactive; same styling as `[aria-disabled=\"true\"]`/`:disabled`."
},
{
"name": "-selected",
"prop": "selected",
"description": "The active tab; same styling as `[aria-selected=\"true\"]`."
}
],
"parts": [],
"shadowParts": [],
"pseudoElements": [],
"states": [
{
"name": "aria-disabled=true",
"kind": "attribute",
"selector": "[aria-disabled=\"true\"]"
},
{
"name": "aria-selected=true",
"kind": "attribute",
"selector": "[aria-selected=\"true\"]"
},
{
"name": "disabled",
"kind": "pseudo-class"
},
{
"name": "selected",
"kind": "custom"
}
],
"slots": [],
"todos": [],
"cssPropertiesConsumed": [
{
"name": "--instui-component-tabs-panel-border-width"
},
{
"name": "--instui-component-tabs-tab-default-hover-border-color"
},
{
"name": "--instui-component-tabs-tab-default-selected-border-color"
},
{
"name": "--instui-component-tabs-tab-default-text-color"
},
{
"name": "--instui-component-tabs-tab-font-family"
},
{
"name": "--instui-component-tabs-tab-font-size"
},
{
"name": "--instui-component-tabs-tab-font-weight"
},
{
"name": "--instui-component-tabs-tab-line-height"
},
{
"name": "--instui-component-tabs-tab-secondary-selected-background"
},
{
"name": "--instui-component-tabs-tab-secondary-selected-border-color"
},
{
"name": "--instui-component-tabs-tab-secondary-selected-text-color"
},
{
"name": "--instui-component-tabs-tab-secondary-text-color"
}
],
"cssPropertiesDeclared": [],
"functions": [],
"animations": [],
"layers": [],
"conditions": [],
"examples": [],
"structure": [],
"see": [],
"annotations": [],
"refs": [],
"decorators": [],
"compat": [],
"related": [],
"memberOf": {
"component": "tabs",
"private": false
},
"elements": {
"default": {
"any": true,
"allowed": [],
"include": [],
"exclude": [],
"groups": [],
"excludedGroups": []
},
"profiles": {}
},
"source": {
"line": 1935,
"column": 1
}
},
{
"name": "tabs.panel",
"kind": "component",
"className": ".panel",
"summary": "The content panel for a tab (InstUI `Tabs.Panel`).",
"modifiers": [],
"parts": [],
"shadowParts": [],
"pseudoElements": [],
"states": [
{
"name": "hidden",
"kind": "custom"
}
],
"slots": [],
"todos": [],
"cssPropertiesConsumed": [
{
"name": "--instui-component-tabs-panel-background"
},
{
"name": "--instui-component-tabs-panel-border-color"
},
{
"name": "--instui-component-tabs-panel-border-width"
},
{
"name": "--instui-component-tabs-panel-font-family"
},
{
"name": "--instui-component-tabs-panel-font-size"
},
{
"name": "--instui-component-tabs-panel-font-weight"
},
{
"name": "--instui-component-tabs-panel-line-height"
},
{
"name": "--instui-component-tabs-panel-text-color"
},
{
"name": "--instui-spacing-space-md"
},
{
"name": "--instui-spacing-space-sm"
}
],
"cssPropertiesDeclared": [],
"functions": [],
"animations": [],
"layers": [],
"conditions": [],
"examples": [],
"structure": [],
"see": [],
"annotations": [],
"refs": [],
"decorators": [],
"compat": [],
"related": [],
"memberOf": {
"component": "tabs",
"private": false
},
"elements": {
"default": {
"any": true,
"allowed": [],
"include": [],
"exclude": [],
"groups": [],
"excludedGroups": []
},
"profiles": {}
},
"source": {
"line": 2029,
"column": 1
}
},
{
"name": "metric",
"kind": "component",
"className": ".instui-metric",
"summary": "A labelled statistic — a large value over a caption.",
"remarks": "Sets its own `gap` between the value and label, and its own horizontal `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values.",
"modifiers": [
{
"name": "-text-align-center",
"prop": "text",
"value": "align-center",
"description": "Centre the value and label."
},
{
"name": "-text-align-end",
"prop": "text",
"value": "align-end",
"description": "End-align the value and label."
},
{
"name": "-text-align-start",
"prop": "text",
"value": "align-start",
"description": "Start-align the value and label."
}
],
"parts": [
{
"name": "label",
"description": "The caption beneath the value."
},
{
"name": "value",
"description": "The large metric number."
}
],
"shadowParts": [],
"pseudoElements": [],
"states": [],
"slots": [],
"todos": [],
"cssPropertiesConsumed": [
{
"name": "--instui-component-metric-gap-texts"
},
{
"name": "--instui-component-metric-label-color"
},
{
"name": "--instui-component-metric-label-font-family"
},
{
"name": "--instui-component-metric-label-font-size"
},
{
"name": "--instui-component-metric-label-font-weight"
},
{
"name": "--instui-component-metric-label-line-height"
},
{
"name": "--instui-component-metric-padding-horizontal"
},
{
"name": "--instui-component-metric-value-color"
},
{
"name": "--instui-component-metric-value-font-family"
},
{
"name": "--instui-component-metric-value-font-size"
},
{
"name": "--instui-component-metric-value-font-weight"
},
{
"name": "--instui-component-metric-value-line-height"
}
],
"cssPropertiesDeclared": [],
"functions": [],
"animations": [],
"layers": [],
"conditions": [],
"examples": [
"```html\n\n \n \n \n \n
\n The Overview tab's content shows here.
\n\n 1,284\n Active users\n
\n```"
],
"structure": [
{
"selector": ".instui-metric",
"children": [
{
"selector": ".value",
"children": []
},
{
"selector": ".label",
"children": []
}
]
}
],
"see": [],
"annotations": [],
"refs": [],
"decorators": [],
"compat": [],
"related": [],
"elements": {
"default": {
"any": true,
"allowed": [],
"include": [],
"exclude": [],
"groups": [],
"excludedGroups": []
},
"profiles": {}
},
"source": {
"line": 2062,
"column": 1
}
},
{
"name": "byline",
"kind": "component",
"className": ".instui-byline",
"summary": "A media object: a hero figure beside a title and description.",
"remarks": "Sets its own `gap` between the figure and the text block; chaining a `-gap-*` spacing utility modifier overrides that built-in value.",
"modifiers": [
{
"name": "-align-content-center",
"prop": "align",
"value": "content-center",
"description": "Vertically centre the text beside the hero."
},
{
"name": "-align-content-top",
"prop": "align",
"value": "content-top",
"description": "Align the text to the top of the hero."
},
{
"name": "-icon-*",
"prop": "icon",
"pattern": true,
"description": "Render a leading glyph icon before the text block."
},
{
"name": "-size-large",
"prop": "size",
"value": "large",
"description": "Large. Long-form alias of `-size-lg`."
},
{
"name": "-size-lg",
"prop": "size",
"value": "lg",
"description": "Large."
},
{
"name": "-size-md",
"prop": "size",
"value": "md",
"description": "Medium."
},
{
"name": "-size-medium",
"prop": "size",
"value": "medium",
"description": "Medium. Long-form alias of `-size-md`."
},
{
"name": "-size-sm",
"prop": "size",
"value": "sm",
"description": "Small."
},
{
"name": "-size-small",
"prop": "size",
"value": "small",
"description": "Small. Long-form alias of `-size-sm`."
}
],
"parts": [
{
"name": "description",
"description": "The supporting body text."
},
{
"name": "title",
"description": "The heading text."
}
],
"shadowParts": [],
"pseudoElements": [],
"states": [],
"slots": [],
"todos": [],
"cssPropertiesConsumed": [
{
"name": "--instui-component-byline-background"
},
{
"name": "--instui-component-byline-color"
},
{
"name": "--instui-component-byline-description-font-size"
},
{
"name": "--instui-component-byline-description-font-weight"
},
{
"name": "--instui-component-byline-description-line-height"
},
{
"name": "--instui-component-byline-figure-margin"
},
{
"name": "--instui-component-byline-font-family"
},
{
"name": "--instui-component-byline-large"
},
{
"name": "--instui-component-byline-medium"
},
{
"name": "--instui-component-byline-small"
},
{
"name": "--instui-component-byline-title-font-size"
},
{
"name": "--instui-component-byline-title-font-weight"
},
{
"name": "--instui-component-byline-title-line-height"
},
{
"name": "--instui-component-byline-title-margin"
}
],
"cssPropertiesDeclared": [],
"functions": [],
"animations": [],
"layers": [],
"conditions": [],
"examples": [
"```html\n\n```"
],
"structure": [
{
"selector": ".instui-byline",
"children": [
{
"selector": "[class*=\"-icon-\"]",
"children": [],
"cardinality": "optional"
},
{
"selector": "div",
"children": [
{
"selector": ".title",
"children": []
},
{
"selector": ".description",
"children": []
}
]
}
]
}
],
"see": [],
"annotations": [],
"refs": [],
"decorators": [],
"compat": [
"Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari."
],
"related": [],
"elements": {
"default": {
"any": true,
"allowed": [],
"include": [],
"exclude": [],
"groups": [],
"excludedGroups": []
},
"profiles": {}
},
"source": {
"line": 2128,
"column": 1
}
},
{
"name": "img",
"kind": "component",
"className": ".instui-img",
"summary": "A styled `| Rank | \nTitle | \nYear | \nRating | \n
|---|---|---|---|
| 1 | \nThe Shawshank Redemption | \n1994 | \n9.3 | \n
| 2 | \nThe Godfather | \n1972 | \n9.2 | \n
| 3 | \nThe Godfather: Part II | \n1974 | \n9.0 | \n
- \n
- First item \n
- Second item \n
- Third item \n
\n \n
\n```"
],
"demo": "self:spinner",
"see": [],
"annotations": [],
"refs": [],
"decorators": [],
"compat": [],
"related": [],
"elements": {
"default": {
"any": true,
"allowed": [],
"include": [],
"exclude": [],
"groups": [],
"excludedGroups": []
},
"profiles": {}
},
"source": {
"line": 3444,
"column": 1
}
},
{
"name": "progress",
"kind": "component",
"className": ".instui-progress",
"summary": "A determinate progress bar with a coloured meter, sizes, and an optional value label.",
"remarks": "`.value` is a sibling of `.bar`, both children of the root — mirroring how progress-circle nests its own `.value` part. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `