@auvyx/ui 0.0.0-stage → 0.1.0

package/dist/ui/drawer.css

@@ -0,0 +1,238 @@
+/* @auvyx/ui drawer | order 13 */
+@layer components {
+  .drawer {
+      position: fixed;
+      inset: 0;
+      margin: 0;
+      width: auto;
+      height: auto;
+      max-height: none;
+      max-width: none;
+      overflow: visible;
+      background-color: transparent;
+      padding: 0;
+      color: inherit;
+      opacity: 0%;
+      transition-property: all;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      transition-behavior: allow-discrete;
+      --tw-duration: 500ms;
+      transition-duration: 500ms;
+      --tw-ease: cubic-bezier(0.32,0.72,0,1);
+      transition-timing-function: cubic-bezier(0.32,0.72,0,1);
+      &::backdrop {
+        opacity: 0%;
+      }
+      &::backdrop {
+        transition-property: all;
+        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+        transition-duration: var(--tw-duration, var(--default-transition-duration));
+      }
+      &::backdrop {
+        transition-behavior: allow-discrete;
+      }
+      &::backdrop {
+        --tw-duration: 500ms;
+        transition-duration: 500ms;
+      }
+      &::backdrop {
+        --tw-ease: cubic-bezier(0.32,0.72,0,1);
+        transition-timing-function: cubic-bezier(0.32,0.72,0,1);
+      }
+      > * {
+        position: fixed;
+        z-index: 50;
+        display: flex;
+        height: auto;
+        flex-direction: column;
+        --tw-outline-style: none;
+        outline-style: none;
+        @media (forced-colors: active) {
+          outline: 2px solid transparent;
+          outline-offset: 2px;
+        }
+        transition-property: transform, translate, scale, rotate;
+        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+        transition-duration: var(--tw-duration, var(--default-transition-duration));
+        --tw-duration: 500ms;
+        transition-duration: 500ms;
+        --tw-ease: cubic-bezier(0.32,0.72,0,1);
+        transition-timing-function: cubic-bezier(0.32,0.72,0,1);
+        will-change: transform;
+      }
+      &:not([data-side]) > *, &[data-side='bottom'] > * {
+        inset-inline: 0;
+        bottom: 0;
+        margin-top: calc(var(--spacing) * 24);
+        max-height: 80vh;
+        --tw-translate-y: 100%;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+      &[data-side='top'] > * {
+        inset-inline: 0;
+        top: 0;
+        margin-bottom: calc(var(--spacing) * 24);
+        max-height: 80vh;
+        --tw-translate-y: -100%;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+      &[data-side='left'] > * {
+        inset-block: 0;
+        left: 0;
+        width: calc(3 / 4 * 100%);
+        max-width: var(--container-sm);
+        --tw-translate-x: -100%;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+      &[data-side='right'] > * {
+        inset-block: 0;
+        right: 0;
+        width: calc(3 / 4 * 100%);
+        max-width: var(--container-sm);
+        --tw-translate-x: 100%;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+      &[data-closing] {
+        opacity: 0%;
+        &::backdrop {
+          opacity: 0%;
+        }
+      }
+      &[data-closing]:not([data-side]) > *, &[data-closing][data-side='bottom'] > * {
+        --tw-translate-y: 100%;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+      &[data-closing][data-side='top'] > * {
+        --tw-translate-y: -100%;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+      &[data-closing][data-side='left'] > * {
+        --tw-translate-x: -100%;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+      &[data-closing][data-side='right'] > * {
+        --tw-translate-x: 100%;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+      &:is([open], :popover-open):not([data-closing]) {
+        opacity: 100%;
+        &::backdrop {
+          opacity: 100%;
+        }
+        > * {
+          --tw-translate-x: 0;
+          --tw-translate-y: 0;
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+        @starting-style {
+          opacity: 0%;
+          &::backdrop {
+            opacity: 0%;
+          }
+          &:not([data-side]) > *, &[data-side='bottom'] > * {
+            --tw-translate-y: 100%;
+            translate: var(--tw-translate-x) var(--tw-translate-y);
+          }
+          &[data-side='top'] > * {
+            --tw-translate-y: -100%;
+            translate: var(--tw-translate-x) var(--tw-translate-y);
+          }
+          &[data-side='left'] > * {
+            --tw-translate-x: -100%;
+            translate: var(--tw-translate-x) var(--tw-translate-y);
+          }
+          &[data-side='right'] > * {
+            --tw-translate-x: 100%;
+            translate: var(--tw-translate-x) var(--tw-translate-y);
+          }
+        }
+      }
+      > * > header {
+        display: flex;
+        flex-direction: column;
+      }
+      > * > section {
+        min-height: 0;
+        flex: 1;
+        overflow-y: auto;
+      }
+      > * > footer {
+        margin-top: auto;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+}
+
+@layer components {
+  .drawer::backdrop {
+      background-color: color-mix(in srgb, #000 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
+      }
+      --tw-backdrop-blur: blur(var(--blur-xs));
+      -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+      backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    }
+  .drawer > * {
+      background-color: var(--color-popover);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      color: var(--color-popover-foreground);
+    }
+  .drawer:not([data-side]) > *, .drawer[data-side='bottom'] > * {
+      border-top-left-radius: var(--radius-xl);
+      border-top-right-radius: var(--radius-xl);
+      border-top-style: var(--tw-border-style);
+      border-top-width: 1px;
+    }
+  .drawer[data-side='top'] > * {
+      border-bottom-right-radius: var(--radius-xl);
+      border-bottom-left-radius: var(--radius-xl);
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+    }
+  .drawer[data-side='left'] > * {
+      border-top-right-radius: var(--radius-xl);
+      border-bottom-right-radius: var(--radius-xl);
+      border-right-style: var(--tw-border-style);
+      border-right-width: 1px;
+    }
+  .drawer[data-side='right'] > * {
+      border-top-left-radius: var(--radius-xl);
+      border-bottom-left-radius: var(--radius-xl);
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
+  .drawer > * > header {
+      gap: calc(var(--spacing) * 0.5);
+      padding: calc(var(--spacing) * 4);
+      text-align: start;
+      @media (width >= 48rem) {
+        gap: calc(var(--spacing) * 1.5);
+      }
+    }
+  .drawer:not([data-side]) > * > header, .drawer[data-side='bottom'] > * > header, .drawer[data-side='top'] > * > header {
+      text-align: center;
+    }
+  .drawer > * > footer {
+      gap: calc(var(--spacing) * 2);
+      padding: calc(var(--spacing) * 4);
+    }
+  .drawer > * > header > h2, .drawer > * > [data-title] {
+      font-size: var(--text-lg);
+      line-height: var(--tw-leading, var(--text-lg--line-height));
+      --tw-leading: 1;
+      line-height: 1;
+      --tw-font-weight: var(--font-weight-semibold);
+      font-weight: var(--font-weight-semibold);
+      --tw-tracking: var(--tracking-tight);
+      letter-spacing: var(--tracking-tight);
+    }
+  .drawer > * > header > p, .drawer > * > [data-description] {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      color: var(--color-muted-foreground);
+    }
+}

package/dist/ui/drawer.js

@@ -0,0 +1,265 @@
+/* @auvyx/ui v0.1.0 | MIT | based on Basecoat (MIT) */
+// Basecoat core, once per page.
+if (!window.basecoat) (() => {
+  const componentRegistry = {};
+  let observer = null;
+
+  const registerComponent = (name, selectorOrOptions, initFunction) => {
+    const options = typeof selectorOrOptions === 'object'
+      ? selectorOrOptions
+      : { selector: selectorOrOptions, init: initFunction };
+
+    componentRegistry[name] = {
+      selector: options.selector,
+      init: options.init,
+      refresh: options.refresh,
+    };
+  };
+
+  const initComponent = (element, componentName) => {
+    const component = componentRegistry[componentName];
+    if (!component) return;
+
+    try {
+      component.init(element);
+      if (element.hasAttribute(`data-${componentName}-initialized`)) {
+        element.dataset.basecoatComponent = componentName;
+      }
+    } catch (error) {
+      console.error(`Failed to initialize ${componentName}:`, error);
+      if (typeof element._destroy === 'function') {
+        try {
+          element._destroy();
+        } catch (destroyError) {
+          console.error(`Failed to clean up ${componentName} after initialization error:`, destroyError);
+        }
+      }
+      delete element._destroy;
+      element.removeAttribute(`data-${componentName}-initialized`);
+      delete element.dataset.basecoatComponent;
+    }
+  };
+
+  const destroyComponent = (element) => {
+    if (!element || element.nodeType !== Node.ELEMENT_NODE) return;
+    const componentName = element.dataset?.basecoatComponent;
+
+    if (typeof element._destroy === 'function') {
+      try {
+        element._destroy();
+      } catch (error) {
+        console.error('Failed to destroy Basecoat component:', error);
+      }
+    }
+
+    delete element._destroy;
+    if (componentName) element.removeAttribute(`data-${componentName}-initialized`);
+    delete element.dataset.basecoatComponent;
+  };
+
+  const destroyRemovedComponents = (node) => {
+    if (node.nodeType !== Node.ELEMENT_NODE) return;
+    if (node.isConnected) return;
+
+    if (node.dataset?.basecoatComponent) destroyComponent(node);
+    node.querySelectorAll('[data-basecoat-component]').forEach(destroyComponent);
+  };
+
+  const uniqueElements = (elements) => Array.from(new Set(elements));
+
+  const getComponentElements = (componentName, selector, force = false) => {
+    const elements = Array.from(document.querySelectorAll(selector));
+    if (force) {
+      elements.push(...document.querySelectorAll(`[data-basecoat-component="${componentName}"]`));
+    }
+    return uniqueElements(elements);
+  };
+
+  const initAllComponents = (options = {}) => {
+    const force = options.force === true;
+    Object.entries(componentRegistry).forEach(([name, { selector }]) => {
+      getComponentElements(name, selector, force).forEach((element) => {
+        const wasComponent = element.dataset?.basecoatComponent === name;
+        if (force) destroyComponent(element);
+        if (wasComponent || element.matches(selector)) initComponent(element, name);
+      });
+    });
+  };
+
+  const initNewComponents = (node) => {
+    if (node.nodeType !== Node.ELEMENT_NODE) return;
+
+    Object.entries(componentRegistry).forEach(([name, { selector }]) => {
+      if (node.matches(selector)) initComponent(node, name);
+      node.querySelectorAll(selector).forEach(element => initComponent(element, name));
+    });
+  };
+
+  const refreshComponent = (element) => {
+    if (!element) return;
+    if (typeof element.refresh === 'function') {
+      element.refresh();
+      return;
+    }
+
+    const componentName = element.dataset?.basecoatComponent;
+    const component = componentName ? componentRegistry[componentName] : null;
+    if (component?.refresh) {
+      component.refresh(element);
+    }
+  };
+
+  const startObserver = () => {
+    if (observer) return;
+
+    observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach(initNewComponents);
+        mutation.removedNodes.forEach(destroyRemovedComponents);
+      });
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+  };
+
+  const stopObserver = () => {
+    if (!observer) return;
+    observer.disconnect();
+    observer = null;
+  };
+
+  const initRegisteredComponent = (componentName, options = {}) => {
+    const component = componentRegistry[componentName];
+    if (!component) {
+      console.warn(`Component '${componentName}' not found in registry`);
+      return;
+    }
+
+    const force = options.force === true;
+    getComponentElements(componentName, component.selector, force).forEach((element) => {
+      const wasComponent = element.dataset?.basecoatComponent === componentName;
+      if (force) destroyComponent(element);
+      if (wasComponent || element.matches(component.selector)) initComponent(element, componentName);
+    });
+  };
+
+  const initAllRegisteredComponents = (options = {}) => {
+    initAllComponents(options);
+  };
+
+  const setTheme = (mode) => {
+    const dark = mode === 'dark';
+    document.documentElement.classList.toggle('dark', dark);
+    try { localStorage.setItem('themeMode', dark ? 'dark' : 'light'); } catch (_) {}
+    document.dispatchEvent(new CustomEvent('basecoat:themechange', { detail: { mode: dark ? 'dark' : 'light' } }));
+  };
+
+  const getTheme = () => document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+
+  window.basecoat = {
+    register: registerComponent,
+    init: initRegisteredComponent,
+    initAll: initAllRegisteredComponents,
+    refresh: refreshComponent,
+    start: startObserver,
+    stop: stopObserver,
+    theme: {
+      get: getTheme,
+      set: setTheme,
+      toggle: () => setTheme(getTheme() === 'dark' ? 'light' : 'dark'),
+    },
+  };
+
+  document.addEventListener('DOMContentLoaded', () => {
+    initAllComponents();
+    startObserver();
+  });
+})();
+
+(() => {
+  const toMs = (value) => {
+    if (!value) return 0;
+    const trimmed = value.trim();
+    if (trimmed.endsWith('ms')) return parseFloat(trimmed) || 0;
+    if (trimmed.endsWith('s')) return (parseFloat(trimmed) || 0) * 1000;
+    return parseFloat(trimmed) || 0;
+  };
+
+  const maxTransitionMs = (element) => {
+    if (!element) return 0;
+    const styles = getComputedStyle(element);
+    const durations = styles.transitionDuration.split(',').map(toMs);
+    const delays = styles.transitionDelay.split(',').map(toMs);
+    return Math.max(0, ...durations.map((duration, index) => duration + (delays[index] || delays[0] || 0)));
+  };
+
+  const initDrawer = (drawer) => {
+    if (drawer.dataset.drawerInitialized) return;
+
+    const nativeClose = drawer.close.bind(drawer);
+    let pointerStartedOnBackdrop = false;
+    let closeTimer = null;
+
+    const finishClose = (returnValue) => {
+      window.clearTimeout(closeTimer);
+      closeTimer = null;
+      drawer.removeAttribute('data-closing');
+      nativeClose(returnValue);
+    };
+
+    drawer.close = (returnValue = '') => {
+      if (!drawer.open) return;
+      if (drawer.dataset.closing) return;
+
+      const content = drawer.firstElementChild;
+      const duration = maxTransitionMs(content);
+
+      if (duration === 0 || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+        finishClose(returnValue);
+        return;
+      }
+
+      drawer.dataset.closing = 'true';
+      closeTimer = window.setTimeout(() => finishClose(returnValue), duration + 50);
+    };
+
+    const handleCancel = (event) => {
+      event.preventDefault();
+      drawer.close();
+    };
+
+    const handlePointerDown = (event) => {
+      pointerStartedOnBackdrop = event.target === drawer;
+    };
+
+    const handlePointerUp = (event) => {
+      if (pointerStartedOnBackdrop && event.target === drawer) {
+        drawer.close();
+      }
+      pointerStartedOnBackdrop = false;
+    };
+
+    drawer.addEventListener('cancel', handleCancel);
+    drawer.addEventListener('pointerdown', handlePointerDown);
+    drawer.addEventListener('pointerup', handlePointerUp);
+
+    drawer._destroy = () => {
+      window.clearTimeout(closeTimer);
+      drawer.removeEventListener('cancel', handleCancel);
+      drawer.removeEventListener('pointerdown', handlePointerDown);
+      drawer.removeEventListener('pointerup', handlePointerUp);
+      drawer.close = nativeClose;
+      delete drawer._destroy;
+    };
+
+    drawer.dataset.drawerInitialized = 'true';
+    drawer.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  };
+
+  if (window.basecoat) {
+    window.basecoat.register('drawer', '.drawer:not([data-drawer-initialized])', initDrawer);
+  }
+})();
+
+// Loaded after the DOM is ready: initialize now.
+if (document.readyState !== 'loading') { window.basecoat.initAll(); window.basecoat.start(); }

package/dist/ui/dropdown-menu.css

@@ -0,0 +1,193 @@
+/* @auvyx/ui dropdown-menu | order 14 */
+@layer components {
+  .dropdown-menu {
+      position: relative;
+      display: inline-flex;
+    }
+  .dropdown-menu > [data-popover] {
+      min-width: anchor-size(width);
+    }
+  .dropdown-menu [role='menu'] {
+      --tw-outline-style: none;
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+    }
+  .dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']) {
+      position: relative;
+      display: flex;
+      width: 100%;
+      cursor: default;
+      align-items: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      --tw-outline-style: none;
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+      -webkit-user-select: none;
+      user-select: none;
+      &:disabled {
+        pointer-events: none;
+      }
+      &:disabled {
+        opacity: 50%;
+      }
+      &[aria-disabled="true"] {
+        pointer-events: none;
+      }
+      &[aria-disabled="true"] {
+        opacity: 50%;
+      }
+      &[aria-hidden="true"] {
+        display: none;
+      }
+      & svg {
+        pointer-events: none;
+      }
+      & svg {
+        flex-shrink: 0;
+      }
+    }
+  .dropdown-menu [role='menu'] [role='heading'] {
+      display: flex;
+    }
+  .dropdown-menu [role='separator'] {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+  .dropdown-menu :is([data-shortcut], kbd:last-child, .kbd:last-child) {
+      margin-inline-start: auto;
+      flex-shrink: 0;
+      text-align: end;
+    }
+  .dropdown-menu [data-shortcut] {
+      padding-inline-start: calc(var(--spacing) * 8);
+    }
+  .dropdown-menu :is(kbd:last-child, .kbd:last-child):not([data-shortcut]) {
+      padding-inline-start: calc(var(--spacing) * 8);
+    }
+  .dropdown-menu [data-indicator] {
+      pointer-events: none;
+      visibility: hidden;
+    }
+  .dropdown-menu :is([role='menuitemcheckbox'], [role='menuitemradio'])[aria-checked='true'] [data-indicator] {
+      visibility: visible;
+    }
+  .dropdown-menu [data-rtl-flip] {
+      &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+        rotate: 180deg;
+      }
+    }
+  .dropdown-menu:not([data-dropdown-menu-initialized]) :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']) {
+      &:not([aria-disabled='true']):not(:disabled):hover {
+        background-color: var(--color-accent);
+        color: var(--color-accent-foreground);
+      }
+    }
+}
+
+@layer components {
+  .dropdown-menu > [data-popover] {
+      gap: 0;
+      overflow-x: hidden;
+      overflow-y: auto;
+      border-radius: var(--radius-md);
+      background-color: var(--color-popover);
+      padding: var(--spacing);
+      color: var(--color-popover-foreground);
+      --tw-shadow: var(--shadow-md, 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)));
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + 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);
+      --tw-ring-color: color-mix(in oklab, var(--color-foreground) 10%, transparent);
+      --tw-duration: 100ms;
+      transition-duration: 100ms;
+    }
+  .dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']) {
+      gap: calc(var(--spacing) * 2);
+      border-radius: var(--radius-sm);
+      padding-inline: calc(var(--spacing) * 2);
+      padding-block: calc(var(--spacing) * 1.5);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      &:focus-visible {
+        background-color: var(--color-accent);
+      }
+      &:focus-visible {
+        color: var(--color-accent-foreground);
+      }
+      & svg:not([class*='size-']) {
+        width: calc(var(--spacing) * 4);
+        height: calc(var(--spacing) * 4);
+      }
+    }
+  .dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']).active {
+      background-color: var(--color-muted);
+      color: var(--color-foreground);
+    }
+  .dropdown-menu [data-variant='destructive'] {
+      color: var(--color-destructive);
+    }
+  .dropdown-menu [data-variant='destructive']:is(:focus-visible, .active) {
+      background-color: var(--color-destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
+      }
+      color: var(--color-destructive);
+      &:is(html.dark *) {
+        background-color: var(--color-destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        }
+      }
+    }
+  .dropdown-menu [data-variant='destructive'] svg {
+      color: var(--color-destructive);
+    }
+  .dropdown-menu :is([role='menuitemcheckbox'], [role='menuitemradio']) {
+      padding-block: calc(var(--spacing) * 1.5);
+      padding-inline-start: calc(var(--spacing) * 2);
+      padding-inline-end: calc(var(--spacing) * 8);
+    }
+  .dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'])[data-inset], .dropdown-menu [role='heading'][data-inset] {
+      padding-inline-start: calc(var(--spacing) * 8);
+    }
+  .dropdown-menu [data-indicator] {
+      position: absolute;
+      inset-inline-end: calc(var(--spacing) * 2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  .dropdown-menu [role='heading'] {
+      padding-inline: calc(var(--spacing) * 2);
+      padding-block: calc(var(--spacing) * 1.5);
+      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);
+    }
+  .dropdown-menu [role='separator'] {
+      margin-inline: calc(var(--spacing) * -1);
+      margin-block: var(--spacing);
+      height: 1px;
+      background-color: var(--color-border);
+    }
+  .dropdown-menu :is([data-shortcut], kbd:last-child, .kbd:last-child) {
+      font-family: var(--font-sans);
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+      --tw-tracking: var(--tracking-widest);
+      letter-spacing: var(--tracking-widest);
+      color: var(--color-muted-foreground);
+    }
+  .dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child, .kbd:last-child) {
+      color: var(--color-accent-foreground);
+    }
+}