@inera/ids-design 5.4.1 → 5.5.0

package/components/grid/column/column.css

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

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

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

package/components/grid/container/container-lit.js

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = ".ids-container,:host(.ids-container){display:grid;margin-left:auto;margin-right:auto;max-width:var(--IDS__MAX-WIDTH);padding-left:1.25rem;padding-right:1.25rem}.ids-container.ids-container--gutterless,:host(.ids-container.ids-container--gutterless){padding-left:0!important;padding-right:0!important}.ids-container.ids-container--fluid,:host(.ids-container.ids-container--fluid){max-width:100%}";
+
+var containerLit = css`${unsafeCSS(css_248z)}`;
+
+export { containerLit as default };

package/components/grid/container/container.css

@@ -0,0 +1,20 @@
+.ids-container,
+:host(.ids-container) {
+  max-width: var(--IDS__MAX-WIDTH);
+  display: grid;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+.ids-container.ids-container--gutterless,
+:host(.ids-container.ids-container--gutterless) {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+.ids-container.ids-container--fluid,
+:host(.ids-container.ids-container--fluid) {
+  max-width: 100%;
+}

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

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

package/components/grid/row/row-lit.js

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = ".ids-row,:host(.ids-row){box-sizing:border-box;display:flex;flex:1 1 auto;flex-wrap:wrap}.ids-row.ids-row--align-start,:host(.ids-row--align-start){align-items:start}.ids-row.ids-row--align-center,:host(.ids-row--align-center){align-items:center}.ids-row.ids-row--align-end,:host(.ids-row--align-end){align-items:end}.ids-row.ids-row--align-baseline,:host(.ids-row--align-baseline){align-items:baseline}.ids-row.ids-row--align-stretch,:host(.ids-row--align-stretch){align-items:stretch}.ids-row.ids-row--justify-start,:host(.ids-row--justify-start){justify-content:flex-start}.ids-row.ids-row--justify-center,:host(.ids-row--justify-center){justify-content:center}.ids-row.ids-row--justify-end,:host(.ids-row--justify-end){justify-content:end}.ids-row.ids-row--justify-space-between,:host(.ids-row--justify-space-between){justify-content:space-between}.ids-row.ids-row--justify-space-around,:host(.ids-row--justify-space-around){justify-content:space-around}";
+
+var rowLit = css`${unsafeCSS(css_248z)}`;
+
+export { rowLit as default };