@limetech/lime-elements 36.3.0-next.4 → 36.3.0-next.41

package/dist/collection/components/chip-set/chip-set.js

@@ -4,6 +4,7 @@ import { h, } from '@stencil/core';
 import { handleKeyboardEvent } from './chip-set-input-helpers';
 import translate from '../../global/translations';
 import { getHref, getTarget } from '../../util/link-helper';
+import { isEqual } from 'lodash-es';
 const SELECTED_CHIP_CLASS = 'mdc-chip--selected';
 const INPUT_FIELD_TABINDEX = 1;
 /**
@@ -156,7 +157,10 @@ export class ChipSet {
     }
     return (h("div", { class: classes, role: "grid" }, chipSetLabel, this.value.map(this.renderChip), this.renderHelperLine()));
   }
-  handleChangeChips() {
+  handleChangeChips(newValue, oldValue) {
+    if (isEqual(newValue, oldValue)) {
+      return;
+    }
     this.syncEmptyInput();
   }
   createMDCChipSet() {
@@ -662,7 +666,7 @@ export class ChipSet {
         "mutable": false,
         "complexType": {
           "original": "Languages",
-          "resolved": "\"da\" | \"en\" | \"fi\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
+          "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
           "references": {
             "Languages": {
               "location": "import",

package/dist/collection/components/circular-progress/circular-progress.css

@@ -4,6 +4,14 @@
  * Nothing in this file may output any CSS
  * without being explicitly called by outside code.
  */
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
 /*
  * This file is imported into every component that uses MDC!
  *

package/dist/collection/components/code-editor/code-editor.css

@@ -444,11 +444,13 @@ span.CodeMirror-selectedtext { background: none; }
   content: "\25B8";
 }
 
-/*
- * This file is imported into every component!
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
  *
- * Nothing in this file may output any CSS
- * without being explicitly called by outside code.
+ * Or, just don't import anything, that works too.
  */
 /**
  * @prop --code-editor-max-height: Defines how tall the code editor can get before content becomes scrollable, defaults to `10rem`.
@@ -523,22 +525,22 @@ span.CodeMirror-selectedtext { background: none; }
     --code-editor-selection-lowlight-color: var(--contrast-100);
   }
   :root:not([data-theme=force-light]) :host .cm-attribute,
-:root:not([data-theme=force-light]) :host .cm-property,
-:root:not([data-theme=force-light]) :host .cm-keyword {
+  :root:not([data-theme=force-light]) :host .cm-property,
+  :root:not([data-theme=force-light]) :host .cm-keyword {
     color: rgb(var(--color-purple-lighter));
   }
   :root:not([data-theme=force-light]) :host .cm-operator {
     color: rgb(var(--color-sky-lighter));
   }
   :root:not([data-theme=force-light]) :host .cm-variable-3,
-:root:not([data-theme=force-light]) :host .cm-type {
+  :root:not([data-theme=force-light]) :host .cm-type {
     color: rgb(var(--color-yellow-light));
   }
   :root:not([data-theme=force-light]) :host .cm-atom {
     color: rgb(var(--color-coral-light));
   }
   :root:not([data-theme=force-light]) :host .cm-tag,
-:root:not([data-theme=force-light]) :host .cm-number {
+  :root:not([data-theme=force-light]) :host .cm-number {
     color: rgb(var(--color-magenta-light));
   }
   :root:not([data-theme=force-light]) :host .cm-def {
@@ -666,6 +668,7 @@ span.CodeMirror-selectedtext { background: none; }
 .cm-s-lime .CodeMirror-foldmarker {
   position: relative;
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: transparent;
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-normal);

package/dist/collection/components/collapsible-section/collapsible-section.css

@@ -64,6 +64,14 @@
   );
 }
 
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
 /**
  * @prop --closed-header-background-color: background color for header when closed
  * @prop --open-header-background-color: background color for header when open
@@ -71,7 +79,7 @@
  * @prop --body-background-color: background color for body
  * @prop --body-padding: space around content of the body
  */
-:host {
+:host(limel-collapsible-section) {
   --border-radius-of-header: 0.75rem;
   display: block;
 }
@@ -84,37 +92,53 @@
   pointer-events: none;
 }
 
-.section__header {
+.open-close-toggle {
+  all: unset;
+  position: absolute;
+  inset: 0;
+  width: 100%;
   transition: background-color 0.4s ease, border-radius 0.1s ease;
   cursor: pointer;
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  padding-left: 0.625rem;
-  padding-right: 0.625rem;
-  height: 3.75rem;
+  z-index: -1;
   background-color: var(--closed-header-background-color, rgb(var(--contrast-200)));
   border-radius: var(--border-radius-of-header);
 }
-.section__header:focus {
+.open-close-toggle:focus {
   outline: none;
 }
-.section__header:focus-visible {
+.open-close-toggle:focus-visible {
   outline: none;
   box-shadow: var(--shadow-depth-8-focused);
 }
-section.open .section__header {
+.open-close-toggle:hover {
+  background-color: var(--open-header-background-color, rgb(var(--contrast-300)));
+}
+section.open .open-close-toggle {
   background-color: var(--open-header-background-color, rgb(var(--contrast-100)));
   border-radius: var(--border-radius-of-header) var(--border-radius-of-header) 0 0;
 }
-section.open .section__header:hover {
+section.open .open-close-toggle:hover {
   background-color: var(--open-header-background-color, rgb(var(--contrast-300)));
 }
-.section__header:hover {
-  background-color: var(--open-header-background-color, rgb(var(--contrast-300)));
+
+.title,
+.divider-line,
+.expand-icon {
+  pointer-events: none;
 }
 
-.section__header__title {
+header {
+  isolation: isolate;
+  position: relative;
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+  height: 3rem;
+}
+
+.title {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   font-family: Roboto, sans-serif;
@@ -138,6 +162,7 @@ section.open .section__header:hover {
   text-transform: inherit;
   /* @alternate */
   text-transform: var(--mdc-typography-headline2-text-transform, inherit);
+  color: var(--mdc-theme-on-surface);
   justify-self: flex-start;
   padding-right: 0.75rem;
   user-select: none;
@@ -152,7 +177,7 @@ section.open .section__header:hover {
   overflow: hidden;
 }
 
-.section__header__divider-line {
+.divider-line {
   transition: opacity 0.3s ease 0.3s;
   flex-grow: 1;
   height: 0.125rem;
@@ -161,16 +186,16 @@ section.open .section__header:hover {
   margin-right: 0.5rem;
   opacity: 0;
 }
-section.open .section__header__divider-line {
+section.open .divider-line {
   opacity: 0.16;
 }
 
-.section__header__actions {
+.actions {
   justify-self: flex-end;
   flex-shrink: 0;
 }
 
-@keyframes fade-in-section__body {
+@keyframes fade-in-body {
   0% {
     opacity: 0;
   }
@@ -178,8 +203,8 @@ section.open .section__header__divider-line {
     opacity: 1;
   }
 }
-.section__body {
-  animation: fade-in-section__body 0.3s ease-in forwards;
+.body {
+  animation: fade-in-body 0.3s ease-in forwards;
   background-color: var(--body-background-color, var(--contrast-100));
   padding-left: var(--body-padding, 1.25rem);
   padding-right: var(--body-padding, 1.25rem);
@@ -188,14 +213,14 @@ section.open .section__header__divider-line {
   display: none;
   opacity: 0;
 }
-section.open .section__body {
+section.open .body {
   display: block;
 }
-.section__body:before, .section__body:after {
+.body:before, .body:after {
   content: " ";
   display: table;
 }
-.section__body:after {
+.body:after {
   clear: both;
 }
 
@@ -205,7 +230,7 @@ section.open .section__body {
  * Nothing in this file may output any CSS
  * without being explicitly called by outside code.
  */
-.section__header__expand-icon {
+.expand-icon {
   position: relative;
   height: 1.875rem;
   margin: 0 1rem 0 0.5rem;
@@ -213,7 +238,7 @@ section.open .section__body {
   flex-shrink: 0;
 }
 
-.expand-icon__line {
+.line {
   position: absolute;
   top: 0;
   right: 0;
@@ -225,63 +250,71 @@ section.open .section__body {
   height: 0.125rem;
   background-color: var(--header-stroke-color, rgb(var(--contrast-900)));
 }
-.expand-icon__line:first-of-type, .expand-icon__line:last-of-type {
+.line:first-of-type, .line:last-of-type {
   transition: opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s;
 }
-.expand-icon__line:first-of-type {
+.line:first-of-type {
   transform: rotate3d(0, 0, 1, 90deg);
 }
-.expand-icon__line:last-of-type {
+.line:last-of-type {
   transform: rotate3d(0, 0, 1, -90deg);
 }
-.expand-icon__line:nth-of-type(2), .expand-icon__line:nth-of-type(3) {
+.line:nth-of-type(2), .line:nth-of-type(3) {
   transition: opacity 0.2s ease, transform 0.18s ease;
 }
+section.open .line:first-of-type, section.open .line:last-of-type {
+  transition: opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s;
+}
+section.open .line:first-of-type {
+  transform: rotate3d(0, 0, 1, 0deg);
+}
+section.open .line:last-of-type {
+  transform: rotate3d(0, 0, 1, 0deg);
+}
+section.open .line:nth-of-type(2), section.open .line:nth-of-type(3) {
+  transition: opacity 1s ease, transform 0.4s ease;
+}
+section.open .line:nth-of-type(2) {
+  transform: translate3d(0, -1rem, 0);
+  opacity: 0;
+}
+section.open .line:nth-of-type(3) {
+  transform: translate3d(0, 1rem, 0);
+  opacity: 0;
+}
 
-.section__header:hover .expand-icon__line:first-of-type {
+.open-close-toggle:hover + .expand-icon .line:first-of-type {
   transform: rotate3d(0, 0, 1, 0deg);
 }
-.section__header:hover .expand-icon__line:last-of-type {
+.open-close-toggle:hover + .expand-icon .line:last-of-type {
   transform: rotate3d(0, 0, 1, 0deg);
 }
-.section__header:hover .expand-icon__line:nth-of-type(2), .section__header:hover .expand-icon__line:nth-of-type(3) {
+.open-close-toggle:hover + .expand-icon .line:nth-of-type(2), .open-close-toggle:hover + .expand-icon .line:nth-of-type(3) {
   transition: opacity 0.5s ease 0.4s, transform 0.7s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s;
 }
-.section__header:hover .expand-icon__line:nth-of-type(2) {
+.open-close-toggle:hover + .expand-icon .line:nth-of-type(2) {
   transform: translate3d(0, -0.5rem, 0);
   opacity: 0.4;
 }
-.section__header:hover .expand-icon__line:nth-of-type(3) {
+.open-close-toggle:hover + .expand-icon .line:nth-of-type(3) {
   transform: translate3d(0, 0.5rem, 0);
   opacity: 0.4;
 }
 
-section.open .section__header .expand-icon__line:first-of-type, section.open .section__header .expand-icon__line:last-of-type {
-  transition: opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s;
-}
-section.open .section__header .expand-icon__line:first-of-type {
-  transform: rotate3d(0, 0, 1, 0deg);
+section.open .open-close-toggle:hover + .expand-icon .line:first-of-type, section.open .open-close-toggle:hover + .expand-icon .line:last-of-type {
+  transition: opacity 0.2s ease 0.4s, transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s;
 }
-section.open .section__header .expand-icon__line:last-of-type {
-  transform: rotate3d(0, 0, 1, 0deg);
+section.open .open-close-toggle:hover + .expand-icon .line:first-of-type {
+  transform: rotate3d(0, 0, 1, 45deg);
 }
-section.open .section__header .expand-icon__line:nth-of-type(2), section.open .section__header .expand-icon__line:nth-of-type(3) {
-  transition: opacity 1s ease, transform 0.4s ease;
+section.open .open-close-toggle:hover + .expand-icon .line:last-of-type {
+  transform: rotate3d(0, 0, 1, -45deg);
 }
-section.open .section__header .expand-icon__line:nth-of-type(2) {
+section.open .open-close-toggle:hover + .expand-icon .line:nth-of-type(2) {
   transform: translate3d(0, -1rem, 0);
   opacity: 0;
 }
-section.open .section__header .expand-icon__line:nth-of-type(3) {
+section.open .open-close-toggle:hover + .expand-icon .line:nth-of-type(3) {
   transform: translate3d(0, 1rem, 0);
   opacity: 0;
-}
-section.open .section__header:hover .expand-icon__line:first-of-type, section.open .section__header:hover .expand-icon__line:last-of-type {
-  transition: opacity 0.2s ease 0.4s, transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s;
-}
-section.open .section__header:hover .expand-icon__line:first-of-type {
-  transform: rotate3d(0, 0, 1, 45deg);
-}
-section.open .section__header:hover .expand-icon__line:last-of-type {
-  transform: rotate3d(0, 0, 1, -45deg);
 }

package/dist/collection/components/collapsible-section/collapsible-section.js

@@ -1,6 +1,5 @@
 import { h } from '@stencil/core';
 import { dispatchResizeEvent } from '../../util/dispatch-resize-event';
-import { ENTER, ENTER_KEY_CODE } from '../../util/keycodes';
 /**
  * @slot - Content to put inside the collapsible section
  * @exampleComponent limel-example-collapsible-section
@@ -14,14 +13,6 @@ export class CollapsibleSection {
     this.onClick = () => {
       this.handleInteraction();
     };
-    this.handleKeyDown = (event) => {
-      const isEnter = event.key === ENTER || event.keyCode === ENTER_KEY_CODE;
-      if (isEnter) {
-        event.stopPropagation();
-        event.preventDefault();
-        this.handleInteraction();
-      }
-    };
     this.handleInteraction = () => {
       this.isOpen = !this.isOpen;
       if (this.isOpen) {
@@ -37,7 +28,7 @@ export class CollapsibleSection {
       if (!this.actions) {
         return;
       }
-      return (h("div", { class: "section__header__actions" }, this.actions.map(this.renderActionButton)));
+      return (h("div", { class: "actions" }, this.actions.map(this.renderActionButton)));
     };
     this.renderActionButton = (action) => {
       return (h("limel-icon-button", { icon: action.icon, label: action.label, disabled: action.disabled, onClick: this.handleActionClick(action) }));
@@ -51,7 +42,7 @@ export class CollapsibleSection {
     this.actions = undefined;
   }
   render() {
-    return (h("section", { class: `${this.isOpen ? 'open' : ''}` }, h("header", { class: "section__header", onClick: this.onClick, onKeyDown: this.handleKeyDown, tabindex: "0" }, h("div", { class: "section__header__expand-icon" }, h("div", { class: "expand-icon__line" }), h("div", { class: "expand-icon__line" }), h("div", { class: "expand-icon__line" }), h("div", { class: "expand-icon__line" })), h("h2", { class: "section__header__title mdc-typography mdc-typography--headline2" }, this.header), h("div", { class: "section__header__divider-line" }), this.renderActions()), h("div", { class: "section__body" }, h("slot", null))));
+    return (h("section", { class: `${this.isOpen ? 'open' : ''}` }, h("header", null, h("button", { class: "open-close-toggle", onClick: this.onClick }), h("div", { class: "expand-icon" }, h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" })), h("h2", { class: "title mdc-typography mdc-typography--headline2" }, this.header), h("div", { class: "divider-line" }), this.renderActions()), h("div", { class: "body" }, h("slot", null))));
   }
   static get is() { return "limel-collapsible-section"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/color-picker/color-picker-palette.css

@@ -65,20 +65,20 @@
 
 @media (prefers-color-scheme: light) {
   .brand-colors .--color-glaucous-default,
-.brand-colors .--color-gray-dark {
+  .brand-colors .--color-gray-dark {
     border-radius: 50%;
   }
 }
 @media (prefers-color-scheme: dark) {
   .brand-colors .--color-red-light,
-.brand-colors .--color-magenta-default,
-.brand-colors .--color-sky-light,
-.brand-colors .--color-teal-light,
-.brand-colors .--color-green-light,
-.brand-colors .--color-amber-light,
-.brand-colors .--color-amber-default,
-.brand-colors .--color-coral-light,
-.brand-colors .--color-gray-light {
+  .brand-colors .--color-magenta-default,
+  .brand-colors .--color-sky-light,
+  .brand-colors .--color-teal-light,
+  .brand-colors .--color-green-light,
+  .brand-colors .--color-amber-light,
+  .brand-colors .--color-amber-default,
+  .brand-colors .--color-coral-light,
+  .brand-colors .--color-gray-light {
     border-radius: 50%;
   }
 }
@@ -582,11 +582,13 @@
   grid-template-columns: repeat(20, 1fr) auto;
 }
 
-/*
- * This file is imported into every component!
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
  *
- * Nothing in this file may output any CSS
- * without being explicitly called by outside code.
+ * Or, just don't import anything, that works too.
  */
 .picker-trigger[style="--background:lime-magenta;"]:after,
 .chosen-color-preview[style="--background:lime-magenta;"]:after {
@@ -666,8 +668,8 @@
 
 .picker-trigger {
   border-radius: 0.5rem;
-  cursor: pointer;
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-normal);

package/dist/collection/components/color-picker/color-picker.css

@@ -1,8 +1,10 @@
-/*
- * This file is imported into every component!
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
  *
- * Nothing in this file may output any CSS
- * without being explicitly called by outside code.
+ * Or, just don't import anything, that works too.
  */
 .picker-trigger[style="--background:lime-magenta;"]:after,
 .chosen-color-preview[style="--background:lime-magenta;"]:after {
@@ -82,8 +84,8 @@
 
 .picker-trigger {
   border-radius: 0.5rem;
-  cursor: pointer;
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-normal);

package/dist/collection/components/date-picker/date-picker.js

@@ -36,6 +36,7 @@ const nativeFormatForType = {
  * @exampleComponent limel-example-date-picker-formatted
  * @exampleComponent limel-example-date-picker-programmatic-change
  * @exampleComponent limel-example-date-picker-composite
+ * @exampleComponent limel-example-date-picker-custom-formatter
  */
 export class DatePicker {
   constructor() {
@@ -50,6 +51,7 @@ export class DatePicker {
         this.hideCalendar();
       }
     };
+    this.formatValue = (value) => this.dateFormatter.formatDate(value, this.internalFormat);
     this.disabled = false;
     this.readonly = false;
     this.invalid = false;
@@ -61,6 +63,7 @@ export class DatePicker {
     this.type = 'datetime';
     this.format = undefined;
     this.language = 'en';
+    this.formatter = undefined;
     this.formattedValue = undefined;
     this.internalFormat = undefined;
     this.showPortal = false;
@@ -79,7 +82,7 @@ export class DatePicker {
   componentWillLoad() {
     this.useNative = !this.readonly && (isIOSDevice() || isAndroidDevice());
     this.updateInternalFormatAndType();
-    this.formattedValue = this.dateFormatter.formatDate(this.value, this.internalFormat);
+    this.formattedValue = this.formatValue(this.value);
   }
   componentWillUpdate() {
     this.updateInternalFormatAndType();
@@ -97,12 +100,12 @@ export class DatePicker {
     const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
     return [
       h("limel-input-field", Object.assign({ disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, placeholder: this.placeholder, helperText: this.helperText, required: this.required, value: this.formattedValue, onFocus: this.showCalendar, onBlur: this.hideCalendar, onClick: this.onInputClick, onChange: this.handleInputElementChange, ref: (el) => (this.textField = el) }, inputProps)),
-      h("limel-portal", { containerId: this.portalId, visible: this.showPortal, containerStyle: { 'z-index': dropdownZIndex } }, h("limel-flatpickr-adapter", { format: this.internalFormat, language: this.language, type: this.type, value: this.value, ref: (el) => (this.datePickerCalendar = el), isOpen: this.showPortal, onChange: this.handleCalendarChange })),
+      h("limel-portal", { containerId: this.portalId, visible: this.showPortal, containerStyle: { 'z-index': dropdownZIndex } }, h("limel-flatpickr-adapter", { format: this.internalFormat, language: this.language, type: this.type, value: this.value, ref: (el) => (this.datePickerCalendar = el), isOpen: this.showPortal, formatter: this.formatValue, onChange: this.handleCalendarChange })),
     ];
   }
   onValueChange(newValue, oldValue) {
     if (newValue !== oldValue && newValue !== this.formattedValue) {
-      this.formattedValue = this.dateFormatter.formatDate(this.value, this.internalFormat);
+      this.formattedValue = this.formatValue(this.value);
     }
   }
   updateInternalFormatAndType() {
@@ -111,6 +114,9 @@ export class DatePicker {
     if (this.useNative) {
       this.internalFormat = this.nativeFormat;
     }
+    else if (this.formatter) {
+      this.formatValue = this.formatter;
+    }
     else if (this.format) {
       this.internalFormat = this.format;
     }
@@ -170,7 +176,7 @@ export class DatePicker {
   }
   handleCalendarChange(event) {
     const date = event.detail;
-    this.formattedValue = this.dateFormatter.formatDate(date, this.internalFormat);
+    this.formattedValue = this.formatValue(date);
     event.stopPropagation();
     if (this.pickerIsAutoClosing()) {
       this.hideCalendar();
@@ -400,7 +406,7 @@ export class DatePicker {
         "mutable": false,
         "complexType": {
           "original": "Languages",
-          "resolved": "\"da\" | \"en\" | \"fi\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
+          "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
           "references": {
             "Languages": {
               "location": "import",
@@ -417,6 +423,25 @@ export class DatePicker {
         "attribute": "language",
         "reflect": true,
         "defaultValue": "'en'"
+      },
+      "formatter": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(date: Date) => string",
+          "resolved": "(date: Date) => string",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Custom formatting function. Will be used for date formatting.\n\n:::note\noverrides `format` and `language`\n:::"
+        }
       }
     };
   }

package/dist/collection/components/date-picker/dateFormatter.js

@@ -1,9 +1,10 @@
 import 'moment/locale/da';
+import 'moment/locale/de';
 import 'moment/locale/fi';
-import 'moment/locale/nb';
-import 'moment/locale/sv';
 import 'moment/locale/fr';
+import 'moment/locale/nb';
 import 'moment/locale/nl';
+import 'moment/locale/sv';
 import moment from 'moment/moment';
 export class DateFormatter {
   constructor(language = 'en') {
@@ -22,7 +23,10 @@ export class DateFormatter {
     return null;
   }
   getLanguage() {
-    return this.language === 'no' ? 'nb' : this.language;
+    if (this.language === 'no') {
+      return 'nb';
+    }
+    return this.language;
   }
   getDateFormat(type) {
     return ({

package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.css

@@ -64,6 +64,14 @@
   );
 }
 
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
 :root {
   --mdc-theme-primary: #26a69a;
   --mdc-theme-secondary: #575756;
@@ -634,6 +642,7 @@ svg {
 }
 .dayContainer .flatpickr-day {
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: transparent;
 }
@@ -759,6 +768,7 @@ svg {
 .arrowUp,
 .arrowDown {
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: transparent;
   border-radius: 0.25rem;
@@ -829,9 +839,9 @@ svg {
 .datepicker-quarter,
 .datepicker-year {
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: transparent;
-  cursor: pointer;
   min-width: 0;
   text-align: center;
 }