@danske/sapphire-css 42.1.0 → 43.0.0

package/components/breadcrumbs/breadcrumbs.module.css

@@ -0,0 +1,50 @@
+.sapphire-breadcrumbs {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+}
+
+.sapphire-breadcrumbs .sapphire-breadcrumbs__item {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  white-space: nowrap;
+}
+
+.sapphire-breadcrumbs__item * {
+  max-width: var(--sapphire-global-size-generic-480);
+}
+
+.sapphire-breadcrumbs .sapphire-breadcrumbs__item:last-child {
+  padding: 0 var(--sapphire-semantic-size-spacing-lg);
+}
+
+.sapphire-breadcrumbs.sapphire-breadcrumbs--sm
+  .sapphire-breadcrumbs__item:last-child {
+  padding: 0
+    calc(
+      var(--sapphire-semantic-size-spacing-xs) +
+        var(--sapphire-semantic-size-spacing-2xs)
+    );
+}
+
+.sapphire-breadcrumbs.sapphire-breadcrumbs--lg
+  .sapphire-breadcrumbs__item:last-child {
+  padding: 0
+    calc(
+      var(--sapphire-semantic-size-spacing-xs) +
+        var(--sapphire-semantic-size-spacing-md)
+    );
+}
+
+/**
+ * Breadcrumb separator
+ */
+.sapphire-breadcrumbs__separator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--sapphire-semantic-color-foreground-primary);
+  padding: 0 var(--sapphire-semantic-size-spacing-xs);
+}

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

@@ -0,0 +1,9 @@
+declare const styles: {
+  readonly "sapphire-breadcrumbs": string;
+  readonly "sapphire-breadcrumbs__item": string;
+  readonly "sapphire-breadcrumbs--sm": string;
+  readonly "sapphire-breadcrumbs--lg": string;
+  readonly "sapphire-breadcrumbs__separator": string;
+};
+export = styles;
+

package/components/checkbox/checkbox.module.css

@@ -287,7 +287,7 @@
   cursor: not-allowed;
 }
 
-.sapphire-checkbox.is-disabled .sapphire-checkbox__box,
-.sapphire-checkbox.is-disabled .sapphire-checkbox__label {
+.sapphire-checkbox.is-disabled,
+.sapphire-checkbox:has(:disabled) {
   opacity: var(--sapphire-semantic-opacity-disabled);
 }

package/components/dateField/dateField.module.css

@@ -107,6 +107,14 @@
   font-size: var(--sapphire-semantic-size-font-control-md);
 }
 
+/**
+ * Disabled
+ */
+.sapphire-date-field.is-disabled {
+  cursor: not-allowed;
+  opacity: var(--sapphire-semantic-opacity-disabled);
+}
+
 /**
  * Editable segments
  */

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

@@ -7,8 +7,8 @@ declare const styles: {
   readonly "sapphire-date-field__input": string;
   readonly "sapphire-date-field__range-separator": string;
   readonly "sapphire-date-field--md": string;
-  readonly "sapphire-date-field__segment": string;
   readonly "is-disabled": string;
+  readonly "sapphire-date-field__segment": string;
   readonly "is-focus": string;
   readonly "sapphire-date-field__segment--filled": string;
   readonly "sapphire-date-field__segment--separator": string;

package/components/dialog/dialog.module.css

@@ -19,8 +19,8 @@
 }
 
 .sapphire-dialog {
-  border-radius: var(--sapphire-semantic-size-radius-lg);
-  background: var(--sapphire-semantic-color-background-surface);
+  border-radius: var(--sapphire-semantic-size-radius-2xl);
+  background: var(--sapphire-semantic-color-background-popover);
   font-family: var(--sapphire-semantic-font-name-default);
   color: var(--sapphire-semantic-color-foreground-primary);
   box-sizing: border-box;

package/components/modalLayout/modalLayout.module.css

@@ -14,9 +14,12 @@
 .sapphire-modal-layout__header {
   display: flex;
   justify-content: space-between;
-  padding: var(--sapphire-semantic-size-spacing-lg)
-    var(--sapphire-semantic-size-spacing-container-horizontal-md);
+  padding: var(--sapphire-semantic-size-spacing-xl)
+    var(--sapphire-semantic-size-spacing-xl)
+    var(--sapphire-semantic-size-spacing-xl)
+    var(--sapphire-semantic-size-spacing-2xl);
   gap: var(--sapphire-semantic-size-spacing-sm);
+  min-height: var(--sapphire-semantic-size-height-control-md);
 }
 
 .sapphire-modal-layout__body {
@@ -41,10 +44,11 @@
     var(--sapphire-semantic-size-spacing-container-horizontal-md);
 }
 
-/** Container for heading and subheading **/
+/**
+ * Container for heading and subheading
+ **/
 .sapphire-modal-layout__heading-container {
   flex: 1;
-  padding: var(--sapphire-semantic-size-spacing-3xs) 0;
   display: flex;
   flex-direction: column;
   justify-content: center;

package/components/panel/panel.module.css

@@ -9,7 +9,7 @@
     var(--sapphire-semantic-transitions-standard);
   transform: translateX(100%);
   width: var(--sapphire-semantic-size-width-panel-lg);
-  background: var(--sapphire-semantic-color-background-surface);
+  background: var(--sapphire-semantic-color-background-popover);
 }
 
 .sapphire-panel--visible {

package/components/radio/radio.module.css

@@ -159,11 +159,7 @@
   cursor: not-allowed;
 }
 
-.sapphire-radio:not(.sapphire-radio--no-disabled)
-  .sapphire-radio__input:disabled
-  ~ .sapphire-radio__box,
-.sapphire-radio:not(.sapphire-radio--no-disabled)
-  .sapphire-radio__input:disabled
-  ~ .sapphire-radio__label {
+.sapphire-radio .sapphire-radio__input:disabled ~ .sapphire-radio__box,
+.sapphire-radio .sapphire-radio__input:disabled ~ .sapphire-radio__label {
   opacity: var(--sapphire-semantic-opacity-disabled);
 }

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

@@ -10,7 +10,6 @@ declare const styles: {
   readonly "js-hover": string;
   readonly "is-focus": string;
   readonly "js-focus": string;
-  readonly "sapphire-radio--no-disabled": string;
 };
 export = styles;
 

package/components/select/select.module.css

@@ -160,4 +160,5 @@
 
 .sapphire-select.is-disabled .sapphire-select__button {
   cursor: not-allowed;
+  opacity: var(--sapphire-semantic-opacity-disabled);
 }

package/components/table/table.module.css

@@ -463,7 +463,6 @@ th.sapphire-table__selectionCell:first-child {
 .sapphire-table__footer {
   position: relative;
   z-index: 2; /* Setting to two because body rows are positioned relative */
-  margin-top: var(--sapphire-semantic-size-spacing-2xs);
 }
 
 .sapphire-table__footer--sticky {

package/components/textField/textField.module.css

@@ -194,6 +194,14 @@
     var(--sapphire-semantic-color-border-negative-default);
 }
 
+/**
+ * Disabled
+ */
+.sapphire-text-field:has([disabled]) {
+  cursor: not-allowed;
+  opacity: var(--sapphire-semantic-opacity-disabled);
+}
+
 /**
  * Hover
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "42.1.0",
+  "version": "43.0.0",
   "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
   "license": "SEE LICENSE IN LICENSE",
   "sideEffects": false,
@@ -67,7 +67,7 @@
     "typescript": "~4.6.4"
   },
   "dependencies": {
-    "@danske/sapphire-design-tokens": "^42.2.0"
+    "@danske/sapphire-design-tokens": "^42.2.1"
   },
-  "gitHead": "1eefb683b16687ab3fc99c15fffb03a3eca522c5"
+  "gitHead": "5447ed85a23a82d6d7339a1617296a648256ea3e"
 }