@fremtind/jokul 0.17.1 → 0.18.0

package/src/components/table/styles/table.css

@@ -0,0 +1,556 @@
+@charset "UTF-8";
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+.jkl-table-caption--sr-only {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
+  clip-path: inset(50%) !important; /* 2 */
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important; /* 3 */
+}
+
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-table-cell-font-size: var(--jkl-body-font-size);
+  --jkl-table-cell-line-height: var(--jkl-body-line-height);
+  --jkl-table-cell-font-weight: var(--jkl-body-font-weight);
+  --jkl-table-cell-padding: 0.6875rem 0.5rem;
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-table-cell-font-size: var(--jkl-small-font-size);
+  --jkl-table-cell-line-height: var(--jkl-small-line-height);
+  --jkl-table-cell-font-weight: var(--jkl-small-font-weight);
+  --jkl-table-cell-padding: 0.3125rem 0.5rem;
+}
+
+.jkl-table-cell {
+  font-size: var(--jkl-table-cell-font-size);
+  line-height: var(--jkl-table-cell-line-height);
+  font-weight: var(--jkl-table-cell-font-weight);
+  padding: var(--jkl-table-cell-padding);
+  position: relative;
+  text-align: left;
+  vertical-align: top;
+}
+.jkl-table-cell--vertical-align-center {
+  vertical-align: baseline;
+}
+.jkl-table-cell--align-center {
+  text-align: center;
+}
+.jkl-table-cell--align-right {
+  text-align: right;
+}
+@media (width >= 0) and (max-width: 679px) {
+  .jkl-table--collapse-to-list .jkl-table-cell--align-right {
+    text-align: unset;
+  }
+}
+.jkl-table--collapse-to-list[data-collapse] .jkl-table-cell--align-right {
+  text-align: unset;
+}
+.jkl-table--collapse-to-list .jkl-table-cell[data-th]:not(.jkl-table-cell--expand-without-text)::before {
+  display: none;
+}
+@media (width >= 0) and (max-width: 679px) {
+  .jkl-table--collapse-to-list .jkl-table-cell[data-th]:not(.jkl-table-cell--expand-without-text)::before {
+    content: attr(data-th);
+    display: block;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    font-weight: 700;
+    --jkl-icon-weight: 500;
+  }
+}
+.jkl-table--collapse-to-list[data-collapse] .jkl-table-cell:not(.jkl-table-cell--expand-without-text)::before {
+  content: attr(data-th);
+  display: block;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+  --jkl-icon-weight: 500;
+}
+@media (min-width: 680px) {
+  .jkl-table--collapse-to-list:not([data-collapse]) .jkl-table-cell--expand-without-text .jkl-expand-button__text {
+    display: none;
+  }
+}
+.jkl-table-cell .jkl-table-row-expand-button {
+  display: flex;
+  align-items: center;
+}
+
+.jkl-table-row--expandable.jkl-table-row--clickable:not(.jkl-expandable-table-row--clickable-external):hover .jkl-table-row-expand-button, html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-table-row--expandable.jkl-table-row--clickable:not(.jkl-expandable-table-row--clickable-external):focus .jkl-table-row-expand-button {
+  color: var(--expand-button-focus-color);
+}
+
+@media screen and (prefers-color-scheme: light) {
+  :root {
+    --jkl-table-head-sticky-color: var(--jkl-background-color);
+  }
+}
+[data-theme=light] {
+  --jkl-table-head-sticky-color: var(--jkl-background-color);
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --jkl-table-head-sticky-color: var(--jkl-background-color);
+  }
+}
+[data-theme=dark] {
+  --jkl-table-head-sticky-color: var(--jkl-background-color);
+}
+
+.jkl-table-head--sr-only {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
+  clip-path: inset(50%) !important; /* 2 */
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important; /* 3 */
+}
+.jkl-table-head--sticky > .jkl-table-row {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: var(--jkl-table-head-sticky-color);
+  border-bottom: none;
+  box-shadow: inset 0 0 0 #000, inset 0 -0.0625rem 0 var(--jkl-table-row-hover-border-color);
+  background-clip: padding-box;
+  vertical-align: bottom;
+  height: 2.3em;
+}
+
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-table-header-font-size: var(--jkl-body-font-size);
+  --jkl-table-header-line-height: var(--jkl-body-line-height);
+  --jkl-table-header-font-weight: var(--jkl-body-font-weight);
+  --jkl-table-header-padding: 0 0.5rem 0.4375rem 0.5rem;
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-table-header-font-size: var(--jkl-small-font-size);
+  --jkl-table-header-line-height: var(--jkl-small-line-height);
+  --jkl-table-header-font-weight: var(--jkl-small-font-weight);
+  --jkl-table-header-padding: 0 0.5rem 0.1875rem 0.5rem;
+}
+
+.jkl-table-header {
+  font-size: var(--jkl-table-header-font-size);
+  line-height: var(--jkl-table-header-line-height);
+  font-weight: var(--jkl-table-header-font-weight);
+  padding: var(--jkl-table-header-padding);
+  text-align: left;
+  white-space: nowrap;
+}
+.jkl-table-header--align-center {
+  text-align: center;
+}
+.jkl-table-header--align-right {
+  text-align: right;
+}
+.jkl-table-header--bold {
+  font-weight: 700;
+}
+.jkl-table-header--sortable {
+  cursor: pointer;
+  user-select: none;
+}
+.jkl-table-header--sr-only {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
+  clip-path: inset(50%) !important; /* 2 */
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important; /* 3 */
+}
+.jkl-table-header__arrows {
+  transition-timing-function: ease-out;
+  transition-duration: 75ms;
+  transition-property: opacity;
+  display: inline-block;
+  margin-bottom: 0.125rem;
+  margin-left: 0.25rem;
+  vertical-align: middle;
+  opacity: 0;
+  width: 1.2em;
+}
+.jkl-table-header__arrows--active {
+  opacity: 1;
+}
+@media (width >= 0) and (max-width: 679px) {
+  .jkl-table--collapse-to-list .jkl-table-header {
+    display: none;
+  }
+}
+.jkl-table--collapse-to-list[data-collapse] .jkl-table-header {
+  display: none;
+}
+
+.jkl-table-pagination {
+  display: flex;
+  gap: 1rem;
+  flex-direction: column;
+  width: 100%;
+}
+@media (min-width: 680px) {
+  .jkl-table-pagination {
+    flex-direction: row;
+    gap: 0.75rem;
+    justify-content: space-between;
+  }
+}
+.jkl-table-pagination__left {
+  flex-shrink: 1;
+}
+.jkl-table-pagination__right {
+  flex-grow: 1;
+  display: flex;
+  flex-wrap: nowrap;
+}
+.jkl-table-pagination__picker {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  white-space: nowrap;
+}
+.jkl-table-pagination__picker--page {
+  padding-inline-end: 1.5rem;
+  width: min(12rem, 100%);
+}
+@media (min-width: 680px) {
+  .jkl-table-pagination__picker--page {
+    justify-content: flex-end;
+  }
+}
+.jkl-table-pagination__picker--page .jkl-table-pagination__picker-input {
+  width: min(4rem, 100%);
+}
+.jkl-table-pagination__picker-label {
+  margin-inline-end: 0.5rem;
+}
+.jkl-table-pagination__nav {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+@media (min-width: 680px) {
+  .jkl-table-pagination__nav {
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+  }
+}
+.jkl-table-pagination__nav ul {
+  list-style: none;
+  display: flex;
+  flex-wrap: nowrap;
+  margin: 0;
+  padding: 0;
+}
+.jkl-table-pagination__nav li {
+  margin: 0;
+  padding: 0;
+}
+.jkl-table-pagination__previous, .jkl-table-pagination__next, .jkl-table-pagination__page {
+  background: transparent;
+  color: var(--jkl-link-color);
+  border-radius: 0.1875rem;
+  cursor: pointer;
+  user-select: none;
+  padding: 0;
+  height: 2rem;
+  min-width: 2rem;
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-table-pagination__previous:active, .jkl-table-pagination__previous:hover, .jkl-table-pagination__previous:focus, .jkl-table-pagination__next:active, .jkl-table-pagination__next:hover, .jkl-table-pagination__next:focus, .jkl-table-pagination__page:active, .jkl-table-pagination__page:hover, .jkl-table-pagination__page:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-table-pagination__previous, .jkl-table-pagination__next, .jkl-table-pagination__page {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-table-pagination__previous:active, .jkl-table-pagination__previous:hover, .jkl-table-pagination__previous:focus, .jkl-table-pagination__next:active, .jkl-table-pagination__next:hover, .jkl-table-pagination__next:focus, .jkl-table-pagination__page:active, .jkl-table-pagination__page:hover, .jkl-table-pagination__page:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+.jkl-table-pagination__previous:hover:not(:focus), .jkl-table-pagination__next:hover:not(:focus), .jkl-table-pagination__page:hover:not(:focus) {
+  color: var(--jkl-link-hover-color);
+}
+html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not([data-mousenavigation]) .jkl-table-pagination__next:focus, html:not([data-mousenavigation]) .jkl-table-pagination__page:focus {
+  outline: 0.125rem solid var(--jkl-link-active-color);
+}
+.jkl-table-pagination__previous, .jkl-table-pagination__next {
+  padding-top: 0.125rem;
+}
+.jkl-table-pagination__ellipsis {
+  text-align: center;
+  vertical-align: bottom;
+  display: inline-block;
+  height: 2rem;
+  width: 2rem;
+}
+.jkl-table-pagination__page--active {
+  --jkl-icon-weight: 500;
+  font-weight: 700;
+  letter-spacing: -0.014em;
+}
+
+@media screen and (prefers-color-scheme: light) {
+  :root {
+    --jkl-table-row-border-color: #c8c5c3;
+    --jkl-table-row-border-none-color: rgba(200, 197, 195, 0);
+    --jkl-table-row-hover-border-color: #1b1917;
+    --jkl-table-row-highlight-color: #ece9e5;
+  }
+}
+[data-theme=light] {
+  --jkl-table-row-border-color: #c8c5c3;
+  --jkl-table-row-border-none-color: rgba(200, 197, 195, 0);
+  --jkl-table-row-hover-border-color: #1b1917;
+  --jkl-table-row-highlight-color: #ece9e5;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --jkl-table-row-border-color: #636060;
+    --jkl-table-row-border-none-color: rgba(99, 96, 96, 0);
+    --jkl-table-row-hover-border-color: #f9f9f9;
+    --jkl-table-row-highlight-color: #444141;
+  }
+}
+[data-theme=dark] {
+  --jkl-table-row-border-color: #636060;
+  --jkl-table-row-border-none-color: rgba(99, 96, 96, 0);
+  --jkl-table-row-hover-border-color: #f9f9f9;
+  --jkl-table-row-highlight-color: #444141;
+}
+
+.jkl-table-row {
+  border-bottom: solid 0.0625rem var(--jkl-table-row-border-color);
+  /* stylelint-disable-next-line selector-not-notation */
+}
+.jkl-table-head > .jkl-table-row {
+  border-bottom: solid 0.0625rem var(--jkl-table-row-hover-border-color);
+}
+:not(.jkl-table-head, .jkl-table-foot) > .jkl-table-row {
+  border-top: solid 0.0625rem transparent;
+}
+:not(.jkl-table-head, .jkl-table-foot) > .jkl-table-row:hover {
+  /*
+  * Det er viktig at hover her har double border style i motsetning til default,
+  * ellers vinner ikke border-top "spesifisitetskampen" i border-collapse.
+  * Under testing i Chrome, Firefox og Safari på macOS ble border fremdeles
+  * rendret som solid. ¯\_(ツ)_/¯
+  *
+  * https://stackoverflow.com/a/36239151
+  * https://stackoverflow.com/a/4096554
+  * https://www.w3.org/TR/CSS2/tables.html#border-conflict-resolution
+  */
+  border-top: double 0.0625rem var(--jkl-table-row-hover-border-color);
+  border-bottom: double 0.0625rem var(--jkl-table-row-hover-border-color);
+}
+@media (width >= 0) and (max-width: 679px) {
+  .jkl-table--collapse-to-list > .jkl-table-head > .jkl-table-row {
+    border-bottom: solid 0.0625rem var(--jkl-table-row-border-color);
+  }
+}
+.jkl-table--collapse-to-list[data-collapse] > .jkl-table-head > .jkl-table-row {
+  border-bottom: solid 0.0625rem var(--jkl-table-row-border-color);
+}
+@media (width >= 0) and (max-width: 679px) {
+  .jkl-table--collapse-to-list :not(.jkl-table-head) > .jkl-table-row {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+  .jkl-table--collapse-to-list :not(.jkl-table-head) > .jkl-table-row:first-of-type {
+    border-top: solid 0.0625rem var(--jkl-table-row-border-color);
+  }
+}
+.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row:first-of-type {
+  border-top: solid 0.0625rem var(--jkl-table-row-border-color);
+}
+.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable {
+  transition-property: border, padding;
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  /* stylelint-disable-next-line selector-max-specificity -- selector needs to nest itself to select sub tables with the same properties */
+}
+.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable.jkl-table-row--expanded {
+  border-bottom-color: var(--jkl-table-row-border-none-color);
+}
+.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable .jkl-table-row-expand-button {
+  margin-left: auto;
+}
+.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable:hover + tr {
+  background-color: var(--jkl-table-row-highlight-color);
+}
+.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable:hover + tr .jkl-table-row {
+  border-bottom-color: var(--jkl-table-row-hover-border-color);
+}
+.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable + tr .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable {
+  transition-property: border;
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+}
+.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row.jkl-table-row--expandable + [aria-hidden=false] .jkl-table-row {
+  border-top-color: var(--jkl-table-row-border-none-color);
+}
+@media (width >= 0) and (max-width: 679px) {
+  .jkl-table--collapse-to-list :not(.jkl-table-head) > .jkl-table-row:hover {
+    /* Tilbakestill hacken som gir riktig border når tabellen ikke har display: block; */
+    border-top: solid 0.0625rem var(--jkl-table-row-hover-border-color);
+    border-bottom: solid 0.0625rem var(--jkl-table-row-hover-border-color);
+  }
+}
+.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row:hover {
+  /* Tilbakestill hacken som gir riktig border når tabellen ikke har display: block; */
+  border-top: solid 0.0625rem var(--jkl-table-row-hover-border-color);
+  border-bottom: solid 0.0625rem var(--jkl-table-row-hover-border-color);
+}
+.jkl-table-row--clickable {
+  outline: 0;
+}
+.jkl-table-row--clickable:hover, html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-table-row--clickable:focus {
+  cursor: pointer;
+  background-color: var(--jkl-table-row-highlight-color);
+  border-top: double 0.0625rem var(--jkl-table-row-hover-border-color);
+  border-bottom: double 0.0625rem var(--jkl-table-row-hover-border-color);
+}
+@media (width >= 0) and (max-width: 679px) {
+  .jkl-table--collapse-to-list :not(.jkl-table-head) > .jkl-table-row--clickable:hover {
+    /* Tilbakestill hacken som gir riktig border når tabellen ikke har display: block; */
+    border-top: solid 0.0625rem var(--jkl-table-row-hover-border-color);
+    border-bottom: solid 0.0625rem var(--jkl-table-row-hover-border-color);
+  }
+}
+.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > .jkl-table-row--clickable:hover {
+  /* Tilbakestill hacken som gir riktig border når tabellen ikke har display: block; */
+  border-top: solid 0.0625rem var(--jkl-table-row-hover-border-color);
+  border-bottom: solid 0.0625rem var(--jkl-table-row-hover-border-color);
+}
+@media screen and (forced-colors: active) {
+  .jkl-table-row--clickable {
+    outline: revert;
+    color: ButtonText;
+  }
+  .jkl-table-row--clickable:hover {
+    background-color: ButtonFace;
+  }
+}
+.jkl-table-row--clicked {
+  background-color: var(--jkl-table-row-highlight-color);
+}
+.jkl-table-row--clicked.jkl-table-row--expandable + [aria-hidden=false] {
+  background-color: var(--jkl-table-row-highlight-color);
+}
+@media screen and (forced-colors: active) {
+  .jkl-table-row--clicked {
+    background-color: ButtonFace;
+  }
+}
+
+.jkl-expandable-table-row__expanded-row {
+  display: none;
+  transition-timing-function: ease-in;
+  transition-duration: 250ms;
+  transition-property: height;
+}
+.jkl-expandable-table-row__expanded-row--expanded {
+  transition-timing-function: ease-out;
+  transition-duration: 400ms;
+  display: block;
+}
+
+.jkl-table {
+  border-collapse: collapse;
+  position: relative;
+}
+.jkl-table--full-width {
+  width: 100%;
+}
+.jkl-table--collapse-to-list[data-collapse] {
+  display: block;
+}
+.jkl-table--collapse-to-list[data-collapse] > caption {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
+  clip-path: inset(50%) !important; /* 2 */
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important; /* 3 */
+}
+.jkl-table--collapse-to-list[data-collapse] > thead, .jkl-table--collapse-to-list[data-collapse] > thead > tr, .jkl-table--collapse-to-list[data-collapse] > thead > tr > th {
+  display: none;
+}
+.jkl-table--collapse-to-list[data-collapse] > tbody, .jkl-table--collapse-to-list[data-collapse] > tbody > tr, .jkl-table--collapse-to-list[data-collapse] > tbody > tr > td {
+  display: block;
+}
+.jkl-table--collapse-to-list[data-collapse] > tfoot, .jkl-table--collapse-to-list[data-collapse] > tfoot > tr, .jkl-table--collapse-to-list[data-collapse] > tfoot > tr > td {
+  display: block;
+}
+@media (width >= 0) and (max-width: 679px) {
+  .jkl-table--collapse-to-list {
+    display: block;
+  }
+  .jkl-table--collapse-to-list > caption {
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
+    clip-path: inset(50%) !important; /* 2 */
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+    white-space: nowrap !important; /* 3 */
+  }
+  .jkl-table--collapse-to-list > thead, .jkl-table--collapse-to-list > thead > tr, .jkl-table--collapse-to-list > thead > tr > th {
+    display: none;
+  }
+  .jkl-table--collapse-to-list > tbody, .jkl-table--collapse-to-list > tbody > tr, .jkl-table--collapse-to-list > tbody > tr > td {
+    display: block;
+  }
+  .jkl-table--collapse-to-list > tfoot, .jkl-table--collapse-to-list > tfoot > tr, .jkl-table--collapse-to-list > tfoot > tr > td {
+    display: block;
+  }
+}

package/src/components/table/styles/table.min.css

@@ -0,0 +1 @@
+.jkl-table-caption--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-table-cell-font-size:var(--jkl-body-font-size);--jkl-table-cell-line-height:var(--jkl-body-line-height);--jkl-table-cell-font-weight:var(--jkl-body-font-weight);--jkl-table-cell-padding:0.6875rem 0.5rem}[data-density=compact],[data-layout-density=compact]{--jkl-table-cell-font-size:var(--jkl-small-font-size);--jkl-table-cell-line-height:var(--jkl-small-line-height);--jkl-table-cell-font-weight:var(--jkl-small-font-weight);--jkl-table-cell-padding:0.3125rem 0.5rem}.jkl-table-cell{font-size:var(--jkl-table-cell-font-size);font-weight:var(--jkl-table-cell-font-weight);line-height:var(--jkl-table-cell-line-height);padding:var(--jkl-table-cell-padding);position:relative;text-align:left;vertical-align:top}.jkl-table-cell--vertical-align-center{vertical-align:initial}.jkl-table-cell--align-center{text-align:center}.jkl-table-cell--align-right{text-align:right}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list .jkl-table-cell--align-right{text-align:unset}}.jkl-table--collapse-to-list[data-collapse] .jkl-table-cell--align-right{text-align:unset}.jkl-table--collapse-to-list .jkl-table-cell[data-th]:not(.jkl-table-cell--expand-without-text):before{display:none}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list .jkl-table-cell[data-th]:not(.jkl-table-cell--expand-without-text):before{content:attr(data-th);display:block;font-size:1rem;font-weight:700;line-height:1.5rem;--jkl-icon-weight:500}}.jkl-table--collapse-to-list[data-collapse] .jkl-table-cell:not(.jkl-table-cell--expand-without-text):before{content:attr(data-th);display:block;font-size:1rem;font-weight:700;line-height:1.5rem;--jkl-icon-weight:500}@media (min-width:680px){.jkl-table--collapse-to-list:not([data-collapse]) .jkl-table-cell--expand-without-text .jkl-expand-button__text{display:none}}.jkl-table-cell .jkl-table-row-expand-button{align-items:center;display:flex}.jkl-table-row--expandable.jkl-table-row--clickable:not(.jkl-expandable-table-row--clickable-external):hover .jkl-table-row-expand-button,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-table-row--expandable.jkl-table-row--clickable:not(.jkl-expandable-table-row--clickable-external):focus .jkl-table-row-expand-button{color:var(--expand-button-focus-color)}@media screen and (prefers-color-scheme:light){:root{--jkl-table-head-sticky-color:var(--jkl-background-color)}}[data-theme=light]{--jkl-table-head-sticky-color:var(--jkl-background-color)}@media screen and (prefers-color-scheme:dark){:root{--jkl-table-head-sticky-color:var(--jkl-background-color)}}[data-theme=dark]{--jkl-table-head-sticky-color:var(--jkl-background-color)}.jkl-table-head--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table-head--sticky>.jkl-table-row{background-clip:padding-box;background-color:var(--jkl-table-head-sticky-color);border-bottom:none;box-shadow:inset 0 0 0 #000,inset 0 -.0625rem 0 var(--jkl-table-row-hover-border-color);height:2.3em;position:-webkit-sticky;position:sticky;top:0;vertical-align:bottom;z-index:1}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-table-header-font-size:var(--jkl-body-font-size);--jkl-table-header-line-height:var(--jkl-body-line-height);--jkl-table-header-font-weight:var(--jkl-body-font-weight);--jkl-table-header-padding:0 0.5rem 0.4375rem 0.5rem}[data-density=compact],[data-layout-density=compact]{--jkl-table-header-font-size:var(--jkl-small-font-size);--jkl-table-header-line-height:var(--jkl-small-line-height);--jkl-table-header-font-weight:var(--jkl-small-font-weight);--jkl-table-header-padding:0 0.5rem 0.1875rem 0.5rem}.jkl-table-header{font-size:var(--jkl-table-header-font-size);font-weight:var(--jkl-table-header-font-weight);line-height:var(--jkl-table-header-line-height);padding:var(--jkl-table-header-padding);text-align:left;white-space:nowrap}.jkl-table-header--align-center{text-align:center}.jkl-table-header--align-right{text-align:right}.jkl-table-header--bold{font-weight:700}.jkl-table-header--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.jkl-table-header--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table-header__arrows{display:inline-block;margin-bottom:.125rem;margin-left:.25rem;opacity:0;transition-duration:75ms;transition-property:opacity;transition-timing-function:ease-out;vertical-align:middle;width:1.2em}.jkl-table-header__arrows--active{opacity:1}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list .jkl-table-header{display:none}}.jkl-table--collapse-to-list[data-collapse] .jkl-table-header{display:none}.jkl-table-pagination{display:flex;flex-direction:column;gap:1rem;width:100%}@media (min-width:680px){.jkl-table-pagination{flex-direction:row;gap:.75rem;justify-content:space-between}}.jkl-table-pagination__left{flex-shrink:1}.jkl-table-pagination__right{display:flex;flex-grow:1;flex-wrap:nowrap}.jkl-table-pagination__picker{align-items:center;display:flex;flex-direction:row;white-space:nowrap}.jkl-table-pagination__picker--page{padding-inline-end:1.5rem;width:min(12rem,100%)}@media (min-width:680px){.jkl-table-pagination__picker--page{justify-content:flex-end}}.jkl-table-pagination__picker--page .jkl-table-pagination__picker-input{width:min(4rem,100%)}.jkl-table-pagination__picker-label{margin-inline-end:.5rem}.jkl-table-pagination__nav{display:flex;flex-direction:column;flex-grow:1;flex-wrap:wrap;gap:1rem;justify-content:center}@media (min-width:680px){.jkl-table-pagination__nav{align-items:center;flex-direction:row;justify-content:flex-end}}.jkl-table-pagination__nav ul{display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:0}.jkl-table-pagination__nav li{margin:0;padding:0}.jkl-table-pagination__next,.jkl-table-pagination__page,.jkl-table-pagination__previous{background:#0000;border-radius:.1875rem;border-style:none;color:var(--jkl-link-color);cursor:pointer;height:2rem;min-width:2rem;outline:0;outline-style:none;padding:0;-webkit-user-select:none;user-select:none}.jkl-table-pagination__next:active,.jkl-table-pagination__next:focus,.jkl-table-pagination__next:hover,.jkl-table-pagination__page:active,.jkl-table-pagination__page:focus,.jkl-table-pagination__page:hover,.jkl-table-pagination__previous:active,.jkl-table-pagination__previous:focus,.jkl-table-pagination__previous:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-table-pagination__next,.jkl-table-pagination__page,.jkl-table-pagination__previous{border-style:revert;outline:revert;outline-style:revert}.jkl-table-pagination__next:active,.jkl-table-pagination__next:focus,.jkl-table-pagination__next:hover,.jkl-table-pagination__page:active,.jkl-table-pagination__page:focus,.jkl-table-pagination__page:hover,.jkl-table-pagination__previous:active,.jkl-table-pagination__previous:focus,.jkl-table-pagination__previous:hover{outline:revert;outline-style:revert}}.jkl-table-pagination__next:hover:not(:focus),.jkl-table-pagination__page:hover:not(:focus),.jkl-table-pagination__previous:hover:not(:focus){color:var(--jkl-link-hover-color)}html:not([data-mousenavigation]) .jkl-table-pagination__next:focus,html:not([data-mousenavigation]) .jkl-table-pagination__page:focus,html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus{outline:.125rem solid var(--jkl-link-active-color)}.jkl-table-pagination__next,.jkl-table-pagination__previous{padding-top:.125rem}.jkl-table-pagination__ellipsis{display:inline-block;height:2rem;text-align:center;vertical-align:bottom;width:2rem}.jkl-table-pagination__page--active{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}@media screen and (prefers-color-scheme:light){:root{--jkl-table-row-border-color:#c8c5c3;--jkl-table-row-border-none-color:#c8c5c300;--jkl-table-row-hover-border-color:#1b1917;--jkl-table-row-highlight-color:#ece9e5}}[data-theme=light]{--jkl-table-row-border-color:#c8c5c3;--jkl-table-row-border-none-color:#c8c5c300;--jkl-table-row-hover-border-color:#1b1917;--jkl-table-row-highlight-color:#ece9e5}@media screen and (prefers-color-scheme:dark){:root{--jkl-table-row-border-color:#636060;--jkl-table-row-border-none-color:#63606000;--jkl-table-row-hover-border-color:#f9f9f9;--jkl-table-row-highlight-color:#444141}}[data-theme=dark]{--jkl-table-row-border-color:#636060;--jkl-table-row-border-none-color:#63606000;--jkl-table-row-hover-border-color:#f9f9f9;--jkl-table-row-highlight-color:#444141}.jkl-table-row{border-bottom:.0625rem solid var(--jkl-table-row-border-color)}.jkl-table-head>.jkl-table-row{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color)}:not(.jkl-table-head,.jkl-table-foot)>.jkl-table-row{border-top:.0625rem solid #0000}:not(.jkl-table-head,.jkl-table-foot)>.jkl-table-row:hover{border-bottom:.0625rem double var(--jkl-table-row-hover-border-color);border-top:.0625rem double var(--jkl-table-row-hover-border-color)}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list>.jkl-table-head>.jkl-table-row{border-bottom:.0625rem solid var(--jkl-table-row-border-color)}}.jkl-table--collapse-to-list[data-collapse]>.jkl-table-head>.jkl-table-row{border-bottom:.0625rem solid var(--jkl-table-row-border-color)}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row{padding-bottom:.75rem;padding-top:.75rem}.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row:first-of-type{border-top:.0625rem solid var(--jkl-table-row-border-color)}}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row{padding-bottom:.75rem;padding-top:.75rem}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row:first-of-type{border-top:.0625rem solid var(--jkl-table-row-border-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable{transition-duration:.15s;transition-property:border,padding;transition-timing-function:ease}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable.jkl-table-row--expanded{border-bottom-color:var(--jkl-table-row-border-none-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable .jkl-table-row-expand-button{margin-left:auto}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable:hover+tr{background-color:var(--jkl-table-row-highlight-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable:hover+tr .jkl-table-row{border-bottom-color:var(--jkl-table-row-hover-border-color)}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable+tr .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable{transition-duration:.15s;transition-property:border;transition-timing-function:ease}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row.jkl-table-row--expandable+[aria-hidden=false] .jkl-table-row{border-top-color:var(--jkl-table-row-border-none-color)}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}.jkl-table-row--clickable{outline:0}.jkl-table-row--clickable:hover,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-table-row--clickable:focus{background-color:var(--jkl-table-row-highlight-color);border-bottom:.0625rem double var(--jkl-table-row-hover-border-color);border-top:.0625rem double var(--jkl-table-row-hover-border-color);cursor:pointer}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list :not(.jkl-table-head)>.jkl-table-row--clickable:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}}.jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head)>.jkl-table-row--clickable:hover{border-bottom:.0625rem solid var(--jkl-table-row-hover-border-color);border-top:.0625rem solid var(--jkl-table-row-hover-border-color)}@media screen and (forced-colors:active){.jkl-table-row--clickable{color:ButtonText;outline:revert}.jkl-table-row--clickable:hover{background-color:ButtonFace}}.jkl-table-row--clicked,.jkl-table-row--clicked.jkl-table-row--expandable+[aria-hidden=false]{background-color:var(--jkl-table-row-highlight-color)}@media screen and (forced-colors:active){.jkl-table-row--clicked{background-color:ButtonFace}}.jkl-expandable-table-row__expanded-row{display:none;transition-duration:.25s;transition-property:height;transition-timing-function:ease-in}.jkl-expandable-table-row__expanded-row--expanded{display:block;transition-duration:.4s;transition-timing-function:ease-out}.jkl-table{border-collapse:collapse;position:relative}.jkl-table--full-width{width:100%}.jkl-table--collapse-to-list[data-collapse]{display:block}.jkl-table--collapse-to-list[data-collapse]>caption{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table--collapse-to-list[data-collapse]>thead,.jkl-table--collapse-to-list[data-collapse]>thead>tr,.jkl-table--collapse-to-list[data-collapse]>thead>tr>th{display:none}.jkl-table--collapse-to-list[data-collapse]>tbody,.jkl-table--collapse-to-list[data-collapse]>tbody>tr,.jkl-table--collapse-to-list[data-collapse]>tbody>tr>td,.jkl-table--collapse-to-list[data-collapse]>tfoot,.jkl-table--collapse-to-list[data-collapse]>tfoot>tr,.jkl-table--collapse-to-list[data-collapse]>tfoot>tr>td{display:block}@media (width >= 0) and (max-width:679px){.jkl-table--collapse-to-list{display:block}.jkl-table--collapse-to-list>caption{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-table--collapse-to-list>thead,.jkl-table--collapse-to-list>thead>tr,.jkl-table--collapse-to-list>thead>tr>th{display:none}.jkl-table--collapse-to-list>tbody,.jkl-table--collapse-to-list>tbody>tr,.jkl-table--collapse-to-list>tbody>tr>td,.jkl-table--collapse-to-list>tfoot,.jkl-table--collapse-to-list>tfoot>tr,.jkl-table--collapse-to-list>tfoot>tr>td{display:block}}

package/src/components/table/styles/table.scss

@@ -0,0 +1,54 @@
+@charset "UTF-8";
+@use "../../../core/jkl";
+
+@use "table-caption";
+@use "table-cell";
+@use "table-head";
+@use "table-header";
+@use "table-pagination";
+@use "table-row";
+
+@mixin _responsive-table {
+    display: block;
+
+    & > caption {
+        @include jkl.screenreader-only;
+    }
+
+    & > thead,
+    & > thead > tr,
+    & > thead > tr > th {
+        display: none;
+    }
+
+    & > tbody,
+    & > tbody > tr,
+    & > tbody > tr > td {
+        display: block;
+    }
+
+    & > tfoot,
+    & > tfoot > tr,
+    & > tfoot > tr > td {
+        display: block;
+    }
+}
+
+.jkl-table {
+    border-collapse: collapse;
+    position: relative;
+
+    &--full-width {
+        width: 100%;
+    }
+
+    &--collapse-to-list {
+        &[data-collapse] {
+            @include _responsive-table;
+        }
+
+        @include jkl.small-device {
+            @include _responsive-table;
+        }
+    }
+}

package/src/components/tag/styles/_index.scss

@@ -1 +1,4 @@
 @forward "tag";
+
+@use "../../icon/styles" as icon;
+@use "../../icon-button/styles" as icon-button;

package/src/components/text-input/styles/_index.scss

@@ -1 +1,5 @@
 @forward "text-input";
+
+@use "../../icon/styles" as icon;
+@use "../../icon-button/styles" as icon-button;
+@use "../../input-group/styles" as input-group;

package/src/components/toast/styles/_index.scss

@@ -1 +1,4 @@
 @forward "toast";
+
+@use "../../icon/styles" as icon;
+@use "../../icon-button/styles" as icon-button;

package/src/components/toast/styles/toast.css

@@ -193,14 +193,14 @@
 
 .jkl-toast[data-animation=entering],
 .jkl-toast[data-animation=queued] {
-  animation: jkl-entering-usdhj3n 200ms ease-out forwards;
+  animation: jkl-entering-ulkptx5 200ms ease-out forwards;
 }
 
 .jkl-toast[data-animation=exiting] {
-  animation: jkl-exiting-usdhj3q 150ms ease-in forwards;
+  animation: jkl-exiting-ulkpty0 150ms ease-in forwards;
 }
 
-@keyframes jkl-entering-usdhj3n {
+@keyframes jkl-entering-ulkptx5 {
   from {
     opacity: 0;
     transform: translate3d(0, 50%, 0);
@@ -210,7 +210,7 @@
     transform: translate3d(0, 0, 0);
   }
 }
-@keyframes jkl-exiting-usdhj3q {
+@keyframes jkl-exiting-ulkpty0 {
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);