@star-ng/ui 0.0.0-stage → 0.1.0

package/styles/controls/_panel.scss

@@ -0,0 +1,83 @@
+// Panel and fieldset (they use the collapsing region of the accordion).
+@use '../shared' as *;
+
+.star-panel-box {
+  display: block;
+  border: 1px solid var(--star-border);
+  border-radius: var(--star-radius-lg);
+  background: var(--star-surface);
+}
+.star-panel-box__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-block: 0.875rem;
+  padding-inline: 1.25rem 1rem;
+  border-bottom: 1px solid var(--star-border);
+
+  .star-panel-box--collapsed & {
+    border-bottom-color: transparent;
+  }
+}
+.star-panel-box__title {
+  margin: 0;
+  font: var(--star-type-title-sm);
+  color: var(--star-text-strong);
+}
+.star-panel-box__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.star-panel-box__toggle i {
+  transition: rotate var(--star-duration-base) $ease;
+}
+.star-panel-box--collapsed .star-panel-box__toggle i {
+  rotate: -90deg;
+
+  // A collapsed panel points toward the inline end: right in LTR, left in RTL.
+  &:dir(rtl) {
+    rotate: 90deg;
+  }
+}
+.star-panel-box__body {
+  padding: 1.25rem;
+  font: var(--star-type-body-lg);
+}
+
+.star-fieldset {
+  margin: 0;
+  padding: 0.5rem 1.25rem 1.25rem;
+  border: 1px solid var(--star-border);
+  border-radius: var(--star-radius-lg);
+}
+.star-fieldset--collapsed {
+  padding-bottom: 0.5rem;
+}
+.star-fieldset__legend {
+  padding: 0 0.5rem;
+  font: var(--star-type-label);
+  color: var(--star-text-muted);
+}
+.star-fieldset__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid var(--star-accent);
+    border-radius: 4px;
+  }
+}
+.star-fieldset__body {
+  display: grid;
+  gap: 1rem;
+  padding-top: 0.75rem;
+}

package/styles/controls/_popover.scss

@@ -0,0 +1,40 @@
+// Popover and the confirm popup.
+@use '../shared' as *;
+
+.star-popover {
+  max-width: min(24rem, calc(100vw - 2rem));
+  padding: 1rem;
+  border: 1px solid var(--star-border);
+  border-radius: var(--star-radius-lg);
+  background: var(--star-surface);
+  color: var(--star-text);
+  box-shadow: var(--star-shadow-lg);
+  font: var(--star-type-body-lg);
+  outline: none;
+  animation: star-panel-in var(--star-duration-base) $ease;
+}
+.star-confirm--popup {
+  gap: 0.75rem;
+
+  .star-confirm__icon {
+    width: 2.25rem;
+    height: 2.25rem;
+    font-size: 1rem;
+  }
+  .star-confirm__message {
+    margin-top: 0.375rem;
+  }
+}
+.star-confirm__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .star-popover {
+    animation: none;
+    transition: none;
+  }
+}

package/styles/controls/_progress-bar.scss

@@ -0,0 +1,74 @@
+// Progress bar.
+@use '../shared' as *;
+
+.star-progress {
+  --star-tone: var(--star-primary);
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.star-progress--success {
+  --star-tone: var(--star-success);
+}
+.star-progress--warn {
+  --star-tone: var(--star-warning);
+}
+.star-progress--danger {
+  --star-tone: var(--star-danger);
+}
+.star-progress--info {
+  --star-tone: var(--star-accent);
+}
+.star-progress__track {
+  position: relative;
+  flex: 1;
+  height: 0.5rem;
+  overflow: hidden;
+  border-radius: var(--star-radius-pill);
+  background: var(--star-border);
+}
+.star-progress--thin .star-progress__track {
+  height: 0.25rem;
+}
+.star-progress__fill {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  border-radius: inherit;
+  background: var(--star-tone);
+  transition: width var(--star-duration-slow) $ease;
+
+  .star-progress--indeterminate & {
+    width: 40%;
+    animation: star-indeterminate 1.4s ease-in-out infinite;
+
+    &:dir(rtl) {
+      animation-name: star-indeterminate-rtl;
+    }
+  }
+}
+@keyframes star-indeterminate {
+  from {
+    translate: -100% 0;
+  }
+  to {
+    translate: 250% 0;
+  }
+}
+// The fill starts at the right edge in right-to-left and runs to the left.
+@keyframes star-indeterminate-rtl {
+  from {
+    translate: 100% 0;
+  }
+  to {
+    translate: -250% 0;
+  }
+}
+.star-progress__value {
+  min-width: 2.75rem;
+  font: var(--star-type-body);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--star-text-strong);
+  text-align: end;
+}

package/styles/controls/_select-button.scss

@@ -0,0 +1,61 @@
+// Select button and toggle button.
+// Select button / toggle button (segmented control)
+.star-segmented {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  border: 1px solid var(--star-border);
+  border-radius: var(--star-radius-pill);
+  background: var(--star-surface-muted);
+}
+.star-segmented--invalid {
+  border-color: var(--star-danger);
+}
+.star-segmented__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 1rem;
+  border: 0;
+  border-radius: var(--star-radius-pill);
+  background: transparent;
+  color: var(--star-text-muted);
+  font: var(--star-type-body-lg);
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background-color var(--star-duration-fast) ease,
+    color var(--star-duration-fast) ease,
+    box-shadow var(--star-duration-fast) ease;
+
+  &:hover:not(:disabled) {
+    color: var(--star-text-strong);
+  }
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--star-focus-ring);
+  }
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+}
+.star-segmented--sm .star-segmented__item {
+  padding: 0.3rem 0.75rem;
+  font-size: 12px;
+}
+.star-segmented__item--on {
+  background: var(--star-surface);
+  color: var(--star-primary);
+  box-shadow: var(--star-shadow-sm);
+}
+.star-toggle-btn {
+  border: 1px solid var(--star-border);
+  background: var(--star-surface);
+
+  &.star-segmented__item--on {
+    border-color: var(--star-primary);
+    background: var(--star-primary-soft);
+  }
+}

package/styles/controls/_select.scss

@@ -0,0 +1,216 @@
+// Select and multi-select: control shell and floating panel.
+@use '../shared' as *;
+
+.star-select {
+  display: block;
+  min-width: 12rem;
+}
+.star-select__control {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  border: 1px solid var(--star-border);
+  border-radius: var(--star-input-radius);
+  background: var(--star-surface-muted);
+  padding-inline-end: 0.75rem;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease,
+    background-color 0.15s ease;
+
+  &:has(.star-select__trigger:focus-visible),
+  .star-select--open & {
+    border-color: var(--star-accent);
+    box-shadow: var(--star-focus-ring);
+    background: var(--star-surface);
+  }
+}
+.star-select--invalid .star-select__control {
+  border-color: var(--star-danger);
+}
+.star-select--disabled .star-select__control {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.star-select__trigger {
+  flex: 1;
+  min-width: 0;
+  padding-block: 0.625rem;
+  padding-inline: 0.875rem 0.25rem;
+  font-size: 0.9rem;
+  font-weight: var(--star-input-font-weight);
+  color: var(--star-text-strong);
+  cursor: pointer;
+  outline: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .star-select--disabled & {
+    cursor: not-allowed;
+  }
+}
+.star-cascade__trigger {
+  border: 0;
+  background: none;
+  font-family: inherit;
+  text-align: start;
+}
+.star-select--sm .star-select__control {
+  border-radius: var(--star-radius-md);
+}
+.star-select--sm .star-select__trigger {
+  padding-block: 0.5rem;
+  padding-inline-start: 0.75rem;
+  font-size: 0.8125rem;
+}
+.star-select__placeholder {
+  color: var(--star-text-muted);
+  font-weight: inherit;
+}
+.star-select__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin-block: -0.25rem;
+}
+.star-select__caret {
+  color: var(--star-text-soft);
+  transition: rotate var(--star-duration-base) $ease;
+  .star-select--open & {
+    rotate: 180deg;
+  }
+}
+.star-select__icon-btn {
+  display: inline-grid;
+  place-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--star-text-muted);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--star-border);
+    color: var(--star-text);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--star-accent);
+  }
+}
+
+// Floating panel shared by select, multi-select (CDK overlay rendered as a popover).
+.star-panel {
+  overflow: hidden;
+  border: 1px solid var(--star-border);
+  border-radius: var(--star-radius-lg);
+  background: var(--star-surface);
+  box-shadow: var(--star-shadow-lg);
+  font: var(--star-type-body-lg);
+  color: var(--star-text);
+  animation: star-panel-in var(--star-duration-base) $ease;
+}
+@keyframes star-panel-in {
+  from {
+    opacity: 0;
+    translate: 0 -4px;
+  }
+}
+.star-panel__filter {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--star-border);
+  color: var(--star-text-muted);
+
+  .star-input {
+    flex: 1;
+  }
+}
+.star-panel__toggle-all {
+  display: inline-flex;
+  padding: 0.25rem;
+  border: 0;
+  background: none;
+  cursor: pointer;
+}
+.star-panel__toggle-label {
+  font: var(--star-type-label);
+}
+
+.star-listbox {
+  margin: 0;
+  padding: 0.375rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  list-style: none;
+}
+.star-listbox__group {
+  padding: 0.5rem 0.75rem 0.25rem;
+  font: var(--star-type-label);
+  color: var(--star-text-muted);
+}
+.star-listbox__spacer {
+  padding: 0;
+}
+.star-listbox--virtual {
+  .star-listbox__option,
+  .star-listbox__group {
+    box-sizing: border-box;
+    height: var(--star-item-size);
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .star-listbox__group {
+    display: flex;
+    align-items: flex-end;
+  }
+  .star-listbox__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+.star-listbox__option {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--star-radius-sm);
+  font-weight: 600;
+  cursor: pointer;
+  user-select: none;
+
+  &[aria-disabled='true'] {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+}
+.star-listbox__option--active {
+  background: var(--star-surface-muted);
+  outline: 1px solid var(--star-border);
+}
+.star-listbox__option--selected {
+  color: var(--star-primary);
+  background: var(--star-primary-soft);
+}
+.star-select--multi .star-listbox__option--selected {
+  color: var(--star-text);
+  background: transparent;
+}
+.star-select--multi .star-listbox__option--selected.star-listbox__option--active {
+  background: var(--star-surface-muted);
+}
+.star-listbox__label {
+  flex: 1;
+  min-width: 0;
+}
+.star-listbox__empty {
+  padding: 0.75rem;
+  color: var(--star-text-muted);
+  text-align: center;
+}

package/styles/controls/_skeleton.scss

@@ -0,0 +1,43 @@
+// Skeleton placeholder.
+.star-skeleton {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--star-radius-sm);
+  background: var(--star-border);
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      color-mix(in srgb, var(--star-surface) 60%, transparent),
+      transparent
+    );
+    translate: -100% 0;
+    animation: star-wave 1.4s ease-in-out infinite;
+  }
+  // The wave runs in the reading direction. (`:dir()` cannot follow a pseudo-element.)
+  &:dir(rtl)::after {
+    translate: 100% 0;
+    animation-name: star-wave-rtl;
+  }
+}
+.star-skeleton--circle {
+  border-radius: 50%;
+}
+.star-skeleton--static::after {
+  display: none;
+}
+@keyframes star-wave {
+  to {
+    translate: 100% 0;
+  }
+}
+@keyframes star-wave-rtl {
+  to {
+    translate: -100% 0;
+  }
+}

package/styles/controls/_slider.scss

@@ -0,0 +1,163 @@
+// Slider, range slider and rating.
+// Slider (native range input)
+.star-slider {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.star-slider__input {
+  --star-fill: 0%;
+  flex: 1;
+  width: 100%;
+  height: 1.5rem;
+  margin: 0;
+  background: transparent;
+  appearance: none;
+  cursor: pointer;
+
+  &::-webkit-slider-runnable-track {
+    height: 0.375rem;
+    border-radius: var(--star-radius-pill);
+    background: linear-gradient(
+      to right,
+      var(--star-primary) var(--star-fill),
+      var(--star-border) var(--star-fill)
+    );
+  }
+  // A native range input runs from right to left in right-to-left: the fill follows.
+  &:dir(rtl)::-webkit-slider-runnable-track {
+    background: linear-gradient(
+      to left,
+      var(--star-primary) var(--star-fill),
+      var(--star-border) var(--star-fill)
+    );
+  }
+  &::-moz-range-track {
+    height: 0.375rem;
+    border-radius: var(--star-radius-pill);
+    background: var(--star-border);
+  }
+  &::-moz-range-progress {
+    height: 0.375rem;
+    border-radius: var(--star-radius-pill);
+    background: var(--star-primary);
+  }
+  &::-webkit-slider-thumb {
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-top: -0.4375rem;
+    border: 3px solid var(--star-primary);
+    border-radius: 50%;
+    background: var(--star-surface);
+    box-shadow: var(--star-shadow-sm);
+    appearance: none;
+  }
+  &::-moz-range-thumb {
+    width: 0.875rem;
+    height: 0.875rem;
+    border: 3px solid var(--star-primary);
+    border-radius: 50%;
+    background: var(--star-surface);
+  }
+  &:focus-visible {
+    outline: none;
+  }
+  &:focus-visible::-webkit-slider-thumb {
+    box-shadow: var(--star-focus-ring-primary);
+  }
+  &:focus-visible::-moz-range-thumb {
+    box-shadow: var(--star-focus-ring-primary);
+  }
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+.star-slider__value {
+  min-width: 3rem;
+  font: var(--star-type-body-lg);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--star-text-strong);
+  text-align: end;
+}
+// Range: two inputs stacked; only the thumbs take pointer events.
+.star-slider__track {
+  position: relative;
+  flex: 1;
+  height: 1.5rem;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: calc(50% - 0.1875rem);
+    height: 0.375rem;
+    border-radius: var(--star-radius-pill);
+  }
+  &::before {
+    inset-inline: 0;
+    background: var(--star-border);
+  }
+  &::after {
+    inset-inline: var(--star-from) calc(100% - var(--star-to));
+    background: var(--star-primary);
+  }
+  .star-slider__input {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    pointer-events: none;
+
+    &::-webkit-slider-runnable-track {
+      background: transparent;
+    }
+    &::-moz-range-track,
+    &::-moz-range-progress {
+      background: transparent;
+    }
+    &::-webkit-slider-thumb {
+      pointer-events: auto;
+    }
+    &::-moz-range-thumb {
+      pointer-events: auto;
+    }
+  }
+}
+
+// Rating
+.star-rating {
+  display: inline-flex;
+  gap: 0.125rem;
+}
+.star-rating__star {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 4px;
+  color: var(--star-border-strong);
+  font-size: 1.375rem;
+  cursor: pointer;
+  transition:
+    color var(--star-duration-fast) ease,
+    scale var(--star-duration-fast) ease;
+
+  &:has(input:focus-visible) {
+    outline: 2px solid var(--star-accent);
+  }
+  &:hover {
+    scale: 1.1;
+  }
+}
+.star-rating__star--on {
+  color: var(--star-warning);
+}
+.star-rating--readonly .star-rating__star {
+  cursor: default;
+
+  &:hover {
+    scale: 1;
+  }
+}

package/styles/controls/_spinner.scss

@@ -0,0 +1,34 @@
+// Spinner.
+.star-spinner {
+  display: inline-block;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    animation: star-spin 1.4s linear infinite;
+  }
+}
+.star-spinner__track {
+  stroke: var(--star-border);
+}
+.star-spinner__arc {
+  stroke: var(--star-primary);
+  stroke-linecap: round;
+  stroke-dasharray: 90 150;
+  stroke-dashoffset: 0;
+  animation: star-dash 1.4s ease-in-out infinite;
+}
+@keyframes star-dash {
+  0% {
+    stroke-dasharray: 1 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90 150;
+    stroke-dashoffset: -124;
+  }
+}