@iris-ui-kit/vue 0.2.11 → 0.2.13

package/dist/admin.cjs

@@ -327,6 +327,40 @@ function useI18n() {
   };
 }
 
+// src/admin/styles.ts
+var __NAV_MENU_STYLE_ID = "iris-nav-menu-styles";
+var CSS = `
+:where(.iris-nav-menu-arrow) {
+  flex: 0 0 auto;
+  opacity: 0.6;
+  transform: rotate(0deg);
+  transform-origin: center;
+  transition: transform 160ms ease;
+}
+:where(.iris-nav-menu-arrow[data-reversed="true"]) {
+  transform: rotate(180deg);
+}
+@media (prefers-reduced-motion: reduce) {
+  :where(.iris-nav-menu-arrow) {
+    transition: none;
+  }
+}
+`.trim();
+var installed = false;
+function installNavMenuStyles() {
+  if (installed) return;
+  if (typeof document === "undefined") return;
+  if (document.getElementById(__NAV_MENU_STYLE_ID)) {
+    installed = true;
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = __NAV_MENU_STYLE_ID;
+  style.textContent = CSS;
+  document.head.appendChild(style);
+  installed = true;
+}
+
 // src/admin/NavMenu.ts
 var IrisNavMenu = vue.defineComponent({
   name: "IrisNavMenu",
@@ -353,6 +387,7 @@ var IrisNavMenu = vue.defineComponent({
     "update:expandedKeys": (_keys) => true
   },
   setup(props, { emit, attrs }) {
+    installNavMenuStyles();
     const { t } = useI18n();
     const tree = vue.computed(() => core.visibleNav(props.items));
     const activePath = vue.computed(
@@ -419,7 +454,7 @@ var IrisNavMenu = vue.defineComponent({
       return interactionKeyAtDepth(focusedBranches.value, depth) === key;
     };
     const itemStyle = (opts) => {
-      const bg = opts.active ? "var(--iris-primary)" : opts.hovered && !opts.disabled ? "var(--iris-surface)" : "transparent";
+      const bg = opts.active ? "var(--iris-primary)" : opts.hovered && !opts.disabled ? "var(--iris-surface-hover, var(--iris-surface))" : "transparent";
       return {
         display: "flex",
         alignItems: "center",
@@ -500,6 +535,7 @@ var IrisNavMenu = vue.defineComponent({
       const shown = horizontal ? horizontalBranchVisible(node.key, depth) : open;
       const active = node.key === props.activeKey;
       const trail = branch && !active && activePath.value.includes(node.key);
+      const arrowReversed = branch && !node.disabled && (active || trail || shown || hovered.value === node.key);
       const row = vue.h(
         "button",
         {
@@ -542,7 +578,9 @@ var IrisNavMenu = vue.defineComponent({
           branch ? vue.h(IrisIcon, {
             name: horizontal && depth === 0 ? "chevron-down" : "chevron-right",
             size: 16,
-            style: { marginInlineStart: badgeNode(node) ? "6px" : "auto", opacity: "0.6" }
+            class: "iris-nav-menu-arrow",
+            "data-reversed": arrowReversed ? "true" : void 0,
+            style: { marginInlineStart: badgeNode(node) ? "6px" : "auto" }
           }) : null
         ]
       );