From 16745eb802b141a5b5b76cd96d6938b11efd761e Mon Sep 17 00:00:00 2001
From: Benjamin Kott <benjamin.kott@outlook.com>
Date: Tue, 10 Sep 2024 08:58:35 +0200
Subject: [PATCH] [TASK] Make tabs context aware
We are dropping the Bootstrap CSS definitions for
all navs to have more control about the styling of
the nav elements. From now on we are shipping
custom css adapted to our needs. The new nav
element styling is context aware and adapts to
light and dark color schemes.
Resolves: #104865
Releases: main
Change-Id: I8632b33c48162cbb407dc2b2a99eaab00518c635
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/85936
Tested-by: core-ci <typo3@b13.com>
Tested-by: Andreas Kienast <a.fernandez@scripting-base.de>
Tested-by: Oliver Bartsch <bo@cedev.de>
Reviewed-by: Benjamin Kott <benjamin.kott@outlook.com>
Reviewed-by: Andreas Kienast <a.fernandez@scripting-base.de>
Reviewed-by: Oliver Bartsch <bo@cedev.de>
Tested-by: Benjamin Kott <benjamin.kott@outlook.com>
---
Build/Sources/Sass/_legacy.scss | 12 --
Build/Sources/Sass/_minimal.scss | 3 +-
Build/Sources/Sass/backend.scss | 1 -
.../Sass/component/_elementbrowser.scss | 2 +-
Build/Sources/Sass/component/_nav.scss | 188 +++++++++++++++++-
Build/Sources/Sass/component/_tabs.scss | 15 --
.../component/forms/_form-validation.scss | 44 ++--
Build/Sources/Sass/typo3/_element_tab.scss | 71 -------
.../Sources/Sass/typo3/_element_tceforms.scss | 5 +-
Build/Sources/Sass/typo3/_main_form.scss | 2 +-
Build/Sources/Sass/variables/_main.scss | 42 ++--
Build/Sources/Sass/workspace.scss | 34 ----
.../backend/form-engine-validation.ts | 2 +-
Build/Sources/TypeScript/backend/tabs.ts | 7 +-
.../renderable/record-information.ts | 15 +-
.../Resources/Public/Css/adminpanel.css | 6 +-
.../Private/Partials/ModuleTemplate/Tabs.html | 12 +-
.../backend/Resources/Public/Css/backend.css | 132 +++++-------
.../JavaScript/form-engine-validation.js | 2 +-
.../Resources/Public/JavaScript/tabs.js | 2 +-
.../Application/Impexp/ExportCest.php | 8 +-
.../Application/Impexp/ImportCest.php | 4 +-
.../Application/Impexp/UsersCest.php | 6 +-
.../RecordDownloadWithPresetCest.php | 2 +-
.../Resources/Private/Templates/Export.html | 44 +++-
.../Resources/Private/Templates/Import.html | 44 +++-
.../ExtensionConfiguration/ExtensionForm.html | 11 +-
.../Resources/Private/Templates/Main.html | 11 +-
.../Controller/ComponentsController.php | 13 ++
.../Resources/Private/Language/locallang.xlf | 21 ++
.../Templates/Backend/Components/Navs.html | 129 ++++++++++++
.../Templates/Backend/Components/Tab.html | 15 +-
.../Resources/Public/Css/preview.css | 6 -
.../renderable/record-information.js | 17 +-
34 files changed, 595 insertions(+), 333 deletions(-)
delete mode 100644 Build/Sources/Sass/component/_tabs.scss
delete mode 100644 Build/Sources/Sass/typo3/_element_tab.scss
create mode 100644 typo3/sysext/styleguide/Resources/Private/Templates/Backend/Components/Navs.html
diff --git a/Build/Sources/Sass/_legacy.scss b/Build/Sources/Sass/_legacy.scss
index f455ead7ef4b..a412c3edbba7 100644
--- a/Build/Sources/Sass/_legacy.scss
+++ b/Build/Sources/Sass/_legacy.scss
@@ -52,18 +52,6 @@ $input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !
display: none !important;
}
-// nav fallback
-// todo add ".nav-item" and ".nav-link" classes to markup
-.nav.nav-tabs {
- > li:not(.nav-item) {
- @extend .nav-item !optional;
-
- > a:not(.nav-link) {
- @extend .nav-link !optional;
- }
- }
-}
-
.page-header {
padding: .625rem 1rem;
margin: 2rem 0 1rem;
diff --git a/Build/Sources/Sass/_minimal.scss b/Build/Sources/Sass/_minimal.scss
index 70a650ba5147..1551ccae5340 100644
--- a/Build/Sources/Sass/_minimal.scss
+++ b/Build/Sources/Sass/_minimal.scss
@@ -37,7 +37,7 @@
@import "../../node_modules/bootstrap/scss/transitions";
@import "../../node_modules/bootstrap/scss/dropdown";
@import "../../node_modules/bootstrap/scss/button-group";
-@import "../../node_modules/bootstrap/scss/nav";
+// @import "../../node_modules/bootstrap/scss/nav";
@import "../../node_modules/bootstrap/scss/navbar";
// @import "../../node_modules/bootstrap/scss/card";
// @import "../../node_modules/bootstrap/scss/accordion";
@@ -102,4 +102,3 @@
@import "component/panel";
@import "component/table";
@import "component/simpletable";
-@import "component/tabs";
diff --git a/Build/Sources/Sass/backend.scss b/Build/Sources/Sass/backend.scss
index 7e584764c169..1fc8b62a7e1d 100644
--- a/Build/Sources/Sass/backend.scss
+++ b/Build/Sources/Sass/backend.scss
@@ -71,7 +71,6 @@
@import "typo3/element_page_position";
@import "typo3/element_page_position_map";
@import "typo3/element_slider";
-@import "typo3/element_tab";
@import "typo3/element_tceforms";
@import "typo3/element_tree";
@import "typo3/element_uiblock";
diff --git a/Build/Sources/Sass/component/_elementbrowser.scss b/Build/Sources/Sass/component/_elementbrowser.scss
index dcd410cefd12..b6fdc5ce3cd2 100644
--- a/Build/Sources/Sass/component/_elementbrowser.scss
+++ b/Build/Sources/Sass/component/_elementbrowser.scss
@@ -16,7 +16,7 @@
// </div>
// </div>
// <div class="element-browser-tabs">
-// <ul class="nav nav-tabs" role="tablist">
+// <ul class="nav nav-pills" role="tablist">
// <li class="active"><a href="#">Page 1</a></li>
// <li class="active"><a href="#">Page 2</a></li>
// <li class="active"><a href="#">Page 3</a></li>
diff --git a/Build/Sources/Sass/component/_nav.scss b/Build/Sources/Sass/component/_nav.scss
index c6f00fe53bb2..892ffa8e7e82 100644
--- a/Build/Sources/Sass/component/_nav.scss
+++ b/Build/Sources/Sass/component/_nav.scss
@@ -1,9 +1,191 @@
//
// Nav
-// ===
-//
-// Bugfixes for Bootstrap to support RTL
//
.nav {
+ --typo3-nav-link-padding-x: 1rem;
+ --typo3-nav-link-padding-y: .5rem;
+ --typo3-nav-link-font-size: var(--typo3-font-size);
+ --typo3-nav-link-font-weight: normal;
+ --typo3-nav-link-color: var(--typo3-text-color-link);
+ --typo3-nav-link-hover-color: var(--typo3-text-color-link);
+ --typo3-nav-link-disabled-color: var(--typo3-text-color-variant);
+ --typo3-nav-link-focusring-base-color: var(--typo3-nav-link-color);
+ display: flex;
+ gap: 1px;
+ flex-wrap: wrap;
padding-inline: 0;
+ margin-bottom: 0;
+ list-style: none;
+ font-size: var(--typo3-nav-link-font-size);
+}
+
+.nav-link {
+ display: block;
+ padding: var(--typo3-nav-link-padding-y) var(--typo3-nav-link-padding-x);
+ font-size: var(--typo3-nav-link-font-size);
+ font-weight: var(--typo3-nav-link-font-weight);
+ color: var(--typo3-nav-link-color);
+ background: none;
+ border: 0;
+ transition:
+ color .2s ease-in-out,
+ background-color .2s ease-in-out,
+ border-color .2s ease-in-out;
+ outline-offset: 0;
+
+ &:hover,
+ &:focus {
+ color: var(--typo3-nav-link-hover-color);
+ text-decoration: underline;
+ }
+
+ &:focus-visible {
+ outline: .25rem solid color-mix(in srgb, var(--typo3-nav-link-focusring-base-color), transparent 25%);
+ }
+
+ // Disabled state lightens text
+ &.disabled,
+ &:disabled {
+ color: var(--typo3-nav-link-disabled-color);
+ pointer-events: none;
+ cursor: default;
+ }
+}
+
+//
+// Tabs
+//
+.nav-tabs {
+ --typo3-nav-tabs-color: var(--typo3-component-color);
+ --typo3-nav-tabs-bg: var(--typo3-component-bg);
+ --typo3-nav-tabs-border-color: color-mix(in srgb, var(--typo3-nav-tabs-bg), var(--typo3-nav-tabs-color) 15%);
+ --typo3-nav-tabs-border-width: var(--typo3-component-border-width);
+ --typo3-nav-tabs-border-radius: var(--typo3-component-border-radius);
+ position: relative;
+ gap: 2px 1px;
+ z-index: 1;
+ border-bottom: var(--typo3-nav-tabs-border-width) solid var(--typo3-nav-tabs-border-color);
+
+ .nav-link {
+ --typo3-nav-tabs-link-state-color: initial;
+ --typo3-nav-tabs-link-state-bg: initial;
+ --typo3-nav-tabs-link-color: var(--typo3-nav-tabs-link-state-color, var(--typo3-nav-tabs-color));
+ --typo3-nav-tabs-link-bg: var(--typo3-nav-tabs-link-state-bg, var(--typo3-nav-tabs-bg));
+ --typo3-nav-tabs-link-border-color: color-mix(in srgb, var(--typo3-nav-tabs-link-bg), var(--typo3-nav-tabs-link-color) 15%);
+ --typo3-nav-tabs-link-active-color: var(--typo3-nav-tabs-color);
+ --typo3-nav-tabs-link-active-bg: var(--typo3-nav-tabs-bg);
+ --typo3-nav-tabs-link-danger-color: var(--typo3-surface-container-danger-text);
+ --typo3-nav-tabs-link-danger-bg: var(--typo3-surface-container-danger);
+ --typo3-nav-tabs-link-danger-active-color: var(--typo3-nav-tabs-link-active-color);
+ --typo3-nav-tabs-link-danger-active-bg: var(--typo3-nav-tabs-link-active-bg);
+ --typo3-nav-link-focusring-base-color: var(--typo3-nav-tabs-link-border-color);
+ position: relative;
+ color: var(--typo3-nav-tabs-link-color);
+ background-color: var(--typo3-nav-tabs-link-bg);
+ margin-bottom: calc(-1 * var(--typo3-nav-tabs-border-width));
+ border: var(--typo3-nav-tabs-border-width) solid var(--typo3-nav-tabs-link-border-color);
+ border-start-start-radius: var(--typo3-nav-tabs-border-radius);
+ border-start-end-radius: var(--typo3-nav-tabs-border-radius);
+
+ &:focus,
+ &:hover {
+ text-decoration: none;
+ isolation: isolate;
+ }
+
+ &:hover {
+ background: color-mix(in srgb, var(--typo3-nav-tabs-link-bg), var(--typo3-nav-tabs-link-color) 6%);
+ }
+ }
+
+ .nav-link.active,
+ .nav-item.show .nav-link {
+ &,
+ &:hover {
+ --typo3-nav-tabs-link-state-color: var(--typo3-nav-tabs-link-active-color);
+ --typo3-nav-tabs-link-state-bg: var(--typo3-nav-tabs-link-active-bg);
+ background-color: var(--typo3-nav-tabs-link-bg);
+ border-bottom-color: var(--typo3-nav-tabs-link-bg);
+ }
+ }
+
+ .nav-item.has-validation-error .nav-link {
+ --typo3-nav-tabs-link-state-color: var(--typo3-nav-tabs-link-danger-color);
+ --typo3-nav-tabs-link-state-bg: var(--typo3-nav-tabs-link-danger-bg);
+ padding-inline-start: calc(var(--typo3-nav-link-padding-x) + 16px + .25rem);
+
+ &.active {
+ --typo3-nav-tabs-link-state-color: var(--typo3-nav-tabs-link-danger-active-color);
+ --typo3-nav-tabs-link-state-bg: var(--typo3-nav-tabs-link-danger-active-bg);
+ }
+
+ &:before,
+ &:after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ inset-inline: var(--typo3-nav-link-padding-x);
+ transform: translate(0, -50%);
+ border-radius: 50%;
+ width: 16px;
+ height: 16px;
+ }
+
+ &:before {
+ background-color: var(--typo3-state-danger-bg);
+ }
+
+ &:after {
+ background-color: var(--typo3-state-danger-color);
+ mask-repeat: no-repeat;
+ mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='%23fff'%3e%3ccircle cx='8' cy='11' r='1'/%3e%3cpath d='M8.5 9h-1l-.445-4.45A.5.5 0 0 1 7.552 4h.896a.5.5 0 0 1 .497.55L8.5 9z'/%3e%3c/g%3e%3c/svg%3e");
+ mask-position: center center;
+ mask-size: contain;
+ }
+ }
+}
+
+//
+// Pills
+//
+.nav-pills {
+ --typo3-nav-pills-border-radius: var(--typo3-component-border-radius);
+ --typo3-nav-pills-link-active-color: var(--typo3-state-primary-color);
+ --typo3-nav-pills-link-active-bg: var(--typo3-state-primary-bg);
+
+ .nav-link {
+ border-radius: var(--typo3-nav-pills-border-radius);
+ }
+
+ .nav-link.active,
+ .show > .nav-link {
+ --typo3-nav-link-focusring-base-color: var(--typo3-nav-pills-link-active-bg);
+ background-color: var(--typo3-nav-pills-link-active-bg);
+ color: var(--typo3-nav-pills-link-active-color);
+ text-decoration: none;
+ }
+}
+
+//
+// Tabs
+//
+.tab-content {
+ > .tab-pane {
+ display: none;
+ }
+
+ > .active {
+ display: block;
+ }
+}
+
+.tab-pane {
+ > .panel {
+ --typo3-panel-border-radius-top: 0;
+ }
+
+ > .visually-hidden:first-child + .form-section,
+ > *:first-child {
+ border-top: none;
+ }
}
diff --git a/Build/Sources/Sass/component/_tabs.scss b/Build/Sources/Sass/component/_tabs.scss
deleted file mode 100644
index 141d1e88049b..000000000000
--- a/Build/Sources/Sass/component/_tabs.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-//
-// Tab Pane
-//
-.tab-pane {
- > .panel {
- --typo3-panel-bg: #{$nav-tabs-active-link-bg};
- --typo3-panel-border-color: #{$nav-tabs-active-link-hover-border-color};
- --typo3-panel-border-radius: 0;
- }
-
- > .visually-hidden:first-child + .form-section,
- > *:first-child {
- border-top: none;
- }
-}
diff --git a/Build/Sources/Sass/component/forms/_form-validation.scss b/Build/Sources/Sass/component/forms/_form-validation.scss
index 95ae13b25a02..3af85dc61e3c 100644
--- a/Build/Sources/Sass/component/forms/_form-validation.scss
+++ b/Build/Sources/Sass/component/forms/_form-validation.scss
@@ -1,21 +1,20 @@
//
// Form Validation
//
-.is-invalid,
-.has-error {
- --typo3-input-color: var(--typo3-surface-container-danger-text);
- --typo3-input-bg: var(--typo3-surface-container-danger);
+.has-change {
+ --typo3-input-color: var(--typo3-surface-container-info-text);
+ --typo3-input-bg: var(--typo3-surface-container-info);
--typo3-input-group-addon-bg: color-mix(in srgb, var(--typo3-input-bg), var(--typo3-input-color) 10%);
- --typo3-input-border-color: var(--typo3-state-danger-border-color);
+ --typo3-input-border-color: var(--typo3-state-info-border-color);
--typo3-input-hover-color: var(--typo3-input-color);
--typo3-input-hover-bg: var(--typo3-input-bg);
- --typo3-input-hover-border-color: var(--typo3-state-danger-hover-border-color);
+ --typo3-input-hover-border-color: var(--typo3-state-info-hover-border-color);
--typo3-input-focus-color: var(--typo3-input-color);
--typo3-input-focus-bg: var(--typo3-input-bg);
- --typo3-input-focus-border-color: var(--typo3-state-danger-focus-border-color);
+ --typo3-input-focus-border-color: var(--typo3-state-info-focus-border-color);
.form-label:before {
- @include icon-background($icon-actions-exclamation-circle, var(--typo3-text-color-danger));
+ @include icon-background($icon-actions-exclamation-circle, var(--typo3-text-color-info));
width: calc(16 / 12 * 1em);
height: calc(16 / 12 * 1em);
}
@@ -41,39 +40,40 @@
}
}
-.has-change {
- --typo3-input-color: var(--typo3-surface-container-info-text);
- --typo3-input-bg: var(--typo3-surface-container-info);
+.has-warning {
+ --typo3-input-color: var(--typo3-surface-container-warning-text);
+ --typo3-input-bg: var(--typo3-surface-container-warning);
--typo3-input-group-addon-bg: color-mix(in srgb, var(--typo3-input-bg), var(--typo3-input-color) 10%);
- --typo3-input-border-color: var(--typo3-state-info-border-color);
+ --typo3-input-border-color: var(--typo3-state-warning-border-color);
--typo3-input-hover-color: var(--typo3-input-color);
--typo3-input-hover-bg: var(--typo3-input-bg);
- --typo3-input-hover-border-color: var(--typo3-state-info-hover-border-color);
+ --typo3-input-hover-border-color: var(--typo3-state-warning-hover-border-color);
--typo3-input-focus-color: var(--typo3-input-color);
--typo3-input-focus-bg: var(--typo3-input-bg);
- --typo3-input-focus-border-color: var(--typo3-state-info-focus-border-color);
+ --typo3-input-focus-border-color: var(--typo3-state-warning-focus-border-color);
.form-label:before {
- @include icon-background($icon-actions-exclamation-circle, var(--typo3-text-color-info));
+ @include icon-background($icon-actions-exclamation-triangle, var(--typo3-text-color-warning));
width: calc(16 / 12 * 1em);
height: calc(16 / 12 * 1em);
}
}
-.has-warning {
- --typo3-input-color: var(--typo3-surface-container-warning-text);
- --typo3-input-bg: var(--typo3-surface-container-warning);
+.is-invalid,
+.has-error {
+ --typo3-input-color: var(--typo3-surface-container-danger-text);
+ --typo3-input-bg: var(--typo3-surface-container-danger);
--typo3-input-group-addon-bg: color-mix(in srgb, var(--typo3-input-bg), var(--typo3-input-color) 10%);
- --typo3-input-border-color: var(--typo3-state-warning-border-color);
+ --typo3-input-border-color: var(--typo3-state-danger-border-color);
--typo3-input-hover-color: var(--typo3-input-color);
--typo3-input-hover-bg: var(--typo3-input-bg);
- --typo3-input-hover-border-color: var(--typo3-state-warning-hover-border-color);
+ --typo3-input-hover-border-color: var(--typo3-state-danger-hover-border-color);
--typo3-input-focus-color: var(--typo3-input-color);
--typo3-input-focus-bg: var(--typo3-input-bg);
- --typo3-input-focus-border-color: var(--typo3-state-warning-focus-border-color);
+ --typo3-input-focus-border-color: var(--typo3-state-danger-focus-border-color);
.form-label:before {
- @include icon-background($icon-actions-exclamation-triangle, var(--typo3-text-color-warning));
+ @include icon-background($icon-actions-exclamation-circle, var(--typo3-text-color-danger));
width: calc(16 / 12 * 1em);
height: calc(16 / 12 * 1em);
}
diff --git a/Build/Sources/Sass/typo3/_element_tab.scss b/Build/Sources/Sass/typo3/_element_tab.scss
deleted file mode 100644
index f9b43cae5d16..000000000000
--- a/Build/Sources/Sass/typo3/_element_tab.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-//
-// Tab menu
-//
-.nav-tabs {
- border-radius: $border-radius $border-radius 0 0;
- background-color: darken($nav-tabs-active-link-bg, 5%);
-
- > li {
- + li {
- margin-inline-start: 2px;
- }
-
- > a.nav-link {
- margin-inline-end: 0;
-
- @include transition(all .25s ease-in-out);
-
- &:focus,
- &:hover {
- border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
- background: $nav-tabs-link-hover-bg;
- }
-
- &.active {
- border: 1px solid $nav-tabs-active-link-hover-border-color;
- border-bottom-color: $nav-tabs-active-link-bg;
- background-color: $nav-tabs-active-link-bg;
- }
- }
-
- &[class*='has-'] > a.nav-link {
- &:before {
- @include transition(all .25s ease-in-out);
- }
- }
- // Has error state
- &.has-validation-error {
- > a.nav-link {
- background-color: $danger;
- border-color: darken($danger, 10%);
- color: #fff;
-
- &:focus,
- &:hover {
- color: #fff;
- background-color: lighten($danger, 5%);
- border-color: darken($danger, 5%);
- }
-
- &:before {
- @include icon-background($icon-actions-exclamation-circle, $white);
- border-radius: 50%;
- width: 14px;
- height: 14px;
- }
-
- &.active {
- color: inherit;
- border: 1px solid $nav-tabs-active-link-hover-border-color;
- border-bottom-color: $nav-tabs-active-link-bg;
- background-color: $nav-tabs-active-link-bg;
-
- &:before {
- background-color: $danger;
- color: #fff;
- }
- }
- }
- }
- }
-}
diff --git a/Build/Sources/Sass/typo3/_element_tceforms.scss b/Build/Sources/Sass/typo3/_element_tceforms.scss
index e6e5ccba6553..ad0466663888 100644
--- a/Build/Sources/Sass/typo3/_element_tceforms.scss
+++ b/Build/Sources/Sass/typo3/_element_tceforms.scss
@@ -1,9 +1,12 @@
//
// TCEforms
//
-
.typo3-TCEforms {
width: 100%;
+
+ .nav-tabs {
+ --typo3-nav-tabs-bg: var(--typo3-surface-container-low);
+ }
}
.sortableHandle {
diff --git a/Build/Sources/Sass/typo3/_main_form.scss b/Build/Sources/Sass/typo3/_main_form.scss
index 8d8c3af81a73..b1eec0cc70a0 100644
--- a/Build/Sources/Sass/typo3/_main_form.scss
+++ b/Build/Sources/Sass/typo3/_main_form.scss
@@ -100,7 +100,7 @@ textarea {
.multi-record-selection-actions-wrapper {
// Calculation of min height for the multi record selection actions, based on the fact that btn-sm is used
- min-height: floor(2px + ($padding-small-vertical * 2) + ($font-size-small * $line-height-small));
+ min-height: floor(.125rem + ($padding-small-vertical * 2) + ($font-size-small * $line-height-small));
// Consistent space between actions and listing
margin: .5rem 0;
}
diff --git a/Build/Sources/Sass/variables/_main.scss b/Build/Sources/Sass/variables/_main.scss
index 4abfe61800a6..b22b3b733bab 100644
--- a/Build/Sources/Sass/variables/_main.scss
+++ b/Build/Sources/Sass/variables/_main.scss
@@ -105,10 +105,10 @@ $link-hover-decoration: underline;
// Typography
$font-family-sans-serif: Verdana, Arial, Helvetica, sans-serif;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-$font-size-root: 16px;
-$font-size-base: 12px;
-$font-size-large: 16px;
-$font-size-small: 11px;
+$font-size-root: 1rem;
+$font-size-base: .75rem;
+$font-size-large: 1rem;
+$font-size-small: .6875rem;
$h1-font-size: 28px;
$h2-font-size: 20px;
$h3-font-size: 16px;
@@ -119,14 +119,14 @@ $headings-margin-bottom: calc(var(--typo3-spacing) / 2);
$paragraph-margin-bottom: var(--typo3-spacing);
// Components
-$padding-base-vertical: 6px;
-$padding-base-horizontal: 6px;
-$padding-large-vertical: 12px;
-$padding-large-horizontal: 12px;
-$padding-small-vertical: 4px;
-$padding-small-horizontal: 4px;
-$padding-xs-vertical: 2px;
-$padding-xs-horizontal: 4px;
+$padding-base-vertical: .375rem;
+$padding-base-horizontal: .375rem;
+$padding-large-vertical: .75rem;
+$padding-large-horizontal: .75rem;
+$padding-small-vertical: .25rem;
+$padding-small-horizontal: .25rem;
+$padding-xs-vertical: .125rem;
+$padding-xs-horizontal: .25rem;
$line-height-large: 1.3333333;
$line-height-small: 1.5;
$border-radius: .125rem;
@@ -160,24 +160,6 @@ $navbar-inverse-link-active-bg: $navbar-inverse-link-hover-bg;
$navbar-inverse-link-disabled-color: darken($navbar-inverse-color, 30%);
$navbar-inverse-link-disabled-bg: darken($navbar-inverse-bg, 20%);
-// Navs
-$nav-open-link-hover-color: #fff;
-$nav-link-padding-y: 6px;
-$nav-link-padding-x: 12px;
-$nav-disabled-link-hover-color: $gray-700;
-
-// Tabs
-$nav-tabs-border-color: #ccc;
-$nav-tabs-link-hover-bg: darken(#fafafa, 10%);
-$nav-tabs-link-hover-border-color: $gray-300;
-$nav-tabs-active-link-bg: #fafafa;
-$nav-tabs-active-link-hover-bg: $body-bg;
-$nav-tabs-active-link-hover-color: #000;
-$nav-tabs-active-link-hover-border-color: #ccc;
-$nav-tabs-active-link-hover-bg: darken(#fafafa, 5%);
-$nav-tabs-justified-link-border-color: #ccc;
-$nav-tabs-justified-active-link-border-color: $nav-tabs-border-color;
-
// Panels
$panel-default-border: #ccc;
$panel-default-heading-bg: #ddd;
diff --git a/Build/Sources/Sass/workspace.scss b/Build/Sources/Sass/workspace.scss
index bd75b2d124d0..415d5b4159b3 100644
--- a/Build/Sources/Sass/workspace.scss
+++ b/Build/Sources/Sass/workspace.scss
@@ -77,40 +77,6 @@ $workspace-topbar-logo-width: 22px;
vertical-align: top;
}
-.typo3-topbar-tabs {
- margin-inline-end: 2em;
- float: var(--typo3-position-start);
- position: relative;
-
- .nav-tabs {
- overflow: hidden;
- border-radius: 2px;
- border: none;
- background: none;
-
- > li {
- + li {
- margin-inline-start: 0;
- border-inline-start: 1px solid rgba(0, 0, 0, .5);
- }
- margin-bottom: 0;
-
- &.active > a {
- background-color: #fff;
- }
-
- > a {
- padding-top: 0;
- padding-bottom: 0;
- line-height: $workspace-topbar-line-height;
- background-color: #ccc;
- border: none !important;
- border-radius: 0;
- }
- }
- }
-}
-
.typo3-topbar-workspace-actions {
clear: none;
float: var(--typo3-position-start);
diff --git a/Build/Sources/TypeScript/backend/form-engine-validation.ts b/Build/Sources/TypeScript/backend/form-engine-validation.ts
index a2811b669a0d..552118881ae4 100644
--- a/Build/Sources/TypeScript/backend/form-engine-validation.ts
+++ b/Build/Sources/TypeScript/backend/form-engine-validation.ts
@@ -613,7 +613,7 @@ export default (function() {
const id = pane.id;
formEngineFormElement
- .querySelector('a[href="#' + id + '"]')
+ .querySelector('[data-bs-target="#' + id + '"]')
.closest('.t3js-tabmenu-item')
.classList.toggle('has-validation-error', !isValid);
});
diff --git a/Build/Sources/TypeScript/backend/tabs.ts b/Build/Sources/TypeScript/backend/tabs.ts
index cc19b3dec3bd..f77803c4a768 100644
--- a/Build/Sources/TypeScript/backend/tabs.ts
+++ b/Build/Sources/TypeScript/backend/tabs.ts
@@ -27,14 +27,17 @@ class Tabs {
tabContainers.forEach((tabContainer: HTMLElement): void => {
const currentActiveTab = Tabs.receiveActiveTab(tabContainer.id);
if (currentActiveTab) {
- new Tab(document.querySelector('a[href="' + currentActiveTab + '"]')).show();
+ const tabButton = document.querySelector('[data-bs-target="#' + currentActiveTab + '"]');
+ if (tabButton) {
+ new Tab(tabButton).show();
+ }
}
const storeLastActiveTab = tabContainer.dataset.storeLastTab === '1';
if (storeLastActiveTab) {
tabContainer.addEventListener('show.bs.tab', (e: Event): void => {
const id = (e.currentTarget as HTMLElement).id;
- const tabTarget = (e.target as HTMLAnchorElement).hash;
+ const tabTarget = (e.target as HTMLButtonElement).dataset.bsTarget.slice(1);
Tabs.storeActiveTab(id, tabTarget);
});
}
diff --git a/Build/Sources/TypeScript/workspaces/renderable/record-information.ts b/Build/Sources/TypeScript/workspaces/renderable/record-information.ts
index e6db035010d5..95b7649b257c 100644
--- a/Build/Sources/TypeScript/workspaces/renderable/record-information.ts
+++ b/Build/Sources/TypeScript/workspaces/renderable/record-information.ts
@@ -90,14 +90,17 @@ export class RecordInformationElement extends LitElement {
protected renderNavLink(text: string, target: string, count: number = 0) {
return html`
<li class="nav-item" role="presentation">
- <a class="nav-link"
- data-bs-toggle="tab"
- href="${target}"
- role="tab"
- aria-controls="${target}">
+ <button
+ type="button"
+ class="nav-link"
+ data-bs-toggle="tab"
+ data-bs-target="${target}"
+ aria-controls="${target}"
+ role="tab"
+ >
${text}
${count > 0 ? html`<span class="badge">${count}</span>` : nothing}
- </a>
+ </button>
</li>
`;
}
diff --git a/typo3/sysext/adminpanel/Resources/Public/Css/adminpanel.css b/typo3/sysext/adminpanel/Resources/Public/Css/adminpanel.css
index e51f3413d689..eb29a824dfaa 100644
--- a/typo3/sysext/adminpanel/Resources/Public/Css/adminpanel.css
+++ b/typo3/sysext/adminpanel/Resources/Public/Css/adminpanel.css
@@ -12,7 +12,7 @@
*/
body.typo3-adminPanel-noscroll{overflow:hidden}
#TSFE_ADMIN_PANEL_FORM.typo3-kidjls9dksoje.typo3-adminPanel{z-index:99990}
-#TSFE_ADMIN_PANEL_FORM.typo3-kidjls9dksoje.typo3-adminPanel :not([class*=sf-]){background:0 0;border:0;box-shadow:none;box-sizing:border-box;vertical-align:baseline;letter-spacing:normal;width:auto;height:auto;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:12px;font-weight:400;white-space:normal;margin:0;padding:0}
+#TSFE_ADMIN_PANEL_FORM.typo3-kidjls9dksoje.typo3-adminPanel :not([class*=sf-]){background:0 0;border:0;box-shadow:none;box-sizing:border-box;vertical-align:baseline;letter-spacing:normal;width:auto;height:auto;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:.75rem;font-weight:400;white-space:normal;margin:0;padding:0}
#TSFE_ADMIN_PANEL_FORM.typo3-kidjls9dksoje.typo3-adminPanel :not([class*=sf-]),#TSFE_ADMIN_PANEL_FORM.typo3-kidjls9dksoje.typo3-adminPanel :not([class*=sf-]):active,#TSFE_ADMIN_PANEL_FORM.typo3-kidjls9dksoje.typo3-adminPanel :not([class*=sf-]):focus,#TSFE_ADMIN_PANEL_FORM.typo3-kidjls9dksoje.typo3-adminPanel :not([class*=sf-]):hover{outline:0}
#TSFE_ADMIN_PANEL_FORM.typo3-kidjls9dksoje.typo3-adminPanel :root{--icon-color-primary:currentColor;--icon-size-small:16px;--icon-size-medium:32px;--icon-size-large:48px;--icon-size-mega:64px;--icon-unify-modifier:0.86;--icon-opacity-disabled:0.5}
#TSFE_ADMIN_PANEL_FORM.typo3-kidjls9dksoje.typo3-adminPanel .icon{position:relative;display:inline-flex;overflow:hidden;white-space:nowrap;color:var(--icon-color-primary);height:var(--icon-size,1em);width:var(--icon-size,1em);line-height:var(--icon-size,1em);flex-shrink:0}
@@ -219,9 +219,9 @@ body.typo3-adminPanel-noscroll{overflow:hidden}
#TSFE_ADMIN_PANEL_FORM.typo3-kidjls9dksoje.typo3-adminPanel .typo3-adminPanel-sql-query-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#TSFE_ADMIN_PANEL_FORM.typo3-kidjls9dksoje.typo3-adminPanel>.typo3-adminPanel-sql-panel{border-bottom:1px dashed #d7d7d7}
#TSFE_ADMIN_PANEL_FORM.typo3-kidjls9dksoje.typo3-adminPanel>.typo3-adminPanel-sql-panel:nth-child(2n+1){background:#f5f5f5}
-#TSFE_ADMIN_PANEL_FORM.typo3-kidjls9dksoje.typo3-adminPanel .typo3-adminPanel-bar{display:flex;height:auto;font-size:11px}
+#TSFE_ADMIN_PANEL_FORM.typo3-kidjls9dksoje.typo3-adminPanel .typo3-adminPanel-bar{display:flex;height:auto;font-size:.6875rem}
#TSFE_ADMIN_PANEL_FORM.typo3-kidjls9dksoje.typo3-adminPanel .typo3-adminPanel-bar .typo3-adminPanel-bar-value{display:flex;flex-direction:column;justify-content:center;color:#1e1e1e;text-align:left;white-space:nowrap;background-color:#fff;transition:all .5s ease;width:0}
-#TSFE_ADMIN_PANEL_FORM.typo3-kidjls9dksoje.typo3-adminPanel .typo3-adminPanel-sql-statement{margin:1em 0;padding:.75em 1em;font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;background:#f2f2f2;font-size:11px}
+#TSFE_ADMIN_PANEL_FORM.typo3-kidjls9dksoje.typo3-adminPanel .typo3-adminPanel-sql-statement{margin:1em 0;padding:.75em 1em;font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;background:#f2f2f2;font-size:.6875rem}
#TSFE_ADMIN_PANEL_FORM.typo3-kidjls9dksoje.typo3-adminPanel .typo3-adminPanel-sql-backtrace{margin:1em 0}
#TSFE_ADMIN_PANEL_FORM.typo3-kidjls9dksoje.typo3-adminPanel .typo3-adminPanel-sql-backtrace-item{margin:1px 0;padding:.75em 1em;background-color:#f2f2f2;font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;word-break:break-word}
#TSFE_ADMIN_PANEL_FORM.typo3-kidjls9dksoje.typo3-adminPanel .typo3-adminPanel-sql-backtrace-item-file,#TSFE_ADMIN_PANEL_FORM.typo3-kidjls9dksoje.typo3-adminPanel .typo3-adminPanel-sql-backtrace-item-function{display:block}
diff --git a/typo3/sysext/backend/Resources/Private/Partials/ModuleTemplate/Tabs.html b/typo3/sysext/backend/Resources/Private/Partials/ModuleTemplate/Tabs.html
index 521512df56fc..46abcf19652b 100644
--- a/typo3/sysext/backend/Resources/Private/Partials/ModuleTemplate/Tabs.html
+++ b/typo3/sysext/backend/Resources/Private/Partials/ModuleTemplate/Tabs.html
@@ -8,7 +8,15 @@
<f:for each="{items}" as="item" iteration="iteration">
<f:if condition="{item.content}">
<li role="presentation" class="t3js-tabmenu-item nav-item">
- <a href="#{id}-{iteration.cycle}" class="nav-link {f:if(condition: '{iteration.cycle} == {defaultTabIndex}', then: ' active')}" title="{item.linkTitle}" aria-controls="{id}-{iteration.cycle}" role="tab" data-bs-toggle="tab">
+ <button
+ type="button"
+ class="nav-link {f:if(condition: '{iteration.cycle} == {defaultTabIndex}', then: ' active')}"
+ title="{item.linkTitle}"
+ data-bs-toggle="tab"
+ data-bs-target="#{id}-{iteration.cycle}"
+ aria-controls="{id}-{iteration.cycle}"
+ role="tab"
+ >
<f:if condition="{item.icon}">
<f:format.raw>{item.icon}</f:format.raw>
</f:if>
@@ -19,7 +27,7 @@
<f:if condition="{item.stateIcon}">
<f:render partial="ModuleTemplate/StateIcon" arguments="{item: item}" />
</f:if>
- </a>
+ </button>
</li>
</f:if>
</f:for>
diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
index 33f818c8ce24..131c9007986a 100644
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -11,7 +11,7 @@
* The TYPO3 project - inspiring people to share!
*/
@charset "UTF-8";
-:root,[data-bs-theme=light]{--bs-blue:#05c;--bs-indigo:#6610f2;--bs-purple:#5e4db2;--bs-pink:#c6398f;--bs-red:#d13a2e;--bs-orange:#ee6d11;--bs-yellow:#fc3;--bs-green:#247554;--bs-teal:#abdced;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:rgb(115, 115, 115);--bs-gray-dark:rgb(51, 51, 51);--bs-gray-100:rgb(245, 245, 245);--bs-gray-200:rgb(238, 238, 238);--bs-gray-300:rgb(215, 215, 215);--bs-gray-400:rgb(204, 204, 204);--bs-gray-500:rgb(187, 187, 187);--bs-gray-600:rgb(115, 115, 115);--bs-gray-700:rgb(90, 90, 90);--bs-gray-800:rgb(51, 51, 51);--bs-gray-900:rgb(30, 30, 30);--bs-primary:#05c;--bs-secondary:rgb(115, 115, 115);--bs-success:#247554;--bs-info:#abdced;--bs-warning:#fc3;--bs-danger:#d13a2e;--bs-light:rgb(245, 245, 245);--bs-default:rgb(245, 245, 245);--bs-notice:rgb(51, 51, 51);--bs-dark:rgb(30, 30, 30);--bs-primary-rgb:0,85,204;--bs-secondary-rgb:115,115,115;--bs-success-rgb:36,117,84;--bs-info-rgb:171,220,237;--bs-warning-rgb:255,204,51;--bs-danger-rgb:209,58,46;--bs-light-rgb:245,245,245;--bs-default-rgb:245,245,245;--bs-notice-rgb:51,51,51;--bs-dark-rgb:30,30,30;--bs-primary-text-emphasis:#002252;--bs-secondary-text-emphasis:#2e2e2e;--bs-success-text-emphasis:#0e2f22;--bs-info-text-emphasis:#44585f;--bs-warning-text-emphasis:#665214;--bs-danger-text-emphasis:#541712;--bs-light-text-emphasis:rgb(90, 90, 90);--bs-dark-text-emphasis:rgb(90, 90, 90);--bs-primary-bg-subtle:#ccddf5;--bs-secondary-bg-subtle:#e3e3e3;--bs-success-bg-subtle:#d3e3dd;--bs-info-bg-subtle:#eef8fb;--bs-warning-bg-subtle:#fff5d6;--bs-danger-bg-subtle:#f6d8d5;--bs-light-bg-subtle:#fafafa;--bs-dark-bg-subtle:rgb(204, 204, 204);--bs-primary-border-subtle:#99bbeb;--bs-secondary-border-subtle:#c7c7c7;--bs-success-border-subtle:#a7c8bb;--bs-info-border-subtle:#ddf1f8;--bs-warning-border-subtle:#ffebad;--bs-danger-border-subtle:#edb0ab;--bs-light-border-subtle:rgb(238, 238, 238);--bs-dark-border-subtle:rgb(187, 187, 187);--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-font-sans-serif:Verdana,Arial,Helvetica,sans-serif;--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-root-font-size:16px;--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:0.75rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#000;--bs-body-color-rgb:0,0,0;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(0, 0, 0, 0.75);--bs-secondary-color-rgb:0,0,0;--bs-secondary-bg:rgb(238, 238, 238);--bs-secondary-bg-rgb:238,238,238;--bs-tertiary-color:rgba(0, 0, 0, 0.5);--bs-tertiary-color-rgb:0,0,0;--bs-tertiary-bg:rgb(245, 245, 245);--bs-tertiary-bg-rgb:245,245,245;--bs-heading-color:inherit;--bs-link-color:#212424;--bs-link-color-rgb:33,36,36;--bs-link-decoration:none;--bs-link-hover-color:#1a1d1d;--bs-link-hover-color-rgb:26,29,29;--bs-link-hover-decoration:underline;--bs-code-color:#c6398f;--bs-highlight-color:#000;--bs-highlight-bg:#fff5d6;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:rgb(215, 215, 215);--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.125rem;--bs-border-radius-sm:0.125rem;--bs-border-radius-lg:0.125rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(0, 85, 204, 0.25);--bs-form-valid-color:#247554;--bs-form-valid-border-color:#247554;--bs-form-invalid-color:#d13a2e;--bs-form-invalid-border-color:#d13a2e}
+:root,[data-bs-theme=light]{--bs-blue:#05c;--bs-indigo:#6610f2;--bs-purple:#5e4db2;--bs-pink:#c6398f;--bs-red:#d13a2e;--bs-orange:#ee6d11;--bs-yellow:#fc3;--bs-green:#247554;--bs-teal:#abdced;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:rgb(115, 115, 115);--bs-gray-dark:rgb(51, 51, 51);--bs-gray-100:rgb(245, 245, 245);--bs-gray-200:rgb(238, 238, 238);--bs-gray-300:rgb(215, 215, 215);--bs-gray-400:rgb(204, 204, 204);--bs-gray-500:rgb(187, 187, 187);--bs-gray-600:rgb(115, 115, 115);--bs-gray-700:rgb(90, 90, 90);--bs-gray-800:rgb(51, 51, 51);--bs-gray-900:rgb(30, 30, 30);--bs-primary:#05c;--bs-secondary:rgb(115, 115, 115);--bs-success:#247554;--bs-info:#abdced;--bs-warning:#fc3;--bs-danger:#d13a2e;--bs-light:rgb(245, 245, 245);--bs-default:rgb(245, 245, 245);--bs-notice:rgb(51, 51, 51);--bs-dark:rgb(30, 30, 30);--bs-primary-rgb:0,85,204;--bs-secondary-rgb:115,115,115;--bs-success-rgb:36,117,84;--bs-info-rgb:171,220,237;--bs-warning-rgb:255,204,51;--bs-danger-rgb:209,58,46;--bs-light-rgb:245,245,245;--bs-default-rgb:245,245,245;--bs-notice-rgb:51,51,51;--bs-dark-rgb:30,30,30;--bs-primary-text-emphasis:#002252;--bs-secondary-text-emphasis:#2e2e2e;--bs-success-text-emphasis:#0e2f22;--bs-info-text-emphasis:#44585f;--bs-warning-text-emphasis:#665214;--bs-danger-text-emphasis:#541712;--bs-light-text-emphasis:rgb(90, 90, 90);--bs-dark-text-emphasis:rgb(90, 90, 90);--bs-primary-bg-subtle:#ccddf5;--bs-secondary-bg-subtle:#e3e3e3;--bs-success-bg-subtle:#d3e3dd;--bs-info-bg-subtle:#eef8fb;--bs-warning-bg-subtle:#fff5d6;--bs-danger-bg-subtle:#f6d8d5;--bs-light-bg-subtle:#fafafa;--bs-dark-bg-subtle:rgb(204, 204, 204);--bs-primary-border-subtle:#99bbeb;--bs-secondary-border-subtle:#c7c7c7;--bs-success-border-subtle:#a7c8bb;--bs-info-border-subtle:#ddf1f8;--bs-warning-border-subtle:#ffebad;--bs-danger-border-subtle:#edb0ab;--bs-light-border-subtle:rgb(238, 238, 238);--bs-dark-border-subtle:rgb(187, 187, 187);--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-font-sans-serif:Verdana,Arial,Helvetica,sans-serif;--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-root-font-size:1rem;--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:0.75rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#000;--bs-body-color-rgb:0,0,0;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(0, 0, 0, 0.75);--bs-secondary-color-rgb:0,0,0;--bs-secondary-bg:rgb(238, 238, 238);--bs-secondary-bg-rgb:238,238,238;--bs-tertiary-color:rgba(0, 0, 0, 0.5);--bs-tertiary-color-rgb:0,0,0;--bs-tertiary-bg:rgb(245, 245, 245);--bs-tertiary-bg-rgb:245,245,245;--bs-heading-color:inherit;--bs-link-color:#212424;--bs-link-color-rgb:33,36,36;--bs-link-decoration:none;--bs-link-hover-color:#1a1d1d;--bs-link-hover-color-rgb:26,29,29;--bs-link-hover-decoration:underline;--bs-code-color:#c6398f;--bs-highlight-color:#000;--bs-highlight-bg:#fff5d6;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:rgb(215, 215, 215);--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.125rem;--bs-border-radius-sm:0.125rem;--bs-border-radius-lg:0.125rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(0, 85, 204, 0.25);--bs-form-valid-color:#247554;--bs-form-valid-border-color:#247554;--bs-form-invalid-color:#d13a2e;--bs-form-invalid-border-color:#d13a2e}
[data-bs-theme=dark]{color-scheme:dark;--bs-body-color:rgb(215, 215, 215);--bs-body-color-rgb:215,215,215;--bs-body-bg:rgb(30, 30, 30);--bs-body-bg-rgb:30,30,30;--bs-emphasis-color:#fff;--bs-emphasis-color-rgb:255,255,255;--bs-secondary-color:rgba(215, 215, 215, 0.75);--bs-secondary-color-rgb:215,215,215;--bs-secondary-bg:rgb(51, 51, 51);--bs-secondary-bg-rgb:51,51,51;--bs-tertiary-color:rgba(215, 215, 215, 0.5);--bs-tertiary-color-rgb:215,215,215;--bs-tertiary-bg:#292929;--bs-tertiary-bg-rgb:41,41,41;--bs-primary-text-emphasis:#6699e0;--bs-secondary-text-emphasis:#ababab;--bs-success-text-emphasis:#7cac98;--bs-info-text-emphasis:#cdeaf4;--bs-warning-text-emphasis:#ffe085;--bs-danger-text-emphasis:#e38982;--bs-light-text-emphasis:rgb(245, 245, 245);--bs-dark-text-emphasis:rgb(215, 215, 215);--bs-primary-bg-subtle:#001129;--bs-secondary-bg-subtle:#171717;--bs-success-bg-subtle:#071711;--bs-info-bg-subtle:#222c2f;--bs-warning-bg-subtle:#33290a;--bs-danger-bg-subtle:#2a0c09;--bs-light-bg-subtle:rgb(51, 51, 51);--bs-dark-bg-subtle:#1a1a1a;--bs-primary-border-subtle:#00337a;--bs-secondary-border-subtle:#454545;--bs-success-border-subtle:#164632;--bs-info-border-subtle:#67848e;--bs-warning-border-subtle:#997a1f;--bs-danger-border-subtle:#7d231c;--bs-light-border-subtle:rgb(90, 90, 90);--bs-dark-border-subtle:rgb(51, 51, 51);--bs-heading-color:inherit;--bs-link-color:#6699e0;--bs-link-hover-color:#85ade6;--bs-link-color-rgb:102,153,224;--bs-link-hover-color-rgb:133,173,230;--bs-code-color:#dd88bc;--bs-highlight-color:rgb(215, 215, 215);--bs-highlight-bg:#665214;--bs-border-color:rgb(90, 90, 90);--bs-border-color-translucent:rgba(255, 255, 255, 0.15);--bs-form-valid-color:#7cac98;--bs-form-valid-border-color:#7cac98;--bs-form-invalid-color:#e38982;--bs-form-invalid-border-color:#e38982}
*,::after,::before{box-sizing:border-box}
:root{font-size:var(--bs-root-font-size)}
@@ -525,39 +525,14 @@ progress{vertical-align:baseline}
.btn-group-vertical>.btn-group:not(:first-child),.btn-group-vertical>.btn:not(:first-child){margin-top:calc(var(--bs-border-width) * -1)}
.btn-group-vertical>.btn-group:not(:last-child)>.btn,.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-bottom-left-radius:0}
.btn-group-vertical>.btn-group:not(:first-child)>.btn,.btn-group-vertical>.btn~.btn{border-top-left-radius:0;border-top-right-radius:0}
-.nav{--bs-nav-link-padding-x:12px;--bs-nav-link-padding-y:6px;--bs-nav-link-color:var(--bs-link-color);--bs-nav-link-hover-color:var(--bs-link-hover-color);--bs-nav-link-disabled-color:var(--bs-secondary-color);display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}
-.nav-link,.nav.nav-tabs>li:not(.nav-item)>a:not(.nav-link){display:block;padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);font-size:var(--bs-nav-link-font-size);font-weight:var(--bs-nav-link-font-weight);color:var(--bs-nav-link-color);background:0 0;border:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}
-@media (prefers-reduced-motion:reduce){
-.nav-link,.nav.nav-tabs>li:not(.nav-item)>a:not(.nav-link){transition:none}
-}
-.nav-link:focus,.nav-link:hover,.nav.nav-tabs>li:not(.nav-item)>a:focus:not(.nav-link),.nav.nav-tabs>li:not(.nav-item)>a:hover:not(.nav-link){color:var(--bs-nav-link-hover-color);text-decoration:none}
-.nav-link:focus-visible,.nav.nav-tabs>li:not(.nav-item)>a:focus-visible:not(.nav-link){outline:0;box-shadow:0 0 0 .25rem rgba(0,85,204,.25)}
-.nav-link.disabled,.nav-link:disabled,.nav.nav-tabs>li:not(.nav-item)>a.disabled:not(.nav-link),.nav.nav-tabs>li:not(.nav-item)>a:disabled:not(.nav-link){color:var(--bs-nav-link-disabled-color);pointer-events:none;cursor:default}
-.nav-tabs{--bs-nav-tabs-border-width:var(--bs-border-width);--bs-nav-tabs-border-color:#ccc;--bs-nav-tabs-border-radius:var(--bs-border-radius);--bs-nav-tabs-link-hover-border-color:rgb(215, 215, 215);--bs-nav-tabs-link-active-color:var(--bs-emphasis-color);--bs-nav-tabs-link-active-bg:var(--bs-body-bg);--bs-nav-tabs-link-active-border-color:var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);border-bottom:var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color)}
-.nav-tabs .nav-link,.nav.nav-tabs>li:not(.nav-item)>a:not(.nav-link){margin-bottom:calc(-1 * var(--bs-nav-tabs-border-width));border:var(--bs-nav-tabs-border-width) solid transparent;border-top-left-radius:var(--bs-nav-tabs-border-radius);border-top-right-radius:var(--bs-nav-tabs-border-radius)}
-.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover,.nav.nav-tabs>li:not(.nav-item)>a:focus:not(.nav-link),.nav.nav-tabs>li:not(.nav-item)>a:hover:not(.nav-link){isolation:isolate;border-color:var(--bs-nav-tabs-link-hover-border-color)}
-.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-item.show .nav.nav-tabs>li:not(.nav-item)>a:not(.nav-link),.nav-tabs .nav-link.active,.nav.nav-tabs>li.show:not(.nav-item) .nav-link,.nav.nav-tabs>li.show:not(.nav-item) .nav.nav-tabs>li:not(.nav-item)>a:not(.nav-link),.nav.nav-tabs>li:not(.nav-item)>a.active:not(.nav-link){color:var(--bs-nav-tabs-link-active-color);background-color:var(--bs-nav-tabs-link-active-bg);border-color:var(--bs-nav-tabs-link-active-border-color)}
-.nav-tabs .dropdown-menu{margin-top:calc(-1 * var(--bs-nav-tabs-border-width));border-top-left-radius:0;border-top-right-radius:0}
-.nav-pills{--bs-nav-pills-border-radius:var(--bs-border-radius);--bs-nav-pills-link-active-color:#fff;--bs-nav-pills-link-active-bg:#05c}
-.nav-pills .nav-link,.nav-pills .nav.nav-tabs>li:not(.nav-item)>a:not(.nav-link){border-radius:var(--bs-nav-pills-border-radius)}
-.nav-pills .nav-link.active,.nav-pills .nav.nav-tabs>li.show:not(.nav-item)>a:not(.nav-link),.nav-pills .nav.nav-tabs>li:not(.nav-item)>a.active:not(.nav-link),.nav-pills .show>.nav-link{color:var(--bs-nav-pills-link-active-color);background-color:var(--bs-nav-pills-link-active-bg)}
-.nav-underline{--bs-nav-underline-gap:1rem;--bs-nav-underline-border-width:0.125rem;--bs-nav-underline-link-active-color:var(--bs-emphasis-color);gap:var(--bs-nav-underline-gap)}
-.nav-underline .nav-link,.nav-underline .nav.nav-tabs>li:not(.nav-item)>a:not(.nav-link){padding-right:0;padding-left:0;border-bottom:var(--bs-nav-underline-border-width) solid transparent}
-.nav-underline .nav-link:focus,.nav-underline .nav-link:hover,.nav-underline .nav.nav-tabs>li:not(.nav-item)>a:focus:not(.nav-link),.nav-underline .nav.nav-tabs>li:not(.nav-item)>a:hover:not(.nav-link){border-bottom-color:currentcolor}
-.nav-underline .nav-link.active,.nav-underline .nav.nav-tabs>li.show:not(.nav-item)>a:not(.nav-link),.nav-underline .nav.nav-tabs>li:not(.nav-item)>a.active:not(.nav-link),.nav-underline .show>.nav-link{font-weight:700;color:var(--bs-nav-underline-link-active-color);border-bottom-color:currentcolor}
-.nav-fill .nav-item,.nav-fill .nav.nav-tabs>li:not(.nav-item),.nav-fill>.nav-link,.nav.nav-tabs>li.nav-fill:not(.nav-item)>a:not(.nav-link){flex:1 1 auto;text-align:center}
-.nav-justified .nav-item,.nav-justified .nav.nav-tabs>li:not(.nav-item),.nav-justified>.nav-link,.nav.nav-tabs>li.nav-justified:not(.nav-item)>a:not(.nav-link){flex-basis:0;flex-grow:1;text-align:center}
-.nav-fill .nav-item .nav-link,.nav-fill .nav.nav-tabs>li:not(.nav-item) .nav-link,.nav-fill .nav.nav-tabs>li:not(.nav-item)>a:not(.nav-link),.nav-justified .nav-item .nav-link,.nav-justified .nav.nav-tabs>li:not(.nav-item) .nav-link,.nav-justified .nav.nav-tabs>li:not(.nav-item)>a:not(.nav-link){width:100%}
-.tab-content>.tab-pane{display:none}
-.tab-content>.active{display:block}
-.navbar{--bs-navbar-padding-x:0;--bs-navbar-padding-y:0.5rem;--bs-navbar-color:rgba(var(--bs-emphasis-color-rgb), 0.65);--bs-navbar-hover-color:rgba(var(--bs-emphasis-color-rgb), 0.8);--bs-navbar-disabled-color:rgba(var(--bs-emphasis-color-rgb), 0.3);--bs-navbar-active-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-padding-y:3.75px;--bs-navbar-brand-margin-end:1rem;--bs-navbar-brand-font-size:15px;--bs-navbar-brand-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-hover-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-nav-link-padding-x:0.5rem;--bs-navbar-toggler-padding-y:0.25rem;--bs-navbar-toggler-padding-x:0.75rem;--bs-navbar-toggler-font-size:15px;--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");--bs-navbar-toggler-border-color:rgba(var(--bs-emphasis-color-rgb), 0.15);--bs-navbar-toggler-border-radius:var(--bs-border-radius);--bs-navbar-toggler-focus-width:0.25rem;--bs-navbar-toggler-transition:box-shadow 0.15s ease-in-out;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--bs-navbar-padding-y) var(--bs-navbar-padding-x)}
+.navbar{--bs-navbar-padding-x:0;--bs-navbar-padding-y:0.5rem;--bs-navbar-color:rgba(var(--bs-emphasis-color-rgb), 0.65);--bs-navbar-hover-color:rgba(var(--bs-emphasis-color-rgb), 0.8);--bs-navbar-disabled-color:rgba(var(--bs-emphasis-color-rgb), 0.3);--bs-navbar-active-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-padding-y:0.359375rem;--bs-navbar-brand-margin-end:1rem;--bs-navbar-brand-font-size:0.9375rem;--bs-navbar-brand-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-hover-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-nav-link-padding-x:0.5rem;--bs-navbar-toggler-padding-y:0.25rem;--bs-navbar-toggler-padding-x:0.75rem;--bs-navbar-toggler-font-size:0.9375rem;--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");--bs-navbar-toggler-border-color:rgba(var(--bs-emphasis-color-rgb), 0.15);--bs-navbar-toggler-border-radius:var(--bs-border-radius);--bs-navbar-toggler-focus-width:0.25rem;--bs-navbar-toggler-transition:box-shadow 0.15s ease-in-out;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--bs-navbar-padding-y) var(--bs-navbar-padding-x)}
.navbar>.container,.navbar>.container-fluid,.navbar>.container-lg,.navbar>.container-md,.navbar>.container-sm,.navbar>.container-xl,.navbar>.container-xxl{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}
.navbar-brand{padding-top:var(--bs-navbar-brand-padding-y);padding-bottom:var(--bs-navbar-brand-padding-y);margin-right:var(--bs-navbar-brand-margin-end);font-size:var(--bs-navbar-brand-font-size);color:var(--bs-navbar-brand-color);white-space:nowrap}
.navbar-brand:focus,.navbar-brand:hover{color:var(--bs-navbar-brand-hover-color);text-decoration:none}
-.navbar-nav{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:6px;--bs-nav-link-color:var(--bs-navbar-color);--bs-nav-link-hover-color:var(--bs-navbar-hover-color);--bs-nav-link-disabled-color:var(--bs-navbar-disabled-color);display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}
-.navbar-nav .nav-link.active,.navbar-nav .nav-link.show,.navbar-nav .nav.nav-tabs>li:not(.nav-item)>a.active:not(.nav-link),.navbar-nav .nav.nav-tabs>li:not(.nav-item)>a.show:not(.nav-link){color:var(--bs-navbar-active-color)}
+.navbar-nav{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-color:var(--bs-navbar-color);--bs-nav-link-hover-color:var(--bs-navbar-hover-color);--bs-nav-link-disabled-color:var(--bs-navbar-disabled-color);display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}
+.navbar-nav .nav-link.active,.navbar-nav .nav-link.show{color:var(--bs-navbar-active-color)}
.navbar-nav .dropdown-menu{position:static}
-.navbar-text{padding-top:6px;padding-bottom:6px;color:var(--bs-navbar-color)}
+.navbar-text{padding-top:.5rem;padding-bottom:.5rem;color:var(--bs-navbar-color)}
.navbar-text a,.navbar-text a:focus,.navbar-text a:hover{color:var(--bs-navbar-active-color)}
.navbar-collapse{flex-basis:100%;flex-grow:1;align-items:center}
.navbar-toggler{padding:var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);font-size:var(--bs-navbar-toggler-font-size);line-height:1;color:var(--bs-navbar-color);background-color:transparent;border:var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);border-radius:var(--bs-navbar-toggler-border-radius);transition:var(--bs-navbar-toggler-transition)}
@@ -572,7 +547,7 @@ progress{vertical-align:baseline}
.navbar-expand-sm{flex-wrap:nowrap;justify-content:flex-start}
.navbar-expand-sm .navbar-nav{flex-direction:row}
.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}
-.navbar-expand-sm .navbar-nav .nav-link,.navbar-expand-sm .navbar-nav .nav.nav-tabs>li:not(.nav-item)>a:not(.nav-link){padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}
+.navbar-expand-sm .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}
.navbar-expand-sm .navbar-nav-scroll{overflow:visible}
.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}
.navbar-expand-sm .navbar-toggler{display:none}
@@ -584,7 +559,7 @@ progress{vertical-align:baseline}
.navbar-expand-md{flex-wrap:nowrap;justify-content:flex-start}
.navbar-expand-md .navbar-nav{flex-direction:row}
.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}
-.navbar-expand-md .navbar-nav .nav-link,.navbar-expand-md .navbar-nav .nav.nav-tabs>li:not(.nav-item)>a:not(.nav-link){padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}
+.navbar-expand-md .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}
.navbar-expand-md .navbar-nav-scroll{overflow:visible}
.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}
.navbar-expand-md .navbar-toggler{display:none}
@@ -596,7 +571,7 @@ progress{vertical-align:baseline}
.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}
.navbar-expand-lg .navbar-nav{flex-direction:row}
.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}
-.navbar-expand-lg .navbar-nav .nav-link,.navbar-expand-lg .navbar-nav .nav.nav-tabs>li:not(.nav-item)>a:not(.nav-link){padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}
+.navbar-expand-lg .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}
.navbar-expand-lg .navbar-nav-scroll{overflow:visible}
.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}
.navbar-expand-lg .navbar-toggler{display:none}
@@ -608,7 +583,7 @@ progress{vertical-align:baseline}
.navbar-expand-xl{flex-wrap:nowrap;justify-content:flex-start}
.navbar-expand-xl .navbar-nav{flex-direction:row}
.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}
-.navbar-expand-xl .navbar-nav .nav-link,.navbar-expand-xl .navbar-nav .nav.nav-tabs>li:not(.nav-item)>a:not(.nav-link){padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}
+.navbar-expand-xl .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}
.navbar-expand-xl .navbar-nav-scroll{overflow:visible}
.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}
.navbar-expand-xl .navbar-toggler{display:none}
@@ -620,7 +595,7 @@ progress{vertical-align:baseline}
.navbar-expand-xxl{flex-wrap:nowrap;justify-content:flex-start}
.navbar-expand-xxl .navbar-nav{flex-direction:row}
.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}
-.navbar-expand-xxl .navbar-nav .nav-link,.navbar-expand-xxl .navbar-nav .nav.nav-tabs>li:not(.nav-item)>a:not(.nav-link){padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}
+.navbar-expand-xxl .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}
.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}
.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}
.navbar-expand-xxl .navbar-toggler{display:none}
@@ -631,7 +606,7 @@ progress{vertical-align:baseline}
.navbar-expand{flex-wrap:nowrap;justify-content:flex-start}
.navbar-expand .navbar-nav{flex-direction:row}
.navbar-expand .navbar-nav .dropdown-menu{position:absolute}
-.navbar-expand .navbar-nav .nav-link,.navbar-expand .navbar-nav .nav.nav-tabs>li:not(.nav-item)>a:not(.nav-link){padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}
+.navbar-expand .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}
.navbar-expand .navbar-nav-scroll{overflow:visible}
.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}
.navbar-expand .navbar-toggler{display:none}
@@ -2467,7 +2442,7 @@ button[aria-expanded=true]:not(:disabled) .modulemenu-indicator:after{transform:
.scaffold-modulemenu-expanded .modulemenu-indicator{display:block!important}
.scaffold-modulemenu-expanded .modulemenu-name{position:static;margin:0;margin-inline-start:1em;width:auto;height:auto}
:root{--token-color-neutral-base:#000;--token-color-neutral-0:white;--token-color-neutral-3:#f7f7f7;--token-color-neutral-4:whitesmoke;--token-color-neutral-5:#f2f2f2;--token-color-neutral-10:#e6e6e6;--token-color-neutral-15:#d9d9d9;--token-color-neutral-20:#cccccc;--token-color-neutral-25:#bfbfbf;--token-color-neutral-30:#b3b3b3;--token-color-neutral-35:#a6a6a6;--token-color-neutral-40:#999999;--token-color-neutral-45:#8c8c8c;--token-color-neutral-50:gray;--token-color-neutral-55:#737373;--token-color-neutral-60:#666666;--token-color-neutral-65:#595959;--token-color-neutral-70:#4d4d4d;--token-color-neutral-75:#404040;--token-color-neutral-80:#333333;--token-color-neutral-85:#262626;--token-color-neutral-90:#1a1a1a;--token-color-neutral-95:#0d0d0d;--token-color-neutral-96:#0a0a0a;--token-color-neutral-97:#080808;--token-color-neutral-100:black;--token-color-blue-base:#05c;--token-color-blue-3:#f0f6ff;--token-color-blue-4:#ebf3ff;--token-color-blue-5:#e6f0ff;--token-color-blue-10:#cce1ff;--token-color-blue-15:#b3d2ff;--token-color-blue-20:#99c4ff;--token-color-blue-25:#80b5ff;--token-color-blue-30:#66a6ff;--token-color-blue-35:#4d97ff;--token-color-blue-40:#3388ff;--token-color-blue-45:#1a79ff;--token-color-blue-50:#006aff;--token-color-blue-55:#0060e6;--token-color-blue-60:#0055cc;--token-color-blue-65:#004ab3;--token-color-blue-70:#004099;--token-color-blue-75:#003580;--token-color-blue-80:#002b66;--token-color-blue-85:#00204d;--token-color-blue-90:#001533;--token-color-blue-95:#000b1a;--token-color-blue-96:#000914;--token-color-blue-97:#00060f;--token-color-purple-base:#5e4db2;--token-color-purple-3:#f5f4fa;--token-color-purple-4:#f2f1f9;--token-color-purple-5:#efedf7;--token-color-purple-10:#dfdbf0;--token-color-purple-15:#cfcae8;--token-color-purple-20:#bfb8e0;--token-color-purple-25:#afa6d9;--token-color-purple-30:#9e94d1;--token-color-purple-35:#8e82c9;--token-color-purple-40:#7e71c1;--token-color-purple-45:#6e5fba;--token-color-purple-50:#5e4db2;--token-color-purple-55:#5545a0;--token-color-purple-60:#4b3e8e;--token-color-purple-65:#42367d;--token-color-purple-70:#382e6b;--token-color-purple-75:#2f2759;--token-color-purple-80:#261f47;--token-color-purple-85:#1c1735;--token-color-purple-90:#130f24;--token-color-purple-95:#090812;--token-color-purple-96:#08060e;--token-color-purple-97:#06050b;--token-color-teal-base:#abdced;--token-color-teal-3:#f2fafc;--token-color-teal-4:#eef8fb;--token-color-teal-5:#eaf6fb;--token-color-teal-10:#d5eef6;--token-color-teal-15:#c0e5f2;--token-color-teal-20:#abdced;--token-color-teal-25:#96d3e9;--token-color-teal-30:#81cbe4;--token-color-teal-35:#6cc2e0;--token-color-teal-40:#57b9db;--token-color-teal-45:#42b0d7;--token-color-teal-50:#2da8d2;--token-color-teal-55:#2997bd;--token-color-teal-60:#2486a8;--token-color-teal-65:#207593;--token-color-teal-70:#1b657e;--token-color-teal-75:#175469;--token-color-teal-80:#124354;--token-color-teal-85:#0e323f;--token-color-teal-90:#09222a;--token-color-teal-95:#051115;--token-color-teal-96:#040d11;--token-color-teal-97:#030a0d;--token-color-green-base:#247554;--token-color-green-3:#f3fbf8;--token-color-green-4:#effaf6;--token-color-green-5:#ecf9f4;--token-color-green-10:#d8f3e8;--token-color-green-15:#c5eddd;--token-color-green-20:#b1e7d1;--token-color-green-25:#9ee1c6;--token-color-green-30:#8adbba;--token-color-green-35:#77d5af;--token-color-green-40:#63cfa3;--token-color-green-45:#50c998;--token-color-green-50:#3cc38c;--token-color-green-55:#36b07e;--token-color-green-60:#309c70;--token-color-green-65:#2a8962;--token-color-green-70:#247554;--token-color-green-75:#1e6246;--token-color-green-80:#184e38;--token-color-green-85:#123b2a;--token-color-green-90:#0c271c;--token-color-green-95:#06140e;--token-color-green-96:#05100b;--token-color-green-97:#040c08;--token-color-magenta-base:#c6398f;--token-color-magenta-3:#fcf3f8;--token-color-magenta-4:#faeff6;--token-color-magenta-5:#f9ebf4;--token-color-magenta-10:#f4d7e9;--token-color-magenta-15:#eec4dd;--token-color-magenta-20:#e8b0d2;--token-color-magenta-25:#e39cc7;--token-color-magenta-30:#dd88bc;--token-color-magenta-35:#d774b1;--token-color-magenta-40:#d161a5;--token-color-magenta-45:#cc4d9a;--token-color-magenta-50:#c6398f;--token-color-magenta-55:#b23381;--token-color-magenta-60:#9e2e72;--token-color-magenta-65:#8b2864;--token-color-magenta-70:#772256;--token-color-magenta-75:#631d48;--token-color-magenta-80:#4f1739;--token-color-magenta-85:#3b112b;--token-color-magenta-90:#280b1d;--token-color-magenta-95:#14060e;--token-color-magenta-96:#10050b;--token-color-magenta-97:#0c0309;--token-color-yellow-base:#fc3;--token-color-yellow-3:#fffbf0;--token-color-yellow-4:#fffaeb;--token-color-yellow-5:#fff9e6;--token-color-yellow-10:#fff2cc;--token-color-yellow-15:#ffecb3;--token-color-yellow-20:#ffe699;--token-color-yellow-25:#ffdf80;--token-color-yellow-30:#ffd966;--token-color-yellow-35:#ffd24d;--token-color-yellow-40:#ffcc33;--token-color-yellow-45:#ffc61a;--token-color-yellow-50:#ffbf00;--token-color-yellow-55:#e6ac00;--token-color-yellow-60:#cc9900;--token-color-yellow-65:#b38600;--token-color-yellow-70:#997300;--token-color-yellow-75:#806000;--token-color-yellow-80:#664d00;--token-color-yellow-85:#4d3900;--token-color-yellow-90:#332600;--token-color-yellow-95:#1a1300;--token-color-yellow-96:#140f00;--token-color-yellow-97:#0f0b00;--token-color-orange-base:#ee6d11;--token-color-orange-3:#fef6f1;--token-color-orange-4:#fef3ec;--token-color-orange-5:#fdf0e7;--token-color-orange-10:#fce2cf;--token-color-orange-15:#fad3b8;--token-color-orange-20:#f8c5a0;--token-color-orange-25:#f7b688;--token-color-orange-30:#f5a770;--token-color-orange-35:#f39958;--token-color-orange-40:#f18a41;--token-color-orange-45:#f07c29;--token-color-orange-50:#ee6d11;--token-color-orange-55:#d6620f;--token-color-orange-60:#be570e;--token-color-orange-65:#a74c0c;--token-color-orange-70:#8f410a;--token-color-orange-75:#773709;--token-color-orange-80:#5f2c07;--token-color-orange-85:#472105;--token-color-orange-90:#301603;--token-color-orange-95:#180b02;--token-color-orange-96:#130901;--token-color-orange-97:#0e0701;--token-color-red-base:#d13a2e;--token-color-red-3:#fcf3f2;--token-color-red-4:#fbefee;--token-color-red-5:#faebea;--token-color-red-10:#f6d8d5;--token-color-red-15:#f1c4c0;--token-color-red-20:#edb0ab;--token-color-red-25:#e89d97;--token-color-red-30:#e38982;--token-color-red-35:#df756d;--token-color-red-40:#da6158;--token-color-red-45:#d64e43;--token-color-red-50:#d13a2e;--token-color-red-55:#bc3429;--token-color-red-60:#a72e25;--token-color-red-65:#922920;--token-color-red-70:#7d231c;--token-color-red-75:#691d17;--token-color-red-80:#541712;--token-color-red-85:#3f110e;--token-color-red-90:#2a0c09;--token-color-red-95:#150605;--token-color-red-96:#110504;--token-color-red-97:#0d0303}
-:root{color-scheme:only light;scroll-behavior:smooth;--typo3-font-size:12px;--typo3-font-size-small:11px;--typo3-font-family-sans-serif:Verdana,Arial,Helvetica,sans-serif;--typo3-font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;--typo3-font-family:var(--typo3-font-family-sans-serif);--typo3-font-family-code:var(--typo3-font-family-monospace);--typo3-spacing:1rem;--typo3-header-font-family:"Source Sans 3",sans-serif;--typo3-text-color-base:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-10));--typo3-text-color-link:var(--typo3-text-color-base);--typo3-text-color-variant:light-dark(var(--token-color-neutral-60), var(--token-color-neutral-30));--typo3-text-color-primary:light-dark(var(--token-color-blue-60), var(--token-color-blue-30));--typo3-text-color-secondary:light-dark(var(--token-color-neutral-70), var(--token-color-neutral-35));--typo3-text-color-info:light-dark(var(--token-color-teal-70), var(--token-color-teal-40));--typo3-text-color-success:light-dark(var(--token-color-green-70), var(--token-color-green-50));--typo3-text-color-warning:light-dark(var(--token-color-yellow-80), var(--token-color-yellow-40));--typo3-text-color-danger:light-dark(var(--token-color-red-60), var(--token-color-red-40));--typo3-text-color-code:light-dark(var(--token-color-magenta-60), var(--token-color-magenta-35));--typo3-text-color-notice:light-dark(var(--token-color-neutral-75), var(--token-color-neutral-40));--typo3-text-color-default:var(--typo3-text-color-base);--typo3-surface-dim:light-dark(var(--token-color-neutral-15), var(--token-color-neutral-96));--typo3-surface-base:light-dark(var(--token-color-neutral-4), var(--token-color-neutral-96));--typo3-surface-bright:light-dark(var(--token-color-neutral-4), var(--token-color-neutral-85));--typo3-surface-container-lowest:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-100));--typo3-surface-container-low:light-dark(var(--token-color-neutral-3), var(--token-color-neutral-97));--typo3-surface-container-base:light-dark(var(--token-color-neutral-5), var(--token-color-neutral-95));--typo3-surface-container-high:light-dark(var(--token-color-neutral-10), var(--token-color-neutral-90));--typo3-surface-container-highest:light-dark(var(--token-color-neutral-15), var(--token-color-neutral-85));--typo3-surface-primary:light-dark(var(--token-color-blue-60), var(--token-color-blue-70));--typo3-surface-primary-text:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-surface-container-primary:light-dark(var(--token-color-blue-10), var(--token-color-blue-90));--typo3-surface-container-primary-text:light-dark(var(--token-color-blue-90), var(--token-color-blue-10));--typo3-surface-secondary:light-dark(var(--token-color-neutral-70), var(--token-color-neutral-70));--typo3-surface-secondary-text:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-surface-container-secondary:light-dark(var(--token-color-neutral-10), var(--token-color-neutral-90));--typo3-surface-container-secondary-text:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-10));--typo3-surface-info:light-dark(var(--token-color-teal-20), var(--token-color-teal-70));--typo3-surface-info-text:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-surface-container-info:light-dark(var(--token-color-teal-10), var(--token-color-teal-90));--typo3-surface-container-info-text:light-dark(var(--token-color-teal-90), var(--token-color-teal-10));--typo3-surface-success:light-dark(var(--token-color-green-70), var(--token-color-green-80));--typo3-surface-success-text:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-surface-container-success:light-dark(var(--token-color-green-10), var(--token-color-green-90));--typo3-surface-container-success-text:light-dark(var(--token-color-green-90), var(--token-color-green-10));--typo3-surface-warning:light-dark(var(--token-color-yellow-40), var(--token-color-yellow-80));--typo3-surface-warning-text:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-surface-container-warning:light-dark(var(--token-color-yellow-10), var(--token-color-yellow-90));--typo3-surface-container-warning-text:light-dark(var(--token-color-yellow-90), var(--token-color-yellow-10));--typo3-surface-danger:light-dark(var(--token-color-red-50), var(--token-color-red-70));--typo3-surface-danger-text:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-surface-container-danger:light-dark(var(--token-color-red-10), var(--token-color-red-90));--typo3-surface-container-danger-text:light-dark(var(--token-color-red-90), var(--token-color-red-10));--typo3-surface-notice:light-dark(var(--token-color-neutral-75), var(--token-color-neutral-85));--typo3-surface-notice-text:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-surface-container-notice:light-dark(var(--token-color-neutral-10), var(--token-color-neutral-90));--typo3-surface-container-notice-text:light-dark(var(--token-color-neutral-95), var(--token-color-neutral-0));--typo3-surface-default:light-dark(var(--token-color-neutral-5), var(--token-color-neutral-95));--typo3-surface-default-text:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-surface-container-default:light-dark(var(--token-color-neutral-5), var(--token-color-neutral-95));--typo3-surface-container-default-text:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-state-default-color:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-state-default-bg:light-dark(var(--token-color-neutral-5), var(--token-color-neutral-90));--typo3-state-default-border-color:light-dark(var(--token-color-neutral-25), var(--token-color-neutral-80));--typo3-state-default-hover-color:var(--typo3-state-default-color);--typo3-state-default-hover-bg:light-dark(var(--token-color-neutral-10), var(--token-color-neutral-85));--typo3-state-default-hover-border-color:light-dark(var(--token-color-neutral-35), var(--token-color-neutral-75));--typo3-state-default-focus-color:var(--typo3-state-default-color);--typo3-state-default-focus-bg:light-dark(var(--token-color-neutral-15), var(--token-color-neutral-80));--typo3-state-default-focus-border-color:light-dark(var(--token-color-neutral-40), var(--token-color-neutral-70));--typo3-state-default-disabled-color:var(--typo3-state-default-color);--typo3-state-default-disabled-bg:var(--typo3-state-default-bg);--typo3-state-default-disabled-border-color:var(--typo3-state-default-border-color);--typo3-state-primary-color:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-state-primary-bg:light-dark(var(--token-color-blue-60), var(--token-color-blue-70));--typo3-state-primary-border-color:light-dark(var(--token-color-blue-65), var(--token-color-blue-65));--typo3-state-primary-hover-color:var(--typo3-state-primary-color);--typo3-state-primary-hover-bg:light-dark(var(--token-color-blue-65), var(--token-color-blue-65));--typo3-state-primary-hover-border-color:light-dark(var(--token-color-blue-70), var(--token-color-blue-60));--typo3-state-primary-focus-color:var(--typo3-state-primary-color);--typo3-state-primary-focus-bg:light-dark(var(--token-color-blue-70), var(--token-color-blue-60));--typo3-state-primary-focus-border-color:light-dark(var(--token-color-blue-75), var(--token-color-blue-55));--typo3-state-primary-disabled-color:var(--typo3-state-primary-color);--typo3-state-primary-disabled-bg:var(--typo3-state-primary-bg);--typo3-state-primary-disabled-border-color:var(--typo3-state-default-primary-color);--typo3-state-secondary-color:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-state-secondary-bg:light-dark(var(--token-color-neutral-70), var(--token-color-neutral-70));--typo3-state-secondary-border-color:light-dark(var(--token-color-neutral-75), var(--token-color-neutral-65));--typo3-state-secondary-hover-color:var(--typo3-state-secondary-color);--typo3-state-secondary-hover-bg:light-dark(var(--token-color-neutral-75), var(--token-color-neutral-65));--typo3-state-secondary-hover-border-color:light-dark(var(--token-color-neutral-80), var(--token-color-neutral-60));--typo3-state-secondary-focus-color:var(--typo3-state-secondary-color);--typo3-state-secondary-focus-bg:light-dark(var(--token-color-neutral-80), var(--token-color-neutral-60));--typo3-state-secondary-focus-border-color:light-dark(var(--token-color-neutral-85), var(--token-color-neutral-55));--typo3-state-secondary-disabled-color:var(--typo3-state-secondary-color);--typo3-state-secondary-disabled-bg:var(--typo3-state-secondary-bg);--typo3-state-secondary-disabled-border-color:var(--typo3-state-default-secondary-color);--typo3-state-success-color:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-state-success-bg:light-dark(var(--token-color-green-70), var(--token-color-green-80));--typo3-state-success-border-color:light-dark(var(--token-color-green-75), var(--token-color-green-75));--typo3-state-success-hover-color:var(--typo3-state-success-color);--typo3-state-success-hover-bg:light-dark(var(--token-color-green-75), var(--token-color-green-75));--typo3-state-success-hover-border-color:light-dark(var(--token-color-green-80), var(--token-color-green-70));--typo3-state-success-focus-color:var(--typo3-state-success-color);--typo3-state-success-focus-bg:light-dark(var(--token-color-green-80), var(--token-color-green-70));--typo3-state-success-focus-border-color:light-dark(var(--token-color-green-85), var(--token-color-green-65));--typo3-state-success-disabled-color:var(--typo3-state-success-color);--typo3-state-success-disabled-bg:var(--typo3-state-success-bg);--typo3-state-success-disabled-border-color:var(--typo3-state-default-success-color);--typo3-state-warning-color:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-state-warning-bg:light-dark(var(--token-color-yellow-40), var(--token-color-yellow-80));--typo3-state-warning-border-color:light-dark(var(--token-color-yellow-45), var(--token-color-yellow-75));--typo3-state-warning-hover-color:var(--typo3-state-warning-color);--typo3-state-warning-hover-bg:light-dark(var(--token-color-yellow-45), var(--token-color-yellow-75));--typo3-state-warning-hover-border-color:light-dark(var(--token-color-yellow-50), var(--token-color-yellow-70));--typo3-state-warning-focus-color:var(--typo3-state-warning-color);--typo3-state-warning-focus-bg:light-dark(var(--token-color-yellow-50), var(--token-color-yellow-70));--typo3-state-warning-focus-border-color:light-dark(var(--token-color-yellow-55), var(--token-color-yellow-65));--typo3-state-warning-disabled-color:var(--typo3-state-warning-color);--typo3-state-warning-disabled-bg:var(--typo3-state-warning-bg);--typo3-state-warning-disabled-border-color:var(--typo3-state-warning-border-color);--typo3-state-danger-color:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-state-danger-bg:light-dark(var(--token-color-red-50), var(--token-color-red-70));--typo3-state-danger-border-color:light-dark(var(--token-color-red-55), var(--token-color-red-65));--typo3-state-danger-hover-color:var(--typo3-state-danger-color);--typo3-state-danger-hover-bg:light-dark(var(--token-color-red-55), var(--token-color-red-65));--typo3-state-danger-hover-border-color:light-dark(var(--token-color-red-60), var(--token-color-red-60));--typo3-state-danger-focus-color:var(--typo3-state-danger-color);--typo3-state-danger-focus-bg:light-dark(var(--token-color-red-60), var(--token-color-red-60));--typo3-state-danger-focus-border-color:light-dark(var(--token-color-red-65), var(--token-color-red-55));--typo3-state-danger-disabled-color:var(--typo3-state-danger-color);--typo3-state-danger-disabled-bg:var(--typo3-state-danger-bg);--typo3-state-danger-disabled-border-color:var(--typo3-state-danger-border-color);--typo3-state-info-color:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-state-info-bg:light-dark(var(--token-color-teal-20), var(--token-color-teal-70));--typo3-state-info-border-color:light-dark(var(--token-color-teal-25), var(--token-color-teal-65));--typo3-state-info-hover-color:var(--typo3-state-info-color);--typo3-state-info-hover-bg:light-dark(var(--token-color-teal-25), var(--token-color-teal-65));--typo3-state-info-hover-border-color:light-dark(var(--token-color-teal-30), var(--token-color-teal-60));--typo3-state-info-focus-color:var(--typo3-state-info-color);--typo3-state-info-focus-bg:light-dark(var(--token-color-teal-30), var(--token-color-teal-60));--typo3-state-info-focus-border-color:light-dark(var(--token-color-teal-35), var(--token-color-teal-55));--typo3-state-info-disabled-color:var(--typo3-state-info-color);--typo3-state-info-disabled-bg:var(--typo3-state-info-bg);--typo3-state-info-disabled-border-color:var(--typo3-state-info-border-color);--typo3-state-notice-color:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-state-notice-bg:light-dark(var(--token-color-neutral-75), var(--token-color-neutral-85));--typo3-state-notice-border-color:light-dark(var(--token-color-neutral-80), var(--token-color-neutral-80));--typo3-state-notice-hover-color:var(--typo3-state-notice-color);--typo3-state-notice-hover-bg:light-dark(var(--token-color-neutral-80), var(--token-color-neutral-80));--typo3-state-notice-hover-border-color:light-dark(var(--token-color-neutral-85), var(--token-color-neutral-75));--typo3-state-notice-focus-color:var(--typo3-state-notice-color);--typo3-state-notice-focus-bg:light-dark(var(--token-color-neutral-85), var(--token-color-neutral-75));--typo3-state-notice-focus-border-color:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-70));--typo3-state-notice-disabled-color:var(--typo3-state-notice-color);--typo3-state-notice-disabled-bg:var(--typo3-state-notice-bg);--typo3-state-notice-disabled-border-color:var(--typo3-state-notice-border-color);--typo3-shadow-2:0 1px 2px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 1px 2px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-4:0 2px 4px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 2px 4px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-8:0 4px 8px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 4px 8px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-16:0 8px 16px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 8px 16px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-28:0 14px 28px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 14px 28px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-64:0 0 4px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 32px 64px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-component-color:var(--typo3-text-color-base);--typo3-component-variant-color:var(--typo3-text-color-variant);--typo3-component-primary-color:var(--typo3-text-color-primary);--typo3-component-secondary-color:var(--typo3-text-color-secondary);--typo3-component-match-highlight-color:inherit;--typo3-component-match-highlight-bg:rgba(234, 92, 0, .33);--typo3-component-bg:var(--typo3-surface-container-lowest);--typo3-component-link-color:light-dark(#05c, #6699e0);--typo3-component-link-hover-color:light-dark(#1a66d1, #80aae6);--typo3-component-font-size:12px;--typo3-component-line-height:1.5;--typo3-component-border-radius:4px;--typo3-component-border-width:1px;--typo3-component-border-color:light-dark(rgb(215, 215, 215), rgb(51, 51, 51));--typo3-component-padding-y:.75rem;--typo3-component-padding-x:1rem;--typo3-component-box-shadow:var(--typo3-shadow-2);--typo3-component-box-shadow-strong:var(--typo3-shadow-4);--typo3-component-box-shadow-tooltip:var(--typo3-shadow-8);--typo3-component-box-shadow-flyout:var(--typo3-shadow-16);--typo3-component-box-shadow-dialog:var(--typo3-shadow-28);--typo3-component-box-shadow-window:var(--typo3-shadow-64);--typo3-component-hover-color:var(--typo3-component-color);--typo3-component-hover-bg:light-dark(#f2f7fc, rgb(51, 51, 51));--typo3-component-hover-border-color:light-dark(#d9e6f7, rgb(90, 90, 90));--typo3-component-focus-color:var(--typo3-component-color);--typo3-component-focus-bg:light-dark(#f2f7fc, #002b66);--typo3-component-focus-border-color:light-dark(#3377d6, #00337a);--typo3-component-active-color:#fff;--typo3-component-active-bg:light-dark(#3377d6, #0048ad);--typo3-component-active-border-color:light-dark(#3377d6, #0044a3);--typo3-component-disabled-color:rgb(115, 115, 115);--typo3-component-disabled-bg:transparent;--typo3-component-disabled-border-color:transparent;--typo3-component-spacing:2rem;--typo3-list-item-padding-y:.5rem;--typo3-list-item-padding-x:.75rem;--typo3-list-item-hover-color:var(--typo3-component-hover-color);--typo3-list-item-hover-bg:var(--typo3-component-hover-bg);--typo3-list-item-hover-border-color:var(--typo3-component-hover-border-color);--typo3-list-item-focus-color:var(--typo3-component-focus-color);--typo3-list-item-focus-bg:var(--typo3-component-focus-bg);--typo3-list-item-focus-border-color:var(--typo3-component-focus-border-color);--typo3-list-item-active-color:var(--typo3-list-item-focus-color);--typo3-list-item-active-bg:var(--typo3-list-item-focus-bg);--typo3-list-item-active-border-color:var(--typo3-list-item-focus-border-color);--typo3-list-item-disabled-color:var(--typo3-component-disabled-color);--typo3-list-item-disabled-bg:var(--typo3-component-disabled-bg);--typo3-list-item-disabled-border-color:var(--typo3-component-disabled-border-color);--typo3-legend-font-weight:600;--typo3-input-font-size:.75rem;--typo3-input-line-height:1.5;--typo3-input-padding-y:.5rem;--typo3-input-padding-x:.75rem;--typo3-input-sm-padding-y:.3125rem;--typo3-input-sm-padding-x:.5rem;--typo3-input-sm-font-size:.6875rem;--typo3-input-border-width:1px;--typo3-input-border-radius:var(--typo3-component-border-radius);--typo3-input-color:var(--typo3-text-color-base);--typo3-input-placeholder-color:color-mix(in srgb, var(--typo3-input-color), transparent 30%);--typo3-input-bg:var(--typo3-surface-container-lowest);--typo3-input-group-addon-bg:color-mix(in srgb, var(--typo3-input-bg), var(--typo3-input-color) 10%);--typo3-input-border-color:var(--typo3-state-default-border-color);--typo3-input-hover-color:var(--typo3-input-color);--typo3-input-hover-bg:var(--typo3-input-bg);--typo3-input-hover-border-color:var(--typo3-state-default-hover-border-color);--typo3-input-focus-color:var(--typo3-input-color);--typo3-input-focus-bg:var(--typo3-input-bg);--typo3-input-focus-border-color:var(--typo3-state-primary-focus-border-color);--typo3-input-active-color:var(--typo3-state-primary-color);--typo3-input-active-bg:var(--typo3-state-primary-bg);--typo3-input-active-border-color:var(--typo3-state-primary-focus-border-color);--typo3-input-disabled-color:var(--typo3-state-default-disabled-color);--typo3-input-disabled-bg:var(--typo3-state-default-disabled-bg);--typo3-input-disabled-border-color:var(--typo3-state-default-disabled-border-color);--typo3-input-disabled-opacity:.65}
+:root{color-scheme:only light;scroll-behavior:smooth;--typo3-font-size:12px;--typo3-font-size-small:11px;--typo3-font-family-sans-serif:Verdana,Arial,Helvetica,sans-serif;--typo3-font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;--typo3-font-family:var(--typo3-font-family-sans-serif);--typo3-font-family-code:var(--typo3-font-family-monospace);--typo3-spacing:1rem;--typo3-header-font-family:"Source Sans 3",sans-serif;--typo3-text-color-base:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-10));--typo3-text-color-link:var(--typo3-text-color-base);--typo3-text-color-variant:light-dark(var(--token-color-neutral-60), var(--token-color-neutral-30));--typo3-text-color-primary:light-dark(var(--token-color-blue-60), var(--token-color-blue-30));--typo3-text-color-secondary:light-dark(var(--token-color-neutral-70), var(--token-color-neutral-35));--typo3-text-color-info:light-dark(var(--token-color-teal-70), var(--token-color-teal-40));--typo3-text-color-success:light-dark(var(--token-color-green-70), var(--token-color-green-50));--typo3-text-color-warning:light-dark(var(--token-color-yellow-80), var(--token-color-yellow-40));--typo3-text-color-danger:light-dark(var(--token-color-red-60), var(--token-color-red-40));--typo3-text-color-code:light-dark(var(--token-color-magenta-60), var(--token-color-magenta-35));--typo3-text-color-notice:light-dark(var(--token-color-neutral-75), var(--token-color-neutral-40));--typo3-text-color-default:var(--typo3-text-color-base);--typo3-surface-dim:light-dark(var(--token-color-neutral-15), var(--token-color-neutral-96));--typo3-surface-base:light-dark(var(--token-color-neutral-4), var(--token-color-neutral-96));--typo3-surface-bright:light-dark(var(--token-color-neutral-4), var(--token-color-neutral-85));--typo3-surface-container-lowest:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-100));--typo3-surface-container-low:light-dark(var(--token-color-neutral-3), var(--token-color-neutral-97));--typo3-surface-container-base:light-dark(var(--token-color-neutral-5), var(--token-color-neutral-95));--typo3-surface-container-high:light-dark(var(--token-color-neutral-10), var(--token-color-neutral-90));--typo3-surface-container-highest:light-dark(var(--token-color-neutral-15), var(--token-color-neutral-85));--typo3-surface-primary:light-dark(var(--token-color-blue-60), var(--token-color-blue-70));--typo3-surface-primary-text:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-surface-container-primary:light-dark(var(--token-color-blue-10), var(--token-color-blue-90));--typo3-surface-container-primary-text:light-dark(var(--token-color-blue-90), var(--token-color-blue-10));--typo3-surface-secondary:light-dark(var(--token-color-neutral-70), var(--token-color-neutral-70));--typo3-surface-secondary-text:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-surface-container-secondary:light-dark(var(--token-color-neutral-10), var(--token-color-neutral-90));--typo3-surface-container-secondary-text:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-10));--typo3-surface-info:light-dark(var(--token-color-teal-20), var(--token-color-teal-70));--typo3-surface-info-text:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-surface-container-info:light-dark(var(--token-color-teal-10), var(--token-color-teal-90));--typo3-surface-container-info-text:light-dark(var(--token-color-teal-90), var(--token-color-teal-10));--typo3-surface-success:light-dark(var(--token-color-green-70), var(--token-color-green-80));--typo3-surface-success-text:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-surface-container-success:light-dark(var(--token-color-green-10), var(--token-color-green-90));--typo3-surface-container-success-text:light-dark(var(--token-color-green-90), var(--token-color-green-10));--typo3-surface-warning:light-dark(var(--token-color-yellow-40), var(--token-color-yellow-80));--typo3-surface-warning-text:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-surface-container-warning:light-dark(var(--token-color-yellow-10), var(--token-color-yellow-90));--typo3-surface-container-warning-text:light-dark(var(--token-color-yellow-90), var(--token-color-yellow-10));--typo3-surface-danger:light-dark(var(--token-color-red-50), var(--token-color-red-70));--typo3-surface-danger-text:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-surface-container-danger:light-dark(var(--token-color-red-10), var(--token-color-red-90));--typo3-surface-container-danger-text:light-dark(var(--token-color-red-90), var(--token-color-red-10));--typo3-surface-notice:light-dark(var(--token-color-neutral-75), var(--token-color-neutral-85));--typo3-surface-notice-text:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-surface-container-notice:light-dark(var(--token-color-neutral-10), var(--token-color-neutral-90));--typo3-surface-container-notice-text:light-dark(var(--token-color-neutral-95), var(--token-color-neutral-0));--typo3-surface-default:light-dark(var(--token-color-neutral-5), var(--token-color-neutral-95));--typo3-surface-default-text:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-surface-container-default:light-dark(var(--token-color-neutral-5), var(--token-color-neutral-95));--typo3-surface-container-default-text:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-state-default-color:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-state-default-bg:light-dark(var(--token-color-neutral-5), var(--token-color-neutral-90));--typo3-state-default-border-color:light-dark(var(--token-color-neutral-25), var(--token-color-neutral-80));--typo3-state-default-hover-color:var(--typo3-state-default-color);--typo3-state-default-hover-bg:light-dark(var(--token-color-neutral-10), var(--token-color-neutral-85));--typo3-state-default-hover-border-color:light-dark(var(--token-color-neutral-35), var(--token-color-neutral-75));--typo3-state-default-focus-color:var(--typo3-state-default-color);--typo3-state-default-focus-bg:light-dark(var(--token-color-neutral-15), var(--token-color-neutral-80));--typo3-state-default-focus-border-color:light-dark(var(--token-color-neutral-40), var(--token-color-neutral-70));--typo3-state-default-disabled-color:var(--typo3-state-default-color);--typo3-state-default-disabled-bg:var(--typo3-state-default-bg);--typo3-state-default-disabled-border-color:var(--typo3-state-default-border-color);--typo3-state-primary-color:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-state-primary-bg:light-dark(var(--token-color-blue-60), var(--token-color-blue-70));--typo3-state-primary-border-color:light-dark(var(--token-color-blue-65), var(--token-color-blue-65));--typo3-state-primary-hover-color:var(--typo3-state-primary-color);--typo3-state-primary-hover-bg:light-dark(var(--token-color-blue-65), var(--token-color-blue-65));--typo3-state-primary-hover-border-color:light-dark(var(--token-color-blue-70), var(--token-color-blue-60));--typo3-state-primary-focus-color:var(--typo3-state-primary-color);--typo3-state-primary-focus-bg:light-dark(var(--token-color-blue-70), var(--token-color-blue-60));--typo3-state-primary-focus-border-color:light-dark(var(--token-color-blue-75), var(--token-color-blue-55));--typo3-state-primary-disabled-color:var(--typo3-state-primary-color);--typo3-state-primary-disabled-bg:var(--typo3-state-primary-bg);--typo3-state-primary-disabled-border-color:var(--typo3-state-default-primary-color);--typo3-state-secondary-color:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-state-secondary-bg:light-dark(var(--token-color-neutral-70), var(--token-color-neutral-70));--typo3-state-secondary-border-color:light-dark(var(--token-color-neutral-75), var(--token-color-neutral-65));--typo3-state-secondary-hover-color:var(--typo3-state-secondary-color);--typo3-state-secondary-hover-bg:light-dark(var(--token-color-neutral-75), var(--token-color-neutral-65));--typo3-state-secondary-hover-border-color:light-dark(var(--token-color-neutral-80), var(--token-color-neutral-60));--typo3-state-secondary-focus-color:var(--typo3-state-secondary-color);--typo3-state-secondary-focus-bg:light-dark(var(--token-color-neutral-80), var(--token-color-neutral-60));--typo3-state-secondary-focus-border-color:light-dark(var(--token-color-neutral-85), var(--token-color-neutral-55));--typo3-state-secondary-disabled-color:var(--typo3-state-secondary-color);--typo3-state-secondary-disabled-bg:var(--typo3-state-secondary-bg);--typo3-state-secondary-disabled-border-color:var(--typo3-state-default-secondary-color);--typo3-state-success-color:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-state-success-bg:light-dark(var(--token-color-green-70), var(--token-color-green-80));--typo3-state-success-border-color:light-dark(var(--token-color-green-75), var(--token-color-green-75));--typo3-state-success-hover-color:var(--typo3-state-success-color);--typo3-state-success-hover-bg:light-dark(var(--token-color-green-75), var(--token-color-green-75));--typo3-state-success-hover-border-color:light-dark(var(--token-color-green-80), var(--token-color-green-70));--typo3-state-success-focus-color:var(--typo3-state-success-color);--typo3-state-success-focus-bg:light-dark(var(--token-color-green-80), var(--token-color-green-70));--typo3-state-success-focus-border-color:light-dark(var(--token-color-green-85), var(--token-color-green-65));--typo3-state-success-disabled-color:var(--typo3-state-success-color);--typo3-state-success-disabled-bg:var(--typo3-state-success-bg);--typo3-state-success-disabled-border-color:var(--typo3-state-default-success-color);--typo3-state-warning-color:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-state-warning-bg:light-dark(var(--token-color-yellow-40), var(--token-color-yellow-80));--typo3-state-warning-border-color:light-dark(var(--token-color-yellow-45), var(--token-color-yellow-75));--typo3-state-warning-hover-color:var(--typo3-state-warning-color);--typo3-state-warning-hover-bg:light-dark(var(--token-color-yellow-45), var(--token-color-yellow-75));--typo3-state-warning-hover-border-color:light-dark(var(--token-color-yellow-50), var(--token-color-yellow-70));--typo3-state-warning-focus-color:var(--typo3-state-warning-color);--typo3-state-warning-focus-bg:light-dark(var(--token-color-yellow-50), var(--token-color-yellow-70));--typo3-state-warning-focus-border-color:light-dark(var(--token-color-yellow-55), var(--token-color-yellow-65));--typo3-state-warning-disabled-color:var(--typo3-state-warning-color);--typo3-state-warning-disabled-bg:var(--typo3-state-warning-bg);--typo3-state-warning-disabled-border-color:var(--typo3-state-warning-border-color);--typo3-state-danger-color:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-state-danger-bg:light-dark(var(--token-color-red-50), var(--token-color-red-70));--typo3-state-danger-border-color:light-dark(var(--token-color-red-55), var(--token-color-red-65));--typo3-state-danger-hover-color:var(--typo3-state-danger-color);--typo3-state-danger-hover-bg:light-dark(var(--token-color-red-55), var(--token-color-red-65));--typo3-state-danger-hover-border-color:light-dark(var(--token-color-red-60), var(--token-color-red-60));--typo3-state-danger-focus-color:var(--typo3-state-danger-color);--typo3-state-danger-focus-bg:light-dark(var(--token-color-red-60), var(--token-color-red-60));--typo3-state-danger-focus-border-color:light-dark(var(--token-color-red-65), var(--token-color-red-55));--typo3-state-danger-disabled-color:var(--typo3-state-danger-color);--typo3-state-danger-disabled-bg:var(--typo3-state-danger-bg);--typo3-state-danger-disabled-border-color:var(--typo3-state-danger-border-color);--typo3-state-info-color:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-state-info-bg:light-dark(var(--token-color-teal-20), var(--token-color-teal-70));--typo3-state-info-border-color:light-dark(var(--token-color-teal-25), var(--token-color-teal-65));--typo3-state-info-hover-color:var(--typo3-state-info-color);--typo3-state-info-hover-bg:light-dark(var(--token-color-teal-25), var(--token-color-teal-65));--typo3-state-info-hover-border-color:light-dark(var(--token-color-teal-30), var(--token-color-teal-60));--typo3-state-info-focus-color:var(--typo3-state-info-color);--typo3-state-info-focus-bg:light-dark(var(--token-color-teal-30), var(--token-color-teal-60));--typo3-state-info-focus-border-color:light-dark(var(--token-color-teal-35), var(--token-color-teal-55));--typo3-state-info-disabled-color:var(--typo3-state-info-color);--typo3-state-info-disabled-bg:var(--typo3-state-info-bg);--typo3-state-info-disabled-border-color:var(--typo3-state-info-border-color);--typo3-state-notice-color:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-state-notice-bg:light-dark(var(--token-color-neutral-75), var(--token-color-neutral-85));--typo3-state-notice-border-color:light-dark(var(--token-color-neutral-80), var(--token-color-neutral-80));--typo3-state-notice-hover-color:var(--typo3-state-notice-color);--typo3-state-notice-hover-bg:light-dark(var(--token-color-neutral-80), var(--token-color-neutral-80));--typo3-state-notice-hover-border-color:light-dark(var(--token-color-neutral-85), var(--token-color-neutral-75));--typo3-state-notice-focus-color:var(--typo3-state-notice-color);--typo3-state-notice-focus-bg:light-dark(var(--token-color-neutral-85), var(--token-color-neutral-75));--typo3-state-notice-focus-border-color:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-70));--typo3-state-notice-disabled-color:var(--typo3-state-notice-color);--typo3-state-notice-disabled-bg:var(--typo3-state-notice-bg);--typo3-state-notice-disabled-border-color:var(--typo3-state-notice-border-color);--typo3-shadow-2:0 1px 2px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 1px 2px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-4:0 2px 4px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 2px 4px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-8:0 4px 8px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 4px 8px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-16:0 8px 16px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 8px 16px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-28:0 14px 28px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 14px 28px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-64:0 0 4px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 32px 64px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-component-color:var(--typo3-text-color-base);--typo3-component-variant-color:var(--typo3-text-color-variant);--typo3-component-primary-color:var(--typo3-text-color-primary);--typo3-component-secondary-color:var(--typo3-text-color-secondary);--typo3-component-match-highlight-color:inherit;--typo3-component-match-highlight-bg:rgba(234, 92, 0, .33);--typo3-component-bg:var(--typo3-surface-container-lowest);--typo3-component-link-color:light-dark(#05c, #6699e0);--typo3-component-link-hover-color:light-dark(#1a66d1, #80aae6);--typo3-component-font-size:0.75rem;--typo3-component-line-height:1.5;--typo3-component-border-radius:4px;--typo3-component-border-width:1px;--typo3-component-border-color:light-dark(rgb(215, 215, 215), rgb(51, 51, 51));--typo3-component-padding-y:.75rem;--typo3-component-padding-x:1rem;--typo3-component-box-shadow:var(--typo3-shadow-2);--typo3-component-box-shadow-strong:var(--typo3-shadow-4);--typo3-component-box-shadow-tooltip:var(--typo3-shadow-8);--typo3-component-box-shadow-flyout:var(--typo3-shadow-16);--typo3-component-box-shadow-dialog:var(--typo3-shadow-28);--typo3-component-box-shadow-window:var(--typo3-shadow-64);--typo3-component-hover-color:var(--typo3-component-color);--typo3-component-hover-bg:light-dark(#f2f7fc, rgb(51, 51, 51));--typo3-component-hover-border-color:light-dark(#d9e6f7, rgb(90, 90, 90));--typo3-component-focus-color:var(--typo3-component-color);--typo3-component-focus-bg:light-dark(#f2f7fc, #002b66);--typo3-component-focus-border-color:light-dark(#3377d6, #00337a);--typo3-component-active-color:#fff;--typo3-component-active-bg:light-dark(#3377d6, #0048ad);--typo3-component-active-border-color:light-dark(#3377d6, #0044a3);--typo3-component-disabled-color:rgb(115, 115, 115);--typo3-component-disabled-bg:transparent;--typo3-component-disabled-border-color:transparent;--typo3-component-spacing:2rem;--typo3-list-item-padding-y:.5rem;--typo3-list-item-padding-x:.75rem;--typo3-list-item-hover-color:var(--typo3-component-hover-color);--typo3-list-item-hover-bg:var(--typo3-component-hover-bg);--typo3-list-item-hover-border-color:var(--typo3-component-hover-border-color);--typo3-list-item-focus-color:var(--typo3-component-focus-color);--typo3-list-item-focus-bg:var(--typo3-component-focus-bg);--typo3-list-item-focus-border-color:var(--typo3-component-focus-border-color);--typo3-list-item-active-color:var(--typo3-list-item-focus-color);--typo3-list-item-active-bg:var(--typo3-list-item-focus-bg);--typo3-list-item-active-border-color:var(--typo3-list-item-focus-border-color);--typo3-list-item-disabled-color:var(--typo3-component-disabled-color);--typo3-list-item-disabled-bg:var(--typo3-component-disabled-bg);--typo3-list-item-disabled-border-color:var(--typo3-component-disabled-border-color);--typo3-legend-font-weight:600;--typo3-input-font-size:.75rem;--typo3-input-line-height:1.5;--typo3-input-padding-y:.5rem;--typo3-input-padding-x:.75rem;--typo3-input-sm-padding-y:.3125rem;--typo3-input-sm-padding-x:.5rem;--typo3-input-sm-font-size:.6875rem;--typo3-input-border-width:1px;--typo3-input-border-radius:var(--typo3-component-border-radius);--typo3-input-color:var(--typo3-text-color-base);--typo3-input-placeholder-color:color-mix(in srgb, var(--typo3-input-color), transparent 30%);--typo3-input-bg:var(--typo3-surface-container-lowest);--typo3-input-group-addon-bg:color-mix(in srgb, var(--typo3-input-bg), var(--typo3-input-color) 10%);--typo3-input-border-color:var(--typo3-state-default-border-color);--typo3-input-hover-color:var(--typo3-input-color);--typo3-input-hover-bg:var(--typo3-input-bg);--typo3-input-hover-border-color:var(--typo3-state-default-hover-border-color);--typo3-input-focus-color:var(--typo3-input-color);--typo3-input-focus-bg:var(--typo3-input-bg);--typo3-input-focus-border-color:var(--typo3-state-primary-focus-border-color);--typo3-input-active-color:var(--typo3-state-primary-color);--typo3-input-active-bg:var(--typo3-state-primary-bg);--typo3-input-active-border-color:var(--typo3-state-primary-focus-border-color);--typo3-input-disabled-color:var(--typo3-state-default-disabled-color);--typo3-input-disabled-bg:var(--typo3-state-default-disabled-bg);--typo3-input-disabled-border-color:var(--typo3-state-default-disabled-border-color);--typo3-input-disabled-opacity:.65}
[data-color-scheme=auto]{color-scheme:light dark}
[data-color-scheme=dark]{color-scheme:only dark}
[data-color-scheme=light]{color-scheme:only light}
@@ -2502,7 +2477,28 @@ a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-d
.order-7{order:7}
.order-8{order:8}
.order-9{order:9}
-.nav{padding-inline:0}
+.nav{--typo3-nav-link-padding-x:1rem;--typo3-nav-link-padding-y:.5rem;--typo3-nav-link-font-size:var(--typo3-font-size);--typo3-nav-link-font-weight:normal;--typo3-nav-link-color:var(--typo3-text-color-link);--typo3-nav-link-hover-color:var(--typo3-text-color-link);--typo3-nav-link-disabled-color:var(--typo3-text-color-variant);--typo3-nav-link-focusring-base-color:var(--typo3-nav-link-color);display:flex;gap:1px;flex-wrap:wrap;padding-inline:0;margin-bottom:0;list-style:none;font-size:var(--typo3-nav-link-font-size)}
+.nav-link{display:block;padding:var(--typo3-nav-link-padding-y) var(--typo3-nav-link-padding-x);font-size:var(--typo3-nav-link-font-size);font-weight:var(--typo3-nav-link-font-weight);color:var(--typo3-nav-link-color);background:0 0;border:0;transition:color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out;outline-offset:0}
+.nav-link:focus,.nav-link:hover{color:var(--typo3-nav-link-hover-color);text-decoration:underline}
+.nav-link:focus-visible{outline:.25rem solid color-mix(in srgb,var(--typo3-nav-link-focusring-base-color),transparent 25%)}
+.nav-link.disabled,.nav-link:disabled{color:var(--typo3-nav-link-disabled-color);pointer-events:none;cursor:default}
+.nav-tabs{--typo3-nav-tabs-color:var(--typo3-component-color);--typo3-nav-tabs-bg:var(--typo3-component-bg);--typo3-nav-tabs-border-color:color-mix(in srgb, var(--typo3-nav-tabs-bg), var(--typo3-nav-tabs-color) 15%);--typo3-nav-tabs-border-width:var(--typo3-component-border-width);--typo3-nav-tabs-border-radius:var(--typo3-component-border-radius);position:relative;gap:2px 1px;z-index:1;border-bottom:var(--typo3-nav-tabs-border-width) solid var(--typo3-nav-tabs-border-color)}
+.nav-tabs .nav-link{--typo3-nav-tabs-link-state-color:initial;--typo3-nav-tabs-link-state-bg:initial;--typo3-nav-tabs-link-color:var(--typo3-nav-tabs-link-state-color, var(--typo3-nav-tabs-color));--typo3-nav-tabs-link-bg:var(--typo3-nav-tabs-link-state-bg, var(--typo3-nav-tabs-bg));--typo3-nav-tabs-link-border-color:color-mix(in srgb, var(--typo3-nav-tabs-link-bg), var(--typo3-nav-tabs-link-color) 15%);--typo3-nav-tabs-link-active-color:var(--typo3-nav-tabs-color);--typo3-nav-tabs-link-active-bg:var(--typo3-nav-tabs-bg);--typo3-nav-tabs-link-danger-color:var(--typo3-surface-container-danger-text);--typo3-nav-tabs-link-danger-bg:var(--typo3-surface-container-danger);--typo3-nav-tabs-link-danger-active-color:var(--typo3-nav-tabs-link-active-color);--typo3-nav-tabs-link-danger-active-bg:var(--typo3-nav-tabs-link-active-bg);--typo3-nav-link-focusring-base-color:var(--typo3-nav-tabs-link-border-color);position:relative;color:var(--typo3-nav-tabs-link-color);background-color:var(--typo3-nav-tabs-link-bg);margin-bottom:calc(-1 * var(--typo3-nav-tabs-border-width));border:var(--typo3-nav-tabs-border-width) solid var(--typo3-nav-tabs-link-border-color);border-start-start-radius:var(--typo3-nav-tabs-border-radius);border-start-end-radius:var(--typo3-nav-tabs-border-radius)}
+.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{text-decoration:none;isolation:isolate}
+.nav-tabs .nav-link:hover{background:color-mix(in srgb,var(--typo3-nav-tabs-link-bg),var(--typo3-nav-tabs-link-color) 6%)}
+.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-item.show .nav-link:hover,.nav-tabs .nav-link.active,.nav-tabs .nav-link.active:hover{--typo3-nav-tabs-link-state-color:var(--typo3-nav-tabs-link-active-color);--typo3-nav-tabs-link-state-bg:var(--typo3-nav-tabs-link-active-bg);background-color:var(--typo3-nav-tabs-link-bg);border-bottom-color:var(--typo3-nav-tabs-link-bg)}
+.nav-tabs .nav-item.has-validation-error .nav-link{--typo3-nav-tabs-link-state-color:var(--typo3-nav-tabs-link-danger-color);--typo3-nav-tabs-link-state-bg:var(--typo3-nav-tabs-link-danger-bg);padding-inline-start:calc(var(--typo3-nav-link-padding-x) + 16px + .25rem)}
+.nav-tabs .nav-item.has-validation-error .nav-link.active{--typo3-nav-tabs-link-state-color:var(--typo3-nav-tabs-link-danger-active-color);--typo3-nav-tabs-link-state-bg:var(--typo3-nav-tabs-link-danger-active-bg)}
+.nav-tabs .nav-item.has-validation-error .nav-link:after,.nav-tabs .nav-item.has-validation-error .nav-link:before{content:"";position:absolute;top:50%;inset-inline:var(--typo3-nav-link-padding-x);transform:translate(0,-50%);border-radius:50%;width:16px;height:16px}
+.nav-tabs .nav-item.has-validation-error .nav-link:before{background-color:var(--typo3-state-danger-bg)}
+.nav-tabs .nav-item.has-validation-error .nav-link:after{background-color:var(--typo3-state-danger-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='%23fff'%3e%3ccircle cx='8' cy='11' r='1'/%3e%3cpath d='M8.5 9h-1l-.445-4.45A.5.5 0 0 1 7.552 4h.896a.5.5 0 0 1 .497.55L8.5 9z'/%3e%3c/g%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='%23fff'%3e%3ccircle cx='8' cy='11' r='1'/%3e%3cpath d='M8.5 9h-1l-.445-4.45A.5.5 0 0 1 7.552 4h.896a.5.5 0 0 1 .497.55L8.5 9z'/%3e%3c/g%3e%3c/svg%3e");-webkit-mask-position:center center;mask-position:center center;-webkit-mask-size:contain;mask-size:contain}
+.nav-pills{--typo3-nav-pills-border-radius:var(--typo3-component-border-radius);--typo3-nav-pills-link-active-color:var(--typo3-state-primary-color);--typo3-nav-pills-link-active-bg:var(--typo3-state-primary-bg)}
+.nav-pills .nav-link{border-radius:var(--typo3-nav-pills-border-radius)}
+.nav-pills .nav-link.active,.nav-pills .show>.nav-link{--typo3-nav-link-focusring-base-color:var(--typo3-nav-pills-link-active-bg);background-color:var(--typo3-nav-pills-link-active-bg);color:var(--typo3-nav-pills-link-active-color);text-decoration:none}
+.tab-content>.tab-pane{display:none}
+.tab-content>.active{display:block}
+.tab-pane>.panel{--typo3-panel-border-radius-top:0}
+.tab-pane>.visually-hidden:first-child+.form-section,.tab-pane>:first-child{border-top:none}
:root{--icon-color-primary:currentColor;--icon-size-small:16px;--icon-size-medium:32px;--icon-size-large:48px;--icon-size-mega:64px;--icon-unify-modifier:0.86;--icon-opacity-disabled:0.5}
.icon{position:relative;display:inline-flex;overflow:hidden;white-space:nowrap;color:var(--icon-color-primary);height:var(--icon-size,1em);width:var(--icon-size,1em);line-height:var(--icon-size,1em);flex-shrink:0}
.icon img,.icon svg{display:block;height:100%;width:100%}
@@ -2713,14 +2709,14 @@ typo3-backend-formengine-suggest-result-item .formengine-suggest-result-item-lab
.form-check.form-check-size-input{margin-top:calc(var(--typo3-spacing)/ 2);margin-bottom:calc(var(--typo3-spacing)/ 2)}
.form-text{margin-top:calc(var(--typo3-spacing) * .25)}
.form-description{color:var(--typo3-text-color-variant);margin-bottom:calc(var(--typo3-spacing) * .25)}
-.has-error,.is-invalid{--typo3-input-color:var(--typo3-surface-container-danger-text);--typo3-input-bg:var(--typo3-surface-container-danger);--typo3-input-group-addon-bg:color-mix(in srgb, var(--typo3-input-bg), var(--typo3-input-color) 10%);--typo3-input-border-color:var(--typo3-state-danger-border-color);--typo3-input-hover-color:var(--typo3-input-color);--typo3-input-hover-bg:var(--typo3-input-bg);--typo3-input-hover-border-color:var(--typo3-state-danger-hover-border-color);--typo3-input-focus-color:var(--typo3-input-color);--typo3-input-focus-bg:var(--typo3-input-bg);--typo3-input-focus-border-color:var(--typo3-state-danger-focus-border-color)}
-.has-error .form-label:before,.is-invalid .form-label:before{content:"";vertical-align:middle;-webkit-mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3e%3cg fill='currentColor'%3e%3cpath d='M8 2c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6 2.7-6 6-6m0-1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7z'/%3e%3ccircle cx='8' cy='11' r='1'/%3e%3cpath d='M8.5 9h-1l-.445-4.45A.5.5 0 0 1 7.552 4h.896a.5.5 0 0 1 .497.55L8.5 9z'/%3e%3c/g%3e%3c/svg%3e");mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3e%3cg fill='currentColor'%3e%3cpath d='M8 2c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6 2.7-6 6-6m0-1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7z'/%3e%3ccircle cx='8' cy='11' r='1'/%3e%3cpath d='M8.5 9h-1l-.445-4.45A.5.5 0 0 1 7.552 4h.896a.5.5 0 0 1 .497.55L8.5 9z'/%3e%3c/g%3e%3c/svg%3e");background-color:var(--typo3-text-color-danger);background-size:contain;display:inline-block;width:1.3333333333em;height:1.3333333333em}
-.has-success,.is-valid{--typo3-input-color:var(--typo3-surface-container-success-text);--typo3-input-bg:var(--typo3-surface-container-success);--typo3-input-group-addon-bg:color-mix(in srgb, var(--typo3-input-bg), var(--typo3-input-color) 10%);--typo3-input-border-color:var(--typo3-state-success-border-color);--typo3-input-hover-color:var(--typo3-input-color);--typo3-input-hover-bg:var(--typo3-input-bg);--typo3-input-hover-border-color:var(--typo3-state-success-hover-border-color);--typo3-input-focus-color:var(--typo3-input-color);--typo3-input-focus-bg:var(--typo3-input-bg);--typo3-input-focus-border-color:var(--typo3-state-success-focus-border-color)}
-.has-success .form-label:before,.is-valid .form-label:before{content:"";vertical-align:middle;-webkit-mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3e%3cg fill='currentColor'%3e%3cpath d='m12.1 5.3-.4-.3c-.1-.1-.3-.1-.4 0L6.6 9.8l-2-2c-.1-.1-.3-.1-.4 0l-.3.4c-.1.1-.1.3 0 .4L6 10.7l.4.3c.1.1.3.1.4 0l.4-.4 4.9-4.9c.1-.1.1-.3 0-.4z'/%3e%3cpath d='M8 2c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6 2.7-6 6-6m0-1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7z'/%3e%3c/g%3e%3c/svg%3e");mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3e%3cg fill='currentColor'%3e%3cpath d='m12.1 5.3-.4-.3c-.1-.1-.3-.1-.4 0L6.6 9.8l-2-2c-.1-.1-.3-.1-.4 0l-.3.4c-.1.1-.1.3 0 .4L6 10.7l.4.3c.1.1.3.1.4 0l.4-.4 4.9-4.9c.1-.1.1-.3 0-.4z'/%3e%3cpath d='M8 2c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6 2.7-6 6-6m0-1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7z'/%3e%3c/g%3e%3c/svg%3e");background-color:var(--typo3-text-color-success);background-size:contain;display:inline-block;width:1.3333333333em;height:1.3333333333em}
.has-change{--typo3-input-color:var(--typo3-surface-container-info-text);--typo3-input-bg:var(--typo3-surface-container-info);--typo3-input-group-addon-bg:color-mix(in srgb, var(--typo3-input-bg), var(--typo3-input-color) 10%);--typo3-input-border-color:var(--typo3-state-info-border-color);--typo3-input-hover-color:var(--typo3-input-color);--typo3-input-hover-bg:var(--typo3-input-bg);--typo3-input-hover-border-color:var(--typo3-state-info-hover-border-color);--typo3-input-focus-color:var(--typo3-input-color);--typo3-input-focus-bg:var(--typo3-input-bg);--typo3-input-focus-border-color:var(--typo3-state-info-focus-border-color)}
.has-change .form-label:before{content:"";vertical-align:middle;-webkit-mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3e%3cg fill='currentColor'%3e%3cpath d='M8 2c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6 2.7-6 6-6m0-1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7z'/%3e%3ccircle cx='8' cy='11' r='1'/%3e%3cpath d='M8.5 9h-1l-.445-4.45A.5.5 0 0 1 7.552 4h.896a.5.5 0 0 1 .497.55L8.5 9z'/%3e%3c/g%3e%3c/svg%3e");mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3e%3cg fill='currentColor'%3e%3cpath d='M8 2c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6 2.7-6 6-6m0-1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7z'/%3e%3ccircle cx='8' cy='11' r='1'/%3e%3cpath d='M8.5 9h-1l-.445-4.45A.5.5 0 0 1 7.552 4h.896a.5.5 0 0 1 .497.55L8.5 9z'/%3e%3c/g%3e%3c/svg%3e");background-color:var(--typo3-text-color-info);background-size:contain;display:inline-block;width:1.3333333333em;height:1.3333333333em}
+.has-success,.is-valid{--typo3-input-color:var(--typo3-surface-container-success-text);--typo3-input-bg:var(--typo3-surface-container-success);--typo3-input-group-addon-bg:color-mix(in srgb, var(--typo3-input-bg), var(--typo3-input-color) 10%);--typo3-input-border-color:var(--typo3-state-success-border-color);--typo3-input-hover-color:var(--typo3-input-color);--typo3-input-hover-bg:var(--typo3-input-bg);--typo3-input-hover-border-color:var(--typo3-state-success-hover-border-color);--typo3-input-focus-color:var(--typo3-input-color);--typo3-input-focus-bg:var(--typo3-input-bg);--typo3-input-focus-border-color:var(--typo3-state-success-focus-border-color)}
+.has-success .form-label:before,.is-valid .form-label:before{content:"";vertical-align:middle;-webkit-mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3e%3cg fill='currentColor'%3e%3cpath d='m12.1 5.3-.4-.3c-.1-.1-.3-.1-.4 0L6.6 9.8l-2-2c-.1-.1-.3-.1-.4 0l-.3.4c-.1.1-.1.3 0 .4L6 10.7l.4.3c.1.1.3.1.4 0l.4-.4 4.9-4.9c.1-.1.1-.3 0-.4z'/%3e%3cpath d='M8 2c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6 2.7-6 6-6m0-1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7z'/%3e%3c/g%3e%3c/svg%3e");mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3e%3cg fill='currentColor'%3e%3cpath d='m12.1 5.3-.4-.3c-.1-.1-.3-.1-.4 0L6.6 9.8l-2-2c-.1-.1-.3-.1-.4 0l-.3.4c-.1.1-.1.3 0 .4L6 10.7l.4.3c.1.1.3.1.4 0l.4-.4 4.9-4.9c.1-.1.1-.3 0-.4z'/%3e%3cpath d='M8 2c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6 2.7-6 6-6m0-1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7z'/%3e%3c/g%3e%3c/svg%3e");background-color:var(--typo3-text-color-success);background-size:contain;display:inline-block;width:1.3333333333em;height:1.3333333333em}
.has-warning{--typo3-input-color:var(--typo3-surface-container-warning-text);--typo3-input-bg:var(--typo3-surface-container-warning);--typo3-input-group-addon-bg:color-mix(in srgb, var(--typo3-input-bg), var(--typo3-input-color) 10%);--typo3-input-border-color:var(--typo3-state-warning-border-color);--typo3-input-hover-color:var(--typo3-input-color);--typo3-input-hover-bg:var(--typo3-input-bg);--typo3-input-hover-border-color:var(--typo3-state-warning-hover-border-color);--typo3-input-focus-color:var(--typo3-input-color);--typo3-input-focus-bg:var(--typo3-input-bg);--typo3-input-focus-border-color:var(--typo3-state-warning-focus-border-color)}
.has-warning .form-label:before{content:"";vertical-align:middle;-webkit-mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3e%3cg fill='currentColor'%3e%3ccircle cx='8' cy='12' r='1'/%3e%3cpath d='M8.5 10h-1l-.445-4.45A.5.5 0 0 1 7.552 5h.896a.5.5 0 0 1 .497.55L8.5 10z'/%3e%3cpath d='M8 2.008a.98.98 0 0 1 .875.515l5.536 9.992a.983.983 0 0 1-.013.993.983.983 0 0 1-.862.492H2.464a.983.983 0 0 1-.862-.492.983.983 0 0 1-.013-.993l5.536-9.992A.98.98 0 0 1 8 2.008m0-1a1.98 1.98 0 0 0-1.75 1.03L.715 12.032C-.024 13.364.94 15 2.464 15h11.072c1.524 0 2.488-1.636 1.75-2.97L9.749 2.04A1.98 1.98 0 0 0 8 1.009z'/%3e%3c/g%3e%3c/svg%3e");mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3e%3cg fill='currentColor'%3e%3ccircle cx='8' cy='12' r='1'/%3e%3cpath d='M8.5 10h-1l-.445-4.45A.5.5 0 0 1 7.552 5h.896a.5.5 0 0 1 .497.55L8.5 10z'/%3e%3cpath d='M8 2.008a.98.98 0 0 1 .875.515l5.536 9.992a.983.983 0 0 1-.013.993.983.983 0 0 1-.862.492H2.464a.983.983 0 0 1-.862-.492.983.983 0 0 1-.013-.993l5.536-9.992A.98.98 0 0 1 8 2.008m0-1a1.98 1.98 0 0 0-1.75 1.03L.715 12.032C-.024 13.364.94 15 2.464 15h11.072c1.524 0 2.488-1.636 1.75-2.97L9.749 2.04A1.98 1.98 0 0 0 8 1.009z'/%3e%3c/g%3e%3c/svg%3e");background-color:var(--typo3-text-color-warning);background-size:contain;display:inline-block;width:1.3333333333em;height:1.3333333333em}
+.has-error,.is-invalid{--typo3-input-color:var(--typo3-surface-container-danger-text);--typo3-input-bg:var(--typo3-surface-container-danger);--typo3-input-group-addon-bg:color-mix(in srgb, var(--typo3-input-bg), var(--typo3-input-color) 10%);--typo3-input-border-color:var(--typo3-state-danger-border-color);--typo3-input-hover-color:var(--typo3-input-color);--typo3-input-hover-bg:var(--typo3-input-bg);--typo3-input-hover-border-color:var(--typo3-state-danger-hover-border-color);--typo3-input-focus-color:var(--typo3-input-color);--typo3-input-focus-bg:var(--typo3-input-bg);--typo3-input-focus-border-color:var(--typo3-state-danger-focus-border-color)}
+.has-error .form-label:before,.is-invalid .form-label:before{content:"";vertical-align:middle;-webkit-mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3e%3cg fill='currentColor'%3e%3cpath d='M8 2c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6 2.7-6 6-6m0-1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7z'/%3e%3ccircle cx='8' cy='11' r='1'/%3e%3cpath d='M8.5 9h-1l-.445-4.45A.5.5 0 0 1 7.552 4h.896a.5.5 0 0 1 .497.55L8.5 9z'/%3e%3c/g%3e%3c/svg%3e");mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3e%3cg fill='currentColor'%3e%3cpath d='M8 2c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6 2.7-6 6-6m0-1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7z'/%3e%3ccircle cx='8' cy='11' r='1'/%3e%3cpath d='M8.5 9h-1l-.445-4.45A.5.5 0 0 1 7.552 4h.896a.5.5 0 0 1 .497.55L8.5 9z'/%3e%3c/g%3e%3c/svg%3e");background-color:var(--typo3-text-color-danger);background-size:contain;display:inline-block;width:1.3333333333em;height:1.3333333333em}
.form-hint{--typo3-formhint-color:inherit;--typo3-formhint-bg:inherit;--typo3-formhint-border-color:transparent;--typo3-formhint-border-width:var(--typo3-input-border-width);--typo3-formhint-border-radius:var(--typo3-input-border-radius);--typo3-formhint-box-shadow:none;font-size:.625rem;color:var(--typo3-formhint-color);padding:calc(var(--typo3-input-padding-y)/ 2) var(--typo3-input-padding-x);background-color:var(--typo3-formhint-bg);border:var(--typo3-formhint-border-width) solid var(--typo3-formhint-border-color);border-radius:var(--typo3-formhint-border-radius);box-shadow:var(--typo3-formhint-box-shadow)}
.form-hint--primary{--typo3-formhint-color:var(--typo3-state-primary-color);--typo3-formhint-bg:var(--typo3-state-primary-bg);--typo3-formhint-border-color:var(--typo3-state-primary-border-color)}
.form-hint--secondary{--typo3-formhint-color:var(--typo3-state-secondary-color);--typo3-formhint-bg:var(--typo3-state-secondary-bg);--typo3-formhint-border-color:var(--typo3-state-secondary-border-color)}
@@ -3050,8 +3046,6 @@ td .table-fit{margin-bottom:0}
.simpletable td,.simpletable th{padding:.25em 1em}
.simpletable td:first-child,.simpletable th:first-child{padding-inline-start:0}
.simpletable td:last-child,.simpletable th:last-child{padding-inline-end:0}
-.tab-pane>.panel{--typo3-panel-bg:#fafafa;--typo3-panel-border-color:#ccc;--typo3-panel-border-radius:0}
-.tab-pane>.visually-hidden:first-child+.form-section,.tab-pane>:first-child{border-top:none}
select-pure{--typo3-form-selectpure-border-radius:var(--typo3-input-border-radius);--typo3-form-selectpure-border-width:var(--typo3-input-border-width);--typo3-form-selectpure-border-color:var(--typo3-input-border-color);--typo3-form-selectpure-padding-x:var(--typo3-input-padding-x);--typo3-form-selectpure-padding-y:var(--typo3-input-padding-y);--typo3-form-selectpure-font-size:var(--typo3-input-font-size);--typo3-form-selectpure-line-height:var(--typo3-input-line-height);--typo3-form-selectpure-color:var(--typo3-input-color);--typo3-form-selectpure-bg:var(--typo3-input-bg);--typo3-form-selectpure-hover-color:var(--typo3-input-hover-color);--typo3-form-selectpure-hover-bg:var(--typo3-input-hover-bg);--typo3-form-selectpure-focus-border-color:var(--typo3-input-focus-border-color);--typo3-form-selectpure-disabled-color:var(--typo3-input-disabled-color);--typo3-form-selectpure-disabled-bg:var(--typo3-input-disabled-bg);--font-size:var(--typo3-form-selectpure-font-size);--font-family:inherit;--font-weight:400;--border-radius:var(--typo3-form-selectpure-border-radius);--border-width:var(--typo3-form-selectpure-border-width);--border-color:var(--typo3-form-selectpure-border-color);--padding:calc(var(--typo3-form-selectpure-padding-y) - 4px) var(--typo3-form-selectpure-padding-x);--select-height:calc(var(--typo3-form-selectpure-padding-y) * 2 + var(--typo3-form-selectpure-font-size) * var(--typo3-form-selectpure-line-height) + var(--typo3-form-selectpure-border-width) * 2);--select-width:100%;--color:var(--typo3-form-selectpure-color);--background-color:var(--typo3-form-selectpure-bg);--hover-color:var(--typo3-form-selectpure-hover-color);--hover-background-color:var(--typo3-form-selectpure-hover-bg);--disabled-color:var(--typo3-form-selectpure-disabled-color);--disabled-background-color:var(--typo3-form-selectpure-disabled-bg);--select-outline:.25rem solid color-mix(in srgb, var(--typo3-form-selectpure-focus-border-color), transparent 25%);--selected-background-color:var(--typo3-component-active-bg);--selected-color:var(--typo3-component-active-color);--dropdown-gap:calc(var(--typo3-spacing) * .5);--dropdown-items:5;--dropdown-z-index:2}
.input-group>select-pure{position:relative;flex:1 1 auto}
.cropper-container{position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
@@ -3331,8 +3325,8 @@ typo3-backend-form-selecttree-toolbar{display:block}
.element-browser-nav{padding:calc(var(--typo3-spacing)/ 2) var(--typo3-spacing);background-color:var(--module-docheader-bg);border-bottom:1px solid var(--module-docheader-border-color)}
.element-browser-header+.element-browser-nav{padding-top:0}
.element-browser-nav .nav{gap:2px}
-.element-browser-nav .nav-link,.element-browser-nav .nav.nav-tabs>li:not(.nav-item)>a:not(.nav-link){box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
-.element-browser-nav .nav-link:focus-visible,.element-browser-nav .nav.nav-tabs>li:not(.nav-item)>a:focus-visible:not(.nav-link){box-shadow:rgba(0,120,230,.25) 0 0 0 .25rem}
+.element-browser-nav .nav-link{box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
+.element-browser-nav .nav-link:focus-visible{box-shadow:rgba(0,120,230,.25) 0 0 0 .25rem}
.element-browser-body{overflow:unset;padding:var(--typo3-spacing)}
.element-browser-body>:first-child{margin-top:0}
.element-browser-body>:last-child{margin-bottom:0}
@@ -3803,20 +3797,20 @@ typo3-rte-ckeditor-ckeditor5 .ck.ck-style-panel .ck-style-grid .ck-style-grid__b
.page-position-map .page-position-grid ul{padding:0;list-style:none}
.page-position-map .page-position-grid .page-position-action{text-align:center}
.page-position-map .page-position-grid .page-position-record{border:1px solid var(--page-position-element-bg);background-color:var(--page-position-element-bg);border-radius:var(--page-position-element-border-radius);box-shadow:var(--typo3-component-box-shadow-strong);margin:var(--page-position-grid-spacing) var(--page-position-grid-inner-spacing);padding:var(--page-position-element-spacing);overflow:hidden}
-input[type=range].slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;display:inline-block;position:relative;width:210px;height:32px;background:0 0;margin:0 6px}
-input[type=range].slider::-webkit-slider-thumb{margin-top:20px;-webkit-appearance:none;appearance:none;border:1px solid #959595;border-radius:.125rem;height:20px;width:16px;margin-top:-4px;cursor:grab;box-shadow:inset 0 calc(20px / 4 * -1) 0 0 #eee,inset 0 calc(20px / 4) 0 0 #eee;background-color:#eee;background-image:linear-gradient(90deg,#eee 30%,#333 30%,#333 40%,#eee 40%,#eee 60%,#333 60%,#333 70%,#eee 70%,#eee)}
+input[type=range].slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;display:inline-block;position:relative;width:210px;height:3.75rem;background:0 0;margin:0 .375rem}
+input[type=range].slider::-webkit-slider-thumb{margin-top:3rem;-webkit-appearance:none;appearance:none;border:1px solid #959595;border-radius:.125rem;height:3rem;width:2rem;margin-top:-.5rem;cursor:grab;box-shadow:inset 0 calc(3rem / 4 * -1) 0 0 #eee,inset 0 calc(3rem / 4) 0 0 #eee;background-color:#eee;background-image:linear-gradient(90deg,#eee 30%,#333 30%,#333 40%,#eee 40%,#eee 60%,#333 60%,#333 70%,#eee 70%,#eee)}
input[type=range].slider::-webkit-slider-thumb:active,input[type=range].slider::-webkit-slider-thumb:focus,input[type=range].slider::-webkit-slider-thumb:hover{background-color:#d5d5d5;border-color:#767676}
input[type=range].slider::-webkit-slider-thumb:active{cursor:grabbing}
-input[type=range].slider::-webkit-slider-runnable-track{height:12px;background:#ddd;border-radius:.125rem;box-sizing:border-box;box-shadow:inset 0 0 2px rgba(0,0,0,.25)}
-input[type=range].slider::-moz-range-thumb{-moz-appearance:none;appearance:none;border:1px solid #959595;border-radius:.125rem;height:20px;width:16px;margin-top:-4px;cursor:grab;box-shadow:inset 0 calc(20px / 4 * -1) 0 0 #eee,inset 0 calc(20px / 4) 0 0 #eee;background-color:#eee;background-image:linear-gradient(90deg,#eee 30%,#333 30%,#333 40%,#eee 40%,#eee 60%,#333 60%,#333 70%,#eee 70%,#eee)}
+input[type=range].slider::-webkit-slider-runnable-track{height:2rem;background:#ddd;border-radius:.125rem;box-sizing:border-box;box-shadow:inset 0 0 2px rgba(0,0,0,.25)}
+input[type=range].slider::-moz-range-thumb{-moz-appearance:none;appearance:none;border:1px solid #959595;border-radius:.125rem;height:3rem;width:2rem;margin-top:-.5rem;cursor:grab;box-shadow:inset 0 calc(3rem / 4 * -1) 0 0 #eee,inset 0 calc(3rem / 4) 0 0 #eee;background-color:#eee;background-image:linear-gradient(90deg,#eee 30%,#333 30%,#333 40%,#eee 40%,#eee 60%,#333 60%,#333 70%,#eee 70%,#eee)}
input[type=range].slider::-moz-range-thumb:active,input[type=range].slider::-moz-range-thumb:focus,input[type=range].slider::-moz-range-thumb:hover{background-color:#d5d5d5;border-color:#767676}
input[type=range].slider::-moz-range-thumb:active{cursor:grabbing}
-input[type=range].slider::-moz-range-track{height:12px;background:#ddd;border-radius:.125rem;box-sizing:border-box;box-shadow:inset 0 0 2px rgba(0,0,0,.25);width:100%}
+input[type=range].slider::-moz-range-track{height:2rem;background:#ddd;border-radius:.125rem;box-sizing:border-box;box-shadow:inset 0 0 2px rgba(0,0,0,.25);width:100%}
input[type=range].slider::-moz-range-progress{background:#999}
-input[type=range].slider::-ms-thumb{appearance:none;border:1px solid #959595;border-radius:.125rem;height:20px;width:16px;margin-top:-4px;cursor:grab;box-shadow:inset 0 calc(20px / 4 * -1) 0 0 #eee,inset 0 calc(20px / 4) 0 0 #eee;background-color:#eee;background-image:linear-gradient(90deg,#eee 30%,#333 30%,#333 40%,#eee 40%,#eee 60%,#333 60%,#333 70%,#eee 70%,#eee);margin-top:inherit}
+input[type=range].slider::-ms-thumb{appearance:none;border:1px solid #959595;border-radius:.125rem;height:3rem;width:2rem;margin-top:-.5rem;cursor:grab;box-shadow:inset 0 calc(3rem / 4 * -1) 0 0 #eee,inset 0 calc(3rem / 4) 0 0 #eee;background-color:#eee;background-image:linear-gradient(90deg,#eee 30%,#333 30%,#333 40%,#eee 40%,#eee 60%,#333 60%,#333 70%,#eee 70%,#eee);margin-top:inherit}
input[type=range].slider::-ms-thumb:active,input[type=range].slider::-ms-thumb:focus,input[type=range].slider::-ms-thumb:hover{background-color:#d5d5d5;border-color:#767676}
input[type=range].slider::-ms-thumb:active{cursor:grabbing}
-input[type=range].slider::-ms-track{height:12px;background:#ddd;border-radius:.125rem;box-sizing:border-box;box-shadow:inset 0 0 2px rgba(0,0,0,.25)}
+input[type=range].slider::-ms-track{height:2rem;background:#ddd;border-radius:.125rem;box-sizing:border-box;box-shadow:inset 0 0 2px rgba(0,0,0,.25)}
input[type=range].slider::-ms-fill-lower{background:#999;border-radius:.125rem;box-sizing:border-box}
input[type=range].slider::-ms-fill-upper{background:0 0;border-radius:.125rem;box-sizing:border-box}
input[type=range].slider[disabled]::-webkit-slider-thumb{cursor:not-allowed;background-color:#d13a2e;border:1px solid #922920}
@@ -3831,28 +3825,12 @@ input[type=range].slider[disabled]::-ms-thumb{cursor:not-allowed;background-colo
input[type=range].slider[disabled]::-ms-thumb:active,input[type=range].slider[disabled]::-ms-thumb:focus,input[type=range].slider[disabled]::-ms-thumb:hover{background-color:#a72e25;border-color:#601b15}
input[type=range].slider[disabled]::-ms-thumb:after,input[type=range].slider[disabled]::-ms-thumb:before{background-color:#fff}
input[type=range].slider[disabled]::-ms-track{cursor:not-allowed}
-.form-wizards-items>input[type=range].slider.slider-horizontal{margin-left:8px;margin-right:8px}
+.form-wizards-items>input[type=range].slider.slider-horizontal{margin-left:.9375rem;margin-right:.9375rem}
.slider-wrapper{display:flex;align-items:center}
-.slider-wrapper.slider-vertical{width:auto;margin-bottom:calc(100% - 32px);transform-origin:top left;transform:rotate(-90deg) translate(-100%)}
-.slider-wrapper.slider-vertical .slider{margin:6px 0}
-.nav-tabs{border-radius:.125rem .125rem 0 0;background-color:#ededed}
-.nav-tabs>li+li{margin-inline-start:2px}
-.nav-tabs>li>a.nav-link,.nav.nav-tabs>li:not(.nav-item)>a:not(.nav-link){margin-inline-end:0;transition:all .25s ease-in-out}
-@media (prefers-reduced-motion:reduce){
-.nav-tabs>li>a.nav-link,.nav.nav-tabs>li:not(.nav-item)>a:not(.nav-link){transition:none}
-}
-.nav-tabs>li>a.nav-link:focus,.nav-tabs>li>a.nav-link:hover,.nav.nav-tabs>li:not(.nav-item)>a:focus:not(.nav-link),.nav.nav-tabs>li:not(.nav-item)>a:hover:not(.nav-link){border-color:#d7d7d7 #d7d7d7 #ccc;background:#e1e1e1}
-.nav-tabs>li>a.nav-link.active,.nav.nav-tabs>li:not(.nav-item)>a.active:not(.nav-link){border:1px solid #ccc;border-bottom-color:#fafafa;background-color:#fafafa}
-.nav-tabs>li[class*=has-]>a.nav-link:before,.nav.nav-tabs>li[class*=has-]:not(.nav-item)>a:not(.nav-link):before{transition:all .25s ease-in-out}
-@media (prefers-reduced-motion:reduce){
-.nav-tabs>li[class*=has-]>a.nav-link:before,.nav.nav-tabs>li[class*=has-]:not(.nav-item)>a:not(.nav-link):before{transition:none}
-}
-.nav-tabs>li.has-validation-error>a.nav-link,.nav.nav-tabs>li.has-validation-error:not(.nav-item)>a:not(.nav-link){background-color:#d13a2e;border-color:#a72e25;color:#fff}
-.nav-tabs>li.has-validation-error>a.nav-link:focus,.nav-tabs>li.has-validation-error>a.nav-link:hover,.nav.nav-tabs>li.has-validation-error:not(.nav-item)>a:focus:not(.nav-link),.nav.nav-tabs>li.has-validation-error:not(.nav-item)>a:hover:not(.nav-link){color:#fff;background-color:#d64e43;border-color:#bc3429}
-.nav-tabs>li.has-validation-error>a.nav-link:before,.nav.nav-tabs>li.has-validation-error:not(.nav-item)>a:not(.nav-link):before{content:"";vertical-align:middle;-webkit-mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3e%3cg fill='currentColor'%3e%3cpath d='M8 2c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6 2.7-6 6-6m0-1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7z'/%3e%3ccircle cx='8' cy='11' r='1'/%3e%3cpath d='M8.5 9h-1l-.445-4.45A.5.5 0 0 1 7.552 4h.896a.5.5 0 0 1 .497.55L8.5 9z'/%3e%3c/g%3e%3c/svg%3e");mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3e%3cg fill='currentColor'%3e%3cpath d='M8 2c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6 2.7-6 6-6m0-1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7z'/%3e%3ccircle cx='8' cy='11' r='1'/%3e%3cpath d='M8.5 9h-1l-.445-4.45A.5.5 0 0 1 7.552 4h.896a.5.5 0 0 1 .497.55L8.5 9z'/%3e%3c/g%3e%3c/svg%3e");background-color:#fff;background-size:contain;display:inline-block;border-radius:50%;width:14px;height:14px}
-.nav-tabs>li.has-validation-error>a.nav-link.active,.nav.nav-tabs>li.has-validation-error:not(.nav-item)>a.active:not(.nav-link){color:inherit;border:1px solid #ccc;border-bottom-color:#fafafa;background-color:#fafafa}
-.nav-tabs>li.has-validation-error>a.nav-link.active:before,.nav.nav-tabs>li.has-validation-error:not(.nav-item)>a.active:not(.nav-link):before{background-color:#d13a2e;color:#fff}
+.slider-wrapper.slider-vertical{width:auto;margin-bottom:calc(100% - 3.75rem);transform-origin:top left;transform:rotate(-90deg) translate(-100%)}
+.slider-wrapper.slider-vertical .slider{margin:.375rem 0}
.typo3-TCEforms{width:100%}
+.typo3-TCEforms .nav-tabs{--typo3-nav-tabs-bg:var(--typo3-surface-container-low)}
.sortableHandle{cursor:move!important}
img.t3-tceforms-sysfile-imagepreview{float:var(--typo3-position-start);margin-inline-end:10px;margin-bottom:10px}
.typo3-TCEforms span.typo3-TCEforms-newToken{color:#900;font-weight:700}
@@ -4026,8 +4004,8 @@ textarea.formengine-textarea{resize:none}
.sticky-form-actions{position:sticky;top:0;z-index:2;padding:calc(1rem / 2) 1rem;background:#fff}
.modal-body .sticky-form-actions{margin-inline:calc(var(--bs-modal-padding) * -1);margin-bottom:var(--bs-modal-padding);padding:calc(var(--bs-modal-padding)/ 2) var(--bs-modal-padding);border-bottom:var(--bs-modal-border-width) solid var(--bs-modal-border-color)}
.modal-body .sticky-form-actions:first-child{transform:translateY(calc(var(--bs-modal-padding) * -1));margin-bottom:0}
-.multi-record-selection-actions-wrapper{min-height:26px;margin:.5rem 0}
-.localization-wizard .option{margin-bottom:4px}
+.multi-record-selection-actions-wrapper{min-height:1rem;margin:.5rem 0}
+.localization-wizard .option{margin-bottom:.25rem}
.localization-fieldset{display:grid;gap:calc(var(--typo3-spacing)/ 4)}
.localization-fieldset+.localization-fieldset{margin-top:var(--typo3-spacing)}
.t3-filelist-info-container{display:flex;min-height:300px;flex-direction:column;justify-content:center;align-items:center;margin-top:-2rem}
@@ -4175,8 +4153,8 @@ td.permission-column-group{padding-inline-start:0;width:200px;white-space:nowrap
.t3-page-ce-dropzone.active.t3-page-ce-dropzone-possible{--pagemodule-dropzone-bg:var(--pagemodule-dropzone-possible-bg);z-index:298}
.element-preview a{color:inherit}
.element-preview-header:empty{display:none}
-.element-preview-header-status{font-size:10.5px;opacity:.5}
-.element-preview-header-date{font-size:10.5px}
+.element-preview-header-status{font-size:.65625rem;opacity:.5}
+.element-preview-header-date{font-size:.65625rem}
.element-preview-header-header{font-weight:700}
.element-preview-header-subheader{font-weight:700}
.element-preview-header+.element-preview-content{margin-top:.5rem}
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/form-engine-validation.js b/typo3/sysext/backend/Resources/Public/JavaScript/form-engine-validation.js
index 94a81af23826..aee8e2456a3f 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/form-engine-validation.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/form-engine-validation.js
@@ -10,4 +10,4 @@
*
* The TYPO3 project - inspiring people to share!
*/
-import $ from"jquery";import{DateTime}from"luxon";import Md5 from"@typo3/backend/hashing/md5.js";import Modal from"@typo3/backend/modal.js";import Severity from"@typo3/backend/severity.js";import Utility from"@typo3/backend/utility.js";import RegularEvent from"@typo3/core/event/regular-event.js";import DomHelper from"@typo3/backend/utility/dom-helper.js";import{selector}from"@typo3/core/literals.js";import SubmitInterceptor from"@typo3/backend/form/submit-interceptor.js";export default(function(){const FormEngineValidation={rulesSelector:"[data-formengine-validation-rules]",inputSelector:"[data-formengine-input-params]",markerSelector:".t3js-formengine-validation-marker",groupFieldHiddenElement:".t3js-formengine-field-group input[type=hidden]",relatedFieldSelector:"[data-relatedfieldname]",errorClass:"has-error",lastYear:0,lastDate:0,lastTime:0,passwordDummy:"********"};let formEngineFormElement;const customEvaluations=new Map;return FormEngineValidation.initialize=function(e){formEngineFormElement=e,formEngineFormElement.querySelectorAll("."+FormEngineValidation.errorClass).forEach((e=>e.classList.remove(FormEngineValidation.errorClass))),FormEngineValidation.initializeInputFields(),new RegularEvent("change",((e,n)=>{FormEngineValidation.validateField(n),FormEngineValidation.markFieldAsChanged(n)})).delegateTo(formEngineFormElement,FormEngineValidation.rulesSelector),FormEngineValidation.registerSubmitCallback(),FormEngineValidation.validate()},FormEngineValidation.initializeInputFields=function(){formEngineFormElement.querySelectorAll(FormEngineValidation.inputSelector).forEach((e=>{const n=JSON.parse(e.dataset.formengineInputParams).field,t=formEngineFormElement.querySelector(selector`[name="${n}"]`);"formengineInputInitialized"in e.dataset||(t.dataset.config=e.dataset.formengineInputParams,FormEngineValidation.initializeInputField(n))}))},FormEngineValidation.initializeInputField=function(e){const n=formEngineFormElement.querySelector(selector`[name="${e}"]`),t=formEngineFormElement.querySelector(selector`[data-formengine-input-name="${e}"]`);if(void 0!==n.dataset.config){const e=JSON.parse(n.dataset.config),a=FormEngineValidation.formatByEvals(e,n.value);a.length&&(t.value=a)}new RegularEvent("change",(()=>{FormEngineValidation.updateInputField(t.dataset.formengineInputName)})).bindTo(t),t.dataset.formengineInputInitialized="true"},FormEngineValidation.registerCustomEvaluation=function(e,n){customEvaluations.has(e)||customEvaluations.set(e,n)},FormEngineValidation.formatByEvals=function(e,n){if(void 0!==e.evalList){const t=Utility.trimExplode(",",e.evalList);for(const e of t)n=FormEngineValidation.formatValue(e,n)}return n},FormEngineValidation.formatValue=function(e,n){let t="";switch(e){case"date":case"datetime":case"time":case"timesec":if(""===n||"0"===n)return"";const e=DateTime.fromISO(String(n),{zone:"utc"});if(e.isValid)return e.toISO({suppressMilliseconds:!0});const a="number"==typeof n?n:parseInt(n,10);if(isNaN(a))t="";else{t=DateTime.fromSeconds(a,{zone:"utc"}).toISO({suppressMilliseconds:!0})}break;case"password":t=n?FormEngineValidation.passwordDummy:"";break;default:t=n.toString()}return t},FormEngineValidation.updateInputField=function(e){const n=formEngineFormElement.querySelector(selector`[name="${e}"]`),t=formEngineFormElement.querySelector(selector`[data-formengine-input-name="${e}"]`);if(void 0!==n.dataset.config){const e=JSON.parse(n.dataset.config),a=FormEngineValidation.processByEvals(e,t.value),i=FormEngineValidation.formatByEvals(e,a);n.value!==a&&(n.disabled&&n.dataset.enableOnModification&&(n.disabled=!1),n.value=a,n.dispatchEvent(new Event("change")),t.value=i)}},FormEngineValidation.validateField=function(e,n){if(e instanceof $&&(console.warn("Passing a jQuery element to FormEngineValidation.validateField() is deprecated and will be removed in TYPO3 v14."),console.trace(),e=e.get(0)),!(e instanceof HTMLElement))return n;if(n=n||e.value||"",void 0===e.dataset.formengineValidationRules)return n;const t=JSON.parse(e.dataset.formengineValidationRules);let a=!1,i=0;const o=n;let r,l,s;Array.isArray(n)||(n=n.trimStart());for(const o of t){if(a)break;switch(o.type){case"required":""===n&&(a=!0,e.closest(FormEngineValidation.markerSelector).classList.add(FormEngineValidation.errorClass));break;case"range":if(""!==n){if((o.minItems||o.maxItems)&&(r=formEngineFormElement.querySelector(selector`[name="${e.dataset.relatedfieldname}"]`),i=null!==r?Utility.trimExplode(",",r.value).length:parseInt(e.value,10),void 0!==o.minItems&&(l=1*o.minItems,!isNaN(l)&&i<l&&(a=!0)),void 0!==o.maxItems&&(s=1*o.maxItems,!isNaN(s)&&i>s&&(a=!0))),void 0!==o.lower){const e=1*o.lower;!isNaN(e)&&parseInt(n,10)<e&&(a=!0)}if(void 0!==o.upper){const e=1*o.upper;!isNaN(e)&&parseInt(n,10)>e&&(a=!0)}}break;case"select":case"category":(o.minItems||o.maxItems)&&(r=formEngineFormElement.querySelector(selector`[name="${e.dataset.relatedfieldname}"]`),i=null!==r?Utility.trimExplode(",",r.value).length:e instanceof HTMLSelectElement?e.querySelectorAll("option:checked").length:e.querySelectorAll("input[value]:checked").length,void 0!==o.minItems&&(l=1*o.minItems,!isNaN(l)&&i<l&&(a=!0)),void 0!==o.maxItems&&(s=1*o.maxItems,!isNaN(s)&&i>s&&(a=!0)));break;case"group":case"folder":case"inline":(o.minItems||o.maxItems)&&(i=Utility.trimExplode(",",e.value).length,void 0!==o.minItems&&(l=1*o.minItems,!isNaN(l)&&i<l&&(a=!0)),void 0!==o.maxItems&&(s=1*o.maxItems,!isNaN(s)&&i>s&&(a=!0)));break;case"min":(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)&&e.value.length>0&&e.value.length<e.minLength&&(a=!0)}}const m=!a,c=e.closest(FormEngineValidation.markerSelector);return null!==c&&c.classList.toggle(FormEngineValidation.errorClass,!m),FormEngineValidation.markParentTab(e,m),formEngineFormElement.dispatchEvent(new CustomEvent("t3-formengine-postfieldvalidation",{cancelable:!1,bubbles:!0})),o},FormEngineValidation.processByEvals=function(e,n){if(void 0!==e.evalList){const t=Utility.trimExplode(",",e.evalList);for(const a of t)n=FormEngineValidation.processValue(a,n,e)}return n},FormEngineValidation.processValue=function(e,n,t){let a="",i="",o=0,r=n;switch(e){case"alpha":case"num":case"alphanum":case"alphanum_x":for(a="",o=0;o<n.length;o++){const t=n.substr(o,1);let i="_"===t||"-"===t,r=t>="a"&&t<="z"||t>="A"&&t<="Z",l=t>="0"&&t<="9";switch(e){case"alphanum":i=!1;break;case"alpha":l=!1,i=!1;break;case"num":r=!1,i=!1}(r||l||i)&&(a+=t)}a!==n&&(r=a);break;case"is_in":if(t.is_in){i=""+n,t.is_in=t.is_in.replace(/[-[\]{}()*+?.,\\^$|#\s]/g,"\\$&");const e=new RegExp("[^"+t.is_in+"]+","g");a=i.replace(e,"")}else a=i;r=a;break;case"nospace":r=(""+n).replace(/ /g,"");break;case"md5":""!==n&&(r=Md5.hash(n));break;case"upper":r=n.toUpperCase();break;case"lower":r=n.toLowerCase();break;case"integer":""!==n&&(r=FormEngineValidation.parseInt(n));break;case"decimal":""!==n&&(r=FormEngineValidation.parseDouble(n));break;case"trim":r=String(n).trim();break;case"time":case"timesec":if(""!==n){r=DateTime.fromISO(n,{zone:"utc"}).set({year:1970,month:1,day:1}).toISO({suppressMilliseconds:!0})}break;case"year":if(""!==n){let e=parseInt(n,10);isNaN(e)&&(e=(new Date).getUTCFullYear()),r=e.toString(10)}break;case"null":case"password":break;default:customEvaluations.has(e)?r=customEvaluations.get(e).call(null,n):"object"==typeof TBE_EDITOR&&void 0!==TBE_EDITOR.customEvalFunctions&&"function"==typeof TBE_EDITOR.customEvalFunctions[e]&&(r=TBE_EDITOR.customEvalFunctions[e](n))}return r},FormEngineValidation.validate=function(e){(void 0===e||e instanceof Document)&&formEngineFormElement.querySelectorAll(FormEngineValidation.markerSelector+", .t3js-tabmenu-item").forEach((e=>{e.classList.remove(FormEngineValidation.errorClass,"has-validation-error")}));const n=e||document;for(const e of n.querySelectorAll(FormEngineValidation.rulesSelector))if(null===e.closest(".t3js-flex-section-deleted, .t3js-inline-record-deleted, .t3js-file-reference-deleted")){let n=!1;const t=e.value,a=FormEngineValidation.validateField(e,t);if(Array.isArray(a)&&Array.isArray(t)){if(a.length!==t.length)n=!0;else for(let e=0;e<a.length;e++)if(a[e]!==t[e]){n=!0;break}}else a.length&&t!==a&&(n=!0);n&&(e.disabled&&e.dataset.enableOnModification&&(e.disabled=!1),e.value=a)}},FormEngineValidation.markFieldAsChanged=function(e){if(e instanceof $&&(console.warn("Passing a jQuery element to FormEngineValidation.markFieldAsChanged() is deprecated and will be removed in TYPO3 v14."),console.trace(),e=e.get(0)),!(e instanceof HTMLElement))return;const n=e.closest(".t3js-formengine-palette-field");null!==n&&n.classList.add("has-change")},FormEngineValidation.parseInt=function(e){if(!e)return 0;const n=parseInt(""+e,10);return isNaN(n)?0:n},FormEngineValidation.parseDouble=function(e,n=2){let t=""+e;t=t.replace(/[^0-9,.-]/g,"");const a=t.startsWith("-");t=t.replace(/-/g,""),t=t.replace(/,/g,"."),-1===t.indexOf(".")&&(t+=".0");const i=t.split("."),o=i.pop();let r=Number(i.join("")+"."+o);return a&&(r*=-1),t=r.toFixed(n),t},FormEngineValidation.pol=function(foreign,value){return eval(("-"==foreign?"-":"")+value)},FormEngineValidation.markParentTab=function(e,n){DomHelper.parents(e,".tab-pane").forEach((e=>{n&&(n=null===e.querySelector(".has-error"));const t=e.id;formEngineFormElement.querySelector('a[href="#'+t+'"]').closest(".t3js-tabmenu-item").classList.toggle("has-validation-error",!n)}))},FormEngineValidation.registerSubmitCallback=function(){new SubmitInterceptor(formEngineFormElement).addPreSubmitCallback((()=>{if(null===document.querySelector("."+FormEngineValidation.errorClass))return!0;const e=Modal.confirm(TYPO3.lang.alert||"Alert",TYPO3.lang["FormEngine.fieldsMissing"],Severity.error,[{text:TYPO3.lang["button.ok"]||"OK",active:!0,btnClass:"btn-default",name:"ok"}]);return e.addEventListener("button.clicked",(()=>e.hideModal())),!1}))},FormEngineValidation}());
\ No newline at end of file
+import $ from"jquery";import{DateTime}from"luxon";import Md5 from"@typo3/backend/hashing/md5.js";import Modal from"@typo3/backend/modal.js";import Severity from"@typo3/backend/severity.js";import Utility from"@typo3/backend/utility.js";import RegularEvent from"@typo3/core/event/regular-event.js";import DomHelper from"@typo3/backend/utility/dom-helper.js";import{selector}from"@typo3/core/literals.js";import SubmitInterceptor from"@typo3/backend/form/submit-interceptor.js";export default(function(){const FormEngineValidation={rulesSelector:"[data-formengine-validation-rules]",inputSelector:"[data-formengine-input-params]",markerSelector:".t3js-formengine-validation-marker",groupFieldHiddenElement:".t3js-formengine-field-group input[type=hidden]",relatedFieldSelector:"[data-relatedfieldname]",errorClass:"has-error",lastYear:0,lastDate:0,lastTime:0,passwordDummy:"********"};let formEngineFormElement;const customEvaluations=new Map;return FormEngineValidation.initialize=function(e){formEngineFormElement=e,formEngineFormElement.querySelectorAll("."+FormEngineValidation.errorClass).forEach((e=>e.classList.remove(FormEngineValidation.errorClass))),FormEngineValidation.initializeInputFields(),new RegularEvent("change",((e,n)=>{FormEngineValidation.validateField(n),FormEngineValidation.markFieldAsChanged(n)})).delegateTo(formEngineFormElement,FormEngineValidation.rulesSelector),FormEngineValidation.registerSubmitCallback(),FormEngineValidation.validate()},FormEngineValidation.initializeInputFields=function(){formEngineFormElement.querySelectorAll(FormEngineValidation.inputSelector).forEach((e=>{const n=JSON.parse(e.dataset.formengineInputParams).field,t=formEngineFormElement.querySelector(selector`[name="${n}"]`);"formengineInputInitialized"in e.dataset||(t.dataset.config=e.dataset.formengineInputParams,FormEngineValidation.initializeInputField(n))}))},FormEngineValidation.initializeInputField=function(e){const n=formEngineFormElement.querySelector(selector`[name="${e}"]`),t=formEngineFormElement.querySelector(selector`[data-formengine-input-name="${e}"]`);if(void 0!==n.dataset.config){const e=JSON.parse(n.dataset.config),a=FormEngineValidation.formatByEvals(e,n.value);a.length&&(t.value=a)}new RegularEvent("change",(()=>{FormEngineValidation.updateInputField(t.dataset.formengineInputName)})).bindTo(t),t.dataset.formengineInputInitialized="true"},FormEngineValidation.registerCustomEvaluation=function(e,n){customEvaluations.has(e)||customEvaluations.set(e,n)},FormEngineValidation.formatByEvals=function(e,n){if(void 0!==e.evalList){const t=Utility.trimExplode(",",e.evalList);for(const e of t)n=FormEngineValidation.formatValue(e,n)}return n},FormEngineValidation.formatValue=function(e,n){let t="";switch(e){case"date":case"datetime":case"time":case"timesec":if(""===n||"0"===n)return"";const e=DateTime.fromISO(String(n),{zone:"utc"});if(e.isValid)return e.toISO({suppressMilliseconds:!0});const a="number"==typeof n?n:parseInt(n,10);if(isNaN(a))t="";else{t=DateTime.fromSeconds(a,{zone:"utc"}).toISO({suppressMilliseconds:!0})}break;case"password":t=n?FormEngineValidation.passwordDummy:"";break;default:t=n.toString()}return t},FormEngineValidation.updateInputField=function(e){const n=formEngineFormElement.querySelector(selector`[name="${e}"]`),t=formEngineFormElement.querySelector(selector`[data-formengine-input-name="${e}"]`);if(void 0!==n.dataset.config){const e=JSON.parse(n.dataset.config),a=FormEngineValidation.processByEvals(e,t.value),i=FormEngineValidation.formatByEvals(e,a);n.value!==a&&(n.disabled&&n.dataset.enableOnModification&&(n.disabled=!1),n.value=a,n.dispatchEvent(new Event("change")),t.value=i)}},FormEngineValidation.validateField=function(e,n){if(e instanceof $&&(console.warn("Passing a jQuery element to FormEngineValidation.validateField() is deprecated and will be removed in TYPO3 v14."),console.trace(),e=e.get(0)),!(e instanceof HTMLElement))return n;if(n=n||e.value||"",void 0===e.dataset.formengineValidationRules)return n;const t=JSON.parse(e.dataset.formengineValidationRules);let a=!1,i=0;const o=n;let r,l,s;Array.isArray(n)||(n=n.trimStart());for(const o of t){if(a)break;switch(o.type){case"required":""===n&&(a=!0,e.closest(FormEngineValidation.markerSelector).classList.add(FormEngineValidation.errorClass));break;case"range":if(""!==n){if((o.minItems||o.maxItems)&&(r=formEngineFormElement.querySelector(selector`[name="${e.dataset.relatedfieldname}"]`),i=null!==r?Utility.trimExplode(",",r.value).length:parseInt(e.value,10),void 0!==o.minItems&&(l=1*o.minItems,!isNaN(l)&&i<l&&(a=!0)),void 0!==o.maxItems&&(s=1*o.maxItems,!isNaN(s)&&i>s&&(a=!0))),void 0!==o.lower){const e=1*o.lower;!isNaN(e)&&parseInt(n,10)<e&&(a=!0)}if(void 0!==o.upper){const e=1*o.upper;!isNaN(e)&&parseInt(n,10)>e&&(a=!0)}}break;case"select":case"category":(o.minItems||o.maxItems)&&(r=formEngineFormElement.querySelector(selector`[name="${e.dataset.relatedfieldname}"]`),i=null!==r?Utility.trimExplode(",",r.value).length:e instanceof HTMLSelectElement?e.querySelectorAll("option:checked").length:e.querySelectorAll("input[value]:checked").length,void 0!==o.minItems&&(l=1*o.minItems,!isNaN(l)&&i<l&&(a=!0)),void 0!==o.maxItems&&(s=1*o.maxItems,!isNaN(s)&&i>s&&(a=!0)));break;case"group":case"folder":case"inline":(o.minItems||o.maxItems)&&(i=Utility.trimExplode(",",e.value).length,void 0!==o.minItems&&(l=1*o.minItems,!isNaN(l)&&i<l&&(a=!0)),void 0!==o.maxItems&&(s=1*o.maxItems,!isNaN(s)&&i>s&&(a=!0)));break;case"min":(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)&&e.value.length>0&&e.value.length<e.minLength&&(a=!0)}}const m=!a,c=e.closest(FormEngineValidation.markerSelector);return null!==c&&c.classList.toggle(FormEngineValidation.errorClass,!m),FormEngineValidation.markParentTab(e,m),formEngineFormElement.dispatchEvent(new CustomEvent("t3-formengine-postfieldvalidation",{cancelable:!1,bubbles:!0})),o},FormEngineValidation.processByEvals=function(e,n){if(void 0!==e.evalList){const t=Utility.trimExplode(",",e.evalList);for(const a of t)n=FormEngineValidation.processValue(a,n,e)}return n},FormEngineValidation.processValue=function(e,n,t){let a="",i="",o=0,r=n;switch(e){case"alpha":case"num":case"alphanum":case"alphanum_x":for(a="",o=0;o<n.length;o++){const t=n.substr(o,1);let i="_"===t||"-"===t,r=t>="a"&&t<="z"||t>="A"&&t<="Z",l=t>="0"&&t<="9";switch(e){case"alphanum":i=!1;break;case"alpha":l=!1,i=!1;break;case"num":r=!1,i=!1}(r||l||i)&&(a+=t)}a!==n&&(r=a);break;case"is_in":if(t.is_in){i=""+n,t.is_in=t.is_in.replace(/[-[\]{}()*+?.,\\^$|#\s]/g,"\\$&");const e=new RegExp("[^"+t.is_in+"]+","g");a=i.replace(e,"")}else a=i;r=a;break;case"nospace":r=(""+n).replace(/ /g,"");break;case"md5":""!==n&&(r=Md5.hash(n));break;case"upper":r=n.toUpperCase();break;case"lower":r=n.toLowerCase();break;case"integer":""!==n&&(r=FormEngineValidation.parseInt(n));break;case"decimal":""!==n&&(r=FormEngineValidation.parseDouble(n));break;case"trim":r=String(n).trim();break;case"time":case"timesec":if(""!==n){r=DateTime.fromISO(n,{zone:"utc"}).set({year:1970,month:1,day:1}).toISO({suppressMilliseconds:!0})}break;case"year":if(""!==n){let e=parseInt(n,10);isNaN(e)&&(e=(new Date).getUTCFullYear()),r=e.toString(10)}break;case"null":case"password":break;default:customEvaluations.has(e)?r=customEvaluations.get(e).call(null,n):"object"==typeof TBE_EDITOR&&void 0!==TBE_EDITOR.customEvalFunctions&&"function"==typeof TBE_EDITOR.customEvalFunctions[e]&&(r=TBE_EDITOR.customEvalFunctions[e](n))}return r},FormEngineValidation.validate=function(e){(void 0===e||e instanceof Document)&&formEngineFormElement.querySelectorAll(FormEngineValidation.markerSelector+", .t3js-tabmenu-item").forEach((e=>{e.classList.remove(FormEngineValidation.errorClass,"has-validation-error")}));const n=e||document;for(const e of n.querySelectorAll(FormEngineValidation.rulesSelector))if(null===e.closest(".t3js-flex-section-deleted, .t3js-inline-record-deleted, .t3js-file-reference-deleted")){let n=!1;const t=e.value,a=FormEngineValidation.validateField(e,t);if(Array.isArray(a)&&Array.isArray(t)){if(a.length!==t.length)n=!0;else for(let e=0;e<a.length;e++)if(a[e]!==t[e]){n=!0;break}}else a.length&&t!==a&&(n=!0);n&&(e.disabled&&e.dataset.enableOnModification&&(e.disabled=!1),e.value=a)}},FormEngineValidation.markFieldAsChanged=function(e){if(e instanceof $&&(console.warn("Passing a jQuery element to FormEngineValidation.markFieldAsChanged() is deprecated and will be removed in TYPO3 v14."),console.trace(),e=e.get(0)),!(e instanceof HTMLElement))return;const n=e.closest(".t3js-formengine-palette-field");null!==n&&n.classList.add("has-change")},FormEngineValidation.parseInt=function(e){if(!e)return 0;const n=parseInt(""+e,10);return isNaN(n)?0:n},FormEngineValidation.parseDouble=function(e,n=2){let t=""+e;t=t.replace(/[^0-9,.-]/g,"");const a=t.startsWith("-");t=t.replace(/-/g,""),t=t.replace(/,/g,"."),-1===t.indexOf(".")&&(t+=".0");const i=t.split("."),o=i.pop();let r=Number(i.join("")+"."+o);return a&&(r*=-1),t=r.toFixed(n),t},FormEngineValidation.pol=function(foreign,value){return eval(("-"==foreign?"-":"")+value)},FormEngineValidation.markParentTab=function(e,n){DomHelper.parents(e,".tab-pane").forEach((e=>{n&&(n=null===e.querySelector(".has-error"));const t=e.id;formEngineFormElement.querySelector('[data-bs-target="#'+t+'"]').closest(".t3js-tabmenu-item").classList.toggle("has-validation-error",!n)}))},FormEngineValidation.registerSubmitCallback=function(){new SubmitInterceptor(formEngineFormElement).addPreSubmitCallback((()=>{if(null===document.querySelector("."+FormEngineValidation.errorClass))return!0;const e=Modal.confirm(TYPO3.lang.alert||"Alert",TYPO3.lang["FormEngine.fieldsMissing"],Severity.error,[{text:TYPO3.lang["button.ok"]||"OK",active:!0,btnClass:"btn-default",name:"ok"}]);return e.addEventListener("button.clicked",(()=>e.hideModal())),!1}))},FormEngineValidation}());
\ No newline at end of file
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/tabs.js b/typo3/sysext/backend/Resources/Public/JavaScript/tabs.js
index 1b296150c70b..43571b28a87b 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/tabs.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/tabs.js
@@ -10,4 +10,4 @@
*
* The TYPO3 project - inspiring people to share!
*/
-import{Tab}from"bootstrap";import BrowserSession from"@typo3/backend/storage/browser-session.js";import Client from"@typo3/backend/storage/client.js";import DocumentService from"@typo3/core/document-service.js";class Tabs{constructor(){DocumentService.ready().then((()=>{document.querySelectorAll(".t3js-tabs").forEach((e=>{const t=Tabs.receiveActiveTab(e.id);t&&new Tab(document.querySelector('a[href="'+t+'"]')).show();"1"===e.dataset.storeLastTab&&e.addEventListener("show.bs.tab",(e=>{const t=e.currentTarget.id,r=e.target.hash;Tabs.storeActiveTab(t,r)}))}))})),Client.unsetByPrefix("tabs-")}static receiveActiveTab(e){return BrowserSession.get(e)||""}static storeActiveTab(e,t){BrowserSession.set(e,t)}}export default new Tabs;
\ No newline at end of file
+import{Tab}from"bootstrap";import BrowserSession from"@typo3/backend/storage/browser-session.js";import Client from"@typo3/backend/storage/client.js";import DocumentService from"@typo3/core/document-service.js";class Tabs{constructor(){DocumentService.ready().then((()=>{document.querySelectorAll(".t3js-tabs").forEach((e=>{const t=Tabs.receiveActiveTab(e.id);if(t){const e=document.querySelector('[data-bs-target="#'+t+'"]');e&&new Tab(e).show()}"1"===e.dataset.storeLastTab&&e.addEventListener("show.bs.tab",(e=>{const t=e.currentTarget.id,r=e.target.dataset.bsTarget.slice(1);Tabs.storeActiveTab(t,r)}))}))})),Client.unsetByPrefix("tabs-")}static receiveActiveTab(e){return BrowserSession.get(e)||""}static storeActiveTab(e,t){BrowserSession.set(e,t)}}export default new Tabs;
\ No newline at end of file
diff --git a/typo3/sysext/core/Tests/Acceptance/Application/Impexp/ExportCest.php b/typo3/sysext/core/Tests/Acceptance/Application/Impexp/ExportCest.php
index c88539412444..29d9fcaec663 100644
--- a/typo3/sysext/core/Tests/Acceptance/Application/Impexp/ExportCest.php
+++ b/typo3/sysext/core/Tests/Acceptance/Application/Impexp/ExportCest.php
@@ -115,7 +115,7 @@ final class ExportCest extends AbstractCest
$pageTitle = 'staticdata';
$exportPageTitle = 'Export pagetree configuration';
$pageIcon = '//*[text()=\'' . $pageTitle . '\']/../../*[contains(@class, \'node-icon\')]';
- $tabExport = 'a[href="#export-filepreset"]';
+ $tabExport = 'button[data-bs-target="#export-filepreset"]';
$contentExport = '#export-filepreset';
$presetTitle = 'My First Preset';
$inputPresetTitle = 'input[name="tx_impexp[preset][title]"]';
@@ -168,7 +168,7 @@ final class ExportCest extends AbstractCest
$pageTitle = 'staticdata';
$exportPageTitle = 'Export pagetree configuration';
$pageIcon = '//*[text()=\'' . $pageTitle . '\']/../../*[contains(@class, \'node-icon\')]';
- $tabExport = 'a[href="#export-filepreset"]';
+ $tabExport = 'button[data-bs-target="#export-filepreset"]';
$contentExport = '#export-filepreset';
$buttonSaveToFile = 'tx_impexp[save_export]';
@@ -200,7 +200,7 @@ final class ExportCest extends AbstractCest
$beUsergroupTableTitle = 'Backend usergroup';
$listModuleHeader = '.module-docheader';
$listModuleBtnExport = 'a[title="Export"]';
- $tabExport = 'a[href="#export-filepreset"]';
+ $tabExport = 'button[data-bs-target="#export-filepreset"]';
$contentExport = '#export-filepreset';
$buttonSaveToFile = 'tx_impexp[save_export]';
@@ -235,7 +235,7 @@ final class ExportCest extends AbstractCest
$rootPageTitle = 'New TYPO3 site';
$sysLanguageTable = '#recordlist-be_groups';
$sysLanguageIcon = 'tr:first-child button[data-contextmenu-trigger]';
- $tabExport = 'a[href="#export-filepreset"]';
+ $tabExport = 'button[data-bs-target="#export-filepreset"]';
$contentExport = '#export-filepreset';
$buttonSaveToFile = 'tx_impexp[save_export]';
diff --git a/typo3/sysext/core/Tests/Acceptance/Application/Impexp/ImportCest.php b/typo3/sysext/core/Tests/Acceptance/Application/Impexp/ImportCest.php
index c337096351c4..c505b965b9e3 100644
--- a/typo3/sysext/core/Tests/Acceptance/Application/Impexp/ImportCest.php
+++ b/typo3/sysext/core/Tests/Acceptance/Application/Impexp/ImportCest.php
@@ -35,8 +35,8 @@ final class ImportCest extends AbstractCest
private string $inFlashMessages = '.typo3-messages';
private string $contextMenuMore = '#contentMenu0 li.context-menu-item-submenu';
private string $contextMenuImport = '#contentMenu1 li.context-menu-item[data-callback-action=importT3d]';
- private string $tabUpload = 'a[href="#import-upload"]';
- private string $tabMessages = 'a[href="#import-errors"]';
+ private string $tabUpload = 'button[data-bs-target="#import-upload"]';
+ private string $tabMessages = 'button[data-bs-target="#import-errors"]';
private string $inputUploadFile = 'input[type=file]';
private string $checkboxOverwriteFile = 'input#checkOverwriteExistingFiles';
private string $buttonUploadFile = '_upload';
diff --git a/typo3/sysext/core/Tests/Acceptance/Application/Impexp/UsersCest.php b/typo3/sysext/core/Tests/Acceptance/Application/Impexp/UsersCest.php
index 055379584ba4..6808b530f5fa 100644
--- a/typo3/sysext/core/Tests/Acceptance/Application/Impexp/UsersCest.php
+++ b/typo3/sysext/core/Tests/Acceptance/Application/Impexp/UsersCest.php
@@ -33,7 +33,7 @@ final class UsersCest extends AbstractCest
private string $contextMenuExport = '#contentMenu1 li.context-menu-item[data-callback-action=exportT3d]';
private string $contextMenuImport = '#contentMenu1 li.context-menu-item[data-callback-action=importT3d]';
private string $buttonViewPage = 'span[data-identifier="actions-view-page"]';
- private string $tabUpload = 'a[href="#import-upload"]';
+ private string $tabUpload = 'button[data-bs-target="#import-upload"]';
private string $checkboxForceAllUids = 'input#checkForce_all_UIDS';
public function _before(ApplicationTester $I): void
@@ -199,7 +199,7 @@ final class UsersCest extends AbstractCest
$I->waitForText('Backend user groups');
$I->click('//table/tbody/tr[descendant::button[@data-contextmenu-uid="' . $userGroupId . '"]]/td[2]/a');
$I->waitForElementVisible('#EditDocumentController');
- $I->click('//form[@id="EditDocumentController"]//ul/li[3]/a');
+ $I->click('//form[@id="EditDocumentController"]//ul/li[3]/button');
foreach ($modAccessByName as $modName => $modAccess) {
if ((bool)$modAccess) {
@@ -232,7 +232,7 @@ final class UsersCest extends AbstractCest
$I->waitForElement('#typo3-backend-user-list');
$I->click('//table[@id="typo3-backend-user-list"]/tbody/tr[descendant::button[@data-contextmenu-uid="' . $userId . '"]]//a[@title="Edit"]');
$I->waitForElement('#EditDocumentController');
- $I->click('//form[@id="EditDocumentController"]//ul/li[5]/a');
+ $I->click('//form[@id="EditDocumentController"]//ul/li[5]/button');
$I->waitForElementVisible($codeMirrorSelector);
$I->executeJS("document.querySelector('" . $codeMirrorSelector . "').setContent('" . $userTsConfig . "')");
$I->click($this->inModuleHeader . ' .btn[title="Save"]');
diff --git a/typo3/sysext/core/Tests/Acceptance/Application/RecordList/RecordDownloadWithPresetCest.php b/typo3/sysext/core/Tests/Acceptance/Application/RecordList/RecordDownloadWithPresetCest.php
index ab7fcd916ede..1c42925af567 100644
--- a/typo3/sysext/core/Tests/Acceptance/Application/RecordList/RecordDownloadWithPresetCest.php
+++ b/typo3/sysext/core/Tests/Acceptance/Application/RecordList/RecordDownloadWithPresetCest.php
@@ -97,7 +97,7 @@ final class RecordDownloadWithPresetCest
$I->click('//table[@id="typo3-backend-user-list"]/tbody/tr[descendant::button[@data-contextmenu-uid="' . $userId . '"]]//a[@title="Edit"]');
$I->waitForElement('#EditDocumentController');
// This was "li[5]" in UsersCest. Don't know why, for me the TSconfig is on the third tab...
- $I->click('//form[@id="EditDocumentController"]//ul/li[3]/a');
+ $I->click('//form[@id="EditDocumentController"]//ul/li[3]/button');
$I->waitForElementVisible($codeMirrorSelector);
$I->executeJS("document.querySelector('" . $codeMirrorSelector . "').setContent('" . $userTsConfig . "')");
$I->click($this->inModuleHeader . ' .btn[title="Save"]');
diff --git a/typo3/sysext/impexp/Resources/Private/Templates/Export.html b/typo3/sysext/impexp/Resources/Private/Templates/Export.html
index 9cd85669d586..2a5ece9ab35f 100644
--- a/typo3/sysext/impexp/Resources/Private/Templates/Export.html
+++ b/typo3/sysext/impexp/Resources/Private/Templates/Export.html
@@ -30,26 +30,54 @@
<input type="hidden" name="id" value="{id}" />
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="nav-item">
- <a class="nav-link text-capitalize active" href="#export-configuration" aria-controls="export-configuration" role="tab" data-bs-toggle="tab">
+ <button
+ type="button"
+ class="nav-link active"
+ data-bs-toggle="tab"
+ data-bs-target="#export-configuration"
+ aria-controls="export-configuration"
+ role="tab"
+ >
<f:translate key="LLL:EXT:impexp/Resources/Private/Language/locallang.xlf:tableselec_configuration" />
- </a>
+ </button>
</li>
<li role="presentation" class="nav-item">
- <a class="nav-link text-capitalize" href="#export-filepreset" aria-controls="export-filepreset" role="tab" data-bs-toggle="tab">
+ <button
+ type="button"
+ class="nav-link"
+ data-bs-toggle="tab"
+ data-bs-target="#export-filepreset"
+ aria-controls="export-filepreset"
+ role="tab"
+ >
<f:translate key="LLL:EXT:impexp/Resources/Private/Language/locallang.xlf:exportdata_filePreset" />
- </a>
+ </button>
</li>
<li role="presentation" class="nav-item">
- <a class="nav-link text-capitalize" href="#export-advancedoptions" aria-controls="export-advancedoptions" role="tab" data-bs-toggle="tab">
+ <button
+ type="button"
+ class="nav-link"
+ data-bs-toggle="tab"
+ data-bs-target="#export-advancedoptions"
+ aria-controls="export-advancedoptions"
+ role="tab"
+ >
<f:translate key="LLL:EXT:impexp/Resources/Private/Language/locallang.xlf:exportdata_advancedOptions" />
- </a>
+ </button>
</li>
<f:if condition="{errors -> f:count()} > 0">
<li role="presentation" class="nav-item">
- <a class="nav-link text-capitalize" href="#export-errors" aria-controls="export-errors" role="tab" data-bs-toggle="tab">
+ <button
+ type="button"
+ class="nav-link"
+ data-bs-toggle="tab"
+ data-bs-target="#export-errors"
+ aria-controls="export-errors"
+ role="tab"
+ >
<f:translate key="LLL:EXT:impexp/Resources/Private/Language/locallang.xlf:exportdata_messages" />
<core:icon identifier="status-dialog-warning" />
- </a>
+ </button>
</li>
</f:if>
</ul>
diff --git a/typo3/sysext/impexp/Resources/Private/Templates/Import.html b/typo3/sysext/impexp/Resources/Private/Templates/Import.html
index bd1a487f6ca9..87cd99ae0af1 100644
--- a/typo3/sysext/impexp/Resources/Private/Templates/Import.html
+++ b/typo3/sysext/impexp/Resources/Private/Templates/Import.html
@@ -30,30 +30,58 @@
<input type="hidden" name="id" value="{id}" />
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="nav-item">
- <a class="nav-link text-capitalize active" href="#import-import" aria-controls="import-import" role="tab" data-bs-toggle="tab">
+ <button
+ type="button"
+ class="nav-link active"
+ data-bs-toggle="tab"
+ data-bs-target="#import-import"
+ aria-controls="import-import"
+ role="tab"
+ >
<f:translate key="LLL:EXT:impexp/Resources/Private/Language/locallang.xlf:importdata_import" />
- </a>
+ </button>
</li>
<f:if condition="{importFolder}">
<li role="presentation" class="nav-item">
- <a class="nav-link text-capitalize" href="#import-upload" aria-controls="import-upload" role="tab" data-bs-toggle="tab">
+ <button
+ type="button"
+ class="nav-link"
+ data-bs-toggle="tab"
+ data-bs-target="#import-upload"
+ aria-controls="import-upload"
+ role="tab"
+ >
<f:translate key="LLL:EXT:impexp/Resources/Private/Language/locallang.xlf:importdata_upload" />
- </a>
+ </button>
</li>
</f:if>
<f:if condition="{import.metaData}">
<li role="presentation" class="nav-item">
- <a class="nav-link text-capitalize" href="#import-metadata" aria-controls="import-metadata" role="tab" data-bs-toggle="tab">
+ <button
+ type="button"
+ class="nav-link"
+ data-bs-toggle="tab"
+ data-bs-target="#import-metadata"
+ aria-controls="import-metadata"
+ role="tab"
+ >
<f:translate key="LLL:EXT:impexp/Resources/Private/Language/locallang.xlf:importdata_metaData_1387" />
- </a>
+ </button>
</li>
</f:if>
<f:if condition="{errors -> f:count()} > 0">
<li role="presentation" class="nav-item">
- <a class="nav-link text-capitalize" href="#import-errors" aria-controls="import-errors" role="tab" data-bs-toggle="tab">
+ <button
+ type="button"
+ class="nav-link"
+ data-bs-toggle="tab"
+ data-bs-target="#import-errors"
+ aria-controls="import-errors"
+ role="tab"
+ >
<f:translate key="LLL:EXT:impexp/Resources/Private/Language/locallang.xlf:importdata_messages" />
<core:icon identifier="status-dialog-warning" />
- </a>
+ </button>
</li>
</f:if>
</ul>
diff --git a/typo3/sysext/install/Resources/Private/Partials/Settings/ExtensionConfiguration/ExtensionForm.html b/typo3/sysext/install/Resources/Private/Partials/Settings/ExtensionConfiguration/ExtensionForm.html
index b3ec8c79c9ad..89552b7c1443 100644
--- a/typo3/sysext/install/Resources/Private/Partials/Settings/ExtensionConfiguration/ExtensionForm.html
+++ b/typo3/sysext/install/Resources/Private/Partials/Settings/ExtensionConfiguration/ExtensionForm.html
@@ -30,7 +30,16 @@
<f:for each="{extensionData}" as="category" key="categoryName" iteration="iteration">
<f:if condition="{categoryName}">
<li role="presentation" class="nav-item">
- <a class="nav-link text-capitalize {f:if(condition:'{iteration.isFirst}', then:'active')}" href="#{i:format.noSpace(value:'category-{extensionKey}-{categoryName}')}" aria-controls="category-{extensionKey}-{categoryName}" role="tab" data-bs-toggle="tab">{categoryName}</a>
+ <button
+ type="button"
+ class="nav-link{f:if(condition:'{iteration.isFirst}', then:' active')}"
+ data-bs-toggle="tab"
+ data-bs-target="#{i:format.noSpace(value:'category-{extensionKey}-{categoryName}')}"
+ aria-controls="category-{extensionKey}-{categoryName}"
+ role="tab"
+ >
+ {categoryName}
+ </button>
</li>
</f:if>
</f:for>
diff --git a/typo3/sysext/setup/Resources/Private/Templates/Main.html b/typo3/sysext/setup/Resources/Private/Templates/Main.html
index db12d0920471..d1c5b5ad950e 100644
--- a/typo3/sysext/setup/Resources/Private/Templates/Main.html
+++ b/typo3/sysext/setup/Resources/Private/Templates/Main.html
@@ -36,9 +36,16 @@
<f:for each="{menuItems}" as="item" iteration="iteration">
<f:if condition="{item.content}">
<li role="presentation" class="t3js-tabmenu-item nav-item">
- <a href="#{menuId}-{iteration.cycle}" class="nav-link {f:if(condition: '{iteration.cycle} == 1', then: ' active')}" aria-controls="{menuId}-{iteration.cycle}" role="tab" data-bs-toggle="tab">
+ <button
+ type="button"
+ class="nav-link {f:if(condition: '{iteration.cycle} == 1', then: ' active')}"
+ data-bs-toggle="tab"
+ data-bs-target="#{menuId}-{iteration.cycle}"
+ aria-controls="{menuId}-{iteration.cycle}"
+ role="tab"
+ >
{item.label}
- </a>
+ </button>
</li>
</f:if>
</f:for>
diff --git a/typo3/sysext/styleguide/Classes/Controller/ComponentsController.php b/typo3/sysext/styleguide/Classes/Controller/ComponentsController.php
index 822495d04c00..74853df22295 100644
--- a/typo3/sysext/styleguide/Classes/Controller/ComponentsController.php
+++ b/typo3/sysext/styleguide/Classes/Controller/ComponentsController.php
@@ -54,6 +54,7 @@ final class ComponentsController
'infobox',
'input',
'modal',
+ 'navs',
'notifications',
'pagination',
'panels',
@@ -91,6 +92,7 @@ final class ComponentsController
'infobox' => $this->renderInfoboxView($request),
'input' => $this->renderInputView($request),
'modal' => $this->renderModalView($request),
+ 'navs' => $this->renderNavsView($request),
'notifications' => $this->renderNotificationsView($request),
'pagination' => $this->renderPaginationView($request),
'panels' => $this->renderPanelsView($request),
@@ -254,6 +256,17 @@ final class ComponentsController
return $view->renderResponse('Backend/Components/Modal');
}
+ private function renderNavsView(ServerRequestInterface $request): ResponseInterface
+ {
+ $view = $this->createModuleTemplate($request, 'navs');
+ $view->assignMultiple([
+ 'actions' => $this->allowedActions,
+ 'currentAction' => 'navs',
+ 'routeIdentifier' => 'styleguide_components',
+ ]);
+ return $view->renderResponse('Backend/Components/Navs');
+ }
+
private function renderNotificationsView(ServerRequestInterface $request): ResponseInterface
{
$view = $this->createModuleTemplate($request, 'notifications');
diff --git a/typo3/sysext/styleguide/Resources/Private/Language/locallang.xlf b/typo3/sysext/styleguide/Resources/Private/Language/locallang.xlf
index fd3704b87f62..0cb873ee1bbe 100644
--- a/typo3/sysext/styleguide/Resources/Private/Language/locallang.xlf
+++ b/typo3/sysext/styleguide/Resources/Private/Language/locallang.xlf
@@ -88,6 +88,9 @@
<trans-unit id="action.modal" resname="action.modal">
<source>Modal</source>
</trans-unit>
+ <trans-unit id="action.navs" resname="action.navs">
+ <source>Navs</source>
+ </trans-unit>
<trans-unit id="action.notifications" resname="action.notifications">
<source>Notifications</source>
</trans-unit>
@@ -459,6 +462,24 @@
<source>Severity</source>
</trans-unit>
+ <!-- Component: Navs -->
+ <trans-unit id="component.navs.headline" resname="component.navs.headline">
+ <source>Navs</source>
+ </trans-unit>
+ <trans-unit id="component.navs.basic.headline" resname="component.navs.basic.headline">
+ <source>Basic</source>
+ </trans-unit>
+ <trans-unit id="component.navs.flat.headline" resname="component.navs.flat.headline">
+ <source>Flat</source>
+ </trans-unit>
+ <trans-unit id="component.navs.pills.headline" resname="component.navs.pills.headline">
+ <source>Pills</source>
+ </trans-unit>
+ <trans-unit id="component.navs.tabs.headline" resname="component.navs.tabs.headline">
+ <source>Tabs</source>
+ </trans-unit>
+
+
<!-- Component: Notification -->
<trans-unit id="component.notification.headline" resname="component.notification.headline">
<source>Notifications</source>
diff --git a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Components/Navs.html b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Components/Navs.html
new file mode 100644
index 000000000000..20efb09cb534
--- /dev/null
+++ b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Components/Navs.html
@@ -0,0 +1,129 @@
+<html
+ xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+ xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers"
+ xmlns:sg="http://typo3.org/ns/TYPO3/CMS/Styleguide/ViewHelpers"
+ data-namespace-typo3-fluid="true"
+>
+
+<f:layout name="Module" />
+
+<f:section name="Content">
+
+ <f:render
+ partial="Backend/Navigation"
+ arguments="{
+ currentAction: currentAction,
+ actions: actions,
+ route: routeIdentifier
+ }"
+ />
+
+ <div class="styleguide-content">
+
+ <h1><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:component.navs.headline" /></h1>
+
+ <h2><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:component.navs.basic.headline" /></h2>
+ <sg:example codePreview="true" codeLanguage="html">
+ <ul class="nav">
+ <li class="nav-item">
+ <a class="nav-link active" aria-current="page" href="#">Active</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Link</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Link</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+ </li>
+ </ul>
+ </sg:example>
+
+ <h2><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:component.navs.flat.headline" /></h2>
+ <sg:example codePreview="true" codeLanguage="html">
+ <nav class="nav">
+ <a class="nav-link active" aria-current="page" href="#">Active</a>
+ <a class="nav-link" href="#">Link</a>
+ <a class="nav-link" href="#">Link</a>
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+ </nav>
+ </sg:example>
+
+ <h2><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:component.navs.tabs.headline" /></h2>
+ <sg:example codePreview="true" codeLanguage="html">
+ <div role="tabpanel">
+ <ul class="nav nav-tabs" role="tablist">
+ <li role="presentation">
+ <button
+ type="button"
+ class="nav-link active"
+ title="Tab 1"
+ data-bs-toggle="tab"
+ data-bs-target="#panel-1-<UNIQUEID>"
+ aria-controls="panel-1-<UNIQUEID>"
+ role="tab"
+ >
+ Tab 1
+ </button>
+ </li>
+ <li role="presentation">
+ <button
+ type="button"
+ class="nav-link"
+ title="Tab 2"
+ data-bs-toggle="tab"
+ data-bs-target="#panel-2-<UNIQUEID>"
+ aria-controls="panel-2-<UNIQUEID>"
+ role="tab"
+ >
+ Tab 2
+ </button>
+ </li>
+ </ul>
+ <div class="tab-content">
+ <div role="tabpanel" class="tab-pane active" id="panel-1-<UNIQUEID>">
+ <div class="panel">
+ <div class="panel-body">
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+ sed diam nonumy eirmod tempor invidunt ut labore et dolore
+ magna aliquyam erat, sed diam voluptua. At vero eos et
+ accusam et justo duo dolores.
+ </div>
+ </div>
+ </div>
+ <div role="tabpanel" class="tab-pane" id="panel-2-<UNIQUEID>">
+ <div class="panel">
+ <div class="panel-body">
+ In venenatis consequat tellus, vel luctus nisi sollicitudin
+ ut. Interdum et malesuada fames ac ante ipsum primis in
+ faucibus. Integer dapibus enim viverra quam placerat, eu
+ varius libero elementum. Duis vitae dictum velit.
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </sg:example>
+
+ <h2><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:component.navs.pills.headline" /></h2>
+ <sg:example codePreview="true" codeLanguage="html">
+ <ul class="nav nav-pills">
+ <li class="nav-item">
+ <a class="nav-link active" aria-current="page" href="#">Active</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Link</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Link</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+ </li>
+ </ul>
+ </sg:example>
+
+ </div>
+
+</f:section>
diff --git a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Components/Tab.html b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Components/Tab.html
index 3390f9c8c7da..b93bcc293996 100644
--- a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Components/Tab.html
+++ b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Components/Tab.html
@@ -48,8 +48,6 @@
</div>
</sg:example>
- <hr>
-
<h2><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:section.frontend.headline" /></h2>
<h3><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:section.colorScheme.headline" /></h3>
@@ -93,10 +91,17 @@
</f:section>
<f:section name="tabNavigationItem">
- <li role="presentation" class="t3js-tabmenu-item">
- <a href="#{identifier}-{iterator}"{f:if(condition: '{iterator} == 1', then: ' class="active"')} title="" aria-controls="{identifier}-{iterator}" role="tab" data-bs-toggle="tab">
+ <li role="presentation" class="nav-item t3js-tabmenu-item">
+ <button
+ type="button"
+ class="nav-link{f:if(condition: '{iterator} == 1', then: ' active')}"
+ data-bs-toggle="tab"
+ data-bs-target="#{identifier}-{iterator}"
+ aria-controls="{identifier}-{iterator}"
+ role="tab"
+ >
Tab {iterator}
- </a>
+ </button>
</li>
</f:section>
diff --git a/typo3/sysext/workspaces/Resources/Public/Css/preview.css b/typo3/sysext/workspaces/Resources/Public/Css/preview.css
index 2f447ae2f9c1..3f1b9f234d21 100644
--- a/typo3/sysext/workspaces/Resources/Public/Css/preview.css
+++ b/typo3/sysext/workspaces/Resources/Public/Css/preview.css
@@ -20,12 +20,6 @@
.typo3-topbar-site-logo{padding-top:1px;padding-inline-end:.25em;display:inline-block;vertical-align:top}
.typo3-topbar-site-logo img{display:block;height:22px;width:22px}
.typo3-topbar-site-name{vertical-align:top}
-.typo3-topbar-tabs{margin-inline-end:2em;float:var(--typo3-position-start);position:relative}
-.typo3-topbar-tabs .nav-tabs{overflow:hidden;border-radius:2px;border:none;background:0 0}
-.typo3-topbar-tabs .nav-tabs>li{margin-bottom:0}
-.typo3-topbar-tabs .nav-tabs>li+li{margin-inline-start:0;border-inline-start:1px solid rgba(0,0,0,.5)}
-.typo3-topbar-tabs .nav-tabs>li.active>a{background-color:#fff}
-.typo3-topbar-tabs .nav-tabs>li>a{padding-top:0;padding-bottom:0;line-height:26px;background-color:#ccc;border:none!important;border-radius:0}
.typo3-topbar-workspace-actions{clear:none;float:var(--typo3-position-start)}
.typo3-topbar-workspace-actions .workspace-action{margin-top:0;margin-bottom:0;float:var(--typo3-position-start);margin-inline-end:2em}
@media (max-width:920px){
diff --git a/typo3/sysext/workspaces/Resources/Public/JavaScript/renderable/record-information.js b/typo3/sysext/workspaces/Resources/Public/JavaScript/renderable/record-information.js
index 95ef7b405f7e..b4fb2a58e383 100644
--- a/typo3/sysext/workspaces/Resources/Public/JavaScript/renderable/record-information.js
+++ b/typo3/sysext/workspaces/Resources/Public/JavaScript/renderable/record-information.js
@@ -10,7 +10,7 @@
*
* The TYPO3 project - inspiring people to share!
*/
-var __decorate=function(e,t,r,o){var s,n=arguments.length,i=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,o);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(i=(n<3?s(i):n>3?s(t,r,i):s(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i};import{customElement,property}from"lit/decorators.js";import{html,LitElement,nothing}from"lit";import{unsafeHTML}from"lit/directives/unsafe-html.js";import"@typo3/workspaces/renderable/diff-view.js";import"@typo3/workspaces/renderable/comment-view.js";import"@typo3/workspaces/renderable/history-view.js";let RecordInformationElement=class extends LitElement{constructor(){super(...arguments),this.TYPO3lang=null}createRenderRoot(){return this}render(){return html`
+var __decorate=function(e,t,r,o){var s,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,r,o);else for(var i=e.length-1;i>=0;i--)(s=e[i])&&(a=(n<3?s(a):n>3?s(t,r,a):s(t,r))||a);return n>3&&a&&Object.defineProperty(t,r,a),a};import{customElement,property}from"lit/decorators.js";import{html,LitElement,nothing}from"lit";import{unsafeHTML}from"lit/directives/unsafe-html.js";import"@typo3/workspaces/renderable/diff-view.js";import"@typo3/workspaces/renderable/comment-view.js";import"@typo3/workspaces/renderable/history-view.js";let RecordInformationElement=class extends LitElement{constructor(){super(...arguments),this.TYPO3lang=null}createRenderRoot(){return this}render(){return html`
<div>
<p>${unsafeHTML(this.TYPO3lang.path.replace("{0}",this.record.path_Live))}</p>
<p>${unsafeHTML(this.TYPO3lang.current_step.replace("{0}",this.record.label_Stage).replace("{1}",this.record.stage_position).replace("{2}",this.record.stage_count))}</p>
@@ -45,13 +45,16 @@ var __decorate=function(e,t,r,o){var s,n=arguments.length,i=n<3?t:null===o?o=Obj
</div>
`}renderNavLink(e,t,r=0){return html`
<li class="nav-item" role="presentation">
- <a class="nav-link"
- data-bs-toggle="tab"
- href="${t}"
- role="tab"
- aria-controls="${t}">
+ <button
+ type="button"
+ class="nav-link"
+ data-bs-toggle="tab"
+ data-bs-target="${t}"
+ aria-controls="${t}"
+ role="tab"
+ >
${e}
${r>0?html`<span class="badge">${r}</span>`:nothing}
- </a>
+ </button>
</li>
`}firstUpdated(){this.renderRoot.querySelector(".nav-link").classList.add("active"),this.renderRoot.querySelector(".tab-pane").classList.add("active")}};__decorate([property({type:Object})],RecordInformationElement.prototype,"record",void 0),__decorate([property({type:Object})],RecordInformationElement.prototype,"TYPO3lang",void 0),RecordInformationElement=__decorate([customElement("typo3-workspaces-record-information")],RecordInformationElement);export{RecordInformationElement};
\ No newline at end of file
--
GitLab