@descope-ui/descope-trusted-devices 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,22 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.1.0 (2025-09-02)
+
+### Dependency Updates
+
+* `e2e-utils` updated to version `0.1.0`
+* `@descope-ui/common` updated to version `0.1.0`
+* `@descope-ui/theme-globals` updated to version `0.0.20`
+* `@descope-ui/descope-list` updated to version `0.1.0`
+* `@descope-ui/descope-list-item` updated to version `0.1.0`
+* `@descope-ui/descope-text` updated to version `0.0.20`
+* `@descope-ui/descope-link` updated to version `0.1.0`
+* `@descope-ui/descope-badge` updated to version `0.1.0`
+
+### Features
+
+* Trusted Devices ([#697](https://github.com/descope/web-components-ui/issues/697)) ([fb2f0eb](https://github.com/descope/web-components-ui/commit/fb2f0eb6773ed624354ed9f0b97d713bb8b10fce))
+
+# Changelog

package/e2e/descope-trusted-devices.spec.ts

@@ -0,0 +1,163 @@
+import { test, expect } from '@playwright/test';
+import { getStoryUrl, loopConfig, loopPresets } from 'e2e-utils';
+
+const componentAttributes = {
+  direction: ['ltr', 'rtl'],
+  format: ['MM-DD-YYYY', 'DD-MM-YYYY', 'YYYY-MM-DD'],
+  readonly: ['false', 'true'],
+  useLongNames: ['false', 'true'],
+  'hide-actions': ['false', 'true'],
+  'full-width': ['false', 'true'],
+  numberOfItems: [0, 1, 2, 5, 10],
+  'st-list-items-gap': ['0', '4px', '16px', '50px'],
+  'st-item-horizontal-padding': ['0', '4px', '16px', '50px'],
+  'st-item-vertical-padding': ['0', '4px', '16px', '50px'],
+  'remove-device-label': [
+    '',
+    'Remove',
+    'Long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long Sign out',
+  ],
+  'current-device-label': [
+    '',
+    'This device',
+    'Long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long current device',
+  ],
+  'last-login-label': [
+    '',
+    'Last seen',
+    'Long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long last login',
+  ],
+};
+
+const customLabels = {
+    'remove-device-label': componentAttributes['remove-device-label'][2],
+    'current-device-label': componentAttributes['current-device-label'][2],
+    'last-login-label': componentAttributes['last-login-label'][2],
+}
+
+const presets = {
+  'long content ltr': {
+    useLongNames: 'true',
+    ...customLabels
+  },
+  'long content rtl': {
+    direction: 'rtl',
+    useLongNames: 'true',
+    ...customLabels
+  },
+};
+
+const storyName = 'descope-trusted-devices';
+const componentName = 'descope-trusted-devices';
+
+test.describe('theme', () => {
+  loopConfig(componentAttributes, (attr, value) => {
+    test.describe(`${attr}: ${value}`, () => {
+      test.beforeEach(async ({ page }) => {
+        await page.goto(getStoryUrl(storyName, { [attr]: value }), {
+          waitUntil: 'networkidle',
+        });
+      });
+
+      test('style', async ({ page }) => {
+        const componentParent = page.locator(componentName);
+        await page.waitForTimeout(2000);
+
+        expect(await componentParent.screenshot()).toMatchSnapshot();
+      });
+    });
+  });
+});
+
+const setupEventListener = (eventName: string) => {
+  return `
+    window.eventDetails = [];
+    document.addEventListener('${eventName}', (event) => {
+      window.eventDetails.push(event.detail);
+    });
+  `;
+};
+
+test.describe('logic', () => {
+  test('dispatch remove action with appId', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName), {
+      waitUntil: 'networkidle',
+    });
+
+    await page.addInitScript(setupEventListener('remove-device-clicked'));
+
+    await page.reload({ waitUntil: 'networkidle' });
+
+    await page.getByText('Sign out').first().click();
+    await page.waitForTimeout(500);
+
+    const eventDetail = await page.evaluate(
+      () => (window as any).eventDetails[0],
+    );
+
+    expect(eventDetail).toBeDefined();
+    expect(eventDetail).toHaveProperty('action', 'remove-device');
+    expect(eventDetail).toHaveProperty('id', 'device-id-5');
+  });
+
+  test('prevent dispatch when readonly', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, { readonly: 'true' }), {
+      waitUntil: 'networkidle',
+    });
+
+    await page.addInitScript(setupEventListener('remove-device-clicked'));
+
+    await page.reload({ waitUntil: 'networkidle' });
+
+    await page.getByText('Sign out').first().click();
+    await page.waitForTimeout(500);
+
+    const eventDetail = await page.evaluate(
+      () => (window as any).eventDetails[0],
+    );
+
+    expect(eventDetail).not.toBeDefined();
+  });
+});
+
+test.describe('presets', () => {
+  loopPresets(presets, (preset, name) => {
+    test(name, async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, preset));
+      await page.waitForSelector(componentName);
+
+      const component = page.locator(componentName);
+
+      expect(
+        await component.screenshot({
+          animations: 'disabled',
+          timeout: 3000,
+        }),
+      ).toMatchSnapshot();
+    });
+  });
+
+  test('empty state', async ({ page, browserName }) => {
+    test.skip(browserName === 'webkit');
+    await page.goto(
+      getStoryUrl(storyName, {
+        numberOfItems: 0,
+        'empty-state': 'No devices found!',
+      }),
+      {
+        waitUntil: 'networkidle',
+      },
+    );
+
+    await page.waitForSelector(componentName);
+
+    const component = page.locator(componentName);
+
+    expect(
+      await component.screenshot({
+        animations: 'disabled',
+        timeout: 3000,
+      }),
+    ).toMatchSnapshot();
+  });
+});

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@descope-ui/descope-trusted-devices",
+  "version": "0.1.0",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/TrustedDevicesClass.js"
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.38.1",
+    "e2e-utils": "0.0.1"
+  },
+  "dependencies": {
+    "@descope-ui/common": "0.1.0",
+    "@descope-ui/theme-globals": "0.0.20",
+    "@descope-ui/descope-list": "0.1.0",
+    "@descope-ui/descope-list-item": "0.1.0",
+    "@descope-ui/descope-text": "0.0.20",
+    "@descope-ui/descope-link": "0.1.0",
+    "@descope-ui/descope-badge": "0.1.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,17 @@
+{
+  "name": "@descope-ui/descope-trusted-devices",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/descope-trusted-devices/src",
+  "projectType": "library",
+  "targets": {
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "trackDeps": true,
+        "push": false,
+        "preset": "conventional"
+      }
+    }
+  },
+  "tags": []
+}

package/src/component/TrustedDevicesClass.js

@@ -0,0 +1,395 @@
+import { compose } from '@descope-ui/common/utils';
+import {
+  getComponentName,
+  injectStyle,
+} 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 { BadgeClass } from '@descope-ui/descope-badge/class';
+import { ListClass } from '@descope-ui/descope-list/class';
+import { ListItemClass } from '@descope-ui/descope-list-item/class';
+import { getDeviceIcon, parseDate, sortFn } from './helpers';
+
+export const componentName = getComponentName('trusted-devices');
+
+const itemRenderer = (
+  { id, name, lastLoginDate, deviceType, isCurrent },
+  _,
+  ref,
+) => {
+  const itemClassName = isCurrent ? 'class="current-device"' : '';
+
+  const { iconSrc, iconSrcDark } = getDeviceIcon(deviceType);
+
+  const loginLabel = ref.lastLoginLabel ? `${ref.lastLoginLabel} ` : '';
+
+  const loginDate = parseDate(lastLoginDate, ref.format);
+
+  const badge = isCurrent
+    ? `<descope-badge
+    bordered="true"
+    size="xs"
+    mode="primary"
+    st-host-direction="${ref.direction}"
+  >
+    ${ref.currentDeviceLabel}
+  </descope-badge>`
+    : '';
+
+  const removeDeviceLink =
+    !ref.hideActions && !isCurrent
+      ? `<descope-link
+      class="remove-device"
+      variant="body1"
+      mode="primary"
+      data-action="remove-device"
+      data-device-id="${id}"
+      st-host-direction="${ref.direction}"
+      ellipsis="true"
+    >
+      ${ref.removeDeviceLabel}
+    </descope-link>`
+      : '';
+
+  const template = document.createElement('template');
+
+  template.innerHTML = `
+    <descope-list-item ${itemClassName}>
+      <div class="content">
+        <div class="main">
+          <span class="device">
+            <descope-icon
+              class="device-icon"
+              src="${iconSrc}"
+              src-dark="${iconSrcDark}">
+            </descope-icon>
+            <descope-text
+              class="device-name"
+              variant="body1"
+              mode="primary">
+            </descope-text>
+          </span>
+          <span class="panel">
+            ${badge}
+            ${removeDeviceLink}
+          </span>
+        </div>
+        <div class="meta">
+          <descope-text
+            variant="body2"
+            mode="primary"
+          >
+            ${loginLabel}
+          </descope-text>
+          <descope-text
+            class="login-date"
+            variant="body2"
+            mode="primary"
+          >
+            ${loginDate}
+          </descope-text>
+        </div>
+      </div>
+    </descope-list-item>
+  `;
+
+  // we return a template instead of returning a string so we can avoid XSS on device name
+  template.content.querySelector('.device-name').textContent = name;
+  return template;
+};
+
+const BaseClass = createBaseClass({
+  componentName,
+  baseSelector: ListClass.componentName,
+});
+
+class RawTrustedDevicesClass extends BaseClass {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+      <descope-list>
+        <slot name="empty-state" slot="empty-state"></slot>
+      </descope-list>
+    `;
+
+    this.appsList = this.shadowRoot.querySelector('descope-list');
+
+    injectStyle(
+      `
+      :host {
+        display: inline-block;
+      }
+
+      .descope-list-item {
+        min-width: 0;
+      }
+
+      .current-device {
+        order: -1;
+      }
+
+      .content {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+      }
+
+      .main {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .panel {
+        display: flex;
+        flex-shrink: 0;
+        max-width: 75%;
+        overflow: hidden;
+      }
+
+      .device {
+        display: flex;
+        min-width: 0;
+      }
+
+      .device-icon {
+        flex-shrink: 0;
+      }
+
+      .meta {
+        display: flex;
+      }
+
+      .login-date {
+        min-width: fit-content;
+      }
+
+      descope-badge {
+        min-width: 0;
+      }
+
+      descope-text {
+        display: flex;
+        align-items: center;        
+        min-width: 0;
+      }
+      descope-text::part(text-wrapper) {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      descope-link {
+        overflow: hidden;
+      }
+      descope-link.remove-device::part(wrapper) {
+        display: flex;
+        width: 100%;
+      }
+      descope-link.remove-device {
+        width: 100%;
+      }
+      `,
+      this,
+    );
+  }
+
+  init() {
+    super.init?.();
+
+    this.appsList.itemRenderer = itemRenderer;
+
+    this.appsList.addEventListener('click', this.onRemoveClick.bind(this));
+  }
+
+  onRemoveClick(e) {
+    if (this.readOnly) return;
+
+    const target = e.target.closest('[data-device-id]');
+    const deviceId = target?.getAttribute('data-device-id');
+
+    if (deviceId) {
+      this.dispatchEvent(
+        new CustomEvent('remove-device-clicked', {
+          bubbles: true,
+          detail: { id: deviceId, action: 'remove-device' },
+        }),
+      );
+    }
+  }
+
+  get readOnly() {
+    return this.getAttribute('readonly') === 'true';
+  }
+
+  get hideActions() {
+    return this.getAttribute('hide-actions') === 'true';
+  }
+
+  get format() {
+    return this.getAttribute('format')?.toUpperCase() || 'MM-DD-YYYY';
+  }
+
+  get removeDeviceLabel() {
+    return this.getAttribute('remove-device-label') || 'Sign out';
+  }
+
+  get currentDeviceLabel() {
+    return this.getAttribute('current-device-label') || 'Current device';
+  }
+
+  get lastLoginLabel() {
+    return this.getAttribute('last-login-label') || 'Last login:';
+  }
+
+  get direction() {
+    return this.getAttribute('st-host-direction');
+  }
+}
+
+const { host } = {
+  host: { selector: () => ':host' },
+};
+
+export const TrustedDevicesClass = 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',
+        },
+      ],
+
+      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,
+      },
+      itemContentGap: {
+        selector: () => '.content',
+        property: 'gap',
+      },
+
+      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,
+      },
+
+      devicePanelGap: {
+        selector: () => '.main',
+        property: 'gap',
+      },
+      deviceIconGap: {
+        selector: () => '.device',
+        property: 'gap',
+      },
+      deviceIconSize: [
+        {
+          selector: () => '.device-icon',
+          property: 'width',
+        },
+        {
+          selector: () => '.device-icon',
+          property: 'height',
+        },
+      ],
+
+      lastLoginLabelGap: {
+        selector: ' .meta',
+        property: 'gap',
+      },
+    },
+  }),
+  draggableMixin,
+  createDynamicDataMixin({
+    itemRenderer,
+    sortFn,
+    rerenderAttrsList: [
+      'remove-device-label',
+      'current-device-label',
+      'last-login-label',
+      'format',
+      'hide-actions',
+    ],
+  }),
+  componentNameValidationMixin,
+)(RawTrustedDevicesClass);

package/src/component/helpers.js

@@ -0,0 +1,67 @@
+import desktopDeviceIconLight from './icons/desktop-device-light.svg';
+import mobileDeviceIconLight from './icons/mobile-device-light.svg';
+import tabletDeviceIconLight from './icons/tablet-device-light.svg';
+import unknownDeviceIconLight from './icons/unknown-device-light.svg';
+import desktopDeviceIconDark from './icons/desktop-device-dark.svg';
+import mobileDeviceIconDark from './icons/mobile-device-dark.svg';
+import tabletDeviceIconDark from './icons/tablet-device-dark.svg';
+import unknownDeviceIconDark from './icons/unknown-device-dark.svg';
+
+const ensureDate = (loginDate) => {
+  const numVal = parseInt(loginDate, 10);
+  if (Number.isNaN(numVal)) return 0;
+  return numVal;
+}
+
+export const sortFn = (a, b) =>
+  ensureDate(b.lastLoginDate) - ensureDate(a.lastLoginDate);
+
+export const parseDate = (epoch, format) => {
+  if (Number.isNaN(parseInt(epoch, 10))) return '';
+
+  const date = new Date(epoch);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const time = date.toLocaleTimeString('en-US', {
+    hour12: false,
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+  const formatMap = {
+    'DD-MM-YYYY': `${day}/${month}/${year}`,
+    'YYYY-MM-DD': `${year}/${month}/${day}`,
+    'MM-DD-YYYY': `${month}/${day}/${year}`,
+  };
+
+  const dateStr = formatMap[format] || formatMap['MM/DD/YYYY'];
+  return `${dateStr} ${time}`;
+};
+
+export const deviceIconMap = {
+  desktop: {
+    light: desktopDeviceIconLight,
+    dark: desktopDeviceIconDark,
+  },
+  mobile: {
+    light: mobileDeviceIconLight,
+    dark: mobileDeviceIconDark,
+  },
+  tablet: {
+    light: tabletDeviceIconLight,
+    dark: tabletDeviceIconDark,
+  },
+  unknown: {
+    light: unknownDeviceIconLight,
+    dark: unknownDeviceIconDark,
+  },
+};
+
+export const getDeviceIcon = (deviceType) => {
+  const icon = deviceIconMap[deviceType] || deviceIconMap.unknown;
+  return {
+    iconSrc: icon.light,
+    iconSrcDark: icon.dark,
+  };
+};

package/src/component/icons/desktop-device-dark.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 18.5C21.1 18.5 21.99 17.6 21.99 16.5L22 6.5C22 5.4 21.1 4.5 20 4.5H4C2.9 4.5 2 5.4 2 6.5V16.5C2 17.6 2.9 18.5 4 18.5H0V20.5H24V18.5H20ZM4 6.5H20V16.5H4V6.5Z" fill="#F4F5F6"/>
+</svg>

package/src/component/icons/desktop-device-light.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 18C21.1 18 21.99 17.1 21.99 16L22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V16C2 17.1 2.9 18 4 18H0V20H24V18H20ZM4 6H20V16H4V6Z" fill="#636C74"/>
+</svg>

package/src/component/icons/mobile-device-dark.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 1.5H8C6.34 1.5 5 2.84 5 4.5V20.5C5 22.16 6.34 23.5 8 23.5H16C17.66 23.5 19 22.16 19 20.5V4.5C19 2.84 17.66 1.5 16 1.5ZM17 18.5H7V4.5H17V18.5ZM14 21.5H10V20.5H14V21.5Z" fill="#F4F5F6"/>
+</svg>

package/src/component/icons/mobile-device-light.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 1H8C6.34 1 5 2.34 5 4V20C5 21.66 6.34 23 8 23H16C17.66 23 19 21.66 19 20V4C19 2.34 17.66 1 16 1ZM17 18H7V4H17V18ZM14 21H10V20H14V21Z" fill="#636C74"/>
+</svg>

package/src/component/icons/tablet-device-dark.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5303_863)">
+<path d="M18.5 0.5H4.5C3.12 0.5 2 1.62 2 3V22C2 23.38 3.12 24.5 4.5 24.5H18.5C19.88 24.5 21 23.38 21 22V3C21 1.62 19.88 0.5 18.5 0.5ZM11.5 23.5C10.67 23.5 10 22.83 10 22C10 21.17 10.67 20.5 11.5 20.5C12.33 20.5 13 21.17 13 22C13 22.83 12.33 23.5 11.5 23.5ZM19 19.5H4V3.5H19V19.5Z" fill="#F4F5F6"/>
+</g>
+<defs>
+<clipPath id="clip0_5303_863">
+<rect width="24" height="24" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>

package/src/component/icons/tablet-device-light.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5252_768)">
+<path d="M18.5 0.5H4.5C3.12 0.5 2 1.62 2 3V22C2 23.38 3.12 24.5 4.5 24.5H18.5C19.88 24.5 21 23.38 21 22V3C21 1.62 19.88 0.5 18.5 0.5ZM11.5 23.5C10.67 23.5 10 22.83 10 22C10 21.17 10.67 20.5 11.5 20.5C12.33 20.5 13 21.17 13 22C13 22.83 12.33 23.5 11.5 23.5ZM19 19.5H4V3.5H19V19.5Z" fill="#636C74"/>
+</g>
+<defs>
+<clipPath id="clip0_5252_768">
+<rect width="24" height="24" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>

package/src/component/icons/unknown-device-dark.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 6H22V4H4C2.9 4 2 4.9 2 6V17H0V20H14V17H4V6ZM23 8H17C16.45 8 16 8.45 16 9V19C16 19.55 16.45 20 17 20H23C23.55 20 24 19.55 24 19V9C24 8.45 23.55 8 23 8ZM22 17H18V10H22V17Z" fill="white"/>
+</svg>

package/src/component/icons/unknown-device-light.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 6.5H22V4.5H4C2.9 4.5 2 5.4 2 6.5V17.5H0V20.5H14V17.5H4V6.5ZM23 8.5H17C16.45 8.5 16 8.95 16 9.5V19.5C16 20.05 16.45 20.5 17 20.5H23C23.55 20.5 24 20.05 24 19.5V9.5C24 8.95 23.55 8.5 23 8.5ZM22 17.5H18V10.5H22V17.5Z" fill="#636C74"/>
+</svg>

package/src/component/index.js

@@ -0,0 +1,11 @@
+import '@descope-ui/descope-list';
+import '@descope-ui/descope-list-item';
+import '@descope-ui/descope-text';
+import '@descope-ui/descope-link';
+import '@descope-ui/descope-badge';
+
+import { componentName, TrustedDevicesClass } from './TrustedDevicesClass';
+
+customElements.define(componentName, TrustedDevicesClass);
+
+export { TrustedDevicesClass, componentName };

package/src/theme.js

@@ -0,0 +1,42 @@
+import { TrustedDevicesClass } from './component/TrustedDevicesClass';
+import globals from '@descope-ui/theme-globals';
+
+export const vars = TrustedDevicesClass.cssVarList;
+
+const TrustedDevices = {
+  [vars.hostWidth]: 'auto',
+  [vars.hostWidth]: '300px',
+  [vars.hostMinWidth]: '300px',
+
+  [vars.listBackgroundColor]: 'transparent',
+  [vars.listBorderRadius]: '0',
+  [vars.listBorderWidth]: '0',
+  [vars.listPadding]: '0',
+  [vars.listBoxShadow]: 'none',
+  [vars.listItemsGap]: globals.spacing.lg,
+
+  [vars.itemBorderColor]: globals.colors.surface.light,
+  [vars.itemVerticalPadding]: globals.spacing.lg,
+  [vars.itemHorizontalPadding]: globals.spacing.lg,
+  [vars.itemBorderRadius]: globals.radius.xs,
+  [vars.itemOutline]: 'transparent',
+  [vars.itemBackgroundColor]: 'transparent',
+  [vars.itemCursor]: 'default',
+  [vars.itemContentGap]: globals.spacing.sm,
+
+  [vars.badgeBorderColor]: globals.colors.surface.light,
+  [vars.badgeTextColor]: globals.colors.surface.dark,
+  [vars.badgeBorderRadius]: globals.radius.xs,
+  [vars.badgeBackgroundColor]: globals.colors.surface.main,
+
+  [vars.devicePanelGap]: globals.spacing.md,
+  [vars.deviceIconGap]: globals.spacing.md,
+  [vars.deviceIconSize]: '24px',
+  [vars.lastLoginLabelGap]: globals.spacing.xs,
+
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+};
+
+export default TrustedDevices;

package/stories/descope-trusted-devices.stories.js

@@ -0,0 +1,148 @@
+import { componentName } from '../src/component';
+import {
+  directionControl,
+  fullWidthControl,
+  readOnlyControl,
+} from '@descope-ui/common/sb-controls';
+
+const createUTCDate = (year, month, day, index = 0) => {
+  const hours = (index * 2 + 8) % 24; // Start at 8AM, increment by 2 hours per index
+  const minutes = (index * 15) % 60; // Increment by 15 minutes per index
+  return Date.UTC(year, month - 1, day, hours, minutes);
+};
+
+const generateDeviceName = (index, useLongNames = false) => {
+  if (useLongNames) {
+    const longNames = [
+      'MacBook Pro 16-inch 2023 M2 Max with 32GB RAM and 1TB SSD Storage - Ultra High Performance Workstation for Professional Development and Creative Work - Featuring Advanced Neural Engine, ProMotion Display Technology, and Premium Build Quality for Enterprise Applications',
+      'iPhone 15 Pro Max 512GB Natural Titanium with Advanced Camera System - Flagship Mobile Device with Pro Photography Capabilities and 5G Connectivity - Enhanced with Action Button, USB-C Port, and Revolutionary A17 Pro Chip with Ray Tracing for Mobile Gaming Excellence',
+      'Dell XPS 13 Plus Developer Edition with Ubuntu 22.04 LTS and Intel i7 - Premium Ultrabook Laptop Optimized for Software Development and Programming - Featuring Edge-to-Edge Display, Capacitive Touch Function Row, and Zero Lattice Keyboard for Modern Productivity',
+      'Samsung Galaxy S24 Ultra 1TB Phantom Black with S Pen and 200MP Camera - Premium Android Smartphone with Advanced Productivity Features and AI Integration - Powered by Snapdragon 8 Gen 3 Processor with Galaxy AI and Enhanced Night Photography Capabilities',
+      'Surface Laptop Studio 2 with Intel Core i7 and NVIDIA GeForce RTX 4060 - Convertible Windows Laptop with Touch Screen and Dedicated Graphics for Creative Professionals - Featuring Dynamic Woven Hinge, Surface Pen Support, and Studio Mode for Digital Artists',
+    ];
+    return longNames[index % longNames.length];
+  }
+  return `Device ${index + 1}`;
+};
+
+const generateDeviceData = (numberOfItems, useLongNames = false) => {
+  return Array.from({ length: Number(numberOfItems) }, (_, i) => {
+    const numItems = Number(numberOfItems);
+    const currentDeviceIndex = Math.min(1, numItems - 1); // Ensure current device exists
+    return {
+      id: `device-id-${i + 1}`,
+      name: generateDeviceName(i, useLongNames),
+      deviceType: ['desktop', 'mobile', 'tablet', 'unknown'][i % 4],
+      lastLoginDate: createUTCDate(2025, i + 1, i + 4, i),
+      isCurrent: i === currentDeviceIndex,
+    };
+  });
+};
+
+const Template = ({
+  direction,
+  'full-width': fullWidth,
+  'hide-actions': hideActions,
+  'remove-device-label': removeButtonLabel,
+  'current-device-label': currentDeviceLabel,
+  'last-login-label': lastLoginLabel,
+  readonly,
+  emptyState,
+  format,
+  'st-list-items-gap': stListItemsGap,
+  'st-item-horizontal-padding': stItemHorizontalPadding,
+  'st-item-vertical-padding': stItemVerticalPadding
+}) => `
+  <descope-trusted-devices
+    full-width="${fullWidth || false}"
+    hide-actions="${hideActions || false}"
+    remove-device-label="${removeButtonLabel || ''}"
+    current-device-label="${currentDeviceLabel || ''}"
+    last-login-label="${lastLoginLabel || ''}"
+    readonly="${readonly || false}"
+    format="${format || ''}"
+    st-host-direction="${direction || ''}"
+    st-list-items-gap="${stListItemsGap || ''}"
+    st-item-horizontal-padding="${stItemHorizontalPadding || ''}"
+    st-item-vertical-padding="${stItemVerticalPadding || ''}"
+  >
+    <div slot="empty-state">${emptyState}</div>
+  </descope-trusted-devices>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-trusted-devices',
+  decorators: [
+    (story, { args }) => {
+      setTimeout(() => {
+        const comp = document.querySelector('descope-trusted-devices');
+        comp.data = generateDeviceData(args.numberOfItems, args.useLongNames);
+      });
+      return story();
+    },
+    (story) => {
+      setTimeout(() => {
+        const component = document.querySelector('descope-trusted-devices');
+        if (component) {
+          component.addEventListener('remove-device-clicked', (e) => {
+            if (window && window.__STORYBOOK_ADDONS_CHANNEL__) {
+              window.__STORYBOOK_ADDONS_CHANNEL__.emit(
+                'storybook/actions/action-event',
+                {
+                  id: 'RemoveDeviceClicked',
+                  data: [e.detail],
+                  options: { name: 'Remove Device Clicked' },
+                },
+              );
+            }
+          });
+        }
+      });
+      return story();
+    },
+  ],
+  argTypes: {
+    ...directionControl,
+    ...readOnlyControl,
+    ...fullWidthControl,
+    'remove-device-label': {
+      control: { type: 'text' },
+    },
+    'current-device-label': {
+      control: { type: 'text' },
+    },
+    'last-login-label': {
+      control: { type: 'text' },
+    },
+    format: {
+      control: { type: 'select' },
+      options: ['MM-DD-YYYY', 'DD-MM-YYYY', 'YYYY-MM-DD'],
+    },
+    'hide-actions': {
+      control: { type: 'boolean' },
+    },
+    useLongNames: {
+      control: { type: 'boolean' },
+      name: 'Use Long Device Names',
+    },
+    numberOfItems: {
+      control: { type: 'number', min: 0 },
+    }
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  numberOfItems: 5,
+  emptyState: 'No devices found',
+  format: 'MM-DD-YYYY',
+  'current-device-label': 'Current device',
+  'last-login-label': 'Last login:',
+  'remove-device-label': 'Sign out',
+  useLongNames: false,
+  'st-list-items-gap': '',
+  'st-item-horizontal-padding': '',
+  'st-item-vertical-padding': '' 
+};