@inera/ids-design 4.10.0 → 5.0.1

package/components/form/spinner/spinner.css

@@ -1 +1,60 @@
-.ids-spinner,.ids-spinner--light{width:70px;height:18px;text-align:center}.ids-spinner div,.ids-spinner--light div{width:18px;height:18px;background-color:var(--spinner_color);border-radius:100%;display:inline-block;-webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.ids-spinner .ids-bounce-1,.ids-spinner--light .ids-bounce-1{-webkit-animation-delay:-0.32s;animation-delay:-0.32s}.ids-spinner .ids-bounce-2,.ids-spinner--light .ids-bounce-2{-webkit-animation-delay:-0.16s;animation-delay:-0.16s}.ids-spinner--light div{background-color:white}.ids-spinner-sr{position:absolute;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0}@-webkit-keyframes sk-bouncedelay{0%,80%,100%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes sk-bouncedelay{0%,80%,100%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}
+/* https://tobiasahlin.com/spinkit/ */
+.ids-spinner,
+.ids-spinner--light {
+  width: 70px;
+  height: 18px;
+  text-align: center;
+}
+.ids-spinner div,
+.ids-spinner--light div {
+  width: 18px;
+  height: 18px;
+  background-color: var(--spinner_color);
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+.ids-spinner .ids-bounce-1,
+.ids-spinner--light .ids-bounce-1 {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+.ids-spinner .ids-bounce-2,
+.ids-spinner--light .ids-bounce-2 {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+.ids-spinner--light div {
+  background-color: white;
+}
+
+.ids-spinner-sr {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+}
+
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+  }
+  40% {
+    -webkit-transform: scale(1);
+  }
+}
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+  40% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}

package/components/form/textarea/textarea-lit.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/form/textarea/textarea.css

@@ -1 +0,0 @@
-

package/components/form/toggle/toggle-lit.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/form/toggle/toggle-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ".ids-label-wrapper,.ids-toggle-wrapper{align-items:center;display:inline-flex;gap:10px}.ids-toggle-wrapper .ids-toggle-control{border-radius:100px;display:inline-flex;height:30px;position:relative;width:60px}.ids-toggle-wrapper .ids-toggle-control:focus-within{outline:var(--focus_outline);outline-offset:var(--focus_outline-offset)}.ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled.ids-toggle-control--checked .ids-toggle-control-knob{-webkit-transform:translateX(28px);-ms-transform:translateX(28px);transform:translateX(28px)}.ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled .ids-toggle-control-slider{background-color:var(--IDS-TOGGLE--DISABLED__BACKGROUND-COLOR)!important;border:var(--IDS-TOGGLE-SLIDER--DISABLED__BORDER)}.ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled .ids-toggle-control-knob{background-color:var(--IDS-TOGGLE-KNOB--DISABLED__BACKGROUND-COLOR);bottom:2px}.ids-toggle-wrapper .ids-toggle-control ::slotted(input),.ids-toggle-wrapper .ids-toggle-control input{cursor:pointer;height:100%;opacity:0;position:absolute;width:100%;z-index:1}.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-slider{background-color:#ccc;background-color:var(--IDS-TOGGLE__BACKGROUND-COLOR);border-radius:100px;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;-webkit-transition:.4s;transition:.4s}.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-knob{align-items:center;background-color:#fff;border-radius:100px;bottom:3px;content:\"\";display:flex;height:24px;justify-content:center;left:3px;max-height:24px;max-width:24px;position:absolute;-webkit-transition:.3s;transition:all .3s;width:24px}.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-knob .ids-icon{right:auto;top:auto;transform:none}.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-knob .ids-toggle-control-know--inactive{display:block}.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-knob .ids-toggle-control-know--active{display:none}.ids-toggle-control input:checked+.ids-toggle-control-slider{background-color:var(--IDS-TOGGLE--ACTIVE__BACKGROUND-COLOR)}.ids-toggle-control input:checked+.ids-toggle-control-slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}.ids-toggle-control input:checked+.ids-toggle-control-slider .ids-toggle-control-knob{-webkit-transform:translateX(29px);-ms-transform:translateX(29px);transform:translateX(29px)}.ids-toggle-control input:checked+.ids-toggle-control-slider .ids-toggle-control-knob .ids-toggle-control-know--inactive{display:none}.ids-toggle-control input:checked+.ids-toggle-control-slider .ids-toggle-control-knob .ids-toggle-control-know--active{display:block}.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-knob,.ids-toggle-control.ids-toggle-control--checked input:checked+.ids-toggle-control-knob{-webkit-transform:translateX(29px);-ms-transform:translateX(29px);transform:translateX(29px)}.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-knob .ids-toggle-control-know--inactive,.ids-toggle-control.ids-toggle-control--checked input:checked+.ids-toggle-control-knob .ids-toggle-control-know--inactive{display:none}.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-knob .ids-toggle-control-know--active,.ids-toggle-control.ids-toggle-control--checked input:checked+.ids-toggle-control-knob .ids-toggle-control-know--active{display:block}.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-slider{background-color:var(--IDS-TOGGLE--ACTIVE__BACKGROUND-COLOR)}.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}";
+var css_248z = ".ids-label-wrapper,.ids-toggle-wrapper{align-items:center;display:inline-flex;gap:10px}.ids-toggle-wrapper .ids-toggle-control{border-radius:100px;display:inline-flex;height:30px;position:relative;width:60px}.ids-toggle-wrapper .ids-toggle-control:focus-within{outline:var(--focus_outline);outline-offset:var(--focus_outline-offset)}.ids-toggle-wrapper .ids-toggle-control ::slotted(input),.ids-toggle-wrapper .ids-toggle-control input{cursor:pointer;height:100%;opacity:0;position:absolute;width:100%;z-index:1}.ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled ::slotted(input),.ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled input{cursor:default}.ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled.ids-toggle-control--checked .ids-toggle-control-knob{-webkit-transform:translateX(28px);-ms-transform:translateX(28px);transform:translateX(28px)}.ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled.ids-toggle-control--checked:hover{cursor:default}.ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled .ids-toggle-control-slider{background-color:var(--IDS-TOGGLE--DISABLED__BACKGROUND-COLOR)!important;border:var(--IDS-TOGGLE-SLIDER--DISABLED__BORDER)}.ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled .ids-toggle-control-knob{background-color:var(--IDS-TOGGLE-KNOB--DISABLED__BACKGROUND-COLOR);bottom:2px}.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-slider{background-color:#ccc;background-color:var(--IDS-TOGGLE__BACKGROUND-COLOR);border-radius:100px;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;-webkit-transition:.4s;transition:.4s}.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-knob{align-items:center;background-color:#fff;border-radius:100px;bottom:3px;content:\"\";display:flex;height:24px;justify-content:center;left:3px;max-height:24px;max-width:24px;position:absolute;-webkit-transition:.3s;transition:all .3s;width:24px}.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-knob .ids-icon{right:auto;top:auto;transform:none}.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-knob .ids-toggle-control-know--inactive{display:block}.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-knob .ids-toggle-control-know--active{display:none}.ids-toggle-wrapper .ids-label,.ids-toggle-wrapper .ids-toggle-label,.ids-toggle-wrapper ::slotted(.ids-label),.ids-toggle-wrapper label{cursor:pointer}.ids-toggle-wrapper .ids-label.ids-label--disabled,.ids-toggle-wrapper .ids-toggle-label.ids-toggle-label--disabled,.ids-toggle-wrapper ::slotted(.ids-label.ids-label--disabled){cursor:default}.ids-toggle-control input:checked+.ids-toggle-control-slider{background-color:var(--IDS-TOGGLE--ACTIVE__BACKGROUND-COLOR)}.ids-toggle-control input:checked+.ids-toggle-control-slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}.ids-toggle-control input:checked+.ids-toggle-control-slider .ids-toggle-control-knob{-webkit-transform:translateX(29px);-ms-transform:translateX(29px);transform:translateX(29px)}.ids-toggle-control input:checked+.ids-toggle-control-slider .ids-toggle-control-knob .ids-toggle-control-know--inactive{display:none}.ids-toggle-control input:checked+.ids-toggle-control-slider .ids-toggle-control-knob .ids-toggle-control-know--active{display:block}.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-knob,.ids-toggle-control.ids-toggle-control--checked input:checked+.ids-toggle-control-knob{-webkit-transform:translateX(29px);-ms-transform:translateX(29px);transform:translateX(29px)}.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-knob .ids-toggle-control-know--inactive,.ids-toggle-control.ids-toggle-control--checked input:checked+.ids-toggle-control-knob .ids-toggle-control-know--inactive{display:none}.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-knob .ids-toggle-control-know--active,.ids-toggle-control.ids-toggle-control--checked input:checked+.ids-toggle-control-knob .ids-toggle-control-know--active{display:block}.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-slider{background-color:var(--IDS-TOGGLE--ACTIVE__BACKGROUND-COLOR)}.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}";
 
 var toggleLit = css`${unsafeCSS(css_248z)}`;
 

package/components/form/toggle/toggle.css

@@ -1 +1,153 @@
-.ids-label-wrapper{display:inline-flex;gap:10px;align-items:center}.ids-toggle-wrapper{display:inline-flex;align-items:center;gap:10px}.ids-toggle-wrapper .ids-toggle-control{display:inline-flex;width:60px;height:30px;border-radius:100px;position:relative}.ids-toggle-wrapper .ids-toggle-control:focus-within{outline:var(--focus_outline);outline-offset:var(--focus_outline-offset)}.ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled.ids-toggle-control--checked .ids-toggle-control-knob{-webkit-transform:translateX(28px);-ms-transform:translateX(28px);transform:translateX(28px)}.ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled .ids-toggle-control-slider{background-color:var(--IDS-TOGGLE--DISABLED__BACKGROUND-COLOR) !important;border:var(--IDS-TOGGLE-SLIDER--DISABLED__BORDER)}.ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled .ids-toggle-control-knob{background-color:var(--IDS-TOGGLE-KNOB--DISABLED__BACKGROUND-COLOR);bottom:2px}.ids-toggle-wrapper .ids-toggle-control ::slotted(input),.ids-toggle-wrapper .ids-toggle-control input{position:absolute;cursor:pointer;opacity:0;width:100%;height:100%;z-index:1}.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;border-radius:100px;background-color:#ccc;background-color:var(--IDS-TOGGLE__BACKGROUND-COLOR);-webkit-transition:.4s;transition:.4s}.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-knob{position:absolute;content:"";max-height:24px;max-width:24px;height:24px;width:24px;display:flex;align-items:center;justify-content:center;left:3px;bottom:3px;border-radius:100px;background-color:white;-webkit-transition:.3s;transition:all .3s}.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-knob .ids-icon{right:auto;top:auto;transform:none}.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-knob .ids-toggle-control-know--inactive{display:block}.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-knob .ids-toggle-control-know--active{display:none}.ids-toggle-control input:checked+.ids-toggle-control-slider{background-color:var(--IDS-TOGGLE--ACTIVE__BACKGROUND-COLOR)}.ids-toggle-control input:checked+.ids-toggle-control-slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}.ids-toggle-control input:checked+.ids-toggle-control-slider .ids-toggle-control-knob{-webkit-transform:translateX(29px);-ms-transform:translateX(29px);transform:translateX(29px)}.ids-toggle-control input:checked+.ids-toggle-control-slider .ids-toggle-control-knob .ids-toggle-control-know--inactive{display:none}.ids-toggle-control input:checked+.ids-toggle-control-slider .ids-toggle-control-knob .ids-toggle-control-know--active{display:block}.ids-toggle-control.ids-toggle-control--checked input:checked+.ids-toggle-control-knob,.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-knob{-webkit-transform:translateX(29px);-ms-transform:translateX(29px);transform:translateX(29px)}.ids-toggle-control.ids-toggle-control--checked input:checked+.ids-toggle-control-knob .ids-toggle-control-know--inactive,.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-knob .ids-toggle-control-know--inactive{display:none}.ids-toggle-control.ids-toggle-control--checked input:checked+.ids-toggle-control-knob .ids-toggle-control-know--active,.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-knob .ids-toggle-control-know--active{display:block}.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-slider{background-color:var(--IDS-TOGGLE--ACTIVE__BACKGROUND-COLOR)}.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}
+/* 1177 Typography - no margins */
+/*******
+* FORM
+********/
+.ids-label-wrapper {
+  display: inline-flex;
+  gap: 10px;
+  align-items: center;
+}
+
+/*******
+* Accessibility
+********/
+.ids-toggle-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+.ids-toggle-wrapper .ids-toggle-control {
+  display: inline-flex;
+  width: 60px;
+  height: 30px;
+  border-radius: 100px;
+  position: relative;
+}
+.ids-toggle-wrapper .ids-toggle-control:focus-within {
+  outline: var(--focus_outline);
+  outline-offset: var(--focus_outline-offset);
+}
+.ids-toggle-wrapper .ids-toggle-control ::slotted(input),
+.ids-toggle-wrapper .ids-toggle-control input {
+  position: absolute;
+  cursor: pointer;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+.ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled ::slotted(input),
+.ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled input {
+  cursor: default;
+}
+.ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled.ids-toggle-control--checked .ids-toggle-control-knob {
+  -webkit-transform: translateX(28px);
+  -ms-transform: translateX(28px);
+  transform: translateX(28px);
+}
+.ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled.ids-toggle-control--checked:hover {
+  cursor: default;
+}
+.ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled .ids-toggle-control-slider {
+  background-color: var(--IDS-TOGGLE--DISABLED__BACKGROUND-COLOR) !important;
+  border: var(--IDS-TOGGLE-SLIDER--DISABLED__BORDER);
+}
+.ids-toggle-wrapper .ids-toggle-control.ids-toggle-control--disabled .ids-toggle-control-knob {
+  background-color: var(--IDS-TOGGLE-KNOB--DISABLED__BACKGROUND-COLOR);
+  bottom: 2px;
+}
+.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 100px;
+  background-color: #ccc;
+  background-color: var(--IDS-TOGGLE__BACKGROUND-COLOR);
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-knob {
+  position: absolute;
+  content: "";
+  max-height: 24px;
+  max-width: 24px;
+  height: 24px;
+  width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  left: 3px;
+  bottom: 3px;
+  border-radius: 100px;
+  background-color: white;
+  -webkit-transition: 0.3s;
+  transition: all 0.3s;
+}
+.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-knob .ids-icon {
+  right: auto;
+  top: auto;
+  transform: none;
+}
+.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-knob .ids-toggle-control-know--inactive {
+  display: block;
+}
+.ids-toggle-wrapper .ids-toggle-control .ids-toggle-control-knob .ids-toggle-control-know--active {
+  display: none;
+}
+.ids-toggle-wrapper .ids-label,
+.ids-toggle-wrapper label,
+.ids-toggle-wrapper .ids-toggle-label,
+.ids-toggle-wrapper ::slotted(.ids-label) {
+  cursor: pointer;
+}
+.ids-toggle-wrapper .ids-label.ids-label--disabled,
+.ids-toggle-wrapper .ids-toggle-label.ids-toggle-label--disabled,
+.ids-toggle-wrapper ::slotted(.ids-label.ids-label--disabled) {
+  cursor: default;
+}
+
+/* The slider */
+.ids-toggle-control input:checked + .ids-toggle-control-slider {
+  background-color: var(--IDS-TOGGLE--ACTIVE__BACKGROUND-COLOR);
+}
+.ids-toggle-control input:checked + .ids-toggle-control-slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+.ids-toggle-control input:checked + .ids-toggle-control-slider .ids-toggle-control-knob {
+  -webkit-transform: translateX(29px);
+  -ms-transform: translateX(29px);
+  transform: translateX(29px);
+}
+.ids-toggle-control input:checked + .ids-toggle-control-slider .ids-toggle-control-knob .ids-toggle-control-know--inactive {
+  display: none;
+}
+.ids-toggle-control input:checked + .ids-toggle-control-slider .ids-toggle-control-knob .ids-toggle-control-know--active {
+  display: block;
+}
+.ids-toggle-control.ids-toggle-control--checked input:checked + .ids-toggle-control-knob,
+.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-knob {
+  -webkit-transform: translateX(29px);
+  -ms-transform: translateX(29px);
+  transform: translateX(29px);
+}
+.ids-toggle-control.ids-toggle-control--checked input:checked + .ids-toggle-control-knob .ids-toggle-control-know--inactive,
+.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-knob .ids-toggle-control-know--inactive {
+  display: none;
+}
+.ids-toggle-control.ids-toggle-control--checked input:checked + .ids-toggle-control-knob .ids-toggle-control-know--active,
+.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-knob .ids-toggle-control-know--active {
+  display: block;
+}
+.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-slider {
+  background-color: var(--IDS-TOGGLE--ACTIVE__BACKGROUND-COLOR);
+}
+.ids-toggle-control.ids-toggle-control--checked .ids-toggle-control-slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}

package/components/grid/column/_column-partials.css

@@ -1 +0,0 @@
-

package/components/grid/column/column-lit.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/grid/column/column.css

@@ -1 +1,424 @@
-:host,.ids-col{display:block;flex-basis:0;flex-grow:1;max-width:100%}:host([cols="auto"]),.ids-col-auto{flex:0 0 auto;width:auto}:host([cols="1"]),.ids-col-1{flex:0 0 8.3%;max-width:8.3%}:host([cols="2"]),.ids-col-2{flex:0 0 16%;max-width:16%}:host([cols="3"]),.ids-col-3{flex:0 0 25%;max-width:25%}:host([cols="4"]),.ids-col-4{flex:0 0 33.3%;max-width:33.3%}:host([cols="5"]),.ids-col-5{flex:0 0 41.6%;max-width:41.6%}:host([cols="6"]),.ids-col-6{flex:0 0 50%;max-width:50%}:host([cols="7"]),.ids-col-7{flex:0 0 58%;max-width:58.3%}:host([cols="8"]),.ids-col-8{flex:0 0 66.6%;max-width:66.6%}:host([cols="9"]),.ids-col-9{flex:0 0 75%;max-width:75%}:host([cols="10"]),.ids-col-10{flex:0 0 83.3%;max-width:83.3%}:host([cols="11"]),.ids-col-11{flex:0 0 91.6%;max-width:91.6%}:host([cols="12"]),.ids-col-12{flex:0 0 100%;max-width:100%}:host([offset="none"]),.ids-col-offset-none{margin-left:0%}:host([offset="1"]),.ids-col .offset-1{margin-left:8.3%}:host([offset="2"]),.ids-col .offset-2{margin-left:16%}:host([offset="3"]),.ids-col .offset-3{margin-left:25%}:host([offset="4"]),.ids-col .offset-4{margin-left:33.3%}:host([offset="5"]),.ids-col .offset-5{margin-left:41.6%}:host([offset="6"]),.ids-col .offset-6{margin-left:50%}:host([offset="7"]),.ids-col .offset-7{margin-left:58.3%}:host([offset="8"]),.ids-col .offset-8{margin-left:66.6%}:host([offset="9"]),.ids-col .offset-9{margin-left:75%}:host([offset="10"]),.ids-col .offset-10{margin-left:83.3%}:host([offset="11"]),.ids-col .offset-11{margin-left:91.6%}:host([offset="12"]),.ids-col .offset-12{margin-left:100%}:host([alignself="start"]),.ids-col .align-start{align-self:start}:host([alignself="center"]),.ids-col .align-center{align-self:center}:host([alignself="end"]),.ids-col .align-end{align-self:end}:host([alignself="auto"]),.ids-col .align-auto{align-self:auto}:host([alignself="baseline"]),.ids-col .align-baseline{align-self:baseline}:host([alignself="stretch"]),.ids-col .align-stretch{align-self:stretch}@media only screen and (max-width: 1024px){:host([m="auto"]),.ids-col .m-auto{flex:0 0 auto;width:auto}:host([m="1"]),.ids-col .m-1{flex:0 0 8.3%;max-width:8.3%}:host([m="2"]),.ids-col .m-2{flex:0 0 16%;max-width:16%}:host([m="3"]),.ids-col .m-3{flex:0 0 25%;max-width:25%}:host([m="4"]),.ids-col .m-4{flex:0 0 33.3%;max-width:33.3%}:host([m="5"]),.ids-col .m-5{flex:0 0 41.6%;max-width:41.6%}:host([m="6"]),.ids-col .m-6{flex:0 0 50%;max-width:50%}:host([m="7"]),.ids-col .m-7{flex:0 0 58%;max-width:58.3%}:host([m="8"]),.ids-col .m-8{flex:0 0 66.6%;max-width:66.6%}:host([m="9"]),.ids-col .m-9{flex:0 0 75%;max-width:75%}:host([m="10"]),.ids-col .m-10{flex:0 0 83.3%;max-width:83.3%}:host([m="11"]),.ids-col .m-11{flex:0 0 91.6%;max-width:91.6%}:host([m="12"]),.ids-col .m-12{flex:0 0 100%;max-width:100%}:host([moffset="none"]),.ids-col .m-offset-none{margin-left:0%}:host([moffset="1"]),.ids-col .m-offset-1{margin-left:8.3%}:host([moffset="2"]),.ids-col .m-offset-2{margin-left:16%}:host([moffset="3"]),.ids-col .m-offset-3{margin-left:25%}:host([moffset="4"]),.ids-col .m-offset-4{margin-left:33.3%}:host([moffset="5"]),.ids-col .m-offset-5{margin-left:41.6%}:host([moffset="6"]),.ids-col .m-offset-6{margin-left:50%}:host([moffset="7"]),.ids-col .m-offset-7{margin-left:58.3%}:host([moffset="8"]),.ids-col .m-offset-8{margin-left:66.6%}:host([moffset="9"]),.ids-col .m-offset-9{margin-left:75%}:host([moffset="10"]),.ids-col .m-offset-10{margin-left:83.3%}:host([moffset="11"]),.ids-col .m-offset-11{margin-left:91.6%}:host([moffset="12"]),.ids-col .m-offset-12{margin-left:100%}}@media only screen and (max-width: 640px){:host([s="auto"]),.ids-col .s-auto{flex:0 0 auto;width:auto}:host([s="1"]),.ids-col .s-1{flex:0 0 8.3%;max-width:8.3%}:host([s="2"]),.ids-col .s-2{flex:0 0 16%;max-width:16%}:host([s="3"]),.ids-col .s-3{flex:0 0 25%;max-width:25%}:host([s="4"]),.ids-col .s-4{flex:0 0 33.3%;max-width:33.3%}:host([s="5"]),.ids-col .s-5{flex:0 0 41.6%;max-width:41.6%}:host([s="6"]),.ids-col .s-6{flex:0 0 50%;max-width:50%}:host([s="7"]),.ids-col .s-7{flex:0 0 58%;max-width:58.3%}:host([s="8"]),.ids-col .s-8{flex:0 0 66.6%;max-width:66.6%}:host([s="9"]),.ids-col .s-9{flex:0 0 75%;max-width:75%}:host([s="10"]),.ids-col .s-10{flex:0 0 83.3%;max-width:83.3%}:host([s="11"]),.ids-col .s-11{flex:0 0 91.6%;max-width:91.6%}:host([s="12"]),.ids-col .s-12{flex:0 0 100%;max-width:100%}:host([soffset="none"]),.ids-col .s-offset-none{margin-left:0%}:host([soffset="1"]),.ids-col .s-offset-1{margin-left:8.3%}:host([soffset="2"]),.ids-col .s-offset-2{margin-left:16%}:host([soffset="3"]),.ids-col .s-offset-3{margin-left:25%}:host([soffset="4"]),.ids-col .s-offset-4{margin-left:33.3%}:host([soffset="5"]),.ids-col .s-offset-5{margin-left:41.6%}:host([soffset="6"]),.ids-col .s-offset-6{margin-left:50%}:host([soffset="7"]),.ids-col .s-offset-7{margin-left:58.3%}:host([soffset="8"]),.ids-col .s-offset-8{margin-left:66.6%}:host([soffset="9"]),.ids-col .s-offset-9{margin-left:75%}:host([soffset="10"]),.ids-col .s-offset-10{margin-left:83.3%}:host([soffset="11"]),.ids-col .s-offset-11{margin-left:91.6%}:host([soffset="12"]),.ids-col .s-offset-12{margin-left:100%}}
+:host,
+.ids-col {
+  display: block;
+  flex-basis: 0;
+  flex-grow: 1;
+  max-width: 100%;
+}
+
+:host([cols=auto]),
+.ids-col-auto {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+:host([cols="1"]),
+.ids-col-1 {
+  flex: 0 0 8.3%;
+  max-width: 8.3%;
+}
+
+:host([cols="2"]),
+.ids-col-2 {
+  flex: 0 0 16%;
+  max-width: 16%;
+}
+
+:host([cols="3"]),
+.ids-col-3 {
+  flex: 0 0 25%;
+  max-width: 25%;
+}
+
+:host([cols="4"]),
+.ids-col-4 {
+  flex: 0 0 33.3%;
+  max-width: 33.3%;
+}
+
+:host([cols="5"]),
+.ids-col-5 {
+  flex: 0 0 41.6%;
+  max-width: 41.6%;
+}
+
+:host([cols="6"]),
+.ids-col-6 {
+  flex: 0 0 50%;
+  max-width: 50%;
+}
+
+:host([cols="7"]),
+.ids-col-7 {
+  flex: 0 0 58%;
+  max-width: 58.3%;
+}
+
+:host([cols="8"]),
+.ids-col-8 {
+  flex: 0 0 66.6%;
+  max-width: 66.6%;
+}
+
+:host([cols="9"]),
+.ids-col-9 {
+  flex: 0 0 75%;
+  max-width: 75%;
+}
+
+:host([cols="10"]),
+.ids-col-10 {
+  flex: 0 0 83.3%;
+  max-width: 83.3%;
+}
+
+:host([cols="11"]),
+.ids-col-11 {
+  flex: 0 0 91.6%;
+  max-width: 91.6%;
+}
+
+:host([cols="12"]),
+.ids-col-12 {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+
+/* Cols */
+/* offset */
+:host([offset=none]),
+.ids-col-offset-none {
+  margin-left: 0%;
+}
+
+:host([offset="1"]),
+.ids-col .offset-1 {
+  margin-left: 8.3%;
+}
+
+:host([offset="2"]),
+.ids-col .offset-2 {
+  margin-left: 16%;
+}
+
+:host([offset="3"]),
+.ids-col .offset-3 {
+  margin-left: 25%;
+}
+
+:host([offset="4"]),
+.ids-col .offset-4 {
+  margin-left: 33.3%;
+}
+
+:host([offset="5"]),
+.ids-col .offset-5 {
+  margin-left: 41.6%;
+}
+
+:host([offset="6"]),
+.ids-col .offset-6 {
+  margin-left: 50%;
+}
+
+:host([offset="7"]),
+.ids-col .offset-7 {
+  margin-left: 58.3%;
+}
+
+:host([offset="8"]),
+.ids-col .offset-8 {
+  margin-left: 66.6%;
+}
+
+:host([offset="9"]),
+.ids-col .offset-9 {
+  margin-left: 75%;
+}
+
+:host([offset="10"]),
+.ids-col .offset-10 {
+  margin-left: 83.3%;
+}
+
+:host([offset="11"]),
+.ids-col .offset-11 {
+  margin-left: 91.6%;
+}
+
+:host([offset="12"]),
+.ids-col .offset-12 {
+  margin-left: 100%;
+}
+
+/* Align self */
+:host([alignself=start]),
+.ids-col .align-start {
+  align-self: start;
+}
+
+:host([alignself=center]),
+.ids-col .align-center {
+  align-self: center;
+}
+
+:host([alignself=end]),
+.ids-col .align-end {
+  align-self: end;
+}
+
+:host([alignself=auto]),
+.ids-col .align-auto {
+  align-self: auto;
+}
+
+:host([alignself=baseline]),
+.ids-col .align-baseline {
+  align-self: baseline;
+}
+
+:host([alignself=stretch]),
+.ids-col .align-stretch {
+  align-self: stretch;
+}
+
+@media only screen and (max-width: 1024px) {
+  :host([m=auto]),
+  .ids-col .m-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  :host([m="1"]),
+  .ids-col .m-1 {
+    flex: 0 0 8.3%;
+    max-width: 8.3%;
+  }
+  :host([m="2"]),
+  .ids-col .m-2 {
+    flex: 0 0 16%;
+    max-width: 16%;
+  }
+  :host([m="3"]),
+  .ids-col .m-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  :host([m="4"]),
+  .ids-col .m-4 {
+    flex: 0 0 33.3%;
+    max-width: 33.3%;
+  }
+  :host([m="5"]),
+  .ids-col .m-5 {
+    flex: 0 0 41.6%;
+    max-width: 41.6%;
+  }
+  :host([m="6"]),
+  .ids-col .m-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  :host([m="7"]),
+  .ids-col .m-7 {
+    flex: 0 0 58%;
+    max-width: 58.3%;
+  }
+  :host([m="8"]),
+  .ids-col .m-8 {
+    flex: 0 0 66.6%;
+    max-width: 66.6%;
+  }
+  :host([m="9"]),
+  .ids-col .m-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  :host([m="10"]),
+  .ids-col .m-10 {
+    flex: 0 0 83.3%;
+    max-width: 83.3%;
+  }
+  :host([m="11"]),
+  .ids-col .m-11 {
+    flex: 0 0 91.6%;
+    max-width: 91.6%;
+  }
+  :host([m="12"]),
+  .ids-col .m-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  /* offset medium */
+  :host([moffset=none]),
+  .ids-col .m-offset-none {
+    margin-left: 0%;
+  }
+  :host([moffset="1"]),
+  .ids-col .m-offset-1 {
+    margin-left: 8.3%;
+  }
+  :host([moffset="2"]),
+  .ids-col .m-offset-2 {
+    margin-left: 16%;
+  }
+  :host([moffset="3"]),
+  .ids-col .m-offset-3 {
+    margin-left: 25%;
+  }
+  :host([moffset="4"]),
+  .ids-col .m-offset-4 {
+    margin-left: 33.3%;
+  }
+  :host([moffset="5"]),
+  .ids-col .m-offset-5 {
+    margin-left: 41.6%;
+  }
+  :host([moffset="6"]),
+  .ids-col .m-offset-6 {
+    margin-left: 50%;
+  }
+  :host([moffset="7"]),
+  .ids-col .m-offset-7 {
+    margin-left: 58.3%;
+  }
+  :host([moffset="8"]),
+  .ids-col .m-offset-8 {
+    margin-left: 66.6%;
+  }
+  :host([moffset="9"]),
+  .ids-col .m-offset-9 {
+    margin-left: 75%;
+  }
+  :host([moffset="10"]),
+  .ids-col .m-offset-10 {
+    margin-left: 83.3%;
+  }
+  :host([moffset="11"]),
+  .ids-col .m-offset-11 {
+    margin-left: 91.6%;
+  }
+  :host([moffset="12"]),
+  .ids-col .m-offset-12 {
+    margin-left: 100%;
+  }
+}
+@media only screen and (max-width: 640px) {
+  :host([s=auto]),
+  .ids-col .s-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  :host([s="1"]),
+  .ids-col .s-1 {
+    flex: 0 0 8.3%;
+    max-width: 8.3%;
+  }
+  :host([s="2"]),
+  .ids-col .s-2 {
+    flex: 0 0 16%;
+    max-width: 16%;
+  }
+  :host([s="3"]),
+  .ids-col .s-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  :host([s="4"]),
+  .ids-col .s-4 {
+    flex: 0 0 33.3%;
+    max-width: 33.3%;
+  }
+  :host([s="5"]),
+  .ids-col .s-5 {
+    flex: 0 0 41.6%;
+    max-width: 41.6%;
+  }
+  :host([s="6"]),
+  .ids-col .s-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  :host([s="7"]),
+  .ids-col .s-7 {
+    flex: 0 0 58%;
+    max-width: 58.3%;
+  }
+  :host([s="8"]),
+  .ids-col .s-8 {
+    flex: 0 0 66.6%;
+    max-width: 66.6%;
+  }
+  :host([s="9"]),
+  .ids-col .s-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  :host([s="10"]),
+  .ids-col .s-10 {
+    flex: 0 0 83.3%;
+    max-width: 83.3%;
+  }
+  :host([s="11"]),
+  .ids-col .s-11 {
+    flex: 0 0 91.6%;
+    max-width: 91.6%;
+  }
+  :host([s="12"]),
+  .ids-col .s-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  /* offset small */
+  :host([soffset=none]),
+  .ids-col .s-offset-none {
+    margin-left: 0%;
+  }
+  :host([soffset="1"]),
+  .ids-col .s-offset-1 {
+    margin-left: 8.3%;
+  }
+  :host([soffset="2"]),
+  .ids-col .s-offset-2 {
+    margin-left: 16%;
+  }
+  :host([soffset="3"]),
+  .ids-col .s-offset-3 {
+    margin-left: 25%;
+  }
+  :host([soffset="4"]),
+  .ids-col .s-offset-4 {
+    margin-left: 33.3%;
+  }
+  :host([soffset="5"]),
+  .ids-col .s-offset-5 {
+    margin-left: 41.6%;
+  }
+  :host([soffset="6"]),
+  .ids-col .s-offset-6 {
+    margin-left: 50%;
+  }
+  :host([soffset="7"]),
+  .ids-col .s-offset-7 {
+    margin-left: 58.3%;
+  }
+  :host([soffset="8"]),
+  .ids-col .s-offset-8 {
+    margin-left: 66.6%;
+  }
+  :host([soffset="9"]),
+  .ids-col .s-offset-9 {
+    margin-left: 75%;
+  }
+  :host([soffset="10"]),
+  .ids-col .s-offset-10 {
+    margin-left: 83.3%;
+  }
+  :host([soffset="11"]),
+  .ids-col .s-offset-11 {
+    margin-left: 91.6%;
+  }
+  :host([soffset="12"]),
+  .ids-col .s-offset-12 {
+    margin-left: 100%;
+  }
+}