Sync styleguide 2026.05.18.1

docs/styleguide/styles/47-patterns-file-upload.css

@@ -0,0 +1,87 @@
+/* ========================================================= */
+/* Patterns: Datei-Upload                                   */
+/* ========================================================= */
+
+.sg-file-upload {
+  --surface-file-upload-dropzone: var(--surface-form-preview);
+  --surface-file-upload-file-item: var(--surface-control-default);
+  --text-file-upload-meta: var(--text-control-disabled);
+  --text-file-upload-error: var(--color-signal-red);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-large);
+  width: 100%;
+  max-width: var(--layout-input-field-max-width);
+}
+
+.sg-file-upload__status,
+.sg-file-upload__file-meta {
+  margin: var(--spacing-small) 0 0;
+}
+
+.sg-file-upload__dropzone {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-large);
+  width: 100%;
+  padding: var(--spacing-large);
+  background: var(--surface-file-upload-dropzone);
+  border: 1px dashed var(--surface-button-active);
+  border-radius: var(--radius-interaction);
+}
+
+.sg-file-upload__dropzone[data-drag-over="true"] {
+  outline: 2px solid var(--text-hyperlink);
+  outline-offset: 2px;
+}
+
+.sg-file-upload__files {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sg-file-upload__file {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-large);
+  padding: var(--spacing-small) var(--spacing-large);
+  color: var(--text-control-default);
+  background: var(--surface-file-upload-file-item);
+  border-radius: var(--radius-interaction);
+}
+
+.sg-file-upload__file-name {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.sg-file-upload__file-meta {
+  color: var(--text-file-upload-meta);
+}
+
+.sg-file-upload__remove {
+  flex: 0 0 auto;
+}
+
+.sg-file-upload__error {
+  color: var(--text-file-upload-error);
+}
+
+@media (max-width: 48rem) {
+  .sg-file-upload__dropzone {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .sg-file-upload__file {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: var(--spacing-small);
+  }
+}