igniteui-theming 25.0.0 → 25.0.2

package/dist/mcp/json/components/themes.json.js

@@ -1,23 +1,23 @@
 const avatar = { "name": "avatar", "themeFunctionName": "avatar-theme", "description": "Avatar Theme", "primaryTokens": [{ "name": "background", "description": "The avatar background color." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The background color used of the avatar. PRIMARY - derives color, icon-color." }, { "name": "color", "type": "Color", "description": "The text color used of the avatar. Auto-derived from background." }, { "name": "icon-color", "type": "Color", "description": "The icon color used of the avatar. Auto-derived from background." }, { "name": "border-radius", "type": "Number", "description": "The border-radius used of the avatar." }, { "name": "size", "type": "Number", "description": "The size of the avatar." }] };
-const badge = { "name": "badge", "themeFunctionName": "badge-theme", "description": "Badge Theme", "primaryTokens": [{ "name": "background-color", "description": "The badge background color." }], "primaryTokensSummary": "Setting just `$background-color` will create a complete badge theme with proper text/icon contrast.", "tokens": [{ "name": "icon-color", "type": "Color", "description": "The icon color used. Auto-derived from background-color." }, { "name": "text-color", "type": "Color", "description": "The text color used. Auto-derived from background-color." }, { "name": "border-color", "type": "Color", "description": "The border color used." }, { "name": "background-color", "type": "Color", "description": "The background color used. PRIMARY - derives icon-color and text-color." }, { "name": "shadow", "type": "box-shadow", "description": "Sets a shadow to be used for the badge." }, { "name": "border-radius", "type": "Number", "description": "The border radius used for badge component." }, { "name": "size", "type": "Number", "description": "The size of the badge component." }, { "name": "dot-size", "type": "Number", "description": "The size of the dot type badge." }] };
+const badge = { "name": "badge", "themeFunctionName": "badge-theme", "description": "Badge Theme", "primaryTokens": [{ "name": "background-color", "description": "The badge background color." }], "primaryTokensSummary": "Setting just `$background-color` will create a complete badge theme with proper text/icon contrast.", "tokens": [{ "name": "icon-color", "type": "Color", "description": "The icon color used. Auto-derived from background-color." }, { "name": "text-color", "type": "Color", "description": "The text color used. Auto-derived from background-color." }, { "name": "border-color", "type": "Color", "description": "The border color used." }, { "name": "background-color", "type": "Color", "description": "The background color used. PRIMARY - derives icon-color and text-color." }, { "name": "shadow", "type": "List", "description": "Sets a shadow to be used for the badge." }, { "name": "border-radius", "type": "Number", "description": "The border radius used for badge component." }, { "name": "size", "type": "Number", "description": "The size of the badge component." }, { "name": "dot-size", "type": "Number", "description": "The size of the dot type badge." }] };
 const banner = { "name": "banner", "themeFunctionName": "banner-theme", "description": "Banner Theme", "primaryTokens": [{ "name": "banner-background", "description": "The banner background color." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "banner-background", "type": "Color", "description": "The color used for the banner background. PRIMARY - derives message and illustration colors." }, { "name": "banner-message-color", "type": "Color", "description": "The color used for the banner label. Auto-derived from banner-background." }, { "name": "banner-border-color", "type": "Color", "description": "The color used for the banner border." }, { "name": "banner-illustration-color", "type": "Color", "description": "The color used for the banner illustration. Auto-derived from banner-background." }, { "name": "border-radius", "type": "Number", "description": "The border-radius for the banner.\n" }] };
 const button = { "name": "button", "themeFunctionName": "button-theme", "description": "Button Theme", "primaryTokens": [{ "name": "background", "description": "The main button background." }, { "name": "hover-background", "description": "Hover state background." }, { "name": "focus-background", "description": "Focus state background." }], "primaryTokensSummary": "Setting just `$background` will create a properly contrasted button.", "tokens": [{ "name": "background", "type": "Color", "description": "The background color of the button. PRIMARY - derives foreground and icon-color." }, { "name": "foreground", "type": "Color", "description": "The text color of the button. Auto-derived from background." }, { "name": "icon-color", "type": "Color", "description": "The icon color in the button. Auto-derived from background." }, { "name": "icon-color-hover", "type": "Color", "description": "The icon color in the button on hover. Auto-derived from hover-foreground." }, { "name": "hover-background", "type": "Color", "description": "The hover background color of the button." }, { "name": "hover-foreground", "type": "Color", "description": "The hover text color of the button. Auto-derived from hover-background." }, { "name": "focus-background", "type": "Color", "description": "The focus background color of the button." }, { "name": "focus-foreground", "type": "Color", "description": "The focus text color of the button. Auto-derived from focus-background." }, { "name": "focus-hover-background", "type": "Color", "description": "The background color on focus hovered state of the button." }, { "name": "focus-hover-foreground", "type": "Color", "description": "The text color on focus hovered state of the button. Auto-derived from focus-hover-background." }, { "name": "focus-visible-background", "type": "Color", "description": "The focus-visible background color of the button. Auto-derived from focus-background." }, { "name": "focus-visible-foreground", "type": "Color", "description": "The focus-visible text color of the button. Auto-derived from focus-visible-background." }, { "name": "active-background", "type": "Color", "description": "The active background of the button." }, { "name": "active-foreground", "type": "Color", "description": "The active text color of the button." }, { "name": "border-radius", "type": "List", "description": "The border radius of the button." }, { "name": "border-color", "type": "Color", "description": "The border color of the button." }, { "name": "hover-border-color", "type": "Color", "description": "The hover border color of the button." }, { "name": "focus-border-color", "type": "Color", "description": "The focus border color of the button." }, { "name": "focus-visible-border-color", "type": "Color", "description": "The focus-visible border color of the button. Auto-derived from focus-border-color." }, { "name": "active-border-color", "type": "Color", "description": "The active border color of the button." }, { "name": "shadow-color", "type": "Color", "description": "The shadow color of the button." }, { "name": "resting-shadow", "type": "Color", "description": "The shadow of the button in its idle state." }, { "name": "hover-shadow", "type": "Color", "description": "The shadow of the button in its hover state." }, { "name": "focus-shadow", "type": "Color", "description": "The shadow of the button in its focus state." }, { "name": "active-shadow", "type": "Color", "description": "The shadow of the button in its active state." }, { "name": "disabled-background", "type": "Color", "description": "The disabled background color of the button." }, { "name": "disabled-foreground", "type": "Color", "description": "The disabled text color of the button." }, { "name": "disabled-icon-color", "type": "Color", "description": "The disabled icon color of the button." }, { "name": "disabled-border-color", "type": "Color", "description": "The disabled border color of the button.\n" }] };
 const calendar = /* @__PURE__ */ JSON.parse('{"name":"calendar","themeFunctionName":"calendar-theme","description":"Calendar Theme","primaryTokens":[{"name":"header-background","description":"The main accent color."},{"name":"content-background","description":"The calendar body background."}],"primaryTokensSummary":"Text and icon colors are auto-calculated for contrast.","tokens":[{"name":"size","type":"Number","description":"Size of days, months, and years views."},{"name":"inner-size","type":"Number","description":"Inner size for calendar elements."},{"name":"weekday-color","type":"Color","description":"Color for weekday labels. Auto-derived from content-background."},{"name":"actions-divider-color","type":"Color","description":"Divider color for date-picker actions."},{"name":"border-radius","type":"List","description":"Border radius for calendar container."},{"name":"content-background","type":"Color","description":"Background color for calendar. PRIMARY - derives content-foreground, inactive-color, date-hover colors, week-number colors."},{"name":"border-color","type":"Color","description":"Border color for calendar container."},{"name":"header-background","type":"Color","description":"Header background color. PRIMARY - derives header-foreground and most accent/selection colors."},{"name":"header-foreground","type":"Color","description":"Header foreground color. Auto-derived from header-background."},{"name":"picker-foreground","type":"Color","description":"Foreground for the calendar picker. Auto-derived from picker-background."},{"name":"picker-background","type":"Color","description":"Background for the calendar picker."},{"name":"picker-hover-foreground","type":"Color","description":":Hover foreground for the calendar picker. Auto-derived from header-background."},{"name":"picker-focus-foreground","type":"Color","description":":Focus foreground for the calendar picker. Auto-derived from picker-hover-foreground."},{"name":"navigation-color","type":"Color","description":"Icon color for month navigation. Auto-derived from picker-background."},{"name":"navigation-hover-color","type":"Color","description":":Hover color for navigation icons. Auto-derived from picker-hover-foreground."},{"name":"navigation-focus-color","type":"Color","description":":Focus color for navigation icons. Auto-derived from navigation-hover-color."},{"name":"ym-border-radius","type":"List","description":"Border radius for year/month views."},{"name":"ym-hover-foreground","type":"Color","description":":Hover foreground for year/month. Auto-derived from ym-hover-background."},{"name":"ym-hover-background","type":"Color","description":":Hover background for year/month. Auto-derived from date-hover-background."},{"name":"ym-current-outline-color","type":"Color","description":"Outline color for current year/month. Auto-derived from date-current-border-color."},{"name":"ym-current-outline-hover-color","type":"Color","description":":Hover outline color for current year/month."},{"name":"ym-current-outline-focus-color","type":"Color","description":":Focus outline color for current year/month."},{"name":"ym-current-background","type":"Color","description":"Background for current year/month."},{"name":"ym-current-foreground","type":"Color","description":"Foreground for current year/month. Auto-derived from ym-current-background."},{"name":"ym-current-hover-foreground","type":"Color","description":":Hover foreground for current year/month."},{"name":"ym-current-hover-background","type":"Color","description":":Hover background for current year/month."},{"name":"ym-selected-outline-color","type":"Color","description":"Outline color for selected year/month."},{"name":"ym-selected-hover-outline-color","type":"Color","description":":Hover outline color for selected year/month."},{"name":"ym-selected-focus-outline-color","type":"Color","description":":Focus outline color for selected year/month."},{"name":"ym-selected-foreground","type":"Color","description":"Foreground for selected year/month. Auto-derived from ym-selected-background."},{"name":"ym-selected-background","type":"Color","description":"Background for selected year/month. Auto-derived from header-background."},{"name":"ym-selected-hover-foreground","type":"Color","description":":Hover foreground for selected year/month."},{"name":"ym-selected-hover-background","type":"Color","description":":Hover background for selected year/month."},{"name":"ym-selected-current-outline-color","type":"Color","description":"Outline color for selected current year/month."},{"name":"ym-selected-current-outline-hover-color","type":"Color","description":":Hover outline color for selected current year/month."},{"name":"ym-selected-current-outline-focus-color","type":"Color","description":":Focus outline color for selected current year/month."},{"name":"ym-selected-current-foreground","type":"Color","description":"Foreground for selected current year/month."},{"name":"ym-selected-current-background","type":"Color","description":"Background for selected current year/month."},{"name":"ym-selected-current-hover-foreground","type":"Color","description":":Hover foreground for selected current year/month."},{"name":"ym-selected-current-hover-background","type":"Color","description":":Hover background for selected current year/month."},{"name":"week-number-border-radius","type":"List","description":"Border radius for week number column."},{"name":"week-number-foreground","type":"Color","description":"Foreground for week number column. Auto-derived from week-number-background."},{"name":"week-number-background","type":"Color","description":"Background for week number column. Auto-derived from content-background."},{"name":"content-foreground","type":"Color","description":"The foreground color for idle dates. Auto-derived from content-background."},{"name":"weekend-color","type":"Color","description":"Color for weekend days. Auto-derived from content-foreground."},{"name":"inactive-color","type":"Color","description":"Color for inactive dates (outside current month). Auto-derived from content-background."},{"name":"date-border-radius","type":"List","description":"Border radius for date cells."},{"name":"date-border-color","type":"Color","description":"Border color for date cells."},{"name":"date-hover-border-color","type":"Color","description":":Hover border color for date cells."},{"name":"date-focus-border-color","type":"Color","description":":Focus border color for date cells."},{"name":"date-hover-background","type":"Color","description":":Hover background for date cells. Auto-derived from content-background."},{"name":"date-focus-background","type":"Color","description":":Focus background for date cells. Auto-derived from date-hover-background."},{"name":"date-hover-foreground","type":"Color","description":":Hover foreground for date cells. Auto-derived from date-hover-background."},{"name":"date-focus-foreground","type":"Color","description":":Focus foreground for date cells. Auto-derived from date-hover-foreground."},{"name":"date-selected-border-color","type":"Color","description":"Border color for selected date."},{"name":"date-selected-hover-border-color","type":"Color","description":":Hover border color for selected date."},{"name":"date-selected-focus-border-color","type":"Color","description":":Focus border color for selected date."},{"name":"date-selected-background","type":"Color","description":"Background for selected date. Auto-derived from header-background."},{"name":"date-selected-foreground","type":"Color","description":"Foreground for selected date. Auto-derived from date-selected-background."},{"name":"date-selected-hover-background","type":"Color","description":":Hover background for selected date. Auto-derived from date-selected-background."},{"name":"date-selected-focus-background","type":"Color","description":":Focus background for selected date."},{"name":"date-selected-hover-foreground","type":"Color","description":":Hover foreground for selected date."},{"name":"date-selected-focus-foreground","type":"Color","description":":Focus foreground for selected date."},{"name":"date-selected-special-border-color","type":"Color","description":"Border color for selected special date."},{"name":"date-selected-special-hover-border-color","type":"Color","description":":Hover border color for selected special date."},{"name":"date-selected-special-focus-border-color","type":"Color","description":":Focus border color for selected special date."},{"name":"date-selected-special-background","type":"Color","description":"Background for selected special date."},{"name":"date-selected-special-foreground","type":"Color","description":"Foreground for selected special date."},{"name":"date-selected-special-hover-background","type":"Color","description":":Hover background for selected special date."},{"name":"date-selected-special-focus-background","type":"Color","description":":Focus background for selected special date."},{"name":"date-selected-special-hover-foreground","type":"Color","description":":Hover foreground for selected special date."},{"name":"date-selected-special-focus-foreground","type":"Color","description":":Focus foreground for selected special date."},{"name":"date-range-border-radius","type":"List","description":"Border radius for date range selection."},{"name":"date-range-border-color","type":"Color","description":"Border color for date range selection."},{"name":"date-range-preview-border-color","type":"Color","description":"Preview border color for date range selection."},{"name":"date-selected-range-foreground","type":"Color","description":"Foreground for dates in selected range."},{"name":"date-selected-range-background","type":"Color","description":"Background for dates in selected range."},{"name":"date-selected-range-hover-foreground","type":"Color","description":":Hover foreground for dates in selected range."},{"name":"date-selected-range-hover-background","type":"Color","description":":Hover background for dates in selected range."},{"name":"date-selected-range-focus-foreground","type":"Color","description":":Focus foreground for dates in selected range."},{"name":"date-selected-range-focus-background","type":"Color","description":":Focus background for dates in selected range."},{"name":"date-selected-current-range-foreground","type":"Color","description":"Foreground for current date in selected range."},{"name":"date-selected-current-range-background","type":"Color","description":"Background for current date in selected range."},{"name":"date-selected-current-range-hover-foreground","type":"Color","description":":Hover foreground for current date in selected range."},{"name":"date-selected-current-range-hover-background","type":"Color","description":":Hover background for current date in selected range."},{"name":"date-selected-current-range-focus-foreground","type":"Color","description":":Focus foreground for current date in selected range."},{"name":"date-selected-current-range-focus-background","type":"Color","description":":Focus background for current date in selected range."},{"name":"date-current-border-radius","type":"List","description":"Border radius for current date."},{"name":"date-current-border-color","type":"Color","description":"Border color for current date."},{"name":"date-current-hover-border-color","type":"Color","description":":Hover border color for current date."},{"name":"date-current-focus-border-color","type":"Color","description":":Focus border color for current date."},{"name":"date-current-background","type":"Color","description":"Background for current date."},{"name":"date-current-foreground","type":"Color","description":"Foreground for current date."},{"name":"date-current-hover-background","type":"Color","description":":Hover background for current date."},{"name":"date-current-focus-background","type":"Color","description":":Focus background for current date."},{"name":"date-current-hover-foreground","type":"Color","description":":Hover foreground for current date."},{"name":"date-current-focus-foreground","type":"Color","description":":Focus foreground for current date."},{"name":"date-selected-current-border-color","type":"Color","description":"Border color for selected current date."},{"name":"date-selected-current-hover-border-color","type":"Color","description":":Hover border color for selected current date."},{"name":"date-selected-current-focus-border-color","type":"Color","description":":Focus border color for selected current date."},{"name":"date-selected-current-background","type":"Color","description":"Background for selected current date."},{"name":"date-selected-current-hover-background","type":"Color","description":":Hover background for selected current date."},{"name":"date-selected-current-focus-background","type":"Color","description":":Focus background for selected current date."},{"name":"date-selected-current-foreground","type":"Color","description":"Foreground for selected current date."},{"name":"date-selected-current-hover-foreground","type":"Color","description":":Hover foreground for selected current date."},{"name":"date-selected-current-focus-foreground","type":"Color","description":":Focus foreground for selected current date."},{"name":"date-special-border-radius","type":"List","description":"Border radius for special date."},{"name":"date-special-border-color","type":"Color","description":"Border color for special date."},{"name":"date-special-hover-border-color","type":"Color","description":":Hover border color for special date."},{"name":"date-special-focus-border-color","type":"Color","description":":Focus border color for special date."},{"name":"date-special-foreground","type":"Color","description":"Foreground for special date. Auto-derived from header-background."},{"name":"date-special-background","type":"Color","description":"Background for special date."},{"name":"date-special-hover-foreground","type":"Color","description":":Hover foreground for special date."},{"name":"date-special-hover-background","type":"Color","description":":Hover background for special date."},{"name":"date-special-focus-foreground","type":"Color","description":":Focus foreground for special date."},{"name":"date-special-focus-background","type":"Color","description":":Focus background for special date."},{"name":"date-special-range-border-color","type":"Color","description":"Border color for special date in range."},{"name":"date-special-range-hover-border-color","type":"Color","description":":Hover border color for special date in range."},{"name":"date-special-range-focus-border-color","type":"Color","description":":Focus border color for special date in range."},{"name":"date-special-range-foreground","type":"Color","description":"Foreground for special date in range."},{"name":"date-special-range-hover-foreground","type":"Color","description":":Hover foreground for special date in range."},{"name":"date-special-range-focus-foreground","type":"Color","description":":Focus foreground for special date in range."},{"name":"date-special-range-background","type":"Color","description":"Background for special date in range."},{"name":"date-special-range-hover-background","type":"Color","description":":Hover background for special date in range."},{"name":"date-special-range-focus-background","type":"Color","description":":Focus background for special date in range."},{"name":"date-disabled-foreground","type":"Color","description":"Foreground for disabled dates."},{"name":"date-disabled-range-foreground","type":"Color","description":"Foreground for disabled dates in selected range."}]}');
-const card = { "name": "card", "themeFunctionName": "card-theme", "description": "Card Theme", "primaryTokens": [{ "name": "background", "description": "The card background color." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The card background color. PRIMARY - derives all text colors." }, { "name": "outline-color", "type": "Color", "description": "The color of the outline for outlined type cards." }, { "name": "header-text-color", "type": "Color", "description": "The text color of the card title. Auto-derived from background." }, { "name": "subtitle-text-color", "type": "Color", "description": "The text color of the card subtitle. Auto-derived from background (muted)." }, { "name": "content-text-color", "type": "Color", "description": "The text color of the card content. Auto-derived from background (muted)." }, { "name": "actions-text-color", "type": "Color", "description": "The text color of the card buttons. Auto-derived from background." }, { "name": "resting-shadow", "type": "box-shadow", "description": "The shadow of the card in its resting state." }, { "name": "hover-shadow", "type": "box-shadow", "description": "The shadow of the card in its hover state." }, { "name": "border-radius", "type": "List", "description": "The border radius used for card component.\n" }] };
-const carousel = { "name": "carousel", "themeFunctionName": "carousel-theme", "description": "Carousel Theme", "primaryTokens": [{ "name": "button-background", "description": "The nav button background." }, { "name": "indicator-background", "description": "The indicator container background." }], "primaryTokensSummary": "Button colors cascade from button-background through hover and disabled states.", "tokens": [{ "name": "slide-background", "type": "Color", "description": "The slide background color." }, { "name": "button-background", "type": "Color", "description": "The previous/next buttons idle background color. PRIMARY - derives arrow, hover, disabled, focus colors." }, { "name": "button-hover-background", "type": "Color", "description": "The previous/next buttons hover background color. Auto-derived from button-background." }, { "name": "button-disabled-background", "type": "Color", "description": "The previous/next buttons disabled background color. Auto-derived from button-background." }, { "name": "button-arrow-color", "type": "Color", "description": "The previous/next buttons idle arrow color. Auto-derived from button-background." }, { "name": "button-hover-arrow-color", "type": "Color", "description": "The previous/next buttons hover arrow color. Auto-derived from button-hover-background." }, { "name": "button-disabled-arrow-color", "type": "Color", "description": "The previous/next buttons disabled arrow color. Auto-derived from button-disabled-background." }, { "name": "button-border-color", "type": "Color", "description": "The previous/next buttons idle border color. Auto-derived from button-background (indigo)." }, { "name": "button-hover-border-color", "type": "Color", "description": "The previous/next buttons hover border color. Auto-derived from button-border-color." }, { "name": "button-focus-border-color", "type": "Color", "description": "The navigation buttons border color on focus. Auto-derived from button-focus-arrow-color or button-background." }, { "name": "button-disabled-border-color", "type": "Color", "description": "The previous/next buttons disabled border color." }, { "name": "indicator-background", "type": "Color", "description": "The indicators container background color. PRIMARY - derives dot, border, active, focus colors." }, { "name": "label-indicator-background", "type": "Color", "description": "The label indicator container background color." }, { "name": "indicator-dot-color", "type": "Color", "description": "The idle indicator dot color. Auto-derived from indicator-background." }, { "name": "indicator-hover-dot-color", "type": "Color", "description": "The hover indicator dot color. Auto-derived from indicator-dot-color." }, { "name": "indicator-focus-color", "type": "Color", "description": "The indicators border and dot color on focus. Auto-derived from indicator-background or button-background." }, { "name": "indicator-border-color", "type": "Color", "description": "The idle indicator border color. Auto-derived from indicator-background or indicator-dot-color." }, { "name": "indicator-active-dot-color", "type": "Color", "description": "The active indicator dot color. Auto-derived from indicator-background or button-background." }, { "name": "indicator-active-border-color", "type": "Color", "description": "The active indicator border color. Auto-derived from indicator-active-dot-color." }, { "name": "indicator-active-hover-dot-color", "type": "Color", "description": "The active indicator dot color on hover. Auto-derived from indicator-active-dot-color." }, { "name": "button-shadow", "type": "box-shadow", "description": "Shadow underneath the previous/next buttons." }, { "name": "border-radius", "type": "List", "description": "The border radius used for carousel component.\n" }] };
+const card = { "name": "card", "themeFunctionName": "card-theme", "description": "Card Theme", "primaryTokens": [{ "name": "background", "description": "The card background color." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The card background color. PRIMARY - derives all text colors." }, { "name": "outline-color", "type": "Color", "description": "The color of the outline for outlined type cards." }, { "name": "header-text-color", "type": "Color", "description": "The text color of the card title. Auto-derived from background." }, { "name": "subtitle-text-color", "type": "Color", "description": "The text color of the card subtitle. Auto-derived from background (muted)." }, { "name": "content-text-color", "type": "Color", "description": "The text color of the card content. Auto-derived from background (muted)." }, { "name": "actions-text-color", "type": "Color", "description": "The text color of the card buttons. Auto-derived from background." }, { "name": "resting-shadow", "type": "List", "description": "The shadow of the card in its resting state." }, { "name": "hover-shadow", "type": "List", "description": "The shadow of the card in its hover state." }, { "name": "border-radius", "type": "List", "description": "The border radius used for card component.\n" }] };
+const carousel = { "name": "carousel", "themeFunctionName": "carousel-theme", "description": "Carousel Theme", "primaryTokens": [{ "name": "button-background", "description": "The nav button background." }, { "name": "indicator-background", "description": "The indicator container background." }], "primaryTokensSummary": "Button colors cascade from button-background through hover and disabled states.", "tokens": [{ "name": "slide-background", "type": "Color", "description": "The slide background color." }, { "name": "button-background", "type": "Color", "description": "The previous/next buttons idle background color. PRIMARY - derives arrow, hover, disabled, focus colors." }, { "name": "button-hover-background", "type": "Color", "description": "The previous/next buttons hover background color. Auto-derived from button-background." }, { "name": "button-disabled-background", "type": "Color", "description": "The previous/next buttons disabled background color. Auto-derived from button-background." }, { "name": "button-arrow-color", "type": "Color", "description": "The previous/next buttons idle arrow color. Auto-derived from button-background." }, { "name": "button-hover-arrow-color", "type": "Color", "description": "The previous/next buttons hover arrow color. Auto-derived from button-hover-background." }, { "name": "button-disabled-arrow-color", "type": "Color", "description": "The previous/next buttons disabled arrow color. Auto-derived from button-disabled-background." }, { "name": "button-border-color", "type": "Color", "description": "The previous/next buttons idle border color. Auto-derived from button-background (indigo)." }, { "name": "button-hover-border-color", "type": "Color", "description": "The previous/next buttons hover border color. Auto-derived from button-border-color." }, { "name": "button-focus-border-color", "type": "Color", "description": "The navigation buttons border color on focus. Auto-derived from button-focus-arrow-color or button-background." }, { "name": "button-disabled-border-color", "type": "Color", "description": "The previous/next buttons disabled border color." }, { "name": "indicator-background", "type": "Color", "description": "The indicators container background color. PRIMARY - derives dot, border, active, focus colors." }, { "name": "label-indicator-background", "type": "Color", "description": "The label indicator container background color." }, { "name": "indicator-dot-color", "type": "Color", "description": "The idle indicator dot color. Auto-derived from indicator-background." }, { "name": "indicator-hover-dot-color", "type": "Color", "description": "The hover indicator dot color. Auto-derived from indicator-dot-color." }, { "name": "indicator-focus-color", "type": "Color", "description": "The indicators border and dot color on focus. Auto-derived from indicator-background or button-background." }, { "name": "indicator-border-color", "type": "Color", "description": "The idle indicator border color. Auto-derived from indicator-background or indicator-dot-color." }, { "name": "indicator-active-dot-color", "type": "Color", "description": "The active indicator dot color. Auto-derived from indicator-background or button-background." }, { "name": "indicator-active-border-color", "type": "Color", "description": "The active indicator border color. Auto-derived from indicator-active-dot-color." }, { "name": "indicator-active-hover-dot-color", "type": "Color", "description": "The active indicator dot color on hover. Auto-derived from indicator-active-dot-color." }, { "name": "button-shadow", "type": "List", "description": "Shadow underneath the previous/next buttons." }, { "name": "border-radius", "type": "List", "description": "The border radius used for carousel component.\n" }] };
 const chat = { "name": "chat", "themeFunctionName": "chat-theme", "description": "Chat Theme", "primaryTokens": [{ "name": "header-background", "description": "The background color of the chat header." }, { "name": "message-background", "description": "The background color of message bubbles." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The background color of the chat component." }, { "name": "header-background", "type": "Color", "description": "The background color of the chat header. PRIMARY - derives header-color." }, { "name": "header-color", "type": "Color", "description": "The text color of the chat header. Auto-derived from header-background." }, { "name": "header-border", "type": "Color", "description": "The color used for the chat header border." }, { "name": "message-background", "type": "Color", "description": "The background color of the sent message bubble. PRIMARY - derives message-color, message-actions-color." }, { "name": "message-color", "type": "Color", "description": "The text color of the chat messages. Auto-derived from message-background." }, { "name": "message-actions-color", "type": "Color", "description": "The icon color of the chat message actions. Auto-derived from message-color." }, { "name": "file-background", "type": "Color", "description": "The background color of the image message container." }, { "name": "file-icon-color", "type": "Color", "description": "The color of the attached file icon." }, { "name": "file-icon-accent-color", "type": "Color", "description": "The accent color of the attached file icon." }, { "name": "image-background", "type": "Color", "description": "The background color of the image message container." }, { "name": "image-border", "type": "Color", "description": "The border color of the image message container." }, { "name": "image-attachment-icon", "type": "Color", "description": "The color of the message attachment icon." }, { "name": "chat-input-border", "type": "Color", "description": "The border color of the chat input area." }, { "name": "progress-indicator-color", "type": "Color", "description": "The color of the progress indicator in the chat component." }, { "name": "code-background", "type": "Color", "description": "The background color of the code snippets in the chat component." }, { "name": "code-border", "type": "Color", "description": "The border color of the code snippets in the chat component." }] };
 const checkbox = { "name": "checkbox", "themeFunctionName": "checkbox-theme", "description": "Checkbox Theme", "primaryTokens": [{ "name": "fill-color", "description": "The checked state border and fill color." }, { "name": "empty-color", "description": "The unchecked border color." }, { "name": "error-color", "description": "The invalid state color." }], "primaryTokensSummary": "Setting just `$fill-color` will theme all checked states consistently.", "tokens": [{ "name": "label-color", "type": "Color", "description": "The text color used for the label text." }, { "name": "label-color-hover", "type": "Color", "description": "The text color used for the label text on hover. Auto-derived from label-color." }, { "name": "empty-color", "type": "Color", "description": "The unchecked border color. PRIMARY for unchecked states." }, { "name": "empty-color-hover", "type": "Color", "description": "The unchecked border color on hover. Auto-derived from empty-color." }, { "name": "empty-fill-color", "type": "Color", "description": "The unchecked fill color." }, { "name": "fill-color", "type": "Color", "description": "The checked border and fill colors. PRIMARY - derives tick-color, focus colors." }, { "name": "fill-color-hover", "type": "Color", "description": "The checked border and fill colors on hover. Auto-derived from fill-color." }, { "name": "tick-color", "type": "Color", "description": "The checked mark color. Auto-derived from fill-color (contrast)." }, { "name": "tick-color-hover", "type": "Color", "description": "The checked mark color on hover." }, { "name": "tick-width", "type": "Number", "description": "The checked mark width." }, { "name": "disabled-color", "type": "Color", "description": "The disabled border and fill colors." }, { "name": "disabled-tick-color", "type": "Color", "description": "The checked mark color in disabled state." }, { "name": "disabled-indeterminate-color", "type": "Color", "description": "The disabled border and fill colors in indeterminate state. Auto-derived from fill-color." }, { "name": "disabled-color-label", "type": "Color", "description": "The disabled label color." }, { "name": "border-radius", "type": "List", "description": "The border radius used for checkbox component." }, { "name": "border-radius-ripple", "type": "List", "description": "The border radius used for checkbox ripple." }, { "name": "focus-outline-color", "type": "Color", "description": "The focus outlined color. Auto-derived from empty-color (indigo) or fill-color (bootstrap)." }, { "name": "focus-outline-color-focused", "type": "Color", "description": "The focus outlined color for focused state. Auto-derived from fill-color (indigo)." }, { "name": "focus-border-color", "type": "Color", "description": "The focus border color. Auto-derived from fill-color." }, { "name": "error-color", "type": "Color", "description": "The border and fill colors in invalid state. PRIMARY for error states." }, { "name": "error-color-hover", "type": "Color", "description": "The border and fill colors in invalid state on hover. Auto-derived from error-color." }, { "name": "focus-outline-color-error", "type": "Color", "description": "The focus outline error color. Auto-derived from error-color.\nSet to light when the surrounding area is dark.\n" }] };
-const chip = { "name": "chip", "themeFunctionName": "chip-theme", "description": "Chip Theme", "primaryTokens": [{ "name": "background", "description": "The main chip background." }, { "name": "selected-background", "description": "Selected state background." }], "primaryTokensSummary": "Setting just `$background` will create a complete chip theme with all states properly derived.", "tokens": [{ "name": "border-radius", "type": "List", "description": "The chip border-radius.\n" }, { "name": "text-color", "type": "Color", "description": "The chip text color. Auto-derived from background." }, { "name": "background", "type": "Color", "description": "The chip background color. PRIMARY - derives text-color, border-color, hover/focus states." }, { "name": "border-color", "type": "Color", "description": "The chip border color. Auto-derived from background.\n" }, { "name": "disabled-text-color", "type": "Color", "description": "The disabled chip text color." }, { "name": "disabled-background", "type": "Color", "description": "The disabled chip background color." }, { "name": "disabled-border-color", "type": "Color", "description": "The disabled chip border color.\n" }, { "name": "ghost-background", "type": "Color", "description": "The chip ghost background color." }, { "name": "ghost-text-color", "type": "Color", "description": "The chip ghost text color." }, { "name": "ghost-shadow", "type": "box-shadow", "description": "The chip ghost shadow.\n" }, { "name": "hover-text-color", "type": "Color", "description": "The chip text hover color. Auto-derived from hover-background." }, { "name": "hover-background", "type": "Color", "description": "The chip hover background color. Auto-derived from background." }, { "name": "hover-border-color", "type": "Color", "description": "The chip hover border color. Auto-derived from hover-background.\n" }, { "name": "focus-text-color", "type": "Color", "description": "The chip text focus color. Auto-derived from focus-background." }, { "name": "focus-background", "type": "Color", "description": "The chip focus background color. Auto-derived from background." }, { "name": "focus-border-color", "type": "color", "description": "The chip focus border color. Auto-derived from focus-background.\n" }, { "name": "selected-text-color", "type": "color", "description": "The selected chip text color. Auto-derived from selected-background." }, { "name": "selected-background", "type": "color", "description": "The selected chip background color. Auto-derived from background." }, { "name": "selected-border-color", "type": "color", "description": "The selected chip border color. Auto-derived from selected-background.\n" }, { "name": "hover-selected-text-color", "type": "color", "description": "The selected chip hover text color. Auto-derived from hover-selected-background." }, { "name": "hover-selected-background", "type": "color", "description": "The selected chip hover background color. Auto-derived from selected-background." }, { "name": "hover-selected-border-color", "type": "color", "description": "The selected chip hover border color. Auto-derived from hover-selected-background.\n" }, { "name": "focus-selected-text-color", "type": "color", "description": "The selected chip text focus color. Auto-derived from focus-selected-background." }, { "name": "focus-selected-background", "type": "color", "description": "The selected chip focus background color. Auto-derived from selected-background." }, { "name": "focus-selected-border-color", "type": "color", "description": "The selected chip focus border color. Auto-derived from focus-selected-background.\n" }, { "name": "remove-icon-color", "type": "color", "description": "The remove icon color for the chip." }, { "name": "remove-icon-color-focus", "type": "color", "description": "The remove icon color on focus for the chip.\n" }] };
+const chip = { "name": "chip", "themeFunctionName": "chip-theme", "description": "Chip Theme", "primaryTokens": [{ "name": "background", "description": "The main chip background." }, { "name": "selected-background", "description": "Selected state background." }], "primaryTokensSummary": "Setting just `$background` will create a complete chip theme with all states properly derived.", "tokens": [{ "name": "border-radius", "type": "List", "description": "The chip border-radius.\n" }, { "name": "text-color", "type": "Color", "description": "The chip text color. Auto-derived from background." }, { "name": "background", "type": "Color", "description": "The chip background color. PRIMARY - derives text-color, border-color, hover/focus states." }, { "name": "border-color", "type": "Color", "description": "The chip border color. Auto-derived from background.\n" }, { "name": "disabled-text-color", "type": "Color", "description": "The disabled chip text color." }, { "name": "disabled-background", "type": "Color", "description": "The disabled chip background color." }, { "name": "disabled-border-color", "type": "Color", "description": "The disabled chip border color.\n" }, { "name": "ghost-background", "type": "Color", "description": "The chip ghost background color." }, { "name": "ghost-text-color", "type": "Color", "description": "The chip ghost text color." }, { "name": "ghost-shadow", "type": "List", "description": "The chip ghost shadow.\n" }, { "name": "hover-text-color", "type": "Color", "description": "The chip text hover color. Auto-derived from hover-background." }, { "name": "hover-background", "type": "Color", "description": "The chip hover background color. Auto-derived from background." }, { "name": "hover-border-color", "type": "Color", "description": "The chip hover border color. Auto-derived from hover-background.\n" }, { "name": "focus-text-color", "type": "Color", "description": "The chip text focus color. Auto-derived from focus-background." }, { "name": "focus-background", "type": "Color", "description": "The chip focus background color. Auto-derived from background." }, { "name": "focus-border-color", "type": "color", "description": "The chip focus border color. Auto-derived from focus-background.\n" }, { "name": "selected-text-color", "type": "color", "description": "The selected chip text color. Auto-derived from selected-background." }, { "name": "selected-background", "type": "color", "description": "The selected chip background color. Auto-derived from background." }, { "name": "selected-border-color", "type": "color", "description": "The selected chip border color. Auto-derived from selected-background.\n" }, { "name": "hover-selected-text-color", "type": "color", "description": "The selected chip hover text color. Auto-derived from hover-selected-background." }, { "name": "hover-selected-background", "type": "color", "description": "The selected chip hover background color. Auto-derived from selected-background." }, { "name": "hover-selected-border-color", "type": "color", "description": "The selected chip hover border color. Auto-derived from hover-selected-background.\n" }, { "name": "focus-selected-text-color", "type": "color", "description": "The selected chip text focus color. Auto-derived from focus-selected-background." }, { "name": "focus-selected-background", "type": "color", "description": "The selected chip focus background color. Auto-derived from selected-background." }, { "name": "focus-selected-border-color", "type": "color", "description": "The selected chip focus border color. Auto-derived from focus-selected-background.\n" }, { "name": "remove-icon-color", "type": "color", "description": "The remove icon color for the chip." }, { "name": "remove-icon-color-focus", "type": "color", "description": "The remove icon color on focus for the chip.\n" }] };
 const combo = { "name": "combo", "themeFunctionName": "combo-theme", "description": "Combo Theme", "primaryTokens": [{ "name": "toggle-button-background", "description": "The toggle button background." }, { "name": "empty-list-background", "description": "The empty list background." }, { "name": "clear-button-background-focus", "description": "The clear button focus background." }], "primaryTokensSummary": "Toggle button colors cascade from toggle-button-background through focus and disabled states.", "tokens": [{ "name": "search-separator-border-color", "type": "Color", "description": "The combo search box separator color." }, { "name": "empty-list-placeholder-color", "type": "Color", "description": "The combo placeholder text color. Auto-derived from empty-list-background." }, { "name": "empty-list-background", "type": "Color", "description": "The combo list background color. PRIMARY - derives empty-list-placeholder-color." }, { "name": "toggle-button-background", "type": "Color", "description": "The combo toggle button background color. PRIMARY - derives all toggle button colors." }, { "name": "toggle-button-background-focus", "type": "Color", "description": "The combo toggle button background color when the combo is focused in material box variant. Auto-derived from toggle-button-background." }, { "name": "toggle-button-background-focus--border", "type": "Color", "description": "The combo toggle button background color when the combo is focused in material border variant. Auto-derived from toggle-button-background." }, { "name": "toggle-button-background-disabled", "type": "Color", "description": "The combo toggle button background color when the combo is disabled. Auto-derived from toggle-button-background." }, { "name": "toggle-button-foreground", "type": "Color", "description": "The combo toggle button foreground color. Auto-derived from toggle-button-background." }, { "name": "toggle-button-foreground-focus", "type": "Color", "description": "The combo toggle button foreground color when the combo is focused. Auto-derived from toggle-button-background-focus." }, { "name": "toggle-button-foreground-disabled", "type": "Color", "description": "The combo toggle button foreground color when the combo is disabled. Auto-derived from toggle-button-background." }, { "name": "toggle-button-foreground-filled", "type": "Color", "description": "The combo toggle button foreground color when the combo is filled. Auto-derived from toggle-button-background." }, { "name": "clear-button-background", "type": "Color", "description": "The combo clear button background color." }, { "name": "clear-button-background-focus", "type": "Color", "description": "The combo clear button background color when the combo is focused. PRIMARY for clear button focus." }, { "name": "clear-button-foreground", "type": "Color", "description": "The combo clear button foreground color." }, { "name": "clear-button-foreground-focus", "type": "Color", "description": "The combo clear button foreground color when the combo is focused. Auto-derived from clear-button-background-focus." }] };
-const dialog = { "name": "dialog", "themeFunctionName": "dialog-theme", "description": "Dialog Theme", "primaryTokens": [{ "name": "background", "description": "The dialog background color." }], "primaryTokensSummary": "Setting just `$background` will create a complete dialog theme with proper text contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The dialog background color. PRIMARY - derives title-color, message-color, border-color." }, { "name": "title-color", "type": "Color", "description": "The dialog title text color. Auto-derived from background." }, { "name": "message-color", "type": "Color", "description": "The dialog message text color. Auto-derived from background (slightly transparent)." }, { "name": "shadow", "type": "box-shadow", "description": "The shadow used for the dialog." }, { "name": "border-radius", "type": "List", "description": "The border radius used for dialog component." }, { "name": "border-color", "type": "Color", "description": "The border color used for dialog component. Auto-derived from background." }] };
+const dialog = { "name": "dialog", "themeFunctionName": "dialog-theme", "description": "Dialog Theme", "primaryTokens": [{ "name": "background", "description": "The dialog background color." }], "primaryTokensSummary": "Setting just `$background` will create a complete dialog theme with proper text contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The dialog background color. PRIMARY - derives title-color, message-color, border-color." }, { "name": "title-color", "type": "Color", "description": "The dialog title text color. Auto-derived from background." }, { "name": "message-color", "type": "Color", "description": "The dialog message text color. Auto-derived from background (slightly transparent)." }, { "name": "shadow", "type": "List", "description": "The shadow used for the dialog." }, { "name": "border-radius", "type": "List", "description": "The border radius used for dialog component." }, { "name": "border-color", "type": "Color", "description": "The border color used for dialog component. Auto-derived from background." }] };
 const divider = { "name": "divider", "themeFunctionName": "divider-theme", "description": "Divider Theme\n\nThis theme has no automatic token derivation. All tokens are independent.", "primaryTokens": [], "tokens": [{ "name": "color", "type": "Color", "description": "The color of the divider. (Gradients are not supported for dashed dividers)." }, { "name": "inset", "type": "number", "description": "The inset value of the divider." }] };
 const accordion = { "name": "accordion", "themeFunctionName": "accordion-theme", "description": "Accordion Theme", "primaryTokens": [{ "name": "header-background", "description": "The panel header background." }, { "name": "body-background", "description": "The panel body background." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "header-background", "type": "Color", "description": "The panel header background color. PRIMARY - derives header colors, focus, disabled." }, { "name": "header-focus-background", "type": "Color", "description": "The panel header focus background color. Auto-derived from header-background." }, { "name": "header-title-color", "type": "Color", "description": "The panel header title text color. Auto-derived from header-background." }, { "name": "header-description-color", "type": "Color", "description": "The panel header description text color. Auto-derived from header-background (muted)." }, { "name": "header-icon-color", "type": "Color", "description": "The panel header icon color. Auto-derived from header-background." }, { "name": "body-color", "type": "Color", "description": "The panel body text color. Auto-derived from body-background." }, { "name": "body-background", "type": "Color", "description": "The panel body background color. PRIMARY for body - derives body-color." }, { "name": "disabled-text-color", "type": "Color", "description": "The panel disabled text color. Auto-derived from header-background." }, { "name": "disabled-description-color", "type": "Color", "description": "The panel disabled header description text color. Auto-derived from header-background." }, { "name": "expanded-margin", "type": "Number", "description": "The expansion panel margin in expanded state when positioned inside accordion." }, { "name": "border-radius", "type": "List", "description": "The border radius used for expansion-panel component." }] };
-const grid = /* @__PURE__ */ JSON.parse('{"name":"grid","themeFunctionName":"grid-theme","description":"Grid Theme","primaryTokens":[{"name":"header-background","description":"The table header background color."},{"name":"content-background","description":"The table body background color."},{"name":"ghost-header-background","description":"The dragged header background color."},{"name":"group-row-background","description":"The grid group row background color."},{"name":"grouparea-background","description":"The grid group area background color."}],"primaryTokensSummary":"Derived colors are auto-calculated for contrast.","tokens":[{"name":"header-background","type":"Color","description":"The table header background color. PRIMARY - derives header-text-color, header-border-color, and many more."},{"name":"header-text-color","type":"Color","description":"The table header text color. Auto-derived from header-background."},{"name":"header-border-width","type":"String","description":"The border width used for header borders."},{"name":"header-border-style","type":"String","description":"The border style used for header borders."},{"name":"header-border-color","type":"Color","description":"The color used for header borders. Auto-derived from header-background."},{"name":"header-selected-background","type":"Color","description":"The table header background color when selected. Auto-derived from header-background."},{"name":"header-selected-text-color","type":"Color","description":"The table header text color when selected. Auto-derived from header-selected-background."},{"name":"sorted-header-icon-color","type":"Color","description":"The sort icon color when sorted. Auto-derived from header-background."},{"name":"sortable-header-icon-hover-color","type":"color","description":"The icon color on hover when sortable. Auto-derived from sorted-header-icon-color."},{"name":"content-background","type":"Color","description":"The table body background color. PRIMARY - derives content-text-color, row backgrounds, cell backgrounds, borders."},{"name":"content-text-color","type":"Color","description":"The table body text color. Auto-derived from content-background."},{"name":"ghost-header-text-color","type":"Color","description":"The dragged header text color. Auto-derived from ghost-header-background."},{"name":"ghost-header-icon-color","type":"Color","description":"The dragged header icon color. Auto-derived from ghost-header-background."},{"name":"ghost-header-background","type":"Color","description":"The dragged header background color. PRIMARY - derives ghost-header-text-color, ghost-header-icon-color."},{"name":"row-odd-background","type":"Color","description":"The background color of odd rows. Auto-derived from content-background."},{"name":"row-even-background","type":"Color","description":"The background color of even rows. Auto-derived from content-background."},{"name":"row-odd-text-color","type":"Color","description":"The text color of odd rows. Auto-derived from row-odd-background."},{"name":"row-even-text-color","type":"Color","description":"The text color of even rows. Auto-derived from row-even-background."},{"name":"row-selected-background","type":"Color","description":"The selected row background color. Auto-derived from content-background."},{"name":"row-selected-hover-background","type":"Color","description":"The selected row hover background color. Auto-derived from row-selected-background."},{"name":"row-selected-text-color","type":"Color","description":"The selected row text color. Auto-derived from row-selected-background."},{"name":"row-selected-hover-text-color","type":"Color","description":"The selected row hover text color. Auto-derived from row-selected-hover-background."},{"name":"row-hover-background","type":"Color","description":"The hover row background color. Auto-derived from content-background."},{"name":"row-hover-text-color","type":"Color","description":"The hover row text color. Auto-derived from row-hover-background."},{"name":"row-border-color","type":"Color","description":"The row bottom border color. Auto-derived from content-background."},{"name":"pinned-border-width","type":"String","description":"The border width of the pinned border."},{"name":"pinned-border-style","type":"String","description":"The CSS border style of the pinned border."},{"name":"pinned-border-color","type":"Color","description":"The color of the pinned border. Auto-derived from content-background."},{"name":"cell-active-border-color","type":"Color","description":"The border color for the active cell. Auto-derived from content-background."},{"name":"cell-selected-background","type":"Color","description":"The selected cell background color. Auto-derived from content-background."},{"name":"cell-selected-text-color","type":"Color","description":"The selected cell text color. Auto-derived from cell-selected-background."},{"name":"cell-editing-background","type":"Color","description":"The background of the cell being edited. Auto-derived from content-background."},{"name":"cell-editing-foreground","type":"Color","description":"The cell text color in edit mode. Auto-derived from cell-editing-background."},{"name":"cell-editing-focus-foreground","type":"Color","description":"The cell text color in edit mode on focus. Auto-derived from cell-editing-background."},{"name":"cell-edited-value-color","type":"Color","description":"The text color of an edited cell."},{"name":"cell-new-color","type":"Color","description":"The text color of a new cell."},{"name":"cell-disabled-color","type":"Color","description":"The text color of a disabled cell."},{"name":"cell-selected-within-background","type":"Color","description":"The background of selected cell in selected row. Auto-derived from row-selected-background."},{"name":"cell-selected-within-text-color","type":"Color","description":"The color of selected cell in selected row. Auto-derived from cell-selected-within-background."},{"name":"edit-mode-color","type":"Color","description":"The color around the row/cell in edit mode. Auto-derived from content-background."},{"name":"edited-row-indicator","type":"Color","description":"The edited row indicator line color."},{"name":"resize-line-color","type":"Color","description":"The table header resize line color."},{"name":"drop-indicator-color","type":"Color","description":"The color of the column drag indicator line."},{"name":"grouparea-background","type":"Color","description":"The grid group area background color. PRIMARY - derives grouparea-color, drop-area-background. Auto-derived from header-background."},{"name":"grouparea-color","type":"Color","description":"The grid group area color. Auto-derived from grouparea-background."},{"name":"group-row-background","type":"Color","description":"The grid group row background color. PRIMARY - derives expand-icon-color, group-row-selected-background, group-label-text, group-count-background. Auto-derived from header-background."},{"name":"group-row-selected-background","type":"Color","description":"The group row selected background. Auto-derived from group-row-background."},{"name":"group-label-column-name-text","type":"Color","description":"The grid group row column name text color."},{"name":"group-label-icon","type":"Color","description":"The grid group row icon color."},{"name":"group-label-text","type":"Color","description":"The grid group row text color. Auto-derived from group-row-background or group-row-selected-background."},{"name":"expand-all-icon-color","type":"Color","description":"The header expand all icon color. Auto-derived from header-background."},{"name":"expand-all-icon-hover-color","type":"Color","description":"The header expand all icon hover color. Auto-derived from header-background."},{"name":"expand-icon-color","type":"Color","description":"The grid row expand icon color. Auto-derived from group-row-background or group-row-selected-background."},{"name":"expand-icon-hover-color","type":"Color","description":"The grid row expand icon hover color. Auto-derived from expand-icon-color."},{"name":"active-expand-icon-color","type":"Color","description":"The active expand icon color."},{"name":"active-expand-icon-hover-color","type":"Color","description":"The active expand icon hover color."},{"name":"group-count-background","type":"Color","description":"The group row count badge background. Auto-derived from group-row-background or group-row-selected-background."},{"name":"group-count-text-color","type":"Color","description":"The group row count badge text color. Auto-derived from group-count-background."},{"name":"drop-area-text-color","type":"Color","description":"The drop area text color. Auto-derived from drop-area-background."},{"name":"drop-area-icon-color","type":"Color","description":"The drop area icon color. Auto-derived from drop-area-background."},{"name":"drop-area-background","type":"Color","description":"The drop area background color. Auto-derived from grouparea-background."},{"name":"drop-area-on-drop-background","type":"Color","description":"The drop area background on drop. Auto-derived from drop-area-background."},{"name":"filtering-header-background","type":"Color","description":"The filtered column header background. Auto-derived from header-background."},{"name":"filtering-header-text-color","type":"Color","description":"The filtered column header text color. Auto-derived from filtering-header-background."},{"name":"filtering-row-background","type":"Color","description":"The filtering row background. Auto-derived from header-background."},{"name":"filtering-row-text-color","type":"Color","description":"The filtering row text color. Auto-derived from filtering-row-background."},{"name":"excel-filtering-header-foreground","type":"Color","description":"The excel filtering header text color. Auto-derived from filtering-row-background."},{"name":"excel-filtering-subheader-foreground","type":"Color","description":"The excel filtering subheader text color. Auto-derived from filtering-row-background."},{"name":"excel-filtering-actions-foreground","type":"Color","description":"The excel filtering actions text color. Auto-derived from filtering-row-background."},{"name":"excel-filtering-actions-hover-foreground","type":"Color","description":"The excel filtering actions hover text color."},{"name":"excel-filtering-actions-disabled-foreground","type":"Color","description":"The excel filtering actions disabled text color. Auto-derived from filtering-row-background."},{"name":"tree-filtered-text-color","type":"Color","description":"Grouping row background color on focus."},{"name":"summaries-patch-background","type":"Color","description":"The leading summaries patch background."},{"name":"row-highlight","type":"Color","description":"The grid row highlight indication color."},{"name":"grid-shadow","type":"box-shadow","description":"The shadow of the grid."},{"name":"drag-shadow","type":"box-shadow","description":"The shadow for movable elements."},{"name":"row-ghost-background","type":"color","description":"The dragged row background color."},{"name":"row-drag-color","type":"color","description":"The row drag handle color."},{"name":"grid-border-color","type":"Color","description":"The color of the grid border."},{"name":"drop-area-border-radius","type":"List","description":"The border radius for column drop area."}]}');
+const grid = /* @__PURE__ */ JSON.parse('{"name":"grid","themeFunctionName":"grid-theme","description":"Grid Theme","primaryTokens":[{"name":"header-background","description":"The table header background color."},{"name":"content-background","description":"The table body background color."},{"name":"ghost-header-background","description":"The dragged header background color."},{"name":"group-row-background","description":"The grid group row background color."},{"name":"grouparea-background","description":"The grid group area background color."}],"primaryTokensSummary":"Derived colors are auto-calculated for contrast.","tokens":[{"name":"header-background","type":"Color","description":"The table header background color. PRIMARY - derives header-text-color, header-border-color, and many more."},{"name":"header-text-color","type":"Color","description":"The table header text color. Auto-derived from header-background."},{"name":"header-border-width","type":"String","description":"The border width used for header borders."},{"name":"header-border-style","type":"String","description":"The border style used for header borders."},{"name":"header-border-color","type":"Color","description":"The color used for header borders. Auto-derived from header-background."},{"name":"header-selected-background","type":"Color","description":"The table header background color when selected. Auto-derived from header-background."},{"name":"header-selected-text-color","type":"Color","description":"The table header text color when selected. Auto-derived from header-selected-background."},{"name":"sorted-header-icon-color","type":"Color","description":"The sort icon color when sorted. Auto-derived from header-background."},{"name":"sortable-header-icon-hover-color","type":"color","description":"The icon color on hover when sortable. Auto-derived from sorted-header-icon-color."},{"name":"content-background","type":"Color","description":"The table body background color. PRIMARY - derives content-text-color, row backgrounds, cell backgrounds, borders."},{"name":"content-text-color","type":"Color","description":"The table body text color. Auto-derived from content-background."},{"name":"ghost-header-text-color","type":"Color","description":"The dragged header text color. Auto-derived from ghost-header-background."},{"name":"ghost-header-icon-color","type":"Color","description":"The dragged header icon color. Auto-derived from ghost-header-background."},{"name":"ghost-header-background","type":"Color","description":"The dragged header background color. PRIMARY - derives ghost-header-text-color, ghost-header-icon-color."},{"name":"row-odd-background","type":"Color","description":"The background color of odd rows. Auto-derived from content-background."},{"name":"row-even-background","type":"Color","description":"The background color of even rows. Auto-derived from content-background."},{"name":"row-odd-text-color","type":"Color","description":"The text color of odd rows. Auto-derived from row-odd-background."},{"name":"row-even-text-color","type":"Color","description":"The text color of even rows. Auto-derived from row-even-background."},{"name":"row-selected-background","type":"Color","description":"The selected row background color. Auto-derived from content-background."},{"name":"row-selected-hover-background","type":"Color","description":"The selected row hover background color. Auto-derived from row-selected-background."},{"name":"row-selected-text-color","type":"Color","description":"The selected row text color. Auto-derived from row-selected-background."},{"name":"row-selected-hover-text-color","type":"Color","description":"The selected row hover text color. Auto-derived from row-selected-hover-background."},{"name":"row-hover-background","type":"Color","description":"The hover row background color. Auto-derived from content-background."},{"name":"row-hover-text-color","type":"Color","description":"The hover row text color. Auto-derived from row-hover-background."},{"name":"row-border-color","type":"Color","description":"The row bottom border color. Auto-derived from content-background."},{"name":"pinned-border-width","type":"String","description":"The border width of the pinned border."},{"name":"pinned-border-style","type":"String","description":"The CSS border style of the pinned border."},{"name":"pinned-border-color","type":"Color","description":"The color of the pinned border. Auto-derived from content-background."},{"name":"cell-active-border-color","type":"Color","description":"The border color for the active cell. Auto-derived from content-background."},{"name":"cell-selected-background","type":"Color","description":"The selected cell background color. Auto-derived from content-background."},{"name":"cell-selected-text-color","type":"Color","description":"The selected cell text color. Auto-derived from cell-selected-background."},{"name":"cell-editing-background","type":"Color","description":"The background of the cell being edited. Auto-derived from content-background."},{"name":"cell-editing-foreground","type":"Color","description":"The cell text color in edit mode. Auto-derived from cell-editing-background."},{"name":"cell-editing-focus-foreground","type":"Color","description":"The cell text color in edit mode on focus. Auto-derived from cell-editing-background."},{"name":"cell-edited-value-color","type":"Color","description":"The text color of an edited cell."},{"name":"cell-new-color","type":"Color","description":"The text color of a new cell."},{"name":"cell-disabled-color","type":"Color","description":"The text color of a disabled cell."},{"name":"cell-selected-within-background","type":"Color","description":"The background of selected cell in selected row. Auto-derived from row-selected-background."},{"name":"cell-selected-within-text-color","type":"Color","description":"The color of selected cell in selected row. Auto-derived from cell-selected-within-background."},{"name":"edit-mode-color","type":"Color","description":"The color around the row/cell in edit mode. Auto-derived from content-background."},{"name":"edited-row-indicator","type":"Color","description":"The edited row indicator line color."},{"name":"resize-line-color","type":"Color","description":"The table header resize line color."},{"name":"drop-indicator-color","type":"Color","description":"The color of the column drag indicator line."},{"name":"grouparea-background","type":"Color","description":"The grid group area background color. PRIMARY - derives grouparea-color, drop-area-background. Auto-derived from header-background."},{"name":"grouparea-color","type":"Color","description":"The grid group area color. Auto-derived from grouparea-background."},{"name":"group-row-background","type":"Color","description":"The grid group row background color. PRIMARY - derives expand-icon-color, group-row-selected-background, group-label-text, group-count-background. Auto-derived from header-background."},{"name":"group-row-selected-background","type":"Color","description":"The group row selected background. Auto-derived from group-row-background."},{"name":"group-label-column-name-text","type":"Color","description":"The grid group row column name text color."},{"name":"group-label-icon","type":"Color","description":"The grid group row icon color."},{"name":"group-label-text","type":"Color","description":"The grid group row text color. Auto-derived from group-row-background or group-row-selected-background."},{"name":"expand-all-icon-color","type":"Color","description":"The header expand all icon color. Auto-derived from header-background."},{"name":"expand-all-icon-hover-color","type":"Color","description":"The header expand all icon hover color. Auto-derived from header-background."},{"name":"expand-icon-color","type":"Color","description":"The grid row expand icon color. Auto-derived from group-row-background or group-row-selected-background."},{"name":"expand-icon-hover-color","type":"Color","description":"The grid row expand icon hover color. Auto-derived from expand-icon-color."},{"name":"active-expand-icon-color","type":"Color","description":"The active expand icon color."},{"name":"active-expand-icon-hover-color","type":"Color","description":"The active expand icon hover color."},{"name":"group-count-background","type":"Color","description":"The group row count badge background. Auto-derived from group-row-background or group-row-selected-background."},{"name":"group-count-text-color","type":"Color","description":"The group row count badge text color. Auto-derived from group-count-background."},{"name":"drop-area-text-color","type":"Color","description":"The drop area text color. Auto-derived from drop-area-background."},{"name":"drop-area-icon-color","type":"Color","description":"The drop area icon color. Auto-derived from drop-area-background."},{"name":"drop-area-background","type":"Color","description":"The drop area background color. Auto-derived from grouparea-background."},{"name":"drop-area-on-drop-background","type":"Color","description":"The drop area background on drop. Auto-derived from drop-area-background."},{"name":"filtering-header-background","type":"Color","description":"The filtered column header background. Auto-derived from header-background."},{"name":"filtering-header-text-color","type":"Color","description":"The filtered column header text color. Auto-derived from filtering-header-background."},{"name":"filtering-row-background","type":"Color","description":"The filtering row background. Auto-derived from header-background."},{"name":"filtering-row-text-color","type":"Color","description":"The filtering row text color. Auto-derived from filtering-row-background."},{"name":"excel-filtering-header-foreground","type":"Color","description":"The excel filtering header text color. Auto-derived from filtering-row-background."},{"name":"excel-filtering-subheader-foreground","type":"Color","description":"The excel filtering subheader text color. Auto-derived from filtering-row-background."},{"name":"excel-filtering-actions-foreground","type":"Color","description":"The excel filtering actions text color. Auto-derived from filtering-row-background."},{"name":"excel-filtering-actions-hover-foreground","type":"Color","description":"The excel filtering actions hover text color."},{"name":"excel-filtering-actions-disabled-foreground","type":"Color","description":"The excel filtering actions disabled text color. Auto-derived from filtering-row-background."},{"name":"tree-filtered-text-color","type":"Color","description":"Grouping row background color on focus."},{"name":"summaries-patch-background","type":"Color","description":"The leading summaries patch background."},{"name":"row-highlight","type":"Color","description":"The grid row highlight indication color."},{"name":"grid-shadow","type":"List","description":"The shadow of the grid."},{"name":"drag-shadow","type":"List","description":"The shadow for movable elements."},{"name":"row-ghost-background","type":"color","description":"The dragged row background color."},{"name":"row-drag-color","type":"color","description":"The row drag handle color."},{"name":"grid-border-color","type":"Color","description":"The color of the grid border."},{"name":"drop-area-border-radius","type":"List","description":"The border radius for column drop area."},{"name":"active-state-border-style","type":"List","description":"The border style used for row active state and cell active state."},{"name":"body-column-border-color","type":"Color","description":"The border color used for the body column."},{"name":"body-column-hover-border-color","type":"Color","description":"The border color used for the body column when in hovered row."},{"name":"body-column-hover-selected-border-color","type":"Color","description":"The border color used for the body column when in hovered + selected row."},{"name":"body-column-selected-border-color","type":"Color","description":"The border color used for the body column when in selected row."}]}');
 const highlight = { "name": "highlight", "themeFunctionName": "highlight-theme", "description": "Highlight Theme", "primaryTokens": [{ "name": "resting-background", "description": "The resting state background." }, { "name": "active-background", "description": "The active state background." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "resting-background", "type": "Color", "description": "The background color used for the highlight in its resting state. PRIMARY - derives resting-color." }, { "name": "resting-color", "type": "Color", "description": "The text color used for the highlight in its resting state. Auto-derived from resting-background." }, { "name": "active-background", "type": "Color", "description": "The background color used for the highlight in its active state. PRIMARY - derives active-color." }, { "name": "active-color", "type": "Color", "description": "The text color used for the highlight in its active state. Auto-derived from active-background." }] };
 const icon = { "name": "icon", "themeFunctionName": "icon-theme", "description": "Icon Theme\n\nThis theme has no automatic token derivation. All tokens are independent.", "primaryTokens": [], "tokens": [{ "name": "color", "type": "Color", "description": "The icon color." }, { "name": "size", "type": "String", "description": "The icon size." }, { "name": "disabled-color", "type": "Color", "description": "The disabled icon color." }] };
 const label = { "name": "label", "themeFunctionName": "label-theme", "description": "Label Theme\n\nThis theme has no automatic token derivation. All tokens are independent.", "primaryTokens": [], "tokens": [{ "name": "color", "type": "Map", "description": "The text color." }, { "name": "disabled-color", "type": "Map", "description": "The disabled text color." }] };
 const list = { "name": "list", "themeFunctionName": "list-theme", "description": "List Theme", "primaryTokens": [], "tokens": [{ "name": "background", "type": "Color", "description": "The list background color. PRIMARY - derives item-background if not set." }, { "name": "header-background", "type": "Color", "description": "The list header background color. Auto-derived from background or item-background." }, { "name": "header-text-color", "type": "Color", "description": "The list header text color. Auto-derived from header-background." }, { "name": "item-background", "type": "Color", "description": "The list item background color. PRIMARY - derives all item state colors." }, { "name": "item-background-hover", "type": "Color", "description": "The list item hover background color. Auto-derived from item-background." }, { "name": "item-background-active", "type": "Color", "description": "The active list item background color. Auto-derived from item-background-hover." }, { "name": "item-background-selected", "type": "Color", "description": "The selected list item background color. Auto-derived from item-background-active." }, { "name": "item-text-color", "type": "Color", "description": "The list item text color. Auto-derived from item-background." }, { "name": "item-text-color-hover", "type": "Color", "description": "The list item hover text color. Auto-derived from item-background-hover." }, { "name": "item-text-color-active", "type": "Color", "description": "The active list item text color. Auto-derived from item-background-active." }, { "name": "item-text-color-selected", "type": "Color", "description": "The selected list item text color. Auto-derived from item-background-selected." }, { "name": "item-title-color", "type": "Color", "description": "The list item title color. Auto-derived from item-text-color." }, { "name": "item-title-color-hover", "type": "Color", "description": "The list item hover title color. Auto-derived from item-text-color-hover." }, { "name": "item-title-color-active", "type": "Color", "description": "The active list item title color. Auto-derived from item-text-color-active." }, { "name": "item-title-color-selected", "type": "Color", "description": "The selected list item title color. Auto-derived from item-text-color-selected." }, { "name": "item-subtitle-color", "type": "Color", "description": "The list item subtitle color. Auto-derived from item-text-color (muted)." }, { "name": "item-subtitle-color-hover", "type": "Color", "description": "The list item hover subtitle color. Auto-derived from item-text-color-hover (muted)." }, { "name": "item-subtitle-color-active", "type": "Color", "description": "The active list item subtitle color. Auto-derived from item-text-color-active (muted)." }, { "name": "item-subtitle-color-selected", "type": "Color", "description": "The selected list item subtitle color. Auto-derived from item-text-color-selected (muted)." }, { "name": "item-action-color", "type": "Color", "description": "The list item action color. Auto-derived from item-text-color." }, { "name": "item-action-color-hover", "type": "Color", "description": "The list item hover action color. Auto-derived from item-text-color-hover." }, { "name": "item-action-color-active", "type": "Color", "description": "The active list item action color. Auto-derived from item-text-color-active." }, { "name": "item-action-color-selected", "type": "Color", "description": "The selected list item action color. Auto-derived from item-text-color-selected." }, { "name": "item-thumbnail-color", "type": "Color", "description": "The list item thumbnail color. Auto-derived from item-text-color." }, { "name": "item-thumbnail-color-hover", "type": "Color", "description": "The list item hover thumbnail color. Auto-derived from item-text-color-hover." }, { "name": "item-thumbnail-color-active", "type": "Color", "description": "The active list item thumbnail color. Auto-derived from item-text-color-active." }, { "name": "item-thumbnail-color-selected", "type": "Color", "description": "The selected list item thumbnail color. Auto-derived from item-text-color-selected." }, { "name": "border-radius", "type": "List", "description": "The border radius used for list component." }, { "name": "item-border-radius", "type": "List", "description": "The border radius used for list item." }, { "name": "border-width", "type": "Color", "description": "The list border width." }, { "name": "border-color", "type": "Number", "description": "The list border color. Auto-derived from item-background (fluent/bootstrap)." }] };
-const navbar = { "name": "navbar", "themeFunctionName": "navbar-theme", "description": "Navbar Theme", "primaryTokens": [{ "name": "background", "description": "The navbar background color." }], "primaryTokensSummary": "Setting just `$background` will create a complete navbar theme with proper contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The navbar background color. PRIMARY - derives text-color and icon colors." }, { "name": "text-color", "type": "Color", "description": "The navbar text color. Auto-derived from background." }, { "name": "border-color", "type": "Color", "description": "The navbar border color. Auto-derived from background (indigo)." }, { "name": "shadow", "type": "box-shadow", "description": "The shadow of the navbar." }, { "name": "idle-icon-color", "type": "Color", "description": "The navbar idle icon color. Auto-derived from background." }, { "name": "hover-icon-color", "type": "Color", "description": "The navbar hover icon color. Auto-derived from idle-icon-color or background." }, { "name": "disable-shadow", "type": "Bool", "description": "Sets the navbar shadow visibility." }] };
+const navbar = { "name": "navbar", "themeFunctionName": "navbar-theme", "description": "Navbar Theme", "primaryTokens": [{ "name": "background", "description": "The navbar background color." }], "primaryTokensSummary": "Setting just `$background` will create a complete navbar theme with proper contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The navbar background color. PRIMARY - derives text-color and icon colors." }, { "name": "text-color", "type": "Color", "description": "The navbar text color. Auto-derived from background." }, { "name": "border-color", "type": "Color", "description": "The navbar border color. Auto-derived from background (indigo)." }, { "name": "shadow", "type": "List", "description": "The shadow of the navbar." }, { "name": "idle-icon-color", "type": "Color", "description": "The navbar idle icon color. Auto-derived from background." }, { "name": "hover-icon-color", "type": "Color", "description": "The navbar hover icon color. Auto-derived from idle-icon-color or background." }, { "name": "disable-shadow", "type": "Bool", "description": "Sets the navbar shadow visibility." }] };
 const navdrawer = { "name": "navdrawer", "themeFunctionName": "navdrawer-theme", "description": "Navigation Drawer Theme", "primaryTokens": [{ "name": "background", "description": "The drawer background color." }, { "name": "item-active-background", "description": "The active item background." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The navigation drawer background color. PRIMARY - derives all item colors." }, { "name": "border-color", "type": "Color", "description": "The navigation drawer right border color." }, { "name": "item-header-text-color", "type": "Color", "description": "The header's idle text color. Auto-derived from background." }, { "name": "item-text-color", "type": "Color", "description": "The item's idle text color. Auto-derived from background." }, { "name": "item-icon-color", "type": "Color", "description": "The item's icon color. Auto-derived from background." }, { "name": "item-active-text-color", "type": "Color", "description": "The item's active text color. Auto-derived from item-active-background." }, { "name": "item-active-background", "type": "Color", "description": "The item's active background color. PRIMARY for active state - derives active text/icon. Auto-derived from background." }, { "name": "item-active-icon-color", "type": "Color", "description": "The item's icon active color. Auto-derived from item-active-background." }, { "name": "item-hover-background", "type": "Color", "description": "The item's hover background color. Auto-derived from background." }, { "name": "item-hover-text-color", "type": "Color", "description": "The item's hover text color. Auto-derived from background." }, { "name": "item-hover-icon-color", "type": "Color", "description": "The item's hover icon color. Auto-derived from background." }, { "name": "item-disabled-text-color", "type": "Color", "description": "The item's disabled text color. Auto-derived from background (muted)." }, { "name": "item-disabled-icon-color", "type": "Color", "description": "The item's disabled icon color. Auto-derived from background (muted)." }, { "name": "shadow", "type": "Color", "description": "Sets a custom shadow to be used by the drawer." }, { "name": "border-radius", "type": "List", "description": "The border radius used for the navdrawer." }, { "name": "item-border-radius", "type": "List", "description": "The border radius used for the navdrawer item." }] };
 const overlay = { "name": "overlay", "themeFunctionName": "overlay-theme", "description": "Overlay Theme\n\nThis theme has no automatic token derivation. Only one token: background-color.", "primaryTokens": [], "tokens": [{ "name": "background-color", "type": "Color", "description": "The background color used for modal overlays." }] };
 const paginator = { "name": "paginator", "themeFunctionName": "paginator-theme", "description": "Paginator Theme", "primaryTokens": [{ "name": "background-color", "description": "The paginator background." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "text-color", "type": "Color", "description": "The text color. Auto-derived from background-color." }, { "name": "background-color", "type": "Color", "description": "The background color of the paging panel. PRIMARY - derives text-color." }, { "name": "border-color", "type": "Color", "description": "The border color of the paging panel." }] };
@@ -27,12 +27,12 @@ const ripple = { "name": "ripple", "themeFunctionName": "ripple-theme", "descrip
 const scrollbar = { "name": "scrollbar", "themeFunctionName": "scrollbar-theme", "description": "Scrollbar Theme\n\nThis theme has no automatic token derivation. All tokens are independent.\nConfigure thumb, track, and corner elements separately.", "primaryTokens": [], "tokens": [{ "name": "sb-size", "type": "String | Number", "description": "The size of the scrollbar." }, { "name": "sb-thumb-min-height", "type": "String | Number", "description": "The min-height of the thumb." }, { "name": "sb-thumb-bg-color", "type": "Color", "description": "The background color of the thumb." }, { "name": "sb-thumb-bg-color-hover", "type": "Color", "description": "The :hover background color of the thumb." }, { "name": "sb-thumb-border-color", "type": "Color", "description": "The border color of the thumb." }, { "name": "sb-thumb-border-size", "type": "String | Number", "description": "The border size of the thumb." }, { "name": "sb-thumb-border-radius", "type": "String | Number", "description": "The border radius of the thumb." }, { "name": "sb-track-bg-color", "type": "Color", "description": "The background color of the track." }, { "name": "sb-track-bg-color-hover", "type": "Color", "description": "The :hover background color of the track." }, { "name": "sb-track-border-color", "type": "Color", "description": "The border color of the track." }, { "name": "sb-track-border-size", "type": "String | Number", "description": "The border size of the track." }, { "name": "sb-corner-bg", "type": "Color", "description": "The background color of the corner." }, { "name": "sb-corner-border-color", "type": "Color", "description": "The border color of the corner." }, { "name": "sb-corner-border-size", "type": "String | Number", "description": "The border size of the corner." }] };
 const select = { "name": "select", "themeFunctionName": "select-theme", "description": "Select Theme", "primaryTokens": [{ "name": "toggle-button-background", "description": "The toggle button background." }], "primaryTokensSummary": "Toggle button colors cascade from toggle-button-background through focus states.", "tokens": [{ "name": "toggle-button-background", "type": "Color", "description": "The select toggle button background color. PRIMARY - derives all toggle button colors." }, { "name": "toggle-button-background-focus", "type": "Color", "description": "The select toggle button background color when the select is focused. Auto-derived from toggle-button-background (variant-dependent)." }, { "name": "toggle-button-background-disabled", "type": "Color", "description": "The select toggle button background color when the select is disabled." }, { "name": "toggle-button-foreground", "type": "Color", "description": "The select toggle button foreground color. Auto-derived from toggle-button-background." }, { "name": "toggle-button-foreground-focus", "type": "Color", "description": "The select toggle button foreground color when the select is focused. Auto-derived from toggle-button-background-focus (variant-dependent)." }, { "name": "toggle-button-foreground-disabled", "type": "Color", "description": "The select toggle button foreground color when the select is disabled." }, { "name": "toggle-button-foreground-filled", "type": "Color", "description": "The select toggle button foreground color when the select is filled. Auto-derived from toggle-button-background." }, { "name": "toggle-button-background-focus--border", "type": "Color", "description": "The select toggle button background color when the select is focused in material border variant. Auto-derived from toggle-button-background (bootstrap/indigo)." }] };
 const slider = { "name": "slider", "themeFunctionName": "slider-theme", "description": "Slider Theme", "primaryTokens": [{ "name": "track-color", "description": "The filled track color." }, { "name": "base-track-color", "description": "The unfilled track background." }, { "name": "thumb-color", "description": "The thumb color (material)." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "track-color", "type": "Color", "description": "The color of the track. PRIMARY - derives hover, label, and thumb colors." }, { "name": "track-step-color", "type": "Color", "description": "The color of the track steps. Auto-derived from base-track-color." }, { "name": "track-step-size", "type": "Number", "description": "The size of the track steps." }, { "name": "track-hover-color", "type": "Color", "description": "The color of the track on hover. Auto-derived from track-color." }, { "name": "thumb-color", "type": "Color", "description": "The color of the thumb. Auto-derived from track-color (material) or set independently." }, { "name": "thumb-focus-color", "type": "Color", "description": "The focus color of the thumb. Auto-derived from thumb-border-color or thumb-color." }, { "name": "thumb-border-color", "type": "Color", "description": "The thumb border color. Auto-derived from track-color (fluent/indigo) or thumb-color (bootstrap)." }, { "name": "thumb-border-hover-color", "type": "Color", "description": "The thumb border color when hovered. Auto-derived from thumb-border-color." }, { "name": "thumb-border-focus-color", "type": "Color", "description": "The thumb border color when focused." }, { "name": "thumb-disabled-border-color", "type": "Color", "description": "The thumb border color when it's disabled. Auto-derived from thumb-border-color." }, { "name": "disabled-thumb-color", "type": "Color", "description": "The thumb color when its disabled. Auto-derived from thumb-color." }, { "name": "label-background-color", "type": "Color", "description": "The background color of the bubble label. Auto-derived from track-color or thumb-color." }, { "name": "label-text-color", "type": "Color", "description": "The text color of the bubble label. Auto-derived from label-background-color." }, { "name": "base-track-color", "type": "Color", "description": "The base background color of the track. PRIMARY for unfilled track. Auto-derived from track-color (material)." }, { "name": "base-track-hover-color", "type": "Color", "description": "The base background color of the track on hover. Auto-derived from base-track-color." }, { "name": "disabled-base-track-color", "type": "Color", "description": "The base background color of the track when is disabled. Auto-derived from base-track-color." }, { "name": "disabled-fill-track-color", "type": "Color", "description": "The base background color of the fill track when is disabled. Auto-derived from track-color." }, { "name": "tick-label-color", "type": "Color", "description": "The color of the tick label." }, { "name": "tick-color", "type": "Color", "description": "The background-color of the tick." }] };
-const snackbar = { "name": "snackbar", "themeFunctionName": "snackbar-theme", "description": "Snackbar Theme", "primaryTokens": [{ "name": "background", "description": "The background color." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The background color used in the snackbar. PRIMARY - derives text-color, button-color." }, { "name": "text-color", "type": "Color", "description": "The text color used in the snackbar. Auto-derived from background." }, { "name": "button-color", "type": "Color", "description": "The button color used in the snackbar. Auto-derived from background." }, { "name": "shadow", "type": "box-shadow", "description": "Sets a shadow to be used for the snackbar." }, { "name": "border-radius", "type": "List", "description": "The border radius used for the snackbar component." }] };
+const snackbar = { "name": "snackbar", "themeFunctionName": "snackbar-theme", "description": "Snackbar Theme", "primaryTokens": [{ "name": "background", "description": "The background color." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The background color used in the snackbar. PRIMARY - derives text-color, button-color." }, { "name": "text-color", "type": "Color", "description": "The text color used in the snackbar. Auto-derived from background." }, { "name": "button-color", "type": "Color", "description": "The button color used in the snackbar. Auto-derived from background." }, { "name": "shadow", "type": "List", "description": "Sets a shadow to be used for the snackbar." }, { "name": "border-radius", "type": "List", "description": "The border radius used for the snackbar component." }] };
 const splitter = { "name": "splitter", "themeFunctionName": "splitter-theme", "description": "Splitter Theme", "primaryTokens": [{ "name": "bar-color", "description": "The bar background color." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "bar-color", "type": "Color", "description": "The background color of the bar. PRIMARY - derives handle, expander, focus colors." }, { "name": "handle-color", "type": "Color", "description": "The color for the bar drag handle. Auto-derived from bar-color." }, { "name": "expander-color", "type": "Color", "description": "The color for the arrow expander's. Auto-derived from bar-color." }, { "name": "border-radius", "type": "List", "description": "the border radios of the splitter bar drag handle" }, { "name": "focus-color", "type": "Color", "description": "The color used for focused splitter bar. Auto-derived from bar-color (variant-dependent)." }, { "name": "bar-color-active", "type": "Color", "description": "The background color of the bar when pressed." }, { "name": "handle-color-active", "type": "Color", "description": "The color for the bar drag handle when pressed." }, { "name": "expander-color-active", "type": "Color", "description": "The color for the arrow expander's when pressed." }, { "name": "size", "type": "Number", "description": "The size of the splitter, its width for vertical and height for horizontal splitter." }] };
 const stepper = { "name": "stepper", "themeFunctionName": "stepper-theme", "description": "Stepper Theme", "primaryTokens": [{ "name": "step-background", "description": "The base step background." }, { "name": "indicator-background", "description": "The step indicator background." }, { "name": "invalid-indicator-background", "description": "The invalid step indicator." }, { "name": "current-indicator-background", "description": "The current step indicator." }, { "name": "complete-indicator-background", "description": "The completed step indicator." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "content-foreground", "type": "Color", "description": "The foreground of the step content." }, { "name": "step-background", "type": "Color", "description": "The background of the step header. PRIMARY - derives all step states." }, { "name": "step-hover-background", "type": "Color", "description": "The background of the step header on hover. Auto-derived from step-background." }, { "name": "step-focus-background", "type": "Color", "description": "The background of the step header on focus. Auto-derived from step-background." }, { "name": "title-color", "type": "Color", "description": "The color of the step title. Auto-derived from step-background." }, { "name": "title-hover-color", "type": "Color", "description": "The color of the step title on hover. Auto-derived from step-hover-background." }, { "name": "title-focus-color", "type": "Color", "description": "The color of the step title on focus. Auto-derived from step-focus-background." }, { "name": "subtitle-color", "type": "Color", "description": "The color of the step subtitle. Auto-derived from step-background." }, { "name": "subtitle-hover-color", "type": "Color", "description": "The color of the step subtitle on hover. Auto-derived from step-hover-background." }, { "name": "subtitle-focus-color", "type": "Color", "description": "The color of the step subtitle on focus. Auto-derived from step-focus-background." }, { "name": "indicator-color", "type": "Color", "description": "The text color of the step indicator. Auto-derived from indicator-background." }, { "name": "indicator-background", "type": "Color", "description": "The background color of the step indicator. PRIMARY for indicator - derives indicator-color, indicator-outline. Auto-derived from step-background." }, { "name": "indicator-outline", "type": "Color", "description": "The outline color of the step indicator. Auto-derived from indicator-background.\n" }, { "name": "invalid-step-background", "type": "Color", "description": "The background of the invalid step header. Auto-derived from step-background." }, { "name": "invalid-step-hover-background", "type": "Color", "description": "The background of the invalid step header on hover. Auto-derived from invalid-step-background." }, { "name": "invalid-step-focus-background", "type": "Color", "description": "The background of the invalid step header on focus. Auto-derived from invalid-step-background." }, { "name": "invalid-title-color", "type": "Color", "description": "The color of the invalid step title. Auto-derived from invalid-indicator-background." }, { "name": "invalid-title-hover-color", "type": "Color", "description": "The color of the invalid step title on hover. Auto-derived from invalid-indicator-background." }, { "name": "invalid-title-focus-color", "type": "Color", "description": "The color of the invalid step title on focus. Auto-derived from invalid-indicator-background." }, { "name": "invalid-subtitle-color", "type": "Color", "description": "The color of the invalid step subtitle. Auto-derived from invalid-indicator-background." }, { "name": "invalid-subtitle-hover-color", "type": "Color", "description": "The color of the invalid step subtitle on hover. Auto-derived from invalid-indicator-background." }, { "name": "invalid-subtitle-focus-color", "type": "Color", "description": "The color of the invalid step subtitle on focus. Auto-derived from invalid-indicator-background." }, { "name": "invalid-indicator-color", "type": "Color", "description": "The color of the invalid step indicator. Auto-derived from invalid-indicator-background." }, { "name": "invalid-indicator-background", "type": "Color", "description": "The background color of the invalid step indicator. PRIMARY for invalid state." }, { "name": "invalid-indicator-outline", "type": "Color", "description": "The outline color of the invalid step indicator. Auto-derived from invalid-indicator-background.\n" }, { "name": "current-step-background", "type": "Color", "description": "The background of the current step header. Auto-derived from step-background." }, { "name": "current-step-hover-background", "type": "Color", "description": "The background of the current step header on hover. Auto-derived from current-step-background." }, { "name": "current-step-focus-background", "type": "Color", "description": "The background of the current step header on focus. Auto-derived from current-step-background." }, { "name": "current-title-color", "type": "Color", "description": "The color of the current step title. Auto-derived from current-step-background." }, { "name": "current-title-hover-color", "type": "Color", "description": "The color of the current step title on hover. Auto-derived from current-step-hover-background." }, { "name": "current-title-focus-color", "type": "Color", "description": "The color of the current step title on focus. Auto-derived from current-step-focus-background." }, { "name": "current-subtitle-color", "type": "Color", "description": "The color of the current step subtitle. Auto-derived from current-step-background." }, { "name": "current-subtitle-hover-color", "type": "Color", "description": "The color of the current step subtitle on hover. Auto-derived from current-step-hover-background." }, { "name": "current-subtitle-focus-color", "type": "Color", "description": "The color of the current step subtitle on focus. Auto-derived from current-step-focus-background." }, { "name": "current-indicator-color", "type": "Color", "description": "The color of the current step indicator. Auto-derived from current-indicator-background." }, { "name": "current-indicator-background", "type": "Color", "description": "The background color of the current step indicator. PRIMARY for current state. Auto-derived from current-step-background." }, { "name": "current-indicator-outline", "type": "Color", "description": "The outline color of the current step indicator. Auto-derived from current-indicator-background.\n" }, { "name": "complete-step-background", "type": "Color", "description": "The background of the complete step header. Auto-derived from step-background." }, { "name": "complete-step-hover-background", "type": "Color", "description": "The background of the complete step header on hover. Auto-derived from complete-step-background." }, { "name": "complete-step-focus-background", "type": "Color", "description": "The background of the complete step header on focus. Auto-derived from complete-step-background." }, { "name": "complete-title-color", "type": "Color", "description": "The color of the complete step title. Auto-derived from complete-step-background." }, { "name": "complete-title-hover-color", "type": "Color", "description": "The color of the complete step title on hover. Auto-derived from complete-step-hover-background." }, { "name": "complete-title-focus-color", "type": "Color", "description": "The color of the complete step title on focus. Auto-derived from complete-step-focus-background." }, { "name": "complete-subtitle-color", "type": "Color", "description": "The color of the complete step subtitle. Auto-derived from complete-step-background." }, { "name": "complete-subtitle-hover-color", "type": "Color", "description": "The color of the complete step subtitle on hover. Auto-derived from complete-step-hover-background." }, { "name": "complete-subtitle-focus-color", "type": "Color", "description": "The color of the complete step subtitle on focus. Auto-derived from complete-step-focus-background." }, { "name": "complete-indicator-color", "type": "Color", "description": "The color of the completed step indicator. Auto-derived from complete-indicator-background." }, { "name": "complete-indicator-background", "type": "Color", "description": "The background color of the completed step indicator. PRIMARY for complete state. Auto-derived from complete-step-background." }, { "name": "complete-indicator-outline", "type": "Color", "description": "The outline color of the completed step indicator.\n" }, { "name": "disabled-title-color", "type": "Color", "description": "The title color of the disabled step. Auto-derived from step-background." }, { "name": "disabled-subtitle-color", "type": "Color", "description": "The subtitle color of the disabled step. Auto-derived from step-background." }, { "name": "disabled-indicator-color", "type": "Color", "description": "The indicator color of the disabled step. Auto-derived from disabled-indicator-background." }, { "name": "disabled-indicator-background", "type": "Color", "description": "The indicator background of the disabled step. Auto-derived from step-background." }, { "name": "disabled-indicator-outline", "type": "Color", "description": "The indicator outline color of the disabled step. Auto-derived from disabled-indicator-background.\n" }, { "name": "step-separator-color", "type": "Color", "description": "The separator border-color of between the steps. Auto-derived from step-background or indicator-background." }, { "name": "complete-step-separator-color", "type": "Color", "description": "The separator border-color between the completed steps.\n" }, { "name": "step-separator-style", "type": "Color", "description": "The separator border-style of between the steps." }, { "name": "complete-step-separator-style", "type": "Color", "description": "The separator border-style between the completed steps.\n" }, { "name": "border-radius-indicator", "type": "List", "description": "The border-radius of the step indicator." }, { "name": "border-radius-step-header", "type": "List", "description": "The border-radius of the step header.\n" }] };
 const tabs = { "name": "tabs", "themeFunctionName": "tabs-theme", "description": "Tabs Theme", "primaryTokens": [{ "name": "item-background", "description": "The tabs header background." }, { "name": "item-active-color", "description": "The active tab text color." }], "primaryTokensSummary": "Setting just `$item-background` will theme all tab states consistently.", "tokens": [{ "name": "item-text-color", "type": "Color", "description": "The color used for the tab text color. Auto-derived from item-background or synced with item-icon-color." }, { "name": "item-background", "type": "Color", "description": "The background color used for the tabs header. PRIMARY - derives most colors." }, { "name": "item-hover-background", "type": "Color", "description": "The background used for the tabs on hover. Auto-derived from item-background." }, { "name": "item-hover-color", "type": "Color", "description": "The text color used for the tabs on hover. Auto-derived from item-text-color or item-hover-background." }, { "name": "item-icon-color", "type": "Color", "description": "The color used for the tab icon. Auto-derived from item-background or synced with item-text-color." }, { "name": "item-active-icon-color", "type": "Color", "description": "The color used for the active tab icon. Auto-derived from item-active-color or item-active-background." }, { "name": "item-active-hover-icon-color", "type": "Color", "description": "The color used for the active tab icon on hover and focus. Auto-derived from item-active-icon-color." }, { "name": "item-hover-icon-color", "type": "Color", "description": "The color used for the tab icon on hover. Auto-derived from item-icon-color or item-hover-background." }, { "name": "item-disabled-icon-color", "type": "Color", "description": "The color used for the disabled tab icon." }, { "name": "item-active-color", "type": "Color", "description": "The color used for the active tabs text. PRIMARY for active/indicator - derives indicator-color." }, { "name": "item-active-hover-color", "type": "Color", "description": "The color used for the active tabs text on hover and focus. Auto-derived from item-active-color." }, { "name": "item-active-background", "type": "Color", "description": "The color used for the active tab background. Auto-derived from item-background." }, { "name": "item-active-hover-background", "type": "Color", "description": "The color used for the active tab background on hover and focus. Auto-derived from item-active-background." }, { "name": "item-disabled-color", "type": "Color", "description": "The color used for the disabled tabs text." }, { "name": "indicator-color", "type": "Color", "description": "The color used for the active tab indicator. Auto-derived from item-active-color." }, { "name": "button-color", "type": "Color", "description": "The color used for the button icon/text color. Auto-derived from button-background or item-text-color." }, { "name": "button-hover-color", "type": "Color", "description": "The color used for the button icon/text color on hover. Auto-derived from button-color or button-hover-background." }, { "name": "button-disabled-color", "type": "Color", "description": "The color used for the disabled button icon/text. Auto-derived from button-color." }, { "name": "button-background", "type": "Color", "description": "The color used for the button background. Auto-derived from item-background." }, { "name": "button-hover-background", "type": "Color", "description": "The color used for the button background on hover. Auto-derived from item-background or button-background." }, { "name": "border-radius", "type": "List", "description": "The border radius for the tabs." }, { "name": "border-color", "type": "Color", "description": "The border color of the tabs. Auto-derived from item-background (bootstrap)." }, { "name": "border-color--hover", "type": "Color", "description": "The border color of the tabs on hover. Auto-derived from border-color." }, { "name": "tab-ripple-color", "type": "Color", "description": "The color used for the tab ripple effect. Auto-derived from item-active-background or item-background." }, { "name": "button-ripple-color", "type": "Color", "description": "The color used for the button ripple effect. Auto-derived from button-color." }] };
-const toast = { "name": "toast", "themeFunctionName": "toast-theme", "description": "Toast Theme", "primaryTokens": [{ "name": "background", "description": "The background color." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The background color used for the toast. PRIMARY - derives text-color, border-color." }, { "name": "text-color", "type": "Color", "description": "The text-color used for the toast. Auto-derived from background." }, { "name": "border-color", "type": "Color", "description": "The border-color used for the toast. Auto-derived from text-color." }, { "name": "border-radius", "type": "List", "description": "The border radius used for the toast component." }, { "name": "shadow", "type": "box-shadow", "description": "Sets a shadow to be used for the toast." }] };
-const tooltip = { "name": "tooltip", "themeFunctionName": "tooltip-theme", "description": "Tooltip Theme", "primaryTokens": [{ "name": "background", "description": "The background color." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The background color of the tooltip. PRIMARY - derives text-color." }, { "name": "text-color", "type": "Color", "description": "The text color of the tooltip. Auto-derived from background." }, { "name": "border-radius", "type": "List", "description": "The border radius used for the tooltip component." }, { "name": "shadow", "type": "box-shadow", "description": "Sets a shadow to be used for the tooltip component." }] };
+const toast = { "name": "toast", "themeFunctionName": "toast-theme", "description": "Toast Theme", "primaryTokens": [{ "name": "background", "description": "The background color." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The background color used for the toast. PRIMARY - derives text-color, border-color." }, { "name": "text-color", "type": "Color", "description": "The text-color used for the toast. Auto-derived from background." }, { "name": "border-color", "type": "Color", "description": "The border-color used for the toast. Auto-derived from text-color." }, { "name": "border-radius", "type": "List", "description": "The border radius used for the toast component." }, { "name": "shadow", "type": "List", "description": "Sets a shadow to be used for the toast." }] };
+const tooltip = { "name": "tooltip", "themeFunctionName": "tooltip-theme", "description": "Tooltip Theme", "primaryTokens": [{ "name": "background", "description": "The background color." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The background color of the tooltip. PRIMARY - derives text-color." }, { "name": "text-color", "type": "Color", "description": "The text color of the tooltip. Auto-derived from background." }, { "name": "border-radius", "type": "List", "description": "The border radius used for the tooltip component." }, { "name": "shadow", "type": "List", "description": "Sets a shadow to be used for the tooltip component." }] };
 const tree = { "name": "tree", "themeFunctionName": "tree-theme", "description": "Tree Theme", "primaryTokens": [{ "name": "background", "description": "The node background." }, { "name": "background-selected", "description": "The selected node background." }, { "name": "background-active", "description": "The active node background." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The background color used for the tree node. PRIMARY - derives all state colors." }, { "name": "foreground", "type": "Color", "description": "The color used for the tree node content. Auto-derived from background." }, { "name": "icon-color", "type": "Color", "description": "The color used for the tree node icon." }, { "name": "background-selected", "type": "Color", "description": "The background color used for the selected tree node. Auto-derived from background." }, { "name": "foreground-selected", "type": "Color", "description": "The color used for the content of the selected tree node. Auto-derived from background-selected." }, { "name": "background-active", "type": "Color", "description": "The background color used for the active tree node. Auto-derived from background." }, { "name": "foreground-active", "type": "Color", "description": "The color used for the content of the active tree node. Auto-derived from background-active." }, { "name": "background-active-selected", "type": "Color", "description": "The background color used for the active selected tree node. Auto-derived from background-active." }, { "name": "foreground-active-selected", "type": "Color", "description": "The color used for the content of the active selected tree node. Auto-derived from background-active-selected." }, { "name": "background-disabled", "type": "Color", "description": "The background color used for the tree node in disabled state. Auto-derived from background." }, { "name": "foreground-disabled", "type": "Color", "description": "The color used for the content of the disabled tree node. Auto-derived from background-disabled." }, { "name": "drop-area-color", "type": "Color", "description": "The background color used for the tree node drop aria." }, { "name": "border-color", "type": "Color", "description": "The outline shadow color used for tree node in focus state." }, { "name": "hover-color", "type": "Color", "description": "The background color used for the tree node on hover. Auto-derived from background." }, { "name": "hover-selected-color", "type": "Color", "description": "The background color used for the selected tree node on hover. Auto-derived from background-selected." }] };
 const watermark = { "name": "watermark", "themeFunctionName": "watermark-theme", "description": "Watermark Theme", "primaryTokens": [{ "name": "link-background", "description": "The link background color." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "base-color", "type": "Color", "description": "The base color for all elements of the watermark." }, { "name": "image-color", "type": "Color", "description": "The color used for the stamp image." }, { "name": "image-opacity", "type": "Number", "description": "The opacity of the stamp image." }, { "name": "link-background", "type": "Color", "description": "The background color used for the link. PRIMARY - derives color." }, { "name": "color", "type": "Color", "description": "The color used for the link text. Auto-derived from link-background." }, { "name": "border-color", "type": "Color", "description": "The border color used for the  link." }, { "name": "border-radius", "type": "List", "description": "The border radius used for the link.\n" }] };
 const themesData = {
@@ -40,8 +40,8 @@ const themesData = {
   avatar,
   badge,
   banner,
-  "bottom-nav": { "name": "bottom-nav", "themeFunctionName": "bottom-nav-theme", "description": "Bottom Navigation Theme", "primaryTokens": [{ "name": "background", "description": "The bar background color." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The background color used for the bar. PRIMARY - derives label-color, icon-color." }, { "name": "label-color", "type": "Color", "description": "The label color used in idle state. Auto-derived from background. Derives icon-color if not set." }, { "name": "icon-color", "type": "Color", "description": "The icon color used in idle state. Auto-derived from label-color if not set." }, { "name": "label-selected-color", "type": "Color", "description": "The label color used in selected state. Derives icon-selected-color if not set." }, { "name": "icon-selected-color", "type": "Color", "description": "The icon color used in selected state. Auto-derived from label-selected-color if not set." }, { "name": "icon-disabled-color", "type": "Color", "description": "The disabled color of the icon. Auto-derived from label-disabled-color if not set." }, { "name": "label-disabled-color", "type": "Color", "description": "The disabled color of the label. Auto-derived from label-color." }, { "name": "border-color", "type": "Color", "description": "The border color of the bottom navigation." }, { "name": "shadow", "type": "box-shadow", "description": "Sets a shadow to be used for the bar." }] },
-  "button-group": { "name": "button-group", "themeFunctionName": "button-group-theme", "description": "Button Group Theme", "primaryTokens": [{ "name": "item-background", "description": "The base item background." }, { "name": "item-selected-background", "description": "The selected item background." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "shadow", "type": "box-shadow", "description": "The shadow to be applied for the button group." }, { "name": "item-text-color", "type": "Color", "description": "The text color for button group items. Auto-derived from item-background." }, { "name": "item-icon-color", "type": "color", "description": "The icon color for button group items. Auto-derived from item-text-color." }, { "name": "item-background", "type": "Color", "description": "The background color for button group items. PRIMARY - derives all state colors." }, { "name": "item-border-color", "type": "Color", "description": "The border color between button group items. Auto-derived from item-background.\n" }, { "name": "item-hover-text-color", "type": "Color", "description": "The hover text color for button group items. Auto-derived from item-hover-background." }, { "name": "item-hover-icon-color", "type": "Color", "description": "The hover icon color for button group items. Auto-derived from item-hover-text-color." }, { "name": "item-hover-background", "type": "Color", "description": "The hover background color for button group items. Auto-derived from item-background." }, { "name": "item-hover-border-color", "type": "Color", "description": "The hover border color between button group items. Auto-derived from item-border-color.\n" }, { "name": "item-focused-text-color", "type": "Color", "description": "The focused text color for button group items. Auto-derived from item-focused-background." }, { "name": "item-focused-background", "type": "Color", "description": "The focused background color for button group items. Auto-derived from item-hover-background." }, { "name": "item-focused-border-color", "type": "Color", "description": "The focused border color for an item from the button group. Auto-derived from item-border-color." }, { "name": "item-focused-hover-background", "type": "Color", "description": "The focused & hover background color for button group items. Auto-derived from item-focused-background." }, { "name": "idle-shadow-color", "type": "Color", "description": "The outline color of focused button group items. Auto-derived from item-background or selected-shadow-color." }, { "name": "selected-shadow-color", "type": "Color", "description": "The outline color of focused/selected button group items. Auto-derived from idle-shadow-color.\n" }, { "name": "disabled-text-color", "type": "Color", "description": "The text/icon color for a disabled item in the button group. Auto-derived from disabled-background-color." }, { "name": "disabled-background-color", "type": "Color", "description": "The background color for a disabled item in the button group. Auto-derived from item-background." }, { "name": "item-disabled-border", "type": "Color", "description": "The border color for a disabled item in the button group. Auto-derived from item-border-color.\n" }, { "name": "item-selected-text-color", "type": "Color", "description": "The text color for a selected item in the button group. Auto-derived from item-selected-background." }, { "name": "item-selected-icon-color", "type": "Color", "description": "The icon color for a selected item in the button group. Auto-derived from item-selected-text-color." }, { "name": "item-selected-background", "type": "Color", "description": "The background color for a selected item in the button group. PRIMARY for selected state. Auto-derived from item-background." }, { "name": "item-selected-border-color", "type": "Color", "description": "The border color for a selected item from the button group. Auto-derived from item-border-color.\n" }, { "name": "item-selected-hover-text-color", "type": "Color", "description": "The text color for a selected item in hover state in the button group. Auto-derived from item-selected-hover-background." }, { "name": "item-selected-hover-icon-color", "type": "Color", "description": "The icon color for a selected item in hover state in the button group. Auto-derived from item-selected-hover-text-color." }, { "name": "item-selected-hover-background", "type": "Color", "description": "The background color for a selected item in hover state in the button group. Auto-derived from item-selected-background." }, { "name": "item-selected-hover-border-color", "type": "Color", "description": "The border color for a selected item in hover state in the button group. Auto-derived from item-border-color." }, { "name": "item-selected-focus-background", "type": "Color", "description": "The background color for a selected item in focused state in the button group. Auto-derived from item-selected-background." }, { "name": "item-selected-focus-hover-background", "type": "Color", "description": "The background color for a selected item in focused & hover state in the button group. Auto-derived from item-selected-hover-background.\n" }, { "name": "disabled-selected-text-color", "type": "Color", "description": "The disabled text color for a selected item in the button group. Auto-derived from disabled-text-color." }, { "name": "disabled-selected-icon-color", "type": "Color", "description": "The disabled icon color for a selected item in the button group. Auto-derived from disabled-selected-text-color." }, { "name": "disabled-selected-background", "type": "Color", "description": "The disabled background color for a selected item in the button group. Auto-derived from item-selected-background." }, { "name": "disabled-selected-border-color", "type": "Color", "description": "The disabled border color for a selected item from the button group. Auto-derived from item-border-color.\n" }, { "name": "border-radius", "type": "List", "description": "The border radius used for button-group component.\n" }] },
+  "bottom-nav": { "name": "bottom-nav", "themeFunctionName": "bottom-nav-theme", "description": "Bottom Navigation Theme", "primaryTokens": [{ "name": "background", "description": "The bar background color." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The background color used for the bar. PRIMARY - derives label-color, icon-color." }, { "name": "label-color", "type": "Color", "description": "The label color used in idle state. Auto-derived from background. Derives icon-color if not set." }, { "name": "icon-color", "type": "Color", "description": "The icon color used in idle state. Auto-derived from label-color if not set." }, { "name": "label-selected-color", "type": "Color", "description": "The label color used in selected state. Derives icon-selected-color if not set." }, { "name": "icon-selected-color", "type": "Color", "description": "The icon color used in selected state. Auto-derived from label-selected-color if not set." }, { "name": "icon-disabled-color", "type": "Color", "description": "The disabled color of the icon. Auto-derived from label-disabled-color if not set." }, { "name": "label-disabled-color", "type": "Color", "description": "The disabled color of the label. Auto-derived from label-color." }, { "name": "border-color", "type": "Color", "description": "The border color of the bottom navigation." }, { "name": "shadow", "type": "List | Number", "description": "Sets a shadow to be used for the bar." }] },
+  "button-group": { "name": "button-group", "themeFunctionName": "button-group-theme", "description": "Button Group Theme", "primaryTokens": [{ "name": "item-background", "description": "The base item background." }, { "name": "item-selected-background", "description": "The selected item background." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "shadow", "type": "List", "description": "The shadow to be applied for the button group." }, { "name": "item-text-color", "type": "Color", "description": "The text color for button group items. Auto-derived from item-background." }, { "name": "item-icon-color", "type": "color", "description": "The icon color for button group items. Auto-derived from item-text-color." }, { "name": "item-background", "type": "Color", "description": "The background color for button group items. PRIMARY - derives all state colors." }, { "name": "item-border-color", "type": "Color", "description": "The border color between button group items. Auto-derived from item-background.\n" }, { "name": "item-hover-text-color", "type": "Color", "description": "The hover text color for button group items. Auto-derived from item-hover-background." }, { "name": "item-hover-icon-color", "type": "Color", "description": "The hover icon color for button group items. Auto-derived from item-hover-text-color." }, { "name": "item-hover-background", "type": "Color", "description": "The hover background color for button group items. Auto-derived from item-background." }, { "name": "item-hover-border-color", "type": "Color", "description": "The hover border color between button group items. Auto-derived from item-border-color.\n" }, { "name": "item-focused-text-color", "type": "Color", "description": "The focused text color for button group items. Auto-derived from item-focused-background." }, { "name": "item-focused-background", "type": "Color", "description": "The focused background color for button group items. Auto-derived from item-hover-background." }, { "name": "item-focused-border-color", "type": "Color", "description": "The focused border color for an item from the button group. Auto-derived from item-border-color." }, { "name": "item-focused-hover-background", "type": "Color", "description": "The focused & hover background color for button group items. Auto-derived from item-focused-background." }, { "name": "idle-shadow-color", "type": "Color", "description": "The outline color of focused button group items. Auto-derived from item-background or selected-shadow-color." }, { "name": "selected-shadow-color", "type": "Color", "description": "The outline color of focused/selected button group items. Auto-derived from idle-shadow-color.\n" }, { "name": "disabled-text-color", "type": "Color", "description": "The text/icon color for a disabled item in the button group. Auto-derived from disabled-background-color." }, { "name": "disabled-background-color", "type": "Color", "description": "The background color for a disabled item in the button group. Auto-derived from item-background." }, { "name": "item-disabled-border", "type": "Color", "description": "The border color for a disabled item in the button group. Auto-derived from item-border-color.\n" }, { "name": "item-selected-text-color", "type": "Color", "description": "The text color for a selected item in the button group. Auto-derived from item-selected-background." }, { "name": "item-selected-icon-color", "type": "Color", "description": "The icon color for a selected item in the button group. Auto-derived from item-selected-text-color." }, { "name": "item-selected-background", "type": "Color", "description": "The background color for a selected item in the button group. PRIMARY for selected state. Auto-derived from item-background." }, { "name": "item-selected-border-color", "type": "Color", "description": "The border color for a selected item from the button group. Auto-derived from item-border-color.\n" }, { "name": "item-selected-hover-text-color", "type": "Color", "description": "The text color for a selected item in hover state in the button group. Auto-derived from item-selected-hover-background." }, { "name": "item-selected-hover-icon-color", "type": "Color", "description": "The icon color for a selected item in hover state in the button group. Auto-derived from item-selected-hover-text-color." }, { "name": "item-selected-hover-background", "type": "Color", "description": "The background color for a selected item in hover state in the button group. Auto-derived from item-selected-background." }, { "name": "item-selected-hover-border-color", "type": "Color", "description": "The border color for a selected item in hover state in the button group. Auto-derived from item-border-color." }, { "name": "item-selected-focus-background", "type": "Color", "description": "The background color for a selected item in focused state in the button group. Auto-derived from item-selected-background." }, { "name": "item-selected-focus-hover-background", "type": "Color", "description": "The background color for a selected item in focused & hover state in the button group. Auto-derived from item-selected-hover-background.\n" }, { "name": "disabled-selected-text-color", "type": "Color", "description": "The disabled text color for a selected item in the button group. Auto-derived from disabled-text-color." }, { "name": "disabled-selected-icon-color", "type": "Color", "description": "The disabled icon color for a selected item in the button group. Auto-derived from disabled-selected-text-color." }, { "name": "disabled-selected-background", "type": "Color", "description": "The disabled background color for a selected item in the button group. Auto-derived from item-selected-background." }, { "name": "disabled-selected-border-color", "type": "Color", "description": "The disabled border color for a selected item from the button group. Auto-derived from item-border-color.\n" }, { "name": "border-radius", "type": "List", "description": "The border radius used for button-group component.\n" }] },
   button,
   "contained-button": { "name": "contained-button", "themeFunctionName": "contained-button-theme", "description": "Contained Button Theme", "primaryTokens": [{ "name": "background", "description": "The background color of the button." }, { "name": "foreground", "description": "The text color of the button." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The background color of the button. PRIMARY - derives foreground, icon-color, hover-background, focus-background, active-background." }, { "name": "foreground", "type": "Color", "description": "The text color of the button. Auto-derived from background. PRIMARY for foreground inheritance." }, { "name": "icon-color", "type": "Color", "description": "The icon color in the button. Auto-derived from background." }, { "name": "icon-color-hover", "type": "Color", "description": "The icon color in the button on hover. Auto-derived from icon-color or hover-background." }, { "name": "hover-background", "type": "Color", "description": "The hover background color of the button. Auto-derived from background." }, { "name": "hover-foreground", "type": "Color", "description": "The hover text color of the button. Auto-derived from foreground or hover-background." }, { "name": "focus-background", "type": "Color", "description": "The focus background color of the button. Auto-derived from background or focus-hover-background." }, { "name": "focus-foreground", "type": "Color", "description": "The focus text color of the button. Auto-derived from foreground or focus-background." }, { "name": "focus-hover-background", "type": "Color", "description": "The background color on focus hovered state. Auto-derived from hover-background." }, { "name": "focus-hover-foreground", "type": "Color", "description": "The text color on focus hovered state. Auto-derived from foreground or focus-hover-background." }, { "name": "focus-visible-background", "type": "Color", "description": "The focus-visible background color. Auto-derived from focus-background or background." }, { "name": "focus-visible-foreground", "type": "Color", "description": "The focus-visible text color. Auto-derived from foreground or focus-visible-background." }, { "name": "active-background", "type": "Color", "description": "The active background of the button. Auto-derived from background, focus-background, or hover-background." }, { "name": "active-foreground", "type": "Color", "description": "The active text color of the button. Auto-derived from foreground or active-background." }, { "name": "border-radius", "type": "List", "description": "The border radius of the button." }, { "name": "border-color", "type": "Color", "description": "The border color of the button." }, { "name": "hover-border-color", "type": "Color", "description": "The hover border color of the button." }, { "name": "focus-border-color", "type": "Color", "description": "The focus border color of the button." }, { "name": "focus-visible-border-color", "type": "Color", "description": "The focus-visible border color. Auto-derived from focus-visible-foreground (fluent)." }, { "name": "active-border-color", "type": "Color", "description": "The active border color of the button." }, { "name": "shadow-color", "type": "Color", "description": "The shadow color of the button. Auto-derived from focus-visible-background (bootstrap/indigo)." }, { "name": "resting-shadow", "type": "Color", "description": "The shadow of the button in its idle state." }, { "name": "hover-shadow", "type": "Color", "description": "The shadow of the button in its hover state." }, { "name": "focus-shadow", "type": "Color", "description": "The shadow of the button in its focus state." }, { "name": "active-shadow", "type": "Color", "description": "The shadow of the button in its focus state." }, { "name": "disabled-background", "type": "Color", "description": "The disabled background color. Auto-derived from background (bootstrap/indigo)." }, { "name": "disabled-foreground", "type": "Color", "description": "The disabled text color. Auto-derived from disabled-background." }, { "name": "disabled-icon-color", "type": "Color", "description": "The disabled icon color. Auto-derived from disabled-foreground." }, { "name": "disabled-border-color", "type": "Color", "description": "The disabled border color of the button.\n" }] },
   "fab-button": { "name": "fab-button", "themeFunctionName": "fab-button-theme", "description": "FAB Button Theme", "primaryTokens": [{ "name": "background", "description": "The background color of the button." }, { "name": "foreground", "description": "The text color of the button. Used as fallback for state foreground colors." }, { "name": "icon-color", "description": "The icon color in the button. Used as fallback for icon-color-hover." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "background", "type": "Color", "description": "The background color of the button. PRIMARY - derives foreground, icon-color, hover-background, focus-background, active-background." }, { "name": "foreground", "type": "Color", "description": "The text color of the button. Auto-derived from background." }, { "name": "icon-color", "type": "Color", "description": "The icon color in the button. Auto-derived from background." }, { "name": "icon-color-hover", "type": "Color", "description": "The icon color in the button on hover. Auto-derived from icon-color or hover-background." }, { "name": "hover-background", "type": "Color", "description": "The hover background color. Auto-derived from background." }, { "name": "hover-foreground", "type": "Color", "description": "The hover text color. Auto-derived from foreground or hover-background." }, { "name": "focus-background", "type": "Color", "description": "The focus background color. Auto-derived from background or focus-hover-background." }, { "name": "focus-foreground", "type": "Color", "description": "The focus text color. Auto-derived from foreground or focus-background." }, { "name": "focus-hover-background", "type": "Color", "description": "The background color on focus hovered state. Auto-derived from hover-background." }, { "name": "focus-hover-foreground", "type": "Color", "description": "The text color on focus hovered state. Auto-derived from foreground or focus-hover-background." }, { "name": "focus-visible-background", "type": "Color", "description": "The focus-visible background color. Auto-derived from focus-background or background." }, { "name": "focus-visible-foreground", "type": "Color", "description": "The focus-visible text color. Auto-derived from focus-visible-background." }, { "name": "active-background", "type": "Color", "description": "The active background. Auto-derived from background, focus-background, or hover-background." }, { "name": "active-foreground", "type": "Color", "description": "The active text color. Auto-derived from active-background." }, { "name": "border-radius", "type": "List", "description": "The border radius of the button." }, { "name": "border-color", "type": "Color", "description": "The border color of the button." }, { "name": "hover-border-color", "type": "Color", "description": "The hover border color of the button." }, { "name": "focus-border-color", "type": "Color", "description": "The focus border color of the button." }, { "name": "focus-visible-border-color", "type": "Color", "description": "The focus-visible border color. Auto-derived from focus-visible-foreground (fluent)." }, { "name": "active-border-color", "type": "Color", "description": "The active border color of the button." }, { "name": "shadow-color", "type": "Color", "description": "The shadow color. Auto-derived from focus-visible-background (bootstrap/indigo)." }, { "name": "resting-shadow", "type": "Color", "description": "The shadow of the button in its idle state." }, { "name": "hover-shadow", "type": "Color", "description": "The shadow of the button in its hover state." }, { "name": "focus-shadow", "type": "Color", "description": "The shadow of the button in its focus state." }, { "name": "active-shadow", "type": "Color", "description": "The shadow of the button in its focus state." }, { "name": "disabled-background", "type": "Color", "description": "The disabled background color. Auto-derived from background (bootstrap/indigo)." }, { "name": "disabled-foreground", "type": "Color", "description": "The disabled text color. Auto-derived from disabled-background." }, { "name": "disabled-icon-color", "type": "Color", "description": "The disabled icon color. Auto-derived from disabled-foreground or disabled-background." }, { "name": "disabled-border-color", "type": "Color", "description": "The disabled border color of the button.\n" }] },
@@ -59,7 +59,7 @@ const themesData = {
   dialog,
   divider,
   "dock-manager": { "name": "dock-manager", "themeFunctionName": "dock-manager-theme", "description": "Dock Manager Theme\n\nNOTE: This component uses a pass-through pattern with meta.keywords($rest).\nAll tokens are directly passed to the schema without automatic derivation.\nEach token must be set individually for full customization.", "primaryTokens": [], "tokens": [{ "name": "accent-color", "type": "Color", "description": "Sets the pinned header background color, the joystick background and border colors, as well as the context menu background color." }, { "name": "active-color", "type": "Color", "description": "Sets the active text and border colors for tabs, panes, and menus." }, { "name": "border-color", "type": "Color", "description": "Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors." }, { "name": "button-text", "type": "Color", "description": "Sets the button text color." }, { "name": "context-menu-background", "type": "Color", "description": "Sets the background color for context menus." }, { "name": "context-menu-background-active", "type": "Color", "description": "Sets the background color for active context menus." }, { "name": "context-menu-color", "type": "Color", "description": "Sets the text color for context menus." }, { "name": "context-menu-color-active", "type": "Color", "description": "Sets the text color for active context menus." }, { "name": "dock-background", "type": "Color", "description": "Sets the background color of the dock manager." }, { "name": "dock-text", "type": "Color", "description": "Sets the text color of the dock manager." }, { "name": "drop-shadow-background", "type": "Color", "description": "Sets the drop-shadow background color." }, { "name": "floating-pane-border-color", "type": "Color", "description": "Sets the border color for floating panes." }, { "name": "flyout-shadow-color", "type": "Color", "description": "Sets the flyout shadow color." }, { "name": "joystick-background", "type": "Color", "description": "Sets the background color of the joystick." }, { "name": "joystick-background-active", "type": "Color", "description": "Sets the background color of the joysticks." }, { "name": "joystick-border-color", "type": "Color", "description": "Sets the border color of the joystick." }, { "name": "joystick-icon-color", "type": "Color", "description": "Sets the color for the joystick icons." }, { "name": "joystick-icon-color-active", "type": "Color", "description": "Sets the color of the active joystick icons." }, { "name": "pane-content-background", "type": "Color", "description": "Sets the background color of the content panes." }, { "name": "pane-content-text", "type": "Color", "description": "Sets the text color of the content panes." }, { "name": "pane-header-background", "type": "Color", "description": "Sets the background color for pane headers." }, { "name": "pane-header-text", "type": "Color", "description": "Sets the text color for pane headers." }, { "name": "pinned-header-background", "type": "Color", "description": "Sets the background colors of pinned headers." }, { "name": "pinned-header-text", "type": "Color", "description": "Sets the text colors of pinned headers." }, { "name": "background-color", "type": "Color", "description": "Sets the base dock manager color as well as the pane headers and tabs background colors." }, { "name": "splitter-background", "type": "Color", "description": "Sets the background color for the splitters." }, { "name": "splitter-handle", "type": "Color", "description": "Sets the background color for the splitter handles." }, { "name": "tab-background", "type": "Color", "description": "Sets the background color for tabs." }, { "name": "tab-background-active", "type": "Color", "description": "Sets the background color for active tabs." }, { "name": "tab-border-color", "type": "Color", "description": "Sets the border color for tabs." }, { "name": "tab-border-color-active", "type": "Color", "description": "Sets the border color for active tabs." }, { "name": "tab-text", "type": "Color", "description": "Sets the text color for tabs." }, { "name": "tab-text-active", "type": "Color", "description": "Sets the text color for active tabs." }, { "name": "text-color", "type": "Color", "description": "Sets the text color for most elements in the dock manager. Used as the default joystick icon color." }] },
-  "drop-down": { "name": "drop-down", "themeFunctionName": "drop-down-theme", "description": "Drop-down Theme", "primaryTokens": [{ "name": "background-color", "description": "The drop-down background." }, { "name": "selected-item-background", "description": "The selected item background." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "background-color", "type": "Color", "description": "The drop-down background color. PRIMARY - derives item, hover, focus, selected, disabled colors." }, { "name": "header-text-color", "type": "Color", "description": "The drop-down header text color. Auto-derived from background-color." }, { "name": "item-text-color", "type": "Color", "description": "The drop-down item text color. Auto-derived from background-color." }, { "name": "item-icon-color", "type": "Color", "description": "The drop-down item icon color. Auto-derived from item-text-color." }, { "name": "hover-item-text-color", "type": "Color", "description": "The drop-down item hover text color. Auto-derived from item-text-color." }, { "name": "hover-item-icon-color", "type": "Color", "description": "The drop-down item hover icon color. Auto-derived from hover-item-text-color." }, { "name": "hover-item-background", "type": "Color", "description": "The drop-down hover item background color. Auto-derived from background-color." }, { "name": "focused-item-background", "type": "Color", "description": "The drop-down focused item background color. Auto-derived from background-color." }, { "name": "focused-item-text-color", "type": "Color", "description": "The drop-down focused item text color. Auto-derived from focused-item-background." }, { "name": "focused-item-border-color", "type": "Color", "description": "The drop-down item focused border color. Auto-derived from selected-item-background (indigo)." }, { "name": "selected-item-background", "type": "Color", "description": "The drop-down selected item background color. PRIMARY - derives selected text/icon and hover/focus states. Auto-derived from background-color." }, { "name": "selected-item-text-color", "type": "Color", "description": "The drop-down selected item text color. Auto-derived from selected-item-background." }, { "name": "selected-item-icon-color", "type": "Color", "description": "The drop-down selected item icon color. Auto-derived from selected-item-text-color." }, { "name": "selected-hover-item-background", "type": "Color", "description": "The drop-down selected item hover background color. Auto-derived from selected-item-background." }, { "name": "selected-hover-item-text-color", "type": "Color", "description": "The drop-down selected item hover text color. Auto-derived from selected-hover-item-background." }, { "name": "selected-hover-item-icon-color", "type": "Color", "description": "The drop-down selected item hover icon color. Auto-derived from selected-hover-item-text-color." }, { "name": "selected-focus-item-background", "type": "Color", "description": "The drop-down selected item focus background color. Auto-derived from selected-item-background." }, { "name": "selected-focus-item-text-color", "type": "Color", "description": "The drop-down selected item focus text color. Auto-derived from selected-focus-item-background." }, { "name": "disabled-item-background", "type": "Color", "description": "The drop-down disabled item background color." }, { "name": "disabled-item-text-color", "type": "Color", "description": "The drop-down disabled item text color. Auto-derived from background-color or disabled-item-background." }, { "name": "shadow", "type": "box-shadow", "description": "Sets a shadow to be used for the drop-down." }, { "name": "border-width", "type": "Number", "description": "The border width used for drop-down component." }, { "name": "border-color", "type": "Color", "description": "The border color used for drop-down component." }, { "name": "border-radius", "type": "List", "description": "The border radius used for drop-down component." }, { "name": "item-border-radius", "type": "List", "description": "The border radius used for drop-down items." }] },
+  "drop-down": { "name": "drop-down", "themeFunctionName": "drop-down-theme", "description": "Drop-down Theme", "primaryTokens": [{ "name": "background-color", "description": "The drop-down background." }, { "name": "selected-item-background", "description": "The selected item background." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "background-color", "type": "Color", "description": "The drop-down background color. PRIMARY - derives item, hover, focus, selected, disabled colors." }, { "name": "header-text-color", "type": "Color", "description": "The drop-down header text color. Auto-derived from background-color." }, { "name": "item-text-color", "type": "Color", "description": "The drop-down item text color. Auto-derived from background-color." }, { "name": "item-icon-color", "type": "Color", "description": "The drop-down item icon color. Auto-derived from item-text-color." }, { "name": "hover-item-text-color", "type": "Color", "description": "The drop-down item hover text color. Auto-derived from item-text-color." }, { "name": "hover-item-icon-color", "type": "Color", "description": "The drop-down item hover icon color. Auto-derived from hover-item-text-color." }, { "name": "hover-item-background", "type": "Color", "description": "The drop-down hover item background color. Auto-derived from background-color." }, { "name": "focused-item-background", "type": "Color", "description": "The drop-down focused item background color. Auto-derived from background-color." }, { "name": "focused-item-text-color", "type": "Color", "description": "The drop-down focused item text color. Auto-derived from focused-item-background." }, { "name": "focused-item-border-color", "type": "Color", "description": "The drop-down item focused border color. Auto-derived from selected-item-background (indigo)." }, { "name": "selected-item-background", "type": "Color", "description": "The drop-down selected item background color. PRIMARY - derives selected text/icon and hover/focus states. Auto-derived from background-color." }, { "name": "selected-item-text-color", "type": "Color", "description": "The drop-down selected item text color. Auto-derived from selected-item-background." }, { "name": "selected-item-icon-color", "type": "Color", "description": "The drop-down selected item icon color. Auto-derived from selected-item-text-color." }, { "name": "selected-hover-item-background", "type": "Color", "description": "The drop-down selected item hover background color. Auto-derived from selected-item-background." }, { "name": "selected-hover-item-text-color", "type": "Color", "description": "The drop-down selected item hover text color. Auto-derived from selected-hover-item-background." }, { "name": "selected-hover-item-icon-color", "type": "Color", "description": "The drop-down selected item hover icon color. Auto-derived from selected-hover-item-text-color." }, { "name": "selected-focus-item-background", "type": "Color", "description": "The drop-down selected item focus background color. Auto-derived from selected-item-background." }, { "name": "selected-focus-item-text-color", "type": "Color", "description": "The drop-down selected item focus text color. Auto-derived from selected-focus-item-background." }, { "name": "disabled-item-background", "type": "Color", "description": "The drop-down disabled item background color." }, { "name": "disabled-item-text-color", "type": "Color", "description": "The drop-down disabled item text color. Auto-derived from background-color or disabled-item-background." }, { "name": "shadow", "type": "List", "description": "Sets a shadow to be used for the drop-down." }, { "name": "border-width", "type": "Number", "description": "The border width used for drop-down component." }, { "name": "border-color", "type": "Color", "description": "The border color used for drop-down component." }, { "name": "border-radius", "type": "List", "description": "The border radius used for drop-down component." }, { "name": "item-border-radius", "type": "List", "description": "The border radius used for drop-down items." }] },
   "expansion-panel": { "name": "expansion-panel", "themeFunctionName": "expansion-panel-theme", "description": "Expansion Panel Theme", "primaryTokens": [{ "name": "header-background", "description": "The panel header background." }, { "name": "body-background", "description": "The panel body background." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "header-background", "type": "Color", "description": "The panel header background color. PRIMARY - derives header colors, focus, disabled." }, { "name": "header-focus-background", "type": "Color", "description": "The panel header focus background color. Auto-derived from header-background." }, { "name": "header-title-color", "type": "Color", "description": "The panel header title text color. Auto-derived from header-background." }, { "name": "header-description-color", "type": "Color", "description": "The panel header description text color. Auto-derived from header-background (muted)." }, { "name": "header-icon-color", "type": "Color", "description": "The panel header icon color. Auto-derived from header-background." }, { "name": "body-color", "type": "Color", "description": "The panel body text color. Auto-derived from body-background." }, { "name": "body-background", "type": "Color", "description": "The panel body background color. PRIMARY for body - derives body-color." }, { "name": "disabled-text-color", "type": "Color", "description": "The panel disabled text color. Auto-derived from header-background." }, { "name": "disabled-description-color", "type": "Color", "description": "The panel disabled header description text color. Auto-derived from header-background." }, { "name": "expanded-margin", "type": "Number", "description": "The expansion panel margin in expanded state when positioned inside accordion." }, { "name": "border-radius", "type": "List", "description": "The border radius used for expansion-panel component." }] },
   accordion,
   "grid-summary": { "name": "grid-summary", "themeFunctionName": "grid-summary-theme", "description": "Grid Summary Theme", "primaryTokens": [{ "name": "background-color", "description": "The summaries background color." }, { "name": "label-color", "description": "The summaries label color." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "background-color", "type": "Color", "description": "The summaries background color. PRIMARY - derives label-color, result-color, border-color, pinned-border-color." }, { "name": "label-color", "type": "Color", "description": "The summaries label color. PRIMARY - derives label-hover-color. Auto-derived from background-color." }, { "name": "result-color", "type": "Color", "description": "The summaries value/result color. Auto-derived from background-color." }, { "name": "border-color", "type": "Color", "description": "The summaries border color. Auto-derived from background-color." }, { "name": "pinned-border-width", "type": "Color", "description": "The border width of the summary panel." }, { "name": "pinned-border-style", "type": "Color", "description": "The border style of the summary panel." }, { "name": "pinned-border-color", "type": "Color", "description": "The border color of the summary panel. Auto-derived from background-color." }, { "name": "label-hover-color", "type": "Color", "description": "The summaries hover label color. Auto-derived from label-color." }] },
@@ -73,8 +73,8 @@ const themesData = {
   "outlined-icon-button": { "name": "outlined-icon-button", "themeFunctionName": "outlined-icon-button-theme", "description": "Outlined Icon Button Theme", "primaryTokens": [{ "name": "foreground", "description": "Foreground (icon) color." }, { "name": "hover-background", "description": "Background color on hover." }, { "name": "focus-background", "description": "Background color on focus." }, { "name": "active-background", "description": "Background color when active." }], "primaryTokensSummary": "For outlined icon buttons, the foreground color is the primary token.", "tokens": [{ "name": "background", "type": "Color", "description": "Background color for the outlined icon button." }, { "name": "foreground", "type": "Color", "description": "Foreground (icon) color. PRIMARY - derives hover/focus/active backgrounds, foregrounds, and borders." }, { "name": "shadow-color", "type": "Color", "description": "Shadow color. Auto-derived from focus-background (bootstrap)." }, { "name": "hover-background", "type": "Color", "description": "Background color on hover. PRIMARY - derives hover-foreground. Auto-derived from foreground." }, { "name": "hover-foreground", "type": "Color", "description": "Foreground color on hover. Auto-derived from hover-background or foreground." }, { "name": "focus-background", "type": "Color", "description": "Background color on focus. PRIMARY - derives focus-foreground. Auto-derived from foreground." }, { "name": "focus-foreground", "type": "Color", "description": "Foreground color on focus. Auto-derived from focus-background or foreground." }, { "name": "focus-hover-background", "type": "Color", "description": "Background color on focus + hover. Auto-derived from foreground or focus-background." }, { "name": "focus-hover-foreground", "type": "Color", "description": "Foreground color on focus + hover. Auto-derived from focus-hover-background or foreground." }, { "name": "active-background", "type": "Color", "description": "Background color when active. Auto-derived from foreground." }, { "name": "active-foreground", "type": "Color", "description": "Foreground color when active. Auto-derived from active-background or hover-foreground." }, { "name": "border-radius", "type": "Length", "description": "Border radius for the icon button." }, { "name": "border-color", "type": "Color", "description": "Border color. Auto-derived from foreground." }, { "name": "focus-border-color", "type": "Color", "description": "Border color on focus. Auto-derived from foreground or active-background." }, { "name": "disabled-background", "type": "Color", "description": "Background color when disabled." }, { "name": "disabled-foreground", "type": "Color", "description": "Foreground color when disabled. Auto-derived from foreground (bootstrap/indigo)." }, { "name": "disabled-border-color", "type": "Color", "description": "Border color when disabled. Auto-derived from border-color (bootstrap/indigo)." }, { "name": "size", "type": "Length", "description": "Size of the icon button." }] },
   icon,
   "file-input": { "name": "file-input", "themeFunctionName": "file-input-theme", "description": "File Input Theme", "primaryTokens": [{ "name": "file-names-background", "description": "The file names container background color." }, { "name": "file-selector-button-background", "description": "The file input selector button background color." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "file-names-background", "type": "Color", "description": "The file names container background color. PRIMARY - derives all file-names foreground colors." }, { "name": "file-names-background--focused", "type": "Color", "description": "The file names container background color when focused. Auto-derived from file-names-background." }, { "name": "file-names-background--filled", "type": "Color", "description": "The file names container background color when filled. Auto-derived from file-names-background." }, { "name": "file-names-background--disabled", "type": "Color", "description": "The file names container background color when disabled. Auto-derived from file-names-background." }, { "name": "file-names-foreground", "type": "Color", "description": "The file names color. Auto-derived from file-names-background." }, { "name": "file-names-foreground--focused", "type": "Color", "description": "The file names color when focused. Auto-derived from file-names-background--focused." }, { "name": "file-names-foreground--filled", "type": "Color", "description": "The file names color when filled. Auto-derived from file-names-background--filled." }, { "name": "file-names-foreground--disabled", "type": "Color", "description": "The file names color when disabled. Auto-derived from file-names-background--disabled." }, { "name": "file-selector-button-background", "type": "Color", "description": "The selector button background color. PRIMARY - derives all selector button foreground colors." }, { "name": "file-selector-button-background--focused", "type": "Color", "description": "The selector button background color when focused. Auto-derived from file-selector-button-background." }, { "name": "file-selector-button-background--filled", "type": "Color", "description": "The selector button background color when filled. Auto-derived from file-selector-button-background." }, { "name": "file-selector-button-background--disabled", "type": "Color", "description": "The selector button background color when disabled. Auto-derived from file-selector-button-background." }, { "name": "file-selector-button-foreground", "type": "Color", "description": "The selector button foreground color. Auto-derived from file-selector-button-background." }, { "name": "file-selector-button-foreground--focused", "type": "Color", "description": "The selector button foreground color when focused. Auto-derived from file-selector-button-background--focused." }, { "name": "file-selector-button-foreground--filled", "type": "Color", "description": "The selector button foreground color when filled. Auto-derived from file-selector-button-background--filled." }, { "name": "file-selector-button-foreground--disabled", "type": "Color", "description": "The selector button foreground color when disabled. Auto-derived from file-selector-button-background--disabled." }] },
-  "input-group": { "name": "input-group", "themeFunctionName": "input-group-theme", "description": "Input Group Theme", "primaryTokens": [{ "name": "box-background", "description": "Box type input background." }, { "name": "search-background", "description": "Search type input background." }, { "name": "border-color", "description": "Border color for border/fluent types." }, { "name": "idle-bottom-line-color", "description": "Bottom line color (material)." }, { "name": "focused-border-color", "description": "Focused state accent color." }], "primaryTokensSummary": "For Material variant, set `$box-background` for box type inputs.", "tokens": [{ "name": "idle-text-color", "type": "Color", "description": "The input text color in the idle state. Auto-derived from box/search-background." }, { "name": "filled-text-color", "type": "Color", "description": "The input text color in the filled state. Auto-derived from box/search-background." }, { "name": "filled-text-hover-color", "type": "Color", "description": "The input text color in the filled state on hover." }, { "name": "focused-text-color", "type": "Color", "description": "The input text color in the focused state. Auto-derived from box-background-focus or search-background." }, { "name": "disabled-text-color", "type": "Color", "description": "The input text color in the disabled state. Auto-derived from disabled background." }, { "name": "helper-text-color", "type": "Color", "description": "The helper text color." }, { "name": "text-error-color", "type": "Color", "description": "The color used for the error message." }, { "name": "icon-error-color", "type": "Color", "description": "The color used for the error icon." }, { "name": "input-prefix-color", "type": "Color", "description": "The input prefix color in the idle state. Auto-derived from box/search-background." }, { "name": "input-prefix-background", "type": "Color", "description": "The background color of an input prefix in the idle state. Synced with suffix-background." }, { "name": "input-prefix-color--filled", "type": "Color", "description": "The input prefix color in the filled state. Auto-derived from prefix-color or background." }, { "name": "input-prefix-background--filled", "type": "Color", "description": "] - The background color of an input prefix in the filled state." }, { "name": "input-prefix-color--focused", "type": "Color", "description": "The input prefix color in the focused state. Auto-derived from prefix-color--filled or background." }, { "name": "input-prefix-background--focused", "type": "Color", "description": "The background color of an input prefix in the focused state." }, { "name": "input-suffix-color", "type": "Color", "description": "The input suffix color in the idle state. Auto-derived from box/search-background. Synced with prefix-color." }, { "name": "input-suffix-background", "type": "Color", "description": "The background color of an input suffix in the idle state. Synced with prefix-background." }, { "name": "input-suffix-color--filled", "type": "Color", "description": "The input suffix color in the filled state." }, { "name": "input-suffix-background-filled", "type": "Color", "description": "The background color of an input suffix in the filled state." }, { "name": "input-suffix-color--focused", "type": "Color", "description": "The input suffix color in the focused state." }, { "name": "input-suffix-background--focused", "type": "Color", "description": "The background color of an input suffix in the focused state." }, { "name": "idle-secondary-color", "type": "Color", "description": "The label color in the idle state. Auto-derived from box-background or placeholder-color." }, { "name": "focused-secondary-color", "type": "Color", "description": "The label color in the focused state. Auto-derived from focused-bottom-line-color or focused-border-color." }, { "name": "idle-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the idle state. PRIMARY for material bottom line." }, { "name": "hover-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the hover state. Auto-derived from idle-bottom-line-color." }, { "name": "focused-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the focused state. Auto-derived from hover-bottom-line-color." }, { "name": "disabled-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the disabled state." }, { "name": "border-color", "type": "Color", "description": "The border color for input groups of type border and fluent. PRIMARY for border inputs." }, { "name": "hover-border-color", "type": "Color", "description": "The hover input border for input groups of type border and fluent. Auto-derived from border-color." }, { "name": "focused-border-color", "type": "Color", "description": "The focused input border color for input groups of type border and fluent. Auto-derived from hover-border-color." }, { "name": "disabled-border-color", "type": "Color", "description": "The disabled border color for input groups of type border and fluent." }, { "name": "box-background", "type": "Color", "description": "The background color of an input group of type box. PRIMARY for material box inputs." }, { "name": "box-background-hover", "type": "Color", "description": "The background color on hover of an input group of type box. Auto-derived from box-background." }, { "name": "box-background-focus", "type": "Color", "description": "The background color on focus of an input group of type box. Auto-derived from box-background." }, { "name": "box-disabled-background", "type": "Color", "description": "The background color of an input group of type box in the disabled state. Auto-derived from box-background." }, { "name": "border-background", "type": "Color", "description": "The background color of an input group of type border." }, { "name": "border-disabled-background", "type": "Color", "description": "The background color of an input group of type border in the disabled state." }, { "name": "search-background", "type": "Color", "description": "The background color of an input group of type search. PRIMARY for search inputs." }, { "name": "search-disabled-background", "type": "Color", "description": "The background color of an input group of type search in the disabled state. Auto-derived from search-background." }, { "name": "search-resting-shadow", "type": "box-shadow", "description": "The shadow color of an input group of type search in its resting state." }, { "name": "search-hover-shadow", "type": "box-shadow", "description": "The shadow color of an input group of type search in its hover state." }, { "name": "search-disabled-shadow", "type": "box-shadow", "description": "The shadow color of an input group of type search in its disabled state." }, { "name": "success-secondary-color", "type": "Color", "description": "The success color used in the valid state." }, { "name": "warning-secondary-color", "type": "Color", "description": "The warning color used in the warning state." }, { "name": "error-secondary-color", "type": "Color", "description": "The error color used in the error state." }, { "name": "box-border-radius", "type": "List", "description": "The border radius used for box input." }, { "name": "border-border-radius", "type": "List", "description": "The border radius used for border input." }, { "name": "search-border-radius", "type": "List", "description": "The border radius used for search input." }, { "name": "placeholder-color", "type": "Color", "description": "The placeholder color of an input group. Auto-derived from box/search-background." }, { "name": "hover-placeholder-color", "type": "Color", "description": "The placeholder color of an input group on hover. Auto-derived from box-background-hover or placeholder-color." }, { "name": "disabled-placeholder-color", "type": "Color", "description": "The disabled placeholder color of an input group. Auto-derived from disabled background." }] },
-  "date-time-input": { "name": "date-time-input", "themeFunctionName": "date-time-input-theme", "description": "Date Time Input Theme", "primaryTokens": [{ "name": "box-background", "description": "Box type input background." }, { "name": "search-background", "description": "Search type input background." }, { "name": "border-color", "description": "Border color for border/fluent types." }, { "name": "idle-bottom-line-color", "description": "Bottom line color (material)." }, { "name": "focused-border-color", "description": "Focused state accent color." }], "primaryTokensSummary": "For Material variant, set `$box-background` for box type inputs.", "tokens": [{ "name": "idle-text-color", "type": "Color", "description": "The input text color in the idle state. Auto-derived from box/search-background." }, { "name": "filled-text-color", "type": "Color", "description": "The input text color in the filled state. Auto-derived from box/search-background." }, { "name": "filled-text-hover-color", "type": "Color", "description": "The input text color in the filled state on hover." }, { "name": "focused-text-color", "type": "Color", "description": "The input text color in the focused state. Auto-derived from box-background-focus or search-background." }, { "name": "disabled-text-color", "type": "Color", "description": "The input text color in the disabled state. Auto-derived from disabled background." }, { "name": "helper-text-color", "type": "Color", "description": "The helper text color." }, { "name": "text-error-color", "type": "Color", "description": "The color used for the error message." }, { "name": "icon-error-color", "type": "Color", "description": "The color used for the error icon." }, { "name": "input-prefix-color", "type": "Color", "description": "The input prefix color in the idle state. Auto-derived from box/search-background." }, { "name": "input-prefix-background", "type": "Color", "description": "The background color of an input prefix in the idle state. Synced with suffix-background." }, { "name": "input-prefix-color--filled", "type": "Color", "description": "The input prefix color in the filled state. Auto-derived from prefix-color or background." }, { "name": "input-prefix-background--filled", "type": "Color", "description": "] - The background color of an input prefix in the filled state." }, { "name": "input-prefix-color--focused", "type": "Color", "description": "The input prefix color in the focused state. Auto-derived from prefix-color--filled or background." }, { "name": "input-prefix-background--focused", "type": "Color", "description": "The background color of an input prefix in the focused state." }, { "name": "input-suffix-color", "type": "Color", "description": "The input suffix color in the idle state. Auto-derived from box/search-background. Synced with prefix-color." }, { "name": "input-suffix-background", "type": "Color", "description": "The background color of an input suffix in the idle state. Synced with prefix-background." }, { "name": "input-suffix-color--filled", "type": "Color", "description": "The input suffix color in the filled state." }, { "name": "input-suffix-background-filled", "type": "Color", "description": "The background color of an input suffix in the filled state." }, { "name": "input-suffix-color--focused", "type": "Color", "description": "The input suffix color in the focused state." }, { "name": "input-suffix-background--focused", "type": "Color", "description": "The background color of an input suffix in the focused state." }, { "name": "idle-secondary-color", "type": "Color", "description": "The label color in the idle state. Auto-derived from box-background or placeholder-color." }, { "name": "focused-secondary-color", "type": "Color", "description": "The label color in the focused state. Auto-derived from focused-bottom-line-color or focused-border-color." }, { "name": "idle-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the idle state. PRIMARY for material bottom line." }, { "name": "hover-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the hover state. Auto-derived from idle-bottom-line-color." }, { "name": "focused-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the focused state. Auto-derived from hover-bottom-line-color." }, { "name": "disabled-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the disabled state." }, { "name": "border-color", "type": "Color", "description": "The border color for input groups of type border and fluent. PRIMARY for border inputs." }, { "name": "hover-border-color", "type": "Color", "description": "The hover input border for input groups of type border and fluent. Auto-derived from border-color." }, { "name": "focused-border-color", "type": "Color", "description": "The focused input border color for input groups of type border and fluent. Auto-derived from hover-border-color." }, { "name": "disabled-border-color", "type": "Color", "description": "The disabled border color for input groups of type border and fluent." }, { "name": "box-background", "type": "Color", "description": "The background color of an input group of type box. PRIMARY for material box inputs." }, { "name": "box-background-hover", "type": "Color", "description": "The background color on hover of an input group of type box. Auto-derived from box-background." }, { "name": "box-background-focus", "type": "Color", "description": "The background color on focus of an input group of type box. Auto-derived from box-background." }, { "name": "box-disabled-background", "type": "Color", "description": "The background color of an input group of type box in the disabled state. Auto-derived from box-background." }, { "name": "border-background", "type": "Color", "description": "The background color of an input group of type border." }, { "name": "border-disabled-background", "type": "Color", "description": "The background color of an input group of type border in the disabled state." }, { "name": "search-background", "type": "Color", "description": "The background color of an input group of type search. PRIMARY for search inputs." }, { "name": "search-disabled-background", "type": "Color", "description": "The background color of an input group of type search in the disabled state. Auto-derived from search-background." }, { "name": "search-resting-shadow", "type": "box-shadow", "description": "The shadow color of an input group of type search in its resting state." }, { "name": "search-hover-shadow", "type": "box-shadow", "description": "The shadow color of an input group of type search in its hover state." }, { "name": "search-disabled-shadow", "type": "box-shadow", "description": "The shadow color of an input group of type search in its disabled state." }, { "name": "success-secondary-color", "type": "Color", "description": "The success color used in the valid state." }, { "name": "warning-secondary-color", "type": "Color", "description": "The warning color used in the warning state." }, { "name": "error-secondary-color", "type": "Color", "description": "The error color used in the error state." }, { "name": "box-border-radius", "type": "List", "description": "The border radius used for box input." }, { "name": "border-border-radius", "type": "List", "description": "The border radius used for border input." }, { "name": "search-border-radius", "type": "List", "description": "The border radius used for search input." }, { "name": "placeholder-color", "type": "Color", "description": "The placeholder color of an input group. Auto-derived from box/search-background." }, { "name": "hover-placeholder-color", "type": "Color", "description": "The placeholder color of an input group on hover. Auto-derived from box-background-hover or placeholder-color." }, { "name": "disabled-placeholder-color", "type": "Color", "description": "The disabled placeholder color of an input group. Auto-derived from disabled background." }] },
+  "input-group": { "name": "input-group", "themeFunctionName": "input-group-theme", "description": "Input Group Theme", "primaryTokens": [{ "name": "box-background", "description": "Box type input background." }, { "name": "search-background", "description": "Search type input background." }, { "name": "border-color", "description": "Border color for border/fluent types." }, { "name": "idle-bottom-line-color", "description": "Bottom line color (material)." }, { "name": "focused-border-color", "description": "Focused state accent color." }], "primaryTokensSummary": "For Material variant, set `$box-background` for box type inputs.", "tokens": [{ "name": "idle-text-color", "type": "Color", "description": "The input text color in the idle state. Auto-derived from box/search-background." }, { "name": "filled-text-color", "type": "Color", "description": "The input text color in the filled state. Auto-derived from box/search-background." }, { "name": "filled-text-hover-color", "type": "Color", "description": "The input text color in the filled state on hover." }, { "name": "focused-text-color", "type": "Color", "description": "The input text color in the focused state. Auto-derived from box-background-focus or search-background." }, { "name": "disabled-text-color", "type": "Color", "description": "The input text color in the disabled state. Auto-derived from disabled background." }, { "name": "helper-text-color", "type": "Color", "description": "The helper text color." }, { "name": "text-error-color", "type": "Color", "description": "The color used for the error message." }, { "name": "icon-error-color", "type": "Color", "description": "The color used for the error icon." }, { "name": "input-prefix-color", "type": "Color", "description": "The input prefix color in the idle state. Auto-derived from box/search-background." }, { "name": "input-prefix-background", "type": "Color", "description": "The background color of an input prefix in the idle state. Synced with suffix-background." }, { "name": "input-prefix-color--filled", "type": "Color", "description": "The input prefix color in the filled state. Auto-derived from prefix-color or background." }, { "name": "input-prefix-background--filled", "type": "Color", "description": "The background color of an input prefix in the filled state." }, { "name": "input-prefix-color--focused", "type": "Color", "description": "The input prefix color in the focused state. Auto-derived from prefix-color--filled or background." }, { "name": "input-prefix-background--focused", "type": "Color", "description": "The background color of an input prefix in the focused state." }, { "name": "input-suffix-color", "type": "Color", "description": "The input suffix color in the idle state. Auto-derived from box/search-background. Synced with prefix-color." }, { "name": "input-suffix-background", "type": "Color", "description": "The background color of an input suffix in the idle state. Synced with prefix-background." }, { "name": "input-suffix-color--filled", "type": "Color", "description": "The input suffix color in the filled state." }, { "name": "input-suffix-background-filled", "type": "Color", "description": "The background color of an input suffix in the filled state." }, { "name": "input-suffix-color--focused", "type": "Color", "description": "The input suffix color in the focused state." }, { "name": "input-suffix-background--focused", "type": "Color", "description": "The background color of an input suffix in the focused state." }, { "name": "idle-secondary-color", "type": "Color", "description": "The label color in the idle state. Auto-derived from box-background or placeholder-color." }, { "name": "focused-secondary-color", "type": "Color", "description": "The label color in the focused state. Auto-derived from focused-bottom-line-color or focused-border-color." }, { "name": "idle-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the idle state. PRIMARY for material bottom line." }, { "name": "hover-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the hover state. Auto-derived from idle-bottom-line-color." }, { "name": "focused-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the focused state. Auto-derived from hover-bottom-line-color." }, { "name": "disabled-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the disabled state." }, { "name": "border-color", "type": "Color", "description": "The border color for input groups of type border and fluent. PRIMARY for border inputs." }, { "name": "hover-border-color", "type": "Color", "description": "The hover input border for input groups of type border and fluent. Auto-derived from border-color." }, { "name": "focused-border-color", "type": "Color", "description": "The focused input border color for input groups of type border and fluent. Auto-derived from hover-border-color." }, { "name": "disabled-border-color", "type": "Color", "description": "The disabled border color for input groups of type border and fluent." }, { "name": "box-background", "type": "Color", "description": "The background color of an input group of type box. PRIMARY for material box inputs." }, { "name": "box-background-hover", "type": "Color", "description": "The background color on hover of an input group of type box. Auto-derived from box-background." }, { "name": "box-background-focus", "type": "Color", "description": "The background color on focus of an input group of type box. Auto-derived from box-background." }, { "name": "box-disabled-background", "type": "Color", "description": "The background color of an input group of type box in the disabled state. Auto-derived from box-background." }, { "name": "border-background", "type": "Color", "description": "The background color of an input group of type border." }, { "name": "border-disabled-background", "type": "Color", "description": "The background color of an input group of type border in the disabled state." }, { "name": "search-background", "type": "Color", "description": "The background color of an input group of type search. PRIMARY for search inputs." }, { "name": "search-disabled-background", "type": "Color", "description": "The background color of an input group of type search in the disabled state. Auto-derived from search-background." }, { "name": "search-resting-shadow", "type": "List", "description": "The shadow color of an input group of type search in its resting state." }, { "name": "search-hover-shadow", "type": "List", "description": "The shadow color of an input group of type search in its hover state." }, { "name": "search-disabled-shadow", "type": "List", "description": "The shadow color of an input group of type search in its disabled state." }, { "name": "success-secondary-color", "type": "Color", "description": "The success color used in the valid state." }, { "name": "warning-secondary-color", "type": "Color", "description": "The warning color used in the warning state." }, { "name": "error-secondary-color", "type": "Color", "description": "The error color used in the error state." }, { "name": "box-border-radius", "type": "List", "description": "The border radius used for box input." }, { "name": "border-border-radius", "type": "List", "description": "The border radius used for border input." }, { "name": "search-border-radius", "type": "List", "description": "The border radius used for search input." }, { "name": "placeholder-color", "type": "Color", "description": "The placeholder color of an input group. Auto-derived from box/search-background." }, { "name": "hover-placeholder-color", "type": "Color", "description": "The placeholder color of an input group on hover. Auto-derived from box-background-hover or placeholder-color." }, { "name": "disabled-placeholder-color", "type": "Color", "description": "The disabled placeholder color of an input group. Auto-derived from disabled background." }] },
+  "date-time-input": { "name": "date-time-input", "themeFunctionName": "date-time-input-theme", "description": "Date Time Input Theme", "primaryTokens": [{ "name": "box-background", "description": "Box type input background." }, { "name": "search-background", "description": "Search type input background." }, { "name": "border-color", "description": "Border color for border/fluent types." }, { "name": "idle-bottom-line-color", "description": "Bottom line color (material)." }, { "name": "focused-border-color", "description": "Focused state accent color." }], "primaryTokensSummary": "For Material variant, set `$box-background` for box type inputs.", "tokens": [{ "name": "idle-text-color", "type": "Color", "description": "The input text color in the idle state. Auto-derived from box/search-background." }, { "name": "filled-text-color", "type": "Color", "description": "The input text color in the filled state. Auto-derived from box/search-background." }, { "name": "filled-text-hover-color", "type": "Color", "description": "The input text color in the filled state on hover." }, { "name": "focused-text-color", "type": "Color", "description": "The input text color in the focused state. Auto-derived from box-background-focus or search-background." }, { "name": "disabled-text-color", "type": "Color", "description": "The input text color in the disabled state. Auto-derived from disabled background." }, { "name": "helper-text-color", "type": "Color", "description": "The helper text color." }, { "name": "text-error-color", "type": "Color", "description": "The color used for the error message." }, { "name": "icon-error-color", "type": "Color", "description": "The color used for the error icon." }, { "name": "input-prefix-color", "type": "Color", "description": "The input prefix color in the idle state. Auto-derived from box/search-background." }, { "name": "input-prefix-background", "type": "Color", "description": "The background color of an input prefix in the idle state. Synced with suffix-background." }, { "name": "input-prefix-color--filled", "type": "Color", "description": "The input prefix color in the filled state. Auto-derived from prefix-color or background." }, { "name": "input-prefix-background--filled", "type": "Color", "description": "The background color of an input prefix in the filled state." }, { "name": "input-prefix-color--focused", "type": "Color", "description": "The input prefix color in the focused state. Auto-derived from prefix-color--filled or background." }, { "name": "input-prefix-background--focused", "type": "Color", "description": "The background color of an input prefix in the focused state." }, { "name": "input-suffix-color", "type": "Color", "description": "The input suffix color in the idle state. Auto-derived from box/search-background. Synced with prefix-color." }, { "name": "input-suffix-background", "type": "Color", "description": "The background color of an input suffix in the idle state. Synced with prefix-background." }, { "name": "input-suffix-color--filled", "type": "Color", "description": "The input suffix color in the filled state." }, { "name": "input-suffix-background-filled", "type": "Color", "description": "The background color of an input suffix in the filled state." }, { "name": "input-suffix-color--focused", "type": "Color", "description": "The input suffix color in the focused state." }, { "name": "input-suffix-background--focused", "type": "Color", "description": "The background color of an input suffix in the focused state." }, { "name": "idle-secondary-color", "type": "Color", "description": "The label color in the idle state. Auto-derived from box-background or placeholder-color." }, { "name": "focused-secondary-color", "type": "Color", "description": "The label color in the focused state. Auto-derived from focused-bottom-line-color or focused-border-color." }, { "name": "idle-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the idle state. PRIMARY for material bottom line." }, { "name": "hover-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the hover state. Auto-derived from idle-bottom-line-color." }, { "name": "focused-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the focused state. Auto-derived from hover-bottom-line-color." }, { "name": "disabled-bottom-line-color", "type": "Color", "description": "The bottom line and border colors in the disabled state." }, { "name": "border-color", "type": "Color", "description": "The border color for input groups of type border and fluent. PRIMARY for border inputs." }, { "name": "hover-border-color", "type": "Color", "description": "The hover input border for input groups of type border and fluent. Auto-derived from border-color." }, { "name": "focused-border-color", "type": "Color", "description": "The focused input border color for input groups of type border and fluent. Auto-derived from hover-border-color." }, { "name": "disabled-border-color", "type": "Color", "description": "The disabled border color for input groups of type border and fluent." }, { "name": "box-background", "type": "Color", "description": "The background color of an input group of type box. PRIMARY for material box inputs." }, { "name": "box-background-hover", "type": "Color", "description": "The background color on hover of an input group of type box. Auto-derived from box-background." }, { "name": "box-background-focus", "type": "Color", "description": "The background color on focus of an input group of type box. Auto-derived from box-background." }, { "name": "box-disabled-background", "type": "Color", "description": "The background color of an input group of type box in the disabled state. Auto-derived from box-background." }, { "name": "border-background", "type": "Color", "description": "The background color of an input group of type border." }, { "name": "border-disabled-background", "type": "Color", "description": "The background color of an input group of type border in the disabled state." }, { "name": "search-background", "type": "Color", "description": "The background color of an input group of type search. PRIMARY for search inputs." }, { "name": "search-disabled-background", "type": "Color", "description": "The background color of an input group of type search in the disabled state. Auto-derived from search-background." }, { "name": "search-resting-shadow", "type": "List", "description": "The shadow color of an input group of type search in its resting state." }, { "name": "search-hover-shadow", "type": "List", "description": "The shadow color of an input group of type search in its hover state." }, { "name": "search-disabled-shadow", "type": "List", "description": "The shadow color of an input group of type search in its disabled state." }, { "name": "success-secondary-color", "type": "Color", "description": "The success color used in the valid state." }, { "name": "warning-secondary-color", "type": "Color", "description": "The warning color used in the warning state." }, { "name": "error-secondary-color", "type": "Color", "description": "The error color used in the error state." }, { "name": "box-border-radius", "type": "List", "description": "The border radius used for box input." }, { "name": "border-border-radius", "type": "List", "description": "The border radius used for border input." }, { "name": "search-border-radius", "type": "List", "description": "The border radius used for search input." }, { "name": "placeholder-color", "type": "Color", "description": "The placeholder color of an input group. Auto-derived from box/search-background." }, { "name": "hover-placeholder-color", "type": "Color", "description": "The placeholder color of an input group on hover. Auto-derived from box-background-hover or placeholder-color." }, { "name": "disabled-placeholder-color", "type": "Color", "description": "The disabled placeholder color of an input group. Auto-derived from disabled background." }] },
   label,
   list,
   navbar,
@@ -93,9 +93,9 @@ const themesData = {
   snackbar,
   splitter,
   stepper,
-  "switch": { "name": "switch", "themeFunctionName": "switch-theme", "description": "Switch Theme", "primaryTokens": [{ "name": "track-on-color", "description": "The ON state track color." }, { "name": "track-off-color", "description": "The OFF state track color." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "thumb-on-color", "type": "Color", "description": "The color of the thumb when the switch is on. Auto-derived from track-on-color (non-material) or bidirectional with track-on-color (material)." }, { "name": "track-on-color", "type": "Color", "description": "The color of the track when the switch is on. PRIMARY for ON state." }, { "name": "track-on-hover-color", "type": "Color", "description": "The color of the track when the switch is on and hovered. Auto-derived from track-on-color." }, { "name": "thumb-off-color", "type": "Color", "description": "The color of the thumb when the switch is off. Auto-derived from track-off-color or border-color." }, { "name": "thumb-off-hover-color", "type": "Color", "description": "The color of the thumb when the switch is off and hovered. Auto-derived from thumb-off-color." }, { "name": "track-off-color", "type": "Color", "description": "The color of the track when the switch is off. PRIMARY for OFF state." }, { "name": "thumb-disabled-color", "type": "Color", "description": "The color of the thumb when the switch is disabled. Auto-derived from thumb-off-color." }, { "name": "thumb-on-disabled-color", "type": "Color", "description": "The color of the thumb when the switch is on and disabled. Auto-derived from thumb-on-color." }, { "name": "track-disabled-color", "type": "Color", "description": "The color of the track when the switch is disabled. Auto-derived from track-off-color." }, { "name": "track-on-disabled-color", "type": "Color", "description": "The color of the track when the switch is on and disabled. Auto-derived from track-on-color." }, { "name": "label-color", "type": "Color", "description": "The color of the switch label" }, { "name": "label-hover-color", "type": "Color", "description": "The color of the switch label on hover." }, { "name": "label-disabled-color", "type": "Color", "description": "The color of the switch label when the switch is disabled" }, { "name": "resting-shadow", "type": "box-shadow", "description": "The shadow used for the thumb in resting state of the switch." }, { "name": "hover-shadow", "type": "box-shadow", "description": "The shadow used for the thumb in hover state of the switch." }, { "name": "disabled-shadow", "type": "box-shadow", "description": "The shadow used for the thumb in disable state of the switch." }, { "name": "border-radius-track", "type": "List", "description": "The border radius used for switch track." }, { "name": "border-radius-thumb", "type": "List", "description": "The border radius used for switch thumb." }, { "name": "border-radius-ripple", "type": "List", "description": "The border radius used for switch ripple." }, { "name": "border-color", "type": "Color", "description": "The border color of the switch. Auto-derived from thumb-off-color." }, { "name": "border-hover-color", "type": "Color", "description": "The border color of the switch on hover. Auto-derived from track-off-color or border-color." }, { "name": "border-disabled-color", "type": "Color", "description": "The border color of the switch when it is disabled. Auto-derived from border-color." }, { "name": "border-on-color", "type": "Color", "description": "The border color when the switch is on. Auto-derived from track-on-color." }, { "name": "border-on-hover-color", "type": "Color", "description": "The border color when the switch is on and hovered. Auto-derived from border-on-color." }, { "name": "focus-outline-color", "type": "Color", "description": "The focus outlined color. Auto-derived from border-color (indigo) or track-on-color (bootstrap)." }, { "name": "focus-outline-color-focused", "type": "Color", "description": "The focus outlined color for focused state. Auto-derived from border-on-color (indigo)." }, { "name": "focus-fill-color", "type": "Color", "description": "The focus fill color. Auto-derived from track-on-color (bootstrap)." }, { "name": "focus-fill-hover-color", "type": "Color", "description": "The focus fill color on hover. Auto-derived from focus-fill-color." }] },
+  "switch": { "name": "switch", "themeFunctionName": "switch-theme", "description": "Switch Theme", "primaryTokens": [{ "name": "track-on-color", "description": "The ON state track color." }, { "name": "track-off-color", "description": "The OFF state track color." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "thumb-on-color", "type": "Color", "description": "The color of the thumb when the switch is on. Auto-derived from track-on-color (non-material) or bidirectional with track-on-color (material)." }, { "name": "track-on-color", "type": "Color", "description": "The color of the track when the switch is on. PRIMARY for ON state." }, { "name": "track-on-hover-color", "type": "Color", "description": "The color of the track when the switch is on and hovered. Auto-derived from track-on-color." }, { "name": "thumb-off-color", "type": "Color", "description": "The color of the thumb when the switch is off. Auto-derived from track-off-color or border-color." }, { "name": "thumb-off-hover-color", "type": "Color", "description": "The color of the thumb when the switch is off and hovered. Auto-derived from thumb-off-color." }, { "name": "track-off-color", "type": "Color", "description": "The color of the track when the switch is off. PRIMARY for OFF state." }, { "name": "thumb-disabled-color", "type": "Color", "description": "The color of the thumb when the switch is disabled. Auto-derived from thumb-off-color." }, { "name": "thumb-on-disabled-color", "type": "Color", "description": "The color of the thumb when the switch is on and disabled. Auto-derived from thumb-on-color." }, { "name": "track-disabled-color", "type": "Color", "description": "The color of the track when the switch is disabled. Auto-derived from track-off-color." }, { "name": "track-on-disabled-color", "type": "Color", "description": "The color of the track when the switch is on and disabled. Auto-derived from track-on-color." }, { "name": "label-color", "type": "Color", "description": "The color of the switch label" }, { "name": "label-hover-color", "type": "Color", "description": "The color of the switch label on hover." }, { "name": "label-disabled-color", "type": "Color", "description": "The color of the switch label when the switch is disabled" }, { "name": "resting-shadow", "type": "List", "description": "The shadow used for the thumb in resting state of the switch." }, { "name": "hover-shadow", "type": "List", "description": "The shadow used for the thumb in hover state of the switch." }, { "name": "disabled-shadow", "type": "List", "description": "The shadow used for the thumb in disable state of the switch." }, { "name": "border-radius-track", "type": "List", "description": "The border radius used for switch track." }, { "name": "border-radius-thumb", "type": "List", "description": "The border radius used for switch thumb." }, { "name": "border-radius-ripple", "type": "List", "description": "The border radius used for switch ripple." }, { "name": "border-color", "type": "Color", "description": "The border color of the switch. Auto-derived from thumb-off-color." }, { "name": "border-hover-color", "type": "Color", "description": "The border color of the switch on hover. Auto-derived from track-off-color or border-color." }, { "name": "border-disabled-color", "type": "Color", "description": "The border color of the switch when it is disabled. Auto-derived from border-color." }, { "name": "border-on-color", "type": "Color", "description": "The border color when the switch is on. Auto-derived from track-on-color." }, { "name": "border-on-hover-color", "type": "Color", "description": "The border color when the switch is on and hovered. Auto-derived from border-on-color." }, { "name": "focus-outline-color", "type": "Color", "description": "The focus outlined color. Auto-derived from border-color (indigo) or track-on-color (bootstrap)." }, { "name": "focus-outline-color-focused", "type": "Color", "description": "The focus outlined color for focused state. Auto-derived from border-on-color (indigo)." }, { "name": "focus-fill-color", "type": "Color", "description": "The focus fill color. Auto-derived from track-on-color (bootstrap)." }, { "name": "focus-fill-hover-color", "type": "Color", "description": "The focus fill color on hover. Auto-derived from focus-fill-color." }] },
   tabs,
-  "time-picker": { "name": "time-picker", "themeFunctionName": "time-picker-theme", "description": "Time Picker Theme", "primaryTokens": [{ "name": "background-color", "description": "The picker panel background." }, { "name": "header-background", "description": "The header background." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "text-color", "type": "Color", "description": "The text color of a open time picker. Auto-derived from background-color." }, { "name": "hover-text-color", "type": "Color", "description": "The hover text color of a open time picker. Auto-derived from text-color." }, { "name": "selected-text-color", "type": "Color", "description": "The text color of a selected item in time picker. Auto-derived from background-color or active-item-background." }, { "name": "active-item-background", "type": "Color", "description": "The background color for current item in focused column inside the time picker. Auto-derived from selected-text-color or background-color." }, { "name": "active-item-foreground", "type": "Color", "description": "The foreground color for current item in focused column inside the time picker. Auto-derived from active-item-background." }, { "name": "disabled-text-color", "type": "Color", "description": "The text color for disabled values. Auto-derived from disabled-item-background." }, { "name": "disabled-item-background", "type": "Color", "description": "The background color for disabled values." }, { "name": "header-background", "type": "Color", "description": "The header background color of a time picker. Auto-derived from selected-text-color or background-color." }, { "name": "header-hour-text-color", "type": "Color", "description": "The header hour text color of a time picker. Auto-derived from header-background." }, { "name": "background-color", "type": "Color", "description": "The time-picker panel background color. PRIMARY - derives text, selected, active, border colors." }, { "name": "time-item-size", "type": "Number", "description": "The height of the time item." }, { "name": "divider-color", "type": "Color", "description": "The color for the actions area divider. Auto-derived from border-color." }, { "name": "border-color", "type": "Color", "description": "The border color around the time picker. Auto-derived from background-color." }, { "name": "modal-shadow", "type": "box-shadow", "description": "The custom shadow to be used for the time picker in modal mode." }, { "name": "dropdown-shadow", "type": "box-shadow", "description": "The custom shadow to be used for the time picker in dropdown mode." }, { "name": "border-radius", "type": "List", "description": "The border radius used for the outline of the picker." }, { "name": "active-item-border-radius", "type": "List", "description": "The border radius used for the outline of the currently active item (hours, minutes, AM/PM)." }] },
+  "time-picker": { "name": "time-picker", "themeFunctionName": "time-picker-theme", "description": "Time Picker Theme", "primaryTokens": [{ "name": "background-color", "description": "The picker panel background." }, { "name": "header-background", "description": "The header background." }], "primaryTokensSummary": "Derived colors are auto-calculated for contrast.", "tokens": [{ "name": "text-color", "type": "Color", "description": "The text color of a open time picker. Auto-derived from background-color." }, { "name": "hover-text-color", "type": "Color", "description": "The hover text color of a open time picker. Auto-derived from text-color." }, { "name": "selected-text-color", "type": "Color", "description": "The text color of a selected item in time picker. Auto-derived from background-color or active-item-background." }, { "name": "active-item-background", "type": "Color", "description": "The background color for current item in focused column inside the time picker. Auto-derived from selected-text-color or background-color." }, { "name": "active-item-foreground", "type": "Color", "description": "The foreground color for current item in focused column inside the time picker. Auto-derived from active-item-background." }, { "name": "disabled-text-color", "type": "Color", "description": "The text color for disabled values. Auto-derived from disabled-item-background." }, { "name": "disabled-item-background", "type": "Color", "description": "The background color for disabled values." }, { "name": "header-background", "type": "Color", "description": "The header background color of a time picker. Auto-derived from selected-text-color or background-color." }, { "name": "header-hour-text-color", "type": "Color", "description": "The header hour text color of a time picker. Auto-derived from header-background." }, { "name": "background-color", "type": "Color", "description": "The time-picker panel background color. PRIMARY - derives text, selected, active, border colors." }, { "name": "time-item-size", "type": "Number", "description": "The height of the time item." }, { "name": "divider-color", "type": "Color", "description": "The color for the actions area divider. Auto-derived from border-color." }, { "name": "border-color", "type": "Color", "description": "The border color around the time picker. Auto-derived from background-color." }, { "name": "modal-shadow", "type": "List", "description": "The custom shadow to be used for the time picker in modal mode." }, { "name": "dropdown-shadow", "type": "List", "description": "The custom shadow to be used for the time picker in dropdown mode." }, { "name": "border-radius", "type": "List", "description": "The border radius used for the outline of the picker." }, { "name": "active-item-border-radius", "type": "List", "description": "The border radius used for the outline of the currently active item (hours, minutes, AM/PM)." }] },
   toast,
   tooltip,
   tree,