@star-ng/ui 0.0.0-stage → 0.2.0

package/styles/controls/_chart.scss

@@ -0,0 +1,214 @@
+// Chart: SVG marks, legend, tooltip and data table.
+.star-chart {
+  display: block;
+  font: var(--star-type-body);
+  color: var(--star-text);
+}
+.star-chart__figure {
+  margin: 0;
+}
+.star-chart__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.5rem;
+}
+.star-chart__title {
+  font: var(--star-type-title-sm);
+  color: var(--star-text-strong);
+}
+.star-chart__legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
+  margin: 0 0 0.5rem;
+  padding: 0;
+  list-style: none;
+  color: var(--star-text-muted);
+
+  li {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+}
+.star-chart__swatch {
+  display: inline-block;
+  flex: none;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 2px;
+}
+.star-chart__plot {
+  position: relative;
+}
+// The plot keeps its left-to-right geometry in right-to-left: numeric axes run left to right, and
+// `text-anchor` of the axis labels is relative to the text direction. The legend, the title and the data
+// table follow the page direction.
+.star-chart__svg {
+  direction: ltr;
+  display: block;
+  width: 100%;
+  height: auto;
+  overflow: visible;
+}
+.star-chart__grid {
+  stroke: var(--star-border);
+  stroke-width: 1;
+}
+.star-chart__axis {
+  fill: var(--star-text-muted);
+  font: var(--star-type-body-sm);
+  font-variant-numeric: tabular-nums;
+}
+.star-chart__bar,
+.star-chart__slice {
+  stroke: var(--star-surface);
+  stroke-width: 0;
+  transition: opacity var(--star-duration-fast) ease;
+}
+.star-chart__line {
+  fill: none;
+  stroke-width: 2;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+.star-chart__dot {
+  stroke: var(--star-surface);
+  stroke-width: 2;
+}
+.star-chart__crosshair {
+  stroke: var(--star-border-strong);
+  stroke-dasharray: 3 3;
+}
+.star-chart__mark--dim {
+  opacity: 0.35;
+}
+.star-chart__hit {
+  fill: transparent;
+}
+.star-chart__total {
+  fill: var(--star-text-strong);
+  font: var(--star-type-title-lg);
+}
+.star-chart__total-label {
+  fill: var(--star-text-muted);
+  font: var(--star-type-body-sm);
+}
+.star-chart__tip {
+  position: absolute;
+  z-index: 1;
+  display: grid;
+  gap: 0.125rem;
+  padding: 0.5rem 0.625rem;
+  border-radius: var(--star-radius-sm);
+  background: var(--star-tooltip-surface);
+  color: #fff;
+  font: var(--star-type-body-sm);
+  white-space: nowrap;
+  translate: -50% 0;
+  pointer-events: none;
+  box-shadow: var(--star-shadow-md);
+}
+.star-chart__tip-title {
+  font-weight: 600;
+}
+.star-chart__tip-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+.star-chart__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-variant-numeric: tabular-nums;
+
+  th,
+  td {
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid var(--star-border);
+    text-align: end;
+  }
+  th:first-child {
+    text-align: start;
+  }
+  thead th {
+    font: var(--star-type-label);
+    color: var(--star-text-muted);
+  }
+}
+
+// Area chart: soft fill under a line.
+.star-chart__area {
+  stroke: none;
+  opacity: 0.16;
+}
+
+// Marks of the stacked bar, radar, polar area and scatter charts. The fill is the series color. The
+// outline is the series color mixed with the strong text color: it keeps 3:1 contrast with the
+// surface in both themes, also for the light slots (3 to 5 on white).
+.star-chart__mark {
+  --mark-edge: color-mix(in srgb, var(--mark) 65%, var(--star-text-strong));
+  fill: var(--mark);
+  stroke: var(--mark-edge);
+  stroke-width: 1.5;
+  stroke-linejoin: round;
+  transition: opacity var(--star-duration-fast) ease;
+}
+.star-chart__polygon {
+  fill-opacity: 0.18;
+  stroke-width: 2;
+}
+.star-chart__ring {
+  fill: none;
+  stroke: var(--star-border);
+  stroke-width: 1;
+}
+.star-chart__baseline {
+  stroke: var(--star-border-strong);
+  stroke-width: 1;
+}
+.star-chart__ring-label {
+  fill: var(--star-text-muted);
+  font: var(--star-type-body-sm);
+  font-variant-numeric: tabular-nums;
+  paint-order: stroke;
+  stroke: var(--star-surface);
+  stroke-width: 3;
+  stroke-linejoin: round;
+}
+.star-chart__axis-title {
+  fill: var(--star-text-muted);
+  font: var(--star-type-label);
+}
+.star-chart__swatch-shape {
+  display: inline-block;
+  flex: none;
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.star-chart__tip--corner {
+  top: 0;
+  left: 0;
+  translate: 0 0;
+}
+.star-chart__tip--point {
+  margin-top: 0.75rem;
+}
+.star-chart__tip-indent {
+  padding-inline-start: 1.125rem;
+}
+.star-chart__tip-total {
+  margin-top: 0.125rem;
+  padding-top: 0.25rem;
+  border-top: 1px solid rgb(255 255 255 / 0.3);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .star-chart__bar,
+  .star-chart__mark,
+  .star-chart__slice {
+    transition: none;
+  }
+}

package/styles/controls/_chip.scss

@@ -0,0 +1,51 @@
+// Chip and tags field.
+.star-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.625rem;
+  border-radius: var(--star-radius-pill);
+  background: var(--star-accent-soft);
+  color: var(--star-accent);
+  font: var(--star-type-body-sm);
+  font-weight: 600;
+}
+.star-chip--sm {
+  padding: 0.125rem 0.5rem;
+}
+.star-chip__remove {
+  display: inline-grid;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.7;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+// Chip component extras
+.star-chip__image {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-inline-start: -0.375rem;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.star-tags__control {
+  cursor: text;
+}
+.star-tags__list {
+  display: contents;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.star-tags__error {
+  margin-top: 0.375rem;
+}

package/styles/controls/_choice.scss

@@ -0,0 +1,153 @@
+// Checkbox, radio and toggle switch.
+@use '../shared' as *;
+
+.star-check,
+.star-radio,
+.star-switch {
+  display: inline-flex;
+  font: var(--star-type-body-lg);
+  color: var(--star-text);
+}
+.star-check__label,
+.star-radio__label,
+.star-switch__label {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  cursor: pointer;
+}
+.star-check__input,
+.star-radio__input,
+.star-switch__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: inherit;
+}
+.star-check__text:empty,
+.star-radio__text:empty {
+  display: none;
+}
+
+.star-check__box {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 1.5px solid var(--star-border-strong);
+  border-radius: var(--star-radius-xs);
+  background: var(--star-surface);
+  color: var(--star-on-tone);
+  font-size: 0.8rem;
+  transition:
+    background-color var(--star-duration-fast) ease,
+    border-color var(--star-duration-fast) ease,
+    box-shadow var(--star-duration-fast) ease;
+}
+.star-check__input:checked + .star-check__box,
+.star-check__input:indeterminate + .star-check__box,
+.star-listbox__option--selected .star-check__box,
+.star-panel__toggle-all[aria-checked='true'] .star-check__box,
+.star-panel__toggle-all[aria-checked='mixed'] .star-check__box {
+  background: var(--star-primary);
+  border-color: var(--star-primary);
+}
+.star-check__input:focus-visible + .star-check__box,
+.star-radio__input:focus-visible + .star-radio__dot,
+.star-switch__input:focus-visible + .star-switch__track {
+  box-shadow: var(--star-focus-ring-primary);
+}
+.star-check--invalid .star-check__box,
+.star-switch--invalid .star-switch__track {
+  border-color: var(--star-danger);
+}
+
+.star-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.star-radio-group--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1.25rem;
+}
+.star-radio__dot {
+  flex: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 1.5px solid var(--star-border-strong);
+  border-radius: 50%;
+  background: var(--star-surface);
+  transition:
+    border var(--star-duration-fast) ease,
+    box-shadow var(--star-duration-fast) ease;
+}
+.star-radio__input:checked + .star-radio__dot {
+  border: 6px solid var(--star-primary);
+}
+.star-radio-group[aria-invalid='true'] .star-radio__dot {
+  border-color: var(--star-danger);
+}
+
+.star-switch__track {
+  position: relative;
+  flex: none;
+  width: 2.5rem;
+  height: 1.5rem;
+  border: 1px solid transparent;
+  border-radius: var(--star-radius-pill);
+  background: var(--star-border-strong);
+  transition: background-color var(--star-duration-base) $ease;
+}
+.star-switch__thumb {
+  position: absolute;
+  top: 0.1875rem;
+  inset-inline-start: 0.1875rem;
+  width: 1.0625rem;
+  height: 1.0625rem;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: var(--star-shadow-sm);
+  transition: translate var(--star-duration-base) $ease;
+}
+.star-switch__input:checked + .star-switch__track {
+  background: var(--star-primary);
+}
+.star-switch__input:checked + .star-switch__track .star-switch__thumb {
+  translate: 1rem 0;
+
+  // The thumb starts at the inline-start edge, so it moves the other way in right-to-left.
+  &:dir(rtl) {
+    translate: -1rem 0;
+  }
+}
+.star-switch--sm .star-switch__track {
+  width: 2rem;
+  height: 1.25rem;
+}
+.star-switch--sm .star-switch__thumb {
+  width: 0.8125rem;
+  height: 0.8125rem;
+}
+.star-switch--sm .star-switch__input:checked + .star-switch__track .star-switch__thumb {
+  translate: 0.75rem 0;
+
+  &:dir(rtl) {
+    translate: -0.75rem 0;
+  }
+}
+.star-check--disabled,
+.star-radio--disabled,
+.star-switch--disabled {
+  opacity: 0.55;
+
+  label {
+    cursor: not-allowed;
+  }
+}

package/styles/controls/_data-display.scss

@@ -0,0 +1,124 @@
+// Tree table
+.star-tree-table__first {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding-inline-start: calc(var(--star-tree-level, 0) * 1.25rem);
+}
+.star-tree-table__toggle {
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+}
+.star-tree-table tr[role='row'],
+.star-tree-table tbody tr {
+  outline: none;
+
+  &:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--star-accent);
+  }
+}
+
+// Windowed rendering: rows come and go while the table scrolls, so the column widths must come from
+// the header and `width` of the columns, not from the rows that are in the DOM.
+.star-tree-table.star-table--virtual table {
+  table-layout: fixed;
+}
+
+// Data view
+.star-data-view {
+  display: block;
+}
+.star-data-view__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+}
+.star-data-view__items {
+  display: grid;
+  gap: 0.75rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.star-data-view__items--grid {
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
+}
+.star-data-view__item {
+  padding: 1rem;
+  border: 1px solid var(--star-border);
+  border-radius: var(--star-radius-lg);
+  background: var(--star-surface);
+}
+
+// Order list and pick list
+.star-order-list {
+  display: flex;
+  gap: 0.5rem;
+}
+.star-order-list__buttons,
+.star-pick-list__buttons {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.25rem;
+}
+.star-order-list__list,
+.star-pick-list__list {
+  flex: 1;
+  min-height: 10rem;
+  max-height: 16rem;
+  border: 1px solid var(--star-border);
+  border-radius: var(--star-radius-lg);
+  background: var(--star-surface);
+
+  .star-listbox__option:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--star-accent);
+  }
+}
+.star-order-list__grip {
+  color: var(--star-text-soft);
+}
+.star-pick-list {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 0.75rem;
+}
+// The empty text lies over the empty list: it cannot be a child of the listbox.
+.star-pick-list__box {
+  position: relative;
+}
+.star-pick-list__empty {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  pointer-events: none;
+}
+.star-pick-list__header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0 0 0.5rem;
+  font: var(--star-type-label);
+  color: var(--star-text-muted);
+}
+@media (width < 640px) {
+  .star-pick-list {
+    grid-template-columns: 1fr;
+  }
+  .star-pick-list__buttons {
+    flex-direction: row;
+    justify-content: center;
+    rotate: 90deg;
+
+    // The arrows are mirrored in right-to-left, so the turn goes the other way.
+    &:dir(rtl) {
+      rotate: -90deg;
+    }
+  }
+}