@tylertech/forge 3.11.0 → 3.12.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 +311 -145
- package/dist/app-bar/forge-app-bar.css +2 -0
- package/dist/button/forge-button.css +2 -0
- package/dist/checkbox/forge-checkbox.css +2 -0
- package/dist/chips/forge-chips.css +2 -0
- package/dist/floating-action-button/forge-floating-action-button.css +2 -0
- package/dist/icon-button/forge-icon-button.css +2 -0
- package/dist/lib.js +17 -17
- package/dist/lib.js.map +3 -3
- package/dist/list/forge-list.css +2 -0
- package/dist/radio/forge-radio.css +2 -0
- package/dist/skip-link/forge-skip-link.css +2 -0
- package/dist/state-layer/forge-state-layer.css +2 -0
- package/dist/switch/forge-switch.css +2 -0
- package/dist/vscode.html-custom-data.json +74 -59
- package/esm/accordion/accordion.d.ts +1 -1
- package/esm/accordion/accordion.js +1 -1
- 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/autocomplete/autocomplete-core.js +16 -3
- package/esm/autocomplete/autocomplete.d.ts +1 -1
- package/esm/autocomplete/autocomplete.js +1 -1
- package/esm/avatar/avatar.d.ts +1 -1
- package/esm/avatar/avatar.js +1 -1
- package/esm/backdrop/backdrop.d.ts +1 -1
- package/esm/backdrop/backdrop.js +1 -1
- package/esm/badge/badge.d.ts +1 -1
- package/esm/badge/badge.js +1 -1
- package/esm/banner/banner.d.ts +1 -1
- package/esm/banner/banner.js +1 -1
- package/esm/button/button.d.ts +1 -6
- package/esm/button/button.js +1 -6
- package/esm/button-area/button-area.d.ts +1 -4
- package/esm/button-area/button-area.js +1 -4
- package/esm/button-toggle/button-toggle/button-toggle.d.ts +1 -1
- package/esm/button-toggle/button-toggle/button-toggle.js +1 -1
- 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/chip-field/chip-field.d.ts +1 -1
- package/esm/chip-field/chip-field.js +1 -1
- package/esm/chips/chip/chip-adapter.d.ts +3 -0
- package/esm/chips/chip/chip-adapter.js +12 -2
- package/esm/chips/chip/chip-constants.d.ts +2 -0
- package/esm/chips/chip/chip-constants.js +2 -1
- package/esm/chips/chip/chip-core.d.ts +4 -0
- package/esm/chips/chip/chip-core.js +9 -0
- package/esm/chips/chip/chip.d.ts +4 -0
- package/esm/chips/chip/chip.js +8 -0
- package/esm/chips/chip-set/chip-set.d.ts +1 -1
- package/esm/chips/chip-set/chip-set.js +1 -1
- package/esm/circular-progress/circular-progress.d.ts +1 -2
- package/esm/circular-progress/circular-progress.js +1 -2
- package/esm/color-picker/color-picker.d.ts +1 -1
- package/esm/color-picker/color-picker.js +1 -1
- package/esm/date-picker/date-picker.d.ts +1 -1
- package/esm/date-picker/date-picker.js +1 -1
- package/esm/dialog/dialog.d.ts +1 -1
- package/esm/dialog/dialog.js +1 -1
- package/esm/divider/divider.d.ts +1 -1
- package/esm/divider/divider.js +1 -1
- package/esm/drawer/base/base-drawer-adapter.d.ts +2 -0
- package/esm/drawer/base/base-drawer-adapter.js +3 -0
- package/esm/drawer/base/base-drawer-core.js +3 -0
- package/esm/drawer/drawer/drawer.d.ts +1 -1
- package/esm/drawer/drawer/drawer.js +1 -1
- package/esm/drawer/modal-drawer/modal-drawer.d.ts +1 -1
- package/esm/drawer/modal-drawer/modal-drawer.js +1 -1
- package/esm/expansion-panel/expansion-panel.d.ts +1 -1
- package/esm/expansion-panel/expansion-panel.js +1 -1
- package/esm/field/field.d.ts +1 -2
- package/esm/field/field.js +1 -2
- package/esm/file-picker/file-picker.d.ts +2 -3
- package/esm/file-picker/file-picker.js +2 -3
- package/esm/floating-action-button/floating-action-button.d.ts +1 -1
- package/esm/floating-action-button/floating-action-button.js +1 -1
- package/esm/focus-indicator/focus-indicator.d.ts +1 -1
- package/esm/focus-indicator/focus-indicator.js +22 -21
- package/esm/icon/icon.d.ts +1 -1
- package/esm/icon/icon.js +1 -1
- package/esm/icon-button/icon-button.d.ts +1 -1
- package/esm/icon-button/icon-button.js +1 -1
- package/esm/inline-message/inline-message.d.ts +1 -1
- package/esm/inline-message/inline-message.js +1 -1
- package/esm/label/label.d.ts +1 -1
- package/esm/label/label.js +1 -1
- package/esm/label-value/label-value.d.ts +1 -1
- package/esm/label-value/label-value.js +1 -1
- package/esm/linear-progress/linear-progress.d.ts +1 -2
- package/esm/linear-progress/linear-progress.js +1 -2
- package/esm/list/list/list.d.ts +1 -1
- package/esm/list/list/list.js +1 -1
- package/esm/list/list-item/list-item-constants.js +1 -1
- package/esm/list-dropdown/list-dropdown-constants.d.ts +5 -1
- package/esm/list-dropdown/list-dropdown-utils.d.ts +3 -1
- package/esm/list-dropdown/list-dropdown-utils.js +41 -20
- package/esm/menu/menu-adapter.d.ts +2 -0
- package/esm/menu/menu-adapter.js +12 -8
- package/esm/menu/menu-constants.d.ts +1 -0
- package/esm/menu/menu-constants.js +3 -2
- package/esm/menu/menu-core.d.ts +5 -0
- package/esm/menu/menu-core.js +41 -2
- package/esm/menu/menu.d.ts +16 -1
- package/esm/menu/menu.js +14 -2
- package/esm/open-icon/open-icon.d.ts +2 -1
- package/esm/open-icon/open-icon.js +2 -1
- package/esm/overlay/overlay.d.ts +1 -2
- package/esm/overlay/overlay.js +1 -2
- package/esm/page-state/page-state.d.ts +1 -1
- package/esm/page-state/page-state.js +1 -1
- package/esm/paginator/paginator-core.d.ts +16 -0
- package/esm/paginator/paginator-core.js +29 -9
- package/esm/paginator/paginator.d.ts +37 -1
- package/esm/paginator/paginator.js +45 -1
- package/esm/popover/popover-adapter.js +1 -1
- package/esm/popover/popover-constants.d.ts +4 -0
- package/esm/popover/popover-constants.js +4 -2
- package/esm/popover/popover-core.d.ts +5 -1
- package/esm/popover/popover-core.js +13 -0
- package/esm/popover/popover.d.ts +6 -2
- package/esm/popover/popover.js +9 -1
- package/esm/profile-card/profile-card.d.ts +2 -1
- package/esm/profile-card/profile-card.js +2 -1
- package/esm/radio/radio/radio.d.ts +1 -2
- package/esm/radio/radio/radio.js +1 -2
- package/esm/scaffold/scaffold.d.ts +1 -1
- package/esm/scaffold/scaffold.js +1 -1
- package/esm/select/option/option.d.ts +1 -1
- package/esm/select/option/option.js +1 -1
- package/esm/select/select/select.d.ts +1 -1
- package/esm/select/select/select.js +2 -2
- package/esm/skeleton/skeleton.d.ts +1 -1
- package/esm/skeleton/skeleton.js +1 -1
- package/esm/skip-link/skip-link.d.ts +1 -1
- package/esm/skip-link/skip-link.js +1 -1
- package/esm/slider/slider.d.ts +1 -1
- package/esm/slider/slider.js +1 -1
- package/esm/split-button/split-button.d.ts +1 -1
- package/esm/split-button/split-button.js +1 -1
- package/esm/split-view/split-view-panel/split-view-panel.js +1 -1
- package/esm/stack/stack.d.ts +1 -8
- package/esm/stack/stack.js +1 -8
- package/esm/state-layer/state-layer.d.ts +1 -1
- package/esm/state-layer/state-layer.js +2 -2
- package/esm/table/table-adapter.d.ts +4 -4
- package/esm/table/table-adapter.js +4 -4
- package/esm/table/table-core.js +2 -2
- package/esm/table/table-utils.d.ts +2 -2
- package/esm/table/table-utils.js +22 -18
- package/esm/table/table.d.ts +2 -2
- package/esm/table/table.js +1 -1
- package/esm/tabs/tab/tab.d.ts +1 -1
- package/esm/tabs/tab/tab.js +1 -1
- package/esm/tabs/tab-bar/tab-bar.d.ts +1 -1
- package/esm/tabs/tab-bar/tab-bar.js +1 -1
- package/esm/text-field/text-field-adapter.d.ts +6 -4
- package/esm/text-field/text-field-adapter.js +11 -4
- package/esm/text-field/text-field-core.d.ts +4 -0
- package/esm/text-field/text-field-core.js +13 -2
- package/esm/text-field/text-field.d.ts +1 -1
- package/esm/text-field/text-field.js +1 -1
- package/esm/time-picker/time-picker-adapter.js +1 -0
- package/esm/time-picker/time-picker-core.js +3 -3
- package/esm/toast/toast-adapter.d.ts +20 -0
- package/esm/toast/toast-adapter.js +30 -0
- package/esm/toast/toast-core.d.ts +17 -0
- package/esm/toast/toast-core.js +66 -0
- package/esm/toast/toast.d.ts +9 -2
- package/esm/toast/toast.js +10 -1
- package/esm/toolbar/toolbar.d.ts +1 -3
- package/esm/toolbar/toolbar.js +1 -3
- package/esm/tooltip/tooltip.d.ts +1 -1
- package/esm/tooltip/tooltip.js +1 -1
- package/esm/view-switcher/view/view.d.ts +1 -1
- package/esm/view-switcher/view/view.js +1 -1
- package/esm/view-switcher/view-switcher.d.ts +1 -1
- package/esm/view-switcher/view-switcher.js +1 -1
- package/package.json +1 -1
- package/sass/state-layer/_core.scss +2 -0
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"tags": [
|
|
5
5
|
{
|
|
6
6
|
"name": "forge-accordion",
|
|
7
|
-
"description": "Accordions
|
|
7
|
+
"description": "Accordions wrap a collection of expansion panels to ensure that only one panel is expanded at a time.\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": "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.",
|
|
19
|
+
"description": "Autocomplete components provide real-time typeahead suggestions as users type in a text field. Use autocompletes to help users quickly find and select from a list of options, improving form usability and data accuracy.\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",
|
|
@@ -128,7 +128,7 @@
|
|
|
128
128
|
},
|
|
129
129
|
{
|
|
130
130
|
"name": "forge-avatar",
|
|
131
|
-
"description": "Avatars represent an entity via text or image.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for avatar content if not provided via text/imageUrl.\n\n### **CSS Properties:**\n - **--forge-avatar-background** - The background color of the avatar. _(default: undefined)_\n- **--forge-avatar-shape** - The border radius of the avatar, defaults to 50%. _(default: undefined)_\n- **--forge-avatar-color** - The text color of the avatar. _(default: undefined)_\n- **--forge-avatar-size** - The height and width of the avatar. _(default: undefined)_\n- **--forge-avatar-transition-duration** - The transition duration for animations. _(default: undefined)_\n- **--forge-avatar-transition-timing** - The transition timing function for animations. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.",
|
|
131
|
+
"description": "Avatars represent an entity via text or image. Use avatars to visually represent users, objects, or identifiers in your application.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for avatar content if not provided via text/imageUrl.\n\n### **CSS Properties:**\n - **--forge-avatar-background** - The background color of the avatar. _(default: undefined)_\n- **--forge-avatar-shape** - The border radius of the avatar, defaults to 50%. _(default: undefined)_\n- **--forge-avatar-color** - The text color of the avatar. _(default: undefined)_\n- **--forge-avatar-size** - The height and width of the avatar. _(default: undefined)_\n- **--forge-avatar-transition-duration** - The transition duration for animations. _(default: undefined)_\n- **--forge-avatar-transition-timing** - The transition timing function for animations. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.",
|
|
132
132
|
"attributes": [
|
|
133
133
|
{
|
|
134
134
|
"name": "text",
|
|
@@ -150,7 +150,7 @@
|
|
|
150
150
|
},
|
|
151
151
|
{
|
|
152
152
|
"name": "forge-backdrop",
|
|
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.",
|
|
153
|
+
"description": "Backdrops provide a semi-transparent overlay behind modal content like dialogs and drawers. These are building blocks for creating modal experiences, not intended to be used directly.\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,13 +167,13 @@
|
|
|
167
167
|
},
|
|
168
168
|
{
|
|
169
169
|
"name": "forge-badge",
|
|
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)_",
|
|
170
|
+
"description": "Badges display small amounts of non-interactive 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
|
},
|
|
174
174
|
{
|
|
175
175
|
"name": "forge-banner",
|
|
176
|
-
"description": "Banners are used to inform users of important information, such as errors, warnings, or success messages.\n---\n\n\n### **Events:**\n - **forge-banner-before-dismiss** - Dispatched before the banner is dismissed. Cancelable to prevent dismissal.\n- **forge-banner-dismissed** - Dispatched when the banner is dismissed.\n\n### **Slots:**\n - _default_ - The content of the banner.\n- **icon** - The icon to display.\n- **button** - The optional button to display.\n\n### **CSS Properties:**\n - **--forge-banner-background** - The background color of the banner. _(default: undefined)_\n- **--forge-banner-color** - The text color of the banner. _(default: undefined)_\n- **--forge-banner-icon-color** - The color of the icon. _(default: undefined)_\n- **--forge-banner-gap** - The gap between the contents. _(default: undefined)_\n- **--forge-banner-padding-inline** - The inline padding. _(default: undefined)_\n- **--forge-banner-padding-block** - The block padding. _(default: undefined)_\n- **--forge-banner-transition-duration** - The transition duration. _(default: undefined)_\n- **--forge-banner-transition-easing** - The transition easing function. _(default: undefined)_",
|
|
176
|
+
"description": "Banners are used to inform users of important information, such as errors, warnings, or success messages. Use banners for non-critical messages that require user attention but do not interrupt workflow.\n---\n\n\n### **Events:**\n - **forge-banner-before-dismiss** - Dispatched before the banner is dismissed. Cancelable to prevent dismissal.\n- **forge-banner-dismissed** - Dispatched when the banner is dismissed.\n\n### **Slots:**\n - _default_ - The content of the banner.\n- **icon** - The icon to display.\n- **button** - The optional button to display.\n\n### **CSS Properties:**\n - **--forge-banner-background** - The background color of the banner. _(default: undefined)_\n- **--forge-banner-color** - The text color of the banner. _(default: undefined)_\n- **--forge-banner-icon-color** - The color of the icon. _(default: undefined)_\n- **--forge-banner-gap** - The gap between the contents. _(default: undefined)_\n- **--forge-banner-padding-inline** - The inline padding. _(default: undefined)_\n- **--forge-banner-padding-block** - The block padding. _(default: undefined)_\n- **--forge-banner-transition-duration** - The transition duration. _(default: undefined)_\n- **--forge-banner-transition-easing** - The transition easing function. _(default: undefined)_",
|
|
177
177
|
"attributes": [
|
|
178
178
|
{
|
|
179
179
|
"name": "dismissed",
|
|
@@ -222,7 +222,7 @@
|
|
|
222
222
|
},
|
|
223
223
|
{
|
|
224
224
|
"name": "forge-button",
|
|
225
|
-
"description": "Buttons
|
|
225
|
+
"description": "Buttons are used when a user needs to take an action. They can be used to trigger an action, navigate to a new location, and can be styled with a variety of themes and variants.\n---\n\n\n### **Events:**\n - **click** - Fires when the button is clicked.\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 label text.\n- **start** - Elements to logically render before the label text.\n- **end** - Elements to logically render after the label text.\n\n### **CSS Properties:**\n - **--forge-button-primary-color** - The primary color of the button. _(default: undefined)_\n- **--forge-button-text-color** - The text color of the button. Inherits from primary color. _(default: undefined)_\n- **--forge-button-disabled-color** - The disabled color of the button. _(default: undefined)_\n- **--forge-button-padding** - The padding of the button. _(default: undefined)_\n- **--forge-button-display** - The display of the button. _(default: undefined)_\n- **--forge-button-justify** - The flex justify of the button. _(default: undefined)_\n- **--forge-button-shape** - The shape of the button. _(default: undefined)_\n- **--forge-button-height** - The height of the button. _(default: undefined)_\n- **--forge-button-min-width** - The min-width of the button. _(default: undefined)_\n- **--forge-button-spacing** - The spacing of the button. _(default: undefined)_\n- **--forge-button-border-width** - The border-width of the button. _(default: undefined)_\n- **--forge-button-border-style** - The border style of the button. _(default: undefined)_\n- **--forge-button-border-color** - The border color of the button. _(default: undefined)_\n- **--forge-button-shape-start-start-radius** - The shape start start radius of the button. _(default: undefined)_\n- **--forge-button-shape-start-end-radius** - The shape start end radius of the button. _(default: undefined)_\n- **--forge-button-shape-end-start-radius** - The shape end start radius of the button. _(default: undefined)_\n- **--forge-button-shape-end-end-radius** - The shape end end radius of the button. _(default: undefined)_\n- **--forge-button-padding-block** - The padding block of the button. _(default: undefined)_\n- **--forge-button-padding-inline** - The padding inline of the button. _(default: undefined)_\n- **--forge-button-background** - The background color of the button. _(default: undefined)_\n- **--forge-button-hover-background** - The background color of the button on hover. _(default: undefined)_\n- **--forge-button-active-background** - The background color of the button on active state. _(default: undefined)_\n- **--forge-button-color** - The text color of the button. _(default: undefined)_\n- **--forge-button-icon-size** - The size of the icon in the button. _(default: undefined)_\n- **--forge-button-shadow** - The shadow of the button. _(default: undefined)_\n- **--forge-button-hover-shadow** - The shadow of the button on hover. _(default: undefined)_\n- **--forge-button-active-shadow** - The shadow of the button on active state. _(default: undefined)_\n- **--forge-button-cursor** - The cursor type of the button. _(default: undefined)_\n- **--forge-button-transition-duration** - The transition duration of the button. _(default: undefined)_\n- **--forge-button-transition-timing** - The transition timing of the button. _(default: undefined)_\n- **--forge-button-text-padding-inline** - The inline padding of the button when using the text variant. _(default: undefined)_\n- **--forge-button-filled-background** - The background color of the filled button. _(default: undefined)_\n- **--forge-button-filled-disabled-background** - The background color of the disabled filled button. _(default: undefined)_\n- **--forge-button-filled-color** - The text color of the filled button. _(default: undefined)_\n- **--forge-button-filled-disabled-color** - The text color of the disabled filled button. _(default: undefined)_\n- **--forge-button-raised-background** - The background color of the raised button. _(default: undefined)_\n- **--forge-button-raised-disabled-background** - The background color of the disabled raised button. _(default: undefined)_\n- **--forge-button-raised-color** - The text color of the raised button. _(default: undefined)_\n- **--forge-button-raised-disabled-color** - The text color of the disabled raised button. _(default: undefined)_\n- **--forge-button-raised-shadow** - The shadow of the raised button. _(default: undefined)_\n- **--forge-button-raised-hover-shadow** - The shadow of the raised button on hover. _(default: undefined)_\n- **--forge-button-raised-active-shadow** - The shadow of the raised button on active state. _(default: undefined)_\n- **--forge-button-raised-disabled-shadow** - The shadow of the disabled raised button. _(default: undefined)_\n- **--forge-button-flat-background** - The background color of the flat button. _(default: undefined)_\n- **--forge-button-flat-disabled-background** - The background color of the disabled flat button. _(default: undefined)_\n- **--forge-button-flat-color** - The text color of the flat button. _(default: undefined)_\n- **--forge-button-flat-disabled-color** - The text color of the disabled flat button. _(default: undefined)_\n- **--forge-button-outlined-background** - The background color of the outlined button. _(default: undefined)_\n- **--forge-button-outlined-color** - The text color of the outlined button. _(default: undefined)_\n- **--forge-button-outlined-border-width** - The border width of the outlined button. _(default: undefined)_\n- **--forge-button-outlined-border-style** - The border style of the outlined button. _(default: undefined)_\n- **--forge-button-outlined-border-color** - The border color of the outlined button. _(default: undefined)_\n- **--forge-button-link-color** - The text color of the link button. _(default: undefined)_\n- **--forge-button-link-text-decoration** - The text decoration of the link button. _(default: undefined)_\n- **--forge-button-link-height** - The height of the link button. _(default: undefined)_\n- **--forge-button-link-padding** - The padding of the link button. _(default: undefined)_\n- **--forge-button-link-line-height** - The line height of the link button. _(default: undefined)_\n- **--forge-button-link-width** - The width of the link button. _(default: undefined)_\n- **--forge-button-link-hover-text-decoration** - The text decoration of the link button on hover. _(default: undefined)_\n- **--forge-button-link-active-opacity** - The opacity of the link button on active state. _(default: undefined)_\n- **--forge-button-link-transition-duration** - The transition duration of the link button. _(default: undefined)_\n- **--forge-button-link-transition-timing** - The transition timing of the link button. _(default: undefined)_\n- **--forge-button-disabled-cursor** - The cursor type of the disabled button. _(default: undefined)_\n- **--forge-button-disabled-text-color** - The text color of the disabled button. _(default: undefined)_\n- **--forge-button-disabled-background** - The background color of the disabled button. _(default: undefined)_\n- **--forge-button-disabled-border-color** - The border color of the disabled button. _(default: undefined)_\n- **--forge-button-disabled-shadow** - The shadow of the disabled button. _(default: undefined)_\n- **--forge-button-dense-height** - The height of the dense button. _(default: undefined)_\n- **--forge-button-pill-shape** - The shape of the pill button. _(default: undefined)_\n- **--forge-button-pill-padding-inline** - The inline padding of the pill button. _(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.",
|
|
226
226
|
"attributes": [
|
|
227
227
|
{
|
|
228
228
|
"name": "type",
|
|
@@ -279,7 +279,7 @@
|
|
|
279
279
|
},
|
|
280
280
|
{
|
|
281
281
|
"name": "forge-button-area",
|
|
282
|
-
"description": "Button areas are used to create
|
|
282
|
+
"description": "Button areas are used to create clickable areas that group related information and actions about a single subject. The button area component wraps any arbitrary content with a `<button>` element to enable accessible, clickable interfaces including nested controls and other complex content.\n---\n\n\n### **Events:**\n - **click** - The button area emits a native HTML click event whenever it or the slotted button is clicked. Add the listener to the `<forge-button-area>` element to receive all events. Note: Set `data-forge-ignore` on any nested buttons or other interactive elements to prevent them from activating the button area.\n\n### **Slots:**\n - _default_ - Places content within the default (unnamed) slot (main body of the component).\n- **button** - Places content within a visually hidden slot. Always place a `<button>` element in this slot.\n\n### **CSS Properties:**\n - **--forge-button-area-cursor** - The cursor. _(default: undefined)_\n- **--forge-button-area-disabled-cursor** - The cursor when in the disabled state. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **button** - The visually hidden slot for the `<button>` element.\n- **focus-indicator** - The focus-indicator indicator element.\n- **state-layer** - The state-layer surface element.",
|
|
283
283
|
"attributes": [
|
|
284
284
|
{
|
|
285
285
|
"name": "disabled",
|
|
@@ -468,7 +468,7 @@
|
|
|
468
468
|
},
|
|
469
469
|
{
|
|
470
470
|
"name": "forge-chip-field",
|
|
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.",
|
|
471
|
+
"description": "A specialized input field component that allows users to create and manage a collection of chips representing text values or selections. Use a chip field when you want to allow users to input multiple discrete items, such as tags, categories, or selections from a predefined list. Prefer alternatives such as a select or autocomplete when dealing with a large number of options or when single selection is sufficient.\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",
|
|
@@ -555,7 +555,7 @@
|
|
|
555
555
|
},
|
|
556
556
|
{
|
|
557
557
|
"name": "forge-circular-progress",
|
|
558
|
-
"description": "Circular progress indicators display progress by animating along a circular track in a clockwise direction.\n---\n\n\n### **Slots:**\n - _default_ - The is the default/unnamed slot. Renders content at the center of the progress indicator.\n\n### **CSS Properties:**\n - **--forge-circular-progress-size** - The height and width of the indicator container. _(default: undefined)_\n- **--forge-circular-progress-padding** - The padding inside the bounding box of the container. _(default: undefined)_\n- **--forge-circular-progress-track-width** - The track indicator width. _(default: undefined)_\n- **--forge-circular-progress-track-color** - The track background color. _(default: undefined)_\n- **--forge-circular-progress-indicator-color** - The track indicator color. _(default: undefined)_\n- **--forge-circular-progress-arc-duration** - The duration of the arc animation. _(default: undefined)_\n- **--forge-circular-progress-theme-transition-duration** - The duration of the theme transition. _(default: undefined)_\n- **--forge-circular-progress-theme-transition-timing** - The easing function to use for the theme transition. _(default: undefined)_\n\n### **CSS Parts:**\n - **progressbar** - Styles the progress bar container element",
|
|
558
|
+
"description": "Circular progress indicators display progress by animating along a circular track in a clockwise direction. They can be used to represent both determinate and indeterminate progress.\n---\n\n\n### **Slots:**\n - _default_ - The is the default/unnamed slot. Renders content at the center of the progress indicator.\n\n### **CSS Properties:**\n - **--forge-circular-progress-size** - The height and width of the indicator container. _(default: undefined)_\n- **--forge-circular-progress-padding** - The padding inside the bounding box of the container. _(default: undefined)_\n- **--forge-circular-progress-track-width** - The track indicator width. _(default: undefined)_\n- **--forge-circular-progress-track-color** - The track background color. _(default: undefined)_\n- **--forge-circular-progress-indicator-color** - The track indicator color. _(default: undefined)_\n- **--forge-circular-progress-arc-duration** - The duration of the arc animation. _(default: undefined)_\n- **--forge-circular-progress-theme-transition-duration** - The duration of the theme transition. _(default: undefined)_\n- **--forge-circular-progress-theme-transition-timing** - The easing function to use for the theme transition. _(default: undefined)_\n\n### **CSS Parts:**\n - **progressbar** - Styles the progress bar container element",
|
|
559
559
|
"attributes": [
|
|
560
560
|
{
|
|
561
561
|
"name": "determinate",
|
|
@@ -582,7 +582,7 @@
|
|
|
582
582
|
},
|
|
583
583
|
{
|
|
584
584
|
"name": "forge-color-picker",
|
|
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.",
|
|
585
|
+
"description": "An interactive color selection component with support for multiple color formats (hex, RGB, HSV) and optional opacity control. Intended to be used either inline, or within a popover or dialog for selecting colors.\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": "A date input component with an integrated calendar popup for selecting single dates
|
|
607
|
+
"description": "A date input component with an integrated calendar popup for selecting single dates.\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",
|
|
@@ -787,7 +787,7 @@
|
|
|
787
787
|
},
|
|
788
788
|
{
|
|
789
789
|
"name": "forge-dialog",
|
|
790
|
-
"description": "Dialogs are temporary UI elements that are used to display information, ask for input, or confirm actions.\n---\n\n\n### **Events:**\n - **forge-dialog-open** - Dispatched when the dialog is opened.\n- **forge-dialog-close** - Dispatched when the dialog is closed.\n- **forge-dialog-before-close** - Dispatched before the dialog is closed. This event is cancelable.\n- **forge-dialog-move-start** - Dispatched when the dialog is first moved.\n- **forge-dialog-move** - Dispatched when the dialog is being moved.\n- **forge-dialog-move-end** - Dispatched when the dialog is done being moved.\n- **forge-dialog-fullscreen-change** - Dispatched when the dialog's fullscreen state changes.\n\n### **Methods:**\n - **show(): _void_** - Shows the dialog.\n- **hide(): _void_** - Hides the dialog.\n\n### **Slots:**\n - _default_ - The content of the dialog.\n- **move-handle** - The move handle content.\n\n### **CSS Properties:**\n - **--forge-dialog-background** - The background color of the dialog. _(default: undefined)_\n- **--forge-dialog-shape** - The shape of the dialog. _(default: undefined)_\n- **--forge-dialog-elevation** - The elevation of the dialog. _(default: undefined)_\n- **--forge-dialog-spacing** - The spacing between elements inside the dialog. _(default: undefined)_\n- **--forge-dialog-block-start-spacing** - The spacing at the start of the dialog block. _(default: undefined)_\n- **--forge-dialog-block-end-spacing** - The spacing at the end of the dialog block. _(default: undefined)_\n- **--forge-dialog-inline-start-spacing** - The spacing at the start of the dialog inline. _(default: undefined)_\n- **--forge-dialog-inline-end-spacing** - The spacing at the end of the dialog inline. _(default: undefined)_\n- **--forge-dialog-padding** - The padding of the dialog. _(default: undefined)_\n- **--forge-dialog-width** - The width of the dialog. _(default: undefined)_\n- **--forge-dialog-height** - The height of the dialog. _(default: undefined)_\n- **--forge-dialog-min-width** - The minimum width of the dialog. _(default: undefined)_\n- **--forge-dialog-max-width** - The maximum width of the dialog. _(default: undefined)_\n- **--forge-dialog-min-height** - The minimum height of the dialog. _(default: undefined)_\n- **--forge-dialog-max-height** - The maximum height of the dialog. _(default: undefined)_\n- **--forge-dialog-z-index** - The z-index of the dialog. _(default: undefined)_\n- **--forge-dialog-move-handle-color** - The color of the move handle. _(default: undefined)_\n- **--forge-dialog-move-handle-size** - The size of the move handle. _(default: undefined)_\n- **--forge-dialog-move-handle-hover-cursor** - The cursor style when hovering over the move handle. _(default: undefined)_\n- **--forge-dialog-move-handle-active-cursor** - The cursor style when the move handle is active. _(default: undefined)_\n- **--forge-dialog-move-handle-spacing** - The spacing around the move handle. _(default: undefined)_\n- **--forge-dialog-move-transition-duration** - The duration of the move transition. _(default: undefined)_\n- **--forge-dialog-move-transition-easing** - The easing function of the move transition. _(default: undefined)_\n- **--forge-dialog-moving-opacity** - The opacity of the dialog when it is being moved. _(default: undefined)_\n- **--forge-dialog-enter-animation-duration** - The duration of the enter animation. _(default: undefined)_\n- **--forge-dialog-enter-animation-easing** - The easing function of the enter animation. _(default: undefined)_\n- **--forge-dialog-exit-animation-duration** - The duration of the exit animation. _(default: undefined)_\n- **--forge-dialog-exit-animation-easing** - The easing function of the exit animation. _(default: undefined)_\n- **--forge-dialog-zoom-opacity** - The opacity of the dialog during zoom animation. _(default: undefined)_\n- **--forge-dialog-zoom-scale** - The scale of the dialog during zoom animation. _(default: undefined)_\n- **--forge-dialog-fade-opacity** - The opacity of the dialog during fade animation. _(default: undefined)_\n- **--forge-dialog-slide-opacity** - The opacity of the dialog during slide animation. _(default: undefined)_\n- **--forge-dialog-slide-translate** - The translation distance of the dialog during slide animation. _(default: undefined)_\n- **--forge-dialog-backdrop-opacity** - The opacity of the dialog backdrop. _(default: undefined)_\n- **--forge-dialog-nonmodal-elevation** - The elevation of non-modal dialogs. _(default: undefined)_\n- **--forge-dialog-fullscreen-enter-animation-duration** - The duration of the enter animation for fullscreen dialogs. _(default: undefined)_\n- **--forge-dialog-fullscreen-exit-animation-duration** - The duration of the exit animation for fullscreen dialogs. _(default: undefined)_\n- **--forge-dialog-position-x** - The x-axis position of the dialog. _(default: undefined)_\n- **--forge-dialog-position-y** - The y-axis position of the dialog. _(default: undefined)_\n- **--forge-dialog-preset-sheet-enter-animation-duration** - The duration of the enter animation for preset sheet dialogs. _(default: undefined)_\n- **--forge-dialog-preset-sheet-exit-animation-duration** - The duration of the exit animation for preset sheet dialogs. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The dialog container element.\n- **backdrop** - The backdrop element.\n- **surface** - The dialog surface element.\n- **move-handle-container** - The alignment container for the move handle.\n- **move-handle** - The move handle element.\n- **move-handle-icon** - The move handle icon element.",
|
|
790
|
+
"description": "Dialogs are temporary UI elements that are used to display information, ask for input, or confirm actions. Dialogs can be modal or non-modal.\n---\n\n\n### **Events:**\n - **forge-dialog-open** - Dispatched when the dialog is opened.\n- **forge-dialog-close** - Dispatched when the dialog is closed.\n- **forge-dialog-before-close** - Dispatched before the dialog is closed. This event is cancelable.\n- **forge-dialog-move-start** - Dispatched when the dialog is first moved.\n- **forge-dialog-move** - Dispatched when the dialog is being moved.\n- **forge-dialog-move-end** - Dispatched when the dialog is done being moved.\n- **forge-dialog-fullscreen-change** - Dispatched when the dialog's fullscreen state changes.\n\n### **Methods:**\n - **show(): _void_** - Shows the dialog.\n- **hide(): _void_** - Hides the dialog.\n\n### **Slots:**\n - _default_ - The content of the dialog.\n- **move-handle** - The move handle content.\n\n### **CSS Properties:**\n - **--forge-dialog-background** - The background color of the dialog. _(default: undefined)_\n- **--forge-dialog-shape** - The shape of the dialog. _(default: undefined)_\n- **--forge-dialog-elevation** - The elevation of the dialog. _(default: undefined)_\n- **--forge-dialog-spacing** - The spacing between elements inside the dialog. _(default: undefined)_\n- **--forge-dialog-block-start-spacing** - The spacing at the start of the dialog block. _(default: undefined)_\n- **--forge-dialog-block-end-spacing** - The spacing at the end of the dialog block. _(default: undefined)_\n- **--forge-dialog-inline-start-spacing** - The spacing at the start of the dialog inline. _(default: undefined)_\n- **--forge-dialog-inline-end-spacing** - The spacing at the end of the dialog inline. _(default: undefined)_\n- **--forge-dialog-padding** - The padding of the dialog. _(default: undefined)_\n- **--forge-dialog-width** - The width of the dialog. _(default: undefined)_\n- **--forge-dialog-height** - The height of the dialog. _(default: undefined)_\n- **--forge-dialog-min-width** - The minimum width of the dialog. _(default: undefined)_\n- **--forge-dialog-max-width** - The maximum width of the dialog. _(default: undefined)_\n- **--forge-dialog-min-height** - The minimum height of the dialog. _(default: undefined)_\n- **--forge-dialog-max-height** - The maximum height of the dialog. _(default: undefined)_\n- **--forge-dialog-z-index** - The z-index of the dialog. _(default: undefined)_\n- **--forge-dialog-move-handle-color** - The color of the move handle. _(default: undefined)_\n- **--forge-dialog-move-handle-size** - The size of the move handle. _(default: undefined)_\n- **--forge-dialog-move-handle-hover-cursor** - The cursor style when hovering over the move handle. _(default: undefined)_\n- **--forge-dialog-move-handle-active-cursor** - The cursor style when the move handle is active. _(default: undefined)_\n- **--forge-dialog-move-handle-spacing** - The spacing around the move handle. _(default: undefined)_\n- **--forge-dialog-move-transition-duration** - The duration of the move transition. _(default: undefined)_\n- **--forge-dialog-move-transition-easing** - The easing function of the move transition. _(default: undefined)_\n- **--forge-dialog-moving-opacity** - The opacity of the dialog when it is being moved. _(default: undefined)_\n- **--forge-dialog-enter-animation-duration** - The duration of the enter animation. _(default: undefined)_\n- **--forge-dialog-enter-animation-easing** - The easing function of the enter animation. _(default: undefined)_\n- **--forge-dialog-exit-animation-duration** - The duration of the exit animation. _(default: undefined)_\n- **--forge-dialog-exit-animation-easing** - The easing function of the exit animation. _(default: undefined)_\n- **--forge-dialog-zoom-opacity** - The opacity of the dialog during zoom animation. _(default: undefined)_\n- **--forge-dialog-zoom-scale** - The scale of the dialog during zoom animation. _(default: undefined)_\n- **--forge-dialog-fade-opacity** - The opacity of the dialog during fade animation. _(default: undefined)_\n- **--forge-dialog-slide-opacity** - The opacity of the dialog during slide animation. _(default: undefined)_\n- **--forge-dialog-slide-translate** - The translation distance of the dialog during slide animation. _(default: undefined)_\n- **--forge-dialog-backdrop-opacity** - The opacity of the dialog backdrop. _(default: undefined)_\n- **--forge-dialog-nonmodal-elevation** - The elevation of non-modal dialogs. _(default: undefined)_\n- **--forge-dialog-fullscreen-enter-animation-duration** - The duration of the enter animation for fullscreen dialogs. _(default: undefined)_\n- **--forge-dialog-fullscreen-exit-animation-duration** - The duration of the exit animation for fullscreen dialogs. _(default: undefined)_\n- **--forge-dialog-position-x** - The x-axis position of the dialog. _(default: undefined)_\n- **--forge-dialog-position-y** - The y-axis position of the dialog. _(default: undefined)_\n- **--forge-dialog-preset-sheet-enter-animation-duration** - The duration of the enter animation for preset sheet dialogs. _(default: undefined)_\n- **--forge-dialog-preset-sheet-exit-animation-duration** - The duration of the exit animation for preset sheet dialogs. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The dialog container element.\n- **backdrop** - The backdrop element.\n- **surface** - The dialog surface element.\n- **move-handle-container** - The alignment container for the move handle.\n- **move-handle** - The move handle element.\n- **move-handle-icon** - The move handle icon element.",
|
|
791
791
|
"attributes": [
|
|
792
792
|
{
|
|
793
793
|
"name": "open",
|
|
@@ -869,7 +869,7 @@
|
|
|
869
869
|
},
|
|
870
870
|
{
|
|
871
871
|
"name": "forge-divider",
|
|
872
|
-
"description": "
|
|
872
|
+
"description": "Dividers are used to separate elements with a thin line, either vertically or horizontally.\n---\n\n\n### **CSS Properties:**\n - **--forge-divider-color** - The color of the divider. _(default: undefined)_\n- **--forge-divider-width** - The width of the divider. _(default: undefined)_\n- **--forge-divider-border-style** - The border-style (dashed, solid) of the divider. _(default: undefined)_\n- **--forge-divider-margin** - The margin of divider. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.",
|
|
873
873
|
"attributes": [
|
|
874
874
|
{
|
|
875
875
|
"name": "vertical",
|
|
@@ -881,7 +881,7 @@
|
|
|
881
881
|
},
|
|
882
882
|
{
|
|
883
883
|
"name": "forge-expansion-panel",
|
|
884
|
-
"description": "Expansion panels provide progressive disclosure of content.\n---\n\n\n### **Events:**\n - **forge-expansion-panel-toggle** - Event fired when the panel is toggled open or closed.\n- **forge-expansion-panel-animation-complete** - Event fired when the panel has finished animating when toggling.\n\n### **Methods:**\n - **toggle(): _void_** - Toggles the open state of the panel.\n\n### **Slots:**\n - _default_ - The content of the panel.\n- **header** - The header of the panel.\n\n### **CSS Properties:**\n - **--forge-expansion-panel-animation-duration** - The duration of the open/close animation. _(default: undefined)_\n- **--forge-expansion-panel-animation-easing** - The easing function of the open/close animation. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root element of the panel.\n- **header** - The header of the panel.\n- **content** - The content of the panel.",
|
|
884
|
+
"description": "Expansion panels provide progressive disclosure of content.\n---\n\n\n### **Events:**\n - **forge-expansion-panel-toggle** - Event fired when the panel is toggled open or closed.\n- **forge-expansion-panel-animation-complete** - Event fired when the panel has finished animating when toggling.\n\n### **Methods:**\n - **toggle(): _void_** - Toggles the open state of the panel.\n\n### **Slots:**\n - _default_ - The content of the panel.\n- **header** - The header of the panel. This is deprecated, prefer using the trigger property instead, or manually associating a button with the panel.\n\n### **CSS Properties:**\n - **--forge-expansion-panel-animation-duration** - The duration of the open/close animation. _(default: undefined)_\n- **--forge-expansion-panel-animation-easing** - The easing function of the open/close animation. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root element of the panel.\n- **header** - The header of the panel.\n- **content** - The content of the panel.",
|
|
885
885
|
"attributes": [
|
|
886
886
|
{
|
|
887
887
|
"name": "open",
|
|
@@ -908,7 +908,7 @@
|
|
|
908
908
|
},
|
|
909
909
|
{
|
|
910
910
|
"name": "forge-field",
|
|
911
|
-
"description": "
|
|
911
|
+
"description": "\n---\n\n\n### **Events:**\n - **forge-field-popover-icon-click** - Dispatches when the user clicks the popover icon.\n- **forge-field-popover-icon-mousedown** - Dispatches when the user presses the mouse button over the popover icon. Cancelable to prevent focus loss.\n\n### **Methods:**\n - **floatLabelWithoutAnimation(value: _boolean_): _void_** - Sets the floating label without animating the transition.\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-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- **--forge-field-overflow** - The overflow behavior of the internal container element. _(default: undefined)_\n- **--forge-field-isolation** - The isolation behavior of the internal container element. _(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 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.",
|
|
912
912
|
"attributes": [
|
|
913
913
|
{
|
|
914
914
|
"name": "label-position",
|
|
@@ -1010,7 +1010,7 @@
|
|
|
1010
1010
|
},
|
|
1011
1011
|
{
|
|
1012
1012
|
"name": "forge-file-picker",
|
|
1013
|
-
"description": "The file
|
|
1013
|
+
"description": "The file picker component allows for a user to upload files of their own to the system. The component provides a slot for a\nbutton, as well as drag-and-drop functionality to launch the system file chooser dialog. There are visual cues to let the\nuser know when files they are dragging can be dropped, as well as events that are relayed to the developer to handle files\nthat are legal and/or illegal based on the parameters set on the component.\n\nThe expectation of this component is that it will be used as a familiar element on the page that will let users upload files,\nwhile providing that visual and functional consistency.\n---\n\n\n### **Events:**\n - **forge-file-picker-change** - Dispatched when a file is chosen.\n\n### **CSS Properties:**\n - **--forge-file-picker-background** - Controls the background color. _(default: undefined)_\n- **--forge-file-picker-width** - Controls the width. _(default: undefined)_\n- **--forge-file-picker-height** - Controls the height. _(default: undefined)_\n- **--forge-file-picker-max-width** - Controls the maximum width. _(default: undefined)_\n- **--forge-file-picker-border-width** - Controls the border width. _(default: undefined)_\n- **--forge-file-picker-border-style** - Controls the border style. _(default: undefined)_\n- **--forge-file-picker-border-color** - Controls the border color. _(default: undefined)_\n- **--forge-file-picker-gap** - Controls gap between each element. _(default: undefined)_\n- **--forge-file-picker-padding** - Controls the padding. _(default: undefined)_\n- **--forge-file-picker-padding-block** - Controls the top and bottom padding. _(default: undefined)_\n- **--forge-file-picker-padding-inline** - Controls the left and right padding. _(default: undefined)_\n- **--forge-file-picker-disabled-opacity** - Controls the opacity value of the file picker when it's disabled. _(default: undefined)_\n- **--forge-file-picker-highlight-background** - Controls the background color of the file picker when dragging files into the form. _(default: undefined)_\n- **--forge-file-picker-highlight-border-color** - Controls the border color of the file picker when dragging files into the form. _(default: undefined)_\n\n### **CSS Parts:**\n - **form** - The `<form>` element at the root.\n- **primary** - The container element around the primary slot.\n- **secondary** - The container element around the secondary slot.\n- **input** - The `<input type=\"file\">` element.\n- **helper-text-container** - The container around the helper-text slot.",
|
|
1014
1014
|
"attributes": [
|
|
1015
1015
|
{
|
|
1016
1016
|
"name": "accept",
|
|
@@ -1052,7 +1052,7 @@
|
|
|
1052
1052
|
},
|
|
1053
1053
|
{
|
|
1054
1054
|
"name": "forge-fab",
|
|
1055
|
-
"description": "Floating action buttons are used to represent the most important action on a page.\n---\n\n\n### **Events:**\n - **click** - Fires when the button is clicked.\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. Typically used for icon-only or label-only FABs. If the content forces the width to be large than the height, then the FAB will be in extended mode.\n- **start** - An element to logically render at the start of the button content.\n- **label** - Reserved specifically for label text. This forces the button into extended mode.\n- **end** - An element to logically render at the end of the button content.\n\n### **CSS Properties:**\n - **--forge-fab-background-display** - The display property. _(default: undefined)_\n- **--forge-fab-gap** - The gap between the icon and the label. _(default: undefined)_\n- **--forge-fab-background** - The background color. _(default: undefined)_\n- **--forge-fab-color** - The text color. _(default: undefined)_\n- **--forge-fab-size** - The height and min-width of the button. _(default: undefined)_\n- **--forge-fab-padding** - The inline padding of the button. _(default: undefined)_\n- **--forge-fab-shadow** - The box shadow of the button. _(default: undefined)_\n- **--forge-fab-hover-shadow** - The box shadow of the button when hovered. _(default: undefined)_\n- **--forge-fab-active-shadow** - The box shadow of the button when active. _(default: undefined)_\n- **--forge-fab-lowered-shadow** - The box shadow of the button when lowered. _(default: undefined)_\n- **--forge-fab-lowered-hover-shadow** - The box shadow of the button when lowered and hovered. _(default: undefined)_\n- **--forge-fab-lowered-active-shadow** - The box shadow of the button when lowered and active. _(default: undefined)_\n- **--forge-fab-transition-duration** - The transition duration. _(default: undefined)_\n- **--forge-fab-transition-timing** - The transition timing function. _(default: undefined)_\n- **--forge-fab-shape** - The border radius of the button. _(default: undefined)_\n- **--forge-fab-shape-start-start** - The start-start border radius. _(default: undefined)_\n- **--forge-fab-shape-start-end** - The start-end border radius. _(default: undefined)_\n- **--forge-fab-shape-end-start** - The end-start border radius. _(default: undefined)_\n- **--forge-fab-shape-end-end** - The end-end border radius. _(default: undefined)_\n- **--forge-fab-extended-padding** - The inline padding of the extended button. _(default: undefined)_\n- **--forge-fab-extended-min-width** - The min-width of the extended button. _(default: undefined)_\n- **--forge-fab-density-small-size** - The height and min-width of the small density button. _(default: undefined)_\n- **--forge-fab-density-medium-size** - The height and min-width of the medium density (default) button. _(default: undefined)_\n- **--forge-fab-density-large-size** - The height and min-width of the large density button. _(default: undefined)_\n- **--forge-fab-disabled-cursor** - The cursor when disabled. _(default: undefined)_\n- **--forge-fab-disabled-background** - The background color when disabled. _(default: undefined)_\n- **--forge-fab-disabled-color** - The text color when disabled. _(default: undefined)_\n- **--forge-fab-disabled-opacity** - The opacity when disabled. _(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.",
|
|
1055
|
+
"description": "Floating action buttons are used to represent the most important action on a page. They are typically used in mobile applications, and are positioned above other content in a way that draws attention to them.\n---\n\n\n### **Events:**\n - **click** - Fires when the button is clicked.\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. Typically used for icon-only or label-only FABs. If the content forces the width to be large than the height, then the FAB will be in extended mode.\n- **start** - An element to logically render at the start of the button content.\n- **label** - Reserved specifically for label text. This forces the button into extended mode.\n- **end** - An element to logically render at the end of the button content.\n\n### **CSS Properties:**\n - **--forge-fab-background-display** - The display property. _(default: undefined)_\n- **--forge-fab-gap** - The gap between the icon and the label. _(default: undefined)_\n- **--forge-fab-background** - The background color. _(default: undefined)_\n- **--forge-fab-color** - The text color. _(default: undefined)_\n- **--forge-fab-size** - The height and min-width of the button. _(default: undefined)_\n- **--forge-fab-padding** - The inline padding of the button. _(default: undefined)_\n- **--forge-fab-shadow** - The box shadow of the button. _(default: undefined)_\n- **--forge-fab-hover-shadow** - The box shadow of the button when hovered. _(default: undefined)_\n- **--forge-fab-active-shadow** - The box shadow of the button when active. _(default: undefined)_\n- **--forge-fab-lowered-shadow** - The box shadow of the button when lowered. _(default: undefined)_\n- **--forge-fab-lowered-hover-shadow** - The box shadow of the button when lowered and hovered. _(default: undefined)_\n- **--forge-fab-lowered-active-shadow** - The box shadow of the button when lowered and active. _(default: undefined)_\n- **--forge-fab-transition-duration** - The transition duration. _(default: undefined)_\n- **--forge-fab-transition-timing** - The transition timing function. _(default: undefined)_\n- **--forge-fab-shape** - The border radius of the button. _(default: undefined)_\n- **--forge-fab-shape-start-start** - The start-start border radius. _(default: undefined)_\n- **--forge-fab-shape-start-end** - The start-end border radius. _(default: undefined)_\n- **--forge-fab-shape-end-start** - The end-start border radius. _(default: undefined)_\n- **--forge-fab-shape-end-end** - The end-end border radius. _(default: undefined)_\n- **--forge-fab-extended-padding** - The inline padding of the extended button. _(default: undefined)_\n- **--forge-fab-extended-min-width** - The min-width of the extended button. _(default: undefined)_\n- **--forge-fab-density-small-size** - The height and min-width of the small density button. _(default: undefined)_\n- **--forge-fab-density-medium-size** - The height and min-width of the medium density (default) button. _(default: undefined)_\n- **--forge-fab-density-large-size** - The height and min-width of the large density button. _(default: undefined)_\n- **--forge-fab-disabled-cursor** - The cursor when disabled. _(default: undefined)_\n- **--forge-fab-disabled-background** - The background color when disabled. _(default: undefined)_\n- **--forge-fab-disabled-color** - The text color when disabled. _(default: undefined)_\n- **--forge-fab-disabled-opacity** - The opacity when disabled. _(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.",
|
|
1056
1056
|
"attributes": [
|
|
1057
1057
|
{
|
|
1058
1058
|
"name": "theme",
|
|
@@ -1104,7 +1104,7 @@
|
|
|
1104
1104
|
},
|
|
1105
1105
|
{
|
|
1106
1106
|
"name": "forge-focus-indicator",
|
|
1107
|
-
"description": "
|
|
1107
|
+
"description": "Focus indicators show a \"focus ring\" around an attached element that matches `:focus-visible`. These are building block components used by other components to show focus state, and are not typically used directly.\n---\n\n\n### **CSS Properties:**\n - **--forge-focus-indicator-display** - The `display` style. Defaults to `flex`. _(default: undefined)_\n- **--forge-focus-indicator-width** - The width of the focus indicator when resting. _(default: undefined)_\n- **--forge-focus-indicator-active-width** - The width of the focus indicator when active. When animating this is the max extent. _(default: undefined)_\n- **--forge-focus-indicator-color** - The color of the focus indicator. _(default: undefined)_\n- **--forge-focus-indicator-shape** - The shape of the focus indicator. _(default: undefined)_\n- **--forge-focus-indicator-duration** - The animation duration. _(default: undefined)_\n- **--forge-focus-indicator-easing** - The animation easing function. _(default: undefined)_\n- **--forge-focus-indicator-shape-start-start** - The start start shape. _(default: undefined)_\n- **--forge-focus-indicator-shape-start-end** - The start end shape. _(default: undefined)_\n- **--forge-focus-indicator-shape-end-start** - The end start shape. _(default: undefined)_\n- **--forge-focus-indicator-shape-end-end** - The end end shape. _(default: undefined)_\n- **--forge-focus-indicator-outward-offset** - The offset of the focus indicator when outward. _(default: undefined)_\n- **--forge-focus-indicator-inward-offset** - The offset of the focus indicator when inward. _(default: undefined)_\n- **--forge-focus-indicator-offset-block** - The block offset. _(default: undefined)_\n- **--forge-focus-indicator-offset-inline** - The inline offset. _(default: undefined)_\n\n### **CSS Parts:**\n - **indicator** - The focus indicator element.",
|
|
1108
1108
|
"attributes": [
|
|
1109
1109
|
{
|
|
1110
1110
|
"name": "target",
|
|
@@ -1141,7 +1141,7 @@
|
|
|
1141
1141
|
},
|
|
1142
1142
|
{
|
|
1143
1143
|
"name": "forge-icon",
|
|
1144
|
-
"description": "Icons are used to represent information visually
|
|
1144
|
+
"description": "Icons are used to represent information visually. The icon component is a wrapper around SVG icons that are registered in the icon registry.\n---\n\n\n### **Methods:**\n - **layout(): _void_** - Forces a reload of the icon.\n\n### **CSS Properties:**\n - **--forge-icon-color** - The color of the icon. _(default: undefined)_\n- **--forge-icon-size** - The size of the icon. Defaults to the font-size of the context it is placed in. _(default: undefined)_\n- **--forge-icon-width** - The width of the icon. _(default: undefined)_\n- **--forge-icon-height** - The height of the icon. _(default: undefined)_\n- **--forge-icon-font-size** - The font size of the icon. _(default: undefined)_\n\n### **CSS Parts:**\n - **svg** - The internal SVG element.",
|
|
1145
1145
|
"attributes": [
|
|
1146
1146
|
{
|
|
1147
1147
|
"name": "external-type",
|
|
@@ -1188,7 +1188,7 @@
|
|
|
1188
1188
|
},
|
|
1189
1189
|
{
|
|
1190
1190
|
"name": "forge-icon-button",
|
|
1191
|
-
"description": "
|
|
1191
|
+
"description": "Icon buttons are buttons that contain **only** an icon, and are used to represent actions or commands. Always provide an accessible label when using icon buttons.\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",
|
|
@@ -1225,7 +1225,7 @@
|
|
|
1225
1225
|
},
|
|
1226
1226
|
{
|
|
1227
1227
|
"name": "forge-inline-message",
|
|
1228
|
-
"description": "Inline messages are used to provide feedback to the user about a specific action or state.\n---\n\n\n### **Slots:**\n - _default_ - The message text.\n- **title** - The title of the inline message.\n- **icon** - The icon to display.\n\n### **CSS Properties:**\n - **--forge-inline-message-background** - The background color. _(default: undefined)_\n- **--forge-inline-message-color** - The text color. _(default: undefined)_\n- **--forge-inline-message-shape** - The shape (border) radius. _(default: undefined)_\n- **--forge-inline-message-padding** - The padding around the content. _(default: undefined)_\n- **--forge-inline-message-padding-inline** - The inline padding around the content. _(default: undefined)_\n- **--forge-inline-message-padding-block** - The block padding around the content. _(default: undefined)_\n- **--forge-inline-message-border-width** - The border width. _(default: undefined)_\n- **--forge-inline-message-border-style** - The border style. Defaults to `none`. _(default: undefined)_\n- **--forge-inline-message-border-color** - The border color. _(default: undefined)_\n- **--forge-inline-message-gap** - The gap/space between the content elements. _(default: undefined)_\n- **--forge-inline-message-icon-gap** - The gap/space between the icon and the content. _(default: undefined)_\n- **--forge-inline-message-content-gap** - The gap/space between the title and the message. _(default: undefined)_\n- **--forge-inline-message-icon-color** - The icon color. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root layout element.\n- **container** - The container element for the title and message content.",
|
|
1228
|
+
"description": "Inline messages are used to provide feedback to the user about a specific action or state. Use inline messages to communicate information such as errors, warnings, or success messages in a way that is contextual to the content on the page.\n---\n\n\n### **Slots:**\n - _default_ - The message text.\n- **title** - The title of the inline message.\n- **icon** - The icon to display.\n\n### **CSS Properties:**\n - **--forge-inline-message-background** - The background color. _(default: undefined)_\n- **--forge-inline-message-color** - The text color. _(default: undefined)_\n- **--forge-inline-message-shape** - The shape (border) radius. _(default: undefined)_\n- **--forge-inline-message-padding** - The padding around the content. _(default: undefined)_\n- **--forge-inline-message-padding-inline** - The inline padding around the content. _(default: undefined)_\n- **--forge-inline-message-padding-block** - The block padding around the content. _(default: undefined)_\n- **--forge-inline-message-border-width** - The border width. _(default: undefined)_\n- **--forge-inline-message-border-style** - The border style. Defaults to `none`. _(default: undefined)_\n- **--forge-inline-message-border-color** - The border color. _(default: undefined)_\n- **--forge-inline-message-gap** - The gap/space between the content elements. _(default: undefined)_\n- **--forge-inline-message-icon-gap** - The gap/space between the icon and the content. _(default: undefined)_\n- **--forge-inline-message-content-gap** - The gap/space between the title and the message. _(default: undefined)_\n- **--forge-inline-message-icon-color** - The icon color. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root layout element.\n- **container** - The container element for the title and message content.",
|
|
1229
1229
|
"attributes": [
|
|
1230
1230
|
{
|
|
1231
1231
|
"name": "theme",
|
|
@@ -1289,7 +1289,7 @@
|
|
|
1289
1289
|
},
|
|
1290
1290
|
{
|
|
1291
1291
|
"name": "forge-label",
|
|
1292
|
-
"description": "The
|
|
1292
|
+
"description": "The Label component is used to associate a text label with a compatible Forge component.\n---\n\n\n### **Methods:**\n - **update(): _void_** - Updates the targeted element with the label's current text content.",
|
|
1293
1293
|
"attributes": [
|
|
1294
1294
|
{
|
|
1295
1295
|
"name": "for",
|
|
@@ -1316,7 +1316,7 @@
|
|
|
1316
1316
|
},
|
|
1317
1317
|
{
|
|
1318
1318
|
"name": "forge-label-value",
|
|
1319
|
-
"description": "Label
|
|
1319
|
+
"description": "Label values are used to display a label and value pair in a compact format with the proper typography and spacing styles applied.\n---\n\n\n### **Slots:**\n - **label** - The label to display.\n- **value** - The value to display.\n- **icon** - An icon to display next to the label.\n\n### **CSS Properties:**\n - **--forge-label-value-align** - Aligns the label and value. Possible values: `start` (default), `center`, `end`. _(default: undefined)_\n- **--forge-label-value-label-spacing** - The spacing between the label and value. _(default: undefined)_\n- **--forge-label-value-label-block-start-spacing** - The block start spacing for the label. _(default: undefined)_\n- **--forge-label-value-label-block-end-spacing** - The block end spacing for the label. _(default: undefined)_\n- **--forge-label-value-label-color** - The color to apply to the label. _(default: undefined)_\n- **--forge-label-value-icon-spacing** - The spacing between the icon and the label. _(default: undefined)_\n- **--forge-label-value-inline-label-spacing** - The spacing between the label and value when displayed inline. _(default: undefined)_\n- **--forge-label-value-empty-color** - The color to apply to the value when empty. _(default: undefined)_\n- **--forge-label-value-empty-style** - The font-style to apply to the value when empty. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root layout container element.\n- **label** - The label container element.\n- **value** - The value container element.\n- **icon** - The icon container element.",
|
|
1320
1320
|
"attributes": [
|
|
1321
1321
|
{
|
|
1322
1322
|
"name": "empty",
|
|
@@ -1338,7 +1338,7 @@
|
|
|
1338
1338
|
},
|
|
1339
1339
|
{
|
|
1340
1340
|
"name": "forge-linear-progress",
|
|
1341
|
-
"description": "Linear progress indicators display progress by animating along a linear track in a horizontal direction.\n---\n\n\n### **CSS Properties:**\n - **--forge-linear-progress-height** - The height of the element. _(default: undefined)_\n- **--forge-linear-progress-track-color** - The background color of the indicator. _(default: undefined)_\n- **--forge-linear-progress-track-shape** - The shape of the indicator. _(default: undefined)_\n- **--forge-linear-progress-indicator-color** - The color of the indicator. _(default: undefined)_\n- **--forge-linear-progress-indicator-height** - The height of the indicator only. _(default: undefined)_\n- **--forge-linear-progress-determinate-duration** - The duration of the determinate animation. _(default: undefined)_\n- **--forge-linear-progress-indeterminate-duration** - The duration of the indeterminate animation. _(default: undefined)_\n- **--forge-linear-progress-determinate-easing** - The easing function to use for the determinate animation. _(default: undefined)_\n- **--forge-linear-progress-theme-transition-duration** - The duration of the theme transition. _(default: undefined)_\n- **--forge-linear-progress-theme-transition-timing** - The easing function to use for the theme transition. _(default: undefined)_\n\n### **CSS Parts:**\n - **progressbar** - Styles the progress bar container element",
|
|
1341
|
+
"description": "Linear progress indicators display progress by animating along a linear track in a horizontal direction. They can be used to show determinate or indeterminate progress.\n---\n\n\n### **CSS Properties:**\n - **--forge-linear-progress-height** - The height of the element. _(default: undefined)_\n- **--forge-linear-progress-track-color** - The background color of the indicator. _(default: undefined)_\n- **--forge-linear-progress-track-shape** - The shape of the indicator. _(default: undefined)_\n- **--forge-linear-progress-indicator-color** - The color of the indicator. _(default: undefined)_\n- **--forge-linear-progress-indicator-height** - The height of the indicator only. _(default: undefined)_\n- **--forge-linear-progress-determinate-duration** - The duration of the determinate animation. _(default: undefined)_\n- **--forge-linear-progress-indeterminate-duration** - The duration of the indeterminate animation. _(default: undefined)_\n- **--forge-linear-progress-determinate-easing** - The easing function to use for the determinate animation. _(default: undefined)_\n- **--forge-linear-progress-theme-transition-duration** - The duration of the theme transition. _(default: undefined)_\n- **--forge-linear-progress-theme-transition-timing** - The easing function to use for the theme transition. _(default: undefined)_\n\n### **CSS Parts:**\n - **progressbar** - Styles the progress bar container element",
|
|
1342
1342
|
"attributes": [
|
|
1343
1343
|
{
|
|
1344
1344
|
"name": "determinate",
|
|
@@ -1361,7 +1361,7 @@
|
|
|
1361
1361
|
},
|
|
1362
1362
|
{
|
|
1363
1363
|
"name": "forge-menu",
|
|
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.",
|
|
1364
|
+
"description": "Menus display a list of options or actions that users can select from a dropdown. Menus wrap button or list item elements to provide the trigger for displaying the menu options.\n---\n\n\n### **Events:**\n - **forge-menu-select** - Dispatches when a menu option is selected.\n- **forge-menu-open** - Dispatches when the menu is opened.\n- **forge-menu-close** - Dispatches when the menu is closed.\n- **forge-menu-active-change** - Dispatches when the active menu option changes.\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",
|
|
@@ -1403,6 +1403,11 @@
|
|
|
1403
1403
|
"description": "Gets/sets the mode that this menu is using.",
|
|
1404
1404
|
"values": [{ "name": "MenuMode" }]
|
|
1405
1405
|
},
|
|
1406
|
+
{
|
|
1407
|
+
"name": "popup-target",
|
|
1408
|
+
"description": "Gets/sets the ID of the element to use as the popup anchor for positioning.\nWhen null or empty, the target element (button) is used for both interaction and positioning.\nThis is useful for cases like forge-list-item > button where the menu should be\nattached to the button for listeners but positioned relative to the list item.",
|
|
1409
|
+
"values": []
|
|
1410
|
+
},
|
|
1406
1411
|
{
|
|
1407
1412
|
"name": "popup-classes",
|
|
1408
1413
|
"description": "Gets/sets the list of classes to apply to the popup element.",
|
|
@@ -1468,7 +1473,7 @@
|
|
|
1468
1473
|
},
|
|
1469
1474
|
{
|
|
1470
1475
|
"name": "forge-open-icon",
|
|
1471
|
-
"description": "Open icons are used to indicate whether a section is open or closed.\n---\n\n\n### **Slots:**\n - _default_ - The icon to display when open.\n\n### **CSS Properties:**\n - **--forge-open-icon-color** - The color of the icon. _(default: undefined)_\n- **--forge-open-icon-size** - The size of the icon. _(default: undefined)_\n- **--forge-open-icon-height** - The height of the icon. Defaults to `size`. _(default: undefined)_\n- **--forge-open-icon-width** - The width of the icon. Defaults to `size`. _(default: undefined)_\n- **--forge-open-icon-initial-rotation** - The initial rotation of the icon. _(default: undefined)_\n- **--forge-open-icon-open-rotation** - The rotation of the icon when open. _(default: undefined)_\n- **--forge-open-icon-animation-duration** - The duration of the open animation. _(default: undefined)_\n- **--forge-open-icon-half-animation-duration** - The duration of the open animation when in a half orientation. _(default: undefined)_\n- **--forge-open-icon-animation-timing** - The timing function of the open animation. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root element of the icon.\n- **icon** - The icon element.",
|
|
1476
|
+
"description": "Open icons are icons used to indicate whether a section is open or closed. They provide an animated transition between the two states to enhance the user experience.\n---\n\n\n### **Slots:**\n - _default_ - The icon to display when open.\n\n### **CSS Properties:**\n - **--forge-open-icon-color** - The color of the icon. _(default: undefined)_\n- **--forge-open-icon-size** - The size of the icon. _(default: undefined)_\n- **--forge-open-icon-height** - The height of the icon. Defaults to `size`. _(default: undefined)_\n- **--forge-open-icon-width** - The width of the icon. Defaults to `size`. _(default: undefined)_\n- **--forge-open-icon-initial-rotation** - The initial rotation of the icon. _(default: undefined)_\n- **--forge-open-icon-open-rotation** - The rotation of the icon when open. _(default: undefined)_\n- **--forge-open-icon-animation-duration** - The duration of the open animation. _(default: undefined)_\n- **--forge-open-icon-half-animation-duration** - The duration of the open animation when in a half orientation. _(default: undefined)_\n- **--forge-open-icon-animation-timing** - The timing function of the open animation. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root element of the icon.\n- **icon** - The icon element.",
|
|
1472
1477
|
"attributes": [
|
|
1473
1478
|
{
|
|
1474
1479
|
"name": "open",
|
|
@@ -1490,7 +1495,7 @@
|
|
|
1490
1495
|
},
|
|
1491
1496
|
{
|
|
1492
1497
|
"name": "forge-overlay",
|
|
1493
|
-
"description": "Overlays are used to
|
|
1498
|
+
"description": "Overlays are used to show content in an element that is rendered above all other content on the page, and positioned around a specified anchor element. This is a low-level building block component that does not provide any visual styles, but is used within other components such as popovers, and tooltips.\n---\n\n\n### **Events:**\n - **forge-overlay-light-dismiss** - Dispatches when the overlay is light dismissed via the escape key or clicking outside the overlay.\n\n### **Slots:**\n - _default_ - The content to render inside the positioned overlay container.\n\n### **CSS Properties:**\n - **--forge-overlay-position** - The `position` of the overlay. _(default: undefined)_\n- **--forge-overlay-z-index** - The `z-index` of the overlay. Defaults to the `popup` range. _(default: undefined)_\n- **--forge-overlay-height** - The `height` of the overlay. Defaults to `min-content`. _(default: undefined)_\n- **--forge-overlay-width** - The `width` of the overlay. Defaults to `min-content`. _(default: undefined)_\n- **--forge-overlay-position-block-start** - The `block-start` position of the overlay. _(default: undefined)_\n- **--forge-overlay-position-block-end** - The `block-end` position of the overlay. _(default: undefined)_\n- **--forge-overlay-position-inline-start** - The `inline-start` position of the overlay. _(default: undefined)_\n- **--forge-overlay-position-inline-end** - The `inline-end` position of the overlay. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The component's root element.",
|
|
1494
1499
|
"attributes": [
|
|
1495
1500
|
{
|
|
1496
1501
|
"name": "anchor",
|
|
@@ -1562,13 +1567,13 @@
|
|
|
1562
1567
|
},
|
|
1563
1568
|
{
|
|
1564
1569
|
"name": "forge-page-state",
|
|
1565
|
-
"description": "Page states display full-
|
|
1570
|
+
"description": "Page states display full-height messages for empty states, errors, or other general information. They can be used as full page content, or within smaller containers and will adapt accordingly.\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
1571
|
"attributes": [],
|
|
1567
1572
|
"references": []
|
|
1568
1573
|
},
|
|
1569
1574
|
{
|
|
1570
1575
|
"name": "forge-paginator",
|
|
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.",
|
|
1576
|
+
"description": "Paginators provide navigation controls for dividing content across multiple pages. Typically used alongside data tables or lists.\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- **goToFirstPage(): _void_** - Navigates to the first page.\n- **goToPreviousPage(): _void_** - Navigates to the previous page.\n- **goToNextPage(): _void_** - Navigates to the next page.\n- **goToLastPage(): _void_** - Navigates to the last page.\n- **canGoToFirstPage(): __** - Checks if navigation to the first page is possible.\n- **canGoToPreviousPage(): __** - Checks if navigation to the previous page is possible.\n- **canGoToNextPage(): __** - Checks if navigation to the next page is possible.\n- **canGoToLastPage(): __** - Checks if navigation to the last page is possible.\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
1577
|
"attributes": [
|
|
1573
1578
|
{
|
|
1574
1579
|
"name": "page-index",
|
|
@@ -1625,7 +1630,7 @@
|
|
|
1625
1630
|
},
|
|
1626
1631
|
{
|
|
1627
1632
|
"name": "forge-popover",
|
|
1628
|
-
"description": "Popovers are used to
|
|
1633
|
+
"description": "Popovers are used to show content in an element that is rendered above all other content on the page. Use popovers to display additional information or actions related to a specific element. Popovers are typically triggered by user interaction, such as clicking a button or hovering over an element.\n---\n\n\n### **Events:**\n - **forge-popover-beforetoggle** - Dispatches before the popover is toggled, and is cancelable.\n- **forge-popover-toggle** - Dispatches after the popover is toggled.\n\n### **Methods:**\n - **hideAsync(): _Promise<void>_** - Hides the popover, and returns a `Promise` that resolves when the hide animation is complete.\n- **position(): _void_** - Forces the overlay to reposition itself.\n\n### **Slots:**\n - _default_ - The content to render inside the popover.\n\n### **CSS Properties:**\n - **--forge-popover-background** - The background color of the popover surface. _(default: undefined)_\n- **--forge-popover-border-radius** - The border radius of the popover surface. _(default: undefined)_\n- **--forge-popover-box-shadow** - The box shadow of the popover surface. _(default: undefined)_\n- **--forge-popover-border-width** - The border width of the popover surface. _(default: undefined)_\n- **--forge-popover-border-style** - The border style of the popover surface. _(default: undefined)_\n- **--forge-popover-border-color** - The border color of the popover surface. _(default: undefined)_\n- **--forge-popover-width** - The width of the popover surface. Defaults to `auto`. _(default: undefined)_\n- **--forge-popover-height** - The height of the popover surface. Defaults to `auto`. _(default: undefined)_\n- **--forge-popover-min-width** - The minimum width of the popover surface. Defaults to `none`. _(default: undefined)_\n- **--forge-popover-max-width** - The maximum width of the popover surface. Defaults to `none`. _(default: undefined)_\n- **--forge-popover-min-height** - The minimum height of the popover surface. Defaults to `none`. _(default: undefined)_\n- **--forge-popover-max-height** - The maximum height of the popover surface. Defaults to `none`. _(default: undefined)_\n- **--forge-popover-arrow-size** - The size of the arrow. _(default: undefined)_\n- **--forge-popover-arrow-height** - The height of the arrow. _(default: undefined)_\n- **--forge-popover-arrow-width** - The width of the arrow. _(default: undefined)_\n- **--forge-popover-arrow-background-color** - The background color of the arrow. Defaults to the background color of the popover surface. _(default: undefined)_\n- **--forge-popover-arrow-top-rotation** - The rotation of the arrow when the popover is placed on the top. _(default: undefined)_\n- **--forge-popover-arrow-right-rotation** - The rotation of the arrow when the popover is placed on the right. _(default: undefined)_\n- **--forge-popover-arrow-bottom-rotation** - The rotation of the arrow when the popover is placed on the bottom. _(default: undefined)_\n- **--forge-popover-arrow-left-rotation** - The rotation of the arrow when the popover is placed on the left. _(default: undefined)_\n- **--forge-popover-arrow-border-width** - The border width of the popover surface and arrow when an arrow is applied. _(default: undefined)_\n- **--forge-popover-arrow-clip-path** - The clip path to use for the arrow element. _(default: undefined)_\n- **--forge-popover-animation-timing** - The animation timing function to use for the popover animation. _(default: undefined)_\n- **--forge-popover-zoom-duration** - The duration of the zoom animation. _(default: undefined)_\n- **--forge-popover-zoom-timing** - The timing function to use for the zoom animation. _(default: undefined)_\n- **--forge-popover-slide-duration** - The duration of the slide animation. _(default: undefined)_\n- **--forge-popover-slide-timing** - The timing function to use for the slide animation. _(default: undefined)_\n- **--forge-popover-slide-offset** - The start offset to use for the slide animation. _(default: undefined)_\n- **--forge-popover-fade-duration** - The duration of the fade animation. _(default: undefined)_\n- **--forge-popover-fade-timing** - The timing function to use for the fade animation. _(default: undefined)_\n- **--forge-popover-position-block-start** - The `block-start` position of the popover. _(default: undefined)_\n- **--forge-popover-position-block-end** - The `block-end` position of the popover. _(default: undefined)_\n- **--forge-popover-position-inline-start** - The `inline-start` position of the popover. _(default: undefined)_\n- **--forge-popover-position-inline-end** - The `inline-end` position of the popover. _(default: undefined)_\n- **--forge-popover-preset-dropdown-max-height** - The maximum height of the popover when using `preset=\"dropdown\"`. Defaults to `256px`. _(default: undefined)_\n- **--forge-popover-preset-dropdown-overflow** - The overflow behavior of the popover when using `preset=\"dropdown\"`. Defaults to `auto visible` (vertical scrolling only). _(default: undefined)_\n\n### **CSS Parts:**\n - **overlay** - The overlay root element.\n- **surface** - The surface container element for the slotted content.",
|
|
1629
1634
|
"attributes": [
|
|
1630
1635
|
{
|
|
1631
1636
|
"name": "arrow",
|
|
@@ -1672,6 +1677,11 @@
|
|
|
1672
1677
|
"description": "Enforces that this popover should be the only one open with the same unique value.",
|
|
1673
1678
|
"values": []
|
|
1674
1679
|
},
|
|
1680
|
+
{
|
|
1681
|
+
"name": "anchor-accessibility",
|
|
1682
|
+
"description": "Controls whether the popover manages accessibility attributes on the anchor element.",
|
|
1683
|
+
"values": []
|
|
1684
|
+
},
|
|
1675
1685
|
{
|
|
1676
1686
|
"name": "anchor",
|
|
1677
1687
|
"description": "The IDREF of the anchor element to position the overlay relative to.",
|
|
@@ -1737,13 +1747,13 @@
|
|
|
1737
1747
|
},
|
|
1738
1748
|
{
|
|
1739
1749
|
"name": "forge-profile-card",
|
|
1740
|
-
"description": "Profile cards display user information and actions in a structured card format.\n---\n",
|
|
1750
|
+
"description": "Profile cards display user information and actions in a structured card format. This component is deprecated prefer using the `<forge-user-profile>` component from the extended library instead.\n---\n",
|
|
1741
1751
|
"attributes": [],
|
|
1742
1752
|
"references": []
|
|
1743
1753
|
},
|
|
1744
1754
|
{
|
|
1745
1755
|
"name": "forge-scaffold",
|
|
1746
|
-
"description": "
|
|
1756
|
+
"description": "The scaffold provides a generic layout structure for your content using common named areas. Use scaffolds for full page layouts or smaller sections within other elements where you want positioned content areas and scrollable body content.\n---\n\n\n### **Slots:**\n - **header** - Places content in the header.\n- **body** - Places content in the body.\n- **footer** - Places content in the footer.\n- **left** - Places content to the left of all content.\n- **right** - Places content to the right of all content.\n- **body-header** - Places content in the header of the body.\n- **body-footer** - Places content in the footer of the body.\n- **body-left** - Places content to the left of the body content.\n- **body-right** - Places content to the right of the body content.\n\n### **CSS Properties:**\n - **--forge-scaffold-height** - The `height` of the scaffold. _(default: undefined)_\n- **--forge-scaffold-width** - The `width` of the scaffold. _(default: undefined)_\n- **--forge-scaffold-overflow** - The `overflow` of the scaffold. _(default: undefined)_\n- **--forge-scaffold-body-position** - The `position` of the scaffold body. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.\n- **header** - The header of the scaffold.\n- **body** - The body of the scaffold.",
|
|
1747
1757
|
"attributes": [
|
|
1748
1758
|
{
|
|
1749
1759
|
"name": "viewport",
|
|
@@ -1755,7 +1765,7 @@
|
|
|
1755
1765
|
},
|
|
1756
1766
|
{
|
|
1757
1767
|
"name": "forge-skeleton",
|
|
1758
|
-
"description": "
|
|
1768
|
+
"description": "Skeletons are used to provide a placeholder for content that is loading. They have various styles to represent different types of content.\n---\n\n\n### **CSS Properties:**\n - **--forge-skeleton-animation-duration** - The duration of the skeleton animation. _(default: undefined)_\n- **--forge-skeleton-width** - The width of the skeleton. _(default: undefined)_\n- **--forge-skeleton-height** - The height of the skeleton. _(default: undefined)_\n- **--forge-skeleton-background** - The background color of the skeleton. _(default: undefined)_\n- **--forge-skeleton-shape** - The shape of the skeleton. _(default: undefined)_\n- **--forge-skeleton-margin** - The margin of the skeleton. _(default: undefined)_\n- **--forge-skeleton-button-height** - The height of the button skeleton. _(default: undefined)_\n- **--forge-skeleton-button-width** - The width of the button skeleton. _(default: undefined)_\n- **--forge-skeleton-form-field-height** - The height of the form field skeleton. _(default: undefined)_\n- **--forge-skeleton-form-field-width** - The width of the form field skeleton. _(default: undefined)_\n- **--forge-skeleton-chip-height** - The height of the chip skeleton. _(default: undefined)_\n- **--forge-skeleton-chip-width** - The width of the chip skeleton. _(default: undefined)_\n- **--forge-skeleton-chip-shape** - The shape of the chip skeleton. _(default: undefined)_\n- **--forge-skeleton-list-item-height** - The height of the list item skeleton. _(default: undefined)_\n- **--forge-skeleton-list-item-margin** - The margin of the list item skeleton. _(default: undefined)_\n- **--forge-skeleton-text-height** - The height of the text skeleton. _(default: undefined)_\n- **--forge-skeleton-gradient-color** - The color of the gradient skeleton. _(default: undefined)_\n- **--forge-skeleton-avatar-size** - The size of the avatar skeleton. _(default: undefined)_\n- **--forge-skeleton-avatar-shape** - The shape of the avatar skeleton. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root element of the skeleton.",
|
|
1759
1769
|
"attributes": [
|
|
1760
1770
|
{
|
|
1761
1771
|
"name": "form-field",
|
|
@@ -1797,7 +1807,7 @@
|
|
|
1797
1807
|
},
|
|
1798
1808
|
{
|
|
1799
1809
|
"name": "forge-skip-link",
|
|
1800
|
-
"description": "The Forge Skip Link component is used to provide
|
|
1810
|
+
"description": "The Forge Skip Link component is used to provide an accessible way for users to skip repetitive content and navigate directly to a section of the page. This is used for screen reader and keyboard users to improve the overall accessibility of web applications.\n---\n\n\n### **Slots:**\n - _default_ - The default/unnamed slot for link text.\n\n### **CSS Properties:**\n - **--forge-skip-link-background** - The background color of the skip link. _(default: undefined)_\n- **--forge-skip-link-color** - The text color of the skip link. _(default: undefined)_\n- **--forge-skip-link-shape** - The border radius of the skip link. _(default: undefined)_\n- **--forge-skip-link-inset** - The skip link's inset from the edge of the viewport. _(default: undefined)_\n- **--forge-skip-link-z-index** - The z-index of the skip link. _(default: undefined)_\n- **--forge-skip-link-elevation** - The box shadow of the skip link. _(default: undefined)_\n- **--forge-skip-link-padding-block** - The interior padding of the skip link along the block axis. _(default: undefined)_\n- **--forge-skip-link-padding-inline** - The interior padding of the skip link along the inline axis. _(default: undefined)_\n- **--forge-skip-link-focus-indicator-color** - The color of the focus indicator. _(default: undefined)_\n- **--forge-skip-link-transition-duration** - The duration of the skip link's animations. _(default: undefined)_\n- **--forge-skip-link-transition-timing-function** - The timing function of the skip link's animations. _(default: undefined)_\n\n### **CSS Parts:**\n - **anchor** - The root anchor element.\n- **focus-indicator** - The focus indicator element.\n- **state-layer** - The state layer element.",
|
|
1801
1811
|
"attributes": [
|
|
1802
1812
|
{
|
|
1803
1813
|
"name": "target",
|
|
@@ -1834,7 +1844,7 @@
|
|
|
1834
1844
|
},
|
|
1835
1845
|
{
|
|
1836
1846
|
"name": "forge-slider",
|
|
1837
|
-
"description": "Sliders allow users to make selections from a range of values.\n---\n\n\n### **Events:**\n - **forge-slider-input** - Dispatches when the slider value changes.\n- **forge-slider-change** - Dispatches when the slider value changes and the value has been committed.\n- **forge-slider-range-input** - Dispatches when the slider range values change.\n- **forge-slider-range-change** - Dispatches when the slider range values change and the values have been committed.\n\n### **CSS Properties:**\n - **--forge-theme-primary** - The primary color of the slider. _(default: undefined)_\n- **--forge-theme-on-primary** - The color of elements placed on top of the primary color (the label text for example). _(default: undefined)_\n- **--forge-slider-track-height** - The height of the track. _(default: undefined)_\n- **--forge-slider-active-track-color** - The color of the active track. _(default: undefined)_\n- **--forge-slider-active-track-height** - The height of the active track. _(default: undefined)_\n- **--forge-slider-active-track-shape** - The shape of the active track. _(default: undefined)_\n- **--forge-slider-disabled-active-track-color** - The color of the active track when disabled. _(default: undefined)_\n- **--forge-slider-disabled-active-track-opacity** - The opacity of the active track when disabled. _(default: undefined)_\n- **--forge-slider-disabled-handle-color** - The color of the slider handle when disabled. _(default: undefined)_\n- **--forge-slider-disabled-inactive-track-color** - The color of the inactive track when disabled. _(default: undefined)_\n- **--forge-slider-disabled-inactive-track-opacity** - The opacity of the inactive track when disabled. _(default: undefined)_\n- **--forge-slider-focus-handle-color** - The color of the slider handle when focused. _(default: undefined)_\n- **--forge-slider-handle-color** - The color of the slider handle. _(default: undefined)_\n- **--forge-slider-handle-height** - The height of the slider handle. _(default: undefined)_\n- **--forge-slider-handle-width** - The width of the slider handle. _(default: undefined)_\n- **--forge-slider-handle-shape** - The shape of the slider handle. _(default: undefined)_\n- **--forge-slider-hover-handle-color** - The color of the slider handle when hovered. _(default: undefined)_\n- **--forge-slider-inactive-track-color** - The color of the inactive track. _(default: undefined)_\n- **--forge-slider-inactive-track-height** - The height of the inactive track. _(default: undefined)_\n- **--forge-slider-inactive-track-shape** - The shape of the inactive track. _(default: undefined)_\n- **--forge-slider-label-container-shape** - The shape of the label container. _(default: undefined)_\n- **--forge-slider-label-container-color** - The color of the label container. _(default: undefined)_\n- **--forge-slider-label-container-height** - The height of the label container. _(default: undefined)_\n- **--forge-slider-label-text-color** - The color of the label text. _(default: undefined)_\n- **--forge-slider-pressed-handle-color** - The color of the slider handle when pressed. _(default: undefined)_\n- **--forge-slider-state-layer-size** - The size of the state layer. _(default: undefined)_\n- **--forge-slider-with-overlap-handle-outline-color** - The color of the slider handle outline when overlapping. _(default: undefined)_\n- **--forge-slider-with-overlap-handle-outline-width** - The width of the slider handle outline when overlapping. _(default: undefined)_\n- **--forge-slider-with-tick-marks-active-container-color** - The color of the active tick mark container when tick marks are visible. _(default: undefined)_\n- **--forge-slider-with-tick-marks-container-size** - The size of the tick mark container when tick marks are visible. _(default: undefined)_\n- **--forge-slider-with-tick-marks-disabled-active-container-color** - The color of the active tick mark container when tick marks are visible and disabled. _(default: undefined)_\n- **--forge-slider-with-tick-marks-disabled-inactive-container-color** - The color of the inactive tick mark container when tick marks are visible and disabled. _(default: undefined)_\n- **--forge-slider-with-tick-marks-inactive-container-color** - The color of the inactive tick mark container when tick marks are visible. _(default: undefined)_\n\n### **CSS Parts:**\n - **slider** - Styles the slider container element.\n- **track** - Styles the track element.\n- **handle-end** - Styles the end handle element.\n- **handle-end-thumb** - Styles the end handle thumb element.\n- **handle-end-label** - Styles the end handle label element.\n- **handle-end-label-content** - Styles the end handle label content element.\n- **handle-start** - Styles the start handle element.\n- **handle-start-thumb** - Styles the start handle thumb element.\n- **handle-start-label** - Styles the start handle label element.\n- **handle-start-label-content** - Styles the start handle label content element.",
|
|
1847
|
+
"description": "Sliders allow users to make selections from a range of values. You can use sliders for selecting values from either a continuous or discrete range, and they can also be used for selecting a single value or a range of values.\n---\n\n\n### **Events:**\n - **forge-slider-input** - Dispatches when the slider value changes.\n- **forge-slider-change** - Dispatches when the slider value changes and the value has been committed.\n- **forge-slider-range-input** - Dispatches when the slider range values change.\n- **forge-slider-range-change** - Dispatches when the slider range values change and the values have been committed.\n\n### **CSS Properties:**\n - **--forge-theme-primary** - The primary color of the slider. _(default: undefined)_\n- **--forge-theme-on-primary** - The color of elements placed on top of the primary color (the label text for example). _(default: undefined)_\n- **--forge-slider-track-height** - The height of the track. _(default: undefined)_\n- **--forge-slider-active-track-color** - The color of the active track. _(default: undefined)_\n- **--forge-slider-active-track-height** - The height of the active track. _(default: undefined)_\n- **--forge-slider-active-track-shape** - The shape of the active track. _(default: undefined)_\n- **--forge-slider-disabled-active-track-color** - The color of the active track when disabled. _(default: undefined)_\n- **--forge-slider-disabled-active-track-opacity** - The opacity of the active track when disabled. _(default: undefined)_\n- **--forge-slider-disabled-handle-color** - The color of the slider handle when disabled. _(default: undefined)_\n- **--forge-slider-disabled-inactive-track-color** - The color of the inactive track when disabled. _(default: undefined)_\n- **--forge-slider-disabled-inactive-track-opacity** - The opacity of the inactive track when disabled. _(default: undefined)_\n- **--forge-slider-focus-handle-color** - The color of the slider handle when focused. _(default: undefined)_\n- **--forge-slider-handle-color** - The color of the slider handle. _(default: undefined)_\n- **--forge-slider-handle-height** - The height of the slider handle. _(default: undefined)_\n- **--forge-slider-handle-width** - The width of the slider handle. _(default: undefined)_\n- **--forge-slider-handle-shape** - The shape of the slider handle. _(default: undefined)_\n- **--forge-slider-hover-handle-color** - The color of the slider handle when hovered. _(default: undefined)_\n- **--forge-slider-inactive-track-color** - The color of the inactive track. _(default: undefined)_\n- **--forge-slider-inactive-track-height** - The height of the inactive track. _(default: undefined)_\n- **--forge-slider-inactive-track-shape** - The shape of the inactive track. _(default: undefined)_\n- **--forge-slider-label-container-shape** - The shape of the label container. _(default: undefined)_\n- **--forge-slider-label-container-color** - The color of the label container. _(default: undefined)_\n- **--forge-slider-label-container-height** - The height of the label container. _(default: undefined)_\n- **--forge-slider-label-text-color** - The color of the label text. _(default: undefined)_\n- **--forge-slider-pressed-handle-color** - The color of the slider handle when pressed. _(default: undefined)_\n- **--forge-slider-state-layer-size** - The size of the state layer. _(default: undefined)_\n- **--forge-slider-with-overlap-handle-outline-color** - The color of the slider handle outline when overlapping. _(default: undefined)_\n- **--forge-slider-with-overlap-handle-outline-width** - The width of the slider handle outline when overlapping. _(default: undefined)_\n- **--forge-slider-with-tick-marks-active-container-color** - The color of the active tick mark container when tick marks are visible. _(default: undefined)_\n- **--forge-slider-with-tick-marks-container-size** - The size of the tick mark container when tick marks are visible. _(default: undefined)_\n- **--forge-slider-with-tick-marks-disabled-active-container-color** - The color of the active tick mark container when tick marks are visible and disabled. _(default: undefined)_\n- **--forge-slider-with-tick-marks-disabled-inactive-container-color** - The color of the inactive tick mark container when tick marks are visible and disabled. _(default: undefined)_\n- **--forge-slider-with-tick-marks-inactive-container-color** - The color of the inactive tick mark container when tick marks are visible. _(default: undefined)_\n\n### **CSS Parts:**\n - **slider** - Styles the slider container element.\n- **track** - Styles the track element.\n- **handle-end** - Styles the end handle element.\n- **handle-end-thumb** - Styles the end handle thumb element.\n- **handle-end-label** - Styles the end handle label element.\n- **handle-end-label-content** - Styles the end handle label content element.\n- **handle-start** - Styles the start handle element.\n- **handle-start-thumb** - Styles the start handle thumb element.\n- **handle-start-label** - Styles the start handle label element.\n- **handle-start-label-content** - Styles the start handle label content element.",
|
|
1838
1848
|
"attributes": [
|
|
1839
1849
|
{
|
|
1840
1850
|
"name": "data-aria-label",
|
|
@@ -1941,7 +1951,7 @@
|
|
|
1941
1951
|
},
|
|
1942
1952
|
{
|
|
1943
1953
|
"name": "forge-split-button",
|
|
1944
|
-
"description": "Split buttons are used for splitting an action into two parts.\n---\n\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot.\n\n### **CSS Properties:**\n - **--forge-split-button-min-width** - The minimum width of the slotted buttons. _(default: undefined)_\n- **--forge-split-button-gap** - The gap between the slotted buttons. _(default: undefined)_\n- **--forge-split-button-focus-indicator-offset** - The offset of the focus indicator around the buttons. _(default: undefined)_\n- **--forge-split-button-focus-indicator-divider-offset** - The offset of the focus indicator divider when using outlined buttons. _(default: undefined)_",
|
|
1954
|
+
"description": "Split buttons are used for splitting an action into two parts, typically a primary action and a secondary action that opens a menu or performs an alternative action. Split buttons expect child Forge buttons as their content.\n---\n\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot.\n\n### **CSS Properties:**\n - **--forge-split-button-min-width** - The minimum width of the slotted buttons. _(default: undefined)_\n- **--forge-split-button-gap** - The gap between the slotted buttons. _(default: undefined)_\n- **--forge-split-button-focus-indicator-offset** - The offset of the focus indicator around the buttons. _(default: undefined)_\n- **--forge-split-button-focus-indicator-divider-offset** - The offset of the focus indicator divider when using outlined buttons. _(default: undefined)_",
|
|
1945
1955
|
"attributes": [
|
|
1946
1956
|
{
|
|
1947
1957
|
"name": "variant",
|
|
@@ -1973,7 +1983,7 @@
|
|
|
1973
1983
|
},
|
|
1974
1984
|
{
|
|
1975
1985
|
"name": "forge-stack",
|
|
1976
|
-
"description": "The stack is a utility component that helps manage spacing and alignment of immediate children along a vertical or horizontal axis.\n---\n\n\n### **Slots:**\n - _default_ - The default/unnamed slot for stack content.\n\n### **CSS Properties:**\n - **--forge-stack-alignment** - Controls the align-items CSS property of the root stack element. _(default: undefined)_\n- **--forge-stack-justify** - Controls the justify-content CSS property of the root stack element. _(default: undefined)_\n- **--forge-stack-gap** - Controls the gap between each child element within a stack. _(default: undefined)_\n- **--forge-stack-height** - Controls the height of the root stack element. _(default: undefined)_\n- **--forge-stack-stretch** - Controls the flex shorthand property of a child element within the stack. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.",
|
|
1986
|
+
"description": "The stack is a utility component that helps manage spacing and alignment of immediate children along a vertical or horizontal axis. Use stacks sparingly to avoid unnecessary DOM complexity, and prefer CSS flexbox or grid for more complex layouts.\n---\n\n\n### **Slots:**\n - _default_ - The default/unnamed slot for stack content.\n\n### **CSS Properties:**\n - **--forge-stack-alignment** - Controls the align-items CSS property of the root stack element. _(default: undefined)_\n- **--forge-stack-justify** - Controls the justify-content CSS property of the root stack element. _(default: undefined)_\n- **--forge-stack-gap** - Controls the gap between each child element within a stack. _(default: undefined)_\n- **--forge-stack-height** - Controls the height of the root stack element. _(default: undefined)_\n- **--forge-stack-stretch** - Controls the flex shorthand property of a child element within the stack. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element.",
|
|
1977
1987
|
"attributes": [
|
|
1978
1988
|
{
|
|
1979
1989
|
"name": "inline",
|
|
@@ -2010,7 +2020,7 @@
|
|
|
2010
2020
|
},
|
|
2011
2021
|
{
|
|
2012
2022
|
"name": "forge-state-layer",
|
|
2013
|
-
"description": "State layers show the interaction status of an element.\n---\n\n\n### **Methods:**\n - **playAnimation(coords: _StateLayerCoords_): _void_** - Triggers the animation to run.\n\nNote: If coordinates are not provided, the transition will originate from the center of the target element.\n\n### **CSS Properties:**\n - **--forge-state-layer-color** - The color of the state layer. Defaults to the on-surface theme. _(default: undefined)_\n- **--forge-state-layer-hover-color** - The color of the state layer when hovered. _(default: undefined)_\n- **--forge-state-layer-hover-opacity** - The opacity of the state layer when hovered. _(default: undefined)_\n- **--forge-state-layer-pressed-color** - The color of the state layer when pressed. _(default: undefined)_\n- **--forge-state-layer-pressed-opacity** - The opacity of the state layer when pressed. _(default: undefined)_\n- **--forge-state-layer-hover-duration** - The duration of the hover animation. _(default: undefined)_\n- **--forge-state-layer-animation-duration** - The duration of the animation. _(default: undefined)_\n- **--forge-state-layer-pressed-duration** - The duration of the pressed animation. _(default: undefined)_\n\n### **CSS Parts:**\n - **surface** - The surface element.",
|
|
2023
|
+
"description": "State layers show the interaction status of an element. These layers are semi-transparent overlays that indicate hover, focus, press, and drag states. State layers are building blocks for components and should generally not be used directly, but part of other components that have interactive states.\n---\n\n\n### **Methods:**\n - **playAnimation(coords: _StateLayerCoords_): _void_** - Triggers the animation to run.\n\nNote: If coordinates are not provided, the transition will originate from the center of the target element.\n\n### **CSS Properties:**\n - **--forge-state-layer-color** - The color of the state layer. Defaults to the on-surface theme. _(default: undefined)_\n- **--forge-state-layer-hover-color** - The color of the state layer when hovered. _(default: undefined)_\n- **--forge-state-layer-hover-opacity** - The opacity of the state layer when hovered. _(default: undefined)_\n- **--forge-state-layer-pressed-color** - The color of the state layer when pressed. _(default: undefined)_\n- **--forge-state-layer-pressed-opacity** - The opacity of the state layer when pressed. _(default: undefined)_\n- **--forge-state-layer-hover-duration** - The duration of the hover animation. _(default: undefined)_\n- **--forge-state-layer-animation-duration** - The duration of the animation. _(default: undefined)_\n- **--forge-state-layer-pressed-duration** - The duration of the pressed animation. _(default: undefined)_\n\n### **CSS Parts:**\n - **surface** - The surface element.",
|
|
2014
2024
|
"attributes": [
|
|
2015
2025
|
{
|
|
2016
2026
|
"name": "target",
|
|
@@ -2094,7 +2104,7 @@
|
|
|
2094
2104
|
},
|
|
2095
2105
|
{
|
|
2096
2106
|
"name": "forge-table",
|
|
2097
|
-
"description": "
|
|
2107
|
+
"description": "Tables are used to display sets of data. They organize information into rows and columns, making it easier to read, compare, and analyze. The Forge table provides a configuration-based approach to building data tables with means for sorting, filtering, selecting, and customizing the display of tabular data.\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
2108
|
"attributes": [
|
|
2099
2109
|
{
|
|
2100
2110
|
"name": "select",
|
|
@@ -2181,7 +2191,7 @@
|
|
|
2181
2191
|
},
|
|
2182
2192
|
{
|
|
2183
2193
|
"name": "forge-text-field",
|
|
2184
|
-
"description": "The Forge Text Field component
|
|
2194
|
+
"description": "The Forge Text Field component is an input field used to capture user text input. It requires a child `<input>` or `<textarea>` element to function properly, and an optional `<label>` element can be used to provide a label for the `<input>`.\n---\n\n\n### **Events:**\n - **forge-text-field-clear** - Dispatched when the clear button is clicked.\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- **clear-button** - Content slotted here replaces the default clear button.\n- **clear-button-tooltip** - Sets the text content of the clear button's tooltip and accessible label.\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-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- **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 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.",
|
|
2185
2195
|
"attributes": [
|
|
2186
2196
|
{
|
|
2187
2197
|
"name": "show-clear",
|
|
@@ -2400,7 +2410,7 @@
|
|
|
2400
2410
|
},
|
|
2401
2411
|
{
|
|
2402
2412
|
"name": "forge-toast",
|
|
2403
|
-
"description": "Toasts are non-modal notifications that appear in response to user interactions.\n---\n\n\n### **Events:**\n - **forge-toast-action** - Dispatched when the action button is clicked.\n- **forge-toast-close** - Dispatched when the toast is closed.\n\n### **Methods:**\n - **show(): _void_** - Shows the toast.\n- **hide(): __** - Hides the toast.\n\n### **CSS Properties:**\n - **--forge-toast-background** - The background color of the toast. _(default: undefined)_\n- **--forge-toast-color** - The text color of the toast. _(default: undefined)_\n- **--forge-toast-offset** - The offset of the toast from the edge of the viewport. _(default: undefined)_\n- **--forge-toast-shape** - The shape of the toast. _(default: undefined)_\n- **--forge-toast-elevation** - The elevation of the toast. _(default: undefined)_\n- **--forge-toast-action-color** - The text color of the action button. _(default: undefined)_\n- **--forge-toast-min-width** - The minimum width of the toast. _(default: undefined)_\n- **--forge-toast-max-width** - The maximum width of the toast. _(default: undefined)_\n- **--forge-toast-min-height** - The minimum height of the toast. _(default: undefined)_\n- **--forge-toast-inline-padding** - The padding of the toast when inline. _(default: undefined)_\n- **--forge-toast-spacing** - The spacing between toasts. _(default: undefined)_\n- **--forge-toast-message-padding** - The padding of the toast message. _(default: undefined)_\n- **--forge-toast-enter-duration** - The duration of the enter animation. _(default: undefined)_\n- **--forge-toast-enter-timing** - The timing function of the enter animation. _(default: undefined)_\n- **--forge-toast-exit-duration** - The duration of the exit animation. _(default: undefined)_\n- **--forge-toast-exit-timing** - The timing function of the exit animation. _(default: undefined)_\n- **--forge-toast-slide-origin** - The origin of the slide animation. _(default: undefined)_\n\n### **CSS Parts:**\n - **surface** - The surface container.\n- **message** - The message container.\n- **action-button** - The action button.\n- **close-button** - The close button.\n- **overlay** - The `<forge-overlay>` element.",
|
|
2413
|
+
"description": "Toasts are non-modal notifications that appear in response to user interactions. Use toasts to provide brief messages about app processes at the bottom or top of the screen. They automatically disappear after a timeout, but can also include an action button and a dismiss button.\n---\n\n\n### **Events:**\n - **forge-toast-action** - Dispatched when the action button is clicked.\n- **forge-toast-close** - Dispatched when the toast is closed.\n\n### **Methods:**\n - **show(): _void_** - Shows the toast.\n- **hide(): __** - Hides the toast.\n\n### **CSS Properties:**\n - **--forge-toast-background** - The background color of the toast. _(default: undefined)_\n- **--forge-toast-color** - The text color of the toast. _(default: undefined)_\n- **--forge-toast-offset** - The offset of the toast from the edge of the viewport. _(default: undefined)_\n- **--forge-toast-shape** - The shape of the toast. _(default: undefined)_\n- **--forge-toast-elevation** - The elevation of the toast. _(default: undefined)_\n- **--forge-toast-action-color** - The text color of the action button. _(default: undefined)_\n- **--forge-toast-min-width** - The minimum width of the toast. _(default: undefined)_\n- **--forge-toast-max-width** - The maximum width of the toast. _(default: undefined)_\n- **--forge-toast-min-height** - The minimum height of the toast. _(default: undefined)_\n- **--forge-toast-inline-padding** - The padding of the toast when inline. _(default: undefined)_\n- **--forge-toast-spacing** - The spacing between toasts. _(default: undefined)_\n- **--forge-toast-message-padding** - The padding of the toast message. _(default: undefined)_\n- **--forge-toast-enter-duration** - The duration of the enter animation. _(default: undefined)_\n- **--forge-toast-enter-timing** - The timing function of the enter animation. _(default: undefined)_\n- **--forge-toast-exit-duration** - The duration of the exit animation. _(default: undefined)_\n- **--forge-toast-exit-timing** - The timing function of the exit animation. _(default: undefined)_\n- **--forge-toast-slide-origin** - The origin of the slide animation. _(default: undefined)_\n\n### **CSS Parts:**\n - **surface** - The surface container.\n- **message** - The message container.\n- **action-button** - The action button.\n- **close-button** - The close button.\n- **overlay** - The `<forge-overlay>` element.",
|
|
2404
2414
|
"attributes": [
|
|
2405
2415
|
{ "name": "open", "description": "The open state.", "values": [] },
|
|
2406
2416
|
{
|
|
@@ -2438,7 +2448,7 @@
|
|
|
2438
2448
|
},
|
|
2439
2449
|
{
|
|
2440
2450
|
"name": "forge-toolbar",
|
|
2441
|
-
"description": "Toolbars allow you to place titles and actions within a container and align them to the start, center, or end of the toolbar
|
|
2451
|
+
"description": "Toolbars allow you to place titles and actions within a container and align them to the start, center, or end of the toolbar. This component is useful as headers and footers within pages, dialogs, sections... etc. to ensure consistent layout and alignment.\n---\n\n\n### **Slots:**\n - **before-start** - The content to place before the start slot.\n- **start** - The content to place at the start of the toolbar.\n- **center** - The content to place in the center of the toolbar.\n- **end** - The content to place at the end of the toolbar.\n- **after-end** - The content to place after the end slot.\n\n### **CSS Properties:**\n - **--forge-toolbar-height** - Controls the height. _(default: undefined)_\n- **--forge-toolbar-min-height** - Controls the minimum height. Defaults to the toolbar height. _(default: undefined)_\n- **--forge-theme-surface** - Controls the background-color of the toolbar. _(default: undefined)_\n- **--forge-toolbar-divider-width** - Controls the divider width. _(default: undefined)_\n- **--forge-toolbar-divider-style** - Controls the divider style. _(default: undefined)_\n- **--forge-toolbar-divider-color** - Controls the divider color. _(default: undefined)_\n- **--forge-toolbar-shape** - Controls the border radius of the toolbar. _(default: undefined)_\n- **--forge-toolbar-start-start-shape** - Controls the border radius of the top left corner. _(default: undefined)_\n- **--forge-toolbar-start-end-shape** - Controls the border radius of the top right corner. _(default: undefined)_\n- **--forge-toolbar-end-start-shape** - Controls the border radius of the bottom left corner. _(default: undefined)_\n- **--forge-toolbar-end-end-shape** - Controls the border radius of the bottom right corner. _(default: undefined)_\n- **--forge-toolbar-padding** - Controls the left and right padding using the padding-inline style. _(default: undefined)_\n- **--forge-toolbar-padding-block** - Controls the top and bottom padding using the padding-block style. _(default: undefined)_\n- **--forge-toolbar-padding-inline** - Controls the left and right padding using the padding-block style. _(default: undefined)_\n- **--forge-toolbar-columns** - The grid column track sizes. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element wrapping all slots and content.\n- **inner** - The internal container element for the start, center, and end slots.\n- **before-section-start** - The container element for the before-start slot.\n- **section-start** - The container element for the start slot.\n- **section-center** - The container element for the center slot.\n- **section-end** - The container element for the end slot.\n- **after-section-end** - The container element for the after-end slot.",
|
|
2442
2452
|
"attributes": [
|
|
2443
2453
|
{
|
|
2444
2454
|
"name": "inverted",
|
|
@@ -2470,7 +2480,7 @@
|
|
|
2470
2480
|
},
|
|
2471
2481
|
{
|
|
2472
2482
|
"name": "forge-tooltip",
|
|
2473
|
-
"description": "Tooltips display information related to an element when the user hovers over an element.\n---\n\n\n### **Slots:**\n - _default_ - The content to display in the tooltip.\n\n### **CSS Properties:**\n - **--forge-tooltip-background** - The background color of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-color** - The text color of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-shape** - The shape of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-padding** - The padding of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-padding-block** - The block padding of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-padding-inline** - The inline padding of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-max-width** - The maximum width of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-elevation** - The elevation of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-border-width** - The border width of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-border-style** - The border style of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-border-color** - The border color of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-animation-timing** - The animation timing function of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-animation-duration** - The animation duration of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-animation-offset** - The animation offset of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-arrow-size** - The size of the tooltip arrow. _(default: undefined)_\n- **--forge-tooltip-arrow-height** - The height of the tooltip arrow. _(default: undefined)_\n- **--forge-tooltip-arrow-width** - The width of the tooltip arrow. _(default: undefined)_\n- **--forge-tooltip-arrow-shape** - The shape of the tooltip arrow. _(default: undefined)_\n- **--forge-tooltip-arrow-clip-path** - The clip path of the tooltip arrow. _(default: undefined)_\n- **--forge-tooltip-arrow-rotation** - The rotation of the tooltip arrow. _(default: undefined)_\n- **--forge-tooltip-arrow-top-rotation** - The rotation of the tooltip arrow when the tooltip is placed on top. _(default: undefined)_\n- **--forge-tooltip-arrow-right-rotation** - The rotation of the tooltip arrow when the tooltip is placed on the right. _(default: undefined)_\n- **--forge-tooltip-arrow-bottom-rotation** - The rotation of the tooltip arrow when the tooltip is placed on the bottom. _(default: undefined)_\n- **--forge-tooltip-arrow-left-rotation** - The rotation of the tooltip arrow when the tooltip is placed on the left. _(default: undefined)_\n\n### **CSS Parts:**\n - **surface** - The tooltip surface.\n- **arrow** - The tooltip arrow.\n- **overlay** - The overlay surface.",
|
|
2483
|
+
"description": "Tooltips display information related to an element when the user focuses or hovers over an anchor element. Use tooltips to provide additional context or information about elements that may not be immediately apparent.\n---\n\n\n### **Slots:**\n - _default_ - The content to display in the tooltip.\n\n### **CSS Properties:**\n - **--forge-tooltip-background** - The background color of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-color** - The text color of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-shape** - The shape of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-padding** - The padding of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-padding-block** - The block padding of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-padding-inline** - The inline padding of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-max-width** - The maximum width of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-elevation** - The elevation of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-border-width** - The border width of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-border-style** - The border style of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-border-color** - The border color of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-animation-timing** - The animation timing function of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-animation-duration** - The animation duration of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-animation-offset** - The animation offset of the tooltip surface. _(default: undefined)_\n- **--forge-tooltip-arrow-size** - The size of the tooltip arrow. _(default: undefined)_\n- **--forge-tooltip-arrow-height** - The height of the tooltip arrow. _(default: undefined)_\n- **--forge-tooltip-arrow-width** - The width of the tooltip arrow. _(default: undefined)_\n- **--forge-tooltip-arrow-shape** - The shape of the tooltip arrow. _(default: undefined)_\n- **--forge-tooltip-arrow-clip-path** - The clip path of the tooltip arrow. _(default: undefined)_\n- **--forge-tooltip-arrow-rotation** - The rotation of the tooltip arrow. _(default: undefined)_\n- **--forge-tooltip-arrow-top-rotation** - The rotation of the tooltip arrow when the tooltip is placed on top. _(default: undefined)_\n- **--forge-tooltip-arrow-right-rotation** - The rotation of the tooltip arrow when the tooltip is placed on the right. _(default: undefined)_\n- **--forge-tooltip-arrow-bottom-rotation** - The rotation of the tooltip arrow when the tooltip is placed on the bottom. _(default: undefined)_\n- **--forge-tooltip-arrow-left-rotation** - The rotation of the tooltip arrow when the tooltip is placed on the left. _(default: undefined)_\n\n### **CSS Parts:**\n - **surface** - The tooltip surface.\n- **arrow** - The tooltip arrow.\n- **overlay** - The overlay surface.",
|
|
2474
2484
|
"attributes": [
|
|
2475
2485
|
{
|
|
2476
2486
|
"name": "open",
|
|
@@ -2530,7 +2540,7 @@
|
|
|
2530
2540
|
},
|
|
2531
2541
|
{
|
|
2532
2542
|
"name": "forge-view-switcher",
|
|
2533
|
-
"description": "A container component that manages switching between multiple child
|
|
2543
|
+
"description": "A container component that manages switching between multiple child `<forge-view>` elements 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
2544
|
"attributes": [
|
|
2535
2545
|
{
|
|
2536
2546
|
"name": "index",
|
|
@@ -2550,7 +2560,7 @@
|
|
|
2550
2560
|
},
|
|
2551
2561
|
{
|
|
2552
2562
|
"name": "forge-app-bar",
|
|
2553
|
-
"description": "App bars are
|
|
2563
|
+
"description": "App bars are headers used to display branding, navigation, and actions at the top of an application. They typically contain a logo, title, and various action items.\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
2564
|
"attributes": [
|
|
2555
2565
|
{
|
|
2556
2566
|
"name": "title-text",
|
|
@@ -2759,7 +2769,7 @@
|
|
|
2759
2769
|
},
|
|
2760
2770
|
{
|
|
2761
2771
|
"name": "forge-button-toggle",
|
|
2762
|
-
"description": "
|
|
2772
|
+
"description": "Button toggles 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
2773
|
"attributes": [
|
|
2764
2774
|
{
|
|
2765
2775
|
"name": "value",
|
|
@@ -2786,7 +2796,7 @@
|
|
|
2786
2796
|
},
|
|
2787
2797
|
{
|
|
2788
2798
|
"name": "forge-button-toggle-group",
|
|
2789
|
-
"description": "Button toggle groups allow users to select one or more options from a set of
|
|
2799
|
+
"description": "Button toggle groups allow users to select one or more options from a set of button toggles.\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
2800
|
"attributes": [
|
|
2791
2801
|
{
|
|
2792
2802
|
"name": "value",
|
|
@@ -2895,13 +2905,18 @@
|
|
|
2895
2905
|
"description": "The download of the chip.",
|
|
2896
2906
|
"values": []
|
|
2897
2907
|
},
|
|
2898
|
-
{ "name": "rel", "description": "The rel of the chip.", "values": [] }
|
|
2908
|
+
{ "name": "rel", "description": "The rel of the chip.", "values": [] },
|
|
2909
|
+
{
|
|
2910
|
+
"name": "remove-button-label",
|
|
2911
|
+
"description": "The custom aria-label for the remove button.",
|
|
2912
|
+
"values": []
|
|
2913
|
+
}
|
|
2899
2914
|
],
|
|
2900
2915
|
"references": []
|
|
2901
2916
|
},
|
|
2902
2917
|
{
|
|
2903
2918
|
"name": "forge-chip-set",
|
|
2904
|
-
"description": "
|
|
2919
|
+
"description": "Chip sets are used to group multiple chips together and orchestrate their behavior.\n---\n\n\n### **Slots:**\n - _default_ - The chips to display in the chip set.\n\n### **CSS Properties:**\n - **--forge-chip-set-spacing** - The spacing between chips. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The component's root element.",
|
|
2905
2920
|
"attributes": [
|
|
2906
2921
|
{
|
|
2907
2922
|
"name": "vertical",
|
|
@@ -2950,7 +2965,7 @@
|
|
|
2950
2965
|
},
|
|
2951
2966
|
{
|
|
2952
2967
|
"name": "forge-drawer",
|
|
2953
|
-
"description": "A persistent side navigation drawer component that provides
|
|
2968
|
+
"description": "A persistent side navigation drawer component that provides the ability to dismiss and open the drawer with smooth animations. Use for navigation or to display additional content alongside the main application 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
2969
|
"attributes": [
|
|
2955
2970
|
{
|
|
2956
2971
|
"name": "open",
|
|
@@ -2989,7 +3004,7 @@
|
|
|
2989
3004
|
},
|
|
2990
3005
|
{
|
|
2991
3006
|
"name": "forge-modal-drawer",
|
|
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.",
|
|
3007
|
+
"description": "A modal navigation drawer component that slides in from the side with a backdrop overlay, typically used for temporary navigation panels. Prefer to use the dialog component with the preset options for sidesheet styles drawers.\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
3008
|
"attributes": [
|
|
2994
3009
|
{
|
|
2995
3010
|
"name": "open",
|
|
@@ -3024,7 +3039,7 @@
|
|
|
3024
3039
|
},
|
|
3025
3040
|
{
|
|
3026
3041
|
"name": "forge-list",
|
|
3027
|
-
"description": "Lists are
|
|
3042
|
+
"description": "Lists are vertically oriented groups of related content that allow users to select or view one or more items from a set.\n---\n\n\n### **Slots:**\n - _default_ - The default/unnamed slot for child list items.\n\n### **CSS Properties:**\n - **--forge-list-container-color** - The background color of the list surface. _(default: undefined)_\n- **--forge-list-spacing** - The spacing between the list items. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The component's root container element.",
|
|
3028
3043
|
"attributes": [
|
|
3029
3044
|
{
|
|
3030
3045
|
"name": "dense",
|
|
@@ -3252,7 +3267,7 @@
|
|
|
3252
3267
|
},
|
|
3253
3268
|
{
|
|
3254
3269
|
"name": "forge-radio",
|
|
3255
|
-
"description": "The Forge Radio component is used to create a form input where only one out of a set of
|
|
3270
|
+
"description": "The Forge Radio component is used to create a form input where only one out of a set of values should be selected.\n---\n\n\n### **Slots:**\n - _default_ - This is a default/unnamed slot for the label text.\n\n### **CSS Properties:**\n - **--forge-radio-primary-color** - The primary color of the radio button when checked. _(default: undefined)_\n- **--forge-radio-inactive-color** - The color of the radio button when unchecked. _(default: undefined)_\n- **--forge-radio-size** - The size of the radio button in the inline and block directions. _(default: undefined)_\n- **--forge-radio-width** - The width of the radio button. _(default: undefined)_\n- **--forge-radio-height** - The height of the radio button. _(default: undefined)_\n- **--forge-radio-border-width** - The width of the radio button's border. _(default: undefined)_\n- **--forge-radio-unchecked-border-color** - The color of the radio button's border when unchecked. _(default: undefined)_\n- **--forge-radio-checked-border-color** - The color of the radio button's border when checked. _(default: undefined)_\n- **--forge-radio-background** - The background of the radio button. _(default: undefined)_\n- **--forge-radio-shape** - The shape of the radio button. _(default: undefined)_\n- **--forge-radio-mark-size** - The size of the radio button's mark in the inline and block directions. _(default: undefined)_\n- **--forge-radio-mark-width** - The width of the radio button's mark. _(default: undefined)_\n- **--forge-radio-mark-height** - The height of the radio button's mark. _(default: undefined)_\n- **--forge-radio-mark-color** - The color of the radio button's mark. _(default: undefined)_\n- **--forge-radio-gap** - The gap between the radio button and its label. _(default: undefined)_\n- **--forge-radio-justify** - The alignment of the radio button and its label in the inline direction. _(default: undefined)_\n- **--forge-radio-align** - The alignment of the radio button and its label in the block direction. _(default: undefined)_\n- **--forge-radio-direction** - The direction of the radio button and its label. _(default: undefined)_\n- **--forge-radio-state-layer-size** - The size of the radio button's state layer in the inline and block directions. _(default: undefined)_\n- **--forge-radio-state-layer-width** - The width of the radio button's state layer. _(default: undefined)_\n- **--forge-radio-state-layer-height** - The height of the radio button's state layer. _(default: undefined)_\n- **--forge-radio-state-layer-unchecked** - color - The color of the radio button's state layer when unchecked. _(default: undefined)_\n- **--forge-radio-state-layer-checked-color** - The color of the radio button's state layer when checked. _(default: undefined)_\n- **--forge-radio-state-layer-shape** - The shape of the radio button's state layer. _(default: undefined)_\n- **--forge-radio-state-layer-dense-size** - The size of the radio button's state layer when dense. _(default: undefined)_\n- **--forge-radio-state-layer-dense-width** - The width of the radio button's state layer when dense. _(default: undefined)_\n- **--forge-radio-state-layer-dense-height** - The height of the radio button's state layer when dense. _(default: undefined)_\n- **--forge-radio-disabled-opacity** - The opacity of the radio button when disabled. _(default: undefined)_\n- **--forge-radio-animation-duration** - The duration of the radio button's animations. _(default: undefined)_\n- **--forge-radio-animation-timing-function** - The timing function of the radio button's animations. _(default: undefined)_\n- **--forge-radio-animation-delay** - The delay of the radio button's animations. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - Styles the radio's root element.\n- **background** - Styles the border and background of the radio.\n- **focus-indicator** - Styles the focus indicator of the radio.\n- **state-layer** - Styles the state layer of the radio.",
|
|
3256
3271
|
"attributes": [
|
|
3257
3272
|
{
|
|
3258
3273
|
"name": "checked",
|
|
@@ -3311,7 +3326,7 @@
|
|
|
3311
3326
|
},
|
|
3312
3327
|
{
|
|
3313
3328
|
"name": "forge-option",
|
|
3314
|
-
"description": "Options represent individual selectable items within select components
|
|
3329
|
+
"description": "Options represent individual selectable items within `<forge-select>` components.\n---\n",
|
|
3315
3330
|
"attributes": [
|
|
3316
3331
|
{
|
|
3317
3332
|
"name": "value",
|
|
@@ -3395,7 +3410,7 @@
|
|
|
3395
3410
|
},
|
|
3396
3411
|
{
|
|
3397
3412
|
"name": "forge-select",
|
|
3398
|
-
"description": "
|
|
3413
|
+
"description": "Select components are comboboxes that 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
3414
|
"attributes": [
|
|
3400
3415
|
{
|
|
3401
3416
|
"name": "label",
|
|
@@ -3832,7 +3847,7 @@
|
|
|
3832
3847
|
},
|
|
3833
3848
|
{
|
|
3834
3849
|
"name": "forge-tab",
|
|
3835
|
-
"description": "
|
|
3850
|
+
"description": "Tab components represent a single tab inside a tab bar.\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.",
|
|
3836
3851
|
"attributes": [
|
|
3837
3852
|
{
|
|
3838
3853
|
"name": "disabled",
|
|
@@ -3869,7 +3884,7 @@
|
|
|
3869
3884
|
},
|
|
3870
3885
|
{
|
|
3871
3886
|
"name": "forge-tab-bar",
|
|
3872
|
-
"description": "
|
|
3887
|
+
"description": "Tab bars organize a set of tabs, holding selection state and enabling navigation between different views or sections of content.\n---\n\n\n### **Events:**\n - **forge-tab-bar-change** - Dispatches when the active tab changes.\n\n### **CSS Properties:**\n - **--forge-tab-bar-justify** - The `justify-content` value for the tab bar flex container. _(default: undefined)_\n- **--forge-tab-bar-stretch** - The `flex` value for the child `<forge-tab>` elements. _(default: undefined)_\n- **--forge-tab-bar-divider-color** - The color of the divider. _(default: undefined)_\n- **--forge-tab-bar-divider-thickness** - The thickness of the divider. _(default: undefined)_\n\n### **CSS Parts:**\n - **container** - The container element.\n- **scroll-container** - The scroll container element.",
|
|
3873
3888
|
"attributes": [
|
|
3874
3889
|
{
|
|
3875
3890
|
"name": "disabled",
|
|
@@ -3916,7 +3931,7 @@
|
|
|
3916
3931
|
},
|
|
3917
3932
|
{
|
|
3918
3933
|
"name": "forge-view",
|
|
3919
|
-
"description": "
|
|
3934
|
+
"description": "Represents a single view content area within a view-switcher for organizing and displaying content sections.\n---\n",
|
|
3920
3935
|
"attributes": [],
|
|
3921
3936
|
"references": []
|
|
3922
3937
|
}
|