@navikt/ds-css 7.40.0 → 8.0.0

package/dist/component/timeline.min.css

@@ -1 +1 @@
-.navds-timeline{align-items:center;display:grid;grid-template-columns:auto minmax(0,1fr);min-width:-webkit-fit-content;min-width:fit-content;position:relative;width:100%}.navds-timeline__axislabels{box-sizing:initial;grid-column:2;height:1rem;margin-bottom:var(--a-spacing-1);position:relative}.navds-timeline__row-label{align-items:center;display:flex;gap:var(--a-spacing-2);grid-column:1;margin-right:var(--a-spacing-4);min-height:1.5rem;white-space:nowrap;width:auto}.navds-timeline__row-label:where(:nth-last-child(2)){align-self:flex-end}.navds-timeline__axislabels-label{color:var(--ac-timeline-axislabel-text,var(--a-text-subtle));position:absolute;white-space:nowrap}.navds-timeline__row{background:var(--ac-timeline-row-bg,var(--a-surface-subtle));display:flex;grid-column:2;margin:var(--a-spacing-4) 0}.navds-timeline__row--active{background:var(--ac-timeline-row-active-bg,var(--a-surface-selected))}.navds-timeline__row:last-of-type{margin-bottom:0}.navds-timeline__row-periods{margin:0;min-height:1.5rem;position:relative;width:100%}.navds-timeline__row-periods>li{list-style-type:none}.navds-timeline__row-periods:focus{outline:none}.navds-timeline__period{align-items:center;border:none;border-radius:var(--a-border-radius-full);display:flex;font-size:1rem;height:100%;padding:0;position:absolute;z-index:2}.navds-timeline__period--inner{align-items:center;display:flex;margin:0 var(--a-spacing-1);overflow:hidden;text-align:left;text-overflow:clip;white-space:nowrap}.navds-timeline__period--inner svg{flex-shrink:0}.navds-timeline__period--clickable{cursor:pointer}.navds-timeline__period--success{background:var(--ac-timeline-period-success-bg,var(--a-surface-success-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-success-border,var(--a-border-success))}.navds-timeline__period--success.navds-timeline__period--clickable:hover{background:var(--a-surface-success-subtle-hover);background:var(--ac-timeline-period-success-bg-hover,var(--a-surface-success-subtle-hover))}.navds-timeline__period--warning{background:var(--ac-timeline-period-warning-bg,var(--a-surface-warning-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-warning-border,var(--a-border-warning))}.navds-timeline__period--warning.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-warning-bg-hover,var(--a-surface-warning-subtle-hover))}.navds-timeline__period--danger{background:var(--ac-timeline-period-danger-bg,var(--a-surface-danger-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-danger-border,var(--a-border-danger))}.navds-timeline__period--danger.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-danger-bg-hover,var(--a-surface-danger-subtle-hover))}.navds-timeline__period--info{background:var(--ac-timeline-period-info-bg,var(--a-surface-info-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-info-border,var(--a-border-info))}.navds-timeline__period--info.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-info-bg-hover,var(--a-surface-info-subtle-hover))}.navds-timeline__period--neutral{background:var(--ac-timeline-period-neutral-bg,var(--a-bg-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-neutral-border,var(--a-border-default))}.navds-timeline__period--neutral.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-neutral-bg-hover,var(--a-gray-200))}.navds-timeline__period--connected-both{border-radius:0}.navds-timeline__period--connected-right{border-bottom-right-radius:0;border-top-right-radius:0}.navds-timeline__period--connected-left{border-bottom-left-radius:0;border-top-left-radius:0}.navds-timeline__period--selected{box-shadow:inset 0 0 0 2px var(--ac-timeline-period-selected-border,var(--a-border-action-selected));z-index:3}.navds-timeline__pin-wrapper{display:flex;flex-direction:column-reverse;grid-column:2;height:100%;isolation:isolate;position:absolute;top:0;z-index:1;--navdsc-timeline-pin-size:0.9rem}.navds-timeline__pin-button{background:var(--a-surface-default);border:none;border-radius:var(--a-border-radius-full);box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 4px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 5px var(--a-surface-default);cursor:pointer;padding:var(--a-spacing-1);position:relative;z-index:2}.navds-timeline__pin-button:before{border-radius:var(--a-border-radius-full);content:"";height:25px;inset:0;left:-9px;position:absolute;top:-9px;width:25px}.navds-timeline__pin-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 3px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus);outline:none}.navds-timeline__pin-button:hover{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 4px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 5px var(--a-surface-default)}.navds-timeline__pin-button:hover:focus-visible{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 3px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus)}@supports not selector(:focus-visible){.navds-timeline__pin-button:focus{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 3px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus);outline:none}.navds-timeline__pin-button:hover:focus{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 3px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus)}}.navds-timeline__pin-wrapper:before{background:var(--a-surface-inverted);content:"";height:calc(100% - var(--navdsc-timeline-pin-size)*2);margin:0 auto;top:var(--navdsc-timeline-pin-size);width:1px}.navds-timeline__zoom{display:flex;float:right;list-style-type:none;margin-top:var(--a-spacing-6)}.navds-timeline__zoom-button{all:unset;background:var(--ac-timeline-zoom-bg,var(--a-surface-default));border-width:1px;border:1px solid var(--ac-timeline-zoom-border,var(--a-border-default));border-right-width:0;cursor:pointer;padding:6px 9px 6px 8px}.navds-timeline__zoom li:first-child .navds-timeline__zoom-button{border-radius:var(--a-border-radius-medium) 0 0 var(--a-border-radius-medium)}.navds-timeline__zoom li:last-child .navds-timeline__zoom-button{border-radius:0 var(--a-border-radius-medium) var(--a-border-radius-medium) 0;border-width:1px}.navds-timeline__zoom li:only-child .navds-timeline__zoom-button{border-radius:var(--a-border-radius-medium)}.navds-timeline__zoom-button:not([aria-pressed=true]):hover{background:var(--ac-timeline-zoom-bg-hover,var(--a-surface-action-subtle-hover))}.navds-timeline__zoom-button[aria-pressed=true]{background:var(--ac-timeline-zoom-selected-bg,var(--a-surface-inverted));color:var(--ac-timeline-zoom-selected-text,var(--a-text-on-inverted))}.navds-timeline__period:focus-visible{box-shadow:0 0 0 2px var(--a-border-focus);outline:none;z-index:4}.navds-timeline__period--selected:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-timeline-period-selected-border,var(--a-border-action-selected)),0 0 0 2px var(--a-border-focus);z-index:3}.navds-timeline__zoom li:focus-within{z-index:var(--a-z-index-focus)}.navds-timeline__zoom-button:focus-visible{border-width:1px;box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 3px var(--a-border-focus)}.navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus-visible{margin-right:2px;padding-right:6px}@supports not selector(:focus-visible){.navds-timeline__period:focus{box-shadow:0 0 0 2px var(--a-border-focus);outline:none;z-index:4}.navds-timeline__period--selected:focus{box-shadow:inset 0 0 0 2px var(--ac-timeline-period-selected-border,var(--a-border-action-selected)),0 0 0 2px var(--a-border-focus);z-index:3}.navds-timeline__zoom-button:focus{border-width:1px;box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 3px var(--a-border-focus)}.navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus{margin-right:2px;padding-right:6px}}.navds-timeline__popover{background-color:var(--ac-popover-bg,var(--a-surface-default));border:1px solid;border-color:var(--ac-popover-border,var(--a-border-default));border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-medium);padding:var(--a-spacing-3);z-index:var(--a-z-index-popover)}.navds-timeline__popover:focus{box-shadow:var(--a-shadow-focus);outline:none}.navds-timeline__popover-arrow{background-color:var(--ac-popover-bg,var(--a-surface-default));border:1px solid;border-color:var(--ac-popover-border,var(--a-border-default));height:1rem;position:absolute;transform:rotate(45deg);width:1rem;z-index:-1}.navds-timeline__popover[data-placement^=top]>.navds-timeline__popover-arrow{border-left-color:#0000;border-top-color:#0000}.navds-timeline__popover[data-placement^=bottom]>.navds-timeline__popover-arrow{border-bottom-color:#0000;border-right-color:#0000}.navds-timeline__popover[data-placement^=left]>.navds-timeline__popover-arrow{border-bottom-color:#0000;border-left-color:#0000}.navds-timeline__popover[data-placement^=right]>.navds-timeline__popover-arrow{border-right-color:#0000;border-top-color:#0000}@media (forced-colors:active){.navds-timeline__period:focus{outline:2px solid highlight;outline-offset:2px}.navds-timeline__period--danger,.navds-timeline__period--info,.navds-timeline__period--neutral,.navds-timeline__period--success,.navds-timeline__period--warning{forced-color-adjust:none}.navds-timeline__pin-wrapper:before,.navds-timeline__row{border:1px solid #0000}.navds-timeline__pin-button{outline:4px solid #0000}.navds-timeline__pin-button:focus,.navds-timeline__pin-button:focus-visible{box-shadow:none;outline:4px solid highlight;outline-offset:2px}.navds-timeline__popover[data-placement^=top]>.navds-timeline__popover-arrow{border-left-color:canvas;border-top-color:canvas}.navds-timeline__popover[data-placement^=bottom]>.navds-timeline__popover-arrow{border-bottom-color:canvas;border-right-color:canvas}.navds-timeline__popover[data-placement^=left]>.navds-timeline__popover-arrow{border-bottom-color:canvas;border-left-color:canvas}.navds-timeline__popover[data-placement^=right]>.navds-timeline__popover-arrow{border-right-color:canvas;border-top-color:canvas}}
+@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-timeline{grid-template-columns:auto minmax(0,1fr);align-items:center;width:100%;min-width:fit-content;display:grid;position:relative}.aksel-timeline__axislabels{box-sizing:content-box;height:1rem;margin-bottom:var(--ax-space-4);grid-column:2;position:relative}.aksel-timeline__row-label{white-space:nowrap;width:auto;margin-right:var(--ax-space-16);align-items:center;gap:var(--ax-space-8);grid-column:1;min-height:1.5rem;display:flex}.aksel-timeline__row-label:where(:nth-last-child(2)){align-self:flex-end}.aksel-timeline__axislabels-label{color:var(--ax-text-neutral-subtle);white-space:nowrap;position:absolute}.aksel-timeline__row{background:var(--ax-bg-neutral-softA);margin:var(--ax-space-16) 0;grid-column:2;display:flex}.aksel-timeline__row--active{background:var(--ax-bg-accent-moderate)}.aksel-timeline__row:last-of-type{margin-bottom:0}.aksel-timeline__row-periods{width:100%;min-height:1.5rem;margin:0;position:relative}.aksel-timeline__row-periods>li{list-style-type:none}.aksel-timeline__period:focus-visible{z-index:4;outline:3px solid var(--ax-border-focus);outline-offset:3px}.aksel-timeline__period:focus-visible.aksel-timeline__period:focus-visible{box-shadow:0 0 0 3px var(--ax-bg-default)}.aksel-timeline__period{border-radius:var(--ax-radius-full);z-index:2;background:var(--ax-bg-moderate);border:solid 1px var(--ax-border-default);height:100%;color:var(--ax-text-decoration);align-items:center;padding:0;font-size:1rem;display:flex;position:absolute}.aksel-timeline__period.aksel-timeline__period--clickable:hover{background:var(--ax-bg-moderate-hover);border-color:var(--ax-border-strong)}.aksel-timeline__period.aksel-timeline__period--clickable.aksel-timeline__period--selected{background:var(--ax-bg-strong-pressed);color:var(--ax-text-contrast);border:none}.aksel-timeline__period--inner{margin:0 var(--ax-space-8);white-space:nowrap;text-overflow:clip;text-align:left;align-items:center;display:flex;overflow:hidden}.aksel-timeline__period--inner svg{flex-shrink:0}.aksel-timeline__period--clickable{cursor:pointer}.aksel-timeline__period--connected-both{border-radius:0}.aksel-timeline__period--connected-right{border-top-right-radius:0;border-bottom-right-radius:0}.aksel-timeline__period--connected-left{border-top-left-radius:0;border-bottom-left-radius:0}.aksel-timeline__pin-wrapper{z-index:1;isolation:isolate;flex-direction:column-reverse;grid-column:2;height:100%;display:flex;position:absolute;top:0}.aksel-timeline__pin-button{cursor:pointer;background:var(--ax-bg-default);box-shadow:inset 0 0 0 4px var(--ax-bg-danger-strong);z-index:2;border-radius:var(--ax-radius-full);padding:var(--ax-space-8);border:none;position:relative}.aksel-timeline__pin-button:before{content:"";border-radius:var(--ax-radius-full);width:25px;height:25px;position:absolute;inset:-9px 0 0 -9px}.aksel-timeline__pin-button:hover{box-shadow:inset 0 0 0 4px var(--ax-bg-danger-strong-hover)}.aksel-timeline__pin-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ax-border-danger-strong),0 0 0 3px var(--ax-bg-default);outline:3px solid var(--ax-border-focus);outline-offset:3px}.aksel-timeline__pin-wrapper:before{content:"";background:var(--ax-border-neutral-strong);width:1px;height:calc(100% - 1.8rem);margin:0 auto;top:.9rem}.aksel-timeline__zoom{margin-top:var(--ax-space-24);float:right;list-style-type:none;display:flex}.aksel-timeline__zoom-button{all:unset;cursor:pointer;border:1px solid var(--ax-border-neutral);background:var(--ax-bg-default);border-width:1px 0 1px 1px;padding:6px 9px 6px 8px}.aksel-timeline__zoom li:first-child .aksel-timeline__zoom-button{border-radius:var(--ax-radius-4) 0 0 var(--ax-radius-4)}.aksel-timeline__zoom li:last-child .aksel-timeline__zoom-button{border-radius:0 var(--ax-radius-4) var(--ax-radius-4) 0;border-width:1px}.aksel-timeline__zoom li:only-child .aksel-timeline__zoom-button{border-radius:var(--ax-radius-4)}.aksel-timeline__zoom-button:not([aria-pressed=true]):hover{background:var(--ax-bg-neutral-moderate-hoverA)}.aksel-timeline__zoom-button[aria-pressed=true]{background:var(--ax-bg-neutral-strong-pressed);border-color:var(--ax-bg-neutral-strong-pressed);color:var(--ax-text-neutral-contrast)}.aksel-timeline__zoom li:focus-within{z-index:5}.aksel-timeline__zoom-button:focus-visible{box-shadow:0 0 0 1px var(--ax-bg-default),0 0 0 4px var(--ax-border-focus);border-width:1px}.aksel-timeline__zoom li:not(:last-child) .aksel-timeline__zoom-button:focus-visible{margin-right:2px;padding-right:6px}.aksel-timeline__popover{z-index:5;background-color:var(--ax-bg-raised);box-shadow:var(--ax-shadow-dialog);border:1px solid;border-color:var(--ax-border-neutral-subtleA);border-radius:var(--ax-radius-8);padding:var(--ax-space-16) var(--ax-space-20)}.aksel-timeline__popover:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px}@media(forced-colors:active){.aksel-timeline__period:focus{outline-offset:3px;outline:3px solid highlight}.aksel-timeline__period--success,.aksel-timeline__period--warning,.aksel-timeline__period--info,.aksel-timeline__period--neutral,.aksel-timeline__period--danger{forced-color-adjust:none}.aksel-timeline__row,.aksel-timeline__pin-wrapper:before{border:1px solid rgba(0,0,0,0)}.aksel-timeline__pin-button{outline:4px solid rgba(0,0,0,0)}.aksel-timeline__pin-button:focus,.aksel-timeline__pin-button:focus-visible{outline-offset:3px;box-shadow:none;outline:4px solid highlight}}}@layer aksel.layout;

package/dist/component/togglegroup.css

@@ -1,181 +1,111 @@
-.navds-toggle-group__wrapper {
-  display: grid;
-  justify-items: start;
-  gap: var(--a-spacing-2);
-}
-
-.navds-toggle-group__wrapper--fill {
-  justify-items: initial;
-}
-
-.navds-toggle-group {
-  border-radius: var(--a-border-radius-medium);
-  background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
-  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
-  padding: calc(var(--a-spacing-1) + 0.0625rem);
-  gap: var(--a-spacing-1);
-  display: inline-grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 1fr;
-}
-
-.navds-toggle-group--small {
-  padding: calc(var(--a-spacing-05) + 0.0625rem);
-}
-
-.navds-toggle-group--neutral {
-  background-color: var(--ac-toggle-group-neutral-bg, var(--a-surface-transparent));
-  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-neutral-border, var(--a-border-default));
-}
-
-.navds-toggle-group__button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--a-spacing-1) var(--a-spacing-3);
-  min-height: 2.375rem;
-  border: none;
-  cursor: pointer;
-  background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
-  color: var(--ac-toggle-group-button-text, var(--a-text-default));
-  border-radius: var(--a-border-radius-small);
-  min-width: fit-content;
-  font-weight: var(--a-font-weight-regular);
-}
-
-.navds-toggle-group--medium > :where(.navds-toggle-group__button:first-of-type:focus-visible) {
-  border-start-start-radius: 1px;
-  border-end-start-radius: 1px;
-}
-
-.navds-toggle-group--medium > :where(.navds-toggle-group__button:last-of-type:focus-visible) {
-  border-start-end-radius: 1px;
-  border-end-end-radius: 1px;
-}
-
-.navds-toggle-group--neutral > .navds-toggle-group__button {
-  background-color: var(--ac-toggle-group-button-neutral-bg, var(--a-surface-transparent));
-  color: var(--ac-toggle-group-button-neutral-text, var(--a-text-default));
-}
-
-.navds-toggle-group__button:hover {
-  background-color: var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle));
-  color: var(--ac-toggle-group-button-hover-text, var(--a-text-default));
-}
-
-.navds-toggle-group--neutral > .navds-toggle-group__button:hover {
-  background-color: var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
-  color: var(--ac-toggle-group-button-neutral-hover-text, var(--a-text-default));
-}
-
-.navds-toggle-group__button:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 1px;
-  box-shadow:
-    0 0 0 1px var(--a-surface-default),
-    0 0 0 4px var(--a-border-focus);
-}
+@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;
 
-@supports not selector(:focus-visible) {
-  .navds-toggle-group__button:focus {
-    outline: 2px solid transparent;
-    outline-offset: 1px;
-    box-shadow:
-      0 0 0 1px var(--a-surface-default),
-      0 0 0 4px var(--a-border-focus);
+@layer aksel.components.modules {
+  .aksel-toggle-group__wrapper {
+    justify-items: start;
+    gap: var(--ax-space-8);
+    display: grid;
   }
-}
-
-.navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
-  box-shadow:
-    0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)),
-    0 0 0 4px var(--a-border-focus);
-}
 
-@supports not selector(:focus-visible) {
-  .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
-    box-shadow:
-      0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)),
-      0 0 0 4px var(--a-border-focus);
+  .aksel-toggle-group__wrapper--fill {
+    justify-items: initial;
   }
-}
-
-.navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
-  box-shadow:
-    0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
-    0 0 0 4px var(--a-border-focus);
-}
 
-@supports not selector(:focus-visible) {
-  .navds-toggle-group--neutral > .navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
-    box-shadow:
-      0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
-      0 0 0 4px var(--a-border-focus);
+  .aksel-toggle-group {
+    border-radius: var(--ax-radius-8);
+    background-color: var(--ax-bg-input);
+    box-shadow: inset 0 0 0 1px var(--ax-border-neutral);
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
+    gap: 1px;
+    display: inline-grid;
   }
-}
-
-.navds-toggle-group__button-inner {
-  display: flex;
-  align-items: center;
-  gap: var(--a-spacing-2);
-  font-weight: inherit;
-}
-
-.navds-toggle-group__button-inner > * {
-  flex-shrink: 0;
-}
 
-.navds-toggle-group__button[aria-pressed="true"],
-.navds-toggle-group__button[aria-checked="true"] {
-  background-color: var(--ac-toggle-group-selected-bg, var(--a-surface-action-selected));
-  color: var(--ac-toggle-group-selected-text, var(--a-text-on-action));
-}
+  .aksel-toggle-group__button {
+    padding: var(--ax-space-4) var(--ax-space-12);
+    cursor: pointer;
+    min-height: 3rem;
+    color: var(--ax-text-neutral);
+    border-radius: var(--ax-radius-8);
+    background-color: rgba(0, 0, 0, 0);
+    border: none;
+    justify-content: center;
+    align-items: center;
+    min-width: fit-content;
+    display: inline-flex;
+    position: relative;
+  }
 
-.navds-toggle-group--neutral > .navds-toggle-group__button[aria-pressed="true"],
-.navds-toggle-group--neutral > .navds-toggle-group__button[aria-checked="true"] {
-  background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral-selected));
-  color: var(--ac-toggle-group-neutral-selected-text, var(--a-text-on-neutral));
-}
+  .aksel-toggle-group__button:hover {
+    background-color: var(--ax-bg-moderate-hoverA);
+    color: var(--ax-text-neutral);
+  }
 
-.navds-toggle-group--small > .navds-toggle-group__button {
-  padding: var(--a-spacing-05) var(--a-spacing-3);
-  min-height: 1.625rem;
-  min-width: fit-content;
-}
+  .aksel-toggle-group__button:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    z-index: 1;
+  }
 
-.navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
-  font-size: 1.5rem;
-}
+  .aksel-toggle-group__button[data-selected="true"] {
+    background-color: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
+  }
 
-.navds-toggle-group--small > .navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
-  font-size: 1.125rem;
-}
+  .aksel-toggle-group__button:not([data-selected="true"], :first-child, .aksel-toggle-group__button[data-selected="true"] + .aksel-toggle-group__button):before {
+    content: "";
+    background-color: var(--ax-border-neutral-subtleA);
+    width: 1px;
+    height: 50%;
+    display: block;
+    position: absolute;
+    left: -1px;
+  }
 
-@media (forced-colors: active) {
-  .navds-toggle-group {
-    border: 2px solid transparent;
+  .aksel-toggle-group__button-inner {
+    align-items: center;
+    gap: var(--ax-space-8);
+    display: flex;
   }
 
-  .navds-toggle-group__button:hover {
-    color: highlight;
+  .aksel-toggle-group__button-inner > * {
+    flex-shrink: 0;
   }
 
-  .navds-toggle-group__button[aria-checked="true"],
-  .navds-toggle-group__button[aria-pressed="true"] {
-    background-color: selecteditem;
-    color: selecteditemtext;
+  .aksel-toggle-group__button-inner > svg {
+    font-size: var(--ax-font-size-heading-medium);
   }
 
-  .navds-toggle-group__button[aria-checked="true"] > *,
-  .navds-toggle-group__button[aria-pressed="true"] > * {
-    forced-color-adjust: none;
+  .aksel-toggle-group--small .aksel-toggle-group__button {
+    padding: var(--ax-space-2) var(--ax-space-12);
+    min-height: 2rem;
   }
 
-  .navds-toggle-group__button:active {
-    background-color: unset !important;
+  .aksel-toggle-group--small .aksel-toggle-group__button-inner > svg {
+    font-size: var(--ax-font-size-xlarge);
   }
 
-  .navds-toggle-group__button:focus-visible {
-    outline-color: highlight;
+  @media (forced-colors: active) {
+    .aksel-toggle-group {
+      border: 2px solid rgba(0, 0, 0, 0);
+    }
+
+    .aksel-toggle-group__button:hover {
+      color: highlight;
+      background-color: highlighttext;
+      outline: 1px solid highlight;
+    }
+
+    .aksel-toggle-group__button[data-selected="true"] {
+      color: selecteditemtext;
+      forced-color-adjust: none;
+      background-color: selecteditem;
+    }
+
+    .aksel-toggle-group__button:focus-visible {
+      outline-color: highlight;
+    }
   }
 }
+
+@layer aksel.layout;

package/dist/component/togglegroup.min.css

@@ -1 +1 @@
-.navds-toggle-group__wrapper{display:grid;gap:var(--a-spacing-2);justify-items:start}.navds-toggle-group__wrapper--fill{justify-items:legacy}.navds-toggle-group{background-color:var(--ac-toggle-group-bg,var(--a-surface-transparent));border-radius:var(--a-border-radius-medium);box-shadow:inset 0 0 0 1px var(--ac-toggle-group-border,var(--a-border-default));display:inline-grid;gap:var(--a-spacing-1);grid-auto-columns:1fr;grid-auto-flow:column;padding:calc(var(--a-spacing-1) + .0625rem)}.navds-toggle-group--small{padding:calc(var(--a-spacing-05) + .0625rem)}.navds-toggle-group--neutral{background-color:var(--ac-toggle-group-neutral-bg,var(--a-surface-transparent));box-shadow:inset 0 0 0 1px var(--ac-toggle-group-neutral-border,var(--a-border-default))}.navds-toggle-group__button{align-items:center;background-color:var(--ac-toggle-group-button-bg,var(--a-surface-transparent));border:none;border-radius:var(--a-border-radius-small);color:var(--ac-toggle-group-button-text,var(--a-text-default));cursor:pointer;display:inline-flex;font-weight:var(--a-font-weight-regular);justify-content:center;min-height:2.375rem;min-width:-webkit-fit-content;min-width:fit-content;padding:var(--a-spacing-1) var(--a-spacing-3)}.navds-toggle-group--medium>:where(.navds-toggle-group__button:first-of-type:focus-visible){border-end-start-radius:1px;border-start-start-radius:1px}.navds-toggle-group--medium>:where(.navds-toggle-group__button:last-of-type:focus-visible){border-end-end-radius:1px;border-start-end-radius:1px}.navds-toggle-group--neutral>.navds-toggle-group__button{background-color:var(--ac-toggle-group-button-neutral-bg,var(--a-surface-transparent));color:var(--ac-toggle-group-button-neutral-text,var(--a-text-default))}.navds-toggle-group__button:hover{background-color:var(--ac-toggle-group-button-hover-bg,var(--a-surface-action-subtle));color:var(--ac-toggle-group-button-hover-text,var(--a-text-default))}.navds-toggle-group--neutral>.navds-toggle-group__button:hover{background-color:var(--ac-toggle-group-button-neutral-hover-bg,var(--a-surface-neutral-subtle-hover));color:var(--ac-toggle-group-button-neutral-hover-text,var(--a-text-default))}.navds-toggle-group__button:focus-visible{box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 4px var(--a-border-focus);outline:2px solid #0000;outline-offset:1px}@supports not selector(:focus-visible){.navds-toggle-group__button:focus{box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 4px var(--a-border-focus);outline:2px solid #0000;outline-offset:1px}}.navds-toggle-group__button:focus-visible:hover[aria-pressed=false]{box-shadow:0 0 0 1px var(--ac-toggle-group-button-hover-bg,var(--a-surface-action-subtle)),0 0 0 4px var(--a-border-focus)}@supports not selector(:focus-visible){.navds-toggle-group__button:focus:hover[aria-pressed=false]{box-shadow:0 0 0 1px var(--ac-toggle-group-button-hover-bg,var(--a-surface-action-subtle)),0 0 0 4px var(--a-border-focus)}}.navds-toggle-group--neutral>.navds-toggle-group__button:focus:hover[aria-pressed=false]{box-shadow:0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg,var(--a-surface-neutral-subtle-hover)),0 0 0 4px var(--a-border-focus)}@supports not selector(:focus-visible){.navds-toggle-group--neutral>.navds-toggle-group__button:focus-visible:hover[aria-pressed=false]{box-shadow:0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg,var(--a-surface-neutral-subtle-hover)),0 0 0 4px var(--a-border-focus)}}.navds-toggle-group__button-inner{align-items:center;display:flex;font-weight:inherit;gap:var(--a-spacing-2)}.navds-toggle-group__button-inner>*{flex-shrink:0}.navds-toggle-group__button[aria-checked=true],.navds-toggle-group__button[aria-pressed=true]{background-color:var(--ac-toggle-group-selected-bg,var(--a-surface-action-selected));color:var(--ac-toggle-group-selected-text,var(--a-text-on-action))}.navds-toggle-group--neutral>.navds-toggle-group__button[aria-checked=true],.navds-toggle-group--neutral>.navds-toggle-group__button[aria-pressed=true]{background-color:var(--ac-toggle-group-neutral-selected-bg,var(--a-surface-neutral-selected));color:var(--ac-toggle-group-neutral-selected-text,var(--a-text-on-neutral))}.navds-toggle-group--small>.navds-toggle-group__button{min-height:1.625rem;min-width:-webkit-fit-content;min-width:fit-content;padding:var(--a-spacing-05) var(--a-spacing-3)}.navds-toggle-group__button>.navds-toggle-group__button-inner>svg{font-size:1.5rem}.navds-toggle-group--small>.navds-toggle-group__button>.navds-toggle-group__button-inner>svg{font-size:1.125rem}@media (forced-colors:active){.navds-toggle-group{border:2px solid #0000}.navds-toggle-group__button:hover{color:highlight}.navds-toggle-group__button[aria-checked=true],.navds-toggle-group__button[aria-pressed=true]{background-color:selecteditem;color:selecteditemtext}.navds-toggle-group__button[aria-checked=true]>*,.navds-toggle-group__button[aria-pressed=true]>*{forced-color-adjust:none}.navds-toggle-group__button:active{background-color:unset!important}.navds-toggle-group__button:focus-visible{outline-color:highlight}}
+@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-toggle-group__wrapper{justify-items:start;gap:var(--ax-space-8);display:grid}.aksel-toggle-group__wrapper--fill{justify-items:initial}.aksel-toggle-group{border-radius:var(--ax-radius-8);background-color:var(--ax-bg-input);box-shadow:inset 0 0 0 1px var(--ax-border-neutral);grid-auto-columns:1fr;grid-auto-flow:column;gap:1px;display:inline-grid}.aksel-toggle-group__button{padding:var(--ax-space-4) var(--ax-space-12);cursor:pointer;min-height:3rem;color:var(--ax-text-neutral);border-radius:var(--ax-radius-8);background-color:#0000;border:none;justify-content:center;align-items:center;min-width:fit-content;display:inline-flex;position:relative}.aksel-toggle-group__button:hover{background-color:var(--ax-bg-moderate-hoverA);color:var(--ax-text-neutral)}.aksel-toggle-group__button:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px;z-index:1}.aksel-toggle-group__button[data-selected=true]{background-color:var(--ax-bg-strong-pressed);color:var(--ax-text-contrast)}.aksel-toggle-group__button:not([data-selected=true],:first-child,.aksel-toggle-group__button[data-selected=true]+.aksel-toggle-group__button):before{content:"";background-color:var(--ax-border-neutral-subtleA);width:1px;height:50%;display:block;position:absolute;left:-1px}.aksel-toggle-group__button-inner{align-items:center;gap:var(--ax-space-8);display:flex}.aksel-toggle-group__button-inner>*{flex-shrink:0}.aksel-toggle-group__button-inner>svg{font-size:var(--ax-font-size-heading-medium)}.aksel-toggle-group--small .aksel-toggle-group__button{padding:var(--ax-space-2) var(--ax-space-12);min-height:2rem}.aksel-toggle-group--small .aksel-toggle-group__button-inner>svg{font-size:var(--ax-font-size-xlarge)}@media(forced-colors:active){.aksel-toggle-group{border:2px solid rgba(0,0,0,0)}.aksel-toggle-group__button:hover{color:highlight;background-color:highlighttext;outline:1px solid highlight}.aksel-toggle-group__button[data-selected=true]{color:selecteditemtext;forced-color-adjust:none;background-color:selecteditem}.aksel-toggle-group__button:focus-visible{outline-color:highlight}}}@layer aksel.layout;

package/dist/component/tooltip.css

@@ -1,81 +1,132 @@
-@keyframes tooltipFadeIn {
-  0% {
-    opacity: 0;
+@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-tooltip {
+    z-index: 2147483647;
+    background-color: var(--ax-bg-neutral-strong);
+    color: var(--ax-text-neutral-contrast);
+    border-radius: var(--ax-radius-4);
+    padding: 0 var(--ax-space-6);
+    text-align: center;
+    box-shadow: var(--ax-shadow-dialog);
+    border: 1px solid rgba(0, 0, 0, 0);
+    flex-direction: column;
+    align-items: center;
+    animation-duration: .15s;
+    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
+    display: flex;
   }
 
-  100% {
-    opacity: 1;
+  .aksel-tooltip:focus {
+    outline: 0;
   }
-}
 
-.navds-tooltip {
-  z-index: var(--a-z-index-tooltip);
-  background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
-  color: var(--ac-tooltip-text, var(--a-text-on-inverted));
-  border-radius: var(--a-border-radius-small);
-  padding: 0 var(--a-spacing-2);
-  align-items: center;
-  filter: drop-shadow(0 2px 4px rgba(0 0 0 / 0.1)) drop-shadow(0 4px 6px rgba(0 0 0 / 0.1));
-  display: flex;
-  flex-direction: column;
-  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  animation-duration: 0.2s;
-  animation-name: tooltipFadeIn;
-  text-align: center;
-}
+  .aksel-tooltip__arrow {
+    z-index: -1;
+    background-color: var(--ax-bg-neutral-strong);
+    border-radius: 1px;
+    width: .5rem;
+    height: .5rem;
+    position: absolute;
+    transform: rotate(45deg);
+  }
 
-.navds-tooltip__arrow {
-  height: 0.4375rem;
-  width: 0.4375rem;
-  transform: rotate(45deg);
-  z-index: -1;
-  background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
-  position: absolute;
-}
+  @media (forced-colors: active) {
+    .aksel-tooltip__arrow {
+      display: none;
+    }
+  }
 
-.navds-tooltip__keys {
-  padding-bottom: var(--a-spacing-1);
-  display: flex;
-  gap: var(--a-spacing-1);
-}
+  .aksel-tooltip:where([data-state="open"]):where([data-side="bottom"]) {
+    animation-name: aksel-tooltip-from-bottom, aksel-tooltip-fade-in;
+  }
 
-.navds-tooltip__key {
-  font-family: var(--a-font-family);
-  background-color: var(--ac-tooltip-key-bg, var(--a-surface-neutral));
-  color: var(--ac-tooltip-key-text, var(--a-text-on-inverted));
-  border-radius: var(--a-border-radius-small);
-  padding: 0 var(--a-spacing-1);
-  min-width: 1.125rem;
-  height: 1.125rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
+  .aksel-tooltip:where([data-state="open"]):where([data-side="top"]) {
+    animation-name: aksel-tooltip-from-top, aksel-tooltip-fade-in;
+  }
 
-@media (forced-colors: active) {
-  .navds-tooltip {
-    --__a-tooltip-high-contrast-border: 1px solid transparent;
+  .aksel-tooltip:where([data-state="open"]):where([data-side="left"]) {
+    animation-name: aksel-tooltip-from-left, aksel-tooltip-fade-in;
+  }
 
-    border: var(--__a-tooltip-high-contrast-border);
+  .aksel-tooltip:where([data-state="open"]):where([data-side="right"]) {
+    animation-name: aksel-tooltip-from-right, aksel-tooltip-fade-in;
   }
 
-  .navds-tooltip[data-side="top"] .navds-tooltip__arrow {
-    border-bottom: var(--__a-tooltip-high-contrast-border);
-    border-right: var(--__a-tooltip-high-contrast-border);
+  @keyframes aksel-tooltip-from-bottom {
+    from {
+      transform: translateY(-4px);
+    }
+
+    to {
+      transform: translateY(0);
+    }
   }
 
-  .navds-tooltip[data-side="right"] .navds-tooltip__arrow {
-    border-bottom: var(--__a-tooltip-high-contrast-border);
-    border-left: var(--__a-tooltip-high-contrast-border);
+  @keyframes aksel-tooltip-from-top {
+    from {
+      transform: translateY(4px);
+    }
+
+    to {
+      transform: translateY(0);
+    }
   }
 
-  .navds-tooltip[data-side="bottom"] .navds-tooltip__arrow {
-    border-left: var(--__a-tooltip-high-contrast-border);
-    border-top: var(--__a-tooltip-high-contrast-border);
+  @keyframes aksel-tooltip-from-left {
+    from {
+      transform: translateX(4px);
+    }
+
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes aksel-tooltip-from-right {
+    from {
+      transform: translateX(-4px);
+    }
+
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes aksel-tooltip-fade-in {
+    from {
+      opacity: .01;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  .aksel-tooltip__keys {
+    padding-bottom: var(--ax-space-4);
+    gap: var(--ax-space-4);
+    display: flex;
   }
 
-  .navds-tooltip[data-side="left"] .navds-tooltip__arrow {
-    border-top: var(--__a-tooltip-high-contrast-border);
-    border-right: var(--__a-tooltip-high-contrast-border);
+  .aksel-tooltip__key {
+    font-family: var(--ax-font-family);
+    color: var(--ax-text-neutral);
+    padding: 0 var(--ax-space-4);
+    border-radius: var(--ax-radius-2);
+    background: var(--ax-bg-neutral-moderate);
+    justify-content: center;
+    align-items: center;
+    min-width: 1.125rem;
+    height: 1.125rem;
+    display: inline-flex;
+  }
+
+  @media (forced-colors: active) {
+    .aksel-tooltip__key {
+      outline: 1px solid;
+    }
   }
 }
+
+@layer aksel.layout;

package/dist/component/tooltip.min.css

@@ -1 +1 @@
-@keyframes tooltipFadeIn{0%{opacity:0}to{opacity:1}}.navds-tooltip{align-items:center;animation-duration:.2s;animation-name:tooltipFadeIn;animation-timing-function:cubic-bezier(.4,0,.2,1);border-radius:var(--a-border-radius-small);color:var(--ac-tooltip-text,var(--a-text-on-inverted));display:flex;filter:drop-shadow(0 2px 4px rgba(0 0 0/.1)) drop-shadow(0 4px 6px rgba(0 0 0/.1));flex-direction:column;padding:0 var(--a-spacing-2);text-align:center;z-index:var(--a-z-index-tooltip)}.navds-tooltip,.navds-tooltip__arrow{background-color:var(--ac-tooltip-bg,var(--a-surface-inverted))}.navds-tooltip__arrow{height:.4375rem;position:absolute;transform:rotate(45deg);width:.4375rem;z-index:-1}.navds-tooltip__keys{display:flex;gap:var(--a-spacing-1);padding-bottom:var(--a-spacing-1)}.navds-tooltip__key{align-items:center;background-color:var(--ac-tooltip-key-bg,var(--a-surface-neutral));border-radius:var(--a-border-radius-small);color:var(--ac-tooltip-key-text,var(--a-text-on-inverted));display:inline-flex;font-family:var(--a-font-family);height:1.125rem;justify-content:center;min-width:1.125rem;padding:0 var(--a-spacing-1)}@media (forced-colors:active){.navds-tooltip{--__a-tooltip-high-contrast-border:1px solid #0000;border:var(--__a-tooltip-high-contrast-border)}.navds-tooltip[data-side=top] .navds-tooltip__arrow{border-bottom:var(--__a-tooltip-high-contrast-border);border-right:var(--__a-tooltip-high-contrast-border)}.navds-tooltip[data-side=right] .navds-tooltip__arrow{border-bottom:var(--__a-tooltip-high-contrast-border);border-left:var(--__a-tooltip-high-contrast-border)}.navds-tooltip[data-side=bottom] .navds-tooltip__arrow{border-left:var(--__a-tooltip-high-contrast-border);border-top:var(--__a-tooltip-high-contrast-border)}.navds-tooltip[data-side=left] .navds-tooltip__arrow{border-right:var(--__a-tooltip-high-contrast-border);border-top:var(--__a-tooltip-high-contrast-border)}}
+@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-tooltip{z-index:2147483647;background-color:var(--ax-bg-neutral-strong);color:var(--ax-text-neutral-contrast);border-radius:var(--ax-radius-4);padding:0 var(--ax-space-6);text-align:center;box-shadow:var(--ax-shadow-dialog);border:1px solid rgba(0,0,0,0);flex-direction:column;align-items:center;animation-duration:.15s;animation-timing-function:cubic-bezier(.16,1,.3,1);display:flex}.aksel-tooltip:focus{outline:0}.aksel-tooltip__arrow{z-index:-1;background-color:var(--ax-bg-neutral-strong);border-radius:1px;width:.5rem;height:.5rem;position:absolute;transform:rotate(45deg)}@media(forced-colors:active){.aksel-tooltip__arrow{display:none}}.aksel-tooltip:where([data-state=open]):where([data-side=bottom]){animation-name:aksel-tooltip-from-bottom,aksel-tooltip-fade-in}.aksel-tooltip:where([data-state=open]):where([data-side=top]){animation-name:aksel-tooltip-from-top,aksel-tooltip-fade-in}.aksel-tooltip:where([data-state=open]):where([data-side=left]){animation-name:aksel-tooltip-from-left,aksel-tooltip-fade-in}.aksel-tooltip:where([data-state=open]):where([data-side=right]){animation-name:aksel-tooltip-from-right,aksel-tooltip-fade-in}@keyframes aksel-tooltip-from-bottom{0%{transform:translateY(-4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-from-top{0%{transform:translateY(4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-from-left{0%{transform:translate(4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-from-right{0%{transform:translate(-4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-fade-in{0%{opacity:.01}to{opacity:1}}.aksel-tooltip__keys{padding-bottom:var(--ax-space-4);gap:var(--ax-space-4);display:flex}.aksel-tooltip__key{font-family:var(--ax-font-family);color:var(--ax-text-neutral);padding:0 var(--ax-space-4);border-radius:var(--ax-radius-2);background:var(--ax-bg-neutral-moderate);justify-content:center;align-items:center;min-width:1.125rem;height:1.125rem;display:inline-flex}@media(forced-colors:active){.aksel-tooltip__key{outline:1px solid}}}@layer aksel.layout;