@knime/kds-components 1.1.1 → 1.1.2

package/dist/index.js

@@ -1708,6 +1708,7 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
     to: {},
     label: {},
     title: {},
+    size: { default: "medium" },
     disabled: { type: Boolean, default: false },
     download: { type: Boolean, default: false },
     target: {},
@@ -1782,7 +1783,7 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createBlock(resolveDynamicComponent(component.value), {
-        class: normalizeClass(["kds-link", `variant-${variant.value}`, { disabled: __props.disabled }]),
+        class: normalizeClass(["kds-link", `variant-${variant.value}`, `size-${__props.size}`, { disabled: __props.disabled }]),
         to: effectiveTo.value,
         download: __props.disabled ? void 0 : __props.download,
         target: effectiveTarget.value,
@@ -1807,7 +1808,13 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLink = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["__scopeId", "data-v-6f9a0cf6"]]);
+const KdsLink = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["__scopeId", "data-v-3d5dda8c"]]);
+
+const kdsLinkSize = {
+  SMALL: "small",
+  MEDIUM: "medium"
+};
+const kdsLinkSizes = Object.values(kdsLinkSize);
 
 const _sfc_main$1v = /* @__PURE__ */ defineComponent({
   __name: "KdsToggleButton",
@@ -4879,7 +4886,7 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseInput = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["__scopeId", "data-v-2e12b7e4"]]);
+const BaseInput = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["__scopeId", "data-v-a45e012a"]]);
 
 const _sfc_main$1c = /* @__PURE__ */ defineComponent({
   __name: "KdsTextInput",
@@ -7826,8 +7833,15 @@ const transformPropOrder = [
 ];
 /**
  * A quick lookup for transform props.
+ *
+ * `pathRotation` is a transform for routing purposes (skipped from raw
+ * style application, wired to the transform composite, flags transform
+ * dirty) but is intentionally NOT in `transformPropOrder` — it is
+ * composed onto `rotate` at the build sites, not serialized in its own
+ * slot, and must stay out of the order-array consumers (parse-transform,
+ * unit-conversion, keys-position).
  */
-const transformProps = /*@__PURE__*/ (() => new Set(transformPropOrder))();
+const transformProps = /*@__PURE__*/ (() => new Set([...transformPropOrder, "pathRotation"]))();
 
 const isNumOrPxType = (v) => v === number || v === px;
 const transformKeys = new Set(["x", "y", "z"]);
@@ -8796,339 +8810,74 @@ class GroupAnimationWithThen extends GroupAnimation {
 }
 
 /**
- * Parse Framer's special CSS variable format into a CSS token and a fallback.
- *
- * ```
- * `var(--foo, #fff)` => [`--foo`, '#fff']
- * ```
- *
- * @param current
- */
-const splitCSSVariableRegex = 
-// eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words
-/^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u;
-function parseCSSVariable(current) {
-    const match = splitCSSVariableRegex.exec(current);
-    if (!match)
-        return [,];
-    const [, token1, token2, fallback] = match;
-    return [`--${token1 ?? token2}`, fallback];
-}
-const maxDepth = 4;
-function getVariableValue(current, element, depth = 1) {
-    invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`, "max-css-var-depth");
-    const [token, fallback] = parseCSSVariable(current);
-    // No CSS variable detected
-    if (!token)
-        return;
-    // Attempt to read this CSS variable off the element
-    const resolved = window.getComputedStyle(element).getPropertyValue(token);
-    if (resolved) {
-        const trimmed = resolved.trim();
-        return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed;
-    }
-    return isCSSVariableToken(fallback)
-        ? getVariableValue(fallback, element, depth + 1)
-        : fallback;
-}
-
-const underDampedSpring = {
-    type: "spring",
-    stiffness: 500,
-    damping: 25,
-    restSpeed: 10,
-};
-const criticallyDampedSpring = (target) => ({
-    type: "spring",
-    stiffness: 550,
-    damping: target === 0 ? 2 * Math.sqrt(550) : 30,
-    restSpeed: 10,
-});
-const keyframesTransition = {
-    type: "keyframes",
-    duration: 0.8,
-};
-/**
- * Default easing curve is a slightly shallower version of
- * the default browser easing curve.
+ * Maximum time between the value of two frames, beyond which we
+ * assume the velocity has since been 0.
  */
-const ease = {
-    type: "keyframes",
-    ease: [0.25, 0.1, 0.35, 1],
-    duration: 0.3,
-};
-const getDefaultTransition = (valueKey, { keyframes }) => {
-    if (keyframes.length > 2) {
-        return keyframesTransition;
-    }
-    else if (transformProps.has(valueKey)) {
-        return valueKey.startsWith("scale")
-            ? criticallyDampedSpring(keyframes[1])
-            : underDampedSpring;
-    }
-    return ease;
+const MAX_VELOCITY_DELTA = 30;
+const isFloat = (value) => {
+    return !isNaN(parseFloat(value));
 };
-
-/**
- * If `transition` has `inherit: true`, shallow-merge it with
- * `parentTransition` (child keys win) and strip the `inherit` key.
- * Otherwise return `transition` unchanged.
- */
-function resolveTransition(transition, parentTransition) {
-    if (transition?.inherit && parentTransition) {
-        const { inherit: _, ...rest } = transition;
-        return { ...parentTransition, ...rest };
-    }
-    return transition;
-}
-
-function getValueTransition$1(transition, key) {
-    const valueTransition = transition?.[key] ??
-        transition?.["default"] ??
-        transition;
-    if (valueTransition !== transition) {
-        return resolveTransition(valueTransition, transition);
-    }
-    return valueTransition;
-}
-
-const orchestrationKeys = new Set([
-    "when",
-    "delay",
-    "delayChildren",
-    "staggerChildren",
-    "staggerDirection",
-    "repeat",
-    "repeatType",
-    "repeatDelay",
-    "from",
-    "elapsed",
-]);
 /**
- * Decide whether a transition is defined on a given Transition.
- * This filters out orchestration options and returns true
- * if any options are left.
+ * `MotionValue` is used to track the state and velocity of motion values.
+ *
+ * @public
  */
-function isTransitionDefined(transition) {
-    for (const key in transition) {
-        if (!orchestrationKeys.has(key))
-            return true;
-    }
-    return false;
-}
-
-const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
-    const valueTransition = getValueTransition$1(transition, name) || {};
-    /**
-     * Most transition values are currently completely overwritten by value-specific
-     * transitions. In the future it'd be nicer to blend these transitions. But for now
-     * delay actually does inherit from the root transition if not value-specific.
-     */
-    const delay = valueTransition.delay || transition.delay || 0;
-    /**
-     * Elapsed isn't a public transition option but can be passed through from
-     * optimized appear effects in milliseconds.
-     */
-    let { elapsed = 0 } = transition;
-    elapsed = elapsed - secondsToMilliseconds(delay);
-    const options = {
-        keyframes: Array.isArray(target) ? target : [null, target],
-        ease: "easeOut",
-        velocity: value.getVelocity(),
-        ...valueTransition,
-        delay: -elapsed,
-        onUpdate: (v) => {
-            value.set(v);
-            valueTransition.onUpdate && valueTransition.onUpdate(v);
-        },
-        onComplete: () => {
-            onComplete();
-            valueTransition.onComplete && valueTransition.onComplete();
-        },
-        name,
-        motionValue: value,
-        element: isHandoff ? undefined : element,
-    };
-    /**
-     * If there's no transition defined for this value, we can generate
-     * unique transition settings for this value.
-     */
-    if (!isTransitionDefined(valueTransition)) {
-        Object.assign(options, getDefaultTransition(name, options));
-    }
-    /**
-     * Both WAAPI and our internal animation functions use durations
-     * as defined by milliseconds, while our external API defines them
-     * as seconds.
-     */
-    options.duration && (options.duration = secondsToMilliseconds(options.duration));
-    options.repeatDelay && (options.repeatDelay = secondsToMilliseconds(options.repeatDelay));
+class MotionValue {
     /**
-     * Support deprecated way to set initial value. Prefer keyframe syntax.
+     * @param init - The initiating value
+     * @param config - Optional configuration options
+     *
+     * -  `transformer`: A function to transform incoming values with.
      */
-    if (options.from !== undefined) {
-        options.keyframes[0] = options.from;
+    constructor(init, options = {}) {
+        /**
+         * Tracks whether this value can output a velocity. Currently this is only true
+         * if the value is numerical, but we might be able to widen the scope here and support
+         * other value types.
+         *
+         * @internal
+         */
+        this.canTrackVelocity = null;
+        /**
+         * An object containing a SubscriptionManager for each active event.
+         */
+        this.events = {};
+        this.updateAndNotify = (v) => {
+            const currentTime = time.now();
+            /**
+             * If we're updating the value during another frame or eventloop
+             * than the previous frame, then the we set the previous frame value
+             * to current.
+             */
+            if (this.updatedAt !== currentTime) {
+                this.setPrevFrameValue();
+            }
+            this.prev = this.current;
+            this.setCurrent(v);
+            // Update update subscribers
+            if (this.current !== this.prev) {
+                this.events.change?.notify(this.current);
+                if (this.dependents) {
+                    for (const dependent of this.dependents) {
+                        dependent.dirty();
+                    }
+                }
+            }
+        };
+        this.hasAnimated = false;
+        this.setCurrent(init);
+        this.owner = options.owner;
     }
-    let shouldSkip = false;
-    if (options.type === false ||
-        (options.duration === 0 && !options.repeatDelay)) {
-        makeAnimationInstant(options);
-        if (options.delay === 0) {
-            shouldSkip = true;
+    setCurrent(current) {
+        this.current = current;
+        this.updatedAt = time.now();
+        if (this.canTrackVelocity === null && current !== undefined) {
+            this.canTrackVelocity = isFloat(this.current);
         }
     }
-    if (MotionGlobalConfig.instantAnimations ||
-        MotionGlobalConfig.skipAnimations ||
-        element?.shouldSkipAnimations ||
-        valueTransition.skipAnimations) {
-        shouldSkip = true;
-        makeAnimationInstant(options);
-        options.delay = 0;
-    }
-    /**
-     * If the transition type or easing has been explicitly set by the user
-     * then we don't want to allow flattening the animation.
-     */
-    options.allowFlatten = !valueTransition.type && !valueTransition.ease;
-    /**
-     * If we can or must skip creating the animation, and apply only
-     * the final keyframe, do so. We also check once keyframes are resolved but
-     * this early check prevents the need to create an animation at all.
-     */
-    if (shouldSkip && !isHandoff && value.get() !== undefined) {
-        const finalKeyframe = getFinalKeyframe(options.keyframes, valueTransition);
-        if (finalKeyframe !== undefined) {
-            frame.update(() => {
-                options.onUpdate(finalKeyframe);
-                options.onComplete();
-            });
-            return;
-        }
-    }
-    return valueTransition.isSync
-        ? new JSAnimation(options)
-        : new AsyncMotionValueAnimation(options);
-};
-
-function getValueState(visualElement) {
-    const state = [{}, {}];
-    visualElement?.values.forEach((value, key) => {
-        state[0][key] = value.get();
-        state[1][key] = value.getVelocity();
-    });
-    return state;
-}
-function resolveVariantFromProps(props, definition, custom, visualElement) {
-    /**
-     * If the variant definition is a function, resolve.
-     */
-    if (typeof definition === "function") {
-        const [current, velocity] = getValueState(visualElement);
-        definition = definition(custom !== undefined ? custom : props.custom, current, velocity);
-    }
-    /**
-     * If the variant definition is a variant label, or
-     * the function returned a variant label, resolve.
-     */
-    if (typeof definition === "string") {
-        definition = props.variants && props.variants[definition];
-    }
-    /**
-     * At this point we've resolved both functions and variant labels,
-     * but the resolved variant label might itself have been a function.
-     * If so, resolve. This can only have returned a valid target object.
-     */
-    if (typeof definition === "function") {
-        const [current, velocity] = getValueState(visualElement);
-        definition = definition(custom !== undefined ? custom : props.custom, current, velocity);
-    }
-    return definition;
-}
-
-function resolveVariant(visualElement, definition, custom) {
-    const props = visualElement.getProps();
-    return resolveVariantFromProps(props, definition, props.custom, visualElement);
-}
-
-const positionalKeys = new Set([
-    "width",
-    "height",
-    "top",
-    "left",
-    "right",
-    "bottom",
-    ...transformPropOrder,
-]);
-
-/**
- * Maximum time between the value of two frames, beyond which we
- * assume the velocity has since been 0.
- */
-const MAX_VELOCITY_DELTA = 30;
-const isFloat = (value) => {
-    return !isNaN(parseFloat(value));
-};
-/**
- * `MotionValue` is used to track the state and velocity of motion values.
- *
- * @public
- */
-class MotionValue {
-    /**
-     * @param init - The initiating value
-     * @param config - Optional configuration options
-     *
-     * -  `transformer`: A function to transform incoming values with.
-     */
-    constructor(init, options = {}) {
-        /**
-         * Tracks whether this value can output a velocity. Currently this is only true
-         * if the value is numerical, but we might be able to widen the scope here and support
-         * other value types.
-         *
-         * @internal
-         */
-        this.canTrackVelocity = null;
-        /**
-         * An object containing a SubscriptionManager for each active event.
-         */
-        this.events = {};
-        this.updateAndNotify = (v) => {
-            const currentTime = time.now();
-            /**
-             * If we're updating the value during another frame or eventloop
-             * than the previous frame, then the we set the previous frame value
-             * to current.
-             */
-            if (this.updatedAt !== currentTime) {
-                this.setPrevFrameValue();
-            }
-            this.prev = this.current;
-            this.setCurrent(v);
-            // Update update subscribers
-            if (this.current !== this.prev) {
-                this.events.change?.notify(this.current);
-                if (this.dependents) {
-                    for (const dependent of this.dependents) {
-                        dependent.dirty();
-                    }
-                }
-            }
-        };
-        this.hasAnimated = false;
-        this.setCurrent(init);
-        this.owner = options.owner;
-    }
-    setCurrent(current) {
-        this.current = current;
-        this.updatedAt = time.now();
-        if (this.canTrackVelocity === null && current !== undefined) {
-            this.canTrackVelocity = isFloat(this.current);
-        }
-    }
-    setPrevFrameValue(prevFrameValue = this.current) {
-        this.prevFrameValue = prevFrameValue;
-        this.prevUpdatedAt = this.updatedAt;
+    setPrevFrameValue(prevFrameValue = this.current) {
+        this.prevFrameValue = prevFrameValue;
+        this.prevUpdatedAt = this.updatedAt;
     }
     /**
      * Adds a function that will be notified when the `MotionValue` is updated.
@@ -9372,6 +9121,271 @@ function motionValue(init, options) {
     return new MotionValue(init, options);
 }
 
+/**
+ * If `transition` has `inherit: true`, shallow-merge it with
+ * `parentTransition` (child keys win) and strip the `inherit` key.
+ * Otherwise return `transition` unchanged.
+ */
+function resolveTransition(transition, parentTransition) {
+    if (transition?.inherit && parentTransition) {
+        const { inherit: _, ...rest } = transition;
+        return { ...parentTransition, ...rest };
+    }
+    return transition;
+}
+
+function getValueTransition$1(transition, key) {
+    const valueTransition = transition?.[key] ??
+        transition?.["default"] ??
+        transition;
+    if (valueTransition !== transition) {
+        return resolveTransition(valueTransition, transition);
+    }
+    return valueTransition;
+}
+
+const underDampedSpring = {
+    type: "spring",
+    stiffness: 500,
+    damping: 25,
+    restSpeed: 10,
+};
+const criticallyDampedSpring = (target) => ({
+    type: "spring",
+    stiffness: 550,
+    damping: target === 0 ? 2 * Math.sqrt(550) : 30,
+    restSpeed: 10,
+});
+const keyframesTransition = {
+    type: "keyframes",
+    duration: 0.8,
+};
+/**
+ * Default easing curve is a slightly shallower version of
+ * the default browser easing curve.
+ */
+const ease = {
+    type: "keyframes",
+    ease: [0.25, 0.1, 0.35, 1],
+    duration: 0.3,
+};
+const getDefaultTransition = (valueKey, { keyframes }) => {
+    if (keyframes.length > 2) {
+        return keyframesTransition;
+    }
+    else if (transformProps.has(valueKey)) {
+        return valueKey.startsWith("scale")
+            ? criticallyDampedSpring(keyframes[1])
+            : underDampedSpring;
+    }
+    return ease;
+};
+
+const orchestrationKeys = new Set([
+    "when",
+    "delay",
+    "delayChildren",
+    "staggerChildren",
+    "staggerDirection",
+    "repeat",
+    "repeatType",
+    "repeatDelay",
+    "from",
+    "elapsed",
+]);
+/**
+ * Decide whether a transition is defined on a given Transition.
+ * This filters out orchestration options and returns true
+ * if any options are left.
+ */
+function isTransitionDefined(transition) {
+    for (const key in transition) {
+        if (!orchestrationKeys.has(key))
+            return true;
+    }
+    return false;
+}
+
+const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
+    const valueTransition = getValueTransition$1(transition, name) || {};
+    /**
+     * Most transition values are currently completely overwritten by value-specific
+     * transitions. In the future it'd be nicer to blend these transitions. But for now
+     * delay actually does inherit from the root transition if not value-specific.
+     */
+    const delay = valueTransition.delay || transition.delay || 0;
+    /**
+     * Elapsed isn't a public transition option but can be passed through from
+     * optimized appear effects in milliseconds.
+     */
+    let { elapsed = 0 } = transition;
+    elapsed = elapsed - secondsToMilliseconds(delay);
+    const options = {
+        keyframes: Array.isArray(target) ? target : [null, target],
+        ease: "easeOut",
+        velocity: value.getVelocity(),
+        ...valueTransition,
+        delay: -elapsed,
+        onUpdate: (v) => {
+            value.set(v);
+            valueTransition.onUpdate && valueTransition.onUpdate(v);
+        },
+        onComplete: () => {
+            onComplete();
+            valueTransition.onComplete && valueTransition.onComplete();
+        },
+        name,
+        motionValue: value,
+        element: isHandoff ? undefined : element,
+    };
+    /**
+     * If there's no transition defined for this value, we can generate
+     * unique transition settings for this value.
+     */
+    if (!isTransitionDefined(valueTransition)) {
+        Object.assign(options, getDefaultTransition(name, options));
+    }
+    /**
+     * Both WAAPI and our internal animation functions use durations
+     * as defined by milliseconds, while our external API defines them
+     * as seconds.
+     */
+    options.duration && (options.duration = secondsToMilliseconds(options.duration));
+    options.repeatDelay && (options.repeatDelay = secondsToMilliseconds(options.repeatDelay));
+    /**
+     * Support deprecated way to set initial value. Prefer keyframe syntax.
+     */
+    if (options.from !== undefined) {
+        options.keyframes[0] = options.from;
+    }
+    let shouldSkip = false;
+    if (options.type === false ||
+        (options.duration === 0 && !options.repeatDelay)) {
+        makeAnimationInstant(options);
+        if (options.delay === 0) {
+            shouldSkip = true;
+        }
+    }
+    if (MotionGlobalConfig.instantAnimations ||
+        MotionGlobalConfig.skipAnimations ||
+        element?.shouldSkipAnimations ||
+        valueTransition.skipAnimations) {
+        shouldSkip = true;
+        makeAnimationInstant(options);
+        options.delay = 0;
+    }
+    /**
+     * If the transition type or easing has been explicitly set by the user
+     * then we don't want to allow flattening the animation.
+     */
+    options.allowFlatten = !valueTransition.type && !valueTransition.ease;
+    /**
+     * If we can or must skip creating the animation, and apply only
+     * the final keyframe, do so. We also check once keyframes are resolved but
+     * this early check prevents the need to create an animation at all.
+     */
+    if (shouldSkip && !isHandoff && value.get() !== undefined) {
+        const finalKeyframe = getFinalKeyframe(options.keyframes, valueTransition);
+        if (finalKeyframe !== undefined) {
+            frame.update(() => {
+                options.onUpdate(finalKeyframe);
+                options.onComplete();
+            });
+            return;
+        }
+    }
+    return valueTransition.isSync
+        ? new JSAnimation(options)
+        : new AsyncMotionValueAnimation(options);
+};
+
+/**
+ * Parse Framer's special CSS variable format into a CSS token and a fallback.
+ *
+ * ```
+ * `var(--foo, #fff)` => [`--foo`, '#fff']
+ * ```
+ *
+ * @param current
+ */
+const splitCSSVariableRegex = 
+// eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words
+/^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u;
+function parseCSSVariable(current) {
+    const match = splitCSSVariableRegex.exec(current);
+    if (!match)
+        return [,];
+    const [, token1, token2, fallback] = match;
+    return [`--${token1 ?? token2}`, fallback];
+}
+const maxDepth = 4;
+function getVariableValue(current, element, depth = 1) {
+    invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`, "max-css-var-depth");
+    const [token, fallback] = parseCSSVariable(current);
+    // No CSS variable detected
+    if (!token)
+        return;
+    // Attempt to read this CSS variable off the element
+    const resolved = window.getComputedStyle(element).getPropertyValue(token);
+    if (resolved) {
+        const trimmed = resolved.trim();
+        return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed;
+    }
+    return isCSSVariableToken(fallback)
+        ? getVariableValue(fallback, element, depth + 1)
+        : fallback;
+}
+
+function getValueState(visualElement) {
+    const state = [{}, {}];
+    visualElement?.values.forEach((value, key) => {
+        state[0][key] = value.get();
+        state[1][key] = value.getVelocity();
+    });
+    return state;
+}
+function resolveVariantFromProps(props, definition, custom, visualElement) {
+    /**
+     * If the variant definition is a function, resolve.
+     */
+    if (typeof definition === "function") {
+        const [current, velocity] = getValueState(visualElement);
+        definition = definition(custom !== undefined ? custom : props.custom, current, velocity);
+    }
+    /**
+     * If the variant definition is a variant label, or
+     * the function returned a variant label, resolve.
+     */
+    if (typeof definition === "string") {
+        definition = props.variants && props.variants[definition];
+    }
+    /**
+     * At this point we've resolved both functions and variant labels,
+     * but the resolved variant label might itself have been a function.
+     * If so, resolve. This can only have returned a valid target object.
+     */
+    if (typeof definition === "function") {
+        const [current, velocity] = getValueState(visualElement);
+        definition = definition(custom !== undefined ? custom : props.custom, current, velocity);
+    }
+    return definition;
+}
+
+function resolveVariant(visualElement, definition, custom) {
+    const props = visualElement.getProps();
+    return resolveVariantFromProps(props, definition, props.custom, visualElement);
+}
+
+const positionalKeys = new Set([
+    "width",
+    "height",
+    "top",
+    "left",
+    "right",
+    "bottom",
+    ...transformPropOrder,
+]);
+
 const isKeyframesTarget = (v) => {
     return Array.isArray(v);
 };
@@ -9460,6 +9474,11 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
     const animationTypeState = type &&
         visualElement.animationState &&
         visualElement.animationState.getState()[type];
+    const path = transition?.path;
+    if (path) {
+        // path mutates `target` to claim x/y; loop below skips them.
+        path.animateVisualElement(visualElement, target, transition, delay, animations);
+    }
     for (const key in target) {
         const value = visualElement.getValue(key, visualElement.latestValues[key] ?? null);
         const valueTarget = target[key];
@@ -9603,6 +9622,12 @@ const int = {
 
 const transformValueTypes = {
     rotate: degrees,
+    /**
+     * Internal channel for `transition.path` orientToPath. Composed onto
+     * `rotate` at the transform-build sites so the user's `rotate` is
+     * never read or overwritten. Not part of `transformPropOrder`.
+     */
+    pathRotation: degrees,
     rotateX: degrees,
     rotateY: degrees,
     rotateZ: degrees,
@@ -10694,6 +10719,14 @@ function buildTransform(latestValues, transform, transformTemplate) {
             }
         }
     }
+    // `pathRotation` composes onto `rotate` as a separate additive term so
+    // the user's `rotate` is never clobbered. Deliberately not a slot in
+    // `transformPropOrder`.
+    const pathRotation = latestValues.pathRotation;
+    if (pathRotation) {
+        transformIsDefault = false;
+        transformString += `rotate(${getValueAsType(pathRotation, numberValueTypes.pathRotation)}) `;
+    }
     transformString = transformString.trim();
     // If we have a custom `transform` template, pass our transform values and
     // generated transformString to that before returning
@@ -26903,5 +26936,5 @@ const useKdsLegacyMode = (initialValue = false) => {
   };
 };
 
-export { KdsAccordion, KdsAvatar, KdsAvatarCounter, KdsBadge, KdsBreadcrumb, _sfc_main$1y as KdsButton, _sfc_main$f as KdsCard, _sfc_main$15 as KdsCheckbox, KdsCheckboxGroup, KdsClickableCard, _sfc_main$S as KdsColorInput, KdsColorSwatch, _sfc_main$1h as KdsContextMenu, KdsDataType, _sfc_main$L as KdsDateInput, _sfc_main$J as KdsDateTimeFormatInput, KdsDateTimeInput, KdsDescription, KdsDivider, KdsDonutChart, _sfc_main$y as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsFileExplorer, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, _sfc_main$C as KdsIntervalInput, KdsLabel, KdsLink, _sfc_main$1x as KdsLinkButton, KdsLinkCard, KdsListContainer, KdsLiveStatus, KdsLoadingSkeleton, KdsLoadingSpinner, _sfc_main$1i as KdsMenu, _sfc_main$1n as KdsMenuButton, KdsMissingValueIcon, KdsModal, KdsModalLayout, _sfc_main$u as KdsMultiSelectDropdown, KdsNavItem, KdsNavigation, _sfc_main$V as KdsNumberInput, KdsPanel, _sfc_main$R as KdsPasswordInput, _sfc_main$I as KdsPatternInput, KdsPopover, KdsPreviewList, KdsProgressBar, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsResponsiveButtonGroup, KdsSearchInput, KdsSelectableCard, KdsSideDrawer, KdsSortableListBox, KdsSplitButton, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$E as KdsTimeInput, _sfc_main$1v as KdsToggleButton, KdsToggleSwitch, KdsTwinList, _sfc_main$Q as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, KdsZonedDateTimeInput, kdsActionButtonType, kdsActionButtonTypes, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsDateFormatCategories, kdsDateFormatCategory, kdsFileExplorerDraggingAnimationMode, kdsFileExplorerDraggingAnimationModes, kdsFileExplorerSize, kdsFileExplorerSizes, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsIntervalDirectionalities, kdsIntervalDirectionality, kdsIntervalInputFormat, kdsIntervalInputFormats, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSkeletonVariant, kdsLoadingSkeletonVariants, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPanelBodyOverflow, kdsPanelBodyOverflows, kdsPanelBodyVariant, kdsPanelBodyVariants, kdsPasswordInputAutocomplete, kdsPasswordInputAutocompletes, kdsPasswordInputVariant, kdsPasswordInputVariants, kdsPopoverPlacement, kdsPopoverPlacements, kdsPopoverRole, kdsPopoverRoles, kdsPopoverType, kdsPopoverTypes, kdsProgressBarSize, kdsProgressBarSizes, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsResponsiveButtonGroupAlignment, kdsResponsiveButtonGroupAlignments, kdsTabBarSize, kdsTabBarSizes, kdsTemporalType, kdsTemporalTypes, kdsTimeInputGranularities, kdsTimeInputGranularity, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsToggleSwitchLabelPosition, kdsToggleSwitchLabelPositions, kdsToggleSwitchSize, kdsToggleSwitchSizes, kdsTwinListSearchMode, kdsTwinListSearchModes, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsUsernameInputAutocomplete, kdsUsernameInputAutocompletes, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode, vKdsTooltip };
+export { KdsAccordion, KdsAvatar, KdsAvatarCounter, KdsBadge, KdsBreadcrumb, _sfc_main$1y as KdsButton, _sfc_main$f as KdsCard, _sfc_main$15 as KdsCheckbox, KdsCheckboxGroup, KdsClickableCard, _sfc_main$S as KdsColorInput, KdsColorSwatch, _sfc_main$1h as KdsContextMenu, KdsDataType, _sfc_main$L as KdsDateInput, _sfc_main$J as KdsDateTimeFormatInput, KdsDateTimeInput, KdsDescription, KdsDivider, KdsDonutChart, _sfc_main$y as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsFileExplorer, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, _sfc_main$C as KdsIntervalInput, KdsLabel, KdsLink, _sfc_main$1x as KdsLinkButton, KdsLinkCard, KdsListContainer, KdsLiveStatus, KdsLoadingSkeleton, KdsLoadingSpinner, _sfc_main$1i as KdsMenu, _sfc_main$1n as KdsMenuButton, KdsMissingValueIcon, KdsModal, KdsModalLayout, _sfc_main$u as KdsMultiSelectDropdown, KdsNavItem, KdsNavigation, _sfc_main$V as KdsNumberInput, KdsPanel, _sfc_main$R as KdsPasswordInput, _sfc_main$I as KdsPatternInput, KdsPopover, KdsPreviewList, KdsProgressBar, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsResponsiveButtonGroup, KdsSearchInput, KdsSelectableCard, KdsSideDrawer, KdsSortableListBox, KdsSplitButton, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$E as KdsTimeInput, _sfc_main$1v as KdsToggleButton, KdsToggleSwitch, KdsTwinList, _sfc_main$Q as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, KdsZonedDateTimeInput, kdsActionButtonType, kdsActionButtonTypes, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsDateFormatCategories, kdsDateFormatCategory, kdsFileExplorerDraggingAnimationMode, kdsFileExplorerDraggingAnimationModes, kdsFileExplorerSize, kdsFileExplorerSizes, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsIntervalDirectionalities, kdsIntervalDirectionality, kdsIntervalInputFormat, kdsIntervalInputFormats, kdsLinkSize, kdsLinkSizes, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSkeletonVariant, kdsLoadingSkeletonVariants, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPanelBodyOverflow, kdsPanelBodyOverflows, kdsPanelBodyVariant, kdsPanelBodyVariants, kdsPasswordInputAutocomplete, kdsPasswordInputAutocompletes, kdsPasswordInputVariant, kdsPasswordInputVariants, kdsPopoverPlacement, kdsPopoverPlacements, kdsPopoverRole, kdsPopoverRoles, kdsPopoverType, kdsPopoverTypes, kdsProgressBarSize, kdsProgressBarSizes, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsResponsiveButtonGroupAlignment, kdsResponsiveButtonGroupAlignments, kdsTabBarSize, kdsTabBarSizes, kdsTemporalType, kdsTemporalTypes, kdsTimeInputGranularities, kdsTimeInputGranularity, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsToggleSwitchLabelPosition, kdsToggleSwitchLabelPositions, kdsToggleSwitchSize, kdsToggleSwitchSizes, kdsTwinListSearchMode, kdsTwinListSearchModes, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsUsernameInputAutocomplete, kdsUsernameInputAutocompletes, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode, vKdsTooltip };
 //# sourceMappingURL=index.js.map