@coinbase/cds-web 8.56.1 → 8.57.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 8.57.1 (3/24/2026 PST)
12
+
13
+ #### 🐞 Fixes
14
+
15
+ - Use aria-describedby for all tooltip's triggers. [[#541](https://github.com/coinbase/cds/pull/541)]
16
+
17
+ ## 8.57.0 (3/24/2026 PST)
18
+
19
+ #### 🚀 Updates
20
+
21
+ - Feat: support focusedBorderWidth on TextInput. [[#537](https://github.com/coinbase/cds/pull/537)]
22
+
11
23
  ## 8.56.1 (3/24/2026 PST)
12
24
 
13
25
  #### 🐞 Fixes
@@ -12,9 +12,11 @@ export type SearchInputBaseProps = Pick<
12
12
  | 'accessibilityHint'
13
13
  | 'accessibilityLabel'
14
14
  | 'accessibilityLabelledBy'
15
+ | 'bordered'
15
16
  | 'compact'
16
17
  | 'disabled'
17
18
  | 'enableColorSurge'
19
+ | 'focusedBorderWidth'
18
20
  | 'helperTextErrorIconAccessibilityLabel'
19
21
  | 'placeholder'
20
22
  | 'testID'
@@ -67,11 +69,6 @@ export type SearchInputProps = SearchInputBaseProps &
67
69
  * Callback fired when pressed/clicked
68
70
  */
69
71
  onClick?: React.MouseEventHandler;
70
- /**
71
- * Adds border to input
72
- * @default true
73
- */
74
- bordered?: boolean;
75
72
  };
76
73
  export declare const SearchInput: React.MemoExoticComponent<
77
74
  React.ForwardRefExoticComponent<
@@ -85,6 +82,8 @@ export declare const SearchInput: React.MemoExoticComponent<
85
82
  | 'accessibilityLabel'
86
83
  | 'accessibilityLabelledBy'
87
84
  | 'accessibilityHint'
85
+ | 'bordered'
86
+ | 'focusedBorderWidth'
88
87
  | 'enableColorSurge'
89
88
  | 'helperTextErrorIconAccessibilityLabel'
90
89
  | 'testIDMap'
@@ -134,11 +133,6 @@ export declare const SearchInput: React.MemoExoticComponent<
134
133
  * Callback fired when pressed/clicked
135
134
  */
136
135
  onClick?: React.MouseEventHandler;
137
- /**
138
- * Adds border to input
139
- * @default true
140
- */
141
- bordered?: boolean;
142
136
  } & React.RefAttributes<HTMLInputElement>
143
137
  >
144
138
  >;
@@ -1 +1 @@
1
- {"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../src/controls/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAQ3D,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjE,eAAO,MAAM,MAAM;;;CAGlB,CAAC;AAUF,KAAK,gBAAgB,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GACjE,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC,CAAC;AAE5C,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,kBAAkB,EAChB,mBAAmB,GACnB,oBAAoB,GACpB,yBAAyB,GACzB,SAAS,GACT,UAAU,GACV,kBAAkB,GAClB,uCAAuC,GACvC,aAAa,GACb,QAAQ,GACR,WAAW,GACX,OAAO,CACV,GAAG;IACF;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAC,CAAC;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,2BAA2B,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjD;;OAEG;IACH,2BAA2B,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,gBAAgB,GAAG;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEJ,eAAO,MAAM,WAAW;IAtDtB;;;OAGG;eACQ,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI;IAChC;;;OAGG;oBACa,OAAO;IACvB;;;;;;;OAOG;gBACS,OAAO,CAAC,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAC;IACrD;;;OAGG;kBACW,OAAO;IACrB;;;OAGG;UACG,KAAK,CAAC,SAAS;IACrB;;OAEG;kCAC2B,MAAM,GAAG,SAAS;IAChD;;OAEG;kCAC2B,MAAM,GAAG,SAAS;;cAKpC,KAAK,CAAC,iBAAiB;kBACnB,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;IACpC;;OAEG;cACO,KAAK,CAAC,iBAAiB;IACjC;;;OAGG;eACQ,OAAO;2CAkGrB,CAAC"}
1
+ {"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../src/controls/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAQ3D,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjE,eAAO,MAAM,MAAM;;;CAGlB,CAAC;AAUF,KAAK,gBAAgB,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GACjE,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC,CAAC;AAE5C,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,kBAAkB,EAChB,mBAAmB,GACnB,oBAAoB,GACpB,yBAAyB,GACzB,UAAU,GACV,SAAS,GACT,UAAU,GACV,kBAAkB,GAClB,oBAAoB,GACpB,uCAAuC,GACvC,aAAa,GACb,QAAQ,GACR,WAAW,GACX,OAAO,CACV,GAAG;IACF;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAC,CAAC;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,2BAA2B,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjD;;OAEG;IACH,2BAA2B,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,gBAAgB,GAAG;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;CACnC,CAAC;AAEJ,eAAO,MAAM,WAAW;IAjDtB;;;OAGG;eACQ,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI;IAChC;;;OAGG;oBACa,OAAO;IACvB;;;;;;;OAOG;gBACS,OAAO,CAAC,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAC;IACrD;;;OAGG;kBACW,OAAO;IACrB;;;OAGG;UACG,KAAK,CAAC,SAAS;IACrB;;OAEG;kCAC2B,MAAM,GAAG,SAAS;IAChD;;OAEG;kCAC2B,MAAM,GAAG,SAAS;;cAKpC,KAAK,CAAC,iBAAiB;kBACnB,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;IACpC;;OAEG;cACO,KAAK,CAAC,iBAAiB;2CAgGpC,CAAC"}
@@ -19,10 +19,16 @@ export type TextInputBaseProps = {
19
19
  * */
20
20
  inputNode?: React.ReactElement;
21
21
  /**
22
- * Adds border to input
22
+ * Adds border to input.
23
+ * When set to `false`, focus border styling is disabled by default.
23
24
  * @default true
24
25
  */
25
26
  bordered?: boolean;
27
+ /**
28
+ * Additional border width when focused.
29
+ * Set this when `bordered={false}` to opt into a focus border style.
30
+ */
31
+ focusedBorderWidth?: InputStackBaseProps['focusedBorderWidth'];
26
32
  /**
27
33
  * Aligns text inside input and helperText
28
34
  * @default start
@@ -91,10 +97,16 @@ export declare const TextInput: React.MemoExoticComponent<
91
97
  * */
92
98
  inputNode?: React.ReactElement;
93
99
  /**
94
- * Adds border to input
100
+ * Adds border to input.
101
+ * When set to `false`, focus border styling is disabled by default.
95
102
  * @default true
96
103
  */
97
104
  bordered?: boolean;
105
+ /**
106
+ * Additional border width when focused.
107
+ * Set this when `bordered={false}` to opt into a focus border style.
108
+ */
109
+ focusedBorderWidth?: InputStackBaseProps['focusedBorderWidth'];
98
110
  /**
99
111
  * Aligns text inside input and helperText
100
112
  * @default start
@@ -1 +1 @@
1
- {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAgB,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAChG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAW/E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AA8CxD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;;;;;;SAOK;IACL,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uHAAuH;IACvH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mHAAmH;IACnH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,GAAG,WAAW,GACb,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,gBAAgB,GAChB,IAAI,CACF,mBAAmB,EACjB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,cAAc,GACd,iBAAiB,CACpB,GACD,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAkBhD,eAAO,MAAM,SAAS;IAvFpB;;OAEG;cACO,KAAK,CAAC,iBAAiB;IACjC;;;;;;;SAOK;gBACO,KAAK,CAAC,YAAY;IAC9B;;;OAGG;eACQ,OAAO;IAClB;;;OAGG;YACK,cAAc,CAAC,OAAO,CAAC;IAC/B;;OAEG;aACM,MAAM;IACf,uHAAuH;YAC/G,KAAK,CAAC,SAAS;IACvB,mHAAmH;UAC7G,KAAK,CAAC,SAAS;IACrB;;OAEG;gBACS;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB;IACD;;;OAGG;4CACqC,MAAM;IAC9C;;;OAGG;gBACS,KAAK,CAAC,SAAS;oZAqS5B,CAAC"}
1
+ {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAgB,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAChG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAW/E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AA8CxD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;;;;;;SAOK;IACL,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;IAC/D;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uHAAuH;IACvH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mHAAmH;IACnH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,GAAG,WAAW,GACb,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,gBAAgB,GAChB,IAAI,CACF,mBAAmB,EACjB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,cAAc,GACd,iBAAiB,CACpB,GACD,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAkBhD,eAAO,MAAM,SAAS;IA7FpB;;OAEG;cACO,KAAK,CAAC,iBAAiB;IACjC;;;;;;;SAOK;gBACO,KAAK,CAAC,YAAY;IAC9B;;;;OAIG;eACQ,OAAO;IAClB;;;OAGG;yBACkB,mBAAmB,CAAC,oBAAoB,CAAC;IAC9D;;;OAGG;YACK,cAAc,CAAC,OAAO,CAAC;IAC/B;;OAEG;aACM,MAAM;IACf,uHAAuH;YAC/G,KAAK,CAAC,SAAS;IACvB,mHAAmH;UAC7G,KAAK,CAAC,SAAS;IACrB;;OAEG;gBACS;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB;IACD;;;OAGG;4CACqC,MAAM;IAC9C;;;OAGG;gBACS,KAAK,CAAC,SAAS;oZAqS5B,CAAC"}
@@ -1,23 +1,26 @@
1
1
  import React from 'react';
2
2
  import { type DateInputOptions } from '@coinbase/cds-common/dates/useDateInput';
3
- import { type TextInputProps } from '../controls/TextInput';
4
- export type DateInputProps = {
5
- /** Date format separator character, e.g. the / in "MM/DD/YYYY". Defaults to forward slash (/). */
6
- separator?: string;
7
- className?: string;
8
- style?: React.CSSProperties;
9
- } & Omit<DateInputOptions, 'intlDateFormat'> &
10
- Omit<TextInputProps, 'inputNode' | 'value' | 'defaultValue'>;
3
+ import { type TextInputBaseProps, type TextInputProps } from '../controls/TextInput';
4
+ export type DateInputBaseProps = Omit<DateInputOptions, 'intlDateFormat'> &
5
+ Omit<TextInputBaseProps, 'inputNode' | 'value' | 'defaultValue' | 'style'> & {
6
+ /** Date format separator character, e.g. the / in "MM/DD/YYYY". Defaults to forward slash (/). */
7
+ separator?: string;
8
+ };
9
+ export type DateInputProps = DateInputBaseProps &
10
+ Omit<TextInputProps, 'inputNode' | 'value' | 'defaultValue' | 'style'> & {
11
+ className?: string;
12
+ style?: React.CSSProperties;
13
+ };
11
14
  export declare const DateInput: React.MemoExoticComponent<
12
15
  React.ForwardRefExoticComponent<
13
- {
14
- /** Date format separator character, e.g. the / in "MM/DD/YYYY". Defaults to forward slash (/). */
15
- separator?: string;
16
- className?: string;
17
- style?: React.CSSProperties;
18
- } & Omit<DateInputOptions, 'intlDateFormat'> &
19
- Omit<import('../controls').TextInputBaseProps, 'defaultValue' | 'value' | 'inputNode'> &
20
- React.RefAttributes<HTMLInputElement>
16
+ Omit<DateInputOptions, 'intlDateFormat'> &
17
+ Omit<TextInputBaseProps, 'style' | 'defaultValue' | 'value' | 'inputNode'> & {
18
+ /** Date format separator character, e.g. the / in "MM/DD/YYYY". Defaults to forward slash (/). */
19
+ separator?: string;
20
+ } & {
21
+ className?: string;
22
+ style?: React.CSSProperties;
23
+ } & React.RefAttributes<HTMLInputElement>
21
24
  >
22
25
  >;
23
26
  //# sourceMappingURL=DateInput.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/dates/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAE,KAAK,gBAAgB,EAAgB,MAAM,yCAAyC,CAAC;AAG9F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvE,MAAM,MAAM,cAAc,GAAG;IAC3B,kGAAkG;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,GAC1C,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,OAAO,GAAG,cAAc,CAAC,CAAC;AAE/D,eAAO,MAAM,SAAS;IAPpB,kGAAkG;gBACtF,MAAM;gBACN,MAAM;YACV,KAAK,CAAC,aAAa;+KA2G5B,CAAC"}
1
+ {"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/dates/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAE,KAAK,gBAAgB,EAAgB,MAAM,yCAAyC,CAAC;AAG9F,OAAO,EAAa,KAAK,kBAAkB,EAAE,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGhG,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,GACvE,IAAI,CAAC,kBAAkB,EAAE,WAAW,GAAG,OAAO,GAAG,cAAc,GAAG,OAAO,CAAC,GAAG;IAC3E,kGAAkG;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,OAAO,GAAG,cAAc,GAAG,OAAO,CAAC,GAAG;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEJ,eAAO,MAAM,SAAS;IAVlB,kGAAkG;gBACtF,MAAM;;gBAKN,MAAM;YACV,KAAK,CAAC,aAAa;2CA0G9B,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQnD,eAAO,MAAM,OAAO,GAAI,+SAqBrB,YAAY,4CAoFd,CAAC"}
1
+ {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQnD,eAAO,MAAM,OAAO,GAAI,+SAqBrB,YAAY,4CA8Ed,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/TooltipContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAmCzD,eAAO,MAAM,cAAc;;;wJAgD1B,CAAC"}
1
+ {"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/TooltipContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAmCzD,eAAO,MAAM,cAAc;;;wJAkD1B,CAAC"}
@@ -1,4 +1,4 @@
1
- const _excluded = ["onChange", "onClear", "onChangeText", "onSearch", "testID", "value", "compact", "hideStartIcon", "bordered", "hideEndIcon", "startIcon", "end", "startIconAccessibilityLabel", "clearIconAccessibilityLabel"];
1
+ const _excluded = ["onChange", "onClear", "onChangeText", "onSearch", "testID", "value", "compact", "hideStartIcon", "hideEndIcon", "startIcon", "end", "startIconAccessibilityLabel", "clearIconAccessibilityLabel"];
2
2
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
3
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
4
  function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -30,7 +30,6 @@ export const SearchInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Se
30
30
  value,
31
31
  compact,
32
32
  hideStartIcon = false,
33
- bordered = true,
34
33
  hideEndIcon,
35
34
  startIcon,
36
35
  end,
@@ -61,7 +60,6 @@ export const SearchInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Se
61
60
  return /*#__PURE__*/_jsx(TextInput, _objectSpread({
62
61
  ref: refs,
63
62
  borderRadius: 1000,
64
- bordered: bordered,
65
63
  className: cx(baseCss, compact && compactCss),
66
64
  end: end !== null && end !== void 0 ? end : !!value && !hideEndIcon && /*#__PURE__*/_jsx(Box, {
67
65
  marginEnd: compact ? -0.5 : 0,
@@ -1,4 +1,4 @@
1
- const _excluded = ["label", "accessibilityLabel", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "compact", "suffix", "onFocus", "onBlur", "borderRadius", "height", "inputNode", "bordered", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "labelVariant", "labelNode", "inputBackground"];
1
+ const _excluded = ["label", "accessibilityLabel", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "compact", "suffix", "onFocus", "onBlur", "borderRadius", "height", "inputNode", "bordered", "focusedBorderWidth", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "labelVariant", "labelNode", "inputBackground"];
2
2
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
3
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
4
  function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -64,6 +64,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
64
64
  height,
65
65
  inputNode,
66
66
  bordered = true,
67
+ focusedBorderWidth,
67
68
  enableColorSurge = false,
68
69
  helperTextErrorIconAccessibilityLabel = 'error',
69
70
  labelVariant = 'outside',
@@ -151,11 +152,8 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
151
152
  value: focused ? focusedVariant : undefined,
152
153
  children: /*#__PURE__*/_jsx(InputStack, {
153
154
  borderRadius: borderRadius,
154
- borderWidth: bordered ? 100 : 0
155
- // If bordered is true, we want disableFocusedStyle = false
156
- // If bordered is false, we want disableFocusedStyle = true
157
- ,
158
- disableFocusedStyle: !bordered,
155
+ borderWidth: bordered ? 100 : 0,
156
+ disableFocusedStyle: !bordered && typeof focusedBorderWidth === 'undefined',
159
157
  disabled: disabled,
160
158
  enableColorSurge: enableColorSurge,
161
159
  endNode: (suffix !== '' || !!end) && /*#__PURE__*/_jsxs(HStack, {
@@ -177,6 +175,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
177
175
  })]
178
176
  }),
179
177
  focused: focused,
178
+ focusedBorderWidth: focusedBorderWidth,
180
179
  height: height,
181
180
  helperTextNode: !!helperText && (typeof helperText === 'string' ? /*#__PURE__*/_jsx(HelperText, {
182
181
  accessibilityLabel: helperText,
@@ -51,19 +51,13 @@ export const Tooltip = _ref => {
51
51
  }
52
52
  }, [handleOnMouseEnter]);
53
53
  const clonedChild = useMemo(() => {
54
- const isStringContent = typeof content === 'string';
55
- return /*#__PURE__*/cloneElement(children,
56
- // String content: Use only aria-label so the trigger is announced on focus without
57
- // double announcement (aria-describedby would point to the same text when the tooltip is open).
58
- // Non-string content: Use only aria-describedby to associate the visible tooltip (id=tooltipId).
59
- // We cannot use aria-label here (it accepts only strings). May not announce on focus for
60
- // non-button triggers due to timing (describedby target mounts when tooltip opens).
61
- isStringContent ? {
62
- 'aria-label': content
63
- } : {
54
+ // Use aria-describedby to associate the tooltip (role="tooltip") with the trigger.
55
+ // This preserves the trigger's own accessible name (e.g. button text) while the tooltip
56
+ // provides supplemental description, per the ARIA tooltip pattern.
57
+ return /*#__PURE__*/cloneElement(children, {
64
58
  'aria-describedby': tooltipId
65
59
  });
66
- }, [children, content, tooltipId]);
60
+ }, [children, tooltipId]);
67
61
  const contentPosition = useMemo(() => ({
68
62
  placement
69
63
  }), [placement]);
@@ -46,17 +46,17 @@ export const TooltipContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
46
46
  borderRadius: 200,
47
47
  "data-testid": testID,
48
48
  elevation: elevation,
49
+ id: tooltipId,
49
50
  maxWidth: tooltipMaxWidth,
50
51
  paddingX: tooltipPaddingX,
51
52
  paddingY: tooltipPaddingY,
53
+ role: "tooltip",
52
54
  children: typeof content === 'string' ? /*#__PURE__*/_jsx(Text, {
53
55
  className: textCss,
54
56
  color: "fg",
55
57
  font: "label2",
56
- id: tooltipId,
57
58
  children: content
58
59
  }) : /*#__PURE__*/_jsx("div", {
59
- id: tooltipId,
60
60
  children: content
61
61
  })
62
62
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-web",
3
- "version": "8.56.1",
3
+ "version": "8.57.1",
4
4
  "description": "Coinbase Design System - Web",
5
5
  "repository": {
6
6
  "type": "git",
@@ -207,7 +207,7 @@
207
207
  "react-dom": "^18.3.1"
208
208
  },
209
209
  "dependencies": {
210
- "@coinbase/cds-common": "^8.56.1",
210
+ "@coinbase/cds-common": "^8.57.1",
211
211
  "@coinbase/cds-icons": "^5.13.0",
212
212
  "@coinbase/cds-illustrations": "^4.35.0",
213
213
  "@coinbase/cds-lottie-files": "^3.3.4",