@descope-ui/descope-multi-sso 3.14.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## [3.14.0](https://github.com/descope/web-components-ui/compare/web-components-ui-3.13.3...web-components-ui-3.14.0) (2026-06-08)
+
+
+### Features
+
+* **multi-sso:** add MultiSso component ([#1049](https://github.com/descope/web-components-ui/issues/1049)) ([86991ae](https://github.com/descope/web-components-ui/commit/86991aeda2b58b98d0c513fdae519bc2671d05b7))

package/e2e/descope-multi-sso.spec.ts

@@ -0,0 +1,214 @@
+import { test, expect, Page } from '@playwright/test';
+import { createMultiSsoTestDriver } from 'test-drivers';
+import { getStoryUrl, loopConfig, loopPresets } from 'e2e-utils';
+
+const storyName = 'descope-multi-sso';
+const componentName = 'descope-multi-sso';
+
+const setupEventListener = (eventName: string) => {
+  return `
+    window.eventDetails = [];
+    document.addEventListener('${eventName}', (event) => {
+      window.eventDetails.push(event.detail);
+    });
+  `;
+};
+
+// Helper: goto story and wait for the data-injecting story decorator to settle
+const gotoStory = async (page: Page, args = {}) => {
+  await page.goto(getStoryUrl(storyName, args), { waitUntil: 'networkidle' });
+  await page.waitForSelector(componentName);
+  await page.waitForTimeout(500);
+};
+
+test.describe('theme', () => {
+  test('default', async ({ page }) => {
+    await gotoStory(page);
+    const component = createMultiSsoTestDriver(page.locator(componentName));
+    expect(
+      await component.screenshot({ animations: 'disabled' }),
+    ).toMatchSnapshot();
+  });
+
+  loopConfig(
+    {
+      direction: ['rtl'],
+      'full-width': ['true'],
+      'create-button-label': ['My Add'],
+    },
+    (attr, value) => {
+      test(`${attr}: ${value}`, async ({ page }) => {
+        await gotoStory(page, { [attr]: value });
+        const component = createMultiSsoTestDriver(page.locator(componentName));
+        expect(
+          await component.screenshot({ animations: 'disabled' }),
+        ).toMatchSnapshot();
+      });
+    },
+  );
+
+  loopPresets(
+    {
+      'allow-create false': { 'allow-create': 'false' },
+      'allow-delete false': { 'allow-delete': 'false' },
+      'allow-configure false': { 'allow-configure': 'false' },
+      'icons hidden': { showIcons: 'false' },
+      'single item (default only)': { numberOfItems: '1' },
+      'long labels': {
+        label: 'very long name very long name very long name very long name',
+        'create-button-label': 'very extremely long name also you know',
+      },
+    },
+    (preset, name) => {
+      test(name, async ({ page }) => {
+        await gotoStory(page, preset);
+        const component = createMultiSsoTestDriver(page.locator(componentName));
+        expect(
+          await component.screenshot({ animations: 'disabled' }),
+        ).toMatchSnapshot();
+      });
+    },
+  );
+});
+
+test.describe('logic', () => {
+  test('dispatches create-clicked event with empty detail when add button is clicked', async ({
+    page,
+  }) => {
+    await page.addInitScript(setupEventListener('create-clicked'));
+    await gotoStory(page);
+
+    const component = createMultiSsoTestDriver(page.locator(componentName));
+    await component.addButton.click();
+    await page.waitForTimeout(200);
+
+    const eventDetail = await page.evaluate(
+      () => (window as any).eventDetails[0],
+    );
+    expect(eventDetail).toBeDefined();
+    expect(eventDetail).toStrictEqual({});
+  });
+
+  test('dispatches delete-clicked event with id and name when delete button is clicked', async ({
+    page,
+  }) => {
+    await page.addInitScript(setupEventListener('delete-clicked'));
+    await gotoStory(page);
+
+    const component = createMultiSsoTestDriver(page.locator(componentName));
+    // Row 0 is the default (no delete); row 1 is the first deletable item
+    await component.getRow(1).deleteButton.click();
+    await page.waitForTimeout(200);
+
+    const eventDetail = await page.evaluate(
+      () => (window as any).eventDetails[0],
+    );
+    expect(eventDetail).toBeDefined();
+    expect(eventDetail).toHaveProperty('id', 'sso-2');
+    expect(eventDetail).toHaveProperty('name', 'SSO Configuration 2');
+  });
+
+  test('default row has no delete button', async ({ page }) => {
+    await gotoStory(page);
+    const component = createMultiSsoTestDriver(page.locator(componentName));
+    await expect(component.getRow(0).deleteButton).toHaveCount(0);
+  });
+
+  test('external link has correct href, target, rel and aria-label', async ({
+    page,
+  }) => {
+    await gotoStory(page);
+    const component = createMultiSsoTestDriver(page.locator(componentName));
+
+    // Row 0 is the default item with a link
+    const link = component.getRow(0).externalLink;
+    await expect(link).toHaveAttribute('href', /example\.descope\.com\/sso\//);
+    await expect(link).toHaveAttribute('target', '_blank');
+    await expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+    await expect(link).toHaveAttribute('aria-label', 'Configure');
+  });
+
+  test('delete button has correct data-id, data-name and aria-label', async ({
+    page,
+  }) => {
+    await gotoStory(page);
+    const component = createMultiSsoTestDriver(page.locator(componentName));
+
+    const deleteBtn = component.getRow(1).deleteButton;
+    await expect(deleteBtn).toHaveAttribute('data-id', 'sso-2');
+    await expect(deleteBtn).toHaveAttribute('data-name', 'SSO Configuration 2');
+    await expect(deleteBtn).toHaveAttribute('aria-label', 'Delete');
+  });
+
+  test('auth-type badge displays uppercase type text', async ({ page }) => {
+    await gotoStory(page);
+    const component = createMultiSsoTestDriver(page.locator(componentName));
+
+    // Default story has 4 items cycling saml→oidc→none→saml
+    // Row 0: saml, Row 1: oidc
+    await expect(component.getRow(0).authTypeBadge).toHaveText('SAML');
+    await expect(component.getRow(1).authTypeBadge).toHaveText('OIDC');
+  });
+
+  test('row with authType none shows "Not Configured" text', async ({
+    page,
+  }) => {
+    await gotoStory(page);
+    const component = createMultiSsoTestDriver(page.locator(componentName));
+
+    // Row 2 has authType 'none' (index 2 → authTypes[2] = 'none')
+    await expect(component.getRow(2).notConfigured).toBeVisible();
+    await expect(component.getRow(2).notConfigured).toHaveText(
+      'Not Configured',
+    );
+  });
+
+  test('allow-create=false hides the add button', async ({ page }) => {
+    await gotoStory(page, { 'allow-create': 'false' });
+    const component = createMultiSsoTestDriver(page.locator(componentName));
+    await expect(component.addButton).toBeHidden();
+  });
+
+  test('allow-delete=false removes all delete buttons', async ({ page }) => {
+    await gotoStory(page, { 'allow-delete': 'false' });
+    createMultiSsoTestDriver(page.locator(componentName));
+    // No [data-action="delete"] should exist anywhere in the component
+    await expect(
+      page.locator(componentName).locator('[data-action="delete"]'),
+    ).toHaveCount(0);
+  });
+
+  test('allow-configure=false removes all external-link anchors', async ({
+    page,
+  }) => {
+    await gotoStory(page, { 'allow-configure': 'false' });
+    createMultiSsoTestDriver(page.locator(componentName));
+    await expect(
+      page.locator(componentName).locator('.external-link'),
+    ).toHaveCount(0);
+  });
+
+  test('setData updates the rendered row count', async ({ page }) => {
+    await gotoStory(page);
+    const component = createMultiSsoTestDriver(page.locator(componentName));
+
+    await component.setData([
+      {
+        id: 'sso-1',
+        name: 'Only Config',
+        isDefault: true,
+        link: 'https://example.descope.com/sso/1',
+        authType: 'saml',
+      },
+      {
+        id: 'sso-2',
+        name: 'Second Config',
+        link: 'https://example.descope.com/sso/2',
+        authType: 'oidc',
+      },
+    ]);
+    await page.waitForTimeout(200);
+
+    await expect(component.rows).toHaveCount(2);
+  });
+});

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@descope-ui/descope-multi-sso",
+  "version": "3.14.0",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/MultiSsoClass.js"
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.58.2",
+    "e2e-utils": "3.14.0",
+    "test-drivers": "3.14.0"
+  },
+  "dependencies": {
+    "@descope-ui/common": "3.14.0",
+    "@descope-ui/theme-globals": "3.14.0",
+    "@descope-ui/descope-list": "3.14.0",
+    "@descope-ui/descope-list-item": "3.14.0",
+    "@descope-ui/descope-text": "3.14.0",
+    "@descope-ui/descope-icon": "3.14.0",
+    "@descope-ui/descope-button": "3.14.0",
+    "@descope-ui/descope-badge": "3.14.0"
+  },
+  "publishConfig": {
+    "link-workspace-packages": false
+  },
+  "scripts": {
+    "test": "echo 'No tests defined' && exit 0",
+    "test:e2e": "echo 'No e2e tests defined' && exit 0"
+  }
+}

package/project.json

@@ -0,0 +1,8 @@
+{
+  "name": "@descope-ui/descope-multi-sso",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/descope-multi-sso/src",
+  "projectType": "library",
+  "targets": {},
+  "tags": []
+}

package/src/component/MultiSsoClass.js

@@ -0,0 +1,521 @@
+import { compose } from '@descope-ui/common/utils';
+import {
+  getComponentName,
+  injectStyle,
+  cloneSlottedNodes,
+  forwardAttrs,
+} from '@descope-ui/common/components-helpers';
+import {
+  createStyleMixin,
+  draggableMixin,
+  componentNameValidationMixin,
+  createDynamicDataMixin,
+} from '@descope-ui/common/components-mixins';
+import { createBaseClass } from '@descope-ui/common/base-classes';
+import { ButtonClass } from '@descope-ui/descope-button/class';
+import { ListClass } from '@descope-ui/descope-list/class';
+import { IconClass } from '@descope-ui/descope-icon/class';
+import { ListItemClass } from '@descope-ui/descope-list-item/class';
+import { BadgeClass } from '@descope-ui/descope-badge/class';
+import { TextClass } from '@descope-ui/descope-text/class';
+
+export const componentName = getComponentName('multi-sso');
+
+const resolveAuthType = (authType) => {
+  if (!authType || authType === 'none')
+    return { label: 'Not Configured', configured: false };
+  return { label: authType.toUpperCase(), configured: true };
+};
+
+const itemRenderer = ({ id, name, isDefault, link, authType }, _, ref) => {
+  const deleteAction =
+    !isDefault && ref?.allowDelete
+      ? `<span
+          class="delete-btn delete-icon"
+          data-action="delete"
+          role="button"
+          tabindex="0"
+          title="${ref.deleteTooltipLabel}"
+        ></span>`
+      : '';
+
+  const externalLinkAction =
+    link && ref?.allowConfigure
+      ? `<a
+          class="external-link external-link-icon"
+          target="_blank"
+          rel="noopener noreferrer"
+          title="${ref.configureTooltipLabel}"
+        ></a>`
+      : '';
+
+  const { label: authTypeLabel, configured } = resolveAuthType(authType);
+  const authTypeRow = configured
+    ? `<div class="auth-type-row">
+        <descope-badge class="auth-type-badge" size="xs"></descope-badge>
+      </div>`
+    : `<div class="auth-type-row">
+        <descope-text
+          not-configured
+          variant="body2"
+          mode="secondary"
+        >${ref?.notConfiguredLabel}</descope-text>
+      </div>`;
+
+  const template = document.createElement('template');
+
+  template.innerHTML = `
+    <descope-list-item>
+      <div class="content">
+        <div class="top-row">
+          <descope-text
+            class="config-name"
+            variant="body1"
+            mode="primary"
+          ></descope-text>
+          <span class="action">
+            ${deleteAction}
+            ${externalLinkAction}
+          </span>
+        </div>
+        ${authTypeRow}
+      </div>
+    </descope-list-item>
+  `;
+
+  template.content.querySelector('.config-name').textContent = name;
+
+  const deleteBtn = template.content.querySelector('.delete-btn');
+  if (deleteBtn) {
+    deleteBtn.dataset.id = id;
+    deleteBtn.dataset.name = name;
+    deleteBtn.setAttribute('aria-label', ref.deleteTooltipLabel);
+    const deleteIcon = cloneSlottedNodes(ref, 'delete-icon');
+    if (deleteIcon) deleteBtn.append(deleteIcon);
+  }
+
+  const linkBtn = template.content.querySelector('.external-link');
+  if (linkBtn) {
+    linkBtn.setAttribute('aria-label', ref.configureTooltipLabel);
+    if (link) linkBtn.setAttribute('href', link);
+    const linkIcon = cloneSlottedNodes(ref, 'external-link-icon');
+    if (linkIcon) linkBtn.append(linkIcon);
+  }
+
+  const authTypeBadge = template.content.querySelector('.auth-type-badge');
+  if (authTypeBadge) authTypeBadge.textContent = authTypeLabel;
+  return template;
+};
+
+const BaseClass = createBaseClass({
+  componentName,
+  baseSelector: 'span.wrapper',
+});
+
+class RawMultiSsoClass extends BaseClass {
+  static get observedAttributes() {
+    return [
+      'label',
+      'create-button-label',
+      'not-configured-label',
+      'delete-tooltip-label',
+      'configure-tooltip-label',
+      'empty',
+    ].concat(super.observedAttributes);
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <span class="wrapper">
+      <div class="header">
+        <slot name="title-icon"></slot>
+        <descope-text class="title" variant="body1" mode="primary"></descope-text>
+        <descope-button
+          class="create-button"
+          size="sm"
+          variant="link"
+          mode="primary"
+          data-action="create"
+        >
+          <slot name="create-button-icon" slot="prefix"></slot>
+          <span class="create-button-label"></span>
+        </descope-button>
+      </div>
+      <descope-list></descope-list>
+      <slot name="delete-icon" class="hidden"></slot>
+      <slot name="external-link-icon" class="hidden"></slot>
+      </span>
+    `;
+
+    this.listEl = this.shadowRoot.querySelector('descope-list');
+
+    injectStyle(
+      `
+      :host {
+        display: inline-block;
+      }
+
+      :host(:not([allow-create="true"])) .create-button {
+        display: none;
+      }
+
+      .create-button {
+        min-width: 0;
+        flex-shrink:1;
+      }
+
+      .header {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      slot[name="title-icon"] {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+      }
+
+      .title {
+        flex: 1;
+        min-width: 0;
+        width:0;
+        flex-shrink: 0;
+
+      }
+
+      .title::part(text-wrapper) {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      .content {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        width: 100%;
+      }
+
+      .top-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        min-width: 0;
+      }
+
+      .config-name {
+        display: flex;
+        align-items: center;
+        min-width: 0;
+      }
+
+      .config-name::part(text-wrapper) {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      .auth-type-row {
+        display: flex;
+        align-items: center;
+      }
+
+      .action {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+      }
+
+      .hidden {
+        display: none;
+      }
+
+      .delete-btn {
+        cursor: pointer;
+        display: flex;
+      }
+
+      .delete-icon > *,
+      .external-link-icon > * {
+        width: 100%;
+        height: 100%;
+      }
+
+      .external-link {
+        cursor: pointer;
+        color: inherit;
+        display: flex;
+      }
+
+      descope-text {
+        display: flex;
+        align-items: center;
+        min-width: 0;
+      }
+      `,
+      this,
+    );
+  }
+
+  get deleteTooltipLabel() {
+    return this.getAttribute('delete-tooltip-label') ?? '';
+  }
+
+  get configureTooltipLabel() {
+    return this.getAttribute('configure-tooltip-label') ?? '';
+  }
+
+  init() {
+    super.init?.();
+
+    this.shadowRoot.querySelector('.title').textContent = this.label;
+    this.shadowRoot.querySelector('.create-button-label').textContent =
+      this.createButtonLabel;
+
+    this.listEl.itemRenderer = (item, index) => itemRenderer(item, index, this);
+
+    this.shadowRoot
+      .querySelector('[data-action="create"]')
+      .addEventListener('click', this.onCreateClick.bind(this));
+    this.listEl.addEventListener('click', this.onItemClick.bind(this));
+
+    forwardAttrs(this.listEl, this, { includeAttrs: ['empty'] });
+  }
+
+  onCreateClick() {
+    this.dispatchEvent(
+      new CustomEvent('create-clicked', { bubbles: true, detail: {} }),
+    );
+  }
+
+  onItemClick(e) {
+    const target = e.target.closest('[data-action="delete"]');
+    if (!target) return;
+
+    const id = target.getAttribute('data-id');
+    const name = target.getAttribute('data-name');
+    if (id) {
+      this.dispatchEvent(
+        new CustomEvent('delete-clicked', {
+          bubbles: true,
+          detail: { id, name },
+        }),
+      );
+    }
+  }
+
+  get allowCreate() {
+    return this.getAttribute('allow-create') === 'true';
+  }
+
+  get allowDelete() {
+    return this.getAttribute('allow-delete') === 'true';
+  }
+
+  get allowConfigure() {
+    return this.getAttribute('allow-configure') === 'true';
+  }
+
+  get label() {
+    return this.getAttribute('label');
+  }
+
+  get createButtonLabel() {
+    return this.getAttribute('create-button-label');
+  }
+
+  get notConfiguredLabel() {
+    return this.getAttribute('not-configured-label') || 'Not Configured';
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback?.(name, oldValue, newValue);
+    if (oldValue === newValue) return;
+
+    if (name === 'label') {
+      const el = this.shadowRoot?.querySelector('.title');
+      if (el) el.textContent = this.label;
+    } else if (name === 'create-button-label') {
+      const el = this.shadowRoot?.querySelector('.create-button-label');
+      if (el) el.textContent = this.createButtonLabel;
+    } else if (name === 'empty') {
+      this.listEl.classList.toggle('hidden', newValue === 'true');
+    }
+  }
+}
+
+const { host } = {
+  host: { selector: () => ':host' },
+};
+
+export const MultiSsoClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostMinWidth: { ...host, property: 'min-width' },
+      hostDirection: [
+        { ...host, property: 'direction' },
+        {
+          selector: () => 'descope-list-item',
+          property: 'direction',
+        },
+        {
+          selector: () => 'descope-text',
+          property: 'direction',
+        },
+      ],
+      headerGap: {
+        selector: () => '.header',
+        property: 'gap',
+      },
+      headerListGap: {
+        selector: () => 'descope-list',
+        property: 'margin-top',
+      },
+      itemContentGap: {
+        selector: () => '.content',
+        property: 'gap',
+      },
+      actionGap: {
+        selector: () => '.action',
+        property: 'gap',
+      },
+      unconfiguredAuthTypeTextColor: {
+        selector: () => '[not-configured]',
+        property: TextClass.cssVarList.textColor,
+      },
+      unconfiguredAuthTypeTextFontStyle: {
+        selector: () => '[not-configured]',
+        property: 'font-style',
+      },
+
+      buttonMaxWidth: {
+        selector: ButtonClass.componentName,
+        property: ButtonClass.cssVarList.hostMaxWidth,
+      },
+
+      listItemsGap: {
+        property: ListClass.cssVarList.gap,
+      },
+      listBackgroundColor: {
+        selector: () => ListClass.componentName,
+        property: ListClass.cssVarList.backgroundColor,
+      },
+      listBorderRadius: {
+        selector: () => ListClass.componentName,
+        property: ListClass.cssVarList.borderRadius,
+      },
+      listBorderWidth: {
+        selector: () => ListClass.componentName,
+        property: ListClass.cssVarList.borderWidth,
+      },
+      listBoxShadow: {
+        selector: () => ListClass.componentName,
+        property: ListClass.cssVarList.boxShadow,
+      },
+      listPadding: [
+        {
+          selector: () => ListClass.componentName,
+          property: ListClass.cssVarList.verticalPadding,
+        },
+        {
+          selector: () => ListClass.componentName,
+          property: ListClass.cssVarList.horizontalPadding,
+        },
+      ],
+
+      itemVerticalPadding: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.verticalPadding,
+      },
+      itemHorizontalPadding: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.horizontalPadding,
+      },
+      itemCursor: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.cursor,
+      },
+      itemOutline: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.outline,
+      },
+      itemBorderColor: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.borderColor,
+      },
+      itemBorderRadius: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.borderRadius,
+      },
+      itemBackgroundColor: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.backgroundColor,
+      },
+      badgeBorderColor: {
+        selector: () => BadgeClass.componentName,
+        property: BadgeClass.cssVarList.borderColor,
+      },
+      badgeTextColor: {
+        selector: () => BadgeClass.componentName,
+        property: BadgeClass.cssVarList.textColor,
+      },
+      badgeBackgroundColor: {
+        selector: () => BadgeClass.componentName,
+        property: BadgeClass.cssVarList.backgroundColor,
+      },
+      badgeBorderRadius: {
+        selector: () => BadgeClass.componentName,
+        property: BadgeClass.cssVarList.borderRadius,
+      },
+
+      titleIconSize: [
+        { selector: () => '::slotted([slot="title-icon"])', property: 'width' },
+        {
+          selector: () => '::slotted([slot="title-icon"])',
+          property: 'height',
+        },
+      ],
+      createButtonIconSize: [
+        {
+          selector: () => '::slotted([slot="create-button-icon"])',
+          property: 'width',
+        },
+        {
+          selector: () => '::slotted([slot="create-button-icon"])',
+          property: 'height',
+        },
+      ],
+      actionIconSize: [
+        { selector: () => '.delete-icon', property: 'width' },
+        { selector: () => '.delete-icon', property: 'height' },
+        { selector: () => '.external-link-icon', property: 'width' },
+        { selector: () => '.external-link-icon', property: 'height' },
+      ],
+      actionIconColor: [
+        { selector: () => '.delete-icon', property: IconClass.cssVarList.fill },
+        {
+          selector: () => '.external-link-icon',
+          property: IconClass.cssVarList.fill,
+        },
+      ],
+    },
+  }),
+  draggableMixin,
+  createDynamicDataMixin({
+    targetSelector: 'descope-list',
+    itemRenderer,
+    rerenderAttrsList: [
+      'allow-delete',
+      'allow-configure',
+      'not-configured-label',
+      'delete-tooltip-label',
+      'configure-tooltip-label',
+    ],
+  }),
+  componentNameValidationMixin,
+)(RawMultiSsoClass);

package/src/component/index.js

@@ -0,0 +1,12 @@
+import '@descope-ui/descope-list';
+import '@descope-ui/descope-list-item';
+import '@descope-ui/descope-text';
+import '@descope-ui/descope-icon';
+import '@descope-ui/descope-button';
+import '@descope-ui/descope-badge';
+
+import { componentName, MultiSsoClass } from './MultiSsoClass';
+
+customElements.define(componentName, MultiSsoClass);
+
+export { MultiSsoClass, componentName };

package/src/theme.js

@@ -0,0 +1,49 @@
+import { MultiSsoClass } from './component/MultiSsoClass';
+import globals from '@descope-ui/theme-globals';
+import { getThemeRefs } from '@descope-ui/common/theme-helpers';
+
+export const vars = MultiSsoClass.cssVarList;
+const globalRefs = getThemeRefs(globals);
+
+const MultiSso = {
+  [vars.hostWidth]: '300px',
+
+  [vars.headerGap]: globalRefs.spacing.md,
+  [vars.headerListGap]: globalRefs.spacing.md,
+  [vars.itemContentGap]: globalRefs.spacing.md,
+  [vars.actionGap]: globalRefs.spacing.sm,
+  [vars.unconfiguredAuthTypeTextColor]: globalRefs.colors.surface.dark,
+  [vars.unconfiguredAuthTypeTextFontStyle]: 'italic',
+  [vars.buttonMaxWidth]: '50%',
+
+  [vars.listBackgroundColor]: 'transparent',
+  [vars.listBorderRadius]: '0',
+  [vars.listBorderWidth]: '0',
+  [vars.listPadding]: '0',
+  [vars.listBoxShadow]: 'none',
+  [vars.listItemsGap]: globalRefs.spacing.lg,
+
+  [vars.itemBorderColor]: globalRefs.colors.surface.light,
+  [vars.itemVerticalPadding]: globalRefs.spacing.lg,
+  [vars.itemHorizontalPadding]: globalRefs.spacing.lg,
+  [vars.itemBorderRadius]: globalRefs.radius.xs,
+  [vars.itemOutline]: 'transparent',
+  [vars.itemBackgroundColor]: 'transparent',
+  [vars.itemCursor]: 'default',
+
+  [vars.badgeBorderColor]: globalRefs.colors.surface.light,
+  [vars.badgeTextColor]: globalRefs.colors.surface.dark,
+  [vars.badgeBorderRadius]: globalRefs.radius.xs,
+  [vars.badgeBackgroundColor]: globalRefs.colors.surface.main,
+
+  [vars.titleIconSize]: '24px',
+  [vars.createButtonIconSize]: '20px',
+  [vars.actionIconSize]: '20px',
+  [vars.actionIconColor]: globalRefs.colors.surface.dark,
+
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+};
+
+export default MultiSso;

package/stories/descope-multi-sso.stories.js

@@ -0,0 +1,132 @@
+import { componentName } from '../src/component';
+import {
+  directionControl,
+  fullWidthControl,
+} from '@descope-ui/common/sb-controls';
+import keyIcon from './icons/key.svg';
+import plusIcon from './icons/plus.svg';
+import trashIcon from './icons/trash.svg';
+import launchIcon from './icons/launch.svg';
+
+const authTypes = ['saml', 'oidc', 'none'];
+
+const generateMockConfigurations = (numberOfItems) =>
+  Array.from({ length: Number(numberOfItems) }, (_, i) => ({
+    id: `sso-${i + 1}`,
+    name: i === 0 ? 'Default SSO configuration' : `SSO Configuration ${i + 1}`,
+    isDefault: i === 0,
+    link: `https://example.descope.com/sso/${i + 1}`,
+    authType: authTypes[i % authTypes.length],
+  }));
+
+const Template = ({
+  direction,
+  'full-width': fullWidth,
+  label,
+  'create-button-label': createButtonLabel,
+  'allow-create': allowCreate,
+  'allow-delete': allowDelete,
+  'allow-configure': allowConfigure,
+  'delete-tooltip-label': deleteTooltipLabel,
+  'configure-tooltip-label': configureTooltipLabel,
+  showIcons,
+}) => `
+  <${componentName}
+    full-width="${fullWidth || false}"
+    label="${label || ''}"
+    create-button-label="${createButtonLabel || ''}"
+    st-host-direction="${direction || ''}"
+    allow-create="${allowCreate}"
+    allow-delete="${allowDelete}"
+    allow-configure="${allowConfigure}"
+    delete-tooltip-label="${deleteTooltipLabel || ''}"
+    configure-tooltip-label="${configureTooltipLabel || ''}"
+  >
+    ${showIcons ? `<descope-icon st-fill="currentcolor" src="${keyIcon}" src-dark="${keyIcon}" slot="title-icon"></descope-icon>` : ''}
+    ${showIcons ? `<descope-icon st-fill="currentcolor" src="${plusIcon}" src-dark="${plusIcon}" slot="create-button-icon"></descope-icon>` : ''}
+    <descope-icon src="${trashIcon}" src-dark="${trashIcon}" slot="delete-icon"></descope-icon>
+    <descope-icon src="${launchIcon}" src-dark="${launchIcon}" slot="external-link-icon"></descope-icon>
+  </${componentName}>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-multi-sso',
+  decorators: [
+    (story, { args }) => {
+      setTimeout(() => {
+        const comp = document.querySelector(componentName);
+        if (comp) comp.data = generateMockConfigurations(args.numberOfItems);
+      });
+      return story();
+    },
+    (story) => {
+      setTimeout(() => {
+        const comp = document.querySelector(componentName);
+        if (!comp) return;
+
+        const emit = (name, detail) => {
+          if (window && window.__STORYBOOK_ADDONS_CHANNEL__) {
+            window.__STORYBOOK_ADDONS_CHANNEL__.emit(
+              'storybook/actions/action-event',
+              { id: name, data: [detail], options: { name } },
+            );
+          }
+        };
+
+        comp.addEventListener('create-clicked', (e) =>
+          emit('CreateClicked', e.detail),
+        );
+        comp.addEventListener('delete-clicked', (e) =>
+          emit('DeleteClicked', e.detail),
+        );
+      });
+      return story();
+    },
+  ],
+  argTypes: {
+    ...directionControl,
+    ...fullWidthControl,
+    label: {
+      control: { type: 'text' },
+    },
+    'create-button-label': {
+      control: { type: 'text' },
+    },
+    numberOfItems: {
+      control: { type: 'number', min: 0 },
+    },
+    showIcons: {
+      control: { type: 'boolean' },
+    },
+    'allow-create': {
+      control: { type: 'boolean' },
+    },
+    'allow-delete': {
+      control: { type: 'boolean' },
+    },
+    'allow-configure': {
+      control: { type: 'boolean' },
+    },
+    'delete-tooltip-label': {
+      control: { type: 'text' },
+    },
+    'configure-tooltip-label': {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  label: 'SSO configurations',
+  'create-button-label': 'Add',
+  numberOfItems: 4,
+  showIcons: true,
+  'allow-create': true,
+  'allow-delete': true,
+  'allow-configure': true,
+  'delete-tooltip-label': 'Delete',
+  'configure-tooltip-label': 'Configure',
+};

package/stories/icons/key.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+  <path d="M12.65 10C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
+</svg>

package/stories/icons/launch.svg

@@ -0,0 +1,6 @@
+<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M19 19H5V5H12V3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V12H19V19ZM14 3V5H17.59L7.76 14.83L9.17 16.24L19 6.41V10H21V3H14Z"
+    fill="currentColor"
+  />
+</svg>

package/stories/icons/plus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+  <path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6v-2z"/>
+</svg>

package/stories/icons/trash.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M1 16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4H1V16ZM3 6H11V16H3V6ZM10.5 1L9.5 0H4.5L3.5 1H0V3H14V1H10.5Z" fill="currentColor"/>
+</svg>