nve-designsystem 1.7.0 → 1.9.0

package/components/nve-alert/nve-alert.component.d.ts

@@ -7,8 +7,10 @@ import { PropertyValues } from 'lit';
  */
 export default class NveAlert extends SlAlert {
     constructor();
-    /** Tykk tekst, vises helt til venstre */
-    title: string;
+    /**
+     * Tykk tekst, vises helt til venstre
+     */
+    label: string;
     /** Tynnere beskrivelse tekst */
     text: string;
     /** Bestemmer sterkere bakgrunnsfarge */

package/components/nve-alert/nve-alert.component.js

@@ -5,49 +5,49 @@ import "../../chunks/chunk.YHLNUJ7P.js";
 import "../../chunks/chunk.4TUIT776.js";
 import h from "./nve-alert.styles.js";
 import { n, t as u } from "../../chunks/property.js";
-var y = Object.defineProperty, m = Object.getOwnPropertyDescriptor, p = (o, r, i, a) => {
-  for (var t = a > 1 ? void 0 : a ? m(r, i) : r, e = o.length - 1, s; e >= 0; e--)
-    (s = o[e]) && (t = (a ? s(r, i, t) : s(t)) || t);
-  return a && t && y(r, i, t), t;
+var y = Object.defineProperty, m = Object.getOwnPropertyDescriptor, i = (o, l, a, p) => {
+  for (var t = p > 1 ? void 0 : p ? m(l, a) : l, e = o.length - 1, s; e >= 0; e--)
+    (s = o[e]) && (t = (p ? s(l, a, t) : s(t)) || t);
+  return p && t && y(l, a, t), t;
 };
-let l = class extends f {
+let r = class extends f {
   constructor() {
-    super(), this.title = "", this.text = "", this.saturation = null, this.leftStroke = !1;
+    super(), this.label = "", this.text = "", this.saturation = null, this.leftStroke = !1;
   }
   updated(o) {
-    var r, i;
-    if (super.updated(o), o.has("title") && this.style.setProperty("--nve-alert-title", `"${this.title}"`), o.has("text")) {
-      const a = ((r = this.base.querySelector(".alert__message slot")) == null ? void 0 : r.assignedNodes().map((e) => {
+    var l, a;
+    if (super.updated(o), o.has("label") && this.style.setProperty("--nve-alert-label", `"${this.label}"`), o.has("text")) {
+      const p = ((l = this.base.querySelector(".alert__message slot")) == null ? void 0 : l.assignedNodes().map((e) => {
         var s;
         return (s = e.textContent) == null ? void 0 : s.trim();
       }).filter((e) => {
         var s;
         return ((s = e ?? "") == null ? void 0 : s.length) > 0;
-      }).length) > 0, t = ((i = this.base.querySelector(".alert__message slot")) == null ? void 0 : i.assignedNodes().filter((e) => e.childNodes.length > 0).length) > 0;
-      a || t ? this.style.setProperty("--nve-alert-text", '""') : this.style.setProperty("--nve-alert-text", `"${this.text}"`);
+      }).length) > 0, t = ((a = this.base.querySelector(".alert__message slot")) == null ? void 0 : a.assignedNodes().filter((e) => e.childNodes.length > 0).length) > 0;
+      p || t ? this.style.setProperty("--nve-alert-text", '""') : this.style.setProperty("--nve-alert-text", `"${this.text}"`);
     }
   }
 };
-l.styles = [
+r.styles = [
   f.styles,
   // we have to have this otherwise closable is not working
   h
 ];
-p([
+i([
   n({ reflect: !0 })
-], l.prototype, "title", 2);
-p([
+], r.prototype, "label", 2);
+i([
   n({ reflect: !0 })
-], l.prototype, "text", 2);
-p([
+], r.prototype, "text", 2);
+i([
   n({ type: String, reflect: !1 })
-], l.prototype, "saturation", 2);
-p([
+], r.prototype, "saturation", 2);
+i([
   n({ type: Boolean, reflect: !0 })
-], l.prototype, "leftStroke", 2);
-l = p([
+], r.prototype, "leftStroke", 2);
+r = i([
   u("nve-alert")
-], l);
+], r);
 export {
-  l as default
+  r as default
 };

package/components/nve-alert/nve-alert.styles.js

@@ -52,7 +52,7 @@ const e = r`
   }
 
   .alert__message::before {
-    content: var(--nve-alert-title);
+    content: var(--nve-alert-label);
     font: var(--label-large);
     white-space: nowrap;
   }

package/components/nve-link-card/nve-link-card.component.d.ts

@@ -5,7 +5,7 @@ import { INveComponent } from '../../interfaces/NveComponent.interface';
  */
 export default class NveLinkCard extends LitElement implements INveComponent {
     /** Tittel som vises øverst på kortet */
-    title: string;
+    label: string;
     /** Tilleggsbeskrivelse som vises under tittelen */
     additionalText?: string;
     /** Størrelse på kortet, kan være 'small', 'medium' eller 'large' */

package/components/nve-link-card/nve-link-card.component.js

@@ -1,17 +1,17 @@
 import { i as h, E as f, x as c } from "../../chunks/lit-element.js";
-import { n as a, t as p } from "../../chunks/property.js";
+import { n as o, t as p } from "../../chunks/property.js";
 import w from "./nve-link-card.styles.js";
 var u = Object.defineProperty, m = Object.getOwnPropertyDescriptor, i = (e, l, n, s) => {
-  for (var r = s > 1 ? void 0 : s ? m(l, n) : l, o = e.length - 1, d; o >= 0; o--)
-    (d = e[o]) && (r = (s ? d(l, n, r) : d(r)) || r);
+  for (var r = s > 1 ? void 0 : s ? m(l, n) : l, a = e.length - 1, d; a >= 0; a--)
+    (d = e[a]) && (r = (s ? d(l, n, r) : d(r)) || r);
   return s && r && u(l, n, r), r;
 };
 let t = class extends h {
   constructor() {
-    super(...arguments), this.title = "", this.size = "medium", this.variant = "primary", this.testId = void 0, this.clickAction = "internal", this.href = void 0, this.downloadHandler = this.defaultDownloadHandler;
+    super(...arguments), this.label = "", this.size = "medium", this.variant = "primary", this.testId = void 0, this.clickAction = "internal", this.href = void 0, this.downloadHandler = this.defaultDownloadHandler;
   }
   /**
-   * Standard nedlastingsfunksjon som brukes hvis downloadHandler ikke er overstyrt. 
+   * Standard nedlastingsfunksjon som brukes hvis downloadHandler ikke er overstyrt.
    * Bruker lenken (href) til å laste ned en fil.
    */
   async defaultDownloadHandler() {
@@ -20,8 +20,8 @@ let t = class extends h {
       try {
         const n = await fetch(e, { mode: "cors" });
         if (!n.ok) throw new Error(`Failed to fetch file: ${n.statusText}`);
-        const s = await n.blob(), r = URL.createObjectURL(s), o = document.createElement("a");
-        o.href = r, o.download = l, document.body.appendChild(o), o.click(), document.body.removeChild(o), URL.revokeObjectURL(r);
+        const s = await n.blob(), r = URL.createObjectURL(s), a = document.createElement("a");
+        a.href = r, a.download = l, document.body.appendChild(a), a.click(), document.body.removeChild(a), URL.revokeObjectURL(r);
       } catch {
       }
     }
@@ -91,9 +91,15 @@ let t = class extends h {
   }
   render() {
     return c`
-    <a part="link-card" class="link-card link-card--${this.size} link-card--${this.variant}" tabindex="0" @click="${this.handleClick}" @keydown="${this.handleKeyDown}">
+      <a
+        part="link-card"
+        class="link-card link-card--${this.size} link-card--${this.variant}"
+        tabindex="0"
+        @click="${this.handleClick}"
+        @keydown="${this.handleKeyDown}"
+      >
         <div class="link-card__content">
-          <div part="title" class="link-card__title">${this.title}</div>
+          <div part="label" class="link-card__label">${this.label}</div>
           ${this.additionalText ? c`<div part="additional-text" class="link-card__additional-text">${this.additionalText}</div>` : f}
         </div>
         <div>
@@ -105,31 +111,31 @@ let t = class extends h {
 };
 t.styles = [w];
 i([
-  a({ reflect: !0 })
-], t.prototype, "title", 2);
+  o({ reflect: !0 })
+], t.prototype, "label", 2);
 i([
-  a({ reflect: !0 })
+  o({ reflect: !0 })
 ], t.prototype, "additionalText", 2);
 i([
-  a({ reflect: !0 })
+  o({ reflect: !0 })
 ], t.prototype, "size", 2);
 i([
-  a({ reflect: !0 })
+  o({ reflect: !0 })
 ], t.prototype, "variant", 2);
 i([
-  a({ reflect: !0 })
+  o({ reflect: !0 })
 ], t.prototype, "testId", 2);
 i([
-  a({ reflect: !0 })
+  o({ reflect: !0 })
 ], t.prototype, "clickAction", 2);
 i([
-  a({ reflect: !0 })
+  o({ reflect: !0 })
 ], t.prototype, "href", 2);
 i([
-  a()
+  o()
 ], t.prototype, "downloadHandler", 2);
 i([
-  a()
+  o()
 ], t.prototype, "customClickHandler", 2);
 t = i([
   p("nve-link-card")

package/components/nve-link-card/nve-link-card.styles.js

@@ -1,5 +1,5 @@
 import { a as r } from "../../chunks/lit-element.js";
-const n = r`
+const e = r`
   .link-card {
     border-radius: var(--borderRadius-large, 6px);
     padding: var(--spacing-medium, 16px) var(--spacing-large, 24px);
@@ -13,15 +13,15 @@ const n = r`
   }
 
   .link-card:focus {
-    outline: var(--interactive-primary-foreground-border-focus, #008FFB) solid 2px;
+    outline: var(--interactive-primary-foreground-border-focus, #008ffb) solid 2px;
   }
 
-  .link-card:hover .link-card__title {
+  .link-card:hover .link-card__label {
     text-decoration: underline;
   }
 
   .link-card:active {
-    outline: var(--interactive-primary-foreground-border-focus, #008FFB) solid 2px;
+    outline: var(--interactive-primary-foreground-border-focus, #008ffb) solid 2px;
   }
 
   .link-card--small {
@@ -37,20 +37,20 @@ const n = r`
     min-height: 70px;
   }
 
-  .link-card__title {
+  .link-card__label {
     font-size: 1rem;
-    color: var(--neutrals-foreground-primary, #0D0D0E);
-    font-family: "Source Sans Pro";
+    color: var(--neutrals-foreground-primary, #0d0d0e);
+    font-family: 'Source Sans Pro';
     font-style: normal;
     font-weight: 400;
     line-height: 150%;
   }
 
-  .link-card__title--small {
+  .link-card__label--small {
     font-size: 0.875rem;
   }
 
-  .link-card__title--large {
+  .link-card__label--large {
     font-size: 1.125rem;
   }
 
@@ -61,8 +61,8 @@ const n = r`
   }
 
   .link-card__additional-text {
-    color: var(--neutrals-foreground-primary, #0D0D0E);
-    font-family: "Source Sans Pro";
+    color: var(--neutrals-foreground-primary, #0d0d0e);
+    font-family: 'Source Sans Pro';
     font-style: normal;
     font-weight: 400;
     line-height: 120%;
@@ -71,30 +71,30 @@ const n = r`
   }
 
   .link-card--primary {
-    background: var(--neutrals-background-primary, #FFF);
+    background: var(--neutrals-background-primary, #fff);
   }
 
   .link-card--primary:hover {
-    background: var(--neutrals-background-secondary, #E4E5E7);  
+    background: var(--neutrals-background-secondary, #e4e5e7);
   }
 
   .link-card--contrast {
-    background: var(--neutrals-background-primary-contrast, #F7F7F8);  
+    background: var(--neutrals-background-primary-contrast, #f7f7f8);
   }
 
   .link-card--contrast:hover {
-    background: var(--neutrals-background-secondary, #E4E5E7);  
+    background: var(--neutrals-background-secondary, #e4e5e7);
   }
 
   .link-card--secondary {
-    background: var(--neutrals-background-secondary, #E4E5E7);  
+    background: var(--neutrals-background-secondary, #e4e5e7);
   }
 
   .link-card--secondary:hover {
     border-radius: var(--borderRadius-large, 6px);
-    border: 2px solid var(--neutrals-foreground-primary, #0D0D0E);
+    border: 2px solid var(--neutrals-foreground-primary, #0d0d0e);
   }
 `;
 export {
-  n as default
+  e as default
 };

package/components/nve-message-card/nve-message-card.component.d.ts

@@ -17,7 +17,7 @@ Brukes som veiledning i skjemaer eller som en informasjon til brukere.
 * @csspart base - hoved komponent kontainer.
 * @csspart header - header seksjonen.
 * @csspart subheader - subheader seksjonen.
-* @csspart title - tittel i header seksjonen.
+* @csspart label - tittel i header seksjonen.
 * @csspart footer - footer seksjonen.
 */
 export default class NveMessageCard extends LitElement implements INveComponent {
@@ -31,7 +31,7 @@ export default class NveMessageCard extends LitElement implements INveComponent
     /** Viser ikonen ved siden i header seksjonen */
     showIcon: 'true' | 'false';
     /** Tittel i header seksjonen */
-    title: string;
+    label: string;
     /** Beskrivelse tekst under tittelen */
     text: string;
     /** Man kan velge ikon i headeren, enten kommer en default en */

package/components/nve-message-card/nve-message-card.component.js

@@ -3,14 +3,14 @@ import { n as r, t as u } from "../../chunks/property.js";
 import { e as h } from "../../chunks/class-map.js";
 import m from "./nve-message-card.styles.js";
 import "../nve-icon/nve-icon.component.js";
-var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, t = (s, a, c, o) => {
-  for (var i = o > 1 ? void 0 : o ? g(a, c) : a, l = s.length - 1, d; l >= 0; l--)
-    (d = s[l]) && (i = (o ? d(a, c, i) : d(i)) || i);
-  return o && i && v(a, c, i), i;
+var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, t = (s, a, l, o) => {
+  for (var i = o > 1 ? void 0 : o ? g(a, l) : a, c = s.length - 1, d; c >= 0; c--)
+    (d = s[c]) && (i = (o ? d(a, l, i) : d(i)) || i);
+  return o && i && v(a, l, i), i;
 };
 let e = class extends p {
   constructor() {
-    super(), this.testId = "", this.saturation = null, this.size = "default", this.closable = !1, this.showIcon = "true", this.title = "", this.text = "", this.iconTitle = "", this.variant = "primary";
+    super(), this.testId = "", this.saturation = null, this.size = "default", this.closable = !1, this.showIcon = "true", this.label = "", this.text = "", this.iconTitle = "", this.variant = "primary";
   }
   handleClose() {
     var a;
@@ -60,9 +60,9 @@ let e = class extends p {
         <div class="message-card__header-container">
           <div part="header" class="message-card__header">
             <slot part="subheader" name="subheader" class="message-card__subheader"></slot>
-            <div part="title" class="message-card__header-title">
+            <div part="label" class="message-card__header-label">
               ${this.showIcon === "true" ? n`<nve-icon name=${this.determineIcon()}></nve-icon>` : null}
-              ${this.title ? n`<span>${this.title}</span>` : null}
+              ${this.label ? n`<span>${this.label}</span>` : null}
             </div>
           </div>
           ${this.closable ? n`<button type="button" class="message-card__close-btn" @click=${this.handleClose}>
@@ -93,7 +93,7 @@ t([
 ], e.prototype, "showIcon", 2);
 t([
   r({ reflect: !0 })
-], e.prototype, "title", 2);
+], e.prototype, "label", 2);
 t([
   r({ reflect: !0 })
 ], e.prototype, "text", 2);

package/components/nve-message-card/nve-message-card.styles.js

@@ -35,7 +35,7 @@ const r = e`
   }
 
   /* tittelen blir kuttet hvis for langt i utgangspunktet */
-  .message-card__header-title {
+  .message-card__header-label {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -76,7 +76,7 @@ const r = e`
 
   nve-icon::part(icon) {
     display: unset;
-    font-size: 22px
+    font-size: 22px;
   }
 
   /** Varianter */
@@ -167,13 +167,11 @@ const r = e`
     gap: var(--spacing-x-small);
   }
 
-
-
-  :host([size='compact']) .message-card__header-title {
+  :host([size='compact']) .message-card__header-label {
     font: var(--label-medium);
   }
 
-  :host([size='simple']) .message-card__header-title {
+  :host([size='simple']) .message-card__header-label {
     font: var(--label-medium-light);
   }
 

package/components/nve-stepper/nve-step/nve-step.component.d.ts

@@ -9,7 +9,7 @@ export declare enum StepState {
 }
 /** Interface for å definere egenskapene til et steg */
 export interface StepProps {
-    title: string;
+    label: string;
     description?: string;
     state: StepState;
     isSelected: boolean;
@@ -21,7 +21,7 @@ export interface StepProps {
 /** Komponent for et enkelt steg i en stepper */
 export default class NveStep extends LitElement {
     /** Tittel på steget */
-    title: string;
+    label: string;
     /** Indeks for steget */
     index: number;
     /** Beskrivelse av steget */
@@ -57,7 +57,7 @@ export default class NveStep extends LitElement {
     private iconForState;
     private getStateText;
     private getStateColorClass;
-    private getTitleClass;
+    private getLabelClass;
     private getIconClass;
     private getDividerColorClass;
     private renderDivider;

package/components/nve-stepper/nve-step/nve-step.component.js

@@ -1,15 +1,15 @@
-import { i as h, x as c } from "../../../chunks/lit-element.js";
+import { i as h, x as l } from "../../../chunks/lit-element.js";
 import { n as r, t as p } from "../../../chunks/property.js";
 import { e as v } from "../../../chunks/query.js";
 import u from "./nve-step.styles.js";
-var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (t, i, n, o) => {
-  for (var a = o > 1 ? void 0 : o ? y(i, n) : i, l = t.length - 1, d; l >= 0; l--)
-    (d = t[l]) && (a = (o ? d(i, n, a) : d(a)) || a);
-  return o && a && f(i, n, a), a;
+var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (t, i, n, a) => {
+  for (var o = a > 1 ? void 0 : a ? y(i, n) : i, c = t.length - 1, d; c >= 0; c--)
+    (d = t[c]) && (o = (a ? d(i, n, o) : d(o)) || o);
+  return a && o && f(i, n, o), o;
 }, g = /* @__PURE__ */ ((t) => (t[t.NotStarted = 0] = "NotStarted", t[t.Started = 1] = "Started", t[t.Active = 2] = "Active", t[t.Done = 3] = "Done", t[t.Error = 4] = "Error", t))(g || {});
 let e = class extends h {
   constructor() {
-    super(...arguments), this.title = "", this.index = 0, this.state = 0, this.selectedStepIndex = 0, this.isSelected = !1, this.isLast = !1, this.entranceAllowed = !1, this.orientation = "horizontal", this.hideStateText = !1, this.hideDescriptions = !1;
+    super(...arguments), this.label = "", this.index = 0, this.state = 0, this.selectedStepIndex = 0, this.isSelected = !1, this.isLast = !1, this.entranceAllowed = !1, this.orientation = "horizontal", this.hideStateText = !1, this.hideDescriptions = !1;
   }
   /** Metode som kjøres første gang komponenten er lagt til i DOM */
   firstUpdated() {
@@ -76,7 +76,7 @@ let e = class extends h {
         return "state-not-started-color";
     }
   }
-  getTitleClass(t) {
+  getLabelClass(t) {
     switch (t) {
       case 0:
         return "state-not-started-color";
@@ -103,15 +103,18 @@ let e = class extends h {
   }
   renderDivider() {
     const t = this.isOrientationVertical() ? "divider-vertical" : "divider-horizontal";
-    return this.isLast ? "" : c`
-          <div class="vertical-divider-container">
-          <div
-          class="${t} ${this.getDividerColorClass()}"
-        ></div>
+    return this.isLast ? "" : l` <div class="vertical-divider-container">
+          <div class="${t} ${this.getDividerColorClass()}"></div>
         </div>`;
   }
   renderDescription() {
-    return this.isDescriptionValid(this.description) ? c`<div class="step-description ${this.orientation === "vertical" ? "step-description-max-width-vertical" : "step-description-max-width-horizontal"}">${this.description}</div>` : c`<div class="step-description empty-description ${this.orientation === "vertical" ? "step-description-max-width-vertical" : "step-description-max-width-horizontal"}"></div>`;
+    return this.isDescriptionValid(this.description) ? l`<div
+      class="step-description ${this.orientation === "vertical" ? "step-description-max-width-vertical" : "step-description-max-width-horizontal"}"
+    >
+      ${this.description}
+    </div>` : l`<div
+        class="step-description empty-description ${this.orientation === "vertical" ? "step-description-max-width-vertical" : "step-description-max-width-horizontal"}"
+      ></div>`;
   }
   isDescriptionValid(t) {
     return !!t && (t == null ? void 0 : t.trim().length) > 0;
@@ -120,56 +123,52 @@ let e = class extends h {
   updateVerticalDividerHeight() {
     let n = 34;
     this.descriptionElement && (n = this.descriptionElement.offsetHeight + 24);
-    const o = this.shadowRoot.querySelector(".vertical-divider-container .divider-vertical");
-    o && (o.style.height = `${n}px`);
+    const a = this.shadowRoot.querySelector(
+      ".vertical-divider-container .divider-vertical"
+    );
+    a && (a.style.height = `${n}px`);
   }
   renderVerticalStep() {
-    return c`
+    return l`
       <div class="vertical-container">
         <div class="step-figure-vertical">
-          <div
-            class=" ${this.getIconClass(this.state)}"
-          >
+          <div class=" ${this.getIconClass(this.state)}">
             <nve-icon slot="suffix" name="${this.iconForState(this.state)}"></nve-icon>
           </div>
           ${this.renderDivider()}
         </div>
         <div class="text-container-vertical">
-          <div class="step-title step-title-vertical ${this.getTitleClass(this.state)}">${this.title}</div>
+          <div class="step-label step-label-vertical ${this.getLabelClass(this.state)}">${this.label}</div>
           <div class="step-state ${this.getStateColorClass(this.state)}">
             ${this.hideStateText ? "" : this.getStateText(this.state)}
           </div>
-          <div>       
-            ${this.hideDescriptions ? "" : this.renderDescription()}
-          </div>
+          <div>${this.hideDescriptions ? "" : this.renderDescription()}</div>
         </div>
       </div>
     `;
   }
   render() {
-    return this.isOrientationVertical() ? this.renderVerticalStep() : c`
-        <div class="step-figure">
-          <span
-            class=" ${this.getIconClass(this.state)}"
-          >
-            <nve-icon  slot="suffix" name="${this.iconForState(this.state)}"></nve-icon>
-          </span>
-          ${this.renderDivider()}
-        </div>
-        <div class="${this.isLast ? "" : "text-container"}">
-          <div class="step-title ${this.getTitleClass(this.state)}">${this.title}</div>
-          <div class="step-state ${this.getStateColorClass(this.state)}">
-            ${this.hideStateText ? "" : this.getStateText(this.state)}
-          </div>       
+    return this.isOrientationVertical() ? this.renderVerticalStep() : l`
+          <div class="step-figure">
+            <span class=" ${this.getIconClass(this.state)}">
+              <nve-icon slot="suffix" name="${this.iconForState(this.state)}"></nve-icon>
+            </span>
+            ${this.renderDivider()}
+          </div>
+          <div class="${this.isLast ? "" : "text-container"}">
+            <div class="step-label ${this.getLabelClass(this.state)}">${this.label}</div>
+            <div class="step-state ${this.getStateColorClass(this.state)}">
+              ${this.hideStateText ? "" : this.getStateText(this.state)}
+            </div>
             ${this.hideDescriptions ? "" : this.renderDescription()}
-        </div>
-    `;
+          </div>
+        `;
   }
 };
 e.styles = [u];
 s([
   r({ reflect: !0 })
-], e.prototype, "title", 2);
+], e.prototype, "label", 2);
 s([
   r({ type: Number })
 ], e.prototype, "index", 2);

package/components/nve-stepper/nve-step/nve-step.styles.js

@@ -43,7 +43,7 @@ const r = e`
     width: 100%;
   }
 
-  .step-title {
+  .step-label {
     color: var(--neutrals-foreground-primary, #0d0d0e);
 
     /* Label/medium */
@@ -167,7 +167,7 @@ const r = e`
     flex: 10;
   }
 
-  .step-title-vertical {
+  .step-label-vertical {
     padding-top: 0;
     align-self: flex-start;
   }