@sdata/web-vue 4.3.1 → 4.4.1

package/dist/sd.css

@@ -1931,6 +1931,7 @@ body {
 .sd-trigger-popup {
   position: absolute;
   z-index: 1000;
+  pointer-events: auto;
 }
 .sd-trigger-arrow {
   position: absolute;
@@ -9191,6 +9192,177 @@ body.sd-tour-active .sd-tour-popover * {
   cursor: row-resize;
 }
 
+.sd-regex-vis {
+  box-sizing: border-box;
+  overflow: hidden;
+  color: var(--sd-color-text-1);
+  font-size: 14px;
+  background: var(--sd-color-bg-2);
+  border: 1px solid var(--sd-color-border-2);
+  border-radius: var(--sd-border-radius-large);
+}
+.sd-regex-vis-controls {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--sd-color-border-2);
+}
+.sd-regex-vis-input {
+  flex: 1;
+  min-width: 0;
+  font-family: consolas, menlo;
+}
+.sd-regex-vis-flags {
+  flex: none;
+  white-space: nowrap;
+}
+.sd-regex-vis-viewport {
+  display: flex;
+  align-items: center;
+  min-height: 160px;
+  padding: 16px;
+  overflow: auto;
+  background: var(--sd-color-bg-1);
+}
+.sd-regex-vis-graph {
+  display: block;
+  flex: none;
+  margin: auto;
+  overflow: visible;
+  font-family: consolas, menlo;
+}
+.sd-regex-vis-rail {
+  fill: var(--sd-color-bg-1);
+  stroke: var(--sd-color-text-3);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1px;
+}
+.sd-regex-vis-empty-label {
+  font-size: 12px;
+  fill: var(--sd-color-text-3);
+}
+.sd-regex-vis-name-label {
+  font-weight: 500;
+  font-size: 14px;
+  user-select: none;
+  fill: var(--sd-color-text-1);
+}
+.sd-regex-vis-quantifier {
+  color: var(--sd-color-text-1);
+}
+.sd-regex-vis-quantifier svg {
+  overflow: visible;
+  color: currentcolor;
+}
+.sd-regex-vis-quantifier text {
+  font-weight: 500;
+  font-size: 14px;
+  user-select: none;
+  fill: currentcolor;
+}
+.sd-regex-vis-node {
+  color: var(--sd-color-text-1);
+  outline: none;
+  cursor: default;
+}
+.sd-regex-vis-node rect {
+  transition: fill 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), stroke 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
+  fill: var(--sd-color-primary-light-1);
+  stroke: rgb(var(--sd-primary-6));
+  stroke-width: 1px;
+}
+.sd-regex-vis-node text {
+  font-weight: 500;
+  font-size: 14px;
+  user-select: none;
+  pointer-events: none;
+  fill: currentcolor;
+}
+.sd-regex-vis-node-assertion rect {
+  fill: var(--sd-color-success-light-1);
+  stroke: rgb(var(--sd-success-6));
+}
+.sd-regex-vis-node-group rect, .sd-regex-vis-node-choice rect {
+  fill: none;
+  stroke: var(--sd-color-border-3);
+}
+.sd-regex-vis-node-choice rect {
+  stroke-dasharray: 6px 4px;
+}
+.sd-regex-vis-node:focus-visible rect {
+  stroke: rgb(var(--sd-primary-5));
+  stroke-width: 2px;
+}
+.sd-regex-vis-node-selected rect {
+  fill: var(--sd-color-primary-light-3);
+  stroke: rgb(var(--sd-primary-6));
+  stroke-width: 2px;
+}
+.sd-regex-vis-node-group.sd-regex-vis-node-selected rect, .sd-regex-vis-node-choice.sd-regex-vis-node-selected rect {
+  fill: none;
+}
+.sd-regex-vis-selectable .sd-regex-vis-node {
+  cursor: pointer;
+}
+.sd-regex-vis-empty, .sd-regex-vis-error {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 4px;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  min-height: 160px;
+  color: var(--sd-color-text-3);
+  text-align: center;
+}
+.sd-regex-vis-error {
+  box-sizing: border-box;
+  padding: 16px;
+  color: rgb(var(--sd-danger-6));
+  background: var(--sd-color-danger-light-1);
+  border-radius: var(--sd-border-radius-medium);
+}
+.sd-regex-vis-error-title {
+  font-weight: 500;
+}
+.sd-regex-vis-error-message {
+  max-width: 100%;
+  font-size: 12px;
+  font-family: consolas, menlo;
+  overflow-wrap: anywhere;
+}
+.sd-regex-vis-footer {
+  padding: 12px 16px;
+  color: var(--sd-color-text-3);
+  border-top: 1px solid var(--sd-color-border-2);
+}
+@media (hover: hover) {
+  .sd-regex-vis-selectable .sd-regex-vis-node:hover rect {
+    fill: var(--sd-color-primary-light-2);
+  }
+  .sd-regex-vis-selectable .sd-regex-vis-node-group:hover rect, .sd-regex-vis-selectable .sd-regex-vis-node-choice:hover rect {
+    fill: none;
+    stroke: rgb(var(--sd-primary-6));
+  }
+}
+@media (width <= 640px) {
+  .sd-regex-vis-controls {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .sd-regex-vis-flags {
+    white-space: normal;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sd-regex-vis-node rect {
+    transition: none;
+  }
+}
+
 /**********************************************
  * status: disabled / readonly
  **********************************************/
@@ -16806,7 +16978,7 @@ body.sd-tour-active .sd-tour-popover * {
   flex: 1;
   height: 32px;
   padding: 0;
-  color: #7d7d7f;
+  color: var(--sd-color-text-3);
   font-weight: 400;
   line-height: 32px;
   text-align: center;
@@ -18854,7 +19026,7 @@ body.sd-tour-active .sd-tour-popover * {
   color: var(--sd-color-text-1);
   background: var(--sd-color-bg-2);
   border: 1px solid var(--sd-color-neutral-3);
-  border-radius: var(--sd-border-radius-large);
+  border-radius: var(--sd-border-radius-medium);
   cursor: pointer;
   transition: color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), background-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), border-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), box-shadow 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
@@ -18903,7 +19075,7 @@ body.sd-tour-active .sd-tour-popover * {
 }
 .sd-selectable-card-value {
   color: var(--sd-color-text-1);
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1.25;
 }
 .sd-selectable-card-description, .sd-selectable-card-default {
@@ -18930,31 +19102,31 @@ body.sd-tour-active .sd-tour-popover * {
   text-align: center;
 }
 .sd-selectable-card--size-small {
-  padding: 12px;
+  padding: 8px;
 }
 .sd-selectable-card--size-small .sd-selectable-card-body, .sd-selectable-card--size-small .sd-selectable-card-content {
-  gap: 8px;
+  gap: 6px;
 }
 .sd-selectable-card--size-small .sd-selectable-card-value {
-  font-size: 16px;
+  font-size: 14px;
 }
 .sd-selectable-card--size-medium {
-  padding: 16px;
+  padding: 12px;
 }
 .sd-selectable-card--size-medium .sd-selectable-card-body, .sd-selectable-card--size-medium .sd-selectable-card-content {
-  gap: 12px;
+  gap: 8px;
 }
 .sd-selectable-card--size-medium .sd-selectable-card-value {
-  font-size: 20px;
+  font-size: 16px;
 }
 .sd-selectable-card--size-large {
-  padding: 24px;
+  padding: 16px;
 }
 .sd-selectable-card--size-large .sd-selectable-card-body, .sd-selectable-card--size-large .sd-selectable-card-content {
-  gap: 20px;
+  gap: 12px;
 }
 .sd-selectable-card--size-large .sd-selectable-card-value {
-  font-size: 24px;
+  font-size: 20px;
 }
 .sd-selectable-card--color-red {
   --sd-selectable-card-accent: rgb(var(--sd-red-6));
@@ -19023,7 +19195,6 @@ body.sd-tour-active .sd-tour-popover * {
 }
 .sd-selectable-card--selected {
   border-color: var(--sd-selectable-card-border);
-  box-shadow: inset 0 0 0 2px var(--sd-selectable-card-border);
 }
 .sd-selectable-card--selected.sd-selectable-card--soft {
   color: var(--sd-selectable-card-accent);
@@ -20614,7 +20785,7 @@ body.sd-tour-active .sd-tour-popover * {
   padding-left: 4px;
   font-size: 11px;
   line-height: 1;
-  background-color: rgb(35, 181, 181);
+  background-color: rgb(var(--sd-primary-6));
   border-radius: 4px;
 }
 .sd-calendar--horizontal .sd-calendar__event-placeholder {
@@ -21876,7 +22047,7 @@ body.sd-tour-active .sd-tour-popover * {
   position: fixed;
   right: 24px;
   bottom: 24px;
-  z-index: 100;
+  z-index: 999;
 }
 .sd-back-top-btn {
   width: 40px;
@@ -21894,6 +22065,9 @@ body.sd-tour-active .sd-tour-popover * {
 .sd-back-top-btn:hover {
   background-color: rgb(var(--sd-primary-5));
 }
+.sd-back-top-btn:focus-visible {
+  box-shadow: 0 0 0 2px rgb(var(--sd-primary-3));
+}
 .sd-back-top-btn svg {
   font-size: 14px;
 }