@navikt/ds-css 7.9.2 → 7.10.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @navikt/ds-css
 
+## 7.10.0
+
+### Minor Changes
+
+- Table: New prop `contentGutter` added to `ExpandableRow`-component. This allows user more control for content layout inside expandable element. ([#3507](https://github.com/navikt/aksel/pull/3507))
+
+### Patch Changes
+
+- Button: Using `<Loader />` within `icon`-prop now supported. ([#3515](https://github.com/navikt/aksel/pull/3515))
+
+- Combobox: Always render `maxSelected` message when `isMultiSelect` is set. ([#3506](https://github.com/navikt/aksel/pull/3506))
+
 ## 7.9.2
 
 ### Patch Changes

package/button.css

@@ -497,7 +497,7 @@
 }
 
 /* Loader overrides */
-.navds-button .navds-loader {
+.navds-button > .navds-loader {
   position: absolute;
 }
 

package/darkside/accordion.darkside.css

@@ -100,7 +100,7 @@
   height: 22px;
   align-self: center;
   background-color: var(--ax-bg-accent-moderateA);
-  color: var(--ax-text-accent-strong);
+  color: var(--ax-text-accent);
 }
 
 .navds-accordion__header-chevron {

package/darkside/action-menu.darkside.css

@@ -107,7 +107,7 @@
 
   &:focus {
     background-color: var(--ax-bg-danger-moderate-hoverA);
-    color: var(--ax-text-danger-strong);
+    color: var(--ax-text-danger);
   }
 }
 

package/darkside/button.darkside.css

@@ -17,26 +17,28 @@
   box-shadow: inset 0 0 0 var(--__axc-button-border-width) var(--__axc-button-border-color);
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 }
 
 .navds-button--small,
 .navds-button--xsmall {
   --__axc-button-icon-margin: -2px;
-  --__axc-button-icon-size: 1.25rem;
 }
 
 .navds-button--small {
   padding: var(--ax-space-4) var(--ax-space-12);
   min-height: 2rem;
   min-width: 2rem;
+  gap: var(--ax-space-6);
 }
 
 .navds-button--xsmall {
   padding: var(--ax-space-2) var(--ax-space-8);
   gap: var(--ax-space-4);
+
+  --__axc-button-icon-size: 1.25rem;
 }
 
 .navds-button--icon-only {
@@ -159,7 +161,7 @@
 * .navds-button--secondary-neutral *
  **************************/
 .navds-button--secondary-neutral {
-  --__axc-button-border-color: var(--ax-border-default);
+  --__axc-button-border-color: var(--ax-border-strong);
 
   background-color: transparent;
   color: var(--ax-text-default);
@@ -178,7 +180,7 @@
   }
 
   &:is(:disabled, .navds-button--disabled) {
-    --__axc-button-border-color: var(--ax-border-default);
+    --__axc-button-border-color: var(--ax-border-strong);
 
     color: var(--ax-text-default);
     background-color: transparent;
@@ -262,7 +264,7 @@
 }
 
 /* Loader overrides */
-.navds-button .navds-loader {
+.navds-button > .navds-loader {
   position: absolute;
 }
 

package/darkside/chat.darkside.css

@@ -73,14 +73,14 @@
 .navds-chat--info {
   & .navds-chat__bubble,
   & .navds-chat__avatar {
-    background-color: var(--ax-bg-info-raised);
+    background-color: var(--ax-bg-info-moderate);
   }
 }
 
 .navds-chat--neutral {
   & .navds-chat__bubble,
   & .navds-chat__avatar {
-    background-color: var(--ax-bg-raised);
+    background-color: var(--ax-bg-moderateA);
   }
 }
 

package/darkside/chips.darkside.css

@@ -72,7 +72,7 @@
 .navds-chips__toggle--action {
   box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
   background-color: var(--ax-bg-accent-moderate);
-  color: var(--ax-text-default);
+  color: var(--ax-text-accent-strong);
 
   &:hover {
     background-color: var(--ax-bg-accent-moderate-hover);

package/darkside/copybutton.darkside.css

@@ -67,12 +67,8 @@
     --__axc-copybutton-padding: var(--ax-space-4);
   }
 
-  & .navds-copybutton__icon {
-    font-size: 1.25rem;
-  }
-
   & > .navds-copybutton__content {
-    gap: var(--ax-space-6);
+    gap: var(--ax-space-4);
   }
 }
 
@@ -96,7 +92,7 @@
   }
 
   & > .navds-copybutton__content {
-    gap: var(--ax-space-4);
+    gap: var(--ax-space-2);
   }
 }
 
@@ -104,18 +100,6 @@
 .navds-copybutton__icon {
   font-size: 1.5rem;
   display: flex;
-
-  &:first-of-type {
-    margin-left: -0.25rem;
-  }
-
-  &:last-of-type {
-    margin-right: -0.25rem;
-  }
-
-  &:only-child {
-    margin: 0;
-  }
 }
 
 .navds-copybutton--active .navds-copybutton__icon {
@@ -146,14 +130,6 @@
 
   &.navds-copybutton--active {
     color: var(--ax-text-success);
-
-    &:hover {
-      color: var(--ax-text-success-strong);
-    }
-  }
-
-  &:hover {
-    color: var(--ax-text-accent-strong);
   }
 
   &:disabled {
@@ -165,11 +141,6 @@
 .navds-copybutton--neutral {
   color: var(--ax-text-subtle);
 
-  &:hover,
-  &.navds-copybutton--active {
-    color: var(--ax-text-default);
-  }
-
   &:disabled {
     color: var(--ax-text-subtle);
   }
@@ -179,5 +150,5 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--ax-space-8);
+  gap: var(--ax-space-6);
 }

package/darkside/form/combobox.darkside.css

@@ -15,7 +15,7 @@
 
 .navds-form-field:not(:is(.navds-combobox--disabled, .navds-combobox--readonly)) {
   & .navds-combobox__wrapper:hover {
-    border-color: var(--ax-border-focus);
+    border-color: var(--ax-border-accent-strong);
   }
 }
 
@@ -31,6 +31,10 @@
   opacity: var(--ax-opacity-disabled);
 
   & .navds-combobox__wrapper {
+    &:hover {
+      border-color: var(--ax-border-default);
+    }
+
     & *:hover {
       cursor: not-allowed;
     }
@@ -80,9 +84,9 @@
   border-radius: var(--ax-border-radius-medium);
 
   &:has(.navds-combobox__input:focus-visible) {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
-    border-color: var(--ax-border-focus);
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    border-color: var(--ax-border-accent-strong);
   }
 
   &:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
@@ -113,15 +117,19 @@
   &:hover {
     cursor: text;
   }
+
+  .navds-combobox--disabled &:hover {
+    border-color: var(--ax-border-default);
+  }
 }
 
 .navds-combobox--error {
   & .navds-combobox__wrapper-inner {
-    border-color: var(--ax-border-danger);
-    box-shadow: 0 0 0 1px var(--ax-border-danger);
+    border-color: var(--ax-border-danger-strong);
+    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
 
     &:has(.navds-combobox__input:focus-visible) {
-      border-color: var(--ax-border-danger);
+      border-color: var(--ax-border-danger-strong);
     }
   }
 }
@@ -230,7 +238,7 @@
 /* dropdown & non selectable dropdown items */
 
 .navds-combobox__list {
-  max-height: 290px;
+  max-height: 316px;
   overflow: clip;
   position: absolute;
   left: 0;
@@ -268,7 +276,7 @@
   border-radius: var(--ax-border-radius-medium);
   border: 0;
   margin-inline: var(--ax-space-8);
-  margin-block: var(--ax-space-4);
+  margin-block: var(--ax-space-2);
   scroll-margin-block: 8px; /* outline + outline-offset + margin-block */
 }
 
@@ -307,7 +315,6 @@
 .navds-combobox__list-item--focus {
   cursor: pointer;
   outline: 2px solid var(--ax-border-focus);
-  outline-offset: 2px;
 }
 
 .navds-combobox__list-item {
@@ -321,10 +328,11 @@
   & mark {
     background-color: transparent;
     font-weight: var(--ax-font-weight-bold);
+    color: var(--ax-text-default);
   }
 
   & svg {
-    color: var(--ax-text-accent);
+    color: var(--ax-text-default);
   }
 }
 
@@ -344,14 +352,14 @@
   justify-content: flex-start;
   gap: 0.25rem;
   margin: 0;
-  margin-block: calc(var(--ax-space-4) * -1);
-  padding-block: var(--ax-space-16);
+  margin-block-start: calc(var(--ax-space-4) * -1);
 
   & svg {
     color: var(--ax-text-default);
   }
 
   &:only-child {
+    margin-block: calc(var(--ax-space-4) * -1);
     border: none;
   }
 }

package/darkside/form/file-upload.darkside.css

@@ -89,7 +89,7 @@
 
 .navds-dropzone--error > .navds-dropzone__area {
   border-color: transparent;
-  outline: 2px solid var(--ax-border-danger);
+  outline: 2px solid var(--ax-border-danger-strong);
   outline-offset: -1px;
 }
 
@@ -165,7 +165,7 @@ li.navds-file-item {
 }
 
 .navds-file-item--error > .navds-file-item__inner {
-  outline: 2px solid var(--ax-border-danger);
+  outline: 2px solid var(--ax-border-danger-strong);
 }
 
 .navds-file-item__icon {

package/darkside/form/radio-checkbox.darkside.css

@@ -141,7 +141,7 @@
 
 .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
 .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
-  color: var(--ax-text-accent-strong);
+  color: var(--ax-text-accent);
 }
 
 .navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
@@ -152,13 +152,12 @@
 
 .navds-checkbox--error > .navds-checkbox__input:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:not(:disabled, :checked) + .navds-radio__label::before {
-  border-color: var(--ax-border-danger);
+  border-color: var(--ax-border-danger-strong);
 }
 
 .navds-checkbox--error > .navds-checkbox__input:not(:disabled, :checked, :indeterminate):hover + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:not(:disabled, :checked):hover + .navds-radio__label::before {
   background-color: var(--ax-bg-danger-moderate-hoverA);
-  border-color: var(--ax-border-danger-strong);
 }
 
 .navds-checkbox--error > .navds-checkbox__input:is(:checked, :indeterminate):not(:disabled) + .navds-checkbox__label::before {

package/darkside/form/search.darkside.css

@@ -127,13 +127,13 @@
 
 /* --------------------------- Search Error-state --------------------------- */
 .navds-search--error .navds-search__input:not(:disabled) {
-  border-color: var(--ax-border-danger);
+  border-color: var(--ax-border-danger-strong);
   box-shadow:
-    inset -2px 0 0 0 var(--ax-border-danger),
-    inset 0 0 0 1px var(--ax-border-danger);
+    inset -2px 0 0 0 var(--ax-border-danger-strong),
+    inset 0 0 0 1px var(--ax-border-danger-strong);
 
   &.navds-search__input--simple {
-    box-shadow: inset 0 0 0 1px var(--ax-border-danger);
+    box-shadow: inset 0 0 0 1px var(--ax-border-danger-strong);
   }
 }
 

package/darkside/form/select.darkside.css

@@ -66,8 +66,8 @@
 /* --------------------------- Select Error-state --------------------------- */
 .navds-select--error {
   > * select {
-    box-shadow: 0 0 0 1px var(--ax-border-danger);
-    border-color: var(--ax-border-danger);
+    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
+    border-color: var(--ax-border-danger-strong);
   }
 
   > * select:hover,

package/darkside/form/switch.darkside.css

@@ -55,7 +55,7 @@
 
 .navds-switch__input:hover ~ .navds-switch__label-wrapper,
 .navds-switch__label-wrapper:hover {
-  color: var(--ax-text-accent-strong);
+  color: var(--ax-text-accent);
 }
 
 .navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
@@ -124,7 +124,7 @@
   .navds-switch__input:checked ~ .navds-switch__track > & {
     background-color: var(--ax-bg-raised);
     transform: translateX(1.25rem);
-    color: var(--ax-text-accent-strong);
+    color: var(--ax-text-accent);
     width: 1.25rem;
     height: 1.25rem;
     left: 0;

package/darkside/form/text-field.darkside.css

@@ -39,8 +39,8 @@
 }
 
 .navds-text-field--error .navds-text-field__input:not(:disabled) {
-  border-color: var(--ax-border-danger);
-  box-shadow: 0 0 0 1px var(--ax-border-danger);
+  border-color: var(--ax-border-danger-strong);
+  box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
 }
 
 .navds-text-field--readonly .navds-text-field__input {

package/darkside/form/textarea.darkside.css

@@ -90,8 +90,8 @@
 }
 
 .navds-textarea--error .navds-textarea__input:not(:disabled) {
-  box-shadow: 0 0 0 1px var(--ax-border-danger);
-  border-color: var(--ax-border-danger);
+  box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
+  border-color: var(--ax-border-danger-strong);
 }
 
 @media (forced-colors: active) {

package/darkside/read-more.darkside.css

@@ -20,8 +20,8 @@
   text-align: start;
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 
   &[data-state="open"] .navds-read-more__expand-icon {

package/darkside/table.darkside.css

@@ -229,9 +229,27 @@
 }
 
 .navds-table__expanded-row-content {
-  padding: var(--ax-space-16) calc(var(--ax-space-8) + 3rem);
+  --__ac-table-expanded-row-pi: calc(var(--ax-space-8) + 3rem);
+
+  padding-block: var(--ax-space-16);
 }
 
 .navds-table--small .navds-table__expanded-row-content {
-  padding: var(--ax-space-8) calc(var(--ax-space-8) + 3rem);
+  padding-block: var(--ax-space-8);
+}
+
+.navds-table__expanded-row-content--gutter-both {
+  padding-inline: var(--__ac-table-expanded-row-pi);
+}
+
+.navds-table__expanded-row-content--gutter-left {
+  padding-inline: var(--__ac-table-expanded-row-pi) var(--ax-space-8);
+}
+
+.navds-table__expanded-row-content--gutter-right {
+  padding-inline: var(--ax-space-8) var(--__ac-table-expanded-row-pi);
+}
+
+.navds-table__expanded-row-content--gutter-none {
+  padding-inline: var(--ax-space-8);
 }

package/dist/component/button.css

@@ -498,7 +498,7 @@
 
 /* Loader overrides */
 
-.navds-button .navds-loader {
+.navds-button > .navds-loader {
   position: absolute;
 }
 

package/dist/component/button.min.css

@@ -1,3 +1,3 @@
 [data-theme=dark]{--__ac-button-primary-text:var(--a-gray-900);--__ac-button-primary-bg:var(--a-blue-200);--__ac-button-primary-focus-border:var(--a-gray-900);--__ac-button-primary-hover-bg:var(--a-blue-300);--__ac-button-primary-active-bg:var(--a-blue-400);--__ac-button-secondary-text:var(--a-white);--__ac-button-secondary-hover-text:var(--a-white);--__ac-button-secondary-active-text:var(--a-white);--__ac-button-secondary-active-focus-border:var(--a-gray-900);--__ac-button-secondary-bg:var(--a-gray-900);--__ac-button-secondary-border:var(--a-blue-200);--__ac-button-secondary-hover-bg:var(--a-gray-800);--__ac-button-secondary-focus-border:var(--a-blue-200);--__ac-button-secondary-active-bg:var(--a-gray-700)}[data-theme=light]{--__ac-button-primary-text:initial;--__ac-button-primary-bg:initial;--__ac-button-primary-focus-border:initial;--__ac-button-primary-hover-bg:initial;--__ac-button-primary-active-bg:initial;--__ac-button-secondary-text:initial;--__ac-button-secondary-hover-text:initial;--__ac-button-secondary-active-text:initial;--__ac-button-secondary-active-focus-border:initial;--__ac-button-secondary-bg:initial;--__ac-button-secondary-border:initial;--__ac-button-secondary-hover-bg:initial;--__ac-button-secondary-focus-border:initial;--__ac-button-secondary-active-bg:initial}.navds-button{--__ac-button-padding:var(--a-spacing-3) var(--a-spacing-5);align-items:center;background:none;border:none;border-radius:var(--ac-button-border-radius,var(--a-border-radius-medium));cursor:pointer;display:inline-flex;gap:var(--a-spacing-2);justify-content:center;margin:0;padding:var(--ac-button-padding,var(--__ac-button-padding));text-decoration:none}.navds-button--small{--__ac-button-padding:var(--a-spacing-1) var(--a-spacing-3);min-height:2rem;min-width:2rem;padding:var(--ac-button-padding-small,var(--__ac-button-padding))}.navds-button--xsmall{--__ac-button-padding:var(--a-spacing-05) var(--a-spacing-2);gap:var(--a-spacing-1);padding:var(--ac-button-padding-xsmall,var(--__ac-button-padding))}.navds-button--icon-only{--__ac-button-padding:var(--a-spacing-3);padding:var(--ac-button-padding-icon-only,var(--__ac-button-padding))}.navds-button--small.navds-button--icon-only{--__ac-button-padding:var(--a-spacing-1);padding:var(--ac-button-padding-icon-only-small,var(--__ac-button-padding))}.navds-button--xsmall.navds-button--icon-only{--__ac-button-padding:var(--a-spacing-05);padding:var(--ac-button-padding-icon-only-xsmall,var(--__ac-button-padding))}.navds-button:focus-visible{box-shadow:var(--a-shadow-focus);outline:2px solid #0000;outline-offset:2px}@supports not selector(:focus-visible){.navds-button:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-button__icon{--ac-button-icon-margin:-4px;display:flex;font-size:1.5rem}.navds-button__icon:first-child{margin-left:var(--ac-button-icon-margin)}.navds-button__icon:last-child{margin-right:var(--ac-button-icon-margin)}.navds-button--icon-only .navds-button__icon{margin:0}:where(.navds-button--xsmall,.navds-button--small) .navds-button__icon{--ac-button-icon-margin:-2px;font-size:1.25rem}.navds-button--primary{background-color:var(--ac-button-primary-bg,var(--__ac-button-primary-bg,var(--a-surface-action)));color:var(--ac-button-primary-text,var(--__ac-button-primary-text,var(--a-text-on-action)))}@media (forced-colors:active){.navds-button.navds-button--primary{background-color:highlight;color:highlighttext}.navds-button.navds-button--primary span{forced-color-adjust:none}}.navds-button--primary:hover{background-color:var(--ac-button-primary-hover-bg,var(--__ac-button-primary-hover-bg,var(--a-surface-action-hover)))}.navds-button--primary:active{background-color:var(--ac-button-primary-active-bg,var(--__ac-button-primary-active-bg,var(--a-surface-action-active)))}.navds-button--primary:focus-visible{box-shadow:inset 0 0 0 1px var(--ac-button-primary-focus-border,var(--__ac-button-primary-focus-border,var(--a-surface-default))),var(--a-shadow-focus);outline:2px solid #0000;outline-offset:2px}@media (forced-colors:active){.navds-button--primary:focus-visible{box-shadow:none}}@supports not selector(:focus-visible){.navds-button--primary:focus{box-shadow:inset 0 0 0 1px var(--ac-button-primary-focus-border,var(--__ac-button-primary-focus-border,var(--a-surface-default))),var(--a-shadow-focus)}}.navds-button--primary:active:where(:disabled,.navds-button--disabled),.navds-button--primary:hover:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-primary-bg,var(--a-surface-action))}.navds-button--primary-neutral{background-color:var(--ac-button-primary-neutral-bg,var(--a-surface-neutral));color:var(--ac-button-primary-neutral-text,var(--a-text-on-neutral))}.navds-button--primary-neutral:hover{background-color:var(--ac-button-primary-neutral-hover-bg,var(--a-surface-neutral-hover))}.navds-button--primary-neutral:active{background-color:var(--ac-button-primary-neutral-active-bg,var(--a-surface-neutral-active))}.navds-button--primary-neutral:focus-visible{box-shadow:inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border,var(--a-surface-default)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--primary-neutral:focus{box-shadow:inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border,var(--a-surface-default)),var(--a-shadow-focus)}}.navds-button--primary-neutral:active:where(:disabled,.navds-button--disabled),.navds-button--primary-neutral:hover:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-primary-neutral-bg,var(--a-surface-neutral))}.navds-button--secondary{background-color:var(--ac-button-secondary-bg,var(--__ac-button-secondary-bg,var(--a-surface-transparent)));box-shadow:inset 0 0 0 2px var(--ac-button-secondary-border,var(--__ac-button-secondary-border,var(--a-border-action)));color:var(--ac-button-secondary-text,var(--__ac-button-secondary-text,var(--a-text-action)))}.navds-button--secondary:hover{background-color:var(
     --ac-button-secondary-hover-bg,var(--__ac-button-secondary-hover-bg,var(--a-surface-action-subtle-hover))
-  );box-shadow:inset 0 0 0 2px var(--ac-button-secondary-hover-border,var(--a-border-action-hover));color:var(--ac-button-secondary-hover-text,var(--__ac-button-secondary-hover-text,var(--a-text-action-on-action-subtle)))}.navds-button--secondary:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-button-secondary-focus-border,var(--__ac-button-secondary-focus-border,var(--a-border-action))),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--secondary:focus{box-shadow:inset 0 0 0 2px var(--ac-button-secondary-focus-border,var(--__ac-button-secondary-focus-border,var(--a-border-action))),var(--a-shadow-focus)}}.navds-button--secondary:active{background-color:var(--ac-button-secondary-active-bg,var(--__ac-button-secondary-active-bg,var(--a-surface-action-active)));box-shadow:none;color:var(--ac-button-secondary-active-text,var(--__ac-button-secondary-active-text,var(--a-text-on-action)))}.navds-button--secondary:focus-visible:active{box-shadow:inset 0 0 0 1px var(--ac-button-secondary-active-focus-border,var(--__ac-button-secondary-active-focus-border,var(--a-surface-default))),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--secondary:focus:active{box-shadow:inset 0 0 0 1px var(--ac-button-secondary-active-focus-border,var(--__ac-button-secondary-active-focus-border,var(--a-surface-default))),var(--a-shadow-focus)}}.navds-button--secondary:hover:where(:disabled,.navds-button--disabled),.navds-button--secondary:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-secondary-bg,var(--__ac-button-secondary-bg,var(--a-surface-transparent)));box-shadow:inset 0 0 0 2px var(--ac-button-secondary-border,var(--__ac-button-secondary-border,var(--a-border-action)));color:var(--ac-button-secondary-text,var(--__ac-button-secondary-text,var(--a-text-action)))}.navds-button--secondary-neutral{background-color:var(--ac-button-secondary-neutral-bg,var(--a-surface-transparent));box-shadow:inset 0 0 0 2px var(--ac-button-secondary-neutral-border,var(--a-border-strong));color:var(--ac-button-secondary-neutral-text,var(--a-text-default))}.navds-button--secondary-neutral:hover{background-color:var(--ac-button-secondary-neutral-hover-bg,var(--a-surface-neutral-subtle-hover))}.navds-button--secondary-neutral:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border,var(--a-border-strong)),var(--a-shadow-focus);color:var(--ac-button-secondary-neutral-text,var(--a-text-default))}@supports not selector(:focus-visible){.navds-button--secondary-neutral:focus{box-shadow:inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border,var(--a-border-strong)),var(--a-shadow-focus);color:var(--ac-button-secondary-neutral-text,var(--a-text-default))}}.navds-button--secondary-neutral:active{background-color:var(--ac-button-secondary-neutral-active-bg,var(--a-surface-neutral-active));box-shadow:none;color:var(--ac-button-secondary-neutral-active-text,var(--a-text-on-neutral))}.navds-button--secondary-neutral:focus-visible:active{box-shadow:inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border,var(--a-surface-default)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--secondary-neutral:focus:active{box-shadow:inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border,var(--a-surface-default)),var(--a-shadow-focus)}}.navds-button--secondary-neutral:hover:where(:disabled,.navds-button--disabled),.navds-button--secondary-neutral:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-secondary-neutral-bg,var(--a-surface-transparent));box-shadow:inset 0 0 0 2px var(--ac-button-secondary-neutral-border,var(--a-border-strong));color:var(--ac-button-secondary-neutral-text,var(--a-text-default))}.navds-button--tertiary{background-color:var(--ac-button-tertiary-bg,var(--a-surface-transparent));color:var(--ac-button-tertiary-text,var(--a-text-action))}.navds-button--tertiary:hover{background-color:var(--ac-button-tertiary-hover-bg,var(--a-surface-action-subtle-hover));color:var(--ac-button-tertiary-hover-text,var(--a-text-action-on-action-subtle))}.navds-button--tertiary:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-button-tertiary-focus-border,var(--a-border-action)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--tertiary:focus{box-shadow:inset 0 0 0 2px var(--ac-button-tertiary-focus-border,var(--a-border-action)),var(--a-shadow-focus)}}.navds-button--tertiary:active{background-color:var(--ac-button-tertiary-active-bg,var(--a-surface-action-active));color:var(--ac-button-tertiary-active-text,var(--a-text-on-action))}.navds-button--tertiary:active:hover{background-color:var(--ac-button-tertiary-active-hover-bg,var(--a-surface-action-active))}.navds-button--tertiary:focus-visible:active{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--tertiary:focus:active{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-button--tertiary:active:hover:where(:disabled,.navds-button--disabled),.navds-button--tertiary:active:where(:disabled,.navds-button--disabled),.navds-button--tertiary:hover:where(:disabled,.navds-button--disabled),.navds-button--tertiary:where(:disabled,.navds-button--disabled){background:none;box-shadow:none;color:var(--ac-button-tertiary-text,var(--a-text-action))}.navds-button--tertiary-neutral{color:var(--ac-button-tertiary-neutral-text,var(--a-text-default))}.navds-button--tertiary-neutral:hover{background-color:var(--ac-button-tertiary-neutral-hover-bg,var(--a-surface-neutral-subtle-hover));color:var(--ac-button-tertiary-neutral-hover-text,var(--a-text-default))}.navds-button--tertiary-neutral:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border,var(--a-border-strong)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--tertiary-neutral:focus{box-shadow:inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border,var(--a-border-strong)),var(--a-shadow-focus)}}.navds-button--tertiary-neutral:active{background-color:var(--ac-button-tertiary-neutral-active-bg,var(--a-surface-neutral-active));color:var(--ac-button-tertiary-neutral-active-text,var(--a-text-on-neutral))}.navds-button--tertiary-neutral:active:hover{background-color:var(--ac-button-tertiary-neutral-active-hover-bg,var(--a-surface-neutral-active))}.navds-button--tertiary-neutral:focus-visible:active{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--tertiary-neutral:focus:active{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-button--tertiary-neutral:active:hover:where(:disabled,.navds-button--disabled),.navds-button--tertiary-neutral:active:where(:disabled,.navds-button--disabled),.navds-button--tertiary-neutral:hover:where(:disabled,.navds-button--disabled),.navds-button--tertiary-neutral:where(:disabled,.navds-button--disabled){background:none;box-shadow:none;color:var(--ac-button-tertiary-neutral-text,var(--a-text-default))}.navds-button--danger{background-color:var(--ac-button-danger-bg,var(--a-surface-danger));color:var(--ac-button-danger-text,var(--a-text-on-danger))}.navds-button--danger:hover{background-color:var(--ac-button-danger-hover-bg,var(--a-surface-danger-hover))}.navds-button--danger:active{background-color:var(--ac-button-danger-active-bg,var(--a-surface-danger-active))}.navds-button--danger:focus-visible{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--danger:focus{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-button--danger:active:where(:disabled,.navds-button--disabled),.navds-button--danger:hover:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-danger-bg,var(--a-surface-danger))}.navds-button:where(:disabled,.navds-button--disabled){cursor:not-allowed}.navds-button:not(.navds-button--loading):where(:disabled,.navds-button--disabled){opacity:.3}.navds-button .navds-loader{position:absolute}.navds-button .navds-loader .navds-loader__foreground{stroke:var(--ac-button-loader-stroke,currentColor)}.navds-button--danger .navds-loader .navds-loader__background,.navds-button--primary .navds-loader .navds-loader__background{stroke:var(--ac-button-primary-loader-stroke-bg,#ffffff4d)}.navds-button--loading>:not(.navds-loader){visibility:hidden}@media (forced-colors:active){.navds-button:not(.navds-button--loading):where(:disabled,.navds-button--disabled){color:GrayText;opacity:1}.navds-button{background-color:ButtonFace;border:1px solid #0000;color:ButtonText}.navds-button:hover{background-color:highlighttext;border-color:highlight;box-shadow:none;color:highlight}.navds-button:hover span{forced-color-adjust:none}.navds-button .navds-loader .navds-loader__foreground{stroke:canvas}.navds-button--danger .navds-loader .navds-loader__background,.navds-button--primary .navds-loader .navds-loader__background{stroke:canvastext}}
+  );box-shadow:inset 0 0 0 2px var(--ac-button-secondary-hover-border,var(--a-border-action-hover));color:var(--ac-button-secondary-hover-text,var(--__ac-button-secondary-hover-text,var(--a-text-action-on-action-subtle)))}.navds-button--secondary:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-button-secondary-focus-border,var(--__ac-button-secondary-focus-border,var(--a-border-action))),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--secondary:focus{box-shadow:inset 0 0 0 2px var(--ac-button-secondary-focus-border,var(--__ac-button-secondary-focus-border,var(--a-border-action))),var(--a-shadow-focus)}}.navds-button--secondary:active{background-color:var(--ac-button-secondary-active-bg,var(--__ac-button-secondary-active-bg,var(--a-surface-action-active)));box-shadow:none;color:var(--ac-button-secondary-active-text,var(--__ac-button-secondary-active-text,var(--a-text-on-action)))}.navds-button--secondary:focus-visible:active{box-shadow:inset 0 0 0 1px var(--ac-button-secondary-active-focus-border,var(--__ac-button-secondary-active-focus-border,var(--a-surface-default))),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--secondary:focus:active{box-shadow:inset 0 0 0 1px var(--ac-button-secondary-active-focus-border,var(--__ac-button-secondary-active-focus-border,var(--a-surface-default))),var(--a-shadow-focus)}}.navds-button--secondary:hover:where(:disabled,.navds-button--disabled),.navds-button--secondary:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-secondary-bg,var(--__ac-button-secondary-bg,var(--a-surface-transparent)));box-shadow:inset 0 0 0 2px var(--ac-button-secondary-border,var(--__ac-button-secondary-border,var(--a-border-action)));color:var(--ac-button-secondary-text,var(--__ac-button-secondary-text,var(--a-text-action)))}.navds-button--secondary-neutral{background-color:var(--ac-button-secondary-neutral-bg,var(--a-surface-transparent));box-shadow:inset 0 0 0 2px var(--ac-button-secondary-neutral-border,var(--a-border-strong));color:var(--ac-button-secondary-neutral-text,var(--a-text-default))}.navds-button--secondary-neutral:hover{background-color:var(--ac-button-secondary-neutral-hover-bg,var(--a-surface-neutral-subtle-hover))}.navds-button--secondary-neutral:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border,var(--a-border-strong)),var(--a-shadow-focus);color:var(--ac-button-secondary-neutral-text,var(--a-text-default))}@supports not selector(:focus-visible){.navds-button--secondary-neutral:focus{box-shadow:inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border,var(--a-border-strong)),var(--a-shadow-focus);color:var(--ac-button-secondary-neutral-text,var(--a-text-default))}}.navds-button--secondary-neutral:active{background-color:var(--ac-button-secondary-neutral-active-bg,var(--a-surface-neutral-active));box-shadow:none;color:var(--ac-button-secondary-neutral-active-text,var(--a-text-on-neutral))}.navds-button--secondary-neutral:focus-visible:active{box-shadow:inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border,var(--a-surface-default)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--secondary-neutral:focus:active{box-shadow:inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border,var(--a-surface-default)),var(--a-shadow-focus)}}.navds-button--secondary-neutral:hover:where(:disabled,.navds-button--disabled),.navds-button--secondary-neutral:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-secondary-neutral-bg,var(--a-surface-transparent));box-shadow:inset 0 0 0 2px var(--ac-button-secondary-neutral-border,var(--a-border-strong));color:var(--ac-button-secondary-neutral-text,var(--a-text-default))}.navds-button--tertiary{background-color:var(--ac-button-tertiary-bg,var(--a-surface-transparent));color:var(--ac-button-tertiary-text,var(--a-text-action))}.navds-button--tertiary:hover{background-color:var(--ac-button-tertiary-hover-bg,var(--a-surface-action-subtle-hover));color:var(--ac-button-tertiary-hover-text,var(--a-text-action-on-action-subtle))}.navds-button--tertiary:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-button-tertiary-focus-border,var(--a-border-action)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--tertiary:focus{box-shadow:inset 0 0 0 2px var(--ac-button-tertiary-focus-border,var(--a-border-action)),var(--a-shadow-focus)}}.navds-button--tertiary:active{background-color:var(--ac-button-tertiary-active-bg,var(--a-surface-action-active));color:var(--ac-button-tertiary-active-text,var(--a-text-on-action))}.navds-button--tertiary:active:hover{background-color:var(--ac-button-tertiary-active-hover-bg,var(--a-surface-action-active))}.navds-button--tertiary:focus-visible:active{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--tertiary:focus:active{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-button--tertiary:active:hover:where(:disabled,.navds-button--disabled),.navds-button--tertiary:active:where(:disabled,.navds-button--disabled),.navds-button--tertiary:hover:where(:disabled,.navds-button--disabled),.navds-button--tertiary:where(:disabled,.navds-button--disabled){background:none;box-shadow:none;color:var(--ac-button-tertiary-text,var(--a-text-action))}.navds-button--tertiary-neutral{color:var(--ac-button-tertiary-neutral-text,var(--a-text-default))}.navds-button--tertiary-neutral:hover{background-color:var(--ac-button-tertiary-neutral-hover-bg,var(--a-surface-neutral-subtle-hover));color:var(--ac-button-tertiary-neutral-hover-text,var(--a-text-default))}.navds-button--tertiary-neutral:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border,var(--a-border-strong)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--tertiary-neutral:focus{box-shadow:inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border,var(--a-border-strong)),var(--a-shadow-focus)}}.navds-button--tertiary-neutral:active{background-color:var(--ac-button-tertiary-neutral-active-bg,var(--a-surface-neutral-active));color:var(--ac-button-tertiary-neutral-active-text,var(--a-text-on-neutral))}.navds-button--tertiary-neutral:active:hover{background-color:var(--ac-button-tertiary-neutral-active-hover-bg,var(--a-surface-neutral-active))}.navds-button--tertiary-neutral:focus-visible:active{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--tertiary-neutral:focus:active{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-button--tertiary-neutral:active:hover:where(:disabled,.navds-button--disabled),.navds-button--tertiary-neutral:active:where(:disabled,.navds-button--disabled),.navds-button--tertiary-neutral:hover:where(:disabled,.navds-button--disabled),.navds-button--tertiary-neutral:where(:disabled,.navds-button--disabled){background:none;box-shadow:none;color:var(--ac-button-tertiary-neutral-text,var(--a-text-default))}.navds-button--danger{background-color:var(--ac-button-danger-bg,var(--a-surface-danger));color:var(--ac-button-danger-text,var(--a-text-on-danger))}.navds-button--danger:hover{background-color:var(--ac-button-danger-hover-bg,var(--a-surface-danger-hover))}.navds-button--danger:active{background-color:var(--ac-button-danger-active-bg,var(--a-surface-danger-active))}.navds-button--danger:focus-visible{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--danger:focus{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-button--danger:active:where(:disabled,.navds-button--disabled),.navds-button--danger:hover:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-danger-bg,var(--a-surface-danger))}.navds-button:where(:disabled,.navds-button--disabled){cursor:not-allowed}.navds-button:not(.navds-button--loading):where(:disabled,.navds-button--disabled){opacity:.3}.navds-button>.navds-loader{position:absolute}.navds-button .navds-loader .navds-loader__foreground{stroke:var(--ac-button-loader-stroke,currentColor)}.navds-button--danger .navds-loader .navds-loader__background,.navds-button--primary .navds-loader .navds-loader__background{stroke:var(--ac-button-primary-loader-stroke-bg,#ffffff4d)}.navds-button--loading>:not(.navds-loader){visibility:hidden}@media (forced-colors:active){.navds-button:not(.navds-button--loading):where(:disabled,.navds-button--disabled){color:GrayText;opacity:1}.navds-button{background-color:ButtonFace;border:1px solid #0000;color:ButtonText}.navds-button:hover{background-color:highlighttext;border-color:highlight;box-shadow:none;color:highlight}.navds-button:hover span{forced-color-adjust:none}.navds-button .navds-loader .navds-loader__foreground{stroke:canvas}.navds-button--danger .navds-loader .navds-loader__background,.navds-button--primary .navds-loader .navds-loader__background{stroke:canvastext}}

package/dist/component/table.css

@@ -249,11 +249,29 @@
 }
 
 .navds-table__expanded-row-content {
-  padding: var(--a-spacing-4) calc(var(--a-spacing-2) + 3rem);
+  --__ac-table-expanded-row-pi: calc(var(--a-spacing-2) + 3rem);
+
+  padding-block: var(--a-spacing-4);
 }
 
 .navds-table--small .navds-table__expanded-row-content {
-  padding: var(--a-spacing-2) calc(var(--a-spacing-2) + 3rem);
+  padding-block: var(--a-spacing-2);
+}
+
+.navds-table__expanded-row-content--gutter-both {
+  padding-inline: var(--__ac-table-expanded-row-pi);
+}
+
+.navds-table__expanded-row-content--gutter-left {
+  padding-inline: var(--__ac-table-expanded-row-pi) var(--a-spacing-2);
+}
+
+.navds-table__expanded-row-content--gutter-right {
+  padding-inline: var(--a-spacing-2) var(--__ac-table-expanded-row-pi);
+}
+
+.navds-table__expanded-row-content--gutter-none {
+  padding-inline: var(--a-spacing-2);
 }
 
 @media (forced-colors: active) {

package/dist/component/table.min.css

@@ -1 +1 @@
-.navds-table{border-collapse:collapse;display:table;width:100%}.navds-table__header{display:table-header-group}.navds-table__body{display:table-row-group}.navds-table__row{display:table-row}.navds-table__body .navds-table__row--shade-on-hover:not(.navds-table__expandable-row--expansion-disabled):hover{background-color:var(--ac-table-row-hover,var(--a-bg-subtle))}.navds-table__row--selected{background-color:var(--ac-table-row-selected,var(--a-surface-action-subtle))}.navds-table__body .navds-table__row--shade-on-hover.navds-table__row--selected:hover{background-color:var(--ac-table-row-selected-hover,var(--a-surface-action-subtle-hover))}.navds-table--zebra-stripes .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)){background-color:var(--ac-table-row-zebra,var(--a-surface-subtle))}.navds-table--zebra-stripes .navds-table__body :where(.navds-table__expandable-row:nth-child(4n+1):not(.navds-table__row--selected)){background-color:initial}.navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n){background-color:var(--ac-table-row-zebra,var(--a-surface-subtle))}.navds-table__data-cell,.navds-table__header-cell{border-bottom:1px solid var(--ac-table-row-border,var(--a-border-default));display:table-cell;padding:var(--a-spacing-3) var(--a-spacing-2);text-align:left}.navds-table__header .navds-table__data-cell,.navds-table__header .navds-table__header-cell{border-bottom-width:2px}.navds-table__data-cell--align-right,.navds-table__header-cell--align-right{text-align:right}.navds-table__data-cell--align-center,.navds-table__header-cell--align-center{text-align:center}:where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__data-cell,:where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__header-cell{border-color:var(--ac-table-cell-hover-border,var(--a-border-strong))}:where(.navds-table__expandable-row--open:hover) .navds-table__data-cell{border-bottom-color:#0000}.navds-table--large .navds-table__data-cell,.navds-table--large .navds-table__header-cell{padding:var(--a-spacing-4) var(--a-spacing-2)}.navds-table--small .navds-table__data-cell,.navds-table--small .navds-table__header-cell{padding:var(--a-spacing-1) var(--a-spacing-2)}.navds-table :not(.navds-checkboxes)>.navds-checkbox .navds-checkbox__input{top:-.75rem}.navds-table :not(.navds-checkboxes)>.navds-checkbox--small .navds-checkbox__input{top:-.375rem}.navds-table :not(.navds-checkboxes)>.navds-checkbox .navds-checkbox__label,.navds-table__header-cell[aria-sort]{padding:0}.navds-table__sort-button{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:none;color:var(--ac-table-sort-button-text,var(--a-text-action));cursor:pointer;display:flex;font-weight:inherit;gap:var(--a-spacing-2);line-height:inherit;margin:0;padding:var(--a-spacing-4) var(--a-spacing-3);text-align:inherit;width:100%}.navds-table--small .navds-table__sort-button{padding:var(--a-spacing-2) var(--a-spacing-3)}.navds-table__sort-button:hover{background-color:var(--ac-table-sort-button-hover-bg,var(--a-bg-subtle))}.navds-table__sort-button:focus-visible{box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:none}@supports not selector(:focus-visible){.navds-table__sort-button:focus{box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:none}}.navds-table__header-cell[aria-sort=ascending] .navds-table__sort-button,.navds-table__header-cell[aria-sort=descending] .navds-table__sort-button{background-color:var(--ac-table-sort-button-sorted-bg,var(--a-surface-selected));color:var(--ac-table-sort-button-sorted-text,var(--a-table-sort-button-sorted-text,var(--a-text-action-on-action-subtle)))}.navds-table__header-cell--align-right .navds-table__sort-button{justify-content:flex-end}.navds-table__header-cell--align-center .navds-table__sort-button{justify-content:center}.navds-table__sort-button svg{flex-shrink:0;font-size:1rem}.navds-table__expandable-row:not(.navds-table__expandable-row--open) :where(.navds-table__data-cell,.navds-table__header-cell){transition:border-bottom-color .19s cubic-bezier(.6,.04,.98,.335)}.navds-table__expandable-row.navds-table__expandable-row--clickable:not(.navds-table__expandable-row--expansion-disabled):hover{cursor:pointer}.navds-table__expandable-row--open :where(.navds-table__data-cell,.navds-table__header-cell){border-bottom-color:#0000}.navds-table__expandable-row--open .navds-table__toggle-expand-cell--open{border-color:#0000}.navds-table__toggle-expand-cell{padding:0;width:3rem}.navds-table--large .navds-table__toggle-expand-cell{padding:0 var(--a-spacing-2)}.navds-table--small .navds-table__toggle-expand-cell{padding:var(--a-spacing-1) var(--a-spacing-2)}.navds-table__toggle-expand-button{background:#0000;border:none;border-radius:var(--a-border-radius-medium);cursor:pointer;display:grid;font-size:1.5rem;height:2rem;margin:0 auto;place-content:center;width:2rem}.navds-table__expandable-icon{transition:transform .15s ease-in-out}.navds-table__expandable-row:not(.navds-table__expandable-row--expansion-disabled) .navds-table__toggle-expand-cell:hover{cursor:pointer}.navds-table__expandable-row--clickable:hover .navds-table__toggle-expand-button,.navds-table__toggle-expand-button:hover,.navds-table__toggle-expand-cell:hover>.navds-table__toggle-expand-button{background-color:var(--a-surface-hover)}.navds-table__toggle-expand-cell--open>:where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon){transform:translateY(0) rotate(180deg)}.navds-table__toggle-expand-button:hover>:where(.navds-table__expandable-icon){transform:translateY(1px)}.navds-table__toggle-expand-cell--open>.navds-table__toggle-expand-button:hover>:where(.navds-table__expandable-icon){transform:translateY(-1px) rotate(180deg)}.navds-table__toggle-expand-button:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-table__toggle-expand-button:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-table__expanded-row-cell{padding:0}.navds-table__expanded-row-cell:empty{display:none}.navds-table__expanded-row-collapse:not([style*="height: 0px;"]){border-bottom:1px solid var(--ac-table-row-border,var(--a-border-default))}.navds-table__expanded-row-content{padding:var(--a-spacing-4) calc(var(--a-spacing-2) + 3rem)}.navds-table--small .navds-table__expanded-row-content{padding:var(--a-spacing-2) calc(var(--a-spacing-2) + 3rem)}@media (forced-colors:active){.navds-date.navds-date button.rdp-day_selected{background-color:highlight;box-shadow:none;color:highlighttext;forced-color-adjust:none}.navds-date.navds-date button{box-shadow:none;color:buttontext;forced-color-adjust:none;outline:none}.navds-date button:focus-visible{color:buttontext;forced-color-adjust:none;outline:2px solid highlight}.navds-date.navds-date button.rdp-day_disabled{color:GrayText}}
+.navds-table{border-collapse:collapse;display:table;width:100%}.navds-table__header{display:table-header-group}.navds-table__body{display:table-row-group}.navds-table__row{display:table-row}.navds-table__body .navds-table__row--shade-on-hover:not(.navds-table__expandable-row--expansion-disabled):hover{background-color:var(--ac-table-row-hover,var(--a-bg-subtle))}.navds-table__row--selected{background-color:var(--ac-table-row-selected,var(--a-surface-action-subtle))}.navds-table__body .navds-table__row--shade-on-hover.navds-table__row--selected:hover{background-color:var(--ac-table-row-selected-hover,var(--a-surface-action-subtle-hover))}.navds-table--zebra-stripes .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)){background-color:var(--ac-table-row-zebra,var(--a-surface-subtle))}.navds-table--zebra-stripes .navds-table__body :where(.navds-table__expandable-row:nth-child(4n+1):not(.navds-table__row--selected)){background-color:initial}.navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n){background-color:var(--ac-table-row-zebra,var(--a-surface-subtle))}.navds-table__data-cell,.navds-table__header-cell{border-bottom:1px solid var(--ac-table-row-border,var(--a-border-default));display:table-cell;padding:var(--a-spacing-3) var(--a-spacing-2);text-align:left}.navds-table__header .navds-table__data-cell,.navds-table__header .navds-table__header-cell{border-bottom-width:2px}.navds-table__data-cell--align-right,.navds-table__header-cell--align-right{text-align:right}.navds-table__data-cell--align-center,.navds-table__header-cell--align-center{text-align:center}:where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__data-cell,:where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__header-cell{border-color:var(--ac-table-cell-hover-border,var(--a-border-strong))}:where(.navds-table__expandable-row--open:hover) .navds-table__data-cell{border-bottom-color:#0000}.navds-table--large .navds-table__data-cell,.navds-table--large .navds-table__header-cell{padding:var(--a-spacing-4) var(--a-spacing-2)}.navds-table--small .navds-table__data-cell,.navds-table--small .navds-table__header-cell{padding:var(--a-spacing-1) var(--a-spacing-2)}.navds-table :not(.navds-checkboxes)>.navds-checkbox .navds-checkbox__input{top:-.75rem}.navds-table :not(.navds-checkboxes)>.navds-checkbox--small .navds-checkbox__input{top:-.375rem}.navds-table :not(.navds-checkboxes)>.navds-checkbox .navds-checkbox__label,.navds-table__header-cell[aria-sort]{padding:0}.navds-table__sort-button{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:none;color:var(--ac-table-sort-button-text,var(--a-text-action));cursor:pointer;display:flex;font-weight:inherit;gap:var(--a-spacing-2);line-height:inherit;margin:0;padding:var(--a-spacing-4) var(--a-spacing-3);text-align:inherit;width:100%}.navds-table--small .navds-table__sort-button{padding:var(--a-spacing-2) var(--a-spacing-3)}.navds-table__sort-button:hover{background-color:var(--ac-table-sort-button-hover-bg,var(--a-bg-subtle))}.navds-table__sort-button:focus-visible{box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:none}@supports not selector(:focus-visible){.navds-table__sort-button:focus{box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:none}}.navds-table__header-cell[aria-sort=ascending] .navds-table__sort-button,.navds-table__header-cell[aria-sort=descending] .navds-table__sort-button{background-color:var(--ac-table-sort-button-sorted-bg,var(--a-surface-selected));color:var(--ac-table-sort-button-sorted-text,var(--a-table-sort-button-sorted-text,var(--a-text-action-on-action-subtle)))}.navds-table__header-cell--align-right .navds-table__sort-button{justify-content:flex-end}.navds-table__header-cell--align-center .navds-table__sort-button{justify-content:center}.navds-table__sort-button svg{flex-shrink:0;font-size:1rem}.navds-table__expandable-row:not(.navds-table__expandable-row--open) :where(.navds-table__data-cell,.navds-table__header-cell){transition:border-bottom-color .19s cubic-bezier(.6,.04,.98,.335)}.navds-table__expandable-row.navds-table__expandable-row--clickable:not(.navds-table__expandable-row--expansion-disabled):hover{cursor:pointer}.navds-table__expandable-row--open :where(.navds-table__data-cell,.navds-table__header-cell){border-bottom-color:#0000}.navds-table__expandable-row--open .navds-table__toggle-expand-cell--open{border-color:#0000}.navds-table__toggle-expand-cell{padding:0;width:3rem}.navds-table--large .navds-table__toggle-expand-cell{padding:0 var(--a-spacing-2)}.navds-table--small .navds-table__toggle-expand-cell{padding:var(--a-spacing-1) var(--a-spacing-2)}.navds-table__toggle-expand-button{background:#0000;border:none;border-radius:var(--a-border-radius-medium);cursor:pointer;display:grid;font-size:1.5rem;height:2rem;margin:0 auto;place-content:center;width:2rem}.navds-table__expandable-icon{transition:transform .15s ease-in-out}.navds-table__expandable-row:not(.navds-table__expandable-row--expansion-disabled) .navds-table__toggle-expand-cell:hover{cursor:pointer}.navds-table__expandable-row--clickable:hover .navds-table__toggle-expand-button,.navds-table__toggle-expand-button:hover,.navds-table__toggle-expand-cell:hover>.navds-table__toggle-expand-button{background-color:var(--a-surface-hover)}.navds-table__toggle-expand-cell--open>:where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon){transform:translateY(0) rotate(180deg)}.navds-table__toggle-expand-button:hover>:where(.navds-table__expandable-icon){transform:translateY(1px)}.navds-table__toggle-expand-cell--open>.navds-table__toggle-expand-button:hover>:where(.navds-table__expandable-icon){transform:translateY(-1px) rotate(180deg)}.navds-table__toggle-expand-button:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-table__toggle-expand-button:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-table__expanded-row-cell{padding:0}.navds-table__expanded-row-cell:empty{display:none}.navds-table__expanded-row-collapse:not([style*="height: 0px;"]){border-bottom:1px solid var(--ac-table-row-border,var(--a-border-default))}.navds-table__expanded-row-content{--__ac-table-expanded-row-pi:calc(var(--a-spacing-2) + 3rem);padding-block:var(--a-spacing-4)}.navds-table--small .navds-table__expanded-row-content{padding-block:var(--a-spacing-2)}.navds-table__expanded-row-content--gutter-both{padding-inline:var(--__ac-table-expanded-row-pi)}.navds-table__expanded-row-content--gutter-left{padding-inline:var(--__ac-table-expanded-row-pi) var(--a-spacing-2)}.navds-table__expanded-row-content--gutter-right{padding-inline:var(--a-spacing-2) var(--__ac-table-expanded-row-pi)}.navds-table__expanded-row-content--gutter-none{padding-inline:var(--a-spacing-2)}@media (forced-colors:active){.navds-date.navds-date button.rdp-day_selected{background-color:highlight;box-shadow:none;color:highlighttext;forced-color-adjust:none}.navds-date.navds-date button{box-shadow:none;color:buttontext;forced-color-adjust:none;outline:none}.navds-date button:focus-visible{color:buttontext;forced-color-adjust:none;outline:2px solid highlight}.navds-date.navds-date button.rdp-day_disabled{color:GrayText}}

package/dist/components.css

@@ -1136,7 +1136,7 @@
 
 /* Loader overrides */
 
-.navds-button .navds-loader {
+.navds-button > .navds-loader {
   position: absolute;
 }
 
@@ -7543,11 +7543,29 @@ button.navds-stepper__step {
 }
 
 .navds-table__expanded-row-content {
-  padding: var(--a-spacing-4) calc(var(--a-spacing-2) + 3rem);
+  --__ac-table-expanded-row-pi: calc(var(--a-spacing-2) + 3rem);
+
+  padding-block: var(--a-spacing-4);
 }
 
 .navds-table--small .navds-table__expanded-row-content {
-  padding: var(--a-spacing-2) calc(var(--a-spacing-2) + 3rem);
+  padding-block: var(--a-spacing-2);
+}
+
+.navds-table__expanded-row-content--gutter-both {
+  padding-inline: var(--__ac-table-expanded-row-pi);
+}
+
+.navds-table__expanded-row-content--gutter-left {
+  padding-inline: var(--__ac-table-expanded-row-pi) var(--a-spacing-2);
+}
+
+.navds-table__expanded-row-content--gutter-right {
+  padding-inline: var(--a-spacing-2) var(--__ac-table-expanded-row-pi);
+}
+
+.navds-table__expanded-row-content--gutter-none {
+  padding-inline: var(--a-spacing-2);
 }
 
 @media (forced-colors: active) {