diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 68d4f03e98e..bffc8ef3637 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -9,191 +9,91 @@ import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, import { RequestedItem } from "./components/accordion/interfaces"; import { IconNameOrString } from "./components/icon/interfaces"; import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; -import { ActionMessages } from "./components/action/assets/action/t9n"; import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; -import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; import { Columns } from "./components/action-group/interfaces"; -import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; -import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; import { AlertDuration, AlertQueue } from "./components/alert/interfaces"; import { NumberingSystem } from "./utils/locale"; -import { AlertMessages } from "./components/alert/assets/alert/t9n"; import { HeadingLevel } from "./components/functional/Heading"; -import { BlockMessages } from "./components/block/assets/block/t9n"; import { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; -import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; -import { ButtonMessages } from "./components/button/assets/button/t9n"; -import { CardMessages } from "./components/card/assets/card/t9n"; import { ArrowType, AutoplayType } from "./components/carousel/interfaces"; -import { CarouselMessages } from "./components/carousel/assets/carousel/t9n"; import { MutableValidityState } from "./utils/form"; -import { ChipMessages } from "./components/chip/assets/chip/t9n"; import { ColorValue, InternalColor } from "./components/color-picker/interfaces"; import { Format } from "./components/color-picker/utils"; -import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; -import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; -import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; import { DateLocaleData } from "./components/date-picker/utils"; import { HoverRange } from "./utils/date"; -import { DialogMessages } from "./components/dialog/assets/dialog/t9n"; import { DialogPlacement } from "./components/dialog/interfaces"; import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; import { ItemKeyboardEvent } from "./components/dropdown/interfaces"; -import { FilterMessages } from "./components/filter/assets/filter/t9n"; import { FlowItemLikeElement } from "./components/flow/interfaces"; -import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; import { ColorStop, DataSeries } from "./components/graph/interfaces"; -import { HandleMessages } from "./components/handle/assets/handle/t9n"; import { HandleChange, HandleNudge } from "./components/handle/interfaces"; -import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; import { InputPlacement } from "./components/input/interfaces"; -import { InputMessages } from "./components/input/assets/input/t9n"; -import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; -import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; -import { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; -import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; -import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; -import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; import { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces"; import { ListDragDetail } from "./components/list/interfaces"; import { ItemData } from "./components/list-item/interfaces"; -import { ListMessages } from "./components/list/assets/list/t9n"; import { SelectionAppearance } from "./components/list/resources"; -import { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; -import { MenuMessages } from "./components/menu/assets/menu/t9n"; -import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; import { MenuItemCustomEvent } from "./components/menu-item/interfaces"; import { MeterFillType, MeterLabelType } from "./components/meter/interfaces"; -import { ModalMessages } from "./components/modal/assets/modal/t9n"; -import { NoticeMessages } from "./components/notice/assets/notice/t9n"; -import { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; -import { PanelMessages } from "./components/panel/assets/panel/t9n"; import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; import { ICON_TYPES } from "./components/pick-list/resources"; -import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; -import { PopoverMessages } from "./components/popover/assets/popover/t9n"; -import { RatingMessages } from "./components/rating/assets/rating/t9n"; -import { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; import { DisplayMode } from "./components/sheet/interfaces"; import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; -import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; import { DragDetail } from "./utils/sortableComponent"; import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; -import { StepperMessages } from "./components/stepper/assets/stepper/t9n"; -import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; -import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; import { Element } from "@stencil/core"; import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; -import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; -import { TableMessages } from "./components/table/assets/table/t9n"; -import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; -import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; -import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; import { TileSelectType } from "./components/tile-select/interfaces"; import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; -import { TipMessages } from "./components/tip/assets/tip/t9n"; -import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; import { TreeItemSelectDetail } from "./components/tree-item/interfaces"; -import { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; import { ListItemAndHandle } from "./components/value-list-item/interfaces"; export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces"; export { RequestedItem } from "./components/accordion/interfaces"; export { IconNameOrString } from "./components/icon/interfaces"; export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; -export { ActionMessages } from "./components/action/assets/action/t9n"; export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; -export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; export { Columns } from "./components/action-group/interfaces"; -export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; -export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; export { AlertDuration, AlertQueue } from "./components/alert/interfaces"; export { NumberingSystem } from "./utils/locale"; -export { AlertMessages } from "./components/alert/assets/alert/t9n"; export { HeadingLevel } from "./components/functional/Heading"; -export { BlockMessages } from "./components/block/assets/block/t9n"; export { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; -export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; -export { ButtonMessages } from "./components/button/assets/button/t9n"; -export { CardMessages } from "./components/card/assets/card/t9n"; export { ArrowType, AutoplayType } from "./components/carousel/interfaces"; -export { CarouselMessages } from "./components/carousel/assets/carousel/t9n"; export { MutableValidityState } from "./utils/form"; -export { ChipMessages } from "./components/chip/assets/chip/t9n"; export { ColorValue, InternalColor } from "./components/color-picker/interfaces"; export { Format } from "./components/color-picker/utils"; -export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; -export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; -export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; export { DateLocaleData } from "./components/date-picker/utils"; export { HoverRange } from "./utils/date"; -export { DialogMessages } from "./components/dialog/assets/dialog/t9n"; export { DialogPlacement } from "./components/dialog/interfaces"; export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; export { ItemKeyboardEvent } from "./components/dropdown/interfaces"; -export { FilterMessages } from "./components/filter/assets/filter/t9n"; export { FlowItemLikeElement } from "./components/flow/interfaces"; -export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; export { ColorStop, DataSeries } from "./components/graph/interfaces"; -export { HandleMessages } from "./components/handle/assets/handle/t9n"; export { HandleChange, HandleNudge } from "./components/handle/interfaces"; -export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; export { InputPlacement } from "./components/input/interfaces"; -export { InputMessages } from "./components/input/assets/input/t9n"; -export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; -export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; -export { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; -export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; -export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; -export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; export { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces"; export { ListDragDetail } from "./components/list/interfaces"; export { ItemData } from "./components/list-item/interfaces"; -export { ListMessages } from "./components/list/assets/list/t9n"; export { SelectionAppearance } from "./components/list/resources"; -export { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; -export { MenuMessages } from "./components/menu/assets/menu/t9n"; -export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; export { MenuItemCustomEvent } from "./components/menu-item/interfaces"; export { MeterFillType, MeterLabelType } from "./components/meter/interfaces"; -export { ModalMessages } from "./components/modal/assets/modal/t9n"; -export { NoticeMessages } from "./components/notice/assets/notice/t9n"; -export { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; -export { PanelMessages } from "./components/panel/assets/panel/t9n"; export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; export { ICON_TYPES } from "./components/pick-list/resources"; -export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; -export { PopoverMessages } from "./components/popover/assets/popover/t9n"; -export { RatingMessages } from "./components/rating/assets/rating/t9n"; -export { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; export { DisplayMode } from "./components/sheet/interfaces"; export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; -export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; export { DragDetail } from "./utils/sortableComponent"; export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; -export { StepperMessages } from "./components/stepper/assets/stepper/t9n"; -export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; -export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; export { Element } from "@stencil/core"; export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; -export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; -export { TableMessages } from "./components/table/assets/table/t9n"; -export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; -export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; -export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; export { TileSelectType } from "./components/tile-select/interfaces"; export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; -export { TipMessages } from "./components/tip/assets/tip/t9n"; -export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; export { TreeItemSelectDetail } from "./components/tree-item/interfaces"; -export { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; export { ListItemAndHandle } from "./components/value-list-item/interfaces"; export namespace Components { interface CalciteAccordion { diff --git a/packages/calcite-components/src/components/accordion-item/readme.md b/packages/calcite-components/src/components/accordion-item/readme.md index 0e9123d1e0c..e5839990e95 100644 --- a/packages/calcite-components/src/components/accordion-item/readme.md +++ b/packages/calcite-components/src/components/accordion-item/readme.md @@ -35,13 +35,22 @@ Type: `Promise` ## CSS Custom Properties -| Name | Description | -| ---------------------------------------- | ------------------------------------------------------- | -| `--calcite-accordion-border-color` | Specifies the component's border color. | -| `--calcite-accordion-item-content-space` | Specifies the component's padding. | -| `--calcite-accordion-text-color` | Specifies the component's text color. | -| `--calcite-accordion-text-color-hover` | Specifies the component's main text color on hover. | -| `--calcite-accordion-text-color-pressed` | Specifies the component's main text color when pressed. | +| Name | Description | +| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | +| `--calcite-accordion-border-color` | [Deprecate] Use --calcite-accordion-item-border-color. Specifies the component's border color. | +| `--calcite-accordion-item-background-color` | Specifies the component's background color. | +| `--calcite-accordion-item-border-color` | Specifies the component's border color. | +| `--calcite-accordion-item-content-space` | Specifies the component's padding. | +| `--calcite-accordion-item-end-icon-color` | Specifies the component's end icon color. Fallback to --calcite-accordion-item-icon-color or current color. | +| `--calcite-accordion-item-expand-icon-color` | Specifies the component's expand icon color. | +| `--calcite-accordion-item-header-background-color` | Specifies the background color of the component's header. | +| `--calcite-accordion-item-heading-text-color` | Specifies the component's heading text color. | +| `--calcite-accordion-item-icon-color` | Specifies the component's default icon color. | +| `--calcite-accordion-item-start-icon-color` | Specifies the component's start icon color. Fallback to --calcite-accordion-item-icon-color or current color. | +| `--calcite-accordion-item-text-color` | Specifies the component's text color. | +| `--calcite-accordion-text-color` | [Deprecated] Use --calcite-accordion-item-text-color. Specifies the component's text color. | +| `--calcite-accordion-text-color-hover` | [Deprecated] Use --calcite-accordion-item-text-color-hover. Specifies the component's main text color on hover. | +| `--calcite-accordion-text-color-pressed` | [Deprecated] Use --calcite-accordion-item-text-color-press. Specifies the component's main text color when pressed. | ## Dependencies diff --git a/packages/calcite-components/src/components/action-menu/readme.md b/packages/calcite-components/src/components/action-menu/readme.md index 0eab493821b..5efb092bc38 100644 --- a/packages/calcite-components/src/components/action-menu/readme.md +++ b/packages/calcite-components/src/components/action-menu/readme.md @@ -8,7 +8,7 @@ | -------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | | `appearance` | `appearance` | Specifies the appearance of the component. | `"solid" \| "transparent"` | `"solid"` | | `expanded` | `expanded` | When `true`, the component is expanded. | `boolean` | `false` | -| `flipPlacements` | -- | Defines the available placements that can be used when a flip occurs. | `FlipPlacement[]` | `undefined` | +| `flipPlacements` | -- | Specifies the component's fallback slotted content `placement` when it's initial or specified `placement` has insufficient space available. | `FlipPlacement[]` | `undefined` | | `label` *(required)* | `label` | Specifies the text string for the component. | `string` | `undefined` | | `open` | `open` | When `true`, the component is open. | `boolean` | `false` | | `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"` | `"absolute"` | diff --git a/packages/calcite-components/src/components/checkbox/readme.md b/packages/calcite-components/src/components/checkbox/readme.md index 45ea946cd9b..7c9ceda2405 100644 --- a/packages/calcite-components/src/components/checkbox/readme.md +++ b/packages/calcite-components/src/components/checkbox/readme.md @@ -39,9 +39,12 @@ Type: `Promise` ## CSS Custom Properties -| Name | Description | -| ------------------------- | ------------------------------------------- | -| `--calcite-checkbox-size` | Specifies the component's height and width. | +| Name | Description | +| --------------------------------------- | --------------------------------------------- | +| `--calcite-checkbox-border-color` | Specifies the component's color. | +| `--calcite-checkbox-border-color-hover` | Specifies the component's color when hovered. | +| `--calcite-checkbox-icon-color` | Specifies the component's font color. | +| `--calcite-checkbox-size` | Specifies the component's height and width. | ## Dependencies diff --git a/packages/calcite-components/src/components/combobox/readme.md b/packages/calcite-components/src/components/combobox/readme.md index 83c264da4bf..69d025c428c 100644 --- a/packages/calcite-components/src/components/combobox/readme.md +++ b/packages/calcite-components/src/components/combobox/readme.md @@ -13,7 +13,7 @@ For comprehensive guidance on using and implementing `calcite-combobox`, refer t | `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | | `filterText` | `filter-text` | Text for the component's filter input field. | `string` | `""` | | `filteredItems` | -- | Specifies the component's filtered items. | `HTMLCalciteComboboxItemElement[]` | `[]` | -| `flipPlacements` | -- | Defines the available placements that can be used when a flip occurs. | `FlipPlacement[]` | `undefined` | +| `flipPlacements` | -- | Specifies the component's fallback slotted content placement when it's initial placement has insufficient space available. | `FlipPlacement[]` | `undefined` | | `form` | `form` | The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` | | `label` *(required)* | `label` | Accessible name for the component. | `string` | `undefined` | | `maxItems` | `max-items` | Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar. | `number` | `0` | diff --git a/packages/calcite-components/src/components/dropdown/readme.md b/packages/calcite-components/src/components/dropdown/readme.md index 965498e037b..a726aeb85a9 100644 --- a/packages/calcite-components/src/components/dropdown/readme.md +++ b/packages/calcite-components/src/components/dropdown/readme.md @@ -10,7 +10,7 @@ For comprehensive guidance on using and implementing `calcite-dropdown`, refer t | ----------------------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ---------------------- | | `closeOnSelectDisabled` | `close-on-select-disabled` | When `true`, the component will remain open after a selection is made. If the `selectionMode` of the selected `calcite-dropdown-item`'s containing `calcite-dropdown-group` is `"none"`, the component will always close. | `boolean` | `false` | | `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `flipPlacements` | -- | Defines the available placements that can be used when a flip occurs. | `FlipPlacement[]` | `undefined` | +| `flipPlacements` | -- | Specifies the component's fallback `calcite-dropdown-item` `placement` when it's initial or specified `placement` has insufficient space available. | `FlipPlacement[]` | `undefined` | | `maxItems` | `max-items` | Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller. Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`. | `number` | `0` | | `open` | `open` | When `true`, displays and positions the component. | `boolean` | `false` | | `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"` | `"absolute"` | diff --git a/packages/calcite-components/src/components/handle/readme.md b/packages/calcite-components/src/components/handle/readme.md index 08961d2ce62..8a39aa46d0e 100644 --- a/packages/calcite-components/src/components/handle/readme.md +++ b/packages/calcite-components/src/components/handle/readme.md @@ -28,6 +28,17 @@ Sets focus on the component. Type: `Promise` +## CSS Custom Properties + +| Name | Description | +| -------------------------------------------- | --------------------------------------------------------- | +| `--calcite-handle-background-color` | Specifies the component's background color. | +| `--calcite-handle-background-color-hover` | Specifies the component's background color on hover. | +| `--calcite-handle-background-color-selected` | Specifies the component's background color when selected. | +| `--calcite-handle-icon-color` | Specifies the component's icon color. | +| `--calcite-handle-icon-color-hover` | Specifies the component's icon color on hover. | +| `--calcite-handle-icon-color-selected` | Specifies the component's icon color when selected. | + ## Dependencies ### Used by diff --git a/packages/calcite-components/src/components/input-date-picker/readme.md b/packages/calcite-components/src/components/input-date-picker/readme.md index 689f4d765c9..f6724f2c989 100644 --- a/packages/calcite-components/src/components/input-date-picker/readme.md +++ b/packages/calcite-components/src/components/input-date-picker/readme.md @@ -9,7 +9,7 @@ For comprehensive guidance on using and implementing `calcite-input-date-picker` | Property | Attribute | Description | Type | Default | | ---------------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `flipPlacements` | -- | Defines the available placements that can be used when a flip occurs. | `FlipPlacement[]` | `undefined` | +| `flipPlacements` | -- | Specifies the component's fallback `calcite-date-picker` `placement` when it's initial or specified `placement` has insufficient space available. | `FlipPlacement[]` | `undefined` | | `focusTrapDisabled` | `focus-trap-disabled` | When `true`, prevents focus trapping. | `boolean` | `false` | | `form` | `form` | The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` | | `headingLevel` | `heading-level` | Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | diff --git a/packages/calcite-components/src/components/input-number/readme.md b/packages/calcite-components/src/components/input-number/readme.md index bc5f19b0b6d..3c4a6cabad5 100644 --- a/packages/calcite-components/src/components/input-number/readme.md +++ b/packages/calcite-components/src/components/input-number/readme.md @@ -72,6 +72,13 @@ Type: `Promise` | ---------- | ------------------------------------------------------ | | `"action"` | A slot for positioning a button next to the component. | +## CSS Custom Properties + +| Name | Description | +| ----------------------------- | --------------------------------------- | +| `--calcite-input-prefix-size` | Specifies the component's prefix width. | +| `--calcite-input-suffix-size` | Specifies the component's suffix width. | + ## Dependencies ### Used by diff --git a/packages/calcite-components/src/components/input-text/readme.md b/packages/calcite-components/src/components/input-text/readme.md index e172010ef84..abd33129b4d 100644 --- a/packages/calcite-components/src/components/input-text/readme.md +++ b/packages/calcite-components/src/components/input-text/readme.md @@ -66,6 +66,13 @@ Type: `Promise` | ---------- | ------------------------------------------------------ | | `"action"` | A slot for positioning a button next to the component. | +## CSS Custom Properties + +| Name | Description | +| ----------------------------- | --------------------------------------- | +| `--calcite-input-prefix-size` | Specifies the component's prefix width. | +| `--calcite-input-suffix-size` | Specifies the component's suffix width. | + ## Dependencies ### Used by diff --git a/packages/calcite-components/src/components/input/readme.md b/packages/calcite-components/src/components/input/readme.md index e2e660d4cd0..3794ab9bf68 100644 --- a/packages/calcite-components/src/components/input/readme.md +++ b/packages/calcite-components/src/components/input/readme.md @@ -76,6 +76,13 @@ Type: `Promise` | ---------- | ---------------------------------------------------------------- | | `"action"` | A slot for positioning a `calcite-button` next to the component. | +## CSS Custom Properties + +| Name | Description | +| ----------------------------- | --------------------------------------- | +| `--calcite-input-prefix-size` | Specifies the component's prefix width. | +| `--calcite-input-suffix-size` | Specifies the component's suffix width. | + ## Dependencies ### Used by diff --git a/packages/calcite-components/src/components/loader/readme.md b/packages/calcite-components/src/components/loader/readme.md index f292a5caee0..86d8dca05ee 100644 --- a/packages/calcite-components/src/components/loader/readme.md +++ b/packages/calcite-components/src/components/loader/readme.md @@ -6,14 +6,14 @@ For comprehensive guidance on using and implementing `calcite-loader`, refer to ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ----------- | -| `inline` | `inline` | When `true`, displays smaller and appears to the left of the text. | `boolean` | `false` | -| `label` *(required)* | `label` | Accessible name for the component. | `string` | `undefined` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `text` | `text` | Text that displays under the component's indicator. | `string` | `""` | -| `type` | `type` | Specifies the component type. Use `"indeterminate"` if finding actual progress value is impossible. Otherwise, use `"determinate"` to have the value indicate the progress or `"determinate-value"` to have the value label displayed along the progress. | `"determinate" \| "determinate-value" \| "indeterminate"` | `undefined` | -| `value` | `value` | The component's value. Valid only for `"determinate"` indicators. Percent complete of 100. | `number` | `0` | +| Property | Attribute | Description | Type | Default | +| -------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ----------------- | +| `inline` | `inline` | When `true`, displays smaller and appears to the left of the text. | `boolean` | `false` | +| `label` *(required)* | `label` | Accessible name for the component. | `string` | `undefined` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `text` | `text` | Text that displays under the component's indicator. | `string` | `""` | +| `type` | `type` | Specifies the component type. Use `"indeterminate"` if finding actual progress value is impossible. Otherwise, use `"determinate"` to have the value indicate the progress or `"determinate-value"` to have the value label displayed along the progress. | `"determinate" \| "determinate-value" \| "indeterminate"` | `"indeterminate"` | +| `value` | `value` | The component's value. Valid only for `"determinate"` indicators. Percent complete of 100. | `number` | `0` | ## CSS Custom Properties diff --git a/packages/calcite-components/src/components/popover/readme.md b/packages/calcite-components/src/components/popover/readme.md index 0ea2873e442..3691fd71ab9 100644 --- a/packages/calcite-components/src/components/popover/readme.md +++ b/packages/calcite-components/src/components/popover/readme.md @@ -11,7 +11,7 @@ For comprehensive guidance on using and implementing `calcite-popover`, refer to | `autoClose` | `auto-close` | When `true`, clicking outside of the component automatically closes open `calcite-popover`s. | `boolean` | `false` | | `closable` | `closable` | When `true`, displays a close button within the component. | `boolean` | `false` | | `flipDisabled` | `flip-disabled` | When `true`, prevents flipping the component's placement when overlapping its `referenceElement`. | `boolean` | `false` | -| `flipPlacements` | -- | Defines the available placements that can be used when a flip occurs. | `FlipPlacement[]` | `undefined` | +| `flipPlacements` | -- | Specifies the component's fallback `placement` when it's initial or specified `placement` has insufficient space available. | `FlipPlacement[]` | `undefined` | | `focusTrapDisabled` | `focus-trap-disabled` | When `true`, prevents focus trapping. | `boolean` | `false` | | `heading` | `heading` | The component header text. | `string` | `undefined` | | `headingLevel` | `heading-level` | Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | diff --git a/packages/calcite-components/src/components/progress/readme.md b/packages/calcite-components/src/components/progress/readme.md index 644d369487b..70ac7e71742 100644 --- a/packages/calcite-components/src/components/progress/readme.md +++ b/packages/calcite-components/src/components/progress/readme.md @@ -14,6 +14,14 @@ For comprehensive guidance on using and implementing `calcite-progress`, refer t | `type` | `type` | Specifies the component type. Use `"indeterminate"` if finding actual progress value is impossible. | `"determinate" \| "indeterminate"` | `"determinate"` | | `value` | `value` | When `type` is `"determinate"`, the component's progress value with a range of 0.0 - 1.0. | `number` | `0` | +## CSS Custom Properties + +| Name | Description | +| ------------------------------------- | ---------------------------------------------- | +| `--calcite-progress-background-color` | Defines the background color of the component. | +| `--calcite-progress-fill-color` | Defines the fill color of the progress bar. | +| `--calcite-progress-text-color` | Defines the text color of the component. | + ## Dependencies ### Used by diff --git a/packages/calcite-components/src/components/split-button/readme.md b/packages/calcite-components/src/components/split-button/readme.md index 5e51d9b6f5b..948015150c3 100644 --- a/packages/calcite-components/src/components/split-button/readme.md +++ b/packages/calcite-components/src/components/split-button/readme.md @@ -12,7 +12,7 @@ For comprehensive guidance on using and implementing `calcite-split-button`, ref | `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | | `dropdownIconType` | `dropdown-icon-type` | Specifies the icon used for the dropdown menu. | `"caret" \| "chevron" \| "ellipsis" \| "overflow"` | `"chevron"` | | `dropdownLabel` | `dropdown-label` | Accessible name for the dropdown menu. | `string` | `undefined` | -| `flipPlacements` | -- | Defines the available placements that can be used when a flip occurs. | `FlipPlacement[]` | `undefined` | +| `flipPlacements` | -- | Specifies the component's fallback slotted content `placement` when it's initial or specified `placement` has insufficient space available. | `FlipPlacement[]` | `undefined` | | `kind` | `kind` | Specifies the kind of the component, which will apply to border and background, if applicable. | `"brand" \| "danger" \| "inverse" \| "neutral"` | `"brand"` | | `loading` | `loading` | When `true`, a busy indicator is displayed on the primary button. | `boolean` | `false` | | `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"` | `"absolute"` |