From caf8692edf96dc2124a33c7c18e0b7b2b4d97308 Mon Sep 17 00:00:00 2001 From: jcfranco Date: Sun, 7 Jan 2024 01:07:48 +0000 Subject: [PATCH] docs: update component READMEs --- .../calcite-components/src/components.d.ts | 160 ++++-------------- .../src/components/action-bar/readme.md | 22 +-- .../src/components/action-group/readme.md | 2 +- .../src/components/action-menu/readme.md | 2 +- .../src/components/action-pad/readme.md | 20 +-- .../src/components/action/readme.md | 32 ++-- .../src/components/alert/readme.md | 2 +- .../src/components/block-section/readme.md | 16 +- .../src/components/block/readme.md | 38 ++--- .../src/components/button/readme.md | 44 ++--- .../src/components/card/readme.md | 2 +- .../src/components/checkbox/readme.md | 4 +- .../src/components/chip-group/readme.md | 16 +- .../src/components/chip/readme.md | 28 +-- .../color-picker-hex-input/readme.md | 16 +- .../src/components/color-picker/readme.md | 34 ++-- .../src/components/combobox-item/readme.md | 2 +- .../src/components/combobox/readme.md | 50 +++--- .../src/components/date-picker-day/readme.md | 14 +- .../date-picker-month-header/readme.md | 18 +- .../components/date-picker-month/readme.md | 6 +- .../src/components/date-picker/readme.md | 36 ++-- .../src/components/dropdown-group/readme.md | 8 +- .../src/components/filter/readme.md | 24 +-- .../src/components/flow-item/readme.md | 28 +-- .../src/components/graph/readme.md | 16 +- .../src/components/handle/readme.md | 20 +-- .../src/components/inline-editable/readme.md | 18 +- .../components/input-date-picker/readme.md | 54 +++--- .../src/components/input-number/readme.md | 72 ++++---- .../src/components/input-text/readme.md | 60 +++---- .../components/input-time-picker/readme.md | 36 ++-- .../src/components/input-time-zone/readme.md | 32 ++-- .../src/components/input/readme.md | 2 +- .../src/components/list-item/readme.md | 28 +-- .../src/components/list/readme.md | 2 +- .../src/components/menu-item/readme.md | 28 +-- .../src/components/menu/readme.md | 10 +- .../src/components/meter/readme.md | 6 +- .../src/components/modal/readme.md | 42 ++--- .../src/components/navigation-logo/readme.md | 2 +- .../src/components/navigation-user/readme.md | 2 +- .../src/components/navigation/readme.md | 8 +- .../src/components/notice/readme.md | 20 +-- .../src/components/pagination/readme.md | 18 +- .../src/components/panel/readme.md | 26 +-- .../src/components/pick-list-item/readme.md | 2 +- .../src/components/pick-list/readme.md | 4 +- .../src/components/popover/readme.md | 4 +- .../src/components/rating/readme.md | 24 +-- .../src/components/scrim/readme.md | 8 +- .../src/components/select/readme.md | 8 +- .../src/components/sheet/readme.md | 2 +- .../src/components/shell-panel/readme.md | 6 +- .../src/components/slider/readme.md | 8 +- .../src/components/split-button/readme.md | 2 +- .../src/components/stepper-item/readme.md | 20 +-- .../src/components/stepper/readme.md | 18 +- .../src/components/tab-title/readme.md | 22 +-- .../src/components/table-cell/readme.md | 12 +- .../src/components/table-header/readme.md | 16 +- .../src/components/table/readme.md | 30 ++-- .../src/components/text-area/readme.md | 2 +- .../src/components/time-picker/readme.md | 14 +- .../src/components/tip-manager/readme.md | 10 +- .../src/components/tip/readme.md | 16 +- .../src/components/value-list/readme.md | 32 ++-- 67 files changed, 646 insertions(+), 740 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 18760cd0c33..a871dfbb871 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -8,174 +8,80 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { Alignment, Appearance, Columns, FlipContext, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionMode, Status, Width } from "./components/interfaces"; import { RequestedItem } from "./components/accordion/interfaces"; import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; -import { ActionMessages } from "./components/action/assets/action/t9n"; -import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; import { EffectivePlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; -import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; -import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; import { AlertDuration, Sync } 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 { 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 { 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 { 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 { 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 { StepperMessages } from "./components/stepper/assets/stepper/t9n"; import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail } from "./components/stepper/interfaces"; -import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; -import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; import { RowType, TableLayout, TableRowFocusEvent } 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, Columns, FlipContext, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionMode, Status, Width } from "./components/interfaces"; export { RequestedItem } from "./components/accordion/interfaces"; export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; -export { ActionMessages } from "./components/action/assets/action/t9n"; -export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; export { EffectivePlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; -export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; -export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; export { AlertDuration, Sync } 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 { 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 { 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 { 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 { 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 { StepperMessages } from "./components/stepper/assets/stepper/t9n"; export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail } from "./components/stepper/interfaces"; -export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; -export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; export { RowType, TableLayout, TableRowFocusEvent } 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 { @@ -3076,7 +2982,7 @@ export namespace Components { */ "numberingSystem": NumberingSystem; /** - * When either `rangeLabels` is `true`, specifies the format of displayed labels. + * When `rangeLabels` is `true`, specifies the format of displayed labels. */ "rangeLabelType": MeterLabelType; /** @@ -3088,7 +2994,7 @@ export namespace Components { */ "scale": Scale; /** - * When `labelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or `min` values. + * When `rangeLabelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or `min` values. */ "unitLabel": string; /** @@ -3100,7 +3006,7 @@ export namespace Components { */ "valueLabel": boolean; /** - * When either `valueLabel` is `true`, specifies the format of displayed label. + * When `valueLabel` is `true`, specifies the format of displayed label. */ "valueLabelType": MeterLabelType; } @@ -3126,11 +3032,11 @@ export namespace Components { */ "focusTrapDisabled": boolean; /** - * Sets the component to always be fullscreen (overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`). + * Sets the component to always be fullscreen. Overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`. */ "fullscreen": boolean; /** - * Specifies the kind of the component (will apply to top border). + * Specifies the kind of the component, which will apply to top border. */ "kind": Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>; /** @@ -3190,13 +3096,13 @@ export namespace Components { */ "navigationAction": boolean; /** - * When `navigation-action` is `true`, sets focus on the component's action element. + * When `navigationAction` is `true`, sets focus on the component's action element. */ "setFocus": () => Promise; } interface CalciteNavigationLogo { /** - * When true, the component is highlighted. + * When `true`, the component is highlighted. */ "active": boolean; /** @@ -3244,7 +3150,7 @@ export namespace Components { } interface CalciteNavigationUser { /** - * When true, the component is highlighted. + * When `true`, the component is highlighted. */ "active": boolean; /** @@ -3290,7 +3196,7 @@ export namespace Components { */ "iconFlipRtl": boolean; /** - * Specifies the kind of the component (will apply to top border and icon). + * Specifies the kind of the component, which will apply to top border and icon. */ "kind": Extract< "brand" | "danger" | "info" | "success" | "warning", @@ -3481,12 +3387,12 @@ export namespace Components { */ "filterText": string; /** - * The currently filtered data. + * The component's filtered data. * @readonly */ "filteredData": ItemData1; /** - * The currently filtered items. + * The component's filtered items. * @readonly */ "filteredItems": HTMLCalcitePickListItemElement[]; @@ -3599,7 +3505,7 @@ export namespace Components { */ "autoClose": boolean; /** - * When `true`, display a close button within the component. + * When `true`, displays a close button within the component. */ "closable": boolean; /** @@ -4044,7 +3950,7 @@ export namespace Components { */ "position": LogicalFlowPosition; /** - * Sets focus on the component's "close" button (the first focusable item). + * Sets focus on the component's "close" button - the first focusable item. */ "setFocus": () => Promise; /** @@ -4087,12 +3993,12 @@ export namespace Components { "collapsed": boolean; /** * When `true`, the content area displays like a floating panel. - * @deprecated use `displayMode` instead. + * @deprecated Use `displayMode` instead. */ "detached": boolean; /** * When `displayMode` is `float`, specifies the maximum height of the component. - * @deprecated use `heightScale` instead. + * @deprecated Use `heightScale` instead. */ "detachedHeightScale": Scale; /** @@ -4294,7 +4200,7 @@ export namespace Components { */ "dropdownLabel": string; /** - * Specifies the kind of the component (will apply to border and background if applicable). + * Specifies the kind of the component, which will apply to border and background, if applicable. */ "kind": Extract<"brand" | "danger" | "inverse" | "neutral", Kind>; /** @@ -10477,7 +10383,7 @@ declare namespace LocalJSX { */ "numberingSystem"?: NumberingSystem; /** - * When either `rangeLabels` is `true`, specifies the format of displayed labels. + * When `rangeLabels` is `true`, specifies the format of displayed labels. */ "rangeLabelType"?: MeterLabelType; /** @@ -10489,7 +10395,7 @@ declare namespace LocalJSX { */ "scale"?: Scale; /** - * When `labelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or `min` values. + * When `rangeLabelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or `min` values. */ "unitLabel"?: string; /** @@ -10501,7 +10407,7 @@ declare namespace LocalJSX { */ "valueLabel"?: boolean; /** - * When either `valueLabel` is `true`, specifies the format of displayed label. + * When `valueLabel` is `true`, specifies the format of displayed label. */ "valueLabelType"?: MeterLabelType; } @@ -10527,11 +10433,11 @@ declare namespace LocalJSX { */ "focusTrapDisabled"?: boolean; /** - * Sets the component to always be fullscreen (overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`). + * Sets the component to always be fullscreen. Overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`. */ "fullscreen"?: boolean; /** - * Specifies the kind of the component (will apply to top border). + * Specifies the kind of the component, which will apply to top border. */ "kind"?: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>; /** @@ -10593,13 +10499,13 @@ declare namespace LocalJSX { */ "navigationAction"?: boolean; /** - * When `navigationAction` is true, emits when the displayed action selection changes. + * When `navigationAction` is `true`, emits when the displayed action selection changes. */ "onCalciteNavigationActionSelect"?: (event: CalciteNavigationCustomEvent) => void; } interface CalciteNavigationLogo { /** - * When true, the component is highlighted. + * When `true`, the component is highlighted. */ "active"?: boolean; /** @@ -10643,7 +10549,7 @@ declare namespace LocalJSX { } interface CalciteNavigationUser { /** - * When true, the component is highlighted. + * When `true`, the component is highlighted. */ "active"?: boolean; /** @@ -10685,7 +10591,7 @@ declare namespace LocalJSX { */ "iconFlipRtl"?: boolean; /** - * Specifies the kind of the component (will apply to top border and icon). + * Specifies the kind of the component, which will apply to top border and icon. */ "kind"?: Extract< "brand" | "danger" | "info" | "success" | "warning", @@ -10883,12 +10789,12 @@ declare namespace LocalJSX { */ "filterText"?: string; /** - * The currently filtered data. + * The component's filtered data. * @readonly */ "filteredData"?: ItemData1; /** - * The currently filtered items. + * The component's filtered items. * @readonly */ "filteredItems"?: HTMLCalcitePickListItemElement[]; @@ -11015,7 +10921,7 @@ declare namespace LocalJSX { */ "autoClose"?: boolean; /** - * When `true`, display a close button within the component. + * When `true`, displays a close button within the component. */ "closable"?: boolean; /** @@ -11529,12 +11435,12 @@ declare namespace LocalJSX { "collapsed"?: boolean; /** * When `true`, the content area displays like a floating panel. - * @deprecated use `displayMode` instead. + * @deprecated Use `displayMode` instead. */ "detached"?: boolean; /** * When `displayMode` is `float`, specifies the maximum height of the component. - * @deprecated use `heightScale` instead. + * @deprecated Use `heightScale` instead. */ "detachedHeightScale"?: Scale; /** @@ -11643,11 +11549,11 @@ declare namespace LocalJSX { */ "numberingSystem"?: NumberingSystem; /** - * Fires when the thumb is released on the component. **Note:** If you need to constantly listen to the drag event, use `calciteSliderInput` instead. + * Fires when the thumb is released on the component. Note: To constantly listen to the drag event, use `calciteSliderInput` instead. */ "onCalciteSliderChange"?: (event: CalciteSliderCustomEvent) => void; /** - * Fires on all updates to the component. **Note:** Will be fired frequently during drag. If you are performing any expensive operations consider using a debounce or throttle to avoid locking up the main thread. + * Fires on all updates to the component. Note: Fires frequently during drag. To perform expensive operations consider using a debounce or throttle to avoid locking up the main thread. */ "onCalciteSliderInput"?: (event: CalciteSliderCustomEvent) => void; /** @@ -11746,7 +11652,7 @@ declare namespace LocalJSX { */ "dropdownLabel"?: string; /** - * Specifies the kind of the component (will apply to border and background if applicable). + * Specifies the kind of the component, which will apply to border and background, if applicable. */ "kind"?: Extract<"brand" | "danger" | "inverse" | "neutral", Kind>; /** diff --git a/packages/calcite-components/src/components/action-bar/readme.md b/packages/calcite-components/src/components/action-bar/readme.md index 20a39c6795c..69c80f5a4ec 100755 --- a/packages/calcite-components/src/components/action-bar/readme.md +++ b/packages/calcite-components/src/components/action-bar/readme.md @@ -61,22 +61,22 @@ Renders a group of `calcite-action`s contained in a `calcite-action-group`. Acti ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------------- | --------------------------- | ------------------------------------------------------------------------------- | ----------------------------------------- | ------------ | -| `actionsEndGroupLabel` | `actions-end-group-label` | Specifies the accessible label for the last `calcite-action-group`. | `string` | `undefined` | -| `expandDisabled` | `expand-disabled` | When `true`, the expand-toggling behavior is disabled. | `boolean` | `false` | -| `expanded` | `expanded` | When `true`, the component is expanded. | `boolean` | `false` | -| `layout` | `layout` | Specifies the layout direction of the actions. | `"horizontal" \| "vertical"` | `"vertical"` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ expand?: string; collapse?: string; }` | `undefined` | -| `overflowActionsDisabled` | `overflow-actions-disabled` | Disables automatically overflowing `calcite-action`s that won't fit into menus. | `boolean` | `false` | -| `position` | `position` | Arranges the component depending on the element's `dir` property. | `"end" \| "start"` | `undefined` | -| `scale` | `scale` | Specifies the size of the expand `calcite-action`. | `"l" \| "m" \| "s"` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------------- | --------------------------- | ------------------------------------------------------------------------------- | ---------------------------- | ------------ | +| `actionsEndGroupLabel` | `actions-end-group-label` | Specifies the accessible label for the last `calcite-action-group`. | `string` | `undefined` | +| `expandDisabled` | `expand-disabled` | When `true`, the expand-toggling behavior is disabled. | `boolean` | `false` | +| `expanded` | `expanded` | When `true`, the component is expanded. | `boolean` | `false` | +| `layout` | `layout` | Specifies the layout direction of the actions. | `"horizontal" \| "vertical"` | `"vertical"` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ActionBarMessages` | `undefined` | +| `overflowActionsDisabled` | `overflow-actions-disabled` | Disables automatically overflowing `calcite-action`s that won't fit into menus. | `boolean` | `false` | +| `position` | `position` | Arranges the component depending on the element's `dir` property. | `"end" \| "start"` | `undefined` | +| `scale` | `scale` | Specifies the size of the expand `calcite-action`. | `"l" \| "m" \| "s"` | `undefined` | ## Events | Event | Description | Type | | ------------------------ | ---------------------------------------------- | ------------------- | -| `calciteActionBarToggle` | Emits when the `expanded` property is toggled. | `CustomEvent` | +| `calciteActionBarToggle` | Fires when the `expanded` property is toggled. | `CustomEvent` | ## Methods diff --git a/packages/calcite-components/src/components/action-group/readme.md b/packages/calcite-components/src/components/action-group/readme.md index 256c10c3540..885a635966c 100755 --- a/packages/calcite-components/src/components/action-group/readme.md +++ b/packages/calcite-components/src/components/action-group/readme.md @@ -13,7 +13,7 @@ The `calcite-action-group` is a wrapper for multiple `calcite-action`s and house | `label` | `label` | Accessible name for the component. | `string` | `undefined` | | `layout` | `layout` | **[DEPRECATED]** Use the `layout` property on the component's parent instead.

Indicates the layout of the component. | `"grid" \| "horizontal" \| "vertical"` | `"vertical"` | | `menuOpen` | `menu-open` | When `true`, the `calcite-action-menu` is open. | `boolean` | `false` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ more?: string; }` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ActionGroupMessages` | `undefined` | | `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"` | | `scale` | `scale` | Specifies the size of the `calcite-action-menu`. | `"l" \| "m" \| "s"` | `undefined` | diff --git a/packages/calcite-components/src/components/action-menu/readme.md b/packages/calcite-components/src/components/action-menu/readme.md index 841f99099bc..6dc254577b8 100644 --- a/packages/calcite-components/src/components/action-menu/readme.md +++ b/packages/calcite-components/src/components/action-menu/readme.md @@ -19,7 +19,7 @@ | Event | Description | Type | | ----------------------- | ------------------------------------------ | ------------------- | -| `calciteActionMenuOpen` | Emits when the `open` property is toggled. | `CustomEvent` | +| `calciteActionMenuOpen` | Fires when the `open` property is toggled. | `CustomEvent` | ## Methods diff --git a/packages/calcite-components/src/components/action-pad/readme.md b/packages/calcite-components/src/components/action-pad/readme.md index da480c1bd8d..5de2aa4b86e 100755 --- a/packages/calcite-components/src/components/action-pad/readme.md +++ b/packages/calcite-components/src/components/action-pad/readme.md @@ -45,21 +45,21 @@ Renders a group of `calcite-action`s contained in a `calcite-action-group`. Acti ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------------- | ------------------------- | ----------------------------------------------------------------------- | ----------------------------------------- | ------------ | -| `actionsEndGroupLabel` | `actions-end-group-label` | Specifies the accessible label for the last `calcite-action-group`. | `string` | `undefined` | -| `expandDisabled` | `expand-disabled` | When `true`, the expand-toggling behavior is disabled. | `boolean` | `false` | -| `expanded` | `expanded` | When `true`, the component is expanded. | `boolean` | `false` | -| `layout` | `layout` | Indicates the layout of the component. | `"grid" \| "horizontal" \| "vertical"` | `"vertical"` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ expand?: string; collapse?: string; }` | `undefined` | -| `position` | `position` | Arranges the component depending on the element's `dir` property. | `"end" \| "start"` | `undefined` | -| `scale` | `scale` | Specifies the size of the expand `calcite-action`. | `"l" \| "m" \| "s"` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ---------------------- | ------------------------- | ----------------------------------------------------------------------- | -------------------------------------- | ------------ | +| `actionsEndGroupLabel` | `actions-end-group-label` | Specifies the accessible label for the last `calcite-action-group`. | `string` | `undefined` | +| `expandDisabled` | `expand-disabled` | When `true`, the expand-toggling behavior is disabled. | `boolean` | `false` | +| `expanded` | `expanded` | When `true`, the component is expanded. | `boolean` | `false` | +| `layout` | `layout` | Indicates the layout of the component. | `"grid" \| "horizontal" \| "vertical"` | `"vertical"` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ActionPadMessages` | `undefined` | +| `position` | `position` | Arranges the component depending on the element's `dir` property. | `"end" \| "start"` | `undefined` | +| `scale` | `scale` | Specifies the size of the expand `calcite-action`. | `"l" \| "m" \| "s"` | `undefined` | ## Events | Event | Description | Type | | ------------------------ | ---------------------------------------------- | ------------------- | -| `calciteActionPadToggle` | Emits when the `expanded` property is toggled. | `CustomEvent` | +| `calciteActionPadToggle` | Fires when the `expanded` property is toggled. | `CustomEvent` | ## Methods diff --git a/packages/calcite-components/src/components/action/readme.md b/packages/calcite-components/src/components/action/readme.md index b8c3cb5f3a2..f671337d865 100755 --- a/packages/calcite-components/src/components/action/readme.md +++ b/packages/calcite-components/src/components/action/readme.md @@ -42,22 +42,22 @@ Renders a `calcite-action` that displays only an icon. ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ----------- | -| `active` | `active` | When `true`, the component is highlighted. | `boolean` | `false` | -| `alignment` | `alignment` | Specifies the horizontal alignment of button elements with text content. | `"center" \| "end" \| "start"` | `undefined` | -| `appearance` | `appearance` | Specifies the appearance of the component. | `"solid" \| "transparent"` | `"solid"` | -| `compact` | `compact` | When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`. | `boolean` | `false` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `icon` | `icon` | Specifies an icon to display. | `string` | `undefined` | -| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | -| `indicator` | `indicator` | When `true`, displays a visual indicator. | `boolean` | `false` | -| `label` | `label` | Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop. | `string` | `undefined` | -| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ loading?: string; indicator?: string; }` | `undefined` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `text` *(required)* | `text` | Specifies text that accompanies the icon. | `string` | `undefined` | -| `textEnabled` | `text-enabled` | Indicates whether the text is displayed. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | ----------- | +| `active` | `active` | When `true`, the component is highlighted. | `boolean` | `false` | +| `alignment` | `alignment` | Specifies the horizontal alignment of button elements with text content. | `"center" \| "end" \| "start"` | `undefined` | +| `appearance` | `appearance` | Specifies the appearance of the component. | `"solid" \| "transparent"` | `"solid"` | +| `compact` | `compact` | When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`. | `boolean` | `false` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `icon` | `icon` | Specifies an icon to display. | `string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | +| `indicator` | `indicator` | When `true`, displays a visual indicator. | `boolean` | `false` | +| `label` | `label` | Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop. | `string` | `undefined` | +| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ActionMessages` | `undefined` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `text` *(required)* | `text` | Specifies text that accompanies the icon. | `string` | `undefined` | +| `textEnabled` | `text-enabled` | Indicates whether the text is displayed. | `boolean` | `false` | ## Methods diff --git a/packages/calcite-components/src/components/alert/readme.md b/packages/calcite-components/src/components/alert/readme.md index 7632556e1fe..4b36515b439 100644 --- a/packages/calcite-components/src/components/alert/readme.md +++ b/packages/calcite-components/src/components/alert/readme.md @@ -26,7 +26,7 @@ A single instance of an alert. Multiple alerts will aggregate in a queue. | `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | | `kind` | `kind` | Specifies the kind of the component, which will apply to top border and icon. | `"brand" \| "danger" \| "info" \| "success" \| "warning"` | `"brand"` | | `label` *(required)* | `label` | Specifies an accessible name for the component. | `string` | `undefined` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ close?: string; }` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `AlertMessages` | `undefined` | | `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` | | `open` | `open` | When `true`, displays and positions the component. | `boolean` | `false` | | `placement` | `placement` | Specifies the placement of the component. | `"bottom" \| "bottom-end" \| "bottom-start" \| "top" \| "top-end" \| "top-start"` | `"bottom"` | diff --git a/packages/calcite-components/src/components/block-section/readme.md b/packages/calcite-components/src/components/block-section/readme.md index 18bb9318a9a..d422037325e 100644 --- a/packages/calcite-components/src/components/block-section/readme.md +++ b/packages/calcite-components/src/components/block-section/readme.md @@ -6,19 +6,19 @@ The `calcite-block-section` component is a child element of `calcite-block`. Sec ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | ---------------- | --------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ----------- | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ collapse?: string; expand?: string; }` | `undefined` | -| `open` | `open` | When `true`, expands the component and its contents. | `boolean` | `false` | -| `status` | `status` | Displays a status-related indicator icon. | `"idle" \| "invalid" \| "valid"` | `undefined` | -| `text` | `text` | The component header text. | `string` | `undefined` | -| `toggleDisplay` | `toggle-display` | Specifies the component's toggle display - `"button"` (selectable header), or `"switch"` (toggle switch). | `"button" \| "switch"` | `"button"` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `BlockSectionMessages` | `undefined` | +| `open` | `open` | When `true`, expands the component and its contents. | `boolean` | `false` | +| `status` | `status` | Displays a status-related indicator icon. | `"idle" \| "invalid" \| "valid"` | `undefined` | +| `text` | `text` | The component header text. | `string` | `undefined` | +| `toggleDisplay` | `toggle-display` | Specifies how the component's toggle is displayed - `"button"` (selectable header), or `"switch"` (toggle switch). | `"button" \| "switch"` | `"button"` | ## Events | Event | Description | Type | | --------------------------- | --------------------------------------- | ------------------- | -| `calciteBlockSectionToggle` | Emits when the header has been clicked. | `CustomEvent` | +| `calciteBlockSectionToggle` | Fires when the header has been clicked. | `CustomEvent` | ## Methods diff --git a/packages/calcite-components/src/components/block/readme.md b/packages/calcite-components/src/components/block/readme.md index 796d8db1a8e..4bcbe8de7b0 100644 --- a/packages/calcite-components/src/components/block/readme.md +++ b/packages/calcite-components/src/components/block/readme.md @@ -66,28 +66,28 @@ Renders a header and icon with the icon. ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------------- | --------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ----------- | -| `collapsible` | `collapsible` | When `true`, the component is collapsible. | `boolean` | `false` | -| `description` | `description` | A description for the component, which displays below the heading. | `string` | `undefined` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `dragHandle` | `drag-handle` | When `true`, displays a drag handle in the header. | `boolean` | `false` | -| `heading` *(required)* | `heading` | The component header text. | `string` | `undefined` | -| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | -| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ collapse?: string; expand?: string; loading?: string; options?: string; }` | `undefined` | -| `open` | `open` | When `true`, expands the component and its contents. | `boolean` | `false` | -| `status` | `status` | Displays a status-related indicator icon. | `"idle" \| "invalid" \| "valid"` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ---------------------- | ------------------- | ---------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| `collapsible` | `collapsible` | When `true`, the component is collapsible. | `boolean` | `false` | +| `description` | `description` | A description for the component, which displays below the heading. | `string` | `undefined` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `dragHandle` | `drag-handle` | When `true`, displays a drag handle in the header. | `boolean` | `false` | +| `heading` *(required)* | `heading` | The component header text. | `string` | `undefined` | +| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | +| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `BlockMessages` | `undefined` | +| `open` | `open` | When `true`, expands the component and its contents. | `boolean` | `false` | +| `status` | `status` | Displays a status-related indicator icon. | `"idle" \| "invalid" \| "valid"` | `undefined` | ## Events -| Event | Description | Type | -| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | -| `calciteBlockBeforeClose` | Fires when the component is requested to be closed and before the closing transition begins. | `CustomEvent` | -| `calciteBlockBeforeOpen` | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. | `CustomEvent` | -| `calciteBlockClose` | Fires when the component is closed and animation is complete. | `CustomEvent` | -| `calciteBlockOpen` | Fires when the component is open and animation is complete. | `CustomEvent` | -| `calciteBlockToggle` | **[DEPRECATED]** use `openClose` events: `calciteBlock[Before]Open` and `calciteBlock[Before]Close` instead.

Emits when the component's header is clicked. | `CustomEvent` | +| Event | Description | Type | +| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | +| `calciteBlockBeforeClose` | Fires when the component is requested to be closed and before the closing transition begins. | `CustomEvent` | +| `calciteBlockBeforeOpen` | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. | `CustomEvent` | +| `calciteBlockClose` | Fires when the component is closed and animation is complete. | `CustomEvent` | +| `calciteBlockOpen` | Fires when the component is open and animation is complete. | `CustomEvent` | +| `calciteBlockToggle` | **[DEPRECATED]** Use `openClose` events such as `calciteBlockOpen`, `calciteBlockClose`, `calciteBlockBeforeOpen`, and `calciteBlockBeforeClose` instead.

Fires when the component's header is clicked. | `CustomEvent` | ## Methods diff --git a/packages/calcite-components/src/components/button/readme.md b/packages/calcite-components/src/components/button/readme.md index 4c92b102f59..c58dc8e9474 100644 --- a/packages/calcite-components/src/components/button/readme.md +++ b/packages/calcite-components/src/components/button/readme.md @@ -61,28 +61,28 @@ Any additional attributes set on `` are passed to the internal ` ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------- | -| `alignment` | `alignment` | Specifies the alignment of the component's elements. | `"center" \| "end" \| "icon-end-space-between" \| "icon-start-space-between" \| "space-between" \| "start"` | `"center"` | -| `appearance` | `appearance` | Specifies the appearance style of the component. | `"outline" \| "outline-fill" \| "solid" \| "transparent"` | `"solid"` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `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` | -| `href` | `href` | Specifies the URL of the linked resource, which can be set as an absolute or relative path. | `string` | `undefined` | -| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `string` | `undefined` | -| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | -| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `string` | `undefined` | -| `kind` | `kind` | Specifies the kind of the component (will apply to border and background if applicable). | `"brand" \| "danger" \| "inverse" \| "neutral"` | `"brand"` | -| `label` | `label` | Accessible name for the component. | `string` | `undefined` | -| `loading` | `loading` | When `true`, a busy indicator is displayed and interaction is disabled. | `boolean` | `false` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ loading?: string; }` | `undefined` | -| `name` | `name` | Specifies the name of the component on form submission. | `string` | `undefined` | -| `rel` | `rel` | Defines the relationship between the `href` value and the current document. | `string` | `undefined` | -| `round` | `round` | When `true`, adds a round style to the component. | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `splitChild` | `split-child` | Specifies if the component is a child of a `calcite-split-button`. | `"primary" \| "secondary" \| boolean` | `false` | -| `target` | `target` | Specifies where to open the linked document defined in the `href` property. | `string` | `undefined` | -| `type` | `type` | Specifies the default behavior of the button. | `string` | `"button"` | -| `width` | `width` | Specifies the width of the component. | `"auto" \| "full" \| "half"` | `"auto"` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------- | +| `alignment` | `alignment` | Specifies the alignment of the component's elements. | `"center" \| "end" \| "icon-end-space-between" \| "icon-start-space-between" \| "space-between" \| "start"` | `"center"` | +| `appearance` | `appearance` | Specifies the appearance style of the component. | `"outline" \| "outline-fill" \| "solid" \| "transparent"` | `"solid"` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `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` | +| `href` | `href` | Specifies the URL of the linked resource, which can be set as an absolute or relative path. | `string` | `undefined` | +| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | +| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `string` | `undefined` | +| `kind` | `kind` | Specifies the kind of the component, which will apply to the border and background if applicable. | `"brand" \| "danger" \| "inverse" \| "neutral"` | `"brand"` | +| `label` | `label` | Accessible name for the component. | `string` | `undefined` | +| `loading` | `loading` | When `true`, a busy indicator is displayed and interaction is disabled. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ButtonMessages` | `undefined` | +| `name` | `name` | Specifies the name of the component on form submission. | `string` | `undefined` | +| `rel` | `rel` | Defines the relationship between the `href` value and the current document. | `string` | `undefined` | +| `round` | `round` | When `true`, adds a round style to the component. | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `splitChild` | `split-child` | Specifies if the component is a child of a `calcite-split-button`. | `"primary" \| "secondary" \| boolean` | `false` | +| `target` | `target` | Specifies where to open the linked document defined in the `href` property. | `string` | `undefined` | +| `type` | `type` | Specifies the default behavior of the component. | `string` | `"button"` | +| `width` | `width` | Specifies the width of the component. | `"auto" \| "full" \| "half"` | `"auto"` | ## Methods diff --git a/packages/calcite-components/src/components/card/readme.md b/packages/calcite-components/src/components/card/readme.md index c35de4a20e7..e62ebee85a7 100644 --- a/packages/calcite-components/src/components/card/readme.md +++ b/packages/calcite-components/src/components/card/readme.md @@ -22,7 +22,7 @@ | Property | Attribute | Description | Type | Default | | ------------------- | -------------------- | ----------------------------------------------------------------------- | ---------------------------------------------------------------- | --------------- | | `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ select?: string; loading?: string; }` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `CardMessages` | `undefined` | | `selectable` | `selectable` | When `true`, the component is selectable. | `boolean` | `false` | | `selected` | `selected` | When `true`, the component is selected. | `boolean` | `false` | | `thumbnailPosition` | `thumbnail-position` | Sets the placement of the thumbnail defined in the `thumbnail` slot. | `"block-end" \| "block-start" \| "inline-end" \| "inline-start"` | `"block-start"` | diff --git a/packages/calcite-components/src/components/checkbox/readme.md b/packages/calcite-components/src/components/checkbox/readme.md index 49d0afa368b..d81471fea35 100644 --- a/packages/calcite-components/src/components/checkbox/readme.md +++ b/packages/calcite-components/src/components/checkbox/readme.md @@ -36,7 +36,7 @@ | `guid` | `guid` | The `id` attribute of the component. When omitted, a globally unique identifier is used. | `string` | `undefined` | | `indeterminate` | `indeterminate` | When `true`, the component is initially indeterminate, which is independent from its `checked` value. The state is visual only, and can look different across browsers. | `boolean` | `false` | | `label` | `label` | Accessible name for the component. | `string` | `undefined` | -| `name` | `name` | Specifies the name of the component on form submission. | `string` | `undefined` | +| `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` | | `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | | `status` | `status` | Specifies the status of the input field, which determines message and icons. | `"idle" \| "invalid" \| "valid"` | `"idle"` | | `value` | `value` | The component's value. | `any` | `undefined` | @@ -45,7 +45,7 @@ | Event | Description | Type | | ----------------------- | ---------------------------------------------------- | ------------------- | -| `calciteCheckboxChange` | Emits when the component's `checked` status changes. | `CustomEvent` | +| `calciteCheckboxChange` | Fires when the component's `checked` status changes. | `CustomEvent` | ## Methods diff --git a/packages/calcite-components/src/components/chip-group/readme.md b/packages/calcite-components/src/components/chip-group/readme.md index b0bb6e069d6..968adc4d9c8 100644 --- a/packages/calcite-components/src/components/chip-group/readme.md +++ b/packages/calcite-components/src/components/chip-group/readme.md @@ -28,19 +28,19 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | ---------------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------------ | ----------- | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `label` *(required)* | `label` | Accessible name for the component. | `string` | `undefined` | -| `scale` | `scale` | Specifies the size of the component. Child `calcite-chip`s inherit the component's value. | `"l" \| "m" \| "s"` | `"m"` | -| `selectedItems` | -- | Specifies the component's selected items. | `HTMLCalciteChipElement[]` | `[]` | -| `selectionMode` | `selection-mode` | Specifies the selection mode of the component. | `"multiple" \| "none" \| "single" \| "single-persist"` | `"none"` | +| Property | Attribute | Description | Type | Default | +| -------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ----------- | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `label` *(required)* | `label` | Accessible name for the component. | `string` | `undefined` | +| `scale` | `scale` | Specifies the size of the component. Child `calcite-chip`s inherit the component's value. | `"l" \| "m" \| "s"` | `"m"` | +| `selectedItems` | -- | Specifies the component's selected items. | `HTMLCalciteChipElement[]` | `[]` | +| `selectionMode` | `selection-mode` | Specifies the selection mode of the component: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allow and require one selected item, `"none"` does not allow any selections. | `"multiple" \| "none" \| "single" \| "single-persist"` | `"none"` | ## Events | Event | Description | Type | | ------------------------ | --------------------------------------------- | ------------------- | -| `calciteChipGroupSelect` | Emits when the component's selection changes. | `CustomEvent` | +| `calciteChipGroupSelect` | Fires when the component's selection changes. | `CustomEvent` | ## Methods diff --git a/packages/calcite-components/src/components/chip/readme.md b/packages/calcite-components/src/components/chip/readme.md index 389ecd76909..06744361cce 100644 --- a/packages/calcite-components/src/components/chip/readme.md +++ b/packages/calcite-components/src/components/chip/readme.md @@ -12,20 +12,20 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------- | -| `appearance` | `appearance` | Specifies the appearance style of the component. | `"outline" \| "outline-fill" \| "solid"` | `"solid"` | -| `closable` | `closable` | When `true`, a close button is added to the component. | `boolean` | `false` | -| `closed` | `closed` | When `true`, hides the component. | `boolean` | `false` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `icon` | `icon` | Specifies an icon to display. | `string` | `undefined` | -| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | -| `kind` | `kind` | Specifies the kind of the component (will apply to border and background if applicable). | `"brand" \| "inverse" \| "neutral"` | `"neutral"` | -| `label` | `label` | Accessible name for the component. | `string` | `undefined` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ dismissLabel?: string; }` | `undefined` | -| `scale` | `scale` | Specifies the size of the component. When contained in a parent `calcite-chip-group` inherits the parent's `scale` value. | `"l" \| "m" \| "s"` | `"m"` | -| `selected` | `selected` | When `true`, the component is selected. | `boolean` | `false` | -| `value` *(required)* | `value` | The component's value. | `any` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------- | +| `appearance` | `appearance` | Specifies the appearance style of the component. | `"outline" \| "outline-fill" \| "solid"` | `"solid"` | +| `closable` | `closable` | When `true`, a close button is added to the component. | `boolean` | `false` | +| `closed` | `closed` | When `true`, hides the component. | `boolean` | `false` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `icon` | `icon` | Specifies an icon to display. | `string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | +| `kind` | `kind` | Specifies the kind of the component (will apply to border and background if applicable). | `"brand" \| "inverse" \| "neutral"` | `"neutral"` | +| `label` | `label` | Accessible name for the component. | `string` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ChipMessages` | `undefined` | +| `scale` | `scale` | Specifies the size of the component. When contained in a parent `calcite-chip-group` inherits the parent's `scale` value. | `"l" \| "m" \| "s"` | `"m"` | +| `selected` | `selected` | When `true`, the component is selected. | `boolean` | `false` | +| `value` *(required)* | `value` | The component's value. | `any` | `undefined` | ## Events diff --git a/packages/calcite-components/src/components/color-picker-hex-input/readme.md b/packages/calcite-components/src/components/color-picker-hex-input/readme.md index 4abb5bc0547..9d4e5ff3593 100644 --- a/packages/calcite-components/src/components/color-picker-hex-input/readme.md +++ b/packages/calcite-components/src/components/color-picker-hex-input/readme.md @@ -4,14 +4,14 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | -------------------------------------------------------------------------------------------------- | -| `allowEmpty` | `allow-empty` | When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component. When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`. | `boolean` | `false` | -| `alphaChannel` | `alpha-channel` | When true, the component will allow updates to the color's alpha value. | `boolean` | `false` | -| `hexLabel` | `hex-label` | **[DEPRECATED]** use `messages` instead

Specifies accessible label for the input field. | `string` | `"Hex"` | -| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `value` | `value` | The hex value. | `string` | `normalizeHex( hexify(DEFAULT_COLOR, this.alphaChannel), this.alphaChannel, true, )` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | -------------------------------------------------------------------------------------------------- | +| `allowEmpty` | `allow-empty` | When `true`, an empty color (`null`) will be allowed as a `value`. When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. | `boolean` | `false` | +| `alphaChannel` | `alpha-channel` | When `true`, the component will allow updates to the color's alpha value. | `boolean` | `false` | +| `hexLabel` | `hex-label` | **[DEPRECATED]** use `messages` instead

Specifies accessible label for the input field. | `string` | `"Hex"` | +| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `value` | `value` | The hex value. | `string` | `normalizeHex( hexify(DEFAULT_COLOR, this.alphaChannel), this.alphaChannel, true, )` | ## Events diff --git a/packages/calcite-components/src/components/color-picker/readme.md b/packages/calcite-components/src/components/color-picker/readme.md index dddb10b3507..c95e22b5766 100644 --- a/packages/calcite-components/src/components/color-picker/readme.md +++ b/packages/calcite-components/src/components/color-picker/readme.md @@ -12,23 +12,23 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | -| `allowEmpty` | `allow-empty` | When `true`, an empty color (`null`) will be allowed as a `value`. When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. | `boolean` | `false` | -| `alphaChannel` | `alpha-channel` | When true, the component will allow updates to the color's alpha value. | `boolean` | `false` | -| `channelsDisabled` | `channels-disabled` | When true, hides the RGB/HSV channel inputs | `boolean` | `false` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `format` | `format` | The format of `value`. When `"auto"`, the format will be inferred from `value` when set. | `"auto" \| "hex" \| "hexa" \| "hsl" \| "hsl-css" \| "hsla" \| "hsla-css" \| "hsv" \| "hsva" \| "rgb" \| "rgb-css" \| "rgba" \| "rgba-css"` | `"auto"` | -| `hexDisabled` | `hex-disabled` | When true, hides the hex input | `boolean` | `false` | -| `hideChannels` | `hide-channels` | **[DEPRECATED]** use `channelsDisabled` instead

When `true`, hides the RGB/HSV channel inputs. | `boolean` | `false` | -| `hideHex` | `hide-hex` | **[DEPRECATED]** use `hexDisabled` instead

When `true`, hides the hex input. | `boolean` | `false` | -| `hideSaved` | `hide-saved` | **[DEPRECATED]** use `savedDisabled` instead

When `true`, hides the saved colors section. | `boolean` | `false` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ b?: string; blue?: string; deleteColor?: string; g?: string; green?: string; h?: string; hsv?: string; hex?: string; hue?: string; noColor?: string; opacity?: string; r?: string; red?: string; rgb?: string; s?: string; saturation?: string; saveColor?: string; saved?: string; v?: string; value?: string; }` | `undefined` | -| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` | -| `savedDisabled` | `saved-disabled` | When true, hides the saved colors section | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `storageId` | `storage-id` | Specifies the storage ID for colors. | `string` | `undefined` | -| `value` | `value` | The component's value, where the value can be a CSS color string, or a RGB, HSL or HSV object. The type will be preserved as the color is updated. | `HSL \| HSL & ObjectWithAlpha \| HSV \| HSV & ObjectWithAlpha \| RGB \| RGB & ObjectWithAlpha \| string` | `normalizeHex( hexify(DEFAULT_COLOR, this.alphaChannel), )` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------- | +| `allowEmpty` | `allow-empty` | When `true`, an empty color (`null`) will be allowed as a `value`. When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. | `boolean` | `false` | +| `alphaChannel` | `alpha-channel` | When `true`, the component will allow updates to the color's alpha value. | `boolean` | `false` | +| `channelsDisabled` | `channels-disabled` | When `true`, hides the RGB/HSV channel inputs. | `boolean` | `false` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `format` | `format` | The format of `value`. When `"auto"`, the format will be inferred from `value` when set. | `"auto" \| "hex" \| "hexa" \| "hsl" \| "hsl-css" \| "hsla" \| "hsla-css" \| "hsv" \| "hsva" \| "rgb" \| "rgb-css" \| "rgba" \| "rgba-css"` | `"auto"` | +| `hexDisabled` | `hex-disabled` | When `true`, hides the hex input. | `boolean` | `false` | +| `hideChannels` | `hide-channels` | **[DEPRECATED]** use `channelsDisabled` instead

When `true`, hides the RGB/HSV channel inputs. | `boolean` | `false` | +| `hideHex` | `hide-hex` | **[DEPRECATED]** use `hexDisabled` instead

When `true`, hides the hex input. | `boolean` | `false` | +| `hideSaved` | `hide-saved` | **[DEPRECATED]** use `savedDisabled` instead

When `true`, hides the saved colors section. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ColorPickerMessages` | `undefined` | +| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` | +| `savedDisabled` | `saved-disabled` | When `true`, hides the saved colors section. | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `storageId` | `storage-id` | Specifies the storage ID for colors. | `string` | `undefined` | +| `value` | `value` | The component's value, where the value can be a CSS color string, or a RGB, HSL or HSV object. The type will be preserved as the color is updated. | `HSL \| HSL & ObjectWithAlpha \| HSV \| HSV & ObjectWithAlpha \| RGB \| RGB & ObjectWithAlpha \| string` | `normalizeHex( hexify(DEFAULT_COLOR, this.alphaChannel), )` | ## Events diff --git a/packages/calcite-components/src/components/combobox-item/readme.md b/packages/calcite-components/src/components/combobox-item/readme.md index 3f570972ce7..3ef9c6180d5 100644 --- a/packages/calcite-components/src/components/combobox-item/readme.md +++ b/packages/calcite-components/src/components/combobox-item/readme.md @@ -21,7 +21,7 @@ | Event | Description | Type | | --------------------------- | ------------------------------------------------------- | ------------------- | -| `calciteComboboxItemChange` | Emits whenever the component is selected or unselected. | `CustomEvent` | +| `calciteComboboxItemChange` | Fires whenever the component is selected or unselected. | `CustomEvent` | ## Slots diff --git a/packages/calcite-components/src/components/combobox/readme.md b/packages/calcite-components/src/components/combobox/readme.md index 7e0231e0c55..883594b708a 100644 --- a/packages/calcite-components/src/components/combobox/readme.md +++ b/packages/calcite-components/src/components/combobox/readme.md @@ -72,31 +72,31 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------------ | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------ | -| `allowCustomValues` | `allow-custom-values` | When `true`, allows entry of custom values, which are not in the original set of items. | `boolean` | `undefined` | -| `clearDisabled` | `clear-disabled` | When `true`, the value-clearing will be disabled. | `boolean` | `false` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `filteredItems` | -- | Specifies the component's filtered items. | `HTMLCalciteComboboxItemElement[]` | `[]` | -| `flipPlacements` | -- | Defines the available placements that can be used when a flip occurs. | `Placement[]` | `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` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ all?: string; allSelected?: string; clear?: string; removeTag?: string; selected?: string; }` | `undefined` | -| `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` | -| `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"` | -| `placeholder` | `placeholder` | Specifies the placeholder text for the input. | `string` | `undefined` | -| `placeholderIcon` | `placeholder-icon` | Specifies the placeholder icon for the input. | `string` | `undefined` | -| `placeholderIconFlipRtl` | `placeholder-icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `selectedItems` | -- | Specifies the component's selected items. | `HTMLCalciteComboboxItemElement[]` | `[]` | -| `selectionDisplay` | `selection-display` | When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections - `"all"` (displays all selections with individual `calcite-chip`s), `"fit"` (displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed), or `"single"` (display one `calcite-chip` with the total number of selections). | `"all" \| "fit" \| "single"` | `"all"` | -| `selectionMode` | `selection-mode` | Specifies the selection mode: - "multiple" allows any number of selected items (default), - "single" allows only one selection, - "single-persist" allow and require one open item, - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips. | `"ancestors" \| "multiple" \| "single" \| "single-persist"` | `"multiple"` | -| `status` | `status` | Specifies the status of the input field, which determines message and icons. | `"idle" \| "invalid" \| "valid"` | `"idle"` | -| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| string` | `undefined` | -| `validationMessage` | `validation-message` | Specifies the validation message to display under the component. | `string` | `undefined` | -| `value` | `value` | The component's value(s) from the selected `calcite-combobox-item`(s). | `string \| string[]` | `null` | +| Property | Attribute | Description | Type | Default | +| ------------------------ | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ------------ | +| `allowCustomValues` | `allow-custom-values` | When `true`, allows entry of custom values, which are not in the original set of items. | `boolean` | `undefined` | +| `clearDisabled` | `clear-disabled` | When `true`, the value-clearing will be disabled. | `boolean` | `false` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `filteredItems` | -- | Specifies the component's filtered items. | `HTMLCalciteComboboxItemElement[]` | `[]` | +| `flipPlacements` | -- | Defines the available placements that can be used when a flip occurs. | `Placement[]` | `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` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ComboboxMessages` | `undefined` | +| `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` | +| `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"` | +| `placeholder` | `placeholder` | Specifies the placeholder text for the input. | `string` | `undefined` | +| `placeholderIcon` | `placeholder-icon` | Specifies the placeholder icon for the input. | `string` | `undefined` | +| `placeholderIconFlipRtl` | `placeholder-icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `selectedItems` | -- | Specifies the component's selected items. | `HTMLCalciteComboboxItemElement[]` | `[]` | +| `selectionDisplay` | `selection-display` | When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections - `"all"` (displays all selections with individual `calcite-chip`s), `"fit"` (displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed), or `"single"` (display one `calcite-chip` with the total number of selections). | `"all" \| "fit" \| "single"` | `"all"` | +| `selectionMode` | `selection-mode` | Specifies the selection mode: `"multiple"` allows any number of selected items, `"single"` allows only one selection, `"single-persist"` allow and require one open item, `"ancestors"` is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips. | `"ancestors" \| "multiple" \| "single" \| "single-persist"` | `"multiple"` | +| `status` | `status` | Specifies the status of the input field, which determines message and icons. | `"idle" \| "invalid" \| "valid"` | `"idle"` | +| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| string` | `undefined` | +| `validationMessage` | `validation-message` | Specifies the validation message to display under the component. | `string` | `undefined` | +| `value` | `value` | The component's value(s) from the selected `calcite-combobox-item`(s). | `string \| string[]` | `null` | ## Events diff --git a/packages/calcite-components/src/components/date-picker-day/readme.md b/packages/calcite-components/src/components/date-picker-day/readme.md index 2b9c41eee8b..70233794a26 100644 --- a/packages/calcite-components/src/components/date-picker-day/readme.md +++ b/packages/calcite-components/src/components/date-picker-day/readme.md @@ -10,20 +10,20 @@ | `currentMonth` | `current-month` | Date is in the current month. | `boolean` | `false` | | `day` *(required)* | `day` | Day of the month to be shown. | `number` | `undefined` | | `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `endOfRange` | `end-of-range` | Date is the end of date range | `boolean` | `false` | -| `highlighted` | `highlighted` | Date is currently highlighted as part of the range | `boolean` | `false` | +| `endOfRange` | `end-of-range` | Date is the end of date range. | `boolean` | `false` | +| `highlighted` | `highlighted` | Date is currently highlighted as part of the range, | `boolean` | `false` | | `range` | `range` | When `true`, activates the component's range mode to allow a start and end date. | `boolean` | `false` | -| `rangeHover` | `range-hover` | Date is being hovered and within the set range | `boolean` | `false` | +| `rangeHover` | `range-hover` | Date is being hovered and within the set range. | `boolean` | `false` | | `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `undefined` | | `selected` | `selected` | When `true`, the component is selected. | `boolean` | `false` | -| `startOfRange` | `start-of-range` | Date is the start of date range | `boolean` | `false` | +| `startOfRange` | `start-of-range` | Date is the start of date range. | `boolean` | `false` | | `value` | -- | The component's value. | `Date` | `undefined` | ## Events -| Event | Description | Type | -| ------------------ | ----------------------------- | ------------------- | -| `calciteDaySelect` | Emitted when user selects day | `CustomEvent` | +| Event | Description | Type | +| ------------------ | ---------------------------- | ------------------- | +| `calciteDaySelect` | Fires when user selects day. | `CustomEvent` | ## Dependencies diff --git a/packages/calcite-components/src/components/date-picker-month-header/readme.md b/packages/calcite-components/src/components/date-picker-month-header/readme.md index 1a97b62546f..ed7af88b882 100644 --- a/packages/calcite-components/src/components/date-picker-month-header/readme.md +++ b/packages/calcite-components/src/components/date-picker-month-header/readme.md @@ -4,15 +4,15 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------- | --------------- | ------------------------------------------------------------------------ | ---------------------------- | ----------- | -| `activeDate` | -- | Focused date with indicator (will become selected date if user proceeds) | `Date` | `undefined` | -| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | -| `localeData` | -- | CLDR locale data for translated calendar info | `DateLocaleData` | `undefined` | -| `max` | -- | Specifies the latest allowed date (`"yyyy-mm-dd"`). | `Date` | `undefined` | -| `min` | -- | Specifies the earliest allowed date (`"yyyy-mm-dd"`). | `Date` | `undefined` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `undefined` | -| `selectedDate` | -- | Already selected date. | `Date` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------- | --------------- | ------------------------------------------------------------------------------------- | ---------------------------- | ----------- | +| `activeDate` | -- | The focused date is indicated and will become the selected date if the user proceeds. | `Date` | `undefined` | +| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | +| `localeData` | -- | CLDR locale data for translated calendar info. | `DateLocaleData` | `undefined` | +| `max` | -- | Specifies the latest allowed date (`"yyyy-mm-dd"`). | `Date` | `undefined` | +| `min` | -- | Specifies the earliest allowed date (`"yyyy-mm-dd"`). | `Date` | `undefined` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `undefined` | +| `selectedDate` | -- | Already selected date. | `Date` | `undefined` | ## Dependencies diff --git a/packages/calcite-components/src/components/date-picker-month/readme.md b/packages/calcite-components/src/components/date-picker-month/readme.md index 6847f0a6ea1..52ddf034db5 100644 --- a/packages/calcite-components/src/components/date-picker-month/readme.md +++ b/packages/calcite-components/src/components/date-picker-month/readme.md @@ -6,9 +6,9 @@ | Property | Attribute | Description | Type | Default | | -------------- | --------- | ----------------------------------------------------- | ------------------- | ------------ | -| `activeDate` | -- | Date currently active. | `Date` | `new Date()` | -| `endDate` | -- | End date currently active | `Date` | `undefined` | -| `hoverRange` | -- | The range of dates currently being hovered | `HoverRange` | `undefined` | +| `activeDate` | -- | The currently active Date. | `Date` | `new Date()` | +| `endDate` | -- | End date currently active. | `Date` | `undefined` | +| `hoverRange` | -- | The range of dates currently being hovered. | `HoverRange` | `undefined` | | `max` | -- | Specifies the latest allowed date (`"yyyy-mm-dd"`). | `Date` | `undefined` | | `min` | -- | Specifies the earliest allowed date (`"yyyy-mm-dd"`). | `Date` | `undefined` | | `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `undefined` | diff --git a/packages/calcite-components/src/components/date-picker/readme.md b/packages/calcite-components/src/components/date-picker/readme.md index 4eafa4c5b40..aab7bbec16a 100644 --- a/packages/calcite-components/src/components/date-picker/readme.md +++ b/packages/calcite-components/src/components/date-picker/readme.md @@ -28,29 +28,29 @@ document.querySelector("calcite-date-picker").value = ["2020-01-03", "2020-01-05 ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ----------- | -| `activeDate` | -- | Specifies the component's active date. | `Date` | `undefined` | -| `activeRange` | `active-range` | When `range` is true, specifies the active `range`. Where `"start"` specifies the starting range date and `"end"` the ending range date. | `"end" \| "start"` | `undefined` | -| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | -| `max` | `max` | Specifies the latest allowed date (`"yyyy-mm-dd"`). | `string` | `undefined` | -| `maxAsDate` | -- | Specifies the latest allowed date as a full date object (`new Date("yyyy-mm-dd")`). | `Date` | `undefined` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ nextMonth?: string; prevMonth?: string; year?: string; }` | `undefined` | -| `min` | `min` | Specifies the earliest allowed date (`"yyyy-mm-dd"`). | `string` | `undefined` | -| `minAsDate` | -- | Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`). | `Date` | `undefined` | -| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. | `"arab" \| "arabext" \| "latn"` | `undefined` | -| `proximitySelectionDisabled` | `proximity-selection-disabled` | When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range. | `boolean` | `false` | -| `range` | `range` | When `true`, activates the component's range mode to allow a start and end date. | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `value` | `value` | Specifies the selected date as a string (`"yyyy-mm-dd"`), or an array of strings for `range` values (`["yyyy-mm-dd", "yyyy-mm-dd"]`). | `string \| string[]` | `undefined` | -| `valueAsDate` | -- | Specifies the selected date as a full date object (`new Date("yyyy-mm-dd")`), or an array containing full date objects (`[new Date("yyyy-mm-dd"), new Date("yyyy-mm-dd")]`). | `Date \| Date[]` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ---------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- | +| `activeDate` | -- | Specifies the component's active date. | `Date` | `undefined` | +| `activeRange` | `active-range` | When `range` is true, specifies the active `range`. Where `"start"` specifies the starting range date and `"end"` the ending range date. | `"end" \| "start"` | `undefined` | +| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | +| `max` | `max` | Specifies the latest allowed date (`"yyyy-mm-dd"`). | `string` | `undefined` | +| `maxAsDate` | -- | Specifies the latest allowed date as a full date object (`new Date("yyyy-mm-dd")`). | `Date` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `DatePickerMessages` | `undefined` | +| `min` | `min` | Specifies the earliest allowed date (`"yyyy-mm-dd"`). | `string` | `undefined` | +| `minAsDate` | -- | Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`). | `Date` | `undefined` | +| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. | `"arab" \| "arabext" \| "latn"` | `undefined` | +| `proximitySelectionDisabled` | `proximity-selection-disabled` | When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range. | `boolean` | `false` | +| `range` | `range` | When `true`, activates the component's range mode to allow a start and end date. | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `value` | `value` | Specifies the selected date as a string (`"yyyy-mm-dd"`), or an array of strings for `range` values (`["yyyy-mm-dd", "yyyy-mm-dd"]`). | `string \| string[]` | `undefined` | +| `valueAsDate` | -- | Specifies the selected date as a full date object (`new Date("yyyy-mm-dd")`), or an array containing full date objects (`[new Date("yyyy-mm-dd"), new Date("yyyy-mm-dd")]`). | `Date \| Date[]` | `undefined` | ## Events | Event | Description | Type | | ------------------------------ | --------------------------------------------------------------------------------------------------------------------- | ------------------- | -| `calciteDatePickerChange` | Emits when a user changes the component's date. For `range` events, use `calciteDatePickerRangeChange`. | `CustomEvent` | -| `calciteDatePickerRangeChange` | Emits when a user changes the component's date `range`. For components without `range` use `calciteDatePickerChange`. | `CustomEvent` | +| `calciteDatePickerChange` | Fires when a user changes the component's date. For `range` events, use `calciteDatePickerRangeChange`. | `CustomEvent` | +| `calciteDatePickerRangeChange` | Fires when a user changes the component's date `range`. For components without `range` use `calciteDatePickerChange`. | `CustomEvent` | ## Methods diff --git a/packages/calcite-components/src/components/dropdown-group/readme.md b/packages/calcite-components/src/components/dropdown-group/readme.md index a94add137b2..2534c136e0e 100644 --- a/packages/calcite-components/src/components/dropdown-group/readme.md +++ b/packages/calcite-components/src/components/dropdown-group/readme.md @@ -4,10 +4,10 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------- | ----------- | -| `groupTitle` | `group-title` | Specifies and displays a group title. | `string` | `undefined` | -| `selectionMode` | `selection-mode` | Specifies the selection mode for `calcite-dropdown-item` children, defaults to `single`: - `multiple` allows any number of selected items, - `single` allows only one selection (default), - `none` doesn't allow for any selection. | `"multiple" \| "none" \| "single"` | `"single"` | +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------- | +| `groupTitle` | `group-title` | Specifies and displays a group title. | `string` | `undefined` | +| `selectionMode` | `selection-mode` | Specifies the selection mode for `calcite-dropdown-item` children: `"multiple"` allows any number of selected items, `"single"` allows only one selection, `"none"` doesn't allow for any selection. | `"multiple" \| "none" \| "single"` | `"single"` | ## Slots diff --git a/packages/calcite-components/src/components/filter/readme.md b/packages/calcite-components/src/components/filter/readme.md index 0c70905e6fe..c9b0b71a5cf 100644 --- a/packages/calcite-components/src/components/filter/readme.md +++ b/packages/calcite-components/src/components/filter/readme.md @@ -4,21 +4,21 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | ----------- | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `filteredItems` | -- | The component's resulting items after filtering. | `object[]` | `[]` | -| `items` | -- | Defines the items to filter. The component uses the values as the starting point, and returns items that contain the string entered in the input, using a partial match and recursive search. This property is needed to conduct filtering. | `object[]` | `[]` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ label?: string; clear?: string; }` | `undefined` | -| `placeholder` | `placeholder` | Specifies placeholder text for the input element. | `string` | `undefined` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `value` | `value` | The component's value. | `string` | `""` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ----------- | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `filteredItems` | -- | The component's resulting items after filtering. | `object[]` | `[]` | +| `items` | -- | Defines the items to filter. The component uses the values as the starting point, and returns items that contain the string entered in the input, using a partial match and recursive search. This property is needed to conduct filtering. | `object[]` | `[]` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `FilterMessages` | `undefined` | +| `placeholder` | `placeholder` | Specifies placeholder text for the input element. | `string` | `undefined` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `value` | `value` | The component's value. | `string` | `""` | ## Events -| Event | Description | Type | -| --------------------- | ---------------------------------------------- | ------------------- | -| `calciteFilterChange` | This event fires when the filter text changes. | `CustomEvent` | +| Event | Description | Type | +| --------------------- | ----------------------------------- | ------------------- | +| `calciteFilterChange` | Fires when the filter text changes. | `CustomEvent` | ## Methods diff --git a/packages/calcite-components/src/components/flow-item/readme.md b/packages/calcite-components/src/components/flow-item/readme.md index 761c61a0fd0..aa396823d24 100644 --- a/packages/calcite-components/src/components/flow-item/readme.md +++ b/packages/calcite-components/src/components/flow-item/readme.md @@ -4,20 +4,20 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | --------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ----------- | -| `beforeBack` | -- | When provided, the method will be called before it is removed from its parent `calcite-flow`. | `() => Promise` | `undefined` | -| `closable` | `closable` | When `true`, displays a close button in the trailing side of the component's header. | `boolean` | `false` | -| `closed` | `closed` | When `true`, the component will be hidden. | `boolean` | `false` | -| `collapsed` | `collapsed` | When `true`, hides the component's content area. | `boolean` | `false` | -| `collapsible` | `collapsible` | When `true`, the component is collapsible. | `boolean` | `false` | -| `description` | `description` | A description for the component. | `string` | `undefined` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `heading` | `heading` | The component header text. | `string` | `undefined` | -| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | -| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | -| `menuOpen` | `menu-open` | When `true`, the action menu items in the `header-menu-actions` slot are open. | `boolean` | `false` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ back?: string; close?: string; options?: string; }` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | --------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | +| `beforeBack` | -- | When provided, the method will be called before it is removed from its parent `calcite-flow`. | `() => Promise` | `undefined` | +| `closable` | `closable` | When `true`, displays a close button in the trailing side of the component's header. | `boolean` | `false` | +| `closed` | `closed` | When `true`, the component will be hidden. | `boolean` | `false` | +| `collapsed` | `collapsed` | When `true`, hides the component's content area. | `boolean` | `false` | +| `collapsible` | `collapsible` | When `true`, the component is collapsible. | `boolean` | `false` | +| `description` | `description` | A description for the component. | `string` | `undefined` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `heading` | `heading` | The component header text. | `string` | `undefined` | +| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | +| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | +| `menuOpen` | `menu-open` | When `true`, the action menu items in the `header-menu-actions` slot are open. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `FlowItemMessages` | `undefined` | ## Events diff --git a/packages/calcite-components/src/components/graph/readme.md b/packages/calcite-components/src/components/graph/readme.md index e189082e3a4..bbbfd730454 100644 --- a/packages/calcite-components/src/components/graph/readme.md +++ b/packages/calcite-components/src/components/graph/readme.md @@ -6,14 +6,14 @@ The graph component is used to show small, lightweight graphs in places where a ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | --------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------- | ----------- | -| `colorStops` | -- | Array of values describing a single color stop ([offset, color, opacity]) These color stops should be sorted by offset value | `ColorStop[]` | `undefined` | -| `data` | -- | Array of tuples describing a single data point ([x, y]) These data points should be sorted by x-axis value | `Point[]` | `[]` | -| `highlightMax` | `highlight-max` | End of highlight color if highlighting range | `number` | `undefined` | -| `highlightMin` | `highlight-min` | Start of highlight color if highlighting range | `number` | `undefined` | -| `max` *(required)* | `max` | Highest point of the range | `number` | `undefined` | -| `min` *(required)* | `min` | Lowest point of the range | `number` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------ | --------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------- | ----------- | +| `colorStops` | -- | Array of values describing a single color stop ([offset, color, opacity]) These color stops should be sorted by offset value. | `ColorStop[]` | `undefined` | +| `data` | -- | Array of tuples describing a single data point ([x, y]) These data points should be sorted by x-axis value. | `Point[]` | `[]` | +| `highlightMax` | `highlight-max` | End of highlight color if highlighting range. | `number` | `undefined` | +| `highlightMin` | `highlight-min` | Start of highlight color if highlighting range. | `number` | `undefined` | +| `max` *(required)* | `max` | Highest point of the range. | `number` | `undefined` | +| `min` *(required)* | `min` | Lowest point of the range. | `number` | `undefined` | ## Dependencies diff --git a/packages/calcite-components/src/components/handle/readme.md b/packages/calcite-components/src/components/handle/readme.md index 3a60a7b9027..08961d2ce62 100644 --- a/packages/calcite-components/src/components/handle/readme.md +++ b/packages/calcite-components/src/components/handle/readme.md @@ -4,19 +4,19 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | ------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ----------- | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `dragHandle` | `drag-handle` | Value for the button title attribute | `string` | `undefined` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ dragHandle?: string; dragHandleActive?: string; dragHandleChange?: string; dragHandleCommit?: string; dragHandleIdle?: string; }` | `undefined` | -| `selected` | `selected` | When `true`, the component is selected. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ---------------------------------------------------------------------------------------- | ---------------- | ----------- | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `dragHandle` | `drag-handle` | Value for the button title attribute. | `string` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `HandleMessages` | `undefined` | +| `selected` | `selected` | When `true`, the component is selected. | `boolean` | `false` | ## Events -| Event | Description | Type | -| --------------------- | ---------------------------------------------------------------------------- | -------------------------- | -| `calciteHandleChange` | Emits whenever the component is selected or unselected. | `CustomEvent` | -| `calciteHandleNudge` | Emitted when the handle is selected and the up or down arrow key is pressed. | `CustomEvent` | +| Event | Description | Type | +| --------------------- | -------------------------------------------------------------------------- | -------------------------- | +| `calciteHandleChange` | Fires whenever the component is selected or unselected. | `CustomEvent` | +| `calciteHandleNudge` | Fires when the handle is selected and the up or down arrow key is pressed. | `CustomEvent` | ## Methods diff --git a/packages/calcite-components/src/components/inline-editable/readme.md b/packages/calcite-components/src/components/inline-editable/readme.md index 822686d2d9e..2d5f93d9292 100644 --- a/packages/calcite-components/src/components/inline-editable/readme.md +++ b/packages/calcite-components/src/components/inline-editable/readme.md @@ -37,15 +37,15 @@ Add "Save" and "Cancel" controls: ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ----------- | -| `afterConfirm` | -- | Specifies a callback to be executed prior to disabling editing via the controls. When provided, the component's loading state will be handled automatically. | `() => Promise` | `undefined` | -| `controls` | `controls` | When `true` and `editingEnabled` is `true`, displays save and cancel controls on the component. | `boolean` | `false` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `editingEnabled` | `editing-enabled` | When `true`, inline editing is enabled on the component. | `boolean` | `false` | -| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ enableEditing?: string; cancelEditing?: string; confirmChanges?: string; }` | `undefined` | -| `scale` | `scale` | Specifies the size of the component. Defaults to the scale of the wrapped `calcite-input` or the scale of the closest wrapping component with a set scale. | `"l" \| "m" \| "s"` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ | ----------- | +| `afterConfirm` | -- | Specifies a callback to be executed prior to disabling editing via the controls. When provided, the component's loading state will be handled automatically. | `() => Promise` | `undefined` | +| `controls` | `controls` | When `true` and `editingEnabled` is `true`, displays save and cancel controls on the component. | `boolean` | `false` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `editingEnabled` | `editing-enabled` | When `true`, inline editing is enabled on the component. | `boolean` | `false` | +| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `InlineEditableMessages` | `undefined` | +| `scale` | `scale` | Specifies the size of the component. Defaults to the scale of the wrapped `calcite-input` or the scale of the closest wrapping component with a set scale. | `"l" \| "m" \| "s"` | `undefined` | ## Events 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 14690150f9e..ac1bd82a935 100644 --- a/packages/calcite-components/src/components/input-date-picker/readme.md +++ b/packages/calcite-components/src/components/input-date-picker/readme.md @@ -29,33 +29,33 @@ document.querySelector("calcite-input-date-picker").value = ["2023-10-01", "2023 ## Properties -| 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. | `Placement[]` | `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 number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | -| `layout` | `layout` | Defines the layout of the component. | `"horizontal" \| "vertical"` | `"horizontal"` | -| `max` | `max` | Specifies the latest allowed date ("yyyy-mm-dd"). | `string` | `undefined` | -| `maxAsDate` | -- | Specifies the latest allowed date as a full date object. | `Date` | `undefined` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ chooseDate?: string; dateFormat?: string; nextMonth?: string; prevMonth?: string; year?: string; }` | `undefined` | -| `min` | `min` | Specifies the earliest allowed date ("yyyy-mm-dd"). | `string` | `undefined` | -| `minAsDate` | -- | Specifies the earliest allowed date as a full date object. | `Date` | `undefined` | -| `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` | -| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. | `"arab" \| "arabext" \| "latn"` | `undefined` | -| `open` | `open` | When `true`, displays the `calcite-date-picker` 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"` | -| `placement` | `placement` | Specifies the placement of the `calcite-date-picker` relative to the component. | `"bottom" \| "bottom-end" \| "bottom-start" \| "top" \| "top-end" \| "top-start"` | `defaultMenuPlacement` | -| `proximitySelectionDisabled` | `proximity-selection-disabled` | When `true`, disables the default behavior on the third click of narrowing or extending the range. Instead starts a new range. | `boolean` | `false` | -| `range` | `range` | When `true`, activates a range for the component. | `boolean` | `false` | -| `readOnly` | `read-only` | When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified. | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `status` | `status` | Specifies the status of the input field, which determines message and icons. | `"idle" \| "invalid" \| "valid"` | `"idle"` | -| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| string` | `undefined` | -| `validationMessage` | `validation-message` | Specifies the validation message to display under the component. | `string` | `undefined` | -| `value` | `value` | Selected date as a string in ISO format (YYYY-MM-DD) | `string \| string[]` | `""` | -| `valueAsDate` | -- | The component's value as a full date object. | `Date \| Date[]` | `undefined` | +| 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. | `Placement[]` | `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 number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | +| `layout` | `layout` | Defines the layout of the component. | `"horizontal" \| "vertical"` | `"horizontal"` | +| `max` | `max` | Specifies the latest allowed date ("yyyy-mm-dd"). | `string` | `undefined` | +| `maxAsDate` | -- | Specifies the latest allowed date as a full date object. | `Date` | `undefined` | +| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ [x: string]: any; }` | `undefined` | +| `min` | `min` | Specifies the earliest allowed date ("yyyy-mm-dd"). | `string` | `undefined` | +| `minAsDate` | -- | Specifies the earliest allowed date as a full date object. | `Date` | `undefined` | +| `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` | +| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. | `"arab" \| "arabext" \| "latn"` | `undefined` | +| `open` | `open` | When `true`, displays the `calcite-date-picker` 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"` | +| `placement` | `placement` | Specifies the placement of the `calcite-date-picker` relative to the component. | `"bottom" \| "bottom-end" \| "bottom-start" \| "top" \| "top-end" \| "top-start"` | `defaultMenuPlacement` | +| `proximitySelectionDisabled` | `proximity-selection-disabled` | When `true`, disables the default behavior on the third click of narrowing or extending the range. Instead starts a new range. | `boolean` | `false` | +| `range` | `range` | When `true`, activates a range for the component. | `boolean` | `false` | +| `readOnly` | `read-only` | When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified. | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `status` | `status` | Specifies the status of the input field, which determines message and icons. | `"idle" \| "invalid" \| "valid"` | `"idle"` | +| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| string` | `undefined` | +| `validationMessage` | `validation-message` | Specifies the validation message to display under the component. | `string` | `undefined` | +| `value` | `value` | Selected date as a string in ISO format (YYYY-MM-DD) | `string \| string[]` | `""` | +| `valueAsDate` | -- | The component's value as a full date object. | `Date \| Date[]` | `undefined` | ## Events diff --git a/packages/calcite-components/src/components/input-number/readme.md b/packages/calcite-components/src/components/input-number/readme.md index 7f63201b79e..3e7b9654d6d 100644 --- a/packages/calcite-components/src/components/input-number/readme.md +++ b/packages/calcite-components/src/components/input-number/readme.md @@ -23,42 +23,42 @@ Restrict the component to integer numbers only with `integer`, which will disabl ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | ------------ | -| `alignment` | `alignment` | Specifies the text alignment of the component's value. | `"end" \| "start"` | `"start"` | -| `autocomplete` | `autocomplete` | Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info. | `string` | `undefined` | -| `autofocus` | `autofocus` | When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. | `boolean` | `false` | -| `clearable` | `clearable` | When `true`, a clear button is displayed when the component has a value. | `boolean` | `false` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `enterKeyHint` | `enter-key-hint` | Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info. | `string` | `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` | -| `groupSeparator` | `group-separator` | When `true`, number values are displayed with a group separator corresponding to the language and country format. | `boolean` | `false` | -| `hidden` | `hidden` | When `true`, the component will not be visible. | `boolean` | `false` | -| `icon` | `icon` | Specifies an icon to display. | `boolean \| string` | `undefined` | -| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | -| `inputMode` | `input-mode` | Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info. | `string` | `"decimal"` | -| `integer` | `integer` | When `true`, restricts the component to integer numbers only and disables exponential notation. | `boolean` | `false` | -| `label` | `label` | Accessible name for the component's button or hyperlink. | `string` | `undefined` | -| `loading` | `loading` | When `true`, the component is in the loading state and `calcite-progress` is displayed. | `boolean` | `false` | -| `max` | `max` | Specifies the maximum value. | `number` | `undefined` | -| `maxLength` | `max-length` | Specifies the maximum length of text for the component's value. | `number` | `undefined` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ clear?: string; loading?: string; }` | `undefined` | -| `min` | `min` | Specifies the minimum value. | `number` | `undefined` | -| `minLength` | `min-length` | Specifies the minimum length of text for the component's value. | `number` | `undefined` | -| `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` | -| `numberButtonType` | `number-button-type` | Specifies the placement of the buttons. | `"horizontal" \| "none" \| "vertical"` | `"vertical"` | -| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` | -| `placeholder` | `placeholder` | Specifies placeholder text for the component. | `string` | `undefined` | -| `prefixText` | `prefix-text` | Adds text to the start of the component. | `string` | `undefined` | -| `readOnly` | `read-only` | When `true`, the component's value can be read, but cannot be modified. | `boolean` | `false` | -| `required` | `required` | When `true`, the component must have a value in order for the form to submit. | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `status` | `status` | Specifies the status of the input field, which determines message and icons. | `"idle" \| "invalid" \| "valid"` | `"idle"` | -| `step` | `step` | Specifies the granularity that the component's value must adhere to. | `"any" \| number` | `undefined` | -| `suffixText` | `suffix-text` | Adds text to the end of the component. | `string` | `undefined` | -| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| string` | `undefined` | -| `validationMessage` | `validation-message` | Specifies the validation message to display under the component. | `string` | `undefined` | -| `value` | `value` | The component's value. | `string` | `""` | +| Property | Attribute | Description | Type | Default | +| ------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------------ | +| `alignment` | `alignment` | Specifies the text alignment of the component's value. | `"end" \| "start"` | `"start"` | +| `autocomplete` | `autocomplete` | Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info. | `string` | `undefined` | +| `autofocus` | `autofocus` | When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. | `boolean` | `false` | +| `clearable` | `clearable` | When `true`, a clear button is displayed when the component has a value. | `boolean` | `false` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `enterKeyHint` | `enter-key-hint` | Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info. | `string` | `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` | +| `groupSeparator` | `group-separator` | When `true`, number values are displayed with a group separator corresponding to the language and country format. | `boolean` | `false` | +| `hidden` | `hidden` | When `true`, the component will not be visible. | `boolean` | `false` | +| `icon` | `icon` | Specifies an icon to display. | `boolean \| string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | +| `inputMode` | `input-mode` | Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info. | `string` | `"decimal"` | +| `integer` | `integer` | When `true`, restricts the component to integer numbers only and disables exponential notation. | `boolean` | `false` | +| `label` | `label` | Accessible name for the component's button or hyperlink. | `string` | `undefined` | +| `loading` | `loading` | When `true`, the component is in the loading state and `calcite-progress` is displayed. | `boolean` | `false` | +| `max` | `max` | Specifies the maximum value. | `number` | `undefined` | +| `maxLength` | `max-length` | Specifies the maximum length of text for the component's value. | `number` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `InputNumberMessages` | `undefined` | +| `min` | `min` | Specifies the minimum value. | `number` | `undefined` | +| `minLength` | `min-length` | Specifies the minimum length of text for the component's value. | `number` | `undefined` | +| `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` | +| `numberButtonType` | `number-button-type` | Specifies the placement of the buttons. | `"horizontal" \| "none" \| "vertical"` | `"vertical"` | +| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` | +| `placeholder` | `placeholder` | Specifies placeholder text for the component. | `string` | `undefined` | +| `prefixText` | `prefix-text` | Adds text to the start of the component. | `string` | `undefined` | +| `readOnly` | `read-only` | When `true`, the component's value can be read, but cannot be modified. | `boolean` | `false` | +| `required` | `required` | When `true`, the component must have a value in order for the form to submit. | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `status` | `status` | Specifies the status of the input field, which determines message and icons. | `"idle" \| "invalid" \| "valid"` | `"idle"` | +| `step` | `step` | Specifies the granularity that the component's value must adhere to. | `"any" \| number` | `undefined` | +| `suffixText` | `suffix-text` | Adds text to the end of the component. | `string` | `undefined` | +| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| string` | `undefined` | +| `validationMessage` | `validation-message` | Specifies the validation message to display under the component. | `string` | `undefined` | +| `value` | `value` | The component's value. | `string` | `""` | ## Events diff --git a/packages/calcite-components/src/components/input-text/readme.md b/packages/calcite-components/src/components/input-text/readme.md index 0cac36bc70a..f9fc27b0938 100644 --- a/packages/calcite-components/src/components/input-text/readme.md +++ b/packages/calcite-components/src/components/input-text/readme.md @@ -12,36 +12,36 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | ----------- | -| `alignment` | `alignment` | Specifies the text alignment of the component's value. | `"end" \| "start"` | `"start"` | -| `autocomplete` | `autocomplete` | Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info. | `string` | `undefined` | -| `autofocus` | `autofocus` | When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. | `boolean` | `false` | -| `clearable` | `clearable` | When `true`, a clear button is displayed when the component has a value. | `boolean` | `false` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `enterKeyHint` | `enter-key-hint` | Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info. | `string` | `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` | -| `hidden` | `hidden` | When `true`, the component will not be visible. | `boolean` | `false` | -| `icon` | `icon` | Specifies an icon to display. | `boolean \| string` | `undefined` | -| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | -| `inputMode` | `input-mode` | Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info. | `string` | `"text"` | -| `label` | `label` | Accessible name for the component's button or hyperlink. | `string` | `undefined` | -| `loading` | `loading` | When `true`, the component is in the loading state and `calcite-progress` is displayed. | `boolean` | `false` | -| `maxLength` | `max-length` | Specifies the maximum length of text for the component's value. | `number` | `undefined` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ clear?: string; loading?: string; }` | `undefined` | -| `minLength` | `min-length` | Specifies the minimum length of text for the component's value. | `number` | `undefined` | -| `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` | -| `pattern` | `pattern` | Specifies a regex pattern the component's `value` must match for validation. Read the native attribute's documentation on MDN for more info. | `string` | `undefined` | -| `placeholder` | `placeholder` | Specifies placeholder text for the component. | `string` | `undefined` | -| `prefixText` | `prefix-text` | Adds text to the start of the component. | `string` | `undefined` | -| `readOnly` | `read-only` | When `true`, the component's value can be read, but cannot be modified. | `boolean` | `false` | -| `required` | `required` | When `true`, the component must have a value in order for the form to submit. | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `status` | `status` | Specifies the status of the input field, which determines message and icons. | `"idle" \| "invalid" \| "valid"` | `"idle"` | -| `suffixText` | `suffix-text` | Adds text to the end of the component. | `string` | `undefined` | -| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| string` | `undefined` | -| `validationMessage` | `validation-message` | Specifies the validation message to display under the component. | `string` | `undefined` | -| `value` | `value` | The component's value. | `string` | `""` | +| Property | Attribute | Description | Type | Default | +| ------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| `alignment` | `alignment` | Specifies the text alignment of the component's value. | `"end" \| "start"` | `"start"` | +| `autocomplete` | `autocomplete` | Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info. | `string` | `undefined` | +| `autofocus` | `autofocus` | When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. | `boolean` | `false` | +| `clearable` | `clearable` | When `true`, a clear button is displayed when the component has a value. | `boolean` | `false` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `enterKeyHint` | `enter-key-hint` | Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info. | `string` | `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` | +| `hidden` | `hidden` | When `true`, the component will not be visible. | `boolean` | `false` | +| `icon` | `icon` | Specifies an icon to display. | `boolean \| string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | +| `inputMode` | `input-mode` | Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info. | `string` | `"text"` | +| `label` | `label` | Accessible name for the component's button or hyperlink. | `string` | `undefined` | +| `loading` | `loading` | When `true`, the component is in the loading state and `calcite-progress` is displayed. | `boolean` | `false` | +| `maxLength` | `max-length` | Specifies the maximum length of text for the component's value. | `number` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `InputTextMessages` | `undefined` | +| `minLength` | `min-length` | Specifies the minimum length of text for the component's value. | `number` | `undefined` | +| `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` | +| `pattern` | `pattern` | Specifies a regex pattern the component's `value` must match for validation. Read the native attribute's documentation on MDN for more info. | `string` | `undefined` | +| `placeholder` | `placeholder` | Specifies placeholder text for the component. | `string` | `undefined` | +| `prefixText` | `prefix-text` | Adds text to the start of the component. | `string` | `undefined` | +| `readOnly` | `read-only` | When `true`, the component's value can be read, but cannot be modified. | `boolean` | `false` | +| `required` | `required` | When `true`, the component must have a value in order for the form to submit. | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `status` | `status` | Specifies the status of the input field, which determines message and icons. | `"idle" \| "invalid" \| "valid"` | `"idle"` | +| `suffixText` | `suffix-text` | Adds text to the end of the component. | `string` | `undefined` | +| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| string` | `undefined` | +| `validationMessage` | `validation-message` | Specifies the validation message to display under the component. | `string` | `undefined` | +| `value` | `value` | The component's value. | `string` | `""` | ## Events diff --git a/packages/calcite-components/src/components/input-time-picker/readme.md b/packages/calcite-components/src/components/input-time-picker/readme.md index 9c25c3fa4b0..9334e987332 100644 --- a/packages/calcite-components/src/components/input-time-picker/readme.md +++ b/packages/calcite-components/src/components/input-time-picker/readme.md @@ -18,24 +18,24 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `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` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ chooseTime?: string; fractionalSecond?: string; fractionalSecondDown?: string; fractionalSecondUp?: string; hour?: string; hourDown?: string; hourUp?: string; meridiem?: string; meridiemDown?: string; meridiemUp?: string; minute?: string; minuteDown?: string; minuteUp?: string; second?: string; secondDown?: string; secondUp?: string; }` | `undefined` | -| `name` | `name` | Specifies the name of the component on form submission. | `string` | `undefined` | -| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` | -| `open` | `open` | When `true`, displays the `calcite-time-picker` 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"` | -| `placement` | `placement` | Determines where the popover will be positioned relative to the input. | `"auto" \| "top" \| "right" \| "bottom" \| "left" \| "top-start" \| "top-end" \| "right-start" \| "right-end" \| "bottom-start" \| "bottom-end" \| "left-start" \| "left-end" \| "auto-start" \| "auto-end" \| "leading-start" \| "leading" \| "leading-end" \| "trailing-end" \| "trailing" \| "trailing-start"` | `"auto"` | -| `readOnly` | `read-only` | When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified. | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `status` | `status` | Specifies the status of the input field, which determines message and icons. | `"idle" \| "invalid" \| "valid"` | `"idle"` | -| `step` | `step` | Specifies the granularity the component's `value` must adhere to (in seconds). | `number` | `60` | -| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| string` | `undefined` | -| `validationMessage` | `validation-message` | Specifies the validation message to display under the component. | `string` | `undefined` | -| `value` | `value` | The time value in ISO (24-hour) format. | `string` | `null` | +| Property | Attribute | Description | Type | Default | +| -------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `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` | +| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ [x: string]: any; }` | `undefined` | +| `name` | `name` | Specifies the name of the component on form submission. | `string` | `undefined` | +| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` | +| `open` | `open` | When `true`, displays the `calcite-time-picker` 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"` | +| `placement` | `placement` | Determines where the popover will be positioned relative to the input. | `"auto" \| "top" \| "right" \| "bottom" \| "left" \| "top-start" \| "top-end" \| "right-start" \| "right-end" \| "bottom-start" \| "bottom-end" \| "left-start" \| "left-end" \| "auto-start" \| "auto-end" \| "leading-start" \| "leading" \| "leading-end" \| "trailing-end" \| "trailing" \| "trailing-start"` | `"auto"` | +| `readOnly` | `read-only` | When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified. | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `status` | `status` | Specifies the status of the input field, which determines message and icons. | `"idle" \| "invalid" \| "valid"` | `"idle"` | +| `step` | `step` | Specifies the granularity the component's `value` must adhere to (in seconds). | `number` | `60` | +| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| string` | `undefined` | +| `validationMessage` | `validation-message` | Specifies the validation message to display under the component. | `string` | `undefined` | +| `value` | `value` | The time value in ISO (24-hour) format. | `string` | `null` | ## Events diff --git a/packages/calcite-components/src/components/input-time-zone/readme.md b/packages/calcite-components/src/components/input-time-zone/readme.md index fdbbe1c50a4..2a33aefc3aa 100644 --- a/packages/calcite-components/src/components/input-time-zone/readme.md +++ b/packages/calcite-components/src/components/input-time-zone/readme.md @@ -22,22 +22,22 @@ Displays options to select a IANA time zone name. ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------ | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `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` | -| `maxItems` | `max-items` | Specifies the component's maximum number of options to display before displaying a scrollbar. | `number` | `0` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ chooseTimeZone?: string; timeZoneLabel?: string; "Africa/Abidjan"?: string; "Africa/Accra"?: string; "Africa/Addis_Ababa"?: string; "Africa/Algiers"?: string; "Africa/Asmera"?: string; "Africa/Bamako"?: string; "Africa/Bangui"?: string; "Africa/Banjul"?: string; "Africa/Bissau"?: string; "Africa/Blantyre"?: string; "Africa/Brazzaville"?: string; "Africa/Bujumbura"?: string; "Africa/Cairo"?: string; "Africa/Casablanca"?: string; "Africa/Ceuta"?: string; "Africa/Conakry"?: string; "Africa/Dakar"?: string; "Africa/Dar_es_Salaam"?: string; "Africa/Djibouti"?: string; "Africa/Douala"?: string; "Africa/El_Aaiun"?: string; "Africa/Freetown"?: string; "Africa/Gaborone"?: string; "Africa/Harare"?: string; "Africa/Johannesburg"?: string; "Africa/Juba"?: string; "Africa/Kampala"?: string; "Africa/Khartoum"?: string; "Africa/Kigali"?: string; "Africa/Kinshasa"?: string; "Africa/Lagos"?: string; "Africa/Libreville"?: string; "Africa/Lome"?: string; "Africa/Luanda"?: string; "Africa/Lubumbashi"?: string; "Africa/Lusaka"?: string; "Africa/Malabo"?: string; "Africa/Maputo"?: string; "Africa/Maseru"?: string; "Africa/Mbabane"?: string; "Africa/Mogadishu"?: string; "Africa/Monrovia"?: string; "Africa/Nairobi"?: string; "Africa/Ndjamena"?: string; "Africa/Niamey"?: string; "Africa/Nouakchott"?: string; "Africa/Ouagadougou"?: string; "Africa/Porto-Novo"?: string; "Africa/Sao_Tome"?: string; "Africa/Tripoli"?: string; "Africa/Tunis"?: string; "Africa/Windhoek"?: string; "America/Adak"?: string; "America/Anchorage"?: string; "America/Anguilla"?: string; "America/Antigua"?: string; "America/Araguaina"?: string; "America/Argentina/La_Rioja"?: string; "America/Argentina/Rio_Gallegos"?: string; "America/Argentina/Salta"?: string; "America/Argentina/San_Juan"?: string; "America/Argentina/San_Luis"?: string; "America/Argentina/Tucuman"?: string; "America/Argentina/Ushuaia"?: string; "America/Aruba"?: string; "America/Asuncion"?: string; "America/Bahia"?: string; "America/Bahia_Banderas"?: string; "America/Barbados"?: string; "America/Belem"?: string; "America/Belize"?: string; "America/Blanc-Sablon"?: string; "America/Boa_Vista"?: string; "America/Bogota"?: string; "America/Boise"?: string; "America/Buenos_Aires"?: string; "America/Cambridge_Bay"?: string; "America/Campo_Grande"?: string; "America/Cancun"?: string; "America/Caracas"?: string; "America/Catamarca"?: string; "America/Cayenne"?: string; "America/Cayman"?: string; "America/Chicago"?: string; "America/Chihuahua"?: string; "America/Ciudad_Juarez"?: string; "America/Coral_Harbour"?: string; "America/Cordoba"?: string; "America/Costa_Rica"?: string; "America/Creston"?: string; "America/Cuiaba"?: string; "America/Curacao"?: string; "America/Danmarkshavn"?: string; "America/Dawson"?: string; "America/Dawson_Creek"?: string; "America/Denver"?: string; "America/Detroit"?: string; "America/Dominica"?: string; "America/Edmonton"?: string; "America/Eirunepe"?: string; "America/El_Salvador"?: string; "America/Fort_Nelson"?: string; "America/Fortaleza"?: string; "America/Glace_Bay"?: string; "America/Godthab"?: string; "America/Goose_Bay"?: string; "America/Grand_Turk"?: string; "America/Grenada"?: string; "America/Guadeloupe"?: string; "America/Guatemala"?: string; "America/Guayaquil"?: string; "America/Guyana"?: string; "America/Halifax"?: string; "America/Havana"?: string; "America/Hermosillo"?: string; "America/Indiana/Knox"?: string; "America/Indiana/Marengo"?: string; "America/Indiana/Petersburg"?: string; "America/Indiana/Tell_City"?: string; "America/Indiana/Vevay"?: string; "America/Indiana/Vincennes"?: string; "America/Indiana/Winamac"?: string; "America/Indianapolis"?: string; "America/Inuvik"?: string; "America/Iqaluit"?: string; "America/Jamaica"?: string; "America/Jujuy"?: string; "America/Juneau"?: string; "America/Kentucky/Monticello"?: string; "America/Kralendijk"?: string; "America/La_Paz"?: string; "America/Lima"?: string; "America/Los_Angeles"?: string; "America/Louisville"?: string; "America/Lower_Princes"?: string; "America/Maceio"?: string; "America/Managua"?: string; "America/Manaus"?: string; "America/Marigot"?: string; "America/Martinique"?: string; "America/Matamoros"?: string; "America/Mazatlan"?: string; "America/Mendoza"?: string; "America/Menominee"?: string; "America/Merida"?: string; "America/Metlakatla"?: string; "America/Mexico_City"?: string; "America/Miquelon"?: string; "America/Moncton"?: string; "America/Monterrey"?: string; "America/Montevideo"?: string; "America/Montreal"?: string; "America/Montserrat"?: string; "America/Nassau"?: string; "America/New_York"?: string; "America/Nipigon"?: string; "America/Nome"?: string; "America/Noronha"?: string; "America/North_Dakota/Beulah"?: string; "America/North_Dakota/Center"?: string; "America/North_Dakota/New_Salem"?: string; "America/Ojinaga"?: string; "America/Panama"?: string; "America/Pangnirtung"?: string; "America/Paramaribo"?: string; "America/Phoenix"?: string; "America/Port-au-Prince"?: string; "America/Port_of_Spain"?: string; "America/Porto_Velho"?: string; "America/Puerto_Rico"?: string; "America/Punta_Arenas"?: string; "America/Rainy_River"?: string; "America/Rankin_Inlet"?: string; "America/Recife"?: string; "America/Regina"?: string; "America/Resolute"?: string; "America/Rio_Branco"?: string; "America/Santa_Isabel"?: string; "America/Santarem"?: string; "America/Santiago"?: string; "America/Santo_Domingo"?: string; "America/Sao_Paulo"?: string; "America/Scoresbysund"?: string; "America/Sitka"?: string; "America/St_Barthelemy"?: string; "America/St_Johns"?: string; "America/St_Kitts"?: string; "America/St_Lucia"?: string; "America/St_Thomas"?: string; "America/St_Vincent"?: string; "America/Swift_Current"?: string; "America/Tegucigalpa"?: string; "America/Thule"?: string; "America/Thunder_Bay"?: string; "America/Tijuana"?: string; "America/Toronto"?: string; "America/Tortola"?: string; "America/Vancouver"?: string; "America/Whitehorse"?: string; "America/Winnipeg"?: string; "America/Yakutat"?: string; "America/Yellowknife"?: string; "Antarctica/Casey"?: string; "Antarctica/Davis"?: string; "Antarctica/DumontDUrville"?: string; "Antarctica/Macquarie"?: string; "Antarctica/Mawson"?: string; "Antarctica/McMurdo"?: string; "Antarctica/Palmer"?: string; "Antarctica/Rothera"?: string; "Antarctica/Syowa"?: string; "Antarctica/Troll"?: string; "Antarctica/Vostok"?: string; "Arctic/Longyearbyen"?: string; "Asia/Aden"?: string; "Asia/Almaty"?: string; "Asia/Amman"?: string; "Asia/Anadyr"?: string; "Asia/Aqtau"?: string; "Asia/Aqtobe"?: string; "Asia/Ashgabat"?: string; "Asia/Atyrau"?: string; "Asia/Baghdad"?: string; "Asia/Bahrain"?: string; "Asia/Baku"?: string; "Asia/Bangkok"?: string; "Asia/Barnaul"?: string; "Asia/Beirut"?: string; "Asia/Bishkek"?: string; "Asia/Brunei"?: string; "Asia/Calcutta"?: string; "Asia/Chita"?: string; "Asia/Choibalsan"?: string; "Asia/Colombo"?: string; "Asia/Damascus"?: string; "Asia/Dhaka"?: string; "Asia/Dili"?: string; "Asia/Dubai"?: string; "Asia/Dushanbe"?: string; "Asia/Famagusta"?: string; "Asia/Gaza"?: string; "Asia/Hebron"?: string; "Asia/Hong_Kong"?: string; "Asia/Hovd"?: string; "Asia/Irkutsk"?: string; "Asia/Jakarta"?: string; "Asia/Jayapura"?: string; "Asia/Jerusalem"?: string; "Asia/Kabul"?: string; "Asia/Kamchatka"?: string; "Asia/Karachi"?: string; "Asia/Katmandu"?: string; "Asia/Khandyga"?: string; "Asia/Krasnoyarsk"?: string; "Asia/Kuala_Lumpur"?: string; "Asia/Kuching"?: string; "Asia/Kuwait"?: string; "Asia/Macau"?: string; "Asia/Magadan"?: string; "Asia/Makassar"?: string; "Asia/Manila"?: string; "Asia/Muscat"?: string; "Asia/Nicosia"?: string; "Asia/Novokuznetsk"?: string; "Asia/Novosibirsk"?: string; "Asia/Omsk"?: string; "Asia/Oral"?: string; "Asia/Phnom_Penh"?: string; "Asia/Pontianak"?: string; "Asia/Pyongyang"?: string; "Asia/Qatar"?: string; "Asia/Qostanay"?: string; "Asia/Qyzylorda"?: string; "Asia/Rangoon"?: string; "Asia/Riyadh"?: string; "Asia/Saigon"?: string; "Asia/Sakhalin"?: string; "Asia/Samarkand"?: string; "Asia/Seoul"?: string; "Asia/Shanghai"?: string; "Asia/Singapore"?: string; "Asia/Srednekolymsk"?: string; "Asia/Taipei"?: string; "Asia/Tashkent"?: string; "Asia/Tbilisi"?: string; "Asia/Tehran"?: string; "Asia/Thimphu"?: string; "Asia/Tokyo"?: string; "Asia/Tomsk"?: string; "Asia/Ulaanbaatar"?: string; "Asia/Urumqi"?: string; "Asia/Ust-Nera"?: string; "Asia/Vientiane"?: string; "Asia/Vladivostok"?: string; "Asia/Yakutsk"?: string; "Asia/Yekaterinburg"?: string; "Asia/Yerevan"?: string; "Atlantic/Azores"?: string; "Atlantic/Bermuda"?: string; "Atlantic/Canary"?: string; "Atlantic/Cape_Verde"?: string; "Atlantic/Faeroe"?: string; "Atlantic/Madeira"?: string; "Atlantic/Reykjavik"?: string; "Atlantic/South_Georgia"?: string; "Atlantic/St_Helena"?: string; "Atlantic/Stanley"?: string; "Australia/Adelaide"?: string; "Australia/Brisbane"?: string; "Australia/Broken_Hill"?: string; "Australia/Currie"?: string; "Australia/Darwin"?: string; "Australia/Eucla"?: string; "Australia/Hobart"?: string; "Australia/Lindeman"?: string; "Australia/Lord_Howe"?: string; "Australia/Melbourne"?: string; "Australia/Perth"?: string; "Australia/Sydney"?: string; "Europe/Amsterdam"?: string; "Europe/Andorra"?: string; "Europe/Astrakhan"?: string; "Europe/Athens"?: string; "Europe/Belgrade"?: string; "Europe/Berlin"?: string; "Europe/Bratislava"?: string; "Europe/Brussels"?: string; "Europe/Bucharest"?: string; "Europe/Budapest"?: string; "Europe/Busingen"?: string; "Europe/Chisinau"?: string; "Europe/Copenhagen"?: string; "Europe/Dublin"?: string; "Europe/Gibraltar"?: string; "Europe/Guernsey"?: string; "Europe/Helsinki"?: string; "Europe/Isle_of_Man"?: string; "Europe/Istanbul"?: string; "Europe/Jersey"?: string; "Europe/Kaliningrad"?: string; "Europe/Kiev"?: string; "Europe/Kirov"?: string; "Europe/Lisbon"?: string; "Europe/Ljubljana"?: string; "Europe/London"?: string; "Europe/Luxembourg"?: string; "Europe/Madrid"?: string; "Europe/Malta"?: string; "Europe/Mariehamn"?: string; "Europe/Minsk"?: string; "Europe/Monaco"?: string; "Europe/Moscow"?: string; "Europe/Oslo"?: string; "Europe/Paris"?: string; "Europe/Podgorica"?: string; "Europe/Prague"?: string; "Europe/Riga"?: string; "Europe/Rome"?: string; "Europe/Samara"?: string; "Europe/San_Marino"?: string; "Europe/Sarajevo"?: string; "Europe/Saratov"?: string; "Europe/Simferopol"?: string; "Europe/Skopje"?: string; "Europe/Sofia"?: string; "Europe/Stockholm"?: string; "Europe/Tallinn"?: string; "Europe/Tirane"?: string; "Europe/Ulyanovsk"?: string; "Europe/Uzhgorod"?: string; "Europe/Vaduz"?: string; "Europe/Vatican"?: string; "Europe/Vienna"?: string; "Europe/Vilnius"?: string; "Europe/Volgograd"?: string; "Europe/Warsaw"?: string; "Europe/Zagreb"?: string; "Europe/Zaporozhye"?: string; "Europe/Zurich"?: string; "Indian/Antananarivo"?: string; "Indian/Chagos"?: string; "Indian/Christmas"?: string; "Indian/Cocos"?: string; "Indian/Comoro"?: string; "Indian/Kerguelen"?: string; "Indian/Mahe"?: string; "Indian/Maldives"?: string; "Indian/Mauritius"?: string; "Indian/Mayotte"?: string; "Indian/Reunion"?: string; "Pacific/Apia"?: string; "Pacific/Auckland"?: string; "Pacific/Bougainville"?: string; "Pacific/Chatham"?: string; "Pacific/Easter"?: string; "Pacific/Efate"?: string; "Pacific/Enderbury"?: string; "Pacific/Fakaofo"?: string; "Pacific/Fiji"?: string; "Pacific/Funafuti"?: string; "Pacific/Galapagos"?: string; "Pacific/Gambier"?: string; "Pacific/Guadalcanal"?: string; "Pacific/Guam"?: string; "Pacific/Honolulu"?: string; "Pacific/Johnston"?: string; "Pacific/Kiritimati"?: string; "Pacific/Kosrae"?: string; "Pacific/Kwajalein"?: string; "Pacific/Majuro"?: string; "Pacific/Marquesas"?: string; "Pacific/Midway"?: string; "Pacific/Nauru"?: string; "Pacific/Niue"?: string; "Pacific/Norfolk"?: string; "Pacific/Noumea"?: string; "Pacific/Pago_Pago"?: string; "Pacific/Palau"?: string; "Pacific/Pitcairn"?: string; "Pacific/Ponape"?: string; "Pacific/Port_Moresby"?: string; "Pacific/Rarotonga"?: string; "Pacific/Saipan"?: string; "Pacific/Tahiti"?: string; "Pacific/Tarawa"?: string; "Pacific/Tongatapu"?: string; "Pacific/Truk"?: string; "Pacific/Wake"?: string; "Pacific/Wallis"?: string; }` | `undefined` | -| `mode` | `mode` | This specifies the type of `value` and the associated options presented to the user: Using `"offset"` will provide options related | `"name" \| "offset"` | `"offset"` | -| `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` | -| `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"` | -| `referenceDate` | `reference-date` | This date will be used as a reference to Daylight Savings Time when creating time zone item groups. It can be either a Date instance or a string in ISO format (YYYY-MM-DD, YYYY-MM-DDTHH:MM:SS.SSSZ) | `Date \| string` | `undefined` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `status` | `status` | Specifies the status of the input field, which determines message and icons. | `"idle" \| "invalid" \| "valid"` | `"idle"` | -| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| string` | `undefined` | -| `validationMessage` | `validation-message` | Specifies the validation message to display under the component. | `string` | `undefined` | -| `value` | `value` | The component's value, where the value is the time zone offset or the difference, in minutes, between the selected time zone and UTC. If no value is provided, the user's time zone offset will be selected by default. | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `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` | +| `maxItems` | `max-items` | Specifies the component's maximum number of options to display before displaying a scrollbar. | `number` | `0` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `InputTimeZoneMessages` | `undefined` | +| `mode` | `mode` | This specifies the type of `value` and the associated options presented to the user: Using `"offset"` will provide options related | `"name" \| "offset"` | `"offset"` | +| `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` | +| `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"` | +| `referenceDate` | `reference-date` | This date will be used as a reference to Daylight Savings Time when creating time zone item groups. It can be either a Date instance or a string in ISO format (YYYY-MM-DD, YYYY-MM-DDTHH:MM:SS.SSSZ) | `Date \| string` | `undefined` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `status` | `status` | Specifies the status of the input field, which determines message and icons. | `"idle" \| "invalid" \| "valid"` | `"idle"` | +| `validationIcon` | `validation-icon` | Specifies the validation icon to display under the component. | `boolean \| string` | `undefined` | +| `validationMessage` | `validation-message` | Specifies the validation message to display under the component. | `string` | `undefined` | +| `value` | `value` | The component's value, where the value is the time zone offset or the difference, in minutes, between the selected time zone and UTC. If no value is provided, the user's time zone offset will be selected by default. | `string` | `undefined` | ## Events diff --git a/packages/calcite-components/src/components/input/readme.md b/packages/calcite-components/src/components/input/readme.md index 3ae9f76015f..956d937944f 100644 --- a/packages/calcite-components/src/components/input/readme.md +++ b/packages/calcite-components/src/components/input/readme.md @@ -91,7 +91,7 @@ function logBlur() { | `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | | `max` | `max` | Specifies the maximum value for type "number". | `number` | `undefined` | | `maxLength` | `max-length` | Specifies the maximum length of text for the component's value. | `number` | `undefined` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ clear?: string; loading?: string; }` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `InputMessages` | `undefined` | | `min` | `min` | Specifies the minimum value for `type="number"`. | `number` | `undefined` | | `minLength` | `min-length` | Specifies the minimum length of text for the component's value. | `number` | `undefined` | | `multiple` | `multiple` | When `true`, the component can accept more than one value. This property only has an effect when `type` is "email" or "file". Read the native attribute's documentation on MDN for more info. | `boolean` | `false` | diff --git a/packages/calcite-components/src/components/list-item/readme.md b/packages/calcite-components/src/components/list-item/readme.md index 1775a97816e..fa0ec57f916 100644 --- a/packages/calcite-components/src/components/list-item/readme.md +++ b/packages/calcite-components/src/components/list-item/readme.md @@ -8,20 +8,20 @@ If you are looking for a list that handles more advanced usage like selection, s ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | ----------- | -| `closable` | `closable` | When `true`, a close button is added to the component. | `boolean` | `false` | -| `closed` | `closed` | When `true`, hides the component. | `boolean` | `false` | -| `description` | `description` | A description for the component. Displays below the label text. | `string` | `undefined` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `dragDisabled` | `drag-disabled` | When `true`, the item is not draggable. | `boolean` | `false` | -| `dragSelected` | `drag-selected` | When `true`, the component's drag handle is selected. | `boolean` | `false` | -| `label` | `label` | The label text of the component. Displays above the description text. | `string` | `undefined` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ close?: string; }` | `undefined` | -| `metadata` | -- | Provides additional metadata to the component. Primary use is for a filter on the parent `calcite-list`. | `{ [x: string]: unknown; }` | `undefined` | -| `open` | `open` | When `true`, the item is open to show child components. | `boolean` | `false` | -| `selected` | `selected` | When `true` and the parent `calcite-list`'s `selectionMode` is `"single"`, `"single-persist"', or`"multiple"`, the component is selected. | `boolean` | `false` | -| `value` | `value` | The component's value. | `any` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | ----------- | +| `closable` | `closable` | When `true`, a close button is added to the component. | `boolean` | `false` | +| `closed` | `closed` | When `true`, hides the component. | `boolean` | `false` | +| `description` | `description` | A description for the component. Displays below the label text. | `string` | `undefined` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `dragDisabled` | `drag-disabled` | When `true`, the item is not draggable. | `boolean` | `false` | +| `dragSelected` | `drag-selected` | When `true`, the component's drag handle is selected. | `boolean` | `false` | +| `label` | `label` | The label text of the component. Displays above the description text. | `string` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ListItemMessages` | `undefined` | +| `metadata` | -- | Provides additional metadata to the component. Primary use is for a filter on the parent `calcite-list`. | `{ [x: string]: unknown; }` | `undefined` | +| `open` | `open` | When `true`, the item is open to show child components. | `boolean` | `false` | +| `selected` | `selected` | When `true` and the parent `calcite-list`'s `selectionMode` is `"single"`, `"single-persist"', or`"multiple"`, the component is selected. | `boolean` | `false` | +| `value` | `value` | The component's value. | `any` | `undefined` | ## Events diff --git a/packages/calcite-components/src/components/list/readme.md b/packages/calcite-components/src/components/list/readme.md index 0c35b024a1e..0ec48b98083 100644 --- a/packages/calcite-components/src/components/list/readme.md +++ b/packages/calcite-components/src/components/list/readme.md @@ -232,7 +232,7 @@ A general purpose list that enables users to construct list items that conform t | `group` | `group` | The list's group identifier. To drag elements from one list into another, both lists must have the same group value. | `string` | `undefined` | | `label` | `label` | Specifies an accessible name for the component. | `string` | `undefined` | | `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ filterEnabled?: string; total?: string; }` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ListMessages` | `undefined` | | `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` | | `selectedItems` | -- | The currently selected items. | `HTMLCalciteListItemElement[]` | `[]` | | `selectionAppearance` | `selection-appearance` | Specifies the selection appearance - `"icon"` (displays a checkmark or dot) or `"border"` (displays a border). | `"border" \| "icon"` | `"icon"` | diff --git a/packages/calcite-components/src/components/menu-item/readme.md b/packages/calcite-components/src/components/menu-item/readme.md index 0dfeca7d1ba..1f14331fcfc 100644 --- a/packages/calcite-components/src/components/menu-item/readme.md +++ b/packages/calcite-components/src/components/menu-item/readme.md @@ -4,20 +4,20 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | --------------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------------- | ----------- | -| `active` | `active` | When `true`, the component is highlighted. | `boolean` | `undefined` | -| `breadcrumb` | `breadcrumb` | When `true`, the component displays a breadcrumb trail for use as a navigational aid. | `boolean` | `undefined` | -| `href` | `href` | Specifies the URL destination of the component, which can be set as an absolute or relative path. | `string` | `undefined` | -| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `string` | `undefined` | -| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | -| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `string` | `undefined` | -| `label` *(required)* | `label` | Accessible name for the component. | `string` | `undefined` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ submenu?: string; open?: string; }` | `undefined` | -| `open` | `open` | When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu. | `boolean` | `false` | -| `rel` | `rel` | Defines the relationship between the `href` value and the current document. | `string` | `undefined` | -| `target` | `target` | Specifies where to open the linked document defined in the `href` property. | `string` | `undefined` | -| `text` | `text` | Specifies the text to display. | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | +| `active` | `active` | When `true`, the component is highlighted. | `boolean` | `undefined` | +| `breadcrumb` | `breadcrumb` | When `true`, the component displays a breadcrumb trail for use as a navigational aid. | `boolean` | `undefined` | +| `href` | `href` | Specifies the URL destination of the component, which can be set as an absolute or relative path. | `string` | `undefined` | +| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | +| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `string` | `undefined` | +| `label` *(required)* | `label` | Accessible name for the component. | `string` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `MenuItemMessages` | `undefined` | +| `open` | `open` | When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu. | `boolean` | `false` | +| `rel` | `rel` | Defines the relationship between the `href` value and the current document. | `string` | `undefined` | +| `target` | `target` | Specifies where to open the linked document defined in the `href` property. | `string` | `undefined` | +| `text` | `text` | Specifies the text to display. | `string` | `undefined` | ## Events diff --git a/packages/calcite-components/src/components/menu/readme.md b/packages/calcite-components/src/components/menu/readme.md index 04cdfe60bc0..aec875d7ca8 100644 --- a/packages/calcite-components/src/components/menu/readme.md +++ b/packages/calcite-components/src/components/menu/readme.md @@ -4,11 +4,11 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | --------- | ----------------------------------------------------------------------- | ---------------------------- | -------------- | -| `label` *(required)* | `label` | Accessible name for the component. | `string` | `undefined` | -| `layout` | `layout` | Specifies the layout of the component. | `"horizontal" \| "vertical"` | `"horizontal"` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ more?: string; }` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------------- | ------------------- | ----------------------------------------------------------------------- | ---------------------------- | -------------- | +| `label` *(required)* | `label` | Accessible name for the component. | `string` | `undefined` | +| `layout` | `layout` | Specifies the layout of the component. | `"horizontal" \| "vertical"` | `"horizontal"` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `MenuMessages` | `undefined` | ## Methods diff --git a/packages/calcite-components/src/components/meter/readme.md b/packages/calcite-components/src/components/meter/readme.md index 16f65066de3..24a04ca4813 100644 --- a/packages/calcite-components/src/components/meter/readme.md +++ b/packages/calcite-components/src/components/meter/readme.md @@ -47,13 +47,13 @@ A simple meter component. | `min` | `min` | Specifies the lowest allowed value of the component. | `number` | `0` | | `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` | | `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` | -| `rangeLabelType` | `range-label-type` | When either `rangeLabels` is `true`, specifies the format of displayed labels. | `"percent" \| "units"` | `"percent"` | +| `rangeLabelType` | `range-label-type` | When `rangeLabels` is `true`, specifies the format of displayed labels. | `"percent" \| "units"` | `"percent"` | | `rangeLabels` | `range-labels` | When `true`, displays the values of `high`, `low`, `min`, and `max`. | `boolean` | `false` | | `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `unitLabel` | `unit-label` | When `labelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or `min` values. | `string` | `""` | +| `unitLabel` | `unit-label` | When `rangeLabelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or `min` values. | `string` | `""` | | `value` | `value` | Specifies the current value of the component. | `number` | `undefined` | | `valueLabel` | `value-label` | When `true`, displays the current value. | `boolean` | `false` | -| `valueLabelType` | `value-label-type` | When either `valueLabel` is `true`, specifies the format of displayed label. | `"percent" \| "units"` | `"percent"` | +| `valueLabelType` | `value-label-type` | When `valueLabel` is `true`, specifies the format of displayed label. | `"percent" \| "units"` | `"percent"` | --- diff --git a/packages/calcite-components/src/components/modal/readme.md b/packages/calcite-components/src/components/modal/readme.md index 8dac262e80b..72eb9f8190b 100644 --- a/packages/calcite-components/src/components/modal/readme.md +++ b/packages/calcite-components/src/components/modal/readme.md @@ -55,20 +55,20 @@ modal.beforeClose = beforeClose; ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ----------- | -| `beforeClose` | -- | Passes a function to run before the component closes. | `(el: HTMLCalciteModalElement) => Promise` | `undefined` | -| `closeButtonDisabled` | `close-button-disabled` | When `true`, disables the component's close button. | `boolean` | `false` | -| `docked` | `docked` | When `true`, prevents the component from expanding to the entire screen on mobile devices. | `boolean` | `undefined` | -| `escapeDisabled` | `escape-disabled` | When `true`, disables the default close on escape behavior. | `boolean` | `false` | -| `focusTrapDisabled` | `focus-trap-disabled` | When `true`, prevents focus trapping. | `boolean` | `false` | -| `fullscreen` | `fullscreen` | Sets the component to always be fullscreen (overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`). | `boolean` | `undefined` | -| `kind` | `kind` | Specifies the kind of the component (will apply to top border). | `"brand" \| "danger" \| "info" \| "success" \| "warning"` | `undefined` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ close?: string; }` | `undefined` | -| `open` | `open` | When `true`, displays and positions the component. | `boolean` | `false` | -| `outsideCloseDisabled` | `outside-close-disabled` | When `true`, disables the closing of the component when clicked outside. | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `widthScale` | `width-scale` | Specifies the width of the component. | `"l" \| "m" \| "s"` | `"m"` | +| Property | Attribute | Description | Type | Default | +| ---------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ----------- | +| `beforeClose` | -- | Passes a function to run before the component closes. | `(el: HTMLCalciteModalElement) => Promise` | `undefined` | +| `closeButtonDisabled` | `close-button-disabled` | When `true`, disables the component's close button. | `boolean` | `false` | +| `docked` | `docked` | When `true`, prevents the component from expanding to the entire screen on mobile devices. | `boolean` | `undefined` | +| `escapeDisabled` | `escape-disabled` | When `true`, disables the default close on escape behavior. | `boolean` | `false` | +| `focusTrapDisabled` | `focus-trap-disabled` | When `true`, prevents focus trapping. | `boolean` | `false` | +| `fullscreen` | `fullscreen` | Sets the component to always be fullscreen. Overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`. | `boolean` | `undefined` | +| `kind` | `kind` | Specifies the kind of the component, which will apply to top border. | `"brand" \| "danger" \| "info" \| "success" \| "warning"` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ModalMessages` | `undefined` | +| `open` | `open` | When `true`, displays and positions the component. | `boolean` | `false` | +| `outsideCloseDisabled` | `outside-close-disabled` | When `true`, disables the closing of the component when clicked outside. | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `widthScale` | `width-scale` | Specifies the width of the component. | `"l" \| "m" \| "s"` | `"m"` | ## Events @@ -126,13 +126,13 @@ Type: `Promise` ## CSS Custom Properties -| Name | Description | -| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `--calcite-modal-content-background` | Specifies the background color of content placed in the `content` slot. | -| `--calcite-modal-content-padding` | Specifies the padding of the modal `content` slot. | -| `--calcite-modal-height` | Specifies a height of the modal, using `px`, `em`, `rem`, `vh`, or `%`. Will never exceed the height of the viewport. Will not apply if `fullscreen` if set. | -| `--calcite-modal-scrim-background` | Specifies the background color of the modal scrim. | -| `--calcite-modal-width` | Specifies a width of the modal, using `px`, `em`, `rem`, `vw`, or `%`. Will never exceed the width of the viewport. Will not apply if `fullscreen` if set. | +| Name | Description | +| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `--calcite-modal-content-background` | Specifies the background color of content placed in the component's `"content"` slot. | +| `--calcite-modal-content-padding` | Specifies the padding of the component's `"content"` slot. | +| `--calcite-modal-height` | Specifies the height of the component, using `px`, `em`, `rem`, `vh`, or `%`. Will never exceed the height of the viewport. Will not apply if `fullscreen` if set. | +| `--calcite-modal-scrim-background` | Specifies the background color of the component's scrim. | +| `--calcite-modal-width` | Specifies the width of the component, using `px`, `em`, `rem`, `vw`, or `%`. Will never exceed the width of the viewport. Will not apply if `fullscreen` if set. | ## Dependencies diff --git a/packages/calcite-components/src/components/navigation-logo/readme.md b/packages/calcite-components/src/components/navigation-logo/readme.md index af1d42c51d5..6c2f6c0c8ea 100644 --- a/packages/calcite-components/src/components/navigation-logo/readme.md +++ b/packages/calcite-components/src/components/navigation-logo/readme.md @@ -14,7 +14,7 @@ | Property | Attribute | Description | Type | Default | | ------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- | -| `active` | `active` | When true, the component is highlighted. | `boolean` | `undefined` | +| `active` | `active` | When `true`, the component is highlighted. | `boolean` | `undefined` | | `description` | `description` | A description for the component, which displays below the `heading`. | `string` | `undefined` | | `heading` | `heading` | Specifies heading text for the component, such as a product or organization name. | `string` | `undefined` | | `href` | `href` | Specifies the URL destination of the component, which can be set as an absolute or relative path. | `string` | `undefined` | diff --git a/packages/calcite-components/src/components/navigation-user/readme.md b/packages/calcite-components/src/components/navigation-user/readme.md index e2cb191f3b0..f44dd7da1d2 100644 --- a/packages/calcite-components/src/components/navigation-user/readme.md +++ b/packages/calcite-components/src/components/navigation-user/readme.md @@ -14,7 +14,7 @@ | Property | Attribute | Description | Type | Default | | -------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------ | --------- | ----------- | -| `active` | `active` | When true, the component is highlighted. | `boolean` | `undefined` | +| `active` | `active` | When `true`, the component is highlighted. | `boolean` | `undefined` | | `fullName` | `full-name` | Specifies the full name of the user. | `string` | `undefined` | | `label` | `label` | Describes the appearance of the avatar. If no label is provided, context will not be provided to assistive technologies. | `string` | `undefined` | | `textDisabled` | `text-disabled` | When `true`, hides the `fullName` and `username` contents. | `boolean` | `false` | diff --git a/packages/calcite-components/src/components/navigation/readme.md b/packages/calcite-components/src/components/navigation/readme.md index 235ae9596b5..4d00c34ff76 100644 --- a/packages/calcite-components/src/components/navigation/readme.md +++ b/packages/calcite-components/src/components/navigation/readme.md @@ -27,15 +27,15 @@ ## Events -| Event | Description | Type | -| ------------------------------- | ----------------------------------------------------------------------------------- | ------------------- | -| `calciteNavigationActionSelect` | When `navigationAction` is true, emits when the displayed action selection changes. | `CustomEvent` | +| Event | Description | Type | +| ------------------------------- | ------------------------------------------------------------------------------------- | ------------------- | +| `calciteNavigationActionSelect` | When `navigationAction` is `true`, emits when the displayed action selection changes. | `CustomEvent` | ## Methods ### `setFocus() => Promise` -When `navigation-action` is `true`, sets focus on the component's action element. +When `navigationAction` is `true`, sets focus on the component's action element. #### Returns diff --git a/packages/calcite-components/src/components/notice/readme.md b/packages/calcite-components/src/components/notice/readme.md index e8ab7e8677d..e5a2dcab7ae 100644 --- a/packages/calcite-components/src/components/notice/readme.md +++ b/packages/calcite-components/src/components/notice/readme.md @@ -25,16 +25,16 @@ You can programmatically focus the close button of a `dismissible` `calcite-noti ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | --------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ----------- | -| `closable` | `closable` | When `true`, a close button is added to the component. | `boolean` | `false` | -| `icon` | `icon` | When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. | `boolean \| string` | `undefined` | -| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | -| `kind` | `kind` | Specifies the kind of the component (will apply to top border and icon). | `"brand" \| "danger" \| "info" \| "success" \| "warning"` | `"brand"` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ close?: string; }` | `undefined` | -| `open` | `open` | When `true`, the component is visible. | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `width` | `width` | Specifies the width of the component. | `"auto" \| "full" \| "half"` | `"auto"` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ----------- | +| `closable` | `closable` | When `true`, a close button is added to the component. | `boolean` | `false` | +| `icon` | `icon` | When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. | `boolean \| string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | +| `kind` | `kind` | Specifies the kind of the component, which will apply to top border and icon. | `"brand" \| "danger" \| "info" \| "success" \| "warning"` | `"brand"` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `NoticeMessages` | `undefined` | +| `open` | `open` | When `true`, the component is visible. | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `width` | `width` | Specifies the width of the component. | `"auto" \| "full" \| "half"` | `"auto"` | ## Events diff --git a/packages/calcite-components/src/components/pagination/readme.md b/packages/calcite-components/src/components/pagination/readme.md index 37c863c51c9..f9494bfc957 100644 --- a/packages/calcite-components/src/components/pagination/readme.md +++ b/packages/calcite-components/src/components/pagination/readme.md @@ -27,15 +27,15 @@ For example, after querying the search API, you'll get back a response similar t ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | ------------------ | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ----------- | -| `groupSeparator` | `group-separator` | When `true`, number values are displayed with a group separator corresponding to the language and country format. | `boolean` | `false` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ next?: string; previous?: string; first?: string; last?: string; }` | `undefined` | -| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` | -| `pageSize` | `page-size` | Specifies the number of items per page. | `number` | `20` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `startItem` | `start-item` | Specifies the starting item number. | `number` | `1` | -| `totalItems` | `total-items` | Specifies the total number of items. | `number` | `0` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- | +| `groupSeparator` | `group-separator` | When `true`, number values are displayed with a group separator corresponding to the language and country format. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `PaginationMessages` | `undefined` | +| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` | +| `pageSize` | `page-size` | Specifies the number of items per page. | `number` | `20` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `startItem` | `start-item` | Specifies the starting item number. | `number` | `1` | +| `totalItems` | `total-items` | Specifies the total number of items. | `number` | `0` | ## Events diff --git a/packages/calcite-components/src/components/panel/readme.md b/packages/calcite-components/src/components/panel/readme.md index 0013b7d3557..0caa222de90 100644 --- a/packages/calcite-components/src/components/panel/readme.md +++ b/packages/calcite-components/src/components/panel/readme.md @@ -117,19 +117,19 @@ Renders a panel with a header and a footer. ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | --------------- | ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | ----------- | -| `closable` | `closable` | When `true`, displays a close button in the trailing side of the header. | `boolean` | `false` | -| `closed` | `closed` | When `true`, the component will be hidden. | `boolean` | `false` | -| `collapsed` | `collapsed` | When `true`, hides the component's content area. | `boolean` | `false` | -| `collapsible` | `collapsible` | When `true`, the component is collapsible. | `boolean` | `false` | -| `description` | `description` | A description for the component. | `string` | `undefined` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `heading` | `heading` | The component header text. | `string` | `undefined` | -| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | -| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | -| `menuOpen` | `menu-open` | When `true`, the action menu items in the `header-menu-actions` slot are open. | `boolean` | `false` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ close?: string; options?: string; collapse?: string; expand?: string; }` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ---------------------------------------------------------------------------------------- | ---------------------------- | ----------- | +| `closable` | `closable` | When `true`, displays a close button in the trailing side of the header. | `boolean` | `false` | +| `closed` | `closed` | When `true`, the component will be hidden. | `boolean` | `false` | +| `collapsed` | `collapsed` | When `true`, hides the component's content area. | `boolean` | `false` | +| `collapsible` | `collapsible` | When `true`, the component is collapsible. | `boolean` | `false` | +| `description` | `description` | A description for the component. | `string` | `undefined` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `heading` | `heading` | The component header text. | `string` | `undefined` | +| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | +| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | +| `menuOpen` | `menu-open` | When `true`, the action menu items in the `header-menu-actions` slot are open. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `PanelMessages` | `undefined` | ## Events diff --git a/packages/calcite-components/src/components/pick-list-item/readme.md b/packages/calcite-components/src/components/pick-list-item/readme.md index 2cf6f707cb7..2667f3e1a02 100644 --- a/packages/calcite-components/src/components/pick-list-item/readme.md +++ b/packages/calcite-components/src/components/pick-list-item/readme.md @@ -16,7 +16,7 @@ | `icon` | `icon` | Determines the icon SVG symbol that will be shown. Options are `"circle"`, `"square"`, `"grip"` or `null`. | `ICON_TYPES.circle \| ICON_TYPES.grip \| ICON_TYPES.square` | `null` | | `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | | `label` *(required)* | `label` | Label and accessible name for the component. Appears next to the icon. | `string` | `undefined` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ remove?: string; }` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `PickListItemMessages` | `undefined` | | `metadata` | -- | Provides additional metadata to the component. Primary use is for a filter on the parent list. | `{ [x: string]: unknown; }` | `undefined` | | `removable` | `removable` | When `true`, displays a remove action that removes the item from the list. | `boolean` | `false` | | `selected` | `selected` | When `true`, selects an item. Toggles when an item is checked/unchecked. | `boolean` | `false` | diff --git a/packages/calcite-components/src/components/pick-list/readme.md b/packages/calcite-components/src/components/pick-list/readme.md index 5b22b3339b6..47fe8fb5938 100644 --- a/packages/calcite-components/src/components/pick-list/readme.md +++ b/packages/calcite-components/src/components/pick-list/readme.md @@ -77,8 +77,8 @@ Renders groups of pick list items that are visually separated. | `filterEnabled` | `filter-enabled` | When `true`, an input appears at the top of the list that can be used by end users to filter items in the list. | `boolean` | `false` | | `filterPlaceholder` | `filter-placeholder` | Placeholder text for the filter input field. | `string` | `undefined` | | `filterText` | `filter-text` | Text for the filter input field. | `string` | `undefined` | -| `filteredData` | -- | The currently filtered data. | `{ label: string; description: string; metadata: Record; value: string; }[]` | `[]` | -| `filteredItems` | -- | The currently filtered items. | `HTMLCalcitePickListItemElement[]` | `[]` | +| `filteredData` | -- | The component's filtered data. | `{ label: string; description: string; metadata: Record; value: string; }[]` | `[]` | +| `filteredItems` | -- | The component's filtered items. | `HTMLCalcitePickListItemElement[]` | `[]` | | `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | | `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | | `multiple` | `multiple` | Similar to standard radio buttons and checkboxes. When `true`, a user can select multiple `calcite-pick-list-item`s at a time. When `false`, only a single `calcite-pick-list-item` can be selected at a time, and a new selection will deselect previous selections. | `boolean` | `false` | diff --git a/packages/calcite-components/src/components/popover/readme.md b/packages/calcite-components/src/components/popover/readme.md index 0ab1a2e90af..e5a0aed6500 100644 --- a/packages/calcite-components/src/components/popover/readme.md +++ b/packages/calcite-components/src/components/popover/readme.md @@ -46,14 +46,14 @@ | Property | Attribute | Description | Type | Default | | ------------------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | | `autoClose` | `auto-close` | When `true`, clicking outside of the component automatically closes open `calcite-popover`s. | `boolean` | `false` | -| `closable` | `closable` | When `true`, display a close button within the component. | `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. | `Placement[]` | `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 number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | | `label` *(required)* | `label` | Accessible name for the component. | `string` | `undefined` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ close?: string; }` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `PopoverMessages` | `undefined` | | `offsetDistance` | `offset-distance` | Offsets the position of the popover away from the `referenceElement`. | `number` | `defaultOffsetDistance` | | `offsetSkidding` | `offset-skidding` | Offsets the position of the component along the `referenceElement`. | `number` | `0` | | `open` | `open` | When `true`, displays and positions the component. | `boolean` | `false` | diff --git a/packages/calcite-components/src/components/rating/readme.md b/packages/calcite-components/src/components/rating/readme.md index 7dc1b017aa3..6b3bb2066c9 100644 --- a/packages/calcite-components/src/components/rating/readme.md +++ b/packages/calcite-components/src/components/rating/readme.md @@ -12,18 +12,18 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ----------- | -| `average` | `average` | Specifies a cumulative average from previous ratings to display. | `number` | `undefined` | -| `count` | `count` | Specifies the number of previous ratings to display. | `number` | `undefined` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `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` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ rating?: string; stars?: string; }` | `undefined` | -| `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` | -| `readOnly` | `read-only` | When `true`, the component's value can be read, but cannot be modified. | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `showChip` | `show-chip` | When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`. | `boolean` | `false` | -| `value` | `value` | The component's value. | `number` | `0` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ----------- | +| `average` | `average` | Specifies a cumulative average from previous ratings to display. | `number` | `undefined` | +| `count` | `count` | Specifies the number of previous ratings to display. | `number` | `undefined` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `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` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `RatingMessages` | `undefined` | +| `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` | +| `readOnly` | `read-only` | When `true`, the component's value can be read, but cannot be modified. | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `showChip` | `show-chip` | When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`. | `boolean` | `false` | +| `value` | `value` | The component's value. | `number` | `0` | ## Events diff --git a/packages/calcite-components/src/components/scrim/readme.md b/packages/calcite-components/src/components/scrim/readme.md index 77e6cd6efa8..aaca5355a6d 100644 --- a/packages/calcite-components/src/components/scrim/readme.md +++ b/packages/calcite-components/src/components/scrim/readme.md @@ -75,10 +75,10 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | --------- | ----------------------------------------------------------------------- | ----------------------- | ----------- | -| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ loading?: string; }` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ----------------------------------------------------------------------- | --------------- | ----------- | +| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ScrimMessages` | `undefined` | ## Slots diff --git a/packages/calcite-components/src/components/select/readme.md b/packages/calcite-components/src/components/select/readme.md index 64aafdab4f7..15abd8e03c4 100644 --- a/packages/calcite-components/src/components/select/readme.md +++ b/packages/calcite-components/src/components/select/readme.md @@ -151,10 +151,10 @@ Type: `Promise` ## CSS Custom Properties -| Name | Description | -| ---------------------------- | -------------------------------------------- | -| `--calcite-select-font-size` | The font size of items in the component. | -| `--calcite-select-spacing` | The padding around the selected option text. | +| Name | Description | +| ---------------------------- | ---------------------------------------------------- | +| `--calcite-select-font-size` | The font size of `calcite-option`s in the component. | +| `--calcite-select-spacing` | The padding around the selected option text. | ## Dependencies diff --git a/packages/calcite-components/src/components/sheet/readme.md b/packages/calcite-components/src/components/sheet/readme.md index a847afb5d64..ac588f7cea2 100644 --- a/packages/calcite-components/src/components/sheet/readme.md +++ b/packages/calcite-components/src/components/sheet/readme.md @@ -96,7 +96,7 @@ sheet.beforeClose = beforeClose; ### `setFocus() => Promise` -Sets focus on the component's "close" button (the first focusable item). +Sets focus on the component's "close" button - the first focusable item. #### Returns diff --git a/packages/calcite-components/src/components/shell-panel/readme.md b/packages/calcite-components/src/components/shell-panel/readme.md index 3f135c20c20..e78a6734587 100644 --- a/packages/calcite-components/src/components/shell-panel/readme.md +++ b/packages/calcite-components/src/components/shell-panel/readme.md @@ -81,12 +81,12 @@ Add `calcite-match-height` to a wrapping element to ensure proper height, scroll | Property | Attribute | Description | Type | Default | | --------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | | `collapsed` | `collapsed` | When `true`, hides the component's content area. | `boolean` | `false` | -| `detached` | `detached` | **[DEPRECATED]** use `displayMode` instead.

When `true`, the content area displays like a floating panel. | `boolean` | `false` | -| `detachedHeightScale` | `detached-height-scale` | **[DEPRECATED]** use `heightScale` instead.

When `displayMode` is `float`, specifies the maximum height of the component. | `"l" \| "m" \| "s"` | `undefined` | +| `detached` | `detached` | **[DEPRECATED]** Use `displayMode` instead.

When `true`, the content area displays like a floating panel. | `boolean` | `false` | +| `detachedHeightScale` | `detached-height-scale` | **[DEPRECATED]** Use `heightScale` instead.

When `displayMode` is `float`, specifies the maximum height of the component. | `"l" \| "m" \| "s"` | `undefined` | | `displayMode` | `display-mode` | Specifies the display mode - `"dock"` (full height, displays adjacent to center content), `"float"` (not full height, content is separated detached from `calcite-action-bar`, displays on top of center content), or `"overlay"` (full height, displays on top of center content). | `"dock" \| "float" \| "overlay"` | `"dock"` | | `heightScale` | `height-scale` | When `layout` is `horizontal`, specifies the maximum height of the component. | `"l" \| "m" \| "s"` | `undefined` | | `layout` | `layout` | The direction of the component. | `"horizontal" \| "vertical"` | `"vertical"` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ resize?: string; }` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ShellPanelMessages` | `undefined` | | `position` | `position` | Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). | `"end" \| "start"` | `"start"` | | `resizable` | `resizable` | When `true` and `displayMode` is not `float`, the component's content area is resizable. | `boolean` | `false` | | `widthScale` | `width-scale` | When `layout` is `vertical`, specifies the width of the component. | `"l" \| "m" \| "s"` | `"m"` | diff --git a/packages/calcite-components/src/components/slider/readme.md b/packages/calcite-components/src/components/slider/readme.md index ce9bb538f50..900a2a53cd2 100644 --- a/packages/calcite-components/src/components/slider/readme.md +++ b/packages/calcite-components/src/components/slider/readme.md @@ -60,10 +60,10 @@ If you'd like to allow an upper and lower value selection (two handles), you can ## Events -| Event | Description | Type | -| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | -| `calciteSliderChange` | Fires when the thumb is released on the component. **Note:** If you need to constantly listen to the drag event, use `calciteSliderInput` instead. | `CustomEvent` | -| `calciteSliderInput` | Fires on all updates to the component. **Note:** Will be fired frequently during drag. If you are performing any expensive operations consider using a debounce or throttle to avoid locking up the main thread. | `CustomEvent` | +| Event | Description | Type | +| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | +| `calciteSliderChange` | Fires when the thumb is released on the component. Note: To constantly listen to the drag event, use `calciteSliderInput` instead. | `CustomEvent` | +| `calciteSliderInput` | Fires on all updates to the component. Note: Fires frequently during drag. To perform expensive operations consider using a debounce or throttle to avoid locking up the main thread. | `CustomEvent` | ## Methods diff --git a/packages/calcite-components/src/components/split-button/readme.md b/packages/calcite-components/src/components/split-button/readme.md index 14738f17317..a4c5e99cde2 100644 --- a/packages/calcite-components/src/components/split-button/readme.md +++ b/packages/calcite-components/src/components/split-button/readme.md @@ -26,7 +26,7 @@ The calcite-split-button control is one that combines a button with a dropdown m | `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` | -| `kind` | `kind` | Specifies the kind of the component (will apply to border and background if applicable). | `"brand" \| "danger" \| "inverse" \| "neutral"` | `"brand"` | +| `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"` | | `primaryIconEnd` | `primary-icon-end` | Specifies an icon to display at the end of the primary button. | `string` | `undefined` | diff --git a/packages/calcite-components/src/components/stepper-item/readme.md b/packages/calcite-components/src/components/stepper-item/readme.md index 484c9d6b09e..3a55874fbed 100644 --- a/packages/calcite-components/src/components/stepper-item/readme.md +++ b/packages/calcite-components/src/components/stepper-item/readme.md @@ -6,16 +6,16 @@ individual `calcite-stepper-item` item ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | --------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ----------- | -| `complete` | `complete` | When `true`, the step has been completed. | `boolean` | `false` | -| `description` | `description` | A description for the component. Displays below the header text. | `string` | `undefined` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `error` | `error` | When `true`, the component contains an error that requires resolution from the user. | `boolean` | `false` | -| `heading` | `heading` | The component header text. | `string` | `undefined` | -| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ complete?: string; previousStep?: string; nextStep?: string; }` | `undefined` | -| `selected` | `selected` | When `true`, the component is selected. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | -------------------------------------------------------------------------------------------- | --------------------- | ----------- | +| `complete` | `complete` | When `true`, the step has been completed. | `boolean` | `false` | +| `description` | `description` | A description for the component. Displays below the header text. | `string` | `undefined` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `error` | `error` | When `true`, the component contains an error that requires resolution from the user. | `boolean` | `false` | +| `heading` | `heading` | The component header text. | `string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `StepperItemMessages` | `undefined` | +| `selected` | `selected` | When `true`, the component is selected. | `boolean` | `false` | ## Methods diff --git a/packages/calcite-components/src/components/stepper/readme.md b/packages/calcite-components/src/components/stepper/readme.md index 88aeedb221a..1ea934ba9cb 100644 --- a/packages/calcite-components/src/components/stepper/readme.md +++ b/packages/calcite-components/src/components/stepper/readme.md @@ -45,15 +45,15 @@ Calcite stepper can be used to present a stepper workflow to a user. It has conf ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | ------------------ | ---------------------------------------------------------------------------- | --------------------------------------------------------------- | -------------- | -| `icon` | `icon` | When `true`, displays a status icon in the `calcite-stepper-item` heading. | `boolean` | `false` | -| `layout` | `layout` | Defines the layout of the component. | `"horizontal" \| "vertical"` | `"horizontal"` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ label?: string; previousStep?: string; nextStep?: string; }` | `undefined` | -| `numbered` | `numbered` | When `true`, displays the step number in the `calcite-stepper-item` heading. | `boolean` | `false` | -| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `selectedItem` | -- | Specifies the component's selected item. | `HTMLCalciteStepperItemElement` | `null` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ---------------------------------------------------------------------------- | ------------------------------- | -------------- | +| `icon` | `icon` | When `true`, displays a status icon in the `calcite-stepper-item` heading. | `boolean` | `false` | +| `layout` | `layout` | Defines the layout of the component. | `"horizontal" \| "vertical"` | `"horizontal"` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `StepperMessages` | `undefined` | +| `numbered` | `numbered` | When `true`, displays the step number in the `calcite-stepper-item` heading. | `boolean` | `false` | +| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `selectedItem` | -- | Specifies the component's selected item. | `HTMLCalciteStepperItemElement` | `null` | ## Events diff --git a/packages/calcite-components/src/components/tab-title/readme.md b/packages/calcite-components/src/components/tab-title/readme.md index 573027abb6b..8b6cee2810d 100644 --- a/packages/calcite-components/src/components/tab-title/readme.md +++ b/packages/calcite-components/src/components/tab-title/readme.md @@ -6,17 +6,17 @@ The tab-title is the link that switches between panes in [calcite-tabs](../tabs) ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| `closable` | `closable` | When `true`, a close button is added to the component. | `boolean` | `false` | -| `closed` | `closed` | When `true`, does not display or position the component. | `boolean` | `false` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `string` | `undefined` | -| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | -| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `string` | `undefined` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ close?: string; }` | `undefined` | -| `selected` | `selected` | When `true`, the component and its respective `calcite-tab` contents are selected. Only one tab can be selected within the `calcite-tabs` parent. | `boolean` | `false` | -| `tab` | `tab` | Specifies a unique name for the component. When specified, use the same value on the `calcite-tab`. | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | +| `closable` | `closable` | When `true`, a close button is added to the component. | `boolean` | `false` | +| `closed` | `closed` | When `true`, does not display or position the component. | `boolean` | `false` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `iconEnd` | `icon-end` | Specifies an icon to display at the end of the component. | `string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). | `"both" \| "end" \| "start"` | `undefined` | +| `iconStart` | `icon-start` | Specifies an icon to display at the start of the component. | `string` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `TabTitleMessages` | `undefined` | +| `selected` | `selected` | When `true`, the component and its respective `calcite-tab` contents are selected. Only one tab can be selected within the `calcite-tabs` parent. | `boolean` | `false` | +| `tab` | `tab` | Specifies a unique name for the component. When specified, use the same value on the `calcite-tab`. | `string` | `undefined` | ## Events diff --git a/packages/calcite-components/src/components/table-cell/readme.md b/packages/calcite-components/src/components/table-cell/readme.md index eb849dad27d..9035c601ee1 100644 --- a/packages/calcite-components/src/components/table-cell/readme.md +++ b/packages/calcite-components/src/components/table-cell/readme.md @@ -4,12 +4,12 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | ----------- | ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------- | -| `alignment` | `alignment` | Specifies the alignment of the component. | `"center" \| "end" \| "start"` | `"start"` | -| `colSpan` | `col-span` | Specifies the number of columns the component should span. | `number` | `undefined` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ keyboardDeselect?: string; keyboardSelect?: string; row?: string; selected?: string; unselected?: string; }` | `undefined` | -| `rowSpan` | `row-span` | Specifies the number of rows the component should span. | `number` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ----------------------------------------------------------------------- | ------------------------------ | ----------- | +| `alignment` | `alignment` | Specifies the alignment of the component. | `"center" \| "end" \| "start"` | `"start"` | +| `colSpan` | `col-span` | Specifies the number of columns the component should span. | `number` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `TableCellMessages` | `undefined` | +| `rowSpan` | `row-span` | Specifies the number of rows the component should span. | `number` | `undefined` | ## Methods diff --git a/packages/calcite-components/src/components/table-header/readme.md b/packages/calcite-components/src/components/table-header/readme.md index 1ec1310f13e..4aa6d3f7df8 100644 --- a/packages/calcite-components/src/components/table-header/readme.md +++ b/packages/calcite-components/src/components/table-header/readme.md @@ -4,14 +4,14 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | ------------- | ----------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `alignment` | `alignment` | Specifies the alignment of the component. | `"center" \| "end" \| "start"` | `"start"` | -| `colSpan` | `col-span` | Specifies the number of columns the component should span. | `number` | `undefined` | -| `description` | `description` | A description to display beneath heading content. | `string` | `undefined` | -| `heading` | `heading` | A heading to display above description content. | `string` | `undefined` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ all?: string; keyboardDeselectAll?: string; keyboardSelectAll?: string; rowNumber?: string; selected?: string; selectionColumn?: string; }` | `undefined` | -| `rowSpan` | `row-span` | Specifies the number of rows the component should span. | `number` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ----------------------------------------------------------------------- | ------------------------------ | ----------- | +| `alignment` | `alignment` | Specifies the alignment of the component. | `"center" \| "end" \| "start"` | `"start"` | +| `colSpan` | `col-span` | Specifies the number of columns the component should span. | `number` | `undefined` | +| `description` | `description` | A description to display beneath heading content. | `string` | `undefined` | +| `heading` | `heading` | A heading to display above description content. | `string` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `TableHeaderMessages` | `undefined` | +| `rowSpan` | `row-span` | Specifies the number of rows the component should span. | `number` | `undefined` | ## Methods diff --git a/packages/calcite-components/src/components/table/readme.md b/packages/calcite-components/src/components/table/readme.md index d87171424f9..f686d55d2de 100644 --- a/packages/calcite-components/src/components/table/readme.md +++ b/packages/calcite-components/src/components/table/readme.md @@ -112,21 +112,21 @@ A simple table component. ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ----------- | -| `bordered` | `bordered` | When `true`, displays borders in the component. | `boolean` | `false` | -| `caption` *(required)* | `caption` | Specifies an accessible title for the component. | `string` | `undefined` | -| `groupSeparator` | `group-separator` | When `true`, number values are displayed with a group separator corresponding to the language and country format. | `boolean` | `false` | -| `layout` | `layout` | Specifies the layout of the component. | `"auto" \| "fixed"` | `"auto"` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ clear?: string; hiddenSelected?: string; page?: string; row?: string; selected?: string; }` | `undefined` | -| `numbered` | `numbered` | When `true`, displays the position of the row in numeric form. | `boolean` | `false` | -| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` | -| `pageSize` | `page-size` | Specifies the page size of the component. When `true`, renders `calcite-pagination`. | `number` | `0` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `selectedItems` | -- | Specifies the component's selected items. | `HTMLCalciteTableRowElement[]` | `[]` | -| `selectionMode` | `selection-mode` | Specifies the selection mode - `"none"` (no `calcite-table-row` selections), `"single"` (allow one `calcite-table-row` selection), or `"multiple"` (allow any number of `calcite-table-row` selections). | `"multiple" \| "none" \| "single"` | `"none"` | -| `striped` | `striped` | When `true`, displays striped styling in the component. | `boolean` | `false` | -| `zebra` | `zebra` | **[DEPRECATED]** Use the `striped` property instead.

When `true`, displays striped styling in the component. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ---------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------- | +| `bordered` | `bordered` | When `true`, displays borders in the component. | `boolean` | `false` | +| `caption` *(required)* | `caption` | Specifies an accessible title for the component. | `string` | `undefined` | +| `groupSeparator` | `group-separator` | When `true`, number values are displayed with a group separator corresponding to the language and country format. | `boolean` | `false` | +| `layout` | `layout` | Specifies the layout of the component. | `"auto" \| "fixed"` | `"auto"` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `TableMessages` | `undefined` | +| `numbered` | `numbered` | When `true`, displays the position of the row in numeric form. | `boolean` | `false` | +| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` | +| `pageSize` | `page-size` | Specifies the page size of the component. When `true`, renders `calcite-pagination`. | `number` | `0` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `selectedItems` | -- | Specifies the component's selected items. | `HTMLCalciteTableRowElement[]` | `[]` | +| `selectionMode` | `selection-mode` | Specifies the selection mode - `"none"` (no `calcite-table-row` selections), `"single"` (allow one `calcite-table-row` selection), or `"multiple"` (allow any number of `calcite-table-row` selections). | `"multiple" \| "none" \| "single"` | `"none"` | +| `striped` | `striped` | When `true`, displays striped styling in the component. | `boolean` | `false` | +| `zebra` | `zebra` | **[DEPRECATED]** Use the `striped` property instead.

When `true`, displays striped styling in the component. | `boolean` | `false` | ## Events diff --git a/packages/calcite-components/src/components/text-area/readme.md b/packages/calcite-components/src/components/text-area/readme.md index 6646ac41495..66dceaa568a 100644 --- a/packages/calcite-components/src/components/text-area/readme.md +++ b/packages/calcite-components/src/components/text-area/readme.md @@ -29,7 +29,7 @@ Renders text-area with character limit counter. | `groupSeparator` | `group-separator` | When `true`, number values are displayed with a group separator corresponding to the language and country format. | `boolean` | `false` | | `label` | `label` | Accessible name for the component. | `string` | `undefined` | | `maxLength` | `max-length` | Specifies the maximum number of characters allowed. | `number` | `undefined` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ invalid?: string; tooLong?: string; }` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `TextAreaMessages` | `undefined` | | `name` | `name` | Specifies the name of the component. | `string` | `undefined` | | `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` | | `placeholder` | `placeholder` | Specifies the placeholder text for the component. | `string` | `undefined` | diff --git a/packages/calcite-components/src/components/time-picker/readme.md b/packages/calcite-components/src/components/time-picker/readme.md index 92979002f58..79e120cbdc9 100644 --- a/packages/calcite-components/src/components/time-picker/readme.md +++ b/packages/calcite-components/src/components/time-picker/readme.md @@ -12,13 +12,13 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | ------------------ | ---------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ fractionalSecond?: string; fractionalSecondDown?: string; fractionalSecondUp?: string; hour?: string; hourDown?: string; hourUp?: string; meridiem?: string; meridiemDown?: string; meridiemUp?: string; minute?: string; minuteDown?: string; minuteUp?: string; second?: string; secondDown?: string; secondUp?: string; }` | `undefined` | -| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `step` | `step` | Specifies the granularity the `value` must adhere to (in seconds). | `number` | `60` | -| `value` | `value` | The component's value in UTC (always 24-hour format). | `string` | `null` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ---------------------------------------------------------------------------- | ------------------------------- | ----------- | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `TimePickerMessages` | `undefined` | +| `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `step` | `step` | Specifies the granularity the `value` must adhere to (in seconds). | `number` | `60` | +| `value` | `value` | The component's value in UTC (always 24-hour format). | `string` | `null` | ## Methods diff --git a/packages/calcite-components/src/components/tip-manager/readme.md b/packages/calcite-components/src/components/tip-manager/readme.md index 902a3edc249..1da0c593dbd 100644 --- a/packages/calcite-components/src/components/tip-manager/readme.md +++ b/packages/calcite-components/src/components/tip-manager/readme.md @@ -52,11 +52,11 @@ Renders a tip manager using a group of tips as well as a single tip. ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | --------------- | ----------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ----------- | -| `closed` | `closed` | When `true`, does not display or position the component. | `boolean` | `false` | -| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ defaultGroupTitle?: string; defaultPaginationLabel?: string; close?: string; previous?: string; next?: string; }` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ----------------------------------------------------------------------- | ---------------------------- | ----------- | +| `closed` | `closed` | When `true`, does not display or position the component. | `boolean` | `false` | +| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `TipManagerMessages` | `undefined` | ## Events diff --git a/packages/calcite-components/src/components/tip/readme.md b/packages/calcite-components/src/components/tip/readme.md index 878cb7ad716..595ecb02ebb 100644 --- a/packages/calcite-components/src/components/tip/readme.md +++ b/packages/calcite-components/src/components/tip/readme.md @@ -22,14 +22,14 @@ Renders a close-disabled tip with a heading, thumbnail, info and a link. ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------- | -| `closeDisabled` | `close-disabled` | When `true`, the close button is not present on the component. | `boolean` | `false` | -| `closed` | `closed` | When `true`, the component does not display. | `boolean` | `false` | -| `heading` | `heading` | The component header text. | `string` | `undefined` | -| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ close?: string; }` | `undefined` | -| `selected` | `selected` | When `true`, the component is selected if it has a parent `calcite-tip-manager`. Only one tip can be selected within the `calcite-tip-manager` parent. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------- | +| `closeDisabled` | `close-disabled` | When `true`, the close button is not present on the component. | `boolean` | `false` | +| `closed` | `closed` | When `true`, the component does not display. | `boolean` | `false` | +| `heading` | `heading` | The component header text. | `string` | `undefined` | +| `headingLevel` | `heading-level` | Specifies the number at which section headings should start. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `TipMessages` | `undefined` | +| `selected` | `selected` | When `true`, the component is selected if it has a parent `calcite-tip-manager`. Only one tip can be selected within the `calcite-tip-manager` parent. | `boolean` | `false` | ## Events diff --git a/packages/calcite-components/src/components/value-list/readme.md b/packages/calcite-components/src/components/value-list/readme.md index 456d1765901..364cb2d5972 100644 --- a/packages/calcite-components/src/components/value-list/readme.md +++ b/packages/calcite-components/src/components/value-list/readme.md @@ -46,22 +46,22 @@ Renders a value list with drag and drop capability between the items. ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------------- | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------- | -| `canPull` | -- | When provided, the method will be called to determine whether the element can move from the list. | `(detail: DragDetail) => boolean` | `undefined` | -| `canPut` | -- | When provided, the method will be called to determine whether the element can be added from another list. | `(detail: DragDetail) => boolean` | `undefined` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `dragEnabled` | `drag-enabled` | When `true`, `calcite-value-list-item`s are sortable via a draggable button. | `boolean` | `false` | -| `filterEnabled` | `filter-enabled` | When `true`, an input appears at the top of the component that can be used by end users to filter list items. | `boolean` | `false` | -| `filterPlaceholder` | `filter-placeholder` | Placeholder text for the filter's input field. | `string` | `undefined` | -| `filterText` | `filter-text` | Text for the filter input field. | `string` | `undefined` | -| `filteredData` | -- | The currently filtered data. | `{ label: string; description: string; metadata: Record; value: string; }[]` | `[]` | -| `filteredItems` | -- | The currently filtered items. | `HTMLCalciteValueListItemElement[]` | `[]` | -| `group` | `group` | The component's group identifier. To drag elements from one list into another, both lists must have the same group value. | `string` | `undefined` | -| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | -| `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ dragHandleActive?: string; dragHandleChange?: string; dragHandleCommit?: string; dragHandleIdle?: string; }` | `undefined` | -| `multiple` | `multiple` | Similar to standard radio buttons and checkboxes. When `true`, a user can select multiple `calcite-value-list-item`s at a time. When `false`, only a single `calcite-value-list-item` can be selected at a time, and a new selection will deselect previous selections. | `boolean` | `false` | -| `selectionFollowsFocus` | `selection-follows-focus` | When `true` and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ----------------------- | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | ----------- | +| `canPull` | -- | When provided, the method will be called to determine whether the element can move from the list. | `(detail: DragDetail) => boolean` | `undefined` | +| `canPut` | -- | When provided, the method will be called to determine whether the element can be added from another list. | `(detail: DragDetail) => boolean` | `undefined` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `dragEnabled` | `drag-enabled` | When `true`, `calcite-value-list-item`s are sortable via a draggable button. | `boolean` | `false` | +| `filterEnabled` | `filter-enabled` | When `true`, an input appears at the top of the component that can be used by end users to filter list items. | `boolean` | `false` | +| `filterPlaceholder` | `filter-placeholder` | Placeholder text for the filter's input field. | `string` | `undefined` | +| `filterText` | `filter-text` | Text for the filter input field. | `string` | `undefined` | +| `filteredData` | -- | The currently filtered data. | `{ label: string; description: string; metadata: Record; value: string; }[]` | `[]` | +| `filteredItems` | -- | The currently filtered items. | `HTMLCalciteValueListItemElement[]` | `[]` | +| `group` | `group` | The component's group identifier. To drag elements from one list into another, both lists must have the same group value. | `string` | `undefined` | +| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `ValueListMessages` | `undefined` | +| `multiple` | `multiple` | Similar to standard radio buttons and checkboxes. When `true`, a user can select multiple `calcite-value-list-item`s at a time. When `false`, only a single `calcite-value-list-item` can be selected at a time, and a new selection will deselect previous selections. | `boolean` | `false` | +| `selectionFollowsFocus` | `selection-follows-focus` | When `true` and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard. | `boolean` | `false` | ## Events