@hermes-ui/angular 0.1.5 → 0.1.7

package/fesm2022/hermes-ui-angular.mjs

@@ -4,8 +4,12 @@ import { HermesAccordionModule } from '@hermes-ui/angular/accordion';
 export * from '@hermes-ui/angular/accordion';
 import { HermesButtonModule } from '@hermes-ui/angular/button';
 export * from '@hermes-ui/angular/button';
+import { HermesCard } from '@hermes-ui/angular/card';
+export * from '@hermes-ui/angular/card';
 import { HermesDataModule } from '@hermes-ui/angular/data';
 export * from '@hermes-ui/angular/data';
+import { HermesDivider } from '@hermes-ui/angular/divider';
+export * from '@hermes-ui/angular/divider';
 import { HermesEmphasisModule } from '@hermes-ui/angular/emphasis';
 export * from '@hermes-ui/angular/emphasis';
 import { HermesFormsModule } from '@hermes-ui/angular/forms';
@@ -16,6 +20,8 @@ import { HermesLayoutModule } from '@hermes-ui/angular/layout';
 export * from '@hermes-ui/angular/layout';
 import { HermesModalModule, HermesSidePanelModule } from '@hermes-ui/angular/modal';
 export * from '@hermes-ui/angular/modal';
+import { HermesPaginationModule } from '@hermes-ui/angular/pagination';
+export * from '@hermes-ui/angular/pagination';
 import { HermesPopoverModule } from '@hermes-ui/angular/popover';
 export * from '@hermes-ui/angular/popover';
 import { HermesPopoverModuleNext } from '@hermes-ui/angular/popover/common';
@@ -43,11 +49,14 @@ export * from '@hermes-ui/angular/collapsible-panel';
  */
 class HermesModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.22", ngImport: i0, type: HermesModule, imports: [HermesIcon], exports: [HermesEmphasisModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.22", ngImport: i0, type: HermesModule, imports: [HermesIcon, HermesDivider, HermesCard], exports: [HermesEmphasisModule,
             HermesDataModule,
+            HermesCard,
+            HermesDivider,
             HermesIcon,
             HermesIconModule,
             HermesModalModule,
+            HermesPaginationModule,
             HermesLoadingModule,
             HermesConditionalModule,
             HermesFocusOnViewInitModule,
@@ -64,10 +73,11 @@ class HermesModule {
             HermesPopoverModuleNext,
             HermesTimelineModule,
             HermesToastModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesModule, imports: [HermesIcon, HermesEmphasisModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesModule, imports: [HermesIcon, HermesDivider, HermesCard, HermesEmphasisModule,
             HermesDataModule,
             HermesIconModule,
             HermesModalModule,
+            HermesPaginationModule,
             HermesLoadingModule,
             HermesConditionalModule,
             HermesFocusOnViewInitModule,
@@ -88,13 +98,16 @@ class HermesModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [HermesIcon],
+                    imports: [HermesIcon, HermesDivider, HermesCard],
                     exports: [
                         HermesEmphasisModule,
                         HermesDataModule,
+                        HermesCard,
+                        HermesDivider,
                         HermesIcon,
                         HermesIconModule,
                         HermesModalModule,
+                        HermesPaginationModule,
                         HermesLoadingModule,
                         HermesConditionalModule,
                         HermesFocusOnViewInitModule,

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 { HermesDataModule } from '@hermes-ui/angular/data';\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 { 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],\n  exports: [\n    HermesEmphasisModule,\n    HermesDataModule,\n    HermesIcon,\n    HermesIconModule,\n    HermesModalModule,\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/data';\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/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;MA+CU,YAAY,CAAA;+GAAZ,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;gHAAZ,YAAY,EAAA,OAAA,EAAA,CAzBb,UAAU,CAAA,EAAA,OAAA,EAAA,CAElB,oBAAoB;YACpB,gBAAgB;YAChB,UAAU;YACV,gBAAgB;YAChB,iBAAiB;YACjB,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;gHAGR,YAAY,EAAA,OAAA,EAAA,CAzBb,UAAU,EAElB,oBAAoB;YACpB,gBAAgB;YAEhB,gBAAgB;YAChB,iBAAiB;YACjB,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;kBA1BxB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,UAAU,CAAC;AACrB,oBAAA,OAAO,EAAE;wBACP,oBAAoB;wBACpB,gBAAgB;wBAChB,UAAU;wBACV,gBAAgB;wBAChB,iBAAiB;wBACjB,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;;;ACnDD;;;;;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/layout/vertical-nav/_mixins.vertical-nav.scss

@@ -7,7 +7,6 @@
 
 @use '../../styles/core/tokens/variables.tokens' as tokens;
 @use 'variables.vertical-nav' as vertical-nav-variables;
-@use '../tabs/mixins.tabs' as tabs-mixins;
 
 @mixin vertical-nav-divider($position: 'border-top') {
   #{$position}: vertical-nav-variables.$hermes-vertical-nav-trigger-divider-border-width solid
@@ -15,17 +14,14 @@
 }
 @mixin vertical-nav-link-colors() {
   color: vertical-nav-variables.$hermes-vertical-nav-item-color;
-
-  @include tabs-mixins.nav-link-border-appearance('left', true);
+  // shadcn sidebar: item ativo/hover é um "pill" de fundo arredondado, sem a
+  // barra de borda à esquerda que o Clarity usava (nav-link-border-appearance).
+  border-radius: vertical-nav-variables.$hermes-vertical-nav-item-border-radius;
 
   &.active {
     color: vertical-nav-variables.$hermes-vertical-nav-item-active-color;
     background-color: vertical-nav-variables.$hermes-vertical-nav-selected-bg-color;
 
-    &::before {
-      border-color: tokens.$hermes-alias-object-interaction-background-highlight;
-    }
-
     .nav-icon {
       fill: vertical-nav-variables.$hermes-vertical-nav-icon-active-color;
     }

package/layout/vertical-nav/_properties.vertical-nav.scss

@@ -17,6 +17,11 @@
     --hermes-vertical-nav-item-top-level-font-weight: #{tokens.$hermes-alias-typography-font-weight-semibold};
     --hermes-vertical-nav-header-font-weight: #{tokens.$hermes-alias-typography-font-weight-semibold};
     --hermes-vertical-nav-trigger-divider-border-width: #{tokens.$hermes-global-space-1};
+    // shadcn sidebar: item ativo/hover vira um pill arredondado (rounded-md),
+    // e a lista de itens ganha um respiro (inset) da borda do container em
+    // vez de ir de ponta a ponta.
+    --hermes-vertical-nav-item-border-radius: #{mixins.baselinePx(6)};
+    --hermes-vertical-nav-content-inset: #{mixins.baselinePx(8)};
 
     &,
     & [hermes-density] {
@@ -28,12 +33,12 @@
       // Vertical Nav - Align
       --hermes-vertical-nav-item-padding: #{density.$hermes-base-vertical-offset-m} #{density.$hermes-base-horizontal-offset-m}
         #{density.$hermes-base-vertical-offset-m} #{density.$hermes-base-horizontal-offset-xl};
+      // Antes compensava a ausência de ícone com um padding-left gigante
+      // (calc com o tamanho do ícone) pra alinhar o texto. Agora quem faz
+      // esse trabalho é o indent + linha vertical de .nav-group-children
+      // (ver _vertical-nav.clarity.scss) — aqui só o padding normal do item.
       --hermes-vertical-nav-item-child-padding: #{density.$hermes-base-vertical-offset-m}
-        #{density.$hermes-base-horizontal-offset-m} #{density.$hermes-base-vertical-offset-m}
-        calc(
-          #{vertical-nav-variables.$hermes-vertical-nav-icon-size} + #{density.$hermes-base-horizontal-offset-xl} +
-            #{density.$hermes-base-gap-xs}
-        );
+        #{density.$hermes-base-horizontal-offset-m};
       --hermes-vertical-nav-item-height: #{density.$hermes-base-row-height-m};
       --hermes-vertical-nav-min-width: #{density.$hermes-base-layout-space-3xl};
       --hermes-vertical-nav-toggle-button-size: #{density.$hermes-base-row-height-m};

package/layout/vertical-nav/_variables.vertical-nav.scss

@@ -25,6 +25,8 @@ $hermes-vertical-nav-item-child-padding: var(--hermes-vertical-nav-item-child-pa
 $hermes-vertical-nav-item-height: var(--hermes-vertical-nav-item-height) !default;
 $hermes-vertical-nav-min-width: var(--hermes-vertical-nav-min-width) !default;
 $hermes-vertical-nav-item-active-font-weight: var(--hermes-vertical-nav-item-active-font-weight) !default;
+$hermes-vertical-nav-item-border-radius: var(--hermes-vertical-nav-item-border-radius) !default;
+$hermes-vertical-nav-content-inset: var(--hermes-vertical-nav-content-inset) !default;
 
 $hermes-vertical-nav-selected-bg-color: var(--hermes-vertical-nav-selected-bg-color) !default;
 $hermes-vertical-nav-selected-hover-bg-color: var(

package/layout/vertical-nav/_vertical-nav.clarity.scss

@@ -43,6 +43,13 @@
       overflow: hidden auto;
     }
 
+    // shadcn sidebar: os itens ficam "flutuando" com um respiro da borda do
+    // container, não de ponta a ponta -- só quando expandida, pra não mexer
+    // no cálculo (já bem specific) dos ícones no modo colapsado/rail.
+    &:not(.is-collapsed) .nav-content {
+      padding: vertical-nav-variables.$hermes-vertical-nav-content-inset;
+    }
+
     .nav-group {
       //Display
       display: block;
@@ -100,6 +107,13 @@
 
     .nav-group-children {
       overflow-y: hidden;
+
+      // shadcn sidebar: linha vertical marcando o subnível — os itens ficam
+      // indentados depois dela, e o pill de hover/active de cada um fica
+      // mais estreito (começa depois da linha), não do tamanho do item pai.
+      margin-left: #{mixins.baselinePx(20)};
+      padding-left: #{mixins.baselinePx(10)};
+      border-left: #{tokens.$hermes-alias-object-border-width-100} solid vertical-nav-variables.$hermes-vertical-nav-divider-color;
     }
 
     .nav-trigger,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hermes-ui/angular",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Angular components for Hermes",
   "keywords": [
     "hermes",
@@ -124,6 +124,10 @@
       "types": "./types/hermes-ui-angular-button.d.ts",
       "default": "./fesm2022/hermes-ui-angular-button.mjs"
     },
+    "./card": {
+      "types": "./types/hermes-ui-angular-card.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-card.mjs"
+    },
     "./collapsible-panel": {
       "types": "./types/hermes-ui-angular-collapsible-panel.d.ts",
       "default": "./fesm2022/hermes-ui-angular-collapsible-panel.mjs"
@@ -144,6 +148,10 @@
       "types": "./types/hermes-ui-angular-data-tree-view.d.ts",
       "default": "./fesm2022/hermes-ui-angular-data-tree-view.mjs"
     },
+    "./divider": {
+      "types": "./types/hermes-ui-angular-divider.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-divider.mjs"
+    },
     "./emphasis": {
       "types": "./types/hermes-ui-angular-emphasis.d.ts",
       "default": "./fesm2022/hermes-ui-angular-emphasis.mjs"
@@ -256,6 +264,10 @@
       "types": "./types/hermes-ui-angular-modal.d.ts",
       "default": "./fesm2022/hermes-ui-angular-modal.mjs"
     },
+    "./pagination": {
+      "types": "./types/hermes-ui-angular-pagination.d.ts",
+      "default": "./fesm2022/hermes-ui-angular-pagination.mjs"
+    },
     "./popover": {
       "types": "./types/hermes-ui-angular-popover.d.ts",
       "default": "./fesm2022/hermes-ui-angular-popover.mjs"

package/popover/dropdown/_dropdown.clarity.scss

@@ -91,11 +91,12 @@
 
     .dropdown-header {
       @include menu-mixins.generate-dropdown-header();
+    }
 
-      & ~ .dropdown-item,
-      & ~ .dropdown > .dropdown-item {
-        padding-left: density.$hermes-base-horizontal-offset-2xl;
-      }
+    // Trailing keyboard-shortcut hint inside a dropdown item (shadcn's CommandShortcut).
+    // Works because .dropdown-item is itself a flex container (see generate-dropdown-item()).
+    .dropdown-shortcut {
+      @include menu-mixins.generate-dropdown-shortcut();
     }
 
     .btn,
@@ -180,7 +181,8 @@
     .dropdown-divider {
       border-bottom: dropdown-variables.$hermes-dropdown-divider-border-width solid
         dropdown-variables.$hermes-dropdown-divider-color;
-      margin: density.$hermes-base-vertical-offset-l density.$hermes-base-horizontal-offset-l;
+      // Bleeds out to the menu's own edges despite its padding (shadcn's -mx-1 treatment).
+      margin: #{mixins.baselinePx(4)} calc(-1 * #{dropdown-variables.$hermes-dropdown-padding});
     }
   }
 
@@ -317,10 +319,9 @@
     position: static;
     overflow-y: auto;
 
-    .dropdown-header,
     .dropdown-item,
     .dropdown > .dropdown-item {
-      min-height: density.$hermes-base-row-height-s;
+      min-height: dropdown-variables.$hermes-dropdown-item-height;
     }
   }
 }

package/popover/dropdown/_menu-mixins.clarity.scss

@@ -28,9 +28,10 @@
   border-width: tokens.$hermes-alias-object-border-width-100;
   border-style: solid;
   border-color: dropdown-variables.$hermes-dropdown-border-color;
-  border-radius: density.$hermes-base-border-radius-s;
-  box-shadow: tokens.$hermes-alias-object-shadow-200;
-  padding: density.$hermes-base-vertical-offset-l density.$hermes-base-layout-space-4xs;
+  border-radius: dropdown-variables.$hermes-dropdown-border-radius;
+  box-shadow: dropdown-variables.$hermes-dropdown-shadow;
+  padding: dropdown-variables.$hermes-dropdown-padding;
+  gap: #{mixins.baselinePx(1)};
   visibility: hidden;
   z-index: map.get(variables.$hermes-layers, dropdown-menu);
 }
@@ -39,12 +40,17 @@
     'SECONDARY-13-RG-EXP',
     (
       font-weight: dropdown-variables.$hermes-dropdown-item-font-weight,
+      // shadcn text-sm (14px) instead of the shared SECONDARY-13 (13px) token.
+      font-size: dropdown-variables.$hermes-dropdown-item-font-size,
     )
   );
 
   color: dropdown-variables.$hermes-dropdown-item-color;
   background-color: dropdown-variables.$hermes-dropdown-item-bg-color;
   border: 0;
+  // rounded-md hover/active highlight inset within the menu's own padding,
+  // instead of an edge-to-edge Clarity highlight.
+  border-radius: dropdown-variables.$hermes-dropdown-item-border-radius;
   cursor: pointer;
   display: flex;
   gap: density.$hermes-base-gap-xs;
@@ -111,19 +117,29 @@
     'SECONDARY-13-MD-EXP',
     (
       font-weight: dropdown-variables.$hermes-dropdown-header-font-weight,
+      font-size: #{mixins.baselinePx(12)},
     )
   );
 
-  padding: 0 density.$hermes-base-horizontal-offset-l;
+  padding: #{mixins.baselinePx(6)} #{mixins.baselinePx(8)} #{mixins.baselinePx(2)};
   margin: 0;
 }
 @mixin generate-dropdown-item-height() {
-  padding: 0 density.$hermes-base-horizontal-offset-2xl 0 density.$hermes-base-horizontal-offset-l;
+  padding: 0 #{mixins.baselinePx(8)};
+  min-height: dropdown-variables.$hermes-dropdown-item-height;
 
   @media screen and (max-width: map.get(variables.$hermes-grid-breakpoints, sm)) {
-    padding: density.$hermes-base-vertical-offset-s density.$hermes-base-horizontal-offset-2xl;
+    padding: density.$hermes-base-vertical-offset-s #{mixins.baselinePx(8)};
   }
 }
+@mixin generate-dropdown-shortcut() {
+  margin-left: auto;
+  padding-left: density.$hermes-base-gap-l;
+  color: dropdown-variables.$hermes-dropdown-shortcut-color;
+  font-size: #{mixins.baselinePx(12)};
+  letter-spacing: #{mixins.baselinePx(0.5)};
+  white-space: nowrap;
+}
 @mixin dropdown-item-outline() {
   outline-color: Highlight;
   outline-color: -webkit-focus-ring-color;

package/popover/dropdown/_properties.dropdown.scss

@@ -14,6 +14,22 @@
     --hermes-dropdown-header-font-weight: #{tokens.$hermes-alias-typography-font-weight-medium};
     --hermes-dropdown-item-font-weight: #{tokens.$hermes-alias-typography-secondary-font-weight};
 
+    // shadcn-style dropdown: rounded-lg container (8px, vs Clarity's sharp-ish
+    // 4px), a softer/larger-spread neutral shadow instead of the teal-tinted
+    // Clarity one (that shared token is used by many other components, so
+    // it's overridden here rather than changed globally), roomier outer
+    // padding so items read as "inset" cards, and items get their own
+    // rounded-md (6px) hover highlight instead of an edge-to-edge one.
+    --hermes-dropdown-border-radius: #{mixins.baselinePx(10)};
+    --hermes-dropdown-shadow: 0 #{mixins.baselinePx(10)} #{mixins.baselinePx(30)} rgba(0, 0, 0, 0.12),
+      0 #{mixins.baselinePx(2)} #{mixins.baselinePx(8)} rgba(0, 0, 0, 0.08);
+    --hermes-dropdown-padding: #{mixins.baselinePx(6)};
+    --hermes-dropdown-item-border-radius: #{mixins.baselinePx(6)};
+    // shadcn text-sm (14px), overriding the shared SECONDARY-13 typography
+    // token that .dropdown-item otherwise pulls in.
+    --hermes-dropdown-item-font-size: #{mixins.baselinePx(14)};
+    --hermes-dropdown-item-height: #{mixins.baselinePx(34)};
+
     &,
     & [hermes-theme] {
       // Usage: ../popover/dropdown/_dropdown.clarity.scss
@@ -45,6 +61,10 @@
       --hermes-dropdown-item-selected-active-bg-color: var(--hermes-alias-object-interaction-background-selected-active);
       --hermes-dropdown-item-disabled-color: #{tokens.$hermes-alias-object-interaction-color-disabled};
       --hermes-dropdown-item-disabled-bg-color: transparent; // #{tokens.$hermes-alias-object-interaction-background-disabled};
+
+      // Usage: ../popover/dropdown/_menu-mixins.clarity.scss
+      // Trailing keyboard-shortcut hint (shadcn's <kbd>/CommandShortcut) inside a dropdown item.
+      --hermes-dropdown-shortcut-color: var(--hermes-dropdown-header-color);
     }
   }
 }

package/popover/dropdown/_variables.dropdown.scss

@@ -10,6 +10,13 @@ $hermes-dropdown-border-color: var(--hermes-dropdown-border-color) !default;
 $hermes-dropdown-divider-color: var(--hermes-dropdown-divider-color) !default;
 $hermes-dropdown-divider-border-width: var(--hermes-dropdown-divider-border-width) !default;
 $hermes-dropdown-child-border-color: var(--hermes-dropdown-child-border-color) !default;
+$hermes-dropdown-border-radius: var(--hermes-dropdown-border-radius) !default;
+$hermes-dropdown-shadow: var(--hermes-dropdown-shadow) !default;
+$hermes-dropdown-padding: var(--hermes-dropdown-padding) !default;
+$hermes-dropdown-item-border-radius: var(--hermes-dropdown-item-border-radius) !default;
+$hermes-dropdown-item-font-size: var(--hermes-dropdown-item-font-size) !default;
+$hermes-dropdown-item-height: var(--hermes-dropdown-item-height) !default;
+$hermes-dropdown-shortcut-color: var(--hermes-dropdown-shortcut-color) !default;
 
 // Usage:  ../data/datagrid/_datagrid.clarity.scss
 // Usage:  ../emphasis/alert/_alert.clarity.scss

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).