@dnb/eufemia 10.55.1 → 10.57.0

package/components/autocomplete/AutocompleteDocs.js

@@ -267,7 +267,7 @@ export const AutocompleteEvents = {
     status: 'optional'
   },
   on_select: {
-    doc: 'Will be called once the users selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, value, active_item }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data). The "active_item" property is the currently selected item by keyboard navigation',
+    doc: 'Will be called once the users focuses or selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, value, active_item }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data). The "active_item" property is the currently selected item by keyboard navigation',
     type: 'function',
     status: 'optional'
   },

package/components/autocomplete/AutocompleteDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteDocs.js","names":["autocompleteProperties","mode","doc","type","status","input_value","placeholder","title","disable_filter","disable_highlighting","disable_reorder","search_numbers","search_in_word_index","keep_value","keep_selection","keep_value_and_selection","prevent_selection","show_clear_button","icon","icon_size","icon_position","input_icon","triangle_position","size","drawer_class","show_submit_button","align_autocomplete","no_options","aria_live_options","show_all","indicator_label","show_options_sr","selected_sr","submit_button_title","submit_button_icon","submit_element","opened","open_on_focus","stretch","skip_portal","status_state","status_props","globalStatus","label","label_direction","label_sr_only","suffix","skeleton","input_ref","input_element","AutocompleteEvents","on_type","on_focus","on_blur","on_change","on_select","on_show","on_hide"],"sources":["../../../../src/components/autocomplete/AutocompleteDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const autocompleteProperties: PropertiesTableProps = {\n  mode: {\n    doc: 'If set to `async`, it prevents showing the \"no options\" message during typing / filtering. Defaults to `sync`.',\n    type: 'string',\n    status: 'optional',\n  },\n  input_value: {\n    doc: 'Lets you define a custom input value.',\n    type: 'string',\n    status: 'optional',\n  },\n  placeholder: {\n    doc: 'Use this to define the pre-filled placeholder text in the input. Defaults to `title=\"Skriv og velg\"`.',\n    type: 'string',\n    status: 'optional',\n  },\n  title: {\n    doc: 'Give a title to let the user know what they have to do. Defaults to `Skriv og få alternativer`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  disable_filter: {\n    doc: 'If set to `true`, word highlighting will still be active, but no options will be filtered out. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  disable_highlighting: {\n    doc: 'If set to `true`, word highlighting will be disabled, but the options will still get filtered. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  disable_reorder: {\n    doc: 'If set to `true`, reordering of search results will be disabled. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  search_numbers: {\n    doc: 'If set to `true` and `search_in_word_index` is not set, the user will be able to more easily search and filter e.g. bank account numbers. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  search_in_word_index: {\n    doc: 'This gives you the possibility to change the threshold number, which defines from what word on we search \"inside words\". Defaults to `3`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keep_value: {\n    doc: 'Use `true` to not remove the typed value on input blur, if it is invalid. By default, the typed value will disappear / replaced by a selected value from the data list during the input field blur. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keep_selection: {\n    doc: 'Use `true` to not remove selected item on input blur, when the input value is empty. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keep_value_and_selection: {\n    doc: 'Like `keep_value` – but would not reset to the selected value during input field blur. Also, the selected value would still be kept. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  prevent_selection: {\n    doc: 'If set to `true`, no permanent selection will be made. Also, the typed value will not disappear on input blur (like `keep_value`). Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  show_clear_button: {\n    doc: 'If set to `true`, a clear button is shown inside the input field. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  icon: {\n    doc: 'To be included in the autocomplete input.',\n    type: ['string', 'React.Node'],\n    status: 'optional',\n  },\n  icon_size: {\n    doc: 'Change the size of the icon pragmatically.',\n    type: 'string',\n    status: 'optional',\n  },\n  icon_position: {\n    doc: 'Position of the icon inside the autocomplete. Set to `left` or `right`. Defaults to `left`.',\n    type: 'string',\n    status: 'optional',\n  },\n  input_icon: {\n    doc: 'Same as `icon`.',\n    type: ['string', 'React.Node'],\n    status: 'optional',\n  },\n  triangle_position: {\n    doc: 'Position of icon arrow / triangle the drawer. Set to `left` or `right`. Defaults to `left`.',\n    type: 'string',\n    status: 'optional',\n  },\n  size: {\n    doc: 'Define the height of the Autocomplete. Can be set to `small`, `default`, `medium` and `large`. Defaults to `default`.',\n    type: 'string',\n    status: 'optional',\n  },\n  drawer_class: {\n    doc: 'Define a custom class for the internal drawer-list. This makes it possible more easily customize the drawer-list style with styled-components and the `css` style method. Defaults to `null`.',\n    type: 'string',\n    status: 'optional',\n  },\n  show_submit_button: {\n    doc: 'Use `true` to show a Autocomplete button to toggle the [DrawerList](/uilib/components/fragments/drawer-list). Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  align_autocomplete: {\n    doc: 'Use `right` to change the options alignment direction. Defaults to `left`.',\n    type: 'string',\n    status: 'optional',\n  },\n  no_options: {\n    doc: 'Text show in the \"no options\" item. Defaults to `Ingen alternativer`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  aria_live_options: {\n    doc: 'Text read out by screen readers. This way users with screen readers know how many options they got during typing. Defaults to `%s alternativer`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  show_all: {\n    doc: 'Text that lets a user unravel all the available options. Defaults to `Vis alt`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  indicator_label: {\n    doc: 'Text show on indicator \"options\" item. Defaults to `Henter data ...`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  show_options_sr: {\n    doc: 'Only for screen readers. Title of the button to show the suggestions / options. It is always present and when activating, it opens the DrawerList and sets the focus on it. Defaults to `Bla gjennom alternativer`.',\n    type: 'string',\n    status: 'optional',\n  },\n  selected_sr: {\n    doc: 'Only for screen readers (VoiceOver). The label used to announce the selected item. Defaults to `Valgt:`.',\n    type: 'string',\n    status: 'optional',\n  },\n  submit_button_title: {\n    doc: 'Title on submit button. Defaults to `Vis alternativer`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  submit_button_icon: {\n    doc: 'The icon used in the submit button. Defaults to `chevron_down`.',\n    type: ['string', 'React.Element'],\n    status: 'optional',\n  },\n  submit_element: {\n    doc: 'Replace the dropdown / submit button with a custom React element. Defaults to the input SubmitButton `import { SubmitButton } from '@dnb/eufemia/components/input/Input'`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  opened: {\n    doc: 'If set to `true`, the Autocomplete will be rendered initially with a visible and accessible data list / options.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  open_on_focus: {\n    doc: 'Use `true` to auto open the list once the user is entering the input field with the keyboard.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  stretch: {\n    doc: 'If set to `true`, then the autocomplete will be 100% in available `width`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  skip_portal: {\n    doc: 'Set to `true` to disable the React Portal behavior. Defaults to `false`.',\n    type: 'string',\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',\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  label: {\n    doc: 'Prepends the Form Label component. If no ID is provided, a random ID is created.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  label_direction: {\n    doc: 'Use `label_direction=\"vertical\"` to change the label layout direction. Defaults to `horizontal`.',\n    type: 'React.Node',\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  suffix: {\n    doc: 'Text describing the content of the Autocomplete more than the label. You can also send in a React component, so it gets wrapped inside the Autocomplete component.',\n    type: 'React.Node',\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  input_ref: {\n    doc: 'Use a React.Ref to get access to the `input` DOM element.',\n    type: 'React.Ref',\n    status: 'optional',\n  },\n  input_element: {\n    doc: 'Lets you provide a custom React element as the input HTML element.',\n    type: ['string', 'React.Element'],\n    status: 'optional',\n  },\n  '[DrawerList](/uilib/components/fragments/drawer-list/properties)': {\n    doc: 'all DrawerList properties.',\n    type: 'Various',\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\nexport const AutocompleteEvents: PropertiesTableProps = {\n  on_type: {\n    doc: 'Will be called for every key change the users makes. Returns an object with the input `value` inside `{ value, event, attributes }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data)',\n    type: 'function',\n    status: 'optional',\n  },\n  on_focus: {\n    doc: 'Will be called on user generated focus action. Returns an object with the input `value` inside `{ value, event, attributes }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data).',\n    type: 'function',\n    status: 'optional',\n  },\n  on_blur: {\n    doc: 'Will be called on user generated blur action. Returns an object with the input `value` inside `{ value, event, attributes }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data).',\n    type: 'function',\n    status: 'optional',\n  },\n  on_change: {\n    doc: 'Will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, value }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data).',\n    type: 'function',\n    status: 'optional',\n  },\n  on_select: {\n    doc: 'Will be called once the users selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, value, active_item }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data). The \"active_item\" property is the currently selected item by keyboard navigation',\n    type: 'function',\n    status: 'optional',\n  },\n  on_show: {\n    doc: 'Will be called once the user presses the autocomplete. Returns the data item `{ data, attributes }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_hide: {\n    doc: 'Will be called once the user presses the autocomplete again, or clicks somewhere else. Returns the data item `{ data, attributes }`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"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"}
+{"version":3,"file":"AutocompleteDocs.js","names":["autocompleteProperties","mode","doc","type","status","input_value","placeholder","title","disable_filter","disable_highlighting","disable_reorder","search_numbers","search_in_word_index","keep_value","keep_selection","keep_value_and_selection","prevent_selection","show_clear_button","icon","icon_size","icon_position","input_icon","triangle_position","size","drawer_class","show_submit_button","align_autocomplete","no_options","aria_live_options","show_all","indicator_label","show_options_sr","selected_sr","submit_button_title","submit_button_icon","submit_element","opened","open_on_focus","stretch","skip_portal","status_state","status_props","globalStatus","label","label_direction","label_sr_only","suffix","skeleton","input_ref","input_element","AutocompleteEvents","on_type","on_focus","on_blur","on_change","on_select","on_show","on_hide"],"sources":["../../../../src/components/autocomplete/AutocompleteDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const autocompleteProperties: PropertiesTableProps = {\n  mode: {\n    doc: 'If set to `async`, it prevents showing the \"no options\" message during typing / filtering. Defaults to `sync`.',\n    type: 'string',\n    status: 'optional',\n  },\n  input_value: {\n    doc: 'Lets you define a custom input value.',\n    type: 'string',\n    status: 'optional',\n  },\n  placeholder: {\n    doc: 'Use this to define the pre-filled placeholder text in the input. Defaults to `title=\"Skriv og velg\"`.',\n    type: 'string',\n    status: 'optional',\n  },\n  title: {\n    doc: 'Give a title to let the user know what they have to do. Defaults to `Skriv og få alternativer`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  disable_filter: {\n    doc: 'If set to `true`, word highlighting will still be active, but no options will be filtered out. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  disable_highlighting: {\n    doc: 'If set to `true`, word highlighting will be disabled, but the options will still get filtered. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  disable_reorder: {\n    doc: 'If set to `true`, reordering of search results will be disabled. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  search_numbers: {\n    doc: 'If set to `true` and `search_in_word_index` is not set, the user will be able to more easily search and filter e.g. bank account numbers. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  search_in_word_index: {\n    doc: 'This gives you the possibility to change the threshold number, which defines from what word on we search \"inside words\". Defaults to `3`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keep_value: {\n    doc: 'Use `true` to not remove the typed value on input blur, if it is invalid. By default, the typed value will disappear / replaced by a selected value from the data list during the input field blur. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keep_selection: {\n    doc: 'Use `true` to not remove selected item on input blur, when the input value is empty. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keep_value_and_selection: {\n    doc: 'Like `keep_value` – but would not reset to the selected value during input field blur. Also, the selected value would still be kept. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  prevent_selection: {\n    doc: 'If set to `true`, no permanent selection will be made. Also, the typed value will not disappear on input blur (like `keep_value`). Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  show_clear_button: {\n    doc: 'If set to `true`, a clear button is shown inside the input field. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  icon: {\n    doc: 'To be included in the autocomplete input.',\n    type: ['string', 'React.Node'],\n    status: 'optional',\n  },\n  icon_size: {\n    doc: 'Change the size of the icon pragmatically.',\n    type: 'string',\n    status: 'optional',\n  },\n  icon_position: {\n    doc: 'Position of the icon inside the autocomplete. Set to `left` or `right`. Defaults to `left`.',\n    type: 'string',\n    status: 'optional',\n  },\n  input_icon: {\n    doc: 'Same as `icon`.',\n    type: ['string', 'React.Node'],\n    status: 'optional',\n  },\n  triangle_position: {\n    doc: 'Position of icon arrow / triangle the drawer. Set to `left` or `right`. Defaults to `left`.',\n    type: 'string',\n    status: 'optional',\n  },\n  size: {\n    doc: 'Define the height of the Autocomplete. Can be set to `small`, `default`, `medium` and `large`. Defaults to `default`.',\n    type: 'string',\n    status: 'optional',\n  },\n  drawer_class: {\n    doc: 'Define a custom class for the internal drawer-list. This makes it possible more easily customize the drawer-list style with styled-components and the `css` style method. Defaults to `null`.',\n    type: 'string',\n    status: 'optional',\n  },\n  show_submit_button: {\n    doc: 'Use `true` to show a Autocomplete button to toggle the [DrawerList](/uilib/components/fragments/drawer-list). Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  align_autocomplete: {\n    doc: 'Use `right` to change the options alignment direction. Defaults to `left`.',\n    type: 'string',\n    status: 'optional',\n  },\n  no_options: {\n    doc: 'Text show in the \"no options\" item. Defaults to `Ingen alternativer`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  aria_live_options: {\n    doc: 'Text read out by screen readers. This way users with screen readers know how many options they got during typing. Defaults to `%s alternativer`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  show_all: {\n    doc: 'Text that lets a user unravel all the available options. Defaults to `Vis alt`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  indicator_label: {\n    doc: 'Text show on indicator \"options\" item. Defaults to `Henter data ...`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  show_options_sr: {\n    doc: 'Only for screen readers. Title of the button to show the suggestions / options. It is always present and when activating, it opens the DrawerList and sets the focus on it. Defaults to `Bla gjennom alternativer`.',\n    type: 'string',\n    status: 'optional',\n  },\n  selected_sr: {\n    doc: 'Only for screen readers (VoiceOver). The label used to announce the selected item. Defaults to `Valgt:`.',\n    type: 'string',\n    status: 'optional',\n  },\n  submit_button_title: {\n    doc: 'Title on submit button. Defaults to `Vis alternativer`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  submit_button_icon: {\n    doc: 'The icon used in the submit button. Defaults to `chevron_down`.',\n    type: ['string', 'React.Element'],\n    status: 'optional',\n  },\n  submit_element: {\n    doc: 'Replace the dropdown / submit button with a custom React element. Defaults to the input SubmitButton `import { SubmitButton } from '@dnb/eufemia/components/input/Input'`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  opened: {\n    doc: 'If set to `true`, the Autocomplete will be rendered initially with a visible and accessible data list / options.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  open_on_focus: {\n    doc: 'Use `true` to auto open the list once the user is entering the input field with the keyboard.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  stretch: {\n    doc: 'If set to `true`, then the autocomplete will be 100% in available `width`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  skip_portal: {\n    doc: 'Set to `true` to disable the React Portal behavior. Defaults to `false`.',\n    type: 'string',\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',\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  label: {\n    doc: 'Prepends the Form Label component. If no ID is provided, a random ID is created.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  label_direction: {\n    doc: 'Use `label_direction=\"vertical\"` to change the label layout direction. Defaults to `horizontal`.',\n    type: 'React.Node',\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  suffix: {\n    doc: 'Text describing the content of the Autocomplete more than the label. You can also send in a React component, so it gets wrapped inside the Autocomplete component.',\n    type: 'React.Node',\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  input_ref: {\n    doc: 'Use a React.Ref to get access to the `input` DOM element.',\n    type: 'React.Ref',\n    status: 'optional',\n  },\n  input_element: {\n    doc: 'Lets you provide a custom React element as the input HTML element.',\n    type: ['string', 'React.Element'],\n    status: 'optional',\n  },\n  '[DrawerList](/uilib/components/fragments/drawer-list/properties)': {\n    doc: 'all DrawerList properties.',\n    type: 'Various',\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\nexport const AutocompleteEvents: PropertiesTableProps = {\n  on_type: {\n    doc: 'Will be called for every key change the users makes. Returns an object with the input `value` inside `{ value, event, attributes }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data)',\n    type: 'function',\n    status: 'optional',\n  },\n  on_focus: {\n    doc: 'Will be called on user generated focus action. Returns an object with the input `value` inside `{ value, event, attributes }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data).',\n    type: 'function',\n    status: 'optional',\n  },\n  on_blur: {\n    doc: 'Will be called on user generated blur action. Returns an object with the input `value` inside `{ value, event, attributes }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data).',\n    type: 'function',\n    status: 'optional',\n  },\n  on_change: {\n    doc: 'Will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, value }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data).',\n    type: 'function',\n    status: 'optional',\n  },\n  on_select: {\n    doc: 'Will be called once the users focuses or selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, value, active_item }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data). The \"active_item\" property is the currently selected item by keyboard navigation',\n    type: 'function',\n    status: 'optional',\n  },\n  on_show: {\n    doc: 'Will be called once the user presses the autocomplete. Returns the data item `{ data, attributes }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_hide: {\n    doc: 'Will be called once the user presses the autocomplete again, or clicks somewhere else. Returns the data item `{ data, attributes }`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"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"}

package/components/autocomplete/style/themes/dnb-autocomplete-theme-ui.css

@@ -36,14 +36,14 @@
 .dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(1) {
   font-weight: var(--font-weight-basis);
 }
-.dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(n + 2) {
+.dnb-autocomplete__root .dnb-drawer-list__option:not([disabled]) .dnb-drawer-list__option__item:nth-of-type(n + 2) {
   color: var(--color-black-55);
 }
 .dnb-autocomplete__root .dnb-drawer-list__option__item--highlight {
   font-weight: var(--font-weight-bold);
 }
 
-.dnb-autocomplete__root .dnb-drawer-list__option--selected .dnb-drawer-list__option__item:nth-of-type(n + 2) {
+.dnb-autocomplete__root .dnb-drawer-list__option--selected:not([disabled]) .dnb-drawer-list__option__item:nth-of-type(n + 2) {
   color: var(--color-white);
 }
 

package/components/autocomplete/style/themes/dnb-autocomplete-theme-ui.min.css

@@ -1 +1 @@
-.dnb-autocomplete__show-all .dnb-drawer-list__option__inner{color:var(--color-sea-green)}.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__shell,.dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover~.dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell{--border-color:var(--color-sea-green);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__submit-button__button,.dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover~.dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button{background-color:var(--color-sea-green);border-radius:0;box-shadow:none;color:var(--color-white)}.dnb-autocomplete--show-indicator .dnb-autocomplete__input .dnb-input__icon{color:transparent}.dnb-autocomplete__input,.dnb-autocomplete__shell{border-radius:var(--autocomplete-border-radius)}.dnb-autocomplete__status--error:not(.dnb-autocomplete--opened) .dnb-form-label:hover~.dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell{--border-color:var(--color-fire-red);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-autocomplete__root .dnb-drawer-list__option__item:first-of-type{font-weight:var(--font-weight-basis)}.dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(n+2){color:var(--color-black-55)}.dnb-autocomplete__root .dnb-drawer-list__option__item--highlight{font-weight:var(--font-weight-bold)}.dnb-autocomplete__root .dnb-drawer-list__option--selected .dnb-anchor,.dnb-autocomplete__root .dnb-drawer-list__option--selected .dnb-drawer-list__option__item:nth-of-type(n+2){color:var(--color-white)}
+.dnb-autocomplete__show-all .dnb-drawer-list__option__inner{color:var(--color-sea-green)}.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__shell,.dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover~.dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell{--border-color:var(--color-sea-green);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__submit-button__button,.dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover~.dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button{background-color:var(--color-sea-green);border-radius:0;box-shadow:none;color:var(--color-white)}.dnb-autocomplete--show-indicator .dnb-autocomplete__input .dnb-input__icon{color:transparent}.dnb-autocomplete__input,.dnb-autocomplete__shell{border-radius:var(--autocomplete-border-radius)}.dnb-autocomplete__status--error:not(.dnb-autocomplete--opened) .dnb-form-label:hover~.dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell{--border-color:var(--color-fire-red);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-autocomplete__root .dnb-drawer-list__option__item:first-of-type{font-weight:var(--font-weight-basis)}.dnb-autocomplete__root .dnb-drawer-list__option:not([disabled]) .dnb-drawer-list__option__item:nth-of-type(n+2){color:var(--color-black-55)}.dnb-autocomplete__root .dnb-drawer-list__option__item--highlight{font-weight:var(--font-weight-bold)}.dnb-autocomplete__root .dnb-drawer-list__option--selected .dnb-anchor,.dnb-autocomplete__root .dnb-drawer-list__option--selected:not([disabled]) .dnb-drawer-list__option__item:nth-of-type(n+2){color:var(--color-white)}

package/components/autocomplete/style/themes/dnb-autocomplete-theme-ui.scss

@@ -53,7 +53,7 @@
     font-weight: var(--font-weight-basis);
   }
 
-  &__item:nth-of-type(n + 2) {
+  &:not([disabled]) .dnb-drawer-list__option__item:nth-of-type(n + 2) {
     color: var(--color-black-55);
   }
 
@@ -63,7 +63,7 @@
 }
 
 .dnb-autocomplete__root
-  .dnb-drawer-list__option--selected
+  .dnb-drawer-list__option--selected:not([disabled])
   .dnb-drawer-list__option__item:nth-of-type(n + 2) {
   color: var(--color-white);
 }

package/components/avatar/style/themes/dnb-avatar-theme-sbanken.css

@@ -22,11 +22,11 @@
 }
 .dnb-avatar--size-large {
   font-weight: var(--sb-font-weight-basis);
-  font-family: var(--sb-font-family-headings);
+  font-family: var(--font-family-heading);
 }
 .dnb-avatar--size-x-large {
   font-weight: var(--sb-font-weight-basis);
-  font-family: var(--sb-font-family-headings);
+  font-family: var(--font-family-heading);
 }
 .dnb-avatar__group {
   --avatar-font-size-left--medium: var(--font-size-basis);

package/components/avatar/style/themes/dnb-avatar-theme-sbanken.min.css

@@ -1 +1 @@
-.dnb-avatar{--avatar-font-size--large:var(--font-size-x-large);--avatar-font-size--x-large:var(--font-size-x-large);color:var(--sb-color-white)}.dnb-avatar--primary{background-color:var(--sb-color-purple-alternative)}.dnb-avatar--secondary{background-color:var(--sb-color-violet-light)}.dnb-avatar--tertiary{background-color:var(--sb-color-violet-light-2);color:var(--sb-color-purple-alternative)}.dnb-avatar--size-large,.dnb-avatar--size-x-large{font-family:var(--sb-font-family-headings);font-weight:var(--sb-font-weight-basis)}.dnb-avatar__group{--avatar-font-size-left--medium:var(--font-size-basis);--avatar-font-size-left--large:var(--sb-font-size-medium--plus);--avatar-font-size-left--x-large:var(--sb-font-size-medium--plus)}
+.dnb-avatar{--avatar-font-size--large:var(--font-size-x-large);--avatar-font-size--x-large:var(--font-size-x-large);color:var(--sb-color-white)}.dnb-avatar--primary{background-color:var(--sb-color-purple-alternative)}.dnb-avatar--secondary{background-color:var(--sb-color-violet-light)}.dnb-avatar--tertiary{background-color:var(--sb-color-violet-light-2);color:var(--sb-color-purple-alternative)}.dnb-avatar--size-large,.dnb-avatar--size-x-large{font-family:var(--font-family-heading);font-weight:var(--sb-font-weight-basis)}.dnb-avatar__group{--avatar-font-size-left--medium:var(--font-size-basis);--avatar-font-size-left--large:var(--sb-font-size-medium--plus);--avatar-font-size-left--x-large:var(--sb-font-size-medium--plus)}

package/components/avatar/style/themes/dnb-avatar-theme-sbanken.scss

@@ -26,12 +26,12 @@
 
   &--size-large {
     font-weight: var(--sb-font-weight-basis);
-    font-family: var(--sb-font-family-headings);
+    font-family: var(--font-family-heading);
   }
 
   &--size-x-large {
     font-weight: var(--sb-font-weight-basis);
-    font-family: var(--sb-font-family-headings);
+    font-family: var(--font-family-heading);
   }
 
   &__group {

package/components/button/style/themes/button-mixins.scss

@@ -1,3 +1,5 @@
+@import '../../../../style/core/utilities.scss';
+
 /*
 * Button mixins
 *

package/components/button/style/themes/dnb-button-theme-eiendom.css

@@ -10,6 +10,8 @@
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -17,6 +19,8 @@
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */

package/components/button/style/themes/dnb-button-theme-sbanken.css

@@ -6,6 +6,8 @@
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -13,6 +15,8 @@
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */

package/components/button/style/themes/dnb-button-theme-ui.css

@@ -6,6 +6,8 @@
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -13,6 +15,8 @@
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */

package/components/card/Card.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { SectionProps } from '../section/Section';
 import type { BasicProps as FlexContainerProps } from '../flex/Container';
 import type { BasicProps as FlexItemProps } from '../flex/Item';
 import type { SpaceProps } from '../Space';
@@ -15,7 +16,7 @@ export type Props = {
      * Define if the Card should get the same background color as the outline border
      */
     filled?: boolean;
-} & FlexContainerProps & FlexItemProps & {
+} & FlexContainerProps & Pick<SectionProps, 'outset'> & FlexItemProps & {
     stack?: boolean;
 } & SpaceProps & Omit<React.HTMLProps<HTMLElement>, 'ref' | 'wrap' | 'size' | 'title'>;
 declare function Card(props: Props): import("react/jsx-runtime").JSX.Element;

package/components/card/Card.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "stack", "direction", "gap", "spacing", "innerSpace", "alignSelf", "align", "divider", "rowGap", "responsive", "filled", "title", "children"];
+const _excluded = ["className", "stack", "direction", "gap", "spacing", "innerSpace", "alignSelf", "align", "divider", "rowGap", "responsive", "filled", "outset", "title", "children"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useContext } from 'react';
@@ -29,6 +29,7 @@ function Card(props) {
       rowGap,
       responsive = !(nestedContext !== null && nestedContext !== void 0 && nestedContext.isNested),
       filled,
+      outset,
       title,
       children
     } = props,
@@ -57,6 +58,7 @@ function Card(props) {
   const params = SectionParams(_objectSpread(_objectSpread({
     className: classnames('dnb-card', className, responsive && 'dnb-card--responsive', filled && 'dnb-card--filled'),
     breakout: responsive ? trueWhenSmall : false,
+    outset: nestedContext !== null && nestedContext !== void 0 && nestedContext.isNested ? false : outset === true ? falseWhenSmall : outset,
     roundedCorner: responsive ? falseWhenSmall : true,
     outline: '--outline-card-color',
     innerSpace: innerSpace !== null && innerSpace !== void 0 ? innerSpace : {

package/components/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["React","useContext","classnames","Flex","SectionParams","combineLabelledBy","CardContext","Space","useId","Card","props","nestedContext","className","stack","direction","gap","spacing","innerSpace","alignSelf","align","divider","rowGap","responsive","isNested","filled","title","children","rest","_objectWithoutProperties","_excluded","titleId","falseWhenSmall","small","medium","large","trueWhenSmall","basisSpace","top","right","bottom","left","smallSpace","_objectSpread","params","breakout","roundedCorner","outline","createElement","Item","_extends","element","Provider","value","Container","wrap","id","_supportsSpacingProps"],"sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport Flex from '../flex/Flex'\nimport { SectionParams, SectionProps } from '../section/Section'\nimport { combineLabelledBy } from '../../shared/component-helper'\nimport CardContext from './CardContext'\nimport Space from '../Space'\nimport useId from '../../shared/helpers/useId'\n\nimport type { BasicProps as FlexContainerProps } from '../flex/Container'\nimport type { BasicProps as FlexItemProps } from '../flex/Item'\nimport type { SpaceTypeMedia } from '../../shared/types'\nimport type { SpaceProps } from '../Space'\n\nexport type Props = {\n  /**\n   * Define a title that appears on top of the Card\n   */\n  title?: React.ReactNode\n\n  /**\n   * Define if the Card should behave responsive. Defaults to `true`\n   */\n  responsive?: boolean\n\n  /**\n   * Define if the Card should get the same background color as the outline border\n   */\n  filled?: boolean\n} & FlexContainerProps &\n  FlexItemProps & {\n    stack?: boolean\n  } & SpaceProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref' | 'wrap' | 'size' | 'title'>\n\nfunction Card(props: Props) {\n  const nestedContext = useContext(CardContext)\n\n  const {\n    className,\n    stack,\n    direction,\n    gap,\n    spacing,\n    innerSpace,\n    alignSelf = 'stretch',\n    align,\n    divider = 'space',\n    rowGap,\n    responsive = !nestedContext?.isNested,\n    filled,\n    title,\n    children,\n    ...rest\n  } = props\n\n  const titleId = useId()\n  const falseWhenSmall = { small: false, medium: true, large: true }\n  const trueWhenSmall = { small: true, medium: false, large: false }\n  const basisSpace = {\n    top: 'medium',\n    right: 'medium',\n    bottom: 'large',\n    left: 'medium',\n  }\n  const smallSpace = responsive\n    ? {\n        ...basisSpace,\n        right: 0,\n        left: 0,\n      }\n    : basisSpace\n\n  const params = SectionParams({\n    className: classnames(\n      'dnb-card',\n      className,\n      responsive && 'dnb-card--responsive',\n      filled && 'dnb-card--filled'\n    ),\n    breakout: responsive ? trueWhenSmall : false,\n    roundedCorner: responsive ? falseWhenSmall : true,\n    outline: '--outline-card-color',\n    innerSpace:\n      innerSpace ??\n      ({\n        small: smallSpace,\n        medium: basisSpace,\n        large: basisSpace,\n      } as SpaceTypeMedia),\n    ...(rest as SectionProps),\n    'aria-labelledby': combineLabelledBy(rest, title && titleId),\n  })\n\n  return (\n    <Flex.Item alignSelf={alignSelf} element=\"section\" {...params}>\n      <CardContext.Provider value={{ isNested: true }}>\n        <Flex.Container\n          direction={direction ?? 'vertical'}\n          divider={divider}\n          alignSelf={alignSelf}\n          align={stack ? 'stretch' : align}\n          wrap={!stack}\n          gap={stack ? 'medium' : (gap ?? spacing) || false}\n          rowGap={rowGap || false}\n        >\n          {title && (\n            <Space id={titleId} className=\"dnb-card__title\">\n              {title}\n            </Space>\n          )}\n          {children}\n        </Flex.Container>\n      </CardContext.Provider>\n    </Flex.Item>\n  )\n}\n\nCard._supportsSpacingProps = true\n\nexport default Card\n"],"mappings":"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"}
+{"version":3,"file":"Card.js","names":["React","useContext","classnames","Flex","SectionParams","combineLabelledBy","CardContext","Space","useId","Card","props","nestedContext","className","stack","direction","gap","spacing","innerSpace","alignSelf","align","divider","rowGap","responsive","isNested","filled","outset","title","children","rest","_objectWithoutProperties","_excluded","titleId","falseWhenSmall","small","medium","large","trueWhenSmall","basisSpace","top","right","bottom","left","smallSpace","_objectSpread","params","breakout","roundedCorner","outline","createElement","Item","_extends","element","Provider","value","Container","wrap","id","_supportsSpacingProps"],"sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport Flex from '../flex/Flex'\nimport { SectionParams, SectionProps } from '../section/Section'\nimport { combineLabelledBy } from '../../shared/component-helper'\nimport CardContext from './CardContext'\nimport Space from '../Space'\nimport useId from '../../shared/helpers/useId'\n\nimport type { BasicProps as FlexContainerProps } from '../flex/Container'\nimport type { BasicProps as FlexItemProps } from '../flex/Item'\nimport type { SpaceTypeMedia } from '../../shared/types'\nimport type { SpaceProps } from '../Space'\n\nexport type Props = {\n  /**\n   * Define a title that appears on top of the Card\n   */\n  title?: React.ReactNode\n\n  /**\n   * Define if the Card should behave responsive. Defaults to `true`\n   */\n  responsive?: boolean\n\n  /**\n   * Define if the Card should get the same background color as the outline border\n   */\n  filled?: boolean\n} & FlexContainerProps &\n  Pick<SectionProps, 'outset'> &\n  FlexItemProps & {\n    stack?: boolean\n  } & SpaceProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref' | 'wrap' | 'size' | 'title'>\n\nfunction Card(props: Props) {\n  const nestedContext = useContext(CardContext)\n\n  const {\n    className,\n    stack,\n    direction,\n    gap,\n    spacing,\n    innerSpace,\n    alignSelf = 'stretch',\n    align,\n    divider = 'space',\n    rowGap,\n    responsive = !nestedContext?.isNested,\n    filled,\n    outset,\n    title,\n    children,\n    ...rest\n  } = props\n\n  const titleId = useId()\n  const falseWhenSmall = { small: false, medium: true, large: true }\n  const trueWhenSmall = { small: true, medium: false, large: false }\n  const basisSpace = {\n    top: 'medium',\n    right: 'medium',\n    bottom: 'large',\n    left: 'medium',\n  }\n  const smallSpace = responsive\n    ? {\n        ...basisSpace,\n        right: 0,\n        left: 0,\n      }\n    : basisSpace\n\n  const params = SectionParams({\n    className: classnames(\n      'dnb-card',\n      className,\n      responsive && 'dnb-card--responsive',\n      filled && 'dnb-card--filled'\n    ),\n    breakout: responsive ? trueWhenSmall : false,\n    outset: nestedContext?.isNested\n      ? false\n      : outset === true\n      ? falseWhenSmall\n      : outset,\n    roundedCorner: responsive ? falseWhenSmall : true,\n    outline: '--outline-card-color',\n    innerSpace:\n      innerSpace ??\n      ({\n        small: smallSpace,\n        medium: basisSpace,\n        large: basisSpace,\n      } as SpaceTypeMedia),\n    ...(rest as SectionProps),\n    'aria-labelledby': combineLabelledBy(rest, title && titleId),\n  })\n\n  return (\n    <Flex.Item alignSelf={alignSelf} element=\"section\" {...params}>\n      <CardContext.Provider value={{ isNested: true }}>\n        <Flex.Container\n          direction={direction ?? 'vertical'}\n          divider={divider}\n          alignSelf={alignSelf}\n          align={stack ? 'stretch' : align}\n          wrap={!stack}\n          gap={stack ? 'medium' : (gap ?? spacing) || false}\n          rowGap={rowGap || false}\n        >\n          {title && (\n            <Space id={titleId} className=\"dnb-card__title\">\n              {title}\n            </Space>\n          )}\n          {children}\n        </Flex.Container>\n      </CardContext.Provider>\n    </Flex.Item>\n  )\n}\n\nCard._supportsSpacingProps = true\n\nexport default Card\n"],"mappings":"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"}

package/components/card/CardDocs.js

@@ -1,4 +1,9 @@
 export const CardProperties = {
+  outset: {
+    doc: 'True to break out negatively on larger screens. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
   stack: {
     doc: 'True to stack the sub components with lines between. The `spacing` will default to `medium`.',
     type: 'boolean',

package/components/card/CardDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardDocs.js","names":["CardProperties","stack","doc","type","status","direction","alignSelf","title","responsive","filled","element","children"],"sources":["../../../../src/components/card/CardDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const CardProperties: PropertiesTableProps = {\n  stack: {\n    doc: 'True to stack the sub components with lines between. The `spacing` will default to `medium`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  direction: {\n    doc: 'Defaults to `vertical`.',\n    type: 'string',\n    status: 'optional',\n  },\n  alignSelf: {\n    doc: 'Defaults to `stretch`.',\n    type: 'string',\n    status: 'optional',\n  },\n  title: {\n    doc: 'Define a title that appears on top of the Card.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  responsive: {\n    doc: 'Define if the card should behave responsive. Defaults to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  filled: {\n    doc: 'Define if the Card should get the same background color as the outline border.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Define the type of element. Defaults to `section`.',\n    type: 'React.Element',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n  '[Flex.Container](/uilib/layout/flex/container/properties)': {\n    doc: 'Flex.Container properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n  '[Flex.Item](/uilib/layout/flex/item/properties)': {\n    doc: 'Flex.Item properties.',\n    type: 'Various',\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,cAAoC,GAAG;EAClDC,KAAK,EAAE;IACLC,GAAG,EAAE,8FAA8F;IACnGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,SAAS,EAAE;IACTH,GAAG,EAAE,yBAAyB;IAC9BC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,SAAS,EAAE;IACTJ,GAAG,EAAE,wBAAwB;IAC7BC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,KAAK,EAAE;IACLL,GAAG,EAAE,iDAAiD;IACtDC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDI,UAAU,EAAE;IACVN,GAAG,EAAE,kEAAkE;IACvEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDK,MAAM,EAAE;IACNP,GAAG,EAAE,gFAAgF;IACrFC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,OAAO,EAAE;IACPR,GAAG,EAAE,oDAAoD;IACzDC,IAAI,EAAE,eAAe;IACrBC,MAAM,EAAE;EACV,CAAC;EACDO,QAAQ,EAAE;IACRT,GAAG,EAAE,WAAW;IAChBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACD,2DAA2D,EAAE;IAC3DF,GAAG,EAAE,4BAA4B;IACjCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,iDAAiD,EAAE;IACjDF,GAAG,EAAE,uBAAuB;IAC5BC,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"}
+{"version":3,"file":"CardDocs.js","names":["CardProperties","outset","doc","type","status","stack","direction","alignSelf","title","responsive","filled","element","children"],"sources":["../../../../src/components/card/CardDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const CardProperties: PropertiesTableProps = {\n  outset: {\n    doc: 'True to break out negatively on larger screens. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  stack: {\n    doc: 'True to stack the sub components with lines between. The `spacing` will default to `medium`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  direction: {\n    doc: 'Defaults to `vertical`.',\n    type: 'string',\n    status: 'optional',\n  },\n  alignSelf: {\n    doc: 'Defaults to `stretch`.',\n    type: 'string',\n    status: 'optional',\n  },\n  title: {\n    doc: 'Define a title that appears on top of the Card.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  responsive: {\n    doc: 'Define if the card should behave responsive. Defaults to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  filled: {\n    doc: 'Define if the Card should get the same background color as the outline border.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Define the type of element. Defaults to `section`.',\n    type: 'React.Element',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n  '[Flex.Container](/uilib/layout/flex/container/properties)': {\n    doc: 'Flex.Container properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n  '[Flex.Item](/uilib/layout/flex/item/properties)': {\n    doc: 'Flex.Item properties.',\n    type: 'Various',\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,cAAoC,GAAG;EAClDC,MAAM,EAAE;IACNC,GAAG,EAAE,sEAAsE;IAC3EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,8FAA8F;IACnGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,SAAS,EAAE;IACTJ,GAAG,EAAE,yBAAyB;IAC9BC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,SAAS,EAAE;IACTL,GAAG,EAAE,wBAAwB;IAC7BC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,KAAK,EAAE;IACLN,GAAG,EAAE,iDAAiD;IACtDC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDK,UAAU,EAAE;IACVP,GAAG,EAAE,kEAAkE;IACvEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,MAAM,EAAE;IACNR,GAAG,EAAE,gFAAgF;IACrFC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDO,OAAO,EAAE;IACPT,GAAG,EAAE,oDAAoD;IACzDC,IAAI,EAAE,eAAe;IACrBC,MAAM,EAAE;EACV,CAAC;EACDQ,QAAQ,EAAE;IACRV,GAAG,EAAE,WAAW;IAChBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACD,2DAA2D,EAAE;IAC3DF,GAAG,EAAE,4BAA4B;IACjCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,iDAAiD,EAAE;IACjDF,GAAG,EAAE,uBAAuB;IAC5BC,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/card/style/dnb-card.css

@@ -83,6 +83,27 @@
 .dnb-card > .dnb-flex-container--align-stretch > .dnb-button {
   align-self: flex-start;
 }
-.dnb-card .dnb-card {
-  --outline-width: 0.125rem;
+.dnb-card[style*="--outset"].dnb-space[style]:not(.dnb-card) {
+  padding-left: calc(var(--padding-left) * (1 - var(--outset)));
+  padding-right: calc(var(--padding-right) * (1 - var(--outset)));
+}
+.dnb-card[style*="--outset"].dnb-card > .dnb-flex-container {
+  margin-left: calc(var(--padding-left, var(--spacing-medium)) * -1 * var(--outset));
+  margin-right: calc(var(--padding-right, var(--spacing-medium)) * -1 * var(--outset));
+}
+
+.dnb-card--auto-indent:has(+ .dnb-card,
++ * + .dnb-card,
++ * + * + .dnb-card,
++ .dnb-help-button__content + .dnb-section + .dnb-card):not([class*=space__bottom]) {
+  margin-bottom: var(--spacing-small);
+}
+
+@media screen and (min-width: 40.00625em) {
+  .dnb-card--auto-indent:has(+ .dnb-card:not([style*="--outset"]),
+  + * + .dnb-card:not([style*="--outset"]),
+  + * + * + .dnb-card:not([style*="--outset"]),
+  + .dnb-help-button__content + .dnb-section + .dnb-card:not([style*="--outset"])):not([class*=space__left]) {
+    margin-left: var(--spacing-medium);
+  }
 }

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

@@ -1 +1 @@
-.dnb-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-card+.dnb-card__heading{margin-top:var(--spacing-small)}.dnb-card__title{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);padding-bottom:1rem}.dnb-card:not([style*="--space-"]) .dnb-card__title{padding:1rem}.dnb-card.dnb-section{--outline-color:var(--card-outline-color);--outline-width:var(--card-outline-width);--background-color:var(--card-background-color);background-color:var(--background-color)}.dnb-card .dnb-section{z-index:1}@media screen and (min-width:40.00625em){.dnb-card{--nested-space-l:calc(var(--padding-left, 0px)*-1);--nested-space-r:calc(var(--padding-right, 0px)*-1)}.dnb-card .dnb-section:after{--left:var(--nested-space-l);--width:calc(100% - var(--nested-space-r)*2)}}.dnb-card--filled.dnb-card.dnb-section{--background-color:var(--outline-color)}@media screen and (max-width:40em){.dnb-card--responsive.dnb-section:before{--outline:99vw 0 0 0 var(--background-color),198vw 0 0 0 var(--background-color),297vw 0 0 0 var(--background-color),396vw 0 0 0 var(--background-color),0 var(--outline-width) 0 0 var(--outline-color),99vw var(--outline-width) 0 0 var(--outline-color),0 calc(var(--outline-width)*-1) 0 0 var(--outline-color),99vw calc(var(--outline-width)*-1) 0 0 var(--outline-color),198vw var(--outline-width) 0 0 var(--outline-color),198vw calc(var(--outline-width)*-1) 0 0 var(--outline-color);left:var(--left)}.dnb-card+.dnb-card--responsive:not([class*=space__top]){background:linear-gradient(to left,var(--background-color),var(--background-color)) no-repeat 0 var(--outline-width)}.dnb-card+.dnb-card--responsive:not([class*=space__top]):before{top:var(--outline-width)}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive{margin-top:0}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive:before{top:var(--outline-width);z-index:0}}.dnb-card .dnb-flex-container:has(>.dnb-card__title+.dnb-scroll-view){align-items:stretch;flex-wrap:nowrap}.dnb-card--filled .dnb-scroll-view{clip-path:inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner))}.dnb-card>.dnb-flex-container>.dnb-space:has(>.dnb-scroll-view){width:100%}.dnb-card>.dnb-flex-container--align-stretch>.dnb-button{align-self:flex-start}.dnb-card .dnb-card{--outline-width:0.125rem}
+.dnb-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-card+.dnb-card__heading{margin-top:var(--spacing-small)}.dnb-card__title{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);padding-bottom:1rem}.dnb-card:not([style*="--space-"]) .dnb-card__title{padding:1rem}.dnb-card.dnb-section{--outline-color:var(--card-outline-color);--outline-width:var(--card-outline-width);--background-color:var(--card-background-color);background-color:var(--background-color)}.dnb-card .dnb-section{z-index:1}@media screen and (min-width:40.00625em){.dnb-card{--nested-space-l:calc(var(--padding-left, 0px)*-1);--nested-space-r:calc(var(--padding-right, 0px)*-1)}.dnb-card .dnb-section:after{--left:var(--nested-space-l);--width:calc(100% - var(--nested-space-r)*2)}}.dnb-card--filled.dnb-card.dnb-section{--background-color:var(--outline-color)}@media screen and (max-width:40em){.dnb-card--responsive.dnb-section:before{--outline:99vw 0 0 0 var(--background-color),198vw 0 0 0 var(--background-color),297vw 0 0 0 var(--background-color),396vw 0 0 0 var(--background-color),0 var(--outline-width) 0 0 var(--outline-color),99vw var(--outline-width) 0 0 var(--outline-color),0 calc(var(--outline-width)*-1) 0 0 var(--outline-color),99vw calc(var(--outline-width)*-1) 0 0 var(--outline-color),198vw var(--outline-width) 0 0 var(--outline-color),198vw calc(var(--outline-width)*-1) 0 0 var(--outline-color);left:var(--left)}.dnb-card+.dnb-card--responsive:not([class*=space__top]){background:linear-gradient(to left,var(--background-color),var(--background-color)) no-repeat 0 var(--outline-width)}.dnb-card+.dnb-card--responsive:not([class*=space__top]):before{top:var(--outline-width)}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive{margin-top:0}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive:before{top:var(--outline-width);z-index:0}}.dnb-card .dnb-flex-container:has(>.dnb-card__title+.dnb-scroll-view){align-items:stretch;flex-wrap:nowrap}.dnb-card--filled .dnb-scroll-view{clip-path:inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner))}.dnb-card>.dnb-flex-container>.dnb-space:has(>.dnb-scroll-view){width:100%}.dnb-card>.dnb-flex-container--align-stretch>.dnb-button{align-self:flex-start}.dnb-card[style*="--outset"].dnb-space[style]:not(.dnb-card){padding-left:calc(var(--padding-left)*(1 - var(--outset)));padding-right:calc(var(--padding-right)*(1 - var(--outset)))}.dnb-card[style*="--outset"].dnb-card>.dnb-flex-container{margin-left:calc(var(--padding-left, var(--spacing-medium))*-1*var(--outset));margin-right:calc(var(--padding-right, var(--spacing-medium))*-1*var(--outset))}.dnb-card--auto-indent:has(+.dnb-card,+*+.dnb-card,+*+*+.dnb-card,+.dnb-help-button__content+.dnb-section+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}@media screen and (min-width:40.00625em){.dnb-card--auto-indent:has(+.dnb-card:not([style*="--outset"]),+*+.dnb-card:not([style*="--outset"]),+*+*+.dnb-card:not([style*="--outset"]),+.dnb-help-button__content+.dnb-section+.dnb-card:not([style*="--outset"])):not([class*=space__left]){margin-left:var(--spacing-medium)}}

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

@@ -114,8 +114,43 @@
     align-self: flex-start;
   }
 
-  // Nested Cards
-  & .dnb-card {
-    --outline-width: 0.125rem;
+  &[style*='--outset'] {
+    &.dnb-space[style]:not(.dnb-card) {
+      padding-left: calc(var(--padding-left) * calc(1 - var(--outset)));
+      padding-right: calc(var(--padding-right) * calc(1 - var(--outset)));
+    }
+    &.dnb-card > .dnb-flex-container {
+      margin-left: calc(
+        var(--padding-left, var(--spacing-medium)) * -1 * var(--outset)
+      );
+      margin-right: calc(
+        var(--padding-right, var(--spacing-medium)) * -1 * var(--outset)
+      );
+    }
+  }
+}
+
+.dnb-card--auto-indent:has(
+  + .dnb-card,
+  + * + .dnb-card,/* e.g. one paragraph */
+  + * + * + .dnb-card,/* e.g. two paragraphs */
+  + .dnb-help-button__content + .dnb-section + .dnb-card
+) {
+  &:not([class*='space__bottom']) {
+    margin-bottom: var(--spacing-small);
+  }
+}
+
+// Deprecated – can be removed in v11 (its handled by the outset prop)
+.dnb-card--auto-indent:has(
+  + .dnb-card:not([style*='--outset']),
+  + * + .dnb-card:not([style*='--outset']),/* e.g. one paragraph */
+  + * + * + .dnb-card:not([style*='--outset']),/* e.g. two paragraphs */
+  + .dnb-help-button__content + .dnb-section + .dnb-card:not([style*='--outset'])
+) {
+  &:not([class*='space__left']) {
+    @include allAbove(small) {
+      margin-left: var(--spacing-medium);
+    }
   }
 }

package/components/card/style/themes/dnb-card-theme-ui.css

@@ -1,8 +1,9 @@
-.dnb-card {
+:root {
   --card-outline-color: var(--border-color, var(--color-lavender));
   --card-outline-width: 0.25rem;
   --card-background-color: var(--color-white);
 }
+
 .dnb-card .dnb-card {
   --card-outline-color: var(--color-black-8);
   --outline-width: 0.0625rem;

package/components/card/style/themes/dnb-card-theme-ui.min.css

@@ -1 +1 @@
-.dnb-card{--card-outline-color:var(--border-color,var(--color-lavender));--card-outline-width:0.25rem;--card-background-color:var(--color-white)}.dnb-card .dnb-card{--card-outline-color:var(--color-black-8);--outline-width:0.0625rem;--rounded-corner:0.375rem}
+:root{--card-outline-color:var(--border-color,var(--color-lavender));--card-outline-width:0.25rem;--card-background-color:var(--color-white)}.dnb-card .dnb-card{--card-outline-color:var(--color-black-8);--outline-width:0.0625rem;--rounded-corner:0.375rem}

package/components/card/style/themes/dnb-card-theme-ui.scss

@@ -1,8 +1,10 @@
-.dnb-card {
+:root {
   --card-outline-color: var(--border-color, var(--color-lavender));
   --card-outline-width: 0.25rem;
   --card-background-color: var(--color-white);
+}
 
+.dnb-card {
   // Nested Cards
   & .dnb-card {
     --card-outline-color: var(--color-black-8);