@stacksjs/defaults 0.75.328 → 0.75.330

package/resources/components/Dashboard/UI/Tabs.stx

@@ -26,7 +26,10 @@ const sizeClasses: Record<TabsSize, string> = {
 }
 
 const containerClasses: Record<TabsVariant, string> = {
-  underline: 'border-b border-neutral-200 dark:border-neutral-700',
+  // An inset shadow, not a border: the list scrolls sideways on a narrow
+  // screen, and a scroller clips anything (like a tab pulled over a border)
+  // that hangs outside it. The selected tab's underline still covers it.
+  underline: 'shadow-[inset_0_-1px_0_#e5e5e5] dark:shadow-[inset_0_-1px_0_#404040]',
   pills: 'gap-2 bg-neutral-100 dark:bg-neutral-800 p-1 rounded-lg',
   boxed: 'border border-neutral-200 dark:border-neutral-700 rounded-lg p-1',
 }
@@ -48,7 +51,7 @@ function selectTab(tab: DashboardTab): void {
 function tabClass(tab: DashboardTab): string {
   const selected = activeTab() === tab.id
   const common = [
-    'inline-flex items-center justify-center gap-2 font-medium transition-all duration-150',
+    'inline-flex shrink-0 items-center justify-center gap-2 font-medium whitespace-nowrap transition-all duration-150 focus-visible:outline-offset-[-2px]',
     sizeClasses[size()],
     fullWidth() ? 'flex-1' : '',
     tab.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
@@ -67,7 +70,7 @@ function tabClass(tab: DashboardTab): string {
       : 'text-neutral-500 hover:text-neutral-700 hover:bg-neutral-50 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-800/50')
   }
   else {
-    common.push('-mb-px border-b-2')
+    common.push('border-b-2')
     common.push(selected
       ? 'border-blue-500 text-blue-600 dark:text-blue-400'
       : 'border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-300 dark:text-neutral-400 dark:hover:text-neutral-200')
@@ -83,7 +86,7 @@ function badgeClass(tab: DashboardTab): string {
 }
 </script>
 
-<div role="tablist" :class="'flex ' + (fullWidth() ? 'w-full ' : '') + containerClasses[variant()]">
+<div role="tablist" :class="'flex overflow-x-auto ' + (fullWidth() ? 'w-full ' : '') + containerClasses[variant()]">
   <template :for="tab in tabs()">
     <button
       type="button"

package/resources/components/Dashboard/UI/Textarea.stx

@@ -77,7 +77,7 @@ function handleBlur(event: Event): void {
     </label>
     <span
       :if="liveShowCount() && liveMaxLength()"
-      class="text-neutral-400 text-xs dark:text-neutral-500"
+      class="text-neutral-500 text-xs dark:text-neutral-500"
       :text="limitedCountLabel()"
     ></span>
   </div>
@@ -103,7 +103,7 @@ function handleBlur(event: Event): void {
 
     <span
       :if="liveShowCount() && !liveMaxLength()"
-      class="absolute bottom-2 right-2 px-1 text-neutral-400 text-xs dark:text-neutral-500 bg-white dark:bg-neutral-900"
+      class="absolute bottom-2 right-2 px-1 text-neutral-500 text-xs dark:text-neutral-500 bg-white dark:bg-neutral-900"
       :text="openCountLabel()"
     ></span>
   </div>

package/resources/components/Dashboard/UI/Toggle.stx

@@ -51,7 +51,7 @@ const thumbClass = derived(() => [
 ].join(' '))
 const labelClass = derived(() => [
   'text-[13px] font-medium tracking-tight',
-  liveDisabled() ? 'text-neutral-400 dark:text-neutral-600' : 'text-neutral-700 dark:text-neutral-200',
+  liveDisabled() ? 'text-neutral-500 dark:text-neutral-600' : 'text-neutral-700 dark:text-neutral-200',
 ].join(' '))
 const descriptionClass = derived(() => [
   'mt-0.5 text-[12px]',