sid-ui 0.0.0-stage → 0.1.0

package/src/styles/components/notification.css

@@ -0,0 +1,350 @@
+/* Notification — a feed row: unread mark, leading visual, title, time, action. */
+
+.os-notes {
+  width: 100%;
+  color: var(--color-text-primary);
+}
+
+.os-notes-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-3);
+  margin-bottom: var(--spacing-2);
+}
+
+.os-notes-header > * {
+  flex: 1;
+  min-width: 0;
+}
+
+.os-notes-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.os-note {
+  display: flex;
+  align-items: stretch;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.os-note:last-child {
+  border-bottom: 0;
+}
+
+.os-note-main {
+  flex: 1;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 10px auto minmax(0, 1fr) auto;
+  column-gap: var(--spacing-3);
+  align-items: center;
+  padding: var(--spacing-3) var(--spacing-2);
+  color: inherit;
+  text-decoration: none;
+  text-align: start;
+  background: transparent;
+  border: 0;
+  font: inherit;
+  cursor: default;
+}
+
+a.os-note-main,
+button.os-note-main {
+  cursor: pointer;
+}
+
+a.os-note-main:hover,
+button.os-note-main:hover {
+  background: var(--surface-hover);
+}
+
+.os-note-main:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: -2px;
+}
+
+.os-note-unread .os-note-title {
+  font-weight: var(--font-weight-semibold);
+}
+
+.os-note-mark {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  justify-self: center;
+  background: transparent;
+}
+
+.os-note-unread .os-note-mark {
+  background: var(--color-accent);
+}
+
+.os-note-tone-success.os-note-mark {
+  background: var(--color-success);
+}
+.os-note-tone-warning.os-note-mark {
+  background: var(--color-warning);
+}
+.os-note-tone-danger.os-note-mark {
+  background: var(--color-error);
+}
+.os-note-tone-neutral.os-note-mark {
+  background: var(--color-text-secondary);
+}
+
+.os-note:not(.os-note-unread) .os-note-mark {
+  background: transparent;
+}
+
+.os-note-start {
+  display: flex;
+  align-items: center;
+}
+
+.os-note-main:has(.os-note-start-empty) {
+  grid-template-columns: 10px minmax(0, 1fr) auto;
+}
+
+.os-note-start-empty {
+  display: none;
+}
+
+.os-note-action {
+  display: flex;
+  align-items: center;
+  padding-inline-end: var(--spacing-2);
+}
+
+.os-note-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-0-5);
+  min-width: 0;
+}
+
+.os-note-title,
+.os-note-description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.os-note-title {
+  font-size: var(--font-size-base);
+  line-height: 1.3;
+}
+
+.os-note-description,
+.os-note-time {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  line-height: 1.3;
+}
+
+.os-note-time {
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+  padding-inline-start: var(--spacing-3);
+}
+
+.os-note-dismiss {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  width: var(--control-height);
+  height: var(--control-height);
+  margin-inline-end: var(--spacing-1);
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-element);
+  background: transparent;
+  color: var(--color-icon-secondary);
+  cursor: pointer;
+}
+
+.os-note-dismiss:hover {
+  background: var(--surface-hover);
+  color: var(--color-icon-primary);
+}
+
+.os-note-dismiss:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 1px;
+}
+
+/* Triggered messages — a card at a viewport corner.
+   The layer is a manual popover so it paints above sticky chrome such as
+   the side nav search, the same way toasts do. */
+
+.os-note-layer {
+  position: fixed;
+  inset: 0;
+  z-index: 500;
+  box-sizing: border-box;
+  width: auto;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.os-note-layer:popover-open {
+  display: block;
+}
+
+.os-note-stack {
+  position: fixed;
+  z-index: 500;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  width: min(22.5rem, calc(100% - var(--spacing-8)));
+  pointer-events: none;
+}
+
+.os-note-stack-topStart {
+  top: var(--spacing-4);
+  inset-inline-start: var(--spacing-4);
+}
+.os-note-stack-topEnd {
+  top: var(--spacing-4);
+  inset-inline-end: var(--spacing-4);
+}
+.os-note-stack-bottomStart {
+  bottom: var(--spacing-4);
+  inset-inline-start: var(--spacing-4);
+}
+.os-note-stack-bottomEnd {
+  bottom: var(--spacing-4);
+  inset-inline-end: var(--spacing-4);
+}
+
+.os-note-stack-reverse {
+  flex-direction: column-reverse;
+  --os-note-from: var(--spacing-4);
+}
+
+.os-note-slot {
+  display: grid;
+  grid-template-rows: 1fr;
+  min-height: 0;
+  pointer-events: auto;
+  animation: os-note-open var(--duration-slow) var(--ease-standard);
+  transition: grid-template-rows var(--duration-slow) var(--ease-standard);
+}
+
+.os-note-slot-leaving {
+  grid-template-rows: 0fr;
+  pointer-events: none;
+  animation: none;
+}
+
+.os-note-card {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+  min-height: 0;
+  overflow: hidden;
+  padding: var(--spacing-3) var(--spacing-2) var(--spacing-3) var(--spacing-3);
+  background: var(--color-background-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-container);
+  box-shadow: 0 var(--spacing-2) var(--spacing-6) var(--color-shadow);
+  animation: os-note-in var(--duration-slow) var(--ease-standard);
+}
+
+.os-note-slot-leaving .os-note-card {
+  animation: os-note-out var(--duration-slow) var(--ease-standard) forwards;
+}
+
+@keyframes os-note-open {
+  from {
+    grid-template-rows: 0fr;
+  }
+}
+
+@keyframes os-note-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--os-note-from, calc(-1 * var(--spacing-4))));
+  }
+}
+
+@keyframes os-note-out {
+  to {
+    opacity: 0;
+    transform: translateY(var(--os-note-from, calc(-1 * var(--spacing-4))));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .os-note-slot,
+  .os-note-card,
+  .os-note-slot-leaving .os-note-card {
+    animation: none;
+    transition-duration: 0.01ms;
+  }
+}
+
+.os-note-card-mark {
+  width: var(--spacing-2);
+  height: var(--spacing-2);
+  margin-top: var(--spacing-1);
+  border-radius: var(--radius-full);
+  background: var(--color-accent);
+  flex-shrink: 0;
+}
+
+.os-note-card-success .os-note-card-mark {
+  background: var(--color-success);
+}
+.os-note-card-warning .os-note-card-mark {
+  background: var(--color-warning);
+}
+.os-note-card-danger .os-note-card-mark {
+  background: var(--color-error);
+}
+.os-note-card-neutral .os-note-card-mark {
+  background: var(--color-text-secondary);
+}
+
+.os-note-card-copy {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-0-5);
+}
+
+.os-note-card-title {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.3;
+}
+
+.os-note-card-description {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  line-height: 1.4;
+}
+
+.os-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/src/styles/components/picker.css

@@ -0,0 +1,114 @@
+/* Shared pieces for typed date/time fields: glyphs, segments, the dropdown panel.
+   Only canonical tokens (--color-*, --spacing-*, --radius-*, --font-size-*) so
+   the kit renders the same under tokens.css or the generated theme. */
+
+.os-glyph {
+  flex: none;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+/* Typed segments — "09 : 30 AM", "09 / 24 / 2026" */
+.os-segments {
+  display: inline-flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  gap: 1px;
+  font-variant-numeric: tabular-nums;
+  font-size: var(--font-size-base);
+}
+.os-control-sm .os-segments {
+  font-size: var(--font-size-sm);
+}
+.os-control-lg .os-segments {
+  font-size: var(--font-size-lg);
+}
+.os-segment {
+  min-width: 2ch;
+  padding: 1px 3px;
+  border-radius: calc(var(--radius-inner) / 2);
+  text-align: center;
+  color: var(--color-text-primary);
+  outline: none;
+  cursor: text;
+  user-select: none;
+  transition:
+    background-color var(--duration-fast) var(--ease-standard),
+    color var(--duration-fast) var(--ease-standard);
+}
+.os-segment:hover {
+  background: var(--color-overlay-hover);
+}
+.os-segment:focus {
+  background: var(--color-accent);
+  color: var(--color-on-accent);
+}
+.os-segment-empty {
+  color: var(--color-text-disabled);
+}
+.os-segment-divider {
+  color: var(--color-text-disabled);
+  user-select: none;
+}
+.os-segment + .os-segment {
+  margin-left: var(--spacing-1);
+}
+
+/* Field shell + dropdown */
+.os-picker {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: var(--os-picker-width, 240px);
+}
+.os-picker-control {
+  padding-right: var(--spacing-1);
+  cursor: text;
+}
+.os-picker-control-open {
+  border-color: var(--color-accent);
+}
+.os-picker-trigger {
+  flex: none;
+}
+
+.os-picker-panel {
+  position: fixed;
+  z-index: var(--z-overlay, 100);
+  box-sizing: border-box;
+  padding: var(--spacing-3);
+  background: var(--color-background-popover);
+  border-radius: var(--radius-container);
+  box-shadow:
+    0 0 0 1px var(--color-border),
+    var(--shadow-high, var(--elevation-3));
+  animation: os-pop-in var(--duration-fast) var(--ease-standard);
+  transform-origin: top left;
+}
+@keyframes os-pop-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.98);
+  }
+}
+.os-picker-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+}
+.os-picker-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  padding-top: var(--spacing-3);
+  border-top: 1px solid var(--color-border);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .os-picker-panel {
+    animation: none;
+  }
+}

package/src/styles/components/pill-nav.css

@@ -0,0 +1,179 @@
+/* PillNav — icon pills; the current page opens to icon + label in the accent colour while one
+   highlight slides beneath it. Uses only tokens the Astryx theme ships (astryx.css, theme.css),
+   so the motion and sizes resolve in every app that loads joined.css. */
+
+.os-pill-nav {
+  min-width: 0;
+}
+
+.os-pill-track {
+  position: relative;
+}
+
+.os-pill-list {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* The open pill keeps its full label; icon-only pills give way first on narrow bars. */
+.os-pill-list > li:has(.os-pill[data-active="true"]) {
+  flex-shrink: 0;
+}
+
+/* The highlight: placed and moved by PillNav, following the active pill frame by frame. */
+.os-pill-indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  border-radius: var(--radius-full);
+  background-color: var(--color-accent-muted);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--duration-fast) var(--ease-standard);
+}
+
+.os-pill-indicator[data-visible="true"] {
+  opacity: 1;
+}
+
+.os-pill {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: calc(var(--size-element-md) + var(--spacing-1));
+  padding-inline: var(--spacing-3);
+  border-radius: var(--radius-full);
+  color: var(--color-icon-secondary);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  text-decoration: none;
+  white-space: nowrap;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    background-color var(--duration-fast) var(--ease-standard),
+    color var(--duration-medium) var(--ease-standard),
+    transform var(--duration-fast) var(--ease-standard);
+}
+
+.os-pill:hover {
+  background-color: var(--color-overlay-hover);
+  color: var(--color-icon-primary);
+}
+
+.os-pill:active {
+  transform: scale(0.96);
+}
+
+.os-pill:focus-visible {
+  outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
+  outline-offset: var(--spacing-0-5);
+}
+
+.os-pill[data-active="true"],
+.os-pill[data-active="true"]:hover {
+  background-color: transparent;
+  color: var(--color-accent);
+}
+
+.os-pill-icon {
+  position: relative;
+  display: inline-flex;
+  font-size: var(--font-size-xl);
+}
+
+/* A small count bubble on the icon's top-end corner. */
+.os-pill-count {
+  position: absolute;
+  top: calc(-1 * var(--spacing-1-5));
+  inset-inline-start: calc(100% - var(--spacing-2));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--spacing-4);
+  height: var(--spacing-4);
+  padding-inline: var(--spacing-1);
+  box-sizing: border-box;
+  border-radius: var(--radius-full);
+  background: var(--color-accent);
+  color: var(--color-on-accent);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  box-shadow: 0 0 0 var(--spacing-0-5) var(--color-background-surface);
+  pointer-events: none;
+}
+
+/* The label track opens from 0 to its natural width (0fr → 1fr), so the pill and every
+   neighbour glide instead of jumping. The gap before the text lives inside the track. */
+.os-pill-label {
+  display: grid;
+  grid-template-columns: 0fr;
+  transition: grid-template-columns var(--duration-medium) var(--ease-standard);
+}
+
+.os-pill-label > span {
+  min-width: 0;
+  overflow: hidden;
+  padding-inline-start: var(--spacing-1-5);
+  opacity: 0;
+  transform: translateX(calc(-1 * var(--spacing-1)));
+  transition:
+    opacity var(--duration-fast) var(--ease-standard),
+    transform var(--duration-medium) var(--ease-standard);
+}
+
+.os-pill[data-active="true"] .os-pill-label {
+  grid-template-columns: 1fr;
+}
+
+/* Opening: the text fades in just behind the width, so it never shows clipped. */
+.os-pill[data-active="true"] .os-pill-label > span {
+  opacity: 1;
+  transform: none;
+  transition-delay: var(--duration-fast), 0s;
+}
+
+/* Small screens: the same pills as a bar along the bottom edge. */
+.os-pill-nav[data-placement="bottom"] {
+  position: fixed;
+  inset-inline: 0;
+  bottom: 0;
+  z-index: 1;
+  padding: var(--spacing-2);
+  padding-bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom));
+  background: var(--color-background-surface);
+  border-top: var(--border-width) solid var(--color-border);
+}
+
+.os-pill-nav-spacer {
+  height: calc(
+    var(--size-element-md) + var(--spacing-1) + 2 * var(--spacing-2) + env(safe-area-inset-bottom)
+  );
+}
+
+.os-pill-nav[data-placement="bottom"] .os-pill-list {
+  justify-content: space-between;
+  gap: 0;
+}
+
+.os-pill-nav[data-placement="bottom"] .os-pill {
+  padding-inline: var(--spacing-2);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .os-pill,
+  .os-pill-label,
+  .os-pill-label > span,
+  .os-pill-indicator {
+    transition: none;
+  }
+  .os-pill:active {
+    transform: none;
+  }
+}