@elliemae/ds-ribbon 3.80.0-next.2 → 3.80.0-next.20

package/dist/cjs/parts/DSRibbonCard/DSRibbonCard.js

@@ -44,8 +44,9 @@ var import_styled = require("./styled.js");
 var import_DSRibbonCardWithAdditionalLabel = require("./DSRibbonCardWithAdditionalLabel.js");
 const DSRibbonCard = (props) => {
   const ribbonCardConfig = (0, import_useRibbonCard.useRibbonCard)(props);
-  const { propsWithDefault, xstyledProps, globalProps } = ribbonCardConfig;
-  const { containerProps, value, additionalValue, additionalLabel, center } = propsWithDefault;
+  const { propsWithDefault, xstyledProps, globalProps, instanceUid } = ribbonCardConfig;
+  const { containerProps, value, additionalValue, additionalLabel, center, label } = propsWithDefault;
+  const labelId = `${instanceUid}-label`;
   const getOwnerProps = import_react.default.useCallback(() => propsWithDefault, [propsWithDefault]);
   const getOwnerPropsArguments = import_react.default.useCallback(() => ({}), []);
   if (additionalValue)
@@ -61,8 +62,16 @@ const DSRibbonCard = (props) => {
       getOwnerProps,
       getOwnerPropsArguments,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledBlockRow, { center, getOwnerProps, getOwnerPropsArguments, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PureLabelPlace.PureLabelPlace, { ...propsWithDefault, getOwnerProps }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBlockValue, { getOwnerProps, getOwnerPropsArguments, children: value })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PureLabelPlace.PureLabelPlace, { ...propsWithDefault, labelId, getOwnerProps }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styled.StyledBlockValue,
+          {
+            "aria-labelledby": label ? labelId : void 0,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: value
+          }
+        )
       ] })
     }
   );

package/dist/cjs/parts/DSRibbonCard/DSRibbonCard.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSRibbonCard/DSRibbonCard.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { describe } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useRibbonCard } from './config/useRibbonCard.js';\nimport { DSRibbonCardWithAdditionalValue } from './DSRibbonCardWithAdditionalValue.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport { type DSRibbonCardT, DSRibbonCardPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockRow, StyledBlockValue } from './styled.js';\nimport { DSRibbonCardWithAdditionalLabel } from './DSRibbonCardWithAdditionalLabel.js';\n\nconst DSRibbonCard: React.ComponentType<DSRibbonCardT.Props> = (props) => {\n  const ribbonCardConfig = useRibbonCard(props);\n  const { propsWithDefault, xstyledProps, globalProps } = ribbonCardConfig;\n  const { containerProps, value, additionalValue, additionalLabel, center } = propsWithDefault;\n  const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n  if (additionalValue)\n    return <DSRibbonCardWithAdditionalValue ribbonCardConfig={ribbonCardConfig} getOwnerProps={getOwnerProps} />;\n  if (additionalLabel)\n    return <DSRibbonCardWithAdditionalLabel ribbonCardConfig={ribbonCardConfig} getOwnerProps={getOwnerProps} />;\n\n  return (\n    <StyledBlock\n      {...containerProps}\n      {...globalProps}\n      {...xstyledProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledBlockRow center={center} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        <PureLabelPlace {...propsWithDefault} getOwnerProps={getOwnerProps} />\n        <StyledBlockValue getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n          {value}\n        </StyledBlockValue>\n      </StyledBlockRow>\n    </StyledBlock>\n  );\n};\n\n// because this is a part, only the displayName is supposed to differ from the parent\nDSRibbonCard.displayName = 'DSRibbonCard';\nconst DSRibbonCardWithSchema = describe(DSRibbonCard);\nDSRibbonCardWithSchema.propTypes = DSRibbonCardPropTypesSchema;\n\nexport { DSRibbonCard, DSRibbonCardWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBZ;AAjBX,8BAAyB;AACzB,mBAAkB;AAClB,2BAA8B;AAC9B,6CAAgD;AAChD,4BAA+B;AAC/B,mCAAgE;AAChE,oBAA8D;AAC9D,6CAAgD;AAEhD,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,uBAAmB,oCAAc,KAAK;AAC5C,QAAM,EAAE,kBAAkB,cAAc,YAAY,IAAI;AACxD,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,iBAAiB,OAAO,IAAI;AAC5E,QAAM,gBAAgB,aAAAA,QAAM,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAClF,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,MAAI;AACF,WAAO,4CAAC,0EAAgC,kBAAoC,eAA8B;AAC5G,MAAI;AACF,WAAO,4CAAC,0EAAgC,kBAAoC,eAA8B;AAE5G,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA,uDAAC,gCAAe,QAAgB,eAA8B,wBAC5D;AAAA,oDAAC,wCAAgB,GAAG,kBAAkB,eAA8B;AAAA,QACpE,4CAAC,kCAAiB,eAA8B,wBAC7C,iBACH;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAGA,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { describe } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useRibbonCard } from './config/useRibbonCard.js';\nimport { DSRibbonCardWithAdditionalValue } from './DSRibbonCardWithAdditionalValue.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport { type DSRibbonCardT, DSRibbonCardPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockRow, StyledBlockValue } from './styled.js';\nimport { DSRibbonCardWithAdditionalLabel } from './DSRibbonCardWithAdditionalLabel.js';\n\nconst DSRibbonCard: React.ComponentType<DSRibbonCardT.Props> = (props) => {\n  const ribbonCardConfig = useRibbonCard(props);\n  const { propsWithDefault, xstyledProps, globalProps, instanceUid } = ribbonCardConfig;\n  const { containerProps, value, additionalValue, additionalLabel, center, label } = propsWithDefault;\n  const labelId = `${instanceUid}-label`;\n  const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n  if (additionalValue)\n    return <DSRibbonCardWithAdditionalValue ribbonCardConfig={ribbonCardConfig} getOwnerProps={getOwnerProps} />;\n  if (additionalLabel)\n    return <DSRibbonCardWithAdditionalLabel ribbonCardConfig={ribbonCardConfig} getOwnerProps={getOwnerProps} />;\n\n  return (\n    <StyledBlock\n      {...containerProps}\n      {...globalProps}\n      {...xstyledProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledBlockRow center={center} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        <PureLabelPlace {...propsWithDefault} labelId={labelId} getOwnerProps={getOwnerProps} />\n        <StyledBlockValue\n          aria-labelledby={label ? labelId : undefined}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {value}\n        </StyledBlockValue>\n      </StyledBlockRow>\n    </StyledBlock>\n  );\n};\n\n// because this is a part, only the displayName is supposed to differ from the parent\nDSRibbonCard.displayName = 'DSRibbonCard';\nconst DSRibbonCardWithSchema = describe(DSRibbonCard);\nDSRibbonCardWithSchema.propTypes = DSRibbonCardPropTypesSchema;\n\nexport { DSRibbonCard, DSRibbonCardWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBZ;AAlBX,8BAAyB;AACzB,mBAAkB;AAClB,2BAA8B;AAC9B,6CAAgD;AAChD,4BAA+B;AAC/B,mCAAgE;AAChE,oBAA8D;AAC9D,6CAAgD;AAEhD,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,uBAAmB,oCAAc,KAAK;AAC5C,QAAM,EAAE,kBAAkB,cAAc,aAAa,YAAY,IAAI;AACrE,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,iBAAiB,QAAQ,MAAM,IAAI;AACnF,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,gBAAgB,aAAAA,QAAM,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAClF,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,MAAI;AACF,WAAO,4CAAC,0EAAgC,kBAAoC,eAA8B;AAC5G,MAAI;AACF,WAAO,4CAAC,0EAAgC,kBAAoC,eAA8B;AAE5G,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA,uDAAC,gCAAe,QAAgB,eAA8B,wBAC5D;AAAA,oDAAC,wCAAgB,GAAG,kBAAkB,SAAkB,eAA8B;AAAA,QACtF;AAAA,UAAC;AAAA;AAAA,YACC,mBAAiB,QAAQ,UAAU;AAAA,YACnC;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAGA,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
   "names": ["React"]
 }

package/dist/cjs/parts/DSRibbonCard/DSRibbonCardWithAdditionalLabel.js

@@ -39,10 +39,13 @@ var import_styled = require("./styled.js");
 const DSRibbonCardWithAdditionalLabel = (props) => {
   const {
     getOwnerProps,
-    ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps }
+    ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps, instanceUid }
   } = props;
-  const { containerProps, value, additionalLabel, center } = propsWithDefault;
+  const { containerProps, value, additionalLabel, center, label } = propsWithDefault;
   const getOwnerPropsArguments = import_react.default.useCallback(() => ({}), []);
+  const labelId = `${instanceUid}-label`;
+  const additionalLabelId = `${instanceUid}-additional-label`;
+  const labelledBy = label && labelId || additionalLabel && additionalLabelId || void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styled.StyledBlock,
     {
@@ -59,7 +62,7 @@ const DSRibbonCardWithAdditionalLabel = (props) => {
           getOwnerProps,
           getOwnerPropsArguments,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PureLabelPlace.PureLabelPlace, { ...propsWithDefault, getOwnerProps }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PureLabelPlace.PureLabelPlace, { ...propsWithDefault, labelId, getOwnerProps }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
               import_styled.StyledBlockCol,
               {
@@ -68,8 +71,24 @@ const DSRibbonCardWithAdditionalLabel = (props) => {
                 getOwnerProps,
                 getOwnerPropsArguments,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBlockValue, { getOwnerProps, getOwnerPropsArguments, children: value }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBlockValueLabel, { getOwnerProps, getOwnerPropsArguments, children: additionalLabel })
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_styled.StyledBlockValue,
+                    {
+                      "aria-labelledby": labelledBy,
+                      getOwnerProps,
+                      getOwnerPropsArguments,
+                      children: value
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_styled.StyledBlockValueLabel,
+                    {
+                      id: additionalLabelId,
+                      getOwnerProps,
+                      getOwnerPropsArguments,
+                      children: additionalLabel
+                    }
+                  )
                 ]
               }
             )

package/dist/cjs/parts/DSRibbonCard/DSRibbonCardWithAdditionalLabel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSRibbonCard/DSRibbonCardWithAdditionalLabel.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport type { useRibbonCard } from './config/useRibbonCard.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue, StyledBlockValueLabel } from './styled.js';\n\nexport const DSRibbonCardWithAdditionalLabel: React.ComponentType<{\n  ribbonCardConfig: ReturnType<typeof useRibbonCard>;\n  getOwnerProps: () => DSRibbonCardT.InternalProps;\n}> = (props) => {\n  const {\n    getOwnerProps,\n    ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps },\n  } = props;\n  const { containerProps, value, additionalLabel, center } = propsWithDefault;\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n  return (\n    <StyledBlock\n      {...containerProps}\n      {...globalProps}\n      {...xstyledProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledBlockRow\n        className=\"ribbon-block-row\"\n        style={{ alignItems: 'flex-start' }}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <PureLabelPlace {...propsWithDefault} getOwnerProps={getOwnerProps} />\n        <StyledBlockCol\n          center={center}\n          className=\"ribbon-block-col\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <StyledBlockValue getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n            {value}\n          </StyledBlockValue>\n          <StyledBlockValueLabel getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n            {additionalLabel}\n          </StyledBlockValueLabel>\n        </StyledBlockCol>\n      </StyledBlockRow>\n    </StyledBlock>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8Bf;AA9BR,mBAAkB;AAElB,4BAA+B;AAE/B,oBAAqG;AAE9F,MAAM,kCAGR,CAAC,UAAU;AACd,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,kBAAkB,cAAc,YAAY;AAAA,EAClE,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,OAAO,IAAI;AAC3D,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,aAAa;AAAA,UAClC;AAAA,UACA;AAAA,UAEA;AAAA,wDAAC,wCAAgB,GAAG,kBAAkB,eAA8B;AAAA,YACpE;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA,8DAAC,kCAAiB,eAA8B,wBAC7C,iBACH;AAAA,kBACA,4CAAC,uCAAsB,eAA8B,wBAClD,2BACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import React from 'react';\nimport type { useRibbonCard } from './config/useRibbonCard.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue, StyledBlockValueLabel } from './styled.js';\n\nexport const DSRibbonCardWithAdditionalLabel: React.ComponentType<{\n  ribbonCardConfig: ReturnType<typeof useRibbonCard>;\n  getOwnerProps: () => DSRibbonCardT.InternalProps;\n}> = (props) => {\n  const {\n    getOwnerProps,\n    ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps, instanceUid },\n  } = props;\n  const { containerProps, value, additionalLabel, center, label } = propsWithDefault;\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n  // This variant is normally used without `label` \u2014 `<RibbonCard additionalLabel=\"Processed\"\n  // value=\"50\" />` \u2014 so the additional label is what names the value. A real `label` outranks it.\n  const labelId = `${instanceUid}-label`;\n  const additionalLabelId = `${instanceUid}-additional-label`;\n  const labelledBy = (label && labelId) || (additionalLabel && additionalLabelId) || undefined;\n  return (\n    <StyledBlock\n      {...containerProps}\n      {...globalProps}\n      {...xstyledProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledBlockRow\n        className=\"ribbon-block-row\"\n        style={{ alignItems: 'flex-start' }}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <PureLabelPlace {...propsWithDefault} labelId={labelId} getOwnerProps={getOwnerProps} />\n        <StyledBlockCol\n          center={center}\n          className=\"ribbon-block-col\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <StyledBlockValue\n            aria-labelledby={labelledBy}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {value}\n          </StyledBlockValue>\n          <StyledBlockValueLabel\n            id={additionalLabelId}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {additionalLabel}\n          </StyledBlockValueLabel>\n        </StyledBlockCol>\n      </StyledBlockRow>\n    </StyledBlock>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCf;AAnCR,mBAAkB;AAElB,4BAA+B;AAE/B,oBAAqG;AAE9F,MAAM,kCAGR,CAAC,UAAU;AACd,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,kBAAkB,cAAc,aAAa,YAAY;AAAA,EAC/E,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,QAAQ,MAAM,IAAI;AAClE,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAG/D,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,oBAAoB,GAAG,WAAW;AACxC,QAAM,aAAc,SAAS,WAAa,mBAAmB,qBAAsB;AACnF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,aAAa;AAAA,UAClC;AAAA,UACA;AAAA,UAEA;AAAA,wDAAC,wCAAgB,GAAG,kBAAkB,SAAkB,eAA8B;AAAA,YACtF;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,mBAAiB;AAAA,sBACjB;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA,kBACA;AAAA,oBAAC;AAAA;AAAA,sBACC,IAAI;AAAA,sBACJ;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/parts/DSRibbonCard/DSRibbonCardWithAdditionalValue.js

@@ -39,10 +39,12 @@ var import_styled = require("./styled.js");
 const DSRibbonCardWithAdditionalValue = (props) => {
   const {
     getOwnerProps,
-    ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps }
+    ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps, instanceUid }
   } = props;
-  const { containerProps, value, additionalValue, center } = propsWithDefault;
+  const { containerProps, value, additionalValue, center, label } = propsWithDefault;
   const getOwnerPropsArguments = import_react.default.useCallback(() => ({}), []);
+  const labelId = `${instanceUid}-label`;
+  const labelledBy = label ? labelId : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styled.StyledBlock,
     {
@@ -59,7 +61,7 @@ const DSRibbonCardWithAdditionalValue = (props) => {
           getOwnerProps,
           getOwnerPropsArguments,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PureLabelPlace.PureLabelPlace, { ...propsWithDefault, getOwnerProps }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PureLabelPlace.PureLabelPlace, { ...propsWithDefault, labelId, getOwnerProps }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
               import_styled.StyledBlockCol,
               {
@@ -68,8 +70,24 @@ const DSRibbonCardWithAdditionalValue = (props) => {
                 getOwnerProps,
                 getOwnerPropsArguments,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBlockValue, { getOwnerProps, getOwnerPropsArguments, children: value }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBlockValue, { getOwnerProps, getOwnerPropsArguments, children: additionalValue })
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_styled.StyledBlockValue,
+                    {
+                      "aria-labelledby": labelledBy,
+                      getOwnerProps,
+                      getOwnerPropsArguments,
+                      children: value
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_styled.StyledBlockValue,
+                    {
+                      "aria-labelledby": labelledBy,
+                      getOwnerProps,
+                      getOwnerPropsArguments,
+                      children: additionalValue
+                    }
+                  )
                 ]
               }
             )

package/dist/cjs/parts/DSRibbonCard/DSRibbonCardWithAdditionalValue.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSRibbonCard/DSRibbonCardWithAdditionalValue.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport type { useRibbonCard } from './config/useRibbonCard.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue } from './styled.js';\n\nexport const DSRibbonCardWithAdditionalValue: React.ComponentType<{\n  ribbonCardConfig: ReturnType<typeof useRibbonCard>;\n  getOwnerProps: () => DSRibbonCardT.InternalProps;\n}> = (props) => {\n  const {\n    getOwnerProps,\n    ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps },\n  } = props;\n  const { containerProps, value, additionalValue, center } = propsWithDefault;\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n  return (\n    <StyledBlock\n      {...containerProps}\n      {...globalProps}\n      {...xstyledProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledBlockRow\n        className=\"ribbon-block-row\"\n        style={{ alignItems: 'flex-start' }}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <PureLabelPlace {...propsWithDefault} getOwnerProps={getOwnerProps} />\n        <StyledBlockCol\n          center={center}\n          className=\"ribbon-block-col\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <StyledBlockValue getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n            {value}\n          </StyledBlockValue>\n          <StyledBlockValue getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n            {additionalValue}\n          </StyledBlockValue>\n        </StyledBlockCol>\n      </StyledBlockRow>\n    </StyledBlock>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8Bf;AA9BR,mBAAkB;AAElB,4BAA+B;AAE/B,oBAA8E;AAEvE,MAAM,kCAGR,CAAC,UAAU;AACd,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,kBAAkB,cAAc,YAAY;AAAA,EAClE,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,OAAO,IAAI;AAC3D,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,aAAa;AAAA,UAClC;AAAA,UACA;AAAA,UAEA;AAAA,wDAAC,wCAAgB,GAAG,kBAAkB,eAA8B;AAAA,YACpE;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA,8DAAC,kCAAiB,eAA8B,wBAC7C,iBACH;AAAA,kBACA,4CAAC,kCAAiB,eAA8B,wBAC7C,2BACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import React from 'react';\nimport type { useRibbonCard } from './config/useRibbonCard.js';\nimport { PureLabelPlace } from './PureLabelPlace.js';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlock, StyledBlockCol, StyledBlockRow, StyledBlockValue } from './styled.js';\n\nexport const DSRibbonCardWithAdditionalValue: React.ComponentType<{\n  ribbonCardConfig: ReturnType<typeof useRibbonCard>;\n  getOwnerProps: () => DSRibbonCardT.InternalProps;\n}> = (props) => {\n  const {\n    getOwnerProps,\n    ribbonCardConfig: { propsWithDefault, xstyledProps, globalProps, instanceUid },\n  } = props;\n  const { containerProps, value, additionalValue, center, label } = propsWithDefault;\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n  // One label, two values: it names both.\n  const labelId = `${instanceUid}-label`;\n  const labelledBy = label ? labelId : undefined;\n  return (\n    <StyledBlock\n      {...containerProps}\n      {...globalProps}\n      {...xstyledProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledBlockRow\n        className=\"ribbon-block-row\"\n        style={{ alignItems: 'flex-start' }}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <PureLabelPlace {...propsWithDefault} labelId={labelId} getOwnerProps={getOwnerProps} />\n        <StyledBlockCol\n          center={center}\n          className=\"ribbon-block-col\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <StyledBlockValue\n            aria-labelledby={labelledBy}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {value}\n          </StyledBlockValue>\n          <StyledBlockValue\n            aria-labelledby={labelledBy}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {additionalValue}\n          </StyledBlockValue>\n        </StyledBlockCol>\n      </StyledBlockRow>\n    </StyledBlock>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiCf;AAjCR,mBAAkB;AAElB,4BAA+B;AAE/B,oBAA8E;AAEvE,MAAM,kCAGR,CAAC,UAAU;AACd,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,kBAAkB,cAAc,aAAa,YAAY;AAAA,EAC/E,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,iBAAiB,QAAQ,MAAM,IAAI;AAClE,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,aAAa,QAAQ,UAAU;AACrC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,aAAa;AAAA,UAClC;AAAA,UACA;AAAA,UAEA;AAAA,wDAAC,wCAAgB,GAAG,kBAAkB,SAAkB,eAA8B;AAAA,YACtF;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,mBAAiB;AAAA,sBACjB;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA,kBACA;AAAA,oBAAC;AAAA;AAAA,sBACC,mBAAiB;AAAA,sBACjB;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/parts/DSRibbonCard/PureLabelPlace.js

@@ -35,27 +35,64 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_styled = require("./styled.js");
+const srOnlyStyle = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+const STATUS_TEXT = {
+  info: "Information",
+  error: "Error",
+  warning: "Warning",
+  success: "Success"
+};
+const resolveStatusText = ({
+  info,
+  error,
+  warning,
+  success
+}) => {
+  if (info) return STATUS_TEXT.info;
+  if (error) return STATUS_TEXT.error;
+  if (warning) return STATUS_TEXT.warning;
+  if (success) return STATUS_TEXT.success;
+  return "";
+};
 const PureLabelPlace = ({
   icon,
   error,
   info,
   success,
   warning,
+  statusText,
   label,
+  labelId,
   getOwnerProps
 }) => {
   const getOwnerPropsArguments = import_react.default.useCallback(() => ({}), []);
-  return icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_styled.StyledBlockIcon,
-    {
-      error,
-      info,
-      success,
-      warning,
-      getOwnerProps,
-      getOwnerPropsArguments,
-      children: icon
-    }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBlockLabel, { getOwnerProps, getOwnerPropsArguments, children: label });
+  const showLabel = !icon || Boolean(label);
+  const announcedStatus = resolveStatusText({ info, error, warning, success });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    announcedStatus ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: srOnlyStyle, children: statusText || announcedStatus }) : null,
+    icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_styled.StyledBlockIcon,
+      {
+        error,
+        info,
+        success,
+        warning,
+        getOwnerProps,
+        getOwnerPropsArguments,
+        children: icon
+      }
+    ) : null,
+    showLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBlockLabel, { id: labelId, getOwnerProps, getOwnerPropsArguments, children: label }) : null
+  ] });
 };
 //# sourceMappingURL=PureLabelPlace.js.map

package/dist/cjs/parts/DSRibbonCard/PureLabelPlace.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSRibbonCard/PureLabelPlace.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlockIcon, StyledBlockLabel } from './styled.js';\n\nexport const PureLabelPlace: React.ComponentType<PureLabelPlaceProps> = ({\n  icon,\n  error,\n  info,\n  success,\n  warning,\n  label,\n  getOwnerProps,\n}) => {\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n  return icon ? (\n    <StyledBlockIcon\n      error={error}\n      info={info}\n      success={success}\n      warning={warning}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {icon}\n    </StyledBlockIcon>\n  ) : (\n    <StyledBlockLabel getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n      {label}\n    </StyledBlockLabel>\n  );\n};\ntype PureLabelPlaceProps = {\n  icon?: DSRibbonCardT.Props['icon'];\n  label?: DSRibbonCardT.Props['label'];\n  error?: DSRibbonCardT.Props['error'];\n  info?: DSRibbonCardT.Props['info'];\n  success?: DSRibbonCardT.Props['success'];\n  warning?: DSRibbonCardT.Props['warning'];\n  getOwnerProps: () => DSRibbonCardT.InternalProps;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADenB;AAfJ,mBAAkB;AAElB,oBAAkD;AAE3C,MAAM,iBAA2D,CAAC;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/D,SAAO,OACL;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH,IAEA,4CAAC,kCAAiB,eAA8B,wBAC7C,iBACH;AAEJ;",
+  "sourcesContent": ["import React from 'react';\nimport type { DSRibbonCardT } from './react-desc-prop-types.js';\nimport { StyledBlockIcon, StyledBlockLabel } from './styled.js';\n\n// Reaches assistive technology, never painted. Same approach as ds-form-date-time-picker's\n// MeridiemList.\nconst srOnlyStyle: React.CSSProperties = {\n  position: 'absolute',\n  width: '1px',\n  height: '1px',\n  padding: 0,\n  margin: '-1px',\n  overflow: 'hidden',\n  clip: 'rect(0, 0, 0, 0)',\n  whiteSpace: 'nowrap',\n  border: 0,\n};\n\nconst STATUS_TEXT = {\n  info: 'Information',\n  error: 'Error',\n  warning: 'Warning',\n  success: 'Success',\n};\n\n// Precedence matches the icon fill in styled.tsx.\nconst resolveStatusText = ({\n  info,\n  error,\n  warning,\n  success,\n}: Pick<PureLabelPlaceProps, 'info' | 'error' | 'warning' | 'success'>) => {\n  if (info) return STATUS_TEXT.info;\n  if (error) return STATUS_TEXT.error;\n  if (warning) return STATUS_TEXT.warning;\n  if (success) return STATUS_TEXT.success;\n  return '';\n};\n\nexport const PureLabelPlace: React.ComponentType<PureLabelPlaceProps> = ({\n  icon,\n  error,\n  info,\n  success,\n  warning,\n  statusText,\n  label,\n  labelId,\n  getOwnerProps,\n}) => {\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n  // Without an icon the label block renders as it always has, empty label included \u2014 removing it\n  // would take away an element consumers can already select.\n  const showLabel = !icon || Boolean(label);\n  // The status props otherwise reach assistive technology through nothing at all: the only thing\n  // they change is the fill of an icon that ds-icons renders aria-hidden.\n  const announcedStatus = resolveStatusText({ info, error, warning, success });\n  return (\n    <>\n      {announcedStatus ? <span style={srOnlyStyle}>{statusText || announcedStatus}</span> : null}\n      {icon ? (\n        <StyledBlockIcon\n          error={error}\n          info={info}\n          success={success}\n          warning={warning}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {icon}\n        </StyledBlockIcon>\n      ) : null}\n      {showLabel ? (\n        <StyledBlockLabel id={labelId} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n          {label}\n        </StyledBlockLabel>\n      ) : null}\n    </>\n  );\n};\ntype PureLabelPlaceProps = {\n  icon?: DSRibbonCardT.Props['icon'];\n  label?: DSRibbonCardT.Props['label'];\n  labelId?: string;\n  error?: DSRibbonCardT.Props['error'];\n  info?: DSRibbonCardT.Props['info'];\n  success?: DSRibbonCardT.Props['success'];\n  statusText?: DSRibbonCardT.Props['statusText'];\n  warning?: DSRibbonCardT.Props['warning'];\n  getOwnerProps: () => DSRibbonCardT.InternalProps;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0DnB;AA1DJ,mBAAkB;AAElB,oBAAkD;AAIlD,MAAM,cAAmC;AAAA,EACvC,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,QAAQ;AACV;AAEA,MAAM,cAAc;AAAA,EAClB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AACX;AAGA,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2E;AACzE,MAAI,KAAM,QAAO,YAAY;AAC7B,MAAI,MAAO,QAAO,YAAY;AAC9B,MAAI,QAAS,QAAO,YAAY;AAChC,MAAI,QAAS,QAAO,YAAY;AAChC,SAAO;AACT;AAEO,MAAM,iBAA2D,CAAC;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAG/D,QAAM,YAAY,CAAC,QAAQ,QAAQ,KAAK;AAGxC,QAAM,kBAAkB,kBAAkB,EAAE,MAAM,OAAO,SAAS,QAAQ,CAAC;AAC3E,SACE,4EACG;AAAA,sBAAkB,4CAAC,UAAK,OAAO,aAAc,wBAAc,iBAAgB,IAAU;AAAA,IACrF,OACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH,IACE;AAAA,IACH,YACC,4CAAC,kCAAiB,IAAI,SAAS,eAA8B,wBAC1D,iBACH,IACE;AAAA,KACN;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/parts/DSRibbonCard/config/useRibbonCard.js

@@ -40,7 +40,11 @@ var import_useValidateProps = require("./useValidateProps.js");
 const useRibbonCard = (propsFromUser) => {
   const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(propsFromUser, import_react_desc_prop_types.defaultProps);
   (0, import_useValidateProps.useValidateProps)(propsWithDefault, import_react_desc_prop_types.DSRibbonCardPropTypesSchema);
-  const globalProps = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
+  const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
+  const globalProps = import_react.default.useMemo(() => {
+    const { label, value, ...rest } = globalAttributes;
+    return rest;
+  }, [globalAttributes]);
   const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
   const instanceUid = import_react.default.useMemo(() => `ds-ribbon-card-${(0, import_uid.uid)(5)}`, []);
   return import_react.default.useMemo(

package/dist/cjs/parts/DSRibbonCard/config/useRibbonCard.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/DSRibbonCard/config/useRibbonCard.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { uid } from 'uid';\nimport { type DSRibbonCardT, DSRibbonCardPropTypesSchema, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const useRibbonCard = (propsFromUser: DSRibbonCardT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSRibbonCardT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSRibbonCardPropTypesSchema);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = useGetGlobalAttributes<DSRibbonCardT.InternalProps, HTMLDivElement>(propsWithDefault);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const instanceUid = React.useMemo(() => `ds-ribbon-card-${uid(5)}`, []);\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      globalProps,\n      instanceUid,\n      // ...eventHandlers,\n    }),\n    [\n      propsWithDefault,\n      xstyledProps,\n      globalProps,\n      instanceUid,\n      // eventHandlers,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAyF;AACzF,mBAAkB;AAClB,iBAAoB;AACpB,mCAA8E;AAC9E,8BAAiC;AAE1B,MAAM,gBAAgB,CAAC,kBAAuC;AAInE,QAAM,uBAAmB,sDAA0D,eAAe,yCAAY;AAC9G,gDAAiB,kBAAkB,wDAA2B;AAI9D,QAAM,kBAAc,gDAAoE,gBAAgB;AACxG,QAAM,mBAAe,4CAAmB,gBAAgB;AAMxD,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,sBAAkB,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAOtE,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { uid } from 'uid';\nimport { type DSRibbonCardT, DSRibbonCardPropTypesSchema, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const useRibbonCard = (propsFromUser: DSRibbonCardT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSRibbonCardT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSRibbonCardPropTypesSchema);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalAttributes = useGetGlobalAttributes<DSRibbonCardT.InternalProps, HTMLDivElement>(propsWithDefault);\n  // `label` and `value` are this card's own API props, rendered as text. Both are also keys in the\n  // `globalAttributes` registry the helper matches against, so it forwards them to the div, where\n  // neither is valid.\n  const globalProps = React.useMemo(() => {\n    const { label, value, ...rest } = globalAttributes;\n    return rest;\n  }, [globalAttributes]);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const instanceUid = React.useMemo(() => `ds-ribbon-card-${uid(5)}`, []);\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      globalProps,\n      instanceUid,\n      // ...eventHandlers,\n    }),\n    [\n      propsWithDefault,\n      xstyledProps,\n      globalProps,\n      instanceUid,\n      // eventHandlers,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAyF;AACzF,mBAAkB;AAClB,iBAAoB;AACpB,mCAA8E;AAC9E,8BAAiC;AAE1B,MAAM,gBAAgB,CAAC,kBAAuC;AAInE,QAAM,uBAAmB,sDAA0D,eAAe,yCAAY;AAC9G,gDAAiB,kBAAkB,wDAA2B;AAI9D,QAAM,uBAAmB,gDAAoE,gBAAgB;AAI7G,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM;AACtC,UAAM,EAAE,OAAO,OAAO,GAAG,KAAK,IAAI;AAClC,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,CAAC;AACrB,QAAM,mBAAe,4CAAmB,gBAAgB;AAMxD,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,sBAAkB,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAOtE,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,EACF;AACF;",
   "names": ["React"]
 }

package/dist/cjs/parts/DSRibbonCard/react-desc-prop-types.js

@@ -47,6 +47,7 @@ const defaultProps = {
   error: false,
   warning: false,
   success: false,
+  statusText: "",
   center: false
 };
 const DSRibbonCardPropTypes = {
@@ -63,6 +64,7 @@ const DSRibbonCardPropTypes = {
   error: import_ds_props_helpers.PropTypes.bool.description("error state toggle").defaultValue("false"),
   warning: import_ds_props_helpers.PropTypes.bool.description("warning state toggle").defaultValue("false"),
   success: import_ds_props_helpers.PropTypes.bool.description("success state toggle").defaultValue("false"),
+  statusText: import_ds_props_helpers.PropTypes.string.description("overrides the text announced to assistive technology for the active status prop").defaultValue("''"),
   center: import_ds_props_helpers.PropTypes.bool.description("align center").defaultValue("false")
 };
 const DSRibbonCardPropTypesSchema = DSRibbonCardPropTypes;

package/dist/cjs/parts/DSRibbonCard/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSRibbonCard/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSRibbonName, RIBBON_CARD_SLOTS } from './constants/index.js';\n\nexport declare namespace DSRibbonCardT {\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    icon: React.ReactElement | null;\n    label: string;\n    value: string;\n    additionalValue: string;\n    additionalLabel: string;\n    info: boolean;\n    error: boolean;\n    warning: boolean;\n    success: boolean;\n    center: boolean;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSRibbonName,\n    typeof RIBBON_CARD_SLOTS\n  > {}\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSRibbonCardT.DefaultProps = {\n  containerProps: {},\n  icon: null,\n  label: '',\n  value: '',\n  additionalValue: '',\n  additionalLabel: '',\n  info: false,\n  error: false,\n  warning: false,\n  success: false,\n  center: false,\n};\n\nexport const DSRibbonCardPropTypes: DSPropTypesSchema<DSRibbonCardT.Props> = {\n  ...getPropsPerSlotPropTypes(DSRibbonName, RIBBON_CARD_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  containerProps: PropTypes.object.description('props to inject to wrapper').defaultValue('{}'),\n  icon: PropTypes.element.description('icon for ribbon card').defaultValue('null'),\n  label: PropTypes.string.description('label for ribbon card').defaultValue(\"''\"),\n  value: PropTypes.string.description('value for ribbon').defaultValue(\"''\"),\n  additionalValue: PropTypes.string.description('additional value').defaultValue(\"''\"),\n  additionalLabel: PropTypes.string.description('additional label').defaultValue(\"''\"),\n  info: PropTypes.bool.description('for main label').defaultValue('false'),\n  error: PropTypes.bool.description('error state toggle').defaultValue('false'),\n  warning: PropTypes.bool.description('warning state toggle').defaultValue('false'),\n  success: PropTypes.bool.description('success state toggle').defaultValue('false'),\n  center: PropTypes.bool.description('align center').defaultValue('false'),\n};\n\nexport const DSRibbonCardPropTypesSchema = DSRibbonCardPropTypes as unknown as ValidationMap<DSRibbonCardT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;AAEP,uBAAgD;AAyCzC,MAAM,eAA2C;AAAA,EACtD,gBAAgB,CAAC;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAEO,MAAM,wBAAgE;AAAA,EAC3E,OAAG,kDAAyB,+BAAc,kCAAiB;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,kCAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,IAAI;AAAA,EAC5F,MAAM,kCAAU,QAAQ,YAAY,sBAAsB,EAAE,aAAa,MAAM;AAAA,EAC/E,OAAO,kCAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,IAAI;AAAA,EAC9E,OAAO,kCAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,IAAI;AAAA,EACzE,iBAAiB,kCAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,IAAI;AAAA,EACnF,iBAAiB,kCAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,IAAI;AAAA,EACnF,MAAM,kCAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,OAAO;AAAA,EACvE,OAAO,kCAAU,KAAK,YAAY,oBAAoB,EAAE,aAAa,OAAO;AAAA,EAC5E,SAAS,kCAAU,KAAK,YAAY,sBAAsB,EAAE,aAAa,OAAO;AAAA,EAChF,SAAS,kCAAU,KAAK,YAAY,sBAAsB,EAAE,aAAa,OAAO;AAAA,EAChF,QAAQ,kCAAU,KAAK,YAAY,cAAc,EAAE,aAAa,OAAO;AACzE;AAEO,MAAM,8BAA8B;",
+  "sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSRibbonName, RIBBON_CARD_SLOTS } from './constants/index.js';\n\nexport declare namespace DSRibbonCardT {\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    icon: React.ReactElement | null;\n    label: string;\n    value: string;\n    additionalValue: string;\n    additionalLabel: string;\n    info: boolean;\n    error: boolean;\n    warning: boolean;\n    success: boolean;\n    statusText: string;\n    center: boolean;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSRibbonName,\n    typeof RIBBON_CARD_SLOTS\n  > {}\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSRibbonCardT.DefaultProps = {\n  containerProps: {},\n  icon: null,\n  label: '',\n  value: '',\n  additionalValue: '',\n  additionalLabel: '',\n  info: false,\n  error: false,\n  warning: false,\n  success: false,\n  statusText: '',\n  center: false,\n};\n\nexport const DSRibbonCardPropTypes: DSPropTypesSchema<DSRibbonCardT.Props> = {\n  ...getPropsPerSlotPropTypes(DSRibbonName, RIBBON_CARD_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  containerProps: PropTypes.object.description('props to inject to wrapper').defaultValue('{}'),\n  icon: PropTypes.element.description('icon for ribbon card').defaultValue('null'),\n  label: PropTypes.string.description('label for ribbon card').defaultValue(\"''\"),\n  value: PropTypes.string.description('value for ribbon').defaultValue(\"''\"),\n  additionalValue: PropTypes.string.description('additional value').defaultValue(\"''\"),\n  additionalLabel: PropTypes.string.description('additional label').defaultValue(\"''\"),\n  info: PropTypes.bool.description('for main label').defaultValue('false'),\n  error: PropTypes.bool.description('error state toggle').defaultValue('false'),\n  warning: PropTypes.bool.description('warning state toggle').defaultValue('false'),\n  success: PropTypes.bool.description('success state toggle').defaultValue('false'),\n  statusText: PropTypes.string\n    .description('overrides the text announced to assistive technology for the active status prop')\n    .defaultValue(\"''\"),\n  center: PropTypes.bool.description('align center').defaultValue('false'),\n};\n\nexport const DSRibbonCardPropTypesSchema = DSRibbonCardPropTypes as unknown as ValidationMap<DSRibbonCardT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;AAEP,uBAAgD;AA0CzC,MAAM,eAA2C;AAAA,EACtD,gBAAgB,CAAC;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,QAAQ;AACV;AAEO,MAAM,wBAAgE;AAAA,EAC3E,OAAG,kDAAyB,+BAAc,kCAAiB;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,kCAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,IAAI;AAAA,EAC5F,MAAM,kCAAU,QAAQ,YAAY,sBAAsB,EAAE,aAAa,MAAM;AAAA,EAC/E,OAAO,kCAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,IAAI;AAAA,EAC9E,OAAO,kCAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,IAAI;AAAA,EACzE,iBAAiB,kCAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,IAAI;AAAA,EACnF,iBAAiB,kCAAU,OAAO,YAAY,kBAAkB,EAAE,aAAa,IAAI;AAAA,EACnF,MAAM,kCAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,OAAO;AAAA,EACvE,OAAO,kCAAU,KAAK,YAAY,oBAAoB,EAAE,aAAa,OAAO;AAAA,EAC5E,SAAS,kCAAU,KAAK,YAAY,sBAAsB,EAAE,aAAa,OAAO;AAAA,EAChF,SAAS,kCAAU,KAAK,YAAY,sBAAsB,EAAE,aAAa,OAAO;AAAA,EAChF,YAAY,kCAAU,OACnB,YAAY,iFAAiF,EAC7F,aAAa,IAAI;AAAA,EACpB,QAAQ,kCAAU,KAAK,YAAY,cAAc,EAAE,aAAa,OAAO;AACzE;AAEO,MAAM,8BAA8B;",
   "names": []
 }

package/dist/cjs/parts/DSRibbonCard/styled.js

@@ -48,12 +48,12 @@ const StyledBlockIcon = (0, import_ds_system.styled)("div", {
   padding-top: 0.1rem;
   svg,
   svg:not([fill]) {
-    fill: ${(props) => {
-  if (props.info) return "#1e79c2";
-  if (props.error) return "#E34256";
-  if (props.warning) return "#FBB431";
-  if (props.success) return "#32B87C";
-  return "#1e79c2";
+    fill: ${({ theme: { colors }, info, error, warning, success }) => {
+  if (info) return colors.brand[600];
+  if (error) return colors.danger[900];
+  if (warning) return colors.warning[900];
+  if (success) return colors.success[900];
+  return colors.brand[600];
 }};
   }
 

package/dist/cjs/parts/DSRibbonCard/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSRibbonCard/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSRibbonName, RIBBON_CARD_SLOTS } from './constants/index.js';\nimport { type DSRibbonCardT } from './react-desc-prop-types.js';\n\ntype StyledBlockIconProps = {\n  info?: DSRibbonCardT.Props['info'];\n  error?: DSRibbonCardT.Props['error'];\n  warning?: DSRibbonCardT.Props['warning'];\n  success?: DSRibbonCardT.Props['success'];\n};\nexport const StyledBlockIcon = styled('div', {\n  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_ICON,\n  name: DSRibbonName,\n})<StyledBlockIconProps>`\n  padding-right: 0.5rem;\n  padding-top: 0.1rem;\n  svg,\n  svg:not([fill]) {\n    fill: ${(props) => {\n      if (props.info) return '#1e79c2';\n      if (props.error) return '#E34256';\n      if (props.warning) return '#FBB431';\n      if (props.success) return '#32B87C';\n      return '#1e79c2';\n    }};\n  }\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledBlockLabel = styled('div', {\n  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_LABEL,\n  name: DSRibbonName,\n})`\n  padding: 0.25rem 0.5rem;\n  color: #697489;\n  font-size: 0.9rem;\n  line-height: 1.2rem;\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledBlockValue = styled('div', {\n  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_VALUE,\n  name: DSRibbonName,\n})`\n  flex: 2;\n  font-weight: 600;\n  padding: 0.25rem 0.5rem 0.25rem 0rem;\n  font-size: 1.1rem;\n  color: #333333;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledBlockValueLabel = styled('div', {\n  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_VALUE_LABEL,\n  name: DSRibbonName,\n})`\n  flex: 2;\n  padding: 0.25rem 0.5rem 0.25rem 0rem;\n  font-size: 0.9rem;\n  color: #697489;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n\n  ${xStyledCommonProps}\n`;\ntype StyledColProps = {\n  center?: DSRibbonCardT.Props['center'];\n};\nexport const StyledBlockCol = styled('div', {\n  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_COL,\n  name: DSRibbonName,\n})<StyledColProps>`\n  display: flex;\n  flex-direction: column;\n  flex: 2;\n  flex-wrap: nowrap;\n  align-items: ${(props) => {\n    if (props.center) return 'center';\n    return '';\n  }};\n  height: 100%;\n\n  ${xStyledCommonProps}\n`;\ntype StyledRowProps = {\n  center?: DSRibbonCardT.Props['center'];\n};\nexport const StyledBlockRow = styled('div', {\n  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_ROW,\n  name: DSRibbonName,\n})<StyledRowProps>`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  flex: 1;\n  height: 100%;\n  align-items: ${(props) => {\n    if (props.center) return 'center';\n    return '';\n  }};\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledBlock = styled('div', { slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK, name: DSRibbonName })`\n  flex: 1;\n  height: 100%;\n\n  ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAA2C;AAC3C,uBAAgD;AASzC,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EAC3C,MAAM,mCAAkB;AAAA,EACxB,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,YAKW,CAAC,UAAU;AACjB,MAAI,MAAM,KAAM,QAAO;AACvB,MAAI,MAAM,MAAO,QAAO;AACxB,MAAI,MAAM,QAAS,QAAO;AAC1B,MAAI,MAAM,QAAS,QAAO;AAC1B,SAAO;AACT,CAAC;AAAA;AAAA;AAAA,IAGD,mCAAkB;AAAA;AAGf,MAAM,uBAAmB,yBAAO,OAAO;AAAA,EAC5C,MAAM,mCAAkB;AAAA,EACxB,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMG,mCAAkB;AAAA;AAGf,MAAM,uBAAmB,yBAAO,OAAO;AAAA,EAC5C,MAAM,mCAAkB;AAAA,EACxB,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASG,mCAAkB;AAAA;AAGf,MAAM,4BAAwB,yBAAO,OAAO;AAAA,EACjD,MAAM,mCAAkB;AAAA,EACxB,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQG,mCAAkB;AAAA;AAKf,MAAM,qBAAiB,yBAAO,OAAO;AAAA,EAC1C,MAAM,mCAAkB;AAAA,EACxB,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKgB,CAAC,UAAU;AACxB,MAAI,MAAM,OAAQ,QAAO;AACzB,SAAO;AACT,CAAC;AAAA;AAAA;AAAA,IAGC,mCAAkB;AAAA;AAKf,MAAM,qBAAiB,yBAAO,OAAO;AAAA,EAC1C,MAAM,mCAAkB;AAAA,EACxB,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMgB,CAAC,UAAU;AACxB,MAAI,MAAM,OAAQ,QAAO;AACzB,SAAO;AACT,CAAC;AAAA;AAAA,IAEC,mCAAkB;AAAA;AAGf,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,mCAAkB,mBAAmB,MAAM,8BAAa,CAAC;AAAA;AAAA;AAAA;AAAA,IAItG,mCAAkB;AAAA;",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSRibbonName, RIBBON_CARD_SLOTS } from './constants/index.js';\nimport { type DSRibbonCardT } from './react-desc-prop-types.js';\n\ntype StyledBlockIconProps = {\n  info?: DSRibbonCardT.Props['info'];\n  error?: DSRibbonCardT.Props['error'];\n  warning?: DSRibbonCardT.Props['warning'];\n  success?: DSRibbonCardT.Props['success'];\n};\nexport const StyledBlockIcon = styled('div', {\n  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_ICON,\n  name: DSRibbonName,\n})<StyledBlockIconProps>`\n  padding-right: 0.5rem;\n  padding-top: 0.1rem;\n  svg,\n  svg:not([fill]) {\n    fill: ${({ theme: { colors }, info, error, warning, success }) => {\n      if (info) return colors.brand[600];\n      if (error) return colors.danger[900];\n      if (warning) return colors.warning[900];\n      if (success) return colors.success[900];\n      return colors.brand[600];\n    }};\n  }\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledBlockLabel = styled('div', {\n  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_LABEL,\n  name: DSRibbonName,\n})`\n  padding: 0.25rem 0.5rem;\n  color: #697489;\n  font-size: 0.9rem;\n  line-height: 1.2rem;\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledBlockValue = styled('div', {\n  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_VALUE,\n  name: DSRibbonName,\n})`\n  flex: 2;\n  font-weight: 600;\n  padding: 0.25rem 0.5rem 0.25rem 0rem;\n  font-size: 1.1rem;\n  color: #333333;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledBlockValueLabel = styled('div', {\n  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_VALUE_LABEL,\n  name: DSRibbonName,\n})`\n  flex: 2;\n  padding: 0.25rem 0.5rem 0.25rem 0rem;\n  font-size: 0.9rem;\n  color: #697489;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n\n  ${xStyledCommonProps}\n`;\ntype StyledColProps = {\n  center?: DSRibbonCardT.Props['center'];\n};\nexport const StyledBlockCol = styled('div', {\n  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_COL,\n  name: DSRibbonName,\n})<StyledColProps>`\n  display: flex;\n  flex-direction: column;\n  flex: 2;\n  flex-wrap: nowrap;\n  align-items: ${(props) => {\n    if (props.center) return 'center';\n    return '';\n  }};\n  height: 100%;\n\n  ${xStyledCommonProps}\n`;\ntype StyledRowProps = {\n  center?: DSRibbonCardT.Props['center'];\n};\nexport const StyledBlockRow = styled('div', {\n  slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK_ROW,\n  name: DSRibbonName,\n})<StyledRowProps>`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  flex: 1;\n  height: 100%;\n  align-items: ${(props) => {\n    if (props.center) return 'center';\n    return '';\n  }};\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledBlock = styled('div', { slot: RIBBON_CARD_SLOTS.RIBBON_CARD_BLOCK, name: DSRibbonName })`\n  flex: 1;\n  height: 100%;\n\n  ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAA2C;AAC3C,uBAAgD;AASzC,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EAC3C,MAAM,mCAAkB;AAAA,EACxB,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,YAKW,CAAC,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,OAAO,SAAS,QAAQ,MAAM;AAChE,MAAI,KAAM,QAAO,OAAO,MAAM,GAAG;AACjC,MAAI,MAAO,QAAO,OAAO,OAAO,GAAG;AACnC,MAAI,QAAS,QAAO,OAAO,QAAQ,GAAG;AACtC,MAAI,QAAS,QAAO,OAAO,QAAQ,GAAG;AACtC,SAAO,OAAO,MAAM,GAAG;AACzB,CAAC;AAAA;AAAA;AAAA,IAGD,mCAAkB;AAAA;AAGf,MAAM,uBAAmB,yBAAO,OAAO;AAAA,EAC5C,MAAM,mCAAkB;AAAA,EACxB,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMG,mCAAkB;AAAA;AAGf,MAAM,uBAAmB,yBAAO,OAAO;AAAA,EAC5C,MAAM,mCAAkB;AAAA,EACxB,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASG,mCAAkB;AAAA;AAGf,MAAM,4BAAwB,yBAAO,OAAO;AAAA,EACjD,MAAM,mCAAkB;AAAA,EACxB,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQG,mCAAkB;AAAA;AAKf,MAAM,qBAAiB,yBAAO,OAAO;AAAA,EAC1C,MAAM,mCAAkB;AAAA,EACxB,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKgB,CAAC,UAAU;AACxB,MAAI,MAAM,OAAQ,QAAO;AACzB,SAAO;AACT,CAAC;AAAA;AAAA;AAAA,IAGC,mCAAkB;AAAA;AAKf,MAAM,qBAAiB,yBAAO,OAAO;AAAA,EAC1C,MAAM,mCAAkB;AAAA,EACxB,MAAM;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMgB,CAAC,UAAU;AACxB,MAAI,MAAM,OAAQ,QAAO;AACzB,SAAO;AACT,CAAC;AAAA;AAAA,IAEC,mCAAkB;AAAA;AAGf,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,mCAAkB,mBAAmB,MAAM,8BAAa,CAAC;AAAA;AAAA;AAAA;AAAA,IAItG,mCAAkB;AAAA;",
   "names": []
 }

package/dist/cjs/parts/DSRibbonRow/DSRibbonRow.js

@@ -40,6 +40,13 @@ var import_react = __toESM(require("react"));
 var import_useRibbonRow = require("./config/useRibbonRow.js");
 var import_constants = require("./constants/index.js");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
+const wrapColumnsStyles = import_ds_system.css`
+  flex-wrap: wrap;
+`;
+const scrollColumnsStyles = import_ds_system.css`
+  flex-wrap: nowrap;
+  overflow-x: auto;
+`;
 const StyledFlexRow = (0, import_ds_system.styled)("div", {
   name: import_constants.DSRibbonName,
   slot: import_constants.RIBBON_ROW_SLOTS.RIBBON_ROW
@@ -53,8 +60,7 @@ const StyledFlexRow = (0, import_ds_system.styled)("div", {
     height: 5rem;
     overflow-y: hidden;
   }
-  flex-wrap: nowrap;
-  overflow-x: auto;
+  ${({ $wrapColumns }) => $wrapColumns ? wrapColumnsStyles : scrollColumnsStyles};
   ${(props) => {
   if (props.$alignLeft) {
     return `
@@ -89,7 +95,7 @@ const StyledFlexRow = (0, import_ds_system.styled)("div", {
 `;
 const DSRibbonRow = (props) => {
   const { propsWithDefault, xstyledProps, globalProps } = (0, import_useRibbonRow.useRibbonRow)(props);
-  const { children, solid, alignLeft } = propsWithDefault;
+  const { children, solid, alignLeft, wrapColumns } = propsWithDefault;
   const getOwnerProps = import_react.default.useCallback(() => propsWithDefault, [propsWithDefault]);
   const getOwnerPropsArguments = import_react.default.useCallback(() => ({}), []);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -99,6 +105,7 @@ const DSRibbonRow = (props) => {
       ...xstyledProps,
       $alignLeft: alignLeft,
       $solid: solid,
+      $wrapColumns: wrapColumns,
       getOwnerProps,
       getOwnerPropsArguments,
       children

package/dist/cjs/parts/DSRibbonRow/DSRibbonRow.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSRibbonRow/DSRibbonRow.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { describe } from '@elliemae/ds-props-helpers';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport React from 'react';\nimport { useRibbonRow } from './config/useRibbonRow.js';\nimport { DSRibbonName, RIBBON_ROW_SLOTS } from './constants/index.js';\nimport { type DSRibbonRowT, DSRibbonRowPropTypesSchema } from './react-desc-prop-types.js';\n\ntype StyledFlexRowProps = {\n  $alignLeft: DSRibbonRowT.Props['alignLeft'];\n  $solid: DSRibbonRowT.Props['solid'];\n};\nconst StyledFlexRow = styled('div', {\n  name: DSRibbonName,\n  slot: RIBBON_ROW_SLOTS.RIBBON_ROW,\n})<StyledFlexRowProps>`\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: 4rem;\n  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n    height: 5rem;\n    overflow-y: hidden;\n  }\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  ${(props) => {\n    if (props.$alignLeft) {\n      return `\n      align-items: stretch;\n      & > .DSRibbon-ribbon-col {\n        align-items: flex-start;\n        align-self: stretch;    \n        flex: 0;\n        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n          flex: 1;\n        }\n      `;\n    }\n    return `\n        align-items: center;\n    `;\n  }};\n  ${(props) => {\n    if (props.$solid) {\n      return `\n      & > .DSRibbon-ribbon-col {\n        &:after{\n          top: 0%;\n          height: 100%;\n          border-right: solid 1px #CBCFD7;\n        }\n      `;\n    }\n    return '';\n  }};\n  ${xStyledCommonProps}\n`;\n\nconst DSRibbonRow: React.ComponentType<DSRibbonRowT.Props> = (props) => {\n  const { propsWithDefault, xstyledProps, globalProps } = useRibbonRow(props);\n  const { children, solid, alignLeft } = propsWithDefault;\n  const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n  return (\n    <StyledFlexRow\n      {...globalProps}\n      {...xstyledProps}\n      $alignLeft={alignLeft}\n      $solid={solid}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {children}\n    </StyledFlexRow>\n  );\n};\n\nDSRibbonRow.displayName = 'DSRibbonRow';\nconst DSRibbonRowWithSchema = describe(DSRibbonRow);\nDSRibbonRowWithSchema.propTypes = DSRibbonRowPropTypesSchema;\n\nexport { DSRibbonRow, DSRibbonRowWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkEnB;AAlEJ,8BAAyB;AACzB,uBAA2C;AAC3C,mBAAkB;AAClB,0BAA6B;AAC7B,uBAA+C;AAC/C,mCAA8D;AAM9D,MAAM,oBAAgB,yBAAO,OAAO;AAAA,EAClC,MAAM;AAAA,EACN,MAAM,kCAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYG,CAAC,UAAU;AACX,MAAI,MAAM,YAAY;AACpB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUT;AACA,SAAO;AAAA;AAAA;AAGT,CAAC;AAAA,IACC,CAAC,UAAU;AACX,MAAI,MAAM,QAAQ;AAChB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQT;AACA,SAAO;AACT,CAAC;AAAA,IACC,mCAAkB;AAAA;AAGtB,MAAM,cAAuD,CAAC,UAAU;AACtE,QAAM,EAAE,kBAAkB,cAAc,YAAY,QAAI,kCAAa,KAAK;AAC1E,QAAM,EAAE,UAAU,OAAO,UAAU,IAAI;AACvC,QAAM,gBAAgB,aAAAA,QAAM,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAClF,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,4BAAwB,kCAAS,WAAW;AAClD,sBAAsB,YAAY;",
+  "sourcesContent": ["import { describe } from '@elliemae/ds-props-helpers';\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport React from 'react';\nimport { useRibbonRow } from './config/useRibbonRow.js';\nimport { DSRibbonName, RIBBON_ROW_SLOTS } from './constants/index.js';\nimport { type DSRibbonRowT, DSRibbonRowPropTypesSchema } from './react-desc-prop-types.js';\n\nconst wrapColumnsStyles = css`\n  flex-wrap: wrap;\n`;\nconst scrollColumnsStyles = css`\n  flex-wrap: nowrap;\n  overflow-x: auto;\n`;\n\ntype StyledFlexRowProps = {\n  $alignLeft: DSRibbonRowT.Props['alignLeft'];\n  $solid: DSRibbonRowT.Props['solid'];\n  $wrapColumns: DSRibbonRowT.Props['wrapColumns'];\n};\nconst StyledFlexRow = styled('div', {\n  name: DSRibbonName,\n  slot: RIBBON_ROW_SLOTS.RIBBON_ROW,\n})<StyledFlexRowProps>`\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: 4rem;\n  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n    height: 5rem;\n    overflow-y: hidden;\n  }\n  ${({ $wrapColumns }) => ($wrapColumns ? wrapColumnsStyles : scrollColumnsStyles)};\n  ${(props) => {\n    if (props.$alignLeft) {\n      return `\n      align-items: stretch;\n      & > .DSRibbon-ribbon-col {\n        align-items: flex-start;\n        align-self: stretch;    \n        flex: 0;\n        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n          flex: 1;\n        }\n      `;\n    }\n    return `\n        align-items: center;\n    `;\n  }};\n  ${(props) => {\n    if (props.$solid) {\n      return `\n      & > .DSRibbon-ribbon-col {\n        &:after{\n          top: 0%;\n          height: 100%;\n          border-right: solid 1px #CBCFD7;\n        }\n      `;\n    }\n    return '';\n  }};\n  ${xStyledCommonProps}\n`;\n\nconst DSRibbonRow: React.ComponentType<DSRibbonRowT.Props> = (props) => {\n  const { propsWithDefault, xstyledProps, globalProps } = useRibbonRow(props);\n  const { children, solid, alignLeft, wrapColumns } = propsWithDefault;\n  const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n  return (\n    <StyledFlexRow\n      {...globalProps}\n      {...xstyledProps}\n      $alignLeft={alignLeft}\n      $solid={solid}\n      $wrapColumns={wrapColumns}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {children}\n    </StyledFlexRow>\n  );\n};\n\nDSRibbonRow.displayName = 'DSRibbonRow';\nconst DSRibbonRowWithSchema = describe(DSRibbonRow);\nDSRibbonRowWithSchema.propTypes = DSRibbonRowPropTypesSchema;\n\nexport { DSRibbonRow, DSRibbonRowWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0EnB;AA1EJ,8BAAyB;AACzB,uBAAgD;AAChD,mBAAkB;AAClB,0BAA6B;AAC7B,uBAA+C;AAC/C,mCAA8D;AAE9D,MAAM,oBAAoB;AAAA;AAAA;AAG1B,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAU5B,MAAM,oBAAgB,yBAAO,OAAO;AAAA,EAClC,MAAM;AAAA,EACN,MAAM,kCAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUG,CAAC,EAAE,aAAa,MAAO,eAAe,oBAAoB,mBAAoB;AAAA,IAC9E,CAAC,UAAU;AACX,MAAI,MAAM,YAAY;AACpB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUT;AACA,SAAO;AAAA;AAAA;AAGT,CAAC;AAAA,IACC,CAAC,UAAU;AACX,MAAI,MAAM,QAAQ;AAChB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQT;AACA,SAAO;AACT,CAAC;AAAA,IACC,mCAAkB;AAAA;AAGtB,MAAM,cAAuD,CAAC,UAAU;AACtE,QAAM,EAAE,kBAAkB,cAAc,YAAY,QAAI,kCAAa,KAAK;AAC1E,QAAM,EAAE,UAAU,OAAO,WAAW,YAAY,IAAI;AACpD,QAAM,gBAAgB,aAAAA,QAAM,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAClF,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,4BAAwB,kCAAS,WAAW;AAClD,sBAAsB,YAAY;",
   "names": ["React"]
 }

package/dist/cjs/parts/DSRibbonRow/react-desc-prop-types.js

@@ -38,7 +38,8 @@ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_constants = require("./constants/index.js");
 const defaultProps = {
   alignLeft: false,
-  solid: false
+  solid: false,
+  wrapColumns: false
 };
 const DSRibbonRowPropTypes = {
   ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSRibbonName, import_constants.RIBBON_ROW_SLOTS),
@@ -47,7 +48,10 @@ const DSRibbonRowPropTypes = {
   alignLeft: import_ds_props_helpers.PropTypes.bool.description(
     "If true, the content will be aligned to the left and the row will stretch to fill the height of the tallest column."
   ),
-  solid: import_ds_props_helpers.PropTypes.bool.description("If true, the dashed border between columns will be solid.")
+  solid: import_ds_props_helpers.PropTypes.bool.description("If true, the dashed border between columns will be solid."),
+  wrapColumns: import_ds_props_helpers.PropTypes.bool.description(
+    "If true, the columns wrap onto the next line instead of scrolling horizontally when they no longer fit."
+  ).defaultValue("false")
 };
 const DSRibbonRowPropTypesSchema = DSRibbonRowPropTypes;
 //# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/parts/DSRibbonRow/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSRibbonRow/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSRibbonName, RIBBON_ROW_SLOTS } from './constants/index.js';\n\nexport declare namespace DSRibbonRowT {\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    alignLeft: boolean;\n    solid: boolean;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSRibbonName,\n    typeof RIBBON_ROW_SLOTS\n  > {}\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSRibbonRowT.DefaultProps = {\n  alignLeft: false,\n  solid: false,\n};\n\nexport const DSRibbonRowPropTypes: DSPropTypesSchema<DSRibbonRowT.Props> = {\n  ...getPropsPerSlotPropTypes(DSRibbonName, RIBBON_ROW_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  alignLeft: PropTypes.bool.description(\n    'If true, the content will be aligned to the left and the row will stretch to fill the height of the tallest column.',\n  ),\n  solid: PropTypes.bool.description('If true, the dashed border between columns will be solid.'),\n};\n\nexport const DSRibbonRowPropTypesSchema = DSRibbonRowPropTypes as unknown as ValidationMap<DSRibbonRowT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;AAEP,uBAA+C;AA+BxC,MAAM,eAA0C;AAAA,EACrD,WAAW;AAAA,EACX,OAAO;AACT;AAEO,MAAM,uBAA8D;AAAA,EACzE,OAAG,kDAAyB,+BAAc,iCAAgB;AAAA,EAC1D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,WAAW,kCAAU,KAAK;AAAA,IACxB;AAAA,EACF;AAAA,EACA,OAAO,kCAAU,KAAK,YAAY,2DAA2D;AAC/F;AAEO,MAAM,6BAA6B;",
+  "sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSRibbonName, RIBBON_ROW_SLOTS } from './constants/index.js';\n\nexport declare namespace DSRibbonRowT {\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    alignLeft: boolean;\n    solid: boolean;\n    wrapColumns: boolean;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSRibbonName,\n    typeof RIBBON_ROW_SLOTS\n  > {}\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSRibbonRowT.DefaultProps = {\n  alignLeft: false,\n  solid: false,\n  wrapColumns: false,\n};\n\nexport const DSRibbonRowPropTypes: DSPropTypesSchema<DSRibbonRowT.Props> = {\n  ...getPropsPerSlotPropTypes(DSRibbonName, RIBBON_ROW_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  alignLeft: PropTypes.bool.description(\n    'If true, the content will be aligned to the left and the row will stretch to fill the height of the tallest column.',\n  ),\n  solid: PropTypes.bool.description('If true, the dashed border between columns will be solid.'),\n  wrapColumns: PropTypes.bool\n    .description(\n      'If true, the columns wrap onto the next line instead of scrolling horizontally when they no longer fit.',\n    )\n    .defaultValue('false'),\n};\n\nexport const DSRibbonRowPropTypesSchema = DSRibbonRowPropTypes as unknown as ValidationMap<DSRibbonRowT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;AAEP,uBAA+C;AAgCxC,MAAM,eAA0C;AAAA,EACrD,WAAW;AAAA,EACX,OAAO;AAAA,EACP,aAAa;AACf;AAEO,MAAM,uBAA8D;AAAA,EACzE,OAAG,kDAAyB,+BAAc,iCAAgB;AAAA,EAC1D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,WAAW,kCAAU,KAAK;AAAA,IACxB;AAAA,EACF;AAAA,EACA,OAAO,kCAAU,KAAK,YAAY,2DAA2D;AAAA,EAC7F,aAAa,kCAAU,KACpB;AAAA,IACC;AAAA,EACF,EACC,aAAa,OAAO;AACzB;AAEO,MAAM,6BAA6B;",
   "names": []
 }

package/dist/esm/parts/DSRibbonCard/DSRibbonCard.js

@@ -10,8 +10,9 @@ import { StyledBlock, StyledBlockRow, StyledBlockValue } from "./styled.js";
 import { DSRibbonCardWithAdditionalLabel } from "./DSRibbonCardWithAdditionalLabel.js";
 const DSRibbonCard = (props) => {
   const ribbonCardConfig = useRibbonCard(props);
-  const { propsWithDefault, xstyledProps, globalProps } = ribbonCardConfig;
-  const { containerProps, value, additionalValue, additionalLabel, center } = propsWithDefault;
+  const { propsWithDefault, xstyledProps, globalProps, instanceUid } = ribbonCardConfig;
+  const { containerProps, value, additionalValue, additionalLabel, center, label } = propsWithDefault;
+  const labelId = `${instanceUid}-label`;
   const getOwnerProps = React2.useCallback(() => propsWithDefault, [propsWithDefault]);
   const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
   if (additionalValue)
@@ -27,8 +28,16 @@ const DSRibbonCard = (props) => {
       getOwnerProps,
       getOwnerPropsArguments,
       children: /* @__PURE__ */ jsxs(StyledBlockRow, { center, getOwnerProps, getOwnerPropsArguments, children: [
-        /* @__PURE__ */ jsx(PureLabelPlace, { ...propsWithDefault, getOwnerProps }),
-        /* @__PURE__ */ jsx(StyledBlockValue, { getOwnerProps, getOwnerPropsArguments, children: value })
+        /* @__PURE__ */ jsx(PureLabelPlace, { ...propsWithDefault, labelId, getOwnerProps }),
+        /* @__PURE__ */ jsx(
+          StyledBlockValue,
+          {
+            "aria-labelledby": label ? labelId : void 0,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: value
+          }
+        )
       ] })
     }
   );