@shotleybuilder/svelte-gridlite-kit 0.1.0

package/dist/styles/gridlite.css

@@ -0,0 +1,966 @@
+/* GridLite — Base Styles */
+
+/* ─── Container ──────────────────────────────────────────────────────────── */
+
+.gridlite-container {
+  width: 100%;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-size: 14px;
+  color: #1a1a1a;
+}
+
+.gridlite-table-wrap {
+  width: 100%;
+  overflow-x: auto;
+}
+
+/* ─── Table ──────────────────────────────────────────────────────────────── */
+
+.gridlite-table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* ─── Header ─────────────────────────────────────────────────────────────── */
+
+.gridlite-thead {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.gridlite-th {
+  background: #f8f9fa;
+  border-bottom: 2px solid #dee2e6;
+  font-weight: 600;
+  text-align: left;
+  white-space: nowrap;
+  user-select: none;
+}
+
+/* ─── Body ───────────────────────────────────────────────────────────────── */
+
+.gridlite-td {
+  border-bottom: 1px solid #e9ecef;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.gridlite-tr:hover {
+  background: #f1f3f5;
+}
+
+.gridlite-tr:focus-within {
+  outline: 2px solid #4c6ef5;
+  outline-offset: -2px;
+}
+
+/* ─── Row Height Variants ────────────────────────────────────────────────── */
+
+.gridlite-row-short .gridlite-th,
+.gridlite-row-short .gridlite-td {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.gridlite-row-medium .gridlite-th,
+.gridlite-row-medium .gridlite-td {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.gridlite-row-tall .gridlite-th,
+.gridlite-row-tall .gridlite-td {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.gridlite-row-extra_tall .gridlite-th,
+.gridlite-row-extra_tall .gridlite-td {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+/* ─── Column Spacing Variants ────────────────────────────────────────────── */
+
+.gridlite-spacing-narrow .gridlite-th,
+.gridlite-spacing-narrow .gridlite-td {
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
+.gridlite-spacing-normal .gridlite-th,
+.gridlite-spacing-normal .gridlite-td {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.gridlite-spacing-wide .gridlite-th,
+.gridlite-spacing-wide .gridlite-td {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+/* ─── Toolbar ────────────────────────────────────────────────────────────── */
+
+.gridlite-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+  flex-wrap: wrap;
+}
+
+/* Button label — hidden in some layouts */
+.gridlite-btn-label {
+  /* visible by default */
+}
+
+/* ─── Layout: Airtable ───────────────────────────────────────────────────── */
+/* Right-aligned: Columns → Filter → Group → Sort → Row Height → Spacing → Search */
+
+.gridlite-layout-airtable .gridlite-toolbar {
+  justify-content: flex-end;
+}
+
+.gridlite-layout-airtable .gridlite-toolbar-columns {
+  order: 1;
+}
+.gridlite-layout-airtable .gridlite-toolbar-filter {
+  order: 2;
+}
+.gridlite-layout-airtable .gridlite-toolbar-group {
+  order: 3;
+}
+.gridlite-layout-airtable .gridlite-toolbar-sort {
+  order: 4;
+}
+.gridlite-layout-airtable .gridlite-toolbar-view {
+  order: 5;
+}
+.gridlite-layout-airtable .gridlite-toolbar-search {
+  order: 6;
+}
+
+/* ─── Layout: Excel ──────────────────────────────────────────────────────── */
+/* Two rows: top = data controls + search, bottom = view controls */
+
+.gridlite-layout-excel .gridlite-toolbar {
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+.gridlite-layout-excel .gridlite-toolbar-filter {
+  order: 1;
+}
+.gridlite-layout-excel .gridlite-toolbar-sort {
+  order: 2;
+}
+.gridlite-layout-excel .gridlite-toolbar-group {
+  order: 3;
+}
+.gridlite-layout-excel .gridlite-toolbar-search {
+  order: 4;
+  margin-left: auto;
+}
+.gridlite-layout-excel .gridlite-toolbar-columns {
+  order: 6;
+}
+.gridlite-layout-excel .gridlite-toolbar-view {
+  order: 7;
+}
+
+/* Force second row via a full-width break */
+.gridlite-layout-excel .gridlite-toolbar::after {
+  content: "";
+  width: 100%;
+  order: 5;
+}
+
+/* ─── Layout: Shadcn ─────────────────────────────────────────────────────── */
+/* Search left, data controls middle, view controls right */
+
+.gridlite-layout-shadcn .gridlite-toolbar {
+  justify-content: flex-start;
+}
+
+.gridlite-layout-shadcn .gridlite-toolbar-search {
+  order: 1;
+  margin-right: auto;
+}
+.gridlite-layout-shadcn .gridlite-toolbar-filter {
+  order: 2;
+}
+.gridlite-layout-shadcn .gridlite-toolbar-sort {
+  order: 3;
+}
+.gridlite-layout-shadcn .gridlite-toolbar-group {
+  order: 4;
+}
+.gridlite-layout-shadcn .gridlite-toolbar-columns {
+  order: 5;
+}
+.gridlite-layout-shadcn .gridlite-toolbar-view {
+  order: 6;
+}
+
+/* ─── Layout: AG Grid ────────────────────────────────────────────────────── */
+/* TODO(#1): aggrid layout is experimental — not production-ready. Needs debugging. */
+/* Minimal top bar + sidebar on right */
+
+.gridlite-layout-aggrid .gridlite-toolbar-aggrid-top {
+  justify-content: flex-start;
+}
+
+.gridlite-aggrid-body {
+  display: flex;
+  gap: 0;
+  min-height: 400px;
+}
+
+.gridlite-aggrid-body > .gridlite-table-wrap {
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+}
+
+.gridlite-aggrid-body > .gridlite-aggrid-sidebar {
+  flex-shrink: 0;
+  width: 260px;
+  border-left: 1px solid #dee2e6;
+  background: #f8f9fa;
+  overflow-y: auto;
+  max-height: 600px;
+}
+
+.gridlite-aggrid-sidebar-section {
+  border-bottom: 1px solid #dee2e6;
+}
+
+.gridlite-aggrid-sidebar-header {
+  padding: 8px 12px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: #868e96;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: #f1f3f5;
+  border-bottom: 1px solid #dee2e6;
+}
+
+/* Override ColumnPicker positioning when inside aggrid sidebar */
+.gridlite-aggrid-sidebar .gridlite-column-picker {
+  position: static;
+  min-width: unset;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
+}
+
+/* Override FilterBar styling when inside aggrid sidebar */
+.gridlite-aggrid-sidebar .gridlite-filter-bar {
+  border: none;
+  border-radius: 0;
+  margin-bottom: 0;
+  background: transparent;
+}
+
+/* Pagination also inside the aggrid body */
+.gridlite-layout-aggrid .gridlite-aggrid-body ~ .gridlite-pagination {
+  /* pagination stays below the body flex container */
+}
+
+/* ─── Global Search ──────────────────────────────────────────────────────── */
+
+.gridlite-search {
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin-left: auto;
+}
+
+.gridlite-search-icon {
+  position: absolute;
+  left: 8px;
+  width: 16px;
+  height: 16px;
+  color: #9ca3af;
+  pointer-events: none;
+}
+
+.gridlite-search-input {
+  padding: 0.5rem 28px 0.5rem 28px;
+  font-size: 0.875rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  background: white;
+  min-width: 200px;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
+}
+
+.gridlite-search-input:focus {
+  outline: none;
+  border-color: #4c6ef5;
+  box-shadow: 0 0 0 3px rgba(76, 110, 245, 0.1);
+}
+
+.gridlite-search-input::placeholder {
+  color: #9ca3af;
+}
+
+.gridlite-search-clear {
+  position: absolute;
+  right: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  background: none;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  color: #9ca3af;
+  transition: color 0.15s;
+}
+
+.gridlite-search-clear:hover {
+  color: #374151;
+}
+
+/* ─── Pagination ─────────────────────────────────────────────────────────── */
+
+.gridlite-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 0;
+  font-size: 13px;
+  color: #495057;
+}
+
+.gridlite-pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.gridlite-pagination button {
+  padding: 4px 12px;
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+  background: #fff;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.gridlite-pagination button:hover:not(:disabled) {
+  background: #f1f3f5;
+}
+
+.gridlite-pagination button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.gridlite-page-size-select {
+  padding: 4px 8px;
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+  font-size: 13px;
+  background: #fff;
+  margin-right: 8px;
+}
+
+/* ─── View Controls ──────────────────────────────────────────────────────── */
+
+.gridlite-view-controls {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.gridlite-view-control {
+  position: relative;
+}
+
+.gridlite-view-control-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  background: #fff;
+  cursor: pointer;
+  color: #374151;
+  white-space: nowrap;
+  transition:
+    border-color 0.15s,
+    background 0.15s;
+}
+
+.gridlite-view-control-btn:hover {
+  background: #f8f9fa;
+  border-color: #adb5bd;
+}
+
+.gridlite-view-control-btn.active {
+  border-color: #4c6ef5;
+  color: #4c6ef5;
+  background: #edf2ff;
+}
+
+.gridlite-view-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 160px;
+  background: #fff;
+  border: 1px solid #dee2e6;
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  z-index: 50;
+  padding: 4px 0;
+}
+
+.gridlite-view-dropdown-title {
+  padding: 6px 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #868e96;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.gridlite-view-dropdown-item {
+  display: block;
+  width: 100%;
+  padding: 6px 12px;
+  font-size: 0.8125rem;
+  text-align: left;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: #1a1a1a;
+  transition: background 0.1s;
+}
+
+.gridlite-view-dropdown-item:hover {
+  background: #f1f3f5;
+}
+
+.gridlite-view-dropdown-item.selected {
+  color: #4c6ef5;
+  font-weight: 600;
+  background: #edf2ff;
+}
+
+/* Column Picker */
+
+.gridlite-column-picker {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 260px;
+  background: #fff;
+  border: 1px solid #dee2e6;
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  z-index: 50;
+  padding: 0;
+}
+
+/* Search */
+
+.gridlite-column-picker-search {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 8px 10px;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.gridlite-column-picker-search-icon {
+  position: absolute;
+  left: 18px;
+  width: 14px;
+  height: 14px;
+  color: #9ca3af;
+  pointer-events: none;
+}
+
+.gridlite-column-picker-search-input {
+  width: 100%;
+  padding: 5px 24px 5px 26px;
+  font-size: 0.8125rem;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  background: #fff;
+  transition: border-color 0.15s;
+}
+
+.gridlite-column-picker-search-input:focus {
+  outline: none;
+  border-color: #4c6ef5;
+  box-shadow: 0 0 0 2px rgba(76, 110, 245, 0.1);
+}
+
+.gridlite-column-picker-search-input::placeholder {
+  color: #9ca3af;
+}
+
+.gridlite-column-picker-search-clear {
+  position: absolute;
+  right: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #9ca3af;
+  border-radius: 3px;
+  transition: color 0.15s;
+}
+
+.gridlite-column-picker-search-clear:hover {
+  color: #374151;
+}
+
+/* Actions */
+
+.gridlite-column-picker-actions {
+  display: flex;
+  gap: 8px;
+  padding: 6px 10px;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.gridlite-column-picker-actions button {
+  padding: 3px 8px;
+  font-size: 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  background: #fff;
+  cursor: pointer;
+  color: #495057;
+  transition: background 0.1s;
+}
+
+.gridlite-column-picker-actions button:hover {
+  background: #f1f3f5;
+}
+
+/* List */
+
+.gridlite-column-picker-list {
+  max-height: 360px;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+/* Sections */
+
+.gridlite-column-picker-section {
+  padding: 0;
+}
+
+.gridlite-column-picker-section + .gridlite-column-picker-section {
+  border-top: 1px solid #e9ecef;
+}
+
+.gridlite-column-picker-section-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: #868e96;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.gridlite-column-picker-section-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  font-size: 0.625rem;
+  font-weight: 500;
+  color: #6c757d;
+  background: #e9ecef;
+  border-radius: 8px;
+}
+
+/* Items */
+
+.gridlite-column-picker-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  font-size: 0.8125rem;
+  cursor: pointer;
+  color: #1a1a1a;
+  transition: background 0.1s;
+}
+
+.gridlite-column-picker-item:hover {
+  background: #f1f3f5;
+}
+
+.gridlite-column-picker-item-hidden {
+  color: #868e96;
+}
+
+.gridlite-column-picker-item input[type="checkbox"] {
+  margin: 0;
+  accent-color: #4c6ef5;
+  flex-shrink: 0;
+}
+
+.gridlite-column-picker-item-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Drag handle */
+
+.gridlite-column-picker-drag-handle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  flex-shrink: 0;
+  color: #ced4da;
+  cursor: grab;
+  border-radius: 2px;
+  padding: 2px 0;
+  transition: color 0.15s;
+}
+
+.gridlite-column-picker-drag-handle:active {
+  cursor: grabbing;
+}
+
+.gridlite-column-picker-item:hover .gridlite-column-picker-drag-handle {
+  color: #868e96;
+}
+
+/* Selection */
+
+.gridlite-column-picker-item.selected {
+  background: #edf2ff;
+}
+
+.gridlite-column-picker-item.selected:hover {
+  background: #dbe4ff;
+}
+
+.gridlite-column-picker-item.focused {
+  outline: 2px solid #4c6ef5;
+  outline-offset: -2px;
+}
+
+/* Drag feedback */
+
+.gridlite-column-picker-item.dragged {
+  opacity: 0.35;
+}
+
+/* Drop indicator lines */
+
+.gridlite-column-picker-item.drop-before {
+  box-shadow: inset 0 2px 0 0 #4c6ef5;
+}
+
+.gridlite-column-picker-item.drop-after {
+  box-shadow: inset 0 -2px 0 0 #4c6ef5;
+}
+
+/* Selection count badge */
+
+.gridlite-column-picker-selection-count {
+  margin-left: auto;
+  font-size: 0.6875rem;
+  color: #4c6ef5;
+  font-weight: 500;
+}
+
+/* Drag ghost (multi-column) */
+
+.gridlite-column-picker-drag-ghost {
+  position: fixed;
+  top: -1000px;
+  left: -1000px;
+  padding: 4px 10px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #fff;
+  background: #4c6ef5;
+  border-radius: 4px;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 9999;
+}
+
+/* Empty state within sections */
+
+.gridlite-column-picker-empty {
+  padding: 8px 10px;
+  font-size: 0.75rem;
+  color: #868e96;
+  font-style: italic;
+}
+
+/* ─── Filter Bar ─────────────────────────────────────────────────────────── */
+
+.gridlite-filter-bar {
+  padding: 8px;
+  background: #f8f9fa;
+  border: 1px solid #dee2e6;
+  border-radius: 6px;
+  margin-bottom: 8px;
+}
+
+/* ─── Column Header Interactive ──────────────────────────────────────────── */
+
+.gridlite-th-interactive {
+  position: relative;
+}
+
+.gridlite-th-content {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.gridlite-th-label {
+  flex: 1;
+}
+
+.gridlite-th-menu-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  background: none;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  color: #adb5bd;
+  opacity: 0;
+  transition:
+    opacity 0.15s,
+    color 0.15s,
+    background 0.15s;
+}
+
+.gridlite-th-interactive:hover .gridlite-th-menu-btn {
+  opacity: 1;
+}
+
+.gridlite-th-menu-btn:hover {
+  color: #495057;
+  background: #e9ecef;
+}
+
+/* ─── Column Reorder Drag Feedback ───────────────────────────────────────── */
+
+.gridlite-th.dragging {
+  opacity: 0.4;
+}
+
+.gridlite-th.drag-over {
+  border-left: 2px solid #4c6ef5;
+}
+
+/* ─── Column Resize Handle ───────────────────────────────────────────────── */
+
+.gridlite-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -6px;
+  height: 100%;
+  width: 12px;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  background: transparent;
+  z-index: 10;
+  transition: background 0.15s;
+}
+
+.gridlite-resize-handle:hover {
+  background: rgba(76, 110, 245, 0.1);
+}
+
+.gridlite-resize-handle:hover::after,
+.gridlite-resize-handle.resizing::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  height: 100%;
+  width: 2px;
+  background: #4c6ef5;
+}
+
+.gridlite-resize-handle.resizing {
+  background: rgba(76, 110, 245, 0.08);
+}
+
+/* ─── Row Detail (default layout) ────────────────────────────────────────── */
+
+.gridlite-row-detail {
+  margin: 0;
+}
+
+.gridlite-row-detail-field {
+  display: flex;
+  padding: 8px 0;
+  border-bottom: 1px solid #f1f3f5;
+}
+
+.gridlite-row-detail-field:last-child {
+  border-bottom: none;
+}
+
+.gridlite-row-detail-field dt {
+  width: 140px;
+  flex-shrink: 0;
+  font-weight: 600;
+  color: #495057;
+  font-size: 0.8125rem;
+}
+
+.gridlite-row-detail-field dd {
+  margin: 0;
+  color: #1a1a1a;
+}
+
+/* ─── Grouped View ───────────────────────────────────────────────────────── */
+
+.gridlite-group-row {
+  cursor: pointer;
+}
+
+.gridlite-group-row:hover {
+  background: #f1f3f5;
+}
+
+.gridlite-group-td {
+  background: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+  padding: 0 !important;
+}
+
+.gridlite-group-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+
+/* Nesting indentation */
+.gridlite-group-level-0 {
+  padding-left: 12px;
+}
+
+.gridlite-group-level-1 {
+  padding-left: 32px;
+}
+
+.gridlite-group-level-2 {
+  padding-left: 52px;
+}
+
+.gridlite-group-chevron {
+  flex-shrink: 0;
+  color: #6c757d;
+  transition: transform 0.15s ease;
+  transform: rotate(0deg);
+}
+
+.gridlite-group-chevron.expanded {
+  transform: rotate(90deg);
+}
+
+.gridlite-group-label {
+  color: #1a1a1a;
+}
+
+.gridlite-group-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #6c757d;
+  background: #e9ecef;
+  border-radius: 10px;
+}
+
+.gridlite-group-agg {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: #495057;
+  background: #e8f4fd;
+  border-radius: 4px;
+}
+
+.gridlite-group-loading {
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: #868e96;
+  font-style: italic;
+}
+
+.gridlite-group-child {
+  background: #fff;
+}
+
+.gridlite-group-child:hover {
+  background: #f8f9fa;
+}
+
+/* ─── Empty State ────────────────────────────────────────────────────────── */
+
+.gridlite-empty {
+  text-align: center;
+  padding: 24px;
+  color: #868e96;
+  font-style: italic;
+}
+
+/* ─── Loading State ──────────────────────────────────────────────────────── */
+
+.gridlite-loading {
+  text-align: center;
+  padding: 24px;
+  color: #868e96;
+}