@ionic/core 8.5.5-dev.11747137265.184b7749 → 8.5.5-dev.11747232541.1f7a2d34

package/dist/cjs/ion-toggle.cjs.entry.js

@@ -20,7 +20,7 @@ const checkSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5v
 
 const minusSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yMjQsMTI4YTgsOCwwLDAsMS04LDhINDBhOCw4LDAsMCwxLDAtMTZIMjE2QTgsOCwwLDAsMSwyMjQsMTI4WiIvPjwvc3ZnPg==';
 
-const toggleIonicCss = ":host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.toggle-disabled){pointer-events:none}input{display:none}.toggle-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;cursor:inherit}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.toggle-bottom{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;white-space:normal}.toggle-bottom .error-text{display:none}.toggle-bottom .helper-text{display:block}:host(.ion-touched.ion-invalid) .toggle-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .toggle-bottom .helper-text{display:none}:host(.toggle-label-placement-start) .toggle-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-space-between) .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.toggle-justify-start) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-end) .toggle-wrapper{-ms-flex-pack:end;justify-content:end}:host(.toggle-alignment-start) .toggle-wrapper{-ms-flex-align:start;align-items:start}:host(.toggle-alignment-center) .toggle-wrapper{-ms-flex-align:center;align-items:center}:host(.toggle-justify-space-between),:host(.toggle-justify-start),:host(.toggle-justify-end),:host(.toggle-alignment-start),:host(.toggle-alignment-center){display:block}.toggle-icon-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;-webkit-transition:var(--handle-transition);transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--track-background);overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--track-background-checked)}.toggle-inner{border-radius:var(--handle-border-radius);position:absolute;left:var(--handle-spacing);width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);-webkit-transition:var(--handle-transition);transition:var(--handle-transition);background:var(--handle-background);-webkit-box-shadow:var(--handle-box-shadow);box-shadow:var(--handle-box-shadow);contain:strict}:host(.toggle-ltr) .toggle-inner{left:var(--handle-spacing)}:host(.toggle-rtl) .toggle-inner{right:var(--handle-spacing)}:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width)), 0, 0);transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width)), 0, 0);transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{background:var(--handle-background-checked)}:host(.toggle-ltr.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{--track-background:var(--ion-primitives-neutral-800, #626262);--track-background-checked:var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));--border-radius:var(--ion-border-radius-full, 999px);--focus-ring-color:var(--ion-border-focus-default, #b5c0f7);--focus-ring-width:var(--ion-border-size-050, 2px);--handle-background:var(--ion-primitives-base-white, #ffffff);--handle-background-checked:var(--ion-primitives-base-white, #ffffff);--handle-border-radius:var(--ion-border-radius-full, 999px);--handle-height:var(--ion-scale-500, 20px);--handle-max-height:var(--ion-scale-500, 20px);--handle-width:var(--ion-scale-500, 20px);--handle-spacing:var(--ion-space-050, 2px);--handle-transition:transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms,\n    right 110ms ease-in-out 80ms;font-size:var(--ion-font-size-350, 0.875rem);font-weight:var(--ion-font-weight-regular, 400);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-600, 24px);text-decoration:none;text-transform:none;width:100%;z-index:2}.toggle-wrapper{-ms-flex-align:center;align-items:center;min-height:var(--ion-scale-1200, 48px)}.native-wrapper .toggle-icon{width:var(--ion-scale-1100, 44px);height:var(--ion-scale-600, 24px);overflow:hidden}:host(.ion-color.toggle-checked) .toggle-icon{background:var(--ion-color-base)}.toggle-bottom{font-size:var(--ion-font-size-350, 0.875rem);font-weight:var(--ion-font-weight-regular, 400);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-600, 24px);text-decoration:none;text-transform:none}.toggle-bottom .error-text{color:var(--ion-semantics-danger-800, #bf2222)}.toggle-bottom .helper-text{color:var(--ion-primitives-neutral-800, #626262)}:host(.ion-focused) .toggle-icon{outline:var(--focus-ring-width) var(--ion-border-style-solid, solid) var(--focus-ring-color);outline-offset:var(--focus-ring-width)}:host(.ion-activated) .toggle-icon::after{right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--ion-state-press, rgba(36, 36, 36, 0.08));content:\"\"}:host(.toggle-disabled) .toggle-icon::after{right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--ion-state-disabled, rgba(255, 255, 255, 0.6));content:\"\";pointer-events:none}.toggle-inner{will-change:background-color, transform;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--ion-primitives-neutral-1200, #242424)}.toggle-inner .toggle-switch-icon{width:var(--ion-scale-400, 16px);height:var(--ion-scale-400, 16px)}:host .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--ion-space-400, 16px);margin-inline-end:var(--ion-space-400, 16px);color:var(--ion-primitives-neutral-1200, #242424)}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-label-placement-end) .label-text-wrapper{-webkit-margin-start:var(--ion-space-400, 16px);margin-inline-start:var(--ion-space-400, 16px);-webkit-margin-end:0;margin-inline-end:0}";
+const toggleIonicCss = ":host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.toggle-disabled){pointer-events:none}input{display:none}.toggle-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;cursor:inherit}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.toggle-bottom{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;white-space:normal}.toggle-bottom .error-text{display:none}.toggle-bottom .helper-text{display:block}:host(.ion-touched.ion-invalid) .toggle-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .toggle-bottom .helper-text{display:none}:host(.toggle-label-placement-start) .toggle-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-space-between) .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.toggle-justify-start) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-end) .toggle-wrapper{-ms-flex-pack:end;justify-content:end}:host(.toggle-alignment-start) .toggle-wrapper{-ms-flex-align:start;align-items:start}:host(.toggle-alignment-center) .toggle-wrapper{-ms-flex-align:center;align-items:center}:host(.toggle-justify-space-between),:host(.toggle-justify-start),:host(.toggle-justify-end),:host(.toggle-alignment-start),:host(.toggle-alignment-center){display:block}.toggle-icon-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;-webkit-transition:var(--handle-transition);transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--track-background);overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--track-background-checked)}.toggle-inner{border-radius:var(--handle-border-radius);position:absolute;left:var(--handle-spacing);width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);-webkit-transition:var(--handle-transition);transition:var(--handle-transition);background:var(--handle-background);-webkit-box-shadow:var(--handle-box-shadow);box-shadow:var(--handle-box-shadow);contain:strict}:host(.toggle-ltr) .toggle-inner{left:var(--handle-spacing)}:host(.toggle-rtl) .toggle-inner{right:var(--handle-spacing)}:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width)), 0, 0);transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width)), 0, 0);transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{background:var(--handle-background-checked)}:host(.toggle-ltr.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{--track-background:var(--ion-primitives-neutral-800, #626262);--track-background-checked:var(--ion-color-primary, var(--ion-bg-primary-base-default, var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)))));--border-radius:var(--ion-border-radius-full, 999px);--focus-ring-color:var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));--focus-ring-width:var(--ion-border-size-050, var(--ion-scale-050, 2px));--handle-background:var(--ion-primitives-base-white, #ffffff);--handle-background-checked:var(--ion-primitives-base-white, #ffffff);--handle-border-radius:var(--ion-border-radius-full, 999px);--handle-height:var(--ion-scale-500, 20px);--handle-max-height:var(--ion-scale-500, 20px);--handle-width:var(--ion-scale-500, 20px);--handle-spacing:var(--ion-space-050, var(--ion-scale-050, 2px));--handle-transition:transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms,\n    right 110ms ease-in-out 80ms;font-size:var(--ion-font-size-350, 0.875rem);font-weight:var(--ion-font-weight-regular, 400);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-600, var(--ion-scale-600, 24px));text-decoration:none;text-transform:none;width:100%;z-index:2}.toggle-wrapper{-ms-flex-align:center;align-items:center;min-height:var(--ion-scale-1200, 48px)}.native-wrapper .toggle-icon{width:var(--ion-scale-1100, 44px);height:var(--ion-scale-600, 24px);overflow:hidden}:host(.ion-color.toggle-checked) .toggle-icon{background:var(--ion-color-base)}.toggle-bottom{font-size:var(--ion-font-size-350, 0.875rem);font-weight:var(--ion-font-weight-regular, 400);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-600, var(--ion-scale-600, 24px));text-decoration:none;text-transform:none}.toggle-bottom .error-text{color:var(--ion-semantics-danger-800, var(--ion-primitives-red-800, #bf2222))}.toggle-bottom .helper-text{color:var(--ion-primitives-neutral-800, #626262)}:host(.ion-focused) .toggle-icon{outline:var(--focus-ring-width) var(--ion-border-style-solid, solid) var(--focus-ring-color);outline-offset:var(--focus-ring-width)}:host(.ion-activated) .toggle-icon::after{right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--ion-state-press, rgba(36, 36, 36, 0.08));content:\"\"}:host(.toggle-disabled) .toggle-icon::after{right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--ion-state-disabled, rgba(255, 255, 255, 0.6));content:\"\";pointer-events:none}.toggle-inner{will-change:background-color, transform;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--ion-primitives-neutral-1200, #242424)}.toggle-inner .toggle-switch-icon{width:var(--ion-scale-400, 16px);height:var(--ion-scale-400, 16px)}:host .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--ion-space-400, var(--ion-scale-400, 16px));margin-inline-end:var(--ion-space-400, var(--ion-scale-400, 16px));color:var(--ion-primitives-neutral-1200, #242424)}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-label-placement-end) .label-text-wrapper{-webkit-margin-start:var(--ion-space-400, var(--ion-scale-400, 16px));margin-inline-start:var(--ion-space-400, var(--ion-scale-400, 16px));-webkit-margin-end:0;margin-inline-end:0}";
 const IonToggleIonicStyle0 = toggleIonicCss;
 
 const toggleIosCss = ":host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.toggle-disabled){pointer-events:none}input{display:none}.toggle-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;cursor:inherit}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.toggle-bottom{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;white-space:normal}.toggle-bottom .error-text{display:none}.toggle-bottom .helper-text{display:block}:host(.ion-touched.ion-invalid) .toggle-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .toggle-bottom .helper-text{display:none}:host(.toggle-label-placement-start) .toggle-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-space-between) .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.toggle-justify-start) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-end) .toggle-wrapper{-ms-flex-pack:end;justify-content:end}:host(.toggle-alignment-start) .toggle-wrapper{-ms-flex-align:start;align-items:start}:host(.toggle-alignment-center) .toggle-wrapper{-ms-flex-align:center;align-items:center}:host(.toggle-justify-space-between),:host(.toggle-justify-start),:host(.toggle-justify-end),:host(.toggle-alignment-start),:host(.toggle-alignment-center){display:block}.toggle-icon-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;-webkit-transition:var(--handle-transition);transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--track-background);overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--track-background-checked)}.toggle-inner{border-radius:var(--handle-border-radius);position:absolute;left:var(--handle-spacing);width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);-webkit-transition:var(--handle-transition);transition:var(--handle-transition);background:var(--handle-background);-webkit-box-shadow:var(--handle-box-shadow);box-shadow:var(--handle-box-shadow);contain:strict}:host(.toggle-ltr) .toggle-inner{left:var(--handle-spacing)}:host(.toggle-rtl) .toggle-inner{right:var(--handle-spacing)}:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width)), 0, 0);transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width)), 0, 0);transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{background:var(--handle-background-checked)}:host(.toggle-ltr.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{z-index:2}:host(.ion-focused) input{border:2px solid #5e9ed6}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.toggle-label-placement-stacked) .native-wrapper{margin-bottom:10px}.toggle-bottom{padding-top:4px;font-size:0.75rem}:host(.toggle-label-placement-stacked) .toggle-bottom{font-size:1rem}.toggle-bottom .error-text{color:var(--ion-color-danger, #c5000f)}.toggle-bottom .helper-text{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.toggle-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.toggle-label-placement-stacked) .toggle-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.toggle-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.toggle-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host{--track-background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.088);--track-background-checked:var(--ion-color-primary, #0054e9);--border-radius:15.5px;--handle-background:#ffffff;--handle-background-checked:#ffffff;--handle-border-radius:25.5px;--handle-box-shadow:0 3px 4px rgba(0, 0, 0, 0.06), 0 3px 8px rgba(0, 0, 0, 0.06);--handle-height:calc(31px - (2px * 2));--handle-max-height:calc(100% - var(--handle-spacing) * 2);--handle-width:calc(31px - (2px * 2));--handle-spacing:2px;--handle-transition:transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms}.native-wrapper .toggle-icon{width:51px;height:31px;overflow:hidden}:host(.ion-color.toggle-checked) .toggle-icon{background:var(--ion-color-base)}:host(.toggle-activated) .toggle-switch-icon{opacity:0}.toggle-icon{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition:background-color 300ms;transition:background-color 300ms}.toggle-inner{will-change:transform}.toggle-switch-icon{position:absolute;top:50%;width:11px;height:11px;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:opacity 300ms, color 300ms;transition:opacity 300ms, color 300ms}.toggle-switch-icon{position:absolute;color:var(--ion-color-dark, #222428)}:host(.toggle-ltr) .toggle-switch-icon{right:6px}:host(.toggle-rtl) .toggle-switch-icon{right:initial;left:6px;}:host(.toggle-checked) .toggle-switch-icon.toggle-switch-icon-checked{color:var(--ion-color-contrast, #fff)}:host(.toggle-checked) .toggle-switch-icon:not(.toggle-switch-icon-checked){opacity:0}.toggle-switch-icon-checked{position:absolute;width:15px;height:15px}.toggle-switch-icon-checked-default{-webkit-transform:translateY(-50%) rotate(90deg);transform:translateY(-50%) rotate(90deg)}:host(.toggle-ltr) .toggle-switch-icon-checked{right:initial;left:4px;}:host(.toggle-rtl) .toggle-switch-icon-checked{right:4px}:host(.toggle-activated) .toggle-icon::before,:host(.toggle-checked) .toggle-icon::before{-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0)}:host(.toggle-activated.toggle-checked) .toggle-inner::before{-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0)}:host(.toggle-activated) .toggle-inner{width:calc(var(--handle-width) + 6px)}:host(.toggle-ltr.toggle-activated.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width) - 6px), 0, 0);transform:translate3d(calc(100% - var(--handle-width) - 6px), 0, 0)}:host(.toggle-rtl.toggle-activated.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0);transform:translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0)}:host(.toggle-disabled){opacity:0.3}";

package/dist/collection/components/accordion/accordion.ionic.css

@@ -127,17 +127,17 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host::after {
-  -webkit-margin-start: var(--ion-space-400, 16px);
-  margin-inline-start: var(--ion-space-400, 16px);
-  -webkit-margin-end: var(--ion-space-400, 16px);
-  margin-inline-end: var(--ion-space-400, 16px);
+  -webkit-margin-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  margin-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  -webkit-margin-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  margin-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
   right: 0;
   left: 0;
   bottom: 0;
   display: block;
   position: absolute;
-  height: var(--ion-border-size-025, 1px);
-  background-color: var(--ion-border-default, #d5d5d5);
+  height: var(--ion-border-size-025, var(--ion-scale-025, 1px));
+  background-color: var(--ion-border-default, var(--ion-primitives-neutral-400, #d5d5d5));
   content: "";
   z-index: 3;
 }
@@ -152,35 +152,35 @@ Do not edit directly, this file was auto-generated.
 
 ::slotted(ion-item[slot=header]) {
   --border-radius: inherit;
-  --color: var(--ion-text-default, #242424);
-  --border-width: var(--ion-border-size-0, 0px);
+  --color: var(--ion-text-default, var(--ion-primitives-neutral-1200, #242424));
+  --border-width: var(--ion-border-size-0, var(--ion-scale-0, 0px));
   --inner-border-width: var(--ion-scale-0, 0px);
   --min-height: var(--ion-scale-700, 28px);
-  --padding-top: var(--ion-space-300, 12px);
-  --padding-end: var(--ion-space-400, 16px);
-  --padding-bottom: var(--ion-space-300, 12px);
-  --padding-start: var(--ion-space-400, 16px);
+  --padding-top: var(--ion-space-300, var(--ion-scale-300, 12px));
+  --padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  --padding-bottom: var(--ion-space-300, var(--ion-scale-300, 12px));
+  --padding-start: var(--ion-space-400, var(--ion-scale-400, 16px));
   font-size: var(--ion-font-size-450, 1.125rem);
   font-weight: var(--ion-font-weight-medium, 500);
   letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-700, 28px);
+  line-height: var(--ion-font-line-height-700, var(--ion-scale-700, 28px));
   text-decoration: none;
   text-transform: none;
 }
 
 #content-wrapper {
-  -webkit-padding-start: var(--ion-space-400, 16px);
-  padding-inline-start: var(--ion-space-400, 16px);
-  -webkit-padding-end: var(--ion-space-400, 16px);
-  padding-inline-end: var(--ion-space-400, 16px);
-  padding-bottom: var(--ion-space-300, 12px);
+  -webkit-padding-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  padding-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  -webkit-padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  padding-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  padding-bottom: var(--ion-space-300, var(--ion-scale-300, 12px));
   font-size: var(--ion-font-size-350, 0.875rem);
   font-weight: var(--ion-font-weight-regular, 400);
   letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-600, 24px);
+  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
   text-decoration: none;
   text-transform: none;
-  color: var(--ion-text-default, #242424);
+  color: var(--ion-text-default, var(--ion-primitives-neutral-1200, #242424));
 }
 
 :host(.accordion-disabled)::before {

package/dist/collection/components/accordion-group/accordion-group.ionic.css

@@ -66,30 +66,30 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host {
-  min-width: calc(var(--ion-scale-6200, 248px) + var(--ion-space-600, 24px));
-  background-color: var(--ion-bg-neutral-subtlest-default, #ffffff);
+  min-width: calc(var(--ion-scale-6200, 248px) + var(--ion-space-600, var(--ion-scale-600, 24px)));
+  background-color: var(--ion-bg-neutral-subtlest-default, var(--ion-primitives-base-white, #ffffff));
 }
 
 :host(.accordion-group-expand-inset) {
-  -webkit-padding-start: var(--ion-space-100, 4px);
-  padding-inline-start: var(--ion-space-100, 4px);
-  -webkit-padding-end: var(--ion-space-100, 4px);
-  padding-inline-end: var(--ion-space-100, 4px);
-  padding-top: var(--ion-space-100, 4px);
-  padding-bottom: var(--ion-space-100, 4px);
+  -webkit-padding-start: var(--ion-space-100, var(--ion-scale-100, 4px));
+  padding-inline-start: var(--ion-space-100, var(--ion-scale-100, 4px));
+  -webkit-padding-end: var(--ion-space-100, var(--ion-scale-100, 4px));
+  padding-inline-end: var(--ion-space-100, var(--ion-scale-100, 4px));
+  padding-top: var(--ion-space-100, var(--ion-scale-100, 4px));
+  padding-bottom: var(--ion-space-100, var(--ion-scale-100, 4px));
 }
 
 :host(.accordion-group-expand-inset.accordion-group-shape-round) {
-  --border-radius: var(--ion-border-radius-400, 16px);
-  border-radius: var(--ion-border-radius-400, 16px);
+  --border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
+  border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
 }
 
 :host(.accordion-group-expand-inset.accordion-group-shape-soft) {
-  --border-radius: var(--ion-border-radius-200, 8px);
-  border-radius: var(--ion-border-radius-200, 8px);
+  --border-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
+  border-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
 }
 
 :host(.accordion-group-expand-inset.accordion-group-shape-rectangular) {
-  --border-radius: var(--ion-border-radius-0, 0px);
-  border-radius: var(--ion-border-radius-0, 0px);
+  --border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
+  border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
 }

package/dist/collection/components/avatar/avatar.ionic.css

@@ -102,19 +102,19 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host {
-  --padding-top: var(--ion-space-0, 0px);
-  --padding-bottom: var(--ion-space-0, 0px);
+  --padding-top: var(--ion-space-0, var(--ion-scale-0, 0px));
+  --padding-bottom: var(--ion-space-0, var(--ion-scale-0, 0px));
   font-size: var(--ion-font-size-450, 1.125rem);
   font-weight: var(--ion-font-weight-medium, 500);
   letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-700, 28px);
+  line-height: var(--ion-font-line-height-700, var(--ion-scale-700, 28px));
   text-decoration: none;
   text-transform: none;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--ion-bg-neutral-subtlest-default, #ffffff);
-  color: var(--ion-text-subtlest, #626262);
+  background: var(--ion-bg-neutral-subtlest-default, var(--ion-primitives-base-white, #ffffff));
+  color: var(--ion-text-subtlest, var(--ion-primitives-neutral-800, #626262));
 }
 
 :host(:not(.avatar-image)) {
@@ -128,12 +128,12 @@ Do not edit directly, this file was auto-generated.
 
 /* 2-Extra Small */
 :host(.avatar-xxsmall) {
-  --padding-end: var(--ion-space-050, 2px);
-  --padding-start: var(--ion-space-050, 2px);
+  --padding-end: var(--ion-space-050, var(--ion-scale-050, 2px));
+  --padding-start: var(--ion-space-050, var(--ion-scale-050, 2px));
   font-size: var(--ion-font-size-300, 0.75rem);
   font-weight: var(--ion-font-weight-medium, 500);
   letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-500, 20px);
+  line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
   text-decoration: none;
   text-transform: none;
   width: var(--ion-scale-400, 16px);
@@ -142,12 +142,12 @@ Do not edit directly, this file was auto-generated.
 
 /* Extra Small */
 :host(.avatar-xsmall) {
-  --padding-end: var(--ion-space-050, 2px);
-  --padding-start: var(--ion-space-050, 2px);
+  --padding-end: var(--ion-space-050, var(--ion-scale-050, 2px));
+  --padding-start: var(--ion-space-050, var(--ion-scale-050, 2px));
   font-size: var(--ion-font-size-300, 0.75rem);
   font-weight: var(--ion-font-weight-medium, 500);
   letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-500, 20px);
+  line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
   text-decoration: none;
   text-transform: none;
   width: var(--ion-scale-600, 24px);
@@ -156,12 +156,12 @@ Do not edit directly, this file was auto-generated.
 
 /* Small */
 :host(.avatar-small) {
-  --padding-end: var(--ion-space-150, 6px);
-  --padding-start: var(--ion-space-150, 6px);
+  --padding-end: var(--ion-space-150, var(--ion-scale-150, 6px));
+  --padding-start: var(--ion-space-150, var(--ion-scale-150, 6px));
   font-size: var(--ion-font-size-400, 1rem);
   font-weight: var(--ion-font-weight-medium, 500);
   letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-600, 24px);
+  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
   text-decoration: none;
   text-transform: none;
   width: var(--ion-scale-800, 32px);
@@ -170,20 +170,20 @@ Do not edit directly, this file was auto-generated.
 
 /* Medium */
 :host(.avatar-medium) {
-  --padding-end: var(--ion-space-200, 8px);
-  --padding-start: var(--ion-space-200, 8px);
+  --padding-end: var(--ion-space-200, var(--ion-scale-200, 8px));
+  --padding-start: var(--ion-space-200, var(--ion-scale-200, 8px));
   width: var(--ion-scale-1000, 40px);
   height: var(--ion-scale-1000, 40px);
 }
 
 /* Large */
 :host(.avatar-large) {
-  --padding-end: var(--ion-space-250, 10px);
-  --padding-start: var(--ion-space-250, 10px);
+  --padding-end: var(--ion-space-250, var(--ion-scale-250, 10px));
+  --padding-start: var(--ion-space-250, var(--ion-scale-250, 10px));
   font-size: var(--ion-font-size-500, 1.25rem);
   font-weight: var(--ion-font-weight-medium, 500);
   letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-700, 28px);
+  line-height: var(--ion-font-line-height-700, var(--ion-scale-700, 28px));
   text-decoration: none;
   text-transform: none;
   width: var(--ion-scale-1200, 48px);
@@ -192,12 +192,12 @@ Do not edit directly, this file was auto-generated.
 
 /* Extra Large */
 :host(.avatar-xlarge) {
-  --padding-end: var(--ion-space-300, 12px);
-  --padding-start: var(--ion-space-300, 12px);
+  --padding-end: var(--ion-space-300, var(--ion-scale-300, 12px));
+  --padding-start: var(--ion-space-300, var(--ion-scale-300, 12px));
   font-size: var(--ion-font-size-550, 1.375rem);
   font-weight: var(--ion-font-weight-medium, 500);
   letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-700, 28px);
+  line-height: var(--ion-font-line-height-700, var(--ion-scale-700, 28px));
   text-decoration: none;
   text-transform: none;
   width: var(--ion-scale-1400, 56px);
@@ -207,11 +207,11 @@ Do not edit directly, this file was auto-generated.
 :host(.avatar-xxsmall.avatar-soft),
 :host(.avatar-xsmall.avatar-soft),
 :host(.avatar-small.avatar-soft) {
-  --border-radius: var(--ion-border-radius-100, 4px);
+  --border-radius: var(--ion-border-radius-100, var(--ion-scale-100, 4px));
 }
 
 :host(.avatar-soft) {
-  --border-radius: var(--ion-border-radius-200, 8px);
+  --border-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
 }
 
 :host(.avatar-round) {
@@ -219,7 +219,7 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host(.avatar-rectangular) {
-  --border-radius: var(--ion-border-radius-0, 0px);
+  --border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
 }
 
 :host(.avatar-icon) {

package/dist/collection/components/badge/badge.ionic.css

@@ -126,14 +126,14 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host {
-  --padding-start: var(--ion-space-200, 8px);
-  --padding-end: var(--ion-space-200, 8px);
-  --padding-top: var(--ion-space-0, 0px);
-  --padding-bottom: var(--ion-space-0, 0px);
+  --padding-start: var(--ion-space-200, var(--ion-scale-200, 8px));
+  --padding-end: var(--ion-space-200, var(--ion-scale-200, 8px));
+  --padding-top: var(--ion-space-0, var(--ion-scale-0, 0px));
+  --padding-bottom: var(--ion-space-0, var(--ion-scale-0, 0px));
   font-size: var(--ion-font-size-300, 0.75rem);
   font-weight: var(--ion-font-weight-medium, 500);
   letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-500, 20px);
+  line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
   text-decoration: none;
   text-transform: none;
   display: inline-flex;
@@ -143,8 +143,8 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host(.badge-bold) {
-  --background: var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));
-  --color: var(--ion-color-primary-contrast, var(--ion-text-inverse, #ffffff));
+  --background: var(--ion-color-primary, var(--ion-bg-primary-base-default, var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)))));
+  --color: var(--ion-color-primary-contrast, var(--ion-text-inverse, var(--ion-primitives-base-white, #ffffff)));
 }
 
 :host(.badge-bold.ion-color) {
@@ -153,8 +153,8 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host(.badge-subtle) {
-  --background: var(--ion-color-primary-subtle, var(--ion-bg-primary-subtle-default, #f2f4fd));
-  --color: var(--ion-color-primary-subtle-contrast, var(--ion-text-primary, #0d4bc3));
+  --background: var(--ion-color-primary-subtle, var(--ion-bg-primary-subtle-default, var(--ion-semantics-primary-100, var(--ion-primitives-blue-100, #f2f4fd))));
+  --color: var(--ion-color-primary-subtle-contrast, var(--ion-text-primary, var(--ion-semantics-primary-900, var(--ion-primitives-blue-900, #0d4bc3))));
 }
 
 :host(.badge-subtle.ion-color) {
@@ -164,11 +164,11 @@ Do not edit directly, this file was auto-generated.
 
 /* Soft Badge */
 :host(.badge-soft) {
-  border-radius: var(--ion-border-radius-200, 8px);
+  border-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
 }
 
 :host(.badge-small.badge-soft) {
-  border-radius: var(--ion-border-radius-100, 4px);
+  border-radius: var(--ion-border-radius-100, var(--ion-scale-100, 4px));
 }
 
 /* Round Badge */
@@ -178,13 +178,13 @@ Do not edit directly, this file was auto-generated.
 
 /* Rectangular Badge */
 :host(.badge-rectangular) {
-  border-radius: var(--ion-border-radius-0, 0px);
+  border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
 }
 
 /* Small Badge */
 :host(.badge-small) {
-  --padding-start: var(--ion-space-050, 2px);
-  --padding-end: var(--ion-space-050, 2px);
+  --padding-start: var(--ion-space-050, var(--ion-scale-050, 2px));
+  --padding-end: var(--ion-space-050, var(--ion-scale-050, 2px));
   min-width: var(--ion-scale-400, 16px);
   height: var(--ion-scale-400, 16px);
 }
@@ -198,12 +198,12 @@ Do not edit directly, this file was auto-generated.
 /* Large size defaults to the medium size to avoid styles breakage */
 :host(.badge-medium),
 :host(.badge-large) {
-  --padding-start: var(--ion-space-100, 4px);
-  --padding-end: var(--ion-space-100, 4px);
+  --padding-start: var(--ion-space-100, var(--ion-scale-100, 4px));
+  --padding-end: var(--ion-space-100, var(--ion-scale-100, 4px));
   font-size: var(--ion-font-size-350, 0.875rem);
   font-weight: var(--ion-font-weight-medium, 500);
   letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-600, 24px);
+  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
   text-decoration: none;
   text-transform: none;
   min-width: var(--ion-scale-600, 24px);
@@ -260,19 +260,19 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host([vertical]:not(.in-tab-button).in-button.badge-small) {
-  inset-inline-end: calc(-1 * var(var(--ion-space-050, 2px)));
+  inset-inline-end: calc(-1 * var(var(--ion-space-050, var(--ion-scale-050, 2px))));
 }
 
 :host([vertical]:not(.in-tab-button).in-button.badge-medium),
 :host([vertical]:not(.in-tab-button).in-button.badge-large) {
-  inset-inline-end: var(--ion-space-050, 2px);
+  inset-inline-end: var(--ion-space-050, var(--ion-scale-050, 2px));
 }
 
 :host(:not(:empty).in-button) {
   font-size: var(--ion-font-size-300, 0.75rem);
   font-weight: var(--ion-font-weight-medium, 500);
   letter-spacing: var(--ion-font-letter-spacing-1, 1%);
-  line-height: var(--ion-font-line-height-500, 20px);
+  line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
   text-decoration: none;
   text-transform: none;
   min-width: var(--ion-scale-400, 16px);

package/dist/collection/components/button/button.ionic.css

@@ -349,20 +349,13 @@ ion-ripple-effect {
 }
 
 :host {
+  --padding-top: var(--ion-space-0, var(--ion-scale-0, 0px));
+  --padding-end: var(--ion-space-0, var(--ion-scale-0, 0px));
   --padding-bottom: var(--padding-top);
-  --padding-end: var(--ion-space-500, 20px);
   --padding-start: var(--padding-end);
-  --padding-top: var(--ion-space-0, 0px);
-  --focus-ring-color: var(--ion-border-focus-default, #b5c0f7);
-  --focus-ring-width: var(--ion-border-size-050, 2px);
-  font-size: var(--ion-font-size-400, 1rem);
-  font-weight: var(--ion-font-weight-medium, 500);
-  letter-spacing: var(--ion-font-letter-spacing-1, 1%);
-  line-height: var(--ion-font-line-height-600, 24px);
-  text-decoration: none;
-  text-transform: none;
+  --focus-ring-color: var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
+  --focus-ring-width: var(--ion-border-size-050, var(--ion-scale-050, 2px));
   position: relative;
-  min-height: var(--ion-scale-1200, 48px);
 }
 :host::after {
   right: 0;
@@ -378,39 +371,39 @@ ion-ripple-effect {
 }
 
 :host(.button-clear) {
-  --color: var(--ion-color-primary-foreground, var(--ion-text-primary, #0d4bc3));
+  --color: var(--ion-color-primary-foreground, var(--ion-text-primary, var(--ion-semantics-primary-900, var(--ion-primitives-blue-900, #0d4bc3))));
 }
 
 :host(.button-solid) {
-  --background-activated: var(--ion-color-primary-shade, var(--ion-bg-primary-base-press, #0d4bc3));
-  --background-hover: var(--ion-color-primary-shade, var(--ion-bg-primary-base-press, #0d4bc3));
+  --background-activated: var(--ion-color-primary-shade, var(--ion-bg-primary-base-press, var(--ion-semantics-primary-900, var(--ion-primitives-blue-900, #0d4bc3))));
+  --background-hover: var(--ion-color-primary-shade, var(--ion-bg-primary-base-press, var(--ion-semantics-primary-900, var(--ion-primitives-blue-900, #0d4bc3))));
   --background-focused: transparent;
   --background-hover-opacity: 1;
-  --background: var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));
-  --color: var(--ion-color-primary-contrast, var(--ion-text-inverse, #ffffff));
+  --background: var(--ion-color-primary, var(--ion-bg-primary-base-default, var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)))));
+  --color: var(--ion-color-primary-contrast, var(--ion-text-inverse, var(--ion-primitives-base-white, #ffffff)));
   --ripple-opacity: var(--background-activated-opacity, 1);
   --ripple-color: var(--background-activated);
 }
 
 :host(.button-outline) {
-  --border-width: var(--ion-border-size-025, 1px);
+  --border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
   --border-style: var(--ion-border-style-solid, solid);
-  --background-activated: var(--ion-bg-neutral-subtlest-press, #efefef);
+  --background-activated: var(--ion-bg-neutral-subtlest-press, var(--ion-primitives-neutral-200, #efefef));
   --background-focused: transparent;
-  --background-hover: var(--ion-bg-neutral-subtlest-press, #efefef);
+  --background-hover: var(--ion-bg-neutral-subtlest-press, var(--ion-primitives-neutral-200, #efefef));
   --background-hover-opacity: 1;
-  --border-color: var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));
-  --color: var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));
+  --border-color: var(--ion-color-primary, var(--ion-bg-primary-base-default, var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)))));
+  --color: var(--ion-color-primary, var(--ion-bg-primary-base-default, var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)))));
   --ripple-opacity: var(--background-activated-opacity, 1);
   --ripple-color: var(--background-activated);
 }
 
 :host(.button-clear) {
-  --background-activated: var(--ion-bg-neutral-subtlest-press, #efefef);
+  --background-activated: var(--ion-bg-neutral-subtlest-press, var(--ion-primitives-neutral-200, #efefef));
   --background-focused: transparent;
-  --background-hover: var(--ion-bg-neutral-subtlest-press, #efefef);
+  --background-hover: var(--ion-bg-neutral-subtlest-press, var(--ion-primitives-neutral-200, #efefef));
   --background-hover-opacity: 1;
-  --color: var(--ion-color-primary-foreground, var(--ion-text-primary, #0d4bc3));
+  --color: var(--ion-color-primary-foreground, var(--ion-text-primary, var(--ion-semantics-primary-900, var(--ion-primitives-blue-900, #0d4bc3))));
   --ripple-opacity: var(--background-activated-opacity, 1);
   --ripple-color: var(--background-activated);
 }
@@ -426,25 +419,35 @@ ion-ripple-effect {
 
 /* Small Button */
 :host(.button-small) {
-  --padding-top: var(--ion-space-200, 8px);
-  --padding-end: var(--ion-space-400, 16px);
+  --padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
   font-size: var(--ion-font-size-350, 0.875rem);
   font-weight: var(--ion-font-weight-medium, 500);
   letter-spacing: var(--ion-font-letter-spacing-1, 1%);
-  line-height: var(--ion-font-line-height-500, 20px);
+  line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
   text-decoration: none;
   text-transform: none;
   min-height: var(--ion-scale-1000, 40px);
 }
 
+/* Medium Button */
+:host(.button-medium) {
+  --padding-end: var(--ion-space-500, var(--ion-scale-500, 20px));
+  font-size: var(--ion-font-size-400, 1rem);
+  font-weight: var(--ion-font-weight-medium, 500);
+  letter-spacing: var(--ion-font-letter-spacing-1, 1%);
+  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
+  text-decoration: none;
+  text-transform: none;
+  min-height: var(--ion-scale-1200, 48px);
+}
+
 /* Large Button */
 :host(.button-large) {
-  --padding-top: var(--ion-space-400, 16px);
-  --padding-end: var(--ion-space-600, 24px);
+  --padding-end: var(--ion-space-700, var(--ion-scale-700, 28px));
   font-size: var(--ion-font-size-500, 1.25rem);
   font-weight: var(--ion-font-weight-medium, 500);
   letter-spacing: var(--ion-font-letter-spacing-1, 1%);
-  line-height: var(--ion-font-line-height-600, 24px);
+  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
   text-decoration: none;
   text-transform: none;
   min-height: var(--ion-scale-1400, 56px);
@@ -479,16 +482,12 @@ ion-ripple-effect {
 ::slotted(ion-spinner[slot=start]),
 ::slotted(ion-spinner[slot=end]),
 ::slotted(ion-spinner[slot=icon-only]) {
-  width: var(--ion-space-500, 20px);
-  height: var(--ion-space-500, 20px);
+  width: var(--ion-space-500, var(--ion-scale-500, 20px));
+  height: var(--ion-space-500, var(--ion-scale-500, 20px));
 }
 
 :host(.button-soft) {
-  --border-radius: var(--ion-border-radius-200, 8px);
-}
-
-:host(.button-soft.button-small) {
-  --border-radius: var(--ion-border-radius-100, 4px);
+  --border-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
 }
 
 :host(.button-round) {
@@ -496,12 +495,12 @@ ion-ripple-effect {
 }
 
 :host(.button-rectangular) {
-  --border-radius: var(--ion-border-radius-0, 0px);
+  --border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
 }
 
 :host(.ion-focused) .button-native {
   outline: var(--focus-ring-width) var(--ion-border-style-solid, solid) var(--focus-ring-color);
-  outline-offset: var(--ion-border-size-050, 2px);
+  outline-offset: var(--ion-border-size-050, var(--ion-scale-050, 2px));
 }
 
 :host(.button-solid.ion-color.ion-activated) .button-native::after {
@@ -537,45 +536,45 @@ ion-ripple-effect {
 
 :host(.button-small) ::slotted(ion-icon[slot=start]),
 :host(.button-small) ::slotted(ion-spinner[slot=start]) {
-  -webkit-margin-end: var(--ion-space-200, 8px);
-  margin-inline-end: var(--ion-space-200, 8px);
+  -webkit-margin-end: var(--ion-space-200, var(--ion-scale-200, 8px));
+  margin-inline-end: var(--ion-space-200, var(--ion-scale-200, 8px));
 }
 
 ::slotted(ion-icon[slot=start]),
 ::slotted(ion-spinner[slot=start]) {
-  -webkit-margin-end: var(--ion-space-250, 10px);
-  margin-inline-end: var(--ion-space-250, 10px);
+  -webkit-margin-end: var(--ion-space-250, var(--ion-scale-250, 10px));
+  margin-inline-end: var(--ion-space-250, var(--ion-scale-250, 10px));
 }
 
 :host(.button-large) ::slotted(ion-icon[slot=start]),
 :host(.button-large) ::slotted(ion-spinner[slot=start]) {
-  -webkit-margin-end: var(--ion-space-300, 12px);
-  margin-inline-end: var(--ion-space-300, 12px);
+  -webkit-margin-end: var(--ion-space-300, var(--ion-scale-300, 12px));
+  margin-inline-end: var(--ion-space-300, var(--ion-scale-300, 12px));
 }
 
 :host(.button-small) ::slotted(ion-icon[slot=end]),
 :host(.button-small) ::slotted(ion-spinner[slot=end]) {
-  -webkit-margin-start: var(--ion-space-200, 8px);
-  margin-inline-start: var(--ion-space-200, 8px);
+  -webkit-margin-start: var(--ion-space-200, var(--ion-scale-200, 8px));
+  margin-inline-start: var(--ion-space-200, var(--ion-scale-200, 8px));
 }
 
 ::slotted(ion-icon[slot=end]),
 ::slotted(ion-spinner[slot=end]) {
-  -webkit-margin-start: var(--ion-space-250, 10px);
-  margin-inline-start: var(--ion-space-250, 10px);
+  -webkit-margin-start: var(--ion-space-250, var(--ion-scale-250, 10px));
+  margin-inline-start: var(--ion-space-250, var(--ion-scale-250, 10px));
 }
 
 :host(.button-large) ::slotted(ion-icon[slot=end]),
 :host(.button-large) ::slotted(ion-spinner[slot=end]) {
-  -webkit-margin-start: var(--ion-space-300, 12px);
-  margin-inline-start: var(--ion-space-300, 12px);
+  -webkit-margin-start: var(--ion-space-300, var(--ion-scale-300, 12px));
+  margin-inline-start: var(--ion-space-300, var(--ion-scale-300, 12px));
 }
 
 :host ::slotted(ion-badge[vertical]:not(:empty)) {
-  -webkit-padding-start: var(--ion-space-050, 2px);
-  padding-inline-start: var(--ion-space-050, 2px);
-  -webkit-padding-end: var(--ion-space-050, 2px);
-  padding-inline-end: var(--ion-space-050, 2px);
-  padding-top: var(--ion-space-050, 2px);
-  padding-bottom: var(--ion-space-050, 2px);
+  -webkit-padding-start: var(--ion-space-050, var(--ion-scale-050, 2px));
+  padding-inline-start: var(--ion-space-050, var(--ion-scale-050, 2px));
+  -webkit-padding-end: var(--ion-space-050, var(--ion-scale-050, 2px));
+  padding-inline-end: var(--ion-space-050, var(--ion-scale-050, 2px));
+  padding-top: var(--ion-space-050, var(--ion-scale-050, 2px));
+  padding-bottom: var(--ion-space-050, var(--ion-scale-050, 2px));
 }