sid-ui 0.0.0-stage → 0.1.0

package/src/styles/components/responsive.css

@@ -0,0 +1,419 @@
+/* Responsive layer — GridSystem, ResponsiveStack, Show/Hide, ResponsiveFrame.
+   Container tiers (px): {'sm': 480, 'md': 640, 'lg': 800, 'xl': 1024}. Viewport tiers are Astryx's: {'sm': 640, 'md': 768, 'lg': 1024, 'xl': 1280}.
+   Generated per tier; keep the numbers in sync with components/breakpoints.ts. */
+
+.os-responsive-container {
+  container: os-responsive / inline-size;
+}
+
+/* GridSystem */
+.os-gs {
+  min-width: 0;
+}
+.os-gs-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--os-gs-columns), minmax(0, 1fr));
+  column-gap: var(--os-gs-gap);
+  row-gap: var(--os-gs-row-gap);
+  align-items: var(--os-gs-align);
+
+  /* A GridSystem nested in a GridColumn must not inherit the outer column's
+     per-tier spans: an inner column that sets only `md` would otherwise pick
+     up the outer `lg` at wide sizes. `initial` makes each var unset here, so
+     inner columns fall back to their own values. */
+  --os-gs-display: initial;
+  --os-gs-display-sm: initial;
+  --os-gs-display-md: initial;
+  --os-gs-display-lg: initial;
+  --os-gs-display-xl: initial;
+  --os-gs-span: initial;
+  --os-gs-span-sm: initial;
+  --os-gs-span-md: initial;
+  --os-gs-span-lg: initial;
+  --os-gs-span-xl: initial;
+  --os-gs-start: initial;
+  --os-gs-start-sm: initial;
+  --os-gs-start-md: initial;
+  --os-gs-start-lg: initial;
+  --os-gs-start-xl: initial;
+  --os-gs-order: initial;
+  --os-gs-order-sm: initial;
+  --os-gs-order-md: initial;
+  --os-gs-order-lg: initial;
+  --os-gs-order-xl: initial;
+  --os-gs-rows: initial;
+}
+.os-gs-dense {
+  grid-auto-flow: row dense;
+}
+.os-gs-col {
+  min-width: 0;
+  display: var(--os-gs-display, block);
+  grid-column: var(--os-gs-start, auto) / span var(--os-gs-span, var(--os-gs-columns));
+  grid-row: span var(--os-gs-rows, 1);
+  order: var(--os-gs-order, 0);
+}
+
+/* ResponsiveStack — a column until its tier, then a row */
+.os-rstack-root {
+  min-width: 0;
+}
+.os-rstack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--os-rstack-gap);
+}
+.os-rstack-reverse {
+  flex-direction: column-reverse;
+}
+
+/* Show / Hide */
+.os-show {
+  display: contents;
+}
+.os-show[class*="os-show-from-"] {
+  display: none;
+}
+
+@container os-responsive (min-width: 480px) {
+  .os-responsive-container > .os-gs-grid > .os-gs-col {
+    display: var(--os-gs-display-sm, var(--os-gs-display, block));
+    grid-column: var(--os-gs-start-sm, var(--os-gs-start, auto)) / span
+      var(--os-gs-span-sm, var(--os-gs-span, var(--os-gs-columns)));
+    order: var(--os-gs-order-sm, var(--os-gs-order, 0));
+  }
+  .os-responsive-container > .os-rstack-from-sm,
+  .os-responsive-container > .os-rstack-from-sm.os-rstack-reverse {
+    flex-direction: row;
+    align-items: var(--os-rstack-align);
+  }
+  .os-responsive-container > .os-rstack-from-sm.os-rstack-equal > * {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+  .os-show-container.os-show-from-sm {
+    display: contents;
+  }
+  .os-show-container.os-show-below-sm {
+    display: none;
+  }
+}
+@container os-responsive (min-width: 640px) {
+  .os-responsive-container > .os-gs-grid > .os-gs-col {
+    display: var(--os-gs-display-md, var(--os-gs-display-sm, var(--os-gs-display, block)));
+    grid-column: var(--os-gs-start-md, var(--os-gs-start-sm, var(--os-gs-start, auto))) / span
+      var(--os-gs-span-md, var(--os-gs-span-sm, var(--os-gs-span, var(--os-gs-columns))));
+    order: var(--os-gs-order-md, var(--os-gs-order-sm, var(--os-gs-order, 0)));
+  }
+  .os-responsive-container > .os-rstack-from-md,
+  .os-responsive-container > .os-rstack-from-md.os-rstack-reverse {
+    flex-direction: row;
+    align-items: var(--os-rstack-align);
+  }
+  .os-responsive-container > .os-rstack-from-md.os-rstack-equal > * {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+  .os-show-container.os-show-from-md {
+    display: contents;
+  }
+  .os-show-container.os-show-below-md {
+    display: none;
+  }
+}
+@container os-responsive (min-width: 800px) {
+  .os-responsive-container > .os-gs-grid > .os-gs-col {
+    display: var(
+      --os-gs-display-lg,
+      var(--os-gs-display-md, var(--os-gs-display-sm, var(--os-gs-display, block)))
+    );
+    grid-column: var(
+        --os-gs-start-lg,
+        var(--os-gs-start-md, var(--os-gs-start-sm, var(--os-gs-start, auto)))
+      ) /
+      span
+      var(
+        --os-gs-span-lg,
+        var(--os-gs-span-md, var(--os-gs-span-sm, var(--os-gs-span, var(--os-gs-columns))))
+      );
+    order: var(
+      --os-gs-order-lg,
+      var(--os-gs-order-md, var(--os-gs-order-sm, var(--os-gs-order, 0)))
+    );
+  }
+  .os-responsive-container > .os-rstack-from-lg,
+  .os-responsive-container > .os-rstack-from-lg.os-rstack-reverse {
+    flex-direction: row;
+    align-items: var(--os-rstack-align);
+  }
+  .os-responsive-container > .os-rstack-from-lg.os-rstack-equal > * {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+  .os-show-container.os-show-from-lg {
+    display: contents;
+  }
+  .os-show-container.os-show-below-lg {
+    display: none;
+  }
+}
+@container os-responsive (min-width: 1024px) {
+  .os-responsive-container > .os-gs-grid > .os-gs-col {
+    display: var(
+      --os-gs-display-xl,
+      var(
+        --os-gs-display-lg,
+        var(--os-gs-display-md, var(--os-gs-display-sm, var(--os-gs-display, block)))
+      )
+    );
+    grid-column: var(
+        --os-gs-start-xl,
+        var(
+          --os-gs-start-lg,
+          var(--os-gs-start-md, var(--os-gs-start-sm, var(--os-gs-start, auto)))
+        )
+      ) /
+      span
+      var(
+        --os-gs-span-xl,
+        var(
+          --os-gs-span-lg,
+          var(--os-gs-span-md, var(--os-gs-span-sm, var(--os-gs-span, var(--os-gs-columns))))
+        )
+      );
+    order: var(
+      --os-gs-order-xl,
+      var(--os-gs-order-lg, var(--os-gs-order-md, var(--os-gs-order-sm, var(--os-gs-order, 0))))
+    );
+  }
+  .os-responsive-container > .os-rstack-from-xl,
+  .os-responsive-container > .os-rstack-from-xl.os-rstack-reverse {
+    flex-direction: row;
+    align-items: var(--os-rstack-align);
+  }
+  .os-responsive-container > .os-rstack-from-xl.os-rstack-equal > * {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+  .os-show-container.os-show-from-xl {
+    display: contents;
+  }
+  .os-show-container.os-show-below-xl {
+    display: none;
+  }
+}
+
+@media (min-width: 640px) {
+  .os-responsive-viewport > .os-gs-grid > .os-gs-col {
+    display: var(--os-gs-display-sm, var(--os-gs-display, block));
+    grid-column: var(--os-gs-start-sm, var(--os-gs-start, auto)) / span
+      var(--os-gs-span-sm, var(--os-gs-span, var(--os-gs-columns)));
+    order: var(--os-gs-order-sm, var(--os-gs-order, 0));
+  }
+  .os-responsive-viewport > .os-rstack-from-sm,
+  .os-responsive-viewport > .os-rstack-from-sm.os-rstack-reverse {
+    flex-direction: row;
+    align-items: var(--os-rstack-align);
+  }
+  .os-responsive-viewport > .os-rstack-from-sm.os-rstack-equal > * {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+  .os-show-viewport.os-show-from-sm {
+    display: contents;
+  }
+  .os-show-viewport.os-show-below-sm {
+    display: none;
+  }
+}
+@media (min-width: 768px) {
+  .os-responsive-viewport > .os-gs-grid > .os-gs-col {
+    display: var(--os-gs-display-md, var(--os-gs-display-sm, var(--os-gs-display, block)));
+    grid-column: var(--os-gs-start-md, var(--os-gs-start-sm, var(--os-gs-start, auto))) / span
+      var(--os-gs-span-md, var(--os-gs-span-sm, var(--os-gs-span, var(--os-gs-columns))));
+    order: var(--os-gs-order-md, var(--os-gs-order-sm, var(--os-gs-order, 0)));
+  }
+  .os-responsive-viewport > .os-rstack-from-md,
+  .os-responsive-viewport > .os-rstack-from-md.os-rstack-reverse {
+    flex-direction: row;
+    align-items: var(--os-rstack-align);
+  }
+  .os-responsive-viewport > .os-rstack-from-md.os-rstack-equal > * {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+  .os-show-viewport.os-show-from-md {
+    display: contents;
+  }
+  .os-show-viewport.os-show-below-md {
+    display: none;
+  }
+}
+@media (min-width: 1024px) {
+  .os-responsive-viewport > .os-gs-grid > .os-gs-col {
+    display: var(
+      --os-gs-display-lg,
+      var(--os-gs-display-md, var(--os-gs-display-sm, var(--os-gs-display, block)))
+    );
+    grid-column: var(
+        --os-gs-start-lg,
+        var(--os-gs-start-md, var(--os-gs-start-sm, var(--os-gs-start, auto)))
+      ) /
+      span
+      var(
+        --os-gs-span-lg,
+        var(--os-gs-span-md, var(--os-gs-span-sm, var(--os-gs-span, var(--os-gs-columns))))
+      );
+    order: var(
+      --os-gs-order-lg,
+      var(--os-gs-order-md, var(--os-gs-order-sm, var(--os-gs-order, 0)))
+    );
+  }
+  .os-responsive-viewport > .os-rstack-from-lg,
+  .os-responsive-viewport > .os-rstack-from-lg.os-rstack-reverse {
+    flex-direction: row;
+    align-items: var(--os-rstack-align);
+  }
+  .os-responsive-viewport > .os-rstack-from-lg.os-rstack-equal > * {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+  .os-show-viewport.os-show-from-lg {
+    display: contents;
+  }
+  .os-show-viewport.os-show-below-lg {
+    display: none;
+  }
+}
+@media (min-width: 1280px) {
+  .os-responsive-viewport > .os-gs-grid > .os-gs-col {
+    display: var(
+      --os-gs-display-xl,
+      var(
+        --os-gs-display-lg,
+        var(--os-gs-display-md, var(--os-gs-display-sm, var(--os-gs-display, block)))
+      )
+    );
+    grid-column: var(
+        --os-gs-start-xl,
+        var(
+          --os-gs-start-lg,
+          var(--os-gs-start-md, var(--os-gs-start-sm, var(--os-gs-start, auto)))
+        )
+      ) /
+      span
+      var(
+        --os-gs-span-xl,
+        var(
+          --os-gs-span-lg,
+          var(--os-gs-span-md, var(--os-gs-span-sm, var(--os-gs-span, var(--os-gs-columns))))
+        )
+      );
+    order: var(
+      --os-gs-order-xl,
+      var(--os-gs-order-lg, var(--os-gs-order-md, var(--os-gs-order-sm, var(--os-gs-order, 0))))
+    );
+  }
+  .os-responsive-viewport > .os-rstack-from-xl,
+  .os-responsive-viewport > .os-rstack-from-xl.os-rstack-reverse {
+    flex-direction: row;
+    align-items: var(--os-rstack-align);
+  }
+  .os-responsive-viewport > .os-rstack-from-xl.os-rstack-equal > * {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+  .os-show-viewport.os-show-from-xl {
+    display: contents;
+  }
+  .os-show-viewport.os-show-below-xl {
+    display: none;
+  }
+}
+
+/* ResponsiveFrame */
+.os-rframe {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  width: 100%;
+  min-width: 0;
+}
+.os-rframe-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+}
+.os-rframe-stage {
+  display: flex;
+  align-items: stretch;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+.os-rframe-viewport {
+  --os-rframe-pad: var(--spacing-4);
+  flex: none;
+  box-sizing: border-box;
+  max-width: calc(100% - var(--spacing-4));
+  min-height: 120px;
+  padding: var(--os-rframe-pad);
+  overflow: hidden;
+  background: var(--color-background-body);
+  border-radius: var(--radius-container);
+  box-shadow: inset 0 0 0 1px var(--color-border);
+}
+.os-rframe-fill {
+  flex: 1;
+  min-width: 0;
+}
+.os-rframe-content {
+  min-width: 0;
+}
+.os-rframe-handle {
+  flex: none;
+  align-self: center;
+  width: 6px;
+  height: 48px;
+  border-radius: var(--radius-full);
+  background: var(--color-border-emphasized);
+  cursor: ew-resize;
+  touch-action: none;
+  transition: background-color var(--duration-fast) var(--ease-standard);
+}
+.os-rframe-handle:hover,
+.os-rframe-handle:focus-visible {
+  background: var(--color-accent);
+  outline: none;
+}
+
+/* Demo tile — a neutral block for showing layout structure */
+.os-tile {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--spacing-0-5);
+  min-height: 56px;
+  height: 100%;
+  padding: var(--spacing-3);
+  border-radius: var(--radius-element);
+  background: var(--color-accent-muted);
+  color: var(--color-text-accent);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium, 500);
+  font-variant-numeric: tabular-nums;
+}
+.os-tile-neutral {
+  background: var(--color-neutral);
+  color: var(--color-text-secondary);
+}
+.os-tile-strong {
+  background: var(--color-accent);
+  color: var(--color-on-accent);
+}
+.os-tile-meta {
+  font-weight: var(--font-weight-normal, 400);
+  opacity: 0.75;
+}

package/src/styles/components/sticky.css

@@ -0,0 +1,23 @@
+/* Sticky — a panel that stays in view while its column scrolls. With fill,
+   it takes the visible height of its scroll container (measured in JS) minus
+   the offset above and below, and its content scrolls inside. */
+
+.os-sticky {
+  position: sticky;
+  top: var(--os-sticky-offset, 0px);
+  align-self: flex-start;
+  min-width: 0;
+}
+
+/* Fill has an explicit height, so stretching only widens it: it spans its
+   column in a vertical stack instead of shrinking to its content. */
+.os-sticky-fill {
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  height: calc(var(--os-sticky-scrollport, 100dvh) - 2 * var(--os-sticky-offset, 0px));
+}
+.os-sticky-fill > * {
+  flex: 1;
+  min-height: 0;
+}

package/src/styles/components/table.css

@@ -0,0 +1,267 @@
+/* Table — os-dt ("data table"). Header, scroll area, footer inside one surface. */
+
+.os-dt {
+  --os-dt-pad-y: 10px;
+  --os-dt-pad-x: var(--spacing-4);
+  --os-dt-bg: var(--color-background-surface);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  font-size: var(--font-size-base);
+  color: var(--color-text-primary);
+}
+.os-dt-compact {
+  --os-dt-pad-y: 6px;
+  --os-dt-pad-x: var(--spacing-3);
+}
+.os-dt-spacious {
+  --os-dt-pad-y: var(--spacing-4);
+}
+
+.os-dt-card,
+.os-dt-lined {
+  overflow: hidden;
+  background: var(--os-dt-bg);
+  border-radius: var(--radius-container);
+  box-shadow:
+    0 0 0 1px var(--color-border),
+    var(--shadow-low, var(--elevation-1));
+}
+.os-dt-plain {
+  --os-dt-bg: transparent;
+}
+
+.os-dt-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--spacing-3);
+  padding: var(--spacing-3) var(--os-dt-pad-x);
+  border-bottom: 1px solid var(--color-border);
+}
+.os-dt-scroll {
+  overflow: auto;
+}
+.os-dt-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.os-dt th {
+  padding: var(--spacing-2) var(--os-dt-pad-x);
+  background: var(--os-dt-bg);
+  border-bottom: 1px solid var(--color-border);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium, 500);
+  line-height: 20px;
+  color: var(--color-text-secondary);
+  text-align: left;
+  white-space: nowrap;
+}
+.os-dt td {
+  padding: var(--os-dt-pad-y) var(--os-dt-pad-x);
+  border-bottom: 1px solid var(--color-border);
+  line-height: 20px;
+  vertical-align: middle;
+}
+.os-dt:not(.os-dt-plain) tbody tr:last-child td {
+  border-bottom: 0;
+}
+.os-dt-lined :is(th, td) + :is(th, td) {
+  border-left: 1px solid var(--color-border);
+}
+.os-dt-align-end {
+  text-align: right !important;
+}
+.os-dt-align-center {
+  text-align: center !important;
+}
+
+.os-dt tbody tr {
+  transition: background-color var(--duration-fast) var(--ease-standard);
+}
+.os-dt tbody tr:hover {
+  background: var(--color-overlay-hover);
+}
+.os-dt-striped tbody tr:nth-child(even) {
+  background: color-mix(in srgb, var(--color-background-muted) 70%, transparent);
+}
+.os-dt-selectable tbody tr {
+  cursor: pointer;
+}
+.os-dt tbody tr.os-dt-row-selected {
+  background: var(--color-accent-muted);
+}
+.os-dt tbody tr.os-dt-row-selected td:first-child {
+  box-shadow: inset 3px 0 0 var(--color-accent);
+}
+.os-dt tbody tr:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: -2px;
+}
+
+.os-dt-sticky thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.os-dt-sticky.os-dt-plain thead th {
+  background: var(--color-background-surface);
+}
+
+/* Sortable headers */
+.os-dt-sort {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  margin: -2px -6px;
+  padding: 2px 6px;
+  border: 0;
+  border-radius: calc(var(--radius-inner) - 2px);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  transition:
+    background-color var(--duration-fast) var(--ease-standard),
+    color var(--duration-fast) var(--ease-standard);
+}
+.os-dt-sort .os-glyph {
+  width: 14px;
+  height: 14px;
+  opacity: 0.4;
+  transition: opacity var(--duration-fast) var(--ease-standard);
+}
+.os-dt-sort:hover {
+  background: var(--color-overlay-hover);
+  color: var(--color-text-primary);
+}
+.os-dt-sort:hover .os-glyph {
+  opacity: 0.8;
+}
+.os-dt-sort-on {
+  color: var(--color-text-primary);
+}
+.os-dt-sort-on .os-glyph {
+  opacity: 1;
+  color: var(--color-accent);
+}
+.os-dt-sort:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 1px;
+}
+th.os-dt-align-end .os-dt-sort {
+  flex-direction: row-reverse;
+}
+
+/* Selection column */
+.os-dt .os-dt-select {
+  width: 16px;
+  padding-right: 0;
+}
+.os-table-check {
+  appearance: none;
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  border-radius: 5px;
+  background: var(--color-background-surface);
+  box-shadow: inset 0 0 0 1.5px var(--color-border-emphasized);
+  vertical-align: middle;
+  cursor: pointer;
+  transition:
+    background-color var(--duration-fast) var(--ease-standard),
+    box-shadow var(--duration-fast) var(--ease-standard);
+}
+.os-table-check:hover {
+  box-shadow: inset 0 0 0 1.5px var(--color-accent);
+}
+.os-table-check:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+.os-table-check::after {
+  content: "";
+  width: 8px;
+  height: 4px;
+  border-left: 2px solid var(--color-on-accent);
+  border-bottom: 2px solid var(--color-on-accent);
+  transform: translateY(-1px) rotate(-45deg);
+  opacity: 0;
+}
+.os-table-check:checked,
+.os-table-check:indeterminate {
+  background: var(--color-accent);
+  box-shadow: none;
+}
+.os-table-check:checked::after {
+  opacity: 1;
+}
+.os-table-check:indeterminate::after {
+  height: 0;
+  border-left: 0;
+  transform: none;
+  opacity: 1;
+}
+
+/* States */
+.os-dt-empty {
+  padding: var(--spacing-10) var(--os-dt-pad-x) !important;
+  text-align: center;
+  color: var(--color-text-secondary);
+}
+.os-dt-skeleton {
+  display: block;
+  width: 70%;
+  height: 10px;
+  border-radius: var(--radius-full);
+  background: var(--color-skeleton);
+  animation: os-dt-shimmer 1.4s var(--ease-standard) infinite;
+}
+.os-dt-loading td:nth-child(2n) .os-dt-skeleton {
+  width: 40%;
+}
+.os-dt-loading:nth-child(2n) .os-dt-skeleton {
+  animation-delay: 0.15s;
+}
+@keyframes os-dt-shimmer {
+  50% {
+    opacity: 0.45;
+  }
+}
+
+/* Footer — count and pager */
+.os-dt-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-3);
+  min-height: 44px;
+  padding: var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--os-dt-pad-x);
+  border-top: 1px solid var(--color-border);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  box-sizing: border-box;
+}
+.os-dt-plain .os-dt-footer {
+  border-top: 0;
+  padding-left: 0;
+}
+.os-dt-pager {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .os-dt-skeleton {
+    animation: none;
+  }
+}