@clickhouse/click-ui 0.6.1-rc2 → 0.6.2-rc1

package/dist/esm/click-ui.css

@@ -171,9 +171,9 @@
      this reset a nested Container would inherit an ancestor's value — e.g. a
      parent with `fillHeight` would force `height: 100%` onto every descendant
      Container, and a parent with `grow` would make children flex-grow too.
-     Resetting to the guaranteed-invalid `initial` value keeps each Container's
-     defaults isolated; the `var()` fallbacks below then resolve to the same
-     defaults the styled-components version produced when the prop was unset. */
+     Resetting the variables on `.container` prevents inheritance; using `initial`
+     makes the consuming declarations compute to their initial values when the prop
+     is unset (the `var()` fallbacks below are an extra guard). */
   --container-height: initial;
   --container-min-height: initial;
   --container-max-height: initial;
@@ -623,6 +623,60 @@
   color: var(--click-button-iconButton-color-disabled-text-default);
   cursor: not-allowed;
 }
+.tabs__trigger__JHqK4 {
+  padding: var(--click-tabs-space-y) var(--click-tabs-space-x);
+  border: none;
+  border-bottom: 2px solid var(--click-tabs-basic-color-stroke-default);
+  background-color: var(--click-tabs-basic-color-background-default);
+  color: var(--click-tabs-basic-color-text-default);
+  font: var(--click-tabs-typography-label-default);
+  cursor: pointer;
+  border-top-left-radius: var(--click-tabs-radii-all);
+  border-top-right-radius: var(--click-tabs-radii-all);
+}
+
+.tabs__trigger__JHqK4[data-state='active'] {
+  border-bottom: 2px solid var(--click-tabs-basic-color-stroke-active);
+  color: var(--click-tabs-basic-color-text-active);
+  font: var(--click-tabs-typography-label-active);
+}
+
+.tabs__trigger__JHqK4:hover {
+  border-bottom: 2px solid var(--click-tabs-basic-color-stroke-hover);
+  background-color: var(--click-tabs-basic-color-background-hover);
+  color: var(--click-tabs-basic-color-text-hover);
+  font: var(--click-tabs-typography-label-hover);
+}
+
+.tabs__trigger__JHqK4:hover[data-state='active'] {
+  border-bottom: 2px solid var(--click-tabs-basic-color-stroke-active);
+  font: var(--click-tabs-typography-label-active);
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.tabs__content__O9Cub {
+}
+
+.tabs__triggers-list__9Hz3q {
+  display: flex;
+  border-bottom: 1px solid var(--click-global-color-stroke-default);
+}
+
+.full-width-tabs__VaUSf {
+  width: 100%;
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.full-width-tabs__trigger__LA8iG {
+}
+
+.full-width-tabs__trigger_width_stretched__Q31k- {
+  flex: 1 1 auto;
+}
+
+.full-width-tabs__trigger_width_fixed__U9z-W {
+  width: var(--full-width-tabs-trigger-width);
+}
 .buttongroup__9IkOe {
   display: inline-flex;
   box-sizing: border-box;
@@ -676,6 +730,43 @@
   border-radius: var(--click-button-group-radii-button-borderless-all);
 }
 
+.button_icon-only_default__1hthE {
+  padding: var(--click-button-group-space-icon-default-y)
+    var(--click-button-group-space-icon-default-x);
+  border: 1px solid var(--click-button-group-color-stroke-default);
+}
+
+.button_icon-only_default__1hthE:hover {
+  border-color: var(--click-button-group-color-stroke-hover);
+}
+
+.button_icon-only_default__1hthE[aria-pressed='true'] {
+  border-color: var(--click-button-group-color-stroke-active);
+}
+
+.button_icon-only_default__1hthE:disabled {
+  border-color: var(--click-button-group-color-stroke-disabled);
+}
+
+.button_icon-only_default__1hthE[aria-pressed='true']:disabled {
+  border-color: var(--click-button-group-color-stroke-disabled-active);
+}
+
+.button_icon-only_borderless__04LpP {
+  padding: var(--click-button-group-space-icon-borderless-y)
+    var(--click-button-group-space-icon-borderless-x);
+}
+
+.button__icon__HLIjg {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.button__icon_height_line__fURvB {
+  height: 1lh;
+}
+
 .button_fillwidth__lqIVG {
   flex: 1;
 }
@@ -980,6 +1071,117 @@
     animation: none;
   }
 }
+/* stylelint-disable-next-line block-no-empty -- base block required by BEM */
+.accordion__LVhhv {
+}
+
+.accordion_fill-width__65i1l {
+  width: 100%;
+}
+
+.accordion__trigger__DrpsZ {
+  display: flex;
+  padding: 0;
+  align-items: center;
+  gap: var(--accordion-gap);
+  border: none;
+  background-color: transparent;
+  color: var(--accordion-label-default);
+  font: var(--accordion-font-default);
+}
+
+.accordion__trigger__DrpsZ:active {
+  color: var(--accordion-label-active);
+  font: var(--accordion-font-active);
+}
+
+.accordion__trigger__DrpsZ:hover {
+  color: var(--accordion-label-hover);
+  font: var(--accordion-font-hover);
+  cursor: pointer;
+}
+
+.accordion__trigger_fill-width__b9tJk {
+  width: 100%;
+}
+
+.accordion__trigger_size_sm__kb6zW {
+  --accordion-gap: var(--click-accordion-sm-space-gap);
+  --accordion-font-default: var(--click-accordion-sm-typography-label-default);
+  --accordion-font-hover: var(--click-accordion-sm-typography-label-hover);
+  --accordion-font-active: var(--click-accordion-sm-typography-label-active);
+}
+
+.accordion__trigger_size_md__IkAnv {
+  --accordion-gap: var(--click-accordion-md-space-gap);
+  --accordion-font-default: var(--click-accordion-md-typography-label-default);
+  --accordion-font-hover: var(--click-accordion-md-typography-label-hover);
+  --accordion-font-active: var(--click-accordion-md-typography-label-active);
+}
+
+.accordion__trigger_size_lg__t3GzX {
+  --accordion-gap: var(--click-accordion-lg-space-gap);
+  --accordion-font-default: var(--click-accordion-lg-typography-label-default);
+  --accordion-font-hover: var(--click-accordion-lg-typography-label-hover);
+  --accordion-font-active: var(--click-accordion-lg-typography-label-active);
+}
+
+.accordion__trigger_color_default__q9fX5 {
+  --accordion-label-default: var(--click-accordion-color-default-label-default);
+  --accordion-label-hover: var(--click-accordion-color-default-label-hover);
+  --accordion-label-active: var(--click-accordion-color-default-label-active);
+}
+
+.accordion__trigger_color_link__Fu45s {
+  --accordion-label-default: var(--click-accordion-color-link-label-default);
+  --accordion-label-hover: var(--click-accordion-color-link-label-hover);
+  --accordion-label-active: var(--click-accordion-color-link-label-active);
+}
+
+.accordion__icon-wrapper__DCanu {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: transform 200ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+
+.accordion__trigger__DrpsZ[data-state='open'] .accordion__icon-wrapper__DCanu {
+  transform: rotate(90deg);
+}
+
+.accordion__icons-wrapper__qwRRg {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* stylelint-disable no-descending-specificity -- the SidebarAccordion overrides
+   intentionally come last to mirror the original `styled(Accordion)` block, whose
+   rules were emitted after the base trigger/icon-wrapper styles. */
+.accordion_sidebar__siNyk .accordion__trigger__DrpsZ {
+  gap: var(--click-sidebar-navigation-item-default-space-gap);
+}
+
+.accordion_sidebar__siNyk p {
+  margin: 0;
+}
+
+.accordion_sidebar__siNyk .accordion__icon-wrapper__DCanu {
+  visibility: hidden;
+}
+
+.accordion_sidebar__siNyk:hover .accordion__icon-wrapper__DCanu {
+  visibility: revert;
+}
+
+.accordion_sidebar__siNyk:active .accordion__icon-wrapper__DCanu {
+  visibility: revert;
+}
+
+.accordion_sidebar__siNyk .accordion__trigger__DrpsZ[data-state='open'] .accordion__icon-wrapper__DCanu {
+  visibility: revert;
+}
+/* stylelint-enable no-descending-specificity */
 .spacer__okdOd {
   display: flex;
   background: transparent;
@@ -1008,6 +1210,175 @@
 .spacer_size_xxl__upvXv {
   padding: var(--click-spacer-horizontal-space-y-xxl) var(--click-spacer-horizontal-space-x-all);
 }
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconBackground) */
+
+.alert__7cYyI {
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+  justify-content: start;
+  border-radius: var(--click-alert-radii-end);
+  background-color: var(--click-alert-color-background-neutral);
+  color: var(--click-alert-color-text-neutral);
+}
+
+.alert_type_default__PnVyJ {
+  justify-content: start;
+  border-radius: var(--click-alert-radii-end);
+}
+
+.alert_type_banner__NjYrK {
+  justify-content: center;
+  border-radius: 0;
+}
+
+.alert_state_neutral__655E4 {
+  background-color: var(--click-alert-color-background-neutral);
+  color: var(--click-alert-color-text-neutral);
+}
+
+.alert_state_success__VUtee {
+  background-color: var(--click-alert-color-background-success);
+  color: var(--click-alert-color-text-success);
+}
+
+.alert_state_warning__kNUTL {
+  background-color: var(--click-alert-color-background-warning);
+  color: var(--click-alert-color-text-warning);
+}
+
+.alert_state_danger__DLuZk {
+  background-color: var(--click-alert-color-background-danger);
+  color: var(--click-alert-color-text-danger);
+}
+
+.alert_state_info__-2HHz {
+  background-color: var(--click-alert-color-background-info);
+  color: var(--click-alert-color-text-info);
+}
+
+.alert__icon-wrapper__q9T-7 {
+  display: flex;
+  align-items: center;
+  background-color: var(--click-alert-color-iconBackground-neutral);
+  color: var(--click-alert-color-iconForeground-neutral);
+}
+
+.alert__icon-wrapper_state_neutral__gIGl5 {
+  background-color: var(--click-alert-color-iconBackground-neutral);
+  color: var(--click-alert-color-iconForeground-neutral);
+}
+
+.alert__icon-wrapper_state_success__9C1yD {
+  background-color: var(--click-alert-color-iconBackground-success);
+  color: var(--click-alert-color-iconForeground-success);
+}
+
+.alert__icon-wrapper_state_warning__oJByv {
+  background-color: var(--click-alert-color-iconBackground-warning);
+  color: var(--click-alert-color-iconForeground-warning);
+}
+
+.alert__icon-wrapper_state_danger__afPBa {
+  background-color: var(--click-alert-color-iconBackground-danger);
+  color: var(--click-alert-color-iconForeground-danger);
+}
+
+.alert__icon-wrapper_state_info__YI3qz {
+  background-color: var(--click-alert-color-iconBackground-info);
+  color: var(--click-alert-color-iconForeground-info);
+}
+
+.alert__icon-wrapper_size_small__E4NZL {
+  padding: var(--click-alert-small-space-y) 0 var(--click-alert-small-space-y)
+    var(--click-alert-small-space-x);
+}
+
+.alert__icon-wrapper_size_medium__3bDZN {
+  padding: var(--click-alert-medium-space-y) 0 var(--click-alert-medium-space-y)
+    var(--click-alert-medium-space-x);
+}
+
+/* The styled-components original emitted `background-color: none` for banners,
+   which is an invalid value the browser drops, leaving the icon wrapper
+   transparent. `transparent` reproduces that rendering exactly. */
+.alert__icon-wrapper_type_banner__4Zl-g {
+  background-color: transparent;
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.alert__icon__2dyva {
+}
+
+.alert__icon_size_small__BGX9V {
+  width: var(--click-alert-small-icon-width);
+  height: var(--click-alert-small-icon-height);
+}
+
+.alert__icon_size_medium__-9nLT {
+  width: var(--click-alert-medium-icon-width);
+  height: var(--click-alert-medium-icon-height);
+}
+
+.alert__text-wrapper__-KJUV {
+  display: flex;
+  /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated -- preserves the styled-components original verbatim for byte-for-byte parity */
+  word-break: break-word;
+  flex-flow: column;
+}
+
+.alert__text-wrapper_size_small__Ahm-8 {
+  padding: var(--click-alert-small-space-y) var(--click-alert-small-space-x);
+  gap: var(--click-alert-small-space-gap);
+}
+
+.alert__text-wrapper_size_medium__FIX1N {
+  padding: var(--click-alert-medium-space-y) var(--click-alert-medium-space-x);
+  gap: var(--click-alert-medium-space-gap);
+}
+
+.alert__text-wrapper__-KJUV a,
+.alert__text-wrapper__-KJUV a:focus,
+.alert__text-wrapper__-KJUV a:visited,
+.alert__text-wrapper__-KJUV a:hover {
+  color: inherit;
+  font: inherit;
+  text-decoration: underline;
+}
+
+.alert__title__R9v8v {
+  margin: 0;
+}
+
+.alert__title_size_small__UngXF {
+  font: var(--click-alert-small-typography-title-default);
+}
+
+.alert__title_size_medium__Uqu2N {
+  font: var(--click-alert-medium-typography-title-default);
+}
+
+.alert__text__-MlWp {
+  margin: 0;
+}
+
+.alert__text_size_small__7fH-5 {
+  font: var(--click-alert-small-typography-text-default);
+}
+
+.alert__text_size_medium__-2r2Z {
+  font: var(--click-alert-medium-typography-text-default);
+}
+
+.alert__dismiss__btduW {
+  display: flex;
+  margin-left: auto;
+  align-items: center;
+  border: none;
+  background-color: transparent;
+  color: inherit;
+  cursor: pointer;
+}
 .separator__mz39H[data-orientation='horizontal'] {
   width: 100%;
   border-top: 0.0625rem solid var(--click-separator-color-stroke-default);
@@ -2026,6 +2397,103 @@ div:active + .topbadge__E79OZ {
   cursor: not-allowed;
 }
 /* stylelint-enable no-descending-specificity */
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. opaqueBackground) */
+.trigger__bbzuV {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
+     keyword on `width` is widely supported on evergreen browsers; the original
+     rule used the same value. */
+  width: fit-content;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+@keyframes overlay-show__YkYqH {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes content-show__V3LjD {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+.overlay__6zjBZ {
+  position: fixed;
+  inset: 0;
+  background-color: var(--click-dialog-color-opaqueBackground-default);
+  animation: overlay-show__YkYqH 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.content__eXA1D {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 75%;
+  max-width: 670px;
+  max-height: 75%;
+  overflow: auto;
+  border: 1px solid var(--click-global-color-stroke-default);
+  border-radius: var(--click-dialog-radii-all);
+  background: var(--click-dialog-color-background-default);
+  outline: none;
+  box-shadow: var(--click-dialog-shadow-default);
+  transform: translate(-50%, -50%);
+  animation: content-show__V3LjD 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  padding-block: var(--click-dialog-space-y);
+  padding-inline: var(--click-dialog-space-x);
+}
+
+.content_reduce-padding__DYRs6 {
+  padding-block: var(--sizes-4);
+  padding-inline: var(--sizes-4);
+}
+
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+   required for browser compatibility per .browserslistrc */
+@media (max-width: 640px) {
+  .content__eXA1D {
+    width: 100%;
+    max-height: 100%;
+    border-radius: 0;
+  }
+}
+
+.title-area__cF92Z {
+  display: flex;
+  min-height: var(--sizes-9); /* 32px */
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title-area_only-close__PFiEJ {
+  justify-content: flex-end;
+}
+
+.title__glVA6 {
+  margin: 0;
+  padding: 0;
+  font: var(--click-dialog-typography-title-default);
+}
+
+.description__6Bsa9 {
+  margin: 0;
+  padding: 0;
+  color: var(--click-dialog-color-description-default);
+  font: var(--click-dialog-typography-description-default);
+}
 .progressbar__21KMf {
   display: flex;
   min-height: 2px;
@@ -2150,6 +2618,12 @@ div:active + .topbadge__E79OZ {
 .progressclosebutton_dismissable__p5mDJ {
   visibility: visible;
 }
+.hover-card__trigger__tMcTR {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
+     keyword on `width` is widely supported on evergreen browsers; the original
+     styled-components rule used the same value. */
+  width: fit-content;
+}
 .link__Ly-e3 {
   display: inline-flex;
   margin: 0;
@@ -2270,21 +2744,547 @@ div:active + .topbadge__E79OZ {
   --link-font: var(--typography-styles-product-text-mono-lg);
 }
 
-/* The inner Icon receives .external-icon via className. The original used a
-   descendant selector inside IconWrapper; here we pass the scoped class
-   straight to the Icon so the selector stays a single class with the same
-   effective specificity. */
-.external-icon_size_xs__hRWrg,
-.external-icon_size_sm__QFJoc {
+/* The inner Icon is a `link__icon` element — it receives the scoped class via
+   className. The original used a descendant selector inside IconWrapper; here we
+   pass the scoped class straight to the Icon so the selector stays a single
+   class with the same effective specificity. */
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.link__icon__El8JR {
+}
+
+.link__icon_size_xs__qMUN-,
+.link__icon_size_sm__d2ZIU {
   width: var(--click-link-icon-size-sm-width);
   height: var(--click-link-icon-size-sm-height);
 }
 
-.external-icon_size_md__-bbPt,
-.external-icon_size_lg__XGkpl {
+.link__icon_size_md__-5EZ1,
+.link__icon_size_lg__RY5Y1 {
   width: var(--click-link-icon-size-md-width);
   height: var(--click-link-icon-size-md-height);
 }
+.multi-accordion__ntYTM {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: start;
+  gap: var(--multi-accordion-gap);
+}
+
+.multi-accordion_fill-width__Rnqso {
+  width: 100%;
+}
+
+.multi-accordion_gap_none__NrRxK {
+  --multi-accordion-gap: var(--click-container-gap-none);
+}
+
+.multi-accordion_gap_xxs__1FSFF {
+  --multi-accordion-gap: var(--click-container-gap-xxs);
+}
+
+.multi-accordion_gap_xs__oHQut {
+  --multi-accordion-gap: var(--click-container-gap-xs);
+}
+
+.multi-accordion_gap_sm__hxMme {
+  --multi-accordion-gap: var(--click-container-gap-sm);
+}
+
+.multi-accordion_gap_md__epg85 {
+  --multi-accordion-gap: var(--click-container-gap-md);
+}
+
+.multi-accordion_gap_lg__iYlYQ {
+  --multi-accordion-gap: var(--click-container-gap-lg);
+}
+
+.multi-accordion_gap_xl__1uarr {
+  --multi-accordion-gap: var(--click-container-gap-xl);
+}
+
+.multi-accordion_gap_xxl__m9X9V {
+  --multi-accordion-gap: var(--click-container-gap-xxl);
+}
+
+.multi-accordion__item__RHKu8 {
+  border: 1px solid var(--click-global-color-stroke-default);
+  border-radius: var(--border-radii-1);
+  background-color: var(--click-global-color-background-default);
+}
+
+.multi-accordion__item_no-border__ZtqMX {
+  border: none;
+}
+
+.multi-accordion__item_fill-width__zyq4f {
+  width: 100%;
+}
+
+.multi-accordion__trigger__etXVq {
+  display: flex;
+  width: 100%;
+  padding: var(--multi-accordion-trigger-padding);
+  align-items: center;
+  gap: var(--multi-accordion-trigger-gap);
+  border: none;
+  border-radius: inherit;
+  background-color: transparent;
+  color: var(--multi-accordion-label-default);
+  font: var(--multi-accordion-font-default);
+}
+
+.multi-accordion__trigger__etXVq:active {
+  color: var(--multi-accordion-label-active);
+  font: var(--multi-accordion-font-active);
+}
+
+.multi-accordion__trigger__etXVq:hover {
+  background: var(--click-global-color-stroke-default);
+  color: var(--multi-accordion-label-hover);
+  font: var(--multi-accordion-font-hover);
+  cursor: pointer;
+}
+
+.multi-accordion__trigger__etXVq [data-icon='accordion-status'] {
+  color: var(--global-color-stroke-intense);
+}
+
+.multi-accordion__trigger__etXVq[data-state='open'] {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.multi-accordion__trigger__etXVq[data-state='open'] [data-icon='accordion-status'] {
+  color: var(--global-color-accent-default);
+}
+
+.multi-accordion__trigger_size_none__o4eWF {
+  --multi-accordion-trigger-padding: var(--click-container-space-none);
+  --multi-accordion-trigger-gap: var(--click-accordion-sm-space-gap);
+}
+
+.multi-accordion__trigger_size_sm__80VXp {
+  --multi-accordion-trigger-padding: var(--click-container-space-sm);
+  --multi-accordion-trigger-gap: var(--click-accordion-sm-space-gap);
+}
+
+.multi-accordion__trigger_size_md__uAE8q {
+  --multi-accordion-trigger-padding: var(--click-container-space-md);
+  --multi-accordion-trigger-gap: var(--click-accordion-md-space-gap);
+}
+
+.multi-accordion__trigger_size_lg__VHN7C {
+  --multi-accordion-trigger-padding: var(--click-container-space-lg);
+  --multi-accordion-trigger-gap: var(--click-accordion-lg-space-gap);
+}
+
+.multi-accordion__trigger_font_sm__xnOLy {
+  --multi-accordion-font-default: var(--click-accordion-sm-typography-label-default);
+  --multi-accordion-font-hover: var(--click-accordion-sm-typography-label-hover);
+  --multi-accordion-font-active: var(--click-accordion-sm-typography-label-active);
+}
+
+.multi-accordion__trigger_font_md__hTIA8 {
+  --multi-accordion-font-default: var(--click-accordion-md-typography-label-default);
+  --multi-accordion-font-hover: var(--click-accordion-md-typography-label-hover);
+  --multi-accordion-font-active: var(--click-accordion-md-typography-label-active);
+}
+
+.multi-accordion__trigger_font_lg__yMSpQ {
+  --multi-accordion-font-default: var(--click-accordion-lg-typography-label-default);
+  --multi-accordion-font-hover: var(--click-accordion-lg-typography-label-hover);
+  --multi-accordion-font-active: var(--click-accordion-lg-typography-label-active);
+}
+
+.multi-accordion__trigger_color_default__X7f4v {
+  --multi-accordion-label-default: var(--click-accordion-color-default-label-default);
+  --multi-accordion-label-hover: var(--click-accordion-color-default-label-hover);
+  --multi-accordion-label-active: var(--click-accordion-color-default-label-active);
+}
+
+.multi-accordion__trigger_color_link__hXDgW {
+  --multi-accordion-label-default: var(--click-accordion-color-link-label-default);
+  --multi-accordion-label-hover: var(--click-accordion-color-link-label-hover);
+  --multi-accordion-label-active: var(--click-accordion-color-link-label-active);
+}
+
+.multi-accordion__icon-wrapper__uhWrs {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: transform 200ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+
+.multi-accordion__trigger__etXVq[data-state='open'] .multi-accordion__icon-wrapper__uhWrs {
+  transform: rotate(90deg);
+}
+
+.multi-accordion__icons-wrapper__67uu- {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.multi-accordion__content__Gz0po {
+  padding: var(--multi-accordion-content-padding);
+  padding-top: 0;
+}
+
+.multi-accordion__content_padding_none__GgbED {
+  --multi-accordion-content-padding: var(--click-container-space-none);
+}
+
+.multi-accordion__content_padding_sm__nmI7q {
+  --multi-accordion-content-padding: var(--click-container-space-sm);
+}
+
+.multi-accordion__content_padding_md__XD2Ki {
+  --multi-accordion-content-padding: var(--click-container-space-md);
+}
+
+.multi-accordion__content_padding_lg__W-njL {
+  --multi-accordion-content-padding: var(--click-container-space-lg);
+}
+
+.multi-accordion__title__kLWyH {
+  overflow: hidden;
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.multi-accordion__status-icon__MNVgx {
+}
+
+.multi-accordion__status-icon_completed__z5-XJ svg path {
+  fill: var(--global-color-accent-default) !important;
+  stroke: var(--global-color-background-default) !important;
+}
+
+.multi-accordion__status-icon_completed__z5-XJ svg path:first-of-type {
+  stroke: var(--global-color-accent-default) !important;
+}
+.collapsible__8jmKP {
+  width: 100%;
+}
+
+.collapsible__8jmKP [data-trigger-icon] {
+  visibility: hidden;
+  transition: transform 150ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+
+.collapsible__8jmKP [data-trigger-icon][data-open='true'] {
+  transform: rotate(90deg);
+}
+
+.collapsible__8jmKP [data-collapsible-header]:hover [data-trigger-icon] {
+  visibility: visible;
+}
+
+.collapsible__header__pWkUS {
+  user-select: none;
+}
+
+.collapsible__header_indicator-dir_start__s-AUI {
+  margin-left: 0;
+}
+
+.collapsible__header_indicator-dir_end__EtDn0 {
+  margin-left: var(--click-image-sm-size-width);
+}
+
+.collapsible__trigger__ArZ-C {
+  display: flex;
+  align-items: center;
+  color: inherit;
+  font: inherit;
+  cursor: inherit;
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.collapsible__content__aT3ek {
+}
+
+.collapsible__content_indicator-dir_start__8Gs37 {
+  margin-left: var(--click-image-sm-size-width);
+}
+
+.collapsible__content_indicator-dir_end__OoEfV {
+  margin-right: var(--click-image-sm-size-width);
+}
+
+.collapsible__label__RpPE- {
+  display: flex;
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same
+   width fallback chain (100% → -webkit-fill-available → fill-available →
+   stretch) so the label fills the available inline space. */
+  width: 100%;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+  overflow: hidden;
+  flex: 1;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--click-sidebar-navigation-item-default-space-gap);
+}
+
+.collapsible__ellipsis__huvdc {
+  display: flex;
+  overflow: hidden;
+  flex: 1;
+  justify-content: flex-start;
+  gap: inherit;
+  white-space: nowrap;
+}
+
+.collapsible__ellipsis__huvdc > *:not(button) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. sqlSidebar) */
+.wrapper__klOWe {
+  display: flex;
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original styled rule used this
+   same width fallback chain (100% → -webkit-fill-available → fill-available →
+   stretch) so the item fills the available inline space. */
+  width: 100%;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+  padding: var(--item-space-y) var(--item-space-right) var(--item-space-y)
+    var(--item-pad-left);
+  overflow: hidden;
+  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+  flex-wrap: nowrap;
+  align-items: center;
+  border: none;
+  border-radius: var(--item-radii);
+  background-color: var(--item-bg-default);
+  color: var(--item-text-default);
+  font: var(--item-font-default);
+  white-space: nowrap;
+  cursor: pointer;
+  pointer-events: all;
+
+  /* Not collapsible by default: the padding-left reserves the icon-column width. */
+  --item-pad-left: var(--click-image-sm-size-width);
+  --item-mobile-pad-left: var(--click-image-sm-size-width);
+}
+
+.wrapper__klOWe span a {
+  color: var(--item-text-default);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.wrapper__klOWe:hover,
+.wrapper__klOWe:focus {
+  background-color: var(--item-bg-hover);
+  color: var(--item-text-hover);
+  font: var(--item-font-hover);
+  pointer-events: auto;
+}
+
+.wrapper__klOWe:active,
+.wrapper__klOWe[data-selected='true'] {
+  background-color: var(--item-bg-active);
+  color: var(--item-text-active);
+  font: var(--item-font-active);
+  pointer-events: all;
+}
+
+.wrapper__klOWe[aria-disabled='true'],
+.wrapper__klOWe[aria-disabled='true']:hover,
+.wrapper__klOWe[aria-disabled='true']:focus,
+.wrapper__klOWe[aria-disabled='true']:active,
+.wrapper__klOWe[aria-disabled='true']:focus-within,
+.wrapper__klOWe[aria-disabled='true'][data-selected='true'] {
+  color: var(--item-text-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.wrapper__klOWe[aria-disabled='true'] span a {
+  color: var(--item-text-disabled);
+  text-decoration: none;
+  cursor: not-allowed;
+}
+
+/* stylelint-disable-next-line media-feature-range-notation -- prefix syntax matches the original styled rule and is more broadly supported than range syntax */
+@media (max-width: 640px) {
+  .wrapper__klOWe {
+    padding: var(--item-mobile-space-y) var(--item-mobile-space-right)
+      var(--item-mobile-space-y) var(--item-mobile-pad-left);
+    gap: var(--item-mobile-gap);
+    font: var(--item-mobile-font-default);
+  }
+
+  .wrapper__klOWe:hover,
+  .wrapper__klOWe:focus {
+    font: var(--item-mobile-font-hover);
+  }
+
+  .wrapper__klOWe:active,
+  .wrapper__klOWe[data-selected='true'] {
+    font: var(--item-mobile-font-active);
+  }
+}
+
+.wrapper_itemtype_item__4OyPQ {
+  --item-space-y: var(--click-sidebar-navigation-item-default-space-y);
+  --item-space-right: var(--click-sidebar-navigation-item-default-space-right);
+  --item-space-left: var(--click-sidebar-navigation-item-default-space-left);
+  --item-radii: var(--click-sidebar-navigation-item-radii-all);
+  --item-font-default: var(--click-sidebar-navigation-item-typography-default);
+  --item-font-hover: var(--click-sidebar-navigation-item-typography-hover);
+  --item-font-active: var(--click-sidebar-navigation-item-typography-active);
+  --item-mobile-gap: var(--click-sidebar-navigation-item-mobile-space-gap);
+  --item-mobile-space-y: var(--click-sidebar-navigation-item-mobile-space-y);
+  --item-mobile-space-right: var(--click-sidebar-navigation-item-mobile-space-right);
+  --item-mobile-space-left: var(--click-sidebar-navigation-item-mobile-space-left);
+  --item-mobile-font-default: var(--click-sidebar-navigation-item-mobile-typography-default);
+  --item-mobile-font-hover: var(--click-sidebar-navigation-item-mobile-typography-hover);
+  --item-mobile-font-active: var(--click-sidebar-navigation-item-mobile-typography-active);
+}
+
+.wrapper_itemtype_sub-item__qv3-r {
+  --item-space-y: var(--click-sidebar-navigation-subItem-default-space-y);
+  --item-space-right: var(--click-sidebar-navigation-subItem-default-space-right);
+  --item-space-left: var(--click-sidebar-navigation-subItem-default-space-left);
+  --item-radii: var(--click-sidebar-navigation-subItem-radii-all);
+  --item-font-default: var(--click-sidebar-navigation-subItem-typography-default);
+  --item-font-hover: var(--click-sidebar-navigation-subItem-typography-hover);
+  --item-font-active: var(--click-sidebar-navigation-subItem-typography-active);
+  --item-mobile-gap: var(--click-sidebar-navigation-subItem-mobile-space-gap);
+  --item-mobile-space-y: var(--click-sidebar-navigation-subItem-mobile-space-y);
+  --item-mobile-space-right: var(--click-sidebar-navigation-subItem-mobile-space-right);
+  --item-mobile-space-left: var(--click-sidebar-navigation-subItem-mobile-space-left);
+  --item-mobile-font-default: var(--click-sidebar-navigation-subItem-mobile-typography-default);
+  --item-mobile-font-hover: var(--click-sidebar-navigation-subItem-mobile-typography-hover);
+  --item-mobile-font-active: var(--click-sidebar-navigation-subItem-mobile-typography-active);
+}
+
+.wrapper_collapsible_true__mZMo2 {
+  --item-pad-left: var(--item-space-left);
+  --item-mobile-pad-left: var(--item-mobile-space-left);
+}
+
+.wrapper_color_main-item__7C9Lq {
+  --item-bg-default: var(--click-sidebar-main-navigation-item-color-background-default);
+  --item-bg-hover: var(--click-sidebar-main-navigation-item-color-background-hover);
+  --item-bg-active: var(--click-sidebar-main-navigation-item-color-background-active);
+  --item-text-default: var(--click-sidebar-main-navigation-item-color-text-default);
+  --item-text-hover: var(--click-sidebar-main-navigation-item-color-text-hover);
+  --item-text-active: var(--click-sidebar-main-navigation-item-color-text-active);
+  --item-text-disabled: var(--click-sidebar-main-navigation-item-color-text-disabled);
+}
+
+.wrapper_color_main-sub-item__d9MJG {
+  --item-bg-default: var(--click-sidebar-main-navigation-subItem-color-background-default);
+  --item-bg-hover: var(--click-sidebar-main-navigation-subItem-color-background-hover);
+  --item-bg-active: var(--click-sidebar-main-navigation-subItem-color-background-active);
+  --item-text-default: var(--click-sidebar-main-navigation-subItem-color-text-default);
+  --item-text-hover: var(--click-sidebar-main-navigation-subItem-color-text-hover);
+  --item-text-active: var(--click-sidebar-main-navigation-subItem-color-text-active);
+  --item-text-disabled: var(--click-sidebar-main-navigation-subItem-color-text-disabled);
+}
+
+.wrapper_color_sql-sidebar-item__UxUec {
+  --item-bg-default: var(--click-sidebar-sqlSidebar-navigation-item-color-background-default);
+  --item-bg-hover: var(--click-sidebar-sqlSidebar-navigation-item-color-background-hover);
+  --item-bg-active: var(--click-sidebar-sqlSidebar-navigation-item-color-background-active);
+  --item-text-default: var(--click-sidebar-sqlSidebar-navigation-item-color-text-default);
+  --item-text-hover: var(--click-sidebar-sqlSidebar-navigation-item-color-text-hover);
+  --item-text-active: var(--click-sidebar-sqlSidebar-navigation-item-color-text-active);
+  --item-text-disabled: var(--click-sidebar-sqlSidebar-navigation-item-color-text-disabled);
+}
+
+.wrapper_color_sql-sidebar-sub-item__AyRy0 {
+  --item-bg-default: var(--click-sidebar-sqlSidebar-navigation-subItem-color-background-default);
+  --item-bg-hover: var(--click-sidebar-sqlSidebar-navigation-subItem-color-background-hover);
+  --item-bg-active: var(--click-sidebar-sqlSidebar-navigation-subItem-color-background-active);
+  --item-text-default: var(--click-sidebar-sqlSidebar-navigation-subItem-color-text-default);
+  --item-text-hover: var(--click-sidebar-sqlSidebar-navigation-subItem-color-text-hover);
+  --item-text-active: var(--click-sidebar-sqlSidebar-navigation-subItem-color-text-active);
+  --item-text-disabled: var(--click-sidebar-sqlSidebar-navigation-subItem-color-text-disabled);
+}
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. sqlSidebar) */
+.wrapper__ey0v7 {
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original styled rule used this
+   same width fallback chain (100% → -webkit-fill-available → fill-available →
+   stretch) so the title fills the available inline space. */
+  width: 100%;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+  padding: 0;
+  padding-left: var(--title-pad-left);
+  overflow: hidden;
+  border: none;
+  background: transparent;
+  white-space: nowrap;
+
+  /* Not collapsible by default: reserve the icon-column width on the left.
+     The single-class modifiers below override this; keep these defaults at
+     single-class specificity so they can. */
+  --title-pad-left: var(--click-image-sm-size-width);
+}
+
+/* Doubled class → specificity (0,2,0). SidebarCollapsibleTitle renders this
+   wrapper `as={Collapsible.Trigger}`, so the element also carries
+   `.collapsible__trigger`, whose `display/align-items/color/font/cursor`
+   resets would otherwise win on CSS-module bundle order and strip the title's
+   own typography. The original styled-components cascade resolved in the
+   title's favour; the doubled class makes that deterministic. Only the
+   properties that actually conflict with the trigger live here — box metrics
+   and the `--title-*` custom properties stay single-class above/below so the
+   `type`/`collapsible` modifiers still override them. */
+.wrapper__ey0v7.wrapper__ey0v7 {
+  display: inline-flex;
+  align-items: center;
+  color: var(--title-color-default);
+  font: var(--click-sidebar-navigation-title-typography-default);
+  cursor: pointer;
+}
+
+.wrapper__ey0v7.wrapper__ey0v7:hover {
+  color: var(--title-color-hover);
+  font: var(--click-sidebar-navigation-title-typography-hover);
+}
+
+.wrapper__ey0v7.wrapper__ey0v7:active,
+.wrapper__ey0v7.wrapper__ey0v7[data-state='open'],
+.wrapper__ey0v7.wrapper__ey0v7[data-selected='true'] {
+  color: var(--title-color-active);
+  font: var(--click-sidebar-navigation-title-typography-active);
+}
+
+.wrapper__ey0v7 a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.wrapper__ey0v7 a:active {
+  color: inherit;
+}
+
+.wrapper_type_main__wvTIv {
+  --title-color-default: var(--click-sidebar-main-navigation-title-color-default);
+  --title-color-hover: var(--click-sidebar-main-navigation-title-color-hover);
+  --title-color-active: var(--click-sidebar-main-navigation-title-color-active);
+}
+
+.wrapper_type_sql-sidebar__J-qle {
+  --title-color-default: var(--click-sidebar-sqlSidebar-navigation-title-color-default);
+  --title-color-hover: var(--click-sidebar-sqlSidebar-navigation-title-color-hover);
+  --title-color-active: var(--click-sidebar-sqlSidebar-navigation-title-color-active);
+}
+
+.wrapper_collapsible_true__8ANnP {
+  --title-pad-left: 0;
+}
 /* The wrapper class is applied alongside FormRoot's styled-components class.
    The .wrapper.wrapper double-class boost matches the specificity behavior of
    the original `styled(FormRoot)` chain so these overrides reliably beat
@@ -2720,6 +3720,11 @@ div:active + .topbadge__E79OZ {
   --click-button-group-space-button-default-x: 0.75rem;
   --click-button-group-space-button-borderless-y: 5.5px;
   --click-button-group-space-button-borderless-x: 1rem;
+  --click-button-group-space-icon-default-y: 3px;
+  --click-button-group-space-icon-default-x: 1rem;
+  --click-button-group-space-icon-borderless-y: 5.5px;
+  --click-button-group-space-icon-borderless-x: 1rem;
+  --click-button-group-icon-size-all: 1rem;
   --click-button-group-color-background-default: rgba(0, 0, 0, 0);
   --click-button-group-color-background-hover: #f6f7fa;
   --click-button-group-color-background-active: lch(95.274 1.5364 271.98);
@@ -4517,6 +5522,11 @@ div:active + .topbadge__E79OZ {
   --click-button-group-space-button-default-x: 0.75rem;
   --click-button-group-space-button-borderless-y: 5.5px;
   --click-button-group-space-button-borderless-x: 1rem;
+  --click-button-group-space-icon-default-y: 3px;
+  --click-button-group-space-icon-default-x: 1rem;
+  --click-button-group-space-icon-borderless-y: 5.5px;
+  --click-button-group-space-icon-borderless-x: 1rem;
+  --click-button-group-icon-size-all: 1rem;
   --click-button-group-color-background-default: rgba(0, 0, 0, 0);
   --click-button-group-color-background-hover: #282828;
   --click-button-group-color-background-active: #414141;