From ee3411e68c13711d0f8bc04d115f0410123b5069 Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Wed, 8 Jan 2025 08:12:51 +0100
Subject: [PATCH 1/4] fix: support hidden attribute

---
 packages/css/src/badge.css       | 5 ++++-
 packages/css/src/breadcrumbs.css | 4 +++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/css/src/badge.css b/packages/css/src/badge.css
index 97325f3ffc..3e52715737 100644
--- a/packages/css/src/badge.css
+++ b/packages/css/src/badge.css
@@ -30,8 +30,11 @@
 }
 
 .ds-badge--position {
+  &:not([hidden]) {
+    display: inline-flex;
+  }
+
   box-sizing: border-box;
-  display: inline-flex;
   position: relative;
   height: fit-content;
   width: fit-content;
diff --git a/packages/css/src/breadcrumbs.css b/packages/css/src/breadcrumbs.css
index bd47f4cc62..548078c21b 100644
--- a/packages/css/src/breadcrumbs.css
+++ b/packages/css/src/breadcrumbs.css
@@ -5,7 +5,9 @@
   --dsc-breadcrumbs-color: var(--ds-color-text-subtle);
 
   & > :is(ol, ul) {
-    display: flex;
+    &:not([hidden]) {
+      display: flex;
+    }
     flex-wrap: wrap;
     list-style-type: none;
     margin: 0;

From aba77ad2ee87c53faa4554c3e3bd198c3dbe57cf Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Wed, 8 Jan 2025 09:31:34 +0100
Subject: [PATCH 2/4] fix: support hidden attribute

---
 packages/css/src/avatar.css      |  5 ++++-
 packages/css/src/badge.css       |  8 ++++----
 packages/css/src/card.css        |  7 +++++--
 packages/css/src/chip.css        |  5 ++++-
 packages/css/src/combobox.css    |  1 -
 packages/css/src/details.css     |  5 ++++-
 packages/css/src/dropdown.css    |  5 ++++-
 packages/css/src/field.css       | 20 ++++++++++++++++----
 packages/css/src/pagination.css  |  5 ++++-
 packages/css/src/popover.css     |  5 ++++-
 packages/css/src/search.css      |  5 ++++-
 packages/css/src/skeleton.css    | 10 ++++++++--
 packages/css/src/skiplink.css    |  5 ++++-
 packages/css/src/table.css       |  5 ++++-
 packages/css/src/tag.css         |  5 ++++-
 packages/css/src/togglegroup.css |  5 ++++-
 16 files changed, 77 insertions(+), 24 deletions(-)

diff --git a/packages/css/src/avatar.css b/packages/css/src/avatar.css
index 872dce7fe4..e69540d73d 100644
--- a/packages/css/src/avatar.css
+++ b/packages/css/src/avatar.css
@@ -11,7 +11,6 @@
   border-radius: var(--dsc-avatar-border-radius);
   box-sizing: border-box;
   color: var(--dsc-avatar-color);
-  display: inline-flex;
   flex-shrink: 0;
   font-weight: var(--ds-font-weight-medium);
   height: var(--dsc-avatar-size);
@@ -22,6 +21,10 @@
   user-select: none;
   width: var(--dsc-avatar-size);
 
+  &:not([hidden]) {
+    display: inline-flex;
+  }
+
   &:not(:has(img)) {
     padding: var(--dsc-avatar-padding);
   }
diff --git a/packages/css/src/badge.css b/packages/css/src/badge.css
index 3e52715737..8fb4abf59e 100644
--- a/packages/css/src/badge.css
+++ b/packages/css/src/badge.css
@@ -30,15 +30,15 @@
 }
 
 .ds-badge--position {
-  &:not([hidden]) {
-    display: inline-flex;
-  }
-
   box-sizing: border-box;
   position: relative;
   height: fit-content;
   width: fit-content;
 
+  &:not([hidden]) {
+    display: inline-flex;
+  }
+
   & .ds-badge::before {
     position: absolute;
   }
diff --git a/packages/css/src/card.css b/packages/css/src/card.css
index 903332ed12..3860907664 100644
--- a/packages/css/src/card.css
+++ b/packages/css/src/card.css
@@ -24,13 +24,16 @@
   border: var(--dsc-card-border);
   box-sizing: border-box;
   color: var(--dsc-card-color);
-  display: block;
   font-family: inherit;
   margin: 0;
   overflow: clip; /* Needed to clip media elements and and Card.Block */
   padding: var(--dsc-card-padding);
   text-align: inherit;
 
+  &:not([hidden]) {
+    display: block;
+  }
+
   &:not([data-size]) {
     font-size: inherit; /* Ensure inheriting font-size when <button> */
   }
@@ -115,7 +118,7 @@
   &:has(> :is(audio, figure, iframe, img, video):only-child) {
     padding: 0;
 
-    & > * {
+    & > :not([hidden]) {
       border: 0;
       display: block;
       height: auto;
diff --git a/packages/css/src/chip.css b/packages/css/src/chip.css
index f15dda49a4..ab96e59bc0 100644
--- a/packages/css/src/chip.css
+++ b/packages/css/src/chip.css
@@ -25,7 +25,6 @@
   box-sizing: border-box;
   color: var(--dsc-chip-color);
   cursor: pointer;
-  display: inline-flex;
   font-family: inherit;
   gap: var(--gap);
   line-height: var(--ds-line-height-sm);
@@ -36,6 +35,10 @@
 
   @composes ds-focus from './base.css';
 
+  &:not([hidden]) {
+    display: inline-flex;
+  }
+
   &:not([data-size]) {
     font-size: var(--ds-font-size-minus-1);
   }
diff --git a/packages/css/src/combobox.css b/packages/css/src/combobox.css
index 2ada981f96..abb72bdf69 100644
--- a/packages/css/src/combobox.css
+++ b/packages/css/src/combobox.css
@@ -1,5 +1,4 @@
 .ds-combobox {
-  display: grid;
   background-color: transparent;
   gap: var(--ds-size-2);
 }
diff --git a/packages/css/src/details.css b/packages/css/src/details.css
index eec669c770..cbb41d768a 100644
--- a/packages/css/src/details.css
+++ b/packages/css/src/details.css
@@ -41,7 +41,6 @@
     background: var(--dsc-details-heading-background);
     box-sizing: border-box;
     cursor: pointer;
-    display: flex;
     list-style: none;
     min-height: var(--dsc-details-size);
     gap: var(--dsc-details-chevron-gap);
@@ -49,6 +48,10 @@
     padding: var(--dsc-details-padding);
     position: relative;
 
+    &:not([hidden]) {
+      display: flex;
+    }
+
     /* Render focus inside so it is easier to make full window width and place in overflow: hidden containers */
     &:focus-visible {
       box-shadow: inset 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-outer);
diff --git a/packages/css/src/dropdown.css b/packages/css/src/dropdown.css
index 0aea2ee018..7cab580cee 100644
--- a/packages/css/src/dropdown.css
+++ b/packages/css/src/dropdown.css
@@ -24,12 +24,15 @@
     align-items: center;
     box-sizing: border-box;
     color: var(--ds-color-neutral-text-subtle);
-    display: flex;
     font-size: inherit;
     font-weight: inherit;
     margin: 0;
     min-height: var(--dsc-dropdown-item-size);
     padding: var(--dsc-dropdown-item-padding);
+
+    &:not([hidden]) {
+      display: flex;
+    }
   }
 
   & > ul {
diff --git a/packages/css/src/field.css b/packages/css/src/field.css
index 89a21c2963..a314aca841 100644
--- a/packages/css/src/field.css
+++ b/packages/css/src/field.css
@@ -1,9 +1,12 @@
 .ds-field {
   align-items: start;
-  display: flex;
   flex-direction: column;
   gap: var(--ds-size-2);
 
+  &:not([hidden]) {
+    display: flex;
+  }
+
   & [data-field='description'] {
     color: var(--ds-color-neutral-text-subtle); /* TODO: Change to opacity or color-mix(currentColor, trasparent) to ensure contrast when parent element color changes? */
   }
@@ -25,12 +28,15 @@
    */
   &:has(input:is([type='radio'], [type='checkbox'])) {
     border-radius: var(--ds-border-radius-md);
-    display: grid;
     grid-template-areas: 'input content';
     grid-template-columns: auto 1fr;
     row-gap: 0;
     width: fit-content; /* Rather do display: grid + width: fit-content than display: inline-grid to encourage stacked radios */
 
+    &:not([hidden]) {
+      display: grid;
+    }
+
     & > * {
       grid-column: content; /* Only allow input in column 1 */
     }
@@ -77,10 +83,13 @@
   border-radius: var(--ds-border-radius-md);
   box-sizing: border-box;
   color: var(--ds-color-neutral-text-subtle);
-  display: inline-flex; /* Using inline-flex to match native inline-block behaviour of <input> */
   max-width: 100%;
   white-space: nowrap;
 
+  &:not([hidden]) {
+    display: inline-flex; /* Using inline-flex to match native inline-block behaviour of <input> */
+  }
+
   &:has([size]) {
     width: fit-content;
   }
@@ -88,10 +97,13 @@
   & .ds-field-affix {
     align-items: center;
     border: var(--dsc-field-affix-border);
-    display: flex;
     flex-shrink: 0;
     padding-inline: var(--dsc-field-affix-padding-inline);
 
+    &:not([hidden]) {
+      display: flex;
+    }
+
     &:first-child {
       border-top-left-radius: inherit;
       border-bottom-left-radius: inherit;
diff --git a/packages/css/src/pagination.css b/packages/css/src/pagination.css
index 401129c1b8..4e11dde38e 100644
--- a/packages/css/src/pagination.css
+++ b/packages/css/src/pagination.css
@@ -5,7 +5,6 @@
   --dsc-pagination-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
 
   & > :is(ol, ul) {
-    display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: var(--dsc-pagination-gap);
@@ -13,6 +12,10 @@
     margin: 0;
     padding: 0;
 
+    &:not([hidden]) {
+      display: flex;
+    }
+
     & > li:first-child > ::before,
     & > li:last-child > ::before {
       content: '';
diff --git a/packages/css/src/popover.css b/packages/css/src/popover.css
index 7dc1b6632e..2cfd0bf105 100644
--- a/packages/css/src/popover.css
+++ b/packages/css/src/popover.css
@@ -59,10 +59,13 @@
 [data-popover='inline'] {
   all: unset;
   cursor: pointer;
-  display: inline;
   text-decoration: underline dotted;
   text-underline-offset: 0.27em;
   font-size: inherit;
 
+  &:not([hidden]) {
+    display: inline;
+  }
+
   @composes ds-focus from './base.css';
 }
diff --git a/packages/css/src/search.css b/packages/css/src/search.css
index c69c81e7f3..a80b25e8c5 100644
--- a/packages/css/src/search.css
+++ b/packages/css/src/search.css
@@ -6,13 +6,16 @@
   --dsc-search-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M10.5 3.25a7.25 7.25 0 1 0 4.57 12.88l5.41 5.41a.75.75 0 1 0 1.06-1.06l-5.41-5.41A7.25 7.25 0 0 0 10.5 3.25M4.75 10.5a5.75 5.75 0 1 1 11.5 0 5.75 5.75 0 0 1-11.5 0'/%3E%3C/svg%3E");
   --dsc-search-icon-size: var(--ds-size-7);
 
-  display: grid;
   align-items: center;
   grid-template-columns: 1fr auto;
   width: 100%;
   border-radius: var(--ds-border-radius-default);
   position: relative;
 
+  &:not([hidden]) {
+    display: grid;
+  }
+
   /* Add magnifier icon when no submit button is present */
   &:not(:has(button:not([type='reset']))) {
     & input {
diff --git a/packages/css/src/skeleton.css b/packages/css/src/skeleton.css
index 9d773cb4df..35e75c60a5 100644
--- a/packages/css/src/skeleton.css
+++ b/packages/css/src/skeleton.css
@@ -6,12 +6,15 @@
   animation: var(--dsc-skeleton-animation);
   border-radius: var(--ds-border-radius-lg);
   box-sizing: border-box;
-  display: block;
   height: 1.3em;
   pointer-events: none;
   user-select: none;
   width: 100%;
 
+  &:not([hidden]) {
+    display: block;
+  }
+
   &[data-variant='circle'] {
     aspect-ratio: 1 / 1;
     border-radius: var(--ds-border-radius-full);
@@ -22,11 +25,14 @@
     border-radius: var(--ds-border-radius-full);
     box-decoration-break: clone;
     color: transparent;
-    display: inline;
     font-size: 0.8em; /* Scale down font to have larger gap between lines */
     letter-spacing: 0.1em; /* But scale up letter-spacing to have circa same line-length */
     user-select: none; /* Prevent text selection */
 
+    &:not([hidden]) {
+      display: inline;
+    }
+
     &:empty::before {
       content: attr(data-text); /* Only fill with fallback text if empty */
       word-break: break-word; /* Enable text wrapping */
diff --git a/packages/css/src/skiplink.css b/packages/css/src/skiplink.css
index 468c689fb7..7f75ea184c 100644
--- a/packages/css/src/skiplink.css
+++ b/packages/css/src/skiplink.css
@@ -7,7 +7,6 @@
 }
 
 .ds-skiplink:focus {
-  display: grid;
   place-items: center;
   outline: 0;
   position: static;
@@ -25,4 +24,8 @@
   text-decoration: underline;
   text-decoration-thickness: max(1px, 0.0625rem);
   text-underline-offset: max(5px, 0.25rem);
+
+  &:not([hidden]) {
+    display: grid;
+  }
 }
diff --git a/packages/css/src/table.css b/packages/css/src/table.css
index c1133d502a..d1049ffc28 100644
--- a/packages/css/src/table.css
+++ b/packages/css/src/table.css
@@ -89,7 +89,6 @@
       box-sizing: border-box;
       color: inherit;
       cursor: pointer;
-      display: block;
       font: inherit;
       padding: var(--dsc-table-padding);
       text-align: inherit;
@@ -97,6 +96,10 @@
 
       @composes ds-focus from './base.css';
 
+      &:not([hidden]) {
+        display: block;
+      }
+
       &:focus-visible {
         position: relative; /* Place on top when painting focus border */
       }
diff --git a/packages/css/src/tag.css b/packages/css/src/tag.css
index 6b781b683b..d81d2e6984 100644
--- a/packages/css/src/tag.css
+++ b/packages/css/src/tag.css
@@ -9,13 +9,16 @@
   border-radius: var(--ds-border-radius-sm);
   box-sizing: border-box;
   color: var(--dsc-tag-color);
-  display: inline-flex;
   line-height: var(--ds-line-height-sm);
   min-height: var(--dsc-tag-min-height);
   padding: var(--dsc-tag-padding);
   width: max-content;
   word-break: break-word;
 
+  &:not([hidden]) {
+    display: inline-flex;
+  }
+
   @media (forced-colors: active) {
     border: 1px solid CanvasText;
   }
diff --git a/packages/css/src/togglegroup.css b/packages/css/src/togglegroup.css
index 6737001e12..5e2cc4fc80 100644
--- a/packages/css/src/togglegroup.css
+++ b/packages/css/src/togglegroup.css
@@ -8,7 +8,6 @@
   background: var(--dsc-togglegroup-background);
   border-radius: calc(var(--dsc-togglegroup-border-radius) + var(--dsc-togglegroup-padding));
   border: var(--dsc-togglegroup-border);
-  display: grid;
   gap: var(--dsc-togglegroup-padding);
   grid-auto-columns: 1fr;
   grid-auto-flow: column;
@@ -16,6 +15,10 @@
   padding: var(--dsc-togglegroup-padding);
   width: fit-content;
 
+  &:not([hidden]) {
+    display: grid;
+  }
+
   button {
     border-radius: var(--dsc-togglegroup-border-radius);
 

From 763b660c614a8cde54ef848c09dd1a994e5be8af Mon Sep 17 00:00:00 2001
From: eirikbacker <eirik.backer@mattilsynet.no>
Date: Wed, 8 Jan 2025 10:09:33 +0100
Subject: [PATCH 3/4] fix: pr

---
 packages/css/src/combobox.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/css/src/combobox.css b/packages/css/src/combobox.css
index abb72bdf69..2ada981f96 100644
--- a/packages/css/src/combobox.css
+++ b/packages/css/src/combobox.css
@@ -1,4 +1,5 @@
 .ds-combobox {
+  display: grid;
   background-color: transparent;
   gap: var(--ds-size-2);
 }

From bdd041b64c35305e4a631694ab7174dd7d39ff33 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Wed, 8 Jan 2025 13:01:50 +0100
Subject: [PATCH 4/4] move nested selector

---
 packages/css/src/breadcrumbs.css | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/css/src/breadcrumbs.css b/packages/css/src/breadcrumbs.css
index 548078c21b..240ab605cb 100644
--- a/packages/css/src/breadcrumbs.css
+++ b/packages/css/src/breadcrumbs.css
@@ -5,14 +5,15 @@
   --dsc-breadcrumbs-color: var(--ds-color-text-subtle);
 
   & > :is(ol, ul) {
-    &:not([hidden]) {
-      display: flex;
-    }
     flex-wrap: wrap;
     list-style-type: none;
     margin: 0;
     padding: 0;
     gap: var(--dsc-breadcrumbs-spacing) 0;
+
+    &:not([hidden]) {
+      display: flex;
+    }
   }
 
   & a[aria-current='page'] {