@g9tm/lynxcontrols 1.4.0 → 1.4.3

package/dist/display/progress-bar.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"display/progress-bar.jsx","sources":["../../src/display/progress-bar.tsx"],"sourcesContent":["import './display.css';\nimport {\n  formatColor,\n  type G9ProgressLabelPlacement,\n  type G9ProgressType,\n  lighten,\n  resolveProgressColor,\n} from '@g9tm/lynxcontrols-foundation';\nimport type { ReactNode } from '@lynx-js/react';\nimport { type G9ControlBaseProps, useG9Control } from '../base/control';\nimport { useG9Theme } from '../provider/hooks';\n\n/** Props of {@link G9ProgressBar} (MAUI `G9ProgressBar`). */\nexport interface G9ProgressBarProps extends G9ControlBaseProps {\n  /** 0–1; only the display is clamped. Changes animate over 300 ms. Default 0. */\n  readonly value?: number;\n  /** Default `var(--g9-surface-variant)`. */\n  readonly trackColor?: string | null;\n  /** Fill and label colour; default the `progressType` colour. Must be a colour literal (it is lightened). */\n  readonly progressColor?: string | null;\n  /** Capped at half the bar height. Default 999 (pill). */\n  readonly cornerRadius?: number;\n  /** Default 10. */\n  readonly barHeight?: number;\n  /** `'above'` and `'end'` both show `NN%` above the bar, end-aligned (as MAUI). Default `'none'`. */\n  readonly labelPlacement?: G9ProgressLabelPlacement;\n  /** A 20 % segment sweeps left to right (≈ 1.33 s) instead of a fill. Default false. */\n  readonly isIndeterminate?: boolean;\n  /** Four dots at 1/5 … 4/5. Default false. */\n  readonly showSegments?: boolean;\n  /** Default `'primary'`. */\n  readonly progressType?: G9ProgressType;\n  /** Freezes the sweep and hides the stripes; disabled behaves as paused. Default false. */\n  readonly isPaused?: boolean;\n}\n\n/** The progress label: `round(clamp(value) × 100)%`, Latin digits (MAUI formats with .NET, which keeps them). */\nexport function progressLabel(value: number): string {\n  return `${Math.round(clampProgress(value) * 100)}%`;\n}\n\n/** Clamps a progress value to [0, 1]; NaN is 0. */\nexport function clampProgress(value: number): number {\n  if (!(value > 0)) return 0;\n  return value > 1 ? 1 : value;\n}\n\n/**\n * Linear progress (MAUI `G9ProgressBar`): gradient fill (colour → 24 % lighter), diagonal stripes while running,\n * optional segments and label, indeterminate sweep. All motion is CSS (transition on the width, keyframes for the\n * sweep and the stripes); the stored value is never changed.\n */\nexport function G9ProgressBar(props: G9ProgressBarProps): ReactNode {\n  const control = useG9Control(props, 'g9-progress');\n  const palette = useG9Theme().palette;\n  const height = props.barHeight ?? 10;\n  const radius = Math.min(props.cornerRadius ?? 999, height / 2);\n  const color = props.progressColor ?? resolveProgressColor(props.progressType ?? 'primary', palette);\n  const fill = `linear-gradient(to right, ${color}, ${formatColor(lighten(color, 0.24))})`;\n  const paused = props.isPaused === true || control.disabled;\n  const indeterminate = props.isIndeterminate === true;\n  const placement = props.labelPlacement ?? 'none';\n  const value = clampProgress(props.value ?? 0);\n  return (\n    <view className={control.className}>\n      {placement !== 'none' ? (\n        <text className=\"g9-progress__label\" style={{ color }}>\n          {progressLabel(value)}\n        </text>\n      ) : null}\n      <view\n        className=\"g9-progress__track g9-dir-ltr\"\n        style={{\n          height: `${height}px`,\n          borderRadius: `${radius}px`,\n          backgroundColor: props.trackColor ?? palette.SurfaceVariant,\n        }}\n        accessibility-element={true}\n        {...(props.accessibilityLabel ? { 'accessibility-label': props.accessibilityLabel } : {})}\n        accessibility-value={indeterminate ? '' : progressLabel(value)}\n      >\n        <view\n          className={`g9-progress__fill${indeterminate ? ' g9-progress__fill--indeterminate' : ''}${indeterminate && !paused ? ' g9-progress__fill--sweep' : ''}`}\n          style={{ width: indeterminate ? '20%' : `${value * 100}%`, borderRadius: `${radius}px`, background: fill }}\n        >\n          {!paused ? <view className=\"g9-progress__stripes\" /> : null}\n        </view>\n        {props.showSegments\n          ? [1, 2, 3, 4].map((i) => <view key={i} className=\"g9-progress__segment\" style={{ left: `${i * 20}%` }} />)\n          : null}\n      </view>\n    </view>\n  );\n}\n"],"names":["progressLabel","value","Math","clampProgress","G9ProgressBar","props","_props_barHeight","_props_cornerRadius","_props_progressColor","_props_progressType","_props_labelPlacement","_props_value","_props_trackColor","control","useG9Control","palette","useG9Theme","height","radius","color","resolveProgressColor","fill","formatColor","lighten","paused","indeterminate","placement","view","text","i"],"mappings":";;;;AAqCO,SAASA,cAAcC,KAAa;IACzC,OAAO,GAAGC,KAAK,KAAK,CAACC,AAAuB,MAAvBA,cAAcF,QAAc,CAAC,CAAC;AACrD;AAGO,SAASE,cAAcF,KAAa;IACzC,IAAI,CAAEA,CAAAA,QAAQ,IAAI,OAAO;IACzB,OAAOA,QAAQ,IAAI,IAAIA;AACzB;AAOO,SAASG,cAAcC,KAAyB;QAGtCC,kBACSC,qBACVC,sBAA4CC,qBAIxCC,uBACUC,cAaHC;IAtBzB,MAAMC,UAAUC,aAAaT,OAAO;IACpC,MAAMU,UAAUC,aAAa,OAAO;IACpC,MAAMC,SAAS,QAAAX,CAAAA,mBAAAA,MAAM,SAAS,AAAD,IAAdA,mBAAmB;IAClC,MAAMY,SAAShB,KAAK,GAAG,CAAC,QAAAK,CAAAA,sBAAAA,MAAM,YAAY,AAAD,IAAjBA,sBAAsB,KAAKU,SAAS;IAC5D,MAAME,QAAQ,QAAAX,CAAAA,uBAAAA,MAAM,aAAa,AAAD,IAAlBA,uBAAuBY,qBAAqB,QAAAX,CAAAA,sBAAAA,MAAM,YAAY,AAAD,IAAjBA,sBAAsB,WAAWM;IAC3F,MAAMM,OAAO,CAAC,0BAA0B,EAAEF,MAAM,EAAE,EAAEG,YAAYC,QAAQJ,OAAO,OAAO,CAAC,CAAC;IACxF,MAAMK,SAASnB,AAAmB,SAAnBA,MAAM,QAAQ,IAAaQ,QAAQ,QAAQ;IAC1D,MAAMY,gBAAgBpB,AAA0B,SAA1BA,MAAM,eAAe;IAC3C,MAAMqB,YAAY,QAAAhB,CAAAA,wBAAAA,MAAM,cAAc,AAAD,IAAnBA,wBAAwB;IAC1C,MAAMT,QAAQE,cAAc,QAAAQ,CAAAA,eAAAA,MAAM,KAAK,AAAD,IAAVA,eAAe;IAC3C,QACGgB,KAAK,WAAWd,QAAQ,SAAS,EAAE;MAClC,CAACa,AAAc,WAAdA,aACEE,KAAK,UAAU,qBAAqB,OAAO;QAAET;IAAM,GAAG;UACrD,CAACnB,cAAcC,OAAO;QACxB,EAAE2B,QACA,KAAK;MACT,CAACD,KACC,UAAU,gCACV,OAAO;QACL,QAAQ,GAAGV,OAAO,EAAE,CAAC;QACrB,cAAc,GAAGC,OAAO,EAAE,CAAC;QAC3B,iBAAiB,QAAAN,CAAAA,oBAAAA,MAAM,UAAU,AAAD,IAAfA,oBAAoBG,QAAQ,cAAc;IAC7D,GACA,uBAAuB,OACtB,GAAIV,MAAM,kBAAkB,GAAG;QAAE,uBAAuBA,MAAM,kBAAkB;IAAC,IAAI,CAAC,CAAC,EACxF,qBAAqBoB,gBAAgB,KAAKzB,cAAcC,QACzD;QACC,CAAC0B,KACC,WAAW,CAAC,iBAAiB,EAAEF,gBAAgB,sCAAsC,KAAKA,iBAAiB,CAACD,SAAS,8BAA8B,IAAI,EACvJ,OAAO;QAAE,OAAOC,gBAAgB,QAAQ,GAAGxB,AAAQ,MAARA,MAAY,CAAC,CAAC;QAAE,cAAc,GAAGiB,OAAO,EAAE,CAAC;QAAE,YAAYG;IAAK,GAC1G;UACC,CAAC,CAACG,UAAUG,KAAK,UAAU,2BAA4B,KAAK;QAC9D,EAAEA,KAAK;QACP,CAACtB,MAAM,YAAY,GACf;QAAC;QAAG;QAAG;QAAG;KAAE,CAAC,GAAG,CAAC,CAACwB,KAAOF,KAAK,KAAKE,GAAG,UAAU,uBAAuB,OAAO;YAAE,MAAM,GAAGA,AAAI,KAAJA,EAAO,CAAC,CAAC;QAAC,QACnG,KAAK;MACX,EAAEF,KAAK;IACT,EAAEA;AAEN"}
+{"version":3,"file":"display/progress-bar.jsx","sources":["../../src/display/progress-bar.tsx"],"sourcesContent":["import './display.css';\nimport {\n  formatColor,\n  type G9ProgressLabelPlacement,\n  type G9ProgressType,\n  lighten,\n  resolveProgressColor,\n} from '@g9tm/lynxcontrols-foundation';\nimport type { ReactNode } from '@lynx-js/react';\nimport { type G9ControlBaseProps, useG9Control } from '../base/control';\nimport { useG9Theme } from '../provider/hooks';\n\n/** Props of {@link G9ProgressBar} (MAUI `G9ProgressBar`). */\nexport interface G9ProgressBarProps extends G9ControlBaseProps {\n  /** 0–1; only the display is clamped. Changes animate over 300 ms. Default 0. */\n  readonly value?: number;\n  /** Default `var(--g9-surface-variant)`. */\n  readonly trackColor?: string | null;\n  /** Fill and label colour; default the `progressType` colour. Must be a colour literal (it is lightened). */\n  readonly progressColor?: string | null;\n  /** Capped at half the bar height. Default 999 (pill). */\n  readonly cornerRadius?: number;\n  /** Default 10. */\n  readonly barHeight?: number;\n  /** `'above'` and `'end'` both show `NN%` above the bar, end-aligned (as MAUI). Default `'none'`. */\n  readonly labelPlacement?: G9ProgressLabelPlacement;\n  /** A 20 % segment sweeps left to right (≈ 1.33 s) instead of a fill. Default false. */\n  readonly isIndeterminate?: boolean;\n  /** Four dots at 1/5 … 4/5. Default false. */\n  readonly showSegments?: boolean;\n  /** Default `'primary'`. */\n  readonly progressType?: G9ProgressType;\n  /** Freezes the sweep and hides the stripes; disabled behaves as paused. Default false. */\n  readonly isPaused?: boolean;\n}\n\n/** The progress label: `round(clamp(value) × 100)%`, Latin digits (MAUI formats with .NET, which keeps them). */\nexport function progressLabel(value: number): string {\n  return `${Math.round(clampProgress(value) * 100)}%`;\n}\n\n/** Clamps a progress value to [0, 1]; NaN is 0. */\nexport function clampProgress(value: number): number {\n  if (!(value > 0)) return 0;\n  return value > 1 ? 1 : value;\n}\n\n/**\n * Linear progress (MAUI `G9ProgressBar`): gradient fill (colour → 24 % lighter), diagonal stripes while running,\n * optional segments and label, indeterminate sweep. All motion is CSS (transition on the width, keyframes for the\n * sweep and the stripes); the stored value is never changed.\n */\nexport function G9ProgressBar(props: G9ProgressBarProps): ReactNode {\n  const control = useG9Control(props, 'g9-progress');\n  const palette = useG9Theme().palette;\n  const height = props.barHeight ?? 10;\n  const radius = Math.min(props.cornerRadius ?? 999, height / 2);\n  const color = props.progressColor ?? resolveProgressColor(props.progressType ?? 'primary', palette);\n  const fill = `linear-gradient(to right, ${color}, ${formatColor(lighten(color, 0.24))})`;\n  const paused = props.isPaused === true || control.disabled;\n  const indeterminate = props.isIndeterminate === true;\n  const placement = props.labelPlacement ?? 'none';\n  const value = clampProgress(props.value ?? 0);\n  return (\n    <view className={control.className} {...control.idProps}>\n      {placement !== 'none' ? (\n        <text className=\"g9-progress__label\" style={{ color }}>\n          {progressLabel(value)}\n        </text>\n      ) : null}\n      <view\n        className=\"g9-progress__track g9-dir-ltr\"\n        style={{\n          height: `${height}px`,\n          borderRadius: `${radius}px`,\n          backgroundColor: props.trackColor ?? palette.SurfaceVariant,\n        }}\n        accessibility-element={true}\n        {...(props.accessibilityLabel ? { 'accessibility-label': props.accessibilityLabel } : {})}\n        accessibility-value={indeterminate ? '' : progressLabel(value)}\n      >\n        <view\n          className={`g9-progress__fill${indeterminate ? ' g9-progress__fill--indeterminate' : ''}${indeterminate && !paused ? ' g9-progress__fill--sweep' : ''}`}\n          style={{ width: indeterminate ? '20%' : `${value * 100}%`, borderRadius: `${radius}px`, background: fill }}\n        >\n          {!paused ? <view className=\"g9-progress__stripes\" /> : null}\n        </view>\n        {props.showSegments\n          ? [1, 2, 3, 4].map((i) => <view key={i} className=\"g9-progress__segment\" style={{ left: `${i * 20}%` }} />)\n          : null}\n      </view>\n    </view>\n  );\n}\n"],"names":["progressLabel","value","Math","clampProgress","G9ProgressBar","props","_props_barHeight","_props_cornerRadius","_props_progressColor","_props_progressType","_props_labelPlacement","_props_value","_props_trackColor","control","useG9Control","palette","useG9Theme","height","radius","color","resolveProgressColor","fill","formatColor","lighten","paused","indeterminate","placement","view","text","i"],"mappings":";;;;AAqCO,SAASA,cAAcC,KAAa;IACzC,OAAO,GAAGC,KAAK,KAAK,CAACC,AAAuB,MAAvBA,cAAcF,QAAc,CAAC,CAAC;AACrD;AAGO,SAASE,cAAcF,KAAa;IACzC,IAAI,CAAEA,CAAAA,QAAQ,IAAI,OAAO;IACzB,OAAOA,QAAQ,IAAI,IAAIA;AACzB;AAOO,SAASG,cAAcC,KAAyB;QAGtCC,kBACSC,qBACVC,sBAA4CC,qBAIxCC,uBACUC,cAaHC;IAtBzB,MAAMC,UAAUC,aAAaT,OAAO;IACpC,MAAMU,UAAUC,aAAa,OAAO;IACpC,MAAMC,SAAS,QAAAX,CAAAA,mBAAAA,MAAM,SAAS,AAAD,IAAdA,mBAAmB;IAClC,MAAMY,SAAShB,KAAK,GAAG,CAAC,QAAAK,CAAAA,sBAAAA,MAAM,YAAY,AAAD,IAAjBA,sBAAsB,KAAKU,SAAS;IAC5D,MAAME,QAAQ,QAAAX,CAAAA,uBAAAA,MAAM,aAAa,AAAD,IAAlBA,uBAAuBY,qBAAqB,QAAAX,CAAAA,sBAAAA,MAAM,YAAY,AAAD,IAAjBA,sBAAsB,WAAWM;IAC3F,MAAMM,OAAO,CAAC,0BAA0B,EAAEF,MAAM,EAAE,EAAEG,YAAYC,QAAQJ,OAAO,OAAO,CAAC,CAAC;IACxF,MAAMK,SAASnB,AAAmB,SAAnBA,MAAM,QAAQ,IAAaQ,QAAQ,QAAQ;IAC1D,MAAMY,gBAAgBpB,AAA0B,SAA1BA,MAAM,eAAe;IAC3C,MAAMqB,YAAY,QAAAhB,CAAAA,wBAAAA,MAAM,cAAc,AAAD,IAAnBA,wBAAwB;IAC1C,MAAMT,QAAQE,cAAc,QAAAQ,CAAAA,eAAAA,MAAM,KAAK,AAAD,IAAVA,eAAe;IAC3C,QACGgB,KAAK,WAAWd,QAAQ,SAAS,GAAG,GAAGA,QAAQ,OAAO,EAAE;MACvD,CAACa,AAAc,WAAdA,aACEE,KAAK,UAAU,qBAAqB,OAAO;QAAET;IAAM,GAAG;UACrD,CAACnB,cAAcC,OAAO;QACxB,EAAE2B,QACA,KAAK;MACT,CAACD,KACC,UAAU,gCACV,OAAO;QACL,QAAQ,GAAGV,OAAO,EAAE,CAAC;QACrB,cAAc,GAAGC,OAAO,EAAE,CAAC;QAC3B,iBAAiB,QAAAN,CAAAA,oBAAAA,MAAM,UAAU,AAAD,IAAfA,oBAAoBG,QAAQ,cAAc;IAC7D,GACA,uBAAuB,OACtB,GAAIV,MAAM,kBAAkB,GAAG;QAAE,uBAAuBA,MAAM,kBAAkB;IAAC,IAAI,CAAC,CAAC,EACxF,qBAAqBoB,gBAAgB,KAAKzB,cAAcC,QACzD;QACC,CAAC0B,KACC,WAAW,CAAC,iBAAiB,EAAEF,gBAAgB,sCAAsC,KAAKA,iBAAiB,CAACD,SAAS,8BAA8B,IAAI,EACvJ,OAAO;QAAE,OAAOC,gBAAgB,QAAQ,GAAGxB,AAAQ,MAARA,MAAY,CAAC,CAAC;QAAE,cAAc,GAAGiB,OAAO,EAAE,CAAC;QAAE,YAAYG;IAAK,GAC1G;UACC,CAAC,CAACG,UAAUG,KAAK,UAAU,2BAA4B,KAAK;QAC9D,EAAEA,KAAK;QACP,CAACtB,MAAM,YAAY,GACf;QAAC;QAAG;QAAG;QAAG;KAAE,CAAC,GAAG,CAAC,CAACwB,KAAOF,KAAK,KAAKE,GAAG,UAAU,uBAAuB,OAAO;YAAE,MAAM,GAAGA,AAAI,KAAJA,EAAO,CAAC,CAAC;QAAC,QACnG,KAAK;MACX,EAAEF,KAAK;IACT,EAAEA;AAEN"}

package/dist/display/separator.jsx

@@ -16,7 +16,7 @@ function G9Separator(props) {
         }}/>;
     };
     const title = props.title && '' !== props.title.trim() ? props.title : null;
-    if (!title) return <view className={control.className} accessibility-element={false}>
+    if (!title) return <view className={control.className} {...control.idProps} accessibility-element={false}>
         {line('only')}
       </view>;
     const color = null != (_props_titleColor = props.titleColor) ? _props_titleColor : 'var(--g9-text-tertiary)';
@@ -46,7 +46,7 @@ function G9Separator(props) {
         label,
         line('b')
     ];
-    return <view className={control.className} accessibility-element={true} accessibility-label={title}>
+    return <view className={control.className} {...control.idProps} accessibility-element={true} accessibility-label={title}>
       {children}
     </view>;
 }

package/dist/display/separator.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"display/separator.jsx","sources":["../../src/display/separator.tsx"],"sourcesContent":["import './display.css';\nimport type { G9ImageSource, G9SeparatorTitleAlignment } from '@g9tm/lynxcontrols-foundation';\nimport type { ReactNode } from '@lynx-js/react';\nimport { type G9ControlBaseProps, useG9Control } from '../base/control';\nimport type { G9IconInput } from '../icon/icon';\nimport { G9IconSlot, hasIconSlot } from '../icon/slot';\n\n/** Props of {@link G9Separator} (MAUI `G9Separator`). */\nexport interface G9SeparatorProps extends G9ControlBaseProps {\n  /** Upper-cased bold 10 label; empty = one full-width line. */\n  readonly title?: string | null;\n  /** `'auto'` (default) is start. */\n  readonly titleAlignment?: G9SeparatorTitleAlignment;\n  /** Title and icon colour. Default `var(--g9-text-tertiary)`. */\n  readonly titleColor?: string | null;\n  /** Default `var(--g9-divider)`. */\n  readonly lineColor?: string | null;\n  /** Line thickness. Default 1. */\n  readonly thickness?: number;\n  readonly iconEmoji?: string | null;\n  readonly icon?: G9IconInput;\n  readonly iconPath?: string | null;\n  readonly iconImage?: G9ImageSource | null;\n}\n\n/** Upper-cases a separator title without `Intl` (Lynx has none): the runtime's default `toUpperCase`. */\nexport function separatorTitleText(title: string): string {\n  return title.toUpperCase();\n}\n\n/**\n * Section separator (MAUI `G9Separator`): a line, or a title with lines at the start, end or both sides (reading\n * order: start/end swap in RTL). Padding 14 top, 8 bottom; 10 px between title and line.\n */\nexport function G9Separator(props: G9SeparatorProps): ReactNode {\n  const control = useG9Control(props, 'g9-separator');\n  const thickness = props.thickness ?? 1;\n  const line = (key: string) => (\n    <view\n      key={key}\n      className=\"g9-separator__line\"\n      style={{ height: `${thickness}px`, backgroundColor: props.lineColor ?? 'var(--g9-divider)' }}\n    />\n  );\n  const title = props.title && props.title.trim() !== '' ? props.title : null;\n  if (!title) {\n    return (\n      <view className={control.className} accessibility-element={false}>\n        {line('only')}\n      </view>\n    );\n  }\n  const color = props.titleColor ?? 'var(--g9-text-tertiary)';\n  const icon = { emoji: props.iconEmoji, icon: props.icon, imagePath: props.iconPath, image: props.iconImage };\n  const label = (\n    <view key=\"title\" className=\"g9-separator__title\">\n      {hasIconSlot(icon) ? <G9IconSlot {...icon} size={12} color={color} /> : null}\n      <text className=\"g9-separator__text\" style={{ color }}>\n        {separatorTitleText(title)}\n      </text>\n    </view>\n  );\n  const alignment = props.titleAlignment ?? 'auto';\n  const children =\n    alignment === 'center'\n      ? [line('a'), label, line('b')]\n      : alignment === 'end'\n        ? [line('a'), label]\n        : [label, line('b')];\n  return (\n    <view className={control.className} accessibility-element={true} accessibility-label={title}>\n      {children}\n    </view>\n  );\n}\n"],"names":["separatorTitleText","title","G9Separator","props","_props_thickness","_props_titleColor","_props_titleAlignment","control","useG9Control","thickness","line","key","_props_lineColor","view","color","icon","label","hasIconSlot","G9IconSlot","text","alignment","children"],"mappings":";;;AA0BO,SAASA,mBAAmBC,KAAa;IAC9C,OAAOA,MAAM,WAAW;AAC1B;AAMO,SAASC,YAAYC,KAAuB;QAE/BC,kBAgBJC,mBAUIC;IA3BlB,MAAMC,UAAUC,aAAaL,OAAO;IACpC,MAAMM,YAAY,QAAAL,CAAAA,mBAAAA,MAAM,SAAS,AAAD,IAAdA,mBAAmB;IACrC,MAAMM,OAAO,CAACC;YAI0CC;gBAHrDC,KACC,KAAKF,KACL,UAAU,qBACV,OAAO;YAAE,QAAQ,GAAGF,UAAU,EAAE,CAAC;YAAE,iBAAiB,QAAAG,CAAAA,mBAAAA,MAAM,SAAS,AAAD,IAAdA,mBAAmB;QAAoB;;IAG/F,MAAMX,QAAQE,MAAM,KAAK,IAAIA,AAAuB,OAAvBA,MAAM,KAAK,CAAC,IAAI,KAAYA,MAAM,KAAK,GAAG;IACvE,IAAI,CAACF,OACH,QACGY,KAAK,WAAWN,QAAQ,SAAS,EAAE,uBAAuB,OAAO;QAChE,CAACG,KAAK,QAAQ;MAChB,EAAEG;IAGN,MAAMC,QAAQ,QAAAT,CAAAA,oBAAAA,MAAM,UAAU,AAAD,IAAfA,oBAAoB;IAClC,MAAMU,OAAO;QAAE,OAAOZ,MAAM,SAAS;QAAE,MAAMA,MAAM,IAAI;QAAE,WAAWA,MAAM,QAAQ;QAAE,OAAOA,MAAM,SAAS;IAAC;IAC3G,MAAMa,SACHH,KAAK,IAAI,QAAQ,UAAU,sBAAsB;MAChD,CAACI,YAAYF,SAASG,YAAY,GAAGH,IAAI,EAAE,MAAM,IAAI,OAAOD,WAAY,KAAK;MAC7E,CAACK,KAAK,UAAU,qBAAqB,OAAO;QAAEL;IAAM,GAAG;QACrD,CAACd,mBAAmBC,OAAO;MAC7B,EAAEkB,KAAK;IACT,EAAEN;IAEJ,MAAMO,YAAY,QAAAd,CAAAA,wBAAAA,MAAM,cAAc,AAAD,IAAnBA,wBAAwB;IAC1C,MAAMe,WACJD,AAAc,aAAdA,YACI;QAACV,KAAK;QAAMM;QAAON,KAAK;KAAK,GAC7BU,AAAc,UAAdA,YACE;QAACV,KAAK;QAAMM;KAAM,GAClB;QAACA;QAAON,KAAK;KAAK;IAC1B,QACGG,KAAK,WAAWN,QAAQ,SAAS,EAAE,uBAAuB,MAAM,qBAAqBN,OAAO;MAC3F,CAACoB,SAAS;IACZ,EAAER;AAEN"}
+{"version":3,"file":"display/separator.jsx","sources":["../../src/display/separator.tsx"],"sourcesContent":["import './display.css';\nimport type { G9ImageSource, G9SeparatorTitleAlignment } from '@g9tm/lynxcontrols-foundation';\nimport type { ReactNode } from '@lynx-js/react';\nimport { type G9ControlBaseProps, useG9Control } from '../base/control';\nimport type { G9IconInput } from '../icon/icon';\nimport { G9IconSlot, hasIconSlot } from '../icon/slot';\n\n/** Props of {@link G9Separator} (MAUI `G9Separator`). */\nexport interface G9SeparatorProps extends G9ControlBaseProps {\n  /** Upper-cased bold 10 label; empty = one full-width line. */\n  readonly title?: string | null;\n  /** `'auto'` (default) is start. */\n  readonly titleAlignment?: G9SeparatorTitleAlignment;\n  /** Title and icon colour. Default `var(--g9-text-tertiary)`. */\n  readonly titleColor?: string | null;\n  /** Default `var(--g9-divider)`. */\n  readonly lineColor?: string | null;\n  /** Line thickness. Default 1. */\n  readonly thickness?: number;\n  readonly iconEmoji?: string | null;\n  readonly icon?: G9IconInput;\n  readonly iconPath?: string | null;\n  readonly iconImage?: G9ImageSource | null;\n}\n\n/** Upper-cases a separator title without `Intl` (Lynx has none): the runtime's default `toUpperCase`. */\nexport function separatorTitleText(title: string): string {\n  return title.toUpperCase();\n}\n\n/**\n * Section separator (MAUI `G9Separator`): a line, or a title with lines at the start, end or both sides (reading\n * order: start/end swap in RTL). Padding 14 top, 8 bottom; 10 px between title and line.\n */\nexport function G9Separator(props: G9SeparatorProps): ReactNode {\n  const control = useG9Control(props, 'g9-separator');\n  const thickness = props.thickness ?? 1;\n  const line = (key: string) => (\n    <view\n      key={key}\n      className=\"g9-separator__line\"\n      style={{ height: `${thickness}px`, backgroundColor: props.lineColor ?? 'var(--g9-divider)' }}\n    />\n  );\n  const title = props.title && props.title.trim() !== '' ? props.title : null;\n  if (!title) {\n    return (\n      <view className={control.className} {...control.idProps} accessibility-element={false}>\n        {line('only')}\n      </view>\n    );\n  }\n  const color = props.titleColor ?? 'var(--g9-text-tertiary)';\n  const icon = { emoji: props.iconEmoji, icon: props.icon, imagePath: props.iconPath, image: props.iconImage };\n  const label = (\n    <view key=\"title\" className=\"g9-separator__title\">\n      {hasIconSlot(icon) ? <G9IconSlot {...icon} size={12} color={color} /> : null}\n      <text className=\"g9-separator__text\" style={{ color }}>\n        {separatorTitleText(title)}\n      </text>\n    </view>\n  );\n  const alignment = props.titleAlignment ?? 'auto';\n  const children =\n    alignment === 'center'\n      ? [line('a'), label, line('b')]\n      : alignment === 'end'\n        ? [line('a'), label]\n        : [label, line('b')];\n  return (\n    <view className={control.className} {...control.idProps} accessibility-element={true} accessibility-label={title}>\n      {children}\n    </view>\n  );\n}\n"],"names":["separatorTitleText","title","G9Separator","props","_props_thickness","_props_titleColor","_props_titleAlignment","control","useG9Control","thickness","line","key","_props_lineColor","view","color","icon","label","hasIconSlot","G9IconSlot","text","alignment","children"],"mappings":";;;AA0BO,SAASA,mBAAmBC,KAAa;IAC9C,OAAOA,MAAM,WAAW;AAC1B;AAMO,SAASC,YAAYC,KAAuB;QAE/BC,kBAgBJC,mBAUIC;IA3BlB,MAAMC,UAAUC,aAAaL,OAAO;IACpC,MAAMM,YAAY,QAAAL,CAAAA,mBAAAA,MAAM,SAAS,AAAD,IAAdA,mBAAmB;IACrC,MAAMM,OAAO,CAACC;YAI0CC;gBAHrDC,KACC,KAAKF,KACL,UAAU,qBACV,OAAO;YAAE,QAAQ,GAAGF,UAAU,EAAE,CAAC;YAAE,iBAAiB,QAAAG,CAAAA,mBAAAA,MAAM,SAAS,AAAD,IAAdA,mBAAmB;QAAoB;;IAG/F,MAAMX,QAAQE,MAAM,KAAK,IAAIA,AAAuB,OAAvBA,MAAM,KAAK,CAAC,IAAI,KAAYA,MAAM,KAAK,GAAG;IACvE,IAAI,CAACF,OACH,QACGY,KAAK,WAAWN,QAAQ,SAAS,GAAG,GAAGA,QAAQ,OAAO,EAAE,uBAAuB,OAAO;QACrF,CAACG,KAAK,QAAQ;MAChB,EAAEG;IAGN,MAAMC,QAAQ,QAAAT,CAAAA,oBAAAA,MAAM,UAAU,AAAD,IAAfA,oBAAoB;IAClC,MAAMU,OAAO;QAAE,OAAOZ,MAAM,SAAS;QAAE,MAAMA,MAAM,IAAI;QAAE,WAAWA,MAAM,QAAQ;QAAE,OAAOA,MAAM,SAAS;IAAC;IAC3G,MAAMa,SACHH,KAAK,IAAI,QAAQ,UAAU,sBAAsB;MAChD,CAACI,YAAYF,SAASG,YAAY,GAAGH,IAAI,EAAE,MAAM,IAAI,OAAOD,WAAY,KAAK;MAC7E,CAACK,KAAK,UAAU,qBAAqB,OAAO;QAAEL;IAAM,GAAG;QACrD,CAACd,mBAAmBC,OAAO;MAC7B,EAAEkB,KAAK;IACT,EAAEN;IAEJ,MAAMO,YAAY,QAAAd,CAAAA,wBAAAA,MAAM,cAAc,AAAD,IAAnBA,wBAAwB;IAC1C,MAAMe,WACJD,AAAc,aAAdA,YACI;QAACV,KAAK;QAAMM;QAAON,KAAK;KAAK,GAC7BU,AAAc,UAAdA,YACE;QAACV,KAAK;QAAMM;KAAM,GAClB;QAACA;QAAON,KAAK;KAAK;IAC1B,QACGG,KAAK,WAAWN,QAAQ,SAAS,GAAG,GAAGA,QAAQ,OAAO,EAAE,uBAAuB,MAAM,qBAAqBN,OAAO;MAChH,CAACoB,SAAS;IACZ,EAAER;AAEN"}

package/dist/display/title-with-line.jsx

@@ -9,7 +9,7 @@ function G9TitleWithLine(props) {
         18,
         0
     ];
-    return <view className={control.className} style={{
+    return <view className={control.className} {...control.idProps} style={{
         padding: `${t}px ${r}px ${b}px ${l}px`
     }}>
       <text className="g9-title-line__text">{null != (_props_text = props.text) ? _props_text : 'ابزار'}</text>

package/dist/display/title-with-line.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"display/title-with-line.jsx","sources":["../../src/display/title-with-line.tsx"],"sourcesContent":["import './display.css';\nimport type { ReactNode } from '@lynx-js/react';\nimport { type G9ControlBaseProps, useG9Control } from '../base/control';\n\n/** Props of {@link G9TitleWithLine} (MAUI `G9TitleWithLine`). */\nexport interface G9TitleWithLineProps extends G9ControlBaseProps {\n  /** Default `'ابزار'` (MAUI's hard-coded Persian \"tools\"). */\n  readonly text?: string;\n  /** Padding `[left, top, right, bottom]`. Default `[18, 3, 18, 0]`. */\n  readonly padding?: readonly [number, number, number, number];\n}\n\n/** A 16 px title over a 1 px line (MAUI `G9TitleWithLine`). */\nexport function G9TitleWithLine(props: G9TitleWithLineProps): ReactNode {\n  const control = useG9Control(props, 'g9-title-line');\n  const [l, t, r, b] = props.padding ?? [18, 3, 18, 0];\n  return (\n    <view className={control.className} style={{ padding: `${t}px ${r}px ${b}px ${l}px` }}>\n      <text className=\"g9-title-line__text\">{props.text ?? 'ابزار'}</text>\n      <view className=\"g9-title-line__line\" />\n    </view>\n  );\n}\n"],"names":["G9TitleWithLine","props","_props_padding","_props_text","control","useG9Control","l","t","r","b","view","text"],"mappings":";;AAaO,SAASA,gBAAgBC,KAA2B;QAEpCC,gBAGsBC;IAJ3C,MAAMC,UAAUC,aAAaJ,OAAO;IACpC,MAAM,CAACK,GAAGC,GAAGC,GAAGC,EAAE,GAAG,QAAAP,CAAAA,iBAAAA,MAAM,OAAO,AAAD,IAAZA,iBAAiB;QAAC;QAAI;QAAG;QAAI;KAAE;IACpD,QACGQ,KAAK,WAAWN,QAAQ,SAAS,EAAE,OAAO;QAAE,SAAS,GAAGG,EAAE,GAAG,EAAEC,EAAE,GAAG,EAAEC,EAAE,GAAG,EAAEH,EAAE,EAAE,CAAC;IAAC,GAAG;MACrF,CAACK,KAAK,UAAU,uBAAuB,QAAAR,CAAAA,cAAAA,MAAM,IAAI,AAAD,IAATA,cAAc,UAAUQ,KAAK;MACpE,CAACD,KAAK,UAAU,uBAAwB;IAC1C,EAAEA;AAEN"}
+{"version":3,"file":"display/title-with-line.jsx","sources":["../../src/display/title-with-line.tsx"],"sourcesContent":["import './display.css';\nimport type { ReactNode } from '@lynx-js/react';\nimport { type G9ControlBaseProps, useG9Control } from '../base/control';\n\n/** Props of {@link G9TitleWithLine} (MAUI `G9TitleWithLine`). */\nexport interface G9TitleWithLineProps extends G9ControlBaseProps {\n  /** Default `'ابزار'` (MAUI's hard-coded Persian \"tools\"). */\n  readonly text?: string;\n  /** Padding `[left, top, right, bottom]`. Default `[18, 3, 18, 0]`. */\n  readonly padding?: readonly [number, number, number, number];\n}\n\n/** A 16 px title over a 1 px line (MAUI `G9TitleWithLine`). */\nexport function G9TitleWithLine(props: G9TitleWithLineProps): ReactNode {\n  const control = useG9Control(props, 'g9-title-line');\n  const [l, t, r, b] = props.padding ?? [18, 3, 18, 0];\n  return (\n    <view className={control.className} {...control.idProps} style={{ padding: `${t}px ${r}px ${b}px ${l}px` }}>\n      <text className=\"g9-title-line__text\">{props.text ?? 'ابزار'}</text>\n      <view className=\"g9-title-line__line\" />\n    </view>\n  );\n}\n"],"names":["G9TitleWithLine","props","_props_padding","_props_text","control","useG9Control","l","t","r","b","view","text"],"mappings":";;AAaO,SAASA,gBAAgBC,KAA2B;QAEpCC,gBAGsBC;IAJ3C,MAAMC,UAAUC,aAAaJ,OAAO;IACpC,MAAM,CAACK,GAAGC,GAAGC,GAAGC,EAAE,GAAG,QAAAP,CAAAA,iBAAAA,MAAM,OAAO,AAAD,IAAZA,iBAAiB;QAAC;QAAI;QAAG;QAAI;KAAE;IACpD,QACGQ,KAAK,WAAWN,QAAQ,SAAS,GAAG,GAAGA,QAAQ,OAAO,EAAE,OAAO;QAAE,SAAS,GAAGG,EAAE,GAAG,EAAEC,EAAE,GAAG,EAAEC,EAAE,GAAG,EAAEH,EAAE,EAAE,CAAC;IAAC,GAAG;MAC1G,CAACK,KAAK,UAAU,uBAAuB,QAAAR,CAAAA,cAAAA,MAAM,IAAI,AAAD,IAATA,cAAc,UAAUQ,KAAK;MACpE,CAACD,KAAK,UAAU,uBAAwB;IAC1C,EAAEA;AAEN"}

package/dist/expander/expander.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expander.d.ts","sourceRoot":"","sources":["../../src/expander/expander.tsx"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAc,KAAK,SAAS,EAAoD,MAAM,gBAAgB,CAAC;AAC9G,OAAO,EAAE,KAAK,kBAAkB,EAA4B,MAAM,iBAAiB,CAAC;AAIpF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAIhD,mEAAmE;AACnE,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,uDAAuD;AACvD,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,wCAAwC;IACxC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,QAAQ,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,QAAQ,CAAC,SAAS,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC1C,wCAAwC;IACxC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,0CAA0C;IAC1C,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,iDAAiD;IACjD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IACnC,8FAA8F;IAC9F,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD,uFAAuF;IACvF,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,yCAAyC;IACzC,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,iGAAiG;IACjG,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACpE,8FAA8F;IAC9F,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;CAC/B;AAED,+CAA+C;AAC/C,MAAM,WAAW,gBAAgB;IAC/B,4CAA4C;IAC5C,MAAM,IAAI,IAAI,CAAC;CAChB;AAID;;;;GAIG;AACH,eAAO,MAAM,UAAU,8GAwFrB,CAAC"}
+{"version":3,"file":"expander.d.ts","sourceRoot":"","sources":["../../src/expander/expander.tsx"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAc,KAAK,SAAS,EAAoD,MAAM,gBAAgB,CAAC;AAC9G,OAAO,EAAE,KAAK,kBAAkB,EAAkD,MAAM,iBAAiB,CAAC;AAK1G,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAIhD,mEAAmE;AACnE,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,uDAAuD;AACvD,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,wCAAwC;IACxC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,QAAQ,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,QAAQ,CAAC,SAAS,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC1C,wCAAwC;IACxC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,0CAA0C;IAC1C,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,iDAAiD;IACjD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IACnC,8FAA8F;IAC9F,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD,uFAAuF;IACvF,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,yCAAyC;IACzC,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,iGAAiG;IACjG,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACpE,8FAA8F;IAC9F,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;CAC/B;AAED,+CAA+C;AAC/C,MAAM,WAAW,gBAAgB;IAC/B,4CAA4C;IAC5C,MAAM,IAAI,IAAI,CAAC;CAChB;AAID;;;;GAIG;AACH,eAAO,MAAM,UAAU,8GA+FrB,CAAC"}

package/dist/expander/expander.jsx

@@ -1,16 +1,18 @@
 import "./expander.css";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "@lynx-js/react";
-import { g9RowStyle, useG9Control } from "../base/control.jsx";
+import { g9ChildId, g9IdProps, g9RowStyle, useG9Control } from "../base/control.jsx";
 import { useG9Press, usePressVisual } from "../base/press.jsx";
 import { startTimer, stopTimer } from "../base/timers.jsx";
 import { useControllableState } from "../base/use-controllable-state.jsx";
+import { g9FieldNotchStyle } from "../fields/notch.jsx";
 import { G9IconSlot, hasIconSlot } from "../icon/slot.jsx";
-import { useG9Settings } from "../provider/hooks.jsx";
+import { useG9Settings, useG9Theme } from "../provider/hooks.jsx";
 const g9ExpanderDurationMs = 220;
 const expander_G9Expander = forwardRef(function(props, ref) {
     var _props_defaultExpanded, _props_contentPadding, _props_headerHeight, _props_iconColor, _props_titleColor, _props_chevronColor;
     const control = useG9Control(props, 'g9-expander');
     const glyphs = useG9Settings().glyphs;
+    const palette = useG9Theme().palette;
     const [expanded, setExpanded] = useControllableState({
         value: props.expanded,
         defaultValue: null != (_props_defaultExpanded = props.defaultExpanded) ? _props_defaultExpanded : false,
@@ -70,8 +72,8 @@ const expander_G9Expander = forwardRef(function(props, ref) {
         0
     ];
     const height = 'open' === phase ? void 0 : 'opening' === phase ? `${measured}px` : '0px';
-    return <view className={`${control.className}${props.showFrame ? ' g9-expander--frame' : ''}`}>
-      <view className="g9-expander__header" style={{
+    return <view className={`${control.className}${props.showFrame ? ' g9-expander--frame' : ''}`} {...control.idProps} style={props.showFrame ? g9FieldNotchStyle(palette.Surface) : {}}>
+      <view className="g9-expander__header" {...g9IdProps(g9ChildId(props.id, 'Header'))} style={{
         minHeight: `${null != (_props_headerHeight = props.headerHeight) ? _props_headerHeight : 48}px`,
         ...g9RowStyle(control.direction)
     }} accessibility-element={true} accessibility-traits="button" {...props.title ? {

package/dist/expander/expander.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"expander/expander.jsx","sources":["../../src/expander/expander.tsx"],"sourcesContent":["import './expander.css';\nimport type { G9ImageSource } from '@g9tm/lynxcontrols-foundation';\nimport { forwardRef, type ReactNode, useEffect, useImperativeHandle, useRef, useState } from '@lynx-js/react';\nimport { type G9ControlBaseProps, g9RowStyle, useG9Control } from '../base/control';\nimport { useG9Press, usePressVisual } from '../base/press';\nimport { type G9TimerHandle, startTimer, stopTimer } from '../base/timers';\nimport { useControllableState } from '../base/use-controllable-state';\nimport type { G9IconInput } from '../icon/icon';\nimport { G9IconSlot, hasIconSlot } from '../icon/slot';\nimport { useG9Settings } from '../provider/hooks';\n\n/** Expand/collapse duration (MAUI `G9Metrics` expander 220 ms). */\nexport const g9ExpanderDurationMs = 220;\n\n/** Props of {@link G9Expander} (MAUI `G9Expander`). */\nexport interface G9ExpanderProps extends G9ControlBaseProps {\n  readonly title?: string | null;\n  /** Default `var(--g9-text-primary)`. */\n  readonly titleColor?: string | null;\n  readonly iconEmoji?: string | null;\n  readonly icon?: G9IconInput;\n  readonly iconPath?: string | null;\n  readonly iconImage?: G9ImageSource | null;\n  /** Default `var(--g9-text-primary)`. */\n  readonly iconColor?: string | null;\n  /** Default `var(--g9-text-secondary)`. */\n  readonly chevronColor?: string | null;\n  /** Controlled open state (MAUI `IsExpanded`). */\n  readonly expanded?: boolean;\n  readonly defaultExpanded?: boolean;\n  /** Once per change made by the expander (header tap, `toggle()`); never for pushed values. */\n  readonly onExpandedChange?: (expanded: boolean) => void;\n  /** Card look: surface, 1 px outline, 16 px corners, 14 × 12 padding. Default false. */\n  readonly showFrame?: boolean;\n  /** Minimum header height. Default 48. */\n  readonly headerHeight?: number;\n  /** Content padding `[left, top, right, bottom]` (an 8 px top gap is always added). Default 0. */\n  readonly contentPadding?: readonly [number, number, number, number];\n  /** The content (MAUI `ExpanderContent`): mounted at once and kept, hidden while collapsed. */\n  readonly children?: ReactNode;\n}\n\n/** Imperative handle of {@link G9Expander}. */\nexport interface G9ExpanderHandle {\n  /** Same as a header tap (MAUI `Toggle`). */\n  toggle(): void;\n}\n\ntype Phase = 'open' | 'opening' | 'closing' | 'closed';\n\n/**\n * Collapsible section (MAUI `G9Expander`): only the header toggles; the chevron turns 180° and the content height\n * animates over 220 ms (CSS transition on the measured height; instant when it cannot be measured). The first render\n * does not animate. The content stays mounted.\n */\nexport const G9Expander = forwardRef<G9ExpanderHandle, G9ExpanderProps>(function G9Expander(props, ref): ReactNode {\n  const control = useG9Control(props, 'g9-expander');\n  const glyphs = useG9Settings().glyphs;\n  const [expanded, setExpanded] = useControllableState<boolean>({\n    value: props.expanded,\n    defaultValue: props.defaultExpanded ?? false,\n    onChange: props.onExpandedChange,\n    name: 'G9Expander.expanded',\n  });\n  const [phase, setPhase] = useState<Phase>(expanded ? 'open' : 'closed');\n  const [measured, setMeasured] = useState(0);\n  const timer = useRef<G9TimerHandle | null>(null);\n  const first = useRef(true);\n  useEffect(() => {\n    if (first.current) {\n      first.current = false;\n      return;\n    }\n    if (timer.current !== null) stopTimer(timer.current);\n    if (measured <= 0) {\n      setPhase(expanded ? 'open' : 'closed');\n      return;\n    }\n    setPhase(expanded ? 'opening' : 'closing');\n    timer.current = startTimer(() => {\n      timer.current = null;\n      setPhase(expanded ? 'open' : 'closed');\n    }, g9ExpanderDurationMs);\n  }, [expanded]);\n  useEffect(\n    () => () => {\n      if (timer.current !== null) stopTimer(timer.current);\n    },\n    [],\n  );\n\n  const toggle = () => {\n    if (!control.disabled) setExpanded((v) => !v);\n  };\n  useImperativeHandle(ref, () => ({ toggle }));\n  const press = useG9Press(toggle, { blocked: control.disabled, source: 'G9Expander', guardMs: 0 });\n  const visual = usePressVisual({ property: 'scale', rest: 1, pressed: 0.99, inMs: 60, outMs: 90 }, control.disabled);\n  const icon = { emoji: props.iconEmoji, icon: props.icon, imagePath: props.iconPath, image: props.iconImage };\n  const [pl, pt, pr, pb] = props.contentPadding ?? [0, 0, 0, 0];\n  const height = phase === 'open' ? undefined : phase === 'opening' ? `${measured}px` : '0px';\n  return (\n    <view className={`${control.className}${props.showFrame ? ' g9-expander--frame' : ''}`}>\n      <view\n        className=\"g9-expander__header\"\n        style={{ minHeight: `${props.headerHeight ?? 48}px`, ...g9RowStyle(control.direction) }}\n        accessibility-element={true}\n        accessibility-traits=\"button\"\n        {...(props.title ? { 'accessibility-label': props.title } : {})}\n        bindtap={press}\n        {...visual}\n      >\n        <view className=\"g9-expander__lead\" style={g9RowStyle(control.direction)}>\n          {hasIconSlot(icon) ? (\n            <G9IconSlot {...icon} size={20} color={props.iconColor ?? 'var(--g9-text-primary)'} />\n          ) : null}\n          {props.title ? (\n            <text\n              className=\"g9-expander__title\"\n              text-maxline=\"1\"\n              style={{ color: props.titleColor ?? 'var(--g9-text-primary)' }}\n            >\n              {props.title}\n            </text>\n          ) : null}\n        </view>\n        <view className={`g9-expander__chevron${expanded ? ' g9-expander__chevron--open' : ''}`}>\n          <G9IconSlot icon={glyphs.chevron} size={22} color={props.chevronColor ?? 'var(--g9-text-secondary)'} />\n        </view>\n      </view>\n      <view className={`g9-expander__clip g9-expander__clip--${phase}`} style={height === undefined ? {} : { height }}>\n        <view\n          className=\"g9-expander__content\"\n          style={{ padding: `${pt + 8}px ${pr}px ${pb}px ${pl}px` }}\n          bindlayoutchange={(e: { detail?: { height?: number } }) => {\n            const h = e.detail?.height ?? 0;\n            if (h > 0 && h !== measured) setMeasured(h);\n          }}\n        >\n          {props.children}\n        </view>\n      </view>\n    </view>\n  );\n});\n"],"names":["g9ExpanderDurationMs","G9Expander","forwardRef","props","ref","_props_defaultExpanded","_props_contentPadding","_props_headerHeight","_props_iconColor","_props_titleColor","_props_chevronColor","control","useG9Control","glyphs","useG9Settings","expanded","setExpanded","useControllableState","phase","setPhase","useState","measured","setMeasured","timer","useRef","first","useEffect","stopTimer","startTimer","toggle","v","useImperativeHandle","press","useG9Press","visual","usePressVisual","icon","pl","pt","pr","pb","height","undefined","view","g9RowStyle","hasIconSlot","G9IconSlot","text","e","_e_detail","h"],"mappings":"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"}
+{"version":3,"file":"expander/expander.jsx","sources":["../../src/expander/expander.tsx"],"sourcesContent":["import './expander.css';\nimport type { G9ImageSource } from '@g9tm/lynxcontrols-foundation';\nimport { forwardRef, type ReactNode, useEffect, useImperativeHandle, useRef, useState } from '@lynx-js/react';\nimport { type G9ControlBaseProps, g9ChildId, g9IdProps, g9RowStyle, useG9Control } from '../base/control';\nimport { useG9Press, usePressVisual } from '../base/press';\nimport { type G9TimerHandle, startTimer, stopTimer } from '../base/timers';\nimport { useControllableState } from '../base/use-controllable-state';\nimport { g9FieldNotchStyle } from '../fields/notch';\nimport type { G9IconInput } from '../icon/icon';\nimport { G9IconSlot, hasIconSlot } from '../icon/slot';\nimport { useG9Settings, useG9Theme } from '../provider/hooks';\n\n/** Expand/collapse duration (MAUI `G9Metrics` expander 220 ms). */\nexport const g9ExpanderDurationMs = 220;\n\n/** Props of {@link G9Expander} (MAUI `G9Expander`). */\nexport interface G9ExpanderProps extends G9ControlBaseProps {\n  readonly title?: string | null;\n  /** Default `var(--g9-text-primary)`. */\n  readonly titleColor?: string | null;\n  readonly iconEmoji?: string | null;\n  readonly icon?: G9IconInput;\n  readonly iconPath?: string | null;\n  readonly iconImage?: G9ImageSource | null;\n  /** Default `var(--g9-text-primary)`. */\n  readonly iconColor?: string | null;\n  /** Default `var(--g9-text-secondary)`. */\n  readonly chevronColor?: string | null;\n  /** Controlled open state (MAUI `IsExpanded`). */\n  readonly expanded?: boolean;\n  readonly defaultExpanded?: boolean;\n  /** Once per change made by the expander (header tap, `toggle()`); never for pushed values. */\n  readonly onExpandedChange?: (expanded: boolean) => void;\n  /** Card look: surface, 1 px outline, 16 px corners, 14 × 12 padding. Default false. */\n  readonly showFrame?: boolean;\n  /** Minimum header height. Default 48. */\n  readonly headerHeight?: number;\n  /** Content padding `[left, top, right, bottom]` (an 8 px top gap is always added). Default 0. */\n  readonly contentPadding?: readonly [number, number, number, number];\n  /** The content (MAUI `ExpanderContent`): mounted at once and kept, hidden while collapsed. */\n  readonly children?: ReactNode;\n}\n\n/** Imperative handle of {@link G9Expander}. */\nexport interface G9ExpanderHandle {\n  /** Same as a header tap (MAUI `Toggle`). */\n  toggle(): void;\n}\n\ntype Phase = 'open' | 'opening' | 'closing' | 'closed';\n\n/**\n * Collapsible section (MAUI `G9Expander`): only the header toggles; the chevron turns 180° and the content height\n * animates over 220 ms (CSS transition on the measured height; instant when it cannot be measured). The first render\n * does not animate. The content stays mounted.\n */\nexport const G9Expander = forwardRef<G9ExpanderHandle, G9ExpanderProps>(function G9Expander(props, ref): ReactNode {\n  const control = useG9Control(props, 'g9-expander');\n  const glyphs = useG9Settings().glyphs;\n  // A framed expander is a Surface card: fields inside notch their floated label with it.\n  const palette = useG9Theme().palette;\n  const [expanded, setExpanded] = useControllableState<boolean>({\n    value: props.expanded,\n    defaultValue: props.defaultExpanded ?? false,\n    onChange: props.onExpandedChange,\n    name: 'G9Expander.expanded',\n  });\n  const [phase, setPhase] = useState<Phase>(expanded ? 'open' : 'closed');\n  const [measured, setMeasured] = useState(0);\n  const timer = useRef<G9TimerHandle | null>(null);\n  const first = useRef(true);\n  useEffect(() => {\n    if (first.current) {\n      first.current = false;\n      return;\n    }\n    if (timer.current !== null) stopTimer(timer.current);\n    if (measured <= 0) {\n      setPhase(expanded ? 'open' : 'closed');\n      return;\n    }\n    setPhase(expanded ? 'opening' : 'closing');\n    timer.current = startTimer(() => {\n      timer.current = null;\n      setPhase(expanded ? 'open' : 'closed');\n    }, g9ExpanderDurationMs);\n  }, [expanded]);\n  useEffect(\n    () => () => {\n      if (timer.current !== null) stopTimer(timer.current);\n    },\n    [],\n  );\n\n  const toggle = () => {\n    if (!control.disabled) setExpanded((v) => !v);\n  };\n  useImperativeHandle(ref, () => ({ toggle }));\n  const press = useG9Press(toggle, { blocked: control.disabled, source: 'G9Expander', guardMs: 0 });\n  const visual = usePressVisual({ property: 'scale', rest: 1, pressed: 0.99, inMs: 60, outMs: 90 }, control.disabled);\n  const icon = { emoji: props.iconEmoji, icon: props.icon, imagePath: props.iconPath, image: props.iconImage };\n  const [pl, pt, pr, pb] = props.contentPadding ?? [0, 0, 0, 0];\n  const height = phase === 'open' ? undefined : phase === 'opening' ? `${measured}px` : '0px';\n  return (\n    <view\n      className={`${control.className}${props.showFrame ? ' g9-expander--frame' : ''}`}\n      {...control.idProps}\n      style={props.showFrame ? g9FieldNotchStyle(palette.Surface) : {}}\n    >\n      <view\n        className=\"g9-expander__header\"\n        {...g9IdProps(g9ChildId(props.id, 'Header'))}\n        style={{ minHeight: `${props.headerHeight ?? 48}px`, ...g9RowStyle(control.direction) }}\n        accessibility-element={true}\n        accessibility-traits=\"button\"\n        {...(props.title ? { 'accessibility-label': props.title } : {})}\n        bindtap={press}\n        {...visual}\n      >\n        <view className=\"g9-expander__lead\" style={g9RowStyle(control.direction)}>\n          {hasIconSlot(icon) ? (\n            <G9IconSlot {...icon} size={20} color={props.iconColor ?? 'var(--g9-text-primary)'} />\n          ) : null}\n          {props.title ? (\n            <text\n              className=\"g9-expander__title\"\n              text-maxline=\"1\"\n              style={{ color: props.titleColor ?? 'var(--g9-text-primary)' }}\n            >\n              {props.title}\n            </text>\n          ) : null}\n        </view>\n        <view className={`g9-expander__chevron${expanded ? ' g9-expander__chevron--open' : ''}`}>\n          <G9IconSlot icon={glyphs.chevron} size={22} color={props.chevronColor ?? 'var(--g9-text-secondary)'} />\n        </view>\n      </view>\n      <view className={`g9-expander__clip g9-expander__clip--${phase}`} style={height === undefined ? {} : { height }}>\n        <view\n          className=\"g9-expander__content\"\n          style={{ padding: `${pt + 8}px ${pr}px ${pb}px ${pl}px` }}\n          bindlayoutchange={(e: { detail?: { height?: number } }) => {\n            const h = e.detail?.height ?? 0;\n            if (h > 0 && h !== measured) setMeasured(h);\n          }}\n        >\n          {props.children}\n        </view>\n      </view>\n    </view>\n  );\n});\n"],"names":["g9ExpanderDurationMs","G9Expander","forwardRef","props","ref","_props_defaultExpanded","_props_contentPadding","_props_headerHeight","_props_iconColor","_props_titleColor","_props_chevronColor","control","useG9Control","glyphs","useG9Settings","palette","useG9Theme","expanded","setExpanded","useControllableState","phase","setPhase","useState","measured","setMeasured","timer","useRef","first","useEffect","stopTimer","startTimer","toggle","v","useImperativeHandle","press","useG9Press","visual","usePressVisual","icon","pl","pt","pr","pb","height","undefined","view","g9FieldNotchStyle","g9IdProps","g9ChildId","g9RowStyle","hasIconSlot","G9IconSlot","text","e","_e_detail","h"],"mappings":"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"}

package/dist/fields/fields.css

@@ -6,13 +6,12 @@
 
 .g9-field__box {
   background-color: #0000;
-  border-style: solid;
   flex-direction: column;
   display: flex;
   position: relative;
 }
 
-.g9-field__halo {
+.g9-field__outline, .g9-field__halo {
   pointer-events: none;
   border-style: solid;
   position: absolute;
@@ -36,6 +35,11 @@
   font-size: 15px;
 }
 
+.g9-field__input--readonly {
+  text-overflow: ellipsis;
+  height: auto;
+}
+
 .g9-field__textarea {
   background-color: #0000;
   width: 100%;
@@ -50,8 +54,8 @@
 }
 
 .g9-field__label {
-  background-color: var(--g9-field-notch-background, var(--g9-background));
   pointer-events: none;
+  background-color: #0000;
   height: 22px;
   padding-left: 4px;
   padding-right: 4px;
@@ -61,6 +65,10 @@
   position: absolute;
 }
 
+.g9-field__label--floated {
+  background-color: var(--g9-field-notch-background, var(--g9-background));
+}
+
 .g9-field__footer {
   flex-direction: row;
   justify-content: space-between;
@@ -99,7 +107,7 @@
   }
 }
 
-.g9-field--disabled .g9-field__box, .g9-field--disabled .g9-field__footer {
+.g9-field--disabled .g9-field__outline, .g9-field--disabled .g9-field__halo, .g9-field--disabled .g9-field__content, .g9-field--disabled .g9-field__slot, .g9-field--disabled .g9-field__footer {
   opacity: .45;
 }
 

package/dist/fields/fields.css.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack://./src/fields/fields.css"],"names":[],"mappings":"AACA;EAAE,sBAAsB;EACtB,WAAW;EACX,aAAa;AACf;;AAGA;EAAE,uBAAuB;EACvB,mBAAmB;EACnB,sBAAsB;EACtB,aAAa;EACb,kBAAkB;AACpB;;AAGA;EAAE,oBAAoB;EACpB,mBAAmB;EACnB,kBAAkB;EAClB,MAAM;EACN,SAAS;EACT,OAAO;EACP,QAAQ;AACV;;AAGA;EAAE,sBAAsB;EACtB,OAAO;EACP,uBAAuB;EACvB,aAAa;AACf;;AAGA;EAAE,uBAAuB;EACvB,WAAW;EACX,YAAY;EACZ,eAAe;AACjB;;AAGA;EAAE,uBAAuB;EACvB,WAAW;EACX,eAAe;AACjB;;AAGA;EAAE,uBAAuB;EACvB,mBAAmB;EACnB,aAAa;EACb,kBAAkB;AACpB;;AAGA;EAAE,wEAAwE;EACxE,oBAAoB;EACpB,YAAY;EACZ,iBAAiB;EACjB,kBAAkB;EAClB,iBAAiB;EACjB,qDAAqD;EACrD,yBAAyB;EACzB,kBAAkB;AACpB;;AAGA;EAAE,mBAAmB;EACnB,8BAA8B;EAC9B,gBAAgB;EAChB,kBAAkB;EAClB,mBAAmB;EACnB,aAAa;AACf;;AAGA;EAAE,OAAO;EACP,iBAAiB;AACnB;;AAGA;EAAE,8BAA8B;EAC9B,eAAe;AACjB;;AAGA;EAAE,mBAAmB;EACnB,iBAAiB;EACjB,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,4CAA4C;AAC9C;;AAGA;EAAE;IACE,oBAAoB;EACtB;;EAEA;IACE,yBAAyB;EAC3B;AACF;;AAGA;EAAE,YAAY;AACd;;AAKA;EAFE,cAAc;EACd,mBAAmB;EACnB,mBAAmB;EACnB,aAAa;EACb,kBAAkB;AACpB;;AAKA;EAFE,mBAAmB;EACnB,mBAAmB;EACnB,uCAAuC;EACvC,mCAAmC;EACnC,mBAAmB;EACnB,uBAAuB;EACvB,mBAAmB;EACnB,iBAAiB;EACjB,aAAa;AACf;;AAKA;EAFE,sCAAsC;AACxC;;AAKA;EAFE,iBAAiB;EACjB,+BAA+B;AACjC;;AAKA;EAFE,6BAA6B;EAC7B,eAAe;AACjB;;AAKA;EAFE,8BAA8B;AAChC;;AAKA;EAFE,8BAA8B;EAC9B,eAAe;AACjB;;AAKA;EAFE,mCAAmC;EACnC,iBAAiB;EACjB,eAAe;AACjB","sourcesContent":["/* Outlined fields (MAUI G9OutlinedFieldBase). Colours come from the theme variables; sizes from G9Metrics. */\n.g9-field {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.g9-field__box {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  border-style: solid;\n  background-color: transparent;\n}\n\n.g9-field__halo {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-style: solid;\n  pointer-events: none;\n}\n\n.g9-field__content {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n}\n\n.g9-field__input {\n  width: 100%;\n  height: 100%;\n  font-size: 15px;\n  background-color: transparent;\n}\n\n.g9-field__textarea {\n  width: 100%;\n  font-size: 15px;\n  background-color: transparent;\n}\n\n.g9-field__slot {\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n}\n\n.g9-field__label {\n  position: absolute;\n  height: 22px;\n  line-height: 22px;\n  padding-left: 4px;\n  padding-right: 4px;\n  background-color: var(--g9-field-notch-background, var(--g9-background));\n  transition-property: top, font-size, transform, color;\n  transition-duration: 160ms;\n  pointer-events: none;\n}\n\n.g9-field__footer {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding-top: 4px;\n  padding-left: 14px;\n  padding-right: 14px;\n}\n\n.g9-field__helper {\n  flex: 1;\n  font-size: 11.5px;\n}\n\n.g9-field__counter {\n  font-size: 11px;\n  color: var(--g9-text-tertiary);\n}\n\n.g9-field__busy {\n  width: 18px;\n  height: 18px;\n  border-width: 2px;\n  border-style: solid;\n  border-radius: 9px;\n  animation: g9-field-spin 800ms linear infinite;\n}\n\n@keyframes g9-field-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Disabled dims the box and footer (MAUI DisabledDimAlpha). */\n.g9-field--disabled .g9-field__box,\n.g9-field--disabled .g9-field__footer {\n  opacity: 0.45;\n}\n\n/* PIN entry (MAUI G9PinEntry): the row is always left-to-right. */\n.g9-pin {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  position: relative;\n  direction: ltr;\n}\n\n.g9-pin__cell {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 8px;\n  border-style: solid;\n  border-width: 1.4px;\n  border-radius: 10px;\n  border-color: var(--g9-outline-variant);\n  background-color: var(--g9-surface);\n}\n\n.g9-pin__cell--filled {\n  border-color: var(--g9-primary-border);\n}\n\n.g9-pin__cell--active {\n  border-width: 2px;\n  border-color: var(--g9-primary);\n}\n\n.g9-pin__char {\n  font-size: 22px;\n  color: var(--g9-text-primary);\n}\n\n.g9-pin--disabled .g9-pin__char {\n  color: var(--g9-text-disabled);\n}\n\n.g9-pin__placeholder {\n  font-size: 22px;\n  color: var(--g9-text-tertiary);\n}\n\n.g9-pin__separator {\n  font-size: 22px;\n  margin-right: 6px;\n  color: var(--g9-on-surface-variant);\n}\n"],"sourceRoot":""}
+{"version":3,"sources":["webpack://./src/fields/fields.css"],"names":[],"mappings":"AACA;EAAE,sBAAsB;EACtB,WAAW;EACX,aAAa;AACf;;AAGA;EAAE,uBAAuB;EACvB,sBAAsB;EACtB,aAAa;EACb,kBAAkB;AACpB;;AAGA;EAAE,oBAAoB;EACpB,mBAAmB;EACnB,kBAAkB;EAClB,MAAM;EACN,SAAS;EACT,OAAO;EACP,QAAQ;AACV;;AAaA;EAVE,sBAAsB;EACtB,OAAO;EACP,uBAAuB;EACvB,aAAa;AACf;;AAaA;EAVE,uBAAuB;EACvB,WAAW;EACX,YAAY;EACZ,eAAe;AACjB;;AAcA;EAXE,uBAAuB;EACvB,YAAY;AACd;;AAcA;EAXE,uBAAuB;EACvB,WAAW;EACX,eAAe;AACjB;;AAcA;EAXE,uBAAuB;EACvB,mBAAmB;EACnB,aAAa;EACb,kBAAkB;AACpB;;AAcA;EAXE,oBAAoB;EACpB,uBAAuB;EACvB,YAAY;EACZ,iBAAiB;EACjB,kBAAkB;EAClB,iBAAiB;EACjB,qDAAqD;EACrD,yBAAyB;EACzB,kBAAkB;AACpB;;AAgBA;EAbE,wEAAwE;AAC1E;;AAgBA;EAbE,mBAAmB;EACnB,8BAA8B;EAC9B,gBAAgB;EAChB,kBAAkB;EAClB,mBAAmB;EACnB,aAAa;AACf;;AAgBA;EAbE,OAAO;EACP,iBAAiB;AACnB;;AAgBA;EAbE,8BAA8B;EAC9B,eAAe;AACjB;;AAgBA;EAbE,mBAAmB;EACnB,iBAAiB;EACjB,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,4CAA4C;AAC9C;;AAgBA;EAbE;IACE,oBAAoB;EACtB;;EAEA;IACE,yBAAyB;EAC3B;AACF;;AAkBA;EAfE,YAAY;AACd;;AAuBA;EApBE,cAAc;EACd,mBAAmB;EACnB,mBAAmB;EACnB,aAAa;EACb,kBAAkB;AACpB;;AAuBA;EApBE,mBAAmB;EACnB,mBAAmB;EACnB,uCAAuC;EACvC,mCAAmC;EACnC,mBAAmB;EACnB,uBAAuB;EACvB,mBAAmB;EACnB,iBAAiB;EACjB,aAAa;AACf;;AAuBA;EApBE,sCAAsC;AACxC;;AAuBA;EApBE,iBAAiB;EACjB,+BAA+B;AACjC;;AAuBA;EApBE,6BAA6B;EAC7B,eAAe;AACjB;;AAuBA;EApBE,8BAA8B;AAChC;;AAuBA;EApBE,8BAA8B;EAC9B,eAAe;AACjB;;AAuBA;EApBE,mCAAmC;EACnC,iBAAiB;EACjB,eAAe;AACjB","sourcesContent":["/* Outlined fields (MAUI G9OutlinedFieldBase). Colours come from the theme variables; sizes from G9Metrics. */\n.g9-field {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.g9-field__box {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  background-color: transparent;\n}\n\n.g9-field__outline {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-style: solid;\n  pointer-events: none;\n}\n\n.g9-field__halo {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-style: solid;\n  pointer-events: none;\n}\n\n.g9-field__content {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n}\n\n.g9-field__input {\n  width: 100%;\n  height: 100%;\n  font-size: 15px;\n  background-color: transparent;\n}\n\n/* The read-only value: a text line centred like the input's. */\n.g9-field__input--readonly {\n  height: auto;\n  text-overflow: ellipsis;\n}\n\n.g9-field__textarea {\n  width: 100%;\n  font-size: 15px;\n  background-color: transparent;\n}\n\n.g9-field__slot {\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n}\n\n.g9-field__label {\n  position: absolute;\n  height: 22px;\n  line-height: 22px;\n  padding-left: 4px;\n  padding-right: 4px;\n  background-color: transparent;\n  transition-property: top, font-size, transform, color;\n  transition-duration: 160ms;\n  pointer-events: none;\n}\n\n/* Only a floated label sits on the outline: its notch paints the colour behind the field (a container that is not\n   --g9-background sets --g9-field-notch-background; G9 sheets and popups do). At rest it paints nothing. */\n.g9-field__label--floated {\n  background-color: var(--g9-field-notch-background, var(--g9-background));\n}\n\n.g9-field__footer {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding-top: 4px;\n  padding-left: 14px;\n  padding-right: 14px;\n}\n\n.g9-field__helper {\n  flex: 1;\n  font-size: 11.5px;\n}\n\n.g9-field__counter {\n  font-size: 11px;\n  color: var(--g9-text-tertiary);\n}\n\n.g9-field__busy {\n  width: 18px;\n  height: 18px;\n  border-width: 2px;\n  border-style: solid;\n  border-radius: 9px;\n  animation: g9-field-spin 800ms linear infinite;\n}\n\n@keyframes g9-field-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Disabled dims the field (MAUI DisabledDimAlpha) part by part: an opacity on the box itself renders it into a layer\n   the size of the box on Android, which cut the floated label above it in half. The label takes the disabled colour\n   instead, so its notch still hides the outline. */\n.g9-field--disabled .g9-field__outline,\n.g9-field--disabled .g9-field__halo,\n.g9-field--disabled .g9-field__content,\n.g9-field--disabled .g9-field__slot,\n.g9-field--disabled .g9-field__footer {\n  opacity: 0.45;\n}\n\n/* PIN entry (MAUI G9PinEntry): the row is always left-to-right. */\n.g9-pin {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  position: relative;\n  direction: ltr;\n}\n\n.g9-pin__cell {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 8px;\n  border-style: solid;\n  border-width: 1.4px;\n  border-radius: 10px;\n  border-color: var(--g9-outline-variant);\n  background-color: var(--g9-surface);\n}\n\n.g9-pin__cell--filled {\n  border-color: var(--g9-primary-border);\n}\n\n.g9-pin__cell--active {\n  border-width: 2px;\n  border-color: var(--g9-primary);\n}\n\n.g9-pin__char {\n  font-size: 22px;\n  color: var(--g9-text-primary);\n}\n\n.g9-pin--disabled .g9-pin__char {\n  color: var(--g9-text-disabled);\n}\n\n.g9-pin__placeholder {\n  font-size: 22px;\n  color: var(--g9-text-tertiary);\n}\n\n.g9-pin__separator {\n  font-size: 22px;\n  margin-right: 6px;\n  color: var(--g9-on-surface-variant);\n}\n"],"sourceRoot":""}

package/dist/fields/index.d.ts

@@ -1,6 +1,7 @@
 export { G9VoiceDictation, type G9VoiceDictationOptions, } from './dictation.js';
 export { G9Editor, type G9EditorAutoSize, type G9EditorHandle, type G9EditorProps } from './editor.js';
 export { customPatternCacheSize, decimalSeparatorFor, type G9LynxInputElementType, g9CustomPatternCacheLimit, inputTypeHasValidationRule, inputTypePrefersLeftToRight, isAbsoluteUri, resolveEffectiveKeyboard, resolveInputElementType, resolveKeyboardForInputType, sanitizeInputText, validateInputText, } from './input-policy.js';
+export { g9FieldNotchBackgroundVariable, g9FieldNotchStyle } from './notch.js';
 export { G9OutlinedField, type G9OutlinedFieldFrameProps, type G9OutlinedFieldProps, type G9OutlinedFieldState, type G9OutlinedFieldStateInput, type G9TrailingAffordance, resolveOutlinedFieldState, useOutlinedField, } from './outlined-field.js';
 export { filterPin, G9PinEntry, type G9PinEntryHandle, type G9PinEntryProps, isPinCharAllowed, parsePinGroupSizes, pinCellCount, } from './pin-entry.js';
 export { type G9SearchContext, G9SearchEntry, type G9SearchEntryHandle, type G9SearchEntryProps, } from './search-entry.js';

package/dist/fields/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/fields/index.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,gBAAgB,EAChB,KAAK,uBAAuB,GAC7B,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,QAAQ,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AACpG,OAAO,EACL,sBAAsB,EACtB,mBAAmB,EACnB,KAAK,sBAAsB,EAC3B,yBAAyB,EACzB,0BAA0B,EAC1B,2BAA2B,EAC3B,aAAa,EACb,wBAAwB,EACxB,uBAAuB,EACvB,2BAA2B,EAC3B,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,eAAe,EACf,KAAK,yBAAyB,EAC9B,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,yBAAyB,EAC9B,KAAK,oBAAoB,EACzB,yBAAyB,EACzB,gBAAgB,GACjB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,SAAS,EACT,UAAU,EACV,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,gBAAgB,EAChB,kBAAkB,EAClB,YAAY,GACb,MAAM,aAAa,CAAC;AACrB,OAAO,EACL,KAAK,eAAe,EACpB,aAAa,EACb,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,GACxB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,sBAAsB,EAC3B,KAAK,iBAAiB,EACtB,sBAAsB,GACvB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,KAAK,iBAAiB,EAAE,KAAK,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAC9G,OAAO,EAAE,KAAK,kBAAkB,EAAE,KAAK,gBAAgB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/F,OAAO,EACL,KAAK,SAAS,EACd,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACxB,yBAAyB,GAC1B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,iBAAiB,EACjB,KAAK,eAAe,EACpB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/fields/index.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,gBAAgB,EAChB,KAAK,uBAAuB,GAC7B,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,QAAQ,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AACpG,OAAO,EACL,sBAAsB,EACtB,mBAAmB,EACnB,KAAK,sBAAsB,EAC3B,yBAAyB,EACzB,0BAA0B,EAC1B,2BAA2B,EAC3B,aAAa,EACb,wBAAwB,EACxB,uBAAuB,EACvB,2BAA2B,EAC3B,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,8BAA8B,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5E,OAAO,EACL,eAAe,EACf,KAAK,yBAAyB,EAC9B,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,yBAAyB,EAC9B,KAAK,oBAAoB,EACzB,yBAAyB,EACzB,gBAAgB,GACjB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,SAAS,EACT,UAAU,EACV,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,gBAAgB,EAChB,kBAAkB,EAClB,YAAY,GACb,MAAM,aAAa,CAAC;AACrB,OAAO,EACL,KAAK,eAAe,EACpB,aAAa,EACb,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,GACxB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,sBAAsB,EAC3B,KAAK,iBAAiB,EACtB,sBAAsB,GACvB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,KAAK,iBAAiB,EAAE,KAAK,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAC9G,OAAO,EAAE,KAAK,kBAAkB,EAAE,KAAK,gBAAgB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/F,OAAO,EACL,KAAK,SAAS,EACd,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACxB,yBAAyB,GAC1B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,iBAAiB,EACjB,KAAK,eAAe,EACpB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,aAAa,CAAC"}

package/dist/fields/index.jsx

@@ -1,6 +1,7 @@
 export { G9VoiceDictation } from "./dictation.jsx";
 export { G9Editor } from "./editor.jsx";
 export { customPatternCacheSize, decimalSeparatorFor, g9CustomPatternCacheLimit, inputTypeHasValidationRule, inputTypePrefersLeftToRight, isAbsoluteUri, resolveEffectiveKeyboard, resolveInputElementType, resolveKeyboardForInputType, sanitizeInputText, validateInputText } from "./input-policy.jsx";
+export { g9FieldNotchBackgroundVariable, g9FieldNotchStyle } from "./notch.jsx";
 export { G9OutlinedField, resolveOutlinedFieldState, useOutlinedField } from "./outlined-field.jsx";
 export { G9PinEntry, filterPin, isPinCharAllowed, parsePinGroupSizes, pinCellCount } from "./pin-entry.jsx";
 export { G9SearchEntry } from "./search-entry.jsx";

package/dist/fields/notch.d.ts

@@ -0,0 +1,10 @@
+/** The CSS variable a container sets to the colour behind its fields (the floated label's notch paints it). */
+export declare const g9FieldNotchBackgroundVariable = "--g9-field-notch-background";
+/**
+ * Inline style for a container whose background is not `--g9-background` (a card, a sheet, a popup): the floated
+ * label of every field inside it hides the outline with `color`, so no box of another colour shows behind the label.
+ * Pass a colour literal (a `var()` inside a custom property is not resolved on every engine). G9 sheets and popups set
+ * it themselves. Needs the app's `pluginG9Lynx()` (inline CSS variables).
+ */
+export declare function g9FieldNotchStyle(color: string): Readonly<Record<string, string>>;
+//# sourceMappingURL=notch.d.ts.map

package/dist/fields/notch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notch.d.ts","sourceRoot":"","sources":["../../src/fields/notch.ts"],"names":[],"mappings":"AAEA,+GAA+G;AAC/G,eAAO,MAAM,8BAA8B,gCAAgC,CAAC;AAE5E;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAEjF"}

package/dist/fields/notch.jsx

@@ -0,0 +1,9 @@
+const g9FieldNotchBackgroundVariable = '--g9-field-notch-background';
+function g9FieldNotchStyle(color) {
+    return {
+        [g9FieldNotchBackgroundVariable]: color
+    };
+}
+export { g9FieldNotchBackgroundVariable, g9FieldNotchStyle };
+
+//# sourceMappingURL=notch.jsx.map

package/dist/fields/notch.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"fields/notch.jsx","sources":["../../src/fields/notch.ts"],"sourcesContent":["// The floated label's notch colour (no stylesheet import: sheets and popups set it without pulling fields.css).\n\n/** The CSS variable a container sets to the colour behind its fields (the floated label's notch paints it). */\nexport const g9FieldNotchBackgroundVariable = '--g9-field-notch-background';\n\n/**\n * Inline style for a container whose background is not `--g9-background` (a card, a sheet, a popup): the floated\n * label of every field inside it hides the outline with `color`, so no box of another colour shows behind the label.\n * Pass a colour literal (a `var()` inside a custom property is not resolved on every engine). G9 sheets and popups set\n * it themselves. Needs the app's `pluginG9Lynx()` (inline CSS variables).\n */\nexport function g9FieldNotchStyle(color: string): Readonly<Record<string, string>> {\n  return { [g9FieldNotchBackgroundVariable]: color };\n}\n"],"names":["g9FieldNotchBackgroundVariable","g9FieldNotchStyle","color"],"mappings":"AAGO,MAAMA,iCAAiC;AAQvC,SAASC,kBAAkBC,KAAa;IAC7C,OAAO;QAAE,CAACF,+BAA+B,EAAEE;IAAM;AACnD"}

package/dist/fields/outlined-field.d.ts

@@ -5,6 +5,11 @@ import type { G9IconInput } from '../icon/icon.js';
 import { type G9PhysicalPadding } from './slot-layout.js';
 /** Props every outlined field shares (the public members of MAUI `G9OutlinedFieldBase`). */
 export interface G9OutlinedFieldProps {
+    /**
+     * Element `id` of the field root (MAUI `AutomationId`; automation taps its bounds to focus it). Used verbatim: keep
+     * it to `[A-Za-z0-9_-]`.
+     */
+    readonly id?: string;
     /** Floating label. Without it the placeholder is the label (MAUI `Label ?? Placeholder`). */
     readonly label?: string | null;
     /** Placeholder; shown as the label when `label` is not set. */
@@ -139,7 +144,8 @@ export interface G9OutlinedFieldFrameProps extends G9OutlinedFieldProps {
  * calls `onFocusRequest`.
  *
  * Look: colours come from the theme variables (`--g9-primary`, `--g9-outline`, `--g9-error`, …). The floated label
- * sits on the outline with the background `--g9-field-notch-background` (default `--g9-background`), which hides the
+ * sits on the outline with the background `--g9-field-notch-background` (default `--g9-background`; set it on a
+ * container of another colour with `g9FieldNotchStyle`, G9 sheets and popups do), which hides the
  * outline under it.
  */
 export declare function G9OutlinedField(props: G9OutlinedFieldFrameProps): ReactNode;

package/dist/fields/outlined-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"outlined-field.d.ts","sourceRoot":"","sources":["../../src/fields/outlined-field.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"outlined-field.d.ts","sourceRoot":"","sources":["../../src/fields/outlined-field.tsx"],"names":[],"mappings":"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"}

package/dist/fields/outlined-field.jsx

@@ -1,6 +1,6 @@
 import "./fields.css";
 import { G9FilledValueHighlight, G9Metrics } from "@g9tm/lynxcontrols-foundation";
-import { g9RowStyle } from "../base/control.jsx";
+import { g9IdProps, g9RowStyle } from "../base/control.jsx";
 import { g9KeyboardTargetProps } from "../host/keyboard.jsx";
 import { G9IconSlot, hasIconSlot } from "../icon/slot.jsx";
 import { useG9Direction, useG9Settings } from "../provider/hooks.jsx";
@@ -132,15 +132,18 @@ function G9OutlinedField(props) {
         borderColor: state.stateColor,
         borderTopColor: 'transparent'
     }}/> : affordance ? <G9IconSlot icon={affordance.icon} color={null != (_affordance_color = affordance.color) ? _affordance_color : state.stateColor} size={iconSize}/> : <G9IconSlot {...trailing} color={state.stateColor} size={iconSize}/>;
-    return <view className={`g9-field g9-dir-${direction}${disabled ? ' g9-field--disabled' : ''}${props.className ? ` ${props.className}` : ''}`}>
+    return <view className={`g9-field g9-dir-${direction}${disabled ? ' g9-field--disabled' : ''}${props.className ? ` ${props.className}` : ''}`} {...g9IdProps(props.id)}>
       <view {...g9KeyboardTargetProps} className={`g9-field__box${state.floated ? ' g9-field__box--floated' : ''}${props.focused ? ' g9-field__box--focused' : ''}`} accessibility-element={false} style={{
         height: multiline ? void 0 : `${state.fieldHeight}px`,
         minHeight: multiline ? `${state.fieldHeight}px` : void 0,
-        marginTop: props.reserveFloatingLabelClearance ? `${G9Metrics.FloatingLabelClearance}px` : '0px',
+        marginTop: props.reserveFloatingLabelClearance ? `${G9Metrics.FloatingLabelClearance}px` : '0px'
+    }} bindtap={onBoxTap}>
+        {}
+        <view className="g9-field__outline" style={{
         borderColor: state.stateColor,
         borderWidth: `${state.strokeWidth}px`,
         borderRadius: `${G9Metrics.RadiusMd}px`
-    }} bindtap={onBoxTap}>
+    }}/>
         {state.haloWidth > 0 ? <view className="g9-field__halo" style={{
         borderColor: state.stateColor,
         borderWidth: `${state.haloWidth}px`,
@@ -174,7 +177,7 @@ function G9OutlinedField(props) {
         [labelAnchor]: `${G9Metrics.InputHorizontalPadding}px`,
         top: `${state.floated ? G9Metrics.FloatingLabelFloatedY : restTop}px`,
         fontSize: `${state.floated ? G9Metrics.FloatingLabelFontSizeFloat : G9Metrics.FloatingLabelFontSizeRest}px`,
-        color: state.labelColor,
+        color: disabled ? 'var(--g9-text-disabled)' : state.labelColor,
         transform: `translateX(${labelX}px)`
     }}>
             {state.labelText}

package/dist/fields/outlined-field.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"fields/outlined-field.jsx","sources":["../../src/fields/outlined-field.tsx"],"sourcesContent":["import './fields.css';\nimport { G9FilledValueHighlight, type G9ImageSource, G9Metrics } from '@g9tm/lynxcontrols-foundation';\nimport type { ReactNode } from '@lynx-js/react';\nimport { g9RowStyle } from '../base/control';\nimport { g9KeyboardTargetProps } from '../host/keyboard';\nimport type { G9IconInput } from '../icon/icon';\nimport { G9IconSlot, hasIconSlot } from '../icon/slot';\nimport { useG9Direction, useG9Settings } from '../provider/hooks';\nimport { type G9PhysicalPadding, resolveFieldSlotLayout } from './slot-layout';\n\n// MAUI `G9OutlinedFieldBase` (Controls/Shared/G9OutlinedFieldBase.cs) as composition (plan/specs/03 §5): the\n// props every outlined input shares, a pure state resolver, `useOutlinedField`, and the `<G9OutlinedField>` frame the\n// inputs put their element into.\n\n/** Props every outlined field shares (the public members of MAUI `G9OutlinedFieldBase`). */\nexport interface G9OutlinedFieldProps {\n  /** Floating label. Without it the placeholder is the label (MAUI `Label ?? Placeholder`). */\n  readonly label?: string | null;\n  /** Placeholder; shown as the label when `label` is not set. */\n  readonly placeholder?: string | null;\n  /** Helper line under the field; replaced by `errorText` while the field has an error. */\n  readonly helperText?: string | null;\n  /** Error message, shown (in the error colour) while `hasError`. */\n  readonly errorText?: string | null;\n  /** Error state: error outline, label and helper colour. Validation can also set it (`validate()`). Default false. */\n  readonly hasError?: boolean;\n  /** Keep the label floated even when empty and unfocused. Default false. */\n  readonly alwaysFloat?: boolean;\n  /** Value visible and selectable but not editable (MAUI `IsReadOnly`). Default false. */\n  readonly readOnly?: boolean;\n  /** Not interactive and dimmed (MAUI `IsEnabled = false`). Default false. */\n  readonly disabled?: boolean;\n  /** Maximum characters; `-1` (default) or `0` means unlimited. */\n  readonly maxLength?: number;\n  /** Show the `n / max` counter (only when `maxLength > 0`). Default false. */\n  readonly showCharacterCounter?: boolean;\n  /** Status colour (any CSS colour or `g9Token(...)`); used while `useStatusColor`. Default the primary colour. */\n  readonly statusColor?: string | null;\n  /** Draw the outline in `statusColor` (emphasised) whatever the focus. Default false. */\n  readonly useStatusColor?: boolean;\n  /** Soft inner halo while focused (no error, no status colour). Default false. */\n  readonly showFocusHalo?: boolean;\n  /** Filled-value accent of this field; `'inherit'` (default) takes `settings.fields.highlightFilledValue`. */\n  readonly filledValueHighlight?: G9FilledValueHighlight;\n  readonly leadingEmoji?: string | null;\n  readonly leadingIcon?: G9IconInput;\n  readonly leadingImagePath?: string | null;\n  readonly leadingImage?: G9ImageSource | null;\n  readonly trailingEmoji?: string | null;\n  readonly trailingIcon?: G9IconInput;\n  readonly trailingImagePath?: string | null;\n  readonly trailingImage?: G9ImageSource | null;\n  /** Spinner in the trailing slot (wins over every trailing icon). Default false. */\n  readonly isTrailingBusy?: boolean;\n  /** Keep the trailing icon on the physical right in RTL too. Default false. */\n  readonly forceTrailingIconRight?: boolean;\n  /** Keep the leading icon on the physical left in RTL too. Default false. */\n  readonly forceLeadingIconLeft?: boolean;\n  /** Box height; `0` (default) uses `G9Metrics.ControlHeight` (52). */\n  readonly fieldHeight?: number;\n  /** Reserve the floated label's overhang above the box (MAUI `FloatingLabelClearance`, 6). Default false. */\n  readonly reserveFloatingLabelClearance?: boolean;\n  /** Leading icon tap (MAUI `LeadingCommand` + `CommandParameter`). Makes the icon actionable. */\n  readonly onLeadingPress?: () => void;\n  /** Trailing icon tap when no built-in affordance claims it (MAUI `TrailingCommand`). */\n  readonly onTrailingPress?: () => void;\n  /** Extra padding of the inner content (MAUI `InnerContentPadding`), physical sides. */\n  readonly innerContentPadding?: Partial<G9PhysicalPadding>;\n  /** Class of the root element. */\n  readonly className?: string;\n}\n\n/** What {@link resolveOutlinedFieldState} needs besides the props. */\nexport interface G9OutlinedFieldStateInput {\n  readonly focused: boolean;\n  readonly hasValue: boolean;\n  /** A value the field shows without text (a picker's selection): floats the label like a value. */\n  readonly valueFloated?: boolean;\n  /** App-wide filled-value accent (`settings.fields.highlightFilledValue`). */\n  readonly highlightFilledValue: boolean;\n  /** Characters of the value, for the counter. */\n  readonly textLength: number;\n  /** Resting chrome tone: `'outline'` (default) or `'placeholder'` (search). */\n  readonly restingTone?: 'outline' | 'placeholder';\n}\n\n/** The resolved look of an outlined field (colours are CSS colour values). */\nexport interface G9OutlinedFieldState {\n  readonly floated: boolean;\n  /** Outline, floated label and trailing icon colour. */\n  readonly stateColor: string;\n  readonly labelColor: string;\n  /** Leading icon and resting label colour. */\n  readonly restingContentColor: string;\n  readonly labelText: string;\n  /** Helper line text (`errorText` while in error), `''` when hidden. */\n  readonly helperText: string;\n  readonly helperColor: string;\n  /** Counter text (`'n / max'`), `''` when hidden. */\n  readonly counterText: string;\n  readonly footerVisible: boolean;\n  readonly strokeWidth: number;\n  /** Focus halo thickness, 0 when off. */\n  readonly haloWidth: number;\n  readonly fieldHeight: number;\n}\n\nconst v = (token: string): string => `var(--g9-${token})`;\n\n/**\n * Resolves the field's state colours and footer (MAUI `ResolveStateColor`, `ResolveFloatingLabelColor`, the footer\n * part of `Refresh`). Precedence: error > status colour > focus > accented filled value > resting.\n */\nexport function resolveOutlinedFieldState(\n  props: G9OutlinedFieldProps,\n  input: G9OutlinedFieldStateInput,\n): G9OutlinedFieldState {\n  const hasError = props.hasError === true;\n  const useStatus = props.useStatusColor === true;\n  const filled = input.hasValue || input.valueFloated === true;\n  const highlight = props.filledValueHighlight ?? G9FilledValueHighlight.Inherit;\n  const accentFilled =\n    highlight === G9FilledValueHighlight.Accent\n      ? true\n      : highlight === G9FilledValueHighlight.Neutral\n        ? false\n        : input.highlightFilledValue;\n  const placeholderTone = input.restingTone === 'placeholder';\n  const restingOutline = placeholderTone ? v('input-placeholder') : v('outline');\n  const restingContentColor = placeholderTone ? v('input-placeholder') : v('text-tertiary');\n  let stateColor: string;\n  if (hasError) stateColor = v('error');\n  else if (useStatus) stateColor = props.statusColor ?? v('primary');\n  else if (input.focused) stateColor = v('primary');\n  else stateColor = filled && accentFilled ? v('primary') : restingOutline;\n\n  const floated = props.alwaysFloat === true || input.valueFloated === true || input.focused || input.hasValue;\n  const neutralFilledRest = filled && !input.focused && !hasError && !useStatus && !accentFilled;\n  const labelColor = floated && !neutralFilledRest ? stateColor : restingContentColor;\n\n  const helperRaw = hasError ? (props.errorText ?? '') : (props.helperText ?? '');\n  const helperText = helperRaw.trim() === '' ? '' : helperRaw;\n  const maxLength = props.maxLength ?? -1;\n  const counterText = props.showCharacterCounter === true && maxLength > 0 ? `${input.textLength} / ${maxLength}` : '';\n  const emphasis = input.focused || hasError || useStatus;\n  const halo = props.showFocusHalo === true && input.focused && !hasError && !useStatus;\n  const labelRaw = props.label ?? props.placeholder ?? '';\n  return {\n    floated,\n    stateColor,\n    labelColor,\n    restingContentColor,\n    labelText: labelRaw.trim() === '' ? '' : labelRaw,\n    helperText,\n    helperColor: hasError ? v('error') : v('text-tertiary'),\n    counterText,\n    footerVisible: helperText !== '' || counterText !== '',\n    strokeWidth: emphasis ? G9Metrics.OutlinedFieldEmphasisStrokeThickness : G9Metrics.OutlinedFieldStrokeThickness,\n    haloWidth: halo ? G9Metrics.OutlinedFieldFocusHaloThickness : 0,\n    fieldHeight: props.fieldHeight && props.fieldHeight > 0 ? props.fieldHeight : G9Metrics.ControlHeight,\n  };\n}\n\n/** {@link resolveOutlinedFieldState} with the app-wide settings read from the provider. */\nexport function useOutlinedField(\n  props: G9OutlinedFieldProps,\n  input: Omit<G9OutlinedFieldStateInput, 'highlightFilledValue'>,\n): G9OutlinedFieldState {\n  const settings = useG9Settings();\n  return resolveOutlinedFieldState(props, { ...input, highlightFilledValue: settings.fields.highlightFilledValue });\n}\n\n/** A built-in trailing affordance an input puts in the trailing slot (password eye, microphone, clear). */\nexport interface G9TrailingAffordance {\n  /** What it shows. */\n  readonly icon: G9IconInput;\n  /** Icon colour; default the state colour. */\n  readonly color?: string;\n  /** Accessibility label. */\n  readonly label?: string;\n  /** Stable key (MAUI `ResolveTrailingIconSignature`): the slot is rebuilt only when it changes. */\n  readonly signature: string;\n  readonly onPress: () => void;\n}\n\n/** Props of {@link G9OutlinedField}: the shared props plus what the composing input supplies. */\nexport interface G9OutlinedFieldFrameProps extends G9OutlinedFieldProps {\n  readonly focused: boolean;\n  readonly hasValue: boolean;\n  readonly valueFloated?: boolean;\n  readonly textLength?: number;\n  /** The input element (or any content) inside the box. */\n  readonly children?: ReactNode;\n  /** A built-in trailing affordance; replaces the trailing icon props (busy still wins). */\n  readonly trailingAffordance?: G9TrailingAffordance | null;\n  /** Tapping the box (outside the icons) focuses the content (MAUI `FocusTarget`). */\n  readonly onFocusRequest?: () => void;\n  /** Resting tone (`'placeholder'` for search, MAUI `ResolveRestingOutlineColor` override). */\n  readonly restingTone?: 'outline' | 'placeholder';\n  /** Vertical placement of the icons and the resting label: centred (entries) or top/bottom (editor). */\n  readonly multiline?: boolean;\n  /** Accessibility label of the box (defaults to the label text). */\n  readonly accessibilityLabel?: string;\n}\n\nfunction physicalSide(column: 0 | 2): 'left' | 'right' {\n  return column === 0 ? 'left' : 'right';\n}\n\n/**\n * The outlined field frame (MAUI `G9OutlinedFieldBase`): outline with a notched floating label, leading and\n * trailing icon slots, helper/error line and counter. Inputs (`G9TextEntry`, `G9Editor`, `G9SearchEntry`, the pickers)\n * put their element in `children`. Direction is set on the root from the culture (labels, icons, helper follow it;\n * the input decides its own text direction). A tap on an icon never focuses the content; a tap elsewhere on the box\n * calls `onFocusRequest`.\n *\n * Look: colours come from the theme variables (`--g9-primary`, `--g9-outline`, `--g9-error`, …). The floated label\n * sits on the outline with the background `--g9-field-notch-background` (default `--g9-background`), which hides the\n * outline under it.\n */\nexport function G9OutlinedField(props: G9OutlinedFieldFrameProps): ReactNode {\n  const direction = useG9Direction();\n  const isRtl = direction === 'rtl';\n  const state = useOutlinedField(props, {\n    focused: props.focused,\n    hasValue: props.hasValue,\n    valueFloated: props.valueFloated ?? false,\n    textLength: props.textLength ?? 0,\n    restingTone: props.restingTone ?? 'outline',\n  });\n  const leading = {\n    emoji: props.leadingEmoji ?? null,\n    icon: props.leadingIcon,\n    imagePath: props.leadingImagePath ?? null,\n    image: props.leadingImage ?? null,\n  };\n  const trailing = {\n    emoji: props.trailingEmoji ?? null,\n    icon: props.trailingIcon,\n    imagePath: props.trailingImagePath ?? null,\n    image: props.trailingImage ?? null,\n  };\n  const busy = props.isTrailingBusy === true;\n  const affordance = props.trailingAffordance ?? null;\n  const hasLeading = hasIconSlot(leading);\n  const hasTrailing = busy || affordance !== null || hasIconSlot(trailing);\n  const pad = props.innerContentPadding ?? {};\n  const slot = resolveFieldSlotLayout(\n    {\n      hasLeadingIcon: hasLeading,\n      hasTrailingIcon: hasTrailing,\n      isRtl,\n      forceTrailingIconRight: props.forceTrailingIconRight === true,\n      forceLeadingIconLeft: props.forceLeadingIconLeft === true,\n    },\n    { left: pad.left ?? 0, top: pad.top ?? 0, right: pad.right ?? 0, bottom: pad.bottom ?? 0 },\n  );\n  const disabled = props.disabled === true;\n  const leadingActionable = props.onLeadingPress !== undefined;\n  const trailingActionable = affordance !== null || props.onTrailingPress !== undefined;\n  const onLeadingTap = () => {\n    if (disabled || !leadingActionable) return;\n    props.onLeadingPress?.();\n  };\n  const onTrailingTap = () => {\n    if (disabled || busy || !trailingActionable) return;\n    if (affordance) affordance.onPress();\n    else props.onTrailingPress?.();\n  };\n  const onBoxTap = () => {\n    if (!disabled) props.onFocusRequest?.();\n  };\n\n  const multiline = props.multiline === true;\n  const labelHeight = G9Metrics.FloatingLabelHeight;\n  const restTop = multiline ? (G9Metrics.ControlHeight - labelHeight) / 2 : (state.fieldHeight - labelHeight) / 2;\n  const labelX = slot.labelRestX + (state.floated ? slot.labelFloatedX : 0);\n  const labelAnchor = isRtl ? 'right' : 'left';\n  const iconSize = G9Metrics.InputIconSize;\n  const slotStyle = (column: 0 | 2, width: number, bottomAligned: boolean) => ({\n    [physicalSide(column)]: '0px',\n    width: `${width}px`,\n    ...(bottomAligned\n      ? { bottom: '0px', height: `${G9Metrics.EditorTrailingSlotHeight}px` }\n      : { top: '0px', bottom: '0px' }),\n  });\n\n  const trailingContent = busy ? (\n    <view className=\"g9-field__busy\" style={{ borderColor: state.stateColor, borderTopColor: 'transparent' }} />\n  ) : affordance ? (\n    <G9IconSlot icon={affordance.icon} color={affordance.color ?? state.stateColor} size={iconSize} />\n  ) : (\n    <G9IconSlot {...trailing} color={state.stateColor} size={iconSize} />\n  );\n\n  return (\n    <view\n      className={`g9-field g9-dir-${direction}${disabled ? ' g9-field--disabled' : ''}${props.className ? ` ${props.className}` : ''}`}\n    >\n      <view\n        {...g9KeyboardTargetProps}\n        className={`g9-field__box${state.floated ? ' g9-field__box--floated' : ''}${props.focused ? ' g9-field__box--focused' : ''}`}\n        accessibility-element={false}\n        style={{\n          height: multiline ? undefined : `${state.fieldHeight}px`,\n          minHeight: multiline ? `${state.fieldHeight}px` : undefined,\n          marginTop: props.reserveFloatingLabelClearance ? `${G9Metrics.FloatingLabelClearance}px` : '0px',\n          borderColor: state.stateColor,\n          borderWidth: `${state.strokeWidth}px`,\n          borderRadius: `${G9Metrics.RadiusMd}px`,\n        }}\n        bindtap={onBoxTap}\n      >\n        {state.haloWidth > 0 ? (\n          <view\n            className=\"g9-field__halo\"\n            style={{\n              borderColor: state.stateColor,\n              borderWidth: `${state.haloWidth}px`,\n              opacity: G9Metrics.FocusRingOpacity,\n              borderRadius: `${G9Metrics.RadiusMd}px`,\n            }}\n          />\n        ) : null}\n        <view\n          className=\"g9-field__content\"\n          style={{\n            paddingLeft: `${slot.innerPadding.left + (hasLeading && slot.leadingColumn === 0 ? G9Metrics.LeadingIconSlotWidth : 0) + (hasTrailing && slot.trailingColumn === 0 ? G9Metrics.TrailingIconSlotWidth : 0)}px`,\n            paddingRight: `${slot.innerPadding.right + (hasLeading && slot.leadingColumn === 2 ? G9Metrics.LeadingIconSlotWidth : 0) + (hasTrailing && slot.trailingColumn === 2 ? G9Metrics.TrailingIconSlotWidth : 0)}px`,\n            paddingTop: `${slot.innerPadding.top}px`,\n            paddingBottom: `${slot.innerPadding.bottom}px`,\n          }}\n        >\n          {props.children}\n        </view>\n        {hasLeading ? (\n          <view\n            className=\"g9-field__slot g9-field__slot--leading\"\n            style={slotStyle(slot.leadingColumn, G9Metrics.LeadingIconSlotWidth, false)}\n            catchtap={onLeadingTap}\n            {...(leadingActionable ? { 'accessibility-element': true, 'accessibility-traits': 'button' } : {})}\n          >\n            <G9IconSlot {...leading} color={state.restingContentColor} size={iconSize} />\n          </view>\n        ) : null}\n        {hasTrailing ? (\n          <view\n            key={busy ? 'busy' : affordance ? affordance.signature : 'icon'}\n            className=\"g9-field__slot g9-field__slot--trailing\"\n            style={slotStyle(slot.trailingColumn, G9Metrics.TrailingIconSlotWidth, multiline && !busy)}\n            catchtap={onTrailingTap}\n            {...(trailingActionable\n              ? {\n                  'accessibility-element': true,\n                  'accessibility-traits': 'button',\n                  ...(affordance?.label ? { 'accessibility-label': affordance.label } : {}),\n                }\n              : {})}\n          >\n            {trailingContent}\n          </view>\n        ) : null}\n        {state.labelText ? (\n          <text\n            className={`g9-field__label${state.floated ? ' g9-field__label--floated' : ''}`}\n            style={{\n              [labelAnchor]: `${G9Metrics.InputHorizontalPadding}px`,\n              top: `${state.floated ? G9Metrics.FloatingLabelFloatedY : restTop}px`,\n              fontSize: `${state.floated ? G9Metrics.FloatingLabelFontSizeFloat : G9Metrics.FloatingLabelFontSizeRest}px`,\n              color: state.labelColor,\n              transform: `translateX(${labelX}px)`,\n            }}\n          >\n            {state.labelText}\n          </text>\n        ) : null}\n      </view>\n      {state.footerVisible ? (\n        <view className=\"g9-field__footer\" style={g9RowStyle(direction)}>\n          {state.helperText ? (\n            <text\n              className=\"g9-field__helper\"\n              style={{ color: state.helperColor, textAlign: isRtl ? 'right' : 'left' }}\n            >\n              {state.helperText}\n            </text>\n          ) : (\n            <view className=\"g9-field__helper\" />\n          )}\n          {state.counterText ? <text className=\"g9-field__counter\">{state.counterText}</text> : null}\n        </view>\n      ) : null}\n    </view>\n  );\n}\n"],"names":["v","token","resolveOutlinedFieldState","props","input","_props_filledValueHighlight","_props_statusColor","_props_errorText","_props_helperText","_props_maxLength","_ref","hasError","useStatus","filled","highlight","G9FilledValueHighlight","accentFilled","placeholderTone","restingOutline","restingContentColor","stateColor","floated","neutralFilledRest","labelColor","helperRaw","helperText","maxLength","counterText","emphasis","halo","labelRaw","G9Metrics","useOutlinedField","settings","useG9Settings","physicalSide","column","G9OutlinedField","_props_valueFloated","_props_textLength","_props_restingTone","_props_leadingEmoji","_props_leadingImagePath","_props_leadingImage","_props_trailingEmoji","_props_trailingImagePath","_props_trailingImage","_props_trailingAffordance","_props_innerContentPadding","_pad_left","_pad_top","_pad_right","_pad_bottom","_affordance_color","direction","useG9Direction","isRtl","state","leading","trailing","busy","affordance","hasLeading","hasIconSlot","hasTrailing","pad","slot","resolveFieldSlotLayout","disabled","leadingActionable","undefined","trailingActionable","onLeadingTap","onTrailingTap","onBoxTap","multiline","labelHeight","restTop","labelX","labelAnchor","iconSize","slotStyle","width","bottomAligned","trailingContent","view","G9IconSlot","g9KeyboardTargetProps","text","g9RowStyle"],"mappings":"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"}
+{"version":3,"file":"fields/outlined-field.jsx","sources":["../../src/fields/outlined-field.tsx"],"sourcesContent":["import './fields.css';\nimport { G9FilledValueHighlight, type G9ImageSource, G9Metrics } from '@g9tm/lynxcontrols-foundation';\nimport type { ReactNode } from '@lynx-js/react';\nimport { g9IdProps, g9RowStyle } from '../base/control';\nimport { g9KeyboardTargetProps } from '../host/keyboard';\nimport type { G9IconInput } from '../icon/icon';\nimport { G9IconSlot, hasIconSlot } from '../icon/slot';\nimport { useG9Direction, useG9Settings } from '../provider/hooks';\nimport { type G9PhysicalPadding, resolveFieldSlotLayout } from './slot-layout';\n\n// MAUI `G9OutlinedFieldBase` (Controls/Shared/G9OutlinedFieldBase.cs) as composition (plan/specs/03 §5): the\n// props every outlined input shares, a pure state resolver, `useOutlinedField`, and the `<G9OutlinedField>` frame the\n// inputs put their element into.\n\n/** Props every outlined field shares (the public members of MAUI `G9OutlinedFieldBase`). */\nexport interface G9OutlinedFieldProps {\n  /**\n   * Element `id` of the field root (MAUI `AutomationId`; automation taps its bounds to focus it). Used verbatim: keep\n   * it to `[A-Za-z0-9_-]`.\n   */\n  readonly id?: string;\n  /** Floating label. Without it the placeholder is the label (MAUI `Label ?? Placeholder`). */\n  readonly label?: string | null;\n  /** Placeholder; shown as the label when `label` is not set. */\n  readonly placeholder?: string | null;\n  /** Helper line under the field; replaced by `errorText` while the field has an error. */\n  readonly helperText?: string | null;\n  /** Error message, shown (in the error colour) while `hasError`. */\n  readonly errorText?: string | null;\n  /** Error state: error outline, label and helper colour. Validation can also set it (`validate()`). Default false. */\n  readonly hasError?: boolean;\n  /** Keep the label floated even when empty and unfocused. Default false. */\n  readonly alwaysFloat?: boolean;\n  /** Value visible and selectable but not editable (MAUI `IsReadOnly`). Default false. */\n  readonly readOnly?: boolean;\n  /** Not interactive and dimmed (MAUI `IsEnabled = false`). Default false. */\n  readonly disabled?: boolean;\n  /** Maximum characters; `-1` (default) or `0` means unlimited. */\n  readonly maxLength?: number;\n  /** Show the `n / max` counter (only when `maxLength > 0`). Default false. */\n  readonly showCharacterCounter?: boolean;\n  /** Status colour (any CSS colour or `g9Token(...)`); used while `useStatusColor`. Default the primary colour. */\n  readonly statusColor?: string | null;\n  /** Draw the outline in `statusColor` (emphasised) whatever the focus. Default false. */\n  readonly useStatusColor?: boolean;\n  /** Soft inner halo while focused (no error, no status colour). Default false. */\n  readonly showFocusHalo?: boolean;\n  /** Filled-value accent of this field; `'inherit'` (default) takes `settings.fields.highlightFilledValue`. */\n  readonly filledValueHighlight?: G9FilledValueHighlight;\n  readonly leadingEmoji?: string | null;\n  readonly leadingIcon?: G9IconInput;\n  readonly leadingImagePath?: string | null;\n  readonly leadingImage?: G9ImageSource | null;\n  readonly trailingEmoji?: string | null;\n  readonly trailingIcon?: G9IconInput;\n  readonly trailingImagePath?: string | null;\n  readonly trailingImage?: G9ImageSource | null;\n  /** Spinner in the trailing slot (wins over every trailing icon). Default false. */\n  readonly isTrailingBusy?: boolean;\n  /** Keep the trailing icon on the physical right in RTL too. Default false. */\n  readonly forceTrailingIconRight?: boolean;\n  /** Keep the leading icon on the physical left in RTL too. Default false. */\n  readonly forceLeadingIconLeft?: boolean;\n  /** Box height; `0` (default) uses `G9Metrics.ControlHeight` (52). */\n  readonly fieldHeight?: number;\n  /** Reserve the floated label's overhang above the box (MAUI `FloatingLabelClearance`, 6). Default false. */\n  readonly reserveFloatingLabelClearance?: boolean;\n  /** Leading icon tap (MAUI `LeadingCommand` + `CommandParameter`). Makes the icon actionable. */\n  readonly onLeadingPress?: () => void;\n  /** Trailing icon tap when no built-in affordance claims it (MAUI `TrailingCommand`). */\n  readonly onTrailingPress?: () => void;\n  /** Extra padding of the inner content (MAUI `InnerContentPadding`), physical sides. */\n  readonly innerContentPadding?: Partial<G9PhysicalPadding>;\n  /** Class of the root element. */\n  readonly className?: string;\n}\n\n/** What {@link resolveOutlinedFieldState} needs besides the props. */\nexport interface G9OutlinedFieldStateInput {\n  readonly focused: boolean;\n  readonly hasValue: boolean;\n  /** A value the field shows without text (a picker's selection): floats the label like a value. */\n  readonly valueFloated?: boolean;\n  /** App-wide filled-value accent (`settings.fields.highlightFilledValue`). */\n  readonly highlightFilledValue: boolean;\n  /** Characters of the value, for the counter. */\n  readonly textLength: number;\n  /** Resting chrome tone: `'outline'` (default) or `'placeholder'` (search). */\n  readonly restingTone?: 'outline' | 'placeholder';\n}\n\n/** The resolved look of an outlined field (colours are CSS colour values). */\nexport interface G9OutlinedFieldState {\n  readonly floated: boolean;\n  /** Outline, floated label and trailing icon colour. */\n  readonly stateColor: string;\n  readonly labelColor: string;\n  /** Leading icon and resting label colour. */\n  readonly restingContentColor: string;\n  readonly labelText: string;\n  /** Helper line text (`errorText` while in error), `''` when hidden. */\n  readonly helperText: string;\n  readonly helperColor: string;\n  /** Counter text (`'n / max'`), `''` when hidden. */\n  readonly counterText: string;\n  readonly footerVisible: boolean;\n  readonly strokeWidth: number;\n  /** Focus halo thickness, 0 when off. */\n  readonly haloWidth: number;\n  readonly fieldHeight: number;\n}\n\nconst v = (token: string): string => `var(--g9-${token})`;\n\n/**\n * Resolves the field's state colours and footer (MAUI `ResolveStateColor`, `ResolveFloatingLabelColor`, the footer\n * part of `Refresh`). Precedence: error > status colour > focus > accented filled value > resting.\n */\nexport function resolveOutlinedFieldState(\n  props: G9OutlinedFieldProps,\n  input: G9OutlinedFieldStateInput,\n): G9OutlinedFieldState {\n  const hasError = props.hasError === true;\n  const useStatus = props.useStatusColor === true;\n  const filled = input.hasValue || input.valueFloated === true;\n  const highlight = props.filledValueHighlight ?? G9FilledValueHighlight.Inherit;\n  const accentFilled =\n    highlight === G9FilledValueHighlight.Accent\n      ? true\n      : highlight === G9FilledValueHighlight.Neutral\n        ? false\n        : input.highlightFilledValue;\n  const placeholderTone = input.restingTone === 'placeholder';\n  const restingOutline = placeholderTone ? v('input-placeholder') : v('outline');\n  const restingContentColor = placeholderTone ? v('input-placeholder') : v('text-tertiary');\n  let stateColor: string;\n  if (hasError) stateColor = v('error');\n  else if (useStatus) stateColor = props.statusColor ?? v('primary');\n  else if (input.focused) stateColor = v('primary');\n  else stateColor = filled && accentFilled ? v('primary') : restingOutline;\n\n  const floated = props.alwaysFloat === true || input.valueFloated === true || input.focused || input.hasValue;\n  const neutralFilledRest = filled && !input.focused && !hasError && !useStatus && !accentFilled;\n  const labelColor = floated && !neutralFilledRest ? stateColor : restingContentColor;\n\n  const helperRaw = hasError ? (props.errorText ?? '') : (props.helperText ?? '');\n  const helperText = helperRaw.trim() === '' ? '' : helperRaw;\n  const maxLength = props.maxLength ?? -1;\n  const counterText = props.showCharacterCounter === true && maxLength > 0 ? `${input.textLength} / ${maxLength}` : '';\n  const emphasis = input.focused || hasError || useStatus;\n  const halo = props.showFocusHalo === true && input.focused && !hasError && !useStatus;\n  const labelRaw = props.label ?? props.placeholder ?? '';\n  return {\n    floated,\n    stateColor,\n    labelColor,\n    restingContentColor,\n    labelText: labelRaw.trim() === '' ? '' : labelRaw,\n    helperText,\n    helperColor: hasError ? v('error') : v('text-tertiary'),\n    counterText,\n    footerVisible: helperText !== '' || counterText !== '',\n    strokeWidth: emphasis ? G9Metrics.OutlinedFieldEmphasisStrokeThickness : G9Metrics.OutlinedFieldStrokeThickness,\n    haloWidth: halo ? G9Metrics.OutlinedFieldFocusHaloThickness : 0,\n    fieldHeight: props.fieldHeight && props.fieldHeight > 0 ? props.fieldHeight : G9Metrics.ControlHeight,\n  };\n}\n\n/** {@link resolveOutlinedFieldState} with the app-wide settings read from the provider. */\nexport function useOutlinedField(\n  props: G9OutlinedFieldProps,\n  input: Omit<G9OutlinedFieldStateInput, 'highlightFilledValue'>,\n): G9OutlinedFieldState {\n  const settings = useG9Settings();\n  return resolveOutlinedFieldState(props, { ...input, highlightFilledValue: settings.fields.highlightFilledValue });\n}\n\n/** A built-in trailing affordance an input puts in the trailing slot (password eye, microphone, clear). */\nexport interface G9TrailingAffordance {\n  /** What it shows. */\n  readonly icon: G9IconInput;\n  /** Icon colour; default the state colour. */\n  readonly color?: string;\n  /** Accessibility label. */\n  readonly label?: string;\n  /** Stable key (MAUI `ResolveTrailingIconSignature`): the slot is rebuilt only when it changes. */\n  readonly signature: string;\n  readonly onPress: () => void;\n}\n\n/** Props of {@link G9OutlinedField}: the shared props plus what the composing input supplies. */\nexport interface G9OutlinedFieldFrameProps extends G9OutlinedFieldProps {\n  readonly focused: boolean;\n  readonly hasValue: boolean;\n  readonly valueFloated?: boolean;\n  readonly textLength?: number;\n  /** The input element (or any content) inside the box. */\n  readonly children?: ReactNode;\n  /** A built-in trailing affordance; replaces the trailing icon props (busy still wins). */\n  readonly trailingAffordance?: G9TrailingAffordance | null;\n  /** Tapping the box (outside the icons) focuses the content (MAUI `FocusTarget`). */\n  readonly onFocusRequest?: () => void;\n  /** Resting tone (`'placeholder'` for search, MAUI `ResolveRestingOutlineColor` override). */\n  readonly restingTone?: 'outline' | 'placeholder';\n  /** Vertical placement of the icons and the resting label: centred (entries) or top/bottom (editor). */\n  readonly multiline?: boolean;\n  /** Accessibility label of the box (defaults to the label text). */\n  readonly accessibilityLabel?: string;\n}\n\nfunction physicalSide(column: 0 | 2): 'left' | 'right' {\n  return column === 0 ? 'left' : 'right';\n}\n\n/**\n * The outlined field frame (MAUI `G9OutlinedFieldBase`): outline with a notched floating label, leading and\n * trailing icon slots, helper/error line and counter. Inputs (`G9TextEntry`, `G9Editor`, `G9SearchEntry`, the pickers)\n * put their element in `children`. Direction is set on the root from the culture (labels, icons, helper follow it;\n * the input decides its own text direction). A tap on an icon never focuses the content; a tap elsewhere on the box\n * calls `onFocusRequest`.\n *\n * Look: colours come from the theme variables (`--g9-primary`, `--g9-outline`, `--g9-error`, …). The floated label\n * sits on the outline with the background `--g9-field-notch-background` (default `--g9-background`; set it on a\n * container of another colour with `g9FieldNotchStyle`, G9 sheets and popups do), which hides the\n * outline under it.\n */\nexport function G9OutlinedField(props: G9OutlinedFieldFrameProps): ReactNode {\n  const direction = useG9Direction();\n  const isRtl = direction === 'rtl';\n  const state = useOutlinedField(props, {\n    focused: props.focused,\n    hasValue: props.hasValue,\n    valueFloated: props.valueFloated ?? false,\n    textLength: props.textLength ?? 0,\n    restingTone: props.restingTone ?? 'outline',\n  });\n  const leading = {\n    emoji: props.leadingEmoji ?? null,\n    icon: props.leadingIcon,\n    imagePath: props.leadingImagePath ?? null,\n    image: props.leadingImage ?? null,\n  };\n  const trailing = {\n    emoji: props.trailingEmoji ?? null,\n    icon: props.trailingIcon,\n    imagePath: props.trailingImagePath ?? null,\n    image: props.trailingImage ?? null,\n  };\n  const busy = props.isTrailingBusy === true;\n  const affordance = props.trailingAffordance ?? null;\n  const hasLeading = hasIconSlot(leading);\n  const hasTrailing = busy || affordance !== null || hasIconSlot(trailing);\n  const pad = props.innerContentPadding ?? {};\n  const slot = resolveFieldSlotLayout(\n    {\n      hasLeadingIcon: hasLeading,\n      hasTrailingIcon: hasTrailing,\n      isRtl,\n      forceTrailingIconRight: props.forceTrailingIconRight === true,\n      forceLeadingIconLeft: props.forceLeadingIconLeft === true,\n    },\n    { left: pad.left ?? 0, top: pad.top ?? 0, right: pad.right ?? 0, bottom: pad.bottom ?? 0 },\n  );\n  const disabled = props.disabled === true;\n  const leadingActionable = props.onLeadingPress !== undefined;\n  const trailingActionable = affordance !== null || props.onTrailingPress !== undefined;\n  const onLeadingTap = () => {\n    if (disabled || !leadingActionable) return;\n    props.onLeadingPress?.();\n  };\n  const onTrailingTap = () => {\n    if (disabled || busy || !trailingActionable) return;\n    if (affordance) affordance.onPress();\n    else props.onTrailingPress?.();\n  };\n  const onBoxTap = () => {\n    if (!disabled) props.onFocusRequest?.();\n  };\n\n  const multiline = props.multiline === true;\n  const labelHeight = G9Metrics.FloatingLabelHeight;\n  const restTop = multiline ? (G9Metrics.ControlHeight - labelHeight) / 2 : (state.fieldHeight - labelHeight) / 2;\n  const labelX = slot.labelRestX + (state.floated ? slot.labelFloatedX : 0);\n  const labelAnchor = isRtl ? 'right' : 'left';\n  const iconSize = G9Metrics.InputIconSize;\n  const slotStyle = (column: 0 | 2, width: number, bottomAligned: boolean) => ({\n    [physicalSide(column)]: '0px',\n    width: `${width}px`,\n    ...(bottomAligned\n      ? { bottom: '0px', height: `${G9Metrics.EditorTrailingSlotHeight}px` }\n      : { top: '0px', bottom: '0px' }),\n  });\n\n  const trailingContent = busy ? (\n    <view className=\"g9-field__busy\" style={{ borderColor: state.stateColor, borderTopColor: 'transparent' }} />\n  ) : affordance ? (\n    <G9IconSlot icon={affordance.icon} color={affordance.color ?? state.stateColor} size={iconSize} />\n  ) : (\n    <G9IconSlot {...trailing} color={state.stateColor} size={iconSize} />\n  );\n\n  return (\n    <view\n      className={`g9-field g9-dir-${direction}${disabled ? ' g9-field--disabled' : ''}${props.className ? ` ${props.className}` : ''}`}\n      {...g9IdProps(props.id)}\n    >\n      <view\n        {...g9KeyboardTargetProps}\n        className={`g9-field__box${state.floated ? ' g9-field__box--floated' : ''}${props.focused ? ' g9-field__box--focused' : ''}`}\n        accessibility-element={false}\n        style={{\n          height: multiline ? undefined : `${state.fieldHeight}px`,\n          minHeight: multiline ? `${state.fieldHeight}px` : undefined,\n          marginTop: props.reserveFloatingLabelClearance ? `${G9Metrics.FloatingLabelClearance}px` : '0px',\n        }}\n        bindtap={onBoxTap}\n      >\n        {/* The outline is its own view (MAUI paints it on a canvas): a stroke change never moves the content, and a\n            disabled field dims it without an opacity layer on the box, which clipped the floated label on Android. */}\n        <view\n          className=\"g9-field__outline\"\n          style={{\n            borderColor: state.stateColor,\n            borderWidth: `${state.strokeWidth}px`,\n            borderRadius: `${G9Metrics.RadiusMd}px`,\n          }}\n        />\n        {state.haloWidth > 0 ? (\n          <view\n            className=\"g9-field__halo\"\n            style={{\n              borderColor: state.stateColor,\n              borderWidth: `${state.haloWidth}px`,\n              opacity: G9Metrics.FocusRingOpacity,\n              borderRadius: `${G9Metrics.RadiusMd}px`,\n            }}\n          />\n        ) : null}\n        <view\n          className=\"g9-field__content\"\n          style={{\n            paddingLeft: `${slot.innerPadding.left + (hasLeading && slot.leadingColumn === 0 ? G9Metrics.LeadingIconSlotWidth : 0) + (hasTrailing && slot.trailingColumn === 0 ? G9Metrics.TrailingIconSlotWidth : 0)}px`,\n            paddingRight: `${slot.innerPadding.right + (hasLeading && slot.leadingColumn === 2 ? G9Metrics.LeadingIconSlotWidth : 0) + (hasTrailing && slot.trailingColumn === 2 ? G9Metrics.TrailingIconSlotWidth : 0)}px`,\n            paddingTop: `${slot.innerPadding.top}px`,\n            paddingBottom: `${slot.innerPadding.bottom}px`,\n          }}\n        >\n          {props.children}\n        </view>\n        {hasLeading ? (\n          <view\n            className=\"g9-field__slot g9-field__slot--leading\"\n            style={slotStyle(slot.leadingColumn, G9Metrics.LeadingIconSlotWidth, false)}\n            catchtap={onLeadingTap}\n            {...(leadingActionable ? { 'accessibility-element': true, 'accessibility-traits': 'button' } : {})}\n          >\n            <G9IconSlot {...leading} color={state.restingContentColor} size={iconSize} />\n          </view>\n        ) : null}\n        {hasTrailing ? (\n          <view\n            key={busy ? 'busy' : affordance ? affordance.signature : 'icon'}\n            className=\"g9-field__slot g9-field__slot--trailing\"\n            style={slotStyle(slot.trailingColumn, G9Metrics.TrailingIconSlotWidth, multiline && !busy)}\n            catchtap={onTrailingTap}\n            {...(trailingActionable\n              ? {\n                  'accessibility-element': true,\n                  'accessibility-traits': 'button',\n                  ...(affordance?.label ? { 'accessibility-label': affordance.label } : {}),\n                }\n              : {})}\n          >\n            {trailingContent}\n          </view>\n        ) : null}\n        {state.labelText ? (\n          <text\n            className={`g9-field__label${state.floated ? ' g9-field__label--floated' : ''}`}\n            style={{\n              [labelAnchor]: `${G9Metrics.InputHorizontalPadding}px`,\n              top: `${state.floated ? G9Metrics.FloatingLabelFloatedY : restTop}px`,\n              fontSize: `${state.floated ? G9Metrics.FloatingLabelFontSizeFloat : G9Metrics.FloatingLabelFontSizeRest}px`,\n              color: disabled ? 'var(--g9-text-disabled)' : state.labelColor,\n              transform: `translateX(${labelX}px)`,\n            }}\n          >\n            {state.labelText}\n          </text>\n        ) : null}\n      </view>\n      {state.footerVisible ? (\n        <view className=\"g9-field__footer\" style={g9RowStyle(direction)}>\n          {state.helperText ? (\n            <text\n              className=\"g9-field__helper\"\n              style={{ color: state.helperColor, textAlign: isRtl ? 'right' : 'left' }}\n            >\n              {state.helperText}\n            </text>\n          ) : (\n            <view className=\"g9-field__helper\" />\n          )}\n          {state.counterText ? <text className=\"g9-field__counter\">{state.counterText}</text> : null}\n        </view>\n      ) : null}\n    </view>\n  );\n}\n"],"names":["v","token","resolveOutlinedFieldState","props","input","_props_filledValueHighlight","_props_statusColor","_props_errorText","_props_helperText","_props_maxLength","_ref","hasError","useStatus","filled","highlight","G9FilledValueHighlight","accentFilled","placeholderTone","restingOutline","restingContentColor","stateColor","floated","neutralFilledRest","labelColor","helperRaw","helperText","maxLength","counterText","emphasis","halo","labelRaw","G9Metrics","useOutlinedField","settings","useG9Settings","physicalSide","column","G9OutlinedField","_props_valueFloated","_props_textLength","_props_restingTone","_props_leadingEmoji","_props_leadingImagePath","_props_leadingImage","_props_trailingEmoji","_props_trailingImagePath","_props_trailingImage","_props_trailingAffordance","_props_innerContentPadding","_pad_left","_pad_top","_pad_right","_pad_bottom","_affordance_color","direction","useG9Direction","isRtl","state","leading","trailing","busy","affordance","hasLeading","hasIconSlot","hasTrailing","pad","slot","resolveFieldSlotLayout","disabled","leadingActionable","undefined","trailingActionable","onLeadingTap","onTrailingTap","onBoxTap","multiline","labelHeight","restTop","labelX","labelAnchor","iconSize","slotStyle","width","bottomAligned","trailingContent","view","G9IconSlot","g9IdProps","g9KeyboardTargetProps","text","g9RowStyle"],"mappings":"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"}

package/dist/fields/pin-entry.d.ts

@@ -2,6 +2,8 @@ import './fields.css';
 import { G9PinEntryType } from '@g9tm/lynxcontrols-foundation';
 /** Props of {@link G9PinEntry} (MAUI `G9PinEntry`). */
 export interface G9PinEntryProps {
+    /** Element `id` of the root (MAUI `AutomationId`). Used verbatim: keep it to `[A-Za-z0-9_-]`. */
+    readonly id?: string;
     /** Number of cells when `groupSizes` is not set (at least 1). Default 4. */
     readonly length?: number;
     /** The code (controlled; MAUI `Value`). */