@0001-labs/design-system-1 0.3.0-alpha.13 → 0.3.0-alpha.15

package/DS1/3-unit/styles/ds-matrix.css

@@ -0,0 +1,203 @@
+/* ds-matrix.css
+ * Rows against columns on the 20px pitch: the row names in --ds-matrix-names
+ * squares (eight), then one square per column, each square 19px inside and a
+ * 1px line at its end and foot, so a mark fills the inside exactly. Above,
+ * a bar one square high for each group of columns, then their names rising
+ * at 45° in six squares. One outline with the system's 4px corners goes round
+ * the squares. The legend below, in small type, starts where the squares do. */
+
+:host {
+  --ds-matrix-line: var(--ds-border-color);
+  --ds-matrix-colour: var(--ds-accent-color);
+  --ds-matrix-heading: calc(var(--ds-unit) * 6);
+  box-sizing: border-box;
+  display: block;
+  min-width: 0;
+  color: var(--ds-text-color);
+  font-family: var(--ds-typeface-regular);
+  font-feature-settings: var(--ds-font-features);
+  font-size: var(--ds-type-size-default);
+  font-weight: var(--ds-type-weight-default);
+  line-height: var(--ds-type-lineheight-default);
+  letter-spacing: var(--ds-type-letterspacing-default);
+}
+:host([hidden]) { display: none !important; }
+
+.matrix {
+  /* Room at the end for the last slanted names. */
+  padding-inline-end: var(--ds-matrix-heading);
+  overflow-x: auto;
+}
+
+.grid {
+  position: relative;
+  display: grid;
+  grid-template-columns: calc(var(--ds-unit) * var(--ds-matrix-names, 8)) repeat(var(--ds-matrix-columns, 1), var(--ds-unit));
+  grid-template-rows: var(--ds-unit) var(--ds-matrix-heading) repeat(var(--ds-matrix-body, 1), var(--ds-unit));
+  width: max-content;
+  outline: none;
+}
+.row { display: contents; }
+
+/* A group's bar: its colour, its name in the ink on the sixteen, fading out over its last 12px. */
+.group {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-end;
+  grid-row: 1;
+  min-width: 0;
+  border-inline-end: 1px solid var(--ds-paper);
+  background: var(--ds-matrix-colour);
+  color: var(--ds-slate);
+  font-family: var(--ds-typeface-medium, var(--ds-typeface-regular));
+}
+.group > span {
+  position: absolute;
+  inset-inline: calc(4px * var(--ds-sf, 1)) 0;
+  bottom: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 12px * var(--ds-sf, 1)), transparent);
+  mask-image: linear-gradient(to right, #000 calc(100% - 12px * var(--ds-sf, 1)), transparent);
+}
+
+.corner { grid-row: 2; grid-column: 1; }
+
+/* A column's name rises at 45° from the middle of its square, read left to right. */
+.column {
+  position: relative;
+  grid-row: 2;
+  background: color-mix(in srgb, var(--ds-matrix-colour) 22%, transparent);
+  cursor: pointer;
+}
+.column > span {
+  position: absolute;
+  inset-inline-start: calc(var(--ds-unit) / 2);
+  bottom: calc(4px * var(--ds-sf, 1));
+  z-index: 2;
+  white-space: nowrap;
+  transform: rotate(-45deg);
+  transform-origin: 0 100%;
+}
+:host(:dir(rtl)) .column > span { transform: rotate(45deg); transform-origin: 100% 100%; }
+.column[data-lit] > span { text-decoration: underline; text-underline-offset: 3px; }
+
+/* The row names end 4px clear of the squares, cut short when they must be. */
+.name {
+  box-sizing: border-box;
+  grid-column: 1;
+  min-width: 0;
+  padding-inline-end: calc(4px * var(--ds-sf, 1));
+  overflow: hidden;
+  text-align: end;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.name[data-lit] { background: var(--ds-row-fill-hover, var(--ds-fill)); }
+.name.totals { color: var(--ds-title-color); cursor: default; }
+
+/* A square: 19px inside, a line at its end and its foot, tinted by its group. */
+.cell {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  border-inline-end: 1px solid var(--ds-matrix-line);
+  border-block-end: 1px solid var(--ds-matrix-line);
+  background: color-mix(in srgb, var(--ds-matrix-colour) 22%, var(--ds-paper));
+  outline: none;
+  cursor: pointer;
+}
+.cell[data-lit] { background: color-mix(in srgb, var(--ds-matrix-colour) 22%, var(--ds-row-fill-hover, var(--ds-fill))); }
+.cell:focus-visible { z-index: 4; outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
+.count {
+  align-items: flex-end;
+  color: var(--ds-title-color);
+  font-size: var(--ds-type-size-small);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  padding-block-end: calc(4px * var(--ds-sf, 1));
+  cursor: default;
+}
+
+/* One line round the squares, with the system's corners, laid over their outer lines. */
+.frame {
+  position: absolute;
+  z-index: 3;
+  grid-row: 3 / span var(--ds-matrix-body, 1);
+  grid-column: 2 / -1;
+  inset: -1px 0 0 -1px;
+  border: 1px solid var(--ds-matrix-line);
+  border-radius: var(--ds-radius);
+  pointer-events: none;
+}
+
+/* The marks, each drawn in a darker shade of its column's colour. */
+.mark {
+  --ds-matrix-shade: color-mix(in srgb, var(--ds-matrix-colour) 45%, var(--ds-text-color));
+  display: block;
+  flex: none;
+  box-sizing: border-box;
+  width: calc(var(--ds-unit) - 1px);
+  height: calc(var(--ds-unit) - 1px);
+}
+.mark[data-mark="fill"] { background: var(--ds-matrix-colour); }
+.mark[data-mark="outline"] {
+  border: 1px solid var(--ds-matrix-shade);
+  background: color-mix(in srgb, var(--ds-matrix-colour) 40%, transparent);
+}
+/* Stripes on a 4px tile: the squares are 20px apart, five tiles, so they run on from square to square. */
+.mark[data-mark="stripes"] {
+  background: linear-gradient(135deg, var(--ds-matrix-shade) 25%, transparent 25% 50%, var(--ds-matrix-shade) 50% 75%, transparent 75%) 0 0 / 4px 4px;
+}
+.mark[data-mark="dot"] {
+  width: 7px;
+  height: 7px;
+  margin-block-start: 6px;
+  border-radius: 50%;
+  background: var(--ds-matrix-shade);
+}
+.mark[data-mark="triangle"] {
+  width: 9px;
+  height: 8px;
+  margin-block-start: 6px;
+  background: var(--ds-matrix-shade);
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+.mark[data-mark="dash"] {
+  width: 9px;
+  height: 1px;
+  margin-block-start: 9px;
+  background: var(--ds-title-color);
+}
+
+/* The legend: one line of small type, starting where the squares start; each mark in a 16px box on the sixteen. */
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 var(--ds-unit);
+  margin-block-start: var(--ds-unit);
+  padding-inline-start: calc(var(--ds-unit) * var(--ds-matrix-names, 8));
+  color: var(--ds-title-color);
+  font-size: var(--ds-type-size-small);
+  line-height: var(--ds-unit);
+}
+.key { display: inline-flex; align-items: center; gap: calc(4px * var(--ds-sf, 1)); white-space: nowrap; }
+.key-mark {
+  --ds-matrix-colour: var(--ds-title-color);
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--ds-control-height);
+  height: var(--ds-control-height);
+}
+.key-mark .mark { --ds-matrix-shade: var(--ds-text-color); margin: 0; }
+.key-mark .mark[data-mark="fill"],
+.key-mark .mark[data-mark="outline"],
+.key-mark .mark[data-mark="stripes"] { width: var(--ds-control-height); height: var(--ds-control-height); }
+.key-mark .mark[data-mark="outline"] { background: transparent; border-color: var(--ds-text-color); }
+.key-mark .mark[data-mark="dash"] { width: 8px; }

package/DS1/3-unit/styles/ds-menu.css

@@ -1,6 +1,11 @@
 @import "../../1-root/component-metrics.css";
 
+/* On whole squares: the line and the padding inside it make half a square on
+ * each side, and every entry is one square high, so a menu of n entries is
+ * n + 1 squares high. Placed half a square from its anchor, its entries
+ * stand on the anchor's grid lines. No shadow: words on paper. */
 :host {
+  --ds-menu-row: var(--ds-row-height);
   box-sizing: border-box;
   display: block;
   min-width: calc(8 * var(--ds-unit));
@@ -9,6 +14,7 @@
   border: 0;
   background: transparent;
 }
+:host([hidden]) { display: none !important; }
 
 /* Keep the shared face inside the boundary: product resets can reach a host. */
 .frame {
@@ -19,7 +25,7 @@
   width: 100%;
   max-height: min(var(--ds-menu-max-height, calc(16 * var(--ds-unit))), var(--ds-menu-available-height, 100vh));
   overflow-y: auto;
-  padding: calc(4px * var(--ds-sf));
+  padding: calc(var(--ds-unit) / 2 - 1px);
   border: 1px solid var(--ds-border-color);
   border-radius: var(--ds-radius-card);
   background: var(--ds-paper);
@@ -33,14 +39,32 @@
 }
 slot { display: contents; }
 
+/* Every entry is one row, whatever button styles a product or library gives
+ * it: shared buttons through their height, a native button or link through
+ * its box, which the menu's !important holds against outside styles. */
+::slotted(:is(ds-button, ds-file-picker)) { flex: 0 0 auto; width: 100%; --ds-button-height: var(--ds-menu-row); }
+::slotted(:is(button, a, [role="option"], [role^="menuitem"]):not(ds-button, ds-file-picker)) {
+  box-sizing: border-box !important;
+  flex: 0 0 auto !important;
+  height: var(--ds-menu-row) !important;
+  min-height: var(--ds-menu-row) !important;
+  max-height: var(--ds-menu-row) !important;
+  margin-block: 0 !important;
+  padding-block: 0 !important;
+  line-height: var(--ds-type-lineheight-default) !important;
+}
+
 :host([floating]:not([open])) { display: none; }
 :host([floating]) { position: fixed; inset: auto; margin: 0; min-width: 0; width: var(--ds-menu-width, var(--ds-menu-anchor-width)); z-index: 1; scroll-padding: calc(var(--ds-unit) / 2); }
-:host([floating]) ::slotted(:is(ds-button, ds-file-picker)) { flex: 0 0 auto; --ds-button-height: var(--ds-row-height); --ds-button-align: flex-start; --ds-button-padding: 0 calc(4px * var(--ds-sf)); width: 100%; }
+:host([floating]) ::slotted(:is(ds-button, ds-file-picker)) { flex: 0 0 auto; --ds-button-height: var(--ds-menu-row); --ds-button-align: flex-start; --ds-button-padding: 0 calc(4px * var(--ds-sf)); width: 100%; }
 :host([data-grid]) { width: max-content; min-width: 0; }
 :host([data-grid]) .frame { display: grid; grid-template-columns: repeat(var(--ds-menu-columns), var(--ds-row-height)); width: max-content; max-width: 100%; }
-:host([data-grid]) ::slotted(:is(ds-button, ds-file-picker)) { --ds-button-height: var(--ds-row-height); --ds-button-min-width: 0px; --ds-button-padding: 0; --ds-button-align: center; }
+:host([data-grid]) ::slotted(:is(ds-button, ds-file-picker)) { --ds-button-height: var(--ds-menu-row); --ds-button-min-width: 0px; --ds-button-padding: 0; --ds-button-align: center; }
 
+/* Compact entries are filled rows edge to edge, 19px with the 1px between
+ * them, a square's pitch: n entries are n squares less the last line. */
 :host([compact]) {
+  --ds-menu-row: calc(var(--ds-row-height) - 1px);
   width: var(--ds-menu-width, calc(8 * var(--ds-unit)));
   min-width: calc(4 * var(--ds-unit));
   max-width: 100%;
@@ -55,7 +79,7 @@ slot { display: contents; }
   background: transparent;
 }
 :host([compact]) ::slotted(:is(ds-button, ds-file-picker)) {
-  --ds-button-height: var(--ds-row-height);
+  --ds-button-height: var(--ds-menu-row);
   --ds-button-padding: 0 calc(4px * var(--ds-sf));
   --ds-button-background: var(--ds-fill);
   --ds-button-color: var(--ds-text-color);
@@ -84,7 +108,7 @@ slot { display: contents; }
 ::slotted([data-ds-menu-label]) {
   display: block;
   box-sizing: border-box;
-  height: var(--ds-row-height);
+  height: var(--ds-menu-row);
   padding: 0 calc(4px * var(--ds-sf));
   color: var(--ds-text-color-muted);
 }
@@ -93,5 +117,6 @@ slot { display: contents; }
   box-sizing: border-box;
   border: 0;
   border-top: 1px solid var(--ds-border-color);
-  margin: calc(var(--ds-unit) / 2) 0;
+  /* One square with its line: half a square above it, less the line, and half below. */
+  margin: calc(var(--ds-unit) / 2 - 1px) 0 calc(var(--ds-unit) / 2);
 }

package/DS1/3-unit/styles/ds-row.css

@@ -1,16 +1,20 @@
 @import "../../1-root/component-metrics.css";
 
-/* ds-row.css */
+/* ds-row.css: the same rows as the native .ds-row in 1-root/row.css. What a row holds
+   stands on the lower sixteen of its square with the spare four above, as Ezo sets every
+   row: words on a 16px line box, a 16px icon and a 16px control all end on the bottom line. */
 
 :host {
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
-  align-items: var(--ds-row-align, center);
+  align-items: var(--ds-row-align, flex-end);
   gap: var(--ds-row-gap, calc(4px * var(--ds-sf)));
   min-width: 0;
   height: var(--ds-row-default-height, var(--ds-row-height));
+  line-height: var(--ds-type-lineheight-default);
 }
+:host([hidden]) { display: none !important; }
 
 :host([auto]) {
   height: auto;
@@ -35,3 +39,81 @@
 :host([centered]), :host([end]) {
   gap: var(--ds-row-packed-gap, var(--ds-row-gap, calc(4px * var(--ds-sf))));
 }
+
+/* A tile or a card: the children stacked, each line one square, sized to them; its lines
+   wrap, so they stay on whole squares rather than the sixteen. */
+:host([stacked]) {
+  flex-direction: column;
+  line-height: var(--ds-row-height);
+  align-items: var(--ds-row-align, flex-start);
+  justify-content: flex-start;
+  gap: 0;
+  height: auto;
+}
+
+/*
+ * A row a person presses. The target is the row's whole box: a layer above
+ * the content takes the press anywhere on the row, a layer under it shows
+ * the pointer, the press, the current destination and the focus ring.
+ * Controls in the end slot stand above both and keep their own presses.
+ */
+:host([href]), :host([interactive]) {
+  position: relative;
+  isolation: isolate;
+  padding-inline: var(--ds-row-padding, calc(4px * var(--ds-sf)));
+  -webkit-tap-highlight-color: transparent;
+}
+
+.target {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: inherit;
+  align-items: inherit;
+  align-self: stretch;
+  justify-content: inherit;
+  gap: inherit;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+  appearance: none;
+}
+.target::before,
+.target::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--ds-row-radius, 0);
+}
+.target::before { z-index: 1; }
+.target::after { z-index: -1; }
+::slotted([slot="end"]) { position: relative; z-index: 2; }
+
+.target:hover::after { background: var(--ds-row-fill-hover, var(--ds-fill)); }
+.target:active::after { background: var(--ds-row-fill-press, var(--ds-fill-hover)); }
+.target[aria-current] {
+  --ds-type-weight-default: var(--ds-row-current-weight, 500);
+  font-weight: var(--ds-row-current-weight, 500);
+}
+.target[aria-current]::after { background: var(--ds-row-fill-current, var(--ds-fill-hover)); }
+.target:focus-visible::after { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
+
+:host([disabled]) .target { cursor: default; opacity: 0.5; }
+:host([disabled]) .target::after { background: none; }
+
+/* A navigation row: the sidebar's two-pixel corners. */
+:host([nav]) { --ds-row-radius: calc(2px * var(--ds-sf)); }
+
+@media (forced-colors: active) {
+  .target[aria-current]::after { outline: 1px solid Highlight; outline-offset: -1px; }
+  .target:focus-visible::after { outline-color: Highlight; }
+}

package/DS1/3-unit/styles/ds-sidebar.css

@@ -0,0 +1,134 @@
+@import "../../1-root/component-metrics.css";
+
+:host {
+  display: flex;
+  flex-direction: column;
+  width: calc(12 * var(--ds-unit));
+  max-width: 100%;
+  min-width: 0;
+  min-height: 0;
+  color: var(--ds-text-color);
+  font-family: var(--ds-typeface-regular);
+  font-feature-settings: var(--ds-font-features);
+  font-size: var(--ds-type-size-default);
+  font-weight: var(--ds-type-weight-default);
+  line-height: var(--ds-type-lineheight-default);
+  letter-spacing: var(--ds-type-letterspacing-default);
+}
+nav {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  padding: calc(var(--ds-unit) / 2) 0;
+}
+::slotted([slot="header"]), ::slotted([slot="footer"]) { flex: none; }
+.row {
+  --ds-row-gap: 0px;
+  border-radius: calc(2px * var(--ds-sf));
+  padding-inline: calc(4px * var(--ds-sf));
+  padding-inline-start: calc(4px * var(--ds-sf) + var(--depth) * var(--ds-unit) / 2);
+}
+/* The look of every pressable row (ds-row, .ds-row, the tree's rows): the same tokens, the same fallbacks. */
+.row:hover { background: var(--ds-row-fill-hover, var(--ds-fill)); }
+.row[data-current] { background: var(--ds-row-fill-current, var(--ds-fill-hover)); }
+.row[data-current] .choice { --ds-type-weight-default: var(--ds-row-current-weight, 500); }
+ds-button { --ds-corner-size: 0px; --ds-button-padding: 0; }
+.disclosure { flex: 0 0 var(--ds-unit); width: var(--ds-unit); }
+.spacer { flex: 1; }
+.disclosure { --ds-button-color: var(--ds-text-color-muted); --ds-button-height: var(--ds-control-height); }
+ds-icon { transform: rotate(0deg); }
+ds-icon[data-open] { transform: rotate(90deg); }
+.choice { flex: 0 1 auto; min-width: 0; }
+.name:has(ds-icon) { display: flex; align-items: center; gap: calc(4px * var(--ds-sf)); }
+.name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.meta { flex: none; padding-inline-start: calc(4px * var(--ds-sf)); font-size: var(--ds-type-size-small); color: var(--ds-text-color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.action { margin-inline-start: calc(4px * var(--ds-sf)); --ds-text-size: 10px; --ds-button-color: var(--ds-text-color-muted); }
+.empty { margin: 0; padding: calc(var(--ds-unit) / 2); color: var(--ds-text-color-muted); }
+@media (forced-colors: active) { .row[data-current] { outline: 1px solid Highlight; outline-offset: -1px; } }
+
+/* ---- Tree: the same rows as the native .ds-sidebar tree in 1-root/row.css. ---- */
+.tree {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+}
+
+/* One square high, its contents on the lower sixteen as every row's; each level one square
+   further in, so a row's arrow stands under its parent's label. */
+.tree .item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-end;
+  height: var(--ds-row-height);
+  min-width: 0;
+  padding-inline: calc(var(--depth, 0) * var(--ds-unit)) var(--ds-row-padding, calc(4px * var(--ds-sf)));
+  border-radius: 0;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+}
+.tree .item:hover:not([aria-disabled="true"]) { background: var(--ds-row-fill-hover, var(--ds-fill)); }
+.tree .item:active:not([aria-disabled="true"]) { background: var(--ds-row-fill-press, var(--ds-fill-hover)); }
+.tree .item[aria-selected="true"] {
+  --ds-type-weight-default: var(--ds-row-current-weight, 500);
+  background: var(--ds-row-fill-current, var(--ds-fill-hover));
+  font-weight: var(--ds-row-current-weight, 500);
+}
+.tree .item:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
+.tree .item[aria-disabled="true"] { cursor: default; opacity: 0.5; }
+
+/* The arrow and the icon each take a whole square, drawn on the row's sixteen (the square's
+   spare four above); a leaf keeps an empty one so labels line up. */
+.tree .disclosure, .tree .icon {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 0 0 var(--ds-unit);
+  justify-content: center;
+  align-items: center;
+  width: var(--ds-unit);
+  height: var(--ds-unit);
+  padding-top: calc(var(--ds-unit) - var(--ds-control-height));
+}
+.tree .disclosure { color: var(--ds-text-color-muted); }
+.tree .disclosure ds-icon { transition: transform 120ms ease-out; }
+.tree .label {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding-inline-start: calc(4px * var(--ds-sf));
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tree .disclosure ds-icon { transition: none; }
+}
+@media (forced-colors: active) {
+  .tree .item[aria-selected="true"] { outline: 1px solid Highlight; outline-offset: -1px; }
+  .tree .item:focus-visible { outline-color: Highlight; }
+}
+
+/* Extend the native destination over the row without moving its words or chevron.
+   Independent disclosure and action controls stand above this hit area. */
+.row { position: relative; isolation: isolate; }
+.choice, .choice > :is(a, button) { position: static; }
+.choice > :is(a, button)::after { content: ""; position: absolute; inset: 0; cursor: pointer; }
+.row[data-disabled] .choice > button::after { cursor: default; }
+.row > .disclosure, .row > .action { position: relative; z-index: 1; }
+.row:has(.choice > :focus-visible) { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
+.row[data-drop="before"] { box-shadow: inset 0 1px var(--ds-text-color); }
+.row[data-drop="after"] { box-shadow: inset 0 -1px var(--ds-text-color); }
+
+/* Keep the disclosure press target one square while its icon sits on the sixteen. */
+.row > .disclosure > button::after { content: ""; position: absolute; inset: 0; }
+
+:host([disclosure-position="start"]) .row { padding-inline-start: calc(4px * var(--ds-sf) + var(--depth) * var(--ds-unit)); }
+:host([disclosure-position="start"]) .row:not(:has(.disclosure)) .choice { margin-inline-start: var(--ds-unit); }

package/DS1/3-unit/styles/ds-table.css

@@ -1,80 +1,9 @@
 /* ds-table.css */
-/* Data table component styles */
+/* The element only places the table; 1-root/table.css draws it. */
 
 :host {
   display: block;
   width: 100%;
+  min-width: 0;
 }
-
-.table-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.table-header {
-  display: grid;
-  grid-template-columns: 160px 80px 80px 80px;
-  height: 20px;
-  width: 400px;
-}
-
-.table-body {
-  display: grid;
-  grid-template-columns: 160px 80px 80px 80px;
-  border: 1px solid var(--black);
-  width: 400px;
-}
-
-.header-cell {
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: left;
-  padding: 0 2px;
-  font-family: var(--typeface-regular);
-  font-size: var(--type-size-default);
-  font-weight: var(--type-weight-default);
-  line-height: var(--type-lineheight-default);
-  color: var(--black);
-  letter-spacing: -0.26px;
-}
-
-.data-cell {
-  height: 20px;
-  margin-top: -1px;
-  display: flex;
-  align-items: center;
-  justify-content: left;
-  outline: 1px solid var(--black);
-  font-family: var(--typeface-regular);
-  font-size: var(--type-size-default);
-  font-weight: var(--type-weight-default);
-  line-height: var(--type-lineheight-default);
-  color: var(--black);
-  letter-spacing: -0.26px;
-}
-
-.status-cell {
-  background-color: transparent;
-  text-align: center;
-}
-
-.product-cell {
-  text-align: left;
-  justify-content: flex-start;
-}
-
-.users-cell,
-.retention-cell {
-  text-align: center;
-}
-
-/* Responsive adjustments */
-@media (max-width: 480px) {
-  .table-header,
-  .table-body {
-    width: 100%;
-    grid-template-columns: 1fr 60px 60px 60px;
-  }
-}
+:host([hidden]) { display: none !important; }