@allxsmith/bestax-bulma 5.16.6 → 5.16.8

package/dist/types/components/Avatar.d.ts

@@ -32,11 +32,11 @@ export interface AvatarOwnProps extends Omit<BulmaClassesProps, 'color'> {
     shape?: AvatarShape;
     /** Background color for initials/icon avatars (else auto-derived from `name`). */
     color?: AvatarColor;
-    /** When set, renders the avatar as a link. */
+    /** When set, renders the avatar as a link: an `<a>` unless `as` names the element itself. An `as` target declaring its own `href` supersedes this one, and its type and its requiredness are what apply. */
     href?: string;
-    /** Anchor target — forwarded only when rendering a link (an `a` or a custom `as` component). */
+    /** Anchor target — forwarded only when rendering a link (an `a` or a custom `as` component), and superseded by the target's own declaration the way `href` is. */
     target?: string;
-    /** Anchor rel — forwarded only when rendering a link (an `a` or a custom `as` component). */
+    /** Anchor rel — forwarded only when rendering a link (an `a` or a custom `as` component), and superseded by the target's own declaration the way `href` is. */
     rel?: string;
     /** Extra props forwarded to the underlying `<img>` (e.g. `loading`, `crossOrigin`); its `onError` is chained before the fallback fires. */
     imageProps?: React.ImgHTMLAttributes<HTMLImageElement>;
@@ -51,14 +51,23 @@ export interface AvatarOwnProps extends Omit<BulmaClassesProps, 'color'> {
      */
     children?: never;
 }
+/**
+ * The own props Avatar hands to the element `as` names rather than consuming.
+ *
+ * They are what *chooses* the element when `as` is absent — an `<a>` with an
+ * `href`, a `<figure>` without one — so Avatar has to accept them before `as` is
+ * known. Declaring them is only half of it. `PolymorphicProps` explains what
+ * naming them here buys, and what leaving them unnamed cost (#665).
+ */
+type AvatarForwardedProp = 'href' | 'target' | 'rel';
 /**
  * Props for the Avatar component. The DOM attributes and the `ref` both follow
  * `as`.
  *
- * `href`, `target` and `rel` stay Avatar's own props rather than being derived:
- * they are what *chooses* the element when `as` is absent (an `<a>` with an
- * `href`, a `<figure>` without one), so they have to be accepted before `as` is
- * known.
+ * `href`, `target` and `rel` are Avatar's own props only for a target that has
+ * none of its own: `<Avatar href="/x" />` needs no `as`, while
+ * `<Avatar as={NextLink} />` takes `next/link`'s `href` — required, and a URL
+ * object as readily as a string.
  *
  * The type parameter defaults to `'figure'`, not to `React.ElementType`.
  * Defaulting to the constraint sounds truer to a runtime default that is
@@ -70,7 +79,7 @@ export interface AvatarOwnProps extends Omit<BulmaClassesProps, 'color'> {
  *
  * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the element `as` renders, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.
  */
-export type AvatarProps<T extends React.ElementType = 'figure'> = AvatarOwnProps & Omit<React.ComponentPropsWithoutRef<T>, keyof AvatarOwnProps | 'as'> & {
+export type AvatarProps<T extends React.ElementType = 'figure'> = Omit<AvatarOwnProps, Extract<AvatarForwardedProp, keyof React.ComponentPropsWithoutRef<T>>> & Omit<React.ComponentPropsWithoutRef<T>, Exclude<keyof AvatarOwnProps, AvatarForwardedProp> | 'as'> & {
     /** Element/component to render as. Defaults to `'a'` when `href` is set, else `'figure'`. */
     as?: T;
 };
@@ -87,5 +96,5 @@ export type AvatarProps<T extends React.ElementType = 'figure'> = AvatarOwnProps
  * @example
  * <Avatar name="Grace Hopper" />
  */
-export declare const Avatar: PolymorphicComponent<AvatarOwnProps, "figure">;
+export declare const Avatar: PolymorphicComponent<AvatarOwnProps, "figure", AvatarForwardedProp>;
 export default Avatar;

package/dist/types/components/Avatars.d.ts

@@ -25,6 +25,6 @@ export interface AvatarsProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     children?: React.ReactNode;
 }
 export declare const Avatars: React.FC<AvatarsProps> & {
-    Avatar: import("../index.js").PolymorphicComponent<import("./Avatar.js").AvatarOwnProps, "figure">;
+    Avatar: import("../index.js").PolymorphicComponent<import("./Avatar.js").AvatarOwnProps, "figure", "rel" | "href" | "target">;
 };
 export default Avatars;

package/dist/types/components/Dropdown.d.ts

@@ -98,7 +98,7 @@ export declare const DropdownItem: ConstrainedPolymorphicComponentWithoutRef<Dro
 export declare const DropdownDivider: React.FC;
 /** Bulma Dropdown component with Item and Divider sub-components. */
 export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>> & {
-    Item: ConstrainedPolymorphicComponentWithoutRef<DropdownItemOwnProps, DropdownItemElement, "a">;
+    Item: ConstrainedPolymorphicComponentWithoutRef<DropdownItemOwnProps, DropdownItemElement, "a", never>;
     Divider: React.FC<{}>;
 };
 export default Dropdown;

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

@@ -95,6 +95,6 @@ export declare const MenuItem: PolymorphicComponent<MenuItemOwnProps, "a">;
 export declare const Menu: React.FC<MenuProps> & {
     Label: React.FC<MenuLabelProps>;
     List: React.FC<MenuListProps>;
-    Item: PolymorphicComponent<MenuItemOwnProps, "a">;
+    Item: PolymorphicComponent<MenuItemOwnProps, "a", never>;
 };
 export default Menu;

package/dist/types/components/Navbar.d.ts

@@ -289,8 +289,8 @@ export declare const NavbarDropdownMenu: React.FC<NavbarDropdownMenuProps>;
 export declare const NavbarDivider: React.FC<React.HTMLAttributes<HTMLHRElement>>;
 export declare const Navbar: React.ForwardRefExoticComponent<NavbarProps & React.RefAttributes<HTMLElement>> & {
     Brand: React.FC<NavbarBrandProps>;
-    Item: PolymorphicComponent<NavbarItemOwnProps, "a">;
-    Link: PolymorphicComponent<NavbarLinkOwnProps, "a">;
+    Item: PolymorphicComponent<NavbarItemOwnProps, "a", never>;
+    Link: PolymorphicComponent<NavbarLinkOwnProps, "a", never>;
     Burger: React.ForwardRefExoticComponent<NavbarBurgerProps & React.RefAttributes<HTMLButtonElement>>;
     Menu: React.FC<NavbarMenuProps>;
     Start: React.FC<NavbarStartEndProps>;

package/dist/types/elements/Buttons.d.ts

@@ -34,7 +34,7 @@ interface ButtonsProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaC
     children: React.ReactNode;
 }
 export declare const Buttons: React.FC<ButtonsProps> & {
-    Button: import("../index.js").PolymorphicComponent<import("./Button.js").ButtonOwnProps, "button">;
-    LinkButton: import("../index.js").PolymorphicComponent<import("./LinkButton.js").LinkButtonOwnProps, "button">;
+    Button: import("../index.js").PolymorphicComponent<import("./Button.js").ButtonOwnProps, "button", never>;
+    LinkButton: import("../index.js").PolymorphicComponent<import("./LinkButton.js").LinkButtonOwnProps, "button", never>;
 };
 export {};

package/dist/types/helpers/polymorphic.d.ts

@@ -29,14 +29,44 @@ export type PolymorphicRef<T extends React.ElementType> = 'ref' extends keyof Re
 /**
  * A component's own props, plus the attributes of the element `as` names.
  *
- * `Own` wins every collision — a component that declares `color` as a Bulma
- * variant keeps it, rather than inheriting the DOM attribute of the same name.
- * That subtraction is the ONLY one. `color` used to be dropped here as well, to
- * stop the deprecated presentational HTML attribute reaching the three
- * components whose own props do not declare one — but doing it in the shared
- * type also stripped `color` from a CUSTOM target that legitimately has one.
- * Those three declare `color?: never` themselves instead, which lands in
- * `keyof Own` and reaches the same result without a special case here.
+ * `Own` wins a collision by default — a component that declares
+ * `color` as a Bulma variant keeps it, rather than inheriting the DOM attribute
+ * of the same name. `color` used to be dropped here as well, to stop the
+ * deprecated presentational HTML attribute reaching the components whose own
+ * props do not declare one — but doing it in the shared type also stripped
+ * `color` from a CUSTOM target that legitimately has one. Those components
+ * declare `color?: never` themselves instead, which lands in `keyof Own` and
+ * reaches the same result without a special case here.
+ *
+ * `Forwarded` names the own props the component hands STRAIGHT to the target
+ * instead of consuming, and the subtraction runs the other way for them: the
+ * TARGET's declaration wins, and the own one is what covers a target that has
+ * no such prop. Subtracting them threw the target's declaration away, so an
+ * OPTIONAL own prop hid a REQUIRED one — `<Avatar as={NextLink} name="Ada" />`
+ * compiled because Avatar's `href?: string` survived while `next/link`'s
+ * required `href` was omitted, and the target threw on what it never received
+ * (#665). The target wins rather than both declarations applying at once,
+ * because for a prop the component only passes along its own type has no
+ * standing: `next/link` accepts a URL object as well as a string, and
+ * intersecting Avatar's `string` with that would refuse the object.
+ *
+ * `Forwarded` defaults to `never`, so a prop the component CONSUMES stays
+ * subtracted — the common case, and the one `color` needs. What that costs is
+ * that a target REQUIRING a consumed prop is still satisfiable with the prop
+ * omitted, and the value goes wherever the component sends it: `Menu.Item`
+ * spends several of its own props on its wrapping `<li>`, `title` and `style`
+ * among them, so a target requiring one of those never sees it. Erroring on
+ * that needs a category this pair cannot express, since `className` is consumed
+ * too and yet every component composes one and passes it on. It is pinned as a
+ * limitation in `__typetests__/polymorphic.tsx` rather than guessed at here.
+ *
+ * `Own` is returned untouched when nothing is forwarded, rather than run through
+ * an `Omit` that names no keys. `Omit` is not the identity it looks like: it
+ * keys off `keyof Own`, which for a UNION `Own` is only what the members share,
+ * so `PolymorphicProps<'div', A | B>` lost every prop of both. It is public API
+ * and a consumer's wrapper can pass a union; the untouched branch also keeps
+ * each own prop's TSDoc reaching an IDE, which a mapped type drops. The
+ * forwarded branch distributes over `Own` for the same reason.
  *
  * Distributive over `T` on purpose. `Omit<A | B, K>` keys off `keyof (A | B)`,
  * which is only what A and B share — so a union-typed `as` (a ternary, or a
@@ -51,7 +81,7 @@ export type PolymorphicRef<T extends React.ElementType> = 'ref' extends keyof Re
  * This type is here for the component's cast target and for consumers writing
  * wrappers.
  */
-export type PolymorphicProps<T extends React.ElementType, Own> = T extends unknown ? Own & Omit<React.ComponentPropsWithoutRef<T>, keyof Own | 'as'> & {
+export type PolymorphicProps<T extends React.ElementType, Own, Forwarded extends keyof Own = never> = T extends unknown ? ([Forwarded] extends [never] ? Own : Own extends unknown ? Omit<Own, Extract<Forwarded, keyof React.ComponentPropsWithoutRef<T>>> : never) & Omit<React.ComponentPropsWithoutRef<T>, Exclude<keyof Own, Forwarded> | 'as'> & {
     /** The element or component to render. */
     as?: T;
 } : never;
@@ -86,11 +116,11 @@ export type PolymorphicProps<T extends React.ElementType, Own> = T extends unkno
  * const MemoButton = React.memo(Button) as typeof Button;
  * ```
  */
-export interface PolymorphicComponent<Own, Default extends React.ElementType> {
-    <T extends React.ElementType = Default>(props: PolymorphicProps<T, Own> & {
+export interface PolymorphicComponent<Own, Default extends React.ElementType, Forwarded extends keyof Own = never> {
+    <T extends React.ElementType = Default>(props: PolymorphicProps<T, Own, Forwarded> & {
         ref?: PolymorphicRef<T>;
     }): React.ReactElement | null;
-    (props: PolymorphicProps<Default, Own> & {
+    (props: PolymorphicProps<Default, Own, Forwarded> & {
         ref?: PolymorphicRef<Default>;
     }): React.ReactElement | null;
     displayName?: string;
@@ -101,10 +131,14 @@ export interface PolymorphicComponent<Own, Default extends React.ElementType> {
  * For components that own the node they observe — `Reveal` keeps its own ref on
  * the element it watches for scroll intersection, which is not always the
  * element `as` names.
+ *
+ * It carries `Forwarded` even with no component passing one today: the default
+ * is the behaviour without it, and a component that grows a forwarded own prop
+ * would otherwise reintroduce #665 here with nothing to say so.
  */
-export interface PolymorphicComponentWithoutRef<Own, Default extends React.ElementType> {
-    <T extends React.ElementType = Default>(props: PolymorphicProps<T, Own>): React.ReactElement | null;
-    (props: PolymorphicProps<Default, Own>): React.ReactElement | null;
+export interface PolymorphicComponentWithoutRef<Own, Default extends React.ElementType, Forwarded extends keyof Own = never> {
+    <T extends React.ElementType = Default>(props: PolymorphicProps<T, Own, Forwarded>): React.ReactElement | null;
+    (props: PolymorphicProps<Default, Own, Forwarded>): React.ReactElement | null;
     displayName?: string;
 }
 /**
@@ -131,8 +165,8 @@ export interface PolymorphicComponentWithoutRef<Own, Default extends React.Eleme
  * than losing every prop the members do not share. Narrowing it is not a
  * constrained-component question; it would have to change for `Button` first.
  */
-export interface ConstrainedPolymorphicComponentWithoutRef<Own, Allowed extends React.ElementType, Default extends Allowed> {
-    <T extends Allowed = Default>(props: PolymorphicProps<T, Own>): React.ReactElement | null;
-    (props: PolymorphicProps<Default, Own>): React.ReactElement | null;
+export interface ConstrainedPolymorphicComponentWithoutRef<Own, Allowed extends React.ElementType, Default extends Allowed, Forwarded extends keyof Own = never> {
+    <T extends Allowed = Default>(props: PolymorphicProps<T, Own, Forwarded>): React.ReactElement | null;
+    (props: PolymorphicProps<Default, Own, Forwarded>): React.ReactElement | null;
     displayName?: string;
 }

package/dist/types-cjs/components/Avatar.d.ts

@@ -32,11 +32,11 @@ export interface AvatarOwnProps extends Omit<BulmaClassesProps, 'color'> {
     shape?: AvatarShape;
     /** Background color for initials/icon avatars (else auto-derived from `name`). */
     color?: AvatarColor;
-    /** When set, renders the avatar as a link. */
+    /** When set, renders the avatar as a link: an `<a>` unless `as` names the element itself. An `as` target declaring its own `href` supersedes this one, and its type and its requiredness are what apply. */
     href?: string;
-    /** Anchor target — forwarded only when rendering a link (an `a` or a custom `as` component). */
+    /** Anchor target — forwarded only when rendering a link (an `a` or a custom `as` component), and superseded by the target's own declaration the way `href` is. */
     target?: string;
-    /** Anchor rel — forwarded only when rendering a link (an `a` or a custom `as` component). */
+    /** Anchor rel — forwarded only when rendering a link (an `a` or a custom `as` component), and superseded by the target's own declaration the way `href` is. */
     rel?: string;
     /** Extra props forwarded to the underlying `<img>` (e.g. `loading`, `crossOrigin`); its `onError` is chained before the fallback fires. */
     imageProps?: React.ImgHTMLAttributes<HTMLImageElement>;
@@ -51,14 +51,23 @@ export interface AvatarOwnProps extends Omit<BulmaClassesProps, 'color'> {
      */
     children?: never;
 }
+/**
+ * The own props Avatar hands to the element `as` names rather than consuming.
+ *
+ * They are what *chooses* the element when `as` is absent — an `<a>` with an
+ * `href`, a `<figure>` without one — so Avatar has to accept them before `as` is
+ * known. Declaring them is only half of it. `PolymorphicProps` explains what
+ * naming them here buys, and what leaving them unnamed cost (#665).
+ */
+type AvatarForwardedProp = 'href' | 'target' | 'rel';
 /**
  * Props for the Avatar component. The DOM attributes and the `ref` both follow
  * `as`.
  *
- * `href`, `target` and `rel` stay Avatar's own props rather than being derived:
- * they are what *chooses* the element when `as` is absent (an `<a>` with an
- * `href`, a `<figure>` without one), so they have to be accepted before `as` is
- * known.
+ * `href`, `target` and `rel` are Avatar's own props only for a target that has
+ * none of its own: `<Avatar href="/x" />` needs no `as`, while
+ * `<Avatar as={NextLink} />` takes `next/link`'s `href` — required, and a URL
+ * object as readily as a string.
  *
  * The type parameter defaults to `'figure'`, not to `React.ElementType`.
  * Defaulting to the constraint sounds truer to a runtime default that is
@@ -70,7 +79,7 @@ export interface AvatarOwnProps extends Omit<BulmaClassesProps, 'color'> {
  *
  * @extraProp {PolymorphicRef<React.ElementType>} [ref] - Ref forwarded to the element `as` renders, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.
  */
-export type AvatarProps<T extends React.ElementType = 'figure'> = AvatarOwnProps & Omit<React.ComponentPropsWithoutRef<T>, keyof AvatarOwnProps | 'as'> & {
+export type AvatarProps<T extends React.ElementType = 'figure'> = Omit<AvatarOwnProps, Extract<AvatarForwardedProp, keyof React.ComponentPropsWithoutRef<T>>> & Omit<React.ComponentPropsWithoutRef<T>, Exclude<keyof AvatarOwnProps, AvatarForwardedProp> | 'as'> & {
     /** Element/component to render as. Defaults to `'a'` when `href` is set, else `'figure'`. */
     as?: T;
 };
@@ -87,5 +96,5 @@ export type AvatarProps<T extends React.ElementType = 'figure'> = AvatarOwnProps
  * @example
  * <Avatar name="Grace Hopper" />
  */
-export declare const Avatar: PolymorphicComponent<AvatarOwnProps, "figure">;
+export declare const Avatar: PolymorphicComponent<AvatarOwnProps, "figure", AvatarForwardedProp>;
 export default Avatar;

package/dist/types-cjs/components/Avatars.d.ts

@@ -25,6 +25,6 @@ export interface AvatarsProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     children?: React.ReactNode;
 }
 export declare const Avatars: React.FC<AvatarsProps> & {
-    Avatar: import("../index.js").PolymorphicComponent<import("./Avatar.js").AvatarOwnProps, "figure">;
+    Avatar: import("../index.js").PolymorphicComponent<import("./Avatar.js").AvatarOwnProps, "figure", "rel" | "href" | "target">;
 };
 export default Avatars;

package/dist/types-cjs/components/Dropdown.d.ts

@@ -98,7 +98,7 @@ export declare const DropdownItem: ConstrainedPolymorphicComponentWithoutRef<Dro
 export declare const DropdownDivider: React.FC;
 /** Bulma Dropdown component with Item and Divider sub-components. */
 export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>> & {
-    Item: ConstrainedPolymorphicComponentWithoutRef<DropdownItemOwnProps, DropdownItemElement, "a">;
+    Item: ConstrainedPolymorphicComponentWithoutRef<DropdownItemOwnProps, DropdownItemElement, "a", never>;
     Divider: React.FC<{}>;
 };
 export default Dropdown;

package/dist/types-cjs/components/Menu.d.ts

@@ -95,6 +95,6 @@ export declare const MenuItem: PolymorphicComponent<MenuItemOwnProps, "a">;
 export declare const Menu: React.FC<MenuProps> & {
     Label: React.FC<MenuLabelProps>;
     List: React.FC<MenuListProps>;
-    Item: PolymorphicComponent<MenuItemOwnProps, "a">;
+    Item: PolymorphicComponent<MenuItemOwnProps, "a", never>;
 };
 export default Menu;

package/dist/types-cjs/components/Navbar.d.ts

@@ -289,8 +289,8 @@ export declare const NavbarDropdownMenu: React.FC<NavbarDropdownMenuProps>;
 export declare const NavbarDivider: React.FC<React.HTMLAttributes<HTMLHRElement>>;
 export declare const Navbar: React.ForwardRefExoticComponent<NavbarProps & React.RefAttributes<HTMLElement>> & {
     Brand: React.FC<NavbarBrandProps>;
-    Item: PolymorphicComponent<NavbarItemOwnProps, "a">;
-    Link: PolymorphicComponent<NavbarLinkOwnProps, "a">;
+    Item: PolymorphicComponent<NavbarItemOwnProps, "a", never>;
+    Link: PolymorphicComponent<NavbarLinkOwnProps, "a", never>;
     Burger: React.ForwardRefExoticComponent<NavbarBurgerProps & React.RefAttributes<HTMLButtonElement>>;
     Menu: React.FC<NavbarMenuProps>;
     Start: React.FC<NavbarStartEndProps>;

package/dist/types-cjs/elements/Buttons.d.ts

@@ -34,7 +34,7 @@ interface ButtonsProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaC
     children: React.ReactNode;
 }
 export declare const Buttons: React.FC<ButtonsProps> & {
-    Button: import("../index.js").PolymorphicComponent<import("./Button.js").ButtonOwnProps, "button">;
-    LinkButton: import("../index.js").PolymorphicComponent<import("./LinkButton.js").LinkButtonOwnProps, "button">;
+    Button: import("../index.js").PolymorphicComponent<import("./Button.js").ButtonOwnProps, "button", never>;
+    LinkButton: import("../index.js").PolymorphicComponent<import("./LinkButton.js").LinkButtonOwnProps, "button", never>;
 };
 export {};

package/dist/types-cjs/helpers/polymorphic.d.ts

@@ -29,14 +29,44 @@ export type PolymorphicRef<T extends React.ElementType> = 'ref' extends keyof Re
 /**
  * A component's own props, plus the attributes of the element `as` names.
  *
- * `Own` wins every collision — a component that declares `color` as a Bulma
- * variant keeps it, rather than inheriting the DOM attribute of the same name.
- * That subtraction is the ONLY one. `color` used to be dropped here as well, to
- * stop the deprecated presentational HTML attribute reaching the three
- * components whose own props do not declare one — but doing it in the shared
- * type also stripped `color` from a CUSTOM target that legitimately has one.
- * Those three declare `color?: never` themselves instead, which lands in
- * `keyof Own` and reaches the same result without a special case here.
+ * `Own` wins a collision by default — a component that declares
+ * `color` as a Bulma variant keeps it, rather than inheriting the DOM attribute
+ * of the same name. `color` used to be dropped here as well, to stop the
+ * deprecated presentational HTML attribute reaching the components whose own
+ * props do not declare one — but doing it in the shared type also stripped
+ * `color` from a CUSTOM target that legitimately has one. Those components
+ * declare `color?: never` themselves instead, which lands in `keyof Own` and
+ * reaches the same result without a special case here.
+ *
+ * `Forwarded` names the own props the component hands STRAIGHT to the target
+ * instead of consuming, and the subtraction runs the other way for them: the
+ * TARGET's declaration wins, and the own one is what covers a target that has
+ * no such prop. Subtracting them threw the target's declaration away, so an
+ * OPTIONAL own prop hid a REQUIRED one — `<Avatar as={NextLink} name="Ada" />`
+ * compiled because Avatar's `href?: string` survived while `next/link`'s
+ * required `href` was omitted, and the target threw on what it never received
+ * (#665). The target wins rather than both declarations applying at once,
+ * because for a prop the component only passes along its own type has no
+ * standing: `next/link` accepts a URL object as well as a string, and
+ * intersecting Avatar's `string` with that would refuse the object.
+ *
+ * `Forwarded` defaults to `never`, so a prop the component CONSUMES stays
+ * subtracted — the common case, and the one `color` needs. What that costs is
+ * that a target REQUIRING a consumed prop is still satisfiable with the prop
+ * omitted, and the value goes wherever the component sends it: `Menu.Item`
+ * spends several of its own props on its wrapping `<li>`, `title` and `style`
+ * among them, so a target requiring one of those never sees it. Erroring on
+ * that needs a category this pair cannot express, since `className` is consumed
+ * too and yet every component composes one and passes it on. It is pinned as a
+ * limitation in `__typetests__/polymorphic.tsx` rather than guessed at here.
+ *
+ * `Own` is returned untouched when nothing is forwarded, rather than run through
+ * an `Omit` that names no keys. `Omit` is not the identity it looks like: it
+ * keys off `keyof Own`, which for a UNION `Own` is only what the members share,
+ * so `PolymorphicProps<'div', A | B>` lost every prop of both. It is public API
+ * and a consumer's wrapper can pass a union; the untouched branch also keeps
+ * each own prop's TSDoc reaching an IDE, which a mapped type drops. The
+ * forwarded branch distributes over `Own` for the same reason.
  *
  * Distributive over `T` on purpose. `Omit<A | B, K>` keys off `keyof (A | B)`,
  * which is only what A and B share — so a union-typed `as` (a ternary, or a
@@ -51,7 +81,7 @@ export type PolymorphicRef<T extends React.ElementType> = 'ref' extends keyof Re
  * This type is here for the component's cast target and for consumers writing
  * wrappers.
  */
-export type PolymorphicProps<T extends React.ElementType, Own> = T extends unknown ? Own & Omit<React.ComponentPropsWithoutRef<T>, keyof Own | 'as'> & {
+export type PolymorphicProps<T extends React.ElementType, Own, Forwarded extends keyof Own = never> = T extends unknown ? ([Forwarded] extends [never] ? Own : Own extends unknown ? Omit<Own, Extract<Forwarded, keyof React.ComponentPropsWithoutRef<T>>> : never) & Omit<React.ComponentPropsWithoutRef<T>, Exclude<keyof Own, Forwarded> | 'as'> & {
     /** The element or component to render. */
     as?: T;
 } : never;
@@ -86,11 +116,11 @@ export type PolymorphicProps<T extends React.ElementType, Own> = T extends unkno
  * const MemoButton = React.memo(Button) as typeof Button;
  * ```
  */
-export interface PolymorphicComponent<Own, Default extends React.ElementType> {
-    <T extends React.ElementType = Default>(props: PolymorphicProps<T, Own> & {
+export interface PolymorphicComponent<Own, Default extends React.ElementType, Forwarded extends keyof Own = never> {
+    <T extends React.ElementType = Default>(props: PolymorphicProps<T, Own, Forwarded> & {
         ref?: PolymorphicRef<T>;
     }): React.ReactElement | null;
-    (props: PolymorphicProps<Default, Own> & {
+    (props: PolymorphicProps<Default, Own, Forwarded> & {
         ref?: PolymorphicRef<Default>;
     }): React.ReactElement | null;
     displayName?: string;
@@ -101,10 +131,14 @@ export interface PolymorphicComponent<Own, Default extends React.ElementType> {
  * For components that own the node they observe — `Reveal` keeps its own ref on
  * the element it watches for scroll intersection, which is not always the
  * element `as` names.
+ *
+ * It carries `Forwarded` even with no component passing one today: the default
+ * is the behaviour without it, and a component that grows a forwarded own prop
+ * would otherwise reintroduce #665 here with nothing to say so.
  */
-export interface PolymorphicComponentWithoutRef<Own, Default extends React.ElementType> {
-    <T extends React.ElementType = Default>(props: PolymorphicProps<T, Own>): React.ReactElement | null;
-    (props: PolymorphicProps<Default, Own>): React.ReactElement | null;
+export interface PolymorphicComponentWithoutRef<Own, Default extends React.ElementType, Forwarded extends keyof Own = never> {
+    <T extends React.ElementType = Default>(props: PolymorphicProps<T, Own, Forwarded>): React.ReactElement | null;
+    (props: PolymorphicProps<Default, Own, Forwarded>): React.ReactElement | null;
     displayName?: string;
 }
 /**
@@ -131,8 +165,8 @@ export interface PolymorphicComponentWithoutRef<Own, Default extends React.Eleme
  * than losing every prop the members do not share. Narrowing it is not a
  * constrained-component question; it would have to change for `Button` first.
  */
-export interface ConstrainedPolymorphicComponentWithoutRef<Own, Allowed extends React.ElementType, Default extends Allowed> {
-    <T extends Allowed = Default>(props: PolymorphicProps<T, Own>): React.ReactElement | null;
-    (props: PolymorphicProps<Default, Own>): React.ReactElement | null;
+export interface ConstrainedPolymorphicComponentWithoutRef<Own, Allowed extends React.ElementType, Default extends Allowed, Forwarded extends keyof Own = never> {
+    <T extends Allowed = Default>(props: PolymorphicProps<T, Own, Forwarded>): React.ReactElement | null;
+    (props: PolymorphicProps<Default, Own, Forwarded>): React.ReactElement | null;
     displayName?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allxsmith/bestax-bulma",
-  "version": "5.16.6",
+  "version": "5.16.8",
   "description": "A fully-typed React component library for the Bulma CSS framework. Build modern UIs quickly with reusable, accessible, and customizable Bulma-based React components.",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",
@@ -224,5 +224,5 @@
     "test-storybook:dark": "STORYBOOK_THEME=dark test-storybook",
     "test-storybook:ci": "node scripts/test-storybook-ci.mjs"
   },
-  "readme": "# @allxsmith/bestax-bulma\n\n[![npm version](https://img.shields.io/npm/v/@allxsmith/bestax-bulma.svg)](https://www.npmjs.com/package/@allxsmith/bestax-bulma)\n[![npm downloads](https://img.shields.io/npm/dm/@allxsmith/bestax-bulma.svg)](https://www.npmjs.com/package/@allxsmith/bestax-bulma)\n[![bundle size](https://img.shields.io/bundlephobia/minzip/@allxsmith/bestax-bulma.svg)](https://bundlephobia.com/package/@allxsmith/bestax-bulma)\n[![TypeScript](https://img.shields.io/badge/TypeScript-100%25-blue.svg)](https://www.typescriptlang.org/)\n[![Coverage](https://img.shields.io/badge/coverage-99%25-brightgreen.svg)](https://github.com/allxsmith/bestax/blob/main/bulma-ui/jest.config.js)\n[![Bulma](https://img.shields.io/badge/Bulma-v1.0+-00d1b2.svg)](https://bulma.io)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Socket Badge](https://socket.dev/api/badge/npm/package/@allxsmith/bestax-bulma)](https://socket.dev/npm/package/@allxsmith/bestax-bulma/overview)\n[![OpenSSF Scorecard](https://api.scorecard.dev/projects/github.com/allxsmith/bestax/badge)](https://scorecard.dev/viewer/?uri=github.com/allxsmith/bestax)\n[![OpenSSF Best Practices](https://www.bestpractices.dev/projects/14361/badge)](https://www.bestpractices.dev/projects/14361)\n[![npm provenance](https://img.shields.io/badge/npm-provenance-3fb950.svg)](https://www.npmjs.com/package/@allxsmith/bestax-bulma#provenance)\n[![Security policy](https://img.shields.io/badge/security-policy-blue.svg)](https://github.com/allxsmith/bestax/blob/main/SECURITY.md)\n\nTypeScript-first React component library for the **Bulma v1** CSS framework — 80+ fully typed, tree-shakeable components, including extras like Carousel, Dialog, Sidebar, Steps, and date/time pickers.\n\n**Requires React `^18 || ^19`.** Bulma v1 is the only runtime dependency and installs automatically.\n\nPart of the [bestax monorepo](https://github.com/allxsmith/bestax) — see also [`create-bestax`](https://www.npmjs.com/package/create-bestax) for scaffolding new projects.\n\n---\n\n## 📚 Comprehensive Documentation\n\n**Looking for full documentation, guides, API references, and best practices?**  \n👉 **Visit our official docs at [https://bestax.io](https://bestax.io)**\n\n> The documentation site is the best place to learn about all bestax-bulma features, usage patterns, and updates. We strongly recommend using the docs as your primary resource!\n\n---\n\n## 🚀 Getting Started\n\nStarting fresh? Scaffold a ready-to-go app instead: `npm create bestax@latest my-app`.\n\n### 1. Install the package\n\n```bash\nnpm install @allxsmith/bestax-bulma\n# or\npnpm add @allxsmith/bestax-bulma\n```\n\n### 2. Import the CSS\n\nThe library bundles its own CSS (Bulma v1 + the bestax extras). Import it once in your main JS/TS file:\n\n```js\nimport '@allxsmith/bestax-bulma/bestax.css';\n```\n\nPrefer stock Bulma? That works too — add `extras.css` for the bestax-only components' styles:\n\n```js\nimport 'bulma/css/bulma.min.css';\nimport '@allxsmith/bestax-bulma/extras.css';\n```\n\nMore flavors are shipped as subpath exports — prefixed classes (`versions/bestax-prefixed.css` + `<ConfigProvider classPrefix=\"bestax-\">`), no-helpers, no-dark-mode, and raw SCSS at `@allxsmith/bestax-bulma/scss/*`. See the [installation guide](https://bestax.io/docs/guides/getting-started/installation).\n\n### 3. (Optional) Add an Icon Library\n\nFive icon libraries are supported as optional peer dependencies: [Font Awesome](https://fontawesome.com/) (`@fortawesome/fontawesome-free`), Material Design Icons (`@mdi/font`), `ionicons`, `material-icons`, and `material-symbols`.\n\n```bash\nnpm install @fortawesome/fontawesome-free\n```\n\nSet the default for your whole app with [`ConfigProvider`](https://bestax.io/docs/api/helpers/config), e.g. `<ConfigProvider iconLibrary=\"fa\">`.\n\n### 4. Quick Example\n\n```tsx\nimport '@allxsmith/bestax-bulma/bestax.css';\nimport { Button } from '@allxsmith/bestax-bulma';\n\nfunction App() {\n  return (\n    <Button color=\"primary\" onClick={() => alert('Clicked!')}>\n      Click Me\n    </Button>\n  );\n}\n\nexport default App;\n```\n\n### 5. Theming and Dark Mode\n\nWrap your app in [`Theme`](https://bestax.io/docs/api/helpers/theme) to override Bulma's `--bulma-*` CSS variables and control the color scheme:\n\n```tsx\nimport { Theme } from '@allxsmith/bestax-bulma';\n\n<Theme isRoot colorMode=\"system\">\n  {/* colorMode: 'light' | 'dark' | 'system' */}\n  <App />\n</Theme>;\n```\n\n---\n\n## ⭐ Why Choose bestax-bulma?\n\n- **Supports the latest Bulma v1.x**\n  Other React Bulma libraries are stuck on Bulma 0.9.4 — bestax-bulma is built for the future.\n- **80+ components**\n  All of Bulma v1, plus extras: Carousel, Dialog, Sidebar, Steps, Autocomplete, Taginput, DateInput/TimeInput/DateTimeInput pickers, and more. (Migrating from v2? Snackbar merged into [Toast](https://bestax.io/docs/api/components/toast).)\n- **Dark mode & theming built in**\n  `Theme colorMode`, `--bulma-*` variable overrides, and prefixed-class builds via `ConfigProvider`.\n- **Just one dependency: Bulma**\n  Every Bulma library depends on it — we ship it automatically. Clean install, fewer security concerns.\n- **Tree-shakeable ESM + CJS**\n  Import only what you use — see the live [bundle size](https://bundlephobia.com/package/@allxsmith/bestax-bulma).\n- **99% unit test coverage**\n  Enforced in CI by the [jest config](https://github.com/allxsmith/bestax/blob/main/bulma-ui/jest.config.js) — not just claimed.\n- **100% TypeScript**\n  Full type safety for you and your team.\n- **Active developer support**\n  Issues? Questions? PRs? Get fast responses and real improvements.\n\n---\n\n## 📦 NPM Package\n\nView the package on npmjs:  \n👉 [https://www.npmjs.com/package/@allxsmith/bestax-bulma](https://www.npmjs.com/package/@allxsmith/bestax-bulma)\n\n---\n\n## 🔒 Hardened by default\n\nThis package is one runtime dependency deep (Bulma) and is published under a deliberately strict pipeline:\n\n- **Signed provenance** — every release carries a sigstore attestation linking the tarball to the exact commit and CI run that built it. Verify it in the **Provenance** section of the [npm page](https://www.npmjs.com/package/@allxsmith/bestax-bulma#provenance), or run `npm audit signatures` in your project.\n- **npm OIDC trusted publishing** — short-lived, per-run credentials; no long-lived `NPM_TOKEN` exists to be stolen. Release commits and tags are GPG-signed.\n- **Socket.dev scans every PR** for malware, install scripts, obfuscated code, and privilege escalation before it can reach `main`.\n- **Dependencies are a deliberate act** — install scripts are blocked unless individually allow-listed, freshly published versions are refused for 3 days, and CI installs only what the reviewed lockfile resolves.\n- **Every GitHub Action is pinned to a full commit SHA**, so a compromised action release can't roll silently into a build of this package.\n- **CodeQL, Dependency Review, and Dependabot** run continuously, alongside a high-severity `pnpm audit` gate.\n- **Layered AI review before merge** — [CodeRabbit](https://coderabbit.ai) plus an independent adversarial Claude review (a different model from the one writing AI-authored changes), on top of required green CI, an approving review, and a human merge.\n\nFull detail: [`SECURITY.md`](https://github.com/allxsmith/bestax/blob/main/SECURITY.md) · [Security guide](https://bestax.io/docs/guides/security)\n\n---\n\n## 📚 Documentation\n\n**For full documentation, guides, and best practices, please use our official docs site:**\n\n👉 [https://bestax.io](https://bestax.io)\n\n> **Always refer to the [documentation site](https://bestax.io) first:**  \n> It's the most complete and up-to-date source for everything bestax-bulma!\n\n---\n\n## 📖 Storybook\n\nExplore live, interactive component examples in our Storybook:\n\n👉 [https://bestax.io/storybook](https://bestax.io/storybook)\n\n---\n\n## 🤖 For AI Tools\n\nBuilding with an AI agent (Claude Code, Cursor, Copilot)? bestax-bulma ships LLM-optimized docs:\n\n- 📘 **[LLMs guide](https://bestax.io/docs/guides/llms)** — how to use the library with AI tools\n- 📄 **[llms.txt](https://bestax.io/llms.txt)** — curated index · **[llms-full.txt](https://bestax.io/llms-full.txt)** — the full docs in one file · every docs page is also served as raw markdown\n- 📦 **In the npm package** — the tarball ships `llms.txt`, `AGENTS.md`, and `CLAUDE.md` pointer files, so agents exploring `node_modules` land on these resources by filename\n- 🧩 **[Agent Skills](https://bestax.io/docs/skills/intro)** — teach your agent the bestax way:\n\n  | Skill                     | Use it when…                                                                     |\n  | ------------------------- | -------------------------------------------------------------------------------- |\n  | `bestax-layout-scaffold`  | Turning a high-level request (dashboard, landing page, …) into a responsive page |\n  | `bestax-form`             | Building forms — Field/Control composition and the full input inventory          |\n  | `bestax-theming`          | Customizing colors, fonts, dark mode via `Theme` and `--bulma-*` variables       |\n  | `bestax-custom-component` | Building a new custom component beyond stock Bulma, the bestax way               |\n  | `bestax-icons`            | Adding icons — Icon/IconText and the five supported icon libraries               |\n  | `bestax-optimize`         | Shrinking the built CSS — flavor builds, modular Sass, import hygiene            |\n  | `bestax-migrate`          | Moving an app off react-bulma-components (v4) onto bestax-bulma                  |\n\n  ```bash\n  npx skills add https://github.com/allxsmith/bestax --skill bestax-layout-scaffold\n  ```\n\n  New projects get the skills automatically with `npm create bestax@latest my-app --skills` (plus a generated `CLAUDE.md`).\n\n---\n\n## 🙏 Attribution\n\nbestax-bulma is built on top of the incredible [Bulma](https://bulma.io) CSS framework,\n© [Jeremy Thomas](https://github.com/jgthms) and licensed under the\n[MIT License](https://github.com/jgthms/bulma/blob/main/LICENSE). Some example content and\ndocumentation is adapted from the Bulma website\n([CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)), © Jeremy Thomas.\n\nIf you find Bulma useful, please consider\n[sponsoring Jeremy Thomas](https://github.com/sponsors/jgthms) to support its continued\ndevelopment.\n\n_We are not affiliated with Bulma or Jeremy Thomas in any way — we're just big fans of the\nBulma framework!_\n\n## License\n\nSource code licensed MIT\n"
+  "readme": "# @allxsmith/bestax-bulma\n\n[![npm version](https://img.shields.io/npm/v/@allxsmith/bestax-bulma.svg)](https://www.npmjs.com/package/@allxsmith/bestax-bulma)\n[![npm downloads](https://img.shields.io/npm/dm/@allxsmith/bestax-bulma.svg)](https://www.npmjs.com/package/@allxsmith/bestax-bulma)\n[![bundle size](https://img.shields.io/bundlephobia/minzip/@allxsmith/bestax-bulma.svg)](https://bundlephobia.com/package/@allxsmith/bestax-bulma)\n[![TypeScript](https://img.shields.io/badge/TypeScript-100%25-blue.svg)](https://www.typescriptlang.org/)\n[![Coverage](https://img.shields.io/badge/coverage-99%25-brightgreen.svg)](https://github.com/allxsmith/bestax/blob/main/bulma-ui/jest.config.js)\n[![Bulma](https://img.shields.io/badge/Bulma-v1.0+-00d1b2.svg)](https://bulma.io)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Socket Badge](https://badge.socket.dev/npm/package/@allxsmith/bestax-bulma/latest)](https://socket.dev/npm/package/@allxsmith/bestax-bulma/overview)\n[![OpenSSF Scorecard](https://api.scorecard.dev/projects/github.com/allxsmith/bestax/badge)](https://scorecard.dev/viewer/?uri=github.com/allxsmith/bestax)\n[![OpenSSF Best Practices](https://www.bestpractices.dev/projects/14361/badge)](https://www.bestpractices.dev/projects/14361)\n[![npm provenance](https://img.shields.io/badge/npm-provenance-3fb950.svg)](https://www.npmjs.com/package/@allxsmith/bestax-bulma#provenance)\n[![Security policy](https://img.shields.io/badge/security-policy-blue.svg)](https://github.com/allxsmith/bestax/blob/main/SECURITY.md)\n\nTypeScript-first React component library for the **Bulma v1** CSS framework — 80+ fully typed, tree-shakeable components, including extras like Carousel, Dialog, Sidebar, Steps, and date/time pickers.\n\n**Requires React `^18 || ^19`.** Bulma v1 is the only runtime dependency and installs automatically.\n\nPart of the [bestax monorepo](https://github.com/allxsmith/bestax) — see also [`create-bestax`](https://www.npmjs.com/package/create-bestax) for scaffolding new projects.\n\n---\n\n## 📚 Comprehensive Documentation\n\n**Looking for full documentation, guides, API references, and best practices?**  \n👉 **Visit our official docs at [https://bestax.io](https://bestax.io)**\n\n> The documentation site is the best place to learn about all bestax-bulma features, usage patterns, and updates. We strongly recommend using the docs as your primary resource!\n\n---\n\n## 🚀 Getting Started\n\nStarting fresh? Scaffold a ready-to-go app instead: `npm create bestax@latest my-app`.\n\n### 1. Install the package\n\n```bash\nnpm install @allxsmith/bestax-bulma\n# or\npnpm add @allxsmith/bestax-bulma\n```\n\n### 2. Import the CSS\n\nThe library bundles its own CSS (Bulma v1 + the bestax extras). Import it once in your main JS/TS file:\n\n```js\nimport '@allxsmith/bestax-bulma/bestax.css';\n```\n\nPrefer stock Bulma? That works too — add `extras.css` for the bestax-only components' styles:\n\n```js\nimport 'bulma/css/bulma.min.css';\nimport '@allxsmith/bestax-bulma/extras.css';\n```\n\nMore flavors are shipped as subpath exports — prefixed classes (`versions/bestax-prefixed.css` + `<ConfigProvider classPrefix=\"bestax-\">`), no-helpers, no-dark-mode, and raw SCSS at `@allxsmith/bestax-bulma/scss/*`. See the [installation guide](https://bestax.io/docs/guides/getting-started/installation).\n\n### 3. (Optional) Add an Icon Library\n\nFive icon libraries are supported as optional peer dependencies: [Font Awesome](https://fontawesome.com/) (`@fortawesome/fontawesome-free`), Material Design Icons (`@mdi/font`), `ionicons`, `material-icons`, and `material-symbols`.\n\n```bash\nnpm install @fortawesome/fontawesome-free\n```\n\nSet the default for your whole app with [`ConfigProvider`](https://bestax.io/docs/api/helpers/config), e.g. `<ConfigProvider iconLibrary=\"fa\">`.\n\n### 4. Quick Example\n\n```tsx\nimport '@allxsmith/bestax-bulma/bestax.css';\nimport { Button } from '@allxsmith/bestax-bulma';\n\nfunction App() {\n  return (\n    <Button color=\"primary\" onClick={() => alert('Clicked!')}>\n      Click Me\n    </Button>\n  );\n}\n\nexport default App;\n```\n\n### 5. Theming and Dark Mode\n\nWrap your app in [`Theme`](https://bestax.io/docs/api/helpers/theme) to override Bulma's `--bulma-*` CSS variables and control the color scheme:\n\n```tsx\nimport { Theme } from '@allxsmith/bestax-bulma';\n\n<Theme isRoot colorMode=\"system\">\n  {/* colorMode: 'light' | 'dark' | 'system' */}\n  <App />\n</Theme>;\n```\n\n---\n\n## ⭐ Why Choose bestax-bulma?\n\n- **Supports the latest Bulma v1.x**\n  Other React Bulma libraries are stuck on Bulma 0.9.4 — bestax-bulma is built for the future.\n- **80+ components**\n  All of Bulma v1, plus extras: Carousel, Dialog, Sidebar, Steps, Autocomplete, Taginput, DateInput/TimeInput/DateTimeInput pickers, and more. (Migrating from v2? Snackbar merged into [Toast](https://bestax.io/docs/api/components/toast).)\n- **Dark mode & theming built in**\n  `Theme colorMode`, `--bulma-*` variable overrides, and prefixed-class builds via `ConfigProvider`.\n- **Just one dependency: Bulma**\n  Every Bulma library depends on it — we ship it automatically. Clean install, fewer security concerns.\n- **Tree-shakeable ESM + CJS**\n  Import only what you use — see the live [bundle size](https://bundlephobia.com/package/@allxsmith/bestax-bulma).\n- **99% unit test coverage**\n  Enforced in CI by the [jest config](https://github.com/allxsmith/bestax/blob/main/bulma-ui/jest.config.js) — not just claimed.\n- **100% TypeScript**\n  Full type safety for you and your team.\n- **Active developer support**\n  Issues? Questions? PRs? Get fast responses and real improvements.\n\n---\n\n## 📦 NPM Package\n\nView the package on npmjs:  \n👉 [https://www.npmjs.com/package/@allxsmith/bestax-bulma](https://www.npmjs.com/package/@allxsmith/bestax-bulma)\n\n---\n\n## 🔒 Hardened by default\n\nThis package is one runtime dependency deep (Bulma) and is published under a deliberately strict pipeline:\n\n- **Signed provenance** — every release carries a sigstore attestation linking the tarball to the exact commit and CI run that built it. Verify it in the **Provenance** section of the [npm page](https://www.npmjs.com/package/@allxsmith/bestax-bulma#provenance), or run `npm audit signatures` in your project.\n- **npm OIDC trusted publishing** — short-lived, per-run credentials; no long-lived `NPM_TOKEN` exists to be stolen. Release commits and tags are GPG-signed.\n- **Socket.dev scans every PR** for malware, install scripts, obfuscated code, and privilege escalation before it can reach `main`.\n- **Dependencies are a deliberate act** — install scripts are blocked unless individually allow-listed, freshly published versions are refused for 3 days, and CI installs only what the reviewed lockfile resolves.\n- **Every GitHub Action is pinned to a full commit SHA**, so a compromised action release can't roll silently into a build of this package.\n- **CodeQL, Dependency Review, and Dependabot** run continuously, alongside a high-severity `pnpm audit` gate.\n- **Layered AI review before merge** — [CodeRabbit](https://coderabbit.ai) plus an independent adversarial Claude review (a different model from the one writing AI-authored changes), on top of required green CI, an approving review, and a human merge.\n\nFull detail: [`SECURITY.md`](https://github.com/allxsmith/bestax/blob/main/SECURITY.md) · [Security guide](https://bestax.io/docs/guides/security)\n\n---\n\n## 📚 Documentation\n\n**For full documentation, guides, and best practices, please use our official docs site:**\n\n👉 [https://bestax.io](https://bestax.io)\n\n> **Always refer to the [documentation site](https://bestax.io) first:**  \n> It's the most complete and up-to-date source for everything bestax-bulma!\n\n---\n\n## 📖 Storybook\n\nExplore live, interactive component examples in our Storybook:\n\n👉 [https://bestax.io/storybook](https://bestax.io/storybook)\n\n---\n\n## 🤖 For AI Tools\n\nBuilding with an AI agent (Claude Code, Cursor, Copilot)? bestax-bulma ships LLM-optimized docs:\n\n- 📘 **[LLMs guide](https://bestax.io/docs/guides/llms)** — how to use the library with AI tools\n- 📄 **[llms.txt](https://bestax.io/llms.txt)** — curated index · **[llms-full.txt](https://bestax.io/llms-full.txt)** — the full docs in one file · every docs page is also served as raw markdown\n- 📦 **In the npm package** — the tarball ships `llms.txt`, `AGENTS.md`, and `CLAUDE.md` pointer files, so agents exploring `node_modules` land on these resources by filename\n- 🧩 **[Agent Skills](https://bestax.io/docs/skills/intro)** — teach your agent the bestax way:\n\n  | Skill                     | Use it when…                                                                     |\n  | ------------------------- | -------------------------------------------------------------------------------- |\n  | `bestax-layout-scaffold`  | Turning a high-level request (dashboard, landing page, …) into a responsive page |\n  | `bestax-form`             | Building forms — Field/Control composition and the full input inventory          |\n  | `bestax-theming`          | Customizing colors, fonts, dark mode via `Theme` and `--bulma-*` variables       |\n  | `bestax-custom-component` | Building a new custom component beyond stock Bulma, the bestax way               |\n  | `bestax-icons`            | Adding icons — Icon/IconText and the five supported icon libraries               |\n  | `bestax-optimize`         | Shrinking the built CSS — flavor builds, modular Sass, import hygiene            |\n  | `bestax-migrate`          | Moving an app off react-bulma-components (v4) onto bestax-bulma                  |\n\n  ```bash\n  npx skills add https://github.com/allxsmith/bestax --skill bestax-layout-scaffold\n  ```\n\n  New projects get the skills automatically with `npm create bestax@latest my-app --skills` (plus a generated `CLAUDE.md`).\n\n---\n\n## 🙏 Attribution\n\nbestax-bulma is built on top of the incredible [Bulma](https://bulma.io) CSS framework,\n© [Jeremy Thomas](https://github.com/jgthms) and licensed under the\n[MIT License](https://github.com/jgthms/bulma/blob/main/LICENSE). Some example content and\ndocumentation is adapted from the Bulma website\n([CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)), © Jeremy Thomas.\n\nIf you find Bulma useful, please consider\n[sponsoring Jeremy Thomas](https://github.com/sponsors/jgthms) to support its continued\ndevelopment.\n\n_We are not affiliated with Bulma or Jeremy Thomas in any way — we're just big fans of the\nBulma framework!_\n\n## License\n\nSource code licensed MIT\n"
 }