@norges-domstoler/dds-components 23.0.1 → 23.1.0

package/dist/index.css

@@ -704,6 +704,14 @@
   --dds-r-m-b: var(--dds-r-xs-m-b);
   margin-block: var(--dds-r-m-b, initial);
 }
+.layout_dds-bleed-m-i {
+  --dds-r-bleed-m-i: var(--dds-r-bleed-xs-m-i);
+  margin-inline: var(--dds-r-bleed-m-i, initial);
+}
+.layout_dds-bleed-m-b {
+  --dds-r-bleed-m-b: var(--dds-r-bleed-xs-m-b);
+  margin-block: var(--dds-r-bleed-m-b, initial);
+}
 .layout_dds-h {
   --dds-r-h: var(--dds-r-xs-h);
   height: var(--dds-r-h, initial);
@@ -840,6 +848,12 @@
   .layout_dds-m-b {
     --dds-r-m-b: var(--dds-r-xs-m-b);
   }
+  .layout_dds-bleed-m-i {
+    --dds-r-bleed-m-i: var(--dds-r-bleed-xs-m-i);
+  }
+  .layout_dds-bleed-m-b {
+    --dds-r-bleed-m-b: var(--dds-r-bleed-xs-m-b);
+  }
   .layout_dds-h {
     --dds-r-h: var(--dds-r-xs-h);
   }
@@ -947,6 +961,12 @@
   .layout_dds-m-b {
     --dds-r-m-b: var(--dds-r-sm-m-b);
   }
+  .layout_dds-bleed-m-i {
+    --dds-r-bleed-m-i: var(--dds-r-bleed-sm-m-i);
+  }
+  .layout_dds-bleed-m-b {
+    --dds-r-bleed-m-b: var(--dds-r-bleed-sm-m-b);
+  }
   .layout_dds-h {
     --dds-r-h: var(--dds-r-sm-h);
   }
@@ -1054,6 +1074,12 @@
   .layout_dds-m-b {
     --dds-r-m-b: var(--dds-r-md-m-b);
   }
+  .layout_dds-bleed-m-i {
+    --dds-r-bleed-m-i: var(--dds-r-bleed-md-m-i);
+  }
+  .layout_dds-bleed-m-b {
+    --dds-r-bleed-m-b: var(--dds-r-bleed-md-m-b);
+  }
   .layout_dds-h {
     --dds-r-h: var(--dds-r-md-h);
   }
@@ -1161,6 +1187,12 @@
   .layout_dds-m-b {
     --dds-r-m-b: var(--dds-r-lg-m-b);
   }
+  .layout_dds-bleed-m-i {
+    --dds-r-bleed-m-i: var(--dds-r-bleed-lg-m-i);
+  }
+  .layout_dds-bleed-m-b {
+    --dds-r-bleed-m-b: var(--dds-r-bleed-lg-m-b);
+  }
   .layout_dds-h {
     --dds-r-h: var(--dds-r-lg-h);
   }
@@ -1268,6 +1300,12 @@
   .layout_dds-m-b {
     --dds-r-m-b: var(--dds-r-xl-m-b);
   }
+  .layout_dds-bleed-m-i {
+    --dds-r-bleed-m-i: var(--dds-r-bleed-xl-m-i);
+  }
+  .layout_dds-bleed-m-b {
+    --dds-r-bleed-m-b: var(--dds-r-bleed-xl-m-b);
+  }
   .layout_dds-h {
     --dds-r-h: var(--dds-r-xl-h);
   }
@@ -1865,6 +1903,9 @@
   &.Button_button--is-loading.Button_no-content {
     padding: var(--dds-spacing-x0-25);
   }
+  &.Button_clear {
+    padding: var(--dds-spacing-x0-125);
+  }
 }
 .Button_button--small {
   &.Button_just-text {
@@ -1883,6 +1924,9 @@
   &.Button_button--is-loading.Button_no-content {
     padding: var(--dds-spacing-x0-5);
   }
+  &.Button_clear {
+    padding: var(--dds-spacing-x0-25);
+  }
 }
 .Button_button--medium {
   &.Button_just-text {
@@ -1901,6 +1945,9 @@
   &.Button_button--is-loading.Button_no-content {
     padding: var(--dds-spacing-x0-75);
   }
+  &.Button_clear {
+    padding: var(--dds-spacing-x0-5);
+  }
 }
 .Button_button--large {
   &.Button_just-text {
@@ -1919,6 +1966,9 @@
   &.Button_button--is-loading.Button_no-content {
     padding: var(--dds-spacing-x1);
   }
+  &.Button_clear {
+    padding: var(--dds-spacing-x0-75);
+  }
 }
 .Button_spinner-wrapper--absolute {
   position: absolute;
@@ -2485,36 +2535,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   border-radius: var(--dds-border-radius-rounded);
 }
 
-/* src/components/Chip/Chip.module.css */
-.Chip_container {
-  border: 1px solid var(--dds-color-border-subtle);
-  border-radius: var(--dds-border-radius-chip);
-  background-color: var(--dds-color-surface-subtle);
-}
-
-/* src/components/helpers/InlineIconButton/InlineIconButton.module.css */
-.InlineIconButton_button {
-  display: inline-flex;
-  border-radius: var(--dds-border-radius-button);
-  color: var(--dds-color-icon-default);
-  &:hover:not(:disabled) {
-    background-color: var(--dds-color-surface-hover-default);
-    color: var(--dds-color-icon-action-hover);
-  }
-  &:not(:focus-visible) {
-    outline: none;
-  }
-  &:disabled {
-    cursor: not-allowed;
-  }
-  @media (prefers-reduced-motion: no-preference) {
-    transition:
-      background-color var(--dds-motion-micro-state),
-      color var(--dds-motion-micro-state),
-      var(--dds-focus-transition);
-  }
-}
-
 /* src/components/CookieBanner/CookieBanner.module.css */
 .CookieBanner_container:focus-visible {
   outline: none;
@@ -2645,6 +2665,29 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   text-decoration: underline line-through;
 }
 
+/* src/components/helpers/InlineIconButton/InlineIconButton.module.css */
+.InlineIconButton_button {
+  display: inline-flex;
+  border-radius: var(--dds-border-radius-button);
+  color: var(--dds-color-icon-default);
+  &:hover:not(:disabled) {
+    background-color: var(--dds-color-surface-hover-default);
+    color: var(--dds-color-icon-action-hover);
+  }
+  &:not(:focus-visible) {
+    outline: none;
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      background-color var(--dds-motion-micro-state),
+      color var(--dds-motion-micro-state),
+      var(--dds-focus-transition);
+  }
+}
+
 /* src/components/helpers/Input/Input.module.css */
 .Input_container {
   position: relative;
@@ -2655,10 +2698,18 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   --dds-input-absolute-el-left-small: var(--dds-spacing-x0-5);
   --dds-input-absolute-el-left-medium: var(--dds-spacing-x0-75);
   --dds-input-absolute-el-left-large: var(--dds-spacing-x0-75);
+  --dds-input-btn-right: var(--dds-spacing-x0-25);
+  --dds-input-btn-right-padding-xsmall: var(--dds-spacing-x0-125);
+  --dds-input-btn-right-padding-small: var(--dds-spacing-x0-25);
+  --dds-input-btn-right-padding-medium: var(--dds-spacing-x0-5);
+  --dds-input-btn-right-padding-large: var(--dds-spacing-x0-75);
   --dds-input-absolute-el-right-xsmall: var(--dds-spacing-x0-25);
   --dds-input-absolute-el-right-small: var(--dds-spacing-x0-5);
   --dds-input-absolute-el-right-medium: var(--dds-spacing-x0-75);
   --dds-input-absolute-el-right-large: var(--dds-spacing-x0-75);
+  & > svg {
+    pointer-events: none;
+  }
 }
 :where(.Input_input) {
   position: relative;
@@ -2763,42 +2814,81 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 :where(.Input_input--xsmall) {
   padding: var(--dds-spacing-x0-25);
 }
-.Input_input-with-icon--large {
+:where(.Input_input-with-icon--large) {
   padding-left: calc(var(--dds-input-absolute-el-left-large) + var(--dds-size-icon-component) + var(--dds-spacing-lg-icon-text-gap));
 }
-.Input_input-with-icon--medium {
+:where(.Input_input-with-icon--medium) {
   padding-left: calc(var(--dds-input-absolute-el-left-medium) + var(--dds-size-icon-component) + var(--dds-spacing-md-icon-text-gap));
 }
-.Input_input-with-icon--small {
+:where(.Input_input-with-icon--small) {
   padding-left: calc(var(--dds-input-absolute-el-left-small) + var(--dds-size-icon-component) + var(--dds-spacing-sm-icon-text-gap));
 }
-.Input_input-with-icon--xsmall {
+:where(.Input_input-with-icon--xsmall) {
   padding-left: calc(var(--dds-input-absolute-el-left-xsmall) + var(--dds-size-icon-component) + var(--dds-spacing-xs-icon-text-gap));
 }
-.Input_input-with-el-right--large {
-  padding-inline-end: calc(var(--dds-input-absolute-el-right-large) + var(--dds-size-icon-component) + var(--dds-spacing-lg-icon-text-gap));
+:where(.Input_input-with-el-right--large) {
+  padding-inline-end: calc(var(--dds-input-absolute-el-right-large) + var(--dds-size-icon-component));
+}
+:where(.Input_input-with-el-right--medium) {
+  padding-inline-end: calc(var(--dds-input-absolute-el-right-medium) + var(--dds-size-icon-component));
+}
+:where(.Input_input-with-el-right--small) {
+  padding-inline-end: calc(var(--dds-input-absolute-el-right-small) + var(--dds-size-icon-component));
+}
+:where(.Input_input-with-el-right--xsmall) {
+  padding-inline-end: calc(var(--dds-input-absolute-el-right-xsmall) + var(--dds-size-icon-component));
+}
+:where(.Input_input-with-btn-right--large) {
+  padding-inline-end: calc(var(--dds-input-btn-right) + var(--dds-size-icon-component) + 2 * var(--dds-input-btn-right-padding-large));
+}
+:where(.Input_input-with-btn-right--medium) {
+  padding-inline-end: calc(var(--dds-input-btn-right) + var(--dds-size-icon-component) + 2 * var(--dds-input-btn-right-padding-medium));
 }
-.Input_input-with-el-right--medium {
-  padding-inline-end: calc(var(--dds-input-absolute-el-right-medium) + var(--dds-size-icon-component) + var(--dds-spacing-md-icon-text-gap));
+:where(.Input_input-with-btn-right--small) {
+  padding-inline-end: calc(var(--dds-input-btn-right) + var(--dds-size-icon-component) + 2 * var(--dds-input-btn-right-padding-small));
 }
-.Input_input-with-el-right--small {
-  padding-inline-end: calc(var(--dds-input-absolute-el-right-small) + var(--dds-size-icon-component) + var(--dds-spacing-sm-icon-text-gap));
+:where(.Input_input-with-btn-right--xsmall) {
+  padding-inline-end: calc(var(--dds-input-btn-right) + var(--dds-size-icon-component) + 2 * var(--dds-input-btn-right-padding-xsmall));
 }
-.Input_input-with-el-right--xsmall {
-  padding-inline-end: calc(var(--dds-input-absolute-el-right-xsmall) + var(--dds-size-icon-component) + var(--dds-spacing-xs-icon-text-gap));
+:where(.Input_input-with-icon-and-button-right--large) {
+  padding-inline-end: calc(var(--dds-input-absolute-el-right-large) + 2 * var(--dds-size-icon-component) + 2 * var(--dds-input-btn-right-padding-large));
 }
-.Input_input-group__absolute-el-right--large {
+:where(.Input_input-with-icon-and-button-right--medium) {
+  padding-inline-end: calc(var(--dds-input-absolute-el-right-medium) + 2 * var(--dds-size-icon-component) + 2 * var(--dds-input-btn-right-padding-medium));
+}
+:where(.Input_input-with-icon-and-button-right--small) {
+  padding-inline-end: calc(var(--dds-input-absolute-el-right-small) + 2 * var(--dds-size-icon-component) + 2 * var(--dds-input-btn-right-padding-small));
+}
+:where(.Input_input-with-icon-and-button-right--xsmall) {
+  padding-inline-end: calc(var(--dds-input-absolute-el-right-xsmall) + 2 * var(--dds-size-icon-component) + 2 * var(--dds-input-btn-right-padding-xsmall));
+}
+:where(.Input_input-group__absolute-el-right--large) {
   right: var(--dds-input-absolute-el-left-large);
 }
-.Input_input-group__absolute-el-right--medium {
+:where(.Input_input-group__absolute-el-right--medium) {
   right: var(--dds-input-absolute-el-left-medium);
 }
-.Input_input-group__absolute-el-right--small {
+:where(.Input_input-group__absolute-el-right--small) {
   right: var(--dds-input-absolute-el-left-small);
 }
-.Input_input-group__absolute-el-right--xsmall {
+:where(.Input_input-group__absolute-el-right--xsmall) {
   right: var(--dds-input-absolute-el-left-xsmall);
 }
+:where(.Input_input-group__btn-right) {
+  right: var(--dds-input-btn-right);
+}
+:where(.Input_input-group__btn-right-with-right-icon--xsmall) {
+  right: calc(var(--dds-input-absolute-el-right-xsmall) + var(--dds-size-icon-component));
+}
+:where(.Input_input-group__btn-right-with-right-icon--small) {
+  right: calc(var(--dds-input-absolute-el-right-small) + var(--dds-size-icon-component));
+}
+:where(.Input_input-group__btn-right-with-right-icon--medium) {
+  right: calc(var(--dds-input-absolute-el-right-medium) + var(--dds-size-icon-component));
+}
+:where(.Input_input-group__btn-right-with-right-icon--large) {
+  right: calc(var(--dds-input-absolute-el-right-large) + var(--dds-size-icon-component));
+}
 :where(.Input_input--with-affix) {
   gap: var(--dds-spacing-x1);
 }
@@ -3438,7 +3528,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 /* src/components/InlineEdit/InlineEdit.module.css */
 .InlineEdit_inline-input {
   width: 100%;
-  padding: var(--dds-spacing-x0-25);
   border-width: 1px;
   border-color: transparent;
   background-color: transparent;
@@ -3458,13 +3547,8 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   -moz-appearance: none;
   appearance: none;
   text-overflow: ellipsis;
-  width: 100%;
-  padding-right: var(--dds-spacing-x1-5);
   cursor: pointer;
 }
-.InlineEdit_inline-select--with-clear-button {
-  padding-right: var(--dds-spacing-x3);
-}
 .InlineEdit_inline-input:hover:enabled:-moz-read-write:not(:focus) {
   border-color: transparent;
   box-shadow: none;
@@ -3480,25 +3564,13 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   border-color: var(--dds-color-border-danger);
   box-shadow: 0 0 0 1px var(--dds-color-border-danger);
 }
-.InlineEdit_inline-input--with-icon {
-  padding-left: var(--dds-spacing-x2);
-}
 .InlineEdit_inline-textarea {
   resize: vertical;
 }
-.InlineEdit_edit-icon {
-  left: var(--dds-spacing-x0-5);
-  pointer-events: none;
-  z-index: var(--dds-zindex-absolute-element);
-}
 .InlineEdit_edit-icon-textarea {
   position: absolute;
   top: var(--dds-spacing-x0-25);
 }
-.InlineEdit_chevron {
-  right: var(--dds-spacing-x0-25);
-  pointer-events: none;
-}
 .InlineEdit_clear-button {
   right: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-small));
 }
@@ -3766,43 +3838,12 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
     color: var(--dds-color-icon-subtle);
   }
 }
-.NativeSelect_select--xsmall {
-  padding-right: calc(var(--dds-spacing-x0-25) + var(--dds-size-icon-component));
-}
-.NativeSelect_select--small {
-  padding-right: calc(var(--dds-spacing-x0-5) + var(--dds-size-icon-component));
-}
-.NativeSelect_select--medium {
-  padding-right: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component));
-}
 .NativeSelect_select--multiple {
   padding-right: 0;
   &.NativeSelect_select--readonly option {
     background-color: var(--dds-color-surface-field-disabled);
   }
 }
-.NativeSelect_select--with-clear-button-medium {
-  padding-right: calc(var(--dds-spacing-x0-75) + 2 * var(--dds-size-icon-component));
-}
-.NativeSelect_select--with-clear-button-small {
-  padding-right: calc(var(--dds-spacing-x0-5) + 2 * var(--dds-size-icon-component));
-}
-.NativeSelect_select--with-clear-button-xsmall {
-  padding-right: calc(var(--dds-spacing-x0-25) + 2 * var(--dds-size-icon-component));
-}
-.NativeSelect_icon {
-  align-self: center;
-  pointer-events: none;
-}
-.NativeSelect_clear-button--xsmall {
-  right: calc(var(--dds-spacing-x0-25) + var(--dds-size-icon-component));
-}
-.NativeSelect_clear-button--small {
-  right: calc(var(--dds-spacing-x0-5) + var(--dds-size-icon-component));
-}
-.NativeSelect_clear-button--medium {
-  right: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component));
-}
 
 /* src/components/PhoneInput/PhoneInput.module.css */
 .PhoneInput_inputs-container {