diff --git a/src/components/input/Select.tsx b/src/components/input/Select.tsx
index c119a2b8..7db136cb 100644
--- a/src/components/input/Select.tsx
+++ b/src/components/input/Select.tsx
@@ -440,7 +440,6 @@ type BaseSelectProps = CompositeProps & {
/**
* Indicates how overflowing content should be handled in the listbox.
*
-<<<<<<< HEAD
* - `truncate`: Truncate the options via `text-overflow: ellipsis`, so that
* they all fit in one line. This is the default value.
* - `wrap`: Let options content wrap onto multiple lines via
@@ -448,16 +447,6 @@ type BaseSelectProps = CompositeProps & {
*
* Complex content may still need to provide its own styling to handle content
* overflow.
-=======
- * - `truncate`: Truncate the options so that they all fit in one line. An
- * ellipsis will be rendered where needed.
- * This is the default value.
- * - `wrap`: Let options content wrap multiple lines so that all content is
- * visible.
- *
- * This behavior can be also overwritten by providing more complex options
- * content.
->>>>>>> 51ceff5 (Prevent Select listbox to grow out of viewport)
*/
listboxOverflow?: ListboxOverflow;
};
diff --git a/src/pattern-library/components/patterns/prototype/SelectPage.tsx b/src/pattern-library/components/patterns/prototype/SelectPage.tsx
index cdd13b6e..ec4d02d6 100644
--- a/src/pattern-library/components/patterns/prototype/SelectPage.tsx
+++ b/src/pattern-library/components/patterns/prototype/SelectPage.tsx
@@ -447,6 +447,40 @@ export default function SelectPage() {
+
+
+
+ Determines the behavior of the listbox options when their
+ content is larger than the listbox.
+
+
+ {"'truncate'"}: Text will use one line and be
+ truncated with an ellipsis.
+
+
+ {"'wrap'"}: Text will span multiple lines if
+ needed, ensuring all content is visible.
+
+
+
+
+ {"'truncate' | 'wrap'"}
+
+
+ {"'truncate'"}
+
+
+
+
+
diff --git a/src/pattern-library/examples/select-truncate-listbox.tsx b/src/pattern-library/examples/select-truncate-listbox.tsx
new file mode 100644
index 00000000..f38390ac
--- /dev/null
+++ b/src/pattern-library/examples/select-truncate-listbox.tsx
@@ -0,0 +1,51 @@
+import { useId, useState } from 'preact/hooks';
+
+import { Select } from '../..';
+
+const items = [
+ {
+ id: '1',
+ name: 'All students - content is very long and will not fit the listbox',
+ },
+ {
+ id: '2',
+ name: 'Albert Banana - content is very long and will not fit the listbox',
+ },
+ {
+ id: '3',
+ name: 'Bernard California - content is very long and will not fit the listbox',
+ },
+ {
+ id: '4',
+ name: 'Cecelia Davenport - content is very long and will not fit the listbox',
+ },
+ {
+ id: '5',
+ name: 'Doris Evanescence - content is very long and will not fit the listbox',
+ },
+];
+
+export default function App() {
+ const [value, setSelected] = useState<{ id: string; name: string }>();
+ const selectId = useId();
+
+ return (
+
+
+
+
+ );
+}
diff --git a/src/pattern-library/examples/select-wrap-listbox.tsx b/src/pattern-library/examples/select-wrap-listbox.tsx
new file mode 100644
index 00000000..a7a21bc5
--- /dev/null
+++ b/src/pattern-library/examples/select-wrap-listbox.tsx
@@ -0,0 +1,51 @@
+import { useId, useState } from 'preact/hooks';
+
+import { Select } from '../..';
+
+const items = [
+ {
+ id: '1',
+ name: 'All students - content is very long and will not fit the listbox',
+ },
+ {
+ id: '2',
+ name: 'Albert Banana - content is very long and will not fit the listbox',
+ },
+ {
+ id: '3',
+ name: 'Bernard California - content is very long and will not fit the listbox',
+ },
+ {
+ id: '4',
+ name: 'Cecelia Davenport - content is very long and will not fit the listbox',
+ },
+ {
+ id: '5',
+ name: 'Doris Evanescence - content is very long and will not fit the listbox',
+ },
+];
+
+export default function App() {
+ const [value, setSelected] = useState<{ id: string; name: string }>();
+ const selectId = useId();
+
+ return (
+