@semcore/data-table 4.50.0 → 4.50.1

package/lib/esm/style/data-table.shadow.css

@@ -0,0 +1,413 @@
+SDataTable {
+  position: relative;
+}
+
+SDataTable[compact] {
+  & SColumn,
+  & SCell {
+    padding: var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px);
+  }
+}
+
+SHeadWrapper {
+  position: relative;
+}
+
+SHeadWrapper[animationsDisabled] {
+  SColumn {
+    transition: none;
+  }
+}
+
+SHeadWrapper[sticky] {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+SHead {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  min-width: fit-content;
+  z-index: 0;
+}
+
+SColumn {
+  display: flex;
+  align-items: flex-start;
+  flex-grow: 1;
+  font-size: var(--intergalactic-fs-100, 12px);
+  line-height: var(--intergalactic-lh-100, 133%);
+  color: var(--intergalactic-text-primary, #191b23);
+  box-sizing: border-box;
+  position: relative;
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: inset var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
+  }
+
+  transition: width calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out, min-width calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out, max-width calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out;
+}
+
+SColumn[hidden] {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+SColumn[use='primary'] {
+  padding: var(--intergalactic-spacing-3x, 12px);
+  border-bottom: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
+  background-color: var(--intergalactic-table-th-primary-cell, #f4f5f9);
+}
+
+SColumn[use='secondary'] {
+  padding: var(--intergalactic-spacing-2x, 8px);
+  border-bottom: 1px solid var(--intergalactic-border-table-accent, #a9abb6);
+  background-color: var(--intergalactic-table-th-secondary-cell, #ffffff);
+}
+
+SColumn[group][use] {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  align-items: normal;
+  border-bottom: none;
+  padding: 0;
+}
+
+SColumn[groupHead] {
+  justify-content: center;
+  /* for resizable */
+  z-index: 1;
+  border-bottom: none;
+}
+
+SColumn[sortable] {
+  cursor: pointer;
+
+  &[use='primary']:hover, &[use='primary']:focus {
+    background-color: var(--intergalactic-table-th-primary-cell-hover, #e0e1e9);
+  }
+
+  &[justifyContent='right']:hover SSortWrapper, &[justifyContent='right']:focus SSortWrapper {
+    position: absolute;
+    flex-basis: 0;
+    right: var(--intergalactic-spacing-3x, 12px);
+  }
+  &[justifyContent='right'][active] SSortWrapper {
+    position: relative;
+    flex-basis: inherit;
+    right: 0;
+  }
+
+  &:hover SSortWrapper, &:focus SSortWrapper, &[active] SSortWrapper {
+    flex-basis: calc(var(--intergalactic-spacing-1x, 4px) + 16px);
+    opacity: 1;
+  }
+
+  &:hover SSortWrapper:before, &:focus SSortWrapper:before, &[active] SSortWrapper:before {
+    display: block;
+    opacity: 1;
+  }
+
+  &:hover SSortIcon, &:focus SSortIcon {
+    display: block;
+    opacity: 1;
+  }
+}
+
+SColumn[use='primary'][active] {
+  background-color: var(--intergalactic-table-th-primary-cell-active, #e0e1e9);
+  width: 100%;
+}
+
+SColumn[active] SSortIcon {
+  display: block;
+  opacity: 1;
+}
+
+SColumn[resizable] {
+  border-right: 1px solid transparent;
+
+  &:hover:after {
+    border-right-color: var(--intergalactic-border-table-accent, #a9abb6);
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    right: -1px;
+    height: 100%;
+    width: 5px;
+    background: transparent;
+    cursor: col-resize;
+    border-right: 1px solid transparent;
+  }
+}
+
+SColumn[fixed] {
+  position: sticky;
+  /* because up resizable */
+  z-index: 2;
+}
+
+SColumn[borderLeft],
+SCell[borderLeft] {
+  border-left: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
+}
+
+SColumn[borderRight],
+SCell[borderRight] {
+  border-right: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
+}
+
+SSortWrapper {
+  flex-shrink: 1;
+  position: relative;
+  flex-basis: 0;
+  min-height: 16px;
+  opacity: 0;
+  transition: all calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out;
+}
+
+SSortWrapper:before {
+  display: none;
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 20px;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+SSortIcon {
+  display: none;
+  fill: var(--intergalactic-icon-secondary-neutral-hover-active, #878992);
+  position: absolute;
+  top: calc(1em * 1.25 - 16px);
+  right: 0;
+  margin-left: var(--intergalactic-spacing-1x, 4px);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+SColumn[use='primary'] SSortWrapper:before {
+  background: linear-gradient(
+    270deg,
+    var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,
+    rgba(224, 225, 233, 0) 105%
+  );
+}
+
+SColumn[use='secondary'] SSortWrapper:before {
+  background: linear-gradient(
+    270deg,
+    var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,
+    rgba(255, 255, 255, 0) 105%
+  );
+}
+
+SBodyWrapper {
+  position: relative;
+}
+
+SBody {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  min-width: fit-content;
+}
+
+SRow {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+}
+
+/* DEFAULT THEME */
+SRow[active] > SCell:not([theme]) {
+  /* The color is hardcoded because need hex(in figma rgba) */
+  /* disable-tokens-validator */
+  background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
+}
+
+SRow:hover > SCell:not([theme]),
+SRow SCell:hover + SGroupCell SCell:not([theme]) {
+  /* The color is hardcoded because need hex(in figma rgba) */
+  /* disable-tokens-validator */
+  background-color: var(--intergalactic-table-td-cell-hover, #f0f0f4);
+}
+
+/* MUTED THEME */
+SRow[theme='muted'] SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-unread, #f4f5f9);
+}
+
+SRow[theme='muted'][active] > SCell:not([theme]) {
+  /* The color is hardcoded because need hex(in figma rgba) */
+  /* disable-tokens-validator */
+  background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
+}
+
+SRow:hover > SCell[theme='muted'],
+SRow[theme='muted']:hover > SCell:not([theme]),
+SRow[theme='muted'] SCell:hover + SGroupCell SCell:not([theme]) {
+  /* The color is hardcoded because need hex(in figma rgba) */
+  /* disable-tokens-validator */
+  background-color: var(--intergalactic-table-td-cell-hover, #f0f0f4);
+}
+
+/* INFO THEME */
+SRow[theme='info'] SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-selected, #e9f7ff);
+}
+
+SRow[theme='info'][active] > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-selected-active, #c4e5fe);
+}
+
+SRow:hover > SCell[theme='info'],
+SRow[theme='info']:hover > SCell:not([theme]),
+SRow[theme='info'] SCell:hover + SGroupCell SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-selected-hover, #c4e5fe);
+}
+
+/* SUCCESS THEME */
+SRow[theme='success'] SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-new, #dbfee8);
+}
+
+SRow[theme='success'][active] > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-new-active, #9ef2c9);
+}
+
+SRow:hover > SCell[theme='success'],
+SRow[theme='success']:hover > SCell:not([theme]),
+SRow[theme='success'] SCell:hover + SGroupCell SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-new-hover, #9ef2c9);
+}
+
+/* WARNING THEME */
+SRow[theme='warning'] SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-warning, #fff3d9);
+}
+
+SRow[theme='warning'][active] > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-warning-active, #ffdca2);
+}
+
+SRow:hover > SCell[theme='warning'],
+SRow[theme='warning']:hover > SCell:not([theme]),
+SRow[theme='warning'] SCell:hover + SGroupCell SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-warning-hover, #ffdca2);
+}
+
+/* DANGER THEME */
+SRow[theme='danger'] SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-critical, #fff0f7);
+}
+
+SRow[theme='danger'][active] > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-critical-active, #ffd7df);
+}
+
+SRow:hover > SCell[theme='danger'],
+SRow[theme='danger']:hover > SCell:not([theme]),
+SRow[theme='danger'] SCell:hover + SGroupCell SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-critical-hover, #ffd7df);
+}
+
+SRow[positioned] {
+  position: absolute;
+}
+
+SBody[animationsDisabled] SCell {
+  transition: none;
+}
+
+SCell {
+  display: flex;
+  flex: 1;
+  flex-basis: auto;
+  font-size: var(--intergalactic-fs-200, 14px);
+  line-height: var(--intergalactic-lh-200, 142%);
+  color: var(--intergalactic-text-primary, #191b23);
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
+  overflow: hidden;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+  transition: width calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out;
+  outline: none;
+}
+
+SCell[use='primary'] {
+  padding: var(--intergalactic-spacing-3x, 12px);
+  min-height: 45px;
+  background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
+}
+
+SCell[use='secondary'] {
+  padding: var(--intergalactic-spacing-2x, 8px);
+  min-height: 37px;
+  background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
+}
+
+SCell[fixed] {
+  position: sticky;
+  z-index: 1;
+}
+
+SCell[theme='muted'] {
+  background-color: var(--intergalactic-table-td-cell-unread, #f4f5f9);
+}
+
+SCell[theme='info'] {
+  background-color: var(--intergalactic-table-td-cell-selected, #e9f7ff);
+}
+
+SCell[theme='success'] {
+  background-color: var(--intergalactic-table-td-cell-new, #dbfee8);
+}
+
+SCell[theme='warning'] {
+  background-color: var(--intergalactic-table-td-cell-warning, #fff3d9);
+}
+
+SCell[theme='danger'] {
+  background-color: var(--intergalactic-table-td-cell-critical, #fff0f7);
+}
+
+SCell:focus-visible:not([fixed]) {
+  position: relative;
+}
+
+SCell:focus-visible::after {
+  position: absolute;
+  display: block;
+  content: '';
+  inset: 3px;
+  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
+  pointer-events: none;
+}
+
+SHeightHold {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  pointer-events: none;
+  /* should be under other layers */
+  z-index: -1;
+}

package/lib/esm/style/scroll-shadows.shadow.css

@@ -0,0 +1,7 @@
+SShadowHorizontal,
+SShadowVertical {
+  &:before,
+  &:after {
+    z-index: 1;
+  }
+}

package/lib/esm/translations/__intergalactic-dynamic-locales.mjs

@@ -1,33 +1,33 @@
-import r from "./de.json.mjs";
-import o from "./en.json.mjs";
-import m from "./es.json.mjs";
-import t from "./fr.json.mjs";
-import i from "./it.json.mjs";
-import p from "./ja.json.mjs";
-import f from "./ko.json.mjs";
-import e from "./nl.json.mjs";
-import s from "./pt.json.mjs";
-import a from "./tr.json.mjs";
-import l from "./vi.json.mjs";
-import v from "./zh.json.mjs";
-import d from "./pl.json.mjs";
-import n from "./sv.json.mjs";
-var B = {
-  de: r,
-  en: o,
-  es: m,
-  fr: t,
-  it: i,
-  ja: p,
-  ko: f,
-  nl: e,
-  pt: s,
-  tr: a,
-  vi: l,
-  zh: v,
-  pl: d,
-  sv: n
+import de from "./de.json.mjs";
+import en from "./en.json.mjs";
+import es from "./es.json.mjs";
+import fr from "./fr.json.mjs";
+import it from "./it.json.mjs";
+import ja from "./ja.json.mjs";
+import ko from "./ko.json.mjs";
+import nl from "./nl.json.mjs";
+import pt from "./pt.json.mjs";
+import tr from "./tr.json.mjs";
+import vi from "./vi.json.mjs";
+import zh from "./zh.json.mjs";
+import pl from "./pl.json.mjs";
+import sv from "./sv.json.mjs";
+var localizedMessages = {
+  de,
+  en,
+  es,
+  fr,
+  it,
+  ja,
+  ko,
+  nl,
+  pt,
+  tr,
+  vi,
+  zh,
+  pl,
+  sv
 };
 export {
-  B as localizedMessages
+  localizedMessages
 };

package/lib/esm/translations/de.json.mjs

@@ -1,7 +1,8 @@
-const o = "Sortierbar", t = {
-  sortableColumn: o
+const sortableColumn = "Sortierbar";
+const de = {
+  sortableColumn
 };
 export {
-  t as default,
-  o as sortableColumn
+  de as default,
+  sortableColumn
 };

package/lib/esm/translations/en.json.mjs

@@ -1,7 +1,8 @@
-const o = "Sortable", t = {
-  sortableColumn: o
+const sortableColumn = "Sortable";
+const en = {
+  sortableColumn
 };
 export {
-  t as default,
-  o as sortableColumn
+  en as default,
+  sortableColumn
 };

package/lib/esm/translations/es.json.mjs

@@ -1,7 +1,8 @@
-const e = "Ordenable", o = {
-  sortableColumn: e
+const sortableColumn = "Ordenable";
+const es = {
+  sortableColumn
 };
 export {
-  o as default,
-  e as sortableColumn
+  es as default,
+  sortableColumn
 };

package/lib/esm/translations/fr.json.mjs

@@ -1,7 +1,8 @@
-const o = "Triable", l = {
-  sortableColumn: o
+const sortableColumn = "Triable";
+const fr = {
+  sortableColumn
 };
 export {
-  l as default,
-  o as sortableColumn
+  fr as default,
+  sortableColumn
 };

package/lib/esm/translations/it.json.mjs

@@ -1,7 +1,8 @@
-const o = "Ordinabile", t = {
-  sortableColumn: o
+const sortableColumn = "Ordinabile";
+const it = {
+  sortableColumn
 };
 export {
-  t as default,
-  o as sortableColumn
+  it as default,
+  sortableColumn
 };

package/lib/esm/translations/ja.json.mjs

@@ -1,7 +1,8 @@
-const o = "分類可能", t = {
-  sortableColumn: o
+const sortableColumn = "分類可能";
+const ja = {
+  sortableColumn
 };
 export {
-  t as default,
-  o as sortableColumn
+  ja as default,
+  sortableColumn
 };

package/lib/esm/translations/ko.json.mjs

@@ -1,7 +1,8 @@
-const o = "정렬 가능", t = {
-  sortableColumn: o
+const sortableColumn = "정렬 가능";
+const ko = {
+  sortableColumn
 };
 export {
-  t as default,
-  o as sortableColumn
+  ko as default,
+  sortableColumn
 };

package/lib/esm/translations/nl.json.mjs

@@ -1,7 +1,8 @@
-const o = "Sorteerbaar", t = {
-  sortableColumn: o
+const sortableColumn = "Sorteerbaar";
+const nl = {
+  sortableColumn
 };
 export {
-  t as default,
-  o as sortableColumn
+  nl as default,
+  sortableColumn
 };

package/lib/esm/translations/pl.json.mjs

@@ -1,7 +1,8 @@
-const o = "Umożliwia sortowanie", l = {
-  sortableColumn: o
+const sortableColumn = "Umożliwia sortowanie";
+const pl = {
+  sortableColumn
 };
 export {
-  l as default,
-  o as sortableColumn
+  pl as default,
+  sortableColumn
 };

package/lib/esm/translations/pt.json.mjs

@@ -1,7 +1,8 @@
-const l = "Classificável", o = {
-  sortableColumn: l
+const sortableColumn = "Classificável";
+const pt = {
+  sortableColumn
 };
 export {
-  o as default,
-  l as sortableColumn
+  pt as default,
+  sortableColumn
 };

package/lib/esm/translations/sv.json.mjs

@@ -1,7 +1,8 @@
-const o = "Sorterbar", t = {
-  sortableColumn: o
+const sortableColumn = "Sorterbar";
+const sv = {
+  sortableColumn
 };
 export {
-  t as default,
-  o as sortableColumn
+  sv as default,
+  sortableColumn
 };

package/lib/esm/translations/tr.json.mjs

@@ -1,7 +1,8 @@
-const a = "Sıralanabilir", l = {
-  sortableColumn: a
+const sortableColumn = "Sıralanabilir";
+const tr = {
+  sortableColumn
 };
 export {
-  l as default,
-  a as sortableColumn
+  tr as default,
+  sortableColumn
 };

package/lib/esm/translations/vi.json.mjs

@@ -1,7 +1,8 @@
-const o = "Có thể sắp xếp", t = {
-  sortableColumn: o
+const sortableColumn = "Có thể sắp xếp";
+const vi = {
+  sortableColumn
 };
 export {
-  t as default,
-  o as sortableColumn
+  vi as default,
+  sortableColumn
 };

package/lib/esm/translations/zh.json.mjs

@@ -1,7 +1,8 @@
-const o = "可排序", t = {
-  sortableColumn: o
+const sortableColumn = "可排序";
+const zh = {
+  sortableColumn
 };
 export {
-  t as default,
-  o as sortableColumn
+  zh as default,
+  sortableColumn
 };