@wordpress/ui 0.5.1-next.v.0 → 0.6.0

package/build-types/form/primitives/input/stories/index.story.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Input } from '../../../..';
+declare const meta: Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof Input>;
+export declare const Default: Story;
+/**
+ * The `InputLayout.Slot` component can be used to add standard padding in
+ * the `prefix` or `suffix` slot.
+ */
+export declare const WithPrefix: Story;
+export declare const Disabled: Story;
+//# sourceMappingURL=index.story.d.ts.map

package/build-types/form/primitives/input/stories/index.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../../../src/form/primitives/input/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAe,MAAM,aAAa,CAAC;AAEjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,KAAK,CAS7B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,KAAK,CAAE,CAAC;AAEtC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC"}

package/build-types/form/primitives/input/test/index.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.test.d.ts.map

package/build-types/form/primitives/input/test/index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../../../src/form/primitives/input/test/index.test.tsx"],"names":[],"mappings":""}

package/build-types/form/primitives/input/types.d.ts

@@ -0,0 +1,27 @@
+import type { Input } from '@base-ui/react/input';
+import type { InputLayoutProps } from '../input-layout/types';
+import type { ComponentProps } from '../../../utils/types';
+export type InputProps = Omit<ComponentProps<typeof Input>, 'value' | 'defaultValue' | 'type' | 'disabled' | 'prefix' | 'size'> & Pick<InputLayoutProps, 'prefix' | 'suffix'> & {
+    /**
+     * Whether the field is disabled.
+     */
+    disabled?: boolean;
+} & {
+    /**
+     * The type of the input element.
+     */
+    type?: Input.Props['type'];
+    /**
+     * The default value to use in uncontrolled mode.
+     */
+    defaultValue?: Input.Props['defaultValue'];
+    /**
+     * The value to use in controlled mode.
+     */
+    value?: Input.Props['value'];
+    /**
+     * The size of the field.
+     */
+    size?: Exclude<InputLayoutProps['size'], 'small'>;
+};
+//# sourceMappingURL=types.d.ts.map

package/build-types/form/primitives/input/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/input/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,MAAM,MAAM,UAAU,GAAG,IAAI,CAC5B,cAAc,CAAE,OAAO,KAAK,CAAE,EAC9B,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAClE,GACA,IAAI,CAAE,gBAAgB,EAAE,QAAQ,GAAG,QAAQ,CAAE,GAAG;IAC/C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG;IACH;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,KAAK,CAAE,MAAM,CAAE,CAAC;IAC7B;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,KAAK,CAAE,cAAc,CAAE,CAAC;IAC7C;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,KAAK,CAAE,OAAO,CAAE,CAAC;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAE,gBAAgB,CAAE,MAAM,CAAE,EAAE,OAAO,CAAE,CAAC;CACtD,CAAC"}

package/build-types/form/primitives/input-layout/stories/index.story.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { InputLayout } from '../../../..';
 declare const meta: Meta<typeof InputLayout>;
 export default meta;

package/build-types/form/primitives/input-layout/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../../../src/form/primitives/input-layout/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,WAAW,CAMnC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,WAAW,CAAE,CAAC;AAE5C,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAI9B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../../../src/form/primitives/input-layout/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,WAAW,CAMnC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,WAAW,CAAE,CAAC;AAE5C,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAI9B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC"}

package/build-types/form/primitives/select/index.d.ts

@@ -0,0 +1,5 @@
+export { Item } from './item';
+export { Popup } from './popup';
+export { Root } from './root';
+export { Trigger } from './trigger';
+//# sourceMappingURL=index.d.ts.map

package/build-types/form/primitives/select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/build-types/form/primitives/select/item.d.ts

@@ -0,0 +1,7 @@
+import { Select as _Select } from '@base-ui/react/select';
+export declare const Item: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectItemProps, "children" | "value"> & {
+    value?: string;
+    size?: import("../input-layout/types").InputLayoutProps["size"];
+    children?: _Select.Item.Props["children"];
+} & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=item.d.ts.map

package/build-types/form/primitives/select/item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/select/item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAS1D,eAAO,MAAM,IAAI;;;;kDA6BhB,CAAC"}

package/build-types/form/primitives/select/popup.d.ts

@@ -0,0 +1,2 @@
+export declare const Popup: import("react").ForwardRefExoticComponent<import("@base-ui/react").SelectPopupProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=popup.d.ts.map

package/build-types/form/primitives/select/popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/select/popup.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,KAAK,sIAqCjB,CAAC"}

package/build-types/form/primitives/select/root.d.ts

@@ -0,0 +1,3 @@
+import type { SelectRootProps } from './types';
+export declare function Root(props: SelectRootProps): import("react").JSX.Element;
+//# sourceMappingURL=root.d.ts.map

package/build-types/form/primitives/select/root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/select/root.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,wBAAgB,IAAI,CAAE,KAAK,EAAE,eAAe,+BAE3C"}

package/build-types/form/primitives/select/stories/index.story.d.ts

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import '@wordpress/theme/design-tokens.css';
+import { Select } from '../../../..';
+declare const meta: Meta<typeof Select.Root>;
+export default meta;
+type Story = StoryObj<typeof Select.Root>;
+export declare const Default: Story;
+export declare const Compact: Story;
+/**
+ * The `minimal` variant must be used judiciously, because in many
+ * contexts it can be unclear to users that it is a select trigger.
+ *
+ * Combined with the `small` size, `minimal` can be used to create a
+ * very low-profile `Select`, intended for rare use cases like
+ * a pagination control.
+ */
+export declare const Minimal: Story;
+/**
+ * By passing an `items` array to `Select.Root`, the `Select.Trigger` will be able to
+ * render a `label` string for each item rather than the raw `value` string. In this
+ * case, the option with an empty string value has a `"Select"` label string.
+ *
+ * This may be easier than writing a custom render function for the `Select.Trigger`.
+ */
+export declare const WithEmptyValueOption: Story;
+/**
+ * When accessibly labeling a `Select`, note that the label must be associated with the `Select.Trigger`,
+ * not the `Select.Root`.
+ *
+ * Whether labeling with `aria-label`, `htmlFor`, or `aria-labelledby`, the association must be made to the `Select.Trigger`.
+ */
+export declare const Labeling: Story;
+export declare const WithOverflow: Story;
+export declare const Disabled: Story;
+export declare const WithDisabledItem: Story;
+/**
+ * For custom needs, a `Select.Trigger` can take a custom render function as its children,
+ * while `Select.Item` can take arbitrary content as children.
+ */
+export declare const WithCustomTriggerAndItem: Story;
+/**
+ * Popovers in Gutenberg are managed with explicit z-index values, which can create
+ * situations where a popover renders below another popover, when you want it to be rendered above.
+ *
+ * The `--wp-ui-select-z-index` CSS variable, available on the `Select.Popup` component,
+ * is an escape hatch that can be used to override the z-index of a given `Select` popover
+ * on a case-by-case basis.
+ */
+export declare const WithCustomZIndex: Story;
+//# sourceMappingURL=index.story.d.ts.map

package/build-types/form/primitives/select/stories/index.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../../../src/form/primitives/select/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,MAAM,CAAC,IAAI,CAQnC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,MAAM,CAAC,IAAI,CAAE,CAAC;AAE5C,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAC;AAcF;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAsBlC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAC;AAKF,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KActB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAa9B,CAAC;AAaF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAAE,KAwCtC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAc9B,CAAC"}

package/build-types/form/primitives/select/test/index.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.test.d.ts.map

package/build-types/form/primitives/select/test/index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../../../src/form/primitives/select/test/index.test.tsx"],"names":[],"mappings":""}

package/build-types/form/primitives/select/trigger.d.ts

@@ -0,0 +1,7 @@
+import { Select as _Select } from '@base-ui/react/select';
+export declare const Trigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectTriggerProps, "children"> & {
+    size?: import("../input-layout/types").InputLayoutProps["size"];
+    variant?: "default" | "minimal";
+    children?: _Select.Value.Props["children"];
+} & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=trigger.d.ts.map

package/build-types/form/primitives/select/trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trigger.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/select/trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAU1D,eAAO,MAAM,OAAO;;;;qDA+CnB,CAAC"}

package/build-types/form/primitives/select/types.d.ts

@@ -0,0 +1,42 @@
+import type { Select as _Select } from '@base-ui/react/select';
+import type { InputLayoutProps } from '../input-layout/types';
+export type SelectRootProps = Omit<_Select.Root.Props<string, false>, 'multiple'>;
+export type SelectTriggerProps = Omit<_Select.Trigger.Props, 'children'> & {
+    /**
+     * The size of the trigger.
+     *
+     * @default 'default'
+     */
+    size?: InputLayoutProps['size'];
+    /**
+     * The style variant of the trigger.
+     *
+     * @default 'default'
+     */
+    variant?: 'default' | 'minimal';
+    /**
+     * A function that gets called with the current value as an argument.
+     * Use this to customize the trigger content.
+     */
+    children?: _Select.Value.Props['children'];
+};
+export type SelectPopupProps = _Select.Popup.Props;
+export type SelectItemProps = Omit<_Select.Item.Props, 'children' | 'value'> & {
+    /**
+     * A unique value that identifies this select item.
+     */
+    value?: string;
+    /**
+     * The size of the item.
+     *
+     * @default 'default'
+     */
+    size?: InputLayoutProps['size'];
+    /**
+     * The content of the item.
+     *
+     * @default `value`
+     */
+    children?: _Select.Item.Props['children'];
+};
+//# sourceMappingURL=types.d.ts.map

package/build-types/form/primitives/select/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/form/primitives/select/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAG9D,MAAM,MAAM,eAAe,GAAG,IAAI,CACjC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAE,MAAM,EAAE,KAAK,CAAE,EACnC,UAAU,CACV,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAE,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,UAAU,CAAE,GAAG;IAC5E;;;;OAIG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAE,MAAM,CAAE,CAAC;IAClC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,CAAE,UAAU,CAAE,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC;AAEnD,MAAM,MAAM,eAAe,GAAG,IAAI,CACjC,OAAO,CAAC,IAAI,CAAC,KAAK,EAClB,UAAU,GAAG,OAAO,CACpB,GAAG;IACH;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAE,MAAM,CAAE,CAAC;IAClC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAE,UAAU,CAAE,CAAC;CAC5C,CAAC"}

package/build-types/icon/stories/index.story.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Icon } from '../index';
 declare const meta: Meta<typeof Icon>;
 export default meta;

package/build-types/icon/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/icon/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAgB5B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,IAAI,CAAE,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAYpC,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/icon/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAgB5B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,IAAI,CAAE,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAYpC,CAAC"}

package/build-types/index.d.ts

@@ -4,5 +4,6 @@ export * from './button';
 export * from './form/primitives';
 export * from './icon';
 export * from './stack';
+export * as Tooltip from './tooltip';
 export * from './visually-hidden';
 //# sourceMappingURL=index.d.ts.map

package/build-types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,cAAc,mBAAmB,CAAC"}

package/build-types/lock-unlock.d.ts

@@ -0,0 +1,2 @@
+export declare const lock: (object: unknown, privateData: unknown) => void, unlock: <T = any>(object: unknown) => T;
+//# sourceMappingURL=lock-unlock.d.ts.map

package/build-types/lock-unlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lock-unlock.d.ts","sourceRoot":"","sources":["../src/lock-unlock.ts"],"names":[],"mappings":"AAEA,eAAO,MAAQ,IAAI,mDAAE,MAAM,iCAIzB,CAAC"}

package/build-types/stack/stories/index.story.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Stack } from '../index';
 declare const meta: Meta<typeof Stack>;
 export default meta;

package/build-types/stack/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/stack/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,KAAK,CAG7B,CAAC;AACF,eAAe,IAAI,CAAC;AAYpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,KAAK,CAAE,CAAC;AAEtC,eAAO,MAAM,OAAO,EAAE,KA4DrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAsBpB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/stack/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,KAAK,CAG7B,CAAC;AACF,eAAe,IAAI,CAAC;AAYpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,KAAK,CAAE,CAAC;AAEtC,eAAO,MAAM,OAAO,EAAE,KA4DrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAsBpB,CAAC"}

package/build-types/tooltip/index.d.ts

@@ -0,0 +1,6 @@
+import { Popup } from './popup';
+import { Trigger } from './trigger';
+import { Root } from './root';
+import { Provider } from './provider';
+export { Provider, Root, Trigger, Popup };
+//# sourceMappingURL=index.d.ts.map

package/build-types/tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/build-types/tooltip/popup.d.ts

@@ -0,0 +1,4 @@
+import type { PopupProps } from './types';
+declare const Popup: import("react").ForwardRefExoticComponent<PopupProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Popup };
+//# sourceMappingURL=popup.d.ts.map

package/build-types/tooltip/popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../src/tooltip/popup.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAQ1C,QAAA,MAAM,KAAK,uGA8CR,CAAC;AAEJ,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/build-types/tooltip/provider.d.ts

@@ -0,0 +1,4 @@
+import type { ProviderProps } from './types';
+declare function Provider({ children, ...props }: ProviderProps): import("react").JSX.Element;
+export { Provider };
+//# sourceMappingURL=provider.d.ts.map

package/build-types/tooltip/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../src/tooltip/provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,iBAAS,QAAQ,CAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAEvD;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/build-types/tooltip/root.d.ts

@@ -0,0 +1,4 @@
+import type { RootProps } from './types';
+declare function Root(props: RootProps): import("react").JSX.Element;
+export { Root };
+//# sourceMappingURL=root.d.ts.map

package/build-types/tooltip/root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/tooltip/root.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,iBAAS,IAAI,CAAE,KAAK,EAAE,SAAS,+BAE9B;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/build-types/tooltip/stories/index.story.d.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Tooltip } from '../..';
+declare const meta: Meta<typeof Tooltip.Root>;
+export default meta;
+export declare const Default: StoryObj<typeof Tooltip.Root>;
+/**
+ * The `disabled` prop prevents the tooltip from showing, and can be used to
+ * show the tooltip conditionally without rendering the underlying react
+ * component conditionally (which could cause reconciliation issues).
+ */
+export declare const Disabled: StoryObj<typeof Tooltip.Root>;
+/**
+ * Use the `side` prop to control where the tooltip appears relative to the
+ * trigger element.
+ */
+export declare const Positioning: StoryObj<typeof Tooltip.Root>;
+/**
+ * Use `Tooltip.Provider` to control the delay before tooltips appear.
+ * This is useful when you have multiple tooltips and want them to share
+ * the same delay configuration.
+ */
+export declare const WithProvider: StoryObj<typeof Tooltip.Root>;
+//# sourceMappingURL=index.story.d.ts.map

package/build-types/tooltip/stories/index.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/tooltip/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,OAAO,CAAC,IAAI,CAQpC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,OAAO,CAAC,IAAI,CASlD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAE,OAAO,OAAO,CAAC,IAAI,CAMnD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,QAAQ,CAAE,OAAO,OAAO,CAAC,IAAI,CA+BtD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,QAAQ,CAAE,OAAO,OAAO,CAAC,IAAI,CAgBvD,CAAC"}

package/build-types/tooltip/test/index.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.test.d.ts.map

package/build-types/tooltip/test/index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../src/tooltip/test/index.test.tsx"],"names":[],"mappings":""}

package/build-types/tooltip/trigger.d.ts

@@ -0,0 +1,4 @@
+import type { TriggerProps } from './types';
+declare const Trigger: import("react").ForwardRefExoticComponent<TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export { Trigger };
+//# sourceMappingURL=trigger.d.ts.map

package/build-types/tooltip/trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trigger.d.ts","sourceRoot":"","sources":["../../src/tooltip/trigger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,QAAA,MAAM,OAAO,4GAQZ,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/build-types/tooltip/types.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import type { Tooltip } from '@base-ui/react/tooltip';
+import type { ComponentProps } from '../utils/types';
+export type RootProps = Pick<Tooltip.Root.Props, 'disabled' | 'children'>;
+export type ProviderProps = Pick<Tooltip.Provider.Props, 'delay' | 'children'>;
+export interface TriggerProps extends ComponentProps<'button'> {
+    /**
+     * The content to be rendered inside the component.
+     */
+    children?: ReactNode;
+}
+export interface PopupProps extends ComponentProps<'div'>, Pick<Tooltip.Positioner.Props, 'align' | 'side' | 'sideOffset'> {
+    /**
+     * The content to be rendered inside the component.
+     */
+    children?: ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

package/build-types/tooltip/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,MAAM,SAAS,GAAG,IAAI,CAAE,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,CAAE,CAAC;AAE5E,MAAM,MAAM,aAAa,GAAG,IAAI,CAC/B,OAAO,CAAC,QAAQ,CAAC,KAAK,EACtB,OAAO,GAAG,UAAU,CACpB,CAAC;AAEF,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAE,QAAQ,CAAE;IAC/D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,UAChB,SAAQ,cAAc,CAAE,KAAK,CAAE,EAC9B,IAAI,CAAE,OAAO,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,YAAY,CAAE;IAClE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB"}

package/build-types/utils/types.d.ts

@@ -1,6 +1,3 @@
-/**
- * External dependencies
- */
 import { type ElementType, type ComponentPropsWithoutRef, type HTMLAttributes, type Ref } from 'react';
 type HTMLAttributesWithRef<T extends ElementType = any> = HTMLAttributes<T> & {
     ref?: Ref<T> | undefined;

package/build-types/utils/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EACN,KAAK,WAAW,EAChB,KAAK,wBAAwB,EAC7B,KAAK,cAAc,EACnB,KAAK,GAAG,EACR,MAAM,OAAO,CAAC;AAEf,KAAK,qBAAqB,CAAE,CAAC,SAAS,WAAW,GAAG,GAAG,IACtD,cAAc,CAAE,CAAC,CAAE,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAE,CAAC,CAAE,GAAG,SAAS,CAAA;CAAE,CAAC;AAEtD,KAAK,iBAAiB,CAAE,KAAK,IAAK,CACjC,KAAK,EAAE,KAAK,KACR,KAAK,CAAC,YAAY,CAAE,OAAO,CAAE,CAAC;AAEnC,MAAM,MAAM,cAAc,CAAE,CAAC,SAAS,WAAW,IAAK,IAAI,CACzD,wBAAwB,CAAE,CAAC,CAAE,EAC7B,WAAW,GAAG,UAAU,GAAG,QAAQ,CACnC,GAAG;IACH;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,MAAM,CAAC,EACJ,iBAAiB,CAAE,qBAAqB,CAAE,GAC1C,KAAK,CAAC,YAAY,CAAE,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,CAAE,CAAC;CACnD,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,WAAW,EAChB,KAAK,wBAAwB,EAC7B,KAAK,cAAc,EACnB,KAAK,GAAG,EACR,MAAM,OAAO,CAAC;AAEf,KAAK,qBAAqB,CAAE,CAAC,SAAS,WAAW,GAAG,GAAG,IACtD,cAAc,CAAE,CAAC,CAAE,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAE,CAAC,CAAE,GAAG,SAAS,CAAA;CAAE,CAAC;AAEtD,KAAK,iBAAiB,CAAE,KAAK,IAAK,CACjC,KAAK,EAAE,KAAK,KACR,KAAK,CAAC,YAAY,CAAE,OAAO,CAAE,CAAC;AAEnC,MAAM,MAAM,cAAc,CAAE,CAAC,SAAS,WAAW,IAAK,IAAI,CACzD,wBAAwB,CAAE,CAAC,CAAE,EAC7B,WAAW,GAAG,UAAU,GAAG,QAAQ,CACnC,GAAG;IACH;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,MAAM,CAAC,EACJ,iBAAiB,CAAE,qBAAqB,CAAE,GAC1C,KAAK,CAAC,YAAY,CAAE,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,CAAE,CAAC;CACnD,CAAC"}

package/build-types/visually-hidden/stories/index.story.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { VisuallyHidden } from '../';
 declare const meta: Meta<typeof VisuallyHidden>;
 export default meta;

package/build-types/visually-hidden/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/visually-hidden/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAErC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,cAAc,CAGtC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,cAAc,CAAE,CAAC;AAE/C,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/visually-hidden/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAErC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,cAAc,CAGtC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,cAAc,CAAE,CAAC;AAE/C,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/ui",
-	"version": "0.5.1-next.v.0+500f87dd8",
+	"version": "0.6.0",
 	"description": "Themeable React UI components for the WordPress Design System.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,20 +44,22 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@base-ui/react": "^1.0.0",
-		"@wordpress/a11y": "^4.37.1-next.v.0+500f87dd8",
-		"@wordpress/element": "^6.37.1-next.v.0+500f87dd8",
-		"@wordpress/i18n": "^6.10.1-next.v.0+500f87dd8",
-		"@wordpress/icons": "^11.4.1-next.v.0+500f87dd8",
-		"@wordpress/primitives": "^4.37.1-next.v.0+500f87dd8",
+		"@wordpress/a11y": "^4.39.0",
+		"@wordpress/element": "^6.39.0",
+		"@wordpress/i18n": "^6.12.0",
+		"@wordpress/icons": "^11.6.0",
+		"@wordpress/primitives": "^4.39.0",
+		"@wordpress/private-apis": "^1.39.0",
+		"@wordpress/theme": "^0.6.0",
 		"clsx": "^2.1.1"
 	},
 	"devDependencies": {
-		"@storybook/addon-docs": "^9.1.17",
+		"@storybook/addon-docs": "^10.1.11",
+		"@storybook/react-vite": "^10.1.11",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@types/jest": "^29.5.14",
 		"@types/node": "^20.17.10",
-		"@wordpress/theme": "^0.5.1-next.v.0+500f87dd8",
-		"storybook": "^9.1.17"
+		"storybook": "^10.1.11"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -66,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ca0db0ee8ac2116cd307650136027d26d0cdd9bd"
+	"gitHead": "eee1cfb1472f11183e40fb77465a5f13145df7ad"
 }

package/src/badge/stories/choosing-intent.mdx

@@ -1,20 +1,11 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-import { Badge } from '../index';
-import '@wordpress/theme/design-tokens.css';
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import * as ChoosingIntentStories from './choosing-intent.story';
 
-<Meta title="Design System/Components/Badge/Choosing intent" />
+<Meta of={ ChoosingIntentStories } />
 
 # Choosing intent
 
-<div style={ { padding: '2rem', display: 'flex', justifyContent: 'center', gap: '0.5rem', flexWrap: 'wrap', border: '1px solid #e0e0e0', borderRadius: '0.5rem' } }>
-	<Badge intent="high">high</Badge>
-	<Badge intent="medium">medium</Badge>
-	<Badge intent="low">low</Badge>
-	<Badge intent="stable">stable</Badge>
-	<Badge intent="informational">informational</Badge>
-	<Badge intent="draft">draft</Badge>
-	<Badge intent="none">none</Badge>
-</div>
+<Canvas of={ ChoosingIntentStories.AllIntents } />
 
 It can be difficult to determine which badge intent to use because the component's properties are not tied to any specific product view. Those properties should be balanced against the requirements of the view in which the badge appears, all while keeping an eye on high-level consistency (global statuses that appear across multiple views).
 
@@ -36,21 +27,21 @@ Use when there's something for the user to act on.
 * Needs attention as soon as possible
 * _E.g. "Payment declined", "Security issue"_
 
-<Badge intent="high">Payment declined</Badge> <Badge intent="high">Security issue</Badge>
+<Canvas of={ ChoosingIntentStories.High } />
 
 ### `medium` – Important / blocks progress
 
 * Blocks a key task, should be handled soon
 * _E.g. "Approval required", "Review needed"_
 
-<Badge intent="medium">Approval required</Badge> <Badge intent="medium">Review needed</Badge>
+<Canvas of={ ChoosingIntentStories.Medium } />
 
 ### `low` – Worth noticing / non‑urgent
 
 * Good to be aware of; action may be optional or later
 * _E.g. "Pending", "Queued", "Minor issues", "Optional setup"_
 
-<Badge intent="low">Pending</Badge> <Badge intent="low">Queued</Badge>
+<Canvas of={ ChoosingIntentStories.Low } />
 
 ## 3. Informational / draft = special non-final states
 
@@ -59,13 +50,13 @@ Use when there's something for the user to act on.
 * Context only; no clear action
 * _E.g. "Scheduled", "Beta", "Internal only"_
 
-<Badge intent="informational">Scheduled</Badge> <Badge intent="informational">Beta</Badge>
+<Canvas of={ ChoosingIntentStories.Informational } />
 
 ### `draft` – Not final / work in progress
 
 * _E.g. "Draft", "Unpublished", "Work in progress"_
 
-<Badge intent="draft">Draft</Badge> <Badge intent="draft">Unpublished</Badge>
+<Canvas of={ ChoosingIntentStories.Draft } />
 
 ## 4. Stable / none = normal states
 
@@ -74,34 +65,40 @@ Use when there's something for the user to act on.
 * Use when confirming success or "all good" is important in that view
 * _E.g. "Healthy", "Active", "Live"_
 
-<Badge intent="stable">Healthy</Badge> <Badge intent="stable">Active</Badge>
+<Canvas of={ ChoosingIntentStories.Stable } />
 
 ### `none` – Default for normal / background states
 
 * Especially in dense lists where too much color creates visual noise
 * _E.g. "Inactive", "Expired"_
 
-<Badge intent="none">Inactive</Badge> <Badge intent="none">Expired</Badge>
+<Canvas of={ ChoosingIntentStories.None } />
 
 ## Examples
 
-### Comment status:
+### Comment status
 
--   "Approved" → `none`: <Badge intent="none">Approved</Badge>
--   "Approval required" → `medium`: <Badge intent="medium">Approval required</Badge>
+- "Approved" → `none`
+- "Approval required" → `medium`
 
-### Page status:
+<Canvas of={ ChoosingIntentStories.CommentStatus } />
 
--   "Published" → `none`: <Badge intent="none">Published</Badge>
--   "Pending" → `low`: <Badge intent="low">Pending</Badge>
--   "Draft" → `draft`: <Badge intent="draft">Draft</Badge>
--   "Scheduled" → `informational`: <Badge intent="informational">Scheduled</Badge>
--   "Private" → `informational`: <Badge intent="informational">Private</Badge>
+### Page status
 
-### Plugin status:
+- "Published" → `none`
+- "Pending" → `low`
+- "Draft" → `draft`
+- "Scheduled" → `informational`
+- "Private" → `informational`
 
--   "Active" → `stable`: <Badge intent="stable">Active</Badge>
--   "Inactive" → `none`: <Badge intent="none">Inactive</Badge>
+<Canvas of={ ChoosingIntentStories.PageStatus } />
+
+### Plugin status
+
+- "Active" → `stable`
+- "Inactive" → `none`
+
+<Canvas of={ ChoosingIntentStories.PluginStatus } />
 
 ## 5. When in doubt…