diff --git a/src/components/dropdown/themes/dropdown-item.base.scss b/src/components/dropdown/themes/dropdown-item.base.scss
index 4a03ba320..2a5369428 100644
--- a/src/components/dropdown/themes/dropdown-item.base.scss
+++ b/src/components/dropdown/themes/dropdown-item.base.scss
@@ -12,8 +12,7 @@
position: relative;
cursor: pointer;
outline-style: none;
- padding-inline: pad-inline(rem(6px), rem(12px), rem(24px));
- padding-block: pad-block(rem(2px), rem(4px), rem(8px));
+ padding-inline: pad-inline(rem(16px), rem(20px), rem(24px));
}
:host([disabled]) {
@@ -43,11 +42,11 @@
[name='prefix']::slotted(*) {
--component-size: var(--dropdown-size) !important;
- margin-inline-end: pad(rem(16px));
+ margin-inline-end: pad(rem(8px));
}
[name='suffix']::slotted(*) {
--component-size: var(--dropdown-size) !important;
- margin-inline-start: pad(rem(16px));
+ margin-inline-start: pad(rem(8px));
}
diff --git a/src/components/dropdown/themes/header.ts b/src/components/dropdown/themes/header.ts
index ed4a937c4..1309a3209 100644
--- a/src/components/dropdown/themes/header.ts
+++ b/src/components/dropdown/themes/header.ts
@@ -2,25 +2,18 @@ import { css } from 'lit';
import type { Themes } from '../../../theming/types.js';
// Shared Styles
-import { styles as fluent } from './shared/header/dropdown-header.fluent.css.js';
import { styles as indigo } from './shared/header/dropdown-header.indigo.css.js';
const light = {
indigo: css`
${indigo}
`,
- fluent: css`
- ${fluent}
- `,
};
const dark = {
indigo: css`
${indigo}
`,
- fluent: css`
- ${fluent}
- `,
};
export const all: Themes = { light, dark };
diff --git a/src/components/dropdown/themes/shared/dropdown.common.scss b/src/components/dropdown/themes/shared/dropdown.common.scss
index 9a56af225..c03913369 100644
--- a/src/components/dropdown/themes/shared/dropdown.common.scss
+++ b/src/components/dropdown/themes/shared/dropdown.common.scss
@@ -10,6 +10,7 @@ $theme: $base;
}
[part='base'] {
+ box-shadow: var-get($theme, 'elevation');
background: var-get($theme, 'background-color');
border-radius: var-get($theme, 'border-radius');
}
diff --git a/src/components/dropdown/themes/shared/dropdown.fluent.scss b/src/components/dropdown/themes/shared/dropdown.fluent.scss
index 818b5ad4d..8436f1dfd 100644
--- a/src/components/dropdown/themes/shared/dropdown.fluent.scss
+++ b/src/components/dropdown/themes/shared/dropdown.fluent.scss
@@ -7,6 +7,3 @@ $theme: $fluent;
--component-size: var(--ig-size, #{var-get($theme, 'default-size')});
}
-[part='base'] {
- box-shadow: var(--ig-elevation-4);
-}
diff --git a/src/components/dropdown/themes/shared/dropdown.indigo.scss b/src/components/dropdown/themes/shared/dropdown.indigo.scss
index 87bd6d6ce..b46623df4 100644
--- a/src/components/dropdown/themes/shared/dropdown.indigo.scss
+++ b/src/components/dropdown/themes/shared/dropdown.indigo.scss
@@ -8,7 +8,6 @@ $theme: $indigo;
}
[part='base'] {
- box-shadow: var-get($theme, 'elevation');
padding: rem(3px);
outline: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
outline-offset: rem(-1px);
diff --git a/src/components/dropdown/themes/shared/dropdown.material.scss b/src/components/dropdown/themes/shared/dropdown.material.scss
index 71cbb1e7c..7eee1cf84 100644
--- a/src/components/dropdown/themes/shared/dropdown.material.scss
+++ b/src/components/dropdown/themes/shared/dropdown.material.scss
@@ -6,8 +6,3 @@ $theme: $material;
:host {
--component-size: var(--ig-size, #{var-get($theme, 'default-size')});
}
-
-[part='base'] {
- box-shadow: var(--ig-elevation-8);
- padding: rem(8px) 0;
-}
diff --git a/src/components/dropdown/themes/shared/header/dropdown-header.common.scss b/src/components/dropdown/themes/shared/header/dropdown-header.common.scss
index 6cc32d1aa..f6b6924e0 100644
--- a/src/components/dropdown/themes/shared/header/dropdown-header.common.scss
+++ b/src/components/dropdown/themes/shared/header/dropdown-header.common.scss
@@ -4,7 +4,9 @@
$theme: $base;
:host {
+ height: var-get($theme, 'size');
color: var-get($theme, 'header-text-color');
- padding-inline: pad-inline(rem(4px), rem(8px), rem(16px));
- padding-block: pad-block(rem(2px), rem(4px), rem(8px));
+ padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+ display: flex;
+ align-items: center;
}
diff --git a/src/components/dropdown/themes/shared/header/dropdown-header.fluent.scss b/src/components/dropdown/themes/shared/header/dropdown-header.fluent.scss
deleted file mode 100644
index 98588567c..000000000
--- a/src/components/dropdown/themes/shared/header/dropdown-header.fluent.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use 'styles/utilities' as *;
-
-:host {
- padding: pad(rem(2px), rem(4px), rem(8px));
-}
diff --git a/src/components/dropdown/themes/shared/header/dropdown-header.indigo.scss b/src/components/dropdown/themes/shared/header/dropdown-header.indigo.scss
index 1506a6c47..1583416e4 100644
--- a/src/components/dropdown/themes/shared/header/dropdown-header.indigo.scss
+++ b/src/components/dropdown/themes/shared/header/dropdown-header.indigo.scss
@@ -2,6 +2,4 @@
:host {
padding-inline: pad-inline(rem(8px), rem(12px), rem(12px));
- padding-block: pad-inline(rem(4px), rem(6px), rem(8px));
- margin-block-end: rem(2px);
}
diff --git a/src/components/dropdown/themes/shared/item/dropdown-item.common.scss b/src/components/dropdown/themes/shared/item/dropdown-item.common.scss
index 74ac9609a..518172aab 100644
--- a/src/components/dropdown/themes/shared/item/dropdown-item.common.scss
+++ b/src/components/dropdown/themes/shared/item/dropdown-item.common.scss
@@ -4,6 +4,7 @@
$theme: $material;
:host {
+ height: var-get($theme, 'size');
border-radius: var-get($theme, 'item-border-radius');
color: var-get($theme, 'item-text-color');
diff --git a/src/components/dropdown/themes/shared/item/dropdown-item.fluent.scss b/src/components/dropdown/themes/shared/item/dropdown-item.fluent.scss
index 3f506c12c..14470d81d 100644
--- a/src/components/dropdown/themes/shared/item/dropdown-item.fluent.scss
+++ b/src/components/dropdown/themes/shared/item/dropdown-item.fluent.scss
@@ -3,10 +3,6 @@
$theme: $fluent;
-:host {
- padding: pad(rem(2px), rem(4px), rem(8px));
-}
-
:host([active]:hover) {
background: var-get($theme, 'hover-item-background');
color: var-get($theme, 'hover-item-text-color');
diff --git a/src/components/dropdown/themes/shared/item/dropdown-item.indigo.scss b/src/components/dropdown/themes/shared/item/dropdown-item.indigo.scss
index 9b5f0d9f6..99b84b50b 100644
--- a/src/components/dropdown/themes/shared/item/dropdown-item.indigo.scss
+++ b/src/components/dropdown/themes/shared/item/dropdown-item.indigo.scss
@@ -5,7 +5,6 @@ $theme: $indigo;
:host {
padding-inline: pad-inline(rem(8px), rem(12px), rem(12px));
- padding-block: pad-inline(rem(4px), rem(6px), rem(8px));
margin-block: rem(2px);
--item-icon: #{sizable(rem(14px), rem(16px), rem(16px))};
@@ -15,15 +14,6 @@ $theme: $indigo;
}
}
-[name='prefix']::slotted(*) {
- margin-inline-end: rem(8px);
-}
-
-[name='suffix']::slotted(*) {
- margin-inline-start: rem(8px);
-}
-
-:host(:first-of-type),
:host(:last-of-type) {
margin-block: unset;
}
diff --git a/stories/dropdown.stories.ts b/stories/dropdown.stories.ts
index e8ce2d9bb..ffeb603be 100644
--- a/stories/dropdown.stories.ts
+++ b/stories/dropdown.stories.ts
@@ -171,7 +171,13 @@ const Items = [
'Documentation',
'Builds',
].map(
- (each) => html`${each}`
+ (each) =>
+ html`${each}`
);
const overflowItems = Array.from(range(1, 51)).map(