@miragon/modeler-shell 0.1.0 → 0.2.0

package/dist/shell.css

@@ -341,7 +341,7 @@ html.cd-shell-document kbd {
   color: var(--cd-ui-warning);
 }
 .cd-shell[data-cd-shell-host=web] .cd-shell-problems {
-  bottom: calc(var(--cd-shell-rand) + 20px + var(--cd-shell-luecke));
+  bottom: calc(var(--cd-shell-rand) + var(--modeler-shell-legal-height, 20px) + var(--cd-shell-luecke));
 }
 .cd-shell-status {
   position: absolute;
@@ -470,10 +470,10 @@ html.cd-shell-document kbd {
   --modeler-shell-legend-bottom: calc(var(--cd-shell-rand) + var(--cd-shell-zeile) + var(--cd-shell-luecke));
 }
 .cd-shell[data-cd-shell-host=web] .cd-shell-legend {
-  --modeler-shell-legend-bottom: calc(var(--cd-shell-rand) + 20px + var(--cd-shell-luecke));
+  --modeler-shell-legend-bottom: calc( var(--cd-shell-rand) + var(--modeler-shell-legal-height, 20px) + var(--cd-shell-luecke) );
 }
 .cd-shell[data-cd-shell-host=web][data-problems=shown] .cd-shell-legend {
-  --modeler-shell-legend-bottom: calc( var(--cd-shell-rand) + 20px + var(--cd-shell-luecke) + var(--cd-shell-zeile) + var(--cd-shell-luecke) );
+  --modeler-shell-legend-bottom: calc( var(--cd-shell-rand) + var(--modeler-shell-legal-height, 20px) + var(--cd-shell-luecke) + var(--cd-shell-zeile) + var(--cd-shell-luecke) );
 }
 .cd-shell[data-palette=second-row] .cd-shell-legend {
   --modeler-shell-legend-top: calc(var(--cd-shell-frei) + var(--cd-shell-zeile) + var(--cd-shell-rand));
@@ -698,6 +698,695 @@ html.cd-shell-document[data-cd-kontrast=hoch] :where(a, input, select, textarea,
   outline-width: 3px;
 }
 
+/* src/dom/buttons.css */
+.cd-shell-button {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  gap: var(--cd-shell-luecke);
+  height: var(--cd-shell-eintrag);
+  margin: 0;
+  padding: 0 16px;
+  color: var(--cd-ui-text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  white-space: nowrap;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--cd-radius-md);
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  transition:
+    background-color var(--cd-motion-fast) var(--cd-ease),
+    border-color var(--cd-motion-fast) var(--cd-ease),
+    box-shadow var(--cd-motion-fast) var(--cd-ease),
+    color var(--cd-motion-fast) var(--cd-ease),
+    transform var(--cd-motion-fast) var(--cd-ease);
+}
+.cd-shell-button[hidden] {
+  display: none;
+}
+.cd-shell-button svg {
+  display: block;
+  flex: none;
+}
+.cd-shell-button[data-variant=primary] {
+  color: var(--cd-weiss);
+  background: var(--cd-blau);
+  box-shadow: var(--cd-shadow-1);
+}
+.cd-shell-button[data-variant=primary]:is(:hover, :active):not([aria-disabled=true]) {
+  background: var(--cd-blau-link);
+  box-shadow: var(--cd-shadow-2);
+  transform: translateY(-1px);
+}
+.cd-shell-button[data-variant=ghost]:is(:hover, :active):not([aria-disabled=true]) {
+  background: var(--cd-ui-hover);
+}
+.cd-shell-button[aria-disabled=true] {
+  color: var(--cd-ui-text-leise);
+  cursor: not-allowed;
+}
+.cd-shell-button[data-variant=primary][aria-disabled=true] {
+  background: var(--cd-ui-hover);
+  border-color: var(--cd-ui-linie);
+  box-shadow: none;
+}
+.cd-shell-button:focus {
+  outline: none;
+}
+.cd-shell-button:focus-visible {
+  outline: 2px solid var(--cd-ui-fokus);
+  outline-offset: 2px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .cd-shell .cd-shell-button[data-variant]:is(:hover, :active) {
+    transform: none;
+  }
+}
+html.cd-shell-reduce-motion .cd-shell .cd-shell-button[data-variant]:is(:hover, :active) {
+  transform: none;
+}
+.cd-shell:is([data-cd-kontrast=hoch], [data-cd-kontrast=hoch] *) .cd-shell-button {
+  box-shadow: none;
+}
+.cd-shell:is([data-cd-kontrast=hoch], [data-cd-kontrast=hoch] *) .cd-shell-button:focus-visible {
+  outline-width: 3px;
+}
+@media (forced-colors: active) {
+  .cd-shell .cd-shell-button {
+    border-color: ButtonText;
+  }
+  .cd-shell .cd-shell-button:focus-visible {
+    outline-color: Highlight;
+  }
+  .cd-shell .cd-shell-button[aria-disabled=true] {
+    color: GrayText;
+    border-color: GrayText;
+  }
+}
+
+/* src/dom/web/web.css */
+:where(.cd-shell) :is(.cd-shell-primary, .cd-shell-primary-label, .cd-shell-legal, .cd-shell-legal a, .cd-shell-empty-state, .cd-shell-empty-state-title, .cd-shell-empty-state-text, .cd-shell-empty-state-hint, .cd-shell-empty-state-open, .cd-shell-empty-state-key, .cd-shell-empty-state .cd-shell-button, .cd-shell-drop-zone-chip) {
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-transform: none;
+  text-indent: 0;
+  text-shadow: none;
+}
+.cd-shell .cd-shell-primary {
+  position: absolute;
+  top: var(--cd-shell-rand);
+  right: var(--cd-shell-rand);
+  z-index: var(--cd-shell-ebene-reihe);
+  height: var(--cd-shell-zeile);
+  padding: 0 16px;
+}
+.cd-shell .cd-shell-primary[data-collapsed] {
+  width: var(--cd-shell-zeile);
+  padding: 0;
+}
+.cd-shell-primary-label[hidden] {
+  display: none;
+}
+.cd-shell-legal {
+  position: absolute;
+  left: var(--cd-shell-rand);
+  bottom: var(--cd-shell-rand);
+  z-index: var(--cd-shell-ebene-inseln);
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 6px;
+  row-gap: 0;
+  min-height: 20px;
+  max-width: calc(100cqw - 2 * var(--cd-shell-rand));
+  margin: 0;
+  padding: 0 8px;
+  color: var(--cd-ui-text-leise);
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 20px;
+  white-space: nowrap;
+  background: color-mix(in srgb, var(--cd-ui-flaeche-hoch) var(--cd-ui-chrome-deckkraft), transparent);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  border: 0;
+  border-radius: var(--cd-radius-sm);
+  box-shadow: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.cd-shell-legal[hidden] {
+  display: none;
+}
+.cd-shell-legal > * {
+  flex: none;
+}
+.cd-shell-legal-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.cd-shell .cd-shell-legal a,
+.cd-shell .cd-shell-legal a:visited {
+  color: var(--cd-ui-link);
+  font: inherit;
+  text-decoration: none;
+  border-radius: 2px;
+}
+.cd-shell .cd-shell-legal a:hover {
+  color: var(--cd-ui-link);
+  text-decoration: underline;
+}
+.cd-shell .cd-shell-legal a:focus {
+  outline: none;
+}
+.cd-shell .cd-shell-legal a:focus-visible {
+  text-decoration: underline;
+  outline: 2px solid var(--cd-ui-fokus);
+  outline-offset: 2px;
+}
+.cd-shell-empty-state {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  z-index: var(--cd-shell-ebene-inseln);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  width: min(400px, 100cqw - 2 * var(--cd-shell-rand));
+  max-height: calc(100cqh - 2 * var(--cd-shell-rand));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  margin: 0;
+  padding: 32px 40px;
+  color: var(--cd-ui-text);
+  font-size: 13px;
+  line-height: 1.5;
+  text-align: center;
+  background: color-mix(in srgb, var(--cd-ui-flaeche-hoch) var(--cd-ui-chrome-deckkraft), transparent);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  border: 1px solid var(--cd-ui-linie);
+  border-radius: var(--cd-radius-lg);
+  box-shadow: var(--cd-shadow-2);
+  user-select: none;
+  -webkit-user-select: none;
+  animation: cd-shell-rise-in var(--cd-motion-base) var(--cd-ease-out);
+}
+.cd-shell-empty-state[hidden] {
+  display: none;
+}
+.cd-shell-empty-state-mark {
+  display: block;
+  flex: none;
+  width: 64px;
+  height: 64px;
+  margin: 0;
+}
+.cd-shell .cd-shell-empty-state-title {
+  margin: 0;
+  color: var(--cd-ui-text);
+  font-size: 21px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+.cd-shell .cd-shell-empty-state-text {
+  margin: 0;
+  color: var(--cd-ui-text-leise);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.6;
+}
+.cd-shell-empty-state-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--cd-shell-luecke);
+}
+.cd-shell .cd-shell-empty-state-hint {
+  margin: 0;
+  color: var(--cd-ui-text-leise);
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.5;
+}
+.cd-shell .cd-shell-empty-state-open {
+  display: inline;
+  margin: 0;
+  padding: 0;
+  color: var(--cd-ui-link);
+  font: inherit;
+  text-decoration: none;
+  background: transparent;
+  border: 0;
+  border-radius: 2px;
+  cursor: pointer;
+}
+.cd-shell .cd-shell-empty-state-open:hover {
+  text-decoration: underline;
+}
+.cd-shell .cd-shell-empty-state-open:focus {
+  outline: none;
+}
+.cd-shell .cd-shell-empty-state-open:focus-visible {
+  text-decoration: underline;
+  outline: 2px solid var(--cd-ui-fokus);
+  outline-offset: 2px;
+}
+.cd-shell-empty-state-open-item {
+  white-space: nowrap;
+}
+.cd-shell .cd-shell-empty-state-key {
+  color: var(--cd-ui-text-leise);
+  font-family: var(--modeler-shell-font-mono);
+  font-size: 13px;
+}
+.cd-shell[data-cd-shell-host=web][data-empty-state=shown] :is(.cd-shell-menu-trigger, .cd-shell-primary, .djs-palette, .cd-shell-zoom, .cd-shell-problems, .cd-shell-legend, .cd-shell-status, .cd-shell-hint, .cd-shell-inspector) {
+  visibility: hidden;
+}
+.cd-shell[data-cd-shell-host=web][data-zoom-row=raised] .cd-shell-zoom {
+  bottom: calc(var(--cd-shell-rand) + var(--modeler-shell-legal-height, 20px) + var(--cd-shell-luecke));
+}
+@container cd-shell (max-width: 440px) {
+  .cd-shell[data-cd-shell-host=web][data-zoom-row=raised] .cd-shell-legend {
+    --modeler-shell-legend-min-bottom: calc( var(--cd-shell-rand) + var(--modeler-shell-legal-height, 20px) + var(--cd-shell-luecke) + var(--cd-shell-zeile) + var(--cd-shell-luecke) );
+  }
+}
+.cd-shell-drop-zone {
+  position: absolute;
+  inset: var(--cd-shell-rand);
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
+  margin: 0;
+  padding: var(--cd-shell-rand);
+  background: var(--cd-ui-hover);
+  border: 2px dashed var(--cd-ui-interaktion);
+  border-radius: var(--cd-radius-lg);
+  box-shadow: 0 0 0 var(--cd-shell-rand) var(--cd-ui-grund);
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.cd-shell-drop-zone[hidden] {
+  display: none;
+}
+.cd-shell-drop-zone[data-state=forbidden] {
+  background: var(--cd-ui-danger-flaeche);
+  border-color: var(--cd-ui-danger);
+}
+.cd-shell-drop-zone-chip {
+  box-sizing: border-box;
+  max-width: 100%;
+  padding: 7px 16px;
+  color: var(--cd-ui-text);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 20px;
+  text-align: center;
+  background: var(--cd-ui-flaeche-hoch);
+  border: 1px solid var(--cd-ui-linie);
+  border-radius: var(--cd-radius-md);
+  box-shadow: var(--cd-shadow-2);
+}
+@media (prefers-reduced-motion: reduce) {
+  .cd-shell .cd-shell-empty-state {
+    animation: none;
+  }
+}
+html.cd-shell-reduce-motion .cd-shell .cd-shell-empty-state {
+  animation: none;
+}
+.cd-shell:is([data-cd-kontrast=hoch], [data-cd-kontrast=hoch] *) :is(.cd-shell-empty-state, .cd-shell-drop-zone-chip) {
+  box-shadow: none;
+}
+.cd-shell:is([data-cd-kontrast=hoch], [data-cd-kontrast=hoch] *) :is(.cd-shell-legal a, .cd-shell-empty-state-open) {
+  text-decoration: underline;
+}
+.cd-shell:is([data-cd-kontrast=hoch], [data-cd-kontrast=hoch] *) :is(.cd-shell-legal a, .cd-shell-empty-state-open):focus-visible {
+  outline-width: 3px;
+}
+@media (forced-colors: active) {
+  .cd-shell .cd-shell-empty-state,
+  .cd-shell .cd-shell-drop-zone-chip {
+    border-color: CanvasText;
+  }
+  .cd-shell :is(.cd-shell-legal a, .cd-shell-empty-state-open) {
+    text-decoration: underline;
+  }
+  .cd-shell :is(.cd-shell-legal a, .cd-shell-empty-state-open):focus-visible {
+    outline-color: Highlight;
+  }
+  .cd-shell .cd-shell-drop-zone {
+    forced-color-adjust: none;
+    background: Canvas;
+    border-color: Highlight;
+    box-shadow: 0 0 0 var(--cd-shell-rand) Canvas;
+  }
+  .cd-shell .cd-shell-drop-zone[data-state=forbidden] {
+    border-color: CanvasText;
+    border-style: dotted;
+  }
+  .cd-shell .cd-shell-drop-zone-chip {
+    color: CanvasText;
+    background: Canvas;
+    box-shadow: none;
+  }
+}
+
+/* src/dom/feedback/feedback.css */
+:where(.cd-shell) :is(.cd-shell-toasts, .cd-shell-toast, .cd-shell-toast-text, .cd-shell-toast-close, .cd-shell-problems-popover, .cd-shell-problems-popover-title, .cd-shell-problems-list, .cd-shell-problem, .cd-shell-problem-message, .cd-shell-problem-location) {
+  color: inherit;
+  font: inherit;
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-transform: none;
+  text-indent: 0;
+  text-shadow: none;
+}
+.cd-shell-toasts {
+  position: absolute;
+  top: auto;
+  right: 0;
+  bottom: var(--cd-shell-rand);
+  left: 0;
+  z-index: var(--cd-shell-ebene-toast);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--cd-shell-luecke);
+  width: min(480px, 100cqw - 2 * var(--cd-shell-rand));
+  height: auto;
+  min-height: 0;
+  max-height: none;
+  margin: 0 auto;
+  padding: 0;
+  overflow: visible;
+  color: var(--cd-ui-text);
+  background: transparent;
+  border: 0;
+  pointer-events: none;
+}
+.cd-shell-toasts:empty {
+  display: none;
+}
+.cd-shell-toasts[popover]:not(:popover-open) {
+  display: none;
+}
+.cd-shell-toast {
+  --modeler-shell-toast-status: var(--cd-ui-info);
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--cd-shell-luecke);
+  max-width: 100%;
+  min-height: var(--cd-shell-zeile);
+  margin: 0;
+  padding: 4px 4px 4px 16px;
+  overflow: hidden;
+  color: var(--cd-ui-text);
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.5;
+  text-align: left;
+  background: var(--cd-ui-flaeche-hoch);
+  border: 1px solid var(--cd-ui-linie);
+  border-radius: var(--cd-radius-md);
+  box-shadow: var(--cd-shadow-3);
+  pointer-events: auto;
+  user-select: none;
+  -webkit-user-select: none;
+  animation: cd-shell-toast-in var(--cd-motion-base) var(--cd-ease-out);
+}
+.cd-shell-toast[data-status=success] {
+  --modeler-shell-toast-status: var(--cd-ui-success);
+}
+.cd-shell-toast[data-status=warning] {
+  --modeler-shell-toast-status: var(--cd-ui-warning);
+}
+.cd-shell-toast[data-status=danger] {
+  --modeler-shell-toast-status: var(--cd-ui-danger);
+}
+.cd-shell-toast::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 4px;
+  background: var(--modeler-shell-toast-status);
+}
+.cd-shell-toast-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  background: var(--modeler-shell-toast-status);
+  border-radius: var(--cd-radius-pill);
+}
+.cd-shell-toast-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  padding: 6px 0;
+  color: var(--cd-ui-text);
+  font-size: 13px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+.cd-shell-toast .cd-shell-toast-action {
+  height: var(--cd-shell-ziel);
+}
+.cd-shell-toast-close {
+  box-sizing: border-box;
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: var(--cd-shell-ziel);
+  height: var(--cd-shell-ziel);
+  margin: 0;
+  padding: 0;
+  color: var(--cd-ui-text);
+  background: transparent;
+  border: 0;
+  border-radius: var(--cd-radius-sm);
+  cursor: pointer;
+  transition: background-color var(--cd-motion-fast) var(--cd-ease), color var(--cd-motion-fast) var(--cd-ease);
+}
+.cd-shell-toast-close:hover {
+  color: var(--cd-ui-interaktion);
+  background: var(--cd-ui-hover);
+}
+.cd-shell-toast-close svg {
+  display: block;
+  flex: none;
+}
+.cd-shell-toast[data-leaving] {
+  pointer-events: none;
+  animation: cd-shell-toast-out var(--cd-motion-base) var(--cd-ease) forwards;
+}
+@keyframes cd-shell-toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+@keyframes cd-shell-toast-out {
+  to {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+.cd-shell-live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+  pointer-events: none;
+}
+.cd-shell-problems-popover {
+  --modeler-shell-problems-bottom: calc( var(--cd-shell-rand) + var(--cd-shell-zeile) + var(--cd-shell-luecke) );
+  position: absolute;
+  left: var(--cd-shell-rand);
+  bottom: var(--modeler-shell-problems-bottom);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: min(320px, 100cqw - 2 * var(--cd-shell-rand));
+  max-height: min(320px, 100cqh - var(--modeler-shell-problems-bottom) - var(--cd-shell-rand));
+  margin: 0;
+  padding: 6px;
+  color: var(--cd-ui-text);
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.5;
+  background: var(--cd-ui-flaeche-hoch);
+  border: 1px solid var(--cd-ui-linie);
+  border-radius: var(--cd-radius-md);
+  box-shadow: var(--cd-shadow-3);
+  pointer-events: auto;
+  user-select: none;
+  -webkit-user-select: none;
+  animation: cd-shell-problems-in var(--cd-motion-fast) var(--cd-ease-out);
+}
+.cd-shell[data-cd-shell-host=web] .cd-shell-problems-popover {
+  --modeler-shell-problems-bottom: calc( var(--cd-shell-rand) + var(--modeler-shell-legal-height, 20px) + var(--cd-shell-luecke) + var(--cd-shell-zeile) + var(--cd-shell-luecke) );
+}
+.cd-shell-problems-popover[hidden] {
+  display: none;
+}
+.cd-shell-problems-popover:focus {
+  outline: none;
+}
+.cd-shell-problems-popover:focus-visible {
+  outline: 2px solid var(--cd-ui-fokus);
+  outline-offset: -2px;
+}
+.cd-shell-problems-popover-title {
+  flex: none;
+  margin: 0;
+  padding: 8px 12px 4px;
+  color: var(--cd-ui-text);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.5;
+}
+.cd-shell-problems-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  list-style: none;
+}
+.cd-shell-problems-list > li {
+  display: block;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.cd-shell-problem {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr);
+  column-gap: 12px;
+  align-items: start;
+  width: 100%;
+  min-height: var(--cd-shell-eintrag);
+  margin: 0;
+  padding: 8px 12px;
+  color: var(--cd-ui-text);
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.5;
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-radius: var(--cd-radius-sm);
+}
+button.cd-shell-problem {
+  cursor: pointer;
+  transition: background-color var(--cd-motion-fast) var(--cd-ease);
+}
+button.cd-shell-problem:hover,
+button.cd-shell-problem:focus-visible {
+  background: var(--cd-ui-hover);
+}
+.cd-shell-problem-icon {
+  display: grid;
+  grid-row: 1 / span 2;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+}
+.cd-shell-problem-icon svg {
+  display: block;
+  flex: none;
+}
+.cd-shell-problem[data-severity=error] .cd-shell-problem-icon {
+  color: var(--cd-ui-danger);
+}
+.cd-shell-problem[data-severity=warning] .cd-shell-problem-icon {
+  color: var(--cd-ui-warning);
+}
+.cd-shell-problem-message {
+  grid-column: 2;
+  color: var(--cd-ui-text);
+  overflow-wrap: anywhere;
+}
+.cd-shell-problem-location {
+  grid-column: 2;
+  color: var(--cd-ui-text-leise);
+  overflow-wrap: anywhere;
+}
+@keyframes cd-shell-problems-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+.cd-shell :is(.cd-shell-toast-close, .cd-shell-problem):focus {
+  outline: none;
+}
+.cd-shell :is(.cd-shell-toast-close, .cd-shell-toast-action, .cd-shell-problem):focus-visible {
+  outline: 2px solid var(--cd-ui-fokus);
+  outline-offset: -2px;
+}
+.cd-shell:is([data-cd-kontrast=hoch], [data-cd-kontrast=hoch] *) :is(.cd-shell-toast, .cd-shell-problems-popover) {
+  box-shadow: none;
+}
+.cd-shell:is([data-cd-kontrast=hoch], [data-cd-kontrast=hoch] *) :is(.cd-shell-toast-close, .cd-shell-toast-action, .cd-shell-problem, .cd-shell-problems-popover):focus-visible {
+  outline-width: 3px;
+  outline-offset: -3px;
+}
+@media (forced-colors: active) {
+  .cd-shell :is(.cd-shell-toast, .cd-shell-problems-popover) {
+    border-color: CanvasText;
+  }
+  .cd-shell .cd-shell-toast::before,
+  .cd-shell .cd-shell-toast-dot {
+    forced-color-adjust: none;
+    background: CanvasText;
+  }
+  .cd-shell :is(.cd-shell-toast-close, .cd-shell-toast-action, .cd-shell-problem, .cd-shell-problems-popover):focus-visible {
+    outline-color: Highlight;
+  }
+  .cd-shell button.cd-shell-problem:hover:not(:focus-visible) {
+    outline: 1px solid Highlight;
+    outline-offset: -1px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .cd-shell :is(.cd-shell-toast, .cd-shell-problems-popover) {
+    animation: none;
+  }
+}
+html.cd-shell-reduce-motion .cd-shell :is(.cd-shell-toast, .cd-shell-problems-popover) {
+  animation: none;
+}
+
 /* src/diagram-js/palette.css */
 .djs-palette[data-chrome=palette] {
   --modeler-shell-palette-focus-width: 2px;

package/dist/testing-vscode-stub.js

@@ -2,9 +2,9 @@ import {
   connectThemeBridge,
   currentAppearance,
   renderWebviewHtml
-} from "./chunk-RJRFR6N3.js";
+} from "./chunk-KYDG5DMX.js";
 import "./chunk-N4QXFF3A.js";
-import "./chunk-5JSZ4VGA.js";
+import "./chunk-OADW3GPA.js";
 
 // src/testing/vscode-stub.ts
 var BODY_CLASSES = {