@inera/ids-design 5.3.0 → 5.4.0

package/{components → dist/components}/form/select-multiple/select-multiple.css

@@ -2,7 +2,7 @@
 * BUTTONS
 ********/
 /*******
-* SCROLLBAR
+* SCROLLBARS
 ********/
 /*******
 * FORM
@@ -11,11 +11,10 @@
 * A11Y
 ********/
 .ids-select-multiple__select {
-  font-family: var(--font-family_1) !important;
+  font-family: var(--IDS-FONT-FAMILY-BASE) !important;
   padding: var(--IDS-INPUT__PADDING);
   background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
   border: var(--IDS-INPUT__BORDER);
-  border-bottom: var(--IDS-INPUT__BORDER);
   border-radius: var(--IDS-INPUT__BORDER-RADIUS);
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
@@ -39,6 +38,24 @@
 .ids-select-multiple__select.ids-input--invalid {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
   border: var(--IDS-FORM--INVALID__BORDER);
+  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
+}
+.ids-select-multiple__select.ids-input--light {
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+}
+.ids-select-multiple__select.ids-input--light:disabled {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+  font-style: italic !important;
+  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
+  border: var(--IDS-FORM--DISABLED__BORDER);
+}
+.ids-select-multiple__select.ids-input--light.ids-input--invalid {
+  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+}
+.ids-select-multiple__select.ids-input--invalid {
+  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+  border: var(--IDS-FORM--INVALID__BORDER);
+  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
 }
 .ids-select-multiple__select.ids-input--light {
   background-color: var(--IDS-COLOR-NEUTRAL-100);
@@ -46,6 +63,7 @@
 .ids-select-multiple__select.ids-input--light.ids-input--invalid {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
   border: var(--IDS-FORM--INVALID__BORDER);
+  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
 }
 .ids-select-multiple__select:disabled {
   cursor: default;
@@ -58,8 +76,8 @@
   border: var(--IDS-FORM--DISABLED__BORDER);
 }
 .ids-select-multiple__select:focus {
-  outline: var(--IDS-FOCUS_OUTLINE);
-  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
 
 .ids-select-multiple-wrapper {
@@ -68,7 +86,7 @@
 }
 .ids-select-multiple-wrapper::after {
   content: "";
-  width: 12px;
+  width: 0.75rem;
   height: 100%;
   display: block;
   position: absolute;
@@ -93,9 +111,9 @@
   background-color: var(--IDS-COLOR-NEUTRAL-100);
 }
 .ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown {
-  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 0.375rem rgba(0, 0, 0, 0.3);
   background-color: var(--IDS-COLOR-NEUTRAL-100);
-  border-radius: var(--IDS-SELECT-MULTIPLE-DROPDOWN__BORDER-RADIUS);
+  border-radius: var(--IDS-SELECT-MULTIPLE__DROPDOWN-BORDER-RADIUS);
   position: absolute;
   z-index: 10;
   left: 0;
@@ -105,40 +123,31 @@
   display: none;
 }
 .ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner {
-  padding: 10px;
+  padding: 0.625rem;
   overflow-y: auto;
 }
 .ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar {
-  width: 14px;
+  width: 1rem;
   position: absolute;
-  margin-left: -20px;
-  margin-top: 0;
+  margin-left: -1.25rem;
 }
 .ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar-track {
-  background: var(--IDS-SCROLL_TRACK-COLOR);
-  border-radius: 10px;
-  margin-top: 0;
+  background: var(--IDS-COLOR-NEUTRAL-99);
+  border-radius: 0.625rem;
   margin-bottom: 0;
 }
-.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-resizer {
-  appearance: none;
-  background-image: var(--IDS-TEXTAREA-RESIZER-IMAGE);
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
-}
-.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar-corner {
-  background-color: transparent;
-}
 .ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar-thumb {
   cursor: auto;
-  background: var(--IDS-SCROLL_COLOR);
-  border-radius: 10px;
+  background: var(--IDS-SCROLL__COLOR);
+  border-radius: 0.625rem;
   box-sizing: border-box;
-  border: 3px solid var(--IDS-SCROLL_TRACK-COLOR);
+  border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-99);
 }
 .ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar-thumb:hover {
-  background: var(--IDS-SCROLL_HOVER-COLOR);
+  background: var(--IDS-SCROLL__HOVER-COLOR);
+}
+.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar-corner {
+  background-color: transparent;
 }
 
 :host([disabled]) input {
@@ -151,16 +160,16 @@
 .ids-select-multiple-label-wrapper {
   display: inline-flex;
   align-items: flex-start;
-  gap: 8px;
-  margin-bottom: 5px;
-  margin-right: 8px;
+  gap: 0.5rem;
+  margin-bottom: 0.313rem;
+  margin-right: 0.5rem;
 }
 .ids-select-multiple-label-wrapper .ids-label-tooltip-wrapper label {
   display: inline;
-  top: -3px;
+  top: -0.188rem;
   position: relative;
-  margin-right: 8px;
+  margin-right: 0.5rem;
 }
 .ids-select-multiple-label-wrapper .ids-label-tooltip-wrapper label {
-  margin-right: 4px;
+  margin-right: 0.25rem;
 }

package/dist/components/form/spinner/spinner-lit.js

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = ".ids-spinner,.ids-spinner--light{height:1.25rem;text-align:center;white-space:nowrap;width:4.375rem}.ids-spinner div,.ids-spinner--light div{-webkit-animation:sk-bouncedelay 1.4s ease-in-out infinite both;animation:sk-bouncedelay 1.4s ease-in-out infinite both;background-color:var(--IDS-SPINNER__COLOR);border-radius:100%;display:inline-block;height:1.125rem;width:1.125rem}.ids-spinner .ids-bounce-1,.ids-spinner--light .ids-bounce-1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.ids-spinner .ids-bounce-2,.ids-spinner--light .ids-bounce-2{-webkit-animation-delay:-.16s;animation-delay:-.16s}.ids-spinner--light div{background-color:var(--IDS-COLOR-NEUTRAL-100)}.ids-spinner-sr{border:0;height:.063rem;margin:-.063rem;overflow:hidden;padding:0;position:absolute;width:.063rem}@-webkit-keyframes sk-bouncedelay{0%,80%,to{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes sk-bouncedelay{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}";
+
+var spinnerLit = css`${unsafeCSS(css_248z)}`;
+
+export { spinnerLit as default };

package/{components → dist/components}/form/spinner/spinner.css

@@ -1,14 +1,15 @@
 /* https://tobiasahlin.com/spinkit/ */
 .ids-spinner,
 .ids-spinner--light {
-  width: 70px;
-  height: 20px;
+  width: 4.375rem;
+  height: 1.25rem;
   text-align: center;
+  white-space: nowrap;
 }
 .ids-spinner div,
 .ids-spinner--light div {
-  width: 18px;
-  height: 18px;
+  width: 1.125rem;
+  height: 1.125rem;
   background-color: var(--IDS-SPINNER__COLOR);
   border-radius: 100%;
   display: inline-block;
@@ -27,15 +28,15 @@
 }
 
 .ids-spinner--light div {
-  background-color: white;
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
 }
 
 .ids-spinner-sr {
   position: absolute;
   overflow: hidden;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
+  width: 0.063rem;
+  height: 0.063rem;
+  margin: -0.063rem;
   padding: 0;
   border: 0;
 }

package/dist/components/grid/column/column-lit.js

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-col,:host{display:block;flex-basis:0;flex-grow:1;max-width:100%}.ids-col-auto,:host([cols=auto]){flex:0 0 auto;width:auto}.ids-col-1,:host([cols=\"1\"]){flex:0 0 8.3%;max-width:8.3%}.ids-col-2,:host([cols=\"2\"]){flex:0 0 16%;max-width:16%}.ids-col-3,:host([cols=\"3\"]){flex:0 0 25%;max-width:25%}.ids-col-4,:host([cols=\"4\"]){flex:0 0 33.3%;max-width:33.3%}.ids-col-5,:host([cols=\"5\"]){flex:0 0 41.6%;max-width:41.6%}.ids-col-6,:host([cols=\"6\"]){flex:0 0 50%;max-width:50%}.ids-col-7,:host([cols=\"7\"]){flex:0 0 58%;max-width:58.3%}.ids-col-8,:host([cols=\"8\"]){flex:0 0 66.6%;max-width:66.6%}.ids-col-9,:host([cols=\"9\"]){flex:0 0 75%;max-width:75%}.ids-col-10,:host([cols=\"10\"]){flex:0 0 83.3%;max-width:83.3%}.ids-col-11,:host([cols=\"11\"]){flex:0 0 91.6%;max-width:91.6%}.ids-col-12,:host([cols=\"12\"]){flex:0 0 100%;max-width:100%}.ids-col-offset-none,:host([offset=none]){margin-left:0}.ids-col .offset-1,:host([offset=\"1\"]){margin-left:8.3%}.ids-col .offset-2,:host([offset=\"2\"]){margin-left:16%}.ids-col .offset-3,:host([offset=\"3\"]){margin-left:25%}.ids-col .offset-4,:host([offset=\"4\"]){margin-left:33.3%}.ids-col .offset-5,:host([offset=\"5\"]){margin-left:41.6%}.ids-col .offset-6,:host([offset=\"6\"]){margin-left:50%}.ids-col .offset-7,:host([offset=\"7\"]){margin-left:58.3%}.ids-col .offset-8,:host([offset=\"8\"]){margin-left:66.6%}.ids-col .offset-9,:host([offset=\"9\"]){margin-left:75%}.ids-col .offset-10,:host([offset=\"10\"]){margin-left:83.3%}.ids-col .offset-11,:host([offset=\"11\"]){margin-left:91.6%}.ids-col .offset-12,:host([offset=\"12\"]){margin-left:100%}.ids-col .align-start,:host([alignself=start]){align-self:start}.ids-col .align-center,:host([alignself=center]){align-self:center}.ids-col .align-end,:host([alignself=end]){align-self:end}.ids-col .align-auto,:host([alignself=auto]){align-self:auto}.ids-col .align-baseline,:host([alignself=baseline]){align-self:baseline}.ids-col .align-stretch,:host([alignself=stretch]){align-self:stretch}@media only screen and (max-width:1024px){.ids-col .m-auto,:host([m=auto]){flex:0 0 auto;width:auto}.ids-col .m-1,:host([m=\"1\"]){flex:0 0 8.3%;max-width:8.3%}.ids-col .m-2,:host([m=\"2\"]){flex:0 0 16%;max-width:16%}.ids-col .m-3,:host([m=\"3\"]){flex:0 0 25%;max-width:25%}.ids-col .m-4,:host([m=\"4\"]){flex:0 0 33.3%;max-width:33.3%}.ids-col .m-5,:host([m=\"5\"]){flex:0 0 41.6%;max-width:41.6%}.ids-col .m-6,:host([m=\"6\"]){flex:0 0 50%;max-width:50%}.ids-col .m-7,:host([m=\"7\"]){flex:0 0 58%;max-width:58.3%}.ids-col .m-8,:host([m=\"8\"]){flex:0 0 66.6%;max-width:66.6%}.ids-col .m-9,:host([m=\"9\"]){flex:0 0 75%;max-width:75%}.ids-col .m-10,:host([m=\"10\"]){flex:0 0 83.3%;max-width:83.3%}.ids-col .m-11,:host([m=\"11\"]){flex:0 0 91.6%;max-width:91.6%}.ids-col .m-12,:host([m=\"12\"]){flex:0 0 100%;max-width:100%}.ids-col .m-offset-none,:host([moffset=none]){margin-left:0}.ids-col .m-offset-1,:host([moffset=\"1\"]){margin-left:8.3%}.ids-col .m-offset-2,:host([moffset=\"2\"]){margin-left:16%}.ids-col .m-offset-3,:host([moffset=\"3\"]){margin-left:25%}.ids-col .m-offset-4,:host([moffset=\"4\"]){margin-left:33.3%}.ids-col .m-offset-5,:host([moffset=\"5\"]){margin-left:41.6%}.ids-col .m-offset-6,:host([moffset=\"6\"]){margin-left:50%}.ids-col .m-offset-7,:host([moffset=\"7\"]){margin-left:58.3%}.ids-col .m-offset-8,:host([moffset=\"8\"]){margin-left:66.6%}.ids-col .m-offset-9,:host([moffset=\"9\"]){margin-left:75%}.ids-col .m-offset-10,:host([moffset=\"10\"]){margin-left:83.3%}.ids-col .m-offset-11,:host([moffset=\"11\"]){margin-left:91.6%}.ids-col .m-offset-12,:host([moffset=\"12\"]){margin-left:100%}}@media only screen and (max-width:640px){.ids-col .s-auto,:host([s=auto]){flex:0 0 auto;width:auto}.ids-col .s-1,:host([s=\"1\"]){flex:0 0 8.3%;max-width:8.3%}.ids-col .s-2,:host([s=\"2\"]){flex:0 0 16%;max-width:16%}.ids-col .s-3,:host([s=\"3\"]){flex:0 0 25%;max-width:25%}.ids-col .s-4,:host([s=\"4\"]){flex:0 0 33.3%;max-width:33.3%}.ids-col .s-5,:host([s=\"5\"]){flex:0 0 41.6%;max-width:41.6%}.ids-col .s-6,:host([s=\"6\"]){flex:0 0 50%;max-width:50%}.ids-col .s-7,:host([s=\"7\"]){flex:0 0 58%;max-width:58.3%}.ids-col .s-8,:host([s=\"8\"]){flex:0 0 66.6%;max-width:66.6%}.ids-col .s-9,:host([s=\"9\"]){flex:0 0 75%;max-width:75%}.ids-col .s-10,:host([s=\"10\"]){flex:0 0 83.3%;max-width:83.3%}.ids-col .s-11,:host([s=\"11\"]){flex:0 0 91.6%;max-width:91.6%}.ids-col .s-12,:host([s=\"12\"]){flex:0 0 100%;max-width:100%}.ids-col .s-offset-none,:host([soffset=none]){margin-left:0}.ids-col .s-offset-1,:host([soffset=\"1\"]){margin-left:8.3%}.ids-col .s-offset-2,:host([soffset=\"2\"]){margin-left:16%}.ids-col .s-offset-3,:host([soffset=\"3\"]){margin-left:25%}.ids-col .s-offset-4,:host([soffset=\"4\"]){margin-left:33.3%}.ids-col .s-offset-5,:host([soffset=\"5\"]){margin-left:41.6%}.ids-col .s-offset-6,:host([soffset=\"6\"]){margin-left:50%}.ids-col .s-offset-7,:host([soffset=\"7\"]){margin-left:58.3%}.ids-col .s-offset-8,:host([soffset=\"8\"]){margin-left:66.6%}.ids-col .s-offset-9,:host([soffset=\"9\"]){margin-left:75%}.ids-col .s-offset-10,:host([soffset=\"10\"]){margin-left:83.3%}.ids-col .s-offset-11,:host([soffset=\"11\"]){margin-left:91.6%}.ids-col .s-offset-12,:host([soffset=\"12\"]){margin-left:100%}}";
+
+var columnLit = css`${unsafeCSS(css_248z)}`;
+
+export { columnLit as default };

package/{components → dist/components}/grid/column/column.css

@@ -1,3 +1,15 @@
+@media (max-width: 1023px) {
+  .ids-desktop {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ids-mobile {
+    display: none !important;
+  }
+}
+
 :host,
 .ids-col {
   display: block;