@scania/tegel 0.0.51 → 0.0.61

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

@@ -1,156 +1,156 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import { iconsNames } from '../icon/iconsArray';
-import readme from './readme.md';
-export default {
-  title: 'Components/Button',
-  parameters: {
-    notes: readme,
-    layout: 'padded',
-    chromatic: {
-      disableSnapshot: false, // enables snapshotting for the component
-    },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  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' },
-      },
-    },
-    btnType: {
-      name: 'Type',
-      description: 'Four different button types to help the user to distinguish the level of importance of the task they represent.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Primary', 'Secondary', 'Ghost', 'Danger'],
-      table: {
-        defaultValue: { summary: 'primary' },
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Sets the size of the button.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small', 'Extra small'],
-      table: {
-        defaultValue: { summary: 'lg' },
-      },
-    },
-    text: {
-      name: 'Text',
-      description: 'Sets the text to be displayed on the button.',
-      control: {
-        type: 'text',
-      },
-      if: { arg: 'onlyIcon', truthy: false },
-    },
-    fullbleed: {
-      name: 'Fullbleed',
-      description: 'Sets a fluid width on the button.',
-      control: {
-        type: 'boolean',
-      },
-      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.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-      if: { arg: 'size', neq: 'Extra small' },
-    },
-    icon: {
-      name: 'Icon',
-      description: 'Sets icon to be displayed on the button. Choose "none" to exclude the icon.',
-      control: {
-        type: 'select',
-      },
-      options: ['none', ...iconsNames],
-      if: { arg: 'size', neq: 'Extra small' },
-    },
-    iconType: {
-      name: 'Icon type',
-      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: {
-    modeVariant: 'Inherit from parent',
-    btnType: 'Primary',
-    size: 'Large',
-    text: 'Button',
-    fullbleed: false,
-    onlyIcon: false,
-    icon: 'none',
-    iconType: 'Web Component',
-    disabled: false,
-  },
-};
-const WebComponentTemplate = ({ modeVariant, btnType, size, text = 'Button', fullbleed, onlyIcon, icon, iconType, disabled, }) => {
-  const btnTypeLookUp = {
-    Primary: 'primary',
-    Secondary: 'secondary',
-    Ghost: 'ghost',
-    Danger: 'danger',
-  };
-  const sizeLookUp = {
-    'Large': 'lg',
-    'Medium': 'md',
-    'Small': 'sm',
-    'Extra small': 'xs',
-  };
-  const modeVariantLookup = {
-    Primary: 'primary',
-    Secondary: 'secondary',
-  };
+import { formatHtmlPreview } from '../../utils/utils';
+import { iconsNames } from '../icon/iconsArray';
+import readme from './readme.md';
+export default {
+  title: 'Components/Button',
+  parameters: {
+    notes: readme,
+    layout: 'padded',
+    chromatic: {
+      disableSnapshot: false, // enables snapshotting for the component
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  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' },
+      },
+    },
+    btnType: {
+      name: 'Type',
+      description: 'Four different button types to help the user to distinguish the level of importance of the task they represent.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Primary', 'Secondary', 'Ghost', 'Danger'],
+      table: {
+        defaultValue: { summary: 'primary' },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Sets the size of the button.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Medium', 'Small', 'Extra small'],
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+    text: {
+      name: 'Text',
+      description: 'Sets the text to be displayed on the button.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'onlyIcon', truthy: false },
+    },
+    fullbleed: {
+      name: 'Fullbleed',
+      description: 'Sets a fluid width on the button.',
+      control: {
+        type: 'boolean',
+      },
+      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.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+      if: { arg: 'size', neq: 'Extra small' },
+    },
+    icon: {
+      name: 'Icon',
+      description: 'Sets icon to be displayed on the button. Choose "none" to exclude the icon.',
+      control: {
+        type: 'select',
+      },
+      options: ['none', ...iconsNames],
+      if: { arg: 'size', neq: 'Extra small' },
+    },
+    iconType: {
+      name: 'Icon type',
+      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: {
+    modeVariant: 'Inherit from parent',
+    btnType: 'Primary',
+    size: 'Large',
+    text: 'Button',
+    fullbleed: false,
+    onlyIcon: false,
+    icon: 'none',
+    iconType: 'Web Component',
+    disabled: false,
+  },
+};
+const WebComponentTemplate = ({ modeVariant, btnType, size, text = 'Button', fullbleed, onlyIcon, icon, iconType, disabled, }) => {
+  const btnTypeLookUp = {
+    Primary: 'primary',
+    Secondary: 'secondary',
+    Ghost: 'ghost',
+    Danger: 'danger',
+  };
+  const sizeLookUp = {
+    'Large': 'lg',
+    'Medium': 'md',
+    'Small': 'sm',
+    'Extra small': 'xs',
+  };
+  const modeVariantLookup = {
+    Primary: 'primary',
+    Secondary: 'secondary',
+  };
   return formatHtmlPreview(`
     <style>
-    /* demo-wrapper is for demonstration purposes only*/${icon && iconType === 'Native'
+    /* demo-wrapper is for demonstration purposes only*/${icon && iconType === 'Native'
     ? `@import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');
     i.sdds-icon::before{
       font-size: ${size === 'Large' || size === 'Medium' ? '20' : '16'}px;
-    }`
+    }`
     : ''},
     .demo-wrapper{
       width: 100%;
@@ -160,34 +160,34 @@ const WebComponentTemplate = ({ modeVariant, btnType, size, text = 'Button', ful
   <div class="demo-wrapper">
   <sdds-button type="${btnTypeLookUp[btnType]}" size="${sizeLookUp[size]}" ${disabled ? 'disabled' : ''} ${fullbleed ? 'fullbleed' : ''}
     ${!onlyIcon ? `text="${text}"` : ''}
-    ${modeVariant !== 'Inherit from parent'
-    ? `mode-variant="${modeVariantLookup[modeVariant]}"`
+    ${modeVariant !== 'Inherit from parent'
+    ? `mode-variant="${modeVariantLookup[modeVariant]}"`
     : ''}
     >
-    ${onlyIcon || (icon && icon !== 'none')
+    ${onlyIcon || (icon && icon !== 'none')
     ? `
-    ${iconType === 'Native'
-      ? `<i class="sdds-btn-icon sdds-icon ${icon}" slot="icon"></i>`
+    ${iconType === 'Native'
+      ? `<i class="sdds-btn-icon sdds-icon ${icon}" slot="icon"></i>`
       : `<sdds-icon slot="icon" class='sdds-btn-icon ' size='${sizeLookUp[size] === 'sm' ? '16px' : '20px'}' name='${icon}'></sdds-icon>`}
-  `
+  `
     : ''}
 </sdds-button>
   </div>
-  `);
-};
-/** Button as web component */
-export const WebComponent = WebComponentTemplate.bind({});
-WebComponent.args = {};
-export const WebComponentWithIcon = WebComponentTemplate.bind({});
-WebComponentWithIcon.args = {
-  icon: 'truck',
-  iconType: 'Web Component',
-};
-export const WebComponentOnlyIcon = WebComponentTemplate.bind({});
-WebComponentOnlyIcon.args = {
-  text: '',
-  iconType: 'Web Component',
-  onlyIcon: true,
-  icon: 'truck',
-};
-//# sourceMappingURL=button-webcomponent.stories.js.map
+  `);
+};
+/** Button as web component */
+export const WebComponent = WebComponentTemplate.bind({});
+WebComponent.args = {};
+export const WebComponentWithIcon = WebComponentTemplate.bind({});
+WebComponentWithIcon.args = {
+  icon: 'truck',
+  iconType: 'Web Component',
+};
+export const WebComponentOnlyIcon = WebComponentTemplate.bind({});
+WebComponentOnlyIcon.args = {
+  text: '',
+  iconType: 'Web Component',
+  onlyIcon: true,
+  icon: 'truck',
+};
+//# sourceMappingURL=button-webcomponent.stories.js.map

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]) {
@@ -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]) {