@danske/sapphire-css 48.0.1 → 49.0.0

package/components/accordion/accordion.module.css

@@ -146,6 +146,10 @@
 .sapphire-accordion__item-content-wrapper {
   display: grid;
   grid-template-rows: 0fr;
+}
+
+/* React sets height as css variable for transition, Angular does not */
+.sapphire-accordion__item-content-wrapper--with-transition {
   transition: grid-template-rows var(--sapphire-semantic-time-motion-quick)
     var(--sapphire-semantic-transitions-dynamic);
 }
@@ -158,10 +162,8 @@
   opacity: 0;
   transition: opacity var(--sapphire-semantic-time-fade-default)
       var(--sapphire-semantic-transitions-fade),
-    padding-bottom var(--sapphire-semantic-time-motion-quick)
+    height var(--sapphire-semantic-time-motion-quick)
       var(--sapphire-semantic-transitions-fade);
-  padding-right: var(--sapphire-semantic-size-spacing-lg);
-  padding-left: var(--sapphire-semantic-size-spacing-lg);
 }
 
 .sapphire-accordion__item--open > .sapphire-accordion__item-content-wrapper {
@@ -172,7 +174,6 @@
   > .sapphire-accordion__item-content-wrapper
   > .sapphire-accordion__item-content {
   opacity: 1;
-  padding-bottom: var(--sapphire-semantic-size-spacing-lg);
   visibility: visible;
 }
 
@@ -180,3 +181,9 @@
   margin-left: calc(var(--sapphire-semantic-size-spacing-lg) * -1);
   width: calc(100% + (var(--sapphire-semantic-size-spacing-lg) * 2));
 }
+
+.sapphire-accordion__item-content-inner {
+  padding-right: var(--sapphire-semantic-size-spacing-lg);
+  padding-left: var(--sapphire-semantic-size-spacing-lg);
+  padding-bottom: var(--sapphire-semantic-size-spacing-lg);
+}

package/components/accordion/accordion.module.css.d.ts

@@ -10,8 +10,10 @@ declare const styles: {
   readonly "sapphire-accordion__item--open": string;
   readonly "sapphire-accordion__item-heading": string;
   readonly "sapphire-accordion__item-arrow": string;
+  readonly "sapphire-accordion__item-content-wrapper--with-transition": string;
   readonly "sapphire-accordion__item-content": string;
   readonly "sapphire-accordion--negative-margin-self": string;
+  readonly "sapphire-accordion__item-content-inner": string;
 };
 export = styles;
 

package/components/breadcrumbs/breadcrumbs.module.css

@@ -12,10 +12,6 @@
   white-space: nowrap;
 }
 
-.sapphire-breadcrumbs__item * {
-  max-width: var(--sapphire-global-size-generic-480);
-}
-
 .sapphire-breadcrumbs__item--static {
   /* typography */
   font-family: var(--sapphire-semantic-font-name-default);
@@ -28,10 +24,13 @@
   padding: 0 var(--sapphire-global-size-generic-50);
   height: var(--sapphire-semantic-size-height-control-md);
   min-width: var(--sapphire-global-size-generic-100);
-  max-width: fit-content; /* When part of flex layout the button will otherwise expand to full width of container when container has flex-direction 'column' */
   flex-shrink: 0; /* When part of flex layout the button will otherwise be squashed */
 
   align-content: center;
+
+  max-width: calc(10 * var(--sapphire-semantic-size-height-control-md));
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .sapphire-breadcrumbs .sapphire-breadcrumbs__item:last-child {
@@ -53,6 +52,7 @@
   padding: 0 var(--sapphire-semantic-size-spacing-md);
   font-size: var(--sapphire-semantic-size-font-control-sm);
   border-radius: var(--sapphire-semantic-size-height-control-sm);
+  max-width: calc(10 * var(--sapphire-semantic-size-height-control-sm));
 }
 
 .sapphire-breadcrumbs.sapphire-breadcrumbs--lg
@@ -70,6 +70,7 @@
   padding: 0 var(--sapphire-semantic-size-spacing-xl);
   font-size: var(--sapphire-semantic-size-font-control-lg);
   border-radius: var(--sapphire-semantic-size-height-control-lg);
+  max-width: calc(10 * var(--sapphire-semantic-size-height-control-lg));
 }
 
 /**

package/components/button/button.module.css

@@ -38,8 +38,9 @@
   padding: 0 var(--sapphire-semantic-size-spacing-md);
   height: var(--sapphire-semantic-size-height-control-md);
   min-width: var(--sapphire-global-size-generic-200);
-  max-width: fit-content; /* When part of flex layout the button will otherwise expand to full width of container when container has flex-direction 'column' */
-  flex-shrink: 0; /* When part of flex layout the button will otherwise be squashed */
+  width: fit-content;
+  max-width: 100%;
+  flex-shrink: 1;
 
   /* shape */
   border-radius: var(--sapphire-semantic-size-height-control-md);
@@ -56,9 +57,7 @@
 }
 
 .sapphire-button__content {
-  display: inline-flex;
   align-items: center;
-  justify-content: center;
   vertical-align: middle;
   white-space: nowrap;
   user-select: none;
@@ -68,6 +67,20 @@
   margin: 0;
   width: 100%;
   padding: 0 var(--sapphire-semantic-size-spacing-xs);
+  max-width: calc(10 * var(--sapphire-semantic-size-height-control-md));
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sapphire-button--stretch,
+.sapphire-button--stretch-left-align {
+  max-width: 100%;
+  min-width: fit-content;
+  flex-grow: 1;
+}
+
+.sapphire-button--stretch-left-align .sapphire-button__content {
+  text-align: start;
 }
 
 a.sapphire-button {
@@ -491,6 +504,9 @@ a.sapphire-button {
   padding: 0;
   border-radius: var(--sapphire-semantic-size-radius-xs);
 }
+.sapphire-button--lg .sapphire-button__content {
+  max-width: calc(10 * var(--sapphire-semantic-size-height-control-lg));
+}
 
 /**
  * SMALL
@@ -510,4 +526,5 @@ a.sapphire-button {
 
 .sapphire-button--sm .sapphire-button__content {
   padding: 0 var(--sapphire-semantic-size-spacing-2xs);
+  max-width: calc(10 * var(--sapphire-semantic-size-height-control-sm));
 }

package/components/button/button.module.css.d.ts

@@ -1,6 +1,8 @@
 declare const styles: {
   readonly "sapphire-button": string;
   readonly "sapphire-button__content": string;
+  readonly "sapphire-button--stretch": string;
+  readonly "sapphire-button--stretch-left-align": string;
   readonly "is-disabled": string;
   readonly "is-focus": string;
   readonly "js-focus": string;

package/components/buttonGroup/buttonGroup.module.css

@@ -51,6 +51,11 @@
   flex-wrap: nowrap;
 }
 
+.sapphire-button-group--stretch.sapphire-button-group--stretch-auto-vertical
+  > * {
+  width: auto !important;
+}
+
 .sapphire-button-group--stretch.sapphire-button-group--stretch-auto-vertical.sapphire-button-group:has(
     > *:nth-child(3)
   ) {

package/components/list/list.module.css

@@ -165,14 +165,14 @@ instead of being applied on the list item itself  */
 .sapphire-list__item--interactive.is-hover:not(.is-active):not(:has(.is-hover)),
 .sapphire-list__item--interactive:not(.js-hover):not(
     [aria-disabled='true']
-  ):not(:disabled):not(:active):not(:has(:hover)):hover {
+  ):not(:disabled):not(:active):not(:has(:focus-within)):hover {
   background: var(--sapphire-semantic-color-background-action-tertiary-hover);
 }
 
 .sapphire-list__item--selected.is-hover:not(.is-active):not(:has(.is-hover)),
 .sapphire-list__item--selected:not(.js-hover):not([aria-disabled='true']):not(
     :disabled
-  ):not(:active):not(:has(:hover)):hover {
+  ):not(:active):not(:has(:focus-within)):hover {
   background: var(
     --sapphire-semantic-color-background-action-select-secondary-hover
   );
@@ -197,12 +197,14 @@ instead of being applied on the list item itself  */
 
 /* Active */
 
+/* The 2 instances of button[aria-expanded='true'] below is a hack to accomodate the scenario where 
+the contentRight button, when it triggers a menu, does not get the active state. */
 .sapphire-list__item--interactive:not(.is-disabled).is-active:not(
     :has(.is-active)
   ),
 .sapphire-list__item--interactive:not([aria-disabled='true']):not(
     :disabled
-  ):not(:has(:active)):active {
+  ):not(:has(:focus-within, button[aria-expanded='true'])):active {
   background-color: var(
     --sapphire-semantic-color-background-action-secondary-hover
   );
@@ -212,7 +214,7 @@ instead of being applied on the list item itself  */
     :has(.is-active)
   ),
 .sapphire-list__item--selected:not([aria-disabled='true']):not(:disabled):not(
-    :has(:active)
+    :has(:focus-within, button[aria-expanded='true'])
   ):active {
   background-color: var(
     --sapphire-semantic-color-background-action-select-secondary-active

package/components/listbox/listbox.module.css

@@ -199,7 +199,9 @@ Hence a separate class for checkmark icon to be used in the alignment styles */
     );
 }
 
-.sapphire-listbox__separator {
+.sapphire-listbox__separator,
+.sapphire-listbox__separator.sapphire-listbox__separator {
+  width: auto;
   height: var(--sapphire-semantic-size-border-sm);
   background: var(--sapphire-semantic-color-border-secondary);
   margin: var(--sapphire-listbox-items-gap)

package/components/panel/panel.module.css

@@ -12,6 +12,10 @@
   background: var(--sapphire-semantic-color-background-popover);
 }
 
+.sapphire-panel--left {
+  transform: translateX(-100%);
+}
+
 .sapphire-panel--visible {
   transform: translateX(0%);
 }

package/components/panel/panel.module.css.d.ts

@@ -1,5 +1,6 @@
 declare const styles: {
   readonly "sapphire-panel": string;
+  readonly "sapphire-panel--left": string;
   readonly "sapphire-panel--visible": string;
   readonly "sapphire-panel--sm": string;
 };

package/components/passwordField/passwordField.module.css

@@ -0,0 +1,67 @@
+.sapphire-password-field__button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  white-space: nowrap;
+  /* In Safari buttons get a 2px border
+   * https://github.com/necolas/normalize.css/blob/master/normalize.css#L160-L169
+   */
+  margin: 0;
+  padding: 0;
+  /* height: var(--sapphire-dateField-icon-size);
+  width: var(--sapphire-dateField-icon-size); */
+  background: transparent;
+  color: var(--sapphire-semantic-color-foreground-secondary);
+  cursor: pointer;
+
+  /* shape */
+  border-radius: var(--sapphire-semantic-size-radius-xs);
+  border-style: solid;
+  border-width: 0;
+  border-color: transparent;
+
+  /* transition for color */
+  transition-property: color;
+  transition-duration: var(--sapphire-semantic-time-fade-quick);
+  transition-timing-function: var(--sapphire-semantic-transitions-fade);
+}
+
+/**
+ * Hover 
+ */
+.sapphire-password-field__button:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active):not(.js-hover):hover,
+.sapphire-password-field__button:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active).is-hover {
+  color: var(--sapphire-semantic-color-foreground-primary);
+}
+
+/**
+ * Active
+  */
+.sapphire-password-field__button:not(:disabled):not(.is-disabled).is-active,
+.sapphire-password-field__button:not(:disabled):not(.is-disabled):active,
+.sapphire-password-field__button:not(:disabled):not(
+    .is-disabled
+  ):focus-visible:active {
+  color: var(--sapphire-semantic-color-foreground-primary);
+}
+/**
+ * Focus
+ */
+.sapphire-password-field__button.is-focus,
+.sapphire-password-field__button:not(.js-focus):focus-visible {
+  outline: var(--sapphire-semantic-size-focus-ring) solid
+    var(--sapphire-semantic-color-focus-ring);
+}
+/**
+ * Disabled
+ */
+.sapphire-password-field__button:disabled,
+.sapphire-password-field__button.is-disabled {
+  cursor: not-allowed;
+}

package/components/passwordField/passwordField.module.css.d.ts

@@ -0,0 +1,11 @@
+declare const styles: {
+  readonly "sapphire-password-field__button": string;
+  readonly "is-disabled": string;
+  readonly "is-active": string;
+  readonly "js-hover": string;
+  readonly "is-hover": string;
+  readonly "is-focus": string;
+  readonly "js-focus": string;
+};
+export = styles;
+

package/components/separator/separator.module.css

@@ -0,0 +1,14 @@
+.sapphire-separator {
+  height: 1px;
+  background-color: var(--sapphire-semantic-color-border-secondary);
+  border: none;
+  width: 100%;
+}
+
+.sapphire-separator[aria-orientation='vertical'] {
+  width: 1px;
+  height: auto;
+  min-height: 100%;
+  flex-direction: column;
+  align-self: stretch;
+}

package/components/separator/separator.module.css.d.ts

@@ -0,0 +1,5 @@
+declare const styles: {
+  readonly "sapphire-separator": string;
+};
+export = styles;
+

package/components/sidebar/sidebar.module.css

@@ -0,0 +1,204 @@
+@keyframes slide-in {
+  0% {
+    transform: translate(-7%);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-out {
+  0% {
+    transform: translate(0%);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate(-7%);
+    opacity: 0;
+    display: none;
+  }
+}
+
+.sapphire-sidebar {
+  box-sizing: border-box;
+  /* the secondary sidebar is relative to this */
+  position: relative;
+  font-family: var(--sapphire-semantic-font-name-default);
+
+  --sapphire-sidebar-spacing-horizontal: var(
+    --sapphire-semantic-size-spacing-md
+  );
+
+  /* The below is meant to address a font rendering quirk in OSX where the text
+   * looks bolder than intended due to subpixel rendering. This quirk generally
+   * occurs for bold fonts on dark backgrounds but depending on the font, it
+   * can happen in other contexts as well.
+   *
+   * These do not do anything except in webkit browsers & firefox on OSX.
+   *
+   * For more details see:
+   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
+   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
+   */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  display: flex;
+  flex-direction: column;
+
+  /**
+   * Normally the background and foreground belong to the `surface`
+   * but the sidebar is a little bit special. Part of what a sidebar is, is
+   * that it has the surface background color. Similar to popovers.
+   */
+  background: var(--sapphire-semantic-color-background-surface);
+  padding-left: var(--sapphire-sidebar-spacing-horizontal);
+  padding-right: var(--sapphire-sidebar-spacing-horizontal);
+
+  min-width: var(--sapphire-global-size-generic-600);
+  max-width: fit-content;
+  height: 100%;
+}
+
+/**
+ * Applied on secondary sidebar for transition
+ */
+.sapphire-sidebar--slide-in {
+  animation: slide-in var(--sapphire-semantic-time-fade-default)
+    var(--sapphire-semantic-transitions-dynamic);
+}
+
+.sapphire-sidebar--slide-out {
+  animation: slide-out var(--sapphire-semantic-time-fade-default)
+    var(--sapphire-semantic-transitions-dynamic) forwards;
+}
+
+.sapphire-sidebar__secondary-container {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  height: 100%;
+  border-right: var(--sapphire-semantic-size-border-sm) solid
+    var(--sapphire-semantic-color-border-secondary);
+}
+
+/* Header */
+.sapphire-sidebar__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--sapphire-semantic-size-spacing-sm);
+
+  padding-top: var(--sapphire-semantic-size-spacing-xl);
+  padding-bottom: var(--sapphire-semantic-size-spacing-xl);
+  padding-left: var(--sapphire-semantic-size-spacing-lg);
+
+  /**
+   * Need a min height to avoid moving the heading in case it contains a
+   * regular icon button, like it will always do in the secondary heading
+   */
+  box-sizing: content-box;
+  min-height: var(--sapphire-semantic-size-height-control-md);
+}
+
+/* Body (main content) */
+.sapphire-sidebar__body {
+  flex-grow: 1;
+  overflow: auto;
+  margin-left: calc(-1 * var(--sapphire-sidebar-spacing-horizontal));
+  margin-right: calc(-1 * var(--sapphire-sidebar-spacing-horizontal));
+  padding-left: var(--sapphire-sidebar-spacing-horizontal);
+  padding-right: var(--sapphire-sidebar-spacing-horizontal);
+}
+
+/* Modifier for when list has scrolled. Needs JS control. */
+.sapphire-sidebar__body--scrolled {
+  border-top: var(--sapphire-semantic-size-border-sm) solid
+    var(--sapphire-semantic-color-border-secondary);
+}
+
+/* Nav list (usually a <ul> or <ol>) */
+.sapphire-sidebar__nav-list {
+  --sapphire-sidebar-item-gap: var(--sapphire-semantic-size-spacing-3xs);
+  --sapphire-sidebar-spacing-separator-horizontal: var(
+    --sapphire-semantic-size-spacing-3xs
+  );
+
+  margin: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sapphire-sidebar-item-gap);
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: var(--sapphire-semantic-size-spacing-xs);
+  padding-bottom: var(--sapphire-semantic-size-spacing-xl);
+}
+
+.sapphire-sidebar__nav-item {
+  display: flex;
+}
+
+/**
+ * Custom increase of clickable area of the button
+ */
+.sapphire-sidebar__nav-item > [role='button'] {
+  position: relative;
+}
+
+.sapphire-sidebar__nav-item > [role='button']::before {
+  content: '';
+  position: absolute;
+  top: calc(-1 * (var(--sapphire-sidebar-item-gap) / 2));
+  bottom: calc(-1 * (var(--sapphire-sidebar-item-gap) / 2));
+  left: 0;
+  right: 0;
+  background: transparent;
+}
+
+/* Sections */
+.sapphire-sidebar__separator {
+  height: var(--sapphire-semantic-size-border-sm);
+  background: var(--sapphire-semantic-color-border-secondary);
+  margin: var(--sapphire-semantic-size-spacing-3xs)
+    calc(
+      var(--sapphire-semantic-size-spacing-lg) -
+        var(--sapphire-sidebar-spacing-separator-horizontal)
+    );
+}
+
+.sapphire-sidebar__nav-list > .sapphire-sidebar__separator:first-child {
+  display: none;
+}
+
+.sapphire-sidebar__section {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sapphire-sidebar-item-gap);
+}
+
+.sapphire-sidebar__section-header {
+  font-size: var(--sapphire-semantic-size-font-body-xs);
+  color: var(--sapphire-semantic-color-foreground-primary);
+  font-weight: var(--sapphire-semantic-font-weight-default-medium);
+  padding: calc(
+      var(--sapphire-semantic-size-spacing-md) -
+        var(--sapphire-sidebar-item-gap)
+    )
+    calc(
+      var(--sapphire-semantic-size-spacing-sm) +
+        var(--sapphire-sidebar-spacing-separator-horizontal)
+    )
+    var(--sapphire-semantic-size-spacing-2xs)
+    calc(
+      var(--sapphire-semantic-size-spacing-sm) +
+        var(--sapphire-sidebar-spacing-separator-horizontal)
+    );
+}

package/components/sidebar/sidebar.module.css.d.ts

@@ -0,0 +1,18 @@
+declare const styles: {
+  readonly "sapphire-sidebar": string;
+  readonly "sapphire-sidebar--slide-in": string;
+  readonly "slide-in": string;
+  readonly "sapphire-sidebar--slide-out": string;
+  readonly "slide-out": string;
+  readonly "sapphire-sidebar__secondary-container": string;
+  readonly "sapphire-sidebar__header": string;
+  readonly "sapphire-sidebar__body": string;
+  readonly "sapphire-sidebar__body--scrolled": string;
+  readonly "sapphire-sidebar__nav-list": string;
+  readonly "sapphire-sidebar__nav-item": string;
+  readonly "sapphire-sidebar__separator": string;
+  readonly "sapphire-sidebar__section": string;
+  readonly "sapphire-sidebar__section-header": string;
+};
+export = styles;
+

package/components/textField/textField.module.css

@@ -225,6 +225,16 @@
   outline-offset: calc(0px - var(--sapphire-semantic-size-focus-ring));
 }
 
+/**
+ * Focus override in the case of password visibility toggle being focused. 
+ (sapphire-password-field__button)
+ */
+.sapphire-text-field:has(button:focus) {
+  outline: solid var(--sapphire-semantic-size-border-sm)
+    var(--sapphire-semantic-color-border-field-default);
+  outline-offset: calc(0px - var(--sapphire-semantic-size-border-sm));
+}
+
 .sapphire-text-field.is-focus .sapphire-text-field__input:autofill,
 .sapphire-text-field:focus-within .sapphire-text-field__input:autofill {
   /*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "48.0.1",
+  "version": "49.0.0",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -36,8 +36,8 @@
     "build:storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider build-storybook --docs -o dist",
     "build:types": "tcm -p /**/*.module.css",
     "build:themes": "yarn build:themes:esm && yarn build:themes:cjs",
-    "build:themes:esm": "tsc --module ES2020 --outDir build/themes/esm && tsc --module ES2020 --outDir themes",
-    "build:themes:cjs": "tsc --module CommonJS --outDir build/themes/cjs && tsc --module CommonJS",
+    "build:themes:esm": "tsc -p tsconfig.themes.json --module ES2020 --outDir build/themes/esm && tsc -p tsconfig.themes.json --module ES2020 --outDir themes",
+    "build:themes:cjs": "tsc -p tsconfig.themes.json --module CommonJS --outDir build/themes/cjs && tsc -p tsconfig.themes.json --module CommonJS",
     "prepare": "yarn run build"
   },
   "devDependencies": {
@@ -69,5 +69,5 @@
   "dependencies": {
     "@danske/sapphire-design-tokens": "^42.2.1"
   },
-  "gitHead": "62297801a42339d31b5099ad337f29fc5ebd7391"
+  "gitHead": "95e11ee77650ba6158811bcc5969bc7c7aaab530"
 }