@rimelight/ui 0.0.42 → 0.0.43

package/src/components/tabs/RLATabs.astro

@@ -1,12 +1,9 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { TabsProps, TabItem } from "./tabs"
-import tabsTheme from "./tabs.theme"
+import type { TabsProps } from "./tabs"
+import { tabsTheme } from "./tabs.theme"
 import RLABadge from "../badge/RLABadge.astro"
+import RLAIcon from "../icon/RLAIcon.astro"
 
-const tabs = scv(tabsTheme)
 
 const {
   items = [],
@@ -17,37 +14,74 @@ const {
   size = "md",
   color = "primary",
   content = true,
-  unmountOnHide = true,
   valueKey = "value",
   labelKey = "label",
-  ui: uiProp,
-  class: className,
+  maxTabs,
+  estimatedTabWidth = 100,
   ...rest
 } = Astro.props as TabsProps
 
-// Normalize variant names for backward compatibility (solid -> pill, pills -> pill, underline -> underline, link -> underline)
+// Normalize variant names
 const normalizedVariant = (variant === "solid" || variant === "pills") ? "pill" : (variant === "link" ? "underline" : variant);
 
-const classes = resolveClasses(tabs, {
-  variant: normalizedVariant,
-  orientation,
-  size
-}, useUi("tabs", uiProp), className);
+const classes = tabsTheme({
+  ...Astro.props,
+  variant: normalizedVariant
+});
 
-const initialValue = value || defaultValue || (items.length > 0 ? (items[0][valueKey] ?? items[0].value ?? "0") : "")
+const initialValue = value || defaultValue || (items.length > 0 ? (items[0]?.[valueKey] ?? items[0]?.value ?? "0") : "")
+
+// ─── Responsive CSS Item Counter + Native Popover Overflow ───────────────────
+const uid = Math.random().toString(36).substring(2, 9)
+const cName = `rla-tb-${uid}`
+const popoverId = `rla-tb-pop-${uid}`
+
+const effectiveMaxTabs = maxTabs !== undefined ? Math.max(1, maxTabs) : items.length
+const renderedListItems = items.slice(0, effectiveMaxTabs)
+const overflowItems = items.slice(effectiveMaxTabs)
+const baseHiddenCount = overflowItems.length
+const needsOverflow = items.length > 1 && orientation === "horizontal"
+
+// Generate per-instance container-query CSS for horizontal layout
+let instanceCss = ""
+if (needsOverflow && renderedListItems.length > 1) {
+  const maxBreaks = renderedListItems.length - 1
+  for (let i = 0; i < maxBreaks; i++) {
+    const hiddenItems = i + 1
+    const visibleCount = renderedListItems.length - hiddenItems
+    const maxWidth = visibleCount * estimatedTabWidth + 90
+    const hideNthChild = renderedListItems.length - i
+
+    instanceCss += `\n@container ${cName} (max-width: ${maxWidth}px) {`
+    instanceCss += `\n  [data-tb="${uid}"] { --hidden-items: ${hiddenItems}; }`
+    instanceCss += `\n  [data-tb="${uid}"] [data-slot=list] > button.hidable:nth-child(${hideNthChild + 1}) { display: none !important; }`
+    if (baseHiddenCount === 0) {
+      instanceCss += `\n  [data-tb="${uid}"] .rla-tb-overflow-hidden { display: inline-flex !important; }`
+    }
+    instanceCss += `\n}`
+  }
+}
 ---
 <rla-tabs {...rest} data-orientation={orientation} data-variant={normalizedVariant}>
-  <div class={classes.root} data-slot="root" data-tabs-container data-value={initialValue}>
+  <div
+    class:list={[classes.root, orientation === "horizontal" && "rla-tb-host"]}
+    data-slot="root"
+    data-tabs-container
+    data-value={initialValue}
+    data-tb={uid}
+    style={orientation === "horizontal" ? `container-type: inline-size; container-name: ${cName}; --base-hidden: ${baseHiddenCount}; --hidden-items: 0;` : undefined}
+  >
     <div class={classes.list} data-slot="list" role="tablist">
       <div class={classes.indicator} data-slot="indicator" style="display: none;"></div>
-      {items.map((item, index) => {
+      {renderedListItems.map((item, index) => {
         const itemVal = item[valueKey] ?? item.value ?? String(index)
         const itemLabel = item[labelKey] ?? item.label
         const active = itemVal === initialValue
+        const isHidable = needsOverflow && index > 0
         return (
           <button
             type="button"
-            class={classes.trigger}
+            class:list={[classes.trigger, isHidable && "hidable"]}
             data-slot="trigger"
             role="tab"
             data-value={itemVal}
@@ -70,7 +104,58 @@ const initialValue = value || defaultValue || (items.length > 0 ? (items[0][valu
           </button>
         )
       })}
+
+      {needsOverflow && (
+        <div class="relative inline-flex items-center ml-auto">
+          <button
+            type="button"
+            class:list={[
+              classes.trigger,
+              "rla-tb-overflow-btn",
+              baseHiddenCount === 0 && "rla-tb-overflow-hidden"
+            ]}
+            popovertarget={popoverId}
+            data-slot="overflow-trigger"
+            aria-label="More tabs"
+          >
+            <span class="rla-tb-label">
+              +<span class="rla-tb-count"></span> more
+            </span>
+            <RLAIcon name="chevronDown" class="ml-1 size-3.5 opacity-70" />
+          </button>
+
+          <div
+            id={popoverId}
+            popover="auto"
+            class="rla-tb-popover rounded-lg border border-default bg-default p-1 shadow-lg backdrop-blur-sm"
+          >
+            <div class="flex flex-col gap-0.5 min-w-[10rem]">
+              {items.map((item, index) => {
+                const itemVal = item[valueKey] ?? item.value ?? String(index)
+                const itemLabel = item[labelKey] ?? item.label
+                const isExtra = index >= effectiveMaxTabs
+                return (
+                  <button
+                    type="button"
+                    class:list={[
+                      "w-full text-left px-3 py-1.5 text-sm rounded-md transition-colors flex items-center justify-between",
+                      "hover:bg-muted focus-visible:outline-none cursor-pointer",
+                      !isExtra && "rla-tb-pop-rendered"
+                    ]}
+                    data-tab-overflow-value={itemVal}
+                    data-popover-item
+                  >
+                    <span class="truncate">{itemLabel}</span>
+                    <RLAIcon name="check" class="size-4 opacity-0 data-[active=true]:opacity-100" />
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      )}
     </div>
+
     {content && (
       <div class="flex-1">
         <slot>
@@ -95,6 +180,38 @@ const initialValue = value || defaultValue || (items.length > 0 ? (items[0][valu
   </div>
 </rla-tabs>
 
+<style is:inline set:html={instanceCss} />
+
+<style>
+  .rla-tb-host {
+    width: 100%;
+  }
+  .rla-tb-overflow-hidden {
+    display: none !important;
+  }
+  .rla-tb-count::after {
+    counter-reset: rla-tb-cnt calc(var(--base-hidden, 0) + var(--hidden-items, 0));
+    content: counter(rla-tb-cnt);
+  }
+  .rla-tb-popover {
+    margin: 0;
+    inset: auto;
+    position: absolute;
+  }
+  .rla-tb-popover:popover-open {
+    display: block;
+  }
+  /* Show items in popover if they are hidden in list or extra */
+  .rla-tb-pop-rendered {
+    display: none;
+  }
+  @supports not (content-visibility: hidden) {
+    [hidden="until-found"] {
+      display: none !important;
+    }
+  }
+</style>
+
 <script>
   if (typeof HTMLElement !== 'undefined') {
     class RLATabs extends HTMLElement {
@@ -117,6 +234,12 @@ const initialValue = value || defaultValue || (items.length > 0 ? (items[0][valu
             return;
           }
 
+          // If active trigger is hidden due to container queries, position near overflow button
+          if (getComputedStyle(activeTrigger).display === 'none') {
+            const overflowBtn = list.querySelector('.rla-tb-overflow-btn') as HTMLElement | null;
+            if (overflowBtn) activeTrigger = overflowBtn;
+          }
+
           const listRect = list.getBoundingClientRect();
           const triggerRect = activeTrigger.getBoundingClientRect();
 
@@ -143,27 +266,43 @@ const initialValue = value || defaultValue || (items.length > 0 ? (items[0][valu
         const containerValue = container.dataset.value;
         const triggers = container.querySelectorAll("[role=tab]");
         const panels = container.querySelectorAll("[role=tabpanel]");
+        const popoverItems = container.querySelectorAll("[data-popover-item]");
 
         let activeTrigger: HTMLElement | null = null;
 
-        triggers.forEach(trigger => {
-          const el = trigger as HTMLElement;
-          const val = el.dataset.value;
-          const isActive = val === containerValue;
-          el.setAttribute("data-state", isActive ? "active" : "inactive");
-          if (isActive) activeTrigger = el;
-        });
+        const syncState = (targetValue: string | undefined) => {
+          triggers.forEach(trigger => {
+            const el = trigger as HTMLElement;
+            const val = el.dataset.value;
+            const isActive = val === targetValue;
+            el.setAttribute("data-state", isActive ? "active" : "inactive");
+            if (isActive) activeTrigger = el;
+          });
 
-        panels.forEach(panel => {
-          const val = (panel as HTMLElement).dataset.value;
-          if (val === containerValue) {
-            panel.removeAttribute("hidden");
-          } else {
-            panel.setAttribute("hidden", "until-found");
-          }
-        });
+          popoverItems.forEach(item => {
+            const el = item as HTMLElement;
+            const val = el.dataset.tabOverflowValue;
+            if (val === targetValue) {
+              el.setAttribute("data-active", "true");
+              el.classList.add("bg-muted/80", "font-medium");
+            } else {
+              el.removeAttribute("data-active");
+              el.classList.remove("bg-muted/80", "font-medium");
+            }
+          });
+
+          panels.forEach(panel => {
+            const val = (panel as HTMLElement).dataset.value;
+            if (val === targetValue) {
+              panel.removeAttribute("hidden");
+            } else {
+              panel.setAttribute("hidden", "until-found");
+            }
+          });
+        };
+
+        syncState(containerValue);
 
-        // Initialize indicator position
         requestAnimationFrame(() => updateIndicator(activeTrigger));
 
         if (window.ResizeObserver && list) {
@@ -184,6 +323,8 @@ const initialValue = value || defaultValue || (items.length > 0 ? (items[0][valu
             const trigger = container.querySelector(`[role=tab][data-value="${targetValue}"]`) as HTMLButtonElement | null;
             if (trigger) {
               trigger.click();
+            } else {
+              syncState(targetValue);
             }
           };
           panel.addEventListener("beforematch", onBeforeMatch);
@@ -195,26 +336,30 @@ const initialValue = value || defaultValue || (items.length > 0 ? (items[0][valu
           const onClick = () => {
             if (trigger.disabled) return;
             const targetValue = trigger.dataset.value;
-
-            triggers.forEach(tNode => {
-              const t = tNode as HTMLButtonElement;
-              const isTarget = t.dataset.value === targetValue;
-              t.setAttribute("data-state", isTarget ? "active" : "inactive");
-              if (isTarget) updateIndicator(t);
-            });
-
-            panels.forEach(panel => {
-              if ((panel as HTMLElement).dataset.value === targetValue) {
-                panel.removeAttribute("hidden");
-              } else {
-                panel.setAttribute("hidden", "until-found");
-              }
-            });
+            syncState(targetValue);
+            updateIndicator(trigger);
           };
           trigger.addEventListener("click", onClick);
           clickCleanups.push(() => trigger.removeEventListener("click", onClick));
         });
 
+        popoverItems.forEach(itemNode => {
+          const item = itemNode as HTMLButtonElement;
+          const onClick = () => {
+            const targetValue = item.dataset.tabOverflowValue;
+            syncState(targetValue);
+            const activeTrig = container.querySelector(`[role=tab][data-value="${targetValue}"]`) as HTMLElement | null;
+            updateIndicator(activeTrig);
+            // Hide popover after selection
+            const popover = item.closest('[popover]') as HTMLElement | null;
+            if (popover && 'hidePopover' in popover) {
+              (popover as any).hidePopover();
+            }
+          };
+          item.addEventListener("click", onClick);
+          clickCleanups.push(() => item.removeEventListener("click", onClick));
+        });
+
         this.tabsCleanup = () => {
           clickCleanups.forEach(fn => fn());
           beforeMatchCleanups.forEach(fn => fn());
@@ -238,4 +383,3 @@ const initialValue = value || defaultValue || (items.length > 0 ? (items[0][valu
     }
   }
 </script>
-

package/src/components/tabs/tabs.theme.ts

@@ -1,90 +1,87 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createTabsTheme = () =>
-  defineTheme({
-    slots: [
-      "root",
-      "list",
-      "indicator",
-      "trigger",
-      "leadingIcon",
-      "leadingAvatar",
-      "label",
-      "trailingBadge",
-      "content"
-    ],
-    base: {
-      root: "flex gap-2 w-full",
-      list: "relative flex p-1 group items-center min-w-0",
-      indicator:
-        "absolute transition-[translate,width,height,top,left] duration-200 ease-out pointer-events-none",
-      trigger:
-        "group relative inline-flex items-center justify-center min-w-0 whitespace-nowrap font-medium transition-colors cursor-pointer disabled:cursor-not-allowed disabled:opacity-75 focus-visible:outline-none data-[state=inactive]:text-muted-foreground hover:data-[state=inactive]:text-foreground",
-      leadingIcon: "shrink-0",
-      leadingAvatar: "shrink-0",
-      label: "truncate",
-      trailingBadge: "shrink-0",
-      content: "w-full focus-visible:outline-none"
-    },
-    variants: {
-      variant: {
-        pill: {
-          list: "bg-muted/60 dark:bg-muted/40 rounded-lg p-1",
-          trigger: "grow rounded-md data-[state=active]:text-foreground z-10",
-          indicator: "bg-background rounded-md shadow-xs top-1 bottom-1 h-[calc(100%-8px)]"
-        },
-        underline: {
-          list: "bg-transparent border-b border-border p-0 gap-2 -mb-px",
-          trigger: "rounded-md data-[state=active]:text-primary pb-2 pt-1 px-3 z-10",
-          indicator: "bg-primary rounded-full -bottom-px h-0.5 left-0"
-        },
-        link: {
-          list: "bg-transparent border-b border-border p-0 gap-2 -mb-px",
-          trigger: "rounded-md data-[state=active]:text-primary pb-2 pt-1 px-3 z-10",
-          indicator: "bg-primary rounded-full -bottom-px h-0.5 left-0"
-        }
+export const tabsTheme = defineTheme("tabs", {
+  slots: [
+    "root",
+    "list",
+    "indicator",
+    "trigger",
+    "leadingIcon",
+    "leadingAvatar",
+    "label",
+    "trailingBadge",
+    "content"
+  ],
+  base: {
+    root: "flex gap-2 w-full",
+    list: "relative flex p-1 group items-center min-w-0",
+    indicator:
+      "absolute transition-[translate,width,height,top,left] duration-200 ease-out pointer-events-none",
+    trigger:
+      "group relative inline-flex items-center justify-center min-w-0 whitespace-nowrap font-medium transition-colors cursor-pointer disabled:cursor-not-allowed disabled:opacity-75 focus-visible:outline-none data-[state=inactive]:text-muted hover:data-[state=inactive]:text-highlighted",
+    leadingIcon: "shrink-0",
+    leadingAvatar: "shrink-0",
+    label: "truncate",
+    trailingBadge: "shrink-0",
+    content: "w-full focus-visible:outline-none"
+  },
+  variants: {
+    variant: {
+      pill: {
+        list: "bg-muted/60 dark:bg-muted/40 rounded-lg p-1",
+        trigger: "grow rounded-md data-[state=active]:text-highlighted z-10",
+        indicator: "bg-default rounded-md shadow-xs top-1 bottom-1 h-[calc(100%-8px)]"
       },
-      orientation: {
-        horizontal: {
-          root: "flex-col",
-          list: "w-full",
-          indicator: "",
-          trigger: "justify-center"
-        },
-        vertical: {
-          root: "flex-row gap-6",
-          list: "flex-col items-stretch w-48 border-r border-border p-0",
-          trigger: "justify-start text-left"
-        }
+      underline: {
+        list: "bg-transparent border-b border-default p-0 gap-2 -mb-px",
+        trigger: "rounded-md data-[state=active]:text-primary pb-2 pt-1 px-3 z-10",
+        indicator: "bg-primary rounded-full -bottom-px h-0.5 left-0"
       },
-      size: {
-        xs: {
-          trigger: "px-2 py-1 text-xs gap-1",
-          leadingIcon: "size-3.5"
-        },
-        sm: {
-          trigger: "px-2.5 py-1.5 text-xs gap-1.5",
-          leadingIcon: "size-4"
-        },
-        md: {
-          trigger: "px-3 py-1.5 text-sm gap-1.5",
-          leadingIcon: "size-4"
-        },
-        lg: {
-          trigger: "px-3.5 py-2 text-sm gap-2",
-          leadingIcon: "size-5"
-        },
-        xl: {
-          trigger: "px-4 py-2.5 text-base gap-2",
-          leadingIcon: "size-5"
-        }
+      link: {
+        list: "bg-transparent border-b border-default p-0 gap-2 -mb-px",
+        trigger: "rounded-md data-[state=active]:text-primary pb-2 pt-1 px-3 z-10",
+        indicator: "bg-primary rounded-full -bottom-px h-0.5 left-0"
       }
     },
-    defaultVariants: {
-      variant: "pill",
-      orientation: "horizontal",
-      size: "md"
+    orientation: {
+      horizontal: {
+        root: "flex-col",
+        list: "w-full",
+        indicator: "",
+        trigger: "justify-center"
+      },
+      vertical: {
+        root: "flex-row gap-6",
+        list: "flex-col items-stretch w-48 border-r border-default p-0",
+        trigger: "justify-start text-left"
+      }
+    },
+    size: {
+      xs: {
+        trigger: "px-2 py-1 text-xs gap-1",
+        leadingIcon: "size-3.5"
+      },
+      sm: {
+        trigger: "px-2.5 py-1.5 text-xs gap-1.5",
+        leadingIcon: "size-4"
+      },
+      md: {
+        trigger: "px-3 py-1.5 text-sm gap-1.5",
+        leadingIcon: "size-4"
+      },
+      lg: {
+        trigger: "px-3.5 py-2 text-sm gap-2",
+        leadingIcon: "size-5"
+      },
+      xl: {
+        trigger: "px-4 py-2.5 text-base gap-2",
+        leadingIcon: "size-5"
+      }
     }
-  })
-
-export default createTabsTheme()
+  },
+  defaultVariants: {
+    variant: "pill",
+    orientation: "horizontal",
+    size: "md"
+  }
+})

package/src/components/tabs/tabs.ts

@@ -1,4 +1,4 @@
-import type { ThemeColor } from "../../types/component"
+import type { ThemeColor } from "../../types"
 
 export interface TabItem {
   label?: string
@@ -73,6 +73,23 @@ export interface TabsProps<T extends TabItem = TabItem> {
    * @default "label"
    */
   labelKey?: string
+  /**
+   * Maximum number of tab triggers to render in the tab list. Tabs beyond this cap are placed in a
+   * native popover accessible via a '+N more' overflow button at the end of the tab list.
+   *
+   * Additionally, container queries will progressively hide visible triggers from right to left as
+   * the container narrows, surfacing those in the popover as well.
+   *
+   * When undefined, all tabs are rendered in the list (original behaviour).
+   */
+  maxTabs?: number
+  /**
+   * Estimated width in pixels of each tab trigger — used to compute the container-query breakpoints
+   * that drive the responsive overflow. Increase for longer labels, decrease for icon-only tabs.
+   *
+   * @default 100
+   */
+  estimatedTabWidth?: number
   /**
    * Slot-specific CSS class overrides.
    */

package/src/components/textarea/RLATextarea.astro

@@ -1,12 +1,8 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { TextareaProps } from "./textarea"
-import textareaTheme from "./textarea.theme"
+import { textareaTheme } from "./textarea.theme"
 
 
-const textarea = scv(textareaTheme)
 
 const {
   value = "",
@@ -16,20 +12,26 @@ const {
   name,
   required = false,
   rows = 4,
+  autoGrow = false,
   error = false,
-  size = "md",
-  color = "primary",
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as TextareaProps
 
-const classes = resolveClasses(textarea, {
-  size,
+
+
+const classes = textareaTheme({
+  ...Astro.props,
   error: !!error
-}, useUi("textarea", uiProp), className);
+});
 ---
 <div class={classes.root} data-slot="root">
+  <!--
+    field-sizing: content (Chrome 2024+) makes the textarea grow automatically.
+    - When autoGrow is true we omit `rows` (fixed row count conflicts with field-sizing)
+      and inject the CSS property via an inline style.
+    - Browsers that don't support field-sizing silently ignore the style and fall
+      back to the min-height defined in textarea.theme.ts.
+  -->
   <textarea
     class={classes.textarea}
     placeholder={placeholder}
@@ -37,7 +39,8 @@ const classes = resolveClasses(textarea, {
     readonly={readonly}
     name={name}
     required={required}
-    rows={rows}
+    rows={autoGrow ? undefined : rows}
+    style={autoGrow ? "field-sizing: content; min-height: unset;" : undefined}
     {...rest}
   >{value}</textarea>
 </div>

package/src/components/textarea/RLSTextarea.tsx

@@ -0,0 +1,69 @@
+import { createMemo, splitProps, type Component } from "solid-js"
+import type { TextareaProps } from "./textarea"
+import { textareaTheme } from "./textarea.theme"
+
+export interface RLSTextareaProps extends TextareaProps {
+  onInput?: (e: InputEvent & { currentTarget: HTMLTextAreaElement }) => void
+  onChange?: (e: Event & { currentTarget: HTMLTextAreaElement }) => void
+  onBlur?: (e: FocusEvent & { currentTarget: HTMLTextAreaElement }) => void
+  onFocus?: (e: FocusEvent & { currentTarget: HTMLTextAreaElement }) => void
+  onKeyDown?: (e: KeyboardEvent & { currentTarget: HTMLTextAreaElement }) => void
+  ref?: HTMLTextAreaElement | ((el: HTMLTextAreaElement) => void)
+}
+
+const RLSTextarea: Component<RLSTextareaProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "value",
+    "placeholder",
+    "disabled",
+    "readonly",
+    "name",
+    "required",
+    "rows",
+    "error",
+    "size",
+    "color",
+    "ui",
+    "class",
+    "onInput",
+    "onChange",
+    "onBlur",
+    "onFocus",
+    "onKeyDown",
+    "ref"
+  ])
+
+  const resolvedClasses = createMemo(() =>
+    textareaTheme({
+      size: props.size ?? "md",
+      error: !!props.error,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root">
+      <textarea
+        ref={props.ref}
+        name={props.name}
+        rows={props.rows ?? 3}
+        value={props.value !== undefined ? props.value : ""}
+        placeholder={props.placeholder}
+        disabled={props.disabled}
+        readonly={props.readonly}
+        required={props.required}
+        class={resolvedClasses().textarea}
+        data-slot="textarea"
+        onInput={props.onInput}
+        onChange={props.onChange}
+        onBlur={props.onBlur}
+        onFocus={props.onFocus}
+        onKeyDown={props.onKeyDown}
+        {...rest}
+      />
+    </div>
+  )
+}
+
+export default RLSTextarea