@hermes-ui/angular 0.1.6 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hermes-ui/angular",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "Angular components for Hermes",
   "keywords": [
     "hermes",

package/toast/README.md

@@ -1,65 +1,65 @@
-# Toast
-
-Replicates shadcn's Toast (Base UI primitive) stacking effect natively in hermes/angular:
-newest toast on top, older ones peeking out and scaled down behind it, expanding to a
-full list on hover/focus, sliding in/out with the same 500ms ease-out curve.
-
-## Setup - two separate pieces
-
-`HermesToastService` and `<hermes-toaster>` are not wired to each other automatically;
-each consuming app has to connect them itself:
-
-- **`HermesToastService`** is `@Injectable({ providedIn: 'root' })` - it's available for
-  injection anywhere in the app with zero setup. Calling `show()`/`success()`/etc. just
-  pushes the toast onto an internal `BehaviorSubject`; it does **not** render anything.
-- **`<hermes-toaster>`** is a regular Angular component (selector `hermes-toaster`,
-  from `HermesToastModule`) that has to be placed **once**, manually, somewhere in the
-  app's template - it's the only thing that subscribes to the service and actually
-  draws the stack.
-
-If `<hermes-toaster>` is never mounted, `HermesToastService` calls silently no-op from
-the user's perspective: the toasts pile up in the service's internal state but nothing
-ever appears on screen. Mount it once near the app root (same pattern as shadcn/sonner's
-`<Toaster />`):
-
-```ts
-// app.component.ts
-import { HermesToastModule } from '@hermes/angular/toast';
-
-@Component({
-  imports: [HermesToastModule /* ... */],
-  template: `
-    <router-outlet></router-outlet>
-    <hermes-toaster></hermes-toaster>
-  `,
-})
-export class AppComponent {}
-```
-
-## Triggering toasts
-
-From anywhere in the app, inject `HermesToastService`:
-
-```ts
-constructor(private toasts: HermesToastService) {}
-
-save() {
-  this.toasts.promise(this.api.save(), {
-    loading: 'Saving...',
-    success: 'Saved',
-    error: 'Could not save',
-  });
-}
-```
-
-`HermesToastService` also exposes `show()`, `default()`, `info()`, `success()`, `warning()`,
-`danger()`, `loading()`, `update()`, `dismiss()` and `dismissAll()`.
-
-## Known scope cuts
-
-- **Fixed-ish stack height**: each toast's height is measured live via `ResizeObserver`
-  (see `toast-item.ts`), but the very first render frame uses `--hermes-toast-fallback-height`
-  until that measurement lands.
-- **No swipe-to-dismiss**: shadcn's Base UI toast supports drag-to-dismiss in all four
-  directions; this port dismisses only via the close button, the action button, timeout,
-  or Escape (dismisses the frontmost toast).
+# Toast
+
+Replicates shadcn's Toast (Base UI primitive) stacking effect natively in hermes/angular:
+newest toast on top, older ones peeking out and scaled down behind it, expanding to a
+full list on hover/focus, sliding in/out with the same 500ms ease-out curve.
+
+## Setup - two separate pieces
+
+`HermesToastService` and `<hermes-toaster>` are not wired to each other automatically;
+each consuming app has to connect them itself:
+
+- **`HermesToastService`** is `@Injectable({ providedIn: 'root' })` - it's available for
+  injection anywhere in the app with zero setup. Calling `show()`/`success()`/etc. just
+  pushes the toast onto an internal `BehaviorSubject`; it does **not** render anything.
+- **`<hermes-toaster>`** is a regular Angular component (selector `hermes-toaster`,
+  from `HermesToastModule`) that has to be placed **once**, manually, somewhere in the
+  app's template - it's the only thing that subscribes to the service and actually
+  draws the stack.
+
+If `<hermes-toaster>` is never mounted, `HermesToastService` calls silently no-op from
+the user's perspective: the toasts pile up in the service's internal state but nothing
+ever appears on screen. Mount it once near the app root (same pattern as shadcn/sonner's
+`<Toaster />`):
+
+```ts
+// app.component.ts
+import { HermesToastModule } from '@hermes/angular/toast';
+
+@Component({
+  imports: [HermesToastModule /* ... */],
+  template: `
+    <router-outlet></router-outlet>
+    <hermes-toaster></hermes-toaster>
+  `,
+})
+export class AppComponent {}
+```
+
+## Triggering toasts
+
+From anywhere in the app, inject `HermesToastService`:
+
+```ts
+constructor(private toasts: HermesToastService) {}
+
+save() {
+  this.toasts.promise(this.api.save(), {
+    loading: 'Saving...',
+    success: 'Saved',
+    error: 'Could not save',
+  });
+}
+```
+
+`HermesToastService` also exposes `show()`, `default()`, `info()`, `success()`, `warning()`,
+`danger()`, `loading()`, `update()`, `dismiss()` and `dismissAll()`.
+
+## Known scope cuts
+
+- **Fixed-ish stack height**: each toast's height is measured live via `ResizeObserver`
+  (see `toast-item.ts`), but the very first render frame uses `--hermes-toast-fallback-height`
+  until that measurement lands.
+- **No swipe-to-dismiss**: shadcn's Base UI toast supports drag-to-dismiss in all four
+  directions; this port dismisses only via the close button, the action button, timeout,
+  or Escape (dismisses the frontmost toast).

package/toast/_properties.toast.scss

@@ -1,56 +1,56 @@
-/*
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-
-@use '../styles/mixins';
-@use '../styles/core/tokens/variables.tokens' as tokens;
-@use '../styles/variables/variables.density' as density;
-
-@include mixins.exports('toast.properties') {
-  @include mixins.root-or-host() {
-    // Layout - shadcn's Toast viewport is `w-auto max-w-sm` (384px) with a 0.75rem
-    // gap/peek between stacked cards and 1rem inset from the viewport edge.
-    --hermes-toast-viewport-inset: #{mixins.baselinePx(16)};
-    --hermes-toast-max-width: #{mixins.baselinePx(384)};
-    --hermes-toast-gap: #{mixins.baselinePx(12)};
-    --hermes-toast-peek: #{mixins.baselinePx(12)};
-    // Fallback height used before the item's own ResizeObserver reports its real,
-    // content-driven height (see toast-item.ts) - only visible for one frame on insert.
-    --hermes-toast-fallback-height: #{mixins.baselinePx(56)};
-    --hermes-toast-content-padding: #{mixins.baselinePx(16)};
-    --hermes-toast-content-gap: #{mixins.baselinePx(12)};
-    --hermes-toast-icon-size: #{mixins.baselinePx(16)};
-
-    &,
-    & [hermes-density] {
-      // shadcn's default --radius token (0.625rem @ Tailwind's 16px root = 10px)
-      --hermes-toast-border-radius: #{mixins.baselinePx(10)};
-    }
-
-    &,
-    & [hermes-theme] {
-      // shadcn's Toast is a neutral `bg-popover` surface - unlike hermes-alert, the
-      // status color lives only on the icon, not on the card background.
-      --hermes-toast-bg-color: #{tokens.$hermes-alias-object-overlay-background};
-      --hermes-toast-color: #{tokens.$hermes-alias-typography-color-400};
-      --hermes-toast-description-color: #{tokens.$hermes-alias-typography-color-300};
-      --hermes-toast-border-color: #{tokens.$hermes-alias-object-container-border-color};
-      --hermes-toast-border-width: #{tokens.$hermes-alias-object-border-width-100};
-      // one step below the modal's shadow-300: toasts sit above page content but
-      // below the modal/dialog surface when both happen to be visible together
-      --hermes-toast-box-shadow: #{tokens.$hermes-alias-object-shadow-200};
-
-      --hermes-toast-info-icon-color: #{tokens.$hermes-alias-status-info};
-      --hermes-toast-success-icon-color: #{tokens.$hermes-alias-status-success};
-      --hermes-toast-warning-icon-color: #{tokens.$hermes-alias-status-warning-dark};
-      --hermes-toast-danger-icon-color: #{tokens.$hermes-alias-status-danger};
-
-      --hermes-toast-action-color: #{tokens.$hermes-alias-typography-color-400};
-      --hermes-toast-close-color: var(--hermes-close-color);
-      --hermes-toast-close-color-hover: var(--hermes-close-color-hover);
-    }
-  }
-}
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../styles/mixins';
+@use '../styles/core/tokens/variables.tokens' as tokens;
+@use '../styles/variables/variables.density' as density;
+
+@include mixins.exports('toast.properties') {
+  @include mixins.root-or-host() {
+    // Layout - shadcn's Toast viewport is `w-auto max-w-sm` (384px) with a 0.75rem
+    // gap/peek between stacked cards and 1rem inset from the viewport edge.
+    --hermes-toast-viewport-inset: #{mixins.baselinePx(16)};
+    --hermes-toast-max-width: #{mixins.baselinePx(384)};
+    --hermes-toast-gap: #{mixins.baselinePx(12)};
+    --hermes-toast-peek: #{mixins.baselinePx(12)};
+    // Fallback height used before the item's own ResizeObserver reports its real,
+    // content-driven height (see toast-item.ts) - only visible for one frame on insert.
+    --hermes-toast-fallback-height: #{mixins.baselinePx(56)};
+    --hermes-toast-content-padding: #{mixins.baselinePx(16)};
+    --hermes-toast-content-gap: #{mixins.baselinePx(12)};
+    --hermes-toast-icon-size: #{mixins.baselinePx(16)};
+
+    &,
+    & [hermes-density] {
+      // shadcn's default --radius token (0.625rem @ Tailwind's 16px root = 10px)
+      --hermes-toast-border-radius: #{mixins.baselinePx(10)};
+    }
+
+    &,
+    & [hermes-theme] {
+      // shadcn's Toast is a neutral `bg-popover` surface - unlike hermes-alert, the
+      // status color lives only on the icon, not on the card background.
+      --hermes-toast-bg-color: #{tokens.$hermes-alias-object-overlay-background};
+      --hermes-toast-color: #{tokens.$hermes-alias-typography-color-400};
+      --hermes-toast-description-color: #{tokens.$hermes-alias-typography-color-300};
+      --hermes-toast-border-color: #{tokens.$hermes-alias-object-container-border-color};
+      --hermes-toast-border-width: #{tokens.$hermes-alias-object-border-width-100};
+      // one step below the modal's shadow-300: toasts sit above page content but
+      // below the modal/dialog surface when both happen to be visible together
+      --hermes-toast-box-shadow: #{tokens.$hermes-alias-object-shadow-200};
+
+      --hermes-toast-info-icon-color: #{tokens.$hermes-alias-status-info};
+      --hermes-toast-success-icon-color: #{tokens.$hermes-alias-status-success};
+      --hermes-toast-warning-icon-color: #{tokens.$hermes-alias-status-warning-dark};
+      --hermes-toast-danger-icon-color: #{tokens.$hermes-alias-status-danger};
+
+      --hermes-toast-action-color: #{tokens.$hermes-alias-typography-color-400};
+      --hermes-toast-close-color: var(--hermes-close-color);
+      --hermes-toast-close-color-hover: var(--hermes-close-color-hover);
+    }
+  }
+}

package/toast/_toast.clarity.scss

@@ -1,190 +1,190 @@
-/*
- * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-
-@use 'sass:map';
-@use 'sass:meta';
-@use '../styles/mixins';
-@use '../styles/variables/variables';
-@use '../styles/variables/variables.density' as density;
-@use '../styles/core/tokens/variables.tokens' as tokens;
-@use 'variables.toast' as toast-variables;
-
-@include meta.load-css('properties.toast');
-@include mixins.exports('toast.clarity') {
-  // Mirrors shadcn's toast primitive: 500ms, ease-out-expo-ish curve. Kept as a raw
-  // value (not $hermes-global-animation-easing-secondary, which is a bouncier overshoot
-  // curve) so the slide feels identical to the shadcn reference. Also set in
-  // toaster.ts's Angular `animations: []` for the enter/leave transitions - keep both
-  // in sync if this ever changes.
-  $toast-transition-duration: tokens.$hermes-global-animation-duration-slow;
-  $toast-transition-easing: cubic-bezier(0.22, 1, 0.36, 1);
-
-  hermes-toaster {
-    position: fixed;
-    z-index: map.get(variables.$hermes-layers, toast);
-    inset-block-end: toast-variables.$hermes-toast-viewport-inset;
-    inset-inline-end: toast-variables.$hermes-toast-viewport-inset;
-    width: 100%;
-    max-width: toast-variables.$hermes-toast-max-width;
-    // The viewport itself never intercepts clicks; only the toasts inside it do, so
-    // page content underneath the empty parts of the stack stays fully interactive.
-    pointer-events: none;
-
-    // corners: shadcn's <Toaster/> defaults to bottom, `sm:right-4 sm:left-auto` -
-    // bottom-right below is the hermes default, the rest are opt-in via
-    // [hermesToasterPosition].
-    &[data-position='bottom-left'] {
-      inset-inline-end: auto;
-      inset-inline-start: toast-variables.$hermes-toast-viewport-inset;
-    }
-
-    &[data-position='top-right'],
-    &[data-position='top-left'] {
-      inset-block-end: auto;
-      inset-block-start: toast-variables.$hermes-toast-viewport-inset;
-    }
-
-    &[data-position='top-left'] {
-      inset-inline-end: auto;
-      inset-inline-start: toast-variables.$hermes-toast-viewport-inset;
-    }
-
-    @media screen and (max-width: map.get(variables.$hermes-grid-breakpoints, sm)) {
-      inset-inline: toast-variables.$hermes-toast-viewport-inset;
-      max-width: none;
-    }
-  }
-
-  hermes-toast-item {
-    // Per-item stacking state. --hermes-toast-index (0 = frontmost/newest) is set by
-    // toast-item.ts; --hermes-toast-height is kept in sync with the item's real
-    // rendered height by a ResizeObserver in the same file, falling back to a fixed
-    // estimate for the single frame before that first measurement lands.
-    --index: var(--hermes-toast-index, 0);
-    --height: var(--hermes-toast-height, #{toast-variables.$hermes-toast-fallback-height});
-    // shadcn's stack: each toast behind the front one shrinks by 10% and only peeks
-    // out by --peek, until the group is expanded (hovered/focused).
-    --scale: max(0, calc(1 - (var(--index) * 0.1)));
-    --shrink: calc(1 - var(--scale));
-
-    position: absolute;
-    inset-inline: 0;
-    inset-block-end: 0;
-    display: block;
-    width: 100%;
-    transform-origin: bottom center;
-    transform: translateY(
-        calc((var(--index) * #{toast-variables.$hermes-toast-peek} * -1) - (var(--shrink) * var(--height)))
-      )
-      scale(var(--scale));
-    transition:
-      transform $toast-transition-duration $toast-transition-easing,
-      opacity tokens.$hermes-global-animation-duration-quick ease;
-    z-index: calc(1000 - var(--index));
-    pointer-events: auto;
-
-    &.limited {
-      opacity: 0;
-      pointer-events: none;
-    }
-  }
-
-  hermes-toaster.expanded hermes-toast-item {
-    transform: translateY(calc(var(--index) * (var(--height) + #{toast-variables.$hermes-toast-gap}) * -1));
-  }
-
-  .toast {
-    display: flex;
-    align-items: center;
-    gap: toast-variables.$hermes-toast-content-gap;
-    width: 100%;
-    box-sizing: border-box;
-    padding: toast-variables.$hermes-toast-content-padding;
-    background-color: toast-variables.$hermes-toast-bg-color;
-    color: toast-variables.$hermes-toast-color;
-    border: toast-variables.$hermes-toast-border-width solid toast-variables.$hermes-toast-border-color;
-    border-radius: toast-variables.$hermes-toast-border-radius;
-    box-shadow: toast-variables.$hermes-toast-box-shadow;
-
-    @include mixins.generate-typography-token('BODY-14-RG-STD');
-  }
-
-  .toast-icon {
-    flex: 0 0 auto;
-
-    @include mixins.equilateral(toast-variables.$hermes-toast-icon-size);
-
-    &.spinner {
-      @include mixins.min-equilateral(toast-variables.$hermes-toast-icon-size);
-    }
-  }
-
-  .toast-info .toast-icon {
-    fill: toast-variables.$hermes-toast-info-icon-color;
-  }
-
-  .toast-success .toast-icon {
-    fill: toast-variables.$hermes-toast-success-icon-color;
-  }
-
-  .toast-warning .toast-icon {
-    fill: toast-variables.$hermes-toast-warning-icon-color;
-  }
-
-  .toast-danger .toast-icon {
-    fill: toast-variables.$hermes-toast-danger-icon-color;
-  }
-
-  .toast-content {
-    flex: 1 1 auto;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: density.$hermes-base-gap-xs;
-  }
-
-  .toast-title {
-    @include mixins.generate-typography-token('BODY-14-MD-STD');
-
-    color: toast-variables.$hermes-toast-color;
-  }
-
-  .toast-description {
-    @include mixins.generate-typography-token('BODY-14-RG-STD');
-
-    color: toast-variables.$hermes-toast-description-color;
-  }
-
-  .toast-action {
-    flex: 0 0 auto;
-    color: toast-variables.$hermes-toast-action-color;
-    text-decoration: underline;
-    white-space: nowrap;
-  }
-
-  .toast-close {
-    flex: 0 0 auto;
-    float: none;
-    color: toast-variables.$hermes-toast-close-color;
-
-    @include mixins.equilateral(density.$hermes-base-icon-size-s);
-
-    hermes-icon,
-    hermes-icon {
-      fill: toast-variables.$hermes-toast-close-color;
-    }
-
-    &:hover {
-      color: toast-variables.$hermes-toast-close-color-hover;
-
-      hermes-icon,
-      hermes-icon {
-        fill: toast-variables.$hermes-toast-close-color-hover;
-      }
-    }
-  }
-}
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use 'sass:map';
+@use 'sass:meta';
+@use '../styles/mixins';
+@use '../styles/variables/variables';
+@use '../styles/variables/variables.density' as density;
+@use '../styles/core/tokens/variables.tokens' as tokens;
+@use 'variables.toast' as toast-variables;
+
+@include meta.load-css('properties.toast');
+@include mixins.exports('toast.clarity') {
+  // Mirrors shadcn's toast primitive: 500ms, ease-out-expo-ish curve. Kept as a raw
+  // value (not $hermes-global-animation-easing-secondary, which is a bouncier overshoot
+  // curve) so the slide feels identical to the shadcn reference. Also set in
+  // toaster.ts's Angular `animations: []` for the enter/leave transitions - keep both
+  // in sync if this ever changes.
+  $toast-transition-duration: tokens.$hermes-global-animation-duration-slow;
+  $toast-transition-easing: cubic-bezier(0.22, 1, 0.36, 1);
+
+  hermes-toaster {
+    position: fixed;
+    z-index: map.get(variables.$hermes-layers, toast);
+    inset-block-end: toast-variables.$hermes-toast-viewport-inset;
+    inset-inline-end: toast-variables.$hermes-toast-viewport-inset;
+    width: 100%;
+    max-width: toast-variables.$hermes-toast-max-width;
+    // The viewport itself never intercepts clicks; only the toasts inside it do, so
+    // page content underneath the empty parts of the stack stays fully interactive.
+    pointer-events: none;
+
+    // corners: shadcn's <Toaster/> defaults to bottom, `sm:right-4 sm:left-auto` -
+    // bottom-right below is the hermes default, the rest are opt-in via
+    // [hermesToasterPosition].
+    &[data-position='bottom-left'] {
+      inset-inline-end: auto;
+      inset-inline-start: toast-variables.$hermes-toast-viewport-inset;
+    }
+
+    &[data-position='top-right'],
+    &[data-position='top-left'] {
+      inset-block-end: auto;
+      inset-block-start: toast-variables.$hermes-toast-viewport-inset;
+    }
+
+    &[data-position='top-left'] {
+      inset-inline-end: auto;
+      inset-inline-start: toast-variables.$hermes-toast-viewport-inset;
+    }
+
+    @media screen and (max-width: map.get(variables.$hermes-grid-breakpoints, sm)) {
+      inset-inline: toast-variables.$hermes-toast-viewport-inset;
+      max-width: none;
+    }
+  }
+
+  hermes-toast-item {
+    // Per-item stacking state. --hermes-toast-index (0 = frontmost/newest) is set by
+    // toast-item.ts; --hermes-toast-height is kept in sync with the item's real
+    // rendered height by a ResizeObserver in the same file, falling back to a fixed
+    // estimate for the single frame before that first measurement lands.
+    --index: var(--hermes-toast-index, 0);
+    --height: var(--hermes-toast-height, #{toast-variables.$hermes-toast-fallback-height});
+    // shadcn's stack: each toast behind the front one shrinks by 10% and only peeks
+    // out by --peek, until the group is expanded (hovered/focused).
+    --scale: max(0, calc(1 - (var(--index) * 0.1)));
+    --shrink: calc(1 - var(--scale));
+
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    display: block;
+    width: 100%;
+    transform-origin: bottom center;
+    transform: translateY(
+        calc((var(--index) * #{toast-variables.$hermes-toast-peek} * -1) - (var(--shrink) * var(--height)))
+      )
+      scale(var(--scale));
+    transition:
+      transform $toast-transition-duration $toast-transition-easing,
+      opacity tokens.$hermes-global-animation-duration-quick ease;
+    z-index: calc(1000 - var(--index));
+    pointer-events: auto;
+
+    &.limited {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  hermes-toaster.expanded hermes-toast-item {
+    transform: translateY(calc(var(--index) * (var(--height) + #{toast-variables.$hermes-toast-gap}) * -1));
+  }
+
+  .toast {
+    display: flex;
+    align-items: center;
+    gap: toast-variables.$hermes-toast-content-gap;
+    width: 100%;
+    box-sizing: border-box;
+    padding: toast-variables.$hermes-toast-content-padding;
+    background-color: toast-variables.$hermes-toast-bg-color;
+    color: toast-variables.$hermes-toast-color;
+    border: toast-variables.$hermes-toast-border-width solid toast-variables.$hermes-toast-border-color;
+    border-radius: toast-variables.$hermes-toast-border-radius;
+    box-shadow: toast-variables.$hermes-toast-box-shadow;
+
+    @include mixins.generate-typography-token('BODY-14-RG-STD');
+  }
+
+  .toast-icon {
+    flex: 0 0 auto;
+
+    @include mixins.equilateral(toast-variables.$hermes-toast-icon-size);
+
+    &.spinner {
+      @include mixins.min-equilateral(toast-variables.$hermes-toast-icon-size);
+    }
+  }
+
+  .toast-info .toast-icon {
+    fill: toast-variables.$hermes-toast-info-icon-color;
+  }
+
+  .toast-success .toast-icon {
+    fill: toast-variables.$hermes-toast-success-icon-color;
+  }
+
+  .toast-warning .toast-icon {
+    fill: toast-variables.$hermes-toast-warning-icon-color;
+  }
+
+  .toast-danger .toast-icon {
+    fill: toast-variables.$hermes-toast-danger-icon-color;
+  }
+
+  .toast-content {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: density.$hermes-base-gap-xs;
+  }
+
+  .toast-title {
+    @include mixins.generate-typography-token('BODY-14-MD-STD');
+
+    color: toast-variables.$hermes-toast-color;
+  }
+
+  .toast-description {
+    @include mixins.generate-typography-token('BODY-14-RG-STD');
+
+    color: toast-variables.$hermes-toast-description-color;
+  }
+
+  .toast-action {
+    flex: 0 0 auto;
+    color: toast-variables.$hermes-toast-action-color;
+    text-decoration: underline;
+    white-space: nowrap;
+  }
+
+  .toast-close {
+    flex: 0 0 auto;
+    float: none;
+    color: toast-variables.$hermes-toast-close-color;
+
+    @include mixins.equilateral(density.$hermes-base-icon-size-s);
+
+    hermes-icon,
+    hermes-icon {
+      fill: toast-variables.$hermes-toast-close-color;
+    }
+
+    &:hover {
+      color: toast-variables.$hermes-toast-close-color-hover;
+
+      hermes-icon,
+      hermes-icon {
+        fill: toast-variables.$hermes-toast-close-color-hover;
+      }
+    }
+  }
+}