banhaten 0.1.3 → 0.3.0

package/registry/components/expanded/Table.tsx

@@ -1,16 +1,22 @@
-import { useEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import { useMemo, useState, type CSSProperties, type ReactNode } from "react";
 import {
   ArrowUpDownIcon,
-  CheckIcon as LucideCheckIcon,
   EditIcon as LucideEditIcon,
   EllipsisIcon,
   EyeIcon,
   FileIcon as LucideFileIcon,
-  MinusIcon,
+  StarIcon,
   Trash2Icon,
 } from "lucide-react";
 import { Pagination, type PaginationPage, type PaginationProps } from "@/components/ui/pagination";
 import { Spinner } from "@/components/ui/spinner";
+import { Avatar as AvatarPrimitive, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Progress as ProgressPrimitive } from "@/components/ui/progress";
+import { Tag } from "@/components/ui/tag";
+import { Toggle } from "@/components/ui/toggle";
 import {
   Toolbar,
   ToolbarBadge,
@@ -65,21 +71,22 @@ export type AvatarItem = {
 };
 
 export type TableAction = {
+  disabled?: boolean;
   icon: "view" | "edit" | "delete" | "more";
   label: string;
   onAction?: () => void;
 };
 
 export type TableItem =
-  | { type: "checkbox"; checked: boolean; indeterminate?: boolean }
+  | { type: "checkbox"; ariaLabel?: string; checked: boolean; disabled?: boolean; indeterminate?: boolean; onCheckedChange?: (checked: boolean) => void }
   | { type: "text"; tone?: "default" | "subtle"; value: string; weight?: "regular" | "medium" }
   | { type: "avatarText"; caption?: string; name: string; src?: string; status?: "top" | "bottom" }
   | { type: "rating"; max?: 5; value: number }
   | { type: "progress"; label?: string; tone?: "success" | "brand"; value: number }
-  | { type: "toggle"; checked: boolean; disabled?: boolean }
+  | { type: "toggle"; ariaLabel?: string; checked: boolean; disabled?: boolean; onCheckedChange?: (checked: boolean) => void }
   | { type: "badges"; items: BadgeItem[]; maxVisible?: number }
   | { type: "onlyAvatar"; alt: string; src?: string }
-  | { type: "avatarStack"; avatars: AvatarItem[]; canAdd?: boolean; count?: number }
+  | { type: "avatarStack"; addLabel?: string; avatars: AvatarItem[]; canAdd?: boolean; count?: number; onAdd?: () => void }
   | { type: "tags"; items: string[]; maxVisible?: number }
   | { type: "file"; label?: string }
   | { type: "brandLogoText"; label: string; logoSrc?: string }
@@ -129,6 +136,7 @@ export type DataTableSearch<Row extends TableRowBase> =
     };
 
 export type DataTablePagination = {
+  ariaLabel?: string;
   defaultPage?: number;
   manual?: boolean;
   onPageChange?: (page: number) => void;
@@ -185,7 +193,7 @@ function cx(...classes: Array<string | false | undefined>) {
 
 export function Table<Row extends TableRowBase>({
   columns,
-  dir = "ltr",
+  dir,
   onSelectedRowIdsChange,
   onSortChange,
   rows,
@@ -210,7 +218,12 @@ export function Table<Row extends TableRowBase>({
   }
 
   return (
-    <div className={`ds-table-wrap ds-table-wrap--${size}`} dir={dir}>
+    <div
+      aria-label="Scrollable table"
+      className={`ds-table-wrap ds-table-wrap--${size}`}
+      dir={dir}
+      tabIndex={0}
+    >
       <table className="ds-table">
         <thead>
           <tr>
@@ -232,18 +245,20 @@ export function Table<Row extends TableRowBase>({
                 ) : column.header ? (
                   column.sortable ? (
                     onSortChange ? (
-                      <button
+                      <Button
                         aria-label={`Sort by ${column.header}`}
                         className={cx(
                           "ds-table__sort",
                           sort?.columnId === column.id && `ds-table__sort--${sort.direction}`,
                         )}
                         onClick={() => onSortChange(getNextSort(sort, column.id))}
+                        size="xs"
                         type="button"
+                        variant="ghost"
                       >
                         <span>{column.header}</span>
                         <SortIcon direction={sort?.columnId === column.id ? sort.direction : undefined} />
-                      </button>
+                      </Button>
                     ) : (
                       <span className="ds-table__sort ds-table__sort--static">
                         <span>{column.header}</span>
@@ -253,7 +268,11 @@ export function Table<Row extends TableRowBase>({
                   ) : (
                     column.header
                   )
-                ) : null}
+                ) : (
+                  <span className="sr-only">
+                    {column.kind === "actions" ? "Actions" : column.id}
+                  </span>
+                )}
               </th>
             ))}
           </tr>
@@ -277,7 +296,7 @@ export function Table<Row extends TableRowBase>({
                     ) : column.renderCell ? (
                       column.renderCell(row)
                     ) : column.item ? (
-                      renderTableItem(column.item(row))
+                      renderTableItem(column.item(row), size)
                     ) : null}
                   </td>
                 ))}
@@ -311,7 +330,7 @@ export function DataTable<Row extends TableRowBase>({
   columns,
   defaultSort = null,
   description,
-  dir = "ltr",
+  dir,
   emptyState,
   error = false,
   filters = [],
@@ -486,6 +505,10 @@ export function DataTable<Row extends TableRowBase>({
         <footer className="ds-data-table__footer">
           <ToolbarText>{labels.resultsSummary({ from: visibleFrom, to: visibleTo, total: totalRows })}</ToolbarText>
           <Pagination
+            aria-label={
+              paginationConfig.ariaLabel ??
+              (typeof title === "string" ? `${title} pagination` : "Table pagination")
+            }
             dir={dir}
             nextDisabled={currentPage >= pageCount}
             onPageChange={setDataTablePage}
@@ -749,16 +772,24 @@ function clampNumber(value: number, min: number, max: number) {
   return Math.min(max, Math.max(min, Math.floor(value)));
 }
 
-function renderTableItem(item: TableItem) {
+function renderTableItem(item: TableItem, tableSize: TableSize) {
   switch (item.type) {
     case "checkbox":
-      return <SelectionCheckbox checked={item.checked} indeterminate={item.indeterminate} label="Select row" onChange={() => undefined} />;
+      return (
+        <SelectionCheckbox
+          checked={item.checked}
+          disabled={item.disabled ?? !item.onCheckedChange}
+          indeterminate={item.indeterminate}
+          label={item.ariaLabel ?? "Select row"}
+          onChange={item.onCheckedChange}
+        />
+      );
     case "text":
       return <span className={`ds-table-item-text ds-table-item-text--${item.tone ?? "default"} ds-table-item-text--${item.weight ?? "regular"}`}>{item.value}</span>;
     case "avatarText":
       return (
         <span className="ds-table-avatar-text">
-          <Avatar name={item.name} src={item.src} />
+          <Avatar name={item.name} size={tableSize === "lg" ? "md" : "sm"} src={item.src} />
           <span>
             <strong>{item.name}</strong>
             {item.caption && <em>{item.caption}</em>}
@@ -770,13 +801,30 @@ function renderTableItem(item: TableItem) {
     case "progress":
       return <Progress value={item.value} label={item.label} tone={item.tone ?? "success"} />;
     case "toggle":
-      return <button aria-pressed={item.checked} className="ds-table-toggle" disabled={item.disabled} type="button"><span /></button>;
+      return (
+        <Toggle
+          aria-label={item.ariaLabel ?? "Toggle row value"}
+          checked={item.checked}
+          disabled={item.disabled ?? !item.onCheckedChange}
+          onCheckedChange={item.onCheckedChange}
+          size="sm"
+        />
+      );
     case "badges":
       return <BadgeList items={item.items} maxVisible={item.maxVisible} />;
     case "onlyAvatar":
-      return <Avatar name={item.alt} src={item.src} />;
+      return <Avatar name={item.alt} size={tableSize === "lg" ? "md" : "xs"} src={item.src} />;
     case "avatarStack":
-      return <AvatarStack avatars={item.avatars} count={item.count} canAdd={item.canAdd} />;
+      return (
+        <AvatarStack
+          addLabel={item.addLabel}
+          avatars={item.avatars}
+          canAdd={item.canAdd}
+          count={item.count}
+          onAdd={item.onAdd}
+          size={tableSize}
+        />
+      );
     case "tags":
       return <TagList items={item.items} maxVisible={item.maxVisible} />;
     case "file":
@@ -793,7 +841,7 @@ function renderTableItem(item: TableItem) {
       return (
         <span className="ds-table-action-group">
           {item.actions.map((action) => (
-            <IconButton key={action.label} icon={action.icon} label={action.label} onClick={action.onAction} />
+            <IconButton disabled={action.disabled} key={action.label} icon={action.icon} label={action.label} onClick={action.onAction} />
           ))}
         </span>
       );
@@ -813,35 +861,21 @@ function SelectionCheckbox({
   disabled?: boolean;
   indeterminate?: boolean;
   label: string;
-  onChange: (checked: boolean) => void;
+  onChange?: (checked: boolean) => void;
 }) {
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.indeterminate = indeterminate;
-    }
-  }, [indeterminate]);
-
   return (
-    <label className="ds-table-checkbox">
-      <input
-        aria-checked={indeterminate ? "mixed" : checked}
-        aria-label={label}
-        checked={checked}
-        disabled={disabled}
-        onChange={(event) => onChange(event.currentTarget.checked)}
-        ref={inputRef}
-        type="checkbox"
-      />
-      <span aria-hidden="true">
-        {indeterminate ? <IndeterminateIcon /> : <CheckIcon />}
-      </span>
-    </label>
+    <Checkbox
+      aria-label={label}
+      checked={indeterminate ? "indeterminate" : checked}
+      disabled={disabled}
+      onCheckedChange={(nextChecked) => onChange?.(nextChecked === true)}
+    />
   );
 }
 
-function Avatar({ name, src }: { name: string; src?: string }) {
+type TableAvatarSize = "xs" | "sm" | "md";
+
+function Avatar({ name, size, src }: { name: string; size: TableAvatarSize; src?: string }) {
   const initials = name
     .split(" ")
     .map((part) => part[0])
@@ -849,17 +883,40 @@ function Avatar({ name, src }: { name: string; src?: string }) {
     .join("")
     .toUpperCase();
 
-  return src ? <img alt="" className="ds-table-avatar" src={src} /> : <span className="ds-table-avatar">{initials}</span>;
+  return (
+    <AvatarPrimitive className="ds-table-avatar" size={size}>
+      {src ? <AvatarImage alt="" src={src} /> : null}
+      <AvatarFallback size={size}>{initials}</AvatarFallback>
+    </AvatarPrimitive>
+  );
 }
 
-function AvatarStack({ avatars, canAdd, count }: { avatars: AvatarItem[]; canAdd?: boolean; count?: number }) {
+function AvatarStack({
+  addLabel = "Add person",
+  avatars,
+  canAdd,
+  count,
+  onAdd,
+  size,
+}: {
+  addLabel?: string;
+  avatars: AvatarItem[];
+  canAdd?: boolean;
+  count?: number;
+  onAdd?: () => void;
+  size: TableSize;
+}) {
   return (
-    <span className="ds-table-avatar-stack">
+    <span className={`ds-table-avatar-stack ds-table-avatar-stack--${size}`}>
       {avatars.slice(0, 3).map((avatar) => (
-        <Avatar key={avatar.alt} name={avatar.alt} src={avatar.src} />
+        <Avatar key={avatar.alt} name={avatar.alt} size={size === "lg" ? "md" : "xs"} src={avatar.src} />
       ))}
       {count ? <span className="ds-table-avatar ds-table-avatar--count">+{count}</span> : null}
-      {canAdd ? <button aria-label="Add person" type="button">+</button> : null}
+      {canAdd ? (
+        <Button aria-label={addLabel} disabled={!onAdd} onClick={onAdd} size="icon-xs" type="button" variant="ghost">
+          +
+        </Button>
+      ) : null}
     </span>
   );
 }
@@ -871,12 +928,17 @@ function BadgeList({ items, maxVisible = items.length }: { items: BadgeItem[]; m
   return (
     <span className="ds-table-badges">
       {visible.map((item, index) => (
-        <span className={`ds-table-badge ds-table-badge--${item.tone ?? "neutral"}`} key={`${item.label}-${index}`}>
-          {item.dot && <i />}
+        <Badge
+          badgeStyle="light"
+          color={badgeColor(item.tone)}
+          key={`${item.label}-${index}`}
+          size="xs"
+          type={item.dot ? "dot" : "default"}
+        >
           {item.label}
-        </span>
+        </Badge>
       ))}
-      {overflow > 0 && <span className="ds-table-badge">+{overflow}</span>}
+      {overflow > 0 && <Badge size="xs">+{overflow}</Badge>}
     </span>
   );
 }
@@ -888,31 +950,40 @@ function TagList({ items, maxVisible = items.length }: { items: string[]; maxVis
   return (
     <span className="ds-table-tags">
       {visible.map((item, index) => (
-        <span key={`${item}-${index}`}>{item}</span>
+        <Tag key={`${item}-${index}`} size="xs">{item}</Tag>
       ))}
-      {overflow > 0 && <span>+{overflow}</span>}
+      {overflow > 0 && <Tag size="xs">+{overflow}</Tag>}
     </span>
   );
 }
 
 function Progress({ label, tone, value }: { label?: string; tone: "success" | "brand"; value: number }) {
-  const safeValue = Math.max(0, Math.min(100, value));
-
   return (
-    <span className={`ds-table-progress ds-table-progress--${tone}`}>
-      <span aria-hidden="true">
-        <i style={{ width: `${safeValue}%` }} />
-      </span>
-      <em>{label ?? `${safeValue}%`}</em>
-    </span>
+    <ProgressPrimitive
+      aria-label={label ?? "Progress"}
+      className={`ds-table-progress ds-table-progress--${tone}`}
+      indicator={label}
+      labelPosition="inline"
+      size="lg"
+      value={value}
+    />
   );
 }
 
 function Rating({ max, value }: { max: number; value: number }) {
   return (
-    <span className="ds-table-rating" aria-label={`${value} out of ${max}`}>
+    <span
+      aria-label={`${value} out of ${max}`}
+      className="ds-table-rating"
+      role="img"
+    >
       {Array.from({ length: max }, (_, index) => (
-        <span className={index < value ? "is-filled" : undefined} key={index}>*</span>
+        <StarIcon
+          aria-hidden="true"
+          className={index < value ? "is-filled" : undefined}
+          key={index}
+          strokeWidth="var(--bh-icon-stroke-190)"
+        />
       ))}
     </span>
   );
@@ -927,14 +998,30 @@ function IconLabel({ icon, label }: { icon: ReactNode; label: string }) {
   );
 }
 
-function IconButton({ icon, label, onClick }: { icon: TableAction["icon"]; label: string; onClick?: () => void }) {
+function IconButton({
+  disabled,
+  icon,
+  label,
+  onClick,
+}: {
+  disabled?: boolean;
+  icon: TableAction["icon"];
+  label: string;
+  onClick?: () => void;
+}) {
   return (
-    <button aria-label={label} className="ds-table-icon-button" onClick={onClick} type="button">
+    <Button aria-label={label} className="ds-table-icon-button" disabled={disabled ?? !onClick} onClick={onClick} size="icon-xs" type="button" variant="ghost">
       {renderActionIcon(icon)}
-    </button>
+    </Button>
   );
 }
 
+function badgeColor(tone: BadgeItem["tone"]) {
+  if (tone === "success") return "green" as const;
+  if (tone === "warning") return "amber" as const;
+  return tone ?? "neutral";
+}
+
 function renderActionIcon(icon: TableAction["icon"]) {
   switch (icon) {
     case "view":
@@ -949,38 +1036,30 @@ function renderActionIcon(icon: TableAction["icon"]) {
   }
 }
 
-function CheckIcon() {
-  return <LucideCheckIcon strokeWidth={2.6} />;
-}
-
-function IndeterminateIcon() {
-  return <MinusIcon strokeWidth={2.6} />;
-}
-
 function SortIcon({ direction }: { direction?: TableSortDirection }) {
   return (
-    <ArrowUpDownIcon aria-hidden="true" data-direction={direction ?? "none"} strokeWidth={1.9} />
+    <ArrowUpDownIcon aria-hidden="true" data-direction={direction ?? "none"} strokeWidth="var(--bh-icon-stroke-190)" />
   );
 }
 
 function MoreIcon() {
-  return <EllipsisIcon aria-hidden="true" strokeWidth={2.25} />;
+  return <EllipsisIcon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-225)" />;
 }
 
 function ViewIcon() {
-  return <EyeIcon aria-hidden="true" strokeWidth={1.9} />;
+  return <EyeIcon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-190)" />;
 }
 
 function EditIcon() {
-  return <LucideEditIcon aria-hidden="true" strokeWidth={1.9} />;
+  return <LucideEditIcon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-190)" />;
 }
 
 function DeleteIcon() {
-  return <Trash2Icon aria-hidden="true" strokeWidth={1.9} />;
+  return <Trash2Icon aria-hidden="true" strokeWidth="var(--bh-icon-stroke-190)" />;
 }
 
 function FileIcon() {
-  return <LucideFileIcon strokeWidth={1.9} />;
+  return <LucideFileIcon strokeWidth="var(--bh-icon-stroke-190)" />;
 }
 
 function BrandIcon() {

package/registry/components/expanded/Timeline.tsx

@@ -8,11 +8,12 @@ export type TimelineItemState = "finished" | "active" | "inactive";
 
 export type TimelineStep = {
   bottomDate?: string;
-  caption?: string;
+  caption?: ReactNode;
+  className?: string;
   date?: string;
   icon?: ReactNode;
   id?: string;
-  label?: string;
+  label?: ReactNode;
   showBottomDate?: boolean;
   showCaption?: boolean;
   showLeadingDate?: boolean;
@@ -27,6 +28,7 @@ export type TimelineItemProps = TimelineStep & {
   className?: string;
   dir?: "ltr" | "rtl";
   orientation?: TimelineOrientation;
+  role?: "listitem" | "none" | "presentation";
   variant?: TimelineVariant;
 };
 
@@ -46,14 +48,12 @@ function classes(...names: Array<string | false | undefined>) {
 function Indicator({
   icon,
   orientation,
-  rtl,
   showLine,
   state,
   variant,
 }: {
   icon?: ReactNode;
   orientation: TimelineOrientation;
-  rtl: boolean;
   showLine: boolean;
   state: TimelineItemState;
   variant: TimelineVariant;
@@ -79,21 +79,11 @@ function Indicator({
       className={classes(
         "ds-timeline__indicator",
         `ds-timeline__indicator--${orientation}`,
-        rtl && "ds-timeline__indicator--rtl",
       )}
       aria-hidden="true"
     >
-      {orientation === "horizontal" && rtl ? (
-        <>
-          {line}
-          {marker}
-        </>
-      ) : (
-        <>
-          {marker}
-          {line}
-        </>
-      )}
+      {marker}
+      {line}
     </span>
   );
 }
@@ -103,10 +93,11 @@ export function TimelineItem({
   caption,
   className,
   date,
-  dir = "ltr",
+  dir,
   icon,
   label,
   orientation = "vertical",
+  role,
   showBottomDate = false,
   showCaption = true,
   showLeadingDate = true,
@@ -117,7 +108,6 @@ export function TimelineItem({
   topDate,
   variant = "default",
 }: TimelineItemProps) {
-  const rtl = dir === "rtl";
   const displayDate = date;
   const displayLabel = label;
   const displayCaption = caption;
@@ -141,7 +131,6 @@ export function TimelineItem({
     <Indicator
       icon={icon}
       orientation={orientation}
-      rtl={rtl}
       showLine={showLine}
       state={state}
       variant={variant}
@@ -159,11 +148,10 @@ export function TimelineItem({
         `ds-timeline-item--${orientation}`,
         `ds-timeline-item--${variant}`,
         `ds-timeline-item--${state}`,
-        rtl ? "ds-timeline-item--rtl" : "ds-timeline-item--ltr",
         className,
       )}
       dir={dir}
-      role="listitem"
+      role={role}
     >
       {leadingDate}
       {indicator}
@@ -173,15 +161,13 @@ export function TimelineItem({
 }
 
 export function Timeline({
-  ariaLabel,
+  ariaLabel = "Timeline",
   className,
-  dir = "ltr",
+  dir,
   orientation = "vertical",
   steps = [],
   variant = "default",
 }: TimelineProps) {
-  const rtl = dir === "rtl";
-
   return (
     <div
       aria-label={ariaLabel}
@@ -189,11 +175,11 @@ export function Timeline({
         "ds-timeline",
         `ds-timeline--${orientation}`,
         `ds-timeline--${variant}`,
-        rtl ? "ds-timeline--rtl" : "ds-timeline--ltr",
         className,
       )}
       dir={dir}
       role="list"
+      tabIndex={orientation === "horizontal" ? 0 : undefined}
     >
       {steps.map((step, index) => (
         <TimelineItem
@@ -201,6 +187,7 @@ export function Timeline({
           key={step.id ?? index}
           dir={dir}
           orientation={orientation}
+          role="listitem"
           showTopDate={step.showTopDate ?? orientation === "horizontal"}
           showBottomDate={step.showBottomDate ?? false}
           showPaddingBottom={step.showPaddingBottom ?? orientation === "vertical"}
@@ -212,5 +199,5 @@ export function Timeline({
 }
 
 function CheckIcon() {
-  return <LucideCheckIcon aria-hidden="true" className="ds-timeline__check" strokeWidth={3} />;
+  return <LucideCheckIcon aria-hidden="true" className="ds-timeline__check" strokeWidth="var(--bh-icon-stroke-300)" />;
 }

package/registry/components/expanded/activityFeed.css

@@ -30,7 +30,7 @@
   align-items: flex-start;
   color: var(--activity-feed-content-default);
   font-family: var(--bh-font-family);
-  letter-spacing: 0;
+  letter-spacing: var(--bh-text-base-letter-spacing);
 }
 
 .ds-activity-feed *,
@@ -43,7 +43,7 @@
   text-decoration: none;
 }
 
-.ds-activity-feed--rtl {
+.ds-activity-feed:dir(rtl) {
   font-family: var(--bh-font-family);
   margin-inline-end: auto;
 }
@@ -102,7 +102,7 @@
   gap: var(--activity-feed-space-lg);
 }
 
-.ds-activity-feed-item--rtl .ds-activity-feed-item__content {
+.ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__content {
   align-items: flex-start;
 }
 
@@ -121,7 +121,7 @@
   gap: var(--bh-space-sm-6);
 }
 
-.ds-activity-feed-item--rtl .ds-activity-feed-item__topline {
+.ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__topline {
   justify-content: flex-start;
 }
 
@@ -139,7 +139,7 @@
   word-break: break-word;
 }
 
-.ds-activity-feed-item--rtl .ds-activity-feed-item__text {
+.ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__text {
   justify-content: flex-start;
   text-align: right;
 }
@@ -149,7 +149,7 @@
   font-weight: var(--bh-font-weight-medium);
 }
 
-.ds-activity-feed-item--rtl .ds-activity-feed-item__text strong {
+.ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__text strong {
   font-weight: var(--bh-font-weight-semibold);
 }
 
@@ -199,7 +199,7 @@
   padding: var(--activity-feed-space-xl);
 }
 
-.ds-activity-feed-item--rtl .ds-activity-feed-item__caption {
+.ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__caption {
   justify-content: flex-start;
   text-align: right;
 }
@@ -216,7 +216,7 @@
   line-height: var(--bh-text-body-sm-regular-line-height);
 }
 
-.ds-activity-feed-item--rtl .ds-activity-feed-item__slot {
+.ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__slot {
   place-items: center start;
   text-align: right;
 }
@@ -230,7 +230,7 @@
   line-height: var(--bh-text-body-sm-regular-line-height);
 }
 
-.ds-activity-feed-item--rtl .ds-activity-feed-item__timestamp {
+.ds-activity-feed-item:dir(rtl) .ds-activity-feed-item__timestamp {
   text-align: right;
 }