@descope-ui/descope-attachment 3.2.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## [3.2.0](https://github.com/descope/web-components-ui/compare/web-components-ui-3.1.13...web-components-ui-3.2.0) (2026-04-16)
+
+
+### Features
+
+* add descope-last-auth-badge component ([#982](https://github.com/descope/web-components-ui/issues/982)) ([055b461](https://github.com/descope/web-components-ui/commit/055b4618abbdf518494a2984e56d66e58fdb4809))

package/e2e/attachment.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test';
+import { getStoryUrl, loopConfig } from 'e2e-utils';
+
+const componentAttributes = {
+  position: [
+    'top-start',
+    'top-end',
+    'top-center',
+    'bottom-start',
+    'bottom-end',
+    'bottom-center',
+  ],
+  'offset-x': [0, 20, -20],
+  'offset-y': [0, 20, -20],
+  direction: ['ltr', 'rtl'],
+};
+
+const storyName = 'descope-attachment';
+
+test.describe('theme', () => {
+  loopConfig(componentAttributes, (attr, value) => {
+    test(`${attr}: ${value}`, async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, { [attr]: value }), {
+        waitUntil: 'networkidle',
+      });
+      expect(await page.screenshot()).toMatchSnapshot();
+    });
+  });
+});

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@descope-ui/descope-attachment",
+  "version": "3.2.0",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/AttachmentClass.js"
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.58.2",
+    "e2e-utils": "3.2.0",
+    "test-assets": "3.2.0",
+    "test-drivers": "3.2.0"
+  },
+  "dependencies": {
+    "@descope-ui/common": "3.2.0",
+    "@descope-ui/theme-globals": "3.2.0"
+  },
+  "publishConfig": {
+    "link-workspace-packages": false
+  },
+  "scripts": {
+    "test": "echo 'No tests defined' && exit 0",
+    "test:e2e": "playwright test"
+  }
+}

package/project.json

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

package/src/component/AttachmentClass.js

@@ -0,0 +1,152 @@
+import {
+  componentNameValidationMixin,
+  createStyleMixin,
+  draggableMixin,
+} from '@descope-ui/common/components-mixins';
+import { createBaseClass } from '@descope-ui/common/base-classes';
+import {
+  getComponentName,
+  injectStyle,
+} from '@descope-ui/common/components-helpers';
+import { compose } from '@descope-ui/common/utils';
+
+export const componentName = getComponentName('attachment');
+
+const ATTACHMENT_POSITIONS = [
+  'top-end',
+  'top-start',
+  'top-center',
+  'bottom-start',
+  'bottom-end',
+  'bottom-center',
+];
+
+const DEFAULT_POSITION = ATTACHMENT_POSITIONS[0];
+
+class RawAttachment extends createBaseClass({
+  componentName,
+  baseSelector: ':host > .wrapper',
+}) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+      <div class="wrapper">
+        <slot></slot>
+        <div class="attachment-container">
+          <slot name="attachment"></slot>
+        </div>
+      </div>
+    `;
+
+    this.defaultSlot = this.shadowRoot.querySelector('slot:not([name])');
+    this.attachmentSlot = this.shadowRoot.querySelector(
+      'slot[name="attachment"]',
+    );
+  }
+
+  static get observedAttributes() {
+    return [...(super.observedAttributes || []), 'position'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    super.attributeChangedCallback?.(name, oldVal, newVal);
+    if (name === 'position' && oldVal !== newVal) {
+      this.#handlePositionChange();
+    }
+  }
+
+  init() {
+    super.init?.();
+
+    injectStyle(
+      `
+      :host {
+        display: inline-block;
+      }
+      .wrapper {
+        position: relative;
+        display: inline-flex;
+      }
+      .attachment-container {
+        position: absolute;
+        z-index: 1;
+        pointer-events: none;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        container-type: inline-size;
+      }
+      :host(.hidden) {
+        display: none;
+      }
+      `,
+      this,
+    );
+
+    this.#handlePositionChange();
+
+    this.defaultSlot.addEventListener('slotchange', () => {
+      this.#setVisibility();
+      this.#syncDirection();
+    });
+
+    window.requestAnimationFrame(() => {
+      this.#setVisibility();
+      this.#syncDirection();
+    });
+  }
+
+  #setVisibility() {
+    const hasAnchor = this.defaultSlot?.assignedElements()?.length > 0;
+    this.classList.toggle('hidden', !hasAnchor);
+  }
+
+  #syncDirection() {
+    const child = this.defaultSlot?.assignedElements()?.[0];
+    if (!child) return;
+
+    const { direction } = window.getComputedStyle(child);
+
+    // currently we support direction sync only for web-components-ui
+    // elements, which support st-host-direction attribute.
+    this.attachmentSlot?.assignedElements().forEach((el) => {
+      el.setAttribute('st-host-direction', direction);
+    });
+  }
+
+  get offsetX() {
+    return this.getAttribute('offset-x') || '0px';
+  }
+
+  get offsetY() {
+    return this.getAttribute('offset-y') || '0px';
+  }
+
+  #handlePositionChange() {
+    const pos = this.getAttribute('position');
+    if (!ATTACHMENT_POSITIONS.includes(pos)) {
+      this.setAttribute('position', DEFAULT_POSITION);
+    }
+  }
+}
+
+const attachmentContainer = { selector: () => '.attachment-container' };
+
+export const AttachmentClass = compose(
+  createStyleMixin({
+    mappings: {
+      transform: { ...attachmentContainer },
+      justifyContent: { ...attachmentContainer },
+      maxWidth: { ...attachmentContainer },
+      top: { ...attachmentContainer },
+      bottom: { ...attachmentContainer },
+      left: { ...attachmentContainer },
+      right: { ...attachmentContainer },
+      offsetX: {},
+      offsetY: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+)(RawAttachment);

package/src/component/index.js

@@ -0,0 +1,5 @@
+import { componentName, AttachmentClass } from './AttachmentClass';
+
+customElements.define(componentName, AttachmentClass);
+
+export { AttachmentClass, componentName };

package/src/theme.js

@@ -0,0 +1,52 @@
+import { useVar } from '@descope-ui/common/theme-helpers';
+import { AttachmentClass } from './component/AttachmentClass';
+
+const vars = AttachmentClass.cssVarList;
+
+const defaultOffset = '8px';
+const insetCalc = `calc(${defaultOffset} + var(${vars.offsetX}))`;
+
+const attachment = {
+  [vars.maxWidth]: `calc(100% - 2 * ${defaultOffset})`,
+
+  position: {
+    'top-start': {
+      [vars.transform]: 'translateY(-50%)',
+      [vars.justifyContent]: 'start',
+      [vars.left]: insetCalc,
+      [vars.top]: useVar(vars.offsetY),
+    },
+    'top-center': {
+      [vars.transform]: 'translate(-50%, -50%)',
+      [vars.justifyContent]: 'center',
+      [vars.top]: useVar(vars.offsetY),
+      [vars.left]: '50%',
+    },
+    'top-end': {
+      [vars.transform]: 'translateY(-50%)',
+      [vars.justifyContent]: 'end',
+      [vars.right]: insetCalc,
+      [vars.top]: useVar(vars.offsetY),
+    },
+    'bottom-start': {
+      [vars.transform]: 'translateY(50%)',
+      [vars.justifyContent]: 'start',
+      [vars.left]: insetCalc,
+      [vars.bottom]: useVar(vars.offsetY),
+    },
+    'bottom-center': {
+      [vars.bottom]: useVar(vars.offsetY),
+      [vars.transform]: 'translate(-50%, 50%)',
+      [vars.justifyContent]: 'center',
+      [vars.left]: '50%',
+    },
+    'bottom-end': {
+      [vars.transform]: 'translateY(50%)',
+      [vars.justifyContent]: 'end',
+      [vars.right]: insetCalc,
+      [vars.bottom]: useVar(vars.offsetY),
+    },
+  },
+};
+
+export default attachment;

package/stories/descope-attachment.stories.js

@@ -0,0 +1,113 @@
+import { directionControl } from '@descope-ui/common/sb-controls';
+import { componentName } from '../src/component';
+import { base64svg } from 'test-assets';
+
+const SIZES = ['xs', 'sm', 'md', 'lg'];
+
+const button = (size, { direction, label } = {}) => `
+  <descope-button
+    variant="outline"
+    mode="primary"
+    size="${size}"
+    ${direction ? ` st-host-direction="${direction}"` : ''}
+    ${label ? '' : ' square="true"'}>
+      ${label || `<descope-icon src=${base64svg}></descope-icon>`}
+    </descope-button>
+  `;
+
+const attachment = (position, anchor, badgeLabel, offsetX, offsetY) => `
+  <descope-attachment position="${position}" st-offset-x="${offsetX}px" st-offset-y="${offsetY}px">
+    ${anchor}
+    <descope-badge
+      slot="attachment"
+      mode="primary"
+      variant="contained"
+      size="xs"
+      shadow="sm"
+      bordered="true"
+      shrink-to-indicator="true"
+      st-offset-x="${offsetX}px"
+      st-offset-y="${offsetY}px"
+    >
+      ${badgeLabel}
+    </descope-badge>
+  </descope-attachment>`;
+
+const Template = ({
+  position,
+  buttonLabel,
+  badgeLabel,
+  direction,
+  'offset-x': offsetX,
+  'offset-y': offsetY,
+}) => `
+  <div class="item">
+    ${SIZES.map((size) =>
+      attachment(
+        position,
+        button(size, { direction, label: buttonLabel }),
+        badgeLabel,
+        offsetX,
+        offsetY,
+      ),
+    ).join('')}
+    ${SIZES.map((size) =>
+      attachment(position, button(size), badgeLabel, offsetX, offsetY),
+    ).join('')}
+  </div>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-attachment',
+  parameters: {
+    controls: { expanded: true },
+  },
+  decorators: [
+    (story) => `
+      <style nonce="${window.DESCOPE_NONCE}">
+        .item {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 16px;
+        }
+      </style>
+      ${story()}
+    `,
+  ],
+  argTypes: {
+    position: {
+      control: { type: 'select' },
+      options: [
+        'top-end',
+        'top-start',
+        'top-center',
+        'bottom-end',
+        'bottom-start',
+        'bottom-center',
+      ],
+    },
+    ...directionControl,
+    badgeLabel: {
+      name: 'Badge Label',
+      control: 'text',
+    },
+    'offset-x': {
+      control: 'number',
+    },
+    'offset-y': {
+      control: 'number',
+    },
+  },
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  position: 'top-end',
+  badgeLabel: 'Last used -',
+  buttonLabel: 'Sign in with Google -',
+  direction: 'ltr',
+  'offset-x': 0,
+  'offset-y': 2,
+};