@jackcrane/ui 0.1.10 → 0.1.11

package/dist/jcui.cjs.js

@@ -795,7 +795,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   inherits: true;
   initial-value: transparent;
 }
-._trigger_1q8xu_7 {
+._trigger_7ctf7_7 {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
@@ -808,29 +808,38 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   color: var(--button-color, inherit);
   cursor: pointer;
 }
-._trigger_1q8xu_7:hover {
+._trigger_7ctf7_7:hover {
   --dropdown-bg: var(--secondary-color-100);
 }
-._trigger_1q8xu_7:active {
+._trigger_7ctf7_7:active {
   --dropdown-bg: var(--secondary-color-200);
 }
-._large_1q8xu_29 {
+._pageBackground_7ctf7_29 {
+  --dropdown-bg: var(--body-bg);
+  --button-bg: var(--body-bg);
+}
+._pageBackground_7ctf7_29:hover,
+._pageBackground_7ctf7_29:active {
+  --dropdown-bg: var(--body-bg);
+  --button-bg: var(--body-bg);
+}
+._large_7ctf7_40 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_1q8xu_34 {
+._small_7ctf7_45 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
-._disabled_1q8xu_39 {
+._disabled_7ctf7_50 {
   opacity: 0.5;
   cursor: not-allowed;
 }
-._icon_1q8xu_44 {
+._icon_7ctf7_55 {
   opacity: 0.65;
   font-size: 0.85rem;
 }
-._content_1q8xu_49 {
+._content_7ctf7_60 {
   background-color: var(--body-bg);
   border: var(--border-thickness) solid var(--border-color);
   --button-bg: var(--body-bg);
@@ -844,26 +853,26 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   will-change: transform, opacity;
   transform: translateY(-1px);
 }
-._content_1q8xu_49[data-state="closed"] ._viewport_1q8xu_64 {
+._content_7ctf7_60[data-state="closed"] ._viewport_7ctf7_75 {
   animation: none;
 }
-._content_1q8xu_49[data-state="open"][data-side="bottom"] ._viewport_1q8xu_64 {
-  animation: _slideUpAndFade_1q8xu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_7ctf7_60[data-state="open"][data-side="bottom"] ._viewport_7ctf7_75 {
+  animation: _slideUpAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: top center;
 }
-._content_1q8xu_49[data-state="open"][data-side="top"] ._viewport_1q8xu_64 {
-  animation: _slideDownAndFade_1q8xu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_7ctf7_60[data-state="open"][data-side="top"] ._viewport_7ctf7_75 {
+  animation: _slideDownAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: bottom center;
 }
-._content_1q8xu_49[data-state="open"][data-side="left"] ._viewport_1q8xu_64 {
-  animation: _slideRightAndFade_1q8xu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_7ctf7_60[data-state="open"][data-side="left"] ._viewport_7ctf7_75 {
+  animation: _slideRightAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: right center;
 }
-._content_1q8xu_49[data-state="open"][data-side="right"] ._viewport_1q8xu_64 {
-  animation: _slideLeftAndFade_1q8xu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_7ctf7_60[data-state="open"][data-side="right"] ._viewport_7ctf7_75 {
+  animation: _slideLeftAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: left center;
 }
-._viewport_1q8xu_64 {
+._viewport_7ctf7_75 {
   display: flex;
   flex-direction: column;
   animation-duration: 180ms;
@@ -872,7 +881,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   will-change: transform, opacity;
   transform: none;
 }
-._item_1q8xu_98 {
+._item_7ctf7_109 {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -885,91 +894,91 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   background: transparent;
   text-decoration: none;
 }
-._item_1q8xu_98[data-highlighted] {
+._item_7ctf7_109[data-highlighted] {
   background-color: var(--secondary-color-100);
 }
-._item_1q8xu_98[data-disabled] {
+._item_7ctf7_109[data-disabled] {
   opacity: 0.5;
   cursor: not-allowed;
 }
-._itemLabel_1q8xu_121 {
+._itemLabel_7ctf7_132 {
   flex: 1;
 }
-._itemIcon_1q8xu_125 {
+._itemIcon_7ctf7_136 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 1.25rem;
   height: 1.25rem;
 }
-._itemIcon_1q8xu_125 svg {
+._itemIcon_7ctf7_136 svg {
   height: 1.25rem;
 }
-._separator_1q8xu_137 {
+._separator_7ctf7_148 {
   height: var(--border-thickness);
   background-color: var(--border-color);
 }
-._arrow_1q8xu_142 {
+._arrow_7ctf7_153 {
   fill: var(--body-bg);
   stroke: var(--border-color);
   stroke-width: var(--border-thickness);
   stroke-linejoin: round;
 }
-._primary_1q8xu_149 {
+._primary_7ctf7_160 {
   --dropdown-bg: var(--primary-color-100);
   --border-color: var(--primary-color-300);
   --button-color: var(--primary-color-800);
   --border-accent-color: var(--primary-color-600);
 }
-._primary_1q8xu_149:hover {
+._primary_7ctf7_160:hover {
   --dropdown-bg: var(--primary-color-200);
 }
-._success_1q8xu_160 {
+._success_7ctf7_171 {
   --dropdown-bg: var(--success-color-100);
   --border-color: var(--success-color-300);
   --button-color: var(--success-color-800);
   --border-accent-color: var(--success-color-600);
 }
-._success_1q8xu_160:hover {
+._success_7ctf7_171:hover {
   --dropdown-bg: var(--success-color-200);
 }
-._warning_1q8xu_171 {
+._warning_7ctf7_182 {
   --dropdown-bg: var(--warning-color-100);
   --border-color: var(--warning-color-300);
   --button-color: var(--warning-color-800);
   --border-accent-color: var(--warning-color-600);
 }
-._warning_1q8xu_171:hover {
+._warning_7ctf7_182:hover {
   --dropdown-bg: var(--warning-color-200);
 }
-._danger_1q8xu_182 {
+._danger_7ctf7_193 {
   --dropdown-bg: var(--danger-color-100);
   --border-color: var(--danger-color-300);
   --button-color: var(--danger-color-800);
   --border-accent-color: var(--danger-color-600);
 }
-._danger_1q8xu_182:hover {
+._danger_7ctf7_193:hover {
   --dropdown-bg: var(--danger-color-200);
 }
-._info_1q8xu_193 {
+._info_7ctf7_204 {
   --dropdown-bg: var(--info-color-100);
   --border-color: var(--info-color-300);
   --button-color: var(--info-color-800);
   --border-accent-color: var(--info-color-600);
 }
-._info_1q8xu_193:hover {
+._info_7ctf7_204:hover {
   --dropdown-bg: var(--info-color-200);
 }
-._secondary_1q8xu_204 {
+._secondary_7ctf7_215 {
   --dropdown-bg: var(--secondary-color-100);
   --border-color: var(--secondary-color-300);
   --button-color: var(--secondary-color-800);
   --border-accent-color: var(--secondary-color-600);
 }
-._secondary_1q8xu_204:hover {
+._secondary_7ctf7_215:hover {
   --dropdown-bg: var(--secondary-color-200);
 }
-@keyframes _slideUpAndFade_1q8xu_1 {
+@keyframes _slideUpAndFade_7ctf7_1 {
   from {
     opacity: 0;
     transform: translateY(2px);
@@ -979,7 +988,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: translateY(0);
   }
 }
-@keyframes _slideRightAndFade_1q8xu_1 {
+@keyframes _slideRightAndFade_7ctf7_1 {
   from {
     opacity: 0;
     transform: translateX(-2px);
@@ -989,7 +998,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: translateX(0);
   }
 }
-@keyframes _slideDownAndFade_1q8xu_1 {
+@keyframes _slideDownAndFade_7ctf7_1 {
   from {
     opacity: 0;
     transform: translateY(-2px);
@@ -999,7 +1008,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: translateY(0);
   }
 }
-@keyframes _slideLeftAndFade_1q8xu_1 {
+@keyframes _slideLeftAndFade_7ctf7_1 {
   from {
     opacity: 0;
     transform: translateX(2px);
@@ -1932,7 +1941,7 @@ function clsx() {
   return n2;
 }
 const button = "_button_105y0_7";
-const pageBackground$2 = "_pageBackground_105y0_24";
+const pageBackground$3 = "_pageBackground_105y0_24";
 const large$6 = "_large_105y0_34";
 const small$6 = "_small_105y0_39";
 const disabled$6 = "_disabled_105y0_44";
@@ -1944,7 +1953,7 @@ const info$8 = "_info_105y0_103";
 const secondary$8 = "_secondary_105y0_116";
 const styles$b = {
   button,
-  pageBackground: pageBackground$2,
+  pageBackground: pageBackground$3,
   large: large$6,
   small: small$6,
   disabled: disabled$6,
@@ -2109,7 +2118,7 @@ function requireClassnames() {
 var classnamesExports = requireClassnames();
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
 const card = "_card_et6fi_1";
-const pageBackground$1 = "_pageBackground_et6fi_11";
+const pageBackground$2 = "_pageBackground_et6fi_11";
 const title$1 = "_title_et6fi_18";
 const body$1 = "_body_et6fi_25";
 const footer$1 = "_footer_et6fi_30";
@@ -2123,7 +2132,7 @@ const info$7 = "_info_et6fi_79";
 const secondary$7 = "_secondary_et6fi_86";
 const styles$9 = {
   card,
-  pageBackground: pageBackground$1,
+  pageBackground: pageBackground$2,
   title: title$1,
   body: body$1,
   footer: footer$1,
@@ -19214,7 +19223,7 @@ const RadarChart = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ObservablePlot, { options, className, style });
 };
 const input = "_input_1ymvl_7";
-const pageBackground = "_pageBackground_1ymvl_24";
+const pageBackground$1 = "_pageBackground_1ymvl_24";
 const large$3 = "_large_1ymvl_38";
 const small$3 = "_small_1ymvl_43";
 const disabled$3 = "_disabled_1ymvl_48";
@@ -19228,7 +19237,7 @@ const field = "_field_1ymvl_106";
 const label$1 = "_label_1ymvl_112";
 const styles$6 = {
   input,
-  pageBackground,
+  pageBackground: pageBackground$1,
   large: large$3,
   small: small$3,
   disabled: disabled$3,
@@ -25571,30 +25580,32 @@ var Portal2 = DropdownMenuPortal;
 var Content2 = DropdownMenuContent;
 var Item2 = DropdownMenuItem;
 var Separator2 = DropdownMenuSeparator;
-const trigger = "_trigger_1q8xu_7";
-const large = "_large_1q8xu_29";
-const small = "_small_1q8xu_34";
-const disabled = "_disabled_1q8xu_39";
-const icon = "_icon_1q8xu_44";
-const content$2 = "_content_1q8xu_49";
-const viewport = "_viewport_1q8xu_64";
-const slideUpAndFade = "_slideUpAndFade_1q8xu_1";
-const slideDownAndFade = "_slideDownAndFade_1q8xu_1";
-const slideRightAndFade = "_slideRightAndFade_1q8xu_1";
-const slideLeftAndFade = "_slideLeftAndFade_1q8xu_1";
-const item = "_item_1q8xu_98";
-const itemLabel = "_itemLabel_1q8xu_121";
-const itemIcon = "_itemIcon_1q8xu_125";
-const separator = "_separator_1q8xu_137";
-const arrow = "_arrow_1q8xu_142";
-const primary$2 = "_primary_1q8xu_149";
-const success$2 = "_success_1q8xu_160";
-const warning$2 = "_warning_1q8xu_171";
-const danger$2 = "_danger_1q8xu_182";
-const info$2 = "_info_1q8xu_193";
-const secondary$2 = "_secondary_1q8xu_204";
+const trigger = "_trigger_7ctf7_7";
+const pageBackground = "_pageBackground_7ctf7_29";
+const large = "_large_7ctf7_40";
+const small = "_small_7ctf7_45";
+const disabled = "_disabled_7ctf7_50";
+const icon = "_icon_7ctf7_55";
+const content$2 = "_content_7ctf7_60";
+const viewport = "_viewport_7ctf7_75";
+const slideUpAndFade = "_slideUpAndFade_7ctf7_1";
+const slideDownAndFade = "_slideDownAndFade_7ctf7_1";
+const slideRightAndFade = "_slideRightAndFade_7ctf7_1";
+const slideLeftAndFade = "_slideLeftAndFade_7ctf7_1";
+const item = "_item_7ctf7_109";
+const itemLabel = "_itemLabel_7ctf7_132";
+const itemIcon = "_itemIcon_7ctf7_136";
+const separator = "_separator_7ctf7_148";
+const arrow = "_arrow_7ctf7_153";
+const primary$2 = "_primary_7ctf7_160";
+const success$2 = "_success_7ctf7_171";
+const warning$2 = "_warning_7ctf7_182";
+const danger$2 = "_danger_7ctf7_193";
+const info$2 = "_info_7ctf7_204";
+const secondary$2 = "_secondary_7ctf7_215";
 const styles$3 = {
   trigger,
+  pageBackground,
   large,
   small,
   disabled,
@@ -25637,6 +25648,7 @@ function Dropdown({
 }) {
   const triggerClassName = clsx(
     styles$3.trigger,
+    !variant && styles$3.pageBackground,
     variant && styles$3[variant],
     chamfer2 && chamferStyles.chamfer,
     size2 === "large" && styles$3.large,

package/dist/jcui.es.js

@@ -795,7 +795,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   inherits: true;
   initial-value: transparent;
 }
-._trigger_1q8xu_7 {
+._trigger_7ctf7_7 {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
@@ -808,29 +808,38 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   color: var(--button-color, inherit);
   cursor: pointer;
 }
-._trigger_1q8xu_7:hover {
+._trigger_7ctf7_7:hover {
   --dropdown-bg: var(--secondary-color-100);
 }
-._trigger_1q8xu_7:active {
+._trigger_7ctf7_7:active {
   --dropdown-bg: var(--secondary-color-200);
 }
-._large_1q8xu_29 {
+._pageBackground_7ctf7_29 {
+  --dropdown-bg: var(--body-bg);
+  --button-bg: var(--body-bg);
+}
+._pageBackground_7ctf7_29:hover,
+._pageBackground_7ctf7_29:active {
+  --dropdown-bg: var(--body-bg);
+  --button-bg: var(--body-bg);
+}
+._large_7ctf7_40 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_1q8xu_34 {
+._small_7ctf7_45 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
-._disabled_1q8xu_39 {
+._disabled_7ctf7_50 {
   opacity: 0.5;
   cursor: not-allowed;
 }
-._icon_1q8xu_44 {
+._icon_7ctf7_55 {
   opacity: 0.65;
   font-size: 0.85rem;
 }
-._content_1q8xu_49 {
+._content_7ctf7_60 {
   background-color: var(--body-bg);
   border: var(--border-thickness) solid var(--border-color);
   --button-bg: var(--body-bg);
@@ -844,26 +853,26 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   will-change: transform, opacity;
   transform: translateY(-1px);
 }
-._content_1q8xu_49[data-state="closed"] ._viewport_1q8xu_64 {
+._content_7ctf7_60[data-state="closed"] ._viewport_7ctf7_75 {
   animation: none;
 }
-._content_1q8xu_49[data-state="open"][data-side="bottom"] ._viewport_1q8xu_64 {
-  animation: _slideUpAndFade_1q8xu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_7ctf7_60[data-state="open"][data-side="bottom"] ._viewport_7ctf7_75 {
+  animation: _slideUpAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: top center;
 }
-._content_1q8xu_49[data-state="open"][data-side="top"] ._viewport_1q8xu_64 {
-  animation: _slideDownAndFade_1q8xu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_7ctf7_60[data-state="open"][data-side="top"] ._viewport_7ctf7_75 {
+  animation: _slideDownAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: bottom center;
 }
-._content_1q8xu_49[data-state="open"][data-side="left"] ._viewport_1q8xu_64 {
-  animation: _slideRightAndFade_1q8xu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_7ctf7_60[data-state="open"][data-side="left"] ._viewport_7ctf7_75 {
+  animation: _slideRightAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: right center;
 }
-._content_1q8xu_49[data-state="open"][data-side="right"] ._viewport_1q8xu_64 {
-  animation: _slideLeftAndFade_1q8xu_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_7ctf7_60[data-state="open"][data-side="right"] ._viewport_7ctf7_75 {
+  animation: _slideLeftAndFade_7ctf7_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: left center;
 }
-._viewport_1q8xu_64 {
+._viewport_7ctf7_75 {
   display: flex;
   flex-direction: column;
   animation-duration: 180ms;
@@ -872,7 +881,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   will-change: transform, opacity;
   transform: none;
 }
-._item_1q8xu_98 {
+._item_7ctf7_109 {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -885,91 +894,91 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   background: transparent;
   text-decoration: none;
 }
-._item_1q8xu_98[data-highlighted] {
+._item_7ctf7_109[data-highlighted] {
   background-color: var(--secondary-color-100);
 }
-._item_1q8xu_98[data-disabled] {
+._item_7ctf7_109[data-disabled] {
   opacity: 0.5;
   cursor: not-allowed;
 }
-._itemLabel_1q8xu_121 {
+._itemLabel_7ctf7_132 {
   flex: 1;
 }
-._itemIcon_1q8xu_125 {
+._itemIcon_7ctf7_136 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 1.25rem;
   height: 1.25rem;
 }
-._itemIcon_1q8xu_125 svg {
+._itemIcon_7ctf7_136 svg {
   height: 1.25rem;
 }
-._separator_1q8xu_137 {
+._separator_7ctf7_148 {
   height: var(--border-thickness);
   background-color: var(--border-color);
 }
-._arrow_1q8xu_142 {
+._arrow_7ctf7_153 {
   fill: var(--body-bg);
   stroke: var(--border-color);
   stroke-width: var(--border-thickness);
   stroke-linejoin: round;
 }
-._primary_1q8xu_149 {
+._primary_7ctf7_160 {
   --dropdown-bg: var(--primary-color-100);
   --border-color: var(--primary-color-300);
   --button-color: var(--primary-color-800);
   --border-accent-color: var(--primary-color-600);
 }
-._primary_1q8xu_149:hover {
+._primary_7ctf7_160:hover {
   --dropdown-bg: var(--primary-color-200);
 }
-._success_1q8xu_160 {
+._success_7ctf7_171 {
   --dropdown-bg: var(--success-color-100);
   --border-color: var(--success-color-300);
   --button-color: var(--success-color-800);
   --border-accent-color: var(--success-color-600);
 }
-._success_1q8xu_160:hover {
+._success_7ctf7_171:hover {
   --dropdown-bg: var(--success-color-200);
 }
-._warning_1q8xu_171 {
+._warning_7ctf7_182 {
   --dropdown-bg: var(--warning-color-100);
   --border-color: var(--warning-color-300);
   --button-color: var(--warning-color-800);
   --border-accent-color: var(--warning-color-600);
 }
-._warning_1q8xu_171:hover {
+._warning_7ctf7_182:hover {
   --dropdown-bg: var(--warning-color-200);
 }
-._danger_1q8xu_182 {
+._danger_7ctf7_193 {
   --dropdown-bg: var(--danger-color-100);
   --border-color: var(--danger-color-300);
   --button-color: var(--danger-color-800);
   --border-accent-color: var(--danger-color-600);
 }
-._danger_1q8xu_182:hover {
+._danger_7ctf7_193:hover {
   --dropdown-bg: var(--danger-color-200);
 }
-._info_1q8xu_193 {
+._info_7ctf7_204 {
   --dropdown-bg: var(--info-color-100);
   --border-color: var(--info-color-300);
   --button-color: var(--info-color-800);
   --border-accent-color: var(--info-color-600);
 }
-._info_1q8xu_193:hover {
+._info_7ctf7_204:hover {
   --dropdown-bg: var(--info-color-200);
 }
-._secondary_1q8xu_204 {
+._secondary_7ctf7_215 {
   --dropdown-bg: var(--secondary-color-100);
   --border-color: var(--secondary-color-300);
   --button-color: var(--secondary-color-800);
   --border-accent-color: var(--secondary-color-600);
 }
-._secondary_1q8xu_204:hover {
+._secondary_7ctf7_215:hover {
   --dropdown-bg: var(--secondary-color-200);
 }
-@keyframes _slideUpAndFade_1q8xu_1 {
+@keyframes _slideUpAndFade_7ctf7_1 {
   from {
     opacity: 0;
     transform: translateY(2px);
@@ -979,7 +988,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: translateY(0);
   }
 }
-@keyframes _slideRightAndFade_1q8xu_1 {
+@keyframes _slideRightAndFade_7ctf7_1 {
   from {
     opacity: 0;
     transform: translateX(-2px);
@@ -989,7 +998,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: translateX(0);
   }
 }
-@keyframes _slideDownAndFade_1q8xu_1 {
+@keyframes _slideDownAndFade_7ctf7_1 {
   from {
     opacity: 0;
     transform: translateY(-2px);
@@ -999,7 +1008,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: translateY(0);
   }
 }
-@keyframes _slideLeftAndFade_1q8xu_1 {
+@keyframes _slideLeftAndFade_7ctf7_1 {
   from {
     opacity: 0;
     transform: translateX(2px);
@@ -1914,7 +1923,7 @@ function clsx() {
   return n2;
 }
 const button = "_button_105y0_7";
-const pageBackground$2 = "_pageBackground_105y0_24";
+const pageBackground$3 = "_pageBackground_105y0_24";
 const large$6 = "_large_105y0_34";
 const small$6 = "_small_105y0_39";
 const disabled$6 = "_disabled_105y0_44";
@@ -1926,7 +1935,7 @@ const info$8 = "_info_105y0_103";
 const secondary$8 = "_secondary_105y0_116";
 const styles$b = {
   button,
-  pageBackground: pageBackground$2,
+  pageBackground: pageBackground$3,
   large: large$6,
   small: small$6,
   disabled: disabled$6,
@@ -2091,7 +2100,7 @@ function requireClassnames() {
 var classnamesExports = requireClassnames();
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
 const card = "_card_et6fi_1";
-const pageBackground$1 = "_pageBackground_et6fi_11";
+const pageBackground$2 = "_pageBackground_et6fi_11";
 const title$1 = "_title_et6fi_18";
 const body$1 = "_body_et6fi_25";
 const footer$1 = "_footer_et6fi_30";
@@ -2105,7 +2114,7 @@ const info$7 = "_info_et6fi_79";
 const secondary$7 = "_secondary_et6fi_86";
 const styles$9 = {
   card,
-  pageBackground: pageBackground$1,
+  pageBackground: pageBackground$2,
   title: title$1,
   body: body$1,
   footer: footer$1,
@@ -19196,7 +19205,7 @@ const RadarChart = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ObservablePlot, { options, className, style });
 };
 const input = "_input_1ymvl_7";
-const pageBackground = "_pageBackground_1ymvl_24";
+const pageBackground$1 = "_pageBackground_1ymvl_24";
 const large$3 = "_large_1ymvl_38";
 const small$3 = "_small_1ymvl_43";
 const disabled$3 = "_disabled_1ymvl_48";
@@ -19210,7 +19219,7 @@ const field = "_field_1ymvl_106";
 const label$1 = "_label_1ymvl_112";
 const styles$6 = {
   input,
-  pageBackground,
+  pageBackground: pageBackground$1,
   large: large$3,
   small: small$3,
   disabled: disabled$3,
@@ -25553,30 +25562,32 @@ var Portal2 = DropdownMenuPortal;
 var Content2 = DropdownMenuContent;
 var Item2 = DropdownMenuItem;
 var Separator2 = DropdownMenuSeparator;
-const trigger = "_trigger_1q8xu_7";
-const large = "_large_1q8xu_29";
-const small = "_small_1q8xu_34";
-const disabled = "_disabled_1q8xu_39";
-const icon = "_icon_1q8xu_44";
-const content$2 = "_content_1q8xu_49";
-const viewport = "_viewport_1q8xu_64";
-const slideUpAndFade = "_slideUpAndFade_1q8xu_1";
-const slideDownAndFade = "_slideDownAndFade_1q8xu_1";
-const slideRightAndFade = "_slideRightAndFade_1q8xu_1";
-const slideLeftAndFade = "_slideLeftAndFade_1q8xu_1";
-const item = "_item_1q8xu_98";
-const itemLabel = "_itemLabel_1q8xu_121";
-const itemIcon = "_itemIcon_1q8xu_125";
-const separator = "_separator_1q8xu_137";
-const arrow = "_arrow_1q8xu_142";
-const primary$2 = "_primary_1q8xu_149";
-const success$2 = "_success_1q8xu_160";
-const warning$2 = "_warning_1q8xu_171";
-const danger$2 = "_danger_1q8xu_182";
-const info$2 = "_info_1q8xu_193";
-const secondary$2 = "_secondary_1q8xu_204";
+const trigger = "_trigger_7ctf7_7";
+const pageBackground = "_pageBackground_7ctf7_29";
+const large = "_large_7ctf7_40";
+const small = "_small_7ctf7_45";
+const disabled = "_disabled_7ctf7_50";
+const icon = "_icon_7ctf7_55";
+const content$2 = "_content_7ctf7_60";
+const viewport = "_viewport_7ctf7_75";
+const slideUpAndFade = "_slideUpAndFade_7ctf7_1";
+const slideDownAndFade = "_slideDownAndFade_7ctf7_1";
+const slideRightAndFade = "_slideRightAndFade_7ctf7_1";
+const slideLeftAndFade = "_slideLeftAndFade_7ctf7_1";
+const item = "_item_7ctf7_109";
+const itemLabel = "_itemLabel_7ctf7_132";
+const itemIcon = "_itemIcon_7ctf7_136";
+const separator = "_separator_7ctf7_148";
+const arrow = "_arrow_7ctf7_153";
+const primary$2 = "_primary_7ctf7_160";
+const success$2 = "_success_7ctf7_171";
+const warning$2 = "_warning_7ctf7_182";
+const danger$2 = "_danger_7ctf7_193";
+const info$2 = "_info_7ctf7_204";
+const secondary$2 = "_secondary_7ctf7_215";
 const styles$3 = {
   trigger,
+  pageBackground,
   large,
   small,
   disabled,
@@ -25619,6 +25630,7 @@ function Dropdown({
 }) {
   const triggerClassName = clsx(
     styles$3.trigger,
+    !variant && styles$3.pageBackground,
     variant && styles$3[variant],
     chamfer2 && chamferStyles.chamfer,
     size2 === "large" && styles$3.large,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackcrane/ui",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "type": "module",
   "sideEffects": false,
   "main": "dist/jcui.cjs.js",