@fpkit/acss 6.0.0 → 6.1.0

package/src/components/form/select.tsx

@@ -5,30 +5,142 @@ import { useDisabledState } from '../../hooks/use-disabled-state'
 export type { SelectProps } from './form.types'
 import type { SelectProps } from './form.types'
 
-export type SelectOptionsProps = {
+/**
+ * Option component props interface
+ * Extends native HTML option props with fpkit component conventions
+ *
+ * @interface OptionProps
+ */
+export interface OptionProps extends Omit<React.ComponentPropsWithoutRef<'option'>, 'className'> {
+  /**
+   * Value for the select option (required, unless using legacy selectValue)
+   */
+  value?: string | number
+
+  /**
+   * Display label for the option (defaults to value if not provided)
+   */
+  label?: string
+
+  /**
+   * CSS class names (preferred over 'className' for consistency with fpkit components)
+   */
+  classes?: string
+
+  /**
+   * Inline CSS styles object
+   */
+  styles?: React.CSSProperties
+
   /**
-   * Label for the select option
+   * Disabled state for the option
+   * @default false
    */
-  selectLabel: string
+  disabled?: boolean
 
   /**
-   * Value for the select option. Can be a number or string.
+   * Children content (overrides label if provided)
    */
-  selectValue: string
+  children?: React.ReactNode
+
+  /**
+   * Visual variant for styling via data-option attribute
+   * Use with CSS: option[data-option="primary"] { ... }
+   * @example 'primary' | 'secondary' | 'success' | 'error'
+   */
+  variant?: string
+
+  /**
+   * Size variant for styling via data-size attribute
+   * @example 'sm' | 'md' | 'lg'
+   */
+  size?: string
+
+  /**
+   * Additional data attributes for custom styling
+   * @example { 'data-highlighted': true, 'data-category': 'premium' }
+   */
+  dataAttributes?: Record<string, string | boolean | number>
 }
 
 /**
- * Option component for select.
- * @param {SelectOptionsProps} param0 - The component props.
- * @param {string} param0.selectValue - Value for the option.
- * @param {string} [param0.selectLabel] - Label for the option.
+ * Option component - Select dropdown option element
+ *
+ * A component for creating accessible option elements within Select components.
+ * Follows fpkit component conventions with support for ref forwarding, custom styling,
+ * and consistent prop naming.
+ *
+ * @component
+ * @example
+ * // Basic option
+ * <Select.Option value="us" label="United States" />
+ *
+ * @example
+ * // Option with children
+ * <Select.Option value="uk">
+ *   United Kingdom
+ * </Select.Option>
+ *
+ * @example
+ * // Disabled option
+ * <Select.Option value="disabled" label="Not Available" disabled />
+ *
+ * @param {OptionProps} props - Component props
+ * @returns {JSX.Element} Option element
  */
-export const Option = ({ selectValue, selectLabel }: SelectOptionsProps) => {
-  return (
-    <option value={selectValue}>
-      {selectLabel || selectValue}
-    </option>
-  )
+export const Option = React.forwardRef<HTMLOptionElement, OptionProps & Partial<SelectOptionsProps>>(
+  (
+    {
+      value,
+      label,
+      classes,
+      styles,
+      disabled,
+      children,
+      variant,
+      size,
+      dataAttributes,
+      // Legacy props (backwards compatibility)
+      selectValue,
+      selectLabel,
+      ...props
+    },
+    ref
+  ) => {
+    // Map legacy props to new props
+    const optionValue = value ?? selectValue
+    const optionLabel = label ?? selectLabel
+
+    // Build data attributes object for styling
+    const combinedDataAttrs = {
+      ...(variant && { 'data-option': variant }),
+      ...(size && { 'data-size': size }),
+      ...dataAttributes,
+    }
+
+    return (
+      <UI
+        as="option"
+        ref={ref}
+        value={optionValue}
+        className={classes}
+        style={styles}
+        disabled={disabled}
+        {...combinedDataAttrs}
+        {...props}
+      >
+        {children || optionLabel || optionValue}
+      </UI>
+    )
+  }
+)
+
+Option.displayName = 'Select.Option'
+
+// Legacy type export for backwards compatibility
+export type SelectOptionsProps = Omit<OptionProps, 'classes' | 'styles'> & {
+  selectValue: string | number
+  selectLabel?: string
 }
 
 /**
@@ -151,8 +263,13 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
 
 Select.displayName = 'Select'
 
+// Create a compound component with proper typing
+type SelectComponent = typeof Select & {
+  Option: typeof Option
+}
+
 // Type assertion to allow adding static property to ForwardRefExoticComponent
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 ;(Select as any).Option = Option
 
-export default Select
+export default Select as SelectComponent

package/src/components/heading/heading.stories.tsx

@@ -7,11 +7,10 @@ import Heading from "./heading";
  * @deprecated This component is deprecated. Use Title component instead.
  */
 const meta: Meta<typeof Heading> = {
-  title: "FP.REACT Components/Heading (Deprecated)",
+  title: "FP.React Components/Heading (Deprecated)",
   component: Heading,
   tags: ["version:1.0.0", "deprecated"],
   parameters: {
-    actions: { argTypesRegex: "^on.*" },
     docs: {
       description: {
         component: `

package/src/components/images/figure.stories.tsx

@@ -4,11 +4,10 @@ import { within, expect } from "storybook/test";
 import Figure from "./figure";
 
 const meta: Meta<typeof Figure> = {
-  title: "FP.REACT Components/Figure",
+  title: "FP.React Components/Figure",
   component: Figure,
   tags: ["version:1.0.0"],
   parameters: {
-    actions: { argTypesRegex: "^on.*" },
     docs: {
       description: {
         component: `A semantic figure component for displaying images with captions, using CSS custom properties for flexible styling.

package/src/components/images/img.stories.tsx

@@ -4,7 +4,7 @@ import { within, expect } from 'storybook/test'
 import Img from './img'
 
 const meta: Meta<typeof Img> = {
-  title: 'FP.REACT Components/Img',
+  title: 'FP.React Components/Img',
   component: Img,
   tags: ['version:2.0.0', 'accessibility', 'responsive'],
   argTypes: {

package/src/components/nav/nav.stories.tsx

@@ -8,11 +8,10 @@ import Link from "../link/link";
 import Button from "../buttons/button";
 
 const meta: Meta<typeof Nav> = {
-  title: "FP.REACT Components/Nav",
+  title: "FP.React Components/Nav",
   component: Nav,
   tags: ["stable"],
   parameters: {
-    actions: { argTypesRegex: "^on.*" },
     docs: {
       description: {
         component: `Navigation component with accessible markup and customizable styling via CSS variables.

package/src/components/text/text.stories.tsx

@@ -4,7 +4,7 @@ import { within, expect } from "storybook/test";
 import Text from "./text";
 
 const meta: Meta<typeof Text> = {
-  title: "FP.REACT Components/Text",
+  title: "FP.React Components/Text",
   component: Text,
   tags: ["version:1.0.0"],
   args: {

package/src/components/text-to-speech/TextToSpeech.stories.tsx

@@ -3,7 +3,7 @@ import TextToSpeech from "./TextToSpeech";
 import "./text-to-speech.scss";
 
 const meta: Meta<typeof TextToSpeech> = {
-  title: "FP.REACT Components/TextToSpeech",
+  title: "FP.React Components/TextToSpeech",
   component: TextToSpeech,
   tags: ["experimental"],
   argTypes: {

package/src/components/title/title.stories.tsx

@@ -4,11 +4,10 @@ import { within, expect } from "storybook/test";
 import Title from "./title";
 
 const meta: Meta<typeof Title> = {
-  title: "FP.REACT Components/Title",
+  title: "FP.React Components/Title",
   component: Title,
   tags: ["version:2.0.0", "autodocs"],
   parameters: {
-    actions: { argTypesRegex: "^on.*" },
     docs: {
       description: {
         component: `

package/src/components/ui.tsx

@@ -117,7 +117,8 @@ type PolymorphicComponentPropWithRef<
  *   Styles are always rendered regardless of this prop value.
  * @property {React.CSSProperties} [styles] - Inline styles to apply (overrides defaultStyles)
  * @property {React.CSSProperties} [defaultStyles] - Base styles that can be overridden by styles prop
- * @property {string} [classes] - CSS class names to apply to the element
+ * @property {string} [classes] - CSS class names to apply to the element (custom prop)
+ * @property {string} [className] - CSS class names to apply to the element (React standard prop)
  * @property {string} [id] - HTML id attribute
  * @property {React.ReactNode} [children] - Child elements to render
  *
@@ -137,6 +138,7 @@ type UIProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<
     styles?: React.CSSProperties;
     defaultStyles?: React.CSSProperties;
     classes?: string;
+    className?: string;
     id?: string;
     children?: React.ReactNode;
   }
@@ -187,7 +189,8 @@ type UIComponent = (<C extends React.ElementType = "div">(
  *
  * @param {C} [as='div'] - The HTML element type to render. Defaults to 'div'.
  * @param {React.CSSProperties} [styles] - Inline styles to apply. Overrides defaultStyles.
- * @param {string} [classes] - CSS class names to apply to the element.
+ * @param {string} [classes] - CSS class names to apply (custom prop). Takes precedence over className.
+ * @param {string} [className] - CSS class names to apply (React standard). Used if classes is not provided.
  * @param {React.CSSProperties} [defaultStyles] - Base styles that can be overridden by styles prop.
  * @param {React.ReactNode} [children] - Child elements to render inside the component.
  * @param {PolymorphicRef<C>} [ref] - Forwarded ref with proper typing for the element type.
@@ -307,15 +310,19 @@ type UIComponent = (<C extends React.ElementType = "div">(
  */
 const UI: UIComponent = React.forwardRef(
   <C extends React.ElementType>(
-    { as, styles, style, classes, children, defaultStyles, ...props }: UIProps<C>,
+    { as, styles, style, classes, className, children, defaultStyles, ...props }: UIProps<C>,
     ref?: PolymorphicRef<C>
   ) => {
     const Component = as ?? "div";
 
     const styleObj: React.CSSProperties = { ...defaultStyles, ...styles, ...style };
 
+    // Support both 'classes' (custom) and 'className' (React standard)
+    // 'classes' takes precedence if both are provided
+    const classNameValue = classes ?? className;
+
     return (
-      <Component {...props} ref={ref} style={styleObj} className={classes}>
+      <Component {...props} ref={ref} style={styleObj} className={classNameValue}>
         {children}
       </Component>
     );

package/src/styles/form/form.css

@@ -112,6 +112,79 @@ div:has(> input[type=checkbox])[data-checkbox-size~=lg] {
     align-items: flex-start;
   }
 }
+:root {
+  --select-arrow-color: var(--color-text);
+  --select-width-mobile: 18.75rem; /* 300px minimum on mobile */
+  --select-width-desktop: 100%; /* Full width on larger screens */
+}
+
+select {
+  border: var(--input-outline);
+  border-radius: var(--input-radius);
+  outline: none;
+  background-color: var(--input-bg, var(--color-surface));
+  -webkit-appearance: none; /* Remove default arrow in Chrome and Safari */
+  -moz-appearance: none; /* Remove default arrow in Firefox */
+  appearance: none; /* Remove default arrow in other browsers */
+  background-image: linear-gradient(45deg, transparent 50%, var(--select-arrow-color, currentColor) 50%), linear-gradient(135deg, var(--select-arrow-color, currentColor) 50%, transparent 50%);
+  background-position: calc(100% - 1.25rem) center, calc(100% - 1rem) center;
+  background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
+  background-repeat: no-repeat;
+  padding-inline-start: var(--input-padding-inline);
+  padding-inline-end: 2.5rem;
+  padding-block: var(--input-padding-block);
+  width: max(var(--select-width-mobile), var(--select-width-desktop));
+}
+
+/* ==========================================================================
+   Option Styling with Data Attributes
+   ========================================================================== */
+/*
+option[data-option="primary"] {
+  background-color: var(--color-primary-light, #dbeafe);
+  color: var(--color-primary, #2563eb);
+  font-weight: 600;
+}
+
+option[data-option="success"] {
+  background-color: var(--color-success-bg, #dcfce7);
+  color: var(--color-success, #16a34a);
+}
+
+option[data-option="error"] {
+  background-color: var(--color-error-bg, #fee2e2);
+  color: var(--color-error, #dc2626);
+}
+
+option[data-option="warning"] {
+  background-color: var(--color-warning-bg, #fef3c7);
+  color: var(--color-warning, #d97706);
+}
+*/
+/*
+option[data-size="sm"] {
+  font-size: 0.875rem; // 14px
+  padding: 0.25rem 0.5rem;
+}
+
+option[data-size="lg"] {
+  font-size: 1.125rem; // 18px
+  padding: 0.75rem 1rem;
+  font-weight: 500;
+}
+*/
+/*
+option[data-featured="true"] {
+  font-weight: 700;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+option[data-category="premium"] {
+  background-color: #fef3c7;
+  font-style: italic;
+}
+*/
 :root {
   --input-border-color: var(--color-border);
   --input-appearance: none;
@@ -120,9 +193,9 @@ div:has(> input[type=checkbox])[data-checkbox-size~=lg] {
   --input-outline: thin solid var(--input-border-color);
   --input-padding-inline: 0.6rem;
   --input-padding-block: 0.4rem;
-  --input-radius: --var(--radius);
+  --input-radius: var(--radius);
   --input-fs: var(--fs);
-  --input-width: clamp(200px, 100%, 500px);
+  --input-width: clamp(12.5rem, 100%, 31.25rem);
   --input-focus-outline: medium solid var(--input-border-color);
   --input-focus-outline-offset: 0;
   --input-disabled-bg: var(--color-disabled-bg);
@@ -132,7 +205,6 @@ div:has(> input[type=checkbox])[data-checkbox-size~=lg] {
   --placeholder-style: italic;
   --placeholder-fs: smaller;
   --form-direction: column;
-  --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><polyline points='6,9 10,13 14,9' stroke='%23000000' stroke-width='1.5' fill='none' /></svg>");
   /* ==========================================================================
      Size Tokens
      ========================================================================== */
@@ -235,15 +307,4 @@ input[type=checkbox]:checked {
   background: var(--checkbox-checked-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M6.173 11.414l-3.89-3.89 1.414-1.414 2.476 2.475 5.657-5.657 1.414 1.414z'/></svg>") no-repeat center center;
 }
 
-select {
-  border: var(--input-outline);
-  outline: none;
-  -webkit-appearance: none; /* Remove default arrow in Chrome and Safari */
-  -moz-appearance: none; /* Remove default arrow in Firefox */
-  appearance: none; /* Remove default arrow in other browsers */
-  background: var(--select-arrow) no-repeat;
-  background-position: right 0.5rem top 50%;
-  padding-inline-end: 0;
-}
-
 /*# sourceMappingURL=form.css.map */

package/src/styles/form/form.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../components/form/checkbox.scss","../../components/form/form.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BA;EACE;EACA;EACA;EACA;AAqDA;AAAA;AAAA;;AAlDA;EACE;EACA;;AAKA;EACE;;AAOF;EACE;EAEA;EACA;;AAMJ;EACE;EACA;;AAEA;EACE;EACA;;AAOF;EACE;;AAMF;EACE;;AASJ;EACE;EACA;;AAIF;EACE;EACA;;AAIF;EACE;EACA;;AAIF;EACE;EACA;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EAXF;IAYI;;;AAGF;EACE;EACA;EACA;;;AAQF;EAHF;IAII;;;;AAMJ;EACE;IACE;IACA;;;ACvJJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EAEA;EACA;AAEA;AAAA;AAAA;EAIA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;EAIA;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;;;AAOF;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAGA;AAAA;AAAA;EACE;EACA;;AACA;AAAA;AAAA;EACE;;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"form.css"}
+{"version":3,"sourceRoot":"","sources":["../../components/form/checkbox.scss","../../components/form/select.scss","../../components/form/form.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BA;EACE;EACA;EACA;EACA;AAqDA;AAAA;AAAA;;AAlDA;EACE;EACA;;AAKA;EACE;;AAOF;EACE;EAEA;EACA;;AAMJ;EACE;EACA;;AAEA;EACE;EACA;;AAOF;EACE;;AAMF;EACE;;AASJ;EACE;EACA;;AAIF;EACE;EACA;;AAIF;EACE;EACA;;AAIF;EACE;EACA;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EAXF;IAYI;;;AAGF;EACE;EACA;EACA;;;AAQF;EAHF;IAII;;;;AAMJ;EACE;IACE;IACA;;;ACxJJ;EAEE;EAGA;EACA;;;AAGF;EAEE;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EAEA;EAEA;EAEA;EAGA;EACA;EACA;EAGA;;;AAGF;AAAA;AAAA;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AChFA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EAEA;AAEA;AAAA;AAAA;EAIA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;EAIA;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;;;AAOF;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAGA;AAAA;AAAA;EACE;EACA;;AACA;AAAA;AAAA;EACE;;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA","file":"form.css"}

package/src/styles/form/select.css

@@ -0,0 +1,75 @@
+:root {
+  --select-arrow-color: var(--color-text);
+  --select-width-mobile: 18.75rem; /* 300px minimum on mobile */
+  --select-width-desktop: 100%; /* Full width on larger screens */
+}
+
+select {
+  border: var(--input-outline);
+  border-radius: var(--input-radius);
+  outline: none;
+  background-color: var(--input-bg, var(--color-surface));
+  -webkit-appearance: none; /* Remove default arrow in Chrome and Safari */
+  -moz-appearance: none; /* Remove default arrow in Firefox */
+  appearance: none; /* Remove default arrow in other browsers */
+  background-image: linear-gradient(45deg, transparent 50%, var(--select-arrow-color, currentColor) 50%), linear-gradient(135deg, var(--select-arrow-color, currentColor) 50%, transparent 50%);
+  background-position: calc(100% - 1.25rem) center, calc(100% - 1rem) center;
+  background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
+  background-repeat: no-repeat;
+  padding-inline-start: var(--input-padding-inline);
+  padding-inline-end: 2.5rem;
+  padding-block: var(--input-padding-block);
+  width: max(var(--select-width-mobile), var(--select-width-desktop));
+}
+
+/* ==========================================================================
+   Option Styling with Data Attributes
+   ========================================================================== */
+/*
+option[data-option="primary"] {
+  background-color: var(--color-primary-light, #dbeafe);
+  color: var(--color-primary, #2563eb);
+  font-weight: 600;
+}
+
+option[data-option="success"] {
+  background-color: var(--color-success-bg, #dcfce7);
+  color: var(--color-success, #16a34a);
+}
+
+option[data-option="error"] {
+  background-color: var(--color-error-bg, #fee2e2);
+  color: var(--color-error, #dc2626);
+}
+
+option[data-option="warning"] {
+  background-color: var(--color-warning-bg, #fef3c7);
+  color: var(--color-warning, #d97706);
+}
+*/
+/*
+option[data-size="sm"] {
+  font-size: 0.875rem; // 14px
+  padding: 0.25rem 0.5rem;
+}
+
+option[data-size="lg"] {
+  font-size: 1.125rem; // 18px
+  padding: 0.75rem 1rem;
+  font-weight: 500;
+}
+*/
+/*
+option[data-featured="true"] {
+  font-weight: 700;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+option[data-category="premium"] {
+  background-color: #fef3c7;
+  font-style: italic;
+}
+*/
+
+/*# sourceMappingURL=select.css.map */

package/src/styles/form/select.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../components/form/select.scss"],"names":[],"mappings":"AAEA;EAEE;EAGA;EACA;;;AAGF;EAEE;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EAEA;EAEA;EAEA;EAGA;EACA;EACA;EAGA;;;AAGF;AAAA;AAAA;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA","file":"select.css"}

package/src/styles/index.css

@@ -3674,6 +3674,79 @@ div:has(> input[type=checkbox])[data-checkbox-size~=lg] {
     align-items: flex-start;
   }
 }
+:root {
+  --select-arrow-color: var(--color-text);
+  --select-width-mobile: 18.75rem; /* 300px minimum on mobile */
+  --select-width-desktop: 100%; /* Full width on larger screens */
+}
+
+select {
+  border: var(--input-outline);
+  border-radius: var(--input-radius);
+  outline: none;
+  background-color: var(--input-bg, var(--color-surface));
+  -webkit-appearance: none; /* Remove default arrow in Chrome and Safari */
+  -moz-appearance: none; /* Remove default arrow in Firefox */
+  appearance: none; /* Remove default arrow in other browsers */
+  background-image: linear-gradient(45deg, transparent 50%, var(--select-arrow-color, currentColor) 50%), linear-gradient(135deg, var(--select-arrow-color, currentColor) 50%, transparent 50%);
+  background-position: calc(100% - 1.25rem) center, calc(100% - 1rem) center;
+  background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
+  background-repeat: no-repeat;
+  padding-inline-start: var(--input-padding-inline);
+  padding-inline-end: 2.5rem;
+  padding-block: var(--input-padding-block);
+  width: max(var(--select-width-mobile), var(--select-width-desktop));
+}
+
+/* ==========================================================================
+   Option Styling with Data Attributes
+   ========================================================================== */
+/*
+option[data-option="primary"] {
+  background-color: var(--color-primary-light, #dbeafe);
+  color: var(--color-primary, #2563eb);
+  font-weight: 600;
+}
+
+option[data-option="success"] {
+  background-color: var(--color-success-bg, #dcfce7);
+  color: var(--color-success, #16a34a);
+}
+
+option[data-option="error"] {
+  background-color: var(--color-error-bg, #fee2e2);
+  color: var(--color-error, #dc2626);
+}
+
+option[data-option="warning"] {
+  background-color: var(--color-warning-bg, #fef3c7);
+  color: var(--color-warning, #d97706);
+}
+*/
+/*
+option[data-size="sm"] {
+  font-size: 0.875rem; // 14px
+  padding: 0.25rem 0.5rem;
+}
+
+option[data-size="lg"] {
+  font-size: 1.125rem; // 18px
+  padding: 0.75rem 1rem;
+  font-weight: 500;
+}
+*/
+/*
+option[data-featured="true"] {
+  font-weight: 700;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+option[data-category="premium"] {
+  background-color: #fef3c7;
+  font-style: italic;
+}
+*/
 :root {
   --input-border-color: var(--color-border);
   --input-appearance: none;
@@ -3682,9 +3755,9 @@ div:has(> input[type=checkbox])[data-checkbox-size~=lg] {
   --input-outline: thin solid var(--input-border-color);
   --input-padding-inline: 0.6rem;
   --input-padding-block: 0.4rem;
-  --input-radius: --var(--radius);
+  --input-radius: var(--radius);
   --input-fs: var(--fs);
-  --input-width: clamp(200px, 100%, 500px);
+  --input-width: clamp(12.5rem, 100%, 31.25rem);
   --input-focus-outline: medium solid var(--input-border-color);
   --input-focus-outline-offset: 0;
   --input-disabled-bg: var(--color-disabled-bg);
@@ -3694,7 +3767,6 @@ div:has(> input[type=checkbox])[data-checkbox-size~=lg] {
   --placeholder-style: italic;
   --placeholder-fs: smaller;
   --form-direction: column;
-  --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><polyline points='6,9 10,13 14,9' stroke='%23000000' stroke-width='1.5' fill='none' /></svg>");
   /* ==========================================================================
      Size Tokens
      ========================================================================== */
@@ -3797,17 +3869,6 @@ input[type=checkbox]:checked {
   background: var(--checkbox-checked-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M6.173 11.414l-3.89-3.89 1.414-1.414 2.476 2.475 5.657-5.657 1.414 1.414z'/></svg>") no-repeat center center;
 }
 
-select {
-  border: var(--input-outline);
-  outline: none;
-  -webkit-appearance: none; /* Remove default arrow in Chrome and Safari */
-  -moz-appearance: none; /* Remove default arrow in Firefox */
-  appearance: none; /* Remove default arrow in other browsers */
-  background: var(--select-arrow) no-repeat;
-  background-position: right 0.5rem top 50%;
-  padding-inline-end: 0;
-}
-
 nav:not(body > nav),
 nav[data-breadcrumb] {
   --breadcrumb-padding-inline: unset;