@smwb/ui-css 2.5.0 → 2.7.0

package/dist/ui.css

@@ -744,6 +744,63 @@
   color: var(--smui-infoColor);
   border-color: var(--smui-infoColor);
 }
+.smwb-chip.smwb-chip_custom-color:not(.smwb-chip.smwb-disabled).smwb-filled {
+  color: var(--smwb-chip-custom-text-color, var(--smwb-chip-custom-on-color, var(--smui-primaryTextColor)));
+}
+.smwb-chip.smwb-chip_custom-color:not(.smwb-chip.smwb-disabled).smwb-filled,
+.smwb-chip.smwb-chip_custom-color:not(.smwb-chip.smwb-disabled).smwb-filled:hover,
+.smwb-chip.smwb-chip_custom-color:not(.smwb-chip.smwb-disabled).smwb-filled:active,
+.smwb-chip.smwb-chip_custom-color:not(.smwb-chip.smwb-disabled).smwb-filled.smwb-selected {
+  background-color: var(--smwb-chip-custom-fill, var(--smui-chipsBg));
+}
+.smwb-chip.smwb-chip_custom-color:not(.smwb-chip.smwb-disabled).smwb-filled .smwb-chip__delete-icon {
+  border-radius: 50%;
+}
+.smwb-chip.smwb-chip_custom-color:not(.smwb-chip.smwb-disabled).smwb-filled .smwb-chip__delete-icon svg,
+.smwb-chip.smwb-chip_custom-color:not(.smwb-chip.smwb-disabled).smwb-filled .smwb-chip__delete-icon svg:hover {
+  fill: currentColor;
+}
+.smwb-chip.smwb-chip_custom-color:not(.smwb-chip.smwb-disabled).smwb-filled .smwb-chip__delete-icon:hover {
+  background-color: color-mix(in srgb, currentColor 16%, transparent);
+}
+.smwb-chip.smwb-chip_custom-color:not(.smwb-chip.smwb-disabled).smwb-outlined {
+  color: var(--smwb-chip-custom-text-color, var(--smui-primaryTextColor));
+  border-color: var(--smwb-chip-custom-color);
+}
+.smwb-chip.smwb-chip_custom-color:not(.smwb-chip.smwb-disabled).smwb-outlined:hover {
+  background-color: color-mix(in srgb, var(--smwb-chip-custom-color) 12%, transparent);
+}
+.smwb-chip.smwb-chip_custom-color:not(.smwb-chip.smwb-disabled).smwb-outlined:active,
+.smwb-chip.smwb-chip_custom-color:not(.smwb-chip.smwb-disabled).smwb-outlined.smwb-selected {
+  background-color: color-mix(in srgb, var(--smwb-chip-custom-color) 20%, transparent);
+}
+.smwb-chip.smwb-chip_custom-color:not(.smwb-chip.smwb-disabled).smwb-outlined .smwb-chip__delete-icon svg {
+  fill: var(--smwb-chip-custom-text-color, var(--smui-chipsIconColor));
+}
+.smwb-chip.smwb-chip_custom-color:not(.smwb-chip.smwb-disabled).smwb-outlined .smwb-chip__delete-icon svg:hover {
+  fill: var(--smwb-chip-custom-text-color, var(--smui-chipsIconColorHover));
+}
+@supports (color: color(from red srgb r g b)) {
+  .smwb-chip.smwb-chip_custom-color:not(.smwb-chip.smwb-disabled) {
+    --smwb-chip-custom-solid: color(from var(--smwb-chip-custom-color) srgb r g b / 1);
+    --smwb-chip-custom-pick: color(from var(--smwb-chip-custom-solid) srgb-linear clamp(0, (0.17913 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1) clamp(0, (0.17913 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1) clamp(0, (0.17913 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1) / 1);
+    --smwb-chip-custom-label: var(--smwb-chip-custom-text-color, var(--smwb-chip-custom-pick));
+    --smwb-chip-custom-away: color(from var(--smwb-chip-custom-label) srgb-linear clamp(0, (0.17913 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1) clamp(0, (0.17913 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1) clamp(0, (0.17913 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1) / 1);
+  }
+  .smwb-chip.smwb-chip_custom-color:not(.smwb-chip.smwb-disabled).smwb-filled {
+    color: var(--smwb-chip-custom-label);
+  }
+  .smwb-chip.smwb-chip_custom-color:not(.smwb-chip.smwb-disabled).smwb-filled,
+  .smwb-chip.smwb-chip_custom-color:not(.smwb-chip.smwb-disabled).smwb-filled.smwb-selected {
+    background-color: var(--smwb-chip-custom-solid);
+  }
+  .smwb-chip.smwb-chip_custom-color:not(.smwb-chip.smwb-disabled).smwb-filled:hover {
+    background-color: color-mix(in srgb, var(--smwb-chip-custom-solid), var(--smwb-chip-custom-away) 8%);
+  }
+  .smwb-chip.smwb-chip_custom-color:not(.smwb-chip.smwb-disabled).smwb-filled:active {
+    background-color: color-mix(in srgb, var(--smwb-chip-custom-solid), var(--smwb-chip-custom-away) 14%);
+  }
+}
 .smwb-chip-group {
   display: flex;
   flex-wrap: wrap;
@@ -1622,6 +1679,88 @@
     border-color: CanvasText;
   }
 }
+.smwb-identity-badge {
+  --smwb-identity-badge-color: var(--smwb-identity-badge-accent, var(--smui-onSurfaceVariant));
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  flex: none;
+  box-sizing: border-box;
+  height: 18px;
+  padding: 0 4px;
+  vertical-align: middle;
+  white-space: nowrap;
+  border: 1px solid var(--smwb-identity-badge-color);
+  border-radius: 4px;
+  background-color: transparent;
+  color: var(--smwb-identity-badge-color);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
+}
+.smwb-identity-badge__icon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  overflow: hidden;
+}
+.smwb-identity-badge__icon > .smwb-icon__wrapper {
+  width: 100%;
+  height: 100%;
+}
+.smwb-identity-badge__icon svg,
+.smwb-identity-badge__icon img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.smwb-identity-badge__icon .material-symbols-outlined {
+  font-size: 12px !important;
+}
+.smwb-identity-badge-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  vertical-align: middle;
+}
+.smwb-identity-badge-group__hidden {
+  display: none;
+}
+button.smwb-identity-badge-group__surplus {
+  position: relative;
+  margin: 0;
+  appearance: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+button.smwb-identity-badge-group__surplus:focus-visible {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: 2px;
+}
+@media (pointer: coarse) {
+  button.smwb-identity-badge-group__surplus::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: var(--smui-control-h-sm, 44px);
+    height: var(--smui-control-h-sm, 44px);
+    transform: translate(-50%, -50%);
+  }
+}
+@media (forced-colors: active) {
+  .smwb-identity-badge {
+    border-color: CanvasText;
+    color: CanvasText;
+  }
+  button.smwb-identity-badge-group__surplus {
+    border-color: ButtonText;
+    color: ButtonText;
+  }
+}
 .smwb-qr-code {
   display: inline-flex;
   flex-direction: column;
@@ -4057,12 +4196,18 @@
   width: 100%;
   box-sizing: border-box;
 }
+.smwb-grid[hidden] {
+  display: none;
+}
 .smwb-grid__row {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
   box-sizing: border-box;
 }
+.smwb-grid__row[hidden] {
+  display: none;
+}
 .smwb-grid__row--spacing-1 {
   width: calc(100% + (4px * 1));
   margin-top: -4px;
@@ -4889,12 +5034,16 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  min-width: 0;
+  max-width: 100%;
 }
 .smwb-tooltip__wrapper {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  min-width: 0;
+  max-width: 100%;
 }
 @keyframes smwb-tooltip-in {
   from {
@@ -8687,7 +8836,14 @@
   --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-edge-flow-color: var(--smwb-dag-view-status-running);
+  --smwb-dag-view-edge-flow-track-color: color-mix(in srgb, var(--smwb-dag-view-edge-flow-color) 45%, transparent);
   --smwb-dag-view-dim-opacity: 0.35;
+  --smwb-dag-view-edge-flow-width: 2.5px;
+  --smwb-dag-view-edge-flow-duration: 0.6s;
+  --smwb-dag-view-edge-glow-opacity: 0.25;
+  --smwb-dag-view-node-glow-opacity: 0.6;
+  --smwb-dag-view-node-pulse-duration: 1.4s;
   --smwb-dag-view-node-border-style: solid;
   position: relative;
   width: 100%;
@@ -8747,6 +8903,45 @@
 .smwb-dag-view__arrow--active {
   fill: var(--smwb-dag-view-edge-active-color);
 }
+.smwb-dag-view__edge--flowing {
+  stroke: var(--smwb-dag-view-edge-flow-color);
+  stroke-width: var(--smwb-dag-view-edge-flow-width);
+}
+.smwb-dag-view__arrow--flow {
+  fill: var(--smwb-dag-view-edge-flow-color);
+}
+.smwb-dag-view__edge-glow {
+  fill: none;
+  stroke: var(--smwb-dag-view-edge-flow-color);
+  stroke-width: calc(var(--smwb-dag-view-edge-flow-width) * 3);
+  stroke-linecap: round;
+  stroke-opacity: var(--smwb-dag-view-edge-glow-opacity);
+  transition: opacity 0.12s;
+}
+.smwb-dag-view__edge-pulse {
+  display: none;
+  fill: none;
+  stroke: var(--smwb-dag-view-edge-flow-color);
+  stroke-width: calc(var(--smwb-dag-view-edge-flow-width) + 1px);
+  stroke-linecap: round;
+  stroke-dasharray: 6px 18px;
+  transition: opacity 0.12s;
+}
+.smwb-dag-view__edge-glow--dimmed,
+.smwb-dag-view__edge-pulse--dimmed {
+  opacity: var(--smwb-dag-view-dim-opacity);
+}
+.smwb-dag-view[data-animate-running="true"] .smwb-dag-view__node[data-status="running"]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  box-shadow: inset 0 0 0 1px var(--smwb-dag-view-node-glow-color, var(--smwb-dag-view-accent)), inset 0 0 12px 2px color-mix(in srgb, var(--smwb-dag-view-node-glow-color, var(--smwb-dag-view-accent)) calc(var(--smwb-dag-view-node-glow-opacity) * 100%), transparent);
+}
+.smwb-dag-view[data-animate-running="false"] .smwb-dag-view__node[data-status="running"] .smwb-dag-view__dot {
+  animation: none;
+}
 .smwb-dag-view__node {
   --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-idle));
   --smwb-dag-view-border-style: var(--smwb-dag-view-node-border-style);
@@ -8904,7 +9099,17 @@
 }
 @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;
+    animation: smwb-dag-view-pulse var(--smwb-dag-view-node-pulse-duration) ease-in-out infinite;
+  }
+  .smwb-dag-view[data-animate-running="true"] .smwb-dag-view__node[data-status="running"]::before {
+    animation: smwb-dag-view-pulse var(--smwb-dag-view-node-pulse-duration) ease-in-out infinite;
+  }
+  .smwb-dag-view__edge--flowing {
+    stroke: var(--smwb-dag-view-edge-flow-track-color);
+  }
+  .smwb-dag-view__edge-pulse {
+    display: inline;
+    animation: smwb-dag-view-flow var(--smwb-dag-view-edge-flow-duration) linear infinite;
   }
 }
 @keyframes smwb-dag-view-pulse {
@@ -8912,6 +9117,11 @@
     opacity: 0.35;
   }
 }
+@keyframes smwb-dag-view-flow {
+  to {
+    stroke-dashoffset: -24px;
+  }
+}
 .smwb-swimlanes {
   position: relative;
   box-sizing: border-box;
@@ -9801,8 +10011,12 @@
   font-variant-numeric: tabular-nums;
 }
 .smwb-stack {
+  display: flex;
   min-width: 0;
 }
+.smwb-stack[hidden] {
+  display: none;
+}
 .smwb-stack--direction-base-row {
   flex-direction: row;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-css",
-  "version": "2.5.0",
+  "version": "2.7.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": "^2.5.0",
+    "@smwb/ui-styles": "^2.7.0",
     "less": "^4.6.4"
   },
   "homepage": "https://sourcecraft.dev/elfenmail/ui",