@ui-organized/angular-table 0.0.0-stage → 6.0.0

package/styles.css

@@ -0,0 +1,895 @@
+/* src/styles/table.css */
+.data-table {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-space-03);
+  width: 100%;
+  min-width: 0;
+  font-family: var(--type-font-body);
+  color: var(--color-content-primary);
+  --data-table-max-height: none;
+  --data-table-cell-bg: var(--color-surface-primary);
+}
+.data-table--sm {
+  --data-table-control-height: var(--control-height-sm);
+  --data-table-move-size: var(--spacing-space-06);
+  --data-table-row-height: calc(var(--control-height-sm) + 2 * var(--spacing-space-01));
+  --data-table-header-height: calc(var(--control-height-sm) + 2 * var(--spacing-space-01));
+  --data-table-cell-padding-y: var(--spacing-space-01);
+  --data-table-cell-padding-x: var(--spacing-space-02);
+  --data-table-text-size: var(--type-size-body-small);
+  --data-table-line-height: var(--type-leading-body-small);
+}
+.data-table--md {
+  --data-table-control-height: var(--control-height-md);
+  --data-table-move-size: var(--spacing-space-07);
+  --data-table-row-height: calc(var(--control-height-md) + 2 * var(--spacing-space-02));
+  --data-table-header-height: calc(var(--control-height-md) + 2 * var(--spacing-space-015));
+  --data-table-cell-padding-y: var(--spacing-space-02);
+  --data-table-cell-padding-x: var(--spacing-space-03);
+  --data-table-text-size: var(--type-size-body-medium);
+  --data-table-line-height: var(--type-leading-body-medium);
+}
+.data-table--lg {
+  --data-table-control-height: var(--control-height-lg);
+  --data-table-move-size: var(--spacing-space-08);
+  --data-table-row-height: calc(var(--control-height-lg) + 2 * var(--spacing-space-02));
+  --data-table-header-height: calc(var(--control-height-lg) + 2 * var(--spacing-space-015));
+  --data-table-cell-padding-y: var(--spacing-space-02);
+  --data-table-cell-padding-x: var(--spacing-space-04);
+  --data-table-text-size: var(--type-size-body-large);
+  --data-table-line-height: var(--type-leading-body-large);
+}
+.data-table__viewport {
+  position: relative;
+  overflow: auto;
+  overscroll-behavior: contain;
+  max-height: var(--data-table-max-height, none);
+  background-color: var(--color-surface-primary);
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-content-tertiary) transparent;
+}
+.data-table--default .data-table__viewport,
+.data-table--bordered .data-table__viewport {
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--border-radius-05);
+}
+.data-table__viewport:focus-visible {
+  outline: 2px solid var(--color-interactive-focus);
+  outline-offset: -2px;
+}
+.data-table__viewport:has(.data-table__head-cell):not(:has(.data-table__caption:not(.data-table__caption--hidden))) {
+  background:
+    linear-gradient(var(--color-border-primary), var(--color-border-primary)) 0 var(--data-table-header-height) / 100% 1px no-repeat border-box,
+    linear-gradient(var(--color-surface-secondary), var(--color-surface-secondary)) 0 0 / 100% var(--data-table-header-height) no-repeat border-box,
+    var(--color-surface-primary);
+}
+.data-table__viewport::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.data-table__viewport::-webkit-scrollbar-thumb {
+  background-color: var(--color-content-tertiary);
+  border-radius: var(--border-radius-full);
+  background-clip: padding-box;
+  border: 2px solid transparent;
+}
+.data-table__viewport::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+.data-table__table {
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: var(--data-table-text-size);
+  line-height: var(--data-table-line-height);
+}
+.data-table__caption {
+  caption-side: top;
+  padding: 0 0 var(--spacing-space-02);
+  text-align: left;
+  font-size: var(--type-size-body-medium);
+  font-weight: var(--type-weight-body-strong);
+  color: var(--color-content-primary);
+}
+.data-table__sr-only,
+.data-table__caption--hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+.data-table__row:hover {
+  --data-table-cell-bg: var(--color-interactive-ui-hover);
+}
+.data-table__row--selected {
+  --data-table-cell-bg: var(--color-interactive-ui-selected);
+}
+.data-table__row--selected:hover {
+  --data-table-cell-bg: var(--color-interactive-ui-active);
+}
+.data-table__row--clickable {
+  cursor: pointer;
+}
+.data-table__row--editing {
+  --data-table-cell-bg: var(--color-surface-secondary);
+}
+.data-table__cell {
+  box-sizing: border-box;
+  height: var(--data-table-row-height);
+  padding: var(--data-table-cell-padding-y) var(--data-table-cell-padding-x);
+  background-color: var(--data-table-cell-bg);
+  border-bottom: 1px solid var(--color-border-secondary);
+  color: var(--color-content-primary);
+  font-weight: var(--type-weight-body-default);
+  text-align: left;
+  vertical-align: middle;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.data-table__cell--start {
+  text-align: left;
+}
+.data-table__cell--center {
+  text-align: center;
+}
+.data-table__cell--end {
+  text-align: right;
+}
+.data-table__cell--primary {
+  font-weight: var(--type-weight-body-strong);
+  color: var(--color-content-primary);
+}
+.data-table__cell:focus-visible {
+  outline: 2px solid var(--color-interactive-focus);
+  outline-offset: -2px;
+}
+.data-table__cell--invalid {
+  box-shadow: inset 0 0 0 1px var(--color-status-error);
+}
+.data-table__cell--sticky {
+  position: sticky;
+  z-index: 1;
+}
+.data-table__cell--sticky:not(.data-table__head-cell) {
+  background-color: var(--color-surface-primary);
+  background-image: linear-gradient(var(--data-table-cell-bg), var(--data-table-cell-bg));
+}
+.data-table__head-cell.data-table__cell--sticky {
+  z-index: 3;
+}
+.data-table__cell--sticky-left-edge {
+  box-shadow:
+    1px 0 0 rgba(0, 0, 0, 0.08),
+    2px 0 0 rgba(0, 0, 0, 0.06),
+    4px 0 0 rgba(0, 0, 0, 0.04),
+    6px 0 0 rgba(0, 0, 0, 0.03);
+  border-right: 1px solid var(--color-border-primary);
+}
+.data-table__cell--sticky-right-edge {
+  box-shadow:
+    -1px 0 0 rgba(0, 0, 0, 0.08),
+    -2px 0 0 rgba(0, 0, 0, 0.06),
+    -4px 0 0 rgba(0, 0, 0, 0.04),
+    -6px 0 0 rgba(0, 0, 0, 0.03);
+  border-left: 1px solid var(--color-border-primary);
+}
+.data-table--bordered .data-table__cell {
+  border-right: 1px solid var(--color-border-secondary);
+}
+.data-table--bordered .data-table__cell:last-child {
+  border-right: 0;
+}
+.data-table__spacer-cell {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+}
+
+/* src/styles/header.css */
+.data-table__head-cell {
+  box-sizing: border-box;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  height: var(--data-table-header-height);
+  padding: 0 var(--data-table-cell-padding-x);
+  background-color: var(--color-surface-secondary);
+  border-bottom: 1px solid var(--color-border-primary);
+  color: var(--color-content-secondary);
+  font-size: var(--type-size-body-small);
+  font-weight: var(--type-weight-body-strong);
+  text-align: left;
+  white-space: nowrap;
+}
+.data-table__head-cell--start {
+  text-align: left;
+}
+.data-table__head-cell--center {
+  text-align: center;
+}
+.data-table__head-cell--end {
+  text-align: right;
+}
+.data-table__head-cell:focus-visible {
+  outline: 2px solid var(--color-interactive-focus);
+  outline-offset: -2px;
+}
+.data-table__head-inner {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-space-01);
+  min-width: 0;
+}
+.data-table__head-cell--center .data-table__head-inner {
+  justify-content: center;
+}
+.data-table__head-cell--end .data-table__head-inner {
+  justify-content: flex-end;
+}
+.data-table__head-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.data-table__sort-button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-space-01);
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  background: none;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.data-table__sort-button:hover {
+  color: var(--color-content-primary);
+}
+.data-table__sort-button:focus-visible {
+  outline: 2px solid var(--color-interactive-focus);
+  outline-offset: 2px;
+  border-radius: var(--border-radius-01);
+}
+.data-table__sort-icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-content-tertiary);
+  opacity: 0;
+}
+.data-table__sort-button:hover .data-table__sort-icon,
+.data-table__head-cell[aria-sort=ascending] .data-table__sort-icon,
+.data-table__head-cell[aria-sort=descending] .data-table__sort-icon {
+  opacity: 1;
+}
+.data-table__head-cell[aria-sort=ascending] .data-table__sort-icon,
+.data-table__head-cell[aria-sort=descending] .data-table__sort-icon {
+  color: var(--color-interactive-primary-default);
+}
+.data-table__resize-handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: var(--spacing-space-02);
+  height: 100%;
+  padding: 0;
+  background: none;
+  border: 0;
+  cursor: col-resize;
+  touch-action: none;
+  user-select: none;
+}
+.data-table__resize-handle::after {
+  content: "";
+  position: absolute;
+  top: 25%;
+  right: calc(var(--spacing-space-02) / 2);
+  width: 1px;
+  height: 50%;
+  background-color: var(--color-border-primary);
+}
+.data-table__resize-handle:hover::after,
+.data-table__resize-handle--active::after {
+  top: 0;
+  height: 100%;
+  width: 2px;
+  background-color: var(--color-interactive-primary-default);
+}
+.data-table__resize-handle:focus-visible {
+  outline: 2px solid var(--color-interactive-focus);
+  outline-offset: -2px;
+}
+.data-table__head-inner[draggable=true] {
+  cursor: grab;
+}
+.data-table__head-cell[data-dragging] {
+  opacity: 0.5;
+}
+.data-table__head-cell[data-drop=before] {
+  box-shadow: inset 2px 0 0 var(--color-interactive-primary-default);
+}
+.data-table__head-cell[data-drop=after] {
+  box-shadow: inset -2px 0 0 var(--color-interactive-primary-default);
+}
+.data-table__move {
+  position: absolute;
+  top: 50%;
+  right: calc(var(--spacing-space-02) + var(--spacing-space-01));
+  display: inline-flex;
+  gap: var(--spacing-space-005);
+  padding-inline-start: var(--spacing-space-01);
+  background-color: var(--color-surface-secondary);
+  transform: translateY(-50%);
+}
+.data-table__head-cell--end .data-table__move {
+  right: auto;
+  left: var(--spacing-space-02);
+  padding-inline: 0 var(--spacing-space-01);
+}
+.data-table__move[data-mode=toggle] {
+  position: static;
+  flex: none;
+  margin-inline-start: auto;
+  padding-inline: 0;
+  background: none;
+  transform: none;
+}
+.data-table__head-cell--end .data-table__move[data-mode=toggle] {
+  order: -1;
+  margin-inline: 0 auto;
+}
+.data-table__move[data-mode=always] {
+  opacity: 0;
+  pointer-events: none;
+}
+.data-table__head-cell:hover .data-table__move[data-mode=always],
+.data-table__head-cell:focus-within .data-table__move[data-mode=always] {
+  opacity: 1;
+  pointer-events: auto;
+}
+@media (hover: none) {
+  .data-table__move[data-mode=always] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+.data-table__move-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--data-table-move-size, var(--spacing-space-07));
+  height: var(--data-table-move-size, var(--spacing-space-07));
+  padding: 0;
+  background: none;
+  border: 0;
+  border-radius: var(--radius-interactive);
+  color: var(--color-content-secondary);
+  cursor: pointer;
+}
+.data-table__move-button:hover:not(:disabled) {
+  background-color: var(--color-interactive-ui-hover);
+  color: var(--color-content-primary);
+}
+.data-table__move-button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.data-table__move-button:focus-visible {
+  outline: 2px solid var(--color-interactive-focus);
+  outline-offset: 0;
+}
+
+/* src/styles/states.css */
+.data-table__state-cell {
+  padding: var(--spacing-space-08) var(--spacing-space-04);
+  background-color: var(--data-table-cell-bg);
+  border-bottom: 1px solid var(--color-border-secondary);
+  text-align: center;
+  white-space: normal;
+}
+.data-table__state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-space-02);
+  color: var(--color-content-secondary);
+}
+.data-table__state-title {
+  font-size: var(--type-size-body-large);
+  font-weight: var(--type-weight-body-strong);
+  color: var(--color-content-primary);
+}
+.data-table__state-description {
+  max-width: var(--dimension-08);
+  font-size: var(--type-size-body-medium);
+  color: var(--color-content-secondary);
+}
+.data-table__state-actions {
+  display: flex;
+  gap: var(--spacing-space-02);
+  margin-top: var(--spacing-space-02);
+}
+.data-table__state--error .data-table__state-title {
+  color: var(--color-status-error-content);
+}
+.data-table__skeleton-cell {
+  height: var(--data-table-row-height);
+  padding: var(--data-table-cell-padding-y) var(--data-table-cell-padding-x);
+  background-color: var(--data-table-cell-bg);
+  border-bottom: 1px solid var(--color-border-secondary);
+}
+.data-table__row--placeholder {
+  --data-table-cell-bg: var(--color-surface-primary);
+}
+
+/* src/styles/toolbar.css */
+.data-table__toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-space-02);
+  flex-wrap: wrap;
+}
+.data-table__toolbar-spacer {
+  flex: 1 1 auto;
+  min-width: var(--spacing-space-04);
+}
+.data-table__toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-space-02);
+  flex-wrap: wrap;
+}
+.data-table__toolbar-divider {
+  height: var(--control-height-md);
+  margin-inline: var(--spacing-space-01);
+}
+.data-table__search {
+  flex: 0 1 var(--dimension-07);
+  min-width: var(--dimension-05);
+}
+.data-table:has(.data-table__cards) .data-table__search {
+  flex: 1 0 100%;
+}
+.data-table:has(.data-table__cards) .data-table__toolbar-spacer {
+  display: none;
+}
+.data-table__scroll-buttons {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-space-01);
+}
+.data-table__pagination {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: var(--spacing-space-03);
+}
+.data-table__pagination-status {
+  justify-self: start;
+  color: var(--color-content-secondary);
+  font-size: var(--type-size-body-small);
+  font-variant-numeric: tabular-nums;
+}
+.data-table__pagination > .data-table__page-size {
+  justify-self: end;
+}
+@media (max-width: 640px) {
+  .data-table__pagination {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+}
+.data-table__page-size {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-space-02);
+  color: var(--color-content-secondary);
+  font-size: var(--type-size-body-small);
+}
+.data-table__subbar {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-space-03);
+  flex-wrap: wrap;
+  animation: data-table-row-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+@keyframes data-table-row-in {
+  from {
+    max-height: 0;
+    margin-block-start: calc(-1 * var(--spacing-space-03));
+    opacity: 0;
+    clip-path: inset(0);
+  }
+  to {
+    max-height: var(--control-height-md);
+    margin-block-start: 0;
+    opacity: 1;
+    clip-path: inset(0);
+  }
+}
+.data-table__subbar .data-table__filters {
+  flex: 1 1 auto;
+}
+.data-table__selection-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-space-02);
+  flex-wrap: wrap;
+  min-width: 0;
+  animation: data-table-actions-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+@keyframes data-table-actions-in {
+  from {
+    opacity: 0;
+    transform: translateX(var(--spacing-space-03));
+  }
+}
+@keyframes data-table-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .data-table__subbar,
+  .data-table__selection-bar,
+  .data-table__selection-footer {
+    animation: data-table-fade-in 120ms ease-out;
+  }
+}
+.data-table__selection-count {
+  color: var(--color-content-primary);
+  font-size: var(--type-size-body-small);
+  font-weight: var(--type-weight-body-strong);
+  white-space: nowrap;
+}
+.data-table__selection-footer {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  z-index: 4;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-space-03);
+  flex-wrap: wrap;
+  --data-table-footer-height: calc( var(--data-table-control-height, var(--control-height-md)) + 2 * var(--spacing-space-03) + 1px );
+  box-sizing: border-box;
+  min-height: var(--data-table-footer-height);
+  padding: var(--spacing-space-03);
+  background-color: var(--color-surface-primary);
+  border-top: 1px solid var(--color-border-secondary);
+  animation: data-table-footer-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.data-table > .data-table__selection-footer {
+  --data-table-footer-height: var(--data-table-control-height, var(--control-height-md));
+  position: static;
+  padding: 0;
+  background: none;
+  border-top: 0;
+}
+@keyframes data-table-footer-in {
+  from {
+    min-height: 0;
+    max-height: 0;
+    opacity: 0;
+    clip-path: inset(0);
+  }
+  to {
+    min-height: var(--data-table-footer-height);
+    max-height: var(--data-table-footer-height);
+    opacity: 1;
+    clip-path: inset(0);
+  }
+}
+.data-table__select-cell,
+.data-table__actions-cell {
+  overflow: visible;
+  text-overflow: clip;
+}
+.data-table__select-hit {
+  display: flex;
+  align-items: center;
+}
+.data-table__cell--center .data-table__select-hit {
+  justify-content: center;
+}
+
+/* src/styles/filters.css */
+.data-table__filters {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-space-02);
+  flex-wrap: wrap;
+  min-width: 0;
+}
+.data-table__filters-label {
+  color: var(--color-content-primary);
+  font-size: var(--type-size-caption);
+  line-height: var(--type-leading-caption);
+  font-weight: var(--type-weight-body-emphasis);
+  white-space: nowrap;
+}
+.data-table__filter-chip .chip__segment--value {
+  max-width: var(--dimension-05);
+}
+.data-table__filter-editor-popup.popover__popup {
+  padding: var(--spacing-space-01);
+}
+.data-table__filter-editor .data-table__filter-editor-title {
+  margin: 0;
+  padding: var(--spacing-space-02) var(--spacing-space-03);
+  color: var(--color-content-primary);
+  font-size: var(--type-size-body-small);
+  line-height: var(--type-leading-body-small);
+  font-weight: var(--type-weight-body-strong);
+}
+.data-table__filter-editor-rule {
+  margin: var(--spacing-space-01) 0;
+}
+.data-table__filter-editor-remove.btn {
+  width: 100%;
+  justify-content: flex-start;
+  gap: var(--spacing-space-02);
+  font-size: var(--type-size-body-medium);
+  line-height: var(--type-leading-body-medium);
+}
+.data-table__filter-field {
+  width: 100%;
+}
+.data-table__filter-field--unlabelled .field__label,
+.data-table__filter-field--unlabelled.listbox .listbox__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+.data-table__filter-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-space-01);
+  min-width: var(--dimension-06);
+  max-width: var(--dimension-08);
+}
+.data-table__filter-editor-value {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-space-02);
+}
+.data-table__filter-editor-value > * {
+  min-width: 0;
+  flex: 1 1 0;
+}
+.data-table__filter-editor-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: var(--spacing-space-01);
+  border-top: 1px solid var(--color-border-secondary);
+}
+.data-table__filter-picker {
+  min-width: var(--dimension-05);
+  max-height: var(--dimension-09);
+  overflow-y: auto;
+}
+.data-table__filter-option-count {
+  margin-left: var(--spacing-space-01);
+  color: var(--color-content-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+/* src/styles/cards.css */
+.data-table__cards {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  gap: var(--spacing-space-02);
+  position: relative;
+  overflow: auto;
+  max-height: var(--data-table-max-height, none);
+  overscroll-behavior: contain;
+}
+.data-table__card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-space-02);
+  padding: var(--spacing-space-03);
+  background-color: var(--color-surface-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--border-radius-05);
+}
+.data-table__card--selected {
+  border-color: var(--color-interactive-primary-default);
+  background-color: var(--color-interactive-ui-selected);
+}
+.data-table__card:focus-visible {
+  outline: 2px solid var(--color-interactive-focus);
+  outline-offset: 2px;
+}
+.data-table__card-header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-space-02);
+}
+.data-table__card-controls {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-space-02);
+  margin-inline-start: auto;
+}
+.data-table__card-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: var(--type-size-heading-small);
+  font-weight: var(--type-weight-body-strong);
+  color: var(--color-content-primary);
+  overflow-wrap: anywhere;
+}
+.data-table__card-fields {
+  display: grid;
+  align-items: baseline;
+  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
+  gap: var(--spacing-space-01) var(--spacing-space-03);
+  margin: 0;
+}
+.data-table__card-label {
+  color: var(--color-content-secondary);
+  font-size: var(--type-size-body-medium);
+}
+.data-table__card-value {
+  margin: 0;
+  color: var(--color-content-primary);
+  font-size: var(--type-size-body-large);
+  overflow-wrap: anywhere;
+}
+.data-table__card-spacer {
+  flex: none;
+}
+.data-table__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--spacing-space-05, 20px);
+  height: var(--spacing-space-05, 20px);
+  padding: 0 var(--spacing-space-01);
+  box-sizing: border-box;
+  border-radius: var(--border-radius-full);
+  background-color: var(--color-interactive-primary-default);
+  color: var(--color-interactive-contents);
+  font-size: var(--type-size-caption);
+  font-weight: var(--type-weight-body-strong);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+.data-table__sheet {
+  font-family: var(--type-font-body);
+}
+.sheet__popup--bottom.data-table__sheet {
+  height: auto;
+  max-height: 85dvh;
+}
+.data-table__sheet .sheet__footer > * {
+  flex: 1 1 0;
+  min-width: 0;
+}
+.data-table__sheet-body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--spacing-space-05);
+  min-height: 0;
+  overflow-y: auto;
+}
+.data-table__sheet-section-title {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-space-005);
+  min-width: 0;
+  text-align: start;
+}
+.data-table__sheet-section-summary {
+  color: var(--color-content-secondary);
+  font-size: var(--type-size-body-small);
+  font-weight: var(--type-weight-body-default);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.data-table__sheet-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-space-04);
+}
+.data-table__sheet-filter {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-space-03);
+}
+.data-table__sheet-filter + .data-table__sheet-filter {
+  padding-top: var(--spacing-space-04);
+  border-top: 1px solid var(--color-border-secondary);
+}
+.data-table__sheet-filter-value {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-space-02);
+}
+.data-table__sheet-filter-value:empty {
+  display: none;
+}
+.data-table__sheet-remove.btn {
+  align-self: flex-start;
+}
+
+/* src/styles/detail.css */
+.data-table__detail-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-space-01);
+  padding-right: var(--spacing-space-08);
+}
+.data-table__detail-nav {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-space-01);
+}
+.data-table__detail-position {
+  color: var(--color-content-secondary);
+  font-size: var(--type-size-body-small);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.data-table__detail-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-space-04);
+}
+.data-table__edit-icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-content-tertiary);
+}
+.data-table__cell--editable {
+  cursor: text;
+}
+.data-table__cell--editable:not(.data-table__cell--editing, :focus-visible):hover {
+  outline: 1px solid var(--color-border-data-entry);
+  outline-offset: -1px;
+}
+.data-table__cell--editing {
+  padding-top: 0;
+  padding-bottom: 0;
+  overflow: visible;
+}
+.data-table__editor {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+}
+.data-table__editor-message {
+  position: absolute;
+  z-index: var(--z-index-popover);
+  margin-top: var(--spacing-space-01);
+  padding: var(--spacing-space-01) var(--spacing-space-02);
+  background-color: var(--color-status-error-bg);
+  border-radius: var(--border-radius-02);
+  color: var(--color-status-error-content);
+  font-size: var(--type-size-caption);
+  white-space: nowrap;
+}