@iress-oss/ids-components 6.0.0-beta.8 → 6.0.0

package/.ai/components/avatar.md

@@ -100,6 +100,19 @@ Set `compact={true}` for a smaller avatar with a white stroke border, designed f
 
 [View "Compact" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-avatar--compact)
 
+### Tooltip
+
+Pass a `tooltip` object to display a rich tooltip on hover. The tooltip shows the user's name prominently
+and optional metadata (`badge`, `type`) in muted text separated by a dot.
+
+```tsx
+<IressAvatar>
+  JD
+</IressAvatar>
+```
+
+[View "WithTooltip" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-avatar--with-tooltip)
+
 ## Avatar Group
 
 Use `IressAvatarGroup` to stack multiple avatars with proper overlap and z-ordering. The first avatar appears in the foreground.

package/.ai/components/tab-set.md

@@ -53,7 +53,12 @@ You can use state to control the active tab by setting the `selected` property t
 
 ### Layout
 
-`IressTabSet` controls the layout of the tab buttons. These will always appear at the top of the tab container, and can be aligned to the left (default), centrally or to the right via the `layout` prop.
+`IressTabSet` controls the layout of the tab buttons. These will always appear at the top of the tab container, and can be aligned to the left (default), centrally, to the right, or stretched to fill the full width via the `layout` prop.
+
+- `top-left` (default): tabs align to the start.
+- `top-center`: tabs align centrally.
+- `top-right`: tabs align to the end.
+- `top-stretch`: tabs stretch equally to fill the full available width.
 
 ```tsx
 <IressStack gap="md">
@@ -69,6 +74,10 @@ You can use state to control the active tab by setting the `selected` property t
 <IressText element="h2">top-right</IressText>
 <IressTabSet layout="top-right" />
 </IressPanel>
+<IressPanel>
+<IressText element="h2">top-stretch</IressText>
+<IressTabSet layout="top-stretch" />
+</IressPanel>
 </IressStack>
 ```
 

package/.ai/components/tooltip.md

@@ -164,6 +164,16 @@ The `delay` prop requires a number that is the number of milliseconds that pass
 
 [View "Delay" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-tooltip--delay)
 
+### Rich variant
+
+Use the `variant="rich"` prop for tooltips that display structured content. The first line is rendered as a prominent name and subsequent lines are rendered in muted, smaller text — ideal for explaining avatar badges and indicators.
+
+```tsx
+<IressTooltip variant="rich" />
+```
+
+[View "Rich" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-tooltip--rich)
+
 ### The title attribute
 
 The component will not make any provision for existing title HTML attributes. If one exists, it will be activated along with the tooltip, potentially overlaying it making it difficult to ascertain the information being imparted. The title could also contain different content to the tooltip increasing the chance of confusing the end user.