@sapudex/web-components 2.48.0 → 2.49.0

package/dist/AccordionSpotlight.js

@@ -0,0 +1,284 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import AccordionSpotlightTemplate from "./AccordionSpotlightTemplate.js";
+import AccordionSpotlightItem from "./AccordionSpotlightItem.js";
+import UDExButton from "./Button.js";
+import "@ui5/webcomponents-icons/dist/play.js";
+import "@ui5/webcomponents-icons/dist/pause.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
+// Styles
+import AccordionSpotlightCss from "./generated/themes/AccordionSpotlight.css.js";
+export var UDExAccordionSpotlightVerticalAlignment;
+(function (UDExAccordionSpotlightVerticalAlignment) {
+    UDExAccordionSpotlightVerticalAlignment["Top"] = "Top";
+    UDExAccordionSpotlightVerticalAlignment["Center"] = "Center";
+})(UDExAccordionSpotlightVerticalAlignment || (UDExAccordionSpotlightVerticalAlignment = {}));
+export var UDExAccordionSpotlightPlacement;
+(function (UDExAccordionSpotlightPlacement) {
+    UDExAccordionSpotlightPlacement["Start"] = "Start";
+    UDExAccordionSpotlightPlacement["End"] = "End";
+})(UDExAccordionSpotlightPlacement || (UDExAccordionSpotlightPlacement = {}));
+export var UDExAccordionSpotlightMediaMode;
+(function (UDExAccordionSpotlightMediaMode) {
+    UDExAccordionSpotlightMediaMode["Dynamic"] = "Dynamic";
+    UDExAccordionSpotlightMediaMode["Static"] = "Static";
+})(UDExAccordionSpotlightMediaMode || (UDExAccordionSpotlightMediaMode = {}));
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * Vertical accordion navigation with spotlight layout. Items are listed on the
+ * left; the expanded panel is displayed on the right (desktop) or inline below
+ * the heading (mobile). Follows the WAI-ARIA APG Accordion pattern.
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-accordion-spotlight</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/AccordionSpotlight.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+let UDExAccordionSpotlight = class UDExAccordionSpotlight extends UI5Element {
+    constructor() {
+        super();
+        /**
+         * The index of the currently expanded item (0-based).
+         * Derived from items' <code>selected</code> attribute; kept in sync by the parent.
+         *
+         * @private
+         */
+        this._selectedIndex = 0;
+        /**
+         * Vertical alignment of the navigation sidebar relative to the content panel.
+         *
+         * @default "Top"
+         * @public
+         */
+        this.verticalAlignment = UDExAccordionSpotlightVerticalAlignment.Top;
+        /**
+         * Placement of the navigation sidebar — "Start" (left) or "End" (right).
+         *
+         * @default "Start"
+         * @public
+         */
+        this.placement = UDExAccordionSpotlightPlacement.Start;
+        /**
+         * Enables automatic cycling through items on an interval.
+         *
+         * @default false
+         * @public
+         */
+        this.autoPlay = false;
+        /**
+         * Interval in milliseconds between automatic item advances. Applies only when autoPlay is enabled.
+         *
+         * @default 5000
+         * @public
+         */
+        this.autoPlayInterval = 5000;
+        /**
+         * Defines the width of the navigation panel.
+         *
+         * @default "auto"
+         * @public
+         */
+        this.tabWidth = "auto";
+        /**
+         * Controls how the media area behaves. In <code>Static</code> mode a single
+         * persistent media element (image or video) is displayed alongside the nav
+         * list and never changes when items are expanded. In <code>Dynamic</code>
+         * mode (default) each item provides its own content panel.
+         *
+         * @default "Dynamic"
+         * @public
+         */
+        this.mediaMode = UDExAccordionSpotlightMediaMode.Dynamic;
+        /**
+         * @private
+         */
+        this._isMobile = false;
+        /**
+         * @private
+         */
+        this._isPaused = false;
+        this._handleResizeBound = this._handleResize.bind(this);
+    }
+    onBeforeRendering() {
+        this._syncItemStates();
+    }
+    onAfterRendering() {
+        this._checkMobile();
+    }
+    onEnterDOM() {
+        ResizeHandler.register(this, this._handleResizeBound);
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
+        if (this.autoPlay) {
+            const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+            if (prefersReducedMotion) {
+                this._isPaused = true;
+            }
+            else {
+                this._startAutoPlay();
+            }
+        }
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._handleResizeBound);
+        this._stopAutoPlay();
+    }
+    _handleResize() {
+        this._checkMobile();
+    }
+    _checkMobile() {
+        const isMobile = BreakpointUtils.isAtMost("S");
+        if (isMobile !== this._isMobile) {
+            this._isMobile = isMobile;
+        }
+    }
+    _syncItemStates() {
+        if (this.items.length === 0) {
+            return;
+        }
+        const foundIndex = this.items.findIndex(item => item.selected);
+        const activeIndex = foundIndex === -1 ? 0 : foundIndex;
+        this._selectedIndex = activeIndex;
+        this.items.forEach((item, index) => {
+            item.selected = index === activeIndex;
+            item._isMobile = this._isMobile;
+        });
+    }
+    _startAutoPlay() {
+        this._stopAutoPlay();
+        this._isPaused = false;
+        this._autoPlayTimer = window.setInterval(() => {
+            this._advanceItem();
+        }, this.autoPlayInterval);
+    }
+    _stopAutoPlay() {
+        if (this._autoPlayTimer !== undefined) {
+            window.clearInterval(this._autoPlayTimer);
+            this._autoPlayTimer = undefined;
+        }
+    }
+    _advanceItem() {
+        const count = this.items.length;
+        if (count === 0) {
+            return;
+        }
+        const next = (this._selectedIndex + 1) % count;
+        this._selectItem(next);
+    }
+    onPlayButtonClick() {
+        if (this._isPaused) {
+            this._startAutoPlay();
+        }
+        else {
+            this._stopAutoPlay();
+            this._isPaused = true;
+        }
+    }
+    handleNavItemClick(e) {
+        const btn = e.target.closest("[data-index]");
+        if (!btn) {
+            return;
+        }
+        const index = Number.parseInt(btn.dataset.index);
+        this._selectItem(index);
+    }
+    _selectItem(index) {
+        if (index === this._selectedIndex) {
+            return;
+        }
+        this._selectedIndex = index;
+        this.items.forEach((item, i) => { item.selected = i === index; });
+        const item = this.items[index];
+        this.fireDecoratorEvent("item-click", { item });
+    }
+    get playBtnIcon() {
+        return this._isPaused ? "play" : "pause";
+    }
+    get showFooterSlot() {
+        return this.footer?.length > 0;
+    }
+    get isStaticMedia() {
+        return this.mediaMode === UDExAccordionSpotlightMediaMode.Static;
+    }
+    get showMediaSlot() {
+        return this.isStaticMedia && this.media?.length > 0;
+    }
+};
+__decorate([
+    property({ type: Number, noAttribute: true })
+], UDExAccordionSpotlight.prototype, "_selectedIndex", void 0);
+__decorate([
+    property()
+], UDExAccordionSpotlight.prototype, "verticalAlignment", void 0);
+__decorate([
+    property()
+], UDExAccordionSpotlight.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExAccordionSpotlight.prototype, "autoPlay", void 0);
+__decorate([
+    property({ type: Number })
+], UDExAccordionSpotlight.prototype, "autoPlayInterval", void 0);
+__decorate([
+    property({ type: String })
+], UDExAccordionSpotlight.prototype, "tabWidth", void 0);
+__decorate([
+    property()
+], UDExAccordionSpotlight.prototype, "mediaMode", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], UDExAccordionSpotlight.prototype, "_isMobile", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], UDExAccordionSpotlight.prototype, "_isPaused", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true, individualSlots: true })
+], UDExAccordionSpotlight.prototype, "items", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], UDExAccordionSpotlight.prototype, "footer", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], UDExAccordionSpotlight.prototype, "media", void 0);
+UDExAccordionSpotlight = __decorate([
+    customElement({
+        tag: "udex-accordion-spotlight",
+        renderer: jsxRenderer,
+        styles: AccordionSpotlightCss,
+        template: AccordionSpotlightTemplate,
+        dependencies: [AccordionSpotlightItem, UDExButton],
+    })
+    /**
+     * Fired when the expanded item clicked.
+     *
+     * @public
+     * @param {AccordionSpotlightItem} [item] The accordion spotlight item that was clicked
+     */
+    ,
+    event("item-click", { bubbles: true })
+], UDExAccordionSpotlight);
+UDExAccordionSpotlight.define();
+export default UDExAccordionSpotlight;
+//# sourceMappingURL=AccordionSpotlight.js.map

package/dist/AccordionSpotlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionSpotlight.js","sourceRoot":"","sources":["../src/AccordionSpotlight.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport type { DefaultSlot, Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport AccordionSpotlightTemplate from \"./AccordionSpotlightTemplate.js\";\nimport AccordionSpotlightItem from \"./AccordionSpotlightItem.js\";\nimport UDExButton from \"./Button.js\";\nimport \"@ui5/webcomponents-icons/dist/play.js\";\nimport \"@ui5/webcomponents-icons/dist/pause.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { BreakpointUtils } from \"./utils/Breakpoints.js\";\n\n// Styles\nimport AccordionSpotlightCss from \"./generated/themes/AccordionSpotlight.css.js\";\n\nexport enum UDExAccordionSpotlightVerticalAlignment {\n  Top = \"Top\",\n  Center = \"Center\",\n}\n\nexport enum UDExAccordionSpotlightPlacement {\n  Start = \"Start\",\n  End = \"End\",\n}\n\nexport enum UDExAccordionSpotlightMediaMode {\n  Dynamic = \"Dynamic\",\n  Static = \"Static\",\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * Vertical accordion navigation with spotlight layout. Items are listed on the\n * left; the expanded panel is displayed on the right (desktop) or inline below\n * the heading (mobile). Follows the WAI-ARIA APG Accordion pattern.\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-accordion-spotlight</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/AccordionSpotlight.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-accordion-spotlight\",\n  renderer: jsxRenderer,\n  styles: AccordionSpotlightCss,\n  template: AccordionSpotlightTemplate,\n  dependencies: [AccordionSpotlightItem, UDExButton],\n})\n\n/**\n * Fired when the expanded item clicked.\n *\n * @public\n * @param {AccordionSpotlightItem} [item] The accordion spotlight item that was clicked\n */\n@event(\"item-click\", { bubbles: true })\n\nclass UDExAccordionSpotlight extends UI5Element {\n  eventDetails!: {\n    \"item-click\": { item: AccordionSpotlightItem },\n  };\n\n  /**\n   * The index of the currently expanded item (0-based).\n   * Derived from items' <code>selected</code> attribute; kept in sync by the parent.\n   *\n   * @private\n   */\n  @property({ type: Number, noAttribute: true })\n    _selectedIndex: number = 0;\n\n  /**\n   * Vertical alignment of the navigation sidebar relative to the content panel.\n   *\n   * @default \"Top\"\n   * @public\n   */\n  @property()\n    verticalAlignment: `${UDExAccordionSpotlightVerticalAlignment}` = UDExAccordionSpotlightVerticalAlignment.Top;\n\n  /**\n   * Placement of the navigation sidebar — \"Start\" (left) or \"End\" (right).\n   *\n   * @default \"Start\"\n   * @public\n   */\n  @property()\n    placement: `${UDExAccordionSpotlightPlacement}` = UDExAccordionSpotlightPlacement.Start;\n\n  /**\n   * Enables automatic cycling through items on an interval.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    autoPlay: boolean = false;\n\n  /**\n   * Interval in milliseconds between automatic item advances. Applies only when autoPlay is enabled.\n   *\n   * @default 5000\n   * @public\n   */\n  @property({ type: Number })\n    autoPlayInterval: number = 5000;\n\n  /**\n   * Defines the width of the navigation panel.\n   *\n   * @default \"auto\"\n   * @public\n   */\n  @property({ type: String })\n    tabWidth: string = \"auto\";\n\n  /**\n   * Controls how the media area behaves. In <code>Static</code> mode a single\n   * persistent media element (image or video) is displayed alongside the nav\n   * list and never changes when items are expanded. In <code>Dynamic</code>\n   * mode (default) each item provides its own content panel.\n   *\n   * @default \"Dynamic\"\n   * @public\n   */\n  @property()\n    mediaMode: `${UDExAccordionSpotlightMediaMode}` = UDExAccordionSpotlightMediaMode.Dynamic;\n\n  /**\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _isMobile: boolean = false;\n\n  /**\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _isPaused: boolean = false;\n\n  /**\n   * The slotted AccordionSpotlightItem elements.\n   *\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true, individualSlots: true })\n    items!: DefaultSlot<AccordionSpotlightItem>;\n\n  /**\n   * Defines optional content rendered below the navigation items.\n   * Use to place a button or any action element beneath the items.\n   *\n   * @slot footer\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    footer!: Slot<HTMLElement>;\n\n  /**\n   * Persistent media area shown in <code>Static</code> media mode.\n   * Place an <code>&lt;img&gt;</code> or <code>&lt;video&gt;</code> element here;\n   * it remains visible regardless of which item is currently expanded.\n   *\n   * @slot media\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    media!: Slot<HTMLElement>;\n\n  _handleResizeBound: ResizeObserverCallback;\n  _autoPlayTimer?: number;\n\n  constructor() {\n    super();\n    this._handleResizeBound = this._handleResize.bind(this);\n  }\n\n  onBeforeRendering() {\n    this._syncItemStates();\n  }\n\n  onAfterRendering() {\n    this._checkMobile();\n  }\n\n  onEnterDOM() {\n    ResizeHandler.register(this, this._handleResizeBound);\n\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n\n    if (this.autoPlay) {\n      const prefersReducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n      if (prefersReducedMotion) {\n        this._isPaused = true;\n      } else {\n        this._startAutoPlay();\n      }\n    }\n  }\n\n  onExitDOM() {\n    ResizeHandler.deregister(this, this._handleResizeBound);\n    this._stopAutoPlay();\n  }\n\n  _handleResize(): void {\n    this._checkMobile();\n  }\n\n  _checkMobile() {\n    const isMobile = BreakpointUtils.isAtMost(\"S\");\n    if (isMobile !== this._isMobile) {\n      this._isMobile = isMobile;\n    }\n  }\n\n  _syncItemStates() {\n    if (this.items.length === 0) {\n      return;\n    }\n\n    const foundIndex = this.items.findIndex(item => item.selected);\n    const activeIndex = foundIndex === -1 ? 0 : foundIndex;\n    this._selectedIndex = activeIndex;\n\n    this.items.forEach((item, index) => {\n      item.selected = index === activeIndex;\n      item._isMobile = this._isMobile;\n    });\n  }\n\n  _startAutoPlay(): void {\n    this._stopAutoPlay();\n    this._isPaused = false;\n    this._autoPlayTimer = window.setInterval(() => {\n      this._advanceItem();\n    }, this.autoPlayInterval);\n  }\n\n  _stopAutoPlay(): void {\n    if (this._autoPlayTimer !== undefined) {\n      window.clearInterval(this._autoPlayTimer);\n      this._autoPlayTimer = undefined;\n    }\n  }\n\n  _advanceItem(): void {\n    const count = this.items.length;\n    if (count === 0) {\n      return;\n    }\n\n    const next = (this._selectedIndex + 1) % count;\n    this._selectItem(next);\n  }\n\n  onPlayButtonClick(): void {\n    if (this._isPaused) {\n      this._startAutoPlay();\n    } else {\n      this._stopAutoPlay();\n      this._isPaused = true;\n    }\n  }\n\n  handleNavItemClick(e: MouseEvent) {\n    const btn = (e.target as HTMLElement).closest<HTMLElement>(\"[data-index]\");\n    if (!btn) {\n      return;\n    }\n    const index = Number.parseInt(btn.dataset.index!);\n    this._selectItem(index);\n  }\n\n  private _selectItem(index: number) {\n    if (index === this._selectedIndex) {\n      return;\n    }\n\n    this._selectedIndex = index;\n    this.items.forEach((item, i) => { item.selected = i === index; });\n    const item = this.items[index];\n    this.fireDecoratorEvent(\"item-click\", { item });\n  }\n\n  get playBtnIcon(): string {\n    return this._isPaused ? \"play\" : \"pause\";\n  }\n\n  get showFooterSlot(): boolean {\n    return this.footer?.length > 0;\n  }\n\n  get isStaticMedia(): boolean {\n    return this.mediaMode === UDExAccordionSpotlightMediaMode.Static;\n  }\n\n  get showMediaSlot(): boolean {\n    return this.isStaticMedia && this.media?.length > 0;\n  }\n}\n\nUDExAccordionSpotlight.define();\n\nexport default UDExAccordionSpotlight;\n"]}

package/dist/AccordionSpotlightItem.d.ts

@@ -0,0 +1,76 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * A single item within the <code>udex-accordion-spotlight</code> component.
+ * Provides a heading button (<code>aria-expanded</code>) and an associated
+ * content region (<code>role="region"</code>).
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-accordion-spotlight-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/AccordionSpotlightItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+declare class UDExAccordionSpotlightItem extends UI5Element {
+    /**
+     * The label text shown in the heading button.
+     *
+     * @default ""
+     * @public
+     */
+    heading: string;
+    /**
+     * Optional descriptive subtext visible when the item is expanded.
+     *
+     * @default ""
+     * @public
+     */
+    subheading: string;
+    /**
+     * Whether this item is currently expanded.
+     * Set on the element directly to control the initial selection.
+     *
+     * @default false
+     * @public
+     */
+    selected: boolean;
+    /**
+     * Whether the parent is in mobile layout mode (managed by the parent component).
+     *
+     * @default false
+     * @private
+     */
+    _isMobile: boolean;
+    /**
+     * Zero-based index within the parent (managed by the parent component).
+     *
+     * @private
+     */
+    _index: number;
+    /**
+     * The slotted content for this item's panel.
+     *
+     * @public
+     */
+    content: DefaultSlot<Node>;
+    /**
+     * Defines the link(s) to be displayed in the tab header (vertical orientation only).
+     * Use this slot to add one or more udex-link elements to the tab button.
+     *
+     * @slot link
+     * @public
+     */
+    link: Slot<HTMLElement>;
+    get hasLinkSlot(): boolean;
+    get linkSlotHtml(): string;
+}
+export default UDExAccordionSpotlightItem;

package/dist/AccordionSpotlightItem.js

@@ -0,0 +1,115 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import AccordionSpotlightItemTemplate from "./AccordionSpotlightItemTemplate.js";
+// Styles
+import AccordionSpotlightItemCss from "./generated/themes/AccordionSpotlightItem.css.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * A single item within the <code>udex-accordion-spotlight</code> component.
+ * Provides a heading button (<code>aria-expanded</code>) and an associated
+ * content region (<code>role="region"</code>).
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-accordion-spotlight-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/AccordionSpotlightItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+let UDExAccordionSpotlightItem = class UDExAccordionSpotlightItem extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * The label text shown in the heading button.
+         *
+         * @default ""
+         * @public
+         */
+        this.heading = "";
+        /**
+         * Optional descriptive subtext visible when the item is expanded.
+         *
+         * @default ""
+         * @public
+         */
+        this.subheading = "";
+        /**
+         * Whether this item is currently expanded.
+         * Set on the element directly to control the initial selection.
+         *
+         * @default false
+         * @public
+         */
+        this.selected = false;
+        /**
+         * Whether the parent is in mobile layout mode (managed by the parent component).
+         *
+         * @default false
+         * @private
+         */
+        this._isMobile = false;
+        /**
+         * Zero-based index within the parent (managed by the parent component).
+         *
+         * @private
+         */
+        this._index = 0;
+    }
+    get hasLinkSlot() {
+        return this.link && this.link.length > 0;
+    }
+    get linkSlotHtml() {
+        if (!this.link || this.link.length === 0) {
+            return "";
+        }
+        return this.link.map(l => l.outerHTML).join("");
+    }
+};
+__decorate([
+    property()
+], UDExAccordionSpotlightItem.prototype, "heading", void 0);
+__decorate([
+    property()
+], UDExAccordionSpotlightItem.prototype, "subheading", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExAccordionSpotlightItem.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], UDExAccordionSpotlightItem.prototype, "_isMobile", void 0);
+__decorate([
+    property({ type: Number, noAttribute: true })
+], UDExAccordionSpotlightItem.prototype, "_index", void 0);
+__decorate([
+    slot({ type: Node, "default": true })
+], UDExAccordionSpotlightItem.prototype, "content", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], UDExAccordionSpotlightItem.prototype, "link", void 0);
+UDExAccordionSpotlightItem = __decorate([
+    customElement({
+        tag: "udex-accordion-spotlight-item",
+        renderer: jsxRenderer,
+        styles: AccordionSpotlightItemCss,
+        template: AccordionSpotlightItemTemplate,
+    })
+], UDExAccordionSpotlightItem);
+UDExAccordionSpotlightItem.define();
+export default UDExAccordionSpotlightItem;
+//# sourceMappingURL=AccordionSpotlightItem.js.map

package/dist/AccordionSpotlightItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionSpotlightItem.js","sourceRoot":"","sources":["../src/AccordionSpotlightItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAE/E,OAAO,8BAA8B,MAAM,qCAAqC,CAAC;AAEjF,SAAS;AACT,OAAO,yBAAyB,MAAM,kDAAkD,CAAC;AAEzF;;;;;;;;;;;;;;;;;;;GAmBG;AAOH,IAAM,0BAA0B,GAAhC,MAAM,0BAA2B,SAAQ,UAAU;IAAnD;;QACE;;;;;WAKG;QAED,YAAO,GAAW,EAAE,CAAC;QAEvB;;;;;WAKG;QAED,eAAU,GAAW,EAAE,CAAC;QAE1B;;;;;;WAMG;QAED,aAAQ,GAAY,KAAK,CAAC;QAE5B;;;;;WAKG;QAED,cAAS,GAAY,KAAK,CAAC;QAE7B;;;;WAIG;QAED,WAAM,GAAW,CAAC,CAAC;IA8BvB,CAAC;IAVC,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;IAC3C,CAAC;IAED,IAAI,YAAY;QACd,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACzC,OAAO,EAAE,CAAC;QACZ,CAAC;QACD,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAClD,CAAC;CACF,CAAA;AAlEG;IADD,QAAQ,EAAE;2DACY;AASrB;IADD,QAAQ,EAAE;8DACe;AAUxB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4DACA;AAS1B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;6DAClB;AAQ3B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;0DACzB;AAQnB;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;2DACR;AAU5B;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;wDACD;AA9DvB,0BAA0B;IAN/B,aAAa,CAAC;QACb,GAAG,EAAE,+BAA+B;QACpC,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,yBAAyB;QACjC,QAAQ,EAAE,8BAA8B;KACzC,CAAC;GACI,0BAA0B,CA0E/B;AAED,0BAA0B,CAAC,MAAM,EAAE,CAAC;AAEpC,eAAe,0BAA0B,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot, Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\n\nimport AccordionSpotlightItemTemplate from \"./AccordionSpotlightItemTemplate.js\";\n\n// Styles\nimport AccordionSpotlightItemCss from \"./generated/themes/AccordionSpotlightItem.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * A single item within the <code>udex-accordion-spotlight</code> component.\n * Provides a heading button (<code>aria-expanded</code>) and an associated\n * content region (<code>role=\"region\"</code>).\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-accordion-spotlight-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/AccordionSpotlightItem.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-accordion-spotlight-item\",\n  renderer: jsxRenderer,\n  styles: AccordionSpotlightItemCss,\n  template: AccordionSpotlightItemTemplate,\n})\nclass UDExAccordionSpotlightItem extends UI5Element {\n  /**\n   * The label text shown in the heading button.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    heading: string = \"\";\n\n  /**\n   * Optional descriptive subtext visible when the item is expanded.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    subheading: string = \"\";\n\n  /**\n   * Whether this item is currently expanded.\n   * Set on the element directly to control the initial selection.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    selected: boolean = false;\n\n  /**\n   * Whether the parent is in mobile layout mode (managed by the parent component).\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _isMobile: boolean = false;\n\n  /**\n   * Zero-based index within the parent (managed by the parent component).\n   *\n   * @private\n   */\n  @property({ type: Number, noAttribute: true })\n    _index: number = 0;\n\n  /**\n   * The slotted content for this item's panel.\n   *\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    content!: DefaultSlot<Node>;\n\n  /**\n   * Defines the link(s) to be displayed in the tab header (vertical orientation only).\n   * Use this slot to add one or more udex-link elements to the tab button.\n   *\n   * @slot link\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    link!: Slot<HTMLElement>;\n\n  get hasLinkSlot(): boolean {\n    return this.link && this.link.length > 0;\n  }\n\n  get linkSlotHtml(): string {\n    if (!this.link || this.link.length === 0) {\n      return \"\";\n    }\n    return this.link.map(l => l.outerHTML).join(\"\");\n  }\n}\n\nUDExAccordionSpotlightItem.define();\n\nexport default UDExAccordionSpotlightItem;\n"]}

package/dist/AccordionSpotlightItemTemplate.d.ts

@@ -0,0 +1,2 @@
+import type AccordionSpotlightItem from "./AccordionSpotlightItem.js";
+export default function AccordionSpotlightItemTemplate(this: AccordionSpotlightItem): import("@ui5/webcomponents-base").JSX.Element;

package/dist/AccordionSpotlightItemTemplate.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+export default function AccordionSpotlightItemTemplate() {
+    return (_jsx("slot", {}));
+}
+//# sourceMappingURL=AccordionSpotlightItemTemplate.js.map

package/dist/AccordionSpotlightItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionSpotlightItemTemplate.js","sourceRoot":"","sources":["../src/AccordionSpotlightItemTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,8BAA8B;IACpD,OAAO,CACL,gBAAa,CACd,CAAC;AACJ,CAAC","sourcesContent":["import type AccordionSpotlightItem from \"./AccordionSpotlightItem.js\";\n\nexport default function AccordionSpotlightItemTemplate(this: AccordionSpotlightItem) {\n  return (\n    <slot></slot>\n  );\n}\n"]}

package/dist/AccordionSpotlightTemplate.d.ts

@@ -0,0 +1,2 @@
+import type AccordionSpotlight from "./AccordionSpotlight.js";
+export default function AccordionSpotlightTemplate(this: AccordionSpotlight): import("@ui5/webcomponents-base").JSX.Element;

package/dist/AccordionSpotlightTemplate.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+export default function AccordionSpotlightTemplate() {
+    const rootClass = "udex-accordion-spotlight";
+    return (_jsxs("div", { class: `${rootClass}`, children: [_jsxs("div", { class: `${rootClass}__nav`, children: [this.autoPlay && (_jsx(UDExButton, { class: `${rootClass}__play-button`, design: UDExButtonDesign.Tertiary, size: UDExButtonSize.Large, icon: this.playBtnIcon, onClick: this.onPlayButtonClick.bind(this) })), _jsx("div", { class: `${rootClass}__nav-holder`, children: this.items.map((item, index) => (_jsxs(_Fragment, { children: [_jsxs("div", { class: `${rootClass}__nav-item`, children: [_jsx("button", { id: item._id, class: `${rootClass}-item__button ${item.selected ? ` ${rootClass}-item__button--active` : ""}`, type: "button", "aria-expanded": item.selected, "aria-controls": `${item._id}-controls`, "data-index": String(index), onClick: this.handleNavItemClick.bind(this), children: item.heading }), (!!item.subheading || item.hasLinkSlot) && (_jsx("div", { class: `${rootClass}-item__expand${item.selected ? ` ${rootClass}-item__expand--open` : ""}`, "aria-hidden": item.selected ? undefined : "true", inert: !item.selected, children: _jsxs("div", { class: `${rootClass}-item__expand-inner`, children: [!!item.subheading && (_jsx("span", { class: `${rootClass}-item__subheading`, children: item.subheading })), item.hasLinkSlot &&
+                                                        _jsx("div", { class: `${rootClass}-item__links`, dangerouslySetInnerHTML: { __html: item.linkSlotHtml } })] }) }))] }), this._isMobile && !this.isStaticMedia && (_jsx("div", { id: `${item._id}-controls`, class: `${rootClass}__panel${item.selected ? ` ${rootClass}__panel--open` : ""}`, role: "region", "aria-labelledby": item._id, "aria-hidden": item.selected ? undefined : "true", inert: !item.selected, children: _jsx("div", { class: `${rootClass}__panel-inner`, children: _jsx("slot", { name: item._individualSlot }) }) }))] }))) }), this.showFooterSlot && (_jsx("div", { class: `${rootClass}__footer`, children: _jsx("slot", { name: "footer" }) }))] }), this.showMediaSlot && (_jsx("div", { class: `${rootClass}__media`, children: _jsx("slot", { name: "media" }) })), !this._isMobile && !this.isStaticMedia && (_jsx("div", { class: `${rootClass}__content`, children: this.items.map(item => (_jsx("div", { id: `${item._id}-controls`, class: `${rootClass}__panel${item.selected ? ` ${rootClass}__panel--open` : ""}`, role: "region", "aria-labelledby": item._id, "aria-hidden": item.selected ? undefined : "true", inert: !item.selected, children: _jsx("div", { class: `${rootClass}__panel-inner`, children: _jsx("slot", { name: item._individualSlot }) }) }, item.__id))) }))] }));
+}
+//# sourceMappingURL=AccordionSpotlightTemplate.js.map

package/dist/AccordionSpotlightTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionSpotlightTemplate.js","sourceRoot":"","sources":["../src/AccordionSpotlightTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type AccordionSpotlight from \"./AccordionSpotlight.js\";\nimport UDExButton from \"./Button.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport UDExButtonDesign from \"./types/ButtonDesign.js\";\n\nexport default function AccordionSpotlightTemplate(this: AccordionSpotlight) {\n  const rootClass = \"udex-accordion-spotlight\";\n\n  return (\n    <div class={`${rootClass}`}>\n      <div\n        class={`${rootClass}__nav`}>\n        {this.autoPlay && (\n          <UDExButton\n            class={`${rootClass}__play-button`}\n            design={UDExButtonDesign.Tertiary}\n            size={UDExButtonSize.Large}\n            icon={this.playBtnIcon}\n            onClick={this.onPlayButtonClick.bind(this)}\n          />\n        )}\n\n        <div class={`${rootClass}__nav-holder`}>\n          {this.items.map((item, index) => (\n            <>\n              <div class={`${rootClass}__nav-item`}>\n                <button\n                  id={item._id}\n                  class={`${rootClass}-item__button ${item.selected ? ` ${rootClass}-item__button--active` : \"\"}`}\n                  type=\"button\"\n                  aria-expanded={item.selected}\n                  aria-controls={`${item._id}-controls`}\n                  data-index={String(index)}\n                  onClick={this.handleNavItemClick.bind(this)}>\n                  {item.heading}\n                </button>\n\n                {(!!item.subheading || item.hasLinkSlot) && (\n                  <div\n                    class={`${rootClass}-item__expand${item.selected ? ` ${rootClass}-item__expand--open` : \"\"}`}\n                    aria-hidden={item.selected ? undefined : \"true\"}\n                    inert={!item.selected}>\n                    <div class={`${rootClass}-item__expand-inner`}>\n                      {!!item.subheading && (\n                        <span class={`${rootClass}-item__subheading`}>\n                          {item.subheading}\n                        </span>\n                      )}\n                      {item.hasLinkSlot &&\n                        <div\n                          class={`${rootClass}-item__links`}\n                          dangerouslySetInnerHTML={{ __html: item.linkSlotHtml }}>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                )}\n              </div>\n\n              {this._isMobile && !this.isStaticMedia && (\n                <div\n                  id={`${item._id}-controls`}\n                  class={`${rootClass}__panel${item.selected ? ` ${rootClass}__panel--open` : \"\"}`}\n                  role=\"region\"\n                  aria-labelledby={item._id}\n                  aria-hidden={item.selected ? undefined : \"true\"}\n                  inert={!item.selected}>\n                  <div class={`${rootClass}__panel-inner`}>\n                    <slot name={item._individualSlot}></slot>\n                  </div>\n                </div>\n              )}\n            </>\n          ))}\n        </div>\n        {this.showFooterSlot && (\n          <div class={`${rootClass}__footer`}><slot name=\"footer\"></slot></div>\n        )}\n      </div>\n\n      {this.showMediaSlot && (\n        <div class={`${rootClass}__media`}>\n          <slot name=\"media\"></slot>\n        </div>\n      )}\n\n      {!this._isMobile && !this.isStaticMedia && (\n        <div class={`${rootClass}__content`}>\n          {this.items.map(item => (\n            <div\n              key={item.__id}\n              id={`${item._id}-controls`}\n              class={`${rootClass}__panel${item.selected ? ` ${rootClass}__panel--open` : \"\"}`}\n              role=\"region\"\n              aria-labelledby={item._id}\n              aria-hidden={item.selected ? undefined : \"true\"}\n              inert={!item.selected}>\n              <div class={`${rootClass}__panel-inner`}>\n                <slot name={item._individualSlot}></slot>\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/BusyIndicator.d.ts

@@ -18,5 +18,14 @@ import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
  * @public
  */
 declare class UDExBusyIndicator extends BusyIndicator {
+    /**
+     * Renders the busy indicator inside a surface container — a semi-transparent backdrop
+     * with a white rounded card holding the indicator dots. Use this when the indicator
+     * overlays content where the dots alone would not meet accessibility contrast requirements.
+     *
+     * @default false
+     * @public
+     */
+    surfaceContainer: boolean;
 }
 export default UDExBusyIndicator;

package/dist/BusyIndicator.js

@@ -5,8 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+// Styles
+import BusyIndicatorCss from "./generated/themes/BusyIndicator.css.js";
 /**
  * @class
  *
@@ -27,11 +30,14 @@ import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
  */
 let UDExBusyIndicator = class UDExBusyIndicator extends BusyIndicator {
 };
+__decorate([
+    property({ type: Boolean })
+], UDExBusyIndicator.prototype, "surfaceContainer", void 0);
 UDExBusyIndicator = __decorate([
     customElement({
         tag: "udex-busy-indicator",
         renderer: jsxRenderer,
-        styles: [BusyIndicator.styles],
+        styles: [BusyIndicator.styles, BusyIndicatorCss],
     })
 ], UDExBusyIndicator);
 UDExBusyIndicator.define();

package/dist/BusyIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"BusyIndicator.js","sourceRoot":"","sources":["../src/BusyIndicator.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,aAAa,MAAM,0CAA0C,CAAC;AACrE,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAE/E;;;;;;;;;;;;;;;;;GAiBG;AAOH,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,aAAa;CAAG,CAAA;AAA1C,iBAAiB;IANtB,aAAa,CAAC;QACb,GAAG,EAAE,qBAAqB;QAC1B,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC;KAC/B,CAAC;GAEI,iBAAiB,CAAyB;AAEhD,iBAAiB,CAAC,MAAM,EAAE,CAAC;AAE3B,eAAe,iBAAiB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-busy-indicator</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/BusyIndicator.js\";</code>\n *\n * @constructor\n * @extends BusyIndicator\n * @tagname udex-busy-indicator\n * @public\n */\n@customElement({\n  tag: \"udex-busy-indicator\",\n  renderer: jsxRenderer,\n  styles: [BusyIndicator.styles],\n})\n\nclass UDExBusyIndicator extends BusyIndicator {}\n\nUDExBusyIndicator.define();\n\nexport default UDExBusyIndicator;\n"]}
+{"version":3,"file":"BusyIndicator.js","sourceRoot":"","sources":["../src/BusyIndicator.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,aAAa,MAAM,0CAA0C,CAAC;AACrE,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAE/E,SAAS;AACT,OAAO,gBAAgB,MAAM,yCAAyC,CAAC;AAEvE;;;;;;;;;;;;;;;;;GAiBG;AAOH,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,aAAa;CAW5C,CAAA;AADG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2DACC;AAVzB,iBAAiB;IANtB,aAAa,CAAC;QACb,GAAG,EAAE,qBAAqB;QAC1B,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,aAAa,CAAC,MAAM,EAAE,gBAAgB,CAAC;KACjD,CAAC;GAEI,iBAAiB,CAWtB;AAED,iBAAiB,CAAC,MAAM,EAAE,CAAC;AAE3B,eAAe,iBAAiB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\n\n// Styles\nimport BusyIndicatorCss from \"./generated/themes/BusyIndicator.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-busy-indicator</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/BusyIndicator.js\";</code>\n *\n * @constructor\n * @extends BusyIndicator\n * @tagname udex-busy-indicator\n * @public\n */\n@customElement({\n  tag: \"udex-busy-indicator\",\n  renderer: jsxRenderer,\n  styles: [BusyIndicator.styles, BusyIndicatorCss],\n})\n\nclass UDExBusyIndicator extends BusyIndicator {\n  /**\n   * Renders the busy indicator inside a surface container — a semi-transparent backdrop\n   * with a white rounded card holding the indicator dots. Use this when the indicator\n   * overlays content where the dots alone would not meet accessibility contrast requirements.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    surfaceContainer!: boolean;\n}\n\nUDExBusyIndicator.define();\n\nexport default UDExBusyIndicator;\n"]}