@rescui/chip-list 0.13.5 → 0.13.6-RUI-291-Update-next-js-to-the-latest-version-8f54dec0a.66

package/lib/chip-list-multi.d.ts

@@ -1,45 +1,54 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Theme } from '@rescui/ui-contexts';
-import { ChipListSizeType, ChipListModeType, ChipListAlignItemsType } from './parts/types';
-export declare const compareValuesDefault: <V>(activeValues: V[], value: V) => boolean;
-export declare type ChipListMultiProps<ValueType> = {
-    className?: string;
-    size?: ChipListSizeType;
-    /** Increase inner horizontal offset between the chips. Does nothing when `compact={true}` */
-    sparse?: boolean;
-    /** Decrease horizontal paddings, gap and border-radius values */
-    compact?: boolean;
-    disabled?: boolean;
-    theme?: Theme;
-    mode?: ChipListModeType;
-    alignItems?: ChipListAlignItemsType;
-    value: ValueType[];
-    onChange: (value: ValueType[]) => void;
-    children: React.ReactNode;
-    compareValues?: (activeValue: ValueType[], value: ValueType) => boolean;
-    /** Identifier for e2e tests */
-    'data-e2e'?: string;
-    /** CSS style object */
-    style?: React.CSSProperties;
-};
-export declare function ChipListMulti<ValueType>({ onChange, compareValues, value, children, size, sparse, compact, disabled, mode, alignItems, ...props }: ChipListMultiProps<ValueType>): JSX.Element;
-export declare namespace ChipListMulti {
-    var displayName: string;
-    var propTypes: {
-        size: PropTypes.Requireable<string>;
-        sparse: PropTypes.Requireable<boolean>;
-        compact: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        theme: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        mode: PropTypes.Requireable<string>;
-        alignItems: PropTypes.Requireable<string>;
-        value: PropTypes.Validator<any[]>;
-        onChange: PropTypes.Validator<(...args: any[]) => any>;
-        compareValues: PropTypes.Requireable<(...args: any[]) => any>;
-        'data-e2e': PropTypes.Requireable<string>;
-        style: PropTypes.Requireable<object>;
-    };
-}
-export default ChipListMulti;
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Theme } from '@rescui/ui-contexts';
+import { ChipListSizeType, ChipListModeType, ChipListAlignItemsType } from './parts/types';
+export declare const compareValuesDefault: <V>(activeValues: V[], value: V) => boolean;
+export type ChipListMultiProps<ValueType> = {
+    className?: string;
+    size?: ChipListSizeType;
+    /** Increase inner horizontal offset between the chips. Does nothing when `compact={true}` */
+    sparse?: boolean;
+    /** Decrease horizontal paddings, gap and border-radius values */
+    compact?: boolean;
+    disabled?: boolean;
+    theme?: Theme;
+    mode?: ChipListModeType;
+    alignItems?: ChipListAlignItemsType;
+    value: ValueType[];
+    onChange: (value: ValueType[]) => void;
+    children: React.ReactNode;
+    compareValues?: (activeValue: ValueType[], value: ValueType) => boolean;
+    /** Identifier for e2e tests */
+    'data-e2e'?: string;
+    /** Optional name of all `input[type="checkbox"]` children. */
+    name?: string;
+    /** Optional a11y label for the chip list. Recommended to use either that or `aria-labelledby`. */
+    'aria-label'?: string;
+    /** Optional a11y label reference for the chip list. Recommended to use either that or `aria-label`. */
+    'aria-labelledby'?: string;
+    /** CSS style object */
+    style?: React.CSSProperties;
+};
+export declare function ChipListMulti<ValueType>({ onChange, compareValues, value, children, size, sparse, compact, disabled, mode, alignItems, name, ...props }: ChipListMultiProps<ValueType>): React.JSX.Element;
+export declare namespace ChipListMulti {
+    var displayName: string;
+    var propTypes: {
+        size: PropTypes.Requireable<string>;
+        sparse: PropTypes.Requireable<boolean>;
+        compact: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        theme: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        mode: PropTypes.Requireable<string>;
+        alignItems: PropTypes.Requireable<string>;
+        value: PropTypes.Validator<any[]>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        compareValues: PropTypes.Requireable<(...args: any[]) => any>;
+        name: PropTypes.Requireable<string>;
+        'aria-label': PropTypes.Requireable<string>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'data-e2e': PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+    };
+}
+export default ChipListMulti;

package/lib/chip-list-multi.js

@@ -3,6 +3,7 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/ins
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ChipListBase } from './parts/chip-list-base.js';
+import { useSafeId } from './parts/use-safe-id.js';
 
 const compareValuesDefault = (activeValues, value) => Array.isArray(activeValues) && _includesInstanceProperty(activeValues).call(activeValues, value);
 
@@ -18,8 +19,10 @@ function ChipListMulti(_ref) {
     disabled = false,
     mode = 'classic',
     alignItems = 'left',
+    name,
     ...props
   } = _ref;
+  const uniqueId = useSafeId();
   return /*#__PURE__*/React.createElement(ChipListBase, {
     compareValues: compareValues,
     value: value,
@@ -33,7 +36,9 @@ function ChipListMulti(_ref) {
     disabled: disabled,
     mode: mode,
     alignItems: alignItems,
-    ...props
+    ...props,
+    pattern: "group",
+    name: name ?? `rs-chip-list-multi-${uniqueId}`
   }, children);
 }
 
@@ -50,6 +55,9 @@ ChipListMulti.propTypes = {
   value: PropTypes.array.isRequired,
   onChange: PropTypes.func.isRequired,
   compareValues: PropTypes.func,
+  name: PropTypes.string,
+  'aria-label': PropTypes.string,
+  'aria-labelledby': PropTypes.string,
   'data-e2e': PropTypes.string,
   style: PropTypes.object
 };

package/lib/chip-list.d.ts

@@ -1,29 +1,56 @@
-import React from 'react';
-import { Theme } from '@rescui/ui-contexts';
-import { ChipListSizeType, ChipListModeType, ChipListAlignItemsType } from './parts/types';
-export declare const compareValuesDefault: <V>(activeValue: V, value: V) => boolean;
-export declare type ChipListProps<ValueType> = {
-    className?: string;
-    size?: ChipListSizeType;
-    /** Increase inner horizontal offset between the chips. Does nothing when `compact={true}` */
-    sparse?: boolean;
-    /** Decrease horizontal paddings, gap and border-radius values */
-    compact?: boolean;
-    disabled?: boolean;
-    theme?: Theme;
-    mode?: ChipListModeType;
-    alignItems?: ChipListAlignItemsType;
-    value: ValueType;
-    onChange: (value: ValueType) => void;
-    children: React.ReactNode;
-    compareValues?: (activeValue: ValueType, value: ValueType) => boolean;
-    /** Identifier for e2e tests */
-    'data-e2e'?: string;
-    /** CSS style object */
-    style?: React.CSSProperties;
-};
-export declare function ChipList<ValueType>({ children, compareValues, value, onChange, size, sparse, compact, disabled, mode, alignItems, ...props }: ChipListProps<ValueType>): JSX.Element;
-export declare namespace ChipList {
-    var displayName: string;
-    var propTypes: {};
-}
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Theme } from '@rescui/ui-contexts';
+import { ChipListSizeType, ChipListModeType, ChipListAlignItemsType, ChipListPatternType } from './parts/types';
+export declare const compareValuesDefault: <V>(activeValue: V, value: V) => boolean;
+export type ChipListProps<ValueType> = {
+    className?: string;
+    size?: ChipListSizeType;
+    /** Increase inner horizontal offset between the chips. Does nothing when `compact={true}` */
+    sparse?: boolean;
+    /** Decrease horizontal paddings, gap and border-radius values */
+    compact?: boolean;
+    disabled?: boolean;
+    theme?: Theme;
+    mode?: ChipListModeType;
+    alignItems?: ChipListAlignItemsType;
+    /** Behavior pattern. `auto` renders chips with `aria-controls` as `tablist`, links as `navigation`, and chips without links as `radiogroup`. */
+    pattern?: ChipListPatternType;
+    value: ValueType;
+    onChange: (value: ValueType) => void;
+    children: React.ReactNode;
+    compareValues?: (activeValue: ValueType, value: ValueType) => boolean;
+    /** Optional name of all `input[type="radio"]` children. */
+    name?: string;
+    /** Optional a11y label for the chip list. Recommended to use either that or `aria-labelledby`. */
+    'aria-label'?: string;
+    /** Optional a11y label reference for the chip list. Recommended to use either that or `aria-label`. */
+    'aria-labelledby'?: string;
+    /** Identifier for e2e tests */
+    'data-e2e'?: string;
+    /** CSS style object */
+    style?: React.CSSProperties;
+};
+export declare function ChipList<ValueType>({ children, compareValues, value, onChange, size, sparse, compact, disabled, mode, alignItems, pattern, name, ...props }: ChipListProps<ValueType>): React.JSX.Element;
+export declare namespace ChipList {
+    var displayName: string;
+    var propTypes: {
+        size: PropTypes.Requireable<string>;
+        sparse: PropTypes.Requireable<boolean>;
+        compact: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        theme: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        mode: PropTypes.Requireable<string>;
+        alignItems: PropTypes.Requireable<string>;
+        pattern: PropTypes.Requireable<string>;
+        value: PropTypes.Validator<any>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        compareValues: PropTypes.Requireable<(...args: any[]) => any>;
+        name: PropTypes.Requireable<string>;
+        'aria-label': PropTypes.Requireable<string>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'data-e2e': PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+    };
+}

package/lib/chip-list.js

@@ -1,11 +1,15 @@
 "use client";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ChipListBase } from './parts/chip-list-base.js';
+import { useSafeId } from './parts/use-safe-id.js';
 
 const compareValuesDefault = (activeValue, value) => activeValue === value;
 
 function ChipList(_ref) {
+  var _context;
+
   let {
     children,
     compareValues = compareValuesDefault,
@@ -17,8 +21,11 @@ function ChipList(_ref) {
     disabled = false,
     mode = 'classic',
     alignItems = 'left',
+    pattern = 'auto',
+    name,
     ...props
   } = _ref;
+  const uniqueId = useSafeId();
   return /*#__PURE__*/React.createElement(ChipListBase, {
     compareValues: (activeValues, compareVal) => compareValues(activeValues[0], compareVal),
     onChange: onChange,
@@ -29,6 +36,8 @@ function ChipList(_ref) {
     disabled: disabled,
     mode: mode,
     alignItems: alignItems,
+    pattern: _includesInstanceProperty(_context = ['auto', 'radiogroup', 'navigation', 'tablist']).call(_context, pattern) ? pattern : 'auto',
+    name: name ?? `rs-chip-list-${uniqueId}`,
     ...props
   }, children);
 }
@@ -43,9 +52,13 @@ ChipList.propTypes = {
   className: PropTypes.string,
   mode: PropTypes.oneOf(['classic', 'rock']),
   alignItems: PropTypes.oneOf(['left', 'center', 'right']),
+  pattern: PropTypes.oneOf(['auto', 'radiogroup', 'navigation', 'tablist']),
   value: PropTypes.any.isRequired,
   onChange: PropTypes.func.isRequired,
   compareValues: PropTypes.func,
+  name: PropTypes.string,
+  'aria-label': PropTypes.string,
+  'aria-labelledby': PropTypes.string,
   'data-e2e': PropTypes.string,
   style: PropTypes.object
 };

package/lib/index.css

@@ -1,19 +1,19 @@
-._light_nm7yw3_8{
+._light_1f5r5o2_8{
   --rs-theme-dark:0;
 }
-._dark_nm7yw3_11{
+._dark_1f5r5o2_11{
   --rs-theme-dark:1;
 }
-._alignLeft_nm7yw3_15{
+._alignLeft_1f5r5o2_15{
   --_rs-cl-align:left;
 }
-._alignCenter_nm7yw3_18{
+._alignCenter_1f5r5o2_18{
   --_rs-cl-align:center;
 }
-._alignRight_nm7yw3_21{
+._alignRight_1f5r5o2_21{
   --_rs-cl-align:right;
 }
-._sizeXs_nm7yw3_25{
+._sizeXs_1f5r5o2_25{
   --_rs-cl-chip-base-border-radius:4px;
   --_rs-cl-chip-compact-border-radius:var(--_rs-cl-chip-base-border-radius);
   --_rs-cl-chip-vertical-padding:2px;
@@ -27,7 +27,7 @@
   --_rs-cl-compact-horizontal-gap:4px;
   --_rs-cl-sparse-horizontal-gap:12px;
 }
-._sizeXs_nm7yw3_25 [data-rs-internal='chip-list__chip']{
+._sizeXs_1f5r5o2_25 [data-rs-internal='chip-list__chip']{
     --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -62,7 +62,7 @@
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
-._sizeS_nm7yw3_28{
+._sizeS_1f5r5o2_28{
   --_rs-cl-chip-base-border-radius:16px;
   --_rs-cl-chip-compact-border-radius:4px;
   --_rs-cl-chip-vertical-padding:6px;
@@ -76,7 +76,7 @@
   --_rs-cl-compact-horizontal-gap:6px;
   --_rs-cl-sparse-horizontal-gap:12px;
 }
-._sizeS_nm7yw3_28 [data-rs-internal='chip-list__chip']{
+._sizeS_1f5r5o2_28 [data-rs-internal='chip-list__chip']{
     --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -111,7 +111,7 @@
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
-._sizeM_nm7yw3_31{
+._sizeM_1f5r5o2_31{
   --_rs-cl-chip-base-border-radius:20px;
   --_rs-cl-chip-compact-border-radius:8px;
   --_rs-cl-chip-vertical-padding:8px;
@@ -125,7 +125,7 @@
   --_rs-cl-compact-horizontal-gap:6px;
   --_rs-cl-sparse-horizontal-gap:16px;
 }
-._sizeM_nm7yw3_31 [data-rs-internal='chip-list__chip']{
+._sizeM_1f5r5o2_31 [data-rs-internal='chip-list__chip']{
     --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -164,11 +164,11 @@
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
 @media screen and (max-width: 640px){
-._sizeM_nm7yw3_31 [data-rs-internal='chip-list__chip']{
+._sizeM_1f5r5o2_31 [data-rs-internal='chip-list__chip']{
     --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
   }
   }
-._sizeL_nm7yw3_34{
+._sizeL_1f5r5o2_34{
   --_rs-cl-chip-base-border-radius:26px;
   --_rs-cl-chip-compact-border-radius:12px;
   --_rs-cl-chip-vertical-padding:12px;
@@ -183,11 +183,11 @@
   --_rs-cl-sparse-horizontal-gap:16px;
 }
 @media screen and (max-width: 640px){
-._sizeL_nm7yw3_34{
+._sizeL_1f5r5o2_34{
     --_rs-cl-vertical-gap:12px;
 }
   }
-._sizeL_nm7yw3_34 [data-rs-internal='chip-list__chip']{
+._sizeL_1f5r5o2_34 [data-rs-internal='chip-list__chip']{
     --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -226,34 +226,34 @@
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
 @media screen and (max-width: 640px){
-._sizeL_nm7yw3_34 [data-rs-internal='chip-list__chip']{
+._sizeL_1f5r5o2_34 [data-rs-internal='chip-list__chip']{
     --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
   }
   }
-._innerOffsetL_nm7yw3_38{
+._innerOffsetL_1f5r5o2_38{
   --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-sparse-horizontal-gap);
 }
 @media screen and (max-width: 640px){
-._innerOffsetL_nm7yw3_38{
+._innerOffsetL_1f5r5o2_38{
     --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-base-horizontal-gap);
 }
   }
-._innerOffsetM_nm7yw3_41{
+._innerOffsetM_1f5r5o2_41{
   --_rs-cl-horizontal-gap-from-sparse:initial;
 }
-._classic_nm7yw3_45{
+._classic_1f5r5o2_45{
   --_rs-cl-chip-active-border-color:var(--_rs-color-primary);
   --_rs-cl-chip-selected-border-color:var(--_rs-color-primary);
   --_rs-cl-chip-hover-background:var(--_rs-color-primary-t-fog);
   --_rs-cl-chip-active-background:var(--_rs-color-primary-t-fog);
 }
-._rock_nm7yw3_48{
+._rock_1f5r5o2_48{
   --_rs-cl-chip-active-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
   --_rs-cl-chip-selected-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
   --_rs-cl-chip-hover-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.1);
   --_rs-cl-chip-active-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.1);
 }
-._compact_nm7yw3_52{
+._compact_1f5r5o2_52{
   --_rs-cl-chip-border-radius-from-compact:var(
     --_rs-cl-chip-compact-border-radius
   );
@@ -262,7 +262,7 @@
   );
   --_rs-cl-horizontal-gap-from-compact:var(--_rs-cl-compact-horizontal-gap);
 }
-._main_nm7yw3_56{
+._main_1f5r5o2_56{
   --_rs-theme-dark:var(
     --_rs-internal-force-theme-dark-consult-rescui-before-using,
     var(--rs-theme-dark, 0)
@@ -272,7 +272,7 @@
   --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
 }
 @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._main_nm7yw3_56{
+._main_1f5r5o2_56{
     --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
     --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
     --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -281,7 +281,7 @@
 }
   }
 @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._main_nm7yw3_56{
+._main_1f5r5o2_56{
     --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
     --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
     --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -289,7 +289,7 @@
     --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
 }
   }
-._main_nm7yw3_56 {
+._main_1f5r5o2_56 {
   --_rs-cl-chip-border-radius:var(
     --_rs-cl-chip-border-radius-from-compact,
     var(--_rs-cl-chip-base-border-radius)
@@ -303,7 +303,7 @@
     var(--_rs-cl-horizontal-gap-from-sparse, var(--_rs-cl-base-horizontal-gap))
   );
 }
-._chipsContainer_nm7yw3_62{
+._chipsContainer_1f5r5o2_62{
   position:relative;
 
   display:flex;
@@ -312,17 +312,17 @@
 
   gap:var(--_rs-cl-vertical-gap) var(--_rs-cl-horizontal-gap);
 }
-._alignIconLeft_nm7yw3_72{
+._alignIconLeft_1f5r5o2_72{
   --_rs-cl-chip-icon-flex-direction:row;
   --_rs-cl-chip-icon-position-multiplier-left:1;
   --_rs-cl-chip-icon-position-multiplier-right:0;
 }
-._alignIconRight_nm7yw3_75{
+._alignIconRight_1f5r5o2_75{
   --_rs-cl-chip-icon-flex-direction:row-reverse;
   --_rs-cl-chip-icon-position-multiplier-left:0;
   --_rs-cl-chip-icon-position-multiplier-right:1;
 }
-._chip_nm7yw3_62{
+._chip_1f5r5o2_62{
   letter-spacing:var(
     --rs-text-base-letter-spacing,
     var(--_rs-typography-letter-spacing)
@@ -369,27 +369,30 @@
   background:transparent;
   box-shadow:none;
 
-  transition:color 100ms, background-color 100ms;
+  transition:color 100ms var(--rs-transition-function, ease), background-color 100ms var(--rs-transition-function, ease);
   -webkit-font-smoothing:inherit;
   -moz-osx-font-smoothing:inherit;
   -webkit-appearance:none;
 }
-._chip_nm7yw3_62::-moz-focus-inner{
+._chip_1f5r5o2_62::-moz-focus-inner{
     padding:0;
 
     border:none;
   }
-._chip_nm7yw3_62:hover,
-  ._chip_nm7yw3_62:focus,
-  ._chip_nm7yw3_62:active{
+._chip_1f5r5o2_62:hover,
+  ._chip_1f5r5o2_62:focus,
+  ._chip_1f5r5o2_62:active{
     outline:none;
 
     text-decoration:none;
   }
-._chip_nm7yw3_62:focus[data-focus-method='key']{
+._chip_1f5r5o2_62:focus[data-focus-method='key']{
     box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
   }
-._chip_nm7yw3_62:focus{
+._chip_1f5r5o2_62:has(:focus[data-focus-method='key']){
+    box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
+  }
+._chip_1f5r5o2_62:focus{
     --_rs-cl-chip-border-color:rgba(
       calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
       calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1)
@@ -398,7 +401,7 @@
     color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
   }
 @media (hover: hover){
-    ._chip_nm7yw3_62:hover{
+    ._chip_1f5r5o2_62:hover{
       --_rs-cl-chip-border-color:rgba(
         calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
         calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1)
@@ -409,20 +412,20 @@
       background:var(--_rs-cl-chip-hover-background);
     }
   }
-._chip_nm7yw3_62:active{
+._chip_1f5r5o2_62:active{
     --_rs-cl-chip-border-color:var(--_rs-cl-chip-active-border-color);
 
     color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
 
     background:var(--_rs-cl-chip-active-background);
   }
-._chip_nm7yw3_62._selected_nm7yw3_172{
+._chip_1f5r5o2_62._selected_1f5r5o2_176{
     --_rs-cl-chip-border-color:var(--_rs-cl-chip-selected-border-color);
     --_rs-cl-chip-border-width:2px;
 
     color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
   }
-._disabled_nm7yw3_179 ._chip_nm7yw3_62{
+._disabled_1f5r5o2_183 ._chip_1f5r5o2_62{
     --_rs-cl-chip-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
 
     pointer-events:none;
@@ -431,10 +434,10 @@
 
     background:transparent;
   }
-._disabled_nm7yw3_179 ._chip_nm7yw3_62._selected_nm7yw3_172{
+._disabled_1f5r5o2_183 ._chip_1f5r5o2_62._selected_1f5r5o2_176{
       --_rs-cl-chip-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.4);
     }
-._chip_nm7yw3_62::before{
+._chip_1f5r5o2_62::before{
     position:absolute;
     top:0;
     right:0;
@@ -449,9 +452,9 @@
     content:'';
     pointer-events:none;
 
-    transition:border-color 100ms;
+    transition:border-color 100ms var(--rs-transition-function, ease);
   }
-._chip_nm7yw3_62 ._icon_nm7yw3_212{
+._chip_1f5r5o2_62 ._icon_1f5r5o2_216{
     flex:0 0 auto;
 
     width:auto;
@@ -460,7 +463,23 @@
     margin:0;
     fill:currentColor;
   }
-._withoutText_nm7yw3_223{
+._hiddenInput_1f5r5o2_227{
+  position:absolute;
+
+  overflow:hidden;
+  clip:rect(0 0 0 0);
+
+  width:1px;
+  height:1px;
+  margin:-1px;
+  padding:0;
+
+  border:none;
+
+  white-space:nowrap;
+  clip-path:inset(50%);
+}
+._withoutText_1f5r5o2_244{
   --_rs-cl-chip-horizontal-real-padding:var(--_rs-cl-chip-icon-only-padding);
   --_rs-cl-chip-vertical-real-padding:var(--_rs-cl-chip-icon-only-padding);
 }

package/lib/index.d.ts

@@ -1,6 +1,6 @@
-export { ChipList } from './chip-list';
-export type { ChipListProps } from './chip-list';
-export { ChipListMulti } from './chip-list-multi';
-export type { ChipListMultiProps } from './chip-list-multi';
-export { default as Chip } from './parts/chip';
-export type { ChipProps } from './parts/chip';
+export { ChipList } from './chip-list';
+export type { ChipListProps } from './chip-list';
+export { ChipListMulti } from './chip-list-multi';
+export type { ChipListMultiProps } from './chip-list-multi';
+export { default as Chip } from './parts/chip';
+export type { ChipProps } from './parts/chip';