@pega/cosmos-react-core 9.0.0-build.9.9 → 9.0.0

package/lib/components/SelectionCard/SelectionCard.styles.js

@@ -1,9 +1,16 @@
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
+import { lineClamp } from '../../styles/mixins';
+import { calculateFontSize } from '../../styles/utils';
 import { StyledPseudoRadioCheck } from '../RadioCheck/RadioCheck';
 import { StyledFieldValueList, StyledStackedFieldValue } from '../FieldValueList';
 import { StyledIcon } from '../Icon';
-export const StyledSelectionCard = styled.div(({ disabled, theme: { base: { palette, 'disabled-opacity': disabledOpacity }, components: { card, 'form-control': { ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor } } } } }) => {
+const imageContainerSizes = {
+    small: '2.75rem',
+    large: '8.875rem',
+    flexible: 'minmax(2.5rem, auto)'
+};
+export const StyledSelectionCard = styled.div(({ disabled, readOnly, onClick, theme: { base: { palette, 'disabled-opacity': disabledOpacity }, components: { card, 'form-control': { ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor }, ':hover': { 'border-color': hoverBorderColor } } } } }) => {
     return css `
       min-width: min-content;
       max-width: max-content;
@@ -19,43 +26,50 @@ export const StyledSelectionCard = styled.div(({ disabled, theme: { base: { pale
 
       ${!disabled &&
         css `
-        :focus {
-          box-shadow: ${shadow};
-          border-color: transparent;
-          outline: none;
-
+        &:focus {
           & ${StyledPseudoRadioCheck} {
             box-shadow: ${shadow};
             border-color: ${focusBorderColor};
           }
         }
+
+        &:focus,
+        &:not([data-main-focus]):focus-within {
+          box-shadow: ${shadow};
+          border-color: transparent;
+          outline: none;
+        }
+      `}
+
+        ${!disabled &&
+        onClick &&
+        css `
+        cursor: pointer;
+      `}
+
+      ${!disabled &&
+        !readOnly &&
+        onClick &&
+        css `
+        &:hover:not(:focus-within) {
+          border-color: ${hoverBorderColor};
+        }
       `}
     `;
 });
 StyledSelectionCard.defaultProps = defaultThemeProp;
-export const StyledSelectionCardInline = styled(StyledSelectionCard)(({ placement, size }) => {
-    let imageContainerSize;
-    switch (size) {
-        case 'small':
-            imageContainerSize = '2.5rem';
-            break;
-        case 'large':
-            imageContainerSize = '8.875rem';
-            break;
-        default:
-            imageContainerSize = 'minmax(2.5rem, auto)';
-            break;
-    }
+export const StyledSelectionCardInline = styled(StyledSelectionCard)(({ placement = 'inline-start', size = 'large' }) => {
+    const imageContainerSize = imageContainerSizes[size];
     return css `
-    /* stylelint-disable unit-allowed-list -- "Unexpected unit "fr\`" */
+    /* stylelint-disable-next-line unit-allowed-list */
     grid-template-columns: ${placement === 'inline-end'
         ? `1fr ${imageContainerSize}`
         : `${imageContainerSize} 1fr`};
-    /* stylelint-enable unit-allowed-list */
-    grid-template-rows: minmax(2.75rem, 1fr);
+    grid-template-rows: minmax(2.75rem, auto);
   `;
 });
-export const StyledSelectionCardStacked = styled(StyledSelectionCard)(({ size }) => {
+StyledSelectionCardInline.defaultProps = defaultThemeProp;
+export const StyledSelectionCardStacked = styled(StyledSelectionCard)(({ size = 'large' }) => {
     let containerSize;
     switch (size) {
         case 'small':
@@ -68,53 +82,29 @@ export const StyledSelectionCardStacked = styled(StyledSelectionCard)(({ size })
             containerSize = 'minmax(2.5rem, 15.125rem)';
     }
     return css `
-    grid-template-rows: ${containerSize} 1fr;
     grid-template-columns: minmax(2.75rem, 1fr);
+    grid-template-rows: ${containerSize} auto;
   `;
 });
-export const StyledImageContainer = styled.div(({ theme: { base: { palette, transparency }, components: { card: { 'border-radius': borderRadius } } }, placement = 'inline-start', size = 'flexible' }) => {
+export const StyledImageCell = styled.div(({ theme: { base: { palette, transparency }, components: { card: { 'border-radius': borderRadius } } }, placement = 'inline-start', size = 'flexible', isTile }) => {
     return css `
-      background-color: ${palette['app-background']};
-      overflow: hidden;
-
-      img {
-        height: 100%;
-        object-fit: contain;
-      }
-
-      > img {
-        aspect-ratio: 4 / 5;
-
-        ${placement === 'block-start' &&
-        css `
-          aspect-ratio: 16 / 9;
-          max-height: 100%;
-        `}
-      }
+      ${isTile
+        ? css `
+            overflow: hidden;
+          `
+        : css `
+            background-color: ${palette['app-background']};
+            position: relative;
+          `}
 
       ${size === 'flexible' &&
         placement !== 'block-start' &&
         css `
         max-width: 8.875rem;
-        height: var(--content-height);
+        min-height: 100%;
+        height: var(--content-height, auto);
       `};
 
-      ${size === 'large' &&
-        css `
-        min-height: 11.0625rem;
-      `}
-
-      ${size === 'small' &&
-        css `
-        aspect-ratio: unset;
-
-        > img {
-          max-width: 2rem;
-          max-height: 2rem;
-          aspect-ratio: 1 / 1;
-        }
-      `}
-
       /* Recalculation of the border radius by substracting border width */
       ${placement === 'inline-start' &&
         css `
@@ -134,6 +124,70 @@ export const StyledImageContainer = styled.div(({ theme: { base: { palette, tran
         border-start-end-radius: calc(${borderRadius} - 0.0625rem);
       `}
 
+      ${!isTile &&
+        css `
+        &::before {
+          content: '';
+          position: absolute;
+          inset: 0;
+          background: var(--bg-image) center / cover no-repeat;
+          filter: blur(1rem);
+          opacity: ${transparency['transparent-4']};
+          pointer-events: none;
+          clip-path: inset(0);
+        }
+      `}
+    `;
+});
+StyledImageCell.defaultProps = defaultThemeProp;
+export const StyledContentCell = styled.div `
+  display: flex;
+  flex-direction: column;
+`;
+export const StyledImageContainer = styled.div(({ theme: { base: { transparency, spacing }, components: { card: { 'border-radius': borderRadius } } }, placement = 'inline-start', size = 'flexible' }) => {
+    return css `
+      aspect-ratio: 4 / 5;
+      max-height: 100%;
+      min-height: 2rem;
+      min-width: 2rem;
+      position: relative;
+      padding: min(${spacing}, 10%);
+
+      img {
+        max-width: 100%;
+        max-height: 100%;
+        box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, ${transparency['transparent-5']});
+        border-radius: calc(${borderRadius} / 2);
+      }
+
+      ${placement === 'block-start' &&
+        css `
+        aspect-ratio: 16 / 9;
+        > img {
+          max-height: 100%;
+        }
+      `}
+
+      ${size === 'flexible' &&
+        css `
+        min-height: 100%;
+      `}
+
+      ${size === 'large' &&
+        css `
+        min-height: 11.0625rem;
+      `}
+
+      ${size === 'small' &&
+        css `
+        aspect-ratio: 1 / 1;
+
+        > img {
+          max-width: 2rem;
+          max-height: 2rem;
+        }
+      `}
+
       ${StyledIcon} {
         opacity: ${transparency['transparent-3']};
       }
@@ -144,12 +198,20 @@ export const StyledValueList = styled.ul `
   width: 100%;
   list-style-type: none;
 `;
+export const StyledHeader = styled.div `
+  width: 100%;
+`;
 export const StyledContentContainer = styled.div(({ theme }) => {
     return css `
-    padding: ${theme.base.spacing};
+    padding: ${theme.base.spacing} calc(1.5 * ${theme.base.spacing});
+    overflow-wrap: break-word;
+
+    > ${StyledHeader} {
+      min-height: 2rem;
+    }
 
-    ${StyledFieldValueList}, ${StyledValueList} {
-      margin-block-start: ${theme.base.spacing};
+    ${StyledValueList}, ${StyledFieldValueList} {
+      margin-block-end: calc(0.75 * ${theme.base.spacing});
     }
 
     ${StyledStackedFieldValue} {
@@ -158,4 +220,106 @@ export const StyledContentContainer = styled.div(({ theme }) => {
   `;
 });
 StyledContentContainer.defaultProps = defaultThemeProp;
+export const StyledTileContent = styled.div(({ theme, foregroundColor, backgroundColor, size = 'large' }) => {
+    const fg = foregroundColor;
+    const bg = backgroundColor;
+    const { l: fontSizeL, xs: fontSizeXs } = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    const { components: { icon: { size: iconSize } } } = theme;
+    return css `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: calc(1.5 * ${theme.base.spacing});
+    width: 100%;
+    height: 100%;
+    background: ${bg};
+    color: ${fg};
+    font-weight: ${theme.base['font-weight']['semi-bold']};
+    font-size: ${fontSizeL};
+
+    ${StyledIcon} {
+      width: ${iconSize.s};
+      height: ${iconSize.s};
+      color: inherit;
+    }
+
+    ${size === 'small' &&
+        css `
+      padding: ${theme.base.spacing};
+      font-size: ${fontSizeXs};
+    `}
+  `;
+});
+StyledTileContent.defaultProps = defaultThemeProp;
+export const StyledCardFooter = styled.div(({ theme }) => {
+    return css `
+    margin-block-start: auto;
+    padding-inline: calc(1.5 * ${theme.base.spacing});
+    padding-block-end: ${theme.base.spacing};
+  `;
+});
+StyledCardFooter.defaultProps = defaultThemeProp;
+export const StyledSingleField = styled.div `
+  ${({ truncate }) => truncate && lineClamp(2)}
+`;
+export const getBaseCardContainerStyles = (theme) => {
+    return css `
+    display: grid;
+    gap: ${theme.base.spacing};
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(${theme.base['content-width'].sm}, 100%), 1fr)
+    );
+    grid-auto-rows: minmax(2.75rem, auto);
+
+    > ${StyledSelectionCard} {
+      max-width: 100%;
+    }
+  `;
+};
+const getInlineCardColumnTrack = ({ placement, size, contentWidth }) => {
+    const imageContainerSize = imageContainerSizes[size];
+    return placement === 'inline-end'
+        ? `minmax(20ch, ${contentWidth}) 1fr ${imageContainerSize}`
+        : `${imageContainerSize} minmax(20ch, ${contentWidth}) 1fr`;
+};
+export const getInlineImageCardContainerStyles = (theme, { placement, size }) => {
+    const columnTrack = getInlineCardColumnTrack({
+        placement,
+        size,
+        contentWidth: theme.base['content-width'].sm
+    });
+    const singleCardSize = `calc(${theme.base['content-width'].sm} + ${imageContainerSizes[size === 'small' ? 'small' : 'large']})`;
+    return css `
+    display: grid;
+    gap: ${theme.base.spacing};
+    grid-template-columns: ${columnTrack};
+
+    @container (min-width: calc(2 * ${singleCardSize})) {
+      grid-template-columns: repeat(2, ${columnTrack});
+    }
+
+    @container (min-width: calc(3 * ${singleCardSize})) {
+      grid-template-columns: repeat(3, ${columnTrack});
+    }
+
+    @container (min-width: calc(4 * ${singleCardSize})) {
+      grid-template-columns: repeat(4, ${columnTrack});
+    }
+
+    > ${StyledSelectionCard} {
+      grid-template-columns: subgrid;
+      grid-column: span 3;
+      column-gap: 0;
+
+      ${StyledImageCell} {
+        grid-column: ${placement === 'inline-start' ? '1 / 2' : '3 / 4'};
+      }
+
+      ${StyledContentCell} {
+        grid-column: span 2;
+      }
+    }
+  `;
+};
 //# sourceMappingURL=SelectionCard.styles.js.map

package/lib/components/SelectionCard/SelectionCard.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionCard.styles.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport type { ExcludeStrict } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledPseudoRadioCheck } from '../RadioCheck/RadioCheck';\nimport { StyledFieldValueList, StyledStackedFieldValue } from '../FieldValueList';\nimport { StyledIcon } from '../Icon';\n\nimport type { ImagePlacement, ImageSize, SelectionCardProps } from './SelectionCard.types';\n\nexport const StyledSelectionCard = styled.div<Pick<SelectionCardProps, 'disabled'>>(\n  ({\n    disabled,\n    theme: {\n      base: { palette, 'disabled-opacity': disabledOpacity },\n      components: {\n        card,\n        'form-control': {\n          ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor }\n        }\n      }\n    }\n  }) => {\n    return css`\n      min-width: min-content;\n      max-width: max-content;\n      background-color: ${card.background};\n      border-radius: ${card['border-radius']};\n      border: 0.0625rem solid ${palette['border-line']};\n\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n        opacity: ${disabledOpacity};\n      `}\n\n      ${!disabled &&\n      css`\n        :focus {\n          box-shadow: ${shadow};\n          border-color: transparent;\n          outline: none;\n\n          & ${StyledPseudoRadioCheck} {\n            box-shadow: ${shadow};\n            border-color: ${focusBorderColor};\n          }\n        }\n      `}\n    `;\n  }\n);\n\nStyledSelectionCard.defaultProps = defaultThemeProp;\n\nexport const StyledSelectionCardInline = styled(StyledSelectionCard)<{\n  placement?: ExcludeStrict<ImagePlacement, 'block-start'>;\n  size?: ImageSize;\n}>(({ placement, size }) => {\n  let imageContainerSize;\n  switch (size) {\n    case 'small':\n      imageContainerSize = '2.5rem';\n      break;\n    case 'large':\n      imageContainerSize = '8.875rem';\n      break;\n    default:\n      imageContainerSize = 'minmax(2.5rem, auto)';\n      break;\n  }\n  return css`\n    /* stylelint-disable unit-allowed-list -- \"Unexpected unit \"fr\\`\" */\n    grid-template-columns: ${placement === 'inline-end'\n      ? `1fr ${imageContainerSize}`\n      : `${imageContainerSize} 1fr`};\n    /* stylelint-enable unit-allowed-list */\n    grid-template-rows: minmax(2.75rem, 1fr);\n  `;\n});\n\nexport const StyledSelectionCardStacked = styled(StyledSelectionCard)<{ size?: ImageSize }>(({\n  size\n}) => {\n  let containerSize;\n  switch (size) {\n    case 'small':\n      containerSize = '2.5rem';\n      break;\n    case 'large':\n      containerSize = '15.125rem';\n      break;\n    default:\n      containerSize = 'minmax(2.5rem, 15.125rem)';\n  }\n  return css`\n    grid-template-rows: ${containerSize} 1fr;\n    grid-template-columns: minmax(2.75rem, 1fr);\n  `;\n});\n\nexport const StyledImageContainer = styled.div<{\n  placement?: ImagePlacement;\n  size?: ImageSize;\n}>(\n  ({\n    theme: {\n      base: { palette, transparency },\n      components: {\n        card: { 'border-radius': borderRadius }\n      }\n    },\n    placement = 'inline-start',\n    size = 'flexible'\n  }) => {\n    return css`\n      background-color: ${palette['app-background']};\n      overflow: hidden;\n\n      img {\n        height: 100%;\n        object-fit: contain;\n      }\n\n      > img {\n        aspect-ratio: 4 / 5;\n\n        ${placement === 'block-start' &&\n        css`\n          aspect-ratio: 16 / 9;\n          max-height: 100%;\n        `}\n      }\n\n      ${size === 'flexible' &&\n      placement !== 'block-start' &&\n      css`\n        max-width: 8.875rem;\n        height: var(--content-height);\n      `};\n\n      ${size === 'large' &&\n      css`\n        min-height: 11.0625rem;\n      `}\n\n      ${size === 'small' &&\n      css`\n        aspect-ratio: unset;\n\n        > img {\n          max-width: 2rem;\n          max-height: 2rem;\n          aspect-ratio: 1 / 1;\n        }\n      `}\n\n      /* Recalculation of the border radius by substracting border width */\n      ${placement === 'inline-start' &&\n      css`\n        border-start-start-radius: calc(${borderRadius} - 0.0625rem);\n        border-end-start-radius: calc(${borderRadius} - 0.0625rem);\n      `}\n\n      ${placement === 'inline-end' &&\n      css`\n        border-end-end-radius: calc(${borderRadius} - 0.0625rem);\n        border-start-end-radius: calc(${borderRadius} - 0.0625rem);\n      `}\n\n      ${placement === 'block-start' &&\n      css`\n        border-start-start-radius: calc(${borderRadius} - 0.0625rem);\n        border-start-end-radius: calc(${borderRadius} - 0.0625rem);\n      `}\n\n      ${StyledIcon} {\n        opacity: ${transparency['transparent-3']};\n      }\n    `;\n  }\n);\n\nStyledImageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledValueList = styled.ul`\n  width: 100%;\n  list-style-type: none;\n`;\n\nexport const StyledContentContainer = styled.div(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing};\n\n    ${StyledFieldValueList}, ${StyledValueList} {\n      margin-block-start: ${theme.base.spacing};\n    }\n\n    ${StyledStackedFieldValue} {\n      grid-column: 1 / -1;\n    }\n  `;\n});\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"SelectionCard.styles.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, type DefaultTheme } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { lineClamp } from '../../styles/mixins';\nimport { calculateFontSize } from '../../styles/utils';\nimport { StyledPseudoRadioCheck } from '../RadioCheck/RadioCheck';\nimport { StyledFieldValueList, StyledStackedFieldValue } from '../FieldValueList';\nimport { StyledIcon } from '../Icon';\n\nimport type { ImagePlacement, ImageSize, SelectionCardProps } from './SelectionCard.types';\n\nconst imageContainerSizes = {\n  small: '2.75rem',\n  large: '8.875rem',\n  flexible: 'minmax(2.5rem, auto)'\n} as const;\n\nexport const StyledSelectionCard = styled.div<\n  Pick<SelectionCardProps, 'disabled' | 'onClick' | 'readOnly'>\n>(\n  ({\n    disabled,\n    readOnly,\n    onClick,\n    theme: {\n      base: { palette, 'disabled-opacity': disabledOpacity },\n      components: {\n        card,\n        'form-control': {\n          ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n          ':hover': { 'border-color': hoverBorderColor }\n        }\n      }\n    }\n  }) => {\n    return css`\n      min-width: min-content;\n      max-width: max-content;\n      background-color: ${card.background};\n      border-radius: ${card['border-radius']};\n      border: 0.0625rem solid ${palette['border-line']};\n\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n        opacity: ${disabledOpacity};\n      `}\n\n      ${!disabled &&\n      css`\n        &:focus {\n          & ${StyledPseudoRadioCheck} {\n            box-shadow: ${shadow};\n            border-color: ${focusBorderColor};\n          }\n        }\n\n        &:focus,\n        &:not([data-main-focus]):focus-within {\n          box-shadow: ${shadow};\n          border-color: transparent;\n          outline: none;\n        }\n      `}\n\n        ${!disabled &&\n      onClick &&\n      css`\n        cursor: pointer;\n      `}\n\n      ${!disabled &&\n      !readOnly &&\n      onClick &&\n      css`\n        &:hover:not(:focus-within) {\n          border-color: ${hoverBorderColor};\n        }\n      `}\n    `;\n  }\n);\n\nStyledSelectionCard.defaultProps = defaultThemeProp;\n\nexport const StyledSelectionCardInline = styled(StyledSelectionCard)<{\n  placement?: Extract<ImagePlacement, 'inline-start' | 'inline-end'>;\n  size?: ImageSize;\n}>(({ placement = 'inline-start', size = 'large' }) => {\n  const imageContainerSize = imageContainerSizes[size];\n  return css`\n    /* stylelint-disable-next-line unit-allowed-list */\n    grid-template-columns: ${placement === 'inline-end'\n      ? `1fr ${imageContainerSize}`\n      : `${imageContainerSize} 1fr`};\n    grid-template-rows: minmax(2.75rem, auto);\n  `;\n});\n\nStyledSelectionCardInline.defaultProps = defaultThemeProp;\n\nexport const StyledSelectionCardStacked = styled(StyledSelectionCard)<{ size?: ImageSize }>(({\n  size = 'large'\n}) => {\n  let containerSize;\n  switch (size) {\n    case 'small':\n      containerSize = '2.5rem';\n      break;\n    case 'large':\n      containerSize = '15.125rem';\n      break;\n    default:\n      containerSize = 'minmax(2.5rem, 15.125rem)';\n  }\n  return css`\n    grid-template-columns: minmax(2.75rem, 1fr);\n    grid-template-rows: ${containerSize} auto;\n  `;\n});\n\nexport const StyledImageCell = styled.div<{\n  placement?: ImagePlacement;\n  size?: ImageSize;\n  isTile?: boolean;\n}>(\n  ({\n    theme: {\n      base: { palette, transparency },\n      components: {\n        card: { 'border-radius': borderRadius }\n      }\n    },\n    placement = 'inline-start',\n    size = 'flexible',\n    isTile\n  }) => {\n    return css`\n      ${isTile\n        ? css`\n            overflow: hidden;\n          `\n        : css`\n            background-color: ${palette['app-background']};\n            position: relative;\n          `}\n\n      ${size === 'flexible' &&\n      placement !== 'block-start' &&\n      css`\n        max-width: 8.875rem;\n        min-height: 100%;\n        height: var(--content-height, auto);\n      `};\n\n      /* Recalculation of the border radius by substracting border width */\n      ${placement === 'inline-start' &&\n      css`\n        border-start-start-radius: calc(${borderRadius} - 0.0625rem);\n        border-end-start-radius: calc(${borderRadius} - 0.0625rem);\n      `}\n\n      ${placement === 'inline-end' &&\n      css`\n        border-end-end-radius: calc(${borderRadius} - 0.0625rem);\n        border-start-end-radius: calc(${borderRadius} - 0.0625rem);\n      `}\n\n      ${placement === 'block-start' &&\n      css`\n        border-start-start-radius: calc(${borderRadius} - 0.0625rem);\n        border-start-end-radius: calc(${borderRadius} - 0.0625rem);\n      `}\n\n      ${!isTile &&\n      css`\n        &::before {\n          content: '';\n          position: absolute;\n          inset: 0;\n          background: var(--bg-image) center / cover no-repeat;\n          filter: blur(1rem);\n          opacity: ${transparency['transparent-4']};\n          pointer-events: none;\n          clip-path: inset(0);\n        }\n      `}\n    `;\n  }\n);\n\nStyledImageCell.defaultProps = defaultThemeProp;\n\nexport const StyledContentCell = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const StyledImageContainer = styled.div<{\n  placement?: ImagePlacement;\n  size?: ImageSize;\n}>(\n  ({\n    theme: {\n      base: { transparency, spacing },\n      components: {\n        card: { 'border-radius': borderRadius }\n      }\n    },\n    placement = 'inline-start',\n    size = 'flexible'\n  }) => {\n    return css`\n      aspect-ratio: 4 / 5;\n      max-height: 100%;\n      min-height: 2rem;\n      min-width: 2rem;\n      position: relative;\n      padding: min(${spacing}, 10%);\n\n      img {\n        max-width: 100%;\n        max-height: 100%;\n        box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, ${transparency['transparent-5']});\n        border-radius: calc(${borderRadius} / 2);\n      }\n\n      ${placement === 'block-start' &&\n      css`\n        aspect-ratio: 16 / 9;\n        > img {\n          max-height: 100%;\n        }\n      `}\n\n      ${size === 'flexible' &&\n      css`\n        min-height: 100%;\n      `}\n\n      ${size === 'large' &&\n      css`\n        min-height: 11.0625rem;\n      `}\n\n      ${size === 'small' &&\n      css`\n        aspect-ratio: 1 / 1;\n\n        > img {\n          max-width: 2rem;\n          max-height: 2rem;\n        }\n      `}\n\n      ${StyledIcon} {\n        opacity: ${transparency['transparent-3']};\n      }\n    `;\n  }\n);\n\nStyledImageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledValueList = styled.ul`\n  width: 100%;\n  list-style-type: none;\n`;\n\nexport const StyledHeader = styled.div`\n  width: 100%;\n`;\n\nexport const StyledContentContainer = styled.div(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing} calc(1.5 * ${theme.base.spacing});\n    overflow-wrap: break-word;\n\n    > ${StyledHeader} {\n      min-height: 2rem;\n    }\n\n    ${StyledValueList}, ${StyledFieldValueList} {\n      margin-block-end: calc(0.75 * ${theme.base.spacing});\n    }\n\n    ${StyledStackedFieldValue} {\n      grid-column: 1 / -1;\n    }\n  `;\n});\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n\nexport const StyledTileContent = styled.div<{\n  foregroundColor: string;\n  backgroundColor: string;\n  size?: ImageSize;\n}>(({ theme, foregroundColor, backgroundColor, size = 'large' }) => {\n  const fg = foregroundColor;\n  const bg = backgroundColor;\n  const { l: fontSizeL, xs: fontSizeXs } = calculateFontSize(\n    theme.base['font-size'],\n    theme.base['font-scale']\n  );\n  const {\n    components: {\n      icon: { size: iconSize }\n    }\n  } = theme;\n  return css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: calc(1.5 * ${theme.base.spacing});\n    width: 100%;\n    height: 100%;\n    background: ${bg};\n    color: ${fg};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    font-size: ${fontSizeL};\n\n    ${StyledIcon} {\n      width: ${iconSize.s};\n      height: ${iconSize.s};\n      color: inherit;\n    }\n\n    ${size === 'small' &&\n    css`\n      padding: ${theme.base.spacing};\n      font-size: ${fontSizeXs};\n    `}\n  `;\n});\n\nStyledTileContent.defaultProps = defaultThemeProp;\n\nexport const StyledCardFooter = styled.div(({ theme }) => {\n  return css`\n    margin-block-start: auto;\n    padding-inline: calc(1.5 * ${theme.base.spacing});\n    padding-block-end: ${theme.base.spacing};\n  `;\n});\n\nStyledCardFooter.defaultProps = defaultThemeProp;\n\nexport const StyledSingleField = styled.div<{ truncate?: boolean }>`\n  ${({ truncate }) => truncate && lineClamp(2)}\n`;\n\nexport const getBaseCardContainerStyles = (theme: DefaultTheme) => {\n  return css`\n    display: grid;\n    gap: ${theme.base.spacing};\n    grid-template-columns: repeat(\n      auto-fit,\n      minmax(min(${theme.base['content-width'].sm}, 100%), 1fr)\n    );\n    grid-auto-rows: minmax(2.75rem, auto);\n\n    > ${StyledSelectionCard} {\n      max-width: 100%;\n    }\n  `;\n};\n\nconst getInlineCardColumnTrack = ({\n  placement,\n  size,\n  contentWidth\n}: {\n  placement: Extract<ImagePlacement, 'inline-start' | 'inline-end'>;\n  size: ImageSize;\n  contentWidth: string;\n}): string => {\n  const imageContainerSize = imageContainerSizes[size];\n  return placement === 'inline-end'\n    ? `minmax(20ch, ${contentWidth}) 1fr ${imageContainerSize}`\n    : `${imageContainerSize} minmax(20ch, ${contentWidth}) 1fr`;\n};\n\nexport const getInlineImageCardContainerStyles = (\n  theme: DefaultTheme,\n  {\n    placement,\n    size\n  }: {\n    placement: Extract<ImagePlacement, 'inline-start' | 'inline-end'>;\n    size: ImageSize;\n  }\n) => {\n  const columnTrack = getInlineCardColumnTrack({\n    placement,\n    size,\n    contentWidth: theme.base['content-width'].sm\n  });\n  const singleCardSize = `calc(${theme.base['content-width'].sm} + ${imageContainerSizes[size === 'small' ? 'small' : 'large']})`;\n  return css`\n    display: grid;\n    gap: ${theme.base.spacing};\n    grid-template-columns: ${columnTrack};\n\n    @container (min-width: calc(2 * ${singleCardSize})) {\n      grid-template-columns: repeat(2, ${columnTrack});\n    }\n\n    @container (min-width: calc(3 * ${singleCardSize})) {\n      grid-template-columns: repeat(3, ${columnTrack});\n    }\n\n    @container (min-width: calc(4 * ${singleCardSize})) {\n      grid-template-columns: repeat(4, ${columnTrack});\n    }\n\n    > ${StyledSelectionCard} {\n      grid-template-columns: subgrid;\n      grid-column: span 3;\n      column-gap: 0;\n\n      ${StyledImageCell} {\n        grid-column: ${placement === 'inline-start' ? '1 / 2' : '3 / 4'};\n      }\n\n      ${StyledContentCell} {\n        grid-column: span 2;\n      }\n    }\n  `;\n};\n"]}

package/lib/components/SelectionCard/SelectionCard.test-ids.d.ts

@@ -1,3 +1,3 @@
-export declare const selectionCardElements: readonly ["content", "image", "control", "actions"];
-export declare const getSelectionCardTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly ["content", "image", "control", "actions"]>;
+export declare const selectionCardElements: readonly ["content", "image", "label", "actions"];
+export declare const getSelectionCardTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly ["content", "image", "label", "actions"]>;
 //# sourceMappingURL=SelectionCard.test-ids.d.ts.map

package/lib/components/SelectionCard/SelectionCard.test-ids.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionCard.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,qDAAsD,CAAC;AAEzF,eAAO,MAAM,uBAAuB,2IAAyD,CAAC"}
+{"version":3,"file":"SelectionCard.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,mDAAoD,CAAC;AAEvF,eAAO,MAAM,uBAAuB,yIAAyD,CAAC"}

package/lib/components/SelectionCard/SelectionCard.test-ids.js

@@ -1,4 +1,4 @@
 import { createTestIds } from '../../utils';
-export const selectionCardElements = ['content', 'image', 'control', 'actions'];
+export const selectionCardElements = ['content', 'image', 'label', 'actions'];
 export const getSelectionCardTestIds = createTestIds('selection-card', selectionCardElements);
 //# sourceMappingURL=SelectionCard.test-ids.js.map

package/lib/components/SelectionCard/SelectionCard.test-ids.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionCard.test-ids.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAU,CAAC;AAEzF,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAAC,gBAAgB,EAAE,qBAAqB,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const selectionCardElements = ['content', 'image', 'control', 'actions'] as const;\n\nexport const getSelectionCardTestIds = createTestIds('selection-card', selectionCardElements);\n"]}
+{"version":3,"file":"SelectionCard.test-ids.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,CAAU,CAAC;AAEvF,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAAC,gBAAgB,EAAE,qBAAqB,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const selectionCardElements = ['content', 'image', 'label', 'actions'] as const;\n\nexport const getSelectionCardTestIds = createTestIds('selection-card', selectionCardElements);\n"]}

package/lib/components/SelectionCard/SelectionCard.types.d.ts

@@ -6,14 +6,27 @@ import type { Action, WithAttributes, NoChildrenProp, TestIdProp, OmitStrict } f
 import type { selectionCardElements } from './SelectionCard.test-ids';
 export type ImagePlacement = 'block-start' | 'inline-end' | 'inline-start';
 export type ImageSize = 'flexible' | 'large' | 'small';
+interface SelectionCardTileBase {
+    foregroundColor: string;
+    backgroundColor: string;
+}
+/** Tile with a registered icon. */
+interface SelectionCardTileWithIcon extends SelectionCardTileBase {
+    icon: string;
+    text?: never;
+}
+/** Tile with a short metric string. */
+interface SelectionCardTileWithText extends SelectionCardTileBase {
+    icon?: never;
+    text: string;
+}
+export type SelectionCardTile = SelectionCardTileWithIcon | SelectionCardTileWithText;
 export type FieldValueItemPropsOmitName = OmitStrict<FieldValueListItemProps, 'name'>;
 export type SelectionCardProps = WithAttributes<'div', NoChildrenProp & TestIdProp<typeof selectionCardElements> & {
-    /** Pass a string or a fragment with a string. */
-    label: string;
     /** Content to be rendered as a card heading */
     heading: ReactNode;
-    /** The image to render in the card. */
-    image?: ImageProps & {
+    /** The image or tile to render in the card. */
+    image?: (ImageProps | SelectionCardTile) & {
         /**
          * Used to determine image placement
          * @default 'inline-start'
@@ -35,9 +48,14 @@ export type SelectionCardProps = WithAttributes<'div', NoChildrenProp & TestIdPr
     additionalInfo?: FormControlProps['additionalInfo'];
     /** Set the card to disabled state, ie. non-interactive. */
     disabled?: boolean;
-    /** Additional actions */
-    actions?: Action[];
+    /** Set the card to read-only state */
+    readOnly?: boolean;
+    /** Additional actions as a static array or a fetcher function for on-demand loading. */
+    actions?: Action[] | (() => Promise<Action[]>);
+    /** Optional footer content rendered at the bottom of the card. */
+    footer?: ReactNode;
     /** Reference to the component's input element. */
     ref?: Ref<HTMLDivElement>;
 }>;
+export {};
 //# sourceMappingURL=SelectionCard.types.d.ts.map

package/lib/components/SelectionCard/SelectionCard.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionCard.types.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,KAAK,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACtF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAElG,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,YAAY,GAAG,cAAc,CAAC;AAC3E,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;AAEvD,MAAM,MAAM,2BAA2B,GAAG,UAAU,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;AAEtF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAC7C,KAAK,EACL,cAAc,GACZ,UAAU,CAAC,OAAO,qBAAqB,CAAC,GAAG;IACzC,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,OAAO,EAAE,SAAS,CAAC;IACnB,uCAAuC;IACvC,KAAK,CAAC,EAAE,UAAU,GAAG;QACnB;;;WAGG;QACH,SAAS,CAAC,EAAE,cAAc,CAAC;QAC3B;;;WAGG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC;KAClB,CAAC;IACF,wCAAwC;IACxC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,sCAAsC;IACtC,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,qDAAqD;IACrD,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,GAAG,2BAA2B,EAAE,CAAC;IACvE,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,kDAAkD;IAClD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B,CACJ,CAAC"}
+{"version":3,"file":"SelectionCard.types.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,KAAK,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACtF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAElG,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,YAAY,GAAG,cAAc,CAAC;AAC3E,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;AAEvD,UAAU,qBAAqB;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,mCAAmC;AACnC,UAAU,yBAA0B,SAAQ,qBAAqB;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC;CACd;AAED,uCAAuC;AACvC,UAAU,yBAA0B,SAAQ,qBAAqB;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,MAAM,iBAAiB,GAAG,yBAAyB,GAAG,yBAAyB,CAAC;AAEtF,MAAM,MAAM,2BAA2B,GAAG,UAAU,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;AAEtF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAC7C,KAAK,EACL,cAAc,GACZ,UAAU,CAAC,OAAO,qBAAqB,CAAC,GAAG;IACzC,+CAA+C;IAC/C,OAAO,EAAE,SAAS,CAAC;IACnB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,CAAC,UAAU,GAAG,iBAAiB,CAAC,GAAG;QACzC;;;WAGG;QACH,SAAS,CAAC,EAAE,cAAc,CAAC;QAC3B;;;WAGG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC;KAClB,CAAC;IACF,wCAAwC;IACxC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,sCAAsC;IACtC,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,qDAAqD;IACrD,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,GAAG,2BAA2B,EAAE,CAAC;IACvE,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wFAAwF;IACxF,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IAC/C,kEAAkE;IAClE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,kDAAkD;IAClD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B,CACJ,CAAC"}

package/lib/components/SelectionCard/SelectionCard.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionCard.types.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref, MouseEventHandler, KeyboardEventHandler, ReactNode } from 'react';\n\nimport type { ImageProps } from '../Image';\nimport type { FieldValueListItemProps, FieldValueListProps } from '../FieldValueList';\nimport type { FormControlProps } from '../FormControl';\nimport type { Action, WithAttributes, NoChildrenProp, TestIdProp, OmitStrict } from '../../types';\n\nimport type { selectionCardElements } from './SelectionCard.test-ids';\n\nexport type ImagePlacement = 'block-start' | 'inline-end' | 'inline-start';\nexport type ImageSize = 'flexible' | 'large' | 'small';\n\nexport type FieldValueItemPropsOmitName = OmitStrict<FieldValueListItemProps, 'name'>;\n\nexport type SelectionCardProps = WithAttributes<\n  'div',\n  NoChildrenProp &\n    TestIdProp<typeof selectionCardElements> & {\n      /** Pass a string or a fragment with a string. */\n      label: string;\n      /** Content to be rendered as a card heading */\n      heading: ReactNode;\n      /** The image to render in the card. */\n      image?: ImageProps & {\n        /**\n         * Used to determine image placement\n         * @default 'inline-start'\n         */\n        placement?: ImagePlacement;\n        /**\n         * Used to determine image size\n         * @default 'large'\n         */\n        size?: ImageSize;\n      };\n      /** The onClick handler for the item. */\n      onClick?: MouseEventHandler;\n      /** Called when user presses a key. */\n      onKeyDown?: KeyboardEventHandler;\n      /** The set of field values to render in the card. */\n      fields?: FieldValueListProps['fields'] | FieldValueItemPropsOmitName[];\n      /** Pass a heading and content to show additional information on the field. */\n      additionalInfo?: FormControlProps['additionalInfo'];\n      /** Set the card to disabled state, ie. non-interactive. */\n      disabled?: boolean;\n      /** Additional actions */\n      actions?: Action[];\n      /** Reference to the component's input element. */\n      ref?: Ref<HTMLDivElement>;\n    }\n>;\n"]}
+{"version":3,"file":"SelectionCard.types.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref, MouseEventHandler, KeyboardEventHandler, ReactNode } from 'react';\n\nimport type { ImageProps } from '../Image';\nimport type { FieldValueListItemProps, FieldValueListProps } from '../FieldValueList';\nimport type { FormControlProps } from '../FormControl';\nimport type { Action, WithAttributes, NoChildrenProp, TestIdProp, OmitStrict } from '../../types';\n\nimport type { selectionCardElements } from './SelectionCard.test-ids';\n\nexport type ImagePlacement = 'block-start' | 'inline-end' | 'inline-start';\nexport type ImageSize = 'flexible' | 'large' | 'small';\n\ninterface SelectionCardTileBase {\n  foregroundColor: string;\n  backgroundColor: string;\n}\n\n/** Tile with a registered icon. */\ninterface SelectionCardTileWithIcon extends SelectionCardTileBase {\n  icon: string;\n  text?: never;\n}\n\n/** Tile with a short metric string. */\ninterface SelectionCardTileWithText extends SelectionCardTileBase {\n  icon?: never;\n  text: string;\n}\n\nexport type SelectionCardTile = SelectionCardTileWithIcon | SelectionCardTileWithText;\n\nexport type FieldValueItemPropsOmitName = OmitStrict<FieldValueListItemProps, 'name'>;\n\nexport type SelectionCardProps = WithAttributes<\n  'div',\n  NoChildrenProp &\n    TestIdProp<typeof selectionCardElements> & {\n      /** Content to be rendered as a card heading */\n      heading: ReactNode;\n      /** The image or tile to render in the card. */\n      image?: (ImageProps | SelectionCardTile) & {\n        /**\n         * Used to determine image placement\n         * @default 'inline-start'\n         */\n        placement?: ImagePlacement;\n        /**\n         * Used to determine image size\n         * @default 'large'\n         */\n        size?: ImageSize;\n      };\n      /** The onClick handler for the item. */\n      onClick?: MouseEventHandler;\n      /** Called when user presses a key. */\n      onKeyDown?: KeyboardEventHandler;\n      /** The set of field values to render in the card. */\n      fields?: FieldValueListProps['fields'] | FieldValueItemPropsOmitName[];\n      /** Pass a heading and content to show additional information on the field. */\n      additionalInfo?: FormControlProps['additionalInfo'];\n      /** Set the card to disabled state, ie. non-interactive. */\n      disabled?: boolean;\n      /** Set the card to read-only state */\n      readOnly?: boolean;\n      /** Additional actions as a static array or a fetcher function for on-demand loading. */\n      actions?: Action[] | (() => Promise<Action[]>);\n      /** Optional footer content rendered at the bottom of the card. */\n      footer?: ReactNode;\n      /** Reference to the component's input element. */\n      ref?: Ref<HTMLDivElement>;\n    }\n>;\n"]}

package/lib/components/SelectionCard/SelectionCardActions.d.ts

@@ -0,0 +1,8 @@
+import type { SelectionCardProps } from './SelectionCard.types';
+interface SelectionCardActionsProps extends Pick<SelectionCardProps, 'disabled'> {
+    actions: NonNullable<SelectionCardProps['actions']>;
+    contextualLabel?: string;
+}
+declare const SelectionCardActions: import("react").ForwardRefExoticComponent<SelectionCardActionsProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default SelectionCardActions;
+//# sourceMappingURL=SelectionCardActions.d.ts.map

package/lib/components/SelectionCard/SelectionCardActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionCardActions.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCardActions.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,UAAU,yBAA0B,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC;IAC9E,OAAO,EAAE,WAAW,CAAC,kBAAkB,CAAC,SAAS,CAAC,CAAC,CAAC;IACpD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,QAAA,MAAM,oBAAoB,yHAyEzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/lib/components/SelectionCard/SelectionCardActions.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useCallback } from 'react';
+import { useConsolidatedRef, useI18n } from '../../hooks';
+import Actions from '../Actions';
+import MenuButton from '../MenuButton';
+const SelectionCardActions = forwardRef(function SelectionCardActions({ actions, disabled = false, contextualLabel, ...restProps }, ref) {
+    const t = useI18n();
+    const menuButtonRef = useConsolidatedRef(ref);
+    const [isLoading, setIsLoading] = useState(false);
+    const [menuItems, setMenuItems] = useState([]);
+    const mapActions = useCallback((fetchedActions) => fetchedActions.map(({ text, onClick, ...action }) => ({
+        ...action,
+        primary: text,
+        onClick: onClick
+            ? (id, e) => {
+                onClick(id, e, menuButtonRef.current ?? undefined);
+                menuButtonRef.current?.focus();
+            }
+            : undefined
+    })), []);
+    const handleClick = useCallback(async (e) => {
+        if (typeof actions !== 'function')
+            return;
+        if (e.currentTarget.getAttribute('aria-expanded') === 'true')
+            return;
+        setIsLoading(true);
+        setMenuItems([]);
+        try {
+            const fetchedActions = await actions();
+            setMenuItems(mapActions(fetchedActions));
+        }
+        catch {
+            // rejection handled silently
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [actions, mapActions]);
+    if (typeof actions === 'function') {
+        return (_jsx(MenuButton, { ...restProps, ref: menuButtonRef, text: t('actions'), "aria-label": contextualLabel ? t('actions_for', [contextualLabel]) : undefined, iconOnly: true, icon: 'more', variant: 'simple', disabled: disabled, onClick: handleClick, menu: {
+                items: menuItems,
+                loading: isLoading
+            } }));
+    }
+    return (_jsx(Actions, { ...restProps, items: actions, menuAt: 1, disabled: disabled, contextualLabel: contextualLabel }));
+});
+export default SelectionCardActions;
+//# sourceMappingURL=SelectionCardActions.js.map

package/lib/components/SelectionCard/SelectionCardActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionCardActions.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCardActions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAI1D,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,OAAO,UAAU,MAAM,eAAe,CAAC;AASvC,MAAM,oBAAoB,GAAG,UAAU,CACrC,SAAS,oBAAoB,CAAC,EAAE,OAAO,EAAE,QAAQ,GAAG,KAAK,EAAE,eAAe,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG;IAC7F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,aAAa,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE9C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAkB,EAAE,CAAC,CAAC;IAEhE,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,cAAwB,EAAmB,EAAE,CAC5C,cAAc,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;QACpD,GAAG,MAAM;QACT,OAAO,EAAE,IAAI;QACb,OAAO,EAAE,OAAO;YACd,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;gBACR,OAAO,CAAC,EAAE,EAAE,CAAC,EAAE,aAAa,CAAC,OAAO,IAAI,SAAS,CAAC,CAAC;gBACnD,aAAa,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;YACjC,CAAC;YACH,CAAC,CAAC,SAAS;KACd,CAAC,CAAC,EACL,EAAE,CACH,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAC7B,KAAK,EAAE,CAAgC,EAAE,EAAE;QACzC,IAAI,OAAO,OAAO,KAAK,UAAU;YAAE,OAAO;QAC1C,IAAI,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM;YAAE,OAAO;QAErE,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,YAAY,CAAC,EAAE,CAAC,CAAC;QAEjB,IAAI,CAAC;YACH,MAAM,cAAc,GAAG,MAAM,OAAO,EAAE,CAAC;YACvC,YAAY,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC;QAC3C,CAAC;QAAC,MAAM,CAAC;YACP,6BAA6B;QAC/B,CAAC;gBAAS,CAAC;YACT,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,EACD,CAAC,OAAO,EAAE,UAAU,CAAC,CACtB,CAAC;IAEF,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE,CAAC;QAClC,OAAO,CACL,KAAC,UAAU,OACL,SAAS,EACb,GAAG,EAAE,aAAa,EAClB,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,gBACN,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAC7E,QAAQ,QACR,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,QAAQ,EAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE;gBACJ,KAAK,EAAE,SAAS;gBAChB,OAAO,EAAE,SAAS;aACnB,GACD,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,OAAO,OACF,SAAS,EACb,KAAK,EAAE,OAAO,EACd,MAAM,EAAE,CAAC,EACT,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,GAChC,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import { forwardRef, useState, useCallback } from 'react';\nimport type { MouseEvent } from 'react';\n\nimport type { Action } from '../../types';\nimport { useConsolidatedRef, useI18n } from '../../hooks';\nimport Actions from '../Actions';\nimport type { MenuItemProps } from '../Menu/Menu.types';\nimport MenuButton from '../MenuButton';\n\nimport type { SelectionCardProps } from './SelectionCard.types';\n\ninterface SelectionCardActionsProps extends Pick<SelectionCardProps, 'disabled'> {\n  actions: NonNullable<SelectionCardProps['actions']>;\n  contextualLabel?: string;\n}\n\nconst SelectionCardActions = forwardRef<HTMLButtonElement, SelectionCardActionsProps>(\n  function SelectionCardActions({ actions, disabled = false, contextualLabel, ...restProps }, ref) {\n    const t = useI18n();\n    const menuButtonRef = useConsolidatedRef(ref);\n\n    const [isLoading, setIsLoading] = useState(false);\n    const [menuItems, setMenuItems] = useState<MenuItemProps[]>([]);\n\n    const mapActions = useCallback(\n      (fetchedActions: Action[]): MenuItemProps[] =>\n        fetchedActions.map(({ text, onClick, ...action }) => ({\n          ...action,\n          primary: text,\n          onClick: onClick\n            ? (id, e) => {\n                onClick(id, e, menuButtonRef.current ?? undefined);\n                menuButtonRef.current?.focus();\n              }\n            : undefined\n        })),\n      []\n    );\n\n    const handleClick = useCallback(\n      async (e: MouseEvent<HTMLButtonElement>) => {\n        if (typeof actions !== 'function') return;\n        if (e.currentTarget.getAttribute('aria-expanded') === 'true') return;\n\n        setIsLoading(true);\n        setMenuItems([]);\n\n        try {\n          const fetchedActions = await actions();\n          setMenuItems(mapActions(fetchedActions));\n        } catch {\n          // rejection handled silently\n        } finally {\n          setIsLoading(false);\n        }\n      },\n      [actions, mapActions]\n    );\n\n    if (typeof actions === 'function') {\n      return (\n        <MenuButton\n          {...restProps}\n          ref={menuButtonRef}\n          text={t('actions')}\n          aria-label={contextualLabel ? t('actions_for', [contextualLabel]) : undefined}\n          iconOnly\n          icon='more'\n          variant='simple'\n          disabled={disabled}\n          onClick={handleClick}\n          menu={{\n            items: menuItems,\n            loading: isLoading\n          }}\n        />\n      );\n    }\n\n    return (\n      <Actions\n        {...restProps}\n        items={actions}\n        menuAt={1}\n        disabled={disabled}\n        contextualLabel={contextualLabel}\n      />\n    );\n  }\n);\n\nexport default SelectionCardActions;\n"]}

package/lib/components/SelectionCard/SelectionCardDisplay.d.ts

@@ -1,8 +1,16 @@
-import type { OmitStrict } from '../../types';
+import type { ReactNode } from 'react';
+import type { HeadingTag, OmitStrict } from '../../types';
 import type { SelectionCardProps } from './SelectionCard.types';
-export type SelectionCardDisplayProps = OmitStrict<SelectionCardProps, 'heading' | 'disabled' | 'onClick' | 'onKeyDown'>;
-declare const _default: import("react").ForwardRefExoticComponent<Omit<Pick<SelectionCardProps, "hidden" | "color" | "content" | "style" | "translate" | "prefix" | "label" | "slot" | "title" | "image" | "ref" | "suppressHydrationWarning" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "inert" | "testId" | "actions" | "fields" | "additionalInfo">, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-    getTestIds: (testIdProp?: import("../../types").TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["content", "image", "control", "actions"]>;
+export interface SelectionCardDisplayProps extends OmitStrict<SelectionCardProps, 'heading' | 'disabled'> {
+    label: NonNullable<ReactNode>;
+    /**
+     * Uses specific heading tag for header.
+     * @default h4
+     */
+    headingTag?: HeadingTag;
+}
+declare const _default: import("react").ForwardRefExoticComponent<Omit<SelectionCardDisplayProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    getTestIds: (testIdProp?: import("../../types").TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["content", "image", "label", "actions"]>;
 };
 export default _default;
 //# sourceMappingURL=SelectionCardDisplay.d.ts.map

package/lib/components/SelectionCard/SelectionCardDisplay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionCardDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCardDisplay.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;AAK1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE,MAAM,MAAM,yBAAyB,GAAG,UAAU,CAChD,kBAAkB,EAClB,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,CACjD,CAAC;;;;AAuBF,wBAA0E"}
+{"version":3,"file":"SelectionCardDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCardDisplay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;AAKtE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE,MAAM,WAAW,yBACf,SAAQ,UAAU,CAAC,kBAAkB,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9D,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;;;;AAmCD,wBAA0E"}