@siemens/ix-docs 4.0.0 → 4.1.0

package/build/static/demo/v2/preview/mobile/assets/{index7-DYhhjCCN.js → index7-BSu8Jcfp.js}

@@ -1,3 +1,3 @@
-import{d as f,p as b}from"./index-CMU7wxQd.js";/*!
+import{d as f,p as b}from"./index-Cz_xGxp8.js";/*!
  * (C) Ionic http://ionicframework.com - MIT License
  */const _=n=>{if(f===void 0)return;let o=0,t,s,a;const R=n.getBoolean("animated",!0)&&n.getBoolean("rippleEffect",!0),d=new WeakMap,u=()=>{a&&clearTimeout(a),a=void 0,t&&(m(!1),t=void 0)},h=e=>{t||e.button===2||p(g(e),e)},w=e=>{p(void 0,e)},p=(e,i)=>{if(e&&e===t)return;a&&clearTimeout(a),a=void 0;const{x:c,y:r}=b(i);if(t){if(d.has(t))throw new Error("internal error");t.classList.contains(l)||v(t,c,r),m(!0)}if(e){const A=d.get(e);A&&(clearTimeout(A),d.delete(e)),e.classList.remove(l);const T=()=>{v(e,c,r),a=void 0};L(e)?T():a=setTimeout(T,S)}t=e},v=(e,i,c)=>{if(o=Date.now(),e.classList.add(l),!R)return;const r=C(e);r!==null&&(E(),s=r.addRipple(i,c))},E=()=>{s!==void 0&&(s.then(e=>e()),s=void 0)},m=e=>{E();const i=t;if(!i)return;const c=D-Date.now()+o;if(e&&c>0&&!L(i)){const r=setTimeout(()=>{i.classList.remove(l),d.delete(i)},D);d.set(i,r)}else i.classList.remove(l)};f.addEventListener("ionGestureCaptured",u),f.addEventListener("pointerdown",h,!0),f.addEventListener("pointerup",w,!0),f.addEventListener("pointercancel",u,!0)},g=n=>{if(n.composedPath!==void 0){const o=n.composedPath();for(let t=0;t<o.length-2;t++){const s=o[t];if(!(s instanceof ShadowRoot)&&s.classList.contains("ion-activatable"))return s}}else return n.target.closest(".ion-activatable")},L=n=>n.classList.contains("ion-activatable-instant"),C=n=>{if(n.shadowRoot){const o=n.shadowRoot.querySelector("ion-ripple-effect");if(o)return o}return n.querySelector("ion-ripple-effect")},l="ion-activated",S=100,D=150;export{_ as startTapClick};

package/build/static/demo/v2/preview/mobile/assets/{index7-legacy-XdaVDr-s.js → index7-legacy-Cv6jNav4.js}

@@ -1,4 +1,4 @@
-System.register(["./index-legacy-BwOiApdE.js"],(function(e,t){"use strict";var o,n;return{setters:[e=>{o=e.d,n=e.p}],execute:function(){e("startTapClick",(e=>{if(void 0===o)return;let d,l,u,f=0;const v=e.getBoolean("animated",!0)&&e.getBoolean("rippleEffect",!0),p=new WeakMap,m=()=>{u&&clearTimeout(u),u=void 0,d&&(g(!1),d=void 0)},L=(e,t)=>{if(e&&e===d)return;u&&clearTimeout(u),u=void 0;const{x:o,y:s}=n(t);if(d){if(p.has(d))throw new Error("internal error");d.classList.contains(r)||h(d,o,s),g(!0)}if(e){const t=p.get(e);t&&(clearTimeout(t),p.delete(e)),e.classList.remove(r);const n=()=>{h(e,o,s),u=void 0};i(e)?n():u=setTimeout(n,a)}d=e},h=(e,t,o)=>{if(f=Date.now(),e.classList.add(r),!v)return;const n=s(e);null!==n&&(w(),l=n.addRipple(t,o))},w=()=>{void 0!==l&&(l.then((e=>e())),l=void 0)},g=e=>{w();const t=d;if(!t)return;const o=c-Date.now()+f;if(e&&o>0&&!i(t)){const e=setTimeout((()=>{t.classList.remove(r),p.delete(t)}),c);p.set(t,e)}else t.classList.remove(r)};o.addEventListener("ionGestureCaptured",m),o.addEventListener("pointerdown",(e=>{d||2===e.button||L(t(e),e)}),!0),o.addEventListener("pointerup",(e=>{L(void 0,e)}),!0),o.addEventListener("pointercancel",m,!0)}));
+System.register(["./index-legacy-BQCo13yp.js"],(function(e,t){"use strict";var o,n;return{setters:[e=>{o=e.d,n=e.p}],execute:function(){e("startTapClick",(e=>{if(void 0===o)return;let d,l,u,f=0;const v=e.getBoolean("animated",!0)&&e.getBoolean("rippleEffect",!0),p=new WeakMap,m=()=>{u&&clearTimeout(u),u=void 0,d&&(g(!1),d=void 0)},L=(e,t)=>{if(e&&e===d)return;u&&clearTimeout(u),u=void 0;const{x:o,y:s}=n(t);if(d){if(p.has(d))throw new Error("internal error");d.classList.contains(r)||h(d,o,s),g(!0)}if(e){const t=p.get(e);t&&(clearTimeout(t),p.delete(e)),e.classList.remove(r);const n=()=>{h(e,o,s),u=void 0};i(e)?n():u=setTimeout(n,a)}d=e},h=(e,t,o)=>{if(f=Date.now(),e.classList.add(r),!v)return;const n=s(e);null!==n&&(w(),l=n.addRipple(t,o))},w=()=>{void 0!==l&&(l.then((e=>e())),l=void 0)},g=e=>{w();const t=d;if(!t)return;const o=c-Date.now()+f;if(e&&o>0&&!i(t)){const e=setTimeout((()=>{t.classList.remove(r),p.delete(t)}),c);p.set(t,e)}else t.classList.remove(r)};o.addEventListener("ionGestureCaptured",m),o.addEventListener("pointerdown",(e=>{d||2===e.button||L(t(e),e)}),!0),o.addEventListener("pointerup",(e=>{L(void 0,e)}),!0),o.addEventListener("pointercancel",m,!0)}));
 /*!
              * (C) Ionic http://ionicframework.com - MIT License
              */

package/build/static/demo/v2/preview/mobile/assets/{index8-CtNyGOrb.js → index8-BZ9SvKH2.js}

@@ -1,3 +1,3 @@
-import{a as r}from"./index-CMU7wxQd.js";/*!
+import{a as r}from"./index-Cz_xGxp8.js";/*!
  * (C) Ionic http://ionicframework.com - MIT License
  */const c="ION-CONTENT",T="ion-content",l=".ion-content-scroll-host",N="".concat(T,", ").concat(l),s=o=>o.tagName===c,i=async o=>s(o)?(await new Promise(t=>r(o,t)),o.getScrollElement()):o,O=o=>o.closest(N),C=(o,t)=>s(o)?o.scrollToTop(t):Promise.resolve(o.scrollTo({top:0,left:0,behavior:"smooth"})),m=(o,t,n,e)=>s(o)?o.scrollByPoint(t,n,e):Promise.resolve(o.scrollBy({top:n,left:t,behavior:e>0?"smooth":"auto"}));export{m as a,O as f,i as g,C as s};

package/build/static/demo/v2/preview/mobile/assets/{index8-legacy-CCLmb6Z2.js → index8-legacy-B_icWl6d.js}

@@ -1,4 +1,4 @@
-System.register(["./index-legacy-BwOiApdE.js"],(function(o,e){"use strict";var t;return{setters:[o=>{t=o.a}],execute:function(){
+System.register(["./index-legacy-BQCo13yp.js"],(function(o,e){"use strict";var t;return{setters:[o=>{t=o.a}],execute:function(){
 /*!
              * (C) Ionic http://ionicframework.com - MIT License
              */

package/build/static/demo/v2/preview/mobile/assets/{input-shims-C5cDr_9L.js → input-shims-Coxp2BHY.js}

@@ -1,3 +1,3 @@
-import{d as A,K as O,b as P,e as B,a as k,f as F,g as b,h as H}from"./index-CMU7wxQd.js";import{f as $,g as U,a as Y}from"./index8-CtNyGOrb.js";/*!
+import{d as A,K as O,b as P,e as B,a as k,f as F,g as b,h as H}from"./index-Cz_xGxp8.js";import{f as $,g as U,a as Y}from"./index8-BZ9SvKH2.js";/*!
  * (C) Ionic http://ionicframework.com - MIT License
  */const D=new WeakMap,I=(e,s,t,o=0,r=!1)=>{D.has(e)!==t&&(t?G(e,s,o,r):W(e,s))},q=e=>e===e.getRootNode().activeElement,G=(e,s,t,o=!1)=>{const r=s.parentNode,n=s.cloneNode(!1);n.classList.add("cloned-input"),n.tabIndex=-1,o&&(n.disabled=!0),r.appendChild(n),D.set(e,n);const a=e.ownerDocument.dir==="rtl"?9999:-9999;e.style.pointerEvents="none",s.style.transform="translate3d(".concat(a,"px,").concat(t,"px,0) scale(0)")},W=(e,s)=>{const t=D.get(e);t&&(D.delete(e),t.remove()),e.style.pointerEvents="",s.style.transform=""},N=50,z=(e,s,t)=>{if(!t||!s)return()=>{};const o=a=>{q(s)&&I(e,s,a)},r=()=>I(e,s,!1),n=()=>o(!0),c=()=>o(!1);return P(t,"ionScrollStart",n),P(t,"ionScrollEnd",c),s.addEventListener("blur",r),()=>{B(t,"ionScrollStart",n),B(t,"ionScrollEnd",c),s.removeEventListener("blur",r)}},T="input, textarea, [no-blur], [contenteditable]",j=()=>{let e=!0,s=!1;const t=document,o=()=>{s=!0},r=()=>{e=!0},n=c=>{if(s){s=!1;return}const a=t.activeElement;if(!a||a.matches(T))return;const f=c.target;f!==a&&(f.matches(T)||f.closest(T)||(e=!1,setTimeout(()=>{e||a.blur()},50)))};return P(t,"ionScrollStart",o),t.addEventListener("focusin",r,!0),t.addEventListener("touchend",n,!1),()=>{B(t,"ionScrollStart",o,!0),t.removeEventListener("focusin",r,!0),t.removeEventListener("touchend",n,!1)}},J=.3,Q=(e,s,t,o)=>{var r;const n=(r=e.closest("ion-item,[ion-item]"))!==null&&r!==void 0?r:e;return V(n.getBoundingClientRect(),s.getBoundingClientRect(),t,o)},V=(e,s,t,o)=>{const r=e.top,n=e.bottom,c=s.top,a=Math.min(s.bottom,o-t),f=c+15,u=a-N-n,d=f-r,S=Math.round(u<0?-u:d>0?-d:0),v=Math.min(S,r-c),i=Math.abs(v)/J,h=Math.min(400,Math.max(150,i));return{scrollAmount:v,scrollDuration:h,scrollPadding:t,inputSafeY:-(r-f)+4}},R="$ionPaddingTimer",M=(e,s,t)=>{const o=e[R];o&&clearTimeout(o),s>0?e.style.setProperty("--keyboard-offset","".concat(s,"px")):e[R]=setTimeout(()=>{e.style.setProperty("--keyboard-offset","0px"),t&&t()},120)},_=(e,s,t)=>{const o=()=>{s&&M(s,0,t)};e.addEventListener("focusout",o,{once:!0})};let g=0;const K="data-ionic-skip-scroll-assist",X=(e,s,t,o,r,n,c,a=!1)=>{const f=n&&(c===void 0||c.mode===F.None);let l=!1;const u=b!==void 0?b.innerHeight:0,d=y=>{if(l===!1){l=!0;return}p(e,s,t,o,y.detail.keyboardHeight,f,a,u,!1)},S=()=>{l=!1,b===null||b===void 0||b.removeEventListener("ionKeyboardDidShow",d),e.removeEventListener("focusout",S)},v=async()=>{if(s.hasAttribute(K)){s.removeAttribute(K);return}p(e,s,t,o,r,f,a,u),b===null||b===void 0||b.addEventListener("ionKeyboardDidShow",d),e.addEventListener("focusout",S)};return e.addEventListener("focusin",v),()=>{e.removeEventListener("focusin",v),b===null||b===void 0||b.removeEventListener("ionKeyboardDidShow",d),e.removeEventListener("focusout",S)}},C=e=>{var s;if(document.activeElement===e)return;const t=e.getAttribute("id"),o=e.closest('label[for="'.concat(t,'"]')),r=(s=document.activeElement)===null||s===void 0?void 0:s.closest('label[for="'.concat(t,'"]'));o!==null&&o===r||(e.setAttribute(K,"true"),e.focus())},p=async(e,s,t,o,r,n,c=!1,a=0,f=!0)=>{if(!t&&!o)return;const l=Q(e,t||o,r,a);if(t&&Math.abs(l.scrollAmount)<4){C(s),n&&t!==null&&(M(t,g),_(s,t,()=>g=0));return}if(I(e,s,!0,l.inputSafeY,c),C(s),H(()=>e.click()),n&&t&&(g=l.scrollPadding,M(t,g)),typeof window<"u"){let u;const d=async()=>{u!==void 0&&clearTimeout(u),window.removeEventListener("ionKeyboardDidShow",S),window.removeEventListener("ionKeyboardDidShow",d),t&&await Y(t,0,l.scrollAmount,l.scrollDuration),I(e,s,!1,l.inputSafeY),C(s),n&&_(s,t,()=>g=0)},S=()=>{window.removeEventListener("ionKeyboardDidShow",S),window.addEventListener("ionKeyboardDidShow",d)};if(t){const v=await U(t),y=v.scrollHeight-v.clientHeight;if(f&&l.scrollAmount>y-v.scrollTop){s.type==="password"?(l.scrollAmount+=N,window.addEventListener("ionKeyboardDidShow",S)):window.addEventListener("ionKeyboardDidShow",d),u=setTimeout(d,1e3);return}}d()}},Z=!0,se=async(e,s)=>{if(A===void 0)return;const t=s==="ios",o=s==="android",r=e.getNumber("keyboardHeight",290),n=e.getBoolean("scrollAssist",!0),c=e.getBoolean("hideCaretOnScroll",t),a=e.getBoolean("inputBlurring",!1),f=e.getBoolean("scrollPadding",!0),l=Array.from(A.querySelectorAll("ion-input, ion-textarea")),u=new WeakMap,d=new WeakMap,S=await O.getResizeMode(),v=async i=>{await new Promise(w=>k(i,w));const h=i.shadowRoot||i,m=h.querySelector("input")||h.querySelector("textarea"),L=$(i),x=L?null:i.closest("ion-footer");if(!m)return;if(L&&c&&!u.has(i)){const w=z(i,m,L);u.set(i,w)}if(!(m.type==="date"||m.type==="datetime-local")&&(L||x)&&n&&!d.has(i)){const w=X(i,m,L,x,r,f,S,o);d.set(i,w)}},y=i=>{if(c){const h=u.get(i);h&&h(),u.delete(i)}if(n){const h=d.get(i);h&&h(),d.delete(i)}};a&&Z&&j();for(const i of l)v(i);A.addEventListener("ionInputDidLoad",i=>{v(i.detail)}),A.addEventListener("ionInputDidUnload",i=>{y(i.detail)})};export{se as startInputShims};

package/build/static/demo/v2/preview/mobile/assets/{input-shims-legacy-HufCW5sX.js → input-shims-legacy-DPBd76QN.js}

@@ -1,4 +1,4 @@
-System.register(["./index-legacy-BwOiApdE.js","./index8-legacy-CCLmb6Z2.js"],(function(e,t){"use strict";var o,n,i,r,s,a,d,l,c,u,v;return{setters:[e=>{o=e.d,n=e.K,i=e.b,r=e.e,s=e.a,a=e.f,d=e.g,l=e.h},e=>{c=e.f,u=e.g,v=e.a}],execute:function(){
+System.register(["./index-legacy-BQCo13yp.js","./index8-legacy-B_icWl6d.js"],(function(e,t){"use strict";var o,n,i,r,s,a,d,l,c,u,v;return{setters:[e=>{o=e.d,n=e.K,i=e.b,r=e.e,s=e.a,a=e.f,d=e.g,l=e.h},e=>{c=e.f,u=e.g,v=e.a}],execute:function(){
 /*!
              * (C) Ionic http://ionicframework.com - MIT License
              */

package/build/static/demo/v2/preview/mobile/assets/{ios.transition-DsxAyrvT.js → ios.transition-B_pMjvXc.js}

@@ -1,3 +1,3 @@
-import{i,j}from"./index-CMU7wxQd.js";/*!
+import{i,j}from"./index-Cz_xGxp8.js";/*!
  * (C) Ionic http://ionicframework.com - MIT License
  */const Z=540,z=r=>document.querySelector("".concat(r,".ion-cloned-element")),I=r=>r.shadowRoot||r,P=r=>{const l=r.tagName==="ION-TABS"?r:r.querySelector("ion-tabs"),c="ion-content ion-header:not(.header-collapse-condense-inactive) ion-title.title-large";if(l!=null){const n=l.querySelector("ion-tab:not(.tab-hidden), .ion-page:not(.ion-page-hidden)");return n!=null?n.querySelector(c):null}return r.querySelector(c)},D=(r,l)=>{const c=r.tagName==="ION-TABS"?r:r.querySelector("ion-tabs");let n=[];if(c!=null){const t=c.querySelector("ion-tab:not(.tab-hidden), .ion-page:not(.ion-page-hidden)");t!=null&&(n=t.querySelectorAll("ion-buttons"))}else n=r.querySelectorAll("ion-buttons");for(const t of n){const g=t.closest("ion-header"),e=g&&!g.classList.contains("header-collapse-condense-inactive"),C=t.querySelector("ion-back-button"),s=t.classList.contains("buttons-collapse"),S=t.slot==="start"||t.slot==="";if(C!==null&&S&&(s&&e&&l||!s))return C}return null},J=(r,l,c,n,t)=>{const g=D(n,c),e=P(t),C=P(n),s=D(t,c),S=g!==null&&e!==null&&!c,y=C!==null&&s!==null&&c;if(S){const E=e.getBoundingClientRect(),m=g.getBoundingClientRect(),d=I(g).querySelector(".button-text"),R=d==null?void 0:d.getBoundingClientRect(),A=I(e).querySelector(".toolbar-title").getBoundingClientRect();G(r,l,c,e,E,A,m,d,R),k(r,l,c,g,m,d,R,e,A)}else if(y){const E=C.getBoundingClientRect(),m=s.getBoundingClientRect(),d=I(s).querySelector(".button-text"),R=d==null?void 0:d.getBoundingClientRect(),A=I(C).querySelector(".toolbar-title").getBoundingClientRect();G(r,l,c,C,E,A,m,d,R),k(r,l,c,s,m,d,R,C,A)}return{forward:S,backward:y}},k=(r,l,c,n,t,g,e,C,s)=>{var S,y;const E=l?"calc(100% - ".concat(t.right+4,"px)"):"".concat(t.left-4,"px"),m=l?"right":"left",d=l?"left":"right",R=l?"right":"left";let L=1,A=1,T="scale(".concat(A,")");const X="scale(1)";if(g&&e){const Y=((S=g.textContent)===null||S===void 0?void 0:S.trim())===((y=C.textContent)===null||y===void 0?void 0:y.trim());L=s.width/e.width,A=(s.height-U)/e.height,T=Y?"scale(".concat(L,", ").concat(A,")"):"scale(".concat(A,")")}const x=I(n).querySelector("ion-icon").getBoundingClientRect(),W=l?"".concat(x.width/2-(x.right-t.right),"px"):"".concat(t.left-x.width/2,"px"),o=l?"-".concat(window.innerWidth-t.right,"px"):"".concat(t.left,"px"),p="".concat(s.top,"px"),$="".concat(t.top,"px"),v=[{offset:0,transform:"translate3d(".concat(W,", ").concat(p,", 0)")},{offset:1,transform:"translate3d(".concat(o,", ").concat($,", 0)")}],a=[{offset:0,transform:"translate3d(".concat(o,", ").concat($,", 0)")},{offset:1,transform:"translate3d(".concat(W,", ").concat(p,", 0)")}],f=c?a:v,q=c?[{offset:0,opacity:1,transform:X},{offset:1,opacity:0,transform:T}]:[{offset:0,opacity:0,transform:T},{offset:1,opacity:1,transform:X}],w=c?[{offset:0,opacity:1,transform:"scale(1)"},{offset:.2,opacity:0,transform:"scale(0.6)"},{offset:1,opacity:0,transform:"scale(0.6)"}]:[{offset:0,opacity:0,transform:"scale(0.6)"},{offset:.6,opacity:0,transform:"scale(0.6)"},{offset:1,opacity:1,transform:"scale(1)"}],b=i(),F=i(),B=i(),u=z("ion-back-button"),M=I(u).querySelector(".button-text"),H=I(u).querySelector("ion-icon");u.text=n.text,u.mode=n.mode,u.icon=n.icon,u.color=n.color,u.disabled=n.disabled,u.style.setProperty("display","block"),u.style.setProperty("position","fixed"),F.addElement(H),b.addElement(M),B.addElement(u),B.beforeStyles({position:"absolute",top:"0px",[R]:"0px"}).beforeAddWrite(()=>{n.style.setProperty("display","none"),u.style.setProperty(m,E)}).afterAddWrite(()=>{n.style.setProperty("display",""),u.style.setProperty("display","none"),u.style.removeProperty(m)}).keyframes(f),b.beforeStyles({"transform-origin":"".concat(m," top")}).keyframes(q),F.beforeStyles({"transform-origin":"".concat(d," center")}).keyframes(w),r.addAnimation([b,F,B])},G=(r,l,c,n,t,g,e,C,s)=>{var S,y;const E=l?"right":"left",m=l?"calc(100% - ".concat(t.right,"px)"):"".concat(t.left,"px"),d="0px",R="".concat(t.top,"px"),L=8;let A=l?"-".concat(window.innerWidth-e.right-L,"px"):"".concat(e.x+L,"px"),T=.5;const X="scale(1)";let K="scale(".concat(T,")");if(C&&s){A=l?"-".concat(window.innerWidth-s.right-L,"px"):"".concat(s.x-L,"px");const N=((S=C.textContent)===null||S===void 0?void 0:S.trim())===((y=n.textContent)===null||y===void 0?void 0:y.trim()),h=s.width/g.width;T=s.height/(g.height-U),K=N?"scale(".concat(h,", ").concat(T,")"):"scale(".concat(T,")")}const x=e.top+e.height/2,W=t.height*T/2,o="".concat(x-W,"px"),p=[{offset:0,opacity:0,transform:"translate3d(".concat(A,", ").concat(o,", 0) ").concat(K)},{offset:.1,opacity:0},{offset:1,opacity:1,transform:"translate3d(".concat(d,", ").concat(R,", 0) ").concat(X)}],$=[{offset:0,opacity:.99,transform:"translate3d(".concat(d,", ").concat(R,", 0) ").concat(X)},{offset:.6,opacity:0},{offset:1,opacity:0,transform:"translate3d(".concat(A,", ").concat(o,", 0) ").concat(K)}],v=c?p:$,a=z("ion-title"),f=i();a.innerText=n.innerText,a.size=n.size,a.color=n.color,f.addElement(a),f.beforeStyles({"transform-origin":"".concat(E," top"),height:"".concat(t.height,"px"),display:"",position:"relative",[E]:m}).beforeAddWrite(()=>{n.style.setProperty("opacity","0")}).afterAddWrite(()=>{n.style.setProperty("opacity",""),a.style.setProperty("display","none")}).keyframes(v),r.addAnimation(f)},V=(r,l)=>{var c;try{const n="cubic-bezier(0.32,0.72,0,1)",t="opacity",g="transform",e="0%",s=r.ownerDocument.dir==="rtl",S=s?"-99.5%":"99.5%",y=s?"33%":"-33%",E=l.enteringEl,m=l.leavingEl,d=l.direction==="back",R=E.querySelector(":scope > ion-content"),L=E.querySelectorAll(":scope > ion-header > *:not(ion-toolbar), :scope > ion-footer > *"),A=E.querySelectorAll(":scope > ion-header > ion-toolbar"),T=i(),X=i();if(T.addElement(E).duration(((c=l.duration)!==null&&c!==void 0?c:0)||Z).easing(l.easing||n).fill("both").beforeRemoveClass("ion-page-invisible"),m&&r!==null&&r!==void 0){const o=i();o.addElement(r),T.addAnimation(o)}if(!R&&A.length===0&&L.length===0?X.addElement(E.querySelector(":scope > .ion-page, :scope > ion-nav, :scope > ion-tabs")):(X.addElement(R),X.addElement(L)),T.addAnimation(X),d?X.beforeClearStyles([t]).fromTo("transform","translateX(".concat(y,")"),"translateX(".concat(e,")")).fromTo(t,.8,1):X.beforeClearStyles([t]).fromTo("transform","translateX(".concat(S,")"),"translateX(".concat(e,")")),R){const o=I(R).querySelector(".transition-effect");if(o){const p=o.querySelector(".transition-cover"),$=o.querySelector(".transition-shadow"),v=i(),a=i(),f=i();v.addElement(o).beforeStyles({opacity:"1",display:"block"}).afterStyles({opacity:"",display:""}),a.addElement(p).beforeClearStyles([t]).fromTo(t,0,.1),f.addElement($).beforeClearStyles([t]).fromTo(t,.03,.7),v.addAnimation([a,f]),X.addAnimation([v])}}const K=E.querySelector("ion-header.header-collapse-condense"),{forward:x,backward:W}=J(T,s,d,E,m);if(A.forEach(o=>{const p=i();p.addElement(o),T.addAnimation(p);const $=i();$.addElement(o.querySelector("ion-title"));const v=i(),a=Array.from(o.querySelectorAll("ion-buttons,[menuToggle]")),f=o.closest("ion-header"),N=f==null?void 0:f.classList.contains("header-collapse-condense-inactive");let h;d?h=a.filter(b=>{const F=b.classList.contains("buttons-collapse");return F&&!N||!F}):h=a.filter(b=>!b.classList.contains("buttons-collapse")),v.addElement(h);const q=i();q.addElement(o.querySelectorAll(":scope > *:not(ion-title):not(ion-buttons):not([menuToggle])"));const _=i();_.addElement(I(o).querySelector(".toolbar-background"));const O=i(),w=o.querySelector("ion-back-button");if(w&&O.addElement(w),p.addAnimation([$,v,q,_,O]),v.fromTo(t,.01,1),q.fromTo(t,.01,1),d)N||$.fromTo("transform","translateX(".concat(y,")"),"translateX(".concat(e,")")).fromTo(t,.01,1),q.fromTo("transform","translateX(".concat(y,")"),"translateX(".concat(e,")")),O.fromTo(t,.01,1);else if(K||$.fromTo("transform","translateX(".concat(S,")"),"translateX(".concat(e,")")).fromTo(t,.01,1),q.fromTo("transform","translateX(".concat(S,")"),"translateX(".concat(e,")")),_.beforeClearStyles([t,"transform"]),(f==null?void 0:f.translucent)?_.fromTo("transform",s?"translateX(-100%)":"translateX(100%)","translateX(0px)"):_.fromTo(t,.01,"var(--opacity)"),x||O.fromTo(t,.01,1),w&&!x){const F=i();F.addElement(I(w).querySelector(".button-text")).fromTo("transform",s?"translateX(-100px)":"translateX(100px)","translateX(0px)"),p.addAnimation(F)}}),m){const o=i(),p=m.querySelector(":scope > ion-content"),$=m.querySelectorAll(":scope > ion-header > ion-toolbar"),v=m.querySelectorAll(":scope > ion-header > *:not(ion-toolbar), :scope > ion-footer > *");if(!p&&$.length===0&&v.length===0?o.addElement(m.querySelector(":scope > .ion-page, :scope > ion-nav, :scope > ion-tabs")):(o.addElement(p),o.addElement(v)),T.addAnimation(o),d){o.beforeClearStyles([t]).fromTo("transform","translateX(".concat(e,")"),s?"translateX(-100%)":"translateX(100%)");const a=j(m);T.afterAddWrite(()=>{T.getDirection()==="normal"&&a.style.setProperty("display","none")})}else o.fromTo("transform","translateX(".concat(e,")"),"translateX(".concat(y,")")).fromTo(t,1,.8);if(p){const a=I(p).querySelector(".transition-effect");if(a){const f=a.querySelector(".transition-cover"),N=a.querySelector(".transition-shadow"),h=i(),q=i(),_=i();h.addElement(a).beforeStyles({opacity:"1",display:"block"}).afterStyles({opacity:"",display:""}),q.addElement(f).beforeClearStyles([t]).fromTo(t,.1,0),_.addElement(N).beforeClearStyles([t]).fromTo(t,.7,.03),h.addAnimation([q,_]),o.addAnimation([h])}}$.forEach(a=>{const f=i();f.addElement(a);const N=i();N.addElement(a.querySelector("ion-title"));const h=i(),q=a.querySelectorAll("ion-buttons,[menuToggle]"),_=a.closest("ion-header"),O=_==null?void 0:_.classList.contains("header-collapse-condense-inactive"),w=Array.from(q).filter(H=>{const Y=H.classList.contains("buttons-collapse");return Y&&!O||!Y});h.addElement(w);const b=i(),F=a.querySelectorAll(":scope > *:not(ion-title):not(ion-buttons):not([menuToggle])");F.length>0&&b.addElement(F);const B=i();B.addElement(I(a).querySelector(".toolbar-background"));const u=i(),M=a.querySelector("ion-back-button");if(M&&u.addElement(M),f.addAnimation([N,h,b,u,B]),T.addAnimation(f),u.fromTo(t,.99,0),h.fromTo(t,.99,0),b.fromTo(t,.99,0),d){if(O||N.fromTo("transform","translateX(".concat(e,")"),s?"translateX(-100%)":"translateX(100%)").fromTo(t,.99,0),b.fromTo("transform","translateX(".concat(e,")"),s?"translateX(-100%)":"translateX(100%)"),B.beforeClearStyles([t,"transform"]),(_==null?void 0:_.translucent)?B.fromTo("transform","translateX(0px)",s?"translateX(-100%)":"translateX(100%)"):B.fromTo(t,"var(--opacity)",0),M&&!W){const Y=i();Y.addElement(I(M).querySelector(".button-text")).fromTo("transform","translateX(".concat(e,")"),"translateX(".concat((s?-124:124)+"px",")")),f.addAnimation(Y)}}else O||N.fromTo("transform","translateX(".concat(e,")"),"translateX(".concat(y,")")).fromTo(t,.99,0).afterClearStyles([g,t]),b.fromTo("transform","translateX(".concat(e,")"),"translateX(".concat(y,")")).afterClearStyles([g,t]),u.afterClearStyles([t]),N.afterClearStyles([t]),h.afterClearStyles([t])})}return T}catch(n){throw n}},U=10;export{V as iosTransitionAnimation,I as shadow};

package/build/static/demo/v2/preview/mobile/assets/{ios.transition-legacy-CUg6S0xs.js → ios.transition-legacy-2REWQpXF.js}

@@ -1,4 +1,4 @@
-System.register(["./index-legacy-BwOiApdE.js"],(function(t,e){"use strict";var o,n;return{setters:[t=>{o=t.i,n=t.j}],execute:function(){
+System.register(["./index-legacy-BQCo13yp.js"],(function(t,e){"use strict";var o,n;return{setters:[t=>{o=t.i,n=t.j}],execute:function(){
 /*!
              * (C) Ionic http://ionicframework.com - MIT License
              */

package/build/static/demo/v2/preview/mobile/assets/{keyboard-CCxFHIBa.js → keyboard-BP8pm5kc.js}

@@ -1,3 +1,3 @@
-import{K as f}from"./index-CMU7wxQd.js";/*!
+import{K as f}from"./index-Cz_xGxp8.js";/*!
  * (C) Ionic http://ionicframework.com - MIT License
  */const g="ionKeyboardDidShow",p="ionKeyboardDidHide",b=150;let r={},o={},s=!1;const v=()=>{r={},o={},s=!1},k=e=>{if(f.getEngine())y(e);else{if(!e.visualViewport)return;o=d(e.visualViewport),e.visualViewport.onresize=()=>{K(e),l()||D(e)?n(e):i(e)&&a(e)}}},y=e=>{e.addEventListener("keyboardDidShow",t=>n(e,t)),e.addEventListener("keyboardDidHide",()=>a(e))},n=(e,t)=>{E(e,t),s=!0},a=e=>{u(e),s=!1},l=()=>{const e=(r.height-o.height)*o.scale;return!s&&r.width===o.width&&e>b},D=e=>s&&!i(e),i=e=>s&&o.height===e.innerHeight,E=(e,t)=>{const c=t?t.keyboardHeight:e.innerHeight-o.height,h=new CustomEvent(g,{detail:{keyboardHeight:c}});e.dispatchEvent(h)},u=e=>{const t=new CustomEvent(p);e.dispatchEvent(t)},K=e=>{r=Object.assign({},o),o=d(e.visualViewport)},d=e=>({width:Math.round(e.width),height:Math.round(e.height),offsetTop:e.offsetTop,offsetLeft:e.offsetLeft,pageTop:e.pageTop,pageLeft:e.pageLeft,scale:e.scale});export{p as KEYBOARD_DID_CLOSE,g as KEYBOARD_DID_OPEN,d as copyVisualViewport,i as keyboardDidClose,l as keyboardDidOpen,D as keyboardDidResize,v as resetKeyboardAssist,a as setKeyboardClose,n as setKeyboardOpen,k as startKeyboardAssist,K as trackViewportChanges};

package/build/static/demo/v2/preview/mobile/assets/{keyboard-legacy-DDnIOIYs.js → keyboard-legacy-CWh6lZxY.js}

@@ -1,4 +1,4 @@
-System.register(["./index-legacy-BwOiApdE.js"],(function(e,t){"use strict";var i;return{setters:[e=>{i=e.K}],execute:function(){
+System.register(["./index-legacy-BQCo13yp.js"],(function(e,t){"use strict";var i;return{setters:[e=>{i=e.K}],execute:function(){
 /*!
              * (C) Ionic http://ionicframework.com - MIT License
              */

package/build/static/demo/v2/preview/mobile/assets/{md.transition-BYTK0SpH.js → md.transition-CgUR9ypu.js}

@@ -1,3 +1,3 @@
-import{j as b,i as r}from"./index-CMU7wxQd.js";/*!
+import{j as b,i as r}from"./index-Cz_xGxp8.js";/*!
  * (C) Ionic http://ionicframework.com - MIT License
  */const v=(E,i)=>{var o,t,a;const l="40px",s="0px",c=i.direction==="back",u=i.enteringEl,d=i.leavingEl,m=b(u),g=m.querySelector("ion-toolbar"),n=r();if(n.addElement(m).fill("both").beforeRemoveClass("ion-page-invisible"),c?n.duration(((o=i.duration)!==null&&o!==void 0?o:0)||200).easing("cubic-bezier(0.47,0,0.745,0.715)"):n.duration(((t=i.duration)!==null&&t!==void 0?t:0)||280).easing("cubic-bezier(0.36,0.66,0.04,1)").fromTo("transform","translateY(".concat(l,")"),"translateY(".concat(s,")")).fromTo("opacity",.01,1),g){const e=r();e.addElement(g),n.addAnimation(e)}if(d&&c){n.duration(((a=i.duration)!==null&&a!==void 0?a:0)||200).easing("cubic-bezier(0.47,0,0.745,0.715)");const e=r();e.addElement(b(d)).onFinish(f=>{f===1&&e.elements.length>0&&e.elements[0].style.setProperty("display","none")}).fromTo("transform","translateY(".concat(s,")"),"translateY(".concat(l,")")).fromTo("opacity",1,0),n.addAnimation(e)}return n};export{v as mdTransitionAnimation};

package/build/static/demo/v2/preview/mobile/assets/{md.transition-legacy-CGuk1keh.js → md.transition-legacy-nO5fAqqF.js}

@@ -1,4 +1,4 @@
-System.register(["./index-legacy-BwOiApdE.js"],(function(e,n){"use strict";var t,i;return{setters:[e=>{t=e.j,i=e.i}],execute:function(){
+System.register(["./index-legacy-BQCo13yp.js"],(function(e,n){"use strict";var t,i;return{setters:[e=>{t=e.j,i=e.i}],execute:function(){
 /*!
              * (C) Ionic http://ionicframework.com - MIT License
              */

package/build/static/demo/v2/preview/mobile/assets/{status-tap-CgiYF11L.js → status-tap-CeUQgNop.js}

@@ -1,3 +1,3 @@
-import{r as a,a as i,w as c}from"./index-CMU7wxQd.js";import{f as d,s as l}from"./index8-CtNyGOrb.js";/*!
+import{r as a,a as i,w as c}from"./index-Cz_xGxp8.js";import{f as d,s as l}from"./index8-BZ9SvKH2.js";/*!
  * (C) Ionic http://ionicframework.com - MIT License
  */const p=()=>{const e=window;e.addEventListener("statusTap",()=>{a(()=>{const n=e.innerWidth,s=e.innerHeight,o=document.elementFromPoint(n/2,s/2);if(!o)return;const t=d(o);t&&new Promise(r=>i(t,r)).then(()=>{c(async()=>{t.style.setProperty("--overflow","hidden"),await l(t,300),t.style.removeProperty("--overflow")})})})})};export{p as startStatusTap};

package/build/static/demo/v2/preview/mobile/assets/{status-tap-legacy-CiKRqNgL.js → status-tap-legacy-DNFEVrIV.js}

@@ -1,4 +1,4 @@
-System.register(["./index-legacy-BwOiApdE.js","./index8-legacy-CCLmb6Z2.js"],(function(e,t){"use strict";var n,r,s,i,o;return{setters:[e=>{n=e.r,r=e.a,s=e.w},e=>{i=e.f,o=e.s}],execute:function(){
+System.register(["./index-legacy-BQCo13yp.js","./index8-legacy-B_icWl6d.js"],(function(e,t){"use strict";var n,r,s,i,o;return{setters:[e=>{n=e.r,r=e.a,s=e.w},e=>{i=e.f,o=e.s}],execute:function(){
 /*!
              * (C) Ionic http://ionicframework.com - MIT License
              */

package/build/static/demo/v2/preview/mobile/assets/{swipe-back-85L9BFIH.js → swipe-back-DleeGYSI.js}

@@ -1,4 +1,4 @@
-import{c as A}from"./index-CMU7wxQd.js";/*!
+import{c as A}from"./index-Cz_xGxp8.js";/*!
  * (C) Ionic http://ionicframework.com - MIT License
  */class R{constructor(){this.gestureId=0,this.requestedStart=new Map,this.disabledGestures=new Map,this.disabledScroll=new Set}createGesture(t){var r;return new W(this,this.newID(),t.name,(r=t.priority)!==null&&r!==void 0?r:0,!!t.disableScroll)}createBlocker(t={}){return new B(this,this.newID(),t.disable,!!t.disableScroll)}start(t,r,i){return this.canStart(t)?(this.requestedStart.set(r,i),!0):(this.requestedStart.delete(r),!1)}capture(t,r,i){if(!this.start(t,r,i))return!1;const c=this.requestedStart;let n=-1e4;if(c.forEach(a=>{n=Math.max(n,a)}),n===i){this.capturedId=r,c.clear();const a=new CustomEvent("ionGestureCaptured",{detail:{gestureName:t}});return document.dispatchEvent(a),!0}return c.delete(r),!1}release(t){this.requestedStart.delete(t),this.capturedId===t&&(this.capturedId=void 0)}disableGesture(t,r){let i=this.disabledGestures.get(t);i===void 0&&(i=new Set,this.disabledGestures.set(t,i)),i.add(r)}enableGesture(t,r){const i=this.disabledGestures.get(t);i!==void 0&&i.delete(r)}disableScroll(t){this.disabledScroll.add(t),this.disabledScroll.size===1&&document.body.classList.add(P)}enableScroll(t){this.disabledScroll.delete(t),this.disabledScroll.size===0&&document.body.classList.remove(P)}canStart(t){return!(this.capturedId!==void 0||this.isDisabled(t))}isCaptured(){return this.capturedId!==void 0}isScrollDisabled(){return this.disabledScroll.size>0}isDisabled(t){const r=this.disabledGestures.get(t);return!!(r&&r.size>0)}newID(){return this.gestureId++,this.gestureId}}class W{constructor(t,r,i,c,n){this.id=r,this.name=i,this.disableScroll=n,this.priority=c*1e6+r,this.ctrl=t}canStart(){return this.ctrl?this.ctrl.canStart(this.name):!1}start(){return this.ctrl?this.ctrl.start(this.name,this.id,this.priority):!1}capture(){if(!this.ctrl)return!1;const t=this.ctrl.capture(this.name,this.id,this.priority);return t&&this.disableScroll&&this.ctrl.disableScroll(this.id),t}release(){this.ctrl&&(this.ctrl.release(this.id),this.disableScroll&&this.ctrl.enableScroll(this.id))}destroy(){this.release(),this.ctrl=void 0}}class B{constructor(t,r,i,c){this.id=r,this.disable=i,this.disableScroll=c,this.ctrl=t}block(){if(this.ctrl){if(this.disable)for(const t of this.disable)this.ctrl.disableGesture(t,this.id);this.disableScroll&&this.ctrl.disableScroll(this.id)}}unblock(){if(this.ctrl){if(this.disable)for(const t of this.disable)this.ctrl.enableGesture(t,this.id);this.disableScroll&&this.ctrl.enableScroll(this.id)}}destroy(){this.unblock(),this.ctrl=void 0}}const P="backdrop-no-scroll",V=new R;/*!
  * (C) Ionic http://ionicframework.com - MIT License

package/build/static/demo/v2/preview/mobile/assets/{swipe-back-legacy-DN1_BryY.js → swipe-back-legacy-CG1nd01G.js}

@@ -1,4 +1,4 @@
-System.register(["./index-legacy-BwOiApdE.js"],(function(t,e){"use strict";var r;return{setters:[t=>{r=t.c}],execute:function(){class e{constructor(t,e,r,s,i){this.id=e,this.name=r,this.disableScroll=i,this.priority=1e6*s+e,this.ctrl=t}canStart(){return!!this.ctrl&&this.ctrl.canStart(this.name)}start(){return!!this.ctrl&&this.ctrl.start(this.name,this.id,this.priority)}capture(){if(!this.ctrl)return!1;const t=this.ctrl.capture(this.name,this.id,this.priority);return t&&this.disableScroll&&this.ctrl.disableScroll(this.id),t}release(){this.ctrl&&(this.ctrl.release(this.id),this.disableScroll&&this.ctrl.enableScroll(this.id))}destroy(){this.release(),this.ctrl=void 0}}class s{constructor(t,e,r,s){this.id=e,this.disable=r,this.disableScroll=s,this.ctrl=t}block(){if(this.ctrl){if(this.disable)for(const t of this.disable)this.ctrl.disableGesture(t,this.id);this.disableScroll&&this.ctrl.disableScroll(this.id)}}unblock(){if(this.ctrl){if(this.disable)for(const t of this.disable)this.ctrl.enableGesture(t,this.id);this.disableScroll&&this.ctrl.enableScroll(this.id)}}destroy(){this.unblock(),this.ctrl=void 0}}const i="backdrop-no-scroll",n=new
+System.register(["./index-legacy-BQCo13yp.js"],(function(t,e){"use strict";var r;return{setters:[t=>{r=t.c}],execute:function(){class e{constructor(t,e,r,s,i){this.id=e,this.name=r,this.disableScroll=i,this.priority=1e6*s+e,this.ctrl=t}canStart(){return!!this.ctrl&&this.ctrl.canStart(this.name)}start(){return!!this.ctrl&&this.ctrl.start(this.name,this.id,this.priority)}capture(){if(!this.ctrl)return!1;const t=this.ctrl.capture(this.name,this.id,this.priority);return t&&this.disableScroll&&this.ctrl.disableScroll(this.id),t}release(){this.ctrl&&(this.ctrl.release(this.id),this.disableScroll&&this.ctrl.enableScroll(this.id))}destroy(){this.release(),this.ctrl=void 0}}class s{constructor(t,e,r,s){this.id=e,this.disable=r,this.disableScroll=s,this.ctrl=t}block(){if(this.ctrl){if(this.disable)for(const t of this.disable)this.ctrl.disableGesture(t,this.id);this.disableScroll&&this.ctrl.disableScroll(this.id)}}unblock(){if(this.ctrl){if(this.disable)for(const t of this.disable)this.ctrl.enableGesture(t,this.id);this.disableScroll&&this.ctrl.enableScroll(this.id)}}destroy(){this.unblock(),this.ctrl=void 0}}const i="backdrop-no-scroll",n=new
 /*!
              * (C) Ionic http://ionicframework.com - MIT License
              */

package/build/static/demo/v2/preview/mobile/assets/{web-zb78ilUl.js → web-DyNBPL1Z.js}

@@ -1 +1 @@
-import{W as w}from"./index-CMU7wxQd.js";class y extends w{async getId(){return{identifier:this.getUid()}}async getInfo(){if(typeof navigator>"u"||!navigator.userAgent)throw this.unavailable("Device API not available in this browser");const e=navigator.userAgent,i=this.parseUa(e);return{model:i.model,platform:"web",operatingSystem:i.operatingSystem,osVersion:i.osVersion,manufacturer:navigator.vendor,isVirtual:!1,webViewVersion:i.browserVersion}}async getBatteryInfo(){if(typeof navigator>"u"||!navigator.getBattery)throw this.unavailable("Device API not available in this browser");let e={};try{e=await navigator.getBattery()}catch(i){}return{batteryLevel:e.level,isCharging:e.charging}}async getLanguageCode(){return{value:navigator.language.split("-")[0].toLowerCase()}}async getLanguageTag(){return{value:navigator.language}}parseUa(e){const i={},r=e.indexOf("(")+1;let a=e.indexOf(") AppleWebKit");e.indexOf(") Gecko")!==-1&&(a=e.indexOf(") Gecko"));const s=e.substring(r,a);if(e.indexOf("Android")!==-1){const t=s.replace("; wv","").split("; ").pop();t&&(i.model=t.split(" Build")[0]),i.osVersion=s.split("; ")[1]}else if(i.model=s.split("; ")[0],typeof navigator<"u"&&navigator.oscpu)i.osVersion=navigator.oscpu;else if(e.indexOf("Windows")!==-1)i.osVersion=s;else{const t=s.split("; ").pop();if(t){const n=t.replace(" like Mac OS X","").split(" ");i.osVersion=n[n.length-1].replace(/_/g,".")}}/android/i.test(e)?i.operatingSystem="android":/iPad|iPhone|iPod/.test(e)&&!window.MSStream?i.operatingSystem="ios":/Win/.test(e)?i.operatingSystem="windows":/Mac/i.test(e)?i.operatingSystem="mac":i.operatingSystem="unknown";const l=!!window.ApplePaySession,x=!!window.chrome,p=/Firefox/.test(e),d=/Edg/.test(e),g=/FxiOS/.test(e),c=/CriOS/.test(e),f=/EdgiOS/.test(e);if(l||x&&!d||g||c||f){let t;g?t="FxiOS":c?t="CriOS":f?t="EdgiOS":l?t="Version":t="Chrome";const n=e.split(" ");for(const o of n)if(o.includes(t)){const v=o.split("/")[1];i.browserVersion=v}}else if(p||d){const o=e.split("").reverse().join("").split("/")[0].split("").reverse().join("");i.browserVersion=o}return i}getUid(){if(typeof window<"u"&&window.localStorage){let e=window.localStorage.getItem("_capuid");return e||(e=this.uuid4(),window.localStorage.setItem("_capuid",e),e)}return this.uuid4()}uuid4(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(e){const i=Math.random()*16|0;return(e==="x"?i:i&3|8).toString(16)})}}export{y as DeviceWeb};
+import{W as w}from"./index-Cz_xGxp8.js";class y extends w{async getId(){return{identifier:this.getUid()}}async getInfo(){if(typeof navigator>"u"||!navigator.userAgent)throw this.unavailable("Device API not available in this browser");const e=navigator.userAgent,i=this.parseUa(e);return{model:i.model,platform:"web",operatingSystem:i.operatingSystem,osVersion:i.osVersion,manufacturer:navigator.vendor,isVirtual:!1,webViewVersion:i.browserVersion}}async getBatteryInfo(){if(typeof navigator>"u"||!navigator.getBattery)throw this.unavailable("Device API not available in this browser");let e={};try{e=await navigator.getBattery()}catch(i){}return{batteryLevel:e.level,isCharging:e.charging}}async getLanguageCode(){return{value:navigator.language.split("-")[0].toLowerCase()}}async getLanguageTag(){return{value:navigator.language}}parseUa(e){const i={},r=e.indexOf("(")+1;let a=e.indexOf(") AppleWebKit");e.indexOf(") Gecko")!==-1&&(a=e.indexOf(") Gecko"));const s=e.substring(r,a);if(e.indexOf("Android")!==-1){const t=s.replace("; wv","").split("; ").pop();t&&(i.model=t.split(" Build")[0]),i.osVersion=s.split("; ")[1]}else if(i.model=s.split("; ")[0],typeof navigator<"u"&&navigator.oscpu)i.osVersion=navigator.oscpu;else if(e.indexOf("Windows")!==-1)i.osVersion=s;else{const t=s.split("; ").pop();if(t){const n=t.replace(" like Mac OS X","").split(" ");i.osVersion=n[n.length-1].replace(/_/g,".")}}/android/i.test(e)?i.operatingSystem="android":/iPad|iPhone|iPod/.test(e)&&!window.MSStream?i.operatingSystem="ios":/Win/.test(e)?i.operatingSystem="windows":/Mac/i.test(e)?i.operatingSystem="mac":i.operatingSystem="unknown";const l=!!window.ApplePaySession,x=!!window.chrome,p=/Firefox/.test(e),d=/Edg/.test(e),g=/FxiOS/.test(e),c=/CriOS/.test(e),f=/EdgiOS/.test(e);if(l||x&&!d||g||c||f){let t;g?t="FxiOS":c?t="CriOS":f?t="EdgiOS":l?t="Version":t="Chrome";const n=e.split(" ");for(const o of n)if(o.includes(t)){const v=o.split("/")[1];i.browserVersion=v}}else if(p||d){const o=e.split("").reverse().join("").split("/")[0].split("").reverse().join("");i.browserVersion=o}return i}getUid(){if(typeof window<"u"&&window.localStorage){let e=window.localStorage.getItem("_capuid");return e||(e=this.uuid4(),window.localStorage.setItem("_capuid",e),e)}return this.uuid4()}uuid4(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(e){const i=Math.random()*16|0;return(e==="x"?i:i&3|8).toString(16)})}}export{y as DeviceWeb};

package/build/static/demo/v2/preview/mobile/assets/{web-DDO42EBh.js → web-WXnmPAbi.js}

@@ -1 +1 @@
-import{W as n}from"./index-CMU7wxQd.js";class o extends n{constructor(){super(),typeof screen<"u"&&typeof screen.orientation<"u"&&screen.orientation.addEventListener("change",()=>{const e=screen.orientation.type;this.notifyListeners("screenOrientationChange",{type:e})})}async orientation(){if(typeof screen>"u"||!screen.orientation)throw this.unavailable("ScreenOrientation API not available in this browser");return{type:screen.orientation.type}}async lock(e){if(typeof screen>"u"||!screen.orientation||!screen.orientation.lock)throw this.unavailable("ScreenOrientation API not available in this browser");try{await screen.orientation.lock(e.orientation)}catch(i){throw this.unavailable("ScreenOrientation API not available in this browser")}}async unlock(){if(typeof screen>"u"||!screen.orientation||!screen.orientation.unlock)throw this.unavailable("ScreenOrientation API not available in this browser");try{screen.orientation.unlock()}catch(e){throw this.unavailable("ScreenOrientation API not available in this browser")}}}export{o as ScreenOrientationWeb};
+import{W as n}from"./index-Cz_xGxp8.js";class o extends n{constructor(){super(),typeof screen<"u"&&typeof screen.orientation<"u"&&screen.orientation.addEventListener("change",()=>{const e=screen.orientation.type;this.notifyListeners("screenOrientationChange",{type:e})})}async orientation(){if(typeof screen>"u"||!screen.orientation)throw this.unavailable("ScreenOrientation API not available in this browser");return{type:screen.orientation.type}}async lock(e){if(typeof screen>"u"||!screen.orientation||!screen.orientation.lock)throw this.unavailable("ScreenOrientation API not available in this browser");try{await screen.orientation.lock(e.orientation)}catch(i){throw this.unavailable("ScreenOrientation API not available in this browser")}}async unlock(){if(typeof screen>"u"||!screen.orientation||!screen.orientation.unlock)throw this.unavailable("ScreenOrientation API not available in this browser");try{screen.orientation.unlock()}catch(e){throw this.unavailable("ScreenOrientation API not available in this browser")}}}export{o as ScreenOrientationWeb};

package/build/static/demo/v2/preview/mobile/assets/{web-legacy-BOr-zY6N.js → web-legacy-B3yALOmz.js}

@@ -1 +1 @@
-System.register(["./index-legacy-BwOiApdE.js"],(function(e,n){"use strict";var t;return{setters:[e=>{t=e.W}],execute:function(){e("ScreenOrientationWeb",class extends t{constructor(){super(),"undefined"!=typeof screen&&void 0!==screen.orientation&&screen.orientation.addEventListener("change",(()=>{const e=screen.orientation.type;this.notifyListeners("screenOrientationChange",{type:e})}))}async orientation(){if("undefined"==typeof screen||!screen.orientation)throw this.unavailable("ScreenOrientation API not available in this browser");return{type:screen.orientation.type}}async lock(e){if("undefined"==typeof screen||!screen.orientation||!screen.orientation.lock)throw this.unavailable("ScreenOrientation API not available in this browser");try{await screen.orientation.lock(e.orientation)}catch(n){throw this.unavailable("ScreenOrientation API not available in this browser")}}async unlock(){if("undefined"==typeof screen||!screen.orientation||!screen.orientation.unlock)throw this.unavailable("ScreenOrientation API not available in this browser");try{screen.orientation.unlock()}catch(e){throw this.unavailable("ScreenOrientation API not available in this browser")}}})}}}));
+System.register(["./index-legacy-BQCo13yp.js"],(function(e,n){"use strict";var t;return{setters:[e=>{t=e.W}],execute:function(){e("ScreenOrientationWeb",class extends t{constructor(){super(),"undefined"!=typeof screen&&void 0!==screen.orientation&&screen.orientation.addEventListener("change",(()=>{const e=screen.orientation.type;this.notifyListeners("screenOrientationChange",{type:e})}))}async orientation(){if("undefined"==typeof screen||!screen.orientation)throw this.unavailable("ScreenOrientation API not available in this browser");return{type:screen.orientation.type}}async lock(e){if("undefined"==typeof screen||!screen.orientation||!screen.orientation.lock)throw this.unavailable("ScreenOrientation API not available in this browser");try{await screen.orientation.lock(e.orientation)}catch(n){throw this.unavailable("ScreenOrientation API not available in this browser")}}async unlock(){if("undefined"==typeof screen||!screen.orientation||!screen.orientation.unlock)throw this.unavailable("ScreenOrientation API not available in this browser");try{screen.orientation.unlock()}catch(e){throw this.unavailable("ScreenOrientation API not available in this browser")}}})}}}));

package/build/static/demo/v2/preview/mobile/assets/{web-legacy-DPDRXL8i.js → web-legacy-BKjzvQTg.js}

@@ -1 +1 @@
-System.register(["./index-legacy-BwOiApdE.js"],(function(e,t){"use strict";var i;return{setters:[e=>{i=e.W}],execute:function(){e("DeviceWeb",class extends i{async getId(){return{identifier:this.getUid()}}async getInfo(){if("undefined"==typeof navigator||!navigator.userAgent)throw this.unavailable("Device API not available in this browser");const e=navigator.userAgent,t=this.parseUa(e);return{model:t.model,platform:"web",operatingSystem:t.operatingSystem,osVersion:t.osVersion,manufacturer:navigator.vendor,isVirtual:!1,webViewVersion:t.browserVersion}}async getBatteryInfo(){if("undefined"==typeof navigator||!navigator.getBattery)throw this.unavailable("Device API not available in this browser");let e={};try{e=await navigator.getBattery()}catch(t){}return{batteryLevel:e.level,isCharging:e.charging}}async getLanguageCode(){return{value:navigator.language.split("-")[0].toLowerCase()}}async getLanguageTag(){return{value:navigator.language}}parseUa(e){const t={},i=e.indexOf("(")+1;let n=e.indexOf(") AppleWebKit");-1!==e.indexOf(") Gecko")&&(n=e.indexOf(") Gecko"));const o=e.substring(i,n);if(-1!==e.indexOf("Android")){const e=o.replace("; wv","").split("; ").pop();e&&(t.model=e.split(" Build")[0]),t.osVersion=o.split("; ")[1]}else if(t.model=o.split("; ")[0],"undefined"!=typeof navigator&&navigator.oscpu)t.osVersion=navigator.oscpu;else if(-1!==e.indexOf("Windows"))t.osVersion=o;else{const e=o.split("; ").pop();if(e){const i=e.replace(" like Mac OS X","").split(" ");t.osVersion=i[i.length-1].replace(/_/g,".")}}/android/i.test(e)?t.operatingSystem="android":/iPad|iPhone|iPod/.test(e)&&!window.MSStream?t.operatingSystem="ios":/Win/.test(e)?t.operatingSystem="windows":/Mac/i.test(e)?t.operatingSystem="mac":t.operatingSystem="unknown";const r=!!window.ApplePaySession,s=!!window.chrome,a=/Firefox/.test(e),l=/Edg/.test(e),g=/FxiOS/.test(e),d=/CriOS/.test(e),c=/EdgiOS/.test(e);if(r||s&&!l||g||d||c){let i;i=g?"FxiOS":d?"CriOS":c?"EdgiOS":r?"Version":"Chrome";const n=e.split(" ");for(const e of n)if(e.includes(i)){const i=e.split("/")[1];t.browserVersion=i}}else if(a||l){const i=e.split("").reverse().join("").split("/")[0].split("").reverse().join("");t.browserVersion=i}return t}getUid(){if("undefined"!=typeof window&&window.localStorage){let e=window.localStorage.getItem("_capuid");return e||(e=this.uuid4(),window.localStorage.setItem("_capuid",e),e)}return this.uuid4()}uuid4(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,(function(e){const t=16*Math.random()|0;return("x"===e?t:3&t|8).toString(16)}))}})}}}));
+System.register(["./index-legacy-BQCo13yp.js"],(function(e,t){"use strict";var i;return{setters:[e=>{i=e.W}],execute:function(){e("DeviceWeb",class extends i{async getId(){return{identifier:this.getUid()}}async getInfo(){if("undefined"==typeof navigator||!navigator.userAgent)throw this.unavailable("Device API not available in this browser");const e=navigator.userAgent,t=this.parseUa(e);return{model:t.model,platform:"web",operatingSystem:t.operatingSystem,osVersion:t.osVersion,manufacturer:navigator.vendor,isVirtual:!1,webViewVersion:t.browserVersion}}async getBatteryInfo(){if("undefined"==typeof navigator||!navigator.getBattery)throw this.unavailable("Device API not available in this browser");let e={};try{e=await navigator.getBattery()}catch(t){}return{batteryLevel:e.level,isCharging:e.charging}}async getLanguageCode(){return{value:navigator.language.split("-")[0].toLowerCase()}}async getLanguageTag(){return{value:navigator.language}}parseUa(e){const t={},i=e.indexOf("(")+1;let n=e.indexOf(") AppleWebKit");-1!==e.indexOf(") Gecko")&&(n=e.indexOf(") Gecko"));const o=e.substring(i,n);if(-1!==e.indexOf("Android")){const e=o.replace("; wv","").split("; ").pop();e&&(t.model=e.split(" Build")[0]),t.osVersion=o.split("; ")[1]}else if(t.model=o.split("; ")[0],"undefined"!=typeof navigator&&navigator.oscpu)t.osVersion=navigator.oscpu;else if(-1!==e.indexOf("Windows"))t.osVersion=o;else{const e=o.split("; ").pop();if(e){const i=e.replace(" like Mac OS X","").split(" ");t.osVersion=i[i.length-1].replace(/_/g,".")}}/android/i.test(e)?t.operatingSystem="android":/iPad|iPhone|iPod/.test(e)&&!window.MSStream?t.operatingSystem="ios":/Win/.test(e)?t.operatingSystem="windows":/Mac/i.test(e)?t.operatingSystem="mac":t.operatingSystem="unknown";const r=!!window.ApplePaySession,s=!!window.chrome,a=/Firefox/.test(e),l=/Edg/.test(e),g=/FxiOS/.test(e),d=/CriOS/.test(e),c=/EdgiOS/.test(e);if(r||s&&!l||g||d||c){let i;i=g?"FxiOS":d?"CriOS":c?"EdgiOS":r?"Version":"Chrome";const n=e.split(" ");for(const e of n)if(e.includes(i)){const i=e.split("/")[1];t.browserVersion=i}}else if(a||l){const i=e.split("").reverse().join("").split("/")[0].split("").reverse().join("");t.browserVersion=i}return t}getUid(){if("undefined"!=typeof window&&window.localStorage){let e=window.localStorage.getItem("_capuid");return e||(e=this.uuid4(),window.localStorage.setItem("_capuid",e),e)}return this.uuid4()}uuid4(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,(function(e){const t=16*Math.random()|0;return("x"===e?t:3&t|8).toString(16)}))}})}}}));

package/build/static/demo/v2/preview/mobile/index.html

@@ -26,8 +26,8 @@
       rel="stylesheet"
       href="./additional-theme/corporate-theme/dist/css/brand-theme.css"
     />
-    <script type="module" crossorigin src="./assets/index-CMU7wxQd.js"></script>
-    <link rel="stylesheet" href="./assets/index-d_VLaNiR.css">
+    <script type="module" crossorigin src="./assets/index-Cz_xGxp8.js"></script>
+    <link rel="stylesheet" href="./assets/index-j25tZv6Y.css">
     <script type="module">import.meta.url;import("_").catch(()=>1);(async function*(){})().next();if(location.protocol!="file:"){window.__vite_is_modern_browser=true}</script>
     <script type="module">!function(){if(window.__vite_is_modern_browser)return;console.warn("vite: loading legacy chunks, syntax error above and the same error below should be ignored");var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");n.src=e.src,n.onload=function(){System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))},document.body.appendChild(n)}();</script>
   </head>
@@ -36,6 +36,6 @@
     
     <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
     <script nomodule crossorigin id="vite-legacy-polyfill" src="./assets/polyfills-legacy-DoM6p1vF.js"></script>
-    <script nomodule crossorigin id="vite-legacy-entry" data-src="./assets/index-legacy-BwOiApdE.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+    <script nomodule crossorigin id="vite-legacy-entry" data-src="./assets/index-legacy-BQCo13yp.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
   </body>
 </html>

package/build/static/demo/v2/react/blind-variants.tsx

@@ -15,8 +15,8 @@ import { IxBlind } from '@siemens/ix-react';
 export default () => {
   return (
     <>
-      <IxBlind icon={iconBulb} label="Insight" sublabel="sublabel">
-        <div>Insight content</div>
+      <IxBlind icon={iconBulb} label="Example" sublabel="sublabel">
+        <div>Filled content</div>
       </IxBlind>
       <IxBlind
         variant="outline"

package/build/static/demo/v2/react/datepicker.tsx

@@ -10,5 +10,5 @@
 import { IxDatePicker } from '@siemens/ix-react';
 
 export default () => {
-  return <IxDatePicker range={false}/>;
+  return <IxDatePicker />;
 };

package/build/static/demo/v2/react/input.tsx

@@ -1,14 +1,93 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { IxInput } from '@siemens/ix-react';
+import { IxInput, IxButton, IxDateInput, IxTimeInput, IxNumberInput } from '@siemens/ix-react';
 
 export default () => {
-  return <IxInput placeholder="Enter your Username"></IxInput>;
+  const handleSubmit = (e: React.FormEvent, formType: string) => {
+    e.preventDefault();
+    console.log(`${formType} form submitted`);
+  };
+
+  return (
+    <div style={{ display: 'flex', gap: '2rem' }}>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          console.log(e);
+        }}
+        id="login-form"
+      >
+        <IxInput type="email" name="email" id="email" />
+        <IxButton
+          form="login-form"
+          type="submit"
+          onClick={(evt) => console.log('Clicked Submit!')}
+        >
+          Login
+        </IxButton>
+      </form>
+      {/* IxInput Form */}
+      <form
+        onSubmit={(e) => handleSubmit(e, 'IxInput')}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1rem',
+          width: '250px',
+        }}
+      >
+        <h3>IxInput Form</h3>
+        <IxInput type="email" name="email" placeholder="Email" />
+        <IxInput type="password" name="password" placeholder="Password" />
+        <IxNumberInput name="age" placeholder="Age" />
+        <IxDateInput name="dob" placeholder="Date of Birth" />
+        <IxTimeInput name="appointment" placeholder="Appointment Time" />
+        <IxButton type="submit">Submit</IxButton>
+      </form>
+
+      {/* Native Input Form */}
+      <form
+        onSubmit={(e) => handleSubmit(e, 'Native')}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1rem',
+          width: '250px',
+        }}
+      >
+        <h3>Native Input Form</h3>
+        <input
+          type="email"
+          name="email"
+          placeholder="Email"
+          style={{
+            padding: '8px',
+            border: '1px solid #ccc',
+            borderRadius: '4px',
+          }}
+        />
+        <input
+          type="password"
+          name="password"
+          placeholder="Password"
+          style={{
+            padding: '8px',
+            border: '1px solid #ccc',
+            borderRadius: '4px',
+          }}
+        />
+        <button
+          type="submit"
+          style={{
+            padding: '8px',
+            backgroundColor: '#007acc',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+          }}
+        >
+          Submit
+        </button>
+        <input type="submit" value="Native Submit Input" />
+      </form>
+    </div>
+  );
 };

package/build/static/demo/v2/react/modal-close.tsx

@@ -0,0 +1,59 @@
+/*
+ * SPDX-FileCopyrightText: 2025 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  IxButton,
+  IxModalContent,
+  IxModalFooter,
+  IxModalHeader,
+  Modal,
+  ModalRef,
+  showModal,
+  dismissModal,
+} from '@siemens/ix-react';
+import { useRef } from 'react';
+
+function CustomModal() {
+  const modalRef = useRef<ModalRef>(null);
+
+  const close = () => {
+    modalRef.current?.close('close payload!');
+  };
+  const dismiss = () => {
+    modalRef.current?.dismiss('dismiss payload');
+  };
+
+  return (
+    <Modal ref={modalRef}>
+      <IxModalHeader onCloseClick={() => dismiss()}>
+        Message headline
+      </IxModalHeader>
+      <IxModalContent>Message text lorem ipsum</IxModalContent>
+      <IxModalFooter>
+        <IxButton variant="secondary" onClick={() => dismiss()}>
+          Cancel
+        </IxButton>
+        <IxButton onClick={() => close()}>OK</IxButton>
+      </IxModalFooter>
+    </Modal>
+  );
+}
+
+export default () => {
+  async function show() {
+    const modalInstance = await showModal({
+      content: <CustomModal />,
+    });
+    setTimeout(() => {
+      dismissModal(modalInstance);
+    }, 5000);
+  }
+
+  return <IxButton onClick={show}>Show modal (auto-dismiss)</IxButton>;
+};

package/build/static/demo/v2/react/pane-layout.tsx

@@ -35,7 +35,7 @@ export default () => {
         <p>This is the bottom pane.</p>
       </IxPane>
 
-      <div slot="content">
+      <div>
         <IxButton
           onClick={() =>
             setVariant(variant === 'inline' ? 'floating' : 'inline')

package/build/static/demo/v2/react/split-button.scoped.css

@@ -0,0 +1,7 @@
+body {
+  display: flex;
+}
+
+ix-split-button {
+  margin: 0.25rem;
+}

package/build/static/demo/v2/react/split-button.tsx

@@ -9,12 +9,27 @@
 
 import { iconChevronDownSmall } from '@siemens/ix-icons/icons';
 import { IxDropdownItem, IxSplitButton } from '@siemens/ix-react';
+import './split-button.scoped.css'
 
 export default () => {
   return (
-    <IxSplitButton label="Action text" splitIcon={iconChevronDownSmall}>
-      <IxDropdownItem label="Item 1"></IxDropdownItem>
-      <IxDropdownItem label="Item 2"></IxDropdownItem>
-    </IxSplitButton>
+    <div>
+      <IxSplitButton label="Action text" splitIcon={iconChevronDownSmall}>
+        <IxDropdownItem label="Item 1"></IxDropdownItem>
+        <IxDropdownItem label="Item 2"></IxDropdownItem>
+      </IxSplitButton>
+      <IxSplitButton label="Action text" splitIcon={iconChevronDownSmall} disabled>
+        <IxDropdownItem label="Item 1"></IxDropdownItem>
+        <IxDropdownItem label="Item 2"></IxDropdownItem>
+      </IxSplitButton>
+      <IxSplitButton label="Action text" splitIcon={iconChevronDownSmall} disableButton>
+        <IxDropdownItem label="Item 1"></IxDropdownItem>
+        <IxDropdownItem label="Item 2"></IxDropdownItem>
+      </IxSplitButton>
+      <IxSplitButton label="Action text" splitIcon={iconChevronDownSmall} disableDropdownButton>
+        <IxDropdownItem label="Item 1"></IxDropdownItem>
+        <IxDropdownItem label="Item 2"></IxDropdownItem>
+      </IxSplitButton>
+    </div>
   );
 };

package/build/static/demo/v2/react/theme-switcher.tsx

@@ -9,48 +9,73 @@
 
 import './theme-switcher.scoped.css';
 
-import { IxSelectCustomEvent, themeSwitcher } from '@siemens/ix';
+import { themeSwitcher, ThemeVariant } from '@siemens/ix';
 import {
   IxButton,
+  IxCheckbox,
   IxCol,
   IxLayoutGrid,
   IxRow,
   IxSelect,
   IxSelectItem,
 } from '@siemens/ix-react';
-import { ChangeEvent, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 export default () => {
-  const [themes] = useState(['theme-classic-light', 'theme-classic-dark']);
-  const [selectedTheme, setSelectedTheme] = useState(themes[1]);
+  const [variants] = useState<ThemeVariant[]>(['light', 'dark']);
+  const [selectedVariant, setSelectedVariant] = useState<ThemeVariant>('dark');
+  const [useSystemTheme, setUseSystemTheme] = useState(false);
 
-  const valueChange = (event: IxSelectCustomEvent<string | string[]>) => {
-    const newTheme: string = event.detail as string;
-    themeSwitcher.setTheme(newTheme);
-    setSelectedTheme(newTheme);
+  useEffect(() => {
+    themeSwitcher.setTheme('classic');
+    themeSwitcher.setVariant(selectedVariant);
+  }, []);
+
+  const onValueChange = (event: CustomEvent<string | string[]>) => {
+    if (useSystemTheme) {
+      return;
+    }
+
+    const newVariant = event.detail as ThemeVariant;
+
+    themeSwitcher.setVariant(newVariant);
+    setSelectedVariant(newVariant);
   };
 
   const toggle = () => {
+    if (useSystemTheme) {
+      return;
+    }
+
     themeSwitcher.toggleMode();
+
+    const newVariant = selectedVariant === 'light' ? 'dark' : 'light';
+
+    setSelectedVariant(newVariant);
   };
 
-  const systemChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
-    if (target.checked) {
+  const onCheckedChange = (event: CustomEvent<boolean>) => {
+    const checked = event.detail;
+
+    setUseSystemTheme(checked);
+
+    if (checked) {
       themeSwitcher.setVariant();
-      return;
+    } else {
+      themeSwitcher.setVariant(selectedVariant);
     }
-
-    themeSwitcher.setTheme(selectedTheme);
   };
 
   return (
-    <IxLayoutGrid class="theme-switcher">
+    <IxLayoutGrid className="theme-switcher">
       <IxRow>
         <IxCol size="2">
           <span>Light/Dark</span>
         </IxCol>
         <IxCol>
-          <IxButton onClick={toggle}>Toggle mode</IxButton>
+          <IxButton onClick={toggle} disabled={useSystemTheme}>
+            Toggle mode
+          </IxButton>
         </IxCol>
       </IxRow>
 
@@ -58,15 +83,15 @@ export default () => {
         <IxCol size="2">Theme</IxCol>
         <IxCol>
           <IxSelect
-            value={selectedTheme}
-            onValueChange={valueChange}
-            placeholder="Select a theme"
+            value={selectedVariant}
+            onValueChange={onValueChange}
+            disabled={useSystemTheme}
           >
-            {themes.map((theme) => (
+            {variants.map((variant) => (
               <IxSelectItem
-                key={theme}
-                label={theme}
-                value={theme}
+                key={variant}
+                label={variant}
+                value={variant}
               ></IxSelectItem>
             ))}
           </IxSelect>
@@ -76,15 +101,7 @@ export default () => {
       <IxRow>
         <IxCol size="2"></IxCol>
         <IxCol>
-          <input
-            className="ix-form-control"
-            type="checkbox"
-            id="system"
-            onChange={systemChange}
-          />
-          <label className="ix-form-label" htmlFor="system">
-            Use System
-          </label>
+          <IxCheckbox label="Use system" onCheckedChange={onCheckedChange} />
         </IxCol>
       </IxRow>
     </IxLayoutGrid>