From 0db9d33c4e570b2bc80f810fdf631f252a0195e0 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Mon, 25 Nov 2024 16:10:38 +0100 Subject: [PATCH 1/2] fix: fix type of form associated controls --- .../checkbox/common/checkbox-common.spec.ts | 1 + .../mixins/form-associated-checkbox-mixin.ts | 5 +++++ .../mixins/form-associated-radio-button-mixin.ts | 5 +++++ .../common/file-selector-common.spec.ts | 3 +++ .../file-selector/common/file-selector-common.ts | 5 +++++ .../common/radio-button-common.spec.ts | 16 ++++++++++------ src/elements/select/select.spec.ts | 1 + src/elements/select/select.ts | 5 +++++ src/elements/slider/slider.spec.ts | 3 +++ src/elements/slider/slider.ts | 5 +++++ 10 files changed, 43 insertions(+), 6 deletions(-) diff --git a/src/elements/checkbox/common/checkbox-common.spec.ts b/src/elements/checkbox/common/checkbox-common.spec.ts index f28e10ec79..cbd6660f8c 100644 --- a/src/elements/checkbox/common/checkbox-common.spec.ts +++ b/src/elements/checkbox/common/checkbox-common.spec.ts @@ -216,6 +216,7 @@ describe(`checkbox common behaviors`, () => { })) as unknown as CheckboxAccessibilitySnapshot; expect(snapshot.role).to.equal('checkbox'); + expect(element.type).to.be.equal('checkbox'); expect(snapshot.checked, `ariaChecked in ${JSON.stringify(snapshot)}`).to.be.equal( isFirefox && assertions.ariaChecked === false ? undefined : assertions.ariaChecked, diff --git a/src/elements/core/mixins/form-associated-checkbox-mixin.ts b/src/elements/core/mixins/form-associated-checkbox-mixin.ts index 0d2166cc97..5a3d8ad8e8 100644 --- a/src/elements/core/mixins/form-associated-checkbox-mixin.ts +++ b/src/elements/core/mixins/form-associated-checkbox-mixin.ts @@ -88,6 +88,11 @@ export const SbbFormAssociatedCheckboxMixin = } private _checked: boolean = false; + /** @internal */ + public override get type(): string { + return 'checkbox'; + } + protected constructor() { super(); /** @internal */ diff --git a/src/elements/core/mixins/form-associated-radio-button-mixin.ts b/src/elements/core/mixins/form-associated-radio-button-mixin.ts index 3fd0d1d3ee..b33d256b9b 100644 --- a/src/elements/core/mixins/form-associated-radio-button-mixin.ts +++ b/src/elements/core/mixins/form-associated-radio-button-mixin.ts @@ -68,6 +68,11 @@ export const SbbFormAssociatedRadioButtonMixin = { expect(e.lastModified, `file - lastModified - ${i}`).to.be.equal( Array.from(input.files!)[i].lastModified, ); + + expect(element.role, 'compare to native role').to.be.equal(input.role); + expect(element.type, 'compare to native type').to.be.equal(input.type); }); // Compare formData diff --git a/src/elements/file-selector/common/file-selector-common.ts b/src/elements/file-selector/common/file-selector-common.ts index 96951e24c9..7721922f17 100644 --- a/src/elements/file-selector/common/file-selector-common.ts +++ b/src/elements/file-selector/common/file-selector-common.ts @@ -110,6 +110,11 @@ export const SbbFileSelectorCommonElementMixin = [] = []; + /** @internal */ + public override get type(): string { + return 'file'; + } + /** An event which is emitted each time the file list changes. */ private _fileChangedEvent: EventEmitter[]> = new EventEmitter( this, diff --git a/src/elements/radio-button/common/radio-button-common.spec.ts b/src/elements/radio-button/common/radio-button-common.spec.ts index fedd394ef3..5f001d33b0 100644 --- a/src/elements/radio-button/common/radio-button-common.spec.ts +++ b/src/elements/radio-button/common/radio-button-common.spec.ts @@ -13,7 +13,7 @@ import type { SbbRadioButtonElement } from '../radio-button.js'; import '../radio-button.js'; import '../radio-button-panel.js'; -interface CheckboxAccessibilitySnapshot { +interface RadioButtonAccessibilitySnapshot { checked: boolean; role: string; disabled: boolean; @@ -81,7 +81,7 @@ describe(`radio-button common behaviors`, () => { it('should reflect aria-required false', async () => { const snapshot = (await a11ySnapshot({ selector: selector, - })) as unknown as CheckboxAccessibilitySnapshot; + })) as unknown as RadioButtonAccessibilitySnapshot; expect(snapshot.required).to.be.undefined; }); @@ -95,7 +95,7 @@ describe(`radio-button common behaviors`, () => { const snapshot = (await a11ySnapshot({ selector: selector, - })) as unknown as CheckboxAccessibilitySnapshot; + })) as unknown as RadioButtonAccessibilitySnapshot; // TODO: Recheck if it is working in Chromium if (!isChromium) { @@ -115,7 +115,7 @@ describe(`radio-button common behaviors`, () => { const snapshot = (await a11ySnapshot({ selector: selector, - })) as unknown as CheckboxAccessibilitySnapshot; + })) as unknown as RadioButtonAccessibilitySnapshot; expect(snapshot.required).not.to.be.ok; }); @@ -129,7 +129,7 @@ describe(`radio-button common behaviors`, () => { const snapshot = (await a11ySnapshot({ selector: selector, - })) as unknown as CheckboxAccessibilitySnapshot; + })) as unknown as RadioButtonAccessibilitySnapshot; // TODO: Recheck if it is working in Chromium if (!isChromium) { @@ -149,7 +149,7 @@ describe(`radio-button common behaviors`, () => { const snapshot = (await a11ySnapshot({ selector: selector, - })) as unknown as CheckboxAccessibilitySnapshot; + })) as unknown as RadioButtonAccessibilitySnapshot; expect(snapshot.required).not.to.be.ok; }); @@ -202,6 +202,10 @@ describe(`radio-button common behaviors`, () => { ); }); + // General form configuration + expect(elements[0].type, 'radio type').to.be.equal(nativeElements[0].type); + expect(elements[0].role, 'radio role').to.be.equal(nativeElements[0].role); + // Events expect(inputSpy.count, `'input' event`).to.be.equal(nativeInputSpy.count); expect(changeSpy.count, `'change' event`).to.be.equal(nativeChangeSpy.count); diff --git a/src/elements/select/select.spec.ts b/src/elements/select/select.spec.ts index 24475a6474..f1539b73e5 100644 --- a/src/elements/select/select.spec.ts +++ b/src/elements/select/select.spec.ts @@ -460,6 +460,7 @@ describe(`sbb-select`, () => { expect(elemInputEvent.count, 'compare to native - input counts').to.be.equal( nativeInputEvent.count, ); + expect(element.type, 'compare to native - type').to.be.equal(nativeSelect.type); } it('should set default value', async () => { diff --git a/src/elements/select/select.ts b/src/elements/select/select.ts index 231b093d9b..a8279a53bb 100644 --- a/src/elements/select/select.ts +++ b/src/elements/select/select.ts @@ -102,6 +102,11 @@ class SbbSelectElement extends SbbUpdateSchedulerMixin( @property({ type: Boolean }) public accessor readonly: boolean = false; + /** @internal */ + public override get type(): string { + return this.multiple ? 'select-multiple' : 'select-one'; + } + /** The value displayed by the component. */ @state() private accessor _displayValue: string | null = null; diff --git a/src/elements/slider/slider.spec.ts b/src/elements/slider/slider.spec.ts index 3d0e138430..5302d427a2 100644 --- a/src/elements/slider/slider.spec.ts +++ b/src/elements/slider/slider.spec.ts @@ -70,6 +70,9 @@ describe(`sbb-slider`, () => { expect(elemInputEvent.count, 'compare to native - input counts').to.be.equal( nativeInputEvent.count, ); + + expect(element.type, 'compare to native - type').to.be.equal(input.type); + expect(element.role, 'compare to native - role').to.be.equal(input.role); } it('renders', async () => { diff --git a/src/elements/slider/slider.ts b/src/elements/slider/slider.ts index 705a334cba..a39aeba2f7 100644 --- a/src/elements/slider/slider.ts +++ b/src/elements/slider/slider.ts @@ -111,6 +111,11 @@ class SbbSliderElement extends SbbDisabledMixin(SbbFormAssociatedMixin(LitElemen @property({ attribute: 'end-icon' }) public accessor endIcon: string = ''; + /** @internal */ + public override get type(): string { + return 'range'; + } + /** * The ratio between the absolute value and the validity interval. * E.g. given `min=0`, `max=100` and `value=50`, then `_valueFraction=0.5` From bf8702d9f5f91829c3507fbd26d3fb6f0cee3d97 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Mon, 25 Nov 2024 16:31:18 +0100 Subject: [PATCH 2/2] fix: review --- .../checkbox/checkbox-panel/readme.md | 27 ++++++++++--------- src/elements/checkbox/checkbox/readme.md | 27 ++++++++++--------- .../mixins/form-associated-checkbox-mixin.ts | 5 +++- .../form-associated-radio-button-mixin.ts | 5 +++- .../common/file-selector-common.ts | 5 +++- .../file-selector-dropzone/readme.md | 1 + .../file-selector/file-selector/readme.md | 1 + .../radio-button/radio-button-panel/readme.md | 1 + .../radio-button/radio-button/readme.md | 23 ++++++++-------- src/elements/select/readme.md | 25 ++++++++--------- src/elements/select/select.ts | 5 +++- src/elements/slider/readme.md | 25 ++++++++--------- src/elements/slider/slider.ts | 5 +++- src/elements/toggle-check/readme.md | 1 + 14 files changed, 90 insertions(+), 66 deletions(-) diff --git a/src/elements/checkbox/checkbox-panel/readme.md b/src/elements/checkbox/checkbox-panel/readme.md index a2a542115b..774ba72acc 100644 --- a/src/elements/checkbox/checkbox-panel/readme.md +++ b/src/elements/checkbox/checkbox-panel/readme.md @@ -75,19 +75,20 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------- | --------------- | ------- | --------------------------------- | --------- | -------------------------------------------------------------- | -| `borderless` | `borderless` | public | `boolean` | `false` | Whether the unselected panel has a border. | -| `checked` | `checked` | public | `boolean` | `false` | Whether the checkbox is checked. | -| `color` | `color` | public | `'white' \| 'milk'` | `'white'` | The background color of the panel. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `group` | - | public | `SbbCheckboxGroupElement \| null` | `null` | Reference to the connected checkbox group. | -| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | -| `size` | `size` | public | `SbbPanelSize` | `'m'` | Size variant. | -| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------- | --------------- | ------- | --------------------------------- | ------------ | -------------------------------------------------------------- | +| `borderless` | `borderless` | public | `boolean` | `false` | Whether the unselected panel has a border. | +| `checked` | `checked` | public | `boolean` | `false` | Whether the checkbox is checked. | +| `color` | `color` | public | `'white' \| 'milk'` | `'white'` | The background color of the panel. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `group` | - | public | `SbbCheckboxGroupElement \| null` | `null` | Reference to the connected checkbox group. | +| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | +| `size` | `size` | public | `SbbPanelSize` | `'m'` | Size variant. | +| `type` | - | public | `string` | `'checkbox'` | Form type of element. | +| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Events diff --git a/src/elements/checkbox/checkbox/readme.md b/src/elements/checkbox/checkbox/readme.md index 6280437e87..fd0d8e8de9 100644 --- a/src/elements/checkbox/checkbox/readme.md +++ b/src/elements/checkbox/checkbox/readme.md @@ -81,19 +81,20 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------- | ---------------- | ------- | --------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `checked` | `checked` | public | `boolean` | `false` | Whether the checkbox is checked. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `group` | - | public | `SbbCheckboxGroupElement \| null` | `null` | Reference to the connected checkbox group. | -| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `iconPlacement` | `icon-placement` | public | `SbbIconPlacement` | `'end'` | The label position relative to the labelIcon. Defaults to end | -| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | -| `size` | `size` | public | `SbbCheckboxSize` | `'m'` | Size variant. | -| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------- | ---------------- | ------- | --------------------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------- | +| `checked` | `checked` | public | `boolean` | `false` | Whether the checkbox is checked. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `group` | - | public | `SbbCheckboxGroupElement \| null` | `null` | Reference to the connected checkbox group. | +| `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `iconPlacement` | `icon-placement` | public | `SbbIconPlacement` | `'end'` | The label position relative to the labelIcon. Defaults to end | +| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | +| `size` | `size` | public | `SbbCheckboxSize` | `'m'` | Size variant. | +| `type` | - | public | `string` | `'checkbox'` | Form type of element. | +| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Events diff --git a/src/elements/core/mixins/form-associated-checkbox-mixin.ts b/src/elements/core/mixins/form-associated-checkbox-mixin.ts index 5a3d8ad8e8..fb7aa4911f 100644 --- a/src/elements/core/mixins/form-associated-checkbox-mixin.ts +++ b/src/elements/core/mixins/form-associated-checkbox-mixin.ts @@ -88,7 +88,10 @@ export const SbbFormAssociatedCheckboxMixin = } private _checked: boolean = false; - /** @internal */ + /** + * Form type of element. + * @default 'checkbox' + */ public override get type(): string { return 'checkbox'; } diff --git a/src/elements/core/mixins/form-associated-radio-button-mixin.ts b/src/elements/core/mixins/form-associated-radio-button-mixin.ts index b33d256b9b..0a0eb4e112 100644 --- a/src/elements/core/mixins/form-associated-radio-button-mixin.ts +++ b/src/elements/core/mixins/form-associated-radio-button-mixin.ts @@ -68,7 +68,10 @@ export const SbbFormAssociatedRadioButtonMixin = [] = []; - /** @internal */ + /** + * Form type of element. + * @default 'file' + */ public override get type(): string { return 'file'; } diff --git a/src/elements/file-selector/file-selector-dropzone/readme.md b/src/elements/file-selector/file-selector-dropzone/readme.md index 845b83854d..8bd859c6e1 100644 --- a/src/elements/file-selector/file-selector-dropzone/readme.md +++ b/src/elements/file-selector/file-selector-dropzone/readme.md @@ -95,6 +95,7 @@ It's suggested to have a different value for each variant, e.g.: | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `size` | `size` | public | `'s' \| 'm'` | `'m'` | Size variant, either s or m. | | `titleContent` | `title-content` | public | `string` | `''` | The title displayed in `dropzone` variant. | +| `type` | - | public | `string` | `'file'` | Form type of element. | | `value` | `value` | public | `string \| null` | `null` | The path of the first selected file. Empty string ('') if no file is selected | ## Methods diff --git a/src/elements/file-selector/file-selector/readme.md b/src/elements/file-selector/file-selector/readme.md index e6f3765eee..d8e17288ec 100644 --- a/src/elements/file-selector/file-selector/readme.md +++ b/src/elements/file-selector/file-selector/readme.md @@ -91,6 +91,7 @@ It's suggested to have a different value for each variant, e.g.: | `multipleMode` | `multiple-mode` | public | `'default' \| 'persistent'` | `'default'` | Whether the newly added files should override the previously added ones. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `size` | `size` | public | `'s' \| 'm'` | `'m'` | Size variant, either s or m. | +| `type` | - | public | `string` | `'file'` | Form type of element. | | `value` | `value` | public | `string \| null` | `null` | The path of the first selected file. Empty string ('') if no file is selected | ## Methods diff --git a/src/elements/radio-button/radio-button-panel/readme.md b/src/elements/radio-button/radio-button-panel/readme.md index 42e972f771..d429e77daf 100644 --- a/src/elements/radio-button/radio-button-panel/readme.md +++ b/src/elements/radio-button/radio-button-panel/readme.md @@ -77,6 +77,7 @@ The component's label can be displayed in bold using the `sbb-text--bold` class | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `required` | `required` | public | `boolean` | `false` | Whether the component is required. | | `size` | `size` | public | `SbbPanelSize` | `'m'` | Size variant. | +| `type` | - | public | `string` | `'radio'` | Form type of element. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Methods diff --git a/src/elements/radio-button/radio-button/readme.md b/src/elements/radio-button/radio-button/readme.md index eede67914c..07363e8d2a 100644 --- a/src/elements/radio-button/radio-button/readme.md +++ b/src/elements/radio-button/radio-button/readme.md @@ -58,17 +58,18 @@ The component's label can be displayed in bold using the `sbb-text--bold` class ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------------- | ----------------------- | ------- | ------------------------------------ | ------- | -------------------------------------------------------------- | -| `allowEmptySelection` | `allow-empty-selection` | public | `boolean` | `false` | Whether the radio can be deselected. | -| `checked` | `checked` | public | `boolean` | `false` | Whether the radio button is checked. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `group` | - | public | `SbbRadioButtonGroupElement \| null` | `null` | Reference to the connected radio button group. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | -| `size` | `size` | public | `SbbRadioButtonSize` | `'m'` | Size variant. | -| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------------- | ----------------------- | ------- | ------------------------------------ | --------- | -------------------------------------------------------------- | +| `allowEmptySelection` | `allow-empty-selection` | public | `boolean` | `false` | Whether the radio can be deselected. | +| `checked` | `checked` | public | `boolean` | `false` | Whether the radio button is checked. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `group` | - | public | `SbbRadioButtonGroupElement \| null` | `null` | Reference to the connected radio button group. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | +| `size` | `size` | public | `SbbRadioButtonSize` | `'m'` | Size variant. | +| `type` | - | public | `string` | `'radio'` | Form type of element. | +| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Methods diff --git a/src/elements/select/readme.md b/src/elements/select/readme.md index 8d50c861d8..3ab77cdccd 100644 --- a/src/elements/select/readme.md +++ b/src/elements/select/readme.md @@ -139,18 +139,19 @@ Opened panel: ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ------------- | ------------- | ------- | ---------------------------- | ------- | -------------------------------------------------------------- | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `isOpen` | - | public | `boolean` | | Whether the element is open. | -| `multiple` | `multiple` | public | `boolean` | `false` | Whether the select allows for multiple selection. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `placeholder` | `placeholder` | public | `string` | `''` | The placeholder used if no value has been selected. | -| `readonly` | `readonly` | public | `boolean` | `false` | Whether the select is readonly. | -| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | -| `value` | `value` | public | `string \| string[] \| null` | `null` | Value of the form element. | +| Name | Attribute | Privacy | Type | Default | Description | +| ------------- | ------------- | ------- | ---------------------------- | -------------------------------- | -------------------------------------------------------------- | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `isOpen` | - | public | `boolean` | | Whether the element is open. | +| `multiple` | `multiple` | public | `boolean` | `false` | Whether the select allows for multiple selection. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `placeholder` | `placeholder` | public | `string` | `''` | The placeholder used if no value has been selected. | +| `readonly` | `readonly` | public | `boolean` | `false` | Whether the select is readonly. | +| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | +| `type` | - | public | `string` | `'select-one / select-multiple'` | Form type of element. | +| `value` | `value` | public | `string \| string[] \| null` | `null` | Value of the form element. | ## Methods diff --git a/src/elements/select/select.ts b/src/elements/select/select.ts index a8279a53bb..3ce7b3932e 100644 --- a/src/elements/select/select.ts +++ b/src/elements/select/select.ts @@ -102,7 +102,10 @@ class SbbSelectElement extends SbbUpdateSchedulerMixin( @property({ type: Boolean }) public accessor readonly: boolean = false; - /** @internal */ + /** + * Form type of element. + * @default 'select-one / select-multiple' + */ public override get type(): string { return this.multiple ? 'select-multiple' : 'select-one'; } diff --git a/src/elements/slider/readme.md b/src/elements/slider/readme.md index 8011ad5322..74863391a6 100644 --- a/src/elements/slider/readme.md +++ b/src/elements/slider/readme.md @@ -70,18 +70,19 @@ The `sbb-slider` has the following behaviour on keypress when focused: ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------- | ----------------- | ------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `endIcon` | `end-icon` | public | `string` | `''` | Name of the icon at component's end, which will be forward to the nested `sbb-icon`. | -| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `max` | `max` | public | `string` | `'100'` | Maximum acceptable value for the inner HTMLInputElement. | -| `min` | `min` | public | `string` | `'0'` | Minimum acceptable value for the inner HTMLInputElement. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `readonly` | `readonly` | public | `boolean` | `false` | Readonly state for the inner HTMLInputElement. Since the input range does not allow this attribute, it will be merged with the `disabled` one. | -| `startIcon` | `start-icon` | public | `string` | `''` | Name of the icon at component's start, which will be forward to the nested `sbb-icon`. | -| `value` | `value` | public | `string \| null` | `null` | Value of the form element. If no value is provided, default is the middle point between min and max. | -| `valueAsNumber` | `value-as-number` | public | `number \| null` | | Numeric value for the inner HTMLInputElement. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------- | ----------------- | ------- | ------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `endIcon` | `end-icon` | public | `string` | `''` | Name of the icon at component's end, which will be forward to the nested `sbb-icon`. | +| `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `max` | `max` | public | `string` | `'100'` | Maximum acceptable value for the inner HTMLInputElement. | +| `min` | `min` | public | `string` | `'0'` | Minimum acceptable value for the inner HTMLInputElement. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `readonly` | `readonly` | public | `boolean` | `false` | Readonly state for the inner HTMLInputElement. Since the input range does not allow this attribute, it will be merged with the `disabled` one. | +| `startIcon` | `start-icon` | public | `string` | `''` | Name of the icon at component's start, which will be forward to the nested `sbb-icon`. | +| `type` | - | public | `string` | `'range'` | Form type of element. | +| `value` | `value` | public | `string \| null` | `null` | Value of the form element. If no value is provided, default is the middle point between min and max. | +| `valueAsNumber` | `value-as-number` | public | `number \| null` | | Numeric value for the inner HTMLInputElement. | ## Events diff --git a/src/elements/slider/slider.ts b/src/elements/slider/slider.ts index a39aeba2f7..e3a9288a45 100644 --- a/src/elements/slider/slider.ts +++ b/src/elements/slider/slider.ts @@ -111,7 +111,10 @@ class SbbSliderElement extends SbbDisabledMixin(SbbFormAssociatedMixin(LitElemen @property({ attribute: 'end-icon' }) public accessor endIcon: string = ''; - /** @internal */ + /** + * Form type of element. + * @default 'range' + */ public override get type(): string { return 'range'; } diff --git a/src/elements/toggle-check/readme.md b/src/elements/toggle-check/readme.md index 532d0a7978..734c4f79b1 100644 --- a/src/elements/toggle-check/readme.md +++ b/src/elements/toggle-check/readme.md @@ -74,6 +74,7 @@ you can not provide it and then use `aria-label` to specify an appropriate label | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `required` | `required` | public | `boolean` | `false` | Whether the component is required. | | `size` | `size` | public | `'xs' \| 's' \| 'm'` | `'s'` | Size variant, either m, s or xs. | +| `type` | - | public | `string` | `'checkbox'` | Form type of element. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Events