@progress/kendo-themes-html 7.0.2-dev.4 → 7.0.2

package/dist/esm/fab/tests/fab-items.js

@@ -4464,130 +4464,68 @@ var FloatingActionButtonItem = (props) => {
     }
   );
 };
+FloatingActionButtonItem.states = states5;
+
+// src/fab/templates/text-fab.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+
+// src/fab/templates/icon-fab.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var IconFloatingActionButton = (props) => /* @__PURE__ */ jsx8(
+  FloatingActionButton,
+  {
+    icon: "plus",
+    ...props
+  }
+);
+
+// src/fab/templates/icon-text-fab.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
 
 // src/fab/tests/fab-items.tsx
-import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 var styles = `
     #test-area {
         grid-template-columns: 150px repeat(3, 1fr);
-        grid-template-rows: 30px repeat(5, 320px)
+        grid-template-rows: 30px repeat(3, 320px)
     }
     .relative-container {
         position: relative;
         border: 1px solid #ccc;
     }
 `;
+var indexMap = {
+  0: 36,
+  1: 52,
+  2: 68
+};
 var fab_items_default = () => /* @__PURE__ */ jsxs3(Fragment4, { children: [
-  /* @__PURE__ */ jsx7("style", { children: styles }),
+  /* @__PURE__ */ jsx10("style", { children: styles }),
   /* @__PURE__ */ jsxs3("div", { id: "test-area", className: "k-d-grid", children: [
-    /* @__PURE__ */ jsx7("span", {}),
-    /* @__PURE__ */ jsx7("span", { children: "Small" }),
-    /* @__PURE__ */ jsx7("span", { children: "Medium" }),
-    /* @__PURE__ */ jsx7("span", { children: "Large" }),
-    /* @__PURE__ */ jsx7("span", { children: "Downward - Left Labels" }),
-    /* @__PURE__ */ jsxs3("span", { className: "relative-container", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", size: "small", position: "top-end", style: { top: "16px", right: "16px" } }),
-      /* @__PURE__ */ jsx7("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", top: "calc(16px + 36px)", right: "calc(16px + calc(36px / 2) - calc(36px /2))" }, children: /* @__PURE__ */ jsxs3(FloatingActionButtonItems, { position: "bottom", children: [
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Normal", icon: "pencil", align: "right" }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "right", hover: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "right", focus: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "right", active: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Disabled", icon: "cancel", align: "right", disabled: true })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsxs3("span", { className: "relative-container", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", size: "medium", position: "top-end", style: { top: "16px", right: "16px" } }),
-      /* @__PURE__ */ jsx7("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", top: "calc(16px + 52px)", right: "calc(16px + calc(52px / 2) - calc(36px /2))" }, children: /* @__PURE__ */ jsxs3(FloatingActionButtonItems, { position: "bottom", children: [
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "right", hover: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "right", focus: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "right", active: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Disabled & Focus", icon: "cancel", align: "right", disabled: true, focus: true })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsxs3("span", { className: "relative-container", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", size: "large", position: "top-end", style: { top: "16px", right: "16px" } }),
-      /* @__PURE__ */ jsx7("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", top: "calc(16px + 68px)", right: "calc(16px + calc(68px / 2) - calc(36px /2))" }, children: /* @__PURE__ */ jsxs3(FloatingActionButtonItems, { position: "bottom", children: [
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "right", hover: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "right", focus: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "right", active: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Disabled", icon: "cancel", align: "right", disabled: true })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsx7("span", { children: "Downward - Right Labels" }),
-    /* @__PURE__ */ jsxs3("span", { className: "relative-container", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", size: "small", position: "top-start", style: { top: "16px", left: "16px" } }),
-      /* @__PURE__ */ jsx7("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", top: "calc(16px + 36px)", left: "calc(16px + calc(36px / 2) - calc(36px /2))" }, children: /* @__PURE__ */ jsxs3(FloatingActionButtonItems, { position: "bottom", children: [
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "left", hover: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "left", focus: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "left", active: true })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsxs3("span", { className: "relative-container", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", size: "medium", position: "top-start", style: { top: "16px", left: "16px" } }),
-      /* @__PURE__ */ jsx7("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", top: "calc(16px + 52px)", left: "calc(16px + calc(52px / 2) - calc(36px /2))" }, children: /* @__PURE__ */ jsxs3(FloatingActionButtonItems, { position: "bottom", children: [
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "left", hover: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "left", focus: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "left", active: true })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsxs3("span", { className: "relative-container", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", size: "large", position: "top-start", style: { top: "16px", left: "16px" } }),
-      /* @__PURE__ */ jsx7("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", top: "calc(16px + 68px)", left: "calc(16px + calc(68px / 2) - calc(36px /2))" }, children: /* @__PURE__ */ jsxs3(FloatingActionButtonItems, { position: "bottom", children: [
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "left", hover: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "left", focus: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "left", active: true })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsx7("span", { children: "Upward - Left Labels" }),
-    /* @__PURE__ */ jsxs3("span", { className: "relative-container", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", size: "small", position: "bottom-end", style: { bottom: "16px", right: "16px" } }),
-      /* @__PURE__ */ jsx7("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", bottom: "calc(16px + 36px)", right: "calc(16px + calc(36px / 2) - calc(36px /2))" }, children: /* @__PURE__ */ jsxs3(FloatingActionButtonItems, { position: "top", children: [
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "right", hover: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "right", focus: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "right", active: true })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsxs3("span", { className: "relative-container", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", size: "medium", position: "bottom-end", style: { bottom: "16px", right: "16px" } }),
-      /* @__PURE__ */ jsx7("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", bottom: "calc(16px + 52px)", right: "calc(16px + calc(52px / 2) - calc(36px /2))" }, children: /* @__PURE__ */ jsxs3(FloatingActionButtonItems, { position: "top", children: [
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "right", hover: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "right", focus: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "right", active: true })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsxs3("span", { className: "relative-container", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", size: "large", position: "bottom-end", style: { bottom: "16px", right: "16px" } }),
-      /* @__PURE__ */ jsx7("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", bottom: "calc(16px + 68px)", right: "calc(16px + calc(68px / 2) - calc(36px /2))" }, children: /* @__PURE__ */ jsxs3(FloatingActionButtonItems, { position: "top", children: [
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "right", hover: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "right", focus: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "right", active: true })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsx7("span", { children: "Upward - Right Labels" }),
-    /* @__PURE__ */ jsxs3("span", { className: "relative-container", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", size: "small", position: "bottom-start", style: { bottom: "16px", left: "16px" } }),
-      /* @__PURE__ */ jsx7("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", bottom: "calc(16px + 36px)", left: "calc(16px + calc(36px / 2) - calc(36px /2))" }, children: /* @__PURE__ */ jsxs3(FloatingActionButtonItems, { position: "top", children: [
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "left", hover: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "left", focus: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "left", active: true })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsxs3("span", { className: "relative-container", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", size: "medium", position: "bottom-start", style: { bottom: "16px", left: "16px" } }),
-      /* @__PURE__ */ jsx7("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", bottom: "calc(16px + 52px)", left: "calc(16px + calc(52px / 2) - calc(36px /2))" }, children: /* @__PURE__ */ jsxs3(FloatingActionButtonItems, { position: "top", children: [
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "left", hover: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "left", focus: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "left", active: true })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsxs3("span", { className: "relative-container", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", size: "large", position: "bottom-start", style: { bottom: "16px", left: "16px" } }),
-      /* @__PURE__ */ jsx7("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", bottom: "calc(16px + 68px)", left: "calc(16px + calc(68px / 2) - calc(36px /2))" }, children: /* @__PURE__ */ jsxs3(FloatingActionButtonItems, { position: "top", children: [
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "left", hover: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "left", focus: true }),
-        /* @__PURE__ */ jsx7(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "left", active: true })
-      ] }) })
-    ] })
+    /* @__PURE__ */ jsx10("span", {}),
+    /* @__PURE__ */ jsx10("span", { children: "Small" }),
+    /* @__PURE__ */ jsx10("span", { children: "Medium" }),
+    /* @__PURE__ */ jsx10("span", { children: "Large" }),
+    /* @__PURE__ */ jsx10("span", { children: "Downward - Left Labels" }),
+    FloatingActionButton.options.size.map((size, index) => /* @__PURE__ */ jsxs3("span", { className: "relative-container", children: [
+      /* @__PURE__ */ jsx10(IconFloatingActionButton, { size, position: "top-end", style: { top: "16px", right: "16px" } }),
+      /* @__PURE__ */ jsx10("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", top: `calc(16px + ${indexMap[index]}px)`, right: `calc(16px + calc(${indexMap[index]}px / 2) - calc(36px /2))` }, children: /* @__PURE__ */ jsx10(FloatingActionButtonItems, { position: "bottom", children: ["normal", ...FloatingActionButtonItem.states].map((state) => /* @__PURE__ */ jsx10(FloatingActionButtonItem, { text: state, icon: state === "disabled" ? "cancel" : "pencil", align: "right", ...{ [state]: true } })) }) })
+    ] })),
+    /* @__PURE__ */ jsx10("span", { children: "Downward - Right Labels" }),
+    FloatingActionButton.options.size.map((size, index) => /* @__PURE__ */ jsxs3("span", { className: "relative-container", children: [
+      /* @__PURE__ */ jsx10(IconFloatingActionButton, { size, position: "top-start", style: { top: "16px", left: "16px" } }),
+      /* @__PURE__ */ jsx10("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", top: `calc(16px + ${indexMap[index]}px)`, left: `calc(16px + calc(${indexMap[index]}px / 2) - calc(36px /2))` }, children: /* @__PURE__ */ jsx10(FloatingActionButtonItems, { position: "bottom", children: ["normal", ...FloatingActionButtonItem.states].map((state) => /* @__PURE__ */ jsx10(FloatingActionButtonItem, { text: state, icon: state === "disabled" ? "cancel" : "pencil", align: "left", ...{ [state]: true } })) }) })
+    ] })),
+    /* @__PURE__ */ jsx10("span", { children: "Upward - Left Labels" }),
+    FloatingActionButton.options.size.map((size, index) => /* @__PURE__ */ jsxs3("span", { className: "relative-container", children: [
+      /* @__PURE__ */ jsx10(IconFloatingActionButton, { size, position: "bottom-end", style: { bottom: "16px", right: "16px" } }),
+      /* @__PURE__ */ jsx10("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", bottom: `calc(16px + ${indexMap[index]}px)`, right: `calc(16px + calc(${indexMap[index]}px / 2) - calc(36px /2))` }, children: /* @__PURE__ */ jsx10(FloatingActionButtonItems, { position: "top", children: ["normal", ...FloatingActionButtonItem.states].map((state) => /* @__PURE__ */ jsx10(FloatingActionButtonItem, { text: state, icon: state === "disabled" ? "cancel" : "pencil", align: "right", ...{ [state]: true } })) }) })
+    ] })),
+    /* @__PURE__ */ jsx10("span", { children: "Upward - Right Labels" }),
+    FloatingActionButton.options.size.map((size, index) => /* @__PURE__ */ jsxs3("span", { className: "relative-container", children: [
+      /* @__PURE__ */ jsx10(IconFloatingActionButton, { size, position: "bottom-start", style: { bottom: "16px", left: "16px" } }),
+      /* @__PURE__ */ jsx10("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", bottom: `calc(16px + ${indexMap[index]}px)`, left: `calc(16px + calc(${indexMap[index]}px / 2) - calc(36px /2))` }, children: /* @__PURE__ */ jsx10(FloatingActionButtonItems, { position: "top", children: ["normal", ...FloatingActionButtonItem.states].map((state) => /* @__PURE__ */ jsx10(FloatingActionButtonItem, { text: state, icon: state === "disabled" ? "cancel" : "pencil", align: "left", ...{ [state]: true } })) }) })
+    ] }))
   ] })
 ] });
 export {

package/dist/esm/fab/tests/fab-position.js

@@ -4401,15 +4401,68 @@ import { jsx as jsx5 } from "react/jsx-runtime";
 
 // src/fab/fab-item.tsx
 import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var className = `k-fab-item`;
 var states5 = [
   States.hover,
   States.focus,
   States.active,
   States.disabled
 ];
+var FloatingActionButtonItem = (props) => {
+  const {
+    text,
+    icon,
+    align,
+    hover,
+    focus,
+    active,
+    disabled,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs2(
+    "li",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        className,
+        {
+          [`k-text-${align}`]: align
+        },
+        stateClassNames(className, {
+          hover,
+          focus,
+          active,
+          disabled
+        })
+      ),
+      children: [
+        /* @__PURE__ */ jsx6("span", { className: "k-fab-item-text", children: text }),
+        /* @__PURE__ */ jsx6(Icon, { className: "k-fab-item-icon", icon })
+      ]
+    }
+  );
+};
+FloatingActionButtonItem.states = states5;
+
+// src/fab/templates/text-fab.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+
+// src/fab/templates/icon-fab.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var IconFloatingActionButton = (props) => /* @__PURE__ */ jsx8(
+  FloatingActionButton,
+  {
+    icon: "plus",
+    ...props
+  }
+);
+
+// src/fab/templates/icon-text-fab.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
 
 // src/fab/tests/fab-position.tsx
-import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 var styles = `
     #test-area {
         grid-template-columns: 150px repeat(3, 1fr);
@@ -4421,24 +4474,24 @@ var styles = `
     }
 `;
 var fab_position_default = () => /* @__PURE__ */ jsxs3(Fragment4, { children: [
-  /* @__PURE__ */ jsx7("style", { children: styles }),
+  /* @__PURE__ */ jsx10("style", { children: styles }),
   /* @__PURE__ */ jsxs3("div", { id: "test-area", className: "k-d-grid", children: [
-    /* @__PURE__ */ jsx7("span", {}),
-    /* @__PURE__ */ jsx7("span", { children: "Start" }),
-    /* @__PURE__ */ jsx7("span", { children: "Center" }),
-    /* @__PURE__ */ jsx7("span", { children: "End" }),
-    /* @__PURE__ */ jsx7("span", { children: "Top" }),
-    /* @__PURE__ */ jsx7("span", { className: "relative-container", children: /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", position: "top-start", style: { top: "16px", left: "16px" } }) }),
-    /* @__PURE__ */ jsx7("span", { className: "relative-container", children: /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", position: "top-center", style: { top: "16px" } }) }),
-    /* @__PURE__ */ jsx7("span", { className: "relative-container", children: /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", position: "top-end", style: { top: "16px", right: "16px" } }) }),
-    /* @__PURE__ */ jsx7("span", { children: "Middle" }),
-    /* @__PURE__ */ jsx7("span", { className: "relative-container", children: /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", position: "middle-start", style: { left: "16px" } }) }),
-    /* @__PURE__ */ jsx7("span", { className: "relative-container", children: "NO CENTER POSITION" }),
-    /* @__PURE__ */ jsx7("span", { className: "relative-container", children: /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", position: "middle-end", style: { right: "16px" } }) }),
-    /* @__PURE__ */ jsx7("span", { children: "Bottom" }),
-    /* @__PURE__ */ jsx7("span", { className: "relative-container", children: /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", position: "bottom-start", style: { bottom: "16px", left: "16px" } }) }),
-    /* @__PURE__ */ jsx7("span", { className: "relative-container", children: /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", position: "bottom-center", style: { bottom: "16px" } }) }),
-    /* @__PURE__ */ jsx7("span", { className: "relative-container", children: /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", position: "bottom-end", style: { bottom: "16px", right: "16px" } }) })
+    /* @__PURE__ */ jsx10("span", {}),
+    /* @__PURE__ */ jsx10("span", { children: "Start" }),
+    /* @__PURE__ */ jsx10("span", { children: "Center" }),
+    /* @__PURE__ */ jsx10("span", { children: "End" }),
+    /* @__PURE__ */ jsx10("span", { children: "Top" }),
+    /* @__PURE__ */ jsx10("span", { className: "relative-container", children: /* @__PURE__ */ jsx10(IconFloatingActionButton, { position: "top-start", style: { top: "16px", left: "16px" } }) }),
+    /* @__PURE__ */ jsx10("span", { className: "relative-container", children: /* @__PURE__ */ jsx10(IconFloatingActionButton, { position: "top-center", style: { top: "16px" } }) }),
+    /* @__PURE__ */ jsx10("span", { className: "relative-container", children: /* @__PURE__ */ jsx10(IconFloatingActionButton, { position: "top-end", style: { top: "16px", right: "16px" } }) }),
+    /* @__PURE__ */ jsx10("span", { children: "Middle" }),
+    /* @__PURE__ */ jsx10("span", { className: "relative-container", children: /* @__PURE__ */ jsx10(IconFloatingActionButton, { position: "middle-start", style: { left: "16px" } }) }),
+    /* @__PURE__ */ jsx10("span", { className: "relative-container", children: "NO CENTER POSITION" }),
+    /* @__PURE__ */ jsx10("span", { className: "relative-container", children: /* @__PURE__ */ jsx10(IconFloatingActionButton, { position: "middle-end", style: { right: "16px" } }) }),
+    /* @__PURE__ */ jsx10("span", { children: "Bottom" }),
+    /* @__PURE__ */ jsx10("span", { className: "relative-container", children: /* @__PURE__ */ jsx10(IconFloatingActionButton, { position: "bottom-start", style: { bottom: "16px", left: "16px" } }) }),
+    /* @__PURE__ */ jsx10("span", { className: "relative-container", children: /* @__PURE__ */ jsx10(IconFloatingActionButton, { position: "bottom-center", style: { bottom: "16px" } }) }),
+    /* @__PURE__ */ jsx10("span", { className: "relative-container", children: /* @__PURE__ */ jsx10(IconFloatingActionButton, { position: "bottom-end", style: { bottom: "16px", right: "16px" } }) })
   ] })
 ] });
 export {

package/dist/esm/fab/tests/{fab-size.js → fab-size-rounded.js}

@@ -4401,15 +4401,83 @@ import { jsx as jsx5 } from "react/jsx-runtime";
 
 // src/fab/fab-item.tsx
 import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var className = `k-fab-item`;
 var states5 = [
   States.hover,
   States.focus,
   States.active,
   States.disabled
 ];
+var FloatingActionButtonItem = (props) => {
+  const {
+    text,
+    icon,
+    align,
+    hover,
+    focus,
+    active,
+    disabled,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs2(
+    "li",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        className,
+        {
+          [`k-text-${align}`]: align
+        },
+        stateClassNames(className, {
+          hover,
+          focus,
+          active,
+          disabled
+        })
+      ),
+      children: [
+        /* @__PURE__ */ jsx6("span", { className: "k-fab-item-text", children: text }),
+        /* @__PURE__ */ jsx6(Icon, { className: "k-fab-item-icon", icon })
+      ]
+    }
+  );
+};
+FloatingActionButtonItem.states = states5;
+
+// src/fab/templates/text-fab.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var TextFloatingActionButton = (props) => /* @__PURE__ */ jsx7(
+  FloatingActionButton,
+  {
+    text: "Create",
+    ...props
+  }
+);
+
+// src/fab/templates/icon-fab.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var IconFloatingActionButton = (props) => /* @__PURE__ */ jsx8(
+  FloatingActionButton,
+  {
+    icon: "plus",
+    ...props
+  }
+);
+
+// src/fab/templates/icon-text-fab.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var IconTextFloatingActionButton = (props) => /* @__PURE__ */ jsx9(
+  FloatingActionButton,
+  {
+    icon: "plus",
+    text: "Create",
+    ...props
+  }
+);
 
-// src/fab/tests/fab-size.tsx
-import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+// src/fab/tests/fab-size-rounded.tsx
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 var styles = `
     #test-area {
         max-width: 1200px;
@@ -4417,95 +4485,23 @@ var styles = `
         align-items: center;
     }
 `;
-var fab_size_default = () => /* @__PURE__ */ jsxs3(Fragment4, { children: [
-  /* @__PURE__ */ jsx7("style", { children: styles }),
+var fab_size_rounded_default = () => /* @__PURE__ */ jsxs3(Fragment4, { children: [
+  /* @__PURE__ */ jsx10("style", { children: styles }),
   /* @__PURE__ */ jsxs3("div", { id: "test-area", className: "k-d-grid", children: [
-    /* @__PURE__ */ jsx7("span", { children: /* @__PURE__ */ jsx7("small", { children: "rounded / size" }) }),
-    /* @__PURE__ */ jsx7("span", { children: "small" }),
-    /* @__PURE__ */ jsx7("span", { children: "medium" }),
-    /* @__PURE__ */ jsx7("span", { children: "large" }),
-    /* @__PURE__ */ jsx7("span", { children: "null" }),
-    /* @__PURE__ */ jsxs3("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { rounded: null, size: "small", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: null, size: "small", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: null, size: "small" })
-    ] }),
-    /* @__PURE__ */ jsxs3("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { rounded: null, size: "medium", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: null, size: "medium", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: null, size: "medium" })
-    ] }),
-    /* @__PURE__ */ jsxs3("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { rounded: null, size: "large", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: null, size: "large", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: null, size: "large" })
-    ] }),
-    /* @__PURE__ */ jsx7("span", { children: "small" }),
-    /* @__PURE__ */ jsxs3("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { rounded: "small", size: "small", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: "small", size: "small", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: "small", size: "small" })
-    ] }),
-    /* @__PURE__ */ jsxs3("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { rounded: "small", size: "medium", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: "small", size: "medium", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: "small", size: "medium" })
-    ] }),
-    /* @__PURE__ */ jsxs3("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { rounded: "small", size: "large", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: "small", size: "large", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: "small", size: "large" })
-    ] }),
-    /* @__PURE__ */ jsx7("span", { children: "medium" }),
-    /* @__PURE__ */ jsxs3("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { rounded: "medium", size: "small", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: "medium", size: "small", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: "medium", size: "small" })
-    ] }),
-    /* @__PURE__ */ jsxs3("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { rounded: "medium", size: "medium", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: "medium", size: "medium", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: "medium", size: "medium" })
-    ] }),
-    /* @__PURE__ */ jsxs3("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { rounded: "medium", size: "large", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: "medium", size: "large", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: "medium", size: "large" })
-    ] }),
-    /* @__PURE__ */ jsx7("span", { children: "large" }),
-    /* @__PURE__ */ jsxs3("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { rounded: "large", size: "small", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: "large", size: "small", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: "large", size: "small" })
-    ] }),
-    /* @__PURE__ */ jsxs3("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { rounded: "large", size: "medium", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: "large", size: "medium", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: "large", size: "medium" })
-    ] }),
-    /* @__PURE__ */ jsxs3("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { rounded: "large", size: "large", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: "large", size: "large", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: "large", size: "large" })
-    ] }),
-    /* @__PURE__ */ jsx7("span", { children: "full" }),
-    /* @__PURE__ */ jsxs3("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { rounded: "full", size: "small", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: "full", size: "small", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: "full", size: "small" })
-    ] }),
-    /* @__PURE__ */ jsxs3("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { rounded: "full", size: "medium", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: "full", size: "medium", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: "full", size: "medium" })
-    ] }),
-    /* @__PURE__ */ jsxs3("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ jsx7(FloatingActionButton, { rounded: "full", size: "large", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: "full", size: "large", text: "Create" }),
-      /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", rounded: "full", size: "large" })
-    ] })
+    /* @__PURE__ */ jsx10("span", { children: /* @__PURE__ */ jsx10("small", { children: "rounded / size" }) }),
+    /* @__PURE__ */ jsx10("span", { children: "small" }),
+    /* @__PURE__ */ jsx10("span", { children: "medium" }),
+    /* @__PURE__ */ jsx10("span", { children: "large" }),
+    [null, ...FloatingActionButton.options.rounded].map((rounded) => /* @__PURE__ */ jsxs3(Fragment4, { children: [
+      /* @__PURE__ */ jsx10("span", { children: String(rounded) }),
+      FloatingActionButton.options.size.map((size) => /* @__PURE__ */ jsxs3("span", { className: "k-d-flex k-gap-1", children: [
+        /* @__PURE__ */ jsx10(TextFloatingActionButton, { rounded, size }),
+        /* @__PURE__ */ jsx10(IconTextFloatingActionButton, { rounded, size }),
+        /* @__PURE__ */ jsx10(IconFloatingActionButton, { rounded, size })
+      ] }))
+    ] }))
   ] })
 ] });
 export {
-  fab_size_default as default
+  fab_size_rounded_default as default
 };

package/dist/esm/fab/tests/fab-states.js

@@ -4401,15 +4401,68 @@ import { jsx as jsx5 } from "react/jsx-runtime";
 
 // src/fab/fab-item.tsx
 import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var className = `k-fab-item`;
 var states5 = [
   States.hover,
   States.focus,
   States.active,
   States.disabled
 ];
+var FloatingActionButtonItem = (props) => {
+  const {
+    text,
+    icon,
+    align,
+    hover,
+    focus,
+    active,
+    disabled,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs2(
+    "li",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        className,
+        {
+          [`k-text-${align}`]: align
+        },
+        stateClassNames(className, {
+          hover,
+          focus,
+          active,
+          disabled
+        })
+      ),
+      children: [
+        /* @__PURE__ */ jsx6("span", { className: "k-fab-item-text", children: text }),
+        /* @__PURE__ */ jsx6(Icon, { className: "k-fab-item-icon", icon })
+      ]
+    }
+  );
+};
+FloatingActionButtonItem.states = states5;
+
+// src/fab/templates/text-fab.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+
+// src/fab/templates/icon-fab.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var IconFloatingActionButton = (props) => /* @__PURE__ */ jsx8(
+  FloatingActionButton,
+  {
+    icon: "plus",
+    ...props
+  }
+);
+
+// src/fab/templates/icon-text-fab.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
 
 // src/fab/tests/fab-states.tsx
-import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 var styles = `
     #test-area {
         grid-template-columns: 100px repeat(6, 1fr);
@@ -4417,18 +4470,18 @@ var styles = `
     }
 `;
 var fab_states_default = () => /* @__PURE__ */ jsxs3(Fragment4, { children: [
-  /* @__PURE__ */ jsx7("style", { children: styles }),
+  /* @__PURE__ */ jsx10("style", { children: styles }),
   /* @__PURE__ */ jsxs3("div", { id: "test-area", className: "k-d-grid k-grid-cols-6", children: [
-    /* @__PURE__ */ jsx7("span", {}),
-    /* @__PURE__ */ jsx7("span", { children: "Normal" }),
-    /* @__PURE__ */ jsx7("span", { children: "Hover" }),
-    /* @__PURE__ */ jsx7("span", { children: "Focus" }),
-    /* @__PURE__ */ jsx7("span", { children: "Active" }),
-    /* @__PURE__ */ jsx7("span", { children: "Selected" }),
-    /* @__PURE__ */ jsx7("span", { children: "Disabled" }),
+    /* @__PURE__ */ jsx10("span", {}),
+    /* @__PURE__ */ jsx10("span", { children: "Normal" }),
+    /* @__PURE__ */ jsx10("span", { children: "Hover" }),
+    /* @__PURE__ */ jsx10("span", { children: "Focus" }),
+    /* @__PURE__ */ jsx10("span", { children: "Active" }),
+    /* @__PURE__ */ jsx10("span", { children: "Selected" }),
+    /* @__PURE__ */ jsx10("span", { children: "Disabled" }),
     [...FloatingActionButton.options.themeColor].map((themeColor) => /* @__PURE__ */ jsxs3(Fragment4, { children: [
-      /* @__PURE__ */ jsx7("span", { style: { alignSelf: "center" }, children: themeColor }),
-      ["normal", ...FloatingActionButton.states].map((state) => /* @__PURE__ */ jsx7(Fragment4, { children: /* @__PURE__ */ jsx7("span", { style: { position: "relative" }, children: /* @__PURE__ */ jsx7(FloatingActionButton, { icon: "plus", position: "top-start", themeColor, ...{ [state]: true } }) }) }))
+      /* @__PURE__ */ jsx10("span", { style: { alignSelf: "center" }, children: themeColor }),
+      ["normal", ...FloatingActionButton.states].map((state) => /* @__PURE__ */ jsx10(Fragment4, { children: /* @__PURE__ */ jsx10("span", { style: { position: "relative" }, children: /* @__PURE__ */ jsx10(IconFloatingActionButton, { position: "top-start", themeColor, ...{ [state]: true } }) }) }))
     ] }))
   ] })
 ] });