@progress/kendo-themes-html 7.0.1-dev.1 → 7.0.2-dev.0

package/dist/esm/toolbar/tests/toolbar-sizes.js

@@ -7730,42 +7730,54 @@ ToolbarPopup.options = options47;
 ToolbarPopup.className = TOOLBARPOPUP_CLASSNAME;
 ToolbarPopup.defaultProps = defaultProps44;
 
-// src/toolbar/templates/toolbar-normal.tsx
+// src/split-button/templates/icon-split-button.tsx
 import { jsx as jsx113 } from "react/jsx-runtime";
 
-// src/toolbar/templates/toolbar-resizable.tsx
+// src/split-button/templates/icon-text-split-button.tsx
 import { jsx as jsx114 } from "react/jsx-runtime";
-var ToolbarResizable = ({ children, ...other }) => /* @__PURE__ */ jsx114(toolbar_spec_default, { ...other, resizable: true, children });
 
-// src/toolbar/templates/toolbar-angular-normal.tsx
+// src/split-button/templates/text-split-button.tsx
 import { jsx as jsx115 } from "react/jsx-runtime";
 
+// src/split-button/templates/split-button-popup.tsx
+import { jsx as jsx116, jsxs as jsxs48 } from "react/jsx-runtime";
+
+// src/toolbar/templates/toolbar-normal.tsx
+import { Fragment as Fragment29, jsx as jsx117, jsxs as jsxs49 } from "react/jsx-runtime";
+
+// src/toolbar/templates/toolbar-resizable.tsx
+import { jsx as jsx118 } from "react/jsx-runtime";
+var ToolbarResizable = ({ children, ...other }) => /* @__PURE__ */ jsx118(toolbar_spec_default, { ...other, resizable: true, children });
+
+// src/toolbar/templates/toolbar-angular-normal.tsx
+import { jsx as jsx119 } from "react/jsx-runtime";
+
 // src/toolbar/templates/toolbar-angular-resizable.tsx
-import { jsx as jsx116 } from "react/jsx-runtime";
+import { jsx as jsx120 } from "react/jsx-runtime";
 
 // src/toolbar/tests/toolbar-sizes.tsx
-import { Fragment as Fragment29, jsx as jsx117, jsxs as jsxs48 } from "react/jsx-runtime";
-var toolbar_sizes_default = () => /* @__PURE__ */ jsx117(Fragment29, { children: /* @__PURE__ */ jsx117("div", { id: "test-area", className: "k-d-grid", children: Toolbar.options.size.map((size) => /* @__PURE__ */ jsxs48(Fragment29, { children: [
-  /* @__PURE__ */ jsx117("span", { className: "k-colspan-all k-col-span-full", children: size }),
-  /* @__PURE__ */ jsx117("section", { className: "k-colspan-all k-col-span-full", children: /* @__PURE__ */ jsxs48(ToolbarResizable, { size, children: [
-    /* @__PURE__ */ jsx117(Button, { size, icon: "bold" }),
-    /* @__PURE__ */ jsx117(Button, { size, children: "Button" }),
-    /* @__PURE__ */ jsx117(Button, { size, className: "k-toggle-button", children: "Toggle" }),
-    /* @__PURE__ */ jsx117(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsxs48(ButtonGroup, { children: [
-      /* @__PURE__ */ jsx117(Button, { size, icon: "align-left", children: "Left" }),
-      /* @__PURE__ */ jsx117(Button, { size, icon: "align-center", children: "Center" }),
-      /* @__PURE__ */ jsx117(Button, { size, icon: "align-right", children: "Right" })
+import { Fragment as Fragment30, jsx as jsx121, jsxs as jsxs50 } from "react/jsx-runtime";
+var toolbar_sizes_default = () => /* @__PURE__ */ jsx121(Fragment30, { children: /* @__PURE__ */ jsx121("div", { id: "test-area", className: "k-d-grid", children: Toolbar.options.size.map((size) => /* @__PURE__ */ jsxs50(Fragment30, { children: [
+  /* @__PURE__ */ jsx121("span", { className: "k-colspan-all k-col-span-full", children: size }),
+  /* @__PURE__ */ jsx121("section", { className: "k-colspan-all k-col-span-full", children: /* @__PURE__ */ jsxs50(ToolbarResizable, { size, children: [
+    /* @__PURE__ */ jsx121(Button, { size, icon: "bold" }),
+    /* @__PURE__ */ jsx121(Button, { size, children: "Button" }),
+    /* @__PURE__ */ jsx121(Button, { size, className: "k-toggle-button", children: "Toggle" }),
+    /* @__PURE__ */ jsx121(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsxs50(ButtonGroup, { children: [
+      /* @__PURE__ */ jsx121(Button, { size, icon: "align-left", children: "Left" }),
+      /* @__PURE__ */ jsx121(Button, { size, icon: "align-center", children: "Center" }),
+      /* @__PURE__ */ jsx121(Button, { size, icon: "align-right", children: "Right" })
     ] }),
-    /* @__PURE__ */ jsx117(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsx117(Button, { size, themeColor: "primary", children: "Primary" }),
-    /* @__PURE__ */ jsx117(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsxs48(ToolbarItem, { children: [
-      /* @__PURE__ */ jsx117("label", { children: "Label:" }),
-      /* @__PURE__ */ jsx117(ColorPicker, { size })
+    /* @__PURE__ */ jsx121(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsx121(Button, { size, themeColor: "primary", children: "Primary" }),
+    /* @__PURE__ */ jsx121(ToolbarSeparator, {}),
+    /* @__PURE__ */ jsxs50(ToolbarItem, { children: [
+      /* @__PURE__ */ jsx121("label", { children: "Label:" }),
+      /* @__PURE__ */ jsx121(ColorPicker, { size })
     ] }),
-    /* @__PURE__ */ jsx117(Switch, { size, checked: true }),
-    /* @__PURE__ */ jsx117(Button, { size, icon: "more-vertical", className: "k-toolbar-overflow-button", fillMode: "flat", rounded: null })
+    /* @__PURE__ */ jsx121(Switch, { size, checked: true }),
+    /* @__PURE__ */ jsx121(Button, { size, icon: "more-vertical", className: "k-toolbar-overflow-button", fillMode: "flat", rounded: null })
   ] }) })
 ] })) }) });
 export {

package/dist/esm/toolbar/tests/toolbar.js

@@ -7743,8 +7743,25 @@ ToolbarPopup.className = TOOLBARPOPUP_CLASSNAME;
 ToolbarPopup.defaultProps = defaultProps44;
 
 // src/toolbar/templates/toolbar-normal.tsx
-import { jsx as jsx117 } from "react/jsx-runtime";
-var ToolbarNormal = ({ children, ...other }) => /* @__PURE__ */ jsx117(toolbar_spec_default, { ...other, children });
+import { Fragment as Fragment29, jsx as jsx117, jsxs as jsxs49 } from "react/jsx-runtime";
+var ToolbarNormal = (props) => /* @__PURE__ */ jsx117(
+  toolbar_spec_default,
+  {
+    children: [
+      /* @__PURE__ */ jsxs49(Fragment29, { children: [
+        /* @__PURE__ */ jsx117(Button, { children: "Button" }),
+        /* @__PURE__ */ jsx117(MenuButton, { text: "Menu button" }),
+        /* @__PURE__ */ jsx117(SplitButton, { children: "Split button" }),
+        /* @__PURE__ */ jsxs49(ButtonGroup, { children: [
+          /* @__PURE__ */ jsx117(Button, { icon: "align-left", children: "Left" }),
+          /* @__PURE__ */ jsx117(Button, { icon: "align-center", children: "Center" }),
+          /* @__PURE__ */ jsx117(Button, { icon: "align-right", children: "Right" })
+        ] })
+      ] })
+    ],
+    ...props
+  }
+);
 
 // src/toolbar/templates/toolbar-resizable.tsx
 import { jsx as jsx118 } from "react/jsx-runtime";
@@ -7757,15 +7774,15 @@ import { jsx as jsx119 } from "react/jsx-runtime";
 import { jsx as jsx120 } from "react/jsx-runtime";
 
 // src/toolbar/tests/toolbar.tsx
-import { Fragment as Fragment29, jsx as jsx121, jsxs as jsxs49 } from "react/jsx-runtime";
-var toolbar_default = () => /* @__PURE__ */ jsx121(Fragment29, { children: /* @__PURE__ */ jsxs49("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
+import { Fragment as Fragment30, jsx as jsx121, jsxs as jsxs50 } from "react/jsx-runtime";
+var toolbar_default = () => /* @__PURE__ */ jsx121(Fragment30, { children: /* @__PURE__ */ jsxs50("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
   /* @__PURE__ */ jsx121("span", { className: "k-colspan-all k-col-span-full", children: "Toolbar" }),
-  /* @__PURE__ */ jsx121("section", { className: "k-colspan-all k-col-span-full", children: /* @__PURE__ */ jsxs49(ToolbarResizable, { children: [
+  /* @__PURE__ */ jsx121("section", { className: "k-colspan-all k-col-span-full", children: /* @__PURE__ */ jsxs50(ToolbarResizable, { children: [
     /* @__PURE__ */ jsx121(Button, { icon: "bold" }),
     /* @__PURE__ */ jsx121(Button, { children: "Button" }),
     /* @__PURE__ */ jsx121(Button, { className: "k-toggle-button", children: "Toggle" }),
     /* @__PURE__ */ jsx121(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsxs49(ButtonGroup, { children: [
+    /* @__PURE__ */ jsxs50(ButtonGroup, { children: [
       /* @__PURE__ */ jsx121(Button, { icon: "align-left", children: "Left" }),
       /* @__PURE__ */ jsx121(Button, { icon: "align-center", children: "Center" }),
       /* @__PURE__ */ jsx121(Button, { icon: "align-right", children: "Right" })
@@ -7773,7 +7790,7 @@ var toolbar_default = () => /* @__PURE__ */ jsx121(Fragment29, { children: /* @_
     /* @__PURE__ */ jsx121(ToolbarSeparator, {}),
     /* @__PURE__ */ jsx121(Button, { themeColor: "primary", children: "Primary" }),
     /* @__PURE__ */ jsx121(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsxs49(ToolbarItem, { children: [
+    /* @__PURE__ */ jsxs50(ToolbarItem, { children: [
       /* @__PURE__ */ jsx121("label", { children: "Label:" }),
       /* @__PURE__ */ jsx121(ColorPicker, {})
     ] }),
@@ -7781,12 +7798,12 @@ var toolbar_default = () => /* @__PURE__ */ jsx121(Fragment29, { children: /* @_
     /* @__PURE__ */ jsx121(Button, { icon: "more-vertical", className: "k-toolbar-overflow-button", fillMode: "flat", rounded: null })
   ] }) }),
   /* @__PURE__ */ jsx121("span", { className: "k-colspan-all k-col-span-full", children: "RTL" }),
-  /* @__PURE__ */ jsx121("section", { className: "k-colspan-all k-col-span-full", dir: "rtl", children: /* @__PURE__ */ jsxs49(ToolbarResizable, { children: [
+  /* @__PURE__ */ jsx121("section", { className: "k-colspan-all k-col-span-full", dir: "rtl", children: /* @__PURE__ */ jsxs50(ToolbarResizable, { children: [
     /* @__PURE__ */ jsx121(Button, { icon: "bold" }),
     /* @__PURE__ */ jsx121(Button, { children: "Button" }),
     /* @__PURE__ */ jsx121(Button, { className: "k-toggle-button", children: "Toggle" }),
     /* @__PURE__ */ jsx121(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsxs49(ButtonGroup, { children: [
+    /* @__PURE__ */ jsxs50(ButtonGroup, { children: [
       /* @__PURE__ */ jsx121(Button, { icon: "align-left", children: "Left" }),
       /* @__PURE__ */ jsx121(Button, { icon: "align-center", children: "Center" }),
       /* @__PURE__ */ jsx121(Button, { icon: "align-right", children: "Right" })
@@ -7794,7 +7811,7 @@ var toolbar_default = () => /* @__PURE__ */ jsx121(Fragment29, { children: /* @_
     /* @__PURE__ */ jsx121(ToolbarSeparator, {}),
     /* @__PURE__ */ jsx121(Button, { themeColor: "primary", children: "Primary" }),
     /* @__PURE__ */ jsx121(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsxs49(ToolbarItem, { children: [
+    /* @__PURE__ */ jsxs50(ToolbarItem, { children: [
       /* @__PURE__ */ jsx121("label", { children: "Label:" }),
       /* @__PURE__ */ jsx121(ColorPicker, {})
     ] }),
@@ -7802,7 +7819,7 @@ var toolbar_default = () => /* @__PURE__ */ jsx121(Fragment29, { children: /* @_
     /* @__PURE__ */ jsx121(Button, { icon: "more-vertical", className: "k-toolbar-overflow-button", fillMode: "flat", rounded: null })
   ] }) }),
   /* @__PURE__ */ jsx121("span", { className: "k-colspan-all k-col-span-full", children: "Button states" }),
-  /* @__PURE__ */ jsx121("section", { className: "k-colspan-all k-col-span-full", children: /* @__PURE__ */ jsxs49(ToolbarResizable, { children: [
+  /* @__PURE__ */ jsx121("section", { className: "k-colspan-all k-col-span-full", children: /* @__PURE__ */ jsxs50(ToolbarResizable, { children: [
     /* @__PURE__ */ jsx121(Button, { children: "Normal" }),
     /* @__PURE__ */ jsx121(Button, { hover: true, children: "Hover" }),
     /* @__PURE__ */ jsx121(Button, { focus: true, children: "Focus" }),
@@ -7818,7 +7835,7 @@ var toolbar_default = () => /* @__PURE__ */ jsx121(Fragment29, { children: /* @_
     /* @__PURE__ */ jsx121(Button, { icon: "bold", disabled: true }),
     /* @__PURE__ */ jsx121(Button, { icon: "more-vertical", className: "k-toolbar-overflow-button", fillMode: "flat", rounded: null, hover: true })
   ] }) }),
-  /* @__PURE__ */ jsx121("section", { className: "k-colspan-all k-col-span-full", children: /* @__PURE__ */ jsxs49(ToolbarResizable, { children: [
+  /* @__PURE__ */ jsx121("section", { className: "k-colspan-all k-col-span-full", children: /* @__PURE__ */ jsxs50(ToolbarResizable, { children: [
     /* @__PURE__ */ jsx121(Button, { icon: "align-left", className: "k-toggle-button", children: "Normal" }),
     /* @__PURE__ */ jsx121(Button, { icon: "align-left", className: "k-toggle-button", hover: true, children: "Hover" }),
     /* @__PURE__ */ jsx121(Button, { icon: "align-left", className: "k-toggle-button", focus: true, children: "Focus" }),
@@ -7827,7 +7844,7 @@ var toolbar_default = () => /* @__PURE__ */ jsx121(Fragment29, { children: /* @_
     /* @__PURE__ */ jsx121(Button, { icon: "align-left", className: "k-toggle-button", disabled: true, children: "Disabled" }),
     /* @__PURE__ */ jsx121(Button, { icon: "more-vertical", className: "k-toolbar-overflow-button", fillMode: "flat", rounded: null, focus: true })
   ] }) }),
-  /* @__PURE__ */ jsx121("section", { className: "k-colspan-all k-col-span-full", children: /* @__PURE__ */ jsxs49(ToolbarResizable, { children: [
+  /* @__PURE__ */ jsx121("section", { className: "k-colspan-all k-col-span-full", children: /* @__PURE__ */ jsxs50(ToolbarResizable, { children: [
     /* @__PURE__ */ jsx121(Button, { themeColor: "primary", icon: "align-left", children: "Normal" }),
     /* @__PURE__ */ jsx121(Button, { themeColor: "primary", icon: "align-left", hover: true, children: "Hover" }),
     /* @__PURE__ */ jsx121(Button, { themeColor: "primary", icon: "align-left", focus: true, children: "Focus" }),
@@ -7837,11 +7854,11 @@ var toolbar_default = () => /* @__PURE__ */ jsx121(Fragment29, { children: /* @_
     /* @__PURE__ */ jsx121(Button, { icon: "more-vertical", className: "k-toolbar-overflow-button", fillMode: "flat", rounded: null, active: true })
   ] }) }),
   /* @__PURE__ */ jsx121("span", { className: "k-colspan-all k-col-span-full", children: "Disabled focus state of buttons" }),
-  /* @__PURE__ */ jsx121("section", { className: "k-colspan-all k-col-span-full", children: /* @__PURE__ */ jsxs49(ToolbarResizable, { children: [
+  /* @__PURE__ */ jsx121("section", { className: "k-colspan-all k-col-span-full", children: /* @__PURE__ */ jsxs50(ToolbarResizable, { children: [
     /* @__PURE__ */ jsx121(Button, { disabled: true, focus: true, children: "Button" }),
     /* @__PURE__ */ jsx121(MenuButton, { disabled: true, focus: true, text: "Menu button" }),
     /* @__PURE__ */ jsx121(SplitButton, { disabled: true, focus: true, children: "Split button" }),
-    /* @__PURE__ */ jsxs49(ButtonGroup, { children: [
+    /* @__PURE__ */ jsxs50(ButtonGroup, { children: [
       /* @__PURE__ */ jsx121(Button, { icon: "align-left", disabled: true, focus: true, children: "Button 1" }),
       /* @__PURE__ */ jsx121(Button, { icon: "align-center", disabled: true, children: "Button 2" })
     ] }),
@@ -7849,28 +7866,8 @@ var toolbar_default = () => /* @__PURE__ */ jsx121(Fragment29, { children: /* @_
   ] }) }),
   /* @__PURE__ */ jsx121("span", { children: "wrapped" }),
   /* @__PURE__ */ jsx121("span", { children: "wrapped rtl" }),
-  /* @__PURE__ */ jsx121("section", { children: /* @__PURE__ */ jsxs49(ToolbarNormal, { children: [
-    /* @__PURE__ */ jsx121(Button, { children: "Button" }),
-    /* @__PURE__ */ jsx121(MenuButton, { text: "Menu button" }),
-    /* @__PURE__ */ jsx121(SplitButton, { children: "Split button" }),
-    /* @__PURE__ */ jsxs49(ButtonGroup, { children: [
-      /* @__PURE__ */ jsx121(Button, { icon: "align-left", children: "Left" }),
-      /* @__PURE__ */ jsx121(Button, { icon: "align-center", children: "Center" }),
-      /* @__PURE__ */ jsx121(Button, { icon: "align-right", children: "Right" }),
-      /* @__PURE__ */ jsx121(Button, { icon: "align-justify", children: "Justify" })
-    ] })
-  ] }) }),
-  /* @__PURE__ */ jsx121("section", { dir: "rtl", children: /* @__PURE__ */ jsxs49(ToolbarNormal, { children: [
-    /* @__PURE__ */ jsx121(Button, { children: "Button" }),
-    /* @__PURE__ */ jsx121(SplitButton, { children: "Split button" }),
-    /* @__PURE__ */ jsx121(MenuButton, { text: "Menu button" }),
-    /* @__PURE__ */ jsxs49(ButtonGroup, { children: [
-      /* @__PURE__ */ jsx121(Button, { icon: "align-left", children: "Left" }),
-      /* @__PURE__ */ jsx121(Button, { icon: "align-center", children: "Center" }),
-      /* @__PURE__ */ jsx121(Button, { icon: "align-right", children: "Right" }),
-      /* @__PURE__ */ jsx121(Button, { icon: "align-justify", children: "Justify" })
-    ] })
-  ] }) })
+  /* @__PURE__ */ jsx121("section", { children: /* @__PURE__ */ jsx121(ToolbarNormal, {}) }),
+  /* @__PURE__ */ jsx121("section", { dir: "rtl", children: /* @__PURE__ */ jsx121(ToolbarNormal, {}) })
 ] }) });
 export {
   toolbar_default as default

package/dist/types/appbar/index.d.ts

@@ -1,2 +1,3 @@
 export * from './appbar.spec';
 export * from './appbar-section';
+export * from './templates/appbar-normal';

package/dist/types/appbar/templates/appbar-normal.d.ts

@@ -0,0 +1 @@
+export declare const AppbarNormal: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/bottom-nav/bottom-nav.spec.d.ts

@@ -1,4 +1,5 @@
 export declare const BOTTOM_NAV_CLASSNAME = "k-bottom-nav";
+declare const states: "disabled"[];
 declare const options: {
     fillMode: ("flat" | "solid")[];
     themeColor: ("error" | "inverse" | "success" | "dark" | "light" | "primary" | "secondary" | "tertiary" | "info" | "warning")[];
@@ -12,16 +13,19 @@ export type KendoBottomNavProps = KendoBottomNavOptions & {
     border?: boolean;
     dir?: 'ltr' | 'rtl';
 };
+export type KendoBottomNavState = {
+    [K in (typeof states)[number]]?: boolean;
+};
 export declare const BottomNav: {
-    (props: KendoBottomNavProps & React.HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
-    states: any[];
+    (props: KendoBottomNavProps & KendoBottomNavState & React.HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+    states: "disabled"[];
     options: {
         fillMode: ("flat" | "solid")[];
         themeColor: ("error" | "inverse" | "success" | "dark" | "light" | "primary" | "secondary" | "tertiary" | "info" | "warning")[];
     };
     className: string;
     defaultProps: {
-        fillMode: "solid";
+        fillMode: "flat";
         themeColor: "primary";
         flow: string;
         border: boolean;

package/dist/types/bottom-nav/index.d.ts

@@ -1,2 +1,5 @@
 export * from './bottom-nav.spec';
 export * from './bottom-nav-item';
+export * from './templates/bottom-nav-normal';
+export * from './templates/bottom-nav-icons';
+export * from './templates/bottom-nav-links';

package/dist/types/bottom-nav/templates/bottom-nav-icons.d.ts

@@ -0,0 +1 @@
+export declare const BottomNavIcons: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/bottom-nav/templates/bottom-nav-links.d.ts

@@ -0,0 +1 @@
+export declare const BottomNavLinks: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/bottom-nav/templates/bottom-nav-normal.d.ts

@@ -0,0 +1 @@
+export declare const BottomNavNormal: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/bottom-nav/tests/bottom-nav-flat.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/types/bottom-nav/tests/bottom-nav-solid.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/types/dialog/templates/dialog-normal.d.ts

@@ -1 +1 @@
-export declare const DialogNormal: ({ children, ...other }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogNormal: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/expansion-panel/expansion-panel.spec.d.ts

@@ -17,4 +17,4 @@ export declare const ExpansionPanel: {
     className: string;
     defaultProps: {};
 };
-export {};
+export default ExpansionPanel;

package/dist/types/expansion-panel/index.d.ts

@@ -1 +1,3 @@
 export * from './expansion-panel.spec';
+export * from './templates/expansion-panel-normal';
+export * from './templates/expansion-panel-expanded';

package/dist/types/expansion-panel/templates/expansion-panel-expanded.d.ts

@@ -0,0 +1 @@
+export declare const ExpansionPanelExpanded: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/expansion-panel/templates/expansion-panel-normal.d.ts

@@ -0,0 +1 @@
+export declare const ExpansionPanelNormal: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/filter/index.d.ts

@@ -3,3 +3,4 @@ export * from './filter-toolbar';
 export * from './filter-lines';
 export * from './filter-preview';
 export * from './filter-item';
+export * from './templates/filter-normal';

package/dist/types/filter/templates/filter-normal.d.ts

@@ -0,0 +1 @@
+export declare const FilterNormal: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/floating-label/templates/floating-label-normal.d.ts

@@ -1,4 +1 @@
-export declare const FloatingLabelNormal: ({ children, ...other }: {
-    [x: string]: any;
-    children: any;
-}) => import("react/jsx-runtime").JSX.Element;
+export declare const FloatingLabelNormal: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/index.d.ts

@@ -62,7 +62,10 @@ export * from './pager/index';
 export * from './treeview/index';
 export * from './card/index';
 export * from './expansion-panel/index';
+export * from './tilelayout/index';
 export * from './listview/index';
+export * from './filter/index';
+export * from './scrollview/index';
 export * from './editor/index';
 export * from './table/index';
 export * from './utils/index';

package/dist/types/popover/index.d.ts

@@ -1 +1,2 @@
 export * from './popover.spec';
+export * from './templates/popover-normal';

package/dist/types/popover/templates/popover-normal.d.ts

@@ -0,0 +1,4 @@
+export declare const PopoverNormal: ({ children, ...other }: {
+    [x: string]: any;
+    children: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/types/scrollview/index.d.ts

@@ -1 +1,2 @@
 export * from './scrollview-spec';
+export * from './templates/scrollview-normal';

package/dist/types/scrollview/templates/scrollview-normal.d.ts

@@ -0,0 +1 @@
+export declare const ScrollViewNormal: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/scrollview/tests/scrollview-rtl.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/types/tilelayout/index.d.ts

@@ -1,3 +1,4 @@
 export * from './tilelayout.spec';
 export * from './tilelayout-item.spec';
 export * from './tilelayout-item-hint.spec';
+export * from './templates/tilelayout-normal';

package/dist/types/tilelayout/templates/tilelayout-normal.d.ts

@@ -0,0 +1 @@
+export declare const TileLayoutNormal: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/toolbar/templates/toolbar-normal.d.ts

@@ -1,4 +1 @@
-export declare const ToolbarNormal: ({ children, ...other }: {
-    [x: string]: any;
-    children: any;
-}) => import("react/jsx-runtime").JSX.Element;
+export declare const ToolbarNormal: (props: any) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "7.0.1-dev.1",
+  "version": "7.0.2-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -51,5 +51,5 @@
   "devDependencies": {
     "@types/react": "^18.0.2"
   },
-  "gitHead": "aeaff3f76d1244db6befcef518e6e59b1906cff2"
+  "gitHead": "1364f9c5bda2e0f5abdf6bd3705d4b99f86a89f3"
 }

package/src/appbar/index.ts

@@ -1,2 +1,3 @@
 export * from './appbar.spec';
 export * from './appbar-section';
+export * from './templates/appbar-normal';

package/src/appbar/templates/appbar-normal.tsx

@@ -0,0 +1,31 @@
+import { Appbar, AppbarSection } from '../../appbar';
+import { Icon } from '../../icon';
+
+export const AppbarNormal = (props) => (
+    <Appbar children={[
+        <>
+            <AppbarSection>
+                <Icon icon="menu" />
+            </AppbarSection>
+            <span className="k-spacer k-spacer-sized"></span>
+            <AppbarSection>
+                <h1 className="title">Page Title</h1>
+            </AppbarSection>
+            <AppbarSection>
+                <ul>
+                    <li>Menu Item</li>
+                    <li>Menu Item</li>
+                    <li>Menu Item</li>
+                </ul>
+            </AppbarSection>
+            <span className="k-spacer"></span>
+            <AppbarSection>
+                <Icon icon="bell" />
+                <span className="k-appbar-separator"></span>
+                <Icon icon="user" />
+            </AppbarSection>
+        </>
+    ]}
+    {...props} >
+    </Appbar>
+);

package/src/appbar/tests/appbar-rtl.tsx

@@ -0,0 +1,110 @@
+import { Appbar, AppbarNormal, AppbarSection } from '../../appbar';
+import { Icon } from '../../icon';
+import { Textbox } from '../../textbox';
+
+
+const styles = `
+    #test-area {
+        background-color: #f3f5f7;
+    }
+    .title {
+        font-size: 19px;
+        margin: 0;
+    }
+    .k-icon {
+        margin-inline: 7px;
+        text-align: center;
+    }
+    ul {
+        font-size: 12px;
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+    }
+
+    li {
+        margin: 0 12px;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+            <span>RTL Appbar - sticky and inherit color</span>
+            <section>
+                <div style={{ background: "#1976d2", color: "#fff" }}>
+                    <AppbarNormal positionMode={'sticky'} dir="rtl">
+                        <AppbarSection>
+                            <Icon icon="menu" />
+                        </AppbarSection>
+                        <span className="k-spacer k-spacer-sized" style={{ width: "8px" }}></span>
+                        <AppbarSection>
+                            <h1 className="title">Page Title</h1>
+                        </AppbarSection>
+                        <span className="k-spacer k-spacer-sized" style={{ width: "32px" }}></span>
+                        <AppbarSection>
+                            <ul>
+                                <li>Menu Item</li>
+                                <li>Menu Item</li>
+                                <li>Menu Item</li>
+                            </ul>
+                        </AppbarSection>
+
+                        <span className="k-spacer"></span>
+
+                        <AppbarSection>
+                            <Textbox placeholder="Search..." />
+                        </AppbarSection>
+
+                        <AppbarSection>
+                            <Icon icon="sliders" />
+                            <Icon icon="bell" />
+                            <span className="k-appbar-separator"></span>
+                            <Icon icon="user" />
+                        </AppbarSection>
+                    </AppbarNormal>
+                </div>
+            </section>
+
+            {[ ...Appbar.options.themeColor ].map((themeColor) => (
+                <>
+                    <span>RTL Appbar - {themeColor} theme color</span>
+                    <section>
+                        <AppbarNormal fillMode="solid" themeColor={themeColor} dir="rtl">
+                            <AppbarSection>
+                                <Icon icon="menu" />
+                            </AppbarSection>
+                            <span className="k-spacer k-spacer-sized" style={{ width: "8px" }}></span>
+                            <AppbarSection>
+                                <h1 className="title">Page Title</h1>
+                            </AppbarSection>
+                            <span className="k-spacer k-spacer-sized" style={{ width: "32px" }}></span>
+                            <AppbarSection>
+                                <ul>
+                                    <li>Menu Item</li>
+                                    <li>Menu Item</li>
+                                    <li>Menu Item</li>
+                                </ul>
+                            </AppbarSection>
+
+                            <span className="k-spacer"></span>
+
+                            <AppbarSection>
+                                <Textbox placeholder="Search..." />
+                            </AppbarSection>
+
+                            <AppbarSection>
+                                <Icon icon="sliders" />
+                                <Icon icon="bell" />
+                                <span className="k-appbar-separator"></span>
+                                <Icon icon="user" />
+                            </AppbarSection>
+                        </AppbarNormal>
+                    </section>
+                </>
+            ))}
+        </div>
+    </>
+);