@quidgest/ui 0.3.2 → 0.4.0

package/lib/components/QSelect/QSelect.vue.d.ts

@@ -0,0 +1,135 @@
+import { type ListItem } from '@/components/QList';
+import type { Icon } from '@/components/QIcon/QIcon.vue';
+import type { InputSize } from '@/components/QInput/QInput.vue';
+import type { QListItemGroupProps } from '@/components/QList/QListItemGroup.vue';
+import type { Primitive } from '@/types/primitive';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    size: {
+        type: import("vue").PropType<InputSize>;
+        default: string;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    loading: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    modelValue: {
+        type: import("vue").PropType<Primitive>;
+        default: undefined;
+    };
+    readonly: {
+        type: import("vue").PropType<boolean>;
+    };
+    icons: {
+        type: import("vue").PropType<Record<string, Icon>>;
+        default: () => Record<string, Icon>;
+    };
+    items: {
+        type: import("vue").PropType<ListItem[]>;
+        required: true;
+    };
+    groups: {
+        type: import("vue").PropType<QListItemGroupProps[]>;
+        default: () => never[];
+    };
+    itemValue: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    itemLabel: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    clearable: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    texts: {
+        type: import("vue").PropType<Record<string, string>>;
+        default: () => Record<string, string>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Primitive | undefined) => void;
+    "before-show": () => void;
+    "before-hide": () => void;
+    show: () => void;
+    hide: () => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: import("vue").PropType<InputSize>;
+        default: string;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    loading: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    modelValue: {
+        type: import("vue").PropType<Primitive>;
+        default: undefined;
+    };
+    readonly: {
+        type: import("vue").PropType<boolean>;
+    };
+    icons: {
+        type: import("vue").PropType<Record<string, Icon>>;
+        default: () => Record<string, Icon>;
+    };
+    items: {
+        type: import("vue").PropType<ListItem[]>;
+        required: true;
+    };
+    groups: {
+        type: import("vue").PropType<QListItemGroupProps[]>;
+        default: () => never[];
+    };
+    itemValue: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    itemLabel: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    clearable: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    texts: {
+        type: import("vue").PropType<Record<string, string>>;
+        default: () => Record<string, string>;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((value: Primitive | undefined) => any) | undefined;
+    "onBefore-show"?: (() => any) | undefined;
+    "onBefore-hide"?: (() => any) | undefined;
+    onShow?: (() => any) | undefined;
+    onHide?: (() => any) | undefined;
+}, {
+    size: InputSize;
+    disabled: boolean;
+    loading: boolean;
+    modelValue: Primitive;
+    icons: Record<string, Icon>;
+    groups: QListItemGroupProps[];
+    itemValue: string;
+    itemLabel: string;
+    clearable: boolean;
+    texts: Record<string, string>;
+}, {}>, {
+    "body.prepend"?(_: {}): any;
+    "body.append"?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=QSelect.vue.d.ts.map

package/lib/components/QSelect/QSelect.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QSelect.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QSelect/QSelect.vue.ts"],"names":[],"mappings":"AAKC,OAAO,EAAS,KAAK,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAKzD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAA;AAC/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAA;AAChF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA0oBzC,SAAS;cAnCL,OAAO;aAKR,OAAO;gBApBJ,SAAS;;YAmCb,mBAAmB,EAAE;eAKlB,MAAM;eAKN,MAAM;eAxCN,OAAO;;;4BA3Ge,GAAG;2BACJ,GAAG;;AA9dvC,wBAooBI;AASJ,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/lib/components/QSelect/index.d.ts

@@ -0,0 +1,3 @@
+import QSelect from './QSelect.vue';
+export { QSelect };
+//# sourceMappingURL=index.d.ts.map

package/lib/components/QSelect/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QSelect/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,eAAe,CAAA;AAEnC,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/lib/components/QTooltip/QTooltip.vue.d.ts

@@ -16,6 +16,9 @@ declare const _default: import("vue").DefineComponent<{
     disabled: {
         type: import("vue").PropType<boolean>;
     };
+    modelValue: {
+        type: import("vue").PropType<boolean>;
+    };
     appearance: {
         type: import("vue").PropType<Appearance>;
         default: string;
@@ -32,9 +35,6 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<number>;
         default: number;
     };
-    persistent: {
-        type: import("vue").PropType<boolean>;
-    };
     placement: {
         type: import("vue").PropType<Placement>;
         default: string;
@@ -59,6 +59,9 @@ declare const _default: import("vue").DefineComponent<{
     disabled: {
         type: import("vue").PropType<boolean>;
     };
+    modelValue: {
+        type: import("vue").PropType<boolean>;
+    };
     appearance: {
         type: import("vue").PropType<Appearance>;
         default: string;
@@ -75,9 +78,6 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<number>;
         default: number;
     };
-    persistent: {
-        type: import("vue").PropType<boolean>;
-    };
     placement: {
         type: import("vue").PropType<Placement>;
         default: string;

package/lib/components/QTooltip/QTooltip.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QTooltip.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QTooltip/QTooltip.vue.ts"],"names":[],"mappings":"AAMC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAuQpC,OAAO;gBA1BD,UAAU;WAKf,OAAO;YAMN,MAAM;WAKP,MAAM;eAoBF,SAAS;aAUX,OAAO;;AA3DpB,wBAkEG"}
+{"version":3,"file":"QTooltip.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QTooltip/QTooltip.vue.ts"],"names":[],"mappings":"AAMC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA4QpC,OAAO;gBA1BD,UAAU;WAKf,OAAO;YAMN,MAAM;WAKP,MAAM;eAeF,SAAS;aAUX,OAAO;;AA3DpB,wBAkEG"}

package/lib/components/index.d.ts

@@ -2,9 +2,12 @@ export * from './QButton';
 export * from './QButtonGroup';
 export * from './QButtonToggle';
 export * from './QIcon';
+export * from './QInput';
 export * from './QLineLoader';
+export * from './QList';
 export * from './QOverlay';
 export * from './QPopover';
+export * from './QSelect';
 export * from './QSpinnerLoader';
 export * from './QTooltip';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,YAAY,CAAA"}

package/lib/composables/overlay.d.ts

@@ -1,13 +1,14 @@
 export type Appearance = 'regular' | 'inverted';
 export type Placement = 'top' | 'bottom' | 'left' | 'right';
-export type Trigger = 'hover' | 'click';
+export type Trigger = 'hover' | 'click' | 'manual';
 export type Position = {
     x: number;
     y: number;
     placement: Placement;
+    width?: number;
 };
 /**
  * Reposition the overlay based on its size and the position of its anchor.
  */
-export declare function computePosition(anchor: Element, overlay: Element, tentativePlacement?: Placement): Position;
+export declare function computePosition(anchor: Element, overlay: Element | null, tentativePlacement?: Placement, width?: 'auto' | 'anchor'): Position;
 //# sourceMappingURL=overlay.d.ts.map

package/lib/composables/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/composables/overlay.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,UAAU,CAAA;AAC/C,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAC3D,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,OAAO,CAAA;AAEvC,MAAM,MAAM,QAAQ,GAAG;IACtB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,SAAS,EAAE,SAAS,CAAA;CACpB,CAAA;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC9B,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,OAAO,EAChB,kBAAkB,GAAE,SAAmB,GACrC,QAAQ,CAuCV"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/composables/overlay.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,UAAU,CAAA;AAC/C,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAC3D,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAA;AAElD,MAAM,MAAM,QAAQ,GAAG;IACtB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,SAAS,EAAE,SAAS,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC9B,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,OAAO,GAAG,IAAI,EACvB,kBAAkB,GAAE,SAAmB,EACvC,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GACvB,QAAQ,CA+CV"}

package/lib/composables/uid.d.ts

@@ -0,0 +1,2 @@
+export declare function useUid(): string;
+//# sourceMappingURL=uid.d.ts.map

package/lib/composables/uid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"uid.d.ts","sourceRoot":"","sources":["../../src/composables/uid.ts"],"names":[],"mappings":"AAIA,wBAAgB,MAAM,WAErB"}

package/lib/directives/click-outside/index.d.ts

@@ -0,0 +1,7 @@
+import { ObjectDirective } from 'vue';
+interface HTMLElementWithClickOutsideEvent extends HTMLElement {
+    clickOutsideEvent: (event: Event) => void;
+}
+export declare const clickOutside: ObjectDirective<HTMLElementWithClickOutsideEvent>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/directives/click-outside/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/directives/click-outside/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,eAAe,EAAE,MAAM,KAAK,CAAA;AAEvD,UAAU,gCAAiC,SAAQ,WAAW;IAC7D,iBAAiB,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACzC;AAED,eAAO,MAAM,YAAY,EAAE,eAAe,CAAC,gCAAgC,CAkB1E,CAAA"}

package/lib/directives/index.d.ts

@@ -0,0 +1,2 @@
+export { clickOutside } from './click-outside';
+//# sourceMappingURL=index.d.ts.map

package/lib/directives/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/directives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA"}

package/lib/framework.d.ts

@@ -1,9 +1,9 @@
 import { Defaults } from './composables/defaults';
 import { AppThemes } from './composables/theme';
-import { Plugin } from 'vue';
+import { Directive, Plugin } from 'vue';
 export type AppDefinition = {
     themes?: AppThemes;
     defaults?: Defaults;
 };
-export declare function createFramework(components: Record<string, any>, options?: AppDefinition): Plugin;
+export declare function createFramework(components: Record<string, any>, directives: Record<string, Directive>, options?: AppDefinition): Plugin;
 //# sourceMappingURL=framework.d.ts.map

package/lib/framework.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"framework.d.ts","sourceRoot":"","sources":["../src/framework.ts"],"names":[],"mappings":"AACA,OAAO,EAAmB,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAiB,MAAM,qBAAqB,CAAA;AAG9D,OAAO,EAAO,MAAM,EAAE,MAAM,KAAK,CAAA;AAGjC,MAAM,MAAM,aAAa,GAAG;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAA;CACnB,CAAA;AAED,wBAAgB,eAAe,CAE9B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC/B,OAAO,CAAC,EAAE,aAAa,GACrB,MAAM,CAgBR"}
+{"version":3,"file":"framework.d.ts","sourceRoot":"","sources":["../src/framework.ts"],"names":[],"mappings":"AACA,OAAO,EAAmB,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAiB,MAAM,qBAAqB,CAAA;AAG9D,OAAO,EAAO,SAAS,EAAE,MAAM,EAAE,MAAM,KAAK,CAAA;AAG5C,MAAM,MAAM,aAAa,GAAG;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAA;CACnB,CAAA;AAED,wBAAgB,eAAe,CAE9B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC/B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EACrC,OAAO,CAAC,EAAE,aAAa,GACrB,MAAM,CAqBR"}

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAmB,MAAM,aAAa,CAAA;AAE5D,QAAA,MAAM,gBAAgB,aAAc,aAAa,yBAAyC,CAAA;AAE1F,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAA;AAE9C,cAAc,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAmB,MAAM,aAAa,CAAA;AAE5D,QAAA,MAAM,gBAAgB,aAAc,aAAa,yBACA,CAAA;AAEjD,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAA;AAE9C,cAAc,eAAe,CAAA"}

package/lib/styles/ui.css

@@ -310,6 +310,35 @@ template {
   display: none;
 }
 
+/* global settings */
+*,
+:after,
+:before {
+  box-sizing: border-box;
+  border: 0 solid #dce3e8;
+  outline-offset: 1px;
+}
+
+body {
+  font-size: 0.9rem;
+}
+
+* {
+  scrollbar-color: #ccc #f1f1f1;
+  scrollbar-width: thin;
+}
+*::-webkit-scrollbar {
+  width: 7px;
+}
+*::-webkit-scrollbar-thumb {
+  background-color: #ccc;
+  border-radius: 0.25rem;
+}
+*::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+  border-radius: 0.25rem;
+}
+
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
@@ -322,19 +351,20 @@ template {
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.15s ease-in-out;
+  transition: opacity 0.2s;
 }
 
 /* Components */
 .q-btn {
-  --outline-color: var(--q-theme-primary);
+  --box-shadow-tint: 0 0 0;
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 0.4rem;
-  border: thin solid;
+  border-width: 1px;
   background-color: transparent;
+  color: var(--q-theme-on-background);
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -342,14 +372,13 @@ template {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 0.15s;
-  outline-offset: 1px;
   line-height: 15px;
 }
 .q-btn:hover:not(:disabled) {
   cursor: pointer;
 }
 .q-btn:focus {
-  outline: 2px solid var(--outline-color);
+  outline: 2px solid rgb(var(--q-theme-primary-rgb)/0.25);
   z-index: 3;
 }
 .q-btn:focus:not(:focus-visible) {
@@ -393,6 +422,7 @@ template {
   visibility: hidden;
 }
 .q-btn--primary {
+  --box-shadow-tint: var(--q-theme-primary-rgb);
   background-color: var(--q-theme-primary);
   border-color: var(--q-theme-primary);
   color: var(--q-theme-on-primary);
@@ -402,6 +432,7 @@ template {
   border-color: var(--q-theme-primary-dark);
 }
 .q-btn--secondary {
+  --box-shadow-tint: var(--q-theme-primary-rgb);
   border-color: currentColor;
   color: var(--q-theme-primary);
 }
@@ -411,6 +442,7 @@ template {
   color: var(--q-theme-on-primary);
 }
 .q-btn--tertiary {
+  --box-shadow-tint: var(--q-theme-primary-rgb);
   background-color: transparent;
   border-color: transparent;
   color: var(--q-theme-primary);
@@ -420,6 +452,7 @@ template {
 }
 .q-btn--danger {
   --outline-color: var(--q-theme-danger-light);
+  --box-shadow-tint: var(--q-theme-danger-rgb);
   background-color: var(--q-theme-danger);
   border-color: var(--q-theme-danger);
   color: var(--q-theme-on-danger);
@@ -428,6 +461,9 @@ template {
   background-color: var(--q-theme-danger-dark);
   border-color: var(--q-theme-danger-dark);
 }
+.q-btn--plain:hover:not(:disabled) {
+  background-color: rgb(var(--q-theme-on-background-rgb)/0.1);
+}
 .q-btn--small {
   padding: 0.25rem;
   line-height: 14px;
@@ -444,7 +480,7 @@ template {
   border-color: transparent !important;
 }
 .q-btn--elevated {
-  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 2px 4px -1px rgb(var(--box-shadow-tint)/0.2), 0px 4px 5px 0px rgb(var(--box-shadow-tint)/0.14), 0px 1px 10px 0px rgb(var(--box-shadow-tint)/0.12);
 }
 .q-btn--block {
   display: block;
@@ -497,6 +533,58 @@ template {
   height: 1em;
 }
 
+.q-input {
+  display: flex;
+  align-items: center;
+  height: 2.25rem;
+  width: 100%;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  background-color: transparent;
+  padding: 0.26rem 0.25rem;
+  font-size: 0.9rem;
+  line-height: 1.5rem;
+  transition: color var(--transition-duration) var(--transition-timing-function);
+}
+.q-input:focus-within {
+  outline: 2px solid rgb(var(--q-theme-primary-rgb)/0.25);
+}
+.q-input__prepend, .q-input__append {
+  display: flex;
+  align-items: center;
+}
+.q-input__append {
+  margin-left: auto;
+}
+.q-input--readonly {
+  background-color: #eaebec;
+}
+.q-input--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.q-input--mini {
+  width: 4.35rem;
+}
+.q-input--small {
+  width: 6.525rem;
+}
+.q-input--medium {
+  width: 10.875rem;
+}
+.q-input--large {
+  width: 15.225rem;
+}
+.q-input--x-large {
+  width: 19.575rem;
+}
+.q-input--xx-large {
+  width: 36.975rem;
+}
+.q-input--block {
+  width: 100%;
+}
+
 .q-line-loader {
   width: 100%;
   height: 2px;
@@ -527,19 +615,95 @@ template {
     transform: translateX(0%);
   }
 }
+.q-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+  margin: 0;
+  padding: 0;
+  -webkit-overflow-scrolling: touch;
+  width: 100%;
+  border-radius: 0.25rem;
+}
+.q-list:focus-visible {
+  outline: 2px solid rgb(var(--q-theme-primary-rgb)/0.25);
+}
+
+.q-list-item-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  width: inherit;
+}
+.q-list-item-group__title {
+  color: rgb(var(--q-theme-on-background-rgb)/0.62);
+  padding: 5px 6px;
+  line-height: 15px;
+  width: inherit;
+}
+.q-list-item-group + .q-list-item-group {
+  padding-top: 0.25rem;
+  margin-top: 0.25rem;
+  border-top-width: 1px;
+}
+
+.q-list-item {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+  padding: 5px 6px;
+  list-style: none;
+  line-height: 15px;
+  word-wrap: break-word;
+  -webkit-touch-callout: none;
+  width: inherit;
+  cursor: pointer;
+  border-radius: 0.25rem;
+  outline: none;
+}
+.q-list-item--disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.5;
+}
+.q-list-item:hover, .q-list-item:focus-visible, .q-list-item--highlighted {
+  background-color: var(--q-theme-primary-light);
+}
+.q-list-item--selected {
+  background-color: rgb(var(--q-theme-primary-rgb)/0.24);
+}
+.q-list-item--selected:hover, .q-list-item--selected:focus-visible, .q-list-item--selected--highlighted {
+  background-color: rgb(var(--q-theme-primary-rgb)/0.39);
+}
+.q-list-item em {
+  font-style: normal;
+  text-decoration: underline;
+}
+.q-list-item__check {
+  margin-left: auto;
+}
+.q-list-item + .q-list-item {
+  margin-top: 1px;
+}
+
 .q-overlay {
   --q-overlay-bg: var(--q-theme-background);
   --q-overlay-color: var(--q-theme-on-background);
   --q-overlay-border-color: rgb(var(--q-theme-on-background-rgb) / 0.1);
   position: absolute;
+  z-index: 1070;
 }
 .q-overlay__content {
   display: block;
   position: relative;
-  transform: translateX(-50%);
-  width: -moz-max-content;
-  width: max-content;
-  z-index: 1070;
+  width: 100%;
   background-color: var(--q-overlay-bg);
   color: var(--q-overlay-color);
   background-clip: padding-box;
@@ -660,6 +824,70 @@ template {
   border-bottom-color: rgb(var(--q-theme-on-background-rgb)/0.04);
 }
 
+.q-select {
+  /* Icon of the selected item */
+}
+.q-select:not(.q-select--readonly) {
+  background-color: transparent;
+}
+.q-select:not(.q-select--readonly):not(.q-select--disabled) {
+  cursor: pointer;
+}
+.q-select__placeholder {
+  font-style: italic;
+  color: rgb(var(--q-theme-on-background-rgb)/0.5);
+}
+.q-select--expanded .q-select__chevron {
+  transform: rotate(-180deg);
+}
+.q-select .q-input__prepend {
+  padding-left: 6px;
+  padding-right: 0.25rem;
+}
+
+.q-select__clear,
+.q-select__chevron,
+.q-select__search-icon {
+  opacity: 0.5;
+}
+
+.q-select__clear:hover,
+.q-select__chevron:hover {
+  opacity: 1;
+}
+
+.q-select__chevron {
+  transition: all 0.2s;
+}
+
+.q-select__body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  width: 100%;
+  padding: 0.25rem 0;
+}
+.q-select__body .q-list-item {
+  width: calc(100% - 0.5rem);
+}
+
+.q-select__search {
+  width: calc(100% - 0.5rem);
+}
+.q-select__search:focus-within {
+  outline: none;
+}
+
+.q-select__items {
+  max-height: 240px;
+}
+
+.q-select__loader,
+.q-select__empty {
+  margin: 1rem 0;
+}
+
 .q-spinner-loader {
   display: flex;
   position: relative;