@usefragments/ui 1.6.0 → 2.0.0

package/src/components/DataTable/DataTable.module.scss

@@ -1,5 +1,6 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/action" as action;
 @use "../../recipes/table-chrome" as table-chrome;
 @use "../../recipes/target" as target;
@@ -45,6 +46,7 @@
 .headerRow,
 .row {
   @include table-chrome.row;
+  @include high-contrast-outline;
 }
 
 .headerRow {
@@ -66,7 +68,7 @@
 .sortButton {
   display: flex;
   align-items: center;
-  gap: var(--fui-raw-space-4);
+  gap: var(--fui-raw-space-4, 4px);
 }
 
 .sortButton {
@@ -75,7 +77,7 @@
 
   justify-content: space-between;
   inline-size: 100%;
-  padding: 0;
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   color: inherit;
   text-align: start;
   transition: color var(--fui-transition-fast, $fui-transition-fast);
@@ -148,12 +150,13 @@
   );
 
   .td:first-child {
-    box-shadow: inset var(--fui-table-divider-size) 0 0
-      var(--fui-table-row-selected-border, var(--fui-border-strong, #{$fui-border-strong}));
+    box-shadow: inset var(--fui-table-divider-size, var(--fui-stroke-hairline, #{$fui-stroke-hairline}))
+      0 0 var(--fui-table-row-selected-border, var(--fui-border-strong, #{$fui-border-strong}));
   }
 
   &:dir(rtl) .td:first-child {
-    box-shadow: inset calc(-1 * var(--fui-table-divider-size)) 0 0
+    box-shadow: inset
+      calc(-1 * var(--fui-table-divider-size, var(--fui-stroke-hairline, #{$fui-stroke-hairline}))) 0 0
       var(--fui-table-row-selected-border, var(--fui-border-strong, #{$fui-border-strong}));
   }
 }
@@ -176,8 +179,11 @@
 }
 
 .bordered {
-  overflow: hidden;
-  border: var(--fui-table-divider-size, var(--fui-stroke-hairline)) solid
+  /* Keep the rounded corners clipping the table, but never trap the
+     horizontal scroll the wrapper needs for wide tables. */
+  overflow-x: auto;
+  overflow-y: hidden;
+  border: var(--fui-table-divider-size, var(--fui-stroke-hairline, $fui-stroke-hairline)) solid
     var(--fui-table-border, var(--fui-border, #{$fui-border}));
   border-radius: var(--fui-radius-md, $fui-radius-md);
   background: var(--fui-data-table-bg, var(--fui-bg-primary, #{$fui-bg-primary}));
@@ -215,7 +221,7 @@
 
 .skeletonBar {
   display: block;
-  block-size: var(--fui-raw-space-10);
+  block-size: var(--fui-raw-space-10, 10px);
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   background: linear-gradient(
     90deg,
@@ -224,7 +230,8 @@
     color-mix(in srgb, currentColor 8%, transparent) 75%
   );
   background-size: 200% 100%;
-  animation: dataTableShimmer 1.4s ease-in-out infinite;
+  animation: dataTableShimmer var(--fui-duration-shimmer, $fui-duration-shimmer) ease-in-out
+    infinite;
 }
 
 @keyframes dataTableShimmer {
@@ -246,7 +253,7 @@
 .expandCell {
   display: inline-flex;
   align-items: center;
-  gap: var(--fui-raw-space-4);
+  gap: var(--fui-raw-space-4, 4px);
 }
 
 .expandButton {
@@ -286,8 +293,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-block: var(--fui-raw-space-48);
-  padding-inline: var(--fui-raw-space-24);
+  padding-block: var(--fui-raw-space-48, 48px);
+  padding-inline: var(--fui-raw-space-24, 24px);
 }
 
 .emptyMessage {
@@ -296,11 +303,11 @@
   color: var(--fui-text-tertiary, $fui-text-tertiary);
 }
 
-@media (prefers-contrast: more) {
-  .headerRow,
-  .row {
-    border-block-end-color: CanvasText;
-  }
+// Virtualizer spacer rows: height is measured state set inline; the chrome
+// reset lives here so the spacer never paints a cell.
+.virtualSpacer {
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  border: 0;
 }
 
 @media (prefers-reduced-motion: reduce) {

package/src/components/DataTable/DataTable.virtual.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { useVirtualizer, type Virtualizer } from "@tanstack/react-virtual";
 import { Table, type TableProps } from "../Table";
+import styles from "./DataTable.module.scss";
 
 // ============================================
 // Dependency (@tanstack/react-virtual)
@@ -86,13 +87,13 @@ function DataTableVirtualRoot<TItem>({
       <Table.Body>
         {paddingTop > 0 ? (
           <tr aria-hidden="true">
-            <td colSpan={colSpan} style={{ height: paddingTop, padding: 0 }} />
+            <td colSpan={colSpan} className={styles.virtualSpacer} style={{ height: paddingTop }} />
           </tr>
         ) : null}
         {virtualRows.map((row) => renderRow(row))}
         {paddingBottom > 0 ? (
           <tr aria-hidden="true">
-            <td colSpan={colSpan} style={{ height: paddingBottom, padding: 0, border: 0 }} />
+            <td colSpan={colSpan} className={styles.virtualSpacer} style={{ height: paddingBottom }} />
           </tr>
         ) : null}
       </Table.Body>

package/src/components/DataTable/index.tsx

@@ -6,6 +6,7 @@ import styles from "./DataTable.module.scss";
 import { Checkbox } from "../Checkbox";
 import { ExpandIcon, SortAscIcon, SortDescIcon, SortIcon } from "./DataTable.icons";
 import { DataTableSkeletonRows, useArrowKeyRowNav } from "./DataTable.support";
+import { isDevelopmentBuild } from "../../utils/env";
 
 // ============================================
 // Dependency (@tanstack/react-table) — lazy import()
@@ -36,7 +37,7 @@ function loadReactTable(): Promise<void> {
         _reactTable = (await import("@tanstack/react-table")) as unknown as ReactTableModule;
       } catch {
         _reactTableFailed = true;
-        if (process.env.NODE_ENV === "development") {
+        if (isDevelopmentBuild()) {
           console.warn(
             "[@usefragments/ui] DataTable: @tanstack/react-table is not installed. " +
               "Rendering a static table without sorting, selection, or expansion. " +
@@ -469,9 +470,9 @@ function DataTableLive<T>({
             <DataTableSkeletonRows
               rowCount={skeletonRows}
               columnCount={columns.length}
-              rowClassName={styles.row}
-              cellClassName={styles.td}
-              barClassName={styles.skeletonBar}
+              rowClassName={styles.row ?? ""}
+              cellClassName={styles.td ?? ""}
+              barClassName={styles.skeletonBar ?? ""}
             />
           ) : (
             table.getRowModel().rows.map((row: any) => {
@@ -546,7 +547,7 @@ function DataTableLive<T>({
                         style={{
                           ...getColumnSizeStyle(cell.column),
                           ...(isFirstDataCell
-                            ? ({ "--_fui-table-tree-depth": depth } as React.CSSProperties)
+                            ? ({ "--fui-table-tree-depth": depth } as React.CSSProperties)
                             : undefined),
                         }}
                       >
@@ -711,9 +712,9 @@ function DataTableStatic<T>({
             <DataTableSkeletonRows
               rowCount={skeletonRows}
               columnCount={columnCount}
-              rowClassName={styles.row}
-              cellClassName={styles.td}
-              barClassName={styles.skeletonBar}
+              rowClassName={styles.row ?? ""}
+              cellClassName={styles.td ?? ""}
+              barClassName={styles.skeletonBar ?? ""}
             />
           ) : isEmpty ? (
             <tr className={styles.row}>

package/src/components/DatePicker/DatePicker.contract.json

@@ -1,8 +1,8 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "DatePicker",
-  "description": "Date picker with calendar dropdown for selecting single dates or date ranges. Built on react-day-picker with seed-based theming.",
-  "category": "forms",
+  "description": "Selects a date or date range from a calendar.",
+  "category": "inputs",
   "tags": ["date", "picker", "calendar", "range", "form", "input"],
   "status": "stable",
   "dependencies": [
@@ -165,75 +165,74 @@
   },
   "usage": {
     "when": [
-      "Selecting a single date from a calendar",
-      "Selecting a date range (start/end)",
-      "Date inputs in forms",
-      "Filtering by date or date range"
+      "A date the user picks off a calendar",
+      "A start and end date together",
+      "Filtering by date"
     ],
     "whenNot": [
-      "Time-only input - use a dedicated TimePicker",
-      "Selecting from a small set of known dates - use Select",
-      "Free-form date entry - use Input with date masking"
+      "Time on its own (use a dedicated TimePicker)",
+      "A handful of known dates (use Select)",
+      "Typed date entry (use Input with a date mask)"
     ],
     "guidelines": [
-      "Use range mode with numberOfMonths={2} for date range selection",
-      "Use size=\"sm\" in dense toolbars so DatePicker aligns with Input, Select, Combobox, Button, and IconButton",
-      "Add presets for common ranges (Today, Last 7 days, Last 30 days)",
-      "Use disabledDates to prevent selecting past dates or unavailable dates",
-      "Provide a meaningful placeholder",
-      "DatePicker.Trigger forwards button props and defaults to type=\"button\" (safe inside forms)"
+      "Pair range mode with numberOfMonths={2} so both ends are visible",
+      "size=\"sm\" lines the trigger up with other dense toolbar controls",
+      "Offer presets for the common ranges: Today, Last 7 days, Last 30 days",
+      "disabledDates blocks past or unavailable days before the user tries",
+      "Placeholder names the date, not the action",
+      "DatePicker.Trigger defaults to type=\"button\", so it is safe inside a form"
     ],
     "accessibility": [
-      "Full keyboard navigation within the calendar grid",
-      "Arrow keys navigate between days",
+      "The calendar grid is fully keyboard navigable",
+      "Arrow keys move between days",
       "Escape closes the calendar",
-      "Focus returns to trigger on close"
+      "Focus returns to the trigger on close"
     ]
   },
   "examples": [
     {
       "name": "Default",
-      "description": "Single date picker with default settings",
+      "description": "Trigger opens one month; today is outlined.",
       "code": "<StatefulDatePicker placeholder=\"Pick a date\">\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</StatefulDatePicker>"
     },
     {
       "name": "Small Trigger",
-      "description": "Dense toolbar date picker aligned to other small controls",
+      "description": "Matches the height of other sm toolbar controls.",
       "code": "<StatefulDatePicker size=\"sm\" placeholder=\"Last scanned\">\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</StatefulDatePicker>"
     },
     {
       "name": "Date Range",
-      "description": "Range mode with dual months",
+      "description": "Two months side by side so both ends of the range are visible.",
       "code": "<StatefulRangePicker placeholder=\"Select date range\" numberOfMonths={2}>\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</StatefulRangePicker>"
     },
     {
       "name": "Multi-Month",
-      "description": "Single date with 3 months visible",
+      "description": "Three months at once, for dates far from today.",
       "code": "<StatefulDatePicker placeholder=\"Pick a date\" numberOfMonths={3}>\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</StatefulDatePicker>"
     },
     {
       "name": "Disabled Dates",
-      "description": "Past dates disabled",
+      "description": "Everything before today is greyed out and unclickable.",
       "code": "<StatefulDatePicker\n  placeholder=\"Select a future date\"\n  disabledDates={{ before: new Date() }}\n>\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</StatefulDatePicker>"
     },
     {
       "name": "With Presets",
-      "description": "Range picker with sidebar preset buttons",
+      "description": "Shortcut buttons beside the calendar skip the common ranges.",
       "code": "<StatefulRangePicker placeholder=\"Select date range\" numberOfMonths={2}>\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <div style={{ display: 'flex', gap: '1rem' }}>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', minWidth: '8rem' }}>\n        <DatePicker.Preset range={{ from: today, to: today }}>Today</DatePicker.Preset>\n        <DatePicker.Preset range={{ from: subDays(today, 7), to: today }}>Last 7 days</DatePicker.Preset>\n        <DatePicker.Preset range={{ from: subDays(today, 30), to: today }}>Last 30 days</DatePicker.Preset>\n        <DatePicker.Preset range={{ from: subDays(today, 90), to: today }}>Last 90 days</DatePicker.Preset>\n      </div>\n      <DatePicker.Calendar />\n    </div>\n  </DatePicker.Content>\n</StatefulRangePicker>"
     },
     {
       "name": "With Label and Helper Text",
-      "description": "Date picker with built-in label and helper text",
-      "code": "<StatefulDatePicker placeholder=\"Pick a date\">\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</StatefulDatePicker>"
+      "description": "Label above the trigger, supporting text below it.",
+      "code": "<StatefulDatePicker\n  label=\"Renewal date\"\n  placeholder=\"Pick a date\"\n  helperText=\"Billing restarts on this day each month.\"\n>\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</StatefulDatePicker>"
     },
     {
       "name": "Error State",
-      "description": "Validation error with message",
+      "description": "Red border on the trigger, and the reason below it.",
       "code": "<DatePicker\n  label=\"Start Date\"\n  placeholder=\"Pick a date\"\n  error=\"Please select a start date\"\n>\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</DatePicker>"
     },
     {
       "name": "Disabled",
-      "description": "Disabled date picker",
+      "description": "Dimmed; the calendar will not open.",
       "code": "<StatefulDatePicker placeholder=\"Pick a date\" disabled>\n  <DatePicker.Trigger />\n  <DatePicker.Content>\n    <DatePicker.Calendar />\n  </DatePicker.Content>\n</StatefulDatePicker>"
     }
   ],

package/src/components/DatePicker/DatePicker.module.scss

@@ -1,9 +1,11 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/action";
 @use "../../recipes/field";
 @use "../../recipes/layout";
 @use "../../recipes/popup";
+@use "../../recipes/surface";
 @use "../../recipes/typography";
 
 .wrapper {
@@ -40,9 +42,25 @@
   min-width: layout.measure("field-minimum");
   text-align: left;
 
+  &:focus-visible,
   &[data-popup-open] {
-    border-color: var(--fui-field-border-focus, $fui-color-accent);
+    @include field.focus-state;
   }
+
+  // Error border, matching Input. Set from the wrapper's data-invalid so the
+  // control reads as failed, not just the message beneath it.
+  .wrapper[data-invalid] & {
+    @include field.invalid-state;
+
+    // Focused while invalid keeps the danger edge and takes the danger ring,
+    // the same pairing Input and Textarea render.
+    &:focus-visible,
+    &[data-popup-open] {
+      @include field.invalid-focus-state;
+    }
+  }
+
+  @include high-contrast-outline;
 }
 
 .triggerSm {
@@ -98,16 +116,14 @@
 // ============================================
 
 .positioner {
-  z-index: 52;
+  z-index: var(--fui-overlay-layer-anchored, #{$fui-overlay-layer-anchored});
   outline: none;
 }
 
 .popup {
-  @include surface-elevated;
+  @include popup.container;
 
-  border-color: var(--fui-form-group-border, $fui-border);
-  padding: var(--fui-surface-inset-compact, 12px);
-  box-shadow: var(--fui-shadow-md, $fui-shadow-md);
+  padding: surface.inset("compact");
 
   // Animation
   opacity: 0;
@@ -176,7 +192,7 @@
   top: 0;
   left: 0;
   right: 0;
-  padding: 0;
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
 }
 
 .navButton {
@@ -218,9 +234,9 @@
 .weekday {
   @include typography.role("ui-compact");
 
-  width: var(--_day-size);
-  height: var(--_day-size);
-  padding: 0;
+  width: var(--_day-size, #{action.track("md")});
+  height: var(--_day-size, #{action.track("md")});
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   color: var(--fui-text-tertiary, $fui-text-tertiary);
   text-align: center;
   vertical-align: middle;
@@ -239,9 +255,9 @@
 // ============================================
 
 .day {
-  width: var(--_day-size);
-  height: var(--_day-size);
-  padding: 0;
+  width: var(--_day-size, #{action.track("md")});
+  height: var(--_day-size, #{action.track("md")});
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   text-align: center;
   vertical-align: middle;
   position: relative;
@@ -253,8 +269,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--_day-size);
-  height: var(--_day-size);
+  width: var(--_day-size, #{action.track("md")});
+  height: var(--_day-size, #{action.track("md")});
   border-radius: var(--fui-radius-md, $fui-radius-md);
   font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   color: var(--fui-text-primary, $fui-text-primary);
@@ -276,7 +292,8 @@
 // ============================================
 
 .today > .dayButton {
-  box-shadow: inset 0 0 0 1px var(--fui-field-border, $fui-border-strong);
+  box-shadow: inset 0 0 0 var(--fui-stroke-hairline, 1px)
+    var(--fui-border-strong, $fui-border-strong);
   background-color: color-mix(in srgb, var(--fui-bg-hover, $fui-bg-hover) 55%, transparent);
 }
 
@@ -289,14 +306,17 @@
   }
 }
 
+// Days outside the visible month recede but stay clickable; they borrow the
+// disabled opacity because the kit has no separate muted-opacity token yet.
 .outside > .dayButton {
   color: var(--fui-text-tertiary, $fui-text-tertiary);
-  opacity: 0.5;
+  opacity: var(--fui-opacity-disabled, #{$fui-opacity-disabled});
 }
 
 .disabled > .dayButton {
+  @include disabled-state;
+
   color: var(--fui-text-tertiary, $fui-text-tertiary);
-  opacity: 0.5;
   pointer-events: none;
 }
 
@@ -318,7 +338,7 @@
   &::before {
     content: "";
     position: absolute;
-    inset: 2px 0;
+    inset: var(--fui-raw-space-2, 2px) 0;
     background-color: color-mix(
       in srgb,
       var(--fui-color-accent, $fui-color-accent) 10%,
@@ -339,7 +359,7 @@
   &::before {
     content: "";
     position: absolute;
-    inset: 2px 0 2px 50%;
+    inset: var(--fui-raw-space-2, 2px) 0 var(--fui-raw-space-2, 2px) 50%;
     background-color: color-mix(
       in srgb,
       var(--fui-color-accent, $fui-color-accent) 10%,
@@ -369,7 +389,7 @@
   &::before {
     content: "";
     position: absolute;
-    inset: 2px 50% 2px 0;
+    inset: var(--fui-raw-space-2, 2px) 50% var(--fui-raw-space-2, 2px) 0;
     background-color: color-mix(
       in srgb,
       var(--fui-color-accent, $fui-color-accent) 10%,
@@ -413,29 +433,6 @@
   }
 }
 
-// ============================================
-// Accessibility: High Contrast Mode
-// ============================================
-
-@media (prefers-contrast: more) {
-  .trigger {
-    border-width: 2px;
-    border-color: var(--fui-text-primary, $fui-text-primary);
-
-    &[data-popup-open] {
-      border-color: var(--fui-color-accent, $fui-color-accent);
-    }
-  }
-
-  .dayButton {
-    border: var(--fui-stroke-hairline, 1px) solid transparent;
-
-    &:focus-visible {
-      border-color: var(--fui-text-primary, $fui-text-primary);
-    }
-  }
-}
-
 // ============================================
 // Reduced motion
 // ============================================

package/src/components/DatePicker/index.tsx

@@ -6,6 +6,7 @@ import { useFormFieldIds, type FormFieldProps } from "../../utils/aria";
 import { POPUP_OFFSET_PX } from "../../recipes/popup";
 import { useResolvedControlSize } from "../ComponentDefaults";
 import styles from "./DatePicker.module.scss";
+import { isDevelopmentBuild } from "../../utils/env";
 
 // ============================================
 // Types (self-owned — no external dependency for types)
@@ -170,6 +171,9 @@ interface DatePickerContextValue {
   isControlledOpen: boolean;
   size: "sm" | "md" | "lg";
   name?: string;
+  /** Mirrors the wrapper's `data-invalid` onto the trigger as `aria-invalid`,
+   * so assistive tech hears the state the danger edge is painting. */
+  invalid?: boolean;
 }
 
 const DatePickerContext = React.createContext<DatePickerContextValue | null>(null);
@@ -249,7 +253,7 @@ function loadDayPickerDeps(): Promise<void> {
         _DayFlag = rdp.DayFlag as unknown as RdpEnum;
       } catch {
         _rdpFailed = true;
-        if (process.env.NODE_ENV === "development") {
+        if (isDevelopmentBuild()) {
           console.warn(
             "[@usefragments/ui] DatePicker: react-day-picker is not installed. " +
               "Install it with: npm install react-day-picker"
@@ -419,6 +423,12 @@ const DatePickerRoot = React.forwardRef<HTMLDivElement, DatePickerProps>(functio
 
   const defaultPlaceholder = mode === "range" ? "Select date range" : "Pick a date";
 
+  const { labelId, helperId, errorId, hasError, errorMessage } = useFormFieldIds("datepicker", {
+    label,
+    helperText,
+    error,
+  });
+
   const contextValue = React.useMemo<DatePickerContextValue>(
     () => ({
       mode,
@@ -439,6 +449,7 @@ const DatePickerRoot = React.forwardRef<HTMLDivElement, DatePickerProps>(functio
       isControlledOpen,
       size,
       name,
+      invalid: hasError,
     }),
     [
       mode,
@@ -462,21 +473,18 @@ const DatePickerRoot = React.forwardRef<HTMLDivElement, DatePickerProps>(functio
       isControlledOpen,
       size,
       name,
+      hasError,
     ]
   );
 
-  const { labelId, helperId, errorId, hasError, errorMessage } = useFormFieldIds("datepicker", {
-    label,
-    helperText,
-    error,
-  });
-
   const wrapperClasses = [styles.wrapper, className].filter(Boolean).join(" ");
   const helperClasses = [styles.helper, hasError && styles.helperError].filter(Boolean).join(" ");
 
   return (
     <DatePickerContext.Provider value={contextValue}>
-      <div ref={ref} className={wrapperClasses}>
+      {/* data-invalid lets the trigger pick up the error border; without it only
+          the message turns red and the control still looks valid. */}
+      <div ref={ref} className={wrapperClasses} data-invalid={hasError || undefined}>
         {label && (
           <span id={labelId} className={styles.label}>
             {label}
@@ -540,7 +548,13 @@ function DatePickerTrigger({
   }
 
   return (
-    <BasePopover.Trigger {...htmlProps} type={type} className={classes} disabled={ctx.disabled}>
+    <BasePopover.Trigger
+      {...htmlProps}
+      type={type}
+      className={classes}
+      disabled={ctx.disabled}
+      aria-invalid={ctx.invalid || undefined}
+    >
       {children ?? (
         <>
           <span className={styles.triggerIcon}>