@navikt/ds-css 8.9.0 → 8.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "8.9.0",
+  "version": "8.9.1",
   "description": "CSS for Nav Designsystem",
   "author": "Aksel | Nav designsystem team",
   "keywords": [
@@ -30,7 +30,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^8.9.0",
+    "@navikt/ds-tokens": "^8.9.1",
     "browserslist": "^4.25.0",
     "esbuild": "^0.27.4",
     "fast-glob": "3.3.3",

package/src/button.css

@@ -44,7 +44,9 @@
     background-color: transparent;
     color: var(--ax-text-subtle);
 
-    &[data-color="neutral"] {
+    &[data-color="neutral"],
+    [data-color="neutral"] > &:not([data-color]),
+    [data-color="neutral"] :not([data-color]) &:not([data-color]) {
       color: var(--ax-text-default);
     }
 
@@ -62,7 +64,8 @@
       color: var(--ax-text-subtle);
       background-color: transparent;
 
-      &[data-color="neutral"] {
+      &[data-color="neutral"],
+      [data-color="neutral"] > &:not([data-color]) {
         color: var(--ax-text-default);
       }
     }
@@ -72,7 +75,9 @@
     background-color: transparent;
     color: var(--ax-text-subtle);
 
-    &[data-color="neutral"] {
+    &[data-color="neutral"],
+    [data-color="neutral"] > &:not([data-color], [data-pressed="true"]),
+    [data-color="neutral"] :not([data-color]) &:not([data-color], [data-pressed="true"]) {
       color: var(--ax-text-default);
     }
 
@@ -93,7 +98,8 @@
       color: var(--ax-text-subtle);
       background-color: transparent;
 
-      &[data-color="neutral"] {
+      &[data-color="neutral"],
+      [data-color="neutral"] > &:not([data-color]) {
         color: var(--ax-text-default);
       }
     }

package/src/data-table.css

@@ -50,7 +50,7 @@
   }
 
   &[data-truncate-content="true"] {
-    .aksel-data-table__td > div {
+    .aksel-data-table__td:not(.aksel-data-table--UNSAFE_isSelection) > div {
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
@@ -306,7 +306,7 @@
   vertical-align: middle;
   color: var(--ax-text-neutral-subtle);
 
-  > div {
+  &:not(.aksel-data-table--UNSAFE_isSelection) > div {
     padding-block: var(--__axc-data-table-density);
     padding-inline: 1rem;
   }
@@ -323,6 +323,11 @@
     outline: 2px solid var(--ax-border-focus);
     outline-offset: -4px;
   }
+
+  &.aksel-data-table--UNSAFE_isSelection > div {
+    display: grid;
+    place-content: center;
+  }
 }
 
 .aksel-data-table__tfoot {

package/src/data-token-filter.css

@@ -1,3 +1,8 @@
+/* .aksel-property-filter {
+  flex: 1 1 fit-content;
+  max-inline-size: 100%;
+} */
+
 .aksel-property-filter__popup {
   overflow: hidden;
   border-radius: var(--ax-radius-8);
@@ -29,3 +34,72 @@
   /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   max-height: calc(var(--__axc-floating-available-height) - 4px);
 }
+
+.aksel-property-filter__input {
+  max-inline-size: 640px;
+}
+
+.aksel-property-filter__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ax-space-8);
+  margin: 0;
+  margin-block-start: var(--ax-space-12);
+  padding: 0;
+  font-size: var(--ax-font-size-medium);
+}
+
+.aksel-property-filter__chip {
+  display: flex;
+  gap: var(--ax-space-1);
+}
+
+.aksel-property-filter__chip-button {
+  display: flex;
+  align-items: center;
+  gap: var(--ax-space-4);
+  padding: var(--ax-space-4) var(--ax-space-8);
+  background-color: var(--ax-bg-strong);
+  color: var(--ax-text-contrast);
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--ax-bg-strong-hover);
+  }
+
+  &:active {
+    background-color: var(--ax-bg-strong-pressed);
+  }
+
+  &:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 2px;
+    z-index: 1;
+  }
+
+  &:first-of-type {
+    border-start-start-radius: var(--ax-radius-8);
+    border-end-start-radius: var(--ax-radius-8);
+  }
+
+  &:last-child {
+    border-start-end-radius: var(--ax-radius-8);
+    border-end-end-radius: var(--ax-radius-8);
+  }
+
+  &[data-type="operation"] {
+    /* background-color: var(--ax-bg-default);
+    box-shadow: inset 0 0 0 1px var(--ax-bg-strong);
+    color: var(--ax-text-default); */
+    color: var(--ax-text-neutral);
+    background-color: var(--ax-bg-neutral-moderate-pressed);
+  }
+
+  /* &[data-type="value"] {
+  } */
+
+  &[data-type="remove"] {
+    padding-inline: var(--ax-space-4);
+  }
+}

package/src/data-toolbar.css

@@ -1,9 +1,8 @@
 .aksel-data-toolbar {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
+  align-items: flex-end;
   gap: var(--ax-space-8);
-  grid-template-columns: 1fr 1fr;
 }
 
 .aksel-data-toolbar__actions {
@@ -19,8 +18,8 @@
 }
 
 .aksel-data-toolbar__input {
-  max-inline-size: 600px;
-  width: 100%;
+  flex: 1 1 fit-content;
+  max-inline-size: 100%;
 }
 
 .aksel-data-toolbar__pagination {

package/src/date.css

@@ -224,6 +224,7 @@
 
   border-start-start-radius: 0;
   border-end-start-radius: 0;
+  position: relative;
 
   &:focus-visible {
     outline: 3px solid var(--ax-border-focus);
@@ -256,6 +257,16 @@
     background-color: var(--ax-bg-neutral-moderate);
     color: var(--ax-text-neutral-subtle);
   }
+
+  /* Syncs button-bg with input while respecting hover/active states */
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background-color: var(--ax-bg-input);
+    z-index: -1;
+  }
 }
 
 .aksel-date__field-wrapper {
@@ -263,6 +274,9 @@
   width: fit-content;
   border-radius: var(--ax-radius-8);
 
+  /* Initializes stacking context to allow z-index: -1 on button to work. */
+  z-index: 0;
+
   &:has(.aksel-date__field-input:focus-visible) {
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;

package/src/form/fieldset.css

@@ -18,7 +18,8 @@
 }
 
 /* Applied when hideLegend is applied to fieldset */
-.aksel-fieldset > .aksel-sr-only + :not(:first-child, :empty) {
+.aksel-fieldset > .aksel-sr-only + :not(:first-child, :empty),
+.aksel-fieldset > .aksel-typo--visually-hidden + :not(:first-child, :empty) {
   margin-top: 0;
 }
 

package/src/form/radio-checkbox.css

@@ -1,8 +1,5 @@
 .aksel-checkbox,
 .aksel-radio {
-  --__axc-radio-checkbox-marker-size: 1.5rem;
-  --__axc-radio-checkbox-marker-target: 2.75rem; /* We want the click area to be a bit larger than the visible radio/checkbox */
-
   position: relative;
   width: fit-content;
   display: grid;
@@ -25,9 +22,6 @@
 /* Small */
 .aksel-checkbox--small,
 .aksel-radio--small {
-  --__axc-radio-checkbox-marker-size: 1.25rem;
-  --__axc-radio-checkbox-marker-target: 2rem;
-
   padding: var(--ax-space-6) 0;
 
   /* Focus outline */
@@ -58,8 +52,29 @@
 
 /* Checkbox has a wrapper around input and checkmark svg (consider creating the checkmark with css in the future) */
 .aksel-checkbox__input-wrapper {
+  --__axc-radio-checkbox-marker-size: 1.5rem;
+  --__axc-radio-checkbox-marker-target: 2.75rem; /* We want the click area to be a bit larger than the visible radio/checkbox */
+
   position: relative;
   height: var(--__axc-radio-checkbox-marker-size);
+
+  .aksel-checkbox--small & {
+    --__axc-radio-checkbox-marker-size: 1.25rem;
+    --__axc-radio-checkbox-marker-target: 2rem;
+  }
+
+  &[data-standalone="true"] {
+    margin: calc(calc(var(--__axc-radio-checkbox-marker-target) - var(--__axc-radio-checkbox-marker-size)) / 2);
+  }
+
+  &[data-standalone="true"] > .aksel-checkbox__input:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
+
+  &[data-compact="true"] {
+    --__axc-radio-checkbox-marker-target: 2rem;
+  }
 }
 
 /* The input acts as a container for the marker (since the click area should be larger than the visible marker) */
@@ -93,9 +108,30 @@
   );
 }
 
-/* Radio marker should be round */
+/* Radio marker */
 .aksel-radio__input {
+  --__axc-radio-checkbox-marker-size: 1.5rem;
+  --__axc-radio-checkbox-marker-target: 2.75rem; /* We want the click area to be a bit larger than the visible radio/checkbox */
+
+  .aksel-radio--small & {
+    --__axc-radio-checkbox-marker-size: 1.25rem;
+    --__axc-radio-checkbox-marker-target: 2rem;
+  }
+
   border-radius: var(--ax-radius-full);
+
+  &[data-standalone="true"] {
+    margin: calc(calc(var(--__axc-radio-checkbox-marker-target) - var(--__axc-radio-checkbox-marker-size)) / 2);
+
+    &:focus-visible {
+      outline: 3px solid var(--ax-border-focus);
+      outline-offset: 3px;
+    }
+  }
+
+  &[data-compact="true"] {
+    --__axc-radio-checkbox-marker-target: 2rem;
+  }
 }
 
 /* Checkbox indeterminate: Center the icon */