@iris-ui-kit/vue 0.2.11 → 0.2.13

package/dist/index.cjs

@@ -832,6 +832,40 @@ var IrisIcon = vue.defineComponent({
   }
 });
 
+// src/admin/styles.ts
+var __NAV_MENU_STYLE_ID = "iris-nav-menu-styles";
+var CSS2 = `
+: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 installed2 = false;
+function installNavMenuStyles() {
+  if (installed2) return;
+  if (typeof document === "undefined") return;
+  if (document.getElementById(__NAV_MENU_STYLE_ID)) {
+    installed2 = true;
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = __NAV_MENU_STYLE_ID;
+  style.textContent = CSS2;
+  document.head.appendChild(style);
+  installed2 = true;
+}
+
 // src/admin/NavMenu.ts
 var IrisNavMenu = vue.defineComponent({
   name: "IrisNavMenu",
@@ -858,6 +892,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(
@@ -924,7 +959,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",
@@ -1005,6 +1040,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",
         {
@@ -1047,7 +1083,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
         ]
       );
@@ -2915,7 +2953,7 @@ var IrisErrorBoundary = vue.defineComponent({
 
 // src/primitives/button/styles.ts
 var STYLE_ID = "iris-button-styles";
-var CSS2 = `
+var CSS3 = `
 .iris-button {
   cursor: pointer;
   display: inline-flex;
@@ -2968,19 +3006,19 @@ var CSS2 = `
   to { transform: rotate(360deg); }
 }
 `;
-var installed2 = false;
+var installed3 = false;
 function installButtonStyles() {
-  if (installed2) return;
+  if (installed3) return;
   if (typeof document === "undefined") return;
   if (document.getElementById(STYLE_ID)) {
-    installed2 = true;
+    installed3 = true;
     return;
   }
   const style = document.createElement("style");
   style.id = STYLE_ID;
-  style.textContent = CSS2;
+  style.textContent = CSS3;
   document.head.appendChild(style);
-  installed2 = true;
+  installed3 = true;
 }
 
 // src/primitives/button/Button.ts
@@ -6489,7 +6527,7 @@ var IrisAvatar = vue.defineComponent({
 
 // src/primitives/spinner/styles.ts
 var __SPINNER_STYLE_ID = "iris-spinner-styles";
-var CSS3 = `
+var CSS4 = `
 @keyframes iris-spinner-rotate {
   to { transform: rotate(360deg); }
 }
@@ -6512,22 +6550,22 @@ var CSS3 = `
   }
 }
 `.trim();
-var installed3 = false;
+var installed4 = false;
 function installSpinnerStyles() {
-  if (installed3) return;
+  if (installed4) return;
   if (typeof document === "undefined") return;
   if (document.getElementById(__SPINNER_STYLE_ID)) {
-    installed3 = true;
+    installed4 = true;
     return;
   }
   const el = document.createElement("style");
   el.id = __SPINNER_STYLE_ID;
-  el.textContent = CSS3;
+  el.textContent = CSS4;
   document.head.appendChild(el);
-  installed3 = true;
+  installed4 = true;
 }
 function __resetSpinnerStyles() {
-  installed3 = false;
+  installed4 = false;
   if (typeof document !== "undefined") {
     document.getElementById(__SPINNER_STYLE_ID)?.remove();
   }
@@ -6619,7 +6657,7 @@ var IrisSpinner = vue.defineComponent({
 
 // src/primitives/skeleton/styles.ts
 var __SKELETON_STYLE_ID = "iris-skeleton-styles";
-var CSS4 = `
+var CSS5 = `
 @keyframes iris-skeleton-shimmer {
   0%   { background-position: -200% 0; }
   100% { background-position: 200% 0; }
@@ -6659,22 +6697,22 @@ var CSS4 = `
   }
 }
 `.trim();
-var installed4 = false;
+var installed5 = false;
 function installSkeletonStyles() {
-  if (installed4) return;
+  if (installed5) return;
   if (typeof document === "undefined") return;
   if (document.getElementById(__SKELETON_STYLE_ID)) {
-    installed4 = true;
+    installed5 = true;
     return;
   }
   const el = document.createElement("style");
   el.id = __SKELETON_STYLE_ID;
-  el.textContent = CSS4;
+  el.textContent = CSS5;
   document.head.appendChild(el);
-  installed4 = true;
+  installed5 = true;
 }
 function __resetSkeletonStyles() {
-  installed4 = false;
+  installed5 = false;
   if (typeof document !== "undefined") {
     document.getElementById(__SKELETON_STYLE_ID)?.remove();
   }
@@ -6726,7 +6764,7 @@ var IrisSkeleton = vue.defineComponent({
 
 // src/primitives/progress/styles.ts
 var __PROGRESS_STYLE_ID = "iris-progress-styles";
-var CSS5 = `
+var CSS6 = `
 @keyframes iris-progress-indeterminate {
   0%   { left: -40%; right: 100%; }
   60%  { left: 100%; right: -20%; }
@@ -6759,22 +6797,22 @@ var CSS5 = `
   }
 }
 `.trim();
-var installed5 = false;
+var installed6 = false;
 function installProgressStyles() {
-  if (installed5) return;
+  if (installed6) return;
   if (typeof document === "undefined") return;
   if (document.getElementById(__PROGRESS_STYLE_ID)) {
-    installed5 = true;
+    installed6 = true;
     return;
   }
   const el = document.createElement("style");
   el.id = __PROGRESS_STYLE_ID;
-  el.textContent = CSS5;
+  el.textContent = CSS6;
   document.head.appendChild(el);
-  installed5 = true;
+  installed6 = true;
 }
 function __resetProgressStyles() {
-  installed5 = false;
+  installed6 = false;
   if (typeof document !== "undefined") {
     document.getElementById(__PROGRESS_STYLE_ID)?.remove();
   }
@@ -10611,7 +10649,7 @@ var IrisTabs = vue.defineComponent({
 
 // src/primitives/tabs/styles.ts
 var STYLE_ID2 = "iris-tabs-styles";
-var CSS6 = `
+var CSS7 = `
 :where(.iris-tabs-list) {
   display: flex;
   gap: 2px;
@@ -10663,19 +10701,19 @@ var CSS6 = `
   outline-offset: 2px;
 }
 `.trim();
-var installed6 = false;
+var installed7 = false;
 function installTabsStyles() {
-  if (installed6) return;
+  if (installed7) return;
   if (typeof document === "undefined") return;
   if (document.getElementById(STYLE_ID2)) {
-    installed6 = true;
+    installed7 = true;
     return;
   }
   const style = document.createElement("style");
   style.id = STYLE_ID2;
-  style.textContent = CSS6;
+  style.textContent = CSS7;
   document.head.appendChild(style);
-  installed6 = true;
+  installed7 = true;
 }
 
 // src/primitives/tabs/TabsList.ts