@descope-ui/descope-anchored 3.7.1

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## [3.7.1](https://github.com/descope/web-components-ui/compare/web-components-ui-3.7.0...web-components-ui-3.7.1) (2026-05-11)
+
+
+### Bug Fixes
+
+* **descope-attachment:** sync parent layout size ([#1003](https://github.com/descope/web-components-ui/issues/1003)) ([70e9058](https://github.com/descope/web-components-ui/commit/70e905824cb93a9a10f7b85016c9938b33db0ad2))
+
+# @descope-ui/descope-anchored

package/e2e/descope-anchored.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test';
+import { getStoryUrl, loopConfig } from 'e2e-utils';
+
+const componentAttributes = {
+  fullWidth: ['true', 'false'],
+  hasAnchor: ['true', 'false'],
+  direction: ['ltr', 'rtl'],
+};
+
+const storyName = 'descope-anchored';
+const componentName = 'story-anchor-host';
+
+test.describe('layout', () => {
+  loopConfig(componentAttributes, (attr, value) => {
+    test(`${attr}: ${value}`, async ({ page }) => {
+      const component = page.locator(componentName);
+
+      await page.goto(getStoryUrl(storyName, { [attr]: value }), {
+        waitUntil: 'networkidle',
+      });
+
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+  });
+});

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@descope-ui/descope-anchored",
+  "version": "3.7.1",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./class": {
+      "import": "./src/component/AnchoredClass.js"
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.58.2",
+    "e2e-utils": "3.7.1",
+    "test-assets": "3.7.1",
+    "test-drivers": "3.7.1"
+  },
+  "dependencies": {
+    "@descope-ui/common": "3.7.1",
+    "@descope-ui/theme-globals": "3.7.1"
+  },
+  "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-anchored",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/descope-anchored/src",
+  "projectType": "library",
+  "targets": {},
+  "tags": []
+}

package/src/component/AnchoredClass.js

@@ -0,0 +1,167 @@
+import { componentNameValidationMixin } from '@descope-ui/common/components-mixins';
+import { createBaseClass } from '@descope-ui/common/base-classes';
+import {
+  forwardAttrs,
+  getComponentName,
+  injectStyle,
+} from '@descope-ui/common/components-helpers';
+import { compose } from '@descope-ui/common/utils';
+
+export const componentName = getComponentName('anchored');
+
+class RawAnchored extends createBaseClass({
+  componentName,
+  baseSelector: '.anchored-root',
+}) {
+  #stretchObserver = null;
+
+  #directionObserver = null;
+
+  #hostStretchSheet = null;
+
+  get #anchor() {
+    return this.defaultSlot.assignedElements({ flatten: true })[0];
+  }
+
+  get #anchored() {
+    return this.shadowRoot
+      .querySelector('slot[name="anchored"]')
+      ?.assignedElements()[0];
+  }
+
+  get #outerHost() {
+    return this.getRootNode().host;
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+      <div class="anchored-root" part="root">
+        <slot></slot>
+        <div class="anchored-host" part="anchored">
+          <slot name="anchored"></slot>
+        </div>
+      </div>
+    `;
+
+    this.defaultSlot = this.shadowRoot.querySelector('slot:not([name])');
+  }
+
+  init() {
+    super.init?.();
+
+    injectStyle(
+      `
+      :host {
+        display: inline-flex;
+        position: relative;
+        box-sizing: border-box;
+      }
+
+      :host(:not([has-anchor])) {
+        display: none;
+      }
+
+      .anchored-root {
+        position: relative;
+        display: flex;
+        width: 100%;
+        min-width: 0;
+      }
+
+      /* Make anchor fill the flex row and allow it to shrink. */
+      ::slotted(*:not([slot])) {
+        flex-grow: 1;       /* fill the flex row */
+        flex-shrink: 1;     /* compress when constrained */
+        flex-basis: auto;   /* start from the anchor's natural size */
+        min-width: 0;       /* flex items won't shrink below content size without this */
+      }
+
+      /* Anchored container covers the anchor but is invisible to pointer events. */
+      .anchored-host {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+      }
+
+      /* Restore interactivity for actual anchored content. */
+      ::slotted([slot="anchored"]) {
+        pointer-events: auto;
+      }
+      `,
+      this,
+    );
+
+    this.#syncStretchCSS();
+
+    this.defaultSlot.addEventListener('slotchange', () => this.#syncAnchor());
+
+    this.#syncAnchor();
+  }
+
+  #syncAnchor() {
+    this.#onAnchorChanged();
+
+    this.#stretchObserver = this.#forwardAttr(
+      this.#stretchObserver,
+      this.#outerHost,
+      'stretch',
+    );
+
+    this.#directionObserver = this.#forwardAttr(
+      this.#directionObserver,
+      this.#anchored,
+      'st-host-direction',
+    );
+  }
+
+  // Injects [stretch] layout rules into the containing component's shadow root (e.g. descope-attachment)
+  // so it stretches when the anchor has [stretch]. Replaces the existing rules on subsequent calls.
+  #syncStretchCSS() {
+    const css = `
+      descope-anchored {
+        width: 100%;          /* fill the outer host so the anchored element spans the full anchor width */
+      }
+      :host([stretch]) {
+        display: inline-flex; /* switch from inline-block so internal children are flex items */
+        width: 100%;          /* fill non-flex parents */
+        flex-grow: 1;         /* absorb extra space in flex parents */
+        flex-shrink: 0;       /* hold full width — shrink:1 would let siblings squeeze it below 100% */
+        flex-basis: 100%;     /* start at full width before grow/shrink */
+        min-width: 0;         /* prevent overflow when the outer host is itself inside a constrained flex row */
+      }
+    `;
+
+    if (this.#hostStretchSheet) {
+      this.#hostStretchSheet.replaceSync(css);
+    } else if (this.#outerHost) {
+      this.#hostStretchSheet = injectStyle(css, this.#outerHost);
+    }
+  }
+
+  // Reconnects forwarding to the current anchor. Disconnects the old observer and
+  // removes the stale attr from target first — forwardAttrs only sets attrs present
+  // on the source, so absent attrs won't be removed automatically.
+  #forwardAttr(observer, target, attr) {
+    observer?.disconnect();
+    target?.removeAttribute(attr);
+    if (!this.#anchor || !target) return null;
+    return forwardAttrs(this.#anchor, target, { includeAttrs: [attr] });
+  }
+
+  // Prevent stale callbacks from firing on a detached anchor after removal.
+  disconnectedCallback() {
+    super.disconnectedCallback?.();
+    this.#stretchObserver?.disconnect();
+    this.#directionObserver?.disconnect();
+  }
+
+  // Track whether anything is slotted, so the host display rule can hide an
+  // empty host rather than reserving its layout box.
+  #onAnchorChanged() {
+    this.toggleAttribute('has-anchor', !!this.#anchor);
+  }
+}
+
+export const AnchoredClass = compose(componentNameValidationMixin)(RawAnchored);

package/src/component/index.js

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

package/stories/descope-anchored.stories.js

@@ -0,0 +1,59 @@
+import { directionControl } from '@descope-ui/common/sb-controls';
+import { componentName } from '../src/component';
+
+// Storybook's HTML renderer sets container.innerHTML = storyFn(), so stories must
+// return strings. story-anchor-host upgrades by moving its light-DOM children into
+// its own shadow root, giving descope-anchored a real shadow host to live in.
+if (!customElements.get('story-anchor-host')) {
+  customElements.define(
+    'story-anchor-host',
+    class extends HTMLElement {
+      connectedCallback() {
+        if (this.shadowRoot) return;
+        const shadow = this.attachShadow({ mode: 'open' });
+        shadow.append(...this.childNodes);
+      }
+    },
+  );
+}
+
+const Template = ({ direction, fullWidth, hasAnchor }) => `
+  <story-anchor-host>
+    <style nonce="${window.DESCOPE_NONCE}">
+      :host {
+        display: inline-block;
+        background: pink;
+        min-height: 100px;
+        min-width: 100px;
+      }
+      .anchored-text {
+        position: absolute;
+        top: -4px;
+        right: -4px;
+      }
+    </style>
+    <descope-anchored>
+      ${hasAnchor ? `<descope-button bordered="true" variant="outline" mode="primary" full-width="${fullWidth}" st-host-direction="${direction}">Click me -</descope-button>` : ''}
+      <descope-badge slot="anchored" size="xs" bordered="true" mode="primary" class="anchored-text">anchored -</descope-badge>
+    </descope-anchored>
+  </story-anchor-host>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-anchored',
+  parameters: {
+    controls: { expanded: true },
+  },
+  argTypes: {
+    ...directionControl,
+    fullWidth: { control: 'boolean' },
+  },
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  direction: 'ltr',
+  fullWidth: false,
+  hasAnchor: true,
+};