origam 0.3.9 → 2.2.1

package/dist/src/components/Radio/OrigamRadioGroup.vue

@@ -60,7 +60,11 @@
 <script setup>
 import { computed, ref, StyleValue, useAttrs } from "vue";
 import { OrigamInput, OrigamLabel, OrigamRadio, OrigamSelectionControlGroup } from "../../components";
-import { useProps, useVModel } from "../../composables";
+import {
+  useProps,
+  useStyle,
+  useVModel
+} from "../../composables";
 import { DENSITY } from "../../enums";
 import { filterInputAttrs, getUid } from "../../utils";
 const props = defineProps({
@@ -88,17 +92,13 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -132,6 +132,7 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  size: { type: null, required: false },
   value: { type: null, required: false },
   required: { type: Boolean, required: false },
   inline: { type: Boolean, required: false },
@@ -141,7 +142,10 @@ const props = defineProps({
   type: { type: String, required: false },
   valueComparator: { type: Function, required: false },
   ripple: { type: [Boolean, Object], required: false },
-  items: { type: Array, required: false }
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
+  hover: { type: [Boolean, Object], required: false },
+  items: { type: [Array, Object], required: false }
 });
 const { filterProps } = useProps(props);
 const origamSelectionControlGroupRef = ref();
@@ -182,7 +186,14 @@ const radioGroupClasses = computed(() => {
     props.class
   ];
 });
+const { id: styleId, css, load, isLoaded, unload } = useStyle(radioGroupStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded,
+  styleId
 });
 </script>

package/dist/src/components/RatingField/OrigamRatingField.vue

@@ -33,12 +33,24 @@
 					<origam-rating-field-item
 							ref="origamRatingFieldItemRef"
 							:index="-1"
+							:length="length"
 							:show-star="false"
 							:value="0"
 							v-bind="{...itemState[0], ...eventState[0]}"
 					/>
 				</div>
 
+				<origam-btn
+						v-if="clearable && normalizedValue > 0 && !disabled && !readonly"
+						:aria-label="t('origam.rating.clear')"
+						:icon="MDI_ICONS.CLOSE_CIRCLE_OUTLINE"
+						:variant="VARIANT.TEXT"
+						class="origam-rating-field__clear"
+						data-cy="rating-field-clear"
+						size="small"
+						@click="model = 0"
+				/>
+
 				<template
 						v-for="(range, index) in ranges"
 						:key="index"
@@ -56,12 +68,14 @@
 								<origam-rating-field-item
 										:checked="isChecked(range - 0.5)"
 										:index="index * 2"
+										:length="length"
 										:value="range - 0.5"
 										v-bind="{...itemState[index * 2], ...eventState[(index * 2) + 1]}"
 								/>
 								<origam-rating-field-item
 										:checked="isChecked(range)"
 										:index="(index * 2) + 1"
+										:length="length"
 										:value="range"
 										v-bind="{...itemState[(index * 2) + 1], ...eventState[(index * 2) + 2]}"
 								/>
@@ -70,6 +84,7 @@
 								<origam-rating-field-item
 										:checked="isChecked(range)"
 										:index="index"
+										:length="length"
 										:value="range"
 										v-bind="{...itemState[index], ...eventState[index + 1]}"
 								/>
@@ -128,9 +143,14 @@
 
 <script setup>
 import { computed, ref, shallowRef, StyleValue, useAttrs, useSlots } from "vue";
-import { OrigamInput, OrigamLabel, OrigamRatingFieldItem } from "../../components";
-import { useProps, useVModel } from "../../composables";
-import { BLOCK, DENSITY, SIZES } from "../../enums";
+import { OrigamBtn, OrigamInput, OrigamLabel, OrigamRatingFieldItem } from "../../components";
+import {
+  useLocale,
+  useProps,
+  useStyle,
+  useVModel
+} from "../../composables";
+import { BLOCK, DENSITY, MDI_ICONS, SIZES, VARIANT } from "../../enums";
 import { clamp, createRange, filterInputAttrs, getUid } from "../../utils";
 const props = defineProps({
   name: { type: String, required: false },
@@ -174,18 +194,13 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   size: { type: null, required: false, default: SIZES.DEFAULT },
   tag: { type: String, required: false, default: "div" },
   centerAffix: { type: Boolean, required: false },
@@ -194,6 +209,7 @@ const props = defineProps({
   hint: { type: String, required: false },
   persistentHint: { type: Boolean, required: false },
   messages: { type: [Array, String], required: false },
+  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
@@ -222,6 +238,7 @@ const { filterProps } = useProps(props);
 const origamInputRef = ref();
 const origamRatingFieldItemRef = ref();
 const slots = useSlots();
+const { t } = useLocale();
 const model = useVModel(props, "modelValue");
 const attrs = useAttrs();
 const normalizedValue = computed(() => {
@@ -296,8 +313,14 @@ const ratingFieldClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(ratingFieldStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 

package/dist/src/components/RatingField/OrigamRatingFieldItem.vue

@@ -38,8 +38,8 @@
 <script setup>
 import { computed, ref, StyleValue } from "vue";
 import { OrigamBtn } from "../../components";
-import { useLocale, useProps } from "../../composables";
-import { MDI_ICONS } from "../../enums";
+import { useLocale, useProps, useStyle } from "../../composables";
+import { MDI_ICONS, VARIANT } from "../../enums";
 const props = defineProps({
   name: { type: String, required: false },
   index: { type: Number, required: false, default: -1 },
@@ -61,11 +61,6 @@ const props = defineProps({
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "div" },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false },
   ripple: { type: [Boolean, Object], required: false },
   size: { type: null, required: false },
@@ -92,7 +87,7 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
@@ -110,7 +105,7 @@ const ratingBtnProps = computed(() => {
   const isFullIcon = props.isHovering ? props.isHovered : props.isFilled;
   const icon = isFullIcon ? props.fullIcon : props.emptyIcon;
   const btnProps = origamBtnRef.value?.filterProps(props, ["class", "style", "id", "bgColor", "activeBgColor", "hoverBgColor"]);
-  return { ...btnProps, icon };
+  return { variant: VARIANT.TEXT, ...btnProps, icon };
 });
 const handleMouseEnter = (e) => {
   emits("mouseenter", e);
@@ -136,8 +131,15 @@ const ratingFieldItemClasses = computed(() => {
     props.class
   ];
 });
+const { id: styleId, css, load, isLoaded, unload } = useStyle(ratingFieldItemStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded,
+  styleId
 });
 </script>
 

package/dist/src/components/Responsive/OrigamResponsive.vue

@@ -26,7 +26,8 @@ import {
   useMargin,
   usePadding,
   useProps,
-  useRounded
+  useRounded,
+  useStyle
 } from "../../composables";
 const props = defineProps({
   aspectRatio: { type: [String, Number], required: false },
@@ -64,7 +65,7 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
@@ -105,8 +106,14 @@ const responsiveContentClasses = computed(() => {
     props.contentClass
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(responsiveStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
@@ -148,39 +155,3 @@ defineExpose({
 		}
 	}
 </style>
-
-<style>
-	:root {
-		--origam-responsive---display: flex;
-		--origam-responsive---flex: 1 0 auto;
-		--origam-responsive---max-height: 100%;
-		--origam-responsive---max-width: 100%;
-		--origam-responsive---min-height: 0;
-		--origam-responsive---min-width: 0;
-		--origam-responsive---width: auto;
-		--origam-responsive---height: auto;
-		--origam-responsive---overflow: hidden;
-		--origam-responsive---position: relative;
-
-		--origam-responsive--inline---display: inline-flex;
-		--origam-responsive--inline---flex: 0 0 auto;
-
-		--origam-responsive__content---flex: 1 0 0px;
-		--origam-responsive__content---max-width: 100%;
-		--origam-responsive__content---margin-block-start: 0;
-		--origam-responsive__content---margin-block-end: 0;
-		--origam-responsive__content---margin-block: var(--origam-responsive__content---margin-block-start) var(--origam-responsive__content---margin-block-end);
-		--origam-responsive__content---margin-inline-start: 0;
-		--origam-responsive__content---margin-inline-end: 0;
-		--origam-responsive__content---margin-inline: var(--origam-responsive__content---margin-inline-start) var(--origam-responsive__content---margin-inline-end);
-		--origam-responsive__content---margin: var(--origam-responsive__content---margin-block) var(--origam-responsive__content---margin-inline);
-
-		--origam-responsive__sizer---flex: 1 0 0px;
-		--origam-responsive__sizer---transition-properties: padding-bottom;
-		--origam-responsive__sizer---transition-duration: 0.2s;
-		--origam-responsive__sizer---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-		--origam-responsive__sizer---transition: var(--origam-responsive__sizer---transition-properties) var(--origam-responsive__sizer---transition-duration) var(--origam-responsive__sizer---transition-timing-function);
-		--origam-responsive__sizer---pointer-events: none;
-		--origam-responsive__sizer---padding-block-end: 0;
-	}
-</style>

package/dist/src/components/Select/OrigamSelect.vue

@@ -70,7 +70,10 @@
 					:eager="eager"
 					:location="BLOCK.BOTTOM"
 					:max-height="310"
+					:offset="0"
 					:open-on-click="false"
+					:transition="{ component: OrigamExpandY }"
+					:viewport-margin="0"
 					activator="parent"
 					content-class="origam-select__content"
 					v-bind="{ ...menuProps }"
@@ -108,7 +111,7 @@
 										:items="displayItems"
 										renderless
 								>
-									<template #item:renderless="{item, index, itemRef}">
+									<template #item.renderless="{item, index, itemRef}">
 										<slot
 												name="item"
 												v-bind="{item, index, props: menuListItemProps(item, itemRef, index)}"
@@ -118,7 +121,7 @@
 													v-bind="menuListItemProps(item, itemRef, index)"
 											>
 												<template
-														v-if="showCheckbox || item.props.prependAvatar || item.props.prependIcon"
+														v-if="showCheckbox || item.prependAvatar || item.prependIcon"
 														#prepend="{isSelected}"
 												>
 													<origam-checkbox-btn
@@ -129,13 +132,13 @@
 													/>
 
 													<origam-avatar
-															v-if="item.props.prependAvatar"
-															:image="item.props.prependAvatar"
+															v-if="item.prependAvatar"
+															:image="item.prependAvatar"
 													/>
 
 													<origam-icon
-															v-if="item.props.prependIcon"
-															:icon="item.props.prependIcon"
+															v-if="item.prependIcon"
+															:icon="item.prependIcon"
 													/>
 												</template>
 
@@ -172,9 +175,8 @@
 					:key="index"
 			>
 				<div
-						:class="{'origam-select__selection--selected' : index === selectionIndex}"
+						:class="getSelectionClasses(index)"
 						:style="[textColorStyles]"
-						class="origam-select__selection"
 				>
 					<template v-if="hasChips">
 						<slot
@@ -260,6 +262,7 @@
 <script setup>
 import {
   computed,
+  getCurrentInstance,
   inject,
   mergeProps,
   nextTick,
@@ -275,6 +278,7 @@ import {
   OrigamAvatar,
   OrigamCheckboxBtn,
   OrigamChip,
+  OrigamExpandY,
   OrigamIcon,
   OrigamList,
   OrigamListItem,
@@ -283,7 +287,16 @@ import {
   OrigamTranslateScale,
   OrigamVirtualScroll
 } from "../../components";
-import { useFilter, useItems, useLocale, useProps, useScrolling, useTextColor, useVModel } from "../../composables";
+import {
+  useFilter,
+  useItems,
+  useLocale,
+  useProps,
+  useScrolling,
+  useStyle,
+  useTextColor,
+  useVModel
+} from "../../composables";
 import { IN_BROWSER, ORIGAM_FORM_KEY } from "../../consts";
 import {
   BLOCK,
@@ -303,7 +316,7 @@ const props = defineProps({
   hideSelected: { type: Boolean, required: false },
   listProps: { type: Object, required: false },
   menu: { type: Boolean, required: false },
-  menuIcon: { type: null, required: false, default: MDI_ICONS.MENU_DOWN_OUTLINE },
+  menuIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_DOWN },
   menuProps: { type: Object, required: false },
   chipProps: { type: Object, required: false },
   multiple: { type: Boolean, required: false },
@@ -321,10 +334,6 @@ const props = defineProps({
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   autofocus: { type: Boolean, required: false },
   counter: { type: [Boolean, Number, String], required: false },
   counterValue: { type: [Number, Function], required: false },
@@ -335,12 +344,12 @@ const props = defineProps({
   type: { type: null, required: false, default: TEXT_FIELD_TYPE.TEXT },
   modelModifiers: { type: [String, Boolean], required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
-  active: { type: Boolean, required: false },
   centerAffix: { type: Boolean, required: false, default: true },
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  error: { type: Boolean, required: false },
+  error: { type: [String, Boolean], required: false },
   flat: { type: Boolean, required: false },
+  inline: { type: Boolean, required: false },
   label: { type: String, required: false },
   prefix: { type: String, required: false },
   suffix: { type: String, required: false },
@@ -348,7 +357,7 @@ const props = defineProps({
   reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
-  loading: { type: [Boolean, Number], required: false },
+  loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
   appendInnerAvatar: { type: String, required: false },
@@ -358,18 +367,9 @@ const props = defineProps({
   clearIcon: { type: null, required: false },
   clearable: { type: Boolean, required: false },
   focused: { type: Boolean, required: false },
-  hideDetails: { type: [Boolean, String], required: false },
-  hideSpinButtons: { type: Boolean, required: false },
-  hint: { type: String, required: false },
-  persistentHint: { type: Boolean, required: false },
-  messages: { type: [Array, String], required: false },
-  padding: { type: [Boolean, Number, String], required: false },
-  paddingTop: { type: [Boolean, Number, String], required: false },
-  paddingLeft: { type: [Boolean, Number, String], required: false },
-  paddingBottom: { type: [Boolean, Number, String], required: false },
-  paddingRight: { type: [Boolean, Number, String], required: false },
-  paddingBlock: { type: [Boolean, Number, String], required: false },
-  paddingInline: { type: [Boolean, Number, String], required: false },
+  text: { type: String, required: false },
+  floating: { type: Boolean, required: false },
+  name: { type: String, required: false },
   margin: { type: [Boolean, Number, String], required: false },
   marginTop: { type: [Boolean, Number, String], required: false },
   marginLeft: { type: [Boolean, Number, String], required: false },
@@ -377,11 +377,13 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true, default: true },
-  roundedTopRight: { type: [Boolean, Number, String], required: false },
-  roundedTopLeft: { type: [Boolean, Number, String], required: false },
-  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
-  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  padding: { type: [Boolean, Number, String], required: false },
+  paddingTop: { type: [Boolean, Number, String], required: false },
+  paddingLeft: { type: [Boolean, Number, String], required: false },
+  paddingBottom: { type: [Boolean, Number, String], required: false },
+  paddingRight: { type: [Boolean, Number, String], required: false },
+  paddingBlock: { type: [Boolean, Number, String], required: false },
+  paddingInline: { type: [Boolean, Number, String], required: false },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -391,7 +393,21 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
+  variant: { type: null, required: false },
   elevation: { type: [Number, String], required: false },
+  size: { type: null, required: false },
+  hideDetails: { type: [Boolean, String], required: false },
+  hideSpinButtons: { type: Boolean, required: false },
+  hint: { type: String, required: false },
+  persistentHint: { type: Boolean, required: false },
+  messages: { type: [Array, String], required: false },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
@@ -401,7 +417,6 @@ const props = defineProps({
   direction: { type: null, required: false, default: DIRECTION.HORIZONTAL },
   errorMessages: { type: [Array, String], required: false },
   maxErrors: { type: [Number, String], required: false },
-  name: { type: String, required: false },
   readonly: { type: Boolean, required: false },
   rules: { type: Array, required: false },
   modelValue: { type: null, required: false, default: null },
@@ -434,8 +449,9 @@ const origamMenuRef = ref();
 const origamVirtualScrollRef = ref();
 const origamListRef = ref();
 const origamChipsRef = ref();
+const vm = getCurrentInstance();
 const slots = useSlots();
-const { textColorStyles } = useTextColor(toRef(props, "color"));
+const { textColorClasses, textColorStyles } = useTextColor(toRef(props, "color"));
 const { items, transformIn, transformOut } = useItems(props);
 const model = useVModel(
   props,
@@ -566,6 +582,13 @@ const handleClear = () => {
 const handleMousedownControl = () => {
   if (menuDisabled.value) return;
   menu.value = !menu.value;
+  if (props.autocomplete && !props.multiple && search.value) {
+    setTimeout(() => {
+      const root = vm?.proxy?.$el;
+      const input = root?.querySelector("input");
+      input?.select();
+    }, 0);
+  }
 };
 const handleMousedownMenuIcon = (e) => {
   if (menuDisabled.value) return;
@@ -741,9 +764,18 @@ watch(isFocused, (val, oldVal) => {
   if (val === oldVal) return;
   if (val) {
     isSelecting.value = true;
-    search.value = props.multiple ? "" : String(model.value?.at(-1)?.props.title ?? "");
+    if (props.autocomplete) {
+      search.value = props.multiple ? "" : String(model.value?.at(-1)?.props.title ?? "");
+    }
     isPristine.value = true;
-    nextTick(() => isSelecting.value = false);
+    nextTick(() => {
+      isSelecting.value = false;
+      if (props.autocomplete && !props.multiple && search.value) {
+        const root = vm?.proxy?.$el;
+        const input = root?.querySelector("input");
+        input?.select();
+      }
+    });
   } else {
     if (!props.multiple && search.value == null) model.value = [];
     else if (highlightFirst.value && !listHasFocus.value && !model.value.some(({ value }) => value === displayItems.value[0].value)) {
@@ -799,6 +831,13 @@ const selectStyles = computed(() => {
     props.style
   ];
 });
+const getSelectionClasses = (index) => {
+  return [
+    "origam-select__selection",
+    { "origam-select__selection--selected": index === selectionIndex.value },
+    textColorClasses.value
+  ];
+};
 const selectClasses = computed(() => {
   return [
     "origam-select",
@@ -812,11 +851,17 @@ const selectClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(selectStyles);
 defineExpose(forwardRefs({
   filterProps,
   isFocused,
   menu,
-  handleSelect
+  handleSelect,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 }, origamTextFieldRef));
 </script>
 
@@ -919,6 +964,7 @@ defineExpose(forwardRefs({
 						opacity: 1;
 						pointer-events: auto;
 						caret-color: inherit;
+						position: static;
 					}
 				}
 
@@ -960,7 +1006,7 @@ defineExpose(forwardRefs({
 					input {
 						left: 0;
 						right: 0;
-						padding-inline: inherit;
+						padding-inline: 0;
 						opacity: 1;
 					}
 
@@ -981,6 +1027,8 @@ defineExpose(forwardRefs({
 					&.origam-field--focused {
 						#{$this}__selection {
 							opacity: 0;
+							position: absolute;
+							pointer-events: none;
 						}
 					}
 				}
@@ -990,7 +1038,18 @@ defineExpose(forwardRefs({
 </style>
 
 <style>
-	:root {
+	.origam-select__content .origam-menu__content {
+		display: block;
+		width: 100%;
+		max-width: none;
+	}
+
+	.origam-select__content .origam-menu__list {
+		max-width: none;
+	}
 
+	.origam-select__content .origam-list-item {
+		--origam-list-item---min-height: 32px;
+		--origam-list-item---padding-inline-start: 32px;
 	}
 </style>