@esri/calcite-components 3.2.0 → 3.2.1-next.1

package/dist/docs/vscode.html-custom-data.json

@@ -4108,7 +4108,7 @@
     },
     {
       "name": "calcite-input-number",
-      "description": "### Events\n- **calciteInputNumberChange** - Fires each time a new value is typed and committed.\n- **calciteInputNumberInput** - Fires each time a new value is typed.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `selectText(): Promise<void>` - Selects the text of the component's `value`.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **action** - A slot for positioning a button next to the component.\n\n### CSS Properties\n- **--calcite-input-actions-background-color** - Specifies the background color of the component's `clearable` and `number-button-type` elements. \n- **--calcite-input-actions-background-color-hover** - Specifies the background color of the component's `clearable` and `number-button-type` elements. when hovered. \n- **--calcite-input-actions-background-color-press** - Specifies the background color of the component's `clearable` and `number-button-type` elements. when pressed. \n- **--calcite-input-actions-icon-color** - Specifies the icon color of the component's `clearable` and `number-button-type` elements. \n- **--calcite-input-actions-icon-color-hover** - Specifies the icon color of the component's `clearable` and `number-button-type` elements. when hovered. \n- **--calcite-input-actions-icon-color-press** - Specifies the icon color of the component's `clearable` and `number-button-type` elements. when pressed. \n- **--calcite-input-loading-background-color** - Specifies the background color of the `loading` element. \n- **--calcite-input-loading-fill-color** - Specifies the fill color of the `loading` element. \n- **--calcite-input-number-background-color** - Specifies the background color of the component. \n- **--calcite-input-number-border-color** - Specifies the border color of the component. \n- **--calcite-input-number-corner-radius** - Specifies the border radius of the component. \n- **--calcite-input-number-height** - Specifies the height of the component. \n- **--calcite-input-number-placeholder-text-color** - Specifies the text color of the placeholder in the component. \n- **--calcite-input-number-text-color** - Specifies the text color of the component. \n- **--calcite-input-number-text-color-focus** - Specifies the text color of the component when focused. \n- **--calcite-input-prefix-background-color** - Specifies the background color of the prefix element. \n- **--calcite-input-prefix-size** - Specifies the width of the prefix element. \n- **--calcite-input-prefix-text-color** - Specifies the text color of the prefix element. \n- **--calcite-input-suffix-background-color** - Specifies the background color of the suffix element. \n- **--calcite-input-suffix-size** - Specifies the width of the suffix element. \n- **--calcite-input-suffix-text-color** - Specifies the text color of the suffix element. ",
+      "description": "### Events\n- **calciteInputNumberChange** - Fires each time a new value is typed and committed.\n- **calciteInputNumberInput** - Fires each time a new value is typed.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `selectText(): Promise<void>` - Selects the text of the component's `value`.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **action** - A slot for positioning a button next to the component.\n\n### CSS Properties\n- **--calcite-input-actions-background-color** - Specifies the background color of the component's `clearable` and `number-button-type` elements. \n- **--calcite-input-actions-background-color-hover** - Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered. \n- **--calcite-input-actions-background-color-press** - Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed. \n- **--calcite-input-actions-icon-color** - Specifies the icon color of the component's `clearable` and `number-button-type` elements. \n- **--calcite-input-actions-icon-color-hover** - Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered. \n- **--calcite-input-actions-icon-color-press** - Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed. \n- **--calcite-input-loading-background-color** - Specifies the background color of the `loading` element. \n- **--calcite-input-loading-fill-color** - Specifies the fill color of the `loading` element. \n- **--calcite-input-number-background-color** - Specifies the background color of the component. \n- **--calcite-input-number-border-color** - Specifies the border color of the component. \n- **--calcite-input-number-corner-radius** - Specifies the border radius of the component. \n- **--calcite-input-number-height** - Specifies the height of the component. \n- **--calcite-input-number-placeholder-text-color** - Specifies the text color of the placeholder in the component. \n- **--calcite-input-number-text-color** - Specifies the text color of the component. \n- **--calcite-input-number-text-color-focus** - Specifies the text color of the component when focused. \n- **--calcite-input-prefix-background-color** - Specifies the background color of the prefix element. \n- **--calcite-input-prefix-size** - Specifies the width of the prefix element. \n- **--calcite-input-prefix-text-color** - Specifies the text color of the prefix element. \n- **--calcite-input-suffix-background-color** - Specifies the background color of the suffix element. \n- **--calcite-input-suffix-size** - Specifies the width of the suffix element. \n- **--calcite-input-suffix-text-color** - Specifies the text color of the suffix element. ",
       "attributes": [
         {
           "name": "alignment",
@@ -6943,7 +6943,7 @@
     },
     {
       "name": "calcite-shell-panel",
-      "description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **action-bar** - A slot for adding a `calcite-action-bar` to the component.\n\n### CSS Properties\n- **--calcite-shell-panel-background-color** - Specifies the background color of the component. \n- **--calcite-shell-panel-border-color** - When `displayMode` is `\"float-all\"`, specifies the component's border color. \n- **--calcite-shell-panel-corner-radius** - When `displayMode` is `\"float-all\"`, specifies the component's corner radius \n- **--calcite-shell-panel-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the height of the component. \n- **--calcite-shell-panel-max-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the maximum height of the component. \n- **--calcite-shell-panel-max-width** - Specifies the maximum width of the component. \n- **--calcite-shell-panel-min-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the minimum height of the component. \n- **--calcite-shell-panel-min-width** - Specifies the minimum width of the component. \n- **--calcite-shell-panel-resize-background-color** - Specifies the background color of the resize handle. \n- **--calcite-shell-panel-resize-icon-color** - Specifies the text color of the resize handle. \n- **--calcite-shell-panel-shadow** - When `displayMode` is `\"float-all\"`, specifies the component's shadow. \n- **--calcite-shell-panel-text-color** - Specifies the text color of the component. \n- **--calcite-shell-panel-width** - Specifies the width of the component. \n- **--calcite-shell-panel-z-index** - Specifies the z-index value for the component. ",
+      "description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **action-bar** - A slot for adding a `calcite-action-bar` to the component.\n\n### CSS Properties\n- **--calcite-shell-panel-background-color** - Specifies the background color of the component. \n- **--calcite-shell-panel-border-color** - When `displayMode` is `\"float-all\"`, specifies the component's border color. \n- **--calcite-shell-panel-corner-radius** - When `displayMode` is `\"float-all\"`, specifies the component's corner radius. \n- **--calcite-shell-panel-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the height of the component. \n- **--calcite-shell-panel-max-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the maximum height of the component. \n- **--calcite-shell-panel-max-width** - Specifies the maximum width of the component. \n- **--calcite-shell-panel-min-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the minimum height of the component. \n- **--calcite-shell-panel-min-width** - Specifies the minimum width of the component. \n- **--calcite-shell-panel-resize-background-color** - Specifies the background color of the resize handle. \n- **--calcite-shell-panel-resize-icon-color** - Specifies the text color of the resize handle. \n- **--calcite-shell-panel-shadow** - When `displayMode` is `\"float-all\"`, specifies the component's shadow. \n- **--calcite-shell-panel-text-color** - Specifies the text color of the component. \n- **--calcite-shell-panel-width** - Specifies the width of the component. \n- **--calcite-shell-panel-z-index** - Specifies the z-index value for the component. ",
       "attributes": [
         {
           "name": "collapsed",
@@ -7601,7 +7601,7 @@
     },
     {
       "name": "calcite-stepper",
-      "description": "### Events\n- **calciteStepperChange** - Fires when the active `calcite-stepper-item` changes.\n- **calciteStepperItemChange** - Fires when the active `calcite-stepper-item` changes.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `endStep(): Promise<void>` - Set the last `calcite-stepper-item` as active.\n- `goToStep(step: number): Promise<void>` - Set a specified `calcite-stepper-item` as active.\n- `nextStep(): Promise<void>` - Set the next `calcite-stepper-item` as active.\n- `prevStep(): Promise<void>` - Set the previous `calcite-stepper-item` as active.\n- `startStep(): Promise<void>` - Set the first `calcite-stepper-item` as active.\n\n### Slots\n- _default_ - A slot for adding `calcite-stepper-item` elements.\n\n### CSS Properties\n- **--calcite-stepper-bar-gap** - Specifies the space between items in the step bar. \n- **--calcite-stepper-bar-inactive-fill-color** - Specifies the fill color of items in the step bar. \n- **--calcite-stepper-bar-active-fill-color** - Specifies the fill color of active items in the step bar. \n- **--calcite-stepper-bar-complete-fill-color** - Specifies the fill color of complete items in the step bar. \n- **--calcite-stepper-bar-error-fill-color** - Specifies the fill color of error items in the step bar. ",
+      "description": "### Events\n- **calciteStepperChange** - Fires when the active `calcite-stepper-item` changes.\n- **calciteStepperItemChange** - Fires when the active `calcite-stepper-item` changes.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `endStep(): Promise<void>` - Set the last `calcite-stepper-item` as active.\n- `goToStep(step: number): Promise<void>` - Set a specified `calcite-stepper-item` as active.\n- `nextStep(): Promise<void>` - Set the next `calcite-stepper-item` as active.\n- `prevStep(): Promise<void>` - Set the previous `calcite-stepper-item` as active.\n- `startStep(): Promise<void>` - Set the first `calcite-stepper-item` as active.\n\n### Slots\n- _default_ - A slot for adding `calcite-stepper-item` elements.\n\n### CSS Properties\n- **--calcite-stepper-bar-gap** - Specifies the space between items in the component. \n- **--calcite-stepper-bar-inactive-fill-color** - Specifies the fill color of items in the component. \n- **--calcite-stepper-bar-active-fill-color** - Specifies the fill color of active items in the component. \n- **--calcite-stepper-bar-complete-fill-color** - Specifies the fill color of complete items in the component. \n- **--calcite-stepper-bar-error-fill-color** - Specifies the fill color of error items in the component. ",
       "attributes": [
         {
           "name": "icon",
@@ -7663,7 +7663,7 @@
     },
     {
       "name": "calcite-stepper-item",
-      "description": "### Events\n- **calciteStepperItemSelect** - Fires when the active `calcite-stepper-item` changes.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding custom content.\n\n### CSS Properties\n- **--calcite-stepper-item-background-color-press** - Specifies the component's background-color when active. \n- **--calcite-stepper-item-header-text-color** - Specifies the component's header text color. \n- **--calcite-stepper-item-header-text-color-hover** - Specifies the component's header text color when hovered or focused. \n- **--calcite-stepper-item-selected-header-text-color** - Specifies the component's header text color when selected. \n- **--calcite-stepper-item-icon-color** - Specifies the component's icon color. \n- **--calcite-stepper-item-complete-icon-color** - Specifies the component's icon color when complete. \n- **--calcite-stepper-item-error-icon-color** - Specifies the component's icon and number color when in error. \n- **--calcite-stepper-item-selected-icon-color** - Specifies the component's icon and number color when selected. \n- **--calcite-stepper-item-description-text-color** - Specifies the component's description and number text color. \n- **--calcite-stepper-item-description-text-color-hover** - Specifies the component's description text color when hovered, focused or selected. \n- **--calcite-stepper-bar-gap** - Specifies the component's bottom spacing. \n- **--calcite-stepper-bar-fill-color** - Specifies the component's fill color. \n- **--calcite-stepper-bar-fill-color-hover** - Specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-complete-fill-color** - Specifies the component's fill color when complete. \n- **--calcite-stepper-bar-complete-fill-color-hover** - When item is complete, specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-error-fill-color** - Specifies the component's fill color when in error. \n- **--calcite-stepper-bar-error-fill-color-hover** - When item is error, specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-selected-fill-color** - Specifies the component's fill color when selected. ",
+      "description": "### Events\n- **calciteStepperItemSelect** - Fires when the active `calcite-stepper-item` changes.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding custom content.\n\n### CSS Properties\n- **--calcite-stepper-item-background-color-press** - Specifies the component's background-color when active. \n- **--calcite-stepper-item-header-text-color** - Specifies the component's header text color. \n- **--calcite-stepper-item-header-text-color-hover** - Specifies the component's header text color when hovered or focused. \n- **--calcite-stepper-item-selected-header-text-color** - Specifies the component's header text color when selected. \n- **--calcite-stepper-item-icon-color** - Specifies the component's icon color. \n- **--calcite-stepper-item-complete-icon-color** - Specifies the component's icon color when complete. \n- **--calcite-stepper-item-error-icon-color** - Specifies the component's icon and number color when in error. \n- **--calcite-stepper-item-selected-icon-color** - Specifies the component's icon and number color when selected. \n- **--calcite-stepper-item-description-text-color** - Specifies the component's description and number text color. \n- **--calcite-stepper-item-description-text-color-hover** - Specifies the component's description text color when hovered, focused or selected. \n- **--calcite-stepper-bar-gap** - Specifies the component's bottom spacing. \n- **--calcite-stepper-bar-fill-color** - Specifies the component's fill color. \n- **--calcite-stepper-bar-fill-color-hover** - Specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-complete-fill-color** - Specifies the component's fill color when complete. \n- **--calcite-stepper-bar-complete-fill-color-hover** - When the component is `complete`, specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-error-fill-color** - Specifies the component's fill color when in error. \n- **--calcite-stepper-bar-error-fill-color-hover** - When the component contains an `error`, specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-selected-fill-color** - Specifies the component's fill color when selected. ",
       "attributes": [
         {
           "name": "complete",
@@ -8591,7 +8591,7 @@
     },
     {
       "name": "calcite-time-picker",
-      "description": "### Events\n- **calciteTimePickerChange** - Fires when a user changes the component's time\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component's first focusable element.\n\n### CSS Properties\n- **--calcite-time-picker-background-color** - The background color of the time picker. \n- **--calcite-time-picker-corner-radius** - The border radius of the time picker. \n- **--calcite-time-picker-button-background-color-hover** - Specifies the button's background color when hovered or focused. \n- **--calcite-time-picker-button-background-color-press** - Specifies the button's background color when active. \n- **--calcite-time-picker-color** - Specifies the component's text color. \n- **--calcite-time-picker-icon-color** - Specifies the component's icon color. \n- **--calcite-time-picker-input-border-color-press** - Specifies the input's border color when active. \n- **--calcite-time-picker-input-border-color-hover** - Specifies the input's border color when hovered. ",
+      "description": "### Events\n- **calciteTimePickerChange** - Fires when a user changes the component's time\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component's first focusable element.\n\n### CSS Properties\n- **--calcite-time-picker-background-color** - Specifies the background color of the time picker. \n- **--calcite-time-picker-corner-radius** - Specifies the border radius of the time picker. \n- **--calcite-time-picker-button-background-color-hover** - Specifies the button's background color when hovered or focused. \n- **--calcite-time-picker-button-background-color-press** - Specifies the button's background color when active. \n- **--calcite-time-picker-color** - Specifies the component's text color. \n- **--calcite-time-picker-icon-color** - Specifies the component's icon color. \n- **--calcite-time-picker-input-border-color-press** - Specifies the input's border color when active. \n- **--calcite-time-picker-input-border-color-hover** - Specifies the input's border color when hovered. ",
       "attributes": [
         {
           "name": "hour-format",

package/dist/docs/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@esri/calcite-components",
-  "version": "3.2.0",
+  "version": "3.2.1-next.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -8384,7 +8384,7 @@
         },
         {
           "name": "calcite-input-number",
-          "description": "### Events\n- **calciteInputNumberChange** - Fires each time a new value is typed and committed.\n- **calciteInputNumberInput** - Fires each time a new value is typed.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `selectText(): Promise<void>` - Selects the text of the component's `value`.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **action** - A slot for positioning a button next to the component.\n\n### CSS Properties\n- **--calcite-input-actions-background-color** - Specifies the background color of the component's `clearable` and `number-button-type` elements. \n- **--calcite-input-actions-background-color-hover** - Specifies the background color of the component's `clearable` and `number-button-type` elements. when hovered. \n- **--calcite-input-actions-background-color-press** - Specifies the background color of the component's `clearable` and `number-button-type` elements. when pressed. \n- **--calcite-input-actions-icon-color** - Specifies the icon color of the component's `clearable` and `number-button-type` elements. \n- **--calcite-input-actions-icon-color-hover** - Specifies the icon color of the component's `clearable` and `number-button-type` elements. when hovered. \n- **--calcite-input-actions-icon-color-press** - Specifies the icon color of the component's `clearable` and `number-button-type` elements. when pressed. \n- **--calcite-input-loading-background-color** - Specifies the background color of the `loading` element. \n- **--calcite-input-loading-fill-color** - Specifies the fill color of the `loading` element. \n- **--calcite-input-number-background-color** - Specifies the background color of the component. \n- **--calcite-input-number-border-color** - Specifies the border color of the component. \n- **--calcite-input-number-corner-radius** - Specifies the border radius of the component. \n- **--calcite-input-number-height** - Specifies the height of the component. \n- **--calcite-input-number-placeholder-text-color** - Specifies the text color of the placeholder in the component. \n- **--calcite-input-number-text-color** - Specifies the text color of the component. \n- **--calcite-input-number-text-color-focus** - Specifies the text color of the component when focused. \n- **--calcite-input-prefix-background-color** - Specifies the background color of the prefix element. \n- **--calcite-input-prefix-size** - Specifies the width of the prefix element. \n- **--calcite-input-prefix-text-color** - Specifies the text color of the prefix element. \n- **--calcite-input-suffix-background-color** - Specifies the background color of the suffix element. \n- **--calcite-input-suffix-size** - Specifies the width of the suffix element. \n- **--calcite-input-suffix-text-color** - Specifies the text color of the suffix element. ",
+          "description": "### Events\n- **calciteInputNumberChange** - Fires each time a new value is typed and committed.\n- **calciteInputNumberInput** - Fires each time a new value is typed.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `selectText(): Promise<void>` - Selects the text of the component's `value`.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **action** - A slot for positioning a button next to the component.\n\n### CSS Properties\n- **--calcite-input-actions-background-color** - Specifies the background color of the component's `clearable` and `number-button-type` elements. \n- **--calcite-input-actions-background-color-hover** - Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered. \n- **--calcite-input-actions-background-color-press** - Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed. \n- **--calcite-input-actions-icon-color** - Specifies the icon color of the component's `clearable` and `number-button-type` elements. \n- **--calcite-input-actions-icon-color-hover** - Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered. \n- **--calcite-input-actions-icon-color-press** - Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed. \n- **--calcite-input-loading-background-color** - Specifies the background color of the `loading` element. \n- **--calcite-input-loading-fill-color** - Specifies the fill color of the `loading` element. \n- **--calcite-input-number-background-color** - Specifies the background color of the component. \n- **--calcite-input-number-border-color** - Specifies the border color of the component. \n- **--calcite-input-number-corner-radius** - Specifies the border radius of the component. \n- **--calcite-input-number-height** - Specifies the height of the component. \n- **--calcite-input-number-placeholder-text-color** - Specifies the text color of the placeholder in the component. \n- **--calcite-input-number-text-color** - Specifies the text color of the component. \n- **--calcite-input-number-text-color-focus** - Specifies the text color of the component when focused. \n- **--calcite-input-prefix-background-color** - Specifies the background color of the prefix element. \n- **--calcite-input-prefix-size** - Specifies the width of the prefix element. \n- **--calcite-input-prefix-text-color** - Specifies the text color of the prefix element. \n- **--calcite-input-suffix-background-color** - Specifies the background color of the suffix element. \n- **--calcite-input-suffix-size** - Specifies the width of the suffix element. \n- **--calcite-input-suffix-text-color** - Specifies the text color of the suffix element. ",
           "attributes": [
             {
               "name": "alignment",
@@ -14410,7 +14410,7 @@
         },
         {
           "name": "calcite-shell-panel",
-          "description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **action-bar** - A slot for adding a `calcite-action-bar` to the component.\n\n### CSS Properties\n- **--calcite-shell-panel-background-color** - Specifies the background color of the component. \n- **--calcite-shell-panel-border-color** - When `displayMode` is `\"float-all\"`, specifies the component's border color. \n- **--calcite-shell-panel-corner-radius** - When `displayMode` is `\"float-all\"`, specifies the component's corner radius \n- **--calcite-shell-panel-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the height of the component. \n- **--calcite-shell-panel-max-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the maximum height of the component. \n- **--calcite-shell-panel-max-width** - Specifies the maximum width of the component. \n- **--calcite-shell-panel-min-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the minimum height of the component. \n- **--calcite-shell-panel-min-width** - Specifies the minimum width of the component. \n- **--calcite-shell-panel-resize-background-color** - Specifies the background color of the resize handle. \n- **--calcite-shell-panel-resize-icon-color** - Specifies the text color of the resize handle. \n- **--calcite-shell-panel-shadow** - When `displayMode` is `\"float-all\"`, specifies the component's shadow. \n- **--calcite-shell-panel-text-color** - Specifies the text color of the component. \n- **--calcite-shell-panel-width** - Specifies the width of the component. \n- **--calcite-shell-panel-z-index** - Specifies the z-index value for the component. ",
+          "description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **action-bar** - A slot for adding a `calcite-action-bar` to the component.\n\n### CSS Properties\n- **--calcite-shell-panel-background-color** - Specifies the background color of the component. \n- **--calcite-shell-panel-border-color** - When `displayMode` is `\"float-all\"`, specifies the component's border color. \n- **--calcite-shell-panel-corner-radius** - When `displayMode` is `\"float-all\"`, specifies the component's corner radius. \n- **--calcite-shell-panel-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the height of the component. \n- **--calcite-shell-panel-max-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the maximum height of the component. \n- **--calcite-shell-panel-max-width** - Specifies the maximum width of the component. \n- **--calcite-shell-panel-min-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the minimum height of the component. \n- **--calcite-shell-panel-min-width** - Specifies the minimum width of the component. \n- **--calcite-shell-panel-resize-background-color** - Specifies the background color of the resize handle. \n- **--calcite-shell-panel-resize-icon-color** - Specifies the text color of the resize handle. \n- **--calcite-shell-panel-shadow** - When `displayMode` is `\"float-all\"`, specifies the component's shadow. \n- **--calcite-shell-panel-text-color** - Specifies the text color of the component. \n- **--calcite-shell-panel-width** - Specifies the width of the component. \n- **--calcite-shell-panel-z-index** - Specifies the z-index value for the component. ",
           "attributes": [
             {
               "name": "collapsed",
@@ -15702,7 +15702,7 @@
         },
         {
           "name": "calcite-stepper",
-          "description": "### Events\n- **calciteStepperChange** - Fires when the active `calcite-stepper-item` changes.\n- **calciteStepperItemChange** - Fires when the active `calcite-stepper-item` changes.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `endStep(): Promise<void>` - Set the last `calcite-stepper-item` as active.\n- `goToStep(step: number): Promise<void>` - Set a specified `calcite-stepper-item` as active.\n- `nextStep(): Promise<void>` - Set the next `calcite-stepper-item` as active.\n- `prevStep(): Promise<void>` - Set the previous `calcite-stepper-item` as active.\n- `startStep(): Promise<void>` - Set the first `calcite-stepper-item` as active.\n\n### Slots\n- _default_ - A slot for adding `calcite-stepper-item` elements.\n\n### CSS Properties\n- **--calcite-stepper-bar-gap** - Specifies the space between items in the step bar. \n- **--calcite-stepper-bar-inactive-fill-color** - Specifies the fill color of items in the step bar. \n- **--calcite-stepper-bar-active-fill-color** - Specifies the fill color of active items in the step bar. \n- **--calcite-stepper-bar-complete-fill-color** - Specifies the fill color of complete items in the step bar. \n- **--calcite-stepper-bar-error-fill-color** - Specifies the fill color of error items in the step bar. ",
+          "description": "### Events\n- **calciteStepperChange** - Fires when the active `calcite-stepper-item` changes.\n- **calciteStepperItemChange** - Fires when the active `calcite-stepper-item` changes.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `endStep(): Promise<void>` - Set the last `calcite-stepper-item` as active.\n- `goToStep(step: number): Promise<void>` - Set a specified `calcite-stepper-item` as active.\n- `nextStep(): Promise<void>` - Set the next `calcite-stepper-item` as active.\n- `prevStep(): Promise<void>` - Set the previous `calcite-stepper-item` as active.\n- `startStep(): Promise<void>` - Set the first `calcite-stepper-item` as active.\n\n### Slots\n- _default_ - A slot for adding `calcite-stepper-item` elements.\n\n### CSS Properties\n- **--calcite-stepper-bar-gap** - Specifies the space between items in the component. \n- **--calcite-stepper-bar-inactive-fill-color** - Specifies the fill color of items in the component. \n- **--calcite-stepper-bar-active-fill-color** - Specifies the fill color of active items in the component. \n- **--calcite-stepper-bar-complete-fill-color** - Specifies the fill color of complete items in the component. \n- **--calcite-stepper-bar-error-fill-color** - Specifies the fill color of error items in the component. ",
           "attributes": [
             {
               "name": "icon",
@@ -15828,7 +15828,7 @@
         },
         {
           "name": "calcite-stepper-item",
-          "description": "### Events\n- **calciteStepperItemSelect** - Fires when the active `calcite-stepper-item` changes.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding custom content.\n\n### CSS Properties\n- **--calcite-stepper-item-background-color-press** - Specifies the component's background-color when active. \n- **--calcite-stepper-item-header-text-color** - Specifies the component's header text color. \n- **--calcite-stepper-item-header-text-color-hover** - Specifies the component's header text color when hovered or focused. \n- **--calcite-stepper-item-selected-header-text-color** - Specifies the component's header text color when selected. \n- **--calcite-stepper-item-icon-color** - Specifies the component's icon color. \n- **--calcite-stepper-item-complete-icon-color** - Specifies the component's icon color when complete. \n- **--calcite-stepper-item-error-icon-color** - Specifies the component's icon and number color when in error. \n- **--calcite-stepper-item-selected-icon-color** - Specifies the component's icon and number color when selected. \n- **--calcite-stepper-item-description-text-color** - Specifies the component's description and number text color. \n- **--calcite-stepper-item-description-text-color-hover** - Specifies the component's description text color when hovered, focused or selected. \n- **--calcite-stepper-bar-gap** - Specifies the component's bottom spacing. \n- **--calcite-stepper-bar-fill-color** - Specifies the component's fill color. \n- **--calcite-stepper-bar-fill-color-hover** - Specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-complete-fill-color** - Specifies the component's fill color when complete. \n- **--calcite-stepper-bar-complete-fill-color-hover** - When item is complete, specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-error-fill-color** - Specifies the component's fill color when in error. \n- **--calcite-stepper-bar-error-fill-color-hover** - When item is error, specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-selected-fill-color** - Specifies the component's fill color when selected. ",
+          "description": "### Events\n- **calciteStepperItemSelect** - Fires when the active `calcite-stepper-item` changes.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding custom content.\n\n### CSS Properties\n- **--calcite-stepper-item-background-color-press** - Specifies the component's background-color when active. \n- **--calcite-stepper-item-header-text-color** - Specifies the component's header text color. \n- **--calcite-stepper-item-header-text-color-hover** - Specifies the component's header text color when hovered or focused. \n- **--calcite-stepper-item-selected-header-text-color** - Specifies the component's header text color when selected. \n- **--calcite-stepper-item-icon-color** - Specifies the component's icon color. \n- **--calcite-stepper-item-complete-icon-color** - Specifies the component's icon color when complete. \n- **--calcite-stepper-item-error-icon-color** - Specifies the component's icon and number color when in error. \n- **--calcite-stepper-item-selected-icon-color** - Specifies the component's icon and number color when selected. \n- **--calcite-stepper-item-description-text-color** - Specifies the component's description and number text color. \n- **--calcite-stepper-item-description-text-color-hover** - Specifies the component's description text color when hovered, focused or selected. \n- **--calcite-stepper-bar-gap** - Specifies the component's bottom spacing. \n- **--calcite-stepper-bar-fill-color** - Specifies the component's fill color. \n- **--calcite-stepper-bar-fill-color-hover** - Specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-complete-fill-color** - Specifies the component's fill color when complete. \n- **--calcite-stepper-bar-complete-fill-color-hover** - When the component is `complete`, specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-error-fill-color** - Specifies the component's fill color when in error. \n- **--calcite-stepper-bar-error-fill-color-hover** - When the component contains an `error`, specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-selected-fill-color** - Specifies the component's fill color when selected. ",
           "attributes": [
             {
               "name": "complete",
@@ -17817,7 +17817,7 @@
         },
         {
           "name": "calcite-time-picker",
-          "description": "### Events\n- **calciteTimePickerChange** - Fires when a user changes the component's time\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component's first focusable element.\n\n### CSS Properties\n- **--calcite-time-picker-background-color** - The background color of the time picker. \n- **--calcite-time-picker-corner-radius** - The border radius of the time picker. \n- **--calcite-time-picker-button-background-color-hover** - Specifies the button's background color when hovered or focused. \n- **--calcite-time-picker-button-background-color-press** - Specifies the button's background color when active. \n- **--calcite-time-picker-color** - Specifies the component's text color. \n- **--calcite-time-picker-icon-color** - Specifies the component's icon color. \n- **--calcite-time-picker-input-border-color-press** - Specifies the input's border color when active. \n- **--calcite-time-picker-input-border-color-hover** - Specifies the input's border color when hovered. ",
+          "description": "### Events\n- **calciteTimePickerChange** - Fires when a user changes the component's time\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component's first focusable element.\n\n### CSS Properties\n- **--calcite-time-picker-background-color** - Specifies the background color of the time picker. \n- **--calcite-time-picker-corner-radius** - Specifies the border radius of the time picker. \n- **--calcite-time-picker-button-background-color-hover** - Specifies the button's background color when hovered or focused. \n- **--calcite-time-picker-button-background-color-press** - Specifies the button's background color when active. \n- **--calcite-time-picker-color** - Specifies the component's text color. \n- **--calcite-time-picker-icon-color** - Specifies the component's icon color. \n- **--calcite-time-picker-input-border-color-press** - Specifies the input's border color when active. \n- **--calcite-time-picker-input-border-color-hover** - Specifies the input's border color when hovered. ",
           "attributes": [
             {
               "name": "hour-format",
@@ -19693,11 +19693,11 @@
         },
         {
           "name": "--calcite-input-actions-background-color-hover",
-          "description": "Specifies the background color of the component's `clearable` and `number-button-type` elements. when hovered."
+          "description": "Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered."
         },
         {
           "name": "--calcite-input-actions-background-color-press",
-          "description": "Specifies the background color of the component's `clearable` and `number-button-type` elements. when pressed."
+          "description": "Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed."
         },
         {
           "name": "--calcite-input-actions-icon-color",
@@ -19705,11 +19705,11 @@
         },
         {
           "name": "--calcite-input-actions-icon-color-hover",
-          "description": "Specifies the icon color of the component's `clearable` and `number-button-type` elements. when hovered."
+          "description": "Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered."
         },
         {
           "name": "--calcite-input-actions-icon-color-press",
-          "description": "Specifies the icon color of the component's `clearable` and `number-button-type` elements. when pressed."
+          "description": "Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed."
         },
         {
           "name": "--calcite-input-loading-background-color",
@@ -20353,7 +20353,7 @@
         },
         {
           "name": "--calcite-shell-panel-corner-radius",
-          "description": "When `displayMode` is `\"float-all\"`, specifies the component's corner radius"
+          "description": "When `displayMode` is `\"float-all\"`, specifies the component's corner radius."
         },
         {
           "name": "--calcite-shell-panel-height",
@@ -20449,23 +20449,23 @@
         },
         {
           "name": "--calcite-stepper-bar-gap",
-          "description": "Specifies the space between items in the step bar."
+          "description": "Specifies the space between items in the component."
         },
         {
           "name": "--calcite-stepper-bar-inactive-fill-color",
-          "description": "Specifies the fill color of items in the step bar."
+          "description": "Specifies the fill color of items in the component."
         },
         {
           "name": "--calcite-stepper-bar-active-fill-color",
-          "description": "Specifies the fill color of active items in the step bar."
+          "description": "Specifies the fill color of active items in the component."
         },
         {
           "name": "--calcite-stepper-bar-complete-fill-color",
-          "description": "Specifies the fill color of complete items in the step bar."
+          "description": "Specifies the fill color of complete items in the component."
         },
         {
           "name": "--calcite-stepper-bar-error-fill-color",
-          "description": "Specifies the fill color of error items in the step bar."
+          "description": "Specifies the fill color of error items in the component."
         },
         {
           "name": "--calcite-stepper-item-background-color-press",
@@ -20525,7 +20525,7 @@
         },
         {
           "name": "--calcite-stepper-bar-complete-fill-color-hover",
-          "description": "When item is complete, specifies the component's fill color when hovered or focused."
+          "description": "When the component is `complete`, specifies the component's fill color when hovered or focused."
         },
         {
           "name": "--calcite-stepper-bar-error-fill-color",
@@ -20533,7 +20533,7 @@
         },
         {
           "name": "--calcite-stepper-bar-error-fill-color-hover",
-          "description": "When item is error, specifies the component's fill color when hovered or focused."
+          "description": "When the component contains an `error`, specifies the component's fill color when hovered or focused."
         },
         {
           "name": "--calcite-stepper-bar-selected-fill-color",
@@ -20753,11 +20753,11 @@
         },
         {
           "name": "--calcite-time-picker-background-color",
-          "description": "The background color of the time picker."
+          "description": "Specifies the background color of the time picker."
         },
         {
           "name": "--calcite-time-picker-corner-radius",
-          "description": "The border radius of the time picker."
+          "description": "Specifies the border radius of the time picker."
         },
         {
           "name": "--calcite-time-picker-button-background-color-hover",

package/dist/extras/vscode-data.json

@@ -4108,7 +4108,7 @@
     },
     {
       "name": "calcite-input-number",
-      "description": "### Events\n- **calciteInputNumberChange** - Fires each time a new value is typed and committed.\n- **calciteInputNumberInput** - Fires each time a new value is typed.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `selectText(): Promise<void>` - Selects the text of the component's `value`.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **action** - A slot for positioning a button next to the component.\n\n### CSS Properties\n- **--calcite-input-actions-background-color** - Specifies the background color of the component's `clearable` and `number-button-type` elements. \n- **--calcite-input-actions-background-color-hover** - Specifies the background color of the component's `clearable` and `number-button-type` elements. when hovered. \n- **--calcite-input-actions-background-color-press** - Specifies the background color of the component's `clearable` and `number-button-type` elements. when pressed. \n- **--calcite-input-actions-icon-color** - Specifies the icon color of the component's `clearable` and `number-button-type` elements. \n- **--calcite-input-actions-icon-color-hover** - Specifies the icon color of the component's `clearable` and `number-button-type` elements. when hovered. \n- **--calcite-input-actions-icon-color-press** - Specifies the icon color of the component's `clearable` and `number-button-type` elements. when pressed. \n- **--calcite-input-loading-background-color** - Specifies the background color of the `loading` element. \n- **--calcite-input-loading-fill-color** - Specifies the fill color of the `loading` element. \n- **--calcite-input-number-background-color** - Specifies the background color of the component. \n- **--calcite-input-number-border-color** - Specifies the border color of the component. \n- **--calcite-input-number-corner-radius** - Specifies the border radius of the component. \n- **--calcite-input-number-height** - Specifies the height of the component. \n- **--calcite-input-number-placeholder-text-color** - Specifies the text color of the placeholder in the component. \n- **--calcite-input-number-text-color** - Specifies the text color of the component. \n- **--calcite-input-number-text-color-focus** - Specifies the text color of the component when focused. \n- **--calcite-input-prefix-background-color** - Specifies the background color of the prefix element. \n- **--calcite-input-prefix-size** - Specifies the width of the prefix element. \n- **--calcite-input-prefix-text-color** - Specifies the text color of the prefix element. \n- **--calcite-input-suffix-background-color** - Specifies the background color of the suffix element. \n- **--calcite-input-suffix-size** - Specifies the width of the suffix element. \n- **--calcite-input-suffix-text-color** - Specifies the text color of the suffix element. ",
+      "description": "### Events\n- **calciteInputNumberChange** - Fires each time a new value is typed and committed.\n- **calciteInputNumberInput** - Fires each time a new value is typed.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `selectText(): Promise<void>` - Selects the text of the component's `value`.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **action** - A slot for positioning a button next to the component.\n\n### CSS Properties\n- **--calcite-input-actions-background-color** - Specifies the background color of the component's `clearable` and `number-button-type` elements. \n- **--calcite-input-actions-background-color-hover** - Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered. \n- **--calcite-input-actions-background-color-press** - Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed. \n- **--calcite-input-actions-icon-color** - Specifies the icon color of the component's `clearable` and `number-button-type` elements. \n- **--calcite-input-actions-icon-color-hover** - Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered. \n- **--calcite-input-actions-icon-color-press** - Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed. \n- **--calcite-input-loading-background-color** - Specifies the background color of the `loading` element. \n- **--calcite-input-loading-fill-color** - Specifies the fill color of the `loading` element. \n- **--calcite-input-number-background-color** - Specifies the background color of the component. \n- **--calcite-input-number-border-color** - Specifies the border color of the component. \n- **--calcite-input-number-corner-radius** - Specifies the border radius of the component. \n- **--calcite-input-number-height** - Specifies the height of the component. \n- **--calcite-input-number-placeholder-text-color** - Specifies the text color of the placeholder in the component. \n- **--calcite-input-number-text-color** - Specifies the text color of the component. \n- **--calcite-input-number-text-color-focus** - Specifies the text color of the component when focused. \n- **--calcite-input-prefix-background-color** - Specifies the background color of the prefix element. \n- **--calcite-input-prefix-size** - Specifies the width of the prefix element. \n- **--calcite-input-prefix-text-color** - Specifies the text color of the prefix element. \n- **--calcite-input-suffix-background-color** - Specifies the background color of the suffix element. \n- **--calcite-input-suffix-size** - Specifies the width of the suffix element. \n- **--calcite-input-suffix-text-color** - Specifies the text color of the suffix element. ",
       "attributes": [
         {
           "name": "alignment",
@@ -6943,7 +6943,7 @@
     },
     {
       "name": "calcite-shell-panel",
-      "description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **action-bar** - A slot for adding a `calcite-action-bar` to the component.\n\n### CSS Properties\n- **--calcite-shell-panel-background-color** - Specifies the background color of the component. \n- **--calcite-shell-panel-border-color** - When `displayMode` is `\"float-all\"`, specifies the component's border color. \n- **--calcite-shell-panel-corner-radius** - When `displayMode` is `\"float-all\"`, specifies the component's corner radius \n- **--calcite-shell-panel-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the height of the component. \n- **--calcite-shell-panel-max-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the maximum height of the component. \n- **--calcite-shell-panel-max-width** - Specifies the maximum width of the component. \n- **--calcite-shell-panel-min-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the minimum height of the component. \n- **--calcite-shell-panel-min-width** - Specifies the minimum width of the component. \n- **--calcite-shell-panel-resize-background-color** - Specifies the background color of the resize handle. \n- **--calcite-shell-panel-resize-icon-color** - Specifies the text color of the resize handle. \n- **--calcite-shell-panel-shadow** - When `displayMode` is `\"float-all\"`, specifies the component's shadow. \n- **--calcite-shell-panel-text-color** - Specifies the text color of the component. \n- **--calcite-shell-panel-width** - Specifies the width of the component. \n- **--calcite-shell-panel-z-index** - Specifies the z-index value for the component. ",
+      "description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **action-bar** - A slot for adding a `calcite-action-bar` to the component.\n\n### CSS Properties\n- **--calcite-shell-panel-background-color** - Specifies the background color of the component. \n- **--calcite-shell-panel-border-color** - When `displayMode` is `\"float-all\"`, specifies the component's border color. \n- **--calcite-shell-panel-corner-radius** - When `displayMode` is `\"float-all\"`, specifies the component's corner radius. \n- **--calcite-shell-panel-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the height of the component. \n- **--calcite-shell-panel-max-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the maximum height of the component. \n- **--calcite-shell-panel-max-width** - Specifies the maximum width of the component. \n- **--calcite-shell-panel-min-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the minimum height of the component. \n- **--calcite-shell-panel-min-width** - Specifies the minimum width of the component. \n- **--calcite-shell-panel-resize-background-color** - Specifies the background color of the resize handle. \n- **--calcite-shell-panel-resize-icon-color** - Specifies the text color of the resize handle. \n- **--calcite-shell-panel-shadow** - When `displayMode` is `\"float-all\"`, specifies the component's shadow. \n- **--calcite-shell-panel-text-color** - Specifies the text color of the component. \n- **--calcite-shell-panel-width** - Specifies the width of the component. \n- **--calcite-shell-panel-z-index** - Specifies the z-index value for the component. ",
       "attributes": [
         {
           "name": "collapsed",
@@ -7601,7 +7601,7 @@
     },
     {
       "name": "calcite-stepper",
-      "description": "### Events\n- **calciteStepperChange** - Fires when the active `calcite-stepper-item` changes.\n- **calciteStepperItemChange** - Fires when the active `calcite-stepper-item` changes.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `endStep(): Promise<void>` - Set the last `calcite-stepper-item` as active.\n- `goToStep(step: number): Promise<void>` - Set a specified `calcite-stepper-item` as active.\n- `nextStep(): Promise<void>` - Set the next `calcite-stepper-item` as active.\n- `prevStep(): Promise<void>` - Set the previous `calcite-stepper-item` as active.\n- `startStep(): Promise<void>` - Set the first `calcite-stepper-item` as active.\n\n### Slots\n- _default_ - A slot for adding `calcite-stepper-item` elements.\n\n### CSS Properties\n- **--calcite-stepper-bar-gap** - Specifies the space between items in the step bar. \n- **--calcite-stepper-bar-inactive-fill-color** - Specifies the fill color of items in the step bar. \n- **--calcite-stepper-bar-active-fill-color** - Specifies the fill color of active items in the step bar. \n- **--calcite-stepper-bar-complete-fill-color** - Specifies the fill color of complete items in the step bar. \n- **--calcite-stepper-bar-error-fill-color** - Specifies the fill color of error items in the step bar. ",
+      "description": "### Events\n- **calciteStepperChange** - Fires when the active `calcite-stepper-item` changes.\n- **calciteStepperItemChange** - Fires when the active `calcite-stepper-item` changes.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `endStep(): Promise<void>` - Set the last `calcite-stepper-item` as active.\n- `goToStep(step: number): Promise<void>` - Set a specified `calcite-stepper-item` as active.\n- `nextStep(): Promise<void>` - Set the next `calcite-stepper-item` as active.\n- `prevStep(): Promise<void>` - Set the previous `calcite-stepper-item` as active.\n- `startStep(): Promise<void>` - Set the first `calcite-stepper-item` as active.\n\n### Slots\n- _default_ - A slot for adding `calcite-stepper-item` elements.\n\n### CSS Properties\n- **--calcite-stepper-bar-gap** - Specifies the space between items in the component. \n- **--calcite-stepper-bar-inactive-fill-color** - Specifies the fill color of items in the component. \n- **--calcite-stepper-bar-active-fill-color** - Specifies the fill color of active items in the component. \n- **--calcite-stepper-bar-complete-fill-color** - Specifies the fill color of complete items in the component. \n- **--calcite-stepper-bar-error-fill-color** - Specifies the fill color of error items in the component. ",
       "attributes": [
         {
           "name": "icon",
@@ -7663,7 +7663,7 @@
     },
     {
       "name": "calcite-stepper-item",
-      "description": "### Events\n- **calciteStepperItemSelect** - Fires when the active `calcite-stepper-item` changes.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding custom content.\n\n### CSS Properties\n- **--calcite-stepper-item-background-color-press** - Specifies the component's background-color when active. \n- **--calcite-stepper-item-header-text-color** - Specifies the component's header text color. \n- **--calcite-stepper-item-header-text-color-hover** - Specifies the component's header text color when hovered or focused. \n- **--calcite-stepper-item-selected-header-text-color** - Specifies the component's header text color when selected. \n- **--calcite-stepper-item-icon-color** - Specifies the component's icon color. \n- **--calcite-stepper-item-complete-icon-color** - Specifies the component's icon color when complete. \n- **--calcite-stepper-item-error-icon-color** - Specifies the component's icon and number color when in error. \n- **--calcite-stepper-item-selected-icon-color** - Specifies the component's icon and number color when selected. \n- **--calcite-stepper-item-description-text-color** - Specifies the component's description and number text color. \n- **--calcite-stepper-item-description-text-color-hover** - Specifies the component's description text color when hovered, focused or selected. \n- **--calcite-stepper-bar-gap** - Specifies the component's bottom spacing. \n- **--calcite-stepper-bar-fill-color** - Specifies the component's fill color. \n- **--calcite-stepper-bar-fill-color-hover** - Specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-complete-fill-color** - Specifies the component's fill color when complete. \n- **--calcite-stepper-bar-complete-fill-color-hover** - When item is complete, specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-error-fill-color** - Specifies the component's fill color when in error. \n- **--calcite-stepper-bar-error-fill-color-hover** - When item is error, specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-selected-fill-color** - Specifies the component's fill color when selected. ",
+      "description": "### Events\n- **calciteStepperItemSelect** - Fires when the active `calcite-stepper-item` changes.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding custom content.\n\n### CSS Properties\n- **--calcite-stepper-item-background-color-press** - Specifies the component's background-color when active. \n- **--calcite-stepper-item-header-text-color** - Specifies the component's header text color. \n- **--calcite-stepper-item-header-text-color-hover** - Specifies the component's header text color when hovered or focused. \n- **--calcite-stepper-item-selected-header-text-color** - Specifies the component's header text color when selected. \n- **--calcite-stepper-item-icon-color** - Specifies the component's icon color. \n- **--calcite-stepper-item-complete-icon-color** - Specifies the component's icon color when complete. \n- **--calcite-stepper-item-error-icon-color** - Specifies the component's icon and number color when in error. \n- **--calcite-stepper-item-selected-icon-color** - Specifies the component's icon and number color when selected. \n- **--calcite-stepper-item-description-text-color** - Specifies the component's description and number text color. \n- **--calcite-stepper-item-description-text-color-hover** - Specifies the component's description text color when hovered, focused or selected. \n- **--calcite-stepper-bar-gap** - Specifies the component's bottom spacing. \n- **--calcite-stepper-bar-fill-color** - Specifies the component's fill color. \n- **--calcite-stepper-bar-fill-color-hover** - Specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-complete-fill-color** - Specifies the component's fill color when complete. \n- **--calcite-stepper-bar-complete-fill-color-hover** - When the component is `complete`, specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-error-fill-color** - Specifies the component's fill color when in error. \n- **--calcite-stepper-bar-error-fill-color-hover** - When the component contains an `error`, specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-selected-fill-color** - Specifies the component's fill color when selected. ",
       "attributes": [
         {
           "name": "complete",
@@ -8591,7 +8591,7 @@
     },
     {
       "name": "calcite-time-picker",
-      "description": "### Events\n- **calciteTimePickerChange** - Fires when a user changes the component's time\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component's first focusable element.\n\n### CSS Properties\n- **--calcite-time-picker-background-color** - The background color of the time picker. \n- **--calcite-time-picker-corner-radius** - The border radius of the time picker. \n- **--calcite-time-picker-button-background-color-hover** - Specifies the button's background color when hovered or focused. \n- **--calcite-time-picker-button-background-color-press** - Specifies the button's background color when active. \n- **--calcite-time-picker-color** - Specifies the component's text color. \n- **--calcite-time-picker-icon-color** - Specifies the component's icon color. \n- **--calcite-time-picker-input-border-color-press** - Specifies the input's border color when active. \n- **--calcite-time-picker-input-border-color-hover** - Specifies the input's border color when hovered. ",
+      "description": "### Events\n- **calciteTimePickerChange** - Fires when a user changes the component's time\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component's first focusable element.\n\n### CSS Properties\n- **--calcite-time-picker-background-color** - Specifies the background color of the time picker. \n- **--calcite-time-picker-corner-radius** - Specifies the border radius of the time picker. \n- **--calcite-time-picker-button-background-color-hover** - Specifies the button's background color when hovered or focused. \n- **--calcite-time-picker-button-background-color-press** - Specifies the button's background color when active. \n- **--calcite-time-picker-color** - Specifies the component's text color. \n- **--calcite-time-picker-icon-color** - Specifies the component's icon color. \n- **--calcite-time-picker-input-border-color-press** - Specifies the input's border color when active. \n- **--calcite-time-picker-input-border-color-hover** - Specifies the input's border color when hovered. ",
       "attributes": [
         {
           "name": "hour-format",

package/dist/index.js

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0 */
+v3.2.1-next.1 */
 import { s as setAssetPath$1 } from "./chunks/runtime.js";
 import { g } from "./chunks/runtime.js";
 let assetPathChanged = false;

package/dist/loader.js

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0 */
+v3.2.1-next.1 */
 import "@lit-labs/ssr-client/lit-element-hydrate-support.js";
 import { r as runtime } from "./chunks/runtime.js";
 import { makeDefineCustomElements } from "@arcgis/lumina";

package/dist/utils/time.d.ts

@@ -4,15 +4,15 @@ export type EffectiveHourFormat = "12" | "24";
 export type HourFormat = "user" | EffectiveHourFormat;
 export declare const hourFormats: EffectiveHourFormat[];
 export interface LocalizedTime {
-    localizedHour: string;
-    localizedHourSuffix: string;
-    localizedMinute: string;
-    localizedMinuteSuffix: string;
-    localizedSecond: string;
-    localizedDecimalSeparator: string;
-    localizedFractionalSecond: string;
-    localizedSecondSuffix: string;
-    localizedMeridiem: string;
+    hour: string;
+    hourSuffix: string;
+    minute: string;
+    minuteSuffix: string;
+    second: string;
+    decimalSeparator: string;
+    fractionalSecond: string;
+    secondSuffix: string;
+    meridiem: string;
 }
 export type Meridiem = "AM" | "PM";
 export type MinuteOrSecond = "minute" | "second";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "3.2.0",
+  "version": "3.2.1-next.1",
   "description": "Web Components for Esri's Calcite Design System.",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "repository": {
@@ -75,9 +75,9 @@
     "util:update-3rd-party-licenses": "tsx ../../support/createThirdPartyLicenses.ts"
   },
   "dependencies": {
-    "@arcgis/components-utils": "^4.33.0-next.121",
-    "@arcgis/lumina": "^4.33.0-next.121",
-    "@esri/calcite-ui-icons": "4.2.0",
+    "@arcgis/components-utils": "^4.33.0-next.129",
+    "@arcgis/lumina": "^4.33.0-next.129",
+    "@esri/calcite-ui-icons": "4.2.1-next.0",
     "@floating-ui/dom": "^1.6.12",
     "@floating-ui/utils": "^0.2.8",
     "@types/sortablejs": "^1.15.8",
@@ -92,10 +92,10 @@
     "type-fest": "^4.30.1"
   },
   "devDependencies": {
-    "@arcgis/lumina-compiler": "^4.33.0-next.121",
-    "@esri/calcite-design-tokens": "3.1.0",
-    "@esri/calcite-tailwind-preset": "1.0.0",
-    "@esri/eslint-plugin-calcite-components": "2.0.2",
+    "@arcgis/lumina-compiler": "^4.33.0-next.129",
+    "@esri/calcite-design-tokens": "3.1.1-next.0",
+    "@esri/calcite-tailwind-preset": "1.0.1-next.1",
+    "@esri/eslint-plugin-calcite-components": "2.0.3-next.0",
     "@vitest/browser": "3.1.3",
     "playwright": "1.52.0",
     "vitest": "3.1.3"
@@ -111,5 +111,5 @@
     "dist/docs/vscode.html-custom-data.json"
   ],
   "web-types": "dist/docs/web-types.json",
-  "gitHead": "4f2d7eb583e89b688c55a83d11a3a4cf667d7d7f"
+  "gitHead": "5991a1e2ca7303e398f4be8814cf12a5cb78cff4"
 }

package/dist/calcite/2VWSWHUO.js

@@ -1,4 +0,0 @@
-/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
-See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0 */
-import{a as x,b as y}from"./XEDUET37.js";import{d as v}from"./VGL3WVHU.js";import{a as k}from"./WQASJHDE.js";import{a as f}from"./BTG3ZQHR.js";import{E as b,F as n,R as m,c as p,d as l,q as g}from"./A6PXYMIR.js";var i={description:"description",descriptionOnly:"description-only",heading:"heading",headingOnly:"heading-only",icon:"icon",iconOnly:"icon-only",inputAlignmentEnd:"input-alignment-end",inputAlignmentStart:"input-alignment-start",inputEnabled:"input-enabled",largeVisual:"large-visual",tile:"tile",tileContentContainer:"tile-content-container",tileContent:"tile-content",tileDescription:"tile-description",tileHeading:"tile-heading",tileLargeVisual:"tile--large-visual",widthAuto:"width-auto",widthFull:"width-full"},z=p`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host .container{background-color:var(--calcite-color-foreground-1);box-shadow:0 0 0 1px var(--calcite-color-border-2);box-sizing:border-box;cursor:pointer;display:inline-block;block-size:100%;max-inline-size:300px;padding:.75rem;position:relative;vertical-align:top;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}:host .container.checked{z-index:var(--calcite-z-index);box-shadow:0 0 0 1px var(--calcite-color-brand)}:host .container.heading-only{align-items:center}:host .container:not(.input-enabled) ::slotted(calcite-checkbox),:host .container:not(.input-enabled) ::slotted(calcite-radio-button){position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host .container.focused{outline-color:transparent}:host .container.focused:not(.disabled):not(.input-enabled){outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-offset:-4px;box-shadow:0 0 0 1px var(--calcite-color-brand),inset 0 0 0 2px var(--calcite-color-foreground-1)}:host .container.input-enabled.input-alignment-start.width-auto.heading-only,:host .container.input-enabled.input-alignment-start.width-auto.icon-only,:host .container.input-enabled.input-alignment-start.width-auto.description-only,:host .container.input-enabled.input-alignment-start.width-auto.heading.description,:host .container.input-enabled.input-alignment-start.width-auto.icon.description,:host .container.input-enabled.input-alignment-start.width-auto.heading.icon.description{display:inline-grid;grid-template-columns:max-content 1fr}:host .container.input-enabled.input-alignment-start.heading-only,:host .container.input-enabled.input-alignment-start.icon-only,:host .container.input-enabled.input-alignment-start.description-only,:host .container.input-enabled.input-alignment-start.heading.description,:host .container.input-enabled.input-alignment-start.icon.description,:host .container.input-enabled.input-alignment-start.heading.icon.description{gap:.75rem}:host .container.input-enabled.input-alignment-start .tile{order:1}:host .container.input-enabled.input-alignment-start.large-visual ::slotted(calcite-checkbox),:host .container.input-enabled.input-alignment-start.large-visual ::slotted(calcite-radio-button){position:absolute;inset-block-start:.75rem;inset-inline-start:.75rem}:host .container.input-enabled.input-alignment-end.width-auto.heading-only,:host .container.input-enabled.input-alignment-end.width-auto.icon-only{display:inline-grid;grid-gap:.75rem;grid-template-columns:max-content 1fr}:host .container.input-enabled.input-alignment-end.heading-only,:host .container.input-enabled.input-alignment-end.icon-only{gap:.75rem}:host .container.input-enabled.input-alignment-end.description-only ::slotted(calcite-checkbox),:host .container.input-enabled.input-alignment-end.description-only ::slotted(calcite-radio-button),:host .container.input-enabled.input-alignment-end.heading.description ::slotted(calcite-checkbox),:host .container.input-enabled.input-alignment-end.heading.description ::slotted(calcite-radio-button),:host .container.input-enabled.input-alignment-end.icon.description ::slotted(calcite-checkbox),:host .container.input-enabled.input-alignment-end.icon.description ::slotted(calcite-radio-button),:host .container.input-enabled.input-alignment-end.heading.icon.description ::slotted(calcite-checkbox),:host .container.input-enabled.input-alignment-end.heading.icon.description ::slotted(calcite-radio-button){position:absolute;inset-block-start:.75rem;inset-inline-end:.75rem}:host .container.input-enabled.input-alignment-end.large-visual ::slotted(calcite-checkbox),:host .container.input-enabled.input-alignment-end.large-visual ::slotted(calcite-radio-button){position:absolute;inset-block-start:.75rem;inset-inline-end:.75rem}:host .container.width-full{display:flex;max-inline-size:none}:host .container.width-full .tile{flex:1 1 auto}.tile{pointer-events:none;box-sizing:border-box;display:flex;-webkit-user-select:none;user-select:none;flex-direction:column;gap:.5rem;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tile-content-container{display:flex;inline-size:100%;align-items:stretch;padding:0;color:var(--calcite-color-text-2);outline-color:transparent}.tile-content{display:flex;flex:1 1 auto;flex-direction:column;gap:.5rem;inline-size:10%}.tile-heading{pointer-events:none;overflow-wrap:break-word;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tile-description{pointer-events:none;overflow-wrap:break-word;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-color-text-3);transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tile--large-visual{display:grid;justify-content:center;text-align:center;min-block-size:12rem}.tile--large-visual .icon{align-self:flex-end}.tile--large-visual calcite-icon{block-size:64px;inline-size:64px}.tile--large-visual .tile-content-container{align-self:center}:host(:hover) .container:not(.input-enabled){box-shadow:0 0 0 1px var(--calcite-color-brand)}:host(:hover) .tile-heading,.checked .tile-heading{color:var(--calcite-color-text-1)}:host(:hover) .tile-description,.checked .tile-description{color:var(--calcite-color-text-2)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`,s=class extends b{constructor(){super(),this.guid=`calcite-tile-select-${f()}`,this.focused=!1,this.checked=!1,this.disabled=!1,this.iconFlipRtl=!1,this.inputAlignment="start",this.inputEnabled=!1,this.type="radio",this.width="auto",this.calciteTileSelectChange=g({cancelable:!1}),this.listen("calciteCheckboxChange",this.checkboxChangeHandler),this.listen("calciteInternalCheckboxFocus",this.checkboxFocusBlurHandler),this.listen("calciteInternalCheckboxBlur",this.checkboxFocusBlurHandler),this.listen("calciteRadioButtonChange",this.radioButtonChangeHandler),this.listen("calciteInternalRadioButtonCheckedChange",this.radioButtonCheckedChangeHandler),this.listen("calciteInternalRadioButtonFocus",this.radioButtonFocusBlurHandler),this.listen("calciteInternalRadioButtonBlur",this.radioButtonFocusBlurHandler),this.listen("click",this.clickHandler),this.listen("pointerenter",this.pointerEnterHandler),this.listen("pointerleave",this.pointerLeaveHandler)}static{this.properties={focused:[16,{},{state:!0}],checked:[7,{},{reflect:!0,type:Boolean}],description:[3,{},{reflect:!0}],disabled:[7,{},{reflect:!0,type:Boolean}],heading:[3,{},{reflect:!0}],icon:[3,{},{reflect:!0}],iconFlipRtl:[7,{},{reflect:!0,type:Boolean}],inputAlignment:[3,{},{reflect:!0}],inputEnabled:[7,{},{reflect:!0,type:Boolean}],name:[3,{},{reflect:!0}],type:[3,{},{reflect:!0}],value:1,width:[3,{},{reflect:!0}]}}static{this.styles=z}async setFocus(){return await v(this),this.input?.setFocus()}connectedCallback(){super.connectedCallback(),this.renderInput()}load(){k.deprecated("component",{name:"tile-select",removalVersion:4,suggested:["tile","tile-group"]})}willUpdate(t){t.has("checked")&&(this.hasUpdated||this.checked!==!1)&&(this.input.checked=this.checked),t.has("name")&&(this.input.name=this.name)}updated(){x(this)}disconnectedCallback(){super.disconnectedCallback(),this.input?.remove()}checkboxChangeHandler(t){let e=t.target;e===this.input&&(this.checked=e.checked),t.stopPropagation(),this.calciteTileSelectChange.emit()}checkboxFocusBlurHandler(t){t.target===this.input&&(this.focused=t.detail),t.stopPropagation()}radioButtonChangeHandler(t){let e=t.target;e===this.input&&(this.checked=e.checked),t.stopPropagation(),this.calciteTileSelectChange.emit()}radioButtonCheckedChangeHandler(t){let e=t.target;e===this.input&&(this.checked=e.checked),t.stopPropagation()}radioButtonFocusBlurHandler(t){let e=t.target;e===this.input&&(this.focused=e.focused),t.stopPropagation()}clickHandler(t){if(this.disabled)return;let e=t.target;["calcite-tile","calcite-tile-select"].includes(e.localName)&&this.input.click()}pointerEnterHandler(){if(this.disabled)return;let{localName:t}=this.input;(t==="calcite-radio-button"||t==="calcite-checkbox")&&(this.input.hovered=!0)}pointerLeaveHandler(){if(this.disabled)return;let{localName:t}=this.input;(t==="calcite-radio-button"||t==="calcite-checkbox")&&(this.input.hovered=!1)}renderInput(){this.input=this.type==="radio"?document.createElement("calcite-radio-button"):document.createElement("calcite-checkbox"),this.input.checked=this.checked,this.input.disabled=this.disabled,this.input.hidden=this.el.hidden,this.input.id=this.guid,this.input.label=this.heading||this.name||"",this.name&&(this.input.name=this.name),this.value&&(this.input.value=this.value!=null?this.value.toString():""),this.el.insertAdjacentElement("beforeend",this.input)}render(){let{checked:t,description:e,disabled:c,focused:w,heading:o,icon:a,inputAlignment:r,inputEnabled:C,width:d,iconFlipRtl:B}=this,u=o&&a&&!e,h=!!a;return y({disabled:c,children:l`<div class=${n({checked:t,container:!0,[i.description]:!!e,[i.descriptionOnly]:!!(!o&&!a&&e),disabled:c,focused:w,[i.heading]:!!o,[i.headingOnly]:o&&!a&&!e,[i.icon]:h,[i.iconOnly]:!o&&a&&!e,[i.inputAlignmentEnd]:r==="end",[i.inputAlignmentStart]:r==="start",[i.inputEnabled]:C,[i.largeVisual]:u,[i.widthAuto]:d==="auto",[i.widthFull]:d==="full"})}><div class=${n({[i.tile]:!0,[i.tileLargeVisual]:u})}>${a&&l`<div class=${n({[i.icon]:h})}><calcite-icon .flipRtl=${B} .icon=${a} scale=l></calcite-icon></div>`||""}<div class=${n(i.tileContentContainer)}><div class=${n(i.tileContent)}>${o&&l`<div class=${n(i.tileHeading)}>${o}</div>`||""}${e&&l`<div class=${n(i.tileDescription)}>${e}</div>`||""}</div></div></div><slot></slot></div>`})}};m("calcite-tile-select",s);export{s as TileSelect};

package/dist/calcite/6FWOJZJZ.js

@@ -1,4 +0,0 @@
-/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
-See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0 */
-import{a as S,b as F}from"./XEDUET37.js";import{a as b}from"./LFMPTQHL.js";import{a as I}from"./5ZIDO3WK.js";import{c as H}from"./IDBLX5MO.js";import{a as E,b as f}from"./AE3GS3TO.js";import{a as B,d as L}from"./VGL3WVHU.js";import"./WQASJHDE.js";import{a as T}from"./BTG3ZQHR.js";import{E as z,F as n,H as c,R as w,c as C,d as e}from"./A6PXYMIR.js";var i={button:"button",buttonTextVisible:"button--text-visible",buttonCompact:"button--compact",indicatorText:"indicator-text",iconContainer:"icon-container",slotContainer:"slot-container",slotContainerHidden:"slot-container--hidden",textContainer:"text-container",textContainerVisible:"text-container--visible",indicatorWithIcon:"indicator-with-icon",indicatorWithoutIcon:"indicator-without-icon"},O={tooltip:"tooltip"},R=C`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;cursor:pointer;background-color:transparent;--calcite-internal-action-text-color: var(--calcite-color-text-3);border-radius:var(--calcite-action-corner-radius, var(--calcite-action-corner-radius-start-start, var(--calcite-corner-radius)) var(--calcite-action-corner-radius-start-end, var(--calcite-corner-radius)) var(--calcite-action-corner-radius-end-end, var(--calcite-corner-radius)) var(--calcite-action-corner-radius-end-start, var(--calcite-corner-radius)))}.interaction-container{border-radius:inherit}:host([drag-handle]){cursor:move;--calcite-internal-action-text-color: var(--calcite-color-border-input);--calcite-internal-action-padding-inline: var(--calcite-spacing-xxs)}.button{border-radius:inherit;position:relative;margin:0;display:flex;inline-size:auto;align-items:center;justify-content:flex-start;border-style:none;font-family:var(--calcite-font-family);font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);outline-color:transparent;background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1));color:var(--calcite-action-text-color, var(--calcite-internal-action-text-color));text-align:unset;flex:1 0 auto;cursor:inherit}.button:hover{background-color:var(--calcite-action-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-action-text-color-press, var(--calcite-action-text-color-pressed, var(--calcite-color-text-1)))}.button:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.button:active{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3)))}.icon-container{pointer-events:none;margin:0;display:flex;align-items:center;justify-content:center;min-inline-size:1rem;min-block-size:1.5rem}.text-container{margin:0;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:margin;transition-property:inline-size}.text-container--visible{inline-size:auto;flex:1 1 auto;opacity:1}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus{color:var(--calcite-action-text-color-press, var(--calcite-action-text-color-pressed, var(--calcite-color-text-1)));background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3)))}:host([active]) .button:active{background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1))}:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1))}:host([loading]) .text-container{opacity:var(--calcite-opacity-disabled)}:host([loading]) calcite-loader[inline]{margin-inline-end:0px}:host([appearance=transparent]):host([active]) .button{background-color:var(--calcite-color-transparent-press)}:host([appearance=transparent]) .button{background-color:transparent;transition-property:box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}:host([appearance=transparent]) .button:hover{background-color:var(--calcite-color-transparent-hover)}:host([appearance=transparent]) .button:active{background-color:var(--calcite-color-transparent-press)}:host([data-active]) .button{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([scale=s]) .button{font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal);padding-inline:var(--calcite-internal-action-padding-inline, .5rem);padding-block:var(--calcite-internal-action-padding-block, var(--calcite-spacing-xxs))}:host([scale=s]) .button--text-visible .icon-container{margin-inline-end:.5rem}:host([scale=m]) .button{font-size:var(--calcite-font-size--1);line-height:1rem;font-weight:var(--calcite-font-weight-normal);padding-inline:var(--calcite-internal-action-padding-inline, 1rem);padding-block:var(--calcite-internal-action-padding-block, var(--calcite-spacing-md))}:host([scale=m]) .button--text-visible .icon-container{margin-inline-end:.75rem}:host([scale=l]) .button{font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-normal);padding-inline:var(--calcite-internal-action-padding-inline, 1.25rem);padding-block:var(--calcite-internal-action-padding-block, var(--calcite-spacing-xl))}:host([scale=l]) .button--text-visible .icon-container{margin-inline-end:1rem}:host([alignment=center]) .button{justify-content:center}:host([alignment=end]) .button{justify-content:flex-end}:host([alignment=center]) .button .text-container--visible,:host([alignment=end]) .button .text-container--visible{flex:0 1 auto}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-inline:0px}.slot-container{display:flex}.slot-container--hidden{display:none}.button--text-visible{inline-size:100%}.indicator-with-icon{position:relative}.indicator-with-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.275rem;inset-inline-end:-.275rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand))}.indicator-without-icon{margin-inline:.25rem;inline-size:1rem;position:relative}.indicator-without-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.275rem;inset-inline-end:-.275rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand))}.indicator-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;opacity:var(--calcite-opacity-disabled);background-color:var(--calcite-action-background-color, var(--calcite-action-background-color, var(--calcite-color-foreground-1)))}:host([disabled]):host([active]) .button,:host([disabled]):host([active]) .button:hover,:host([disabled]):host([active]) .button:focus{opacity:var(--calcite-opacity-disabled);background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3))))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`,m=class extends z{constructor(){super(...arguments),this.guid=`calcite-action-${T()}`,this.buttonEl=E(),this.buttonId=`${this.guid}-button`,this.indicatorId=`${this.guid}-indicator`,this.mutationObserver=I("mutation",()=>this.requestUpdate()),this.messages=H({blocking:!0}),this.active=!1,this.appearance="solid",this.compact=!1,this.disabled=!1,this.dragHandle=!1,this.iconFlipRtl=!1,this.indicator=!1,this.loading=!1,this.scale="m",this.textEnabled=!1}static{this.properties={active:[7,{},{reflect:!0,type:Boolean}],alignment:[3,{},{reflect:!0}],appearance:[3,{},{reflect:!0}],compact:[7,{},{reflect:!0,type:Boolean}],disabled:[7,{},{reflect:!0,type:Boolean}],dragHandle:[7,{},{reflect:!0,type:Boolean}],icon:[3,{},{reflect:!0}],iconFlipRtl:[7,{},{reflect:!0,type:Boolean}],indicator:[7,{},{reflect:!0,type:Boolean}],label:1,loading:[7,{},{reflect:!0,type:Boolean}],messageOverrides:[0,{},{attribute:!1}],scale:[3,{},{reflect:!0}],text:1,textEnabled:[7,{},{reflect:!0,type:Boolean}]}}static{this.styles=R}async setFocus(){await L(this),this.buttonEl.value?.focus()}connectedCallback(){super.connectedCallback(),this.mutationObserver?.observe(this.el,{childList:!0,subtree:!0})}updated(){S(this)}disconnectedCallback(){super.disconnectedCallback(),this.mutationObserver?.disconnect()}handleTooltipSlotChange(t){let o=t.target.assignedElements({flatten:!0}).filter(r=>r?.matches("calcite-tooltip"))[0];o&&(o.referenceElement=this.buttonEl.value)}renderTextContainer(){let{text:t,textEnabled:a}=this,o={[i.textContainer]:!0,[i.textContainerVisible]:a};return t?b("text-container",e`<div class=${n(o)}>${t}</div>`):null}renderIndicatorText(){let{indicator:t,messages:a,indicatorId:o,buttonId:r}=this;return e`<div aria-labelledby=${r??c} aria-live=polite class=${n(i.indicatorText)} id=${o??c} role=region>${t?a.indicator:null}</div>`}renderIconContainer(){let{loading:t,icon:a,scale:o,el:r,iconFlipRtl:d,indicator:p}=this,h=o==="l"?"l":"m",v=t?e`<calcite-loader inline .label=${this.messages.loading} .scale=${h}></calcite-loader>`:null,l=a?e`<calcite-icon class=${n({[i.indicatorWithIcon]:p})} .flipRtl=${d} .icon=${a} .scale=${B(this.scale)}></calcite-icon>`:null,s=v||l,u=s||r.children?.length,g=e`<div class=${n({[i.slotContainer]:!0,[i.slotContainerHidden]:t})}><slot></slot></div>`;return u?b("icon-container",e`<div aria-hidden=true class=${n(i.iconContainer)}>${s}${g}</div>`):null}renderButton(){let{active:t,compact:a,disabled:o,icon:r,loading:d,textEnabled:p,label:h,text:v,indicator:l,indicatorId:s,buttonId:u,messages:g}=this,x=h||v||"",k=l?g.indicatorLabel.replace("{label}",x):x,y={[i.button]:!0,[i.buttonTextVisible]:p,[i.buttonCompact]:a},$=e`${this.renderIconContainer()}${this.renderTextContainer()}${!r&&l&&b("indicator-no-icon",e`<div class=${n(i.indicatorWithoutIcon)}></div>`)||""}`;return this.dragHandle?e`<span aria-controls=${(l?s:null)??c} .ariaBusy=${d} .ariaDisabled=${this.disabled?this.disabled:null} .ariaLabel=${k} .ariaPressed=${t} class=${n(y)} id=${u??c} role=button tabindex=${(this.disabled?null:0)??c} ${f(this.buttonEl)}>${$}</span>`:e`<button aria-controls=${(l?s:null)??c} .ariaBusy=${d} .ariaLabel=${k} .ariaPressed=${t} class=${n(y)} .disabled=${o} id=${u??c} tabindex=${(o?null:0)??c} ${f(this.buttonEl)}>${$}</button>`}render(){return F({disabled:this.disabled,children:e`${this.renderButton()}<slot name=${O.tooltip} @slotchange=${this.handleTooltipSlotChange}></slot>${this.renderIndicatorText()}`})}};w("calcite-action",m);export{m as Action};

package/dist/calcite/6GGGMC6V.js

@@ -1,4 +0,0 @@
-/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
-See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0 */
-import{e as S,i as I,j as H}from"./JO4MYWKA.js";import{b as l}from"./NTYF4BYL.js";import{a as k,b as z}from"./XEDUET37.js";import{a}from"./LFMPTQHL.js";import{s as w}from"./ZCWNMSG2.js";import{a as h,b as y}from"./VGL3WVHU.js";import"./WQASJHDE.js";import{a as $}from"./BTG3ZQHR.js";import{E as x,F as i,G as v,R as C,c as f,d as o,h as g,q as d}from"./A6PXYMIR.js";var t={active:"label--active",centerContent:"center-content",container:"container",iconCustom:"icon--custom",description:"description",icon:"icon",label:"label",scale:b=>`scale--${b}`,shortText:"short-text",single:"label--single",textContainer:"text-container",heading:"heading"},c={checked:"check-square-f",circle:"circle",indeterminate:"minus-square-f",selectedSingle:"circle-inset-large",unchecked:"square"},L={contentEnd:"content-end",contentStart:"content-start"},_=f`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([hidden]){display:none}[hidden]{display:none}.scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-internal-combobox-item-spacing-unit-s: .25rem;--calcite-internal-combobox-item-spacing-unit-l: .5rem;--calcite-combobox-item-selector-icon-size: 1rem;--calcite-internal-combobox-item-description-font-size: var(--calcite-font-size-xs)}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-internal-combobox-item-spacing-unit-s: .375rem;--calcite-internal-combobox-item-spacing-unit-l: .75rem;--calcite-combobox-item-selector-icon-size: 1rem;--calcite-internal-combobox-item-description-font-size: var(--calcite-font-size-sm)}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-internal-combobox-item-spacing-unit-s: .625rem;--calcite-internal-combobox-item-spacing-unit-l: 1rem;--calcite-combobox-item-selector-icon-size: 1.5rem;--calcite-internal-combobox-item-description-font-size: var(--calcite-font-size)}.container{--calcite-combobox-item-indent-value: calc( var(--calcite-internal-combobox-item-spacing-unit-l) * var(--calcite-combobox-item-spacing-indent-multiplier) )}:host(:focus){--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host,ul{margin:0;display:flex;flex-direction:column;padding:0}:host(:focus),ul:focus{outline:2px solid transparent;outline-offset:2px}.label{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;text-decoration-line:none;transition-timing-function:cubic-bezier(.4,0,.2,1);outline-color:transparent;word-wrap:break-word;word-break:break-word;justify-content:space-around;gap:var(--calcite-internal-combobox-item-spacing-unit-l);padding-block:var(--calcite-internal-combobox-item-spacing-unit-s);padding-inline-end:var(--calcite-internal-combobox-item-spacing-unit-l);padding-inline-start:var(--calcite-combobox-item-indent-value);color:var(--calcite-combobox-text-color, var(--calcite-color-text-3));transition-duration:var(--calcite-animation-timing)}:host([disabled]) .label{cursor:default}.label--active{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.label:hover{background-color:var(--calcite-combobox-item-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-combobox-text-color-hover, var(--calcite-color-text-1))}.label:active{background-color:var(--calcite-combobox-item-background-color-active, var(--calcite-color-foreground-3))}:host([selected]) .label,.label:active{color:var(--calcite-combobox-text-color-hover, var(--calcite-color-text-1))}:host([selected]) .label .description,:host([selected]) .label .short-text,.label:active .description,.label:active .short-text{color:var(--calcite-combobox-description-text-color-press, var(--calcite-color-text-2))}.icon{display:inline-flex;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);color:var(--calcite-color-border-input)}:host([selected]) .icon,:host([indeterminate]) .icon{color:var(--calcite-combobox-selected-icon-color, var(--calcite-color-brand))}.icon--custom{margin-block-start:-1px}.center-content{display:flex;flex-direction:column;flex-grow:1;padding-block:0}.description{font-size:var(--calcite-internal-combobox-item-description-font-size)}.short-text{white-space:nowrap}.heading{color:var(--calcite-combobox-heading-text-color, var(--calcite-color-text-1))}.description,.short-text{color:var(--calcite-combobox-description-text-color, var(--calcite-color-text-3))}:host([selected]) .heading{font-weight:var(--calcite-font-weight-medium)}.heading,.description,.short-text{line-height:var(--calcite-font-line-height-relative-snug)}:host([item-hidden]){display:none}.text-match{background-color:transparent;color:inherit;font-weight:var(--calcite-font-weight-bold)}`,m=class extends x{constructor(){super(...arguments),this._selected=!1,this.hasContent=!1,this.active=!1,this.disabled=!1,this.guid=$(),this.iconFlipRtl=!1,this.scale="m",this.selectionMode="multiple",this.itemHidden=!1,this.indeterminate=!1,this.calciteComboboxItemChange=d({cancelable:!1}),this.calciteInternalComboboxItemChange=d({cancelable:!1})}static{this.properties={hasContent:[16,{},{state:!0}],active:[7,{},{reflect:!0,type:Boolean}],ancestors:[0,{},{attribute:!1}],description:1,disabled:[7,{},{reflect:!0,type:Boolean}],filterDisabled:[7,{},{reflect:!0,type:Boolean}],filterTextMatchPattern:[2,{},{reflect:!0,attribute:!1}],guid:[3,{},{reflect:!0}],heading:1,icon:[3,{},{reflect:!0}],iconFlipRtl:[7,{},{reflect:!0,type:Boolean}],label:1,metadata:[0,{},{attribute:!1}],scale:1,selected:[7,{},{reflect:!0,type:Boolean}],selectionMode:[3,{},{reflect:!0}],shortHeading:1,textLabel:[3,{},{reflect:!0}],value:1,itemHidden:[7,{},{reflect:!0,type:Boolean}],indeterminate:[7,{},{reflect:!0,type:Boolean}]}}static{this.styles=_}get selected(){return this._selected}set selected(e){let n=this._selected;e!==n&&(this._selected=e,this.emitItemChange())}connectedCallback(){super.connectedCallback(),this.ancestors=S(this.el)}load(){y(this,"value","textLabel")}willUpdate(e){this.hasUpdated&&(e.has("disabled")||e.has("heading")||e.has("label")||e.has("textLabel"))&&this.emitItemChange()}updated(){k(this)}emitItemChange(){this.calciteInternalComboboxItemChange.emit()}handleDefaultSlotChange(e){this.hasContent=w(e)}toggleSelected(){let e=this.selectionMode==="single-persist";this.disabled||e&&this.selected||(this.selected=!this.selected,this.calciteComboboxItemChange.emit())}itemClickHandler(){this.toggleSelected()}renderIcon(e){return this.icon?a("icon",o`<calcite-icon class=${i({[t.iconCustom]:!!this.icon})} .flipRtl=${this.iconFlipRtl} .icon=${this.icon||e} .scale=${h(this.scale)}></calcite-icon>`):null}renderSelectIndicator(e){return a("indicator",o`<calcite-icon class=${i({[t.icon]:!0})} .flipRtl=${this.iconFlipRtl} .icon=${e} .scale=${h(this.scale)}></calcite-icon>`)}renderChildren(){return a("default-slot-container",o`<ul .hidden=${!this.hasContent}><slot @slotchange=${this.handleDefaultSlotChange}></slot></ul>`)}render(){let{disabled:e,heading:n,label:M,textLabel:B,value:R,filterTextMatchPattern:s,description:u,shortHeading:p}=this,r=H(this.selectionMode),T=e||r?void 0:c.checked,E=r?this.selected?c.selectedSingle:c.circle:this.indeterminate?c.indeterminate:this.selected?c.checked:c.unchecked,q=n||B,D=M||R,F={[t.label]:!0,[t.active]:this.active,[t.single]:r},P=I(this.el);return this.el.ariaHidden="true",this.el.ariaLabel=D,z({disabled:e,children:o`<div class=${i({[t.container]:!0,[t.scale(this.scale)]:!0})} style=${v({"--calcite-combobox-item-spacing-indent-multiplier":`${P}`})}><li class=${i(F)} id=${this.guid??g} @click=${this.itemClickHandler}>${this.renderSelectIndicator(E)}<slot name=${L.contentStart}></slot>${this.renderIcon(T)}<div class=${i(t.centerContent)}><div class=${i(t.heading)}>${l({text:q,pattern:s})}</div>${u?o`<div class=${i(t.description)}>${l({text:u,pattern:s})}</div>`:null}</div>${p?o`<div class=${i(t.shortText)}>${l({text:p,pattern:s})}</div>`:null}<slot name=${L.contentEnd}></slot></li>${this.renderChildren()}</div>`})}};C("calcite-combobox-item",m);export{m as ComboboxItem};

package/dist/calcite/A4ZVVA7X.js

@@ -1,4 +0,0 @@
-/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
-See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0 */
-import{b as I}from"./RIPCYHYN.js";import{a as P}from"./H77KJPTL.js";import"./YGX5ZVDM.js";import{b as w}from"./OTR7EFHA.js";import{a as O}from"./2XJXDX35.js";import{a as H,b as B}from"./XEDUET37.js";import{a as s}from"./LFMPTQHL.js";import"./YSRW4TZC.js";import{c as E}from"./IDBLX5MO.js";import{b as S}from"./AE3GS3TO.js";import{n as y,u as d}from"./ZCWNMSG2.js";import{d as C}from"./VGL3WVHU.js";import{a as f}from"./WQASJHDE.js";import"./BTG3ZQHR.js";import{E as x,F as a,R as k,c as $,d as o,h as u,q as l}from"./A6PXYMIR.js";var c={content:"content",toggle:"toggle",header:"header"},t={actionsEnd:"actions-end",container:"container",content:"content",contentStart:"content-start",controlContainer:"control-container",description:"description",header:"header",headerContainer:"header-container",headerHasText:"header--has-text",heading:"heading",icon:"icon",iconStart:"icon--start",iconEnd:"icon--end",iconEndContainer:"icon-end-container",invalid:"invalid",statusIcon:"status-icon",title:"title",toggle:"toggle",toggleIcon:"toggle-icon",valid:"valid"},h={actionsEnd:"actions-end",contentStart:"content-start",control:"control",headerMenuActions:"header-menu-actions",icon:"icon"},b={expanded:"chevron-up",collapsed:"chevron-down",valid:"check-circle",invalid:"exclamation-mark-triangle"},q=$`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{--calcite-icon-size: 1rem;--calcite-spacing-eighth: .125rem;--calcite-spacing-quarter: .25rem;--calcite-spacing-half: .5rem;--calcite-spacing-three-quarters: .75rem;--calcite-spacing: 1rem;--calcite-spacing-plus-quarter: 1.25rem;--calcite-spacing-plus-half: 1.5rem;--calcite-spacing-double: 2rem;--calcite-menu-min-width: 10rem;--calcite-header-min-height: 3rem;--calcite-footer-min-height: 3rem}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-shrink:0;flex-grow:0;flex-direction:column;border-width:0px;border-block-end-width:1px;border-style:solid;padding:0;transition-property:margin;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-timing-function:cubic-bezier(.215,.44,.42,.88);flex-basis:auto;transition-duration:var(--calcite-animation-timing);border-color:var(--calcite-block-border-color, var(--calcite-color-border-3))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.header{margin:0;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0;padding:0;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:.5rem}.header{justify-content:flex-start}.header--has-text{padding:var(--calcite-spacing-md)}.header,.toggle{grid-area:header}.header-container{display:grid;align-items:stretch;grid-template:auto/auto 1fr auto auto;grid-template-areas:"handle header control menu actions-end";grid-column:header-start/actions-end;grid-row:1/2}.content-start,.icon,.icon--start,.icon--end{margin-inline-end:var(--calcite-spacing-md)}.icon calcite-loader{margin-inline-end:var(--calcite-spacing-xxxs)}.icon--start,.icon--end{color:var(--calcite-block-icon-color, var(--calcite-color-text-3))}.actions-end{grid-area:actions-end}.toggle{margin:0;display:flex;cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-style:none;padding:0;font-family:var(--calcite-font-family);outline-color:transparent;text-align:initial;background-color:var(--calcite-block-header-background-color, transparent)}.toggle:hover{background-color:var(--calcite-block-header-background-color-hover, var(--calcite-color-foreground-2))}.toggle:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.toggle:active{background-color:var(--calcite-block-header-background-color-press, var(--calcite-color-foreground-3))}calcite-loader[inline]{grid-area:control;align-self:center}calcite-handle{grid-area:handle}.title{margin:0}.header .title .heading{padding:0;font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-medium);line-height:1.25;transition-property:color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);word-wrap:break-word;word-break:break-word;color:var(--calcite-block-heading-text-color, var(--calcite-color-text-2))}.description{margin-block-start:.125rem;padding:0;font-size:var(--calcite-font-size--2);line-height:1.375;word-wrap:break-word;word-break:break-word;color:var(--calcite-block-description-text-color, var(--calcite-color-text-3))}.icon{display:flex}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}@keyframes spin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.icon-end-container{display:flex;align-items:center;margin-inline-start:auto}.toggle-icon{align-self:center;justify-self:end;transition-property:color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-inline-end:var(--calcite-spacing-md);color:var(--calcite-block-icon-color, var(--calcite-color-text-3))}.toggle:hover .toggle-icon{color:var(--calcite-block-icon-color-hover, var(--calcite-color-text-1))}.container{position:relative;display:flex;block-size:100%;flex-direction:column}.content{position:relative;min-block-size:0px;flex:1 1 0%}@keyframes in{0%{opacity:0}to{opacity:1}}.content{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;padding-block:var(--calcite-block-padding, var(--calcite-spacing-sm));padding-inline:var(--calcite-block-padding, var(--calcite-spacing-md))}.content-start{display:flex;align-items:center;color:var(--calcite-block-text-color, var(--calcite-color-text-3))}.control-container{margin:0;display:flex;grid-area:control}calcite-action-menu{grid-area:menu}.actions-end{display:flex;align-items:stretch}:host([expanded]){margin-block:.5rem}:host([expanded]) .header .title .heading{color:var(--calcite-block-heading-text-color-press, var(--calcite-color-text-1))}:host([expanded]) .description{color:var(--calcite-block-description-text-color, var(--calcite-color-text-2))}:host([expanded]) .icon--start,:host([expanded]) .icon--end{color:var(--calcite-block-icon-color, var(--calcite-color-text-1))}:host([hidden]){display:none}[hidden]{display:none}`,v=class extends x{constructor(){super(...arguments),this.transitionProp="margin-top",this.messages=E(),this.hasContentStart=!1,this.hasControl=!1,this.hasEndActions=!1,this.hasIcon=!1,this.hasMenuActions=!1,this.collapsible=!1,this.disabled=!1,this.dragDisabled=!1,this.dragHandle=!1,this.expanded=!1,this.loading=!1,this.menuPlacement=w,this.moveToItems=[],this.overlayPositioning="absolute",this.setPosition=null,this.setSize=null,this.sortHandleOpen=!1,this.calciteBlockBeforeClose=l({cancelable:!1}),this.calciteBlockBeforeOpen=l({cancelable:!1}),this.calciteBlockClose=l({cancelable:!1}),this.calciteBlockOpen=l({cancelable:!1}),this.calciteBlockSortHandleBeforeClose=l({cancelable:!1}),this.calciteBlockSortHandleBeforeOpen=l({cancelable:!1}),this.calciteBlockSortHandleClose=l({cancelable:!1}),this.calciteBlockSortHandleOpen=l({cancelable:!1}),this.calciteBlockToggle=l({cancelable:!1})}static{this.properties={hasContentStart:[16,{},{state:!0}],hasControl:[16,{},{state:!0}],hasEndActions:[16,{},{state:!0}],hasIcon:[16,{},{state:!0}],hasMenuActions:[16,{},{state:!0}],collapsible:[7,{},{reflect:!0,type:Boolean}],description:1,disabled:[7,{},{reflect:!0,type:Boolean}],dragDisabled:[7,{},{reflect:!0,type:Boolean}],dragHandle:[7,{},{reflect:!0,type:Boolean}],expanded:[7,{},{reflect:!0,type:Boolean}],heading:1,headingLevel:[11,{},{type:Number,reflect:!0}],iconEnd:[3,{},{reflect:!0}],iconFlipRtl:[3,{},{reflect:!0}],iconStart:[3,{},{reflect:!0}],loading:[7,{},{reflect:!0,type:Boolean}],label:1,menuFlipPlacements:[0,{},{attribute:!1}],menuPlacement:[3,{},{reflect:!0}],messageOverrides:[0,{},{attribute:!1}],moveToItems:[0,{},{attribute:!1}],open:[7,{},{reflect:!0,type:Boolean}],overlayPositioning:[3,{},{reflect:!0}],setPosition:[9,{},{type:Number}],setSize:[9,{},{type:Number}],sortHandleOpen:[7,{},{reflect:!0,type:Boolean}],status:[3,{},{reflect:!0}]}}static{this.styles=[q,P]}get open(){return this.expanded}set open(e){f.deprecated("property",{name:"open",removalVersion:4,suggested:"expanded"}),this.expanded=e}async setFocus(){await C(this),y(this.el)}connectedCallback(){super.connectedCallback(),this.transitionEl=this.el}load(){!this.heading&&!this.label&&f.warn(`${this.el.tagName} is missing both heading & label. Please provide a heading or label for the component to be accessible.`)}willUpdate(e){e.has("expanded")&&(this.hasUpdated||this.expanded!==!1)&&O(this),e.has("sortHandleOpen")&&(this.hasUpdated||this.sortHandleOpen!==!1)&&this.sortHandleOpenHandler()}updated(){H(this)}onBeforeOpen(){this.calciteBlockBeforeOpen.emit()}onOpen(){this.calciteBlockOpen.emit()}onBeforeClose(){this.calciteBlockBeforeClose.emit()}onClose(){this.calciteBlockClose.emit()}sortHandleOpenHandler(){this.sortHandleEl&&(this.sortHandleEl.open=this.sortHandleOpen)}setSortHandleEl(e){this.sortHandleEl=e,this.sortHandleOpenHandler()}handleSortHandleBeforeOpen(e){e.stopPropagation(),this.calciteBlockSortHandleBeforeOpen.emit()}handleSortHandleBeforeClose(e){e.stopPropagation(),this.calciteBlockSortHandleBeforeClose.emit()}handleSortHandleClose(e){e.stopPropagation(),this.sortHandleOpen=!1,this.calciteBlockSortHandleClose.emit()}handleSortHandleOpen(e){e.stopPropagation(),this.sortHandleOpen=!0,this.calciteBlockSortHandleOpen.emit()}onHeaderClick(){this.expanded=!this.expanded,this.calciteBlockToggle.emit()}controlSlotChangeHandler(e){this.hasControl=d(e)}menuActionsSlotChangeHandler(e){this.hasMenuActions=d(e)}iconSlotChangeHandler(e){this.hasIcon=d(e)}actionsEndSlotChangeHandler(e){this.hasEndActions=d(e)}handleContentStartSlotChange(e){this.hasContentStart=d(e)}renderScrim(){let{loading:e}=this,i=o`<slot></slot>`;return[e?o`<calcite-scrim .loading=${e}></calcite-scrim>`:null,i]}renderLoaderStatusIcon(){let{loading:e,messages:i,status:n}=this;return e?s("loader",o`<div class=${a(t.icon)}><calcite-loader inline .label=${i.loading}></calcite-loader></div>`):n?s("status-icon",o`<div class=${a(t.icon)}><calcite-icon class=${a({[t.statusIcon]:!0,[t.valid]:n=="valid",[t.invalid]:n=="invalid"})} .icon=${b[n]} scale=s></calcite-icon></div>`):s("icon-slot",o`<div class=${a(t.icon)} .hidden=${!this.hasIcon}>${s("icon-slot",o`<slot name=${h.icon} @slotchange=${this.iconSlotChangeHandler}></slot>`)}</div>`)}renderActionsEnd(){return o`<div class=${a(t.actionsEnd)} .hidden=${!this.hasEndActions}><slot name=${h.actionsEnd} @slotchange=${this.actionsEndSlotChangeHandler}></slot></div>`}renderContentStart(){return o`<div class=${a(t.contentStart)} .hidden=${!this.hasContentStart}><slot name=${h.contentStart} @slotchange=${this.handleContentStartSlotChange}></slot></div>`}renderTitle(){let{heading:e,headingLevel:i,description:n}=this;return e||n?o`<div class=${a(t.title)}>${I({class:t.heading,level:i,children:e})}${n?o`<div class=${a(t.description)}>${n}</div>`:null}</div>`:null}renderIcon(e){let{iconFlipRtl:i}=this,n=i==="both"||e==="start"?i==="start":i==="end",r=e==="start"?this.iconStart:this.iconEnd,p=e==="start"?t.iconStart:t.iconEnd;if(r)return s(r,o`<calcite-icon class=${a(p)} .flipRtl=${n} .icon=${r} scale=s></calcite-icon>`)}render(){let{collapsible:e,loading:i,expanded:n,label:r,heading:p,messages:g,description:z,menuFlipPlacements:A,menuPlacement:T,moveToItems:M,setPosition:F,setSize:L,dragDisabled:N}=this,D=n?g.collapse:g.expand,m=o`<header class=${a({[t.header]:!0,[t.headerHasText]:!!(p||z)})} id=${c.header}>${this.renderIcon("start")}${this.renderContentStart()}${this.renderLoaderStatusIcon()}${this.renderTitle()}</header>`,R=n?b.expanded:b.collapsed,j=o`<div class=${a(t.headerContainer)}>${this.dragHandle?o`<calcite-sort-handle .disabled=${N} .label=${p||r} .moveToItems=${M} @calciteSortHandleBeforeClose=${this.handleSortHandleBeforeClose} @calciteSortHandleBeforeOpen=${this.handleSortHandleBeforeOpen} @calciteSortHandleClose=${this.handleSortHandleClose} @calciteSortHandleOpen=${this.handleSortHandleOpen} overlay-positioning=fixed .setPosition=${F} .setSize=${L} ${S(this.setSortHandleEl)}></calcite-sort-handle>`:null}${e?o`<button aria-controls=${c.content} aria-describedby=${c.header} .ariaExpanded=${e?n:null} class=${a(t.toggle)} id=${c.toggle} @click=${this.onHeaderClick} title=${D??u}>${m}<div class=${a(t.iconEndContainer)}>${this.renderIcon("end")}<calcite-icon class=${a(t.toggleIcon)} .icon=${R} scale=s></calcite-icon></div></button>`:this.iconEnd?o`<div>${m}<div class=${a(t.iconEndContainer)}>${this.renderIcon("end")}</div></div>`:m}<div aria-labelledby=${c.header} class=${a(t.controlContainer)} .hidden=${!this.hasControl}><slot name=${h.control} @slotchange=${this.controlSlotChangeHandler}></slot></div><calcite-action-menu .flipPlacements=${A??["top","bottom"]} .hidden=${!this.hasMenuActions} .label=${g.options} .overlayPositioning=${this.overlayPositioning} .placement=${T}><slot name=${h.headerMenuActions} @slotchange=${this.menuActionsSlotChangeHandler}></slot></calcite-action-menu>${this.renderActionsEnd()}</div>`;return B({disabled:this.disabled,children:o`<article aria-label=${r??u} .ariaBusy=${i} class=${a({[t.container]:!0})}>${j}<section aria-labelledby=${c.toggle} class=${a(t.content)} .hidden=${!n} id=${c.content}>${this.renderScrim()}</section></article>`})}};k("calcite-block",v);export{v as Block};