+ { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "" + } + ] +} +
+`; +/* end snapshot sbb-autocomplete-grid-cell renders A11y tree Chrome */ + +snapshots["sbb-autocomplete-grid-cell renders A11y tree Firefox"] = +`+ { + "role": "document", + "name": "", + "children": [ + { + "role": "button", + "name": "" + } + ] +} +
+`; +/* end snapshot sbb-autocomplete-grid-cell renders A11y tree Firefox */ + diff --git a/src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.scss b/src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.scss new file mode 100644 index 0000000000..558678f4cc --- /dev/null +++ b/src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.scss @@ -0,0 +1,13 @@ +@use '../../core/styles' as sbb; + +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; + +:host { + display: block; +} + +.sbb-autocomplete-grid-cell { + display: flex; + column-gap: var(--sbb-spacing-fixed-6x); +} diff --git a/src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.snapshot.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.snapshot.spec.ts new file mode 100644 index 0000000000..5c51a97d48 --- /dev/null +++ b/src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.snapshot.spec.ts @@ -0,0 +1,44 @@ +import { expect } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; + +import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js'; + +import type { SbbAutocompleteGridCellElement } from './autocomplete-grid-cell.js'; +import '../autocomplete-grid.js'; +import '../autocomplete-grid-row.js'; +import './autocomplete-grid-cell.js'; +import '../autocomplete-grid-button.js'; + +describe('sbb-autocomplete-grid-cell', () => { + describe('renders', () => { + let root: SbbAutocompleteGridCellElement; + beforeEach(async () => { + root = ( + await fixture(html` +
+
+
+
+
+
+
+
+
+
++ { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Option 1" + }, + { + "role": "text", + "name": "Option 2" + } + ] +} +
+`; +/* end snapshot sbb-autocomplete-grid-optgroup renders Chrome-Firefox A11y tree Chrome */ + +snapshots["sbb-autocomplete-grid-optgroup renders Chrome-Firefox A11y tree Firefox"] = +`+ { + "role": "document", + "name": "", + "children": [ + { + "role": "text leaf", + "name": "Option 1" + }, + { + "role": "text leaf", + "name": "Option 2" + } + ] +} +
+`; +/* end snapshot sbb-autocomplete-grid-optgroup renders Chrome-Firefox A11y tree Firefox */ + diff --git a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.snapshot.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.snapshot.spec.ts new file mode 100644 index 0000000000..0c66713349 --- /dev/null +++ b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.snapshot.spec.ts @@ -0,0 +1,63 @@ +import { expect } from '@open-wc/testing'; +import type { TemplateResult } from 'lit'; +import { html } from 'lit/static-html.js'; + +import { isSafari } from '../../core/dom.js'; +import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js'; +import { describeIf } from '../../core/testing.js'; + +import './autocomplete-grid-optgroup.js'; +import '../autocomplete-grid.js'; +import '../autocomplete-grid-row.js'; +import '../autocomplete-grid-option.js'; +import '../autocomplete-grid-cell.js'; +import '../autocomplete-grid-button.js'; +import type { SbbAutocompleteGridOptgroupElement } from './autocomplete-grid-optgroup.js'; + +describe('sbb-autocomplete-grid-optgroup', () => { + describe('renders', () => { + let root: SbbAutocompleteGridOptgroupElement; + const opt: TemplateResult = html` +
+ ${template(args)}
+
+ `;
+
+ const autocompleteTemplate = (args: typeof defaultArgs): TemplateResult => html`
+
+
+`;
+/* end snapshot sbb-autocomplete-grid-option renders Shadow DOM */
+
+snapshots["sbb-autocomplete-grid-option renders disabled DOM"] =
+`
+
+
+
+
+
+
+
+ Option 1
+
+
+
+
+`;
+/* end snapshot sbb-autocomplete-grid-option renders disabled Shadow DOM */
+
+snapshots["sbb-autocomplete-grid-option A11y tree Firefox"] =
+`
+
+
+
+
+
+
+
+ Option 1
+
+
++ { + "role": "document", + "name": "", + "children": [ + { + "role": "text leaf", + "name": "Option 1" + } + ] +} +
+`; +/* end snapshot sbb-autocomplete-grid-option A11y tree Firefox */ + +snapshots["sbb-autocomplete-grid-option A11y tree Chrome"] = +`+ { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Option 1" + } + ] +} +
+`; +/* end snapshot sbb-autocomplete-grid-option A11y tree Chrome */ + diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss new file mode 100644 index 0000000000..acb964f983 --- /dev/null +++ b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss @@ -0,0 +1,70 @@ +@use '../../core/styles' as sbb; + +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; + +:host { + --sbb-option-color: var(--sbb-color-charcoal); + --sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs); + --sbb-option-icon-color: var(--sbb-color-metal); + --sbb-option-border-radius: var(--sbb-border-radius-4x); + --sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs); + --sbb-option-padding-block: calc(var(--sbb-spacing-fixed-2x) + var(--sbb-border-width-2x)); + + display: block; +} + +:host([active]) { + --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x)); +} + +:host([data-negative]) { + --sbb-option-color: var(--sbb-color-milk); + --sbb-option-icon-color: var(--sbb-color-smoke); +} + +// If highlighting is enabled, hide the original slot content +:host(:not([data-disable-highlight])) { + .sbb-option__label slot { + display: none; + } +} + +.sbb-option { + @include sbb.text-s--regular; + + display: flex; + align-items: center; + column-gap: var(--sbb-option-column-gap); + justify-content: start; + padding-block: var(--sbb-option-padding-block); + padding-inline: var(--sbb-option-padding-inline); + color: var(--sbb-option-color); + + :host([active]) & { + @include sbb.focus-outline; + + border-radius: var(--sbb-option-border-radius); + } +} + +.sbb-option__label--highlight { + :host(:not(:is([disabled], [data-group-disabled]))) & { + @include sbb.text--bold; + @include sbb.if-forced-colors { + color: Highlight; + } + } +} + +.sbb-option__icon { + display: flex; + min-width: var(--sbb-size-icon-ui-small); + min-height: var(--sbb-size-icon-ui-small); + color: var(--sbb-option-icon-color); + + :host(:not([data-slot-names~='icon'], [icon-name])) & { + // Can be overridden by the 'preserve-icon-space' on the autocomplete + display: var(--sbb-option-icon-container-display, none); + } +} diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.snapshot.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.snapshot.spec.ts new file mode 100644 index 0000000000..cdc6c4278a --- /dev/null +++ b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.snapshot.spec.ts @@ -0,0 +1,67 @@ +import { expect } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; + +import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js'; + +import type { SbbAutocompleteGridOptionElement } from './autocomplete-grid-option.js'; +import '../autocomplete-grid.js'; +import '../autocomplete-grid-row.js'; +import './autocomplete-grid-option.js'; +import '../autocomplete-grid-cell.js'; +import '../autocomplete-grid-button.js'; + +describe('sbb-autocomplete-grid-option', () => { + describe('renders', () => { + let root: SbbAutocompleteGridOptionElement; + beforeEach(async () => { + root = ( + await fixture(html` +${story()}
+`;
+
+export const Standalone: StoryObj = {
+ render: StandaloneTemplate,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs },
+ decorators: [borderDecorator],
+};
+
+export const WithIcon: StoryObj = {
+ render: StandaloneTemplate,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs, 'icon-name': 'clock-small' },
+ decorators: [borderDecorator],
+};
+
+export const WithDisabledState: StoryObj = {
+ render: StandaloneTemplate,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs, disabled: true },
+ decorators: [borderDecorator],
+};
+
+export const WithActiveState: StoryObj = {
+ render: StandaloneTemplate,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs, active: true },
+ decorators: [borderDecorator],
+};
+
+export const WithIconSpace: StoryObj = {
+ render: StandaloneTemplate,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs, preserveIconSpace: true },
+ decorators: [borderDecorator],
+};
+
+export const Autocomplete: StoryObj = {
+ render: AutocompleteTemplate,
+ argTypes: { ...defaultArgTypes, negative },
+ args: { ...defaultArgs, negative: false },
+};
+
+const meta: Meta = {
+ parameters: {
+ backgroundColor: (context: StoryContext) =>
+ context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
+ actions: {
+ handles: [
+ SbbAutocompleteGridOptionElement.events.selectionChange,
+ SbbAutocompleteGridOptionElement.events.optionSelected,
+ ],
+ },
+ docs: {
+ // Setting the iFrame height ensures that the story has enough space when used in the docs section.
+ story: { inline: false, iframeHeight: '500px' },
+ extractComponentDescription: () => readme,
+ },
+ },
+ title: 'elements/sbb-autocomplete-grid/sbb-autocomplete-grid-option',
+};
+
+export default meta;
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
new file mode 100644
index 0000000000..3e1aad9373
--- /dev/null
+++ b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
@@ -0,0 +1,100 @@
+import type { CSSResultGroup, PropertyValues } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import { hostAttributes } from '../../core/decorators.js';
+import { EventEmitter } from '../../core/eventing.js';
+import { SbbOptionBaseElement } from '../../option.js';
+
+import style from './autocomplete-grid-option.scss?lit&inline';
+
+export const autocompleteGridOptionId: string = `sbb-autocomplete-grid-option`;
+
+/**
+ * It displays an option item which can be used in `sbb-autocomplete-grid`.
+ *
+ * @slot - Use the unnamed slot to add content to the option label.
+ * @slot icon - Use this slot to provide an icon. If `icon-name` is set, a sbb-icon will be used.
+ * @event {CustomEvent
+ ${repeat(new Array(5), (_, i) => createOption(args, i))}
+
+ `;
+
+ const autocompleteTemplate = (args: typeof defaultArgs): TemplateResult => html`
+ + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Option 1" + }, + { + "role": "button", + "name": "" + } + ] +} +
+`; +/* end snapshot sbb-autocomplete-grid-row renders A11y tree Chrome */ + +snapshots["sbb-autocomplete-grid-row renders A11y tree Firefox"] = +`+ { + "role": "document", + "name": "", + "children": [ + { + "role": "text leaf", + "name": "Option 1" + }, + { + "role": "button", + "name": "" + } + ] +} +
+`; +/* end snapshot sbb-autocomplete-grid-row renders A11y tree Firefox */ + diff --git a/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.scss b/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.scss new file mode 100644 index 0000000000..c6a77c7f8c --- /dev/null +++ b/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.scss @@ -0,0 +1,87 @@ +@use '../../core/styles' as sbb; + +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; + +:host { + --sbb-autocomplete-grid-row-color: var(--sbb-color-charcoal); + --sbb-autocomplete-grid-row-background-color: inherit; + --sbb-autocomplete-grid-row-background-color-hover: var(--sbb-color-milk); + --sbb-autocomplete-grid-row-background-color-active: var(--sbb-color-cloud); + --sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-color-graphite); + --sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-color-milk); + --sbb-autocomplete-grid-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs); + --sbb-autocomplete-grid-row-justify-content: space-between; + --sbb-autocomplete-grid-row-min-height: var(--sbb-size-button-m-min-height); + --sbb-autocomplete-grid-row-cursor: pointer; + --sbb-autocomplete-grid-row-border-radius: var(--sbb-border-radius-4x); + --sbb-autocomplete-grid-row-icon-color: var(--sbb-color-metal); + + display: block; +} + +:host([data-negative]) { + --sbb-autocomplete-grid-row-color: var(--sbb-color-milk); + --sbb-autocomplete-grid-row-icon-color: var(--sbb-color-smoke); + --sbb-autocomplete-grid-row-background-color-hover: var(--sbb-color-charcoal); + --sbb-autocomplete-grid-row-background-color-active: var(--sbb-color-iron); + --sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-color-smoke); + --sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-color-charcoal); + --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark); +} + +:host(:hover:not([data-disabled])) { + @include sbb.hover-mq($hover: true) { + --sbb-autocomplete-grid-row-background-color: var( + --sbb-autocomplete-grid-row-background-color-hover + ); + } +} + +:host([data-disabled]) { + --sbb-autocomplete-grid-row-cursor: default; + + @include sbb.if-forced-colors { + --sbb-autocomplete-grid-row-color: GrayText; + } +} + +::slotted(sbb-autocomplete-grid-option) { + flex: 1 1 auto; + margin-right: calc(-1 * var(--sbb-spacing-fixed-2x)); +} + +.sbb-autocomplete-grid-row { + display: flex; + align-items: center; + padding-inline-end: var(--sbb-autocomplete-grid-row-padding-inline-end); + justify-content: var(--sbb-autocomplete-grid-row-justify-content); + gap: var(--sbb-spacing-fixed-6x); + color: var(--sbb-autocomplete-grid-row-color); + background-color: var(--sbb-autocomplete-grid-row-background-color); + cursor: var(--sbb-autocomplete-grid-row-cursor); + -webkit-tap-highlight-color: transparent; + -webkit-text-fill-color: var(--sbb-autocomplete-grid-row-color); + + // Add inner border and background for disabled option when it's not multiple + :host([data-disabled]) & { + position: relative; + z-index: 0; + + &::before { + content: ''; + display: block; + position: absolute; + inset: #{sbb.px-to-rem-build(6)}; + border: var(--sbb-border-width-1x) dashed + var(--sbb-autocomplete-grid-row-disabled-border-color); + border-radius: var(--sbb-border-radius-2x); + background-color: var(--sbb-autocomplete-grid-row-disabled-background-color); + z-index: -1; + + @include sbb.if-forced-colors { + border-color: GrayText; + } + } + } +} diff --git a/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.snapshot.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.snapshot.spec.ts new file mode 100644 index 0000000000..068eb01c57 --- /dev/null +++ b/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.snapshot.spec.ts @@ -0,0 +1,44 @@ +import { expect } from '@open-wc/testing'; +import type { TemplateResult } from 'lit'; +import { html } from 'lit/static-html.js'; + +import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js'; + +import type { SbbAutocompleteGridRowElement } from './autocomplete-grid-row.js'; +import '../autocomplete-grid.js'; +import './autocomplete-grid-row.js'; +import '../autocomplete-grid-option.js'; +import '../autocomplete-grid-cell.js'; +import '../autocomplete-grid-button.js'; + +describe('sbb-autocomplete-grid-row', () => { + describe('renders', () => { + let root: SbbAutocompleteGridRowElement; + const row: TemplateResult = html` +
+
+
+
+`;
+/* end snapshot sbb-autocomplete-grid Chrome-Firefox Shadow DOM */
+
+snapshots["sbb-autocomplete-grid Chrome-Firefox A11y tree Chrome"] =
+`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "" + }, + { + "role": "combobox", + "name": "", + "autocomplete": "list", + "haspopup": "grid" + } + ] +} +
+`; +/* end snapshot sbb-autocomplete-grid Chrome-Firefox A11y tree Chrome */ + +snapshots["sbb-autocomplete-grid Chrome-Firefox A11y tree Firefox"] = +`+ { + "role": "document", + "name": "", + "children": [ + { + "role": "statictext", + "name": "" + }, + { + "role": "combobox", + "name": "", + "autocomplete": "list", + "haspopup": "grid" + } + ] +} +
+`; +/* end snapshot sbb-autocomplete-grid Chrome-Firefox A11y tree Firefox */ + +snapshots["sbb-autocomplete-grid Safari DOM"] = +`
+
+
+
+`;
+/* end snapshot sbb-autocomplete-grid Safari Shadow DOM */
+
diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.snapshot.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.snapshot.spec.ts
new file mode 100644
index 0000000000..71bf81fe40
--- /dev/null
+++ b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.snapshot.spec.ts
@@ -0,0 +1,67 @@
+import { expect } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { isSafari } from '../../core/dom.js';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import { describeIf } from '../../core/testing.js';
+import type { SbbFormFieldElement } from '../../form-field.js';
+
+import type { SbbAutocompleteGridElement } from './autocomplete-grid.js';
+import './autocomplete-grid.js';
+import '../autocomplete-grid-row.js';
+import '../autocomplete-grid-option.js';
+import '../autocomplete-grid-cell.js';
+import '../autocomplete-grid-button.js';
+import '../../form-field/form-field/form-field.js';
+
+describe('sbb-autocomplete-grid', () => {
+ let root: SbbFormFieldElement;
+ let element: SbbAutocompleteGridElement;
+
+ beforeEach(async () => {
+ root = await fixture(html`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This text block has a
+`;
+
+const aboveDecorator: Decorator = (story) => html`
+ z-index greater than the form
+ field, but it must always be covered by the autocomplete overlay.
+
+ ${story()}
+
+`;
+
+const scrollDecorator: Decorator = (story) => html`
+
+ ${story()}
+
+`;
+
+// Story interaction executed after the story renders
+const playStory = async ({ canvasElement }: StoryContext): Promise
+
+
+
+
+ ${createRows1(args.optionIconName, args.buttonIconName, args.disableOption)}
+ ${createRows2(args.buttonIconName, args.disableOption)}
+
+
+ ${textBlock()}
+
+
+`;
+
+const OptionGroupTemplate = (args: Args): TemplateResult => html`
+
+
+
+
+
+
+ Current location
+
+
+ ${createRows1(args.optionIconName, args.buttonIconName, args.disableOption)}
+
+
+ ${createRows2(args.buttonIconName, args.disableOptio1n)}
+
+
+
+ ${textBlock()}
+
+
+`;
+
+export const Basic: StoryObj = {
+ render: Template,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs },
+ play: isChromatic() ? playStory : undefined,
+};
+
+export const Negative: StoryObj = {
+ render: Template,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs, negative: true },
+ play: isChromatic() ? playStory : undefined,
+};
+
+export const Disabled: StoryObj = {
+ render: Template,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs, disabled: true },
+};
+
+export const Readonly: StoryObj = {
+ render: Template,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs, readonly: true },
+};
+
+export const NoIcon: StoryObj = {
+ render: Template,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs, optionIconName: undefined },
+ play: isChromatic() ? playStory : undefined,
+};
+
+export const NoIconNoIconSpace: StoryObj = {
+ render: Template,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs, optionIconName: undefined, preserveIconSpace: false },
+ play: isChromatic() ? playStory : undefined,
+};
+
+export const Borderless: StoryObj = {
+ render: Template,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs, borderless: true },
+ play: isChromatic() ? playStory : undefined,
+};
+
+export const BorderlessNegative: StoryObj = {
+ render: Template,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs, borderless: true, negative: true },
+ play: isChromatic() ? playStory : undefined,
+};
+
+export const BasicOpenAbove: StoryObj = {
+ render: Template,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs },
+ decorators: [aboveDecorator],
+ play: isChromatic() ? playStory : undefined,
+};
+
+export const BorderlessOpenAbove: StoryObj = {
+ render: Template,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs, borderless: true },
+ decorators: [aboveDecorator],
+ play: isChromatic() ? playStory : undefined,
+};
+
+export const DisableOption: StoryObj = {
+ render: Template,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs, disableOption: true },
+ play: isChromatic() ? playStory : undefined,
+};
+
+export const NegativeDisableOption: StoryObj = {
+ render: Template,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs, negative: true, disableOption: true },
+ play: isChromatic() ? playStory : undefined,
+};
+
+export const WithOptionGroup: StoryObj = {
+ render: OptionGroupTemplate,
+ argTypes: withGroupsArgTypes,
+ args: { ...withGroupsDefaultArgs },
+ play: isChromatic() ? playStory : undefined,
+};
+
+export const WithOptionGroupNegative: StoryObj = {
+ render: OptionGroupTemplate,
+ argTypes: withGroupsArgTypes,
+ args: { ...withGroupsDefaultArgs, negative: true },
+ play: isChromatic() ? playStory : undefined,
+};
+
+export const WithOptionGroupDisabled: StoryObj = {
+ render: OptionGroupTemplate,
+ argTypes: withGroupsArgTypes,
+ args: { ...withGroupsDefaultArgs, disableGroup: true },
+ play: isChromatic() ? playStory : undefined,
+};
+
+export const WithOptionGroupNegativeDisabled: StoryObj = {
+ render: OptionGroupTemplate,
+ argTypes: withGroupsArgTypes,
+ args: { ...withGroupsDefaultArgs, negative: true, disableGroup: true },
+ play: isChromatic() ? playStory : undefined,
+};
+
+export const WithOptionGroupNegativeOptionDisabled: StoryObj = {
+ render: OptionGroupTemplate,
+ argTypes: withGroupsArgTypes,
+ args: { ...withGroupsDefaultArgs, negative: true, disableOption: true },
+ play: isChromatic() ? playStory : undefined,
+};
+
+export const Scroll: StoryObj = {
+ render: Template,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs },
+ decorators: [scrollDecorator],
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
+};
+
+const meta: Meta = {
+ decorators: [withActions as Decorator],
+ parameters: {
+ chromatic: { disableSnapshot: false },
+ actions: {
+ handles: [
+ SbbAutocompleteGridElement.events.willOpen,
+ SbbAutocompleteGridElement.events.didOpen,
+ SbbAutocompleteGridElement.events.didClose,
+ SbbAutocompleteGridElement.events.willClose,
+ 'change',
+ 'click',
+ SbbAutocompleteGridOptionElement.events.optionSelected,
+ ],
+ },
+ backgroundColor: (context: StoryContext) =>
+ context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
+ docs: {
+ // Setting the iFrame height ensures that the story has enough space when used in the docs section.
+ story: { inline: false, iframeHeight: '500px' },
+ extractComponentDescription: () => readme,
+ },
+ },
+ title: 'elements/sbb-autocomplete-grid/sbb-autocomplete-grid',
+};
+
+export default meta;
diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
new file mode 100644
index 0000000000..3ff62585f1
--- /dev/null
+++ b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
@@ -0,0 +1,226 @@
+import { customElement } from 'lit/decorators.js';
+
+import { SbbAutocompleteBaseElement } from '../../autocomplete.js';
+import { getNextElementIndex } from '../../core/a11y.js';
+import { hostAttributes } from '../../core/decorators.js';
+import { getDocumentWritingMode, isSafari } from '../../core/dom.js';
+import { setAriaComboBoxAttributes } from '../../core/overlay.js';
+import type { SbbDividerElement } from '../../divider.js';
+import type { SbbOptGroupElement, SbbOptionElement } from '../../option.js';
+import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button.js';
+import { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option.js';
+import type { SbbAutocompleteGridRowElement } from '../autocomplete-grid-row.js';
+
+let nextId = 0;
+
+/**
+ * On Safari, the aria role 'listbox' must be on the host element, or else VoiceOver won't work at all.
+ * On the other hand, JAWS and NVDA need the role to be "closer" to the options, or else optgroups won't work.
+ */
+const ariaRoleOnHost = isSafari;
+
+/**
+ * Combined with a native input, it displays a panel with a list of available options with connected buttons.
+ *
+ * @slot - Use the unnamed slot to add `sbb-autocomplete-grid-row` or `sbb-autocomplete-grid-optgroup` elements to the `sbb-autocomplete-grid`.
+ * @event {CustomEvent
+ This text block has a
+ `;
+
+ const createOptionBlockOne = (withIcon: boolean, disableOption: boolean): TemplateResult => html`
+ ${repeat(
+ new Array(3),
+ (_, i) => html`
+ z-index greater than the form field, but it must always be
+ covered by the autocomplete overlay.
+
+ ${template({ ...defaultArgs, negative, borderless })}
+
+ `,
+ {
+ minHeight: '500px',
+ backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+ },
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+ }
+ }
+ }
+ });
+
+ describeViewports({ viewports: ['zero', 'medium'] }, () => {
+ for (const negative of [false, true]) {
+ const style = {
+ minHeight: '400px',
+ backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+ };
+
+ for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) {
+ it(
+ `state=${visualDiffState.name} negative=${negative}`,
+ visualDiffState.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, negative }), style);
+ }),
+ );
+ }
+
+ it(
+ `state=required negative=${negative}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, negative, required: true }), style);
+ }),
+ );
+
+ it(
+ `state=disabled negative=${negative}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, negative, disabled: true }), style);
+ }),
+ );
+
+ it(
+ `state=readonly negative=${negative}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, negative, readonly: true }), style);
+ }),
+ );
+
+ it(
+ `state=borderless negative=${negative}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, negative, borderless: true }), style);
+ }),
+ );
+
+ it(
+ `state=noIcon negative=${negative}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, negative, withIcon: false }), style);
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+
+ for (const withIcon of [false, true]) {
+ it(
+ `state=noSpace negative=${negative} withIcon=${withIcon}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(
+ template({ ...defaultArgs, negative, withIcon, preserveIconSpace: false }),
+ style,
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+ }
+
+ for (const withGroup of [false, true]) {
+ const wrapperStyle = {
+ minHeight: withGroup ? '800px' : '400px',
+ backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+ };
+
+ it(
+ `negative=${negative} withGroup=${withGroup}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(
+ template({ ...defaultArgs, negative, withGroup }),
+ wrapperStyle,
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+
+ it(
+ `negative=${negative} withGroup=${withGroup} disableOption=true`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(
+ template({ ...defaultArgs, negative, withGroup, disableOption: true }),
+ wrapperStyle,
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+ }
+
+ it(
+ `negative=${negative} withGroup=true disableGroup=true`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(
+ template({
+ ...defaultArgs,
+ negative,
+ disableGroup: true,
+ withGroup: true,
+ }),
+ {
+ minHeight: '800px',
+ backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+ },
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+
+ it(
+ `negative=${negative} withGroup=true withMixedOptionAndGroup=true`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(
+ template({ ...defaultArgs, negative, withGroup: true, withMixedOptionAndGroup: true }),
+ {
+ minHeight: '800px',
+ backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+ },
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+ }
+ });
+});
diff --git a/src/elements/autocomplete-grid/autocomplete-grid/readme.md b/src/elements/autocomplete-grid/autocomplete-grid/readme.md
new file mode 100644
index 0000000000..1f67ec358d
--- /dev/null
+++ b/src/elements/autocomplete-grid/autocomplete-grid/readme.md
@@ -0,0 +1,180 @@
+The `sbb-autocomplete-grid` is a component that can be used to display a panel of suggested options connected to a text input,
+with each option connected to one or more buttons.
+Use it when you need an autocomplete in which every selectable option in the panel needs one or more related button.
+If you don't need actions, use the [sbb-autocomplete](/docs/elements-sbb-autocomplete---docs).
+
+The component is strictly connected to:
+
+- the [sbb-autocomplete-grid-row](/docs/elements-sbb-autocomplete-sbb-autocomplete-grid-row--docs), which is a wrapper for both option and buttons;
+- the [sbb-autocomplete-grid-option](/docs/elements-sbb-autocomplete-sbb-autocomplete-grid-option--docs), which displays a selectable option within a panel;
+- the [sbb-autocomplete-grid-cell](/docs/elements-sbb-autocomplete-sbb-autocomplete-grid-cell--docs), which is a wrapper a for button element;
+- the [sbb-autocomplete-grid-button](/docs/elements-sbb-autocomplete-sbb-autocomplete-grid-button--docs), which displays a button within a row;
+- the [sbb-autocomplete-grid-optgroup](/docs/elements-sbb-autocomplete-sbb-autocomplete-grid-optgroup--docs), which can be used to group more row within a group.
+
+It's possible to set the element to which the component's panel will be attached using the `origin` prop,
+and the input which will work as a trigger using the `trigger` prop.
+Both accept an id or an element reference.
+
+```html
+
+Another origin
+
+
+
+
+
+
+ `;
+ }
+}
diff --git a/src/elements/autocomplete/autocomplete.spec.ts b/src/elements/autocomplete/autocomplete.spec.ts
index cec3ff3584..1a8e1dcfc1 100644
--- a/src/elements/autocomplete/autocomplete.spec.ts
+++ b/src/elements/autocomplete/autocomplete.spec.ts
@@ -2,9 +2,10 @@ import { assert, expect } from '@open-wc/testing';
import { sendKeys, sendMouse } from '@web/test-runner-commands';
import { html } from 'lit/static-html.js';
+import { isSafari } from '../core/dom.js';
import { tabKey } from '../core/testing/private/keys.js';
import { fixture } from '../core/testing/private.js';
-import { waitForCondition, waitForLitRender, EventSpy } from '../core/testing.js';
+import { waitForCondition, waitForLitRender, EventSpy, describeIf } from '../core/testing.js';
import { SbbFormFieldElement } from '../form-field.js';
import { SbbOptionElement } from '../option.js';
@@ -29,19 +30,38 @@ describe(`sbb-autocomplete`, () => {
element = formField.querySelector${overlayGapFixCorners()}
+ (this._overlay = overlayRef as HTMLElement))}
+ >
+
+
+
+
+
-
- `;
+ protected setTriggerAttributes(element: HTMLInputElement): void {
+ setAriaComboBoxAttributes(element, ariaRoleOnHost ? this.id : this.overlayId, false);
}
}
diff --git a/src/elements/autocomplete/autocomplete.visual.spec.ts b/src/elements/autocomplete/autocomplete.visual.spec.ts
new file mode 100644
index 0000000000..ec4d9415b6
--- /dev/null
+++ b/src/elements/autocomplete/autocomplete.visual.spec.ts
@@ -0,0 +1,276 @@
+import { sendKeys } from '@web/test-runner-commands';
+import { html, nothing, type TemplateResult } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import type { VisualDiffSetupBuilder } from '../core/testing/private.js';
+import { describeViewports, visualDiffDefault, visualDiffFocus } from '../core/testing/private.js';
+
+import '../form-field.js';
+import '../form-error.js';
+import '../option.js';
+import './autocomplete.js';
+
+describe('sbb-autocomplete', () => {
+ const defaultArgs = {
+ negative: false,
+ disabled: false,
+ readonly: false,
+ required: false,
+ withIcon: true,
+ preserveIconSpace: true,
+ disableOption: false,
+ borderless: false,
+ withGroup: false,
+ disableGroup: false,
+ withMixedOptionAndGroup: false,
+ };
+
+ const textBlock = (): TemplateResult => html`
+ ${overlayGapFixCorners()}
- (this._overlay = overlayRef as HTMLElement))}
- >
-
-
-
-
-
+ This text block has a
+ `;
+
+ const createOptionBlockOne = (withIcon: boolean, disableOption: boolean): TemplateResult => html`
+ ${repeat(
+ new Array(3),
+ (_, i) => html`
+ z-index greater than the form field, but it must always be
+ covered by the autocomplete overlay.
+
+ ${template({ ...defaultArgs, negative, borderless })}
+
+ `,
+ {
+ minHeight: '500px',
+ backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+ },
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+ }
+ }
+ }
+ });
+
+ describeViewports({ viewports: ['zero', 'medium'] }, () => {
+ for (const negative of [false, true]) {
+ const style = {
+ minHeight: '400px',
+ backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+ };
+
+ for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) {
+ it(
+ `state=${visualDiffState.name} negative=${negative}`,
+ visualDiffState.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, negative }), style);
+ }),
+ );
+ }
+
+ it(
+ `state=required negative=${negative}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, negative, required: true }), style);
+ }),
+ );
+
+ it(
+ `state=disabled negative=${negative}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, negative, disabled: true }), style);
+ }),
+ );
+
+ it(
+ `state=readonly negative=${negative}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, negative, readonly: true }), style);
+ }),
+ );
+
+ it(
+ `state=borderless negative=${negative}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, negative, borderless: true }), style);
+ }),
+ );
+
+ it(
+ `state=noIcon negative=${negative}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, negative, withIcon: false }), style);
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+
+ for (const withIcon of [false, true]) {
+ it(
+ `state=noSpace negative=${negative} withIcon=${withIcon}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(
+ template({ ...defaultArgs, negative, withIcon, preserveIconSpace: false }),
+ style,
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+ }
+
+ for (const withGroup of [false, true]) {
+ const wrapperStyle = {
+ minHeight: withGroup ? '800px' : '400px',
+ backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+ };
+
+ it(
+ `negative=${negative} withGroup=${withGroup}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(
+ template({ ...defaultArgs, negative, withGroup }),
+ wrapperStyle,
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+
+ it(
+ `negative=${negative} withGroup=${withGroup} disableOption=true`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(
+ template({ ...defaultArgs, negative, withGroup, disableOption: true }),
+ wrapperStyle,
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+ }
+
+ it(
+ `negative=${negative} withGroup=true disableGroup=true`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(
+ template({
+ ...defaultArgs,
+ negative,
+ disableGroup: true,
+ withGroup: true,
+ }),
+ {
+ minHeight: '800px',
+ backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+ },
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+
+ it(
+ `negative=${negative} withGroup=true withMixedOptionAndGroup=true`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(
+ template({ ...defaultArgs, negative, withGroup: true, withMixedOptionAndGroup: true }),
+ {
+ minHeight: '800px',
+ backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+ },
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+ }
+ });
+});
diff --git a/src/elements/autocomplete/readme.md b/src/elements/autocomplete/readme.md
index 4e54c54a6f..50d73055c7 100644
--- a/src/elements/autocomplete/readme.md
+++ b/src/elements/autocomplete/readme.md
@@ -1,4 +1,6 @@
The `sbb-autocomplete` is a component that can be used to display a panel of suggested options connected to a text input.
+Use it when you need a basic autocomplete: a panel with a list of selectable and possibly grouped options.
+If you need buttons connected to the options, use the [sbb-autocomplete-grid](/docs/elements-sbb-autocomplete-grid-sbb-autocomplete-grid--docs).
It's possible to set the element to which the component's panel will be attached using the `origin` prop,
and the input which will work as a trigger using the `trigger` prop.
@@ -100,7 +102,7 @@ using `aria-activedescendant` to support navigation though the autocomplete opti
| Name | Attribute | Privacy | Type | Default | Description |
| ------------------- | --------------------- | ------- | ----------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. |
-| `origin` | `origin` | public | `string \| HTMLElement \| undefined` | | The element where the autocomplete will attach; accepts both an element's id or an HTMLElement. If not set, will search for the first 'sbb-form-field' ancestor. |
+| `origin` | `origin` | public | `string \| HTMLElement \| undefined` | | The element where the autocomplete will attach; accepts both an element's id or an HTMLElement. If not set, it will search for the first 'sbb-form-field' ancestor. |
| `originElement` | - | public | `HTMLElement` | | Returns the element where autocomplete overlay is attached to. |
| `preserveIconSpace` | `preserve-icon-space` | public | `boolean \| undefined` | | Whether the icon space is preserved when no icon is set. |
| `trigger` | `trigger` | public | `string \| HTMLInputElement \| undefined` | | The input element that will trigger the autocomplete opening; accepts both an element's id or an HTMLElement. By default, the autocomplete will open on focus, click, input or `ArrowDown` keypress of the 'trigger' element. If not set, will search for the first 'input' child of a 'sbb-form-field' ancestor. |
diff --git a/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.ts b/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.ts
index b31709d199..7afb87643d 100644
--- a/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.ts
+++ b/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.ts
@@ -82,6 +82,7 @@ export class SbbBreadcrumbGroupElement extends SbbNamedSlotListMixin<
protected override firstUpdated(changedProperties: PropertyValues
+
+
+
-
-
-
+ ${template(args)}
+
+ `;
+
+ const autocompleteTemplate = (args: typeof defaultArgs): TemplateResult => html`
+
+
+ `;
+ }
+}
diff --git a/src/elements/option/option/option.scss b/src/elements/option/option/option.scss
index 06bb282543..9e1dbb3c1f 100644
--- a/src/elements/option/option/option.scss
+++ b/src/elements/option/option/option.scss
@@ -45,7 +45,7 @@
--sbb-option-background-color: var(--sbb-option-background-color-active);
}
-// if the highlight is enabled, hide the slot content
+// If highlighting is enabled, hide the original slot content
:host(:not([data-disable-highlight])) {
.sbb-option__label slot {
display: none;
diff --git a/src/elements/option/option/option.stories.ts b/src/elements/option/option/option.stories.ts
index 5acbbe8a35..4b0231c084 100644
--- a/src/elements/option/option/option.stories.ts
+++ b/src/elements/option/option/option.stories.ts
@@ -104,9 +104,8 @@ const createOptions = ({
?disabled=${disabled && i === 0}
value=${`${value} ${i + 1}`}
${sbbSpread(args)}
+ >${`${value} ${i + 1}`}
- ${`${value} ${i + 1}`}
-
`;
}),
html`
diff --git a/src/elements/option/option/option.ts b/src/elements/option/option/option.ts
index 5cf7d14222..15d71b36ba 100644
--- a/src/elements/option/option/option.ts
+++ b/src/elements/option/option/option.ts
@@ -1,40 +1,14 @@
-import {
- type CSSResultGroup,
- html,
- LitElement,
- nothing,
- type PropertyValues,
- type TemplateResult,
-} from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import { html, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
-import { SbbConnectedAbortController } from '../../core/controllers.js';
-import { hostAttributes, slotState } from '../../core/decorators.js';
-import { isAndroid, isSafari, setOrRemoveAttribute } from '../../core/dom.js';
+import { hostAttributes } from '../../core/decorators.js';
import { EventEmitter } from '../../core/eventing.js';
-import { SbbDisabledMixin, SbbHydrationMixin } from '../../core/mixins.js';
-import { AgnosticMutationObserver } from '../../core/observers.js';
-import { SbbIconNameMixin } from '../../icon.js';
+import { SbbOptionBaseElement } from './option-base-element.js';
import style from './option.scss?lit&inline';
-
-import '../../screen-reader-only.js';
import '../../visual-checkbox.js';
-/**
- * On Safari, the groups labels are not read by VoiceOver.
- * To solve the problem, we remove the role="group" and add an hidden span containing the group name
- * TODO: We should periodically check if it has been solved and, if so, remove the property.
- */
-const inertAriaGroups = isSafari;
-
-let nextId = 0;
-
-/** Configuration for the attribute to look at if component is nested in a sbb-checkbox-group */
-const optionObserverConfig: MutationObserverInit = {
- attributeFilter: ['data-group-disabled', 'data-negative'],
-};
-
export type SbbOptionVariant = 'autocomplete' | 'select' | null;
/**
@@ -51,71 +25,27 @@ export type SbbOptionVariant = 'autocomplete' | 'select' | null;
@hostAttributes({
role: 'option',
})
-@slotState()
-export class SbbOptionElement extends SbbDisabledMixin(
- SbbIconNameMixin(SbbHydrationMixin(LitElement)),
-) {
+export class SbbOptionElement extends SbbOptionBaseElement {
public static override styles: CSSResultGroup = style;
public static readonly events = {
selectionChange: 'optionSelectionChange',
optionSelected: 'optionSelected',
} as const;
- /**
- * Value of the option.
- *
- * @description Developer note: In this case updating the attribute must be synchronous.
- * Due to this it is implemented as a getter/setter and the attributeChangedCallback() handles the diff check.
- */
- @property()
- public set value(value: string) {
- this.setAttribute('value', `${value}`);
- }
- public get value(): string {
- return this.getAttribute('value') ?? '';
- }
-
- /** Whether the option is currently active. */
- @property({ reflect: true, type: Boolean }) public active?: boolean;
-
- /** Whether the option is selected. */
- @property({ type: Boolean })
- public set selected(value: boolean) {
- this.toggleAttribute('selected', value);
- this._updateAriaSelected();
- }
- public get selected(): boolean {
- return this.hasAttribute('selected');
- }
+ protected optionId = `sbb-option`;
/** Emits when the option selection status changes. */
- private _selectionChange: EventEmitter = new EventEmitter(
+ protected selectionChange: EventEmitter = new EventEmitter(
this,
SbbOptionElement.events.selectionChange,
);
/** Emits when an option was selected by user. */
- private _optionSelected: EventEmitter = new EventEmitter(
+ protected optionSelected: EventEmitter = new EventEmitter(
this,
SbbOptionElement.events.optionSelected,
);
- /** Whether to apply the negative styling */
- @state() private _negative = false;
-
- /** Whether the component must be set disabled due disabled attribute on sbb-checkbox-group. */
- @state() private _disabledFromGroup = false;
-
- @state() private _label?: string;
-
- /** The portion of the highlighted label. */
- @state() private _highlightString: string | null = null;
-
- /** Disable the highlight of the label. */
- @state() private _disableLabelHighlight: boolean = false;
-
- @state() private _inertAriaGroups = false;
-
private set _variant(state: SbbOptionVariant) {
if (state) {
this.setAttribute('data-variant', state);
@@ -132,62 +62,24 @@ export class SbbOptionElement extends SbbDisabledMixin(
return !this.hydrationRequired && this.hasAttribute('data-multiple');
}
- private _abort = new SbbConnectedAbortController(this);
-
- /** MutationObserver on data attributes. */
- private _optionAttributeObserver = new AgnosticMutationObserver((mutationsList) =>
- this._onOptionAttributesChange(mutationsList),
- );
-
- public constructor() {
- super();
-
- if (inertAriaGroups) {
- if (this.hydrationRequired) {
- this.hydrationComplete.then(() => (this._inertAriaGroups = inertAriaGroups));
- } else {
- this._inertAriaGroups = inertAriaGroups;
- }
- }
- }
-
- public override attributeChangedCallback(
- name: string,
- old: string | null,
- value: string | null,
- ): void {
- if (name !== 'value' || old !== value) {
- super.attributeChangedCallback(name, old, value);
+ protected setAttributeFromParent(): void {
+ const parentGroup = this.closest?.('sbb-optgroup');
+ if (parentGroup) {
+ this.disabledFromGroup = parentGroup.disabled;
+ this.updateAriaDisabled();
}
- }
- /**
- * Highlight the label of the option
- * @param value the highlighted portion of the label
- * @internal
- */
- public highlight(value: string): void {
- this._highlightString = value;
- }
-
- /**
- * @internal
- */
- public setSelectedViaUserInteraction(selected: boolean): void {
- this.selected = selected;
- this._selectionChange.emit();
- if (this.selected) {
- this._optionSelected.emit();
- }
- }
+ this.negative = !!this.closest?.(
+ // :is() selector not possible due to test environment
+ `sbb-autocomplete[negative],sbb-form-field[negative]`,
+ );
+ this.toggleAttribute('data-negative', this.negative);
- private _updateDisableHighlight(disabled: boolean): void {
- this._disableLabelHighlight = disabled;
- this.toggleAttribute('data-disable-highlight', disabled);
+ this.toggleAttribute('data-multiple', this._isMultiple);
}
- private _selectByClick(event: MouseEvent): void {
- if (this.disabled || this._disabledFromGroup) {
+ protected selectByClick(event: MouseEvent): void {
+ if (this.disabled || this.disabledFromGroup) {
event.stopPropagation();
return;
}
@@ -202,74 +94,15 @@ export class SbbOptionElement extends SbbDisabledMixin(
public override connectedCallback(): void {
super.connectedCallback();
-
- this.id ||= `sbb-option-${nextId++}`;
-
- if (this.hydrationRequired) {
- this.hydrationComplete.then(() => this._init());
- } else {
- this._init();
- }
}
- protected override willUpdate(changedProperties: PropertyValues
+ ${this.renderIcon()}
+
+
+ (${this.getAttribute('data-group-label')}) `
+ : nothing}
+
+ ${this.renderTick()}
+
+
-
- `;
+ protected override renderTick(): TemplateResult | typeof nothing {
+ return this._variant === 'select' && !this._isMultiple && this.selected
+ ? html`
-
- ${!isMultiple
- ? html` ${this.renderIconSlot()} `
- : nothing}
-
-
- ${isMultiple
- ? html`
- (${this.getAttribute('data-group-label')}) `
- : nothing}
-
+ protected override renderLabel(): TemplateResult | typeof nothing {
+ return this._variant === 'autocomplete' && this.label && !this.disableLabelHighlight
+ ? this.getHighlightedLabel()
+ : nothing;
+ }
-
- ${this._variant === 'select' && !isMultiple && this.selected
- ? html`
-
+ ${createOptions(args)}
+
+ `;
+
+ const autocompleteTemplate = (args: typeof defaultArgs): TemplateResult => html`
+ { "role": "WebArea", diff --git a/src/elements/table/table-wrapper/__snapshots__/table-wrapper.snapshot.spec.snap.js b/src/elements/table/table-wrapper/__snapshots__/table-wrapper.snapshot.spec.snap.js index af5743f875..956b7eacac 100644 --- a/src/elements/table/table-wrapper/__snapshots__/table-wrapper.snapshot.spec.snap.js +++ b/src/elements/table/table-wrapper/__snapshots__/table-wrapper.snapshot.spec.snap.js @@ -40,7 +40,7 @@ snapshots["sbb-table-wrapper renders Shadow DOM"] = `; /* end snapshot sbb-table-wrapper renders Shadow DOM */ -snapshots["sbb-table-wrapper renders A11y tree Chrome"] = +snapshots["sbb-table-wrapper renders A11y tree Chrome"] = `
{ "role": "WebArea", diff --git a/src/elements/time-input/__snapshots__/time-input.snapshot.spec.snap.js b/src/elements/time-input/__snapshots__/time-input.snapshot.spec.snap.js index 4e883f9860..3cad41657a 100644 --- a/src/elements/time-input/__snapshots__/time-input.snapshot.spec.snap.js +++ b/src/elements/time-input/__snapshots__/time-input.snapshot.spec.snap.js @@ -1,7 +1,7 @@ /* @web/test-runner snapshot v1 */ export const snapshots = {}; -snapshots["sbb-time-input A11y tree Chrome"] = +snapshots["sbb-time-input A11y tree Chrome"] = `
{ "role": "WebArea", @@ -17,7 +17,7 @@ snapshots["sbb-time-input A11y tree Chrome"] = `; /* end snapshot sbb-time-input A11y tree Chrome */ -snapshots["sbb-time-input A11y tree Firefox"] = +snapshots["sbb-time-input A11y tree Firefox"] = `
{ "role": "document", @@ -55,7 +55,7 @@ snapshots["sbb-time-input renders Shadow DOM"] = `; /* end snapshot sbb-time-input renders Shadow DOM */ -snapshots["sbb-time-input renders A11y tree Chrome"] = +snapshots["sbb-time-input renders A11y tree Chrome"] = `
{ "role": "WebArea", diff --git a/tools/manifest/custom-elements-manifest.config.js b/tools/manifest/custom-elements-manifest.config.js index baccff68fb..927f02bdf5 100644 --- a/tools/manifest/custom-elements-manifest.config.js +++ b/tools/manifest/custom-elements-manifest.config.js @@ -52,7 +52,8 @@ export function createManifestConfig(library = '') { for (const module of customElementsManifest.modules) { fixModulePaths(module, fixTsPaths); for (const declaration of module.declarations.filter((d) => d.kind === 'class')) { - if (declaration.name === 'SbbIconBase') { + // Abstract base classes are considered components even if they don't have the `customElement` annotation. + if (declaration.name.includes('Base')) { delete declaration.customElement; } for (const member of declaration.members) {