@navikt/ds-css 7.40.0 → 8.0.1

package/dist/component/tabs.css

@@ -1,154 +1,142 @@
-.navds-tabs__tablist-wrapper {
-  box-shadow: inset 0 -1px 0 0 var(--ac-tabs-border, var(--a-border-divider));
-  width: 100%;
-  display: flex;
-}
-
-.navds-tabs__tablist {
-  display: flex;
-  max-width: 100%;
-  width: 100%;
-  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(--a-spacing-3) var(--a-spacing-4);
-  width: 2.75rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-}
+@layer aksel.reset, aksel.theming, aksel.baseline, aksel.print, aksel.typography, aksel.components.core, aksel.components.core.loader, aksel.components.core.button, aksel.components.form;
 
-.navds-tabs__scroll-button--hidden {
-  visibility: hidden;
-}
+@layer aksel.components.modules {
+  .aksel-tabs__tablist-wrapper {
+    box-shadow: inset 0 -1px var(--ax-border-neutral-subtleA);
+    width: 100%;
+    display: flex;
+  }
 
-.navds-tabs__scroll-button svg {
-  font-size: 1.25rem;
-  flex-shrink: 0;
-}
+  .aksel-tabs__tablist {
+    scroll-behavior: smooth;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    width: 100%;
+    max-width: 100%;
+    display: flex;
+    overflow-x: scroll;
+  }
 
-.navds-tabs--small .navds-tabs__scroll-button {
-  padding: var(--a-spacing-1-alt) var(--a-spacing-4);
-  width: 2rem;
-}
+  .aksel-tabs__tablist::-webkit-scrollbar {
+    display: none;
+  }
 
-.navds-tabs__tab {
-  min-height: 3rem;
-  padding: var(--a-spacing-3) var(--a-spacing-4);
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  background: none;
-  border: none;
-  color: var(--ac-tabs-text, var(--a-text-default));
-  cursor: pointer;
-}
+  .aksel-tabs__scroll-button {
+    padding: var(--ax-space-12) var(--ax-space-16);
+    cursor: pointer;
+    justify-content: center;
+    align-items: center;
+    width: 2.75rem;
+    display: flex;
+  }
 
-.navds-tabs__tab:hover {
-  box-shadow: inset 0 -3px 0 0 var(--ac-tabs-hover-border, var(--a-border-subtle-hover));
-}
+  .aksel-tabs__scroll-button svg {
+    flex-shrink: 0;
+    font-size: 1.25rem;
+  }
 
-.navds-tabs__tab[aria-selected="true"] {
-  box-shadow: inset 0 -3px 0 0 var(--ac-tabs-selected-border, var(--a-border-action-selected));
-  color: var(--ac-tabs-selected-text, var(--a-text-default));
-}
+  .aksel-tabs--small .aksel-tabs__scroll-button {
+    padding: var(--ax-space-6) var(--ax-space-16);
+    width: 2rem;
+  }
 
-.navds-tabs__tab:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-  box-shadow: inset var(--a-shadow-focus);
-  color: var(--ac-tabs-focus-text, var(--a-text-default));
-}
+  .aksel-tabs__scroll-button--hidden {
+    visibility: hidden;
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-tabs__tab:focus {
-    outline: 2px solid transparent;
-    box-shadow: inset var(--a-shadow-focus);
-    color: var(--ac-tabs-focus-text, var(--a-text-default));
+  .aksel-tabs__tab {
+    min-height: 3rem;
+    padding: var(--ax-space-12) var(--ax-space-16);
+    color: var(--ax-text-neutral);
+    cursor: pointer;
+    --__axc-tabs-line-width: 0;
+    --__axc-tabs-line-color: var(--ax-border-neutral-subtleA);
+    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-inner {
-  display: flex;
-  align-items: center;
-  gap: var(--a-spacing-1);
-}
+  .aksel-tabs__tab:hover {
+    --__axc-tabs-line-width: -4px;
+  }
 
-.navds-tabs__tab-inner > * {
-  display: inline-flex;
-}
+  .aksel-tabs__tab[data-state="active"] {
+    --__axc-tabs-line-width: -4px;
+    --__axc-tabs-line-color: var(--ax-border-strong);
+  }
 
-.navds-tabs__tab-inner svg {
-  flex-shrink: 0;
-}
+  .aksel-tabs__tab:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: -3px;
+  }
 
-.navds-tabs__tab-icon--top > .navds-tabs__tab-inner {
-  flex-direction: column;
-  gap: 0;
-}
+  .aksel-tabs__tab-inner {
+    align-items: center;
+    gap: var(--ax-space-4);
+    display: flex;
+  }
 
-.navds-tabs__tab--small {
-  min-height: 2rem;
-  padding: var(--a-spacing-1-alt) var(--a-spacing-4);
-}
+  .aksel-tabs__tab-inner > * {
+    display: inline-flex;
+  }
 
-.navds-tabs__tab-icon--top,
-.navds-tabs__tab--small.navds-tabs__tab-icon--top {
-  padding: var(--a-spacing-1) var(--a-spacing-4);
-}
+  .aksel-tabs__tab-inner svg {
+    flex-shrink: 0;
+  }
 
-.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;
-}
+  .aksel-tabs__tab-icon--top > .aksel-tabs__tab-inner {
+    flex-direction: column;
+    gap: 0;
+  }
 
-.navds-tabs__tab--small svg {
-  font-size: 1rem;
-}
+  .aksel-tabs__tab--small {
+    min-height: 2rem;
+    padding: var(--ax-space-6) var(--ax-space-16);
+  }
 
-.navds-tabs__tab--icon-only svg,
-.navds-tabs__tab-icon--top svg {
-  font-size: 1.5rem;
-}
+  .aksel-tabs__tab-icon--top, .aksel-tabs__tab--small.aksel-tabs__tab-icon--top {
+    padding: var(--ax-space-4) var(--ax-space-16);
+  }
 
-.navds-tabs__tab--fill {
-  flex: 1 1 100%;
-}
+  .aksel-tabs__tab svg, .aksel-tabs__tab--small.aksel-tabs__tab--icon-only svg, .aksel-tabs__tab--small.aksel-tabs__tab-icon--top svg {
+    font-size: 1.25rem;
+  }
 
-.navds-tabs__tabpanel:focus-visible {
-  outline: 2px solid transparent;
-  box-shadow: inset 0 0 0 2px var(--a-border-focus);
-}
+  .aksel-tabs__tab--small svg {
+    font-size: 1rem;
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-tabs__tabpanel:focus {
-    outline: 2px solid transparent;
-    box-shadow: inset 0 0 0 2px var(--a-border-focus);
+  :is(.aksel-tabs__tab--icon-only, .aksel-tabs__tab-icon--top) svg {
+    font-size: 1.5rem;
   }
-}
 
-@media (forced-colors: active) {
-  .navds-tabs__tab[aria-selected="true"] {
-    border-bottom: 3px solid canvastext;
-    padding-block-end: calc(var(--a-spacing-3) - 3px);
+  .aksel-tabs__tab--fill {
+    flex: 100%;
   }
 
-  .navds-tabs__tab--small[aria-selected="true"] {
-    padding-block-end: calc(var(--a-spacing-1-alt) - 3px);
+  .aksel-tabs__tabpanel:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: -3px;
   }
 
-  .navds-tabs__tab-icon--top[aria-selected="true"],
-  .navds-tabs__tab--small.navds-tabs__tab-icon--top[aria-selected="true"] {
-    padding-block-end: calc(var(--a-spacing-1) - 3px);
+  @media (forced-colors: active) {
+    .aksel-tabs__tab[data-state="active"] {
+      border-bottom: 3px solid canvastext;
+      padding-block-end: calc(var(--ax-space-12)  - 3px);
+    }
+
+    .aksel-tabs__tab--small[data-state="active"] {
+      padding-block-end: calc(var(--ax-space-6)  - 3px);
+    }
+
+    .aksel-tabs__tab-icon--top[data-state="active"], .aksel-tabs__tab--small.aksel-tabs__tab-icon--top[data-state="active"] {
+      padding-block-end: calc(var(--ax-space-4)  - 3px);
+    }
   }
 }
+
+@layer aksel.layout;

package/dist/component/tabs.min.css

@@ -1 +1 @@
-.navds-tabs__tablist-wrapper{box-shadow:inset 0 -1px 0 0 var(--ac-tabs-border,var(--a-border-divider));display:flex;width:100%}.navds-tabs__tablist{display:flex;max-width:100%;scroll-behavior:smooth;width:100%;-ms-overflow-style:none;overflow-x:scroll;scrollbar-width:none}.navds-tabs__tablist::-webkit-scrollbar{display:none}.navds-tabs__scroll-button{align-items:center;cursor:pointer;display:flex;justify-content:center;padding:var(--a-spacing-3) var(--a-spacing-4);width:2.75rem}.navds-tabs__scroll-button--hidden{visibility:hidden}.navds-tabs__scroll-button svg{flex-shrink:0;font-size:1.25rem}.navds-tabs--small .navds-tabs__scroll-button{padding:var(--a-spacing-1-alt) var(--a-spacing-4);width:2rem}.navds-tabs__tab{align-items:center;background:none;border:none;color:var(--ac-tabs-text,var(--a-text-default));cursor:pointer;display:inline-flex;justify-content:center;min-height:3rem;padding:var(--a-spacing-3) var(--a-spacing-4)}.navds-tabs__tab:hover{box-shadow:inset 0 -3px 0 0 var(--ac-tabs-hover-border,var(--a-border-subtle-hover))}.navds-tabs__tab[aria-selected=true]{box-shadow:inset 0 -3px 0 0 var(--ac-tabs-selected-border,var(--a-border-action-selected));color:var(--ac-tabs-selected-text,var(--a-text-default))}.navds-tabs__tab:focus-visible{box-shadow:inset var(--a-shadow-focus);color:var(--ac-tabs-focus-text,var(--a-text-default));outline:2px solid #0000;outline-offset:-2px}@supports not selector(:focus-visible){.navds-tabs__tab:focus{box-shadow:inset var(--a-shadow-focus);color:var(--ac-tabs-focus-text,var(--a-text-default));outline:2px solid #0000}}.navds-tabs__tab-inner{align-items:center;display:flex;gap:var(--a-spacing-1)}.navds-tabs__tab-inner>*{display:inline-flex}.navds-tabs__tab-inner svg{flex-shrink:0}.navds-tabs__tab-icon--top>.navds-tabs__tab-inner{flex-direction:column;gap:0}.navds-tabs__tab--small{min-height:2rem;padding:var(--a-spacing-1-alt) var(--a-spacing-4)}.navds-tabs__tab--small.navds-tabs__tab-icon--top,.navds-tabs__tab-icon--top{padding:var(--a-spacing-1) var(--a-spacing-4)}.navds-tabs__tab svg,.navds-tabs__tab--small.navds-tabs__tab--icon-only svg,.navds-tabs__tab--small.navds-tabs__tab-icon--top svg{font-size:1.25rem}.navds-tabs__tab--small svg{font-size:1rem}.navds-tabs__tab--icon-only svg,.navds-tabs__tab-icon--top svg{font-size:1.5rem}.navds-tabs__tab--fill{flex:1 1 100%}.navds-tabs__tabpanel:focus-visible{box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:2px solid #0000}@supports not selector(:focus-visible){.navds-tabs__tabpanel:focus{box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:2px solid #0000}}@media (forced-colors:active){.navds-tabs__tab[aria-selected=true]{border-bottom:3px solid canvastext;-webkit-padding-after:calc(var(--a-spacing-3) - 3px);padding-block-end:calc(var(--a-spacing-3) - 3px)}.navds-tabs__tab--small[aria-selected=true]{-webkit-padding-after:calc(var(--a-spacing-1-alt) - 3px);padding-block-end:calc(var(--a-spacing-1-alt) - 3px)}.navds-tabs__tab--small.navds-tabs__tab-icon--top[aria-selected=true],.navds-tabs__tab-icon--top[aria-selected=true]{-webkit-padding-after:calc(var(--a-spacing-1) - 3px);padding-block-end:calc(var(--a-spacing-1) - 3px)}}
+@layer aksel.reset,aksel.theming,aksel.baseline,aksel.print,aksel.typography,aksel.components.core,aksel.components.core.loader,aksel.components.core.button,aksel.components.form;@layer aksel.components.modules{.aksel-tabs__tablist-wrapper{box-shadow:inset 0 -1px var(--ax-border-neutral-subtleA);width:100%;display:flex}.aksel-tabs__tablist{scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;width:100%;max-width:100%;display:flex;overflow-x:scroll}.aksel-tabs__tablist::-webkit-scrollbar{display:none}.aksel-tabs__scroll-button{padding:var(--ax-space-12) var(--ax-space-16);cursor:pointer;justify-content:center;align-items:center;width:2.75rem;display:flex}.aksel-tabs__scroll-button svg{flex-shrink:0;font-size:1.25rem}.aksel-tabs--small .aksel-tabs__scroll-button{padding:var(--ax-space-6) var(--ax-space-16);width:2rem}.aksel-tabs__scroll-button--hidden{visibility:hidden}.aksel-tabs__tab{min-height:3rem;padding:var(--ax-space-12) var(--ax-space-16);color:var(--ax-text-neutral);cursor:pointer;--__axc-tabs-line-width: 0;--__axc-tabs-line-color: var(--ax-border-neutral-subtleA);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}.aksel-tabs__tab:hover{--__axc-tabs-line-width: -4px}.aksel-tabs__tab[data-state=active]{--__axc-tabs-line-width: -4px;--__axc-tabs-line-color: var(--ax-border-strong)}.aksel-tabs__tab:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:-3px}.aksel-tabs__tab-inner{align-items:center;gap:var(--ax-space-4);display:flex}.aksel-tabs__tab-inner>*{display:inline-flex}.aksel-tabs__tab-inner svg{flex-shrink:0}.aksel-tabs__tab-icon--top>.aksel-tabs__tab-inner{flex-direction:column;gap:0}.aksel-tabs__tab--small{min-height:2rem;padding:var(--ax-space-6) var(--ax-space-16)}.aksel-tabs__tab-icon--top,.aksel-tabs__tab--small.aksel-tabs__tab-icon--top{padding:var(--ax-space-4) var(--ax-space-16)}.aksel-tabs__tab svg,.aksel-tabs__tab--small.aksel-tabs__tab--icon-only svg,.aksel-tabs__tab--small.aksel-tabs__tab-icon--top svg{font-size:1.25rem}.aksel-tabs__tab--small svg{font-size:1rem}:is(.aksel-tabs__tab--icon-only,.aksel-tabs__tab-icon--top) svg{font-size:1.5rem}.aksel-tabs__tab--fill{flex:100%}.aksel-tabs__tabpanel:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:-3px}@media(forced-colors:active){.aksel-tabs__tab[data-state=active]{border-bottom:3px solid canvastext;padding-block-end:calc(var(--ax-space-12) - 3px)}.aksel-tabs__tab--small[data-state=active]{padding-block-end:calc(var(--ax-space-6) - 3px)}.aksel-tabs__tab-icon--top[data-state=active],.aksel-tabs__tab--small.aksel-tabs__tab-icon--top[data-state=active]{padding-block-end:calc(var(--ax-space-4) - 3px)}}}@layer aksel.layout;

package/dist/component/tag.css

@@ -1,200 +1,81 @@
-.navds-tag {
-  --__ac-tag-icon-size: 1.5rem;
-  --__ac-tag-icon-margin: -2px;
-
-  border: 1px solid;
-  border-radius: var(--a-border-radius-small);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--a-spacing-05) var(--a-spacing-2);
-  min-height: 2rem;
-  line-height: 1;
-}
-
-.navds-tag--small {
-  min-height: 1.5rem;
-  padding: 0 var(--a-spacing-1-alt);
-
-  --__ac-tag-icon-size: 1.25rem;
-}
-
-.navds-tag--xsmall {
-  min-height: 1.25rem;
-  padding: 0 var(--a-spacing-1);
-
-  --__ac-tag-icon-size: 1rem;
-  --__ac-tag-icon-margin: -1px;
-}
-
-.navds-tag:has(.navds-tag__icon--left) {
-  gap: var(--a-spacing-05);
-}
-
-.navds-tag__icon--left {
-  font-size: var(--__ac-tag-icon-size);
-  margin-inline-start: var(--__ac-tag-icon-margin);
-  display: flex;
-}
-
-.navds-tag--error {
-  border-color: var(--ac-tag-error-border, var(--a-border-danger));
-  background-color: var(--ac-tag-error-bg, var(--a-surface-danger-subtle));
-  color: var(--ac-tag-error-text, var(--a-text-default));
-}
-
-.navds-tag--error-filled {
-  border-color: transparent;
-  background-color: var(--ac-tag-error-filled-bg, var(--a-surface-danger));
-  color: var(--ac-tag-error-filled-text, var(--a-text-on-danger));
-}
-
-.navds-tag--error-moderate {
-  border-color: transparent;
-  background-color: var(--ac-tag-error-moderate-bg, var(--a-surface-danger-moderate));
-  color: var(--ac-tag-error-moderate-text, var(--a-text-default));
-}
-
-.navds-tag--success {
-  border-color: var(--ac-tag-success-border, var(--a-border-success));
-  background-color: var(--ac-tag-success-bg, var(--a-surface-success-subtle));
-  color: var(--ac-tag-success-text, var(--a-text-default));
-}
-
-.navds-tag--success-filled {
-  border-color: transparent;
-  background-color: var(--ac-tag-success-filled-bg, var(--a-surface-success));
-  color: var(--ac-tag-success-filled-text, var(--a-text-on-success));
-}
-
-.navds-tag--success-moderate {
-  border-color: transparent;
-  background-color: var(--ac-tag-success-moderate-bg, var(--a-surface-success-moderate));
-  color: var(--ac-tag-success-moderate-text, var(--a-text-default));
-}
-
-.navds-tag--warning {
-  border-color: var(--ac-tag-warning-border, var(--a-border-warning));
-  background-color: var(--ac-tag-warning-bg, var(--a-surface-warning-subtle));
-  color: var(--ac-tag-warning-text, var(--a-text-default));
-}
-
-.navds-tag--warning-filled {
-  border-color: transparent;
-  background-color: var(--ac-tag-warning-filled-bg, var(--a-surface-warning));
-  color: var(--ac-tag-warning-filled-text, var(--a-text-on-warning));
-}
-
-.navds-tag--warning-moderate {
-  border-color: transparent;
-  background-color: var(--ac-tag-warning-moderate-bg, var(--a-surface-warning-moderate));
-  color: var(--ac-tag-warning-moderate-text, var(--a-text-default));
-}
-
-.navds-tag--info {
-  border-color: var(--ac-tag-info-border, var(--a-border-info));
-  background-color: var(--ac-tag-info-bg, var(--a-surface-info-subtle));
-  color: var(--ac-tag-info-text, var(--a-text-default));
-}
-
-.navds-tag--info-filled {
-  border-color: transparent;
-  background-color: var(--ac-tag-info-filled-bg, var(--a-surface-info));
-  color: var(--ac-tag-info-filled-text, var(--a-text-on-info));
-}
-
-.navds-tag--info-moderate {
-  border-color: transparent;
-  background-color: var(--ac-tag-info-moderate-bg, var(--a-surface-info-moderate));
-  color: var(--ac-tag-info-moderate-text, var(--a-text-default));
-}
-
-.navds-tag--neutral {
-  border-color: var(--ac-tag-neutral-border, var(--a-border-default));
-  background-color: var(--ac-tag-neutral-bg, var(--a-surface-neutral-subtle));
-  color: var(--ac-tag-neutral-text, var(--a-text-default));
-}
-
-.navds-tag--neutral-filled {
-  border-color: transparent;
-  background-color: var(--ac-tag-neutral-filled-bg, var(--a-surface-neutral));
-  color: var(--ac-tag-neutral-filled-text, var(--a-text-on-neutral));
-}
-
-.navds-tag--neutral-moderate {
-  border-color: transparent;
-  background-color: var(--ac-tag-neutral-moderate-bg, var(--a-surface-neutral-moderate));
-  color: var(--ac-tag-neutral-moderate-text, var(--a-text-default));
-}
-
-.navds-tag--alt1,
-.navds-tag--outline.navds-tag--meta-purple {
-  border-color: var(--ac-tag-alt-1-border, var(--a-border-alt-1));
-  background-color: var(--ac-tag-alt-1-bg, var(--a-surface-alt-1-subtle));
-  color: var(--ac-tag-alt-1-text, var(--a-text-default));
-}
+@layer aksel.reset, aksel.theming, aksel.baseline, aksel.print, aksel.typography, aksel.components.core, aksel.components.core.loader, aksel.components.core.button, aksel.components.form;
+
+@layer aksel.components.modules {
+  .aksel-tag {
+    --__axc-tag-icon-size: 1.5rem;
+    --__axc-tag-icon-margin: -2px;
+    --__axc-tag-border: ;
+    --__axc-tag-bg: ;
+    --__axc-tag-text: ;
+    --__axc-tag-text-strong: ;
+    border-radius: var(--ax-radius-4);
+    padding: var(--ax-space-2) var(--ax-space-8);
+    justify-content: center;
+    align-items: center;
+    min-height: 2rem;
+    line-height: 1;
+    text-decoration: none;
+    display: inline-flex;
+  }
 
-.navds-tag--alt1-filled,
-.navds-tag--strong.navds-tag--meta-purple {
-  border-color: transparent;
-  background-color: var(--ac-tag-alt-1-filled-bg, var(--a-surface-alt-1));
-  color: var(--ac-tag-alt-1-filled-text, var(--a-text-on-alt-1));
-}
+  .aksel-tag:has(.aksel-tag__icon--left) {
+    gap: var(--ax-space-2);
+  }
 
-.navds-tag--alt1-moderate,
-.navds-tag--moderate.navds-tag--meta-purple {
-  border-color: transparent;
-  background-color: var(--ac-tag-alt-1-moderate-bg, var(--a-surface-alt-1-moderate));
-  color: var(--ac-tag-alt-1-moderate-text, var(--a-text-default));
-}
+  .aksel-tag[data-variant="outline"] {
+    box-shadow: inset 0 0 0 1px var(--ax-border-default);
+    background: var(--ax-bg-moderate);
+    color: var(--ax-text-default);
+  }
 
-.navds-tag--alt2,
-.navds-tag--outline.navds-tag--meta-lime {
-  border-color: var(--ac-tag-alt-2-border, var(--a-border-alt-2));
-  background-color: var(--ac-tag-alt-2-bg, var(--a-surface-alt-2-subtle));
-  color: var(--ac-tag-alt-2-text, var(--a-text-default));
-}
+  .aksel-tag[data-variant="moderate"] {
+    background: var(--ax-bg-moderateA);
+    color: var(--ax-text-default);
+  }
 
-.navds-tag--alt2-filled,
-.navds-tag--strong.navds-tag--meta-lime {
-  border-color: transparent;
-  background-color: var(--ac-tag-alt-2-filled-bg, var(--a-surface-alt-2));
-  color: var(--ac-tag-alt-2-filled-text, var(--a-text-on-alt-2));
-}
+  @media (forced-colors: active) {
+    .aksel-tag[data-variant="moderate"] {
+      box-shadow: inset 0 0 0 1px var(--ax-bg-strong);
+      color: canvastext;
+    }
+  }
 
-.navds-tag--alt2-moderate,
-.navds-tag--moderate.navds-tag--meta-lime {
-  border-color: transparent;
-  background-color: var(--ac-tag-alt-2-moderate-bg, var(--a-surface-alt-2-moderate));
-  color: var(--ac-tag-alt-2-moderate-text, var(--a-text-default));
-}
+  .aksel-tag[data-variant="strong"] {
+    background: var(--ax-bg-strong);
+    color: var(--ax-text-contrast);
+  }
 
-.navds-tag--alt3 {
-  border-color: var(--ac-tag-alt-3-border, var(--a-border-alt-3));
-  background-color: var(--ac-tag-alt-3-bg, var(--a-surface-alt-3-subtle));
-  color: var(--ac-tag-alt-3-text, var(--a-text-default));
-}
+  @media (forced-colors: active) {
+    .aksel-tag[data-variant="strong"] {
+      color: canvas;
+    }
+  }
 
-.navds-tag--alt3-filled {
-  border-color: transparent;
-  background-color: var(--ac-tag-alt-3-filled-bg, var(--a-surface-alt-3));
-  color: var(--ac-tag-alt-3-filled-text, var(--a-text-on-alt-3));
-}
+  @media (forced-colors: active) {
+    .aksel-tag {
+      forced-color-adjust: none;
+      color: canvastext;
+    }
+  }
 
-.navds-tag--alt3-moderate {
-  border-color: transparent;
-  background-color: var(--ac-tag-alt-3-moderate-bg, var(--a-surface-alt-3-moderate));
-  color: var(--ac-tag-alt-3-moderate-text, var(--a-text-default));
-}
+  .aksel-tag--small {
+    min-height: 1.5rem;
+    padding: 0 var(--ax-space-6);
+    --__axc-tag-icon-size: 1.25rem;
+  }
 
-@media (forced-colors: active) {
-  .navds-tag {
-    forced-color-adjust: none;
+  .aksel-tag--xsmall {
+    min-height: 1.25rem;
+    padding: 0 var(--ax-space-4);
+    --__axc-tag-icon-size: 1rem;
+    --__axc-tag-icon-margin: -1px;
   }
 
-  .navds-tag--neutral,
-  .navds-tag--neutral-moderate {
-    border-color: canvastext;
-    color: canvastext;
+  .aksel-tag__icon--left {
+    font-size: var(--__axc-tag-icon-size);
+    margin-inline-start: var(--__axc-tag-icon-margin);
+    display: flex;
   }
 }
+
+@layer aksel.layout;

package/dist/component/tag.min.css

@@ -1 +1 @@
-.navds-tag{--__ac-tag-icon-size:1.5rem;--__ac-tag-icon-margin:-2px;align-items:center;border:1px solid;border-radius:var(--a-border-radius-small);display:inline-flex;justify-content:center;line-height:1;min-height:2rem;padding:var(--a-spacing-05) var(--a-spacing-2)}.navds-tag--small{min-height:1.5rem;padding:0 var(--a-spacing-1-alt);--__ac-tag-icon-size:1.25rem}.navds-tag--xsmall{min-height:1.25rem;padding:0 var(--a-spacing-1);--__ac-tag-icon-size:1rem;--__ac-tag-icon-margin:-1px}.navds-tag:has(.navds-tag__icon--left){gap:var(--a-spacing-05)}.navds-tag__icon--left{font-size:var(--__ac-tag-icon-size);-webkit-margin-start:var(--__ac-tag-icon-margin);display:flex;margin-inline-start:var(--__ac-tag-icon-margin)}.navds-tag--error{background-color:var(--ac-tag-error-bg,var(--a-surface-danger-subtle));border-color:var(--ac-tag-error-border,var(--a-border-danger));color:var(--ac-tag-error-text,var(--a-text-default))}.navds-tag--error-filled{background-color:var(--ac-tag-error-filled-bg,var(--a-surface-danger));border-color:#0000;color:var(--ac-tag-error-filled-text,var(--a-text-on-danger))}.navds-tag--error-moderate{background-color:var(--ac-tag-error-moderate-bg,var(--a-surface-danger-moderate));border-color:#0000;color:var(--ac-tag-error-moderate-text,var(--a-text-default))}.navds-tag--success{background-color:var(--ac-tag-success-bg,var(--a-surface-success-subtle));border-color:var(--ac-tag-success-border,var(--a-border-success));color:var(--ac-tag-success-text,var(--a-text-default))}.navds-tag--success-filled{background-color:var(--ac-tag-success-filled-bg,var(--a-surface-success));border-color:#0000;color:var(--ac-tag-success-filled-text,var(--a-text-on-success))}.navds-tag--success-moderate{background-color:var(--ac-tag-success-moderate-bg,var(--a-surface-success-moderate));border-color:#0000;color:var(--ac-tag-success-moderate-text,var(--a-text-default))}.navds-tag--warning{background-color:var(--ac-tag-warning-bg,var(--a-surface-warning-subtle));border-color:var(--ac-tag-warning-border,var(--a-border-warning));color:var(--ac-tag-warning-text,var(--a-text-default))}.navds-tag--warning-filled{background-color:var(--ac-tag-warning-filled-bg,var(--a-surface-warning));border-color:#0000;color:var(--ac-tag-warning-filled-text,var(--a-text-on-warning))}.navds-tag--warning-moderate{background-color:var(--ac-tag-warning-moderate-bg,var(--a-surface-warning-moderate));border-color:#0000;color:var(--ac-tag-warning-moderate-text,var(--a-text-default))}.navds-tag--info{background-color:var(--ac-tag-info-bg,var(--a-surface-info-subtle));border-color:var(--ac-tag-info-border,var(--a-border-info));color:var(--ac-tag-info-text,var(--a-text-default))}.navds-tag--info-filled{background-color:var(--ac-tag-info-filled-bg,var(--a-surface-info));border-color:#0000;color:var(--ac-tag-info-filled-text,var(--a-text-on-info))}.navds-tag--info-moderate{background-color:var(--ac-tag-info-moderate-bg,var(--a-surface-info-moderate));border-color:#0000;color:var(--ac-tag-info-moderate-text,var(--a-text-default))}.navds-tag--neutral{background-color:var(--ac-tag-neutral-bg,var(--a-surface-neutral-subtle));border-color:var(--ac-tag-neutral-border,var(--a-border-default));color:var(--ac-tag-neutral-text,var(--a-text-default))}.navds-tag--neutral-filled{background-color:var(--ac-tag-neutral-filled-bg,var(--a-surface-neutral));border-color:#0000;color:var(--ac-tag-neutral-filled-text,var(--a-text-on-neutral))}.navds-tag--neutral-moderate{background-color:var(--ac-tag-neutral-moderate-bg,var(--a-surface-neutral-moderate));border-color:#0000;color:var(--ac-tag-neutral-moderate-text,var(--a-text-default))}.navds-tag--alt1,.navds-tag--outline.navds-tag--meta-purple{background-color:var(--ac-tag-alt-1-bg,var(--a-surface-alt-1-subtle));border-color:var(--ac-tag-alt-1-border,var(--a-border-alt-1));color:var(--ac-tag-alt-1-text,var(--a-text-default))}.navds-tag--alt1-filled,.navds-tag--strong.navds-tag--meta-purple{background-color:var(--ac-tag-alt-1-filled-bg,var(--a-surface-alt-1));border-color:#0000;color:var(--ac-tag-alt-1-filled-text,var(--a-text-on-alt-1))}.navds-tag--alt1-moderate,.navds-tag--moderate.navds-tag--meta-purple{background-color:var(--ac-tag-alt-1-moderate-bg,var(--a-surface-alt-1-moderate));border-color:#0000;color:var(--ac-tag-alt-1-moderate-text,var(--a-text-default))}.navds-tag--alt2,.navds-tag--outline.navds-tag--meta-lime{background-color:var(--ac-tag-alt-2-bg,var(--a-surface-alt-2-subtle));border-color:var(--ac-tag-alt-2-border,var(--a-border-alt-2));color:var(--ac-tag-alt-2-text,var(--a-text-default))}.navds-tag--alt2-filled,.navds-tag--strong.navds-tag--meta-lime{background-color:var(--ac-tag-alt-2-filled-bg,var(--a-surface-alt-2));border-color:#0000;color:var(--ac-tag-alt-2-filled-text,var(--a-text-on-alt-2))}.navds-tag--alt2-moderate,.navds-tag--moderate.navds-tag--meta-lime{background-color:var(--ac-tag-alt-2-moderate-bg,var(--a-surface-alt-2-moderate));border-color:#0000;color:var(--ac-tag-alt-2-moderate-text,var(--a-text-default))}.navds-tag--alt3{background-color:var(--ac-tag-alt-3-bg,var(--a-surface-alt-3-subtle));border-color:var(--ac-tag-alt-3-border,var(--a-border-alt-3));color:var(--ac-tag-alt-3-text,var(--a-text-default))}.navds-tag--alt3-filled{background-color:var(--ac-tag-alt-3-filled-bg,var(--a-surface-alt-3));border-color:#0000;color:var(--ac-tag-alt-3-filled-text,var(--a-text-on-alt-3))}.navds-tag--alt3-moderate{background-color:var(--ac-tag-alt-3-moderate-bg,var(--a-surface-alt-3-moderate));border-color:#0000;color:var(--ac-tag-alt-3-moderate-text,var(--a-text-default))}@media (forced-colors:active){.navds-tag{forced-color-adjust:none}.navds-tag--neutral,.navds-tag--neutral-moderate{border-color:canvastext;color:initial}}
+@layer aksel.reset,aksel.theming,aksel.baseline,aksel.print,aksel.typography,aksel.components.core,aksel.components.core.loader,aksel.components.core.button,aksel.components.form;@layer aksel.components.modules{.aksel-tag{--__axc-tag-icon-size: 1.5rem;--__axc-tag-icon-margin: -2px;--__axc-tag-border: ;--__axc-tag-bg: ;--__axc-tag-text: ;--__axc-tag-text-strong: ;border-radius:var(--ax-radius-4);padding:var(--ax-space-2) var(--ax-space-8);justify-content:center;align-items:center;min-height:2rem;line-height:1;text-decoration:none;display:inline-flex}.aksel-tag:has(.aksel-tag__icon--left){gap:var(--ax-space-2)}.aksel-tag[data-variant=outline]{box-shadow:inset 0 0 0 1px var(--ax-border-default);background:var(--ax-bg-moderate);color:var(--ax-text-default)}.aksel-tag[data-variant=moderate]{background:var(--ax-bg-moderateA);color:var(--ax-text-default)}@media(forced-colors:active){.aksel-tag[data-variant=moderate]{box-shadow:inset 0 0 0 1px var(--ax-bg-strong);color:canvastext}}.aksel-tag[data-variant=strong]{background:var(--ax-bg-strong);color:var(--ax-text-contrast)}@media(forced-colors:active){.aksel-tag[data-variant=strong]{color:canvas}}@media(forced-colors:active){.aksel-tag{forced-color-adjust:none;color:canvastext}}.aksel-tag--small{min-height:1.5rem;padding:0 var(--ax-space-6);--__axc-tag-icon-size: 1.25rem}.aksel-tag--xsmall{min-height:1.25rem;padding:0 var(--ax-space-4);--__axc-tag-icon-size: 1rem;--__axc-tag-icon-margin: -1px}.aksel-tag__icon--left{font-size:var(--__axc-tag-icon-size);margin-inline-start:var(--__axc-tag-icon-margin);display:flex}}@layer aksel.layout;

package/dist/component/theme.css

@@ -0,0 +1,13 @@
+@layer aksel.reset, aksel.theming, aksel.baseline, aksel.print, aksel.typography;
+
+@layer aksel.components.core {
+  .aksel-theme {
+    color: var(--ax-text-neutral);
+  }
+
+  .aksel-theme[data-background="true"] {
+    background-color: var(--ax-bg-default);
+  }
+}
+
+@layer aksel.components.core.loader, aksel.components.core.button, aksel.components.form, aksel.components.modules, aksel.layout;

package/dist/component/theme.min.css

@@ -0,0 +1 @@
+@layer aksel.reset,aksel.theming,aksel.baseline,aksel.print,aksel.typography;@layer aksel.components.core{.aksel-theme{color:var(--ax-text-neutral)}.aksel-theme[data-background=true]{background-color:var(--ax-bg-default)}}@layer aksel.components.core.loader,aksel.components.core.button,aksel.components.form,aksel.components.modules,aksel.layout;