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

package/src/notification/tests/notification-jquery.tsx

@@ -26,7 +26,7 @@ root.render(
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-4">
 
-            <span className="k-colspan-all">LTR</span>
+            <span className="k-colspan-all k-col-span-full">LTR</span>
 
             <div>
                 <div className="k-animation-container">
@@ -142,7 +142,7 @@ root.render(
                 </div>
             </div>
 
-            <span className="k-colspan-all">RTL</span>
+            <span className="k-colspan-all k-col-span-full">RTL</span>
             <div dir="rtl">
                 <div className="k-animation-container">
                     <div className="k-widget k-popup k-notification">

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

@@ -23,7 +23,7 @@ root.render(
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-4">
 
-            <span className="k-colspan-all">LTR</span>
+            <span className="k-colspan-all k-col-span-full">LTR</span>
 
             <section>
                 <div className="k-widget k-panelbar">
@@ -188,7 +188,7 @@ root.render(
                 </div>
             </section>
 
-            <span className="k-colspan-all">RTL</span>
+            <span className="k-colspan-all k-col-span-full">RTL</span>
 
             <section>
                 <div className="k-widget k-panelbar" dir="rtl">

package/src/panelbar/tests/panelbar-jquery.tsx

@@ -23,7 +23,7 @@ root.render(
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-4">
 
-            <span className="k-colspan-all">LTR</span>
+            <span className="k-colspan-all k-col-span-full">LTR</span>
 
             <section>
                 <ul className="k-widget k-reset k-header k-panelbar">
@@ -174,7 +174,7 @@ root.render(
                 </ul>
             </section>
 
-            <span className="k-colspan-all">RTL</span>
+            <span className="k-colspan-all k-col-span-full">RTL</span>
 
             <section className="k-rtl">
                 <ul className="k-widget k-reset k-header k-panelbar">

package/src/panelbar/tests/panelbar-react.tsx

@@ -23,7 +23,7 @@ root.render(
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-4">
 
-            <span className="k-colspan-all">LTR</span>
+            <span className="k-colspan-all k-col-span-full">LTR</span>
 
             <section>
                 <div className="k-widget k-panelbar">
@@ -190,7 +190,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">
                 <div className="k-widget k-panelbar">

package/src/panelbar/tests/panelbar-universal.tsx

@@ -23,7 +23,7 @@ root.render(
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-4">
 
-            <span className="k-colspan-all">LTR</span>
+            <span className="k-colspan-all k-col-span-full">LTR</span>
 
             <section>
                 <ul className="k-panelbar">
@@ -235,7 +235,7 @@ root.render(
                 </ul>
             </section>
 
-            <span className="k-colspan-all">RTL</span>
+            <span className="k-colspan-all k-col-span-full">RTL</span>
 
             <section className="k-rtl">
                 <ul className="k-panelbar">

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

@@ -22,7 +22,7 @@ root.render(
         <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-3">
 
-            <span className="k-colspan-all">Angular scrollview</span>
+            <span className="k-colspan-all k-col-span-full">Angular scrollview</span>
 
             <span>Light mode</span>
             <span>Normal</span>

package/src/scrollview/tests/scrollview-blazor.tsx

@@ -22,7 +22,7 @@ root.render(
         <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-3">
 
-            <span className="k-colspan-all">Blazor scrollview</span>
+            <span className="k-colspan-all k-col-span-full">Blazor scrollview</span>
 
             <span>Light mode</span>
             <span>Normal</span>

package/src/scrollview/tests/scrollview.tsx

@@ -22,7 +22,7 @@ root.render(
         <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-3">
 
-            <span className="k-colspan-all">jQuery scrollview</span>
+            <span className="k-colspan-all k-col-span-full">jQuery scrollview</span>
 
             <span>Light mode</span>
             <span>Normal</span>

package/src/signature/tests/signature-flat.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-flat 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-flat 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-flat 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-flat 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-flat 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-flat 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-flat 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-flat 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-flat 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-flat 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-flat 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-flat 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-flat 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>
+);