diff --git a/packages/components/badge/src/badge.ts b/packages/components/badge/src/badge.ts index 7b42c14852..83c0081f76 100644 --- a/packages/components/badge/src/badge.ts +++ b/packages/components/badge/src/badge.ts @@ -40,7 +40,7 @@ export class Badge extends LitElement { /** * The size of the badge component. - * @default md + * @default 'md' */ @property({ reflect: true }) size?: BadgeSize; diff --git a/packages/components/button/src/button.ts b/packages/components/button/src/button.ts index 20557d0f98..67eda43bea 100644 --- a/packages/components/button/src/button.ts +++ b/packages/components/button/src/button.ts @@ -61,7 +61,7 @@ export class Button extends LitElement { /** * The size of the button. - * @default md + * @default 'md' */ @property({ reflect: true }) size?: ButtonSize; diff --git a/packages/components/combobox/src/combobox.ts b/packages/components/combobox/src/combobox.ts index e6be93bec5..2746b536f8 100644 --- a/packages/components/combobox/src/combobox.ts +++ b/packages/components/combobox/src/combobox.ts @@ -216,7 +216,10 @@ export class Combobox extends FormControlMixin(ScopedElementsMix /** When set will cause the control to show it is valid after reportValidity is called. */ @property({ type: Boolean, attribute: 'show-valid' }) override showValid?: boolean; - /** The size of the combobox. */ + /** + * The size of the combobox. + * @default 'md' + */ @property({ reflect: true }) size?: ComboboxSize; /** @@ -405,6 +408,7 @@ export class Combobox extends FormControlMixin(ScopedElementsMix `; } + /** @internal */ override focus(options?: FocusOptions): void { this.input?.focus(options); } diff --git a/packages/components/form/src/form-control-mixin.ts b/packages/components/form/src/form-control-mixin.ts index 3881f20231..cca236e958 100644 --- a/packages/components/form/src/form-control-mixin.ts +++ b/packages/components/form/src/form-control-mixin.ts @@ -334,6 +334,7 @@ export function FormControlMixin>(constru return valid; } + /** @internal Reset the form control state */ reset(value: unknown): void { this.dirty = false; this.formValue = value; diff --git a/packages/components/menu/src/menu-button.ts b/packages/components/menu/src/menu-button.ts index f1664efc1a..12dd08e657 100644 --- a/packages/components/menu/src/menu-button.ts +++ b/packages/components/menu/src/menu-button.ts @@ -68,7 +68,7 @@ export class MenuButton extends ObserveAttributesMixin(ScopedElementsMixin(LitEl /** * The size of the button. - * @default md + * @default 'md' */ @property() size?: ButtonSize; diff --git a/website/src/_data/custom-elements/custom-elements.md b/website/src/_data/custom-elements/custom-elements.md new file mode 100644 index 0000000000..d1531b9a15 --- /dev/null +++ b/website/src/_data/custom-elements/custom-elements.md @@ -0,0 +1,7793 @@ +# `../packages/components/accordion/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ----------------------- | +| `js` | `*` | * | | ./src/accordion.js | +| `js` | `*` | * | | ./src/accordion-item.js | + +# `../packages/components/accordion/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ------------------- | ------------- | ---------------------------------------------------- | ------- | +| `custom-element-definition` | `sl-accordion` | Accordion | /packages/components/accordion/src/accordion.js | | +| `custom-element-definition` | `sl-accordion-item` | AccordionItem | /packages/components/accordion/src/accordion-item.js | | + +# `../packages/components/announcer/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ------------------ | +| `js` | `*` | * | | ./src/announce.js | +| `js` | `*` | * | | ./src/announcer.js | + +# `../packages/components/announcer/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | -------------- | ----------- | ----------------------------------------------- | ------- | +| `custom-element-definition` | `sl-announcer` | Announcer | /packages/components/announcer/src/announcer.js | | + +# `../packages/components/avatar/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | --------------- | +| `js` | `*` | * | | ./src/avatar.js | + +# `../packages/components/avatar/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ----------- | ----------- | ----------------------------------------- | ------- | +| `custom-element-definition` | `sl-avatar` | Avatar | /packages/components/avatar/src/avatar.js | | + +# `../packages/components/badge/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | -------------- | +| `js` | `*` | * | | ./src/badge.js | + +# `../packages/components/badge/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ---------- | ----------- | --------------------------------------- | ------- | +| `custom-element-definition` | `sl-badge` | Badge | /packages/components/badge/src/badge.js | | + +# `../packages/components/breadcrumbs/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | -------------------- | +| `js` | `*` | * | | ./src/breadcrumbs.js | + +# `../packages/components/breadcrumbs/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ---------------- | ----------- | --------------------------------------------------- | ------- | +| `custom-element-definition` | `sl-breadcrumbs` | Breadcrumbs | /packages/components/breadcrumbs/src/breadcrumbs.js | | + +# `../packages/components/button-bar/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ------------------- | +| `js` | `*` | * | | ./src/button-bar.js | + +# `../packages/components/button-bar/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | --------------- | ----------- | ------------------------------------------------- | ------- | +| `custom-element-definition` | `sl-button-bar` | ButtonBar | /packages/components/button-bar/src/button-bar.js | | + +# `../packages/components/button/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | --------------- | +| `js` | `*` | * | | ./src/button.js | + +# `../packages/components/button/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ----------- | ----------- | ----------------------------------------- | ------- | +| `custom-element-definition` | `sl-button` | Button | /packages/components/button/src/button.js | | + +# `../packages/components/card/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ------------- | +| `js` | `*` | * | | ./src/card.js | + +# `../packages/components/card/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | --------- | ----------- | ------------------------------------- | ------- | +| `custom-element-definition` | `sl-card` | Card | /packages/components/card/src/card.js | | + +# `../packages/components/checkbox/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ----------------------- | +| `js` | `*` | * | | ./src/checkbox.js | +| `js` | `*` | * | | ./src/checkbox-group.js | + +# `../packages/components/checkbox/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ------------------- | ------------- | --------------------------------------------------- | ------- | +| `custom-element-definition` | `sl-checkbox` | Checkbox | /packages/components/checkbox/src/checkbox.js | | +| `custom-element-definition` | `sl-checkbox-group` | CheckboxGroup | /packages/components/checkbox/src/checkbox-group.js | | + +# `../packages/components/combobox/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ----------------- | +| `js` | `*` | * | | ./src/combobox.js | + +# `../packages/components/combobox/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ------------- | ----------- | --------------------------------------------- | ------- | +| `custom-element-definition` | `sl-combobox` | Combobox | /packages/components/combobox/src/combobox.js | | + +# `../packages/components/data-source/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ------------------------------- | +| `js` | `*` | * | | ./src/array-list-data-source.js | +| `js` | `*` | * | | ./src/data-source.js | +| `js` | `*` | * | | ./src/fetch-list-data-source.js | +| `js` | `*` | * | | ./src/list-data-source.js | + +# `../packages/components/dialog/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | --------------- | +| `js` | `*` | * | | ./src/dialog.js | + +# `../packages/components/dialog/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ----------- | ----------- | ----------------------------------------- | ------- | +| `custom-element-definition` | `sl-dialog` | Dialog | /packages/components/dialog/src/dialog.js | | + +# `../packages/components/drawer/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | --------------- | +| `js` | `*` | * | | ./src/drawer.js | + +# `../packages/components/drawer/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ----------- | ----------- | ----------------------------------------- | ------- | +| `custom-element-definition` | `sl-drawer` | Drawer | /packages/components/drawer/src/drawer.js | | + +# `../packages/components/editor/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | --------------- | +| `js` | `*` | * | | ./src/editor.js | + +# `../packages/components/editor/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ----------- | ----------- | ----------------------------------------- | ------- | +| `custom-element-definition` | `sl-editor` | Editor | /packages/components/editor/src/editor.js | | + +# `../packages/components/ellipsize-text/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ----------------------- | +| `js` | `*` | * | | ./src/ellipsize-text.js | + +# `../packages/components/ellipsize-text/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ------------------- | ------------- | --------------------------------------------------------- | ------- | +| `custom-element-definition` | `sl-ellipsize-text` | EllipsizeText | /packages/components/ellipsize-text/src/ellipsize-text.js | | + +# `../packages/components/emoji/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ---------------------- | +| `js` | `*` | * | | ./src/emoji-browser.js | +| `js` | `*` | * | | ./src/emoji-service.js | + +# `../packages/components/emoji/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ------------------ | ------------ | ----------------------------------------------- | ------- | +| `custom-element-definition` | `sl-emoji-browser` | EmojiBrowser | /packages/components/emoji/src/emoji-browser.js | | + +# `../packages/components/form/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ------------------------------- | +| `js` | `*` | * | | ./src/error.js | +| `js` | `*` | * | | ./src/form-control-mixin.js | +| `js` | `*` | * | | ./src/form-controller.js | +| `js` | `*` | * | | ./src/form-field.js | +| `js` | `*` | * | | ./src/form-validation-errors.js | +| `js` | `*` | * | | ./src/form.js | +| `js` | `*` | * | | ./src/hint.js | +| `js` | `*` | * | | ./src/label.js | + +# `../packages/components/form/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | --------------------------- | -------------------- | ------------------------------------------------------- | ------- | +| `custom-element-definition` | `sl-error` | Error | /packages/components/form/src/error.js | | +| `custom-element-definition` | `sl-form` | Form | /packages/components/form/src/form.js | | +| `custom-element-definition` | `sl-form-field` | FormField | /packages/components/form/src/form-field.js | | +| `custom-element-definition` | `sl-form-validation-errors` | FormValidationErrors | /packages/components/form/src/form-validation-errors.js | | +| `custom-element-definition` | `sl-hint` | Hint | /packages/components/form/src/hint.js | | +| `custom-element-definition` | `sl-label` | Label | /packages/components/form/src/label.js | | + +# `../packages/components/format-date/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | -------------------- | +| `js` | `*` | * | | ./src/format-date.js | + +# `../packages/components/format-date/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ---------------- | ----------- | ------------------------------------------------ | ------- | +| `custom-element-definition` | `sl-format-date` | FormatDate | /packages/components/format-date/src/format-date | | + +# `../packages/components/format-number/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ---------------------- | +| `js` | `*` | * | | ./src/format-number.js | + +# `../packages/components/format-number/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ------------------ | ------------ | ------------------------------------------------------- | ------- | +| `custom-element-definition` | `sl-format-number` | FormatNumber | /packages/components/format-number/src/format-number.js | | + +# `../packages/components/grid/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | --------------------------- | +| `js` | `*` | * | | ./src/column.js | +| `js` | `*` | * | | ./src/column-group.js | +| `js` | `*` | * | | ./src/drag-handle-column.js | +| `js` | `*` | * | | ./src/filter-column.js | +| `js` | `*` | * | | ./src/grid.js | +| `js` | `*` | * | | ./src/select-column.js | +| `js` | `*` | * | | ./src/selection-column.js | +| `js` | `*` | * | | ./src/sort-column.js | +| `js` | `*` | * | | ./src/text-field-column.js | + +# `../packages/components/grid/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ---------------------------- | -------------------- | --------------------------------------------------- | ------- | +| `custom-element-definition` | `sl-grid` | Grid | /packages/components/grid/src/grid.js | | +| `custom-element-definition` | `sl-grid-column` | GridColumn | /packages/components/grid/src/column.js | | +| `custom-element-definition` | `sl-grid-column-group` | GridColumnGroup | /packages/components/grid/src/column-group.js | | +| `custom-element-definition` | `sl-grid-drag-handle-column` | GridDragHandleColumn | /packages/components/grid/src/drag-handle-column.js | | +| `custom-element-definition` | `sl-grid-filter-column` | GridFilterColumn | /packages/components/grid/src/filter-column.js | | +| `custom-element-definition` | `sl-grid-select-column` | GridSelectColumn | /packages/components/grid/src/select-column.js | | +| `custom-element-definition` | `sl-grid-selection-column` | GridSelectionColumn | /packages/components/grid/src/selection-column.js | | +| `custom-element-definition` | `sl-grid-sort-column` | GridSortColumn | /packages/components/grid/src/sort-column.js | | +| `custom-element-definition` | `sl-grid-text-field-column` | GridTextFieldColumn | /packages/components/grid/src/text-field-column.js | | + +# `../packages/components/icon/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | --------------- | +| `js` | `*` | * | | ./src/icon.js | +| `js` | `*` | * | | ./src/models.js | + +# `../packages/components/icon/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | --------- | ----------- | ------------------------------------- | ------- | +| `custom-element-definition` | `sl-icon` | Icon | /packages/components/icon/src/icon.js | | + +# `../packages/components/inline-message/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ----------------------- | +| `js` | `*` | * | | ./src/inline-message.js | + +# `../packages/components/inline-message/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ------------------- | ------------- | --------------------------------------------------------- | ------- | +| `custom-element-definition` | `sl-inline-message` | InlineMessage | /packages/components/inline-message/src/inline-message.js | | + +# `../packages/components/listbox/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ---------------------------- | +| `js` | `*` | * | | ./src/listbox.js | +| `js` | `*` | * | | ./src/option.js | +| `js` | `*` | * | | ./src/option-group.js | +| `js` | `*` | * | | ./src/option-group-header.js | + +# `../packages/components/listbox/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ----------------- | ----------- | ------------------------------------------------ | ------- | +| `custom-element-definition` | `sl-listbox` | Listbox | /packages/components/listbox/src/listbox.js | | +| `custom-element-definition` | `sl-option-group` | OptionGroup | /packages/components/listbox/src/option-group.js | | +| `custom-element-definition` | `sl-option` | Option | /packages/components/listbox/src/option.js | | + +# `../packages/components/menu/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ------------------------ | +| `js` | `*` | * | | ./src/menu.js | +| `js` | `*` | * | | ./src/menu-button.js | +| `js` | `*` | * | | ./src/menu-item.js | +| `js` | `*` | * | | ./src/menu-item-group.js | + +# `../packages/components/menu/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | -------------------- | ------------- | ------------------------------------------------ | ------- | +| `custom-element-definition` | `sl-menu` | Menu | /packages/components/menu/src/menu.js | | +| `custom-element-definition` | `sl-menu-button` | MenuButton | /packages/components/menu/src/menu-button.js | | +| `custom-element-definition` | `sl-menu-item` | MenuItem | /packages/components/menu/src/menu-item.js | | +| `custom-element-definition` | `sl-menu-item-group` | MenuItemGroup | /packages/components/menu/src/menu-item-group.js | | + +# `../packages/components/message-dialog/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ----------------------- | +| `js` | `*` | * | | ./src/message-dialog.js | + +# `../packages/components/message-dialog/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ------------------- | ------------- | --------------------------------------------------------- | ------- | +| `custom-element-definition` | `sl-message-dialog` | MessageDialog | /packages/components/message-dialog/src/message-dialog.js | | + +# `../packages/components/number-field/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | --------------------- | +| `js` | `*` | * | | ./src/number-field.js | + +# `../packages/components/number-field/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ----------------- | ----------- | ----------------------------------------------------- | ------- | +| `custom-element-definition` | `sl-number-field` | NumberField | /packages/components/number-field/src/number-field.js | | + +# `../packages/components/paginator/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ------------------ | +| `js` | `*` | * | | ./src/paginator.js | +| `js` | `*` | * | | ./src/page-size.js | +| `js` | `*` | * | | ./src/status.js | + +# `../packages/components/paginator/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ------------------------ | ----------------- | ----------------------------------------------- | ------- | +| `custom-element-definition` | `sl-paginator` | Paginator | /packages/components/paginator/src/paginator.js | | +| `custom-element-definition` | `sl-paginator-page-size` | PaginatorPageSize | /packages/components/paginator/src/page-size.js | | +| `custom-element-definition` | `sl-paginator-status` | PaginatorStatus | /packages/components/paginator/src/status.js | | + +# `../packages/components/panel/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | -------------- | +| `js` | `*` | * | | ./src/panel.js | + +# `../packages/components/panel/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ---------- | ----------- | --------------------------------------- | ------- | +| `custom-element-definition` | `sl-panel` | Panel | /packages/components/panel/src/panel.js | | + +# `../packages/components/popover/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ---------------- | +| `js` | `*` | * | | ./src/popover.js | + +# `../packages/components/popover/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ------------ | ----------- | ------------------------------------------- | ------- | +| `custom-element-definition` | `sl-popover` | Popover | /packages/components/popover/src/popover.js | | + +# `../packages/components/progress-bar/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | --------------------- | +| `js` | `*` | * | | ./src/progress-bar.js | + +# `../packages/components/progress-bar/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ----------------- | ----------- | ----------------------------------------------------- | ------- | +| `custom-element-definition` | `sl-progress-bar` | ProgressBar | /packages/components/progress-bar/src/progress-bar.js | | + +# `../packages/components/radio-group/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | -------------------- | +| `js` | `*` | * | | ./src/radio.js | +| `js` | `*` | * | | ./src/radio-group.js | + +# `../packages/components/radio-group/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ---------------- | ----------- | --------------------------------------------------- | ------- | +| `custom-element-definition` | `sl-radio` | Radio | /packages/components/radio-group/src/radio.js | | +| `custom-element-definition` | `sl-radio-group` | RadioGroup | /packages/components/radio-group/src/radio-group.js | | + +# `../packages/components/scrollbar/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ------------------ | +| `js` | `*` | * | | ./src/scrollbar.js | + +# `../packages/components/scrollbar/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | -------------- | ----------- | ----------------------------------------------- | ------- | +| `custom-element-definition` | `sl-scrollbar` | Scrollbar | /packages/components/scrollbar/src/scrollbar.js | | + +# `../packages/components/search-field/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | --------------------- | +| `js` | `*` | * | | ./src/search-field.js | + +# `../packages/components/search-field/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ----------------- | ----------- | ----------------------------------------------------- | ------- | +| `custom-element-definition` | `sl-search-field` | SearchField | /packages/components/search-field/src/search-field.js | | + +# `../packages/components/select/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | --------------- | +| `js` | `*` | * | | ./src/select.js | + +# `../packages/components/select/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ----------- | ----------- | ----------------------------------------- | ------- | +| `custom-element-definition` | `sl-select` | Select | /packages/components/select/src/select.js | | + +# `../packages/components/shared/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ------------------------------------ | +| `js` | `*` | * | | ./src/browser.js | +| `js` | `*` | * | | ./src/config.js | +| `js` | `*` | * | | ./src/controllers/anchor.js | +| `js` | `*` | * | | ./src/controllers/events.js | +| `js` | `*` | * | | ./src/controllers/focus-group.js | +| `js` | `*` | * | | ./src/controllers/focus-trap.js | +| `js` | `*` | * | | ./src/controllers/roving-tabindex.js | +| `js` | `*` | * | | ./src/controllers/selection.js | +| `js` | `*` | * | | ./src/controllers/shortcut.js | +| `js` | `*` | * | | ./src/css.js | +| `js` | `*` | * | | ./src/decorators/base.js | +| `js` | `*` | * | | ./src/decorators/event.js | +| `js` | `*` | * | | ./src/decorators/observe.js | +| `js` | `*` | * | | ./src/dom.js | +| `js` | `*` | * | | ./src/directives/anchor.js | +| `js` | `*` | * | | ./src/mixins.js | +| `js` | `*` | * | | ./src/path.js | +| `js` | `*` | * | | ./src/popover.js | +| `js` | `*` | * | | ./src/string.js | +| `js` | `*` | * | | ./src/types.js | + +# `../packages/components/shared/src/events.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------------- | ------------- | ------------------ | ------- | +| `js` | `SlBlurEvent` | SlBlurEvent | ./events/blur.js | | +| `js` | `SlChangeEvent` | SlChangeEvent | ./events/change.js | | +| `js` | `SlClearEvent` | SlClearEvent | ./events/clear.js | | +| `js` | `SlFocusEvent` | SlFocusEvent | ./events/focus.js | | +| `js` | `SlSelectEvent` | SlSelectEvent | ./events/select.js | | +| `js` | `SlToggleEvent` | SlToggleEvent | ./events/toggle.js | | + +# `../packages/components/skeleton/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ----------------- | +| `js` | `*` | * | | ./src/skeleton.js | + +# `../packages/components/skeleton/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ------------- | ----------- | --------------------------------------------- | ------- | +| `custom-element-definition` | `sl-skeleton` | Skeleton | /packages/components/skeleton/src/skeleton.js | | + +# `../packages/components/spinner/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ---------------- | +| `js` | `*` | * | | ./src/spinner.js | + +# `../packages/components/spinner/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ------------ | ----------- | ------------------------------------------- | ------- | +| `custom-element-definition` | `sl-spinner` | Spinner | /packages/components/spinner/src/spinner.js | | + +# `../packages/components/switch/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | --------------- | +| `js` | `*` | * | | ./src/switch.js | + +# `../packages/components/switch/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ----------- | ----------- | ----------------------------------------- | ------- | +| `custom-element-definition` | `sl-switch` | Switch | /packages/components/switch/src/switch.js | | + +# `../packages/components/tabs/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ------------------ | +| `js` | `*` | * | | ./src/tab-group.js | +| `js` | `*` | * | | ./src/tab-panel.js | +| `js` | `*` | * | | ./src/tab.js | + +# `../packages/components/tabs/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | -------------- | ----------- | ------------------------------------------ | ------- | +| `custom-element-definition` | `sl-tab` | Tab | /packages/components/tabs/src/tab.js | | +| `custom-element-definition` | `sl-tab-group` | TabGroup | /packages/components/tabs/src/tab-group.js | | +| `custom-element-definition` | `sl-tab-panel` | TabPanel | /packages/components/tabs/src/tab-panel.js | | + +# `../packages/components/tag/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ----------------- | +| `js` | `*` | * | | ./src/tag.js | +| `js` | `*` | * | | ./src/tag-list.js | + +# `../packages/components/tag/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ------------- | ----------- | ---------------------------------------- | ------- | +| `custom-element-definition` | `sl-tag-list` | TagList | /packages/components/tag/src/tag-list.js | | +| `custom-element-definition` | `sl-tag` | Tag | /packages/components/tag/src/tag.js | | + +# `../packages/components/text-area/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ------------------ | +| `js` | `*` | * | | ./src/text-area.js | + +# `../packages/components/text-area/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | -------------- | ----------- | ----------------------------------------------- | ------- | +| `custom-element-definition` | `sl-text-area` | TextArea | /packages/components/text-area/src/text-area.js | | + +# `../packages/components/text-field/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ------------------- | +| `js` | `*` | * | | ./src/text-field.js | + +# `../packages/components/text-field/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | --------------- | ----------- | ------------------------------------------------- | ------- | +| `custom-element-definition` | `sl-text-field` | TextField | /packages/components/text-field/src/text-field.js | | + +# `../packages/components/toggle-button/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ---------------------- | +| `js` | `*` | * | | ./src/toggle-button.js | + +# `../packages/components/toggle-button/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ------------------ | ------------ | ------------------------------------------------------- | ------- | +| `custom-element-definition` | `sl-toggle-button` | ToggleButton | /packages/components/toggle-button/src/toggle-button.js | | + +# `../packages/components/toggle-group/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | --------------------- | +| `js` | `*` | * | | ./src/toggle-group.js | + +# `../packages/components/toggle-group/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ----------------- | ----------- | ----------------------------------------------------- | ------- | +| `custom-element-definition` | `sl-toggle-group` | ToggleGroup | /packages/components/toggle-group/src/toggle-group.js | | + +# `../packages/components/tool-bar/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | ------------------------- | +| `js` | `*` | * | | ./src/tool-bar.js | +| `js` | `*` | * | | ./src/tool-bar-divider.js | + +# `../packages/components/tool-bar/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | --------------------- | -------------- | ----------------------------------------------------- | ------- | +| `custom-element-definition` | `sl-tool-bar` | ToolBar | /packages/components/tool-bar/src/tool-bar.js | | +| `custom-element-definition` | `sl-tool-bar-divider` | ToolBarDivider | /packages/components/tool-bar/src/tool-bar-divider.js | | + +# `../packages/components/tooltip/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | -------------------------- | +| `js` | `*` | * | | ./src/tooltip.js | +| `js` | `*` | * | | ./src/tooltip-directive.js | + +# `../packages/components/tooltip/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | ------------ | ----------- | ------------------------------------------- | ------- | +| `custom-element-definition` | `sl-tooltip` | Tooltip | /packages/components/tooltip/src/tooltip.js | | + +# `../packages/components/tree/index.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---- | ----------- | ------ | -------------------------------- | +| `js` | `*` | * | | ./src/flat-tree-data-source.js | +| `js` | `*` | * | | ./src/nested-tree-data-source.js | +| `js` | `*` | * | | ./src/tree-data-source.js | +| `js` | `*` | * | | ./src/tree.js | + +# `../packages/components/tree/register.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| --------------------------- | --------- | ----------- | ------------------------------------- | ------- | +| `custom-element-definition` | `sl-tree` | Tree | /packages/components/tree/src/tree.js | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/accordion/src/accordion-item.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ----------------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/accordion/src/accordion-item.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/accordion/src/accordion-item.ts`: + +## class: `AccordionItem`, `sl-accordion-item` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------- | ------- | ---------------------- | ------- | -------------------------------------------------------------- | -------------- | +| `disabled` | | `boolean \| undefined` | | Whether the element is disabled. | | +| `open` | | `boolean \| undefined` | | Whether the details element is opened. | | +| `summary` | | `string \| undefined` | | A text shown in the header - as a title of the accordion item. | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------ | -------------- | +| `focus` | | This is a workaround for `delegatesFocus` not allowing you to select any text in the content of the accordion item. See https://issues.chromium.org/issues/40622041 | `options: FocusOptions` | `void` | | +| `toggle` | | Toggles the component state between open or closed. If the `force` parameter is provided, the state will be set to the value of the parameter. | `force: boolean` | `void` | | + +### Events + +| Name | Type | Description | Inherited From | +| ----------- | ------------------------ | ----------------------------------------------- | -------------- | +| `sl-toggle` | `SlToggleEvent` | Emits when the accordion item has been toggled. | | + +### Attributes + +| Name | Field | Inherited From | +| ---------- | -------- | -------------- | +| `disabled` | disabled | | +| `open` | open | | +| `summary` | summary | | + +### CSS Parts + +| Name | Description | +| --------- | ------------------------------------ | +| `summary` | Header element of the accordion-item | +| `panel` | The body of the accordion-item | + +### Slots + +| Name | Description | +| --------- | ---------------------------------------------------------------------------------- | +| `default` | Body content for the accordion | +| `summary` | Header content for the accordion; use this if the `summary` property is not enough | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------------- | ------------- | ------------------------------------------------------------------------------------------------ | ------- | +| `js` | `AccordionItem` | AccordionItem | /Users/diana.broeders/Projects/design-system/packages/components/accordion/src/accordion-item.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/accordion/src/accordion.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------------ | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/accordion/src/accordion.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/accordion/src/accordion.ts`: + +## class: `Accordion`, `sl-accordion` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| -------- | ------- | ------------------------------ | ------- | ---------------------------------------------------------------------------------------------------------- | -------------- | +| `items` | | `AccordionItem[] \| undefined` | | The slotted accordion items. | | +| `single` | | `boolean \| undefined` | | Whether only one accordion item can be opened at once. By default, multiple accordion items can be opened. | | + +### Attributes + +| Name | Field | Inherited From | +| -------- | ------ | -------------- | +| `single` | single | | + +### Slots + +| Name | Description | +| --------- | -------------------------------------------- | +| `default` | The place for multiple `` | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ----------- | ----------- | ------------------------------------------------------------------------------------------- | ------- | +| `js` | `Accordion` | Accordion | /Users/diana.broeders/Projects/design-system/packages/components/accordion/src/accordion.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/announcer/src/announce.ts`: + +## Functions + +| Name | Description | Parameters | Return | +| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | ------ | +| `announce` | Sends a notification to the live aria. Please be aware that sending messages too soon after each other can cause the screenreader to stop reading the earlier messages, or even skip them, when a new message is sent. If you want to send multiple messages in a row, consider using a single message with all the information. | `message: string, urgency: 'polite' \| 'assertive'` | `void` | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---------- | ----------- | ------------------------------------------------------------------------------------------ | ------- | +| `js` | `announce` | announce | /Users/diana.broeders/Projects/design-system/packages/components/announcer/src/announce.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/announcer/src/announcer.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------------ | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/announcer/src/announcer.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/announcer/src/announcer.ts`: + +## class: `Announcer`, `sl-announcer` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ----------------- | --------------- | ------------------------------------------------------------------------------------------- | ------- | +| `js` | `SlAnnounceEvent` | SlAnnounceEvent | /Users/diana.broeders/Projects/design-system/packages/components/announcer/src/announcer.ts | | +| `js` | `Announcer` | Announcer | /Users/diana.broeders/Projects/design-system/packages/components/announcer/src/announcer.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/avatar/src/avatar.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------ | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/avatar/src/avatar.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/avatar/src/avatar.ts`: + +## class: `Avatar`, `sl-avatar` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ----------------- | ------- | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------ | -------------- | +| `badge` | | `Badge \| undefined` | | The slotted badge element. | | +| `clipPath` | | `string \| undefined` | | The clip-path cutout for the badge. | | +| `displayInitials` | | `string \| undefined` | | The initials that need to be displayed. If none are set they are determined based on the displayName . | | +| `displayName` | | `string \| undefined` | | The name that needs to be displayed. | | +| `href` | | `string \| undefined` | | An optional URL that will be used for linking the display name. | | +| `imageOnly` | | `boolean \| undefined` | | This hides the name when set to true. | | +| `pictureUrl` | | `string \| undefined` | | The url of the avatar image. | | +| `size` | | `AvatarSize` | `'md'` | The size of the avatar. | | +| `vertical` | | `boolean \| undefined` | | If true, will display the name below the image. | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| -------------- | ------- | ----------- | ---------- | ---------------- | -------------- | +| `renderAvatar` | | | | `TemplateResult` | | + +### Attributes + +| Name | Field | Inherited From | +| ------------------ | --------------- | -------------- | +| `display-initials` | displayInitials | | +| `display-name` | displayName | | +| `href` | href | | +| `image-only` | imageOnly | | +| `picture-url` | pictureUrl | | +| `size` | size | | +| `vertical` | vertical | | + +### CSS Parts + +| Name | Description | +| ---------- | --------------------------------------------------------------- | +| `avatar` | The container for positioning the badge. | +| `initials` | The initials to display when no picture is set. | +| `name` | The display name, either a or if `href` is set. | +| `picture` | The element containing the image, initials or fallback content. | +| `wrapper` | The wrapper element around the image and name. | + +### Slots + +| Name | Description | +| ---------- | ------------------------------------------------------- | +| `badge` | The badge to display on the avatar. | +| `default` | The subheading of the avatar. | +| `fallback` | The fallback content to display when no picture is set. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------- | ----------- | ------------------------------------------------------------------------------------- | ------- | +| `js` | `Avatar` | Avatar | /Users/diana.broeders/Projects/design-system/packages/components/avatar/src/avatar.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/badge/src/badge.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ---------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/badge/src/badge.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/badge/src/badge.ts`: + +## class: `Badge`, `sl-badge` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------- | ------- | ---------------------------- | --------- | -------------------------------------------------------------------------------------- | -------------- | +| `color` | | `BadgeColor \| undefined` | `grey` | The color of the badge. | | +| `emphasis` | | `BadgeEmphasis \| undefined` | `subtle` | The emphasis of the badge. | | +| `size` | | `BadgeSize \| undefined` | `'md'` | The size of the badge component. | | +| `variant` | | `BadgeVariant \| undefined` | `neutral` | The variant of the badge. This property is deprecated. Use the color property instead. | | + +### Attributes + +| Name | Field | Inherited From | +| ---------- | -------- | -------------- | +| `color` | color | | +| `emphasis` | emphasis | | +| `size` | size | | +| `variant` | variant | | + +### Slots + +| Name | Description | +| --------- | --------------------- | +| `default` | Contents of the badge | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------- | ----------- | ----------------------------------------------------------------------------------- | ------- | +| `js` | `Badge` | Badge | /Users/diana.broeders/Projects/design-system/packages/components/badge/src/badge.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/breadcrumbs/src/breadcrumbs.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ---------------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/breadcrumbs/src/breadcrumbs.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/breadcrumbs/src/breadcrumbs.ts`: + +## class: `Breadcrumbs`, `sl-breadcrumbs` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Static Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| --------- | ------- | --------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `homeUrl` | | `string` | `'/'` | The url for the home link, defaults to the root url. By changing this static property you can change the default value for all future instances of the component. Changing the static property won't affect already created instances. | | +| `noHome` | | `boolean` | `false` | When true doesn't show a home link as the first breadcrumb. By changing this static property you can change the default value for all future instances of the component. Changing the static property won't affect already created instances. | | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------- | ------- | ---------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `homeUrl` | | | | The url for the home link, defaults to the root url. If you want to change the default value for all future instances of the component, you can change the static property. If you want to change the property of an already created instance, you need to change this property. | | +| `inverted` | | `boolean \| undefined` | | Set this to true to invert the color of the breadcrumbs. This should be used when the breadcrumbs are displayed on a dark background. | | +| `noHome` | | | | When true doesn't show a home link as the first breadcrumb. If you want to change the default value for all future instances of the component, you can change the static property. If you want to change the property of an already created instance, you need to change this property. | | + +### Attributes + +| Name | Field | Inherited From | +| ---------- | -------- | -------------- | +| `inverted` | inverted | | +| `home-url` | homeUrl | | +| `no-home` | noHome | | + +### Slots + +| Name | Description | +| --------- | --------------------------- | +| `default` | The breadcrumbs to display. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------- | ----------- | ----------------------------------------------------------------------------------------------- | ------- | +| `js` | `Breadcrumbs` | Breadcrumbs | /Users/diana.broeders/Projects/design-system/packages/components/breadcrumbs/src/breadcrumbs.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/button-bar/src/button-bar.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | -------------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/button-bar/src/button-bar.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/button-bar/src/button-bar.ts`: + +## class: `ButtonBar`, `sl-button-bar` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| --------- | ------- | ----------------------------- | ------- | ----------------------------------------------- | -------------- | +| `align` | | `ButtonBarAlign \| undefined` | `start` | The alignment of the buttons within the bar. | | +| `reverse` | | `boolean \| undefined` | | When set to true, the button order is reversed. | | +| `size` | | `ButtonSize \| undefined` | | Determines the size of all buttons in the bar. | | + +### Attributes + +| Name | Field | Inherited From | +| --------- | ------- | -------------- | +| `align` | align | | +| `reverse` | reverse | | +| `size` | size | | + +### Slots + +| Name | Description | +| --------- | --------------------------------- | +| `default` | Buttons to be grouped in the bar. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ----------- | ----------- | --------------------------------------------------------------------------------------------- | ------- | +| `js` | `ButtonBar` | ButtonBar | /Users/diana.broeders/Projects/design-system/packages/components/button-bar/src/button-bar.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/button/src/button.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------ | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/button/src/button.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/button/src/button.ts`: + +## class: `Button`, `sl-button` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------- | ------- | ---------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | -------------- | +| `disabled` | | `boolean \| undefined` | | Whether the button is disabled; when set no interaction is possible. | | +| `fill` | | `ButtonFill \| undefined` | `solid` | The fill of the button. | | +| `shape` | | `ButtonShape \| undefined` | `square` | The shape of the button. | | +| `size` | | `ButtonSize \| undefined` | `'md'` | The size of the button. | | +| `type` | | `ButtonType \| undefined` | `button` | The type of the button. Can be used to mimic the functionality of submit and reset buttons in native HTML buttons. | | +| `variant` | | `ButtonVariant \| undefined` | `secondary` | The variant of the button. | | + +### Attributes + +| Name | Field | Inherited From | +| ---------- | -------- | -------------- | +| `disabled` | disabled | | +| `fill` | fill | | +| `shape` | shape | | +| `size` | size | | +| `type` | type | | +| `variant` | variant | | + +### Slots + +| Name | Description | +| --------- | ------------------------------------------------------------------------- | +| `default` | Text label of the button. Optionally an sl-icon can be added | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------- | ----------- | ------------------------------------------------------------------------------------- | ------- | +| `js` | `Button` | Button | /Users/diana.broeders/Projects/design-system/packages/components/button/src/button.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/card/src/card.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | -------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/card/src/card.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/card/src/card.ts`: + +## class: `Card`, `sl-card` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------------- | ------- | ---------------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `explicitHeight` | | `boolean \| undefined` | | When the height of the card is set (or constrained) by its container (for example in a grid with fixed rows) this needs to be set to be added in order to assure the correct rendering | | +| `height` | | `CardHeightOptions` | `'fixed'` | When the height is `fixed` the image will determine the height of the card, when it is `flex` the height of the text will determine the height of the card. | | +| `mediaPosition` | | `CardMediaPosition` | `'start'` | Show the media at the start or at the end. | | +| `orientation` | | `CardOrientation` | `'horizontal'` | The position of the media in relation to the text | | +| `padding` | | `boolean` | `false` | Indicates whether there is a padding around the media. Recommended to set to true when the `--sl-card-stretch-image` isn't set to 100% | | + +### Attributes + +| Name | Field | Inherited From | +| ----------------- | -------------- | -------------- | +| `padding` | padding | | +| `explicit-height` | explicitHeight | | +| `height` | height | | +| `orientation` | orientation | | +| `media-position` | mediaPosition | | + +### CSS Properties + +| Name | Default | Description | +| ---------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `--sl-card-media-aspect-ratio` | | The aspectratio of the media container (default is 4/3). By default this ratio is always maintained, and will cause the media to become smaller when there isn't sufficient space for the full width. | +| `--sl-card-media-width` | | The width of the media in relation to the text. Can be set in pixels or `fr`. | +| `--sl-card-media-x` | | X-Focuspoint of the media; this is taken as the center when the media is cropped. | +| `--sl-card-media-y` | | Y-Focuspoint of the media; this is taken as the center when the media is cropped. | +| `--sl-card-orientation-breakpoint` | | When card is smaller than this size it will switch from horizontal (when set) to vertical layout. | +| `--sl-card-stretch-image` | | Set this to 100% when the aspectratio of the media doesn't matter and you want it to fill the full height of the card. | +| `--sl-card-text-width` | | The width of the text in relation to the media. Can be set in pixels (not recommended) or `fr`. | + +### Slots + +| Name | Description | +| --------- | ------------------------------------ | +| `default` | Title of the card | +| `media` | Media, this can be an image or video | +| `header` | Subtitle or badges | +| `body` | Body text of the card | +| `actions` | Icon button for actions on the card. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------ | ----------- | --------------------------------------------------------------------------------- | ------- | +| `js` | `Card` | Card | /Users/diana.broeders/Projects/design-system/packages/components/card/src/card.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/checkbox/src/checkbox-group.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ---------------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/checkbox/src/checkbox-group.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/checkbox/src/checkbox-group.ts`: + +## class: `CheckboxGroup`, `sl-checkbox-group` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| ------------------ | ------ | ---------------------- | +| `FormControlMixin` | | @sl-design-system/form | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------------- | ------- | -------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | +| `customValidity` | | `string \| undefined` | | The error message to display when the control is invalid. | FormControlMixin | +| `dirty` | | `boolean` | `false` | A control is dirty if the user has changed the value in the UI. | FormControlMixin | +| `disabled` | | `boolean \| undefined` | | Whether the group is disabled; when set no interaction is possible. | | +| `form` | | `HTMLFormElement \| null` | | The form associated with the control. | FormControlMixin | +| `formValue` | | `unknown` | | We need to override the setter as well, otherwise it won't work. See https://github.com/sl-design-system/components/issues/1441 | FormControlMixin | +| `labels` | | `` `NodeListOf` \| null `` | | The labels associated with the control. | FormControlMixin | +| `name` | | `string \| undefined` | | The name of the form control. | FormControlMixin | +| `nativeFormValue` | | `FormValue` | | Returns the form value as used in a native `
`. This is always a string, File, FormData or null. | FormControlMixin | +| `required` | | `boolean \| undefined` | | At least one checkbox in the group must be checked if true. | | +| `showValid` | | `boolean` | `false` | Optional property to indicate the valid state should be shown. | FormControlMixin | +| `showValidity` | | `'valid' \| 'invalid' \| undefined` | | Whether to show the validity state. | FormControlMixin | +| `size` | | `CheckboxSize \| undefined` | | The size of the checkboxes in the group. | | +| `touched` | | `boolean` | `false` | A control is marked touched once the user has triggered a blur event on it. | FormControlMixin | +| `valid` | | `boolean` | | Returns whether the form control is valid or not. | FormControlMixin | +| `validationMessage` | | `string` | | String representing a localized (by the browser) message that describes the validation constraints that the control does not satisfy (if any). The string is empty if the control is not a candidate for constraint validation, or it satisfies its constraints. For true localization, see `getLocalizedValidationMessage()` instead. | FormControlMixin | +| `validity` | | `ValidityState` | | Returns the validity state the control is in. | FormControlMixin | +| `validityState` | | `'valid' \| 'invalid' \| 'pending'` | | Returns the current validity state. | FormControlMixin | +| `value` | | `unknown \| undefined` | | The value of the group. | FormControlMixin | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------- | ---------------- | +| `focus` | | | | `void` | | +| `getLocalizedValidationMessage` | | This returns a localized validation message. It does not support all `ValidityState` properties, since some require more context than we have here. If you need to support more, you can override this method in your own form control. | | `string` | FormControlMixin | +| `reportValidity` | | Returns whether the control is valid. If the control is invalid, calling this will also cause an `invalid` event to be dispatched. After calling this, the control will also report the validity to the user. | | `boolean` | FormControlMixin | +| `setCustomValidity` | | Sets a custom validation message for the form control. If the message is not an empty string, that will make the control invalid. By setting it to an empty string again, you can make the control valid again. | `message: string \| Promise` | `void` | FormControlMixin | + +### Events + +| Name | Type | Description | Inherited From | +| -------------------- | --------------------------------- | -------------------------------------------------------------------------------------------- | ---------------- | +| `sl-blur` | `SlBlurEvent` | Emits when the component loses focus. | | +| `sl-change` | `SlChangeEvent>` | Emits when the value of the group changes. | | +| `sl-focus` | `SlFocusEvent` | Emits when the component receives focus. | | +| `sl-form-control` | `SlFormControlEvent` | Emits when the form control is added to the DOM. | FormControlMixin | +| `sl-update-state` | `SlUpdateStateEvent` | Emits when the UI state (dirty, pristine, touched or untouched) of the form control changes. | FormControlMixin | +| `sl-update-validity` | `SlUpdateValidityEvent` | Emits when the validity of the form control changes. | FormControlMixin | +| `sl-validate` | `SlValidateEvent` | Emits when the form control can be validated. | FormControlMixin | + +### Attributes + +| Name | Field | Inherited From | +| ----------------- | -------------- | ---------------- | +| `disabled` | disabled | | +| `required` | required | | +| `size` | size | | +| `value` | value | | +| `custom-validity` | customValidity | FormControlMixin | +| `name` | name | FormControlMixin | +| `show-validity` | showValidity | FormControlMixin | + +### Slots + +| Name | Description | +| --------- | --------------------------------- | +| `default` | A list of `sl-checkbox` elements. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------------- | ------------- | ----------------------------------------------------------------------------------------------- | ------- | +| `js` | `CheckboxGroup` | CheckboxGroup | /Users/diana.broeders/Projects/design-system/packages/components/checkbox/src/checkbox-group.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/checkbox/src/checkbox.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ---------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/checkbox/src/checkbox.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/checkbox/src/checkbox.ts`: + +## class: `Checkbox`, `sl-checkbox` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| ------------------------ | ------ | ------------------------ | +| `ObserveAttributesMixin` | | @sl-design-system/shared | +| `FormControlMixin` | | @sl-design-system/form | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------------- | ------- | -------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | +| `checked` | | `boolean \| undefined` | | Whether the checkbox is checked. | | +| `customValidity` | | `string \| undefined` | | The error message to display when the control is invalid. | FormControlMixin | +| `dirty` | | `boolean` | `false` | A control is dirty if the user has changed the value in the UI. | FormControlMixin | +| `disabled` | | `boolean \| undefined` | | Whether the checkbox is disabled; when set no interaction is possible. | | +| `form` | | `HTMLFormElement \| null` | | The form associated with the control. | FormControlMixin | +| `formValue` | | `unknown` | | The value used when submitting the form. | FormControlMixin | +| `indeterminate` | | `boolean \| undefined` | | Whether the checkbox has the indeterminate state. | | +| `input` | | `HTMLInputElement` | | The input element in the light DOM. | | +| `labels` | | `` `NodeListOf` \| null `` | | The labels associated with the control. | FormControlMixin | +| `name` | | `string \| undefined` | | The name of the form control. | FormControlMixin | +| `nativeFormValue` | | `FormValue` | | Returns the form value as used in a native ``. This is always a string, File, FormData or null. | FormControlMixin | +| `required` | | `boolean \| undefined` | | Whether the checkbox is required. | | +| `showValid` | | `boolean` | `false` | When set will cause the control to show it is valid after reportValidity is called. | FormControlMixin | +| `showValidity` | | `'valid' \| 'invalid' \| undefined` | | Whether to show the validity state. | FormControlMixin | +| `size` | | `CheckboxSize \| undefined` | `md` | The size of the checkbox. | | +| `touched` | | `boolean` | `false` | A control is marked touched once the user has triggered a blur event on it. | FormControlMixin | +| `valid` | | `boolean` | | Returns whether the form control is valid or not. | FormControlMixin | +| `validationMessage` | | `string` | | String representing a localized (by the browser) message that describes the validation constraints that the control does not satisfy (if any). The string is empty if the control is not a candidate for constraint validation, or it satisfies its constraints. For true localization, see `getLocalizedValidationMessage()` instead. | FormControlMixin | +| `validity` | | `ValidityState` | | Returns the validity state the control is in. | FormControlMixin | +| `validityState` | | `'valid' \| 'invalid' \| 'pending'` | | Returns the current validity state. | FormControlMixin | +| `value` | | `unknown \| undefined` | | The value of the checkbox when the checkbox is checked. See the formValue property for easy access. | FormControlMixin | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------- | ---------------------- | +| `blur` | | | | `void` | | +| `focus` | | | | `void` | | +| `getLocalizedValidationMessage` | | This returns a localized validation message. It does not support all `ValidityState` properties, since some require more context than we have here. If you need to support more, you can override this method in your own form control. | | `string` | FormControlMixin | +| `reportValidity` | | Returns whether the control is valid. If the control is invalid, calling this will also cause an `invalid` event to be dispatched. After calling this, the control will also report the validity to the user. | | `boolean` | FormControlMixin | +| `setAttributesTarget` | | | `target: Element` | `void` | ObserveAttributesMixin | +| `setCustomValidity` | | Sets a custom validation message for the form control. If the message is not an empty string, that will make the control invalid. By setting it to an empty string again, you can make the control valid again. | `message: string \| Promise` | `void` | FormControlMixin | + +### Events + +| Name | Type | Description | Inherited From | +| -------------------- | -------------------------- | -------------------------------------------------------------------------------------------- | ---------------- | +| `sl-blur` | `SlBlurEvent` | Emits when the component loses focus. | | +| `sl-change` | `SlChangeEvent` | Emits when the checked state changes. | | +| `sl-focus` | `SlFocusEvent` | Emits when the component receives focus. | | +| `sl-form-control` | `SlFormControlEvent` | Emits when the form control is added to the DOM. | FormControlMixin | +| `sl-update-state` | `SlUpdateStateEvent` | Emits when the UI state (dirty, pristine, touched or untouched) of the form control changes. | FormControlMixin | +| `sl-update-validity` | `SlUpdateValidityEvent` | Emits when the validity of the form control changes. | FormControlMixin | +| `sl-validate` | `SlValidateEvent` | Emits when the form control can be validated. | FormControlMixin | + +### Attributes + +| Name | Field | Inherited From | +| ----------------- | -------------- | ---------------- | +| `aria-disabled` | | | +| `aria-label` | | | +| `aria-labelledby` | | | +| `checked` | checked | | +| `disabled` | disabled | | +| `indeterminate` | indeterminate | | +| `required` | required | | +| `show-valid` | showValid | | +| `size` | size | | +| `value` | value | | +| `custom-validity` | customValidity | FormControlMixin | +| `name` | name | FormControlMixin | +| `show-validity` | showValidity | FormControlMixin | + +### CSS Parts + +| Name | Description | +| ---- | ------------------------------------------- | +| | outer - The outer container of the checkbox | +| | inner - The inner container of the checkbox | +| | label - The label of the checkbox | + +### Slots + +| Name | Description | +| --------- | ---------------------------------------------------------------------------------------------------------- | +| `default` | Text label of the checkbox. Technically there are no limits what can be put here; text, images, icons etc. | +| `input` | The slot for the input element | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---------- | ----------- | ----------------------------------------------------------------------------------------- | ------- | +| `js` | `Checkbox` | Checkbox | /Users/diana.broeders/Projects/design-system/packages/components/checkbox/src/checkbox.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/combobox/src/combobox.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ---------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/combobox/src/combobox.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/combobox/src/combobox.ts`: + +## class: `Combobox`, `sl-combobox` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `FormControlMixin` | | @sl-design-system/form | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| -------------------- | ------- | ---------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | +| `allowCustomValues` | | `boolean \| undefined` | | Will allow custom values not in the listbox when set. | | +| `autocomplete` | | `'off' \| 'inline' \| 'list' \| 'both' \| undefined` | `'both'` | The behavior of the combobox when it comes to suggesting options based on user input. \- 'off': Suggest is off \- 'inline': Only suggest options inside the input \- 'list': Filter options in the list based on user input \- 'both': Use both inline and list suggestions | | +| `customValidity` | | `string \| undefined` | | The error message to display when the control is invalid. | FormControlMixin | +| `dirty` | | `boolean` | `false` | A control is dirty if the user has changed the value in the UI. | FormControlMixin | +| `disabled` | | `boolean \| undefined` | | Whether the text field is disabled; when set no interaction is possible. | | +| `filterResults` | | `boolean \| undefined` | | When set, will filter the results in the listbox based on user input. | | +| `form` | | `HTMLFormElement \| null` | | The form associated with the control. | FormControlMixin | +| `formValue` | | `unknown` | | The value used when submitting the form. | FormControlMixin | +| `groupSelected` | | `boolean \| undefined` | | When set will group all the selected options at the top of the listbox. | | +| `labels` | | `` `NodeListOf` \| null `` | | The labels associated with the control. | FormControlMixin | +| `multiple` | | `boolean \| undefined` | | Will allow the selection of multiple options if true. | | +| `name` | | `string \| undefined` | | The name of the form control. | FormControlMixin | +| `nativeFormValue` | | `FormValue` | | Returns the form value as used in a native ``. This is always a string, File, FormData or null. | FormControlMixin | +| `optionGroupPath` | | `PathKeys \| undefined` | | The path to use for grouping the options. | | +| `optionLabelPath` | | `PathKeys \| undefined` | | The path to use for the label of the option. | | +| `optionSelectedPath` | | `PathKeys \| undefined` | | The path to use for the selected state of the option. | | +| `optionValuePath` | | `PathKeys \| undefined` | | The path to use for the value of the option. | | +| `options` | | `T[] \| undefined` | | There are 2 ways to provide options to the combobox: 1\. By using this `options` property to provide an array of options. 2\. By rendering a listbox element in the light DOM and populate it with `` elements. This options property is used to provide options for the first method. | | +| `placeholder` | | `string \| undefined` | | Placeholder text in the input. | | +| `required` | | `boolean \| undefined` | | Whether the text field is a required field. | | +| `selectOnly` | | `boolean \| undefined` | | Whether the component is select only. This means you cannot type in the text field, but you can still select options. | | +| `showValid` | | `boolean` | `false` | When set will cause the control to show it is valid after reportValidity is called. | FormControlMixin | +| `showValidity` | | `'valid' \| 'invalid' \| undefined` | | Whether to show the validity state. | FormControlMixin | +| `size` | | `ComboboxSize \| undefined` | `'md'` | The size of the combobox. | | +| `touched` | | `boolean` | `false` | A control is marked touched once the user has triggered a blur event on it. | FormControlMixin | +| `valid` | | `boolean` | | Returns whether the form control is valid or not. | FormControlMixin | +| `validationMessage` | | `string` | | String representing a localized (by the browser) message that describes the validation constraints that the control does not satisfy (if any). The string is empty if the control is not a candidate for constraint validation, or it satisfies its constraints. For true localization, see `getLocalizedValidationMessage()` instead. | FormControlMixin | +| `validity` | | `ValidityState` | | Returns the validity state the control is in. | FormControlMixin | +| `validityState` | | `'valid' \| 'invalid' \| 'pending'` | | Returns the current validity state. | FormControlMixin | +| `value` | | `unknown \| undefined` | | The value of the combobox. If `multiple` selection is enabled, then this will be an array of values. Otherwise, it will be a single value. | FormControlMixin | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------- | ---------------- | +| `getLocalizedValidationMessage` | | This returns a localized validation message. It does not support all `ValidityState` properties, since some require more context than we have here. If you need to support more, you can override this method in your own form control. | | `string` | FormControlMixin | +| `reportValidity` | | Returns whether the control is valid. If the control is invalid, calling this will also cause an `invalid` event to be dispatched. After calling this, the control will also report the validity to the user. | | `boolean` | FormControlMixin | +| `setCustomValidity` | | Sets a custom validation message for the form control. If the message is not an empty string, that will make the control invalid. By setting it to an empty string again, you can make the control valid again. | `message: string \| Promise` | `void` | FormControlMixin | + +### Events + +| Name | Type | Description | Inherited From | +| -------------------- | -------------------------------------- | -------------------------------------------------------------------------------------------- | ---------------- | +| `sl-blur` | `SlBlurEvent` | Emits when the focus leaves the component. | | +| `sl-change` | `SlChangeEvent` | Emits when the value changes. | | +| `sl-focus` | `SlFocusEvent` | Emits when the component gains focus. | | +| `sl-form-control` | `SlFormControlEvent` | Emits when the form control is added to the DOM. | FormControlMixin | +| `sl-update-state` | `SlUpdateStateEvent` | Emits when the UI state (dirty, pristine, touched or untouched) of the form control changes. | FormControlMixin | +| `sl-update-validity` | `SlUpdateValidityEvent` | Emits when the validity of the form control changes. | FormControlMixin | +| `sl-validate` | `SlValidateEvent` | Emits when the form control can be validated. | FormControlMixin | + +### Attributes + +| Name | Field | Inherited From | +| ---------------------- | ------------------ | ---------------- | +| `allow-custom-values` | allowCustomValues | | +| `autocomplete` | autocomplete | | +| `disabled` | disabled | | +| `filter-results` | filterResults | | +| `group-selected` | groupSelected | | +| `multiple` | multiple | | +| `option-group-path` | optionGroupPath | | +| `option-label-path` | optionLabelPath | | +| `option-selected-path` | optionSelectedPath | | +| `option-value-path` | optionValuePath | | +| `options` | options | | +| `placeholder` | placeholder | | +| `select-only` | selectOnly | | +| `required` | required | | +| `show-valid` | showValid | | +| `size` | size | | +| `value` | value | | +| `custom-validity` | customValidity | FormControlMixin | +| `name` | name | FormControlMixin | +| `show-validity` | showValidity | FormControlMixin | + +### Slots + +| Name | Description | +| --------- | --------------------------------- | +| `default` | The input field | +| `options` | Contains the listbox with options | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---------- | ----------- | ----------------------------------------------------------------------------------------- | ------- | +| `js` | `Combobox` | Combobox | /Users/diana.broeders/Projects/design-system/packages/components/combobox/src/combobox.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/combobox/src/create-custom-option.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ---------------------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/combobox/src/create-custom-option.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/combobox/src/create-custom-option.ts`: + +## class: `CreateCustomOption` + +### Superclass + +| Name | Module | Package | +| -------- | ------ | ------------------------- | +| `Option` | | @sl-design-system/listbox | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------- | ------- | ----------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------ | -------------- | +| `disabled` | | `boolean \| undefined` | | Whether this option is disabled. | Option | +| `emphasis` | | `OptionEmphasis \| undefined` | `'subtle'` | The emphasis style when selected. | Option | +| `selected` | | `boolean \| undefined` | | Whether this option is selected. | Option | +| `textContent` | | `string` | | | Option | +| `value` | | `T` | | The value for this option. If not explicitly set, the getter will return the text content of the option. | Option | + +### Attributes + +| Name | Field | Inherited From | +| ---------- | -------- | -------------- | +| `disabled` | disabled | Option | +| `emphasis` | emphasis | Option | +| `selected` | selected | Option | +| `value` | value | Option | + +### Slots + +| Name | Description | +| --------- | ------------------- | +| `default` | The option's label. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------- | ------- | +| `js` | `CreateCustomOption` | CreateCustomOption | /Users/diana.broeders/Projects/design-system/packages/components/combobox/src/create-custom-option.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/combobox/src/custom-option.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | --------------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/combobox/src/custom-option.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/combobox/src/custom-option.ts`: + +## class: `CustomOption` + +### Superclass + +| Name | Module | Package | +| -------- | ------ | ------------------------- | +| `Option` | | @sl-design-system/listbox | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------- | ------- | ----------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------ | -------------- | +| `disabled` | | `boolean \| undefined` | | Whether this option is disabled. | Option | +| `emphasis` | | `OptionEmphasis \| undefined` | `'subtle'` | The emphasis style when selected. | Option | +| `selected` | | `boolean \| undefined` | | Whether this option is selected. | Option | +| `textContent` | | `string` | | | Option | +| `value` | | `T` | | The value for this option. If not explicitly set, the getter will return the text content of the option. | Option | + +### Attributes + +| Name | Field | Inherited From | +| ---------- | -------- | -------------- | +| `disabled` | disabled | Option | +| `emphasis` | emphasis | Option | +| `selected` | selected | Option | +| `value` | value | Option | + +### Slots + +| Name | Description | +| --------- | ------------------- | +| `default` | The option's label. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------------- | ------------ | ---------------------------------------------------------------------------------------------- | ------- | +| `js` | `CustomOption` | CustomOption | /Users/diana.broeders/Projects/design-system/packages/components/combobox/src/custom-option.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/combobox/src/grouped-option.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ---------------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/combobox/src/grouped-option.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/combobox/src/grouped-option.ts`: + +## class: `GroupedOption` + +### Superclass + +| Name | Module | Package | +| -------- | ------ | ------------------------- | +| `Option` | | @sl-design-system/listbox | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------- | ------- | ----------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------ | -------------- | +| `disabled` | | `boolean \| undefined` | | Whether this option is disabled. | Option | +| `emphasis` | | `OptionEmphasis \| undefined` | `'subtle'` | The emphasis style when selected. | Option | +| `group` | | `string \| undefined` | | The group this option belongs to. | | +| `selected` | | `boolean \| undefined` | | Whether this option is selected. | Option | +| `textContent` | | `string` | | | Option | +| `value` | | `T` | | The value for this option. If not explicitly set, the getter will return the text content of the option. | Option | + +### Attributes + +| Name | Field | Inherited From | +| ---------- | -------- | -------------- | +| `group` | group | | +| `disabled` | disabled | Option | +| `emphasis` | emphasis | Option | +| `selected` | selected | Option | +| `value` | value | Option | + +### Slots + +| Name | Description | +| --------- | ------------------- | +| `default` | The option's label. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------------- | ------------- | ----------------------------------------------------------------------------------------------- | ------- | +| `js` | `GroupedOption` | GroupedOption | /Users/diana.broeders/Projects/design-system/packages/components/combobox/src/grouped-option.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/combobox/src/no-match.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ---------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/combobox/src/no-match.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/combobox/src/no-match.ts`: + +## class: `NoMatch` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------- | ------- | --------------------- | ------- | ------------------------------------------ | -------------- | +| `value` | | `string \| undefined` | | The string that did not yield any matches. | | + +### Attributes + +| Name | Field | Inherited From | +| ------- | ----- | -------------- | +| `value` | value | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ----------------------------------------------------------------------------------------- | ------- | +| `js` | `NoMatch` | NoMatch | /Users/diana.broeders/Projects/design-system/packages/components/combobox/src/no-match.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/combobox/src/selected-group.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ---------------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/combobox/src/selected-group.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/combobox/src/selected-group.ts`: + +## class: `SelectedGroup` + +### Superclass + +| Name | Module | Package | +| ------------- | ------ | ------------------------- | +| `OptionGroup` | | @sl-design-system/listbox | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| --------------- | ------- | --------------------------- | ------- | ------------------------------------------ | -------------- | +| `currentOption` | | `ComboboxItem \| undefined` | | The current option. | | +| `hasGroups` | | `boolean \| undefined` | | Indicates whether the options are grouped. | | +| `label` | | `string \| undefined` | | The optional label for the group. | OptionGroup | +| `options` | | `ComboboxItem[]` | `[]` | The selected options to be displayed. | | + +### Attributes + +| Name | Field | Inherited From | +| ------------ | --------- | -------------- | +| `has-groups` | hasGroups | | +| `label` | label | OptionGroup | + +### Slots + +| Name | Description | +| --------- | ------------------- | +| `default` | The option's label. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------------- | ------------- | ----------------------------------------------------------------------------------------------- | ------- | +| `js` | `SelectedGroup` | SelectedGroup | /Users/diana.broeders/Projects/design-system/packages/components/combobox/src/selected-group.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/data-source/src/array-list-data-source.ts`: + +## class: `ArrayListDataSource` + +### Superclass + +| Name | Module | Package | +| ---------------- | ----------------------------------------------------------------------------------------------------- | ------- | +| `ListDataSource` | //Users/diana.broeders/Projects/design-system/packages/components/data-source/src/list-data-source.js | | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------ | ------- | --------------------------------------- | ------- | ------------------------------------------- | -------------- | +| `filters` | | `Map>` | | | DataSource | +| `groupBy` | | `ListDataSourceGroupBy \| undefined` | | | ListDataSource | +| `items` | | `ViewModel[]` | | The filtered & sorted array of view models. | DataSource | +| `page` | | `number` | | | ListDataSource | +| `pageSize` | | `number` | | | ListDataSource | +| `pagination` | | `boolean` | | | ListDataSource | +| `size` | | `number` | | Total number of items in this data source. | DataSource | +| `sort` | | `DataSourceSort \| undefined` | | | DataSource | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| --------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------ | -------------- | +| `addFilter` | | | `id: string, pathOrFilter: T, value: string \| string[]` | `void` | DataSource | +| `removeFilter` | | | `id: string` | `void` | DataSource | +| `removeGroupBy` | | Remove the groupBy attribute. This will cause the data to be sorted as if it was not grouped. | | `void` | ListDataSource | +| `removeSort` | | | | `void` | DataSource | +| `reorder` | | Reorder the item in the data source. | `item: U, relativeItem: U, position: 'before' \| 'after'` | | ListDataSource | +| `setGroupBy` | | Group the items by the given path. Optionally, you can provide a sorter and direction. This is part of the DataSource interface, because it changes how the data is sorted. You may want to pass the groupBy attribute to the server, so it can sort the data for you. | `path: PathKeys, sorter: DataSourceSortFunction, direction: DataSourceSortDirection` | `void` | ListDataSource | +| `setPage` | | | `page: number` | `void` | ListDataSource | +| `setPageSize` | | | `pageSize: number` | `void` | ListDataSource | +| `setSort` | | | `id: string, pathOrSorter: U, direction: DataSourceSortDirection` | `void` | DataSource | + +### Events + +| Name | Type | Description | Inherited From | +| ----------- | ------------- | ----------- | -------------- | +| `sl-update` | `CustomEvent` | | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------- | ------- | +| `js` | `ArrayListDataSource` | ArrayListDataSource | /Users/diana.broeders/Projects/design-system/packages/components/data-source/src/array-list-data-source.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/data-source/src/data-source.ts`: + +## class: `DataSource` + +### Superclass + +| Name | Module | Package | +| ------------- | ----------------------------------------------------------------------------------------------- | ------- | +| `EventTarget` | /Users/diana.broeders/Projects/design-system/packages/components/data-source/src/data-source.ts | | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| --------- | ------- | -------------------------------------- | ------- | ------------------------------------------- | -------------- | +| `filters` | | `Map>` | | | | +| `items` | | `ViewModel[]` | | The filtered & sorted array of view models. | | +| `size` | | `number` | | Total number of items in this data source. | | +| `sort` | | `DataSourceSort \| undefined` | | | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| -------------- | ------- | ----------- | ----------------------------------------------------------------- | ------ | -------------- | +| `addFilter` | | | `id: string, pathOrFilter: T, value: string \| string[]` | `void` | | +| `removeFilter` | | | `id: string` | `void` | | +| `removeSort` | | | | `void` | | +| `setSort` | | | `id: string, pathOrSorter: T, direction: DataSourceSortDirection` | `void` | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ----------------------- | --------------------- | ----------------------------------------------------------------------------------------------- | ------- | +| `js` | `DataSourceUpdateEvent` | DataSourceUpdateEvent | /Users/diana.broeders/Projects/design-system/packages/components/data-source/src/data-source.ts | | +| `js` | `DataSource` | DataSource | /Users/diana.broeders/Projects/design-system/packages/components/data-source/src/data-source.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/data-source/src/fetch-list-data-source.ts`: + +## class: `FetchListDataSource` + +### Superclass + +| Name | Module | Package | +| ---------------- | ----------------------------------------------------------------------------------------------------- | ------- | +| `ListDataSource` | //Users/diana.broeders/Projects/design-system/packages/components/data-source/src/list-data-source.js | | + +### Static Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------- | ------- | -------- | ------- | -------------------------------------------------------------- | -------------- | +| `defaultSize` | | `number` | `10` | The default size of the item collection if not explicitly set. | | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------- | ------- | --------------------------------------- | ------- | -------------------------------------------------- | -------------- | +| `fetchPage` | | `FetchListDataSourceCallback` | | The callback for retrieving data. | | +| `filters` | | `Map>` | | | DataSource | +| `groupBy` | | `ListDataSourceGroupBy \| undefined` | | | ListDataSource | +| `items` | | `ViewModel[]` | | The filtered & sorted array of view models. | DataSource | +| `page` | | `number` | | | ListDataSource | +| `pageSize` | | `number` | | | ListDataSource | +| `pagination` | | `boolean` | | | ListDataSource | +| `placeholder` | | `FetchListDataSourcePlaceholder` | | Returns placeholder data for items not yet loaded. | | +| `size` | | `number` | | Total number of items in this data source. | DataSource | +| `sort` | | `DataSourceSort \| undefined` | | | DataSource | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ----------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------ | -------------- | +| `addFilter` | | | `id: string, pathOrFilter: T, value: string \| string[]` | `void` | DataSource | +| `getFetchOptions` | | Override this function if you are extending the `FetchDataSource` class to provide any additional options you may need when `fetchPage` is called. | `page: number, pageSize: number` | `FetchListDataSourceCallbackOptions` | | +| `removeFilter` | | | `id: string` | `void` | DataSource | +| `removeGroupBy` | | Remove the groupBy attribute. This will cause the data to be sorted as if it was not grouped. | | `void` | ListDataSource | +| `removeSort` | | | | `void` | DataSource | +| `reorder` | | Reorder the item in the data source. | `item: U, relativeItem: U, position: 'before' \| 'after'` | | ListDataSource | +| `setGroupBy` | | Group the items by the given path. Optionally, you can provide a sorter and direction. This is part of the DataSource interface, because it changes how the data is sorted. You may want to pass the groupBy attribute to the server, so it can sort the data for you. | `path: PathKeys, sorter: DataSourceSortFunction, direction: DataSourceSortDirection` | `void` | ListDataSource | +| `setPage` | | | `page: number` | `void` | ListDataSource | +| `setPageSize` | | | `pageSize: number` | `void` | ListDataSource | +| `setSort` | | | `id: string, pathOrSorter: U, direction: DataSourceSortDirection` | `void` | DataSource | + +### Events + +| Name | Type | Description | Inherited From | +| ----------- | ------------- | ----------- | -------------- | +| `sl-update` | `CustomEvent` | | | + +
+ +## Variables + +| Name | Description | Type | +| -------------------------------- | ------------------------------------------------------------- | ---- | +| `FetchListDataSourceError` | | | +| `FetchListDataSourcePlaceholder` | Symbol used as a placeholder for items that are being loaded. | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------- | ------- | +| `js` | `FetchListDataSourceEvent` | FetchListDataSourceEvent | /Users/diana.broeders/Projects/design-system/packages/components/data-source/src/fetch-list-data-source.ts | | +| `js` | `FetchListDataSourceError` | FetchListDataSourceError | /Users/diana.broeders/Projects/design-system/packages/components/data-source/src/fetch-list-data-source.ts | | +| `js` | `FetchListDataSourcePlaceholder` | FetchListDataSourcePlaceholder | /Users/diana.broeders/Projects/design-system/packages/components/data-source/src/fetch-list-data-source.ts | | +| `js` | `FetchListDataSource` | FetchListDataSource | /Users/diana.broeders/Projects/design-system/packages/components/data-source/src/fetch-list-data-source.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/data-source/src/list-data-source.ts`: + +## class: `ListDataSource` + +### Superclass + +| Name | Module | Package | +| ------------ | ------------------------------------------------------------------------------------------------ | ------- | +| `DataSource` | //Users/diana.broeders/Projects/design-system/packages/components/data-source/src/data-source.js | | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------ | ------- | --------------------------------------- | ------- | ------------------------------------------- | -------------- | +| `filters` | | `Map>` | | | DataSource | +| `groupBy` | | `ListDataSourceGroupBy \| undefined` | | | | +| `items` | | `ViewModel[]` | | The filtered & sorted array of view models. | DataSource | +| `page` | | `number` | | | | +| `pageSize` | | `number` | | | | +| `pagination` | | `boolean` | | | | +| `size` | | `number` | | Total number of items in this data source. | DataSource | +| `sort` | | `DataSourceSort \| undefined` | | | DataSource | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| --------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------ | -------------- | +| `addFilter` | | | `id: string, pathOrFilter: T, value: string \| string[]` | `void` | DataSource | +| `removeFilter` | | | `id: string` | `void` | DataSource | +| `removeGroupBy` | | Remove the groupBy attribute. This will cause the data to be sorted as if it was not grouped. | | `void` | | +| `removeSort` | | | | `void` | DataSource | +| `reorder` | | Reorder the item in the data source. | `item: U, relativeItem: U, position: 'before' \| 'after'` | | | +| `setGroupBy` | | Group the items by the given path. Optionally, you can provide a sorter and direction. This is part of the DataSource interface, because it changes how the data is sorted. You may want to pass the groupBy attribute to the server, so it can sort the data for you. | `path: PathKeys, sorter: DataSourceSortFunction, direction: DataSourceSortDirection` | `void` | | +| `setPage` | | | `page: number` | `void` | | +| `setPageSize` | | | `pageSize: number` | `void` | | +| `setSort` | | | `id: string, pathOrSorter: U, direction: DataSourceSortDirection` | `void` | DataSource | + +
+ +## Variables + +| Name | Description | Type | +| ------------------------------- | --------------------------------------------- | -------- | +| `DATA_SOURCE_DEFAULT_PAGE_SIZE` | The default page size, if not explicitly set. | `number` | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------------------------- | ----------------------------- | ---------------------------------------------------------------------------------------------------- | ------- | +| `js` | `DATA_SOURCE_DEFAULT_PAGE_SIZE` | DATA_SOURCE_DEFAULT_PAGE_SIZE | /Users/diana.broeders/Projects/design-system/packages/components/data-source/src/list-data-source.ts | | +| `js` | `ListDataSource` | ListDataSource | /Users/diana.broeders/Projects/design-system/packages/components/data-source/src/list-data-source.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/dialog/src/dialog.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------ | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/dialog/src/dialog.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/dialog/src/dialog.ts`: + +## class: `Dialog`, `sl-dialog` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| --------------- | ------- | --------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- | -------------- | +| `closeButton` | | `boolean \| undefined` | | Determines whether a close button should be shown in the top right corner. | | +| `dialogRole` | | `'dialog' \| 'alertdialog'` | `'dialog'` | The role for the dialog element. | | +| `disableCancel` | | `boolean \| undefined` | | Disables the ability to cancel the dialog by pressing the Escape key or clicking on the backdrop. | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| --------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------- | ---------------------------------- | -------------- | +| `close` | | Close the dialog. | | `void` | | +| `renderActions` | | Override this method to customize the actions in the footer of the dialog. Only use this when extending the `Dialog` class. If you are using the `` custom element, use the slots. | | `TemplateResult \| typeof nothing` | | +| `renderBody` | | Override this method to customize the body of the dialog. Only use this when extending the `Dialog` class. If you are using the `` custom element, use the slots. | | `TemplateResult` | | +| `renderFooter` | | Override this method to customize the footer of the dialog. If you only want to add action buttons, see the `renderActions` method. Only use this when extending the `Dialog` class. If you are using the `` custom element, use the slots. | | `TemplateResult` | | +| `renderHeader` | | Override this method to customize the header of the dialog. If you only want to customize the title, you can use the `title` and `subtitle` arguments and call `super.renderHeader('My title', 'My subtitle')` to render the default header. Beware when customizing the header: the `` element is labelled by the element with ID `title`. If you override this method, make sure to include an element with ID `title` in the header. Only use this when extending the `Dialog` class. If you are using the `` custom element, use the slots. | `title, subtitle` | `TemplateResult` | | +| `showModal` | | Show the dialog as a modal, in the top layer, with a backdrop. | | `void` | | + +### Events + +| Name | Type | Description | Inherited From | +| ----------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -------------- | +| `sl-cancel` | `SlCancelEvent` | Emits when the dialog has been cancelled. This happens when the user closes the dialog using the escape key or clicks on the backdrop. | | +| `sl-close` | `SlCloseEvent` | Emits when the dialog has been closed. | | + +### Attributes + +| Name | Field | Inherited From | +| ---------------- | ------------- | -------------- | +| `close-button` | closeButton | | +| `dialog-role` | dialogRole | | +| `disable-cancel` | disableCancel | | + +### CSS Properties + +| Name | Default | Description | +| ----------------------------- | ------- | ------------------------------- | +| `--sl-dialog-max-inline-size` | | The maximum width of the dialog | + +### CSS Parts + +| Name | Description | +| ------------ | --------------------------------------- | +| `dialog` | The dialog element | +| `header` | The dialog header | +| `titles` | The container of the title and subtitle | +| `header-bar` | The button bar in the header | +| `body` | The body of the dialog | +| `footer` | The dialog footer | +| `footer-bar` | The button bar in the footer | + +### Slots + +| Name | Description | +| ---------------- | ---------------------------------------------- | +| `actions` | Area where action buttons are placed | +| `default` | Body content for the dialog | +| `footer` | Footer content for the dialog | +| `header` | Header content for the dialog | +| `header-buttons` | More space for buttons for the dialog's header | +| `title` | The title of the dialog | +| `subtitle` | The subtitle of the dialog | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------------- | ------------- | ------------------------------------------------------------------------------------- | ------- | +| `js` | `SlCancelEvent` | SlCancelEvent | /Users/diana.broeders/Projects/design-system/packages/components/dialog/src/dialog.ts | | +| `js` | `SlCloseEvent` | SlCloseEvent | /Users/diana.broeders/Projects/design-system/packages/components/dialog/src/dialog.ts | | +| `js` | `Dialog` | Dialog | /Users/diana.broeders/Projects/design-system/packages/components/dialog/src/dialog.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/drawer/src/drawer.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------ | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/drawer/src/drawer.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/drawer/src/drawer.ts`: + +## class: `Drawer`, `sl-drawer` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ----------------- | ------- | -------------------------------- | --------- | -------------------------------------------------------------- | -------------- | +| `attachment` | | `DrawerAttachment` | `'right'` | The side of the screen where the drawer is attached | | +| `closeButtonSize` | | `ButtonSize` | `'sm'` | The size of the button | | +| `dialog` | | `HTMLDialogElement \| undefined` | | | | +| `disableClose` | | `boolean` | `false` | Disables the ability to close the dialog using the Escape key. | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ----------- | ------- | ----------- | ---------- | ------ | -------------- | +| `close` | | | | `void` | | +| `showModal` | | | | `void` | | + +### Attributes + +| Name | Field | Inherited From | +| ------------------- | --------------- | -------------- | +| `disable-close` | disableClose | | +| `attachment` | attachment | | +| `close-button-size` | closeButtonSize | | + +### CSS Properties + +| Name | Default | Description | +| ----------------------------- | ------- | ------------------------------------- | +| `--sl-drawer-max-inline-size` | | The maximum inline size of the drawer | + +### Slots + +| Name | Description | +| --------- | ----------------------------- | +| `default` | Body content for the drawer | +| `header` | Header content for the drawer | +| `title` | The title of the drawer | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------- | ----------- | ------------------------------------------------------------------------------------- | ------- | +| `js` | `Drawer` | Drawer | /Users/diana.broeders/Projects/design-system/packages/components/drawer/src/drawer.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/editor/src/commands.ts`: + +## Functions + +| Name | Description | Parameters | Return | +| --------- | ----------- | ----------------- | --------- | +| `setHTML` | | `content: string` | `Command` | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | --------------------------------------------------------------------------------------- | ------- | +| `js` | `setHTML` | setHTML | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/commands.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/editor/src/editor.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------ | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/editor.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/editor/src/editor.ts`: + +## class: `Editor`, `sl-editor` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| ------------------ | ------ | ---------------------- | +| `FormControlMixin` | | @sl-design-system/form | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------------- | ------- | -------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | +| `customValidity` | | `string \| undefined` | | The error message to display when the control is invalid. | FormControlMixin | +| `dirty` | | `boolean` | `false` | A control is dirty if the user has changed the value in the UI. | FormControlMixin | +| `form` | | `HTMLFormElement \| null` | | The form associated with the control. | FormControlMixin | +| `formValue` | | `unknown` | | The value used when submitting the form. | FormControlMixin | +| `labels` | | `` `NodeListOf` \| null `` | | The labels associated with the control. | FormControlMixin | +| `name` | | `string \| undefined` | | The name of the form control. | FormControlMixin | +| `nativeFormValue` | | `FormValue` | | Returns the form value as used in a native ``. This is always a string, File, FormData or null. | FormControlMixin | +| `plugins` | | `Plugin[] \| undefined` | | Additional plugins. | | +| `showValid` | | `boolean` | `false` | Optional property to indicate the valid state should be shown. | FormControlMixin | +| `showValidity` | | `'valid' \| 'invalid' \| undefined` | | Whether to show the validity state. | FormControlMixin | +| `touched` | | `boolean` | `false` | A control is marked touched once the user has triggered a blur event on it. | FormControlMixin | +| `valid` | | `boolean` | | Returns whether the form control is valid or not. | FormControlMixin | +| `validationMessage` | | `string` | | String representing a localized (by the browser) message that describes the validation constraints that the control does not satisfy (if any). The string is empty if the control is not a candidate for constraint validation, or it satisfies its constraints. For true localization, see `getLocalizedValidationMessage()` instead. | FormControlMixin | +| `validity` | | `ValidityState` | | Returns the validity state the control is in. | FormControlMixin | +| `validityState` | | `'valid' \| 'invalid' \| 'pending'` | | Returns the current validity state. | FormControlMixin | +| `value` | | `unknown \| undefined` | | The value for this form control. | FormControlMixin | +| `view` | | `EditorView \| undefined` | | The ProseMirror editor view instance. | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ---------------------------------- | ---------------- | +| `createEditor` | | | | `EditorView` | | +| `createSchema` | | | | `Schema` | | +| `createState` | | | | `EditorState` | | +| `getLocalizedValidationMessage` | | This returns a localized validation message. It does not support all `ValidityState` properties, since some require more context than we have here. If you need to support more, you can override this method in your own form control. | | `string` | FormControlMixin | +| `reportValidity` | | Returns whether the control is valid. If the control is invalid, calling this will also cause an `invalid` event to be dispatched. After calling this, the control will also report the validity to the user. | | `boolean` | FormControlMixin | +| `setCustomValidity` | | Sets a custom validation message for the form control. If the message is not an empty string, that will make the control invalid. By setting it to an empty string again, you can make the control valid again. | `message: string \| Promise` | `void` | FormControlMixin | + +### Events + +| Name | Type | Description | Inherited From | +| -------------------- | ----------------------- | -------------------------------------------------------------------------------------------- | ---------------- | +| `sl-form-control` | `SlFormControlEvent` | Emits when the form control is added to the DOM. | FormControlMixin | +| `sl-update-state` | `SlUpdateStateEvent` | Emits when the UI state (dirty, pristine, touched or untouched) of the form control changes. | FormControlMixin | +| `sl-update-validity` | `SlUpdateValidityEvent` | Emits when the validity of the form control changes. | FormControlMixin | +| `sl-validate` | `SlValidateEvent` | Emits when the form control can be validated. | FormControlMixin | + +### Attributes + +| Name | Field | Inherited From | +| ----------------- | -------------- | ---------------- | +| `value` | value | | +| `custom-validity` | customValidity | FormControlMixin | +| `name` | name | FormControlMixin | +| `show-validity` | showValidity | FormControlMixin | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------- | ----------- | ------------------------------------------------------------------------------------- | ------- | +| `js` | `Editor` | Editor | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/editor.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/editor/src/keymap.ts`: + +## Functions + +| Name | Description | Parameters | Return | +| ----------------- | ----------- | ------------------------------------------ | ---------------------------- | +| `buildKeymap` | | `schema: Schema` | `{ [key: string]: Command }` | +| `buildListKeymap` | | `schema: Schema` | `{ [key: string]: Command }` | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ----------------- | --------------- | ------------------------------------------------------------------------------------- | ------- | +| `js` | `buildKeymap` | buildKeymap | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/keymap.ts | | +| `js` | `buildListKeymap` | buildListKeymap | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/keymap.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/editor/src/list-utils.ts`: + +## Functions + +| Name | Description | Parameters | Return | +| ------------------------- | ----------- | ----------------------------------------------------------------------------------------- | --------------------- | +| `findAncestorPosition` | | `doc: Node, pos: ResolvedPos` | `ResolvedPos` | +| `getAncestorNodesBetween` | | `doc: Node, $from: ResolvedPos, $to: ResolvedPos` | `Node[]` | +| `getListLiftTarget` | | `schema: Schema, resPos: ResolvedPos` | `number` | +| `isRangeOfType` | | `doc: Node, $from: ResolvedPos, $to: ResolvedPos, nodeType: NodeType` | `boolean` | +| `liftFollowingList` | | `state: EditorState, from: number, to: number, rootListDepthNum: number, tr: Transaction` | `Transaction` | +| `liftListItems` | | | `Command` | +| `liftSelectionList` | | `state: EditorState, tr: Transaction` | `Transaction` | +| `rootListDepth` | | `pos: ResolvedPos, nodes: { [key: string]: NodeType }` | `number \| undefined` | +| `splitListItemKeepMarks` | | `itemType: NodeType` | | +| `toggleList` | | `state: EditorState, dispatch: DispatchFn, view: EditorView, listType: string` | `boolean` | +| `toggleListCommand` | | `listType: string` | `Command` | +| `toggleOrderedList` | | `state: EditorState, dispatch: DispatchFn, view: EditorView` | `boolean` | +| `toggleUnorderedList` | | `state: EditorState, dispatch: DispatchFn, view: EditorView` | `boolean` | +| `wrapInList` | | `nodeType: NodeType` | `Command` | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------------------- | ----------------------- | ----------------------------------------------------------------------------------------- | ------- | +| `js` | `rootListDepth` | rootListDepth | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/list-utils.ts | | +| `js` | `getListLiftTarget` | getListLiftTarget | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/list-utils.ts | | +| `js` | `liftSelectionList` | liftSelectionList | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/list-utils.ts | | +| `js` | `toggleList` | toggleList | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/list-utils.ts | | +| `js` | `toggleListCommand` | toggleListCommand | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/list-utils.ts | | +| `js` | `liftFollowingList` | liftFollowingList | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/list-utils.ts | | +| `js` | `isRangeOfType` | isRangeOfType | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/list-utils.ts | | +| `js` | `getAncestorNodesBetween` | getAncestorNodesBetween | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/list-utils.ts | | +| `js` | `findAncestorPosition` | findAncestorPosition | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/list-utils.ts | | +| `js` | `liftListItems` | liftListItems | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/list-utils.ts | | +| `js` | `wrapInList` | wrapInList | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/list-utils.ts | | +| `js` | `toggleUnorderedList` | toggleUnorderedList | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/list-utils.ts | | +| `js` | `toggleOrderedList` | toggleOrderedList | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/list-utils.ts | | +| `js` | `splitListItemKeepMarks` | splitListItemKeepMarks | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/list-utils.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/editor/src/schema.ts`: + +## Variables + +| Name | Description | Type | +| ------- | ----------- | ------------------------------- | +| `marks` | | `Record` | +| `nodes` | | `Record` | + +
+ +## Functions + +| Name | Description | Parameters | Return | +| -------------------- | ----------- | ------------------------------------------------------------------- | ------------------------ | +| `commonAttributes` | | | `Attrs` | +| `isEmpty` | | `obj: Record` | `boolean` | +| `removeEmptyEntries` | | `obj: Record` | `Record` | +| `removeEntries` | | `obj: Record, predicate: (key: string) => boolean` | `Record` | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------------------- | ------------------ | ------------------------------------------------------------------------------------- | ------- | +| `js` | `isEmpty` | isEmpty | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/schema.ts | | +| `js` | `removeEntries` | removeEntries | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/schema.ts | | +| `js` | `removeEmptyEntries` | removeEmptyEntries | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/schema.ts | | +| `js` | `commonAttributes` | commonAttributes | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/schema.ts | | +| `js` | `marks` | marks | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/schema.ts | | +| `js` | `nodes` | nodes | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/schema.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/editor/src/utils.ts`: + +## Functions + +| Name | Description | Parameters | Return | +| ------------------- | ----------- | ----------------------- | -------- | +| `createContentNode` | | `schema: Schema, value` | `Node` | +| `getHTML` | | `state: EditorState` | `string` | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------------- | ----------------- | ------------------------------------------------------------------------------------ | ------- | +| `js` | `createContentNode` | createContentNode | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/utils.ts | | +| `js` | `getHTML` | getHTML | /Users/diana.broeders/Projects/design-system/packages/components/editor/src/utils.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/ellipsize-text/src/ellipsize-text.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ---------------------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/ellipsize-text/src/ellipsize-text.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/ellipsize-text/src/ellipsize-text.ts`: + +## class: `EllipsizeText`, `sl-ellipsize-text` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------------- | ------------- | ----------------------------------------------------------------------------------------------------- | ------- | +| `js` | `EllipsizeText` | EllipsizeText | /Users/diana.broeders/Projects/design-system/packages/components/ellipsize-text/src/ellipsize-text.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/emoji/src/emoji-browser.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------------ | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/emoji/src/emoji-browser.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/emoji/src/emoji-browser.ts`: + +## class: `EmojiBrowser`, `sl-emoji-browser` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------------------- | ------- | --------------------- | ------- | ------------------------------------------------------------- | -------------- | +| `baseUrl` | | `string` | `''` | The base URL where the emoji data can be found. | | +| `frequentlyUsed` | | `string \| undefined` | | Frequently used emojis, separated by spaces. | | +| `frequentlyUsedEmojis` | | `Emoji[]` | `[]` | | | +| `locale` | | `string \| undefined` | | The locale for this component. TODO: Use the LocaleMixin. | | +| `query` | | `string \| undefined` | | The query string to filter emojis. | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| -------------- | ------- | ----------- | ----------------- | ---------------------------------- | -------------- | +| `renderEmojis` | | | `emojis: Emoji[]` | `TemplateResult \| typeof nothing` | | + +### Events + +| Name | Type | Description | Inherited From | +| ----------- | ---------------------- | ------------------------------------- | -------------- | +| `sl-select` | `SlSelectEvent` | Emits when the user selects an emoji. | | + +### Attributes + +| Name | Field | Inherited From | +| ----------------- | -------------- | -------------- | +| `base-url` | baseUrl | | +| `frequently-used` | frequentlyUsed | | +| `locale` | locale | | +| `query` | query | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------------- | ------------ | ------------------------------------------------------------------------------------------- | ------- | +| `js` | `EmojiBrowser` | EmojiBrowser | /Users/diana.broeders/Projects/design-system/packages/components/emoji/src/emoji-browser.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/emoji/src/emoji-service.ts`: + +## class: `EmojiService` + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------ | ------- | ----------- | ---------------------------------------- | ----------------------------------- | -------------- | +| `findEmojis` | | | `locale: SupportedLocale, query: string` | `Promise` | | +| `getEmojiMessages` | | | `locale: SupportedLocale` | `Promise` | | +| `getEmojis` | | | `locale: SupportedLocale` | `Promise` | | +| `getGroupedEmojis` | | | `locale: SupportedLocale` | `Promise>` | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------------- | ------------ | ------------------------------------------------------------------------------------------- | ------- | +| `js` | `EmojiService` | EmojiService | /Users/diana.broeders/Projects/design-system/packages/components/emoji/src/emoji-service.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/form/src/error.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | --------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/form/src/error.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/form/src/error.ts`: + +## class: `Error`, `sl-error` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------ | ------- | ----------- | ------- | ----------------------------------------- | -------------- | +| `size` | | `ErrorSize` | `'md'` | The size at which the error is displayed. | | + +### Attributes + +| Name | Field | Inherited From | +| ------ | ----- | -------------- | +| `size` | size | | + +### Slots + +| Name | Description | +| ------------ | ----------------------------- | +| `error-text` | The error message to display. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------- | ----------- | ---------------------------------------------------------------------------------- | ------- | +| `js` | `Error` | Error | /Users/diana.broeders/Projects/design-system/packages/components/form/src/error.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/form/src/form-control-mixin.ts`: + +## mixin: `FormControlMixin` + +### Parameters + +| Name | Type | Default | Description | +| ------------- | ---- | ------- | ----------- | +| `constructor` | `T` | | | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------------- | ------- | -------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `customValidity` | | `string \| undefined` | | The error message to display when the control is invalid. | | +| `dirty` | | `boolean` | `false` | A control is dirty if the user has changed the value in the UI. | | +| `form` | | `HTMLFormElement \| null` | | The form associated with the control. | | +| `formValue` | | `unknown` | | The value used when submitting the form. | | +| `labels` | | `` `NodeListOf` \| null `` | | The labels associated with the control. | | +| `name` | | `string \| undefined` | | The name of the form control. | | +| `nativeFormValue` | | `FormValue` | | Returns the form value as used in a native ``. This is always a string, File, FormData or null. | | +| `showValid` | | `boolean` | `false` | Optional property to indicate the valid state should be shown. | | +| `showValidity` | | `'valid' \| 'invalid' \| undefined` | | Whether to show the validity state. | | +| `touched` | | `boolean` | `false` | A control is marked touched once the user has triggered a blur event on it. | | +| `valid` | | `boolean` | | Returns whether the form control is valid or not. | | +| `validationMessage` | | `string` | | String representing a localized (by the browser) message that describes the validation constraints that the control does not satisfy (if any). The string is empty if the control is not a candidate for constraint validation, or it satisfies its constraints. For true localization, see `getLocalizedValidationMessage()` instead. | | +| `validity` | | `ValidityState` | | Returns the validity state the control is in. | | +| `validityState` | | `'valid' \| 'invalid' \| 'pending'` | | Returns the current validity state. | | +| `value` | | `unknown \| undefined` | | The value for this form control. | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------- | -------------- | +| `getLocalizedValidationMessage` | | This returns a localized validation message. It does not support all `ValidityState` properties, since some require more context than we have here. If you need to support more, you can override this method in your own form control. | | `string` | | +| `reportValidity` | | Returns whether the control is valid. If the control is invalid, calling this will also cause an `invalid` event to be dispatched. After calling this, the control will also report the validity to the user. | | `boolean` | | +| `setCustomValidity` | | Sets a custom validation message for the form control. If the message is not an empty string, that will make the control invalid. By setting it to an empty string again, you can make the control valid again. | `message: string \| Promise` | `void` | | + +### Events + +| Name | Type | Description | Inherited From | +| -------------------- | ----------------------- | -------------------------------------------------------------------------------------------- | -------------- | +| `sl-form-control` | `SlFormControlEvent` | Emits when the form control is added to the DOM. | | +| `sl-update-state` | `SlUpdateStateEvent` | Emits when the UI state (dirty, pristine, touched or untouched) of the form control changes. | | +| `sl-update-validity` | `SlUpdateValidityEvent` | Emits when the validity of the form control changes. | | +| `sl-validate` | `SlValidateEvent` | Emits when the form control can be validated. | | + +### Attributes + +| Name | Field | Inherited From | +| ----------------- | -------------- | -------------- | +| `custom-validity` | customValidity | | +| `name` | name | | +| `show-validity` | showValidity | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ----------------------- | --------------------- | ----------------------------------------------------------------------------------------------- | ------- | +| `js` | `SlFormControlEvent` | SlFormControlEvent | /Users/diana.broeders/Projects/design-system/packages/components/form/src/form-control-mixin.ts | | +| `js` | `SlUpdateStateEvent` | SlUpdateStateEvent | /Users/diana.broeders/Projects/design-system/packages/components/form/src/form-control-mixin.ts | | +| `js` | `SlUpdateValidityEvent` | SlUpdateValidityEvent | /Users/diana.broeders/Projects/design-system/packages/components/form/src/form-control-mixin.ts | | +| `js` | `SlValidateEvent` | SlValidateEvent | /Users/diana.broeders/Projects/design-system/packages/components/form/src/form-control-mixin.ts | | +| `js` | `FormControlMixin` | FormControlMixin | /Users/diana.broeders/Projects/design-system/packages/components/form/src/form-control-mixin.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/form/src/form-controller.ts`: + +## class: `FormController` + +### Superclass + +| Name | Module | Package | +| ------------- | -------------------------------------------------------------------------------------------- | ------- | +| `EventTarget` | /Users/diana.broeders/Projects/design-system/packages/components/form/src/form-controller.ts | | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| -------------- | ------- | ---- | ------- | ----------- | -------------- | +| `dirty` | | | | | | +| `element` | | | | | | +| `invalid` | | | | | | +| `pristine` | | | | | | +| `showValidity` | | | | | | +| `touched` | | | | | | +| `untouched` | | | | | | +| `valid` | | | | | | +| `value` | | | | | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ---------------- | ------- | ----------- | ---------- | --------- | -------------- | +| `reportValidity` | | | | `boolean` | | +| `reset` | | | | `void` | | + +### Events + +| Name | Type | Description | Inherited From | +| ----------- | ------- | ----------- | -------------- | +| `sl-update` | `Event` | | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---------------- | -------------- | -------------------------------------------------------------------------------------------- | ------- | +| `js` | `FormController` | FormController | /Users/diana.broeders/Projects/design-system/packages/components/form/src/form-controller.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/form/src/form-field.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | -------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/form/src/form-field.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/form/src/form-field.ts`: + +## class: `FormField`, `sl-form-field` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| --------- | ------- | ---------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- | -------------- | +| `control` | | `HTMLElement & FormControl \| undefined` | | The form control element. | | +| `hint` | | `string \| undefined` | | A hint that will be shown when there are no validation messages. You can also slot an `` element. | | +| `label` | | `string \| undefined` | | The text for the label. You can also slot an `` element. | | +| `mark` | | `LabelMark \| undefined` | | How to mark this field depending if it is required or not. | | + +### Events + +| Name | Type | Description | Inherited From | +| --------------- | ------------------ | ---------------------------------------- | -------------- | +| `sl-form-field` | `SlFormFieldEvent` | Emits when the field is added to a form. | | + +### Attributes + +| Name | Field | Inherited From | +| ------- | ----- | -------------- | +| `hint` | hint | | +| `label` | label | | +| `mark` | mark | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------------ | ---------------- | --------------------------------------------------------------------------------------- | ------- | +| `js` | `SlFormFieldEvent` | SlFormFieldEvent | /Users/diana.broeders/Projects/design-system/packages/components/form/src/form-field.ts | | +| `js` | `FormField` | FormField | /Users/diana.broeders/Projects/design-system/packages/components/form/src/form-field.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/form/src/form-validation-errors.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | -------------------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/form/src/form-validation-errors.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/form/src/form-validation-errors.ts`: + +## class: `FormValidationErrors`, `sl-form-validation-errors` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ----------------- | ------- | ------------------------------------ | ------- | ---------------------------------- | -------------- | +| `controller` | | `FormController \| undefined` | | The form controller to listen to. | | +| `invalidControls` | | `Record` | `{}` | The invalid controls in the form. | | +| `validity` | | `'valid' \| 'invalid' \| undefined` | | The validity of the form. | | +| `variant` | | `'danger' \| 'success' \| undefined` | | The variant of the inline message. | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---------------------- | -------------------- | --------------------------------------------------------------------------------------------------- | ------- | +| `js` | `FormValidationErrors` | FormValidationErrors | /Users/diana.broeders/Projects/design-system/packages/components/form/src/form-validation-errors.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/form/src/form.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | -------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/form/src/form.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/form/src/form.ts`: + +## class: `Form`, `sl-form` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| -------------- | ------- | ---------------------------------- | ------- | --------------------------------------------------------------------------------------------- | -------------- | +| `controls` | | `Array` | `[]` | The controls in the form; not necessarily the same amount as the fields. | | +| `dirty` | | `boolean` | | A form is marked dirty when the user has modified a form control. | | +| `disabled` | | `boolean \| undefined` | | Will disable the entire form when true. | | +| `fields` | | `FormField[]` | `[]` | The fields in the form. | | +| `invalid` | | `boolean` | | Whether the form is invalid. | | +| `pristine` | | `boolean` | | A form is marked pristine as long as the user hasn't modified anything in the form. | | +| `resetEvent` | | `EventEmitter` | | | | +| `showValidity` | | `boolean` | | Indicates whether to show validity state. | | +| `touched` | | `boolean` | | A form is marked touched once the user has triggered a blur event on a form control. | | +| `untouched` | | `boolean` | | A form is marked untouched as long as the user hasn't trigger a blur event on a form control. | | +| `valid` | | `boolean` | | Whether the form is valid. | | +| `value` | | `T` | | The aggregated value of all form controls. | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ---------------- | ------- | --------------------------------------------------------------------------------------------- | ---------- | --------- | -------------- | +| `reportValidity` | | Calls `reportValidity()` on all form controls and returns if they are all valid. | | `boolean` | | +| `requestSubmit` | | If the form is valid, it will emit an `sl-submit` event. | | `void` | | +| `reset` | | Puts all the initial values of the form controls back and updates the validity of all fields. | | `void` | | + +### Events + +| Name | Type | Description | Inherited From | +| ----------- | --------------- | --------------------------------------- | -------------- | +| `sl-reset` | `SlResetEvent` | Emits when the form has been reset. | | +| `sl-submit` | `SlSubmitEvent` | Emits when the form is to be submitted. | | + +### Attributes + +| Name | Field | Inherited From | +| ---------- | -------- | -------------- | +| `disabled` | disabled | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------------- | ------------- | --------------------------------------------------------------------------------- | ------- | +| `js` | `SlResetEvent` | SlResetEvent | /Users/diana.broeders/Projects/design-system/packages/components/form/src/form.ts | | +| `js` | `SlSubmitEvent` | SlSubmitEvent | /Users/diana.broeders/Projects/design-system/packages/components/form/src/form.ts | | +| `js` | `Form` | Form | /Users/diana.broeders/Projects/design-system/packages/components/form/src/form.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/form/src/hint.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | -------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/form/src/hint.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/form/src/hint.ts`: + +## class: `Hint`, `sl-hint` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------ | ------- | ---------- | ------- | ---------------------------------------- | -------------- | +| `size` | | `HintSize` | `'md'` | The size at which the hint is displayed. | | + +### Attributes + +| Name | Field | Inherited From | +| ------ | ----- | -------------- | +| `size` | size | | + +### Slots + +| Name | Description | +| ----------- | -------------------- | +| `hint-text` | The hint to display. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------ | ----------- | --------------------------------------------------------------------------------- | ------- | +| `js` | `Hint` | Hint | /Users/diana.broeders/Projects/design-system/packages/components/form/src/hint.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/form/src/label.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | --------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/form/src/label.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/form/src/label.ts`: + +## class: `Label`, `sl-label` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------- | ------- | ------------------------ | ------- | --------------------------------------------------------------------------------- | -------------- | +| `disabled` | | `boolean` | `false` | Whether the form control is disabled; when set no interaction is possible. | | +| `for` | | `string \| undefined` | | The DOM id of the form control this is linked to. | | +| `mark` | | `LabelMark \| undefined` | | Indicates whether the label should indicate if the field is optional or required. | | +| `size` | | `LabelSize` | `'md'` | The size of the label. | | + +### Attributes + +| Name | Field | Inherited From | +| ---------- | -------- | -------------- | +| `disabled` | disabled | | +| `for` | for | | +| `mark` | mark | | +| `size` | size | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------- | ----------- | ---------------------------------------------------------------------------------- | ------- | +| `js` | `Label` | Label | /Users/diana.broeders/Projects/design-system/packages/components/form/src/label.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/format-date/src/format-date.ts`: + +## class: `FormatDate`, `sl-format-date` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| ------------- | ------ | ---------------------------------- | +| `LocaleMixin` | | @sl-design-system/shared/mixins.js | + +### Static Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ----------- | ------- | ----------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `dateStyle` | | `Intl.DateTimeFormatOptions['dateStyle']` | `'long'` | The date style format. The `dateStyle` and `timeStyle` can be used with each other, but not with other date-time component options (e.g. weekday, hour, month, etc.). By changing this static property you can change the default value for all future instances of the component with dateStyle usage. Changing the static property won't affect already created instances. | | +| `timeStyle` | | `Intl.DateTimeFormatOptions['timeStyle']` | `'medium'` | The time style format. The `dateStyle` and `timeStyle` can be used with each other, but not with other date-time component options (e.g. weekday, hour, month, etc.). By changing this static property you can change the default value for all future instances of the component with timeStyle usage. Changing the static property won't affect already created instances. | | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ----------------- | ------- | --------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `date` | | `Date \| undefined` | | The date/time to format. If not set, the slotted content will be shown. | | +| `dateStyle` | | `Intl.DateTimeFormatOptions['dateStyle'] \| undefined` | | The date style format. If you want to change the default value for all future instances of the component, you can change the static property. If you want to change the property of an already created instance, you need to change this property. The `dateStyle` and `timeStyle` can be used with each other, but not with other date-time component options (e.g. weekday, hour, month, etc.). If you set other options than dateStyle/timeStyle like `weekday`, `hour` etc. dateStyle/timeStyle will not be used to format your date/time. The dateStyle/timeStyle will be overwritten in that case by your other properties. | | +| `dateTimeOptions` | | `Intl.DateTimeFormatOptions \| undefined` | | Use this property if you need access to advanced formatting options not provided via properties of this component. | | +| `day` | | `Intl.DateTimeFormatOptions['day'] \| undefined` | | The format for displaying the day. Default to `numeric` when all properties are `undefined`, including dateStyle and timeStyle. | | +| `dayPeriod` | | `Intl.DateTimeFormatOptions['dayPeriod'] \| undefined` | | The format for displaying the day periods. It only has an effect if a 12-hour clock - hour12 is set to true | | +| `era` | | `Intl.DateTimeFormatOptions['era'] \| undefined` | | The format for displaying the era (eg. 'long' -> `Anno Domini`). | | +| `hour` | | `Intl.DateTimeFormatOptions['hour'] \| undefined` | | The format for displaying the hour. | | +| `hour12` | | `Intl.DateTimeFormatOptions['hour12'] \| undefined` | | Whether to use 12-hour time or not (when `false` is set 24-hour time is used). The default is locale dependent. | | +| `locale` | | `string` | | The component's locale. | LocaleMixin | +| `minute` | | `Intl.DateTimeFormatOptions['minute'] \| undefined` | | The format for displaying the minute. | | +| `month` | | `Intl.DateTimeFormatOptions['month'] \| undefined` | | The format for displaying the month. Default to `numeric` when all properties are `undefined`, including dateStyle and timeStyle. | | +| `second` | | `Intl.DateTimeFormatOptions['second'] \| undefined` | | The format for displaying the second. | | +| `timeStyle` | | `Intl.DateTimeFormatOptions['timeStyle'] \| undefined` | | The time style format. If you want to change the default value for all future instances of the component, you can change the static property. If you want to change the property of an already created instance, you need to change this property. The `dateStyle` and `timeStyle` can be used with each other, but not with other date-time component options (e.g. weekday, hour, month, etc.). If you set other options than dateStyle/timeStyle like `weekday`, `hour` etc. dateStyle/timeStyle will not be used to format your date/time. The dateStyle/timeStyle will be overwritten in that case by your other properties. | | +| `timeZone` | | `Intl.DateTimeFormatOptions['timeZone'] \| undefined` | | The time zone to express the time in. The default is the runtime's default time zone. | | +| `timeZoneName` | | `Intl.DateTimeFormatOptions['timeZoneName'] \| undefined` | | The format for displaying the time. | | +| `weekday` | | `Intl.DateTimeFormatOptions['weekday'] \| undefined` | | The format for displaying the weekday. | | +| `year` | | `Intl.DateTimeFormatOptions['year'] \| undefined` | | The format for displaying the year. Default to `numeric` when all properties are `undefined`, including dateStyle and timeStyle. | | + +### Attributes + +| Name | Field | Inherited From | +| ------------------- | --------------- | -------------- | +| `date-style` | dateStyle | | +| `time-style` | timeStyle | | +| `weekday` | weekday | | +| `era` | era | | +| `year` | year | | +| `month` | month | | +| `day` | day | | +| `day-period` | dayPeriod | | +| `hour` | hour | | +| `minute` | minute | | +| `second` | second | | +| `time-zone-name` | timeZoneName | | +| `time-zone` | timeZone | | +| `hour12` | hour12 | | +| `date-time-options` | dateTimeOptions | | +| `date` | date | | +| `locale` | locale | LocaleMixin | + +### Slots + +| Name | Description | +| --------- | ------------------------------------------------------------------ | +| `default` | A place for the fallback when there is no valid date/time applied. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------ | ----------- | ----------------------------------------------------------------------------------------------- | ------- | +| `js` | `FormatDate` | FormatDate | /Users/diana.broeders/Projects/design-system/packages/components/format-date/src/format-date.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/format-date/src/format.ts`: + +## Functions + +| Name | Description | Parameters | Return | +| -------- | ----------- | ----------------------------------------------------------------- | -------- | +| `format` | | `date: Date, locale: string, options: Intl.DateTimeFormatOptions` | `string` | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------- | ----------- | ------------------------------------------------------------------------------------------ | ------- | +| `js` | `format` | format | /Users/diana.broeders/Projects/design-system/packages/components/format-date/src/format.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/format-number/src/format-number.ts`: + +## class: `FormatNumber`, `sl-format-number` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| ------------- | ------ | ---------------------------------- | +| `LocaleMixin` | | @sl-design-system/shared/mixins.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| -------------------------- | ------- | ------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- | +| `currency` | | `string \| undefined` | | The currency to use in currency formatting. | | +| `currencyDisplay` | | `'code' \| 'symbol' \| 'narrowSymbol' \| 'name' \| undefined` | | How to display the currency. | | +| `formatOptions` | | `Intl.NumberFormatOptions \| undefined` | | Use this if you need access to advanced formatting options not provided via properties. | | +| `locale` | | `string` | | The component's locale. | LocaleMixin | +| `maximumFractionDigits` | | `number \| undefined` | | The maximum number of fraction digits to use. Possible values are from 0 to 100; the default for plain number formatting is the larger of minimumFractionDigits and 3; the default for currency formatting is the larger of minimumFractionDigits and the number of minor unit digits provided by the ISO 4217 currency code list (2 if the list doesn't provide that information); the default for percent formatting is the larger of minimumFractionDigits and 0. | | +| `maximumSignificantDigits` | | `number \| undefined` | | The maximum number of significant digits to use. Possible values are from 1 to 21; the default is 21. | | +| `minimumFractionDigits` | | `number \| undefined` | | The minimum number of fraction digits to use. Possible values are from 0 to 100; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the ISO 4217 currency code list (2 if the list doesn't provide that information). | | +| `minimumIntegerDigits` | | `number \| undefined` | | The minimum number of integer digits to use. A value with a smaller number of integer digits than this number will be left-padded with zeros (to the specified length) when formatted. Possible values are from 1 to 21; the default is 1. | | +| `minimumSignificantDigits` | | `number \| undefined` | | The minimum number of significant digits to use. Possible values are from 1 to 21; the default is 1. | | +| `notation` | | `Intl.NumberFormatOptions['notation'] \| undefined` | | The formatting that should be displayed for the number. | | +| `number` | | `number \| undefined` | | The number to format. | | +| `numberStyle` | | `'decimal' \| 'currency' \| 'percent' \| 'unit' \| undefined` | | The style used for formatting. If unspecified, defaults to 'decimal'. | | +| `signDisplay` | | `Intl.NumberFormatOptions['signDisplay'] \| undefined` | | When to display the sign for the number. | | +| `unit` | | `string \| undefined` | | The unit to use in unit formatting. | | +| `unitDisplay` | | `Intl.NumberFormatOptions['unitDisplay'] \| undefined` | | How to display the unit. | | +| `useGrouping` | | `boolean \| undefined` | | Whether to use grouping separators, such as thousands separators. If you need more control than just true/false, use `formatOptions`. | | + +### Attributes + +| Name | Field | Inherited From | +| ---------------------------- | ------------------------ | -------------- | +| `currency` | currency | | +| `currency-display` | currencyDisplay | | +| `format-options` | formatOptions | | +| `minimum-integer-digits` | minimumIntegerDigits | | +| `minimum-fraction-digits` | minimumFractionDigits | | +| `maximum-fraction-digits` | maximumFractionDigits | | +| `minimum-significant-digits` | minimumSignificantDigits | | +| `maximum-significant-digits` | maximumSignificantDigits | | +| `notation` | notation | | +| `number` | number | | +| `number-style` | numberStyle | | +| `sign-display` | signDisplay | | +| `unit` | unit | | +| `unit-display` | unitDisplay | | +| `use-grouping` | useGrouping | | +| `locale` | locale | LocaleMixin | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------------- | ------------ | --------------------------------------------------------------------------------------------------- | ------- | +| `js` | `FormatNumber` | FormatNumber | /Users/diana.broeders/Projects/design-system/packages/components/format-number/src/format-number.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/format-number/src/format.ts`: + +## Functions + +| Name | Description | Parameters | Return | +| -------- | ----------- | -------------------------------------------------------------------------------- | -------- | +| `format` | | `value: number, locale: Intl.LocalesArgument, options: Intl.NumberFormatOptions` | `string` | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------- | ----------- | -------------------------------------------------------------------------------------------- | ------- | +| `js` | `format` | format | /Users/diana.broeders/Projects/design-system/packages/components/format-number/src/format.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/grid/src/column-group.ts`: + +## class: `GridColumnGroup`, `sl-grid-column-group` + +### Superclass + +| Name | Module | Package | +| ------------ | ------------------------------------------------------------------------------------ | ------- | +| `GridColumn` | //Users/diana.broeders/Projects/design-system/packages/components/grid/src/column.js | | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------------- | ------- | ------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `align` | | `GridColumnAlignment \| undefined` | | The alignment of the content within the column. | GridColumn | +| `autoWidth` | | `boolean \| undefined` | | Automatically sets the width of the column based on the column contents when this is set to `true`. For performance reasons the column width is calculated automatically only once when the grid items are rendered for the first time and the calculation only considers the rows which are currently rendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell content changes, the column width might not match the contents anymore. Hidden columns are ignored in the calculation and their widths are not automatically updated when you show a column that was initially hidden. You can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`. The column width may still grow larger when `grow` is not 0. | GridColumn | +| `columns` | | `Array>` | `[]` | The nested columns in the group. | | +| `ellipsizeText` | | `boolean \| undefined` | | This will ellipsize the text in the `` elements when it overflows. | GridColumn | +| `grid` | | `Grid \| undefined` | | The parent grid instance. | GridColumn | +| `grow` | | `number` | `1` | The ratio with which the column will grow relative to the other columns. A ratio of 0 means the column width is fixed. | GridColumn | +| `header` | | `string \| GridColumnHeaderRenderer \| undefined` | | The label for the column header. Can contain custom HTML. | GridColumn | +| `parts` | | `string \| GridColumnParts \| undefined` | | Custom parts to be set on the `` so it can be styled externally. | GridColumn | +| `path` | | `PathKeys \| undefined` | | The path to the value for this column. | GridColumn | +| `renderer` | | `GridColumnDataRenderer \| undefined` | | Renderer function for the column value of each cell. | GridColumn | +| `scopedElements` | | `Record \| undefined` | | The custom elements used for rendering this column. Since the rendering the column cells is done in the parent grid component, the custom elements need to be registered in the parent grid. | GridColumn | +| `sticky` | | `boolean \| undefined` | | Whether this column is sticky when the user scrolls horizontally. | GridColumn | +| `stickyOrder` | | `'first' \| 'last' \| undefined` | | Whether this column is the first or last sticky column. | GridColumn | +| `stickyPosition` | | `'start' \| 'end' \| undefined` | | The position where the column should be sticky: at the start of the grid, or at the end. | GridColumn | +| `width` | | `number \| undefined` | | The width of the group column is either manually specified, or the sum of the nested columns. | GridColumn | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------- | -------------- | +| `getClasses` | | | `_item: T` | `string[]` | GridColumn | +| `getParts` | | | `item: T` | `string[]` | GridColumn | +| `itemsChanged` | | This method is called when the contents of the grid has changed. This happens when the items property is directly set or when the data source has changed. | | `void` | GridColumn | +| `renderData` | | | `item: T` | `TemplateResult` | GridColumn | +| `renderHeader` | | | | `TemplateResult` | GridColumn | +| `renderStyles` | | | | `CSSResult \| void` | GridColumn | +| `stateChanged` | | This method is called when the state of the grid has changed. This happens for examples when a filter or sorting changes. | | `void` | GridColumn | + +### Events + +| Name | Type | Description | Inherited From | +| ------------------ | ------------------------ | --------------------------------------------- | -------------- | +| `sl-column-update` | `SlColumnUpdateEvent` | Emits when the column definition has changed. | GridColumn | + +### Attributes + +| Name | Field | Inherited From | +| ---------------- | ------------- | -------------- | +| `align` | align | GridColumn | +| `auto-width` | autoWidth | GridColumn | +| `ellipsize-text` | ellipsizeText | GridColumn | +| `grow` | grow | GridColumn | +| `header` | header | GridColumn | +| `path` | path | GridColumn | +| `parts` | parts | GridColumn | +| `sticky` | sticky | GridColumn | +| `width` | width | GridColumn | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ----------------- | --------------- | ----------------------------------------------------------------------------------------- | ------- | +| `js` | `GridColumnGroup` | GridColumnGroup | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/column-group.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/grid/src/column.ts`: + +## class: `GridColumn`, `sl-grid-column` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------------- | ------- | ------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `align` | | `GridColumnAlignment \| undefined` | | The alignment of the content within the column. | | +| `autoWidth` | | `boolean \| undefined` | | Automatically sets the width of the column based on the column contents when this is set to `true`. For performance reasons the column width is calculated automatically only once when the grid items are rendered for the first time and the calculation only considers the rows which are currently rendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell content changes, the column width might not match the contents anymore. Hidden columns are ignored in the calculation and their widths are not automatically updated when you show a column that was initially hidden. You can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`. The column width may still grow larger when `grow` is not 0. | | +| `ellipsizeText` | | `boolean \| undefined` | | This will ellipsize the text in the `` elements when it overflows. | | +| `grid` | | `Grid \| undefined` | | The parent grid instance. | | +| `grow` | | `number` | `1` | The ratio with which the column will grow relative to the other columns. A ratio of 0 means the column width is fixed. | | +| `header` | | `string \| GridColumnHeaderRenderer \| undefined` | | The label for the column header. Can contain custom HTML. | | +| `parts` | | `string \| GridColumnParts \| undefined` | | Custom parts to be set on the `` so it can be styled externally. | | +| `path` | | `PathKeys \| undefined` | | The path to the value for this column. | | +| `renderer` | | `GridColumnDataRenderer \| undefined` | | Renderer function for the column value of each cell. | | +| `scopedElements` | | `Record \| undefined` | | The custom elements used for rendering this column. Since the rendering the column cells is done in the parent grid component, the custom elements need to be registered in the parent grid. | | +| `sticky` | | `boolean \| undefined` | | Whether this column is sticky when the user scrolls horizontally. | | +| `stickyOrder` | | `'first' \| 'last' \| undefined` | | Whether this column is the first or last sticky column. | | +| `stickyPosition` | | `'start' \| 'end' \| undefined` | | The position where the column should be sticky: at the start of the grid, or at the end. | | +| `width` | | `number \| undefined` | | Width of the cells for this column in pixels. | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------- | -------------- | +| `getClasses` | | | `_item: T` | `string[]` | | +| `getParts` | | | `item: T` | `string[]` | | +| `itemsChanged` | | This method is called when the contents of the grid has changed. This happens when the items property is directly set or when the data source has changed. | | `void` | | +| `renderData` | | | `item: T` | `TemplateResult` | | +| `renderHeader` | | | | `TemplateResult` | | +| `renderStyles` | | | | `CSSResult \| void` | | +| `stateChanged` | | This method is called when the state of the grid has changed. This happens for examples when a filter or sorting changes. | | `void` | | + +### Events + +| Name | Type | Description | Inherited From | +| ------------------ | ------------------------ | --------------------------------------------- | -------------- | +| `sl-column-update` | `SlColumnUpdateEvent` | Emits when the column definition has changed. | | + +### Attributes + +| Name | Field | Inherited From | +| ---------------- | ------------- | -------------- | +| `align` | align | | +| `auto-width` | autoWidth | | +| `ellipsize-text` | ellipsizeText | | +| `grow` | grow | | +| `header` | header | | +| `path` | path | | +| `parts` | parts | | +| `sticky` | sticky | | +| `width` | width | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------------------- | ------------------- | ----------------------------------------------------------------------------------- | ------- | +| `js` | `SlColumnUpdateEvent` | SlColumnUpdateEvent | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/column.ts | | +| `js` | `GridColumn` | GridColumn | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/column.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/grid/src/drag-handle-column.ts`: + +## class: `GridDragHandleColumn`, `sl-grid-drag-handle-column` + +### Superclass + +| Name | Module | Package | +| ------------ | ------------------------------------------------------------------------------------ | ------- | +| `GridColumn` | //Users/diana.broeders/Projects/design-system/packages/components/grid/src/column.js | | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------------- | ------- | ------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `align` | | `GridColumnAlignment \| undefined` | | The alignment of the content within the column. | GridColumn | +| `autoWidth` | | `boolean \| undefined` | | Automatically sets the width of the column based on the column contents when this is set to `true`. For performance reasons the column width is calculated automatically only once when the grid items are rendered for the first time and the calculation only considers the rows which are currently rendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell content changes, the column width might not match the contents anymore. Hidden columns are ignored in the calculation and their widths are not automatically updated when you show a column that was initially hidden. You can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`. The column width may still grow larger when `grow` is not 0. | GridColumn | +| `ellipsizeText` | | `boolean \| undefined` | | This will ellipsize the text in the `` elements when it overflows. | GridColumn | +| `grid` | | `Grid \| undefined` | | The parent grid instance. | GridColumn | +| `grow` | | `number` | `1` | The ratio with which the column will grow relative to the other columns. A ratio of 0 means the column width is fixed. | GridColumn | +| `header` | | `string \| GridColumnHeaderRenderer \| undefined` | | The label for the column header. Can contain custom HTML. | GridColumn | +| `parts` | | `string \| GridColumnParts \| undefined` | | Custom parts to be set on the `` so it can be styled externally. | GridColumn | +| `path` | | `PathKeys \| undefined` | | The path to the value for this column. | GridColumn | +| `renderer` | | `GridColumnDataRenderer \| undefined` | | Renderer function for the column value of each cell. | GridColumn | +| `scopedElements` | | `Record \| undefined` | | The custom elements used for rendering this column. Since the rendering the column cells is done in the parent grid component, the custom elements need to be registered in the parent grid. | GridColumn | +| `sticky` | | `boolean \| undefined` | | Whether this column is sticky when the user scrolls horizontally. | GridColumn | +| `stickyOrder` | | `'first' \| 'last' \| undefined` | | Whether this column is the first or last sticky column. | GridColumn | +| `stickyPosition` | | `'start' \| 'end' \| undefined` | | The position where the column should be sticky: at the start of the grid, or at the end. | GridColumn | +| `width` | | `number \| undefined` | | Width of the cells for this column in pixels. | GridColumn | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------- | -------------- | +| `getClasses` | | | `_item: T` | `string[]` | GridColumn | +| `getParts` | | | `item: T` | `string[]` | GridColumn | +| `itemsChanged` | | This method is called when the contents of the grid has changed. This happens when the items property is directly set or when the data source has changed. | | `void` | GridColumn | +| `renderData` | | | `item: T` | `TemplateResult` | GridColumn | +| `renderHeader` | | | | `TemplateResult` | GridColumn | +| `renderStyles` | | | | `CSSResult \| void` | GridColumn | +| `stateChanged` | | This method is called when the state of the grid has changed. This happens for examples when a filter or sorting changes. | | `void` | GridColumn | + +### Events + +| Name | Type | Description | Inherited From | +| ------------------ | ------------------------ | --------------------------------------------- | -------------- | +| `sl-column-update` | `SlColumnUpdateEvent` | Emits when the column definition has changed. | GridColumn | + +### Attributes + +| Name | Field | Inherited From | +| ---------------- | ------------- | -------------- | +| `align` | align | GridColumn | +| `auto-width` | autoWidth | GridColumn | +| `ellipsize-text` | ellipsizeText | GridColumn | +| `grow` | grow | GridColumn | +| `header` | header | GridColumn | +| `path` | path | GridColumn | +| `parts` | parts | GridColumn | +| `sticky` | sticky | GridColumn | +| `width` | width | GridColumn | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---------------------- | -------------------- | ----------------------------------------------------------------------------------------------- | ------- | +| `js` | `GridDragHandleColumn` | GridDragHandleColumn | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/drag-handle-column.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/grid/src/filter-column.ts`: + +## class: `GridFilterColumn`, `sl-grid-filter-column` + +### Superclass + +| Name | Module | Package | +| ------------ | ------------------------------------------------------------------------------------ | ------- | +| `GridColumn` | //Users/diana.broeders/Projects/design-system/packages/components/grid/src/column.js | | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ----------------- | ------- | ------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `align` | | `GridColumnAlignment \| undefined` | | The alignment of the content within the column. | GridColumn | +| `autoWidth` | | `boolean \| undefined` | | Automatically sets the width of the column based on the column contents when this is set to `true`. For performance reasons the column width is calculated automatically only once when the grid items are rendered for the first time and the calculation only considers the rows which are currently rendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell content changes, the column width might not match the contents anymore. Hidden columns are ignored in the calculation and their widths are not automatically updated when you show a column that was initially hidden. You can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`. The column width may still grow larger when `grow` is not 0. | GridColumn | +| `ellipsizeText` | | `boolean \| undefined` | | This will ellipsize the text in the `` elements when it overflows. | GridColumn | +| `filter` | | `DataSourceFilterFunction \| undefined` | | The filter function if you want to do custom filtering. | | +| `grid` | | `Grid \| undefined` | | The parent grid instance. | GridColumn | +| `grow` | | `number` | `1` | The ratio with which the column will grow relative to the other columns. A ratio of 0 means the column width is fixed. | GridColumn | +| `header` | | `string \| GridColumnHeaderRenderer \| undefined` | | The label for the column header. Can contain custom HTML. | GridColumn | +| `internalOptions` | | `GridFilterOption[] \| undefined` | | The internal options if none are provided. | | +| `mode` | | `select \| text` | | The mode for the filter: \- `select`: The filter will allow you to select from a list of options. If none are provided, the filter will create a list of options based on the column's values \- `text`: The filter will be a text field. | | +| `options` | | `GridFilterOption[] \| undefined` | | The options you can choose from to filter. If not provided, the filter will be a text field. | | +| `parts` | | `string \| GridColumnParts \| undefined` | | Custom parts to be set on the `` so it can be styled externally. | GridColumn | +| `path` | | `PathKeys \| undefined` | | The path to the value for this column. | GridColumn | +| `renderer` | | `GridColumnDataRenderer \| undefined` | | Renderer function for the column value of each cell. | GridColumn | +| `scopedElements` | | `Record \| undefined` | | The custom elements used for rendering this column. Since the rendering the column cells is done in the parent grid component, the custom elements need to be registered in the parent grid. | GridColumn | +| `sticky` | | `boolean \| undefined` | | Whether this column is sticky when the user scrolls horizontally. | GridColumn | +| `stickyOrder` | | `'first' \| 'last' \| undefined` | | Whether this column is the first or last sticky column. | GridColumn | +| `stickyPosition` | | `'start' \| 'end' \| undefined` | | The position where the column should be sticky: at the start of the grid, or at the end. | GridColumn | +| `value` | | `string \| string[] \| undefined` | | The value for this filter column. | | +| `width` | | `number \| undefined` | | Width of the cells for this column in pixels. | GridColumn | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------- | -------------- | +| `getClasses` | | | `_item: T` | `string[]` | GridColumn | +| `getParts` | | | `item: T` | `string[]` | GridColumn | +| `itemsChanged` | | This method is called when the contents of the grid has changed. This happens when the items property is directly set or when the data source has changed. | | `void` | GridColumn | +| `renderData` | | | `item: T` | `TemplateResult` | GridColumn | +| `renderHeader` | | | | `TemplateResult` | GridColumn | +| `renderStyles` | | | | `CSSResult \| void` | GridColumn | +| `stateChanged` | | This method is called when the state of the grid has changed. This happens for examples when a filter or sorting changes. | | `void` | GridColumn | + +### Events + +| Name | Type | Description | Inherited From | +| ------------------ | ------------------------ | --------------------------------------------- | -------------- | +| `sl-column-update` | `SlColumnUpdateEvent` | Emits when the column definition has changed. | GridColumn | + +### Attributes + +| Name | Field | Inherited From | +| ---------------- | ------------- | -------------- | +| `mode` | mode | | +| `value` | value | | +| `align` | align | GridColumn | +| `auto-width` | autoWidth | GridColumn | +| `ellipsize-text` | ellipsizeText | GridColumn | +| `grow` | grow | GridColumn | +| `header` | header | GridColumn | +| `path` | path | GridColumn | +| `parts` | parts | GridColumn | +| `sticky` | sticky | GridColumn | +| `width` | width | GridColumn | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------------ | ---------------- | ------------------------------------------------------------------------------------------ | ------- | +| `js` | `GridFilterColumn` | GridFilterColumn | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/filter-column.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/grid/src/filter.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ---------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/filter.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/grid/src/filter.ts`: + +## class: `GridFilter` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| --------- | ------- | ------------------------------------------ | ------- | ----------------------------------- | -------------- | +| `column` | | `GridColumn` | | The grid column. | | +| `filter` | | `DataSourceFilterFunction \| undefined` | | The custom filter | | +| `mode` | | `GridFilterMode \| undefined` | | The mode of the filter. | | +| `options` | | `GridFilterOption[] \| undefined` | | The filter options. | | +| `path` | | `PathKeys \| undefined` | | The path to the field to filter on. | | +| `value` | | `string \| string[] \| undefined` | | | | + +### Events + +| Name | Type | Description | Inherited From | +| ------------------------ | ----------------------------- | ------------------------------------------------ | -------------- | +| `sl-filter-change` | `SlFilterChangeEvent` | Emits when the filter has been added or removed. | | +| `sl-filter-value-change` | `SlFilterValueChangeEvent` | Emits when the value of the filter has changed. | | + +### Attributes + +| Name | Field | Inherited From | +| ------ | ----- | -------------- | +| `mode` | mode | | +| `path` | path | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------------------------- | ------------------------ | ----------------------------------------------------------------------------------- | ------- | +| `js` | `SlFilterChangeEvent` | SlFilterChangeEvent | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/filter.ts | | +| `js` | `SlFilterValueChangeEvent` | SlFilterValueChangeEvent | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/filter.ts | | +| `js` | `GridFilter` | GridFilter | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/filter.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/grid/src/grid.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | -------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/grid.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/grid/src/grid.ts`: + +## class: `Grid`, `sl-grid` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| --------------------- | ------- | ------------------------------------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- | +| `activeItem` | | `T \| undefined` | | The active item in the grid. | | +| `clickableRow` | | `boolean \| undefined` | | Whether a row can be set active by clicking anywhere in the row. | | +| `dataSource` | | `ListDataSource \| undefined` | | Provide your own implementation for getting the data. | | +| `draggableRows` | | `GridDraggableRows \| undefined` | | Whether you can drag rows in the grid. If you use the drag-handle column, then this property is automatically set by the column to 'between'. | | +| `dropFilter` | | `GridDropFilter \| undefined` | | Determines if or what kind of drop target the given item is: \- boolean: the item is valid drop target based on the draggableRows value \- 'between': the item is a valid drop target between \- 'on-top': the item is a valid drop target to drop on top of | | +| `ellipsizeText` | | `boolean \| undefined` | | This will ellipsize the text in the `` elements if it overflows. | | +| `groupHeaderRenderer` | | `GridGroupHeaderRenderer \| undefined` | | Custom renderer for group headers. | | +| `itemParts` | | `GridItemParts \| undefined` | | Custom parts to be set on the `` so it can be styled externally. | | +| `items` | | `T[] \| undefined` | | An array of items to be displayed in the grid. | | +| `noBorder` | | `boolean \| undefined` | | Hide the border around the grid when true. | | +| `noRowBorder` | | `boolean \| undefined` | | Hides the border between rows when true. | | +| `scopedElements` | | `Record \| undefined` | | The custom elements used for rendering this grid. This can be used if you want to render custom elements in the group header. Custom elements that you want to render in the columns can be registered via the `scopedElements` property on the column. | | +| `selection` | | | `new SelectionController(this)` | Selection manager. | | +| `striped` | | `boolean \| undefined` | | Uses alternating background colors for the rows when set. | | +| `table` | | `HTMLTableElement` | | The table element. | | +| `tbody` | | `HTMLTableSectionElement` | | The table body element. | | +| `tfoot` | | `HTMLTableSectionElement` | | The table foot element. | | +| `thead` | | `HTMLTableSectionElement` | | The table head element. | | +| `view` | | | `new GridViewModel(this)` | The model used for rendering the grid. | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------------- | ------- | ------------------------------------------------------------------------ | ------------------------------------------ | ---------------- | -------------- | +| `recalculateColumnWidths` | | Updates the `width` of all columns which have `autoWidth` set to `true`. | | `Promise` | | +| `renderGroupRow` | | | `group: GridViewModelGroup, index: number` | `TemplateResult` | | +| `renderHeader` | | | | `TemplateResult` | | +| `renderItem` | | | `item: T, index: number` | `TemplateResult` | | +| `renderItemRow` | | | `item: T, index: number` | `TemplateResult` | | +| `renderStyles` | | | | `TemplateResult` | | + +### Events + +| Name | Type | Description | Inherited From | +| ----------------------- | ---------------------------- | --------------------------------------------- | -------------- | +| `sl-active-item-change` | `SlActiveItemChangeEvent` | Emits when the active item changes | | +| `sl-grid-dragstart` | `SlDragStartEvent` | Emits when a drag operation is starting. | | +| `sl-grid-dragend` | `SlDragEndEvent` | Emits when a drag operation has finished. | | +| `sl-grid-drop` | `SlDropEvent` | Emits when an item has been dropped. | | +| `sl-grid-state-change` | `SlStateChangeEvent` | Emits when the state in the grid has changed. | | + +### Attributes + +| Name | Field | Inherited From | +| ---------------- | ------------- | -------------- | +| `draggable-rows` | draggableRows | | +| `clickable-row` | clickableRow | | +| `ellipsize-text` | ellipsizeText | | +| `items` | items | | +| `no-border` | noBorder | | +| `no-row-border` | noRowBorder | | +| `striped` | striped | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------------------- | ----------------------- | --------------------------------------------------------------------------------- | ------- | +| `js` | `SlActiveItemChangeEvent` | SlActiveItemChangeEvent | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/grid.ts | | +| `js` | `SlDragStartEvent` | SlDragStartEvent | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/grid.ts | | +| `js` | `SlDragEndEvent` | SlDragEndEvent | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/grid.ts | | +| `js` | `SlDropEvent` | SlDropEvent | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/grid.ts | | +| `js` | `SlStateChangeEvent` | SlStateChangeEvent | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/grid.ts | | +| `js` | `Grid` | Grid | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/grid.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/grid/src/group-header.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ---------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/group-header.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/grid/src/group-header.ts`: + +## class: `GridGroupHeader` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------ | ------- | --------------------------- | -------- | ------------------------------------------- | -------------- | +| `expanded` | | `boolean \| undefined` | | Whether the group is expanded or collapsed. | | +| `selectable` | | `boolean \| undefined` | | Wether you can select the entire group. | | +| `selected` | | `'all' \| 'some' \| 'none'` | `'none'` | Whether the group is selected. | | + +### Events + +| Name | Type | Description | Inherited From | +| ----------- | ------------------------ | ------------------------------------------------ | -------------- | +| `sl-select` | `SlSelectEvent` | Emits when the user changes the group selection. | | +| `sl-toggle` | `SlToggleEvent` | Emits when the user collapses/expands the group. | | + +### Attributes + +| Name | Field | Inherited From | +| ------------ | ---------- | -------------- | +| `expanded` | expanded | | +| `selectable` | selectable | | +| `selected` | selected | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ----------------- | --------------- | ----------------------------------------------------------------------------------------- | ------- | +| `js` | `GridGroupHeader` | GridGroupHeader | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/group-header.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/grid/src/select-column.ts`: + +## class: `GridSelectColumn`, `sl-grid-select-column` + +### Superclass + +| Name | Module | Package | +| ------------ | ------------------------------------------------------------------------------------ | ------- | +| `GridColumn` | //Users/diana.broeders/Projects/design-system/packages/components/grid/src/column.js | | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------------- | ------- | ------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `align` | | `GridColumnAlignment \| undefined` | | The alignment of the content within the column. | GridColumn | +| `autoWidth` | | `boolean \| undefined` | | Automatically sets the width of the column based on the column contents when this is set to `true`. For performance reasons the column width is calculated automatically only once when the grid items are rendered for the first time and the calculation only considers the rows which are currently rendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell content changes, the column width might not match the contents anymore. Hidden columns are ignored in the calculation and their widths are not automatically updated when you show a column that was initially hidden. You can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`. The column width may still grow larger when `grow` is not 0. | GridColumn | +| `ellipsizeText` | | `boolean \| undefined` | | This will ellipsize the text in the `` elements when it overflows. | GridColumn | +| `grid` | | `Grid \| undefined` | | The parent grid instance. | GridColumn | +| `grow` | | `number` | `1` | The ratio with which the column will grow relative to the other columns. A ratio of 0 means the column width is fixed. | GridColumn | +| `header` | | `string \| GridColumnHeaderRenderer \| undefined` | | The label for the column header. Can contain custom HTML. | GridColumn | +| `options` | | `Array<{ label: string; value: unknown }> \| string[] \| undefined` | | The options for the select. | | +| `parts` | | `string \| GridColumnParts \| undefined` | | Custom parts to be set on the `` so it can be styled externally. | GridColumn | +| `path` | | `PathKeys \| undefined` | | The path to the value for this column. | GridColumn | +| `renderer` | | `GridColumnDataRenderer \| undefined` | | Renderer function for the column value of each cell. | GridColumn | +| `scopedElements` | | `Record \| undefined` | | The custom elements used for rendering this column. Since the rendering the column cells is done in the parent grid component, the custom elements need to be registered in the parent grid. | GridColumn | +| `sticky` | | `boolean \| undefined` | | Whether this column is sticky when the user scrolls horizontally. | GridColumn | +| `stickyOrder` | | `'first' \| 'last' \| undefined` | | Whether this column is the first or last sticky column. | GridColumn | +| `stickyPosition` | | `'start' \| 'end' \| undefined` | | The position where the column should be sticky: at the start of the grid, or at the end. | GridColumn | +| `width` | | `number \| undefined` | | Width of the cells for this column in pixels. | GridColumn | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------- | -------------- | +| `getClasses` | | | `_item: T` | `string[]` | GridColumn | +| `getParts` | | | `item: T` | `string[]` | GridColumn | +| `itemsChanged` | | This method is called when the contents of the grid has changed. This happens when the items property is directly set or when the data source has changed. | | `void` | GridColumn | +| `renderData` | | | `item: T` | `TemplateResult` | GridColumn | +| `renderHeader` | | | | `TemplateResult` | GridColumn | +| `renderStyles` | | | | `CSSResult \| void` | GridColumn | +| `stateChanged` | | This method is called when the state of the grid has changed. This happens for examples when a filter or sorting changes. | | `void` | GridColumn | + +### Events + +| Name | Type | Description | Inherited From | +| ------------------ | ------------------------ | --------------------------------------------- | -------------- | +| `sl-column-update` | `SlColumnUpdateEvent` | Emits when the column definition has changed. | GridColumn | + +### Attributes + +| Name | Field | Inherited From | +| ---------------- | ------------- | -------------- | +| `options` | options | | +| `align` | align | GridColumn | +| `auto-width` | autoWidth | GridColumn | +| `ellipsize-text` | ellipsizeText | GridColumn | +| `grow` | grow | GridColumn | +| `header` | header | GridColumn | +| `path` | path | GridColumn | +| `parts` | parts | GridColumn | +| `sticky` | sticky | GridColumn | +| `width` | width | GridColumn | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------------ | ---------------- | ------------------------------------------------------------------------------------------ | ------- | +| `js` | `GridSelectColumn` | GridSelectColumn | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/select-column.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/grid/src/selection-column.ts`: + +## class: `GridSelectionColumn`, `sl-grid-selection-column` + +### Superclass + +| Name | Module | Package | +| ------------ | ------------------------------------------------------------------------------------ | ------- | +| `GridColumn` | //Users/diana.broeders/Projects/design-system/packages/components/grid/src/column.js | | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------------- | ------- | ------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `align` | | `GridColumnAlignment \| undefined` | | The alignment of the content within the column. | GridColumn | +| `autoSelect` | | `boolean \| undefined` | | When true, the active rows get selected automatically. | | +| `autoWidth` | | `boolean \| undefined` | | Automatically sets the width of the column based on the column contents when this is set to `true`. For performance reasons the column width is calculated automatically only once when the grid items are rendered for the first time and the calculation only considers the rows which are currently rendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell content changes, the column width might not match the contents anymore. Hidden columns are ignored in the calculation and their widths are not automatically updated when you show a column that was initially hidden. You can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`. The column width may still grow larger when `grow` is not 0. | GridColumn | +| `ellipsizeText` | | `boolean \| undefined` | | This will ellipsize the text in the `` elements when it overflows. | GridColumn | +| `grid` | | `Grid \| undefined` | | The parent grid instance. | GridColumn | +| `grow` | | `number` | `1` | The ratio with which the column will grow relative to the other columns. A ratio of 0 means the column width is fixed. | GridColumn | +| `header` | | `string \| GridColumnHeaderRenderer \| undefined` | | The label for the column header. Can contain custom HTML. | GridColumn | +| `parts` | | `string \| GridColumnParts \| undefined` | | Custom parts to be set on the `` so it can be styled externally. | GridColumn | +| `path` | | `PathKeys \| undefined` | | The path to the value for this column. | GridColumn | +| `renderer` | | `GridColumnDataRenderer \| undefined` | | Renderer function for the column value of each cell. | GridColumn | +| `scopedElements` | | `Record \| undefined` | | The custom elements used for rendering this column. Since the rendering the column cells is done in the parent grid component, the custom elements need to be registered in the parent grid. | GridColumn | +| `selectAll` | | `boolean \| undefined` | | When true, all items are selected. | | +| `sticky` | | `boolean \| undefined` | | Whether this column is sticky when the user scrolls horizontally. | GridColumn | +| `stickyOrder` | | `'first' \| 'last' \| undefined` | | Whether this column is the first or last sticky column. | GridColumn | +| `stickyPosition` | | `'start' \| 'end' \| undefined` | | The position where the column should be sticky: at the start of the grid, or at the end. | GridColumn | +| `width` | | `number \| undefined` | | Width of the cells for this column in pixels. | GridColumn | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ----------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------- | -------------- | +| `getClasses` | | | `_item: T` | `string[]` | GridColumn | +| `getParts` | | | `item: T` | `string[]` | GridColumn | +| `getSelectedCount` | | | | `number` | | +| `itemsChanged` | | This method is called when the contents of the grid has changed. This happens when the items property is directly set or when the data source has changed. | | `void` | GridColumn | +| `renderData` | | | `item: T` | `TemplateResult` | GridColumn | +| `renderHeader` | | | | `TemplateResult` | GridColumn | +| `renderSelectionHeader` | | | | `TemplateResult` | | +| `renderStyles` | | | | `CSSResult \| void` | GridColumn | +| `stateChanged` | | This method is called when the state of the grid has changed. This happens for examples when a filter or sorting changes. | | `void` | GridColumn | + +### Events + +| Name | Type | Description | Inherited From | +| ------------------ | ------------------------ | --------------------------------------------- | -------------- | +| `sl-column-update` | `SlColumnUpdateEvent` | Emits when the column definition has changed. | GridColumn | + +### Attributes + +| Name | Field | Inherited From | +| ---------------- | ------------- | -------------- | +| `auto-select` | autoSelect | | +| `select-all` | selectAll | | +| `align` | align | GridColumn | +| `auto-width` | autoWidth | GridColumn | +| `ellipsize-text` | ellipsizeText | GridColumn | +| `grow` | grow | GridColumn | +| `header` | header | GridColumn | +| `path` | path | GridColumn | +| `parts` | parts | GridColumn | +| `sticky` | sticky | GridColumn | +| `width` | width | GridColumn | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------------------- | ------------------- | --------------------------------------------------------------------------------------------- | ------- | +| `js` | `GridSelectionColumn` | GridSelectionColumn | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/selection-column.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/grid/src/sort-column.ts`: + +## class: `GridSortColumn`, `sl-grid-sort-column` + +### Superclass + +| Name | Module | Package | +| ------------ | ------------------------------------------------------------------------------------ | ------- | +| `GridColumn` | //Users/diana.broeders/Projects/design-system/packages/components/grid/src/column.js | | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------------- | ------- | ------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `align` | | `GridColumnAlignment \| undefined` | | The alignment of the content within the column. | GridColumn | +| `ariaSorting` | | `'ascending' \| 'descending' \| undefined` | | The direction of the sorting | | +| `autoWidth` | | `boolean \| undefined` | | Automatically sets the width of the column based on the column contents when this is set to `true`. For performance reasons the column width is calculated automatically only once when the grid items are rendered for the first time and the calculation only considers the rows which are currently rendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell content changes, the column width might not match the contents anymore. Hidden columns are ignored in the calculation and their widths are not automatically updated when you show a column that was initially hidden. You can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`. The column width may still grow larger when `grow` is not 0. | GridColumn | +| `direction` | | `DataSourceSortDirection \| undefined` | | The direction this columns should be sorted in. | | +| `ellipsizeText` | | `boolean \| undefined` | | This will ellipsize the text in the `` elements when it overflows. | GridColumn | +| `grid` | | `Grid \| undefined` | | The parent grid instance. | GridColumn | +| `grow` | | `number` | `1` | The ratio with which the column will grow relative to the other columns. A ratio of 0 means the column width is fixed. | GridColumn | +| `header` | | `string \| GridColumnHeaderRenderer \| undefined` | | The label for the column header. Can contain custom HTML. | GridColumn | +| `parts` | | `string \| GridColumnParts \| undefined` | | Custom parts to be set on the `` so it can be styled externally. | GridColumn | +| `path` | | `PathKeys \| undefined` | | The path to the value for this column. | GridColumn | +| `renderer` | | `GridColumnDataRenderer \| undefined` | | Renderer function for the column value of each cell. | GridColumn | +| `scopedElements` | | `Record \| undefined` | | The custom elements used for rendering this column. Since the rendering the column cells is done in the parent grid component, the custom elements need to be registered in the parent grid. | GridColumn | +| `sorter` | | `DataSourceSortFunction \| undefined` | | If you want to provide a custom sort function, you can via this property. | | +| `sticky` | | `boolean \| undefined` | | Whether this column is sticky when the user scrolls horizontally. | GridColumn | +| `stickyOrder` | | `'first' \| 'last' \| undefined` | | Whether this column is the first or last sticky column. | GridColumn | +| `stickyPosition` | | `'start' \| 'end' \| undefined` | | The position where the column should be sticky: at the start of the grid, or at the end. | GridColumn | +| `width` | | `number \| undefined` | | Width of the cells for this column in pixels. | GridColumn | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------- | -------------- | +| `getClasses` | | | `_item: T` | `string[]` | GridColumn | +| `getParts` | | | `item: T` | `string[]` | GridColumn | +| `itemsChanged` | | This method is called when the contents of the grid has changed. This happens when the items property is directly set or when the data source has changed. | | `void` | GridColumn | +| `renderData` | | | `item: T` | `TemplateResult` | GridColumn | +| `renderHeader` | | | | `TemplateResult` | GridColumn | +| `renderStyles` | | | | `CSSResult \| void` | GridColumn | +| `stateChanged` | | This method is called when the state of the grid has changed. This happens for examples when a filter or sorting changes. | | `void` | GridColumn | + +### Events + +| Name | Type | Description | Inherited From | +| ------------------ | ------------------------ | --------------------------------------------- | -------------- | +| `sl-column-update` | `SlColumnUpdateEvent` | Emits when the column definition has changed. | GridColumn | + +### Attributes + +| Name | Field | Inherited From | +| ---------------- | ------------- | -------------- | +| `direction` | direction | | +| `align` | align | GridColumn | +| `auto-width` | autoWidth | GridColumn | +| `ellipsize-text` | ellipsizeText | GridColumn | +| `grow` | grow | GridColumn | +| `header` | header | GridColumn | +| `path` | path | GridColumn | +| `parts` | parts | GridColumn | +| `sticky` | sticky | GridColumn | +| `width` | width | GridColumn | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---------------- | -------------- | ---------------------------------------------------------------------------------------- | ------- | +| `js` | `GridSortColumn` | GridSortColumn | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/sort-column.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/grid/src/sorter.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ---------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/sorter.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/grid/src/sorter.ts`: + +## class: `GridSorter` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ----------- | ------- | ---------------------------------------- | ------- | ----------------------------------------- | -------------- | +| `column` | | `GridColumn` | | The grid column. | | +| `direction` | | `DataSourceSortDirection \| undefined` | | The direction in which to sort the items. | | +| `path` | | `string \| undefined` | | The path to the field to sort on. | | +| `sorter` | | `DataSourceSortFunction \| undefined` | | An optional custom sort function. | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------- | ------- | ----------- | ---------- | ------ | -------------- | +| `reset` | | | | `void` | | + +### Events + +| Name | Type | Description | Inherited From | +| -------------------------- | ------------------------------- | ------------------------------------------------ | -------------- | +| `sl-sorter-change` | `SlSorterChangeEvent` | Emits when the sorter has been added or removed. | | +| `sl-sort-direction-change` | `SlSortDirectionChangeEvent` | Emits when the direction has changed. | | + +### Attributes + +| Name | Field | Inherited From | +| ----------- | --------- | -------------- | +| `direction` | direction | | +| `path` | path | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---------------------------- | -------------------------- | ----------------------------------------------------------------------------------- | ------- | +| `js` | `SlSorterChangeEvent` | SlSorterChangeEvent | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/sorter.ts | | +| `js` | `SlSortDirectionChangeEvent` | SlSortDirectionChangeEvent | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/sorter.ts | | +| `js` | `GridSorter` | GridSorter | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/sorter.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/grid/src/text-field-column.ts`: + +## class: `GridTextFieldColumn`, `sl-grid-text-field-column` + +### Superclass + +| Name | Module | Package | +| ------------ | ------------------------------------------------------------------------------------ | ------- | +| `GridColumn` | //Users/diana.broeders/Projects/design-system/packages/components/grid/src/column.js | | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------------- | ------- | ------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `align` | | `GridColumnAlignment \| undefined` | | The alignment of the content within the column. | GridColumn | +| `autoWidth` | | `boolean \| undefined` | | Automatically sets the width of the column based on the column contents when this is set to `true`. For performance reasons the column width is calculated automatically only once when the grid items are rendered for the first time and the calculation only considers the rows which are currently rendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell content changes, the column width might not match the contents anymore. Hidden columns are ignored in the calculation and their widths are not automatically updated when you show a column that was initially hidden. You can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`. The column width may still grow larger when `grow` is not 0. | GridColumn | +| `ellipsizeText` | | `boolean \| undefined` | | This will ellipsize the text in the `` elements when it overflows. | GridColumn | +| `grid` | | `Grid \| undefined` | | The parent grid instance. | GridColumn | +| `grow` | | `number` | `1` | The ratio with which the column will grow relative to the other columns. A ratio of 0 means the column width is fixed. | GridColumn | +| `header` | | `string \| GridColumnHeaderRenderer \| undefined` | | The label for the column header. Can contain custom HTML. | GridColumn | +| `parts` | | `string \| GridColumnParts \| undefined` | | Custom parts to be set on the `` so it can be styled externally. | GridColumn | +| `path` | | `PathKeys \| undefined` | | The path to the value for this column. | GridColumn | +| `renderer` | | `GridColumnDataRenderer \| undefined` | | Renderer function for the column value of each cell. | GridColumn | +| `scopedElements` | | `Record \| undefined` | | The custom elements used for rendering this column. Since the rendering the column cells is done in the parent grid component, the custom elements need to be registered in the parent grid. | GridColumn | +| `sticky` | | `boolean \| undefined` | | Whether this column is sticky when the user scrolls horizontally. | GridColumn | +| `stickyOrder` | | `'first' \| 'last' \| undefined` | | Whether this column is the first or last sticky column. | GridColumn | +| `stickyPosition` | | `'start' \| 'end' \| undefined` | | The position where the column should be sticky: at the start of the grid, or at the end. | GridColumn | +| `width` | | `number \| undefined` | | Width of the cells for this column in pixels. | GridColumn | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------- | -------------- | +| `getClasses` | | | `_item: T` | `string[]` | GridColumn | +| `getParts` | | | `item: T` | `string[]` | GridColumn | +| `itemsChanged` | | This method is called when the contents of the grid has changed. This happens when the items property is directly set or when the data source has changed. | | `void` | GridColumn | +| `renderData` | | | `item: T` | `TemplateResult` | GridColumn | +| `renderHeader` | | | | `TemplateResult` | GridColumn | +| `renderStyles` | | | | `CSSResult \| void` | GridColumn | +| `stateChanged` | | This method is called when the state of the grid has changed. This happens for examples when a filter or sorting changes. | | `void` | GridColumn | + +### Events + +| Name | Type | Description | Inherited From | +| ------------------ | ------------------------ | --------------------------------------------- | -------------- | +| `sl-column-update` | `SlColumnUpdateEvent` | Emits when the column definition has changed. | GridColumn | + +### Attributes + +| Name | Field | Inherited From | +| ---------------- | ------------- | -------------- | +| `align` | align | GridColumn | +| `auto-width` | autoWidth | GridColumn | +| `ellipsize-text` | ellipsizeText | GridColumn | +| `grow` | grow | GridColumn | +| `header` | header | GridColumn | +| `path` | path | GridColumn | +| `parts` | parts | GridColumn | +| `sticky` | sticky | GridColumn | +| `width` | width | GridColumn | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------------------- | ------------------- | ---------------------------------------------------------------------------------------------- | ------- | +| `js` | `GridTextFieldColumn` | GridTextFieldColumn | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/text-field-column.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/grid/src/view-model.ts`: + +## class: `GridViewModel` + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------------- | ------- | -------------------------------- | ------- | ----------------------------------------------------------------------------------------- | -------------- | +| `columnDefinitions` | | `Array>` | | Sets the available columns. Not all columns may be rendered, depending on the view state. | | +| `columns` | | `Array>` | | Returns an array of visible columns. | | +| `dataSource` | | `ListDataSource \| undefined` | | | | +| `groups` | | `string[]` | | | | +| `headerRows` | | `Array>>` | | | | +| `rows` | | `T[]` | | | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ----------------------- | ------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------- | --------------------------- | -------------- | +| `getActiveRow` | | | `value: string` | `'all' \| 'some' \| 'none'` | | +| `getGroupSelection` | | Returns the selected state of the group. | `value: string` | `'all' \| 'some' \| 'none'` | | +| `getGroupState` | | Returns true if the group is expanded, false if collapsed. | `value: string` | `boolean` | | +| `getItemAtIndex` | | | `index: number` | `T` | | +| `getStickyColumnOffset` | | Returns the left offset, taking any sticky columns into account. | `index: number` | `number` | | +| `isFixedItem` | | Returns whether the item is fixed (not draggable). | `item: T` | `boolean` | | +| `refresh` | | | | `void` | | +| `reorderItem` | | Reorder the item in the view model. | `item: T, relativeItem: T \| undefined, position: 'before' \| 'after'` | `void` | | +| `toggleColumn` | | Toggle the visibility of the column. | `id: string, visible: boolean` | `void` | | +| `toggleGroup` | | Toggle the visibility of the group. | `value: string, collapse: boolean` | `void` | | + +
+ +## class: `GridViewModelGroup` + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------------------- | ------------------ | --------------------------------------------------------------------------------------- | ------- | +| `js` | `GridViewModelGroup` | GridViewModelGroup | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/view-model.ts | | +| `js` | `GridViewModel` | GridViewModel | /Users/diana.broeders/Projects/design-system/packages/components/grid/src/view-model.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/icon/src/icon.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | -------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/icon/src/icon.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/icon/src/icon.ts`: + +## class: `Icon`, `sl-icon` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Static Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ---------- | ------- | -------------------------------- | ------------------------------------------- | ------ | -------------- | +| `register` | | Add icon(s) to the icon registry | `icons: IconDefinition \| IconDefinition[]` | `void` | | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------- | ------- | ----------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `label` | | `string \| undefined` | | The label of the icon; Describes the icon for assistive devices. If not present, the icon is considered to be purely presentational. | | +| `name` | | `string \| undefined` | | The name of the icon; either the name from Font Awesome or the name of the custom icon in Figma. | | +| `size` | | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl'` | | The size of the icon. | | + +### Attributes + +| Name | Field | Inherited From | +| ------- | ----- | -------------- | +| `label` | label | | +| `name` | name | | +| `size` | size | | + +### CSS Properties + +| Name | Default | Description | +| -------------------------- | ------- | ---------------------------------------------- | +| `--sl-icon-container-size` | | The size of the icon container, defaults to md | +| `--sl-icon-fill-accent` | | Accent color, only used for multicolor icons | +| `--sl-icon-fill-default` | | Default fill color | +| `--sl-icon-size` | | The size of the svg element, defaults to md | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------ | ----------- | --------------------------------------------------------------------------------- | ------- | +| `js` | `Icon` | Icon | /Users/diana.broeders/Projects/design-system/packages/components/icon/src/icon.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/inline-message/src/inline-message.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ---------------------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/inline-message/src/inline-message.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/inline-message/src/inline-message.ts`: + +## class: `InlineMessage`, `sl-inline-message` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| --------------- | ------- | ---------------------- | -------- | ---------------------------------- | -------------- | +| `indismissible` | | `boolean \| undefined` | | Will hide the close button if set. | | +| `variant` | | `InlineMessageVariant` | `'info'` | The variant of the inline message. | | + +### Events + +| Name | Type | Description | Inherited From | +| ------------ | ---------------- | ------------------------------------------- | -------------- | +| `sl-dismiss` | `SlDismissEvent` | Emits when the inline message is dismissed. | | + +### Attributes + +| Name | Field | Inherited From | +| --------------- | ------------- | -------------- | +| `indismissible` | indismissible | | +| `variant` | variant | | + +### Slots + +| Name | Description | +| --------- | -------------------------------------------- | +| `default` | The body of the inline-message | +| `icon` | Icon shown on the left side of the component | +| `title` | Title content for the inline message | +| `action` | Optional action button | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---------------- | -------------- | ----------------------------------------------------------------------------------------------------- | ------- | +| `js` | `SlDismissEvent` | SlDismissEvent | /Users/diana.broeders/Projects/design-system/packages/components/inline-message/src/inline-message.ts | | +| `js` | `InlineMessage` | InlineMessage | /Users/diana.broeders/Projects/design-system/packages/components/inline-message/src/inline-message.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/listbox/src/listbox.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | -------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/listbox/src/listbox.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/listbox/src/listbox.ts`: + +## class: `Listbox`, `sl-listbox` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| -------------------- | ------- | --------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- | +| `emphasis` | | `ListboxEmphasis \| undefined` | `'subtle'` | The emphasis of the selected options in the listbox. | | +| `items` | | `Array> \| undefined` | | Use this property if you want to have full control over how the items are rendered using lit-virtualizer. You are expected to provide an array of ListboxItem and most likely will also want to provide a custom `renderer`. Only use this property if you know what you are doing. If you are unsure about using this property, use the `options` property instead. | | +| `optionGroupPath` | | `PathKeys \| undefined` | | The path to the property to use to group the options. | | +| `optionLabelPath` | | `PathKeys \| undefined` | | The path to the property to use for the label. | | +| `optionSelectedPath` | | `PathKeys \| undefined` | | The path to the property to use for the selected state. | | +| `optionValuePath` | | `PathKeys \| undefined` | | The path to the property to use for the value. | | +| `options` | | `T[] \| undefined` | | Use this property to set an array of options to render. When you set this property, the component will render the options using a virtualizer. This means that it only renders the options that are visible in the viewport, which allows it to handle a large number of options efficiently. When using this property, you can also provide paths to the properties to use for the label, value, selected state, and group. This allows you to render options that are objects and have nested properties. See `optionGroupPath`, `optionLabelPath`, \`optionSelectedPath`, and `optionValuePath` for more information. If you don't need virtualization, you can omit this property and render the options declaratively using the default slot and `` and ``. | | +| `renderer` | | `ListboxRenderer \| undefined` | | By setting this property, you can customize how an option in the `options` array is rendered. By default, this will render the option as an ``. | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| --------------- | ------- | ----------- | ----------------------------------------------- | ------ | -------------- | +| `scrollToIndex` | | | `index: number, options: ScrollIntoViewOptions` | `void` | | + +### Attributes + +| Name | Field | Inherited From | +| ---------------------- | ------------------ | -------------- | +| `emphasis` | emphasis | | +| `options` | options | | +| `option-group-path` | optionGroupPath | | +| `option-label-path` | optionLabelPath | | +| `option-selected-path` | optionSelectedPath | | +| `option-value-path` | optionValuePath | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | --------------------------------------------------------------------------------------- | ------- | +| `js` | `Listbox` | Listbox | /Users/diana.broeders/Projects/design-system/packages/components/listbox/src/listbox.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/listbox/src/option-group-header.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | -------------------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/listbox/src/option-group-header.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/listbox/src/option-group-header.ts`: + +## class: `OptionGroupHeader` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| --------- | ------- | ---------------------- | ------- | ------------------------------------------ | -------------- | +| `divider` | | `boolean \| undefined` | | Will render a horizontal divider when set. | | + +### Attributes + +| Name | Field | Inherited From | +| --------- | ------- | -------------- | +| `divider` | divider | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------------- | ----------------- | --------------------------------------------------------------------------------------------------- | ------- | +| `js` | `OptionGroupHeader` | OptionGroupHeader | /Users/diana.broeders/Projects/design-system/packages/components/listbox/src/option-group-header.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/listbox/src/option-group.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/listbox/src/option-group.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/listbox/src/option-group.ts`: + +## class: `OptionGroup`, `sl-option-group` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------- | ------- | --------------------- | ------- | --------------------------------- | -------------- | +| `label` | | `string \| undefined` | | The optional label for the group. | | + +### Attributes + +| Name | Field | Inherited From | +| ------- | ----- | -------------- | +| `label` | label | | + +### Slots + +| Name | Description | +| --------- | ------------------- | +| `default` | The option's label. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------- | ----------- | -------------------------------------------------------------------------------------------- | ------- | +| `js` | `OptionGroup` | OptionGroup | /Users/diana.broeders/Projects/design-system/packages/components/listbox/src/option-group.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/listbox/src/option.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/listbox/src/option.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/listbox/src/option.ts`: + +## class: `Option`, `sl-option` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------- | ------- | ----------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------ | -------------- | +| `disabled` | | `boolean \| undefined` | | Whether this option is disabled. | | +| `emphasis` | | `OptionEmphasis \| undefined` | `'subtle'` | The emphasis style when selected. | | +| `selected` | | `boolean \| undefined` | | Whether this option is selected. | | +| `textContent` | | `string` | | | | +| `value` | | `T` | | The value for this option. If not explicitly set, the getter will return the text content of the option. | | + +### Attributes + +| Name | Field | Inherited From | +| ---------- | -------- | -------------- | +| `disabled` | disabled | | +| `emphasis` | emphasis | | +| `selected` | selected | | +| `value` | value | | + +### Slots + +| Name | Description | +| --------- | ------------------- | +| `default` | The option's label. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------- | ----------- | -------------------------------------------------------------------------------------- | ------- | +| `js` | `Option` | Option | /Users/diana.broeders/Projects/design-system/packages/components/listbox/src/option.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/menu/src/menu-button.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | --------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/menu/src/menu-button.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/menu/src/menu-button.ts`: + +## class: `MenuButton`, `sl-menu-button` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| ------------------------ | ------ | --------------------------------------- | +| `ObserveAttributesMixin` | | @sl-design-system/shared/mixins.js | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------- | ------- | ------------------------------ | ----------- | -------------------------------------------------------------------- | -------------- | +| `disabled` | | `boolean \| undefined` | | Whether the button is disabled; when set no interaction is possible. | | +| `fill` | | `ButtonFill` | `'outline'` | The fill of the button. | | +| `position` | | `PopoverPosition \| undefined` | | The position of the menu relative to the button. | | +| `size` | | `ButtonSize \| undefined` | `'md'` | The size of the button. | | +| `variant` | | `ButtonVariant \| undefined` | `secondary` | The variant of the button. | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| --------------------- | ------- | ----------- | ----------------- | ------ | ---------------------- | +| `setAttributesTarget` | | | `target: Element` | `void` | ObserveAttributesMixin | + +### Attributes + +| Name | Field | Inherited From | +| --------------- | -------- | -------------- | +| `aria-disabled` | | | +| `aria-label` | | | +| `disabled` | disabled | | +| `fill` | fill | | +| `position` | position | | +| `size` | size | | +| `variant` | variant | | + +### CSS Parts + +| Name | Description | +| -------- | ------------------- | +| `button` | The button element. | + +### Slots + +| Name | Description | +| --------- | ----------------------------------------------------- | +| `default` | The menu items should be slotted in the default slot. | +| `button` | Any content for the button should be slotted here. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------ | ----------- | ---------------------------------------------------------------------------------------- | ------- | +| `js` | `MenuButton` | MenuButton | /Users/diana.broeders/Projects/design-system/packages/components/menu/src/menu-button.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/menu/src/menu-item-group.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/menu/src/menu-item-group.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/menu/src/menu-item-group.ts`: + +## class: `MenuItemGroup`, `sl-menu-item-group` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| --------- | ------- | ------------------------------------- | ------- | -------------------------------------------------------------------------------- | -------------- | +| `heading` | | `string \| undefined` | | The optional heading for the group. | | +| `selects` | | `'single' \| 'multiple' \| undefined` | | Determines whether if and how many menu items can be selected within this group. | | + +### Attributes + +| Name | Field | Inherited From | +| --------- | ------- | -------------- | +| `heading` | heading | | +| `selects` | selects | | + +### Slots + +| Name | Description | +| --------- | ------------------------------ | +| `default` | The menu items within a group. | +| `header` | The header of the group. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------------- | ------------- | -------------------------------------------------------------------------------------------- | ------- | +| `js` | `MenuItemGroup` | MenuItemGroup | /Users/diana.broeders/Projects/design-system/packages/components/menu/src/menu-item-group.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/menu/src/menu-item.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/menu/src/menu-item.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/menu/src/menu-item.ts`: + +## class: `MenuItem`, `sl-menu-item` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------ | ------- | ------------------------------ | ------- | ------------------------------------------------ | -------------- | +| `disabled` | | `boolean \| undefined` | | Whether this menu item is disabled. | | +| `selectable` | | `boolean \| undefined` | | Whether this menu item can be selected. | | +| `selected` | | `boolean \| undefined` | | Whether this menu item has been selected. | | +| `shortcut` | | `string \| undefined` | | Keyboard shortcut for activating this menu item. | | +| `variant` | | `MenuItemVariant \| undefined` | | The variant of the menu item. | | + +### Events + +| Name | Type | Description | Inherited From | +| ----------- | --------------- | ---------------------------------------------------------------------------------- | -------------- | +| `sl-select` | `SlSelectEvent` | Emits the current selected state as a boolean when the user toggles the menu item. | | + +### Attributes + +| Name | Field | Inherited From | +| ------------ | ---------- | -------------- | +| `disabled` | disabled | | +| `selected` | selected | | +| `selectable` | selectable | | +| `shortcut` | shortcut | | +| `variant` | variant | | + +### CSS Parts + +| Name | Description | +| --------- | ----------------------------------------- | +| `wrapper` | The wrapper around the menu item content. | + +### Slots + +| Name | Description | +| --------- | ------------------------------------------------------------------ | +| `default` | Content to display inside the menu item. | +| `submenu` | The menu items that will be displayed when the menu item is shown. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---------- | ----------- | -------------------------------------------------------------------------------------- | ------- | +| `js` | `MenuItem` | MenuItem | /Users/diana.broeders/Projects/design-system/packages/components/menu/src/menu-item.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/menu/src/menu.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | -------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/menu/src/menu.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/menu/src/menu.ts`: + +## class: `Menu`, `sl-menu` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------- | ------- | ------------------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- | +| `emphasis` | | `MenuEmphasis \| undefined` | `'subtle'` | The emphasis of the menu. | | +| `offset` | | `number \| undefined` | | The offset of the menu to its anchor. This is a property on this instance so that it can be overridden by the menu item in case of a nested menu. You should not need to set this property yourself. | | +| `position` | | `PopoverPosition \| undefined` | `'right-start'` | The position of the menu relative to its anchor. | | +| `selects` | | `'single' \| 'multiple' \| undefined` | | Determines whether if and how many menu items can be selected. | | + +### Events + +| Name | Type | Description | Inherited From | +| ----------- | --------------------- | ------------------------------------------- | -------------- | +| `sl-select` | `SlSelectEvent` | Emits when the menu item selection changes. | | + +### Attributes + +| Name | Field | Inherited From | +| ---------- | -------- | -------------- | +| `offset` | offset | | +| `position` | position | | +| `selects` | selects | | +| `emphasis` | emphasis | | + +### CSS Parts + +| Name | Description | +| ------ | ----------------------------------------------------------------------------------------- | +| `menu` | The sl-menu element, use this to set for example a min and/or max inline size of the menu | + +### Slots + +| Name | Description | +| --------- | --------------------------------------------------- | +| `default` | The menu's content: menu items or menu item groups. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------ | ----------- | --------------------------------------------------------------------------------- | ------- | +| `js` | `Menu` | Menu | /Users/diana.broeders/Projects/design-system/packages/components/menu/src/menu.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/message-dialog/src/message-dialog.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ---------------------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/message-dialog/src/message-dialog.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/message-dialog/src/message-dialog.ts`: + +## class: `MessageDialog`, `sl-message-dialog` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Static Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| --------- | ------- | --------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------- | -------------- | +| `alert` | | Shows an alert message to the user with an OK button by default. | `message: string, title` | `Promise` | | +| `confirm` | | Shows a confirmation dialog to the user with OK and Cancel buttons by default. | `message: string, title` | | | +| `show` | | Shows a message dialog to the user. Use this method to display custom dialogs with any number of buttons. | `config: MessageDialogConfig` | | | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| -------- | ------- | ------------------------------------- | ------- | ---------------------------------------- | -------------- | +| `config` | | `MessageDialogConfig \| undefined` | | The configuration of the message dialog. | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ----------- | ------- | ---------------------------------------------------------------------- | ---------- | ------ | -------------- | +| `close` | | Close the message dialog. | | `void` | | +| `showModal` | | Show the message dialog as a modal, in the top layer, with a backdrop. | | `void` | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------------- | ------------- | ----------------------------------------------------------------------------------------------------- | ------- | +| `js` | `MessageDialog` | MessageDialog | /Users/diana.broeders/Projects/design-system/packages/components/message-dialog/src/message-dialog.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/number-field/src/number-field.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------------------ | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/number-field/src/number-field.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/number-field/src/number-field.ts`: + +## class: `NumberField`, `sl-number-field` + +### Superclass + +| Name | Module | Package | +| ----------- | ------ | ---------------------------- | +| `TextField` | | @sl-design-system/text-field | + +### Mixins + +| Name | Module | Package | +| ------------- | ------ | ---------------------------------- | +| `LocaleMixin` | | @sl-design-system/shared/mixins.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------------- | ------- | --------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `autocomplete` | | `string \| undefined` | | Specifies which type of data the browser can use to pre-fill the input. | TextField | +| `customValidity` | | `string \| undefined` | | The error message to display when the control is invalid. | TextField | +| `dirty` | | `boolean` | `false` | A control is dirty if the user has changed the value in the UI. | TextField | +| `disabled` | | `boolean \| undefined` | | Whether the text field is disabled; when set no interaction is possible. | TextField | +| `form` | | `HTMLFormElement \| null` | | The form associated with the control. | TextField | +| `formValue` | | `unknown` | | The value used when submitting the form. | TextField | +| `formatOptions` | | `Intl.NumberFormatOptions \| undefined` | | Number formatting options. | | +| `formattedValue` | | `string` | | The formatted value, to be used as the input value. | TextField | +| `input` | | `HTMLInputElement` | | The input element in the light DOM. | TextField | +| `inputSize` | | `number \| undefined` | | The size attribute of the input element. | TextField | +| `labels` | | `` `NodeListOf` \| null `` | | The labels associated with the control. | TextField | +| `locale` | | `string` | | The component's locale. | LocaleMixin | +| `max` | | `number \| undefined` | | The maximum value that is acceptable and valid. If the value is greater, the control will be invalid. | | +| `maxLength` | | `number \| undefined` | | Maximum length (number of characters). | TextField | +| `min` | | `number \| undefined` | | The minimum value that is acceptable and valid. If the value is less, the control will be invalid. | | +| `minLength` | | `number \| undefined` | | Minimum length (number of characters). | TextField | +| `name` | | `string \| undefined` | | The name of the form control. | TextField | +| `nativeFormValue` | | `FormValue` | | Returns the form value as used in a native ``. This is always a string, File, FormData or null. | TextField | +| `pattern` | | `string \| undefined` | | This will validate the value of the input using the given pattern. | TextField | +| `placeholder` | | `string \| undefined` | | Placeholder text in the input. | TextField | +| `rawValue` | | `string` | `''` | The raw (string) value of the input. | TextField | +| `readonly` | | `boolean \| undefined` | | Whether you can interact with the input or if it is just a static, readonly display. | TextField | +| `required` | | `boolean \| undefined` | | Whether the text field is a required field. | TextField | +| `showValid` | | `boolean` | `false` | Optional property to indicate the valid state should be shown. | TextField | +| `showValidity` | | `'valid' \| 'invalid' \| undefined` | | Whether to show the validity state. | TextField | +| `size` | | `TextFieldSize \| undefined` | `md` | The size of the input. | TextField | +| `step` | | `number \| undefined` | | The amount by which the value will be increased/decreased by a step up/down. | | +| `stepButtons` | | `NumberFieldButtonsAlignment \| undefined` | | Step buttons placement for incrementing / decrementing. No step buttons by default. | | +| `touched` | | `boolean` | `false` | A control is marked touched once the user has triggered a blur event on it. | TextField | +| `type` | | `'email' \| 'number' \| 'tel' \| 'text' \| 'url' \| 'password'` | `'text'` | The input type. Only text types are valid here. For other types, see their respective components. | TextField | +| `valid` | | `boolean` | | Returns whether the form control is valid or not. | TextField | +| `validationMessage` | | `string` | | String representing a localized (by the browser) message that describes the validation constraints that the control does not satisfy (if any). The string is empty if the control is not a candidate for constraint validation, or it satisfies its constraints. For true localization, see `getLocalizedValidationMessage()` instead. | TextField | +| `validity` | | `ValidityState` | | Returns the validity state the control is in. | TextField | +| `validityState` | | `'valid' \| 'invalid' \| 'pending'` | | Returns the current validity state. | TextField | +| `value` | | `unknown \| undefined` | | The value for this form control. | TextField | +| `valueAsNumber` | | | | The value, as a number. | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ---------------------------------- | -------------- | +| `getLocalizedValidationMessage` | | This returns a localized validation message. It does not support all `ValidityState` properties, since some require more context than we have here. If you need to support more, you can override this method in your own form control. | | `string` | TextField | +| `onBlur` | protected | | | `void` | TextField | +| `onFocus` | protected | | | `void` | TextField | +| `onInput` | protected | | `{ target }: Event & { target: HTMLInputElement }` | `void` | TextField | +| `onKeydown` | protected | | `event: KeyboardEvent` | `void` | TextField | +| `onSlotChange` | protected | | `event: Event & { target: HTMLSlotElement }` | `void` | TextField | +| `parseValue` | | Method that converts the string value in the input to the specified type T. Override this method if you want to convert the value in a different way. Throw an error if the value is invalid. | `value: string` | `T \| undefined` | TextField | +| `renderInputSlot` | | Render the input slot; separate method so it is composable for child components. | | `TemplateResult` | TextField | +| `renderPrefix` | | Renders the prefix slot; can be overridden to customize the prefix. | | `TemplateResult \| typeof nothing` | TextField | +| `renderSuffix` | | Renders the suffix slot; can be overridden to customize the suffix. | | `TemplateResult \| typeof nothing` | TextField | +| `reportValidity` | | Returns whether the control is valid. If the control is invalid, calling this will also cause an `invalid` event to be dispatched. After calling this, the control will also report the validity to the user. | | `boolean` | TextField | +| `setAttributesTarget` | | | `target: Element` | `void` | TextField | +| `setCustomValidity` | | Sets a custom validation message for the form control. If the message is not an empty string, that will make the control invalid. By setting it to an empty string again, you can make the control valid again. | `message: string \| Promise` | `void` | TextField | +| `stepDown` | | Decreases the current value by the `step` amount. | `decrement: number` | `void` | | +| `stepUp` | | Increases the current value by the `step` amount. | `increment: number` | `void` | | + +### Events + +| Name | Type | Description | Inherited From | +| -------------------- | ------------------------------- | -------------------------------------------------------------------------------------------- | -------------- | +| `sl-form-control` | `SlFormControlEvent` | Emits when the form control is added to the DOM. | TextField | +| `sl-update-state` | `SlUpdateStateEvent` | Emits when the UI state (dirty, pristine, touched or untouched) of the form control changes. | TextField | +| `sl-update-validity` | `SlUpdateValidityEvent` | Emits when the validity of the form control changes. | TextField | +| `sl-validate` | `SlValidateEvent` | Emits when the form control can be validated. | TextField | +| `sl-blur` | `SlBlurEvent` | Emits when the focus leaves the component. | TextField | +| `sl-change` | `SlChangeEvent` | Emits when the value changes. | TextField | +| `sl-focus` | `SlFocusEvent` | Emits when the component gains focus. | TextField | + +### Attributes + +| Name | Field | Inherited From | +| ----------------- | -------------- | -------------- | +| `format-options` | formatOptions | | +| `step-buttons` | stepButtons | | +| `max` | max | | +| `min` | min | | +| `step` | step | | +| `valueAsNumber` | valueAsNumber | | +| `locale` | locale | LocaleMixin | +| `custom-validity` | customValidity | TextField | +| `name` | name | TextField | +| `show-validity` | showValidity | TextField | +| `aria-disabled` | | TextField | +| `aria-label` | | TextField | +| `aria-labelledby` | | TextField | +| `aria-required` | | TextField | +| `autocomplete` | autocomplete | TextField | +| `disabled` | disabled | TextField | +| `input-size` | inputSize | TextField | +| `maxlength` | maxLength | TextField | +| `minlength` | minLength | TextField | +| `pattern` | pattern | TextField | +| `placeholder` | placeholder | TextField | +| `readonly` | readonly | TextField | +| `required` | required | TextField | +| `show-valid` | showValid | TextField | +| `size` | size | TextField | +| `type` | type | TextField | +| `value` | value | TextField | + +### CSS Parts + +| Name | Description | +| --------- | ------------------- | +| `wrapper` | The input's wrapper | + +### Slots + +| Name | Description | +| -------- | ------------------------------ | +| `prefix` | Content shown before the input | +| `input` | The slot for the input element | +| `suffix` | Content shown after the input | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------- | ----------- | ------------------------------------------------------------------------------------------------- | ------- | +| `js` | `NumberField` | NumberField | /Users/diana.broeders/Projects/design-system/packages/components/number-field/src/number-field.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/number-field/src/number-parser.ts`: + +## class: `NumberParser` + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| --------- | ------- | -------------------------- | --------- | ----------- | -------------- | +| `locale` | | `Intl.LocalesArgument` | `locale` | | | +| `options` | | `Intl.NumberFormatOptions` | `options` | | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------- | ------- | ----------- | --------------- | --------------------- | -------------- | +| `parse` | | | `value: string` | `number \| undefined` | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------------- | ------------ | -------------------------------------------------------------------------------------------------- | ------- | +| `js` | `NumberParser` | NumberParser | /Users/diana.broeders/Projects/design-system/packages/components/number-field/src/number-parser.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/paginator/src/page-size.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------------ | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/paginator/src/page-size.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/paginator/src/page-size.ts`: + +## class: `PaginatorPageSize`, `sl-paginator-page-size` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------ | ------- | -------------------------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `dataSource` | | `ListDataSource \| undefined` | | By setting a dataSource, the paginator will listen for changes on the data source and control the data source when the user selects a new page in the component. This can be very useful when the paginator is used in combination with a data source fed component, such as ``. | | +| `pageSize` | | | `DATA_SOURCE_DEFAULT_PAGE_SIZE` | Items per page. | | +| `pageSizes` | | `number[] \| undefined` | | Available page sizes. | | + +### Events + +| Name | Type | Description | Inherited From | +| --------------------- | ----------------------- | --------------------------------------------------- | -------------- | +| `sl-page-size-change` | `SlChangeEvent` | Emits when the page size has been selected/changed. | | + +### Attributes + +| Name | Field | Inherited From | +| ------------ | --------- | -------------- | +| `page-size` | pageSize | | +| `page-sizes` | pageSizes | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------------- | ----------------- | ------------------------------------------------------------------------------------------- | ------- | +| `js` | `PaginatorPageSize` | PaginatorPageSize | /Users/diana.broeders/Projects/design-system/packages/components/paginator/src/page-size.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/paginator/src/paginator.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------------ | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/paginator/src/paginator.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/paginator/src/paginator.ts`: + +## class: `Paginator`, `sl-paginator` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------ | ------- | -------------------------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `dataSource` | | `ListDataSource \| undefined` | | By setting a dataSource, the paginator will listen for changes on the data source and control the data source when the user selects a new page in the component. This can be very useful when the paginator is used in combination with a data source fed component, such as ``. | | +| `page` | | `number` | `0` | Current page. | | +| `pageSize` | | | `DATA_SOURCE_DEFAULT_PAGE_SIZE` | Items per page. Default to the first item of pageSizes. | | +| `size` | | `PaginatorSize \| undefined` | | The size of the paginator. This is used to determine how many pages are visible at once. For `xs` a select component will be used to select the page. For all other sizes, buttons will be used. | | +| `totalItems` | | `number` | `1` | Total number of items. | | + +### Events + +| Name | Type | Description | Inherited From | +| ---------------- | ----------------------- | ------------------------------------- | -------------- | +| `sl-page-change` | `SlChangeEvent` | Emits when the page has been changed. | | + +### Attributes + +| Name | Field | Inherited From | +| ------------- | ---------- | -------------- | +| `page` | page | | +| `page-size` | pageSize | | +| `size` | size | | +| `total-items` | totalItems | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ----------- | ----------- | ------------------------------------------------------------------------------------------- | ------- | +| `js` | `Paginator` | Paginator | /Users/diana.broeders/Projects/design-system/packages/components/paginator/src/paginator.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/paginator/src/status.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | --------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/paginator/src/status.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/paginator/src/status.ts`: + +## class: `PaginatorStatus`, `sl-paginator-status` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------ | ------- | -------------------------------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `dataSource` | | `ListDataSource \| undefined` | | By setting a dataSource, the component will listen for changes on the data source and control the data source when the user selects a new page size in the component. | | +| `page` | | `number` | `0` | Current page. | | +| `pageSize` | | | `DATA_SOURCE_DEFAULT_PAGE_SIZE` | Items per page. | | +| `totalItems` | | `number` | `1` | Total number of items. | | + +### Attributes + +| Name | Field | Inherited From | +| ------------- | ---------- | -------------- | +| `page` | page | | +| `page-size` | pageSize | | +| `total-items` | totalItems | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ----------------- | --------------- | ---------------------------------------------------------------------------------------- | ------- | +| `js` | `PaginatorStatus` | PaginatorStatus | /Users/diana.broeders/Projects/design-system/packages/components/paginator/src/status.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/panel/src/panel.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ---------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/panel/src/panel.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/panel/src/panel.ts`: + +## class: `Panel`, `sl-panel` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ----------------- | ------- | ------------------------------ | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `collapsed` | | `boolean \| undefined` | | Indicates whether the panel is collapsed or expanded . | | +| `collapsible` | | `boolean \| undefined` | | Indicates whether the panel can be collapsed. | | +| `elevation` | | `PanelElevation \| undefined` | | The elevation style of the panel. | | +| `heading` | | `string \| undefined` | | The heading shown in the header. Use this property if your heading is a string. If you need more flexibility, such as an icon or other elements, use the `heading` slot. | | +| `noBorder` | | `boolean \| undefined` | | Hide the border around the panel when true. | | +| `subheading` | | `string \| undefined` | | The heading shown in the header. Use this property if your subheading is a string. If you need more flexibility, such as an icon or other elements, use the `subheading` slot. | | +| `togglePlacement` | | `TogglePlacement \| undefined` | `` `start` `` | The placement of the toggle button when it's collapsible. | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| --------------- | ------- | ------------------------------------------------------------------------------------------------ | ---------- | ---------------- | -------------- | +| `renderHeading` | | | | `TemplateResult` | | +| `toggle` | | Toggle's the collapsed state of the panel. This only does something if the panel is collapsible. | `force` | `void` | | + +### Events + +| Name | Type | Description | Inherited From | +| ----------- | ------------------------ | --------------------------------------- | -------------- | +| `sl-toggle` | `SlToggleEvent` | Emits when the panel expands/collapses. | | + +### Attributes + +| Name | Field | Inherited From | +| ------------------ | --------------- | -------------- | +| `collapsed` | collapsed | | +| `collapsible` | collapsible | | +| `elevation` | elevation | | +| `heading` | heading | | +| `no-border` | noBorder | | +| `subheading` | subheading | | +| `toggle-placement` | togglePlacement | | + +### CSS Properties + +| Name | Default | Description | +| ---------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `--sl-panel-content-padding` | | The padding for the panel content, e.g. set to 0 to have content without any padding. | +| `--sl-panel-titles-order` | | The order of the titles (heading and subheading) - `column` by default, so the subheading is below the heading. Can be used `column-reverse` as well to have subheading above the heading when it's necessary. | + +### CSS Parts + +| Name | Description | +| --------- | --------------------------------------------- | +| `header` | The header of the panel. | +| `wrapper` | The wrapper around the heading. | +| `body` | The body of the panel. | +| `inner` | The inner container of the panel. | +| `content` | The content container of the panel. | +| `titles` | The container for the heading and subheading. | + +### Slots + +| Name | Description | +| ------------ | -------------------------------------------------------------------------------- | +| `heading` | The panel's heading. Use this if the `heading` property does not suffice. | +| `aside` | Additional content to show in the header; replaces the button bar. | +| `actions` | The panel's actions; will slot in a button bar by default. | +| `default` | The panel's content. | +| `prefix` | Content to show before the heading. | +| `subheading` | The panel's subheading. Use this if the `subheading` property is not sufficient. | +| `suffix` | Content to show after the heading. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------- | ----------- | ----------------------------------------------------------------------------------- | ------- | +| `js` | `Panel` | Panel | /Users/diana.broeders/Projects/design-system/packages/components/panel/src/panel.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/popover/src/popover.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | -------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/popover/src/popover.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/popover/src/popover.ts`: + +## class: `Popover`, `sl-popover` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| --------------- | ------- | ------------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `noDescribedby` | | `boolean \| undefined` | | When the contents of your popover is too long to be read inline this should be set to true so the user can navigate to the popover content themselves. `aria-details` is always set, regardless of this property. Read more about this in the [accessibility documentation](https://sanomalearning.design/categories/components/popover/accessibility/). | | +| `position` | | `PopoverPosition \| undefined` | `'bottom'` | The position of popover relative to its anchor. | | + +### Attributes + +| Name | Field | Inherited From | +| ---------------- | ------------- | -------------- | +| `position` | position | | +| `no-describedby` | noDescribedby | | + +### CSS Parts + +| Name | Description | +| ----------- | ----------------------------- | +| `container` | The container for the popover | + +### Slots + +| Name | Description | +| --------- | ---------------------------- | +| `default` | Body content for the popover | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | --------------------------------------------------------------------------------------- | ------- | +| `js` | `Popover` | Popover | /Users/diana.broeders/Projects/design-system/packages/components/popover/src/popover.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/progress-bar/src/progress-bar.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------------------ | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/progress-bar/src/progress-bar.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/progress-bar/src/progress-bar.ts`: + +## class: `ProgressBar`, `sl-progress-bar` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| --------------- | ------- | ------------------------------ | ------- | ----------------------------------------------------- | -------------- | +| `indeterminate` | | `boolean` | `false` | Whether the progress bar has the indeterminate state. | | +| `label` | | `string \| undefined` | | Label describing the value of the progress bar. | | +| `value` | | `number` | `0` | Progress value (from 0...100). | | +| `variant` | | `ProgressVariant \| undefined` | | The variant of the progress bar. | | + +### Attributes + +| Name | Field | Inherited From | +| --------------- | ------------- | -------------- | +| `indeterminate` | indeterminate | | +| `label` | label | | +| `variant` | variant | | +| `value` | value | | + +### Slots + +| Name | Description | +| --------- | ------------------------------------------------ | +| `default` | A place for helper text like e.g. `20% of 100%`. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------- | ----------- | ------------------------------------------------------------------------------------------------- | ------- | +| `js` | `ProgressBar` | ProgressBar | /Users/diana.broeders/Projects/design-system/packages/components/progress-bar/src/progress-bar.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/radio-group/src/radio-group.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ---------------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/radio-group/src/radio-group.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/radio-group/src/radio-group.ts`: + +## class: `RadioGroup`, `sl-radio-group` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| ------------------ | ------ | ---------------------- | +| `FormControlMixin` | | @sl-design-system/form | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------------- | ------- | -------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | +| `customValidity` | | `string \| undefined` | | The error message to display when the control is invalid. | FormControlMixin | +| `dirty` | | `boolean` | `false` | A control is dirty if the user has changed the value in the UI. | FormControlMixin | +| `disabled` | | `boolean \| undefined` | | Whether the group is disabled; when set no interaction is possible. | | +| `form` | | `HTMLFormElement \| null` | | The form associated with the control. | FormControlMixin | +| `formValue` | | `unknown` | | The value used when submitting the form. | FormControlMixin | +| `horizontal` | | `boolean \| undefined` | | The orientation of the radio options; when true, the radio buttons are displayed next to each other instead of below each other. | | +| `labels` | | `` `NodeListOf` \| null `` | | The labels associated with the control. | FormControlMixin | +| `name` | | `string \| undefined` | | The name of the form control. | FormControlMixin | +| `nativeFormValue` | | `FormValue` | | Returns the form value as used in a native ``. This is always a string, File, FormData or null. | FormControlMixin | +| `required` | | `boolean \| undefined` | | Whether the user is required to select an option in the group. | | +| `showValid` | | `boolean` | `false` | When set will cause the control to show it is valid after reportValidity is called. | FormControlMixin | +| `showValidity` | | `'valid' \| 'invalid' \| undefined` | | Whether to show the validity state. | FormControlMixin | +| `size` | | `RadioButtonSize \| undefined` | `md` | The size of the radio buttons in the group. | | +| `touched` | | `boolean` | `false` | A control is marked touched once the user has triggered a blur event on it. | FormControlMixin | +| `valid` | | `boolean` | | Returns whether the form control is valid or not. | FormControlMixin | +| `validationMessage` | | `string` | | String representing a localized (by the browser) message that describes the validation constraints that the control does not satisfy (if any). The string is empty if the control is not a candidate for constraint validation, or it satisfies its constraints. For true localization, see `getLocalizedValidationMessage()` instead. | FormControlMixin | +| `validity` | | `ValidityState` | | Returns the validity state the control is in. | FormControlMixin | +| `validityState` | | `'valid' \| 'invalid' \| 'pending'` | | Returns the current validity state. | FormControlMixin | +| `value` | | `unknown \| undefined` | | The value for the radio group, to be used in forms. | FormControlMixin | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------- | ---------------- | +| `focus` | | | | `void` | | +| `getLocalizedValidationMessage` | | This returns a localized validation message. It does not support all `ValidityState` properties, since some require more context than we have here. If you need to support more, you can override this method in your own form control. | | `string` | FormControlMixin | +| `reportValidity` | | Returns whether the control is valid. If the control is invalid, calling this will also cause an `invalid` event to be dispatched. After calling this, the control will also report the validity to the user. | | `boolean` | FormControlMixin | +| `setCustomValidity` | | Sets a custom validation message for the form control. If the message is not an empty string, that will make the control invalid. By setting it to an empty string again, you can make the control valid again. | `message: string \| Promise` | `void` | FormControlMixin | + +### Events + +| Name | Type | Description | Inherited From | +| -------------------- | ------------------------------- | -------------------------------------------------------------------------------------------- | ---------------- | +| `sl-blur` | `SlBlurEvent` | Emits when the component loses focus. | | +| `sl-change` | `SlChangeEvent` | Emits when the value changes. | | +| `sl-focus` | `SlFocusEvent` | Emits when the component receives focus. | | +| `sl-form-control` | `SlFormControlEvent` | Emits when the form control is added to the DOM. | FormControlMixin | +| `sl-update-state` | `SlUpdateStateEvent` | Emits when the UI state (dirty, pristine, touched or untouched) of the form control changes. | FormControlMixin | +| `sl-update-validity` | `SlUpdateValidityEvent` | Emits when the validity of the form control changes. | FormControlMixin | +| `sl-validate` | `SlValidateEvent` | Emits when the form control can be validated. | FormControlMixin | + +### Attributes + +| Name | Field | Inherited From | +| ----------------- | -------------- | ---------------- | +| `disabled` | disabled | | +| `horizontal` | horizontal | | +| `required` | required | | +| `show-valid` | showValid | | +| `size` | size | | +| `value` | value | | +| `custom-validity` | customValidity | FormControlMixin | +| `name` | name | FormControlMixin | +| `show-validity` | showValidity | FormControlMixin | + +### Slots + +| Name | Description | +| --------- | ------------------------------ | +| `default` | A list of `sl-radio` elements. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------ | ----------- | ----------------------------------------------------------------------------------------------- | ------- | +| `js` | `RadioGroup` | RadioGroup | /Users/diana.broeders/Projects/design-system/packages/components/radio-group/src/radio-group.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/radio-group/src/radio.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ---------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/radio-group/src/radio.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/radio-group/src/radio.ts`: + +## class: `Radio`, `sl-radio` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| -------------- | ------- | ------------------------------ | ------- | ---------------------------------------------------- | -------------- | +| `checked` | | `boolean \| undefined` | | Whether the radio button is checked. | | +| `disabled` | | `boolean \| undefined` | | Whether this radio button is disabled. | | +| `showValidity` | | `FormControlShowValidity` | | Indicates if the radio button shows it is (in)valid. | | +| `size` | | `RadioButtonSize \| undefined` | `md` | The size of the radio button. | | +| `value` | | `T \| undefined` | | The value for this radio button. | | + +### Attributes + +| Name | Field | Inherited From | +| --------------- | ------------ | -------------- | +| `checked` | checked | | +| `disabled` | disabled | | +| `show-validity` | showValidity | | +| `size` | size | | +| `value` | value | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------- | ----------- | ----------------------------------------------------------------------------------------- | ------- | +| `js` | `Radio` | Radio | /Users/diana.broeders/Projects/design-system/packages/components/radio-group/src/radio.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/scrollbar/src/scrollbar.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------------ | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/scrollbar/src/scrollbar.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/scrollbar/src/scrollbar.ts`: + +## class: `Scrollbar`, `sl-scrollbar` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------- | ------- | -------------------------------- | ------- | --------------------------------------------------------------------------------------------------------- | -------------- | +| `scroller` | | `string \| Element \| undefined` | | The scroll container; either the DOM id of an element within the same context, or the element itself. | | +| `vertical` | | `boolean \| undefined` | | Set to true if you want the scrollbar to have a vertical orientation. | | + +### Attributes + +| Name | Field | Inherited From | +| ---------- | -------- | -------------- | +| `scroller` | scroller | | +| `vertical` | vertical | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ----------- | ----------- | ------------------------------------------------------------------------------------------- | ------- | +| `js` | `Scrollbar` | Scrollbar | /Users/diana.broeders/Projects/design-system/packages/components/scrollbar/src/scrollbar.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/search-field/src/search-field.ts`: + +## class: `SearchField`, `sl-search-field` + +### Superclass + +| Name | Module | Package | +| ----------- | ------ | ---------------------------- | +| `TextField` | | @sl-design-system/text-field | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------------- | ------- | --------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `autocomplete` | | `string \| undefined` | | Specifies which type of data the browser can use to pre-fill the input. | TextField | +| `customValidity` | | `string \| undefined` | | The error message to display when the control is invalid. | TextField | +| `dirty` | | `boolean` | `false` | A control is dirty if the user has changed the value in the UI. | TextField | +| `disabled` | | `boolean \| undefined` | | Whether the text field is disabled; when set no interaction is possible. | TextField | +| `form` | | `HTMLFormElement \| null` | | The form associated with the control. | TextField | +| `formValue` | | `unknown` | | The value used when submitting the form. | TextField | +| `formattedValue` | | `string` | | The formatted value, to be used as the input value. | TextField | +| `input` | | `HTMLInputElement` | | The input element in the light DOM. | TextField | +| `inputSize` | | `number \| undefined` | | The size attribute of the input element. | TextField | +| `labels` | | `` `NodeListOf` \| null `` | | The labels associated with the control. | TextField | +| `maxLength` | | `number \| undefined` | | Maximum length (number of characters). | TextField | +| `minLength` | | `number \| undefined` | | Minimum length (number of characters). | TextField | +| `name` | | `string \| undefined` | | The name of the form control. | TextField | +| `nativeFormValue` | | `FormValue` | | Returns the form value as used in a native ``. This is always a string, File, FormData or null. | TextField | +| `pattern` | | `string \| undefined` | | This will validate the value of the input using the given pattern. | TextField | +| `placeholder` | | `string \| undefined` | | Placeholder text in the input. | TextField | +| `rawValue` | | `string` | `''` | The raw (string) value of the input. | TextField | +| `readonly` | | `boolean \| undefined` | | Whether you can interact with the input or if it is just a static, readonly display. | TextField | +| `required` | | `boolean \| undefined` | | Whether the text field is a required field. | TextField | +| `showValid` | | `boolean` | `false` | Optional property to indicate the valid state should be shown. | TextField | +| `showValidity` | | `'valid' \| 'invalid' \| undefined` | | Whether to show the validity state. | TextField | +| `size` | | `TextFieldSize \| undefined` | `md` | The size of the input. | TextField | +| `touched` | | `boolean` | `false` | A control is marked touched once the user has triggered a blur event on it. | TextField | +| `type` | | `'email' \| 'number' \| 'tel' \| 'text' \| 'url' \| 'password'` | `'text'` | The input type. Only text types are valid here. For other types, see their respective components. | TextField | +| `valid` | | `boolean` | | Returns whether the form control is valid or not. | TextField | +| `validationMessage` | | `string` | | String representing a localized (by the browser) message that describes the validation constraints that the control does not satisfy (if any). The string is empty if the control is not a candidate for constraint validation, or it satisfies its constraints. For true localization, see `getLocalizedValidationMessage()` instead. | TextField | +| `validity` | | `ValidityState` | | Returns the validity state the control is in. | TextField | +| `validityState` | | `'valid' \| 'invalid' \| 'pending'` | | Returns the current validity state. | TextField | +| `value` | | `unknown \| undefined` | | The value for this form control. | TextField | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ---------------------------------- | -------------- | +| `clear` | | Clears the value in the input element. | | `void` | | +| `getLocalizedValidationMessage` | | This returns a localized validation message. It does not support all `ValidityState` properties, since some require more context than we have here. If you need to support more, you can override this method in your own form control. | | `string` | TextField | +| `onBlur` | protected | | | `void` | TextField | +| `onFocus` | protected | | | `void` | TextField | +| `onInput` | protected | | `{ target }: Event & { target: HTMLInputElement }` | `void` | TextField | +| `onKeydown` | protected | | `event: KeyboardEvent` | `void` | TextField | +| `onSlotChange` | protected | | `event: Event & { target: HTMLSlotElement }` | `void` | TextField | +| `parseValue` | | Method that converts the string value in the input to the specified type T. Override this method if you want to convert the value in a different way. Throw an error if the value is invalid. | `value: string` | `T \| undefined` | TextField | +| `renderInputSlot` | | Render the input slot; separate method so it is composable for child components. | | `TemplateResult` | TextField | +| `renderPrefix` | | Renders the prefix slot; can be overridden to customize the prefix. | | `TemplateResult` | TextField | +| `renderSuffix` | | Renders the suffix slot; can be overridden to customize the suffix. | | `TemplateResult \| typeof nothing` | TextField | +| `reportValidity` | | Returns whether the control is valid. If the control is invalid, calling this will also cause an `invalid` event to be dispatched. After calling this, the control will also report the validity to the user. | | `boolean` | TextField | +| `setAttributesTarget` | | | `target: Element` | `void` | TextField | +| `setCustomValidity` | | Sets a custom validation message for the form control. If the message is not an empty string, that will make the control invalid. By setting it to an empty string again, you can make the control valid again. | `message: string \| Promise` | `void` | TextField | + +### Events + +| Name | Type | Description | Inherited From | +| -------------------- | ------------------------------- | -------------------------------------------------------------------------------------------- | -------------- | +| `sl-clear` | `SlClearEvent` | Emits when the user clears the field. | | +| `sl-search` | `SlSearchEvent` | Emits when the user presses enter. | | +| `sl-form-control` | `SlFormControlEvent` | Emits when the form control is added to the DOM. | TextField | +| `sl-update-state` | `SlUpdateStateEvent` | Emits when the UI state (dirty, pristine, touched or untouched) of the form control changes. | TextField | +| `sl-update-validity` | `SlUpdateValidityEvent` | Emits when the validity of the form control changes. | TextField | +| `sl-validate` | `SlValidateEvent` | Emits when the form control can be validated. | TextField | +| `sl-blur` | `SlBlurEvent` | Emits when the focus leaves the component. | TextField | +| `sl-change` | `SlChangeEvent` | Emits when the value changes. | TextField | +| `sl-focus` | `SlFocusEvent` | Emits when the component gains focus. | TextField | + +### Attributes + +| Name | Field | Inherited From | +| ----------------- | -------------- | -------------- | +| `custom-validity` | customValidity | TextField | +| `name` | name | TextField | +| `show-validity` | showValidity | TextField | +| `aria-disabled` | | TextField | +| `aria-label` | | TextField | +| `aria-labelledby` | | TextField | +| `aria-required` | | TextField | +| `autocomplete` | autocomplete | TextField | +| `disabled` | disabled | TextField | +| `input-size` | inputSize | TextField | +| `maxlength` | maxLength | TextField | +| `minlength` | minLength | TextField | +| `pattern` | pattern | TextField | +| `placeholder` | placeholder | TextField | +| `readonly` | readonly | TextField | +| `required` | required | TextField | +| `show-valid` | showValid | TextField | +| `size` | size | TextField | +| `type` | type | TextField | +| `value` | value | TextField | + +### CSS Parts + +| Name | Description | +| --------- | ------------------- | +| `wrapper` | The input's wrapper | + +### Slots + +| Name | Description | +| -------- | ------------------------------ | +| `input` | The slot for the input element | +| `prefix` | Content shown before the input | +| `suffix` | Content shown after the input | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------------- | ------------- | ------------------------------------------------------------------------------------------------- | ------- | +| `js` | `SlSearchEvent` | SlSearchEvent | /Users/diana.broeders/Projects/design-system/packages/components/search-field/src/search-field.ts | | +| `js` | `SearchField` | SearchField | /Users/diana.broeders/Projects/design-system/packages/components/search-field/src/search-field.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/select/src/select-button.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/select/src/select-button.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/select/src/select-button.ts`: + +## class: `SelectButton` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| -------------- | ------- | ----------------------------- | ------- | ---------------------------------------------------------- | -------------- | +| `clearable` | | `boolean \| undefined` | | Will display a clear button when an option is selected. | | +| `disabled` | | `boolean \| undefined` | | Whether the button is disabled. | | +| `placeholder` | | `string \| undefined` | | The placeholder for when there is no selected option.s | | +| `required` | | `boolean \| undefined` | | Mirrors the same property on the sl-select parent. | | +| `selected` | | `Option \| null \| undefined` | | The selected option. | | +| `showValid` | | `boolean \| undefined` | | Indicates whether the control should indicate it is valid. | | +| `showValidity` | | `FormControlShowValidity` | | Mirrors the same property on the sl-select parent. | | +| `size` | | `SelectSize \| undefined` | | The size of the parent select. | | + +### Events + +| Name | Type | Description | Inherited From | +| ---------- | -------------- | -------------------------------------------- | -------------- | +| `sl-clear` | `SlClearEvent` | Emits when the user clicks the clear button. | | + +### Attributes + +| Name | Field | Inherited From | +| --------------- | ------------ | -------------- | +| `clearable` | clearable | | +| `disabled` | disabled | | +| `placeholder` | placeholder | | +| `size` | size | | +| `required` | required | | +| `show-valid` | showValid | | +| `show-validity` | showValidity | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------------- | ------------ | -------------------------------------------------------------------------------------------- | ------- | +| `js` | `SelectButton` | SelectButton | /Users/diana.broeders/Projects/design-system/packages/components/select/src/select-button.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/select/src/select.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------ | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/select/src/select.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/select/src/select.ts`: + +## class: `Select`, `sl-select` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| ------------------------ | ------ | --------------------------------------- | +| `ObserveAttributesMixin` | | @sl-design-system/shared | +| `FormControlMixin` | | @sl-design-system/form | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------------- | ------- | -------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | +| `button` | | `SelectButton` | | The button in the light DOM. | | +| `clearable` | | `boolean \| undefined` | | Will display a clear button when an option is selected. | | +| `customValidity` | | `string \| undefined` | | The error message to display when the control is invalid. | FormControlMixin | +| `dirty` | | `boolean` | `false` | A control is dirty if the user has changed the value in the UI. | FormControlMixin | +| `disabled` | | `boolean \| undefined` | | Whether the select is disabled; when set no interaction is possible. | | +| `form` | | `HTMLFormElement \| null` | | The form associated with the control. | FormControlMixin | +| `formValue` | | `unknown` | | The value used when submitting the form. | FormControlMixin | +| `labels` | | `` `NodeListOf` \| null `` | | The labels associated with the control. | FormControlMixin | +| `name` | | `string \| undefined` | | The name of the form control. | FormControlMixin | +| `nativeFormValue` | | `FormValue` | | Returns the form value as used in a native ``. This is always a string, File, FormData or null. | FormControlMixin | +| `placeholder` | | `string \| undefined` | | The placeholder text to show when no option is chosen. | | +| `required` | | `boolean \| undefined` | | Whether the select is a required field. | | +| `rootMarginTop` | | `number` | `0` | The number of pixels from the top of the viewport the select should be hidden on scroll. Use this when there is a sticky header you don't want dropdowns to fall on top of. | | +| `showValid` | | `boolean` | `false` | When set will cause the control to show it is valid after reportValidity is called. | FormControlMixin | +| `showValidity` | | `'valid' \| 'invalid' \| undefined` | | Whether to show the validity state. | FormControlMixin | +| `size` | | `SelectSize \| undefined` | `md` | The size of the select. | | +| `touched` | | `boolean` | `false` | A control is marked touched once the user has triggered a blur event on it. | FormControlMixin | +| `valid` | | `boolean` | | Returns whether the form control is valid or not. | FormControlMixin | +| `validationMessage` | | `string` | | String representing a localized (by the browser) message that describes the validation constraints that the control does not satisfy (if any). The string is empty if the control is not a candidate for constraint validation, or it satisfies its constraints. For true localization, see `getLocalizedValidationMessage()` instead. | FormControlMixin | +| `validity` | | `ValidityState` | | Returns the validity state the control is in. | FormControlMixin | +| `validityState` | | `'valid' \| 'invalid' \| 'pending'` | | Returns the current validity state. | FormControlMixin | +| `value` | | `unknown \| undefined` | | The value for the select, to be used in forms. | FormControlMixin | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------- | ---------------------- | +| `focus` | | | `options: FocusOptions` | `void` | | +| `getLocalizedValidationMessage` | | This returns a localized validation message. It does not support all `ValidityState` properties, since some require more context than we have here. If you need to support more, you can override this method in your own form control. | | `string` | FormControlMixin | +| `reportValidity` | | Returns whether the control is valid. If the control is invalid, calling this will also cause an `invalid` event to be dispatched. After calling this, the control will also report the validity to the user. | | `boolean` | FormControlMixin | +| `setAttributesTarget` | | | `target: Element` | `void` | ObserveAttributesMixin | +| `setCustomValidity` | | Sets a custom validation message for the form control. If the message is not an empty string, that will make the control invalid. By setting it to an empty string again, you can make the control valid again. | `message: string \| Promise` | `void` | FormControlMixin | + +### Events + +| Name | Type | Description | Inherited From | +| -------------------- | ------------------------------- | -------------------------------------------------------------------------------------------- | ---------------- | +| `sl-blur` | `SlBlurEvent` | Emits when the focus leaves the component. | | +| `sl-change` | `SlChangeEvent` | Emits when the value changes. | | +| `sl-focus` | `SlFocusEvent` | Emits when the component gains focus. | | +| `sl-form-control` | `SlFormControlEvent` | Emits when the form control is added to the DOM. | FormControlMixin | +| `sl-update-state` | `SlUpdateStateEvent` | Emits when the UI state (dirty, pristine, touched or untouched) of the form control changes. | FormControlMixin | +| `sl-update-validity` | `SlUpdateValidityEvent` | Emits when the validity of the form control changes. | FormControlMixin | +| `sl-validate` | `SlValidateEvent` | Emits when the form control can be validated. | FormControlMixin | + +### Attributes + +| Name | Field | Inherited From | +| ------------------ | -------------- | ---------------- | +| `aria-describedby` | | | +| `aria-label` | | | +| `aria-labelledby` | | | +| `clearable` | clearable | | +| `disabled` | disabled | | +| `placeholder` | placeholder | | +| `required` | required | | +| `show-valid` | showValid | | +| `size` | size | | +| `hide-margin-top` | rootMarginTop | | +| `value` | value | | +| `custom-validity` | customValidity | FormControlMixin | +| `name` | name | FormControlMixin | +| `show-validity` | showValidity | FormControlMixin | + +### CSS Parts + +| Name | Description | +| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `listbox` | Set `--sl-popover-max-block-size` and/or `--sl-popover-min-block-size` to control the minimum and maximum height of the dropdown (within the limits of the available screen real estate) | + +### Slots + +| Name | Description | +| --------- | ---------------------------------------------------- | +| `default` | Place for `sl-option` and `sl-option-group` elements | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------- | ----------- | ------------------------------------------------------------------------------------- | ------- | +| `js` | `Select` | Select | /Users/diana.broeders/Projects/design-system/packages/components/select/src/select.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/breakpoints.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ----------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/breakpoints.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/browser.ts`: + +## Variables + +| Name | Description | Type | +| ---------- | ----------- | ---- | +| `isSafari` | | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---------- | ----------- | -------------------------------------------------------------------------------------- | ------- | +| `js` | `isSafari` | isSafari | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/browser.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/config.ts`: + +## class: `Config` + +### Static Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------ | ------- | ----------- | --------------------------- | ------------ | -------------- | +| `getConfigSetting` | | | `key: keyof ConfigSettings` | `Promise` | | +| `setConfig` | | | `settings: ConfigSettings` | `void` | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------- | ----------- | ------------------------------------------------------------------------------------- | ------- | +| `js` | `Config` | Config | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/config.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/controllers/anchor.ts`: + +## class: `AnchorController` + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| -------------- | ------- | ------------------------------------ | ------- | ---------------------------------------------------------- | -------------- | +| `arrowElement` | | `string \| HTMLElement \| undefined` | | The arrow pointing from the popover to the anchor element. | | +| `arrowPadding` | | `number \| undefined` | | The padding of the arrow. | | +| `maxWidth` | | `number \| undefined` | | The max width of the popover. | | +| `offset` | | `number \| undefined` | | The offset of the popover to its anchor. | | +| `position` | | `PopoverPosition \| undefined` | | The main position of the popover relative to the anchor. | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------ | ------- | ----------- | ---------- | ------ | -------------- | +| `hostConnected` | | | | `void` | | +| `hostDisconnected` | | | | `void` | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------------ | ---------------- | ------------------------------------------------------------------------------------------------- | ------- | +| `js` | `AnchorController` | AnchorController | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/controllers/anchor.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/controllers/events.ts`: + +## class: `EventsController` + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------ | ------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------ | -------------- | +| `hostConnected` | | | | `void` | | +| `hostDisconnected` | | | | `void` | | +| `listen` | | | `window: Window, type: K, listener: (this: Window, ev: WindowEventMap[K]) => any, options: boolean \| AddEventListenerOptions` | `void` | | +| `listen` | | | `document: Document, type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options: boolean \| AddEventListenerOptions` | `void` | | +| `listen` | | | `element: HTMLElement, type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options: boolean \| AddEventListenerOptions` | `void` | | +| `listen` | | | `element: ShadowRoot, type: K, listener: (this: ShadowRoot, ev: ShadowRootEventMap[K]) => any, options: boolean \| AddEventListenerOptions` | `void` | | +| `listen` | | | `element: MediaQueryList, type: K, listener: (this: ShadowRoot, ev: MediaQueryListEventMap[K]) => any, options: boolean \| AddEventListenerOptions` | `void` | | +| `listen` | | | `element: Element, type: K, listener: (this: Element, ev: GlobalEventHandlersEventMap[K]) => any, options: boolean \| AddEventListenerOptions` | `void` | | +| `listen` | | | `element: Window \| Document \| Element \| HTMLElement \| ShadowRoot \| MediaQueryList, type: string, listener: EventListenerOrEventListenerObject, options: boolean \| AddEventListenerOptions` | `void` | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------------ | ---------------- | ------------------------------------------------------------------------------------------------- | ------- | +| `js` | `EventsController` | EventsController | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/controllers/events.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/controllers/focus-group.ts`: + +## class: `FocusGroupController` + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| -------------------- | --------- | ------------------ | ------- | ----------- | -------------- | +| `cachedElements` | protected | `T[] \| undefined` | | | | +| `currentIndex` | | `number` | | | | +| `direction` | | `DirectionTypes` | | | | +| `directionLength` | | | | | | +| `elementEnterAction` | | | | | | +| `elements` | | `T[]` | | | | +| `focusInElement` | | `T` | | | | +| `focusInIndex` | | `number` | | | | +| `focused` | protected | `boolean` | | | | +| `handleFocusin` | | | | | | +| `handleFocusout` | | | | | | +| `handleKeydown` | | | | | | +| `host` | | `ReactiveElement` | `host` | | | +| `isFocusableElement` | | | | | | +| `offset` | | `number` | `0` | | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ---------------------------- | ------- | ----------- | ------------------------------------------------------------- | --------- | -------------- | +| `acceptsEventCode` | | | `code: string` | `boolean` | | +| `addEventListeners` | | | | `void` | | +| `clearElementCache` | | | `offset` | `void` | | +| `focus` | | | `options: FocusOptions` | `void` | | +| `focusToElement` | | | `element: T` | `void` | | +| `focusToElement` | | | `elementIndex: number` | `void` | | +| `focusToElement` | | | `elementOrIndex: T \| number` | `void` | | +| `hostConnected` | | | | `void` | | +| `hostContainsFocus` | | | | `void` | | +| `hostDisconnected` | | | | `void` | | +| `hostNoLongerContainsFocus` | | | | `void` | | +| `isEventWithinListenerScope` | | | `event: Event` | `boolean` | | +| `isFocusMovingOutOfScope` | | | `event: FocusEvent` | `boolean` | | +| `manage` | | | | `void` | | +| `removeEventListeners` | | | | `void` | | +| `setCurrentIndexCircularly` | | | `diff: number` | `void` | | +| `unmanage` | | | | `void` | | +| `updateWithVirtualizer` | | | `{ elements }: FocusGroupConfig, event: RangeChangedEvent` | `void` | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---------------------- | -------------------- | ------------------------------------------------------------------------------------------------------ | ------- | +| `js` | `FocusGroupController` | FocusGroupController | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/controllers/focus-group.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/controllers/focus-trap.ts`: + +## class: `FocusTrapController` + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------ | ------- | ----------- | ---------------------- | ------ | -------------- | +| `activate` | | | `element: HTMLElement` | `void` | | +| `deactivate` | | | | `void` | | +| `hostDisconnected` | | | | `void` | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------------------- | ------------------- | ----------------------------------------------------------------------------------------------------- | ------- | +| `js` | `FocusTrapController` | FocusTrapController | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/controllers/focus-trap.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/controllers/roving-tabindex.ts`: + +## class: `RovingTabindexController` + +### Superclass + +| Name | Module | Package | +| ---------------------- | ------------------------------------------------------------------------------------------------------- | ------- | +| `FocusGroupController` | //Users/diana.broeders/Projects/design-system/packages/components/shared/src/controllers/focus-group.js | | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| -------------------- | --------- | ------------------ | ------- | ----------- | -------------------- | +| `cachedElements` | protected | `T[] \| undefined` | | | FocusGroupController | +| `currentIndex` | | `number` | | | FocusGroupController | +| `direction` | | `DirectionTypes` | | | FocusGroupController | +| `directionLength` | | | | | FocusGroupController | +| `elementEnterAction` | | | | | FocusGroupController | +| `elements` | | `T[]` | | | FocusGroupController | +| `focusInElement` | | `T` | | | FocusGroupController | +| `focusInIndex` | | `number` | | | FocusGroupController | +| `focused` | protected | `boolean` | | | FocusGroupController | +| `handleFocusin` | | | | | FocusGroupController | +| `handleFocusout` | | | | | FocusGroupController | +| `handleKeydown` | | | | | FocusGroupController | +| `host` | | `ReactiveElement` | `host` | | FocusGroupController | +| `isFocusableElement` | | | | | FocusGroupController | +| `offset` | | `number` | `0` | | FocusGroupController | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ---------------------------- | ------- | ----------- | ------------------------------------------------------------- | --------- | -------------------- | +| `acceptsEventCode` | | | `code: string` | `boolean` | FocusGroupController | +| `addEventListeners` | | | | `void` | FocusGroupController | +| `clearElementCache` | | | `offset` | `void` | FocusGroupController | +| `focus` | | | `options: FocusOptions` | `void` | FocusGroupController | +| `focusToElement` | | | `element: T` | `void` | FocusGroupController | +| `hostConnected` | | | | `void` | FocusGroupController | +| `hostContainsFocus` | | | | `void` | FocusGroupController | +| `hostDisconnected` | | | | `void` | FocusGroupController | +| `hostNoLongerContainsFocus` | | | | `void` | FocusGroupController | +| `hostUpdated` | | | | `void` | | +| `isEventWithinListenerScope` | | | `event: Event` | `boolean` | FocusGroupController | +| `isFocusMovingOutOfScope` | | | `event: FocusEvent` | `boolean` | FocusGroupController | +| `manage` | | | | `void` | FocusGroupController | +| `manageTabindexes` | | | | `void` | | +| `removeEventListeners` | | | | `void` | FocusGroupController | +| `setCurrentIndexCircularly` | | | `diff: number` | `void` | FocusGroupController | +| `unmanage` | | | | `void` | FocusGroupController | +| `updateTabindexes` | | | `getTabIndex: (el: HTMLElement) => UpdateTabIndexes` | `void` | | +| `updateWithVirtualizer` | | | `{ elements }: FocusGroupConfig, event: RangeChangedEvent` | `void` | FocusGroupController | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------- | ------- | +| `js` | `RovingTabindexController` | RovingTabindexController | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/controllers/roving-tabindex.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/controllers/selection.ts`: + +## class: `SelectionController` + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ----------- | ------- | --------- | --------------------- | --------------------------------------------------- | -------------- | +| `multiple` | | `boolean` | `!!options?.multiple` | Whether more than 1 item can be selected at a time. | | +| `selection` | | `Set` | | | | +| `size` | | `number` | `0` | The total number of items in the selection. | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| -------------------- | ------- | ----------- | ---------------------- | ---------------- | -------------- | +| `areAllSelected` | | | | `boolean` | | +| `areSomeSelected` | | | | `boolean` | | +| `deselect` | | | `item: T` | `void` | | +| `deselectAll` | | | | `void` | | +| `isActive` | | | `item: T` | `boolean` | | +| `isSelectAllToggled` | | | | `boolean` | | +| `isSelected` | | | `item: T` | `boolean` | | +| `select` | | | `item: T` | `void` | | +| `selectAll` | | | | `void` | | +| `toggle` | | | `item: T` | `void` | | +| `toggleActive` | | | `item: T \| undefined` | `T \| undefined` | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------------------ | ---------------------- | ---------------------------------------------------------------------------------------------------- | ------- | +| `js` | `SlSelectionChangeEvent` | SlSelectionChangeEvent | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/controllers/selection.ts | | +| `js` | `SelectionController` | SelectionController | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/controllers/selection.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/controllers/shortcut.ts`: + +## class: `ShortcutController` + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------ | ------- | ----------- | -------------------------- | ------ | -------------- | +| `bind` | | | `shortcuts: KeyBindingMap` | `void` | | +| `hostConnected` | | | | `void` | | +| `hostDisconnected` | | | | `void` | | +| `unbind` | | | | `void` | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------------------- | ------------------ | --------------------------------------------------------------------------------------------------- | ------- | +| `js` | `ShortcutController` | ShortcutController | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/controllers/shortcut.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/css.ts`: + +## Variables + +| Name | Description | Type | +| ------------------------ | ----------- | -------- | +| `firstFocusableSelector` | | `string` | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------------------ | ---------------------- | ---------------------------------------------------------------------------------- | ------- | +| `js` | `breakpoints` | breakpoints | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/css.ts | | +| `js` | `firstFocusableSelector` | firstFocusableSelector | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/css.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/decorators/base.ts`: + +## Functions + +| Name | Description | Parameters | Return | +| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | +| `decorateProperty` | Helper for decorating a property that is compatible with both TypeScript and Babel decorators. The optional `finisher` can be used to perform work on the class. The optional `descriptor` should return a PropertyDescriptor to install for the given property. | `{ + finisher, + descriptor + }: { + finisher?: ((ctor: typeof ReactiveElement, property: PropertyKey) => void) \| null; + descriptor?(property: PropertyKey): PropertyDescriptor; + }, finisher: function, descriptor: function` | `ClassElement\|void` | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------------ | ---------------- | ---------------------------------------------------------------------------------------------- | ------- | +| `js` | `decorateProperty` | decorateProperty | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/decorators/base.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/decorators/event.ts`: + +## class: `EventEmitter` + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------ | ------- | ----------- | ------------------------------------------------ | --------- | -------------- | +| `emit` | | | `value: T \| T['detail'], options: EventOptions` | `boolean` | | + +
+ +## Variables + +| Name | Description | Type | +| ------- | ----------- | ------- | +| `event` | | `Event` | + +
+ +## Functions + +| Name | Description | Parameters | Return | +| ------- | ----------- | ----------------------- | ------ | +| `event` | | `options: EventOptions` | `any` | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------------- | ------------ | ----------------------------------------------------------------------------------------------- | ------- | +| `js` | `EventEmitter` | EventEmitter | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/decorators/event.ts | | +| `js` | `event` | event | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/decorators/event.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/decorators/observe.ts`: + +## Functions + +| Name | Description | Parameters | Return | +| --------- | ----------- | --------------------------------------------------- | ------ | +| `observe` | | `propertyName: string, lifecycle: ObserveLifecycle` | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------------- | ------- | +| `js` | `observe` | observe | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/decorators/observe.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/directives/anchor.ts`: + +## class: `AnchorDirective` + +### Superclass + +| Name | Module | Package | +| ----------- | ------ | ---------------- | +| `Directive` | | lit/directive.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------- | ------- | ----------------------------------- | ------- | ----------- | -------------- | +| `observer` | | `IntersectionObserver \| undefined` | | | | + +
+ +## Variables + +| Name | Description | Type | +| -------- | ----------- | ---- | +| `anchor` | | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ----------------- | --------------- | ------------------------------------------------------------------------------------------------ | ------- | +| `js` | `AnchorDirective` | AnchorDirective | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/directives/anchor.ts | | +| `js` | `anchor` | anchor | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/directives/anchor.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/dom.ts`: + +## Functions + +| Name | Description | Parameters | Return | +| ------------------------ | ------------------------------------------------------------------------------------------ | --------------------------------- | ---------------------------------- | +| `closestElementComposed` | | `element: Node, selector: K` | `HTMLElementTagNameMap[K] \| null` | +| `closestElementComposed` | | `element: Node, selector: string` | `E \| null` | +| `closestElementComposed` | Returns the closest element that matches the selector, across all parent shadow roots. | `element: Node, selector: string` | `Element \| null` | +| `getScrollParent` | Returns the first scrollable parent of the given element. | `element: Element` | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------------------ | ---------------------- | ---------------------------------------------------------------------------------- | ------- | +| `js` | `getScrollParent` | getScrollParent | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/dom.ts | | +| `js` | `closestElementComposed` | closestElementComposed | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/dom.ts | | +| `js` | `closestElementComposed` | closestElementComposed | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/dom.ts | | +| `js` | `closestElementComposed` | closestElementComposed | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/dom.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/events/blur.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------- | ----------- | ------------------------------------------------------------------------------------------ | ------- | +| `js` | `SlBlurEvent` | SlBlurEvent | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/events/blur.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/events/change.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------------- | ------------- | -------------------------------------------------------------------------------------------- | ------- | +| `js` | `SlChangeEvent` | SlChangeEvent | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/events/change.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/events/clear.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------------- | ------------ | ------------------------------------------------------------------------------------------- | ------- | +| `js` | `SlClearEvent` | SlClearEvent | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/events/clear.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/events/focus.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------------- | ------------ | ------------------------------------------------------------------------------------------- | ------- | +| `js` | `SlFocusEvent` | SlFocusEvent | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/events/focus.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/events/select.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------------- | ------------- | -------------------------------------------------------------------------------------------- | ------- | +| `js` | `SlSelectEvent` | SlSelectEvent | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/events/select.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/events/toggle.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------------- | ------------- | -------------------------------------------------------------------------------------------- | ------- | +| `js` | `SlToggleEvent` | SlToggleEvent | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/events/toggle.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/mixins.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------------------------------- | ------------------------------- | ------------------------------------ | ------- | +| `js` | `Locale` | Locale | ./mixins/locale-mixin.js | | +| `js` | `LocaleMixin` | LocaleMixin | ./mixins/locale-mixin.js | | +| `js` | `ObserveAttributesMixinInterface` | ObserveAttributesMixinInterface | ./mixins/observe-attributes-mixin.js | | +| `js` | `ObserveAttributesMixin` | ObserveAttributesMixin | ./mixins/observe-attributes-mixin.js | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/mixins/locale-mixin.ts`: + +## mixin: `LocaleMixin` + +### Parameters + +| Name | Type | Default | Description | +| ------------- | ---- | ------- | ----------- | +| `constructor` | `T` | | | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| -------- | ------- | -------- | ------- | ----------------------- | -------------- | +| `locale` | | `string` | | The component's locale. | | + +### Attributes + +| Name | Field | Inherited From | +| -------- | ------ | -------------- | +| `locale` | locale | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------- | ----------- | -------------------------------------------------------------------------------------------------- | ------- | +| `js` | `LocaleMixin` | LocaleMixin | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/mixins/locale-mixin.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/mixins/observe-attributes-mixin.ts`: + +## mixin: `ObserveAttributesMixin` + +### Parameters + +| Name | Type | Default | Description | +| -------------------- | ---------- | ------- | ----------- | +| `constructor` | `T` | | | +| `observedAttributes` | `string[]` | `[]` | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| --------------------- | ------- | ----------- | ----------------- | ------ | -------------- | +| `setAttributesTarget` | | | `target: Element` | `void` | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------------------ | ---------------------- | -------------------------------------------------------------------------------------------------------------- | ------- | +| `js` | `ObserveAttributesMixin` | ObserveAttributesMixin | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/mixins/observe-attributes-mixin.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/path.ts`: + +## Functions + +| Name | Description | Parameters | Return | +| ----------------- | ----------- | ------------------------------------------------- | ------------ | +| `getNameByPath` | | `path: string` | `string` | +| `getStringByPath` | | `obj: T, path: P` | `string` | +| `getValueByPath` | | `obj: T, path: P` | `Path` | +| `setValueByPath` | | `obj: T, path: P, value: Path \| undefined` | `void` | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ----------------- | --------------- | ----------------------------------------------------------------------------------- | ------- | +| `js` | `getNameByPath` | getNameByPath | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/path.ts | | +| `js` | `getStringByPath` | getStringByPath | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/path.ts | | +| `js` | `getValueByPath` | getValueByPath | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/path.ts | | +| `js` | `setValueByPath` | setValueByPath | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/path.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/popover.ts`: + +## Functions + +| Name | Description | Parameters | Return | +| ----------------- | ----------- | ------------------------------------------------------------------------ | -------------- | +| `isPopoverOpen` | | `element: HTMLElement` | `boolean` | +| `positionPopover` | | `element: HTMLElement, anchor: Element, options: PositionPopoverOptions` | `(() => void)` | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ----------------- | --------------- | -------------------------------------------------------------------------------------- | ------- | +| `js` | `isPopoverOpen` | isPopoverOpen | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/popover.ts | | +| `js` | `positionPopover` | positionPopover | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/popover.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/string.ts`: + +## Functions + +| Name | Description | Parameters | Return | +| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------ | +| `camelize` | Returns the lowerCamelCase form of a string. \```javascript camelize('innerHTML') // 'innerHTML' camelize('action_name') // 'actionName' camelize('css-class-name') // 'cssClassName' camelize('object.path.name') // 'objectPathName' camelize('my favorite items') // 'myFavoriteItems' camelize('My Favorite Items') // 'myFavoriteItems' \``` | `str: string` | | +| `capitalize` | Returns the Capitalized form of a string \```javascript capitalize('innerHTML') // 'InnerHTML' capitalize('action_name') // 'Action_name' capitalize('css-class-name') // 'Css-class-name' capitalize('my favorite items') // 'My favorite items' \``` | `str: string` | | +| `classify` | Returns the UpperCamelCase form of a string. \```javascript classify('innerHTML') // 'InnerHTML' classify('action_name') // 'ActionName' classify('css-class-name') // 'CssClassName' classify('my favorite items') // 'MyFavoriteItems' \``` | `str: string` | | +| `dasherize` | Replaces underscores, spaces, or camelCase with dashes. \```javascript dasherize('innerHTML') // 'inner-html' dasherize('action_name') // 'action-name' dasherize('css-class-name') // 'css-class-name' dasherize('my favorite items') // 'my-favorite-items' \``` | `str: string` | | +| `decamelize` | Converts a camelized string into all lower case separated by underscores. \```javascript decamelize('innerHTML') // 'inner_html' decamelize('action_name') // 'action_name' decamelize('css-class-name') // 'css-class-name' decamelize('my favorite items') // 'my favorite items' \``` | `str: string` | | +| `humanize` | Returns the Humanized form of a string \```javascript humanize('innerHTML') // 'Inner html' humanize('action_name') // 'Action name' humanize('css-class-name') // 'Css class name' humanize('my favorite items') // 'My favorite items' \``` | `str: string` | | +| `underscore` | More general than decamelize. Returns the lower\\_case\\_and\\_underscored form of a string. \```javascript underscore('innerHTML') // 'inner_html' underscore('action_name') // 'action_name' underscore('css-class-name') // 'css_class_name' underscore('my favorite items') // 'my_favorite_items' \``` | `str: string` | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------ | ----------- | ------------------------------------------------------------------------------------- | ------- | +| `js` | `camelize` | camelize | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/string.ts | | +| `js` | `capitalize` | capitalize | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/string.ts | | +| `js` | `classify` | classify | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/string.ts | | +| `js` | `dasherize` | dasherize | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/string.ts | | +| `js` | `decamelize` | decamelize | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/string.ts | | +| `js` | `humanize` | humanize | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/string.ts | | +| `js` | `underscore` | underscore | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/string.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/shared/src/vendor/tinykeys.ts`: + +## Functions + +| Name | Description | Parameters | Return | +| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ------------------- | +| `createKeybindingsHandler` | Creates an event listener for handling keybindings. | `keyBindingMap: KeyBindingMap, options: KeyBindingHandlerOptions` | `EventListener` | +| `parseKeybinding` | Parses a "Key Binding String" into its parts grammar = `` \ = ` ...` \ = `` or `+` \ = `++...` | `str: string` | `KeyBindingPress[]` | +| `tinykeys` | Subscribes to keybindings. Returns an unsubscribe method. | `target: Window \| HTMLElement, keyBindingMap: KeyBindingMap, options: KeyBindingOptions` | `() => void` | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------------------------- | ------------------------ | ---------------------------------------------------------------------------------------------- | ------- | +| `js` | `parseKeybinding` | parseKeybinding | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/vendor/tinykeys.ts | | +| `js` | `createKeybindingsHandler` | createKeybindingsHandler | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/vendor/tinykeys.ts | | +| `js` | `tinykeys` | tinykeys | /Users/diana.broeders/Projects/design-system/packages/components/shared/src/vendor/tinykeys.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/skeleton/src/skeleton.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ---------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/skeleton/src/skeleton.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/skeleton/src/skeleton.ts`: + +## class: `Skeleton`, `sl-skeleton` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| --------- | ------- | ------------------------------------------- | ----------- | ------------------- | -------------- | +| `effect` | | `'none' \| 'shimmer' \| 'pulse' \| 'sheen'` | `'shimmer'` | Skeleton's effect. | | +| `variant` | | `'circle' \| 'default'` | `'default'` | Skeleton's variant. | | + +### Attributes + +| Name | Field | Inherited From | +| --------- | ------- | -------------- | +| `effect` | effect | | +| `variant` | variant | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---------- | ----------- | ----------------------------------------------------------------------------------------- | ------- | +| `js` | `Skeleton` | Skeleton | /Users/diana.broeders/Projects/design-system/packages/components/skeleton/src/skeleton.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/spinner/src/spinner.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | -------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/spinner/src/spinner.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/spinner/src/spinner.ts`: + +## class: `Spinner`, `sl-spinner` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| --------- | ------- | ----------------------------- | ------- | ------------------------------------------------------------------------------------------ | -------------- | +| `size` | | `SpinnerSize \| undefined` | | The size of the spinner. Defaults to `md` with css properties if not attribute is not set. | | +| `variant` | | `SpinnerVariant \| undefined` | | The spinner variant. | | + +### Attributes + +| Name | Field | Inherited From | +| --------- | ------- | -------------- | +| `size` | size | | +| `variant` | variant | | + +### CSS Properties + +| Name | Default | Description | +| ------------------- | ------- | ----------------------------------------------------- | +| `--sl-spinner-size` | | The size of the spinner, defaults to `md` if not set. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | --------------------------------------------------------------------------------------- | ------- | +| `js` | `Spinner` | Spinner | /Users/diana.broeders/Projects/design-system/packages/components/spinner/src/spinner.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/switch/src/switch.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------ | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/switch/src/switch.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/switch/src/switch.ts`: + +## class: `Switch`, `sl-switch` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| ------------------------ | ------ | --------------------------------------- | +| `ObserveAttributesMixin` | | @sl-design-system/shared | +| `FormControlMixin` | | @sl-design-system/form | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------------- | ------- | -------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | +| `checked` | | `boolean \| undefined` | | Whether the switch is on or off. | | +| `customValidity` | | `string \| undefined` | | The error message to display when the control is invalid. | FormControlMixin | +| `dirty` | | `boolean` | `false` | A control is dirty if the user has changed the value in the UI. | FormControlMixin | +| `disabled` | | `boolean \| undefined` | | Whether the switch is disabled; when set no interaction is possible. | | +| `form` | | `HTMLFormElement \| null` | | The form associated with the control. | FormControlMixin | +| `formValue` | | `unknown` | | The value used when submitting the form. | FormControlMixin | +| `iconOff` | | `string \| undefined` | | Custom icon in "off" state. | | +| `iconOn` | | `string \| undefined` | | Custom icon in "on" state. | | +| `input` | | `HTMLInputElement` | | The input element in the light DOM. | | +| `labels` | | `` `NodeListOf` \| null `` | | The labels associated with the control. | FormControlMixin | +| `name` | | `string \| undefined` | | The name of the form control. | FormControlMixin | +| `nativeFormValue` | | `FormValue` | | Returns the form value as used in a native ``. This is always a string, File, FormData or null. | FormControlMixin | +| `reverse` | | `boolean \| undefined` | | Whether the toggle should be shown *after* the text. | | +| `showValid` | | `boolean` | `false` | Optional property to indicate the valid state should be shown. | FormControlMixin | +| `showValidity` | | `'valid' \| 'invalid' \| undefined` | | Whether to show the validity state. | FormControlMixin | +| `size` | | `SwitchSize \| undefined` | `md` | The size of the switch. | | +| `touched` | | `boolean` | `false` | A control is marked touched once the user has triggered a blur event on it. | FormControlMixin | +| `valid` | | `boolean` | | Returns whether the form control is valid or not. | FormControlMixin | +| `validationMessage` | | `string` | | String representing a localized (by the browser) message that describes the validation constraints that the control does not satisfy (if any). The string is empty if the control is not a candidate for constraint validation, or it satisfies its constraints. For true localization, see `getLocalizedValidationMessage()` instead. | FormControlMixin | +| `validity` | | `ValidityState` | | Returns the validity state the control is in. | FormControlMixin | +| `validityState` | | `'valid' \| 'invalid' \| 'pending'` | | Returns the current validity state. | FormControlMixin | +| `value` | | `unknown \| undefined` | | The value of the switch when the switch is checked. See the formValue property for easy access. | FormControlMixin | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------- | ---------------------- | +| `blur` | | | | `void` | | +| `focus` | | | | `void` | | +| `getLocalizedValidationMessage` | | This returns a localized validation message. It does not support all `ValidityState` properties, since some require more context than we have here. If you need to support more, you can override this method in your own form control. | | `string` | FormControlMixin | +| `reportValidity` | | Returns whether the control is valid. If the control is invalid, calling this will also cause an `invalid` event to be dispatched. After calling this, the control will also report the validity to the user. | | `boolean` | FormControlMixin | +| `setAttributesTarget` | | | `target: Element` | `void` | ObserveAttributesMixin | +| `setCustomValidity` | | Sets a custom validation message for the form control. If the message is not an empty string, that will make the control invalid. By setting it to an empty string again, you can make the control valid again. | `message: string \| Promise` | `void` | FormControlMixin | + +### Events + +| Name | Type | Description | Inherited From | +| -------------------- | -------------------------- | -------------------------------------------------------------------------------------------- | ---------------- | +| `sl-blur` | `SlBlurEvent` | Emits when the component loses focus. | | +| `sl-change` | `SlChangeEvent` | Emits when the checked state changes. | | +| `sl-focus` | `SlFocusEvent` | Emits when the component receives focus. | | +| `sl-form-control` | `SlFormControlEvent` | Emits when the form control is added to the DOM. | FormControlMixin | +| `sl-update-state` | `SlUpdateStateEvent` | Emits when the UI state (dirty, pristine, touched or untouched) of the form control changes. | FormControlMixin | +| `sl-update-validity` | `SlUpdateValidityEvent` | Emits when the validity of the form control changes. | FormControlMixin | +| `sl-validate` | `SlValidateEvent` | Emits when the form control can be validated. | FormControlMixin | + +### Attributes + +| Name | Field | Inherited From | +| ----------------- | -------------- | ---------------- | +| `aria-disabled` | | | +| `aria-label` | | | +| `aria-labelledby` | | | +| `checked` | checked | | +| `disabled` | disabled | | +| `icon-off` | iconOff | | +| `icon-on` | iconOn | | +| `reverse` | reverse | | +| `size` | size | | +| `value` | value | | +| `custom-validity` | customValidity | FormControlMixin | +| `name` | name | FormControlMixin | +| `show-validity` | showValidity | FormControlMixin | + +### Slots + +| Name | Description | +| --------- | -------------------------------------------------------------------------------------------------------- | +| `default` | Text label of the switch. Technically there are no limits what can be put here; text, images, icons etc. | +| `input` | The slot for the input element | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------- | ----------- | ------------------------------------------------------------------------------------- | ------- | +| `js` | `Switch` | Switch | /Users/diana.broeders/Projects/design-system/packages/components/switch/src/switch.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tabs/src/tab-group.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/tabs/src/tab-group.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tabs/src/tab-group.ts`: + +## class: `TabGroup`, `sl-tab-group` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ----------- | ------- | ---------------------------- | ------- | ------------------------------------------------------------- | -------------- | +| `alignTabs` | | `TabsAlignment \| undefined` | | The alignment of tabs within the wrapper. | | +| `vertical` | | `boolean \| undefined` | | Renders the tabs vertically instead of the default horizontal | | + +### Events + +| Name | Type | Description | Inherited From | +| --------------- | ------------------ | --------------------------------------------- | -------------- | +| `sl-tab-change` | `SlTabChangeEvent` | Emits when the tab has been selected/changed. | | + +### Attributes + +| Name | Field | Inherited From | +| ------------ | --------- | -------------- | +| `align-tabs` | alignTabs | | +| `vertical` | vertical | | + +### CSS Properties + +| Name | Default | Description | +| ------------------------------------- | ------- | ------------------------------------ | +| `--sl-tab-group-menu-min-inline-size` | | The minimum inline size of the menu. | +| `--sl-tab-group-menu-max-inline-size` | | The maximum inline size of the menu. | + +### CSS Parts + +| Name | Description | +| ----------- | ---------------------------------------------------------------- | +| `container` | The container for the tabs. | +| `wrapper` | Wraps the scroll container and menu button. | +| `scroller` | The scroll container of the tabs. | +| `tablist` | The tablist element which also contains the active tab indicator | +| `panels` | The container for the tab panels. | + +### Slots + +| Name | Description | +| --------- | ------------------------------------- | +| `default` | Tab panels or other tab content here. | +| `tabs` | The tabs to display. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------------ | ---------------- | -------------------------------------------------------------------------------------- | ------- | +| `js` | `SlTabChangeEvent` | SlTabChangeEvent | /Users/diana.broeders/Projects/design-system/packages/components/tabs/src/tab-group.ts | | +| `js` | `TabGroup` | TabGroup | /Users/diana.broeders/Projects/design-system/packages/components/tabs/src/tab-group.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tabs/src/tab-panel.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/tabs/src/tab-panel.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tabs/src/tab-panel.ts`: + +## class: `TabPanel`, `sl-tab-panel` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Slots + +| Name | Description | +| --------- | ---------------------------------- | +| `default` | A place for the tab panel content. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---------- | ----------- | -------------------------------------------------------------------------------------- | ------- | +| `js` | `TabPanel` | TabPanel | /Users/diana.broeders/Projects/design-system/packages/components/tabs/src/tab-panel.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tabs/src/tab.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/tabs/src/tab.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tabs/src/tab.ts`: + +## class: `Tab`, `sl-tab` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------- | ------- | ---------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `disabled` | | `boolean \| undefined` | | Whether the tab item is disabled. | | +| `href` | | `string \| undefined` | | When set, it will render the tab contents in a link tag. Use this when you want to render the tab contents using a router and to make the tab navigatable by URL. | | +| `selected` | | `boolean \| undefined` | | Whether the tab item is selected. | | + +### Attributes + +| Name | Field | Inherited From | +| ---------- | -------- | -------------- | +| `disabled` | disabled | | +| `href` | href | | +| `selected` | selected | | + +### Slots + +| Name | Description | +| ---------- | ------------------------------------------------------- | +| `default` | A place for the tab group content. | +| `icon` | Icon shown on the left side of the component. | +| `badge` | A place for badge component. | +| `subtitle` | Subtitle of the tab, containing additional information. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ----- | ----------- | -------------------------------------------------------------------------------- | ------- | +| `js` | `Tab` | Tab | /Users/diana.broeders/Projects/design-system/packages/components/tabs/src/tab.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tag/src/tag-list.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ----------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/tag/src/tag-list.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tag/src/tag-list.ts`: + +## class: `TagList`, `sl-tag-list` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| --------- | ------- | ------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `size` | | `TagSize \| undefined` | | The size of the tag-list (determines size of tags inside the tag-list). Defaults to `md`. | | +| `stacked` | | `boolean \| undefined` | | This will hide tags that do not fit inside the available space when set. It will also display a counter that indicates the number of hidden tags. | | +| `variant` | | `TagVariant \| undefined` | `'neutral'` | The variant of the tag-list and tags inside. | | + +### Attributes + +| Name | Field | Inherited From | +| --------- | ------- | -------------- | +| `size` | size | | +| `stacked` | stacked | | +| `variant` | variant | | + +### Slots + +| Name | Description | +| --------- | ------------------- | +| `default` | The place for tags. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------ | ------- | +| `js` | `TagList` | TagList | /Users/diana.broeders/Projects/design-system/packages/components/tag/src/tag-list.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tag/src/tag.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------ | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/tag/src/tag.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tag/src/tag.ts`: + +## class: `Tag`, `sl-tag` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ----------- | ------- | ------------------------- | ----------- | --------------------------------------------------------------------------- | -------------- | +| `disabled` | | `boolean \| undefined` | | Whether the tag component is disabled, when set no interaction is possible. | | +| `removable` | | `boolean \| undefined` | | Whether the tag component is removable. | | +| `size` | | `TagSize \| undefined` | `'md'` | The size of the tag. | | +| `variant` | | `TagVariant \| undefined` | `'neutral'` | The variant of the tag. | | + +### Events + +| Name | Type | Description | Inherited From | +| ----------- | --------------- | ------------------------------ | -------------- | +| `sl-remove` | `SlRemoveEvent` | Emits when the tag is removed. | | + +### Attributes + +| Name | Field | Inherited From | +| ----------- | --------- | -------------- | +| `disabled` | disabled | | +| `removable` | removable | | +| `size` | size | | +| `variant` | variant | | + +### Slots + +| Name | Description | +| --------- | -------------- | +| `default` | The tag label. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------------- | ------------- | ------------------------------------------------------------------------------- | ------- | +| `js` | `SlRemoveEvent` | SlRemoveEvent | /Users/diana.broeders/Projects/design-system/packages/components/tag/src/tag.ts | | +| `js` | `Tag` | Tag | /Users/diana.broeders/Projects/design-system/packages/components/tag/src/tag.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/text-area/src/text-area.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------------ | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/text-area/src/text-area.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/text-area/src/text-area.ts`: + +## class: `TextArea`, `sl-text-area` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| ------------------------ | ------ | --------------------------------------- | +| `ObserveAttributesMixin` | | @sl-design-system/shared | +| `FormControlMixin` | | @sl-design-system/form | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------------- | ------- | ---------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | +| `autocomplete` | | `typeof HTMLTextAreaElement.prototype.autocomplete \| undefined` | | Specifies which type of data the browser can use to pre-fill the textarea. NOTE: Declare the type this way so it is backwards compatible with 4.9.5, which we still use in `@sl-design-system/angular`. | | +| `customValidity` | | `string \| undefined` | | The error message to display when the control is invalid. | FormControlMixin | +| `dirty` | | `boolean` | `false` | A control is dirty if the user has changed the value in the UI. | FormControlMixin | +| `disabled` | | `boolean \| undefined` | | Whether the textarea is disabled; when set no interaction is possible. | | +| `form` | | `HTMLFormElement \| null` | | The form associated with the control. | FormControlMixin | +| `formValue` | | `unknown` | | The value used when submitting the form. | FormControlMixin | +| `labels` | | `` `NodeListOf` \| null `` | | The labels associated with the control. | FormControlMixin | +| `maxLength` | | `number \| undefined` | | Maximum length (number of characters). | | +| `minLength` | | `number \| undefined` | | Minimum length (number of characters). | | +| `name` | | `string \| undefined` | | The name of the form control. | FormControlMixin | +| `nativeFormValue` | | `FormValue` | | Returns the form value as used in a native ``. This is always a string, File, FormData or null. | FormControlMixin | +| `placeholder` | | `string \| undefined` | | Placeholder text in the textarea. | | +| `readonly` | | `boolean \| undefined` | | Whether you can interact with the textarea or if it is just a static, readonly display. | | +| `required` | | `boolean \| undefined` | | Whether the textarea is a required field. | | +| `resize` | | `ResizeType` | `'vertical'` | The way the textarea can be resized. | | +| `rows` | | `number \| undefined` | | The number of rows the textarea should initially have. If not set, the browser defaults to 2 rows. | | +| `showValid` | | `boolean` | `false` | When set will cause the control to show it is valid after reportValidity is called. | FormControlMixin | +| `showValidity` | | `'valid' \| 'invalid' \| undefined` | | Whether to show the validity state. | FormControlMixin | +| `size` | | `TextAreaSize \| undefined` | `md` | The size of the textarea. | | +| `textarea` | | `HTMLTextAreaElement` | | The textarea in the light DOM. | | +| `touched` | | `boolean` | `false` | A control is marked touched once the user has triggered a blur event on it. | FormControlMixin | +| `valid` | | `boolean` | | Returns whether the form control is valid or not. | FormControlMixin | +| `validationMessage` | | `string` | | String representing a localized (by the browser) message that describes the validation constraints that the control does not satisfy (if any). The string is empty if the control is not a candidate for constraint validation, or it satisfies its constraints. For true localization, see `getLocalizedValidationMessage()` instead. | FormControlMixin | +| `validity` | | `ValidityState` | | Returns the validity state the control is in. | FormControlMixin | +| `validityState` | | `'valid' \| 'invalid' \| 'pending'` | | Returns the current validity state. | FormControlMixin | +| `value` | | `unknown \| undefined` | `''` | The value for the textarea. | FormControlMixin | +| `wrap` | | `WrapType` | `'soft'` | The way text should be wrapped during form submission. | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------- | ---------------------- | +| `focus` | | | | `void` | | +| `getLocalizedValidationMessage` | | This returns a localized validation message. It does not support all `ValidityState` properties, since some require more context than we have here. If you need to support more, you can override this method in your own form control. | | `string` | FormControlMixin | +| `reportValidity` | | Returns whether the control is valid. If the control is invalid, calling this will also cause an `invalid` event to be dispatched. After calling this, the control will also report the validity to the user. | | `boolean` | FormControlMixin | +| `setAttributesTarget` | | | `target: Element` | `void` | ObserveAttributesMixin | +| `setCustomValidity` | | Sets a custom validation message for the form control. If the message is not an empty string, that will make the control invalid. By setting it to an empty string again, you can make the control valid again. | `message: string \| Promise` | `void` | FormControlMixin | + +### Events + +| Name | Type | Description | Inherited From | +| -------------------- | ----------------------- | -------------------------------------------------------------------------------------------- | ---------------- | +| `sl-blur` | `SlBlurEvent` | Emits when the focus leaves the component. | | +| `sl-change` | `SlChangeEvent` | Emits when the value changes. | | +| `sl-focus` | `SlFocusEvent` | Emits when the component gains focus. | | +| `sl-form-control` | `SlFormControlEvent` | Emits when the form control is added to the DOM. | FormControlMixin | +| `sl-update-state` | `SlUpdateStateEvent` | Emits when the UI state (dirty, pristine, touched or untouched) of the form control changes. | FormControlMixin | +| `sl-update-validity` | `SlUpdateValidityEvent` | Emits when the validity of the form control changes. | FormControlMixin | +| `sl-validate` | `SlValidateEvent` | Emits when the form control can be validated. | FormControlMixin | + +### Attributes + +| Name | Field | Inherited From | +| ----------------- | -------------- | ---------------- | +| `aria-disabled` | | | +| `aria-label` | | | +| `aria-labelledby` | | | +| `aria-required` | | | +| `autocomplete` | autocomplete | | +| `disabled` | disabled | | +| `maxlength` | maxLength | | +| `minlength` | minLength | | +| `placeholder` | placeholder | | +| `readonly` | readonly | | +| `required` | required | | +| `resize` | resize | | +| `rows` | rows | | +| `show-valid` | showValid | | +| `size` | size | | +| `value` | value | | +| `wrap` | wrap | | +| `custom-validity` | customValidity | FormControlMixin | +| `name` | name | FormControlMixin | +| `show-validity` | showValidity | FormControlMixin | + +### CSS Properties + +| Name | Default | Description | +| --------------------- | ------- | ---------------------------------------------------- | +| `--sl-text-area-rows` | | The number of rows initially visible in the textarea | + +### Slots + +| Name | Description | +| ---------- | --------------------------------- | +| `textarea` | The slot for the textarea element | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---------- | ----------- | ------------------------------------------------------------------------------------------- | ------- | +| `js` | `TextArea` | TextArea | /Users/diana.broeders/Projects/design-system/packages/components/text-area/src/text-area.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/text-field/src/text-field.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | -------------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/text-field/src/text-field.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/text-field/src/text-field.ts`: + +## class: `TextField`, `sl-text-field` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| ------------------------ | ------ | --------------------------------------- | +| `ObserveAttributesMixin` | | @sl-design-system/shared | +| `FormControlMixin` | | @sl-design-system/form | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ------------------- | ------- | --------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | +| `autocomplete` | | `string \| undefined` | | Specifies which type of data the browser can use to pre-fill the input. | | +| `customValidity` | | `string \| undefined` | | The error message to display when the control is invalid. | FormControlMixin | +| `dirty` | | `boolean` | `false` | A control is dirty if the user has changed the value in the UI. | FormControlMixin | +| `disabled` | | `boolean \| undefined` | | Whether the text field is disabled; when set no interaction is possible. | | +| `form` | | `HTMLFormElement \| null` | | The form associated with the control. | FormControlMixin | +| `formValue` | | `unknown` | | The value used when submitting the form. | FormControlMixin | +| `formattedValue` | | `string` | | The formatted value, to be used as the input value. | | +| `input` | | `HTMLInputElement` | | The input element in the light DOM. | | +| `inputSize` | | `number \| undefined` | | The size attribute of the input element. | | +| `labels` | | `` `NodeListOf` \| null `` | | The labels associated with the control. | FormControlMixin | +| `maxLength` | | `number \| undefined` | | Maximum length (number of characters). | | +| `minLength` | | `number \| undefined` | | Minimum length (number of characters). | | +| `name` | | `string \| undefined` | | The name of the form control. | FormControlMixin | +| `nativeFormValue` | | `FormValue` | | Returns the form value as used in a native ``. This is always a string, File, FormData or null. | FormControlMixin | +| `pattern` | | `string \| undefined` | | This will validate the value of the input using the given pattern. | | +| `placeholder` | | `string \| undefined` | | Placeholder text in the input. | | +| `rawValue` | | `string` | `''` | The raw (string) value of the input. | | +| `readonly` | | `boolean \| undefined` | | Whether you can interact with the input or if it is just a static, readonly display. | | +| `required` | | `boolean \| undefined` | | Whether the text field is a required field. | | +| `showValid` | | `boolean` | `false` | When set will cause the control to show it is valid after reportValidity is called. | FormControlMixin | +| `showValidity` | | `'valid' \| 'invalid' \| undefined` | | Whether to show the validity state. | FormControlMixin | +| `size` | | `TextFieldSize \| undefined` | `md` | The size of the input. | | +| `touched` | | `boolean` | `false` | A control is marked touched once the user has triggered a blur event on it. | FormControlMixin | +| `type` | | `'email' \| 'number' \| 'tel' \| 'text' \| 'url' \| 'password'` | `'text'` | The input type. Only text types are valid here. For other types, see their respective components. | | +| `valid` | | `boolean` | | Returns whether the form control is valid or not. | FormControlMixin | +| `validationMessage` | | `string` | | String representing a localized (by the browser) message that describes the validation constraints that the control does not satisfy (if any). The string is empty if the control is not a candidate for constraint validation, or it satisfies its constraints. For true localization, see `getLocalizedValidationMessage()` instead. | FormControlMixin | +| `validity` | | `ValidityState` | | Returns the validity state the control is in. | FormControlMixin | +| `validityState` | | `'valid' \| 'invalid' \| 'pending'` | | Returns the current validity state. | FormControlMixin | +| `value` | | `unknown \| undefined` | | The value of the text field. | FormControlMixin | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ---------------------------------- | ---------------------- | +| `getLocalizedValidationMessage` | | This returns a localized validation message. It does not support all `ValidityState` properties, since some require more context than we have here. If you need to support more, you can override this method in your own form control. | | `string` | FormControlMixin | +| `onBlur` | protected | | | `void` | | +| `onFocus` | protected | | | `void` | | +| `onInput` | protected | | `{ target }: Event & { target: HTMLInputElement }` | `void` | | +| `onKeydown` | protected | | `event: KeyboardEvent` | `void` | | +| `onSlotChange` | protected | | `event: Event & { target: HTMLSlotElement }` | `void` | | +| `parseValue` | | Method that converts the string value in the input to the specified type T. Override this method if you want to convert the value in a different way. Throw an error if the value is invalid. | `value: string` | `T \| undefined` | | +| `renderInputSlot` | | Render the input slot; separate method so it is composable for child components. | | `TemplateResult` | | +| `renderPrefix` | | Renders the prefix slot; can be overridden to customize the prefix. | | `TemplateResult \| typeof nothing` | | +| `renderSuffix` | | Renders the suffix slot; can be overridden to customize the suffix. | | `TemplateResult \| typeof nothing` | | +| `reportValidity` | | Returns whether the control is valid. If the control is invalid, calling this will also cause an `invalid` event to be dispatched. After calling this, the control will also report the validity to the user. | | `boolean` | FormControlMixin | +| `setAttributesTarget` | | | `target: Element` | `void` | ObserveAttributesMixin | +| `setCustomValidity` | | Sets a custom validation message for the form control. If the message is not an empty string, that will make the control invalid. By setting it to an empty string again, you can make the control valid again. | `message: string \| Promise` | `void` | FormControlMixin | + +### Events + +| Name | Type | Description | Inherited From | +| -------------------- | ------------------------------- | -------------------------------------------------------------------------------------------- | ---------------- | +| `sl-blur` | `SlBlurEvent` | Emits when the focus leaves the component. | | +| `sl-change` | `SlChangeEvent` | Emits when the value changes. | | +| `sl-focus` | `SlFocusEvent` | Emits when the component gains focus. | | +| `sl-form-control` | `SlFormControlEvent` | Emits when the form control is added to the DOM. | FormControlMixin | +| `sl-update-state` | `SlUpdateStateEvent` | Emits when the UI state (dirty, pristine, touched or untouched) of the form control changes. | FormControlMixin | +| `sl-update-validity` | `SlUpdateValidityEvent` | Emits when the validity of the form control changes. | FormControlMixin | +| `sl-validate` | `SlValidateEvent` | Emits when the form control can be validated. | FormControlMixin | + +### Attributes + +| Name | Field | Inherited From | +| ----------------- | -------------- | ---------------- | +| `aria-disabled` | | | +| `aria-label` | | | +| `aria-labelledby` | | | +| `aria-required` | | | +| `autocomplete` | autocomplete | | +| `disabled` | disabled | | +| `input-size` | inputSize | | +| `maxlength` | maxLength | | +| `minlength` | minLength | | +| `pattern` | pattern | | +| `placeholder` | placeholder | | +| `readonly` | readonly | | +| `required` | required | | +| `show-valid` | showValid | | +| `size` | size | | +| `type` | type | | +| `value` | value | | +| `custom-validity` | customValidity | FormControlMixin | +| `name` | name | FormControlMixin | +| `show-validity` | showValidity | FormControlMixin | + +### CSS Parts + +| Name | Description | +| --------- | ------------------- | +| `wrapper` | The input's wrapper | + +### Slots + +| Name | Description | +| -------- | ------------------------------ | +| `prefix` | Content shown before the input | +| `input` | The slot for the input element | +| `suffix` | Content shown after the input | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ----------- | ----------- | --------------------------------------------------------------------------------------------- | ------- | +| `js` | `TextField` | TextField | /Users/diana.broeders/Projects/design-system/packages/components/text-field/src/text-field.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/toggle-button/src/toggle-button.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | -------------------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/toggle-button/src/toggle-button.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/toggle-button/src/toggle-button.ts`: + +## class: `ToggleButton`, `sl-toggle-button` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------- | ------- | ------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------- | -------------- | +| `disabled` | | `boolean \| undefined` | | Whether the button is disabled; when set no interaction is possible. | | +| `fill` | | `ToggleButtonFill \| undefined` | | The variant of the toggle-button. | | +| `pressed` | | `boolean` | `false` | The pressed state of the button. Set the default value, so the \`aria-pressed` attribute is added to the element. | | +| `size` | | `ToggleButtonSize \| undefined` | | The size of the button. | | + +### Events + +| Name | Type | Description | Inherited From | +| ----------- | ------------------------ | --------------------------------------- | -------------- | +| `sl-toggle` | `SlToggleEvent` | Emits when the button has been toggled. | | + +### Attributes + +| Name | Field | Inherited From | +| ---------- | -------- | -------------- | +| `disabled` | disabled | | +| `fill` | fill | | +| `pressed` | pressed | | +| `size` | size | | + +### Slots + +| Name | Description | +| --------- | ------------------------------------------------- | +| `default` | The icon shown in the default state of the button | +| `pressed` | The icon shown in the pressed state of the button | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------------- | ------------ | --------------------------------------------------------------------------------------------------- | ------- | +| `js` | `ToggleButton` | ToggleButton | /Users/diana.broeders/Projects/design-system/packages/components/toggle-button/src/toggle-button.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/toggle-group/src/toggle-group.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------------------ | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/toggle-group/src/toggle-group.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/toggle-group/src/toggle-group.ts`: + +## class: `ToggleGroup`, `sl-toggle-group` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------- | ------- | ------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `disabled` | | `boolean \| undefined` | | If set, will disable all buttons in the group. | | +| `multiple` | | `boolean \| undefined` | | By default, only a single toggle button inside the group can be active. This means that the group will automatically deactivate the other buttons when one is toggled. When set to true multiple buttons can be active at the same time. In this case the group does nothing when a button is toggled. Use this mode if you want to handle the toggling of buttons yourself. | | +| `size` | | `ToggleButtonSize \| undefined` | | Determines the size of all buttons in the group. | | + +### Attributes + +| Name | Field | Inherited From | +| ---------- | -------- | -------------- | +| `disabled` | disabled | | +| `multiple` | multiple | | +| `size` | size | | + +### Slots + +| Name | Description | +| --------- | ------------------------------------------------------------------------------------------------------------------ | +| `default` | The default slot for toggle buttons. For toggle group there is a possibility to use toggle buttons with text only. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------- | ----------- | ------------------------------------------------------------------------------------------------- | ------- | +| `js` | `ToggleGroup` | ToggleGroup | /Users/diana.broeders/Projects/design-system/packages/components/toggle-group/src/toggle-group.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tool-bar/src/tool-bar-divider.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------------------ | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/tool-bar/src/tool-bar-divider.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tool-bar/src/tool-bar-divider.ts`: + +## class: `ToolBarDivider`, `sl-tool-bar-divider` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---------------- | -------------- | ------------------------------------------------------------------------------------------------- | ------- | +| `js` | `ToolBarDivider` | ToolBarDivider | /Users/diana.broeders/Projects/design-system/packages/components/tool-bar/src/tool-bar-divider.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tool-bar/src/tool-bar.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ---------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/tool-bar/src/tool-bar.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tool-bar/src/tool-bar.ts`: + +## class: `ToolBar`, `sl-tool-bar` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------- | ------- | ------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `align` | | `'start' \| 'end' \| undefined` | | The horizontal alignment within the tool-bar. | | +| `disabled` | | `boolean \| undefined` | | If true, the tool-bar is disabled and cannot be interacted with. | | +| `noBorder` | | `boolean \| undefined` | | If true, will cause the tool bar to not have a border; useful when embedding the tool-bar inside another component. FIXME: The border on this component should be removed and done by the component embedding the toolbar | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ---------------- | ------- | ----------- | ------------------- | ---------------- | -------------- | +| `renderMenuItem` | | | `item: ToolBarItem` | `TemplateResult` | | + +### Attributes + +| Name | Field | Inherited From | +| ----------- | -------- | -------------- | +| `align` | align | | +| `disabled` | disabled | | +| `no-border` | noBorder | | + +### CSS Parts + +| Name | Description | +| --------- | ----------------------------------------------------- | +| `wrapper` | The wrapper element that contains the tool bar items. | + +### Slots + +| Name | Description | +| ---- | ------------------- | +| | The tool bar items. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ----------------------------------------------------------------------------------------- | ------- | +| `js` | `ToolBar` | ToolBar | /Users/diana.broeders/Projects/design-system/packages/components/tool-bar/src/tool-bar.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tooltip/src/tooltip-directive.ts`: + +## class: `TooltipDirective` + +### Superclass + +| Name | Module | Package | +| ---------------- | ------ | ---------------------- | +| `AsyncDirective` | | lit/async-directive.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| --------- | ------- | -------------------------------------- | ------- | ----------- | -------------- | +| `content` | | `unknown \| undefined` | | | | +| `part` | | `ElementPart \| undefined` | | | | +| `tooltip` | | `Tooltip \| (() => void) \| undefined` | | | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| --------------- | ------- | ----------- | ---------- | ------ | -------------- | +| `disconnected` | | | | `void` | | +| `reconnected` | | | | `void` | | +| `renderContent` | | | | `void` | | + +
+ +## Variables + +| Name | Description | Type | +| --------- | ----------- | ---- | +| `tooltip` | | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------------------ | ---------------- | ------------------------------------------------------------------------------------------------- | ------- | +| `js` | `TooltipDirective` | TooltipDirective | /Users/diana.broeders/Projects/design-system/packages/components/tooltip/src/tooltip-directive.ts | | +| `js` | `tooltip` | tooltip | /Users/diana.broeders/Projects/design-system/packages/components/tooltip/src/tooltip-directive.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tooltip/src/tooltip.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | -------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/tooltip/src/tooltip.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tooltip/src/tooltip.ts`: + +## class: `Tooltip`, `sl-tooltip` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Static Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| ------ | ------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------------ | -------------- | +| `lazy` | | To attach the `sl-tooltip` to the DOM tree and anchor element | `target: Element, callback: (target: Tooltip) => void, options: TooltipOptions` | `() => void` | | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------- | -------------- | +| `maxWidth` | | `number \| undefined` | | The maximum width of the tooltip. | | +| `position` | | `'top' \| 'right' \| 'bottom' \| 'left' \| 'top-start' \| 'top-end' \| 'right-start' \| 'right-end' \| 'bottom-start' \| 'bottom-end' \| 'left-start' \| 'left-end'` | `'top'` | Position of the tooltip relative to its anchor. | | + +### Attributes + +| Name | Field | Inherited From | +| ----------- | -------- | -------------- | +| `max-width` | maxWidth | | +| `position` | position | | + +### Slots + +| Name | Description | +| --------- | --------------------------------- | +| `default` | The slot for the tooltip content. | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | --------------------------------------------------------------------------------------- | ------- | +| `js` | `Tooltip` | Tooltip | /Users/diana.broeders/Projects/design-system/packages/components/tooltip/src/tooltip.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tree/src/flat-tree-data-source.ts`: + +## class: `FlatTreeDataSource` + +### Superclass + +| Name | Module | Package | +| ---------------- | ---------------------------------------------------------------------------------------------- | ------- | +| `TreeDataSource` | //Users/diana.broeders/Projects/design-system/packages/components/tree/src/tree-data-source.js | | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ----------- | ------- | -------------------------------------- | ------- | --------------------------------------------------------------------- | -------------- | +| `filters` | | `Map>` | | | DataSource | +| `items` | | `ViewModel[]` | | The filtered & sorted array of view models. | DataSource | +| `nodes` | | `Array>` | | A hierarchical representation of the items in the tree. | TreeDataSource | +| `selection` | | | | The current selection of tree node(s). | TreeDataSource | +| `selects` | | | | Indicates whether the tree model allows single or multiple selection. | TreeDataSource | +| `size` | | `number` | | Total number of items in this data source. | DataSource | +| `sort` | | `DataSourceSort \| undefined` | | | DataSource | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------------------------ | -------------- | +| `addFilter` | | | `id: string, pathOrFilter: T, value: string \| string[]` | `void` | DataSource | +| `collapse` | | Collapses a tree node. | `node: TreeDataSourceNode, emitEvent` | `void` | TreeDataSource | +| `collapseAll` | | Collapses all expandable tree nodes. | | `void` | TreeDataSource | +| `collapseDescendants` | | Collapses all descendants of a given tree node. | `node: TreeDataSourceNode` | `void` | TreeDataSource | +| `deselect` | | Deselects the given node and any children. | `node: TreeDataSourceNode, emitEvent` | `void` | TreeDataSource | +| `deselectAll` | | Deselects all nodes in the tree. | | `void` | TreeDataSource | +| `expand` | | Expands a tree node. | `node: TreeDataSourceNode, emitEvent` | `void` | TreeDataSource | +| `expandAll` | | Expands all expandable tree nodes. | | `Promise` | TreeDataSource | +| `expandDescendants` | | Expands all descendants of a given tree node. | `node: TreeDataSourceNode` | `void` | TreeDataSource | +| `removeFilter` | | | `id: string` | `void` | DataSource | +| `removeSort` | | | | `void` | DataSource | +| `select` | | Selects the given node and any children. | `node: TreeDataSourceNode, emitEvent` | `void` | TreeDataSource | +| `selectAll` | | Selects all nodes in the tree. | | `void` | TreeDataSource | +| `setSort` | | | `id: string, pathOrSorter: T, direction: DataSourceSortDirection` | `void` | DataSource | +| `toViewArray` | | Flattens the tree nodes to an array based on the expansion state. | | `Array>` | TreeDataSource | +| `toggle` | | Toggles the expansion state of a tree node. You can optionally force the state to a specific value using the `force` parameter. The `emitEvent` parameter determines whether the model should emit an `sl-update` event after changing the state. | `node: TreeDataSourceNode, force: boolean, emitEvent: boolean` | `void` | TreeDataSource | +| `toggleDescendants` | | Toggles the expansion state of all descendants of a given tree node. | `node: TreeDataSourceNode, force: boolean` | `void` | TreeDataSource | + +### Events + +| Name | Type | Description | Inherited From | +| ----------- | ------------- | ----------- | -------------- | +| `sl-update` | `CustomEvent` | | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------------------- | ------------------ | -------------------------------------------------------------------------------------------------- | ------- | +| `js` | `FlatTreeDataSource` | FlatTreeDataSource | /Users/diana.broeders/Projects/design-system/packages/components/tree/src/flat-tree-data-source.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tree/src/indent-guides.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ----------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/tree/src/indent-guides.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tree/src/indent-guides.ts`: + +## class: `IndentGuides` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ----------------- | ------- | ---------------------- | ------- | ------------------------------------------------------------------ | -------------- | +| `expandable` | | `boolean \| undefined` | | Wether the parent tree node is expandable. | | +| `lastNodeInLevel` | | `boolean \| undefined` | | Whether this node is the last one on this level; used for styling. | | +| `level` | | `number` | `0` | Level of indentation. | | + +### Attributes + +| Name | Field | Inherited From | +| -------------------- | --------------- | -------------- | +| `expandable` | expandable | | +| `last-node-in-level` | lastNodeInLevel | | +| `level` | level | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | -------------- | ------------ | ------------------------------------------------------------------------------------------ | ------- | +| `js` | `IndentGuides` | IndentGuides | /Users/diana.broeders/Projects/design-system/packages/components/tree/src/indent-guides.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tree/src/nested-tree-data-source.ts`: + +## class: `NestedTreeDataSource` + +### Superclass + +| Name | Module | Package | +| ---------------- | ---------------------------------------------------------------------------------------------- | ------- | +| `TreeDataSource` | //Users/diana.broeders/Projects/design-system/packages/components/tree/src/tree-data-source.js | | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ----------- | ------- | -------------------------------------- | ------- | --------------------------------------------------------------------- | -------------- | +| `filters` | | `Map>` | | | DataSource | +| `items` | | `ViewModel[]` | | The filtered & sorted array of view models. | DataSource | +| `nodes` | | `Array>` | | A hierarchical representation of the items in the tree. | TreeDataSource | +| `selection` | | | | The current selection of tree node(s). | TreeDataSource | +| `selects` | | | | Indicates whether the tree model allows single or multiple selection. | TreeDataSource | +| `size` | | `number` | | Total number of items in this data source. | DataSource | +| `sort` | | `DataSourceSort \| undefined` | | | DataSource | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------------------------ | -------------- | +| `addFilter` | | | `id: string, pathOrFilter: T, value: string \| string[]` | `void` | DataSource | +| `collapse` | | Collapses a tree node. | `node: TreeDataSourceNode, emitEvent` | `void` | TreeDataSource | +| `collapseAll` | | Collapses all expandable tree nodes. | | `void` | TreeDataSource | +| `collapseDescendants` | | Collapses all descendants of a given tree node. | `node: TreeDataSourceNode` | `void` | TreeDataSource | +| `deselect` | | Deselects the given node and any children. | `node: TreeDataSourceNode, emitEvent` | `void` | TreeDataSource | +| `deselectAll` | | Deselects all nodes in the tree. | | `void` | TreeDataSource | +| `expand` | | Expands a tree node. | `node: TreeDataSourceNode, emitEvent` | `void` | TreeDataSource | +| `expandAll` | | Expands all expandable tree nodes. | | `Promise` | TreeDataSource | +| `expandDescendants` | | Expands all descendants of a given tree node. | `node: TreeDataSourceNode` | `void` | TreeDataSource | +| `removeFilter` | | | `id: string` | `void` | DataSource | +| `removeSort` | | | | `void` | DataSource | +| `select` | | Selects the given node and any children. | `node: TreeDataSourceNode, emitEvent` | `void` | TreeDataSource | +| `selectAll` | | Selects all nodes in the tree. | | `void` | TreeDataSource | +| `setSort` | | | `id: string, pathOrSorter: T, direction: DataSourceSortDirection` | `void` | DataSource | +| `toViewArray` | | Flattens the tree nodes to an array based on the expansion state. | | `Array>` | TreeDataSource | +| `toggle` | | Toggles the expansion state of a tree node. You can optionally force the state to a specific value using the `force` parameter. The `emitEvent` parameter determines whether the model should emit an `sl-update` event after changing the state. | `node: TreeDataSourceNode, force: boolean, emitEvent: boolean` | `void` | TreeDataSource | +| `toggleDescendants` | | Toggles the expansion state of all descendants of a given tree node. | `node: TreeDataSourceNode, force: boolean` | `void` | TreeDataSource | + +### Events + +| Name | Type | Description | Inherited From | +| ----------- | ------------- | ----------- | -------------- | +| `sl-update` | `CustomEvent` | | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---------------------- | -------------------- | ---------------------------------------------------------------------------------------------------- | ------- | +| `js` | `NestedTreeDataSource` | NestedTreeDataSource | /Users/diana.broeders/Projects/design-system/packages/components/tree/src/nested-tree-data-source.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tree/src/tree-data-source.ts`: + +## class: `TreeDataSource` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ----------------------------- | +| `DataSource` | | @sl-design-system/data-source | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ----------- | ------- | -------------------------------------- | ------- | --------------------------------------------------------------------- | -------------- | +| `filters` | | `Map>` | | | DataSource | +| `items` | | `ViewModel[]` | | The filtered & sorted array of view models. | DataSource | +| `nodes` | | `Array>` | | A hierarchical representation of the items in the tree. | | +| `selection` | | | | The current selection of tree node(s). | | +| `selects` | | | | Indicates whether the tree model allows single or multiple selection. | | +| `size` | | `number` | | Total number of items in this data source. | DataSource | +| `sort` | | `DataSourceSort \| undefined` | | | DataSource | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------------------------ | -------------- | +| `addFilter` | | | `id: string, pathOrFilter: T, value: string \| string[]` | `void` | DataSource | +| `collapse` | | Collapses a tree node. | `node: TreeDataSourceNode, emitEvent` | `void` | | +| `collapseAll` | | Collapses all expandable tree nodes. | | `void` | | +| `collapseDescendants` | | Collapses all descendants of a given tree node. | `node: TreeDataSourceNode` | `void` | | +| `deselect` | | Deselects the given node and any children. | `node: TreeDataSourceNode, emitEvent` | `void` | | +| `deselectAll` | | Deselects all nodes in the tree. | | `void` | | +| `expand` | | Expands a tree node. | `node: TreeDataSourceNode, emitEvent` | `void` | | +| `expandAll` | | Expands all expandable tree nodes. | | `Promise` | | +| `expandDescendants` | | Expands all descendants of a given tree node. | `node: TreeDataSourceNode` | `void` | | +| `removeFilter` | | | `id: string` | `void` | DataSource | +| `removeSort` | | | | `void` | DataSource | +| `select` | | Selects the given node and any children. | `node: TreeDataSourceNode, emitEvent` | `void` | | +| `selectAll` | | Selects all nodes in the tree. | | `void` | | +| `setSort` | | | `id: string, pathOrSorter: T, direction: DataSourceSortDirection` | `void` | DataSource | +| `toViewArray` | | Flattens the tree nodes to an array based on the expansion state. | | `Array>` | | +| `toggle` | | Toggles the expansion state of a tree node. You can optionally force the state to a specific value using the `force` parameter. The `emitEvent` parameter determines whether the model should emit an `sl-update` event after changing the state. | `node: TreeDataSourceNode, force: boolean, emitEvent: boolean` | `void` | | +| `toggleDescendants` | | Toggles the expansion state of all descendants of a given tree node. | `node: TreeDataSourceNode, force: boolean` | `void` | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---------------- | -------------- | --------------------------------------------------------------------------------------------- | ------- | +| `js` | `TreeDataSource` | TreeDataSource | /Users/diana.broeders/Projects/design-system/packages/components/tree/src/tree-data-source.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tree/src/tree-node.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | ------------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/tree/src/tree-node.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tree/src/tree-node.ts`: + +## class: `TreeNode` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ----------------- | ------- | ------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `checked` | | `boolean \| undefined` | | Determines whether the checkbox is checked or not. | | +| `disabled` | | `boolean \| undefined` | | Whether the node is disabled. | | +| `expandable` | | `boolean \| undefined` | | If true, will render an indicator whether the node is expanded or collapsed. | | +| `expanded` | | `boolean \| undefined` | | Indicates whether the node is expanded or collapsed. | | +| `hideGuides` | | `boolean \| undefined` | | Hides the indentation guides when set. | | +| `indeterminate` | | `boolean \| undefined` | | Indeterminate state of the checkbox. Used when not all children are checked. | | +| `lastNodeInLevel` | | `boolean \| undefined` | | Whether this node is the last one on this level; used for styling. | | +| `level` | | `number` | `0` | The depth level of this node, 0 being the root of the tree. | | +| `node` | | `TreeDataSourceNode \| undefined` | | The tree model node. | | +| `selected` | | `boolean \| undefined` | | Whether the node is currently selected. | | +| `selects` | | `'single' \| 'multiple' \| undefined` | | If you are able to select one or more tree nodes (at the same time). | | +| `type` | | `TreeNodeType \| undefined` | `node` | The type of tree node: \- 'node': A regular tree node. \- 'placeholder': A placeholder node used for loading children. \- 'skeleton': A skeleton node used for loading individual nodes. | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| -------- | ------- | ----------- | ---------- | ------ | -------------- | +| `toggle` | | | `expanded` | `void` | | + +### Events + +| Name | Type | Description | Inherited From | +| ----------- | -------------------------------------- | --------------------------------------------------------------- | -------------- | +| `sl-change` | `SlChangeEvent` | Emits when the checked state of the checkbox changes. | | +| `sl-select` | `SlSelectEvent>` | Emits when the user clicks a the wrapper part of the tree node. | | +| `sl-toggle` | `SlToggleEvent` | Emits when the expanded state changes. | | + +### Attributes + +| Name | Field | Inherited From | +| -------------------- | --------------- | -------------- | +| `checked` | checked | | +| `disabled` | disabled | | +| `expandable` | expandable | | +| `expanded` | expanded | | +| `hide-guides` | hideGuides | | +| `indeterminate` | indeterminate | | +| `last-node-in-level` | lastNodeInLevel | | +| `level` | level | | +| `selected` | selected | | +| `selects` | selects | | +| `type` | type | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ---------- | ----------- | -------------------------------------------------------------------------------------- | ------- | +| `js` | `TreeNode` | TreeNode | /Users/diana.broeders/Projects/design-system/packages/components/tree/src/tree-node.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tree/src/tree.scss.ts`: + +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | --------- | ----------- | -------------------------------------------------------------------------------------- | ------- | +| `js` | `default` | | /Users/diana.broeders/Projects/design-system/packages/components/tree/src/tree.scss.ts | | + +# `/Users/diana.broeders/Projects/design-system/packages/components/tree/src/tree.ts`: + +## class: `Tree`, `sl-tree` + +### Superclass + +| Name | Module | Package | +| ------------ | ------ | ------- | +| `LitElement` | | lit | + +### Mixins + +| Name | Module | Package | +| --------------------- | ------ | --------------------------------------- | +| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | + +### Fields + +| Name | Privacy | Type | Default | Description | Inherited From | +| ---------------- | ------- | ------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `dataSource` | | | | The model for the tree. | | +| `hideGuides` | | `boolean \| undefined` | | Hides the indentation guides when set. | | +| `layoutComplete` | | | | Use this if you want to wait until lit-virtualizer has finished the rendering the tree nodes. This can be useful in unit tests for example. | | +| `renderer` | | `TreeItemRenderer \| undefined` | | Custom renderer function for tree items. | | +| `scopedElements` | | `Record \| undefined` | | The custom elements used for rendering this tree. If you are using a custom renderer to render the tree nodes, any custom elements you use in the renderer need to be specified via this property. Otherwise those custom elements will not initialize, since the tree uses a Scoped Custom Element Registry. | | + +### Methods + +| Name | Privacy | Description | Parameters | Return | Inherited From | +| -------------- | ------- | ----------- | ------------------------------------------------------------- | ---------------- | -------------- | +| `renderItem` | | | `item: TreeDataSourceNode` | `TemplateResult` | | +| `scrollToNode` | | | `node: TreeDataSourceNode, options: ScrollIntoViewOptions` | `void` | | + +### Events + +| Name | Type | Description | Inherited From | +| ----------- | -------------------------------------- | ---------------------------------------- | -------------- | +| `sl-select` | `SlSelectEvent>` | Emits when the user selects a tree node. | | + +### Attributes + +| Name | Field | Inherited From | +| ------------- | ---------- | -------------- | +| `hide-guides` | hideGuides | | + +
+ +## Exports + +| Kind | Name | Declaration | Module | Package | +| ---- | ------ | ----------- | --------------------------------------------------------------------------------- | ------- | +| `js` | `Tree` | Tree | /Users/diana.broeders/Projects/design-system/packages/components/tree/src/tree.ts | | diff --git a/website/src/_data/tokens/core.json b/website/src/_data/tokens/core.json index 687dac73bb..6b3eef498c 100644 --- a/website/src/_data/tokens/core.json +++ b/website/src/_data/tokens/core.json @@ -2467,6 +2467,16 @@ "type": "Icons", "description": "icon.core.xmark" }, + "circle-xmark": { + "value": "circle-xmark", + "type": "Icons", + "description": "icon.core.circle-xmark" + }, + "circle-xmark-solid": { + "value": "circle-xmark", + "type": "Icons", + "description": "icon.core.circle-xmark-solid" + }, "circle-solid": { "value": "circle", "type": "Icons", @@ -2531,6 +2541,16 @@ "value": "dash", "type": "Icons", "description": "icon.core.dash-solid" + }, + "plus": { + "value": "plus", + "type": "Icons", + "description": "icon.core.plus" + }, + "minus": { + "value": "minus", + "type": "Icons", + "description": "icon.core.minus" } }, "typeset": { diff --git a/website/src/categories/components/combobox/accessibility.md b/website/src/categories/components/combobox/accessibility.md new file mode 100644 index 0000000000..f95c035e6b --- /dev/null +++ b/website/src/categories/components/combobox/accessibility.md @@ -0,0 +1,70 @@ +--- +title: Combobox accessibility +tags: accessibility +eleventyNavigation: + parent: Combobox + key: ComboboxAccessibility +--- + +
+ +## Keyboard interactions + +
+ +|Command|Description| +|-|-| +|Tab|Moves the focus into/outside of the component.| +|Arrow up/down|Moves the active option 1 position up/down. The focus indicator loops, so when you are at the last option and press "down" it will focus on the first option.| +|Arrow left/right|When the combobox supports multiple selection, moves the focus to the tag on the left/right, assuming the caret is already at the beginning of the input.| +|Home/End|Moves the active option to the first/last option.| +|Enter|Toggles the active option.| +|Backspace|When a tag is focused, removes the tag. This is effectively the same as toggling the selected option using the Enter key.| + +{.ds-table .ds-table-align-top} + +
+ +
+ +
+ +## WAI-ARIA + +WAI-ARIA Roles, States, and Properties for a combobox component provide essential information to assistive technologies and screen readers. They convey the combobox component's role, and additional properties to ensure accessibility and a better user experience for individuals using assistive technology. + +### Input + +
+ +|Attribute|Value|Description|User supplied Specifies whether the attribute is always set in the component (no) or it needs to be provided by the developer (yes)| +|-|-|-|-| +|`role`|`'combobox'`|Identifies the input as a combobox.|no| +|`aria-activedescendant`|string|When an option in the listbox is visually indicated as having keyboard focus, refers to that option (by `id`) or when it is already selected.|no| +|`aria-autocomplete`|`both`|Indicates that the combobox can be used for both input and suggestions. The value `both` indicates that the combobox is a multi-function combobox.|no| +|`aria-controls`|string|Identifies the listbox controlled by the combobox.|no| +|`aria-expanded`|boolean|Set to `true` if the listbox (list of options) is visible, `false` if it is hidden.|no| +|`aria-haspopup`|`listbox`|Indicates that the combobox has a listbox popup.|no| +|`aria-label` |string|Defines a string that labels the action that will be performed when the user interacts with the combobox. Needs to be added when the combobox is not wrapped with `sl-form-field` and there is no `sl-label`. |yes| +|`aria-labelledby`|string|Used to connect with single header/element that describes the combobox, when there is no label component connected to.|yes| +|`aria-owns`|string|Identifies the listbox controlled by the combobox.|no| +|`aria-describedby`|string|Indicates the elements that describe the combobox. Used for helper text and validation.|no| + +{.ds-table .ds-table-align-top} + +
+ +### Listbox + +
+ +|Attribute|Value|Description|User supplied Specifies whether the attribute is always set in the component (no) or it needs to be provided by the developer (yes)| +|-|-|-|-| +|`role`|`'listbox'`|Identifies the element as a listbox.|no| +|`aria-multiselectable`|string|Indicates whether the combobox supports multiple selection (`true`), otherwise not present.|no| + +{.ds-table .ds-table-align-top} + +
+ +
\ No newline at end of file diff --git a/website/src/categories/components/combobox/code.md b/website/src/categories/components/combobox/code.md new file mode 100644 index 0000000000..64732ca338 --- /dev/null +++ b/website/src/categories/components/combobox/code.md @@ -0,0 +1,195 @@ +--- +title: Combobox code +tags: code +APIdescription: { + sl-combobox: "The Combobox streamlines single and multiple selections in large datasets of over 15 options. Its autocomplete feature filters options as users type, improving speed and usability. For multiple selections, it displays choices as tags in a tag list, enabling easy management and clear visibility of selected items." +} +eleventyNavigation: + parent: Combobox + key: ComboboxCode +--- + +
+ +
+ + + + + Algebra + Geometry + Calculus + + + English + German + French + Spanish + Chinese + + + + +
+ +
+ + ```html + + + + Algebra + Geometry + Calculus + + + English + German + French + Spanish + Chinese + + + + ``` + +
+ +
+ + + +
+ +## Listbox + +Unlike the native `` element of the embedded text field for accessibility purposes (`aria-controls`, `aria-expanded` and `aria-haspopup`). That can only be done if the listbox is in the same shadow root as the input. + +If you are not rendering the options yourself (see below), the combobox component will automatically wrap the options in an `sl-listbox` element for you. + +
+ +
+ +## Options + +There are two ways you can define the options for the combobox: +1. By using the `sl-option` element inside the `sl-listbox` element yourself +2. By using the `options` property on the `sl-combobox` element + +There is no difference in behavior of the combobox between the two methods. + +### Using `sl-option` elements + +Use this method if you have a small to medium number of options and you want to define them directly in your HTML. + +```html + + + Mathematics + Geography + Physics + History + + +``` + +This is usually the simpler method, but it can become a performance issue if you have a large number of options (more than 100 options). + +### Using the `options` property + +Use this method if you have a large number of options. This method is more performant because it only renders the options that are currently visible. This method can be used with *thousands* of options, without any degradation in performance (this does not mean you should use the combobox component if you have thousands of options, but there are cases where the amount of options is determined by outside factors). + +```js +const options = [ + { value: "0", label: "Mathematics" }, + { value: "1", label: "Geography" }, + { value: "2", label: "Physics" }, + { value: "3", label: "History" } +]; +``` + +```html + +``` + +By using the `option-group-path`, `option-label-path`, `option-selected-path` and `option-value-path` properties, you can specify which properties on the option objects should be used to render the options. + +If you only specify a string array as the `options` property, the combobox will use the strings as both the label and value. + +
+ +
+ +## Grouping options + +You can group options using the `sl-option-group` element. This element can contain `sl-option` elements. It is not recommended to have nested `sl-option-group` elements. + +```html + + + + Algebra + Geometry + Calculus + + + English + German + French + Spanish + Chinese + + + +``` + +If you are using the `options` property, you can group options by setting the `option-group-path` property. The component will automatically group options based on the value of the specified property. The value of the group property will be used to label the group. + +```js +const options = [ + { value: "0", label: "Algebra", group: "Math" }, + { value: "1", label: "Geometry", group: "Math" }, + { value: "2", label: "Calculus", group: "Math" }, + { value: "3", label: "English", group: "Languages" }, + { value: "4", label: "German", group: "Languages" }, + { value: "5", label: "French", group: "Languages" }, + { value: "6", label: "Spanish", group: "Languages" }, + { value: "7", label: "Chinese", group: "Languages" } +]; +``` + +```html + +``` + +
+ +
+ +## Selected + +The combobox component is in single selection mode by default. If you want to enable multiple selection, you can set the `multiple` property on the `sl-combobox` element. The `value` property is, depending on the selection mode, either a single value or an array of values. + +There are two ways you can set the selected options for the combobox: +1. By using the `value` property on the `sl-combobox` element +2. By using the `selected` property on the `sl-option` elements + +It is sometimes easier to set the `selected` property since you are already rendering the options yourself. If you are not rendering the options yourself, you can specify the `group-selected-path` property instead. + +In both cases you could also use the `value` property on the `sl-combobox` element to set the selected options. + +Do not use both methods at the same time. + +
+ +{% include "../component-table.njk" %} diff --git a/website/src/categories/components/combobox/combobox.json b/website/src/categories/components/combobox/combobox.json new file mode 100644 index 0000000000..1b06a754a2 --- /dev/null +++ b/website/src/categories/components/combobox/combobox.json @@ -0,0 +1,11 @@ +{ + "layout": "categories/components/components.njk", + "tags": "combobox", + "componentStatus": "draft", + "componentTagName": [ + { + "name": "Combobox", + "selector": "sl-combobox" + } + ] +} diff --git a/website/src/categories/components/combobox/combobox.md b/website/src/categories/components/combobox/combobox.md new file mode 100644 index 0000000000..d2d2be26af --- /dev/null +++ b/website/src/categories/components/combobox/combobox.md @@ -0,0 +1,14 @@ +--- +title: Combobox +description: The Combobox streamlines single and multiple selections in large datasets of over 15 options. Its autocomplete feature filters options as users type, improving speed and usability. For multiple selections, it displays choices as tags in a tag list, enabling easy management and clear visibility of selected items. +componentType: form +shortDescription: An combobox is an advanced dropdown selection component with autocomplete functionality for efficient and intuitive user input +layout: "categories/components/components.njk" +tags: component +packageName: combobox +storybookCategory: form +eleventyNavigation: + parent: Components + key: Combobox + status: new +--- diff --git a/website/src/categories/components/combobox/usage.md b/website/src/categories/components/combobox/usage.md new file mode 100644 index 0000000000..446973b394 --- /dev/null +++ b/website/src/categories/components/combobox/usage.md @@ -0,0 +1,158 @@ +--- +title: Combobox usage +tags: usage +eleventyNavigation: + parent: Combobox + key: ComboboxUsage +--- + +
+ +
+ + + + Mathematics + Geography + Physics + History + + + +
+ +
+ + ```html + + + Mathematics + Geography + Physics + History + + + ``` + +
+ +
+ + +
+ +## When to Use +Use a Combobox to help users easily search, filter, and select options from long list of options. + +### Large Datasets +Comboboxes are a better choice than checkbox or radio button groups when dealing with more than 15 options. Unlike static groups that can overwhelm users with lengthy lists, Comboboxes save space and simplify the interface by enabling search and filtering. This makes it easier and faster for users to find their desired option, especially in large datasets like cities, products, or categories, without scrolling through extensive lists. + +### Multiple Choices +Our combobox comes with multi-selection capabilities that provide a clear overview of selected options by displaying them within a tag list in the input field of the combobox. This is ideal when users need to choose multiple items, as it ensures selections are visible and easy to manage, allowing users to remove or modify choices effortlessly while keeping the interface organized and intuitive. + +
+ + +
+ +## When Not to Use +Avoid a Combobox when users would benefit more from seeing all options at once for quick selection. + +### Fully Visible Selection: +For lists with fewer than 5 options and when your interface has plenty of space, choose [Checkbox](/categories/components/checkbox/usage) or [Radio Button](/categories/components/radio-group/usage). These components display every option upfront, enabling users to quickly scan and select without extra clicks. + +### Efficient Selection: +When the options range from 5 to 15 items or when screen space is limited, using a [Select](/categories/components/select/usage) component is ideal. It presents all available choices in a concise, accessible format, keeping your UI clean and straightforward. For lists exceeding 15 options, a combobox becomes beneficial by offering search and filtering capabilities to help users navigate a bigger set of choices. + +
+ + +
+ +## Anatomy + +|Item|Name| Description | Optional| +|-|-|-|-| +|1|Input Field |Acts as the primary area for user interaction. Users can type to search, or view the selected options in this field. |no| +|2|Indicator |A visual indicator showing the current state of the dropdown (expanded or collapsed) and guiding users to interact with the Combobox. |no| +|2|Tag List |Displays the chosen options within the input field or as separate tags, ensuring clarity about the current selection. |Yes| +|3|Menu |Displays available options dynamically. These can be split in groups to make navigation through long lists easier, and the choices will be displayed at the top. |no| + +{.ds-table .ds-table-align-top} + +
+ + +
+ +## Variants +Combobox comes in two versions, each suited for specific situations: + +### Single Selection +This variant allows users to choose one option from the list. It’s ideal for scenarios where only one value is required, such as selecting a country or choosing a payment method. Single selection Comboboxes simplify decision-making by focusing the user on one clear choice at a time. + +### Multiple Selection +Enables users to select more than one option, typically representing choices as chips or stacked labels. This variant is useful in contexts like filters, tagging systems, or multi-category selection, where users need the flexibility to combine options without restriction. + +
+ + +
+ +## Options +With these options you can tweak the appearance of the combobox in Figma. They are available in the Design Panel so you can compose the button to exactly fit the user experience need for the uses case you are working on. + +### Combobox Input +|Item|Options|Description| +|-|-|-| +|Open|`'on' & 'off'` |Toggle to display the dropdown list. | +|Size|`'md' & 'lg'` |Defines the size of the Combobox, with medium and large, adjusting its height and padding. | +|Show Placeholder|`'on' & 'off'` | Toggles the visibility of placeholder text in the input field when no value is selected. | +|Show Tags|`'on' & 'off'` |Determines whether selected items are displayed as tags in the input field for multi-selection. | +|Input Value|`input` |Represents the current text entered in the input field, allowing dynamic filtering or user-provided values. | +|Placeholder|`input` |Sets the placeholder text displayed in the input field when it is empty, providing a hint or instruction. | +|Show Focus Ring|`'on', 'of'` |Toggles the focus ring visibility around the Combobox, indicating when it is focused for accessibility. | + +{.ds-table .ds-table-align-top} + +### Combobox Dropdown +|Item|Options|Description| +|-|-|-| +|Size|`'md' & 'lg'` |Defines the size of the Combobox, with medium and large, adjusting its height and padding. | +|Emphasis|`'subtle' & 'bold'`|Adjusts the visual style of the dropdown selection, with `subtle` for minimal emphasis and `bold` for a stronger presence. | +|Items|`'1' to '3'` | Defines the number of visible items in the dropdown list at once. | + +{.ds-table .ds-table-align-top} + +
+ + +
+ +## Behaviors +Let's explore the behavior of the Combobox + +### Grouping Choices +Provides organizational structure for selected items by categorizing them under specific groups or labels. This behavior is especially beneficial in complex datasets where selections belong to distinct categories. + +### Stacked Selections +Displays multiple selected items as a visually stacked list at the top of the dropdow list or within tag list. This approach keeps the interface tidy and ensures users can quickly review or edit their choices without scrolling through a long dropdown. + +### Dynamic Filtering +Filters the options list in real time based on user input, displaying only relevant matches. This functionality enhances usability, particularly for lists with many similar or closely related items. + +### Autocomplete Suggestions +The Combobox provides real-time autocomplete suggestions as users type. This behavior helps narrow down options by displaying only relevant matches, making the selection process faster and more efficient, especially in large datasets. Users can select a suggestion or continue typing to refine their input further. + +
+ + +
+ +## Related components + +- [Menu](/categories/components/menu/usage) +- [Select](/categories/components/select/usage) +- [Tag](/categories/components/tag/usage) + +
diff --git a/website/src/categories/components/tree-view/accessibility.md b/website/src/categories/components/tree-view/accessibility.md new file mode 100644 index 0000000000..d50ef2c7aa --- /dev/null +++ b/website/src/categories/components/tree-view/accessibility.md @@ -0,0 +1,57 @@ +--- +title: Tag accessibility +tags: accessibility +eleventyNavigation: + parent: Tag + key: TagAccessibility +--- +
+ +## Keyboard interactions + +The tag list component uses a roving tabindex. You can focus the first tag in the list by pressing the `Tab` key. After that, you can navigate through the tags using the left and right arrow keys. You can navigate back to the previous tag with left. The focus indicator loops, so when you are at the last option and press right it will focus on the first tag. +In the stacked version of tag-list, when there are hidden tags, you can navigate only through visible tags with arrow keys. The first tag indicates how many hidden tags there are. Using a screen reader, it will announce how many hidden tags there are. + + +When you click on a tag inside a tag-list (as long as it is not disabled), the tag become the active spot for using the keyboard. This means you can start using keyboard navigation right from the tag you just clicked on. + + +When the tag is focused and is removable, it can be removed by pressing the `Delete` or `Backspace` key. This behavior is also announced by the screen reader. + +
+ +
+ +## WAI-ARIA + +WAI-ARIA Roles, States, and Properties for a tag and tag-list component provide essential information to assistive technologies and screen readers. + +### Tag + +
+ +|Attribute|Value|Description|User supplied Specifies whether the attribute is always set in the component (no) or it needs to be provided by the developer (yes)| +|-|-|-|-| +|`role`|`'listitem', 'button'`|Identifies the tag element as a `listitem` when it's used inside the `sl-tag-list` - this role is added automatically. Please provide a role `button` when the tag is interactive, is used to perform an action or is removable and not used inside `sl-tag-list`.|no/yes| +|`aria-description`|string|Defines a string that describes the action that will be performed when the user interacts with the tag or the purpose/more information about the tag. `aria-description` is added automatically for the `removable` tag to describe the ability to use the keyboard to remove the tag.|no| +|`aria-labelledby`|string|Used to label the tag that indicates the number of hidden tags, when the tag list overflows. It contains the `id` of the tooltip. The tooltip lists all the hidden tags.|no| + +{.ds-table .ds-table-align-top} + +
+ +### Tag list + +
+ +|Attribute|Value|Description|User supplied | +|-|-|-|-| +|`role`|`'list'`|Identifies the `tag-list` as a list.|no| +|`aria-label`|string|String that labels the tag list. Use this to label what the tag list indicates, such as the selected options in a combobox.|yes| +|`aria-labelledby`|string|Can be used to connect with a single header/element that describes the tag list.|yes| + +{.ds-table .ds-table-align-top} + +
+ +
diff --git a/website/src/categories/components/tree-view/code.md b/website/src/categories/components/tree-view/code.md new file mode 100644 index 0000000000..819071fe59 --- /dev/null +++ b/website/src/categories/components/tree-view/code.md @@ -0,0 +1,47 @@ +--- +title: Tag code +tags: code +APIdescription: { + sl-tag: "Tag has a range of properties to define the experience in different use cases.", + sl-tag-list: "Tag list component provides properties to define the experience in different use cases, and it is a kind of wrapper for multiple tags." +} +eleventyNavigation: + parent: Tag + key: TagCode +--- + +
+ +
+
+ + Mathematics + Geography + Physics + Biology + Chemistry + Computer Science + English + +
+
+ +
+ + ```html + + Mathematics + ... + English + + ``` + +
+ +
+ +{% include "../component-table.njk" %} diff --git a/website/src/categories/components/tree-view/overview.md b/website/src/categories/components/tree-view/overview.md new file mode 100644 index 0000000000..2eb85ce3c8 --- /dev/null +++ b/website/src/categories/components/tree-view/overview.md @@ -0,0 +1,25 @@ +--- +title: Tag +tags: overview +eleventyNavigation: + parent: Tag + key: TagOverview +--- +
+ +
+ +... + +
+ +
+ +```html + +... + +``` + +
+
diff --git a/website/src/categories/components/tree-view/specs.md b/website/src/categories/components/tree-view/specs.md new file mode 100644 index 0000000000..454f9c362f --- /dev/null +++ b/website/src/categories/components/tree-view/specs.md @@ -0,0 +1,61 @@ +--- +title: Tag specs +tags: specs +eleventyNavigation: + parent: Tag + key: TagSpecs +--- +
+ +## Example section + +This is the specs tab content + +Lorem ipsum dolor sit amet +Consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent auctor purus luctus enim egestas, ac scelerisque ante pulvinar. Donec ut rhoncus ex. Suspendisse ac rhoncus nisl, eu tempor urna. Curabitur vel bibendum lorem. Morbi convallis convallis diam sit amet lacinia. Aliquam in elementum tellus. + +
+ +
+ +## Specs + +Lorem ipsum dolor sit amet +Consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent auctor purus luctus enim egestas, ac scelerisque ante pulvinar. Donec ut rhoncus ex. Suspendisse ac rhoncus nisl, eu tempor urna. Curabitur vel bibendum lorem. Morbi convallis convallis diam sit amet lacinia. Aliquam in elementum tellus. + +
+ +
+ +## Anatomy + +Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent auctor purus luctus enim egestas, ac scelerisque ante pulvinar. Donec ut rhoncus ex. Suspendisse ac rhoncus nisl, eu tempor urna. Curabitur vel bibendum lorem. Morbi convallis convallis diam sit amet lacinia. Aliquam in elementum tellus. + +
+ +
+ +## Variants + +Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent auctor purus luctus enim egestas, ac scelerisque ante pulvinar. Donec ut rhoncus ex. Suspendisse ac rhoncus nisl, eu tempor urna. Curabitur vel bibendum lorem. Morbi convallis convallis diam sit amet lacinia. Aliquam in elementum tellus. + +Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent auctor purus luctus enim egestas, ac scelerisque ante pulvinar. Donec ut rhoncus ex. Suspendisse ac rhoncus nisl, eu tempor urna. Curabitur vel bibendum lorem. Morbi convallis convallis diam sit amet lacinia. Aliquam in elementum tellus. + +
+ +
+ +## Types + +Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent auctor purus luctus enim egestas, ac scelerisque ante pulvinar. Donec ut rhoncus ex. Suspendisse ac rhoncus nisl, eu tempor urna. Curabitur vel bibendum lorem. Morbi convallis convallis diam sit amet lacinia. Aliquam in elementum tellus. +
+ +
+ +## Behaviour + +Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent auctor purus luctus enim egestas, ac scelerisque ante pulvinar. Donec ut rhoncus ex. Suspendisse ac rhoncus nisl, eu tempor urna. Curabitur vel bibendum lorem. Morbi convallis convallis diam sit amet lacinia. Aliquam in elementum tellus. + +Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent auctor purus luctus enim egestas, ac scelerisque ante pulvinar. Donec ut rhoncus ex. Suspendisse ac rhoncus nisl, eu tempor urna. Curabitur vel bibendum lorem. Morbi convallis convallis diam sit amet lacinia. Aliquam in elementum tellus. + +
\ No newline at end of file diff --git a/website/src/categories/components/tree-view/tree-view.json b/website/src/categories/components/tree-view/tree-view.json new file mode 100644 index 0000000000..4ddb207e1e --- /dev/null +++ b/website/src/categories/components/tree-view/tree-view.json @@ -0,0 +1,15 @@ +{ + "layout": "categories/components/components.njk", + "tags": "tag", + "componentStatus": "draft", + "componentTagName": [ + { + "name": "Tag", + "selector": "sl-tag" + }, + { + "name": "Tag list", + "selector": "sl-tag-list" + } + ] +} diff --git a/website/src/categories/components/tree-view/tree-view.md b/website/src/categories/components/tree-view/tree-view.md new file mode 100644 index 0000000000..4780ffa852 --- /dev/null +++ b/website/src/categories/components/tree-view/tree-view.md @@ -0,0 +1,14 @@ +--- +title: Tree View +description: The Tree View organize data into a tree-like structure with collapsible and expandable nodes. It allows users to navigate complex hierarchical information, such as directories and categories. The component typically includes parent and child nodes, where parent nodes can be expanded to reveal their children. +componentType: feedback & status +shortDescription: The Tree View component displays hierarchical data in a structured, interactive, and navigable manner, allowing users to explore nested elements efficiently. +layout: "categories/components/components.njk" +tags: component +packageName: tree-view +storybookCategory: feedback-status +eleventyNavigation: + parent: Components + key: Tree View + status: planned +--- diff --git a/website/src/categories/components/tree-view/usage.md b/website/src/categories/components/tree-view/usage.md new file mode 100644 index 0000000000..d16ba53500 --- /dev/null +++ b/website/src/categories/components/tree-view/usage.md @@ -0,0 +1,131 @@ +--- +title: Tree View usage +tags: usage +eleventyNavigation: + parent: Tree View + key: TreeViewUsage +--- +
+ +
+Mathematics +History +Science +
+ +
+ + ```html +Mathematics +History +Science + ``` + +
+
+ +
+ +## When to Use +The following guidance describes when to use the tree view component. + +### Hierarchical Content +The Tree View is ideal for displaying and navigating hierarchical data, such as file systems, category structures, or organisational charts. It groups related data with nested relationships in a clear and organised way. It is a powerful tool for organising subject lesson content in educational applications. For example, it represents a syllabus with modules as parent nodes and lessons as child nodes, enabling students to intuitively explore and navigate their coursework. + +### SCENARIO 2 +The Tree View allows users to dynamically expand or collapse data sections, enabling a cleaner interface that focuses only on relevant information. This interactive functionality is handy when managing large amounts of content, where each item contains complex data or detailed information. It ensures users can explore deeply without being overwhelmed. + +
+ + +
+## When Not to Use + +### Simple Structures +Avoid using Tree View when your data is flat, only requires one level of nested information, or if a simpler component like an accordion or data table would suffice. This includes use cases like showing a single level of expandable content, such as FAQ answers. + +### Global Navigation +Do not use Tree View as the primary navigation for your product’s UI. For global sidebar navigation, it's better to use a dedicated UI Shell left panel that is more suited for this purpose. + +### Elements Toggle +Tree View is not ideal for showing and hiding UI elements or content within a page. If the interaction only involves collapsing or expanding content at a basic level, consider using other components like accordions or dropdowns for a more straightforward solution. + +
+ + +
+ +## Anatomy + +|Item|Name|Description|Optional| +|-|-|-|-| +|1|Title|The main text label of the node, representing the name or identifier of the item in the hierarchy.|no| +|2|Toggle|An interactive element that allows users to expand or collapse child nodes under the parent node.|Yes| +|3|Icon|A visual indicator representing the type or state of the node.|Yes| +|4|Checkbox|A selectable option that allows users to select or deselect nodes.|Yes| +|5|Guide Lines|Visual lines used to indicate the hierarchical structure of the tree.|Yes| +|6|Indentation|The visual offset of child nodes to indicate their relationship with parent nodes.|Yes| + +{.ds-table .ds-table-align-top} + +
+ + +
+ +## Variants +Tree View comes in two versions, each suited for specific situations: + +### Node +A basic element in the tree, representing a terminal item without parent or child nodes. + +### Header Node +Section titles that group related nodes, helping organize and categorize data within the Tree View. + +### Parent Node +A node that has one or more child nodes, typically expandable to reveal more detailed data. + +### Child Node +A node nested under a parent node, typically hidden until the parent is expanded, representing more detailed or lower-level information. + +
+ + +
+ +## Options +FIGMA_OPTIONS_INTRODUCTION + +|Item|Options|Description| +|-|-|-| +|PROP|`'on', 'of'`|PROPERTY DESCRIPTION | + +{.ds-table .ds-table-align-top} + +
+ + +
+ +## Behaviours +Let's explore the behaviour of the Tree View + +### Selectable +When this feature is enabled, nodes can be selected by the user, allowing for interactions such as checking, highlighting, or performing actions on a specific node. This is useful when users need to select multiple items from the tree. + +### Expandable +Allowing users to click on a parent node to reveal its child nodes. This interaction helps in navigating deeper structures without overwhelming the user with too much data at once. It is essential for managing large hierarchical datasets. + +### Indentation +ndentation visually distinguishes parent nodes from their child nodes by shifting them to the right. This hierarchy helps users understand the relationship between different levels of the data quickly. + +
+ + +
+ +## Related Components + +- [COMPONENT](/categories/components/COMPONENT/usage) + +
diff --git a/website/src/styles/components/code.scss b/website/src/styles/components/code.scss index 62a4e21a5c..61b3ddd347 100644 --- a/website/src/styles/components/code.scss +++ b/website/src/styles/components/code.scss @@ -31,6 +31,10 @@ $transition-timing: 300ms; min-block-size: 16rem; padding: 1.6rem; position: relative; + + > * { + min-inline-size: 0; + } } .ds-example__examples-wrapper { diff --git a/website/src/ts/scripts/slds-components.ts b/website/src/ts/scripts/slds-components.ts index e43ef95d85..553df43867 100644 --- a/website/src/ts/scripts/slds-components.ts +++ b/website/src/ts/scripts/slds-components.ts @@ -2,7 +2,6 @@ import { faGithub, faSlack } from '@fortawesome/free-brands-svg-icons'; // eslint-disable-next-line import/order import '@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js'; import { - faBadgeCheck as FarBadgeCheck, faArrowUpRightFromSquare, faBug, faCode, @@ -16,6 +15,7 @@ import { faTrash, faTruckFast, faXmark, + faBadgeCheck as farBadgeCheck, faBellExclamation as farBellExclamation, faBold as farBold, faGear as farGear, @@ -25,11 +25,11 @@ import { faUnderline as farUnderline } from '@fortawesome/pro-regular-svg-icons'; import { - faBadgeCheck as FasBadgeCheck, faEnvelope, faHandBackPointUp, faSchool, faScreenUsers, + faBadgeCheck as fasBadgeCheck, faBellExclamation as fasBellExclamation, faBold as fasBold, faGear as fasGear, @@ -47,6 +47,7 @@ import '@sl-design-system/button/register.js'; import '@sl-design-system/button-bar/register.js'; import '@sl-design-system/card/register.js'; import '@sl-design-system/checkbox/register.js'; +import '@sl-design-system/combobox/register.js'; import '@sl-design-system/dialog/register.js'; import '@sl-design-system/drawer/register.js'; import '@sl-design-system/editor/register.js'; @@ -98,7 +99,7 @@ Icon.register( faTrash, faTruckFast, faXmark, - FarBadgeCheck, + farBadgeCheck, farBellExclamation, farBold, farGrid, @@ -106,7 +107,7 @@ Icon.register( farItalic, farListUl, farUnderline, - FasBadgeCheck, + fasBadgeCheck, fasBellExclamation, fasBold, fasGrid,