@lyeve-labs/ui-kit 0.23.1 → 0.23.2

package/dist/components/CheckboxGroup.svelte

@@ -26,12 +26,13 @@
 <script lang="ts">
   import {
     CHOICE_GROUP,
+    CHOICE_LEGEND,
     choiceGroupList,
     type ChoiceOrientation,
     type ChoiceSize,
     type ChoiceVariant,
   } from '../internal/choice.js';
-  import { FIELD_ERROR, FIELD_HINT, FIELD_LABEL, describedBy } from '../internal/field.js';
+  import { FIELD_ERROR, FIELD_HINT, describedBy } from '../internal/field.js';
   import Checkbox from './Checkbox.svelte';
 
   interface Props {
@@ -123,7 +124,7 @@
     so a reader moving through the page would meet the options with nothing
     ahead of them saying what the set is for.
   -->
-  <legend class="{FIELD_LABEL} {labelHidden ? 'sr-only' : ''}">
+  <legend class="{CHOICE_LEGEND} {labelHidden ? 'sr-only' : ''}">
     {label}{#if required}<span class="text-danger ms-0.5" aria-hidden="true">*</span><span
         class="sr-only"
       >

package/dist/components/RadioGroup.svelte

@@ -27,12 +27,13 @@
 <script lang="ts">
   import {
     CHOICE_GROUP,
+    CHOICE_LEGEND,
     choiceGroupList,
     type ChoiceOrientation,
     type ChoiceSize,
     type ChoiceVariant,
   } from '../internal/choice.js';
-  import { FIELD_ERROR, FIELD_HINT, FIELD_LABEL, describedBy } from '../internal/field.js';
+  import { FIELD_ERROR, FIELD_HINT, describedBy } from '../internal/field.js';
   import Radio from './Radio.svelte';
 
   interface Props {
@@ -108,7 +109,7 @@
     so a reader moving through the page would meet the options with nothing
     ahead of them saying what the set is for.
   -->
-  <legend class="{FIELD_LABEL} {labelHidden ? 'sr-only' : ''}">
+  <legend class="{CHOICE_LEGEND} {labelHidden ? 'sr-only' : ''}">
     {label}{#if required}<span class="text-danger ms-0.5" aria-hidden="true">*</span>{/if}
   </legend>
 

package/dist/components/Table.svelte

@@ -56,6 +56,23 @@
     children: Snippet;
   }
 
+  /**
+   * The hover ring, as inset shadows on the cells of the hovered row: top
+   * and bottom on every cell, the start edge on the first, the end edge on
+   * the last, so the four lines meet as one rectangle and the two outer
+   * cells of the last row carry it round the frame's corner. The shadow
+   * offsets are physical, which is what a shadow is; the first cell is the
+   * start cell in either direction and the two agree in left-to-right text.
+   */
+  const HOVER_RING = [
+    '[&_tbody_tr:hover]:bg-surface-2/60',
+    '[&_tbody_tr:hover>td]:shadow-[inset_0_1px_var(--color-brand),inset_0_-1px_var(--color-brand)]',
+    '[&_tbody_tr:hover>td:first-child]:shadow-[inset_1px_1px_var(--color-brand),inset_1px_-1px_var(--color-brand)]',
+    '[&_tbody_tr:hover>td:last-child]:shadow-[inset_-1px_1px_var(--color-brand),inset_-1px_-1px_var(--color-brand)]',
+    '[&_tbody_tr:hover>td:first-child:last-child]:shadow-[inset_1px_1px_var(--color-brand),inset_-1px_-1px_var(--color-brand)]',
+    '[&_tbody_tr]:transition-colors [&_tbody_tr]:duration-150',
+  ].join(' ');
+
   let {
     striped = false,
     hoverable = true,
@@ -231,6 +248,11 @@
     <!--
       border-separate with no spacing, and the row separators on the cells.
 
+      The last row's outer cells are rounded to the frame's inner radius. A
+      row takes no radius, so a ring drawn on it was a square inset in a
+      rounded frame and the frame's bottom arcs sat outside it; the ring is
+      drawn on the cells now (see HOVER_RING) and follows the corner.
+
       The hovered row draws a ring, and a ring is a box-shadow: a browser paints
       no box-shadow on a table row while the table collapses its borders, so the
       same row treatment the panels use would have rendered nothing at all here.
@@ -251,9 +273,9 @@
       [&_tbody_td]:px-4 [&_tbody_td]:py-3 [&_tbody_td]:text-fg [&_tbody_td]:align-middle
       [&_tbody_td]:border-b [&_tbody_td]:border-line [&_tbody_tr:last-child_td]:border-0
       {striped ? '[&_tbody_tr:nth-child(even)]:bg-surface-2/40' : ''}
-      {hoverable
-        ? '[&_tbody_tr:hover]:bg-surface-2/60 [&_tbody_tr:hover]:ring-1 [&_tbody_tr:hover]:ring-inset [&_tbody_tr:hover]:ring-brand [&_tbody_tr]:transition-colors [&_tbody_tr]:duration-150'
-        : ''}"
+      [&_tbody_tr:last-child>td:first-child]:rounded-es-[calc(var(--radius-xl)-1px)]
+      [&_tbody_tr:last-child>td:last-child]:rounded-ee-[calc(var(--radius-xl)-1px)]
+      {hoverable ? HOVER_RING : ''}"
     >
       {@render children()}
     </table>

package/dist/index.d.ts

@@ -89,4 +89,4 @@ export type { ConfirmOptions } from './components/dialog/dialog-manager.svelte.j
 export type { DialogOptions, DialogEntry, DialogSize } from './components/dialog/types.js';
 export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setTheme, setThemePreference, systemTheme, themeBootScript, toggleTheme, watchSystemTheme, THEME_PREFERENCES, type Theme, type ThemePreference, } from './utils/theme.js';
-export declare const VERSION = "0.23.1";
+export declare const VERSION = "0.23.2";

package/dist/index.js

@@ -96,4 +96,4 @@ export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setThe
 // ── Version ────────────────────────────────────────────────────────────────
 // Generated from package.json by `pnpm version:sync`. Bump package.json, never
 // this line; the build and the test suite fail when the two disagree.
-export const VERSION = '0.23.1';
+export const VERSION = '0.23.2';

package/dist/internal/choice.d.ts

@@ -112,6 +112,15 @@ export declare const CHOICE_ICON_PX: Record<ChoiceSize, number>;
  * wrapping.
  */
 export declare const CHOICE_GROUP = "flex min-w-0 flex-col gap-2";
+/**
+ * The group's heading. A rendered legend is not a flex item: the browser lays
+ * it out as the fieldset's legend, outside the flex formatting context, so
+ * the group's gap applies between the list and the hint and never between
+ * the legend and the list. The legend carries the distance itself, the same
+ * 6px a Field puts between its label and its control. A hidden legend is
+ * absolutely positioned and the margin does nothing there.
+ */
+export declare const CHOICE_LEGEND = "text-sm font-medium text-fg mb-1.5";
 /**
  * The row or column the options sit in.
  *

package/dist/internal/choice.js

@@ -14,7 +14,7 @@
  *
  * Not exported from the package entry point - this is an implementation detail.
  */
-import { FIELD_HINT } from './field.js';
+import { FIELD_HINT, FIELD_LABEL } from './field.js';
 /**
  * The box and the icon slot share one size map, so the label text starts at the
  * same x whether or not an option carries an icon. 3.5 is 14px, 4 is 16px and 5
@@ -151,6 +151,15 @@ export const CHOICE_ICON_PX = {
  * wrapping.
  */
 export const CHOICE_GROUP = 'flex min-w-0 flex-col gap-2';
+/**
+ * The group's heading. A rendered legend is not a flex item: the browser lays
+ * it out as the fieldset's legend, outside the flex formatting context, so
+ * the group's gap applies between the list and the hint and never between
+ * the legend and the list. The legend carries the distance itself, the same
+ * 6px a Field puts between its label and its control. A hidden legend is
+ * absolutely positioned and the margin does nothing there.
+ */
+export const CHOICE_LEGEND = `${FIELD_LABEL} mb-1.5`;
 /**
  * The row or column the options sit in.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.23.1",
+  "version": "0.23.2",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",