@navikt/ds-css 6.4.1 → 6.6.0

package/dist/component/tabs.css

@@ -7,7 +7,7 @@
 .navds-tabs__tablist {
   display: flex;
   max-width: 100%;
-  width: auto;
+  width: 100%;
   scroll-behavior: smooth;
   -ms-overflow-style: none; /* for Internet Explorer, Edge */
   scrollbar-width: none; /* for Firefox */
@@ -83,6 +83,10 @@
   gap: var(--a-spacing-1);
 }
 
+.navds-tabs__tab-inner > * {
+  display: inline-flex;
+}
+
 .navds-tabs__tab-inner svg {
   flex-shrink: 0;
 }
@@ -117,6 +121,10 @@
   font-size: 1.5rem;
 }
 
+.navds-tabs__tab--fill {
+  flex: 1 1 100%;
+}
+
 .navds-tabs__tabpanel:focus-visible {
   outline: 2px solid transparent;
   box-shadow: inset 0 0 0 2px var(--a-border-focus);

package/dist/component/tabs.min.css

@@ -1 +1 @@
-.navds-tabs__tablist-wrapper{box-shadow:inset 0 -1px 0 0 var(--ac-tabs-border,var(--a-border-divider));display:flex;width:100%}.navds-tabs__tablist{display:flex;max-width:100%;scroll-behavior:smooth;width:auto;-ms-overflow-style:none;overflow-x:scroll;scrollbar-width:none}.navds-tabs__tablist::-webkit-scrollbar{display:none}.navds-tabs__scroll-button{align-items:center;cursor:pointer;display:flex;justify-content:center;padding:var(--a-spacing-3) var(--a-spacing-4);width:2.75rem}.navds-tabs__scroll-button--hidden{visibility:hidden}.navds-tabs__scroll-button svg{flex-shrink:0;font-size:1.25rem}.navds-tabs--small .navds-tabs__scroll-button{padding:var(--a-spacing-1-alt) var(--a-spacing-4);width:2rem}.navds-tabs__tab{align-items:center;background:none;border:none;color:var(--ac-tabs-text,var(--a-text-default));cursor:pointer;display:inline-flex;justify-content:center;min-height:3rem;padding:var(--a-spacing-3) var(--a-spacing-4)}.navds-tabs__tab:hover{box-shadow:inset 0 -3px 0 0 var(--ac-tabs-hover-border,var(--a-border-subtle-hover))}.navds-tabs__tab[aria-selected=true]{box-shadow:inset 0 -3px 0 0 var(--ac-tabs-selected-border,var(--a-border-action-selected));color:var(--ac-tabs-selected-text,var(--a-text-default))}.navds-tabs__tab:focus-visible{box-shadow:inset var(--a-shadow-focus);color:var(--ac-tabs-focus-text,var(--a-text-default));outline:2px solid #0000;outline-offset:-2px}@supports not selector(:focus-visible){.navds-tabs__tab:focus{box-shadow:inset var(--a-shadow-focus);color:var(--ac-tabs-focus-text,var(--a-text-default));outline:2px solid #0000}}.navds-tabs__tab-inner{align-items:center;display:flex;gap:var(--a-spacing-1)}.navds-tabs__tab-inner svg{flex-shrink:0}.navds-tabs__tab-icon--top>.navds-tabs__tab-inner{flex-direction:column;gap:0}.navds-tabs__tab--small{min-height:2rem;padding:var(--a-spacing-1-alt) var(--a-spacing-4)}.navds-tabs__tab--small.navds-tabs__tab-icon--top,.navds-tabs__tab-icon--top{padding:var(--a-spacing-1) var(--a-spacing-4)}.navds-tabs__tab svg,.navds-tabs__tab--small.navds-tabs__tab--icon-only svg,.navds-tabs__tab--small.navds-tabs__tab-icon--top svg{font-size:1.25rem}.navds-tabs__tab--small svg{font-size:1rem}.navds-tabs__tab--icon-only svg,.navds-tabs__tab-icon--top svg{font-size:1.5rem}.navds-tabs__tabpanel:focus-visible{box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:2px solid #0000}@supports not selector(:focus-visible){.navds-tabs__tabpanel:focus{box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:2px solid #0000}}@media (forced-colors:active){.navds-tabs__tab[aria-selected=true]{border-bottom:3px solid canvastext;padding-block-end:calc(var(--a-spacing-3) - 3px)}.navds-tabs__tab--small[aria-selected=true]{padding-block-end:calc(var(--a-spacing-1-alt) - 3px)}.navds-tabs__tab--small.navds-tabs__tab-icon--top[aria-selected=true],.navds-tabs__tab-icon--top[aria-selected=true]{padding-block-end:calc(var(--a-spacing-1) - 3px)}}
+.navds-tabs__tablist-wrapper{box-shadow:inset 0 -1px 0 0 var(--ac-tabs-border,var(--a-border-divider));display:flex;width:100%}.navds-tabs__tablist{display:flex;max-width:100%;scroll-behavior:smooth;width:100%;-ms-overflow-style:none;overflow-x:scroll;scrollbar-width:none}.navds-tabs__tablist::-webkit-scrollbar{display:none}.navds-tabs__scroll-button{align-items:center;cursor:pointer;display:flex;justify-content:center;padding:var(--a-spacing-3) var(--a-spacing-4);width:2.75rem}.navds-tabs__scroll-button--hidden{visibility:hidden}.navds-tabs__scroll-button svg{flex-shrink:0;font-size:1.25rem}.navds-tabs--small .navds-tabs__scroll-button{padding:var(--a-spacing-1-alt) var(--a-spacing-4);width:2rem}.navds-tabs__tab{align-items:center;background:none;border:none;color:var(--ac-tabs-text,var(--a-text-default));cursor:pointer;display:inline-flex;justify-content:center;min-height:3rem;padding:var(--a-spacing-3) var(--a-spacing-4)}.navds-tabs__tab:hover{box-shadow:inset 0 -3px 0 0 var(--ac-tabs-hover-border,var(--a-border-subtle-hover))}.navds-tabs__tab[aria-selected=true]{box-shadow:inset 0 -3px 0 0 var(--ac-tabs-selected-border,var(--a-border-action-selected));color:var(--ac-tabs-selected-text,var(--a-text-default))}.navds-tabs__tab:focus-visible{box-shadow:inset var(--a-shadow-focus);color:var(--ac-tabs-focus-text,var(--a-text-default));outline:2px solid #0000;outline-offset:-2px}@supports not selector(:focus-visible){.navds-tabs__tab:focus{box-shadow:inset var(--a-shadow-focus);color:var(--ac-tabs-focus-text,var(--a-text-default));outline:2px solid #0000}}.navds-tabs__tab-inner{align-items:center;display:flex;gap:var(--a-spacing-1)}.navds-tabs__tab-inner>*{display:inline-flex}.navds-tabs__tab-inner svg{flex-shrink:0}.navds-tabs__tab-icon--top>.navds-tabs__tab-inner{flex-direction:column;gap:0}.navds-tabs__tab--small{min-height:2rem;padding:var(--a-spacing-1-alt) var(--a-spacing-4)}.navds-tabs__tab--small.navds-tabs__tab-icon--top,.navds-tabs__tab-icon--top{padding:var(--a-spacing-1) var(--a-spacing-4)}.navds-tabs__tab svg,.navds-tabs__tab--small.navds-tabs__tab--icon-only svg,.navds-tabs__tab--small.navds-tabs__tab-icon--top svg{font-size:1.25rem}.navds-tabs__tab--small svg{font-size:1rem}.navds-tabs__tab--icon-only svg,.navds-tabs__tab-icon--top svg{font-size:1.5rem}.navds-tabs__tab--fill{flex:1 1 100%}.navds-tabs__tabpanel:focus-visible{box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:2px solid #0000}@supports not selector(:focus-visible){.navds-tabs__tabpanel:focus{box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:2px solid #0000}}@media (forced-colors:active){.navds-tabs__tab[aria-selected=true]{border-bottom:3px solid canvastext;padding-block-end:calc(var(--a-spacing-3) - 3px)}.navds-tabs__tab--small[aria-selected=true]{padding-block-end:calc(var(--a-spacing-1-alt) - 3px)}.navds-tabs__tab--small.navds-tabs__tab-icon--top[aria-selected=true],.navds-tabs__tab-icon--top[aria-selected=true]{padding-block-end:calc(var(--a-spacing-1) - 3px)}}

package/dist/component/togglegroup.css

@@ -4,6 +4,10 @@
   gap: var(--a-spacing-2);
 }
 
+.navds-toggle-group__wrapper--fill {
+  justify-items: initial;
+}
+
 .navds-toggle-group {
   border-radius: var(--a-border-radius-medium);
   background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));

package/dist/component/togglegroup.min.css

@@ -1 +1 @@
-.navds-toggle-group__wrapper{display:grid;gap:var(--a-spacing-2);justify-items:start}.navds-toggle-group{background-color:var(--ac-toggle-group-bg,var(--a-surface-transparent));border-radius:var(--a-border-radius-medium);box-shadow:inset 0 0 0 1px var(--ac-toggle-group-border,var(--a-border-default));display:inline-grid;gap:var(--a-spacing-1);grid-auto-columns:1fr;grid-auto-flow:column;padding:calc(var(--a-spacing-1) + .0625rem)}.navds-toggle-group--small{padding:calc(var(--a-spacing-05) + .0625rem)}.navds-toggle-group--neutral{background-color:var(--ac-toggle-group-neutral-bg,var(--a-surface-transparent));box-shadow:inset 0 0 0 1px var(--ac-toggle-group-neutral-border,var(--a-border-default))}.navds-toggle-group__button{align-items:center;background-color:var(--ac-toggle-group-button-bg,var(--a-surface-transparent));border:none;border-radius:var(--a-border-radius-small);color:var(--ac-toggle-group-button-text,var(--a-text-default));cursor:pointer;display:inline-flex;font-weight:var(--a-font-weight-regular);justify-content:center;min-height:2.375rem;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding:var(--a-spacing-1) var(--a-spacing-3)}.navds-toggle-group--medium>:where(.navds-toggle-group__button:first-of-type:focus-visible){border-end-start-radius:1px;border-start-start-radius:1px}.navds-toggle-group--medium>:where(.navds-toggle-group__button:last-of-type:focus-visible){border-end-end-radius:1px;border-start-end-radius:1px}.navds-toggle-group--neutral>.navds-toggle-group__button{background-color:var(--ac-toggle-group-button-neutral-bg,var(--a-surface-transparent));color:var(--ac-toggle-group-button-neutral-text,var(--a-text-default))}.navds-toggle-group__button:hover{background-color:var(--ac-toggle-group-button-hover-bg,var(--a-surface-action-subtle));color:var(--ac-toggle-group-button-hover-text,var(--a-text-default))}.navds-toggle-group--neutral>.navds-toggle-group__button:hover{background-color:var(--ac-toggle-group-button-neutral-hover-bg,var(--a-surface-neutral-subtle-hover));color:var(--ac-toggle-group-button-neutral-hover-text,var(--a-text-default))}.navds-toggle-group__button:focus-visible{box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 4px var(--a-border-focus);outline:2px solid #0000;outline-offset:1px}@supports not selector(:focus-visible){.navds-toggle-group__button:focus{box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 4px var(--a-border-focus);outline:2px solid #0000;outline-offset:1px}}.navds-toggle-group__button:focus-visible:hover[aria-pressed=false]{box-shadow:0 0 0 1px var(--ac-toggle-group-button-hover-bg,var(--a-surface-action-subtle)),0 0 0 4px var(--a-border-focus)}@supports not selector(:focus-visible){.navds-toggle-group__button:focus:hover[aria-pressed=false]{box-shadow:0 0 0 1px var(--ac-toggle-group-button-hover-bg,var(--a-surface-action-subtle)),0 0 0 4px var(--a-border-focus)}}.navds-toggle-group--neutral>.navds-toggle-group__button:focus:hover[aria-pressed=false]{box-shadow:0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg,var(--a-surface-neutral-subtle-hover)),0 0 0 4px var(--a-border-focus)}@supports not selector(:focus-visible){.navds-toggle-group--neutral>.navds-toggle-group__button:focus-visible:hover[aria-pressed=false]{box-shadow:0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg,var(--a-surface-neutral-subtle-hover)),0 0 0 4px var(--a-border-focus)}}.navds-toggle-group__button-inner{align-items:center;display:flex;font-weight:inherit;gap:var(--a-spacing-2)}.navds-toggle-group__button-inner>*{flex-shrink:0}.navds-toggle-group__button[aria-checked=true],.navds-toggle-group__button[aria-pressed=true]{background-color:var(--ac-toggle-group-selected-bg,var(--a-surface-action-selected));color:var(--ac-toggle-group-selected-text,var(--a-text-on-action))}.navds-toggle-group--neutral>.navds-toggle-group__button[aria-checked=true],.navds-toggle-group--neutral>.navds-toggle-group__button[aria-pressed=true]{background-color:var(--ac-toggle-group-neutral-selected-bg,var(--a-surface-neutral-selected));color:var(--ac-toggle-group-neutral-selected-text,var(--a-text-on-neutral))}.navds-toggle-group--small>.navds-toggle-group__button{min-height:1.625rem;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding:var(--a-spacing-05) var(--a-spacing-3)}.navds-toggle-group__button>.navds-toggle-group__button-inner>svg{font-size:1.5rem}.navds-toggle-group--small>.navds-toggle-group__button>.navds-toggle-group__button-inner>svg{font-size:1.125rem}@media (forced-colors:active){.navds-toggle-group{border:2px solid #0000}.navds-toggle-group__button:hover{color:highlight}.navds-toggle-group__button[aria-checked=true],.navds-toggle-group__button[aria-pressed=true]{background-color:selecteditem;color:selecteditemtext}.navds-toggle-group__button[aria-checked=true]>*,.navds-toggle-group__button[aria-pressed=true]>*{forced-color-adjust:none}.navds-toggle-group__button:active{background-color:none!important}.navds-toggle-group__button:focus-visible{outline-color:highlight}}
+.navds-toggle-group__wrapper{display:grid;gap:var(--a-spacing-2);justify-items:start}.navds-toggle-group__wrapper--fill{justify-items:legacy}.navds-toggle-group{background-color:var(--ac-toggle-group-bg,var(--a-surface-transparent));border-radius:var(--a-border-radius-medium);box-shadow:inset 0 0 0 1px var(--ac-toggle-group-border,var(--a-border-default));display:inline-grid;gap:var(--a-spacing-1);grid-auto-columns:1fr;grid-auto-flow:column;padding:calc(var(--a-spacing-1) + .0625rem)}.navds-toggle-group--small{padding:calc(var(--a-spacing-05) + .0625rem)}.navds-toggle-group--neutral{background-color:var(--ac-toggle-group-neutral-bg,var(--a-surface-transparent));box-shadow:inset 0 0 0 1px var(--ac-toggle-group-neutral-border,var(--a-border-default))}.navds-toggle-group__button{align-items:center;background-color:var(--ac-toggle-group-button-bg,var(--a-surface-transparent));border:none;border-radius:var(--a-border-radius-small);color:var(--ac-toggle-group-button-text,var(--a-text-default));cursor:pointer;display:inline-flex;font-weight:var(--a-font-weight-regular);justify-content:center;min-height:2.375rem;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding:var(--a-spacing-1) var(--a-spacing-3)}.navds-toggle-group--medium>:where(.navds-toggle-group__button:first-of-type:focus-visible){border-end-start-radius:1px;border-start-start-radius:1px}.navds-toggle-group--medium>:where(.navds-toggle-group__button:last-of-type:focus-visible){border-end-end-radius:1px;border-start-end-radius:1px}.navds-toggle-group--neutral>.navds-toggle-group__button{background-color:var(--ac-toggle-group-button-neutral-bg,var(--a-surface-transparent));color:var(--ac-toggle-group-button-neutral-text,var(--a-text-default))}.navds-toggle-group__button:hover{background-color:var(--ac-toggle-group-button-hover-bg,var(--a-surface-action-subtle));color:var(--ac-toggle-group-button-hover-text,var(--a-text-default))}.navds-toggle-group--neutral>.navds-toggle-group__button:hover{background-color:var(--ac-toggle-group-button-neutral-hover-bg,var(--a-surface-neutral-subtle-hover));color:var(--ac-toggle-group-button-neutral-hover-text,var(--a-text-default))}.navds-toggle-group__button:focus-visible{box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 4px var(--a-border-focus);outline:2px solid #0000;outline-offset:1px}@supports not selector(:focus-visible){.navds-toggle-group__button:focus{box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 4px var(--a-border-focus);outline:2px solid #0000;outline-offset:1px}}.navds-toggle-group__button:focus-visible:hover[aria-pressed=false]{box-shadow:0 0 0 1px var(--ac-toggle-group-button-hover-bg,var(--a-surface-action-subtle)),0 0 0 4px var(--a-border-focus)}@supports not selector(:focus-visible){.navds-toggle-group__button:focus:hover[aria-pressed=false]{box-shadow:0 0 0 1px var(--ac-toggle-group-button-hover-bg,var(--a-surface-action-subtle)),0 0 0 4px var(--a-border-focus)}}.navds-toggle-group--neutral>.navds-toggle-group__button:focus:hover[aria-pressed=false]{box-shadow:0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg,var(--a-surface-neutral-subtle-hover)),0 0 0 4px var(--a-border-focus)}@supports not selector(:focus-visible){.navds-toggle-group--neutral>.navds-toggle-group__button:focus-visible:hover[aria-pressed=false]{box-shadow:0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg,var(--a-surface-neutral-subtle-hover)),0 0 0 4px var(--a-border-focus)}}.navds-toggle-group__button-inner{align-items:center;display:flex;font-weight:inherit;gap:var(--a-spacing-2)}.navds-toggle-group__button-inner>*{flex-shrink:0}.navds-toggle-group__button[aria-checked=true],.navds-toggle-group__button[aria-pressed=true]{background-color:var(--ac-toggle-group-selected-bg,var(--a-surface-action-selected));color:var(--ac-toggle-group-selected-text,var(--a-text-on-action))}.navds-toggle-group--neutral>.navds-toggle-group__button[aria-checked=true],.navds-toggle-group--neutral>.navds-toggle-group__button[aria-pressed=true]{background-color:var(--ac-toggle-group-neutral-selected-bg,var(--a-surface-neutral-selected));color:var(--ac-toggle-group-neutral-selected-text,var(--a-text-on-neutral))}.navds-toggle-group--small>.navds-toggle-group__button{min-height:1.625rem;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding:var(--a-spacing-05) var(--a-spacing-3)}.navds-toggle-group__button>.navds-toggle-group__button-inner>svg{font-size:1.5rem}.navds-toggle-group--small>.navds-toggle-group__button>.navds-toggle-group__button-inner>svg{font-size:1.125rem}@media (forced-colors:active){.navds-toggle-group{border:2px solid #0000}.navds-toggle-group__button:hover{color:highlight}.navds-toggle-group__button[aria-checked=true],.navds-toggle-group__button[aria-pressed=true]{background-color:selecteditem;color:selecteditemtext}.navds-toggle-group__button[aria-checked=true]>*,.navds-toggle-group__button[aria-pressed=true]>*{forced-color-adjust:none}.navds-toggle-group__button:active{background-color:none!important}.navds-toggle-group__button:focus-visible{outline-color:highlight}}

package/dist/components.css

@@ -4295,6 +4295,84 @@
   }
 }
 
+.navds-form-summary {
+  overflow: hidden;
+  border: 1px solid var(--a-border-subtle);
+  border-radius: var(--a-border-radius-large);
+}
+
+.navds-form-summary__header {
+  background-color: var(--a-surface-subtle);
+  padding: var(--a-spacing-4) var(--a-spacing-6);
+  display: flex;
+  justify-content: space-between;
+  gap: 0 var(--a-spacing-2);
+}
+
+@media (max-width: 479px) {
+  .navds-form-summary__header {
+    padding: var(--a-spacing-3) var(--a-spacing-4);
+    flex-direction: column;
+  }
+}
+
+.navds-form-summary__edit {
+  flex-shrink: 0;
+  margin-top: var(--a-spacing-1);
+  align-self: flex-start;
+}
+
+.navds-form-summary > .navds-form-summary__answers {
+  border-top: 1px solid var(--a-border-subtle);
+}
+
+.navds-form-summary__answers {
+  padding: var(--a-spacing-5) var(--a-spacing-6) var(--a-spacing-6);
+  margin: 0;
+}
+
+@media (max-width: 479px) {
+  .navds-form-summary__answers {
+    padding: var(--a-spacing-4);
+  }
+}
+
+.navds-form-summary__answer:not(:last-child) {
+  margin-bottom: var(--a-spacing-4);
+  padding-bottom: var(--a-spacing-4);
+  border-bottom: 1px solid var(--a-border-divider);
+}
+
+.navds-form-summary__answer:has(.navds-form-summary__answer) {
+  padding-bottom: var(--a-spacing-6);
+}
+
+.navds-form-summary__answer:has(.navds-form-summary__answer):last-child {
+  padding-bottom: 0;
+}
+
+@media (max-width: 479px) {
+  .navds-form-summary__answer:not(:last-child) {
+    margin-bottom: var(--a-spacing-3);
+    padding-bottom: var(--a-spacing-3);
+  }
+
+  .navds-form-summary__answer:has(.navds-form-summary__answer) {
+    padding-bottom: var(--a-spacing-5);
+  }
+}
+
+.navds-form-summary__value:first-of-type {
+  margin-top: var(--a-spacing-1);
+}
+
+.navds-form-summary__value :where(.navds-form-summary__answers) {
+  margin-top: var(--a-spacing-2);
+  padding: var(--a-spacing-4);
+  background: var(--a-surface-selected);
+  border-radius: var(--a-border-radius-large);
+}
+
 .navds-help-text__button {
   margin: 0;
   border: 0;
@@ -6099,6 +6177,10 @@ button.navds-internalheader__title:active,
   gap: var(--a-spacing-2);
 }
 
+.navds-toggle-group__wrapper--fill {
+  justify-items: initial;
+}
+
 .navds-toggle-group {
   border-radius: var(--a-border-radius-medium);
   background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
@@ -7101,7 +7183,7 @@ button.navds-stepper__step {
 .navds-tabs__tablist {
   display: flex;
   max-width: 100%;
-  width: auto;
+  width: 100%;
   scroll-behavior: smooth;
   -ms-overflow-style: none; /* for Internet Explorer, Edge */
   scrollbar-width: none; /* for Firefox */
@@ -7177,6 +7259,10 @@ button.navds-stepper__step {
   gap: var(--a-spacing-1);
 }
 
+.navds-tabs__tab-inner > * {
+  display: inline-flex;
+}
+
 .navds-tabs__tab-inner svg {
   flex-shrink: 0;
 }
@@ -7211,6 +7297,10 @@ button.navds-stepper__step {
   font-size: 1.5rem;
 }
 
+.navds-tabs__tab--fill {
+  flex: 1 1 100%;
+}
+
 .navds-tabs__tabpanel:focus-visible {
   outline: 2px solid transparent;
   box-shadow: inset 0 0 0 2px var(--a-border-focus);