@dnanpm/ui-components 0.5.0 → 0.7.0

package/README.md

@@ -45,7 +45,9 @@ function App() {
 
 ## Implementation Model
 
-Components are written as plain React function components with CSS Modules and BEM naming. Design tokens are available as CSS custom properties: `var(--color-semantic-foreground-default)`, `var(--spacing-ui-md)`, etc.
+Components are written as plain React function components with CSS Modules and BEM naming. Design tokens are available as CSS custom properties: `var(--color-semantic-foreground-default)`, `var(--spacing-space-16)`, etc.
+
+Typography is applied through the font shorthand presets from `@dnanpm/design-tokens` — `font: var(--typography-body-md)` — rather than by setting `font-family` and friends individually. `@dnanpm/ui-components/styles.css` includes those presets, so no extra import is needed.
 
 ### Tree-shaking
 

package/dist/components/Accordion/Accordion.css

@@ -4,16 +4,16 @@
  * Layout wrapper that spaces AccordionItem children evenly.
  */
 
-._accordion_oi7d7_7 {
+._accordion_18qm2_7 {
     display: flex;
     flex-direction: column;
 }
 
-._accordion--box_oi7d7_12 {
-    gap: var(--spacing-ui-md);
+._accordion--box_18qm2_12 {
+    gap: var(--spacing-space-16);
 }
 
-._accordion--panel_oi7d7_16 {
+._accordion--panel_18qm2_16 {
     gap: 0;
 }
 }

package/dist/components/Accordion/Accordion.module.css.cjs

@@ -1,11 +1,11 @@
 require('./Accordion.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const accordion = "_accordion_oi7d7_7";
+const accordion = "_accordion_18qm2_7";
 const styles = {
   accordion,
-  "accordion--box": "_accordion--box_oi7d7_12",
-  "accordion--panel": "_accordion--panel_oi7d7_16"
+  "accordion--box": "_accordion--box_18qm2_12",
+  "accordion--panel": "_accordion--panel_18qm2_16"
 };
 exports.accordion = accordion;
 exports.default = styles;

package/dist/components/Accordion/Accordion.module.css.js

@@ -1,9 +1,9 @@
 import './Accordion.css';
-const accordion = "_accordion_oi7d7_7";
+const accordion = "_accordion_18qm2_7";
 const styles = {
   accordion,
-  "accordion--box": "_accordion--box_oi7d7_12",
-  "accordion--panel": "_accordion--panel_oi7d7_16"
+  "accordion--box": "_accordion--box_18qm2_12",
+  "accordion--panel": "_accordion--panel_18qm2_16"
 };
 export {
   accordion,

package/dist/components/AccordionItem/AccordionItem.css

@@ -7,7 +7,7 @@
 
 /* === Box variant === */
 
-._accordion-item--box_8bxcn_10 {
+._accordion-item--box_koqlc_10 {
     background: var(--color-semantic-surface-base);
     color: var(--color-semantic-foreground-default);
 }
@@ -15,17 +15,17 @@
 /* === Panel variant === */
 /* Inherits text color from parent context intentionally */
 
-._accordion-item--panel_8bxcn_18 {
+._accordion-item--panel_koqlc_18 {
     border-bottom: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-mid);
 }
 
 /* === Summary (clickable header) === */
 
-._accordion-item__summary_8bxcn_24 {
+._accordion-item__summary_koqlc_24 {
     display: flex;
     align-items: center;
-    gap: var(--spacing-ui-lg);
-    padding: var(--spacing-ui-md) var(--spacing-ui-lg);
+    gap: var(--spacing-space-20);
+    padding: var(--spacing-space-16) var(--spacing-space-20);
     cursor: pointer;
     list-style: none;
     user-select: none;
@@ -33,14 +33,14 @@
 }
 
 /* Remove default marker in all browsers */
-._accordion-item__summary_8bxcn_24::-webkit-details-marker,
-._accordion-item__summary_8bxcn_24::marker {
+._accordion-item__summary_koqlc_24::-webkit-details-marker,
+._accordion-item__summary_koqlc_24::marker {
     display: none;
 }
 
 /* === Image === */
 
-._accordion-item__image_8bxcn_43 {
+._accordion-item__image_koqlc_43 {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -57,46 +57,46 @@
 
 /* === Image size variants === */
 
-._accordion-item__image--sm_8bxcn_60 {
+._accordion-item__image--sm_koqlc_60 {
     width: 1.5rem;
     height: 1.5rem;
 }
 
-._accordion-item__image--md_8bxcn_65 {
+._accordion-item__image--md_koqlc_65 {
     width: 2.5rem;
     height: 2.5rem;
 }
 
-._accordion-item__image--lg_8bxcn_70 {
+._accordion-item__image--lg_koqlc_70 {
     width: 5rem;
     height: 5rem;
 }
 
 /* === Label === */
 
-._accordion-item__label_8bxcn_77 {
+._accordion-item__label_koqlc_77 {
     flex: 1 1 auto;
     min-width: 0;
-    font-weight: var(--typography-font-weight-bold);
+    font: var(--typography-body-md-bold);
 }
 
 /* === Chevron icon === */
 
-._accordion-item__chevron_8bxcn_85 {
+._accordion-item__chevron_koqlc_85 {
     flex: 0 0 auto;
     width: 1.5rem;
     height: 1.5rem;
     transition: transform 0.2s ease-in-out;
 }
 
-._accordion-item_8bxcn_10[open] > ._accordion-item__summary_8bxcn_24 ._accordion-item__chevron_8bxcn_85 {
+._accordion-item_koqlc_10[open] > ._accordion-item__summary_koqlc_24 ._accordion-item__chevron_koqlc_85 {
     transform: rotate(180deg);
 }
 
 /* === Content area === */
 
-._accordion-item__content_8bxcn_98 {
-    padding: 0 var(--spacing-ui-lg) var(--spacing-ui-lg);
+._accordion-item__content_koqlc_98 {
+    padding: 0 var(--spacing-space-20) var(--spacing-space-20);
 
     & > *:last-child {
         margin-bottom: 0;
@@ -104,7 +104,7 @@
 }
 
 /* === Animation === */
-._accordion-item_8bxcn_10::details-content {
+._accordion-item_koqlc_10::details-content {
     display: block;
     block-size: 0;
     opacity: 0;
@@ -116,7 +116,7 @@
         transition-behavior: allow-discrete;
     }
 }
-._accordion-item_8bxcn_10[open]::details-content {
+._accordion-item_koqlc_10[open]::details-content {
     /* Fallback for browsers that don't support calc-size() function */
     block-size: auto;
     opacity: 1;

package/dist/components/AccordionItem/AccordionItem.module.css.cjs

@@ -1,17 +1,17 @@
 require('./AccordionItem.css');
 "use strict";
 const styles = {
-  "accordion-item--box": "_accordion-item--box_8bxcn_10",
-  "accordion-item--panel": "_accordion-item--panel_8bxcn_18",
-  "accordion-item__summary": "_accordion-item__summary_8bxcn_24",
-  "accordion-item__image": "_accordion-item__image_8bxcn_43",
-  "accordion-item__image--sm": "_accordion-item__image--sm_8bxcn_60",
-  "accordion-item__image--md": "_accordion-item__image--md_8bxcn_65",
-  "accordion-item__image--lg": "_accordion-item__image--lg_8bxcn_70",
-  "accordion-item__label": "_accordion-item__label_8bxcn_77",
-  "accordion-item__chevron": "_accordion-item__chevron_8bxcn_85",
-  "accordion-item": "_accordion-item_8bxcn_10",
-  "accordion-item__content": "_accordion-item__content_8bxcn_98"
+  "accordion-item--box": "_accordion-item--box_koqlc_10",
+  "accordion-item--panel": "_accordion-item--panel_koqlc_18",
+  "accordion-item__summary": "_accordion-item__summary_koqlc_24",
+  "accordion-item__image": "_accordion-item__image_koqlc_43",
+  "accordion-item__image--sm": "_accordion-item__image--sm_koqlc_60",
+  "accordion-item__image--md": "_accordion-item__image--md_koqlc_65",
+  "accordion-item__image--lg": "_accordion-item__image--lg_koqlc_70",
+  "accordion-item__label": "_accordion-item__label_koqlc_77",
+  "accordion-item__chevron": "_accordion-item__chevron_koqlc_85",
+  "accordion-item": "_accordion-item_koqlc_10",
+  "accordion-item__content": "_accordion-item__content_koqlc_98"
 };
 module.exports = styles;
 //# sourceMappingURL=AccordionItem.module.css.cjs.map

package/dist/components/AccordionItem/AccordionItem.module.css.js

@@ -1,16 +1,16 @@
 import './AccordionItem.css';
 const styles = {
-  "accordion-item--box": "_accordion-item--box_8bxcn_10",
-  "accordion-item--panel": "_accordion-item--panel_8bxcn_18",
-  "accordion-item__summary": "_accordion-item__summary_8bxcn_24",
-  "accordion-item__image": "_accordion-item__image_8bxcn_43",
-  "accordion-item__image--sm": "_accordion-item__image--sm_8bxcn_60",
-  "accordion-item__image--md": "_accordion-item__image--md_8bxcn_65",
-  "accordion-item__image--lg": "_accordion-item__image--lg_8bxcn_70",
-  "accordion-item__label": "_accordion-item__label_8bxcn_77",
-  "accordion-item__chevron": "_accordion-item__chevron_8bxcn_85",
-  "accordion-item": "_accordion-item_8bxcn_10",
-  "accordion-item__content": "_accordion-item__content_8bxcn_98"
+  "accordion-item--box": "_accordion-item--box_koqlc_10",
+  "accordion-item--panel": "_accordion-item--panel_koqlc_18",
+  "accordion-item__summary": "_accordion-item__summary_koqlc_24",
+  "accordion-item__image": "_accordion-item__image_koqlc_43",
+  "accordion-item__image--sm": "_accordion-item__image--sm_koqlc_60",
+  "accordion-item__image--md": "_accordion-item__image--md_koqlc_65",
+  "accordion-item__image--lg": "_accordion-item__image--lg_koqlc_70",
+  "accordion-item__label": "_accordion-item__label_koqlc_77",
+  "accordion-item__chevron": "_accordion-item__chevron_koqlc_85",
+  "accordion-item": "_accordion-item_koqlc_10",
+  "accordion-item__content": "_accordion-item__content_koqlc_98"
 };
 export {
   styles as default

package/dist/components/Breadcrumb/Breadcrumb.css

@@ -7,31 +7,30 @@
  * Uses a container query (ch units) to switch between default and collapsed mode.
  */
 
-._breadcrumb_b37v8_10 {
+._breadcrumb_1q2qc_10 {
     container-name: breadcrumb;
     container-type: inline-size;
     width: 100%;
     overflow: hidden;
 }
 
-._breadcrumb__list_b37v8_17 {
+._breadcrumb__list_1q2qc_17 {
     display: flex;
     align-items: center;
-    gap: var(--spacing-ui-xxs);
-    margin: var(--spacing-ui-lg) 0;
+    gap: var(--spacing-space-4);
+    margin: var(--spacing-space-20) 0;
     padding: 0;
     list-style: none;
 }
 
-._breadcrumb__item_b37v8_26 {
+._breadcrumb__item_1q2qc_26 {
     flex: 0 0 auto;
     margin: 0;
     padding: 0;
     display: flex;
     align-items: center;
-    gap: var(--spacing-ui-xxs);
+    gap: var(--spacing-space-4);
     font: var(--typography-label-md);
-    line-height: 1.125rem; /* intentional: absolute line-height for visual alignment */
 
     &:last-child {
         min-width: 0;
@@ -43,21 +42,21 @@
     }
 }
 
-._breadcrumb__link_b37v8_46 {
+._breadcrumb__link_1q2qc_45 {
     color: var(--color-semantic-interactive-primary-default);
     border-radius: var(--radius-semantic-sm);
 }
 
-._breadcrumb__link_b37v8_46:hover {
+._breadcrumb__link_1q2qc_45:hover {
     color: var(--color-semantic-interactive-primary-hover);
 }
 
-._breadcrumb__current_b37v8_55 {
+._breadcrumb__current_1q2qc_54 {
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-._breadcrumb__separator_b37v8_60 {
+._breadcrumb__separator_1q2qc_59 {
     flex: 0 0 auto;
     width: 0.875rem;
     height: 0.875rem;
@@ -66,7 +65,7 @@
 
 /* Collapsed mode: hide all items except the last two */
 @container breadcrumb (max-width: 75ch) {
-    ._breadcrumb__item_b37v8_26:not(:nth-last-child(-n + 2)) {
+    ._breadcrumb__item_1q2qc_26:not(:nth-last-child(-n + 2)) {
         display: none;
     }
 }

package/dist/components/Breadcrumb/Breadcrumb.module.css.cjs

@@ -1,12 +1,12 @@
 require('./Breadcrumb.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const breadcrumb = "_breadcrumb_b37v8_10";
-const breadcrumb__list = "_breadcrumb__list_b37v8_17";
-const breadcrumb__item = "_breadcrumb__item_b37v8_26";
-const breadcrumb__link = "_breadcrumb__link_b37v8_46";
-const breadcrumb__current = "_breadcrumb__current_b37v8_55";
-const breadcrumb__separator = "_breadcrumb__separator_b37v8_60";
+const breadcrumb = "_breadcrumb_1q2qc_10";
+const breadcrumb__list = "_breadcrumb__list_1q2qc_17";
+const breadcrumb__item = "_breadcrumb__item_1q2qc_26";
+const breadcrumb__link = "_breadcrumb__link_1q2qc_45";
+const breadcrumb__current = "_breadcrumb__current_1q2qc_54";
+const breadcrumb__separator = "_breadcrumb__separator_1q2qc_59";
 const styles = {
   breadcrumb,
   breadcrumb__list,

package/dist/components/Breadcrumb/Breadcrumb.module.css.js

@@ -1,10 +1,10 @@
 import './Breadcrumb.css';
-const breadcrumb = "_breadcrumb_b37v8_10";
-const breadcrumb__list = "_breadcrumb__list_b37v8_17";
-const breadcrumb__item = "_breadcrumb__item_b37v8_26";
-const breadcrumb__link = "_breadcrumb__link_b37v8_46";
-const breadcrumb__current = "_breadcrumb__current_b37v8_55";
-const breadcrumb__separator = "_breadcrumb__separator_b37v8_60";
+const breadcrumb = "_breadcrumb_1q2qc_10";
+const breadcrumb__list = "_breadcrumb__list_1q2qc_17";
+const breadcrumb__item = "_breadcrumb__item_1q2qc_26";
+const breadcrumb__link = "_breadcrumb__link_1q2qc_45";
+const breadcrumb__current = "_breadcrumb__current_1q2qc_54";
+const breadcrumb__separator = "_breadcrumb__separator_1q2qc_59";
 const styles = {
   breadcrumb,
   breadcrumb__list,

package/dist/components/Button/Button.cjs

@@ -52,7 +52,9 @@ const Button = ({
     const target = safeAnchorProps.target;
     const rel = safeAnchorProps.rel;
     const shouldHardenRel = target === "_blank";
-    const relTokens = new Set((rel ?? "").split(/\s+/).filter(Boolean));
+    const relTokens = new Set(
+      (rel ?? "").split(/\s+/).filter(Boolean).map((token) => token.toLowerCase())
+    );
     if (shouldHardenRel) {
       relTokens.add("noopener");
       relTokens.add("noreferrer");

package/dist/components/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport styles from './Button.module.css';\nimport { Spinner } from '../Spinner';\nimport type { ButtonProps } from './Button.types';\n\nexport const Button = ({\n    variant = 'primary',\n    fullWidth = false,\n    size = 'normal',\n    loading = false,\n    className,\n    children,\n    ref,\n    ...props\n}: ButtonProps) => {\n    const isDisabled = 'disabled' in props && props.disabled;\n    const isAnchor = 'href' in props && props.href != null;\n\n    const classes = cn(\n        styles.button,\n        styles[`button--${variant}`],\n        { [styles['button--full-width']]: fullWidth },\n        styles[`button--${size}`],\n        focusStyles.focusable,\n        { [styles['button--disabled']]: isDisabled },\n        { [styles['button--loading']]: loading },\n        className,\n    );\n\n    const content = (\n        <>\n            <span className={styles.button__content}>{children}</span>\n            {loading && (\n                <Spinner\n                    size={size === 'small' ? 'xs' : 's'}\n                    color=\"inherit\"\n                    aria-hidden=\"true\"\n                    aria-label={undefined}\n                    role=\"presentation\"\n                    className={styles.button__spinner}\n                />\n            )}\n        </>\n    );\n\n    if (isAnchor) {\n        const { href, renderLink, ...anchorProps } = props as Omit<\n            typeof props,\n            'variant' | 'size' | 'loading'\n        > & {\n            href: string;\n            renderLink?: (\n                props: AnchorHTMLAttributes<HTMLAnchorElement> & {\n                    href: string;\n                    children: ReactNode;\n                },\n            ) => ReactNode;\n        };\n\n        const {\n            disabled: _disabled,\n            type: _type,\n            name: _name,\n            ...safeAnchorProps\n        } = anchorProps as typeof anchorProps & {\n            disabled?: boolean;\n            type?: 'button' | 'submit' | 'reset';\n            name?: string;\n        };\n\n        const target = safeAnchorProps.target;\n        const rel = safeAnchorProps.rel;\n        const shouldHardenRel = target === '_blank';\n        const relTokens = new Set((rel ?? '').split(/\\s+/).filter(Boolean));\n\n        if (shouldHardenRel) {\n            relTokens.add('noopener');\n            relTokens.add('noreferrer');\n        }\n\n        const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(' ') : undefined;\n\n        const linkProps = {\n            ...safeAnchorProps,\n            ref: ref as Ref<HTMLAnchorElement>,\n            href,\n            rel: hardenedRel,\n            className: classes,\n            'aria-busy': loading || undefined,\n            'aria-disabled': loading || undefined,\n            tabIndex: loading ? -1 : undefined,\n            onClick: loading\n                ? (e: MouseEvent<HTMLAnchorElement>) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                  }\n                : safeAnchorProps.onClick,\n            children: content,\n        };\n\n        if (renderLink) {\n            return <>{renderLink(linkProps)}</>;\n        }\n\n        return <a {...linkProps} />;\n    }\n\n    const {\n        type = 'button',\n        disabled,\n        href: _href,\n        target: _target,\n        rel: _rel,\n        renderLink: _renderLink,\n        ...buttonProps\n    } = props as Omit<typeof props, 'variant' | 'size' | 'loading' | 'href'> & {\n        type?: 'button' | 'submit' | 'reset';\n        disabled?: boolean;\n        href?: string;\n        target?: string;\n        rel?: string;\n        renderLink?: unknown;\n    };\n\n    return (\n        <button\n            ref={ref as Ref<HTMLButtonElement>}\n            type={type}\n            disabled={disabled || loading}\n            className={classes}\n            aria-busy={loading || undefined}\n            {...buttonProps}\n        >\n            {content}\n        </button>\n    );\n};\n"],"names":["cn","styles","focusStyles","jsxs","Fragment","jsx","Spinner"],"mappings":";;;;;;;AAOO,MAAM,SAAS,CAAC;AAAA,EACnB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAmB;AACf,QAAM,aAAa,cAAc,SAAS,MAAM;AAChD,QAAM,WAAW,UAAU,SAAS,MAAM,QAAQ;AAElD,QAAM,UAAUA,GAAAA;AAAAA,IACZC,cAAAA,QAAO;AAAA,IACPA,cAAAA,QAAO,WAAW,OAAO,EAAE;AAAA,IAC3B,EAAE,CAACA,cAAAA,QAAO,oBAAoB,CAAC,GAAG,UAAA;AAAA,IAClCA,cAAAA,QAAO,WAAW,IAAI,EAAE;AAAA,IACxBC,aAAAA,QAAY;AAAA,IACZ,EAAE,CAACD,cAAAA,QAAO,kBAAkB,CAAC,GAAG,WAAA;AAAA,IAChC,EAAE,CAACA,cAAAA,QAAO,iBAAiB,CAAC,GAAG,QAAA;AAAA,IAC/B;AAAA,EAAA;AAGJ,QAAM,UACFE,2BAAAA,KAAAC,WAAAA,UAAA,EACI,UAAA;AAAA,IAAAC,2BAAAA,IAAC,QAAA,EAAK,WAAWJ,cAAAA,QAAO,iBAAkB,UAAS;AAAA,IAClD,WACGI,2BAAAA;AAAAA,MAACC,QAAAA;AAAAA,MAAA;AAAA,QACG,MAAM,SAAS,UAAU,OAAO;AAAA,QAChC,OAAM;AAAA,QACN,eAAY;AAAA,QACZ,cAAY;AAAA,QACZ,MAAK;AAAA,QACL,WAAWL,cAAAA,QAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACtB,GAER;AAGJ,MAAI,UAAU;AACV,UAAM,EAAE,MAAM,YAAY,GAAG,gBAAgB;AAa7C,UAAM;AAAA,MACF,UAAU;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,GAAG;AAAA,IAAA,IACH;AAMJ,UAAM,SAAS,gBAAgB;AAC/B,UAAM,MAAM,gBAAgB;AAC5B,UAAM,kBAAkB,WAAW;AACnC,UAAM,YAAY,IAAI,KAAK,OAAO,IAAI,MAAM,KAAK,EAAE,OAAO,OAAO,CAAC;AAElE,QAAI,iBAAiB;AACjB,gBAAU,IAAI,UAAU;AACxB,gBAAU,IAAI,YAAY;AAAA,IAC9B;AAEA,UAAM,cAAc,UAAU,OAAO,IAAI,MAAM,KAAK,SAAS,EAAE,KAAK,GAAG,IAAI;AAE3E,UAAM,YAAY;AAAA,MACd,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,WAAW;AAAA,MACX,aAAa,WAAW;AAAA,MACxB,iBAAiB,WAAW;AAAA,MAC5B,UAAU,UAAU,KAAK;AAAA,MACzB,SAAS,UACH,CAAC,MAAqC;AAClC,UAAE,eAAA;AACF,UAAE,gBAAA;AAAA,MACN,IACA,gBAAgB;AAAA,MACtB,UAAU;AAAA,IAAA;AAGd,QAAI,YAAY;AACZ,aAAOI,2BAAAA,IAAAD,WAAAA,UAAA,EAAG,UAAA,WAAW,SAAS,GAAE;AAAA,IACpC;AAEA,WAAOC,+BAAC,KAAA,EAAG,GAAG,UAAA,CAAW;AAAA,EAC7B;AAEA,QAAM;AAAA,IACF,OAAO;AAAA,IACP;AAAA,IACA,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACH;AASJ,SACIA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,WAAW;AAAA,MACX,aAAW,WAAW;AAAA,MACrB,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAGb;;"}
+{"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport styles from './Button.module.css';\nimport { Spinner } from '../Spinner';\nimport type { ButtonProps } from './Button.types';\n\nexport const Button = ({\n    variant = 'primary',\n    fullWidth = false,\n    size = 'normal',\n    loading = false,\n    className,\n    children,\n    ref,\n    ...props\n}: ButtonProps) => {\n    const isDisabled = 'disabled' in props && props.disabled;\n    const isAnchor = 'href' in props && props.href != null;\n\n    const classes = cn(\n        styles.button,\n        styles[`button--${variant}`],\n        { [styles['button--full-width']]: fullWidth },\n        styles[`button--${size}`],\n        focusStyles.focusable,\n        { [styles['button--disabled']]: isDisabled },\n        { [styles['button--loading']]: loading },\n        className,\n    );\n\n    const content = (\n        <>\n            <span className={styles.button__content}>{children}</span>\n            {loading && (\n                <Spinner\n                    size={size === 'small' ? 'xs' : 's'}\n                    color=\"inherit\"\n                    aria-hidden=\"true\"\n                    aria-label={undefined}\n                    role=\"presentation\"\n                    className={styles.button__spinner}\n                />\n            )}\n        </>\n    );\n\n    if (isAnchor) {\n        const { href, renderLink, ...anchorProps } = props as Omit<\n            typeof props,\n            'variant' | 'size' | 'loading'\n        > & {\n            href: string;\n            renderLink?: (\n                props: AnchorHTMLAttributes<HTMLAnchorElement> & {\n                    href: string;\n                    children: ReactNode;\n                },\n            ) => ReactNode;\n        };\n\n        const {\n            disabled: _disabled,\n            type: _type,\n            name: _name,\n            ...safeAnchorProps\n        } = anchorProps as typeof anchorProps & {\n            disabled?: boolean;\n            type?: 'button' | 'submit' | 'reset';\n            name?: string;\n        };\n\n        const target = safeAnchorProps.target;\n        const rel = safeAnchorProps.rel;\n        const shouldHardenRel = target === '_blank';\n        const relTokens = new Set(\n            (rel ?? '')\n                .split(/\\s+/)\n                .filter(Boolean)\n                .map((token) => token.toLowerCase()),\n        );\n\n        if (shouldHardenRel) {\n            relTokens.add('noopener');\n            relTokens.add('noreferrer');\n        }\n\n        const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(' ') : undefined;\n\n        const linkProps = {\n            ...safeAnchorProps,\n            ref: ref as Ref<HTMLAnchorElement>,\n            href,\n            rel: hardenedRel,\n            className: classes,\n            'aria-busy': loading || undefined,\n            'aria-disabled': loading || undefined,\n            tabIndex: loading ? -1 : undefined,\n            onClick: loading\n                ? (e: MouseEvent<HTMLAnchorElement>) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                  }\n                : safeAnchorProps.onClick,\n            children: content,\n        };\n\n        if (renderLink) {\n            return <>{renderLink(linkProps)}</>;\n        }\n\n        return <a {...linkProps} />;\n    }\n\n    const {\n        type = 'button',\n        disabled,\n        href: _href,\n        target: _target,\n        rel: _rel,\n        renderLink: _renderLink,\n        ...buttonProps\n    } = props as Omit<typeof props, 'variant' | 'size' | 'loading' | 'href'> & {\n        type?: 'button' | 'submit' | 'reset';\n        disabled?: boolean;\n        href?: string;\n        target?: string;\n        rel?: string;\n        renderLink?: unknown;\n    };\n\n    return (\n        <button\n            ref={ref as Ref<HTMLButtonElement>}\n            type={type}\n            disabled={disabled || loading}\n            className={classes}\n            aria-busy={loading || undefined}\n            {...buttonProps}\n        >\n            {content}\n        </button>\n    );\n};\n"],"names":["cn","styles","focusStyles","jsxs","Fragment","jsx","Spinner"],"mappings":"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"}

package/dist/components/Button/Button.css

@@ -1,8 +1,8 @@
-@layer dds-components {._button_1nsz1_1 {
+@layer dds-components {._button_tpbgh_1 {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--spacing-ui-xxs);
+    gap: var(--spacing-space-4);
     max-width: 100%;
     border: none;
     border-radius: var(--radius-semantic-full);
@@ -15,114 +15,114 @@
         border-color 0.2s ease-in-out;
 }
 
-._button--full-width_1nsz1_18 {
+._button--full-width_tpbgh_18 {
     width: 100%;
     min-width: 0;
 }
 
 /* ─── Sizes ─── */
 
-._button--normal_1nsz1_25 {
+._button--normal_tpbgh_25 {
     font: var(--typography-label-lg-bold);
     height: 40px;
     min-width: 128px;
-    padding: var(--spacing-ui-xs) var(--spacing-ui-lg);
+    padding: var(--spacing-space-8) var(--spacing-space-20);
 }
 
-._button--small_1nsz1_32 {
+._button--small_tpbgh_32 {
     font: var(--typography-label-md-bold);
     height: 32px;
     min-width: 100px;
-    padding: var(--spacing-ui-xs) var(--spacing-ui-lg);
+    padding: var(--spacing-space-8) var(--spacing-space-20);
 }
 
 /* ─── Primary variant ─── */
 
-._button--primary_1nsz1_41 {
+._button--primary_tpbgh_41 {
     background-color: var(--color-semantic-interactive-primary-default);
     color: var(--color-semantic-foreground-inverse);
 }
 
-._button--primary_1nsz1_41:hover {
+._button--primary_tpbgh_41:hover {
     background-color: var(--color-semantic-interactive-primary-hover);
     color: var(--color-semantic-foreground-inverse);
 }
 
-._button--primary_1nsz1_41:active {
+._button--primary_tpbgh_41:active {
     background-color: var(--color-semantic-interactive-primary-active);
     color: var(--color-semantic-foreground-inverse);
 }
 
-._button--primary_1nsz1_41:focus-visible {
+._button--primary_tpbgh_41:focus-visible {
     background-color: var(--color-semantic-interactive-primary-focus);
     color: var(--color-semantic-foreground-inverse);
 }
 
 /* ─── Secondary variant ─── */
 
-._button--secondary_1nsz1_63 {
+._button--secondary_tpbgh_63 {
     background-color: transparent;
     border: var(--borderwidth-semantic-sm) solid var(--color-semantic-interactive-secondary-default);
     color: var(--color-semantic-foreground-secondary-strong);
 }
 
-._button--secondary_1nsz1_63:hover {
+._button--secondary_tpbgh_63:hover {
     background-color: var(--color-semantic-interactive-secondary-hover);
     border-color: var(--color-semantic-interactive-secondary-hover);
     color: var(--color-semantic-foreground-inverse);
 }
 
-._button--secondary_1nsz1_63:active {
+._button--secondary_tpbgh_63:active {
     background-color: var(--color-semantic-interactive-secondary-active);
     border-color: var(--color-semantic-interactive-secondary-active);
     color: var(--color-semantic-foreground-inverse);
 }
 
-._button--secondary_1nsz1_63:focus-visible {
+._button--secondary_tpbgh_63:focus-visible {
     background-color: var(--color-semantic-interactive-secondary-focus);
     color: var(--color-semantic-foreground-inverse);
 }
 
 /* ─── Tertiary variant ─── */
 
-._button--tertiary_1nsz1_88 {
+._button--tertiary_tpbgh_88 {
     background-color: var(--color-semantic-interactive-neutral-default);
     border: var(--borderwidth-semantic-sm) solid var(--color-semantic-border-neutral-mid);
     color: var(--color-semantic-foreground-secondary-strong);
 }
 
-._button--tertiary_1nsz1_88:hover {
+._button--tertiary_tpbgh_88:hover {
     background-color: var(--color-semantic-interactive-neutral-hover);
     color: var(--color-semantic-foreground-secondary-strong);
 }
 
-._button--tertiary_1nsz1_88:active {
+._button--tertiary_tpbgh_88:active {
     background-color: var(--color-semantic-interactive-neutral-active);
     color: var(--color-semantic-foreground-secondary-strong);
 }
 
-._button--tertiary_1nsz1_88:focus-visible {
+._button--tertiary_tpbgh_88:focus-visible {
     background-color: var(--color-semantic-interactive-neutral-focus);
     color: var(--color-semantic-foreground-secondary-strong);
 }
 
 /* ─── Disabled state ─── */
 
-._button--disabled_1nsz1_111 {
+._button--disabled_tpbgh_111 {
     pointer-events: none;
 }
 
-._button--primary_1nsz1_41._button--disabled_1nsz1_111 {
+._button--primary_tpbgh_41._button--disabled_tpbgh_111 {
     background-color: var(--color-semantic-interactive-primary-disabled);
     color: var(--color-semantic-foreground-muted);
 }
 
-._button--secondary_1nsz1_63._button--disabled_1nsz1_111 {
+._button--secondary_tpbgh_63._button--disabled_tpbgh_111 {
     border-color: var(--color-semantic-interactive-secondary-disabled);
     color: var(--color-semantic-foreground-muted);
 }
 
-._button--tertiary_1nsz1_88._button--disabled_1nsz1_111 {
+._button--tertiary_tpbgh_88._button--disabled_tpbgh_111 {
     background-color: var(--color-semantic-interactive-neutral-disabled);
     color: var(--color-semantic-foreground-muted);
 }
@@ -131,38 +131,38 @@
 /* Styles apply from [data-color-scheme="dark"] down to (but not into) [data-color-scheme="light"]. */
 
 @scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
-    ._button--primary_1nsz1_41._button--disabled_1nsz1_111 {
+    ._button--primary_tpbgh_41._button--disabled_tpbgh_111 {
         color: var(--color-semantic-foreground-inverse-muted);
     }
 
-    ._button--secondary_1nsz1_63 {
+    ._button--secondary_tpbgh_63 {
         border-color: var(--color-semantic-interactive-inverse-default);
         color: var(--color-semantic-foreground-inverse);
     }
 
-    ._button--secondary_1nsz1_63:hover {
+    ._button--secondary_tpbgh_63:hover {
         background-color: var(--color-semantic-interactive-inverse-hover);
         border-color: var(--color-semantic-interactive-inverse-hover);
         color: var(--color-semantic-foreground-secondary-strong);
     }
 
-    ._button--secondary_1nsz1_63:active {
+    ._button--secondary_tpbgh_63:active {
         background-color: var(--color-semantic-interactive-inverse-active);
         border-color: var(--color-semantic-interactive-inverse-active);
         color: var(--color-semantic-foreground-secondary-strong);
     }
 
-    ._button--secondary_1nsz1_63:focus-visible {
+    ._button--secondary_tpbgh_63:focus-visible {
         background-color: var(--color-semantic-interactive-inverse-focus);
         color: var(--color-semantic-foreground-secondary-strong);
     }
 
-    ._button--secondary_1nsz1_63._button--disabled_1nsz1_111 {
+    ._button--secondary_tpbgh_63._button--disabled_tpbgh_111 {
         border-color: var(--color-semantic-interactive-inverse-disabled);
         color: var(--color-semantic-foreground-inverse-muted);
     }
 
-    ._button--tertiary_1nsz1_88._button--disabled_1nsz1_111 {
+    ._button--tertiary_tpbgh_88._button--disabled_tpbgh_111 {
         border-color: var(--color-semantic-interactive-neutral-disabled);
         color: var(--color-semantic-foreground-inverse-muted);
     }
@@ -170,11 +170,11 @@
 
 /* ─── Loading state ─── */
 
-._button--loading_1nsz1_173 {
+._button--loading_tpbgh_173 {
     pointer-events: none;
 }
 
-._button__content_1nsz1_177 {
+._button__content_tpbgh_177 {
     flex: 0 1 auto;
     min-width: 0;
     overflow: hidden;
@@ -182,7 +182,7 @@
     white-space: nowrap;
 }
 
-._button__spinner_1nsz1_185 {
+._button__spinner_tpbgh_185 {
     flex: 0 0 auto;
 }
 }

package/dist/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,GAAI,2EASpB,WAAW,4CA0Hb,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,GAAI,2EASpB,WAAW,4CA+Hb,CAAC"}

package/dist/components/Button/Button.js

@@ -50,7 +50,9 @@ const Button = ({
     const target = safeAnchorProps.target;
     const rel = safeAnchorProps.rel;
     const shouldHardenRel = target === "_blank";
-    const relTokens = new Set((rel ?? "").split(/\s+/).filter(Boolean));
+    const relTokens = new Set(
+      (rel ?? "").split(/\s+/).filter(Boolean).map((token) => token.toLowerCase())
+    );
     if (shouldHardenRel) {
       relTokens.add("noopener");
       relTokens.add("noreferrer");