@navikt/ds-css 7.8.0 → 7.9.0

package/dist/darkside/component/copybutton.css

@@ -0,0 +1,176 @@
+@layer aksel.components {
+  .navds-copybutton {
+    --__axc-copybutton-padding: var(--ax-spacing-3) var(--ax-spacing-5) var(--ax-spacing-3) var(--ax-spacing-4);
+    cursor: pointer;
+    border-radius: var(--ax-border-radius-medium);
+    padding: var(--__axc-copybutton-padding);
+    background-color: rgba(0, 0, 0, 0);
+    border: none;
+    place-content: center;
+    margin: 0;
+    text-decoration: none;
+    transition: color .2s cubic-bezier(.05, .7, .1, 1);
+    display: grid;
+  }
+
+  .navds-copybutton.navds-copybutton--icon-only {
+    --__axc-copybutton-padding: var(--ax-spacing-3);
+  }
+
+  .navds-copybutton.navds-copybutton--icon-right {
+    --__axc-copybutton-padding: var(--ax-spacing-3) var(--ax-spacing-4) var(--ax-spacing-3) var(--ax-spacing-5);
+  }
+
+  .navds-copybutton:hover {
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
+  }
+
+  .navds-copybutton:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+
+  .navds-copybutton:disabled {
+    cursor: not-allowed;
+    opacity: var(--ax-opacity-disabled);
+  }
+
+  .navds-copybutton:disabled:hover {
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+  @media (forced-colors: active) {
+    .navds-copybutton {
+      color: buttontext;
+      background-color: buttonface;
+      border: 1px solid buttontext;
+    }
+
+    .navds-copybutton:disabled {
+      opacity: 1;
+      border-color: graytext;
+    }
+  }
+
+  .navds-copybutton--small {
+    --__axc-copybutton-padding: var(--ax-spacing-1) var(--ax-spacing-3) var(--ax-spacing-1) var(--ax-spacing-2);
+    min-width: 2rem;
+    min-height: 2rem;
+  }
+
+  .navds-copybutton--small.navds-copybutton--icon-right {
+    --__axc-copybutton-padding: var(--ax-spacing-1) var(--ax-spacing-2) var(--ax-spacing-1) var(--ax-spacing-3);
+  }
+
+  .navds-copybutton--small.navds-copybutton--icon-only {
+    --__axc-copybutton-padding: var(--ax-spacing-1);
+  }
+
+  .navds-copybutton--small .navds-copybutton__icon {
+    font-size: 1.25rem;
+  }
+
+  .navds-copybutton--small > .navds-copybutton__content {
+    gap: var(--ax-spacing-1-alt);
+  }
+
+  .navds-copybutton--xsmall {
+    --__axc-copybutton-padding: var(--ax-spacing-05) var(--ax-spacing-2) var(--ax-spacing-05) var(--ax-spacing-1);
+    min-width: 1.5rem;
+    min-height: 1.5rem;
+  }
+
+  .navds-copybutton--xsmall.navds-copybutton--icon-right {
+    --__axc-copybutton-padding: var(--ax-spacing-05) var(--ax-spacing-1) var(--ax-spacing-05) var(--ax-spacing-2);
+  }
+
+  .navds-copybutton--xsmall.navds-copybutton--icon-only {
+    --__axc-copybutton-padding: var(--ax-spacing-05);
+  }
+
+  .navds-copybutton--xsmall .navds-copybutton__icon {
+    font-size: 1.25rem;
+  }
+
+  .navds-copybutton--xsmall > .navds-copybutton__content {
+    gap: var(--ax-spacing-1);
+  }
+
+  .navds-copybutton__icon {
+    font-size: 1.5rem;
+    display: flex;
+  }
+
+  .navds-copybutton__icon:first-of-type {
+    margin-left: -.25rem;
+  }
+
+  .navds-copybutton__icon:last-of-type {
+    margin-right: -.25rem;
+  }
+
+  .navds-copybutton__icon:only-child {
+    margin: 0;
+  }
+
+  .navds-copybutton--active .navds-copybutton__icon {
+    animation: 2s cubic-bezier(.05, .7, .1, 1) akselCopyButtonIconAnimation;
+  }
+
+  @keyframes akselCopyButtonIconAnimation {
+    8% {
+      transform: translateY(0);
+    }
+
+    17% {
+      transform: translateY(-10%);
+    }
+
+    25% {
+      transform: translateY(2%);
+    }
+
+    30% {
+      transform: translateY(0);
+    }
+  }
+
+  .navds-copybutton--action {
+    color: var(--ax-text-accent);
+  }
+
+  .navds-copybutton--action.navds-copybutton--active {
+    color: var(--ax-text-success);
+  }
+
+  .navds-copybutton--action.navds-copybutton--active:hover {
+    color: var(--ax-text-success-strong);
+  }
+
+  .navds-copybutton--action:hover {
+    color: var(--ax-text-accent-strong);
+  }
+
+  .navds-copybutton--action:disabled {
+    color: var(--ax-text-accent);
+  }
+
+  .navds-copybutton--neutral {
+    color: var(--ax-text-subtle);
+  }
+
+  .navds-copybutton--neutral:hover, .navds-copybutton--neutral.navds-copybutton--active {
+    color: var(--ax-text-default);
+  }
+
+  .navds-copybutton--neutral:disabled {
+    color: var(--ax-text-subtle);
+  }
+
+  .navds-copybutton__content {
+    justify-content: center;
+    align-items: center;
+    gap: var(--ax-spacing-2);
+    display: inline-flex;
+  }
+}

package/dist/darkside/component/copybutton.min.css

@@ -0,0 +1 @@
+@layer aksel.components{.navds-copybutton{--__axc-copybutton-padding:var(--ax-spacing-3) var(--ax-spacing-5) var(--ax-spacing-3) var(--ax-spacing-4);cursor:pointer;border-radius:var(--ax-border-radius-medium);padding:var(--__axc-copybutton-padding);background-color:rgba(0,0,0,0);border:none;place-content:center;margin:0;text-decoration:none;transition:color .2s cubic-bezier(.05, .7, .1, 1);display:grid}.navds-copybutton.navds-copybutton--icon-only{--__axc-copybutton-padding:var(--ax-spacing-3)}.navds-copybutton.navds-copybutton--icon-right{--__axc-copybutton-padding:var(--ax-spacing-3) var(--ax-spacing-4) var(--ax-spacing-3) var(--ax-spacing-5)}.navds-copybutton:hover{background-color:var(--ax-bg-neutral-moderate-hoverA)}.navds-copybutton:focus-visible{outline:2px solid var(--ax-border-focus);outline-offset:2px}.navds-copybutton:disabled{cursor:not-allowed;opacity:var(--ax-opacity-disabled)}.navds-copybutton:disabled:hover{background-color:rgba(0,0,0,0)}@media (forced-colors:active){.navds-copybutton{color:buttontext;background-color:buttonface;border:1px solid buttontext}.navds-copybutton:disabled{opacity:1;border-color:graytext}}.navds-copybutton--small{--__axc-copybutton-padding:var(--ax-spacing-1) var(--ax-spacing-3) var(--ax-spacing-1) var(--ax-spacing-2);min-width:2rem;min-height:2rem}.navds-copybutton--small.navds-copybutton--icon-right{--__axc-copybutton-padding:var(--ax-spacing-1) var(--ax-spacing-2) var(--ax-spacing-1) var(--ax-spacing-3)}.navds-copybutton--small.navds-copybutton--icon-only{--__axc-copybutton-padding:var(--ax-spacing-1)}.navds-copybutton--small .navds-copybutton__icon{font-size:1.25rem}.navds-copybutton--small>.navds-copybutton__content{gap:var(--ax-spacing-1-alt)}.navds-copybutton--xsmall{--__axc-copybutton-padding:var(--ax-spacing-05) var(--ax-spacing-2) var(--ax-spacing-05) var(--ax-spacing-1);min-width:1.5rem;min-height:1.5rem}.navds-copybutton--xsmall.navds-copybutton--icon-right{--__axc-copybutton-padding:var(--ax-spacing-05) var(--ax-spacing-1) var(--ax-spacing-05) var(--ax-spacing-2)}.navds-copybutton--xsmall.navds-copybutton--icon-only{--__axc-copybutton-padding:var(--ax-spacing-05)}.navds-copybutton--xsmall .navds-copybutton__icon{font-size:1.25rem}.navds-copybutton--xsmall>.navds-copybutton__content{gap:var(--ax-spacing-1)}.navds-copybutton__icon{font-size:1.5rem;display:flex}.navds-copybutton__icon:first-of-type{margin-left:-.25rem}.navds-copybutton__icon:last-of-type{margin-right:-.25rem}.navds-copybutton__icon:only-child{margin:0}.navds-copybutton--active .navds-copybutton__icon{animation:2s cubic-bezier(.05,.7,.1,1) akselCopyButtonIconAnimation}@keyframes akselCopyButtonIconAnimation{8%{transform:translateY(0)}17%{transform:translateY(-10%)}25%{transform:translateY(2%)}30%{transform:translateY(0)}}.navds-copybutton--action{color:var(--ax-text-accent)}.navds-copybutton--action.navds-copybutton--active{color:var(--ax-text-success)}.navds-copybutton--action.navds-copybutton--active:hover{color:var(--ax-text-success-strong)}.navds-copybutton--action:hover{color:var(--ax-text-accent-strong)}.navds-copybutton--action:disabled{color:var(--ax-text-accent)}.navds-copybutton--neutral{color:var(--ax-text-subtle)}.navds-copybutton--neutral.navds-copybutton--active,.navds-copybutton--neutral:hover{color:var(--ax-text-default)}.navds-copybutton--neutral:disabled{color:var(--ax-text-subtle)}.navds-copybutton__content{justify-content:center;align-items:center;gap:var(--ax-spacing-2);display:inline-flex}}

package/dist/darkside/component/date.css

@@ -0,0 +1,262 @@
+@layer aksel.components {
+  .navds-date {
+    padding: var(--ax-spacing-4) var(--ax-spacing-3);
+  }
+
+  .navds-date .rdp-day_range_middle.rdp-day_disabled {
+    color: var(--ax-text-default);
+    background: var(--ax-bg-neutral-moderateA);
+  }
+
+  .navds-date .rdp-day_range_middle.rdp-day_selected {
+    background-color: var(--ax-bg-accent-moderateA);
+    box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
+    color: var(--ax-text-default);
+  }
+
+  .navds-date .rdp-month, .navds-date.rdp-month {
+    gap: var(--ax-spacing-5);
+    display: grid;
+  }
+
+  .navds-date .navds-date__caption-label {
+    text-transform: capitalize;
+  }
+
+  .navds-date .rdp-head_cell {
+    text-transform: capitalize;
+    font-size: var(--ax-font-size-small);
+  }
+
+  .navds-date .rdp-button {
+    all: unset;
+    text-align: center;
+    border-radius: var(--ax-border-radius-medium);
+    width: 2.5rem;
+    height: 2.5rem;
+    display: block;
+  }
+
+  .navds-date .rdp-day_range_start {
+    border-radius: var(--ax-border-radius-xlarge) var(--ax-border-radius-medium) var(--ax-border-radius-medium) var(--ax-border-radius-xlarge);
+  }
+
+  .navds-date .rdp-day_range_end:not(.rdp-day_range_start) {
+    border-radius: var(--ax-border-radius-medium) var(--ax-border-radius-xlarge) var(--ax-border-radius-xlarge) var(--ax-border-radius-medium);
+  }
+
+  .navds-date .rdp-day_range_start.rdp-day_range_end {
+    border-radius: var(--ax-border-radius-xlarge);
+  }
+
+  .navds-date .navds-date__field {
+    flex-direction: column;
+    width: 100%;
+    display: flex;
+    position: relative;
+  }
+
+  .navds-date .rdp-day_selected, .navds-date .navds-monthpicker__month--selected {
+    color: var(--ax-text-accent-contrast);
+    background: var(--ax-bg-accent-strong-pressed);
+    cursor: pointer;
+  }
+
+  .navds-date .rdp-day_disabled {
+    cursor: not-allowed;
+    background-color: var(--ax-bg-neutral-moderateA);
+    color: var(--ax-text-subtle);
+    text-decoration: line-through;
+  }
+
+  .navds-date .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover, .navds-date .navds-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
+    background: var(--ax-bg-accent-moderate-hoverA);
+    cursor: pointer;
+  }
+
+  .navds-date .rdp-day_today {
+    position: relative;
+  }
+
+  .navds-date .rdp-day_today:before {
+    background-color: var(--ax-text-accent);
+    border-radius: var(--ax-border-radius-full);
+    content: "";
+    width: 6px;
+    height: 6px;
+    display: block;
+    position: absolute;
+    bottom: 5px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  :is(.navds-date .rdp-day_today.rdp-day_selected:not(.rdp-day_range_middle), .navds-date .rdp-day_today:active):before {
+    background-color: var(--ax-text-accent-contrast);
+  }
+
+  .navds-date .rdp-day_outside {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .navds-date__modal .navds-date, .navds-date__modal-body > .navds-date {
+    padding: 0;
+  }
+
+  .navds-date__caption {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--ax-spacing-1);
+    padding-inline: var(--ax-spacing-1);
+    display: flex;
+  }
+
+  .navds-date__caption-button {
+    width: 2rem;
+    height: 2rem;
+    color: var(--ax-text-default);
+  }
+
+  .navds-date__caption__month .navds-select__container select {
+    text-transform: capitalize;
+  }
+
+  .navds-date__month-button {
+    all: unset;
+    text-align: center;
+    text-transform: capitalize;
+    border-radius: var(--ax-border-radius-medium);
+    cursor: pointer;
+    width: 3rem;
+    height: 3rem;
+  }
+
+  .navds-date__year-label {
+    align-items: center;
+    display: flex;
+  }
+
+  .navds-date__wrapper, .navds-date__standalone-wrapper {
+    width: fit-content;
+    height: fit-content;
+  }
+
+  :is(:is(.navds-date__wrapper, .navds-date__standalone-wrapper) .rdp-cell > button.rdp-day, :is(.navds-date__wrapper, .navds-date__standalone-wrapper) button.navds-date__month-button):focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 1px;
+  }
+
+  :is(:is(.navds-date__wrapper, .navds-date__standalone-wrapper) .rdp-cell > button.rdp-day, :is(.navds-date__wrapper, .navds-date__standalone-wrapper) button.navds-date__month-button):active:not(:disabled) {
+    color: var(--ax-text-accent-contrast);
+    background-color: var(--ax-bg-accent-strong-pressed);
+  }
+
+  .navds-date__field-input.navds-text-field__input {
+    padding-right: var(--ax-spacing-12);
+  }
+
+  .navds-form-field--small .navds-date__field-input {
+    padding-right: var(--ax-spacing-8);
+  }
+
+  .navds-date__field-button {
+    color: var(--ax-text-default);
+    cursor: pointer;
+    border-radius: calc(var(--ax-border-radius-medium)  - 1px);
+    padding: var(--ax-spacing-3);
+    background: none;
+    border: none;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    justify-content: center;
+    align-items: center;
+    height: calc(100% - .125rem);
+    margin: 0;
+    font-size: 1.5rem;
+    text-decoration: none;
+    display: inline-flex;
+    position: absolute;
+    top: 50%;
+    right: .0625rem;
+    transform: translateY(-50%);
+  }
+
+  .navds-form-field--small .navds-date__field-button {
+    padding: var(--ax-spacing-1);
+  }
+
+  .navds-form-field--disabled .navds-date__field-button {
+    opacity: 1;
+    cursor: not-allowed;
+  }
+
+  .navds-date__field--readonly .navds-date__field-button {
+    cursor: default;
+  }
+
+  .navds-date__field-button:focus-visible {
+    outline-color: var(--ax-border-focus);
+  }
+
+  .navds-date__field-wrapper {
+    align-items: center;
+    width: fit-content;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .navds-date__week-row {
+    align-items: center;
+    gap: var(--ax-spacing-05);
+    display: flex;
+  }
+
+  .navds-date__weeknumber {
+    --__axc-button-border-width: 1px;
+  }
+
+  .navds-date__weeknumber-number {
+    color: var(--ax-text-subtle);
+    font-size: .875rem;
+  }
+
+  .navds-date__weeknumber:active .navds-date__weeknumber-number {
+    color: var(--ax-text-neutral-contrast);
+  }
+
+  .navds-date__week-wrapper {
+    justify-content: center;
+    align-items: center;
+    width: 2.5rem;
+    margin: 0;
+    display: flex;
+  }
+
+  .navds-date__modal-body {
+    padding: var(--ax-spacing-4);
+    align-items: flex-end;
+    gap: var(--ax-spacing-2);
+    flex-direction: column;
+    display: flex;
+  }
+
+  @media (min-width: 480px) {
+    .navds-date {
+      padding: var(--ax-spacing-5) var(--ax-spacing-4);
+    }
+
+    .navds-date__modal-body {
+      padding: var(--ax-spacing-6);
+    }
+
+    .navds-date__caption {
+      gap: var(--ax-spacing-2);
+    }
+
+    .navds-date .rdp-button, .navds-date__caption-button {
+      width: 3rem;
+      height: 3rem;
+    }
+  }
+}

package/dist/darkside/component/date.min.css

@@ -0,0 +1 @@
+@layer aksel.components{.navds-date{padding:var(--ax-spacing-4) var(--ax-spacing-3)}.navds-date .rdp-day_range_middle.rdp-day_disabled{color:var(--ax-text-default);background:var(--ax-bg-neutral-moderateA)}.navds-date .rdp-day_range_middle.rdp-day_selected{background-color:var(--ax-bg-accent-moderateA);box-shadow:inset 0 0 0 1px var(--ax-border-accent-subtleA);color:var(--ax-text-default)}.navds-date .rdp-month,.navds-date.rdp-month{gap:var(--ax-spacing-5);display:grid}.navds-date .navds-date__caption-label{text-transform:capitalize}.navds-date .rdp-head_cell{text-transform:capitalize;font-size:var(--ax-font-size-small)}.navds-date .rdp-button{all:unset;text-align:center;border-radius:var(--ax-border-radius-medium);width:2.5rem;height:2.5rem;display:block}.navds-date .rdp-day_range_start{border-radius:var(--ax-border-radius-xlarge) var(--ax-border-radius-medium) var(--ax-border-radius-medium) var(--ax-border-radius-xlarge)}.navds-date .rdp-day_range_end:not(.rdp-day_range_start){border-radius:var(--ax-border-radius-medium) var(--ax-border-radius-xlarge) var(--ax-border-radius-xlarge) var(--ax-border-radius-medium)}.navds-date .rdp-day_range_start.rdp-day_range_end{border-radius:var(--ax-border-radius-xlarge)}.navds-date .navds-date__field{flex-direction:column;width:100%;display:flex;position:relative}.navds-date .navds-monthpicker__month--selected,.navds-date .rdp-day_selected{color:var(--ax-text-accent-contrast);background:var(--ax-bg-accent-strong-pressed);cursor:pointer}.navds-date .rdp-day_disabled{cursor:not-allowed;background-color:var(--ax-bg-neutral-moderateA);color:var(--ax-text-subtle);text-decoration:line-through}.navds-date .navds-date__month-button:where(:not(.rdp-day_selected,[disabled])):hover,.navds-date .rdp-button:where(:not(.rdp-day_selected,[disabled])):hover{background:var(--ax-bg-accent-moderate-hoverA);cursor:pointer}.navds-date .rdp-day_today{position:relative}.navds-date .rdp-day_today:before{background-color:var(--ax-text-accent);border-radius:var(--ax-border-radius-full);content:"";width:6px;height:6px;display:block;position:absolute;bottom:5px;left:50%;transform:translateX(-50%)}:is(.navds-date .rdp-day_today.rdp-day_selected:not(.rdp-day_range_middle),.navds-date .rdp-day_today:active):before{background-color:var(--ax-text-accent-contrast)}.navds-date .rdp-day_outside{visibility:hidden;pointer-events:none}.navds-date__modal .navds-date,.navds-date__modal-body>.navds-date{padding:0}.navds-date__caption{justify-content:space-between;align-items:center;gap:var(--ax-spacing-1);padding-inline:var(--ax-spacing-1);display:flex}.navds-date__caption-button{width:2rem;height:2rem;color:var(--ax-text-default)}.navds-date__caption__month .navds-select__container select{text-transform:capitalize}.navds-date__month-button{all:unset;text-align:center;text-transform:capitalize;border-radius:var(--ax-border-radius-medium);cursor:pointer;width:3rem;height:3rem}.navds-date__year-label{align-items:center;display:flex}.navds-date__standalone-wrapper,.navds-date__wrapper{width:fit-content;height:fit-content}:is(:is(.navds-date__wrapper,.navds-date__standalone-wrapper) .rdp-cell > button.rdp-day,:is(.navds-date__wrapper,.navds-date__standalone-wrapper) button.navds-date__month-button):focus-visible{outline:2px solid var(--ax-border-focus);outline-offset:1px}:is(:is(.navds-date__wrapper,.navds-date__standalone-wrapper) .rdp-cell > button.rdp-day,:is(.navds-date__wrapper,.navds-date__standalone-wrapper) button.navds-date__month-button):active:not(:disabled){color:var(--ax-text-accent-contrast);background-color:var(--ax-bg-accent-strong-pressed)}.navds-date__field-input.navds-text-field__input{padding-right:var(--ax-spacing-12)}.navds-form-field--small .navds-date__field-input{padding-right:var(--ax-spacing-8)}.navds-date__field-button{color:var(--ax-text-default);cursor:pointer;border-radius:calc(var(--ax-border-radius-medium) - 1px);padding:var(--ax-spacing-3);background:0 0;border:none;border-start-start-radius:0;border-end-start-radius:0;justify-content:center;align-items:center;height:calc(100% - .125rem);margin:0;font-size:1.5rem;text-decoration:none;display:inline-flex;position:absolute;top:50%;right:.0625rem;transform:translateY(-50%)}.navds-form-field--small .navds-date__field-button{padding:var(--ax-spacing-1)}.navds-form-field--disabled .navds-date__field-button{opacity:1;cursor:not-allowed}.navds-date__field--readonly .navds-date__field-button{cursor:default}.navds-date__field-button:focus-visible{outline-color:var(--ax-border-focus)}.navds-date__field-wrapper{align-items:center;width:fit-content;display:inline-flex;position:relative}.navds-date__week-row{align-items:center;gap:var(--ax-spacing-05);display:flex}.navds-date__weeknumber{--__axc-button-border-width:1px}.navds-date__weeknumber-number{color:var(--ax-text-subtle);font-size:.875rem}.navds-date__weeknumber:active .navds-date__weeknumber-number{color:var(--ax-text-neutral-contrast)}.navds-date__week-wrapper{justify-content:center;align-items:center;width:2.5rem;margin:0;display:flex}.navds-date__modal-body{padding:var(--ax-spacing-4);align-items:flex-end;gap:var(--ax-spacing-2);flex-direction:column;display:flex}@media (min-width:480px){.navds-date{padding:var(--ax-spacing-5) var(--ax-spacing-4)}.navds-date__modal-body{padding:var(--ax-spacing-6)}.navds-date__caption{gap:var(--ax-spacing-2)}.navds-date .rdp-button,.navds-date__caption-button{width:3rem;height:3rem}}}

package/dist/darkside/component/dropdown.css

@@ -0,0 +1,92 @@
+@layer aksel.components {
+  .navds-dropdown__menu {
+    padding: var(--a-spacing-2) 0;
+    color: var(--ac-dropdown-text, var(--a-text-default));
+    width: 27ch;
+    max-height: 616px;
+    overflow: hidden auto;
+  }
+
+  .navds-dropdown__divider {
+    margin: var(--a-spacing-3) 0;
+    border: none;
+    border-bottom: 1px solid var(--a-border-divider);
+  }
+
+  .navds-dropdown__menu > :not(.navds-dropdown__divider, .navds-dropdown__list) {
+    margin: 0 var(--a-spacing-4) var(--a-spacing-3);
+  }
+
+  .navds-dropdown__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .navds-dropdown__list-item {
+    margin: 0;
+  }
+
+  .navds-dropdown__list-heading {
+    margin: var(--a-spacing-1) var(--a-spacing-4) var(--a-spacing-3);
+  }
+
+  .navds-dropdown__item {
+    color: var(--ac-dropdown-item-text, var(--a-text-action));
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    align-items: center;
+    gap: var(--a-spacing-2);
+    width: 100%;
+    padding: var(--a-spacing-1) var(--a-spacing-4);
+    background: none;
+    border: none;
+    margin: 0;
+    text-decoration: none;
+    display: flex;
+    overflow: visible;
+  }
+
+  .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));
+  }
+
+  .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));
+  }
+
+  .navds-dropdown__item:focus-visible {
+    outline-offset: -2px;
+    box-shadow: inset 0 0 0 2px var(--a-border-focus);
+    outline: 2px solid rgba(0, 0, 0, 0);
+  }
+
+  @supports not selector(:focus-visible) {
+    .navds-dropdown__item:focus {
+      outline-offset: -2px;
+      box-shadow: inset 0 0 0 2px var(--a-border-focus);
+      outline: 2px solid rgba(0, 0, 0, 0);
+    }
+  }
+
+  .navds-dropdown__item:disabled {
+    color: var(--ac-dropdown-item-text, var(--a-text-action));
+    opacity: var(--ax-opacity-disabled);
+    cursor: not-allowed;
+    background: none;
+  }
+
+  @media (forced-colors: active) {
+    .navds-dropdown__item:hover {
+      color: highlight;
+    }
+
+    .navds-dropdown__item:disabled {
+      opacity: 1;
+      color: graytext;
+    }
+  }
+}

package/dist/darkside/component/dropdown.min.css

@@ -0,0 +1 @@
+@layer aksel.components{.navds-dropdown__menu{padding:var(--a-spacing-2) 0;color:var(--ac-dropdown-text,var(--a-text-default));width:27ch;max-height:616px;overflow:hidden auto}.navds-dropdown__divider{margin:var(--a-spacing-3) 0;border:none;border-bottom:1px solid var(--a-border-divider)}.navds-dropdown__menu>:not(.navds-dropdown__divider,.navds-dropdown__list){margin:0 var(--a-spacing-4) var(--a-spacing-3)}.navds-dropdown__list{margin:0;padding:0;list-style:none}.navds-dropdown__list-item{margin:0}.navds-dropdown__list-heading{margin:var(--a-spacing-1) var(--a-spacing-4) var(--a-spacing-3)}.navds-dropdown__item{color:var(--ac-dropdown-item-text,var(--a-text-action));font:inherit;text-align:left;cursor:pointer;align-items:center;gap:var(--a-spacing-2);width:100%;padding:var(--a-spacing-1) var(--a-spacing-4);background:0 0;border:none;margin:0;text-decoration:none;display:flex;overflow:visible}.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))}.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))}.navds-dropdown__item:focus-visible{outline-offset:-2px;box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:2px solid rgba(0,0,0,0)}@supports not selector(:focus-visible){.navds-dropdown__item:focus{outline-offset:-2px;box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:2px solid rgba(0,0,0,0)}}.navds-dropdown__item:disabled{color:var(--ac-dropdown-item-text,var(--a-text-action));opacity:var(--ax-opacity-disabled);cursor:not-allowed;background:0 0}@media (forced-colors:active){.navds-dropdown__item:hover{color:highlight}.navds-dropdown__item:disabled{opacity:1;color:graytext}}}