shadcn_phlexcomponents 0.1.16 → 0.1.18

data/app/javascript/utils/index.js

@@ -2,287 +2,224 @@ const ANIMATION_OUT_DELAY = 100;
 const ON_OPEN_FOCUS_DELAY = 100;
 const ON_CLOSE_FOCUS_DELAY = 50;
 const getScrollbarWidth = () => {
-  // Create a temporary div container and append it into the body
-  const outer = document.createElement("div");
-  outer.style.visibility = "hidden";
-  outer.style.overflow = "scroll"; // force scrollbars
-  outer.style.width = "100px";
-  outer.style.position = "absolute";
-  outer.style.top = "-9999px";
-  document.body.appendChild(outer);
-  // Create an inner div and place it inside the outer div
-  const inner = document.createElement("div");
-  inner.style.width = "100%";
-  outer.appendChild(inner);
-  // Calculate the scrollbar width
-  const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
-  // Clean up
-  outer.remove();
-  return scrollbarWidth;
+    // Create a temporary div container and append it into the body
+    const outer = document.createElement('div');
+    outer.style.visibility = 'hidden';
+    outer.style.overflow = 'scroll'; // force scrollbars
+    outer.style.width = '100px';
+    outer.style.position = 'absolute';
+    outer.style.top = '-9999px';
+    document.body.appendChild(outer);
+    // Create an inner div and place it inside the outer div
+    const inner = document.createElement('div');
+    inner.style.width = '100%';
+    outer.appendChild(inner);
+    // Calculate the scrollbar width
+    const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+    // Clean up
+    outer.remove();
+    return scrollbarWidth;
 };
 const lockScroll = (contentId) => {
-  if (window.innerHeight < document.documentElement.scrollHeight) {
-    document.body.dataset.scrollLocked = "1";
-    document.body.classList.add(
-      "data-[scroll-locked]:pointer-events-none",
-      "data-[scroll-locked]:!overflow-hidden",
-      "data-[scroll-locked]:!relative",
-      "data-[scroll-locked]:px-0",
-      "data-[scroll-locked]:pt-0",
-      "data-[scroll-locked]:ml-0",
-      "data-[scroll-locked]:mt-0",
-    );
-    document.body.style.marginRight = `${getScrollbarWidth()}px`;
-    const contentIdsString =
-      document.body.dataset.scrollLockedContentIds || "[]";
-    const contentIds = JSON.parse(contentIdsString);
-    contentIds.push(contentId);
-    document.body.dataset.scrollLockedContentIds = JSON.stringify(contentIds);
-  }
+    if (window.innerHeight < document.documentElement.scrollHeight) {
+        document.body.dataset.scrollLocked = '1';
+        document.body.classList.add('data-[scroll-locked]:pointer-events-none', 'data-[scroll-locked]:!overflow-hidden', 'data-[scroll-locked]:!relative', 'data-[scroll-locked]:px-0', 'data-[scroll-locked]:pt-0', 'data-[scroll-locked]:ml-0', 'data-[scroll-locked]:mt-0');
+        document.body.style.marginRight = `${getScrollbarWidth()}px`;
+        const contentIdsString = document.body.dataset.scrollLockedContentIds || '[]';
+        const contentIds = JSON.parse(contentIdsString);
+        contentIds.push(contentId);
+        document.body.dataset.scrollLockedContentIds = JSON.stringify(contentIds);
+    }
 };
 const unlockScroll = (contentId) => {
-  const contentIdsString = document.body.dataset.scrollLockedContentIds || "[]";
-  const contentIds = JSON.parse(contentIdsString);
-  const newContentIds = contentIds.filter((id) => id !== contentId);
-  document.body.dataset.scrollLockedContentIds = JSON.stringify(newContentIds);
-  if (newContentIds.length === 0) {
-    delete document.body.dataset.scrollLocked;
-    document.body.classList.remove(
-      "data-[scroll-locked]:pointer-events-none",
-      "data-[scroll-locked]:!overflow-hidden",
-      "data-[scroll-locked]:!relative",
-      "data-[scroll-locked]:px-0",
-      "data-[scroll-locked]:pt-0",
-      "data-[scroll-locked]:ml-0",
-      "data-[scroll-locked]:mt-0",
-    );
-    document.body.style.marginRight = "";
-  }
+    const contentIdsString = document.body.dataset.scrollLockedContentIds || '[]';
+    const contentIds = JSON.parse(contentIdsString);
+    const newContentIds = contentIds.filter((id) => id !== contentId);
+    document.body.dataset.scrollLockedContentIds = JSON.stringify(newContentIds);
+    if (newContentIds.length === 0) {
+        delete document.body.dataset.scrollLocked;
+        document.body.classList.remove('data-[scroll-locked]:pointer-events-none', 'data-[scroll-locked]:!overflow-hidden', 'data-[scroll-locked]:!relative', 'data-[scroll-locked]:px-0', 'data-[scroll-locked]:pt-0', 'data-[scroll-locked]:ml-0', 'data-[scroll-locked]:mt-0');
+        document.body.style.marginRight = '';
+    }
 };
 const focusTrigger = (triggerTarget) => {
-  setTimeout(() => {
-    if (triggerTarget.dataset.asChild === "false") {
-      const childElement = triggerTarget.firstElementChild;
-      if (childElement) {
-        childElement.focus();
-      }
-    } else {
-      triggerTarget.focus();
-    }
-  }, ON_CLOSE_FOCUS_DELAY);
+    setTimeout(() => {
+        if (triggerTarget.dataset.asChild === 'false') {
+            const childElement = triggerTarget.firstElementChild;
+            if (childElement) {
+                childElement.focus();
+            }
+        }
+        else {
+            triggerTarget.focus();
+        }
+    }, ON_CLOSE_FOCUS_DELAY);
 };
 const focusElement = (element) => {
-  setTimeout(() => {
-    if (element) {
-      element.focus();
-    }
-  }, ON_OPEN_FOCUS_DELAY);
+    setTimeout(() => {
+        if (element) {
+            element.focus();
+        }
+    }, ON_OPEN_FOCUS_DELAY);
 };
 const getFocusableElements = (container) => {
-  return Array.from(
-    container.querySelectorAll(
-      'button, [href], input:not([type="hidden"]), select:not([tabindex="-1"]), textarea, [tabindex]:not([tabindex="-1"])',
-    ),
-  );
-};
-const getSameLevelItems = ({ content, items, closestContentSelector }) => {
-  const sameLevelItems = [];
-  items.forEach((i) => {
-    if (
-      i.closest(closestContentSelector) === content &&
-      i.dataset.disabled === undefined
-    ) {
-      sameLevelItems.push(i);
+    return Array.from(container.querySelectorAll('button, [href], input:not([type="hidden"]), select:not([tabindex="-1"]), textarea, [tabindex]:not([tabindex="-1"])'));
+};
+const getSameLevelItems = ({ content, items, closestContentSelector, }) => {
+    const sameLevelItems = [];
+    items.forEach((i) => {
+        if (i.closest(closestContentSelector) === content &&
+            i.dataset.disabled === undefined) {
+            sameLevelItems.push(i);
+        }
+    });
+    return sameLevelItems;
+};
+const showContent = ({ trigger, content, contentContainer, setEqualWidth, overlay, }) => {
+    contentContainer.style.display = '';
+    if (trigger) {
+        if (setEqualWidth) {
+            const triggerWidth = trigger.offsetWidth;
+            const contentContainerWidth = contentContainer.offsetWidth;
+            if (contentContainerWidth < triggerWidth) {
+                contentContainer.style.width = `${triggerWidth}px`;
+            }
+        }
+        trigger.ariaExpanded = 'true';
+        trigger.dataset.state = 'open';
     }
-  });
-  return sameLevelItems;
-};
-const showContent = ({
-  trigger,
-  content,
-  contentContainer,
-  setEqualWidth,
-  overlay,
-}) => {
-  contentContainer.style.display = "";
-  if (trigger) {
-    if (setEqualWidth) {
-      const triggerWidth = trigger.offsetWidth;
-      const contentContainerWidth = contentContainer.offsetWidth;
-      if (contentContainerWidth < triggerWidth) {
-        contentContainer.style.width = `${triggerWidth}px`;
-      }
+    content.dataset.state = 'open';
+    if (overlay) {
+        overlay.style.display = '';
+        overlay.dataset.state = 'open';
+        lockScroll(content.id);
     }
-    trigger.ariaExpanded = "true";
-    trigger.dataset.state = "open";
-  }
-  content.dataset.state = "open";
-  if (overlay) {
-    overlay.style.display = "";
-    overlay.dataset.state = "open";
-    lockScroll(content.id);
-  }
 };
-const hideContent = ({ trigger, content, contentContainer, overlay }) => {
-  if (trigger) {
-    trigger.ariaExpanded = "false";
-    trigger.dataset.state = "closed";
-  }
-  content.dataset.state = "closed";
-  setTimeout(() => {
-    contentContainer.style.display = "none";
-    if (overlay) {
-      overlay.style.display = "none";
-      overlay.dataset.state = "closed";
-      unlockScroll(content.id);
+const hideContent = ({ trigger, content, contentContainer, overlay, }) => {
+    if (trigger) {
+        trigger.ariaExpanded = 'false';
+        trigger.dataset.state = 'closed';
     }
-  }, ANIMATION_OUT_DELAY);
+    content.dataset.state = 'closed';
+    setTimeout(() => {
+        contentContainer.style.display = 'none';
+        if (overlay) {
+            overlay.style.display = 'none';
+            overlay.dataset.state = 'closed';
+            unlockScroll(content.id);
+        }
+    }, ANIMATION_OUT_DELAY);
 };
 const getStimulusInstance = (controller, element) => {
-  if (!element) return;
-  return window.Stimulus.getControllerForElementAndIdentifier(
-    element,
-    controller,
-  );
+    if (!element)
+        return;
+    return window.Stimulus.getControllerForElementAndIdentifier(element, controller);
 };
 const anyNestedComponentsOpen = (element) => {
-  const components = [];
-  const componentNames = [
-    "dialog",
-    "alert-dialog",
-    "dropdown-menu",
-    "popover",
-    "select",
-    "combobox",
-    "command",
-    "hover-card",
-    "tooltip",
-    "date-picker",
-    "date-range-picker",
-  ];
-  componentNames.forEach((name) => {
-    const triggers = Array.from(
-      element.querySelectorAll(
-        `[data-shadcn-phlexcomponents="${name}-trigger"]`,
-      ),
-    );
-    const controllerElements = Array.from(
-      element.querySelectorAll(`[data-controller="${name}"]`),
-    );
-    controllerElements.forEach((controller) => {
-      const stimulusInstance = getStimulusInstance(name, controller);
-      if (stimulusInstance) {
-        components.push(stimulusInstance);
-      }
-    });
-    triggers.forEach((trigger) => {
-      const stimulusInstance = getStimulusInstance(
-        name,
-        document.querySelector(`#${trigger.getAttribute("aria-controls")}`),
-      );
-      if (stimulusInstance) {
-        components.push(stimulusInstance);
-      }
+    const components = [];
+    const componentNames = [
+        'dialog',
+        'alert-dialog',
+        'dropdown-menu',
+        'popover',
+        'select',
+        'combobox',
+        'command',
+        'hover-card',
+        'tooltip',
+        'date-picker',
+        'date-range-picker',
+    ];
+    componentNames.forEach((name) => {
+        const triggers = Array.from(element.querySelectorAll(`[data-shadcn-phlexcomponents="${name}-trigger"]`));
+        const controllerElements = Array.from(element.querySelectorAll(`[data-controller="${name}"]`));
+        controllerElements.forEach((controller) => {
+            const stimulusInstance = getStimulusInstance(name, controller);
+            if (stimulusInstance) {
+                components.push(stimulusInstance);
+            }
+        });
+        triggers.forEach((trigger) => {
+            const stimulusInstance = getStimulusInstance(name, document.querySelector(`#${trigger.getAttribute('aria-controls')}`));
+            if (stimulusInstance) {
+                components.push(stimulusInstance);
+            }
+        });
     });
-  });
-  return components.some((c) => c.isOpenValue);
+    return components.some((c) => c.isOpenValue);
 };
 const onClickOutside = (controller, event) => {
-  const target = event.target;
-  // Let trigger handle state
-  if (target === controller.triggerTarget) return;
-  if (controller.triggerTarget.contains(target)) return;
-  controller.close();
+    const target = event.target;
+    // Let trigger handle state
+    if (target === controller.triggerTarget)
+        return;
+    if (controller.triggerTarget.contains(target))
+        return;
+    controller.close();
 };
 const setGroupLabelsId = (controller) => {
-  controller.groupTargets.forEach((g) => {
-    const label = g.querySelector(
-      `[data-shadcn-phlexcomponents="${controller.identifier}-label"]`,
-    );
-    if (label) {
-      label.id = g.getAttribute("aria-labelledby");
-    }
-  });
+    controller.groupTargets.forEach((g) => {
+        const label = g.querySelector(`[data-shadcn-phlexcomponents="${controller.identifier}-label"]`);
+        if (label) {
+            label.id = g.getAttribute('aria-labelledby');
+        }
+    });
 };
-const getNextEnabledIndex = ({ items, currentIndex, wrapAround, filterFn }) => {
-  let newIndex = null;
-  if (filterFn) {
-    newIndex = items.findIndex(
-      (item, index) => index > currentIndex && filterFn(item),
-    );
-    if (newIndex === -1) {
-      newIndex = currentIndex;
+const getNextEnabledIndex = ({ items, currentIndex, wrapAround, filterFn, }) => {
+    let newIndex = null;
+    if (filterFn) {
+        newIndex = items.findIndex((item, index) => index > currentIndex && filterFn(item));
+        if (newIndex === -1) {
+            newIndex = currentIndex;
+        }
     }
-  } else {
-    newIndex = currentIndex + 1;
-  }
-  if (newIndex > items.length - 1) {
-    if (wrapAround) {
-      newIndex = 0;
-    } else {
-      newIndex = items.length - 1;
+    else {
+        newIndex = currentIndex + 1;
     }
-  }
-  return newIndex;
-};
-const getPreviousEnabledIndex = ({
-  items,
-  currentIndex,
-  wrapAround,
-  filterFn,
-}) => {
-  let newIndex = null;
-  if (filterFn) {
-    newIndex = items.findLastIndex(
-      (item, index) => index < currentIndex && filterFn(item),
-    );
-    if (newIndex === -1) {
-      newIndex = currentIndex;
+    if (newIndex > items.length - 1) {
+        if (wrapAround) {
+            newIndex = 0;
+        }
+        else {
+            newIndex = items.length - 1;
+        }
     }
-  } else {
-    newIndex = currentIndex - 1;
-  }
-  if (newIndex < 0) {
-    if (wrapAround) {
-      newIndex = items.length - 1;
-    } else {
-      newIndex = 0;
+    return newIndex;
+};
+const getPreviousEnabledIndex = ({ items, currentIndex, wrapAround, filterFn, }) => {
+    let newIndex = null;
+    if (filterFn) {
+        newIndex = items.findLastIndex((item, index) => index < currentIndex && filterFn(item));
+        if (newIndex === -1) {
+            newIndex = currentIndex;
+        }
     }
-  }
-  return newIndex;
+    else {
+        newIndex = currentIndex - 1;
+    }
+    if (newIndex < 0) {
+        if (wrapAround) {
+            newIndex = items.length - 1;
+        }
+        else {
+            newIndex = 0;
+        }
+    }
+    return newIndex;
 };
 const handleTabNavigation = (element, event) => {
-  const focusableElements = getFocusableElements(element);
-  const firstElement = focusableElements[0];
-  const lastElement = focusableElements[focusableElements.length - 1];
-  // If Shift + Tab pressed on first element, go to last element
-  if (event.shiftKey && document.activeElement === firstElement) {
-    event.preventDefault();
-    lastElement.focus();
-  }
-  // If Tab pressed on last element, go to first element
-  else if (!event.shiftKey && document.activeElement === lastElement) {
-    event.preventDefault();
-    firstElement.focus();
-  }
-};
-export {
-  ANIMATION_OUT_DELAY,
-  ON_CLOSE_FOCUS_DELAY,
-  ON_OPEN_FOCUS_DELAY,
-  lockScroll,
-  unlockScroll,
-  focusTrigger,
-  focusElement,
-  getFocusableElements,
-  getSameLevelItems,
-  showContent,
-  hideContent,
-  getStimulusInstance,
-  anyNestedComponentsOpen,
-  onClickOutside,
-  setGroupLabelsId,
-  getNextEnabledIndex,
-  getPreviousEnabledIndex,
-  handleTabNavigation,
+    const focusableElements = getFocusableElements(element);
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+    // If Shift + Tab pressed on first element, go to last element
+    if (event.shiftKey && document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+    }
+    // If Tab pressed on last element, go to first element
+    else if (!event.shiftKey && document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+    }
 };
+export { ANIMATION_OUT_DELAY, ON_CLOSE_FOCUS_DELAY, ON_OPEN_FOCUS_DELAY, lockScroll, unlockScroll, focusTrigger, focusElement, getFocusableElements, getSameLevelItems, showContent, hideContent, getStimulusInstance, anyNestedComponentsOpen, onClickOutside, setGroupLabelsId, getNextEnabledIndex, getPreviousEnabledIndex, handleTabNavigation, };

data/app/stylesheets/date_picker.css

@@ -54,7 +54,7 @@
 }
 
 [data-vc='wrapper'] {
-  @apply flex items-center content-center h-full;
+  @apply flex items-center h-full;
 }
 
 [data-vc='content'] {

data/app/stylesheets/shadcn_phlexcomponents.css

@@ -0,0 +1,173 @@
+@import './tw-animate.css';
+@import './date_picker.css';
+@import './nouislider.css';
+
+@custom-variant dark (&:is(.dark *));
+@custom-variant fixed (&:is(.layout-fixed *));
+
+@theme inline {
+  --breakpoint-3xl: 1600px;
+  --breakpoint-4xl: 2000px;
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-surface: var(--surface);
+  --color-surface-foreground: var(--surface-foreground);
+  --color-code: var(--code);
+  --color-code-foreground: var(--code-foreground);
+  --color-code-highlight: var(--code-highlight);
+  --color-code-number: var(--code-number);
+  --color-selection: var(--selection);
+  --color-selection-foreground: var(--selection-foreground);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: var(--color-blue-300);
+  --chart-2: var(--color-blue-500);
+  --chart-3: var(--color-blue-600);
+  --chart-4: var(--color-blue-700);
+  --chart-5: var(--color-blue-800);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --surface: oklch(0.98 0 0);
+  --surface-foreground: var(--foreground);
+  --code: var(--surface);
+  --code-foreground: var(--surface-foreground);
+  --code-highlight: oklch(0.96 0 0);
+  --code-number: oklch(0.56 0 0);
+  --selection: oklch(0.145 0 0);
+  --selection-foreground: oklch(1 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.269 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.371 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: var(--color-blue-300);
+  --chart-2: var(--color-blue-500);
+  --chart-3: var(--color-blue-600);
+  --chart-4: var(--color-blue-700);
+  --chart-5: var(--color-blue-800);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.439 0 0);
+  --surface: oklch(0.2 0 0);
+  --surface-foreground: oklch(0.708 0 0);
+  --code: var(--surface);
+  --code-foreground: var(--surface-foreground);
+  --code-highlight: oklch(0.27 0 0);
+  --code-number: oklch(0.72 0 0);
+  --selection: oklch(0.922 0 0);
+  --selection-foreground: oklch(0.205 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  ::selection {
+    @apply bg-selection text-selection-foreground;
+  }
+  html {
+    @apply scroll-smooth;
+  }
+  body {
+    font-synthesis-weight: none;
+    text-rendering: optimizeLegibility;
+  }
+
+  @supports (font: -apple-system-body) and (-webkit-appearance: none) {
+    [data-wrapper] {
+      @apply min-[1800px]:border-t;
+    }
+  }
+
+  a:active,
+  button:active {
+    @apply opacity-60 md:opacity-100;
+  }
+
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+}

data/app/typescript/controllers/combobox_controller.ts

@@ -115,7 +115,6 @@ const ComboboxController = class extends Controller<HTMLElement> {
       this.searchInputTarget.focus()
 
       let index = 0
-      console.log('this.selectedValue', this.selectedValue)
       if (this.selectedValue) {
         const item = this.filteredItems.find(
           (i) => i.dataset.value === this.selectedValue,