@auvyx/ui 0.0.0-stage → 0.1.0

package/dist/ui/menu.js

@@ -0,0 +1,161 @@
+/* @auvyx/ui v0.1.0 | MIT | based on Basecoat (MIT) */
+(() => {
+  // ../elements/src/menu.js
+  (() => {
+    if (window.__auvyxMenu) return;
+    window.__auvyxMenu = true;
+    const ITEM = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]';
+    const MENU_POPOVER = "[data-popover][popover]";
+    const isUsable = (el) => !el.disabled && el.getAttribute("aria-disabled") !== "true" && !el.closest("[hidden]");
+    const itemsOf = (popover) => [...popover.querySelectorAll(ITEM)].filter(isUsable);
+    const triggerOf = (popover) => popover.id ? document.querySelector(`[popovertarget="${CSS.escape(popover.id)}"]`) : null;
+    const popoverOf = (trigger) => {
+      const id = trigger?.getAttribute("popovertarget");
+      return id ? document.getElementById(id) : null;
+    };
+    const isMenuPopover = (el) => el instanceof HTMLElement && el.matches(MENU_POPOVER) && el.querySelector('[role="menu"]');
+    const menubarOf = (el) => el?.closest(".menubar");
+    const menubarTriggers = (bar) => [...bar.querySelectorAll(":scope > .dropdown-menu > [popovertarget]")];
+    const focusItem = (item) => item?.focus({ preventScroll: true });
+    const open = (trigger, focus = "first") => {
+      const popover = popoverOf(trigger);
+      if (!popover) return;
+      popover.dataset.focusOnOpen = focus;
+      if (!popover.matches(":popover-open")) popover.showPopover({ source: trigger });
+      else focusItem(focus === "last" ? itemsOf(popover).at(-1) : itemsOf(popover)[0]);
+    };
+    document.addEventListener("toggle", (event) => {
+      const popover = event.target;
+      if (!(popover instanceof HTMLElement) || !popover.matches(MENU_POPOVER)) return;
+      const trigger = triggerOf(popover);
+      if (trigger && trigger.hasAttribute("aria-haspopup")) trigger.setAttribute("aria-expanded", String(event.newState === "open"));
+      if (event.newState !== "open" || !isMenuPopover(popover)) return;
+      const where = popover.dataset.focusOnOpen || "first";
+      delete popover.dataset.focusOnOpen;
+      if (where === "none") return;
+      requestAnimationFrame(() => {
+        const items = itemsOf(popover);
+        focusItem(where === "last" ? items.at(-1) : items[0]);
+      });
+    }, true);
+    document.addEventListener("keydown", (event) => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+      const popover = target.closest(MENU_POPOVER);
+      if (popover && isMenuPopover(popover) && target.matches(ITEM)) {
+        const items = itemsOf(popover);
+        const index = items.indexOf(target);
+        const move = { ArrowDown: index + 1, ArrowUp: index - 1, Home: 0, End: items.length - 1 }[event.key];
+        if (move !== void 0) {
+          event.preventDefault();
+          focusItem(items[(move + items.length) % items.length]);
+          return;
+        }
+        if (event.key === "Tab") {
+          popover.hidePopover();
+          return;
+        }
+        if (event.key === "Escape") {
+          event.preventDefault();
+          popover.hidePopover();
+          triggerOf(popover)?.focus({ preventScroll: true });
+          return;
+        }
+        const bar = menubarOf(triggerOf(popover));
+        if (bar && (event.key === "ArrowRight" || event.key === "ArrowLeft")) {
+          event.preventDefault();
+          const triggers = menubarTriggers(bar);
+          const at = triggers.indexOf(triggerOf(popover));
+          const rtl = getComputedStyle(bar).direction === "rtl";
+          const step = event.key === "ArrowRight" !== rtl ? 1 : -1;
+          const next = triggers[(at + step + triggers.length) % triggers.length];
+          popover.hidePopover();
+          open(next);
+          return;
+        }
+        return;
+      }
+      if (target.matches("[popovertarget]")) {
+        const menu = popoverOf(target);
+        const bar = menubarOf(target);
+        if (menu && isMenuPopover(menu) && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+          event.preventDefault();
+          open(target, event.key === "ArrowUp" ? "last" : "first");
+          return;
+        }
+        if (bar && (event.key === "ArrowRight" || event.key === "ArrowLeft" || event.key === "Home" || event.key === "End")) {
+          event.preventDefault();
+          const triggers = menubarTriggers(bar);
+          const at = triggers.indexOf(target);
+          const rtl = getComputedStyle(bar).direction === "rtl";
+          const step = event.key === "ArrowRight" !== rtl ? 1 : -1;
+          const next = event.key === "Home" ? triggers[0] : event.key === "End" ? triggers.at(-1) : triggers[(at + step + triggers.length) % triggers.length];
+          next.focus();
+        }
+      }
+    });
+    document.addEventListener("click", (event) => {
+      const item = event.target instanceof Element && event.target.closest(ITEM);
+      if (!item || !isUsable(item)) return;
+      const popover = item.closest(MENU_POPOVER);
+      if (!popover) return;
+      const role = item.getAttribute("role");
+      if (role === "menuitemcheckbox") {
+        item.setAttribute("aria-checked", String(item.getAttribute("aria-checked") !== "true"));
+      } else if (role === "menuitemradio") {
+        const group = item.closest('[role="group"]') || popover;
+        group.querySelectorAll('[role="menuitemradio"]').forEach((radio) => radio.setAttribute("aria-checked", String(radio === item)));
+      }
+      if (item.hasAttribute("popovertarget") || item.hasAttribute("data-keep-open")) return;
+      if (role !== "menuitem" && !item.hasAttribute("data-close")) return;
+      popover.hidePopover();
+      triggerOf(popover)?.focus({ preventScroll: true });
+    });
+    document.addEventListener("pointerover", (event) => {
+      const trigger = event.target instanceof Element && event.target.closest(".menubar > .dropdown-menu > [popovertarget]");
+      if (!trigger) return;
+      const bar = menubarOf(trigger);
+      const openMenu = menubarTriggers(bar).map(popoverOf).find((p) => p?.matches(":popover-open"));
+      if (!openMenu || openMenu === popoverOf(trigger)) return;
+      openMenu.hidePopover();
+      open(trigger, "none");
+    });
+    const navTimers = /* @__PURE__ */ new WeakMap();
+    const clearNav = (li) => clearTimeout(navTimers.get(li));
+    document.addEventListener("pointerover", (event) => {
+      if (event.pointerType !== "mouse") return;
+      const li = event.target instanceof Element && event.target.closest(".navigation-menu > ul > li");
+      if (!li) return;
+      clearNav(li);
+      const trigger = li.querySelector(":scope > [popovertarget]");
+      const panel = popoverOf(trigger);
+      if (!panel || panel.matches(":popover-open")) return;
+      navTimers.set(li, setTimeout(() => {
+        panel.dataset.openedByHover = String(Date.now());
+        panel.showPopover({ source: trigger });
+      }, 120));
+    });
+    document.addEventListener("pointerout", (event) => {
+      if (event.pointerType !== "mouse") return;
+      const li = event.target instanceof Element && event.target.closest(".navigation-menu > ul > li");
+      if (!li || li.contains(event.relatedTarget)) return;
+      clearNav(li);
+      const panel = popoverOf(li.querySelector(":scope > [popovertarget]"));
+      if (!panel || !panel.dataset.openedByHover) return;
+      navTimers.set(li, setTimeout(() => {
+        if (panel.matches(":popover-open") && !li.matches(":hover")) panel.hidePopover();
+        delete panel.dataset.openedByHover;
+      }, 200));
+    });
+    document.addEventListener("click", (event) => {
+      const trigger = event.target instanceof Element && event.target.closest(".navigation-menu > ul > li > [popovertarget]");
+      const panel = popoverOf(trigger);
+      if (!panel?.dataset.openedByHover) return;
+      if (Date.now() - Number(panel.dataset.openedByHover) < 600 && panel.matches(":popover-open")) {
+        event.preventDefault();
+        return;
+      }
+      delete panel.dataset.openedByHover;
+    }, true);
+  })();
+})();

package/dist/ui/menubar.css

@@ -0,0 +1,55 @@
+/* @auvyx/ui menubar | order 52 */
+@layer components {
+  .menubar {
+      display: flex;
+      width: fit-content;
+      align-items: center;
+      > .dropdown-menu > :is(button, [popovertarget]):first-child {
+        display: flex;
+        cursor: default;
+        align-items: center;
+        --tw-outline-style: none;
+        outline-style: none;
+        -webkit-user-select: none;
+        user-select: none;
+      }
+    }
+}
+
+@layer components {
+  .menubar {
+      height: calc(var(--spacing) * 9);
+      gap: var(--spacing);
+      border-radius: var(--auvyx-r-control);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      background-color: var(--color-background);
+      padding: var(--spacing);
+      --tw-shadow: var(--shadow-xs, 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  .menubar > .dropdown-menu > :is(button, [popovertarget]):first-child {
+      border-radius: calc(var(--auvyx-r-control) - 2px);
+      padding-inline: calc(var(--spacing) * 2);
+      padding-block: var(--spacing);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-muted);
+        }
+      }
+      &:focus-visible {
+        background-color: var(--color-muted);
+      }
+    }
+  .menubar > .dropdown-menu:has(> [data-popover]:popover-open) > :is(button, [popovertarget]):first-child {
+      background-color: var(--color-muted);
+    }
+  .menubar > .dropdown-menu > [data-popover] {
+      min-width: calc(var(--spacing) * 36);
+      margin-block-start: 0.5rem;
+    }
+}

package/dist/ui/message-scroller.css

@@ -0,0 +1,83 @@
+/* @auvyx/ui message-scroller | order 47 */
+@layer components {
+  .message-scroller {
+      position: relative;
+      display: flex;
+      min-height: 0;
+      flex-direction: column;
+      overflow: hidden;
+      timeline-scope: --bc-message-log;
+      > [role='log'] {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        min-height: 0;
+        min-width: 0;
+        flex-direction: column-reverse;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        --tw-outline-style: none;
+        outline-style: none;
+        scroll-timeline: --bc-message-log block;
+        scrollbar-width: thin;
+        > * {
+          display: flex;
+          flex-direction: column;
+        }
+      }
+      > :is(a, button):last-child {
+        position: absolute;
+        inset-inline-start: calc(1/2 * 100%);
+        z-index: 10;
+        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+        &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+          --tw-translate-x: calc(1 / 2 * 100%);
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+        bottom: 1rem;
+        animation: bc-message-scroller-jump linear both;
+        animation-timeline: --bc-message-log;
+        animation-range: 0 4rem;
+      }
+    }
+  @keyframes bc-message-scroller-jump {
+      from {
+        opacity: 0;
+        scale: 0.95;
+        visibility: hidden;
+      }
+      to {
+        opacity: 1;
+        scale: 1;
+        visibility: visible;
+      }
+    }
+  @supports not (animation-timeline: scroll()) {
+      .message-scroller > :is(a, button):last-child {
+        animation: none;
+      }
+    }
+}
+
+@layer components {
+  .message-scroller > [role='log'] > * {
+      gap: calc(var(--spacing) * 8);
+      padding: calc(var(--spacing) * 4);
+    }
+  .message-scroller > :is(a, button):last-child {
+      border-radius: calc(infinity * 1px);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--color-border);
+      background-color: var(--color-background);
+      color: var(--color-foreground);
+      --tw-shadow: var(--shadow-sm, 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-muted);
+        }
+      }
+    }
+}

package/dist/ui/message.css

@@ -0,0 +1,69 @@
+/* @auvyx/ui message | order 44 */
+@layer components {
+  .message-group {
+      display: flex;
+      min-width: 0;
+      flex-direction: column;
+    }
+  .message {
+      position: relative;
+      display: flex;
+      width: 100%;
+      min-width: 0;
+      &[data-align='end'] {
+        flex-direction: row-reverse;
+      }
+      > .avatar, > img {
+        flex-shrink: 0;
+        align-self: flex-end;
+      }
+      > section {
+        display: flex;
+        width: 100%;
+        min-width: 0;
+        flex-direction: column;
+        overflow-wrap: break-word;
+      }
+      &[data-align='end'] > section > * {
+        align-self: flex-end;
+      }
+      > section > :is(header, footer) {
+        display: flex;
+        max-width: 100%;
+        min-width: 0;
+        align-items: center;
+      }
+    }
+}
+
+@layer components {
+  .message-group {
+      gap: calc(var(--spacing) * 2);
+    }
+  .message {
+      gap: calc(var(--spacing) * 2);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  .message > :is(.avatar, img) {
+      min-width: calc(var(--spacing) * 8);
+    }
+  .message:has(> section > footer) > :is(.avatar, img) {
+      --tw-translate-y: calc(var(--spacing) * -8);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  .message > section {
+      gap: calc(var(--spacing) * 2.5);
+    }
+  .message > section > :is(header, footer) {
+      padding-inline: calc(var(--spacing) * 3);
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+      color: var(--color-muted-foreground);
+    }
+  .message:has(.bubble[data-variant='ghost']) > section > :is(header, footer) {
+      padding-inline: 0;
+    }
+}

package/dist/ui/native-select.css

@@ -0,0 +1,130 @@
+/* @auvyx/ui native-select | order 22 */
+@layer components {
+  .field > select, select.select {
+      min-width: 0;
+      appearance: none;
+      --tw-outline-style: none;
+      outline-style: none;
+      -webkit-user-select: none;
+      user-select: none;
+      &:disabled {
+        cursor: not-allowed;
+      }
+      &:disabled {
+        opacity: 50%;
+      }
+      option, optgroup {
+        background-color: Canvas;
+        color: CanvasText;
+      }
+    }
+}
+
+@layer components {
+  .field > select, select.select {
+      height: calc(var(--spacing) * 9);
+      width: fit-content;
+      border-radius: var(--radius-md);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--color-input);
+      background-color: transparent;
+      padding-block: var(--spacing);
+      padding-inline-start: calc(var(--spacing) * 2.5);
+      padding-inline-end: calc(var(--spacing) * 8);
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
+      --tw-shadow: var(--shadow-xs, 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      transition-property: color,box-shadow;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      & *::selection {
+        background-color: var(--color-primary);
+      }
+      &::selection {
+        background-color: var(--color-primary);
+      }
+      & *::selection {
+        color: var(--color-primary-foreground);
+      }
+      &::selection {
+        color: var(--color-primary-foreground);
+      }
+      &::placeholder {
+        color: var(--color-muted-foreground);
+      }
+      &:focus-visible {
+        border-color: var(--color-ring);
+      }
+      &:focus-visible {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      &:focus-visible {
+        --tw-ring-color: var(--color-ring);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        }
+      }
+      &[aria-invalid="true"] {
+        border-color: var(--color-destructive);
+      }
+      &[aria-invalid="true"] {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      &[aria-invalid="true"] {
+        --tw-ring-color: var(--color-destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        }
+      }
+      &[data-size="sm"] {
+        height: calc(var(--spacing) * 8);
+      }
+      @media (width >= 48rem) {
+        font-size: var(--text-sm);
+        line-height: var(--tw-leading, var(--text-sm--line-height));
+      }
+      &:is(html.dark *) {
+        background-color: var(--color-input);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
+        }
+      }
+      &:is(html.dark *) {
+        &:hover {
+          @media (hover: hover) {
+            background-color: var(--color-input);
+            @supports (color: color-mix(in lab, red, red)) {
+              background-color: color-mix(in oklab, var(--color-input) 50%, transparent);
+            }
+          }
+        }
+      }
+      &:is(html.dark *) {
+        &[aria-invalid="true"] {
+          border-color: var(--color-destructive);
+          @supports (color: color-mix(in lab, red, red)) {
+            border-color: color-mix(in oklab, var(--color-destructive) 50%, transparent);
+          }
+        }
+      }
+      &:is(html.dark *) {
+        &[aria-invalid="true"] {
+          --tw-ring-color: var(--color-destructive);
+          @supports (color: color-mix(in lab, red, red)) {
+            --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+          }
+        }
+      }
+      background-image: var(--chevron-down-icon-50);
+      background-size: 1rem;
+      background-position: center right 0.625rem;
+      background-repeat: no-repeat;
+    }
+  :is(.field > select, select.select):dir(rtl) {
+      background-position: center left 0.625rem;
+    }
+}

package/dist/ui/navigation-menu.css

@@ -0,0 +1,166 @@
+/* @auvyx/ui navigation-menu | order 53 */
+@layer components {
+  .navigation-menu {
+      position: relative;
+      display: flex;
+      max-width: max-content;
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+      > ul {
+        margin: 0;
+        display: flex;
+        flex: 1;
+        list-style-type: none;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        > li {
+          position: relative;
+        }
+        > li > :is(a, button) {
+          display: inline-flex;
+          width: max-content;
+          align-items: center;
+          justify-content: center;
+          --tw-outline-style: none;
+          outline-style: none;
+        }
+        > li > button > svg:last-child {
+          position: relative;
+          top: 1px;
+          margin-inline-start: var(--spacing);
+          width: calc(var(--spacing) * 3);
+          height: calc(var(--spacing) * 3);
+          transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+          transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+          transition-duration: var(--tw-duration, var(--default-transition-duration));
+          --tw-duration: 300ms;
+          transition-duration: 300ms;
+        }
+        > li:has(> [data-popover]:popover-open) > button > svg:last-child {
+          rotate: 180deg;
+        }
+      }
+      [data-popover] > ul {
+        margin: 0;
+        display: grid;
+        list-style-type: none;
+        padding: 0;
+        grid-template-columns: repeat(var(--nav-cols, 1), minmax(0, var(--nav-col-width, 14rem)));
+      }
+      [data-popover][data-cols='2'] > ul {
+        --nav-cols: 2;
+      }
+      [data-popover][data-cols='3'] > ul {
+        --nav-cols: 3;
+      }
+      [data-popover] a {
+        display: flex;
+        flex-direction: column;
+        --tw-outline-style: none;
+        outline-style: none;
+        > span {
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+        }
+      }
+    }
+  @media (width < 40rem) {
+      .navigation-menu [data-popover] > ul {
+        --nav-cols: 1;
+      }
+    }
+}
+
+@layer components {
+  .navigation-menu > ul {
+      gap: 0;
+    }
+  .navigation-menu > ul > li > :is(a, button) {
+      height: calc(var(--spacing) * 9);
+      border-radius: var(--auvyx-r-control);
+      padding-inline: calc(var(--spacing) * 4);
+      padding-block: calc(var(--spacing) * 2);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+      transition-property: all;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-muted);
+        }
+      }
+      &:focus-visible {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      &:focus-visible {
+        --tw-ring-color: var(--color-ring);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        }
+      }
+      &:disabled {
+        opacity: 50%;
+      }
+    }
+  .navigation-menu > ul > li:has(> [data-popover]:popover-open) > button {
+      background-color: var(--color-muted);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+      }
+    }
+  .navigation-menu [data-popover] {
+      border-radius: var(--auvyx-r-surface);
+      padding: calc(var(--spacing) * 2);
+      --tw-shadow: var(--shadow-sm, 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      margin-block-start: 0.375rem;
+    }
+  .navigation-menu [data-popover] > ul {
+      gap: var(--spacing);
+    }
+  .navigation-menu [data-popover] a {
+      gap: var(--spacing);
+      border-radius: var(--auvyx-r-control);
+      padding: calc(var(--spacing) * 2);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      transition-property: all;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-muted);
+        }
+      }
+      &:focus-visible {
+        background-color: var(--color-muted);
+      }
+      &:focus-visible {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      &:focus-visible {
+        --tw-ring-color: var(--color-ring);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        }
+      }
+    }
+  .navigation-menu [data-popover] a > strong {
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+  .navigation-menu [data-popover] a > span {
+      --tw-leading: var(--leading-snug);
+      line-height: var(--leading-snug);
+      color: var(--color-muted-foreground);
+    }
+}