@sapudex/web-components 2.47.0 → 2.49.0

package/dist/vscode.html-custom-data.json

@@ -69,6 +69,65 @@
       ],
       "references": []
     },
+    {
+      "name": "udex-accordion-spotlight",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nVertical accordion navigation with spotlight layout. Items are listed on the\nleft; the expanded panel is displayed on the right (desktop) or inline below\nthe heading (mobile). Follows the WAI-ARIA APG Accordion pattern.\n\n<h3>Usage</h3>\n\nFor 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\n---\n\n\n\n\n### **Events:**\n - **item-click** - Fired when the expanded item clicked.\n\n### **Slots:**\n - **default** - The slotted AccordionSpotlightItem elements.\n- **footer** - Defines optional content rendered below the navigation items.\nUse to place a button or any action element beneath the items.\n- **media** - Persistent media area shown in <code>Static</code> media mode.\nPlace an <code>&lt;img&gt;</code> or <code>&lt;video&gt;</code> element here;\nit remains visible regardless of which item is currently expanded.",
+      "attributes": [
+        {
+          "name": "auto-play",
+          "description": "Enables automatic cycling through items on an interval.",
+          "values": []
+        },
+        {
+          "name": "auto-play-interval",
+          "description": "Interval in milliseconds between automatic item advances. Applies only when autoPlay is enabled.",
+          "values": []
+        },
+        {
+          "name": "media-mode",
+          "description": "Controls how the media area behaves. In <code>Static</code> mode a single\npersistent media element (image or video) is displayed alongside the nav\nlist and never changes when items are expanded. In <code>Dynamic</code>\nmode (default) each item provides its own content panel.",
+          "values": [{ "name": "Dynamic" }, { "name": "Static" }]
+        },
+        {
+          "name": "placement",
+          "description": "Placement of the navigation sidebar — \"Start\" (left) or \"End\" (right).",
+          "values": [{ "name": "Start" }, { "name": "End" }]
+        },
+        {
+          "name": "tab-width",
+          "description": "Defines the width of the navigation panel.",
+          "values": []
+        },
+        {
+          "name": "vertical-alignment",
+          "description": "Vertical alignment of the navigation sidebar relative to the content panel.",
+          "values": [{ "name": "Top" }, { "name": "Center" }]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "udex-accordion-spotlight-item",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nA single item within the <code>udex-accordion-spotlight</code> component.\nProvides a heading button (<code>aria-expanded</code>) and an associated\ncontent region (<code>role=\"region\"</code>).\n\n<h3>Usage</h3>\n\nFor 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\n---\n\n\n\n\n### **Slots:**\n - **default** - The slotted content for this item's panel.\n- **link** - Defines the link(s) to be displayed in the tab header (vertical orientation only).\nUse this slot to add one or more udex-link elements to the tab button.",
+      "attributes": [
+        {
+          "name": "heading",
+          "description": "The label text shown in the heading button.",
+          "values": []
+        },
+        {
+          "name": "selected",
+          "description": "Whether this item is currently expanded.\nSet on the element directly to control the initial selection.",
+          "values": []
+        },
+        {
+          "name": "subheading",
+          "description": "Optional descriptive subtext visible when the item is expanded.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "udex-avatar",
       "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-avatar</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Avatar.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fires when the avatar is clicked.\n- **click-default** - Fires when the avatar is clicked.\n\n### **Slots:**\n - **badge** - Defines the optional badge that will be used for visual affordance.\n- **default** - Receives the desired <img> tag",
@@ -235,7 +294,13 @@
     {
       "name": "udex-busy-indicator",
       "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor 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\n---\n\n\n",
-      "attributes": [],
+      "attributes": [
+        {
+          "name": "surface-container",
+          "description": "Renders the busy indicator inside a surface container — a semi-transparent backdrop\nwith a white rounded card holding the indicator dots. Use this when the indicator\noverlays content where the dots alone would not meet accessibility contrast requirements.",
+          "values": []
+        }
+      ],
       "references": []
     },
     {
@@ -283,13 +348,28 @@
     },
     {
       "name": "udex-carousel",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-carousel</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Carousel.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **navigate** - Triggered when carousel navigates to a new slide\n\n### **Slots:**\n - **default** - Defines the content of the component.",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-carousel</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Carousel.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **autoplay-toggle-click** - Fired event when the user click on a play/paused button.\n- **navigate** - Triggered when carousel navigates to a new slide\n\n### **Slots:**\n - **default** - Defines the content of the component.",
       "attributes": [
         {
           "name": "accessible-name",
           "description": "Defines the accessible ARIA name of the component.",
           "values": []
         },
+        {
+          "name": "autoplay",
+          "description": "Controls carousel autoplay functionality",
+          "values": []
+        },
+        {
+          "name": "autoplay-speed",
+          "description": "Defines carousel autoplay speed in milliseconds till next slide",
+          "values": []
+        },
+        {
+          "name": "cyclic",
+          "description": "Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.",
+          "values": []
+        },
         {
           "name": "items-per-page",
           "description": "Defines the number of items per page depending on the carousel width.\n\n- 'S' for screens smaller than 600 pixels.\n- 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.\n- 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.\n- 'XL' for screens greater than or equal to 1440 pixels.\n\nOne item per page is shown by default.",
@@ -858,9 +938,9 @@
           "name": "horizontal-align",
           "description": "Determines the horizontal alignment of the component.",
           "values": [
+            { "name": "Center" },
             { "name": "Start" },
             { "name": "End" },
-            { "name": "Center" },
             { "name": "Stretch" }
           ]
         },
@@ -888,9 +968,9 @@
           "name": "placement",
           "description": "Determines on which side the component is placed at.",
           "values": [
+            { "name": "Top" },
             { "name": "Start" },
             { "name": "End" },
-            { "name": "Top" },
             { "name": "Bottom" }
           ]
         },
@@ -3768,9 +3848,9 @@
           "name": "tooltip-placement",
           "description": "Determines on which side of the component the Tooltip is displayed.",
           "values": [
+            { "name": "Top" },
             { "name": "Start" },
             { "name": "End" },
-            { "name": "Top" },
             { "name": "Bottom" }
           ]
         },
@@ -4606,9 +4686,9 @@
           "name": "horizontal-align",
           "description": "Determines the horizontal alignment of table cells.\nNote: All values valid for justify-content can be used not just the ones inside the enum.",
           "values": [
+            { "name": "Center" },
             { "name": "Start" },
             { "name": "End" },
-            { "name": "Center" },
             { "name": "Left" },
             { "name": "Right" }
           ]
@@ -4629,9 +4709,9 @@
           "name": "horizontal-align",
           "description": "Determines the horizontal alignment of table cells.\nNote: All values valid for justify-content can be used not just the ones inside the enum.",
           "values": [
+            { "name": "Center" },
             { "name": "Start" },
             { "name": "End" },
-            { "name": "Center" },
             { "name": "Left" },
             { "name": "Right" }
           ]
@@ -4674,9 +4754,9 @@
           "name": "horizontal-align",
           "description": "Determines the horizontal alignment of table cells.\nNote: All values valid for justify-content can be used not just the ones inside the enum.",
           "values": [
+            { "name": "Center" },
             { "name": "Start" },
             { "name": "End" },
-            { "name": "Center" },
             { "name": "Left" },
             { "name": "Right" }
           ]
@@ -4824,9 +4904,9 @@
           "name": "tooltip-placement",
           "description": "Determines on which side of the component the Tooltip is displayed.",
           "values": [
+            { "name": "Top" },
             { "name": "Start" },
             { "name": "End" },
-            { "name": "Top" },
             { "name": "Bottom" }
           ]
         }
@@ -5136,9 +5216,9 @@
           "name": "horizontal-align",
           "description": "Determines the horizontal alignment of the component.",
           "values": [
+            { "name": "Center" },
             { "name": "Start" },
             { "name": "End" },
-            { "name": "Center" },
             { "name": "Stretch" }
           ]
         },
@@ -5156,9 +5236,9 @@
           "name": "placement",
           "description": "Determines on which side of the component the Tooltip is displayed.",
           "values": [
+            { "name": "Top" },
             { "name": "Start" },
             { "name": "End" },
-            { "name": "Top" },
             { "name": "Bottom" }
           ]
         },
@@ -5182,8 +5262,8 @@
           "description": "Determines the vertical alignment of the component.",
           "values": [
             { "name": "Top" },
-            { "name": "Bottom" },
             { "name": "Center" },
+            { "name": "Bottom" },
             { "name": "Stretch" }
           ]
         }