@clusterenvision/ui-scss 1.94.3

package/dist/components/form-controls/checkbox.css

@@ -0,0 +1,183 @@
+.checkbox,
+.ce-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ce-checkbox-gap, 0.5rem);
+  cursor: var(--ce-checkbox-cursor, pointer);
+  font-size: var(--ce-checkbox-size, 1rem);
+  position: relative;
+  color: var(--ce-checkbox-color, inherit);
+}
+.checkbox input[type=checkbox],
+.ce-checkbox input[type=checkbox] {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: var(--ce-checkbox-box-size, 1.125rem) !important;
+  height: var(--ce-checkbox-box-size, 1.125rem) !important;
+  min-width: var(--ce-checkbox-box-size, 1.125rem) !important;
+  max-width: var(--ce-checkbox-box-size, 1.125rem) !important;
+  min-height: var(--ce-checkbox-box-size, 1.125rem) !important;
+  max-height: var(--ce-checkbox-box-size, 1.125rem) !important;
+  border-width: var(--ce-checkbox-border-width, 2px);
+  border-style: var(--ce-checkbox-border-style, solid);
+  border-color: var(--ce-checkbox-border-color, #cbd5e0);
+  border-radius: var(--ce-checkbox-radius, 0.25rem);
+  background-color: var(--ce-checkbox-bg, white);
+  cursor: var(--ce-checkbox-cursor, pointer);
+  margin: 0;
+  padding: 0;
+  flex-shrink: 0;
+  position: relative;
+  transition: all var(--ce-checkbox-transition, 0.2s) var(--ce-checkbox-transition-ease, ease);
+  box-sizing: border-box;
+}
+.checkbox input[type=checkbox]:hover,
+.ce-checkbox input[type=checkbox]:hover {
+  border-color: var(--ce-checkbox-hover-border, #3b82f6);
+}
+.checkbox input[type=checkbox]:checked,
+.ce-checkbox input[type=checkbox]:checked {
+  background-color: var(--ce-checkbox-checked-bg, #3b82f6);
+  border-color: var(--ce-checkbox-checked-border, #3b82f6);
+}
+.checkbox input[type=checkbox]:checked::after,
+.ce-checkbox input[type=checkbox]:checked::after {
+  content: "";
+  position: absolute;
+  left: var(--ce-checkbox-check-left, 0.3rem);
+  top: var(--ce-checkbox-check-top, 0.05rem);
+  width: var(--ce-checkbox-check-width, 0.35rem);
+  height: var(--ce-checkbox-check-height, 0.65rem);
+  border: solid var(--ce-checkbox-check-color, white);
+  border-width: 0 var(--ce-checkbox-check-stroke, 2px) var(--ce-checkbox-check-stroke, 2px) 0;
+  transform: rotate(45deg);
+}
+.checkbox input[type=checkbox]:focus,
+.ce-checkbox input[type=checkbox]:focus {
+  outline-width: var(--ce-checkbox-focus-outline-width, 2px);
+  outline-style: var(--ce-checkbox-focus-outline-style, solid);
+  outline-color: var(--ce-checkbox-focus-outline-color, rgba(59, 130, 246, 0.3));
+  outline-offset: var(--ce-checkbox-focus-outline-offset, 2px);
+}
+.checkbox input[type=checkbox]:disabled,
+.ce-checkbox input[type=checkbox]:disabled {
+  cursor: var(--ce-checkbox-disabled-cursor, not-allowed);
+  opacity: var(--ce-checkbox-disabled-opacity, 0.5);
+  background-color: var(--ce-checkbox-disabled-bg, #f7fafc);
+}
+.checkbox--disabled,
+.ce-checkbox--disabled {
+  color: var(--ce-checkbox-disabled-color, #9aa0a6);
+  cursor: var(--ce-checkbox-disabled-cursor, not-allowed);
+}
+.checkbox--disabled input[type=checkbox],
+.ce-checkbox--disabled input[type=checkbox] {
+  cursor: var(--ce-checkbox-disabled-cursor, not-allowed);
+}
+
+ce-checkbox {
+  display: inline-block;
+}
+ce-checkbox > input[type=checkbox],
+ce-checkbox input[type=checkbox] {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: inline-block;
+  width: var(--ce-checkbox-box-size, 1.125rem) !important;
+  height: var(--ce-checkbox-box-size, 1.125rem) !important;
+  min-width: var(--ce-checkbox-box-size, 1.125rem) !important;
+  max-width: var(--ce-checkbox-box-size, 1.125rem) !important;
+  min-height: var(--ce-checkbox-box-size, 1.125rem) !important;
+  max-height: var(--ce-checkbox-box-size, 1.125rem) !important;
+  border-width: var(--ce-checkbox-border-width, 2px);
+  border-style: var(--ce-checkbox-border-style, solid);
+  border-color: var(--ce-checkbox-border-color, #cbd5e0);
+  border-radius: var(--ce-checkbox-radius, 0.25rem);
+  background-color: var(--ce-checkbox-bg, white);
+  cursor: var(--ce-checkbox-cursor, pointer);
+  margin: 0;
+  padding: 0;
+  flex-shrink: 0;
+  position: relative;
+  transition: all var(--ce-checkbox-transition, 0.2s) var(--ce-checkbox-transition-ease, ease);
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+ce-checkbox > input[type=checkbox]:hover,
+ce-checkbox input[type=checkbox]:hover {
+  border-color: var(--ce-checkbox-hover-border, #3b82f6);
+}
+ce-checkbox > input[type=checkbox]:checked,
+ce-checkbox input[type=checkbox]:checked {
+  background-color: var(--ce-checkbox-checked-bg, #3b82f6);
+  border-color: var(--ce-checkbox-checked-border, #3b82f6);
+}
+ce-checkbox > input[type=checkbox]:checked::after,
+ce-checkbox input[type=checkbox]:checked::after {
+  content: "";
+  position: absolute;
+  left: var(--ce-checkbox-check-left, 0.3rem);
+  top: var(--ce-checkbox-check-top, 0.05rem);
+  width: var(--ce-checkbox-check-width, 0.35rem);
+  height: var(--ce-checkbox-check-height, 0.65rem);
+  border: solid var(--ce-checkbox-check-color, white);
+  border-width: 0 var(--ce-checkbox-check-stroke, 2px) var(--ce-checkbox-check-stroke, 2px) 0;
+  transform: rotate(45deg);
+}
+ce-checkbox > input[type=checkbox]:focus,
+ce-checkbox input[type=checkbox]:focus {
+  outline-width: var(--ce-checkbox-focus-outline-width, 2px);
+  outline-style: var(--ce-checkbox-focus-outline-style, solid);
+  outline-color: var(--ce-checkbox-focus-outline-color, rgba(59, 130, 246, 0.3));
+  outline-offset: var(--ce-checkbox-focus-outline-offset, 2px);
+}
+ce-checkbox > input[type=checkbox]:disabled,
+ce-checkbox input[type=checkbox]:disabled {
+  cursor: var(--ce-checkbox-disabled-cursor, not-allowed);
+  opacity: var(--ce-checkbox-disabled-opacity, 0.5);
+  background-color: var(--ce-checkbox-disabled-bg, #f7fafc);
+}
+
+ce-checkbox > div > input[type=checkbox] {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: inline-block;
+  width: var(--ce-checkbox-box-size, 1.125rem) !important;
+  height: var(--ce-checkbox-box-size, 1.125rem) !important;
+  min-width: var(--ce-checkbox-box-size, 1.125rem) !important;
+  max-width: var(--ce-checkbox-box-size, 1.125rem) !important;
+  min-height: var(--ce-checkbox-box-size, 1.125rem) !important;
+  max-height: var(--ce-checkbox-box-size, 1.125rem) !important;
+  border-width: var(--ce-checkbox-border-width, 2px);
+  border-style: var(--ce-checkbox-border-style, solid);
+  border-color: var(--ce-checkbox-border-color, #cbd5e0);
+  border-radius: var(--ce-checkbox-radius, 0.25rem);
+  background-color: var(--ce-checkbox-bg, white);
+  cursor: var(--ce-checkbox-cursor, pointer);
+  margin: 0;
+  padding: 0;
+  position: relative;
+  transition: all var(--ce-checkbox-transition, 0.2s) var(--ce-checkbox-transition-ease, ease);
+  box-sizing: border-box;
+}
+ce-checkbox > div > input[type=checkbox]:hover {
+  border-color: var(--ce-checkbox-hover-border, #3b82f6);
+}
+ce-checkbox > div > input[type=checkbox]:checked {
+  background-color: var(--ce-checkbox-checked-bg, #3b82f6);
+  border-color: var(--ce-checkbox-checked-border, #3b82f6);
+}
+ce-checkbox > div > input[type=checkbox]:checked::after {
+  content: "";
+  position: absolute;
+  left: var(--ce-checkbox-check-left, 0.3rem);
+  top: var(--ce-checkbox-check-top, 0.05rem);
+  width: var(--ce-checkbox-check-width, 0.35rem);
+  height: var(--ce-checkbox-check-height, 0.65rem);
+  border: solid var(--ce-checkbox-check-color, white);
+  border-width: 0 var(--ce-checkbox-check-stroke, 2px) var(--ce-checkbox-check-stroke, 2px) 0;
+  transform: rotate(45deg);
+}

package/dist/components/form-controls/date-picker.css

@@ -0,0 +1,26 @@
+.date-picker {
+  width: 100%;
+}
+.date-picker input[type=date],
+.date-picker input[type=datetime-local] {
+  padding: var(--ce-date-picker-padding, 0.5rem 1rem);
+  border-width: var(--ce-date-picker-border-width, 1px);
+  border-style: var(--ce-date-picker-border-style, solid);
+  border-color: var(--ce-date-picker-border-color, var(--theme-date-picker-border, #9aa0a6));
+  border-radius: var(--ce-date-picker-radius, 4px);
+  background-color: var(--ce-date-picker-bg, var(--theme-date-picker-bg, #ffffff));
+  color: var(--ce-date-picker-color, var(--theme-date-picker-fg, #202124));
+  width: var(--ce-date-picker-width, 100%);
+}
+.date-picker input[type=date]:focus,
+.date-picker input[type=datetime-local]:focus {
+  border-color: var(--ce-date-picker-focus-border, var(--theme-date-picker-focus, #1a73e8));
+  box-shadow: var(--ce-date-picker-focus-shadow, 0 0 0 3px rgba(26, 115, 232, 0.2));
+}
+.date-picker input[type=date]:focus-visible,
+.date-picker input[type=datetime-local]:focus-visible {
+  outline-width: var(--ce-date-picker-outline-width, 2px);
+  outline-style: var(--ce-date-picker-outline-style, solid);
+  outline-color: var(--ce-date-picker-outline-color, var(--theme-accent, var(--theme-primary)));
+  outline-offset: var(--ce-date-picker-outline-offset, 2px);
+}

package/dist/components/form-controls/file-upload.css

@@ -0,0 +1,48 @@
+.file-upload {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+  max-width: 400px;
+}
+.file-upload__label {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--theme-file-upload-label, #202124);
+  margin-bottom: 0.25rem;
+}
+.file-upload__input {
+  display: none;
+}
+.file-upload__dropzone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  border: 2px dashed var(--theme-file-upload-border, #9aa0a6);
+  border-radius: 8px;
+  background-color: var(--theme-file-upload-bg, #f8f9fa);
+  color: var(--theme-file-upload-fg, #202124);
+  cursor: pointer;
+  transition: border-color 0.2s, background-color 0.2s;
+  text-align: center;
+}
+.file-upload__dropzone:hover, .file-upload__dropzone:focus-visible {
+  border-color: var(--theme-file-upload-hover, #1a73e8);
+  background-color: var(--theme-file-upload-hover-bg, #ffffff);
+  outline: 2px solid var(--theme-accent, var(--theme-primary));
+  outline-offset: 2px;
+}
+.file-upload__list {
+  margin-top: 0.5rem;
+  list-style: none;
+  padding: 0;
+  font-size: 0.95rem;
+  color: var(--theme-file-upload-list, #202124);
+}
+.file-upload__item {
+  margin-bottom: 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}

package/dist/components/form-controls/form-group.css

@@ -0,0 +1,19 @@
+.form-group {
+  margin-bottom: var(--ce-form-group-margin, 1.5rem);
+}
+.form-group label {
+  display: var(--ce-form-group-label-display, block);
+  margin-bottom: var(--ce-form-group-label-margin, 0.25rem);
+  font-weight: var(--ce-form-group-label-weight, bold);
+  color: var(--ce-form-group-label-color, #202124);
+}
+.form-group .form-description {
+  margin-top: var(--ce-form-group-desc-margin, 0.25rem);
+  font-size: var(--ce-form-group-desc-size, 0.875rem);
+  color: var(--ce-form-group-desc-color, #9aa0a6);
+}
+.form-group .form-error {
+  color: var(--ce-form-group-error-color, #ea4335);
+  font-size: var(--ce-form-group-error-size, 0.875rem);
+  margin-top: var(--ce-form-group-error-margin, 0.25rem);
+}

package/dist/components/form-controls/input.css

@@ -0,0 +1,96 @@
+.input,
+.ce-input {
+  display: var(--ce-input-display, block);
+  width: var(--ce-input-width, 100%);
+  padding: var(--ce-input-padding, 0.5rem 1rem);
+  font-size: var(--ce-input-font-size, 1rem);
+  color: var(--ce-input-color, var(--theme-input-fg, #202124));
+  background-color: var(--ce-input-bg, var(--theme-input-bg, #ffffff));
+  border-width: var(--ce-input-border-width, 1px);
+  border-style: var(--ce-input-border-style, solid);
+  border-color: var(--ce-input-border, var(--theme-input-border, #9aa0a6));
+  border-radius: var(--ce-input-radius, 4px);
+  line-height: var(--ce-input-line-height, 1.5);
+}
+.input:focus,
+.ce-input:focus {
+  border-color: var(--ce-input-focus-border, var(--theme-input-focus, #1a73e8));
+  outline: var(--ce-input-focus-outline, none);
+  box-shadow: var(--ce-input-focus-shadow, 0 0 0 3px rgba(26, 115, 232, 0.2));
+}
+.input:focus-visible,
+.ce-input:focus-visible {
+  outline: var(--ce-input-focus-visible-outline, 2px solid var(--theme-accent, var(--theme-primary)));
+  outline-offset: var(--ce-input-focus-visible-offset, 2px);
+}
+.input:disabled,
+.ce-input:disabled {
+  background-color: var(--ce-input-disabled-bg, var(--theme-input-disabled-bg, #f8f9fa));
+  color: var(--ce-input-disabled-color, var(--theme-input-disabled-fg, #9aa0a6));
+  cursor: var(--ce-input-disabled-cursor, not-allowed);
+}
+.input--sm,
+.ce-input--sm {
+  padding: var(--ce-input-sm-padding, 0.25rem 0.5rem);
+  font-size: var(--ce-input-sm-size, 0.875rem);
+}
+.input--md,
+.ce-input--md {
+  padding: var(--ce-input-md-padding, 0.5rem 1rem);
+  font-size: var(--ce-input-md-size, 1rem);
+}
+.input--lg,
+.ce-input--lg {
+  padding: var(--ce-input-lg-padding, 1rem 1.5rem);
+  font-size: var(--ce-input-lg-size, 1.125rem);
+}
+.input--error,
+.ce-input--error {
+  border-color: var(--ce-input-error-border, var(--theme-input-error, #ea4335));
+}
+.input--error:focus,
+.ce-input--error:focus {
+  box-shadow: var(--ce-input-error-shadow, 0 0 0 3px rgba(234, 67, 53, 0.2));
+}
+.input--success,
+.ce-input--success {
+  border-color: var(--ce-input-success-border, var(--theme-input-success, #34a853));
+}
+.input--success:focus,
+.ce-input--success:focus {
+  box-shadow: var(--ce-input-success-shadow, 0 0 0 3px rgba(52, 168, 83, 0.2));
+}
+.input--rounded,
+.ce-input--rounded {
+  border-radius: var(--ce-input-rounded-radius, 10px);
+}
+.input--icon-left, .input--icon-right,
+.ce-input--icon-left,
+.ce-input--icon-right {
+  position: var(--ce-input-icon-position, relative);
+  padding-left: var(--ce-input-icon-padding-left, 2.5rem);
+}
+.input--icon-left::before, .input--icon-right::before,
+.ce-input--icon-left::before,
+.ce-input--icon-right::before {
+  content: var(--ce-input-icon-content, "");
+  position: var(--ce-input-icon-position, absolute);
+  top: var(--ce-input-icon-top, 50%);
+  transform: var(--ce-input-icon-transform, translateY(-50%));
+  left: var(--ce-input-icon-left, 0.5rem);
+  width: var(--ce-input-icon-size, 1rem);
+  height: var(--ce-input-icon-size, 1rem);
+  background-repeat: var(--ce-input-icon-repeat, no-repeat);
+  background-position: var(--ce-input-icon-align, center);
+  background-size: var(--ce-input-icon-scale, contain);
+  pointer-events: var(--ce-input-icon-events, none);
+}
+
+ce-input[size=sm] input.ce-input, ce-input[size=sm] .ce-input {
+  padding: var(--ce-input-sm-padding, 0.25rem 0.5rem);
+  font-size: var(--ce-input-sm-size, 0.875rem);
+}
+ce-input[size=lg] input.ce-input, ce-input[size=lg] .ce-input {
+  padding: var(--ce-input-lg-padding, 1rem 1.5rem);
+  font-size: var(--ce-input-lg-size, 1.125rem);
+}

package/dist/components/form-controls/radio.css

@@ -0,0 +1,20 @@
+.radio {
+  display: var(--ce-radio-display, flex);
+  align-items: var(--ce-radio-align, center);
+  gap: var(--ce-radio-gap, 0.5rem);
+  cursor: var(--ce-radio-cursor, pointer);
+  font-size: var(--ce-radio-size, 1rem);
+}
+.radio input[type=radio] {
+  width: var(--ce-radio-input-size, 1rem);
+  height: var(--ce-radio-input-size, 1rem);
+  accent-color: var(--ce-radio-input-accent, #1a73e8);
+  cursor: var(--ce-radio-input-cursor, pointer);
+}
+.radio--disabled {
+  color: var(--ce-radio-disabled-color, #9aa0a6);
+  cursor: var(--ce-radio-disabled-cursor, not-allowed);
+}
+.radio--disabled input[type=radio] {
+  cursor: var(--ce-radio-disabled-input-cursor, not-allowed);
+}

package/dist/components/form-controls/range.css

@@ -0,0 +1,42 @@
+.range-slider {
+  width: 100%;
+  max-width: 300px;
+  margin: 1rem 0;
+}
+.range-slider input[type=range] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  background: var(--theme-range-track, #f8f9fa);
+  border-radius: 4px;
+  outline: none;
+  transition: background 0.3s;
+}
+.range-slider input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  background: var(--theme-range-thumb, #1a73e8);
+  border: 2px solid var(--theme-range-thumb-border, #ffffff);
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  transition: background 0.3s;
+}
+.range-slider input[type=range]::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  background: var(--theme-range-thumb, #1a73e8);
+  border: 2px solid var(--theme-range-thumb-border, #ffffff);
+  border-radius: 50%;
+  cursor: pointer;
+}
+.range-slider input[type=range]:hover::-webkit-slider-thumb {
+  background: var(--theme-range-thumb-hover, rgb(18.8928571429, 92, 188.1071428571));
+}
+.range-slider input[type=range]:hover::-webkit-slider-thumb:focus-visible {
+  outline: 2px solid var(--theme-accent, var(--theme-primary));
+  outline-offset: 2px;
+}

package/dist/components/form-controls/select.css

@@ -0,0 +1,243 @@
+.select,
+.ce-dropdown {
+  position: relative;
+  width: 100%;
+  display: inline-block;
+}
+.select__toggle, .select__trigger,
+.ce-dropdown__toggle,
+.ce-dropdown__trigger {
+  width: 100%;
+  padding: var(--ce-select-padding, 0.625rem 1rem);
+  min-height: 44px;
+  background-color: #ffffff;
+  color: #202124;
+  border: 1px solid #9aa0a6;
+  border-radius: 4px;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ce-select-gap, var(--ce-spacing-sm, 0.5rem));
+  transition: all 0.2s ease;
+  text-align: left;
+}
+.select__toggle:hover, .select__trigger:hover,
+.ce-dropdown__toggle:hover,
+.ce-dropdown__trigger:hover {
+  border-color: #1a73e8;
+}
+.select__toggle:focus, .select__toggle:focus-visible, .select__trigger:focus, .select__trigger:focus-visible,
+.ce-dropdown__toggle:focus,
+.ce-dropdown__toggle:focus-visible,
+.ce-dropdown__trigger:focus,
+.ce-dropdown__trigger:focus-visible {
+  border-color: #1a73e8;
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
+}
+.select__label,
+.ce-dropdown__label {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-weight: 500;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+}
+.select__icon,
+.ce-dropdown__icon {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 10px;
+  font-size: 0.85rem;
+  color: var(--ce-control-handle-fg, #fff);
+  background-color: var(--ce-control-handle-bg, #1a73e8);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease;
+  pointer-events: none;
+  box-shadow: var(--ce-select-icon-shadow, 0 6px 12px rgba(16, 24, 40, 0.12));
+}
+.select__toggle[aria-expanded=true] .select__icon, .select__trigger[aria-expanded=true] .select__icon,
+.select__toggle[aria-expanded=true] .ce-dropdown__icon,
+.select__trigger[aria-expanded=true] .ce-dropdown__icon,
+.ce-dropdown__toggle[aria-expanded=true] .select__icon,
+.ce-dropdown__trigger[aria-expanded=true] .select__icon,
+.ce-dropdown__toggle[aria-expanded=true] .ce-dropdown__icon,
+.ce-dropdown__trigger[aria-expanded=true] .ce-dropdown__icon {
+  transform: rotate(180deg);
+}
+.select__menu,
+.ce-dropdown__menu {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  right: 0;
+  background-color: #ffffff;
+  border: 1px solid #9aa0a6;
+  border-radius: 4px;
+  box-shadow: var(--ce-select-menu-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 1000;
+  display: block;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(-0.5rem);
+  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
+}
+.select__menu.is-visible,
+.ce-dropdown__menu.is-visible {
+  opacity: 1 !important;
+  visibility: visible !important;
+  pointer-events: auto !important;
+  transform: translateY(0) !important;
+}
+.select--open .select__menu,
+.select--open .ce-dropdown__menu,
+.ce-dropdown--open .select__menu,
+.ce-dropdown--open .ce-dropdown__menu {
+  opacity: 1 !important;
+  visibility: visible !important;
+  pointer-events: auto !important;
+  transform: translateY(0) !important;
+}
+.select__toggle[aria-expanded=true] ~ .select__menu,
+.select__toggle[aria-expanded=true] ~ .ce-dropdown__menu,
+.ce-dropdown__toggle[aria-expanded=true] ~ .select__menu,
+.ce-dropdown__toggle[aria-expanded=true] ~ .ce-dropdown__menu {
+  opacity: 1 !important;
+  visibility: visible !important;
+  pointer-events: auto !important;
+  transform: translateY(0) !important;
+}
+.select:focus-within .select__menu,
+.select:focus-within .ce-dropdown__menu,
+.ce-dropdown:focus-within .select__menu,
+.ce-dropdown:focus-within .ce-dropdown__menu {
+  opacity: 1 !important;
+  visibility: visible !important;
+  pointer-events: auto !important;
+  transform: translateY(0) !important;
+}
+.select:hover .select__menu,
+.select:hover .ce-dropdown__menu,
+.ce-dropdown:hover .select__menu,
+.ce-dropdown:hover .ce-dropdown__menu {
+  opacity: 1 !important;
+  visibility: visible !important;
+  pointer-events: auto !important;
+  transform: translateY(0) !important;
+}
+.select__item,
+.ce-dropdown__item {
+  padding: var(--ce-select-item-padding, 0.75rem 1rem);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  display: flex;
+  align-items: center;
+  gap: var(--ce-select-item-gap, 0.75rem);
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+  font-size: 0.9375rem;
+  color: #202124;
+}
+.select__item:hover,
+.ce-dropdown__item:hover {
+  background-color: #f8f9fa;
+}
+.select__item:focus, .select__item:focus-visible,
+.ce-dropdown__item:focus,
+.ce-dropdown__item:focus-visible {
+  background-color: rgba(26, 115, 232, 0.1);
+  outline: none;
+}
+.select__item--selected,
+.ce-dropdown__item--selected {
+  background-color: rgba(26, 115, 232, 0.1);
+  color: #1a73e8;
+  font-weight: 500;
+}
+.select__item--disabled,
+.ce-dropdown__item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.select__item-icon,
+.ce-dropdown__item-icon {
+  font-size: 1.25em;
+  flex-shrink: 0;
+}
+.select__item-content,
+.ce-dropdown__item-content {
+  flex: 1;
+  min-width: 0;
+}
+.select__item-label,
+.ce-dropdown__item-label {
+  display: block;
+  font-weight: 500;
+}
+.select__item-description,
+.ce-dropdown__item-description {
+  display: block;
+  font-size: 0.8125rem;
+  color: #9aa0a6;
+  margin-top: 0.125rem;
+}
+.select--error .select__trigger,
+.select--error .select__toggle,
+.select--error .ce-dropdown__trigger,
+.select--error .ce-dropdown__toggle,
+.ce-dropdown--error .select__trigger,
+.ce-dropdown--error .select__toggle,
+.ce-dropdown--error .ce-dropdown__trigger,
+.ce-dropdown--error .ce-dropdown__toggle {
+  border-color: #ea4335;
+}
+.select:disabled .select__trigger,
+.select:disabled .select__toggle,
+.select:disabled .ce-dropdown__trigger,
+.select:disabled .ce-dropdown__toggle,
+.ce-dropdown:disabled .select__trigger,
+.ce-dropdown:disabled .select__toggle,
+.ce-dropdown:disabled .ce-dropdown__trigger,
+.ce-dropdown:disabled .ce-dropdown__toggle {
+  background-color: #f8f9fa;
+  color: #9aa0a6;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+select.select {
+  width: 100%;
+  padding: 0.5rem 1rem;
+  background-color: #ffffff;
+  color: #202124;
+  border: 1px solid #9aa0a6;
+  border-radius: 4px;
+  appearance: none;
+  background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="24" width="24" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>');
+  background-repeat: no-repeat;
+  background-position: right 1rem center;
+  background-size: 1rem;
+}
+select.select:focus {
+  border-color: #1a73e8;
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
+}
+select.select:disabled {
+  background-color: #f8f9fa;
+  color: #9aa0a6;
+  cursor: not-allowed;
+}