@navikt/ds-css 0.16.7 → 0.16.10

package/form/confirmation-panel.css

@@ -39,7 +39,7 @@
   flex-direction: column;
   gap: var(--navds-spacing-4);
   padding: var(--navds-spacing-4);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
   border: 1px solid var(--navds-confirmation-panel-color-border);
   background-color: var(--navds-confirmation-panel-color-background);
   transition: background-color linear 100ms;

package/form/radio-checkbox.css

@@ -57,12 +57,12 @@
   box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow);
   width: 1.5rem;
   height: 1.5rem;
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
   flex-shrink: 0;
 }
 
 .navds-radio__label::before {
-  border-radius: 50%;
+  border-radius: var(--navds-border-radius-full);
 }
 
 .navds-checkbox__content,
@@ -121,7 +121,7 @@
   background-color: var(--navds-radio-checkbox-color-background);
   width: 0.75rem;
   height: 0.25rem;
-  border-radius: 1px;
+  border-radius: 1px; /* Custom value OK */
   flex-shrink: 0;
 }
 

package/form/select.css

@@ -22,7 +22,7 @@
 .navds-select__input {
   appearance: none;
   background-color: var(--navds-select-color-background);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
   border: 1px solid var(--navds-select-color-border);
   width: 100%;
   box-sizing: border-box;

package/form/switch.css

@@ -112,7 +112,7 @@
   position: absolute;
   top: var(--navds-spacing-3);
   left: 0;
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
   transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -155,7 +155,7 @@
 .navds-switch__thumb {
   background-color: var(--navds-switch-color-thumb);
   color: var(--navds-switch-color-thumb-icon);
-  border-radius: 2.5px;
+  border-radius: var(--navds-border-radius-small);
   width: 20px;
   height: 20px;
   position: absolute;

package/form/text-field.css

@@ -24,7 +24,7 @@
   appearance: none;
   padding: 0.5rem;
   background-color: var(--navds-text-field-color-background);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
   border: 1px solid var(--navds-text-field-color-border);
   min-height: 48px;
   width: 100%;

package/form/textarea.css

@@ -32,7 +32,7 @@
   appearance: none;
   padding: var(--navds-spacing-2);
   background-color: var(--navds-textarea-color-background);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
   border: 1px solid var(--navds-textarea-color-border);
   resize: none;
   width: 100%;

package/guide-panel.css

@@ -18,7 +18,7 @@
 
 .navds-guide-panel__content {
   background-color: var(--navds-guide-panel-color-background);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
   border: 2px solid var(--navds-guide-panel-color-border);
   min-height: 7.25rem;
   padding: 1.5rem;
@@ -58,7 +58,7 @@
 /* Guide illustration frame */
 .navds-guide__illustration {
   background: var(--navds-guide-panel-color-illustration-background);
-  border-radius: 50%;
+  border-radius: var(--navds-border-radius-full);
   overflow: hidden;
 }
 

package/help-text.css

@@ -27,7 +27,7 @@
   border: 0;
   cursor: pointer;
   background-color: transparent;
-  border-radius: 50%;
+  border-radius: var(--navds-border-radius-full);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -49,7 +49,7 @@
 }
 
 .navds-help-text__icon {
-  border-radius: 50%;
+  border-radius: var(--navds-border-radius-full);
 }
 
 .navds-help-text__popover > .navds-popover__arrow::before {

package/index.css

@@ -23,7 +23,9 @@
 @import "read-more.css";
 @import "speech-bubble.css";
 @import "step-indicator.css";
+@import "stepper.css";
 @import "table.css";
+@import "tabs.css";
 
 /* Navno spesific packages */
 @import "page-header.css";

package/modal.css

@@ -11,7 +11,7 @@
 
 .navds-modal {
   background-color: var(--navds-modal-color-background);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
   display: block;
   position: relative;
   overflow: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.16.7",
+  "version": "0.16.10",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -27,5 +27,5 @@
     "postcss-cli": "^8.3.1",
     "postcss-import": "^14.0.2"
   },
-  "gitHead": "85dd252e433d55be01ed0ad58396a8442af7387d"
+  "gitHead": "f62b9a6f7b6a172b72080548f51c15a6c814d0fd"
 }

package/pagination.css

@@ -47,7 +47,7 @@
   text-decoration: none;
   border: none;
   background: none;
-  border-radius: 2px;
+  border-radius: var(--navds-border-radius-small);
   padding: var(--navds-spacing-1) var(--navds-spacing-3);
 }
 
@@ -87,7 +87,7 @@
   color: var(--navds-semantic-color-link);
   align-items: center;
   gap: var(--navds-spacing-1);
-  border-radius: 2px;
+  border-radius: var(--navds-border-radius-small);
 }
 
 .navds-pagination__prev-next:focus {

package/panel.css

@@ -8,7 +8,7 @@
 .navds-panel {
   background-color: var(--navds-panel-color-background);
   padding: var(--navds-spacing-4);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-small);
   border: 1px solid transparent;
 }
 

package/popover.css

@@ -11,7 +11,7 @@
   box-shadow: var(--navds-shadow-popover);
   border: 1px solid;
   border-color: var(--navds-popover-color-border);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
 }
 
 .navds-popover__content {

package/speech-bubble.css

@@ -38,7 +38,7 @@
   align-items: center;
   background: var(--navds-speechbubble-color-illustration-background);
   color: var(--navds-speechbubble-color-illustration);
-  border-radius: 50%;
+  border-radius: var(--navds-border-radius-full);
   display: flex;
   flex-shrink: 0;
   justify-content: center;
@@ -59,7 +59,7 @@
   width: fit-content;
   max-width: 37.5rem;
   background-color: var(--navds-speechbubble-color-background);
-  border-radius: 12px;
+  border-radius: var(--navds-border-radius-xlarge);
   border-bottom-left-radius: 2px;
   display: flex;
   flex-direction: column;
@@ -72,7 +72,7 @@
 }
 
 .navds-speechbubble--right .navds-speechbubble__bubble {
-  border-radius: 12px;
+  border-radius: var(--navds-border-radius-xlarge);
   border-bottom-right-radius: 2px;
 }
 

package/step-indicator.css

@@ -72,7 +72,7 @@
   width: 2rem;
   height: 2rem;
   margin: 0.5rem;
-  border-radius: 50%;
+  border-radius: var(--navds-border-radius-full);
   align-items: center;
   justify-content: center;
   box-shadow: 0 0 0 1px var(--navds-step-indicator-color-step-number-shadow);
@@ -107,7 +107,7 @@
   left: calc(-50% + 2rem);
   display: block;
   border-top: 2px solid var(--navds-step-indicator-color-step-line);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
   pointer-events: none;
 }
 

package/stepper.css

@@ -0,0 +1,99 @@
+.navds-stepper {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+/* Step */
+.navds-stepper__step {
+  position: relative;
+  cursor: pointer;
+  padding: calc(2.25rem / 2) 0;
+  display: flex;
+  background: none;
+  border: none;
+  appearance: none;
+  width: 100%;
+  color: var(--navds-semantic-color-text);
+  text-decoration: none;
+  flex-shrink: 0;
+}
+
+.navds-stepper__step-number {
+  flex-shrink: 0;
+  display: flex;
+  width: 28px;
+  height: 28px;
+  margin: 0;
+  margin-right: var(--navds-spacing-3);
+  border-radius: var(--navds-border-radius-full);
+  align-items: center;
+  justify-content: center;
+  color: var(--navds-semantic-color-interaction-primary);
+  box-shadow: inset 0 0 0 2px var(--navds-semantic-color-interaction-primary);
+  background-color: var(--navds-semantic-color-component-background-light);
+}
+
+/* Step-states: focus, active, hover */
+.navds-stepper__step-wrapper:hover
+  > .navds-stepper__step
+  > .navds-stepper__step-number {
+  background-color: var(
+    --navds-semantic-color-interaction-primary-hover-subtle
+  );
+}
+
+.navds-stepper__step--active > .navds-stepper__step-number,
+.navds-stepper__step-wrapper:hover
+  > .navds-stepper__step--active
+  > .navds-stepper__step-number {
+  color: var(--navds-semantic-color-text-inverted);
+  background-color: var(--navds-semantic-color-interaction-primary-selected);
+  box-shadow: inset 0 0 0 2px
+    var(--navds-semantic-color-interaction-primary-selected);
+}
+
+.navds-stepper__step:focus {
+  box-shadow: var(--navds-shadow-focus);
+  outline: none;
+}
+
+.navds-stepper__step--active {
+  cursor: default;
+}
+
+/* Step label */
+.navds-stepper__step-label {
+  margin-top: 2px;
+  color: var(--navds-semantic-color-interaction-primary);
+  text-align: start;
+}
+
+.navds-stepper__step:hover > .navds-stepper__step-label {
+  text-decoration: underline;
+}
+
+.navds-stepper__step--active > .navds-stepper__step-label {
+  color: black;
+}
+
+.navds-stepper__step--active:hover > .navds-stepper__step-label {
+  text-decoration: none;
+}
+
+/* Step Horizontal Lines */
+
+.navds-stepper__step-wrapper:not(:last-child) > .navds-stepper__step::after {
+  content: "";
+  position: absolute;
+  top: calc(28px + 8px + (2.25rem / 2));
+  left: 13px;
+  height: calc(100% - 2.75rem);
+  display: block;
+  border-left: 2px solid var(--navds-semantic-color-border-muted);
+  border-radius: var(--navds-border-radius-medium);
+  pointer-events: none;
+  z-index: -1;
+}

package/tabs.css

@@ -0,0 +1,108 @@
+.navds-tabs__tablist-wrapper {
+  box-shadow: inset 0 -1px 0 0 var(--navds-global-color-gray-300);
+  width: 100%;
+  display: flex;
+}
+
+.navds-tabs__tablist {
+  display: flex;
+  max-width: 100%;
+  width: auto;
+  scroll-behavior: smooth;
+  -ms-overflow-style: none; /* for Internet Explorer, Edge */
+  scrollbar-width: none; /* for Firefox */
+  overflow-x: scroll;
+}
+
+.navds-tabs__tablist::-webkit-scrollbar {
+  display: none; /* for Chrome, Safari, and Opera */
+}
+
+.navds-tabs__scroll-button {
+  padding: var(--navds-spacing-3) var(--navds-spacing-4);
+  width: 44px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.navds-tabs__scroll-button--hidden {
+  visibility: hidden;
+}
+
+.navds-tabs__scroll-button svg {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+}
+
+.navds-tabs--small .navds-tabs__scroll-button {
+  padding: 0.375rem var(--navds-spacing-4);
+  width: 32px;
+}
+
+.navds-tabs__tab {
+  min-height: 48px;
+  padding: var(--navds-spacing-3) var(--navds-spacing-4);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  background: none;
+  border: none;
+  color: var(--navds-semantic-color-text-muted);
+  cursor: pointer;
+}
+
+.navds-tabs__tab:hover {
+  box-shadow: inset 0 -3px 0 0 var(--navds-global-color-gray-300);
+}
+
+.navds-tabs__tab[aria-selected="true"] {
+  box-shadow: inset 0 -3px 0 0 var(--navds-semantic-color-interaction-primary);
+  color: var(--navds-semantic-color-text);
+}
+
+.navds-tabs__tab:focus {
+  outline: none;
+  box-shadow: inset var(--navds-shadow-focus);
+  color: var(--navds-semantic-color-text);
+}
+
+.navds-tabs__tab-inner {
+  display: flex;
+  align-items: center;
+  gap: var(--navds-spacing-1);
+}
+
+.navds-tabs__tab-icon--top > .navds-tabs__tab-inner {
+  flex-direction: column;
+  gap: 0;
+}
+
+.navds-tabs__tab--small {
+  min-height: 32px;
+  padding: 0.375rem var(--navds-spacing-4);
+}
+
+.navds-tabs__tab-icon--top,
+.navds-tabs__tab--small.navds-tabs__tab-icon--top {
+  padding: var(--navds-spacing-1) var(--navds-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 {
+  outline: none;
+}

package/tag.css

@@ -32,7 +32,7 @@
 .navds-tag {
   border: 1px solid;
   border-color: var(--navds-tag-color-border);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
   background-color: var(--navds-tag-color-background);
   display: inline-flex;
   align-items: center;

package/toggle-group.css

@@ -19,7 +19,7 @@
 }
 
 .navds-toggle-group {
-  border-radius: 7px;
+  border-radius: 7px; /* Custom value OK */
   background-color: var(--navds-toggle-group-color-background);
   box-shadow: inset 0 0 0 1px var(--navds-toggle-group-color-border);
   padding: calc(var(--navds-spacing-1) + 1px);
@@ -39,7 +39,7 @@
   cursor: pointer;
   background-color: var(--navds-toggle-group-color-background);
   color: var(--navds-toggle-group-color-text);
-  border-radius: 2px;
+  border-radius: var(--navds-border-radius-small);
   min-width: fit-content;
 }