@a4ui/core 0.38.1 → 0.39.0

package/src/ui/TreeSelect.tsx

@@ -97,14 +97,14 @@ export function TreeSelect(props: TreeSelectProps): JSX.Element {
             'flex items-center gap-1.5 rounded-md px-2 py-1 text-sm text-foreground hover:bg-muted cursor-pointer',
             isSelected() && 'bg-accent text-accent-foreground',
           )}
-          style={{ 'padding-left': `${nodeProps.depth * 1 + 0.5}rem` }}
+          style={{ 'padding-inline-start': `${nodeProps.depth * 1 + 0.5}rem` }}
           onClick={() => (hasChildren() ? toggle(nodeProps.node.id) : select(nodeProps.node))}
         >
           <Show when={hasChildren()} fallback={<span class="h-3.5 w-3.5 shrink-0" aria-hidden="true" />}>
             <ChevronRight
               class={cn(
                 'h-3.5 w-3.5 shrink-0 transition-transform duration-200',
-                isExpanded() && 'rotate-90',
+                isExpanded() ? 'rotate-90' : 'rtl:-scale-x-100',
               )}
               aria-hidden="true"
             />

package/src/ui/TreeTable.tsx

@@ -100,7 +100,7 @@ export function TreeTable<T>(props: TreeTableProps<T>): JSX.Element {
             <TableRow>
               <For each={props.columns}>
                 {(col, colIndex) => (
-                  <TableCell class={cn(col.align === 'right' && 'text-right tabular-nums')}>
+                  <TableCell class={cn(col.align === 'right' && 'text-end tabular-nums')}>
                     <Show
                       when={colIndex() === 0}
                       fallback={
@@ -111,7 +111,7 @@ export function TreeTable<T>(props: TreeTableProps<T>): JSX.Element {
                     >
                       <div
                         class="flex items-center gap-1.5"
-                        style={{ 'padding-left': `${rowsProps.depth * 1}rem` }}
+                        style={{ 'padding-inline-start': `${rowsProps.depth * 1}rem` }}
                       >
                         <Show
                           when={hasChildren()}
@@ -127,7 +127,7 @@ export function TreeTable<T>(props: TreeTableProps<T>): JSX.Element {
                             <ChevronRight
                               class={cn(
                                 'h-3.5 w-3.5 transition-transform duration-200',
-                                isExpanded() && 'rotate-90',
+                                isExpanded() ? 'rotate-90' : 'rtl:-scale-x-100',
                               )}
                               aria-hidden="true"
                             />
@@ -159,7 +159,7 @@ export function TreeTable<T>(props: TreeTableProps<T>): JSX.Element {
         <TableRow>
           <For each={props.columns}>
             {(col) => (
-              <TableHeadCell class={cn(col.align === 'right' && 'text-right')}>{col.header}</TableHeadCell>
+              <TableHeadCell class={cn(col.align === 'right' && 'text-end')}>{col.header}</TableHeadCell>
             )}
           </For>
         </TableRow>

package/src/ui/UsageMeter.tsx

@@ -51,7 +51,7 @@ export function UsageMeter(props: UsageMeterProps): JSX.Element {
         <Show when={props.label}>
           <KMeter.Label>{props.label}</KMeter.Label>
         </Show>
-        <KMeter.ValueLabel class="ml-auto tabular-nums text-muted-foreground" />
+        <KMeter.ValueLabel class="ms-auto tabular-nums text-muted-foreground" />
       </div>
       <KMeter.Track class="h-2 overflow-hidden rounded-full bg-muted">
         <KMeter.Fill

package/src/ui/VideoPlayerShell.tsx

@@ -242,7 +242,7 @@ export function VideoPlayerShell(props: VideoPlayerShellProps): JSX.Element {
             {formatTime(currentTime())} / {formatTime(duration())}
           </span>
 
-          <div class="ml-1 flex items-center gap-1">
+          <div class="ms-1 flex items-center gap-1">
             <button type="button" aria-label={muted() ? 'Unmute' : 'Mute'} onClick={toggleMute} class="p-1">
               <Show when={!muted() && volume() > 0} fallback={<VolumeX class="h-4 w-4" />}>
                 <Volume2 class="h-4 w-4" />
@@ -260,7 +260,7 @@ export function VideoPlayerShell(props: VideoPlayerShellProps): JSX.Element {
             />
           </div>
 
-          <div class="ml-auto flex items-center gap-2">
+          <div class="ms-auto flex items-center gap-2">
             <Show when={pipSupported()}>
               <button type="button" aria-label="Picture in picture" onClick={togglePip} class="p-1">
                 <PictureInPicture2 class="h-4 w-4" />

package/src/ui/internal/CalendarCore.tsx

@@ -127,7 +127,7 @@ export function CalendarCore(props: CalendarCoreProps): JSX.Element {
               aria-label="Previous"
               onClick={() => (mode() === 'months' ? stepYear(-1) : setYearBase(yearBase() - YEARS_PER_PAGE))}
             >
-              <ChevronLeft class="h-4 w-4" />
+              <ChevronLeft class="h-4 w-4 rtl:-scale-x-100" />
             </button>
             <button type="button" class={headerLabel} onClick={() => setMode('days')}>
               <Show when={mode() === 'months'} fallback={`${years()[0]} – ${years()[YEARS_PER_PAGE - 1]}`}>
@@ -140,7 +140,7 @@ export function CalendarCore(props: CalendarCoreProps): JSX.Element {
               aria-label="Next"
               onClick={() => (mode() === 'months' ? stepYear(1) : setYearBase(yearBase() + YEARS_PER_PAGE))}
             >
-              <ChevronRight class="h-4 w-4" />
+              <ChevronRight class="h-4 w-4 rtl:-scale-x-100" />
             </button>
           </div>
         }
@@ -148,10 +148,10 @@ export function CalendarCore(props: CalendarCoreProps): JSX.Element {
         <div class="mb-2 flex items-center justify-between gap-1">
           <div class="flex items-center">
             <button type="button" class={navBtn} aria-label="Previous year" onClick={() => stepYear(-1)}>
-              <ChevronsLeft class="h-4 w-4" />
+              <ChevronsLeft class="h-4 w-4 rtl:-scale-x-100" />
             </button>
             <button type="button" class={navBtn} aria-label="Previous month" onClick={() => stepMonth(-1)}>
-              <ChevronLeft class="h-4 w-4" />
+              <ChevronLeft class="h-4 w-4 rtl:-scale-x-100" />
             </button>
           </div>
           <div class="flex items-center gap-0.5">
@@ -164,10 +164,10 @@ export function CalendarCore(props: CalendarCoreProps): JSX.Element {
           </div>
           <div class="flex items-center">
             <button type="button" class={navBtn} aria-label="Next month" onClick={() => stepMonth(1)}>
-              <ChevronRight class="h-4 w-4" />
+              <ChevronRight class="h-4 w-4 rtl:-scale-x-100" />
             </button>
             <button type="button" class={navBtn} aria-label="Next year" onClick={() => stepYear(1)}>
-              <ChevronsRight class="h-4 w-4" />
+              <ChevronsRight class="h-4 w-4 rtl:-scale-x-100" />
             </button>
           </div>
         </div>