diff --git a/packages/web-components/src/toolbar/fixtures/toolbar.html b/packages/web-components/src/toolbar/fixtures/toolbar.html index fd9f2dd75a1348..26f45494f2e73b 100644 --- a/packages/web-components/src/toolbar/fixtures/toolbar.html +++ b/packages/web-components/src/toolbar/fixtures/toolbar.html @@ -9,7 +9,12 @@ @@ -133,9 +138,9 @@

Slotted End Items w/ Min Width

-

Toolbar with slotted label

+

Toolbar with slotted span label

- + Span Label @@ -158,6 +163,7 @@

Toolbar with invisible label

Vertical orientation

+ Span Label @@ -195,6 +201,7 @@

Disabled Elements

+ Span Label One Two Three diff --git a/packages/web-components/src/toolbar/toolbar.styles.ts b/packages/web-components/src/toolbar/toolbar.styles.ts index d38db7282e942a..48acb6c3862d86 100644 --- a/packages/web-components/src/toolbar/toolbar.styles.ts +++ b/packages/web-components/src/toolbar/toolbar.styles.ts @@ -29,6 +29,7 @@ export const toolbarStyles: ( fill: currentcolor; padding: var(--toolbar-item-gap); box-sizing: border-box; + align-items: center; } :host(${focusVisible}) { @@ -57,6 +58,11 @@ export const toolbarStyles: ( margin: var(--toolbar-item-gap) 0; } + :host([orientation="vertical"]) { + display: inline-flex; + flex-direction: column; + } + .start, .end { display: flex;