@navikt/ds-css 7.12.2 → 7.14.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @navikt/ds-css
 
+## 7.14.0
+
+### Minor Changes
+
+- DatePicker: Updated `date.css` to support `react-day-picker v9`. ([#3525](https://github.com/navikt/aksel/pull/3525))
+
+### Patch Changes
+
+- Darkside: Added 'arrow' back to Tooltip. ([#3589](https://github.com/navikt/aksel/pull/3589))
+
+## 7.13.0
+
+### Patch Changes
+
+- Darkside: Added support for `ConfirmationpPanel`, `Linkpanel`, `Panel` and `Dropdown`. Note that all of these will be deprecated in the future. ([#3581](https://github.com/navikt/aksel/pull/3581))
+
 ## 7.12.2
 
 ## 7.12.1

package/config/tests/bundle.test.ts

@@ -6,7 +6,7 @@ import { describe, expect, test } from "vitest";
  * Darkside config might have some new files added. We can skip these when checking for equality.
  */
 const newFiles = ["theme"];
-const deprecatedFiles = ["linkpanel"];
+const deprecatedFiles: string[] = [];
 
 describe("Check that old and new (darkside) bundle matches", () => {
   test("Darkside includes the same files as old bundle", () => {

package/darkside/dropdown.darkside.css

@@ -1,20 +1,20 @@
 .navds-dropdown__menu {
   overflow: hidden;
-  padding: var(--a-spacing-2) 0;
-  color: var(--ac-dropdown-text, var(--a-text-default));
+  padding: var(--ax-space-8);
+  color: var(--ax-text-neutral);
   width: 27ch;
   max-height: 616px;
   overflow-y: auto;
 }
 
 .navds-dropdown__divider {
-  margin: var(--a-spacing-3) 0;
+  margin: var(--ax-space-12) 0;
   border: none;
-  border-bottom: 1px solid var(--a-border-divider);
+  border-bottom: 1px solid var(--ax-border-neutral-subtle);
 }
 
 .navds-dropdown__menu > :not(.navds-dropdown__divider, .navds-dropdown__list) {
-  margin: 0 var(--a-spacing-4) var(--a-spacing-3);
+  margin: 0 var(--ax-space-16) var(--ax-space-12);
 }
 
 .navds-dropdown__list {
@@ -28,7 +28,8 @@
 }
 
 .navds-dropdown__list-heading {
-  margin: var(--a-spacing-1) var(--a-spacing-4) var(--a-spacing-3);
+  margin-block: var(--ax-space-4) var(--ax-space-12);
+  margin-inline: var(--ax-space-4);
 }
 
 .navds-dropdown__item {
@@ -36,7 +37,6 @@
   margin: 0;
   overflow: visible;
   background: transparent;
-  color: var(--ac-dropdown-item-text, var(--a-text-action));
   font: inherit;
   text-decoration: none;
   text-align: left;
@@ -44,39 +44,29 @@
   width: 100%;
   display: flex;
   align-items: center;
-  gap: var(--a-spacing-2);
-  padding: var(--a-spacing-1) var(--a-spacing-4);
-}
-
-.navds-dropdown__item:hover {
-  background-color: var(--ac-dropdown-item-hover-bg, var(--a-surface-action-subtle-hover));
-  color: var(--ac-dropdown-item-hover-text, var(--a-text-action-hover));
-}
+  gap: var(--ax-space-8);
+  padding: var(--ax-space-4);
+  border-radius: var(--ax-border-radius-medium);
+  color: var(--ax-text-neutral);
 
-.navds-dropdown__item:active {
-  background-color: var(--ac-dropdown-item-active-bg, var(--a-surface-action-active));
-  color: var(--ac-dropdown-item-active-text, var(--a-text-on-action));
-}
+  &:hover {
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+  }
 
-.navds-dropdown__item:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-  box-shadow: inset 0 0 0 2px var(--a-border-focus);
-}
+  &:active {
+    background-color: var(--ax-bg-accent-moderate-pressedA);
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-dropdown__item:focus {
-    outline: 2px solid transparent;
-    outline-offset: -2px;
-    box-shadow: inset 0 0 0 2px var(--a-border-focus);
+  &:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: -3px;
   }
-}
 
-.navds-dropdown__item:disabled {
-  color: var(--ac-dropdown-item-text, var(--a-text-action));
-  opacity: var(--ax-opacity-disabled);
-  background: transparent;
-  cursor: not-allowed;
+  &:disabled {
+    opacity: var(--ax-opacity-disabled);
+    background: transparent;
+    cursor: not-allowed;
+  }
 }
 
 @media (forced-colors: active) {

package/darkside/form/confirmation-panel.darkside.css

@@ -1,11 +1,11 @@
 .navds-confirmation-panel__inner {
   display: flex;
   flex-direction: column;
-  gap: var(--a-spacing-3);
-  padding: var(--a-spacing-4);
-  border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-confirmation-panel-border, var(--a-border-warning));
-  background-color: var(--ac-confirmation-panel-bg, var(--a-surface-warning-subtle));
+  gap: var(--ax-space-12);
+  padding: var(--ax-space-16);
+  border-radius: var(--ax-border-radius-large);
+  border: 1px solid var(--ax-border-default);
+  background-color: var(--ax-bg-moderate);
   transition: background-color linear 100ms;
   justify-self: stretch;
   position: relative;
@@ -15,20 +15,6 @@
   max-width: 80ch;
 }
 
-.navds-confirmation-panel--checked .navds-confirmation-panel__inner {
-  border-color: var(--ac-confirmation-panel-checked-border, var(--a-border-success));
-  background-color: var(--ac-confirmation-panel-checked-bg, var(--a-surface-success-subtle));
-}
-
-.navds-confirmation-panel--error .navds-confirmation-panel__inner {
-  border-color: var(--ac-confirmation-panel-error-border, var(--a-border-danger));
-  background-color: var(--ac-confirmation-panel-error-bg, var(--a-surface-danger-subtle));
-}
-
-.navds-confirmation-panel--error .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label {
-  color: var(--a-text-default);
-}
-
 @media (forced-colors: active) {
   .navds-confirmation-panel__inner::before {
     content: "";
@@ -39,8 +25,8 @@
     border-left: 8px solid;
     border-color: orange;
     forced-color-adjust: none;
-    border-start-start-radius: calc(var(--a-border-radius-medium) - 1px);
-    border-end-start-radius: calc(var(--a-border-radius-medium) - 1px);
+    border-start-start-radius: calc(var(--ax-border-radius-large) - 1px);
+    border-end-start-radius: calc(var(--ax-border-radius-large) - 1px);
   }
 
   .navds-confirmation-panel--checked .navds-confirmation-panel__inner::before {

package/darkside/index.css

@@ -11,6 +11,7 @@
 @import "./baseline/print.darkside.css" layer(aksel.print);
 
 /* ------------------------------- Components ------------------------------- */
+@import "./theme.darkside.css" layer(aksel.components);
 @import "./typography.darkside.css" layer(aksel.components);
 @import "./button.darkside.css" layer(aksel.components);
 @import "./chips.darkside.css" layer(aksel.components);
@@ -36,6 +37,7 @@
 @import "./help-text.darkside.css" layer(aksel.components);
 @import "./internalheader.darkside.css" layer(aksel.components);
 @import "./link.darkside.css" layer(aksel.components);
+@import "./link-panel.darkside.css" layer(aksel.components);
 @import "./loader.darkside.css" layer(aksel.components);
 @import "./modal.darkside.css" layer(aksel.components);
 @import "./pagination.darkside.css" layer(aksel.components);
@@ -52,7 +54,6 @@
 @import "./table.darkside.css" layer(aksel.components);
 @import "./tabs.darkside.css" layer(aksel.components);
 @import "./list.darkside.css" layer(aksel.components);
-@import "./theme.darkside.css" layer(aksel.components);
 
 /* --------------------------------- Layout --------------------------------- */
 @import "./primitives/index.css" layer(aksel.layout);

package/darkside/link-panel.darkside.css

@@ -0,0 +1,37 @@
+.navds-link-panel {
+  text-decoration: none;
+  color: var(--ax-text-neutral);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ax-space-16);
+
+  &:hover {
+    border-color: var(--ax-border-accent);
+
+    & .navds-link-panel__title {
+      text-decoration: underline;
+      color: var(--ax-text-accent-subtle);
+    }
+  }
+
+  &:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
+}
+
+.navds-link-panel__chevron {
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  transition: transform 200ms;
+}
+
+.navds-link-panel:hover > .navds-link-panel__chevron,
+.navds-link-panel:focus-within > .navds-link-panel__chevron {
+  transform: translateX(4px);
+}
+
+.navds-link-panel__description {
+  margin-top: var(--a-space-4);
+}

package/darkside/panel.darkside.css

@@ -1,10 +1,10 @@
 .navds-panel {
-  background-color: var(--ac-panel-bg, var(--a-surface-default));
-  padding: var(--a-spacing-4);
-  border-radius: var(--a-border-radius-small);
+  background-color: var(--ax-bg-default);
+  padding: var(--ax-space-16);
+  border-radius: var(--ax-border-radius-small);
   border: 1px solid transparent;
 }
 
 .navds-panel--border {
-  border-color: var(--ac-panel-border, var(--a-border-default));
+  border-color: var(--ax-border-neutral);
 }

package/darkside/tooltip.darkside.css

@@ -1,7 +1,7 @@
 .navds-tooltip {
   z-index: 3000;
-  background-color: var(--ax-bg-raised);
-  color: var(--ax-text-neutral);
+  background-color: var(--ax-bg-neutral-strong);
+  color: var(--ax-text-neutral-contrast);
   border-radius: var(--ax-border-radius-medium);
   padding: 0 var(--ax-space-6);
   align-items: center;
@@ -10,8 +10,28 @@
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
   animation-duration: 150ms;
   text-align: center;
-  border: 1px solid var(--ax-border-neutral-subtleA);
   box-shadow: var(--ax-shadow-dialog);
+  border: 1px solid transparent;
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+.navds-tooltip__arrow {
+  height: 0.5rem;
+  width: 0.5rem;
+  z-index: -1;
+  background-color: var(--ax-bg-neutral-strong);
+  position: absolute;
+  border-radius: 1px;
+  transform: rotate(45deg);
+
+  @media (forced-colors: active) {
+    & {
+      display: none;
+    }
+  }
 }
 
 .navds-tooltip:where([data-state="open"]):where([data-side="bottom"]) {
@@ -96,7 +116,7 @@
   align-items: center;
   justify-content: center;
   border-radius: var(--ax-border-radius-small);
-  background: var(--ax-bg-neutral-moderateA);
+  background: var(--ax-bg-neutral-moderate);
 
   @media (forced-colors: active) {
     & {

package/date.css

@@ -22,30 +22,13 @@
   font-size: var(--a-font-size-small);
 }
 
-.navds-date .rdp-weeknumber {
-  font-size: var(--a-font-size-small);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: var(--a-border-radius-medium);
-  margin: var(--a-spacing-2);
-  color: var(--a-text-subtle);
-}
-
-.navds-date .rdp-weeknumber.rdp-button {
-  width: 2rem;
-  height: 2rem;
-  box-shadow: 0 0 0 1px var(--a-border-default);
+.navds-date__weeknumber-number {
+  font-size: 0.875rem;
   color: var(--a-text-subtle);
-  font-size: var(--a-font-size-small);
 }
 
-.navds-date .rdp-weeknumber.rdp-button:active {
-  background-color: var(--a-surface-action-active);
-  color: var(--a-text-on-action);
-  box-shadow: none;
+.navds-date__weeknumber:active .navds-date__weeknumber-number {
+  color: var(--a-text-on-neutral);
 }
 
 .navds-date__caption__month .navds-select__container select {
@@ -303,6 +286,13 @@
   margin: 0;
 }
 
+span.rdp-weeknumber {
+  display: grid;
+  place-content: center;
+  width: 2rem;
+  height: 2rem;
+}
+
 .navds-date__modal.navds-date {
   padding: 0;
 }

package/dist/component/date.css

@@ -22,30 +22,13 @@
   font-size: var(--a-font-size-small);
 }
 
-.navds-date .rdp-weeknumber {
-  font-size: var(--a-font-size-small);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: var(--a-border-radius-medium);
-  margin: var(--a-spacing-2);
-  color: var(--a-text-subtle);
-}
-
-.navds-date .rdp-weeknumber.rdp-button {
-  width: 2rem;
-  height: 2rem;
-  box-shadow: 0 0 0 1px var(--a-border-default);
+.navds-date__weeknumber-number {
+  font-size: 0.875rem;
   color: var(--a-text-subtle);
-  font-size: var(--a-font-size-small);
 }
 
-.navds-date .rdp-weeknumber.rdp-button:active {
-  background-color: var(--a-surface-action-active);
-  color: var(--a-text-on-action);
-  box-shadow: none;
+.navds-date__weeknumber:active .navds-date__weeknumber-number {
+  color: var(--a-text-on-neutral);
 }
 
 .navds-date__caption__month .navds-select__container select {
@@ -306,6 +289,13 @@
   margin: 0;
 }
 
+span.rdp-weeknumber {
+  display: grid;
+  place-content: center;
+  width: 2rem;
+  height: 2rem;
+}
+
 .navds-date__modal.navds-date {
   padding: 0;
 }

package/dist/component/date.min.css

@@ -1 +1 @@
-.navds-date{padding:var(--a-spacing-4) var(--a-spacing-3)}.navds-date .rdp-day_range_middle.rdp-day_disabled{background:var(--ac-date-middle-bg,var(--a-surface-action-selected));color:var(--ac-date-middle-text,var(--a-text-on-action))}.navds-date .rdp-month,.navds-date.rdp-month{display:grid;gap:var(--a-spacing-5)}.navds-date__caption-label{text-transform:capitalize}.navds-date .rdp-head_cell{font-size:var(--a-font-size-small);text-transform:capitalize}.navds-date .rdp-weeknumber{align-items:center;border-radius:var(--a-border-radius-medium);display:flex;justify-content:center;margin:var(--a-spacing-2)}.navds-date .rdp-weeknumber,.navds-date .rdp-weeknumber.rdp-button{color:var(--a-text-subtle);font-size:var(--a-font-size-small);height:2rem;width:2rem}.navds-date .rdp-weeknumber.rdp-button{box-shadow:0 0 0 1px var(--a-border-default)}.navds-date .rdp-weeknumber.rdp-button:active{background-color:var(--a-surface-action-active);box-shadow:none;color:var(--a-text-on-action)}.navds-date__caption__month .navds-select__container select{text-transform:capitalize}.navds-date .rdp-button{all:unset;border-radius:var(--a-border-radius-medium);display:block;height:2.5rem;text-align:center;width:2.5rem}.navds-date .rdp-day_range_start{border-radius:var(--a-border-radius-xlarge) var(--a-border-radius-medium) var(--a-border-radius-medium) var(--a-border-radius-xlarge)}.navds-date .rdp-day_range_end:not(.rdp-day_range_start){border-radius:var(--a-border-radius-medium) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge) var(--a-border-radius-medium)}.navds-date .rdp-day_range_start.rdp-day_range_end{border-radius:var(--a-border-radius-xlarge)}.navds-date .navds-date__month-button:not(.rdp-day_selected,[disabled]):focus-visible,.navds-date .rdp-button:not(.rdp-day_selected,[disabled]):focus-visible{box-shadow:var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date .navds-date__month-button:not(.rdp-day_selected,[disabled]):focus,.navds-date .rdp-button:not(.rdp-day_selected,[disabled]):focus{box-shadow:var(--a-shadow-focus)}}.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible,.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus,.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-date__month-button{all:unset;border-radius:var(--a-border-radius-medium);cursor:pointer;height:3rem;text-align:center;text-transform:capitalize;width:3rem}.navds-date__month-button:focus-visible,.navds-monthpicker__caption-button:focus-visible{box-shadow:var(--a-shadow-focus);z-index:1}@supports not selector(:focus-visible){.navds-date__month-button:focus,.navds-monthpicker__caption-button:focus{box-shadow:var(--a-shadow-focus);z-index:1}}.navds-date__year-label{align-items:center;display:flex}.navds-date__standalone-wrapper,.navds-date__wrapper{height:fit-content;width:fit-content}.navds-date .navds-date__field{display:flex;flex-direction:column;position:relative;width:100%}.navds-date__field-wrapper{align-items:center;display:inline-flex;position:relative;width:fit-content}.navds-date .rdp-day_selected,.navds-monthpicker__month--selected{background:var(--ac-date-selected-bg,var(--a-surface-action-selected));color:var(--ac-date-selected-text,var(--a-text-on-action));cursor:pointer}.navds-date .rdp-day_disabled{background-color:var(--ac-date-disabled-bg,var(--a-surface-neutral-subtle));color:var(--ac-date-disabled-text,var(--a-text-subtle));cursor:not-allowed;text-decoration:line-through}.navds-date .rdp-button:where(:not(.rdp-day_selected,[disabled])):hover,.navds-date__month-button:where(:not(.rdp-day_selected,[disabled])):hover{background:var(--ac-date-hover-bg,var(--a-surface-action-subtle-hover));cursor:pointer}.navds-date .rdp-day_today{box-shadow:0 0 0 1px var(--ac-date-today-border,var(--a-border-action-selected));text-decoration:underline}.navds-date__caption{align-items:center;display:flex;gap:var(--a-spacing-1);justify-content:space-between;padding-inline:var(--a-spacing-1)}.navds-date__caption-button,.navds-date__caption-button:disabled,.navds-date__caption-button:disabled:hover{color:var(--ac-date-caption-text,var(--a-text-default))}.navds-date__field-input{padding-right:var(--a-spacing-12)}.navds-form-field--small .navds-date__field-input{padding-right:var(--a-spacing-8)}.navds-date__field--error .navds-date__field-input:not(:hover,:disabled){border-color:var(--ac-date-input-error-border,var(--a-border-danger));box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger))}.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover,:disabled){box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date__field--error .navds-date__field-input:focus:not(:hover,:disabled){box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger)),var(--a-shadow-focus)}}.navds-date__field-button{align-items:center;background:none;border:none;border-radius:calc(var(--a-border-radius-medium) - 1px);border-end-start-radius:0;border-start-start-radius:0;color:var(--ac-date-input-button-text,var(--a-text-default));cursor:pointer;display:inline-flex;font-size:1.5rem;height:calc(100% - .125rem);justify-content:center;margin:0;padding:var(--a-spacing-3);position:absolute;right:.0625rem;text-decoration:none;top:50%;transform:translateY(-50%)}.navds-form-field--small .navds-date__field-button{padding:var(--a-spacing-1)}.navds-date__field-button:hover:where(:not([disabled])){background-color:var(--ac-date-input-button-hover-bg,var(--a-surface-action-subtle-hover));color:var(--ac-date-input-button-hover-text,var(--a-text-action-on-action-subtle))}.navds-form-field--disabled .navds-date__field-button{cursor:not-allowed;opacity:1}.navds-date__field-button:focus-visible{border-radius:var(--a-border-radius-medium);box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-date__field-button:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-date__caption__year{width:5rem}.navds-date .rdp-day_outside{pointer-events:none;visibility:hidden}.navds-date__field--readonly .navds-date__field-button{color:var(--a-gray-500);cursor:default}.navds-date__caption-button{height:2rem;width:2rem}.navds-date__week-row{align-items:center;display:flex;gap:var(--a-spacing-05)}.navds-date__week-wrapper{align-items:center;display:flex;justify-content:center;margin:0;width:2.5rem}.navds-date__modal.navds-date{padding:0}.navds-date__modal-body{align-items:flex-end;display:flex;flex-direction:column;gap:var(--a-spacing-2);padding:var(--a-spacing-4)}.navds-date__modal-body>.navds-date{padding:0}.navds-date__popover:where(.navds-popover){border:none}@media (min-width:480px){.navds-date{padding:var(--a-spacing-5) var(--a-spacing-4)}.navds-date__modal-body{padding:var(--a-spacing-6)}.navds-date__caption{gap:var(--a-spacing-2)}.navds-date .rdp-button,.navds-date__caption-button{height:3rem;width:3rem}}
+.navds-date{padding:var(--a-spacing-4) var(--a-spacing-3)}.navds-date .rdp-day_range_middle.rdp-day_disabled{background:var(--ac-date-middle-bg,var(--a-surface-action-selected));color:var(--ac-date-middle-text,var(--a-text-on-action))}.navds-date .rdp-month,.navds-date.rdp-month{display:grid;gap:var(--a-spacing-5)}.navds-date__caption-label{text-transform:capitalize}.navds-date .rdp-head_cell{font-size:var(--a-font-size-small);text-transform:capitalize}.navds-date__weeknumber-number{color:var(--a-text-subtle);font-size:.875rem}.navds-date__weeknumber:active .navds-date__weeknumber-number{color:var(--a-text-on-neutral)}.navds-date__caption__month .navds-select__container select{text-transform:capitalize}.navds-date .rdp-button{all:unset;border-radius:var(--a-border-radius-medium);display:block;height:2.5rem;text-align:center;width:2.5rem}.navds-date .rdp-day_range_start{border-radius:var(--a-border-radius-xlarge) var(--a-border-radius-medium) var(--a-border-radius-medium) var(--a-border-radius-xlarge)}.navds-date .rdp-day_range_end:not(.rdp-day_range_start){border-radius:var(--a-border-radius-medium) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge) var(--a-border-radius-medium)}.navds-date .rdp-day_range_start.rdp-day_range_end{border-radius:var(--a-border-radius-xlarge)}.navds-date .navds-date__month-button:not(.rdp-day_selected,[disabled]):focus-visible,.navds-date .rdp-button:not(.rdp-day_selected,[disabled]):focus-visible{box-shadow:var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date .navds-date__month-button:not(.rdp-day_selected,[disabled]):focus,.navds-date .rdp-button:not(.rdp-day_selected,[disabled]):focus{box-shadow:var(--a-shadow-focus)}}.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible,.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus,.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-date__month-button{all:unset;border-radius:var(--a-border-radius-medium);cursor:pointer;height:3rem;text-align:center;text-transform:capitalize;width:3rem}.navds-date__month-button:focus-visible,.navds-monthpicker__caption-button:focus-visible{box-shadow:var(--a-shadow-focus);z-index:1}@supports not selector(:focus-visible){.navds-date__month-button:focus,.navds-monthpicker__caption-button:focus{box-shadow:var(--a-shadow-focus);z-index:1}}.navds-date__year-label{align-items:center;display:flex}.navds-date__standalone-wrapper,.navds-date__wrapper{height:fit-content;width:fit-content}.navds-date .navds-date__field{display:flex;flex-direction:column;position:relative;width:100%}.navds-date__field-wrapper{align-items:center;display:inline-flex;position:relative;width:fit-content}.navds-date .rdp-day_selected,.navds-monthpicker__month--selected{background:var(--ac-date-selected-bg,var(--a-surface-action-selected));color:var(--ac-date-selected-text,var(--a-text-on-action));cursor:pointer}.navds-date .rdp-day_disabled{background-color:var(--ac-date-disabled-bg,var(--a-surface-neutral-subtle));color:var(--ac-date-disabled-text,var(--a-text-subtle));cursor:not-allowed;text-decoration:line-through}.navds-date .rdp-button:where(:not(.rdp-day_selected,[disabled])):hover,.navds-date__month-button:where(:not(.rdp-day_selected,[disabled])):hover{background:var(--ac-date-hover-bg,var(--a-surface-action-subtle-hover));cursor:pointer}.navds-date .rdp-day_today{box-shadow:0 0 0 1px var(--ac-date-today-border,var(--a-border-action-selected));text-decoration:underline}.navds-date__caption{align-items:center;display:flex;gap:var(--a-spacing-1);justify-content:space-between;padding-inline:var(--a-spacing-1)}.navds-date__caption-button,.navds-date__caption-button:disabled,.navds-date__caption-button:disabled:hover{color:var(--ac-date-caption-text,var(--a-text-default))}.navds-date__field-input{padding-right:var(--a-spacing-12)}.navds-form-field--small .navds-date__field-input{padding-right:var(--a-spacing-8)}.navds-date__field--error .navds-date__field-input:not(:hover,:disabled){border-color:var(--ac-date-input-error-border,var(--a-border-danger));box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger))}.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover,:disabled){box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date__field--error .navds-date__field-input:focus:not(:hover,:disabled){box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger)),var(--a-shadow-focus)}}.navds-date__field-button{align-items:center;background:none;border:none;border-radius:calc(var(--a-border-radius-medium) - 1px);border-end-start-radius:0;border-start-start-radius:0;color:var(--ac-date-input-button-text,var(--a-text-default));cursor:pointer;display:inline-flex;font-size:1.5rem;height:calc(100% - .125rem);justify-content:center;margin:0;padding:var(--a-spacing-3);position:absolute;right:.0625rem;text-decoration:none;top:50%;transform:translateY(-50%)}.navds-form-field--small .navds-date__field-button{padding:var(--a-spacing-1)}.navds-date__field-button:hover:where(:not([disabled])){background-color:var(--ac-date-input-button-hover-bg,var(--a-surface-action-subtle-hover));color:var(--ac-date-input-button-hover-text,var(--a-text-action-on-action-subtle))}.navds-form-field--disabled .navds-date__field-button{cursor:not-allowed;opacity:1}.navds-date__field-button:focus-visible{border-radius:var(--a-border-radius-medium);box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-date__field-button:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-date__caption__year{width:5rem}.navds-date .rdp-day_outside{pointer-events:none;visibility:hidden}.navds-date__field--readonly .navds-date__field-button{color:var(--a-gray-500);cursor:default}.navds-date__caption-button{height:2rem;width:2rem}.navds-date__week-row{align-items:center;display:flex;gap:var(--a-spacing-05)}.navds-date__week-wrapper{align-items:center;display:flex;justify-content:center;margin:0;width:2.5rem}span.rdp-weeknumber{display:grid;height:2rem;place-content:center;width:2rem}.navds-date__modal.navds-date{padding:0}.navds-date__modal-body{align-items:flex-end;display:flex;flex-direction:column;gap:var(--a-spacing-2);padding:var(--a-spacing-4)}.navds-date__modal-body>.navds-date{padding:0}.navds-date__popover:where(.navds-popover){border:none}@media (min-width:480px){.navds-date{padding:var(--a-spacing-5) var(--a-spacing-4)}.navds-date__modal-body{padding:var(--a-spacing-6)}.navds-date__caption{gap:var(--a-spacing-2)}.navds-date .rdp-button,.navds-date__caption-button{height:3rem;width:3rem}}

package/dist/components.css

@@ -5416,30 +5416,13 @@ button.navds-internalheader__title:active,
   font-size: var(--a-font-size-small);
 }
 
-.navds-date .rdp-weeknumber {
-  font-size: var(--a-font-size-small);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: var(--a-border-radius-medium);
-  margin: var(--a-spacing-2);
+.navds-date__weeknumber-number {
+  font-size: 0.875rem;
   color: var(--a-text-subtle);
 }
 
-.navds-date .rdp-weeknumber.rdp-button {
-  width: 2rem;
-  height: 2rem;
-  box-shadow: 0 0 0 1px var(--a-border-default);
-  color: var(--a-text-subtle);
-  font-size: var(--a-font-size-small);
-}
-
-.navds-date .rdp-weeknumber.rdp-button:active {
-  background-color: var(--a-surface-action-active);
-  color: var(--a-text-on-action);
-  box-shadow: none;
+.navds-date__weeknumber:active .navds-date__weeknumber-number {
+  color: var(--a-text-on-neutral);
 }
 
 .navds-date__caption__month .navds-select__container select {
@@ -5700,6 +5683,13 @@ button.navds-internalheader__title:active,
   margin: 0;
 }
 
+span.rdp-weeknumber {
+  display: grid;
+  place-content: center;
+  width: 2rem;
+  height: 2rem;
+}
+
 .navds-date__modal.navds-date {
   padding: 0;
 }