@kenlo/kdls-design-system 2.9.2 → 2.10.1

package/dist/components/Badge/Badge.d.ts

@@ -21,7 +21,7 @@ export interface BadgeProps {
     iconRightLoading?: boolean;
     /** Disables iconRight — blocks the click and applies the disabled icon color */
     iconRightDisabled?: boolean;
-    /** Size: sm (12px) | md (14px) | lg (16px) */
+    /** Size: sm (12px label, 24px box) | md (16px label, 28px box) | lg (16px label, 32px box) */
     size?: BadgeSize;
     /** Width: 'hug' = content | 'fill' = 100% */
     width?: 'hug' | 'fill';

package/dist/components/IconButton/IconButton.d.ts

@@ -1,15 +1,18 @@
 import React from 'react';
 import './IconButton.css';
 import { IconElement } from '../Icon/Icon';
-export type IconButtonSize = 'sm' | 'md' | 'lg';
-export interface IconButtonProps {
+export type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+export type IconButtonVariant = 'neutral' | 'primary' | 'inverse';
+export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled' | 'aria-label' | 'className' | 'type'> {
     /** Icon to display — e.g. <DeleteRegular /> */
     icon: IconElement;
     /** Callback fired when clicking the button. Not called when disabled or isLoading are active */
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    /** 'primary' = theme color (default) · 'neutral' = gray. Use 'neutral' for chevrons and secondary actions */
-    variant?: 'neutral' | 'primary';
-    /** Click-area size — 'sm' 32px (default) · 'md' 40px · 'lg' 48px. The icon itself is always 24px */
+    /** 'primary' = theme color (default) · 'neutral' = gray, for chevrons and secondary actions ·
+     *  'inverse' = white icon with light overlays, for a button over a photo or a dark surface */
+    variant?: IconButtonVariant;
+    /** Layout size — 'xs' 24px (the icon alone sits in the line; hover, press and the hit area still
+     *  reach 32px around it) · 'sm' 32px (default) · 'md' 40px · 'lg' 48px. The icon itself is always 24px */
     size?: IconButtonSize;
     /** Shows a spinner in place of the icon and blocks clicks while an async action is in progress */
     isLoading?: boolean;
@@ -17,6 +20,9 @@ export interface IconButtonProps {
     disabled?: boolean;
     /** Accessible label — required: there's no way to derive an automatic label from an arbitrary icon */
     'aria-label': string;
+    /** Whether what this button opens is open — for a menu, drawer or accordion trigger. The other
+     *  button attributes (aria-*, onKeyDown, title…) also reach the root element */
+    'aria-expanded'?: boolean;
     /** Additional CSS classes */
     className?: string;
 }

package/dist/components/IconButton/index.d.ts

@@ -1,2 +1,2 @@
 export { IconButton } from './IconButton';
-export type { IconButtonProps, IconButtonSize } from './IconButton';
+export type { IconButtonProps, IconButtonSize, IconButtonVariant } from './IconButton';

package/dist/components/Menu/Menu.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TooltipPosition } from '../Tooltip';
-import { IconButtonSize } from '../IconButton/IconButton';
+import { IconButtonSize, IconButtonVariant } from '../IconButton/IconButton';
 import { IconElement } from '../Icon/Icon';
 import './Menu.css';
 import '../../foundations/Scrollbar/Scrollbar.css';
@@ -66,7 +66,7 @@ interface MenuVariantBranch extends MenuCommonProps {
     /** variant="iconButton" — the icon to display */
     buttonIcon?: IconElement;
     /** variant="iconButton" — color variant (default 'primary') */
-    iconVariant?: 'neutral' | 'primary';
+    iconVariant?: IconButtonVariant;
     /** variant="iconButton" — button size (default 'sm') */
     iconSize?: IconButtonSize;
     /** variant="iconButton" — accessible label */

package/dist/components/Modal/useDialogFocus.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Modal dialog focus, for Drawer and Modal: on open, focus moves inside (the first control of
+ * the body, else the first control of the panel, else the panel itself); Tab and Shift+Tab wrap
+ * inside the panel, and come back to it from a floating list the dialog opened; on close, focus
+ * returns to the element that had it when the dialog opened, when it is still on the page.
+ */
+export declare function useDialogFocus(open: boolean, panelRef: React.RefObject<HTMLElement | null>, bodySelector: string): void;

package/dist/components/Pill/Pill.d.ts

@@ -2,9 +2,11 @@ import React from 'react';
 import { IconElement } from '../Icon/Icon';
 import './Pill.css';
 interface PillBase {
-    /** Active/selected state — maps to aria-pressed. Marked as required in the props table — mandatory in every public use together with onClick. Optional in the type to allow internal usage (Select, DatePicker) */
+    /** Active/selected state of a filter or toggle pill — maps to aria-pressed. Leave it out for an
+     *  action pill (one that opens something or navigates): with no `active` the button carries no
+     *  pressed state at all, so a screen reader announces a plain button */
     active?: boolean;
-    /** Callback fired when clicking the Pill. Marked as required in the props table — mandatory in every public use together with active. Optional in the type to allow internal usage (Select, DatePicker) */
+    /** Callback fired when clicking the Pill. Marked as required in the props table — mandatory in every public use. Optional in the type to allow internal usage (Select, DatePicker) */
     onClick?: () => void;
     /** Icon to the right of the label */
     iconRight?: IconElement;