@coreui/data-grid 0.2.0-rc.0 → 0.4.0

package/scss/base/_buttons.scss

@@ -0,0 +1,113 @@
+@use "../config" as *;
+
+// scss-docs-start base-button-variables
+$base-btn-padding-y:      .375rem !default;
+$base-btn-padding-x:      .75rem !default;
+$base-btn-font-size:      1rem !default;
+$base-btn-padding-y-sm:   .25rem !default;
+$base-btn-padding-x-sm:   .5rem !default;
+$base-btn-font-size-sm:   .875rem !default;
+$base-btn-transition:     color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+// scss-docs-end base-button-variables
+
+@layer #{$base-layer} {
+  .data-grid {
+    .btn {
+      --#{$prefix}btn-padding-x: #{$base-btn-padding-x};
+      --#{$prefix}btn-padding-y: #{$base-btn-padding-y};
+      --#{$prefix}btn-font-size: #{$base-btn-font-size};
+      --#{$prefix}btn-font-weight: 400;
+      --#{$prefix}btn-line-height: 1.5;
+      --#{$prefix}btn-color: var(--#{$prefix}body-color);
+      --#{$prefix}btn-bg: transparent;
+      --#{$prefix}btn-border-width: var(--#{$prefix}border-width);
+      --#{$prefix}btn-border-color: transparent;
+      --#{$prefix}btn-border-radius: var(--#{$prefix}border-radius);
+      --#{$prefix}btn-hover-color: var(--#{$prefix}btn-color);
+      --#{$prefix}btn-hover-bg: transparent;
+      --#{$prefix}btn-hover-border-color: transparent;
+      --#{$prefix}btn-active-color: var(--#{$prefix}btn-hover-color);
+      --#{$prefix}btn-active-bg: var(--#{$prefix}btn-hover-bg);
+      --#{$prefix}btn-active-border-color: var(--#{$prefix}btn-hover-border-color);
+      --#{$prefix}btn-disabled-color: var(--#{$prefix}btn-color);
+      --#{$prefix}btn-disabled-opacity: .65;
+
+      display: inline-block;
+      padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
+      font-size: var(--#{$prefix}btn-font-size);
+      font-weight: var(--#{$prefix}btn-font-weight);
+      line-height: var(--#{$prefix}btn-line-height);
+      color: var(--#{$prefix}btn-color);
+      text-align: center;
+      text-decoration: none;
+      vertical-align: middle;
+      cursor: pointer;
+      user-select: none;
+      background-color: var(--#{$prefix}btn-bg);
+      border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
+      border-radius: var(--#{$prefix}btn-border-radius);
+      transition: $base-btn-transition;
+
+      &:hover {
+        color: var(--#{$prefix}btn-hover-color);
+        background-color: var(--#{$prefix}btn-hover-bg);
+        border-color: var(--#{$prefix}btn-hover-border-color);
+      }
+
+      &:focus-visible {
+        outline: 0;
+        box-shadow: 0 0 0 .25rem var(--#{$prefix}focus-ring-color);
+      }
+
+      &:active {
+        color: var(--#{$prefix}btn-active-color);
+        background-color: var(--#{$prefix}btn-active-bg);
+        border-color: var(--#{$prefix}btn-active-border-color);
+      }
+
+      &:disabled {
+        color: var(--#{$prefix}btn-disabled-color);
+        pointer-events: none;
+        opacity: var(--#{$prefix}btn-disabled-opacity);
+      }
+    }
+
+    .btn-sm {
+      --#{$prefix}btn-padding-y: #{$base-btn-padding-y-sm};
+      --#{$prefix}btn-padding-x: #{$base-btn-padding-x-sm};
+      --#{$prefix}btn-font-size: #{$base-btn-font-size-sm};
+      --#{$prefix}btn-border-radius: var(--#{$prefix}border-radius-sm);
+    }
+
+    .btn-primary {
+      --#{$prefix}btn-color: #fff;
+      --#{$prefix}btn-bg: var(--#{$prefix}primary);
+      --#{$prefix}btn-border-color: var(--#{$prefix}primary);
+      --#{$prefix}btn-hover-color: #fff;
+      --#{$prefix}btn-hover-bg: color-mix(in srgb, var(--#{$prefix}primary) 85%, #000);
+      --#{$prefix}btn-hover-border-color: color-mix(in srgb, var(--#{$prefix}primary) 80%, #000);
+    }
+
+    .btn-outline-secondary {
+      --#{$prefix}btn-color: var(--#{$prefix}secondary-color);
+      --#{$prefix}btn-border-color: var(--#{$prefix}border-color);
+      --#{$prefix}btn-hover-color: var(--#{$prefix}body-color);
+      --#{$prefix}btn-hover-bg: var(--#{$prefix}tertiary-bg);
+      --#{$prefix}btn-hover-border-color: var(--#{$prefix}border-color);
+    }
+
+    .btn-ghost {
+      --#{$prefix}btn-color: var(--#{$prefix}body-color);
+      --#{$prefix}btn-hover-color: var(--#{$prefix}body-color);
+      --#{$prefix}btn-hover-bg: var(--#{$prefix}tertiary-bg);
+      --#{$prefix}btn-active-bg: var(--#{$prefix}secondary-bg);
+    }
+
+    .btn-link {
+      --#{$prefix}btn-color: var(--#{$prefix}link-color);
+      --#{$prefix}btn-hover-color: var(--#{$prefix}link-hover-color);
+
+      text-decoration: underline;
+    }
+  }
+}

package/scss/base/_forms.scss

@@ -0,0 +1,157 @@
+@use "../config" as *;
+
+// scss-docs-start base-form-variables
+$base-input-padding-y:      .375rem !default;
+$base-input-padding-x:      .75rem !default;
+$base-input-font-size:      1rem !default;
+$base-input-padding-y-sm:   .25rem !default;
+$base-input-padding-x-sm:   .5rem !default;
+$base-input-font-size-sm:   .875rem !default;
+$base-input-transition:     border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+$base-form-select-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23323a49' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !default;
+$base-form-select-indicator-dark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !default;
+$base-form-check-input-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='rgba%28255, 255, 255, 0.87%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !default;
+$base-form-check-radio-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='rgba%28255, 255, 255, 0.87%29'/%3e%3c/svg%3e") !default;
+$base-form-check-indeterminate-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='rgba%28255, 255, 255, 0.87%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e") !default;
+// scss-docs-end base-form-variables
+
+@layer #{$base-layer} {
+  .data-grid {
+    .form-control,
+    .form-select {
+      display: block;
+      width: 100%;
+      padding: $base-input-padding-y $base-input-padding-x;
+      font-size: $base-input-font-size;
+      font-weight: 400;
+      line-height: 1.5;
+      color: var(--#{$prefix}body-color);
+      appearance: none;
+      background-color: var(--#{$prefix}body-bg);
+      background-clip: padding-box;
+      border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+      border-radius: var(--#{$prefix}border-radius);
+      transition: $base-input-transition;
+
+      &:focus {
+        outline: 0;
+        box-shadow: 0 0 0 .25rem var(--#{$prefix}focus-ring-color);
+      }
+
+      &:disabled {
+        background-color: var(--#{$prefix}secondary-bg);
+        opacity: 1;
+      }
+
+      &::placeholder {
+        color: var(--#{$prefix}secondary-color);
+        opacity: 1;
+      }
+    }
+
+    .form-select {
+      padding-inline-end: 2.25rem;
+      background-image: $base-form-select-indicator;
+      background-repeat: no-repeat;
+      background-position: right .75rem center;
+      background-size: 16px 12px;
+    }
+
+    .form-control-sm,
+    .form-select-sm {
+      padding: $base-input-padding-y-sm $base-input-padding-x-sm;
+      font-size: $base-input-font-size-sm;
+      border-radius: var(--#{$prefix}border-radius-sm);
+    }
+
+    .form-select-sm {
+      padding-inline-end: 2.25rem;
+    }
+
+    .form-control.is-invalid {
+      border-color: var(--#{$prefix}danger);
+    }
+
+    .form-check {
+      display: block;
+      min-height: 1.5rem;
+      padding-inline-start: 1.5em;
+      margin-bottom: .125rem;
+    }
+
+    .form-check .form-check-input {
+      float: left;
+      margin-inline-start: -1.5em;
+    }
+
+    .form-check-input {
+      --#{$prefix}form-check-bg: var(--#{$prefix}body-bg);
+
+      flex-shrink: 0;
+      width: 1em;
+      height: 1em;
+      margin-top: .25em;
+      vertical-align: top;
+      appearance: none;
+      background-color: var(--#{$prefix}form-check-bg);
+      background-image: var(--#{$prefix}form-check-bg-image);
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+      border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+      print-color-adjust: exact;
+
+      &[type="checkbox"] {
+        border-radius: .25em;
+      }
+
+      &[type="radio"] {
+        border-radius: 50%;
+      }
+
+      &:focus {
+        outline: 0;
+        box-shadow: 0 0 0 .25rem var(--#{$prefix}focus-ring-color);
+      }
+
+      &:checked {
+        background-color: var(--#{$prefix}primary);
+        border-color: var(--#{$prefix}primary);
+      }
+
+      &:checked[type="checkbox"] {
+        --#{$prefix}form-check-bg-image: #{$base-form-check-input-checked-bg-image};
+      }
+
+      &:checked[type="radio"] {
+        --#{$prefix}form-check-bg-image: #{$base-form-check-radio-checked-bg-image};
+      }
+
+      &[type="checkbox"]:indeterminate {
+        --#{$prefix}form-check-bg-image: #{$base-form-check-indeterminate-bg-image};
+
+        background-color: var(--#{$prefix}primary);
+        border-color: var(--#{$prefix}primary);
+      }
+
+      &:disabled {
+        pointer-events: none;
+        filter: none;
+        opacity: .5;
+      }
+    }
+
+    .form-check-label {
+      cursor: pointer;
+    }
+
+    .form-check-input:disabled ~ .form-check-label {
+      cursor: default;
+      opacity: .5;
+    }
+  }
+
+  [data-coreui-theme="dark"] .data-grid .form-select {
+    background-image: $base-form-select-indicator-dark;
+  }
+}

package/scss/base/_helpers.scss

@@ -0,0 +1,24 @@
+@use "../config" as *;
+
+// `!important` declarations invert the layer order — a layered `!important`
+// beats an unlayered one — so this block wins even when CoreUI is loaded.
+// It is byte-for-byte the same rule, so that costs nothing.
+
+@layer #{$base-layer} {
+  .data-grid {
+    .visually-hidden:not(caption) {
+      position: absolute !important;
+    }
+
+    .visually-hidden {
+      width: 1px !important;
+      height: 1px !important;
+      padding: 0 !important;
+      margin: -1px !important;
+      overflow: hidden !important;
+      clip: rect(0, 0, 0, 0) !important;
+      white-space: nowrap !important;
+      border: 0 !important;
+    }
+  }
+}

package/scss/base/_pagination.scss

@@ -0,0 +1,100 @@
+@use "../config" as *;
+
+// scss-docs-start base-pagination-variables
+$base-pagination-padding-y:    .375rem !default;
+$base-pagination-padding-x:    .75rem !default;
+$base-pagination-padding-y-sm: .25rem !default;
+$base-pagination-padding-x-sm: .5rem !default;
+$base-pagination-font-size-sm: .875rem !default;
+$base-pagination-transition:   color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+// scss-docs-end base-pagination-variables
+
+@layer #{$base-layer} {
+  .data-grid {
+    .pagination {
+      --#{$prefix}pagination-padding-x: #{$base-pagination-padding-x};
+      --#{$prefix}pagination-padding-y: #{$base-pagination-padding-y};
+      --#{$prefix}pagination-font-size: 1rem;
+      --#{$prefix}pagination-color: var(--#{$prefix}link-color);
+      --#{$prefix}pagination-bg: var(--#{$prefix}body-bg);
+      --#{$prefix}pagination-border-width: var(--#{$prefix}border-width);
+      --#{$prefix}pagination-border-color: var(--#{$prefix}border-color);
+      --#{$prefix}pagination-border-radius: var(--#{$prefix}border-radius);
+      --#{$prefix}pagination-hover-color: var(--#{$prefix}link-hover-color);
+      --#{$prefix}pagination-hover-bg: var(--#{$prefix}tertiary-bg);
+      --#{$prefix}pagination-hover-border-color: var(--#{$prefix}border-color);
+      --#{$prefix}pagination-active-color: #fff;
+      --#{$prefix}pagination-active-bg: var(--#{$prefix}primary);
+      --#{$prefix}pagination-active-border-color: var(--#{$prefix}primary);
+      --#{$prefix}pagination-disabled-color: var(--#{$prefix}secondary-color);
+      --#{$prefix}pagination-disabled-bg: var(--#{$prefix}secondary-bg);
+      --#{$prefix}pagination-disabled-border-color: var(--#{$prefix}border-color);
+
+      display: flex;
+      padding-left: 0;
+      margin-bottom: 1rem;
+      list-style: none;
+    }
+
+    .page-link {
+      position: relative;
+      display: block;
+      padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
+      font-size: var(--#{$prefix}pagination-font-size);
+      color: var(--#{$prefix}pagination-color);
+      text-decoration: none;
+      cursor: pointer;
+      background-color: var(--#{$prefix}pagination-bg);
+      border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
+      transition: $base-pagination-transition;
+
+      &:hover {
+        z-index: 2;
+        color: var(--#{$prefix}pagination-hover-color);
+        background-color: var(--#{$prefix}pagination-hover-bg);
+        border-color: var(--#{$prefix}pagination-hover-border-color);
+      }
+
+      &:focus-visible {
+        z-index: 3;
+        outline: 0;
+        box-shadow: 0 0 0 .25rem var(--#{$prefix}focus-ring-color);
+      }
+    }
+
+    .page-item:not(:first-child) .page-link {
+      margin-left: calc(-1 * var(--#{$prefix}border-width));
+    }
+
+    .page-item:first-child .page-link {
+      border-top-left-radius: var(--#{$prefix}pagination-border-radius);
+      border-bottom-left-radius: var(--#{$prefix}pagination-border-radius);
+    }
+
+    .page-item:last-child .page-link {
+      border-top-right-radius: var(--#{$prefix}pagination-border-radius);
+      border-bottom-right-radius: var(--#{$prefix}pagination-border-radius);
+    }
+
+    .page-item.active .page-link {
+      z-index: 3;
+      color: var(--#{$prefix}pagination-active-color);
+      background-color: var(--#{$prefix}pagination-active-bg);
+      border-color: var(--#{$prefix}pagination-active-border-color);
+    }
+
+    .page-item.disabled .page-link {
+      color: var(--#{$prefix}pagination-disabled-color);
+      pointer-events: none;
+      background-color: var(--#{$prefix}pagination-disabled-bg);
+      border-color: var(--#{$prefix}pagination-disabled-border-color);
+    }
+
+    .pagination-sm {
+      --#{$prefix}pagination-padding-x: #{$base-pagination-padding-x-sm};
+      --#{$prefix}pagination-padding-y: #{$base-pagination-padding-y-sm};
+      --#{$prefix}pagination-font-size: #{$base-pagination-font-size-sm};
+      --#{$prefix}pagination-border-radius: var(--#{$prefix}border-radius-sm);
+    }
+  }
+}

package/scss/base/_reboot.scss

@@ -0,0 +1,93 @@
+@use "../config" as *;
+
+// The slice of CoreUI's reboot the grid actually relies on, scoped to the grid
+// so the sheet never restyles the host page.
+
+@layer #{$base-layer} {
+  .data-grid {
+    box-sizing: border-box;
+    font-family: var(--#{$prefix}body-font-family);
+    font-size: var(--#{$prefix}body-font-size);
+    font-weight: 400;
+    line-height: var(--#{$prefix}body-line-height);
+    color: var(--#{$prefix}body-color);
+    text-align: start;
+    background-color: var(--#{$prefix}body-bg);
+    -webkit-text-size-adjust: 100%;
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    table {
+      caption-side: bottom;
+      border-collapse: collapse;
+    }
+
+    th {
+      text-align: inherit;
+      text-align: -webkit-match-parent;
+    }
+
+    thead,
+    tbody,
+    tr,
+    td,
+    th {
+      border-color: inherit;
+      border-style: solid;
+      border-width: 0;
+    }
+
+    label {
+      display: inline-block;
+    }
+
+    button,
+    input,
+    optgroup,
+    select,
+    textarea {
+      margin: 0;
+      font-family: inherit;
+      font-size: inherit;
+      line-height: inherit;
+    }
+
+    button,
+    select {
+      text-transform: none;
+    }
+
+    button,
+    [type="button"],
+    [type="reset"],
+    [type="submit"] {
+      -webkit-appearance: button;
+    }
+
+    button:not(:disabled),
+    [type="button"]:not(:disabled),
+    [type="reset"]:not(:disabled),
+    [type="submit"]:not(:disabled) {
+      cursor: pointer;
+    }
+
+    ::-moz-focus-inner {
+      padding: 0;
+      border-style: none;
+    }
+
+    svg {
+      vertical-align: middle;
+    }
+
+    ul {
+      padding-left: 0;
+      margin-bottom: 0;
+      list-style: none;
+    }
+  }
+}

package/scss/base/_root.scss

@@ -0,0 +1,85 @@
+@use "../config" as *;
+
+// Semantic tokens the grid resolves against. Values mirror @coreui/coreui-pro 5.
+// They are emitted unlayered-free: any real CoreUI stylesheet (or app CSS)
+// declaring the same properties outside a layer takes precedence.
+
+// scss-docs-start base-root-variables
+$base-white:                #fff !default;
+$base-primary:              #5856d6 !default;
+$base-primary-rgb:          88, 86, 214 !default;
+$base-danger:               #e55353 !default;
+$base-body-color:           rgba(37, 42.92, 54.02, .95) !default;
+$base-body-bg:              #fff !default;
+$base-body-bg-rgb:          255, 255, 255 !default;
+$base-emphasis-color:       #080a0c !default;
+$base-emphasis-color-rgb:   8, 10, 12 !default;
+$base-secondary-color:      rgba(37, 42.92, 54.02, .681) !default;
+$base-secondary-bg:         #e7eaee !default;
+$base-tertiary-bg:          #f3f4f7 !default;
+$base-border-color:         #dbdfe6 !default;
+$base-link-color:           #5856d6 !default;
+$base-link-hover-color:     #4645ab !default;
+// scss-docs-end base-root-variables
+
+// scss-docs-start base-root-dark-variables
+$base-body-color-dark:      rgba(255, 255, 255, .87) !default;
+$base-body-bg-dark:         #212631 !default;
+$base-body-bg-rgb-dark:     33, 38, 49 !default;
+$base-emphasis-color-dark:  #fff !default;
+$base-emphasis-color-rgb-dark: 255, 255, 255 !default;
+$base-secondary-color-dark: rgba(255, 255, 255, .6) !default;
+$base-secondary-bg-dark:    #323a49 !default;
+$base-tertiary-bg-dark:     rgb(41.5, 48, 61) !default;
+$base-border-color-dark:    #4a566d !default;
+$base-primary-dark:         rgb(94.2, 92.4, 207.6) !default;
+$base-link-color-dark:      rgb(151.2, 150, 226.8) !default;
+$base-link-hover-color-dark: rgb(171.36, 170.4, 233.04) !default;
+// scss-docs-end base-root-dark-variables
+
+@layer #{$base-layer} {
+  :root {
+    color-scheme: light;
+
+    --#{$prefix}white: #{$base-white};
+    --#{$prefix}primary: #{$base-primary};
+    --#{$prefix}primary-rgb: #{$base-primary-rgb};
+    --#{$prefix}danger: #{$base-danger};
+    --#{$prefix}body-font-family: system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
+    --#{$prefix}body-font-size: 1rem;
+    --#{$prefix}body-line-height: 1.5;
+    --#{$prefix}body-color: #{$base-body-color};
+    --#{$prefix}body-bg: #{$base-body-bg};
+    --#{$prefix}body-bg-rgb: #{$base-body-bg-rgb};
+    --#{$prefix}emphasis-color: #{$base-emphasis-color};
+    --#{$prefix}emphasis-color-rgb: #{$base-emphasis-color-rgb};
+    --#{$prefix}secondary-color: #{$base-secondary-color};
+    --#{$prefix}secondary-bg: #{$base-secondary-bg};
+    --#{$prefix}tertiary-bg: #{$base-tertiary-bg};
+    --#{$prefix}border-width: 1px;
+    --#{$prefix}border-color: #{$base-border-color};
+    --#{$prefix}border-radius: .375rem;
+    --#{$prefix}border-radius-sm: .25rem;
+    --#{$prefix}box-shadow: 0 .5rem 1rem rgba(8, 10, 12, .15);
+    --#{$prefix}focus-ring-color: rgba(#{$base-primary-rgb}, .25);
+    --#{$prefix}link-color: #{$base-link-color};
+    --#{$prefix}link-hover-color: #{$base-link-hover-color};
+  }
+
+  [data-coreui-theme="dark"] {
+    color-scheme: dark;
+
+    --#{$prefix}body-color: #{$base-body-color-dark};
+    --#{$prefix}body-bg: #{$base-body-bg-dark};
+    --#{$prefix}body-bg-rgb: #{$base-body-bg-rgb-dark};
+    --#{$prefix}emphasis-color: #{$base-emphasis-color-dark};
+    --#{$prefix}emphasis-color-rgb: #{$base-emphasis-color-rgb-dark};
+    --#{$prefix}secondary-color: #{$base-secondary-color-dark};
+    --#{$prefix}secondary-bg: #{$base-secondary-bg-dark};
+    --#{$prefix}tertiary-bg: #{$base-tertiary-bg-dark};
+    --#{$prefix}border-color: #{$base-border-color-dark};
+    --#{$prefix}primary: #{$base-primary-dark};
+    --#{$prefix}link-color: #{$base-link-color-dark};
+    --#{$prefix}link-hover-color: #{$base-link-hover-color-dark};
+  }
+}

package/scss/base/_spinner.scss

@@ -0,0 +1,45 @@
+@use "../config" as *;
+
+// scss-docs-start base-spinner-variables
+$base-spinner-width:           2rem !default;
+$base-spinner-height:          $base-spinner-width !default;
+$base-spinner-border-width:    .25em !default;
+$base-spinner-animation-speed: .75s !default;
+// scss-docs-end base-spinner-variables
+
+@layer #{$base-layer} {
+  .data-grid {
+    .spinner-border {
+      --#{$prefix}spinner-width: #{$base-spinner-width};
+      --#{$prefix}spinner-height: #{$base-spinner-height};
+      --#{$prefix}spinner-vertical-align: -.125em;
+      --#{$prefix}spinner-border-width: #{$base-spinner-border-width};
+      --#{$prefix}spinner-animation-speed: #{$base-spinner-animation-speed};
+      --#{$prefix}spinner-animation-name: data-grid-spinner-border;
+
+      display: inline-block;
+      flex-shrink: 0;
+      width: var(--#{$prefix}spinner-width);
+      height: var(--#{$prefix}spinner-height);
+      vertical-align: var(--#{$prefix}spinner-vertical-align);
+      border: var(--#{$prefix}spinner-border-width) solid currentcolor;
+      border-right-color: transparent;
+      border-radius: 50%;
+      animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name);
+    }
+
+    .spinner-border-sm {
+      --#{$prefix}spinner-width: 1rem;
+      --#{$prefix}spinner-height: 1rem;
+      --#{$prefix}spinner-border-width: .2em;
+    }
+  }
+}
+
+// Keyframes cannot be scoped; the name is namespaced instead so it can never
+// collide with the host page's own animations.
+@keyframes data-grid-spinner-border {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/scss/base/_table.scss

@@ -0,0 +1,78 @@
+@use "../config" as *;
+
+// scss-docs-start base-table-variables
+$base-table-cell-padding-y: .5rem !default;
+$base-table-cell-padding-x: .5rem !default;
+$base-table-striped-factor: .05 !default;
+$base-table-active-factor:  .1 !default;
+$base-table-hover-factor:   .075 !default;
+// scss-docs-end base-table-variables
+
+@layer #{$base-layer} {
+  .data-grid {
+    .table {
+      --#{$prefix}table-color-type: initial;
+      --#{$prefix}table-bg-type: initial;
+      --#{$prefix}table-color-state: initial;
+      --#{$prefix}table-bg-state: initial;
+      --#{$prefix}table-color: var(--#{$prefix}emphasis-color);
+      --#{$prefix}table-bg: var(--#{$prefix}body-bg);
+      --#{$prefix}table-border-color: var(--#{$prefix}border-color);
+      --#{$prefix}table-accent-bg: transparent;
+      --#{$prefix}table-striped-color: var(--#{$prefix}emphasis-color);
+      --#{$prefix}table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), #{$base-table-striped-factor});
+      --#{$prefix}table-active-color: var(--#{$prefix}emphasis-color);
+      --#{$prefix}table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), #{$base-table-active-factor});
+      --#{$prefix}table-hover-color: var(--#{$prefix}emphasis-color);
+      --#{$prefix}table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), #{$base-table-hover-factor});
+
+      width: 100%;
+      margin-bottom: 1rem;
+      vertical-align: top;
+      border-color: var(--#{$prefix}table-border-color);
+
+      > :not(caption) > * > * {
+        padding: $base-table-cell-padding-y $base-table-cell-padding-x;
+        color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
+        background-color: var(--#{$prefix}table-bg);
+        border-bottom-width: var(--#{$prefix}border-width);
+        box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
+      }
+
+      > tbody {
+        vertical-align: inherit;
+      }
+
+      > thead {
+        vertical-align: bottom;
+      }
+    }
+
+    .table-sm > :not(caption) > * > * {
+      padding: .25rem .25rem;
+    }
+
+    .table-bordered > :not(caption) > * > * {
+      border-width: var(--#{$prefix}border-width) 0;
+    }
+
+    .table-borderless > :not(caption) > * > * {
+      border-bottom-width: 0;
+    }
+
+    .table-striped > tbody > tr:nth-of-type(odd) > * {
+      --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
+      --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
+    }
+
+    .table-hover > tbody > tr:hover > * {
+      --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
+      --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
+    }
+
+    .table-active {
+      --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
+      --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
+    }
+  }
+}