@seeqdev/qomponents 0.0.190 → 0.0.193

package/README.md

@@ -8,7 +8,7 @@ Seeq qomponents are a collection of UI components, including a Button, a TextFie
 React component (more coming soon!)
 
 These components are used by Seeq's application and are made publicly available for Developers who want to expand
-the Seeq eco-system with their own plugins and add-ons without having to worry about creating a cohesive Seeq UX
+the Seeq ecosystem with their own plugins and add-ons without having to worry about creating a cohesive Seeq UX
 experience. Every component comes fully styled (and with dark mode support).
 
 ## Installation
@@ -29,8 +29,8 @@ yarn add @seeqdev/qomponents
 
 ## Getting started with Seeq qomponents
 
-Prefer a more complete example? <br/>Checkout the example folder provided.
-It includes a ready to run example application. Start with the readme in the example folder to get up and running!
+Prefer a more complete example? <br/>Check out the example folder provided.
+It includes a ready-to-run example application. Start with the readme in the example folder to get up and running!
 
 Here is an example of a basic app using the `Button` component:
 
@@ -47,14 +47,6 @@ To make sure all styles are properly applied be sure to include the qomponents c
 
 ```css
 @import '@seeqdev/qomponents/dist/styles.css';
-
-@font-face {
-  font-family: 'fontCustom';
-  src: url('@seeqdev/qomponents/dist/FontCustom.woff2') format('woff2'), url('@seeqdev/qomponents/dist/FontCustom.woff')
-      format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
 ```
 
 <b>A note on CSS:</b> Seeq's qomponents come fully styled and ready to use. While it is tempting to use the

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx as jsx$1, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useLayoutEffect, useState, useRef, useEffect, useCallback, forwardRef, useContext, useMemo, createContext, Component, Fragment as Fragment$1, useId as useId$1, useInsertionEffect as useInsertionEffect$2, Children, isValidElement, createElement } from 'react';
+import React__default, { useLayoutEffect, useState, useCallback, useRef, useEffect, forwardRef, useContext, useMemo, createContext, Component, Fragment as Fragment$1, useId as useId$1, useInsertionEffect as useInsertionEffect$2, Children, isValidElement, createElement } from 'react';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default, { createPortal } from 'react-dom';
 
@@ -66,7 +66,7 @@ const colorClassesThemeDark = {
     'dark-gray': 'tw:text-sq-fairly-dark-gray',
     'warning': '',
     'darkish-gray': 'tw:text-sq-darkish-gray',
-    'gray': 'tw:dark:text-sq-dark-disabled-gray',
+    'gray': 'tw:dark:text-sq-fairly-dark-gray',
     'color': '',
     'info': 'tw:dark:text-sq-theme-link',
     'text': 'tw:dark:text-sq-dark-text',
@@ -134,7 +134,7 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
         'outline': 'tw:bg-white tw:border-sq-disabled-gray',
         'theme': 'tw:bg-sq-theme-dark tw:border-sq-theme-dark',
         'danger': '',
-        'theme-light': 'tw:bg-sq-icon',
+        'theme-light': 'tw:bg-sq-theme-icon',
         'no-border': '',
         'warning': '',
     };
@@ -142,7 +142,7 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
         'outline': 'tw:dark:bg-sq-dark-background tw:dark:border-sq-dark-disabled-gray',
         'theme': 'tw:dark:bg-sq-theme-dark tw:dark:border-sq-theme-dark',
         'danger': '',
-        'theme-light': 'tw:dark:bg-sq-icon-dark tw:dark:border-sq-icon-dark',
+        'theme-light': 'tw:dark:bg-sq-theme-icon tw:dark:border-sq-theme-icon',
         'no-border': '',
         'warning': '',
     };
@@ -3843,7 +3843,7 @@ var removedBarSizeVariable = '--removed-body-scroll-bar-size';
  * assignRef(refObject, "refValue");
  * assignRef(refFn, "refValue");
  */
-function assignRef(ref, value) {
+function assignRef$1(ref, value) {
     if (typeof ref === 'function') {
         ref(value);
     }
@@ -3910,7 +3910,7 @@ var currentValues = new WeakMap();
  */
 function useMergeRefs(refs, defaultValue) {
     var callbackRef = useCallbackRef(null, function (newValue) {
-        return refs.forEach(function (ref) { return assignRef(ref, newValue); });
+        return refs.forEach(function (ref) { return assignRef$1(ref, newValue); });
     });
     // handle refs changes - added or removed
     useIsomorphicLayoutEffect$1(function () {
@@ -3921,12 +3921,12 @@ function useMergeRefs(refs, defaultValue) {
             var current_1 = callbackRef.current;
             prevRefs_1.forEach(function (ref) {
                 if (!nextRefs_1.has(ref)) {
-                    assignRef(ref, null);
+                    assignRef$1(ref, null);
                 }
             });
             nextRefs_1.forEach(function (ref) {
                 if (!prevRefs_1.has(ref)) {
-                    assignRef(ref, current_1);
+                    assignRef$1(ref, current_1);
                 }
             });
         }
@@ -4888,6 +4888,41 @@ const setValidInputDimension = (width, height) => {
     return inputStyle;
 };
 
+function assignRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  } else if (typeof ref === "object" && ref !== null && "current" in ref) {
+    ref.current = value;
+  }
+}
+function mergeRefs(...refs) {
+  const cleanupMap = /* @__PURE__ */ new Map();
+  return (node) => {
+    refs.forEach((ref) => {
+      const cleanup = assignRef(ref, node);
+      if (cleanup) {
+        cleanupMap.set(ref, cleanup);
+      }
+    });
+    if (cleanupMap.size > 0) {
+      return () => {
+        refs.forEach((ref) => {
+          const cleanup = cleanupMap.get(ref);
+          if (cleanup && typeof cleanup === "function") {
+            cleanup();
+          } else {
+            assignRef(ref, null);
+          }
+        });
+        cleanupMap.clear();
+      };
+    }
+  };
+}
+function useMergedRef(...refs) {
+  return useCallback(mergeRefs(...refs), refs);
+}
+
 const errorClasses$4 = 'tw:border-sq-danger';
 const borderColorClasses$4 = [
     'tw:border-sq-disabled-gray',
@@ -4911,15 +4946,11 @@ const sizeClasses = {
  * Textfield.
  */
 const TextField = React__default.forwardRef((props, ref) => {
-    const { readonly = false, disabled = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, errorText, min, max, maxLength, minLength, required = false, autoComplete = 'off', inputWidth = undefined, inputHeight = undefined, autoFocus = false, ...tooltipProps } = props;
+    const { readonly = false, disabled = false, onChange, onPaste, onKeyUp, onFocus, onBlur, onKeyDown, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, errorText, min, max, maxLength, minLength, required = false, autoComplete = 'off', inputWidth = undefined, inputHeight = undefined, autoFocus = false, ...tooltipProps } = props;
     const internalRef = useRef(null);
+    const mergedRef = useMergedRef(ref, internalRef);
     const [cursor, setCursor] = useState(null);
     const tooltipData = getQTipData(tooltipProps);
-    const setAllRefs = (receivedRef) => {
-        if (ref)
-            ref.current = receivedRef;
-        internalRef.current = receivedRef;
-    };
     useEffect(() => {
         if (autoFocus) {
             setTimeout(() => {
@@ -4965,7 +4996,7 @@ const TextField = React__default.forwardRef((props, ref) => {
         inputLenghtProp.maxLength = maxLength;
     if (minLength)
         inputLenghtProp.minLength = minLength;
-    return (jsxs(Fragment, { children: [jsx$1("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, autoComplete: autoComplete, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required, min: min, max: max, ...inputLenghtProp, ...inputProp, ...tooltipData }), errorText && showError && jsx$1("div", { className: "tw:text-sq-danger tw:text-xs tw:mt-1", children: errorText })] }));
+    return (jsxs(Fragment, { children: [jsx$1("input", { ref: mergedRef, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, autoComplete: autoComplete, onChange: handleChange, onPaste: onPaste, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required, min: min, max: max, ...inputLenghtProp, ...inputProp, ...tooltipData }), errorText && showError && jsx$1("div", { className: "tw:text-sq-danger tw:text-xs tw:mt-1", children: errorText })] }));
 });
 
 const alignment = 'tw:flex';
@@ -4975,8 +5006,8 @@ const baseClasses$5 = 'tw:appearance-none tw:border tw:h-3.5 tw:w-3.5 tw:focus:r
     ' tw:checked:text-white tw:checked:border-sq-text-color tw:checked:hover:border-sq-theme-dark' +
     ' tw:checked:active:border-sq-theme-darker tw:checked:focus:border-sq-theme-dark tw:disabled:border-sq-disabled-gray' +
     ' tw:dark:disabled:border-sq-fairly-dark-gray tw:dark:checked:focus:bg-sq-dark-background';
-const checkboxClasses = `tw:form-checkbox tw:rounded ${baseClasses$5}`;
-const radioClasses = `tw:form-radio tw:rounded-full ${baseClasses$5}`;
+const checkboxClasses = `tw:rounded ${baseClasses$5}`;
+const radioClasses = `tw:rounded-full ${baseClasses$5}`;
 /**
  * Checkbox and Radio Box Component.
  */
@@ -5010,6 +5041,7 @@ const borderColorClasses$3 = [
 const TextArea = React__default.forwardRef(({ readonly = false, disabled = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, onSelectionChange, id, name, rows = 3, cols = undefined, value, placeholder, showError, extraClassNames, testId, autoFocus = false, }, ref) => {
     const appliedClasses = `${baseClasses$4} ${extraClassNames} ${lightTheme$2} ${darkTheme$2} ${showError ? errorClasses$3 : borderColorClasses$3}`;
     const textareaRef = useRef(null);
+    const mergedRef = useMergedRef(ref, textareaRef);
     // Handle selection change events
     useEffect(() => {
         if (!onSelectionChange || !textareaRef.current) {
@@ -5030,15 +5062,7 @@ const TextArea = React__default.forwardRef(({ readonly = false, disabled = false
             textarea.removeEventListener('keyup', handleSelectionChange);
         };
     }, [onSelectionChange]);
-    return (jsx$1("textarea", { ref: (element) => {
-            textareaRef.current = element;
-            if (typeof ref === 'function') {
-                ref(element);
-            }
-            else if (ref) {
-                ref.current = element;
-            }
-        }, "data-testid": testId, name: name, id: id, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, rows: rows, cols: cols, autoFocus: autoFocus }));
+    return (jsx$1("textarea", { ref: mergedRef, "data-testid": testId, name: name, id: id, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, rows: rows, cols: cols, autoFocus: autoFocus }));
 });
 
 /**
@@ -14543,7 +14567,7 @@ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 const Dialog = Root$4;
 const DialogPortal = Portal$1;
 const DialogClose = Close;
-const DialogContent = React__default.forwardRef(({ className, children, ...props }, ref) => (jsxs(DialogPortal, { children: [jsx$1("div", { className: "tw:select-none tw:fixed tw:w-full tw:h-full tw:opacity-50 tw:inset-0 tw:z-[1009] tw:bg-sq-dark-background\n    tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0\n    tw:data-[state=open]:fade-in-0 " }), jsxs(Content$2, { ref: ref, className: `tw:fixed tw:left-[50%] tw:top-0 tw:my-6 tw:translate-x-[-50%] tw:z-[1010] tw:grid
+const DialogContent = React__default.forwardRef(({ className, 'aria-describedby': ariaDescribedBy, children, ...props }, ref) => (jsxs(DialogPortal, { children: [jsx$1("div", { className: "tw:select-none tw:fixed tw:w-full tw:h-full tw:opacity-50 tw:inset-0 tw:z-[1009] tw:bg-sq-dark-background\n    tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0\n    tw:data-[state=open]:fade-in-0 " }), jsxs(Content$2, { ref: ref, "aria-describedby": ariaDescribedBy, className: `tw:fixed tw:left-[50%] tw:top-0 tw:my-6 tw:translate-x-[-50%] tw:z-[1010] tw:grid
        tw:gap-4 tw:border tw:bg-sq-white tw:dark:bg-sq-dark-background tw:shadow-lg tw:duration-200
        tw:rounded-lg ${className}`, ...props, children: [jsx$1(DialogTitle$1, { className: "tw:hidden" }), children] })] })));
 DialogContent.displayName = Content$2.displayName;
@@ -14555,7 +14579,7 @@ const DialogTitle = React__default.forwardRef((props, ref) => jsx$1(Title, { ref
 DialogTitle.displayName = Title.displayName;
 const DialogDescription = React__default.forwardRef((props, ref) => jsx$1(Description, { ref: ref, ...props }));
 DialogDescription.displayName = Description.displayName;
-const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, subtitle, children, open = false, onClose, customButton = false, customButtonLabel = 'Back', onClickCustomButton, submitButtonLabel = 'Submit', cancelButtonLabel = 'Cancel', disableSubmitButton = false, stopPropagationSubmitButton = false, onSubmit, isTitleEditable = false, onTitleChanged, inputExtraClassNames, hideCloseIcon = false, size = 'xl', titleIconPosition = 'left', hideFooterButtons = false, hideSubmitButton = false, hideCancelButton = false, testId = 'modal', modalFooter, dialogClassName, titlePlaceholder, titleRequired, titleError, submitButtonTooltip, cancelButtonTooltip, disableCustomButton, customHeader, middleFooterSection = jsx$1(Fragment, {}), customButtonVariant = 'outline', submitButtonVariant = 'theme', keepFocusInsideModal = true, onPointerDownOutside, onInteractOutside, }) => {
+const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, subtitle, children, open = false, onClose, customButton = false, customButtonLabel = 'Back', onClickCustomButton, submitButtonLabel = 'Submit', cancelButtonLabel = 'Cancel', disableSubmitButton = false, stopPropagationSubmitButton = false, onSubmit, isTitleEditable = false, onTitleChanged, inputExtraClassNames, hideCloseIcon = false, size = 'xl', titleIconPosition = 'left', hideFooterButtons = false, hideSubmitButton = false, hideCancelButton = false, testId = 'modal', modalFooter, dialogClassName, titlePlaceholder, titleRequired, titleError, submitButtonTooltip, cancelButtonTooltip, disableCustomButton, customHeader, middleFooterSection = jsx$1(Fragment, {}), customButtonVariant = 'outline', submitButtonVariant = 'theme', keepFocusInsideModal = true, onPointerDownOutside, onInteractOutside, ariaDescribedBy, }) => {
     const [isLoading, setIsLoading] = useState(false);
     // the Dialog is adding pointerEvents: none to body and the dropdowns from the modal does not work anymore
     useEffect(() => {
@@ -14593,7 +14617,7 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
         }
         return (jsxs(Fragment, { children: [titleIcon && titleIconPosition === 'left' ? jsx$1("div", { className: "tw:flex tw:mr-2", children: titleIconElement }) : jsx$1(Fragment, {}), jsx$1(DialogTitle, { asChild: true, children: isTitleEditable ? (jsxs("div", { className: "tw:flex tw:w-full tw:items-center", children: [jsx$1(TextField, { extraClassNames: inputExtraClassNames, value: title, type: "text", testId: "modalTitle", onChange: onTitleChanged, placeholder: titlePlaceholder, required: titleRequired, showError: !!titleError }), titleError && jsx$1("p", { className: "tw:text-sq-danger tw:min-w-fit tw:pl-2 tw:mb-0", children: titleError })] })) : (customHeader ?? (jsxs("div", { "data-testid": "modalTitle", className: "modal-title", children: [jsxs("div", { className: "tw:flex tw:items-center", children: [jsx$1("h3", { children: title }), titleSuffixLabel && jsx$1("span", { className: "tw:text-xl tw:pl-0.5", children: titleSuffixLabel })] }), subtitle && (jsx$1("div", { className: "tw:italic tw:text-sm tw:text-left tw:mt-1", "data-testid": "modal-subtitle", children: subtitle }))] }))) }), titleIcon && titleIconPosition === 'right' ? jsx$1("div", { className: "tw:flex tw:ml-4", children: titleIconElement }) : jsx$1(Fragment, {})] }));
     };
-    return open ? (jsx$1(Dialog, { open: true, onOpenChange: onClose, modal: keepFocusInsideModal, children: jsxs(DialogContent, { onPointerDownOutside: (e) => (onPointerDownOutside ? onPointerDownOutside(e) : e.preventDefault()), onInteractOutside: (e) => (onInteractOutside ? onInteractOutside(e) : e.preventDefault()), "data-testid": testId, className: classNames(`modalContent tw:w-full tw:border-none tw:shadow-none tw:dark:text-sq-dark-text tw:gap-0!`, {
+    return open ? (jsx$1(Dialog, { open: true, onOpenChange: onClose, modal: keepFocusInsideModal, children: jsxs(DialogContent, { onPointerDownOutside: (e) => (onPointerDownOutside ? onPointerDownOutside(e) : e.preventDefault()), onInteractOutside: (e) => (onInteractOutside ? onInteractOutside(e) : e.preventDefault()), "data-testid": testId, "aria-describedby": ariaDescribedBy, className: classNames(`modalContent tw:w-full tw:border-none tw:shadow-none tw:dark:text-sq-dark-text tw:gap-0!`, {
                 'tw:max-w-xs': size === 'xs',
                 'tw:max-w-sm': size === 'sm',
                 'tw:max-w-md': size === 'md',
@@ -16661,7 +16685,7 @@ const Alert = ({ children, dismissible = true, onClose, show = true, variant, te
         theme: `${lightTheme$1} ${darkTheme$1}`,
         formulaError: 'tw:text-red-800 tw:bg-red-200 tw:rounded-[0.25rem]!',
         danger: 'tw:text-sq-text-color tw:bg-sq-danger',
-        warning: 'tw:bg-sq-bg-warning tw:text-sq-text-color',
+        warning: 'tw:bg-sq-bg-warning tw:text-sq-text-color tw:dark:text-sq-multi-gray-dark',
         gray: 'tw:bg-sq-hover-gray tw:text-sq-text-color tw:dark:bg-sq-tools-background-dark tw:dark:text-sq-text-color-dark',
     };
     const appliedBorderTheme = {
@@ -16697,8 +16721,8 @@ const SvgIcon = ({ onClick, icon, color, type = 'default', extraClassNames, view
     const appliedClassNames = `${onClick ? 'tw:cursor-pointer' : ''} ${extraClassNames} tw:focus:outline-none tw:focus-visible:outline-none 
   tw:outline-none`;
     const tooltipData = getQTipData(tooltipProps);
-    const appliedType = type === 'default' ? 'currentColor' : 'rgb(var(--sq-icon))';
-    return (jsx$1("div", { onClick: onClick, ...tooltipData, className: `svgContainer ${appliedClassNames}`, children: jsx$1("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw:sq-icon tw:dark:text-sq-white`, viewBox: viewBox, fill: color ? color : appliedType, "data-testid": testId, children: jsx$1("path", { d: getSvgIconPath(icon) }) }) }));
+    const appliedType = type === 'default' ? 'currentColor' : 'var(--theme-icon)';
+    return (jsx$1("div", { onClick: onClick, ...tooltipData, className: `svgContainer ${appliedClassNames}`, children: jsx$1("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw:text-sq-theme-icon tw:dark:text-sq-white`, viewBox: viewBox, fill: color ? color : appliedType, "data-testid": testId, children: jsx$1("path", { d: getSvgIconPath(icon) }) }) }));
 };
 
 const SeeqActionDropdownItem = (item) => {
@@ -16836,8 +16860,7 @@ function formatErrorMessage(message, errorCode) {
 
 let warning = () => { };
 let invariant = () => { };
-if (typeof process !== "undefined" &&
-    process.env?.NODE_ENV !== "production") {
+if (process.env.NODE_ENV !== "production") {
     warning = (check, message, errorCode) => {
         if (!check && typeof console !== "undefined") {
             console.warn(formatErrorMessage(message, errorCode));
@@ -17293,17 +17316,6 @@ const isCSSVariableToken = (value) => {
     return singleCssVariableRegex.test(value.split("/*")[0].trim());
 };
 const singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
-/**
- * Check if a value contains a CSS variable anywhere (e.g. inside calc()).
- * Unlike isCSSVariableToken which checks if the value IS a var() token,
- * this checks if the value CONTAINS var() somewhere in the string.
- */
-function containsCSSVariable(value) {
-    if (typeof value !== "string")
-        return false;
-    // Strip comments to avoid false positives
-    return value.split("/*")[0].includes("var(--");
-}
 
 const number = {
     test: (v) => typeof v === "number",
@@ -19101,12 +19113,6 @@ class NativeAnimation extends WithPromise {
         super();
         this.finishedTime = null;
         this.isStopped = false;
-        /**
-         * Tracks a manually-set start time that takes precedence over WAAPI's
-         * dynamic startTime. This is cleared when play() or time setter is called,
-         * allowing WAAPI to take over timing.
-         */
-        this.manualStartTime = null;
         if (!options)
             return;
         const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, onComplete, } = options;
@@ -19142,7 +19148,6 @@ class NativeAnimation extends WithPromise {
     play() {
         if (this.isStopped)
             return;
-        this.manualStartTime = null;
         this.animation.play();
         if (this.state === "finished") {
             this.updateFinished();
@@ -19206,7 +19211,6 @@ class NativeAnimation extends WithPromise {
         return millisecondsToSeconds(Number(this.animation.currentTime) || 0);
     }
     set time(newTime) {
-        this.manualStartTime = null;
         this.finishedTime = null;
         this.animation.currentTime = secondsToMilliseconds(newTime);
     }
@@ -19229,10 +19233,10 @@ class NativeAnimation extends WithPromise {
             : this.animation.playState;
     }
     get startTime() {
-        return this.manualStartTime ?? Number(this.animation.startTime);
+        return Number(this.animation.startTime);
     }
     set startTime(newStartTime) {
-        this.manualStartTime = this.animation.startTime = newStartTime;
+        this.animation.startTime = newStartTime;
     }
     /**
      * Attaches a timeline to the animation, for instance the `ScrollTimeline`.
@@ -19294,7 +19298,7 @@ class NativeAnimationExtended extends NativeAnimation {
          */
         replaceTransitionType(options);
         super(options);
-        if (options.startTime !== undefined) {
+        if (options.startTime) {
             this.startTime = options.startTime;
         }
         this.options = options;
@@ -19302,7 +19306,7 @@ class NativeAnimationExtended extends NativeAnimation {
     /**
      * WAAPI doesn't natively have any interruption capabilities.
      *
-     * Rather than read committed styles back out of the DOM, we can
+     * Rather than read commited styles back out of the DOM, we can
      * create a renderless JS animation and sample it twice to calculate
      * its current value, "previous" value, and therefore allow
      * Motion to calculate velocity for any subsequent animation.
@@ -19319,14 +19323,8 @@ class NativeAnimationExtended extends NativeAnimation {
             ...options,
             autoplay: false,
         });
-        /**
-         * Use wall-clock elapsed time for sampling.
-         * Under CPU load, WAAPI's currentTime may not reflect actual
-         * elapsed time, causing incorrect sampling and visual jumps.
-         */
-        const sampleTime = Math.max(sampleDelta, time.now() - this.startTime);
-        const delta = clamp$1(0, sampleDelta, sampleTime - sampleDelta);
-        motionValue.setWithVelocity(sampleAnimation.sample(Math.max(0, sampleTime - delta)).value, sampleAnimation.sample(sampleTime).value, delta);
+        const sampleTime = secondsToMilliseconds(this.finishedTime ?? this.time);
+        motionValue.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
         sampleAnimation.stop();
     }
 }
@@ -19504,7 +19502,7 @@ class AsyncMotionValueAnimation extends WithPromise {
          * progress, which would feel snappier.
          *
          * However, if there's a delay (main thread work) between the creation of
-         * the animation and the first committed frame, we prefer to use resolvedAt
+         * the animation and the first commited frame, we prefer to use resolvedAt
          * to avoid a sudden jump into the animation.
          */
         const startTime = sync
@@ -19773,36 +19771,17 @@ const numberValueTypes = {
     right: px,
     bottom: px,
     left: px,
-    inset: px,
-    insetBlock: px,
-    insetBlockStart: px,
-    insetBlockEnd: px,
-    insetInline: px,
-    insetInlineStart: px,
-    insetInlineEnd: px,
     // Spacing props
     padding: px,
     paddingTop: px,
     paddingRight: px,
     paddingBottom: px,
     paddingLeft: px,
-    paddingBlock: px,
-    paddingBlockStart: px,
-    paddingBlockEnd: px,
-    paddingInline: px,
-    paddingInlineStart: px,
-    paddingInlineEnd: px,
     margin: px,
     marginTop: px,
     marginRight: px,
     marginBottom: px,
     marginLeft: px,
-    marginBlock: px,
-    marginBlockStart: px,
-    marginBlockEnd: px,
-    marginInline: px,
-    marginInlineStart: px,
-    marginInlineEnd: px,
     // Misc
     backgroundPositionX: px,
     backgroundPositionY: px,
@@ -19920,16 +19899,6 @@ class DOMKeyframesResolver extends KeyframeResolver {
         const [origin, target] = unresolvedKeyframes;
         const originType = findDimensionValueType(origin);
         const targetType = findDimensionValueType(target);
-        /**
-         * If one keyframe contains embedded CSS variables (e.g. in calc()) and the other
-         * doesn't, we need to measure to convert to pixels. This handles GitHub issue #3410.
-         */
-        const originHasVar = containsCSSVariable(origin);
-        const targetHasVar = containsCSSVariable(target);
-        if (originHasVar !== targetHasVar && positionalValues[name]) {
-            this.needsMeasurement = true;
-            return;
-        }
         /**
          * Either we don't recognise these value types or we can animate between them.
          */
@@ -20464,24 +20433,16 @@ const isPrimaryPointer = (event) => {
     }
 };
 
-const interactiveElements = new Set([
+const focusableElements = new Set([
     "BUTTON",
     "INPUT",
     "SELECT",
     "TEXTAREA",
     "A",
 ]);
-/**
- * Checks if an element is an interactive form element that should prevent
- * drag gestures from starting when clicked.
- *
- * This specifically targets form controls, buttons, and links - not just any
- * element with tabIndex, since motion elements with tap handlers automatically
- * get tabIndex=0 for keyboard accessibility.
- */
 function isElementKeyboardAccessible(element) {
-    return (interactiveElements.has(element.tagName) ||
-        element.isContentEditable === true);
+    return (focusableElements.has(element.tagName) ||
+        element.tabIndex !== -1);
 }
 
 const isPressing = new WeakSet();
@@ -29406,5 +29367,5 @@ const svgIconTypes = [...iconTypes, 'default'];
 
 const toolbarButtonVariants = ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'];
 
-export { Accordion, Alert, Button, ButtonGroup, ButtonWithDropdown, ButtonWithPopover, Carousel, Checkbox, Collapse, DEFAULT_TOOL_TIP_DELAY, Icon, InputGroup, Modal, ProgressBar, QTip, SeeqActionDropdown, Select, components as SelectCompoents, Slider, Tabs, TextArea, TextField, ToolbarButton, Tooltip, buttonSizes, buttonTypes, buttonVariants, iconPositions, iconTypes, svgIconTypes, toolbarButtonVariants, tooltipPositions };
+export { Accordion, Alert, Button, ButtonGroup, ButtonWithDropdown, ButtonWithPopover, Carousel, Checkbox, Collapse, DEFAULT_TOOL_TIP_DELAY, Icon, InputGroup, Modal, ProgressBar, QTip, SeeqActionDropdown, Select, components as SelectComponents, Slider, Tabs, TextArea, TextField, ToolbarButton, Tooltip, buttonSizes, buttonTypes, buttonVariants, iconPositions, iconTypes, svgIconTypes, toolbarButtonVariants, tooltipPositions };
 //# sourceMappingURL=index.esm.js.map