orbital-ds 0.7.0 → 0.9.0

package/dist/ui/navigation-menu.js

@@ -55,7 +55,7 @@ function NavigationMenuItem({
   );
 }
 const navigationMenuTriggerStyle = cva(
-  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
+  "group/navigation-menu-trigger inline-flex h-(--ds-control-h-md) w-max items-center justify-center rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all duration-(--ds-motion-snap) outline-none hover:bg-muted focus:bg-muted focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-(--ds-ring-color) focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-(--ds-disabled-opacity) data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
 );
 function NavigationMenuTrigger({
   className,
@@ -85,7 +85,7 @@ function NavigationMenuContent({
     {
       "data-slot": "navigation-menu-content",
       className: cn(
-        "data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] isolate z-(--ds-z-overlay) h-full w-auto p-2.5 pr-3 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-2xl group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow-popover group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/5 group-data-[viewport=false]/navigation-menu:duration-(--ds-motion-slow) data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
+        "data-ending-style:data-[activation-direction=left]:translate-x-[50%] data-ending-style:data-[activation-direction=right]:translate-x-[-50%] data-starting-style:data-[activation-direction=left]:translate-x-[-50%] data-starting-style:data-[activation-direction=right]:translate-x-[50%] isolate z-(--ds-z-overlay) h-full w-auto p-2.5 pr-3 transition-[opacity,transform,translate] duration-(--ds-motion-layout) ease-(--ds-ease-standard) group-data-[viewport=false]/navigation-menu:rounded-popover group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow-popover group-data-[viewport=false]/navigation-menu:ring-(length:--ds-layer-ring-w) group-data-[viewport=false]/navigation-menu:ring-(--ds-layer-ring) group-data-[viewport=false]/navigation-menu:duration-(--ds-motion-slow) data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
         className
       ),
       ...props
@@ -103,16 +103,17 @@ function NavigationMenuPositioner({
   return /* @__PURE__ */ jsx(NavigationMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     NavigationMenuPrimitive.Positioner,
     {
+      "data-slot": "navigation-menu-positioner",
       side,
       sideOffset,
       align,
       alignOffset,
       className: cn(
-        "isolate z-(--ds-z-overlay) h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0",
+        "isolate z-(--ds-z-overlay) h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-(--ds-motion-layout) ease-(--ds-ease-standard) data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx(NavigationMenuPrimitive.Popup, { className: "data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-2xl bg-popover text-popover-foreground shadow-popover ring-1 ring-foreground/5 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-(--ds-motion-fast) data-starting-style:scale-90 data-starting-style:opacity-0", children: /* @__PURE__ */ jsx(NavigationMenuPrimitive.Viewport, { className: "relative size-full overflow-hidden" }) })
+      children: /* @__PURE__ */ jsx(NavigationMenuPrimitive.Popup, { "data-slot": "navigation-menu-popup", className: "data-ending-style:ease-(--ds-ease-standard) xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-popover bg-popover text-popover-foreground shadow-popover ring-(length:--ds-layer-ring-w) ring-(--ds-layer-ring) transition-[opacity,transform,width,height,scale,translate] duration-(--ds-motion-layout) ease-(--ds-ease-standard) outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-(--ds-motion-fast) data-starting-style:scale-90 data-starting-style:opacity-0", children: /* @__PURE__ */ jsx(NavigationMenuPrimitive.Viewport, { "data-slot": "navigation-menu-viewport", className: "relative size-full overflow-hidden" }) })
     }
   ) });
 }
@@ -125,7 +126,7 @@ function NavigationMenuLink({
     {
       "data-slot": "navigation-menu-link",
       className: cn(
-        "flex items-center gap-1.5 rounded-2xl p-3 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-xl data-[active=true]:bg-muted/50 data-[active=true]:hover:bg-muted data-[active=true]:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-1.5 rounded-item p-3 text-sm transition-all duration-(--ds-motion-snap) outline-none hover:bg-muted focus:bg-muted focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-(--ds-ring-color) focus-visible:outline-1 data-[active=true]:bg-muted/50 data-[active=true]:hover:bg-muted data-[active=true]:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -145,7 +146,7 @@ function NavigationMenuIndicator({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-overlay" })
+      children: /* @__PURE__ */ jsx("div", { "data-slot": "navigation-menu-arrow", className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-overlay" })
     }
   );
 }

package/dist/ui/pagination.js

@@ -1,13 +1,16 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils";
 import { Button } from "./button";
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import { useDsMessages } from "../hooks/use-ds-messages";
 function Pagination({ className, ...props }) {
+  const t = useDsMessages();
   return /* @__PURE__ */ jsx(
     "nav",
     {
       role: "navigation",
-      "aria-label": "pagination",
+      "aria-label": t.pagination,
       "data-slot": "pagination",
       className: cn("mx-auto flex w-full justify-center", className),
       ...props
@@ -57,37 +60,41 @@ function PaginationLink({
 }
 function PaginationPrevious({
   className,
-  text = "Previous",
+  text,
   ...props
 }) {
+  const t = useDsMessages();
   return /* @__PURE__ */ jsxs(
     PaginationLink,
     {
-      "aria-label": "Go to previous page",
+      "aria-label": t.paginationPreviousLabel,
       size: "default",
-      className: cn("pl-2!", className),
+      "data-direction": "previous",
+      className: cn("pl-2", className),
       ...props,
       children: [
         /* @__PURE__ */ jsx(ChevronLeftIcon, { "data-icon": "inline-start" }),
-        /* @__PURE__ */ jsx("span", { className: "hidden sm:block", children: text })
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:block", children: text ?? t.paginationPrevious })
       ]
     }
   );
 }
 function PaginationNext({
   className,
-  text = "Next",
+  text,
   ...props
 }) {
+  const t = useDsMessages();
   return /* @__PURE__ */ jsxs(
     PaginationLink,
     {
-      "aria-label": "Go to next page",
+      "aria-label": t.paginationNextLabel,
       size: "default",
-      className: cn("pr-2!", className),
+      "data-direction": "next",
+      className: cn("pr-2", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "hidden sm:block", children: text }),
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:block", children: text ?? t.paginationNext }),
         /* @__PURE__ */ jsx(ChevronRightIcon, { "data-icon": "inline-end" })
       ]
     }
@@ -97,13 +104,14 @@ function PaginationEllipsis({
   className,
   ...props
 }) {
+  const t = useDsMessages();
   return /* @__PURE__ */ jsxs(
     "span",
     {
       "aria-hidden": true,
       "data-slot": "pagination-ellipsis",
       className: cn(
-        "flex size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+        "flex size-(--ds-control-h-md) items-center justify-center [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -112,7 +120,7 @@ function PaginationEllipsis({
           MoreHorizontalIcon,
           {}
         ),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: t.paginationMore })
       ]
     }
   );

package/dist/ui/popover.js

@@ -27,7 +27,7 @@ function PopoverContent({
         {
           "data-slot": "popover-content",
           className: cn(
-            "flex w-72 origin-(--transform-origin) flex-col gap-(--ds-popover-p) rounded-2xl bg-popover p-(--ds-popover-p) text-sm text-popover-foreground shadow-popover ring-1 ring-foreground/5 outline-hidden duration-(--ds-motion-fast) data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "flex w-(--ds-popover-w) origin-(--transform-origin) flex-col gap-(--ds-popover-p) rounded-popover bg-popover p-(--ds-popover-p) text-sm text-popover-foreground shadow-popover ring-(length:--ds-layer-ring-w) ring-(--ds-layer-ring) outline-hidden duration-(--ds-motion-fast) data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           ),
           ...props
@@ -54,7 +54,7 @@ function PopoverTitle({ className, ...props }) {
     "div",
     {
       "data-slot": "popover-title",
-      className: cn("text-base font-medium", className),
+      className: cn("text-base font-(--ds-overlay-title-weight)", className),
       ...props
     }
   );

package/dist/ui/progress.js

@@ -11,7 +11,7 @@ function Progress({
     ProgressPrimitive.Track,
     {
       className: cn(
-        "relative flex h-3 w-full items-center overflow-x-hidden rounded-lg bg-muted",
+        "relative flex h-(--ds-track-h) w-full items-center overflow-x-hidden rounded-track bg-muted",
         className
       ),
       "data-slot": "progress-track",
@@ -19,7 +19,7 @@ function Progress({
         ProgressPrimitive.Indicator,
         {
           "data-slot": "progress-indicator",
-          className: "h-full bg-primary transition-all"
+          className: "h-full bg-primary transition-all duration-(--ds-motion-snap)"
         }
       )
     }

package/dist/ui/questionnaire.js

@@ -4,6 +4,7 @@ import { Questionnaire as QuestionnairePrimitive } from "@shadcn/react/questionn
 import { cn } from "../lib/utils";
 import { buttonVariants } from "./button";
 import { CheckIcon } from "lucide-react";
+import { useDsMessages } from "../hooks/use-ds-messages";
 function Questionnaire({
   className,
   ...props
@@ -58,7 +59,7 @@ function QuestionnaireTitle({
     {
       "data-slot": "questionnaire-title",
       className: cn(
-        "text-base font-semibold text-pretty [&:not(:has(~[data-slot=questionnaire-description]))]:mb-5",
+        "text-base font-(--ds-title-weight) text-pretty [&:not(:has(~[data-slot=questionnaire-description]))]:mb-5",
         className
       ),
       ...props
@@ -104,8 +105,8 @@ function QuestionnaireChoice({
     {
       "data-slot": "questionnaire-choice",
       className: cn(
-        "group/questionnaire-choice relative flex min-h-11 cursor-pointer items-start gap-3 rounded-control border border-input px-4 py-3.5 text-start text-sm transition-colors outline-none select-none hover:bg-input/40 has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-(length:--ds-ring-width) has-[>input:focus-visible]:ring-ring/50 data-invalid:border-destructive data-checked:border-primary/40 data-checked:bg-primary/10",
-        "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        "group/questionnaire-choice relative flex min-h-(--ds-touch-target) cursor-pointer items-start gap-3 rounded-control border border-input px-4 py-3.5 text-start text-sm transition-colors duration-(--ds-motion-snap) outline-none select-none hover:bg-input/40 has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-(length:--ds-ring-width) has-[>input:focus-visible]:ring-(--ds-ring-color) data-invalid:border-destructive data-checked:border-(--ds-choice-selected-border) data-checked:bg-(--ds-choice-selected)",
+        "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-(--ds-disabled-opacity)",
         className
       ),
       ...props,
@@ -122,7 +123,7 @@ function QuestionnaireChoice({
           {
             "aria-hidden": "true",
             "data-slot": "questionnaire-choice-indicator",
-            className: "pointer-events-none relative flex size-4 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-[6px] border border-input group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[type=radio]/questionnaire-choice:rounded-full group-data-checked/questionnaire-choice:border-primary group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground dark:bg-input/30 dark:group-data-checked/questionnaire-choice:bg-primary",
+            className: "pointer-events-none relative flex size-4 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-check border border-input group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[type=radio]/questionnaire-choice:rounded-full group-data-checked/questionnaire-choice:border-primary group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground bg-(--ds-check-bg) dark:group-data-checked/questionnaire-choice:bg-primary",
             children: [
               /* @__PURE__ */ jsx(
                 "span",
@@ -147,7 +148,7 @@ function QuestionnaireChoice({
           QuestionnairePrimitive.ChoiceShortcut,
           {
             "data-slot": "questionnaire-choice-shortcut",
-            className: "pointer-events-none ms-auto hidden size-5 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-full border border-input bg-background/80 font-mono text-[0.625rem] leading-none font-medium text-muted-foreground group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[shortcut]/questionnaire-choice:inline-flex"
+            className: "pointer-events-none ms-auto hidden size-5 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-full border border-input bg-background/80 font-mono text-2xs leading-none font-medium text-muted-foreground group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[shortcut]/questionnaire-choice:inline-flex"
           }
         )
       ]
@@ -181,7 +182,7 @@ function QuestionnaireInput({
         {
           "data-slot": "questionnaire-input",
           className: cn(
-            "h-9 min-h-11 w-full min-w-0 rounded-control border border-input bg-input/30 px-3 py-1 text-base transition-[color,box-shadow,background-color] outline-none focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-(length:--ds-ring-width) aria-invalid:ring-destructive/20 sm:min-h-0 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+            "h-(--ds-control-h-md) min-h-(--ds-touch-target) w-full min-w-0 rounded-control border border-input bg-(--ds-field-bg) px-(--ds-field-px) py-1 text-base transition-[color,box-shadow,background-color] duration-(--ds-motion-snap) outline-none focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-(--ds-ring-color) disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-(--ds-disabled-opacity) aria-invalid:border-(--ds-invalid-border) aria-invalid:ring-(length:--ds-ring-width) aria-invalid:ring-(--ds-invalid-ring) sm:min-h-0 md:text-sm",
             "selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground",
             className
           ),
@@ -213,7 +214,7 @@ function QuestionnaireActions({
     {
       "data-slot": "questionnaire-actions",
       className: cn(
-        "grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2 sm:min-h-9",
+        "grid min-h-(--ds-touch-target) w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2 sm:min-h-(--ds-control-h-md)",
         className
       ),
       ...props
@@ -227,6 +228,7 @@ function QuestionnairePrevious({
   variant = "outline",
   ...props
 }) {
+  const t = useDsMessages();
   return /* @__PURE__ */ jsx(
     QuestionnairePrimitive.Previous,
     {
@@ -235,11 +237,11 @@ function QuestionnairePrevious({
       "data-variant": variant,
       className: cn(
         buttonVariants({ size, variant }),
-        "col-start-1 row-start-1 min-h-11 justify-self-start sm:min-h-0",
+        "col-start-1 row-start-1 min-h-(--ds-touch-target) justify-self-start sm:min-h-0",
         className
       ),
       ...props,
-      children: children ?? "Previous"
+      children: children ?? t.questionnairePrevious
     }
   );
 }
@@ -250,6 +252,7 @@ function QuestionnaireSkip({
   variant = "outline",
   ...props
 }) {
+  const t = useDsMessages();
   return /* @__PURE__ */ jsx(
     QuestionnairePrimitive.Skip,
     {
@@ -258,11 +261,11 @@ function QuestionnaireSkip({
       "data-variant": variant,
       className: cn(
         buttonVariants({ size, variant }),
-        "col-start-2 row-start-1 min-h-11 justify-self-end sm:min-h-0",
+        "col-start-2 row-start-1 min-h-(--ds-touch-target) justify-self-end sm:min-h-0",
         className
       ),
       ...props,
-      children: children ?? "Skip"
+      children: children ?? t.questionnaireSkip
     }
   );
 }
@@ -273,6 +276,7 @@ function QuestionnaireNext({
   variant = "default",
   ...props
 }) {
+  const t = useDsMessages();
   return /* @__PURE__ */ jsx(
     QuestionnairePrimitive.Next,
     {
@@ -281,11 +285,11 @@ function QuestionnaireNext({
       "data-variant": variant,
       className: cn(
         buttonVariants({ size, variant }),
-        "col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0",
+        "col-start-3 row-start-1 min-h-(--ds-touch-target) justify-self-end sm:min-h-0",
         className
       ),
       ...props,
-      children: children ?? "Next"
+      children: children ?? t.questionnaireNext
     }
   );
 }
@@ -296,6 +300,7 @@ function QuestionnaireSubmit({
   variant = "default",
   ...props
 }) {
+  const t = useDsMessages();
   return /* @__PURE__ */ jsx(
     QuestionnairePrimitive.Submit,
     {
@@ -304,11 +309,11 @@ function QuestionnaireSubmit({
       "data-variant": variant,
       className: cn(
         buttonVariants({ size, variant }),
-        "col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0",
+        "col-start-3 row-start-1 min-h-(--ds-touch-target) justify-self-end sm:min-h-0",
         className
       ),
       ...props,
-      children: children ?? "Submit"
+      children: children ?? t.questionnaireSubmit
     }
   );
 }

package/dist/ui/radio-group.js

@@ -18,7 +18,7 @@ function RadioGroupItem({ className, ...props }) {
     {
       "data-slot": "radio-group-item",
       className: cn(
-        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary",
+        "group/radio-group-item peer relative flex aspect-square size-(--ds-check-size) shrink-0 rounded-full border border-input outline-none group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-(--ds-ring-color) disabled:cursor-not-allowed disabled:opacity-(--ds-disabled-opacity) aria-invalid:border-(--ds-invalid-border) aria-invalid:ring-(length:--ds-ring-width) aria-invalid:ring-(--ds-invalid-ring) aria-invalid:aria-checked:border-primary bg-(--ds-check-bg) data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary",
         className
       ),
       ...props,
@@ -26,7 +26,7 @@ function RadioGroupItem({ className, ...props }) {
         RadioPrimitive.Indicator,
         {
           "data-slot": "radio-group-indicator",
-          className: "flex size-4 items-center justify-center",
+          className: "flex size-(--ds-check-size) items-center justify-center",
           children: /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" })
         }
       )

package/dist/ui/resizable.js

@@ -31,11 +31,11 @@ function ResizableHandle({
     {
       "data-slot": "resizable-handle",
       className: cn(
-        "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        "relative flex w-(--ds-rule-w) items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-(--ds-rule-w) aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
         className
       ),
       ...props,
-      children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-(--ds-z-raised) flex h-6 w-1 shrink-0 rounded-lg bg-border" })
+      children: withHandle && /* @__PURE__ */ jsx("div", { "data-slot": "resizable-handle-grip", className: "z-(--ds-z-raised) flex h-6 w-1 shrink-0 rounded-lg bg-border" })
     }
   );
 }

package/dist/ui/scroll-area.js

@@ -17,12 +17,12 @@ function ScrollArea({
           ScrollAreaPrimitive.Viewport,
           {
             "data-slot": "scroll-area-viewport",
-            className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring/50 focus-visible:outline-1",
+            className: "size-full rounded-[inherit] transition-[color,box-shadow] duration-(--ds-motion-snap) outline-none focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-(--ds-ring-color) focus-visible:outline-1",
             children
           }
         ),
         /* @__PURE__ */ jsx(ScrollBar, {}),
-        /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+        /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, { "data-slot": "scroll-area-corner" })
       ]
     }
   );
@@ -39,7 +39,7 @@ function ScrollBar({
       "data-orientation": orientation,
       orientation,
       className: cn(
-        "flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent",
+        "flex touch-none p-px transition-colors duration-(--ds-motion-snap) select-none data-[orientation=horizontal]:h-(--ds-scrollbar-w) data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-(--ds-scrollbar-w) data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent",
         className
       ),
       ...props,

package/dist/ui/select.js

@@ -8,7 +8,7 @@ function SelectGroup({ className, ...props }) {
     SelectPrimitive.Group,
     {
       "data-slot": "select-group",
-      className: cn("scroll-my-1 p-1", className),
+      className: cn("scroll-my-1 p-(--ds-menu-p)", className),
       ...props
     }
   );
@@ -28,7 +28,7 @@ function SelectTrigger({
       "data-slot": "select-trigger",
       "data-size": size,
       className: cn(
-        "flex w-fit items-center justify-between gap-1.5 rounded-control shadow-control border border-input bg-input/30 px-(--ds-field-px) py-2 text-sm whitespace-nowrap transition-colors outline-none focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-(length:--ds-ring-width) aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-(--ds-control-h-md) data-[size=sm]:h-(--ds-control-h-sm) *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit items-center justify-between gap-1.5 rounded-control shadow-control border border-input bg-(--ds-field-bg) px-(--ds-field-px) py-2 text-sm whitespace-nowrap transition-colors duration-(--ds-motion-snap) outline-none focus-visible:border-ring focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-(--ds-ring-color) disabled:cursor-not-allowed disabled:opacity-(--ds-disabled-opacity) aria-invalid:border-(--ds-invalid-border) aria-invalid:ring-(length:--ds-ring-width) aria-invalid:ring-(--ds-invalid-ring) data-placeholder:text-muted-foreground data-[size=default]:h-(--ds-control-h-md) data-[size=sm]:h-(--ds-control-h-sm) *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:hover:bg-(--ds-field-bg-hover) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -69,7 +69,7 @@ function SelectContent({
           "data-slot": "select-content",
           "data-align-trigger": alignItemWithTrigger,
           className: cn(
-            "relative z-(--ds-z-overlay) max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl bg-popover text-popover-foreground shadow-popover ring-1 ring-foreground/5 duration-(--ds-motion-fast) data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "relative z-(--ds-z-overlay) max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-popover bg-popover text-popover-foreground shadow-popover ring-(length:--ds-layer-ring-w) ring-(--ds-layer-ring) duration-(--ds-motion-fast) data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           ),
           ...props,
@@ -101,7 +101,7 @@ function SelectLabel({
     SelectPrimitive.GroupLabel,
     {
       "data-slot": "select-label",
-      className: cn("px-3 py-2.5 text-xs text-muted-foreground", className),
+      className: cn("px-(--ds-menu-item-px) py-2.5 text-xs text-muted-foreground", className),
       ...props
     }
   );
@@ -116,7 +116,7 @@ function SelectItem({
     {
       "data-slot": "select-item",
       className: cn(
-        "relative flex w-full cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "relative flex w-full cursor-default items-center gap-2.5 rounded-item py-(--ds-menu-item-py) pr-8 pl-(--ds-menu-item-px) text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-(--ds-disabled-opacity) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       ),
       ...props,
@@ -136,7 +136,7 @@ function SelectSeparator({
     {
       "data-slot": "select-separator",
       className: cn(
-        "pointer-events-none -mx-1 my-1 h-px bg-border/50",
+        "pointer-events-none -mx-1 my-1 h-(--ds-rule-w) bg-(--ds-separator)",
         className
       ),
       ...props

package/dist/ui/separator.js

@@ -13,7 +13,7 @@ function Separator({
       "data-slot": "separator",
       orientation,
       className: cn(
-        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
+        "shrink-0 bg-border data-[orientation=horizontal]:h-(--ds-rule-w) data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-(--ds-rule-w) data-[orientation=vertical]:self-stretch",
         className
       ),
       ...props

package/dist/ui/sheet.js

@@ -4,6 +4,7 @@ import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
 import { cn } from "../lib/utils";
 import { Button } from "./button";
 import { XIcon } from "lucide-react";
+import { useDsMessages } from "../hooks/use-ds-messages";
 function Sheet({ ...props }) {
   return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
 }
@@ -22,7 +23,7 @@ function SheetOverlay({ className, ...props }) {
     {
       "data-slot": "sheet-overlay",
       className: cn(
-        "fixed inset-0 z-(--ds-z-overlay) bg-scrim duration-(--ds-motion-fast) supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 z-(--ds-z-overlay) bg-scrim duration-(--ds-motion-fast) supports-backdrop-filter:backdrop-blur-(--ds-scrim-blur) data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       ),
       ...props
@@ -36,6 +37,7 @@ function SheetContent({
   showCloseButton = true,
   ...props
 }) {
+  const t = useDsMessages();
   return /* @__PURE__ */ jsxs(SheetPortal, { children: [
     /* @__PURE__ */ jsx(SheetOverlay, {}),
     /* @__PURE__ */ jsxs(
@@ -44,7 +46,7 @@ function SheetContent({
         "data-slot": "sheet-content",
         "data-side": side,
         className: cn(
-          "fixed z-(--ds-z-overlay) flex flex-col bg-popover bg-clip-padding text-sm text-popover-foreground shadow-overlay transition duration-(--ds-motion-base) ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+          "fixed z-(--ds-z-overlay) flex flex-col bg-popover bg-clip-padding text-sm text-popover-foreground shadow-overlay transition duration-(--ds-motion-base) ease-(--ds-ease-panel) data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t-(length:--ds-rule-w) data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r-(length:--ds-rule-w) data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l-(length:--ds-rule-w) data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b-(length:--ds-rule-w) data-[side=left]:sm:max-w-(--ds-sheet-w) data-[side=right]:sm:max-w-(--ds-sheet-w) data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
           className
         ),
         ...props,
@@ -64,7 +66,7 @@ function SheetContent({
               ),
               children: [
                 /* @__PURE__ */ jsx(XIcon, {}),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: t.close })
               ]
             }
           )
@@ -98,7 +100,7 @@ function SheetTitle({ className, ...props }) {
     SheetPrimitive.Title,
     {
       "data-slot": "sheet-title",
-      className: cn("text-base font-medium text-foreground", className),
+      className: cn("text-base font-(--ds-overlay-title-weight) text-foreground", className),
       ...props
     }
   );