@eightshift/ui-components 5.2.1 → 5.3.1

package/dist/assets/wp-font-enhancements.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
 .edit-post-header, .components-popover, .edit-post-sidebar, .wp-block-post-title, .components-select-control__input, .components-base-control__field, .components-base-control__label, .components-combobox-control__suggestions-container, .components-input-control__label, .components-input-control__input, .components-checkbox-control__label, .components-menu-group__label, .components-menu-item__button, .components-notice .components-notice__content, .components-tooltip, .components-modal__header, .preferences-modal__section-title, .preferences-modal__section-description, .block-editor-inserter__tabs, .editor-list-view-sidebar, .edit-post-layout__footer, .components-snackbar, .components-text-control__input {
   font-family: var(--es-font-sans, "Geist Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
 }

package/dist/assets/wp-ui-enhancements.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
 @layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
@@ -193,27 +193,18 @@
   border-style: var(--tw-border-style);
   border-width: 1px;
   border-color: var(--es-color-gray-800, oklch(27.8% .033 256.848));
-  background-color: var(--es-color-gray-950, oklch(13% .028 261.692));
-  border-radius: var(--es-radius-md, .375rem) !important;
-}
-
-@supports (color: color-mix(in lab, red, red)) {
-  .components-tooltip {
-    background-color: color-mix(in oklab, var(--es-color-gray-950, oklch(13% .028 261.692)) 70%, transparent);
-  }
-}
-
-.components-tooltip {
+  background-color: color-mix(in oklab, var(--es-color-gray-950, oklch(13% .028 261.692)) 70%, transparent);
   padding-inline: calc(var(--es-spacing, .25rem) * 1);
   padding-block: calc(var(--es-spacing, .25rem) * .5);
   color: var(--es-color-white, #fff);
   --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   --tw-backdrop-blur: blur(var(--es-blur-xl, 24px));
-  -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-  backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
   --tw-backdrop-brightness: brightness(105%);
   --tw-backdrop-saturate: saturate(150%);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  border-radius: var(--es-radius-md, .375rem) !important;
 }
 
 .components-tooltip:has( > :first-child) {

package/dist/components/animated-visibility/animated-visibility.js

@@ -45,36 +45,36 @@ const AnimatedVisibility = (props) => {
   }, []);
   const transitions = {
     fade: {
-      inClassName: "es:motion-opacity-in es:motion-duration-300",
-      outClassName: "es:motion-opacity-out es:motion-duration-200"
+      inClassName: "es:motion-opacity-in es:motion-duration-500",
+      outClassName: "es:motion-opacity-out es:motion-duration-300"
     },
     slideFade: {
-      inClassName: "es:motion-safe:motion-translate-y-in-[-5%] es:motion-opacity-in es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
-      outClassName: "es:motion-safe:motion-translate-y-out-[-5%] es:motion-opacity-out es:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
+      inClassName: "es:motion-safe:motion-translate-y-in-[-5%] es:motion-opacity-in es:motion-duration-500 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
+      outClassName: "es:motion-safe:motion-translate-y-out-[-5%] es:motion-opacity-out es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
     },
     slideInFadeOut: {
-      inClassName: "es:motion-safe:motion-translate-y-in-[-5%] es:motion-opacity-in es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
-      outClassName: "es:motion-opacity-out es:motion-duration-200"
+      inClassName: "es:motion-safe:motion-translate-y-in-[-5%] es:motion-opacity-in es:motion-duration-500 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
+      outClassName: "es:motion-opacity-out es:motion-duration-300"
     },
     slideFadeUpSlight: {
-      inClassName: "es:motion-safe:motion-translate-y-in-[0.25rem] es:motion-opacity-in es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
-      outClassName: "es:motion-safe:motion-translate-y-out-[0.25rem] es:motion-opacity-out es:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
+      inClassName: "es:motion-safe:motion-translate-y-in-[0.25rem] es:motion-opacity-in es:motion-duration-500 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
+      outClassName: "es:motion-safe:motion-translate-y-out-[0.25rem] es:motion-opacity-out es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
     },
     slideFadeDownSlight: {
-      inClassName: "es:motion-safe:motion-translate-y-in-[-0.25rem] es:motion-opacity-in es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
-      outClassName: "es:motion-safe:motion-translate-y-out-[-0.25rem] es:motion-opacity-out es:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
+      inClassName: "es:motion-safe:motion-translate-y-in-[-0.25rem] es:motion-opacity-in es:motion-duration-500 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
+      outClassName: "es:motion-safe:motion-translate-y-out-[-0.25rem] es:motion-opacity-out es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
     },
     scaleFade: {
-      inClassName: "es:motion-safe:motion-scale-in-95 es:motion-opacity-in es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
-      outClassName: "es:motion-safe:motion-scale-out-90 es:motion-opacity-out es:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
+      inClassName: "es:motion-safe:motion-scale-in-95 es:motion-opacity-in es:motion-duration-500 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
+      outClassName: "es:motion-safe:motion-scale-out-90 es:motion-opacity-out es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
     },
     scaleSlideFade: {
-      inClassName: "es:motion-safe:motion-translate-y-in-[-5%] es:motion-safe:motion-scale-in-95 es:motion-opacity-in es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
-      outClassName: "es:motion-safe:motion-translate-y-out-[-5%] es:motion-safe:motion-scale-out-90 es:motion-opacity-out es:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
+      inClassName: "es:motion-safe:motion-translate-y-in-[-5%] es:motion-safe:motion-scale-in-95 es:motion-opacity-in es:motion-duration-500 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
+      outClassName: "es:motion-safe:motion-translate-y-out-[-5%] es:motion-safe:motion-scale-out-90 es:motion-opacity-out es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
     },
     scaleRotateFade: {
-      inClassName: "es:motion-rotate-in es:motion-safe:motion-scale-in-95 es:motion-opacity-in es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
-      outClassName: "es:motion-rotate-out es:motion-safe:motion-scale-out-90 es:motion-opacity-out es:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
+      inClassName: "es:motion-rotate-in es:motion-safe:motion-scale-in-95 es:motion-opacity-in es:motion-duration-500 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity",
+      outClassName: "es:motion-rotate-out es:motion-safe:motion-scale-out-90 es:motion-opacity-out es:motion-duration-300 es:motion-safe:motion-ease-spring-bouncy es:motion-ease-linear/opacity"
     }
   };
   return /* @__PURE__ */ jsx(Fragment, { children: isVisibleInner && /* @__PURE__ */ jsx(

package/dist/components/button/button.js

@@ -1,14 +1,14 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1, b as $0393f8ab869a0f1a$export$c17561cb55d4db30 } from "../../Button-RTwMSBs-.js";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1, b as $0393f8ab869a0f1a$export$c17561cb55d4db30 } from "../../Button-npzfSoYo.js";
 import { k as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, h as $64fa3d84918910a7$export$4d86445c2cf5e3, b as $3ef42575df84b30b$export$9d1611c77c2fe928, l as $df56164dff5785e2$export$4338b53315abf666 } from "../../utils-cvK1vxO7.js";
-import { $ as $9bf71ea28793e738$export$c5251b9e124bf29 } from "../../FocusScope-BnwM-e8R.js";
+import { $ as $9bf71ea28793e738$export$c5251b9e124bf29 } from "../../FocusScope-DJApHXhY.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
 import React__default, { useState, useRef, forwardRef, createContext, cloneElement } from "react";
 import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-DMOmz986.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { c as cva } from "../../index-Dq3gT5pW.js";
 import { Tooltip } from "../tooltip/tooltip.js";
-import { _ as __ } from "../../default-i18n-DY6EfUSA.js";
+import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
 import { icons } from "../../icons/icons.js";
 import "../../react-jsx-parser.min-LF707GK8.js";
 function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
@@ -89,30 +89,35 @@ const $13c3c67164f4d5be$export$4c260019440d418f = /* @__PURE__ */ forwardRef(fun
     "data-orientation": props.orientation || "horizontal"
   }, renderProps.children);
 });
+/**
+ * @typedef {Object} ButtonProps
+ * @property {JSX.Element} [props.icon] - Icon to display within the button.
+ * @property {ButtonSize} [props.size='default'] - The size of the button.
+ * @property {ButtonType} [props.type='default'] - The type of the button.
+ * @property {boolean} [props.disabled] - If `true`, the button is disabled.
+ * @property {string} [props.className] - Classes to pass to the button.
+ * @property {string|boolean} [props.tooltip] - Tooltip text to display on hover. If set to `true` and an `aria-label` is not provided, the tooltip text will be used as the `aria-label`.
+ * @property {Function} [props.onPress] - Function to run when the button is pressed.
+ * @property {React.Ref} [props.forwardedRef] - Ref to forward to the button. Use the same as the `ref` prop.
+ * @property {string} [props.wrapperClassName] - Classes to pass to the tooltip wrapper.
+ * @property {TooltipProps} [props.tooltipProps] - Props to pass to the tooltip.
+ * @property {boolean} [props.pending] - If `true`, the button is in a pending state, which can be used to indicate that an action is being processed.
+ * @property {string} [props.pendingAriaLabel='Loading'] - ARIA label for the pending state, used for screen readers.
+ * @property {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @typedef {'small' | 'default' | 'large'} ButtonSize
+ * @typedef {'default' | 'selected' | 'selectedGhost' | 'ghost' | 'danger' | 'dangerGhost'} ButtonType
+ *
+ * @preserve
+ */
 /**
  * A simple button component.
  *
  * @component
- * @param {Object} props - Component props.
- * @param {JSX.Element} [props.icon] - Icon to display within the button.
- * @param {ButtonSize} [props.size='default'] - The size of the button.
- * @param {ButtonType} [props.type='default'] - The type of the button.
- * @param {boolean} [props.disabled] - If `true`, the button is disabled.
- * @param {string} [props.className] - Classes to pass to the button.
- * @param {string|boolean} [props.tooltip] - Tooltip text to display on hover. If set to `true` and an `aria-label` is not provided, the tooltip text will be used as the `aria-label`.
- * @param {Function} [props.onPress] - Function to run when the button is pressed.
- * @param {React.Ref} [props.forwardedRef] - Ref to forward to the button. Use the same as the `ref` prop.
- * @param {string} [props.wrapperClassName] - Classes to pass to the tooltip wrapper.
- * @param {Object} [props.tooltipProps] - Props to pass to the tooltip.
- * @param {boolean} [props.pending] - If `true`, the button is in a pending state, which can be used to indicate that an action is being processed.
- * @param {string} [props.pendingAriaLabel='Loading'] - ARIA label for the pending state, used for screen readers.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ * @param {ButtonProps} props - Component props.
  *
  * @returns {JSX.Element} The Button component.
  *
- * @typedef {'small' | 'default' | 'large'} ButtonSize
- * @typedef {'default' | 'selected' | 'selectedGhost' | 'ghost' | 'danger' | 'dangerGhost'} ButtonType
- *
  * @example
  * <Button onPress={() => console.log('Hi!')} icon={icons.myIcon} />
  *
@@ -166,8 +171,8 @@ const Button = (props) => {
     {
       variants: {
         size: {
-          small: "es:icon:size-4.5 es:rounded-7",
-          default: "es:icon:size-5.5 es:rounded-10",
+          small: "es:icon:size-5 es:rounded-7",
+          default: "es:icon:size-5 es:rounded-10",
           large: "es:icon:size-6 es:rounded-xl"
         },
         type: {
@@ -198,7 +203,7 @@ const Button = (props) => {
           disabled: false,
           class: [
             "es:text-black",
-            "es:from-secondary-50 es:to-white",
+            "es:from-white es:to-secondary-50",
             "es:border-secondary-300",
             "es:inset-ring-secondary-100",
             "es:inset-shadow-secondary-100/50",

package/dist/components/checkbox/checkbox.js

@@ -1,15 +1,16 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { a as $4e85f108e88277b8$export$b085522c77523c51 } from "../../RSPContexts-2lR5GG9p.js";
 import { b as $3ef42575df84b30b$export$9d1611c77c2fe928, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, g as $64fa3d84918910a7$export$ef03459518577ad4, h as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "../../utils-cvK1vxO7.js";
-import { a as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, b as $e93e671b31057976$export$b8473d3665f3a75a, c as $e5be200c675c3b3a$export$a763b9476acd3eb, d as $e5be200c675c3b3a$export$dad6ae84456c676a, $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-BeMxJA29.js";
+import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
 import React__default, { useEffect, useRef, forwardRef, useContext, createContext, useMemo } from "react";
-import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-BnrkvZ7e.js";
-import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-OaIBlwRu.js";
-import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-BF8hvidm.js";
-import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-D5BfOWag.js";
-import { e as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-44IApaa2.js";
-import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-D9s7FTtC.js";
+import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, a as $e93e671b31057976$export$b8473d3665f3a75a, b as $e5be200c675c3b3a$export$a763b9476acd3eb, c as $e5be200c675c3b3a$export$dad6ae84456c676a } from "../../useFormValidation-CUtZcedF.js";
+import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-CBQIDzpQ.js";
+import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-C8CedY6Z.js";
+import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-CiAradXs.js";
+import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CUxgjvAY.js";
+import { w as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-LmGemtHE.js";
+import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-X6SggVVO.js";
 import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DWVaNd2E.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
@@ -258,7 +259,7 @@ const Checkbox2 = (props) => {
             icon,
             label,
             subtitle,
-            className: clsx("es:ml-1", labelClassName),
+            className: labelClassName,
             inlineSubtitle,
             fullSizeSubtitle: true,
             fullWidth: true,
@@ -298,7 +299,7 @@ const Checkbox2 = (props) => {
                 {
                   transition: "scaleRotateFade",
                   visible: !indeterminate && checked,
-                  className: "es:transition-none es:icon:size-3 es:icon:stroke-3",
+                  className: "es:transition-none es:icon:size-4 es:icon:stroke-2",
                   noInitial: true,
                   children: icons.check
                 }
@@ -306,7 +307,7 @@ const Checkbox2 = (props) => {
             ]
           }
         ),
-        !icon && !alignEnd && (label || subtitle) && /* @__PURE__ */ jsx(
+        !icon && (label || subtitle) && /* @__PURE__ */ jsx(
           RichLabel,
           {
             label,

package/dist/components/color-pickers/color-picker.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { _ as __ } from "../../default-i18n-DY6EfUSA.js";
+import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
 import { Menu, MenuItem, MenuSeparator, MenuSection } from "../menu/menu.js";
 import { ColorSwatch } from "./color-swatch.js";
 import { RichLabel } from "../rich-label/rich-label.js";
@@ -115,7 +115,7 @@ const ColorPicker = (props) => {
       endIcon: /* @__PURE__ */ jsx(
         ColorSwatch,
         {
-          className: "es:size-5.5!",
+          className: "es:size-5!",
           color
         }
       ),
@@ -127,7 +127,8 @@ const ColorPicker = (props) => {
           RichLabel,
           {
             label: name.replaceAll("-", " "),
-            subtitle: color.toUpperCase()
+            subtitle: color.toUpperCase(),
+            subtitleClassName: "es:font-mono"
           }
         )
       ]
@@ -216,7 +217,7 @@ const ColorPicker = (props) => {
                 {
                   onClick: () => onChange(void 0),
                   selected: typeof value === "undefined",
-                  endIcon: /* @__PURE__ */ jsx(ColorSwatch, { className: "es:size-5.5!" }),
+                  endIcon: /* @__PURE__ */ jsx(ColorSwatch, { className: "es:size-5!" }),
                   children: clearItemLabel
                 }
               ),

package/dist/components/color-pickers/color-swatch.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-xVS3rMYS.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { _ as __ } from "../../default-i18n-DY6EfUSA.js";
+import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
 import { $ as $799cddbef784668f$export$6e865ea70d7724f } from "../../Color-WxFE7lQB.js";
 /**
  * A simple color/gradient swatch.

package/dist/components/color-pickers/gradient-editor.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
-import { _ as __ } from "../../default-i18n-DY6EfUSA.js";
+import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
 import { useMemo, useState } from "react";
 import { ButtonGroup, Button } from "../button/button.js";
 import { icons } from "../../icons/icons.js";
@@ -31,14 +31,14 @@ function g(e) {
   }
   return o;
 }
-var u = /^(-?\d+\.?\d*)(%|vw|vh|px|em|rem|deg|rad|grad|turn)$/;
+var u = /^(-?\d+\.?\d*)(%|vw|vh|px|em|rem|deg|rad|grad|turn|ch|vmin|vmax)?$/;
 function m(e) {
   return u.test(e);
 }
 function l(e) {
   if (!e) return;
   let [, o, t] = e.trim().match(u) || [];
-  return { value: o, unit: t };
+  return { value: o, unit: t ?? "px" };
 }
 function P(e) {
   if (!/^(repeating-)?linear-gradient/.test(e)) throw new SyntaxError(`could not find syntax for this item: ${e}`);
@@ -48,12 +48,12 @@ function P(e) {
 function x(e) {
   return e.startsWith("to ") ? { type: "directional", value: e.replace("to ", "") } : ["turn", "deg", "grad", "rad"].some((o) => e.endsWith(o)) ? { type: "angular", value: l(e) } : null;
 }
-var w = /* @__PURE__ */ new Set(["closest-corner", "closest-side", "farthest-corner", "farthest-side"]), v = /* @__PURE__ */ new Set(["center", "left", "top", "right", "bottom"]);
+var v = /* @__PURE__ */ new Set(["closest-corner", "closest-side", "farthest-corner", "farthest-side"]), w = /* @__PURE__ */ new Set(["center", "left", "top", "right", "bottom"]);
 function d(e) {
-  return w.has(e);
+  return v.has(e);
 }
 function h(e) {
-  return v.has(e);
+  return w.has(e);
 }
 function R(e) {
   let o = Array(2).fill("");
@@ -68,7 +68,7 @@ function K(e) {
   return p ? n.shape = p : a.length === 1 && !d(a[0]) ? n.shape = "circle" : n.shape = "ellipse", a.length === 0 && a.push("farthest-corner"), n.size = a.map((f) => d(f) ? { type: "keyword", value: f } : { type: "length", value: l(f) }), n.position.x = h(s[0]) ? { type: "keyword", value: s[0] } : { type: "length", value: l(s[0]) }, n.position.y = h(s[1]) ? { type: "keyword", value: s[1] } : { type: "length", value: l(s[1]) }, (p || a.length > 0 || r[1]) && i.shift(), { ...n, stops: g(i) };
 }
 function S(e) {
-  return /(circle|ellipse|at)/.test(e) ? false : /^(rgba?|hwb|hsl|lab|lch|oklab|color|#|[a-zA-Z]+)/.test(e);
+  return /(circle|ellipse|at)/.test(e) ? false : /^(rgba?|hwb|hsla?|lab|lch|oklab|color|#|[a-zA-Z]+)/.test(e);
 }
 var C = /* @__PURE__ */ new Set(["from", "in", "at"]);
 function j(e) {

package/dist/components/color-pickers/solid-color-picker.js

@@ -3,25 +3,25 @@ import React__default, { useState, useMemo, useRef, useCallback, forwardRef, cre
 import { b as $4e85f108e88277b8$export$ebe63fadcdce34ed, c as $4e85f108e88277b8$export$44644b8a16031b5b, d as $4e85f108e88277b8$export$717b2c0a523a0b53 } from "../../RSPContexts-2lR5GG9p.js";
 import { b as $3ef42575df84b30b$export$9d1611c77c2fe928, d as $bdb11010cef70236$export$f680877a34711e37, h as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $64fa3d84918910a7$export$29f1550f4b0d4415, i as $64fa3d84918910a7$export$2881499e37b75b9a, f as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, g as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-cvK1vxO7.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
-import { $ as $9ab94262bd0047c7$export$420e68273165f4ec, a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-D5BfOWag.js";
-import { a as $458b0a5536c1a7cf$export$40bfa8c7b0832715, f as $03deb23ff14920c4$export$4eaf04e54aa8eed6, z as $7215afc6de606d6b$export$de79e2c695e052f3, A as $46d819fcbaf35654$export$8f71654801c2f7cd, o as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, b as $c87311424ea30a05$export$fedb369cb70207f1, t as $c87311424ea30a05$export$a11b0059900ceec8, e as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-44IApaa2.js";
+import { $ as $9ab94262bd0047c7$export$420e68273165f4ec, a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CUxgjvAY.js";
+import { a as $458b0a5536c1a7cf$export$40bfa8c7b0832715, e as $03deb23ff14920c4$export$4eaf04e54aa8eed6, z as $7215afc6de606d6b$export$de79e2c695e052f3, A as $46d819fcbaf35654$export$8f71654801c2f7cd, n as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, b as $c87311424ea30a05$export$fedb369cb70207f1, s as $c87311424ea30a05$export$a11b0059900ceec8, w as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-LmGemtHE.js";
 import { $ as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, a as $3493a52097159720$exports } from "../../Color-WxFE7lQB.js";
 import { a as $9446cca9a3875146$export$cb6e0bb50bc19463, $ as $9446cca9a3875146$export$7d15b64cf5a3a4c4 } from "../../number-7sOvrqo0.js";
 import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-Cdxi6JSa.js";
 import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-yV9VVy9R.js";
-import { e as $28f99e3e86e6ec45$export$e5fda3247f5d67f9, f as $e8a7022cf87cba2a$export$36da96379f79f245, g as $bcca50147b47f54d$export$56b2c08e277f365, h as $47b897dc8cdb026b$export$8d15029008292ae, d as $6f909507e6374d18$export$1e7083018727fa60, i as $6f909507e6374d18$export$f1fce0420cc6d8ee, j as $6f909507e6374d18$export$6189c2744041d8f8, a as $6f909507e6374d18$export$105594979f116971 } from "../../Slider-BQFSEhvk.js";
+import { e as $28f99e3e86e6ec45$export$e5fda3247f5d67f9, f as $e8a7022cf87cba2a$export$36da96379f79f245, g as $bcca50147b47f54d$export$56b2c08e277f365, h as $47b897dc8cdb026b$export$8d15029008292ae, d as $6f909507e6374d18$export$1e7083018727fa60, i as $6f909507e6374d18$export$f1fce0420cc6d8ee, j as $6f909507e6374d18$export$6189c2744041d8f8, a as $6f909507e6374d18$export$105594979f116971 } from "../../Slider-ChP04COa.js";
 import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-DMOmz986.js";
 import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-eaZiN2tE.js";
-import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../VisuallyHidden-D9s7FTtC.js";
+import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../VisuallyHidden-X6SggVVO.js";
 import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-B8BgFmIQ.js";
-import { b as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $a049562f99e7db0e$export$f9c6924e160136d1, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Group-C4cXobNT.js";
+import { b as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $a049562f99e7db0e$export$f9c6924e160136d1, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-ChJaTNa5.js";
 import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DWVaNd2E.js";
 import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-AxKZjtFm.js";
-import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, b as $d2e8511e6f209edf$export$e908e06f4b8e3402, c as $7d0a636d7a4dcefd$export$2123ff2b87c81ca, d as $d841c8010a73d545$export$4f384c9210e583c3, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-JhWPy1JY.js";
-import { a as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, c as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../Form-BeMxJA29.js";
+import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, b as $d2e8511e6f209edf$export$e908e06f4b8e3402, c as $7d0a636d7a4dcefd$export$2123ff2b87c81ca, d as $d841c8010a73d545$export$4f384c9210e583c3, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-BCjjZWaz.js";
+import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, b as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidation-CUtZcedF.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { _ as __ } from "../../default-i18n-DY6EfUSA.js";
+import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
 import { TriggeredPopover } from "../popover/popover.js";
 import { icons } from "../../icons/icons.js";
 import { Tabs, TabList, Tab, TabPanel } from "../tabs/tabs.js";

package/dist/components/component-toggle/component-toggle.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
-import { _ as __ } from "../../default-i18n-DY6EfUSA.js";
+import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
 import { Expandable } from "../expandable/expandable.js";
 import { icons } from "../../icons/icons.js";
 import { Switch } from "../toggle/switch.js";

package/dist/components/draggable/draggable-handle.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import "../../default-i18n-DY6EfUSA.js";
+import "../../default-i18n-CN_q3KUs.js";
 import { DraggableContext } from "./draggable-context.js";
 import { useContext } from "react";
 import { icons } from "../../icons/icons.js";

package/dist/components/draggable/draggable.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useLayoutEffect, useMemo, useState, useCallback, startTransition, createContext, memo, forwardRef, useImperativeHandle, useContext, useId } from "react";
-import { _ as __ } from "../../default-i18n-DY6EfUSA.js";
+import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
 import { DraggableContext } from "./draggable-context.js";
-import { r as reactDomExports } from "../../index-CBHA_HDD.js";
+import { r as reactDomExports } from "../../index-D8-Zjpbd.js";
 var i = Symbol.for("preact-signals");
 function t() {
   if (!(s > 1)) {
@@ -82,6 +82,7 @@ function u(i2, t2) {
   this.t = void 0;
   this.W = null == t2 ? void 0 : t2.watched;
   this.Z = null == t2 ? void 0 : t2.unwatched;
+  this.name = null == t2 ? void 0 : t2.name;
 }
 u.prototype.brand = i;
 u.prototype.h = function() {
@@ -130,7 +131,7 @@ u.prototype.subscribe = function(i2) {
     } finally {
       o = n2;
     }
-  });
+  }, { name: "sub" });
 };
 u.prototype.valueOf = function() {
   return this.value;
@@ -210,6 +211,7 @@ function y(i2, t2) {
   this.f = 4;
   this.W = null == t2 ? void 0 : t2.watched;
   this.Z = null == t2 ? void 0 : t2.unwatched;
+  this.name = null == t2 ? void 0 : t2.name;
 }
 y.prototype = new u();
 y.prototype.h = function() {
@@ -311,12 +313,13 @@ function g(i2) {
   if (8 & this.f) b(this);
   t();
 }
-function p(i2) {
+function p(i2, t2) {
   this.x = i2;
   this.u = void 0;
   this.s = void 0;
   this.o = void 0;
   this.f = 32;
+  this.name = null == t2 ? void 0 : t2.name;
 }
 p.prototype.c = function() {
   var i2 = this.S();
@@ -354,17 +357,17 @@ p.prototype.d = function() {
 p.prototype.dispose = function() {
   this.d();
 };
-function E(i2) {
-  var t2 = new p(i2);
+function E(i2, t2) {
+  var r2 = new p(i2, t2);
   try {
-    t2.c();
+    r2.c();
   } catch (i3) {
-    t2.d();
+    r2.d();
     throw i3;
   }
-  var r2 = t2.d.bind(t2);
-  r2[Symbol.dispose] = r2;
-  return r2;
+  var o2 = r2.d.bind(r2);
+  o2[Symbol.dispose] = o2;
+  return o2;
 }
 var __create$5 = Object.create;
 var __defProp$7 = Object.defineProperty;
@@ -3948,10 +3951,13 @@ var Cursor = class extends Plugin {
     this.destroy = E(() => {
       var _a4;
       const { dragOperation } = this.manager;
-      const { cursor = "grabbing" } = (_a4 = this.options) != null ? _a4 : {};
+      const { cursor = "grabbing", nonce } = (_a4 = this.options) != null ? _a4 : {};
       if (dragOperation.status.initialized) {
         const document2 = doc.value;
         const style = document2.createElement("style");
+        if (nonce) {
+          style.setAttribute("nonce", nonce);
+        }
         style.textContent = `* { cursor: ${cursor} !important; }`;
         document2.head.appendChild(style);
         return () => style.remove();
@@ -4549,17 +4555,21 @@ render_fn = function() {
   };
 };
 injectStyles_fn = function() {
-  var _a4, _b2;
+  var _a4, _b2, _c3;
   const { status, source, target } = this.manager.dragOperation;
+  const { nonce } = (_a4 = this.options) != null ? _a4 : {};
   if (status.initializing) {
-    const sourceDocument = getDocument((_a4 = source == null ? void 0 : source.element) != null ? _a4 : null);
-    const targetDocument = getDocument((_b2 = target == null ? void 0 : target.element) != null ? _b2 : null);
+    const sourceDocument = getDocument((_b2 = source == null ? void 0 : source.element) != null ? _b2 : null);
+    const targetDocument = getDocument((_c3 = target == null ? void 0 : target.element) != null ? _c3 : null);
     const documents = /* @__PURE__ */ new Set([sourceDocument, targetDocument]);
     for (const doc of documents) {
       let registration = styleSheetRegistry.get(doc);
       if (!registration) {
         const style = document.createElement("style");
         style.textContent = CSS_RULES;
+        if (nonce) {
+          style.setAttribute("nonce", nonce);
+        }
         doc.head.prepend(style);
         const mutationObserver = new MutationObserver((entries) => {
           for (const entry of entries) {
@@ -4925,13 +4935,18 @@ var ScrollListener = class extends CorePlugin {
 };
 _timeout = /* @__PURE__ */ new WeakMap();
 var PreventSelection = class extends Plugin {
-  constructor(manager) {
-    super(manager);
+  constructor(manager, options2) {
+    super(manager, options2);
     this.manager = manager;
     this.destroy = E(() => {
+      var _a4;
       const { dragOperation } = this.manager;
+      const { nonce } = (_a4 = this.options) != null ? _a4 : {};
       if (dragOperation.status.initialized) {
         const style = document.createElement("style");
+        if (nonce) {
+          style.setAttribute("nonce", nonce);
+        }
         style.textContent = `* { user-select: none !important; -webkit-user-select: none !important; }`;
         document.head.appendChild(style);
         removeSelection();
@@ -7238,6 +7253,7 @@ const SortableItem = ({ id, index, disabled, children, axis }) => {
  * @param {Function} props.onChange - Function to run when the items change.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  * @param {boolean} [props.noReorder] - If `true`, item reordering is disabled.
+ * @param {Function} [props.onAfterItemRemove] - Function to run after an item is removed.
  * @param {'both' | 'horizontal' | 'vertical'} [props.axis='both'] - Which axis to allow dragging on.
  * @param {string} [props.className] - Classes to pass to the component.
  *
@@ -7272,6 +7288,7 @@ const Draggable3 = (props) => {
     noReorder,
     axis = "both",
     className,
+    onAfterItemRemove,
     hidden,
     ...rest
   } = props;

package/dist/components/draggable-list/draggable-list-item.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import "../../default-i18n-DY6EfUSA.js";
+import "../../default-i18n-CN_q3KUs.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { icons } from "../../icons/icons.js";
 import { cloneElement } from "react";

package/dist/components/draggable-list/draggable-list.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { useId } from "react";
-import { _ as __ } from "../../default-i18n-DY6EfUSA.js";
+import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { L as List, a as arrayRemove, b as arrayMove } from "../../List-CwJTORxj.js";
+import { L as List, a as arrayRemove, b as arrayMove } from "../../List-BiAnh5G5.js";
 const fixIds = (items, itemIdBase) => {
   return items?.map((item, i) => ({
     ...item,
@@ -24,6 +24,7 @@ const fixIds = (items, itemIdBase) => {
  * @param {Function} props.onChange - Function to run when the items change.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  * @param {boolean} [props.disabled] - If `true`, item reordering is disabled.
+ * @param {Function} [props.onAfterItemRemove] - Function to run after an item is removed.
  * @param {string} [props.className] - Classes to pass to the item wrapper.
  *
  * @returns {JSX.Element} The DraggableList component.
@@ -69,6 +70,7 @@ const DraggableList = (props) => {
     disabled,
     className,
     labelAsHandle,
+    onAfterItemRemove,
     hidden,
     ...rest
   } = props;
@@ -106,7 +108,7 @@ const DraggableList = (props) => {
               key
             );
           },
-          renderItem: ({ value, index, isDisabled, isDragged, isSelected, isOutOfBounds, props: props2 }) => {
+          renderItem: ({ value, index, isDisabled, isDragged, isSelected, props: props2 }) => {
             const { key, ...rest2 } = props2;
             return /* @__PURE__ */ jsx(
               "li",
@@ -132,7 +134,7 @@ const DraggableList = (props) => {
                   itemIndex: index,
                   deleteItem: () => {
                     onChange(items.filter((i) => i.id !== value.id));
-                    if (value.onAfterItemRemove) {
+                    if (onAfterItemRemove) {
                       onAfterItemRemove(value);
                     }
                   }

package/dist/components/expandable/expandable.js

@@ -5,14 +5,14 @@ import { AnimatedVisibility } from "../animated-visibility/animated-visibility.j
 import { Button } from "../button/button.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { _ as __ } from "../../default-i18n-DY6EfUSA.js";
-import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-RTwMSBs-.js";
+import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
+import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-npzfSoYo.js";
 import { d as $bdb11010cef70236$export$f680877a34711e37, n as $b5e257d569688ac6$export$535bd6ca7f90a273, k as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, h as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a, o as $64fa3d84918910a7$export$c62b8e45d58ddad9, b as $3ef42575df84b30b$export$9d1611c77c2fe928, m as $5dc95899b306f630$export$c9058316764c140e } from "../../utils-cvK1vxO7.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
-import { a as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../useHover-44IApaa2.js";
-import { r as reactDomExports } from "../../index-CBHA_HDD.js";
+import { a as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../useHover-LmGemtHE.js";
+import { r as reactDomExports } from "../../index-D8-Zjpbd.js";
 import { $ as $e9faafb641e167db$export$90fc3a17d93f704c } from "../../useEvent-BifIGnVS.js";
-import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-D5BfOWag.js";
+import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CUxgjvAY.js";
 import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DWVaNd2E.js";
 function $5e910fae8e128ead$export$6e3e27031a30522f(props, state, ref) {
   let { isDisabled } = props;