@nurix/ui-component-library 1.1.4-stage.117 → 1.1.4-stage.119

package/dist/index.d.mts

@@ -1408,6 +1408,7 @@ declare const DEFAULT_THEME: {
             readonly borderBrand: "#1d4885";
             readonly borderDestructive: "#b91c1c";
             readonly borderInput: "#e5e5e5";
+            readonly borderInputHover: "#dadada";
             readonly hovOpacityPrimary: "#0a0a0a0d";
             readonly hovOpacitySecondary: "#0a0a0a0d";
             readonly hovSolidPrimary: "#fafafa";
@@ -1494,6 +1495,7 @@ declare const DEFAULT_THEME: {
             readonly borderBrand: "#bfdbfe";
             readonly borderDestructive: "#f87171";
             readonly borderInput: "#262626";
+            readonly borderInputHover: "#404040";
             readonly hovOpacityPrimary: "#ffffff0d";
             readonly hovOpacitySecondary: "#ffffff1a";
             readonly hovSolidPrimary: "#262626";
@@ -1588,6 +1590,10 @@ interface DialogProps {
     showCancel?: boolean;
     onCancel?: () => void;
     onConfirm?: () => void;
+    /** @default "primary" */
+    confirmVariant?: ButtonVariant;
+    /** Disable the confirm button. */
+    confirmDisabled?: boolean;
     className?: string;
 }
 interface DialogIconProps {
@@ -1615,6 +1621,10 @@ interface DialogFooterProps {
     showCancel?: boolean;
     onCancel?: () => void;
     onConfirm?: () => void;
+    /** @default "primary" */
+    confirmVariant?: ButtonVariant;
+    /** Disable the confirm button. */
+    confirmDisabled?: boolean;
     showDivider?: boolean;
     className?: string;
 }

package/dist/index.d.ts

@@ -1408,6 +1408,7 @@ declare const DEFAULT_THEME: {
             readonly borderBrand: "#1d4885";
             readonly borderDestructive: "#b91c1c";
             readonly borderInput: "#e5e5e5";
+            readonly borderInputHover: "#dadada";
             readonly hovOpacityPrimary: "#0a0a0a0d";
             readonly hovOpacitySecondary: "#0a0a0a0d";
             readonly hovSolidPrimary: "#fafafa";
@@ -1494,6 +1495,7 @@ declare const DEFAULT_THEME: {
             readonly borderBrand: "#bfdbfe";
             readonly borderDestructive: "#f87171";
             readonly borderInput: "#262626";
+            readonly borderInputHover: "#404040";
             readonly hovOpacityPrimary: "#ffffff0d";
             readonly hovOpacitySecondary: "#ffffff1a";
             readonly hovSolidPrimary: "#262626";
@@ -1588,6 +1590,10 @@ interface DialogProps {
     showCancel?: boolean;
     onCancel?: () => void;
     onConfirm?: () => void;
+    /** @default "primary" */
+    confirmVariant?: ButtonVariant;
+    /** Disable the confirm button. */
+    confirmDisabled?: boolean;
     className?: string;
 }
 interface DialogIconProps {
@@ -1615,6 +1621,10 @@ interface DialogFooterProps {
     showCancel?: boolean;
     onCancel?: () => void;
     onConfirm?: () => void;
+    /** @default "primary" */
+    confirmVariant?: ButtonVariant;
+    /** Disable the confirm button. */
+    confirmDisabled?: boolean;
     showDivider?: boolean;
     className?: string;
 }

package/dist/index.js

@@ -6974,6 +6974,7 @@ var DEFAULT_THEME = {
       borderBrand: "#1d4885",
       borderDestructive: "#b91c1c",
       borderInput: "#e5e5e5",
+      borderInputHover: "#dadada",
       // Interaction tokens (Figma: color > interaction)
       hovOpacityPrimary: "#0a0a0a0d",
       hovOpacitySecondary: "#0a0a0a0d",
@@ -7065,6 +7066,7 @@ var DEFAULT_THEME = {
       borderBrand: "#bfdbfe",
       borderDestructive: "#f87171",
       borderInput: "#262626",
+      borderInputHover: "#404040",
       // Interaction tokens (Figma: color > interaction)
       hovOpacityPrimary: "#ffffff0d",
       hovOpacitySecondary: "#ffffff1a",
@@ -7305,10 +7307,17 @@ var INPUT_TOKENS = {
   // Borderless: used in table-like contexts (key-value editor). No visible
   // border at rest. Focus reveals the brand border. No hover/pressed overlay.
   fieldBgBorderless: "bg-transparent",
-  // Base border + focus-within treatment.
-  // Inputs do NOT paint a fill on hover (matches Figma — the field reads as
-  // a static surface; only focus changes the border colour).
+  // Base border + focus-within treatment. Hover darkens the border (Figma
+  // hover variant: #dadada). focus-within wins over hover via pseudo-class
+  // ordering, so focus colour still applies when the field is hovered.
   fieldBase: "border border-token-input focus-within:border-token-brand disabled:pointer-events-none transition-colors",
+  // Hover-only border darkening for the active (non-invalid, non-disabled)
+  // state. Applied conditionally by the component so it does not override
+  // the destructive border on invalid fields. The `:not(:focus-within)`
+  // guard is required because Tailwind emits `:hover` rules AFTER
+  // `:focus-within` — without it, hovering a focused field would replace
+  // the brand border with the hover border.
+  fieldHover: "[&:not(:focus-within)]:hover:border-token-input-hover",
   // Borderless base — transparent resting border, brand border only on focus.
   // No hover/pressed overlay (these cells sit inside a larger interactive row).
   // Layout-shift safe: border width stays 1px across states (color-only swap).
@@ -7359,6 +7368,7 @@ var Input = React2.forwardRef(
   }, ref) => {
     const isDisabled = forceState === "disabled" || disabled;
     const isFocussed = forceState === "focussed";
+    const isInvalid = invalid || supportingTextType === "error";
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "div",
       {
@@ -7377,9 +7387,10 @@ var Input = React2.forwardRef(
                 inputSize === "sm" ? INPUT_TOKENS.fieldSizeSm : INPUT_TOKENS.fieldSizeMd,
                 inputVariant === "borderless" ? INPUT_TOKENS.fieldBgBorderless : inputVariant === "white" ? INPUT_TOKENS.fieldBgWhite : INPUT_TOKENS.fieldBgGrey,
                 inputVariant === "borderless" ? INPUT_TOKENS.fieldBaseBorderless : INPUT_TOKENS.fieldBase,
+                inputVariant !== "borderless" && !isDisabled && !isInvalid && INPUT_TOKENS.fieldHover,
                 isDisabled && INPUT_TOKENS.fieldDisabled,
                 isFocussed && "border-token-brand",
-                (invalid || supportingTextType === "error") && INPUT_TOKENS.fieldInvalid
+                isInvalid && INPUT_TOKENS.fieldInvalid
               ),
               style: {
                 borderRadius: INPUT_TOKENS.radius[input_border_radius],
@@ -7523,7 +7534,12 @@ var INPUT_GROUP_TOKENS = {
   field: "flex h-[var(--input-height,40px)] w-full items-center gap-2 overflow-hidden px-[var(--input-padding-horizontal,12px)] py-[10px] text-sm shadow-none",
   fieldBgGrey: "bg-token-white",
   fieldBgWhite: "bg-token-white",
-  fieldBase: "border border-token-light focus-within:border-token-brand disabled:pointer-events-none",
+  fieldBase: "border border-token-light focus-within:border-token-brand disabled:pointer-events-none transition-colors",
+  // Hover-only border darkening (Figma hover variant: #dadada). Applied
+  // conditionally by the component so it does not override invalid/disabled.
+  // The `:not(:focus-within)` guard prevents the hover border from beating
+  // the brand focus border (Tailwind emits `:hover` after `:focus-within`).
+  fieldHover: "[&:not(:focus-within)]:hover:border-token-input-hover",
   fieldInvalid: "border-token-destructive focus-within:border-token-destructive",
   fieldDisabled: "border-token-xlight",
   // Inner input area
@@ -7532,7 +7548,8 @@ var INPUT_GROUP_TOKENS = {
   segment: "shrink-0 flex items-center text-xs font-normal text-fg-placeholder px-3",
   segmentDivider: "border-token-light",
   // Textarea
-  textareaField: "w-full bg-token-white py-[10px] px-[var(--input-padding-horizontal,12px)] text-sm border border-token-light focus-visible:outline-none focus-visible:border-token-brand disabled:pointer-events-none shadow-none",
+  textareaField: "w-full bg-token-white py-[10px] px-[var(--input-padding-horizontal,12px)] text-sm border border-token-light focus-visible:outline-none focus-visible:border-token-brand disabled:pointer-events-none shadow-none transition-colors",
+  textareaHover: "[&:not(:focus-within)]:hover:border-token-input-hover",
   textareaInvalid: "border-token-destructive focus-visible:border-token-destructive",
   textareaDisabled: "border-token-xlight",
   radius: {
@@ -7582,6 +7599,7 @@ var InputGroup = React4.forwardRef(
     const isDisabled = forceState === "disabled" || disabled;
     const isFocussed = forceState === "focussed";
     const isActive = forceState === "active";
+    const isInvalid = !!invalid;
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
       {
@@ -7596,9 +7614,10 @@ var InputGroup = React4.forwardRef(
                 INPUT_GROUP_TOKENS.field,
                 inputVariant === "white" ? INPUT_GROUP_TOKENS.fieldBgWhite : INPUT_GROUP_TOKENS.fieldBgGrey,
                 INPUT_GROUP_TOKENS.fieldBase,
+                !isDisabled && !isInvalid && INPUT_GROUP_TOKENS.fieldHover,
                 isDisabled && INPUT_GROUP_TOKENS.fieldDisabled,
                 isFocussed && "border-token-brand",
-                invalid && INPUT_GROUP_TOKENS.fieldInvalid
+                isInvalid && INPUT_GROUP_TOKENS.fieldInvalid
               ),
               style: {
                 borderRadius: INPUT_GROUP_TOKENS.radius[input_border_radius],
@@ -7691,16 +7710,20 @@ var TEXTAREA_TOKENS = {
   labelRow: "flex items-center gap-[2px] text-xs font-medium leading-4 tracking-normal text-fg-black",
   mandatory: "text-fg-destructive",
   // Base shared field layout/typography.
-  // `relative` + `overflow-hidden` so the `before:` overlay respects the
-  // field's rounded corners via [border-radius:inherit].
   field: "relative flex min-h-[80px] w-full flex-col overflow-hidden px-[var(--input-padding-horizontal,12px)] py-[10px] text-sm shadow-none",
   fieldBgGrey: "bg-token-white",
   fieldBgWhite: "bg-token-white",
-  // Base border + focus treatment.
-  // Hover/pressed are painted via a pseudo-element overlay (see fieldBase) to avoid layout shift.
+  // Base border + focus treatment. Hover darkens the border (Figma hover
+  // variant: #dadada). focus-within wins over hover via pseudo-class
+  // ordering, so focus colour still applies when the field is hovered.
   // Focus ring uses outline (not ring) so it doesn't contribute to box size.
-  fieldBase: "border border-token-input focus-within:border-token-brand disabled:pointer-events-none before:pointer-events-none before:absolute before:inset-0 before:content-[''] before:[border-radius:inherit] before:transition-colors before:bg-transparent hover:before:bg-interaction-hov-opacity-primary active:before:bg-interaction-pressed-opacity-primary [&>*]:relative [&>*]:z-10",
-  fieldDisabled: "border-token-xlight hover:before:bg-transparent active:before:bg-transparent",
+  fieldBase: "border border-token-input focus-within:border-token-brand disabled:pointer-events-none transition-colors",
+  // Hover-only border darkening. Applied conditionally by the component so
+  // it does not override invalid/disabled borders. The `:not(:focus-within)`
+  // guard keeps the brand focus border visible when a focused field is
+  // hovered (Tailwind emits `:hover` after `:focus-within`).
+  fieldHover: "[&:not(:focus-within)]:hover:border-token-input-hover",
+  fieldDisabled: "border-token-xlight",
   fieldInvalid: "border-token-destructive focus-within:border-token-destructive",
   // Textarea itself.
   // `selection:` applies styles to the user's text selection (::selection):
@@ -7745,6 +7768,7 @@ var Textarea = React5.forwardRef(
   }, ref) => {
     const isDisabled = forceState === "disabled" || disabled;
     const isFocussed = forceState === "focussed";
+    const isInvalid = invalid || supportingTextType === "error";
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       {
@@ -7762,9 +7786,10 @@ var Textarea = React5.forwardRef(
                 TEXTAREA_TOKENS.field,
                 inputVariant === "white" ? TEXTAREA_TOKENS.fieldBgWhite : TEXTAREA_TOKENS.fieldBgGrey,
                 TEXTAREA_TOKENS.fieldBase,
+                !isDisabled && !isInvalid && TEXTAREA_TOKENS.fieldHover,
                 isDisabled && TEXTAREA_TOKENS.fieldDisabled,
                 isFocussed && "border-token-brand outline outline-2 outline-token-brand outline-offset-2",
-                (invalid || supportingTextType === "error") && TEXTAREA_TOKENS.fieldInvalid
+                isInvalid && TEXTAREA_TOKENS.fieldInvalid
               ),
               style: {
                 borderRadius: TEXTAREA_TOKENS.radius[input_border_radius],
@@ -8879,6 +8904,7 @@ var UI_COLOR_KEY_TO_CSS_VAR = {
   borderBrand: "--border-brand",
   borderDestructive: "--border-destructive",
   borderInput: "--border-input",
+  borderInputHover: "--border-input-hover",
   // Interaction tokens (Figma: color > interaction)
   hovOpacityPrimary: "--hov-opacity-primary",
   hovOpacitySecondary: "--hov-opacity-secondary",
@@ -9249,8 +9275,12 @@ var import_lucide_react6 = require("lucide-react");
 var SELECT_TOKENS = {
   // Main select container
   container: {
-    // Figma: trigger uses rounded-xl (12px), border visible, padding px-12 py-10
-    default: "rounded-[var(--rounded-xl,12px)] border border-token-input flex items-center justify-between gap-2 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none data-[state=open]:border-token-brand",
+    // Figma: trigger uses rounded-xl (12px), border visible, padding px-12 py-10.
+    // Hover darkens the border to match Figma (#dadada). The hover is scoped
+    // via `[&:not([data-state=open])]` so the brand border wins when the
+    // dropdown is open (Tailwind emits `data-[*]` selectors before `:hover`,
+    // so without the guard hover would override the open-state border).
+    default: "rounded-[var(--rounded-xl,12px)] border border-token-input flex items-center justify-between gap-2 transition-colors [&:not([data-state=open])]:hover:border-token-input-hover disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-token-input focus-visible:outline-none data-[state=open]:border-token-brand",
     // bg variants: default = input (grey), white = card
     bgDefault: "bg-token-white",
     bgWhite: "bg-token-white",
@@ -10519,7 +10549,7 @@ var DIALOG_TOKENS = {
   },
   header: {
     wrapper: "flex flex-col shrink-0",
-    row: "flex items-center gap-[10px] px-6 py-6",
+    row: "flex items-center gap-[10px] px-6 pt-6 pb-2",
     title: "flex-1 text-lg font-semibold leading-7 text-fg-black",
     closeBtn: "size-9 flex items-center justify-center rounded-md text-fg-black hover:bg-token-grey transition-colors cursor-pointer",
     divider: "h-px bg-border-token-light"
@@ -10554,6 +10584,8 @@ var Dialog = React29.forwardRef(
     showCancel = true,
     onCancel,
     onConfirm,
+    confirmVariant = "primary",
+    confirmDisabled = false,
     className
   }, ref) => {
     const close = React29.useCallback(() => onOpenChange(false), [onOpenChange]);
@@ -10626,9 +10658,10 @@ var Dialog = React29.forwardRef(
               /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 Button,
                 {
-                  variant: "primary",
+                  variant: confirmVariant,
                   button_border_radius: "rounded",
                   onClick: onConfirm,
+                  disabled: confirmDisabled,
                   children: confirmLabel
                 }
               )
@@ -10688,6 +10721,8 @@ var DialogFooter = React29.forwardRef(
     showCancel = true,
     onCancel,
     onConfirm,
+    confirmVariant = "primary",
+    confirmDisabled = false,
     showDivider = false,
     className
   }, ref) => {
@@ -10707,9 +10742,10 @@ var DialogFooter = React29.forwardRef(
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Button,
           {
-            variant: "primary",
+            variant: confirmVariant,
             button_border_radius: "rounded",
             onClick: onConfirm,
+            disabled: confirmDisabled,
             children: confirmLabel
           }
         )

package/dist/index.mjs

@@ -6870,6 +6870,7 @@ var DEFAULT_THEME = {
       borderBrand: "#1d4885",
       borderDestructive: "#b91c1c",
       borderInput: "#e5e5e5",
+      borderInputHover: "#dadada",
       // Interaction tokens (Figma: color > interaction)
       hovOpacityPrimary: "#0a0a0a0d",
       hovOpacitySecondary: "#0a0a0a0d",
@@ -6961,6 +6962,7 @@ var DEFAULT_THEME = {
       borderBrand: "#bfdbfe",
       borderDestructive: "#f87171",
       borderInput: "#262626",
+      borderInputHover: "#404040",
       // Interaction tokens (Figma: color > interaction)
       hovOpacityPrimary: "#ffffff0d",
       hovOpacitySecondary: "#ffffff1a",
@@ -7201,10 +7203,17 @@ var INPUT_TOKENS = {
   // Borderless: used in table-like contexts (key-value editor). No visible
   // border at rest. Focus reveals the brand border. No hover/pressed overlay.
   fieldBgBorderless: "bg-transparent",
-  // Base border + focus-within treatment.
-  // Inputs do NOT paint a fill on hover (matches Figma — the field reads as
-  // a static surface; only focus changes the border colour).
+  // Base border + focus-within treatment. Hover darkens the border (Figma
+  // hover variant: #dadada). focus-within wins over hover via pseudo-class
+  // ordering, so focus colour still applies when the field is hovered.
   fieldBase: "border border-token-input focus-within:border-token-brand disabled:pointer-events-none transition-colors",
+  // Hover-only border darkening for the active (non-invalid, non-disabled)
+  // state. Applied conditionally by the component so it does not override
+  // the destructive border on invalid fields. The `:not(:focus-within)`
+  // guard is required because Tailwind emits `:hover` rules AFTER
+  // `:focus-within` — without it, hovering a focused field would replace
+  // the brand border with the hover border.
+  fieldHover: "[&:not(:focus-within)]:hover:border-token-input-hover",
   // Borderless base — transparent resting border, brand border only on focus.
   // No hover/pressed overlay (these cells sit inside a larger interactive row).
   // Layout-shift safe: border width stays 1px across states (color-only swap).
@@ -7255,6 +7264,7 @@ var Input = React2.forwardRef(
   }, ref) => {
     const isDisabled = forceState === "disabled" || disabled;
     const isFocussed = forceState === "focussed";
+    const isInvalid = invalid || supportingTextType === "error";
     return /* @__PURE__ */ jsxs2(
       "div",
       {
@@ -7273,9 +7283,10 @@ var Input = React2.forwardRef(
                 inputSize === "sm" ? INPUT_TOKENS.fieldSizeSm : INPUT_TOKENS.fieldSizeMd,
                 inputVariant === "borderless" ? INPUT_TOKENS.fieldBgBorderless : inputVariant === "white" ? INPUT_TOKENS.fieldBgWhite : INPUT_TOKENS.fieldBgGrey,
                 inputVariant === "borderless" ? INPUT_TOKENS.fieldBaseBorderless : INPUT_TOKENS.fieldBase,
+                inputVariant !== "borderless" && !isDisabled && !isInvalid && INPUT_TOKENS.fieldHover,
                 isDisabled && INPUT_TOKENS.fieldDisabled,
                 isFocussed && "border-token-brand",
-                (invalid || supportingTextType === "error") && INPUT_TOKENS.fieldInvalid
+                isInvalid && INPUT_TOKENS.fieldInvalid
               ),
               style: {
                 borderRadius: INPUT_TOKENS.radius[input_border_radius],
@@ -7419,7 +7430,12 @@ var INPUT_GROUP_TOKENS = {
   field: "flex h-[var(--input-height,40px)] w-full items-center gap-2 overflow-hidden px-[var(--input-padding-horizontal,12px)] py-[10px] text-sm shadow-none",
   fieldBgGrey: "bg-token-white",
   fieldBgWhite: "bg-token-white",
-  fieldBase: "border border-token-light focus-within:border-token-brand disabled:pointer-events-none",
+  fieldBase: "border border-token-light focus-within:border-token-brand disabled:pointer-events-none transition-colors",
+  // Hover-only border darkening (Figma hover variant: #dadada). Applied
+  // conditionally by the component so it does not override invalid/disabled.
+  // The `:not(:focus-within)` guard prevents the hover border from beating
+  // the brand focus border (Tailwind emits `:hover` after `:focus-within`).
+  fieldHover: "[&:not(:focus-within)]:hover:border-token-input-hover",
   fieldInvalid: "border-token-destructive focus-within:border-token-destructive",
   fieldDisabled: "border-token-xlight",
   // Inner input area
@@ -7428,7 +7444,8 @@ var INPUT_GROUP_TOKENS = {
   segment: "shrink-0 flex items-center text-xs font-normal text-fg-placeholder px-3",
   segmentDivider: "border-token-light",
   // Textarea
-  textareaField: "w-full bg-token-white py-[10px] px-[var(--input-padding-horizontal,12px)] text-sm border border-token-light focus-visible:outline-none focus-visible:border-token-brand disabled:pointer-events-none shadow-none",
+  textareaField: "w-full bg-token-white py-[10px] px-[var(--input-padding-horizontal,12px)] text-sm border border-token-light focus-visible:outline-none focus-visible:border-token-brand disabled:pointer-events-none shadow-none transition-colors",
+  textareaHover: "[&:not(:focus-within)]:hover:border-token-input-hover",
   textareaInvalid: "border-token-destructive focus-visible:border-token-destructive",
   textareaDisabled: "border-token-xlight",
   radius: {
@@ -7478,6 +7495,7 @@ var InputGroup = React4.forwardRef(
     const isDisabled = forceState === "disabled" || disabled;
     const isFocussed = forceState === "focussed";
     const isActive = forceState === "active";
+    const isInvalid = !!invalid;
     return /* @__PURE__ */ jsxs4(
       "div",
       {
@@ -7492,9 +7510,10 @@ var InputGroup = React4.forwardRef(
                 INPUT_GROUP_TOKENS.field,
                 inputVariant === "white" ? INPUT_GROUP_TOKENS.fieldBgWhite : INPUT_GROUP_TOKENS.fieldBgGrey,
                 INPUT_GROUP_TOKENS.fieldBase,
+                !isDisabled && !isInvalid && INPUT_GROUP_TOKENS.fieldHover,
                 isDisabled && INPUT_GROUP_TOKENS.fieldDisabled,
                 isFocussed && "border-token-brand",
-                invalid && INPUT_GROUP_TOKENS.fieldInvalid
+                isInvalid && INPUT_GROUP_TOKENS.fieldInvalid
               ),
               style: {
                 borderRadius: INPUT_GROUP_TOKENS.radius[input_border_radius],
@@ -7587,16 +7606,20 @@ var TEXTAREA_TOKENS = {
   labelRow: "flex items-center gap-[2px] text-xs font-medium leading-4 tracking-normal text-fg-black",
   mandatory: "text-fg-destructive",
   // Base shared field layout/typography.
-  // `relative` + `overflow-hidden` so the `before:` overlay respects the
-  // field's rounded corners via [border-radius:inherit].
   field: "relative flex min-h-[80px] w-full flex-col overflow-hidden px-[var(--input-padding-horizontal,12px)] py-[10px] text-sm shadow-none",
   fieldBgGrey: "bg-token-white",
   fieldBgWhite: "bg-token-white",
-  // Base border + focus treatment.
-  // Hover/pressed are painted via a pseudo-element overlay (see fieldBase) to avoid layout shift.
+  // Base border + focus treatment. Hover darkens the border (Figma hover
+  // variant: #dadada). focus-within wins over hover via pseudo-class
+  // ordering, so focus colour still applies when the field is hovered.
   // Focus ring uses outline (not ring) so it doesn't contribute to box size.
-  fieldBase: "border border-token-input focus-within:border-token-brand disabled:pointer-events-none before:pointer-events-none before:absolute before:inset-0 before:content-[''] before:[border-radius:inherit] before:transition-colors before:bg-transparent hover:before:bg-interaction-hov-opacity-primary active:before:bg-interaction-pressed-opacity-primary [&>*]:relative [&>*]:z-10",
-  fieldDisabled: "border-token-xlight hover:before:bg-transparent active:before:bg-transparent",
+  fieldBase: "border border-token-input focus-within:border-token-brand disabled:pointer-events-none transition-colors",
+  // Hover-only border darkening. Applied conditionally by the component so
+  // it does not override invalid/disabled borders. The `:not(:focus-within)`
+  // guard keeps the brand focus border visible when a focused field is
+  // hovered (Tailwind emits `:hover` after `:focus-within`).
+  fieldHover: "[&:not(:focus-within)]:hover:border-token-input-hover",
+  fieldDisabled: "border-token-xlight",
   fieldInvalid: "border-token-destructive focus-within:border-token-destructive",
   // Textarea itself.
   // `selection:` applies styles to the user's text selection (::selection):
@@ -7641,6 +7664,7 @@ var Textarea = React5.forwardRef(
   }, ref) => {
     const isDisabled = forceState === "disabled" || disabled;
     const isFocussed = forceState === "focussed";
+    const isInvalid = invalid || supportingTextType === "error";
     return /* @__PURE__ */ jsxs5(
       "div",
       {
@@ -7658,9 +7682,10 @@ var Textarea = React5.forwardRef(
                 TEXTAREA_TOKENS.field,
                 inputVariant === "white" ? TEXTAREA_TOKENS.fieldBgWhite : TEXTAREA_TOKENS.fieldBgGrey,
                 TEXTAREA_TOKENS.fieldBase,
+                !isDisabled && !isInvalid && TEXTAREA_TOKENS.fieldHover,
                 isDisabled && TEXTAREA_TOKENS.fieldDisabled,
                 isFocussed && "border-token-brand outline outline-2 outline-token-brand outline-offset-2",
-                (invalid || supportingTextType === "error") && TEXTAREA_TOKENS.fieldInvalid
+                isInvalid && TEXTAREA_TOKENS.fieldInvalid
               ),
               style: {
                 borderRadius: TEXTAREA_TOKENS.radius[input_border_radius],
@@ -8775,6 +8800,7 @@ var UI_COLOR_KEY_TO_CSS_VAR = {
   borderBrand: "--border-brand",
   borderDestructive: "--border-destructive",
   borderInput: "--border-input",
+  borderInputHover: "--border-input-hover",
   // Interaction tokens (Figma: color > interaction)
   hovOpacityPrimary: "--hov-opacity-primary",
   hovOpacitySecondary: "--hov-opacity-secondary",
@@ -9145,8 +9171,12 @@ import { Check as Check3, ChevronDown as ChevronDown3, Search } from "lucide-rea
 var SELECT_TOKENS = {
   // Main select container
   container: {
-    // Figma: trigger uses rounded-xl (12px), border visible, padding px-12 py-10
-    default: "rounded-[var(--rounded-xl,12px)] border border-token-input flex items-center justify-between gap-2 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none data-[state=open]:border-token-brand",
+    // Figma: trigger uses rounded-xl (12px), border visible, padding px-12 py-10.
+    // Hover darkens the border to match Figma (#dadada). The hover is scoped
+    // via `[&:not([data-state=open])]` so the brand border wins when the
+    // dropdown is open (Tailwind emits `data-[*]` selectors before `:hover`,
+    // so without the guard hover would override the open-state border).
+    default: "rounded-[var(--rounded-xl,12px)] border border-token-input flex items-center justify-between gap-2 transition-colors [&:not([data-state=open])]:hover:border-token-input-hover disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-token-input focus-visible:outline-none data-[state=open]:border-token-brand",
     // bg variants: default = input (grey), white = card
     bgDefault: "bg-token-white",
     bgWhite: "bg-token-white",
@@ -10415,7 +10445,7 @@ var DIALOG_TOKENS = {
   },
   header: {
     wrapper: "flex flex-col shrink-0",
-    row: "flex items-center gap-[10px] px-6 py-6",
+    row: "flex items-center gap-[10px] px-6 pt-6 pb-2",
     title: "flex-1 text-lg font-semibold leading-7 text-fg-black",
     closeBtn: "size-9 flex items-center justify-center rounded-md text-fg-black hover:bg-token-grey transition-colors cursor-pointer",
     divider: "h-px bg-border-token-light"
@@ -10450,6 +10480,8 @@ var Dialog = React29.forwardRef(
     showCancel = true,
     onCancel,
     onConfirm,
+    confirmVariant = "primary",
+    confirmDisabled = false,
     className
   }, ref) => {
     const close = React29.useCallback(() => onOpenChange(false), [onOpenChange]);
@@ -10522,9 +10554,10 @@ var Dialog = React29.forwardRef(
               /* @__PURE__ */ jsx25(
                 Button,
                 {
-                  variant: "primary",
+                  variant: confirmVariant,
                   button_border_radius: "rounded",
                   onClick: onConfirm,
+                  disabled: confirmDisabled,
                   children: confirmLabel
                 }
               )
@@ -10584,6 +10617,8 @@ var DialogFooter = React29.forwardRef(
     showCancel = true,
     onCancel,
     onConfirm,
+    confirmVariant = "primary",
+    confirmDisabled = false,
     showDivider = false,
     className
   }, ref) => {
@@ -10603,9 +10638,10 @@ var DialogFooter = React29.forwardRef(
         /* @__PURE__ */ jsx25(
           Button,
           {
-            variant: "primary",
+            variant: confirmVariant,
             button_border_radius: "rounded",
             onClick: onConfirm,
+            disabled: confirmDisabled,
             children: confirmLabel
           }
         )

package/dist/styles.css

@@ -1511,15 +1511,9 @@
   .lego-land .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
-  .lego-land .py-6 {
-    padding-block: calc(var(--spacing) * 6);
-  }
   .lego-land .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
-  .lego-land .py-10 {
-    padding-block: calc(var(--spacing) * 10);
-  }
   .lego-land .py-\[3px\] {
     padding-block: 3px;
   }
@@ -1541,6 +1535,9 @@
   .lego-land .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
+  .lego-land .pt-6 {
+    padding-top: calc(var(--spacing) * 6);
+  }
   .lego-land .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
@@ -2160,24 +2157,12 @@
       inset: calc(var(--spacing) * 0);
     }
   }
-  .lego-land .before\:\[border-radius\:inherit\] {
-    .lego-land &::before {
-      content: var(--tw-content);
-      border-radius: inherit;
-    }
-  }
   .lego-land .before\:rounded-full {
     .lego-land &::before {
       content: var(--tw-content);
       border-radius: calc(infinity * 1px);
     }
   }
-  .lego-land .before\:bg-transparent {
-    .lego-land &::before {
-      content: var(--tw-content);
-      background-color: transparent;
-    }
-  }
   .lego-land .before\:transition-colors {
     .lego-land &::before {
       content: var(--tw-content);
@@ -2388,16 +2373,6 @@
       }
     }
   }
-  .lego-land .hover\:before\:bg-transparent {
-    .lego-land &:hover {
-      @media (hover: hover) {
-        &::before {
-          content: var(--tw-content);
-          background-color: transparent;
-        }
-      }
-    }
-  }
   .lego-land .hover\:after\:opacity-100 {
     .lego-land &:hover {
       @media (hover: hover) {
@@ -2531,14 +2506,6 @@
       }
     }
   }
-  .lego-land .active\:before\:bg-transparent {
-    .lego-land &:active {
-      .lego-land &::before {
-        content: var(--tw-content);
-        background-color: transparent;
-      }
-    }
-  }
   .lego-land .active\:after\:bg-black\/25 {
     .lego-land &:active {
       .lego-land &::after {
@@ -2608,6 +2575,15 @@
       opacity: 100%;
     }
   }
+  .lego-land .disabled\:hover\:border-token-input {
+    .lego-land &:disabled {
+      .lego-land &:hover {
+        @media (hover: hover) {
+          border-color: hsl(var(--border-input));
+        }
+      }
+    }
+  }
   .lego-land .disabled\:hover\:before\:bg-transparent {
     .lego-land &:disabled {
       .lego-land &:hover {
@@ -2842,6 +2818,24 @@
               appearance: none;
     }
   }
+  .lego-land .\[\&\:not\(\:focus-within\)\]\:hover\:border-token-input-hover {
+    .lego-land &:not(:focus-within) {
+      .lego-land &:hover {
+        @media (hover: hover) {
+          border-color: hsl(var(--border-input-hover));
+        }
+      }
+    }
+  }
+  .lego-land .\[\&\:not\(\[data-state\=open\]\)\]\:hover\:border-token-input-hover {
+    .lego-land &:not([data-state=open]) {
+      .lego-land &:hover {
+        @media (hover: hover) {
+          border-color: hsl(var(--border-input-hover));
+        }
+      }
+    }
+  }
   .lego-land .\[\&\>\*\]\:relative {
     .lego-land &>* {
       position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nurix/ui-component-library",
-  "version": "1.1.4-stage.117",
+  "version": "1.1.4-stage.119",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",