@lmfaole/basics 0.2.1 → 0.4.0

package/README.md

@@ -1,6 +1,6 @@
 # `@lmfaole/basics`
 
-Simple unstyled custom elements and DOM helpers.
+Simple custom elements and DOM helpers, with optional starter styles.
 
 ## Install
 
@@ -8,6 +8,38 @@ Simple unstyled custom elements and DOM helpers.
 pnpm add @lmfaole/basics
 ```
 
+## Optional Styling
+
+Import the full starter layer:
+
+```css
+@import "@lmfaole/basics/basic-styling";
+```
+
+Or split it into the global layer and component styles:
+
+```css
+@import "@lmfaole/basics/basic-styling/global.css";
+@import "@lmfaole/basics/basic-styling/components.css";
+```
+
+Individual token and component files are also exported:
+
+- `@lmfaole/basics/basic-styling/tokens/base.css`
+- `@lmfaole/basics/basic-styling/tokens/palette.css`
+- `@lmfaole/basics/basic-styling/tokens/palette.tokens.json`
+- `@lmfaole/basics/basic-styling/components/basic-alert.css`
+- `@lmfaole/basics/basic-styling/components/basic-accordion.css`
+- `@lmfaole/basics/basic-styling/components/basic-dialog.css`
+- `@lmfaole/basics/basic-styling/components/basic-popover.css`
+- `@lmfaole/basics/basic-styling/components/basic-summary-table.css`
+- `@lmfaole/basics/basic-styling/components/basic-table.css`
+- `@lmfaole/basics/basic-styling/components/basic-tabs.css`
+- `@lmfaole/basics/basic-styling/components/basic-toc.css`
+- `@lmfaole/basics/basic-styling/components/basic-toast.css`
+
+The core components remain unstyled by default. The `basic-styling` subpath is optional and meant as a very simple token-based baseline that focuses on spacing, padding, and margins first. The shared token sources live under `basic-styling/tokens/`, while the component-specific styles live under `basic-styling/components/`. `base.css` defines the non-color primitives, `palette.css` holds the computed color tokens and alternate palettes that the global layer consumes, and `palette.tokens.json` exposes the same palette data in W3C design-token format.
+
 ## Storybook
 
 ```sh
@@ -27,6 +59,11 @@ pnpm test:storybook:coverage
 ```
 
 Autodocs is enabled globally for the package stories, and the Docs page includes Storybook's built-in Code panel for rendered examples.
+Use the `Styling` toolbar control in Storybook to toggle the optional `basic-styling` layer on or off across all stories.
+Use the `Theme` toolbar control to preview the starter styling in light, dark, or system mode through the CSS `light-dark()` tokens.
+Use the `Palette` toolbar control to swap the computed starter palettes between `slate`, `sand`, `ocean`, and `berry`.
+The `Techniques/Color` stories show how to force a local `color-scheme`, scope a different palette with `data-basic-palette`, and override the semantic `--basic-color-*` tokens for one section.
+The `Overview/Palette Tokens` docs page renders the exported token values with Storybook's built-in `ColorPalette` and `ColorItem` blocks.
 Storybook Test coverage is enabled through the Vitest addon. In the Storybook UI, turn coverage on in the testing panel to see the summary and open the full report at `/coverage/index.html`. From the CLI, `test:storybook:coverage` writes reports to `coverage/storybook/`.
 
 The Visual Tests panel is provided by `@chromatic-com/storybook`. To run cloud visual checks, connect the addon to a Chromatic project from the Storybook UI.
@@ -65,6 +102,86 @@ If a release needs to be retried after the workflow changes land, use the `Relea
 
 Use Conventional Commits for commit messages and pull request titles. The GitHub workflow accepts `build`, `chore`, `ci`, `docs`, `feat`, `fix`, `perf`, `refactor`, `revert`, `style`, and `test`, with an optional scope such as `feat(tabs): add keyboard support`.
 
+## Basic Alert
+
+```html
+<basic-alert data-label="Lagring fullfort" data-live="polite">
+  <h2 data-alert-title>Endringer lagret</h2>
+  <p>Meldingen ble lagret uten feil.</p>
+  <button type="button" data-alert-close>Dismiss</button>
+</basic-alert>
+
+<script type="module">
+  import "@lmfaole/basics/components/basic-alert/register";
+</script>
+```
+
+The element upgrades inline content into a named live-region alert without adding any styles of its own.
+
+### Attributes
+
+- `data-label`: fallback accessible name when the alert has no `aria-label`, `aria-labelledby`, or `[data-alert-title]`.
+- `data-live`: chooses the live-region mode. Use `assertive` for `role="alert"` or `polite` for `role="status"`.
+
+### Behavior
+
+- Applies the matching live-region role, `aria-live`, and `aria-atomic="true"` on the root element.
+- Uses `[data-alert-title]` as the accessible name when present, otherwise falls back to `data-label`.
+- `[data-alert-close]` controls hide the alert and remove its managed `data-open` state.
+- `show()` and `hide()` methods can be used for programmatic visibility changes.
+
+### Markup Contract
+
+- Put the content directly inside `<basic-alert>`.
+- Use `[data-alert-title]` when the alert should have a visible accessible name.
+- Use `[data-alert-close]` when the alert should be dismissible.
+- Keep layout and styling outside the package; the component only manages semantics and simple dismissal behavior.
+
+## Basic Toast
+
+```html
+<basic-toast data-label="Lagring fullfort" data-duration="5000">
+  <button type="button" data-toast-open>Show toast</button>
+
+  <section data-toast-panel>
+    <h2 data-toast-title>Lagret</h2>
+    <p>Meldingen ble lagret uten feil.</p>
+    <button type="button" data-toast-close>Dismiss</button>
+  </section>
+</basic-toast>
+
+<script type="module">
+  import "@lmfaole/basics/components/basic-toast/register";
+</script>
+```
+
+The element upgrades trigger-and-panel markup into a toast notification flow without adding any styles of its own.
+
+### Attributes
+
+- `data-label`: fallback accessible name when the toast panel has no `aria-label`, `aria-labelledby`, or `[data-toast-title]`.
+- `data-live`: chooses the live-region mode. Use `polite` for `role="status"` or `assertive` for `role="alert"`.
+- `data-duration`: auto-dismiss timeout in milliseconds. Use `0` to disable auto-dismiss.
+- `data-open`: optional initial open state for the toast panel.
+
+### Behavior
+
+- Uses the Popover API in manual mode when available so the toast panel can render in the top layer.
+- Syncs the panel's open state, `hidden`, and `data-open` on the toast panel and root element.
+- Uses `[data-toast-title]` as the accessible name when present, otherwise falls back to `data-label`.
+- `[data-toast-open]` toggles the toast, while `[data-toast-close]` dismisses it.
+- Auto-dismisses after `data-duration` milliseconds unless the duration is `0`.
+- `show()`, `hide()`, and `toggle()` methods support programmatic control.
+
+### Markup Contract
+
+- Provide one descendant `[data-toast-panel]`.
+- Use `[data-toast-open]` on buttons that should show or toggle the toast.
+- Use `[data-toast-close]` when the toast should expose an explicit dismiss action.
+- Use `[data-toast-title]` when the toast should have a visible accessible name.
+- When using the optional starter styling, set `data-toast-position` to presets such as `top-right`, `bottom-center`, or `center` to move the top-layer toast around the viewport.
+- Keep layout and styling outside the package; the component only manages semantics, open state, and optional auto-dismiss behavior.
+
 ## Basic Popover
 
 ```html
@@ -156,15 +273,15 @@ The element upgrades native `<dialog>` markup into an accessible modal flow with
 
 ```html
 <basic-accordion>
-  <h3><button type="button" data-accordion-trigger>Oversikt</button></h3>
-  <section data-accordion-panel>
+  <details open>
+    <summary>Oversikt</summary>
     <p>Viser en kort oppsummering.</p>
-  </section>
+  </details>
 
-  <h3><button type="button" data-accordion-trigger>Implementasjon</button></h3>
-  <section data-accordion-panel>
+  <details>
+    <summary>Implementasjon</summary>
     <p>Viser implementasjonsdetaljer.</p>
-  </section>
+  </details>
 </basic-accordion>
 
 <script type="module">
@@ -172,26 +289,27 @@ The element upgrades native `<dialog>` markup into an accessible modal flow with
 </script>
 ```
 
-The element upgrades existing trigger-and-panel markup into an accessible accordion without adding any styles of its own.
+The element coordinates direct child `details` items into an accordion without adding any styles of its own.
 
 ### Attributes
 
-- `data-multiple`: allows multiple panels to stay open at the same time.
-- `data-collapsible`: allows the last open panel in single mode to close.
+- `data-multiple`: allows multiple items to stay open at the same time.
+- `data-collapsible`: allows the last open item in single mode to close.
 
-### Behavior
+### Markup Contract
 
-- Missing trigger and panel ids are generated automatically.
-- `aria-expanded`, `aria-controls`, `aria-labelledby`, `hidden`, and `data-open` stay in sync with the current state.
-- `ArrowUp`, `ArrowDown`, `Home`, and `End` move focus between enabled triggers.
-- `Enter` and `Space` toggle the focused item.
-- Disabled triggers are skipped during keyboard navigation.
+- Provide direct child `<details>` items, each with a first-child `<summary>`.
+- Add `open` to any item that should start expanded.
+- Add `data-disabled` to a `<details>` item when it should be skipped by arrow-key navigation and blocked from toggling.
+- Keep layout and styling outside the package; the component only manages root-level open-state rules and keyboard behavior.
 
-### Markup Contract
+### Behavior
 
-- Provide matching counts of `[data-accordion-trigger]` and `[data-accordion-panel]` descendants in the same order.
-- Prefer `<button>` elements for triggers, usually inside your own heading elements.
-- Keep layout and styling outside the package; the component only manages semantics, state, and keyboard behavior.
+- Native `details` and `summary` semantics are preserved.
+- `data-open` stays in sync with the normalized open state for optional styling hooks.
+- `ArrowUp`, `ArrowDown`, `Home`, and `End` move focus between enabled summaries.
+- `Enter` and `Space` keep using the platform's native `summary` toggle behavior.
+- In single-open mode, the component keeps one enabled item open unless `data-collapsible` is set.
 
 ## Basic Tabs
 
@@ -224,7 +342,6 @@ The element upgrades existing markup into an accessible tab interface without ad
 ### Attributes
 
 - `data-label`: sets the generated tablist's accessible name when the tablist does not already have `aria-label` or `aria-labelledby`. Defaults to `Faner`.
-- `data-orientation`: sets arrow-key behavior and mirrors `aria-orientation` on the tablist. Supported values are `horizontal` and `vertical`.
 - `data-activation`: chooses whether arrow-key focus changes also activate the panel. Supported values are `automatic` and `manual`.
 - `data-selected-index`: sets the initially selected tab by zero-based index. Defaults to the first enabled tab.
 
@@ -232,7 +349,7 @@ The element upgrades existing markup into an accessible tab interface without ad
 
 - Missing tab and panel ids are generated automatically.
 - `aria-selected`, `aria-controls`, `aria-labelledby`, `hidden`, and `data-selected` stay in sync with the active tab.
-- Click, `Home`, `End`, and orientation-aware arrow keys move between tabs.
+- Click, `ArrowLeft`, `ArrowRight`, `Home`, and `End` move between tabs.
 - Disabled tabs are skipped during keyboard navigation.
 - In `manual` mode, arrow keys move focus and `Enter` or `Space` activates the focused tab.
 
@@ -243,6 +360,173 @@ The element upgrades existing markup into an accessible tab interface without ad
 - Prefer `<button>` elements for tabs so click and keyboard activation stay native.
 - Keep layout and styling outside the package; the component only manages semantics, state, and keyboard behavior.
 
+## Basic Table
+
+```html
+<basic-table
+  data-caption="Bemanning per sprint"
+  data-description="Viser team, lokasjon og ledig kapasitet per sprint."
+  data-row-headers
+  data-row-header-column="2"
+>
+  <table>
+    <thead>
+      <tr>
+        <th>Statuskode</th>
+        <th>Team</th>
+        <th>Lokasjon</th>
+        <th>Sprint</th>
+        <th>Ledige timer</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>A1</td>
+        <td>Plattform</td>
+        <td>Oslo</td>
+        <td>14</td>
+        <td>18</td>
+      </tr>
+      <tr>
+        <td>B4</td>
+        <td>Designsystem</td>
+        <td>Trondheim</td>
+        <td>14</td>
+        <td>10</td>
+      </tr>
+      <tr>
+        <td>C2</td>
+        <td>Innsikt</td>
+        <td>Bergen</td>
+        <td>15</td>
+        <td>26</td>
+      </tr>
+      <tr>
+        <td>D7</td>
+        <td>Betaling</td>
+        <td>Stockholm</td>
+        <td>15</td>
+        <td>8</td>
+      </tr>
+    </tbody>
+  </table>
+</basic-table>
+
+<script type="module">
+  import "@lmfaole/basics/components/basic-table/register";
+</script>
+```
+
+The element upgrades a regular table with stronger accessible naming and header associations without imposing any styles.
+
+### Attributes
+
+- `data-caption`: generates a visible `<caption>` when the wrapped table does not already define one.
+- `data-column-headers`: promotes the first row to column headers when the author provides a plain table without a header row.
+- `data-description`: generates a hidden description and connects it with `aria-describedby`.
+- `data-label`: sets a fallback accessible name when the table has no caption, `aria-label`, or `aria-labelledby`. Defaults to `Tabell`.
+- `data-row-header-column`: sets which one-based body column should become the generated row header. Defaults to `1`.
+- `data-row-headers`: enables generated row headers in body rows. If `data-row-header-column` is present, row-header mode is enabled automatically.
+
+### Behavior
+
+- Preserves author-provided captions and only generates one when needed.
+- Can generate hidden helper text for extra context without requiring a separate authored description element.
+- Can promote a plain first row to column headers when consumers start from simple body-only markup.
+- Infers common `scope` values for header cells and assigns missing header ids.
+- Populates each data cell's `headers` attribute from the matching row and column headers.
+- Re-runs automatically when the wrapped table changes.
+
+### Markup Contract
+
+- Provide one descendant `<table>` inside the custom element.
+- Use real table sections and header cells where possible; the component strengthens semantics but does not replace the HTML table model.
+- Add `data-row-headers` when one body column identifies each row, and use `data-row-header-column` when that column is not the first one.
+- Add `data-column-headers` when you want the component to promote a plain first row instead of authoring a header row yourself.
+- Keep layout and styling outside the package; the component only manages semantics and accessibility metadata.
+
+## Basic Summary Table
+
+```html
+<basic-summary-table
+  data-caption="Månedlig kostnadsoversikt"
+  data-description="Viser antall og summerte beløp for faste kostnader."
+  data-row-headers
+  data-summary-columns="2,4"
+  data-total-label="Totalt"
+  data-locale="nb-NO"
+>
+  <table>
+    <thead>
+      <tr>
+        <th>Post</th>
+        <th>Antall</th>
+        <th>Enhetspris</th>
+        <th>Beløp</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Basisabonnement</td>
+        <td>12</td>
+        <td>49,00 kr</td>
+        <td>588,00 kr</td>
+      </tr>
+      <tr>
+        <td>Supportavtale</td>
+        <td>1</td>
+        <td>299,00 kr</td>
+        <td>299,00 kr</td>
+      </tr>
+      <tr>
+        <td>Lagringstillegg</td>
+        <td>4</td>
+        <td>120,00 kr</td>
+        <td>480,00 kr</td>
+      </tr>
+      <tr>
+        <td>Opplæringsplasser</td>
+        <td>3</td>
+        <td>180,00 kr</td>
+        <td>540,00 kr</td>
+      </tr>
+    </tbody>
+  </table>
+</basic-summary-table>
+
+<script type="module">
+  import "@lmfaole/basics/components/basic-summary-table/register";
+</script>
+```
+
+The element upgrades a calculation-heavy table with an automatically maintained totals row in `<tfoot>`.
+
+### Attributes
+
+- `data-caption`: generates a visible `<caption>` when the wrapped table does not already define one.
+- `data-description`: generates hidden helper text and connects it with `aria-describedby`.
+- `data-label`: sets a fallback accessible name when the table has no caption, `aria-label`, or `aria-labelledby`. Defaults to `Tabell`.
+- `data-row-headers`: enables generated row headers in body rows.
+- `data-row-header-column`: sets which one-based body column should become the generated row header. Defaults to `1`.
+- `data-summary-columns`: chooses which one-based columns should be totalled in the generated footer row. If omitted, numeric body columns are inferred automatically.
+- `data-total-label`: sets the footer row label. Defaults to `Totalt`.
+- `data-locale`: passes a locale through to `Intl.NumberFormat` for generated footer totals.
+
+### Behavior
+
+- Inherits caption, description, row-header, and `headers` association behavior from `basic-table`.
+- Parses numbers from cell text and supports raw calculation values through `data-value` on individual body cells.
+- Generates or updates a totals row in `<tfoot>` without requiring consumers to author the footer manually.
+- Preserves a consistent displayed unit or currency affix such as `kr`, `%`, or `t` in generated footer totals.
+- Recalculates totals automatically when body rows or `data-value` attributes change.
+
+### Markup Contract
+
+- Provide one descendant `<table>` with line items in `<tbody>`.
+- Prefer a label column such as `Post` or `Kategori` and enable `data-row-headers` so each line item remains easy to navigate.
+- Use `data-value` on cells when the displayed text is formatted differently from the numeric value you want summed.
+- Keep layout and styling outside the package; the component only manages semantics, totals, and footer structure.
+
 ## Basic Toc
 
 ```html

package/basic-styling/components/basic-accordion.css

@@ -0,0 +1,65 @@
+basic-accordion {
+    --basic-accordion-padding: var(--basic-panel-padding);
+    display: grid;
+}
+
+basic-accordion > details {
+    margin: 0;
+    border: var(--basic-border-width) solid var(--basic-color-border);
+    border-radius: var(--basic-radius);
+    background: var(--basic-color-surface);
+}
+
+basic-accordion > details > summary {
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--basic-control-padding-block) var(--basic-control-padding-inline);
+    color: inherit;
+    font-weight: 600;
+    text-align: left;
+    cursor: pointer;
+}
+
+basic-accordion > details > summary::-webkit-details-marker {
+    display: none;
+}
+
+basic-accordion > details > summary::after {
+    content: "+";
+    flex: none;
+    color: var(--basic-color-text-muted);
+    font-size: var(--basic-font-size-title);
+    line-height: 1;
+}
+
+basic-accordion > details[open] > summary {
+    background: var(--basic-color-surface-muted);
+    margin-block-end: var(--basic-flow-space);
+}
+
+basic-accordion > details[open] > summary::after {
+    content: "-";
+    color: inherit;
+}
+
+basic-accordion > details[open] {
+    padding-block-end: var(--basic-accordion-padding);
+}
+
+basic-accordion > details > :where(:not(summary)) {
+    margin-block: 0;
+    margin-inline: var(--basic-accordion-padding);
+}
+
+basic-accordion > details > :not(summary) + :not(summary) {
+    margin-block-start: var(--basic-flow-space);
+}
+
+basic-accordion > details[data-disabled] > summary,
+basic-accordion > details[disabled] > summary,
+basic-accordion > details[aria-disabled="true"] > summary {
+    color: var(--basic-color-text-muted);
+    cursor: default;
+}

package/basic-styling/components/basic-alert.css

@@ -0,0 +1,27 @@
+basic-alert {
+    display: block;
+    padding: var(--basic-panel-padding);
+    border: var(--basic-border-width) solid var(--basic-color-border);
+    border-radius: var(--basic-radius);
+    background: var(--basic-color-surface-muted);
+}
+
+basic-alert > :where(*) {
+    margin-block: 0;
+}
+
+basic-alert > :where(* + *) {
+    margin-block-start: var(--basic-flow-space);
+}
+
+basic-alert [data-alert-close] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--basic-control-padding-block) var(--basic-control-padding-inline);
+    border: var(--basic-border-width) solid var(--basic-color-border);
+    border-radius: var(--basic-radius-pill);
+    background: var(--basic-color-surface);
+    color: inherit;
+    cursor: pointer;
+}

package/basic-styling/components/basic-dialog.css

@@ -0,0 +1,41 @@
+basic-dialog {
+    --basic-dialog-control-gap: var(--basic-space-2);
+    --basic-dialog-panel-gap: var(--basic-flow-space);
+    --basic-dialog-panel-padding: var(--basic-panel-padding);
+}
+
+basic-dialog [data-dialog-open],
+basic-dialog [data-dialog-close] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--basic-dialog-control-gap);
+    padding: var(--basic-control-padding-block) var(--basic-control-padding-inline);
+    border: var(--basic-border-width) solid var(--basic-color-border);
+    border-radius: var(--basic-radius-pill);
+    background: var(--basic-color-surface);
+    color: inherit;
+    cursor: pointer;
+}
+
+basic-dialog [data-dialog-panel] {
+    width: min(var(--basic-dialog-width, 32rem), var(--basic-dialog-max-width, calc(100vw - 2rem)));
+    max-width: var(--basic-dialog-max-width, calc(100vw - 2rem));
+    padding: var(--basic-dialog-panel-padding);
+    border: var(--basic-border-width) solid var(--basic-color-border);
+    border-radius: var(--basic-radius);
+    background: var(--basic-color-surface);
+}
+
+basic-dialog [data-dialog-panel] > :where(*) {
+    margin-block: 0;
+}
+
+basic-dialog [data-dialog-panel] > :where(* + *) {
+    margin-block-start: var(--basic-dialog-panel-gap);
+}
+
+basic-dialog [data-dialog-title] {
+    font-size: var(--basic-font-size-title);
+    line-height: 1.2;
+}

package/basic-styling/components/basic-popover.css

@@ -0,0 +1,54 @@
+basic-popover {
+    --basic-popover-control-gap: var(--basic-space-2);
+    --basic-popover-panel-gap: var(--basic-flow-space);
+    --basic-popover-panel-padding: var(--basic-panel-padding);
+    display: inline-block;
+}
+
+basic-popover [data-popover-open],
+basic-popover [data-popover-close] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--basic-popover-control-gap);
+    padding: var(--basic-control-padding-block) var(--basic-control-padding-inline);
+    border: var(--basic-border-width) solid var(--basic-color-border);
+    border-radius: var(--basic-radius-pill);
+    background: var(--basic-color-surface);
+    color: inherit;
+    cursor: pointer;
+}
+
+basic-popover [data-popover-open][aria-expanded="true"] {
+    background: var(--basic-color-surface-muted);
+}
+
+basic-popover [data-popover-panel] {
+    width: min(var(--basic-popover-width, 20rem), var(--basic-popover-max-width, calc(100vw - 2rem)));
+    max-width: var(--basic-popover-max-width, calc(100vw - 2rem));
+    padding: var(--basic-popover-panel-padding);
+    border: var(--basic-border-width) solid var(--basic-color-border);
+    border-radius: var(--basic-radius);
+    background: var(--basic-color-surface);
+    color: inherit;
+}
+
+basic-popover [data-popover-panel] > :where(*) {
+    margin-block: 0;
+}
+
+basic-popover [data-popover-panel] > :where(* + *) {
+    margin-block-start: var(--basic-popover-panel-gap);
+}
+
+basic-popover [data-popover-panel] label {
+    display: flex;
+    align-items: center;
+    gap: var(--basic-space-2);
+    color: var(--basic-color-text-muted);
+}
+
+basic-popover [data-popover-title] {
+    font-size: var(--basic-font-size-title);
+    line-height: 1.2;
+}

package/basic-styling/components/basic-summary-table.css

@@ -0,0 +1,76 @@
+basic-summary-table {
+    --basic-summary-table-caption-gap: var(--basic-flow-space);
+    --basic-summary-table-cell-padding-block: var(--basic-space-3);
+    --basic-summary-table-cell-padding-inline: var(--basic-space-4);
+
+    display: block;
+    overflow-x: auto;
+}
+
+basic-summary-table table {
+    width: 100%;
+    min-width: var(--basic-summary-table-min-width, 32rem);
+    border-collapse: collapse;
+    border: var(--basic-border-width) solid var(--basic-color-border);
+    background: var(--basic-color-surface);
+}
+
+basic-summary-table caption {
+    margin-bottom: var(--basic-summary-table-caption-gap);
+    color: var(--basic-color-text);
+    font-weight: 700;
+    text-align: left;
+}
+
+basic-summary-table tr {
+    text-align: right;
+
+    *:first-child {
+        text-align: left;
+    }
+}
+
+basic-summary-table th,
+basic-summary-table td {
+    padding: var(--basic-summary-table-cell-padding-block) var(--basic-summary-table-cell-padding-inline);
+    border-block-end: var(--basic-border-width) solid var(--basic-color-border);
+    vertical-align: top;
+}
+
+basic-summary-table td {
+    font-variant-numeric: tabular-nums;
+}
+
+basic-summary-table thead th {
+    background: var(--basic-color-surface-muted);
+    font-weight: 700;
+}
+
+basic-summary-table tbody tr:last-child th,
+basic-summary-table tbody tr:last-child td {
+    border-block-end: 0;
+}
+
+basic-summary-table tbody th {
+    font-weight: 600;
+}
+
+basic-summary-table tbody td {
+    color: var(--basic-color-text-muted);
+}
+
+basic-summary-table tfoot th,
+basic-summary-table tfoot td {
+    border-block-start: calc(var(--basic-border-width) * 2) solid var(--basic-color-border);
+    border-block-end: 0;
+    background: var(--basic-color-surface-muted);
+    font-weight: 700;
+}
+
+basic-summary-table tfoot td[data-summary-empty] {
+    color: var(--basic-color-text-muted);
+}
+
+basic-summary-table tfoot td[data-summary-total] {
+    color: inherit;
+}