Sync styleguide 2026.05.18.1

public/assets/styleguide.upstream.css

@@ -62,6 +62,7 @@
   --surface-menu-panel-portal: var(--color-light-grey);
   --surface-help-icon: var(--color-medium-grey);
   --surface-help-panel: var(--color-light-grey);
+  --surface-tooltip: var(--color-light-grey);
   --surface-pulldown-panel: var(--color-light-grey);
   --surface-activatable-remove: var(--surface-control-default);
   --surface-slider-track: var(--color-medium-grey);
@@ -89,6 +90,8 @@
   --layout-mode-toggle-local-width-factor: 3;
   --layout-mode-toggle-width: calc(var(--interaction-height) * 3.5);
   --layout-help-panel-width: calc(var(--interaction-height) * 8);
+  --layout-tooltip-width: calc(var(--interaction-height) * 8);
+  --radius-tooltip: var(--radius-interaction);
   --text-control-default: var(--color-font-dark);
   --text-control-disabled: var(--color-dark-grey);
   --text-button-process: var(--color-font-light);
@@ -98,6 +101,7 @@
   --text-menu-link-portal: var(--color-font-dark);
   --text-help-icon: var(--color-font-dark);
   --text-help-panel: var(--color-font-dark);
+  --text-tooltip: var(--color-font-dark);
   --text-activatable-remove: var(--text-control-default);
   --text-hyperlink: var(--color-font-hyperlink);
   --icon-pulldown-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M2 2l4 4 4-4' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
@@ -1760,6 +1764,95 @@ section + section {
       right: 0;
     }
 
+    .sg-tooltip-wrap {
+      position: relative;
+      display: inline-flex;
+      vertical-align: middle;
+    }
+
+    .sg-tooltip-panel {
+      position: absolute;
+      z-index: var(--layer-pulldown-panel);
+      display: block;
+      width: var(--layout-tooltip-width);
+      max-width: calc(100vw - (2 * var(--spacing-large)));
+      box-sizing: border-box;
+      overflow-wrap: anywhere;
+      padding: var(--spacing-large);
+      border-radius: var(--radius-tooltip);
+      color: var(--text-tooltip);
+      background: var(--surface-tooltip);
+      box-shadow: var(--shadow-overlay);
+    }
+
+    .sg-tooltip-panel[hidden] {
+      display: none;
+    }
+
+    .sg-tooltip-wrap[data-tooltip-placement="bottom"] .sg-tooltip-panel {
+      top: calc(100% + var(--spacing-small));
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .sg-tooltip-wrap[data-tooltip-placement="top"] .sg-tooltip-panel {
+      bottom: calc(100% + var(--spacing-small));
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .sg-tooltip-wrap[data-tooltip-placement="left"] .sg-tooltip-panel {
+      top: 50%;
+      right: calc(100% + var(--spacing-small));
+      transform: translateY(-50%);
+    }
+
+    .sg-tooltip-wrap[data-tooltip-placement="right"] .sg-tooltip-panel {
+      top: 50%;
+      left: calc(100% + var(--spacing-small));
+      transform: translateY(-50%);
+    }
+
+    .sg-tooltip-panel::before {
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      content: "";
+    }
+
+    .sg-tooltip-wrap[data-tooltip-placement="bottom"] .sg-tooltip-panel::before {
+      top: calc(var(--spacing-small) / -2);
+      left: 50%;
+      border-width: 0 calc(var(--spacing-small) / 2) calc(var(--spacing-small) / 2);
+      border-color: transparent transparent var(--surface-tooltip);
+      transform: translateX(-50%);
+    }
+
+    .sg-tooltip-wrap[data-tooltip-placement="top"] .sg-tooltip-panel::before {
+      bottom: calc(var(--spacing-small) / -2);
+      left: 50%;
+      border-width: calc(var(--spacing-small) / 2) calc(var(--spacing-small) / 2) 0;
+      border-color: var(--surface-tooltip) transparent transparent;
+      transform: translateX(-50%);
+    }
+
+    .sg-tooltip-wrap[data-tooltip-placement="left"] .sg-tooltip-panel::before {
+      top: 50%;
+      right: calc(var(--spacing-small) / -2);
+      border-width: calc(var(--spacing-small) / 2) 0 calc(var(--spacing-small) / 2) calc(var(--spacing-small) / 2);
+      border-color: transparent transparent transparent var(--surface-tooltip);
+      transform: translateY(-50%);
+    }
+
+    .sg-tooltip-wrap[data-tooltip-placement="right"] .sg-tooltip-panel::before {
+      top: 50%;
+      left: calc(var(--spacing-small) / -2);
+      border-width: calc(var(--spacing-small) / 2) calc(var(--spacing-small) / 2) calc(var(--spacing-small) / 2) 0;
+      border-color: transparent var(--surface-tooltip) transparent transparent;
+      transform: translateY(-50%);
+    }
+
     .sg-pulldown-panel {
       position: absolute;
       top: calc(100% + var(--spacing-small));
@@ -3147,7 +3240,7 @@ section + section {
   display: none;
 }
 
-.sg-card .sg-delete-confirmation-pattern__body {
+.sg-delete-confirmation-pattern__body {
   display: flex;
   flex-direction: column;
   gap: var(--layout-delete-confirmation-content-gap);
@@ -5217,3 +5310,4 @@ main {
   flex: 1 1 0;
   min-width: 0;
 }
+

public/assets/styleguide.upstream.meta.json

@@ -1,7 +1,7 @@
 {
   "styleguideVersion": "2026.05.18.1",
-  "styleguideCommit": "71734d6",
-  "syncedAtUtc": "2026-09-08T09:49:27Z",
+  "styleguideCommit": "5b86185",
+  "syncedAtUtc": "2026-09-21T12:28:47Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }

public/assets/styles.css

@@ -62,6 +62,7 @@
   --surface-menu-panel-portal: var(--color-light-grey);
   --surface-help-icon: var(--color-medium-grey);
   --surface-help-panel: var(--color-light-grey);
+  --surface-tooltip: var(--color-light-grey);
   --surface-pulldown-panel: var(--color-light-grey);
   --surface-activatable-remove: var(--surface-control-default);
   --surface-slider-track: var(--color-medium-grey);
@@ -89,6 +90,8 @@
   --layout-mode-toggle-local-width-factor: 3;
   --layout-mode-toggle-width: calc(var(--interaction-height) * 3.5);
   --layout-help-panel-width: calc(var(--interaction-height) * 8);
+  --layout-tooltip-width: calc(var(--interaction-height) * 8);
+  --radius-tooltip: var(--radius-interaction);
   --text-control-default: var(--color-font-dark);
   --text-control-disabled: var(--color-dark-grey);
   --text-button-process: var(--color-font-light);
@@ -98,6 +101,7 @@
   --text-menu-link-portal: var(--color-font-dark);
   --text-help-icon: var(--color-font-dark);
   --text-help-panel: var(--color-font-dark);
+  --text-tooltip: var(--color-font-dark);
   --text-activatable-remove: var(--text-control-default);
   --text-hyperlink: var(--color-font-hyperlink);
   --icon-pulldown-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M2 2l4 4 4-4' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
@@ -1760,6 +1764,95 @@ section + section {
       right: 0;
     }
 
+    .sg-tooltip-wrap {
+      position: relative;
+      display: inline-flex;
+      vertical-align: middle;
+    }
+
+    .sg-tooltip-panel {
+      position: absolute;
+      z-index: var(--layer-pulldown-panel);
+      display: block;
+      width: var(--layout-tooltip-width);
+      max-width: calc(100vw - (2 * var(--spacing-large)));
+      box-sizing: border-box;
+      overflow-wrap: anywhere;
+      padding: var(--spacing-large);
+      border-radius: var(--radius-tooltip);
+      color: var(--text-tooltip);
+      background: var(--surface-tooltip);
+      box-shadow: var(--shadow-overlay);
+    }
+
+    .sg-tooltip-panel[hidden] {
+      display: none;
+    }
+
+    .sg-tooltip-wrap[data-tooltip-placement="bottom"] .sg-tooltip-panel {
+      top: calc(100% + var(--spacing-small));
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .sg-tooltip-wrap[data-tooltip-placement="top"] .sg-tooltip-panel {
+      bottom: calc(100% + var(--spacing-small));
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .sg-tooltip-wrap[data-tooltip-placement="left"] .sg-tooltip-panel {
+      top: 50%;
+      right: calc(100% + var(--spacing-small));
+      transform: translateY(-50%);
+    }
+
+    .sg-tooltip-wrap[data-tooltip-placement="right"] .sg-tooltip-panel {
+      top: 50%;
+      left: calc(100% + var(--spacing-small));
+      transform: translateY(-50%);
+    }
+
+    .sg-tooltip-panel::before {
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      content: "";
+    }
+
+    .sg-tooltip-wrap[data-tooltip-placement="bottom"] .sg-tooltip-panel::before {
+      top: calc(var(--spacing-small) / -2);
+      left: 50%;
+      border-width: 0 calc(var(--spacing-small) / 2) calc(var(--spacing-small) / 2);
+      border-color: transparent transparent var(--surface-tooltip);
+      transform: translateX(-50%);
+    }
+
+    .sg-tooltip-wrap[data-tooltip-placement="top"] .sg-tooltip-panel::before {
+      bottom: calc(var(--spacing-small) / -2);
+      left: 50%;
+      border-width: calc(var(--spacing-small) / 2) calc(var(--spacing-small) / 2) 0;
+      border-color: var(--surface-tooltip) transparent transparent;
+      transform: translateX(-50%);
+    }
+
+    .sg-tooltip-wrap[data-tooltip-placement="left"] .sg-tooltip-panel::before {
+      top: 50%;
+      right: calc(var(--spacing-small) / -2);
+      border-width: calc(var(--spacing-small) / 2) 0 calc(var(--spacing-small) / 2) calc(var(--spacing-small) / 2);
+      border-color: transparent transparent transparent var(--surface-tooltip);
+      transform: translateY(-50%);
+    }
+
+    .sg-tooltip-wrap[data-tooltip-placement="right"] .sg-tooltip-panel::before {
+      top: 50%;
+      left: calc(var(--spacing-small) / -2);
+      border-width: calc(var(--spacing-small) / 2) calc(var(--spacing-small) / 2) calc(var(--spacing-small) / 2) 0;
+      border-color: transparent var(--surface-tooltip) transparent transparent;
+      transform: translateY(-50%);
+    }
+
     .sg-pulldown-panel {
       position: absolute;
       top: calc(100% + var(--spacing-small));
@@ -3147,7 +3240,7 @@ section + section {
   display: none;
 }
 
-.sg-card .sg-delete-confirmation-pattern__body {
+.sg-delete-confirmation-pattern__body {
   display: flex;
   flex-direction: column;
   gap: var(--layout-delete-confirmation-content-gap);
@@ -5217,3 +5310,4 @@ main {
   flex: 1 1 0;
   min-width: 0;
 }
+