@sb1/ffe-core 29.1.4 → 29.3.0

package/README.md

@@ -14,9 +14,9 @@ npm install --save-dev less less-plugin-npm-import    # less-plugin is optional,
 
 Full documentation on usage is available at:
 
-https://design.sparebank1.no/komponenter/typografi/
-https://design.sparebank1.no/profil/farger/
-https://design.sparebank1.no/profil/spacing/
+* https://design.sparebank1.no/komponenter/typografi/
+* https://design.sparebank1.no/profil/farger/
+* https://design.sparebank1.no/profil/spacing/
 
 ```less
 /* Your project's main .less import file */
@@ -44,6 +44,14 @@ parts you require if you want:
 @import '~@sb1/ffe-core/less/accessibility';
 ```
 
+### Importing compiled CSS
+
+If your project does not use Less, you can import the compiled styling:
+
+```css
+@import '~@sb1/ffe-core/css/ffe.css';
+```
+
 ## Theming with CSS custom properties
 
 Theming of components is supported through a set of custom properties, defined in a `less/theme.less` file in every styling package. The properties in `ffe-core` constitute a base theme, which is in turn used as default values in other packages. You may override the properties in each individual package in order to customize a single component, or override the properties defined in `ffe-core` to customize a sitewide theme.

package/css/ffe.css

@@ -0,0 +1,1022 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html,
+:host {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%;
+       -moz-text-size-adjust: 100%;
+        -ms-text-size-adjust: 100%;
+            text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+    margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+    display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+    -webkit-box-sizing: content-box;
+            box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+    font-family: monospace; /* 1 */
+    font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+    background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    -webkit-text-decoration: underline dotted;
+            text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+    font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+    font-family: monospace; /* 1 */
+    font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+sup {
+    top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+    border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input {
+    /* 1 */
+    overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select {
+    /* 1 */
+    text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+    -webkit-appearance: button;
+       -moz-appearance: button;
+            appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+    outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+    padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+    vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+    overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type='checkbox'],
+[type='radio'] {
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+    height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type='search'] {
+    -webkit-appearance: textfield;
+       -moz-appearance: textfield;
+            appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type='search']::-webkit-search-decoration {
+    -webkit-appearance: none;
+            appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+    -webkit-appearance: button;
+            appearance: button; /* 1 */
+    font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+    display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+    display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+    display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+    display: none;
+}
+
+/* GAB: Use border-box: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
+html,
+:host {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  font-size: 100%;
+  /* 16 px base in most browsers */
+}
+*,
+*::before,
+*::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+}
+/* stylelint-disable */
+@supports (font: -apple-system-body) {
+  :root:has(.native),
+  :host:has(.native) {
+    /* must be DIRECTLY applied to the html element */
+    font: -apple-system-body;
+  }
+}
+/**
+ * These variables are intended to support theming of components. Override any value to create your own look and feel.
+ */
+:root,
+:host {
+  /** Primærpalett */
+  --ffe-farge-fjell: #002776;
+  --ffe-farge-fjell-70: #4d689f;
+  --ffe-farge-fjell-30: #b3bed6;
+  --ffe-farge-vann: #005aa4;
+  --ffe-farge-vann-70: #4d8cbf;
+  --ffe-farge-vann-30: #b3cee4;
+  --ffe-farge-sand: #f8e9dd;
+  --ffe-farge-sand-70: #faf0e7;
+  --ffe-farge-sand-30: #fdf8f5;
+  --ffe-farge-frost: #7eb5d2;
+  --ffe-farge-frost-70: #a5cbe0;
+  --ffe-farge-frost-30: #d8e9f2;
+  --ffe-farge-syrin: #d3d3ea;
+  --ffe-farge-syrin-70: #e0e0f0;
+  --ffe-farge-syrin-30: #f2f2f9;
+  /** Støttefarger */
+  --ffe-farge-myrull: #fae4e0;
+  --ffe-farge-myrull-70: #fcece9;
+  --ffe-farge-myrull-30: #fef7f6;
+  --ffe-farge-villblomst: #ee8d9c;
+  --ffe-farge-villblomst-70: #f3afba;
+  --ffe-farge-villblomst-30: #fadde1;
+  --ffe-farge-nordlys: #33af85;
+  --ffe-farge-nordlys-70: #70c7aa;
+  --ffe-farge-nordlys-30: #c2e7da;
+  --ffe-farge-lyng: #873953;
+  --ffe-farge-lyng-70: #ab7487;
+  --ffe-farge-lyng-30: #dbc4cb;
+  --ffe-farge-baer: #db3335;
+  --ffe-farge-baer-70: #e67072;
+  --ffe-farge-baer-30: #f4c2c2;
+  --ffe-farge-skog: #00754e;
+  --ffe-farge-skog-70: #4d9e83;
+  --ffe-farge-skog-30: #b3d6ca;
+  --ffe-farge-multe: #f8b181;
+  --ffe-farge-multe-70: #fac8a7;
+  --ffe-farge-multe-30: #fde8d9;
+  --ffe-farge-sol: #dc8000;
+  --ffe-farge-sol-70: #e7a64d;
+  --ffe-farge-sol-30: #f5d9b3;
+  /** Nøytrale farger */
+  --ffe-farge-natt: #001032;
+  --ffe-farge-svart: #020a0a;
+  --ffe-farge-koksgraa: #323232;
+  --ffe-farge-moerkgraa: #676767;
+  --ffe-farge-graa: #adadad;
+  --ffe-farge-lysgraa: #d8d8d8;
+  --ffe-farge-moerkvarmgraa: #848383;
+  --ffe-farge-varmgraa: #9b9797;
+  --ffe-farge-lysvarmgraa: #d7d2cb;
+  --ffe-farge-hvit: #fff;
+  /** Font sizes */
+  --ffe-fontsize-body-text: 1rem;
+  --ffe-fontsize-small-text: 0.875rem;
+  --ffe-fontsize-micro-text: 0.75rem;
+  --ffe-fontsize-lead-paragraph: 1.125rem;
+  --ffe-fontsize-sub-lead-paragraph: 1.063rem;
+  --ffe-fontsize-h1: 1.75rem;
+  --ffe-fontsize-h2: 1.5rem;
+  --ffe-fontsize-h3: 1.25rem;
+  --ffe-fontsize-h4: 1.125rem;
+  --ffe-fontsize-h5: 1.0625rem;
+  --ffe-fontsize-h6: 1rem;
+  --ffe-fontsize-form-input: 1rem;
+  --ffe-fontsize-form-dropdown: 1rem;
+  --ffe-fontsize-button: 1rem;
+  /** Breakpoints */
+  --breakpoint-sm: 480px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  /** Dimensions */
+  --app-width: 1280px;
+  --app-width-min: 320px;
+  --app-margin: 20px;
+  /** Motion */
+  --ffe-ease-in-out-back: cubic-bezier(0.46, -0.265, 0.48, 1.38);
+  --ffe-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --ffe-transition-duration: 0.2s;
+  /** Spacing */
+  --ffe-spacing: 8px;
+  --ffe-spacing-2xs: 4px;
+  --ffe-spacing-xs: 8px;
+  --ffe-spacing-sm: 16px;
+  --ffe-spacing-md: 24px;
+  --ffe-spacing-lg: 32px;
+  --ffe-spacing-xl: 40px;
+  --ffe-spacing-2xl: 48px;
+  --ffe-spacing-3xl: 64px;
+  --ffe-spacing-4xl: 80px;
+  --ffe-spacing-5xl: 160px;
+  /** Theme base colors */
+  /* Links, buttons and similar */
+  --ffe-g-primary-color: var(--ffe-farge-vann);
+  /* Headings, labels, hover, etc */
+  --ffe-g-secondary-color: var(--ffe-farge-fjell);
+  /* Error messages, invalid inputs, etc  */
+  --ffe-g-error-color: var(--ffe-farge-baer);
+  /** Theme borders */
+  /* Form element borders */
+  --ffe-g-border-color: var(--ffe-farge-varmgraa);
+  --ffe-g-border-radius: 8px;
+  --ffe-g-border-width: 1px;
+  --ffe-g-border-width-focus: 2px;
+  /** Fonts */
+  /* Default font */
+  --ffe-g-font: 'SpareBank1-regular', arial, sans-serif;
+  /* h1 - h2 */
+  --ffe-g-font-heading: 'SpareBank1-title-medium', arial, sans-serif;
+  /* h3 - h6 */
+  --ffe-g-font-heading-small: 'SpareBank1-medium', arial, sans-serif;
+  /* Bold text */
+  --ffe-g-font-strong: 'SpareBank1-medium', arial, sans-serif;
+  /* Emphasized text */
+  --ffe-g-font-italic: 'SpareBank1-italic', arial, sans-serif;
+  /** Typography */
+  /* Default body text color */
+  --ffe-g-text-color: var(--ffe-farge-svart);
+  /* Lead paragraph */
+  --ffe-g-lead-color: var(--ffe-farge-fjell);
+  /* Headings */
+  --ffe-g-heading-color: var(--ffe-farge-fjell);
+  /* Links */
+  --ffe-g-link-color: var(--ffe-farge-vann);
+  --ffe-g-link-color-hover: var(--ffe-farge-fjell);
+  --ffe-g-link-color-visited: var(--ffe-farge-lyng);
+  --ffe-g-link-icon-color-hover: var(--ffe-farge-natt);
+  --ffe-g-link-icon-color-focus: var(--ffe-farge-vann);
+}
+@media (min-width: 480px) {
+  :root,
+  :host {
+    --ffe-fontsize-lead-paragraph: 1.5rem;
+    --ffe-fontsize-sub-lead-paragraph: 1.125rem;
+    --ffe-fontsize-h1: 2.5rem;
+    --ffe-fontsize-h2: 2rem;
+    --ffe-fontsize-h3: 1.688rem;
+    --ffe-fontsize-h4: 1.375rem;
+    --ffe-fontsize-h5: 1.125rem;
+  }
+}
+@media (min-width: 1024px) {
+  :root,
+  :host {
+    --ffe-fontsize-h1: 2.875rem;
+    --ffe-fontsize-h2: 2.25rem;
+    --ffe-fontsize-h3: 1.75rem;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  :root .regard-color-scheme-preference,
+  :host .regard-color-scheme-preference {
+    --ffe-g-primary-color: var(--ffe-farge-vann-70);
+    --ffe-g-secondary-color: var(--ffe-farge-vann-70);
+    --ffe-g-border-color: var(--ffe-farge-graa);
+    --ffe-g-text-color: var(--ffe-farge-lysgraa);
+    --ffe-g-lead-color: var(--ffe-farge-vann-70);
+    --ffe-g-heading-color: var(--ffe-farge-vann-70);
+    --ffe-g-link-color: var(--ffe-farge-vann-70);
+    --ffe-g-link-color-hover: var(--ffe-farge-vann-30);
+    --ffe-g-link-color-visited: var(--ffe-farge-lyng-70);
+    --ffe-g-link-icon-color-hover: var(--ffe-farge-vann-30);
+    --ffe-g-link-icon-color-focus: var(--ffe-farge-hvit);
+  }
+}
+.ffe-h1 {
+  line-height: 2.25rem;
+  font-size: var(--ffe-fontsize-h1);
+}
+.ffe-h2 {
+  line-height: 1.75rem;
+  font-size: var(--ffe-fontsize-h2);
+}
+.ffe-h3 {
+  line-height: 1.5rem;
+  font-size: var(--ffe-fontsize-h3);
+}
+.ffe-h4 {
+  line-height: 1.5rem;
+  font-size: var(--ffe-fontsize-h4);
+}
+.ffe-h5 {
+  line-height: 1.25rem;
+  font-size: var(--ffe-fontsize-h5);
+}
+.ffe-h6 {
+  line-height: 1.25rem;
+  font-size: var(--ffe-fontsize-h6);
+}
+.ffe-small-text,
+.ffe-micro-text {
+  color: var(--ffe-g-text-color);
+  font-family: var(--ffe-g-font);
+  font-weight: normal;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.25rem;
+  margin: 0;
+}
+.ffe-small-text {
+  font-size: var(--ffe-fontsize-small-text);
+}
+.ffe-micro-text {
+  font-size: var(--ffe-fontsize-micro-text);
+}
+.ffe-micro-text--strong {
+  font-family: var(--ffe-g-font-strong);
+}
+.ffe-h1,
+.ffe-h2,
+.ffe-h3,
+.ffe-h4,
+.ffe-h5,
+.ffe-h6 {
+  color: var(--ffe-g-heading-color);
+  font-weight: normal;
+  margin-bottom: var(--ffe-spacing-xs);
+  margin-top: 0;
+  text-wrap: balance;
+  overflow-wrap: anywhere;
+}
+.ffe-h1--error,
+.ffe-h2--error,
+.ffe-h3--error,
+.ffe-h4--error,
+.ffe-h5--error,
+.ffe-h6--error {
+  color: var(--ffe-g-error-color);
+}
+.ffe-h1--inline,
+.ffe-h2--inline,
+.ffe-h3--inline,
+.ffe-h4--inline,
+.ffe-h5--inline,
+.ffe-h6--inline {
+  display: inline-block;
+}
+.ffe-h1--no-margin,
+.ffe-h2--no-margin,
+.ffe-h3--no-margin,
+.ffe-h4--no-margin,
+.ffe-h5--no-margin,
+.ffe-h6--no-margin {
+  margin: 0;
+}
+.ffe-h1--with-border,
+.ffe-h2--with-border,
+.ffe-h3--with-border,
+.ffe-h4--with-border,
+.ffe-h5--with-border,
+.ffe-h6--with-border {
+  border-bottom: 1px solid var(--ffe-farge-lysgraa);
+  padding-bottom: var(--ffe-spacing-xs);
+}
+@media (prefers-color-scheme: dark) {
+  .regard-color-scheme-preference .ffe-h1--with-border,
+  .regard-color-scheme-preference .ffe-h2--with-border,
+  .regard-color-scheme-preference .ffe-h3--with-border,
+  .regard-color-scheme-preference .ffe-h4--with-border,
+  .regard-color-scheme-preference .ffe-h5--with-border,
+  .regard-color-scheme-preference .ffe-h6--with-border {
+    border-color: var(--ffe-farge-graa);
+  }
+}
+.ffe-h1--no-underline,
+.ffe-h2--no-underline,
+.ffe-h3--no-underline,
+.ffe-h4--no-underline,
+.ffe-h5--no-underline,
+.ffe-h6--no-underline {
+  text-decoration: none;
+}
+.ffe-h1--text-center,
+.ffe-h2--text-center,
+.ffe-h3--text-center,
+.ffe-h4--text-center,
+.ffe-h5--text-center,
+.ffe-h6--text-center {
+  text-align: center;
+}
+.ffe-h1,
+.ffe-h2 {
+  font-family: var(--ffe-g-font-heading);
+}
+.ffe-h3,
+.ffe-h4,
+.ffe-h5,
+.ffe-h6 {
+  font-family: var(--ffe-g-font-heading-small);
+  font-variant-numeric: tabular-nums;
+}
+.ffe-body-text {
+  color: var(--ffe-g-text-color);
+  font-family: var(--ffe-g-font);
+  font-variant-numeric: tabular-nums;
+  line-height: 1.5rem;
+  font-size: var(--ffe-fontsize-body-text);
+}
+.ffe-body-paragraph {
+  font-family: var(--ffe-g-font);
+  font-variant-numeric: tabular-nums;
+  margin-bottom: 1em;
+  margin-top: 0;
+  line-height: 1.5rem;
+  color: var(--ffe-g-text-color);
+  text-wrap: pretty;
+}
+.ffe-body-paragraph--text-center {
+  text-align: center;
+}
+.ffe-body-paragraph--text-left {
+  text-align: left;
+}
+.ffe-body-paragraph--no-margin {
+  margin: 0;
+}
+.ffe-lead-paragraph,
+.ffe-sub-lead-paragraph {
+  font-family: var(--ffe-g-font);
+  font-variant-numeric: tabular-nums;
+  margin-top: 0;
+  margin-bottom: 1em;
+  text-wrap: pretty;
+}
+.ffe-lead-paragraph {
+  color: var(--ffe-g-lead-color);
+  line-height: 1.5rem;
+  font-size: var(--ffe-fontsize-lead-paragraph);
+}
+.ffe-sub-lead-paragraph {
+  color: var(--ffe-g-text-color);
+  line-height: 1.5rem;
+  font-size: var(--ffe-fontsize-sub-lead-paragraph);
+}
+.ffe-link-text {
+  border-bottom: 1px solid var(--ffe-g-link-color);
+  color: var(--ffe-g-link-color);
+  cursor: pointer;
+  text-decoration: none;
+  word-wrap: break-all;
+  line-height: 1em;
+  -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
+  -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
+  transition: all var(--ffe-transition-duration) var(--ffe-ease);
+}
+@media (hover: hover) and (pointer: fine) {
+  .ffe-link-text:hover {
+    border-bottom-color: var(--ffe-g-link-color-hover);
+    color: var(--ffe-g-link-color-hover);
+    text-decoration: none;
+  }
+}
+.ffe-link-text:visited {
+  border-bottom-color: var(--ffe-g-link-color-visited);
+  color: var(--ffe-g-link-color-visited);
+  text-decoration: none;
+}
+.ffe-link-text--no-underline {
+  border-bottom: none;
+}
+.ffe-link-text:focus {
+  border-color: var(--ffe-farge-hvit);
+  color: var(--ffe-farge-hvit);
+  border-radius: 1px;
+  background-color: var(--ffe-g-link-color);
+  -webkit-box-shadow: 0 0 0 2px var(--ffe-g-link-color);
+          box-shadow: 0 0 0 2px var(--ffe-g-link-color);
+  outline: none;
+}
+@media (prefers-color-scheme: dark) {
+  .regard-color-scheme-preference .ffe-link-text:focus {
+    border-color: var(--ffe-farge-svart) !important;
+    color: var(--ffe-farge-svart) !important;
+  }
+}
+.ffe-link-icon {
+  fill: var(--ffe-g-link-color);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  border-radius: 1.5rem;
+  border: 2px solid transparent;
+  outline: 0;
+  padding: var(--ffe-spacing-2xs);
+}
+@media (hover: hover) and (pointer: fine) {
+  .ffe-link-icon:hover {
+    fill: var(--ffe-g-link-icon-color-hover);
+  }
+}
+.ffe-link-icon:focus {
+  -webkit-box-shadow: 0 0 0 2px var(--ffe-g-link-icon-color-focus);
+          box-shadow: 0 0 0 2px var(--ffe-g-link-icon-color-focus);
+}
+.ffe-divider-line {
+  border: none;
+  border-bottom: solid 1px var(--ffe-farge-lysgraa);
+  padding-top: 1px;
+  padding-bottom: 1px;
+  width: 100%;
+}
+@media (prefers-color-scheme: dark) {
+  .regard-color-scheme-preference .ffe-divider-line {
+    border-color: var(--ffe-farge-graa);
+  }
+}
+.ffe-strong-text {
+  font-family: var(--ffe-g-font-strong);
+  font-variant-numeric: tabular-nums;
+  font-weight: normal;
+}
+.ffe-em-text {
+  font-family: var(--ffe-g-font-italic);
+  font-variant-numeric: tabular-nums;
+  font-weight: normal;
+  font-style: normal;
+}
+.ffe-pre-text {
+  background-color: var(--ffe-farge-sand-70);
+  font-family: consolas, menlo, monaco, monospace;
+  margin: 0;
+  text-align: left;
+}
+@media (prefers-color-scheme: dark) {
+  .regard-color-scheme-preference .ffe-pre-text {
+    background-color: var(--ffe-farge-koksgraa);
+  }
+}
+.ffe-inline-separator {
+  margin: 0 4px;
+}
+@media (min-width: 480px) {
+  .ffe-h1 {
+    line-height: 3.5rem;
+  }
+  .ffe-h2 {
+    line-height: 2.75rem;
+  }
+  .ffe-h3 {
+    line-height: 2.25rem;
+  }
+  .ffe-h4 {
+    line-height: 1.75rem;
+  }
+  .ffe-h5 {
+    line-height: 1.5rem;
+  }
+  .ffe-h6 {
+    line-height: 1.25rem;
+  }
+  .ffe-h1,
+  .ffe-h2,
+  .ffe-h3,
+  .ffe-h4,
+  .ffe-h5,
+  .ffe-h6 {
+    margin-bottom: var(--ffe-spacing-sm);
+  }
+  .ffe-h1--no-margin,
+  .ffe-h2--no-margin,
+  .ffe-h3--no-margin,
+  .ffe-h4--no-margin,
+  .ffe-h5--no-margin,
+  .ffe-h6--no-margin {
+    margin: 0;
+  }
+  .ffe-lead-paragraph {
+    line-height: 2rem;
+  }
+  .ffe-sub-lead-paragraph {
+    line-height: 1.75rem;
+  }
+  .ffe-body-text,
+  .ffe-body-paragraph {
+    line-height: 1.5rem;
+  }
+  .ffe-small-text {
+    line-height: 1.25rem;
+  }
+  .ffe-micro-text {
+    line-height: 1.25rem;
+  }
+}
+@media (min-width: 1024px) {
+  .ffe-h1,
+  .ffe-h2,
+  .ffe-h3,
+  .ffe-h4,
+  .ffe-h5,
+  .ffe-h6 {
+    margin-bottom: var(--ffe-spacing-md);
+  }
+  .ffe-h1--no-margin,
+  .ffe-h2--no-margin,
+  .ffe-h3--no-margin,
+  .ffe-h4--no-margin,
+  .ffe-h5--no-margin,
+  .ffe-h6--no-margin {
+    margin: 0;
+  }
+}
+.ffe-body-text,
+.ffe-body-paragraph,
+.ffe-lead-paragraph,
+.ffe-sub-lead-paragraph,
+.ffe-link-text,
+.ffe-strong-text,
+.ffe-em-text,
+.ffe-pre-text,
+.ffe-small-text,
+.ffe-micro-text {
+  overflow-wrap: anywhere;
+}
+.ffe-body {
+  --color: var(--ffe-g-text-color);
+  --background-color: var(--ffe-farge-hvit);
+  background-color: var(--background-color);
+  color: var(--color);
+  font-family: var(--ffe-g-font);
+  font-variant-numeric: tabular-nums;
+}
+@media (prefers-color-scheme: dark) {
+  .ffe-body.regard-color-scheme-preference {
+    --color: var(--ffe-farge-lysgraa);
+    --background-color: var(--ffe-farge-svart);
+  }
+}
+.ffe-body strong {
+  font-family: var(--ffe-g-font-strong);
+  font-weight: normal;
+}
+.ffe-body small {
+  font-size: var(--ffe-fontsize-small-text);
+}
+.ffe-body em {
+  font-family: var(--ffe-g-font-italic);
+  font-weight: normal;
+  font-style: normal;
+}
+.ffe-body pre {
+  font-family: consolas, menlo, monaco, monospace;
+}
+/* visually hides, but allows screen readers to see content */
+.ffe-screenreader-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute !important;
+  width: 1px;
+}
+.ffe-wave {
+  position: relative;
+  width: 100%;
+}
+.ffe-wave__content {
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+}
+.ffe-wave__wave {
+  -webkit-mask-repeat: repeat-x;
+          mask-repeat: repeat-x;
+  min-height: 60px;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 479.9 60' style='enable-background:new 0 0 479.9 148' xml:space='preserve'%3E%3Cpath d='M0 530V0c60.7 0 91.6 13.8 121.4 27.1 30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C387.4 13.8 418.2 0 478.9 0s91.6 13.8 121.4 27.1c30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C866.3 13.8 897.1 0 957.8 0s91.6 13.8 121.4 27.1c30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C1345.2 13.8 1376 0 1436.7 0c60.7 0 91.6 13.8 121.4 27.1 30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C1824.1 13.8 1854.9 0 1915.7 0v530'/%3E%3C/svg%3E");
+          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 479.9 60' style='enable-background:new 0 0 479.9 148' xml:space='preserve'%3E%3Cpath d='M0 530V0c60.7 0 91.6 13.8 121.4 27.1 30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C387.4 13.8 418.2 0 478.9 0s91.6 13.8 121.4 27.1c30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C866.3 13.8 897.1 0 957.8 0s91.6 13.8 121.4 27.1c30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C1345.2 13.8 1376 0 1436.7 0c60.7 0 91.6 13.8 121.4 27.1 30.4 13.6 59.1 26.4 118.1 26.4s87.7-12.8 118.1-26.4C1824.1 13.8 1854.9 0 1915.7 0v530'/%3E%3C/svg%3E");
+  -webkit-mask-size: 480px;
+          mask-size: 480px;
+}
+@media (min-width: 480px) {
+  .ffe-wave__wave {
+    min-height: 119px;
+    -webkit-mask-position: 812px;
+            mask-position: 812px;
+    -webkit-mask-size: 950px;
+            mask-size: 950px;
+  }
+}
+@media (min-width: 1024px) {
+  .ffe-wave__wave {
+    min-height: 250px;
+    -webkit-mask-position: 1931px;
+            mask-position: 1931px;
+    -webkit-mask-size: 2004px;
+            mask-size: 2004px;
+  }
+}
+.ffe-wave__wave--flip {
+  rotate: 180deg;
+}
+.ffe-wave--bg-hvit {
+  background-color: var(--ffe-farge-hvit);
+}
+.ffe-wave--bg-frost-30 {
+  background-color: #d8e9f2;
+}
+.ffe-wave--bg-sand-30 {
+  background-color: #fdf8f5;
+}
+.ffe-wave--bg-sand-70 {
+  background-color: #faf0e7;
+}
+.ffe-wave--bg-syrin-30 {
+  background-color: #f2f2f9;
+}
+.ffe-wave--bg-syrin-70 {
+  background-color: #e0e0f0;
+}
+.ffe-wave--bg-vann {
+  background-color: #005aa4;
+}
+.ffe-wave--bg-vann-30 {
+  background-color: #b3cee4;
+}
+.ffe-wave--bg-fjell {
+  background-color: #002776;
+}
+@media (prefers-color-scheme: dark) {
+  .regard-color-scheme-preference .ffe-wave--dm-bg-svart {
+    background-color: var(--ffe-farge-svart);
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .regard-color-scheme-preference .ffe-wave--dm-bg-natt {
+    background-color: #001032;
+  }
+}

package/es/tsconfig.esm.tsbuildinfo

@@ -1 +1 @@
-{"root":["../gen-src/index.ts"],"version":"5.6.3"}
+{"root":["../gen-src/index.ts"],"version":"5.7.3"}

package/less/theme.less

@@ -1,3 +1,5 @@
+@import (reference) 'breakpoints';
+
 /**
  * These variables are intended to support theming of components. Override any value to create your own look and feel.
  */
@@ -135,7 +137,9 @@
 
     /* Form element borders */
     --ffe-g-border-color: var(--ffe-farge-varmgraa);
-    --ffe-g-border-radius: 4px;
+    --ffe-g-border-radius: 8px;
+    --ffe-g-border-width: 1px;
+    --ffe-g-border-width-focus: 2px;
 
     /** Fonts */
 

package/less/waves.less

@@ -1,3 +1,4 @@
+@import (reference) 'breakpoints';
 @import 'colors';
 
 .ffe-wave {

package/lib/tsconfig.cjs.tsbuildinfo

@@ -1 +1 @@
-{"root":["../gen-src/index.ts"],"version":"5.6.3"}
+{"root":["../gen-src/index.ts"],"version":"5.7.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-core",
-    "version": "29.1.4",
+    "version": "29.3.0",
     "description": "Rammeverk for Felles Front End",
     "license": "MIT",
     "author": "SpareBank 1",
@@ -23,7 +23,7 @@
         "lint": "ffe-buildtool stylelint less/*.less",
         "test": "npm run lint",
         "clean": "rm -rf css/ gen-src/ lib/",
-        "build": "./scripts/build.js tokens.config.js && ./scripts/build-custom-mq.js less/breakpoints.less css/custom-media-queries.css && ffe-buildtool tsc"
+        "build": "./scripts/build.js tokens.config.js && ./scripts/build-custom-mq.js less/breakpoints.less css/custom-media-queries.css && ffe-buildtool tsc && lessc less/ffe.less css/ffe.css --autoprefix"
     },
     "devDependencies": {
         "@sb1/ffe-buildtool": "^0.9.0",
@@ -34,5 +34,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "d27089e01efb5feed58df9f4acd48981a8dd9e6f"
+    "gitHead": "f474381dd349e5f8a64b9e6883aa9cb4a6d184d8"
 }

package/types/tsconfig.types.tsbuildinfo

@@ -1 +1 @@
-{"root":["../gen-src/index.ts"],"version":"5.6.3"}
+{"root":["../gen-src/index.ts"],"version":"5.7.3"}