@visitwonders/assembly 0.1.0

package/dist/data/table.css

@@ -0,0 +1,270 @@
+/* ============================================================================
+   Table Component Styles
+   ============================================================================ */
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-sm);
+  color: var(--color-text);
+  background-color: var(--color-bg-surface);
+}
+
+.table:focus {
+  outline: none;
+}
+
+.table:focus-visible {
+  /* Focus is tracked on individual rows, not the table container */
+  outline: none;
+}
+
+/* ============================================================================
+   Caption
+   ============================================================================ */
+
+.caption {
+  padding: var(--spacing-3);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+  text-align: left;
+  caption-side: top;
+}
+
+/* ============================================================================
+   Header
+   ============================================================================ */
+
+.thead {
+  background-color: var(--color-bg-surface);
+}
+
+.table[data-sticky-header="true"] .thead {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: var(--color-bg-surface);
+}
+
+.header-row {
+  border-bottom: var(--border-width-1) solid var(--color-border);
+}
+
+.header-cell {
+  padding: var(--spacing-3) var(--spacing-4);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+  text-align: left;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.table[data-compact="true"] .header-cell {
+  padding: var(--spacing-2) var(--spacing-3);
+}
+
+.header-cell[data-align="center"] {
+  text-align: center;
+}
+
+.header-cell[data-align="right"] {
+  text-align: right;
+}
+
+.header-cell[data-sortable="true"] {
+  padding: 0;
+  cursor: pointer;
+  user-select: none;
+}
+
+.header-cell[data-sortable="true"]:hover {
+  color: var(--color-text);
+  background-color: var(--color-bg-hover-subtle);
+}
+
+.header-cell[data-sorted="true"] {
+  color: var(--color-text);
+}
+
+/* ============================================================================
+   Sort Button
+   ============================================================================ */
+
+.sort-button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-1);
+  width: 100%;
+  padding: var(--spacing-3) var(--spacing-4);
+  border: none;
+  background: none;
+  font: inherit;
+  font-weight: inherit;
+  color: inherit;
+  cursor: pointer;
+  text-align: inherit;
+}
+
+.table[data-compact="true"] .sort-button {
+  padding: var(--spacing-2) var(--spacing-3);
+}
+
+.sort-button:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: -2px;
+}
+
+.header-text {
+  display: inline;
+}
+
+.sort-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+}
+
+.sort-icon .icon {
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+}
+
+.sort-icon .icon-unsorted {
+  opacity: 0.4;
+}
+
+.header-cell[data-sortable="true"]:hover .icon-unsorted {
+  opacity: 0.7;
+}
+
+/* ============================================================================
+   Body
+   ============================================================================ */
+
+.tbody {
+  background-color: var(--color-bg-surface);
+}
+
+.row {
+  border-bottom: var(--border-width-1) solid var(--color-border);
+  transition: background-color 0.1s ease;
+}
+
+.row:last-child {
+  border-bottom: none;
+}
+
+.row:hover {
+  background-color: var(--color-bg-hover-subtle);
+}
+
+.row[data-disabled="true"] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.row[data-disabled="true"]:hover {
+  background-color: transparent;
+}
+
+.row[data-selected="true"] {
+  background-color: var(--color-bg-fill-accent-subtle);
+}
+
+.row[data-selected="true"]:hover {
+  background-color: var(--color-bg-fill-accent-subtle-hover);
+}
+
+.row[data-focused="true"] {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: -2px;
+}
+
+.row[data-clickable="true"] {
+  cursor: pointer;
+}
+
+/* ============================================================================
+   Cells
+   ============================================================================ */
+
+.cell {
+  padding: var(--spacing-3) var(--spacing-4);
+  vertical-align: middle;
+}
+
+.table[data-compact="true"] .cell {
+  padding: var(--spacing-2) var(--spacing-3);
+}
+
+.cell[data-align="center"] {
+  text-align: center;
+}
+
+.cell[data-align="right"] {
+  text-align: right;
+}
+
+.checkbox-cell {
+  width: var(--spacing-10);
+  padding-right: 0;
+}
+
+/* ============================================================================
+   Bordered Variant
+   ============================================================================ */
+
+.table[data-bordered="true"] .cell,
+.table[data-bordered="true"] .header-cell {
+  border: var(--border-width-1) solid var(--color-border);
+}
+
+/* ============================================================================
+   Striped Variant
+   ============================================================================ */
+
+.table[data-striped="true"] .row:nth-child(odd) {
+  background-color: var(--color-bg-surface-sunken);
+}
+
+.table[data-striped="true"] .row:nth-child(odd):hover {
+  background-color: var(--color-bg-hover-subtle);
+}
+
+.table[data-striped="true"] .row[data-selected="true"]:nth-child(odd) {
+  background-color: var(--color-bg-fill-accent-subtle);
+}
+
+/* ============================================================================
+   Empty State
+   ============================================================================ */
+
+.empty-row {
+  background-color: transparent;
+}
+
+.empty-row:hover {
+  background-color: transparent;
+}
+
+.empty-cell {
+  padding: var(--spacing-8) var(--spacing-4);
+  text-align: center;
+  color: var(--color-text-secondary);
+}
+
+/* ============================================================================
+   Loading State
+   ============================================================================ */
+
+.skeleton-row {
+  pointer-events: none;
+}
+
+.table[data-loading="true"] {
+  pointer-events: none;
+}