@progress/kendo-themes-html 5.4.2-dev.5 → 5.5.1-dev.0

package/src/signature/tests/signature.tsx

@@ -0,0 +1,457 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Button } from '../../button';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+root.render(
+    <div id="test-area" className="k-d-grid k-grid-cols-2">
+        <span>Signature</span>
+        <span>Signature RTL</span>
+
+        <div className="k-signature k-signature-md k-input k-input-solid k-rounded-md">
+            <div className="k-signature-actions k-signature-actions-top">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-maximize"
+                    className="k-signature-action k-signature-minimize"
+                >
+                </Button>
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-minimize"
+                    className="k-signature-action k-signature-minimize k-hidden"
+                >
+                </Button>
+            </div>
+            <canvas className="k-signature-canvas">
+                An alternate text describing what the canvas displays.
+            </canvas>
+            <div className="k-signature-line"></div>
+            <div className="k-signature-actions k-signature-actions-bottom">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="close"
+                    className="k-signature-action k-signature-clear"
+                >
+                </Button>
+            </div>
+        </div>
+        <div className="k-signature k-signature-md k-input k-input-solid k-rounded-md k-rtl">
+            <div className="k-signature-actions k-signature-actions-top">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-maximize"
+                    className="k-signature-action k-signature-minimize"
+                >
+                </Button>
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-minimize"
+                    className="k-signature-action k-signature-minimize k-hidden"
+                >
+                </Button>
+            </div>
+            <canvas className="k-signature-canvas">
+                An alternate text describing what the canvas displays.
+            </canvas>
+            <div className="k-signature-line"></div>
+            <div className="k-signature-actions k-signature-actions-bottom">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="close"
+                    className="k-signature-action k-signature-clear"
+                >
+                </Button>
+            </div>
+        </div>
+        <div className="k-signature k-signature-md k-input k-input-solid k-rounded-md k-hover">
+            <div className="k-signature-actions k-signature-actions-top">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-maximize"
+                    className="k-signature-action k-signature-minimize"
+                >
+                </Button>
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-minimize"
+                    className="k-signature-action k-signature-minimize k-hidden"
+                >
+                </Button>
+            </div>
+            <canvas className="k-signature-canvas">
+                An alternate text describing what the canvas displays.
+            </canvas>
+            <div className="k-signature-line"></div>
+            <div className="k-signature-actions k-signature-actions-bottom">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="close"
+                    className="k-signature-action k-signature-clear"
+                >
+                </Button>
+            </div>
+        </div>
+        <div className="k-signature k-signature-md k-input k-input-solid k-rounded-md k-hover k-rtl">
+            <div className="k-signature-actions k-signature-actions-top">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-maximize"
+                    className="k-signature-action k-signature-minimize"
+                >
+                </Button>
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-minimize"
+                    className="k-signature-action k-signature-minimize k-hidden"
+                >
+                </Button>
+            </div>
+            <canvas className="k-signature-canvas">
+                An alternate text describing what the canvas displays.
+            </canvas>
+            <div className="k-signature-line"></div>
+            <div className="k-signature-actions k-signature-actions-bottom">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="close"
+                    className="k-signature-action k-signature-clear"
+                >
+                </Button>
+            </div>
+        </div>
+        <div className="k-signature k-signature-md k-input k-input-solid k-rounded-md k-focus">
+            <div className="k-signature-actions k-signature-actions-top">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-maximize"
+                    className="k-signature-action k-signature-minimize"
+                >
+                </Button>
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-minimize"
+                    className="k-signature-action k-signature-minimize k-hidden"
+                >
+                </Button>
+            </div>
+            <canvas className="k-signature-canvas">
+                An alternate text describing what the canvas displays.
+            </canvas>
+            <div className="k-signature-line"></div>
+            <div className="k-signature-actions k-signature-actions-bottom">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="close"
+                    className="k-signature-action k-signature-clear"
+                >
+                </Button>
+            </div>
+        </div>
+        <div className="k-signature k-signature-md k-input k-input-solid k-rounded-md k-focus k-rtl">
+            <div className="k-signature-actions k-signature-actions-top">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-maximize"
+                    className="k-signature-action k-signature-minimize"
+                >
+                </Button>
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-minimize"
+                    className="k-signature-action k-signature-minimize k-hidden"
+                >
+                </Button>
+            </div>
+            <canvas className="k-signature-canvas">
+                An alternate text describing what the canvas displays.
+            </canvas>
+            <div className="k-signature-line"></div>
+            <div className="k-signature-actions k-signature-actions-bottom">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="close"
+                    className="k-signature-action k-signature-clear"
+                >
+                </Button>
+            </div>
+        </div>
+        <div className="k-signature k-signature-md k-input k-input-solid k-rounded-md k-invalid">
+            <div className="k-signature-actions k-signature-actions-top">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-maximize"
+                    className="k-signature-action k-signature-minimize"
+                >
+                </Button>
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-minimize"
+                    className="k-signature-action k-signature-minimize k-hidden"
+                >
+                </Button>
+            </div>
+            <canvas className="k-signature-canvas">
+                An alternate text describing what the canvas displays.
+            </canvas>
+            <div className="k-signature-line"></div>
+            <div className="k-signature-actions k-signature-actions-bottom">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="close"
+                    className="k-signature-action k-signature-clear"
+                >
+                </Button>
+            </div>
+        </div>
+        <div className="k-signature k-signature-md k-input k-input-solid k-rounded-md k-invalid k-rtl">
+            <div className="k-signature-actions k-signature-actions-top">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-maximize"
+                    className="k-signature-action k-signature-minimize"
+                >
+                </Button>
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-minimize"
+                    className="k-signature-action k-signature-minimize k-hidden"
+                >
+                </Button>
+            </div>
+            <canvas className="k-signature-canvas">
+                An alternate text describing what the canvas displays.
+            </canvas>
+            <div className="k-signature-line"></div>
+            <div className="k-signature-actions k-signature-actions-bottom">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="close"
+                    className="k-signature-action k-signature-clear"
+                >
+                </Button>
+            </div>
+        </div>
+        <div className="k-signature k-signature-md k-input k-input-solid k-rounded-md k-invalid k-focus">
+            <div className="k-signature-actions k-signature-actions-top">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-maximize"
+                    className="k-signature-action k-signature-minimize"
+                >
+                </Button>
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-minimize"
+                    className="k-signature-action k-signature-minimize k-hidden"
+                >
+                </Button>
+            </div>
+            <canvas className="k-signature-canvas">
+                An alternate text describing what the canvas displays.
+            </canvas>
+            <div className="k-signature-line"></div>
+            <div className="k-signature-actions k-signature-actions-bottom">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="close"
+                    className="k-signature-action k-signature-clear"
+                >
+                </Button>
+            </div>
+        </div>
+        <div className="k-signature k-signature-md k-input k-input-solid k-rounded-md k-invalid k-focus k-rtl">
+            <div className="k-signature-actions k-signature-actions-top">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-maximize"
+                    className="k-signature-action k-signature-minimize"
+                >
+                </Button>
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-minimize"
+                    className="k-signature-action k-signature-minimize k-hidden"
+                >
+                </Button>
+            </div>
+            <canvas className="k-signature-canvas">
+                An alternate text describing what the canvas displays.
+            </canvas>
+            <div className="k-signature-line"></div>
+            <div className="k-signature-actions k-signature-actions-bottom">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="close"
+                    className="k-signature-action k-signature-clear"
+                >
+                </Button>
+            </div>
+        </div>
+        <div className="k-signature k-signature-md k-input k-input-solid k-rounded-md k-disabled">
+            <div className="k-signature-actions k-signature-actions-top">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-maximize"
+                    className="k-signature-action k-signature-minimize"
+                >
+                </Button>
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-minimize"
+                    className="k-signature-action k-signature-minimize k-hidden"
+                >
+                </Button>
+            </div>
+            <canvas className="k-signature-canvas">
+                An alternate text describing what the canvas displays.
+            </canvas>
+            <div className="k-signature-line"></div>
+            <div className="k-signature-actions k-signature-actions-bottom">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="close"
+                    className="k-signature-action k-signature-clear"
+                >
+                </Button>
+            </div>
+        </div>
+        <div className="k-signature k-signature-md k-input k-input-solid k-rounded-md k-disabled k-rtl">
+            <div className="k-signature-actions k-signature-actions-top">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-maximize"
+                    className="k-signature-action k-signature-minimize"
+                >
+                </Button>
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-minimize"
+                    className="k-signature-action k-signature-minimize k-hidden"
+                >
+                </Button>
+            </div>
+            <canvas className="k-signature-canvas">
+                An alternate text describing what the canvas displays.
+            </canvas>
+            <div className="k-signature-line"></div>
+            <div className="k-signature-actions k-signature-actions-bottom">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="close"
+                    className="k-signature-action k-signature-clear"
+                >
+                </Button>
+            </div>
+        </div>
+        <div className="k-signature k-signature-md k-input k-input-solid k-rounded-md k-signature-maximized">
+            <div className="k-signature-actions k-signature-actions-top">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-maximize"
+                    className="k-signature-action k-signature-minimize"
+                >
+                </Button>
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="window-minimize"
+                    className="k-signature-action k-signature-minimize k-hidden"
+                >
+                </Button>
+            </div>
+            <canvas className="k-signature-canvas">
+                An alternate text describing what the canvas displays.
+            </canvas>
+            <div className="k-signature-line"></div>
+            <div className="k-signature-actions k-signature-actions-bottom">
+                <Button
+                    fillMode="flat"
+                    size="medium"
+                    rounded="medium"
+                    icon="close"
+                    className="k-signature-action k-signature-clear"
+                >
+                </Button>
+            </div>
+        </div>
+    </div>
+);

package/src/switch/tests/switch-size-rounded.tsx

@@ -18,9 +18,9 @@ root.render(
         <div id="test-area" className="k-d-grid">
 
             <span><small>rounded / size</small></span>
-            <span className="k-colspan-2">small</span>
-            <span className="k-colspan-2">medium</span>
-            <span className="k-colspan-2">large</span>
+            <span className="k-colspan-2 k-col-span-2">small</span>
+            <span className="k-colspan-2 k-col-span-2">medium</span>
+            <span className="k-colspan-2 k-col-span-2">large</span>
 
             <span>null</span>
             <span>

package/src/toolbar/tests/toolbar-angular.tsx

@@ -18,8 +18,8 @@ root.render(
     <>
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
-            <span className="k-colspan-all">Angular specific rendering and spacing</span>
-            <section className="k-colspan-all">
+            <span className="k-colspan-all k-col-span-full">Angular specific rendering and spacing</span>
+            <section className="k-colspan-all k-col-span-full">
                 <div className="k-widget k-toolbar">
                     <div style={toolbarStyle}>
                         <Button>Button</Button>

package/src/toolbar/tests/toolbar-popup-legacy.tsx

@@ -99,7 +99,7 @@ root.render(
                 </div>
             </section>
 
-            <span className="k-colspan-all">rtl</span>
+            <span className="k-colspan-all k-col-span-full">rtl</span>
             <section className="k-rtl" dir="rtl">
                 <div className="k-animation-container k-overflow-wrapper">
                     <ul className="k-reset k-popup k-group k-list-container k-overflow-container">

package/src/toolbar/tests/toolbar-popup.tsx

@@ -85,7 +85,7 @@ root.render(
                 </div>
             </section>
 
-            <span className="k-colspan-all">rtl</span>
+            <span className="k-colspan-all k-col-span-full">rtl</span>
             <section className="k-rtl" dir="rtl">
                 <div className="k-animation-container">
                     <div className="k-popup k-menu-popup">

package/src/toolbar/tests/toolbar.tsx

@@ -14,8 +14,8 @@ root.render(
     <>
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
-            <span className="k-colspan-all">Toolbar</span>
-            <section className="k-colspan-all">
+            <span className="k-colspan-all k-col-span-full">Toolbar</span>
+            <section className="k-colspan-all k-col-span-full">
                 <div className="k-widget k-toolbar k-toolbar-resizable">
                     <Button icon="more-vertical" className="k-overflow-anchor" fillMode="flat" rounded={null}></Button>
                     <Button icon="bold"></Button>
@@ -38,8 +38,8 @@ root.render(
                 </div>
             </section>
 
-            <span className="k-colspan-all">RTL</span>
-            <section className="k-colspan-all" dir="rtl">
+            <span className="k-colspan-all k-col-span-full">RTL</span>
+            <section className="k-colspan-all k-col-span-full" dir="rtl">
                 <div className="k-widget k-toolbar k-toolbar-resizable">
                     <Button icon="more-vertical" className="k-overflow-anchor" fillMode="flat" rounded={null}></Button>
                     <Button icon="bold"></Button>
@@ -63,8 +63,8 @@ root.render(
             </section>
 
 
-            <span className="k-colspan-all">Button states</span>
-            <section className="k-colspan-all">
+            <span className="k-colspan-all k-col-span-full">Button states</span>
+            <section className="k-colspan-all k-col-span-full">
                 <div className="k-widget k-toolbar k-toolbar-resizable">
                     <Button icon="more-vertical" className="k-overflow-anchor" fillMode="flat" rounded={null} hover></Button>
                     <Button>Normal</Button>
@@ -82,7 +82,7 @@ root.render(
                     <Button icon="bold" disabled></Button>
                 </div>
             </section>
-            <section className="k-colspan-all">
+            <section className="k-colspan-all k-col-span-full">
                 <div className="k-widget k-toolbar k-toolbar-resizable">
                     <Button icon="more-vertical" className="k-overflow-anchor" fillMode="flat" rounded={null} focus></Button>
                     <Button icon="align-left" className="k-toggle-button">Normal</Button>
@@ -93,7 +93,7 @@ root.render(
                     <Button icon="align-left" className="k-toggle-button" disabled>Disabled</Button>
                 </div>
             </section>
-            <section className="k-colspan-all">
+            <section className="k-colspan-all k-col-span-full">
                 <div className="k-widget k-toolbar k-toolbar-resizable">
                     <Button icon="more-vertical" className="k-overflow-anchor" fillMode="flat" rounded={null} active></Button>
                     <Button themeColor="primary" icon="align-left">Normal</Button>
@@ -105,8 +105,8 @@ root.render(
                 </div>
             </section>
 
-            <span className="k-colspan-all">Disabled focus state of buttons</span>
-            <section className="k-colspan-all">
+            <span className="k-colspan-all k-col-span-full">Disabled focus state of buttons</span>
+            <section className="k-colspan-all k-col-span-full">
                 <div className="k-widget k-toolbar k-toolbar-resizable">
                     <Button icon="more-vertical" className="k-overflow-anchor" fillMode="flat" rounded={null} disabled focus></Button>
                     <Button disabled focus>Button</Button>

package/src/tooltip/tests/tooltip-states.tsx

@@ -23,7 +23,7 @@ root.render(
         <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-4">
 
-            <span className="k-colspan-all">Tooltip states</span>
+            <span className="k-colspan-all k-col-span-full">Tooltip states</span>
             <section>
                 <div className="k-animation-container">
                     <div className="k-tooltip k-tooltip-primary">