@dnb/eufemia 10.20.0 → 10.22.0

package/components/textarea/Textarea.d.ts

@@ -60,7 +60,7 @@ export interface TextareaProps
   status_props?: FormStatusProps;
   status_no_animation?: boolean;
   /**
-   * The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   * The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).
    */
   globalStatus?: GlobalStatusConfigObject;
   /**
@@ -68,7 +68,7 @@ export interface TextareaProps
    */
   suffix?: TextareaSuffix;
   /**
-   * The placeholder which shows up once the Textarea value is empty
+   * The placeholder which shows up once the Textarea value is empty.
    */
   placeholder?: string;
   /**
@@ -89,7 +89,7 @@ export interface TextareaProps
    */
   autoresize?: boolean;
   /**
-   * Use a number to define the displayed max length. You can also use an object defining the <a href="uilib/components/fragments/text-counter/">TextCounter</a> `variant` or properties. Please avoid using `maxLength` for accessibility reasons.
+   * Use a number to define the displayed max length. You can also use an object defining the [TextCounter](uilib/components/fragments/text-counter/) `variant` or properties. Please avoid using `maxLength` for accessibility reasons.
    */
   characterCounter?: Omit<TextCounterProps, 'text'> | number;
   /**
@@ -97,19 +97,13 @@ export interface TextareaProps
    */
   autoresize_max_rows?: TextareaAutoresizeMaxRows;
   class?: string;
-  /**
-   * In case we have to set a custom Textarea class.
-   */
   textarea_class?: string;
-  /**
-   * Provide the Textarea element with any attributes by using an Object `textarea_attributes={{size:&#39;2&#39;}}` or a JSON Object `textarea_attributes=&#39;{"size":"2"}&#39;`. "NB:" Keep in mind, that also every not listed component property will be sent along and set as a Textarea element attribute.
-   */
   textarea_attributes?: TextareaTextareaAttributes;
   readOnly?: boolean;
   rows?: TextareaRows;
   cols?: TextareaCols;
   /**
-   * By providing a React.ref we can get the internally used Textarea element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.
+   * By providing a React.Ref we can get the internally used Textarea element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.
    */
   inner_ref?: React.Ref;
   className?: string;

package/components/textarea/TextareaDocs.d.ts

@@ -0,0 +1,2 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const textareaProperties: PropertiesTableProps;

package/components/textarea/TextareaDocs.js

@@ -0,0 +1,98 @@
+export const textareaProperties = {
+  value: {
+    doc: 'The content value of the Textarea.',
+    type: 'string',
+    status: 'optional'
+  },
+  align: {
+    doc: 'Defines the `text-align` of the Textarea. Defaults to `left`.',
+    type: 'string',
+    status: 'optional'
+  },
+  stretch: {
+    doc: 'If set to `true`, then the Textarea field will be 100% in `width`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  placeholder: {
+    doc: 'The placeholder which shows up once the Textarea value is empty.',
+    type: 'string',
+    status: 'optional'
+  },
+  label: {
+    doc: 'Prepends the Form Label component. If no ID is provided, a random ID is created.',
+    type: 'string',
+    status: 'optional'
+  },
+  label_direction: {
+    doc: 'Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`.',
+    type: 'string',
+    status: 'optional'
+  },
+  suffix: {
+    doc: 'Text describing the content of the Textarea more than the label. You can also send in a React component, so it gets wrapped inside the Textarea component.',
+    type: 'string',
+    status: 'optional'
+  },
+  label_sr_only: {
+    doc: 'Use `true` to make the label only readable by screen readers.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  autoresize: {
+    doc: 'Use `true` to make the Textarea grow and shrink depending on how many lines the user has filled.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  autoresize_max_rows: {
+    doc: 'Set a number to define how many rows the Textarea can auto grow.',
+    type: 'number',
+    status: 'optional'
+  },
+  characterCounter: {
+    doc: 'Use a number to define the displayed max length. You can also use an object defining the [TextCounter](uilib/components/fragments/text-counter/) `variant` or properties. Please avoid using `maxLength` for accessibility reasons.',
+    type: ['number', 'object'],
+    status: 'optional'
+  },
+  status: {
+    doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',
+    type: ['string', 'boolean'],
+    status: 'optional'
+  },
+  status_state: {
+    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',
+    type: 'string',
+    status: 'optional'
+  },
+  status_props: {
+    doc: 'Use an object to define additional FormStatus properties.',
+    type: 'object',
+    status: 'optional'
+  },
+  globalStatus: {
+    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',
+    type: 'object',
+    status: 'optional'
+  },
+  textarea_state: {
+    doc: 'To control the visual focus state as a prop, like `focus` or `blur`.',
+    type: 'string',
+    status: 'optional'
+  },
+  inner_ref: {
+    doc: 'By providing a React.Ref we can get the internally used Textarea element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.',
+    type: 'React.Ref',
+    status: 'optional'
+  },
+  skeleton: {
+    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=TextareaDocs.js.map

package/components/textarea/TextareaDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaDocs.js","names":["textareaProperties","value","doc","type","status","align","stretch","placeholder","label","label_direction","suffix","label_sr_only","autoresize","autoresize_max_rows","characterCounter","status_state","status_props","globalStatus","textarea_state","inner_ref","skeleton"],"sources":["../../../../src/components/textarea/TextareaDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const textareaProperties: PropertiesTableProps = {\n  value: {\n    doc: 'The content value of the Textarea.',\n    type: 'string',\n    status: 'optional',\n  },\n  align: {\n    doc: 'Defines the `text-align` of the Textarea. Defaults to `left`.',\n    type: 'string',\n    status: 'optional',\n  },\n  stretch: {\n    doc: 'If set to `true`, then the Textarea field will be 100% in `width`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  placeholder: {\n    doc: 'The placeholder which shows up once the Textarea value is empty.',\n    type: 'string',\n    status: 'optional',\n  },\n  label: {\n    doc: 'Prepends the Form Label component. If no ID is provided, a random ID is created.',\n    type: 'string',\n    status: 'optional',\n  },\n  label_direction: {\n    doc: 'Use `label_direction=\"vertical\"` to change the label layout direction. Defaults to `horizontal`.',\n    type: 'string',\n    status: 'optional',\n  },\n  suffix: {\n    doc: 'Text describing the content of the Textarea more than the label. You can also send in a React component, so it gets wrapped inside the Textarea component.',\n    type: 'string',\n    status: 'optional',\n  },\n  label_sr_only: {\n    doc: 'Use `true` to make the label only readable by screen readers.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  autoresize: {\n    doc: 'Use `true` to make the Textarea grow and shrink depending on how many lines the user has filled.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  autoresize_max_rows: {\n    doc: 'Set a number to define how many rows the Textarea can auto grow.',\n    type: 'number',\n    status: 'optional',\n  },\n  characterCounter: {\n    doc: 'Use a number to define the displayed max length. You can also use an object defining the [TextCounter](uilib/components/fragments/text-counter/) `variant` or properties. Please avoid using `maxLength` for accessibility reasons.',\n    type: ['number', 'object'],\n    status: 'optional',\n  },\n  status: {\n    doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',\n    type: ['string', 'boolean'],\n    status: 'optional',\n  },\n  status_state: {\n    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',\n    type: 'string',\n    status: 'optional',\n  },\n  status_props: {\n    doc: 'Use an object to define additional FormStatus properties.',\n    type: 'object',\n    status: 'optional',\n  },\n  globalStatus: {\n    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',\n    type: 'object',\n    status: 'optional',\n  },\n  textarea_state: {\n    doc: 'To control the visual focus state as a prop, like `focus` or `blur`.',\n    type: 'string',\n    status: 'optional',\n  },\n  inner_ref: {\n    doc: 'By providing a React.Ref we can get the internally used Textarea element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.',\n    type: 'React.Ref',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,kBAAwC,GAAG;EACtDC,KAAK,EAAE;IACLC,GAAG,EAAE,oCAAoC;IACzCC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,OAAO,EAAE;IACPJ,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDG,WAAW,EAAE;IACXL,GAAG,EAAE,kEAAkE;IACvEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,KAAK,EAAE;IACLN,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,eAAe,EAAE;IACfP,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,MAAM,EAAE;IACNR,GAAG,EAAE,4JAA4J;IACjKC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,aAAa,EAAE;IACbT,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDQ,UAAU,EAAE;IACVV,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDS,mBAAmB,EAAE;IACnBX,GAAG,EAAE,kEAAkE;IACvEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDU,gBAAgB,EAAE;IAChBZ,GAAG,EAAE,qOAAqO;IAC1OC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDA,MAAM,EAAE;IACNF,GAAG,EAAE,yIAAyI;IAC9IC,IAAI,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC3BC,MAAM,EAAE;EACV,CAAC;EACDW,YAAY,EAAE;IACZb,GAAG,EAAE,0GAA0G;IAC/GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDY,YAAY,EAAE;IACZd,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDa,YAAY,EAAE;IACZf,GAAG,EAAE,4JAA4J;IACjKC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDc,cAAc,EAAE;IACdhB,GAAG,EAAE,sEAAsE;IAC3EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDe,SAAS,EAAE;IACTjB,GAAG,EAAE,4JAA4J;IACjKC,IAAI,EAAE,WAAW;IACjBC,MAAM,EAAE;EACV,CAAC;EACDgB,QAAQ,EAAE;IACRlB,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC"}

package/components/textarea/style/dnb-textarea.css

@@ -50,6 +50,7 @@
 .dnb-textarea__textarea {
   position: relative;
   z-index: 2;
+  width: 100%;
   cursor: auto;
   border: none;
   margin: 0;

package/components/textarea/style/dnb-textarea.min.css

@@ -1 +1 @@
-.dnb-textarea{--textarea-padding-width:0.5rem;--textarea-rows:2;--textarea-background-color:var(--color-white);display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-textarea__inner{display:inline-flex;flex-direction:column;margin:0 var(--textarea-padding-width)}.dnb-textarea__shell{display:inline-flex;font-size:var(--font-size-basis);position:relative}.dnb-textarea__state{--border-color:var(--textarea-border-color);--border-width:var(--textarea-border-width);background-color:var(--color-white);border-color:transparent;border-radius:.25rem;bottom:-.5rem;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);left:-.5rem;position:absolute;right:-.5rem;top:-.5rem;z-index:1}.dnb-textarea__row{display:inline-flex;margin:var(--textarea-padding-width) 0}.dnb-textarea__suffix.dnb-suffix{padding-left:1rem}.dnb-textarea .dnb-text-counter{margin-left:-.5rem}.dnb-textarea__textarea{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;border:none;cursor:auto;font-size:var(--font-size-basis);line-height:var(--line-height-basis);margin:0;outline:none;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--textarea-padding-width);position:relative;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent;z-index:2}html:not([data-visual-test]) .dnb-textarea__textarea{scroll-behavior:smooth}@supports not (scrollbar-color:auto){.dnb-textarea__textarea::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}@-moz-document url-prefix(){.dnb-textarea__textarea{overflow-x:clip}}.dnb-textarea__input:-webkit-autofill{box-shadow:0 0 0 var(--border-width) var(--border-color),0 0 0 10em var(--textarea-background-color) inset}.dnb-textarea__input:autofill{box-shadow:0 0 0 var(--border-width) var(--border-color),0 0 0 10em var(--textarea-background-color) inset}.dnb-textarea__placeholder{-webkit-box-orient:vertical;-webkit-line-clamp:var(--textarea-rows,2);border:none;cursor:auto;display:-webkit-box;font-size:var(--font-size-basis);height:100%;left:0;line-height:var(--line-height-basis);margin:0;outline:none;overflow:hidden;padding:0 var(--textarea-padding-width);pointer-events:none;position:absolute;top:0;width:100%;z-index:3}.dnb-textarea__placeholder,.dnb-textarea__textarea{text-align:left}.dnb-textarea__align--right .dnb-textarea__placeholder,.dnb-textarea__align--right .dnb-textarea__textarea{text-align:right}.dnb-textarea__autoresize .dnb-textarea__textarea{resize:none}.dnb-textarea--disabled .dnb-textarea__textarea,.dnb-textarea__textarea[disabled]{-webkit-user-select:none;user-select:none}.dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar,.dnb-textarea__textarea[disabled]::-webkit-scrollbar{width:0}.dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly])~.dnb-textarea__placeholder,.dnb-textarea--has-content .dnb-textarea__textarea~.dnb-textarea__placeholder{display:none}.dnb-textarea__inner>.dnb-form-status{margin:.5rem 0 0 calc(0px - var(--textarea-padding-width));order:2}.dnb-textarea:not(.dnb-textarea--vertical) .dnb-form-label{margin-top:.5rem}.dnb-textarea--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]{align-items:flex-start}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}@media screen and (max-width:40em){.dnb-textarea{flex-wrap:wrap}.dnb-textarea>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-textarea--stretch{display:flex;flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner{flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner,.dnb-textarea--stretch .dnb-textarea__shell,.dnb-textarea--stretch .dnb-textarea__textarea{width:100%}.dnb-textarea--stretch .dnb-form-label+.dnb-textarea__inner{width:auto}.dnb-form-row--horizontal .dnb-textarea--stretch,.dnb-textarea--vertical.dnb-textarea--stretch .dnb-textarea__inner{width:100%}@media screen and (max-width:40em){.dnb-responsive-component .dnb-textarea{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-textarea>.dnb-form-label{margin-bottom:.5rem}}html[data-visual-test] .dnb-textarea__textarea{caret-color:var(--color-white)}.dnb-textarea.dnb-skeleton .dnb-textarea__inner{border-radius:.25rem;margin:0}.dnb-textarea.dnb-skeleton .dnb-textarea__inner .dnb-textarea__shell{margin:var(--textarea-padding-width)}.dnb-textarea.dnb-skeleton .dnb-textarea__state,.dnb-textarea.dnb-skeleton .dnb-textarea__textarea{visibility:hidden}
+.dnb-textarea{--textarea-padding-width:0.5rem;--textarea-rows:2;--textarea-background-color:var(--color-white);display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-textarea__inner{display:inline-flex;flex-direction:column;margin:0 var(--textarea-padding-width)}.dnb-textarea__shell{display:inline-flex;font-size:var(--font-size-basis);position:relative}.dnb-textarea__state{--border-color:var(--textarea-border-color);--border-width:var(--textarea-border-width);background-color:var(--color-white);border-color:transparent;border-radius:.25rem;bottom:-.5rem;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);left:-.5rem;position:absolute;right:-.5rem;top:-.5rem;z-index:1}.dnb-textarea__row{display:inline-flex;margin:var(--textarea-padding-width) 0}.dnb-textarea__suffix.dnb-suffix{padding-left:1rem}.dnb-textarea .dnb-text-counter{margin-left:-.5rem}.dnb-textarea__textarea{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;border:none;cursor:auto;font-size:var(--font-size-basis);line-height:var(--line-height-basis);margin:0;outline:none;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--textarea-padding-width);position:relative;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent;width:100%;z-index:2}html:not([data-visual-test]) .dnb-textarea__textarea{scroll-behavior:smooth}@supports not (scrollbar-color:auto){.dnb-textarea__textarea::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-textarea__textarea::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}@-moz-document url-prefix(){.dnb-textarea__textarea{overflow-x:clip}}.dnb-textarea__input:-webkit-autofill{box-shadow:0 0 0 var(--border-width) var(--border-color),0 0 0 10em var(--textarea-background-color) inset}.dnb-textarea__input:autofill{box-shadow:0 0 0 var(--border-width) var(--border-color),0 0 0 10em var(--textarea-background-color) inset}.dnb-textarea__placeholder{-webkit-box-orient:vertical;-webkit-line-clamp:var(--textarea-rows,2);border:none;cursor:auto;display:-webkit-box;font-size:var(--font-size-basis);height:100%;left:0;line-height:var(--line-height-basis);margin:0;outline:none;overflow:hidden;padding:0 var(--textarea-padding-width);pointer-events:none;position:absolute;top:0;width:100%;z-index:3}.dnb-textarea__placeholder,.dnb-textarea__textarea{text-align:left}.dnb-textarea__align--right .dnb-textarea__placeholder,.dnb-textarea__align--right .dnb-textarea__textarea{text-align:right}.dnb-textarea__autoresize .dnb-textarea__textarea{resize:none}.dnb-textarea--disabled .dnb-textarea__textarea,.dnb-textarea__textarea[disabled]{-webkit-user-select:none;user-select:none}.dnb-textarea--disabled .dnb-textarea__textarea::-webkit-scrollbar,.dnb-textarea__textarea[disabled]::-webkit-scrollbar{width:0}.dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly])~.dnb-textarea__placeholder,.dnb-textarea--has-content .dnb-textarea__textarea~.dnb-textarea__placeholder{display:none}.dnb-textarea__inner>.dnb-form-status{margin:.5rem 0 0 calc(0px - var(--textarea-padding-width));order:2}.dnb-textarea:not(.dnb-textarea--vertical) .dnb-form-label{margin-top:.5rem}.dnb-textarea--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]{align-items:flex-start}.dnb-textarea:not(.dnb-textarea--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}@media screen and (max-width:40em){.dnb-textarea{flex-wrap:wrap}.dnb-textarea>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-textarea--stretch{display:flex;flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner{flex-grow:1}.dnb-textarea--stretch .dnb-textarea__inner,.dnb-textarea--stretch .dnb-textarea__shell,.dnb-textarea--stretch .dnb-textarea__textarea{width:100%}.dnb-textarea--stretch .dnb-form-label+.dnb-textarea__inner{width:auto}.dnb-form-row--horizontal .dnb-textarea--stretch,.dnb-textarea--vertical.dnb-textarea--stretch .dnb-textarea__inner{width:100%}@media screen and (max-width:40em){.dnb-responsive-component .dnb-textarea{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-textarea>.dnb-form-label{margin-bottom:.5rem}}html[data-visual-test] .dnb-textarea__textarea{caret-color:var(--color-white)}.dnb-textarea.dnb-skeleton .dnb-textarea__inner{border-radius:.25rem;margin:0}.dnb-textarea.dnb-skeleton .dnb-textarea__inner .dnb-textarea__shell{margin:var(--textarea-padding-width)}.dnb-textarea.dnb-skeleton .dnb-textarea__state,.dnb-textarea.dnb-skeleton .dnb-textarea__textarea{visibility:hidden}

package/components/textarea/style/dnb-textarea.scss

@@ -78,6 +78,9 @@
     position: relative;
     z-index: 2;
 
+    // To prevent textarea element from going outside of boundaries on smaller screens
+    width: 100%;
+
     @include textareaStyleCommon();
 
     @include scrollY(auto);

package/components/upload/UploadInfo.js

@@ -28,7 +28,7 @@ const UploadInfo = () => {
   }, text), React.createElement(Dl, {
     top: "small",
     bottom: 0,
-    direction: "horizontal",
+    layout: "horizontal",
     className: "dnb-upload__condition-list"
   }, prettyfiedAcceptedFileFormats && React.createElement(Dl.Item, null, React.createElement(Dt, null, fileTypeDescription), React.createElement(Dd, null, prettyfiedAcceptedFileFormats)), React.createElement(Dl.Item, null, React.createElement(Dt, null, fileSizeDescription), React.createElement(Dd, null, String(fileSizeContent).replace('%size', format(fileMaxSize).toString()))), filesAmountLimit < defaultProps.filesAmountLimit && React.createElement(Dl.Item, null, React.createElement(Dt, null, fileAmountDescription), React.createElement(Dd, null, filesAmountLimit))));
 };

package/components/upload/UploadInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadInfo.js","names":["React","defaultProps","UploadContext","Lead","P","Dl","Dt","Dd","format","UploadInfo","context","useContext","title","text","acceptedFileTypes","fileTypeDescription","fileSizeDescription","fileAmountDescription","fileSizeContent","filesAmountLimit","fileMaxSize","prettyfiedAcceptedFileFormats","join","toUpperCase","createElement","Fragment","space","top","className","bottom","direction","Item","String","replace","toString"],"sources":["../../../../src/components/upload/UploadInfo.tsx"],"sourcesContent":["import React from 'react'\nimport { defaultProps, UploadContext } from './UploadContext'\nimport Lead from '../../elements/Lead'\nimport P from '../../elements/P'\nimport Dl from '../../elements/Dl'\nimport Dt from '../../elements/Dt'\nimport Dd from '../../elements/Dd'\nimport { format } from '../number-format/NumberUtils'\n\nconst UploadInfo = () => {\n  const context = React.useContext(UploadContext)\n\n  const {\n    title,\n    text,\n    acceptedFileTypes,\n    fileTypeDescription,\n    fileSizeDescription,\n    fileAmountDescription,\n    fileSizeContent,\n    filesAmountLimit,\n    fileMaxSize,\n  } = context\n\n  const prettyfiedAcceptedFileFormats = acceptedFileTypes\n    .join(', ')\n    .toUpperCase()\n\n  return (\n    <>\n      <Lead space=\"0\">{title}</Lead>\n\n      <P top=\"xx-small\" className=\"dnb-upload__text\">\n        {text}\n      </P>\n\n      <Dl\n        top=\"small\"\n        bottom={0}\n        direction=\"horizontal\"\n        className=\"dnb-upload__condition-list\"\n      >\n        {prettyfiedAcceptedFileFormats && (\n          <Dl.Item>\n            <Dt>{fileTypeDescription}</Dt>\n            <Dd>{prettyfiedAcceptedFileFormats}</Dd>\n          </Dl.Item>\n        )}\n\n        <Dl.Item>\n          <Dt>{fileSizeDescription}</Dt>\n          <Dd>\n            {String(fileSizeContent).replace(\n              '%size',\n              format(fileMaxSize).toString()\n            )}\n          </Dd>\n        </Dl.Item>\n\n        {filesAmountLimit < defaultProps.filesAmountLimit && (\n          <Dl.Item>\n            <Dt>{fileAmountDescription}</Dt>\n            <Dd>{filesAmountLimit}</Dd>\n          </Dl.Item>\n        )}\n      </Dl>\n    </>\n  )\n}\n\nexport default UploadInfo\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,aAAa,QAAQ,iBAAiB;AAC7D,OAAOC,IAAI,MAAM,qBAAqB;AACtC,OAAOC,CAAC,MAAM,kBAAkB;AAChC,OAAOC,EAAE,MAAM,mBAAmB;AAClC,OAAOC,EAAE,MAAM,mBAAmB;AAClC,OAAOC,EAAE,MAAM,mBAAmB;AAClC,SAASC,MAAM,QAAQ,8BAA8B;AAErD,MAAMC,UAAU,GAAGA,CAAA,KAAM;EACvB,MAAMC,OAAO,GAAGV,KAAK,CAACW,UAAU,CAACT,aAAa,CAAC;EAE/C,MAAM;IACJU,KAAK;IACLC,IAAI;IACJC,iBAAiB;IACjBC,mBAAmB;IACnBC,mBAAmB;IACnBC,qBAAqB;IACrBC,eAAe;IACfC,gBAAgB;IAChBC;EACF,CAAC,GAAGV,OAAO;EAEX,MAAMW,6BAA6B,GAAGP,iBAAiB,CACpDQ,IAAI,CAAC,IAAI,CAAC,CACVC,WAAW,CAAC,CAAC;EAEhB,OACEvB,KAAA,CAAAwB,aAAA,CAAAxB,KAAA,CAAAyB,QAAA,QACEzB,KAAA,CAAAwB,aAAA,CAACrB,IAAI;IAACuB,KAAK,EAAC;EAAG,GAAEd,KAAY,CAAC,EAE9BZ,KAAA,CAAAwB,aAAA,CAACpB,CAAC;IAACuB,GAAG,EAAC,UAAU;IAACC,SAAS,EAAC;EAAkB,GAC3Cf,IACA,CAAC,EAEJb,KAAA,CAAAwB,aAAA,CAACnB,EAAE;IACDsB,GAAG,EAAC,OAAO;IACXE,MAAM,EAAE,CAAE;IACVC,SAAS,EAAC,YAAY;IACtBF,SAAS,EAAC;EAA4B,GAErCP,6BAA6B,IAC5BrB,KAAA,CAAAwB,aAAA,CAACnB,EAAE,CAAC0B,IAAI,QACN/B,KAAA,CAAAwB,aAAA,CAAClB,EAAE,QAAES,mBAAwB,CAAC,EAC9Bf,KAAA,CAAAwB,aAAA,CAACjB,EAAE,QAAEc,6BAAkC,CAChC,CACV,EAEDrB,KAAA,CAAAwB,aAAA,CAACnB,EAAE,CAAC0B,IAAI,QACN/B,KAAA,CAAAwB,aAAA,CAAClB,EAAE,QAAEU,mBAAwB,CAAC,EAC9BhB,KAAA,CAAAwB,aAAA,CAACjB,EAAE,QACAyB,MAAM,CAACd,eAAe,CAAC,CAACe,OAAO,CAC9B,OAAO,EACPzB,MAAM,CAACY,WAAW,CAAC,CAACc,QAAQ,CAAC,CAC/B,CACE,CACG,CAAC,EAETf,gBAAgB,GAAGlB,YAAY,CAACkB,gBAAgB,IAC/CnB,KAAA,CAAAwB,aAAA,CAACnB,EAAE,CAAC0B,IAAI,QACN/B,KAAA,CAAAwB,aAAA,CAAClB,EAAE,QAAEW,qBAA0B,CAAC,EAChCjB,KAAA,CAAAwB,aAAA,CAACjB,EAAE,QAAEY,gBAAqB,CACnB,CAET,CACJ,CAAC;AAEP,CAAC;AAED,eAAeV,UAAU"}
+{"version":3,"file":"UploadInfo.js","names":["React","defaultProps","UploadContext","Lead","P","Dl","Dt","Dd","format","UploadInfo","context","useContext","title","text","acceptedFileTypes","fileTypeDescription","fileSizeDescription","fileAmountDescription","fileSizeContent","filesAmountLimit","fileMaxSize","prettyfiedAcceptedFileFormats","join","toUpperCase","createElement","Fragment","space","top","className","bottom","layout","Item","String","replace","toString"],"sources":["../../../../src/components/upload/UploadInfo.tsx"],"sourcesContent":["import React from 'react'\nimport { defaultProps, UploadContext } from './UploadContext'\nimport Lead from '../../elements/Lead'\nimport P from '../../elements/P'\nimport Dl from '../../elements/Dl'\nimport Dt from '../../elements/Dt'\nimport Dd from '../../elements/Dd'\nimport { format } from '../number-format/NumberUtils'\n\nconst UploadInfo = () => {\n  const context = React.useContext(UploadContext)\n\n  const {\n    title,\n    text,\n    acceptedFileTypes,\n    fileTypeDescription,\n    fileSizeDescription,\n    fileAmountDescription,\n    fileSizeContent,\n    filesAmountLimit,\n    fileMaxSize,\n  } = context\n\n  const prettyfiedAcceptedFileFormats = acceptedFileTypes\n    .join(', ')\n    .toUpperCase()\n\n  return (\n    <>\n      <Lead space=\"0\">{title}</Lead>\n\n      <P top=\"xx-small\" className=\"dnb-upload__text\">\n        {text}\n      </P>\n\n      <Dl\n        top=\"small\"\n        bottom={0}\n        layout=\"horizontal\"\n        className=\"dnb-upload__condition-list\"\n      >\n        {prettyfiedAcceptedFileFormats && (\n          <Dl.Item>\n            <Dt>{fileTypeDescription}</Dt>\n            <Dd>{prettyfiedAcceptedFileFormats}</Dd>\n          </Dl.Item>\n        )}\n\n        <Dl.Item>\n          <Dt>{fileSizeDescription}</Dt>\n          <Dd>\n            {String(fileSizeContent).replace(\n              '%size',\n              format(fileMaxSize).toString()\n            )}\n          </Dd>\n        </Dl.Item>\n\n        {filesAmountLimit < defaultProps.filesAmountLimit && (\n          <Dl.Item>\n            <Dt>{fileAmountDescription}</Dt>\n            <Dd>{filesAmountLimit}</Dd>\n          </Dl.Item>\n        )}\n      </Dl>\n    </>\n  )\n}\n\nexport default UploadInfo\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,aAAa,QAAQ,iBAAiB;AAC7D,OAAOC,IAAI,MAAM,qBAAqB;AACtC,OAAOC,CAAC,MAAM,kBAAkB;AAChC,OAAOC,EAAE,MAAM,mBAAmB;AAClC,OAAOC,EAAE,MAAM,mBAAmB;AAClC,OAAOC,EAAE,MAAM,mBAAmB;AAClC,SAASC,MAAM,QAAQ,8BAA8B;AAErD,MAAMC,UAAU,GAAGA,CAAA,KAAM;EACvB,MAAMC,OAAO,GAAGV,KAAK,CAACW,UAAU,CAACT,aAAa,CAAC;EAE/C,MAAM;IACJU,KAAK;IACLC,IAAI;IACJC,iBAAiB;IACjBC,mBAAmB;IACnBC,mBAAmB;IACnBC,qBAAqB;IACrBC,eAAe;IACfC,gBAAgB;IAChBC;EACF,CAAC,GAAGV,OAAO;EAEX,MAAMW,6BAA6B,GAAGP,iBAAiB,CACpDQ,IAAI,CAAC,IAAI,CAAC,CACVC,WAAW,CAAC,CAAC;EAEhB,OACEvB,KAAA,CAAAwB,aAAA,CAAAxB,KAAA,CAAAyB,QAAA,QACEzB,KAAA,CAAAwB,aAAA,CAACrB,IAAI;IAACuB,KAAK,EAAC;EAAG,GAAEd,KAAY,CAAC,EAE9BZ,KAAA,CAAAwB,aAAA,CAACpB,CAAC;IAACuB,GAAG,EAAC,UAAU;IAACC,SAAS,EAAC;EAAkB,GAC3Cf,IACA,CAAC,EAEJb,KAAA,CAAAwB,aAAA,CAACnB,EAAE;IACDsB,GAAG,EAAC,OAAO;IACXE,MAAM,EAAE,CAAE;IACVC,MAAM,EAAC,YAAY;IACnBF,SAAS,EAAC;EAA4B,GAErCP,6BAA6B,IAC5BrB,KAAA,CAAAwB,aAAA,CAACnB,EAAE,CAAC0B,IAAI,QACN/B,KAAA,CAAAwB,aAAA,CAAClB,EAAE,QAAES,mBAAwB,CAAC,EAC9Bf,KAAA,CAAAwB,aAAA,CAACjB,EAAE,QAAEc,6BAAkC,CAChC,CACV,EAEDrB,KAAA,CAAAwB,aAAA,CAACnB,EAAE,CAAC0B,IAAI,QACN/B,KAAA,CAAAwB,aAAA,CAAClB,EAAE,QAAEU,mBAAwB,CAAC,EAC9BhB,KAAA,CAAAwB,aAAA,CAACjB,EAAE,QACAyB,MAAM,CAACd,eAAe,CAAC,CAACe,OAAO,CAC9B,OAAO,EACPzB,MAAM,CAACY,WAAW,CAAC,CAACc,QAAQ,CAAC,CAC/B,CACE,CACG,CAAC,EAETf,gBAAgB,GAAGlB,YAAY,CAACkB,gBAAgB,IAC/CnB,KAAA,CAAAwB,aAAA,CAACnB,EAAE,CAAC0B,IAAI,QACN/B,KAAA,CAAAwB,aAAA,CAAClB,EAAE,QAAEW,qBAA0B,CAAC,EAChCjB,KAAA,CAAAwB,aAAA,CAACjB,EAAE,QAAEY,gBAAqB,CACnB,CAET,CACJ,CAAC;AAEP,CAAC;AAED,eAAeV,UAAU"}

package/core/jest/jestSetupScreenshots.css

@@ -34,3 +34,10 @@ html {
 
   background: #fff;
 }
+
+/**
+* Hide "Preparing requested page" popup
+*/
+gatsby-qod {
+  opacity: 0;
+}

package/elements/blockquote/style/themes/dnb-blockquote-theme-sbanken.scss

@@ -2,6 +2,7 @@
 
 .dnb-blockquote {
   --blockquote-padding-top: 1.5rem;
+  --blockquote-padding-bottom: 2rem;
   --blockquote-quote-padding: 5.5rem;
   --blockquote-cite-style: normal;
 

package/elements/lib.d.ts

@@ -57,7 +57,7 @@ export declare const getElements: () => {
         innerSpace?: import("../shared/types").SpaceTypeAll | import("../shared/types").SpaceTypeMedia;
     } & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<unknown>>;
     Dl: {
-        ({ direction, ...props }: import("./Dl").DlAllProps): import("react/jsx-runtime").JSX.Element;
+        ({ direction, layout, ...props }: import("./Dl").DlAllProps): import("react/jsx-runtime").JSX.Element;
         Item({ className, children, ...props }: import("react").AllHTMLAttributes<HTMLSpanElement> & import("../shared/types").SpacingElementProps & {
             space?: import("../shared/types").SpaceTypeAll;
             innerSpace?: import("../shared/types").SpaceTypeAll | import("../shared/types").SpaceTypeMedia;

package/elements/lists/Dl.d.ts

@@ -9,11 +9,15 @@ export type DlProps = {
     /**
      * Use "true" to horizontally align both the term and the description
      */
+    layout?: 'vertical' | 'horizontal' | 'grid';
+    /**
+     * @deprecated Use layout instead
+     */
     direction?: 'vertical' | 'horizontal';
 };
 export type DlAllProps = DlProps & React.AllHTMLAttributes<HTMLDListElement> & ElementProps;
 declare const Dl: {
-    ({ direction, ...props }: DlAllProps): import("react/jsx-runtime").JSX.Element;
+    ({ direction, layout, ...props }: DlAllProps): import("react/jsx-runtime").JSX.Element;
     Item({ className, children, ...props }: React.AllHTMLAttributes<HTMLSpanElement> & SpacingProps): import("react/jsx-runtime").JSX.Element;
     _supportsSpacingProps: boolean;
 };

package/elements/lists/Dl.js

@@ -1,17 +1,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["direction"],
+const _excluded = ["direction", "layout"],
   _excluded2 = ["className", "children"];
 import React from 'react';
 import classnames from 'classnames';
 import E from '../Element';
 const Dl = _ref => {
   let {
-      direction
+      direction,
+      layout
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  if (direction) {
-    props.className = classnames(props.className, `dnb-dl__direction--${direction}`);
+  if (layout || direction) {
+    props.className = classnames(props.className, `dnb-dl__layout--${layout || direction}`);
   }
   return React.createElement(E, _extends({
     as: "dl"

package/elements/lists/Dl.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dl.js","names":["React","classnames","E","Dl","_ref","direction","props","_objectWithoutProperties","_excluded","className","createElement","_extends","as","skeleton","Item","_ref2","children","_excluded2","Fragment","_supportsSpacingProps"],"sources":["../../../../src/elements/lists/Dl.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport E, { ElementProps } from '../Element'\nimport type { SpacingProps } from '../../shared/types'\n\nexport type DlProps = {\n  /**\n   * Use \"true\" to horizontally align both the term and the description\n   */\n  direction?: 'vertical' | 'horizontal'\n}\n\nexport type DlAllProps = DlProps &\n  React.AllHTMLAttributes<HTMLDListElement> &\n  ElementProps\n\nconst Dl = ({ direction, ...props }: DlAllProps) => {\n  if (direction) {\n    props.className = classnames(\n      props.className,\n      `dnb-dl__direction--${direction}`\n    )\n  }\n  return <E as=\"dl\" {...props} skeleton={false} />\n}\n\nDl.Item = ({\n  className,\n  children,\n  ...props\n}: React.AllHTMLAttributes<HTMLSpanElement> & SpacingProps) => {\n  return (\n    <>\n      {children}\n      <E\n        as=\"dd\"\n        aria-hidden\n        className={classnames(className, 'dnb-dl__item')}\n        {...props}\n      />\n    </>\n  )\n}\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nDl._supportsSpacingProps = true\n\nexport default Dl\n"],"mappings":";;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,CAAC,MAAwB,YAAY;AAc5C,MAAMC,EAAE,GAAGC,IAAA,IAAyC;EAAA,IAAxC;MAAEC;IAAgC,CAAC,GAAAD,IAAA;IAAnBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAC/B,IAAIH,SAAS,EAAE;IACbC,KAAK,CAACG,SAAS,GAAGR,UAAU,CAC1BK,KAAK,CAACG,SAAS,EACd,sBAAqBJ,SAAU,EAClC,CAAC;EACH;EACA,OAAOL,KAAA,CAAAU,aAAA,CAACR,CAAC,EAAAS,QAAA;IAACC,EAAE,EAAC;EAAI,GAAKN,KAAK;IAAEO,QAAQ,EAAE;EAAM,EAAE,CAAC;AAClD,CAAC;AAEDV,EAAE,CAACW,IAAI,GAAGC,KAAA,IAIqD;EAAA,IAJpD;MACTN,SAAS;MACTO;IAEuD,CAAC,GAAAD,KAAA;IADrDT,KAAK,GAAAC,wBAAA,CAAAQ,KAAA,EAAAE,UAAA;EAER,OACEjB,KAAA,CAAAU,aAAA,CAAAV,KAAA,CAAAkB,QAAA,QACGF,QAAQ,EACThB,KAAA,CAAAU,aAAA,CAACR,CAAC,EAAAS,QAAA;IACAC,EAAE,EAAC,IAAI;IACP,mBAAW;IACXH,SAAS,EAAER,UAAU,CAACQ,SAAS,EAAE,cAAc;EAAE,GAC7CH,KAAK,CACV,CACD,CAAC;AAEP,CAAC;AAIDH,EAAE,CAACgB,qBAAqB,GAAG,IAAI;AAE/B,eAAehB,EAAE"}
+{"version":3,"file":"Dl.js","names":["React","classnames","E","Dl","_ref","direction","layout","props","_objectWithoutProperties","_excluded","className","createElement","_extends","as","skeleton","Item","_ref2","children","_excluded2","Fragment","_supportsSpacingProps"],"sources":["../../../../src/elements/lists/Dl.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport E, { ElementProps } from '../Element'\nimport type { SpacingProps } from '../../shared/types'\n\nexport type DlProps = {\n  /**\n   * Use \"true\" to horizontally align both the term and the description\n   */\n  layout?: 'vertical' | 'horizontal' | 'grid'\n\n  /**\n   * @deprecated Use layout instead\n   */\n  direction?: 'vertical' | 'horizontal'\n}\n\nexport type DlAllProps = DlProps &\n  React.AllHTMLAttributes<HTMLDListElement> &\n  ElementProps\n\nconst Dl = ({ direction, layout, ...props }: DlAllProps) => {\n  if (layout || direction) {\n    props.className = classnames(\n      props.className,\n      `dnb-dl__layout--${layout || direction}`\n    )\n  }\n  return <E as=\"dl\" {...props} skeleton={false} />\n}\n\nDl.Item = ({\n  className,\n  children,\n  ...props\n}: React.AllHTMLAttributes<HTMLSpanElement> & SpacingProps) => {\n  return (\n    <>\n      {children}\n      <E\n        as=\"dd\"\n        aria-hidden\n        className={classnames(className, 'dnb-dl__item')}\n        {...props}\n      />\n    </>\n  )\n}\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nDl._supportsSpacingProps = true\n\nexport default Dl\n"],"mappings":";;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,CAAC,MAAwB,YAAY;AAmB5C,MAAMC,EAAE,GAAGC,IAAA,IAAiD;EAAA,IAAhD;MAAEC,SAAS;MAAEC;IAA6B,CAAC,GAAAF,IAAA;IAAnBG,KAAK,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EACvC,IAAIH,MAAM,IAAID,SAAS,EAAE;IACvBE,KAAK,CAACG,SAAS,GAAGT,UAAU,CAC1BM,KAAK,CAACG,SAAS,EACd,mBAAkBJ,MAAM,IAAID,SAAU,EACzC,CAAC;EACH;EACA,OAAOL,KAAA,CAAAW,aAAA,CAACT,CAAC,EAAAU,QAAA;IAACC,EAAE,EAAC;EAAI,GAAKN,KAAK;IAAEO,QAAQ,EAAE;EAAM,EAAE,CAAC;AAClD,CAAC;AAEDX,EAAE,CAACY,IAAI,GAAGC,KAAA,IAIqD;EAAA,IAJpD;MACTN,SAAS;MACTO;IAEuD,CAAC,GAAAD,KAAA;IADrDT,KAAK,GAAAC,wBAAA,CAAAQ,KAAA,EAAAE,UAAA;EAER,OACElB,KAAA,CAAAW,aAAA,CAAAX,KAAA,CAAAmB,QAAA,QACGF,QAAQ,EACTjB,KAAA,CAAAW,aAAA,CAACT,CAAC,EAAAU,QAAA;IACAC,EAAE,EAAC,IAAI;IACP,mBAAW;IACXH,SAAS,EAAET,UAAU,CAACS,SAAS,EAAE,cAAc;EAAE,GAC7CH,KAAK,CACV,CACD,CAAC;AAEP,CAAC;AAIDJ,EAAE,CAACiB,qBAAqB,GAAG,IAAI;AAE/B,eAAejB,EAAE"}

package/elements/lists/style/lists-mixins.scss

@@ -144,7 +144,7 @@
 
   // Inline
   @include allAbove(small) {
-    &__direction--horizontal {
+    &__layout--horizontal {
       // We can not use gap: 0.5rem because of our wrapper "__item"
       display: flex;
       flex-wrap: wrap;
@@ -170,10 +170,33 @@
     }
 
     dd#{&}__item {
+      display: none;
       flex-basis: 100%; // ensures we always break to a new line, no matter what the available space is
       height: 0;
       margin: 0;
     }
+
+    &__layout--grid {
+      display: grid;
+      grid-template-columns: 1fr 2fr;
+      column-gap: 2rem;
+      row-gap: 1rem;
+
+      /* stylelint-disable */
+      & dt {
+        max-width: 15ch;
+      }
+      & dd {
+        max-width: 30ch;
+        align-self: end;
+      }
+      & dt,
+      & dd,
+      & dd ~ dt {
+        margin: 0;
+      }
+      /* stylelint-enable */
+    }
   }
 }
 

package/es/components/aria-live/useAriaLive.d.ts

@@ -48,7 +48,7 @@ export default function useAriaLive(props: AriaLiveAllProps): {
     results?: number;
     security?: string;
     unselectable?: "off" | "on";
-    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
     is?: string;
     'aria-activedescendant'?: string;
     'aria-atomic': boolean | "true" | "false";

package/es/components/breadcrumb/Breadcrumb.d.ts

@@ -26,9 +26,9 @@ export type BreadcrumbProps = {
     children?: React.ReactElement<BreadcrumbItemProps> | Array<React.ReactElement<BreadcrumbItemProps>>;
     /**
      * The variant of the component.
-     * Default: When children and data is not defined, it defaults to "single". If they are defined, the variant depends on the viewport.
+     * Default: When children and data is not defined, it defaults to "single". "responsive" if they are defined.
      */
-    variant?: 'single' | 'multiple' | 'collapse';
+    variant?: 'responsive' | 'single' | 'multiple' | 'collapse';
     /**
      * Handle the click event on 'single'/'collapse'
      * Default: null

package/es/components/breadcrumb/Breadcrumb.js

@@ -59,7 +59,7 @@ const Breadcrumb = localProps => {
   let currentVariant = variant;
   if (!variant) {
     if (items || data) {
-      currentVariant = 'multiple';
+      currentVariant = 'responsive';
     } else {
       currentVariant = 'single';
     }
@@ -88,7 +88,7 @@ const Breadcrumb = localProps => {
     icon_position: "left",
     onClick: onClick,
     href: href
-  }) : React.createElement(React.Fragment, null, React.createElement(Button, {
+  }) : React.createElement(React.Fragment, null, currentVariant !== 'multiple' && React.createElement(Button, {
     className: "dnb-breadcrumb__toggle",
     text: backToText,
     variant: "tertiary",
@@ -103,7 +103,7 @@ const Breadcrumb = localProps => {
     items: items,
     isCollapsed: false,
     noAnimation: noAnimation
-  }))), React.createElement(Section, {
+  }))), (currentVariant === 'collapse' || currentVariant === 'responsive') && React.createElement(Section, {
     variant: collapsedStyleType,
     className: "dnb-breadcrumb__collapse"
   }, React.createElement(BreadcrumbMultiple, {

package/es/components/breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","names":["React","useEffect","useState","classnames","createSkeletonClass","createSpacingClasses","Section","Button","Context","BreadcrumbItem","convertJsxToString","isTrue","validateDOMAttributes","extendPropsWithContext","BreadcrumbMultiple","useMedia","defaultProps","skeleton","navText","goBackText","homeText","backToText","isCollapsed","styleType","collapsedStyleType","spacing","Breadcrumb","localProps","_context$translation","context","useContext","allProps","translation","className","children","items","variant","onClick","overrideIsCollapsed","noAnimation","data","href","props","_objectWithoutProperties","_excluded","skeletonClasses","spacingClasses","setCollapse","isLarge","currentVariant","innerSpace","createElement","_extends","style_type","text","icon","icon_position","Fragment","Item","_supportsSpacingProps"],"sources":["../../../../src/components/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Section, {\n  SectionSpacing,\n  SectionStyleTypes,\n} from '../section/Section'\nimport Button from '../button/Button'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\n\n// Internal\nimport BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'\nimport {\n  convertJsxToString,\n  isTrue,\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { BreadcrumbMultiple } from './BreadcrumbMultiple'\nimport { useMedia } from '../../shared'\n\nexport type BreadcrumbProps = {\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * Pass in a list of your pages as objects of breadcrumbitem to render them as breadcrumbitems.\n   * Default: null\n   */\n  data?: Array<BreadcrumbItemProps>\n\n  /**\n   * The content of the component. Can be used instead of prop \"data\".\n   * Default: null\n   */\n  children?:\n    | React.ReactElement<BreadcrumbItemProps>\n    | Array<React.ReactElement<BreadcrumbItemProps>>\n\n  /**\n   * The variant of the component.\n   * Default: When children and data is not defined, it defaults to \"single\". If they are defined, the variant depends on the viewport.\n   */\n  variant?: 'single' | 'multiple' | 'collapse'\n\n  /**\n   * Handle the click event on 'single'/'collapse'\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * For variant 'single', use href (or onClick) to set href when clicking \"Back\"\n   * Default: null\n   */\n  href?: string\n\n  /**\n   * Every <nav> on a page needs an unique aria-label text\n   * Default: Page hierarchy\n   */\n  navText?: React.ReactNode\n\n  /**\n   * Add custom 'Back' text for variant 'single'\n   * Default: 'Back' or defined by Context translation\n   */\n  goBackText?: React.ReactNode\n\n  /**\n   * Add custom 'Home' text\n   * Default: 'Home' or defined by Context translation\n   */\n  homeText?: React.ReactNode\n\n  /**\n   * Add custom 'Back to...' text, for variant collapse\n   * Default 'Back to...' or defined by Context translation\n   */\n  backToText?: React.ReactNode\n\n  /**\n   * If variant='collapse', you can override isCollapsed for the collapsed content by updating this value.\n   * Default: null\n   */\n  isCollapsed?: boolean\n\n  /**\n   * Use one of the Section component style types (style_type)\n   * Default: transparent\n   */\n  styleType?: SectionStyleTypes\n\n  /**\n   * Use one of the Section component style types (style_type)\n   * Default: pistachio\n   */\n  collapsedStyleType?: SectionStyleTypes\n\n  /**\n   * Include spacing properties from the Section component in breadcrumb. If only `true` is given, the spacing will be `small`.\n   * Default: false\n   */\n  spacing?: SectionSpacing\n\n  /**\n   * Will disable the height animation\n   * Default: false\n   */\n  noAnimation?: boolean\n}\n\nexport const defaultProps = {\n  skeleton: false,\n  navText: 'Back',\n  goBackText: 'Back',\n  homeText: 'Home',\n  backToText: 'Back to...',\n  isCollapsed: true,\n  styleType: 'transparent',\n  collapsedStyleType: 'info',\n  spacing: false,\n}\n\nconst Breadcrumb = (localProps: BreadcrumbProps & SpacingProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.translation?.Breadcrumb,\n    context?.Breadcrumb,\n    { skeleton: context?.skeleton }\n  )\n\n  const {\n    className,\n    skeleton,\n    children: items,\n    variant,\n    onClick,\n    navText, // has a translation in context\n    goBackText, // has a translation in context\n    homeText, // eslint-disable-line\n    backToText, // has a translation in context\n    styleType,\n    collapsedStyleType,\n    isCollapsed: overrideIsCollapsed,\n    spacing,\n    noAnimation,\n    data,\n    href,\n    ...props\n  } = allProps\n  const skeletonClasses = createSkeletonClass('font', skeleton, context)\n  const spacingClasses = createSpacingClasses(props)\n\n  const [isCollapsed, setCollapse] = useState(overrideIsCollapsed)\n\n  const { isLarge } = useMedia()\n\n  let currentVariant = variant\n  if (!variant) {\n    if (items || data) {\n      currentVariant = 'multiple'\n    } else {\n      currentVariant = 'single'\n    }\n  }\n\n  useEffect(() => {\n    setCollapse(overrideIsCollapsed)\n  }, [overrideIsCollapsed])\n\n  // Auto-collapse breadcrumbs if going from small screen to large screen.\n  useEffect(() => {\n    if (isLarge && overrideIsCollapsed !== false) {\n      setCollapse(true)\n    }\n  }, [isLarge])\n\n  validateDOMAttributes(allProps, props)\n\n  const innerSpace = isTrue(spacing) ? 'small' : spacing\n\n  return (\n    <nav\n      aria-label={convertJsxToString(navText)}\n      className={classnames(\n        'dnb-breadcrumb',\n        `dnb-breadcrumb--variant-${currentVariant}`,\n        skeletonClasses,\n        spacingClasses,\n        className\n      )}\n      {...props}\n    >\n      <Section\n        className=\"dnb-breadcrumb__bar\"\n        style_type={styleType || 'transparent'}\n        innerSpace={innerSpace}\n      >\n        {currentVariant === 'single' ? (\n          <Button\n            text={goBackText}\n            variant=\"tertiary\"\n            icon=\"chevron_left\"\n            icon_position=\"left\"\n            onClick={onClick}\n            href={href}\n          />\n        ) : (\n          <>\n            <Button\n              className=\"dnb-breadcrumb__toggle\"\n              text={backToText}\n              variant=\"tertiary\"\n              icon=\"chevron_left\"\n              icon_position=\"left\"\n              onClick={\n                onClick ||\n                (() => {\n                  setCollapse(!isCollapsed)\n                })\n              }\n              aria-expanded={!isCollapsed}\n            />\n\n            {currentVariant !== 'collapse' && (\n              <BreadcrumbMultiple\n                data={data}\n                items={items}\n                isCollapsed={false}\n                noAnimation={noAnimation}\n              />\n            )}\n          </>\n        )}\n      </Section>\n\n      <Section\n        variant={collapsedStyleType}\n        className=\"dnb-breadcrumb__collapse\"\n      >\n        <BreadcrumbMultiple\n          data={data}\n          items={items}\n          isCollapsed={isCollapsed}\n          noAnimation={noAnimation}\n        />\n      </Section>\n    </nav>\n  )\n}\n\nBreadcrumb.Item = BreadcrumbItem\nBreadcrumb._supportsSpacingProps = true\n\nexport { BreadcrumbItem }\nexport default Breadcrumb\n"],"mappings":"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"}
+{"version":3,"file":"Breadcrumb.js","names":["React","useEffect","useState","classnames","createSkeletonClass","createSpacingClasses","Section","Button","Context","BreadcrumbItem","convertJsxToString","isTrue","validateDOMAttributes","extendPropsWithContext","BreadcrumbMultiple","useMedia","defaultProps","skeleton","navText","goBackText","homeText","backToText","isCollapsed","styleType","collapsedStyleType","spacing","Breadcrumb","localProps","_context$translation","context","useContext","allProps","translation","className","children","items","variant","onClick","overrideIsCollapsed","noAnimation","data","href","props","_objectWithoutProperties","_excluded","skeletonClasses","spacingClasses","setCollapse","isLarge","currentVariant","innerSpace","createElement","_extends","style_type","text","icon","icon_position","Fragment","Item","_supportsSpacingProps"],"sources":["../../../../src/components/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Section, {\n  SectionSpacing,\n  SectionStyleTypes,\n} from '../section/Section'\nimport Button from '../button/Button'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\n\n// Internal\nimport BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'\nimport {\n  convertJsxToString,\n  isTrue,\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { BreadcrumbMultiple } from './BreadcrumbMultiple'\nimport { useMedia } from '../../shared'\n\nexport type BreadcrumbProps = {\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * Pass in a list of your pages as objects of breadcrumbitem to render them as breadcrumbitems.\n   * Default: null\n   */\n  data?: Array<BreadcrumbItemProps>\n\n  /**\n   * The content of the component. Can be used instead of prop \"data\".\n   * Default: null\n   */\n  children?:\n    | React.ReactElement<BreadcrumbItemProps>\n    | Array<React.ReactElement<BreadcrumbItemProps>>\n\n  /**\n   * The variant of the component.\n   * Default: When children and data is not defined, it defaults to \"single\". \"responsive\" if they are defined.\n   */\n  variant?: 'responsive' | 'single' | 'multiple' | 'collapse'\n\n  /**\n   * Handle the click event on 'single'/'collapse'\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * For variant 'single', use href (or onClick) to set href when clicking \"Back\"\n   * Default: null\n   */\n  href?: string\n\n  /**\n   * Every <nav> on a page needs an unique aria-label text\n   * Default: Page hierarchy\n   */\n  navText?: React.ReactNode\n\n  /**\n   * Add custom 'Back' text for variant 'single'\n   * Default: 'Back' or defined by Context translation\n   */\n  goBackText?: React.ReactNode\n\n  /**\n   * Add custom 'Home' text\n   * Default: 'Home' or defined by Context translation\n   */\n  homeText?: React.ReactNode\n\n  /**\n   * Add custom 'Back to...' text, for variant collapse\n   * Default 'Back to...' or defined by Context translation\n   */\n  backToText?: React.ReactNode\n\n  /**\n   * If variant='collapse', you can override isCollapsed for the collapsed content by updating this value.\n   * Default: null\n   */\n  isCollapsed?: boolean\n\n  /**\n   * Use one of the Section component style types (style_type)\n   * Default: transparent\n   */\n  styleType?: SectionStyleTypes\n\n  /**\n   * Use one of the Section component style types (style_type)\n   * Default: pistachio\n   */\n  collapsedStyleType?: SectionStyleTypes\n\n  /**\n   * Include spacing properties from the Section component in breadcrumb. If only `true` is given, the spacing will be `small`.\n   * Default: false\n   */\n  spacing?: SectionSpacing\n\n  /**\n   * Will disable the height animation\n   * Default: false\n   */\n  noAnimation?: boolean\n}\n\nexport const defaultProps = {\n  skeleton: false,\n  navText: 'Back',\n  goBackText: 'Back',\n  homeText: 'Home',\n  backToText: 'Back to...',\n  isCollapsed: true,\n  styleType: 'transparent',\n  collapsedStyleType: 'info',\n  spacing: false,\n}\n\nconst Breadcrumb = (localProps: BreadcrumbProps & SpacingProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.translation?.Breadcrumb,\n    context?.Breadcrumb,\n    { skeleton: context?.skeleton }\n  )\n\n  const {\n    className,\n    skeleton,\n    children: items,\n    variant,\n    onClick,\n    navText, // has a translation in context\n    goBackText, // has a translation in context\n    homeText, // eslint-disable-line\n    backToText, // has a translation in context\n    styleType,\n    collapsedStyleType,\n    isCollapsed: overrideIsCollapsed,\n    spacing,\n    noAnimation,\n    data,\n    href,\n    ...props\n  } = allProps\n  const skeletonClasses = createSkeletonClass('font', skeleton, context)\n  const spacingClasses = createSpacingClasses(props)\n\n  const [isCollapsed, setCollapse] = useState(overrideIsCollapsed)\n\n  const { isLarge } = useMedia()\n\n  let currentVariant = variant\n  if (!variant) {\n    if (items || data) {\n      currentVariant = 'responsive'\n    } else {\n      currentVariant = 'single'\n    }\n  }\n\n  useEffect(() => {\n    setCollapse(overrideIsCollapsed)\n  }, [overrideIsCollapsed])\n\n  // Auto-collapse breadcrumbs if going from small screen to large screen.\n  useEffect(() => {\n    if (isLarge && overrideIsCollapsed !== false) {\n      setCollapse(true)\n    }\n  }, [isLarge])\n\n  validateDOMAttributes(allProps, props)\n\n  const innerSpace = isTrue(spacing) ? 'small' : spacing\n\n  return (\n    <nav\n      aria-label={convertJsxToString(navText)}\n      className={classnames(\n        'dnb-breadcrumb',\n        `dnb-breadcrumb--variant-${currentVariant}`,\n        skeletonClasses,\n        spacingClasses,\n        className\n      )}\n      {...props}\n    >\n      <Section\n        className=\"dnb-breadcrumb__bar\"\n        style_type={styleType || 'transparent'}\n        innerSpace={innerSpace}\n      >\n        {currentVariant === 'single' ? (\n          <Button\n            text={goBackText}\n            variant=\"tertiary\"\n            icon=\"chevron_left\"\n            icon_position=\"left\"\n            onClick={onClick}\n            href={href}\n          />\n        ) : (\n          <>\n            {currentVariant !== 'multiple' && (\n              <Button\n                className=\"dnb-breadcrumb__toggle\"\n                text={backToText}\n                variant=\"tertiary\"\n                icon=\"chevron_left\"\n                icon_position=\"left\"\n                onClick={\n                  onClick ||\n                  (() => {\n                    setCollapse(!isCollapsed)\n                  })\n                }\n                aria-expanded={!isCollapsed}\n              />\n            )}\n\n            {currentVariant !== 'collapse' && (\n              <BreadcrumbMultiple\n                data={data}\n                items={items}\n                isCollapsed={false}\n                noAnimation={noAnimation}\n              />\n            )}\n          </>\n        )}\n      </Section>\n\n      {(currentVariant === 'collapse' ||\n        currentVariant === 'responsive') && (\n        <Section\n          variant={collapsedStyleType}\n          className=\"dnb-breadcrumb__collapse\"\n        >\n          <BreadcrumbMultiple\n            data={data}\n            items={items}\n            isCollapsed={isCollapsed}\n            noAnimation={noAnimation}\n          />\n        </Section>\n      )}\n    </nav>\n  )\n}\n\nBreadcrumb.Item = BreadcrumbItem\nBreadcrumb._supportsSpacingProps = true\n\nexport { BreadcrumbItem }\nexport default Breadcrumb\n"],"mappings":"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"}

package/es/components/breadcrumb/style/dnb-breadcrumb.css

@@ -10,6 +10,8 @@
   padding: 0;
   display: flex;
   flex-direction: column;
+  /* stylelint-disable no-descending-specificity, no-duplicate-selectors */
+  /* stylelint-enable */
 }
 .dnb-breadcrumb__bar.dnb-section {
   display: flex;
@@ -44,13 +46,16 @@
 .dnb-breadcrumb__multiple.dnb-height-animation--parallax .dnb-breadcrumb__item {
   transform: translateX(0);
 }
+html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item {
+  transition: none;
+}
 @media screen and (max-width: 60em) {
-  .dnb-breadcrumb__bar .dnb-breadcrumb__multiple {
+  .dnb-breadcrumb--variant-responsive .dnb-breadcrumb__bar .dnb-breadcrumb__multiple {
     display: none;
   }
 }
 @media screen and (min-width: 60em) {
-  .dnb-breadcrumb--variant-multiple .dnb-breadcrumb__toggle {
+  .dnb-breadcrumb--variant-responsive .dnb-breadcrumb__toggle {
     display: none;
   }
 }

package/es/components/breadcrumb/style/dnb-breadcrumb.min.css

@@ -1 +1 @@
-.dnb-breadcrumb{display:flex;flex-direction:column;margin:0;padding:0}.dnb-breadcrumb__bar.dnb-section{display:flex}.dnb-breadcrumb__list.dnb-section{align-items:center;display:flex;flex-flow:row wrap;gap:1.5rem;list-style:none;margin:0;padding:0}.dnb-breadcrumb__item__span{align-items:center;display:flex;line-height:normal;padding:.5rem 0}.dnb-breadcrumb__item__span__icon{margin-right:.5rem}.dnb-breadcrumb__multiple{display:flex;flex-direction:column;transition:height .4s var(--easing-default)}.dnb-breadcrumb__multiple .dnb-breadcrumb__item{transform:translateX(-1rem);transition:transform .4s var(--easing-default) calc(var(--delay)*50ms)}.dnb-breadcrumb__multiple.dnb-height-animation--parallax .dnb-breadcrumb__item{transform:translateX(0)}@media screen and (max-width:60em){.dnb-breadcrumb__bar .dnb-breadcrumb__multiple{display:none}}@media screen and (min-width:60em){.dnb-breadcrumb--variant-multiple .dnb-breadcrumb__toggle{display:none}}.dnb-breadcrumb__collapse{display:flex;flex-direction:column}.dnb-breadcrumb__collapse .dnb-breadcrumb__list.dnb-section{align-items:flex-start;flex-direction:column;gap:0;margin:.5rem 0 .5rem 1.5rem}
+.dnb-breadcrumb{display:flex;flex-direction:column;margin:0;padding:0}.dnb-breadcrumb__bar.dnb-section{display:flex}.dnb-breadcrumb__list.dnb-section{align-items:center;display:flex;flex-flow:row wrap;gap:1.5rem;list-style:none;margin:0;padding:0}.dnb-breadcrumb__item__span{align-items:center;display:flex;line-height:normal;padding:.5rem 0}.dnb-breadcrumb__item__span__icon{margin-right:.5rem}.dnb-breadcrumb__multiple{display:flex;flex-direction:column;transition:height .4s var(--easing-default)}.dnb-breadcrumb__multiple .dnb-breadcrumb__item{transform:translateX(-1rem);transition:transform .4s var(--easing-default) calc(var(--delay)*50ms)}.dnb-breadcrumb__multiple.dnb-height-animation--parallax .dnb-breadcrumb__item{transform:translateX(0)}html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item{transition:none}@media screen and (max-width:60em){.dnb-breadcrumb--variant-responsive .dnb-breadcrumb__bar .dnb-breadcrumb__multiple{display:none}}@media screen and (min-width:60em){.dnb-breadcrumb--variant-responsive .dnb-breadcrumb__toggle{display:none}}.dnb-breadcrumb__collapse{display:flex;flex-direction:column}.dnb-breadcrumb__collapse .dnb-breadcrumb__list.dnb-section{align-items:flex-start;flex-direction:column;gap:0;margin:.5rem 0 .5rem 1.5rem}

package/es/components/breadcrumb/style/dnb-breadcrumb.scss

@@ -59,13 +59,21 @@
     transform: translateX(0);
   }
 
-  &__bar &__multiple {
+  /* stylelint-disable no-descending-specificity, no-duplicate-selectors */
+  &__multiple &__item {
+    html[data-visual-test] & {
+      transition: none;
+    }
+  }
+  /* stylelint-enable */
+
+  &--variant-responsive &__bar &__multiple {
     @include allBelow(medium) {
       display: none;
     }
   }
 
-  &--variant-multiple &__toggle {
+  &--variant-responsive &__toggle {
     @include allAbove(medium) {
       display: none;
     }

package/es/components/button/Button.js

@@ -54,7 +54,7 @@ export default class Button extends React.PureComponent {
     }
   }
   render() {
-    var _this$context, _this$context2, _this$context3;
+    var _this$context, _this$context2, _this$context3, _this$context4, _this$context4$theme;
     const props = extendPropsWithContextInClassComponent(this.props, Button.defaultProps, {
       skeleton: (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.skeleton
     }, pickFormElementProps((_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : _this$context2.FormRow), pickFormElementProps((_this$context3 = this.context) === null || _this$context3 === void 0 ? void 0 : _this$context3.formElement), this.context.Button);
@@ -128,7 +128,7 @@ export default class Button extends React.PureComponent {
         icon = launch;
       }
     }
-    const classes = classnames(`dnb-button dnb-button--${usedVariant || 'primary'}`, (text || content || custom_content) && 'dnb-button--has-text', createSkeletonClass(variant === 'tertiary' ? 'font' : 'shape', skeleton, this.context), createSpacingClasses(props), class_name, className, (props.href || props.to) && '', icon && `dnb-button--icon-position-${icon_position} dnb-button--has-icon` + (iconSize ? ` dnb-button--icon-size-${iconSize}` : ""), usedSize && usedSize !== 'default' && `dnb-button--size-${usedSize}`, isTrue(stretch) && 'dnb-button--stretch', wrap && 'dnb-button--wrap', status && `dnb-button__status--${status_state}`, Element === Anchor && 'dnb-anchor--no-style');
+    const classes = classnames(`dnb-button dnb-button--${usedVariant || 'primary'}`, (text || content || custom_content) && 'dnb-button--has-text', createSkeletonClass(variant === 'tertiary' ? 'font' : 'shape', skeleton, this.context), createSpacingClasses(props), class_name, className, (props.href || props.to) && '', icon && `dnb-button--icon-position-${icon_position} dnb-button--has-icon` + (iconSize ? ` dnb-button--icon-size-${iconSize}` : ""), usedSize && usedSize !== 'default' && `dnb-button--size-${usedSize}`, ((_this$context4 = this.context) === null || _this$context4 === void 0 ? void 0 : (_this$context4$theme = _this$context4.theme) === null || _this$context4$theme === void 0 ? void 0 : _this$context4$theme.darkBackground) && `dnb-button--on-dark-background`, isTrue(stretch) && 'dnb-button--stretch', wrap && 'dnb-button--wrap', status && `dnb-button__status--${status_state}`, Element === Anchor && 'dnb-anchor--no-style');
     const params = _objectSpread({
       className: classes,
       title,