@hermes-ui/angular 0.1.6 → 0.1.7

package/fesm2022/hermes-ui-angular.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"hermes-ui-angular.mjs","sources":["../../../hermes-angular.module.ts","../../../index.ts","../../../hermes-ui-angular.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n * The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\n\nimport { NgModule } from '@angular/core';\nimport { HermesAccordionModule } from '@hermes-ui/angular/accordion';\nimport { HermesButtonModule } from '@hermes-ui/angular/button';\nimport { HermesCard } from '@hermes-ui/angular/card';\nimport { HermesDataModule } from '@hermes-ui/angular/data';\nimport { HermesDivider } from '@hermes-ui/angular/divider';\nimport { HermesEmphasisModule } from '@hermes-ui/angular/emphasis';\nimport { HermesFormsModule } from '@hermes-ui/angular/forms';\nimport { HermesIcon, HermesIconModule } from '@hermes-ui/angular/icon';\nimport { HermesLayoutModule } from '@hermes-ui/angular/layout';\nimport { HermesModalModule, HermesSidePanelModule } from '@hermes-ui/angular/modal';\nimport { HermesPaginationModule } from '@hermes-ui/angular/pagination';\nimport { HermesPopoverModule } from '@hermes-ui/angular/popover';\nimport { HermesPopoverModuleNext } from '@hermes-ui/angular/popover/common';\nimport { HermesProgressBarModule } from '@hermes-ui/angular/progress/progress-bars';\nimport { HermesSpinnerModule } from '@hermes-ui/angular/progress/spinner';\nimport { HermesStepperModule } from '@hermes-ui/angular/stepper';\nimport { HermesTimelineModule } from '@hermes-ui/angular/timeline';\nimport { HermesToastModule } from '@hermes-ui/angular/toast';\nimport { HermesConditionalModule, HermesFocusOnViewInitModule, HermesLoadingModule } from '@hermes-ui/angular/utils';\nimport { HermesWizardModule } from '@hermes-ui/angular/wizard';\n\n@NgModule({\n  imports: [HermesIcon, HermesDivider, HermesCard],\n  exports: [\n    HermesEmphasisModule,\n    HermesDataModule,\n    HermesCard,\n    HermesDivider,\n    HermesIcon,\n    HermesIconModule,\n    HermesModalModule,\n    HermesPaginationModule,\n    HermesLoadingModule,\n    HermesConditionalModule,\n    HermesFocusOnViewInitModule,\n    HermesButtonModule,\n    HermesFormsModule,\n    HermesLayoutModule,\n    HermesPopoverModule,\n    HermesWizardModule,\n    HermesSidePanelModule,\n    HermesAccordionModule,\n    HermesStepperModule,\n    HermesSpinnerModule,\n    HermesProgressBarModule,\n    HermesPopoverModuleNext,\n    HermesTimelineModule,\n    HermesToastModule,\n  ],\n})\nexport class HermesModule {}\n","/*\n * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n * The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\n\nexport * from './hermes-angular.module';\n\nexport * from '@hermes-ui/angular/button';\nexport * from '@hermes-ui/angular/card';\nexport * from '@hermes-ui/angular/data';\nexport * from '@hermes-ui/angular/divider';\nexport * from '@hermes-ui/angular/emphasis';\nexport * from '@hermes-ui/angular/forms';\nexport * from '@hermes-ui/angular/icon';\nexport * from '@hermes-ui/angular/layout';\nexport * from '@hermes-ui/angular/modal';\nexport * from '@hermes-ui/angular/pagination';\nexport * from '@hermes-ui/angular/popover';\nexport * from '@hermes-ui/angular/utils';\nexport * from '@hermes-ui/angular/wizard';\nexport * from '@hermes-ui/angular/collapsible-panel';\nexport * from '@hermes-ui/angular/accordion';\nexport * from '@hermes-ui/angular/stepper';\nexport * from '@hermes-ui/angular/progress/spinner';\nexport * from '@hermes-ui/angular/progress/progress-bars';\nexport * from '@hermes-ui/angular/timeline';\nexport * from '@hermes-ui/angular/toast';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;AAKG;MAqDU,YAAY,CAAA;+GAAZ,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAZ,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,YAAY,YA5Bb,UAAU,EAAE,aAAa,EAAE,UAAU,aAE7C,oBAAoB;YACpB,gBAAgB;YAChB,UAAU;YACV,aAAa;YACb,UAAU;YACV,gBAAgB;YAChB,iBAAiB;YACjB,sBAAsB;YACtB,mBAAmB;YACnB,uBAAuB;YACvB,2BAA2B;YAC3B,kBAAkB;YAClB,iBAAiB;YACjB,kBAAkB;YAClB,mBAAmB;YACnB,kBAAkB;YAClB,qBAAqB;YACrB,qBAAqB;YACrB,mBAAmB;YACnB,mBAAmB;YACnB,uBAAuB;YACvB,uBAAuB;YACvB,oBAAoB;YACpB,iBAAiB,CAAA,EAAA,CAAA,CAAA;AAGR,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,YAAY,YA5Bb,UAAU,EAAE,aAAa,EAAE,UAAU,EAE7C,oBAAoB;YACpB,gBAAgB;YAIhB,gBAAgB;YAChB,iBAAiB;YACjB,sBAAsB;YACtB,mBAAmB;YACnB,uBAAuB;YACvB,2BAA2B;YAC3B,kBAAkB;YAClB,iBAAiB;YACjB,kBAAkB;YAClB,mBAAmB;YACnB,kBAAkB;YAClB,qBAAqB;YACrB,qBAAqB;YACrB,mBAAmB;YACnB,mBAAmB;YACnB,uBAAuB;YACvB,uBAAuB;YACvB,oBAAoB;YACpB,iBAAiB,CAAA,EAAA,CAAA,CAAA;;4FAGR,YAAY,EAAA,UAAA,EAAA,CAAA;kBA7BxB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,UAAU,CAAC;AAChD,oBAAA,OAAO,EAAE;wBACP,oBAAoB;wBACpB,gBAAgB;wBAChB,UAAU;wBACV,aAAa;wBACb,UAAU;wBACV,gBAAgB;wBAChB,iBAAiB;wBACjB,sBAAsB;wBACtB,mBAAmB;wBACnB,uBAAuB;wBACvB,2BAA2B;wBAC3B,kBAAkB;wBAClB,iBAAiB;wBACjB,kBAAkB;wBAClB,mBAAmB;wBACnB,kBAAkB;wBAClB,qBAAqB;wBACrB,qBAAqB;wBACrB,mBAAmB;wBACnB,mBAAmB;wBACnB,uBAAuB;wBACvB,uBAAuB;wBACvB,oBAAoB;wBACpB,iBAAiB;AAClB,qBAAA;AACF,iBAAA;;;ACzDD;;;;;AAKG;;ACLH;;AAEG;;"}
+{"version":3,"file":"hermes-ui-angular.mjs","sources":["../../../hermes-angular.module.ts","../../../index.ts","../../../hermes-ui-angular.ts"],"sourcesContent":["/*\r\n * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\r\n * The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\r\n * This software is released under MIT license.\r\n * The full license information can be found in LICENSE in the root directory of this project.\r\n */\r\n\r\nimport { NgModule } from '@angular/core';\r\nimport { HermesAccordionModule } from '@hermes-ui/angular/accordion';\r\nimport { HermesButtonModule } from '@hermes-ui/angular/button';\r\nimport { HermesCard } from '@hermes-ui/angular/card';\r\nimport { HermesDataModule } from '@hermes-ui/angular/data';\r\nimport { HermesDivider } from '@hermes-ui/angular/divider';\r\nimport { HermesEmphasisModule } from '@hermes-ui/angular/emphasis';\r\nimport { HermesFormsModule } from '@hermes-ui/angular/forms';\r\nimport { HermesIcon, HermesIconModule } from '@hermes-ui/angular/icon';\r\nimport { HermesLayoutModule } from '@hermes-ui/angular/layout';\r\nimport { HermesModalModule, HermesSidePanelModule } from '@hermes-ui/angular/modal';\r\nimport { HermesPaginationModule } from '@hermes-ui/angular/pagination';\r\nimport { HermesPopoverModule } from '@hermes-ui/angular/popover';\r\nimport { HermesPopoverModuleNext } from '@hermes-ui/angular/popover/common';\r\nimport { HermesProgressBarModule } from '@hermes-ui/angular/progress/progress-bars';\r\nimport { HermesSpinnerModule } from '@hermes-ui/angular/progress/spinner';\r\nimport { HermesStepperModule } from '@hermes-ui/angular/stepper';\r\nimport { HermesTimelineModule } from '@hermes-ui/angular/timeline';\r\nimport { HermesToastModule } from '@hermes-ui/angular/toast';\r\nimport { HermesConditionalModule, HermesFocusOnViewInitModule, HermesLoadingModule } from '@hermes-ui/angular/utils';\r\nimport { HermesWizardModule } from '@hermes-ui/angular/wizard';\r\n\r\n@NgModule({\r\n  imports: [HermesIcon, HermesDivider, HermesCard],\r\n  exports: [\r\n    HermesEmphasisModule,\r\n    HermesDataModule,\r\n    HermesCard,\r\n    HermesDivider,\r\n    HermesIcon,\r\n    HermesIconModule,\r\n    HermesModalModule,\r\n    HermesPaginationModule,\r\n    HermesLoadingModule,\r\n    HermesConditionalModule,\r\n    HermesFocusOnViewInitModule,\r\n    HermesButtonModule,\r\n    HermesFormsModule,\r\n    HermesLayoutModule,\r\n    HermesPopoverModule,\r\n    HermesWizardModule,\r\n    HermesSidePanelModule,\r\n    HermesAccordionModule,\r\n    HermesStepperModule,\r\n    HermesSpinnerModule,\r\n    HermesProgressBarModule,\r\n    HermesPopoverModuleNext,\r\n    HermesTimelineModule,\r\n    HermesToastModule,\r\n  ],\r\n})\r\nexport class HermesModule {}\r\n","/*\r\n * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\r\n * The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\r\n * This software is released under MIT license.\r\n * The full license information can be found in LICENSE in the root directory of this project.\r\n */\r\n\r\nexport * from './hermes-angular.module';\r\n\r\nexport * from '@hermes-ui/angular/button';\r\nexport * from '@hermes-ui/angular/card';\r\nexport * from '@hermes-ui/angular/data';\r\nexport * from '@hermes-ui/angular/divider';\r\nexport * from '@hermes-ui/angular/emphasis';\r\nexport * from '@hermes-ui/angular/forms';\r\nexport * from '@hermes-ui/angular/icon';\r\nexport * from '@hermes-ui/angular/layout';\r\nexport * from '@hermes-ui/angular/modal';\r\nexport * from '@hermes-ui/angular/pagination';\r\nexport * from '@hermes-ui/angular/popover';\r\nexport * from '@hermes-ui/angular/utils';\r\nexport * from '@hermes-ui/angular/wizard';\r\nexport * from '@hermes-ui/angular/collapsible-panel';\r\nexport * from '@hermes-ui/angular/accordion';\r\nexport * from '@hermes-ui/angular/stepper';\r\nexport * from '@hermes-ui/angular/progress/spinner';\r\nexport * from '@hermes-ui/angular/progress/progress-bars';\r\nexport * from '@hermes-ui/angular/timeline';\r\nexport * from '@hermes-ui/angular/toast';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;AAKG;MAqDU,YAAY,CAAA;+GAAZ,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAZ,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,YAAY,YA5Bb,UAAU,EAAE,aAAa,EAAE,UAAU,aAE7C,oBAAoB;YACpB,gBAAgB;YAChB,UAAU;YACV,aAAa;YACb,UAAU;YACV,gBAAgB;YAChB,iBAAiB;YACjB,sBAAsB;YACtB,mBAAmB;YACnB,uBAAuB;YACvB,2BAA2B;YAC3B,kBAAkB;YAClB,iBAAiB;YACjB,kBAAkB;YAClB,mBAAmB;YACnB,kBAAkB;YAClB,qBAAqB;YACrB,qBAAqB;YACrB,mBAAmB;YACnB,mBAAmB;YACnB,uBAAuB;YACvB,uBAAuB;YACvB,oBAAoB;YACpB,iBAAiB,CAAA,EAAA,CAAA,CAAA;AAGR,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,YAAY,YA5Bb,UAAU,EAAE,aAAa,EAAE,UAAU,EAE7C,oBAAoB;YACpB,gBAAgB;YAIhB,gBAAgB;YAChB,iBAAiB;YACjB,sBAAsB;YACtB,mBAAmB;YACnB,uBAAuB;YACvB,2BAA2B;YAC3B,kBAAkB;YAClB,iBAAiB;YACjB,kBAAkB;YAClB,mBAAmB;YACnB,kBAAkB;YAClB,qBAAqB;YACrB,qBAAqB;YACrB,mBAAmB;YACnB,mBAAmB;YACnB,uBAAuB;YACvB,uBAAuB;YACvB,oBAAoB;YACpB,iBAAiB,CAAA,EAAA,CAAA,CAAA;;4FAGR,YAAY,EAAA,UAAA,EAAA,CAAA;kBA7BxB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,UAAU,CAAC;AAChD,oBAAA,OAAO,EAAE;wBACP,oBAAoB;wBACpB,gBAAgB;wBAChB,UAAU;wBACV,aAAa;wBACb,UAAU;wBACV,gBAAgB;wBAChB,iBAAiB;wBACjB,sBAAsB;wBACtB,mBAAmB;wBACnB,uBAAuB;wBACvB,2BAA2B;wBAC3B,kBAAkB;wBAClB,iBAAiB;wBACjB,kBAAkB;wBAClB,mBAAmB;wBACnB,kBAAkB;wBAClB,qBAAqB;wBACrB,qBAAqB;wBACrB,mBAAmB;wBACnB,mBAAmB;wBACnB,uBAAuB;wBACvB,uBAAuB;wBACvB,oBAAoB;wBACpB,iBAAiB;AAClB,qBAAA;AACF,iBAAA;;;ACzDD;;;;;AAKG;;ACLH;;AAEG;;"}

package/hermes-ui.scss

@@ -1,7 +1,7 @@
-/*
- * 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 './main';
+/*
+ * 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 './main';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hermes-ui/angular",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "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);
+    }
+  }
+}