@clickhouse/click-ui 0.6.1-rc2 → 0.6.1

package/dist/cjs/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;
@@ -980,6 +980,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 +1119,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);
@@ -2150,6 +2430,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 +2556,347 @@ 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);
 }
+.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