@tedi-design-system/react 18.0.0-rc.2 → 18.0.0-rc.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "18.0.0-rc.2",
+  "version": "18.0.0-rc.20",
   "type": "module",
   "sideEffects": false,
   "exports": {
@@ -39,7 +39,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
-    "@floating-ui/react": "^0.26.9",
+    "@floating-ui/react": "^0.27.19",
     "@mui/material": "^5.15.13",
     "@mui/x-date-pickers": "^5.0.20",
     "@tanstack/react-table": "^8.13.2",
@@ -48,7 +48,7 @@
     "draft-js": "^0.11.7",
     "draftjs-md-converter": "^1.5.2",
     "formik": "^2.4.5",
-    "lodash-es": "^4.17.22",
+    "lodash-es": "^4.18.1",
     "react-animate-height": "^3.2.3",
     "react-day-picker": "^9.13.2",
     "react-dropzone": "^14.3.5",
@@ -133,7 +133,7 @@
     "storybook": "8.4.2",
     "storybook-addon-pseudo-states": "^4.0.2",
     "stylelint": "^16.13.2",
-    "stylelint-config-recess-order": "^4.2.0",
+    "stylelint-config-recess-order": "^7.7.0",
     "stylelint-config-standard-scss": "^14.0.0",
     "stylelint-declaration-strict-value": "^1.9.2",
     "ts-jest": "29.1.2",

package/src/community/components/accordion/accordion-item/accordion-item.d.ts

@@ -32,5 +32,8 @@ export interface IAccordionItemContext {
     id: string;
 }
 export declare const AccordionItemContext: React.Context<IAccordionItemContext>;
+/**
+ * @deprecated Use `<Accordion.Item>` from the TEDI-Ready Accordion (`@tedi-design-system/react/tedi`) instead.
+ */
 export declare const AccordionItem: (props: AccordionItemProps) => JSX.Element;
 export default AccordionItem;

package/src/community/components/accordion/accordion-item-content/accordion-item-content.d.ts

@@ -1,4 +1,7 @@
 import { CardContentProps } from '../../card';
 export type AccordionItemContentProps = CardContentProps;
+/**
+ * @deprecated Use `<Accordion.Item.Content>` from the TEDI-Ready Accordion (`@tedi-design-system/react/tedi`) instead.
+ */
 export declare const AccordionItemContent: (props: AccordionItemContentProps) => JSX.Element;
 export default AccordionItemContent;

package/src/community/components/accordion/accordion-item-header/accordion-item-header.d.ts

@@ -15,5 +15,8 @@ export interface AccordionItemHeaderProps extends Omit<CardHeaderProps, 'id' | '
      */
     background?: 'primary' | 'white/primary' | 'muted/primary' | CardHeaderBackground;
 }
+/**
+ * @deprecated Use `<Accordion.Item.Header>` from the TEDI-Ready Accordion (`@tedi-design-system/react/tedi`) instead.
+ */
 export declare const AccordionItemHeader: (props: AccordionItemHeaderProps) => JSX.Element;
 export default AccordionItemHeader;

package/src/community/components/accordion/accordion.d.ts

@@ -34,5 +34,8 @@ export interface IAccordionContext {
     onToggle: (id: string) => void;
 }
 export declare const AccordionContext: React.Context<IAccordionContext>;
+/**
+ * @deprecated Use the TEDI-Ready `Accordion` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Accordion: (props: AccordionProps) => JSX.Element;
 export default Accordion;

package/src/community/components/form/pickers/calendar/calendar.d.ts

@@ -1,6 +1,9 @@
 import { Dayjs } from 'dayjs';
 export type CalendarValue = Dayjs | null;
 export type CalendarStatus = 'error' | 'success' | 'inactive';
+/**
+ * @deprecated Use `Calendar` from `@tedi-design-system/react/tedi` instead.
+ */
 export interface CalendarProps {
     /**
      * Currently selected value. Accepts a dayjs date object.
@@ -86,5 +89,8 @@ export interface CalendarProps {
      */
     shouldShowStatusOnDate?: (day: CalendarValue) => CalendarStatus | undefined;
 }
+/**
+ * @deprecated Use `Calendar` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Calendar: (props: CalendarProps) => JSX.Element;
 export default Calendar;

package/src/community/components/form/pickers/datepicker/datepicker.d.ts

@@ -2,6 +2,9 @@ import { DateValidationError } from '@mui/x-date-pickers/internals';
 import { Dayjs } from 'dayjs';
 import { TextFieldProps } from '../../../../../tedi/components/form/textfield/textfield';
 export type DatepickerValue = Dayjs | null;
+/**
+ * @deprecated Use `DateField` from `@tedi-design-system/react/tedi` instead.
+ */
 export interface DatePickerProps extends Omit<TextFieldProps, 'defaultValue' | 'value' | 'onChange'> {
     /**
      * Datepicker initial value. Accepts a dayjs date object.
@@ -85,5 +88,8 @@ export interface DatePickerProps extends Omit<TextFieldProps, 'defaultValue' | '
      */
     onClose?: () => void;
 }
+/**
+ * @deprecated Use `DateField` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const DatePicker: (props: DatePickerProps) => JSX.Element;
 export default DatePicker;

package/src/community/components/form/pickers/datetimepicker/datetimepicker.d.ts

@@ -3,6 +3,9 @@ import { DateTimeValidationError } from '@mui/x-date-pickers/internals/hooks/val
 import { Dayjs } from 'dayjs';
 import { TextFieldProps } from '../../../../../tedi/components/form/textfield/textfield';
 export type DateTimepickerValue = Dayjs | null;
+/**
+ * @deprecated Use `DateTimeField` from `@tedi-design-system/react/tedi` instead.
+ */
 export interface DateTimePickerProps extends Omit<TextFieldProps, 'defaultValue' | 'value' | 'onChange'> {
     /**
      * DateTimepicker initial value. Accepts a dayjs date object.
@@ -125,5 +128,8 @@ export interface DateTimePickerProps extends Omit<TextFieldProps, 'defaultValue'
      */
     onClose?: () => void;
 }
+/**
+ * @deprecated Use `DateTimeField` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const DateTimePicker: (props: DateTimePickerProps) => JSX.Element;
 export default DateTimePicker;

package/src/community/components/form/pickers/timepicker/timepicker.d.ts

@@ -3,6 +3,9 @@ import { TimeValidationError } from '@mui/x-date-pickers/internals/hooks/validat
 import { Dayjs } from 'dayjs';
 import { TextFieldProps } from '../../../../../tedi/components/form/textfield/textfield';
 export type TimePickerValue = Dayjs | null;
+/**
+ * @deprecated Use `TimeField` from `@tedi-design-system/react/tedi` instead.
+ */
 export interface TimePickerProps extends Omit<TextFieldProps, 'defaultValue' | 'value' | 'onChange'> {
     /**
      * TimePicker initial value. Accepts a dayjs date object.
@@ -69,5 +72,8 @@ export interface TimePickerProps extends Omit<TextFieldProps, 'defaultValue' | '
      */
     onClose?: () => void;
 }
+/**
+ * @deprecated Use `TimeField` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const TimePicker: (props: TimePickerProps) => JSX.Element;
 export default TimePicker;

package/src/community/components/layout/footer/footer.d.ts

@@ -8,6 +8,9 @@ export type FooterCategory = {
     heading: React.ReactNode;
     icon?: string | IconProps;
 };
+/**
+ * @deprecated Use `Footer` from `@tedi-design-system/react/tedi` instead.
+ */
 export type FooterProps = {
     /**
      * Footer Categorys
@@ -30,5 +33,8 @@ export type FooterProps = {
      */
     bottomElement?: React.ReactNode;
 };
+/**
+ * @deprecated Use `Footer` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Footer: (props: FooterProps) => JSX.Element;
 export default Footer;

package/src/community/components/map-components/carousel/carousel.d.ts

@@ -1,4 +1,9 @@
 import { default as React } from 'react';
+/**
+ * @deprecated Use `Carousel` from `@tedi-design-system/react/tedi` instead — with
+ * `Carousel.Content loop={false}` and `Carousel.Navigation overlay` for the same
+ * bounded, edge-arrow pattern (plus keyboard and screen-reader support).
+ */
 export interface CarouselProps {
     /**
      * Number of items visible at once in the carousel viewport.
@@ -15,5 +20,10 @@ export interface CarouselProps {
      */
     className?: string;
 }
+/**
+ * @deprecated Use `Carousel` from `@tedi-design-system/react/tedi` instead — with
+ * `Carousel.Content loop={false}` and `Carousel.Navigation overlay` for the same
+ * bounded, edge-arrow pattern (plus keyboard and screen-reader support).
+ */
 export declare const Carousel: (props: CarouselProps) => JSX.Element;
 export default Carousel;

package/src/community/components/modal/modal-closer.d.ts

@@ -1,9 +1,15 @@
 import { default as React } from 'react';
+/**
+ * @deprecated Use Modal from `@tedi-design-system/react/tedi` instead.
+ */
 export interface ModalCloserProps {
     /**
      * The element that closes the modal.
      */
     children: React.ReactElement;
 }
+/**
+ * @deprecated Use Modal from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const ModalCloser: (props: ModalCloserProps) => JSX.Element;
 export default ModalCloser;

package/src/community/components/modal/modal-provider.d.ts

@@ -1,5 +1,8 @@
 import { FloatingContext, ReferenceType } from '@floating-ui/react';
 import { default as React } from 'react';
+/**
+ * @deprecated Use Modal from `@tedi-design-system/react/tedi` instead.
+ */
 export interface ModalProviderProps {
     /**
      * ModalTrigger and Modal components
@@ -51,5 +54,8 @@ export interface IModalContext {
     outsidePress: boolean;
 }
 export declare const ModalContext: React.Context<IModalContext>;
+/**
+ * @deprecated Use Modal from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const ModalProvider: (props: ModalProviderProps) => JSX.Element;
 export default ModalProvider;

package/src/community/components/modal/modal-trigger.d.ts

@@ -1,8 +1,14 @@
+/**
+ * @deprecated Use Modal from `@tedi-design-system/react/tedi` instead.
+ */
 export interface ModalTriggerProps {
     /**
      * The element that opens the modal.
      */
     children: JSX.Element;
 }
+/**
+ * @deprecated Use Modal from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const ModalTrigger: (props: ModalTriggerProps) => JSX.Element;
 export default ModalTrigger;

package/src/community/components/modal/modal.d.ts

@@ -1,5 +1,8 @@
 import { default as React } from 'react';
 import { CardProps } from '../card/card';
+/**
+ * @deprecated Use Modal from `@tedi-design-system/react/tedi` instead.
+ */
 export interface ModalProps {
     /**
      * Content of the modal
@@ -58,5 +61,8 @@ export interface ModalProps {
      */
     overlay?: 'none';
 }
+/**
+ * @deprecated Use Modal from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Modal: (props: ModalProps) => JSX.Element | null;
 export default Modal;

package/src/community/components/placeholder/placeholder.d.ts

@@ -2,6 +2,9 @@ import { default as React } from 'react';
 import { IconProps } from '../../../tedi/components/base/icon/icon';
 import { RowProps } from '../../../tedi/components/layout/grid';
 import { CardProps } from '../card';
+/**
+ * @deprecated Use EmptyState from `@tedi-design-system/react/tedi` instead.
+ */
 export interface PlaceholderProps {
     /**
      * Placeholder block content
@@ -31,6 +34,8 @@ export interface PlaceholderProps {
     rowProps?: RowProps;
 }
 /**
+ * @deprecated Use EmptyState from `@tedi-design-system/react/tedi` instead.
+ *
  * Placeholder is used to indicate, that there is no data to show. It can be used on its own or inside other components, like a `<CardContent>`.
  * Other components also use it internally for displaying empty state. (E.g. `<Table>`)
  */

package/src/community/components/stepper/step.d.ts

@@ -1,4 +1,7 @@
 import { default as React } from 'react';
+/**
+ * @deprecated Use `HorizontalStepper` from `@tedi-design-system/react/tedi` instead.
+ */
 export interface StepProps {
     /**
      * ID of step
@@ -32,5 +35,8 @@ export interface StepProps {
      */
     showCompletedIcon?: boolean;
 }
+/**
+ * @deprecated Use `HorizontalStepper` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Step: (props: StepProps) => JSX.Element | null;
 export default Step;

package/src/community/components/stepper/stepper-nav.d.ts

@@ -22,6 +22,9 @@ export interface StepperNavItem {
      */
     showCompletedIcon?: boolean;
 }
+/**
+ * @deprecated Use `HorizontalStepper` from `@tedi-design-system/react/tedi` instead.
+ */
 export interface StepperNavProps {
     /**
      * Navigation items
@@ -42,5 +45,8 @@ export interface StepperNavProps {
      */
     notCompletedLabel?: string;
 }
+/**
+ * @deprecated Use `HorizontalStepper` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const StepperNav: (props: StepperNavProps) => JSX.Element;
 export default StepperNav;

package/src/community/components/stepper/stepper.d.ts

@@ -2,6 +2,9 @@ import { default as React } from 'react';
 import { CardProps } from '../card';
 import { StepProps } from './step';
 import { AllowStepLabelClick } from './stepper-context';
+/**
+ * @deprecated Use `HorizontalStepper` from `@tedi-design-system/react/tedi` instead.
+ */
 export interface StepperProps {
     /**
      * The activeStep index that should be open by default (zero based index).
@@ -60,5 +63,8 @@ export interface StepperProps {
      */
     card?: CardProps | boolean;
 }
+/**
+ * @deprecated Use `HorizontalStepper` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Stepper: (props: StepperProps) => JSX.Element;
 export default Stepper;

package/src/tedi/components/buttons/button-group/button-group.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),g=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),n=require("../../base/icon/icon.cjs.js"),x=require("../button/button.cjs.js"),r=require("./button-group.module.scss.cjs.js"),L=require("../../../helpers/hooks/use-breakpoint.cjs.js"),C=require("../../../providers/label-provider/use-labels.cjs.js"),l=require("../../overlays/dropdown/dropdown.cjs.js"),b=k=>{const{getLabel:j}=C.useLabels(),{children:q,className:w,type:c="primary",onSelectionChange:i,stretch:v=!1,ariaLabel:I,size:f="default",enableMobileDropdown:A=!1,mobileBreakpoint:N="md",dropdownLabel:y=j("sidenav.submenu"),dropdownLabelMode:R="static"}=k,B=L.useBreakpoint(),D=L.isBreakpointBelow(B,N),m=_.Children.toArray(q).filter(e=>_.isValidElement(e)&&e.type===x.Button),s=m.find(e=>e.props.isActive),M=R==="static"?y:(s==null?void 0:s.props.children)??y,a=s==null?void 0:s.props.iconLeft,d=s==null?void 0:s.props.icon;return D&&A?o.jsxs(l.Dropdown,{width:"trigger",children:[o.jsx(l.Dropdown.Trigger,{children:o.jsxs(x.Button,{visualType:c,className:g.default(r.default["tedi-button-group__dropdown-trigger"],r.default[`tedi-button-group__dropdown-trigger--${c}`],w),noStyle:!0,fullWidth:!0,children:[a?o.jsx(n.Icon,{name:typeof a=="string"?a:a.name,color:"inherit"}):d?o.jsx(n.Icon,{name:typeof d=="string"?d:d.name,color:"inherit"}):o.jsx(n.Icon,{name:"menu",color:"inherit"}),M]})}),o.jsx(l.Dropdown.Content,{children:m.map((e,u)=>o.jsxs(l.Dropdown.Item,{index:u,active:e==null?void 0:e.props.isActive,disabled:e==null?void 0:e.props.disabled,onClick:t=>{var p,h;e.props.disabled||(t.type==="click"&&((h=(p=e.props).onClick)==null||h.call(p,t)),e.props.id&&(i==null||i(e.props.id)))},className:r.default["tedi-button-group__dropdown-item"],children:[e.props.iconLeft&&o.jsx(n.Icon,{name:typeof e.props.iconLeft=="string"?e.props.iconLeft:e.props.iconLeft.name,color:"inherit"}),e.props.children,e.props.iconRight&&o.jsx(n.Icon,{name:typeof e.props.iconRight=="string"?e.props.iconRight:e.props.iconRight.name,color:"inherit"}),e.props.isActive&&o.jsx("span",{className:"sr-only",children:j("button-group.selected")})]},e.props.id||u))})]}):o.jsx("div",{className:g.default(r.default["tedi-button-group"],r.default[`tedi-button-group--${c}`],{[r.default["tedi-button-group--stretch"]]:v},w),role:"group","aria-label":I,children:m.map(e=>_.cloneElement(e,{className:g.default(r.default["tedi-button-group__item"],{[r.default["tedi-button-group__item--active"]]:e.props.isActive,[r.default["tedi-button-group__item--disabled"]]:e.props.disabled,[r.default[`tedi-button-group__item--size-${f}`]]:f},e.props.className),size:f,"aria-pressed":!!e.props.isActive,onClick:u=>{var t,p;(p=(t=e.props).onClick)==null||p.call(t,u),e.props.id&&(i==null||i(e.props.id))}}))})};exports.ButtonGroup=b;exports.default=b;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),g=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),n=require("../../base/icon/icon.cjs.js"),x=require("../button/button.cjs.js"),r=require("./button-group.module.scss.cjs.js"),C=require("../../../providers/label-provider/use-labels.cjs.js"),L=require("../../../helpers/hooks/use-breakpoint.cjs.js"),l=require("../../overlays/dropdown/dropdown.cjs.js"),b=k=>{const{getLabel:j}=C.useLabels(),{children:q,className:w,type:c="primary",onSelectionChange:i,stretch:v=!1,ariaLabel:I,size:f="default",enableMobileDropdown:A=!1,mobileBreakpoint:N="md",dropdownLabel:y=j("sidenav.submenu"),dropdownLabelMode:R="static"}=k,B=L.useBreakpoint(),D=L.isBreakpointBelow(B,N),m=_.Children.toArray(q).filter(e=>_.isValidElement(e)&&e.type===x.Button),s=m.find(e=>e.props.isActive),M=R==="static"?y:(s==null?void 0:s.props.children)??y,a=s==null?void 0:s.props.iconLeft,d=s==null?void 0:s.props.icon;return D&&A?o.jsxs(l.Dropdown,{width:"trigger",children:[o.jsx(l.Dropdown.Trigger,{children:o.jsxs(x.Button,{visualType:c,className:g.default(r.default["tedi-button-group__dropdown-trigger"],r.default[`tedi-button-group__dropdown-trigger--${c}`],w),noStyle:!0,fullWidth:!0,children:[a?o.jsx(n.Icon,{name:typeof a=="string"?a:a.name,color:"inherit"}):d?o.jsx(n.Icon,{name:typeof d=="string"?d:d.name,color:"inherit"}):o.jsx(n.Icon,{name:"menu",color:"inherit"}),M]})}),o.jsx(l.Dropdown.Content,{children:m.map((e,u)=>o.jsxs(l.Dropdown.Item,{index:u,active:e==null?void 0:e.props.isActive,disabled:e==null?void 0:e.props.disabled,onClick:t=>{var p,h;e.props.disabled||(t.type==="click"&&((h=(p=e.props).onClick)==null||h.call(p,t)),e.props.id&&(i==null||i(e.props.id)))},className:r.default["tedi-button-group__dropdown-item"],children:[e.props.iconLeft&&o.jsx(n.Icon,{name:typeof e.props.iconLeft=="string"?e.props.iconLeft:e.props.iconLeft.name,color:"inherit"}),e.props.children,e.props.iconRight&&o.jsx(n.Icon,{name:typeof e.props.iconRight=="string"?e.props.iconRight:e.props.iconRight.name,color:"inherit"}),e.props.isActive&&o.jsx("span",{className:"sr-only",children:j("button-group.selected")})]},e.props.id||u))})]}):o.jsx("div",{className:g.default(r.default["tedi-button-group"],r.default[`tedi-button-group--${c}`],{[r.default["tedi-button-group--stretch"]]:v},w),role:"group","aria-label":I,children:m.map(e=>_.cloneElement(e,{className:g.default(r.default["tedi-button-group__item"],{[r.default["tedi-button-group__item--active"]]:e.props.isActive,[r.default["tedi-button-group__item--disabled"]]:e.props.disabled,[r.default[`tedi-button-group__item--size-${f}`]]:f},e.props.className),size:f,"aria-pressed":!!e.props.isActive,onClick:u=>{var t,p;(p=(t=e.props).onClick)==null||p.call(t,u),e.props.id&&(i==null||i(e.props.id))}}))})};exports.ButtonGroup=b;exports.default=b;

package/src/tedi/components/buttons/button-group/button-group.es.js

@@ -4,11 +4,11 @@ import { Children as x, isValidElement as z, cloneElement as B } from "react";
 import { Icon as a } from "../../base/icon/icon.es.js";
 import { Button as k } from "../button/button.es.js";
 import r from "./button-group.module.scss.es.js";
-import { useBreakpoint as D, isBreakpointBelow as E } from "../../../helpers/hooks/use-breakpoint.es.js";
-import { useLabels as T } from "../../../providers/label-provider/use-labels.es.js";
+import { useLabels as D } from "../../../providers/label-provider/use-labels.es.js";
+import { useBreakpoint as E, isBreakpointBelow as T } from "../../../helpers/hooks/use-breakpoint.es.js";
 import { Dropdown as d } from "../../overlays/dropdown/dropdown.es.js";
 const P = (N) => {
-  const { getLabel: _ } = T(), {
+  const { getLabel: _ } = D(), {
     children: v,
     className: h,
     type: m = "primary",
@@ -20,7 +20,7 @@ const P = (N) => {
     mobileBreakpoint: R = "md",
     dropdownLabel: L = _("sidenav.submenu"),
     dropdownLabelMode: C = "static"
-  } = N, M = D(), $ = E(M, R), f = x.toArray(v).filter(
+  } = N, M = E(), $ = T(M, R), f = x.toArray(v).filter(
     (o) => z(o) && o.type === k
   ), e = f.find((o) => o.props.isActive), j = C === "static" ? L : (e == null ? void 0 : e.props.children) ?? L, n = e == null ? void 0 : e.props.iconLeft, l = e == null ? void 0 : e.props.icon;
   return $ && I ? /* @__PURE__ */ g(d, { width: "trigger", children: [

package/src/tedi/components/buttons/card-button/card-button.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),l=require("../../../../../external/classnames/index.cjs.js"),m=require("react"),b=require("./card-button.module.scss.cjs.js"),n=m.forwardRef((r,u)=>{const{as:a,children:s,className:d,...t}=r,e=a||"button",c=e==="button";return i.jsx(e,{"data-name":"card-button",...t,...c?{type:t.type??"button"}:{},ref:u,className:l.default(b.default["tedi-card-button"],d),children:s})});n.displayName="CardButton";const o=n;exports.CardButton=o;exports.default=o;

package/src/tedi/components/buttons/card-button/card-button.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { PolymorphicComponentPropWithRef } from '../../../helpers/polymorphic/types';
+export interface CardButtonBaseProps {
+    /**
+     * A single `<Card>` to render as the interactive surface. The host element provides the
+     * interaction semantics and applies the hover / active / focus / disabled states to the
+     * card and its blocks. Keep it to one card and avoid nested interactive elements.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional class name on the host element.
+     */
+    className?: string;
+}
+export type CardButtonProps<C extends React.ElementType = 'button'> = PolymorphicComponentPropWithRef<C, CardButtonBaseProps>;
+export declare const CardButton: <C extends React.ElementType = "button">(props: CardButtonProps<C>) => React.ReactElement | null;
+export default CardButton;

package/src/tedi/components/buttons/card-button/card-button.es.js

@@ -0,0 +1,26 @@
+import { jsx as u } from "react/jsx-runtime";
+import c from "../../../../../external/classnames/index.es.js";
+import { forwardRef as d } from "react";
+import i from "./card-button.module.scss.es.js";
+const n = d(
+  (r, s) => {
+    const { as: a, children: e, className: m, ...t } = r, o = a || "button";
+    return /* @__PURE__ */ u(
+      o,
+      {
+        "data-name": "card-button",
+        ...t,
+        ...o === "button" ? { type: t.type ?? "button" } : {},
+        ref: s,
+        className: c(i["tedi-card-button"], m),
+        children: e
+      }
+    );
+  }
+);
+n.displayName = "CardButton";
+const y = n;
+export {
+  y as CardButton,
+  y as default
+};

package/src/tedi/components/buttons/card-button/card-button.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-card-button":"tedi-card-button-57ad7420"};exports.default=e;

package/src/tedi/components/buttons/card-button/card-button.module.scss.es.js

@@ -0,0 +1,6 @@
+const t = {
+  "tedi-card-button": "tedi-card-button-57ad7420"
+};
+export {
+  t as default
+};

package/src/tedi/components/buttons/card-button/index.d.ts

@@ -0,0 +1 @@
+export * from './card-button';

package/src/tedi/components/buttons/collapse/collapse.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),n=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),F=require("../../../../../external/react-animate-height/dist/esm/index.cjs.js"),G=require("../../../providers/printing-provider/printing-provider.cjs.js"),H=require("../../base/icon/icon.cjs.js"),J=require("../../base/typography/text/text.cjs.js"),Q=require("../../misc/print/print.cjs.js"),e=require("./collapse.module.scss.cjs.js"),U=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),V=require("../../../providers/label-provider/use-labels.cjs.js"),C=require("../../layout/grid/row.cjs.js"),o=require("../../layout/grid/col.cjs.js"),I=x=>{const{getCurrentBreakpointProps:N}=U.useBreakpointProps(x.defaultServerBreakpoint),{getLabel:h}=V.useLabels(),{id:r,children:w,className:P,openText:j=h("open"),closeText:g=h("close"),hideCollapseText:k=!1,title:d,titleRowProps:O,defaultOpen:$,open:c,onToggle:u,arrowType:s="default",size:i="default",underline:S=!0,toggleLabel:y,iconOnly:B=!1,inverted:M=!1,...R}=N(x),p=`${r}__trigger`,f=`${r}__content`,T=`${r}__animate`,[b,L]=_.useState(()=>$),m=G.usePrint(),a=_.useMemo(()=>m||(c!==void 0?c:b),[m,c,b]),D=B===!0&&!d,z=M&&s!=="secondary",E=n.default(e.default["tedi-collapse"],i==="small"&&e.default["tedi-collapse--small"],a&&e.default["tedi-collapse--is-open"],D&&e.default["tedi-collapse--icon-only"],z&&e.default["tedi-collapse--inverted"],e.default[`tedi-collapse--arrow-${s}`],P),v=()=>{const l=!a;L(l),u==null||u(l)},K=l=>{(l.key==="Enter"||l.key===" ")&&!l.repeat&&(l.preventDefault(),v())},A=y||(a?g:j),q=_.useMemo(()=>t.jsx("div",{id:f,role:"region","aria-labelledby":p,className:e.default["tedi-collapse__content"],children:w}),[w,f,p]);return t.jsxs("div",{"data-name":"collapse",...R,className:E,children:[t.jsx("button",{id:p,type:"button","data-name":"collapse-trigger",className:e.default["tedi-collapse__title"],"aria-label":A,"aria-expanded":a,"aria-controls":f,onKeyDown:K,onClick:v,children:t.jsxs(C.Row,{justifyContent:"between",alignItems:"center",wrap:"nowrap",...O,element:"span",children:[d&&t.jsx(o.Col,{"aria-hidden":"true",children:d}),t.jsx(o.Col,{width:"auto",children:t.jsxs(C.Row,{element:"span",alignItems:"center",gutter:0,wrap:"nowrap",children:[t.jsx(Q.Print,{visibility:"hide",children:t.jsx(o.Col,{width:"auto",className:n.default({"visually-hidden":k}),children:t.jsx(J.Text,{element:"span",className:n.default(e.default["tedi-collapse__text"],{[e.default["tedi-collapse__text--underline"]]:S}),children:a?g:j})})}),t.jsx(o.Col,{width:"auto",children:t.jsx("div",{className:n.default(e.default["tedi-collapse__icon-wrapper"],e.default[`tedi-collapse__icon-wrapper--${s}`],i==="small"&&e.default["tedi-collapse__icon-wrapper--small"]),children:t.jsx(H.Icon,{className:n.default(e.default["tedi-collapse__icon"],e.default[`tedi-collapse__icon--${s}`],i==="small"&&e.default["tedi-collapse__icon--small"]),name:"expand_more",size:i==="small"||s==="secondary"?18:24})})})]})})]})}),m?q:t.jsx(F.default,{id:T,duration:300,height:a?"auto":0,"data-testid":"collapse-inner",children:q})]})};exports.Collapse=I;exports.default=I;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),s=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),H=require("../../../../../external/react-animate-height/dist/esm/index.cjs.js"),J=require("../../../providers/printing-provider/printing-provider.cjs.js"),Q=require("../../base/icon/icon.cjs.js"),U=require("../../base/typography/text/text.cjs.js"),V=require("../../misc/print/print.cjs.js"),e=require("./collapse.module.scss.cjs.js"),W=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),X=require("../../../providers/label-provider/use-labels.cjs.js"),N=require("../../layout/grid/row.cjs.js"),i=require("../../layout/grid/col.cjs.js"),P=x=>{const{getCurrentBreakpointProps:k}=W.useBreakpointProps(x.defaultServerBreakpoint),{getLabel:h}=X.useLabels(),{id:r,children:w,className:O,openText:j=h("open"),closeText:y=h("close"),hideCollapseText:$=!1,title:d,titleRowProps:S,defaultOpen:B,open:c,onToggle:u,arrowType:n="default",size:o="default",underline:M=!0,toggleLabel:g,iconOnly:R=!1,controlsId:v,inverted:T=!1,...L}=k(x),b=v!==void 0,p=`${r}__trigger`,f=`${r}__content`,D=`${r}__animate`,[C,E]=_.useState(()=>B),m=J.usePrint(),a=_.useMemo(()=>m||(c!==void 0?c:C),[m,c,C]),z=R===!0&&!d,K=T&&n!=="secondary",A=s.default(e.default["tedi-collapse"],o==="small"&&e.default["tedi-collapse--small"],a&&e.default["tedi-collapse--is-open"],z&&e.default["tedi-collapse--icon-only"],K&&e.default["tedi-collapse--inverted"],e.default[`tedi-collapse--arrow-${n}`],O),q=()=>{const l=!a;E(l),u==null||u(l)},F=l=>{(l.key==="Enter"||l.key===" ")&&!l.repeat&&(l.preventDefault(),q())},G=g||(a?y:j),I=_.useMemo(()=>t.jsx("div",{id:f,role:"region","aria-labelledby":p,className:e.default["tedi-collapse__content"],children:w}),[w,f,p]);return t.jsxs("div",{"data-name":"collapse",...L,className:A,children:[t.jsx("button",{id:p,type:"button","data-name":"collapse-trigger",className:e.default["tedi-collapse__title"],"aria-label":G,"aria-expanded":a,"aria-controls":b?v:f,onKeyDown:F,onClick:q,children:t.jsxs(N.Row,{justifyContent:"between",alignItems:"center",wrap:"nowrap",...S,element:"span",children:[d&&t.jsx(i.Col,{"aria-hidden":"true",children:d}),t.jsx(i.Col,{width:"auto",children:t.jsxs(N.Row,{element:"span",alignItems:"center",gutter:0,wrap:"nowrap",children:[t.jsx(V.Print,{visibility:"hide",children:t.jsx(i.Col,{width:"auto",className:s.default({"visually-hidden":$}),children:t.jsx(U.Text,{element:"span",className:s.default(e.default["tedi-collapse__text"],{[e.default["tedi-collapse__text--underline"]]:M}),children:a?y:j})})}),t.jsx(i.Col,{width:"auto",children:t.jsx("div",{className:s.default(e.default["tedi-collapse__icon-wrapper"],e.default[`tedi-collapse__icon-wrapper--${n}`],o==="small"&&e.default["tedi-collapse__icon-wrapper--small"]),children:t.jsx(Q.Icon,{className:s.default(e.default["tedi-collapse__icon"],e.default[`tedi-collapse__icon--${n}`],o==="small"&&e.default["tedi-collapse__icon--small"]),name:"expand_more",color:"inherit",size:o==="small"||n==="secondary"?18:24})})})]})})]})}),!b&&(m?I:t.jsx(H.default,{id:D,duration:300,height:a?"auto":0,"data-testid":"collapse-inner",children:I}))]})};exports.Collapse=P;exports.default=P;

package/src/tedi/components/buttons/collapse/collapse.d.ts

@@ -84,6 +84,21 @@ export interface CollapseProps extends BreakpointSupport<CollapseBreakpointProps
      * If provided, overrides the default open/close text for the accessible name.
      */
     toggleLabel?: string;
+    /**
+     * Use Collapse purely as a toggle trigger for content rendered elsewhere.
+     *
+     * When set, the toggle button's `aria-controls` points at the supplied id
+     * instead of Collapse's internal content panel, and the internal panel is
+     * **not rendered**. Useful when the disclosed region must live outside
+     * Collapse's DOM subtree (e.g. a table row whose details live in a
+     * sibling `<tr>`). The consumer is responsible for rendering the target
+     * element with the matching `id` and an appropriate `role` (typically
+     * `region`).
+     *
+     * When omitted (default), Collapse renders its own `children` inside a
+     * built-in `role="region"` panel.
+     */
+    controlsId?: string;
 }
 export declare const Collapse: (props: CollapseProps) => JSX.Element;
 export default Collapse;