@simplysm/solid 13.0.75 → 13.0.77

package/src/components/features/shared-data/SharedDataSelect.tsx

@@ -1,5 +1,4 @@
 import {
-  children as resolveChildren,
   type Component,
   createMemo,
   For,
@@ -8,73 +7,48 @@ import {
   splitProps,
 } from "solid-js";
 import { IconSearch } from "@tabler/icons-solidjs";
-import { type SharedDataAccessor } from "../../../providers/shared-data/SharedDataContext";
+import { type SharedDataAccessor } from "../../../providers/shared-data/SharedDataProvider";
 import { Select, type SelectProps } from "../../form-control/select/Select";
 import { Icon } from "../../display/Icon";
-import { useDialog } from "../../disclosure/DialogContext";
-import { useDialogInstance } from "../../disclosure/DialogInstanceContext";
-import { useI18n } from "../../../providers/i18n/I18nContext";
-import { type ComponentSize } from "../../../styles/tokens.styles";
+import { type DialogShowOptions, useDialog } from "../../disclosure/Dialog";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
+import { type ComponentSize } from "../../../styles/control.styles";
 import {
-  type DataSelectDialogResult,
-  type DialogConfig,
+  type DialogPropsField,
+  type SelectDialogBaseProps,
 } from "../data-select-button/DataSelectButton";
+import { createSlot } from "../../../helpers/createSlot";
+import { createSlots } from "../../../helpers/createSlots";
 
-// -- Slot detection --
-const ITEM_TEMPLATE_BRAND = Symbol("SharedDataSelect.ItemTemplate");
-const ACTION_BRAND = Symbol("SharedDataSelect.Action");
-
-interface ItemTemplateDef {
-  __brand: typeof ITEM_TEMPLATE_BRAND;
+// -- Slot definitions --
+interface ItemTemplateProps {
   children: (item: any, index: number, depth: number) => JSX.Element;
 }
 
-interface ActionDef {
-  __brand: typeof ACTION_BRAND;
-  children: JSX.Element;
+interface ActionProps {
+  children?: JSX.Element;
   onClick?: (e: MouseEvent) => void;
 }
 
-function isItemTemplateDef(v: unknown): v is ItemTemplateDef {
-  return v != null && typeof v === "object" && "__brand" in v && (v as any).__brand === ITEM_TEMPLATE_BRAND;
-}
-
-function isActionDef(v: unknown): v is ActionDef {
-  return v != null && typeof v === "object" && "__brand" in v && (v as any).__brand === ACTION_BRAND;
-}
+const [ItemTemplate, createItemTemplateSlotAccessor] = createSlot<ItemTemplateProps>();
+const [ActionSlot, createActionSlotsAccessor] = createSlots<ActionProps>();
 
-// -- Compound components --
-const ItemTemplate: Component<{
-  children: (item: any, index: number, depth: number) => JSX.Element;
-}> = (props) => {
-  // eslint-disable-next-line solid/reactivity -- factory function, not reactive JSX
-  return (() => ({
-    __brand: ITEM_TEMPLATE_BRAND,
-    children: props.children,
-  })) as unknown as JSX.Element;
-};
-
-const Action: Component<{
-  children?: JSX.Element;
-  onClick?: (e: MouseEvent) => void;
-}> = (props) => {
-  // eslint-disable-next-line solid/reactivity -- factory function, not reactive JSX
-  return (() => ({
-    __brand: ACTION_BRAND,
-    children: props.children,
-    onClick: props.onClick,
-  })) as unknown as JSX.Element;
+const Action: Component<ActionProps> = (props) => {
+  return ActionSlot(props);
 };
 
 /** SharedDataSelect Props */
-export interface SharedDataSelectProps<TItem> {
+export type SharedDataSelectProps<
+  TItem,
+  TKey extends string | number = string | number,
+  TDialogProps extends SelectDialogBaseProps = SelectDialogBaseProps,
+> = {
   /** Shared data accessor */
   data: SharedDataAccessor<TItem>;
-
   /** Currently selected key value (translated to item internally) */
-  value?: unknown;
+  value?: TKey | TKey[];
   /** Value change callback (receives key, not item) */
-  onValueChange?: (value: unknown) => void;
+  onValueChange?: (value: TKey | TKey[] | undefined) => void;
   /** Multiple selection mode */
   multiple?: boolean;
   /** Required input */
@@ -85,39 +59,38 @@ export interface SharedDataSelectProps<TItem> {
   size?: ComponentSize;
   /** Borderless style */
   inset?: boolean;
-
   /** Item filter function */
   filterFn?: (item: TItem, index: number) => boolean;
-  /** Selection dialog configuration */
-  dialog?: DialogConfig;
-
+  /** Selection dialog component */
+  dialog?: Component<TDialogProps>;
+  /** Dialog options (header, size, etc.) */
+  dialogOptions?: DialogShowOptions;
   /** Compound children: ItemTemplate, Action */
   children: JSX.Element;
-}
-
-interface SharedDataSelectComponent {
-  <TItem>(props: SharedDataSelectProps<TItem>): JSX.Element;
-  ItemTemplate: typeof ItemTemplate;
-  Action: typeof Action;
-}
-
-const SharedDataSelectBase = <TItem,>(props: SharedDataSelectProps<TItem>): JSX.Element => {
+} & DialogPropsField<TDialogProps>;
+
+const SharedDataSelectBase = <
+  TItem,
+  TKey extends string | number = string | number,
+  TDialogProps extends SelectDialogBaseProps = SelectDialogBaseProps,
+>(
+  props: SharedDataSelectProps<TItem, TKey, TDialogProps>,
+): JSX.Element => {
   const [local, rest] = splitProps(props, [
-    "data", "filterFn", "dialog", "children",
+    "data",
+    "filterFn",
+    "dialog",
+    "dialogProps",
+    "dialogOptions",
+    "children",
   ]);
 
   const i18n = useI18n();
   const dialog = useDialog();
 
-  // Resolve compound children
-  const resolved = resolveChildren(() => local.children);
-  const defs = createMemo(() => {
-    const arr = resolved.toArray();
-    return {
-      itemTemplate: arr.find(isItemTemplateDef) as unknown as ItemTemplateDef | undefined,
-      actions: arr.filter(isActionDef) as unknown as ActionDef[],
-    };
-  });
+  // Slot accessors
+  const [itemTemplateSlot, ItemTemplateProvider] = createItemTemplateSlotAccessor();
+  const [actionSlots, ActionsProvider] = createActionSlotsAccessor();
 
   // Items with filterFn applied
   const items = createMemo(() => {
@@ -127,54 +100,48 @@ const SharedDataSelectBase = <TItem,>(props: SharedDataSelectProps<TItem>): JSX.
   });
 
   // Normalize value to keys array
-  const normalizeKeys = (value: unknown): (string | number)[] => {
+  const normalizeKeys = (value: TKey | TKey[] | undefined | null): TKey[] => {
     if (value === undefined || value === null) return [];
     if (Array.isArray(value)) return value;
-    return [value as string | number];
+    return [value];
   };
 
   // Translate key(s) to item(s) for Select's value prop
-  const keyToItem = (key: string | number): TItem | undefined => {
+  const keyToItem = (key: TKey): TItem | undefined => {
     return local.data.get(key);
   };
 
   const valueAsItem = createMemo((): TItem | TItem[] | undefined => {
-    const key = rest.value;
-    if (key === undefined || key === null) return undefined;
+    const key = rest.value as TKey | TKey[] | undefined;
+    if (key === undefined) return undefined;
     if (Array.isArray(key)) {
-      return key.map((k) => keyToItem(k as string | number)).filter((v): v is TItem => v !== undefined);
+      return key
+        .map((k) => keyToItem(k))
+        .filter((v): v is TItem => v !== undefined);
     }
-    return keyToItem(key as string | number);
+    return keyToItem(key);
   });
 
   // Translate item back to key for onValueChange callback
-  const itemToKey = (item: TItem | TItem[] | undefined): unknown => {
+  const itemToKey = (item: TItem | TItem[] | undefined): TKey | TKey[] | undefined => {
     if (item === undefined || item === null) return undefined;
-    if (Array.isArray(item)) return item.map((i) => local.data.getKey(i));
-    return local.data.getKey(item);
+    if (Array.isArray(item)) return item.map((i) => local.data.getKey(i) as TKey);
+    return local.data.getKey(item) as TKey;
   };
 
   // Open dialog and handle selection result
   const handleOpenDialog = async () => {
     if (!local.dialog) return;
 
-    const dialogConfig = local.dialog;
-    const result = await dialog.show<DataSelectDialogResult<string | number>>(
-      () => {
-        const instance = useDialogInstance<DataSelectDialogResult<string | number>>();
-        return (
-          <dialogConfig.component
-            {...(dialogConfig.props ?? {})}
-            selectMode={rest.multiple ? "multiple" : "single"}
-            selectedKeys={normalizeKeys(rest.value)}
-            onSelect={(r: { keys: (string | number)[] }) =>
-              instance?.close({ selectedKeys: r.keys })
-            }
-          />
-        );
+    const result = (await dialog.show(
+      local.dialog as any,
+      {
+        ...((local as any).dialogProps ?? {}),
+        selectionMode: rest.multiple ? "multiple" : "single",
+        selectedKeys: normalizeKeys(rest.value),
       },
-      dialogConfig.option ?? {},
-    );
+      local.dialogOptions,
+    )) as { selectedKeys: TKey[] } | undefined;
 
     if (result) {
       const newKeys = result.selectedKeys;
@@ -192,7 +159,6 @@ const SharedDataSelectBase = <TItem,>(props: SharedDataSelectProps<TItem>): JSX.
     },
     get onValueChange() {
       if (!rest.onValueChange) return undefined;
-      // eslint-disable-next-line solid/reactivity -- inside getter, tracked scope
       return (item: TItem | TItem[] | undefined) => {
         rest.onValueChange!(itemToKey(item));
       };
@@ -200,43 +166,47 @@ const SharedDataSelectBase = <TItem,>(props: SharedDataSelectProps<TItem>): JSX.
     get items() {
       return items();
     },
-    get getChildren() {
+    get itemChildren() {
       if (!local.data.getParentKey) return undefined;
-      // eslint-disable-next-line solid/reactivity -- return function is called within Select's internal JSX tracked scope
       return (item: TItem) => {
         const key = local.data.getKey(item);
-        return items().filter((child) => local.data.getParentKey!(child) === key);
+        return items().filter((child: TItem) => local.data.getParentKey!(child) === key);
       };
     },
-    get getSearchText() {
-      return local.data.getSearchText;
+    get itemSearchText() {
+      return local.data.itemSearchText;
     },
-    get getIsHidden() {
-      return local.data.getIsHidden;
+    get isItemHidden() {
+      return local.data.isItemHidden;
     },
-  }) as unknown as SelectProps;
+  }) as SelectProps<TItem>;
 
   return (
-    <Select {...selectProps}>
-      {defs().itemTemplate && (
-        <Select.ItemTemplate>{defs().itemTemplate!.children}</Select.ItemTemplate>
-      )}
-      {local.dialog && (
-        <Select.Action onClick={() => void handleOpenDialog()} aria-label={i18n.t("sharedDataSelect.search")}>
-          <Icon icon={IconSearch} />
-        </Select.Action>
-      )}
-      <For each={defs().actions}>
-        {(action) => (
-          <Select.Action onClick={action.onClick}>
-            {action.children}
-          </Select.Action>
-        )}
-      </For>
-    </Select>
+    <ItemTemplateProvider>
+      <ActionsProvider>
+        {local.children}
+        <Select {...selectProps}>
+          {itemTemplateSlot() && (
+            <Select.ItemTemplate>{itemTemplateSlot()!.children}</Select.ItemTemplate>
+          )}
+          {local.dialog && (
+            <Select.Action
+              onClick={() => void handleOpenDialog()}
+              aria-label={i18n.t("sharedDataSelect.search")}
+            >
+              <Icon icon={IconSearch} />
+            </Select.Action>
+          )}
+          <For each={actionSlots()}>
+            {(action) => <Select.Action onClick={action.onClick}>{action.children}</Select.Action>}
+          </For>
+        </Select>
+      </ActionsProvider>
+    </ItemTemplateProvider>
   );
 };
 
-export const SharedDataSelect: SharedDataSelectComponent = SharedDataSelectBase as any;
-SharedDataSelect.ItemTemplate = ItemTemplate;
-SharedDataSelect.Action = Action;
+export const SharedDataSelect = Object.assign(SharedDataSelectBase, {
+  ItemTemplate,
+  Action,
+});

package/src/components/features/shared-data/SharedDataSelectButton.tsx

@@ -1,17 +1,21 @@
-import { type JSX, splitProps } from "solid-js";
-import { type SharedDataAccessor } from "../../../providers/shared-data/SharedDataContext";
+import { type Component, type JSX, splitProps } from "solid-js";
+import { type SharedDataAccessor } from "../../../providers/shared-data/SharedDataProvider";
 import {
   DataSelectButton,
   type DataSelectButtonProps,
-  type DialogConfig,
+  type SelectDialogBaseProps,
+  type DialogPropsField,
 } from "../data-select-button/DataSelectButton";
-import { type ComponentSize } from "../../../styles/tokens.styles";
+import { type DialogShowOptions } from "../../disclosure/Dialog";
+import { type ComponentSize } from "../../../styles/control.styles";
 
 /** SharedDataSelectButton Props */
-export interface SharedDataSelectButtonProps<TItem> {
+export type SharedDataSelectButtonProps<
+  TItem,
+  TDialogProps extends SelectDialogBaseProps = SelectDialogBaseProps,
+> = {
   /** Shared data accessor */
   data: SharedDataAccessor<TItem>;
-
   /** Currently selected key(s) (single or multiple) */
   value?: DataSelectButtonProps<TItem>["value"];
   /** Value change callback */
@@ -26,23 +30,27 @@ export interface SharedDataSelectButtonProps<TItem> {
   size?: ComponentSize;
   /** Borderless style */
   inset?: boolean;
-
-  /** Selection dialog configuration */
-  dialog: DialogConfig;
+  /** Selection dialog component */
+  dialog: Component<TDialogProps>;
+  /** Dialog options (header, size, etc.) */
+  dialogOptions?: DialogShowOptions;
   /** Item rendering function */
   children: (item: TItem) => JSX.Element;
-}
+} & DialogPropsField<TDialogProps>;
 
-export function SharedDataSelectButton<TItem>(
-  props: SharedDataSelectButtonProps<TItem>,
+export function SharedDataSelectButton<
+  TItem,
+  TDialogProps extends SelectDialogBaseProps = SelectDialogBaseProps,
+>(
+  props: SharedDataSelectButtonProps<TItem, TDialogProps>,
 ): JSX.Element {
   const [local, rest] = splitProps(props, ["data", "children"]);
 
   return (
     <DataSelectButton
-      load={(keys) => local.data.items().filter((item) => keys.includes(local.data.getKey(item)))}
+      load={(keys) => local.data.items().filter((item: TItem) => keys.includes(local.data.getKey(item)))}
       renderItem={local.children}
-      {...rest}
+      {...(rest as any)}
     />
   );
 }

package/src/components/features/shared-data/SharedDataSelectList.tsx

@@ -1,19 +1,45 @@
-import { createEffect, createMemo, createSignal, For, type JSX, Show, splitProps } from "solid-js";
+import { createContext, createEffect, createMemo, createSignal, For, onCleanup, type JSX, Show, splitProps, useContext } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import { type SharedDataAccessor } from "../../../providers/shared-data/SharedDataContext";
+import { type SharedDataAccessor } from "../../../providers/shared-data/SharedDataProvider";
 import { List } from "../../data/list/List";
 import { Pagination } from "../../data/Pagination";
 import { TextInput } from "../../form-control/field/TextInput";
-import { useI18n } from "../../../providers/i18n/I18nContext";
-import { textMuted } from "../../../styles/tokens.styles";
-import { createSlotSignal } from "../../../hooks/createSlotSignal";
-import {
-  SharedDataSelectListContext,
-  type SharedDataSelectListContextValue,
-  SharedDataSelectListItemTemplate,
-  SharedDataSelectListFilter,
-} from "./SharedDataSelectListContext";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
+import { text } from "../../../styles/base.styles";
+import { gap } from "../../../styles/control.styles";
+import { createSlot } from "../../../helpers/createSlot";
+
+// ─── Context ──────────────────────────────────────────────
+
+export interface SharedDataSelectListContextValue {
+  setItemTemplate: (fn: ((...args: unknown[]) => JSX.Element) | undefined) => void;
+}
+
+const SharedDataSelectListContext = createContext<SharedDataSelectListContextValue>();
+
+function useSharedDataSelectListContext(): SharedDataSelectListContextValue {
+  const context = useContext(SharedDataSelectListContext);
+  if (!context) {
+    throw new Error("useSharedDataSelectListContext can only be used inside SharedDataSelectList");
+  }
+  return context;
+}
+
+// ─── Sub-components ───────────────────────────────────────
+
+/** ItemTemplate sub-component — registers item render function */
+const SharedDataSelectListItemTemplate = <TItem,>(props: {
+  children: (item: TItem, index: number) => JSX.Element;
+}) => {
+  const ctx = useSharedDataSelectListContext();
+  ctx.setItemTemplate(props.children as (...args: unknown[]) => JSX.Element);
+  onCleanup(() => ctx.setItemTemplate(undefined));
+  return null;
+};
+
+/** Filter sub-component — registers custom filter UI slot */
+const [SharedDataSelectListFilter, createFilterSlotAccessor] = createSlot<{ children: JSX.Element }>();
 
 /** SharedDataSelectList Props */
 export interface SharedDataSelectListProps<TItem> {
@@ -47,19 +73,9 @@ export interface SharedDataSelectListProps<TItem> {
   style?: JSX.CSSProperties;
 }
 
-// ─── Styles ──────────────────────────────────────────────
-
-const containerClass = clsx("flex-col gap-1");
-
 // ─── Component ───────────────────────────────────────────
 
-export interface SharedDataSelectListComponent {
-  <TItem>(props: SharedDataSelectListProps<TItem>): JSX.Element;
-  ItemTemplate: typeof SharedDataSelectListItemTemplate;
-  Filter: typeof SharedDataSelectListFilter;
-}
-
-export const SharedDataSelectList: SharedDataSelectListComponent = (<TItem,>(
+const SharedDataSelectListInner = (<TItem,>(
   props: SharedDataSelectListProps<TItem>,
 ): JSX.Element => {
   const [local, rest] = splitProps(props, [
@@ -81,7 +97,7 @@ export const SharedDataSelectList: SharedDataSelectListComponent = (<TItem,>(
 
   // ─── Slot signals ──────────────────────────────────────
 
-  const [filter, setFilter] = createSlotSignal();
+  const [filter, FilterProvider] = createFilterSlotAccessor();
   const [itemTemplate, _setItemTemplate] = createSignal<
     ((item: TItem, index: number) => JSX.Element) | undefined
   >();
@@ -90,7 +106,6 @@ export const SharedDataSelectList: SharedDataSelectListComponent = (<TItem,>(
 
   const contextValue: SharedDataSelectListContextValue = {
     setItemTemplate,
-    setFilter,
   };
 
   // ─── Search state ──────────────────────────────────────
@@ -113,20 +128,20 @@ export const SharedDataSelectList: SharedDataSelectListComponent = (<TItem,>(
   const filteredItems = createMemo(() => {
     let result = local.data.items();
 
-    // getIsHidden filter
-    const isHidden = local.data.getIsHidden;
+    // isItemHidden filter
+    const isHidden = local.data.isItemHidden;
     if (isHidden) {
-      result = result.filter((item) => !isHidden(item));
+      result = result.filter((item: TItem) => !isHidden(item));
     }
 
-    // Search filter (only when Filter compound is absent and getSearchText exists)
-    const getSearchText = local.data.getSearchText;
-    if (!filter() && getSearchText && searchText()) {
+    // Search filter (only when Filter compound is absent and itemSearchText exists)
+    const itemSearchText = local.data.itemSearchText;
+    if (!filter() && itemSearchText && searchText()) {
       const terms = searchText().trim().split(" ").filter(Boolean);
       if (terms.length > 0) {
-        result = result.filter((item) => {
-          const text = getSearchText(item).toLowerCase();
-          return terms.every((t) => text.includes(t.toLowerCase()));
+        result = result.filter((item: TItem) => {
+          const itemText = itemSearchText(item).toLowerCase();
+          return terms.every((t) => itemText.includes(t.toLowerCase()));
         });
       }
     }
@@ -134,7 +149,7 @@ export const SharedDataSelectList: SharedDataSelectListComponent = (<TItem,>(
     // filterFn
     if (local.filterFn) {
       const fn = local.filterFn;
-      result = result.filter((item, index) => fn(item, index));
+      result = result.filter((item: TItem, index: number) => fn(item, index));
     }
 
     return result;
@@ -185,20 +200,21 @@ export const SharedDataSelectList: SharedDataSelectListComponent = (<TItem,>(
   // ─── Render ────────────────────────────────────────────
 
   return (
+    <FilterProvider>
     <SharedDataSelectListContext.Provider value={contextValue}>
       {/* Render children inside Provider so sub-components (ItemTemplate, Filter) can access context */}
       {local.children}
       <div
         {...rest}
         data-shared-data-select-list
-        class={twMerge(containerClass, local.class)}
+        class={twMerge(clsx("flex-col", gap.default), local.class)}
         style={local.style}
       >
         {/* Header */}
         <Show when={local.header != null}>{local.header}</Show>
 
-        {/* Search input: when Filter compound is absent and getSearchText exists */}
-        <Show when={!filter() && local.data.getSearchText}>
+        {/* Search input: when Filter compound is absent and itemSearchText exists */}
+        <Show when={!filter() && local.data.itemSearchText}>
           <div class={"p-1"}>
             <TextInput
               value={searchText()}
@@ -210,7 +226,7 @@ export const SharedDataSelectList: SharedDataSelectListComponent = (<TItem,>(
         </Show>
 
         {/* Custom Filter */}
-        <Show when={filter()}>{filter()!()}</Show>
+        <Show when={filter()}>{filter()!.children}</Show>
 
         {/* Pagination */}
         <Show when={local.pageSize != null && totalPageCount() > 1}>
@@ -231,7 +247,7 @@ export const SharedDataSelectList: SharedDataSelectListComponent = (<TItem,>(
               disabled={local.disabled}
               onClick={() => handleSelect(undefined)}
             >
-              <span class={textMuted}>{i18n.t("sharedDataSelectList.unspecified")}</span>
+              <span class={text.muted}>{i18n.t("sharedDataSelectList.unspecified")}</span>
             </List.Item>
           </Show>
 
@@ -250,8 +266,11 @@ export const SharedDataSelectList: SharedDataSelectListComponent = (<TItem,>(
         </List>
       </div>
     </SharedDataSelectListContext.Provider>
+    </FilterProvider>
   );
-}) as SharedDataSelectListComponent;
+});
 
-SharedDataSelectList.ItemTemplate = SharedDataSelectListItemTemplate;
-SharedDataSelectList.Filter = SharedDataSelectListFilter;
+export const SharedDataSelectList = Object.assign(SharedDataSelectListInner, {
+  ItemTemplate: SharedDataSelectListItemTemplate,
+  Filter: SharedDataSelectListFilter,
+});

package/src/components/feedback/Progress.tsx

@@ -1,11 +1,9 @@
 import { type JSX, type ParentComponent, Show, splitProps } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import {
-  type ComponentSizeCompact,
-  type SemanticTheme,
-  themeTokens,
-} from "../../styles/tokens.styles";
+import { bg, border } from "../../styles/base.styles";
+import { type ComponentSize, pad } from "../../styles/control.styles";
+import { type SemanticTheme, themeTokens } from "../../styles/theme.styles";
 
 export type ProgressTheme = SemanticTheme;
 
@@ -13,26 +11,18 @@ export interface ProgressProps extends JSX.HTMLAttributes<HTMLDivElement> {
   /** Progress value (range 0-1, 0 = 0%, 1 = 100%) */
   value: number;
   theme?: ProgressTheme;
-  size?: ComponentSizeCompact;
+  size?: ComponentSize;
   inset?: boolean;
 }
 
-const baseClass = clsx(
-  "relative block w-full",
-  "overflow-hidden",
-  "rounded",
-  "bg-base-200 dark:bg-base-700",
-  "border border-base-200 dark:border-base-700",
-);
-
-const sizeClasses: Record<"default" | ComponentSizeCompact, string> = {
-  default: "py-1 px-2",
-  sm: "py-0.5 px-2",
-  lg: "py-2 px-3",
+const sizeClasses: Record<ComponentSize, string> = {
+  default: pad.default,
+  xs: pad.xs,
+  sm: pad.sm,
+  lg: pad.lg,
+  xl: pad.xl,
 };
 
-const insetClass = clsx("rounded-none", "border-0", "bg-transparent");
-
 const barThemeClasses: Record<ProgressTheme, string> = Object.fromEntries(
   Object.entries(themeTokens).map(([theme, t]) => [theme, t.solid]),
 ) as Record<ProgressTheme, string>;
@@ -42,7 +32,12 @@ export const Progress: ParentComponent<ProgressProps> = (props) => {
 
   const getClassName = () => {
     const size = local.size ?? "default";
-    return twMerge(baseClass, sizeClasses[size], local.inset ? insetClass : undefined, local.class);
+    return twMerge(
+      clsx("relative block w-full overflow-hidden rounded", bg.subtle, "border", border.default),
+      sizeClasses[size],
+      local.inset ? "rounded-none border-0 bg-transparent" : undefined,
+      local.class,
+    );
   };
 
   const getBarClassName = () => {