@luscii-healthtech/web-ui 58.2.0 → 58.2.2

package/dist/stories/VerticalMenu.stories.d.ts

@@ -89,6 +89,13 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
 export declare const Collapsed: Story;
+/**
+ * The interactive states of a primary menu item: default, hover, pressed and
+ * selected. The hover and pressed rows are simulated with forced classes so
+ * they can be reviewed (and snapshotted) without a pointer — interact with
+ * the other stories to see the real states.
+ */
+export declare const InteractiveStates: Story;
 export declare const NotExpandable: Story;
 export declare const Complex: Story;
 export declare const Truncating: Story;

package/dist/web-ui-tailwind.css

@@ -2772,6 +2772,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:border-border-neutral-primary-default {
   border-color: var(--ui-primitive-color-grey-300);
 }
+.ui\:border-border-neutral-primary-pressed\! {
+  border-color: var(--ui-primitive-color-brand-700) !important;
+}
 .ui\:border-border-neutral-secondary-default {
   border-color: var(--ui-primitive-color-grey-500);
 }
@@ -2892,6 +2895,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:bg-background-neutral-secondary-hovered {
   background-color: var(--ui-primitive-color-brand-300);
 }
+.ui\:bg-background-neutral-secondary-hovered\! {
+  background-color: var(--ui-primitive-color-brand-300) !important;
+}
 .ui\:bg-background-neutral-secondary-selected {
   background-color: var(--ui-primitive-color-brand-300);
 }
@@ -2970,9 +2976,6 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:bg-primary-background {
   background-color: var(--ui-color-blue-100);
 }
-.ui\:bg-primary-background-active {
-  background-color: var(--ui-color-blue-200);
-}
 .ui\:bg-primary-light {
   background-color: var(--ui-color-blue-700);
 }
@@ -3818,9 +3821,6 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:whitespace-pre {
   white-space: pre;
 }
-.ui\:text-\[\#162130\] {
-  color: #162130;
-}
 .ui\:text-amber-700 {
   color: var(--ui-color-amber-700);
 }
@@ -5692,6 +5692,16 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     scale: 0.98;
   }
 }
+.ui\:active\:border-border-neutral-primary-pressed {
+  &:active {
+    border-color: var(--ui-primitive-color-brand-700);
+  }
+}
+.ui\:active\:bg-background-neutral-secondary-hovered {
+  &:active {
+    background-color: var(--ui-primitive-color-brand-300);
+  }
+}
 .ui\:active\:shadow-base {
   &:active {
     --tw-shadow: 0px 1px 3px var(--tw-shadow-color, rgba(0, 0, 0, 0.1)), 0px 1px 2px var(--tw-shadow-color, rgba(0, 0, 0, 0.06));
@@ -6385,20 +6395,55 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     }
   }
 }
-.ui\:\[\&_\.menu-icon\]\:text-\[\#3a4657\] {
+.ui\:\[\&_\.menu-icon\]\:text-icon-neutral-primary-default {
+  & .menu-icon {
+    color: var(--ui-primitive-color-grey-700);
+  }
+}
+.ui\:\[\&_\.menu-icon\]\:text-icon-neutral-primary-hover\! {
   & .menu-icon {
-    color: #3a4657;
+    color: var(--ui-primitive-color-grey-700) !important;
   }
 }
-.ui\:hover\:\[\&_\.menu-icon\]\:text-\[\#162130\] {
+.ui\:hover\:\[\&_\.menu-icon\]\:text-icon-neutral-primary-hover {
   &:hover {
     @media (hover: hover) {
       & .menu-icon {
-        color: #162130;
+        color: var(--ui-primitive-color-grey-700);
       }
     }
   }
 }
+.ui\:\[\&_\.menu-item-text\]\:font-semibold {
+  & .menu-item-text {
+    --tw-font-weight: var(--ui-font-weight-semibold);
+    font-weight: var(--ui-font-weight-semibold);
+  }
+}
+.ui\:\[\&_\.menu-item-text\]\:font-semibold\! {
+  & .menu-item-text {
+    --tw-font-weight: var(--ui-font-weight-semibold) !important;
+    font-weight: var(--ui-font-weight-semibold) !important;
+  }
+}
+.ui\:hover\:\[\&_\.menu-item-text\]\:font-semibold {
+  &:hover {
+    @media (hover: hover) {
+      & .menu-item-text {
+        --tw-font-weight: var(--ui-font-weight-semibold);
+        font-weight: var(--ui-font-weight-semibold);
+      }
+    }
+  }
+}
+.ui\:active\:\[\&_\.menu-item-text\]\:font-semibold {
+  &:active {
+    & .menu-item-text {
+      --tw-font-weight: var(--ui-font-weight-semibold);
+      font-weight: var(--ui-font-weight-semibold);
+    }
+  }
+}
 .ui\:\[\&_a\]\:cursor-pointer {
   & a {
     cursor: pointer;