@almadar/ui 5.130.0 → 5.131.0

package/dist/providers/index.cjs

@@ -1173,7 +1173,7 @@ var init_Button = __esm({
               "cursor-pointer",
               "chrome-button",
               "transition-all duration-normal",
-              "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-offset-[length:var(--focus-ring-offset)]",
+              "focus:outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-ring focus-visible:ring-offset-[length:var(--focus-ring-offset)]",
               "disabled:opacity-50 disabled:cursor-not-allowed",
               variantStyles[variant],
               sizeStyles[size],
@@ -1920,7 +1920,7 @@ var init_Badge = __esm({
                   },
                   className: cn(
                     "inline-flex items-center justify-center rounded-sm",
-                    "hover:bg-foreground/10 focus:outline-none focus:ring-1 focus:ring-ring",
+                    "hover:bg-foreground/10 focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
                     "transition-colors",
                     size === "sm" ? "w-4 h-4 ml-0.5" : size === "md" ? "w-5 h-5 ml-1" : "w-6 h-6 ml-1"
                   ),
@@ -3278,7 +3278,7 @@ function NativeSelect({
           "block w-full border-[length:var(--border-width)] shadow-sm appearance-none",
           "px-3 py-2 pr-10 text-sm text-foreground font-medium",
           "bg-card",
-          "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-ring",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-ring",
           "disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed",
           error ? "border-error focus:border-error" : "border-border focus:border-primary",
           className
@@ -3385,7 +3385,7 @@ function RichSelect({
           "block w-full border-[length:var(--border-width)] shadow-sm",
           "px-3 py-2 pr-10 text-sm text-start font-medium",
           "bg-card rounded-sm",
-          "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-ring",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-ring",
           "disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed",
           error ? "border-error focus:border-error" : "border-border focus:border-primary",
           !hasValue && "text-muted-foreground"
@@ -4308,9 +4308,9 @@ var init_Radio = __esm({
                 "flex items-center justify-center",
                 "border-[length:var(--border-width)] transition-all cursor-pointer",
                 sizeClasses4[size],
-                hasError ? "border-error peer-focus:ring-error/20" : "border-border peer-focus:ring-ring/20",
+                hasError ? "border-error peer-focus-visible:ring-error/20" : "border-border peer-focus-visible:ring-ring/20",
                 isChecked2 ? hasError ? "border-error" : "border-primary bg-primary" : "",
-                "peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-offset-2",
+                "peer-focus:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2",
                 disabled && "opacity-50 cursor-not-allowed",
                 !disabled && "hover:border-[var(--color-border-hover)]"
               ),
@@ -4781,7 +4781,7 @@ var init_ThemeToggle = __esm({
             "inline-flex items-center justify-center gap-2",
             "text-foreground",
             "hover:bg-muted border-[length:var(--border-width)] border-transparent hover:border-border",
-            "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
             "transition-colors duration-fast",
             sizeClasses5[size],
             className
@@ -11819,10 +11819,12 @@ var init_Container = __esm({
     };
     paddingStyles3 = {
       none: "px-0",
-      sm: "px-4",
-      md: "px-6",
-      lg: "px-8",
-      xl: "px-12"
+      // Mobile-tighter, desktop-identical: fixed px-6 on a 360px phone eats ~13% of
+      // the viewport, so each token steps down below the sm breakpoint.
+      sm: "px-3 sm:px-4",
+      md: "px-4 sm:px-6",
+      lg: "px-4 sm:px-6 md:px-8",
+      xl: "px-4 sm:px-8 md:px-12"
     };
     Container = ({
       size,
@@ -12521,7 +12523,7 @@ var init_Accordion = __esm({
                 "bg-card",
                 "hover:bg-muted",
                 "transition-colors duration-fast",
-                "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-inset",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
                 "disabled:opacity-50 disabled:cursor-not-allowed",
                 isOpen && "bg-muted font-bold"
               ),
@@ -18726,7 +18728,7 @@ var init_Breadcrumb = __esm({
                   },
                   className: cn(
                     "flex items-center gap-1.5 transition-colors",
-                    "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                    "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
                     isLast ? "text-foreground font-bold cursor-default" : "text-muted-foreground hover:text-foreground"
                   ),
                   "aria-current": isLast ? "page" : void 0,
@@ -23361,7 +23363,7 @@ function DataGrid({
                           ] }, field.name);
                         }) })
                       ] }),
-                      dangerActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "xs", className: "flex-shrink-0", children: dangerActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+                      dangerActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "xs", className: "flex-shrink-0", children: dangerActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
                         Button,
                         {
                           variant: "ghost",
@@ -23369,11 +23371,10 @@ function DataGrid({
                           onClick: handleActionClick(action, itemData),
                           "data-testid": `action-${action.event}`,
                           "data-row-id": String(itemData.id),
+                          "aria-label": action.label,
+                          title: action.label,
                           className: "text-error hover:text-error hover:bg-error/10 px-2",
-                          children: [
-                            action.icon && renderIconInput(action.icon, { size: "xs" }),
-                            action.label
-                          ]
+                          children: action.icon ? renderIconInput(action.icon, { size: "xs" }) : action.label
                         },
                         idx
                       )) })
@@ -24175,10 +24176,7 @@ var init_FileTree = __esm({
       className,
       indent = 16
     }) => {
-      const { t } = hooks.useTranslate();
-      if (tree.length === 0) {
-        return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: `p-4 ${className ?? ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "muted", children: t("fileTree.noFiles") }) });
-      }
+      if (tree.length === 0) return null;
       return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: `py-1 overflow-y-auto ${className ?? ""}`, role: "tree", children: tree.map((node) => /* @__PURE__ */ jsxRuntime.jsx(
         TreeNodeItem,
         {
@@ -27681,7 +27679,7 @@ var init_NumberStepper = __esm({
                   "active:bg-muted",
                   "transition-colors duration-instant",
                   "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-                  "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-inset",
+                  "focus:outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-ring focus-visible:ring-inset",
                   styles.button
                 ),
                 "aria-label": t("aria.decrease"),
@@ -27722,7 +27720,7 @@ var init_NumberStepper = __esm({
                   "active:bg-muted",
                   "transition-colors duration-instant",
                   "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-                  "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-inset",
+                  "focus:outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-ring focus-visible:ring-inset",
                   styles.button
                 ),
                 "aria-label": t("aria.increase"),
@@ -28178,7 +28176,7 @@ var init_Lightbox = __esm({
                   "p-2 rounded-full",
                   "text-[var(--color-foreground)] bg-[var(--color-card)]",
                   "hover:bg-opacity-70 transition-opacity",
-                  "focus:outline-none focus:ring-2 focus:ring-ring"
+                  "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 ),
                 "aria-label": t("aria.closeModal"),
                 children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "x", className: "w-6 h-6" })
@@ -28197,7 +28195,7 @@ var init_Lightbox = __esm({
                   "p-2 rounded-full",
                   "text-[var(--color-foreground)] bg-[var(--color-card)]",
                   "hover:bg-opacity-70 transition-opacity",
-                  "focus:outline-none focus:ring-2 focus:ring-ring"
+                  "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 ),
                 "aria-label": t("aria.previousImage"),
                 children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-left", className: "w-8 h-8" })
@@ -28234,7 +28232,7 @@ var init_Lightbox = __esm({
                   "p-2 rounded-full",
                   "text-[var(--color-foreground)] bg-[var(--color-card)]",
                   "hover:bg-opacity-70 transition-opacity",
-                  "focus:outline-none focus:ring-2 focus:ring-ring"
+                  "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 ),
                 "aria-label": t("aria.nextImage"),
                 children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-right", className: "w-8 h-8" })
@@ -28414,7 +28412,8 @@ function TableView({
         const cell = formatCell(asFieldValue(getNestedValue(row, col.field ?? col.key)), col.format);
         return Math.max(widest, cell.length);
       }, columnLabel(col).length);
-      return Math.min(longest, MAX_MEASURED_COL_CH);
+      const chrome = col.format === "badge" ? BADGE_CHROME_CH : 0;
+      return Math.min(longest + chrome, MAX_MEASURED_COL_CH);
     }),
     [colDefs, data]
   );
@@ -28504,7 +28503,7 @@ function TableView({
               col.className
             );
             if (col.format === "badge" && raw != null && raw !== "") {
-              return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: statusVariant4(String(raw)), size: "sm", children: String(raw) }) }, col.key);
+              return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: statusVariant4(String(raw)), size: "sm", className: "whitespace-nowrap", children: String(raw) }) }, col.key);
             }
             return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
@@ -28587,7 +28586,7 @@ function TableView({
     }
   );
 }
-var MAX_MEASURED_COL_CH, alignClass, weightClass, LOOKS;
+var MAX_MEASURED_COL_CH, BADGE_CHROME_CH, alignClass, weightClass, LOOKS;
 var init_TableView = __esm({
   "components/core/molecules/TableView.tsx"() {
     "use client";
@@ -28606,6 +28605,7 @@ var init_TableView = __esm({
     init_useDataDnd();
     logger.createLogger("almadar:ui:table-view");
     MAX_MEASURED_COL_CH = 32;
+    BADGE_CHROME_CH = 4;
     alignClass = {
       left: "justify-start text-left",
       center: "justify-center text-center",
@@ -30841,7 +30841,7 @@ var init_VoteStack = __esm({
                   "active:bg-muted",
                   "transition-colors duration-instant",
                   "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-                  "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-inset",
+                  "focus:outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-ring focus-visible:ring-inset",
                   styles.button
                 ),
                 children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-up", className: styles.icon })
@@ -30878,7 +30878,7 @@ var init_VoteStack = __esm({
                   "active:bg-muted",
                   "transition-colors duration-instant",
                   "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-                  "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-inset",
+                  "focus:outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-ring focus-visible:ring-inset",
                   styles.button
                 ),
                 children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-down", className: styles.icon })
@@ -31399,7 +31399,7 @@ var init_QrScanner = __esm({
                         // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
                         "rounded-full bg-black bg-opacity-60 p-2 text-white",
                         // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
-                        "hover:bg-opacity-80 focus:outline-none focus:ring-2 focus:ring-white"
+                        "hover:bg-opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
                       ),
                       "aria-label": isPaused ? t("qrScanner.resumeScanning") : t("qrScanner.pauseScanning"),
                       children: isPaused ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "play", className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "pause", className: "h-4 w-4" })
@@ -31414,7 +31414,7 @@ var init_QrScanner = __esm({
                         // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
                         "rounded-full bg-black bg-opacity-60 p-2 text-white",
                         // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
-                        "hover:bg-opacity-80 focus:outline-none focus:ring-2 focus:ring-white"
+                        "hover:bg-opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
                       ),
                       "aria-label": currentFacing === "environment" ? t("qrScanner.switchToFrontCamera") : t("qrScanner.switchToRearCamera"),
                       children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "refresh-cw", className: "h-4 w-4" })
@@ -31429,7 +31429,7 @@ var init_QrScanner = __esm({
                         // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
                         "rounded-full bg-black bg-opacity-60 px-3 py-2 text-xs text-white",
                         // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
-                        "hover:bg-opacity-80 focus:outline-none focus:ring-2 focus:ring-white"
+                        "hover:bg-opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
                       ),
                       "aria-label": t("aria.mockScanDev"),
                       children: t("qrScanner.mockScan")
@@ -43247,7 +43247,7 @@ var init_TabbedContainer = __esm({
                       onClick: () => !isDisabled && handleTabChange(tab.id),
                       className: cn(
                         "flex items-center gap-2 px-4 py-3 text-sm font-medium transition-colors",
-                        "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                        "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
                         "disabled:opacity-50 disabled:cursor-not-allowed",
                         isActive ? "bg-primary text-primary-foreground" : "bg-card text-foreground hover:bg-muted",
                         isVertical ? "justify-start" : "justify-center"

package/dist/providers/index.js

@@ -1099,7 +1099,7 @@ var init_Button = __esm({
               "cursor-pointer",
               "chrome-button",
               "transition-all duration-normal",
-              "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-offset-[length:var(--focus-ring-offset)]",
+              "focus:outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-ring focus-visible:ring-offset-[length:var(--focus-ring-offset)]",
               "disabled:opacity-50 disabled:cursor-not-allowed",
               variantStyles[variant],
               sizeStyles[size],
@@ -1846,7 +1846,7 @@ var init_Badge = __esm({
                   },
                   className: cn(
                     "inline-flex items-center justify-center rounded-sm",
-                    "hover:bg-foreground/10 focus:outline-none focus:ring-1 focus:ring-ring",
+                    "hover:bg-foreground/10 focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
                     "transition-colors",
                     size === "sm" ? "w-4 h-4 ml-0.5" : size === "md" ? "w-5 h-5 ml-1" : "w-6 h-6 ml-1"
                   ),
@@ -3204,7 +3204,7 @@ function NativeSelect({
           "block w-full border-[length:var(--border-width)] shadow-sm appearance-none",
           "px-3 py-2 pr-10 text-sm text-foreground font-medium",
           "bg-card",
-          "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-ring",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-ring",
           "disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed",
           error ? "border-error focus:border-error" : "border-border focus:border-primary",
           className
@@ -3311,7 +3311,7 @@ function RichSelect({
           "block w-full border-[length:var(--border-width)] shadow-sm",
           "px-3 py-2 pr-10 text-sm text-start font-medium",
           "bg-card rounded-sm",
-          "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-ring",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-ring",
           "disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed",
           error ? "border-error focus:border-error" : "border-border focus:border-primary",
           !hasValue && "text-muted-foreground"
@@ -4234,9 +4234,9 @@ var init_Radio = __esm({
                 "flex items-center justify-center",
                 "border-[length:var(--border-width)] transition-all cursor-pointer",
                 sizeClasses4[size],
-                hasError ? "border-error peer-focus:ring-error/20" : "border-border peer-focus:ring-ring/20",
+                hasError ? "border-error peer-focus-visible:ring-error/20" : "border-border peer-focus-visible:ring-ring/20",
                 isChecked2 ? hasError ? "border-error" : "border-primary bg-primary" : "",
-                "peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-offset-2",
+                "peer-focus:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2",
                 disabled && "opacity-50 cursor-not-allowed",
                 !disabled && "hover:border-[var(--color-border-hover)]"
               ),
@@ -4707,7 +4707,7 @@ var init_ThemeToggle = __esm({
             "inline-flex items-center justify-center gap-2",
             "text-foreground",
             "hover:bg-muted border-[length:var(--border-width)] border-transparent hover:border-border",
-            "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
             "transition-colors duration-fast",
             sizeClasses5[size],
             className
@@ -11745,10 +11745,12 @@ var init_Container = __esm({
     };
     paddingStyles3 = {
       none: "px-0",
-      sm: "px-4",
-      md: "px-6",
-      lg: "px-8",
-      xl: "px-12"
+      // Mobile-tighter, desktop-identical: fixed px-6 on a 360px phone eats ~13% of
+      // the viewport, so each token steps down below the sm breakpoint.
+      sm: "px-3 sm:px-4",
+      md: "px-4 sm:px-6",
+      lg: "px-4 sm:px-6 md:px-8",
+      xl: "px-4 sm:px-8 md:px-12"
     };
     Container = ({
       size,
@@ -12447,7 +12449,7 @@ var init_Accordion = __esm({
                 "bg-card",
                 "hover:bg-muted",
                 "transition-colors duration-fast",
-                "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-inset",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
                 "disabled:opacity-50 disabled:cursor-not-allowed",
                 isOpen && "bg-muted font-bold"
               ),
@@ -18652,7 +18654,7 @@ var init_Breadcrumb = __esm({
                   },
                   className: cn(
                     "flex items-center gap-1.5 transition-colors",
-                    "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                    "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
                     isLast ? "text-foreground font-bold cursor-default" : "text-muted-foreground hover:text-foreground"
                   ),
                   "aria-current": isLast ? "page" : void 0,
@@ -23287,7 +23289,7 @@ function DataGrid({
                           ] }, field.name);
                         }) })
                       ] }),
-                      dangerActions.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-shrink-0", children: dangerActions.map((action, idx) => /* @__PURE__ */ jsxs(
+                      dangerActions.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-shrink-0", children: dangerActions.map((action, idx) => /* @__PURE__ */ jsx(
                         Button,
                         {
                           variant: "ghost",
@@ -23295,11 +23297,10 @@ function DataGrid({
                           onClick: handleActionClick(action, itemData),
                           "data-testid": `action-${action.event}`,
                           "data-row-id": String(itemData.id),
+                          "aria-label": action.label,
+                          title: action.label,
                           className: "text-error hover:text-error hover:bg-error/10 px-2",
-                          children: [
-                            action.icon && renderIconInput(action.icon, { size: "xs" }),
-                            action.label
-                          ]
+                          children: action.icon ? renderIconInput(action.icon, { size: "xs" }) : action.label
                         },
                         idx
                       )) })
@@ -24101,10 +24102,7 @@ var init_FileTree = __esm({
       className,
       indent = 16
     }) => {
-      const { t } = useTranslate();
-      if (tree.length === 0) {
-        return /* @__PURE__ */ jsx(Box, { className: `p-4 ${className ?? ""}`, children: /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: t("fileTree.noFiles") }) });
-      }
+      if (tree.length === 0) return null;
       return /* @__PURE__ */ jsx(Box, { className: `py-1 overflow-y-auto ${className ?? ""}`, role: "tree", children: tree.map((node) => /* @__PURE__ */ jsx(
         TreeNodeItem,
         {
@@ -27607,7 +27605,7 @@ var init_NumberStepper = __esm({
                   "active:bg-muted",
                   "transition-colors duration-instant",
                   "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-                  "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-inset",
+                  "focus:outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-ring focus-visible:ring-inset",
                   styles.button
                 ),
                 "aria-label": t("aria.decrease"),
@@ -27648,7 +27646,7 @@ var init_NumberStepper = __esm({
                   "active:bg-muted",
                   "transition-colors duration-instant",
                   "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-                  "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-inset",
+                  "focus:outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-ring focus-visible:ring-inset",
                   styles.button
                 ),
                 "aria-label": t("aria.increase"),
@@ -28104,7 +28102,7 @@ var init_Lightbox = __esm({
                   "p-2 rounded-full",
                   "text-[var(--color-foreground)] bg-[var(--color-card)]",
                   "hover:bg-opacity-70 transition-opacity",
-                  "focus:outline-none focus:ring-2 focus:ring-ring"
+                  "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 ),
                 "aria-label": t("aria.closeModal"),
                 children: /* @__PURE__ */ jsx(Icon, { name: "x", className: "w-6 h-6" })
@@ -28123,7 +28121,7 @@ var init_Lightbox = __esm({
                   "p-2 rounded-full",
                   "text-[var(--color-foreground)] bg-[var(--color-card)]",
                   "hover:bg-opacity-70 transition-opacity",
-                  "focus:outline-none focus:ring-2 focus:ring-ring"
+                  "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 ),
                 "aria-label": t("aria.previousImage"),
                 children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", className: "w-8 h-8" })
@@ -28160,7 +28158,7 @@ var init_Lightbox = __esm({
                   "p-2 rounded-full",
                   "text-[var(--color-foreground)] bg-[var(--color-card)]",
                   "hover:bg-opacity-70 transition-opacity",
-                  "focus:outline-none focus:ring-2 focus:ring-ring"
+                  "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 ),
                 "aria-label": t("aria.nextImage"),
                 children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", className: "w-8 h-8" })
@@ -28340,7 +28338,8 @@ function TableView({
         const cell = formatCell(asFieldValue(getNestedValue(row, col.field ?? col.key)), col.format);
         return Math.max(widest, cell.length);
       }, columnLabel(col).length);
-      return Math.min(longest, MAX_MEASURED_COL_CH);
+      const chrome = col.format === "badge" ? BADGE_CHROME_CH : 0;
+      return Math.min(longest + chrome, MAX_MEASURED_COL_CH);
     }),
     [colDefs, data]
   );
@@ -28430,7 +28429,7 @@ function TableView({
               col.className
             );
             if (col.format === "badge" && raw != null && raw !== "") {
-              return /* @__PURE__ */ jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsx(Badge, { variant: statusVariant4(String(raw)), size: "sm", children: String(raw) }) }, col.key);
+              return /* @__PURE__ */ jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsx(Badge, { variant: statusVariant4(String(raw)), size: "sm", className: "whitespace-nowrap", children: String(raw) }) }, col.key);
             }
             return /* @__PURE__ */ jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
@@ -28513,7 +28512,7 @@ function TableView({
     }
   );
 }
-var MAX_MEASURED_COL_CH, alignClass, weightClass, LOOKS;
+var MAX_MEASURED_COL_CH, BADGE_CHROME_CH, alignClass, weightClass, LOOKS;
 var init_TableView = __esm({
   "components/core/molecules/TableView.tsx"() {
     "use client";
@@ -28532,6 +28531,7 @@ var init_TableView = __esm({
     init_useDataDnd();
     createLogger("almadar:ui:table-view");
     MAX_MEASURED_COL_CH = 32;
+    BADGE_CHROME_CH = 4;
     alignClass = {
       left: "justify-start text-left",
       center: "justify-center text-center",
@@ -30767,7 +30767,7 @@ var init_VoteStack = __esm({
                   "active:bg-muted",
                   "transition-colors duration-instant",
                   "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-                  "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-inset",
+                  "focus:outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-ring focus-visible:ring-inset",
                   styles.button
                 ),
                 children: /* @__PURE__ */ jsx(Icon, { name: "chevron-up", className: styles.icon })
@@ -30804,7 +30804,7 @@ var init_VoteStack = __esm({
                   "active:bg-muted",
                   "transition-colors duration-instant",
                   "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-                  "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-inset",
+                  "focus:outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-ring focus-visible:ring-inset",
                   styles.button
                 ),
                 children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", className: styles.icon })
@@ -31325,7 +31325,7 @@ var init_QrScanner = __esm({
                         // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
                         "rounded-full bg-black bg-opacity-60 p-2 text-white",
                         // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
-                        "hover:bg-opacity-80 focus:outline-none focus:ring-2 focus:ring-white"
+                        "hover:bg-opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
                       ),
                       "aria-label": isPaused ? t("qrScanner.resumeScanning") : t("qrScanner.pauseScanning"),
                       children: isPaused ? /* @__PURE__ */ jsx(Icon, { name: "play", className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Icon, { name: "pause", className: "h-4 w-4" })
@@ -31340,7 +31340,7 @@ var init_QrScanner = __esm({
                         // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
                         "rounded-full bg-black bg-opacity-60 p-2 text-white",
                         // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
-                        "hover:bg-opacity-80 focus:outline-none focus:ring-2 focus:ring-white"
+                        "hover:bg-opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
                       ),
                       "aria-label": currentFacing === "environment" ? t("qrScanner.switchToFrontCamera") : t("qrScanner.switchToRearCamera"),
                       children: /* @__PURE__ */ jsx(Icon, { name: "refresh-cw", className: "h-4 w-4" })
@@ -31355,7 +31355,7 @@ var init_QrScanner = __esm({
                         // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
                         "rounded-full bg-black bg-opacity-60 px-3 py-2 text-xs text-white",
                         // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
-                        "hover:bg-opacity-80 focus:outline-none focus:ring-2 focus:ring-white"
+                        "hover:bg-opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
                       ),
                       "aria-label": t("aria.mockScanDev"),
                       children: t("qrScanner.mockScan")
@@ -43173,7 +43173,7 @@ var init_TabbedContainer = __esm({
                       onClick: () => !isDisabled && handleTabChange(tab.id),
                       className: cn(
                         "flex items-center gap-2 px-4 py-3 text-sm font-medium transition-colors",
-                        "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                        "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
                         "disabled:opacity-50 disabled:cursor-not-allowed",
                         isActive ? "bg-primary text-primary-foreground" : "bg-card text-foreground hover:bg-muted",
                         isVertical ? "justify-start" : "justify-center"