@rimelight/ui 0.0.41 → 0.0.43

package/src/components/breadcrumb/RLABreadcrumb.astro

@@ -1,62 +1,241 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { BreadcrumbProps } from "./breadcrumb"
-import { resolveTheme } from "../../utils/resolveTheme"
-import breadcrumbThemeDefault, { createBreadcrumbTheme } from "./breadcrumb.theme"
-const breadcrumbTheme = resolveTheme(breadcrumbThemeDefault, createBreadcrumbTheme)
-import RLAIcon from "../icon/RLAIcon.astro"
-
-
-const breadcrumb = scv(breadcrumbTheme)
-
-const {
-  items,
-  separatorIcon = "chevronRight",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as BreadcrumbProps
-
-const classes = resolveClasses(breadcrumb, {}, useUi("breadcrumb", uiProp), className)
----
-<nav class={classes.root} data-slot="breadcrumb-root" {...rest}>
-  <ol class={classes.list} data-slot="list">
-    {items ? (
-      items.map((item, idx) => (
-        <li class={classes.item} data-slot="item">
-          {item.href ? (
-            <a href={item.href} class={classes.link} data-slot="link">
-              {item.label}
-            </a>
-          ) : (
-            <span class={classes.page} data-slot="page">
-              {item.label}
-            </span>
-          )}
-          {idx < items.length - 1 && (
-            <span class={classes.separator} data-slot="separator" aria-hidden="true">
-              <RLAIcon name={separatorIcon} />
-            </span>
-          )}
-        </li>
-      ))
-    ) : (
-      <slot />
-    )}
-  </ol>
-</nav>
-
-{items && (
-  <script type="application/ld+json" is:inline set:html={JSON.stringify({
-    "@context": "https://schema.org",
-    "@type": "BreadcrumbList",
-    "itemListElement": items.map((item, idx) => ({
-      "@type": "ListItem",
-      "position": idx + 1,
-      "name": item.label,
-      "item": item.href ? new URL(item.href, Astro.site || "https://starter.rimelight.com").toString() : undefined
-    }))
-  })} />
-)}
+---
+import type { BreadcrumbProps } from "./breadcrumb"
+import { breadcrumbTheme } from "./breadcrumb.theme"
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+
+const {
+  items,
+  maxVisible,
+  estimatedItemWidth = 120,
+  separatorIcon = "chevronRight",
+  ...rest
+} = Astro.props as BreadcrumbProps
+
+const classes = breadcrumbTheme(Astro.props)
+
+// ─── Responsive CSS Item Counter ─────────────────────────────────────────────
+//
+// Breadcrumb-specific adaptation of the CSS counter technique:
+//
+//   • First and last items are ALWAYS visible.
+//   • Middle items (everything between first and last) get `.hidable` class.
+//   • Server-side: if `maxVisible` is set, excess middle items are pre-hidden
+//     (not rendered) and counted in --base-hidden.
+//   • Client-side: container queries progressively hide rendered middle items
+//     from left to right (oldest ancestors first), updating --hidden-items.
+//   • The overflow `<li>` always lives in the DOM between the first item and
+//     the first middle item. CSS shows/hides it based on whether any items
+//     are hidden.
+//   • CSS counter: "…+N" = counter-reset: calc(--base-hidden + --hidden-items).
+//
+// ─────────────────────────────────────────────────────────────────────────────
+
+const uid   = Math.random().toString(36).substring(2, 9)
+const cName = `rla-bc-${uid}`
+
+// Restructure items into: first | midItems | last
+const allItems    = items ?? []
+const firstItem   = allItems[0]
+const lastItem    = allItems.length > 1 ? allItems[allItems.length - 1] : null
+const allMidItems = allItems.length > 2 ? allItems.slice(1, allItems.length - 1) : []
+
+// If maxVisible is provided, pre-truncate middle items:
+//   always keep the last (maxVisible - 2) mid items (closest to current page).
+//   The rest are base-hidden.
+const effectiveMaxMid = maxVisible !== undefined
+  ? Math.max(0, maxVisible - 2)   // -2 for first + last
+  : allMidItems.length             // show all at full width
+
+// Keep mid items closest to the last page (most recent ancestors)
+const renderedMidItems = allMidItems.slice(allMidItems.length - effectiveMaxMid)
+const baseHiddenCount  = Math.max(0, allMidItems.length - effectiveMaxMid)
+
+// We show the overflow indicator when:
+//   a) There are already pre-hidden items (base-hidden > 0), OR
+//   b) There are rendered mid items that could be collapsed by container queries
+const hasMidItems  = renderedMidItems.length > 0
+const needsOverflow = allItems.length > 2 // need both first AND last to have a middle
+
+// ── Generate per-instance container-query CSS ─────────────────────────────────
+//
+// DOM layout (positions):
+//   1 = first item
+//   2 = overflow indicator (always in DOM)
+//   3..N = rendered mid items (hidable, starting from leftmost = oldest ancestor)
+//   N+1 = last item
+//
+// We hide mid items from left to right (oldest ancestor first), so breakpoints
+// target nth-child(3), then nth-child(4), etc.
+// ─────────────────────────────────────────────────────────────────────────────
+let instanceCss = ""
+if (needsOverflow && hasMidItems) {
+  for (let i = 0; i < renderedMidItems.length; i++) {
+    const hiddenItems  = i + 1
+    // Visible items after hiding: first + (midItems - hiddenItems) + last
+    const visibleMids  = renderedMidItems.length - hiddenItems
+    const visibleTotal = 2 + visibleMids // first + last always shown
+    // Min container width for the visible breadcrumb items
+    const maxWidth     = visibleTotal * estimatedItemWidth + 60 // 60px for overflow indicator
+    // The mid item to newly hide at this breakpoint (nth-child position):
+    //   overflow indicator is at position 2, mids start at position 3
+    //   we hide from the leftmost (position 3) first
+    const hideNthChild = 3 + i
+
+    instanceCss += `\n@container ${cName} (max-width: ${maxWidth}px) {`
+    instanceCss += `\n  [data-bc="${uid}"] { --hidden-items: ${hiddenItems}; }`
+    instanceCss += `\n  [data-bc="${uid}"] > li.hidable:nth-child(${hideNthChild}) { display: none; }`
+    // Always show the overflow indicator when any mid item is hidden
+    instanceCss += `\n  [data-bc="${uid}"] > .rla-bc-overflow { display: flex; }`
+    instanceCss += `\n}`
+  }
+}
+---
+
+<nav class={classes.root} data-slot="breadcrumb-root" {...rest}>
+  {items ? (
+    <div
+      class="rla-bc-host"
+      style={`container-type: inline-size; container-name: ${cName};`}
+    >
+      <ol
+        class={classes.list}
+        data-slot="list"
+        data-bc={uid}
+        style={`--base-hidden: ${baseHiddenCount}; --hidden-items: 0;`}
+      >
+        {/* ── First item (always visible) ─────────────────────────────── */}
+        {firstItem && (
+          <li class={classes.item} data-slot="item">
+            {firstItem.href ? (
+              <a href={firstItem.href} class={classes.link} data-slot="link">
+                {firstItem.label}
+              </a>
+            ) : (
+              <span class={classes.page} data-slot="page">{firstItem.label}</span>
+            )}
+            {(hasMidItems || lastItem) && (
+              <span class={classes.separator} data-slot="separator" aria-hidden="true">
+                <RLAIcon name={separatorIcon} />
+              </span>
+            )}
+          </li>
+        )}
+
+        {/* ── Overflow indicator (always in DOM; shown by CSS when items are hidden) */}
+        {needsOverflow && (
+          <li
+            class:list={[
+              "rla-bc-overflow",
+              // Shown by default only when there are pre-hidden base items
+              baseHiddenCount === 0 && "rla-bc-overflow-hidden"
+            ]}
+            aria-hidden="true"
+            data-slot="overflow"
+          >
+            <span class="rla-bc-ellipsis">…</span>
+            <span class="rla-bc-more-count" />
+            <span class={classes.separator} data-slot="separator" aria-hidden="true">
+              <RLAIcon name={separatorIcon} />
+            </span>
+          </li>
+        )}
+
+        {/* ── Middle items (hidable — oldest ancestors first) ─────────── */}
+        {renderedMidItems.map((item) => (
+          <li class:list={[classes.item, "hidable"]} data-slot="item">
+            {item.href ? (
+              <a href={item.href} class={classes.link} data-slot="link">
+                {item.label}
+              </a>
+            ) : (
+              <span class={classes.page} data-slot="page">{item.label}</span>
+            )}
+            <span class={classes.separator} data-slot="separator" aria-hidden="true">
+              <RLAIcon name={separatorIcon} />
+            </span>
+          </li>
+        ))}
+
+        {/* ── Last item (always visible, current page) ─────────────────── */}
+        {lastItem && (
+          <li class={classes.item} data-slot="item">
+            <span class={classes.page} data-slot="page" aria-current="page">
+              {lastItem.label}
+            </span>
+          </li>
+        )}
+      </ol>
+    </div>
+  ) : (
+    <ol class={classes.list} data-slot="list">
+      <slot />
+    </ol>
+  )}
+</nav>
+
+<!-- Per-instance container-query CSS scoped via data-bc attribute -->
+<style is:inline set:html={instanceCss} />
+
+<style>
+  .rla-bc-host {
+    display: block;
+    width: 100%;
+  }
+
+  /* Overflow indicator: shown by CSS, hidden by default when base-hidden is 0 */
+  .rla-bc-overflow {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    list-style: none;
+    flex-shrink: 0;
+  }
+
+  /* When base-hidden is 0 AND no container query has fired yet */
+  .rla-bc-overflow-hidden {
+    display: none;
+  }
+
+  .rla-bc-ellipsis {
+    color: var(--color-muted-foreground, currentColor);
+    letter-spacing: 0.05em;
+    font-weight: 500;
+  }
+
+  /*
+   * CSS Counter — sums --base-hidden (render-time, from maxVisible prop) +
+   * --hidden-items (set by container queries as width shrinks).
+   *
+   * Shows nothing when the count is 0.
+   * Shows "+N" when N > 0.
+   */
+  .rla-bc-more-count::after {
+    counter-reset: rla-bc-cnt calc(var(--base-hidden, 0) + var(--hidden-items, 0));
+    content: "+" counter(rla-bc-cnt);
+    /* Hide the "+0" case by using color:transparent when counter is 0.
+       CSS cannot conditionally suppress content based on counter value,
+       so we rely on the counter never being 0 when this element is visible
+       (the overflow li is only shown when --base-hidden > 0 or a container
+       query is active). */
+    color: var(--color-muted-foreground, currentColor);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    vertical-align: super;
+    line-height: 1;
+  }
+</style>
+
+{items && (
+  <script type="application/ld+json" is:inline set:html={JSON.stringify({
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    "itemListElement": items.map((item, idx) => ({
+      "@type": "ListItem",
+      "position": idx + 1,
+      "name": item.label,
+      "item": item.href ? new URL(item.href, Astro.site || "https://starter.rimelight.com").toString() : undefined
+    }))
+  })} />
+)}

package/src/components/breadcrumb/breadcrumb.theme.ts

@@ -1,17 +1,13 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createBreadcrumbTheme = (_colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root", "list", "item", "link", "separator", "page"],
-    base: {
-      root: "aria-label='breadcrumb'",
-      list: "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      item: "flex items-center gap-1.5",
-      link: "transition-colors hover:text-foreground cursor-pointer decoration-none text-current",
-      separator: "flex size-3.5 items-center justify-center [&_svg]:size-3.5 opacity-60",
-      page: "font-normal text-foreground"
-    }
-  })
-
-export default createBreadcrumbTheme()
+export const breadcrumbTheme = defineTheme("breadcrumb", {
+  slots: ["root", "list", "item", "link", "separator", "page"],
+  base: {
+    root: "aria-label='breadcrumb'",
+    list: "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted sm:gap-2.5",
+    item: "flex items-center gap-1.5",
+    link: "transition-colors hover:text-highlighted cursor-pointer decoration-none text-current",
+    separator: "flex size-3.5 items-center justify-center [&_svg]:size-3.5 opacity-60",
+    page: "font-normal text-highlighted"
+  }
+})

package/src/components/breadcrumb/breadcrumb.ts

@@ -8,6 +8,25 @@ export interface BreadcrumbProps {
    * Quick-prop array to render breadcrumb items automatically.
    */
   items?: BreadcrumbItem[]
+  /**
+   * Maximum number of items to show at full container width (including first and last which are
+   * always visible). Middle items beyond this cap are pre-hidden server-side and counted in the
+   * "…+N" overflow indicator.
+   *
+   * Example: 7 items, maxVisible=4 → shows [Home, …+3, Current]. At a narrow container the count
+   * increases further via CSS queries.
+   *
+   * When undefined, all items are shown at full width and only container queries produce the
+   * responsive collapse.
+   */
+  maxVisible?: number
+  /**
+   * Approximate width in pixels of each breadcrumb item (text + separator). Used to compute
+   * container-query breakpoints for the responsive collapse. Increase for longer labels.
+   *
+   * @default 120
+   */
+  estimatedItemWidth?: number
   /**
    * The icon separating the breadcrumbs.
    */

package/src/components/browser-mockup/RLABrowserMockup.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { BrowserMockupProps } from "./browser-mockup"
-import browserMockupTheme from "./browser-mockup.theme"
-
-
-const browserMockup = scv(browserMockupTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as BrowserMockupProps
-
-const classes = resolveClasses(browserMockup, {}, useUi("browserMockup", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { browserMockupTheme } from "./browser-mockup.theme"
+
+
+
+const classes = browserMockupTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/browser-mockup/browser-mockup.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createBrowserMockupTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createBrowserMockupTheme()
+export const browserMockupTheme = defineTheme("browser-mockup", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/button/RLAButton.astro

@@ -1,18 +1,11 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { ButtonProps } from "./button"
-import { resolveTheme } from "../../utils/resolveTheme"
-import buttonThemeDefault, { createButtonTheme } from "./button.theme"
-const buttonTheme = resolveTheme(buttonThemeDefault, createButtonTheme)
+import { buttonTheme } from "./button.theme"
 import RLAAvatar from "../avatar/RLAAvatar.astro"
 import RLALink from "../link/RLALink.astro"
 import RLAIcon from "../icon/RLAIcon.astro"
 
 
-const button = scv(buttonTheme)
-
 const {
   variant = "solid",
   color = "primary",
@@ -26,21 +19,14 @@ const {
   loading = false,
   loadingAuto = false,
   square = false,
-  rounded = false,
-  block = false,
   justify = "center",
   active = false,
-  theme,
   activeColor,
   activeVariant,
-  ui: uiProp,
-  class: className,
   ...rest
-} = Astro.props as ButtonProps & {
-  rounded?: boolean
-  activeColor?: string
-  activeVariant?: string
-}
+} = Astro.props as ButtonProps
+
+
 
 const isLeading = !!(leadingIcon || avatar || Astro.slots.has("leading") || loading)
 const isTrailing = !!(trailingIcon || Astro.slots.has("trailing")) || (loading && !isLeading)
@@ -56,20 +42,14 @@ const showTrailingIcon = loading
 const leadingIconClass = loading ? "animate-spin" : ""
 const trailingIconClass = loading ? "animate-spin" : ""
 
-const classes = resolveClasses(button, {
+const classes = buttonTheme({
+  ...Astro.props,
   variant: (active && activeVariant ? activeVariant : variant) as "solid",
   color: (active && activeColor ? activeColor : color) as "neutral",
-  size,
-  block,
-  justify,
   square: square || (!label && !Astro.slots.has("default")),
-  rounded,
   leading: isLeading,
-  trailing: isTrailing,
-  loading,
-  active,
-  theme
-}, useUi("button", uiProp), className);
+  trailing: isTrailing
+});
 
 const Tag = (href || to) ? RLALink : "button";
 
@@ -78,7 +58,7 @@ const loadingAutoProps = loadingAuto ? { 'data-loading-auto': '' } : {};
 <Tag
   class={classes.root}
   data-slot="root"
-  {...(Tag === RLALink ? { href, to, noExternalIcon: true } : {})}
+  {...(Tag === RLALink ? { href, to, noExternalIcon: true, raw: true } : {})}
   {...loadingAutoProps}
   {...rest}
 >
@@ -134,7 +114,7 @@ const loadingAutoProps = loadingAuto ? { 'data-loading-auto': '' } : {};
           try {
             button.setAttribute('data-loading', 'true');
             button.setAttribute('disabled', 'true');
-            
+
             // To spin the icon dynamically:
             let leadingIconSpan = button.querySelector('[data-slot="leading-icon"]');
             let origHTML = '';

package/src/components/button/RLSButton.tsx

@@ -0,0 +1,169 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { ButtonProps } from "./button"
+import { buttonTheme } from "./button.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSButtonProps extends ButtonProps {
+  children?: JSX.Element
+  leading?: JSX.Element
+  trailing?: JSX.Element
+  onClick?: (e: MouseEvent) => void
+  type?: "button" | "submit" | "reset"
+}
+
+const RLSButton: Component<RLSButtonProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "variant",
+    "color",
+    "size",
+    "href",
+    "label",
+    "leadingIcon",
+    "trailingIcon",
+    "loading",
+    "loadingAuto",
+    "square",
+    "block",
+    "justify",
+    "active",
+    "activeColor",
+    "activeVariant",
+    "rounded",
+    "theme",
+    "ui",
+    "class",
+    "disabled",
+    "children",
+    "leading",
+    "trailing",
+    "onClick",
+    "type",
+    "external",
+    "externalIcon",
+    "noExternalIcon",
+    "target",
+    "rel",
+    "prefetch",
+    "raw",
+    "ariaLabel",
+    "ariaCurrentValue"
+  ])
+
+  const isLeading = () => !!(props.leadingIcon || props.leading) || !!props.loading
+  const isTrailing = () =>
+    !!(props.trailingIcon || props.trailing) || (!!props.loading && !isLeading())
+
+  const showLeadingIcon = () => {
+    if (props.loading) return "loaderCircle"
+    return props.leadingIcon
+  }
+
+  const showTrailingIcon = () => {
+    if (props.loading) return "loaderCircle"
+    return props.trailingIcon
+  }
+
+  const leadingIconClass = () => (props.loading && isLeading() ? "animate-spin" : "")
+  const trailingIconClass = () => (props.loading && isTrailing() ? "animate-spin" : "")
+
+  const classes = createMemo<Record<string, string>>(() =>
+    buttonTheme({
+      variant:
+        props.active && props.activeVariant ? props.activeVariant : (props.variant ?? "solid"),
+      color: props.active && props.activeColor ? props.activeColor : (props.color ?? "primary"),
+      size: props.size ?? "md",
+      justify: props.justify,
+      block: props.block,
+      square: props.square !== undefined ? props.square : !props.label && !props.children,
+      rounded: props.rounded,
+      leading: isLeading(),
+      trailing: isTrailing(),
+      loading: props.loading,
+      active: props.active,
+      theme: props.theme,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  if (props.href) {
+    return (
+      <a
+        href={props.href}
+        target={props.target}
+        rel={props.rel || undefined}
+        class={classes().root}
+        data-slot="root"
+        aria-label={props.ariaLabel}
+        aria-disabled={props.disabled ? "true" : undefined}
+        onClick={props.onClick}
+        {...rest}
+      >
+        {props.leading ? (
+          props.leading
+        ) : isLeading() && showLeadingIcon() ? (
+          <span class={`${classes().leadingIcon}  ${leadingIconClass()}`} data-slot="leading-icon">
+            <RLSIcon name={showLeadingIcon()!} size={props.size ?? "md"} aria-hidden="true" />
+          </span>
+        ) : null}
+
+        {props.children !== undefined && props.children !== null ? (
+          props.children
+        ) : props.label !== undefined && props.label !== null ? (
+          <span class={classes().label} data-slot="label">
+            {props.label}
+          </span>
+        ) : null}
+
+        {props.trailing ? (
+          props.trailing
+        ) : isTrailing() && showTrailingIcon() ? (
+          <span
+            class={`${classes().trailingIcon}  ${trailingIconClass()}`}
+            data-slot="trailing-icon"
+          >
+            <RLSIcon name={showTrailingIcon()!} size={props.size ?? "md"} aria-hidden="true" />
+          </span>
+        ) : null}
+      </a>
+    )
+  }
+
+  return (
+    <button
+      type={props.type || "button"}
+      disabled={props.disabled}
+      class={classes().root}
+      data-slot="root"
+      aria-label={props.ariaLabel}
+      onClick={props.onClick}
+      {...rest}
+    >
+      {props.leading ? (
+        props.leading
+      ) : isLeading() && showLeadingIcon() ? (
+        <span class={`${classes().leadingIcon}  ${leadingIconClass()}`} data-slot="leading-icon">
+          <RLSIcon name={showLeadingIcon()!} size={props.size ?? "md"} aria-hidden="true" />
+        </span>
+      ) : null}
+
+      {props.children !== undefined && props.children !== null ? (
+        props.children
+      ) : props.label !== undefined && props.label !== null ? (
+        <span class={classes().label} data-slot="label">
+          {props.label}
+        </span>
+      ) : null}
+
+      {props.trailing ? (
+        props.trailing
+      ) : isTrailing() && showTrailingIcon() ? (
+        <span class={`${classes().trailingIcon}  ${trailingIconClass()}`} data-slot="trailing-icon">
+          <RLSIcon name={showTrailingIcon()!} size={props.size ?? "md"} aria-hidden="true" />
+        </span>
+      ) : null}
+    </button>
+  )
+}
+
+export default RLSButton