Dropdown: fix z-index for overlayed card

apps/cookbook/src/app/examples/dropdown-example/dropdown-example.module.ts

@@ -2,8 +2,12 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import { KirbyModule } from '@kirbydesign/designsystem';
-
+import { ButtonComponent } from '@kirbydesign/designsystem/button';
+import { CardModule } from '@kirbydesign/designsystem/card';
+import { DropdownModule } from '@kirbydesign/designsystem/dropdown';
+import { IconModule } from '@kirbydesign/designsystem/icon';
+import { CheckboxComponent } from '@kirbydesign/designsystem/checkbox';
+import { ToastController, ToastHelper } from '@kirbydesign/designsystem/toast';
 import { DropdownExampleConfigurationComponent } from './dropdown-example-configuration-component/dropdown-example-configuration.component';
 import { DropdownExampleAttentionLevelComponent } from './examples/attention-level';
 import { DropdownExampleCustomItemTemplateComponent } from './examples/custom-item-template';
@@ -14,8 +18,10 @@ import { DropdownExampleNgFormsComponent } from './examples/ng-forms';
 import { DropdownExamplePreSelectedComponent } from './examples/pre-selected';
 import { DropdownExampleRightAlignedComponent } from './examples/right-aligned';
 import { DropdownExampleScrollComponent } from './examples/scroll';
+import { DropdownExampleComponent } from './dropdown-example.component';
 
 const COMPONENT_DECLARATIONS = [
+  DropdownExampleComponent,
   DropdownExampleConfigurationComponent,
   DropdownExampleDefaultComponent,
   DropdownExampleScrollComponent,
@@ -29,7 +35,16 @@ const COMPONENT_DECLARATIONS = [
 ];
 
 @NgModule({
-  imports: [CommonModule, KirbyModule, ReactiveFormsModule],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    ButtonComponent,
+    CardModule,
+    DropdownModule,
+    IconModule,
+    CheckboxComponent,
+  ],
+  providers: [ToastHelper, ToastController],
   declarations: COMPONENT_DECLARATIONS,
   exports: COMPONENT_DECLARATIONS,
 })

apps/cookbook/src/app/examples/examples.common.ts

@@ -37,7 +37,6 @@ import { TabExampleMenuComponent } from './tabs-example/tab/tab-example-menu.com
 import { TabsExampleComponent } from './tabs-example/tabs-example.component';
 import { ToastExampleComponent } from './toast-example/toast-example.component';
 import { PagePullToRefreshExampleComponent } from './page-example/pull-to-refresh/page-pull-to-refresh-example.component';
-import { DropdownExampleComponent } from './dropdown-example/dropdown-example.component';
 import { LoadingOverlayServiceExampleComponent } from './loading-overlay-example/service/loading-overlay-service-example.component';
 import { HeaderWithActionGroupExampleComponent } from './header-example/examples/action-group';
 import { HeaderWithEmphasizedActionGroupExampleComponent } from './header-example/examples/emphasize-actions';
@@ -81,7 +80,6 @@ export const COMPONENT_DECLARATIONS: any[] = [
   TabExampleMenuComponent,
   DividerExampleComponent,
   ReorderListExampleComponent,
-  DropdownExampleComponent,
   ProgressCircleExampleComponent,
   FlagExampleComponent,
   SlidesSimpleExampleComponent,

libs/core/src/scss/interaction-state/_focus.scss

@@ -95,5 +95,4 @@
     #{$shadow},
     0 0 0 $gap #{utils.get-color('background-color')},
     0 0 0 $gap + $stroke-width utils.$focus-ring-color;
-  z-index: utils.z('default');
 }

libs/designsystem/calendar/src/calendar.component.scss

@@ -91,6 +91,11 @@ td {
   height: $day-width;
   margin: utils.size('xxxs') 0;
   font-size: utils.font-size('n');
+
+  &:focus {
+    // In narrow viewports where buttons sit side-by-side, ensure focus ring is on top of adjacent buttons.
+    z-index: utils.z('default');
+  }
 }
 
 button[aria-disabled='true'] {

libs/designsystem/dropdown/src/dropdown.component.stories.ts

@@ -1,12 +1,19 @@
-import { type Meta, moduleMetadata, type StoryObj } from '@storybook/angular';
+import { argsToTemplate, type Meta, moduleMetadata, type StoryObj } from '@storybook/angular';
+import { userEvent, within } from '@storybook/test';
+
 import { DropdownComponent, DropdownModule } from '@kirbydesign/designsystem/dropdown';
 
+import { ButtonComponent } from '@kirbydesign/designsystem/button';
+import { DropdownExampleModule } from '~/app/examples/dropdown-example/dropdown-example.module';
+
+const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
+
 const meta: Meta<DropdownComponent> = {
   component: DropdownComponent,
   title: 'Components / Dropdown',
   decorators: [
     moduleMetadata({
-      imports: [DropdownModule],
+      imports: [DropdownModule, ButtonComponent, DropdownExampleModule],
     }),
   ],
   argTypes: {
@@ -27,7 +34,7 @@ type Story = StoryObj<DropdownComponent>;
 
 export const Dropdown: Story = {
   args: {
-    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
+    items: items,
     placeholder: 'Please select:',
     itemTextProperty: 'text',
     attentionLevel: '3',
@@ -61,3 +68,33 @@ export const Dropdown: Story = {
     },
   },
 };
+
+export const DropdownOpened: Story = {
+  args: {
+    items: items,
+    selectedIndex: 0,
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <kirby-dropdown ${argsToTemplate(args)}></kirby-dropdown>
+      <br />
+      <button kirby-button>Button - below</button>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const dropdownToOpen = canvas.getByRole('button', {
+      name: 'Item 1',
+    });
+
+    await userEvent.click(dropdownToOpen);
+  },
+};
+
+export const CookbookExample: Story = {
+  render: () => ({
+    template: `<cookbook-dropdown-example></cookbook-dropdown-example>`,
+  }),
+};