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

package/src/tedi/components/content/accordion/accordion-item-header/accordion-item-header.d.ts

@@ -0,0 +1,134 @@
+import { default as React } from 'react';
+import { CollapseButtonArrowType, CollapseButtonSize } from '../../../buttons/collapse-button/collapse-button';
+export type AccordionItemHeaderTitleLayout = 'hug' | 'fill';
+export type AccordionItemHeaderExpandActionPosition = 'start' | 'end';
+export type AccordionItemHeaderHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export interface AccordionItemHeaderProps {
+    /**
+     * If false, disables header toggling and enables using interactive elements in the
+     * accordion header. The default expand action is still rendered alongside it unless
+     * `showDefaultExpandAction` is also set to `false`.
+     * @default true
+     */
+    headerClickable?: boolean;
+    /**
+     * Sets how the accordion title stretches horizontally.
+     *
+     * `hug` — wraps tightly around content.
+     *
+     * `fill` — expands to available space and pushes trailing elements to the end.
+     * @default hug
+     */
+    titleLayout?: AccordionItemHeaderTitleLayout;
+    /**
+     * Text shown when the accordion is collapsed. Rendered literally —
+     * translate at the call site if needed. When omitted, falls back to the
+     * `LabelProvider`'s translated `'open'` label.
+     */
+    openText?: string;
+    /**
+     * Text shown when the accordion is expanded. Rendered literally —
+     * translate at the call site if needed. When omitted, falls back to the
+     * `LabelProvider`'s translated `'close'` label.
+     */
+    closeText?: string;
+    /**
+     * Controls whether the expand/collapse label is shown.
+     * @default true
+     */
+    showExpandLabel?: boolean;
+    /**
+     * Controls whether the default expand/collapse action is shown.
+     * @default true
+     */
+    showDefaultExpandAction?: boolean;
+    /**
+     * Position of the expand action relative to the header content.
+     * @default end
+     */
+    expandActionPosition?: AccordionItemHeaderExpandActionPosition;
+    /**
+     * Chevron style of the default expand action.
+     * Only effective when `headerClickable` is `false` (otherwise the
+     * default expand action isn't a `CollapseButton`) and `showExpandLabel`
+     * is `false` (only icon-only mode honours `arrowType` — see the
+     * `CollapseButton` docs).
+     * @default 'default'
+     */
+    expandActionArrowType?: CollapseButtonArrowType;
+    /**
+     * Visual size of the default expand action. Only effective when
+     * `headerClickable` is `false`.
+     *
+     * When omitted, the size is derived from `showExpandLabel`:
+     * - `showExpandLabel === true`  → `'default'`
+     * - `showExpandLabel === false` → `'small'` (icon-only mode reads
+     *   better at the smaller chevron size).
+     *
+     * Pass an explicit value to override the derived default.
+     */
+    expandActionSize?: CollapseButtonSize;
+    /**
+     * Use the inverted (light-on-dark) palette for the default expand
+     * action, for placement on a dark or brand background. Only effective
+     * when `headerClickable` is `false`.
+     * @default false
+     */
+    expandActionInverted?: boolean;
+    /**
+     * Whether the default expand action's label is underlined. Defaults to
+     * `false` so the chevron stays the sole affordance — an underlined
+     * label inside the accordion header reads as a stray link. Set to
+     * `true` for contexts that want link-style styling. Only effective
+     * when `headerClickable` is `false` and the expand action is not in
+     * icon-only mode (i.e. `showExpandLabel` is `true`).
+     * @default false
+     */
+    expandActionUnderline?: boolean;
+    /**
+     * Custom CSS class for the accordion header.
+     */
+    headerClass?: string;
+    /**
+     * The accordion title content. Renders inside the header's title slot.
+     * Use a string for plain text, or a node for richer content.
+     */
+    title?: React.ReactNode;
+    /**
+     * Custom content rendered before the title.
+     */
+    beforeTitle?: React.ReactNode;
+    /**
+     * Custom content rendered after the title.
+     */
+    afterTitle?: React.ReactNode;
+    /**
+     * Custom action elements rendered at the start of the header.
+     */
+    startAction?: React.ReactNode;
+    /**
+     * Custom action elements rendered at the end of the header.
+     */
+    endAction?: React.ReactNode;
+    /**
+     * Custom description content rendered below the title (start of the header).
+     */
+    startDescription?: React.ReactNode;
+    /**
+     * Custom description content rendered at the end of the header.
+     */
+    endDescription?: React.ReactNode;
+    /**
+     * When set, wraps the header trigger in a semantic `<h1>`–`<h6>` element
+     * following the WAI-ARIA Accordion Pattern. Improves accessibility for
+     * documents with a heading hierarchy (FAQ pages, docs). The wrapper uses
+     * `display: contents` so it doesn't affect the visual layout — it only adds
+     * semantic information for assistive technologies and TOC tools.
+     */
+    headingLevel?: AccordionItemHeaderHeadingLevel;
+}
+export declare const AccordionItemHeader: {
+    (props: AccordionItemHeaderProps): JSX.Element;
+    displayName: string;
+};
+export default AccordionItemHeader;

package/src/tedi/components/content/accordion/accordion-item-header/accordion-item-header.es.js

@@ -0,0 +1,127 @@
+import { jsxs as a, Fragment as K, jsx as t } from "react/jsx-runtime";
+import d from "../../../../../../external/classnames/index.es.js";
+import { Icon as M } from "../../../base/icon/icon.es.js";
+import { Text as w } from "../../../base/typography/text/text.es.js";
+import { CollapseButton as Q } from "../../../buttons/collapse-button/collapse-button.es.js";
+import e from "../accordion.module.scss.es.js";
+import { useAccordionItemContext as R } from "../accordion-item/accordion-item-context.es.js";
+import { useLabels as V } from "../../../../providers/label-provider/use-labels.es.js";
+const X = (C) => {
+  const {
+    headerClickable: r = !0,
+    titleLayout: I = "hug",
+    openText: s,
+    closeText: l,
+    showExpandLabel: o = !0,
+    showDefaultExpandAction: m = !0,
+    expandActionPosition: h = "end",
+    expandActionArrowType: N = "default",
+    expandActionSize: T,
+    expandActionInverted: y = !1,
+    expandActionUnderline: E = !1,
+    headerClass: L,
+    title: c,
+    beforeTitle: H,
+    afterTitle: z,
+    startAction: D,
+    endAction: S,
+    startDescription: p,
+    endDescription: j,
+    headingLevel: x
+  } = C, { headerId: _, contentId: u, expanded: n, toggle: f, showIconCard: k, disabled: i } = R("Accordion.Item.Header"), { getLabel: g } = V(), B = s ?? g("open"), O = l ?? g("close"), F = n ? O : B, P = m && h === "start", U = m && h === "end", W = T ?? (o ? "default" : "small"), $ = d(
+    e["tedi-accordion-item-header"],
+    {
+      [e["tedi-accordion-item-header--hoverable"]]: r && !i,
+      [e["tedi-accordion-item-header--expanded"]]: n,
+      [e["tedi-accordion-item-header--with-icon-card"]]: k,
+      [e["tedi-accordion-item-header--disabled"]]: i
+    },
+    L
+  ), q = () => /* @__PURE__ */ t(
+    M,
+    {
+      name: "expand_more",
+      color: "inherit",
+      size: 16,
+      className: d(e["tedi-accordion-item-header__icon"], {
+        [e["tedi-accordion-item-header__icon--expanded"]]: n,
+        [e["tedi-accordion-item-header__icon--no-label"]]: !o
+      })
+    }
+  ), A = () => r ? /* @__PURE__ */ a(
+    "span",
+    {
+      className: d(e["tedi-accordion-item-header__expand-indicator"], {
+        [e["tedi-accordion-item-header__expand-indicator--with-label"]]: o
+      }),
+      children: [
+        /* @__PURE__ */ t(w, { element: "span", modifiers: "normal", children: o ? F : null }),
+        q()
+      ]
+    }
+  ) : /* @__PURE__ */ t(
+    Q,
+    {
+      open: n,
+      onOpenChange: () => f(),
+      openText: s,
+      closeText: l,
+      hideText: !o,
+      arrowType: N,
+      size: W,
+      inverted: y,
+      underline: E,
+      disabled: i,
+      "aria-controls": u,
+      "aria-disabled": i || void 0,
+      tabIndex: i ? -1 : void 0
+    }
+  ), b = /* @__PURE__ */ a(K, { children: [
+    /* @__PURE__ */ a("span", { className: e["tedi-accordion-item-header__start"], children: [
+      D,
+      H,
+      /* @__PURE__ */ a(
+        "span",
+        {
+          className: d(e["tedi-accordion-item-header__title"], {
+            [e["tedi-accordion-item-header__title--grow"]]: I === "fill",
+            [e["tedi-accordion-item-header__title--with-description"]]: p
+          }),
+          children: [
+            /* @__PURE__ */ a("span", { className: e["tedi-accordion-item-header__title-main"], children: [
+              P && A(),
+              c != null && /* @__PURE__ */ t(w, { element: "span", color: "secondary", modifiers: "normal", children: c })
+            ] }),
+            p
+          ]
+        }
+      ),
+      z
+    ] }),
+    j,
+    U && A(),
+    S
+  ] }), v = r ? /* @__PURE__ */ t(
+    "button",
+    {
+      type: "button",
+      id: _,
+      className: e["tedi-accordion-item-header__trigger"],
+      onClick: f,
+      disabled: i,
+      "aria-expanded": n,
+      "aria-controls": u,
+      children: b
+    }
+  ) : /* @__PURE__ */ t("div", { id: _, className: e["tedi-accordion-item-header__trigger"], children: b }), G = (() => {
+    if (!x) return v;
+    const J = `h${x}`;
+    return /* @__PURE__ */ t(J, { className: e["tedi-accordion-item-header__heading-wrapper"], children: v });
+  })();
+  return /* @__PURE__ */ t("div", { "data-name": "accordion-item-header", className: $, children: G });
+};
+X.displayName = "AccordionItemHeader";
+export {
+  X as AccordionItemHeader,
+  X as default
+};

package/src/tedi/components/content/accordion/accordion.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),C=require("../../../../../external/classnames/index.cjs.js"),e=require("react"),M=require("./accordion.module.scss.cjs.js"),R=require("./accordion-context.cjs.js"),b=require("./accordion-item/accordion-item.cjs.js"),j=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),f=c=>{const{getCurrentBreakpointProps:p}=j.useBreakpointProps(c.defaultServerBreakpoint),{children:x,className:v,allowMultiple:t=!1,defaultExpanded:i=!1,itemGap:a,...q}=p(c),g=a!==void 0?{"--tedi-accordion-item-gap":`${a}rem`}:void 0,r=e.useRef(new Map),s=e.useRef(t);s.current=t;const d=e.useCallback((o,n)=>(r.current.set(o,n),()=>{r.current.delete(o)}),[]),u=e.useCallback(o=>{s.current||r.current.forEach((n,A)=>{A!==o&&n(!1)})},[]),k=e.useMemo(()=>({allowMultiple:t,defaultExpanded:i,notifyExpanded:u,register:d}),[t,i,u,d]);return l.jsx(R.AccordionContext.Provider,{value:k,children:l.jsx("div",{"data-name":"accordion","data-testid":"tedi-accordion",...q,className:C.default(M.default["tedi-accordion"],v),style:g,children:x})})};f.displayName="Accordion";const m=Object.assign(f,{Item:b.AccordionItem});exports.Accordion=m;exports.default=m;

package/src/tedi/components/content/accordion/accordion.d.ts

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+import { BreakpointSupport } from '../../../helpers';
+type AccordionBreakpointProps = {
+    /**
+     * Additional class.
+     */
+    className?: string;
+    /**
+     * Whether the accordion allows multiple items to be expanded at the same time.
+     * If false, opening one item will collapse the others automatically.
+     * @default false
+     */
+    allowMultiple?: boolean;
+    /**
+     * Group-level default for items' initial expanded state. Sets the initial
+     * `defaultExpanded` for every child `Accordion.Item` that doesn't specify
+     * its own. Per-item `defaultExpanded` (including an explicit `false`)
+     * takes precedence.
+     *
+     * Typically combined with `allowMultiple` to start with all items open.
+     * @default false
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Vertical gap between sibling `Accordion.Item` components in rem
+     * Accepts any number, not limited to a fixed scale.
+     *
+     * Forwarded as the `--tedi-accordion-item-gap` CSS variable, so consumers
+     * can also override it from any ancestor class — or set a px value there
+     * directly when an exact-pixel override is needed.
+     *
+     * When omitted, falls back to the design-token default
+     * (`var(--layout-grid-gutters-08)` = 0.5rem).
+     */
+    itemGap?: number;
+};
+export interface AccordionProps extends BreakpointSupport<AccordionBreakpointProps> {
+    /**
+     * Accordion content. Should be one or more `AccordionItem` components.
+     */
+    children?: React.ReactNode;
+}
+export declare const Accordion: {
+    (props: AccordionProps): JSX.Element;
+    displayName: string;
+} & {
+    Item: {
+        (props: import('./accordion-item/accordion-item').AccordionItemProps): JSX.Element;
+        displayName: string;
+    } & {
+        Header: {
+            (props: import('.').AccordionItemHeaderProps): JSX.Element;
+            displayName: string;
+        };
+        Content: {
+            (props: import('.').AccordionItemContentProps): JSX.Element;
+            displayName: string;
+        };
+    };
+};
+export default Accordion;

package/src/tedi/components/content/accordion/accordion.es.js

@@ -0,0 +1,52 @@
+import { jsx as m } from "react/jsx-runtime";
+import C from "../../../../../external/classnames/index.es.js";
+import e from "react";
+import R from "./accordion.module.scss.es.js";
+import { AccordionContext as g } from "./accordion-context.es.js";
+import { AccordionItem as M } from "./accordion-item/accordion-item.es.js";
+import { useBreakpointProps as N } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const u = (a) => {
+  const { getCurrentBreakpointProps: f } = N(a.defaultServerBreakpoint), {
+    children: p,
+    className: v,
+    allowMultiple: t = !1,
+    defaultExpanded: c = !1,
+    itemGap: i,
+    ...x
+  } = f(a), k = i !== void 0 ? { "--tedi-accordion-item-gap": `${i}rem` } : void 0, r = e.useRef(/* @__PURE__ */ new Map()), s = e.useRef(t);
+  s.current = t;
+  const l = e.useCallback((o, n) => (r.current.set(o, n), () => {
+    r.current.delete(o);
+  }), []), d = e.useCallback((o) => {
+    s.current || r.current.forEach((n, A) => {
+      A !== o && n(!1);
+    });
+  }, []), y = e.useMemo(
+    () => ({
+      allowMultiple: t,
+      defaultExpanded: c,
+      notifyExpanded: d,
+      register: l
+    }),
+    [t, c, d, l]
+  );
+  return /* @__PURE__ */ m(g.Provider, { value: y, children: /* @__PURE__ */ m(
+    "div",
+    {
+      "data-name": "accordion",
+      "data-testid": "tedi-accordion",
+      ...x,
+      className: C(R["tedi-accordion"], v),
+      style: k,
+      children: p
+    }
+  ) });
+};
+u.displayName = "Accordion";
+const I = Object.assign(u, {
+  Item: M
+});
+export {
+  I as Accordion,
+  I as default
+};

package/src/tedi/components/content/accordion/accordion.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-accordion":"tedi-accordion-3008127b","tedi-accordion__item":"tedi-accordion__item-c42537a8","tedi-accordion__item--selected":"tedi-accordion__item--selected-39cde887","tedi-accordion-item-header":"tedi-accordion-item-header-4a087734","tedi-accordion__item--expanded":"tedi-accordion__item--expanded-ce6f4283","tedi-accordion-item-content":"tedi-accordion-item-content-64aa3ef4","tedi-accordion__icon-card":"tedi-accordion__icon-card-9281697b","tedi-accordion-item-header--with-icon-card":"tedi-accordion-item-header--with-icon-card-7faff869","tedi-accordion-item-content--with-icon-card":"tedi-accordion-item-content--with-icon-card-1d759b0e","tedi-accordion-item-header--expanded":"tedi-accordion-item-header--expanded-449f0882","tedi-accordion__item--disabled":"tedi-accordion__item--disabled-49d29cad","tedi-accordion-item-header--hoverable":"tedi-accordion-item-header--hoverable-5a372e7b","tedi-accordion-item-header__trigger":"tedi-accordion-item-header__trigger-6164d1c8","tedi-accordion-item-header--disabled":"tedi-accordion-item-header--disabled-5532ac3a","tedi-accordion-item-header__heading-wrapper":"tedi-accordion-item-header__heading-wrapper-d419d1f0","tedi-accordion-item-header__start":"tedi-accordion-item-header__start-5c55e3cc","tedi-accordion-item-header__title":"tedi-accordion-item-header__title-678c469e","tedi-accordion-item-header__title-main":"tedi-accordion-item-header__title-main-2222462a","tedi-accordion-item-header__title--with-description":"tedi-accordion-item-header__title--with-description-3f5a3f28","tedi-accordion-item-header__title--grow":"tedi-accordion-item-header__title--grow-30e8c5c7","tedi-accordion-item-header__expand-indicator":"tedi-accordion-item-header__expand-indicator-b9c89257","tedi-accordion-item-header__icon":"tedi-accordion-item-header__icon-4ca47f34","tedi-accordion-item-header__expand-indicator--with-label":"tedi-accordion-item-header__expand-indicator--with-label-c274165b","tedi-accordion-item-header__icon--expanded":"tedi-accordion-item-header__icon--expanded-6e63d6cf","tedi-accordion-item-header__icon--no-label":"tedi-accordion-item-header__icon--no-label-95a984be","tedi-accordion-item-content__inner":"tedi-accordion-item-content__inner-cbfa362f","tedi-accordion__item--with-icon-card":"tedi-accordion__item--with-icon-card-9af46a70"};exports.default=e;

package/src/tedi/components/content/accordion/accordion.module.scss.es.js

@@ -0,0 +1,32 @@
+const e = {
+  "tedi-accordion": "tedi-accordion-3008127b",
+  "tedi-accordion__item": "tedi-accordion__item-c42537a8",
+  "tedi-accordion__item--selected": "tedi-accordion__item--selected-39cde887",
+  "tedi-accordion-item-header": "tedi-accordion-item-header-4a087734",
+  "tedi-accordion__item--expanded": "tedi-accordion__item--expanded-ce6f4283",
+  "tedi-accordion-item-content": "tedi-accordion-item-content-64aa3ef4",
+  "tedi-accordion__icon-card": "tedi-accordion__icon-card-9281697b",
+  "tedi-accordion-item-header--with-icon-card": "tedi-accordion-item-header--with-icon-card-7faff869",
+  "tedi-accordion-item-content--with-icon-card": "tedi-accordion-item-content--with-icon-card-1d759b0e",
+  "tedi-accordion-item-header--expanded": "tedi-accordion-item-header--expanded-449f0882",
+  "tedi-accordion__item--disabled": "tedi-accordion__item--disabled-49d29cad",
+  "tedi-accordion-item-header--hoverable": "tedi-accordion-item-header--hoverable-5a372e7b",
+  "tedi-accordion-item-header__trigger": "tedi-accordion-item-header__trigger-6164d1c8",
+  "tedi-accordion-item-header--disabled": "tedi-accordion-item-header--disabled-5532ac3a",
+  "tedi-accordion-item-header__heading-wrapper": "tedi-accordion-item-header__heading-wrapper-d419d1f0",
+  "tedi-accordion-item-header__start": "tedi-accordion-item-header__start-5c55e3cc",
+  "tedi-accordion-item-header__title": "tedi-accordion-item-header__title-678c469e",
+  "tedi-accordion-item-header__title-main": "tedi-accordion-item-header__title-main-2222462a",
+  "tedi-accordion-item-header__title--with-description": "tedi-accordion-item-header__title--with-description-3f5a3f28",
+  "tedi-accordion-item-header__title--grow": "tedi-accordion-item-header__title--grow-30e8c5c7",
+  "tedi-accordion-item-header__expand-indicator": "tedi-accordion-item-header__expand-indicator-b9c89257",
+  "tedi-accordion-item-header__icon": "tedi-accordion-item-header__icon-4ca47f34",
+  "tedi-accordion-item-header__expand-indicator--with-label": "tedi-accordion-item-header__expand-indicator--with-label-c274165b",
+  "tedi-accordion-item-header__icon--expanded": "tedi-accordion-item-header__icon--expanded-6e63d6cf",
+  "tedi-accordion-item-header__icon--no-label": "tedi-accordion-item-header__icon--no-label-95a984be",
+  "tedi-accordion-item-content__inner": "tedi-accordion-item-content__inner-cbfa362f",
+  "tedi-accordion__item--with-icon-card": "tedi-accordion__item--with-icon-card-9af46a70"
+};
+export {
+  e as default
+};

package/src/tedi/components/content/accordion/index.d.ts

@@ -0,0 +1,6 @@
+export * from './accordion';
+export * from './accordion-context';
+export * from './accordion-item/accordion-item';
+export * from './accordion-item/accordion-item-context';
+export * from './accordion-item-header/accordion-item-header';
+export * from './accordion-item-content/accordion-item-content';

package/src/tedi/components/content/calendar/calendar-grid.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../../../external/classnames/index.cjs.js"),a=require("../../base/typography/text/text.cjs.js"),l=require("../../buttons/button/button.cjs.js"),r=require("./calendar.module.scss.cjs.js"),j=require("../../layout/grid/row.cjs.js"),h=require("../../layout/grid/col.cjs.js"),s=({headerLabel:u,prevAriaLabel:n,nextAriaLabel:c,onPrev:o,onNext:f,items:x,onSelect:p,showNavigation:d,className:_})=>e.jsxs("div",{className:t.default(r.default["tedi-calendar__picker-grid-container"],_),"data-testid":"tedi-picker-grid-container",children:[e.jsxs("div",{className:t.default(r.default["tedi-calendar__picker-grid-header"],{[r.default["tedi-calendar__picker--no-navigation"]]:!d}),children:[d&&e.jsx(l.Button,{type:"button",onClick:o,"aria-label":n,icon:"arrow_back",visualType:"neutral",children:e.jsx(a.Text,{modifiers:"capitalize-first",children:n})}),e.jsx(a.Text,{modifiers:"capitalize-first",children:u}),d&&e.jsx(l.Button,{type:"button",onClick:f,"aria-label":c,icon:"arrow_forward",visualType:"neutral",children:e.jsx(a.Text,{modifiers:"capitalize-first",children:c})})]}),e.jsx("div",{className:t.default(r.default["tedi-calendar__picker-grid"]),children:e.jsx(j.Row,{gutter:2,children:x.map(i=>e.jsx(h.Col,{width:4,children:e.jsx(l.Button,{onClick:()=>p(i.value),className:t.default(r.default["tedi-calendar__grid-button"],{[r.default["tedi-calendar__grid-button--selected"]]:i.isSelected}),"aria-pressed":i.isSelected,noStyle:!0,children:i.label})},i.key))})})]});s.displayName="CalendarGrid";exports.CalendarGrid=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../../../../external/classnames/index.cjs.js"),a=require("../../base/typography/text/text.cjs.js"),l=require("../../buttons/button/button.cjs.js"),r=require("./calendar.module.scss.cjs.js"),j=require("../../layout/grid/row.cjs.js"),h=require("../../layout/grid/col.cjs.js"),s=({headerLabel:u,prevAriaLabel:n,nextAriaLabel:c,onPrev:o,onNext:f,items:x,onSelect:p,showNavigation:d,className:_})=>e.jsxs("div",{className:i.default(r.default["tedi-calendar__picker-grid-container"],_),"data-testid":"tedi-picker-grid-container",children:[e.jsxs("div",{className:i.default(r.default["tedi-calendar__picker-grid-header"],{[r.default["tedi-calendar__picker--no-navigation"]]:!d}),children:[d&&e.jsx(l.Button,{type:"button",onClick:o,"aria-label":n,icon:"arrow_back",visualType:"neutral",children:e.jsx(a.Text,{modifiers:"capitalize-first",children:n})}),e.jsx(a.Text,{modifiers:"capitalize-first",children:u}),d&&e.jsx(l.Button,{type:"button",onClick:f,"aria-label":c,icon:"arrow_forward",visualType:"neutral",children:e.jsx(a.Text,{modifiers:"capitalize-first",children:c})})]}),e.jsx("div",{className:i.default(r.default["tedi-calendar__picker-grid"]),children:e.jsx(j.Row,{gutter:2,children:x.map(t=>e.jsx(h.Col,{width:4,children:e.jsx(l.Button,{onClick:()=>p(t.value),className:i.default(r.default["tedi-calendar__grid-button"],{[r.default["tedi-calendar__grid-button--selected"]]:t.isSelected}),"aria-pressed":t.isSelected,"data-testid":"tedi-calendar-grid-cell",noStyle:!0,children:t.label})},t.key))})})]});s.displayName="CalendarGrid";exports.CalendarGrid=s;

package/src/tedi/components/content/calendar/calendar-grid.es.js

@@ -1,7 +1,7 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import a from "../../../../../external/classnames/index.es.js";
-import { Text as l } from "../../base/typography/text/text.es.js";
-import { Button as t } from "../../buttons/button/button.es.js";
+import { Text as t } from "../../base/typography/text/text.es.js";
+import { Button as l } from "../../buttons/button/button.es.js";
 import r from "./calendar.module.scss.es.js";
 import { Row as h } from "../../layout/grid/row.es.js";
 import { Col as k } from "../../layout/grid/col.es.js";
@@ -28,20 +28,21 @@ const y = ({
             [r["tedi-calendar__picker--no-navigation"]]: !d
           }),
           children: [
-            d && /* @__PURE__ */ e(t, { type: "button", onClick: p, "aria-label": c, icon: "arrow_back", visualType: "neutral", children: /* @__PURE__ */ e(l, { modifiers: "capitalize-first", children: c }) }),
-            /* @__PURE__ */ e(l, { modifiers: "capitalize-first", children: s }),
-            d && /* @__PURE__ */ e(t, { type: "button", onClick: m, "aria-label": n, icon: "arrow_forward", visualType: "neutral", children: /* @__PURE__ */ e(l, { modifiers: "capitalize-first", children: n }) })
+            d && /* @__PURE__ */ e(l, { type: "button", onClick: p, "aria-label": c, icon: "arrow_back", visualType: "neutral", children: /* @__PURE__ */ e(t, { modifiers: "capitalize-first", children: c }) }),
+            /* @__PURE__ */ e(t, { modifiers: "capitalize-first", children: s }),
+            d && /* @__PURE__ */ e(l, { type: "button", onClick: m, "aria-label": n, icon: "arrow_forward", visualType: "neutral", children: /* @__PURE__ */ e(t, { modifiers: "capitalize-first", children: n }) })
           ]
         }
       ),
       /* @__PURE__ */ e("div", { className: a(r["tedi-calendar__picker-grid"]), children: /* @__PURE__ */ e(h, { gutter: 2, children: f.map((i) => /* @__PURE__ */ e(k, { width: 4, children: /* @__PURE__ */ e(
-        t,
+        l,
         {
           onClick: () => _(i.value),
           className: a(r["tedi-calendar__grid-button"], {
             [r["tedi-calendar__grid-button--selected"]]: i.isSelected
           }),
           "aria-pressed": i.isSelected,
+          "data-testid": "tedi-calendar-grid-cell",
           noStyle: !0,
           children: i.label
         }

package/src/tedi/components/content/calendar/calendar.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),O=require("../../../../../external/classnames/index.cjs.js"),d=require("./calendar.module.scss.cjs.js"),w=require("./components/calendar-header/calendar-header.cjs.js"),C=require("./components/calendar-month-grid/calendar-month-grid.cjs.js"),E=require("./components/calendar-year-grid/calendar-year-grid.cjs.js"),F=require("../../../../../external/react-day-picker/dist/esm/DayPicker.cjs.js"),H=require("../../../../../external/react-day-picker/dist/esm/locale/et.cjs.js"),A=({view:s="days",selectionLevel:m="days",currentMonth:c,setCurrentMonth:i,setView:l=()=>"days",mode:S="single",value:a,locale:j=H.et,localeCode:g="et-EE",showOutsideDays:q=!0,disabledMatchers:x,required:b,availableDays:t,unavailableDays:n,footer:k,monthYearSelectType:G,handleSelect:Y,applyValue:y,showNavigation:_=!0,className:u,...P})=>{const h=e=>t?Array.isArray(t)?t.some(f=>f.toDateString()===e.toDateString()):t(e):!0,p=e=>n?Array.isArray(n)?n.some(f=>f.toDateString()===e.toDateString()):n(e):!1,o=[...x??[],...t?[e=>!h(e)]:[],...n?[e=>p(e)]:[]],N=(()=>{switch(S){case"multiple":return{mode:"multiple",selected:Array.isArray(a)?a:void 0};case"range":return{mode:"range",selected:a&&!Array.isArray(a)&&!(a instanceof Date)?a:void 0};default:return{mode:"single",selected:a instanceof Date?a:void 0}}})();return r.jsxs("div",{className:d.default["tedi-calendar__wrapper"],children:[s==="years"&&r.jsx(E.YearGrid,{currentMonth:c,onNavigate:i,showNavigation:_,onSelectYear:e=>{i(e),m==="years"?y(new Date(e.getFullYear(),0,1)):l("months")},className:u}),s==="months"&&r.jsx(C.MonthGrid,{currentMonth:c,onNavigate:i,showNavigation:_,localeCode:g,onSelectMonth:e=>{i(e),m==="months"?y(e):l("days")},className:u}),s==="days"&&r.jsx(F.DayPicker,{...P,...N,locale:j,month:c,onMonthChange:i,showOutsideDays:q,disabled:o.length?o:void 0,required:b,components:{MonthCaption:e=>r.jsx(w.CalendarHeader,{...e,monthYearSelectType:G,onOpenMonthGrid:()=>l("months"),onOpenYearGrid:()=>l("years"),showNavigation:_,localeCode:g,disabledMatchers:o.length?o:void 0}),Nav:()=>r.jsx(r.Fragment,{})},footer:k,classNames:{root:O.default(d.default["tedi-calendar"],u),month_caption:d.default["tedi-calendar__caption"],head:d.default["tedi-calendar__head"],row:d.default["tedi-calendar__row"],day:d.default["tedi-calendar__day"],selected:d.default["tedi-calendar__day--selected"],weekday:d.default["tedi-calendar__weekday"],outside:d.default["tedi-calendar__outside-days"],range_start:d.default["tedi-calendar__range-start"],range_middle:d.default["tedi-calendar__range-middle"],range_end:d.default["tedi-calendar__range-end"],today:d.default["tedi-calendar__today"],disabled:d.default["tedi-calendar__disabled"],month:d.default["tedi-calendar__month"],months:d.default["tedi-calendar__months-container"],footer:d.default["tedi-calendar__footer"],week_number:d.default["tedi-calendar__week-number"]},modifiers:{available:e=>t?h(e):!1,unavailable:e=>n?p(e):!1},modifiersClassNames:{available:d.default["tedi-calendar__available-day"],unavailable:d.default["tedi-calendar__unavailable-day"]},onSelect:Y})]})};A.displayName="Calendar";exports.Calendar=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),S=require("../../../../../external/classnames/index.cjs.js"),a=require("./calendar.module.scss.cjs.js"),F=require("./components/calendar-header/calendar-header.cjs.js"),H=require("./components/calendar-month-grid/calendar-month-grid.cjs.js"),M=require("./components/calendar-year-grid/calendar-year-grid.cjs.js"),R=require("../../../../../external/react-day-picker/dist/esm/DayPicker.cjs.js"),T=require("../../../../../external/react-day-picker/dist/esm/locale/et.cjs.js"),j=({view:o="days",selectionLevel:f="days",currentMonth:c,setCurrentMonth:i,setView:l=()=>"days",mode:q="single",value:d,locale:x=T.et,localeCode:m="et-EE",showOutsideDays:N=!0,disabledMatchers:k,required:G,availableDays:t,unavailableDays:n,footer:Y,monthYearSelectType:C,handleSelect:P,applyValue:g,showNavigation:_=!0,className:y,bordered:O=!0,...w})=>{const h=O?void 0:a.default["tedi-calendar--borderless"],p=S.default(h,y),b=e=>t?Array.isArray(t)?t.some(u=>u.toDateString()===e.toDateString()):t(e):!0,A=e=>n?Array.isArray(n)?n.some(u=>u.toDateString()===e.toDateString()):n(e):!1,s=[...k??[],...t?[e=>!b(e)]:[],...n?[e=>A(e)]:[]],E=(()=>{switch(q){case"multiple":return{mode:"multiple",selected:Array.isArray(d)?d:void 0};case"range":return{mode:"range",selected:d&&!Array.isArray(d)&&!(d instanceof Date)?d:void 0};default:return{mode:"single",selected:d instanceof Date?d:void 0}}})();return r.jsxs("div",{className:a.default["tedi-calendar__wrapper"],children:[o==="years"&&r.jsx(M.YearGrid,{currentMonth:c,onNavigate:i,showNavigation:_,onSelectYear:e=>{i(e),f==="years"?g(new Date(e.getFullYear(),0,1)):l("months")},className:p}),o==="months"&&r.jsx(H.MonthGrid,{currentMonth:c,onNavigate:i,showNavigation:_,localeCode:m,onSelectMonth:e=>{i(e),f==="months"?g(e):l("days")},className:p}),o==="days"&&r.jsx(R.DayPicker,{...w,...E,locale:x,month:c,onMonthChange:i,showOutsideDays:N,disabled:s.length?s:void 0,required:G,components:{MonthCaption:e=>r.jsx(F.CalendarHeader,{...e,monthYearSelectType:C,onOpenMonthGrid:()=>l("months"),onOpenYearGrid:()=>l("years"),showNavigation:_,localeCode:m,disabledMatchers:s.length?s:void 0}),Nav:()=>r.jsx(r.Fragment,{})},footer:Y,classNames:{root:S.default(a.default["tedi-calendar"],h,y),month_caption:a.default["tedi-calendar__caption"],head:a.default["tedi-calendar__head"],row:a.default["tedi-calendar__row"],day:a.default["tedi-calendar__day"],selected:a.default["tedi-calendar__day--selected"],weekday:a.default["tedi-calendar__weekday"],outside:a.default["tedi-calendar__outside-days"],range_start:a.default["tedi-calendar__range-start"],range_middle:a.default["tedi-calendar__range-middle"],range_end:a.default["tedi-calendar__range-end"],today:a.default["tedi-calendar__today"],disabled:a.default["tedi-calendar__disabled"],month:a.default["tedi-calendar__month"],months:a.default["tedi-calendar__months-container"],footer:a.default["tedi-calendar__footer"],week_number:a.default["tedi-calendar__week-number"]},modifiers:{available:e=>t?b(e):!1,unavailable:e=>n?A(e):!1},modifiersClassNames:{available:a.default["tedi-calendar__available-day"],unavailable:a.default["tedi-calendar__unavailable-day"]},onSelect:P})]})};j.displayName="Calendar";exports.Calendar=j;

package/src/tedi/components/content/calendar/calendar.d.ts

@@ -107,8 +107,16 @@ export interface CalendarProps extends Omit<DayPickerProps, 'mode' | 'selected'
      * Optional additional CSS class for the calendar container.
      */
     className?: string;
+    /**
+     * Whether to render the surrounding card (border, background, radius).
+     * Set to `false` when embedding inside a parent that already provides
+     * its own surface — e.g. alongside a calendar inside `DateTimeField`.
+     * The inner gradient masks and column separators are preserved either way.
+     * @default true
+     */
+    bordered?: boolean;
 }
 export declare const Calendar: {
-    ({ view, selectionLevel, currentMonth, setCurrentMonth, setView, mode, value, locale, localeCode, showOutsideDays, disabledMatchers, required, availableDays, unavailableDays, footer, monthYearSelectType, handleSelect, applyValue, showNavigation, className, ...dayPickerProps }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+    ({ view, selectionLevel, currentMonth, setCurrentMonth, setView, mode, value, locale, localeCode, showOutsideDays, disabledMatchers, required, availableDays, unavailableDays, footer, monthYearSelectType, handleSelect, applyValue, showNavigation, className, bordered, ...dayPickerProps }: CalendarProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };