@scania/tegel 0.0.4 → 0.0.6

package/dist/collection/components/button/button-webcomponent.stories.js

@@ -23,17 +23,20 @@ export default {
     ],
   },
   argTypes: {
-    text: {
-      name: 'Text',
-      description: 'The text to be displayed on the button',
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
       control: {
-        type: 'text',
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
       },
-      if: { arg: 'onlyIcon', truthy: false },
     },
     btnType: {
       name: 'Type',
-      description: 'Four different button types to help the user to distinguish the level of importance of the task they represent',
+      description: 'Four different button types to help the user to distinguish the level of importance of the task they represent.',
       control: {
         type: 'radio',
       },
@@ -44,6 +47,7 @@ export default {
     },
     size: {
       name: 'Size',
+      description: 'Sets the size of the button.',
       control: {
         type: 'radio',
       },
@@ -51,39 +55,29 @@ export default {
       table: {
         defaultValue: { summary: 'lg' },
       },
-      description: 'Size of the button',
     },
-    modeVariant: {
-      name: 'Mode variant',
+    text: {
+      name: 'Text',
+      description: 'Sets the text to be displayed on the button.',
       control: {
-        type: 'radio',
-      },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
-      description: 'Button mode variant.',
-      table: {
-        defaultValue: { summary: 'Inherit from parent' },
+        type: 'text',
       },
+      if: { arg: 'onlyIcon', truthy: false },
     },
     fullbleed: {
       name: 'Fullbleed',
-      type: 'boolean',
-      description: 'Fluid width in certain components-old',
-      table: {
-        defaultValue: { summary: false },
+      description: 'Sets a fluid width on the button.',
+      control: {
+        type: 'boolean',
       },
-      if: { arg: 'onlyIcon', truthy: false },
-    },
-    disabled: {
-      name: 'Disabled',
-      type: 'boolean',
-      description: 'Choose to disable the button',
       table: {
         defaultValue: { summary: false },
       },
+      if: { arg: 'onlyIcon', truthy: false },
     },
     onlyIcon: {
       name: 'Only Icon',
-      description: 'Displays only the icon and excludes any text from the button',
+      description: 'Displays only the icon and excludes any text from the button.',
       control: {
         type: 'boolean',
       },
@@ -94,7 +88,7 @@ export default {
     },
     icon: {
       name: 'Icon',
-      description: 'Icon to display on the button. Choose "none" to exclude the icon.',
+      description: 'Sets icon to be displayed on the button. Choose "none" to exclude the icon.',
       control: {
         type: 'select',
       },
@@ -103,27 +97,37 @@ export default {
     },
     iconType: {
       name: 'Icon type',
-      description: 'Native/Web Component',
+      description: 'Switch between showing a native or a web component icon.',
       control: {
         type: 'radio',
       },
       options: ['Native', 'Web Component'],
       if: { arg: 'size', neq: 'Extra small' },
     },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the button.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
   },
   args: {
-    text: 'Button',
+    modeVariant: 'Inherit from parent',
     btnType: 'Primary',
     size: 'Large',
-    modeVariant: 'Primary',
+    text: 'Button',
     fullbleed: false,
-    disabled: false,
     onlyIcon: false,
     icon: 'none',
     iconType: 'Web Component',
+    disabled: false,
   },
 };
-const WebComponentTemplate = ({ onlyIcon, size, modeVariant, btnType, fullbleed, disabled, icon, iconType, text = 'Button', }) => {
+const WebComponentTemplate = ({ modeVariant, btnType, size, text = 'Button', fullbleed, onlyIcon, icon, iconType, disabled, }) => {
   const btnTypeLookUp = {
     Primary: 'primary',
     Secondary: 'secondary',
@@ -156,7 +160,6 @@ const WebComponentTemplate = ({ onlyIcon, size, modeVariant, btnType, fullbleed,
   <div class="demo-wrapper">
   <sdds-button type="${btnTypeLookUp[btnType]}" size="${sizeLookUp[size]}" ${disabled ? 'disabled' : ''} ${fullbleed ? 'fullbleed' : ''}
     ${!onlyIcon ? `text="${text}"` : ''}
-    text="${onlyIcon ? '' : text}" 
     ${modeVariant !== 'Inherit from parent'
     ? `mode-variant="${modeVariantLookup[modeVariant]}"`
     : ''}

package/dist/collection/components/button/button-webcomponent.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-webcomponent.stories.js","sourceRoot":"","sources":["../../../src/components/button/button-webcomponent.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport { iconsNames } from '../icon/iconsArray';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    notes: readme,\n    layout: 'padded',\n    chromatic: {\n      disableSnapshot: false, // enables snapshotting for the component\n    },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    text: {\n      name: 'Text',\n      description: 'The text to be displayed on the button',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'onlyIcon', truthy: false },\n    },\n    btnType: {\n      name: 'Type',\n      description:\n        'Four different button types to help the user to distinguish the level of importance of the task they represent',\n      control: {\n        type: 'radio',\n      },\n      options: ['Primary', 'Secondary', 'Ghost', 'Danger'],\n      table: {\n        defaultValue: { summary: 'primary' },\n      },\n    },\n    size: {\n      name: 'Size',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small', 'Extra small'],\n      table: {\n        defaultValue: { summary: 'lg' },\n      },\n      description: 'Size of the button',\n    },\n    modeVariant: {\n      name: 'Mode variant',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      description: 'Button mode variant.',\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    fullbleed: {\n      name: 'Fullbleed',\n      type: 'boolean',\n      description: 'Fluid width in certain components-old',\n      table: {\n        defaultValue: { summary: false },\n      },\n      if: { arg: 'onlyIcon', truthy: false },\n    },\n    disabled: {\n      name: 'Disabled',\n      type: 'boolean',\n      description: 'Choose to disable the button',\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    onlyIcon: {\n      name: 'Only Icon',\n      description: 'Displays only the icon and excludes any text from the button',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n      if: { arg: 'size', neq: 'Extra small' },\n    },\n    icon: {\n      name: 'Icon',\n      description: 'Icon to display on the button. Choose \"none\" to exclude the icon.',\n      control: {\n        type: 'select',\n      },\n      options: ['none', ...iconsNames],\n      if: { arg: 'size', neq: 'Extra small' },\n    },\n    iconType: {\n      name: 'Icon type',\n      description: 'Native/Web Component',\n      control: {\n        type: 'radio',\n      },\n      options: ['Native', 'Web Component'],\n      if: { arg: 'size', neq: 'Extra small' },\n    },\n  },\n  args: {\n    text: 'Button',\n    btnType: 'Primary',\n    size: 'Large',\n    modeVariant: 'Primary',\n    fullbleed: false,\n    disabled: false,\n    onlyIcon: false,\n    icon: 'none',\n    iconType: 'Web Component',\n  },\n};\n\nconst WebComponentTemplate = ({\n  onlyIcon,\n  size,\n  modeVariant,\n  btnType,\n  fullbleed,\n  disabled,\n  icon,\n  iconType,\n  text = 'Button',\n}) => {\n  const btnTypeLookUp = {\n    Primary: 'primary',\n    Secondary: 'secondary',\n    Ghost: 'ghost',\n    Danger: 'danger',\n  };\n  const sizeLookUp = {\n    'Large': 'lg',\n    'Medium': 'md',\n    'Small': 'sm',\n    'Extra small': 'xs',\n  };\n\n  const modeVariantLookup = {\n    Primary: 'primary',\n    Secondary: 'secondary',\n  };\n\n  return formatHtmlPreview(\n    `\n    <style>\n    /* demo-wrapper is for demonstration purposes only*/${\n      icon && iconType === 'Native'\n        ? `@import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');\n    i.sdds-icon::before{\n      font-size: ${size === 'Large' || size === 'Medium' ? '20' : '16'}px;\n    }`\n        : ''\n    },\n    .demo-wrapper{\n      width: 100%;\n    }\n  </style>\n\n  <div class=\"demo-wrapper\">\n  <sdds-button type=\"${btnTypeLookUp[btnType]}\" size=\"${sizeLookUp[size]}\" ${\n      disabled ? 'disabled' : ''\n    } ${fullbleed ? 'fullbleed' : ''}\n    ${!onlyIcon ? `text=\"${text}\"` : ''}\n    text=\"${onlyIcon ? '' : text}\" \n    ${\n      modeVariant !== 'Inherit from parent'\n        ? `mode-variant=\"${modeVariantLookup[modeVariant]}\"`\n        : ''\n    }\n    >\n    ${\n      onlyIcon || (icon && icon !== 'none')\n        ? `\n    ${\n      iconType === 'Native'\n        ? `<i class=\"sdds-btn-icon sdds-icon ${icon}\" slot=\"icon\"></i>`\n        : `<sdds-icon slot=\"icon\" class='sdds-btn-icon ' size='${\n            sizeLookUp[size] === 'sm' ? '16px' : '20px'\n          }' name='${icon}'></sdds-icon>`\n    }\n  `\n        : ''\n    }\n</sdds-button>\n  </div>\n  `,\n  );\n};\n\n/** Button as web component */\nexport const WebComponent = WebComponentTemplate.bind({});\nWebComponent.args = {};\n\nexport const WebComponentWithIcon = WebComponentTemplate.bind({});\nWebComponentWithIcon.args = {\n  icon: 'truck',\n  iconType: 'Web Component',\n};\n\nexport const WebComponentOnlyIcon = WebComponentTemplate.bind({});\nWebComponentOnlyIcon.args = {\n  text: '',\n  iconType: 'Web Component',\n  onlyIcon: true,\n  icon: 'truck',\n};\n"]}
+{"version":3,"file":"button-webcomponent.stories.js","sourceRoot":"","sources":["../../../src/components/button/button-webcomponent.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport { iconsNames } from '../icon/iconsArray';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    notes: readme,\n    layout: 'padded',\n    chromatic: {\n      disableSnapshot: false, // enables snapshotting for the component\n    },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description:\n        'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    btnType: {\n      name: 'Type',\n      description:\n        'Four different button types to help the user to distinguish the level of importance of the task they represent.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Primary', 'Secondary', 'Ghost', 'Danger'],\n      table: {\n        defaultValue: { summary: 'primary' },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Sets the size of the button.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small', 'Extra small'],\n      table: {\n        defaultValue: { summary: 'lg' },\n      },\n    },\n    text: {\n      name: 'Text',\n      description: 'Sets the text to be displayed on the button.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'onlyIcon', truthy: false },\n    },\n    fullbleed: {\n      name: 'Fullbleed',\n      description: 'Sets a fluid width on the button.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n      if: { arg: 'onlyIcon', truthy: false },\n    },\n    onlyIcon: {\n      name: 'Only Icon',\n      description: 'Displays only the icon and excludes any text from the button.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n      if: { arg: 'size', neq: 'Extra small' },\n    },\n    icon: {\n      name: 'Icon',\n      description: 'Sets icon to be displayed on the button. Choose \"none\" to exclude the icon.',\n      control: {\n        type: 'select',\n      },\n      options: ['none', ...iconsNames],\n      if: { arg: 'size', neq: 'Extra small' },\n    },\n    iconType: {\n      name: 'Icon type',\n      description: 'Switch between showing a native or a web component icon.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Native', 'Web Component'],\n      if: { arg: 'size', neq: 'Extra small' },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the button.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    btnType: 'Primary',\n    size: 'Large',\n    text: 'Button',\n    fullbleed: false,\n    onlyIcon: false,\n    icon: 'none',\n    iconType: 'Web Component',\n    disabled: false,\n  },\n};\n\nconst WebComponentTemplate = ({\n  modeVariant,\n  btnType,\n  size,\n  text = 'Button',\n  fullbleed,\n  onlyIcon,\n  icon,\n  iconType,\n  disabled,\n}) => {\n  const btnTypeLookUp = {\n    Primary: 'primary',\n    Secondary: 'secondary',\n    Ghost: 'ghost',\n    Danger: 'danger',\n  };\n  const sizeLookUp = {\n    'Large': 'lg',\n    'Medium': 'md',\n    'Small': 'sm',\n    'Extra small': 'xs',\n  };\n\n  const modeVariantLookup = {\n    Primary: 'primary',\n    Secondary: 'secondary',\n  };\n\n  return formatHtmlPreview(\n    `\n    <style>\n    /* demo-wrapper is for demonstration purposes only*/${\n      icon && iconType === 'Native'\n        ? `@import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');\n    i.sdds-icon::before{\n      font-size: ${size === 'Large' || size === 'Medium' ? '20' : '16'}px;\n    }`\n        : ''\n    },\n    .demo-wrapper{\n      width: 100%;\n    }\n  </style>\n\n  <div class=\"demo-wrapper\">\n  <sdds-button type=\"${btnTypeLookUp[btnType]}\" size=\"${sizeLookUp[size]}\" ${\n      disabled ? 'disabled' : ''\n    } ${fullbleed ? 'fullbleed' : ''}\n    ${!onlyIcon ? `text=\"${text}\"` : ''}\n    ${\n      modeVariant !== 'Inherit from parent'\n        ? `mode-variant=\"${modeVariantLookup[modeVariant]}\"`\n        : ''\n    }\n    >\n    ${\n      onlyIcon || (icon && icon !== 'none')\n        ? `\n    ${\n      iconType === 'Native'\n        ? `<i class=\"sdds-btn-icon sdds-icon ${icon}\" slot=\"icon\"></i>`\n        : `<sdds-icon slot=\"icon\" class='sdds-btn-icon ' size='${\n            sizeLookUp[size] === 'sm' ? '16px' : '20px'\n          }' name='${icon}'></sdds-icon>`\n    }\n  `\n        : ''\n    }\n</sdds-button>\n  </div>\n  `,\n  );\n};\n\n/** Button as web component */\nexport const WebComponent = WebComponentTemplate.bind({});\nWebComponent.args = {};\n\nexport const WebComponentWithIcon = WebComponentTemplate.bind({});\nWebComponentWithIcon.args = {\n  icon: 'truck',\n  iconType: 'Web Component',\n};\n\nexport const WebComponentOnlyIcon = WebComponentTemplate.bind({});\nWebComponentOnlyIcon.args = {\n  text: '',\n  iconType: 'Web Component',\n  onlyIcon: true,\n  icon: 'truck',\n};\n"]}

package/dist/collection/components/button/button.css

@@ -8,7 +8,7 @@
   --sdds-btn-primary-border-color-hover: transparent;
   --sdds-btn-primary-background-active: var(--sdds-blue-700);
   --sdds-btn-primary-color-active: var(--sdds-white);
-  --sdds-btn-primary-border-color-active: transparent;
+  --sdds-btn-primary-border-color-active: var(--sdds-blue-700);
   --sdds-btn-primary-background-focus: var(--sdds-blue-400);
   --sdds-btn-primary-color-focus: var(--sdds-white);
   --sdds-btn-primary-border-color-focus: var(--sdds-blue-600);
@@ -23,7 +23,7 @@
   --sdds-btn-icon-primary-color: var(--sdds-grey-50);
   --sdds-btn-secondary-background: transparent;
   --sdds-btn-secondary-color: var(--sdds-black);
-  --sdds-btn-secondary-border-color: rgb(0 0 0 / 38%);
+  --sdds-btn-secondary-border-color: rgb(0 0 0 / 48%);
   --sdds-btn-secondary-background-hover: var(--sdds-blue-500);
   --sdds-btn-secondary-color-hover: var(--sdds-white);
   --sdds-btn-secondary-border-color-hover: var(--sdds-blue-500);
@@ -32,20 +32,20 @@
   --sdds-btn-secondary-border-color-active: rgb(0 0 0 / 87%);
   --sdds-btn-secondary-background-focus: transparent;
   --sdds-btn-secondary-color-focus: var(--sdds-black);
-  --sdds-btn-secondary-border-color-focus: var(--sdds-blue-300);
+  --sdds-btn-secondary-border-color-focus: var(--sdds-blue-400);
   --sdds-btn-secondary-outline-color: rgb(0 0 0 / 38%);
+  --sdds-btn-secondary-outline-color-focus: var(--sdds-blue-400);
   --sdds-btn-secondary-background-disabled: transparent;
   --sdds-btn-secondary-color-disabled: rgb(0 0 0 / 38%);
   --sdds-btn-secondary-border-color-disabled: rgb(0 0 0 / 38%);
+  --sdds-btn-icon-secondary-color-focus: var(--sdds-black);
+  --sdds-btn-icon-secondary-fill-focus: var(--sdds-black);
   /* ICON */
   --sdds-btn-icon-secondary-fill: var(--sdds-black);
   --sdds-btn-icon-secondary-color: var(--sdds-black);
   /* ICON HOVER */
   --sdds-btn-icon-secondary-fill-hover: var(--sdds-grey-50);
   --sdds-btn-icon-secondary-color-hover: var(--sdds-grey-50);
-  /* ICON FOCUS */
-  --sdds-btn-icon-secondary-fill-focus: var(--sdds-black);
-  --sdds-btn-icon-secondary-color-focus: var(--sdds-black);
   --sdds-btn-ghost-background: transparent;
   --sdds-btn-ghost-color: var(--sdds-black);
   --sdds-btn-ghost-border-color: transparent;
@@ -74,7 +74,7 @@
   --sdds-btn-danger-border-color-hover: transparent;
   --sdds-btn-danger-background-active: var(--sdds-red-700);
   --sdds-btn-danger-color-active: var(--sdds-white);
-  --sdds-btn-danger-border-color-active: transparent;
+  --sdds-btn-danger-border-color-active: var(--sdds-red-700);
   --sdds-btn-danger-background-focus: var(--sdds-red-400);
   --sdds-btn-danger-color-focus: var(--sdds-white);
   --sdds-btn-danger-border-color-focus: var(--sdds-red-400);
@@ -124,12 +124,14 @@
   --sdds-btn-secondary-border-color-active: var(--sdds-white);
   --sdds-btn-secondary-background-focus: transparent;
   --sdds-btn-secondary-color-focus: var(--sdds-white);
-  --sdds-btn-secondary-border-color-focus: var(--sdds-blue-300);
+  --sdds-btn-secondary-border-color-focus: var(--sdds-blue-400);
+  --sdds-btn-secondary-outline-color-focus: var(--sdds-blue-400);
   --sdds-btn-secondary-outline-color: var(--sdds-white);
-  --sdds-btn-secondary-outline-color-focus: var(--sdds-blue-300);
   --sdds-btn-secondary-background-disabled: transparent;
   --sdds-btn-secondary-color-disabled: rgb(255 255 255 / 38%);
   --sdds-btn-secondary-border-color-disabled: rgb(255 255 255 / 38%);
+  --sdds-btn-icon-secondary-color-focus: var(--sdds-white);
+  --sdds-btn-icon-secondary-fill-focus: var(--sdds-white);
   /* ICON */
   --sdds-btn-icon-secondary-fill: var(--sdds-grey-50);
   --sdds-btn-icon-secondary-color: var(--sdds-grey-50);
@@ -241,7 +243,7 @@
   box-sizing: border-box;
   font: var(--sdds-detail-02);
   letter-spacing: var(--sdds-detail-02-ls);
-  display: flex;
+  display: inline-flex;
   align-items: center;
   border-radius: 4px;
   border: none;
@@ -260,6 +262,9 @@
   cursor: unset;
 }
 .sdds-btn:focus {
+  outline: none;
+}
+.sdds-btn:focus-visible {
   outline: 2px solid var(--sdds-blue-400);
   outline-offset: -2px;
 }
@@ -275,7 +280,7 @@
   font-size: 12px;
   border-radius: 2px;
 }
-.sdds-btn.sdds-btn-xs:focus {
+.sdds-btn.sdds-btn-xs:focus-visible {
   outline: 2px solid var(--sdds-blue-400);
   outline-offset: -2px;
 }
@@ -286,7 +291,7 @@
 .sdds-btn.sdds-btn-sm.sdds-btn-only-icon {
   padding: 11px;
 }
-.sdds-btn.sdds-btn-sm:focus {
+.sdds-btn.sdds-btn-sm:focus-visible {
   outline: 2px solid var(--sdds-blue-400);
   outline-offset: -2px;
 }
@@ -307,7 +312,7 @@
 .sdds-btn.sdds-btn-md.sdds-btn-only-icon {
   padding: 13px;
 }
-.sdds-btn.sdds-btn-md:focus {
+.sdds-btn.sdds-btn-md:focus-visible {
   outline: 2px solid var(--sdds-blue-400);
   outline-offset: -2px;
 }
@@ -325,7 +330,7 @@
 .sdds-btn.sdds-btn-lg.sdds-btn-only-icon {
   padding: 17px;
 }
-.sdds-btn.sdds-btn-lg:focus {
+.sdds-btn.sdds-btn-lg:focus-visible {
   outline: 2px solid var(--sdds-blue-400);
   outline-offset: -2px;
 }
@@ -372,13 +377,13 @@
   fill: var(--sdds-btn-icon-primary-color-hover);
   color: var(--sdds-btn-icon-primary-color-hover);
 }
-.sdds-btn.sdds-btn-primary:focus {
+.sdds-btn.sdds-btn-primary:focus-visible {
   background: var(--sdds-btn-primary-background-focus);
   border-color: var(--sdds-btn-primary-border-color-focus);
   color: var(--sdds-btn-primary-color-focus);
   outline-color: var(--sdds-btn-primary-outline-color-focus);
 }
-.sdds-btn.sdds-btn-primary:focus .sdds-btn-icon {
+.sdds-btn.sdds-btn-primary:focus-visible .sdds-btn-icon {
   fill: var(--sdds-btn-icon-primary-fill-focus);
   color: var(--sdds-btn-icon-primary-fill-focus);
   fill: var(--sdds-btn-icon-primary-color-focus);
@@ -403,15 +408,6 @@
 .sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon {
   color: var(--sdds-grey-300);
 }
-.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
-.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
-.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
 .sdds-btn.sdds-btn-secondary {
   background: var(--sdds-btn-secondary-background);
   border-color: var(--sdds-btn-secondary-border-color);
@@ -437,13 +433,13 @@
   fill: var(--sdds-btn-icon-secondary-color-hover);
   color: var(--sdds-btn-icon-secondary-color-hover);
 }
-.sdds-btn.sdds-btn-secondary:focus {
+.sdds-btn.sdds-btn-secondary:focus-visible {
   background: var(--sdds-btn-secondary-background-focus);
   border-color: var(--sdds-btn-secondary-border-color-focus);
   color: var(--sdds-btn-secondary-color-focus);
   outline-color: var(--sdds-btn-secondary-outline-color-focus);
 }
-.sdds-btn.sdds-btn-secondary:focus .sdds-btn-icon {
+.sdds-btn.sdds-btn-secondary:focus-visible .sdds-btn-icon {
   fill: var(--sdds-btn-icon-secondary-fill-focus);
   color: var(--sdds-btn-icon-secondary-fill-focus);
   fill: var(--sdds-btn-icon-secondary-color-focus);
@@ -466,16 +462,7 @@
   outline-color: var(--sdds-btn-secondary-outline-color-disabled);
 }
 .sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
-.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
-.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
-.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
+  color: rgba(0, 0, 0, 0.38);
 }
 .sdds-btn.sdds-btn-ghost {
   background: var(--sdds-btn-ghost-background);
@@ -502,13 +489,13 @@
   fill: var(--sdds-btn-icon-ghost-color-hover);
   color: var(--sdds-btn-icon-ghost-color-hover);
 }
-.sdds-btn.sdds-btn-ghost:focus {
+.sdds-btn.sdds-btn-ghost:focus-visible {
   background: var(--sdds-btn-ghost-background-focus);
   border-color: var(--sdds-btn-ghost-border-color-focus);
   color: var(--sdds-btn-ghost-color-focus);
   outline-color: var(--sdds-btn-ghost-outline-color-focus);
 }
-.sdds-btn.sdds-btn-ghost:focus .sdds-btn-icon {
+.sdds-btn.sdds-btn-ghost:focus-visible .sdds-btn-icon {
   fill: var(--sdds-btn-icon-ghost-fill-focus);
   color: var(--sdds-btn-icon-ghost-fill-focus);
   fill: var(--sdds-btn-icon-ghost-color-focus);
@@ -531,16 +518,7 @@
   outline-color: var(--sdds-btn-ghost-outline-color-disabled);
 }
 .sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
-.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
-.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
-.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
+  color: rgba(0, 0, 0, 0.38);
 }
 .sdds-btn.sdds-btn-danger {
   background: var(--sdds-btn-danger-background);
@@ -567,13 +545,13 @@
   fill: var(--sdds-btn-icon-danger-color-hover);
   color: var(--sdds-btn-icon-danger-color-hover);
 }
-.sdds-btn.sdds-btn-danger:focus {
+.sdds-btn.sdds-btn-danger:focus-visible {
   background: var(--sdds-btn-danger-background-focus);
   border-color: var(--sdds-btn-danger-border-color-focus);
   color: var(--sdds-btn-danger-color-focus);
   outline-color: var(--sdds-btn-danger-outline-color-focus);
 }
-.sdds-btn.sdds-btn-danger:focus .sdds-btn-icon {
+.sdds-btn.sdds-btn-danger:focus-visible .sdds-btn-icon {
   fill: var(--sdds-btn-icon-danger-fill-focus);
   color: var(--sdds-btn-icon-danger-fill-focus);
   fill: var(--sdds-btn-icon-danger-color-focus);
@@ -598,22 +576,13 @@
 .sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon {
   color: var(--sdds-grey-300);
 }
-.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
-.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
-.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
 
 i.sdds-btn-icon[slot=icon] {
   line-height: 1;
 }
 
 :host(sdds-button) {
-  display: flex;
+  display: inline-flex;
   align-items: center;
 }
 :host(sdds-button) ::slotted([slot=icon]) {
@@ -626,7 +595,7 @@ i.sdds-btn-icon[slot=icon] {
 }
 
 :host(sdds-button[fullbleed]) {
-  width: inherit;
+  width: 100%;
   justify-content: center;
 }
 
@@ -641,7 +610,7 @@ i.sdds-btn-icon[slot=icon] {
 }
 
 :host(sdds-button:not([only-icon])) {
-  display: flex;
+  display: inline-flex;
   align-items: center;
 }
 :host(sdds-button:not([only-icon])) .sdds-btn-sm ::slotted([slot=icon]) {

package/dist/collection/components/card/card.stories.js

@@ -18,103 +18,101 @@ export default {
     ],
   },
   argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
     header: {
       name: 'Header text',
-      description: 'The header text',
+      description: 'Sets the header text.',
       control: {
         type: 'text',
       },
     },
     subheader: {
       name: 'Subheader text',
-      description: 'The subheader text',
+      description: 'Sets the subheader text.',
       control: {
         type: 'text',
       },
     },
-    bodyText: {
-      name: 'Body text',
-      description: 'The body text for the card',
-      control: {
-        type: 'text',
-      },
-    },
-    bodyDivider: {
-      name: 'Body divider',
-      description: 'Add a divider to the card',
+    headerImg: {
+      name: 'Header image',
+      description: 'Toggles an image in the header.',
       control: {
         type: 'boolean',
       },
       table: {
-        defaultValue: { summary: false },
+        defaultValue: { summary: true },
       },
-      if: { arg: 'bodyImg', eq: false },
     },
-    cardBottom: {
-      name: 'Content of the bottom of the card',
+    headerPlacement: {
+      name: 'Header placement',
+      description: 'Sets the placement of the header, above or below the body image.',
       control: {
-        type: 'text',
+        type: 'radio',
+      },
+      options: ['Above', 'Below'],
+      table: {
+        defaultValue: { summary: 'above' },
       },
     },
-    clickable: {
-      name: 'Clickable',
-      description: 'Toggles if the card is clickable or not.',
+    bodyImg: {
+      name: 'Body image',
+      description: 'Toggles an image in the card body. Cannot be combined with divider.',
       control: {
         type: 'boolean',
       },
       table: {
         defaultValue: { summary: false },
       },
+      if: { arg: 'bodyDivider', eq: false },
     },
-    bodyImg: {
-      name: 'Body image',
-      description: 'Image in body on card.',
+    bodyText: {
+      name: 'Body text',
+      description: 'Sets the body text for the card.',
       control: {
-        type: 'boolean',
+        type: 'text',
       },
     },
-    imageTop: {
-      name: 'Image on top',
-      description: 'Sets the image on top',
+    bodyDivider: {
+      name: 'Body divider',
+      description: 'Adds a divider above the body content. Cannot be combined with body image.',
       control: {
         type: 'boolean',
       },
       table: {
         defaultValue: { summary: false },
       },
-      if: { arg: 'image', eq: true },
-    },
-    headerImg: {
-      name: 'Header image',
-      description: 'Image for the header',
-      control: {
-        type: 'boolean',
-      },
+      if: { arg: 'bodyImg', eq: false },
     },
-    headerPlacement: {
-      name: 'Header placement',
-      description: 'Placement of the header',
+    cardBottom: {
+      name: 'Content of the bottom of the card',
+      description: 'Slot to add custom HTML elements to the bottom of the card.',
       control: {
-        type: 'radio',
-      },
-      options: ['Above', 'Below'],
-      table: {
-        defaultValue: { summary: 'above' },
+        type: 'text',
       },
     },
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'Change the components mode variant',
+    clickable: {
+      name: 'Clickable',
+      description: 'Toggles if the card is clickable or not.',
       control: {
-        type: 'radio',
+        type: 'boolean',
       },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
       table: {
-        defaultValue: { summary: 'Inherit from parent' },
+        defaultValue: { summary: false },
       },
     },
   },
   args: {
+    modeVariant: 'Inherit from parent',
     header: 'Header text',
     subheader: 'Subheader text',
     headerImg: true,
@@ -123,11 +121,10 @@ export default {
     bodyText: '',
     bodyDivider: false,
     cardBottom: '<sdds-icon style="font-size: 20px;" name="arrow_right"></sdds-icon>',
-    modeVariant: 'Inherit from parent',
     clickable: false,
   },
 };
-const Template = ({ header, subheader, cardBottom, clickable, bodyText, bodyDivider, headerPlacement, headerImg, modeVariant, bodyImg, }) => formatHtmlPreview(`
+const Template = ({ modeVariant, header, subheader, headerImg, headerPlacement, bodyImg, bodyText, bodyDivider, cardBottom, clickable, }) => formatHtmlPreview(`
 <style>
 /* demo-wrapper is for demonstration purposes only*/
   .demo-wrapper {