diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 0eb3a842a58..36ae592d9c2 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 { diff --git a/packages/calcite-components/src/components/block-section/readme.md b/packages/calcite-components/src/components/block-section/readme.md index d422037325e..bc17697d914 100644 --- a/packages/calcite-components/src/components/block-section/readme.md +++ b/packages/calcite-components/src/components/block-section/readme.md @@ -6,13 +6,13 @@ The `calcite-block-section` component is a child element of `calcite-block`. Sec ## Properties -| 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"` | +| 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, where: `"button"` sets the toggle to a selectable header, and `"switch"` sets the toggle to a switch. | `"button" \| "switch"` | `"button"` | ## Events diff --git a/packages/calcite-components/src/components/button/readme.md b/packages/calcite-components/src/components/button/readme.md index c58dc8e9474..cb9d92673d7 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, 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"` | +| 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/checkbox/readme.md b/packages/calcite-components/src/components/checkbox/readme.md index cd19e3c93b4..88dcd586252 100644 --- a/packages/calcite-components/src/components/checkbox/readme.md +++ b/packages/calcite-components/src/components/checkbox/readme.md @@ -32,7 +32,7 @@ | --------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | | `checked` | `checked` | When `true`, the component is checked. | `boolean` | `false` | | `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` | +| `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` | | `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` | diff --git a/packages/calcite-components/src/components/chip/readme.md b/packages/calcite-components/src/components/chip/readme.md index 06744361cce..a545e662bc2 100644 --- a/packages/calcite-components/src/components/chip/readme.md +++ b/packages/calcite-components/src/components/chip/readme.md @@ -20,7 +20,7 @@ | `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"` | +| `kind` | `kind` | Specifies the kind of the component, which 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"` | diff --git a/packages/calcite-components/src/components/combobox/readme.md b/packages/calcite-components/src/components/combobox/readme.md index e6a278e515c..1970f6893f7 100644 --- a/packages/calcite-components/src/components/combobox/readme.md +++ b/packages/calcite-components/src/components/combobox/readme.md @@ -72,32 +72,32 @@ ## 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` | `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` | -| `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"` | -| `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 of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"ancestors"` allows multiple selections, 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` | +| `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"` | +| `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, where: `"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, and `"single"` displays one `calcite-chip` with the total number of selections. | `"all" \| "fit" \| "single"` | `"all"` | +| `selectionMode` | `selection-mode` | Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"ancestors"` allows multiple selections, 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/fab/readme.md b/packages/calcite-components/src/components/fab/readme.md index 99796cbe412..cd1a731e858 100644 --- a/packages/calcite-components/src/components/fab/readme.md +++ b/packages/calcite-components/src/components/fab/readme.md @@ -44,7 +44,7 @@ Renders a `calcite-fab` that displays text alongside an icon. | `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` | `ICONS.plus` | | `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). | `"brand" \| "danger" \| "inverse" \| "neutral"` | `"brand"` | +| `kind` | `kind` | Specifies the kind of the component, which will apply to border and background. | `"brand" \| "danger" \| "inverse" \| "neutral"` | `"brand"` | | `label` | `label` | Accessible name for the component. | `string` | `undefined` | | `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | | `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | 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 8c1418293bb..8eebce9e5f1 100644 --- a/packages/calcite-components/src/components/input-date-picker/readme.md +++ b/packages/calcite-components/src/components/input-date-picker/readme.md @@ -34,7 +34,7 @@ document.querySelector("calcite-input-date-picker").value = ["2023-10-01", "2023 | `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` | +| `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` | @@ -64,7 +64,7 @@ document.querySelector("calcite-input-date-picker").value = ["2023-10-01", "2023 | ----------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------- | | `calciteInputDatePickerBeforeClose` | Fires when the component is requested to be closed and before the closing transition begins. | `CustomEvent` | | `calciteInputDatePickerBeforeOpen` | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. | `CustomEvent` | -| `calciteInputDatePickerChange` | Fires when the component's value changes. | `CustomEvent` | +| `calciteInputDatePickerChange` | Fires when the component's `value` changes. | `CustomEvent` | | `calciteInputDatePickerClose` | Fires when the component is closed and animation is complete. | `CustomEvent` | | `calciteInputDatePickerOpen` | Fires when the component is open and animation is complete. | `CustomEvent` | diff --git a/packages/calcite-components/src/components/input-number/readme.md b/packages/calcite-components/src/components/input-number/readme.md index 3e7b9654d6d..63b75d00bf0 100644 --- a/packages/calcite-components/src/components/input-number/readme.md +++ b/packages/calcite-components/src/components/input-number/readme.md @@ -31,7 +31,7 @@ Restrict the component to integer numbers only with `integer`, which will disabl | `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` | +| `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` | diff --git a/packages/calcite-components/src/components/input-text/readme.md b/packages/calcite-components/src/components/input-text/readme.md index f9fc27b0938..323608ab827 100644 --- a/packages/calcite-components/src/components/input-text/readme.md +++ b/packages/calcite-components/src/components/input-text/readme.md @@ -20,7 +20,7 @@ | `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` | +| `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` | 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 20fd74bdfc3..67175b07ea6 100644 --- a/packages/calcite-components/src/components/input-time-picker/readme.md +++ b/packages/calcite-components/src/components/input-time-picker/readme.md @@ -22,7 +22,7 @@ | -------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | | `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` | +| `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` | @@ -44,7 +44,7 @@ | ----------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------- | | `calciteInputTimePickerBeforeClose` | Fires when the component is requested to be closed and before the closing transition begins. | `CustomEvent` | | `calciteInputTimePickerBeforeOpen` | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. | `CustomEvent` | -| `calciteInputTimePickerChange` | Fires when the time value is changed as a result of user input. | `CustomEvent` | +| `calciteInputTimePickerChange` | Fires when the component's `value` is changes. | `CustomEvent` | | `calciteInputTimePickerClose` | Fires when the component is closed and animation is complete. | `CustomEvent` | | `calciteInputTimePickerOpen` | Fires when the component is open and animation is complete. | `CustomEvent` | 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 5c44253c4fc..edd0d625a7d 100644 --- a/packages/calcite-components/src/components/input-time-zone/readme.md +++ b/packages/calcite-components/src/components/input-time-zone/readme.md @@ -25,14 +25,14 @@ Displays options to select a IANA time zone name. | 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` | +| `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 that show timezone offsets. Using `"name"` will provide options that show the IANA time zone names. | `"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` | +| `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` | @@ -41,13 +41,13 @@ Displays options to select a IANA time zone name. ## Events -| Event | Description | Type | -| --------------------------------- | ----------- | ------------------- | -| `calciteInputTimeZoneBeforeClose` | | `CustomEvent` | -| `calciteInputTimeZoneBeforeOpen` | | `CustomEvent` | -| `calciteInputTimeZoneChange` | | `CustomEvent` | -| `calciteInputTimeZoneClose` | | `CustomEvent` | -| `calciteInputTimeZoneOpen` | | `CustomEvent` | +| Event | Description | Type | +| --------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------- | +| `calciteInputTimeZoneBeforeClose` | Fires when the component is requested to be closed and before the closing transition begins. | `CustomEvent` | +| `calciteInputTimeZoneBeforeOpen` | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. | `CustomEvent` | +| `calciteInputTimeZoneChange` | Fires when the component's `value` changes. | `CustomEvent` | +| `calciteInputTimeZoneClose` | Fires after the component is closed and animation is complete. | `CustomEvent` | +| `calciteInputTimeZoneOpen` | Fires after the component is opened and animation is complete. | `CustomEvent` | ## Methods diff --git a/packages/calcite-components/src/components/input/readme.md b/packages/calcite-components/src/components/input/readme.md index 956d937944f..fe8afd0fc4f 100644 --- a/packages/calcite-components/src/components/input/readme.md +++ b/packages/calcite-components/src/components/input/readme.md @@ -81,7 +81,7 @@ function logBlur() { | `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` | | `files` | -- | When `type` is `"file"`, specifies the component's selected files. | `FileList` | `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` | +| `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` | When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. | `boolean \| string` | `undefined` | diff --git a/packages/calcite-components/src/components/meter/readme.md b/packages/calcite-components/src/components/meter/readme.md index 24a04ca4813..e573e8631f4 100644 --- a/packages/calcite-components/src/components/meter/readme.md +++ b/packages/calcite-components/src/components/meter/readme.md @@ -38,7 +38,7 @@ A simple meter component. | `appearance` | `appearance` | Specifies the appearance style of the component. | `"outline" \| "outline-fill" \| "solid"` | `"outline-fill"` | | `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | | `fillType` | `fill-type` | Specifies the component's display, where `"single"` displays a single color and `"range"` displays a range of colors based on provided `low`, `high`, `min` or `max` values. | `"range" \| "single"` | `"range"` | -| `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` | +| `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` | | `high` | `high` | Specifies a high value. When `fillType` is `"range"`, displays a different color when above the specified threshold. | `number` | `undefined` | | `label` *(required)* | `label` | Accessible name for the component. | `string` | `undefined` | diff --git a/packages/calcite-components/src/components/radio-button/readme.md b/packages/calcite-components/src/components/radio-button/readme.md index 69d0dccb2d7..fa227f78f77 100644 --- a/packages/calcite-components/src/components/radio-button/readme.md +++ b/packages/calcite-components/src/components/radio-button/readme.md @@ -15,17 +15,17 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ----------- | -| `checked` | `checked` | When `true`, the component is checked. | `boolean` | `false` | -| `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` | -| `guid` | `guid` | The `id` of the component. When omitted, a globally unique identifier is used. | `string` | `undefined` | -| `hidden` | `hidden` | When `true`, the component is not displayed and is not focusable or checkable. | `boolean` | `false` | -| `name` | `name` | Specifies the name of the component. Can be inherited from `calcite-radio-button-group`. Required to pass the component's `value` on form submission. | `string` | `undefined` | -| `required` | `required` | When `true`, the component must have a value selected from the `calcite-radio-button-group` in order for the form to submit. | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component inherited from the `calcite-radio-button-group`. | `"l" \| "m" \| "s"` | `"m"` | -| `value` *(required)* | `value` | The component's value. | `any` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ----------- | +| `checked` | `checked` | When `true`, the component is checked. | `boolean` | `false` | +| `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` | +| `guid` | `guid` | The `id` of the component. When omitted, a globally unique identifier is used. | `string` | `undefined` | +| `hidden` | `hidden` | When `true`, the component is not displayed and is not focusable or checkable. | `boolean` | `false` | +| `name` | `name` | Specifies the name of the component. Can be inherited from `calcite-radio-button-group`. Required to pass the component's `value` on form submission. | `string` | `undefined` | +| `required` | `required` | When `true`, the component must have a value selected from the `calcite-radio-button-group` in order for the form to submit. | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component inherited from the `calcite-radio-button-group`. | `"l" \| "m" \| "s"` | `"m"` | +| `value` *(required)* | `value` | The component's value. | `any` | `undefined` | ## Events diff --git a/packages/calcite-components/src/components/rating/readme.md b/packages/calcite-components/src/components/rating/readme.md index 6b3bb2066c9..ad0111827c6 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` | `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` | +| 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/segmented-control/readme.md b/packages/calcite-components/src/components/segmented-control/readme.md index 544a2390bb4..83f36b9f7d3 100644 --- a/packages/calcite-components/src/components/segmented-control/readme.md +++ b/packages/calcite-components/src/components/segmented-control/readme.md @@ -17,18 +17,18 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------- | -| `appearance` | `appearance` | Specifies the appearance style of the component. | `"outline" \| "outline-fill" \| "solid"` | `"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` | -| `layout` | `layout` | Defines the layout of the component. | `"horizontal" \| "vertical"` | `"horizontal"` | -| `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` | -| `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"` | -| `selectedItem` | -- | The component's selected item `HTMLElement`. | `HTMLCalciteSegmentedControlItemElement` | `undefined` | -| `value` | `value` | The component's `selectedItem` value. | `string` | `null` | -| `width` | `width` | Specifies the width of the component. | `"auto" \| "full"` | `"auto"` | +| Property | Attribute | Description | Type | Default | +| -------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------- | +| `appearance` | `appearance` | Specifies the appearance style of the component. | `"outline" \| "outline-fill" \| "solid"` | `"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` | +| `layout` | `layout` | Defines the layout of the component. | `"horizontal" \| "vertical"` | `"horizontal"` | +| `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` | +| `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"` | +| `selectedItem` | -- | The component's selected item `HTMLElement`. | `HTMLCalciteSegmentedControlItemElement` | `undefined` | +| `value` | `value` | The component's `selectedItem` value. | `string` | `null` | +| `width` | `width` | Specifies the width of the component. | `"auto" \| "full"` | `"auto"` | ## Events diff --git a/packages/calcite-components/src/components/select/readme.md b/packages/calcite-components/src/components/select/readme.md index 1fe81a1baed..640ce15015a 100644 --- a/packages/calcite-components/src/components/select/readme.md +++ b/packages/calcite-components/src/components/select/readme.md @@ -113,20 +113,20 @@ Specify the underlying value for each option. ## 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` | -| `label` *(required)* | `label` | Accessible name for the component. | `string` | `undefined` | -| `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` | -| `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"` | -| `selectedOption` | -- | The component's selected option `HTMLElement`. | `HTMLCalciteOptionElement` | `undefined` | -| `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 `selectedOption` value. | `string` | `null` | -| `width` | `width` | Specifies the width of the component. | `"auto" \| "full" \| "half"` | `"auto"` | +| 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` | +| `label` *(required)* | `label` | Accessible name for the component. | `string` | `undefined` | +| `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` | +| `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"` | +| `selectedOption` | -- | The component's selected option `HTMLElement`. | `HTMLCalciteOptionElement` | `undefined` | +| `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 `selectedOption` value. | `string` | `null` | +| `width` | `width` | Specifies the width of the component. | `"auto" \| "full" \| "half"` | `"auto"` | ## Events diff --git a/packages/calcite-components/src/components/shell-panel/readme.md b/packages/calcite-components/src/components/shell-panel/readme.md index e78a6734587..63c5b52e242 100644 --- a/packages/calcite-components/src/components/shell-panel/readme.md +++ b/packages/calcite-components/src/components/shell-panel/readme.md @@ -78,18 +78,18 @@ Add `calcite-match-height` to a wrapping element to ensure proper height, scroll ## Properties -| 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` | -| `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` | `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"` | +| 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` | +| `displayMode` | `display-mode` | Specifies the display mode of the component, where: `"dock"` displays at full height adjacent to center content, `"overlay"` displays at full height on top of center content, and `"float"` does not display at full height with content separately detached from `calcite-action-bar` 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` | `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"` | ## Slots diff --git a/packages/calcite-components/src/components/slider/readme.md b/packages/calcite-components/src/components/slider/readme.md index 900a2a53cd2..d184ce07027 100644 --- a/packages/calcite-components/src/components/slider/readme.md +++ b/packages/calcite-components/src/components/slider/readme.md @@ -30,33 +30,33 @@ If you'd like to allow an upper and lower value selection (two handles), you can ## 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` | -| `groupSeparator` | `group-separator` | When `true`, number values are displayed with a group separator corresponding to the language and country format. | `boolean` | `false` | -| `hasHistogram` | `has-histogram` | When `true`, indicates a histogram is present. | `boolean` | `false` | -| `histogram` | -- | A list of the histogram's x,y coordinates within the component's `min` and `max`. Displays above the component's track. | `Point[]` | `undefined` | -| `histogramStops` | -- | A set of single color stops for a histogram, sorted by offset ascending. | `ColorStop[]` | `undefined` | -| `labelHandles` | `label-handles` | When `true`, displays label handles with their numeric value. | `boolean` | `false` | -| `labelTicks` | `label-ticks` | When `true` and `ticks` is specified, displays label tick marks with their numeric value. | `boolean` | `false` | -| `max` | `max` | The component's maximum selectable value. | `number` | `100` | -| `maxLabel` | `max-label` | For multiple selections, the accessible name for the second handle, such as `"Temperature, upper bound"`. | `string` | `undefined` | -| `maxValue` | `max-value` | For multiple selections, the component's upper value. | `number` | `undefined` | -| `min` | `min` | The component's minimum selectable value. | `number` | `0` | -| `minLabel` | `min-label` | Accessible name for first (or only) handle, such as `"Temperature, lower bound"`. | `string` | `undefined` | -| `minValue` | `min-value` | For multiple selections, the component's lower value. | `number` | `undefined` | -| `mirrored` | `mirrored` | When `true`, the slider will display values from high to low. Note that this value will be ignored if the slider has an associated histogram. | `boolean` | `false` | -| `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` | -| `pageStep` | `page-step` | Specifies the interval to move with the page up, or page down keys. | `number` | `undefined` | -| `precise` | `precise` | When `true`, sets a finer point for handles. | `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"` | -| `snap` | `snap` | When `true`, enables snap selection in coordination with `step` via a mouse. | `boolean` | `false` | -| `step` | `step` | Specifies the interval to move with the up, or down keys. | `number` | `1` | -| `ticks` | `ticks` | Displays tick marks on the number line at a specified interval. | `number` | `undefined` | -| `value` | `value` | The component's value. | `number \| number[]` | `0` | +| 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` | +| `groupSeparator` | `group-separator` | When `true`, number values are displayed with a group separator corresponding to the language and country format. | `boolean` | `false` | +| `hasHistogram` | `has-histogram` | When `true`, indicates a histogram is present. | `boolean` | `false` | +| `histogram` | -- | A list of the histogram's x,y coordinates within the component's `min` and `max`. Displays above the component's track. | `Point[]` | `undefined` | +| `histogramStops` | -- | A set of single color stops for a histogram, sorted by offset ascending. | `ColorStop[]` | `undefined` | +| `labelHandles` | `label-handles` | When `true`, displays label handles with their numeric value. | `boolean` | `false` | +| `labelTicks` | `label-ticks` | When `true` and `ticks` is specified, displays label tick marks with their numeric value. | `boolean` | `false` | +| `max` | `max` | The component's maximum selectable value. | `number` | `100` | +| `maxLabel` | `max-label` | For multiple selections, the accessible name for the second handle, such as `"Temperature, upper bound"`. | `string` | `undefined` | +| `maxValue` | `max-value` | For multiple selections, the component's upper value. | `number` | `undefined` | +| `min` | `min` | The component's minimum selectable value. | `number` | `0` | +| `minLabel` | `min-label` | Accessible name for first (or only) handle, such as `"Temperature, lower bound"`. | `string` | `undefined` | +| `minValue` | `min-value` | For multiple selections, the component's lower value. | `number` | `undefined` | +| `mirrored` | `mirrored` | When `true`, the slider will display values from high to low. Note that this value will be ignored if the slider has an associated histogram. | `boolean` | `false` | +| `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` | +| `pageStep` | `page-step` | Specifies the interval to move with the page up, or page down keys. | `number` | `undefined` | +| `precise` | `precise` | When `true`, sets a finer point for handles. | `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"` | +| `snap` | `snap` | When `true`, enables snap selection in coordination with `step` via a mouse. | `boolean` | `false` | +| `step` | `step` | Specifies the interval to move with the up, or down keys. | `number` | `1` | +| `ticks` | `ticks` | Displays tick marks on the number line at a specified interval. | `number` | `undefined` | +| `value` | `value` | The component's value. | `number \| number[]` | `0` | ## Events diff --git a/packages/calcite-components/src/components/switch/readme.md b/packages/calcite-components/src/components/switch/readme.md index 3df1f9b7f5d..49270397ce9 100644 --- a/packages/calcite-components/src/components/switch/readme.md +++ b/packages/calcite-components/src/components/switch/readme.md @@ -18,15 +18,15 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ----------- | -| `checked` | `checked` | When `true`, the component is checked. | `boolean` | `false` | -| `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` | -| `label` | `label` | Accessible name for the component. | `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"` | -| `value` | `value` | The component's value. | `any` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ----------- | +| `checked` | `checked` | When `true`, the component is checked. | `boolean` | `false` | +| `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` | +| `label` | `label` | Accessible name for the component. | `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"` | +| `value` | `value` | The component's value. | `any` | `undefined` | ## Events diff --git a/packages/calcite-components/src/components/text-area/readme.md b/packages/calcite-components/src/components/text-area/readme.md index 66dceaa568a..7e51e84ac0f 100644 --- a/packages/calcite-components/src/components/text-area/readme.md +++ b/packages/calcite-components/src/components/text-area/readme.md @@ -25,7 +25,7 @@ Renders text-area with character limit counter. | `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` | | `columns` | `columns` | Specifies the component's number of columns. | `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` | +| `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` | | `label` | `label` | Accessible name for the component. | `string` | `undefined` | | `maxLength` | `max-length` | Specifies the maximum number of characters allowed. | `number` | `undefined` | diff --git a/packages/calcite-components/src/components/tile-select/readme.md b/packages/calcite-components/src/components/tile-select/readme.md index 54e7c1aeed3..d42458c4c02 100644 --- a/packages/calcite-components/src/components/tile-select/readme.md +++ b/packages/calcite-components/src/components/tile-select/readme.md @@ -21,21 +21,21 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------- | ----------- | -| `checked` | `checked` | When `true`, the component is checked. | `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` | -| `heading` | `heading` | The component header text, which displays between the icon and description. | `string` | `undefined` | -| `hidden` | `hidden` | When `true`, the component is not displayed and is not focusable or checkable. | `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` | -| `inputAlignment` | `input-alignment` | When `inputEnabled` is `true`, specifies the placement of the interactive input on the component. | `"end" \| "start"` | `"start"` | -| `inputEnabled` | `input-enabled` | When `true`, displays an interactive input based on the `type` property. | `boolean` | `false` | -| `name` | `name` | Specifies the name of the component on form submission. | `any` | `undefined` | -| `type` | `type` | The selection mode of the component. Use `"radio"` for single selection, and `"checkbox"` for multiple selections. | `"checkbox" \| "radio"` | `"radio"` | -| `value` | `value` | The component's value. | `any` | `undefined` | -| `width` | `width` | Specifies the width of the component. | `"auto" \| "full"` | `"auto"` | +| Property | Attribute | Description | Type | Default | +| ---------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ----------- | +| `checked` | `checked` | When `true`, the component is checked. | `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` | +| `heading` | `heading` | The component header text, which displays between the icon and description. | `string` | `undefined` | +| `hidden` | `hidden` | When `true`, the component is not displayed and is not focusable or checkable. | `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` | +| `inputAlignment` | `input-alignment` | When `inputEnabled` is `true`, specifies the placement of the interactive input on the component. | `"end" \| "start"` | `"start"` | +| `inputEnabled` | `input-enabled` | When `true`, displays an interactive input based on the `type` property. | `boolean` | `false` | +| `name` | `name` | Specifies the name of the component on form submission. | `any` | `undefined` | +| `type` | `type` | Specifies the selection mode of the component, where: `"radio"` is for single selection, and `"checkbox"` is for multiple selections. | `"checkbox" \| "radio"` | `"radio"` | +| `value` | `value` | The component's value. | `any` | `undefined` | +| `width` | `width` | Specifies the width of the component. | `"auto" \| "full"` | `"auto"` | ## Events diff --git a/packages/calcite-components/src/components/tile/readme.md b/packages/calcite-components/src/components/tile/readme.md index 2ac112b0d34..0bb5971e3d4 100644 --- a/packages/calcite-components/src/components/tile/readme.md +++ b/packages/calcite-components/src/components/tile/readme.md @@ -17,17 +17,18 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | --------------- | ---------------------------------------------------------------------------------------------------------- | --------- | ----------- | -| `active` | `active` | When `true`, the component is active. | `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` | -| `embed` | `embed` | The component's embed mode. When `true`, renders without a border and padding for use by other components. | `boolean` | `false` | -| `heading` | `heading` | The component header text, which displays between the icon and description. | `string` | `undefined` | -| `hidden` | `hidden` | When `true`, the component is not displayed and is not focusable. | `boolean` | `false` | -| `href` | `href` | When embed is `"false"`, the URL for the component. | `string` | `undefined` | -| `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` | +| Property | Attribute | Description | Type | Default | +| ------------- | --------------- | ---------------------------------------------------------------------------------------------------------- | ------------------- | ----------- | +| `active` | `active` | When `true`, the component is active. | `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` | +| `embed` | `embed` | The component's embed mode. When `true`, renders without a border and padding for use by other components. | `boolean` | `false` | +| `heading` | `heading` | The component header text, which displays between the icon and description. | `string` | `undefined` | +| `hidden` | `hidden` | When `true`, the component is not displayed and is not focusable. | `boolean` | `false` | +| `href` | `href` | When embed is `"false"`, the URL for the component. | `string` | `undefined` | +| `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` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | ## Slots diff --git a/packages/calcite-components/src/components/tree/readme.md b/packages/calcite-components/src/components/tree/readme.md index b736afe35c3..43f76797ec7 100644 --- a/packages/calcite-components/src/components/tree/readme.md +++ b/packages/calcite-components/src/components/tree/readme.md @@ -42,12 +42,12 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ---------- | -| `lines` | `lines` | When `true`, displays indentation guide lines. | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | -| `selectedItems` | -- | Specifies the component's selected items. | `HTMLCalciteTreeItemElement[]` | `[]` | -| `selectionMode` | `selection-mode` | Specifies the selection mode, where `"ancestors"` displays with a checkbox and allows any number of selections from corresponding parent and child selections, `"children"` allows any number of selections from one parent from corresponding parent and child selections, `"multichildren"` allows any number of selections from corresponding parent and child selections, `"multiple"` allows any number of selections, `"none"` allows no selections, `"single"` allows one selection, and `"single-persist"` allows and requires one selection. | `"ancestors" \| "children" \| "multichildren" \| "multiple" \| "none" \| "single" \| "single-persist"` | `"single"` | +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ---------- | +| `lines` | `lines` | When `true`, displays indentation guide lines. | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `selectedItems` | -- | Specifies the component's selected items. | `HTMLCalciteTreeItemElement[]` | `[]` | +| `selectionMode` | `selection-mode` | Specifies the selection mode of the component, where: `"ancestors"` displays with a checkbox and allows any number of selections from corresponding parent and child selections, `"children"` allows any number of selections from one parent from corresponding parent and child selections, `"multichildren"` allows any number of selections from corresponding parent and child selections, `"multiple"` allows any number of selections, `"none"` allows no selections, `"single"` allows one selection, and `"single-persist"` allows and requires one selection. | `"ancestors" \| "children" \| "multichildren" \| "multiple" \| "none" \| "single" \| "single-persist"` | `"single"` | ## Events