@ds-mo/ui 13.11.0 → 13.12.0

package/dist/styles/table.css

@@ -0,0 +1,677 @@
+/*
+ * Renderer-neutral table recipe.
+ *
+ * Import `@ds-mo/ui/table.css` when product-owned native table markup needs
+ * the same visual primitives as `<ds-table>`. Selectors intentionally use
+ * zero specificity so applications can restyle any layer without fighting
+ * the recipe. The component consumes this exact source internally.
+ */
+
+:where(.ds-table) {
+  --_table-cell-track-min-block-size: calc(
+    var(--dimension-size-400) - var(--dimension-space-050)
+  );
+  --_table-cell-track-padding-inline: calc(
+    var(--dimension-space-075) - var(--dimension-space-025)
+  );
+  --_table-cell-track-label-inset: var(--dimension-space-025);
+  --_table-image-block-size: calc(
+    var(--dimension-size-800) - var(--dimension-space-150)
+  );
+  --_table-surface: var(--ds-table-surface, var(--color-background-primary));
+  --_table-header-surface: var(--ds-table-header-surface, var(--color-background-primary));
+  --_table-group-surface: var(--ds-table-group-surface, var(--color-background-faint-neutral));
+  --_table-row-hover: var(--ds-table-row-hover, var(--color-interaction-hover));
+  --_table-row-pressed: var(--ds-table-row-pressed, var(--color-interaction-pressed));
+  --_table-row-selected: var(--ds-table-row-selected, var(--color-interaction-active-brand));
+  --_table-border: var(--ds-table-border, var(--color-border-secondary));
+  --_table-column-border: var(--ds-table-column-border, var(--color-border-tertiary));
+  --_table-border-strong: var(--ds-table-border-strong, var(--color-border-secondary));
+  --_table-overflow-shadow: var(--ds-table-overflow-shadow, var(--color-border-secondary));
+  --_table-radius: var(--ds-table-radius, var(--dimension-radius-075));
+  --_table-header-min-block-size: var(
+    --ds-table-header-min-block-size,
+    var(--dimension-size-400)
+  );
+  --_table-row-min-block-size: var(
+    --ds-table-row-min-block-size,
+    var(--dimension-size-500)
+  );
+  --_table-cell-padding-block: var(
+    --ds-table-cell-padding-block,
+    var(--dimension-space-100)
+  );
+  --_table-cell-padding-inline: var(
+    --ds-table-cell-padding-inline,
+    var(--dimension-space-100)
+  );
+  --_table-selection-column-inline-size: var(
+    --ds-table-selection-column-inline-size,
+    var(--dimension-size-500)
+  );
+  --_table-selection-column-contribution: 0;
+  display: block;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  color: var(--color-foreground-primary);
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+:where(.ds-table__frame) {
+  position: relative;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  overflow: hidden;
+  border: var(--dimension-stroke-width-012) solid var(--_table-border-strong);
+  border-radius: var(--_table-radius);
+  background: var(--_table-surface);
+}
+
+:where(.ds-table__frame)::before,
+:where(.ds-table__frame)::after {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  z-index: 3;
+  inline-size: var(--dimension-space-200);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--effect-motion-short-2);
+}
+
+:where(.ds-table__frame)::before {
+  inset-inline-start: 0;
+  background: linear-gradient(to right, var(--_table-overflow-shadow), transparent);
+}
+
+:where(.ds-table__frame)::after {
+  inset-inline-end: 0;
+  background: linear-gradient(to left, var(--_table-overflow-shadow), transparent);
+}
+
+:where(.ds-table__frame--overflow-start)::before,
+:where(.ds-table__frame--overflow-end)::after {
+  opacity: var(--effect-opacity-low);
+}
+
+:where(.ds-table__viewport) {
+  box-sizing: border-box;
+  max-block-size: var(--ds-table-max-block-size, none);
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  outline: none;
+}
+
+:where(.ds-table__viewport:focus-visible) {
+  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);
+  outline-offset: calc(-1 * var(--dimension-stroke-width-025));
+}
+
+:where(.ds-table__table) {
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-inline-size: max(100%, var(--ds-table-explicit-min-inline-size, 0));
+  border: 0;
+  border-spacing: 0;
+  border-collapse: separate;
+  table-layout: fixed;
+  background: var(--_table-surface);
+  color: inherit;
+}
+
+:where(.ds-table__table--selectable) {
+  --_table-selection-column-contribution: var(--_table-selection-column-inline-size);
+  min-inline-size: max(
+    100%,
+    calc(var(--ds-table-explicit-min-inline-size, 0) + var(--_table-selection-column-contribution))
+  );
+}
+
+:where(.ds-table__caption) {
+  padding: var(--_table-cell-padding-inline);
+  border-block-end: var(--dimension-stroke-width-012) solid var(--_table-border);
+  background: var(--_table-surface);
+  text-align: start;
+}
+
+:where(.ds-table__selection-column) {
+  inline-size: var(--_table-selection-column-inline-size);
+}
+
+:where(.ds-table__head) {
+  position: relative;
+  z-index: 1;
+}
+
+:where(.ds-table--sticky-header .ds-table__head) {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 2;
+}
+
+:where(.ds-table__header-row) {
+  min-block-size: var(--_table-header-min-block-size);
+  background: var(--_table-header-surface);
+}
+
+:where(.ds-table__header-cell),
+:where(.ds-table__cell),
+:where(.ds-table__group-cell),
+:where(.ds-table__load-cell),
+:where(.ds-table__state-cell) {
+  box-sizing: border-box;
+  border: 0;
+  border-block-end: var(--dimension-stroke-width-012) solid var(--_table-border);
+  text-align: start;
+  vertical-align: middle;
+}
+
+:where(.ds-table__header-cell) {
+  min-block-size: calc(
+    var(--_table-header-min-block-size) - var(--dimension-space-100) - var(--dimension-space-100)
+  );
+  block-size: calc(
+    var(--_table-header-min-block-size) - var(--dimension-space-100) - var(--dimension-space-100)
+  );
+  padding: var(--dimension-space-100);
+  border-block-end: 0;
+  box-shadow: inset 0 calc(-1 * var(--dimension-stroke-width-012)) 0 var(--_table-border);
+  background: var(--_table-header-surface);
+  color: var(--color-foreground-secondary);
+}
+
+:where(.ds-table__cell) {
+  min-block-size: var(--_table-row-min-block-size);
+  block-size: var(--_table-row-min-block-size);
+  padding: var(--_table-cell-padding-block) var(--_table-cell-padding-inline);
+  border-block-end: 0;
+  background-color: inherit;
+  background-image: linear-gradient(var(--_table-border), var(--_table-border));
+  background-repeat: no-repeat;
+  background-position: bottom;
+  background-size: 100% var(--dimension-stroke-width-012);
+  vertical-align: top;
+}
+
+:where(.ds-table__header-cell + .ds-table__header-cell),
+:where(.ds-table__cell + .ds-table__cell) {
+  border-inline-start: var(--dimension-stroke-width-012) solid var(--_table-column-border);
+}
+
+:where(.ds-table__header-labels),
+:where(.ds-table__header-static),
+:where(.ds-table__header-label) {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  block-size: var(--dimension-size-200);
+  padding: 0;
+  color: inherit;
+  text-align: inherit;
+}
+
+:where(.ds-table__header-labels) {
+  flex: 0 1 auto;
+}
+
+:where(.ds-table__header-label) {
+  flex: 0 1 auto;
+  inline-size: fit-content;
+  padding-inline: var(--dimension-space-025);
+  color: var(--color-foreground-secondary);
+}
+
+:where(.ds-table__header-label[data-sort-active='true']) {
+  color: var(--color-foreground-primary);
+}
+
+:where(.ds-table__header-label-box) {
+  min-inline-size: 0;
+  padding-inline: var(--dimension-space-025);
+}
+
+:where(.ds-table__header-label--interactive) {
+  appearance: none;
+  border: 0;
+  border-radius: var(--dimension-radius-025);
+  background: transparent;
+  cursor: default;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  :where(.ds-table__header-label--interactive:hover) {
+    color: var(--color-foreground-primary);
+  }
+
+  :where(.ds-table__row:not(.ds-table__row--disabled):hover) {
+    background: var(--_table-row-hover);
+  }
+}
+
+:where(.ds-table__header-label--interactive:active) {
+  color: var(--color-foreground-primary);
+}
+
+:where(.ds-table__header-label--interactive:focus-visible),
+:where(.ds-table__selection-control:focus-visible) {
+  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);
+  outline-offset: calc(-1 * var(--dimension-stroke-width-025));
+}
+
+:where(.ds-table__header-content),
+:where(.ds-table__header-labels),
+:where(.ds-table__header-segment),
+:where(.ds-table__sort-slot),
+:where(.ds-table__group-content),
+:where(.ds-table__load-content) {
+  display: inline-flex;
+  align-items: center;
+  min-inline-size: 0;
+}
+
+:where(.ds-table__header-content) {
+  display: flex;
+  inline-size: 100%;
+  gap: var(--dimension-space-050);
+}
+
+:where(.ds-table__header-labels) {
+  max-inline-size: 100%;
+  gap: var(--dimension-space-025);
+}
+
+:where(.ds-table__header-segment) {
+  flex: 0 1 auto;
+  gap: var(--dimension-space-025);
+}
+
+:where(.ds-table__header-separator) {
+  flex: 0 0 auto;
+}
+
+:where(.ds-table__sort-slot) {
+  justify-content: center;
+  flex: 0 0 auto;
+  inline-size: var(--dimension-size-200);
+  block-size: var(--dimension-size-200);
+  margin-inline-start: auto;
+}
+
+:where(.ds-table__cell--align-center .ds-table__header-content) {
+  justify-content: center;
+}
+
+:where(.ds-table__cell--align-center .ds-table__sort-slot),
+:where(.ds-table__cell--align-end .ds-table__sort-slot) {
+  margin-inline-start: 0;
+}
+
+:where(.ds-table__cell--align-end .ds-table__header-labels) {
+  margin-inline-start: auto;
+}
+
+:where(.ds-table__cell-content),
+:where(.ds-table__cell-copy) {
+  display: flex;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+:where(.ds-table__cell-content) {
+  align-items: flex-start;
+  min-block-size: var(--_table-cell-track-min-block-size);
+}
+
+:where(.ds-table__cell-copy) {
+  flex: 1;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+:where(.ds-table__cell-track) {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  min-block-size: var(--_table-cell-track-min-block-size);
+}
+
+:where(.ds-table__cell-track--text) {
+  inline-size: 100%;
+  padding-inline: var(--_table-cell-track-label-inset);
+}
+
+:where(.ds-table__cell--text-single),
+:where(.ds-table__cell--text-multi),
+:where(.ds-table__cell--primary-text),
+:where(.ds-table__cell--empty),
+:where(.ds-table__cell--blank) {
+  padding: var(--dimension-space-125);
+}
+
+:where(.ds-table__cell--text-single .ds-table__cell-content),
+:where(.ds-table__cell--text-multi .ds-table__cell-content),
+:where(.ds-table__cell--primary-text .ds-table__cell-content),
+:where(.ds-table__cell--empty .ds-table__cell-content),
+:where(.ds-table__cell--blank .ds-table__cell-content),
+:where(.ds-table__cell--text-single .ds-table__cell-track),
+:where(.ds-table__cell--text-multi .ds-table__cell-track),
+:where(.ds-table__cell--primary-text .ds-table__cell-track),
+:where(.ds-table__cell--empty .ds-table__cell-track) {
+  min-block-size: 0;
+}
+
+:where(.ds-table__cell--text-multi .ds-table__cell-copy) {
+  gap: var(--dimension-space-050);
+}
+
+:where(.ds-table__cell--text-multi .ds-table__cell-secondary) {
+  padding-block: var(--dimension-space-025);
+}
+
+:where(.ds-table__cell--primary-text .ds-table__cell-secondary) {
+  padding-block: 0;
+}
+
+:where(.ds-table__cell--tag-tag-only),
+:where(.ds-table__cell--tag-tag-with-text) {
+  padding: var(--dimension-space-075);
+}
+
+:where(.ds-table__cell--tag-text-with-tag) {
+  padding: var(--dimension-space-125);
+}
+
+:where(.ds-table__cell-tag-stack) {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+:where(.ds-table__cell-tag-text) {
+  inline-size: 100%;
+}
+
+:where(.ds-table__cell-tag-stack--tag-with-text .ds-table__cell-tag-text) {
+  padding-inline: calc(
+    var(--_table-cell-track-padding-inline) + var(--_table-cell-track-label-inset)
+  );
+  padding-block: var(--dimension-space-025);
+  min-block-size: 0;
+}
+
+:where(.ds-table__cell-tag-stack--text-with-tag .ds-table__cell-tag-text) {
+  padding-inline: var(--_table-cell-track-label-inset);
+  min-block-size: 0;
+}
+
+:where(.ds-table__cell-tag-stack--text-with-tag) {
+  gap: var(--dimension-space-050);
+}
+
+:where(.ds-table__cell-tag-control-track) {
+  display: flex;
+  align-items: center;
+  min-block-size: var(--_table-cell-track-min-block-size);
+}
+
+:where(.ds-table__cell-tag-stack--text-with-tag .ds-table__cell-tag-control-track) {
+  min-block-size: 0;
+}
+
+:where(.ds-table__cell--icon) {
+  padding: var(--dimension-space-125);
+}
+
+:where(.ds-table__cell--icon .ds-table__cell-content) {
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  min-block-size: var(--dimension-iconography-md);
+}
+
+:where(.ds-table__cell--image) {
+  padding: var(--dimension-space-075);
+}
+
+:where(.ds-table__cell-image) {
+  display: block;
+  box-sizing: border-box;
+  flex: none;
+  block-size: var(--_table-image-block-size);
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);
+  border-radius: var(--dimension-radius-025);
+}
+
+:where(.ds-table__cell-image-content),
+:where(.ds-table__cell-image-placeholder) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+:where(.ds-table__cell-image-content) {
+  object-fit: cover;
+}
+
+:where(.ds-table__cell--action) {
+  padding: var(--dimension-space-100);
+}
+
+:where(.ds-table__cell--action .ds-table__cell-content) {
+  min-block-size: var(--dimension-size-300);
+}
+
+:where(.ds-table__cell-primary),
+:where(.ds-table__cell-secondary) {
+  min-inline-size: 0;
+}
+
+:where(.ds-table__cell-copy--wrap) {
+  overflow-wrap: anywhere;
+}
+
+:where(.ds-table__cell--align-center),
+:where(.ds-table__cell--align-center .ds-table__cell-content),
+:where(.ds-table__cell--align-center .ds-table__cell-track),
+:where(.ds-table__cell--align-center .ds-table__header-static),
+:where(.ds-table__cell--align-center .ds-table__header-labels),
+:where(.ds-table__cell--align-center .ds-table__header-label) {
+  text-align: center;
+  justify-content: center;
+}
+
+:where(.ds-table__cell--align-end),
+:where(.ds-table__cell--align-end .ds-table__cell-content),
+:where(.ds-table__cell--align-end .ds-table__cell-track),
+:where(.ds-table__cell--align-end .ds-table__header-static),
+:where(.ds-table__cell--align-end .ds-table__header-labels),
+:where(.ds-table__cell--align-end .ds-table__header-label) {
+  text-align: end;
+  justify-content: flex-end;
+}
+
+:where(.ds-table__body) {
+  background: var(--_table-surface);
+}
+
+:where(.ds-table__row) {
+  min-block-size: var(--_table-row-min-block-size);
+  background: var(--_table-surface);
+  transition: background-color var(--effect-motion-short-2);
+}
+
+:where(.ds-table__row:active:not(.ds-table__row--disabled)) {
+  background: var(--_table-row-pressed);
+}
+
+:where(.ds-table__row--selected) {
+  background: var(--_table-row-selected);
+}
+
+:where(.ds-table__row--disabled) {
+  color: var(--color-foreground-tertiary);
+  opacity: var(--effect-opacity-medium);
+}
+
+:where(.ds-table__selection-cell) {
+  inline-size: var(--_table-selection-column-inline-size);
+  padding: 0;
+  text-align: center;
+}
+
+:where(.ds-table__cell.ds-table__selection-cell) {
+  padding: var(--dimension-space-125);
+}
+
+:where(.ds-table__selection-control) {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-block-size: calc(
+    var(--_table-header-min-block-size) - var(--dimension-stroke-width-012)
+  );
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  cursor: default;
+  outline: none;
+}
+
+:where(.ds-table__cell.ds-table__selection-cell .ds-table__selection-control) {
+  inline-size: var(--dimension-iconography-md);
+  min-block-size: var(--dimension-iconography-md);
+  block-size: var(--dimension-iconography-md);
+}
+
+:where(.ds-table__selection-control:disabled) {
+  cursor: default;
+}
+
+:where(.ds-table__selection-control:disabled ds-checkbox) {
+  opacity: var(--effect-opacity-medium);
+}
+
+:where(.ds-table__group-cell) {
+  min-block-size: var(--_table-header-min-block-size);
+  padding: var(--dimension-space-075) var(--_table-cell-padding-inline);
+  background: var(--_table-group-surface);
+}
+
+:where(.ds-table__group-content) {
+  gap: var(--dimension-space-075);
+}
+
+:where(.ds-table__load-cell),
+:where(.ds-table__state-cell) {
+  padding: var(--dimension-space-200) var(--_table-cell-padding-inline);
+  background: var(--_table-surface);
+  text-align: center;
+}
+
+:where(.ds-table__load-content) {
+  justify-content: center;
+  gap: var(--dimension-space-100);
+}
+
+:where(.ds-table__load-content--error) {
+  flex-wrap: wrap;
+}
+
+:where(.ds-table__auto-sentinel) {
+  display: block;
+  min-block-size: var(--dimension-space-025);
+}
+
+:where(.ds-table__state-cell) {
+  block-size: calc(var(--dimension-size-800) * 2);
+}
+
+:where(.ds-table__skeleton-row) {
+  pointer-events: none;
+}
+
+:where(.ds-table__skeleton-row:last-child .ds-table__cell),
+:where(.ds-table__load-row:last-child .ds-table__load-cell),
+:where(.ds-table__state-row:last-child .ds-table__state-cell),
+:where(.ds-table__body:last-child .ds-table__row:last-child .ds-table__cell) {
+  border-block-end: 0;
+  background-image: none;
+}
+
+:where(.ds-visually-hidden) {
+  position: absolute;
+  inline-size: var(--dimension-stroke-width-012);
+  block-size: var(--dimension-stroke-width-012);
+  padding: 0;
+  margin: calc(-1 * var(--dimension-stroke-width-012));
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.ds-table__frame)::before,
+  :where(.ds-table__frame)::after,
+  :where(.ds-table__row) {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  :where(.ds-table) {
+    --_table-surface: var(--ds-forced-color-surface);
+    --_table-header-surface: var(--ds-forced-color-surface);
+    --_table-group-surface: var(--ds-forced-color-surface);
+    --_table-border: var(--ds-forced-color-control-boundary);
+    --_table-column-border: var(--ds-forced-color-control-boundary);
+    --_table-border-strong: var(--ds-forced-color-control-boundary);
+    color: var(--ds-forced-color-content);
+  }
+
+  :where(.ds-table__frame)::before,
+  :where(.ds-table__frame)::after {
+    display: none;
+  }
+
+  :where(.ds-table__row--selected > .ds-table__cell) {
+    background: var(--ds-forced-color-selected);
+    color: var(--ds-forced-color-on-selected);
+  }
+
+  :where(.ds-table__row--disabled) {
+    color: var(--ds-forced-color-disabled);
+    opacity: 1;
+  }
+
+  :where(.ds-table__selection-control:disabled ds-checkbox) {
+    --ds-forced-color-content: var(--ds-forced-color-disabled);
+    opacity: 1;
+  }
+
+  :where(.ds-table__header-label--interactive:focus-visible),
+  :where(.ds-table__selection-control:focus-visible),
+  :where(.ds-table__viewport:focus-visible) {
+    outline-color: var(--ds-forced-color-selected);
+  }
+}

package/dist/types/components/MobileHeader/MobileHeader.d.ts

@@ -1,17 +1,22 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type TabItem } from '../TabGroup/tab-item-utils';
-import type { MobileHeaderHeadingLevel, MobileHeaderTone } from './mobile-header-types';
+import { type TabGroupItem, type TabItem } from '../TabGroup/tab-item-utils';
+import type { TabGroupSize } from '../TabGroup/TabGroup';
+import type { MobileHeaderHeadingLevel, MobileHeaderSectionsPresentation, MobileHeaderTone } from './mobile-header-types';
 export declare class MobileHeader {
     /** Static title used when no peer sections are supplied. */
     heading: string;
     /** Semantic heading level for the active mobile screen. */
     headingLevel: MobileHeaderHeadingLevel;
     /** Controlled peer sections. Their selected label replaces the static title. */
-    sections: TabItem[];
+    sections: TabGroupItem[];
     /** Controlled selected section id. */
     value: string;
     /** Accessible name for the section chooser. */
     sectionsAriaLabel: string;
+    /** Popup switcher or an inline segmented TabGroup for peer sections. */
+    sectionsPresentation: MobileHeaderSectionsPresentation;
+    /** Density for the segmented sections presentation. */
+    sectionsSize: TabGroupSize;
     /** Controlled child sections within the selected page or detail screen. */
     subsections: TabItem[];
     /** Controlled selected child-section id. */

package/dist/types/components/MobileHeader/index.d.ts

@@ -1,2 +1,2 @@
-export type { MobileHeaderHeadingLevel, MobileHeaderSectionItem, MobileHeaderTone, } from './mobile-header-types';
+export type { MobileHeaderHeadingLevel, MobileHeaderSectionItem, MobileHeaderSectionsPresentation, MobileHeaderTone, } from './mobile-header-types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/MobileHeader/mobile-header-types.d.ts

@@ -1,5 +1,6 @@
-import type { TabItem } from '../TabGroup/tab-item-utils';
+import type { TabGroupItem } from '../TabGroup/tab-item-utils';
 export type MobileHeaderTone = 'default' | 'brand';
 export type MobileHeaderHeadingLevel = 'h1' | 'h2';
-export type MobileHeaderSectionItem = TabItem;
+export type MobileHeaderSectionsPresentation = 'switcher' | 'segmented';
+export type MobileHeaderSectionItem = TabGroupItem;
 //# sourceMappingURL=mobile-header-types.d.ts.map