@smwb/ui-css 1.1.0 → 1.2.0

package/dist/ui.css

@@ -371,6 +371,7 @@
   left: 50%;
 }
 .smwb-checkbox__wrapper {
+  position: relative;
   color: var(--smui-primaryTextColor);
   display: flex;
   align-items: center;
@@ -390,7 +391,15 @@
   opacity: 0.8;
 }
 .smwb-checkbox__input {
-  display: none;
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  opacity: 0;
+}
+.smwb-checkbox__input:focus-visible ~ .smwb-checkbox__btn {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: 2px;
 }
 .smwb-checkbox__input:hover ~ .smwb-checkbox__btn::before {
   background-color: var(--smui-onSurfaceHover);
@@ -498,6 +507,27 @@
   align-items: center;
   justify-content: center;
 }
+.smwb-chip__content {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: inherit;
+}
+.smwb-chip__content:focus {
+  outline-offset: 9999px;
+}
+.smwb-chip__content:focus::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  outline: inherit;
+  pointer-events: none;
+}
+.smwb-chip.smwb-outlined > .smwb-chip__content:focus::after {
+  inset: -1px;
+  border: 1px solid transparent;
+}
 .smwb-chip__delete-icon {
   background: transparent;
   border: 0;
@@ -1328,7 +1358,17 @@
   display: none;
 }
 .smwb-radio__input {
-  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+}
+.smwb-radio__input:focus-visible ~ .smwb-radio__btn {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: 2px;
 }
 .smwb-radio__input:active ~ .radio__btn:hover ~ .smwb-radio__bg {
   transform: translate(-50%, -50%) scale(1);
@@ -2126,7 +2166,17 @@
   opacity: 1;
 }
 .smwb-toggle__checkbox {
-  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+}
+.smwb-toggle__checkbox:focus-visible ~ .smwb-toggle__track {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: 2px;
 }
 .smwb-toggle__checkbox:checked ~ .smwb-toggle__track {
   background-color: var(--smui-toggleTrackActiveColor);
@@ -2179,7 +2229,7 @@
   white-space: nowrap;
   height: 48px;
 }
-.smwb-menu__item:not(.smwb-menu__item--selected):not(:active):hover:before {
+.smwb-menu__item:not(.smwb-menu__item--selected):not(:active):not(:focus-visible):not(.smwb-select-field__option--active):hover:before {
   opacity: 0.08;
 }
 .smwb-menu__item:before {
@@ -2201,6 +2251,16 @@
 .smwb-menu__item--selected:before {
   opacity: 0.08;
 }
+.smwb-menu__item:focus-visible {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: -2px;
+}
+.smwb-menu__item:focus-visible:before {
+  opacity: 0.12;
+}
+.smwb-menu__item:has( > .smwb-menu__item-inner:focus-visible):before {
+  opacity: 0.12;
+}
 .smwb-menu__item:active:before {
   opacity: 0.12;
 }
@@ -2212,6 +2272,10 @@
   color: currentColor;
   gap: 6px;
 }
+.smwb-menu__item-inner:focus-visible {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: -2px;
+}
 .smwb-menu__text {
   flex-grow: 1;
 }
@@ -2751,12 +2815,39 @@
   width: 0;
   height: 0;
 }
+.smwb-select-field__control {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  align-self: stretch;
+}
+.smwb-select-field__control:focus {
+  outline-offset: 9999px;
+}
+.smwb-select-field__control:focus::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  outline: inherit;
+  pointer-events: none;
+}
 .smwb-select-field__actions {
   display: flex;
   align-items: center;
   column-gap: 2px;
   margin-right: -7px;
 }
+.smwb-select-field__clear {
+  display: inline-flex;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
 .smwb-select-field__values {
   white-space: nowrap;
   font: inherit;
@@ -2766,7 +2857,8 @@
 .smwb-select-field__values > *:not(:first-child) {
   margin-left: 4px;
 }
-.smwb-select-field__values + span {
+.smwb-select-field__values + .smwb-select-field__search,
+.smwb-select-field__values + .smwb-select-field__control > .smwb-select-field__search {
   margin-left: 4px;
 }
 .smwb-select-field__values .smwb-chip {
@@ -2866,6 +2958,19 @@
   font-style: italic;
   color: var(--smui-primaryColor);
 }
+.smwb-select-field__listbox,
+.smwb-select-field__group-options {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.smwb-select-field__option--active {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: -2px;
+}
+.smwb-menu .smwb-menu__item.smwb-select-field__option--active:before {
+  opacity: 0.12;
+}
 .smwb-text-field_size-small .smwb-select-field:not(.smwb-select-field--inline) {
   padding-top: 8px;
   padding-bottom: 8px;
@@ -3193,7 +3298,6 @@
   flex-direction: column;
   border-radius: 8px;
   overflow: visible;
-  outline: none;
 }
 .smwb-thumb-card--interactive {
   cursor: pointer;
@@ -3202,6 +3306,11 @@
   opacity: 0.5;
   pointer-events: none;
 }
+.smwb-thumb-card__content {
+  display: flex;
+  flex-direction: column;
+  outline: none;
+}
 .smwb-thumb-card__media {
   position: relative;
   width: 100%;
@@ -3214,7 +3323,7 @@
   outline: 2px solid var(--smui-primaryColor);
   outline-offset: 1px;
 }
-.smwb-thumb-card--interactive:focus-visible .smwb-thumb-card__media {
+.smwb-thumb-card__content:focus-visible .smwb-thumb-card__media {
   outline: 2px solid var(--smui-primaryColor);
   outline-offset: 1px;
 }
@@ -4626,6 +4735,13 @@
   pointer-events: none;
   opacity: 0.38;
 }
+.smwb-card__content {
+  display: flex;
+  flex-direction: column;
+}
+.smwb-card__content:focus-visible {
+  outline: none;
+}
 .smwb-card__title {
   font-size: 1.25rem;
   font-weight: 500;
@@ -4636,7 +4752,7 @@
 .smwb-card_interactive {
   cursor: pointer;
 }
-.smwb-card_interactive:focus-visible {
+.smwb-card:has( > .smwb-card__content:focus-visible) {
   outline: 2px solid var(--smui-primaryColor);
   outline-offset: 2px;
 }
@@ -5804,6 +5920,14 @@
 .smwb-table__cell.smwb-head-cell .smwb-head-cell__content input {
   font-weight: 500;
 }
+.smwb-table__cell.smwb-head-cell .smwb-head-cell__actions {
+  align-items: center;
+  display: inline-flex;
+  vertical-align: middle;
+  gap: 5px;
+  margin-inline-start: 5px;
+  cursor: auto;
+}
 .smwb-table__cell.smwb-head-cell.smwb-align_left {
   text-align: left;
 }
@@ -6851,10 +6975,51 @@
   display: inline-flex;
   flex-direction: row;
   align-items: center;
+  isolation: isolate;
 }
 .smwb-avatar-group > :not(:first-child) {
   margin-left: -8px;
 }
+.smwb-avatar-group > :nth-child(1) {
+  z-index: 12;
+}
+.smwb-avatar-group > :nth-child(2) {
+  z-index: 11;
+}
+.smwb-avatar-group > :nth-child(3) {
+  z-index: 10;
+}
+.smwb-avatar-group > :nth-child(4) {
+  z-index: 9;
+}
+.smwb-avatar-group > :nth-child(5) {
+  z-index: 8;
+}
+.smwb-avatar-group > :nth-child(6) {
+  z-index: 7;
+}
+.smwb-avatar-group > :nth-child(7) {
+  z-index: 6;
+}
+.smwb-avatar-group > :nth-child(8) {
+  z-index: 5;
+}
+.smwb-avatar-group > :nth-child(9) {
+  z-index: 4;
+}
+.smwb-avatar-group > :nth-child(10) {
+  z-index: 3;
+}
+.smwb-avatar-group > :nth-child(11) {
+  z-index: 2;
+}
+.smwb-avatar-group > :nth-child(12) {
+  z-index: 1;
+}
+.smwb-avatar-group > :focus-visible,
+.smwb-avatar-group > :has(:focus-visible) {
+  z-index: 13;
+}
 .smwb-avatar-group .smwb-avatar {
   border: 2px solid var(--smui-surfaceBackground);
   box-sizing: content-box;
@@ -6877,7 +7042,7 @@
   color: inherit;
   text-decoration: none;
 }
-.smwb-person-chip__avatar {
+.smwb-avatar.smwb-person-chip__avatar {
   flex-shrink: 0;
   color: #fff;
 }
@@ -7126,14 +7291,23 @@
 }
 .smwb-rating {
   display: inline-flex;
-  align-items: center;
-  gap: 2px;
+  flex-direction: column;
+  align-items: flex-start;
   color: var(--smui-primaryColor);
 }
 .smwb-rating_disabled {
   opacity: 0.38;
   pointer-events: none;
 }
+.smwb-rating__control {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+.smwb-rating__control:focus-visible {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: 2px;
+}
 .smwb-rating__item {
   position: relative;
   display: inline-flex;
@@ -7280,6 +7454,223 @@
   --smwb-chart-series-6: #f27c3c;
   --smwb-chart-series-7: #a8b0bc;
 }
+.smwb-dag-view {
+  --smwb-dag-view-node-bg: var(--smui-surfaceBackground);
+  --smwb-dag-view-node-border: var(--smui-outlineColor);
+  --smwb-dag-view-edge-color: var(--smui-outlineColor);
+  --smwb-dag-view-edge-active-color: var(--smui-primaryColor);
+  --smwb-dag-view-selected-ring: var(--smui-primaryColor);
+  --smwb-dag-view-status-idle: var(--smui-outlineColor);
+  --smwb-dag-view-status-pending: var(--smui-onSurfaceVariant);
+  --smwb-dag-view-status-running: var(--smui-infoColor);
+  --smwb-dag-view-status-success: var(--smui-successColor);
+  --smwb-dag-view-status-warning: var(--smui-warningColor);
+  --smwb-dag-view-status-error: var(--smui-errorColor);
+  --smwb-dag-view-status-skipped: var(--smui-disabledTextColor);
+  --smwb-dag-view-dim-opacity: 0.35;
+  position: relative;
+  width: 100%;
+  height: 480px;
+  min-width: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  overflow: clip;
+  border: 1px solid var(--smui-dividerColor);
+  border-radius: 12px;
+  background-color: color-mix(in srgb, var(--smui-onSurfaceColor) 2%, var(--smui-surfaceBackground));
+  color: var(--smui-onSurfaceColor);
+  touch-action: none;
+  overscroll-behavior: contain;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: grab;
+}
+.smwb-dag-view[data-interacting] {
+  cursor: grabbing;
+}
+.smwb-dag-view__world {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: 0 0;
+}
+.smwb-dag-view[data-interacting] .smwb-dag-view__world {
+  will-change: transform;
+}
+.smwb-dag-view__edges {
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+.smwb-dag-view__edge {
+  fill: none;
+  stroke: var(--smwb-dag-view-edge-color);
+  stroke-width: 1.5px;
+  transition: stroke 0.12s, opacity 0.12s;
+}
+.smwb-dag-view__edge--active {
+  stroke: var(--smwb-dag-view-edge-active-color);
+  stroke-width: 2.5px;
+}
+.smwb-dag-view__edge--reversed {
+  stroke-dasharray: 6 4;
+}
+.smwb-dag-view__edge--dimmed {
+  opacity: var(--smwb-dag-view-dim-opacity);
+}
+.smwb-dag-view__arrow {
+  fill: var(--smwb-dag-view-edge-color);
+}
+.smwb-dag-view__arrow--active {
+  fill: var(--smwb-dag-view-edge-active-color);
+}
+.smwb-dag-view__node {
+  --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-idle));
+  position: absolute;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px 0 10px;
+  border: 1px solid var(--smwb-dag-view-node-border);
+  border-left: 4px solid var(--smwb-dag-view-accent);
+  border-radius: 8px;
+  background-color: var(--smwb-dag-view-node-bg);
+  color: var(--smui-onSurfaceColor);
+  font-size: 0.875rem;
+  line-height: 1.3;
+  overflow: hidden;
+  contain: layout paint;
+  cursor: pointer;
+  transition: box-shadow 0.12s, border-color 0.12s, opacity 0.12s;
+}
+.smwb-dag-view__node[data-status="pending"] {
+  --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-pending));
+}
+.smwb-dag-view__node[data-status="running"] {
+  --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-running));
+}
+.smwb-dag-view__node[data-status="success"] {
+  --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-success));
+}
+.smwb-dag-view__node[data-status="warning"] {
+  --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-warning));
+}
+.smwb-dag-view__node[data-status="error"] {
+  --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-error));
+}
+.smwb-dag-view__node[data-status="skipped"] {
+  --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-skipped));
+}
+.smwb-dag-view__node:hover {
+  border-color: color-mix(in srgb, var(--smwb-dag-view-edge-active-color) 45%, var(--smwb-dag-view-node-border));
+  border-left-color: var(--smwb-dag-view-accent);
+}
+.smwb-dag-view__node:focus-visible {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: 2px;
+}
+.smwb-dag-view__node--selected {
+  box-shadow: 0 0 0 2px var(--smwb-dag-view-selected-ring);
+}
+.smwb-dag-view__node--upstream,
+.smwb-dag-view__node--downstream {
+  border-color: var(--smwb-dag-view-edge-active-color);
+  border-left-color: var(--smwb-dag-view-accent);
+}
+.smwb-dag-view__node--dimmed {
+  opacity: var(--smwb-dag-view-dim-opacity);
+}
+.smwb-dag-view__node--disabled {
+  cursor: default;
+  color: var(--smui-disabledTextColor);
+}
+.smwb-dag-view__dot {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--smwb-dag-view-accent);
+}
+.smwb-dag-view__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.smwb-dag-view__status {
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  color: var(--smui-onSurfaceVariant);
+}
+.smwb-dag-view[data-zoom="far"] .smwb-dag-view__status,
+.smwb-dag-view[data-zoom="far"] .smwb-dag-view__detail {
+  display: none;
+}
+.smwb-dag-view__summary {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+.smwb-dag-view__controls {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  cursor: default;
+}
+.smwb-dag-view__control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid var(--smui-dividerColor);
+  border-radius: 8px;
+  background-color: var(--smui-surfaceBackground);
+  color: var(--smui-onSurfaceVariant);
+  cursor: pointer;
+}
+.smwb-dag-view__control svg {
+  width: 18px;
+  height: 18px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.smwb-dag-view__control:hover {
+  background-color: color-mix(in srgb, var(--smui-onSurfaceColor) 8%, var(--smui-surfaceBackground));
+  color: var(--smui-onSurfaceColor);
+}
+.smwb-dag-view__control:focus-visible {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: 2px;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .smwb-dag-view__node[data-status="running"] .smwb-dag-view__dot {
+    animation: smwb-dag-view-pulse 1.4s ease-in-out infinite;
+  }
+}
+@keyframes smwb-dag-view-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
 .smwb-stepper {
   display: flex;
   width: 100%;
@@ -7787,16 +8178,15 @@
   font-size: 12px;
   font-weight: 600;
   line-height: 1.4;
+  text-transform: var(--smui-font-overline-transform, uppercase);
+  letter-spacing: var(--smui-font-overline-letter-spacing, 0.06em);
 }
 .smwb-typography_button {
   font-size: 14px;
   font-weight: 500;
   line-height: 1.75;
-}
-.smwb-typography_overline,
-.smwb-typography_button {
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
+  text-transform: var(--smui-font-button-transform, uppercase);
+  letter-spacing: var(--smui-font-button-letter-spacing, 0.06em);
 }
 .smwb-typography_color-primary {
   color: var(--smui-primaryColor);
@@ -8158,10 +8548,14 @@
   background: blue;
   opacity: 1;
 }
+.smwb-head-cell .smwb-head-cell__actions:has(> .smwb-rt-table--resizer:only-child) {
+  margin-inline-start: 0;
+}
 @media (hover: hover) {
   .smwb-rt-table--resizer {
     opacity: 0.5;
   }
+  .smwb-head-cell:hover .smwb-rt-table--resizer,
   *:hover > .smwb-rt-table--resizer {
     opacity: 1;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-css",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Prebuilt aggregate stylesheet for the @smwb design system (compiled from @smwb/ui-styles). Framework-agnostic — shared by the React and SolidJS libraries.",
   "license": "MIT",
   "sideEffects": [
@@ -19,7 +19,7 @@
     "build": "lessc -rp=/ ../styles/less/components.less ./dist/ui.css"
   },
   "devDependencies": {
-    "@smwb/ui-styles": "^1.5.0",
+    "@smwb/ui-styles": "^1.6.0",
     "less": "^4.6.4"
   },
   "homepage": "https://sourcecraft.dev/elfenmail/ui",