@rescui/chip-list 0.14.1 → 0.14.2

package/README.md

@@ -1,4 +1,5 @@
 # Tab-list and Chip-list
 
-* [Usage examples of TabList](./docs/demo.md)
-* [Usage examples of ChipList](./docs/chip-list/demo.md)
+## LLM
+
+To get the docs for the LLM, check out [this index](./llm/index.md).

package/lib/index.css

@@ -1,19 +1,19 @@
-._light_clap9i_8{
+._light_t5wzop_8{
   --rs-theme-dark:0;
 }
-._dark_clap9i_11{
+._dark_t5wzop_11{
   --rs-theme-dark:1;
 }
-._alignLeft_clap9i_15{
+._alignLeft_t5wzop_15{
   --_rs-cl-align:left;
 }
-._alignCenter_clap9i_18{
+._alignCenter_t5wzop_18{
   --_rs-cl-align:center;
 }
-._alignRight_clap9i_21{
+._alignRight_t5wzop_21{
   --_rs-cl-align:right;
 }
-._sizeXs_clap9i_25{
+._sizeXs_t5wzop_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_clap9i_25 [data-rs-internal='chip-list__chip']{
+._sizeXs_t5wzop_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_clap9i_28{
+._sizeS_t5wzop_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_clap9i_28 [data-rs-internal='chip-list__chip']{
+._sizeS_t5wzop_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_clap9i_31{
+._sizeM_t5wzop_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_clap9i_31 [data-rs-internal='chip-list__chip']{
+._sizeM_t5wzop_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_clap9i_31 [data-rs-internal='chip-list__chip']{
+._sizeM_t5wzop_31 [data-rs-internal='chip-list__chip']{
     --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
   }
   }
-._sizeL_clap9i_34{
+._sizeL_t5wzop_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_clap9i_34{
+._sizeL_t5wzop_34{
     --_rs-cl-vertical-gap:12px;
 }
   }
-._sizeL_clap9i_34 [data-rs-internal='chip-list__chip']{
+._sizeL_t5wzop_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_clap9i_34 [data-rs-internal='chip-list__chip']{
+._sizeL_t5wzop_34 [data-rs-internal='chip-list__chip']{
     --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
   }
   }
-._innerOffsetL_clap9i_38{
+._innerOffsetL_t5wzop_38{
   --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-sparse-horizontal-gap);
 }
 @media screen and (max-width: 640px){
-._innerOffsetL_clap9i_38{
+._innerOffsetL_t5wzop_38{
     --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-base-horizontal-gap);
 }
   }
-._innerOffsetM_clap9i_41{
+._innerOffsetM_t5wzop_41{
   --_rs-cl-horizontal-gap-from-sparse:initial;
 }
-._classic_clap9i_45{
+._classic_t5wzop_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_clap9i_48{
+._rock_t5wzop_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_clap9i_52{
+._compact_t5wzop_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_clap9i_56{
+._main_t5wzop_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_clap9i_56{
+._main_t5wzop_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_clap9i_56{
+._main_t5wzop_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_clap9i_56 {
+._main_t5wzop_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_clap9i_62{
+._chipsContainer_t5wzop_62{
   position:relative;
 
   display:flex;
@@ -312,17 +312,17 @@
 
   gap:var(--_rs-cl-vertical-gap) var(--_rs-cl-horizontal-gap);
 }
-._alignIconLeft_clap9i_72{
+._alignIconLeft_t5wzop_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_clap9i_75{
+._alignIconRight_t5wzop_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_clap9i_62{
+._chip_t5wzop_62{
   letter-spacing:var(
     --rs-text-base-letter-spacing,
     var(--_rs-typography-letter-spacing)
@@ -374,25 +374,25 @@
   -moz-osx-font-smoothing:inherit;
   -webkit-appearance:none;
 }
-._chip_clap9i_62::-moz-focus-inner{
+._chip_t5wzop_62::-moz-focus-inner{
     padding:0;
 
     border:none;
   }
-._chip_clap9i_62:hover,
-  ._chip_clap9i_62:focus,
-  ._chip_clap9i_62:active{
+._chip_t5wzop_62:hover,
+  ._chip_t5wzop_62:focus,
+  ._chip_t5wzop_62:active{
     outline:none;
 
     text-decoration:none;
   }
-._chip_clap9i_62:focus[data-focus-method='key']{
+._chip_t5wzop_62:focus[data-focus-method='key']{
     box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
   }
-._chip_clap9i_62:has(:focus[data-focus-method='key']){
+._chip_t5wzop_62:has(:focus[data-focus-method='key']){
     box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
   }
-._chip_clap9i_62:focus{
+._chip_t5wzop_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)
@@ -401,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_clap9i_62:hover{
+    ._chip_t5wzop_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)
@@ -412,20 +412,20 @@
       background:var(--_rs-cl-chip-hover-background);
     }
   }
-._chip_clap9i_62:active{
+._chip_t5wzop_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_clap9i_62._selected_clap9i_176{
+._chip_t5wzop_62._selected_t5wzop_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_clap9i_183 ._chip_clap9i_62{
+._disabled_t5wzop_183 ._chip_t5wzop_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;
@@ -434,10 +434,10 @@
 
     background:transparent;
   }
-._disabled_clap9i_183 ._chip_clap9i_62._selected_clap9i_176{
+._disabled_t5wzop_183 ._chip_t5wzop_62._selected_t5wzop_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_clap9i_62::before{
+._chip_t5wzop_62::before{
     position:absolute;
     top:0;
     right:0;
@@ -454,7 +454,7 @@
 
     transition:border-color 100ms var(--rs-transition-function, ease);
   }
-._chip_clap9i_62 ._icon_clap9i_216{
+._chip_t5wzop_62 ._icon_t5wzop_216{
     flex:0 0 auto;
 
     width:auto;
@@ -463,7 +463,7 @@
     margin:0;
     fill:currentColor;
   }
-._hiddenInput_clap9i_227{
+._hiddenInput_t5wzop_227{
   position:absolute;
 
   overflow:hidden;
@@ -479,7 +479,7 @@
   white-space:nowrap;
   clip-path:inset(50%);
 }
-._withoutText_clap9i_244{
+._withoutText_t5wzop_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/parts/chip-list.p.module.css.js

@@ -1,27 +1,27 @@
 var styles = {
-  "light": "_light_clap9i_8",
-  "dark": "_dark_clap9i_11",
-  "alignLeft": "_alignLeft_clap9i_15",
-  "alignCenter": "_alignCenter_clap9i_18",
-  "alignRight": "_alignRight_clap9i_21",
-  "sizeXs": "_sizeXs_clap9i_25",
-  "sizeS": "_sizeS_clap9i_28",
-  "sizeM": "_sizeM_clap9i_31",
-  "sizeL": "_sizeL_clap9i_34",
-  "innerOffsetL": "_innerOffsetL_clap9i_38",
-  "innerOffsetM": "_innerOffsetM_clap9i_41",
-  "classic": "_classic_clap9i_45",
-  "rock": "_rock_clap9i_48",
-  "compact": "_compact_clap9i_52",
-  "main": "_main_clap9i_56",
-  "chipsContainer": "_chipsContainer_clap9i_62",
-  "alignIconLeft": "_alignIconLeft_clap9i_72",
-  "alignIconRight": "_alignIconRight_clap9i_75",
-  "chip": "_chip_clap9i_62",
-  "selected": "_selected_clap9i_176",
-  "disabled": "_disabled_clap9i_183",
-  "icon": "_icon_clap9i_216",
-  "hiddenInput": "_hiddenInput_clap9i_227",
-  "withoutText": "_withoutText_clap9i_244"
+  "light": "_light_t5wzop_8",
+  "dark": "_dark_t5wzop_11",
+  "alignLeft": "_alignLeft_t5wzop_15",
+  "alignCenter": "_alignCenter_t5wzop_18",
+  "alignRight": "_alignRight_t5wzop_21",
+  "sizeXs": "_sizeXs_t5wzop_25",
+  "sizeS": "_sizeS_t5wzop_28",
+  "sizeM": "_sizeM_t5wzop_31",
+  "sizeL": "_sizeL_t5wzop_34",
+  "innerOffsetL": "_innerOffsetL_t5wzop_38",
+  "innerOffsetM": "_innerOffsetM_t5wzop_41",
+  "classic": "_classic_t5wzop_45",
+  "rock": "_rock_t5wzop_48",
+  "compact": "_compact_t5wzop_52",
+  "main": "_main_t5wzop_56",
+  "chipsContainer": "_chipsContainer_t5wzop_62",
+  "alignIconLeft": "_alignIconLeft_t5wzop_72",
+  "alignIconRight": "_alignIconRight_t5wzop_75",
+  "chip": "_chip_t5wzop_62",
+  "selected": "_selected_t5wzop_176",
+  "disabled": "_disabled_t5wzop_183",
+  "icon": "_icon_t5wzop_216",
+  "hiddenInput": "_hiddenInput_t5wzop_227",
+  "withoutText": "_withoutText_t5wzop_244"
 };
 export { styles as default };

package/llm/components/chip-list.md

@@ -0,0 +1,615 @@
+# ChipList
+
+Created with adaptivity in mind, ChipList is the component for radiogroup-like controls and navigational panels. It wraps items onto a new line if the screen is too narrow to fit all of the content.
+
+## Usage
+
+### Features showcase
+
+`ChipList` component can only be a controlled component. It requires `value` and `onChange` props to function properly.
+
+By default, `ChipList` uses `pattern="auto"`. It renders native `input[type="radio"]` elements with `role="radiogroup"` when chips do not have `href`, switches to `role="navigation"` when at least one chip has `href`, and switches to `role="tablist"` when chips use `aria-controls`.
+
+`ChipList` interactive overview:
+
+#### Content Switcher made of ChipList with default values
+
+`ChipList` enumerates `Chip` children components, so by default it has different keys for `onChange` prop function. When chips switch panels, add `aria-controls` to every chip so `pattern="auto"` resolves to `role="tablist"`.
+
+```tsx
+import { useState } from 'react';
+import { ChipList, Chip } from '@rescui/chip-list';
+import { Switcher } from '@rescui/switcher';
+
+const ContentSwitcher = ({ index, children }) => {
+  return children[index];
+};
+const Demo = () => {
+  const [activeIndex, setActiveIndex] = useState(1);
+  return (
+    <div>
+      <Switcher
+        size="xs"
+        value={activeIndex}
+        options={[
+          { label: 'First', value: 0 },
+          { label: 'Second', value: 1 },
+          { label: 'Third', value: 2 }
+        ]}
+        onChange={v => setActiveIndex(v)}
+        className="rs-docs-offset-top-12"
+      />
+      <ChipList
+        value={activeIndex}
+        onChange={v => setActiveIndex(v)}
+        className="rs-docs-offset-top-12"
+      >
+        <Chip id="first-default-tab" aria-controls="first-default-panel">
+          First
+        </Chip>
+        <Chip id="second-default-tab" aria-controls="second-default-panel">
+          Second
+        </Chip>
+        <Chip id="third-default-tab" aria-controls="third-default-panel">
+          Third
+        </Chip>
+      </ChipList>
+      <div className="rs-docs-offset-top-12">
+        <ContentSwitcher index={activeIndex}>
+          <div
+            id="first-default-panel"
+            role="tabpanel"
+            aria-labelledby="first-default-tab"
+          >
+            First
+          </div>
+          <div
+            id="second-default-panel"
+            role="tabpanel"
+            aria-labelledby="second-default-tab"
+          >
+            Second
+          </div>
+          <div
+            id="third-default-panel"
+            role="tabpanel"
+            aria-labelledby="third-default-tab"
+          >
+            Third
+          </div>
+        </ContentSwitcher>
+      </div>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+#### Switcher with custom values on Chips and component for tab content
+
+`ChipList` component works as radiogroup-like control with custom `value` on `Chip` components.
+
+```tsx
+import { useState } from 'react';
+import { ChipList, Chip } from '@rescui/chip-list';
+import { Switcher } from '@rescui/switcher';
+
+const Content = ({ activeChip }) => {
+  switch (activeChip) {
+    case 'first':
+      return <div>First</div>;
+    case 'second':
+      return <div>Second</div>;
+    case 'third':
+      return <div>Third</div>;
+  }
+};
+const Demo = () => {
+  const [activeChip, setActiveChip] = useState('second');
+  return (
+    <div>
+      <div>
+        <Switcher
+          size="xs"
+          value={activeChip}
+          options={[
+            { label: 'First', value: 'first' },
+            { label: 'Second', value: 'second' },
+            { label: 'Third', value: 'third' }
+          ]}
+          onChange={tab => setActiveChip(tab)}
+          className="rs-docs-offset-top-12"
+        />
+      </div>
+      <ChipList
+        value={activeChip}
+        onChange={v => setActiveChip(v)}
+        className="rs-docs-offset-top-12"
+      >
+        <Chip value="first">First</Chip>
+        <Chip value="second">Second</Chip>
+        <Chip value="third">Third</Chip>
+      </ChipList>
+      <div className="rs-docs-offset-top-12">
+        <Content activeChip={activeChip} />
+      </div>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+#### SEO tip: render the content from every tab and hide it with display: none
+
+Content could be rendered to DOM and hidden with CSS. This is a usefull trick for SEO optimization. This is also the most complete tablist pattern because every controlled panel stays in the DOM.
+
+```tsx
+import { useState, cloneElement } from 'react';
+import { ChipList, Chip } from '@rescui/chip-list';
+
+const CSSContentSwitcher = ({ index, children }) => {
+  return children.map((ch, i) => {
+    const chStyles = ch.props.style || {};
+    const addStyles = i === index ? {} : { display: 'none' };
+    return cloneElement(ch, { key: i, style: { ...chStyles, ...addStyles } });
+  });
+};
+
+const Demo = () => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return (
+    <div className="rs-docs-offset-top-24">
+      <ChipList value={activeIndex} onChange={v => setActiveIndex(v)}>
+        <Chip id="first-seo-tab" aria-controls="first-seo-panel">
+          First
+        </Chip>
+        <Chip id="second-seo-tab" aria-controls="second-seo-panel">
+          Second
+        </Chip>
+        <Chip id="third-seo-tab" aria-controls="third-seo-panel">
+          Third
+        </Chip>
+      </ChipList>
+      <CSSContentSwitcher index={activeIndex}>
+        <div
+          id="first-seo-panel"
+          role="tabpanel"
+          aria-labelledby="first-seo-tab"
+        >
+          First
+        </div>
+        <div
+          id="second-seo-panel"
+          role="tabpanel"
+          aria-labelledby="second-seo-tab"
+        >
+          Second
+        </div>
+        <div
+          id="third-seo-panel"
+          role="tabpanel"
+          aria-labelledby="third-seo-tab"
+        >
+          Third
+        </div>
+      </CSSContentSwitcher>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+#### Controls for the e2e tests
+
+When testing the page, you can get access to the arrows with `data-e2e` attributes. You should set the scope with the `data-e2e` attribute from the outside.
+
+```tsx
+import { useState, cloneElement } from 'react';
+import { ChipList, Chip } from '@rescui/chip-list';
+
+const CSSContentSwitcher = ({ index, children }) => {
+  return children.map((ch, i) => {
+    const chStyles = ch.props.style || {};
+    const addStyles = i === index ? {} : { display: 'none' };
+    return cloneElement(ch, { key: i, style: { ...chStyles, ...addStyles } });
+  });
+};
+
+const Demo = () => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return (
+    <div className="rs-docs-offset-top-24">
+      <ChipList
+        value={activeIndex}
+        onChange={v => setActiveIndex(v)}
+        data-e2e={'example-chips'}
+      >
+        <Chip id="first-e2e-tab" aria-controls="first-e2e-panel">
+          First
+        </Chip>
+        <Chip id="second-e2e-tab" aria-controls="second-e2e-panel">
+          Second
+        </Chip>
+        <Chip id="third-e2e-tab" aria-controls="third-e2e-panel">
+          Third
+        </Chip>
+      </ChipList>
+      <CSSContentSwitcher index={activeIndex}>
+        <div
+          id="first-e2e-panel"
+          role="tabpanel"
+          aria-labelledby="first-e2e-tab"
+        >
+          First
+        </div>
+        <div
+          id="second-e2e-panel"
+          role="tabpanel"
+          aria-labelledby="second-e2e-tab"
+        >
+          Second
+        </div>
+        <div
+          id="third-e2e-panel"
+          role="tabpanel"
+          aria-labelledby="third-e2e-tab"
+        >
+          Third
+        </div>
+      </CSSContentSwitcher>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+#### Usage with Icons
+
+```tsx
+import { useState } from 'react';
+import { ChipList, Chip } from '@rescui/chip-list';
+import {
+  TeamOutlineIcon,
+  WinOutlineIcon,
+  ThumbsUpOutlineIcon
+} from '@rescui/icons';
+
+const Demo = () => {
+  const [activeChip, setActiveChip] = useState('second');
+  return (
+    <div>
+      <ChipList
+        value={activeChip}
+        onChange={v => setActiveChip(v)}
+        className="rs-docs-offset-top-12"
+      >
+        <Chip icon={<TeamOutlineIcon />} value="first">
+          First
+        </Chip>
+        <Chip icon={<WinOutlineIcon />} value="second">
+          Second
+        </Chip>
+        <Chip icon={<ThumbsUpOutlineIcon />} value="third">
+          Third
+        </Chip>
+      </ChipList>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+#### Chips as links
+
+With the default `pattern="auto"`, chips with `href` switch the whole list to navigation behavior. You can also set `pattern="navigation"` explicitly. In `pattern="radiogroup"`, `href` is ignored and a development warning is printed.
+
+```tsx
+import { useState } from 'react';
+import { ChipList, Chip } from '@rescui/chip-list';
+
+const Demo = () => {
+  const [activeChip, setActiveChip] = useState('second');
+  return (
+    <div>
+      <div>
+        <h4 id="first">First</h4>
+        <h4 id="second">Second</h4>
+        <h4 id="third">Third</h4>
+      </div>
+      <ChipList
+        value={activeChip}
+        onChange={v => setActiveChip(v)}
+        className="rs-docs-offset-top-24"
+      >
+        <Chip href="#first" value="first">
+          First
+        </Chip>
+        <Chip href="#second" value="second">
+          Second
+        </Chip>
+        <Chip href="#third" value="third">
+          Third
+        </Chip>
+      </ChipList>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+#### Chips as navigation buttons
+
+Use `pattern="navigation"` when chips without `href` should control page navigation through JavaScript.
+
+```tsx
+import { useState } from 'react';
+import { ChipList, Chip } from '@rescui/chip-list';
+
+const Demo = () => {
+  const [activeChip, setActiveChip] = useState('second');
+  const navigateToSection = value => {
+    setActiveChip(value);
+    window.location.hash = `${value}-buttons`;
+  };
+
+  return (
+    <div>
+      <div>
+        <h4 id="first-buttons">First</h4>
+        <h4 id="second-buttons">Second</h4>
+        <h4 id="third-buttons">Third</h4>
+      </div>
+      <ChipList
+        value={activeChip}
+        onChange={navigateToSection}
+        pattern="navigation"
+        className="rs-docs-offset-top-24"
+      >
+        <Chip value="first">First</Chip>
+        <Chip value="second">Second</Chip>
+        <Chip value="third">Third</Chip>
+      </ChipList>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+#### Compact mode
+
+```tsx
+import { useState } from 'react';
+import { ChipList, Chip } from '@rescui/chip-list';
+
+const Demo = () => {
+  const [activeChip, setActiveChip] = useState('second');
+  return (
+    <div>
+      <ChipList
+        value={activeChip}
+        onChange={v => setActiveChip(v)}
+        compact
+        className="rs-docs-offset-top-12"
+      >
+        <Chip value="first">First</Chip>
+        <Chip value="second">Second</Chip>
+        <Chip value="third">Third</Chip>
+      </ChipList>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+## ChipListMulti
+
+### Features showcase
+
+`ChipListMulti` component can only be a controlled component. It requires `value` and `onChange` props to function properly.
+
+`ChipListMulti` interactive overview:
+
+#### Usage with Icons
+
+```tsx
+import { useState } from 'react';
+import { ChipListMulti, Chip } from '@rescui/chip-list';
+import {
+  TeamOutlineIcon,
+  WinOutlineIcon,
+  ThumbsUpOutlineIcon
+} from '@rescui/icons';
+
+const Demo = () => {
+  const [activeChips, setActiveChips] = useState(['second', 'third']);
+  return (
+    <div>
+      <ChipListMulti
+        value={activeChips}
+        onChange={setActiveChips}
+        className="rs-docs-offset-top-12"
+      >
+        <Chip icon={<TeamOutlineIcon />} value="first">
+          First
+        </Chip>
+        <Chip icon={<WinOutlineIcon />} value="second">
+          Second
+        </Chip>
+        <Chip icon={<ThumbsUpOutlineIcon />} value="third">
+          Third
+        </Chip>
+      </ChipListMulti>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+## CSS Mixins API
+
+#### `Chip` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-chip-icon-left` | prop: `iconPosition`<br><br>value: `"left"` |
+| `rs-chip-icon-right` | prop: `iconPosition`<br><br>value: `"right"` |
+
+#### `ChipList` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-chip-list-align-left` | prop: `alignItems`<br><br>value: `"left"` |
+| `rs-chip-list-align-center` | prop: `alignItems`<br><br>value: `"center"` |
+| `rs-chip-list-align-right` | prop: `alignItems`<br><br>value: `"right"` |
+| `rs-chip-list-sparse-true` | prop: `sparse`<br><br>value: `true` |
+| `rs-chip-list-sparse-false` | prop: `sparse`<br><br>value: `false` |
+| `rs-chip-list-size-xs` | prop: `size`<br><br>value: `"xs"` |
+| `rs-chip-list-size-s` | prop: `size`<br><br>value: `"s"` |
+| `rs-chip-list-size-m` | prop: `size`<br><br>value: `"m"` |
+| `rs-chip-list-size-l` | prop: `size`<br><br>value: `"l"` |
+| `rs-chip-list-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
+| `rs-chip-list-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
+
+#### `ChipListMulti` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-chip-list-multi-align-left` | prop: `alignItems`<br><br>value: `"left"` |
+| `rs-chip-list-multi-align-center` | prop: `alignItems`<br><br>value: `"center"` |
+| `rs-chip-list-multi-align-right` | prop: `alignItems`<br><br>value: `"right"` |
+| `rs-chip-list-multi-sparse-true` | prop: `sparse`<br><br>value: `true` |
+| `rs-chip-list-multi-sparse-false` | prop: `sparse`<br><br>value: `false` |
+| `rs-chip-list-multi-size-xs` | prop: `size`<br><br>value: `"xs"` |
+| `rs-chip-list-multi-size-s` | prop: `size`<br><br>value: `"s"` |
+| `rs-chip-list-multi-size-m` | prop: `size`<br><br>value: `"m"` |
+| `rs-chip-list-multi-size-l` | prop: `size`<br><br>value: `"l"` |
+| `rs-chip-list-multi-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
+| `rs-chip-list-multi-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
+
+#### Demo
+
+Instead of separate classes, it may be a single class with `@media` queries inside:
+
+```tsx
+import { ChipList, ChipListMulti, Chip } from '@rescui/chip-list';
+import { useState } from 'react';
+import cn from 'classnames';
+import { TeamOutlineIcon, WinOutlineIcon, ThumbsUpOutlineIcon } from '@rescui/icons';
+
+const MyChipLists = ({ singleClassName, multiClassName }) => {
+  const [activeIndex, setActiveIndex] = useState(1);
+  const [activeChips, setActiveChips] = useState(['second', 'third']);
+  return (
+    <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
+      <ChipList
+        value={activeIndex}
+        onChange={v => setActiveIndex(v)}
+        className={singleClassName}
+      >
+        <Chip className="my-chip" icon={<TeamOutlineIcon />}>
+          First
+        </Chip>
+        <Chip className="my-chip" icon={<WinOutlineIcon />}>
+          Second
+        </Chip>
+        <Chip className="my-chip" icon={<ThumbsUpOutlineIcon />}>
+          Third
+        </Chip>
+      </ChipList>
+      <ChipListMulti
+        value={activeChips}
+        onChange={v => setActiveChips(v)}
+        className={cn(multiClassName, 'rs-docs-offset-top-12')}
+      >
+        <Chip className="my-chip" icon={<TeamOutlineIcon />} value="first">
+          First multi
+        </Chip>
+        <Chip className="my-chip" icon={<WinOutlineIcon />} value="second">
+          Second multi
+        </Chip>
+        <Chip className="my-chip" icon={<ThumbsUpOutlineIcon />} value="third">
+          Third multi
+        </Chip>
+      </ChipListMulti>
+    </div>
+  );
+};
+
+render(
+  <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+    <div>
+      <p>Default:</p>
+      <MyChipLists />
+    </div>
+    <div>
+      <p>Var1:</p>
+      <MyChipLists
+        singleClassName={`my-chip-list-var-1`}
+        multiClassName={`my-chip-list-multi-var-1`}
+      />
+    </div>
+    <div>
+      <p>Var1 & Var2 combined:</p>
+      <MyChipLists
+        singleClassName={`my-chip-list-var-1 my-chip-list-var-2`}
+        multiClassName={`my-chip-list-multi-var-1 my-chip-list-multi-var-2`}
+      />
+    </div>
+  </div>
+);
+```
+
+```postcss
+@import '@rescui/chip-list/lib/public-api.p.css';
+
+.my-chip-list-var-1 {
+  @mixin rs-chip-list-size-l;
+  @mixin rs-chip-list-mode-rock;
+  @mixin rs-chip-list-align-center;
+  @mixin rs-chip-list-sparse-true;
+
+  .my-chip {
+    @mixin rs-chip-icon-right;
+  }
+}
+.my-chip-list-var-2 {
+  @mixin rs-chip-list-size-s;
+  @mixin rs-chip-list-mode-classic;
+  @mixin rs-chip-list-align-right;
+  @mixin rs-chip-list-sparse-false;
+
+  .my-chip {
+    @mixin rs-chip-icon-left;
+  }
+}
+
+.my-chip-list-multi-var-1 {
+  @mixin rs-chip-list-multi-size-l;
+  @mixin rs-chip-list-multi-mode-rock;
+  @mixin rs-chip-list-multi-align-center;
+  @mixin rs-chip-list-multi-sparse-true;
+
+  .my-chip {
+    @mixin rs-chip-icon-right;
+  }
+}
+.my-chip-list-multi-var-2 {
+  @mixin rs-chip-list-multi-size-s;
+  @mixin rs-chip-list-multi-mode-classic;
+  @mixin rs-chip-list-multi-align-right;
+  @mixin rs-chip-list-multi-sparse-false;
+
+  .my-chip {
+    @mixin rs-chip-icon-left;
+  }
+}
+```

package/llm/index.md

@@ -0,0 +1,2 @@
+- Components and Hooks
+  - [ChipList](./components/chip-list.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/chip-list",
-  "version": "0.14.1",
+  "version": "0.14.2",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -9,6 +9,7 @@
   "src:main": "src/index.ts",
   "files": [
     "lib",
+    "llm",
     "LICENSE.txt"
   ],
   "publishConfig": {
@@ -24,9 +25,9 @@
     "react": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.3.1",
+    "@rescui/colors": "^0.3.2",
     "@rescui/scripts": "^0.5.2",
-    "@rescui/typography": "^0.27.1",
+    "@rescui/typography": "^0.27.2",
     "@rescui/visual-regression": "^0.1.4"
   },
   "scripts": {
@@ -34,5 +35,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "a04f6790abce8e72834eedce3512ee83513c5e78"
+  "gitHead": "d60e4f3491c7cdb9ef684d08940869914492a61b"
 }