@sentropic/design-system-svelte 0.34.50 → 0.34.51

package/dist/DashboardGrid.svelte

@@ -0,0 +1,237 @@
+<script lang="ts" module>
+  export type DashboardGridTile = {
+    id: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    title?: string;
+    description?: string;
+    value?: string;
+  };
+
+  export type DashboardGridProps = {
+    tiles: DashboardGridTile[];
+    columns?: number;
+    rowHeight?: number;
+    gap?: number;
+    editable?: boolean;
+    label?: string;
+    onLayout?: (tiles: DashboardGridTile[]) => void;
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  let {
+    tiles,
+    columns = 12,
+    rowHeight = 88,
+    gap = 16,
+    editable = false,
+    label = "Dashboard grid",
+    onLayout,
+    class: className
+  }: DashboardGridProps = $props();
+
+  const safeColumns = $derived(Math.max(1, Math.floor(columns || 12)));
+  const safeRowHeight = $derived(Math.max(32, Math.floor(rowHeight || 88)));
+  const safeGap = $derived(Math.max(0, Math.floor(gap || 0)));
+  let localTiles = $state<DashboardGridTile[]>([]);
+  let lastInputKey = $state("");
+
+  function cloneTile(tile: DashboardGridTile): DashboardGridTile {
+    return { ...tile };
+  }
+
+  function normalizeTile(tile: DashboardGridTile, colCount: number): DashboardGridTile {
+    const w = Math.max(1, Math.min(colCount, Math.floor(tile.w || 1)));
+    const x = Math.max(0, Math.min(colCount - w, Math.floor(tile.x || 0)));
+    return {
+      ...tile,
+      id: String(tile.id),
+      x,
+      y: Math.max(0, Math.floor(tile.y || 0)),
+      w,
+      h: Math.max(1, Math.floor(tile.h || 1))
+    };
+  }
+
+  function normalizeTiles(nextTiles: DashboardGridTile[], colCount = safeColumns): DashboardGridTile[] {
+    return nextTiles.map((tile) => normalizeTile(cloneTile(tile), colCount));
+  }
+
+  $effect(() => {
+    const key = JSON.stringify({ tiles, columns: safeColumns });
+    if (key !== lastInputKey) {
+      lastInputKey = key;
+      localTiles = normalizeTiles(tiles, safeColumns);
+    }
+  });
+
+  const layout = $derived(normalizeTiles(localTiles, safeColumns));
+
+  function commit(nextTiles: DashboardGridTile[]) {
+    const normalized = normalizeTiles(nextTiles, safeColumns);
+    localTiles = normalized;
+    onLayout?.(normalized.map(cloneTile));
+  }
+
+  function changeTile(id: string, patch: Partial<DashboardGridTile>) {
+    commit(layout.map((tile) => (tile.id === id ? { ...tile, ...patch } : tile)));
+  }
+
+  function moveTile(id: string, dx: number, dy: number) {
+    const tile = layout.find((candidate) => candidate.id === id);
+    if (!tile) return;
+    changeTile(id, { x: tile.x + dx, y: tile.y + dy });
+  }
+
+  function resizeTile(id: string, dw: number, dh: number) {
+    const tile = layout.find((candidate) => candidate.id === id);
+    if (!tile) return;
+    changeTile(id, { w: tile.w + dw, h: tile.h + dh });
+  }
+
+  function tileStyle(tile: DashboardGridTile): string {
+    return `grid-column: ${tile.x + 1} / span ${tile.w}; grid-row: ${tile.y + 1} / span ${tile.h};`;
+  }
+
+  const rootStyle = $derived(`--st-dashboardGrid-columns: ${safeColumns}; --st-dashboardGrid-row-height: ${safeRowHeight}px; --st-dashboardGrid-gap: ${safeGap}px;`);
+  const classes = () => ["st-dashboardGrid", editable ? "st-dashboardGrid--editable" : undefined, className].filter(Boolean).join(" ");
+</script>
+
+<section class={classes()} style={rootStyle} aria-label={label}>
+  {#each layout as tile (tile.id)}
+    <article class="st-dashboardGrid__tile" style={tileStyle(tile)}>
+      <div class="st-dashboardGrid__content">
+        {#if tile.title}
+          <h3 class="st-dashboardGrid__title">{tile.title}</h3>
+        {/if}
+        {#if tile.value}
+          <p class="st-dashboardGrid__value">{tile.value}</p>
+        {/if}
+        {#if tile.description}
+          <p class="st-dashboardGrid__description">{tile.description}</p>
+        {/if}
+      </div>
+
+      {#if editable}
+        <div class="st-dashboardGrid__controls" aria-label="Layout controls for {tile.title ?? tile.id}">
+          <button type="button" onclick={() => moveTile(tile.id, 0, -1)} aria-label="Move {tile.title ?? tile.id} up">↑</button>
+          <button type="button" onclick={() => moveTile(tile.id, -1, 0)} aria-label="Move {tile.title ?? tile.id} left">←</button>
+          <button type="button" onclick={() => moveTile(tile.id, 1, 0)} aria-label="Move {tile.title ?? tile.id} right">→</button>
+          <button type="button" onclick={() => moveTile(tile.id, 0, 1)} aria-label="Move {tile.title ?? tile.id} down">↓</button>
+          <button type="button" onclick={() => resizeTile(tile.id, 1, 0)} aria-label="Widen {tile.title ?? tile.id}">W+</button>
+          <button type="button" onclick={() => resizeTile(tile.id, -1, 0)} aria-label="Narrow {tile.title ?? tile.id}">W-</button>
+          <button type="button" onclick={() => resizeTile(tile.id, 0, 1)} aria-label="Taller {tile.title ?? tile.id}">H+</button>
+          <button type="button" onclick={() => resizeTile(tile.id, 0, -1)} aria-label="Shorter {tile.title ?? tile.id}">H-</button>
+        </div>
+      {/if}
+    </article>
+  {/each}
+</section>
+
+<style>
+  .st-dashboardGrid {
+    --st-component-dashboardGrid-tile-background: var(--st-semantic-surface-default);
+    --st-component-dashboardGrid-tile-border-color: var(--st-semantic-border-subtle);
+    --st-component-dashboardGrid-tile-border-width: var(--st-component-card-anatomy-shape-borderWidth);
+    --st-component-dashboardGrid-tile-radius: var(--st-radius-lg);
+    --st-component-dashboardGrid-tile-shadow: var(--st-shadow-sm);
+    --st-component-dashboardGrid-title-fontSize: var(--st-component-field-labelTypography-size);
+    --st-component-dashboardGrid-title-fontWeight: var(--st-component-field-labelTypography-weight);
+    --st-component-dashboardGrid-title-letterSpacing: var(--st-component-field-labelTypography-letterSpacing);
+    --st-component-dashboardGrid-value-fontSize: var(--st-component-button-anatomy-density-lg-fontSize);
+    --st-component-dashboardGrid-value-fontWeight: var(--st-component-button-anatomy-typography-weight);
+    --st-component-dashboardGrid-value-lineHeight: var(--st-component-field-labelTypography-lineHeight);
+    --st-component-dashboardGrid-description-fontSize: var(--st-component-field-labelTypography-size);
+    --st-component-dashboardGrid-control-fontSize: var(--st-component-button-anatomy-density-sm-fontSize);
+    --st-component-dashboardGrid-control-fontWeight: var(--st-component-button-anatomy-typography-weight);
+    --st-component-dashboardGrid-control-size: var(--st-component-button-anatomy-density-sm-controlHeight);
+    --st-component-dashboardGrid-control-paddingInline: var(--st-spacing-2);
+    --st-component-dashboardGrid-control-focusWidth: var(--st-component-card-anatomy-shape-borderWidth);
+    display: grid;
+    gap: var(--st-dashboardGrid-gap);
+    grid-auto-rows: var(--st-dashboardGrid-row-height);
+    grid-template-columns: repeat(var(--st-dashboardGrid-columns), minmax(0, 1fr));
+    width: 100%;
+  }
+
+  .st-dashboardGrid__tile {
+    background: var(--st-component-dashboardGrid-tile-background);
+    border: var(--st-component-dashboardGrid-tile-border-width) solid var(--st-component-dashboardGrid-tile-border-color);
+    border-radius: var(--st-component-dashboardGrid-tile-radius);
+    box-shadow: var(--st-component-dashboardGrid-tile-shadow);
+    color: var(--st-semantic-text-primary);
+    min-width: 0;
+    overflow: hidden;
+    padding: var(--st-spacing-4);
+    position: relative;
+  }
+
+  .st-dashboardGrid--editable .st-dashboardGrid__tile {
+    outline: var(--st-component-dashboardGrid-tile-border-width) dashed var(--st-semantic-border-strong);
+    outline-offset: calc(-1 * var(--st-spacing-2));
+  }
+
+  .st-dashboardGrid__content {
+    display: grid;
+    gap: var(--st-spacing-2);
+  }
+
+  .st-dashboardGrid__title {
+    color: var(--st-semantic-text-secondary);
+    font-size: var(--st-component-dashboardGrid-title-fontSize);
+    font-weight: var(--st-component-dashboardGrid-title-fontWeight);
+    letter-spacing: var(--st-component-dashboardGrid-title-letterSpacing);
+    margin: 0;
+    text-transform: uppercase;
+  }
+
+  .st-dashboardGrid__value {
+    color: var(--st-semantic-text-primary);
+    font-size: var(--st-component-dashboardGrid-value-fontSize);
+    font-weight: var(--st-component-dashboardGrid-value-fontWeight);
+    line-height: var(--st-component-dashboardGrid-value-lineHeight);
+    margin: 0;
+  }
+
+  .st-dashboardGrid__description {
+    color: var(--st-semantic-text-secondary);
+    font-size: var(--st-component-dashboardGrid-description-fontSize);
+    margin: 0;
+  }
+
+  .st-dashboardGrid__controls {
+    align-items: center;
+    bottom: var(--st-spacing-2);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--st-spacing-1);
+    position: absolute;
+    right: var(--st-spacing-2);
+  }
+
+  .st-dashboardGrid__controls button {
+    align-items: center;
+    background: var(--st-semantic-surface-raised);
+    border: var(--st-component-dashboardGrid-tile-border-width) solid var(--st-semantic-border-subtle);
+    border-radius: var(--st-radius-sm);
+    color: var(--st-semantic-text-primary);
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    font-size: var(--st-component-dashboardGrid-control-fontSize);
+    font-weight: var(--st-component-dashboardGrid-control-fontWeight);
+    justify-content: center;
+    min-height: var(--st-component-dashboardGrid-control-size);
+    min-width: var(--st-component-dashboardGrid-control-size);
+    padding: 0 var(--st-component-dashboardGrid-control-paddingInline);
+  }
+
+  .st-dashboardGrid__controls button:focus-visible {
+    outline: var(--st-component-dashboardGrid-control-focusWidth) solid var(--st-semantic-border-interactive);
+    outline-offset: var(--st-component-control-anatomy-focus-offset);
+  }
+</style>

package/dist/DashboardGrid.svelte.d.ts

@@ -0,0 +1,24 @@
+export type DashboardGridTile = {
+    id: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    title?: string;
+    description?: string;
+    value?: string;
+};
+export type DashboardGridProps = {
+    tiles: DashboardGridTile[];
+    columns?: number;
+    rowHeight?: number;
+    gap?: number;
+    editable?: boolean;
+    label?: string;
+    onLayout?: (tiles: DashboardGridTile[]) => void;
+    class?: string;
+};
+declare const DashboardGrid: import("svelte").Component<DashboardGridProps, {}, "">;
+type DashboardGrid = ReturnType<typeof DashboardGrid>;
+export default DashboardGrid;
+//# sourceMappingURL=DashboardGrid.svelte.d.ts.map

package/dist/DashboardGrid.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardGrid.svelte.d.ts","sourceRoot":"","sources":["../src/lib/DashboardGrid.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAsHJ,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/DataTable.svelte

@@ -59,6 +59,7 @@
     sortNoneLabel?: string;
     previousLabel?: string;
     nextLabel?: string;
+    paginationLabel?: string;
     rangeLabel?: (range: { start: number; end: number; total: number }) => string;
     emptyLabel?: string;
     onRowClick?: (row: DataTableRow) => void;
@@ -84,6 +85,7 @@
     sortNoneLabel = "Not sorted",
     previousLabel = "Previous",
     nextLabel = "Next",
+    paginationLabel = "Pagination",
     rangeLabel = ({ start, end, total }) => `${start}–${end} of ${total}`,
     emptyLabel = "No data",
     onRowClick,
@@ -372,7 +374,7 @@
   {#if pageSize && pageSize > 0}
     <div class="st-dataTable__footer">
       <span class="st-dataTable__range" aria-live="polite">{rangeLabel(range)}</span>
-      <nav class="st-dataTable__pager" aria-label="Pagination">
+      <nav class="st-dataTable__pager" aria-label={paginationLabel}>
         <button
           type="button"
           class="st-dataTable__pagerBtn"

package/dist/DataTable.svelte.d.ts

@@ -47,6 +47,7 @@ type DataTableProps = Omit<HTMLTableAttributes, "class"> & {
     sortNoneLabel?: string;
     previousLabel?: string;
     nextLabel?: string;
+    paginationLabel?: string;
     rangeLabel?: (range: {
         start: number;
         end: number;

package/dist/DataTable.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.svelte.d.ts","sourceRoot":"","sources":["../src/lib/DataTable.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,YAAY,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEhF,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,YAAY;IAC/C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACxC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,cAAc,GAAG,IAAI,CAAC;CACnF;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEjE,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;CAC3B;AAGH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAKzD,KAAK,cAAc,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC,GAAG;IACzD,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuSJ,QAAA,MAAM,SAAS,mFAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"DataTable.svelte.d.ts","sourceRoot":"","sources":["../src/lib/DataTable.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,YAAY,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEhF,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,YAAY;IAC/C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACxC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,cAAc,GAAG,IAAI,CAAC;CACnF;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEjE,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;CAC3B;AAGH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAKzD,KAAK,cAAc,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC,GAAG;IACzD,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAwSJ,QAAA,MAAM,SAAS,mFAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/DatePicker.svelte

@@ -303,33 +303,34 @@
 </script>
 
 <div class={fieldClasses()} bind:this={hostEl} {...rest}>
-  <label class="st-field__control" for={fieldId}>
-    {#if label}<span class="st-field__label">{label}</span>{/if}
-    <span class={groupClasses()}>
-      <input
-        id={fieldId}
-        type="text"
-        readonly
-        class="st-datepicker__control"
-        value={formattedValue()}
-        placeholder={resolvedPlaceholder}
-        {disabled}
-        aria-invalid={isInvalid() ? "true" : undefined}
-        onclick={toggleOpen}
-      />
-      <button
-        type="button"
-        class="st-datepicker__trigger"
-        aria-label={resolvedOpenLabel}
-        aria-haspopup="dialog"
-        aria-expanded={open ? "true" : "false"}
-        {disabled}
-        onclick={toggleOpen}
-      >
-        <span aria-hidden="true">📅</span>
-      </button>
-    </span>
-  </label>
+  <div class="st-field__anchor">
+    <label class="st-field__control" for={fieldId}>
+      {#if label}<span class="st-field__label">{label}</span>{/if}
+      <span class={groupClasses()}>
+        <input
+          id={fieldId}
+          type="text"
+          readonly
+          class="st-datepicker__control"
+          value={formattedValue()}
+          placeholder={resolvedPlaceholder}
+          {disabled}
+          aria-invalid={isInvalid() ? "true" : undefined}
+          onclick={toggleOpen}
+        />
+        <button
+          type="button"
+          class="st-datepicker__trigger"
+          aria-label={resolvedOpenLabel}
+          aria-haspopup="dialog"
+          aria-expanded={open ? "true" : "false"}
+          {disabled}
+          onclick={toggleOpen}
+        >
+          <span aria-hidden="true">📅</span>
+        </button>
+      </span>
+    </label>
   {#if open}
     <div
       class="st-datepicker__panel"
@@ -397,6 +398,7 @@
       </div>
     </div>
   {/if}
+  </div>
   {#if errorText}
     <span class="st-field__error">{errorText}</span>
   {:else if helperText}
@@ -405,12 +407,15 @@
 </div>
 
 <style>
+  .st-field__anchor {
+    position: relative;
+  }
+
   .st-field {
     color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
     display: grid;
     gap: var(--st-component-field-gap, 0.5rem);
     max-width: var(--st-component-field-maxWidth, 28rem);
-    position: relative;
   }
 
   .st-field__control {

package/dist/DatePicker.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.svelte.d.ts","sourceRoot":"","sources":["../src/lib/DatePicker.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;CAClB,CAAC;AAGJ,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,IAAI,GAAG,eAAe,GAAG,IAAI,CAAC;IACtC,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AA4UJ,QAAA,MAAM,UAAU,0DAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"DatePicker.svelte.d.ts","sourceRoot":"","sources":["../src/lib/DatePicker.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;CAClB,CAAC;AAGJ,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,IAAI,GAAG,eAAe,GAAG,IAAI,CAAC;IACtC,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AA8UJ,QAAA,MAAM,UAAU,0DAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/Density2DChart.svelte

@@ -23,6 +23,8 @@
     | "category1" | "category2" | "category3" | "category4"
     | "category5" | "category6" | "category7" | "category8";
 
+  export type Density2DChartScale = "categorical" | "sequential";
+
   export type Density2DPoint = {
     x: number;
     y: number;
@@ -36,6 +38,7 @@
   type Density2DChartProps = {
     data: Density2DPoint[];
     bins?: number;
+    scale?: Density2DChartScale;
     label?: string;
     width?: number;
     height?: number;
@@ -46,6 +49,7 @@
   let {
     data = [],
     bins = 12,
+    scale = "sequential",
     label,
     width,
     height = 320,
@@ -69,6 +73,10 @@
     return TONES[index];
   }
 
+  function normalizedScale(value: Density2DChartScale | undefined): Density2DChartScale {
+    return value === "categorical" ? "categorical" : "sequential";
+  }
+
   function niceTicks(min: number, max: number, target = 5): number[] {
     if (!Number.isFinite(min) || !Number.isFinite(max) || min === max) {
       return [Number.isFinite(max) ? max : 0];
@@ -100,6 +108,7 @@
   }
 
   let hoveredKey: string | null = $state(null);
+  const resolvedScale = $derived(normalizedScale(scale));
 
   const plotWidth = $derived(Math.max(resolvedWidth - MARGIN.left - MARGIN.right, 1));
   const plotHeight = $derived(Math.max(height - MARGIN.top - MARGIN.bottom, 1));
@@ -246,7 +255,7 @@
     return binCells.find((b) => b.key === hoveredKey) ?? null;
   });
 
-  const classes = () => ["st-density2DChart", className].filter(Boolean).join(" ");
+  const classes = () => ["st-density2DChart", `st-density2DChart--${resolvedScale}`, className].filter(Boolean).join(" ");
 </script>
 
 <div class={classes()}>

package/dist/Density2DChart.svelte.d.ts

@@ -19,6 +19,7 @@
  *   class   string
  */
 export type Density2DTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type Density2DChartScale = "categorical" | "sequential";
 export type Density2DPoint = {
     x: number;
     y: number;
@@ -27,6 +28,7 @@ export type Density2DPoint = {
 type Density2DChartProps = {
     data: Density2DPoint[];
     bins?: number;
+    scale?: Density2DChartScale;
     label?: string;
     width?: number;
     height?: number;

package/dist/Density2DChart.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Density2DChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Density2DChart.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,MAAM,aAAa,GACrB,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,cAAc,GAAG;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAMF,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA6QJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"Density2DChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Density2DChart.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,MAAM,aAAa,GACrB,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,mBAAmB,GAAG,aAAa,GAAG,YAAY,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAMF,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAmRJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/Dropdown.svelte

@@ -30,12 +30,22 @@
   }: DropdownProps = $props();
 
   let host: HTMLDivElement | undefined = $state();
+  let buttonEl: HTMLButtonElement | undefined = $state();
   let expanded = $state(false);
   let currentValue = $state<string | undefined>(undefined);
   let syncedOpen = $state<boolean | undefined>(undefined);
   let syncedValue = $state<string | undefined>(undefined);
+  let listPos = $state({ top: 0, left: 0, width: 0 });
+
   const classes = () => ["st-dropdown", className].filter(Boolean).join(" ");
   const selectedLabel = () => options.find((option) => option.value === currentValue)?.label ?? placeholder;
+
+  function updateListPos() {
+    if (!buttonEl) return;
+    const r = buttonEl.getBoundingClientRect();
+    listPos = { top: r.bottom + 4, left: r.left, width: r.width };
+  }
+
   const selectOption = (option: DropdownOption) => {
     if (option.disabled) return;
     currentValue = option.value;
@@ -60,6 +70,14 @@
     if (host && target && !host.contains(target)) close();
   }
 
+  function onWindowScroll() {
+    if (expanded) updateListPos();
+  }
+
+  function onWindowResize() {
+    if (expanded) updateListPos();
+  }
+
   $effect(() => {
     if (syncedOpen !== open) {
       expanded = open;
@@ -73,19 +91,24 @@
       syncedValue = value;
     }
   });
+
+  $effect(() => {
+    if (expanded) updateListPos();
+  });
 </script>
 
-<svelte:window onkeydown={onWindowKeydown} onpointerdown={onWindowPointerDown} />
+<svelte:window onkeydown={onWindowKeydown} onpointerdown={onWindowPointerDown} onscroll={onWindowScroll} onresize={onWindowResize} />
 
 <div {...rest} bind:this={host} class={classes()}>
   <button
+    bind:this={buttonEl}
     class="st-dropdown__button"
     type="button"
     aria-haspopup="listbox"
     aria-expanded={expanded}
-    onclick={() => (expanded = !expanded)}
+    onclick={() => { expanded = !expanded; if (expanded) updateListPos(); }}
   >
-    <span>{label}: {selectedLabel()}</span>
+    <span class="st-dropdown__label">{label}</span>: <span class="st-dropdown__value">{selectedLabel()}</span>
     <ChevronDown
       class={`st-dropdown__icon ${expanded ? "st-dropdown__icon--open" : ""}`}
       size={18}
@@ -94,7 +117,12 @@
     />
   </button>
   {#if expanded}
-    <div class="st-dropdown__list" role="listbox" aria-label={label}>
+    <div
+      class="st-dropdown__list"
+      role="listbox"
+      aria-label={label}
+      style="top:{listPos.top}px;left:{listPos.left}px;min-width:{listPos.width}px"
+    >
       {#each options as option (option.value)}
         <button
           class="st-dropdown__option"
@@ -154,12 +182,8 @@
     border-radius: var(--st-component-dropdown-radius, 0.375rem);
     box-shadow: var(--st-component-dropdown-shadow, 0 8px 24px rgb(15 23 42 / 0.14));
     display: grid;
-    left: 0;
-    margin-top: var(--st-spacing-1, 0.25rem);
-    min-width: 100%;
     overflow: hidden;
-    position: absolute;
-    top: 100%;
+    position: fixed;
     z-index: var(--st-component-popover-zIndex, 80);
   }
 

package/dist/Dropdown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Dropdown.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAChF,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAsFJ,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Dropdown.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAChF,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AA4GJ,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/EventFeedPanel.svelte

@@ -39,17 +39,17 @@
     /** Message principal affiché. */
     message: string;
   };
-</script>
 
-<script lang="ts">
-  type EventFeedPanelProps = {
+  export type EventFeedPanelProps = {
     data: EventFeedPanelEvent[];
     label?: string;
     maxHeight?: number;
     height?: number;
     class?: string;
   };
+</script>
 
+<script lang="ts">
   let {
     data = [],
     label,

package/dist/EventFeedPanel.svelte.d.ts

@@ -32,7 +32,7 @@ export type EventFeedPanelEvent = {
     /** Message principal affiché. */
     message: string;
 };
-type EventFeedPanelProps = {
+export type EventFeedPanelProps = {
     data: EventFeedPanelEvent[];
     label?: string;
     maxHeight?: number;

package/dist/EventFeedPanel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EventFeedPanel.svelte.d.ts","sourceRoot":"","sources":["../src/lib/EventFeedPanel.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,MAAM,sBAAsB,GAC9B,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,GACP,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAElB,MAAM,MAAM,mBAAmB,GAAG;IAChC,oEAAoE;IACpE,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,mEAAmE;IACnE,QAAQ,EAAE,sBAAsB,CAAC;IACjC,iCAAiC;IACjC,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,mBAAmB,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA+EJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"EventFeedPanel.svelte.d.ts","sourceRoot":"","sources":["../src/lib/EventFeedPanel.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,MAAM,sBAAsB,GAC9B,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,GACP,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAElB,MAAM,MAAM,mBAAmB,GAAG;IAChC,oEAAoE;IACpE,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,mEAAmE;IACnE,QAAQ,EAAE,sBAAsB,CAAC;IACjC,iCAAiC;IACjC,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,mBAAmB,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA8EJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/FileUploader.svelte

@@ -236,7 +236,7 @@
             {/if}
           </span>
           <span class="st-fileUploader__itemMeta">
-            <span class="st-fileUploader__itemName">{item.file.name}</span>
+            <span class="st-fileUploader__itemName st-fileUploader__name">{item.file.name}</span>
             <span class="st-fileUploader__itemSize">{formatSize(item.file.size)}</span>
             {#if item.status === "error" && item.error}
               <span class="st-fileUploader__itemError">{item.error}</span>
@@ -274,7 +274,7 @@
             {/if}
           </span>
           <span class="st-fileUploader__itemMeta">
-            <span class="st-fileUploader__itemName">{file.name}</span>
+            <span class="st-fileUploader__itemName st-fileUploader__name">{file.name}</span>
             <span class="st-fileUploader__itemSize">{formatSize(file.size)}</span>
             {#if itemError}
               <span class="st-fileUploader__itemError">{itemError}</span>
@@ -407,7 +407,10 @@
   }
 
   .st-fileUploader__trigger:hover:not(:disabled) {
-    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
+    background: var(
+      --st-component-button-anatomy-states-hover-bg,
+      color-mix(in srgb, var(--st-semantic-action-primary) 85%, black)
+    );
   }
 
   .st-fileUploader__trigger:focus-visible {
@@ -491,6 +494,7 @@
 
   .st-fileUploader__itemMeta {
     display: grid;
+    flex: 1 1 0;
     gap: 0.125rem;
     min-width: 0;
   }