@yoobic/yobi 8.1.0-75 → 8.1.0-76

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/yoo-form-toggle.cjs.entry.js +1 -1
  2. package/dist/collection/components/form/form-toggle/form-toggle.css +3 -0
  3. package/dist/design-system/yoo-form-toggle.entry.js +1 -1
  4. package/dist/esm/yoo-form-toggle.entry.js +1 -1
  5. package/package.json +1 -1
package/dist/cjs/yoo-form-toggle.cjs.entry.js CHANGED
@@ -11,7 +11,7 @@ require('./lodash-a046a0e1.js');
11
11
  require('./_commonjsHelpers-94df2ea7.js');
12
12
  require('./index-00d95797.js');
13
13
 
14
- const formToggleCss = ":host .optional{margin-left:var(--spacing-08, 0.5rem) !important;color:var(--stable, #adadad);white-space:nowrap}:host .readonly,:host .outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;word-break:break-word}:host .readonly .inner-container,:host .outer-container .inner-container{display:-ms-flexbox;display:flex}:host .readonly .label,:host .outer-container .label{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem);line-height:1.5;text-align:left;font-variant-caps:normal}:host .readonly .label .required,:host .outer-container .label .required{margin-right:var(--spacing-04, 0.25rem);color:var(--danger, #d44333);font-variant-caps:normal}:host .readonly .label .label-required,:host .outer-container .label .label-required{margin-left:var(--spacing-04, 0.25rem);color:var(--danger, #d44333)}:host .readonly .label.readonly,:host .outer-container .label.readonly{letter-spacing:0px}:host .readonly .toggle-container,:host .outer-container .toggle-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border-radius:3.75rem;-webkit-transition:0.2s cubic-bezier(0.24, 0, 0.5, 1);transition:0.2s cubic-bezier(0.24, 0, 0.5, 1)}:host .readonly .toggle-container.active,:host .outer-container .toggle-container.active{-webkit-transition:width 0.2s cubic-bezier(0, 0, 0, 0.1);transition:width 0.2s cubic-bezier(0, 0, 0, 0.1);-webkit-transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1);transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1)}:host .readonly .toggle-container .inner-container,:host .outer-container .toggle-container .inner-container{-webkit-box-sizing:content-box;box-sizing:content-box;border-radius:50%;-webkit-box-shadow:0 0 0 0.0625rem rgba(0, 0, 0, 0.1), 0 4px 0px 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);box-shadow:0 0 0 0.0625rem rgba(0, 0, 0, 0.1), 0 4px 0px 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);-webkit-transform:translateX(-1px);transform:translateX(-1px);-webkit-transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1);transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1)}:host .readonly .toggle-container .inner-container.active,:host .outer-container .toggle-container .inner-container.active{-webkit-transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1);transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1)}:host .readonly .toggle-container{margin:var(--spacing-04, 0.25rem);background-color:var(--stable-light, #f1f1f1);border:solid var(--border-width-01, 0.0625rem) var(--dark-05)}:host .readonly .toggle-container .inner-container{background-color:var(--light, #ffffff) !important;border:solid 0.5px var(--dark-05);-webkit-transform:translateX(2px);transform:translateX(2px)}:host .readonly .toggle-container.active{background-color:var(--app-color-40, rgba(90, 48, 244, 0.4));border-color:var(--app-color, #5a30f4)}:host yoo-icon.left{padding-right:var(--spacing-08, 0.5rem)}:host .outer-container .text-container{-ms-flex:1;flex:1}:host .outer-container .toggle-container{background-color:var(--dark-10, rgba(0, 0, 0, 0.1));border:solid var(--border-width-01, 0.0625rem) var(--dark-10, rgba(0, 0, 0, 0.1))}:host .outer-container .toggle-container.active{background-color:var(--app-color, #5a30f4);border-color:var(--app-color, #5a30f4)}:host .outer-container .toggle-container:hover{cursor:pointer}:host .outer-container .toggle-container .inner-container{background-color:var(--light, #ffffff);border:solid 0.5px var(--dark-10, rgba(0, 0, 0, 0.1))}:host .outer-container .toggle-container .inner-container:hover{cursor:pointer}:host .outer-container .label{color:var(--dark, #000000)}:host .outer-container .help{color:var(--stable, #adadad)}:host(.stable) .readonly .label{color:var(--stable, #adadad)}:host(.line) .outer-container .text-container,:host(.line) .readonly .text-container{-ms-flex-order:1;order:1;margin-left:var(--spacing-16, 1rem)}:host(.fill) .toggle-container{background:var(--light, #ffffff)}:host(.web) .outer-container .label,:host(.web) .readonly .label{padding-left:var(--spacing-08, 0.5rem);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem)}:host(.mobile) .outer-container .label.with-help{-ms-flex:initial;flex:initial}:host(.mobile) .outer-container .help{-ms-flex:1;flex:1}:host(.advanced) .outer-container .label.with-help{-ms-flex:initial;flex:initial}:host(.advanced) .outer-container .help{-ms-flex:1;flex:1;padding-left:var(--spacing-08, 0.5rem)}:host(.advanced) .outer-container yoo-tooltip{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host([size=small]) .outer-container .label{font-size:var(--font-size-14, 0.875rem)}:host([size=small]) .toggle-container,:host([size=medium]) .toggle-container{width:1.625rem;height:var(--font-size-14, 0.875rem)}:host([size=small]) .toggle-container .inner-container,:host([size=medium]) .toggle-container .inner-container{width:0.85rem;min-width:0.85rem;height:0.85rem}:host([size=small]) .toggle-container .inner-container.active,:host([size=medium]) .toggle-container .inner-container.active{-webkit-transform:translateX(var(--font-size-12, 0.75rem)) !important;transform:translateX(var(--font-size-12, 0.75rem)) !important}:host([size=large]) .toggle-container{width:var(--spacing-48, 3rem);min-width:var(--spacing-48, 3rem);height:var(--spacing-32, 2rem)}:host([size=large]) .toggle-container .inner-container{width:var(--font-size-28, 1.75rem);height:var(--font-size-28, 1.75rem)}:host([size=large]) .toggle-container .inner-container.active{-webkit-transform:translateX(1.3rem) !important;transform:translateX(1.3rem) !important}:host(.danger) .outer-container .toggle-container.active{background-color:var(--danger, #d44333);border-color:var(--danger, #d44333)}:host(.danger) .readonly .toggle-container.active{background-color:var(--danger-40, rgba(212, 67, 51, 0.4));border-color:var(--danger, #d44333)}:host(.info) .outer-container .toggle-container.active{background-color:var(--info, #d84c96);border-color:var(--info, #d84c96)}:host(.info) .readonly .toggle-container.active{background-color:var(--info-40, rgba(216, 76, 150, 0.4));border-color:var(--info, #d84c96)}:host(.warning) .outer-container .toggle-container.active{background-color:var(--warning, #ed6e33);border-color:var(--warning, #ed6e33)}:host(.warning) .readonly .toggle-container.active{background-color:var(--warning-40, rgba(237, 110, 51, 0.4));border-color:var(--warning, #ed6e33)}:host(.dark) .outer-container .toggle-container.active{background-color:var(--dark, #000000);border-color:var(--dark, #000000)}:host(.dark) .readonly .toggle-container.active{background-color:var(--dark-40, rgba(0, 0, 0, 0.4));border-color:var(--dark, #000000)}:host(.energized) .outer-container .toggle-container.active{background-color:var(--energized, #ffc043);border-color:var(--energized, #ffc043)}:host(.energized) .readonly .toggle-container.active{background-color:var(--energized-40, rgba(255, 192, 67, 0.4));border-color:var(--energized, #ffc043)}:host(.app-color) .outer-container .toggle-container.active{background-color:var(--app-color, #5a30f4);border-color:var(--app-color, #5a30f4)}:host(.app-color) .readonly .toggle-container.active{background-color:var(--app-color-40, rgba(90, 48, 244, 0.4));border-color:var(--app-color, #5a30f4)}:host(.accent) .outer-container .toggle-container.active{background-color:var(--accent, #276ef1);border-color:var(--accent, #276ef1)}:host(.accent) .readonly .toggle-container.active{background-color:var(--accent-40, rgba(39, 110, 241, 0.4));border-color:var(--accent, #276ef1)}:host(.night) .outer-container .toggle-container .inner-container{background-color:var(--app-color, #5a30f4)}";
14
+ const formToggleCss = ":host .optional{margin-left:var(--spacing-08, 0.5rem) !important;color:var(--stable, #adadad);white-space:nowrap}:host .readonly,:host .outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;word-break:break-word}:host .readonly .inner-container,:host .outer-container .inner-container{display:-ms-flexbox;display:flex}:host .readonly .label,:host .outer-container .label{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem);line-height:1.5;text-align:left;font-variant-caps:normal}:host .readonly .label .required,:host .outer-container .label .required{margin-right:var(--spacing-04, 0.25rem);color:var(--danger, #d44333);font-variant-caps:normal}:host .readonly .label .label-required,:host .outer-container .label .label-required{margin-left:var(--spacing-04, 0.25rem);color:var(--danger, #d44333)}:host .readonly .label.readonly,:host .outer-container .label.readonly{letter-spacing:0px}:host .readonly .toggle-container,:host .outer-container .toggle-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border-radius:3.75rem;-webkit-transition:0.2s cubic-bezier(0.24, 0, 0.5, 1);transition:0.2s cubic-bezier(0.24, 0, 0.5, 1)}:host .readonly .toggle-container.active,:host .outer-container .toggle-container.active{-webkit-transition:width 0.2s cubic-bezier(0, 0, 0, 0.1);transition:width 0.2s cubic-bezier(0, 0, 0, 0.1);-webkit-transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1);transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1)}:host .readonly .toggle-container .inner-container,:host .outer-container .toggle-container .inner-container{-webkit-box-sizing:content-box;box-sizing:content-box;border-radius:50%;-webkit-box-shadow:0 0 0 0.0625rem rgba(0, 0, 0, 0.1), 0 4px 0px 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);box-shadow:0 0 0 0.0625rem rgba(0, 0, 0, 0.1), 0 4px 0px 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);-webkit-transform:translateX(-1px);transform:translateX(-1px);-webkit-transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1);transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1)}:host .readonly .toggle-container .inner-container.active,:host .outer-container .toggle-container .inner-container.active{-webkit-transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1);transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1)}:host .readonly .toggle-container{margin:var(--spacing-04, 0.25rem);background-color:var(--stable-light, #f1f1f1);border:solid var(--border-width-01, 0.0625rem) var(--dark-05)}:host .readonly .toggle-container .inner-container{background-color:var(--light, #ffffff) !important;border:solid 0.5px var(--dark-05);-webkit-transform:translateX(2px);transform:translateX(2px)}:host .readonly .toggle-container.active{background-color:var(--app-color-40, rgba(90, 48, 244, 0.4));border-color:var(--app-color, #5a30f4)}:host yoo-icon.left{padding-right:var(--spacing-08, 0.5rem)}:host .outer-container .text-container{-ms-flex:1;flex:1}:host .outer-container .toggle-container{background-color:var(--dark-10, rgba(0, 0, 0, 0.1));border:solid var(--border-width-01, 0.0625rem) var(--dark-10, rgba(0, 0, 0, 0.1))}:host .outer-container .toggle-container.active{background-color:var(--app-color, #5a30f4);border-color:var(--app-color, #5a30f4)}:host .outer-container .toggle-container:hover{cursor:pointer}:host .outer-container .toggle-container .inner-container{background-color:var(--light, #ffffff);border:solid 0.5px var(--dark-10, rgba(0, 0, 0, 0.1))}:host .outer-container .toggle-container .inner-container:hover{cursor:pointer}:host .outer-container .label{color:var(--dark, #000000)}:host .outer-container .help{color:var(--stable, #adadad)}:host(.stable) .readonly .label{color:var(--stable, #adadad)}:host(.line) .outer-container .text-container,:host(.line) .readonly .text-container{-ms-flex-order:1;order:1;margin-left:var(--spacing-16, 1rem)}:host(.fill) .toggle-container{background:var(--light, #ffffff)}:host(.web) .outer-container .label,:host(.web) .readonly .label{padding-left:var(--spacing-08, 0.5rem);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem)}:host(.mobile) .outer-container .label.with-help{-ms-flex:initial;flex:initial}:host(.mobile) .outer-container .help{-ms-flex:1;flex:1}:host(.advanced) .outer-container .label.with-help{-ms-flex:initial;flex:initial}:host(.advanced) .outer-container .help{-ms-flex:1;flex:1;padding-left:var(--spacing-08, 0.5rem)}:host(.advanced) .outer-container yoo-tooltip{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host([size=small]) .outer-container .label{font-size:var(--font-size-14, 0.875rem)}:host([size=small]) .toggle-container,:host([size=medium]) .toggle-container{width:1.625rem;height:var(--font-size-14, 0.875rem)}:host([size=small]) .toggle-container .inner-container,:host([size=medium]) .toggle-container .inner-container{width:0.85rem;min-width:0.85rem;height:0.85rem}:host([size=small]) .toggle-container .inner-container.active,:host([size=medium]) .toggle-container .inner-container.active{-webkit-transform:translateX(var(--font-size-12, 0.75rem)) !important;transform:translateX(var(--font-size-12, 0.75rem)) !important}:host([size=large]) .toggle-container{width:var(--spacing-48, 3rem);min-width:var(--spacing-48, 3rem);height:var(--spacing-32, 2rem)}:host([size=large]) .toggle-container .inner-container{width:var(--font-size-28, 1.75rem);height:var(--font-size-28, 1.75rem)}:host([size=large]) .toggle-container .inner-container.active{-webkit-transform:translateX(1.3rem) !important;transform:translateX(1.3rem) !important}:host(.danger) .outer-container .toggle-container.active{background-color:var(--danger, #d44333);border-color:var(--danger, #d44333)}:host(.danger) .readonly .toggle-container.active{background-color:var(--danger-40, rgba(212, 67, 51, 0.4));border-color:var(--danger, #d44333)}:host(.info) .outer-container .toggle-container.active{background-color:var(--info, #d84c96);border-color:var(--info, #d84c96)}:host(.info) .readonly .toggle-container.active{background-color:var(--info-40, rgba(216, 76, 150, 0.4));border-color:var(--info, #d84c96)}:host(.warning) .outer-container .toggle-container.active{background-color:var(--warning, #ed6e33);border-color:var(--warning, #ed6e33)}:host(.warning) .readonly .toggle-container.active{background-color:var(--warning-40, rgba(237, 110, 51, 0.4));border-color:var(--warning, #ed6e33)}:host(.dark) .outer-container .toggle-container.active{background-color:var(--dark, #000000);border-color:var(--dark, #000000)}:host(.dark) .readonly .toggle-container.active{background-color:var(--dark-40, rgba(0, 0, 0, 0.4));border-color:var(--dark, #000000)}:host(.energized) .outer-container .toggle-container.active{background-color:var(--energized, #ffc043);border-color:var(--energized, #ffc043)}:host(.energized) .readonly .toggle-container.active{background-color:var(--energized-40, rgba(255, 192, 67, 0.4));border-color:var(--energized, #ffc043)}:host(.app-color) .outer-container .toggle-container.active{background-color:var(--app-color, #5a30f4);border-color:var(--app-color, #5a30f4)}:host(.app-color) .readonly .toggle-container.active{background-color:var(--app-color-40, rgba(90, 48, 244, 0.4));border-color:var(--app-color, #5a30f4)}:host(.accent) .outer-container .toggle-container.active{background-color:var(--accent, #276ef1);border-color:var(--accent, #276ef1)}:host(.accent) .readonly .toggle-container.active{background-color:var(--accent-40, rgba(39, 110, 241, 0.4));border-color:var(--accent, #276ef1)}:host(.night) .outer-container .toggle-container{background-color:var(--dark-40, rgba(0, 0, 0, 0.4))}:host(.night) .outer-container .toggle-container .inner-container{background-color:var(--app-color, #5a30f4)}";
15
15
 
16
16
  const YooFormToggleComponent = class {
17
17
  constructor(hostRef) {
package/dist/collection/components/form/form-toggle/form-toggle.css CHANGED
@@ -452,6 +452,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
452
452
  border-color: var(--accent, #276ef1);
453
453
  }
454
454
 
455
+ :host(.night) .outer-container .toggle-container {
456
+ background-color: var(--dark-40, rgba(0, 0, 0, 0.4));
457
+ }
455
458
  :host(.night) .outer-container .toggle-container .inner-container {
456
459
  background-color: var(--app-color, #5a30f4);
457
460
  }
package/dist/design-system/yoo-form-toggle.entry.js CHANGED
@@ -7,7 +7,7 @@ import './lodash-0394e25f.js';
7
7
  import './_commonjsHelpers-f4d11124.js';
8
8
  import './index-1bf67df4.js';
9
9
 
10
- const formToggleCss = ":host .optional{margin-left:var(--spacing-08, 0.5rem) !important;color:var(--stable, #adadad);white-space:nowrap}:host .readonly,:host .outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;word-break:break-word}:host .readonly .inner-container,:host .outer-container .inner-container{display:-ms-flexbox;display:flex}:host .readonly .label,:host .outer-container .label{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem);line-height:1.5;text-align:left;font-variant-caps:normal}:host .readonly .label .required,:host .outer-container .label .required{margin-right:var(--spacing-04, 0.25rem);color:var(--danger, #d44333);font-variant-caps:normal}:host .readonly .label .label-required,:host .outer-container .label .label-required{margin-left:var(--spacing-04, 0.25rem);color:var(--danger, #d44333)}:host .readonly .label.readonly,:host .outer-container .label.readonly{letter-spacing:0px}:host .readonly .toggle-container,:host .outer-container .toggle-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border-radius:3.75rem;-webkit-transition:0.2s cubic-bezier(0.24, 0, 0.5, 1);transition:0.2s cubic-bezier(0.24, 0, 0.5, 1)}:host .readonly .toggle-container.active,:host .outer-container .toggle-container.active{-webkit-transition:width 0.2s cubic-bezier(0, 0, 0, 0.1);transition:width 0.2s cubic-bezier(0, 0, 0, 0.1);-webkit-transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1);transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1)}:host .readonly .toggle-container .inner-container,:host .outer-container .toggle-container .inner-container{-webkit-box-sizing:content-box;box-sizing:content-box;border-radius:50%;-webkit-box-shadow:0 0 0 0.0625rem rgba(0, 0, 0, 0.1), 0 4px 0px 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);box-shadow:0 0 0 0.0625rem rgba(0, 0, 0, 0.1), 0 4px 0px 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);-webkit-transform:translateX(-1px);transform:translateX(-1px);-webkit-transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1);transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1)}:host .readonly .toggle-container .inner-container.active,:host .outer-container .toggle-container .inner-container.active{-webkit-transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1);transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1)}:host .readonly .toggle-container{margin:var(--spacing-04, 0.25rem);background-color:var(--stable-light, #f1f1f1);border:solid var(--border-width-01, 0.0625rem) var(--dark-05)}:host .readonly .toggle-container .inner-container{background-color:var(--light, #ffffff) !important;border:solid 0.5px var(--dark-05);-webkit-transform:translateX(2px);transform:translateX(2px)}:host .readonly .toggle-container.active{background-color:var(--app-color-40, rgba(90, 48, 244, 0.4));border-color:var(--app-color, #5a30f4)}:host yoo-icon.left{padding-right:var(--spacing-08, 0.5rem)}:host .outer-container .text-container{-ms-flex:1;flex:1}:host .outer-container .toggle-container{background-color:var(--dark-10, rgba(0, 0, 0, 0.1));border:solid var(--border-width-01, 0.0625rem) var(--dark-10, rgba(0, 0, 0, 0.1))}:host .outer-container .toggle-container.active{background-color:var(--app-color, #5a30f4);border-color:var(--app-color, #5a30f4)}:host .outer-container .toggle-container:hover{cursor:pointer}:host .outer-container .toggle-container .inner-container{background-color:var(--light, #ffffff);border:solid 0.5px var(--dark-10, rgba(0, 0, 0, 0.1))}:host .outer-container .toggle-container .inner-container:hover{cursor:pointer}:host .outer-container .label{color:var(--dark, #000000)}:host .outer-container .help{color:var(--stable, #adadad)}:host(.stable) .readonly .label{color:var(--stable, #adadad)}:host(.line) .outer-container .text-container,:host(.line) .readonly .text-container{-ms-flex-order:1;order:1;margin-left:var(--spacing-16, 1rem)}:host(.fill) .toggle-container{background:var(--light, #ffffff)}:host(.web) .outer-container .label,:host(.web) .readonly .label{padding-left:var(--spacing-08, 0.5rem);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem)}:host(.mobile) .outer-container .label.with-help{-ms-flex:initial;flex:initial}:host(.mobile) .outer-container .help{-ms-flex:1;flex:1}:host(.advanced) .outer-container .label.with-help{-ms-flex:initial;flex:initial}:host(.advanced) .outer-container .help{-ms-flex:1;flex:1;padding-left:var(--spacing-08, 0.5rem)}:host(.advanced) .outer-container yoo-tooltip{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host([size=small]) .outer-container .label{font-size:var(--font-size-14, 0.875rem)}:host([size=small]) .toggle-container,:host([size=medium]) .toggle-container{width:1.625rem;height:var(--font-size-14, 0.875rem)}:host([size=small]) .toggle-container .inner-container,:host([size=medium]) .toggle-container .inner-container{width:0.85rem;min-width:0.85rem;height:0.85rem}:host([size=small]) .toggle-container .inner-container.active,:host([size=medium]) .toggle-container .inner-container.active{-webkit-transform:translateX(var(--font-size-12, 0.75rem)) !important;transform:translateX(var(--font-size-12, 0.75rem)) !important}:host([size=large]) .toggle-container{width:var(--spacing-48, 3rem);min-width:var(--spacing-48, 3rem);height:var(--spacing-32, 2rem)}:host([size=large]) .toggle-container .inner-container{width:var(--font-size-28, 1.75rem);height:var(--font-size-28, 1.75rem)}:host([size=large]) .toggle-container .inner-container.active{-webkit-transform:translateX(1.3rem) !important;transform:translateX(1.3rem) !important}:host(.danger) .outer-container .toggle-container.active{background-color:var(--danger, #d44333);border-color:var(--danger, #d44333)}:host(.danger) .readonly .toggle-container.active{background-color:var(--danger-40, rgba(212, 67, 51, 0.4));border-color:var(--danger, #d44333)}:host(.info) .outer-container .toggle-container.active{background-color:var(--info, #d84c96);border-color:var(--info, #d84c96)}:host(.info) .readonly .toggle-container.active{background-color:var(--info-40, rgba(216, 76, 150, 0.4));border-color:var(--info, #d84c96)}:host(.warning) .outer-container .toggle-container.active{background-color:var(--warning, #ed6e33);border-color:var(--warning, #ed6e33)}:host(.warning) .readonly .toggle-container.active{background-color:var(--warning-40, rgba(237, 110, 51, 0.4));border-color:var(--warning, #ed6e33)}:host(.dark) .outer-container .toggle-container.active{background-color:var(--dark, #000000);border-color:var(--dark, #000000)}:host(.dark) .readonly .toggle-container.active{background-color:var(--dark-40, rgba(0, 0, 0, 0.4));border-color:var(--dark, #000000)}:host(.energized) .outer-container .toggle-container.active{background-color:var(--energized, #ffc043);border-color:var(--energized, #ffc043)}:host(.energized) .readonly .toggle-container.active{background-color:var(--energized-40, rgba(255, 192, 67, 0.4));border-color:var(--energized, #ffc043)}:host(.app-color) .outer-container .toggle-container.active{background-color:var(--app-color, #5a30f4);border-color:var(--app-color, #5a30f4)}:host(.app-color) .readonly .toggle-container.active{background-color:var(--app-color-40, rgba(90, 48, 244, 0.4));border-color:var(--app-color, #5a30f4)}:host(.accent) .outer-container .toggle-container.active{background-color:var(--accent, #276ef1);border-color:var(--accent, #276ef1)}:host(.accent) .readonly .toggle-container.active{background-color:var(--accent-40, rgba(39, 110, 241, 0.4));border-color:var(--accent, #276ef1)}:host(.night) .outer-container .toggle-container .inner-container{background-color:var(--app-color, #5a30f4)}";
10
+ const formToggleCss = ":host .optional{margin-left:var(--spacing-08, 0.5rem) !important;color:var(--stable, #adadad);white-space:nowrap}:host .readonly,:host .outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;word-break:break-word}:host .readonly .inner-container,:host .outer-container .inner-container{display:-ms-flexbox;display:flex}:host .readonly .label,:host .outer-container .label{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem);line-height:1.5;text-align:left;font-variant-caps:normal}:host .readonly .label .required,:host .outer-container .label .required{margin-right:var(--spacing-04, 0.25rem);color:var(--danger, #d44333);font-variant-caps:normal}:host .readonly .label .label-required,:host .outer-container .label .label-required{margin-left:var(--spacing-04, 0.25rem);color:var(--danger, #d44333)}:host .readonly .label.readonly,:host .outer-container .label.readonly{letter-spacing:0px}:host .readonly .toggle-container,:host .outer-container .toggle-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border-radius:3.75rem;-webkit-transition:0.2s cubic-bezier(0.24, 0, 0.5, 1);transition:0.2s cubic-bezier(0.24, 0, 0.5, 1)}:host .readonly .toggle-container.active,:host .outer-container .toggle-container.active{-webkit-transition:width 0.2s cubic-bezier(0, 0, 0, 0.1);transition:width 0.2s cubic-bezier(0, 0, 0, 0.1);-webkit-transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1);transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1)}:host .readonly .toggle-container .inner-container,:host .outer-container .toggle-container .inner-container{-webkit-box-sizing:content-box;box-sizing:content-box;border-radius:50%;-webkit-box-shadow:0 0 0 0.0625rem rgba(0, 0, 0, 0.1), 0 4px 0px 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);box-shadow:0 0 0 0.0625rem rgba(0, 0, 0, 0.1), 0 4px 0px 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);-webkit-transform:translateX(-1px);transform:translateX(-1px);-webkit-transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1);transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1)}:host .readonly .toggle-container .inner-container.active,:host .outer-container .toggle-container .inner-container.active{-webkit-transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1);transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1)}:host .readonly .toggle-container{margin:var(--spacing-04, 0.25rem);background-color:var(--stable-light, #f1f1f1);border:solid var(--border-width-01, 0.0625rem) var(--dark-05)}:host .readonly .toggle-container .inner-container{background-color:var(--light, #ffffff) !important;border:solid 0.5px var(--dark-05);-webkit-transform:translateX(2px);transform:translateX(2px)}:host .readonly .toggle-container.active{background-color:var(--app-color-40, rgba(90, 48, 244, 0.4));border-color:var(--app-color, #5a30f4)}:host yoo-icon.left{padding-right:var(--spacing-08, 0.5rem)}:host .outer-container .text-container{-ms-flex:1;flex:1}:host .outer-container .toggle-container{background-color:var(--dark-10, rgba(0, 0, 0, 0.1));border:solid var(--border-width-01, 0.0625rem) var(--dark-10, rgba(0, 0, 0, 0.1))}:host .outer-container .toggle-container.active{background-color:var(--app-color, #5a30f4);border-color:var(--app-color, #5a30f4)}:host .outer-container .toggle-container:hover{cursor:pointer}:host .outer-container .toggle-container .inner-container{background-color:var(--light, #ffffff);border:solid 0.5px var(--dark-10, rgba(0, 0, 0, 0.1))}:host .outer-container .toggle-container .inner-container:hover{cursor:pointer}:host .outer-container .label{color:var(--dark, #000000)}:host .outer-container .help{color:var(--stable, #adadad)}:host(.stable) .readonly .label{color:var(--stable, #adadad)}:host(.line) .outer-container .text-container,:host(.line) .readonly .text-container{-ms-flex-order:1;order:1;margin-left:var(--spacing-16, 1rem)}:host(.fill) .toggle-container{background:var(--light, #ffffff)}:host(.web) .outer-container .label,:host(.web) .readonly .label{padding-left:var(--spacing-08, 0.5rem);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem)}:host(.mobile) .outer-container .label.with-help{-ms-flex:initial;flex:initial}:host(.mobile) .outer-container .help{-ms-flex:1;flex:1}:host(.advanced) .outer-container .label.with-help{-ms-flex:initial;flex:initial}:host(.advanced) .outer-container .help{-ms-flex:1;flex:1;padding-left:var(--spacing-08, 0.5rem)}:host(.advanced) .outer-container yoo-tooltip{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host([size=small]) .outer-container .label{font-size:var(--font-size-14, 0.875rem)}:host([size=small]) .toggle-container,:host([size=medium]) .toggle-container{width:1.625rem;height:var(--font-size-14, 0.875rem)}:host([size=small]) .toggle-container .inner-container,:host([size=medium]) .toggle-container .inner-container{width:0.85rem;min-width:0.85rem;height:0.85rem}:host([size=small]) .toggle-container .inner-container.active,:host([size=medium]) .toggle-container .inner-container.active{-webkit-transform:translateX(var(--font-size-12, 0.75rem)) !important;transform:translateX(var(--font-size-12, 0.75rem)) !important}:host([size=large]) .toggle-container{width:var(--spacing-48, 3rem);min-width:var(--spacing-48, 3rem);height:var(--spacing-32, 2rem)}:host([size=large]) .toggle-container .inner-container{width:var(--font-size-28, 1.75rem);height:var(--font-size-28, 1.75rem)}:host([size=large]) .toggle-container .inner-container.active{-webkit-transform:translateX(1.3rem) !important;transform:translateX(1.3rem) !important}:host(.danger) .outer-container .toggle-container.active{background-color:var(--danger, #d44333);border-color:var(--danger, #d44333)}:host(.danger) .readonly .toggle-container.active{background-color:var(--danger-40, rgba(212, 67, 51, 0.4));border-color:var(--danger, #d44333)}:host(.info) .outer-container .toggle-container.active{background-color:var(--info, #d84c96);border-color:var(--info, #d84c96)}:host(.info) .readonly .toggle-container.active{background-color:var(--info-40, rgba(216, 76, 150, 0.4));border-color:var(--info, #d84c96)}:host(.warning) .outer-container .toggle-container.active{background-color:var(--warning, #ed6e33);border-color:var(--warning, #ed6e33)}:host(.warning) .readonly .toggle-container.active{background-color:var(--warning-40, rgba(237, 110, 51, 0.4));border-color:var(--warning, #ed6e33)}:host(.dark) .outer-container .toggle-container.active{background-color:var(--dark, #000000);border-color:var(--dark, #000000)}:host(.dark) .readonly .toggle-container.active{background-color:var(--dark-40, rgba(0, 0, 0, 0.4));border-color:var(--dark, #000000)}:host(.energized) .outer-container .toggle-container.active{background-color:var(--energized, #ffc043);border-color:var(--energized, #ffc043)}:host(.energized) .readonly .toggle-container.active{background-color:var(--energized-40, rgba(255, 192, 67, 0.4));border-color:var(--energized, #ffc043)}:host(.app-color) .outer-container .toggle-container.active{background-color:var(--app-color, #5a30f4);border-color:var(--app-color, #5a30f4)}:host(.app-color) .readonly .toggle-container.active{background-color:var(--app-color-40, rgba(90, 48, 244, 0.4));border-color:var(--app-color, #5a30f4)}:host(.accent) .outer-container .toggle-container.active{background-color:var(--accent, #276ef1);border-color:var(--accent, #276ef1)}:host(.accent) .readonly .toggle-container.active{background-color:var(--accent-40, rgba(39, 110, 241, 0.4));border-color:var(--accent, #276ef1)}:host(.night) .outer-container .toggle-container{background-color:var(--dark-40, rgba(0, 0, 0, 0.4))}:host(.night) .outer-container .toggle-container .inner-container{background-color:var(--app-color, #5a30f4)}";
11
11
 
12
12
  const YooFormToggleComponent = class {
13
13
  constructor(hostRef) {
package/dist/esm/yoo-form-toggle.entry.js CHANGED
@@ -7,7 +7,7 @@ import './lodash-0394e25f.js';
7
7
  import './_commonjsHelpers-f4d11124.js';
8
8
  import './index-1bf67df4.js';
9
9
 
10
- const formToggleCss = ":host .optional{margin-left:var(--spacing-08, 0.5rem) !important;color:var(--stable, #adadad);white-space:nowrap}:host .readonly,:host .outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;word-break:break-word}:host .readonly .inner-container,:host .outer-container .inner-container{display:-ms-flexbox;display:flex}:host .readonly .label,:host .outer-container .label{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem);line-height:1.5;text-align:left;font-variant-caps:normal}:host .readonly .label .required,:host .outer-container .label .required{margin-right:var(--spacing-04, 0.25rem);color:var(--danger, #d44333);font-variant-caps:normal}:host .readonly .label .label-required,:host .outer-container .label .label-required{margin-left:var(--spacing-04, 0.25rem);color:var(--danger, #d44333)}:host .readonly .label.readonly,:host .outer-container .label.readonly{letter-spacing:0px}:host .readonly .toggle-container,:host .outer-container .toggle-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border-radius:3.75rem;-webkit-transition:0.2s cubic-bezier(0.24, 0, 0.5, 1);transition:0.2s cubic-bezier(0.24, 0, 0.5, 1)}:host .readonly .toggle-container.active,:host .outer-container .toggle-container.active{-webkit-transition:width 0.2s cubic-bezier(0, 0, 0, 0.1);transition:width 0.2s cubic-bezier(0, 0, 0, 0.1);-webkit-transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1);transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1)}:host .readonly .toggle-container .inner-container,:host .outer-container .toggle-container .inner-container{-webkit-box-sizing:content-box;box-sizing:content-box;border-radius:50%;-webkit-box-shadow:0 0 0 0.0625rem rgba(0, 0, 0, 0.1), 0 4px 0px 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);box-shadow:0 0 0 0.0625rem rgba(0, 0, 0, 0.1), 0 4px 0px 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);-webkit-transform:translateX(-1px);transform:translateX(-1px);-webkit-transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1);transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1)}:host .readonly .toggle-container .inner-container.active,:host .outer-container .toggle-container .inner-container.active{-webkit-transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1);transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1)}:host .readonly .toggle-container{margin:var(--spacing-04, 0.25rem);background-color:var(--stable-light, #f1f1f1);border:solid var(--border-width-01, 0.0625rem) var(--dark-05)}:host .readonly .toggle-container .inner-container{background-color:var(--light, #ffffff) !important;border:solid 0.5px var(--dark-05);-webkit-transform:translateX(2px);transform:translateX(2px)}:host .readonly .toggle-container.active{background-color:var(--app-color-40, rgba(90, 48, 244, 0.4));border-color:var(--app-color, #5a30f4)}:host yoo-icon.left{padding-right:var(--spacing-08, 0.5rem)}:host .outer-container .text-container{-ms-flex:1;flex:1}:host .outer-container .toggle-container{background-color:var(--dark-10, rgba(0, 0, 0, 0.1));border:solid var(--border-width-01, 0.0625rem) var(--dark-10, rgba(0, 0, 0, 0.1))}:host .outer-container .toggle-container.active{background-color:var(--app-color, #5a30f4);border-color:var(--app-color, #5a30f4)}:host .outer-container .toggle-container:hover{cursor:pointer}:host .outer-container .toggle-container .inner-container{background-color:var(--light, #ffffff);border:solid 0.5px var(--dark-10, rgba(0, 0, 0, 0.1))}:host .outer-container .toggle-container .inner-container:hover{cursor:pointer}:host .outer-container .label{color:var(--dark, #000000)}:host .outer-container .help{color:var(--stable, #adadad)}:host(.stable) .readonly .label{color:var(--stable, #adadad)}:host(.line) .outer-container .text-container,:host(.line) .readonly .text-container{-ms-flex-order:1;order:1;margin-left:var(--spacing-16, 1rem)}:host(.fill) .toggle-container{background:var(--light, #ffffff)}:host(.web) .outer-container .label,:host(.web) .readonly .label{padding-left:var(--spacing-08, 0.5rem);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem)}:host(.mobile) .outer-container .label.with-help{-ms-flex:initial;flex:initial}:host(.mobile) .outer-container .help{-ms-flex:1;flex:1}:host(.advanced) .outer-container .label.with-help{-ms-flex:initial;flex:initial}:host(.advanced) .outer-container .help{-ms-flex:1;flex:1;padding-left:var(--spacing-08, 0.5rem)}:host(.advanced) .outer-container yoo-tooltip{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host([size=small]) .outer-container .label{font-size:var(--font-size-14, 0.875rem)}:host([size=small]) .toggle-container,:host([size=medium]) .toggle-container{width:1.625rem;height:var(--font-size-14, 0.875rem)}:host([size=small]) .toggle-container .inner-container,:host([size=medium]) .toggle-container .inner-container{width:0.85rem;min-width:0.85rem;height:0.85rem}:host([size=small]) .toggle-container .inner-container.active,:host([size=medium]) .toggle-container .inner-container.active{-webkit-transform:translateX(var(--font-size-12, 0.75rem)) !important;transform:translateX(var(--font-size-12, 0.75rem)) !important}:host([size=large]) .toggle-container{width:var(--spacing-48, 3rem);min-width:var(--spacing-48, 3rem);height:var(--spacing-32, 2rem)}:host([size=large]) .toggle-container .inner-container{width:var(--font-size-28, 1.75rem);height:var(--font-size-28, 1.75rem)}:host([size=large]) .toggle-container .inner-container.active{-webkit-transform:translateX(1.3rem) !important;transform:translateX(1.3rem) !important}:host(.danger) .outer-container .toggle-container.active{background-color:var(--danger, #d44333);border-color:var(--danger, #d44333)}:host(.danger) .readonly .toggle-container.active{background-color:var(--danger-40, rgba(212, 67, 51, 0.4));border-color:var(--danger, #d44333)}:host(.info) .outer-container .toggle-container.active{background-color:var(--info, #d84c96);border-color:var(--info, #d84c96)}:host(.info) .readonly .toggle-container.active{background-color:var(--info-40, rgba(216, 76, 150, 0.4));border-color:var(--info, #d84c96)}:host(.warning) .outer-container .toggle-container.active{background-color:var(--warning, #ed6e33);border-color:var(--warning, #ed6e33)}:host(.warning) .readonly .toggle-container.active{background-color:var(--warning-40, rgba(237, 110, 51, 0.4));border-color:var(--warning, #ed6e33)}:host(.dark) .outer-container .toggle-container.active{background-color:var(--dark, #000000);border-color:var(--dark, #000000)}:host(.dark) .readonly .toggle-container.active{background-color:var(--dark-40, rgba(0, 0, 0, 0.4));border-color:var(--dark, #000000)}:host(.energized) .outer-container .toggle-container.active{background-color:var(--energized, #ffc043);border-color:var(--energized, #ffc043)}:host(.energized) .readonly .toggle-container.active{background-color:var(--energized-40, rgba(255, 192, 67, 0.4));border-color:var(--energized, #ffc043)}:host(.app-color) .outer-container .toggle-container.active{background-color:var(--app-color, #5a30f4);border-color:var(--app-color, #5a30f4)}:host(.app-color) .readonly .toggle-container.active{background-color:var(--app-color-40, rgba(90, 48, 244, 0.4));border-color:var(--app-color, #5a30f4)}:host(.accent) .outer-container .toggle-container.active{background-color:var(--accent, #276ef1);border-color:var(--accent, #276ef1)}:host(.accent) .readonly .toggle-container.active{background-color:var(--accent-40, rgba(39, 110, 241, 0.4));border-color:var(--accent, #276ef1)}:host(.night) .outer-container .toggle-container .inner-container{background-color:var(--app-color, #5a30f4)}";
10
+ const formToggleCss = ":host .optional{margin-left:var(--spacing-08, 0.5rem) !important;color:var(--stable, #adadad);white-space:nowrap}:host .readonly,:host .outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;word-break:break-word}:host .readonly .inner-container,:host .outer-container .inner-container{display:-ms-flexbox;display:flex}:host .readonly .label,:host .outer-container .label{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem);line-height:1.5;text-align:left;font-variant-caps:normal}:host .readonly .label .required,:host .outer-container .label .required{margin-right:var(--spacing-04, 0.25rem);color:var(--danger, #d44333);font-variant-caps:normal}:host .readonly .label .label-required,:host .outer-container .label .label-required{margin-left:var(--spacing-04, 0.25rem);color:var(--danger, #d44333)}:host .readonly .label.readonly,:host .outer-container .label.readonly{letter-spacing:0px}:host .readonly .toggle-container,:host .outer-container .toggle-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border-radius:3.75rem;-webkit-transition:0.2s cubic-bezier(0.24, 0, 0.5, 1);transition:0.2s cubic-bezier(0.24, 0, 0.5, 1)}:host .readonly .toggle-container.active,:host .outer-container .toggle-container.active{-webkit-transition:width 0.2s cubic-bezier(0, 0, 0, 0.1);transition:width 0.2s cubic-bezier(0, 0, 0, 0.1);-webkit-transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1);transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1)}:host .readonly .toggle-container .inner-container,:host .outer-container .toggle-container .inner-container{-webkit-box-sizing:content-box;box-sizing:content-box;border-radius:50%;-webkit-box-shadow:0 0 0 0.0625rem rgba(0, 0, 0, 0.1), 0 4px 0px 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);box-shadow:0 0 0 0.0625rem rgba(0, 0, 0, 0.1), 0 4px 0px 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);-webkit-transform:translateX(-1px);transform:translateX(-1px);-webkit-transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1);transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1)}:host .readonly .toggle-container .inner-container.active,:host .outer-container .toggle-container .inner-container.active{-webkit-transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1);transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1)}:host .readonly .toggle-container{margin:var(--spacing-04, 0.25rem);background-color:var(--stable-light, #f1f1f1);border:solid var(--border-width-01, 0.0625rem) var(--dark-05)}:host .readonly .toggle-container .inner-container{background-color:var(--light, #ffffff) !important;border:solid 0.5px var(--dark-05);-webkit-transform:translateX(2px);transform:translateX(2px)}:host .readonly .toggle-container.active{background-color:var(--app-color-40, rgba(90, 48, 244, 0.4));border-color:var(--app-color, #5a30f4)}:host yoo-icon.left{padding-right:var(--spacing-08, 0.5rem)}:host .outer-container .text-container{-ms-flex:1;flex:1}:host .outer-container .toggle-container{background-color:var(--dark-10, rgba(0, 0, 0, 0.1));border:solid var(--border-width-01, 0.0625rem) var(--dark-10, rgba(0, 0, 0, 0.1))}:host .outer-container .toggle-container.active{background-color:var(--app-color, #5a30f4);border-color:var(--app-color, #5a30f4)}:host .outer-container .toggle-container:hover{cursor:pointer}:host .outer-container .toggle-container .inner-container{background-color:var(--light, #ffffff);border:solid 0.5px var(--dark-10, rgba(0, 0, 0, 0.1))}:host .outer-container .toggle-container .inner-container:hover{cursor:pointer}:host .outer-container .label{color:var(--dark, #000000)}:host .outer-container .help{color:var(--stable, #adadad)}:host(.stable) .readonly .label{color:var(--stable, #adadad)}:host(.line) .outer-container .text-container,:host(.line) .readonly .text-container{-ms-flex-order:1;order:1;margin-left:var(--spacing-16, 1rem)}:host(.fill) .toggle-container{background:var(--light, #ffffff)}:host(.web) .outer-container .label,:host(.web) .readonly .label{padding-left:var(--spacing-08, 0.5rem);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem)}:host(.mobile) .outer-container .label.with-help{-ms-flex:initial;flex:initial}:host(.mobile) .outer-container .help{-ms-flex:1;flex:1}:host(.advanced) .outer-container .label.with-help{-ms-flex:initial;flex:initial}:host(.advanced) .outer-container .help{-ms-flex:1;flex:1;padding-left:var(--spacing-08, 0.5rem)}:host(.advanced) .outer-container yoo-tooltip{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host([size=small]) .outer-container .label{font-size:var(--font-size-14, 0.875rem)}:host([size=small]) .toggle-container,:host([size=medium]) .toggle-container{width:1.625rem;height:var(--font-size-14, 0.875rem)}:host([size=small]) .toggle-container .inner-container,:host([size=medium]) .toggle-container .inner-container{width:0.85rem;min-width:0.85rem;height:0.85rem}:host([size=small]) .toggle-container .inner-container.active,:host([size=medium]) .toggle-container .inner-container.active{-webkit-transform:translateX(var(--font-size-12, 0.75rem)) !important;transform:translateX(var(--font-size-12, 0.75rem)) !important}:host([size=large]) .toggle-container{width:var(--spacing-48, 3rem);min-width:var(--spacing-48, 3rem);height:var(--spacing-32, 2rem)}:host([size=large]) .toggle-container .inner-container{width:var(--font-size-28, 1.75rem);height:var(--font-size-28, 1.75rem)}:host([size=large]) .toggle-container .inner-container.active{-webkit-transform:translateX(1.3rem) !important;transform:translateX(1.3rem) !important}:host(.danger) .outer-container .toggle-container.active{background-color:var(--danger, #d44333);border-color:var(--danger, #d44333)}:host(.danger) .readonly .toggle-container.active{background-color:var(--danger-40, rgba(212, 67, 51, 0.4));border-color:var(--danger, #d44333)}:host(.info) .outer-container .toggle-container.active{background-color:var(--info, #d84c96);border-color:var(--info, #d84c96)}:host(.info) .readonly .toggle-container.active{background-color:var(--info-40, rgba(216, 76, 150, 0.4));border-color:var(--info, #d84c96)}:host(.warning) .outer-container .toggle-container.active{background-color:var(--warning, #ed6e33);border-color:var(--warning, #ed6e33)}:host(.warning) .readonly .toggle-container.active{background-color:var(--warning-40, rgba(237, 110, 51, 0.4));border-color:var(--warning, #ed6e33)}:host(.dark) .outer-container .toggle-container.active{background-color:var(--dark, #000000);border-color:var(--dark, #000000)}:host(.dark) .readonly .toggle-container.active{background-color:var(--dark-40, rgba(0, 0, 0, 0.4));border-color:var(--dark, #000000)}:host(.energized) .outer-container .toggle-container.active{background-color:var(--energized, #ffc043);border-color:var(--energized, #ffc043)}:host(.energized) .readonly .toggle-container.active{background-color:var(--energized-40, rgba(255, 192, 67, 0.4));border-color:var(--energized, #ffc043)}:host(.app-color) .outer-container .toggle-container.active{background-color:var(--app-color, #5a30f4);border-color:var(--app-color, #5a30f4)}:host(.app-color) .readonly .toggle-container.active{background-color:var(--app-color-40, rgba(90, 48, 244, 0.4));border-color:var(--app-color, #5a30f4)}:host(.accent) .outer-container .toggle-container.active{background-color:var(--accent, #276ef1);border-color:var(--accent, #276ef1)}:host(.accent) .readonly .toggle-container.active{background-color:var(--accent-40, rgba(39, 110, 241, 0.4));border-color:var(--accent, #276ef1)}:host(.night) .outer-container .toggle-container{background-color:var(--dark-40, rgba(0, 0, 0, 0.4))}:host(.night) .outer-container .toggle-container .inner-container{background-color:var(--app-color, #5a30f4)}";
11
11
 
12
12
  const YooFormToggleComponent = class {
13
13
  constructor(hostRef) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yoobic/yobi",
3
- "version": "8.1.0-75",
3
+ "version": "8.1.0-76",
4
4
  "description": "Yobi - Yoobic Design System",
5
5
  "module": "dist/index.js",
6
6
  "main": "dist/index.cjs.js",