@danske/sapphire-css 49.1.0 → 50.1.0

package/components/amount/amount.module.css

@@ -0,0 +1,6 @@
+.sapphire-amount {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: baseline;
+  gap: var(--sapphire-semantic-size-spacing-3xs);
+}

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

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

package/components/button/button.module.css

@@ -80,6 +80,11 @@
   flex-grow: 1;
 }
 
+.sapphire-button--stretch:not(:has(.sapphire-button__icon)),
+.sapphire-button--stretch-left-align:not(:has(.sapphire-button__icon)) {
+  padding: 0 var(--sapphire-semantic-size-spacing-xs);
+}
+
 .sapphire-button--stretch-left-align .sapphire-button__content {
   text-align: start;
 }

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

@@ -3,6 +3,7 @@ declare const styles: {
   readonly "sapphire-button__content": string;
   readonly "sapphire-button--stretch": string;
   readonly "sapphire-button--stretch-left-align": string;
+  readonly "sapphire-button__icon": string;
   readonly "is-disabled": string;
   readonly "is-focus": string;
   readonly "js-focus": string;
@@ -21,7 +22,6 @@ declare const styles: {
   readonly "sapphire-button--danger-text": string;
   readonly "sapphire-button--selected": string;
   readonly "sapphire-button--unselected": string;
-  readonly "sapphire-button__icon": string;
   readonly "sapphire-button--lg": string;
   readonly "sapphire-button--sm": string;
 };

package/components/buttonGroup/buttonGroup.module.css

@@ -56,6 +56,10 @@
   width: auto !important;
 }
 
+.sapphire-button-group--stretch.sapphire-button-group--vertical > * {
+  width: auto !important;
+}
+
 .sapphire-button-group--stretch.sapphire-button-group--stretch-auto-vertical.sapphire-button-group:has(
     > *:nth-child(3)
   ) {

package/components/select/select.module.css

@@ -73,6 +73,7 @@
   line-height: 0;
   width: var(--sapphire-semantic-size-icon-md);
   height: var(--sapphire-semantic-size-icon-md);
+  color: var(--sapphire-semantic-color-foreground-secondary);
 }
 
 .sapphire-select--md .sapphire-select__icon-container {
@@ -145,6 +146,12 @@
     var(--sapphire-semantic-color-border-field-hover);
 }
 
+.sapphire-select:not(.is-disabled).is-hover .sapphire-select__icon-container,
+.sapphire-select:not(.is-disabled):not(.js-hover):hover
+  .sapphire-select__icon-container {
+  color: var(--sapphire-semantic-color-foreground-primary);
+}
+
 /**
  * Focus
  */
@@ -162,3 +169,10 @@
   cursor: not-allowed;
   opacity: var(--sapphire-semantic-opacity-disabled);
 }
+
+/**
+* Open state
+*/
+.sapphire-select--open .sapphire-select__icon-container {
+  color: var(--sapphire-semantic-color-foreground-primary);
+}

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

@@ -13,6 +13,7 @@ declare const styles: {
   readonly "is-focus": string;
   readonly "is-hover": string;
   readonly "js-hover": string;
+  readonly "sapphire-select--open": string;
 };
 export = styles;
 

package/components/textField/textField.module.css

@@ -162,8 +162,7 @@
   );
 }
 
-.sapphire-text-field--md
-  .sapphire-text-field--multiline
+.sapphire-text-field--md.sapphire-text-field--multiline
   .sapphire-text-field__input {
   padding: var(--sapphire-semantic-size-spacing-control-vertical-md)
     var(--sapphire-semantic-size-spacing-control-horizontal-md);
@@ -180,6 +179,15 @@
   resize: vertical;
 }
 
+.sapphire-text-field--multiline.sapphire-text-field--resizable
+  .sapphire-text-field__input::-webkit-resizer {
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.81501 0.184985C8.06166 0.431632 8.06166 0.831526 7.81501 1.07817L1.07817 7.81501C0.831526 8.06166 0.431632 8.06166 0.184985 7.81501C-0.0616617 7.56837 -0.0616617 7.16847 0.184985 6.92183L6.92183 0.184985C7.16847 -0.0616617 7.56837 -0.0616617 7.81501 0.184985ZM7.81501 4.39551C8.06166 4.64216 8.06166 5.04205 7.81501 5.2887L5.2887 7.81501C5.04205 8.06166 4.64216 8.06166 4.39551 7.81501C4.14886 7.56837 4.14886 7.16847 4.39551 6.92183L6.92183 4.39551C7.16847 4.14886 7.56837 4.14886 7.81501 4.39551Z' fill='%23002346' fill-opacity='0.64'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--sapphire-semantic-size-spacing-3xs) bottom
+    var(--sapphire-semantic-size-spacing-3xs);
+}
+
 .sapphire-text-field__counter {
   color: var(--sapphire-semantic-color-foreground-secondary);
   margin-left: auto;
@@ -197,7 +205,8 @@
 /**
  * Disabled
  */
-.sapphire-text-field:has([disabled]) {
+.sapphire-text-field:has(input[disabled]),
+.sapphire-text-field:has(textarea[disabled]) {
   cursor: not-allowed;
   opacity: var(--sapphire-semantic-opacity-disabled);
 }
@@ -205,12 +214,14 @@
 /**
  * Hover
  */
-.sapphire-text-field:not(:has([disabled])):not(.sapphire-text-field--error):not(
-    .is-focus
-  ):not(:focus-within).is-hover,
-.sapphire-text-field:not(:has([disabled])):not(.sapphire-text-field--error):not(
-    .is-focus
-  ):not(:focus-within):not(.js-hover):hover {
+.sapphire-text-field:not(:has(input[disabled])):not(
+    :has(textarea[disabled])
+  ):not(.sapphire-text-field--error):not(.is-focus):not(:focus-within).is-hover,
+.sapphire-text-field:not(:has(input[disabled])):not(
+    :has(textarea[disabled])
+  ):not(.sapphire-text-field--error):not(.is-focus):not(:focus-within):not(
+    .js-hover
+  ):hover {
   outline: solid var(--sapphire-semantic-size-border-sm)
     var(--sapphire-semantic-color-border-field-hover);
 }
@@ -255,14 +266,14 @@
  */
 .sapphire-text-field__stepper {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   justify-items: stretch;
-  padding: var(--sapphire-semantic-size-spacing-4xs)
+  padding: var(--sapphire-semantic-size-spacing-sm)
     calc(
-      var(--sapphire-semantic-size-spacing-4xs) +
+      var(--sapphire-semantic-size-spacing-sm) +
         var(--sapphire-semantic-size-border-sm)
     );
-  gap: var(--sapphire-semantic-size-spacing-4xs);
+  gap: var(--sapphire-semantic-size-spacing-sm);
 }
 
 .sapphire-text-field:has(.sapphire-text-field__stepper)
@@ -301,24 +312,20 @@
   cursor: pointer;
 
   /* color */
-  background: var(
-    --sapphire-semantic-color-background-action-secondary-default
-  );
-  color: var(--sapphire-semantic-color-foreground-action-on-secondary-default);
+  background: none;
+  color: var(--sapphire-semantic-color-foreground-secondary);
 }
 
 .sapphire-text-field__stepper-button:not(:active):not(.is-active):not(
     .js-hover
   ):hover,
 .sapphire-text-field__stepper-button:not(:active):not(.is-active).is-hover {
-  background: var(--sapphire-semantic-color-background-action-secondary-hover);
-  color: var(--sapphire-semantic-color-foreground-action-on-secondary-hover);
+  color: var(--sapphire-semantic-color-foreground-primary);
 }
 
 .sapphire-text-field__stepper-button.is-active,
 .sapphire-text-field__stepper-button:active {
-  background: var(--sapphire-semantic-color-background-action-secondary-active);
-  color: var(--sapphire-semantic-color-foreground-action-on-secondary-active);
+  color: var(--sapphire-semantic-color-foreground-primary);
 }
 
 .sapphire-text-field--md.sapphire-text-field__stepper-button {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-css",
-  "version": "49.1.0",
+  "version": "50.1.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.3.0"
+    "@danske/sapphire-design-tokens": "^42.4.0"
   },
-  "gitHead": "88e11202ab17bb9830ba1f261d631ab24edf57d2"
+  "gitHead": "6e7cb3028dc134adc624e161700df8cb3bc3bfb7"
 }