@progress/kendo-themes-html 13.2.0-dev.2 → 13.2.0-dev.3

package/dist/esm/segmented-control/segmented-control.spec.mjs

@@ -1 +1 @@
-var r=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?r(...e):typeof e=="object"?Object.keys(e).map((o,i)=>e[i]||e[o]&&o||null).filter(o=>o!==null).join(" "):e).filter(e=>!!e).join(" ");var a=(t,e)=>r({[`${t}-xs`]:e.size==="xsmall",[`${t}-sm`]:e.size==="small",[`${t}-md`]:e.size==="medium",[`${t}-lg`]:e.size==="large",[`${t}-xl`]:e.size==="xlarge",[`${t}-xxl`]:e.size==="xxlarge",[`${t}-xxxl`]:e.size==="xxxlarge"},{[`${t}-${e.fillMode}`]:e.fillMode},{[`${t}-${e.themeColor}`]:e.themeColor},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full","k-rounded-none":e.rounded==="none"});var d={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var s="segmented-control",u=s;import{jsx as h,jsxs as x}from"react/jsx-runtime";var l="k-segmented-control",m=[],g={size:[d.undefined,d.small,d.medium,d.large]},n=t=>{let{size:e,stretched:o,children:i,...c}=t;return x("div",{...c,className:r(t.className,l,a(l,{size:e}),{[`${l}-stretched`]:o}),role:"group",children:[h("div",{className:"k-segmented-control-thumb","aria-hidden":"true"}),i]})};n.states=m;n.options=g;n.className=l;n.moduleName=s;n.folderName=u;n.ariaSpec={selector:".k-segmented-control",rules:[{selector:".k-segmented-control",attribute:"role=group",usage:"Sets the proper role for the group of buttons."},{selector:".k-segmented-control-button",attribute:"role=button or nodeName=button",usage:"Each button must have the appropriate button role."},{selector:".k-segmented-control-button.k-selected",attribute:"aria-pressed=true",usage:"Only the selected button within the group will have this attribute set to true."},{selector:".k-segmented-control-button.k-disabled",attribute:"aria-disabled=true",usage:"Indicates that the button is disabled and cannot be interacted with."},{selector:".k-segmented-control-thumb",attribute:"aria-hidden=true",usage:"The thumb is purely decorative and should be hidden from screen readers."}]};var C=n;export{l as SEGMENTED_CONTROL_CLASSNAME,n as SegmentedControl,C as default};
+var r=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?r(...e):typeof e=="object"?Object.keys(e).map((o,i)=>e[i]||e[o]&&o||null).filter(o=>o!==null).join(" "):e).filter(e=>!!e).join(" ");var a=(t,e)=>r({[`${t}-xs`]:e.size==="xsmall",[`${t}-sm`]:e.size==="small",[`${t}-md`]:e.size==="medium",[`${t}-lg`]:e.size==="large",[`${t}-xl`]:e.size==="xlarge",[`${t}-xxl`]:e.size==="xxlarge",[`${t}-xxxl`]:e.size==="xxxlarge"},{[`${t}-${e.fillMode}`]:e.fillMode},{[`${t}-${e.themeColor}`]:e.themeColor},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full","k-rounded-none":e.rounded==="none"});var l={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var s="segmented-control",u=s;import{jsx as x,jsxs as b}from"react/jsx-runtime";var d="k-segmented-control",g=[],h={size:[l.undefined,l.small,l.medium,l.large]},n=t=>{let{size:e,stretched:o,children:i,thumbStyles:c,...m}=t;return b("div",{...m,className:r(t.className,d,a(d,{size:e}),{[`${d}-stretched`]:o}),role:"group",children:[x("div",{className:"k-segmented-control-thumb","aria-hidden":"true",style:c}),i]})};n.states=g;n.options=h;n.className=d;n.moduleName=s;n.folderName=u;n.ariaSpec={selector:".k-segmented-control",rules:[{selector:".k-segmented-control",attribute:"role=group",usage:"Sets the proper role for the group of buttons."},{selector:".k-segmented-control-button",attribute:"role=button or nodeName=button",usage:"Each button must have the appropriate button role."},{selector:".k-segmented-control-button.k-selected",attribute:"aria-pressed=true",usage:"Only the selected button within the group will have this attribute set to true."},{selector:".k-segmented-control-button.k-disabled",attribute:"aria-disabled=true",usage:"Indicates that the button is disabled and cannot be interacted with."},{selector:".k-segmented-control-thumb",attribute:"aria-hidden=true",usage:"The thumb is purely decorative and should be hidden from screen readers."}]};var L=n;export{d as SEGMENTED_CONTROL_CLASSNAME,n as SegmentedControl,L as default};

package/dist/esm/segmented-control/templates/segmented-control-disabled.mjs

@@ -1 +1 @@
-var l=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((i,a)=>e[a]||e[i]&&i||null).filter(i=>i!==null).join(" "):e).filter(e=>!!e).join(" ");var p=(t,e)=>l({[`${t}-xs`]:e.size==="xsmall",[`${t}-sm`]:e.size==="small",[`${t}-md`]:e.size==="medium",[`${t}-lg`]:e.size==="large",[`${t}-xl`]:e.size==="xlarge",[`${t}-xxl`]:e.size==="xxlarge",[`${t}-xxxl`]:e.size==="xxxlarge"},{[`${t}-${e.fillMode}`]:e.fillMode},{[`${t}-${e.themeColor}`]:e.themeColor},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full","k-rounded-none":e.rounded==="none"}),K=(t,e)=>{let{valid:i,invalid:a,hover:r,focus:d,checked:s,active:c,selected:u,disabled:x,indeterminate:D,loading:y,empty:X,readonly:Y,highlighted:Z,...v}=e;return l({"k-valid":i,"k-invalid":a,"k-hover":r,"k-focus":d,"k-checked":s,"k-active":c,"k-selected":u,"k-disabled":x,"k-indeterminate":D&&!s,"k-loading":y,"k-empty":X,"k-readonly":Y,"k-highlighted":Z},Object.keys(v).reduce((T,h)=>(h.startsWith("k-")?T[h]=v[h]:T[`k-${h}`]=v[h],T),{}))};var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var o={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},N={open:"open",hover:"hover",focus:"focus",active:"active",selected:"selected",disabled:"disabled",valid:"valid",invalid:"invalid",loading:"loading",required:"required",empty:"empty",indeterminate:"indeterminate",checked:"checked",readonly:"readonly",highlighted:"highlighted",generating:"generating",expanded:"expanded"};import{Fragment as ne,jsx as $}from"react/jsx-runtime";var M="k-font-icon",ee=[],te={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},oe={},b=t=>{let{size:e,themeColor:i,icon:a,rotate:r,flip:d,...s}=t;return a?$("span",{...s,className:l(t.className,M,p(M,{size:e}),{[`k-i-${a}`]:a,[`k-color-${i}`]:i,[`k-rotate-${r}`]:r,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):$(ne,{})};b.states=ee;b.options=te;b.className=M;b.defaultOptions=oe;var H=b;import{Fragment as ie,jsx as O}from"react/jsx-runtime";var _="k-svg-icon",re=[],se={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},G={viewBox:"0 0 24 24"},C=t=>{let{size:e,themeColor:i,rotate:a,flip:r,viewBox:d=G.viewBox,icon:s,...c}=t;if(!s)return O(ie,{});if(s==="none")return O("span",{...c,className:l(t.className,_,p("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let u=typeof s=="object"&&s.name&&s.name;return O("span",{...c,className:l(t.className,_,p("k-icon",{size:e}),{[`k-svg-i-${u}`]:u,[`k-color-${i}`]:i,[`k-rotate-${a}`]:a,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),"aria-hidden":"true",children:O("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof s=="object"?s.viewBox:d,dangerouslySetInnerHTML:typeof s=="object"?{__html:s.content}:void 0,children:s?void 0:t.children})})};C.states=re;C.options=se;C.className=_;C.defaultOptions=G;var L=C;import*as A from"@progress/kendo-svg-icons";var F="icon",P="icons";import{useContext as le}from"react";import{createContext as ae}from"react";var U=ae({iconsType:"svg"});import{Fragment as V,jsx as S}from"react/jsx-runtime";var E="k-icon",de=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),ce=[],me={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},I={viewBox:"0 0 24 24",type:"svg"},m=t=>{let{iconsType:e}=le(U),{size:i,themeColor:a,icon:r,type:d=e||I.type,rotate:s,flip:c,viewBox:u=I.viewBox,...x}=t;if(!r)return S(V,{});if((e||d)==="svg"){if(r==="none")return S(L,{...x,className:l(t.className,E),icon:r,size:i});let y=A[r]?r:de(`${r}-icon`);return A[y]?S(L,{...x,className:l(t.className,E),icon:A[y],size:i,themeColor:a,rotate:s,flip:c,viewBox:u}):S(V,{})}return S(H,{...x,className:l(t.className,E),icon:r,size:i,themeColor:a,rotate:s,flip:c})};m.states=ce;m.options=me;m.defaultOptions=I;m.className=E;m.moduleName=F;m.folderName=P;m.ariaSpec={selector:".k-icon, .k-svg-icon",rules:[{selector:".k-icon, .k-svg-icon",attribute:"aria-hidden=true",usage:"Hides the icon element and all its children from assistive technologies."}]};var z="segmented-control",j=z,q="segmented-control-button",W="segmented-control";import{jsx as J,jsxs as fe}from"react/jsx-runtime";var B="k-segmented-control-button",ue=[N.selected,N.hover,N.focus,N.disabled],pe={},ge={},g=t=>{let{hover:e,focus:i,selected:a,disabled:r,icon:d,text:s,iconClassName:c,...u}=t;return fe("button",{...u,className:l(t.className,B,K(B,{hover:e,focus:i,disabled:r,selected:a})),"aria-pressed":a?"true":"false","aria-disabled":r?"true":void 0,children:[d&&J(m,{className:l(c,"k-segmented-control-button-icon"),icon:d}),(s||t.children)&&J("span",{className:"k-segmented-control-button-text",children:s||t.children})]})};g.states=ue;g.options=pe;g.className=B;g.defaultOptions=ge;g.moduleName=q;g.folderName=W;var R=g;import{jsx as Ne,jsxs as be}from"react/jsx-runtime";var k="k-segmented-control",xe=[],he={size:[n.undefined,n.small,n.medium,n.large]},f=t=>{let{size:e,stretched:i,children:a,...r}=t;return be("div",{...r,className:l(t.className,k,p(k,{size:e}),{[`${k}-stretched`]:i}),role:"group",children:[Ne("div",{className:"k-segmented-control-thumb","aria-hidden":"true"}),a]})};f.states=xe;f.options=he;f.className=k;f.moduleName=z;f.folderName=j;f.ariaSpec={selector:".k-segmented-control",rules:[{selector:".k-segmented-control",attribute:"role=group",usage:"Sets the proper role for the group of buttons."},{selector:".k-segmented-control-button",attribute:"role=button or nodeName=button",usage:"Each button must have the appropriate button role."},{selector:".k-segmented-control-button.k-selected",attribute:"aria-pressed=true",usage:"Only the selected button within the group will have this attribute set to true."},{selector:".k-segmented-control-button.k-disabled",attribute:"aria-disabled=true",usage:"Indicates that the button is disabled and cannot be interacted with."},{selector:".k-segmented-control-thumb",attribute:"aria-hidden=true",usage:"The thumb is purely decorative and should be hidden from screen readers."}]};var Q=f;import{Fragment as Ce,jsx as w,jsxs as Se}from"react/jsx-runtime";var mt=t=>w(Q,{...t,children:Se(Ce,{children:[w(R,{icon:"search",selected:!0,children:"Search"}),w(R,{icon:"sparkles",disabled:!0,children:" AI Assistant"})]})});export{mt as SegmentedControlDisabled};
+var l=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((i,a)=>e[a]||e[i]&&i||null).filter(i=>i!==null).join(" "):e).filter(e=>!!e).join(" ");var p=(t,e)=>l({[`${t}-xs`]:e.size==="xsmall",[`${t}-sm`]:e.size==="small",[`${t}-md`]:e.size==="medium",[`${t}-lg`]:e.size==="large",[`${t}-xl`]:e.size==="xlarge",[`${t}-xxl`]:e.size==="xxlarge",[`${t}-xxxl`]:e.size==="xxxlarge"},{[`${t}-${e.fillMode}`]:e.fillMode},{[`${t}-${e.themeColor}`]:e.themeColor},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full","k-rounded-none":e.rounded==="none"}),K=(t,e)=>{let{valid:i,invalid:a,hover:r,focus:d,checked:s,active:c,selected:u,disabled:h,indeterminate:D,loading:y,empty:X,readonly:Y,highlighted:Z,...v}=e;return l({"k-valid":i,"k-invalid":a,"k-hover":r,"k-focus":d,"k-checked":s,"k-active":c,"k-selected":u,"k-disabled":h,"k-indeterminate":D&&!s,"k-loading":y,"k-empty":X,"k-readonly":Y,"k-highlighted":Z},Object.keys(v).reduce((T,x)=>(x.startsWith("k-")?T[x]=v[x]:T[`k-${x}`]=v[x],T),{}))};var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var o={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},N={open:"open",hover:"hover",focus:"focus",active:"active",selected:"selected",disabled:"disabled",valid:"valid",invalid:"invalid",loading:"loading",required:"required",empty:"empty",indeterminate:"indeterminate",checked:"checked",readonly:"readonly",highlighted:"highlighted",generating:"generating",expanded:"expanded"};import{Fragment as ne,jsx as $}from"react/jsx-runtime";var M="k-font-icon",ee=[],te={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},oe={},b=t=>{let{size:e,themeColor:i,icon:a,rotate:r,flip:d,...s}=t;return a?$("span",{...s,className:l(t.className,M,p(M,{size:e}),{[`k-i-${a}`]:a,[`k-color-${i}`]:i,[`k-rotate-${r}`]:r,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):$(ne,{})};b.states=ee;b.options=te;b.className=M;b.defaultOptions=oe;var H=b;import{Fragment as ie,jsx as O}from"react/jsx-runtime";var _="k-svg-icon",re=[],se={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},G={viewBox:"0 0 24 24"},C=t=>{let{size:e,themeColor:i,rotate:a,flip:r,viewBox:d=G.viewBox,icon:s,...c}=t;if(!s)return O(ie,{});if(s==="none")return O("span",{...c,className:l(t.className,_,p("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let u=typeof s=="object"&&s.name&&s.name;return O("span",{...c,className:l(t.className,_,p("k-icon",{size:e}),{[`k-svg-i-${u}`]:u,[`k-color-${i}`]:i,[`k-rotate-${a}`]:a,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),"aria-hidden":"true",children:O("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof s=="object"?s.viewBox:d,dangerouslySetInnerHTML:typeof s=="object"?{__html:s.content}:void 0,children:s?void 0:t.children})})};C.states=re;C.options=se;C.className=_;C.defaultOptions=G;var L=C;import*as A from"@progress/kendo-svg-icons";var F="icon",P="icons";import{useContext as le}from"react";import{createContext as ae}from"react";var U=ae({iconsType:"svg"});import{Fragment as V,jsx as S}from"react/jsx-runtime";var E="k-icon",de=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),ce=[],me={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},I={viewBox:"0 0 24 24",type:"svg"},m=t=>{let{iconsType:e}=le(U),{size:i,themeColor:a,icon:r,type:d=e||I.type,rotate:s,flip:c,viewBox:u=I.viewBox,...h}=t;if(!r)return S(V,{});if((e||d)==="svg"){if(r==="none")return S(L,{...h,className:l(t.className,E),icon:r,size:i});let y=A[r]?r:de(`${r}-icon`);return A[y]?S(L,{...h,className:l(t.className,E),icon:A[y],size:i,themeColor:a,rotate:s,flip:c,viewBox:u}):S(V,{})}return S(H,{...h,className:l(t.className,E),icon:r,size:i,themeColor:a,rotate:s,flip:c})};m.states=ce;m.options=me;m.defaultOptions=I;m.className=E;m.moduleName=F;m.folderName=P;m.ariaSpec={selector:".k-icon, .k-svg-icon",rules:[{selector:".k-icon, .k-svg-icon",attribute:"aria-hidden=true",usage:"Hides the icon element and all its children from assistive technologies."}]};var z="segmented-control",j=z,q="segmented-control-button",W="segmented-control";import{jsx as J,jsxs as fe}from"react/jsx-runtime";var B="k-segmented-control-button",ue=[N.selected,N.hover,N.focus,N.disabled],pe={},ge={},g=t=>{let{hover:e,focus:i,selected:a,disabled:r,icon:d,text:s,iconClassName:c,...u}=t;return fe("button",{...u,className:l(t.className,B,K(B,{hover:e,focus:i,disabled:r,selected:a})),"aria-pressed":a?"true":"false","aria-disabled":r?"true":void 0,children:[d&&J(m,{className:l(c,"k-segmented-control-button-icon"),icon:d}),(s||t.children)&&J("span",{className:"k-segmented-control-button-text",children:s||t.children})]})};g.states=ue;g.options=pe;g.className=B;g.defaultOptions=ge;g.moduleName=q;g.folderName=W;var R=g;import{jsx as Ne,jsxs as be}from"react/jsx-runtime";var k="k-segmented-control",he=[],xe={size:[n.undefined,n.small,n.medium,n.large]},f=t=>{let{size:e,stretched:i,children:a,thumbStyles:r,...d}=t;return be("div",{...d,className:l(t.className,k,p(k,{size:e}),{[`${k}-stretched`]:i}),role:"group",children:[Ne("div",{className:"k-segmented-control-thumb","aria-hidden":"true",style:r}),a]})};f.states=he;f.options=xe;f.className=k;f.moduleName=z;f.folderName=j;f.ariaSpec={selector:".k-segmented-control",rules:[{selector:".k-segmented-control",attribute:"role=group",usage:"Sets the proper role for the group of buttons."},{selector:".k-segmented-control-button",attribute:"role=button or nodeName=button",usage:"Each button must have the appropriate button role."},{selector:".k-segmented-control-button.k-selected",attribute:"aria-pressed=true",usage:"Only the selected button within the group will have this attribute set to true."},{selector:".k-segmented-control-button.k-disabled",attribute:"aria-disabled=true",usage:"Indicates that the button is disabled and cannot be interacted with."},{selector:".k-segmented-control-thumb",attribute:"aria-hidden=true",usage:"The thumb is purely decorative and should be hidden from screen readers."}]};var Q=f;import{Fragment as Ce,jsx as w,jsxs as Se}from"react/jsx-runtime";var mt=t=>w(Q,{...t,children:Se(Ce,{children:[w(R,{icon:"search",selected:!0,children:"Search"}),w(R,{icon:"sparkles",disabled:!0,children:" AI Assistant"})]})});export{mt as SegmentedControlDisabled};

package/dist/esm/segmented-control/templates/segmented-control-icons.mjs

@@ -1 +1 @@
-var l=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((i,a)=>e[a]||e[i]&&i||null).filter(i=>i!==null).join(" "):e).filter(e=>!!e).join(" ");var p=(t,e)=>l({[`${t}-xs`]:e.size==="xsmall",[`${t}-sm`]:e.size==="small",[`${t}-md`]:e.size==="medium",[`${t}-lg`]:e.size==="large",[`${t}-xl`]:e.size==="xlarge",[`${t}-xxl`]:e.size==="xxlarge",[`${t}-xxxl`]:e.size==="xxxlarge"},{[`${t}-${e.fillMode}`]:e.fillMode},{[`${t}-${e.themeColor}`]:e.themeColor},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full","k-rounded-none":e.rounded==="none"}),D=(t,e)=>{let{valid:i,invalid:a,hover:r,focus:d,checked:s,active:c,selected:u,disabled:x,indeterminate:K,loading:y,empty:X,readonly:Y,highlighted:Z,...M}=e;return l({"k-valid":i,"k-invalid":a,"k-hover":r,"k-focus":d,"k-checked":s,"k-active":c,"k-selected":u,"k-disabled":x,"k-indeterminate":K&&!s,"k-loading":y,"k-empty":X,"k-readonly":Y,"k-highlighted":Z},Object.keys(M).reduce((_,h)=>(h.startsWith("k-")?_[h]=M[h]:_[`k-${h}`]=M[h],_),{}))};var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var o={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},N={open:"open",hover:"hover",focus:"focus",active:"active",selected:"selected",disabled:"disabled",valid:"valid",invalid:"invalid",loading:"loading",required:"required",empty:"empty",indeterminate:"indeterminate",checked:"checked",readonly:"readonly",highlighted:"highlighted",generating:"generating",expanded:"expanded"};import{Fragment as ne,jsx as $}from"react/jsx-runtime";var L="k-font-icon",ee=[],te={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},oe={},C=t=>{let{size:e,themeColor:i,icon:a,rotate:r,flip:d,...s}=t;return a?$("span",{...s,className:l(t.className,L,p(L,{size:e}),{[`k-i-${a}`]:a,[`k-color-${i}`]:i,[`k-rotate-${r}`]:r,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):$(ne,{})};C.states=ee;C.options=te;C.className=L;C.defaultOptions=oe;var H=C;import{Fragment as ie,jsx as O}from"react/jsx-runtime";var A="k-svg-icon",re=[],se={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},G={viewBox:"0 0 24 24"},b=t=>{let{size:e,themeColor:i,rotate:a,flip:r,viewBox:d=G.viewBox,icon:s,...c}=t;if(!s)return O(ie,{});if(s==="none")return O("span",{...c,className:l(t.className,A,p("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let u=typeof s=="object"&&s.name&&s.name;return O("span",{...c,className:l(t.className,A,p("k-icon",{size:e}),{[`k-svg-i-${u}`]:u,[`k-color-${i}`]:i,[`k-rotate-${a}`]:a,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),"aria-hidden":"true",children:O("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof s=="object"?s.viewBox:d,dangerouslySetInnerHTML:typeof s=="object"?{__html:s.content}:void 0,children:s?void 0:t.children})})};b.states=re;b.options=se;b.className=A;b.defaultOptions=G;var B=b;import*as I from"@progress/kendo-svg-icons";var F="icon",P="icons";import{useContext as le}from"react";import{createContext as ae}from"react";var U=ae({iconsType:"svg"});import{Fragment as V,jsx as S}from"react/jsx-runtime";var E="k-icon",de=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),ce=[],me={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},z={viewBox:"0 0 24 24",type:"svg"},m=t=>{let{iconsType:e}=le(U),{size:i,themeColor:a,icon:r,type:d=e||z.type,rotate:s,flip:c,viewBox:u=z.viewBox,...x}=t;if(!r)return S(V,{});if((e||d)==="svg"){if(r==="none")return S(B,{...x,className:l(t.className,E),icon:r,size:i});let y=I[r]?r:de(`${r}-icon`);return I[y]?S(B,{...x,className:l(t.className,E),icon:I[y],size:i,themeColor:a,rotate:s,flip:c,viewBox:u}):S(V,{})}return S(H,{...x,className:l(t.className,E),icon:r,size:i,themeColor:a,rotate:s,flip:c})};m.states=ce;m.options=me;m.defaultOptions=z;m.className=E;m.moduleName=F;m.folderName=P;m.ariaSpec={selector:".k-icon, .k-svg-icon",rules:[{selector:".k-icon, .k-svg-icon",attribute:"aria-hidden=true",usage:"Hides the icon element and all its children from assistive technologies."}]};var R="segmented-control",j=R,q="segmented-control-button",W="segmented-control";import{jsx as J,jsxs as fe}from"react/jsx-runtime";var w="k-segmented-control-button",ue=[N.selected,N.hover,N.focus,N.disabled],pe={},ge={},g=t=>{let{hover:e,focus:i,selected:a,disabled:r,icon:d,text:s,iconClassName:c,...u}=t;return fe("button",{...u,className:l(t.className,w,D(w,{hover:e,focus:i,disabled:r,selected:a})),"aria-pressed":a?"true":"false","aria-disabled":r?"true":void 0,children:[d&&J(m,{className:l(c,"k-segmented-control-button-icon"),icon:d}),(s||t.children)&&J("span",{className:"k-segmented-control-button-text",children:s||t.children})]})};g.states=ue;g.options=pe;g.className=w;g.defaultOptions=ge;g.moduleName=q;g.folderName=W;var k=g;import{jsx as Ne,jsxs as Ce}from"react/jsx-runtime";var v="k-segmented-control",xe=[],he={size:[n.undefined,n.small,n.medium,n.large]},f=t=>{let{size:e,stretched:i,children:a,...r}=t;return Ce("div",{...r,className:l(t.className,v,p(v,{size:e}),{[`${v}-stretched`]:i}),role:"group",children:[Ne("div",{className:"k-segmented-control-thumb","aria-hidden":"true"}),a]})};f.states=xe;f.options=he;f.className=v;f.moduleName=R;f.folderName=j;f.ariaSpec={selector:".k-segmented-control",rules:[{selector:".k-segmented-control",attribute:"role=group",usage:"Sets the proper role for the group of buttons."},{selector:".k-segmented-control-button",attribute:"role=button or nodeName=button",usage:"Each button must have the appropriate button role."},{selector:".k-segmented-control-button.k-selected",attribute:"aria-pressed=true",usage:"Only the selected button within the group will have this attribute set to true."},{selector:".k-segmented-control-button.k-disabled",attribute:"aria-disabled=true",usage:"Indicates that the button is disabled and cannot be interacted with."},{selector:".k-segmented-control-thumb",attribute:"aria-hidden=true",usage:"The thumb is purely decorative and should be hidden from screen readers."}]};var Q=f;import{Fragment as be,jsx as T,jsxs as Se}from"react/jsx-runtime";var mt=t=>T(Q,{...t,children:Se(be,{children:[T(k,{icon:"search",selected:!0}),T(k,{icon:"sparkles"}),T(k,{icon:"home"})]})});export{mt as SegmentedControlIcons};
+var l=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((i,a)=>e[a]||e[i]&&i||null).filter(i=>i!==null).join(" "):e).filter(e=>!!e).join(" ");var p=(t,e)=>l({[`${t}-xs`]:e.size==="xsmall",[`${t}-sm`]:e.size==="small",[`${t}-md`]:e.size==="medium",[`${t}-lg`]:e.size==="large",[`${t}-xl`]:e.size==="xlarge",[`${t}-xxl`]:e.size==="xxlarge",[`${t}-xxxl`]:e.size==="xxxlarge"},{[`${t}-${e.fillMode}`]:e.fillMode},{[`${t}-${e.themeColor}`]:e.themeColor},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full","k-rounded-none":e.rounded==="none"}),D=(t,e)=>{let{valid:i,invalid:a,hover:r,focus:d,checked:s,active:c,selected:u,disabled:h,indeterminate:K,loading:y,empty:X,readonly:Y,highlighted:Z,...M}=e;return l({"k-valid":i,"k-invalid":a,"k-hover":r,"k-focus":d,"k-checked":s,"k-active":c,"k-selected":u,"k-disabled":h,"k-indeterminate":K&&!s,"k-loading":y,"k-empty":X,"k-readonly":Y,"k-highlighted":Z},Object.keys(M).reduce((_,x)=>(x.startsWith("k-")?_[x]=M[x]:_[`k-${x}`]=M[x],_),{}))};var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var o={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},N={open:"open",hover:"hover",focus:"focus",active:"active",selected:"selected",disabled:"disabled",valid:"valid",invalid:"invalid",loading:"loading",required:"required",empty:"empty",indeterminate:"indeterminate",checked:"checked",readonly:"readonly",highlighted:"highlighted",generating:"generating",expanded:"expanded"};import{Fragment as ne,jsx as $}from"react/jsx-runtime";var L="k-font-icon",ee=[],te={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},oe={},b=t=>{let{size:e,themeColor:i,icon:a,rotate:r,flip:d,...s}=t;return a?$("span",{...s,className:l(t.className,L,p(L,{size:e}),{[`k-i-${a}`]:a,[`k-color-${i}`]:i,[`k-rotate-${r}`]:r,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):$(ne,{})};b.states=ee;b.options=te;b.className=L;b.defaultOptions=oe;var H=b;import{Fragment as ie,jsx as O}from"react/jsx-runtime";var A="k-svg-icon",re=[],se={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},G={viewBox:"0 0 24 24"},C=t=>{let{size:e,themeColor:i,rotate:a,flip:r,viewBox:d=G.viewBox,icon:s,...c}=t;if(!s)return O(ie,{});if(s==="none")return O("span",{...c,className:l(t.className,A,p("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let u=typeof s=="object"&&s.name&&s.name;return O("span",{...c,className:l(t.className,A,p("k-icon",{size:e}),{[`k-svg-i-${u}`]:u,[`k-color-${i}`]:i,[`k-rotate-${a}`]:a,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),"aria-hidden":"true",children:O("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof s=="object"?s.viewBox:d,dangerouslySetInnerHTML:typeof s=="object"?{__html:s.content}:void 0,children:s?void 0:t.children})})};C.states=re;C.options=se;C.className=A;C.defaultOptions=G;var B=C;import*as I from"@progress/kendo-svg-icons";var F="icon",P="icons";import{useContext as le}from"react";import{createContext as ae}from"react";var U=ae({iconsType:"svg"});import{Fragment as V,jsx as S}from"react/jsx-runtime";var k="k-icon",de=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),ce=[],me={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},z={viewBox:"0 0 24 24",type:"svg"},m=t=>{let{iconsType:e}=le(U),{size:i,themeColor:a,icon:r,type:d=e||z.type,rotate:s,flip:c,viewBox:u=z.viewBox,...h}=t;if(!r)return S(V,{});if((e||d)==="svg"){if(r==="none")return S(B,{...h,className:l(t.className,k),icon:r,size:i});let y=I[r]?r:de(`${r}-icon`);return I[y]?S(B,{...h,className:l(t.className,k),icon:I[y],size:i,themeColor:a,rotate:s,flip:c,viewBox:u}):S(V,{})}return S(H,{...h,className:l(t.className,k),icon:r,size:i,themeColor:a,rotate:s,flip:c})};m.states=ce;m.options=me;m.defaultOptions=z;m.className=k;m.moduleName=F;m.folderName=P;m.ariaSpec={selector:".k-icon, .k-svg-icon",rules:[{selector:".k-icon, .k-svg-icon",attribute:"aria-hidden=true",usage:"Hides the icon element and all its children from assistive technologies."}]};var R="segmented-control",j=R,q="segmented-control-button",W="segmented-control";import{jsx as J,jsxs as fe}from"react/jsx-runtime";var w="k-segmented-control-button",ue=[N.selected,N.hover,N.focus,N.disabled],pe={},ge={},g=t=>{let{hover:e,focus:i,selected:a,disabled:r,icon:d,text:s,iconClassName:c,...u}=t;return fe("button",{...u,className:l(t.className,w,D(w,{hover:e,focus:i,disabled:r,selected:a})),"aria-pressed":a?"true":"false","aria-disabled":r?"true":void 0,children:[d&&J(m,{className:l(c,"k-segmented-control-button-icon"),icon:d}),(s||t.children)&&J("span",{className:"k-segmented-control-button-text",children:s||t.children})]})};g.states=ue;g.options=pe;g.className=w;g.defaultOptions=ge;g.moduleName=q;g.folderName=W;var E=g;import{jsx as Ne,jsxs as be}from"react/jsx-runtime";var v="k-segmented-control",he=[],xe={size:[n.undefined,n.small,n.medium,n.large]},f=t=>{let{size:e,stretched:i,children:a,thumbStyles:r,...d}=t;return be("div",{...d,className:l(t.className,v,p(v,{size:e}),{[`${v}-stretched`]:i}),role:"group",children:[Ne("div",{className:"k-segmented-control-thumb","aria-hidden":"true",style:r}),a]})};f.states=he;f.options=xe;f.className=v;f.moduleName=R;f.folderName=j;f.ariaSpec={selector:".k-segmented-control",rules:[{selector:".k-segmented-control",attribute:"role=group",usage:"Sets the proper role for the group of buttons."},{selector:".k-segmented-control-button",attribute:"role=button or nodeName=button",usage:"Each button must have the appropriate button role."},{selector:".k-segmented-control-button.k-selected",attribute:"aria-pressed=true",usage:"Only the selected button within the group will have this attribute set to true."},{selector:".k-segmented-control-button.k-disabled",attribute:"aria-disabled=true",usage:"Indicates that the button is disabled and cannot be interacted with."},{selector:".k-segmented-control-thumb",attribute:"aria-hidden=true",usage:"The thumb is purely decorative and should be hidden from screen readers."}]};var Q=f;import{Fragment as Ce,jsx as T,jsxs as Se}from"react/jsx-runtime";var mt=t=>T(Q,{...t,children:Se(Ce,{children:[T(E,{"aria-label":"Search",icon:"search",selected:!0}),T(E,{"aria-label":"Sparkles",icon:"sparkles"}),T(E,{"aria-label":"Home",icon:"home"})]})});export{mt as SegmentedControlIcons};

package/dist/esm/segmented-control/templates/segmented-control-normal.mjs

@@ -1 +1 @@
-var l=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((i,a)=>e[a]||e[i]&&i||null).filter(i=>i!==null).join(" "):e).filter(e=>!!e).join(" ");var p=(t,e)=>l({[`${t}-xs`]:e.size==="xsmall",[`${t}-sm`]:e.size==="small",[`${t}-md`]:e.size==="medium",[`${t}-lg`]:e.size==="large",[`${t}-xl`]:e.size==="xlarge",[`${t}-xxl`]:e.size==="xxlarge",[`${t}-xxxl`]:e.size==="xxxlarge"},{[`${t}-${e.fillMode}`]:e.fillMode},{[`${t}-${e.themeColor}`]:e.themeColor},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full","k-rounded-none":e.rounded==="none"}),D=(t,e)=>{let{valid:i,invalid:a,hover:r,focus:d,checked:s,active:c,selected:u,disabled:x,indeterminate:K,loading:O,empty:X,readonly:Y,highlighted:Z,...v}=e;return l({"k-valid":i,"k-invalid":a,"k-hover":r,"k-focus":d,"k-checked":s,"k-active":c,"k-selected":u,"k-disabled":x,"k-indeterminate":K&&!s,"k-loading":O,"k-empty":X,"k-readonly":Y,"k-highlighted":Z},Object.keys(v).reduce((T,h)=>(h.startsWith("k-")?T[h]=v[h]:T[`k-${h}`]=v[h],T),{}))};var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var o={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},N={open:"open",hover:"hover",focus:"focus",active:"active",selected:"selected",disabled:"disabled",valid:"valid",invalid:"invalid",loading:"loading",required:"required",empty:"empty",indeterminate:"indeterminate",checked:"checked",readonly:"readonly",highlighted:"highlighted",generating:"generating",expanded:"expanded"};import{Fragment as ne,jsx as $}from"react/jsx-runtime";var M="k-font-icon",ee=[],te={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},oe={},C=t=>{let{size:e,themeColor:i,icon:a,rotate:r,flip:d,...s}=t;return a?$("span",{...s,className:l(t.className,M,p(M,{size:e}),{[`k-i-${a}`]:a,[`k-color-${i}`]:i,[`k-rotate-${r}`]:r,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):$(ne,{})};C.states=ee;C.options=te;C.className=M;C.defaultOptions=oe;var H=C;import{Fragment as ie,jsx as y}from"react/jsx-runtime";var _="k-svg-icon",re=[],se={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},G={viewBox:"0 0 24 24"},b=t=>{let{size:e,themeColor:i,rotate:a,flip:r,viewBox:d=G.viewBox,icon:s,...c}=t;if(!s)return y(ie,{});if(s==="none")return y("span",{...c,className:l(t.className,_,p("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let u=typeof s=="object"&&s.name&&s.name;return y("span",{...c,className:l(t.className,_,p("k-icon",{size:e}),{[`k-svg-i-${u}`]:u,[`k-color-${i}`]:i,[`k-rotate-${a}`]:a,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),"aria-hidden":"true",children:y("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof s=="object"?s.viewBox:d,dangerouslySetInnerHTML:typeof s=="object"?{__html:s.content}:void 0,children:s?void 0:t.children})})};b.states=re;b.options=se;b.className=_;b.defaultOptions=G;var L=b;import*as A from"@progress/kendo-svg-icons";var F="icon",P="icons";import{useContext as le}from"react";import{createContext as ae}from"react";var U=ae({iconsType:"svg"});import{Fragment as V,jsx as S}from"react/jsx-runtime";var E="k-icon",de=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),ce=[],me={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},z={viewBox:"0 0 24 24",type:"svg"},m=t=>{let{iconsType:e}=le(U),{size:i,themeColor:a,icon:r,type:d=e||z.type,rotate:s,flip:c,viewBox:u=z.viewBox,...x}=t;if(!r)return S(V,{});if((e||d)==="svg"){if(r==="none")return S(L,{...x,className:l(t.className,E),icon:r,size:i});let O=A[r]?r:de(`${r}-icon`);return A[O]?S(L,{...x,className:l(t.className,E),icon:A[O],size:i,themeColor:a,rotate:s,flip:c,viewBox:u}):S(V,{})}return S(H,{...x,className:l(t.className,E),icon:r,size:i,themeColor:a,rotate:s,flip:c})};m.states=ce;m.options=me;m.defaultOptions=z;m.className=E;m.moduleName=F;m.folderName=P;m.ariaSpec={selector:".k-icon, .k-svg-icon",rules:[{selector:".k-icon, .k-svg-icon",attribute:"aria-hidden=true",usage:"Hides the icon element and all its children from assistive technologies."}]};var B="segmented-control",j=B,q="segmented-control-button",W="segmented-control";import{jsx as J,jsxs as fe}from"react/jsx-runtime";var I="k-segmented-control-button",ue=[N.selected,N.hover,N.focus,N.disabled],pe={},ge={},g=t=>{let{hover:e,focus:i,selected:a,disabled:r,icon:d,text:s,iconClassName:c,...u}=t;return fe("button",{...u,className:l(t.className,I,D(I,{hover:e,focus:i,disabled:r,selected:a})),"aria-pressed":a?"true":"false","aria-disabled":r?"true":void 0,children:[d&&J(m,{className:l(c,"k-segmented-control-button-icon"),icon:d}),(s||t.children)&&J("span",{className:"k-segmented-control-button-text",children:s||t.children})]})};g.states=ue;g.options=pe;g.className=I;g.defaultOptions=ge;g.moduleName=q;g.folderName=W;var R=g;import{jsx as Ne,jsxs as Ce}from"react/jsx-runtime";var k="k-segmented-control",xe=[],he={size:[n.undefined,n.small,n.medium,n.large]},f=t=>{let{size:e,stretched:i,children:a,...r}=t;return Ce("div",{...r,className:l(t.className,k,p(k,{size:e}),{[`${k}-stretched`]:i}),role:"group",children:[Ne("div",{className:"k-segmented-control-thumb","aria-hidden":"true"}),a]})};f.states=xe;f.options=he;f.className=k;f.moduleName=B;f.folderName=j;f.ariaSpec={selector:".k-segmented-control",rules:[{selector:".k-segmented-control",attribute:"role=group",usage:"Sets the proper role for the group of buttons."},{selector:".k-segmented-control-button",attribute:"role=button or nodeName=button",usage:"Each button must have the appropriate button role."},{selector:".k-segmented-control-button.k-selected",attribute:"aria-pressed=true",usage:"Only the selected button within the group will have this attribute set to true."},{selector:".k-segmented-control-button.k-disabled",attribute:"aria-disabled=true",usage:"Indicates that the button is disabled and cannot be interacted with."},{selector:".k-segmented-control-thumb",attribute:"aria-hidden=true",usage:"The thumb is purely decorative and should be hidden from screen readers."}]};var Q=f;import{Fragment as be,jsx as w,jsxs as Se}from"react/jsx-runtime";var mt=t=>w(Q,{...t,children:Se(be,{children:[w(R,{icon:"search",selected:!0,children:"Option 1"}),w(R,{icon:"sparkles",children:"Option 2"})]})});export{mt as SegmentedControlNormal};
+var l=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((i,a)=>e[a]||e[i]&&i||null).filter(i=>i!==null).join(" "):e).filter(e=>!!e).join(" ");var p=(t,e)=>l({[`${t}-xs`]:e.size==="xsmall",[`${t}-sm`]:e.size==="small",[`${t}-md`]:e.size==="medium",[`${t}-lg`]:e.size==="large",[`${t}-xl`]:e.size==="xlarge",[`${t}-xxl`]:e.size==="xxlarge",[`${t}-xxxl`]:e.size==="xxxlarge"},{[`${t}-${e.fillMode}`]:e.fillMode},{[`${t}-${e.themeColor}`]:e.themeColor},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full","k-rounded-none":e.rounded==="none"}),D=(t,e)=>{let{valid:i,invalid:a,hover:r,focus:d,checked:s,active:c,selected:u,disabled:x,indeterminate:K,loading:y,empty:X,readonly:Y,highlighted:Z,...v}=e;return l({"k-valid":i,"k-invalid":a,"k-hover":r,"k-focus":d,"k-checked":s,"k-active":c,"k-selected":u,"k-disabled":x,"k-indeterminate":K&&!s,"k-loading":y,"k-empty":X,"k-readonly":Y,"k-highlighted":Z},Object.keys(v).reduce((T,h)=>(h.startsWith("k-")?T[h]=v[h]:T[`k-${h}`]=v[h],T),{}))};var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var o={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},N={open:"open",hover:"hover",focus:"focus",active:"active",selected:"selected",disabled:"disabled",valid:"valid",invalid:"invalid",loading:"loading",required:"required",empty:"empty",indeterminate:"indeterminate",checked:"checked",readonly:"readonly",highlighted:"highlighted",generating:"generating",expanded:"expanded"};import{Fragment as ne,jsx as $}from"react/jsx-runtime";var M="k-font-icon",ee=[],te={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},oe={},C=t=>{let{size:e,themeColor:i,icon:a,rotate:r,flip:d,...s}=t;return a?$("span",{...s,className:l(t.className,M,p(M,{size:e}),{[`k-i-${a}`]:a,[`k-color-${i}`]:i,[`k-rotate-${r}`]:r,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):$(ne,{})};C.states=ee;C.options=te;C.className=M;C.defaultOptions=oe;var H=C;import{Fragment as ie,jsx as O}from"react/jsx-runtime";var _="k-svg-icon",re=[],se={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},G={viewBox:"0 0 24 24"},b=t=>{let{size:e,themeColor:i,rotate:a,flip:r,viewBox:d=G.viewBox,icon:s,...c}=t;if(!s)return O(ie,{});if(s==="none")return O("span",{...c,className:l(t.className,_,p("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let u=typeof s=="object"&&s.name&&s.name;return O("span",{...c,className:l(t.className,_,p("k-icon",{size:e}),{[`k-svg-i-${u}`]:u,[`k-color-${i}`]:i,[`k-rotate-${a}`]:a,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),"aria-hidden":"true",children:O("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof s=="object"?s.viewBox:d,dangerouslySetInnerHTML:typeof s=="object"?{__html:s.content}:void 0,children:s?void 0:t.children})})};b.states=re;b.options=se;b.className=_;b.defaultOptions=G;var L=b;import*as A from"@progress/kendo-svg-icons";var F="icon",P="icons";import{useContext as le}from"react";import{createContext as ae}from"react";var U=ae({iconsType:"svg"});import{Fragment as V,jsx as S}from"react/jsx-runtime";var E="k-icon",de=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),ce=[],me={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},z={viewBox:"0 0 24 24",type:"svg"},m=t=>{let{iconsType:e}=le(U),{size:i,themeColor:a,icon:r,type:d=e||z.type,rotate:s,flip:c,viewBox:u=z.viewBox,...x}=t;if(!r)return S(V,{});if((e||d)==="svg"){if(r==="none")return S(L,{...x,className:l(t.className,E),icon:r,size:i});let y=A[r]?r:de(`${r}-icon`);return A[y]?S(L,{...x,className:l(t.className,E),icon:A[y],size:i,themeColor:a,rotate:s,flip:c,viewBox:u}):S(V,{})}return S(H,{...x,className:l(t.className,E),icon:r,size:i,themeColor:a,rotate:s,flip:c})};m.states=ce;m.options=me;m.defaultOptions=z;m.className=E;m.moduleName=F;m.folderName=P;m.ariaSpec={selector:".k-icon, .k-svg-icon",rules:[{selector:".k-icon, .k-svg-icon",attribute:"aria-hidden=true",usage:"Hides the icon element and all its children from assistive technologies."}]};var B="segmented-control",j=B,q="segmented-control-button",W="segmented-control";import{jsx as J,jsxs as fe}from"react/jsx-runtime";var I="k-segmented-control-button",ue=[N.selected,N.hover,N.focus,N.disabled],pe={},ge={},g=t=>{let{hover:e,focus:i,selected:a,disabled:r,icon:d,text:s,iconClassName:c,...u}=t;return fe("button",{...u,className:l(t.className,I,D(I,{hover:e,focus:i,disabled:r,selected:a})),"aria-pressed":a?"true":"false","aria-disabled":r?"true":void 0,children:[d&&J(m,{className:l(c,"k-segmented-control-button-icon"),icon:d}),(s||t.children)&&J("span",{className:"k-segmented-control-button-text",children:s||t.children})]})};g.states=ue;g.options=pe;g.className=I;g.defaultOptions=ge;g.moduleName=q;g.folderName=W;var R=g;import{jsx as Ne,jsxs as Ce}from"react/jsx-runtime";var k="k-segmented-control",xe=[],he={size:[n.undefined,n.small,n.medium,n.large]},f=t=>{let{size:e,stretched:i,children:a,thumbStyles:r,...d}=t;return Ce("div",{...d,className:l(t.className,k,p(k,{size:e}),{[`${k}-stretched`]:i}),role:"group",children:[Ne("div",{className:"k-segmented-control-thumb","aria-hidden":"true",style:r}),a]})};f.states=xe;f.options=he;f.className=k;f.moduleName=B;f.folderName=j;f.ariaSpec={selector:".k-segmented-control",rules:[{selector:".k-segmented-control",attribute:"role=group",usage:"Sets the proper role for the group of buttons."},{selector:".k-segmented-control-button",attribute:"role=button or nodeName=button",usage:"Each button must have the appropriate button role."},{selector:".k-segmented-control-button.k-selected",attribute:"aria-pressed=true",usage:"Only the selected button within the group will have this attribute set to true."},{selector:".k-segmented-control-button.k-disabled",attribute:"aria-disabled=true",usage:"Indicates that the button is disabled and cannot be interacted with."},{selector:".k-segmented-control-thumb",attribute:"aria-hidden=true",usage:"The thumb is purely decorative and should be hidden from screen readers."}]};var Q=f;import{Fragment as be,jsx as w,jsxs as Se}from"react/jsx-runtime";var mt=t=>w(Q,{...t,children:Se(be,{children:[w(R,{icon:"search",selected:!0,children:"Option 1"}),w(R,{icon:"sparkles",children:"Option 2"})]})});export{mt as SegmentedControlNormal};

package/dist/esm/segmented-control/templates/segmented-control-stretched.mjs

@@ -1 +1 @@
-var l=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((i,a)=>e[a]||e[i]&&i||null).filter(i=>i!==null).join(" "):e).filter(e=>!!e).join(" ");var p=(t,e)=>l({[`${t}-xs`]:e.size==="xsmall",[`${t}-sm`]:e.size==="small",[`${t}-md`]:e.size==="medium",[`${t}-lg`]:e.size==="large",[`${t}-xl`]:e.size==="xlarge",[`${t}-xxl`]:e.size==="xxlarge",[`${t}-xxxl`]:e.size==="xxxlarge"},{[`${t}-${e.fillMode}`]:e.fillMode},{[`${t}-${e.themeColor}`]:e.themeColor},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full","k-rounded-none":e.rounded==="none"}),D=(t,e)=>{let{valid:i,invalid:a,hover:r,focus:d,checked:s,active:c,selected:u,disabled:h,indeterminate:K,loading:y,empty:X,readonly:Y,highlighted:Z,...v}=e;return l({"k-valid":i,"k-invalid":a,"k-hover":r,"k-focus":d,"k-checked":s,"k-active":c,"k-selected":u,"k-disabled":h,"k-indeterminate":K&&!s,"k-loading":y,"k-empty":X,"k-readonly":Y,"k-highlighted":Z},Object.keys(v).reduce((T,x)=>(x.startsWith("k-")?T[x]=v[x]:T[`k-${x}`]=v[x],T),{}))};var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var o={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},N={open:"open",hover:"hover",focus:"focus",active:"active",selected:"selected",disabled:"disabled",valid:"valid",invalid:"invalid",loading:"loading",required:"required",empty:"empty",indeterminate:"indeterminate",checked:"checked",readonly:"readonly",highlighted:"highlighted",generating:"generating",expanded:"expanded"};import{Fragment as ne,jsx as $}from"react/jsx-runtime";var M="k-font-icon",ee=[],te={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},oe={},C=t=>{let{size:e,themeColor:i,icon:a,rotate:r,flip:d,...s}=t;return a?$("span",{...s,className:l(t.className,M,p(M,{size:e}),{[`k-i-${a}`]:a,[`k-color-${i}`]:i,[`k-rotate-${r}`]:r,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):$(ne,{})};C.states=ee;C.options=te;C.className=M;C.defaultOptions=oe;var H=C;import{Fragment as ie,jsx as O}from"react/jsx-runtime";var _="k-svg-icon",re=[],se={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},G={viewBox:"0 0 24 24"},b=t=>{let{size:e,themeColor:i,rotate:a,flip:r,viewBox:d=G.viewBox,icon:s,...c}=t;if(!s)return O(ie,{});if(s==="none")return O("span",{...c,className:l(t.className,_,p("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let u=typeof s=="object"&&s.name&&s.name;return O("span",{...c,className:l(t.className,_,p("k-icon",{size:e}),{[`k-svg-i-${u}`]:u,[`k-color-${i}`]:i,[`k-rotate-${a}`]:a,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),"aria-hidden":"true",children:O("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof s=="object"?s.viewBox:d,dangerouslySetInnerHTML:typeof s=="object"?{__html:s.content}:void 0,children:s?void 0:t.children})})};b.states=re;b.options=se;b.className=_;b.defaultOptions=G;var L=b;import*as A from"@progress/kendo-svg-icons";var F="icon",P="icons";import{useContext as le}from"react";import{createContext as ae}from"react";var U=ae({iconsType:"svg"});import{Fragment as V,jsx as S}from"react/jsx-runtime";var k="k-icon",de=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),ce=[],me={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},I={viewBox:"0 0 24 24",type:"svg"},m=t=>{let{iconsType:e}=le(U),{size:i,themeColor:a,icon:r,type:d=e||I.type,rotate:s,flip:c,viewBox:u=I.viewBox,...h}=t;if(!r)return S(V,{});if((e||d)==="svg"){if(r==="none")return S(L,{...h,className:l(t.className,k),icon:r,size:i});let y=A[r]?r:de(`${r}-icon`);return A[y]?S(L,{...h,className:l(t.className,k),icon:A[y],size:i,themeColor:a,rotate:s,flip:c,viewBox:u}):S(V,{})}return S(H,{...h,className:l(t.className,k),icon:r,size:i,themeColor:a,rotate:s,flip:c})};m.states=ce;m.options=me;m.defaultOptions=I;m.className=k;m.moduleName=F;m.folderName=P;m.ariaSpec={selector:".k-icon, .k-svg-icon",rules:[{selector:".k-icon, .k-svg-icon",attribute:"aria-hidden=true",usage:"Hides the icon element and all its children from assistive technologies."}]};var z="segmented-control",j=z,q="segmented-control-button",W="segmented-control";import{jsx as J,jsxs as fe}from"react/jsx-runtime";var B="k-segmented-control-button",ue=[N.selected,N.hover,N.focus,N.disabled],pe={},ge={},g=t=>{let{hover:e,focus:i,selected:a,disabled:r,icon:d,text:s,iconClassName:c,...u}=t;return fe("button",{...u,className:l(t.className,B,D(B,{hover:e,focus:i,disabled:r,selected:a})),"aria-pressed":a?"true":"false","aria-disabled":r?"true":void 0,children:[d&&J(m,{className:l(c,"k-segmented-control-button-icon"),icon:d}),(s||t.children)&&J("span",{className:"k-segmented-control-button-text",children:s||t.children})]})};g.states=ue;g.options=pe;g.className=B;g.defaultOptions=ge;g.moduleName=q;g.folderName=W;var R=g;import{jsx as Ne,jsxs as Ce}from"react/jsx-runtime";var E="k-segmented-control",he=[],xe={size:[n.undefined,n.small,n.medium,n.large]},f=t=>{let{size:e,stretched:i,children:a,...r}=t;return Ce("div",{...r,className:l(t.className,E,p(E,{size:e}),{[`${E}-stretched`]:i}),role:"group",children:[Ne("div",{className:"k-segmented-control-thumb","aria-hidden":"true"}),a]})};f.states=he;f.options=xe;f.className=E;f.moduleName=z;f.folderName=j;f.ariaSpec={selector:".k-segmented-control",rules:[{selector:".k-segmented-control",attribute:"role=group",usage:"Sets the proper role for the group of buttons."},{selector:".k-segmented-control-button",attribute:"role=button or nodeName=button",usage:"Each button must have the appropriate button role."},{selector:".k-segmented-control-button.k-selected",attribute:"aria-pressed=true",usage:"Only the selected button within the group will have this attribute set to true."},{selector:".k-segmented-control-button.k-disabled",attribute:"aria-disabled=true",usage:"Indicates that the button is disabled and cannot be interacted with."},{selector:".k-segmented-control-thumb",attribute:"aria-hidden=true",usage:"The thumb is purely decorative and should be hidden from screen readers."}]};var Q=f;import{Fragment as be,jsx as w,jsxs as Se}from"react/jsx-runtime";var mt=t=>w(Q,{...t,stretched:!0,children:Se(be,{children:[w(R,{icon:"search",selected:!0,children:"Search"}),w(R,{icon:"sparkles",iconClassName:"k-accent-icon",children:" AI Assistant"})]})});export{mt as SegmentedControlStretched};
+var l=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((i,a)=>e[a]||e[i]&&i||null).filter(i=>i!==null).join(" "):e).filter(e=>!!e).join(" ");var p=(t,e)=>l({[`${t}-xs`]:e.size==="xsmall",[`${t}-sm`]:e.size==="small",[`${t}-md`]:e.size==="medium",[`${t}-lg`]:e.size==="large",[`${t}-xl`]:e.size==="xlarge",[`${t}-xxl`]:e.size==="xxlarge",[`${t}-xxxl`]:e.size==="xxxlarge"},{[`${t}-${e.fillMode}`]:e.fillMode},{[`${t}-${e.themeColor}`]:e.themeColor},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full","k-rounded-none":e.rounded==="none"}),D=(t,e)=>{let{valid:i,invalid:a,hover:r,focus:d,checked:s,active:c,selected:u,disabled:h,indeterminate:K,loading:y,empty:X,readonly:Y,highlighted:Z,...v}=e;return l({"k-valid":i,"k-invalid":a,"k-hover":r,"k-focus":d,"k-checked":s,"k-active":c,"k-selected":u,"k-disabled":h,"k-indeterminate":K&&!s,"k-loading":y,"k-empty":X,"k-readonly":Y,"k-highlighted":Z},Object.keys(v).reduce((T,x)=>(x.startsWith("k-")?T[x]=v[x]:T[`k-${x}`]=v[x],T),{}))};var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var o={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},N={open:"open",hover:"hover",focus:"focus",active:"active",selected:"selected",disabled:"disabled",valid:"valid",invalid:"invalid",loading:"loading",required:"required",empty:"empty",indeterminate:"indeterminate",checked:"checked",readonly:"readonly",highlighted:"highlighted",generating:"generating",expanded:"expanded"};import{Fragment as ne,jsx as $}from"react/jsx-runtime";var M="k-font-icon",ee=[],te={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},oe={},C=t=>{let{size:e,themeColor:i,icon:a,rotate:r,flip:d,...s}=t;return a?$("span",{...s,className:l(t.className,M,p(M,{size:e}),{[`k-i-${a}`]:a,[`k-color-${i}`]:i,[`k-rotate-${r}`]:r,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):$(ne,{})};C.states=ee;C.options=te;C.className=M;C.defaultOptions=oe;var H=C;import{Fragment as ie,jsx as O}from"react/jsx-runtime";var _="k-svg-icon",re=[],se={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},G={viewBox:"0 0 24 24"},b=t=>{let{size:e,themeColor:i,rotate:a,flip:r,viewBox:d=G.viewBox,icon:s,...c}=t;if(!s)return O(ie,{});if(s==="none")return O("span",{...c,className:l(t.className,_,p("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let u=typeof s=="object"&&s.name&&s.name;return O("span",{...c,className:l(t.className,_,p("k-icon",{size:e}),{[`k-svg-i-${u}`]:u,[`k-color-${i}`]:i,[`k-rotate-${a}`]:a,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),"aria-hidden":"true",children:O("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof s=="object"?s.viewBox:d,dangerouslySetInnerHTML:typeof s=="object"?{__html:s.content}:void 0,children:s?void 0:t.children})})};b.states=re;b.options=se;b.className=_;b.defaultOptions=G;var L=b;import*as A from"@progress/kendo-svg-icons";var F="icon",P="icons";import{useContext as le}from"react";import{createContext as ae}from"react";var U=ae({iconsType:"svg"});import{Fragment as V,jsx as S}from"react/jsx-runtime";var k="k-icon",de=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),ce=[],me={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},I={viewBox:"0 0 24 24",type:"svg"},m=t=>{let{iconsType:e}=le(U),{size:i,themeColor:a,icon:r,type:d=e||I.type,rotate:s,flip:c,viewBox:u=I.viewBox,...h}=t;if(!r)return S(V,{});if((e||d)==="svg"){if(r==="none")return S(L,{...h,className:l(t.className,k),icon:r,size:i});let y=A[r]?r:de(`${r}-icon`);return A[y]?S(L,{...h,className:l(t.className,k),icon:A[y],size:i,themeColor:a,rotate:s,flip:c,viewBox:u}):S(V,{})}return S(H,{...h,className:l(t.className,k),icon:r,size:i,themeColor:a,rotate:s,flip:c})};m.states=ce;m.options=me;m.defaultOptions=I;m.className=k;m.moduleName=F;m.folderName=P;m.ariaSpec={selector:".k-icon, .k-svg-icon",rules:[{selector:".k-icon, .k-svg-icon",attribute:"aria-hidden=true",usage:"Hides the icon element and all its children from assistive technologies."}]};var z="segmented-control",j=z,q="segmented-control-button",W="segmented-control";import{jsx as J,jsxs as fe}from"react/jsx-runtime";var B="k-segmented-control-button",ue=[N.selected,N.hover,N.focus,N.disabled],pe={},ge={},g=t=>{let{hover:e,focus:i,selected:a,disabled:r,icon:d,text:s,iconClassName:c,...u}=t;return fe("button",{...u,className:l(t.className,B,D(B,{hover:e,focus:i,disabled:r,selected:a})),"aria-pressed":a?"true":"false","aria-disabled":r?"true":void 0,children:[d&&J(m,{className:l(c,"k-segmented-control-button-icon"),icon:d}),(s||t.children)&&J("span",{className:"k-segmented-control-button-text",children:s||t.children})]})};g.states=ue;g.options=pe;g.className=B;g.defaultOptions=ge;g.moduleName=q;g.folderName=W;var R=g;import{jsx as Ne,jsxs as Ce}from"react/jsx-runtime";var E="k-segmented-control",he=[],xe={size:[n.undefined,n.small,n.medium,n.large]},f=t=>{let{size:e,stretched:i,children:a,thumbStyles:r,...d}=t;return Ce("div",{...d,className:l(t.className,E,p(E,{size:e}),{[`${E}-stretched`]:i}),role:"group",children:[Ne("div",{className:"k-segmented-control-thumb","aria-hidden":"true",style:r}),a]})};f.states=he;f.options=xe;f.className=E;f.moduleName=z;f.folderName=j;f.ariaSpec={selector:".k-segmented-control",rules:[{selector:".k-segmented-control",attribute:"role=group",usage:"Sets the proper role for the group of buttons."},{selector:".k-segmented-control-button",attribute:"role=button or nodeName=button",usage:"Each button must have the appropriate button role."},{selector:".k-segmented-control-button.k-selected",attribute:"aria-pressed=true",usage:"Only the selected button within the group will have this attribute set to true."},{selector:".k-segmented-control-button.k-disabled",attribute:"aria-disabled=true",usage:"Indicates that the button is disabled and cannot be interacted with."},{selector:".k-segmented-control-thumb",attribute:"aria-hidden=true",usage:"The thumb is purely decorative and should be hidden from screen readers."}]};var Q=f;import{Fragment as be,jsx as w,jsxs as Se}from"react/jsx-runtime";var mt=t=>w(Q,{...t,stretched:!0,children:Se(be,{children:[w(R,{icon:"search",selected:!0,children:"Search"}),w(R,{icon:"sparkles",iconClassName:"k-accent-icon",children:" AI Assistant"})]})});export{mt as SegmentedControlStretched};

package/dist/esm/segmented-control/templates/segmented-control-text.mjs

@@ -1 +1 @@
-var l=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((i,a)=>e[a]||e[i]&&i||null).filter(i=>i!==null).join(" "):e).filter(e=>!!e).join(" ");var p=(t,e)=>l({[`${t}-xs`]:e.size==="xsmall",[`${t}-sm`]:e.size==="small",[`${t}-md`]:e.size==="medium",[`${t}-lg`]:e.size==="large",[`${t}-xl`]:e.size==="xlarge",[`${t}-xxl`]:e.size==="xxlarge",[`${t}-xxxl`]:e.size==="xxxlarge"},{[`${t}-${e.fillMode}`]:e.fillMode},{[`${t}-${e.themeColor}`]:e.themeColor},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full","k-rounded-none":e.rounded==="none"}),D=(t,e)=>{let{valid:i,invalid:a,hover:r,focus:d,checked:s,active:c,selected:u,disabled:x,indeterminate:K,loading:O,empty:X,readonly:Y,highlighted:Z,...k}=e;return l({"k-valid":i,"k-invalid":a,"k-hover":r,"k-focus":d,"k-checked":s,"k-active":c,"k-selected":u,"k-disabled":x,"k-indeterminate":K&&!s,"k-loading":O,"k-empty":X,"k-readonly":Y,"k-highlighted":Z},Object.keys(k).reduce((T,h)=>(h.startsWith("k-")?T[h]=k[h]:T[`k-${h}`]=k[h],T),{}))};var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var o={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},N={open:"open",hover:"hover",focus:"focus",active:"active",selected:"selected",disabled:"disabled",valid:"valid",invalid:"invalid",loading:"loading",required:"required",empty:"empty",indeterminate:"indeterminate",checked:"checked",readonly:"readonly",highlighted:"highlighted",generating:"generating",expanded:"expanded"};import{Fragment as ne,jsx as $}from"react/jsx-runtime";var M="k-font-icon",ee=[],te={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},oe={},C=t=>{let{size:e,themeColor:i,icon:a,rotate:r,flip:d,...s}=t;return a?$("span",{...s,className:l(t.className,M,p(M,{size:e}),{[`k-i-${a}`]:a,[`k-color-${i}`]:i,[`k-rotate-${r}`]:r,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):$(ne,{})};C.states=ee;C.options=te;C.className=M;C.defaultOptions=oe;var H=C;import{Fragment as ie,jsx as y}from"react/jsx-runtime";var _="k-svg-icon",re=[],se={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},G={viewBox:"0 0 24 24"},b=t=>{let{size:e,themeColor:i,rotate:a,flip:r,viewBox:d=G.viewBox,icon:s,...c}=t;if(!s)return y(ie,{});if(s==="none")return y("span",{...c,className:l(t.className,_,p("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let u=typeof s=="object"&&s.name&&s.name;return y("span",{...c,className:l(t.className,_,p("k-icon",{size:e}),{[`k-svg-i-${u}`]:u,[`k-color-${i}`]:i,[`k-rotate-${a}`]:a,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),"aria-hidden":"true",children:y("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof s=="object"?s.viewBox:d,dangerouslySetInnerHTML:typeof s=="object"?{__html:s.content}:void 0,children:s?void 0:t.children})})};b.states=re;b.options=se;b.className=_;b.defaultOptions=G;var L=b;import*as A from"@progress/kendo-svg-icons";var F="icon",P="icons";import{useContext as le}from"react";import{createContext as ae}from"react";var U=ae({iconsType:"svg"});import{Fragment as V,jsx as S}from"react/jsx-runtime";var E="k-icon",de=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),ce=[],me={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},z={viewBox:"0 0 24 24",type:"svg"},m=t=>{let{iconsType:e}=le(U),{size:i,themeColor:a,icon:r,type:d=e||z.type,rotate:s,flip:c,viewBox:u=z.viewBox,...x}=t;if(!r)return S(V,{});if((e||d)==="svg"){if(r==="none")return S(L,{...x,className:l(t.className,E),icon:r,size:i});let O=A[r]?r:de(`${r}-icon`);return A[O]?S(L,{...x,className:l(t.className,E),icon:A[O],size:i,themeColor:a,rotate:s,flip:c,viewBox:u}):S(V,{})}return S(H,{...x,className:l(t.className,E),icon:r,size:i,themeColor:a,rotate:s,flip:c})};m.states=ce;m.options=me;m.defaultOptions=z;m.className=E;m.moduleName=F;m.folderName=P;m.ariaSpec={selector:".k-icon, .k-svg-icon",rules:[{selector:".k-icon, .k-svg-icon",attribute:"aria-hidden=true",usage:"Hides the icon element and all its children from assistive technologies."}]};var B="segmented-control",j=B,q="segmented-control-button",W="segmented-control";import{jsx as J,jsxs as fe}from"react/jsx-runtime";var I="k-segmented-control-button",ue=[N.selected,N.hover,N.focus,N.disabled],pe={},ge={},g=t=>{let{hover:e,focus:i,selected:a,disabled:r,icon:d,text:s,iconClassName:c,...u}=t;return fe("button",{...u,className:l(t.className,I,D(I,{hover:e,focus:i,disabled:r,selected:a})),"aria-pressed":a?"true":"false","aria-disabled":r?"true":void 0,children:[d&&J(m,{className:l(c,"k-segmented-control-button-icon"),icon:d}),(s||t.children)&&J("span",{className:"k-segmented-control-button-text",children:s||t.children})]})};g.states=ue;g.options=pe;g.className=I;g.defaultOptions=ge;g.moduleName=q;g.folderName=W;var R=g;import{jsx as Ne,jsxs as Ce}from"react/jsx-runtime";var v="k-segmented-control",xe=[],he={size:[n.undefined,n.small,n.medium,n.large]},f=t=>{let{size:e,stretched:i,children:a,...r}=t;return Ce("div",{...r,className:l(t.className,v,p(v,{size:e}),{[`${v}-stretched`]:i}),role:"group",children:[Ne("div",{className:"k-segmented-control-thumb","aria-hidden":"true"}),a]})};f.states=xe;f.options=he;f.className=v;f.moduleName=B;f.folderName=j;f.ariaSpec={selector:".k-segmented-control",rules:[{selector:".k-segmented-control",attribute:"role=group",usage:"Sets the proper role for the group of buttons."},{selector:".k-segmented-control-button",attribute:"role=button or nodeName=button",usage:"Each button must have the appropriate button role."},{selector:".k-segmented-control-button.k-selected",attribute:"aria-pressed=true",usage:"Only the selected button within the group will have this attribute set to true."},{selector:".k-segmented-control-button.k-disabled",attribute:"aria-disabled=true",usage:"Indicates that the button is disabled and cannot be interacted with."},{selector:".k-segmented-control-thumb",attribute:"aria-hidden=true",usage:"The thumb is purely decorative and should be hidden from screen readers."}]};var Q=f;import{Fragment as be,jsx as w,jsxs as Se}from"react/jsx-runtime";var mt=t=>w(Q,{...t,children:Se(be,{children:[w(R,{selected:!0,children:"Option 1"}),w(R,{children:"Option 2"})]})});export{mt as SegmentedControlText};
+var l=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((i,a)=>e[a]||e[i]&&i||null).filter(i=>i!==null).join(" "):e).filter(e=>!!e).join(" ");var p=(t,e)=>l({[`${t}-xs`]:e.size==="xsmall",[`${t}-sm`]:e.size==="small",[`${t}-md`]:e.size==="medium",[`${t}-lg`]:e.size==="large",[`${t}-xl`]:e.size==="xlarge",[`${t}-xxl`]:e.size==="xxlarge",[`${t}-xxxl`]:e.size==="xxxlarge"},{[`${t}-${e.fillMode}`]:e.fillMode},{[`${t}-${e.themeColor}`]:e.themeColor},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full","k-rounded-none":e.rounded==="none"}),D=(t,e)=>{let{valid:i,invalid:a,hover:r,focus:d,checked:s,active:c,selected:u,disabled:x,indeterminate:K,loading:y,empty:X,readonly:Y,highlighted:Z,...v}=e;return l({"k-valid":i,"k-invalid":a,"k-hover":r,"k-focus":d,"k-checked":s,"k-active":c,"k-selected":u,"k-disabled":x,"k-indeterminate":K&&!s,"k-loading":y,"k-empty":X,"k-readonly":Y,"k-highlighted":Z},Object.keys(v).reduce((T,h)=>(h.startsWith("k-")?T[h]=v[h]:T[`k-${h}`]=v[h],T),{}))};var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var o={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},N={open:"open",hover:"hover",focus:"focus",active:"active",selected:"selected",disabled:"disabled",valid:"valid",invalid:"invalid",loading:"loading",required:"required",empty:"empty",indeterminate:"indeterminate",checked:"checked",readonly:"readonly",highlighted:"highlighted",generating:"generating",expanded:"expanded"};import{Fragment as ne,jsx as $}from"react/jsx-runtime";var M="k-font-icon",ee=[],te={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},oe={},C=t=>{let{size:e,themeColor:i,icon:a,rotate:r,flip:d,...s}=t;return a?$("span",{...s,className:l(t.className,M,p(M,{size:e}),{[`k-i-${a}`]:a,[`k-color-${i}`]:i,[`k-rotate-${r}`]:r,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):$(ne,{})};C.states=ee;C.options=te;C.className=M;C.defaultOptions=oe;var H=C;import{Fragment as ie,jsx as O}from"react/jsx-runtime";var _="k-svg-icon",re=[],se={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},G={viewBox:"0 0 24 24"},b=t=>{let{size:e,themeColor:i,rotate:a,flip:r,viewBox:d=G.viewBox,icon:s,...c}=t;if(!s)return O(ie,{});if(s==="none")return O("span",{...c,className:l(t.className,_,p("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let u=typeof s=="object"&&s.name&&s.name;return O("span",{...c,className:l(t.className,_,p("k-icon",{size:e}),{[`k-svg-i-${u}`]:u,[`k-color-${i}`]:i,[`k-rotate-${a}`]:a,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),"aria-hidden":"true",children:O("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof s=="object"?s.viewBox:d,dangerouslySetInnerHTML:typeof s=="object"?{__html:s.content}:void 0,children:s?void 0:t.children})})};b.states=re;b.options=se;b.className=_;b.defaultOptions=G;var L=b;import*as A from"@progress/kendo-svg-icons";var F="icon",P="icons";import{useContext as le}from"react";import{createContext as ae}from"react";var U=ae({iconsType:"svg"});import{Fragment as V,jsx as S}from"react/jsx-runtime";var E="k-icon",de=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),ce=[],me={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},z={viewBox:"0 0 24 24",type:"svg"},m=t=>{let{iconsType:e}=le(U),{size:i,themeColor:a,icon:r,type:d=e||z.type,rotate:s,flip:c,viewBox:u=z.viewBox,...x}=t;if(!r)return S(V,{});if((e||d)==="svg"){if(r==="none")return S(L,{...x,className:l(t.className,E),icon:r,size:i});let y=A[r]?r:de(`${r}-icon`);return A[y]?S(L,{...x,className:l(t.className,E),icon:A[y],size:i,themeColor:a,rotate:s,flip:c,viewBox:u}):S(V,{})}return S(H,{...x,className:l(t.className,E),icon:r,size:i,themeColor:a,rotate:s,flip:c})};m.states=ce;m.options=me;m.defaultOptions=z;m.className=E;m.moduleName=F;m.folderName=P;m.ariaSpec={selector:".k-icon, .k-svg-icon",rules:[{selector:".k-icon, .k-svg-icon",attribute:"aria-hidden=true",usage:"Hides the icon element and all its children from assistive technologies."}]};var B="segmented-control",j=B,q="segmented-control-button",W="segmented-control";import{jsx as J,jsxs as fe}from"react/jsx-runtime";var I="k-segmented-control-button",ue=[N.selected,N.hover,N.focus,N.disabled],pe={},ge={},g=t=>{let{hover:e,focus:i,selected:a,disabled:r,icon:d,text:s,iconClassName:c,...u}=t;return fe("button",{...u,className:l(t.className,I,D(I,{hover:e,focus:i,disabled:r,selected:a})),"aria-pressed":a?"true":"false","aria-disabled":r?"true":void 0,children:[d&&J(m,{className:l(c,"k-segmented-control-button-icon"),icon:d}),(s||t.children)&&J("span",{className:"k-segmented-control-button-text",children:s||t.children})]})};g.states=ue;g.options=pe;g.className=I;g.defaultOptions=ge;g.moduleName=q;g.folderName=W;var R=g;import{jsx as Ne,jsxs as Ce}from"react/jsx-runtime";var k="k-segmented-control",xe=[],he={size:[n.undefined,n.small,n.medium,n.large]},f=t=>{let{size:e,stretched:i,children:a,thumbStyles:r,...d}=t;return Ce("div",{...d,className:l(t.className,k,p(k,{size:e}),{[`${k}-stretched`]:i}),role:"group",children:[Ne("div",{className:"k-segmented-control-thumb","aria-hidden":"true",style:r}),a]})};f.states=xe;f.options=he;f.className=k;f.moduleName=B;f.folderName=j;f.ariaSpec={selector:".k-segmented-control",rules:[{selector:".k-segmented-control",attribute:"role=group",usage:"Sets the proper role for the group of buttons."},{selector:".k-segmented-control-button",attribute:"role=button or nodeName=button",usage:"Each button must have the appropriate button role."},{selector:".k-segmented-control-button.k-selected",attribute:"aria-pressed=true",usage:"Only the selected button within the group will have this attribute set to true."},{selector:".k-segmented-control-button.k-disabled",attribute:"aria-disabled=true",usage:"Indicates that the button is disabled and cannot be interacted with."},{selector:".k-segmented-control-thumb",attribute:"aria-hidden=true",usage:"The thumb is purely decorative and should be hidden from screen readers."}]};var Q=f;import{Fragment as be,jsx as w,jsxs as Se}from"react/jsx-runtime";var mt=t=>w(Q,{...t,children:Se(be,{children:[w(R,{selected:!0,children:"Option 1"}),w(R,{children:"Option 2"})]})});export{mt as SegmentedControlText};

package/dist/types/segmented-control/segmented-control.spec.d.ts

@@ -10,6 +10,7 @@ export type KendoSegmentedControlOptions = {
 export type KendoSegmentedControlProps = KendoSegmentedControlOptions & {
     stretched?: boolean;
     children?: React.ReactNode;
+    thumbStyles?: React.CSSProperties;
 };
 export type KendoSegmentedControlState = {
     [K in (typeof states)[number]]?: boolean;

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": "13.2.0-dev.2",
+  "version": "13.2.0-dev.3",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -62,5 +62,5 @@
     "react-dom": "^19.0.0",
     "vitest": "^4.0.18"
   },
-  "gitHead": "2391ae0f9412058a616e592247c530e1f133ce2b"
+  "gitHead": "5487edc15973af51b6b452b987a8cb020d654a57"
 }

package/src/action-sheet/tests/action-sheet-date-time-selector.tsx

@@ -1,6 +1,7 @@
 import { ActionSheet, ActionSheetFooter, ActionSheetHeader } from '../../action-sheet';
 import { Button } from '../../button';
 import { CalendarNormal } from '../../calendar';
+import { SegmentedControl, SegmentedControlButton } from '../../segmented-control';
 import { TimeSelector, TimeSelectorHeader } from '../../time-selector';
 
 
@@ -44,10 +45,10 @@ export default () => (
                 >
                     <div className="k-datetime-wrap k-date-tab">
                         <div className="k-datetime-buttongroup">
-                            <div className="k-button-group k-button-group-stretched">
-                                <Button className="k-group-start" size="large" selected>Date</Button>
-                                <Button className="k-group-end" size="large">Time</Button>
-                            </div>
+                            <SegmentedControl thumbStyles={{ width: "50%" }} stretched size="large">
+                                <SegmentedControlButton selected>Date</SegmentedControlButton>
+                                <SegmentedControlButton>Time</SegmentedControlButton>
+                            </SegmentedControl>
                         </div>
                         <div className="k-datetime-selector">
                             <div className="k-datetime-calendar-wrap">
@@ -79,10 +80,10 @@ export default () => (
                 >
                     <div className="k-datetime-wrap k-time-tab">
                         <div className="k-datetime-buttongroup">
-                            <div className="k-button-group k-button-group-stretched">
-                                <Button className="k-group-start" size="large">Date</Button>
-                                <Button className="k-group-end" size="large" selected>Time</Button>
-                            </div>
+                            <SegmentedControl thumbStyles={{ width: "50%", left: "50%" }} stretched size="large">
+                                <SegmentedControlButton>Date</SegmentedControlButton>
+                                <SegmentedControlButton selected>Time</SegmentedControlButton>
+                            </SegmentedControl>
                         </div>
                         <div className="k-datetime-selector">
                             <div className="k-datetime-calendar-wrap">

package/src/datetime-selector/datetime-selector.spec.tsx

@@ -1,7 +1,7 @@
 import { ActionButtons } from '../action-buttons';
 import { Button } from '../button';
-import { ButtonGroup } from '../button-group';
 import { CalendarNormal } from '../calendar';
+import { SegmentedControl, SegmentedControlButton } from '../segmented-control';
 import { TimeSelector, TimeSelectorHeader } from '../time-selector';
 import { classNames, optionClassNames, Size } from '../misc';
 
@@ -59,11 +59,11 @@ export const DateTimeSelector: KendoComponent<KendoDateTimeSelectorProps & React
             )}
             role="group"
             aria-label="Date and time selector">
-            <div className="k-datetime-buttongroup" role="tablist">
-                <ButtonGroup stretched role="presentation">
-                    <Button className="k-group-start" size={size} selected={tab === 'date'} role="tab" aria-selected={tab === 'date' ? 'true' : 'false'}>Date</Button>
-                    <Button className="k-group-end" size={size} selected={tab === 'time'} role="tab" aria-selected={tab === 'time' ? 'true' : 'false'}>Time</Button>
-                </ButtonGroup>
+            <div className="k-datetime-buttongroup">
+                <SegmentedControl stretched thumbStyles={tab === 'date' ? { width: "50%" } : { width: "50%", left: "50%" }} size={size}>
+                    <SegmentedControlButton selected={tab === 'date'}>Date</SegmentedControlButton>
+                    <SegmentedControlButton selected={tab === 'time'}>Time</SegmentedControlButton>
+                </SegmentedControl>
             </div>
             <div className="k-datetime-selector">
                 {tab === 'time'
@@ -119,9 +119,8 @@ DateTimeSelector.ariaSpec = {
     rules: [
         { selector: '.k-datetime-wrap', attribute: 'role=group', usage: 'Groups the date/time selector components.' },
         { selector: '.k-datetime-wrap', attribute: 'aria-label', usage: 'Describes the date/time selector purpose.' },
-        { selector: '.k-datetime-buttongroup', attribute: 'role=tablist', usage: 'The buttongroup acts as a tablist for Date/Time tabs.' },
-        { selector: '.k-datetime-buttongroup .k-button', attribute: 'role=tab', usage: 'Each tab button has role=tab.' },
-        { selector: '.k-datetime-buttongroup .k-button', attribute: 'aria-selected', usage: 'Indicates which tab is currently active.' },
+        { selector: '.k-datetime-buttongroup', attribute: 'role=group', usage: 'The segmented control acts as a group for Date/Time selection.' },
+        { selector: '.k-datetime-buttongroup .k-segmented-control-button', attribute: 'aria-pressed', usage: 'Indicates which option is currently active.' },
     ]
 };
 

package/src/grid/templates/grid-with-pinned-rows-pin-column.tsx

@@ -60,7 +60,7 @@ export const GridWithPinnedRowsPinColumn = ({ contentClassName, ...other }: any)
                                         <TableRow className="k-master-row" role="row" aria-rowindex={1}>
                                             {/* Pin column cell — announces context menu; icon is decorative */}
                                             <TableTd role="gridcell" aria-colindex={1} aria-haspopup="menu" aria-controls={ctxMenuId} aria-expanded="true">
-                                                <span className="k-pin-cell"><Icon icon="unpin-outline" /></span>
+                                                <span className="k-pin-cell"><Icon icon="unpin-outline" className="k-action-icon" /></span>
                                             </TableTd>
                                             <TableTd role="gridcell" aria-colindex={2}>Shelden Greyes</TableTd>
                                             <TableTd role="gridcell" aria-colindex={3}>Operator</TableTd>
@@ -92,7 +92,7 @@ export const GridWithPinnedRowsPinColumn = ({ contentClassName, ...other }: any)
                                         </TableRow>
                                         <TableRow className="k-master-row k-pinned-source" role="row" alt aria-rowindex={3}>
                                             <TableTd role="gridcell" aria-colindex={1} aria-haspopup="menu" aria-controls={ctxMenuId} aria-expanded="false">
-                                                <span className="k-pin-cell"><Icon icon="unpin-outline" /></span>
+                                                <span className="k-pin-cell"><Icon icon="unpin-outline" className="k-action-icon" /></span>
                                             </TableTd>
                                             <TableTd role="gridcell" aria-colindex={2}>Shelden Greyes</TableTd>
                                             <TableTd role="gridcell" aria-colindex={3}>Operator</TableTd>

package/src/grid/tests/grid-row-pinning-with-sticky-grouping.tsx

@@ -64,7 +64,7 @@ export default () => (
                   <TableRow className="k-table-group-row k-grouping-row">
                     <TableTd colspan={7}>
                       <p className="k-reset">
-                        <Icon icon="unpin-outline" />
+                        <Icon icon="unpin-outline" className="k-action-icon" />
                         Rating 1/5
                       </p>
                     </TableTd>

package/src/grid/tests/grid-row-pinning.tsx

@@ -327,7 +327,7 @@ export default () => (
                 </colgroup>
                 <TableTbody>
                   <TableRow className="k-master-row">
-                    <TableTd><span className="k-pin-cell"><Icon icon="unpin-outline" /></span></TableTd>
+                    <TableTd><span className="k-pin-cell"><Icon icon="unpin-outline" className="k-action-icon" /></span></TableTd>
                     <TableTd>Shelden Greyes</TableTd>
                     <TableTd>Operator</TableTd>
                     <TableTd>UK</TableTd>
@@ -353,7 +353,7 @@ export default () => (
                     <TableTd>USA</TableTd>
                   </TableRow>
                   <TableRow className="k-master-row k-pinned-source" alt>
-                    <TableTd><span className="k-pin-cell"><Icon icon="unpin-outline" /></span></TableTd>
+                    <TableTd><span className="k-pin-cell"><Icon icon="unpin-outline" className="k-action-icon" /></span></TableTd>
                     <TableTd>Shelden Greyes</TableTd>
                     <TableTd>Operator</TableTd>
                     <TableTd>UK</TableTd>
@@ -410,7 +410,7 @@ export default () => (
                     <TableTd>USA</TableTd>
                   </TableRow>
                   <TableRow className="k-master-row k-pinned-source" alt>
-                    <TableTd><span className="k-pin-cell"><Icon icon="unpin-outline" /></span></TableTd>
+                    <TableTd><span className="k-pin-cell"><Icon icon="unpin-outline" className="k-action-icon" /></span></TableTd>
                     <TableTd>Shelden Greyes</TableTd>
                     <TableTd>Operator</TableTd>
                     <TableTd>UK</TableTd>
@@ -437,7 +437,7 @@ export default () => (
                 </colgroup>
                 <TableTbody>
                   <TableRow className="k-master-row">
-                    <TableTd><span className="k-pin-cell"><Icon icon="unpin-outline" /></span></TableTd>
+                    <TableTd><span className="k-pin-cell"><Icon icon="unpin-outline" className="k-action-icon" /></span></TableTd>
                     <TableTd>Shelden Greyes</TableTd>
                     <TableTd>Operator</TableTd>
                     <TableTd>UK</TableTd>
@@ -544,7 +544,7 @@ export default () => (
                 </colgroup>
                 <TableTbody>
                   <TableRow className="k-master-row">
-                    <TableTd><span className="k-pin-cell"><Icon icon="unpin-outline" /><Icon icon="pin-outline-bottom" /></span></TableTd>
+                    <TableTd><span className="k-pin-cell"><Icon icon="unpin-outline" className="k-action-icon" /><Icon icon="pin-outline-bottom" /></span></TableTd>
                     <TableTd>Shelden Greyes</TableTd>
                     <TableTd>Operator</TableTd>
                     <TableTd>UK</TableTd>
@@ -570,7 +570,7 @@ export default () => (
                     <TableTd>USA</TableTd>
                   </TableRow>
                   <TableRow className="k-master-row k-pinned-source" alt>
-                    <TableTd><span className="k-pin-cell"><Icon icon="unpin-outline" /><Icon icon="pin-outline-bottom" /></span></TableTd>
+                    <TableTd><span className="k-pin-cell"><Icon icon="unpin-outline" className="k-action-icon" /><Icon icon="pin-outline-bottom" /></span></TableTd>
                     <TableTd>Shelden Greyes</TableTd>
                     <TableTd>Operator</TableTd>
                     <TableTd>UK</TableTd>
@@ -627,7 +627,7 @@ export default () => (
                     <TableTd>USA</TableTd>
                   </TableRow>
                   <TableRow className="k-master-row k-pinned-source" alt>
-                    <TableTd><span className="k-pin-cell"><Icon icon="pin-outline-top" /><Icon icon="unpin-outline" /></span></TableTd>
+                    <TableTd><span className="k-pin-cell"><Icon icon="pin-outline-top" /><Icon icon="unpin-outline" className="k-action-icon" /></span></TableTd>
                     <TableTd>Shelden Greyes</TableTd>
                     <TableTd>Operator</TableTd>
                     <TableTd>UK</TableTd>
@@ -654,7 +654,7 @@ export default () => (
                 </colgroup>
                 <TableTbody>
                   <TableRow className="k-master-row">
-                    <TableTd><span className="k-pin-cell"><Icon icon="pin-outline-top" /><Icon icon="unpin-outline" /></span></TableTd>
+                    <TableTd><span className="k-pin-cell"><Icon icon="pin-outline-top" /><Icon icon="unpin-outline" className="k-action-icon" /></span></TableTd>
                     <TableTd>Shelden Greyes</TableTd>
                     <TableTd>Operator</TableTd>
                     <TableTd>UK</TableTd>

package/src/imageeditor/templates/imageeditor-crop.tsx

@@ -1,10 +1,10 @@
 import { ImageEditor } from "..";
 import { Button } from "../../button";
-import { ButtonGroup } from "../../button-group";
 import { CheckboxWithLabelAfter } from "../../checkbox";
 import { DropdownList } from "../../dropdownlist";
 import { FormNormal, Fieldset, FormField } from "../../form";
 import { NumericTextbox } from "../../numerictextbox";
+import { SegmentedControl, SegmentedControlButton } from "../../segmented-control";
 import { ToolbarSeparator, ToolbarItem } from "../../toolbar";
 
 export const ImageEditorCrop = (props: any) => (
@@ -41,10 +41,10 @@ export const ImageEditorCrop = (props: any) => (
                         colSpan="2"
                         label="Orientation:"
                         editor={
-                            <ButtonGroup>
-                                <Button className="k-group-start" selected>Portrait</Button>
-                                <Button className="k-group-end">Landscape</Button>
-                            </ButtonGroup>
+                            <SegmentedControl thumbStyles={{ width: "50%" }} stretched>
+                                <SegmentedControlButton selected>Portrait</SegmentedControlButton>
+                                <SegmentedControlButton>Landscape</SegmentedControlButton>
+                            </SegmentedControl>
                         }
                     />
                     <FormField

package/src/scheduler/scheduler-toolbar.spec.tsx

@@ -1,6 +1,7 @@
 import { Button } from '../button';
 import { ButtonGroup } from '../button-group';
 import { classNames } from '../misc';
+import { SegmentedControl, SegmentedControlButton } from '../segmented-control';
 import { Toolbar, KendoToolbarProps } from '../toolbar';
 
 import { KendoComponent } from '../_types/component';
@@ -39,13 +40,13 @@ export const SchedulerToolbar: KendoComponent<KendoSchedulerToolbarProps & React
                         Monday, June 13, 2022
                     </Button>,
                     <span key="spacer" className="k-spacer"></span>,
-                    <ButtonGroup key="views" className="k-scheduler-views">
-                        <Button className="k-group-start" selected>Day</Button>
-                        <Button>Week</Button>
-                        <Button>Month</Button>
-                        <Button>Timeline</Button>
-                        <Button className="k-group-end">Agenda</Button>
-                    </ButtonGroup>
+                    <SegmentedControl key="views" thumbStyles={{ width: "15%", left: "2px" }} className="k-scheduler-views">
+                        <SegmentedControlButton selected>Day</SegmentedControlButton>
+                        <SegmentedControlButton>Week</SegmentedControlButton>
+                        <SegmentedControlButton>Month</SegmentedControlButton>
+                        <SegmentedControlButton>Timeline</SegmentedControlButton>
+                        <SegmentedControlButton>Agenda</SegmentedControlButton>
+                    </SegmentedControl>
                 ]
             }
         </Toolbar>

package/src/scheduler/scheduler.spec.tsx

@@ -95,10 +95,9 @@ Scheduler.ariaSpec = {
         // Toolbar tools: views dropdown (select element on small screens)
         { selector: '.k-views-dropdown', attribute: 'aria-label', usage: 'The <select> element visible on the toolbar on small screens must have its aria-label set.' },
 
-        // View selector ButtonGroup — follows ButtonGroup spec (buttongroup_aria.md)
-        // The view selector ButtonGroup follows the ButtonGroup accessibility specification.
-        { selector: '.k-scheduler-views', attribute: 'role=group', usage: 'Follows ButtonGroup spec: sets the proper role for the group of view buttons.' },
-        { selector: '.k-scheduler-views .k-button', attribute: 'aria-pressed (when selected)', usage: 'Follows ButtonGroup spec: specifies the current state of the view ButtonGroup. Only the selected button within the group will have this attribute set to true.' },
+        // View selector SegmentedControl — follows SegmentedControl accessibility specification.
+        { selector: '.k-scheduler-views', attribute: 'role=group', usage: 'Follows SegmentedControl spec: sets the proper role for the group of view buttons.' },
+        { selector: '.k-scheduler-views .k-segmented-control-button', attribute: 'aria-pressed (when selected)', usage: 'Follows SegmentedControl spec: specifies the current state of the view SegmentedControl. Only the selected button within the group will have this attribute set to true.' },
 
         // Agenda view — grid roles
         { selector: '.k-scheduler-agendaview', attribute: 'role=grid', usage: 'The main table of the Agenda view must indicate it is a Data Grid.' },

package/src/scheduler/templates/scheduler-agenda.tsx

@@ -1,5 +1,6 @@
 import { ButtonGroup } from '../../button-group';
 import { Button } from '../../button';
+import { SegmentedControl, SegmentedControlButton } from '../../segmented-control';
 import { Scheduler, SchedulerBody, SchedulerCell, SchedulerContent, SchedulerHead, SchedulerHeader, SchedulerTable, SchedulerToolbar } from '../index';
 import SchedulerTask from '../scheduler-task.spec';
 
@@ -19,13 +20,13 @@ export const SchedulerAgenda = ({ style, ...props }: any) => (
                     06/13/2022 - 06/20/2022
                 </Button>
                 <span className="k-spacer"></span>
-                <ButtonGroup className="k-scheduler-views">
-                    <Button className="k-group-start">Day</Button>
-                    <Button>Week</Button>
-                    <Button>Month</Button>
-                    <Button>Timeline</Button>
-                    <Button className="k-group-end" selected>Agenda</Button>
-                </ButtonGroup>
+                <SegmentedControl thumbStyles={{ width: "22%", right: "2px" }} className="k-scheduler-views">
+                    <SegmentedControlButton>Day</SegmentedControlButton>
+                    <SegmentedControlButton>Week</SegmentedControlButton>
+                    <SegmentedControlButton>Month</SegmentedControlButton>
+                    <SegmentedControlButton>Timeline</SegmentedControlButton>
+                    <SegmentedControlButton selected>Agenda</SegmentedControlButton>
+                </SegmentedControl>
             </SchedulerToolbar>
         }
         children={

package/src/scheduler/templates/scheduler-flex-agenda.tsx

@@ -1,5 +1,6 @@
 import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
+import { SegmentedControl, SegmentedControlButton } from '../../segmented-control';
 import { Scheduler, SchedulerHead, SchedulerBody, SchedulerRow, SchedulerToolbar, SchedulerCell, SchedulerGroup, SchedulerTask } from '../index';
 
 export const SchedulerFlexAgenda = ({ style, ...props }: any) => (
@@ -18,13 +19,13 @@ export const SchedulerFlexAgenda = ({ style, ...props }: any) => (
                     6/24/2024 - 6/25/2024
                 </Button>
                 <span className="k-spacer"></span>
-                <ButtonGroup className="k-scheduler-views">
-                    <Button className="k-group-start">Day</Button>
-                    <Button>Week</Button>
-                    <Button>Month</Button>
-                    <Button>Timeline</Button>
-                    <Button className="k-group-end" selected>Agenda</Button>
-                </ButtonGroup>
+                <SegmentedControl thumbStyles={{ width: "22%", right: "2px" }}  className="k-scheduler-views">
+                    <SegmentedControlButton>Day</SegmentedControlButton>
+                    <SegmentedControlButton>Week</SegmentedControlButton>
+                    <SegmentedControlButton>Month</SegmentedControlButton>
+                    <SegmentedControlButton>Timeline</SegmentedControlButton>
+                    <SegmentedControlButton selected>Agenda</SegmentedControlButton>
+                </SegmentedControl>
             </SchedulerToolbar>
         }
         children={