@dnanpm/ui-components 0.7.0 → 0.9.0

package/dist/components/ContentCard/ContentCard.css

@@ -0,0 +1,249 @@
+@layer dds-base, dds-components;
+
+@layer dds-components { @layer fallback, components; }
+
+@layer dds-components.components{/*
+ * Content Card
+ *
+ * Container-driven layout: horizontal when the card is >= 40rem wide, vertical below.
+ * Title size responds to the CONTENT AREA width (its own container). Content padding
+ * responds to both the content-area width and the layout mode. Body size and inner
+ * gaps stay constant across sizes.
+ */
+
+._content-card_1pa46_10 {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+    /* Reset the base list-item margin when the root renders as <li>. */
+    margin: 0;
+    background-color: var(--color-semantic-surface-base);
+    border-radius: var(--radius-semantic-md);
+    /* Clips media corners to the card radius; the card's own box-shadow is not clipped. */
+    overflow: clip;
+    container-name: content-card;
+    container-type: inline-size;
+}
+
+._content-card--border_1pa46_25 {
+    border: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-base);
+}
+
+/* Layout wrapper: a descendant of the container so its direction can respond to card width. */
+._content-card__layout_1pa46_30 {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    width: 100%;
+}
+
+/* ─── Media ─── */
+
+._content-card__media_1pa46_39 {
+    position: relative;
+    width: 100%;
+}
+
+._content-card__media--image_1pa46_44 {
+    aspect-ratio: 21 / 9;
+}
+
+._content-card__media--logo_1pa46_48 {
+    aspect-ratio: 21 / 9;
+    background-color: var(--_cc-logo-bg, var(--color-semantic-surface-neutral-mid));
+}
+
+/* Absolute inner fills the media box so content can't stretch the aspect ratio. */
+._content-card__media-inner_1pa46_54 {
+    position: absolute;
+    inset: 0;
+
+    /* Descendant selector also reaches an <img> nested inside a <picture>. */
+    & :where(img, picture, video, svg, canvas) {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+/* Logo sits in a centered 4:3 box and is contained within it. */
+._content-card__media--logo_1pa46_48 ._content-card__media-inner_1pa46_54 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-space-24);
+
+    & :where(img, picture, video, svg, canvas) {
+        width: auto;
+        height: 100%;
+        max-width: 100%;
+        aspect-ratio: 4 / 3;
+        object-fit: contain;
+    }
+}
+
+/* ─── Content ─── */
+
+._content-card__content_1pa46_85 {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+    container-name: content-card-content;
+    container-type: inline-size;
+}
+
+/* Padded stack: a descendant of the content container so padding can respond to content width. */
+._content-card__content-inner_1pa46_95 {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--spacing-space-24);
+    /* Vertical layout, small content width. */
+    padding: var(--spacing-space-20) var(--spacing-space-20) var(--spacing-space-32);
+}
+
+._content-card__body-region_1pa46_104 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-space-20);
+}
+
+._content-card__header_1pa46_110 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-space-4);
+}
+
+._content-card__prefix_1pa46_116 {
+    align-self: flex-start;
+}
+
+._content-card__title_1pa46_120 {
+    margin: 0;
+    color: var(--color-semantic-foreground-default);
+    font: var(--typography-heading-sm);
+    text-wrap: balance;
+    overflow-wrap: break-word;
+    hyphens: auto;
+    /* Only hyphenate words of >= 12 chars (min 6 before / 3 after the break). */
+    hyphenate-limit-chars: 12 6 3;
+}
+
+._content-card__body_1pa46_104 {
+    margin: 0;
+    color: var(--color-semantic-foreground-default);
+    font: var(--typography-body-md);
+    text-wrap: pretty;
+    overflow-wrap: break-word;
+    hyphens: auto;
+    /* Only hyphenate words of >= 12 chars (min 6 before / 3 after the break). */
+    hyphenate-limit-chars: 12 6 3;
+}
+
+._content-card__body_1pa46_104 p {
+    margin: 0;
+}
+
+._content-card__body_1pa46_104 p + p {
+    margin-top: var(--spacing-space-12);
+}
+
+._content-card__actions_1pa46_150 {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--spacing-space-8);
+    /* Vertical mode only: keeps actions at the bottom when the card is taller than its content
+       (e.g. equal-height grid). Reset in the horizontal layout below. */
+    margin-top: auto;
+}
+
+/* ─── Content-area size steps (vertical paddings; based on content width) ─── */
+
+@container content-card-content (min-width: 24rem) {
+    ._content-card__content-inner_1pa46_95 {
+        padding: var(--spacing-space-24) var(--spacing-space-40) var(--spacing-space-40);
+    }
+
+    ._content-card__title_1pa46_120 {
+        font: var(--typography-heading-md);
+    }
+}
+
+@container content-card-content (min-width: 36rem) {
+    ._content-card__content-inner_1pa46_95 {
+        padding: var(--spacing-space-32) var(--spacing-space-64) var(--spacing-space-48);
+    }
+}
+
+/* ─── Horizontal layout (card wide enough) ─── */
+
+@container content-card (min-width: 40rem) {
+    ._content-card__layout_1pa46_30 {
+        flex-direction: row;
+    }
+
+    ._content-card--media-end_1pa46_186 ._content-card__layout_1pa46_30 {
+        flex-direction: row-reverse;
+    }
+
+    ._content-card__media_1pa46_39 {
+        align-self: stretch;
+        /* Non-shrinking basis so mediaWidth is honoured even next to long content. */
+        flex: 0 0 33.3333%;
+        aspect-ratio: auto;
+    }
+
+    ._content-card--media-half_1pa46_197 ._content-card__media_1pa46_39 {
+        flex-basis: 50%;
+    }
+
+    /* Content is vertically centered against the media in the horizontal layout. */
+    ._content-card__content_1pa46_85 {
+        align-self: center;
+    }
+
+    ._content-card__actions_1pa46_150 {
+        margin-top: 0;
+    }
+
+    /* Minimum media height follows a 4:3 shape of its own width. */
+    ._content-card__media--image_1pa46_44::before {
+        content: '';
+        display: block;
+        padding-top: 75%;
+    }
+
+    /* Horizontal paddings override the vertical ones, still stepping by content width. */
+    ._content-card__content-inner_1pa46_95 {
+        padding: var(--spacing-space-32) var(--spacing-space-20);
+    }
+
+    @container content-card-content (min-width: 24rem) {
+        ._content-card__content-inner_1pa46_95 {
+            padding: var(--spacing-space-40);
+        }
+    }
+
+    @container content-card-content (min-width: 36rem) {
+        ._content-card__content-inner_1pa46_95 {
+            padding: var(--spacing-space-48) var(--spacing-space-64);
+        }
+    }
+}
+
+/* ─── Forced colors ─── */
+
+@media (forced-colors: active) {
+    ._content-card_1pa46_10 {
+        border: var(--borderwidth-semantic-xs) solid CanvasText;
+    }
+
+    ._content-card--elevated_1pa46_242 {
+        box-shadow: none;
+    }
+} }

package/dist/components/ContentCard/ContentCard.d.ts

@@ -0,0 +1,3 @@
+import { ContentCardProps } from './ContentCard.types';
+export declare const ContentCard: ({ media, mediaKind, mediaBackground, mediaWidth, mediaPosition, titlePrefix, title, headingLevel, body, actions, appearance, as, className, ref, ...props }: ContentCardProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ContentCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentCard.d.ts","sourceRoot":"","sources":["../../../src/components/ContentCard/ContentCard.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAA6B,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAkBvF,eAAO,MAAM,WAAW,GAAI,6JAgBzB,gBAAgB,4CA+ElB,CAAC"}

package/dist/components/ContentCard/ContentCard.js

@@ -0,0 +1,96 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import elevationStyles from "../../styles/utils/elevation.module.css.js";
+import styles from "./ContentCard.module.css.js";
+import { cn } from "../../utils/cn/cn.js";
+const logoBackgroundToken = {
+  white: "var(--color-semantic-surface-base)",
+  "sand-soft": "var(--color-semantic-surface-neutral-soft)",
+  "sand-mid": "var(--color-semantic-surface-neutral-mid)",
+  "sand-strong": "var(--color-semantic-surface-neutral-strong)",
+  "pink-soft": "var(--color-semantic-surface-primary-soft)",
+  "pink-mid": "var(--color-semantic-surface-primary-mid)",
+  "pink-strong": "var(--color-semantic-surface-primary-strong)",
+  "plum-soft": "var(--color-semantic-surface-secondary-soft)",
+  "plum-mid": "var(--color-semantic-surface-secondary-mid)",
+  "plum-strong": "var(--color-semantic-surface-secondary-strong)"
+};
+const isRenderable = (node) => node != null && typeof node !== "boolean";
+const ContentCard = ({
+  media,
+  mediaKind = "image",
+  mediaBackground,
+  mediaWidth = "1/3",
+  mediaPosition = "start",
+  titlePrefix,
+  title,
+  headingLevel = "h3",
+  body,
+  actions,
+  appearance = "plain",
+  as = "article",
+  className,
+  ref,
+  ...props
+}) => {
+  const titleId = useId();
+  const HeadingLevel = headingLevel;
+  const Root = as;
+  const hasMedia = isRenderable(media);
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"] ?? (ariaLabel || as === "div" ? void 0 : titleId);
+  return /* @__PURE__ */ jsx(
+    Root,
+    {
+      ref,
+      ...props,
+      className: cn(
+        styles["content-card"],
+        hasMedia && mediaWidth === "1/2" && styles["content-card--media-half"],
+        hasMedia && mediaPosition === "end" && styles["content-card--media-end"],
+        appearance === "border" && styles["content-card--border"],
+        appearance === "elevated" && styles["content-card--elevated"],
+        appearance === "elevated" && elevationStyles.elevationLow,
+        className
+      ),
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      children: /* @__PURE__ */ jsxs("div", { className: styles["content-card__layout"], children: [
+        hasMedia && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              styles["content-card__media"],
+              mediaKind === "logo" ? styles["content-card__media--logo"] : styles["content-card__media--image"]
+            ),
+            style: mediaKind === "logo" && mediaBackground != null ? {
+              "--_cc-logo-bg": logoBackgroundToken[mediaBackground]
+            } : void 0,
+            children: /* @__PURE__ */ jsx("div", { className: styles["content-card__media-inner"], children: media })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: styles["content-card__content"], children: /* @__PURE__ */ jsxs("div", { className: styles["content-card__content-inner"], children: [
+          /* @__PURE__ */ jsxs("div", { className: styles["content-card__body-region"], children: [
+            /* @__PURE__ */ jsxs("div", { className: styles["content-card__header"], children: [
+              isRenderable(titlePrefix) && /* @__PURE__ */ jsx("div", { className: styles["content-card__prefix"], children: titlePrefix }),
+              /* @__PURE__ */ jsx(
+                HeadingLevel,
+                {
+                  id: titleId,
+                  className: styles["content-card__title"],
+                  children: title
+                }
+              )
+            ] }),
+            isRenderable(body) && /* @__PURE__ */ jsx("div", { className: cn(styles["content-card__body"], "dds-prose"), children: body })
+          ] }),
+          isRenderable(actions) && /* @__PURE__ */ jsx("div", { className: styles["content-card__actions"], children: actions })
+        ] }) })
+      ] })
+    }
+  );
+};
+export {
+  ContentCard
+};
+//# sourceMappingURL=ContentCard.js.map

package/dist/components/ContentCard/ContentCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentCard.js","sources":["../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import { useId } from 'react';\nimport type { CSSProperties, ElementType, ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\nimport elevationStyles from '../../styles/utils/elevation.module.css';\nimport styles from './ContentCard.module.css';\nimport type { ContentCardLogoBackground, ContentCardProps } from './ContentCard.types';\n\nconst logoBackgroundToken: Record<ContentCardLogoBackground, string> = {\n    white: 'var(--color-semantic-surface-base)',\n    'sand-soft': 'var(--color-semantic-surface-neutral-soft)',\n    'sand-mid': 'var(--color-semantic-surface-neutral-mid)',\n    'sand-strong': 'var(--color-semantic-surface-neutral-strong)',\n    'pink-soft': 'var(--color-semantic-surface-primary-soft)',\n    'pink-mid': 'var(--color-semantic-surface-primary-mid)',\n    'pink-strong': 'var(--color-semantic-surface-primary-strong)',\n    'plum-soft': 'var(--color-semantic-surface-secondary-soft)',\n    'plum-mid': 'var(--color-semantic-surface-secondary-mid)',\n    'plum-strong': 'var(--color-semantic-surface-secondary-strong)',\n};\n\n// A boolean ReactNode (e.g. from `condition && <X />`) renders nothing, so treat it as absent.\nconst isRenderable = (node: ReactNode): boolean => node != null && typeof node !== 'boolean';\n\nexport const ContentCard = ({\n    media,\n    mediaKind = 'image',\n    mediaBackground,\n    mediaWidth = '1/3',\n    mediaPosition = 'start',\n    titlePrefix,\n    title,\n    headingLevel = 'h3',\n    body,\n    actions,\n    appearance = 'plain',\n    as = 'article',\n    className,\n    ref,\n    ...props\n}: ContentCardProps) => {\n    const titleId = useId();\n    const HeadingLevel = headingLevel;\n    // Cast to ElementType so the constrained union of tags renders without ref/props conflicts.\n    const Root = as as ElementType;\n    const hasMedia = isRenderable(media);\n    const ariaLabel = props['aria-label'];\n    // Keep an explicit aria-labelledby; only the generated title fallback is suppressed for a\n    // bare div or when an aria-label is provided.\n    const ariaLabelledBy =\n        props['aria-labelledby'] ?? (ariaLabel || as === 'div' ? undefined : titleId);\n\n    return (\n        <Root\n            ref={ref}\n            {...props}\n            className={cn(\n                styles['content-card'],\n                hasMedia && mediaWidth === '1/2' && styles['content-card--media-half'],\n                hasMedia && mediaPosition === 'end' && styles['content-card--media-end'],\n                appearance === 'border' && styles['content-card--border'],\n                appearance === 'elevated' && styles['content-card--elevated'],\n                appearance === 'elevated' && elevationStyles.elevationLow,\n                className,\n            )}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n        >\n            <div className={styles['content-card__layout']}>\n                {hasMedia && (\n                    <div\n                        className={cn(\n                            styles['content-card__media'],\n                            mediaKind === 'logo'\n                                ? styles['content-card__media--logo']\n                                : styles['content-card__media--image'],\n                        )}\n                        style={\n                            mediaKind === 'logo' && mediaBackground != null\n                                ? ({\n                                      '--_cc-logo-bg': logoBackgroundToken[mediaBackground],\n                                  } as CSSProperties)\n                                : undefined\n                        }\n                    >\n                        <div className={styles['content-card__media-inner']}>{media}</div>\n                    </div>\n                )}\n\n                <div className={styles['content-card__content']}>\n                    <div className={styles['content-card__content-inner']}>\n                        <div className={styles['content-card__body-region']}>\n                            <div className={styles['content-card__header']}>\n                                {isRenderable(titlePrefix) && (\n                                    <div className={styles['content-card__prefix']}>\n                                        {titlePrefix}\n                                    </div>\n                                )}\n                                <HeadingLevel\n                                    id={titleId}\n                                    className={styles['content-card__title']}\n                                >\n                                    {title}\n                                </HeadingLevel>\n                            </div>\n                            {isRenderable(body) && (\n                                <div className={cn(styles['content-card__body'], 'dds-prose')}>\n                                    {body}\n                                </div>\n                            )}\n                        </div>\n                        {isRenderable(actions) && (\n                            <div className={styles['content-card__actions']}>{actions}</div>\n                        )}\n                    </div>\n                </div>\n            </div>\n        </Root>\n    );\n};\n"],"names":[],"mappings":";;;;;AAOA,MAAM,sBAAiE;AAAA,EACnE,OAAO;AAAA,EACP,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,eAAe;AACnB;AAGA,MAAM,eAAe,CAAC,SAA6B,QAAQ,QAAQ,OAAO,SAAS;AAE5E,MAAM,cAAc,CAAC;AAAA,EACxB;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAwB;AACpB,QAAM,UAAU,MAAA;AAChB,QAAM,eAAe;AAErB,QAAM,OAAO;AACb,QAAM,WAAW,aAAa,KAAK;AACnC,QAAM,YAAY,MAAM,YAAY;AAGpC,QAAM,iBACF,MAAM,iBAAiB,MAAM,aAAa,OAAO,QAAQ,SAAY;AAEzE,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,WAAW;AAAA,QACP,OAAO,cAAc;AAAA,QACrB,YAAY,eAAe,SAAS,OAAO,0BAA0B;AAAA,QACrE,YAAY,kBAAkB,SAAS,OAAO,yBAAyB;AAAA,QACvE,eAAe,YAAY,OAAO,sBAAsB;AAAA,QACxD,eAAe,cAAc,OAAO,wBAAwB;AAAA,QAC5D,eAAe,cAAc,gBAAgB;AAAA,QAC7C;AAAA,MAAA;AAAA,MAEJ,cAAY;AAAA,MACZ,mBAAiB;AAAA,MAEjB,UAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,sBAAsB,GACxC,UAAA;AAAA,QAAA,YACG;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW;AAAA,cACP,OAAO,qBAAqB;AAAA,cAC5B,cAAc,SACR,OAAO,2BAA2B,IAClC,OAAO,4BAA4B;AAAA,YAAA;AAAA,YAE7C,OACI,cAAc,UAAU,mBAAmB,OACpC;AAAA,cACG,iBAAiB,oBAAoB,eAAe;AAAA,YAAA,IAExD;AAAA,YAGV,8BAAC,OAAA,EAAI,WAAW,OAAO,2BAA2B,GAAI,UAAA,MAAA,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAIpE,oBAAC,OAAA,EAAI,WAAW,OAAO,uBAAuB,GAC1C,UAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,6BAA6B,GAChD,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,2BAA2B,GAC9C,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,sBAAsB,GACxC,UAAA;AAAA,cAAA,aAAa,WAAW,KACrB,oBAAC,OAAA,EAAI,WAAW,OAAO,sBAAsB,GACxC,UAAA,YAAA,CACL;AAAA,cAEJ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,IAAI;AAAA,kBACJ,WAAW,OAAO,qBAAqB;AAAA,kBAEtC,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACL,GACJ;AAAA,YACC,aAAa,IAAI,KACd,oBAAC,OAAA,EAAI,WAAW,GAAG,OAAO,oBAAoB,GAAG,WAAW,GACvD,UAAA,KAAA,CACL;AAAA,UAAA,GAER;AAAA,UACC,aAAa,OAAO,KACjB,oBAAC,SAAI,WAAW,OAAO,uBAAuB,GAAI,UAAA,QAAA,CAAQ;AAAA,QAAA,EAAA,CAElE,EAAA,CACJ;AAAA,MAAA,EAAA,CACJ;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

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

@@ -0,0 +1,24 @@
+require('./ContentCard.css');
+"use strict";
+const styles = {
+  "content-card": "_content-card_1pa46_10",
+  "content-card--border": "_content-card--border_1pa46_25",
+  "content-card__layout": "_content-card__layout_1pa46_30",
+  "content-card__media": "_content-card__media_1pa46_39",
+  "content-card__media--image": "_content-card__media--image_1pa46_44",
+  "content-card__media--logo": "_content-card__media--logo_1pa46_48",
+  "content-card__media-inner": "_content-card__media-inner_1pa46_54",
+  "content-card__content": "_content-card__content_1pa46_85",
+  "content-card__content-inner": "_content-card__content-inner_1pa46_95",
+  "content-card__body-region": "_content-card__body-region_1pa46_104",
+  "content-card__header": "_content-card__header_1pa46_110",
+  "content-card__prefix": "_content-card__prefix_1pa46_116",
+  "content-card__title": "_content-card__title_1pa46_120",
+  "content-card__body": "_content-card__body_1pa46_104",
+  "content-card__actions": "_content-card__actions_1pa46_150",
+  "content-card--media-end": "_content-card--media-end_1pa46_186",
+  "content-card--media-half": "_content-card--media-half_1pa46_197",
+  "content-card--elevated": "_content-card--elevated_1pa46_242"
+};
+module.exports = styles;
+//# sourceMappingURL=ContentCard.module.css.cjs.map

package/dist/components/ContentCard/ContentCard.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentCard.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,25 @@
+import './ContentCard.css';
+const styles = {
+  "content-card": "_content-card_1pa46_10",
+  "content-card--border": "_content-card--border_1pa46_25",
+  "content-card__layout": "_content-card__layout_1pa46_30",
+  "content-card__media": "_content-card__media_1pa46_39",
+  "content-card__media--image": "_content-card__media--image_1pa46_44",
+  "content-card__media--logo": "_content-card__media--logo_1pa46_48",
+  "content-card__media-inner": "_content-card__media-inner_1pa46_54",
+  "content-card__content": "_content-card__content_1pa46_85",
+  "content-card__content-inner": "_content-card__content-inner_1pa46_95",
+  "content-card__body-region": "_content-card__body-region_1pa46_104",
+  "content-card__header": "_content-card__header_1pa46_110",
+  "content-card__prefix": "_content-card__prefix_1pa46_116",
+  "content-card__title": "_content-card__title_1pa46_120",
+  "content-card__body": "_content-card__body_1pa46_104",
+  "content-card__actions": "_content-card__actions_1pa46_150",
+  "content-card--media-end": "_content-card--media-end_1pa46_186",
+  "content-card--media-half": "_content-card--media-half_1pa46_197",
+  "content-card--elevated": "_content-card--elevated_1pa46_242"
+};
+export {
+  styles as default
+};
+//# sourceMappingURL=ContentCard.module.css.js.map

package/dist/components/ContentCard/ContentCard.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentCard.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,99 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export type ContentCardHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type ContentCardMediaKind = 'image' | 'logo';
+export type ContentCardMediaWidth = '1/3' | '1/2';
+export type ContentCardMediaPosition = 'start' | 'end';
+export type ContentCardAppearance = 'plain' | 'border' | 'elevated';
+/**
+ * Approved logo-area background colours. Maps to DNA surface tokens; CMS names in
+ * parentheses: `white` (White), `sand-*` (Sand / SandE01 / SandE02),
+ * `pink-*` (Pink / PinkE01 / PinkE02), `plum-*` (Plum / PlumE01 / PlumE02).
+ */
+export type ContentCardLogoBackground = 'white' | 'sand-soft' | 'sand-mid' | 'sand-strong' | 'pink-soft' | 'pink-mid' | 'pink-strong' | 'plum-soft' | 'plum-mid' | 'plum-strong';
+type ContentCardBaseProps = {
+    /**
+     * Optional media slot (image or logo). The client renders the element and owns
+     * `alt`, loading, and optimisation (for example `next/image`). Mark decorative
+     * images with an empty `alt`.
+     */
+    readonly media?: ReactNode;
+    /**
+     * How the media area is rendered. `logo` centres the media in a 4:3 box over a
+     * filled background; `image` fills the area. Ignored when `media` is omitted.
+     * @default 'image'
+     */
+    readonly mediaKind?: ContentCardMediaKind;
+    /**
+     * Logo-area background colour, limited to approved DNA surface tokens. Only used
+     * with `mediaKind="logo"`; defaults to `sand-mid` when omitted.
+     */
+    readonly mediaBackground?: ContentCardLogoBackground;
+    /**
+     * Media width in the horizontal layout (1/3 or 1/2 of the card). Ignored in the
+     * vertical layout, where media is always full width.
+     * @default '1/3'
+     */
+    readonly mediaWidth?: ContentCardMediaWidth;
+    /**
+     * Media side in the horizontal layout (logical, RTL-safe). In the vertical
+     * layout media is always placed above the content.
+     * @default 'start'
+     */
+    readonly mediaPosition?: ContentCardMediaPosition;
+    /**
+     * Optional slot above the title for a single small element (for example a
+     * `Label`; intended uses: Label, Timestamp, Pretitle).
+     */
+    readonly titlePrefix?: ReactNode;
+    /** Card title. Required. */
+    readonly title: ReactNode;
+    /**
+     * HTML heading level for the title. The consumer owns the document outline.
+     * @default 'h3'
+     */
+    readonly headingLevel?: ContentCardHeadingLevel;
+    /**
+     * Optional body content. Wrap rich text so it can adopt `dds-prose` styling;
+     * pass React nodes rather than HTML strings.
+     */
+    readonly body?: ReactNode;
+    /**
+     * Optional actions (0..n `Button`/`IconButton` elements). Laid out in a row that
+     * wraps to a column when there is not enough width.
+     */
+    readonly actions?: ReactNode;
+    /**
+     * Card surface treatment.
+     * @default 'plain'
+     */
+    readonly appearance?: ContentCardAppearance;
+};
+export interface ContentCardArticleProps extends ContentCardBaseProps, Omit<ComponentPropsWithRef<'article'>, 'title' | 'children'> {
+    /**
+     * Root element (and role) to render. Use `li` for cards inside a `ul`/`ol`
+     * collection, `section` for a standalone page region (becomes a landmark, use
+     * sparingly), or `div` when a surrounding element already provides the
+     * semantics. The title is still linked as the accessible name via
+     * `aria-labelledby` (when not rendering as a generic div).
+     * @default 'article'
+     */
+    readonly as?: 'article';
+}
+export interface ContentCardLiProps extends ContentCardBaseProps, Omit<ComponentPropsWithRef<'li'>, 'title' | 'children'> {
+    readonly as: 'li';
+}
+export interface ContentCardSectionProps extends ContentCardBaseProps, Omit<ComponentPropsWithRef<'section'>, 'title' | 'children'> {
+    readonly as: 'section';
+}
+export interface ContentCardDivProps extends ContentCardBaseProps, Omit<ComponentPropsWithRef<'div'>, 'title' | 'children'> {
+    readonly as: 'div';
+}
+/**
+ * Props for the Content card. The `as` prop selects the root element and narrows
+ * the element-specific HTML attributes accordingly.
+ */
+export type ContentCardProps = ContentCardArticleProps | ContentCardLiProps | ContentCardSectionProps | ContentCardDivProps;
+/** Allowed root elements, derived from the props union. */
+export type ContentCardElement = NonNullable<ContentCardProps['as']>;
+export {};
+//# sourceMappingURL=ContentCard.types.d.ts.map

package/dist/components/ContentCard/ContentCard.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentCard.types.d.ts","sourceRoot":"","sources":["../../../src/components/ContentCard/ContentCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,MAAM,uBAAuB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9E,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,MAAM,CAAC;AACpD,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG,KAAK,CAAC;AAClD,MAAM,MAAM,wBAAwB,GAAG,OAAO,GAAG,KAAK,CAAC;AACvD,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEpE;;;;GAIG;AACH,MAAM,MAAM,yBAAyB,GAC/B,OAAO,GACP,WAAW,GACX,UAAU,GACV,aAAa,GACb,WAAW,GACX,UAAU,GACV,aAAa,GACb,WAAW,GACX,UAAU,GACV,aAAa,CAAC;AAEpB,KAAK,oBAAoB,GAAG;IACxB;;;;OAIG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,oBAAoB,CAAC;IAC1C;;;OAGG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,yBAAyB,CAAC;IACrD;;;;OAIG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,qBAAqB,CAAC;IAC5C;;;;OAIG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,wBAAwB,CAAC;IAClD;;;OAGG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,4BAA4B;IAC5B,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,uBAAuB,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,qBAAqB,CAAC;CAC/C,CAAC;AAEF,MAAM,WAAW,uBACb,SAAQ,oBAAoB,EAAE,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC1F;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,kBACb,SAAQ,oBAAoB,EAAE,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACrF,QAAQ,CAAC,EAAE,EAAE,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,uBACb,SAAQ,oBAAoB,EAAE,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC1F,QAAQ,CAAC,EAAE,EAAE,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,mBACb,SAAQ,oBAAoB,EAAE,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACtF,QAAQ,CAAC,EAAE,EAAE,KAAK,CAAC;CACtB;AAED;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GACtB,uBAAuB,GACvB,kBAAkB,GAClB,uBAAuB,GACvB,mBAAmB,CAAC;AAE1B,2DAA2D;AAC3D,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC"}

package/dist/components/ContentCard/index.d.ts

@@ -0,0 +1,3 @@
+export { ContentCard } from './ContentCard';
+export type { ContentCardAppearance, ContentCardArticleProps, ContentCardDivProps, ContentCardElement, ContentCardHeadingLevel, ContentCardLiProps, ContentCardLogoBackground, ContentCardMediaKind, ContentCardMediaPosition, ContentCardMediaWidth, ContentCardProps, ContentCardSectionProps, } from './ContentCard.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ContentCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ContentCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACR,qBAAqB,EACrB,uBAAuB,EACvB,mBAAmB,EACnB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,yBAAyB,EACzB,oBAAoB,EACpB,wBAAwB,EACxB,qBAAqB,EACrB,gBAAgB,EAChB,uBAAuB,GAC1B,MAAM,qBAAqB,CAAC"}

package/dist/components/Drawer/Drawer.cjs

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const icons = require("@dnanpm/icons");
+const elevation_module = require("../../styles/utils/elevation.module.css.cjs");
+const focus_module = require("../../styles/utils/focus.module.css.cjs");
+const useDialogDismissal = require("../Modal/useDialogDismissal.cjs");
+const useNativeDialog = require("../Modal/useNativeDialog.cjs");
+const Drawer_module = require("./Drawer.module.css.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const Drawer = ({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  size = "small",
+  headerStyle = "light",
+  side = "right",
+  fixedTitle = false,
+  disableCloseOptions = false,
+  closeLabel = "Sulje dialogi",
+  keepMounted = false,
+  className,
+  ref,
+  onKeyDown,
+  onClick,
+  onPointerDown,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}) => {
+  const titleId = react.useId();
+  const descriptionId = react.useId();
+  const { dialogRef, close, phase, isPresent } = useNativeDialog.useNativeDialog({
+    open: open ?? false,
+    keepMounted,
+    onOpenChange
+  });
+  const describedBy = [description ? descriptionId : void 0, ariaDescribedBy].filter(Boolean).join(" ") || void 0;
+  const dialogDismissalProps = useDialogDismissal.useDialogDismissal({
+    close,
+    disableCloseOptions,
+    onClick,
+    onKeyDown,
+    onPointerDown
+  });
+  if (!isPresent) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "dialog",
+    {
+      ...props,
+      ref: (node) => {
+        dialogRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      className: cn.cn(
+        Drawer_module.default.drawer,
+        elevation_module.default.elevationHigh,
+        Drawer_module.default[`drawer--${size}`],
+        Drawer_module.default[`drawer--${headerStyle}`],
+        Drawer_module.default[`drawer--${side}`],
+        { [Drawer_module.default["drawer--fixed-title"]]: fixedTitle },
+        { [Drawer_module.default["drawer--opening"]]: phase !== "closing" },
+        { [Drawer_module.default["drawer--closing"]]: phase === "closing" },
+        className
+      ),
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy ?? (!ariaLabel && title ? titleId : void 0),
+      "aria-describedby": describedBy,
+      ...dialogDismissalProps,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Drawer_module.default.drawer__container, children: [
+          !disableCloseOptions && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: cn.cn(Drawer_module.default.drawer__close, focus_module.default.focusable),
+              "aria-label": closeLabel,
+              "data-dialog-autofocus": "true",
+              onClick: close,
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons.Close, { "aria-hidden": "true" })
+            }
+          ),
+          (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Drawer_module.default.drawer__title, children: [
+            title && /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, className: Drawer_module.default.drawer__heading, children: title }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("div", { id: descriptionId, className: Drawer_module.default.drawer__description, children: description })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: Drawer_module.default.drawer__content, children })
+        ] }),
+        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn(Drawer_module.default["drawer__bottom-bar"], elevation_module.default.elevationMedium), children: footer })
+      ]
+    }
+  );
+};
+exports.Drawer = Drawer;
+//# sourceMappingURL=Drawer.cjs.map

package/dist/components/Drawer/Drawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.cjs","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { useId } from 'react';\nimport { Close } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport elevationStyles from '../../styles/utils/elevation.module.css';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport { useDialogDismissal } from '../Modal/useDialogDismissal';\nimport { useNativeDialog } from '../Modal/useNativeDialog';\nimport styles from './Drawer.module.css';\nimport type { DrawerProps } from './Drawer.types';\n\nexport const Drawer = ({\n    open,\n    onOpenChange,\n    title,\n    description,\n    children,\n    footer,\n    size = 'small',\n    headerStyle = 'light',\n    side = 'right',\n    fixedTitle = false,\n    disableCloseOptions = false,\n    closeLabel = 'Sulje dialogi',\n    keepMounted = false,\n    className,\n    ref,\n    onKeyDown,\n    onClick,\n    onPointerDown,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    ...props\n}: DrawerProps) => {\n    const titleId = useId();\n    const descriptionId = useId();\n    const { dialogRef, close, phase, isPresent } = useNativeDialog({\n        open: open ?? false,\n        keepMounted,\n        onOpenChange,\n    });\n    const describedBy =\n        [description ? descriptionId : undefined, ariaDescribedBy].filter(Boolean).join(' ') ||\n        undefined;\n    const dialogDismissalProps = useDialogDismissal({\n        close,\n        disableCloseOptions,\n        onClick,\n        onKeyDown,\n        onPointerDown,\n    });\n\n    if (!isPresent) return null;\n\n    return (\n        <dialog\n            {...props}\n            ref={(node) => {\n                dialogRef.current = node;\n                if (typeof ref === 'function') ref(node);\n                else if (ref) ref.current = node;\n            }}\n            className={cn(\n                styles.drawer,\n                elevationStyles.elevationHigh,\n                styles[`drawer--${size}`],\n                styles[`drawer--${headerStyle}`],\n                styles[`drawer--${side}`],\n                { [styles['drawer--fixed-title']]: fixedTitle },\n                { [styles['drawer--opening']]: phase !== 'closing' },\n                { [styles['drawer--closing']]: phase === 'closing' },\n                className,\n            )}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy ?? (!ariaLabel && title ? titleId : undefined)}\n            aria-describedby={describedBy}\n            {...dialogDismissalProps}\n        >\n            <div className={styles.drawer__container}>\n                {!disableCloseOptions && (\n                    <button\n                        type=\"button\"\n                        className={cn(styles.drawer__close, focusStyles.focusable)}\n                        aria-label={closeLabel}\n                        data-dialog-autofocus=\"true\"\n                        onClick={close}\n                    >\n                        <Close aria-hidden=\"true\" />\n                    </button>\n                )}\n                {(title || description) && (\n                    <div className={styles.drawer__title}>\n                        {title && (\n                            <h2 id={titleId} className={styles.drawer__heading}>\n                                {title}\n                            </h2>\n                        )}\n                        {description && (\n                            <div id={descriptionId} className={styles.drawer__description}>\n                                {description}\n                            </div>\n                        )}\n                    </div>\n                )}\n                <div className={styles.drawer__content}>{children}</div>\n            </div>\n            {footer && (\n                <div className={cn(styles['drawer__bottom-bar'], elevationStyles.elevationMedium)}>\n                    {footer}\n                </div>\n            )}\n        </dialog>\n    );\n};\n"],"names":["useId","useNativeDialog","useDialogDismissal","jsxs","cn","styles","elevationStyles","jsx","focusStyles","Close"],"mappings":"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"}