@navikt/ds-css 7.7.0 → 7.8.1

package/dist/darkside/component/table.css

@@ -0,0 +1,225 @@
+@layer aksel.components {
+  .navds-table {
+    border-collapse: collapse;
+    width: 100%;
+    display: table;
+  }
+
+  .navds-table__header {
+    display: table-header-group;
+  }
+
+  .navds-table__body {
+    display: table-row-group;
+  }
+
+  .navds-table__body .navds-table__row--shade-on-hover:not(.navds-table__expandable-row--expansion-disabled):hover {
+    background-color: var(--ax-bg-neutral-hoverA);
+    transition: background-color 70ms cubic-bezier(.2, 0, 0, 1);
+  }
+
+  .navds-table__body .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
+    background-color: var(--ax-bg-accent-hoverA);
+  }
+
+  .navds-table__row {
+    display: table-row;
+  }
+
+  .navds-table__row--selected {
+    background-color: var(--ax-bg-accent);
+  }
+
+  .navds-table--zebra-stripes .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
+    background-color: var(--ax-bg-neutral);
+  }
+
+  .navds-table--zebra-stripes .navds-table__body :where(.navds-table__expandable-row:nth-child(4n+1):not(.navds-table__row--selected)) {
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+  .navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n) {
+    background-color: var(--ax-bg-neutral);
+  }
+
+  .navds-table__header-cell, .navds-table__data-cell {
+    padding: var(--ax-spacing-3) var(--ax-spacing-2);
+    border-bottom: 1px solid var(--ax-border-default);
+    text-align: left;
+    display: table-cell;
+  }
+
+  .navds-table__header .navds-table__header-cell, .navds-table__header .navds-table__data-cell {
+    border-bottom-width: 2px;
+  }
+
+  .navds-table__header-cell--align-right, .navds-table__data-cell--align-right {
+    text-align: right;
+  }
+
+  .navds-table__header-cell--align-center, .navds-table__data-cell--align-center {
+    text-align: center;
+  }
+
+  :where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__header-cell, :where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__data-cell {
+    border-color: var(--ax-border-strong);
+  }
+
+  :where(.navds-table__expandable-row--open:hover) .navds-table__data-cell {
+    border-bottom-color: rgba(0, 0, 0, 0);
+  }
+
+  .navds-table--large .navds-table__header-cell, .navds-table--large .navds-table__data-cell {
+    padding: var(--ax-spacing-4) var(--ax-spacing-2);
+  }
+
+  .navds-table--small .navds-table__header-cell, .navds-table--small .navds-table__data-cell {
+    padding: var(--ax-spacing-1) var(--ax-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 {
+    appearance: none;
+    color: var(--ax-text-accent);
+    cursor: pointer;
+    padding: var(--ax-spacing-4) var(--ax-spacing-3);
+    gap: var(--ax-spacing-2);
+    width: 100%;
+    line-height: inherit;
+    font-weight: inherit;
+    background: none;
+    border: none;
+    align-items: center;
+    margin: 0;
+    display: flex;
+  }
+
+  .navds-table--small .navds-table__sort-button {
+    padding: var(--ax-spacing-2) var(--ax-spacing-3);
+  }
+
+  .navds-table__sort-button:hover {
+    background-color: var(--ax-bg-neutral-hoverA);
+  }
+
+  .navds-table__sort-button:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: -4px;
+  }
+
+  .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(--ax-bg-accent-moderate);
+    color: var(--ax-text-accent-strong);
+  }
+
+  .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) .navds-table__data-cell {
+    transition: border-bottom-color .15s cubic-bezier(.95, .05, .8, .04);
+  }
+
+  .navds-table__expandable-row.navds-table__expandable-row--clickable:not(.navds-table__expandable-row--expansion-disabled):hover {
+    cursor: pointer;
+  }
+
+  .navds-table__expandable-row--open .navds-table__data-cell {
+    border-bottom-color: rgba(0, 0, 0, 0);
+  }
+
+  .navds-table__expandable-row--open .navds-table__header-cell {
+    border-color: var(--ax-border-default);
+  }
+
+  .navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
+    border-color: rgba(0, 0, 0, 0);
+  }
+
+  .navds-table__toggle-expand-cell {
+    width: 3rem;
+    padding: 0;
+  }
+
+  .navds-table--large .navds-table__toggle-expand-cell {
+    padding: 0 var(--ax-spacing-2);
+  }
+
+  .navds-table--small .navds-table__toggle-expand-cell {
+    padding: var(--ax-spacing-1) var(--ax-spacing-2);
+  }
+
+  .navds-table__toggle-expand-button {
+    cursor: pointer;
+    border-radius: var(--ax-border-radius-medium);
+    background: none;
+    border: none;
+    place-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin: 0 auto;
+    font-size: 1.5rem;
+    transition: background-color 70ms cubic-bezier(.2, 0, 0, 1);
+    display: grid;
+  }
+
+  .navds-table__expandable-icon {
+    transition: transform .25s cubic-bezier(.2, 0, 0, 1);
+  }
+
+  .navds-table__expandable-row:not(.navds-table__expandable-row--expansion-disabled) .navds-table__toggle-expand-cell:hover {
+    cursor: pointer;
+  }
+
+  .navds-table__toggle-expand-button:hover, .navds-table__toggle-expand-cell:hover > .navds-table__toggle-expand-button, .navds-table__expandable-row--clickable:hover .navds-table__toggle-expand-button {
+    background-color: var(--ax-bg-neutral-hoverA);
+  }
+
+  .navds-table__toggle-expand-cell--open > :where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon) {
+    transform: rotateX(180deg);
+  }
+
+  .navds-table__toggle-expand-button:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+  }
+
+  .navds-table__expanded-row-cell {
+    padding: 0;
+  }
+
+  .navds-table__expanded-row-cell:empty {
+    display: none;
+  }
+
+  .navds-table__expanded-row-collapse:not([style*="height: 0px;"]), .navds-table__expanded-row-collapse[style*="transition:"] {
+    border-bottom: 1px solid var(--ax-border-default);
+  }
+
+  .navds-table__expanded-row-content {
+    padding: var(--ax-spacing-4) calc(var(--ax-spacing-2)  + 3rem);
+  }
+
+  .navds-table--small .navds-table__expanded-row-content {
+    padding: var(--ax-spacing-2) calc(var(--ax-spacing-2)  + 3rem);
+  }
+}

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

@@ -0,0 +1 @@
+@layer aksel.components{.navds-table{border-collapse:collapse;width:100%;display:table}.navds-table__header{display:table-header-group}.navds-table__body{display:table-row-group}.navds-table__body .navds-table__row--shade-on-hover:not(.navds-table__expandable-row--expansion-disabled):hover{background-color:var(--ax-bg-neutral-hoverA);transition:background-color 70ms cubic-bezier(.2, 0, 0, 1)}.navds-table__body .navds-table__row--shade-on-hover.navds-table__row--selected:hover{background-color:var(--ax-bg-accent-hoverA)}.navds-table__row{display:table-row}.navds-table__row--selected{background-color:var(--ax-bg-accent)}.navds-table--zebra-stripes .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)){background-color:var(--ax-bg-neutral)}.navds-table--zebra-stripes .navds-table__body :where(.navds-table__expandable-row:nth-child(4n+1):not(.navds-table__row--selected)){background-color:rgba(0,0,0,0)}.navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n){background-color:var(--ax-bg-neutral)}.navds-table__data-cell,.navds-table__header-cell{padding:var(--ax-spacing-3) var(--ax-spacing-2);border-bottom:1px solid var(--ax-border-default);text-align:left;display:table-cell}.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(--ax-border-strong)}:where(.navds-table__expandable-row--open:hover) .navds-table__data-cell{border-bottom-color:transparent}.navds-table--large .navds-table__data-cell,.navds-table--large .navds-table__header-cell{padding:var(--ax-spacing-4) var(--ax-spacing-2)}.navds-table--small .navds-table__data-cell,.navds-table--small .navds-table__header-cell{padding:var(--ax-spacing-1) var(--ax-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{appearance:none;color:var(--ax-text-accent);cursor:pointer;padding:var(--ax-spacing-4) var(--ax-spacing-3);gap:var(--ax-spacing-2);width:100%;line-height:inherit;font-weight:inherit;background:0 0;border:none;align-items:center;margin:0;display:flex}.navds-table--small .navds-table__sort-button{padding:var(--ax-spacing-2) var(--ax-spacing-3)}.navds-table__sort-button:hover{background-color:var(--ax-bg-neutral-hoverA)}.navds-table__sort-button:focus-visible{outline:2px solid var(--ax-border-focus);outline-offset:-4px}.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(--ax-bg-accent-moderate);color:var(--ax-text-accent-strong)}.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) .navds-table__data-cell{transition:border-bottom-color .15s cubic-bezier(.95, .05, .8, .04)}.navds-table__expandable-row.navds-table__expandable-row--clickable:not(.navds-table__expandable-row--expansion-disabled):hover{cursor:pointer}.navds-table__expandable-row--open .navds-table__data-cell{border-bottom-color:transparent}.navds-table__expandable-row--open .navds-table__header-cell{border-color:var(--ax-border-default)}.navds-table__expandable-row--open .navds-table__toggle-expand-cell--open{border-color:transparent}.navds-table__toggle-expand-cell{width:3rem;padding:0}.navds-table--large .navds-table__toggle-expand-cell{padding:0 var(--ax-spacing-2)}.navds-table--small .navds-table__toggle-expand-cell{padding:var(--ax-spacing-1) var(--ax-spacing-2)}.navds-table__toggle-expand-button{cursor:pointer;border-radius:var(--ax-border-radius-medium);background:0 0;border:none;place-content:center;width:2rem;height:2rem;margin:0 auto;font-size:1.5rem;transition:background-color 70ms cubic-bezier(.2, 0, 0, 1);display:grid}.navds-table__expandable-icon{transition:transform .25s cubic-bezier(.2, 0, 0, 1)}.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(--ax-bg-neutral-hoverA)}.navds-table__toggle-expand-cell--open>:where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon){transform:rotateX(180deg)}.navds-table__toggle-expand-button:focus-visible{outline:2px solid var(--ax-border-focus)}.navds-table__expanded-row-cell{padding:0}.navds-table__expanded-row-cell:empty{display:none}.navds-table__expanded-row-collapse:not([style*="height: 0px;"]),.navds-table__expanded-row-collapse[style*="transition:"]{border-bottom:1px solid var(--ax-border-default)}.navds-table__expanded-row-content{padding:var(--ax-spacing-4) calc(var(--ax-spacing-2) + 3rem)}.navds-table--small .navds-table__expanded-row-content{padding:var(--ax-spacing-2) calc(var(--ax-spacing-2) + 3rem)}}

package/dist/darkside/component/tabs.css

@@ -0,0 +1,138 @@
+@layer aksel.components {
+  .navds-tabs__tablist-wrapper {
+    box-shadow: inset 0 -1px var(--ax-border-neutral-subtle);
+    width: 100%;
+    display: flex;
+  }
+
+  .navds-tabs__tablist {
+    scroll-behavior: smooth;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    width: 100%;
+    max-width: 100%;
+    display: flex;
+    overflow-x: scroll;
+  }
+
+  .navds-tabs__tablist::-webkit-scrollbar {
+    display: none;
+  }
+
+  .navds-tabs__scroll-button {
+    padding: var(--ax-spacing-3) var(--ax-spacing-4);
+    cursor: pointer;
+    justify-content: center;
+    align-items: center;
+    width: 2.75rem;
+    display: flex;
+  }
+
+  .navds-tabs__scroll-button svg {
+    flex-shrink: 0;
+    font-size: 1.25rem;
+  }
+
+  .navds-tabs--small .navds-tabs__scroll-button {
+    padding: var(--ax-spacing-1-alt) var(--ax-spacing-4);
+    width: 2rem;
+  }
+
+  .navds-tabs__scroll-button--hidden {
+    visibility: hidden;
+  }
+
+  .navds-tabs__tab {
+    min-height: 3rem;
+    padding: var(--ax-spacing-3) var(--ax-spacing-4);
+    color: var(--ax-text-default);
+    cursor: pointer;
+    --__axc-tabs-line-width: 0;
+    --__axc-tabs-line-color: var(--ax-border-neutral-subtle);
+    box-shadow: inset 0 var(--__axc-tabs-line-width) var(--__axc-tabs-line-color);
+    background: none;
+    border: none;
+    justify-content: center;
+    align-items: center;
+    transition: box-shadow .2s cubic-bezier(.2, 0, 0, 1);
+    display: inline-flex;
+  }
+
+  .navds-tabs__tab:hover {
+    --__axc-tabs-line-width: -4px;
+  }
+
+  .navds-tabs__tab[data-state="active"] {
+    --__axc-tabs-line-width: -4px;
+    --__axc-tabs-line-color: var(--ax-border-accent-strong);
+  }
+
+  .navds-tabs__tab:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: -2px;
+  }
+
+  .navds-tabs__tab-inner {
+    align-items: center;
+    gap: var(--ax-spacing-1);
+    display: flex;
+  }
+
+  .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(--ax-spacing-1-alt) var(--ax-spacing-4);
+  }
+
+  .navds-tabs__tab-icon--top, .navds-tabs__tab--small.navds-tabs__tab-icon--top {
+    padding: var(--ax-spacing-1) var(--ax-spacing-4);
+  }
+
+  :is(.navds-tabs__tab, .navds-tabs__tab--small.navds-tabs__tab--icon-only, .navds-tabs__tab--small.navds-tabs__tab-icon--top) svg {
+    font-size: 1.25rem;
+  }
+
+  .navds-tabs__tab--small svg {
+    font-size: 1rem;
+  }
+
+  :is(.navds-tabs__tab--icon-only, .navds-tabs__tab-icon--top) svg {
+    font-size: 1.5rem;
+  }
+
+  .navds-tabs__tab--fill {
+    flex: 100%;
+  }
+
+  .navds-tabs__tabpanel:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: -2px;
+  }
+
+  @media (forced-colors: active) {
+    .navds-tabs__tab[data-state="active"] {
+      border-bottom: 3px solid canvastext;
+      padding-block-end: calc(var(--ax-spacing-3)  - 3px);
+    }
+
+    .navds-tabs__tab--small[data-state="active"] {
+      padding-block-end: calc(var(--ax-spacing-1-alt)  - 3px);
+    }
+
+    .navds-tabs__tab-icon--top[data-state="active"], .navds-tabs__tab--small.navds-tabs__tab-icon--top[data-state="active"] {
+      padding-block-end: calc(var(--ax-spacing-1)  - 3px);
+    }
+  }
+}

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

@@ -0,0 +1 @@
+@layer aksel.components{.navds-tabs__tablist-wrapper{box-shadow:inset 0 -1px var(--ax-border-neutral-subtle);width:100%;display:flex}.navds-tabs__tablist{scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;width:100%;max-width:100%;display:flex;overflow-x:scroll}.navds-tabs__tablist::-webkit-scrollbar{display:none}.navds-tabs__scroll-button{padding:var(--ax-spacing-3) var(--ax-spacing-4);cursor:pointer;justify-content:center;align-items:center;width:2.75rem;display:flex}.navds-tabs__scroll-button svg{flex-shrink:0;font-size:1.25rem}.navds-tabs--small .navds-tabs__scroll-button{padding:var(--ax-spacing-1-alt) var(--ax-spacing-4);width:2rem}.navds-tabs__scroll-button--hidden{visibility:hidden}.navds-tabs__tab{min-height:3rem;padding:var(--ax-spacing-3) var(--ax-spacing-4);color:var(--ax-text-default);cursor:pointer;--__axc-tabs-line-width:0;--__axc-tabs-line-color:var(--ax-border-neutral-subtle);box-shadow:inset 0 var(--__axc-tabs-line-width) var(--__axc-tabs-line-color);background:0 0;border:none;justify-content:center;align-items:center;transition:box-shadow .2s cubic-bezier(.2, 0, 0, 1);display:inline-flex}.navds-tabs__tab:hover{--__axc-tabs-line-width:-4px}.navds-tabs__tab[data-state=active]{--__axc-tabs-line-width:-4px;--__axc-tabs-line-color:var(--ax-border-accent-strong)}.navds-tabs__tab:focus-visible{outline:2px solid var(--ax-border-focus);outline-offset:-2px}.navds-tabs__tab-inner{align-items:center;gap:var(--ax-spacing-1);display:flex}.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(--ax-spacing-1-alt) var(--ax-spacing-4)}.navds-tabs__tab--small.navds-tabs__tab-icon--top,.navds-tabs__tab-icon--top{padding:var(--ax-spacing-1) var(--ax-spacing-4)}:is(.navds-tabs__tab,.navds-tabs__tab--small.navds-tabs__tab--icon-only,.navds-tabs__tab--small.navds-tabs__tab-icon--top) svg{font-size:1.25rem}.navds-tabs__tab--small svg{font-size:1rem}:is(.navds-tabs__tab--icon-only,.navds-tabs__tab-icon--top) svg{font-size:1.5rem}.navds-tabs__tab--fill{flex:100%}.navds-tabs__tabpanel:focus-visible{outline:2px solid var(--ax-border-focus);outline-offset:-2px}@media (forced-colors:active){.navds-tabs__tab[data-state=active]{border-bottom:3px solid canvastext;padding-block-end:calc(var(--ax-spacing-3) - 3px)}.navds-tabs__tab--small[data-state=active]{padding-block-end:calc(var(--ax-spacing-1-alt) - 3px)}.navds-tabs__tab--small.navds-tabs__tab-icon--top[data-state=active],.navds-tabs__tab-icon--top[data-state=active]{padding-block-end:calc(var(--ax-spacing-1) - 3px)}}}

package/dist/darkside/component/tag.css

@@ -0,0 +1,128 @@
+@layer aksel.components {
+  .navds-tag {
+    --__axc-tag-icon-size: 1.5rem;
+    --__axc-tag-icon-margin: -2px;
+    --__axc-tag-border: ;
+    --__axc-tag-bg: ;
+    --__axc-tag-bg-strong: ;
+    --__axc-tag-text: ;
+    --__axc-tag-text-strong: ;
+    border-radius: var(--ax-border-radius-medium);
+    padding: var(--ax-spacing-05) var(--ax-spacing-2);
+    justify-content: center;
+    align-items: center;
+    min-height: 2rem;
+    line-height: 1;
+    display: inline-flex;
+  }
+
+  .navds-tag:has(.navds-tag__icon--left) {
+    gap: var(--ax-spacing-05);
+  }
+
+  .navds-tag--info, .navds-tag--alt3 {
+    --__axc-tag-border: var(--ax-border-info);
+    --__axc-tag-bg: var(--ax-bg-info-moderateA);
+    --__axc-tag-bg-strong: var(--ax-bg-info-strong);
+    --__axc-tag-text: var(--ax-text-info-strong);
+    --__axc-tag-text-strong: var(--ax-text-info-contrast);
+  }
+
+  .navds-tag--success {
+    --__axc-tag-border: var(--ax-border-success);
+    --__axc-tag-bg: var(--ax-bg-success-moderateA);
+    --__axc-tag-bg-strong: var(--ax-bg-success-strong);
+    --__axc-tag-text: var(--ax-text-success-strong);
+    --__axc-tag-text-strong: var(--ax-text-success-contrast);
+  }
+
+  .navds-tag--warning {
+    --__axc-tag-border: var(--ax-border-warning);
+    --__axc-tag-bg: var(--ax-bg-warning-moderateA);
+    --__axc-tag-bg-strong: var(--ax-bg-warning-strong);
+    --__axc-tag-text: var(--ax-text-warning-strong);
+    --__axc-tag-text-strong: var(--ax-text-warning-contrast);
+  }
+
+  .navds-tag--error {
+    --__axc-tag-border: var(--ax-border-danger);
+    --__axc-tag-bg: var(--ax-bg-danger-moderateA);
+    --__axc-tag-bg-strong: var(--ax-bg-danger-strong);
+    --__axc-tag-text: var(--ax-text-danger-strong);
+    --__axc-tag-text-strong: var(--ax-text-danger-contrast);
+  }
+
+  .navds-tag--neutral {
+    --__axc-tag-border: var(--ax-border-neutral);
+    --__axc-tag-bg: var(--ax-bg-neutral-moderateA);
+    --__axc-tag-bg-strong: var(--ax-bg-neutral-strong);
+    --__axc-tag-text: var(--ax-text-neutral-strong);
+    --__axc-tag-text-strong: var(--ax-text-neutral-contrast);
+  }
+
+  .navds-tag--meta-purple, .navds-tag--alt1 {
+    --__axc-tag-border: var(--ax-border-meta-purple);
+    --__axc-tag-bg: var(--ax-bg-meta-purple-moderateA);
+    --__axc-tag-bg-strong: var(--ax-bg-meta-purple-strong);
+    --__axc-tag-text: var(--ax-text-meta-purple-strong);
+    --__axc-tag-text-strong: var(--ax-text-meta-purple-contrast);
+  }
+
+  .navds-tag--meta-lime, .navds-tag--alt2 {
+    --__axc-tag-border: var(--ax-border-meta-lime);
+    --__axc-tag-bg: var(--ax-bg-meta-lime-moderateA);
+    --__axc-tag-bg-strong: var(--ax-bg-meta-lime-strong);
+    --__axc-tag-text: var(--ax-text-meta-lime-strong);
+    --__axc-tag-text-strong: var(--ax-text-meta-lime-contrast);
+  }
+
+  .navds-tag--small {
+    min-height: 1.5rem;
+    padding: 0 var(--ax-spacing-1-alt);
+    --__axc-tag-icon-size: 1.25rem;
+  }
+
+  .navds-tag--xsmall {
+    min-height: 1.25rem;
+    padding: 0 var(--ax-spacing-1);
+    --__axc-tag-icon-size: 1rem;
+    --__axc-tag-icon-margin: -1px;
+  }
+
+  .navds-tag__icon--left {
+    font-size: var(--__axc-tag-icon-size);
+    margin-inline-start: var(--__axc-tag-icon-margin);
+    display: flex;
+  }
+
+  .navds-tag--outline {
+    box-shadow: inset 0 0 0 1px var(--__axc-tag-border);
+    background: var(--__axc-tag-bg);
+    color: var(--__axc-tag-text);
+  }
+
+  .navds-tag--moderate {
+    background: var(--__axc-tag-bg);
+    color: var(--__axc-tag-text);
+  }
+
+  .navds-tag--strong {
+    background: var(--__axc-tag-bg-strong);
+    color: var(--__axc-tag-text-strong);
+  }
+
+  @media (forced-colors: active) {
+    .navds-tag {
+      forced-color-adjust: none;
+      color: canvastext;
+    }
+
+    .navds-tag--moderate {
+      box-shadow: inset 0 0 0 1px var(--__axc-tag-bg-strong);
+    }
+
+    .navds-tag--strong {
+      color: canvas;
+    }
+  }
+}

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

@@ -0,0 +1 @@
+@layer aksel.components{.navds-tag{--__axc-tag-icon-size:1.5rem;--__axc-tag-icon-margin:-2px;--__axc-tag-border: ;--__axc-tag-bg: ;--__axc-tag-bg-strong: ;--__axc-tag-text: ;--__axc-tag-text-strong: ;border-radius:var(--ax-border-radius-medium);padding:var(--ax-spacing-05) var(--ax-spacing-2);justify-content:center;align-items:center;min-height:2rem;line-height:1;display:inline-flex}.navds-tag:has(.navds-tag__icon--left){gap:var(--ax-spacing-05)}.navds-tag--alt3,.navds-tag--info{--__axc-tag-border:var(--ax-border-info);--__axc-tag-bg:var(--ax-bg-info-moderateA);--__axc-tag-bg-strong:var(--ax-bg-info-strong);--__axc-tag-text:var(--ax-text-info-strong);--__axc-tag-text-strong:var(--ax-text-info-contrast)}.navds-tag--success{--__axc-tag-border:var(--ax-border-success);--__axc-tag-bg:var(--ax-bg-success-moderateA);--__axc-tag-bg-strong:var(--ax-bg-success-strong);--__axc-tag-text:var(--ax-text-success-strong);--__axc-tag-text-strong:var(--ax-text-success-contrast)}.navds-tag--warning{--__axc-tag-border:var(--ax-border-warning);--__axc-tag-bg:var(--ax-bg-warning-moderateA);--__axc-tag-bg-strong:var(--ax-bg-warning-strong);--__axc-tag-text:var(--ax-text-warning-strong);--__axc-tag-text-strong:var(--ax-text-warning-contrast)}.navds-tag--error{--__axc-tag-border:var(--ax-border-danger);--__axc-tag-bg:var(--ax-bg-danger-moderateA);--__axc-tag-bg-strong:var(--ax-bg-danger-strong);--__axc-tag-text:var(--ax-text-danger-strong);--__axc-tag-text-strong:var(--ax-text-danger-contrast)}.navds-tag--neutral{--__axc-tag-border:var(--ax-border-neutral);--__axc-tag-bg:var(--ax-bg-neutral-moderateA);--__axc-tag-bg-strong:var(--ax-bg-neutral-strong);--__axc-tag-text:var(--ax-text-neutral-strong);--__axc-tag-text-strong:var(--ax-text-neutral-contrast)}.navds-tag--alt1,.navds-tag--meta-purple{--__axc-tag-border:var(--ax-border-meta-purple);--__axc-tag-bg:var(--ax-bg-meta-purple-moderateA);--__axc-tag-bg-strong:var(--ax-bg-meta-purple-strong);--__axc-tag-text:var(--ax-text-meta-purple-strong);--__axc-tag-text-strong:var(--ax-text-meta-purple-contrast)}.navds-tag--alt2,.navds-tag--meta-lime{--__axc-tag-border:var(--ax-border-meta-lime);--__axc-tag-bg:var(--ax-bg-meta-lime-moderateA);--__axc-tag-bg-strong:var(--ax-bg-meta-lime-strong);--__axc-tag-text:var(--ax-text-meta-lime-strong);--__axc-tag-text-strong:var(--ax-text-meta-lime-contrast)}.navds-tag--small{min-height:1.5rem;padding:0 var(--ax-spacing-1-alt);--__axc-tag-icon-size:1.25rem}.navds-tag--xsmall{min-height:1.25rem;padding:0 var(--ax-spacing-1);--__axc-tag-icon-size:1rem;--__axc-tag-icon-margin:-1px}.navds-tag__icon--left{font-size:var(--__axc-tag-icon-size);margin-inline-start:var(--__axc-tag-icon-margin);display:flex}.navds-tag--outline{box-shadow:inset 0 0 0 1px var(--__axc-tag-border);background:var(--__axc-tag-bg);color:var(--__axc-tag-text)}.navds-tag--moderate{background:var(--__axc-tag-bg);color:var(--__axc-tag-text)}.navds-tag--strong{background:var(--__axc-tag-bg-strong);color:var(--__axc-tag-text-strong)}@media (forced-colors:active){.navds-tag{forced-color-adjust:none;color:canvastext}.navds-tag--moderate{box-shadow:inset 0 0 0 1px var(--__axc-tag-bg-strong)}.navds-tag--strong{color:canvas}}}

package/dist/darkside/component/theme.css

@@ -0,0 +1,17 @@
+@layer aksel.components {
+  .navds-theme {
+    color: var(--ax-text-default);
+  }
+
+  .navds-theme[data-background="true"] {
+    background-color: var(--ax-bg-default);
+  }
+
+  .navds-theme.light {
+    color-scheme: light;
+  }
+
+  .navds-theme.dark {
+    color-scheme: dark;
+  }
+}

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

@@ -0,0 +1 @@
+@layer aksel.components{.navds-theme{color:var(--ax-text-default)}.navds-theme[data-background=true]{background-color:var(--ax-bg-default)}.navds-theme.light{color-scheme:light}.navds-theme.dark{color-scheme:dark}}