@fpkit/acss 6.0.0 → 6.2.0

package/src/components/layout/landmarks.tsx

@@ -1,17 +1,17 @@
-import UI from '../ui'
-import React, { ReactNode } from 'react'
+import UI from "../ui";
+import React, { ReactNode } from "react";
 
-type ComponentProps = React.ComponentProps<typeof UI>
+type ComponentProps = React.ComponentProps<typeof UI>;
 
 /**
  * Renders children elements without any wrapping component.
  * Can be used as a placeholder when no semantic landmark is needed.
  */
-export const Landmarks = (children?: React.FC) => <>{children}</>
+export const Landmarks = (children?: React.FC) => <>{children}</>;
 
 type HeaderProps = {
-  headerBackground?: ReactNode
-} & ComponentProps
+  headerBackground?: ReactNode;
+} & ComponentProps;
 /**
  * Header component.
  *
@@ -34,8 +34,8 @@ export const Header = ({
       {headerBackground}
       <UI as="section">{children}</UI>
     </UI>
-  )
-}
+  );
+};
 
 /**
  * Main component.
@@ -57,8 +57,8 @@ export const Main = ({
     <UI as="main" id={id} styles={styles} {...props} className={classes}>
       {children}
     </UI>
-  )
-}
+  );
+};
 
 /**
  * Footer component that renders a footer element with a section element inside.
@@ -76,10 +76,10 @@ export const Footer = ({
 }: ComponentProps) => {
   return (
     <UI as="footer" id={id} className={classes} styles={styles} {...props}>
-      <UI as="section">{children || 'Copyright © 2022'}</UI>
+      <UI as="section">{children || "Copyright © 2022"}</UI>
     </UI>
-  )
-}
+  );
+};
 
 export const Aside = ({
   id,
@@ -92,8 +92,8 @@ export const Aside = ({
     <UI as="aside" id={id} styles={styles} className={classes} {...props}>
       <UI as="section">{children}</UI>
     </UI>
-  )
-}
+  );
+};
 
 /**
  * Section component that renders a section element.
@@ -113,8 +113,8 @@ export const Section = ({
     <UI as="section" id={id} styles={styles} className={classes} {...props}>
       {children}
     </UI>
-  )
-}
+  );
+};
 
 /**
  * Article component renders an HTML <article> element.
@@ -135,15 +135,84 @@ export const Article = ({
     <UI as="article" id={id} styles={styles} className={classes} {...props}>
       {children}
     </UI>
-  )
-}
+  );
+};
 
-export default Landmarks
+type FieldsetProps = {
+  /**
+   * Optional legend content displayed as the fieldset's accessible name
+   */
+  legend?: ReactNode;
+  /**
+   * Additional description text for complex fieldsets
+   * Enhances accessibility via aria-describedby
+   */
+  description?: string;
+  /**
+   * Custom ID for the description element
+   * Auto-generated if description is provided without custom ID
+   */
+  descriptionId?: string;
+} & ComponentProps;
 
-Landmarks.displayName = 'Landmarks'
-Landmarks.Header = Header
-Landmarks.Main = Main
-Landmarks.Footer = Footer
-Landmarks.Aside = Aside
-Landmarks.Section = Section
-Landmarks.Article = Article
+/**
+ * Fieldset landmark for semantic content grouping.
+ * Provides WCAG 2.1 Level AA compliant form grouping with optional descriptions.
+ *
+ * @param legend - Optional legend content (accessible name)
+ * @param description - Optional description for additional context
+ * @param descriptionId - Custom ID for description element
+ * @param children - Content inside fieldset section
+ *
+ * @example
+ * ```tsx
+ * <Fieldset
+ *   legend="Shipping Address"
+ *   description="This address will be used for delivery"
+ * >
+ *   {/* form controls *\/}
+ * </Fieldset>
+ * ```
+ */
+export const Fieldset = ({
+  id,
+  children,
+  legend,
+  description,
+  descriptionId,
+  styles,
+  classes,
+  ...props
+}: FieldsetProps) => {
+  const descId = descriptionId || (description ? `${id}-desc` : undefined);
+
+  return (
+    <UI
+      as="fieldset"
+      id={id}
+      styles={styles}
+      className={classes}
+      aria-describedby={descId}
+      {...props}
+    >
+      {legend && <UI as="legend">{legend}</UI>}
+      {description && (
+        <p id={descId} className="fieldset-description">
+          {description}
+        </p>
+      )}
+      {children}
+    </UI>
+  );
+};
+
+export default Landmarks;
+
+Landmarks.displayName = "Landmarks";
+Landmarks.Header = Header;
+Landmarks.Main = Main;
+Landmarks.Footer = Footer;
+Landmarks.Aside = Aside;
+Landmarks.Section = Section;
+Landmarks.Article = Article;
+Landmarks.Fieldset = Fieldset;

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

@@ -1741,6 +1741,88 @@ footer > div {
   text-align: center;
 }
 
+fieldset {
+  border: var(--fieldset-border, 1px solid var(--border-default, #999));
+  border-radius: var(--fieldset-border-radius, 0.5rem);
+  padding: var(--fieldset-padding, 1rem);
+  padding-inline: var(--fieldset-padding-inline, 1.5rem);
+  padding-block: var(--fieldset-padding-block, 1rem);
+  margin-block: var(--fieldset-margin-block, 2rem);
+  background: var(--fieldset-bg, transparent);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+fieldset > legend {
+  font-size: var(--legend-fs, 1rem);
+  font-weight: var(--legend-fw, 600);
+  padding-inline: var(--legend-padding-inline, 0.5rem);
+  color: var(--legend-color, currentColor);
+}
+fieldset .fieldset-description {
+  margin-block-start: 0.5rem;
+  margin-block-end: 0;
+  font-size: var(--fieldset-description-fs, 0.875rem);
+  color: var(--fieldset-description-color, var(--text-subtle, #666));
+}
+
+fieldset:focus-within {
+  outline: var(--fieldset-focus-outline, 2px solid var(--focus-color, #005a9c));
+  outline-offset: var(--fieldset-focus-offset, 2px);
+}
+
+@media (hover: hover) {
+  fieldset:focus-within:not(:focus-visible) {
+    outline: none;
+  }
+}
+fieldset:disabled {
+  opacity: var(--fieldset-disabled-opacity, 0.6);
+  cursor: not-allowed;
+}
+fieldset:disabled > legend {
+  color: var(--legend-disabled-color, var(--text-disabled, #757575));
+}
+
+fieldset[data-legend=inline] {
+  --fieldset-border: none;
+  --fieldset-padding: 0;
+}
+fieldset[data-legend=inline] > legend {
+  float: inline-start;
+  margin-inline-end: 1rem;
+  margin-block-end: 0.5rem;
+}
+
+fieldset[data-fieldset=grouped] {
+  --fieldset-bg: var(--surface-subtle, #f5f5f5);
+  --fieldset-padding-block: 1.5rem;
+  --fieldset-border: 2px solid var(--border-focus, #005a9c);
+}
+fieldset[data-fieldset=grouped] > legend {
+  --legend-fs: 1.125rem;
+  --legend-fw: 700;
+}
+
+@media (prefers-contrast: high) {
+  fieldset {
+    border-width: 2px;
+  }
+  fieldset > legend {
+    font-weight: 700;
+  }
+}
+@media (forced-colors: active) {
+  fieldset {
+    border: 1px solid CanvasText;
+  }
+  fieldset > legend {
+    color: CanvasText;
+  }
+  fieldset .fieldset-description {
+    color: CanvasText;
+  }
+}
 /**
  * Box Component Styles
  *
@@ -3674,6 +3756,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 +3837,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 +3849,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 +3951,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;