@sapudex/web-components 2.48.0 → 2.49.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@sapudex/web-components",
-  "version": "2.48.0",
+  "version": "2.49.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -178,6 +178,159 @@
             ]
           }
         },
+        {
+          "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### **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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "auto-play",
+              "description": "Enables automatic cycling through items on an interval.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "auto-play-interval",
+              "description": "Interval in milliseconds between automatic item advances. Applies only when autoPlay is enabled.",
+              "value": { "type": "number", "default": "5000" }
+            },
+            {
+              "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.",
+              "value": {
+                "type": "\"Dynamic\" | \"Static\"",
+                "default": "\"Dynamic\""
+              }
+            },
+            {
+              "name": "placement",
+              "description": "Placement of the navigation sidebar — \"Start\" (left) or \"End\" (right).",
+              "value": { "type": "\"Start\" | \"End\"", "default": "\"Start\"" }
+            },
+            {
+              "name": "tab-width",
+              "description": "Defines the width of the navigation panel.",
+              "value": { "type": "string", "default": "\"auto\"" }
+            },
+            {
+              "name": "vertical-alignment",
+              "description": "Vertical alignment of the navigation sidebar relative to the content panel.",
+              "value": { "type": "\"Top\" | \"Center\"", "default": "\"Top\"" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "The slotted AccordionSpotlightItem elements."
+            },
+            {
+              "name": "footer",
+              "description": "Defines optional content rendered below the navigation items.\nUse to place a button or any action element beneath the items."
+            },
+            {
+              "name": "media",
+              "description": "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."
+            }
+          ],
+          "events": [
+            {
+              "name": "item-click",
+              "description": "Fired when the expanded item clicked."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "auto-play",
+                "description": "Enables automatic cycling through items on an interval.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "auto-play-interval",
+                "description": "Interval in milliseconds between automatic item advances. Applies only when autoPlay is enabled.",
+                "value": { "type": "number" }
+              },
+              {
+                "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.",
+                "value": { "type": "\"Dynamic\" | \"Static\"" }
+              },
+              {
+                "name": "placement",
+                "description": "Placement of the navigation sidebar — \"Start\" (left) or \"End\" (right).",
+                "value": { "type": "\"Start\" | \"End\"" }
+              },
+              {
+                "name": "tab-width",
+                "description": "Defines the width of the navigation panel.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "vertical-alignment",
+                "description": "Vertical alignment of the navigation sidebar relative to the content panel.",
+                "value": { "type": "\"Top\" | \"Center\"" }
+              }
+            ],
+            "events": [
+              {
+                "name": "item-click",
+                "description": "Fired when the expanded item clicked."
+              }
+            ]
+          }
+        },
+        {
+          "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### **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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "heading",
+              "description": "The label text shown in the heading button.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "selected",
+              "description": "Whether this item is currently expanded.\nSet on the element directly to control the initial selection.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "subheading",
+              "description": "Optional descriptive subtext visible when the item is expanded.",
+              "value": { "type": "string", "default": "\"\"" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "The slotted content for this item's panel."
+            },
+            {
+              "name": "link",
+              "description": "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."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "heading",
+                "description": "The label text shown in the heading button.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "selected",
+                "description": "Whether this item is currently expanded.\nSet on the element directly to control the initial selection.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "subheading",
+                "description": "Optional descriptive subtext visible when the item is expanded.",
+                "value": { "type": "string" }
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "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### **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",
@@ -517,9 +670,24 @@
           "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",
           "doc-url": "",
-          "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.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
           "events": [],
-          "js": { "properties": [], "events": [] }
+          "js": {
+            "properties": [
+              {
+                "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.",
+                "value": { "type": "boolean" }
+              }
+            ],
+            "events": []
+          }
         },
         {
           "name": "udex-button",
@@ -965,7 +1133,7 @@
             {
               "name": "default-accessible-role",
               "description": "Defines the default accessible role for the list component.",
-              "value": { "type": "string", "default": "\"list\"" }
+              "value": { "type": "string", "default": "\"listbox\"" }
             },
             {
               "name": "height",
@@ -1730,7 +1898,7 @@
               "description": "Allows setting a custom role.",
               "value": {
                 "type": "\"None\" | \"Dialog\" | \"AlertDialog\"",
-                "default": "\"None\""
+                "default": "\"Dialog\""
               }
             },
             {
@@ -1751,7 +1919,7 @@
             {
               "name": "default-accessible-role",
               "description": "Defines the default accessible role for the list component.",
-              "value": { "type": "string", "default": "\"list\"" }
+              "value": { "type": "string", "default": "\"listbox\"" }
             },
             {
               "name": "disable-target-overlap",
@@ -1792,7 +1960,7 @@
               "name": "horizontal-align",
               "description": "Determines the horizontal alignment of the component.",
               "value": {
-                "type": "\"Start\" | \"End\" | \"Center\" | \"Stretch\"",
+                "type": "\"Center\" | \"Start\" | \"End\" | \"Stretch\"",
                 "default": "\"Left\""
               }
             },
@@ -1818,7 +1986,7 @@
               "name": "placement",
               "description": "Determines on which side the component is placed at.",
               "value": {
-                "type": "\"Start\" | \"End\" | \"Top\" | \"Bottom\"",
+                "type": "\"Top\" | \"Start\" | \"End\" | \"Bottom\"",
                 "default": "\"Bottom\""
               }
             },
@@ -1863,7 +2031,7 @@
             {
               "name": "trigger-accessible-role",
               "description": "Allows setting a custom role for dropdown trigger.",
-              "value": { "type": "string", "default": "\"combobox\"" }
+              "value": { "type": "string", "default": "\"button\"" }
             },
             {
               "name": "type",
@@ -2002,7 +2170,7 @@
                 "name": "horizontal-align",
                 "description": "Determines the horizontal alignment of the component.",
                 "value": {
-                  "type": "\"Start\" | \"End\" | \"Center\" | \"Stretch\""
+                  "type": "\"Center\" | \"Start\" | \"End\" | \"Stretch\""
                 }
               },
               {
@@ -2026,7 +2194,7 @@
                 "name": "placement",
                 "description": "Determines on which side the component is placed at.",
                 "value": {
-                  "type": "\"Start\" | \"End\" | \"Top\" | \"Bottom\""
+                  "type": "\"Top\" | \"Start\" | \"End\" | \"Bottom\""
                 }
               },
               {
@@ -7868,7 +8036,7 @@
             {
               "name": "default-accessible-role",
               "description": "Defines the default accessible role for the list component.",
-              "value": { "type": "string", "default": "\"list\"" }
+              "value": { "type": "string", "default": "\"listbox\"" }
             },
             {
               "name": "disable-target-overlap",
@@ -7927,7 +8095,7 @@
               "name": "tooltip-placement",
               "description": "Determines on which side of the component the Tooltip is displayed.",
               "value": {
-                "type": "\"Start\" | \"End\" | \"Top\" | \"Bottom\"",
+                "type": "\"Top\" | \"Start\" | \"End\" | \"Bottom\"",
                 "default": "\"Bottom\""
               }
             },
@@ -8055,7 +8223,7 @@
                 "name": "tooltip-placement",
                 "description": "Determines on which side of the component the Tooltip is displayed.",
                 "value": {
-                  "type": "\"Start\" | \"End\" | \"Top\" | \"Bottom\""
+                  "type": "\"Top\" | \"Start\" | \"End\" | \"Bottom\""
                 }
               },
               {
@@ -9838,7 +10006,7 @@
               "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.",
               "value": {
-                "type": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined",
+                "type": "\"Center\" | \"Start\" | \"End\" | \"Left\" | \"Right\" | undefined",
                 "default": "undefined"
               }
             },
@@ -9861,7 +10029,7 @@
                 "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.",
                 "value": {
-                  "type": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined"
+                  "type": "\"Center\" | \"Start\" | \"End\" | \"Left\" | \"Right\" | undefined"
                 }
               },
               {
@@ -9936,7 +10104,7 @@
               "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.",
               "value": {
-                "type": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined",
+                "type": "\"Center\" | \"Start\" | \"End\" | \"Left\" | \"Right\" | undefined",
                 "default": "undefined"
               }
             },
@@ -9969,7 +10137,7 @@
                 "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.",
                 "value": {
-                  "type": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined"
+                  "type": "\"Center\" | \"Start\" | \"End\" | \"Left\" | \"Right\" | undefined"
                 }
               },
               {
@@ -10240,7 +10408,7 @@
               "name": "tooltip-placement",
               "description": "Determines on which side of the component the Tooltip is displayed.",
               "value": {
-                "type": "\"Start\" | \"End\" | \"Top\" | \"Bottom\"",
+                "type": "\"Top\" | \"Start\" | \"End\" | \"Bottom\"",
                 "default": "\"Bottom\""
               }
             }
@@ -10295,7 +10463,7 @@
                 "name": "tooltip-placement",
                 "description": "Determines on which side of the component the Tooltip is displayed.",
                 "value": {
-                  "type": "\"Start\" | \"End\" | \"Top\" | \"Bottom\""
+                  "type": "\"Top\" | \"Start\" | \"End\" | \"Bottom\""
                 }
               }
             ],
@@ -10909,7 +11077,7 @@
               "name": "horizontal-align",
               "description": "Determines the horizontal alignment of the component.",
               "value": {
-                "type": "\"Start\" | \"End\" | \"Center\" | \"Stretch\"",
+                "type": "\"Center\" | \"Start\" | \"End\" | \"Stretch\"",
                 "default": "\"Center\""
               }
             },
@@ -10930,7 +11098,7 @@
               "name": "placement",
               "description": "Determines on which side of the component the Tooltip is displayed.",
               "value": {
-                "type": "\"Start\" | \"End\" | \"Top\" | \"Bottom\"",
+                "type": "\"Top\" | \"Start\" | \"End\" | \"Bottom\"",
                 "default": "\"End\""
               }
             },
@@ -10953,7 +11121,7 @@
               "name": "vertical-align",
               "description": "Determines the vertical alignment of the component.",
               "value": {
-                "type": "\"Top\" | \"Bottom\" | \"Center\" | \"Stretch\"",
+                "type": "\"Top\" | \"Center\" | \"Bottom\" | \"Stretch\"",
                 "default": "\"Center\""
               }
             }
@@ -11008,7 +11176,7 @@
                 "name": "horizontal-align",
                 "description": "Determines the horizontal alignment of the component.",
                 "value": {
-                  "type": "\"Start\" | \"End\" | \"Center\" | \"Stretch\""
+                  "type": "\"Center\" | \"Start\" | \"End\" | \"Stretch\""
                 }
               },
               {
@@ -11025,7 +11193,7 @@
                 "name": "placement",
                 "description": "Determines on which side of the component the Tooltip is displayed.",
                 "value": {
-                  "type": "\"Start\" | \"End\" | \"Top\" | \"Bottom\""
+                  "type": "\"Top\" | \"Start\" | \"End\" | \"Bottom\""
                 }
               },
               {
@@ -11047,7 +11215,7 @@
                 "name": "vertical-align",
                 "description": "Determines the vertical alignment of the component.",
                 "value": {
-                  "type": "\"Top\" | \"Bottom\" | \"Center\" | \"Stretch\""
+                  "type": "\"Top\" | \"Center\" | \"Bottom\" | \"Stretch\""
                 }
               }
             ],

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.48.0",
+  "version": "2.49.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },