@tylertech/forge 3.10.5 → 3.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +341 -139
- package/dist/app-bar/forge-app-bar.css +11 -5
- package/dist/button/forge-button.css +12 -6
- package/dist/checkbox/forge-checkbox.css +21 -17
- package/dist/chips/forge-chips.css +10 -4
- package/dist/field/forge-field.css +7 -5
- package/dist/floating-action-button/forge-floating-action-button.css +10 -6
- package/dist/forge.css +6 -1
- package/dist/icon-button/forge-icon-button.css +10 -4
- package/dist/lib.js +22 -22
- package/dist/lib.js.map +4 -4
- package/dist/list/forge-list.css +57 -3
- package/dist/radio/forge-radio.css +20 -12
- package/dist/skip-link/forge-skip-link.css +36 -32
- package/dist/switch/forge-switch.css +7 -5
- package/dist/table/forge-table.css +6 -1
- package/dist/vscode.html-custom-data.json +53 -43
- package/esm/accordion/accordion.d.ts +2 -0
- package/esm/accordion/accordion.js +2 -0
- package/esm/app-bar/app-bar/app-bar-adapter.js +2 -2
- package/esm/app-bar/app-bar/app-bar.d.ts +1 -1
- package/esm/app-bar/app-bar/app-bar.js +1 -1
- package/esm/app-bar/help-button/app-bar-help-button.d.ts +1 -1
- package/esm/app-bar/help-button/app-bar-help-button.js +1 -1
- package/esm/app-bar/menu-button/app-bar-menu-button.d.ts +1 -1
- package/esm/app-bar/menu-button/app-bar-menu-button.js +1 -1
- package/esm/app-bar/notification-button/app-bar-notification-button.d.ts +2 -0
- package/esm/app-bar/notification-button/app-bar-notification-button.js +2 -0
- package/esm/app-bar/profile-button/app-bar-profile-button-adapter.d.ts +2 -1
- package/esm/app-bar/profile-button/app-bar-profile-button-adapter.js +2 -0
- package/esm/app-bar/profile-button/app-bar-profile-button.d.ts +2 -0
- package/esm/app-bar/profile-button/app-bar-profile-button.js +2 -0
- package/esm/app-bar/search/app-bar-search.d.ts +2 -0
- package/esm/app-bar/search/app-bar-search.js +2 -0
- package/esm/autocomplete/autocomplete.d.ts +2 -0
- package/esm/autocomplete/autocomplete.js +2 -0
- package/esm/backdrop/backdrop.d.ts +2 -0
- package/esm/backdrop/backdrop.js +2 -0
- package/esm/badge/badge.d.ts +2 -0
- package/esm/badge/badge.js +2 -0
- package/esm/button/base/base-button-adapter.js +2 -2
- package/esm/button-area/button-area-adapter.js +2 -2
- package/esm/button-toggle/button-toggle/button-toggle-adapter.js +2 -2
- package/esm/button-toggle/button-toggle/button-toggle.d.ts +2 -0
- package/esm/button-toggle/button-toggle/button-toggle.js +2 -0
- package/esm/button-toggle/button-toggle-group/button-toggle-group.d.ts +1 -1
- package/esm/button-toggle/button-toggle-group/button-toggle-group.js +1 -1
- package/esm/calendar/calendar-menu/calendar-menu.js +1 -1
- package/esm/calendar/calendar.d.ts +2 -0
- package/esm/calendar/calendar.js +3 -1
- package/esm/card/card.d.ts +2 -0
- package/esm/card/card.js +2 -0
- package/esm/chip-field/chip-field.d.ts +2 -0
- package/esm/chip-field/chip-field.js +2 -0
- package/esm/chips/chip/chip-adapter.js +2 -2
- package/esm/chips/chip/chip.d.ts +2 -0
- package/esm/chips/chip/chip.js +2 -0
- package/esm/color-picker/color-picker.d.ts +2 -0
- package/esm/color-picker/color-picker.js +3 -1
- package/esm/core/utils/a11y-utils.js +17 -0
- package/esm/core/utils/utils.js +8 -2
- package/esm/date-picker/date-picker.d.ts +2 -0
- package/esm/date-picker/date-picker.js +2 -0
- package/esm/date-range-picker/date-range-picker.d.ts +2 -0
- package/esm/date-range-picker/date-range-picker.js +2 -0
- package/esm/deprecated/button/deprecated-button.js +3 -3
- package/esm/deprecated/icon-button/deprecated-icon-button.js +2 -2
- package/esm/drawer/drawer/drawer.d.ts +2 -0
- package/esm/drawer/drawer/drawer.js +3 -1
- package/esm/drawer/mini-drawer/mini-drawer.d.ts +2 -0
- package/esm/drawer/mini-drawer/mini-drawer.js +3 -1
- package/esm/drawer/modal-drawer/modal-drawer.d.ts +2 -0
- package/esm/drawer/modal-drawer/modal-drawer.js +3 -1
- package/esm/field/field-adapter.js +2 -2
- package/esm/field/field-core.d.ts +3 -3
- package/esm/focus-indicator/focus-indicator-constants.d.ts +1 -11
- package/esm/focus-indicator/focus-indicator-constants.js +2 -17
- package/esm/focus-indicator/focus-indicator.d.ts +52 -25
- package/esm/focus-indicator/focus-indicator.js +137 -61
- package/esm/focus-indicator/index.d.ts +0 -2
- package/esm/focus-indicator/index.js +0 -2
- package/esm/icon-button/icon-button.d.ts +2 -0
- package/esm/icon-button/icon-button.js +2 -0
- package/esm/keyboard-shortcut/keyboard-shortcut.d.ts +2 -0
- package/esm/keyboard-shortcut/keyboard-shortcut.js +2 -0
- package/esm/list/list/list.js +1 -1
- package/esm/list/list-item/list-item-constants.js +1 -1
- package/esm/list/list-item/list-item-core.d.ts +2 -0
- package/esm/list/list-item/list-item-core.js +29 -6
- package/esm/list/list-item/list-item.d.ts +1 -0
- package/esm/list/list-item/list-item.js +2 -1
- package/esm/list-dropdown/list-dropdown-constants.d.ts +6 -0
- package/esm/list-dropdown/list-dropdown-constants.js +6 -1
- package/esm/list-dropdown/list-dropdown-utils.js +28 -1
- package/esm/menu/menu.d.ts +2 -0
- package/esm/menu/menu.js +2 -0
- package/esm/page-state/page-state.d.ts +2 -1
- package/esm/page-state/page-state.js +2 -1
- package/esm/paginator/paginator.d.ts +2 -0
- package/esm/paginator/paginator.js +2 -0
- package/esm/popover/popover.js +1 -1
- package/esm/profile-card/profile-card.d.ts +2 -0
- package/esm/profile-card/profile-card.js +2 -0
- package/esm/select/core/base-select-constants.d.ts +4 -0
- package/esm/select/core/base-select-core.d.ts +22 -2
- package/esm/select/core/base-select-core.js +217 -40
- package/esm/select/option/option.d.ts +2 -0
- package/esm/select/option/option.js +2 -0
- package/esm/select/option-group/option-group.d.ts +2 -0
- package/esm/select/option-group/option-group.js +2 -0
- package/esm/select/select/select-constants.d.ts +5 -0
- package/esm/select/select/select-constants.js +5 -2
- package/esm/select/select/select.d.ts +14 -2
- package/esm/select/select/select.js +22 -1
- package/esm/select/select-dropdown/select-dropdown.d.ts +2 -0
- package/esm/select/select-dropdown/select-dropdown.js +2 -0
- package/esm/split-button/split-button.js +1 -1
- package/esm/split-view/split-view/split-view.d.ts +2 -0
- package/esm/split-view/split-view/split-view.js +2 -0
- package/esm/split-view/split-view-panel/split-view-panel.d.ts +2 -0
- package/esm/split-view/split-view-panel/split-view-panel.js +3 -1
- package/esm/stepper/step/step.d.ts +2 -0
- package/esm/stepper/step/step.js +3 -1
- package/esm/stepper/stepper/stepper.d.ts +2 -0
- package/esm/stepper/stepper/stepper.js +2 -0
- package/esm/table/table-utils.js +3 -0
- package/esm/table/table.d.ts +2 -0
- package/esm/table/table.js +4 -1
- package/esm/tabs/tab/tab-adapter.js +2 -2
- package/esm/tabs/tab/tab.d.ts +2 -0
- package/esm/tabs/tab/tab.js +2 -0
- package/esm/time-picker/time-picker.d.ts +2 -0
- package/esm/time-picker/time-picker.js +2 -0
- package/esm/tooltip/tooltip-adapter.d.ts +6 -0
- package/esm/tooltip/tooltip-adapter.js +9 -0
- package/esm/tooltip/tooltip-constants.d.ts +1 -0
- package/esm/tooltip/tooltip-constants.js +2 -1
- package/esm/tooltip/tooltip-core.d.ts +20 -0
- package/esm/tooltip/tooltip-core.js +96 -2
- package/esm/tooltip/tooltip.js +1 -1
- package/esm/view-switcher/view/view.d.ts +2 -0
- package/esm/view-switcher/view/view.js +2 -0
- package/esm/view-switcher/view-switcher.d.ts +2 -0
- package/esm/view-switcher/view-switcher.js +2 -0
- package/package.json +4 -4
- package/sass/focus-indicator/focus-indicator.scss +1 -1
- package/sass/icon-button/forge-icon-button.scss +3 -3
- package/sass/list/forge-list.scss +6 -6
- package/sass/table/_core.scss +13 -1
- package/sass/tooltip/_core.scss +0 -2
- package/esm/focus-indicator/focus-indicator-adapter.d.ts +0 -29
- package/esm/focus-indicator/focus-indicator-adapter.js +0 -37
- package/esm/focus-indicator/focus-indicator-core.d.ts +0 -48
- package/esm/focus-indicator/focus-indicator-core.js +0 -129
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"tags": [
|
|
5
5
|
{
|
|
6
6
|
"name": "forge-accordion",
|
|
7
|
-
"description": "
|
|
7
|
+
"description": "Accordions display a collection of panels that can be expanded or collapsed to show content.\n---\n\n\n### **Events:**\n - **forge-accordion-toggle** - Dispatched when a child expansion panel is toggled. Includes the related expansion panel element in the event detail.",
|
|
8
8
|
"attributes": [
|
|
9
9
|
{
|
|
10
10
|
"name": "panel-selector",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
},
|
|
17
17
|
{
|
|
18
18
|
"name": "forge-autocomplete",
|
|
19
|
-
"description": "
|
|
19
|
+
"description": "Autocomplete components provide real-time suggestions as users type in a text field.\n---\n\n\n### **Events:**\n - **forge-autocomplete-change** - Fired when the value changes.\n- **forge-autocomplete-select** - Fired when an option is selected. Only applies when in \"stateless\" `mode`.\n- **forge-autocomplete-scrolled-bottom** - Fired when the dropdown is scrolled to the bottom. Only applies when `observe-scroll` is enabled.\n\n### **Methods:**\n - **appendOptions(options: _IAutocompleteOption[] | IAutocompleteOptionGroup[]_): _void_** - Adds options to the dropdown while it is open. Has no effect if the dropdown is closed.\n- **openDropdown(): _void_** - Opens the dropdown.\n- **closeDropdown(): _void_** - Closes the dropdown.\n- **forceFilter(opts: _IAutocompleteForceFilterOptions_): _void_** - Forces the filter callback to be executed to update the current selection state with new options.",
|
|
20
20
|
"attributes": [
|
|
21
21
|
{
|
|
22
22
|
"name": "mode",
|
|
@@ -150,7 +150,7 @@
|
|
|
150
150
|
},
|
|
151
151
|
{
|
|
152
152
|
"name": "forge-backdrop",
|
|
153
|
-
"description": "
|
|
153
|
+
"description": "Backdrops provide a semi-transparent overlay behind modal content like dialogs and drawers.\n---\n\n\n### **Methods:**\n - **show(): _void_** - Immediately shows the backdrop by setting the `visibility` to `true` without animations.\n- **hide(): _void_** - Immediately hides the backdrop by setting the `visibility` to `false` without animations.\n- **fadeIn(): _Promise<void>_** - Sets the `visibility` to `true` and animates in.\n- **fadeOut(): _Promise<void>_** - Sets the `visibility` to `false` and animates out.\n\n### **CSS Properties:**\n - **--forge-backdrop-background** - The backdrop background color. _(default: undefined)_\n- **--forge-backdrop-opacity** - The backdrop opacity. _(default: undefined)_\n- **--forge-backdrop-z-index** - The backdrop z-index. _(default: undefined)_\n- **--forge-backdrop-enter-animation-duration** - The animation duration for the enter animation. _(default: undefined)_\n- **--forge-backdrop-enter-animation-easing** - The animation easing for the enter animation. _(default: undefined)_\n- **--forge-backdrop-exit-animation-duration** - The animation duration for the exit animation. _(default: undefined)_\n- **--forge-backdrop-exit-animation-easing** - The animation easing for the exit animation. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root element of the backdrop.",
|
|
154
154
|
"attributes": [
|
|
155
155
|
{
|
|
156
156
|
"name": "visible",
|
|
@@ -167,7 +167,7 @@
|
|
|
167
167
|
},
|
|
168
168
|
{
|
|
169
169
|
"name": "forge-badge",
|
|
170
|
-
"description": "
|
|
170
|
+
"description": "Badges display small amounts of information like counts, status indicators, or notifications.\n---\n\n\n### **Slots:**\n - _default_ - Default content placed inside the badge.\n- **start** - Content placed before the default content.\n- **end** - Content placed after the default content.\n\n### **CSS Properties:**\n - **--forge-badge-background** - The background color. _(default: undefined)_\n- **--forge-badge-color** - The text color. _(default: undefined)_\n- **--forge-badge-shape** - The shape radius. _(default: undefined)_\n- **--forge-badge-padding-inline** - The inline padding. _(default: undefined)_\n- **--forge-badge-padding-block** - The block padding. _(default: undefined)_\n- **--forge-badge-border-width** - The border width. _(default: undefined)_\n- **--forge-badge-border-color** - The border color. _(default: undefined)_\n- **--forge-badge-border-style** - The border style. _(default: undefined)_\n- **--forge-badge-gap** - The spacing between the content within the badge. _(default: undefined)_",
|
|
171
171
|
"attributes": [],
|
|
172
172
|
"references": []
|
|
173
173
|
},
|
|
@@ -291,7 +291,7 @@
|
|
|
291
291
|
},
|
|
292
292
|
{
|
|
293
293
|
"name": "forge-calendar",
|
|
294
|
-
"description": "
|
|
294
|
+
"description": "A flexible calendar component for date selection with support for single dates, ranges, multiple selections, and extensive customization options.\n---\n\n\n### **Events:**\n - **forge-calendar-date-select** - Event fired when a date is selected.\n- **forge-calendar-focus-change** - Event fired when the focus changes.\n- **forge-calendar-month-change** - Event fired when the month changes.\n- **forge-calendar-view-change** - Event fired when the view changes.\n\n### **Methods:**\n - **clear(): _void_** - Clears the selected date(s).\n- **deselectDate(date: _Date_): _void_** - Deselects a date.\n- **goToDate(date: _Date_, setFocus: _boolean_): _void_** - Navigates to a specific date.\n- **handleKey(evt: _KeyboardEvent_): _void_** - Handles a keyboard event.\n- **layout(): _void_** - Lays out the calendar.\n- **selectDate(date: _Date_): _void_** - Selects a date.\n- **setActiveDate(date: _Date_, setFocus: _boolean_): _boolean_** - Sets the active date.\n- **today(): _void_** - Sets the calendar to today.\n- **toggleDate(date: _Date_, force: _boolean_): _void_** - Toggles a date selection.\n\n### **Slots:**\n - **today-button-text** - Text to display in the today button.\n- **clear-button-text** - Text to display in the clear button.\n- **next-month-button-text** - Text to display in the next month button's tooltip.\n- **previous-month-button-text** - Text to display in the previous month button's tooltip.\n- **next-year-button-text** - Text to display in the next year button's tooltip.\n- **previous-year-button-text** - Text to display in the previous year button's tooltip.\n- **next-years-button-text** - Text to display in the next years button's tooltip.\n- **previous-years-button-text** - Text to display in the previous years button's tooltip.",
|
|
295
295
|
"attributes": [
|
|
296
296
|
{
|
|
297
297
|
"name": "allow-single-date-range",
|
|
@@ -404,7 +404,7 @@
|
|
|
404
404
|
},
|
|
405
405
|
{
|
|
406
406
|
"name": "forge-card",
|
|
407
|
-
"description": "
|
|
407
|
+
"description": "Cards group related content and actions together in a single container.\n---\n\n\n### **CSS Properties:**\n - **--forge-card-background** - The background color of the card. _(default: undefined)_\n- **--forge-card-height** - The height of the card. _(default: undefined)_\n- **--forge-card-width** - The width of the card. _(default: undefined)_\n- **--forge-card-outline-color** - The outline color of the card. _(default: undefined)_\n- **--forge-card-outline-width** - The outline width of the card. _(default: undefined)_\n- **--forge-card-outline-style** - The outline style of the card. _(default: undefined)_\n- **--forge-card-elevation** - The elevation/shadow of the card. _(default: undefined)_\n- **--forge-card-padding** - The padding of the card. _(default: undefined)_\n- **--forge-card-shape** - The shape (border-radius) of the card. _(default: undefined)_\n- **--forge-card-overflow** - The overflow of the card. _(default: undefined)_\n- **--forge-card-raised-elevation** - The elevation/shadow of the card when raised. _(default: undefined)_\n- **--forge-card-raised-outline-width** - The outline width of the card when raised. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.",
|
|
408
408
|
"attributes": [
|
|
409
409
|
{
|
|
410
410
|
"name": "no-padding",
|
|
@@ -468,7 +468,7 @@
|
|
|
468
468
|
},
|
|
469
469
|
{
|
|
470
470
|
"name": "forge-chip-field",
|
|
471
|
-
"description": "
|
|
471
|
+
"description": "A specialized input field component that allows users to create and manage a collection of chips representing text values or selections.\n---\n\n\n### **Events:**\n - **forge-button-toggle-select** - Dispatches when the user toggles the button.\n- **forge-field-popover-icon-click** - Dispatches when the user clicks the popover icon.\n\n### **Methods:**\n - **floatLabelWithoutAnimation(value: _boolean_): _void_** - Floats the label immediately. Only applies when the label is inset.\n\n### **Slots:**\n - _default_ - The default/unnamed slot for the field's input.\n- **label** - Renders its content as a positioned label.\n- **start** - Typically reserved for content/icons that render logically before the default slot content.\n- **end** - Typically reserved content/icons that render logically after the default slot content.\n- **accessory** - Used for content such as a button that is logically connected to the field but should appear distinct from the input\n- **support-text** - Used for content that provides additional information about the field. Aligns to the inline start of the field.\n- **support-text-end** - Used for content that provides additional information about the field. Aligns to the inline end of the field.\n\n### **CSS Properties:**\n - **--forge-chip-field-member-spacing** - The spacing between chip members. _(default: undefined)_\n- **--forge-chip-field-content-spacing** - The spacing around chips group. _(default: undefined)_\n- **--forge-field-background** - The background of the field surface. _(default: undefined)_\n- **--forge-field-tonal-background** - The background of the field surface in the tonal variant. _(default: undefined)_\n- **--forge-field-tonal-background-hover** - The background of the field surface in the tonal variant on hover. _(default: undefined)_\n- **--forge-field-filled-background** - The background of the field surface in the filled and raised variants. _(default: undefined)_\n- **--forge-field-outline-style** - The style of the field outline. _(default: undefined)_\n- **--forge-field-outline-width** - The width of the field outline. _(default: undefined)_\n- **--forge-field-shape** - The border radius of the field's corners. _(default: undefined)_\n- **--forge-field-height** - The height of the field in its default density. _(default: undefined)_\n- **--forge-field-inset-height** - The height of the field in its default density when the label is inset. _(default: undefined)_\n- **--forge-field-padding-inline** - The inline padding of the field. _(default: undefined)_\n- **--forge-field-padding-inline-start** - The inline start padding of the field. _(default: undefined)_\n- **--forge-field-padding-inline-end** - The inline end padding of the field. _(default: undefined)_\n- **--forge-field-inner-padding-inline** - The padding between elements slotted into the field. _(default: undefined)_\n- **--forge-field-support-text-margin-block** - The margin between the support text and the field. _(default: undefined)_\n- **--forge-field-support-text-gap** - The minimum gap between the support text and the support text end. _(default: undefined)_\n- **--forge-field-support-text-padding-inline** - The inline padding of the support text. _(default: undefined)_\n- **--forge-field-support-text-padding-inline-start** - The inline start padding of the support text. _(default: undefined)_\n- **--forge-field-support-text-padding-inline-end** - The inline end padding of the support text. _(default: undefined)_\n- **--forge-field-label-margin-inline** - The margin between the label and the field when the label is in an inline position. _(default: undefined)_\n- **--forge-field-label-margin-block** - The margin between the label and the field when the label is in the block start position. _(default: undefined)_\n- **--forge-field-required-padding** - The padding between the required indicator and the label. _(default: undefined)_\n- **--forge-field-required-content** - The content of the required indicator. _(default: undefined)_\n- **--forge-field-optional-padding** - The padding between the optional indicator and the label. _(default: undefined)_\n- **--forge-field-optional-content** - The content of the optional indicator. _(default: undefined)_\n- **--forge-field-multiline-resize** - The direction the field can be resized when multiline. _(default: undefined)_\n- **--forge-field-multiline-min-inline-size** - The minimum inline size the field can be resized to when multiline. _(default: undefined)_\n- **--forge-field-multiline-max-inline-size** - The maximum inline size the field can be resized to when multiline. _(default: undefined)_\n- **--forge-field-multiline-min-block-size** - The minimum block size the field can be resized to when multiline. _(default: undefined)_\n- **--forge-field-multiline-max-block-size** - The maximum block size the field can be resized to when multiline. _(default: undefined)_\n- **--forge-field-popover-icon-transition-duration** - The duration of the popover icon animation. _(default: undefined)_\n- **--forge-field-popover-icon-transition-timing** - The timing function of the popover icon animation. _(default: undefined)_\n- **--forge-field-popover-icon-open-rotation** - The rotation of the popover icon when open. _(default: undefined)_\n- **--forge-field-surface-animation-duration** - The duration of background and outline animations. _(default: undefined)_\n- **--forge-field-surface-animation-timing** - The timing function of background and outline animations. _(default: undefined)_\n- **--forge-field-surface-floating-animation-duration** - The duration of the floating label animation. _(default: undefined)_\n- **--forge-field-surface-floating-animation-timing** - The timing function of the floating label animation. _(default: undefined)_\n- **--forge-field-focus-indicator-width** - The width of the focus indicator. _(default: undefined)_\n- **--forge-field-disabled-opacity** - The opacity of the field when disabled. _(default: undefined)_\n- **--forge-field-disabled-background** - The background of the field when disabled. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **label** - The label element.\n- **input** - The element containing the input slot.\n- **start** - The element containing the start slot.\n- **end** - The element containing the end slot.\n- **popover-icon** - The popover icon element.\n- **accessory** - The element containing the accessory slot.\n- **support-text** - The support text element.\n- **support-text-end** - The element containing the support text end slot.\n- **outline** - The element containing the forge-focus-indicator element.\n- **focus-indicator** - The focus indicator element.",
|
|
472
472
|
"attributes": [
|
|
473
473
|
{
|
|
474
474
|
"name": "add-on-blur",
|
|
@@ -582,7 +582,7 @@
|
|
|
582
582
|
},
|
|
583
583
|
{
|
|
584
584
|
"name": "forge-color-picker",
|
|
585
|
-
"description": "
|
|
585
|
+
"description": "An interactive color selection component with support for multiple color formats (hex, RGB, HSV) and optional opacity control.\n---\n\n\n### **Events:**\n - **forge-color-picker-change** - Emits when the color value changed.",
|
|
586
586
|
"attributes": [
|
|
587
587
|
{
|
|
588
588
|
"name": "allow-opacity",
|
|
@@ -604,7 +604,7 @@
|
|
|
604
604
|
},
|
|
605
605
|
{
|
|
606
606
|
"name": "forge-date-picker",
|
|
607
|
-
"description": "
|
|
607
|
+
"description": "A date input component with an integrated calendar popup for selecting single dates with keyboard and mouse interaction support.\n---\n\n\n### **Events:**\n - **forge-date-picker-change** - Emits when the value of the date picker changes.\n- **forge-date-picker-open** - Emits when the date picker opens.\n- **forge-date-picker-close** - Emits when the date picker closes.\n- **forge-date-picker-input** - Emits when the user inputs a value into the date picker.",
|
|
608
608
|
"attributes": [
|
|
609
609
|
{
|
|
610
610
|
"name": "value",
|
|
@@ -698,7 +698,7 @@
|
|
|
698
698
|
},
|
|
699
699
|
{
|
|
700
700
|
"name": "forge-date-range-picker",
|
|
701
|
-
"description": "\n---\n\n\n### **Events:**\n - **forge-date-range-picker-change** - Emits when the value of the date range picker changes.\n- **forge-date-range-picker-open** - Emits when the date range picker calendar opens.\n- **forge-date-range-picker-close** - Emits when the date range picker calendar closes.\n- **forge-date-range-picker-input** - Emits when the user inputs a value into the date range picker.",
|
|
701
|
+
"description": "A date input component with integrated calendar popup for selecting date ranges with separate \"from\" and \"to\" date values.\n---\n\n\n### **Events:**\n - **forge-date-range-picker-change** - Emits when the value of the date range picker changes.\n- **forge-date-range-picker-open** - Emits when the date range picker calendar opens.\n- **forge-date-range-picker-close** - Emits when the date range picker calendar closes.\n- **forge-date-range-picker-input** - Emits when the user inputs a value into the date range picker.",
|
|
702
702
|
"attributes": [
|
|
703
703
|
{
|
|
704
704
|
"name": "allow-invalid-date",
|
|
@@ -1133,7 +1133,7 @@
|
|
|
1133
1133
|
},
|
|
1134
1134
|
{
|
|
1135
1135
|
"name": "focus-mode",
|
|
1136
|
-
"description": "The focus mode to use.",
|
|
1136
|
+
"description": "The focus mode to use. Valid values are `focusin` (default) and `focus`.",
|
|
1137
1137
|
"values": [{ "name": "FocusIndicatorFocusMode" }]
|
|
1138
1138
|
}
|
|
1139
1139
|
],
|
|
@@ -1188,7 +1188,7 @@
|
|
|
1188
1188
|
},
|
|
1189
1189
|
{
|
|
1190
1190
|
"name": "forge-icon-button",
|
|
1191
|
-
"description": "
|
|
1191
|
+
"description": "A clickable button component that displays an icon with support for different variants, themes, toggle states, and accessibility features.\n---\n\n\n### **Events:**\n - **click** - Fires when the button is clicked.\n- **forge-icon-button-toggle** - Fires when the icon button is toggled. Only applies in `toggle` mode.\n\n### **Methods:**\n - **click(): _void_** - Clicks the button.\n- **focus(options: _ExperimentalFocusOptions_): _void_** - Focuses the button.\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot for the icon.\n- **on** - The icon to show when in `toggle` mode when toggled \"on\".\n- **start** - Elements to logically render before the icon.\n- **end** - Elements to logically render after the icon.\n- **badge** - Absolutely positions the element in the top-end corner of the button (typically reserved for badge-like content).\n\n### **CSS Properties:**\n - **--forge-icon-button-display** - The display property of the button. _(default: undefined)_\n- **--forge-icon-button-size** - The height and min-width of the button. _(default: undefined)_\n- **--forge-icon-button-gap** - The gap between the icon content. _(default: undefined)_\n- **--forge-icon-button-icon-color** - The color of the icon. _(default: undefined)_\n- **--forge-icon-button-background-color** - The background color of the button. _(default: undefined)_\n- **--forge-icon-button-icon-size** - The size of the icon. _(default: undefined)_\n- **--forge-icon-button-cursor** - The cursor of the button. _(default: undefined)_\n- **--forge-icon-button-padding** - The inline padding of the button. _(default: undefined)_\n- **--forge-icon-button-border** - The border of the button. _(default: undefined)_\n- **--forge-icon-button-shadow** - The shadow of the button. _(default: undefined)_\n- **--forge-icon-button-transition-duration** - The transition duration of the button. _(default: undefined)_\n- **--forge-icon-button-transition-timing** - The transition timing of the button. _(default: undefined)_\n- **--forge-icon-button-shape** - The shape of the button. _(default: undefined)_\n- **--forge-icon-button-shape-start-start** - The start-start border-radius of the button. _(default: undefined)_\n- **--forge-icon-button-shape-start-end** - The start-end border-radius of the button. _(default: undefined)_\n- **--forge-icon-button-shape-end-start** - The end-start border-radius of the button. _(default: undefined)_\n- **--forge-icon-button-shape-end-end** - The end-end border-radius of the button. _(default: undefined)_\n- **--forge-icon-button-shape-squared** - The squared border-radius of the button. _(default: undefined)_\n- **--forge-icon-button-outlined-border-width** - The border width when in the outlined variant. _(default: undefined)_\n- **--forge-icon-button-outlined-border-style** - The border style when in the outlined variant. _(default: undefined)_\n- **--forge-icon-button-outlined-border-color** - The border color when in the outlined variant. _(default: undefined)_\n- **--forge-icon-button-tonal-icon-color** - The icon color when in the tonal variant. _(default: undefined)_\n- **--forge-icon-button-tonal-background-color** - The background color when in the tonal variant. _(default: undefined)_\n- **--forge-icon-button-filled-icon-color** - The icon color when in the filled variant. _(default: undefined)_\n- **--forge-icon-button-filled-background-color** - The background color when in the filled variant. _(default: undefined)_\n- **--forge-icon-button-raised-shadow** - The shadow when in the raised variant. _(default: undefined)_\n- **--forge-icon-button-raised-hover-shadow** - The shadow when in the raised variant and hovered. _(default: undefined)_\n- **--forge-icon-button-raised-active-shadow** - The shadow when in the raised variant and active. _(default: undefined)_\n- **--forge-icon-button-raised-disabled-shadow** - The shadow when in the raised variant and disabled. _(default: undefined)_\n- **--forge-icon-button-density-small-size** - The size of the button when in the small density. _(default: undefined)_\n- **--forge-icon-button-density-small-padding** - The padding of the button when in the small density. _(default: undefined)_\n- **--forge-icon-button-density-small-icon-size** - The size of the icon when in the small density. _(default: undefined)_\n- **--forge-icon-button-density-medium-size** - The size of the button when in the medium density. _(default: undefined)_\n- **--forge-icon-button-density-medium-padding** - The padding of the button when in the medium density. _(default: undefined)_\n- **--forge-icon-button-density-large-size** - The size of the button when in the large density. _(default: undefined)_\n- **--forge-icon-button-toggle-on-background-color** - The background color of the when in toggle mode and toggled on. _(default: undefined)_\n- **--forge-icon-button-toggle-on-icon-color** - The color of the icon when in toggle mode and toggled on. _(default: undefined)_\n- **--forge-icon-button-outlined-toggle-on-background-color** - The background color when in the outlined variant and toggled on. _(default: undefined)_\n- **--forge-icon-button-outlined-toggle-on-icon-color** - The icon color when in the outlined variant and toggled on. _(default: undefined)_\n- **--forge-icon-button-tonal-toggle-background-color** - The background color when in the tonal variant and toggled. _(default: undefined)_\n- **--forge-icon-button-tonal-toggle-on-background-color** - The background color when in the tonal variant and toggled on. _(default: undefined)_\n- **--forge-icon-button-tonal-toggle-on-icon-color** - The icon color when in the tonal variant and toggled on. _(default: undefined)_\n- **--forge-icon-button-filled-toggle-background-color** - The background color when in the filled variant and toggled. _(default: undefined)_\n- **--forge-icon-button-filled-toggle-icon-color** - The icon color when in the filled variant and toggled. _(default: undefined)_\n- **--forge-icon-button-filled-toggle-on-background-color** - The background color when in the filled variant and toggled on. _(default: undefined)_\n- **--forge-icon-button-filled-toggle-on-icon-color** - The icon color when in the filled variant and toggled on. _(default: undefined)_\n- **--forge-icon-button-disabled-cursor** - The cursor when the button is disabled. _(default: undefined)_\n- **--forge-icon-button-disabled-opacity** - The opacity when the button is disabled. _(default: undefined)_\n- **--forge-icon-button-popover-icon-padding** - The padding of the popover icon. _(default: undefined)_\n- **--forge-icon-button-focus-indicator-color** - The color of the focus indicator. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **focus-indicator** - The focus-indicator indicator element.\n- **state-layer** - The state-layer surface element.",
|
|
1192
1192
|
"attributes": [
|
|
1193
1193
|
{
|
|
1194
1194
|
"name": "type",
|
|
@@ -1237,7 +1237,7 @@
|
|
|
1237
1237
|
},
|
|
1238
1238
|
{
|
|
1239
1239
|
"name": "forge-keyboard-shortcut",
|
|
1240
|
-
"description": "
|
|
1240
|
+
"description": "A utility component that listens for keyboard shortcut combinations and triggers callbacks or events when the specified key bindings are activated.\n---\n\n\n### **Events:**\n - **forge-keyboard-shortcut-activate** - Event fired when the keyboard shortcut is activated.",
|
|
1241
1241
|
"attributes": [
|
|
1242
1242
|
{
|
|
1243
1243
|
"name": "key",
|
|
@@ -1361,7 +1361,7 @@
|
|
|
1361
1361
|
},
|
|
1362
1362
|
{
|
|
1363
1363
|
"name": "forge-menu",
|
|
1364
|
-
"description": "
|
|
1364
|
+
"description": "Menus display a list of options or actions that users can select from a dropdown.\n---\n\n\n### **Methods:**\n - **propagateKeyEvent(evt: _KeyboardEvent_): _void_** - Force propagates the key event from another element to this component.\n- **activateFirstOption(): _void_** - Activates the first option in the menu when open.",
|
|
1365
1365
|
"attributes": [
|
|
1366
1366
|
{
|
|
1367
1367
|
"name": "open",
|
|
@@ -1562,13 +1562,13 @@
|
|
|
1562
1562
|
},
|
|
1563
1563
|
{
|
|
1564
1564
|
"name": "forge-page-state",
|
|
1565
|
-
"description": "
|
|
1565
|
+
"description": "Page states display full-page messages for empty states, errors, or loading scenarios.\n---\n\n\n### **Slots:**\n - **graphic** - The slot where the graphic will be rendered.\n- **title** - The slot where the title will be rendered.\n- **message** - The slot where the message will be rendered.\n- **actions** - The slot where the actions will be rendered.\n\n### **CSS Properties:**\n - **--forge-page-state-width** - The width of the page state. _(default: undefined)_\n- **--forge-page-state-height** - The height of the page state. _(default: undefined)_\n- **--forge-page-state-spacing** - The spacing of the page state. _(default: undefined)_\n- **--forge-page-state-mobile-width** - The mobile width of the page state. _(default: undefined)_\n- **--forge-page-state-graphic-height** - The graphic height of the page state. _(default: undefined)_\n- **--forge-page-state-graphic-spacing** - The graphic spacing of the page state. _(default: undefined)_\n- **--forge-page-state-mobile-graphic-height** - The mobile graphic height of the page state. _(default: undefined)_\n- **--forge-page-state-title-color** - The title color of the page state. _(default: undefined)_\n- **--forge-page-state-title-spacing** - The title spacing of the page state. _(default: undefined)_\n- **--forge-page-state-message-color** - The message color of the page state. _(default: undefined)_\n- **--forge-page-state-message-spacing** - The message spacing of the page state. _(default: undefined)_\n- **--forge-page-state-actions-spacing** - The actions spacing of the page state. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **graphic-container** - The graphic container element.\n- **title-container** - The title container element.\n- **message-container** - The message container element.\n- **actions-container** - The actions container element.",
|
|
1566
1566
|
"attributes": [],
|
|
1567
1567
|
"references": []
|
|
1568
1568
|
},
|
|
1569
1569
|
{
|
|
1570
1570
|
"name": "forge-paginator",
|
|
1571
|
-
"description": "
|
|
1571
|
+
"description": "Paginators provide navigation controls for dividing content across multiple pages.\n---\n\n\n### **Events:**\n - **forge-paginator-change** - Dispatched when the paginator state changes.\n\n### **Methods:**\n - **focus(options: _FocusOptions_): _void_** - Sets focus to the first focusable element within the paginator.\n\n### **Slots:**\n - **label** - Overrides the label text when in the default variant.\n- **range-label** - Overrides the default range label with a custom label when in the default variant.\n- **alternative-range-label** - Overrides the default range label with a custom label when in the `alternative` variant.\n- **first-page-tooltip** - Overrides the default tooltip for the first page button.\n- **last-page-tooltip** - Overrides the default tooltip for the last page button.\n- **previous-page-tooltip** - Overrides the default tooltip for the previous page button.\n- **next-page-tooltip** - Overrides the default tooltip for the next page button.",
|
|
1572
1572
|
"attributes": [
|
|
1573
1573
|
{
|
|
1574
1574
|
"name": "page-index",
|
|
@@ -1737,7 +1737,7 @@
|
|
|
1737
1737
|
},
|
|
1738
1738
|
{
|
|
1739
1739
|
"name": "forge-profile-card",
|
|
1740
|
-
"description": "
|
|
1740
|
+
"description": "Profile cards display user information and actions in a structured card format.\n---\n",
|
|
1741
1741
|
"attributes": [],
|
|
1742
1742
|
"references": []
|
|
1743
1743
|
},
|
|
@@ -2094,7 +2094,7 @@
|
|
|
2094
2094
|
},
|
|
2095
2095
|
{
|
|
2096
2096
|
"name": "forge-table",
|
|
2097
|
-
"description": "
|
|
2097
|
+
"description": "A comprehensive data table component with features for selection, sorting, filtering, resizing, and row expansion functionality.\n---\n\n\n### **Events:**\n - **forge-table-row-click** - Dispatched when a row is clicked. Only applies when `allow-row-click` is specified.\n- **forge-table-select** - Dispatched when a row is selected. Only applies when `select` is specified.\n- **forge-table-select-double** - Dispatched when a row is double-clicked. Only applies when `select` is specified.\n- **forge-table-select-all** - Dispatched when the select all checkbox is toggled. Only applies when `select` and `multiselect` is specified.\n- **forge-table-sort** - Dispatched when a column is sorted.\n- **forge-table-filter** - Dispatched when a column is filtered. Only applies when `filter` is specified.\n- **forge-table-initialized** - Dispatched when the table is initialized in the DOM for the first time.\n- **forge-table-column-resize** - Dispatched when a column is resized.\n- **forge-table-before-body-rendered** - Dispatched before the table body is rendered.\n- **forge-table-body-rendered** - Dispatched when the table body is rendered.\n\n### **Methods:**\n - **hideColumn(columnIndex: _number_): _void_** - Hides a column from the table.\n- **showColumn(columnIndex: _number_): _void_** - Shows a hidden column in th table.\n- **isColumnHidden(columnIndex: _number_): _boolean_** - Determines if a column at the given index is hidden or not.\n- **getSelectedRows(): _any[]_** - Returns the selected row instances.\n- **selectRow(data: _any_): _void_** - Selects a row in the table. Only applicable if `select` is true.\n- **selectRows(data: _any[]_, preserveExisting: _boolean_): _void_** - Selects one or more rows in the table. Only applicable if `select` is true.\n- **deselectRow(data: _any_): _void_** - Deselects a single row in the table.\n- **deselectRows(data: _any[]_): _void_** - Deselects one or more rows in the table.\n- **clearSelections(): _void_** - Clears all selected table rows.\n- **render(): _void_** - Forces the table to re-render based on its current configuration.\n- **expandRow(rowIndex: _any_, template: _TableViewTemplate_): _Promise<void>_** - Expands a collapsed row.\n- **collapseRow(rowIndex: _number_): _Promise<void>_** - Collapses an expanded row.\n- **isRowExpanded(rowIndex: _number_): _boolean_** - Checks if a row is expanded or not.\n- **selectRowsByIndex(indexes: _number | number[]_, preserveExisting: _boolean_): _void_** - Selects a rows by an index or array of indexes.\n- **deselectRowsByIndex(indexes: _number | number[]_): _void_** - Deselects a rows by an index or array of indexes.\n- **isRowSelected(rowData: _{ [key: string]: any }_): _boolean_** - Checks if a row is selected or not.",
|
|
2098
2098
|
"attributes": [
|
|
2099
2099
|
{
|
|
2100
2100
|
"name": "select",
|
|
@@ -2268,7 +2268,7 @@
|
|
|
2268
2268
|
},
|
|
2269
2269
|
{
|
|
2270
2270
|
"name": "forge-time-picker",
|
|
2271
|
-
"description": "
|
|
2271
|
+
"description": "A time input component with integrated dropdown for selecting time values with support for various formats, masking, and validation options.\n---\n",
|
|
2272
2272
|
"attributes": [
|
|
2273
2273
|
{
|
|
2274
2274
|
"name": "value",
|
|
@@ -2530,7 +2530,7 @@
|
|
|
2530
2530
|
},
|
|
2531
2531
|
{
|
|
2532
2532
|
"name": "forge-view-switcher",
|
|
2533
|
-
"description": "
|
|
2533
|
+
"description": "A container component that manages switching between multiple child views with configurable animations and programmatic navigation controls.\n---\n\n\n### **Methods:**\n - **next(): _void_** - Transitions to the next view.\n- **previous(): _void_** - Transitions to the previous view.\n- **goToStart(): _void_** - Transitions to the first view.\n- **goToEnd(): _void_** - Transitions to the last view.\n\n### **CSS Properties:**\n - **--forge-view-switcher-height** - The `height` of the view switcher. _(default: undefined)_\n- **--forge-view-switcher-width** - The `width` of the view switcher. _(default: undefined)_\n- **--forge-view-switcher-animation-duration** - The duration of view switching animations. _(default: undefined)_\n- **--forge-view-switcher-animation-easing** - The timing function of view switching animations. _(default: undefined)_",
|
|
2534
2534
|
"attributes": [
|
|
2535
2535
|
{
|
|
2536
2536
|
"name": "index",
|
|
@@ -2550,7 +2550,7 @@
|
|
|
2550
2550
|
},
|
|
2551
2551
|
{
|
|
2552
2552
|
"name": "forge-app-bar",
|
|
2553
|
-
"description": "
|
|
2553
|
+
"description": "App bars are a collection of components placed as a horizontal bar at the top of the screen. They typically contain a logo, title, and optional application-wide actions.\n---\n\n\n### **Events:**\n - **forge-app-bar-navigate** - Fires when the app bar is clicked.\n\n### **Slots:**\n - **logo** - Reserved for the brand logo.\n- **title** - Reserved for the application title. This will overwrite the `titleText` property/attribute.\n- **start** - Places content at the beginning of the app bar.\n- **center** - Places content in the center of the app bar.\n- **end** - Places content at the end of the app bar.\n\n### **CSS Properties:**\n - **--forge-app-bar-background** - The background color of the app bar. _(default: undefined)_\n- **--forge-app-bar-foreground** - The text color of the app bar. _(default: undefined)_\n- **--forge-app-bar-theme-foreground** - The text color of the app bar when using the **scoped theme mode**. _(default: undefined)_\n- **--forge-app-bar-theme-foreground-muted** - The muted text color of the app bar when using the **scoped theme mode**. _(default: undefined)_\n- **--forge-app-bar-z-index** - The `z-index` of the app bar. _(default: undefined)_\n- **--forge-app-bar-elevation** - The elevation of the app bar. _(default: undefined)_\n- **--forge-app-bar-height** - The height of the app bar. _(default: undefined)_\n- **--forge-app-bar-row-padding** - The inline padding of the app bar. _(default: undefined)_\n- **--forge-app-bar-logo-gap** - The space between the logo and title. _(default: undefined)_\n- **--forge-app-bar-title-padding** - The padding around the title element. _(default: undefined)_\n- **--forge-app-bar-columns** - The grid column track sizes. _(default: undefined)_\n- **--forge-app-bar-transition-duration** - The transition duration for animations. _(default: undefined)_\n- **--forge-app-bar-transition-timing** - The transition timing function for animations. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **title** - The title element.",
|
|
2554
2554
|
"attributes": [
|
|
2555
2555
|
{
|
|
2556
2556
|
"name": "title-text",
|
|
@@ -2587,7 +2587,7 @@
|
|
|
2587
2587
|
},
|
|
2588
2588
|
{
|
|
2589
2589
|
"name": "forge-app-bar-help-button",
|
|
2590
|
-
"description": "
|
|
2590
|
+
"description": "A help button component with a predefined help icon that displays a dropdown menu when clicked, designed for use in an app bar's end slot.\n---\n\n\n### **Events:**\n - **forge-menu-select** - Bubbles up the menu select from the internal menu component.",
|
|
2591
2591
|
"attributes": [
|
|
2592
2592
|
{
|
|
2593
2593
|
"name": "icon",
|
|
@@ -2609,7 +2609,7 @@
|
|
|
2609
2609
|
},
|
|
2610
2610
|
{
|
|
2611
2611
|
"name": "forge-app-bar-menu-button",
|
|
2612
|
-
"description": "
|
|
2612
|
+
"description": "A menu toggle button component with a predefined hamburger menu icon, typically used in an app bar's start slot to open navigation menus.\n---\n",
|
|
2613
2613
|
"attributes": [
|
|
2614
2614
|
{
|
|
2615
2615
|
"name": "icon",
|
|
@@ -2631,7 +2631,7 @@
|
|
|
2631
2631
|
},
|
|
2632
2632
|
{
|
|
2633
2633
|
"name": "forge-app-bar-notification-button",
|
|
2634
|
-
"description": "
|
|
2634
|
+
"description": "A notification button component with a predefined notification bell icon that can display a badge with count or dot indicator, designed for use in app bars.\n---\n",
|
|
2635
2635
|
"attributes": [
|
|
2636
2636
|
{
|
|
2637
2637
|
"name": "count",
|
|
@@ -2673,7 +2673,7 @@
|
|
|
2673
2673
|
},
|
|
2674
2674
|
{
|
|
2675
2675
|
"name": "forge-app-bar-profile-button",
|
|
2676
|
-
"description": "
|
|
2676
|
+
"description": "A user profile button component that displays an avatar and opens a profile card popup with user information and action buttons when clicked.\n---\n\n\n### **Events:**\n - **forge-profile-card-sign-out** - Fires when the sign out button is clicked.\n- **forge-profile-card-profile** - Fires when the profile button is clicked.",
|
|
2677
2677
|
"attributes": [
|
|
2678
2678
|
{
|
|
2679
2679
|
"name": "avatar-image-url",
|
|
@@ -2737,7 +2737,7 @@
|
|
|
2737
2737
|
},
|
|
2738
2738
|
{
|
|
2739
2739
|
"name": "forge-app-bar-search",
|
|
2740
|
-
"description": "
|
|
2740
|
+
"description": "A search input component with integrated search icon and styling optimized for use within app bars, supporting keyboard interaction and customizable actions.\n---\n\n\n### **Events:**\n - **forge-app-bar-search-input** - Emits when the users executes the search via pressing the Enter key while the `<input>` has focus.\n\n### **Slots:**\n - _default_ - The default (unnamed) slot is where child `<input>` elements will be placed.\n- **action** - Places actions at the end of the input.\n\n### **CSS Properties:**\n - **--forge-theme-on-primary** - Controls the border-color of the container outline, the font-color, and icon color. _(default: undefined)_\n- **--forge-theme-on-surface** - Controls the font color of the buttons. _(default: undefined)_\n- **--forge-theme-text-medium** - Controls the placeholder font color. _(default: undefined)_\n- **--forge-app-bar-search-theme-background** - Controls the background-color of the container. _(default: undefined)_\n- **--forge-app-bar-search-theme-background-focused** - Controls the focused background-color of the container. _(default: undefined)_\n- **--forge-app-bar-search-theme-hover-opacity** - Controls the hover opacity of the outline. _(default: undefined)_\n- **--forge-app-bar-search-theme-disabled-opacity** - Controls the disabled opacity of the component. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root element\n- **container** - The input container element.\n- **icon-container** - The icon container element.\n- **icon** - The <forge-icon> element.\n- **context** - The context container element.\n- **context-divider** - The context divider element.\n- **context-button** - The context button element.\n- **context-button-text** - The context button text element.\n- **context-button-icon** - The context button icon element.\n- **global-icon-container** - The global icon container element.\n- **global-icon** - The global icon <forge-icon> element.\n- **actions-container** - The action container element around the slot.",
|
|
2741
2741
|
"attributes": [
|
|
2742
2742
|
{
|
|
2743
2743
|
"name": "disabled",
|
|
@@ -2759,7 +2759,7 @@
|
|
|
2759
2759
|
},
|
|
2760
2760
|
{
|
|
2761
2761
|
"name": "forge-button-toggle",
|
|
2762
|
-
"description": "
|
|
2762
|
+
"description": "Toggle buttons allow users to select from a group of choices with single or multiple selection.\n---\n\n\n### **Events:**\n - **forge-button-toggle-select** - Dispatches when the user toggles the button.\n\n### **Slots:**\n - _default_ - The default/unnamed slot for the button toggle's content.\n- **start** - Typically reserved for content/icons that render logically before the default slot content.\n- **end** - Typically reserved content/icons that render logically after the default slot content.\n\n### **CSS Properties:**\n - **--forge-button-toggle-display** - The `display` style for the button toggle container element. _(default: undefined)_\n- **--forge-button-toggle-min-width** - The minimum width. _(default: undefined)_\n- **--forge-button-toggle-spacing** - The spacing between the button toggle and its content. _(default: undefined)_\n- **--forge-button-toggle-padding-block** - The padding on the block axis. _(default: undefined)_\n- **--forge-button-toggle-padding-inline** - The padding on the inline axis. _(default: undefined)_\n- **--forge-button-toggle-color** - The color of the button toggle content. _(default: undefined)_\n- **--forge-button-toggle-background** - The background of the button toggle. _(default: undefined)_\n- **--forge-button-toggle-cursor** - The cursor of the button toggle. _(default: undefined)_\n- **--forge-button-toggle-border-width** - The border-width of the button toggle. _(default: undefined)_\n- **--forge-button-toggle-border-style** - The border-style of the button toggle. _(default: undefined)_\n- **--forge-button-toggle-border-color** - The border-color of the button toggle. _(default: undefined)_\n- **--forge-button-toggle-shape** - The shape radius of the button toggle. _(default: undefined)_\n- **--forge-button-toggle-shape-start-start** - The start-start shape radius of the button toggle. _(default: undefined)_\n- **--forge-button-toggle-shape-start-end** - The start-end shape radius of the button toggle. _(default: undefined)_\n- **--forge-button-toggle-shape-end-start** - The end-start shape radius of the button toggle. _(default: undefined)_\n- **--forge-button-toggle-shape-end-end** - The end-end shape radius of the button toggle. _(default: undefined)_\n- **--forge-button-toggle-selected-background** - The background of the button toggle when selected. _(default: undefined)_\n- **--forge-button-toggle-selected-color** - The color of the button toggle content when selected. _(default: undefined)_\n- **--forge-button-toggle-selected-disabled-background** - The background of the button toggle when selected and disabled. _(default: undefined)_\n- **--forge-button-toggle-disabled-opacity** - The opacity of the button toggle when disabled. _(default: undefined)_\n- **--forge-button-toggle-disabled-cursor** - The cursor of the button toggle when disabled. _(default: undefined)_\n- **--forge-button-toggle-disabled-color** - The color of the button toggle content when disabled. _(default: undefined)_\n- **--forge-button-toggle-disabled-background** - The background of the button toggle when disabled. _(default: undefined)_\n- **--forge-button-toggle-transition-duration** - The transition-duration of various properties. _(default: undefined)_\n- **--forge-button-toggle-transition-timing** - The transition-timing of various properties. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **focus-indicator** - The focus indicator element.\n- **state-layer** - The state layer surface element.",
|
|
2763
2763
|
"attributes": [
|
|
2764
2764
|
{
|
|
2765
2765
|
"name": "value",
|
|
@@ -2786,7 +2786,7 @@
|
|
|
2786
2786
|
},
|
|
2787
2787
|
{
|
|
2788
2788
|
"name": "forge-button-toggle-group",
|
|
2789
|
-
"description": "
|
|
2789
|
+
"description": "Button toggle groups allow users to select one or more options from a set of related options.\n---\n\n\n### **Events:**\n - **forge-button-toggle-group-change** - Dispatches when the value of the group changes.\n\n### **Slots:**\n - _default_ - The is a default/unnamed slot for child button toggle elements.\n\n### **CSS Properties:**\n - **--forge-button-toggle-group-display** - The `display` of the group container elements. _(default: undefined)_\n- **--forge-button-toggle-group-gap** - The space between button toggle elements. _(default: undefined)_\n- **--forge-button-toggle-group-padding** - The padding around the button toggle elements when outlined. _(default: undefined)_\n- **--forge-button-toggle-group-padding-block** - The block padding around the button toggle elements when outlined. _(default: undefined)_\n- **--forge-button-toggle-group-padding-inline** - The inline padding around the button toggle elements when outlined. _(default: undefined)_\n- **--forge-button-toggle-group-height** - The height of the group element. _(default: undefined)_\n- **--forge-button-toggle-group-dense-height** - The height of the group element when dense. _(default: undefined)_\n- **--forge-button-toggle-group-outline-width** - The width of the outline around the group element. _(default: undefined)_\n- **--forge-button-toggle-group-outline-style** - The style of the outline around the group element. _(default: undefined)_\n- **--forge-button-toggle-group-outline-color** - The color of the outline around the group element. _(default: undefined)_\n- **--forge-button-toggle-group-outline-color-active** - The color of the outline around the group element when hovered or focused. _(default: undefined)_\n- **--forge-button-toggle-group-shape** - The shape radius of the group container element. _(default: undefined)_\n- **--forge-button-toggle-group-shape-start-start** - The start-start shape radius. _(default: undefined)_\n- **--forge-button-toggle-group-shape-start-end** - The start-end shape radius. _(default: undefined)_\n- **--forge-button-toggle-group-shape-end-start** - The end-start shape radius. _(default: undefined)_\n- **--forge-button-toggle-group-shape-end-end** - The end-end shape radius. _(default: undefined)_\n- **--forge-button-toggle-group-transition-duration** - The transition duration for all animations on the group. _(default: undefined)_\n- **--forge-button-toggle-group-transition-timing** - The transition timing for all animations on the group. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element for the group.",
|
|
2790
2790
|
"attributes": [
|
|
2791
2791
|
{
|
|
2792
2792
|
"name": "value",
|
|
@@ -2843,7 +2843,7 @@
|
|
|
2843
2843
|
},
|
|
2844
2844
|
{
|
|
2845
2845
|
"name": "forge-chip",
|
|
2846
|
-
"description": "
|
|
2846
|
+
"description": "A compact, interactive element that represents an entity, action, or attribute with support for selection, removal, and various styling options.\n---\n\n\n### **Events:**\n - **forge-chip-delete** - Event fired when the chip is deleted.\n- **forge-chip-select** - Event fired when the chip is selected.\n\n### **Slots:**\n - _default_ - The content of the chip.\n- **start** - The start content of the chip.\n- **end** - The end content of the chip.\n\n### **CSS Properties:**\n - **--forge-chip-background** - The background color of the chip. _(default: undefined)_\n- **--forge-chip-color** - The background color of the chip. _(default: undefined)_\n- **--forge-chip-shape** - The shape of the chip. _(default: undefined)_\n- **--forge-chip-spacing** - The spacing between chips. _(default: undefined)_\n- **--forge-chip-height** - The height of the chip. _(default: undefined)_\n- **--forge-chip-padding-inline** - The inline padding of the chip. _(default: undefined)_\n- **--forge-chip-padding-block** - The block padding of the chip. _(default: undefined)_\n- **--forge-chip-cursor** - The cursor style of the chip. _(default: undefined)_\n- **--forge-chip-icon-font-size** - The font size of the chip icon. _(default: undefined)_\n- **--forge-chip-focus-indicator-color** - The color of the focus indicator. _(default: undefined)_\n- **--forge-chip-disabled-opacity** - The opacity of the disabled chip. _(default: undefined)_\n- **--forge-chip-disabled-cursor** - The cursor style of the disabled chip. _(default: undefined)_\n- **--forge-chip-dense-height** - The height of the dense chip. _(default: undefined)_\n- **--forge-chip-dense-padding-inline** - The inline padding of the dense chip. _(default: undefined)_\n- **--forge-chip-dense-spacing** - The spacing between dense chips. _(default: undefined)_\n- **--forge-chip-dense-font-size** - The font size of the dense chip. _(default: undefined)_\n- **--forge-chip-dense-font-weight** - The font weight of the dense chip. _(default: undefined)_\n- **--forge-chip-dense-focus-indicator-offset** - The offset of the focus indicator for dense chips. _(default: undefined)_\n- **--forge-chip-dense-icon-font-size** - The font size of the icon in dense chips. _(default: undefined)_\n- **--forge-chip-remove-button-spacing** - The spacing of the remove button in chips. _(default: undefined)_\n- **--forge-chip-remove-button-height-dense** - The height of the remove button in dense chips. _(default: undefined)_\n- **--forge-chip-remove-button-icon-size-dense** - The icon size of the remove button in dense chips. _(default: undefined)_\n- **--forge-chip-remove-button-spacing-dense** - The spacing of the remove button in dense chips. _(default: undefined)_\n- **--forge-chip-selected-background** - The background color of the selected chip. _(default: undefined)_\n- **--forge-chip-selected-color** - The text color of the selected chip. _(default: undefined)_\n- **--forge-chip-invalid-color** - The text color of the invalid chip. _(default: undefined)_\n- **--forge-chip-invalid-selected-background** - The background color of the invalid selected chip. _(default: undefined)_\n- **--forge-chip-invalid-selected-color** - The text color of the invalid selected chip. _(default: undefined)_\n- **--forge-chip-border-width** - The width of the chip border. _(default: undefined)_\n- **--forge-chip-border-style** - The style of the chip border. _(default: undefined)_\n- **--forge-chip-border-color** - The color of the chip border. _(default: undefined)_\n- **--forge-chip-field-background** - The background color of the chip field. _(default: undefined)_\n- **--forge-chip-field-color** - The text color of the chip field. _(default: undefined)_\n- **--forge-chip-field-shape** - The shape of the chip field. _(default: undefined)_\n- **--forge-chip-field-border-color** - The color of the chip field border. _(default: undefined)_\n- **--forge-chip-field-cursor** - The cursor style of the chip field. _(default: undefined)_\n- **--forge-chip-checkmark-size** - The size of the checkmark in chips. _(default: undefined)_\n- **--forge-chip-checkmark-color** - The color of the checkmark in chips. _(default: undefined)_\n- **--forge-chip-checkmark-spacing** - The spacing of the checkmark in chips. _(default: undefined)_\n- **--forge-chip-avatar-size** - The size of the avatar in chips. _(default: undefined)_\n- **--forge-chip-avatar-size-dense** - The size of the avatar in dense chips. _(default: undefined)_\n- **--forge-chip-avatar-font-size** - The font size of the avatar in chips. _(default: undefined)_\n- **--forge-chip-avatar-font-size-dense** - The font size of the avatar in dense chips. _(default: undefined)_\n- **--forge-chip-avatar-spacing** - The spacing of the avatar in chips. _(default: undefined)_\n- **--forge-chip-avatar-spacing-dense** - The spacing of the avatar in dense chips. _(default: undefined)_\n- **--forge-chip-transition-duration** - The duration of the chip transition. _(default: undefined)_\n- **--forge-chip-transition-easing** - The easing function of the chip transition. _(default: undefined)_\n- **--forge-chip-checkmark-transition-delay** - The delay of the checkmark transition in chips. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The component's root element.\n- **trigger** - The trigger element of the chip.\n- **focus-indicator** - The focus indicator of the chip.\n- **state-layer** - The state layer surface.",
|
|
2847
2847
|
"attributes": [
|
|
2848
2848
|
{
|
|
2849
2849
|
"name": "type",
|
|
@@ -2950,7 +2950,7 @@
|
|
|
2950
2950
|
},
|
|
2951
2951
|
{
|
|
2952
2952
|
"name": "forge-drawer",
|
|
2953
|
-
"description": "
|
|
2953
|
+
"description": "A persistent side navigation drawer component that provides a sliding panel for navigation content.\n---\n\n\n### **Events:**\n - **forge-drawer-after-open** - Dispatched after the drawer has opened.\n- **forge-drawer-after-close** - Dispatched after the drawer has closed.\n\n### **Slots:**\n - _default_ - The content to display in the scrollable content container.\n- **header** - The header content above the main content.\n- **footer** - The footer content below the main content.\n\n### **CSS Properties:**\n - **--forge-drawer-width** - The width of the drawer. _(default: undefined)_\n- **--forge-drawer-background** - The background color of the drawer. _(default: undefined)_\n- **--forge-drawer-border-color** - The border of the drawer. _(default: undefined)_\n- **--forge-drawer-border-width** - The border width of the drawer. _(default: undefined)_\n- **--forge-drawer-transition-duration** - The transition duration of the drawer. _(default: undefined)_\n- **--forge-drawer-transition-easing** - The transition timing function of the drawer. _(default: undefined)_\n- **--forge-drawer-duration-close** - The duration of the drawer closing animation. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The component's root element.\n- **content** - The content container element.",
|
|
2954
2954
|
"attributes": [
|
|
2955
2955
|
{
|
|
2956
2956
|
"name": "open",
|
|
@@ -2967,7 +2967,7 @@
|
|
|
2967
2967
|
},
|
|
2968
2968
|
{
|
|
2969
2969
|
"name": "forge-mini-drawer",
|
|
2970
|
-
"description": "
|
|
2970
|
+
"description": "A compact navigation drawer component that displays as a narrow rail and optionally expands on hover to show full content.\n---\n\n\n### **Events:**\n - **forge-drawer-after-open** - Dispatched after the drawer has opened.\n- **forge-drawer-after-close** - Dispatched after the drawer has closed.\n\n### **Slots:**\n - _default_ - The content to display in the scrollable content container.\n- **header** - The header content above the main content.\n- **footer** - The footer content below the main content.\n\n### **CSS Properties:**\n - **--forge-mini-drawer-width** - The width of the drawer. _(default: undefined)_\n- **--forge-mini-drawer-min-width** - The minimum width of the drawer. Defaults to match the width. _(default: undefined)_\n- **--forge-mini-drawer-hover-width** - The width of the drawer when hovered. _(default: undefined)_\n- **--forge-mini-drawer-transition-duration** - The transition duration of the drawer. _(default: undefined)_\n- **--forge-mini-drawer-transition-easing** - The transition timing function of the drawer. _(default: undefined)_\n- **--forge-mini-drawer-delay** - The delay before the drawer closes when the mouse leaves the drawer. _(default: undefined)_\n- **--forge-mini-drawer-hover-transition-duration** - The transition duration of the drawer when hovered. _(default: undefined)_\n- **--forge-mini-drawer-hover-transition-easing** - The transition timing function of the drawer when hovered. _(default: undefined)_\n- **--forge-mini-drawer-hover-transition-delay** - The delay before the drawer closes when the mouse leaves the drawer when hovered. _(default: undefined)_\n- **--forge-drawer-width** - The width of the drawer. _(default: undefined)_\n- **--forge-drawer-background** - The background color of the drawer. _(default: undefined)_\n- **--forge-drawer-border-color** - The border of the drawer. _(default: undefined)_\n- **--forge-drawer-border-width** - The border width of the drawer. _(default: undefined)_\n- **--forge-drawer-transition-duration** - The transition duration of the drawer. _(default: undefined)_\n- **--forge-drawer-transition-easing** - The transition timing function of the drawer. _(default: undefined)_\n- **--forge-drawer-duration-close** - The duration of the drawer closing animation. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The component's root element.\n- **container** - The container element around the content.\n- **content** - The content container element.",
|
|
2971
2971
|
"attributes": [
|
|
2972
2972
|
{
|
|
2973
2973
|
"name": "hover",
|
|
@@ -2989,7 +2989,7 @@
|
|
|
2989
2989
|
},
|
|
2990
2990
|
{
|
|
2991
2991
|
"name": "forge-modal-drawer",
|
|
2992
|
-
"description": "
|
|
2992
|
+
"description": "A modal navigation drawer component that slides in from the side with a backdrop overlay, typically used for temporary navigation panels.\n---\n\n\n### **Events:**\n - **forge-modal-drawer-close** - Dispatched when the modal drawer is closed by clicking the backdrop.\n- **forge-drawer-after-open** - Dispatched after the drawer has opened.\n- **forge-drawer-after-close** - Dispatched after the drawer has closed.\n\n### **Slots:**\n - _default_ - The content to display in the scrollable content container.\n- **header** - The header content above the main content.\n- **footer** - The footer content below the main content.\n\n### **CSS Properties:**\n - **--forge-drawer-width** - The width of the drawer. _(default: undefined)_\n- **--forge-drawer-background** - The background color of the drawer. _(default: undefined)_\n- **--forge-drawer-border-color** - The border of the drawer. _(default: undefined)_\n- **--forge-drawer-border-width** - The border width of the drawer. _(default: undefined)_\n- **--forge-drawer-transition-duration** - The transition duration of the drawer. _(default: undefined)_\n- **--forge-drawer-transition-easing** - The transition timing function of the drawer. _(default: undefined)_\n- **--forge-drawer-duration-close** - The duration of the drawer closing animation. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The component's root element.\n- **content** - The content container element.\n- **backdrop** - The backdrop root element.",
|
|
2993
2993
|
"attributes": [
|
|
2994
2994
|
{
|
|
2995
2995
|
"name": "open",
|
|
@@ -3071,7 +3071,7 @@
|
|
|
3071
3071
|
},
|
|
3072
3072
|
{
|
|
3073
3073
|
"name": "forge-list-item",
|
|
3074
|
-
"description": "List items are individual rows of content inside of a list.\n---\n\n\n### **Events:**\n - **forge-list-item-select** - Fires when the list item is selected.\n\n### **Slots:**\n - _default_ - The primary text.\n- **secondary-text** - The secondary text.\n- **tertiary-text** - The tertiary text.\n- **start** - The start content.\n- **end** - The end element.\n\n### **CSS Properties:**\n - **--forge-list-item-background** - The background color. _(default: undefined)_\n- **--forge-list-item-shape** - The shape of the list item. _(default: undefined)_\n- **--forge-list-item-padding** - The padding inside of the container element. _(default: undefined)_\n- **--forge-list-item-wrap-padding** - The padding inside of the container element when `wrap` is enabled. _(default: undefined)_\n- **--forge-list-item-margin** - The margin around the host element. _(default: undefined)_\n- **--forge-list-item-height** - The height of the container. _(default: undefined)_\n- **--forge-list-item-indent** - The margin inline state when in the indented state. _(default: undefined)_\n- **--forge-list-item-cursor** - The cursor when interactive. _(default: undefined)_\n- **--forge-list-item-gap** - The gap between the slotted content. _(default: undefined)_\n- **--forge-list-item-text-color** - The text color of the text. _(default: undefined)_\n- **--forge-list-item-text-font-size** - The font size of the text. _(default: undefined)_\n- **--forge-list-item-text-font-weight** - The font weight of the text. _(default: undefined)_\n- **--forge-list-item-text-line-height** - The line height of the text. _(default: undefined)_\n- **--forge-list-item-selected-color** - The foreground color when in the selected state. _(default: undefined)_\n- **--forge-list-item-selected-background** - The background color when in the selected state. _(default: undefined)_\n- **--forge-list-item-selected-opacity** - The opacity of the background color when in the selected state. _(default: undefined)_\n- **--forge-list-item-start-selected-color** - The color of the start content when in the selected state. _(default: undefined)_\n- **--forge-list-item-end-selected-color** - The color of the end content when in the selected state. _(default: undefined)_\n- **--forge-list-item-selected-text-color** - The color of the text when in the selected state. _(default: undefined)_\n- **--forge-list-item-disabled-opacity** - The opacity of the element when in the disabled state. _(default: undefined)_\n- **--forge-list-item-disabled-cursor** - The cursor when in the disabled state. _(default: undefined)_\n- **--forge-list-item-one-line-height** - The line height when in the one/single line state. _(default: undefined)_\n- **--forge-list-item-two-line-height** - The line height when in the two line state. _(default: undefined)_\n- **--forge-list-item-three-line-height** - The line height when in the three line state. _(default: undefined)_\n- **--forge-list-item-dense-one-line-height** - The line height when in the dense one/single line state. _(default: undefined)_\n- **--forge-list-item-dense-two-line-height** - The line height when in the dense two line state. _(default: undefined)_\n- **--forge-list-item-dense-three-line-height** - The line height when in the dense three line state. _(default: undefined)_\n- **--forge-list-item-dense-font-size** - The font size when in the dense state. _(default: undefined)_\n- **--forge-list-item-dense-indent** - The margin inline state when in the dense indented state. _(default: undefined)_\n- **--forge-list-item-dense-gap** - The gap between the slotted content when in the dense state. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **text-container** - The container for the text content.\n- **focus-indicator** - The forwarded focus indicator's internal indicator element.\n- **state-layer** - The forwarded state layer's internal surface element.",
|
|
3074
|
+
"description": "List items are individual rows of content inside of a list.\n---\n\n\n### **Events:**\n - **forge-list-item-select** - Fires when the list item is selected.\n\n### **Slots:**\n - _default_ - The primary text.\n- **secondary-text** - The secondary text.\n- **tertiary-text** - The tertiary text.\n- **start** - The start content.\n- **end** - The end element.\n- **additional-content** - Additional content that appears below the main list item interactive area.\n\n### **CSS Properties:**\n - **--forge-list-item-background** - The background color. _(default: undefined)_\n- **--forge-list-item-shape** - The shape of the list item. _(default: undefined)_\n- **--forge-list-item-padding** - The padding inside of the container element. _(default: undefined)_\n- **--forge-list-item-wrap-padding** - The padding inside of the container element when `wrap` is enabled. _(default: undefined)_\n- **--forge-list-item-margin** - The margin around the host element. _(default: undefined)_\n- **--forge-list-item-height** - The height of the container. _(default: undefined)_\n- **--forge-list-item-indent** - The margin inline state when in the indented state. _(default: undefined)_\n- **--forge-list-item-cursor** - The cursor when interactive. _(default: undefined)_\n- **--forge-list-item-gap** - The gap between the slotted content. _(default: undefined)_\n- **--forge-list-item-text-color** - The text color of the text. _(default: undefined)_\n- **--forge-list-item-text-font-size** - The font size of the text. _(default: undefined)_\n- **--forge-list-item-text-font-weight** - The font weight of the text. _(default: undefined)_\n- **--forge-list-item-text-line-height** - The line height of the text. _(default: undefined)_\n- **--forge-list-item-selected-color** - The foreground color when in the selected state. _(default: undefined)_\n- **--forge-list-item-selected-background** - The background color when in the selected state. _(default: undefined)_\n- **--forge-list-item-selected-opacity** - The opacity of the background color when in the selected state. _(default: undefined)_\n- **--forge-list-item-start-selected-color** - The color of the start content when in the selected state. _(default: undefined)_\n- **--forge-list-item-end-selected-color** - The color of the end content when in the selected state. _(default: undefined)_\n- **--forge-list-item-selected-text-color** - The color of the text when in the selected state. _(default: undefined)_\n- **--forge-list-item-disabled-opacity** - The opacity of the element when in the disabled state. _(default: undefined)_\n- **--forge-list-item-disabled-cursor** - The cursor when in the disabled state. _(default: undefined)_\n- **--forge-list-item-one-line-height** - The line height when in the one/single line state. _(default: undefined)_\n- **--forge-list-item-two-line-height** - The line height when in the two line state. _(default: undefined)_\n- **--forge-list-item-three-line-height** - The line height when in the three line state. _(default: undefined)_\n- **--forge-list-item-dense-one-line-height** - The line height when in the dense one/single line state. _(default: undefined)_\n- **--forge-list-item-dense-two-line-height** - The line height when in the dense two line state. _(default: undefined)_\n- **--forge-list-item-dense-three-line-height** - The line height when in the dense three line state. _(default: undefined)_\n- **--forge-list-item-dense-font-size** - The font size when in the dense state. _(default: undefined)_\n- **--forge-list-item-dense-indent** - The margin inline state when in the dense indented state. _(default: undefined)_\n- **--forge-list-item-dense-gap** - The gap between the slotted content when in the dense state. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **text-container** - The container for the text content.\n- **focus-indicator** - The forwarded focus indicator's internal indicator element.\n- **state-layer** - The forwarded state layer's internal surface element.",
|
|
3075
3075
|
"attributes": [
|
|
3076
3076
|
{
|
|
3077
3077
|
"name": "selected",
|
|
@@ -3311,7 +3311,7 @@
|
|
|
3311
3311
|
},
|
|
3312
3312
|
{
|
|
3313
3313
|
"name": "forge-option",
|
|
3314
|
-
"description": "
|
|
3314
|
+
"description": "Options represent individual selectable items within select components and menus.\n---\n",
|
|
3315
3315
|
"attributes": [
|
|
3316
3316
|
{
|
|
3317
3317
|
"name": "value",
|
|
@@ -3378,7 +3378,7 @@
|
|
|
3378
3378
|
},
|
|
3379
3379
|
{
|
|
3380
3380
|
"name": "forge-option-group",
|
|
3381
|
-
"description": "
|
|
3381
|
+
"description": "Groups related options together with an optional label within select components.\n---\n",
|
|
3382
3382
|
"attributes": [
|
|
3383
3383
|
{
|
|
3384
3384
|
"name": "value",
|
|
@@ -3395,7 +3395,7 @@
|
|
|
3395
3395
|
},
|
|
3396
3396
|
{
|
|
3397
3397
|
"name": "forge-select",
|
|
3398
|
-
"description": "
|
|
3398
|
+
"description": "Selects present a list of options to users for single or multi-selection.\n---\n\n\n### **Events:**\n - **forge-select-scrolled-bottom** - Dispatched when the dropdown list has scrolled to the bottom.\n- **change** - Dispatched when the user selects a value.\n- **forge-select-all** - Dispatched when the select all option is toggled.\n\n### **Methods:**\n - **floatLabelWithoutAnimation(value: _boolean_): _void_** - Floats the label without an animation. Only applies when the label is inset.\n\n### **Slots:**\n - **value** - The selected text to display\n- **start** - Typically reserved for content/icons that render logically before the default slot content.\n- **end** - Typically reserved content/icons that render logically after the default slot content.\n- **accessory** - Used for content such as a button that is logically connected to the field but should appear distinct from the input.\n- **support-text** - Used for content that provides additional information about the field. Aligns to the inline start of the field.\n- **support-text-end** - Used for content that provides additional information about the field. Aligns to the inline end of the field.\n\n### **CSS Properties:**\n - **--forge-select-placeholder-color** - The color of the placeholder text. _(default: undefined)_\n- **--forge-field-background** - The background of the field surface. _(default: undefined)_\n- **--forge-field-tonal-background** - The background of the field surface in the tonal variant. _(default: undefined)_\n- **--forge-field-tonal-background-hover** - The background of the field surface in the tonal variant on hover. _(default: undefined)_\n- **--forge-field-filled-background** - The background of the field surface in the filled and raised variants. _(default: undefined)_\n- **--forge-field-outline-style** - The style of the field outline. _(default: undefined)_\n- **--forge-field-outline-width** - The width of the field outline. _(default: undefined)_\n- **--forge-field-shape** - The border radius of the field's corners. _(default: undefined)_\n- **--forge-field-height** - The height of the field in its default density. _(default: undefined)_\n- **--forge-field-inset-height** - The height of the field in its default density when the label is inset. _(default: undefined)_\n- **--forge-field-padding-inline** - The inline padding of the field. _(default: undefined)_\n- **--forge-field-padding-inline-start** - The inline start padding of the field. _(default: undefined)_\n- **--forge-field-padding-inline-end** - The inline end padding of the field. _(default: undefined)_\n- **--forge-field-inner-padding-inline** - The padding between elements slotted into the field. _(default: undefined)_\n- **--forge-field-support-text-margin-block** - The margin between the support text and the field. _(default: undefined)_\n- **--forge-field-support-text-gap** - The minimum gap between the support text and the support text end. _(default: undefined)_\n- **--forge-field-support-text-padding-inline** - The inline padding of the support text. _(default: undefined)_\n- **--forge-field-support-text-padding-inline-start** - The inline start padding of the support text. _(default: undefined)_\n- **--forge-field-support-text-padding-inline-end** - The inline end padding of the support text. _(default: undefined)_\n- **--forge-field-label-margin-inline** - The margin between the label and the field when the label is in an inline position. _(default: undefined)_\n- **--forge-field-label-margin-block** - The margin between the label and the field when the label is in the block start position. _(default: undefined)_\n- **--forge-field-required-padding** - The padding between the required indicator and the label. _(default: undefined)_\n- **--forge-field-required-content** - The content of the required indicator. _(default: undefined)_\n- **--forge-field-optional-padding** - The padding between the optional indicator and the label. _(default: undefined)_\n- **--forge-field-optional-content** - The content of the optional indicator. _(default: undefined)_\n- **--forge-field-multiline-resize** - The direction the field can be resized when multiline. _(default: undefined)_\n- **--forge-field-multiline-min-inline-size** - The minimum inline size the field can be resized to when multiline. _(default: undefined)_\n- **--forge-field-multiline-max-inline-size** - The maximum inline size the field can be resized to when multiline. _(default: undefined)_\n- **--forge-field-multiline-min-block-size** - The minimum block size the field can be resized to when multiline. _(default: undefined)_\n- **--forge-field-multiline-max-block-size** - The maximum block size the field can be resized to when multiline. _(default: undefined)_\n- **--forge-field-popover-icon-transition-duration** - The duration of the popover icon animation. _(default: undefined)_\n- **--forge-field-popover-icon-transition-timing** - The timing function of the popover icon animation. _(default: undefined)_\n- **--forge-field-popover-icon-open-rotation** - The rotation of the popover icon when open. _(default: undefined)_\n- **--forge-field-surface-animation-duration** - The duration of background and outline animations. _(default: undefined)_\n- **--forge-field-surface-animation-timing** - The timing function of background and outline animations. _(default: undefined)_\n- **--forge-field-surface-floating-animation-duration** - The duration of the floating label animation. _(default: undefined)_\n- **--forge-field-surface-floating-animation-timing** - The timing function of the floating label animation. _(default: undefined)_\n- **--forge-field-focus-indicator-width** - The width of the focus indicator. _(default: undefined)_\n- **--forge-field-disabled-opacity** - The opacity of the field when disabled. _(default: undefined)_\n- **--forge-field-disabled-background** - The background of the field when disabled. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **label** - The label element.\n- **text-container** - The element container for the selected text.\n- **text** - The element containing the selected text.\n- **container** - The container element surrounding the input.\n- **input** - The element containing te input slot.\n- **start** - The element containing the start slot.\n- **end** - The element containing the end slot.\n- **popover-icon** - The popover icon element.\n- **accessory** - The element containing the accessory slot.\n- **support-text** - The support text element.\n- **support-text** - The element containing the support text slot.\n- **support-text-end** - The element containing the support text end slot.\n- **outline** - The element containing the forge-focus-indicator element.\n- **focus-indicator** - The focus indicator element.",
|
|
3399
3399
|
"attributes": [
|
|
3400
3400
|
{
|
|
3401
3401
|
"name": "label",
|
|
@@ -3407,6 +3407,16 @@
|
|
|
3407
3407
|
"description": "Controls the placeholder text.",
|
|
3408
3408
|
"values": []
|
|
3409
3409
|
},
|
|
3410
|
+
{
|
|
3411
|
+
"name": "show-select-all",
|
|
3412
|
+
"description": "Gets/sets whether to show the select all option when in multiple mode.",
|
|
3413
|
+
"values": []
|
|
3414
|
+
},
|
|
3415
|
+
{
|
|
3416
|
+
"name": "select-all-label",
|
|
3417
|
+
"description": "Gets/sets the label for the select all option.",
|
|
3418
|
+
"values": []
|
|
3419
|
+
},
|
|
3410
3420
|
{
|
|
3411
3421
|
"name": "value",
|
|
3412
3422
|
"description": "Gets/sets the value.",
|
|
@@ -3547,7 +3557,7 @@
|
|
|
3547
3557
|
},
|
|
3548
3558
|
{
|
|
3549
3559
|
"name": "forge-select-dropdown",
|
|
3550
|
-
"description": "
|
|
3560
|
+
"description": "A dropdown variant of the select component that renders options in a popover.\n---\n\n\n### **Methods:**\n - **appendOptions(options: _ISelectOption[] | ISelectOptionGroup[]_): _void_** - Dynamically appends options to the dropdown while it's open.\n- **selectAll(): _void_** - Selects all options.\n- **deselectAll(): _void_** - Deselects all options.",
|
|
3551
3561
|
"attributes": [
|
|
3552
3562
|
{
|
|
3553
3563
|
"name": "value",
|
|
@@ -3634,7 +3644,7 @@
|
|
|
3634
3644
|
},
|
|
3635
3645
|
{
|
|
3636
3646
|
"name": "forge-split-view",
|
|
3637
|
-
"description": "
|
|
3647
|
+
"description": "Split views create resizable panels that allow users to adjust the space between content areas.\n---\n\n\n### **Methods:**\n - **layerSlottedPanels(target: _ISplitViewPanelComponent_): _void_** - Arranges split view panels to avoid overlapping during animations.\n- **unlayerSlottedPanels(): _void_** - Removes presentation data set during an animation.\n- **update(config: _ISplitViewUpdateConfig_): _void_** - Updates the provided characteristics of each slotted panel.\n- **refit(): _void_** - Resizes panels within the split view to avoid overflow.",
|
|
3638
3648
|
"attributes": [
|
|
3639
3649
|
{
|
|
3640
3650
|
"name": "orientation",
|
|
@@ -3666,7 +3676,7 @@
|
|
|
3666
3676
|
},
|
|
3667
3677
|
{
|
|
3668
3678
|
"name": "forge-split-view-panel",
|
|
3669
|
-
"description": "
|
|
3679
|
+
"description": "Individual panels within split views that can be resized and collapsed.\n---\n\n\n### **Events:**\n - **forge-split-view-panel-will-resize** - Emitted before the panel resizes.\n- **forge-split-view-panel-resize-start** - Emitted when the panel starts resizing.\n- **forge-split-view-panel-resize-end** - Emitted when the panel stops resizing.\n- **forge-split-view-panel-resize** - Emitted when the panel resizes.\n- **forge-split-view-panel-will-open** - Emitted before the panel opens.\n- **forge-split-view-panel-will-close** - Emitted before the panel closes.\n- **forge-split-view-panel-did-open** - Emitted after the panel opens.\n- **forge-split-view-panel-did-close** - Emitted after the panel closes.\n\n### **Methods:**\n - **getContentSize(): __** - Gets the size of content along the axis of orientation.\n- **getCollapsibleSize(): __** - Gets the amount that the content can shrink along the axis of orientation before reaching its\nmin size.\n- **setContentSize(size: _number_): _void_** - Sets the size of content along the axis of orientation.\n- **update(config: _ISplitViewUpdateConfig_): _void_** - Updates the provided characteristics.\n\n### **CSS Properties:**\n - **--forge-split-view-panel-size** - The size of the panel along the axis of orientation. _(default: undefined)_\n- **--forge-split-view-panel-cursor** - The cursor to display when hovering over the panel. _(default: undefined)_",
|
|
3670
3680
|
"attributes": [
|
|
3671
3681
|
{
|
|
3672
3682
|
"name": "resizable",
|
|
@@ -3723,7 +3733,7 @@
|
|
|
3723
3733
|
},
|
|
3724
3734
|
{
|
|
3725
3735
|
"name": "forge-step",
|
|
3726
|
-
"description": "
|
|
3736
|
+
"description": "Individual steps within a stepper component that represent progress in a multi-step process.\n---\n\n\n### **Slots:**\n - _default_ - The content of the step.\n- **optional** - The optional content of the step.\n- **expansion-content** - The content of the step expansion.\n\n### **CSS Properties:**\n - **--forge-step-primary-color** - The primary color of the step. Defaults to the primary theme. _(default: undefined)_\n- **--forge-step-text-color** - The text color of the step. Defaults to the on-primary theme. _(default: undefined)_\n- **--forge-step-border-radius** - The border radius of the step. Defaults to the extra-large shape. _(default: undefined)_\n- **--forge-step-border-radius-vertical** - The border radius of the step in vertical mode. Defaults to the medium shape. _(default: undefined)_\n- **--forge-step-disabled-text-color** - The text color of the step when disabled. Defaults to the text-low theme. _(default: undefined)_\n- **--forge-step-disabled-color** - The color of the step when disabled. Defaults to the surface-container-minimum theme. _(default: undefined)_\n- **--forge-step-icon-fill** - The fill color of the step icon. Defaults to unset. _(default: undefined)_\n- **--forge-step-icon-fill-active** - The fill color of the step icon when active. Defaults to the primary color. _(default: undefined)_\n- **--forge-step-icon-text-color** - The text color of the step icon. Defaults to the primary theme. _(default: undefined)_\n- **--forge-step-icon-text-color-active** - The text color of the step icon when active. Defaults to the on-primary theme. _(default: undefined)_\n- **--forge-step-icon-content-size** - The size of the step icon content. Defaults to 24px. _(default: undefined)_\n- **--forge-step-icon-size** - The size of the step icon. Defaults to 0.875em. _(default: undefined)_\n- **--forge-step-icon-transition-duration** - The duration of the step icon transition. Defaults to the medium4 animation duration. _(default: undefined)_\n- **--forge-step-icon-transition-easing** - The easing of the step icon transition. Defaults to the standard animation easing. _(default: undefined)_\n- **--forge-step-line-color** - The color of the step line. Defaults to the outline theme. _(default: undefined)_\n- **--forge-step-line-min-width** - The minimum width of the step line. Defaults to 10px. _(default: undefined)_\n- **--forge-step-line-min-width-clustered** - The minimum width of the step line when clustered. Defaults to 25px. _(default: undefined)_\n- **--forge-step-label-color** - The color of the step label. Defaults to the text-high theme. _(default: undefined)_\n- **--forge-step-sub-label-color** - The color of the step sub-label. Defaults to the text-medium theme. _(default: undefined)_\n- **--forge-step-error-color** - The color of the step error. Defaults to the error theme. _(default: undefined)_\n- **--forge-step-error-text-color** - The text color of the step error. Defaults to the on-error theme. _(default: undefined)_\n- **--forge-step-expansion-panel-border-left-width** - The border left width of the step expansion panel. Defaults to 1px. _(default: undefined)_\n- **--forge-step-expansion-panel-margin-bottom** - The margin bottom of the step expansion panel. Defaults to 4px. _(default: undefined)_\n- **--forge-step-expansion-panel-margin-left** - The margin left of the step expansion panel. Defaults to 60px. _(default: undefined)_\n- **--forge-step-expansion-panel-margin-top** - The margin top of the step expansion panel. Defaults to 4px. _(default: undefined)_\n- **--forge-step-expansion-panel-icon-color** - The color of the step expansion panel icon. Defaults to the text-medium theme. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root element.\n- **step** - The step container element.\n- **before** - The line before the step.\n- **after** - The line after the step.\n- **icon-container** - The icon container element.\n- **icon-content** - The icon content element.\n- **icon** - The icon element.\n- **index** - The index content container.\n- **text-container** - The text container element.\n- **title-container** - The title container element.\n- **subtitle-container** - The subtitle container element.\n- **state-layer** - The state layer surface element.\n- **focus-indicator** - The focus indicator element.",
|
|
3727
3737
|
"attributes": [
|
|
3728
3738
|
{
|
|
3729
3739
|
"name": "alternative",
|
|
@@ -3780,7 +3790,7 @@
|
|
|
3780
3790
|
},
|
|
3781
3791
|
{
|
|
3782
3792
|
"name": "forge-stepper",
|
|
3783
|
-
"description": "
|
|
3793
|
+
"description": "Steppers guide users through multi-step processes by breaking them into logical steps.\n---\n\n\n### **Events:**\n - **forge-step-select** - Emits the index when a step is selected.\n- **forge-step-expanded-content-focusin** - Emits the step component when the expanded content is focused.\n- **forge-step-expanded-content-focusout** - Emits the step component when the expanded content is blurred.",
|
|
3784
3794
|
"attributes": [
|
|
3785
3795
|
{
|
|
3786
3796
|
"name": "selected-index",
|
|
@@ -3822,7 +3832,7 @@
|
|
|
3822
3832
|
},
|
|
3823
3833
|
{
|
|
3824
3834
|
"name": "forge-tab",
|
|
3825
|
-
"description": "
|
|
3835
|
+
"description": "Individual tab elements that provide navigation between different content panels.\n---\n\n\n### **Events:**\n - **forge-tab-select** - Dispatched when the tab is selected. This event bubbles and it can be useful to capture it on the `<forge-tab-bar>` element.\n\n### **Slots:**\n - _default_ - The tab label.\n- **start** - Content before the label.\n- **end** - Content after the label.\n\n### **CSS Properties:**\n - **--forge-tab-active-color** - The primary color of the contents when active. _(default: undefined)_\n- **--forge-tab-inactive-color** - The primary color of the contents when inactive. _(default: undefined)_\n- **--forge-tab-height** - The height of the tab. _(default: undefined)_\n- **--forge-tab-stacked-height** - The height of the tab when stacked. _(default: undefined)_\n- **--forge-tab-padding-block** - The block space between the tab contents and the bounds of the tab. _(default: undefined)_\n- **--forge-tab-padding-inline** - The inline space between the tab contents and the bounds of the tab. _(default: undefined)_\n- **--forge-tab-disabled-opacity** - The opacity of the tab when disabled. _(default: undefined)_\n- **--forge-tab-indicator-color** - The color of the active tab indicator. _(default: undefined)_\n- **--forge-tab-indicator-height** - The height of the active tab indicator. _(default: undefined)_\n- **--forge-tab-indicator-shape** - The shape of the active tab indicator. _(default: undefined)_\n- **--forge-tab-vertical-indicator-shape** - The shape of the active tab indicator when vertical. _(default: undefined)_\n- **--forge-tab-inverted-indicator-shape** - The shape of the active tab indicator when inverted. _(default: undefined)_\n- **--forge-tab-vertical-inverted-indicator-shape** - The shape of the active tab indicator when vertical and inverted. _(default: undefined)_\n- **--forge-tab-container-color** - The color of the tab container. _(default: undefined)_\n- **--forge-tab-container-height** - The height of the tab container. _(default: undefined)_\n- **--forge-tab-container-shape** - The shape of the tab container. _(default: undefined)_\n- **--forge-tab-content-height** - The height of the tab content. _(default: undefined)_\n- **--forge-tab-content-spacing** - The spacing between tab contents. _(default: undefined)_\n- **--forge-tab-content-padding** - The padding value for both block and inline of the tab content. _(default: undefined)_\n- **--forge-tab-content-padding-block** - The block padding of the tab content. _(default: undefined)_\n- **--forge-tab-content-padding-inline** - The inline padding of the tab content. _(default: undefined)_\n- **--forge-tab-active-focus-icon-color** - The color of the icon when the tab is active and focused. _(default: undefined)_\n- **--forge-tab-active-hover-icon-color** - The color of the icon when the tab is active and hovered. _(default: undefined)_\n- **--forge-tab-active-icon-color** - The color of the icon when the tab is active. _(default: undefined)_\n- **--forge-tab-active-pressed-icon-color** - The color of the icon when the tab is active and pressed. _(default: undefined)_\n- **--forge-tab-icon-size** - The size of the icon. _(default: undefined)_\n- **--forge-tab-focus-icon-color** - The color of the icon when the tab is focused. _(default: undefined)_\n- **--forge-tab-hover-icon-color** - The color of the icon when the tab is hovered. _(default: undefined)_\n- **--forge-tab-icon-color** - The color of the icon. _(default: undefined)_\n- **--forge-tab-pressed-icon-color** - The color of the icon when the tab is pressed. _(default: undefined)_\n- **--forge-tab-active-focus-label-text-color** - The color of the label text when the tab is active and focused. _(default: undefined)_\n- **--forge-tab-active-hover-label-text-color** - The color of the label text when the tab is active and hovered. _(default: undefined)_\n- **--forge-tab-active-label-text-color** - The color of the label text when the tab is active. _(default: undefined)_\n- **--forge-tab-active-pressed-label-text-color** - The color of the label text when the tab is active and pressed. _(default: undefined)_\n- **--forge-tab-focus-label-text-color** - The color of the label text when the tab is focused. _(default: undefined)_\n- **--forge-tab-hover-label-text-color** - The color of the label text when the tab is hovered. _(default: undefined)_\n- **--forge-tab-label-text-color** - The color of the label text. _(default: undefined)_\n- **--forge-tab-pressed-label-text-color** - The color of the label text when the tab is pressed. _(default: undefined)_\n\n### **CSS Parts:**\n - **container** - The tab container.\n- **content** - The tab content container.\n- **label** - The tab label container.\n- **indicator** - The tab active indicator.",
|
|
3826
3836
|
"attributes": [
|
|
3827
3837
|
{
|
|
3828
3838
|
"name": "disabled",
|
|
@@ -3906,7 +3916,7 @@
|
|
|
3906
3916
|
},
|
|
3907
3917
|
{
|
|
3908
3918
|
"name": "forge-view",
|
|
3909
|
-
"description": "
|
|
3919
|
+
"description": "A wrapper component that represents a single view content area within a view-switcher for organizing and displaying content sections.\n---\n",
|
|
3910
3920
|
"attributes": [],
|
|
3911
3921
|
"references": []
|
|
3912
3922
|
}
|