@auronui/styles 1.0.10 → 1.0.12

package/components/autocomplete.css

@@ -192,6 +192,64 @@
   height: 2.75rem;
 }
 
+/* ─── Multiple overflow modes ────────────────────────────────────────────────── */
+
+/* wrap: trigger grows in height as chips wrap to new lines */
+.autocomplete__trigger[data-multiple-overflow="wrap"] {
+  height: auto;
+  min-height: 2.25rem;
+  flex-wrap: wrap;
+  row-gap: 0.25rem;
+  align-items: center;
+}
+
+.autocomplete__trigger--sm[data-multiple-overflow="wrap"] {
+  min-height: 1.75rem;
+}
+
+.autocomplete__trigger--lg[data-multiple-overflow="wrap"] {
+  min-height: 2.75rem;
+}
+
+/* label-inside + wrap: restore vertical padding so chips appear below the floating label */
+.autocomplete__trigger--label-inside[data-multiple-overflow="wrap"] {
+  min-height: 3.5rem;
+  padding-top: 1.625rem;
+  padding-bottom: 0.375rem;
+}
+
+.autocomplete__trigger--label-inside.autocomplete__trigger--sm[data-multiple-overflow="wrap"] {
+  min-height: 2.5rem;
+  padding-top: 1.125rem;
+  padding-bottom: 0.25rem;
+}
+
+.autocomplete__trigger--label-inside.autocomplete__trigger--lg[data-multiple-overflow="wrap"] {
+  min-height: 4rem;
+  padding-top: 1.875rem;
+  padding-bottom: 0.5rem;
+}
+
+/* In label-inside mode the input normally has padding-top to sit below the floating label.
+   In multiple mode the trigger's own padding-top already handles label spacing, so the
+   input's extra padding-top stacks and pushes it below the chips. Zero it out here. */
+.autocomplete__trigger--label-inside[data-multiple-overflow] .autocomplete__input {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.autocomplete__trigger--label-inside.autocomplete__trigger--sm[data-multiple-overflow] .autocomplete__input {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+/* collapse: input shrinks to a minimum so the chip area gets the remaining space */
+.autocomplete__trigger[data-multiple-overflow="collapse"] .autocomplete__input {
+  flex-shrink: 0;
+  min-width: 80px;
+  width: auto;
+}
+
 /* ─── Color modifiers ────────────────────────────────────────────────────────── */
 
 .autocomplete__trigger--default {
@@ -399,6 +457,30 @@
   transform: translateY(-110%) scale(0.85);
 }
 
+/* Multiple overflow: the trigger grows to fit chip rows, so top:50% drifts into
+   the chip area. Replace with a fixed top anchor so the label stays pinned
+   regardless of how tall the trigger grows. */
+.autocomplete__trigger--label-inside[data-multiple-overflow]:focus-within .autocomplete__label,
+.autocomplete__trigger--label-inside[data-multiple-overflow][data-focused="true"] .autocomplete__label,
+.autocomplete__trigger--label-inside[data-multiple-overflow][data-filled="true"] .autocomplete__label {
+  top: 0.375rem;
+  transform: scale(0.85);
+}
+
+.autocomplete__trigger--label-inside.autocomplete__trigger--sm[data-multiple-overflow]:focus-within .autocomplete__label,
+.autocomplete__trigger--label-inside.autocomplete__trigger--sm[data-multiple-overflow][data-focused="true"] .autocomplete__label,
+.autocomplete__trigger--label-inside.autocomplete__trigger--sm[data-multiple-overflow][data-filled="true"] .autocomplete__label {
+  top: 0.25rem;
+  transform: scale(0.85);
+}
+
+.autocomplete__trigger--label-inside.autocomplete__trigger--lg[data-multiple-overflow]:focus-within .autocomplete__label,
+.autocomplete__trigger--label-inside.autocomplete__trigger--lg[data-multiple-overflow][data-focused="true"] .autocomplete__label,
+.autocomplete__trigger--label-inside.autocomplete__trigger--lg[data-multiple-overflow][data-filled="true"] .autocomplete__label {
+  top: 0.5rem;
+  transform: scale(0.85);
+}
+
 /* Size-aware offsets for the inside variant */
 .autocomplete__trigger--label-inside.autocomplete__trigger--sm .autocomplete__label {
   font-size: var(--text-xs, 0.75rem);

package/components/select.css

@@ -315,7 +315,7 @@
 /* ─── Slots ──────────────────────────────────────────────────────────────────── */
 
 .select__value {
-  @apply flex-1 text-left bg-transparent outline-none border-0 p-0 h-auto text-inherit wrap-break-word;
+  @apply flex-1 text-left bg-transparent outline-none border-0 p-0 h-auto text-inherit wrap-break-word overflow-hidden;
 
   /* Removes the list-box-item indicator element from the select value */
   [data-slot="list-box-item-indicator"] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auronui/styles",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "Auron core styles — adapted for Reka UI",
   "type": "module",
   "license": "MIT",

package/src/components/index.ts

@@ -69,8 +69,6 @@ export * from "./switch";
 export * from "./switch-group";
 export * from "./table";
 export * from "./tabs";
-export * from "./tag";
-export * from "./tag-group";
 export * from "./text";
 export * from "./textarea";
 export * from "./time-field";

package/src/components/tag/index.ts

@@ -1 +0,0 @@
-export * from "./tag.styles";

package/src/components/tag/tag.styles.ts

@@ -1,37 +0,0 @@
-import type {VariantProps} from "../../utils";
-
-import {tv} from "tailwind-variants";
-
-export const tagVariants = tv({
-  defaultVariants: {
-    size: "md",
-    variant: "default",
-  },
-  slots: {
-    base: "tag",
-    removeButton: "tag__remove-button",
-  },
-  variants: {
-    size: {
-      lg: {
-        base: "tag--lg",
-      },
-      md: {
-        base: "tag--md",
-      },
-      sm: {
-        base: "tag--sm",
-      },
-    },
-    variant: {
-      default: {
-        base: "tag--default",
-      },
-      surface: {
-        base: "tag--surface",
-      },
-    },
-  },
-});
-
-export type TagVariants = VariantProps<typeof tagVariants>;

package/src/components/tag-group/index.ts

@@ -1 +0,0 @@
-export * from "./tag-group.styles";

package/src/components/tag-group/tag-group.styles.ts

@@ -1,12 +0,0 @@
-import type {VariantProps} from "../../utils";
-
-import {tv} from "tailwind-variants";
-
-export const tagGroupVariants = tv({
-  slots: {
-    base: "tag-group",
-    list: "tag-group__list",
-  },
-});
-
-export type TagGroupVariants = VariantProps<typeof tagGroupVariants>;