@spaethtech/svelte-ui 0.21.3-dev.142.aa5d0fa → 0.21.4-dev.145.a66fc9d

package/CLAUDE.md

@@ -238,6 +238,9 @@ user-facing literal in a component is a bug (it's invisible to `svelte-check` an
   surfaces (hover/section/pressed) use the shared `--ui-color-hover|surface|active` tints, which
   mix from `--ui-accent`. Full model + rules: the **`themes` skill** (`.claude/skills/themes/`).
 - Consistent heights: `--ui-height` (32px); `--ui-height-sm|lg|touch` for the other tiers
+- **Font weights via `var(--ui-font-weight-*)`** — write `[font-weight:var(--ui-font-weight-semibold)]`
+  (or `-normal|-medium|-bold`), **never** a raw Tailwind `font-semibold`/`font-medium`/`font-bold`, so a
+  consumer can remap weights in one place (defaults 400/500/600/700, so no visual change)
 - Padding/gap is per-component (a `Record<Size,string>` class map), **not** a token
 
 ### Performance

package/dist/components/Alert.svelte

@@ -111,7 +111,7 @@
       >
     {/if}
     <div class="flex min-w-0 flex-col">
-      {#if title}<span class="font-semibold">{title}</span>{/if}
+      {#if title}<span class="[font-weight:var(--ui-font-weight-semibold)]">{title}</span>{/if}
       <span class="min-w-0"
         >{#if children}{@render children()}{:else}{text}{/if}</span
       >

package/dist/components/Avatar/Avatar.svelte

@@ -84,7 +84,7 @@
 
 <span class="relative inline-flex shrink-0 {cls}" {...rest}>
   <span
-    class="ui-avatar inline-flex items-center justify-center overflow-hidden font-medium select-none {shapeClass} {responsiveClasses(
+    class="ui-avatar inline-flex items-center justify-center overflow-hidden [font-weight:var(--ui-font-weight-medium)] select-none {shapeClass} {responsiveClasses(
       size,
       boxMap,
     )} {responsiveClasses(size, iconBox)}"

package/dist/components/Avatar/AvatarGroup.svelte

@@ -71,7 +71,7 @@
     {/each}
     {#if overflow > 0}
       <span
-        class="ui-avatar relative inline-flex shrink-0 items-center justify-center overflow-hidden font-medium select-none {shapeClass} {responsiveClasses(
+        class="ui-avatar relative inline-flex shrink-0 items-center justify-center overflow-hidden [font-weight:var(--ui-font-weight-medium)] select-none {shapeClass} {responsiveClasses(
           size,
           boxMap,
         )}"

package/dist/components/Breadcrumbs/Breadcrumbs.svelte

@@ -109,7 +109,7 @@
         {:else if node.last}
           <span
             aria-current="page"
-            class="inline-flex items-center gap-1 px-1 font-medium [color:var(--ui-color-text)] {responsiveClasses(
+            class="inline-flex items-center gap-1 px-1 [font-weight:var(--ui-font-weight-medium)] [color:var(--ui-color-text)] {responsiveClasses(
               size,
               textSize,
             )}"

package/dist/components/Button.svelte

@@ -80,7 +80,7 @@
 
   // Base classes - height is always h-8 (32px), width is h-8 for icon-only
   const baseClasses =
-    "inline-flex shrink-0 items-center justify-center [border-radius:var(--ui-border-radius)] font-medium transition-colors no-underline cursor-pointer border focus-visible:[outline:2px_solid_color-mix(in_srgb,var(--ui-color-text)_70%,transparent)] focus-visible:[outline-offset:0px]";
+    "inline-flex shrink-0 items-center justify-center [border-radius:var(--ui-border-radius)] [font-weight:var(--ui-font-weight-medium)] transition-colors no-underline cursor-pointer border focus-visible:[outline:2px_solid_color-mix(in_srgb,var(--ui-color-text)_70%,transparent)] focus-visible:[outline-offset:0px]";
 
   // Additional classes for disabled state (only applies to buttons)
   const disabledClasses = href ? "" : "disabled:opacity-50 disabled:cursor-not-allowed";

package/dist/components/Calendar.svelte

@@ -197,7 +197,7 @@
       class="grid {sizing.nav} place-items-center rounded-[var(--ui-border-radius)] hover:[background-color:var(--ui-color-hover)] active:[background-color:var(--ui-color-active)]"
       onclick={() => go(-1)}><IconLeft class="size-5" /></button
     >
-    <span class="{sizing.label} font-medium">{monthLabel}</span>
+    <span class="{sizing.label} [font-weight:var(--ui-font-weight-medium)]">{monthLabel}</span>
     <button
       type="button"
       aria-label={i18n.messages.nextMonth}
@@ -207,7 +207,7 @@
   </div>
 
   <div class="grid grid-cols-7 {subtle}">
-    {#each weekdays as w (w)}<div class="grid {sizing.cell} place-items-center font-medium">
+    {#each weekdays as w (w)}<div class="grid {sizing.cell} place-items-center [font-weight:var(--ui-font-weight-medium)]">
         {w}
       </div>{/each}
   </div>
@@ -244,7 +244,7 @@
           class="grid {sizing.cell} place-items-center rounded-[var(--ui-border-radius)] transition-colors
 						{disabled ? 'cursor-not-allowed opacity-30' : 'cursor-pointer'}
 						{edge
-            ? '[background-color:var(--accent)] font-semibold text-white'
+            ? '[background-color:var(--accent)] [font-weight:var(--ui-font-weight-semibold)] text-white'
             : !disabled && !band
               ? 'hover:[background-color:var(--ui-color-hover)] active:[background-color:var(--ui-color-active)]'
               : ''}

package/dist/components/CommandPalette/CommandPalette.svelte

@@ -172,7 +172,7 @@
         {:else}
           {#each groups as g (g.name)}
             {#if g.name}
-              <li class="px-3 pb-1 pt-3 text-xs font-medium uppercase tracking-wide [color:color-mix(in_srgb,var(--ui-color-text)_45%,transparent)]">
+              <li class="px-3 pb-1 pt-3 text-xs [font-weight:var(--ui-font-weight-medium)] uppercase tracking-wide [color:color-mix(in_srgb,var(--ui-color-text)_45%,transparent)]">
                 {g.name}
               </li>
             {/if}

package/dist/components/ConfirmDialog.svelte

@@ -84,7 +84,7 @@
 >
   <Card {size} class="w-full shadow-xl">
     <CardHeader {size}>
-      <h3 class="text-lg font-medium [color:var(--ui-color-text)]">{title}</h3>
+      <h3 class="text-lg [font-weight:var(--ui-font-weight-medium)] [color:var(--ui-color-text)]">{title}</h3>
     </CardHeader>
 
     {#if children}

package/dist/components/DataTable.svelte

@@ -300,7 +300,7 @@
 	     read as bands framing the interactive rows. -->
   <div
     role="row"
-    class="flex items-center font-semibold uppercase border
+    class="flex items-center [font-weight:var(--ui-font-weight-semibold)] uppercase border
 			{cellGap} {cellPad}
 			[border-top-left-radius:var(--ui-border-radius)] [border-top-right-radius:var(--ui-border-radius)]
 			[color:var(--ui-color-text)]"
@@ -490,7 +490,7 @@
                 }
               : undefined}
           >
-            <div role="cell" class="flex min-w-0 grow items-center gap-2 font-semibold">
+            <div role="cell" class="flex min-w-0 grow items-center gap-2 [font-weight:var(--ui-font-weight-semibold)]">
               {#if groupHeader}
                 {@render groupHeader({
                   key: item.key,

package/dist/components/Disclosure.svelte

@@ -85,7 +85,7 @@
     {#if header}
       <span class="flex-1 text-left">{@render header()}</span>
     {:else}
-      <span class="flex-1 text-left font-medium {labelText}">{title}</span>
+      <span class="flex-1 text-left [font-weight:var(--ui-font-weight-medium)] {labelText}">{title}</span>
     {/if}
     <ChevronDown
       class="shrink-0 motion-safe:transition-transform motion-safe:duration-200 {isOpen

package/dist/components/Disclosure2.svelte

@@ -84,7 +84,7 @@
 
   // ── Header chrome — mirrors a <Button variant size> (borderless=true, the Disclosure default). ──
   const baseClasses =
-    "flex w-full items-center [border-radius:var(--ui-border-radius)] font-medium transition-colors cursor-pointer border focus-visible:[outline:2px_solid_color-mix(in_srgb,var(--ui-color-text)_70%,transparent)] focus-visible:[outline-offset:0px]";
+    "flex w-full items-center [border-radius:var(--ui-border-radius)] [font-weight:var(--ui-font-weight-medium)] transition-colors cursor-pointer border focus-visible:[outline:2px_solid_color-mix(in_srgb,var(--ui-color-text)_70%,transparent)] focus-visible:[outline-offset:0px]";
   const padMap: Record<Size, string> = { sm: "h-6 px-2.5", md: "h-8 px-4", lg: "h-10 px-6" };
   const textMap: Record<Size, string> = { sm: "text-xs", md: "text-sm", lg: "text-base" };
   const svgMap: Record<Size, string> = {

package/dist/components/EmptyState/EmptyState.svelte

@@ -56,7 +56,7 @@
   </div>
 
   {#if title}
-    <h3 class="font-semibold [color:var(--ui-color-text)] {responsiveClasses(size, titleSize)}">
+    <h3 class="[font-weight:var(--ui-font-weight-semibold)] [color:var(--ui-color-text)] {responsiveClasses(size, titleSize)}">
       {title}
     </h3>
   {/if}

package/dist/components/FieldChrome.svelte

@@ -75,7 +75,7 @@
       {#if label}
         <label
           for={controlId}
-          class="{labelText} truncate font-medium [color:var(--ui-color-text)]"
+          class="{labelText} truncate [font-weight:var(--ui-font-weight-medium)] [color:var(--ui-color-text)]"
         >
           {label}{#if required}<span aria-hidden="true" class="[color:var(--ui-color-error)]"> *</span
             >{/if}

package/dist/components/FieldsetChrome.svelte

@@ -64,7 +64,7 @@
     <!-- legend stays a direct <fieldset> child (a11y); the row layout lives inside it -->
     <legend class="flex w-full items-center justify-between gap-2 p-0">
       {#if label}
-        <span class="{labelText} font-medium [color:var(--ui-color-text)]"
+        <span class="{labelText} [font-weight:var(--ui-font-weight-medium)] [color:var(--ui-color-text)]"
           >{label}{#if required}<span aria-hidden="true" class="[color:var(--ui-color-error)]"> *</span
             >{/if}</span
         >

package/dist/components/FileList/FileList.svelte

@@ -277,7 +277,7 @@
 >
   <div
     role="row"
-    class="{cols} border-b px-3 py-2 font-medium [border-color:var(--ui-border-color)] {muted}"
+    class="{cols} border-b px-3 py-2 [font-weight:var(--ui-font-weight-medium)] [border-color:var(--ui-border-color)] {muted}"
   >
     {@render head("name", i18n.messages.colName)}
     {@render head("modified", i18n.messages.colDateModified, "hidden @lg:block")}

package/dist/components/FileUpload/FileUpload.svelte

@@ -156,7 +156,7 @@
       >
         <span class="[&_svg]:w-8 [&_svg]:h-8 [color:var(--ui-color-secondary)]"><IconUpload /></span>
         <div>
-          <span class="font-medium [color:var(--ui-color-text)]">Drop files here</span>
+          <span class="[font-weight:var(--ui-font-weight-medium)] [color:var(--ui-color-text)]">Drop files here</span>
           <span class="[color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]"> or</span>
         </div>
         <Button text="Browse" {variant} {size} onclick={openPicker} />

package/dist/components/Kbd/Kbd.svelte

@@ -36,7 +36,7 @@
   };
   // Keycap: subtle surface fill, tinted border with a slightly darker bottom edge (a shallow 3D key).
   const cap =
-    "inline-flex items-center justify-center rounded border font-medium [font-family:ui-monospace,SFMono-Regular,Menlo,monospace] [background-color:var(--ui-color-surface)] [border-color:var(--ui-border-color)] [box-shadow:inset_0_-1px_0_var(--ui-border-color)] [color:var(--ui-color-text)] select-none";
+    "inline-flex items-center justify-center rounded border [font-weight:var(--ui-font-weight-medium)] [font-family:ui-monospace,SFMono-Regular,Menlo,monospace] [background-color:var(--ui-color-surface)] [border-color:var(--ui-border-color)] [box-shadow:inset_0_-1px_0_var(--ui-border-color)] [color:var(--ui-color-text)] select-none";
 </script>
 
 {#if list}

package/dist/components/NotesEditor.svelte

@@ -110,7 +110,7 @@
 <div class={className}>
   <!-- Header: label + save status -->
   <div class="flex items-center justify-between mb-2">
-    <span class="block text-sm font-medium [color:var(--ui-color-text)]">Notes</span>
+    <span class="block text-sm [font-weight:var(--ui-font-weight-medium)] [color:var(--ui-color-text)]">Notes</span>
     <span class="text-xs min-h-[16px]" style="color: {status.color}">{status.text}</span>
   </div>
 

package/dist/components/Query.svelte

@@ -237,7 +237,7 @@
 <Dialog bind:isOpen={helpOpen} width="80vw" height="80vh" aria-label={i18n.messages.querySyntax}>
   <Card size="md" class="flex h-full w-full flex-col shadow-xl">
     <CardHeader size="md">
-      <h3 class="text-lg font-medium [color:var(--ui-color-text)]">{i18n.messages.querySyntax}</h3>
+      <h3 class="text-lg [font-weight:var(--ui-font-weight-medium)] [color:var(--ui-color-text)]">{i18n.messages.querySyntax}</h3>
     </CardHeader>
     <div class="min-h-0 flex-1 space-y-4 overflow-y-auto text-sm [color:var(--ui-color-text)]">
     <p>
@@ -246,7 +246,7 @@
       <code>()</code>.
     </p>
     <div>
-      <h4 class="mb-1 font-semibold">{i18n.messages.operators}</h4>
+      <h4 class="mb-1 [font-weight:var(--ui-font-weight-semibold)]">{i18n.messages.operators}</h4>
       <table class="w-full text-left">
         <tbody class="[&_td]:py-0.5 [&_td:first-child]:pr-4 [&_td:first-child]:font-mono">
           <tr><td>== !=</td><td>equals / not equals</td></tr>
@@ -259,7 +259,7 @@
       </table>
     </div>
     <div>
-      <h4 class="mb-1 font-semibold">{i18n.messages.casts}</h4>
+      <h4 class="mb-1 [font-weight:var(--ui-font-weight-semibold)]">{i18n.messages.casts}</h4>
       <p class="mb-1 text-xs [color:color-mix(in_srgb,var(--ui-color-text)_70%,transparent)]">
         A <code class="font-mono">|type</code> after a column or value forces its type for strict comparison
         — one cast per clause; put it on the column and/or the literals.
@@ -277,7 +277,7 @@
       </table>
     </div>
     <div>
-      <h4 class="mb-1 font-semibold">Dynamic dates</h4>
+      <h4 class="mb-1 [font-weight:var(--ui-font-weight-semibold)]">Dynamic dates</h4>
       <p class="mb-1 text-xs [color:color-mix(in_srgb,var(--ui-color-text)_70%,transparent)]">
         <code class="font-mono">now()</code> is the current time, resolved when the query runs. Add a
         signed offset <code class="font-mono">now()±&lt;n&gt;&lt;unit&gt;</code> — units
@@ -295,7 +295,7 @@
       </table>
     </div>
     <div>
-      <h4 class="mb-1 font-semibold">{i18n.messages.examples}</h4>
+      <h4 class="mb-1 [font-weight:var(--ui-font-weight-semibold)]">{i18n.messages.examples}</h4>
       <table class="w-full text-left">
         <tbody
           class="[&_td]:py-0.5 [&_td:first-child]:whitespace-nowrap [&_td:first-child]:pr-4 [&_td:first-child]:font-mono [&_td:last-child]:text-xs [&_td:last-child]:[color:color-mix(in_srgb,var(--ui-color-text)_65%,transparent)]"

package/dist/components/Rating.svelte

@@ -214,7 +214,7 @@
   }
 
   .rating-value {
-    font-weight: 600;
+    font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-color-text);
   }
 

package/dist/components/SideBarMenu/SideBarMenu.svelte

@@ -891,7 +891,7 @@
     ></span>
   {:else}
     <span
-      class="absolute {sz.pillOffset} inline-flex items-center justify-center rounded-full px-1 {sz.pill} {sz.pillText} font-semibold leading-none"
+      class="absolute {sz.pillOffset} inline-flex items-center justify-center rounded-full px-1 {sz.pill} {sz.pillText} [font-weight:var(--ui-font-weight-semibold)] leading-none"
       style="background-color: {colorVar}; color: white;"
       aria-hidden="true"
     >

package/dist/components/Stat/Stat.svelte

@@ -68,13 +68,13 @@
       <div class="truncate text-sm [color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]">
         {label}
       </div>
-      <div class="mt-1 font-semibold [color:var(--ui-color-text)] {responsiveClasses(size, valueSize)}">
+      <div class="mt-1 [font-weight:var(--ui-font-weight-semibold)] [color:var(--ui-color-text)] {responsiveClasses(size, valueSize)}">
         {value}
       </div>
       {#if delta != null}
         <div class="mt-1 flex items-center gap-1 text-sm" style="color: {deltaColor};">
           {#if up}<IconUp class="w-4 h-4" />{:else if down}<IconDown class="w-4 h-4" />{/if}
-          <span class="font-medium tabular-nums">{delta}</span>
+          <span class="[font-weight:var(--ui-font-weight-medium)] tabular-nums">{delta}</span>
           {#if deltaLabel}<span class="[color:color-mix(in_srgb,var(--ui-color-text)_50%,transparent)]"
               >{deltaLabel}</span
             >{/if}

package/dist/components/Stepper/Stepper.svelte

@@ -82,7 +82,7 @@
           onclick={onstep ? () => onstep(i) : undefined}
           aria-current={s === "current" ? "step" : undefined}
           aria-label={onstep ? `Step ${i + 1}: ${step.label}` : undefined}
-          class="inline-flex shrink-0 items-center justify-center rounded-full border-2 font-semibold {responsiveClasses(
+          class="inline-flex shrink-0 items-center justify-center rounded-full border-2 [font-weight:var(--ui-font-weight-semibold)] {responsiveClasses(
             size,
             markerSize,
           )} {onstep
@@ -106,7 +106,7 @@
       <!-- Label + description. -->
       <div class="{isH ? 'mt-2 text-center px-1' : 'pb-4'} min-w-0 {responsiveClasses(size, labelSize)}">
         <div
-          class="truncate font-medium {s === 'upcoming'
+          class="truncate [font-weight:var(--ui-font-weight-medium)] {s === 'upcoming'
             ? '[color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]'
             : '[color:var(--ui-color-text)]'}"
         >

package/dist/components/ThemeSelector.svelte

@@ -42,7 +42,7 @@
 </script>
 
 <div {...rest} class="flex items-center gap-2">
-  <label for="theme-selector" class="{labelClass} font-medium text-[var(--ui-color-text)]"
+  <label for="theme-selector" class="{labelClass} [font-weight:var(--ui-font-weight-medium)] text-[var(--ui-color-text)]"
     >Theme:</label
   >
   <Select

package/dist/components/TimeSpinner.svelte

@@ -157,7 +157,7 @@
   style="--accent: {accent}"
 >
   {#each cols as c (c.label)}
-    {#if c.colon}<span class="{sizing.val} grid place-items-center pb-0 font-semibold opacity-60"
+    {#if c.colon}<span class="{sizing.val} grid place-items-center pb-0 [font-weight:var(--ui-font-weight-semibold)] opacity-60"
         >:</span
       >{/if}
     <div class="flex flex-col items-center">
@@ -174,7 +174,7 @@
         aria-label={c.label}
         aria-valuetext={c.display}
         tabindex="0"
-        class="{sizing.val} grid cursor-ns-resize place-items-center rounded-[var(--ui-border-radius)] text-center font-semibold tabular-nums select-none focus:outline-none focus-visible:[outline:2px_solid_var(--accent)]"
+        class="{sizing.val} grid cursor-ns-resize place-items-center rounded-[var(--ui-border-radius)] text-center [font-weight:var(--ui-font-weight-semibold)] tabular-nums select-none focus:outline-none focus-visible:[outline:2px_solid_var(--accent)]"
         onwheel={(e) => {
           e.preventDefault();
           apply(e.deltaY > 0 ? c.down : c.up);

package/dist/components/Timeline/Timeline.svelte

@@ -79,7 +79,7 @@
       <!-- Content. -->
       <div class="min-w-0 flex-1 pb-6">
         <div class="flex flex-wrap items-baseline gap-x-2">
-          <span class="font-medium [color:var(--ui-color-text)] {responsiveClasses(size, titleSize)}">
+          <span class="[font-weight:var(--ui-font-weight-medium)] [color:var(--ui-color-text)] {responsiveClasses(size, titleSize)}">
             {item.title}
           </span>
           {#if item.time}

package/dist/theme.css

@@ -128,6 +128,17 @@
   --ui-tint-border: 50%;
   --ui-tint-border-hover: 80%;
   --ui-tint-strong: 80%;
+
+  /* Font weights — the scale components render "normal / medium / semibold / bold" through, instead of
+   * hard-coded Tailwind weights, so a project whose font ships only some weights can remap them in ONE
+   * place and every component follows. Defaults match the Tailwind values the components used before, so
+   * output is byte-identical unless overridden. A font with only 400/700, for example, sets
+   * `--ui-font-weight-medium: 400; --ui-font-weight-semibold: 700;` (bold already 700). Theme-independent
+   * constants (no colour → no per-theme scope needed). */
+  --ui-font-weight-normal: 400;
+  --ui-font-weight-medium: 500;
+  --ui-font-weight-semibold: 600;
+  --ui-font-weight-bold: 700;
 }
 
 /* Accent scoping — opt-in. Set --ui-accent on an element with this class (components do this from a

package/docs/themes.md

@@ -82,6 +82,20 @@ theme-independent** (identical in light and dark) — only the accent color flip
 
 - `--ui-icon-sm` — `0.875rem` / 14px · `--ui-icon` — `1rem` / 16px (default) · `--ui-icon-lg` — `1.25rem` / 20px
 
+### Font weights
+
+Components render their type weights through these (not hard-coded Tailwind `font-medium`/`font-semibold`),
+so a project whose font ships only some weights can remap them in **one** place and every component follows:
+
+- `--ui-font-weight-normal` — `400`
+- `--ui-font-weight-medium` — `500`
+- `--ui-font-weight-semibold` — `600`
+- `--ui-font-weight-bold` — `700`
+
+Defaults match the former Tailwind weights, so there's **no visual change** unless you override. A font
+with only 400/700 remaps the in-between tiers — e.g. `--ui-font-weight-medium: 400; --ui-font-weight-semibold: 700;`
+(bold is already 700). Theme-independent (same in light and dark).
+
 > Per-component **padding / gap** is NOT a token — each component maps the `size` prop to Tailwind
 > class maps (`Record<Size, string>`) internally. (The old `--ui-padding*` and `--ui-border` width
 > tokens were removed.)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.21.3-dev.142.aa5d0fa",
+  "version": "0.21.4-dev.145.a66fc9d",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"