@navikt/ds-css 2.8.16 → 2.9.0

package/dist/component/tabs.css

@@ -0,0 +1,114 @@
+.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: auto;
+  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: 44px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.navds-tabs__scroll-button--hidden {
+  visibility: hidden;
+}
+
+.navds-tabs__scroll-button svg {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+}
+
+.navds-tabs--small .navds-tabs__scroll-button {
+  padding: 0.375rem var(--a-spacing-4);
+  width: 32px;
+}
+
+.navds-tabs__tab {
+  min-height: 48px;
+  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-subtle));
+  cursor: pointer;
+}
+
+.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));
+  color: var(--ac-tabs-selected-text, var(--a-text-default));
+}
+
+.navds-tabs__tab:focus {
+  outline: none;
+  box-shadow: inset var(--a-shadow-focus);
+  color: var(--ac-tabs-focus-text, var(--a-text-default));
+}
+
+.navds-tabs__tab-inner {
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-1);
+}
+
+.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: 32px;
+  padding: 0.375rem var(--a-spacing-4);
+}
+
+.navds-tabs__tab-icon--top,
+.navds-tabs__tab--small.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__tabpanel:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--a-border-focus);
+}

package/dist/component/tabs.min.css

@@ -0,0 +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{-ms-overflow-style:none;display:flex;max-width:100%;overflow-x:scroll;scroll-behavior:smooth;scrollbar-width:none;width:auto}.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:44px}.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:.375rem var(--a-spacing-4);width:32px}.navds-tabs__tab{align-items:center;background:none;border:none;color:var(--ac-tabs-text,var(--a-text-subtle));cursor:pointer;display:inline-flex;justify-content:center;min-height:48px;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));color:var(--ac-tabs-selected-text,var(--a-text-default))}.navds-tabs__tab:focus{box-shadow:inset var(--a-shadow-focus);color:var(--ac-tabs-focus-text,var(--a-text-default));outline:none}.navds-tabs__tab-inner{align-items:center;display:flex;gap:var(--a-spacing-1)}.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:32px;padding:.375rem 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__tabpanel:focus-visible{box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:none}

package/dist/component/tag.css

@@ -0,0 +1,116 @@
+.navds-tag {
+  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: 32px;
+  line-height: 1;
+}
+
+.navds-tag--small {
+  min-height: 24px;
+  padding: 0 0.375rem;
+}
+
+.navds-tag--xsmall {
+  min-height: 20px;
+  padding: 0 var(--a-spacing-1);
+}
+
+.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--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--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--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--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--alt1 {
+  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));
+}
+
+.navds-tag--alt1-filled {
+  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));
+}
+
+.navds-tag--alt2 {
+  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));
+}
+
+.navds-tag--alt2-filled {
+  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));
+}
+
+.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));
+}
+
+.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));
+}

package/dist/component/tag.min.css

@@ -0,0 +1 @@
+.navds-tag{align-items:center;border:1px solid;border-radius:var(--a-border-radius-small);display:inline-flex;justify-content:center;line-height:1;min-height:32px;padding:var(--a-spacing-05) var(--a-spacing-2)}.navds-tag--small{min-height:24px;padding:0 .375rem}.navds-tag--xsmall{min-height:20px;padding:0 var(--a-spacing-1)}.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:transparent;color:var(--ac-tag-error-filled-text,var(--a-text-on-danger))}.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:transparent;color:var(--ac-tag-success-filled-text,var(--a-text-on-success))}.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:transparent;color:var(--ac-tag-warning-filled-text,var(--a-text-on-warning))}.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:transparent;color:var(--ac-tag-info-filled-text,var(--a-text-on-info))}.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:transparent;color:var(--ac-tag-neutral-filled-text,var(--a-text-on-neutral))}.navds-tag--alt1{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{background-color:var(--ac-tag-alt-1-filled-bg,var(--a-surface-alt-1));border-color:transparent;color:var(--ac-tag-alt-1-filled-text,var(--a-text-on-alt-1))}.navds-tag--alt2{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{background-color:var(--ac-tag-alt-2-filled-bg,var(--a-surface-alt-2));border-color:transparent;color:var(--ac-tag-alt-2-filled-text,var(--a-text-on-alt-2))}.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:transparent;color:var(--ac-tag-alt-3-filled-text,var(--a-text-on-alt-3))}

package/dist/component/togglegroup.css

@@ -0,0 +1,100 @@
+.navds-toggle-group__wrapper {
+  display: grid;
+  justify-items: start;
+  gap: var(--a-spacing-2);
+}
+
+.navds-toggle-group {
+  border-radius: 9px;
+  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) + 1px);
+  gap: var(--a-spacing-1);
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+}
+
+.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-3);
+  min-height: 48px;
+  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-medium);
+  min-width: fit-content;
+}
+
+.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-action-on-action-subtle));
+}
+
+.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 {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
+}
+
+.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);
+}
+
+.navds-toggle-group__button-inner {
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-2);
+}
+
+.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));
+}
+
+.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));
+  color: var(--ac-toggle-group-neutral-selected-text, var(--a-text-on-neutral));
+}
+
+.navds-toggle-group--small > .navds-toggle-group__button {
+  padding: 0.375rem;
+  min-height: 32px;
+  min-width: fit-content;
+}
+
+.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;
+}

package/dist/component/togglegroup.min.css

@@ -0,0 +1 @@
+.navds-toggle-group__wrapper{display:grid;gap:var(--a-spacing-2);justify-items:start}.navds-toggle-group{background-color:var(--ac-toggle-group-bg,var(--a-surface-transparent));border-radius:9px;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) + 1px)}.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-medium);color:var(--ac-toggle-group-button-text,var(--a-text-default));cursor:pointer;display:inline-flex;justify-content:center;min-height:48px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding:var(--a-spacing-3)}.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-action-on-action-subtle))}.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{box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 4px var(--a-border-focus);outline:none}.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)}.navds-toggle-group__button-inner{align-items:center;display:flex;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));color:var(--ac-toggle-group-neutral-selected-text,var(--a-text-on-neutral))}.navds-toggle-group--small>.navds-toggle-group__button{min-height:32px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding:.375rem}.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}

package/dist/component/tooltip.css

@@ -0,0 +1,53 @@
+@keyframes tooltipFadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.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;
+}
+
+.navds-tooltip__arrow {
+  height: 7px;
+  width: 7px;
+  transform: rotate(45deg);
+  z-index: -1;
+  background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
+  position: absolute;
+}
+
+.navds-tooltip__keys {
+  padding-bottom: var(--a-spacing-1);
+  display: flex;
+  gap: var(--a-spacing-1);
+}
+
+.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: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

package/dist/component/tooltip.min.css

@@ -0,0 +1 @@
+@-webkit-keyframes tooltipFadeIn{0%{opacity:0}to{opacity:1}}@keyframes tooltipFadeIn{0%{opacity:0}to{opacity:1}}.navds-tooltip{align-items:center;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-name:tooltipFadeIn;animation-name:tooltipFadeIn;-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);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;-webkit-filter:drop-shadow(0 2px 4px rgba(0,0,0,.1)) drop-shadow(0 4px 6px rgba(0,0,0,.1));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:7px;position:absolute;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:7px;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:18px;justify-content:center;min-width:18px;padding:0 var(--a-spacing-1)}

package/dist/component/typography.css

@@ -0,0 +1,160 @@
+/* Heading */
+.navds-heading {
+  font-weight: var(--a-font-weight-bold);
+  margin: 0;
+}
+.navds-heading--xlarge {
+  font-size: var(--a-font-size-heading-2xlarge);
+  letter-spacing: -0.01em;
+  line-height: var(--a-font-line-height-heading-2xlarge);
+}
+.navds-heading--xlarge.navds-typo--spacing {
+  margin-bottom: var(--a-spacing-5);
+}
+.navds-heading--large {
+  font-size: var(--a-font-size-heading-xlarge);
+  letter-spacing: -0.008em;
+  line-height: var(--a-font-line-height-heading-xlarge);
+}
+.navds-heading--large.navds-typo--spacing {
+  margin-bottom: var(--a-spacing-4);
+}
+/* Mobile scale */
+@media (max-width: 480px) {
+  .navds-heading--xlarge {
+    font-size: var(--a-font-size-heading-xlarge);
+    letter-spacing: -0.008em;
+    line-height: var(--a-font-line-height-heading-xlarge);
+  }
+
+  .navds-heading--xlarge.navds-typo--spacing {
+    margin-bottom: var(--a-spacing-4);
+  }
+
+  .navds-heading--large {
+    font-size: var(--a-font-size-heading-large);
+    letter-spacing: -0.004em;
+    line-height: var(--a-font-line-height-heading-large);
+  }
+
+  .navds-heading--large.navds-typo--spacing {
+    margin-bottom: var(--a-spacing-3);
+  }
+}
+.navds-heading--medium {
+  font-size: var(--a-font-size-heading-medium);
+  letter-spacing: -0.002em;
+  line-height: var(--a-font-line-height-heading-medium);
+}
+.navds-heading--medium.navds-typo--spacing {
+  margin-bottom: var(--a-spacing-3);
+}
+.navds-heading--small {
+  font-size: var(--a-font-size-heading-small);
+  letter-spacing: -0.001em;
+  line-height: var(--a-font-line-height-heading-small);
+}
+.navds-heading--small.navds-typo--spacing {
+  margin-bottom: var(--a-spacing-3);
+}
+.navds-heading--xsmall {
+  font-size: var(--a-font-size-heading-xsmall);
+  letter-spacing: -0.001em;
+  line-height: var(--a-font-line-height-heading-xsmall);
+}
+.navds-heading--xsmall.navds-typo--spacing {
+  margin-bottom: var(--a-spacing-3);
+}
+/* Ingress */
+.navds-ingress {
+  font-size: var(--a-font-size-xlarge);
+  font-weight: var(--a-font-weight-regular);
+  letter-spacing: -0.001em;
+  line-height: var(--a-font-line-height-xlarge);
+  margin: 0;
+}
+.navds-ingress.navds-typo--spacing {
+  margin-bottom: var(--a-spacing-10);
+}
+/* Body */
+.navds-body-long {
+  font-size: var(--a-font-size-large);
+  font-weight: var(--a-font-weight-regular);
+  letter-spacing: 0;
+  line-height: var(--a-font-line-height-xlarge);
+  margin: 0;
+}
+.navds-body-long.navds-typo--spacing {
+  margin-bottom: var(--a-spacing-7);
+}
+.navds-body-long--small {
+  font-size: var(--a-font-size-medium);
+  letter-spacing: 0.002em;
+  line-height: var(--a-font-line-height-large);
+}
+.navds-body-long--small.navds-typo--spacing {
+  margin-bottom: var(--a-spacing-6);
+}
+.navds-body-short {
+  font-size: var(--a-font-size-large);
+  font-weight: var(--a-font-weight-regular);
+  letter-spacing: 0;
+  line-height: var(--a-font-line-height-large);
+  margin: 0;
+}
+.navds-body-short.navds-typo--spacing {
+  margin-bottom: var(--a-spacing-3);
+}
+.navds-body-short--small {
+  font-size: var(--a-font-size-medium);
+  letter-spacing: 0.002em;
+  line-height: var(--a-font-line-height-medium);
+}
+.navds-body-short--small.navds-typo--spacing {
+  margin-bottom: var(--a-spacing-2);
+}
+/* Label */
+.navds-label {
+  font-size: var(--a-font-size-large);
+  font-weight: var(--a-font-weight-bold);
+  letter-spacing: 0;
+  line-height: var(--a-font-line-height-large);
+  margin: 0;
+}
+.navds-label.navds-typo--spacing {
+  margin-bottom: var(--a-spacing-3);
+}
+.navds-label--small {
+  font-size: var(--a-font-size-medium);
+  letter-spacing: 0.002em;
+  line-height: var(--a-font-line-height-medium);
+}
+.navds-label--small.navds-typo--spacing {
+  margin-bottom: var(--a-spacing-2);
+}
+/* Small text */
+.navds-detail {
+  font-size: var(--a-font-size-small);
+  letter-spacing: 0.004em;
+  line-height: var(--a-font-line-height-medium);
+  margin: 0;
+}
+.navds-detail.navds-typo--spacing {
+  margin-bottom: var(--a-spacing-2);
+}
+.navds-detail.navds-typo--uppercase {
+  text-transform: uppercase;
+}
+.navds-detail--small {
+  font-weight: var(--a-font-weight-regular);
+}
+.navds-detail--small.navds-typo--spacing {
+  margin-bottom: var(--a-spacing-2);
+}
+[data-theme="dark"].navds-error-message,
+[data-theme="dark"] .navds-error-message {
+  --a-text-danger: var(--a-red-300);
+}
+.navds-error-message {
+  color: var(--ac-typo-error-text, var(--a-text-danger));
+}

package/dist/component/typography.min.css

@@ -0,0 +1 @@
+.navds-heading{font-weight:var(--a-font-weight-bold);margin:0}.navds-heading--xlarge{font-size:var(--a-font-size-heading-2xlarge);letter-spacing:-.01em;line-height:var(--a-font-line-height-heading-2xlarge)}.navds-heading--xlarge.navds-typo--spacing{margin-bottom:var(--a-spacing-5)}.navds-heading--large{font-size:var(--a-font-size-heading-xlarge);letter-spacing:-.008em;line-height:var(--a-font-line-height-heading-xlarge)}.navds-heading--large.navds-typo--spacing{margin-bottom:var(--a-spacing-4)}@media (max-width:480px){.navds-heading--xlarge{font-size:var(--a-font-size-heading-xlarge);letter-spacing:-.008em;line-height:var(--a-font-line-height-heading-xlarge)}.navds-heading--xlarge.navds-typo--spacing{margin-bottom:var(--a-spacing-4)}.navds-heading--large{font-size:var(--a-font-size-heading-large);letter-spacing:-.004em;line-height:var(--a-font-line-height-heading-large)}.navds-heading--large.navds-typo--spacing{margin-bottom:var(--a-spacing-3)}}.navds-heading--medium{font-size:var(--a-font-size-heading-medium);letter-spacing:-.002em;line-height:var(--a-font-line-height-heading-medium)}.navds-heading--medium.navds-typo--spacing{margin-bottom:var(--a-spacing-3)}.navds-heading--small{font-size:var(--a-font-size-heading-small);letter-spacing:-.001em;line-height:var(--a-font-line-height-heading-small)}.navds-heading--small.navds-typo--spacing{margin-bottom:var(--a-spacing-3)}.navds-heading--xsmall{font-size:var(--a-font-size-heading-xsmall);letter-spacing:-.001em;line-height:var(--a-font-line-height-heading-xsmall)}.navds-heading--xsmall.navds-typo--spacing{margin-bottom:var(--a-spacing-3)}.navds-ingress{font-size:var(--a-font-size-xlarge);font-weight:var(--a-font-weight-regular);letter-spacing:-.001em;line-height:var(--a-font-line-height-xlarge);margin:0}.navds-ingress.navds-typo--spacing{margin-bottom:var(--a-spacing-10)}.navds-body-long{font-size:var(--a-font-size-large);font-weight:var(--a-font-weight-regular);letter-spacing:0;line-height:var(--a-font-line-height-xlarge);margin:0}.navds-body-long.navds-typo--spacing{margin-bottom:var(--a-spacing-7)}.navds-body-long--small{font-size:var(--a-font-size-medium);letter-spacing:.002em;line-height:var(--a-font-line-height-large)}.navds-body-long--small.navds-typo--spacing{margin-bottom:var(--a-spacing-6)}.navds-body-short{font-size:var(--a-font-size-large);font-weight:var(--a-font-weight-regular);letter-spacing:0;line-height:var(--a-font-line-height-large);margin:0}.navds-body-short.navds-typo--spacing{margin-bottom:var(--a-spacing-3)}.navds-body-short--small{font-size:var(--a-font-size-medium);letter-spacing:.002em;line-height:var(--a-font-line-height-medium)}.navds-body-short--small.navds-typo--spacing{margin-bottom:var(--a-spacing-2)}.navds-label{font-size:var(--a-font-size-large);font-weight:var(--a-font-weight-bold);letter-spacing:0;line-height:var(--a-font-line-height-large);margin:0}.navds-label.navds-typo--spacing{margin-bottom:var(--a-spacing-3)}.navds-label--small{font-size:var(--a-font-size-medium);letter-spacing:.002em;line-height:var(--a-font-line-height-medium)}.navds-label--small.navds-typo--spacing{margin-bottom:var(--a-spacing-2)}.navds-detail{font-size:var(--a-font-size-small);letter-spacing:.004em;line-height:var(--a-font-line-height-medium);margin:0}.navds-detail.navds-typo--spacing{margin-bottom:var(--a-spacing-2)}.navds-detail.navds-typo--uppercase{text-transform:uppercase}.navds-detail--small{font-weight:var(--a-font-weight-regular)}.navds-detail--small.navds-typo--spacing{margin-bottom:var(--a-spacing-2)}[data-theme=dark] .navds-error-message,[data-theme=dark].navds-error-message{--a-text-danger:var(--a-red-300)}.navds-error-message{color:var(--ac-typo-error-text,var(--a-text-danger))}