refactor(link): split variants

src/components/_index.scss

@@ -1,2 +1,2 @@
 @forward 'core/styles' hide development-style, host-component-properties, link-base,
-  link-focus-visible, link-hover, link-active, link-inline-base, link-inline-consolidation;
+  link-focus-visible, link-hover, link-active, link-consolidation;

src/components/action-group/__snapshots__/action-group.spec.snap.js

@@ -19,18 +19,18 @@ snapshots["sbb-action-group renders renders - Dom"] =
   >
     Button
   </sbb-button>
-  <sbb-link
+  <sbb-block-link
     data-slot-names="unnamed"
     dir="ltr"
     href="https://github.com/lyne-design-system/lyne-components"
     icon-name="chevron-small-left-small"
+    icon-placement="start"
     role="link"
     size="m"
     tabindex="0"
-    variant="block"
   >
     Link
-  </sbb-link>
+  </sbb-block-link>
 </sbb-action-group>
 `;
 /* end snapshot sbb-action-group renders renders - Dom */

src/components/action-group/action-group.e2e.ts

@@ -3,7 +3,7 @@ import { html } from 'lit/static-html.js';
 
 import type { SbbButtonElement } from '../button';
 import { waitForLitRender } from '../core/testing';
-import type { SbbLinkElement } from '../link';
+import type { SbbBlockLinkElement } from '../link';
 
 import { SbbActionGroupElement } from './action-group';
 
@@ -14,13 +14,13 @@ describe('sbb-action-group', () => {
     element = await fixture(html`
       <sbb-action-group align-group="start" orientation="horizontal">
         <sbb-button variant="secondary">Button</sbb-button>
-        <sbb-link
+        <sbb-block-link
           icon-name="chevron-small-left-small"
           icon-placement="start"
           href="https://github.com/lyne-design-system/lyne-components"
         >
           Link
-        </sbb-link>
+        </sbb-block-link>
       </sbb-action-group>
     `);
   });
@@ -50,17 +50,9 @@ describe('sbb-action-group', () => {
       element.setAttribute('link-size', 's');
       await waitForLitRender(element);
       const links = Array.from(
-        document.querySelectorAll('sbb-action-group sbb-link'),
-      ) as SbbLinkElement[];
+        document.querySelectorAll('sbb-action-group sbb-block-link'),
+      ) as SbbBlockLinkElement[];
       expect(links.every((l) => l.size === 's')).to.be.ok;
     });
-
-    it('should apply variant block to sbb-link', async () => {
-      await waitForLitRender(element);
-      const links = Array.from(
-        document.querySelectorAll('sbb-action-group sbb-link'),
-      ) as SbbLinkElement[];
-      expect(links.every((l) => l.variant === 'block')).to.be.ok;
-    });
   });
 });

src/components/action-group/action-group.scss

@@ -75,6 +75,6 @@ $horizontal-orientations: (
   }
 }
 
-::slotted(:is(sbb-link, sbb-link-button)) {
+::slotted(:is(sbb-block-link, sbb-block-link-button, sbb-block-link-static)) {
   white-space: nowrap;
 }

src/components/action-group/action-group.spec.ts

@@ -8,7 +8,7 @@ import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot';
 import type { SbbActionGroupElement } from './action-group';
 import './action-group';
 import '../button';
-import '../link';
+import '../link/block-link';
 
 describe('sbb-action-group', () => {
   describe('renders', () => {
@@ -18,12 +18,12 @@ describe('sbb-action-group', () => {
       element = await fixture(html`
         <sbb-action-group align-group="start" orientation="horizontal">
           <sbb-button variant="secondary">Button</sbb-button>
-          <sbb-link
+          <sbb-block-link
             icon-name="chevron-small-left-small"
             href="https://github.com/lyne-design-system/lyne-components"
           >
             Link
-          </sbb-link>
+          </sbb-block-link>
         </sbb-action-group>
       `);
       await waitForLitRender(element);
@@ -50,12 +50,12 @@ describe('sbb-action-group', () => {
       const root = (await fixture(html`
         <sbb-action-group align-group="start" orientation="horizontal">
           <sbb-button variant="secondary">Button</sbb-button>
-          <sbb-link
+          <sbb-block-link
             icon-name="chevron-small-left-small"
             href="https://github.com/lyne-design-system/lyne-components"
           >
             Link
-          </sbb-link>
+          </sbb-block-link>
         </sbb-action-group>
       `)) as SbbActionGroupElement;
       expect(assertButtons(root, (b) => b.size === 'l')).to.be.ok;
@@ -65,46 +65,31 @@ describe('sbb-action-group', () => {
       const root = (await fixture(html`
         <sbb-action-group align-group="start" orientation="horizontal" button-size="m">
           <sbb-button variant="secondary">Button</sbb-button>
-          <sbb-link
+          <sbb-block-link
             icon-name="chevron-small-left-small"
             href="https://github.com/lyne-design-system/lyne-components"
           >
             Link
-          </sbb-link>
+          </sbb-block-link>
         </sbb-action-group>
       `)) as SbbActionGroupElement;
       expect(assertButtons(root, (b) => b.size === 'm')).to.be.ok;
     });
 
-    it('should apply block variant to sbb-link', async () => {
-      const root = (await fixture(html`
-        <sbb-action-group align-group="start" orientation="horizontal" button-size="m">
-          <sbb-button variant="secondary">Button</sbb-button>
-          <sbb-link
-            icon-name="chevron-small-left-small"
-            href="https://github.com/lyne-design-system/lyne-components"
-          >
-            Link
-          </sbb-link>
-        </sbb-action-group>
-      `)) as SbbActionGroupElement;
-      expect(Array.from(root.querySelectorAll('sbb-link')).every((l) => l.variant === 'block')).to
-        .be.ok;
-    });
-
     it('should sync link-size property with sbb-link', async () => {
       const root = (await fixture(html`
         <sbb-action-group align-group="start" orientation="horizontal" link-size="s">
           <sbb-button variant="secondary">Button</sbb-button>
-          <sbb-link
+          <sbb-block-link
             icon-name="chevron-small-left-small"
             href="https://github.com/lyne-design-system/lyne-components"
           >
             Link
-          </sbb-link>
+          </sbb-block-link>
         </sbb-action-group>
       `)) as SbbActionGroupElement;
-      expect(Array.from(root.querySelectorAll('sbb-link')).every((l) => l.size === 's')).to.be.ok;
+      expect(Array.from(root.querySelectorAll('sbb-block-link')).every((l) => l.size === 's')).to.be
+        .ok;
     });
   });
 });

src/components/action-group/action-group.stories.ts

@@ -9,7 +9,7 @@ import { sbbSpread } from '../core/dom';
 
 import readme from './readme.md?raw';
 import './action-group';
-import '../link';
+import '../link/block-link';
 import '../button';
 
 const secondaryButtonTemplate = (alignSelf?: string): TemplateResult => html`
@@ -21,13 +21,13 @@ const buttonTemplate = (alignSelf?: string): TemplateResult => html`
 `;
 
 const linkTemplate = (alignSelf?: string): TemplateResult => html`
-  <sbb-link
+  <sbb-block-link
     align-self=${alignSelf || nothing}
     icon-name="chevron-small-left-small"
     href="https://github.com/lyne-design-system/lyne-components"
   >
     Link
-  </sbb-link>
+  </sbb-block-link>
 `;
 
 const TemplateTwoElements = (

src/components/action-group/action-group.ts

@@ -4,14 +4,19 @@ import { customElement, property } from 'lit/decorators.js';
 
 import type { SbbButtonElement, SbbButtonLinkElement, SbbButtonSize } from '../button';
 import type { SbbHorizontalFrom, SbbOrientation } from '../core/interfaces';
-import type { SbbLinkButtonElement, SbbLinkElement, SbbLinkSize } from '../link';
+import type {
+  SbbBlockLinkButtonElement,
+  SbbBlockLinkElement,
+  SbbBlockLinkStaticElement,
+  SbbLinkSize,
+} from '../link';
 
 import style from './action-group.scss?lit&inline';
 
 /**
- * It can be used as a container for one or more action element, like `sbb-button` or `sbb-link`.
+ * It can be used as a container for one or more action element, like `sbb-button` or `sbb-block-link`.
  *
- * @slot - Use the unnamed slot to add `sbb-link` or `sbb-button` elements to the `sbb-action-group`.
+ * @slot - Use the unnamed slot to add `sbb-block-link` or `sbb-button` elements to the `sbb-action-group`.
  */
 @customElement('sbb-action-group')
 export class SbbActionGroupElement extends LitElement {
@@ -43,8 +48,8 @@ export class SbbActionGroupElement extends LitElement {
   public buttonSize: SbbButtonSize = 'l';
 
   /**
-   * Size of the nested sbb-link instances. This will overwrite the size attribute of nested
-   * sbb-link instances.
+   * Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested
+   * sbb-block-link instances.
    */
   @property({ attribute: 'link-size', reflect: true })
   public linkSize: SbbLinkSize = 'm';
@@ -65,10 +70,9 @@ export class SbbActionGroupElement extends LitElement {
   }
 
   private _syncLinks(): void {
-    this.querySelectorAll?.<SbbLinkElement | SbbLinkButtonElement>(
-      'sbb-link, sbb-link-button',
-    ).forEach((link: SbbLinkElement | SbbLinkButtonElement) => {
-      link.variant = 'block';
+    this.querySelectorAll?.<
+      SbbBlockLinkElement | SbbBlockLinkButtonElement | SbbBlockLinkStaticElement
+    >('sbb-block-link, sbb-block-link-button, sbb-block-link-static').forEach((link) => {
       link.size = this.linkSize;
     });
   }

src/components/action-group/readme.md

@@ -1,5 +1,5 @@
 The `sbb-action-group` component is a generic content container which can contain up to three action items
-([sbb-button](/docs/components-sbb-button--docs) or [sbb-link](/docs/components-sbb-link--docs) or other HTML elements)
+([sbb-button](/docs/components-sbb-button--docs) or [sbb-block-link](/docs/components-sbb-link-sbb-block-link--docs) or other HTML elements)
 in various [allocations](#allocations).
 
 ## Style
@@ -16,30 +16,30 @@ indicate the minimum breakpoint from which the orientation changes to `horizonta
 <sbb-action-group orientation="vertical" horizontal-from="small">
   <sbb-button variant="secondary">Action 1</sbb-button>
   <sbb-button>Action 2</sbb-button>
-  <sbb-link
+  <sbb-block-link
     align-self="end"
     icon-name="chevron-small-left-small"
     href="https://github.com/lyne-design-system/lyne-components"
   >
     Action 3
-  </sbb-link>
+  </sbb-block-link>
 </sbb-action-group>
 ```
 
 ### Button-size and link-size
 
-The two props `button-size` and `link-size` can be used to override, respectively, the size of the inner `sbb-button` and `sbb-link`.
-Default values are `l` for `sbb-button` and `m` for `sbb-link`.
+The two props `button-size` and `link-size` can be used to override, respectively, the size of the inner `sbb-button` and `sbb-block-link`.
+Default values are `l` for `sbb-button` and `m` for `sbb-block-link`.
 
 ```html
 <sbb-action-group button-size="m" link-size="s">
   <sbb-button variant="secondary">Action 1</sbb-button>
-  <sbb-link
+  <sbb-block-link
     icon-name="chevron-small-left-small"
     href="https://github.com/lyne-design-system/lyne-components"
   >
     Action 3
-  </sbb-link>
+  </sbb-block-link>
 </sbb-action-group>
 ```
 
@@ -51,8 +51,8 @@ possible values are `start`, `center`, `stretch` and `end`.
 It is also possible to set the `align-self` attribute on action items in order to move them in the
 opposite direction to the group; possible values are `start`, `center` or `end`.
 
-**NOTE**: The `sbb-action-group` will automatically set variant `block` and will sync the `linkSize`
-property with nested `sbb-link` and the `buttonSize` property with the nested `sbb-button`
+**NOTE**: The `sbb-action-group` will only accept `block-link` and will sync the `linkSize`
+property with nested `sbb-block-link` and the `buttonSize` property with the nested `sbb-button`
 instances.
 
 ```html
@@ -74,12 +74,12 @@ and we consider a template like the following one (possibly removing the link fo
 <sbb-action-group>
   <sbb-button>Button 1</sbb-button>
   <sbb-button>Button 2</sbb-button>
-  <sbb-link
+  <sbb-block-link
     icon-name="chevron-small-left-small"
     href="https://github.com/lyne-design-system/lyne-components"
   >
     Link
-  </sbb-link>
+  </sbb-block-link>
 </sbb-action-group>
 ```
 
@@ -120,16 +120,16 @@ The values for `align-group` and `align-self` for the various allocations are as
 
 ## Properties
 
-| Name             | Attribute         | Privacy | Type                                        | Default        | Description                                                                                                     |
-| ---------------- | ----------------- | ------- | ------------------------------------------- | -------------- | --------------------------------------------------------------------------------------------------------------- |
-| `alignGroup`     | `align-group`     | public  | `'start' \| 'center' \| 'stretch' \| 'end'` | `'start'`      | Set the slotted `<sbb-action-group>` children's alignment.                                                      |
-| `horizontalFrom` | `horizontal-from` | public  | `SbbHorizontalFrom`                         | `'medium'`     | Overrides the behaviour of `orientation` property.                                                              |
-| `orientation`    | `orientation`     | public  | `SbbOrientation`                            | `'horizontal'` | Indicates the orientation of the components inside the `<sbb-action-group>`.                                    |
-| `buttonSize`     | `button-size`     | public  | `SbbButtonSize`                             | `'l'`          | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. |
-| `linkSize`       | `link-size`       | public  | `SbbLinkSize`                               | `'m'`          | Size of the nested sbb-link instances. This will overwrite the size attribute of nested sbb-link instances.     |
+| Name             | Attribute         | Privacy | Type                                        | Default        | Description                                                                                                             |
+| ---------------- | ----------------- | ------- | ------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `alignGroup`     | `align-group`     | public  | `'start' \| 'center' \| 'stretch' \| 'end'` | `'start'`      | Set the slotted `<sbb-action-group>` children's alignment.                                                              |
+| `horizontalFrom` | `horizontal-from` | public  | `SbbHorizontalFrom`                         | `'medium'`     | Overrides the behaviour of `orientation` property.                                                                      |
+| `orientation`    | `orientation`     | public  | `SbbOrientation`                            | `'horizontal'` | Indicates the orientation of the components inside the `<sbb-action-group>`.                                            |
+| `buttonSize`     | `button-size`     | public  | `SbbButtonSize`                             | `'l'`          | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances.         |
+| `linkSize`       | `link-size`       | public  | `SbbLinkSize`                               | `'m'`          | Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. |
 
 ## Slots
 
-| Name | Description                                                                                |
-| ---- | ------------------------------------------------------------------------------------------ |
-|      | Use the unnamed slot to add `sbb-link` or `sbb-button` elements to the `sbb-action-group`. |
+| Name | Description                                                                                      |
+| ---- | ------------------------------------------------------------------------------------------------ |
+|      | Use the unnamed slot to add `sbb-block-link` or `sbb-button` elements to the `sbb-action-group`. |

src/components/alert/alert/__snapshots__/alert.spec.snap.js

@@ -105,7 +105,6 @@ snapshots["sbb-alert should render customized properties"] =
           size="s"
           tabindex="0"
           target="_blank"
-          variant="inline"
         >
           Show much more
         </sbb-link>

src/components/alert/alert/alert.ts

@@ -4,7 +4,6 @@ import { customElement, property } from 'lit/decorators.js';
 
 import {
   LanguageController,
-  type LinkProperties,
   type LinkTargetType,
   SbbIconNameMixin,
 } from '../../core/common-behaviors';
@@ -33,7 +32,7 @@ export type SbbAlertState = 'closed' | 'opening' | 'opened';
  * @event {CustomEvent<void>} dismissalRequested - Emits when dismissal of an alert was requested.
  */
 @customElement('sbb-alert')
-export class SbbAlertElement extends SbbIconNameMixin(LitElement) implements LinkProperties {
+export class SbbAlertElement extends SbbIconNameMixin(LitElement) {
   public static override styles: CSSResultGroup = style;
   public static readonly events = {
     willOpen: 'willOpen',
@@ -154,7 +153,7 @@ export class SbbAlertElement extends SbbIconNameMixin(LitElement) implements Lin
                 <slot></slot>
               </p>
               ${this.href
-                ? html` <sbb-link ${spread(this._linkProperties())} variant="inline" negative>
+                ? html` <sbb-link ${spread(this._linkProperties())} negative>
                     ${this.linkContent ? this.linkContent : i18nFindOutMore[this._language.current]}
                   </sbb-link>`
                 : nothing}