@acusti/dropdown/dist/styles.d.ts

React component that renders a dropdown with a trigger and supports searching, keyboard access, and more

export declare const ROOT_CLASS_NAME = "uktdropdown";
export declare const ROOT_SELECTOR = ".uktdropdown";
export declare const BODY_CLASS_NAME = "uktdropdown-body";
export declare const LABEL_CLASS_NAME = "uktdropdown-label";
export declare const LABEL_TEXT_CLASS_NAME = "uktdropdown-label-text";
export declare const TRIGGER_CLASS_NAME = "uktdropdown-trigger";
export declare const BODY_SELECTOR = ".uktdropdown-body";
export declare const LABEL_SELECTOR = ".uktdropdown-label";
export declare const LABEL_TEXT_SELECTOR = ".uktdropdown-label-text";
export declare const TRIGGER_SELECTOR = ".uktdropdown-trigger";
export declare const BODY_MAX_HEIGHT_VAR = "--uktdd-body-max-height";
export declare const BODY_MAX_WIDTH_VAR = "--uktdd-body-max-width";
export declare const STYLES = "\n:root {\n  --uktdd-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n  --uktdd-body-bg-color: #fff;\n  --uktdd-body-bg-color-hover: rgb(105,162,249);\n  --uktdd-body-color-hover: #fff;\n  --uktdd-body-buffer: 10px;\n  --uktdd-body-max-height: calc(100vh - var(--uktdd-body-buffer));\n  --uktdd-body-max-width: calc(100vw - var(--uktdd-body-buffer));\n  --uktdd-body-pad-bottom: 9px;\n  --uktdd-body-pad-left: 12px;\n  --uktdd-body-pad-right: 12px;\n  --uktdd-body-pad-top: 9px;\n  --uktdd-label-pad-right: 10px;\n}\n.uktdropdown,\n.uktdropdown-trigger {\n  font-family: var(--uktdd-font-family);\n}\n.uktdropdown {\n  width: max-content;\n}\n.uktdropdown.disabled {\n  pointer-events: none;\n}\n.uktdropdown > * {\n  cursor: default;\n}\n.uktdropdown-label {\n  display: flex;\n  align-items: center;\n}\n.uktdropdown-label-text {\n  padding-right: var(--uktdd-label-pad-right);\n}\n.uktdropdown-body {\n  box-sizing: border-box;\n  position: absolute;\n  top: anchor(bottom);\n  left: anchor(left);\n  bottom: auto;\n  right: auto;\n  position-try-fallbacks: --uktdd-top-left, --uktdd-bottom-right, --uktdd-top-right;\n  min-height: 50px;\n  max-height: var(--uktdd-body-max-height);\n  min-width: min(50px, 100%);\n  max-width: var(--uktdd-body-max-width);\n  overflow: auto;\n  z-index: 2;\n  padding: var(--uktdd-body-pad-top) var(--uktdd-body-pad-right) var(--uktdd-body-pad-bottom) var(--uktdd-body-pad-left);\n  background-color: var(--uktdd-body-bg-color);\n  box-shadow: 0 8px 18px rgba(0,0,0,0.25);\n}\n@position-try --uktdd-top-left {\n  bottom: anchor(top);\n  left: anchor(left);\n  top: auto;\n  right: auto;\n}\n@position-try --uktdd-bottom-right {\n  top: anchor(bottom);\n  right: anchor(right);\n  bottom: auto;\n  left: auto;\n}\n@position-try --uktdd-top-right {\n  bottom: anchor(top);\n  right: anchor(right);\n  top: auto;\n  left: auto;\n}\n.uktdropdown-body.has-items {\n  user-select: none;\n}\n.uktdropdown-body [data-ukt-active] {\n  background-color: var(--uktdd-body-bg-color-hover);\n  color: var(--uktdd-body-color-hover);\n}\n";