@star-ng/ui 0.0.0-stage → 0.2.0

package/styles/controls/_tag.scss

@@ -0,0 +1,84 @@
+// Tag and badge.
+.star-tag,
+.star-badge {
+  --star-tone: var(--star-primary);
+  --star-tone-soft: var(--star-primary-soft);
+}
+// A badge is a filled control: see `--star-primary-fill`. Severity classes below replace it.
+.star-badge {
+  --star-tone: var(--star-primary-fill);
+}
+.star-tag--secondary,
+.star-badge--secondary {
+  --star-tone: var(--star-text-muted);
+  --star-tone-soft: var(--star-surface-muted);
+}
+.star-tag--success,
+.star-badge--success {
+  --star-on-tone: var(--star-on-bright);
+  --star-tone: var(--star-success);
+  --star-tone-soft: var(--star-success-soft);
+}
+.star-tag--info,
+.star-badge--info {
+  --star-tone: var(--star-accent);
+  --star-tone-soft: var(--star-accent-soft);
+}
+.star-tag--warn,
+.star-badge--warn {
+  --star-on-tone: var(--star-on-bright);
+  --star-tone: var(--star-warning);
+  --star-tone-soft: var(--star-warning-soft);
+}
+.star-tag--danger,
+.star-badge--danger {
+  --star-tone: var(--star-danger);
+  --star-tone-soft: var(--star-danger-soft);
+}
+.star-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.2rem 0.55rem;
+  border-radius: var(--star-radius-xs);
+  background: var(--star-tone-soft);
+  // The tone alone is under 4.5:1 on its soft fill: mix it toward the strong text color
+  // (darker in the light theme, lighter in the dark theme).
+  color: color-mix(in srgb, var(--star-tone) 62%, var(--star-text-strong));
+  font: var(--star-type-label);
+  white-space: nowrap;
+}
+.star-tag--rounded {
+  border-radius: var(--star-radius-pill);
+}
+.star-badge {
+  display: inline-grid;
+  place-items: center;
+  min-width: 1.375rem;
+  height: 1.375rem;
+  padding: 0 0.375rem;
+  border-radius: var(--star-radius-pill);
+  background: var(--star-tone);
+  color: var(--star-on-tone);
+  font: 700 11px/1 var(--star-font-sans);
+}
+.star-badge--secondary {
+  background: var(--star-border);
+  color: var(--star-text);
+}
+.star-badge--sm {
+  min-width: 1.125rem;
+  height: 1.125rem;
+  font-size: 10px;
+}
+.star-badge--lg {
+  min-width: 1.75rem;
+  height: 1.75rem;
+  font-size: 13px;
+}
+.star-badge--dot {
+  min-width: 0.5rem;
+  width: 0.5rem;
+  height: 0.5rem;
+  padding: 0;
+}

package/styles/controls/_toast.scss

@@ -0,0 +1,141 @@
+// Toast: notification stack and message cards.
+@use '../shared' as *;
+
+.star-toast-stack {
+  position: fixed;
+  inset: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: min(24rem, calc(100vw - 2rem));
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+  border: 0;
+  background: transparent;
+  pointer-events: none;
+
+  &:not(:popover-open):empty {
+    display: none;
+  }
+}
+.star-toast-stack--top-right {
+  top: 1rem;
+  right: 1rem;
+}
+.star-toast-stack--top-left {
+  top: 1rem;
+  left: 1rem;
+}
+.star-toast-stack--top-center {
+  top: 1rem;
+  left: 50%;
+  translate: -50% 0;
+}
+.star-toast-stack--bottom-right {
+  right: 1rem;
+  bottom: 1rem;
+  flex-direction: column-reverse;
+}
+.star-toast-stack--bottom-left {
+  bottom: 1rem;
+  left: 1rem;
+  flex-direction: column-reverse;
+}
+// Logical corners: the start corner is the left one in LTR and the right one in RTL.
+.star-toast-stack--top-start {
+  top: 1rem;
+  inset-inline-start: 1rem;
+}
+.star-toast-stack--top-end {
+  top: 1rem;
+  inset-inline-end: 1rem;
+}
+.star-toast-stack--bottom-start {
+  bottom: 1rem;
+  inset-inline-start: 1rem;
+  flex-direction: column-reverse;
+}
+.star-toast-stack--bottom-end {
+  bottom: 1rem;
+  inset-inline-end: 1rem;
+  flex-direction: column-reverse;
+}
+.star-toast-stack--bottom-center {
+  bottom: 1rem;
+  left: 50%;
+  translate: -50% 0;
+  flex-direction: column-reverse;
+}
+.star-toast {
+  --star-tone: var(--star-accent);
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.875rem;
+  padding-inline-start: 1rem;
+  border: 1px solid color-mix(in srgb, var(--star-tone) 25%, var(--star-border));
+  border-inline-start: 4px solid var(--star-tone);
+  border-radius: var(--star-radius-lg);
+  background: var(--star-glass-surface-strong);
+  backdrop-filter: blur(var(--star-blur-md));
+  box-shadow: var(--star-shadow-lg);
+  pointer-events: auto;
+  animation: star-toast-in var(--star-duration-slow) $ease;
+}
+@keyframes star-toast-in {
+  from {
+    opacity: 0;
+    translate: 0 -0.5rem;
+  }
+}
+.star-toast--success {
+  --star-tone: var(--star-success);
+}
+.star-toast--warn {
+  --star-tone: var(--star-warning);
+}
+.star-toast--error {
+  --star-tone: var(--star-danger);
+}
+.star-toast__icon {
+  margin-top: 0.125rem;
+  color: var(--star-tone);
+  font-size: 1.25rem;
+}
+.star-toast__copy {
+  flex: 1;
+  min-width: 0;
+}
+.star-toast__summary {
+  margin: 0;
+  font: var(--star-type-title-sm);
+  font-size: 14px;
+  color: var(--star-text-strong);
+}
+.star-toast__detail {
+  margin: 0.125rem 0 0;
+  font: var(--star-type-body);
+  color: var(--star-text-muted);
+}
+.star-toast__close,
+.star-message__close {
+  display: inline-grid;
+  place-items: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--star-text-muted);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--star-surface-muted);
+    color: var(--star-text);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--star-accent);
+  }
+}

package/styles/controls/_tooltip.scss

@@ -0,0 +1,14 @@
+// Tooltip: small dark label shown by the tooltip directive.
+.star-tooltip {
+  display: block;
+  max-width: 18rem;
+  padding: 0.375rem 0.625rem;
+  border-radius: var(--star-radius-sm);
+  background: var(--star-tooltip-surface);
+  color: #fff;
+  font: var(--star-type-body-sm);
+  font-weight: 600;
+  box-shadow: var(--star-shadow-md);
+  pointer-events: none;
+  animation: star-panel-in var(--star-duration-fast) ease-out;
+}

package/styles/controls/_tree.scss

@@ -0,0 +1,113 @@
+// Tree and the tree panel of the tree select.
+.star-tree {
+  display: block;
+  overflow: hidden;
+  border: 1px solid var(--star-border);
+  border-radius: var(--star-radius-lg);
+  background: var(--star-surface);
+}
+.star-tree-select__panel .star-tree {
+  border: 0;
+  border-radius: 0;
+}
+.star-tree__list {
+  margin: 0;
+  padding: 0.375rem;
+  overflow-y: auto;
+  list-style: none;
+}
+.star-tree__item {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding-block: 0.375rem;
+  padding-inline: calc(0.5rem + var(--star-tree-level, 0) * 1.25rem) 0.5rem;
+  border-radius: var(--star-radius-sm);
+  font: var(--star-type-body-lg);
+  cursor: pointer;
+  outline: none;
+
+  &:hover {
+    background: var(--star-surface-muted);
+  }
+  &:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--star-accent);
+  }
+  &[aria-disabled='true'] {
+    opacity: 0.5;
+  }
+}
+.star-tree__item--selected[aria-selected='true'] {
+  background: var(--star-primary-soft);
+  color: var(--star-primary);
+  font-weight: 600;
+}
+.star-tree__toggle {
+  display: inline-grid;
+  place-items: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 4px;
+  color: var(--star-text-muted);
+
+  i {
+    transition: rotate var(--star-duration-fast) ease;
+  }
+  [aria-expanded='true'] > & i {
+    rotate: 90deg;
+  }
+  // The arrow points toward the inline end: mirrored in right-to-left. A mirrored arrow turns
+  // the other way to point down.
+  i:dir(rtl) {
+    scale: -1 1;
+  }
+  [aria-expanded='true'] > &:dir(rtl) i {
+    rotate: -90deg;
+  }
+  &:hover {
+    background: var(--star-border);
+  }
+}
+.star-tree__toggle--leaf:hover {
+  background: none;
+}
+.star-tree__check {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+.star-tree__check--on {
+  background: var(--star-primary);
+  border-color: var(--star-primary);
+}
+.star-tree__icon {
+  color: var(--star-text-muted);
+}
+.star-tree-select__trigger {
+  border: 0;
+  background: transparent;
+  text-align: start;
+}
+
+// Windowed rendering (`virtualScroll`): the CDK viewport is the scroll container and the tree
+// role holder. Rows have a fixed height, so a long label is cut, not wrapped.
+.star-tree__viewport {
+  outline: none;
+
+  &:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--star-accent);
+  }
+  .cdk-virtual-scroll-content-wrapper {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0 0.375rem;
+  }
+  .star-tree__item {
+    box-sizing: border-box;
+  }
+  .star-tree__label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}