@cube-dev/ui-kit 0.98.9 → 0.99.1

package/es/stories/Tasty.stories.js

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { GlobalStyledHeading, StyledButton as StyledButtonComponent, } from './components/StyledButton';
+import { GlobalStyledHeading, StyledButton as StyledButtonComponent, } from './components/StyledButton.js';
 export default {
     title: 'Styling/Global Styles',
 };

package/es/stories/components/ConfirmDeletionDialogForm.js

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DialogForm, Field, Input, Paragraph, Text, } from '../../index';
+import { DialogForm, Field, Input, Paragraph, Text, } from '../../index.js';
 export function ConfirmDeletionDialogForm(props) {
     let { name, onSubmit, onDismiss } = props;
     return (_jsxs(DialogForm, { title: "Delete Deployment", submitProps: {

package/es/stories/components/DialogFormApp.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, DialogTrigger } from '../../index';
-import { ConfirmDeletionDialogForm } from './ConfirmDeletionDialogForm';
+import { Button, DialogTrigger } from '../../index.js';
+import { ConfirmDeletionDialogForm } from './ConfirmDeletionDialogForm.js';
 export function DialogFormApp() {
     return (_jsxs(DialogTrigger, { children: [_jsx(Button, { children: "Delete the instance" }), _jsx(ConfirmDeletionDialogForm, { name: "instanceName" })] }));
 }

package/es/stories/components/StyledButton.js

@@ -1,31 +1,35 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../../components/actions';
-import { tasty } from '../../tasty';
+import { Button } from '../../components/actions/index.js';
+import { tasty, useGlobalStyles } from '../../tasty/index.js';
 export const StyledButton = tasty(Button, {
     styles: {
         padding: '3x 6x',
         preset: 't1',
+        fill: 'okhsl(200 40% 80%)',
     },
 });
-export const GlobalStyledHeading = tasty('.myButton', {
-    display: 'inline-block',
-    padding: '1x 2x',
-    preset: 't2',
-    border: true,
-    radius: true,
-    fill: {
-        '': '#white',
-        ':hover': '#purple.20',
-    },
-    color: '#dark',
-});
+export function GlobalStyledHeading() {
+    useGlobalStyles('.myButton', {
+        display: 'inline-block',
+        padding: '1x 2x',
+        preset: 't2',
+        border: true,
+        radius: true,
+        fill: {
+            '': '#white',
+            ':hover': '#purple.20',
+        },
+        color: '#dark',
+    });
+    return null;
+}
 export function Block() {
     return (_jsxs(_Fragment, { children: [_jsx(StyledButton, { children: "123" }), _jsx(GlobalStyledHeading, {})] }));
 }

package/es/stories/lists/baseProps.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.98.9
+ * @cube-dev/ui-kit v0.99.1
  * Released under the MIT license.
  */
 
-import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES, } from '../../tasty';
+import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES, } from '../../tasty/index.js';
 const allStyles = Array.from(new Set([
     ...BASE_STYLES,
     ...POSITION_STYLES,

package/es/stories/playground/PlaygroundEditor.js

@@ -0,0 +1,89 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.1
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { json } from '@codemirror/lang-json';
+import CodeMirror from '@uiw/react-codemirror';
+import { parse } from 'best-effort-json-parser';
+import { useCallback, useRef, useState } from 'react';
+import { Layout } from '../../components/content/Layout/index.js';
+import { tasty } from '../../tasty/index.js';
+const ErrorDisplay = tasty({
+    styles: {
+        padding: '1x 2x',
+        fill: '#danger.10',
+        color: '#danger-text',
+        preset: 't4',
+        borderTop: '#danger.20',
+    },
+});
+export function PlaygroundEditor({ value, onChange }) {
+    const [error, setError] = useState(null);
+    const [editorValue, setEditorValue] = useState(() => JSON.stringify(value, null, 2));
+    const isFocusedRef = useRef(false);
+    const handleChange = useCallback((val) => {
+        setEditorValue(val);
+        try {
+            // Use best-effort parser for lenient parsing (handles JS-like syntax)
+            const parsed = parse(val);
+            if (parsed && typeof parsed === 'object') {
+                setError(null);
+                onChange(parsed);
+            }
+        }
+        catch (e) {
+            setError(e.message);
+        }
+    }, [onChange]);
+    const handleFocus = useCallback(() => {
+        isFocusedRef.current = true;
+    }, []);
+    // Normalize JSON on blur - format it properly
+    const handleBlur = useCallback(() => {
+        isFocusedRef.current = false;
+        try {
+            const parsed = parse(editorValue);
+            if (parsed && typeof parsed === 'object') {
+                const normalized = JSON.stringify(parsed, null, 2);
+                setEditorValue(normalized);
+                setError(null);
+            }
+        }
+        catch {
+            // Keep current value if parsing fails
+        }
+    }, [editorValue]);
+    // Normalize on paste
+    const handlePaste = useCallback(() => {
+        // Use setTimeout to let the paste complete first
+        setTimeout(() => {
+            try {
+                const parsed = parse(editorValue);
+                if (parsed && typeof parsed === 'object') {
+                    const normalized = JSON.stringify(parsed, null, 2);
+                    setEditorValue(normalized);
+                    setError(null);
+                }
+            }
+            catch {
+                // Keep current value if parsing fails
+            }
+        }, 0);
+    }, [editorValue]);
+    // Sync external value changes only when not focused
+    const currentJson = JSON.stringify(value, null, 2);
+    if (currentJson !== editorValue && !error && !isFocusedRef.current) {
+        setEditorValue(currentJson);
+    }
+    return (_jsxs(Layout, { height: "100%", children: [_jsx(Layout.Toolbar, { children: "Styles (JSON)" }), _jsx(Layout.Content, { padding: 0, children: _jsxs(Layout.Grid, { rows: "1sf max-content", flexGrow: 1, children: [_jsx(CodeMirror, { value: editorValue, height: "100%", extensions: [json()], theme: "light", basicSetup: {
+                                lineNumbers: true,
+                                foldGutter: true,
+                                highlightActiveLine: true,
+                            }, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onPaste: handlePaste }), error && _jsxs(ErrorDisplay, { children: ["JSON Error: ", error] })] }) })] }));
+}
+
+        

package/es/stories/playground/PlaygroundLayout.js

@@ -0,0 +1,16 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.1
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Layout } from '../../components/content/Layout/index.js';
+export function PlaygroundLayout({ toolbar, editor, preview, output, }) {
+    return (_jsxs(Layout, { height: "100vh", children: [_jsx(Layout.Toolbar, { children: toolbar }), _jsx(Layout.Panel, { isResizable: true, side: "bottom", defaultSize: 250, minSize: 150, maxSize: 400, contentPadding: 0, sizeStorageKey: "tasty-playground-output-size", children: output }), preview ? (_jsxs(Layout, { children: [_jsx(Layout.Panel, { isResizable: true, side: "left", defaultSize: 450, minSize: 300, maxSize: 700, contentPadding: 0, sizeStorageKey: "tasty-playground-editor-size", children: editor }), _jsx(Layout.Content, { padding: 0, children: preview })] })) : (
+            /* No preview - editor takes full width */
+            _jsx(Layout.Content, { padding: 0, children: editor }))] }));
+}
+
+        

package/es/stories/playground/PlaygroundOutput.js

@@ -0,0 +1,92 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.1
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import copy from 'clipboard-copy';
+import { useCallback, useMemo } from 'react';
+import { Button } from '../../components/actions/Button/index.js';
+import { Layout } from '../../components/content/Layout/index.js';
+import { PrismCode } from '../../components/content/PrismCode/PrismCode.js';
+import { useToastsApi } from '../../components/overlays/Toasts/index.js';
+import { CopyIcon } from '../../icons/index.js';
+import { tasty } from '../../tasty/index.js';
+import { renderStyles } from '../../tasty/pipeline/index.js';
+const OutputContent = tasty({
+    styles: {
+        display: 'block',
+        flex: 1,
+        overflow: 'auto',
+        padding: '2x',
+        margin: 0,
+        fill: '#dark-bg',
+    },
+});
+function formatStyleResults(results) {
+    if (results.length === 0) {
+        return '/* No styles generated */';
+    }
+    // Group rules by selector + atRules combination
+    const groupedRules = new Map();
+    for (const result of results) {
+        const { selector, declarations, atRules } = result;
+        // Create a unique key for grouping: selector + atRules
+        const atRulesKey = atRules?.join('|') ?? '';
+        const groupKey = `${selector}|||${atRulesKey}`;
+        const declList = declarations.split(';').filter(Boolean);
+        if (!groupedRules.has(groupKey)) {
+            groupedRules.set(groupKey, []);
+        }
+        groupedRules.get(groupKey).push(...declList);
+    }
+    const lines = [];
+    for (const [groupKey, declList] of groupedRules) {
+        const [selector, atRulesKey] = groupKey.split('|||');
+        const atRules = atRulesKey ? atRulesKey.split('|') : [];
+        // Build the rule with merged declarations
+        const rule = `${selector} {\n  ${declList.join(';\n  ')};\n}`;
+        if (atRules.length > 0) {
+            // Wrap in at-rules (nested)
+            let wrapped = rule;
+            for (let i = atRules.length - 1; i >= 0; i--) {
+                const indent = '  '.repeat(atRules.length - i);
+                const innerIndent = '  '.repeat(atRules.length - i + 1);
+                wrapped = `${atRules[i]} {\n${wrapped
+                    .split('\n')
+                    .map((line) => innerIndent + line)
+                    .join('\n')}\n${indent.slice(2)}}`;
+            }
+            lines.push(wrapped);
+        }
+        else {
+            lines.push(rule);
+        }
+    }
+    return lines.join('\n\n');
+}
+export function PlaygroundOutput({ styles }) {
+    const { toast } = useToastsApi();
+    const cssOutput = useMemo(() => {
+        if (!styles || Object.keys(styles).length === 0) {
+            return '/* Enter styles in the editor to see generated CSS */';
+        }
+        try {
+            // Use a demo selector for display purposes
+            const results = renderStyles(styles, '.demo');
+            return formatStyleResults(results);
+        }
+        catch (e) {
+            return `/* Error generating CSS: ${e.message} */`;
+        }
+    }, [styles]);
+    const handleCopy = useCallback(async () => {
+        await copy(cssOutput);
+        toast.success('CSS copied to clipboard');
+    }, [cssOutput, toast]);
+    return (_jsxs(Layout, { height: "100%", children: [_jsxs(Layout.Toolbar, { children: [_jsx("span", { children: "Generated CSS" }), _jsx(Button, { size: "small", type: "clear", icon: _jsx(CopyIcon, {}), "aria-label": "Copy CSS", onPress: handleCopy })] }), _jsx(Layout.Content, { padding: 0, children: _jsx(OutputContent, { children: _jsx(PrismCode, { code: cssOutput, language: "css" }) }) })] }));
+}
+
+        

package/es/stories/playground/PlaygroundPreview.js

@@ -0,0 +1,91 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.1
+ * Released under the MIT license.
+ */
+
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Layout } from '../../components/content/Layout/index.js';
+import { tasty } from '../../tasty/index.js';
+import { Button } from './components/Button.js';
+import { Card } from './components/Card.js';
+import { ScrollProgress } from './components/ScrollProgress.js';
+const PreviewContent = tasty({
+    styles: {
+        display: 'flex',
+        flex: 1,
+        placeContent: 'center',
+        placeItems: 'center',
+        overflow: 'auto',
+        padding: '4x',
+        fill: '#light',
+        // Checkered pattern to show transparency
+        backgroundImage: 'linear-gradient(45deg, #dark.05 25%, transparent 25%), linear-gradient(-45deg, #dark.05 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #dark.05 75%), linear-gradient(-45deg, transparent 75%, #dark.05 75%)',
+        backgroundSize: '20px 20px',
+        backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
+    },
+});
+const StateRow = tasty({
+    styles: {
+        display: 'flex',
+        gap: '2x',
+        placeItems: 'center',
+    },
+});
+const StateLabel = tasty({
+    styles: {
+        display: 'inline-flex',
+        width: '80px',
+        preset: 't4',
+        color: '#dark-03',
+    },
+});
+const ButtonColumn = tasty({
+    styles: {
+        display: 'flex',
+        flow: 'column',
+        gap: '12px',
+        padding: '3x',
+        radius: '1r',
+    },
+    styleProps: ['fill'],
+});
+// Button state configurations for forced preview
+const BUTTON_STATES = [
+    {
+        label: 'Default',
+        mods: { hovered: false, focused: false, pressed: false, disabled: false },
+    },
+    {
+        label: 'Hovered',
+        mods: { hovered: true, focused: false, pressed: false, disabled: false },
+    },
+    {
+        label: 'Focused',
+        mods: { hovered: false, focused: true, pressed: false, disabled: false },
+    },
+    {
+        label: 'Pressed',
+        mods: { hovered: false, focused: false, pressed: true, disabled: false },
+    },
+    {
+        label: 'Disabled',
+        mods: { hovered: false, focused: false, pressed: false, disabled: true },
+        isDisabled: true,
+    },
+    {
+        label: 'Hover+Focus',
+        mods: { hovered: true, focused: true, pressed: false, disabled: false },
+    },
+];
+export function PlaygroundPreview({ component, styles, }) {
+    return (_jsxs(Layout, { height: "100%", children: [_jsxs(Layout.Toolbar, { children: ["Preview: ", component] }), _jsx(Layout.Content, { padding: 0, children: _jsxs(PreviewContent, { children: [component === 'card' && _jsx(Card, { styles: styles }), component === 'scroll-progress' && (_jsx(ScrollProgress, { styles: styles })), component === 'button' && (_jsxs("div", { style: { display: 'flex', gap: '24px' }, children: [_jsx("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        gap: '12px',
+                                        padding: '24px 0',
+                                    }, children: BUTTON_STATES.map((state) => (_jsx(StateLabel, { style: { height: '32px' }, children: state.label }, state.label))) }), _jsx(ButtonColumn, { children: BUTTON_STATES.map((state) => (_jsx(Button, { styles: styles, isDisabled: 'isDisabled' in state ? state.isDisabled : false, mods: state.mods, children: "Button" }, state.label))) }), _jsx(ButtonColumn, { fill: "#white", children: BUTTON_STATES.map((state) => (_jsx(Button, { styles: styles, isDisabled: 'isDisabled' in state ? state.isDisabled : false, mods: state.mods, children: "Button" }, state.label))) })] }))] }) })] }));
+}
+
+        

package/es/stories/playground/components/Button.js

@@ -0,0 +1,45 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.1
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useButton, useFocusRing, useHover } from 'react-aria';
+import { tasty } from '../../../tasty/index.js';
+const ButtonElement = tasty({
+    as: 'button',
+    qa: 'PlaygroundButton',
+    styles: {
+        display: 'inline-flex',
+        placeItems: 'center',
+        border: 0,
+        background: 'none',
+        font: 'inherit',
+    },
+});
+export function Button({ styles, children, isDisabled = false, onPress, mods: externalMods, }) {
+    const ref = useRef(null);
+    const { buttonProps, isPressed } = useButton({
+        isDisabled,
+        onPress,
+    }, ref);
+    const { hoverProps, isHovered } = useHover({ isDisabled });
+    const { focusProps, isFocusVisible } = useFocusRing();
+    // Internal mods from react-aria hooks
+    const internalMods = {
+        pressed: isPressed,
+        hovered: isHovered,
+        focused: isFocusVisible,
+        disabled: isDisabled,
+    };
+    // External mods override internal ones
+    const mergedMods = externalMods
+        ? { ...internalMods, ...externalMods }
+        : internalMods;
+    return (_jsx(ButtonElement, { ...buttonProps, ...hoverProps, ...focusProps, ref: ref, styles: styles, mods: mergedMods, children: children || 'Click me' }));
+}
+
+        

package/es/stories/playground/components/Card.js

@@ -0,0 +1,20 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.1
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { tasty } from '../../../tasty/index.js';
+const CardElement = tasty({
+    qa: 'PlaygroundCard',
+    styles: {
+        display: 'block',
+    },
+});
+export function Card({ styles, children }) {
+    return (_jsx(CardElement, { styles: styles, children: children || (_jsxs(_Fragment, { children: [_jsx("div", { style: { fontWeight: 600, marginBottom: '8px' }, children: "Card Title" }), _jsx("div", { style: { opacity: 0.7 }, children: "This is a simple card component for demonstrating tasty styles." })] })) }));
+}
+
+        

package/es/stories/playground/components/ScrollProgress.js

@@ -0,0 +1,17 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.1
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tasty } from '../../../tasty/index.js';
+const ScrollProgressElement = tasty({
+    qa: 'PlaygroundScrollProgress',
+});
+export function ScrollProgress({ styles }) {
+    return (_jsxs(ScrollProgressElement, { styles: styles, children: [_jsx("div", { "data-element": "ProgressBar" }), _jsxs("div", { "data-element": "Content", children: [_jsx("p", { style: { margin: 0, opacity: 0.7 }, children: "Scroll down to see the progress bar animate" }), _jsxs("p", { style: { margin: '16px 0 0', opacity: 0.5, fontSize: '12px' }, children: ["(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {})] })] })] }));
+}
+
+        

package/es/stories/playground/examples.js

@@ -0,0 +1,158 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.1
+ * Released under the MIT license.
+ */
+
+import { DEFAULT_OUTLINE_STYLES, DEFAULT_PRIMARY_STYLES, } from '../../data/item-themes.js';
+// Common button layout styles
+const BUTTON_BASE_STYLES = {
+    display: 'inline-flex',
+    placeItems: 'center',
+    gap: '1x',
+    padding: '(1.25x - 1bw) (2x - 1bw)',
+    radius: '1r',
+    preset: 't3',
+    cursor: {
+        '': 'pointer',
+        disabled: 'not-allowed',
+    },
+    transition: 'theme',
+};
+export const PLAYGROUND_EXAMPLES = [
+    {
+        name: 'Raw (No preview)',
+        component: 'raw',
+        styles: {
+            display: 'flex',
+            flow: 'column',
+            gap: '2x',
+            padding: '3x',
+            fill: '#white',
+            radius: '2r',
+            border: true,
+        },
+    },
+    {
+        name: 'Card - Basic',
+        component: 'card',
+        styles: {
+            display: 'flex',
+            flow: 'column',
+            gap: '2x',
+            padding: '3x',
+            fill: '#white',
+            radius: '2r',
+            border: true,
+            shadow: '0 2px 8px #dark.10',
+        },
+    },
+    {
+        name: 'Card - Purple',
+        component: 'card',
+        styles: {
+            display: 'flex',
+            flow: 'column',
+            gap: '2x',
+            padding: '4x',
+            fill: '#purple',
+            color: '#white',
+            radius: '2r',
+        },
+    },
+    {
+        name: 'Card - Responsive',
+        component: 'card',
+        styles: {
+            display: 'flex',
+            flow: 'column',
+            gap: '2x',
+            padding: {
+                '': '4x',
+                '@(w < 768px)': '2x',
+            },
+            fill: '#white',
+            radius: '2r',
+            border: true,
+            width: {
+                '': '400px',
+                '@(w < 768px)': '100%',
+            },
+        },
+    },
+    {
+        name: 'Button - Primary',
+        component: 'button',
+        styles: {
+            ...BUTTON_BASE_STYLES,
+            ...DEFAULT_PRIMARY_STYLES,
+        },
+    },
+    {
+        name: 'Button - Outline',
+        component: 'button',
+        styles: {
+            ...BUTTON_BASE_STYLES,
+            ...DEFAULT_OUTLINE_STYLES,
+        },
+    },
+    {
+        name: 'Scroll Progress (@supports)',
+        component: 'scroll-progress',
+        styles: {
+            // Container styles
+            display: 'flex',
+            flow: 'column',
+            width: '300px',
+            height: '200px',
+            radius: '2r',
+            border: true,
+            overflow: 'auto',
+            fill: '#white',
+            // Predefined state for @supports(animation-timeline: scroll())
+            '@supports-timeline': '@supports(animation-timeline: scroll())',
+            // Define keyframes for the progress animation
+            '@keyframes': {
+                'grow-progress': {
+                    from: 'scale: 0 1',
+                    to: 'scale: 1 1',
+                },
+            },
+            // Progress bar element
+            ProgressBar: {
+                position: 'sticky',
+                top: 0,
+                left: 0,
+                zIndex: 1,
+                height: 'min .5x',
+                margin: '-.5x bottom',
+                fill: '#purple',
+                radius: 'round',
+                transformOrigin: 'left center',
+                // Fallback for browsers without animation-timeline
+                scale: {
+                    '': '1 1',
+                    // When animation-timeline is supported, use scale: 0 1 as starting point
+                    '@supports-timeline': '0 1',
+                },
+                // Animation properties only when supported
+                animation: {
+                    '': 'none',
+                    '@supports-timeline': 'grow-progress linear both',
+                },
+                animationTimeline: {
+                    '': 'auto',
+                    '@supports-timeline': 'scroll(nearest block)',
+                },
+            },
+            // Scrollable content area
+            Content: {
+                display: 'block',
+                padding: '2x',
+            },
+        },
+    },
+];
+
+