@kirbydesign/designsystem 4.0.22 → 5.0.1

package/lib/components/index.d.ts

@@ -17,6 +17,7 @@ export { GridComponent } from './grid/grid.component';
 export { GridCardConfiguration } from './grid/grid-card-configuration';
 export * from './icon';
 export * from './item';
+export { ItemGroupComponent } from './item-group/item-group.component';
 export * from './loading-overlay';
 export * from './list';
 export * from './reorder-list';

package/lib/components/item-group/item-group.component.d.ts

@@ -0,0 +1,3 @@
+export declare class ItemGroupComponent {
+    role: string;
+}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@kirbydesign/designsystem",
-  "version": "4.0.22",
+  "version": "5.0.1",
   "dependencies": {
     "chart.js": "3.3.2",
     "chartjs-plugin-annotation": "1.0.2",
     "@ionic/angular": "5.5.2",
-    "@kirbydesign/core": "0.0.10",
+    "@kirbydesign/core": "0.0.11",
     "date-fns": "2.21.1",
     "date-fns-tz": "1.1.4",
     "highcharts": "8.0.4",

package/scss/_global-styles.scss

@@ -1,16 +1,19 @@
-@import 'utils';
-@import './base/ionic';
-@import './base/typography';
-@import './base/line-clamp';
+@use "sass:map";
+@use "sass:math";
+@use 'utils';
+@use 'base/ionic';
+@use 'base/typography';
+@use 'base/line-clamp';
+@use 'base/list';
 
 :root,
 :host {
   --kirby-font-family: 'Roboto';
   font-family: var(--kirby-font-family);
-  @each $color, $color-name in $kirby-colors {
+  @each $color, $color-name in utils.$kirby-colors {
     --kirby-#{$color}: #{$color-name};
   }
-  @each $color, $color-name in $text-colors {
+  @each $color, $color-name in utils.$text-colors {
     --kirby-text-color-#{$color}: #{$color-name};
   }
   --kirby-page-max-width: 1366px;
@@ -26,12 +29,12 @@
 }
 
 @function get-drawer-additional-padding-top() {
-  $modal-close-button-inner-height: size('l'); // Todo: Move to / get from shared var
-  $modal-close-button-vertical-margin: size('xxxs') * 2; // Todo: Move to / get from shared var
+  $modal-close-button-inner-height: utils.size('l'); // Todo: Move to / get from shared var
+  $modal-close-button-vertical-margin: utils.size('xxxs') * 2; // Todo: Move to / get from shared var
   $modal-header-vertical-padding: 3px * 2; // 3px defined by Ionic
   $modal-header-total-height: $modal-close-button-inner-height + $modal-close-button-vertical-margin +
     $modal-header-vertical-padding;
-  $modal-header-vertical-center: round($modal-header-total-height / 2);
+  $modal-header-vertical-center: math.round($modal-header-total-height * 0.5);
   @return $modal-header-vertical-center;
 }
 
@@ -66,19 +69,19 @@ ion-modal.kirby-overlay {
 
   &.kirby-modal {
     box-sizing: border-box;
-    --background: var(--kirby-modal-background, #{get-color('background-color')});
+    --background: var(--kirby-modal-background, #{utils.get-color('background-color')});
     --border-radius: 0;
     --height: auto;
 
     &.kirby-modal-compact {
-      --border-radius: #{$border-radius};
-      --max-width: #{$compact-modal-max-width};
+      --border-radius: #{utils.$border-radius};
+      --max-width: #{utils.$compact-modal-max-width};
       text-align: center;
     }
 
     &.kirby-drawer {
-      --min-height: #{$drawer-default-height};
-      --kirby-modal-padding-top: calc(var(--kirby-safe-area-top, 0px) + #{size('m')});
+      --min-height: #{utils.$drawer-default-height};
+      --kirby-modal-padding-top: calc(var(--kirby-safe-area-top, 0px) + #{utils.size('m')});
       padding-top: var(--kirby-modal-padding-top);
       align-items: flex-end;
 
@@ -89,12 +92,12 @@ ion-modal.kirby-overlay {
       }
 
       .modal-wrapper {
-        border-top-left-radius: #{$border-radius};
-        border-top-right-radius: #{$border-radius};
+        border-top-left-radius: #{utils.$border-radius};
+        border-top-right-radius: #{utils.$border-radius};
       }
     }
 
-    @include media('<medium') {
+    @include utils.media('<medium') {
       &:not(.kirby-drawer):not(.kirby-modal-compact) {
         --height: 100%;
       }
@@ -106,43 +109,43 @@ ion-modal.kirby-overlay {
 
     &.modal-card:not(.kirby-drawer) {
       .modal-wrapper {
-        @include media('<medium') {
+        @include utils.media('<medium') {
           // Reset Ionic Card style height + top border radius:
           --height: 100%;
           border-top-left-radius: 0;
           border-top-right-radius: 0;
         }
 
-        @include media('>=medium') {
+        @include utils.media('>=medium') {
           // Reset Ionic Card style border radius:
-          border-radius: $border-radius;
+          border-radius: utils.$border-radius;
         }
       }
     }
 
-    @include media('>=medium') {
-      --width: #{$modal-max-width};
-      --border-radius: #{$border-radius};
-      --box-shadow: #{get-elevation(8)};
+    @include utils.media('>=medium') {
+      --width: #{utils.$modal-max-width};
+      --border-radius: #{utils.$border-radius};
+      --box-shadow: #{utils.get-elevation(8)};
 
       &:not(.kirby-modal-compact) {
         --max-height: 100%;
-        --kirby-modal-padding-top-base: #{size('xl')};
+        --kirby-modal-padding-top-base: #{utils.size('xl')};
         --kirby-modal-padding-top: var(--kirby-modal-padding-top-base);
         padding-top: var(--kirby-modal-padding-top);
 
         &:not(.kirby-drawer) {
-          --min-height: #{$modal-default-height};
+          --min-height: #{utils.$modal-default-height};
           align-items: flex-start;
 
           &.kirby-modal-small {
-            --min-height: #{map-get($modal-heights, 's')};
+            --min-height: #{map.get(utils.$modal-heights, 's')};
           }
           &.kirby-modal-medium {
-            --min-height: #{map-get($modal-heights, 'm')};
+            --min-height: #{map.get(utils.$modal-heights, 'm')};
           }
           &.kirby-modal-large {
-            --min-height: #{map-get($modal-heights, 'l')};
+            --min-height: #{map.get(utils.$modal-heights, 'l')};
           }
 
           &.kirby-modal-full-height .modal-wrapper,
@@ -182,12 +185,12 @@ ion-modal.kirby-overlay {
   }
 
   &.kirby-alert {
-    --background: #{get-color('background-color')};
-    --border-radius: #{$border-radius};
-    --box-shadow: #{get-elevation(8)};
+    --background: #{utils.get-color('background-color')};
+    --border-radius: #{utils.$border-radius};
+    --box-shadow: #{utils.get-elevation(8)};
 
     .modal-wrapper {
-      max-width: $alert-max-width;
+      max-width: utils.$alert-max-width;
       height: auto;
       text-align: center;
     }
@@ -195,8 +198,8 @@ ion-modal.kirby-overlay {
 }
 
 ion-loading.kirby-loading-overlay {
-  --backdrop-opacity: #{$loading-overlay-backdrop-opacity};
-  --ion-backdrop-color: #{get-color('background-color')};
+  --backdrop-opacity: #{utils.$loading-overlay-backdrop-opacity};
+  --ion-backdrop-color: #{utils.get-color('background-color')};
   .loading-wrapper {
     --background: transparent;
   }
@@ -208,15 +211,15 @@ ion-loading.kirby-loading-overlay {
   text-align: center;
 
   // Set default colors
-  --background: #{get-color('success')};
-  --color: #{get-color('success-contrast')};
-  --button-color: #{get-color('success-contrast')};
+  --background: #{utils.get-color('success')};
+  --color: #{utils.get-color('success-contrast')};
+  --button-color: #{utils.get-color('success-contrast')};
 
-  @each $color-name, $color-value in $notification-colors {
+  @each $color-name, $color-value in utils.$notification-colors {
     &.#{$color-name} {
-      --background: #{get-color($color-name)};
-      --color: #{get-color($color-name + '-contrast')};
-      --button-color: #{get-color($color-name + '-contrast')};
+      --background: #{utils.get-color($color-name)};
+      --color: #{utils.get-color($color-name + '-contrast')};
+      --button-color: #{utils.get-color($color-name + '-contrast')};
     }
   }
 }
@@ -258,5 +261,5 @@ ion-loading.kirby-loading-overlay {
   background-position: right 50%;
   background-size: $icon-scaling-factor;
   //place icon to the right of text, with icons own width + the actual spacing
-  padding-right: calc(#{$icon-scaling-factor} + #{size('xxxs')});
+  padding-right: calc(#{$icon-scaling-factor} + #{utils.size('xxxs')});
 }

package/scss/_utils.scss

@@ -2,7 +2,10 @@
     General imports for components
     NOTICE: Must not contain anything that generates classes or else it will be generated for every component that imports this file.
 */
-@import './base/functions';
-@import './base/variables';
-@import './base/include-media';
-@import './themes/colors';
+@use 'base/variables';
+@forward '~include-media/dist/include-media' with (
+  $breakpoints: variables.$breakpoints
+);
+@forward 'base/functions';
+@forward 'base/variables' hide $breakpoints;
+@forward 'themes/colors';

package/scss/base/_functions.scss

@@ -1,6 +1,13 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+@use "sass:string";
+@use "../themes/colors";
+@use "variables";
+
 @function _get-map-prop($map, $key) {
-  @if map-has-key($map, $key) {
-    @return map-get($map, $key);
+  @if map.has-key($map, $key) {
+    @return map.get($map, $key);
   }
 
   @error 'Unknown key `#{$key}`.';
@@ -8,73 +15,73 @@
 }
 
 @function size($key: 'm') {
-  $negative: str-index($key, '-') == 1;
+  $negative: string.index($key, '-') == 1;
   @if ($negative) {
-    $key: str-slice($key, 2, -1);
+    $key: string.slice($key, 2, -1);
   }
-  $value: _get-map-prop($sizes, $key);
-  @return if($negative, unquote('-' + $value), $value);
+  $value: _get-map-prop(variables.$sizes, $key);
+  @return if($negative, string.unquote('-' + $value), $value);
 }
 
 @function z($key) {
-  @return _get-map-prop($z-layers, $key);
+  @return _get-map-prop(variables.$z-layers, $key);
 }
 
 @function font-size($key: 'n') {
   @if ($key == 'display') {
     @warn 'Display key is deprecated';
   }
-  @return _get-map-prop($font-sizes, $key);
+  @return _get-map-prop(variables.$font-sizes, $key);
 }
 
 @function line-height($key: 'm') {
-  @return _get-map-prop($line-height, $key);
+  @return _get-map-prop(variables.$line-height, $key);
 }
 
 @function font-weight($key: 'normal') {
-  @return _get-map-prop($font-weight, $key);
+  @return _get-map-prop(variables.$font-weight, $key);
 }
 
 @function icon-font-size($size) {
-  @return map-get($icon-font-sizes, $size);
+  @return map.get(variables.$icon-font-sizes, $size);
 }
 
-@function get-color($variant, $getValueOnly: false, $map: $kirby-colors) {
+@function get-color($variant, $getValueOnly: false, $map: colors.$kirby-colors) {
   $value: _get-map-prop($map, $variant);
   @if $getValueOnly == true {
     @return $value;
   } @else {
-    @return unquote('var(--kirby-' + $variant + ')');
+    @return string.unquote('var(--kirby-' + $variant + ')');
   }
 }
 
 @function get-text-color($variant) {
-  $value: _get-map-prop($text-colors, $variant);
-  @return unquote('var(--kirby-text-color-' + $variant + ')');
+  $value: _get-map-prop(colors.$text-colors, $variant);
+  @return string.unquote('var(--kirby-text-color-' + $variant + ')');
 }
 
 @function get-elevation($value) {
-  @return map-get($elevations, $value);
+  @return map.get(variables.$elevations, $value);
 }
 
 @function get-transition-duration($value) {
-  @return map-get($transition-durations, $value);
+  @return map.get(variables.$transition-durations, $value);
 }
 
 @function get-transition-easing($value) {
-  @return map-get($transition-easings, $value);
+  @return map.get(variables.$transition-easings, $value);
 }
 
 @function get-shadow-size($elevation) {
   $shadow-size: 0;
-  $shadow-list: map-get($elevations, $elevation);
+  $shadow-list: map.get(variables.$elevations, $elevation);
   @each $shadow in $shadow-list {
-    $offset-x: abs(_get-shadow-value($shadow, 'offset-x'));
-    $offset-y: abs(_get-shadow-value($shadow, 'offset-y'));
+    $offset-x: math.abs(_get-shadow-value($shadow, 'offset-x'));
+    $offset-y: math.abs(_get-shadow-value($shadow, 'offset-y'));
     $blur-radius: _get-shadow-value($shadow, 'blur-radius');
     $spread-radius: _get-shadow-value($shadow, 'spread-radius');
-    $current-shadow-size: max($offset-x, $offset-y) + $blur-radius + $spread-radius;
-    $shadow-size: max($shadow-size, $current-shadow-size);
+    $current-shadow-size: math.max($offset-x, $offset-y) + $blur-radius + $spread-radius;
+    $shadow-size: math.max($shadow-size, $current-shadow-size);
   }
   @return $shadow-size;
 }
@@ -86,8 +93,8 @@
     'blur-radius': 3,
     'spread-radius': 4,
   );
-  $value-index: map-get($shadow-value-map, $valuekey);
-  @return nth($shadow, $value-index);
+  $value-index: map.get($shadow-value-map, $valuekey);
+  @return list.nth($shadow, $value-index);
 }
 
 /**
@@ -95,8 +102,8 @@
  */
 @function keys-to-classes($map) {
   $classes: ();
-  @each $key in map-keys($map) {
-    $classes: append($classes, '.#{$key}', $separator: comma);
+  @each $key in map.keys($map) {
+    $classes: list.append($classes, '.#{$key}', $separator: comma);
   }
   @return $classes;
 }
@@ -164,7 +171,7 @@
 
 // Ensure minimum click area (default 44 x 44 px)
 // Ignore rounded corners to ensure square click area
-@mixin accessible-target-size($width: $fat-finger-size, $height: $width) {
+@mixin accessible-target-size($width: variables.$fat-finger-size, $height: $width) {
   position: relative;
 
   &::after {

package/scss/base/_ionic.scss

@@ -1,17 +1,21 @@
-@import '../base/functions';
-@import '../themes/colors';
+@use '../base/functions';
+@use '../themes/colors';
 
 /* Core CSS required for Ionic components to work properly */
 @import '~@ionic/angular/css/core.css';
 
 @mixin ionic-color-map($ionic-variant, $kirby-variant: $ionic-variant) {
   --ion-color-#{$ionic-variant}: var(--kirby-#{$kirby-variant});
-  --ion-color-#{$ionic-variant}-rgb: #{get-color(#{$kirby-variant}-rgb, true, $kirby-colors)};
+  --ion-color-#{$ionic-variant}-rgb: #{functions.get-color(
+      #{$kirby-variant}-rgb,
+      true,
+      colors.$kirby-colors
+    )};
   --ion-color-#{$ionic-variant}-contrast: var(--kirby-#{$kirby-variant}-contrast);
-  --ion-color-#{$ionic-variant}-contrast-rgb: #{get-color(
+  --ion-color-#{$ionic-variant}-contrast-rgb: #{functions.get-color(
       #{$kirby-variant}-contrast-rgb,
       true,
-      $kirby-colors
+      colors.$kirby-colors
     )};
   --ion-color-#{$ionic-variant}-shade: var(--kirby-#{$kirby-variant}-shade);
   --ion-color-#{$ionic-variant}-tint: var(--kirby-#{$kirby-variant}-tint);

package/scss/base/_list.scss

@@ -0,0 +1,11 @@
+ul,
+ol {
+  margin-inline-start: 0.25em;
+  padding-inline-start: 1em;
+  line-height: 1.5;
+}
+
+li li,
+li + li {
+  margin-block-start: 0.5em;
+}

package/scss/base/_typography.scss

@@ -1,3 +1,5 @@
+@use "functions";
+
 @import '~@fontsource/roboto/300.css';
 @import '~@fontsource/roboto/400.css';
 @import '~@fontsource/roboto/700.css';
@@ -14,7 +16,7 @@ h4,
 p,
 .p {
   margin: 0;
-  margin-bottom: size('s');
+  margin-bottom: functions.size('s');
 }
 
 kirby-app .page-title {
@@ -29,75 +31,75 @@ kirby-app .page-title {
 }
 
 .kirby-text-display-1 {
-  font-size: font-size('xxxxl');
-  font-weight: font-weight('black');
+  font-size: functions.font-size('xxxxl');
+  font-weight: functions.font-weight('black');
   line-height: normal;
 }
 
 .kirby-text-display-2 {
-  font-size: font-size('xxxl');
-  font-weight: font-weight('black');
+  font-size: functions.font-size('xxxl');
+  font-weight: functions.font-weight('black');
   line-height: normal;
 }
 
 .kirby-text-display-3 {
-  font-size: font-size('xxl');
-  font-weight: font-weight('black');
+  font-size: functions.font-size('xxl');
+  font-weight: functions.font-weight('black');
   line-height: normal;
 }
 
 h1,
 .h1,
 .kirby-text-xlarge {
-  font-size: font-size('xl');
-  font-weight: font-weight('black');
-  line-height: line-height('xl');
+  font-size: functions.font-size('xl');
+  font-weight: functions.font-weight('black');
+  line-height: functions.line-height('xl');
 }
 
 h2,
 .h2,
 .kirby-text-large {
-  font-size: font-size('l');
-  font-weight: font-weight('bold');
-  line-height: line-height('l');
+  font-size: functions.font-size('l');
+  font-weight: functions.font-weight('bold');
+  line-height: functions.line-height('l');
 }
 
 h3,
 .h3,
 .kirby-text-medium {
-  font-size: font-size('m');
-  font-weight: font-weight('bold');
-  line-height: line-height('m');
+  font-size: functions.font-size('m');
+  font-weight: functions.font-weight('bold');
+  line-height: functions.line-height('m');
 }
 
 p,
 .p,
 .kirby-text-normal {
-  font-size: font-size('n');
-  line-height: line-height('n');
+  font-size: functions.font-size('n');
+  line-height: functions.line-height('n');
 }
 
 .kirby-text-small {
-  font-size: font-size('s');
-  line-height: line-height('s');
+  font-size: functions.font-size('s');
+  line-height: functions.line-height('s');
 }
 
 .kirby-text-small-light {
-  font-size: font-size('s');
-  font-weight: font-weight('light');
-  line-height: line-height('s');
+  font-size: functions.font-size('s');
+  font-weight: functions.font-weight('light');
+  line-height: functions.line-height('s');
 }
 
 .kirby-text-xsmall {
-  font-size: font-size('xs');
-  line-height: line-height('xs');
+  font-size: functions.font-size('xs');
+  line-height: functions.line-height('xs');
 }
 
 .kirby-text-xxsmall {
-  font-size: font-size('xxs');
-  line-height: line-height('xxs');
+  font-size: functions.font-size('xxs');
+  line-height: functions.line-height('xxs');
 }
 
 .kirby-text-bold {
-  font-weight: font-weight('bold');
+  font-weight: functions.font-weight('bold');
 }

package/scss/base/_variables.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+@use "sass:math";
 /*
   SPACINGS
 ****************************************************************************/
@@ -58,10 +60,10 @@ $font-weight: (
 /* Icon
 ****************************************************************************/
 $icon-font-sizes: (
-  'xs': map-get($sizes, 's'),
-  'sm': map-get($sizes, 'm'),
-  'md': map-get($sizes, 'l'),
-  'lg': map-get($sizes, 'xxxl'),
+  'xs': map.get($sizes, 's'),
+  'sm': map.get($sizes, 'm'),
+  'md': map.get($sizes, 'l'),
+  'lg': map.get($sizes, 'xxxl'),
 ) !default;
 
 /*
@@ -130,13 +132,13 @@ $compact-modal-max-width: 359px;
 $modal-max-width: 720px;
 
 $modal-heights: (
-  s: floor($modal-max-width * 0.4),
-  m: floor($modal-max-width * 0.64),
-  l: floor($modal-max-width * 0.8),
+  s: math.floor($modal-max-width * 0.4),
+  m: math.floor($modal-max-width * 0.64),
+  l: math.floor($modal-max-width * 0.8),
 ) !default;
 
-$modal-default-height: map-get($modal-heights, 'm');
-$drawer-default-height: map-get($modal-heights, 's');
+$modal-default-height: map.get($modal-heights, 'm');
+$drawer-default-height: map.get($modal-heights, 's');
 
 /* Item
 ****************************************************************************/
@@ -148,7 +150,7 @@ $item-heights: (
 
 /* Dropdown
 ****************************************************************************/
-$dropdown-item-height: map-get($item-heights, 's');
+$dropdown-item-height: map.get($item-heights, 's');
 
 /* Button, Checkbox, Page, Radio
 ****************************************************************************/
@@ -157,14 +159,14 @@ $fat-finger-size: 44px;
 /* Checkbox, Radio
 ****************************************************************************/
 $checkbox-radio-sizes: (
-  'xs': map-get($sizes, 'l'),
+  'xs': map.get($sizes, 'l'),
   'sm': $fat-finger-size,
-  'md': map-get($sizes, 'xxxl'),
+  'md': map.get($sizes, 'xxxl'),
 );
 
 $checkbox-radio-spacing: (
-  'to-edge': map-get($sizes, 's'),
-  'to-label': map-get($sizes, 'xs'),
+  'to-edge': map.get($sizes, 's'),
+  'to-label': map.get($sizes, 'xs'),
 );
 
 /* Transitions

package/scss/print/_index.scss

@@ -1,3 +1,3 @@
-@import 'generic';
-@import 'elements';
-@import 'components';
+@forward 'generic';
+@forward 'elements';
+@forward 'components';

package/scss/print/components/_index.scss

@@ -1,7 +1,7 @@
-@import 'kirby-app';
-@import 'kirby-fab-sheet';
-@import 'kirby-list';
-@import 'kirby-modal-wrapper';
-@import 'kirby-page';
-@import 'kirby-router-outlet';
-@import 'kirby-tab-bar';
+@forward 'kirby-app';
+@forward 'kirby-fab-sheet';
+@forward 'kirby-list';
+@forward 'kirby-modal-wrapper';
+@forward 'kirby-page';
+@forward 'kirby-router-outlet';
+@forward 'kirby-tab-bar';

package/scss/print/elements/_index.scss

@@ -1,3 +1,3 @@
-@import 'button';
-@import 'page';
-@import 'preformatted-text';
+@forward 'button';
+@forward 'page';
+@forward 'preformatted-text';

package/scss/print/generic/_index.scss

@@ -1,4 +1,4 @@
-@import 'colors';
-@import 'page';
-@import 'reset';
-@import 'typography';
+@forward 'colors';
+@forward 'page';
+@forward 'reset';
+@forward 'typography';