@educarehq/solaris-ui 0.3.3 → 0.5.0

package/styles/_button.scss

@@ -1,31 +1,34 @@
 [solaris-button] {
-  --solaris-button-gap: initial;
-  --solaris-button-color: initial;
-  --solaris-button-radius: initial;
-  --solaris-button-height: initial;
-  --solaris-button-padding-x: initial;
-  --solaris-button-padding-y: initial;
-  --solaris-button-min-width: initial;
-  --solaris-button-font-size: initial;
-  --solaris-button-icon-size: initial;
-  --solaris-button-background: initial;
-  --solaris-button-font-weight: initial;
-  --solaris-button-border-color: initial;
-  --solaris-button-border-width: initial;
-  --solaris-button-disabled-opacity: 0.5;
-  --solaris-button-hover-background: initial;
-  --solaris-button-focus-ring-color: initial;
-  --solaris-button-active-background: initial;
-  --solaris-button-hover-border-color: initial;
-  --solaris-button-active-border-color: initial;
-
+  --solaris-button-border-width: 0;
   --solaris-button-custom-color: initial;
+  --solaris-button-border-color: transparent;
   --solaris-button-custom-background: initial;
   --solaris-button-custom-border-color: initial;
+  --solaris-button-gap: var(--solaris-spacing-2);
+  --solaris-button-hover-border-color: transparent;
+  --solaris-button-radius: var(--solaris-radius-sm);
+  --solaris-button-active-border-color: transparent;
   --solaris-button-custom-hover-background: initial;
+  --solaris-button-height: var(--solaris-spacing-10);
   --solaris-button-custom-active-background: initial;
+  --solaris-button-color: var(--solaris-primary-text);
   --solaris-button-custom-hover-border-color: initial;
+  --solaris-button-icon-size: var(--solaris-spacing-4);
+  --solaris-button-padding-x: var(--solaris-spacing-4);
+  --solaris-button-padding-y: var(--solaris-spacing-2);
   --solaris-button-custom-active-border-color: initial;
+  --solaris-button-custom-hover-color: initial;
+  --solaris-button-custom-active-color: initial;
+  --solaris-button-min-width: var(--solaris-spacing-20);
+  --solaris-button-font-size: var(--solaris-font-size-md);
+  --solaris-button-background: var(--solaris-primary-base);
+  --solaris-button-disabled-opacity: var(--solaris-opacity-50);
+  --solaris-button-hover-color: var(--solaris-primary-active);
+  --solaris-button-active-color: var(--solaris-primary-active);
+  --solaris-button-focus-ring-color: var(--solaris-primary-base);
+  --solaris-button-font-weight: var(--solaris-font-weight-medium);
+  --solaris-button-hover-background: var(--solaris-primary-hover);
+  --solaris-button-active-background: var(--solaris-primary-active);
 
   cursor: pointer;
   user-select: none;
@@ -48,25 +51,27 @@
   border: var(--solaris-button-border-width) solid
     var(--solaris-button-border-color);
   transition:
-    background var(--solaris-motion-duration-normal, 250ms)
-      var(--solaris-motion-easing-standard, ease),
-    border-color var(--solaris-motion-duration-normal, 250ms)
-      var(--solaris-motion-easing-standard, ease),
-    color var(--solaris-motion-duration-normal, 250ms)
-      var(--solaris-motion-easing-standard, ease),
-    box-shadow var(--solaris-motion-duration-normal, 250ms)
-      var(--solaris-motion-easing-standard, ease),
-    transform var(--solaris-motion-duration-fast, 150ms)
-      var(--solaris-motion-easing-standard, ease);
+    background var(--solaris-motion-duration-slow)
+      var(--solaris-motion-easing-standard),
+    border-color var(--solaris-motion-duration-slow)
+      var(--solaris-motion-easing-standard),
+    color var(--solaris-motion-duration-slow)
+      var(--solaris-motion-easing-standard),
+    box-shadow var(--solaris-motion-duration-slow)
+      var(--solaris-motion-easing-standard),
+    transform var(--solaris-motion-duration-slow)
+      var(--solaris-motion-easing-standard);
 }
 
 [solaris-button]:hover {
+  color: var(--solaris-button-hover-color);
   background: var(--solaris-button-hover-background);
   border-color: var(--solaris-button-hover-border-color);
 }
 
 [solaris-button]:active,
 [solaris-button][data-active] {
+  color: var(--solaris-button-active-color);
   background: var(--solaris-button-active-background);
   border-color: var(--solaris-button-active-border-color);
 }
@@ -98,19 +103,20 @@
   height: var(--solaris-button-icon-size);
   border: 2px solid var(--solaris-button-color);
   border-top-color: transparent;
-  animation: solaris-button-spin 0.6s linear infinite;
+  animation: solaris-button-spin 0.6s var(--solaris-motion-easing-linear)
+    infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
   [solaris-button][data-loading]::before {
-    opacity: 0.5;
     animation: none;
+    opacity: var(--solaris-opacity-50);
   }
 }
 
 [data-reduced-motion='true'] [solaris-button][data-loading]::before {
   animation: none;
-  opacity: 0.5;
+  opacity: var(--solaris-opacity-50);
 }
 
 @keyframes solaris-button-spin {
@@ -163,23 +169,29 @@
 
 [solaris-button][data-color='neutral'][data-appearance='solid'] {
   --solaris-button-color: var(--solaris-text-inverse);
-  --solaris-button-background: var(--solaris-text-default);
-  --solaris-button-hover-background: var(--solaris-text-strong);
-  --solaris-button-active-background: var(--solaris-text-strong);
+  --solaris-button-hover-color: var(--solaris-text-inverse);
+  --solaris-button-active-color: var(--solaris-text-inverse);
+  --solaris-button-background: var(--solaris-surface-reverse);
   --solaris-button-focus-ring-color: var(--solaris-text-default);
+  --solaris-button-hover-background: var(--solaris-surface-reverse-subtle);
+  --solaris-button-active-background: var(--solaris-surface-reverse-muted);
 }
 
 [solaris-button][data-color='neutral'][data-appearance='outline'] {
   --solaris-button-color: var(--solaris-text-default);
+  --solaris-button-hover-color: var(--solaris-text-inverse);
+  --solaris-button-active-color: var(--solaris-text-inverse);
   --solaris-button-border-color: var(--solaris-border-default);
   --solaris-button-focus-ring-color: var(--solaris-text-default);
-  --solaris-button-hover-background: var(--solaris-surface-muted);
-  --solaris-button-active-background: var(--solaris-surface-muted);
   --solaris-button-hover-border-color: var(--solaris-border-strong);
+  --solaris-button-hover-background: var(--solaris-surface-reverse);
+  --solaris-button-active-background: var(--solaris-surface-reverse-muted);
 }
 
 [solaris-button][data-color='neutral'][data-appearance='ghost'] {
   --solaris-button-color: var(--solaris-text-default);
+  --solaris-button-hover-color: var(--solaris-text-default);
+  --solaris-button-active-color: var(--solaris-text-default);
   --solaris-button-focus-ring-color: var(--solaris-text-default);
   --solaris-button-hover-background: var(--solaris-surface-muted);
   --solaris-button-active-background: var(--solaris-surface-muted);
@@ -188,6 +200,8 @@
 [solaris-button][data-color='neutral'][data-appearance='tonal'] {
   --solaris-button-color: var(--solaris-text-default);
   --solaris-button-background: var(--solaris-surface-muted);
+  --solaris-button-hover-color: var(--solaris-text-default);
+  --solaris-button-active-color: var(--solaris-text-default);
   --solaris-button-border-color: var(--solaris-border-default);
   --solaris-button-focus-ring-color: var(--solaris-text-default);
   --solaris-button-hover-background: var(--solaris-surface-subtle);
@@ -198,6 +212,8 @@
 [solaris-button][data-color='neutral'][data-appearance='surface'] {
   --solaris-button-color: var(--solaris-text-default);
   --solaris-button-background: var(--solaris-surface-muted);
+  --solaris-button-hover-color: var(--solaris-text-default);
+  --solaris-button-active-color: var(--solaris-text-default);
   --solaris-button-focus-ring-color: var(--solaris-text-default);
   --solaris-button-hover-background: var(--solaris-surface-subtle);
   --solaris-button-active-background: var(--solaris-surface-subtle);
@@ -205,6 +221,8 @@
 
 [solaris-button][data-color='primary'][data-appearance='solid'] {
   --solaris-button-color: var(--solaris-primary-text);
+  --solaris-button-hover-color: var(--solaris-primary-text);
+  --solaris-button-active-color: var(--solaris-primary-text);
   --solaris-button-background: var(--solaris-primary-base);
   --solaris-button-focus-ring-color: var(--solaris-primary-base);
   --solaris-button-hover-background: var(--solaris-primary-hover);
@@ -212,7 +230,9 @@
 }
 
 [solaris-button][data-color='primary'][data-appearance='outline'] {
-  --solaris-button-color: var(--solaris-primary-text);
+  --solaris-button-color: var(--solaris-primary-base);
+  --solaris-button-hover-color: var(--solaris-primary-text);
+  --solaris-button-active-color: var(--solaris-primary-text);
   --solaris-button-border-color: var(--solaris-primary-border);
   --solaris-button-focus-ring-color: var(--solaris-primary-base);
   --solaris-button-hover-background: var(--solaris-primary-surface);
@@ -220,7 +240,9 @@
 }
 
 [solaris-button][data-color='primary'][data-appearance='ghost'] {
-  --solaris-button-color: var(--solaris-primary-text);
+  --solaris-button-color: var(--solaris-primary-base);
+  --solaris-button-hover-color: var(--solaris-primary-text);
+  --solaris-button-active-color: var(--solaris-primary-text);
   --solaris-button-focus-ring-color: var(--solaris-primary-base);
   --solaris-button-hover-background: var(--solaris-primary-surface);
   --solaris-button-active-background: var(--solaris-primary-surface);
@@ -228,6 +250,8 @@
 
 [solaris-button][data-color='primary'][data-appearance='tonal'] {
   --solaris-button-color: var(--solaris-primary-text);
+  --solaris-button-hover-color: var(--solaris-primary-text);
+  --solaris-button-active-color: var(--solaris-primary-text);
   --solaris-button-background: var(--solaris-primary-surface);
   --solaris-button-border-color: var(--solaris-primary-border);
   --solaris-button-focus-ring-color: var(--solaris-primary-base);
@@ -238,6 +262,8 @@
 
 [solaris-button][data-color='primary'][data-appearance='surface'] {
   --solaris-button-color: var(--solaris-primary-text);
+  --solaris-button-hover-color: var(--solaris-primary-text);
+  --solaris-button-active-color: var(--solaris-primary-text);
   --solaris-button-background: var(--solaris-primary-surface);
   --solaris-button-focus-ring-color: var(--solaris-primary-base);
   --solaris-button-hover-background: var(--solaris-primary-hover);
@@ -245,8 +271,10 @@
 }
 
 [solaris-button][data-color='success'][data-appearance='solid'] {
-  --solaris-button-background: var(--solaris-success-base);
   --solaris-button-color: var(--solaris-success-on-solid);
+  --solaris-button-background: var(--solaris-success-base);
+  --solaris-button-hover-color: var(--solaris-success-on-solid);
+  --solaris-button-active-color: var(--solaris-success-on-solid);
   --solaris-button-focus-ring-color: var(--solaris-success-base);
   --solaris-button-hover-background: var(--solaris-success-hover);
   --solaris-button-active-background: var(--solaris-success-active);
@@ -254,6 +282,8 @@
 
 [solaris-button][data-color='success'][data-appearance='outline'] {
   --solaris-button-color: var(--solaris-success-text);
+  --solaris-button-hover-color: var(--solaris-success-text);
+  --solaris-button-active-color: var(--solaris-success-text);
   --solaris-button-border-color: var(--solaris-success-border);
   --solaris-button-focus-ring-color: var(--solaris-success-base);
   --solaris-button-hover-background: var(--solaris-success-surface);
@@ -262,6 +292,8 @@
 
 [solaris-button][data-color='success'][data-appearance='ghost'] {
   --solaris-button-color: var(--solaris-success-text);
+  --solaris-button-hover-color: var(--solaris-success-text);
+  --solaris-button-active-color: var(--solaris-success-text);
   --solaris-button-focus-ring-color: var(--solaris-success-base);
   --solaris-button-hover-background: var(--solaris-success-surface);
   --solaris-button-active-background: var(--solaris-success-surface);
@@ -269,6 +301,8 @@
 
 [solaris-button][data-color='success'][data-appearance='tonal'] {
   --solaris-button-color: var(--solaris-success-text);
+  --solaris-button-hover-color: var(--solaris-success-text);
+  --solaris-button-active-color: var(--solaris-success-text);
   --solaris-button-background: var(--solaris-success-surface);
   --solaris-button-border-color: var(--solaris-success-border);
   --solaris-button-focus-ring-color: var(--solaris-success-base);
@@ -279,6 +313,8 @@
 
 [solaris-button][data-color='success'][data-appearance='surface'] {
   --solaris-button-color: var(--solaris-success-text);
+  --solaris-button-hover-color: var(--solaris-success-text);
+  --solaris-button-active-color: var(--solaris-success-text);
   --solaris-button-background: var(--solaris-success-surface);
   --solaris-button-focus-ring-color: var(--solaris-success-base);
   --solaris-button-hover-background: var(--solaris-success-hover);
@@ -286,16 +322,20 @@
 }
 
 [solaris-button][data-color='warning'][data-appearance='solid'] {
-  --solaris-button-background: var(--solaris-warning-base);
   --solaris-button-color: var(--solaris-warning-on-solid);
+  --solaris-button-background: var(--solaris-warning-base);
+  --solaris-button-hover-color: var(--solaris-warning-on-solid);
+  --solaris-button-active-color: var(--solaris-success-on-solid);
+  --solaris-button-focus-ring-color: var(--solaris-warning-base);
   --solaris-button-hover-background: var(--solaris-warning-hover);
   --solaris-button-active-background: var(--solaris-warning-active);
-  --solaris-button-focus-ring-color: var(--solaris-warning-base);
 }
 
 [solaris-button][data-color='warning'][data-appearance='outline'] {
   --solaris-button-color: var(--solaris-warning-text);
   --solaris-button-border-color: var(--solaris-warning-border);
+  --solaris-button-hover-color: var(--solaris-warning-text);
+  --solaris-button-active-color: var(--solaris-warning-text);
   --solaris-button-focus-ring-color: var(--solaris-warning-base);
   --solaris-button-hover-background: var(--solaris-warning-surface);
   --solaris-button-active-background: var(--solaris-warning-surface);
@@ -303,6 +343,8 @@
 
 [solaris-button][data-color='warning'][data-appearance='ghost'] {
   --solaris-button-color: var(--solaris-warning-text);
+  --solaris-button-hover-color: var(--solaris-warning-text);
+  --solaris-button-active-color: var(--solaris-warning-text);
   --solaris-button-focus-ring-color: var(--solaris-warning-base);
   --solaris-button-hover-background: var(--solaris-warning-surface);
   --solaris-button-active-background: var(--solaris-warning-surface);
@@ -310,6 +352,8 @@
 
 [solaris-button][data-color='warning'][data-appearance='tonal'] {
   --solaris-button-color: var(--solaris-warning-text);
+  --solaris-button-hover-color: var(--solaris-warning-text);
+  --solaris-button-active-color: var(--solaris-warning-text);
   --solaris-button-background: var(--solaris-warning-surface);
   --solaris-button-border-color: var(--solaris-warning-border);
   --solaris-button-focus-ring-color: var(--solaris-warning-base);
@@ -320,6 +364,8 @@
 
 [solaris-button][data-color='warning'][data-appearance='surface'] {
   --solaris-button-color: var(--solaris-warning-text);
+  --solaris-button-hover-color: var(--solaris-warning-text);
+  --solaris-button-active-color: var(--solaris-warning-text);
   --solaris-button-background: var(--solaris-warning-surface);
   --solaris-button-focus-ring-color: var(--solaris-warning-base);
   --solaris-button-hover-background: var(--solaris-warning-hover);
@@ -327,8 +373,10 @@
 }
 
 [solaris-button][data-color='danger'][data-appearance='solid'] {
-  --solaris-button-background: var(--solaris-danger-base);
   --solaris-button-color: var(--solaris-danger-on-solid);
+  --solaris-button-background: var(--solaris-danger-base);
+  --solaris-button-hover-color: var(--solaris-danger-on-solid);
+  --solaris-button-active-color: var(--solaris-danger-on-solid);
   --solaris-button-focus-ring-color: var(--solaris-danger-base);
   --solaris-button-hover-background: var(--solaris-danger-hover);
   --solaris-button-active-background: var(--solaris-danger-active);
@@ -336,6 +384,8 @@
 
 [solaris-button][data-color='danger'][data-appearance='outline'] {
   --solaris-button-color: var(--solaris-danger-text);
+  --solaris-button-hover-color: var(--solaris-danger-text);
+  --solaris-button-active-color: var(--solaris-danger-text);
   --solaris-button-border-color: var(--solaris-danger-border);
   --solaris-button-focus-ring-color: var(--solaris-danger-base);
   --solaris-button-hover-background: var(--solaris-danger-surface);
@@ -344,6 +394,8 @@
 
 [solaris-button][data-color='danger'][data-appearance='ghost'] {
   --solaris-button-color: var(--solaris-danger-text);
+  --solaris-button-hover-color: var(--solaris-danger-text);
+  --solaris-button-active-color: var(--solaris-danger-text);
   --solaris-button-focus-ring-color: var(--solaris-danger-base);
   --solaris-button-hover-background: var(--solaris-danger-surface);
   --solaris-button-active-background: var(--solaris-danger-surface);
@@ -351,6 +403,8 @@
 
 [solaris-button][data-color='danger'][data-appearance='tonal'] {
   --solaris-button-color: var(--solaris-danger-text);
+  --solaris-button-hover-color: var(--solaris-danger-text);
+  --solaris-button-active-color: var(--solaris-danger-text);
   --solaris-button-background: var(--solaris-danger-surface);
   --solaris-button-border-color: var(--solaris-danger-border);
   --solaris-button-focus-ring-color: var(--solaris-danger-base);
@@ -361,6 +415,8 @@
 
 [solaris-button][data-color='danger'][data-appearance='surface'] {
   --solaris-button-color: var(--solaris-danger-text);
+  --solaris-button-hover-color: var(--solaris-danger-text);
+  --solaris-button-active-color: var(--solaris-danger-text);
   --solaris-button-background: var(--solaris-danger-surface);
   --solaris-button-focus-ring-color: var(--solaris-danger-base);
   --solaris-button-hover-background: var(--solaris-danger-hover);
@@ -370,6 +426,8 @@
 [solaris-button][data-color='info'][data-appearance='solid'] {
   --solaris-button-color: var(--solaris-info-text);
   --solaris-button-background: var(--solaris-info-base);
+  --solaris-button-hover-color: var(--solaris-info-text);
+  --solaris-button-active-color: var(--solaris-info-text);
   --solaris-button-focus-ring-color: var(--solaris-info-base);
   --solaris-button-hover-background: var(--solaris-info-hover);
   --solaris-button-active-background: var(--solaris-info-active);
@@ -377,6 +435,8 @@
 
 [solaris-button][data-color='info'][data-appearance='outline'] {
   --solaris-button-color: var(--solaris-info-text);
+  --solaris-button-hover-color: var(--solaris-info-text);
+  --solaris-button-active-color: var(--solaris-info-text);
   --solaris-button-border-color: var(--solaris-info-border);
   --solaris-button-focus-ring-color: var(--solaris-info-base);
   --solaris-button-hover-background: var(--solaris-info-surface);
@@ -385,6 +445,8 @@
 
 [solaris-button][data-color='info'][data-appearance='ghost'] {
   --solaris-button-color: var(--solaris-info-text);
+  --solaris-button-hover-color: var(--solaris-info-text);
+  --solaris-button-active-color: var(--solaris-info-text);
   --solaris-button-focus-ring-color: var(--solaris-info-base);
   --solaris-button-hover-background: var(--solaris-info-surface);
   --solaris-button-active-background: var(--solaris-info-surface);
@@ -392,6 +454,8 @@
 
 [solaris-button][data-color='info'][data-appearance='tonal'] {
   --solaris-button-color: var(--solaris-info-text);
+  --solaris-button-hover-color: var(--solaris-info-text);
+  --solaris-button-active-color: var(--solaris-info-text);
   --solaris-button-background: var(--solaris-info-surface);
   --solaris-button-border-color: var(--solaris-info-border);
   --solaris-button-focus-ring-color: var(--solaris-info-base);
@@ -402,6 +466,8 @@
 
 [solaris-button][data-color='info'][data-appearance='surface'] {
   --solaris-button-color: var(--solaris-info-text);
+  --solaris-button-hover-color: var(--solaris-info-text);
+  --solaris-button-active-color: var(--solaris-info-text);
   --solaris-button-background: var(--solaris-info-surface);
   --solaris-button-focus-ring-color: var(--solaris-info-base);
   --solaris-button-hover-background: var(--solaris-info-hover);
@@ -437,6 +503,14 @@
     --solaris-button-custom-border-color,
     var(--solaris-border-default)
   );
+  --solaris-button-hover-color: var(
+    --solaris-button-custom-hover-color,
+    var(--solaris-button-custom-color, var(--solaris-text-default))
+  );
+  --solaris-button-active-color: var(
+    --solaris-button-custom-active-color,
+    var(--solaris-button-custom-color, var(--solaris-text-default))
+  );
 }
 
 [solaris-button][data-size='sm'] {

package/styles/_core.scss

@@ -1,37 +1,13 @@
-/// Solaris UI Core
-/// Provides root font-size strategy and base resets.
-///
-/// The default `none` strategy respects the browser's default font-size (typically 16px)
-/// and produces no additional CSS. Consumers who prefer the `rem-10` strategy may opt in,
-/// but must ensure token SCSS files are imported at the correct scope.
-///
-/// Usage:
-///   @use '@solaris-ui/angular/styles' as solaris;
-///
-///   // Default: no root font-size override (browser default)
-///   @include solaris.core();
-///
-///   // rem-10 strategy: 1rem = 10px at root, body reset to 16px
-///   @include solaris.core((root-font-size: rem-10));
-
-@use 'sass:map';
-
-$-default-config: (
-  root-font-size: none,
-);
-
-@mixin core($config: ()) {
-  $merged: map.merge($-default-config, $config);
-
-  $root-font-size: map.get($merged, root-font-size);
-
-  @if $root-font-size == rem-10 {
-    :root {
-      font-size: 62.5%;
-    }
-
-    body {
-      font-size: 1.6rem;
-    }
-  }
-}
+/// Solaris UI Core
+/// Uses the browser's default font-size (100%, typically 16px).
+/// All design tokens are calculated at 1rem = 16px.
+/// Do NOT set a custom root font-size — it breaks accessibility (WCAG 1.4.4).
+///
+/// Usage:
+///   @use '@solaris-ui/angular/styles' as solaris;
+///   @include solaris.core();
+
+@mixin core() {
+  // Uses browser default font-size (100%).
+  // No root font-size override needed.
+}

package/styles/_dropdown-menu.scss

@@ -1,4 +1,8 @@
 .solaris-dropdown-menu-overlay {
+  .solaris-popover-panel__container {
+    padding: 0;
+    overflow: hidden;
+  }
   --solaris-dropdown-menu-min-width: calc(
     var(--solaris-spacing-24) + var(--solaris-spacing-10) +
       var(--solaris-spacing-1)
@@ -7,14 +11,13 @@
     var(--solaris-spacing-24) * 2 + var(--solaris-spacing-10) +
       var(--solaris-spacing-2)
   );
-
-  .solaris-popover-panel__container {
-    padding: 0;
-    overflow: hidden;
-  }
 }
 
 .solaris-dropdown-menu__wrapper {
+  solaris-divider {
+    width: calc(100% + 2 * var(--solaris-dropdown-menu-padding));
+    margin-inline: calc(-1 * var(--solaris-dropdown-menu-padding));
+  }
   --solaris-dropdown-menu-gap: var(--solaris-spacing-2);
   --solaris-dropdown-menu-padding: var(--solaris-spacing-2);
 
@@ -27,18 +30,9 @@
   padding: var(--solaris-dropdown-menu-padding);
   min-width: var(--solaris-dropdown-menu-min-width);
   max-width: var(--solaris-dropdown-menu-max-width);
-
-  solaris-divider {
-    margin-inline: calc(-1 * var(--solaris-dropdown-menu-padding));
-    width: calc(100% + 2 * var(--solaris-dropdown-menu-padding));
-  }
 }
 
 solaris-dropdown-menu-group {
-  display: flex;
-  flex-direction: column;
-  padding-block: var(--solaris-spacing-1);
-
   &:first-child {
     padding-block-start: 0;
   }
@@ -46,6 +40,10 @@ solaris-dropdown-menu-group {
   &:last-child {
     padding-block-end: 0;
   }
+
+  display: flex;
+  flex-direction: column;
+  padding-block: var(--solaris-spacing-1);
 }
 
 solaris-dropdown-menu-label {
@@ -56,9 +54,9 @@ solaris-dropdown-menu-label {
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: var(--solaris-text-muted);
-  font-weight: var(--solaris-font-weight-semibold);
   font-size: var(--solaris-font-size-xs);
   line-height: var(--solaris-line-height-xs);
+  font-weight: var(--solaris-font-weight-semibold);
   padding: var(--solaris-spacing-2) var(--solaris-spacing-3);
 }