@navikt/ds-css 2.8.16 → 2.9.0

package/dist/component/pagination.min.css

@@ -0,0 +1 @@
+.navds-pagination__list{display:flex;gap:var(--a-spacing-3);list-style:none;margin:0;padding:0}.navds-pagination__ellipsis{align-items:center;cursor:default;display:flex;justify-content:center;width:var(--a-spacing-12)}.navds-pagination--small .navds-pagination__ellipsis{width:var(--a-spacing-8)}.navds-pagination--xsmall .navds-pagination__ellipsis{width:var(--a-spacing-6)}.navds-pagination__item{color:var(--ac-pagination-text,var(--a-text-default))}.navds-pagination--medium .navds-pagination__item{border-radius:var(--a-border-radius-medium)}.navds-pagination__item[aria-current=true]{background-color:var(--ac-pagination-selected-bg,var(--a-surface-action-selected));color:var(--ac-pagination-selected-text,var(--a-text-on-action))}.navds-pagination__item[aria-current=true]:focus{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}.navds-pagination__prev-next{align-items:center;display:flex;gap:var(--a-spacing-1)}.navds-pagination--small .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text){padding-left:.375rem;padding-right:.375rem}.navds-pagination--xsmall .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text){padding-left:var(--a-spacing-05);padding-right:var(--a-spacing-05)}.navds-pagination--invisible{visibility:hidden}

package/dist/component/panel.css

@@ -0,0 +1,10 @@
+.navds-panel {
+  background-color: var(--ac-panel-bg, var(--a-surface-default));
+  padding: var(--a-spacing-4);
+  border-radius: var(--a-border-radius-small);
+  border: 1px solid transparent;
+}
+
+.navds-panel--border {
+  border-color: var(--ac-panel-border, var(--a-border-default));
+}

package/dist/component/panel.min.css

@@ -0,0 +1 @@
+.navds-panel{background-color:var(--ac-panel-bg,var(--a-surface-default));border:1px solid transparent;border-radius:var(--a-border-radius-small);padding:var(--a-spacing-4)}.navds-panel--border{border-color:var(--ac-panel-border,var(--a-border-default))}

package/dist/component/popover.css

@@ -0,0 +1,54 @@
+.navds-popover {
+  z-index: var(--a-z-index-popover);
+  background-color: var(--ac-popover-bg, var(--a-surface-default));
+  box-shadow: var(--a-shadow-medium);
+  border: 1px solid;
+  border-color: var(--ac-popover-border, var(--a-border-default));
+  border-radius: var(--a-border-radius-medium);
+}
+
+.navds-popover__content {
+  padding: var(--a-spacing-4);
+}
+
+.navds-popover--hidden {
+  display: none;
+}
+
+.navds-popover:focus {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
+}
+
+.navds-popover__arrow {
+  position: absolute;
+  z-index: -1;
+  transform: rotate(45deg);
+  background-color: var(--ac-popover-bg, var(--a-surface-default));
+  border: 1px solid;
+  border-color: var(--ac-popover-border, var(--a-border-default));
+  width: 1rem;
+  height: 1rem;
+}
+
+.navds-popover[data-placement^="top"] > .navds-popover__arrow {
+  border-left-color: transparent;
+  border-top-color: transparent;
+}
+
+/* prettier-ignore */
+
+.navds-popover[data-placement^="bottom"] > .navds-popover__arrow {
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+}
+
+.navds-popover[data-placement^="left"] > .navds-popover__arrow {
+  border-left-color: transparent;
+  border-bottom-color: transparent;
+}
+
+.navds-popover[data-placement^="right"] > .navds-popover__arrow {
+  border-right-color: transparent;
+  border-top-color: transparent;
+}

package/dist/component/popover.min.css

@@ -0,0 +1 @@
+.navds-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-medium);box-shadow:var(--a-shadow-medium);z-index:var(--a-z-index-popover)}.navds-popover__content{padding:var(--a-spacing-4)}.navds-popover--hidden{display:none}.navds-popover:focus{box-shadow:var(--a-shadow-focus);outline:none}.navds-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;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:1rem;z-index:-1}.navds-popover[data-placement^=top]>.navds-popover__arrow{border-left-color:transparent;border-top-color:transparent}.navds-popover[data-placement^=bottom]>.navds-popover__arrow{border-bottom-color:transparent;border-right-color:transparent}.navds-popover[data-placement^=left]>.navds-popover__arrow{border-bottom-color:transparent;border-left-color:transparent}.navds-popover[data-placement^=right]>.navds-popover__arrow{border-right-color:transparent;border-top-color:transparent}

package/dist/component/readmore.css

@@ -0,0 +1,63 @@
+.navds-read-more__button {
+  cursor: pointer;
+  margin: 0;
+  border: none;
+  background: none;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--a-spacing-05);
+  color: var(--ac-read-more-text, var(--a-text-action));
+  border-radius: var(--a-border-radius-small);
+  padding: var(--a-spacing-1) var(--a-spacing-1) var(--a-spacing-1) 2px;
+  text-align: start;
+}
+
+.navds-read-more--small .navds-read-more__button {
+  padding: 2px var(--a-spacing-1) 2px 2px;
+}
+
+.navds-read-more__button:hover {
+  background-color: var(--ac-read-more-hover-bg, var(--a-surface-hover));
+}
+
+.navds-read-more__button:active {
+  background-color: var(--ac-read-more-active-bg, var(--a-surface-active));
+}
+
+.navds-read-more__button:focus {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
+}
+
+.navds-read-more__content {
+  margin-top: var(--a-spacing-1);
+  border-left: 2px solid var(--ac-read-more-line, var(--a-border-divider));
+  margin-left: 11px;
+  padding-left: 11px;
+}
+
+.navds-read-more__expand-icon {
+  font-size: 1.25rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+}
+
+.navds-read-more--small .navds-read-more__expand-icon {
+  height: 1.25rem;
+}
+
+.navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
+  transform: rotate(-180deg);
+}
+
+.navds-read-more__expand-icon--filled {
+  display: none;
+}
+
+.navds-read-more__button:hover > .navds-read-more__expand-icon.navds-read-more__expand-icon--filled {
+  display: inherit;
+}
+
+.navds-read-more__button:hover > .navds-read-more__expand-icon {
+  display: none;
+}

package/dist/component/readmore.min.css

@@ -0,0 +1 @@
+.navds-read-more__button{align-items:flex-start;background:none;border:none;border-radius:var(--a-border-radius-small);color:var(--ac-read-more-text,var(--a-text-action));cursor:pointer;display:flex;gap:var(--a-spacing-05);margin:0;padding:var(--a-spacing-1) var(--a-spacing-1) var(--a-spacing-1) 2px;text-align:start}.navds-read-more--small .navds-read-more__button{padding:2px var(--a-spacing-1) 2px 2px}.navds-read-more__button:hover{background-color:var(--ac-read-more-hover-bg,var(--a-surface-hover))}.navds-read-more__button:active{background-color:var(--ac-read-more-active-bg,var(--a-surface-active))}.navds-read-more__button:focus{box-shadow:var(--a-shadow-focus);outline:none}.navds-read-more__content{border-left:2px solid var(--ac-read-more-line,var(--a-border-divider));margin-left:11px;margin-top:var(--a-spacing-1);padding-left:11px}.navds-read-more__expand-icon{flex-shrink:0;font-size:1.25rem;height:1.5rem}.navds-read-more--small .navds-read-more__expand-icon{height:1.25rem}.navds-read-more--open>.navds-read-more__button>.navds-read-more__expand-icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.navds-read-more__expand-icon--filled{display:none}.navds-read-more__button:hover>.navds-read-more__expand-icon.navds-read-more__expand-icon--filled{display:inherit}.navds-read-more__button:hover>.navds-read-more__expand-icon{display:none}

package/dist/component/stepper.css

@@ -0,0 +1,225 @@
+.navds-stepper {
+  --navds-stepper-circle-size: 1.75rem;
+  --navds-stepper-border-width: 2px;
+  --navds-stepper-line-length: 1rem;
+
+  color: var(--ac-stepper-text, var(--a-surface-action));
+  font-weight: 600;
+  line-height: 1;
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+.navds-stepper--horizontal {
+  display: flex;
+  align-items: flex-start;
+  text-align: center;
+}
+
+.navds-stepper__item {
+  display: grid;
+  grid-template-rows:
+    [line-1] auto [step-start] var(--navds-stepper-circle-size)
+    [line-2 step-end] auto;
+  grid-template-columns: var(--navds-stepper-circle-size) auto;
+  justify-items: flex-start;
+  gap: 0.5rem;
+}
+
+.navds-stepper__line {
+  background-color: var(--ac-stepper-line, var(--a-border-default));
+  width: var(--navds-stepper-border-width);
+  height: 100%;
+  min-height: var(--navds-stepper-line-length);
+  justify-self: center;
+  grid-column: 1;
+}
+
+.navds-stepper__step--behind.navds-stepper__step--completed + .navds-stepper__line {
+  background-color: var(--ac-stepper-line-completed, var(--a-border-selected));
+}
+
+.navds-stepper__line--1 {
+  grid-row: line-1;
+  display: none;
+}
+
+.navds-stepper__line--2 {
+  grid-row: line-2;
+}
+
+:where(.navds-stepper__item:last-of-type) .navds-stepper__line--2 {
+  display: none;
+}
+
+.navds-stepper__step {
+  grid-row: 2 / -1;
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: [circle] var(--navds-stepper-circle-size) [content] auto;
+  gap: var(--a-spacing-2);
+  justify-content: flex-start;
+  text-decoration: none;
+  cursor: pointer;
+  padding: var(--navds-stepper-border-width);
+  margin: calc(var(--navds-stepper-border-width) * -1) calc(var(--navds-stepper-border-width) * -1) 1.75rem;
+}
+
+button.navds-stepper__step {
+  appearance: none;
+  border: none;
+  background-color: transparent;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+}
+
+.navds-stepper__step--non-interactive {
+  color: var(--ac-stepper-non-interactive, var(--a-text-subtle));
+  cursor: default;
+}
+
+:where(.navds-stepper__step):focus {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
+  isolation: isolate;
+}
+
+.navds-stepper__circle {
+  grid-column: circle;
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: var(--navds-stepper-circle-size);
+  height: var(--navds-stepper-circle-size);
+  border: var(--navds-stepper-border-width) solid currentColor;
+  border-radius: var(--a-border-radius-full);
+  line-height: 1;
+}
+
+.navds-stepper__circle--success {
+  border: none;
+  background: none;
+  font-size: 28px;
+}
+
+.navds-stepper__content {
+  min-width: fit-content;
+  line-height: 1.5;
+  grid-column: content;
+  padding-top: 0.035rem;
+}
+
+/* Horizontal */
+
+:where(.navds-stepper--horizontal) .navds-stepper__item {
+  flex: 1 1 100%;
+  grid-template-columns:
+    [line-1-start] 1fr [step-start] auto [line-1-end] var(--navds-stepper-circle-size)
+    [line-2-start] auto [step-end] 1fr [line-2-end];
+  grid-template-rows: var(--navds-stepper-circle-size) auto;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__line {
+  height: var(--navds-stepper-border-width);
+  width: 100%;
+  min-height: auto;
+  grid-row: 1;
+  display: block;
+  align-self: center;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__line--1 {
+  grid-column: line-1;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__line--2 {
+  grid-column: line-2;
+}
+
+:where(.navds-stepper--horizontal .navds-stepper__item:first-of-type) .navds-stepper__line--1,
+:where(.navds-stepper--horizontal .navds-stepper__item:last-of-type) .navds-stepper__line--2 {
+  visibility: hidden;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__step {
+  grid-row: 1 / -1;
+  grid-column: step;
+  display: grid;
+  grid-template-rows: [circle] var(--navds-stepper-circle-size) [content] auto;
+  grid-template-columns:
+    [content-start] auto [circle] var(--navds-stepper-circle-size)
+    [content-end] auto;
+  justify-items: center;
+  align-items: center;
+  margin-bottom: 0;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__circle {
+  grid-row: circle;
+  grid-column: 2;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__content {
+  grid-row: content;
+  grid-column: 1 / -1;
+  max-width: 24ch;
+}
+
+/* Active step */
+
+:where(.navds-stepper__step--active) .navds-stepper__content {
+  color: var(--ac-stepper-active, var(--a-text-action-selected));
+}
+
+:where(.navds-stepper__step:hover) .navds-stepper__content {
+  text-decoration: underline;
+}
+
+:where(.navds-stepper__step--non-interactive:hover, .navds-stepper__step--active:hover) .navds-stepper__content {
+  text-decoration: none;
+}
+
+:where(.navds-stepper__step--active) .navds-stepper__circle {
+  background-color: var(--ac-stepper-active-bg, var(--a-surface-action-selected));
+  border-color: var(--ac-stepper-active-border, var(--a-border-action-selected));
+  color: var(--ac-stepper-active-text, var(--a-text-on-action));
+}
+
+:where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle {
+  background-color: var(--ac-stepper-hover-bg, var(--a-surface-action-subtle-hover));
+}
+
+/* Non-interactive */
+
+:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__content {
+  color: var(--ac-stepper-non-interactive-active, var(--a-text-default));
+}
+
+.navds-stepper__step--non-interactive.navds-stepper__step--behind.navds-stepper__step--completed + .navds-stepper__line {
+  background-color: var(--ac-stepper-non-interactive-line-completed, var(--a-border-strong));
+}
+
+:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle {
+  background-color: var(--ac-stepper-non-interactive-active-bg, var(--a-surface-inverted));
+  border-color: var(--ac-stepper-non-interactive-active-border, var(--a-surface-inverted));
+  color: var(--ac-stepper-non-interactive-active-text, var(--a-text-on-inverted));
+}
+
+:where(.navds-stepper__step--non-interactive:hover) .navds-stepper__circle {
+  background-color: transparent;
+}
+
+:where(.navds-stepper__step--non-interactive.navds-stepper__step--active:hover) .navds-stepper__circle {
+  background-color: var(--ac-stepper-non-interactive-active-bg, var(--a-surface-inverted));
+}
+
+:where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle {
+  background-color: inherit;
+  color: var(--ac-stepper-active-completed, var(--a-text-action-selected));
+}
+
+:where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive) .navds-stepper__circle {
+  color: var(--ac-stepper-non-interactive-active-completed, var(--a-text-default));
+}

package/dist/component/stepper.min.css

@@ -0,0 +1 @@
+.navds-stepper{--navds-stepper-circle-size:1.75rem;--navds-stepper-border-width:2px;--navds-stepper-line-length:1rem;color:var(--ac-stepper-text,var(--a-surface-action));font-weight:600;line-height:1;list-style:none;margin:0;padding-left:0}.navds-stepper--horizontal{align-items:flex-start;display:flex;text-align:center}.navds-stepper__item{display:grid;gap:.5rem;grid-template-columns:var(--navds-stepper-circle-size) auto;grid-template-rows:[line-1] auto [step-start] var(--navds-stepper-circle-size) [line-2 step-end] auto;justify-items:flex-start}.navds-stepper__line{background-color:var(--ac-stepper-line,var(--a-border-default));grid-column:1;height:100%;justify-self:center;min-height:var(--navds-stepper-line-length);width:var(--navds-stepper-border-width)}.navds-stepper__step--behind.navds-stepper__step--completed+.navds-stepper__line{background-color:var(--ac-stepper-line-completed,var(--a-border-selected))}.navds-stepper__line--1{display:none;grid-row:line-1}.navds-stepper__line--2{grid-row:line-2}:where(.navds-stepper__item:last-of-type) .navds-stepper__line--2{display:none}.navds-stepper__step{cursor:pointer;display:grid;gap:var(--a-spacing-2);grid-column:1/-1;grid-row:2/-1;grid-template-columns:[circle] var(--navds-stepper-circle-size) [content] auto;justify-content:flex-start;margin:calc(var(--navds-stepper-border-width)*-1) calc(var(--navds-stepper-border-width)*-1) 1.75rem;padding:var(--navds-stepper-border-width);text-decoration:none}button.navds-stepper__step{-webkit-appearance:none;appearance:none;background-color:transparent;border:none;color:inherit;font:inherit;text-align:inherit}.navds-stepper__step--non-interactive{color:var(--ac-stepper-non-interactive,var(--a-text-subtle));cursor:default}:where(.navds-stepper__step):focus{box-shadow:var(--a-shadow-focus);isolation:isolate;outline:none}.navds-stepper__circle{border:var(--navds-stepper-border-width) solid;border-radius:var(--a-border-radius-full);display:inline-grid;flex-shrink:0;grid-column:circle;height:var(--navds-stepper-circle-size);line-height:1;place-items:center;width:var(--navds-stepper-circle-size)}.navds-stepper__circle--success{background:none;border:none;font-size:28px}.navds-stepper__content{grid-column:content;line-height:1.5;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding-top:.035rem}:where(.navds-stepper--horizontal) .navds-stepper__item{flex:1 1 100%;grid-template-columns:[line-1-start] 1fr [step-start] auto [line-1-end] var(--navds-stepper-circle-size) [line-2-start] auto [step-end] 1fr [line-2-end];grid-template-rows:var(--navds-stepper-circle-size) auto}:where(.navds-stepper--horizontal) .navds-stepper__line{align-self:center;display:block;grid-row:1;height:var(--navds-stepper-border-width);min-height:auto;width:100%}:where(.navds-stepper--horizontal) .navds-stepper__line--1{grid-column:line-1}:where(.navds-stepper--horizontal) .navds-stepper__line--2{grid-column:line-2}:where(.navds-stepper--horizontal .navds-stepper__item:first-of-type) .navds-stepper__line--1,:where(.navds-stepper--horizontal .navds-stepper__item:last-of-type) .navds-stepper__line--2{visibility:hidden}:where(.navds-stepper--horizontal) .navds-stepper__step{align-items:center;display:grid;grid-column:step;grid-row:1/-1;grid-template-columns:[content-start] auto [circle] var(--navds-stepper-circle-size) [content-end] auto;grid-template-rows:[circle] var(--navds-stepper-circle-size) [content] auto;justify-items:center;margin-bottom:0}:where(.navds-stepper--horizontal) .navds-stepper__circle{grid-column:2;grid-row:circle}:where(.navds-stepper--horizontal) .navds-stepper__content{grid-column:1/-1;grid-row:content;max-width:24ch}:where(.navds-stepper__step--active) .navds-stepper__content{color:var(--ac-stepper-active,var(--a-text-action-selected))}:where(.navds-stepper__step:hover) .navds-stepper__content{text-decoration:underline}:where(.navds-stepper__step--non-interactive:hover,.navds-stepper__step--active:hover) .navds-stepper__content{text-decoration:none}:where(.navds-stepper__step--active) .navds-stepper__circle{background-color:var(--ac-stepper-active-bg,var(--a-surface-action-selected));border-color:var(--ac-stepper-active-border,var(--a-border-action-selected));color:var(--ac-stepper-active-text,var(--a-text-on-action))}:where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle{background-color:var(--ac-stepper-hover-bg,var(--a-surface-action-subtle-hover))}:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__content{color:var(--ac-stepper-non-interactive-active,var(--a-text-default))}.navds-stepper__step--non-interactive.navds-stepper__step--behind.navds-stepper__step--completed+.navds-stepper__line{background-color:var(--ac-stepper-non-interactive-line-completed,var(--a-border-strong))}:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle{background-color:var(--ac-stepper-non-interactive-active-bg,var(--a-surface-inverted));border-color:var(--ac-stepper-non-interactive-active-border,var(--a-surface-inverted));color:var(--ac-stepper-non-interactive-active-text,var(--a-text-on-inverted))}:where(.navds-stepper__step--non-interactive:hover) .navds-stepper__circle{background-color:transparent}:where(.navds-stepper__step--non-interactive.navds-stepper__step--active:hover) .navds-stepper__circle{background-color:var(--ac-stepper-non-interactive-active-bg,var(--a-surface-inverted))}:where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle{background-color:inherit;color:var(--ac-stepper-active-completed,var(--a-text-action-selected))}:where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive) .navds-stepper__circle{color:var(--ac-stepper-non-interactive-active-completed,var(--a-text-default))}

package/dist/component/table.css

@@ -0,0 +1,227 @@
+.navds-table {
+  width: 100%;
+  border-collapse: collapse;
+  display: table;
+}
+
+.navds-table__header {
+  display: table-header-group;
+}
+
+.navds-table__body {
+  display: table-row-group;
+}
+
+.navds-table__row {
+  display: table-row;
+}
+
+.navds-table__body .navds-table__row--shade-on-hover:hover {
+  background-color: var(--ac-table-row-hover, var(--a-bg-subtle));
+}
+
+.navds-table__row--selected {
+  background-color: var(--ac-table-row-selected, var(--a-surface-action-subtle));
+}
+
+.navds-table__body .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
+  background-color: var(--ac-table-row-selected-hover, var(--a-surface-action-subtle-hover));
+}
+
+.navds-table--zebra-stripes .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
+  background-color: var(--ac-table-row-zebra, var(--a-surface-subtle));
+}
+
+.navds-table--zebra-stripes
+  .navds-table__body
+  :where(.navds-table__expandable-row:nth-child(4n + 1):not(.navds-table__row--selected)) {
+  background-color: transparent;
+}
+
+.navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n) {
+  background-color: var(--ac-table-row-zebra, var(--a-surface-subtle));
+}
+
+.navds-table__header-cell,
+.navds-table__data-cell {
+  display: table-cell;
+  padding: var(--a-spacing-4) var(--a-spacing-3);
+  border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
+  text-align: left;
+}
+
+.navds-table__header .navds-table__header-cell,
+.navds-table__header .navds-table__data-cell {
+  border-bottom-width: 2px;
+}
+
+.navds-table__header-cell--align-right,
+.navds-table__data-cell--align-right {
+  text-align: right;
+}
+
+.navds-table__header-cell--align-center,
+.navds-table__data-cell--align-center {
+  text-align: center;
+}
+
+:where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__header-cell,
+:where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__data-cell {
+  border-color: var(--ac-table-cell-hover-border, var(--a-border-strong));
+}
+
+:where(.navds-table__expandable-row--open:hover) .navds-table__data-cell {
+  border-bottom-color: transparent;
+}
+
+.navds-table--small .navds-table__header-cell,
+.navds-table--small .navds-table__data-cell {
+  padding: var(--a-spacing-2) var(--a-spacing-3);
+}
+
+.navds-table .navds-checkbox .navds-checkbox__input {
+  top: -12px;
+}
+
+.navds-table .navds-checkbox--small .navds-checkbox__input {
+  top: -6px;
+}
+
+.navds-table .navds-checkbox .navds-checkbox__label {
+  padding: 0;
+}
+
+.navds-table__header-cell[aria-sort] {
+  padding: 0;
+}
+
+.navds-table__sort-button {
+  appearance: none;
+  background: none;
+  color: var(--ac-table-sort-button-text, var(--a-text-action));
+  border: none;
+  cursor: pointer;
+  margin: 0;
+  padding: var(--a-spacing-4) var(--a-spacing-3);
+  width: 100%;
+  display: flex;
+  gap: var(--a-spacing-2);
+  align-items: center;
+  line-height: inherit;
+  font-weight: inherit;
+}
+
+.navds-table--small .navds-table__sort-button {
+  padding: var(--a-spacing-2) var(--a-spacing-3);
+}
+
+.navds-table__sort-button:hover {
+  background-color: var(--ac-table-sort-button-hover-bg, var(--a-bg-subtle));
+}
+
+.navds-table__sort-button:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--a-border-focus);
+}
+
+.navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
+.navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
+  background-color: var(--ac-table-sort-button-sorted-bg, var(--a-surface-selected));
+  color: var(--a-table-sort-button-sorted-text, var(--a-text-action-on-action-subtle));
+}
+
+.navds-table__header-cell--align-right .navds-table__sort-button {
+  justify-content: flex-end;
+}
+
+.navds-table__header-cell--align-center .navds-table__sort-button {
+  justify-content: center;
+}
+
+.navds-table__sort-button svg {
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.navds-table__expandable-row:not(.navds-table__expandable-row--open) .navds-table__data-cell {
+  transition: border-bottom-color 190ms cubic-bezier(0.6, 0.04, 0.98, 0.335);
+}
+
+.navds-table__expandable-row--open .navds-table__data-cell {
+  border-bottom-color: transparent;
+}
+
+.navds-table__expandable-row--open .navds-table__header-cell {
+  border-color: var(--ac-table-row-border, var(--a-border-default));
+}
+
+.navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
+  border-color: transparent;
+}
+
+.navds-table__toggle-expand-cell {
+  padding: 0;
+  width: 56px;
+}
+
+.navds-table--small .navds-table__toggle-expand-cell {
+  padding: 0;
+  width: 36px;
+}
+
+.navds-table__toggle-expand-button {
+  all: unset;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: var(--a-spacing-4);
+}
+
+.navds-table--small .navds-table__toggle-expand-button {
+  padding: var(--a-spacing-2);
+}
+
+.navds-table__toggle-expand-button:focus {
+  box-shadow: inset var(--a-shadow-focus);
+}
+
+.navds-table__expandable-icon {
+  font-size: 1.5rem;
+}
+
+.navds-table--small .navds-table__expandable-icon {
+  font-size: 1.25rem;
+}
+
+.navds-table__toggle-expand-button:hover .navds-table__expandable-icon,
+.navds-table__expandable-icon--filled {
+  display: none;
+}
+
+.navds-table__toggle-expand-button:hover .navds-table__expandable-icon--filled {
+  display: block;
+}
+
+.navds-table__toggle-expand-cell--open .navds-table__expandable-icon {
+  transform: rotate(180deg);
+}
+
+.navds-table__expanded-row-cell {
+  padding: 0;
+}
+
+.navds-table__expanded-row-cell:empty {
+  display: none;
+}
+
+.navds-table__expanded-row-collapse:not([style*="height: 0px;"]) {
+  border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
+}
+
+.navds-table__expanded-row-content {
+  padding: var(--a-spacing-4) 4.25rem;
+}
+
+.navds-table--small .navds-table__expanded-row-content {
+  padding: var(--a-spacing-2) var(--a-spacing-12);
+}

package/dist/component/table.min.css

@@ -0,0 +1 @@
+.navds-table{border-collapse:collapse;display:table;width:100%}.navds-table__header{display:table-header-group}.navds-table__body{display:table-row-group}.navds-table__row{display:table-row}.navds-table__body .navds-table__row--shade-on-hover:hover{background-color:var(--ac-table-row-hover,var(--a-bg-subtle))}.navds-table__row--selected{background-color:var(--ac-table-row-selected,var(--a-surface-action-subtle))}.navds-table__body .navds-table__row--shade-on-hover.navds-table__row--selected:hover{background-color:var(--ac-table-row-selected-hover,var(--a-surface-action-subtle-hover))}.navds-table--zebra-stripes .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)){background-color:var(--ac-table-row-zebra,var(--a-surface-subtle))}.navds-table--zebra-stripes .navds-table__body :where(.navds-table__expandable-row:nth-child(4n+1):not(.navds-table__row--selected)){background-color:transparent}.navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n){background-color:var(--ac-table-row-zebra,var(--a-surface-subtle))}.navds-table__data-cell,.navds-table__header-cell{border-bottom:1px solid var(--ac-table-row-border,var(--a-border-default));display:table-cell;padding:var(--a-spacing-4) var(--a-spacing-3);text-align:left}.navds-table__header .navds-table__data-cell,.navds-table__header .navds-table__header-cell{border-bottom-width:2px}.navds-table__data-cell--align-right,.navds-table__header-cell--align-right{text-align:right}.navds-table__data-cell--align-center,.navds-table__header-cell--align-center{text-align:center}:where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__data-cell,:where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__header-cell{border-color:var(--ac-table-cell-hover-border,var(--a-border-strong))}:where(.navds-table__expandable-row--open:hover) .navds-table__data-cell{border-bottom-color:transparent}.navds-table--small .navds-table__data-cell,.navds-table--small .navds-table__header-cell{padding:var(--a-spacing-2) var(--a-spacing-3)}.navds-table .navds-checkbox .navds-checkbox__input{top:-12px}.navds-table .navds-checkbox--small .navds-checkbox__input{top:-6px}.navds-table .navds-checkbox .navds-checkbox__label,.navds-table__header-cell[aria-sort]{padding:0}.navds-table__sort-button{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:none;color:var(--ac-table-sort-button-text,var(--a-text-action));cursor:pointer;display:flex;font-weight:inherit;gap:var(--a-spacing-2);line-height:inherit;margin:0;padding:var(--a-spacing-4) var(--a-spacing-3);width:100%}.navds-table--small .navds-table__sort-button{padding:var(--a-spacing-2) var(--a-spacing-3)}.navds-table__sort-button:hover{background-color:var(--ac-table-sort-button-hover-bg,var(--a-bg-subtle))}.navds-table__sort-button:focus{box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:none}.navds-table__header-cell[aria-sort=ascending] .navds-table__sort-button,.navds-table__header-cell[aria-sort=descending] .navds-table__sort-button{background-color:var(--ac-table-sort-button-sorted-bg,var(--a-surface-selected));color:var(--a-table-sort-button-sorted-text,var(--a-text-action-on-action-subtle))}.navds-table__header-cell--align-right .navds-table__sort-button{justify-content:flex-end}.navds-table__header-cell--align-center .navds-table__sort-button{justify-content:center}.navds-table__sort-button svg{flex-shrink:0;font-size:1rem}.navds-table__expandable-row:not(.navds-table__expandable-row--open) .navds-table__data-cell{transition:border-bottom-color .19s cubic-bezier(.6,.04,.98,.335)}.navds-table__expandable-row--open .navds-table__data-cell{border-bottom-color:transparent}.navds-table__expandable-row--open .navds-table__header-cell{border-color:var(--ac-table-row-border,var(--a-border-default))}.navds-table__expandable-row--open .navds-table__toggle-expand-cell--open{border-color:transparent}.navds-table__toggle-expand-cell{padding:0;width:56px}.navds-table--small .navds-table__toggle-expand-cell{padding:0;width:36px}.navds-table__toggle-expand-button{all:unset;align-items:center;cursor:pointer;display:flex;padding:var(--a-spacing-4)}.navds-table--small .navds-table__toggle-expand-button{padding:var(--a-spacing-2)}.navds-table__toggle-expand-button:focus{box-shadow:inset var(--a-shadow-focus)}.navds-table__expandable-icon{font-size:1.5rem}.navds-table--small .navds-table__expandable-icon{font-size:1.25rem}.navds-table__expandable-icon--filled,.navds-table__toggle-expand-button:hover .navds-table__expandable-icon{display:none}.navds-table__toggle-expand-button:hover .navds-table__expandable-icon--filled{display:block}.navds-table__toggle-expand-cell--open .navds-table__expandable-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.navds-table__expanded-row-cell{padding:0}.navds-table__expanded-row-cell:empty{display:none}.navds-table__expanded-row-collapse:not([style*="height: 0px;"]){border-bottom:1px solid var(--ac-table-row-border,var(--a-border-default))}.navds-table__expanded-row-content{padding:var(--a-spacing-4) 4.25rem}.navds-table--small .navds-table__expanded-row-content{padding:var(--a-spacing-2) var(--a-spacing-12)}