fix: add styles, minor fix in ts and stories

src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.scss

@@ -6,5 +6,5 @@
 
 .sbb-autocomplete-grid-action {
   display: flex;
-  column-gap: var(--sbb-spacing-responsive-xxxs); // FIXME
+  column-gap: var(--sbb-spacing-fixed-1x);
 }

src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts

@@ -8,7 +8,7 @@ import {
 } from '../../core/common-behaviors';
 import { isValidAttribute, setAttribute } from '../../core/dom';
 import { AgnosticMutationObserver } from '../../core/observers';
-import type { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option';
+import { type SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option';
 
 import '../../icon';
 import style from './autocomplete-grid-button.scss?lit&inline';
@@ -62,7 +62,26 @@ export class SbbAutocompleteGridButtonElement extends SbbDisabledMixin(SbbMiniBu
   }
 
   public dispatchClick(event: KeyboardEvent): void {
-    return super.dispatchClickEvent(event);
+    return this.dispatchClickEvent(event);
+  }
+
+  // Event needs to be dispatched from the action element; in autocomplete-grid,
+  // the input has always the focus, so the `event.target` on parent class is the input and not the button.
+  protected override dispatchClickEvent(event: KeyboardEvent): void {
+    const { altKey, ctrlKey, metaKey, shiftKey } = event;
+    this.dispatchEvent(
+      new PointerEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        pointerId: -1,
+        pointerType: '',
+        altKey,
+        ctrlKey,
+        metaKey,
+        shiftKey,
+      }),
+    );
   }
 
   /** Gets the SbbAutocompleteGridOptionElement on the same row of the button. */

src/components/autocomplete-grid/autocomplete-grid-button/readme.md

@@ -106,6 +106,12 @@ Use the accessibility properties to describe the purpose of the `sbb-autocomplet
 | --------------- | ------- | ----------- | ---------------------- | ------ | -------------- |
 | `dispatchClick` | public  |             | `event: KeyboardEvent` | `void` |                |
 
+## Events
+
+| Name    | Type           | Description | Inherited From |
+| ------- | -------------- | ----------- | -------------- |
+| `click` | `PointerEvent` |             |                |
+
 ## Slots
 
 | Name   | Description                                  |

src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss

@@ -0,0 +1,58 @@
+@use '../../core/styles/index' as sbb;
+
+// Default component properties, defined for :host. Properties which can not
+// travel the shadow boundary are defined through this mixin
+@include sbb.host-component-properties;
+
+: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);
+}
+
+:host([data-negative]) {
+  --sbb-option-color: var(--sbb-color-milk);
+  --sbb-option-icon-color: var(--sbb-color-smoke);
+}
+
+// if the highlight is enabled, hide the 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;
+  color: var(--sbb-option-color);
+}
+
+.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);
+  }
+}
+
+.sbb-option__label {
+  white-space: initial;
+}

src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts

@@ -1,11 +1,13 @@
-import type { TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import { assignId } from '../../core/a11y';
 import { hostAttributes, SbbOptionBaseElement } from '../../core/common-behaviors';
 import { EventEmitter } from '../../core/eventing';
 
 import '../../icon';
+import '../../screenreader-only';
+import style from './autocomplete-grid-option.scss?lit&inline';
 
 let nextId = 0;
 
@@ -24,6 +26,7 @@ let nextId = 0;
   role: 'gridcell',
 })
 export class SbbAutocompleteGridOptionElement extends SbbOptionBaseElement {
+  public static override styles: CSSResultGroup = style;
   public static readonly events = {
     selectionChange: 'autocompleteOptionSelectionChange',
     optionSelected: 'autocompleteOptionSelected',
@@ -43,17 +46,33 @@ export class SbbAutocompleteGridOptionElement extends SbbOptionBaseElement {
     SbbAutocompleteGridOptionElement.events.optionSelected,
   );
 
+  public override willUpdate(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has('active')) {
+      this.closest?.('sbb-autocomplete-grid-row')?.toggleAttribute('data-active');
+    }
+    if (changedProperties.has('disabled')) {
+      this.closest?.('sbb-autocomplete-grid-row')?.toggleAttribute(
+        'data-disabled',
+        this.disabled || this.disabledFromGroup,
+      );
+    }
+  }
+
   protected setAttributeFromParent(): void {
     const parentGroup = this.closest?.('sbb-autocomplete-grid-optgroup');
     if (parentGroup) {
       this.disabledFromGroup = parentGroup.disabled;
     }
+    this.closest?.('sbb-autocomplete-grid-row')?.toggleAttribute(
+      'data-disabled',
+      this.disabled || this.disabledFromGroup,
+    );
 
     this.negative = !!this.closest?.(
       // :is() selector not possible due to test environment
       `sbb-autocomplete-grid[negative],sbb-form-field[negative]`,
     );
-    this.toggleAttribute('data-group-negative', this.negative);
+    this.toggleAttribute('data-negative', this.negative);
   }
 
   protected selectByClick(event: MouseEvent): void {

src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.scss

@@ -4,10 +4,101 @@
 // travel the shadow boundary are defined through this mixin
 @include sbb.host-component-properties;
 
+: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: var(--sbb-spacing-responsive-xxxs);
+  --sbb-autocomplete-grid-row-padding-block: calc(
+    var(--sbb-spacing-fixed-2x) + var(--sbb-border-width-2x)
+  );
+  --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);
+}
+
+: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([data-active]) {
+  --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
+}
+
+: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-active]):not([data-disabled]) {
+  --sbb-autocomplete-grid-row-background-color: var(
+    --sbb-autocomplete-grid-row-background-color-active
+  );
+}
+
+:host(:is([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;
+}
+
 .sbb-autocomplete-grid-row {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding-inline: var(--sbb-spacing-responsive-xxxs);
-  padding-block: calc(var(--sbb-spacing-fixed-2x) + var(--sbb-border-width-2x));
+  padding-inline: var(--sbb-autocomplete-grid-row-padding-inline);
+  padding-block: var(--sbb-autocomplete-grid-row-padding-block);
+  justify-content: var(--sbb-autocomplete-grid-row-justify-content);
+  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);
+
+  :host([data-active]) & {
+    @include sbb.focus-outline;
+
+    border-radius: var(--sbb-autocomplete-grid-row-border-radius);
+  }
+
+  // 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;
+      }
+    }
+  }
 }

src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts

@@ -25,7 +25,7 @@ import '../../form-field';
 const getOption = (event: Event): void => {
   const button = event.target as SbbAutocompleteGridButtonElement;
   const div: HTMLDivElement = document.createElement('div');
-  div.innerText = `Button has been clicked on row with label: '${button.optionOnSameRow?.textContent}' and value: '${button.optionOnSameRow?.value}'`;
+  div.innerText = `Button '${button.iconName}' clicked on row '${button.optionOnSameRow?.textContent}' / value: '${button.optionOnSameRow?.value}'`;
   (event.currentTarget as HTMLElement).closest('div')!.querySelector('#container')!.prepend(div);
 };
 
@@ -105,6 +105,15 @@ const optionIconName: InputType = {
   },
 };
 
+const disableOption: InputType = {
+  control: {
+    type: 'boolean',
+  },
+  table: {
+    category: 'Option',
+  },
+};
+
 const buttonIconName: InputType = {
   control: {
     type: 'text',
@@ -130,6 +139,7 @@ const defaultArgTypes: ArgTypes = {
 
   // Option args
   optionIconName,
+  disableOption,
 
   // Button args
   buttonIconName,
@@ -151,23 +161,32 @@ const defaultArgs: Args = {
 
   // Option args
   optionIconName: 'clock-small',
+  disableOption: false,
 
   // Button args
   buttonIconName: 'pen-small',
 };
 
-const createRows1 = (optionIconName: string, buttonIconName: string): TemplateResult => html`
+const createRows1 = (
+  optionIconName: string,
+  buttonIconName: string,
+  disableOption: boolean,
+): TemplateResult => html`
   ${repeat(
     new Array(3),
     (_, i: number) => html`
       <sbb-autocomplete-grid-row>
-        <sbb-autocomplete-grid-option value=${`1-${i + 1}`} icon-name=${optionIconName || nothing}
+        <sbb-autocomplete-grid-option
+          value=${`1-${i + 1}`}
+          icon-name=${optionIconName || nothing}
+          ?disabled=${disableOption && i === 1}
           >${`Option 1-${i + 1}`}</sbb-autocomplete-grid-option
         >
         <sbb-autocomplete-grid-actions>
           <sbb-autocomplete-grid-button
             icon-name=${buttonIconName}
             aria-label=${buttonIconName}
+            ?disabled=${disableOption && i === 1}
             @click=${(event: Event) => getOption(event)}
           ></sbb-autocomplete-grid-button>
         </sbb-autocomplete-grid-actions>
@@ -176,23 +195,25 @@ const createRows1 = (optionIconName: string, buttonIconName: string): TemplateRe
   )}
 `;
 
-const createRows2 = (buttonIconName: string): TemplateResult => html`
+const createRows2 = (buttonIconName: string, disableOption: boolean): TemplateResult => html`
   ${repeat(
     new Array(3),
     (_, i: number) => html`
       <sbb-autocomplete-grid-row>
-        <sbb-autocomplete-grid-option value=${`2-${i + 1}`}
+        <sbb-autocomplete-grid-option value=${`2-${i + 1}`} ?disabled=${disableOption && i === 1}
           >${`Option 2-${i + 1}`}</sbb-autocomplete-grid-option
         >
         <sbb-autocomplete-grid-actions>
           <sbb-autocomplete-grid-button
             icon-name=${buttonIconName}
             aria-label=${buttonIconName}
+            ?disabled=${disableOption && i === 1}
             @click=${(event: Event) => getOption(event)}
           ></sbb-autocomplete-grid-button>
           <sbb-autocomplete-grid-button
             icon-name="trash-small"
             aria-label="trash-small"
+            ?disabled=${disableOption && i === 1}
             @click=${(event: Event) => getOption(event)}
           ></sbb-autocomplete-grid-button>
         </sbb-autocomplete-grid-actions>
@@ -242,11 +263,18 @@ const Template = (args: Args): TemplateResult => html`
         ?disable-animation=${args.disableAnimation}
         ?preserve-icon-space=${args.preserveIconSpace}
       >
-        ${createRows1(args.optionIconName, args.buttonIconName)} ${createRows2(args.buttonIconName)}
+        ${createRows1(args.optionIconName, args.buttonIconName, args.disableOption)}
+        ${createRows2(args.buttonIconName, args.disableOptio1n)}
       </sbb-autocomplete-grid>
     </sbb-form-field>
     ${textBlock()}
-    <div id="container" style="padding-block: 1rem;"></div>
+    <div
+      id="container"
+      style=${styleMap({
+        color: args.negative ? 'var(--sbb-color-white)' : 'var(--sbb-color-black)',
+        paddingBlock: '1rem',
+      })}
+    ></div>
   </div>
 `;