@pure-ds/core 0.4.11 → 0.4.13

package/public/assets/pds/components/pds-calendar.js

@@ -135,10 +135,7 @@ class DateHelper {
  * @csspart day - Individual day cells
  * @csspart task - Event items within days
  */
-customElements.define(
-  "pds-calendar",
-
-  class extends HTMLElement {
+class PdsCalendar extends HTMLElement {
     #date;
     #dayNames;
     #monthNames;
@@ -520,8 +517,8 @@ button.btn-xs {
       this.startDay = new Date(this.year, this.month, 0).getDay();
 
       const calendarHtml = /*html*/ `
-        <div class="calendar-container">
-          <nav class="calendar-header">
+        <div class="calendar-container" part="calendar-container">
+          <nav class="calendar-header" part="calendar-header">
             <button class="btn-outline prev btn-xs"><pds-icon icon="arrow-left" size="xs"></pds-icon></button>
             <div class="current-month">
               <h3 class="month-name">${this.#monthNames[this.month]}</h3>
@@ -530,7 +527,7 @@ button.btn-xs {
             <button class="btn-outline next btn-xs"><pds-icon icon="arrow-right" size="xs"></pds-icon></button>
           </nav>
 
-          <div class="calendar">
+          <div class="calendar" part="calendar">
             ${this.getDayNamesHtml()}
             ${this.getDaysHtml()}
           </div>
@@ -763,7 +760,7 @@ button.btn-xs {
                   for (const item of list) {
                     const html = /*html*/ `<div class="task task--${
                       item.type || "info"
-                    }">
+                    }" part="task">
                     <div class="task__detail">
                       <h3>
                         ${item.title}
@@ -816,22 +813,23 @@ button.btn-xs {
         this.month === todayMonth && this.year === todayYear;
 
       for (let i = 0; i < this.startDay; i++) {
-        html.add(/*html*/ `<div class="day day-disabled"></div>`);
+        html.add(/*html*/ `<div class="day day-disabled" part="day"></div>`);
       }
       for (let i = 1; i <= this.daysInMonth; i++) {
         const isTodayClass =
           isCurrentMonth && i === todayDay ? "day-today" : "";
         html.add(/*html*/ `
-        <div data-day="${i}" class="day ${isTodayClass}">
+        <div data-day="${i}" class="day ${isTodayClass}" part="day">
           <span class="nr">${i}<span>
         </div>`);
       }
       const endDay =
         6 - new Date(this.year, this.month, this.daysInMonth).getDay();
       for (let i = 1; i <= endDay; i++) {
-        html.add(/*html*/ `<div class="day day-disabled"></div>`);
+        html.add(/*html*/ `<div class="day day-disabled" part="day"></div>`);
       }
       return html.toHTML();
     }
   }
-);
+}
+customElements.define("pds-calendar", PdsCalendar);

package/public/assets/pds/components/pds-drawer.js

@@ -19,7 +19,7 @@ const PDS = window.PDS;
  * @csspart grab-handle - The drag handle indicator
  * @csspart content - The drawer content section
  */
-customElements.define("pds-drawer", class extends HTMLElement {
+class PdsDrawer extends HTMLElement {
   #isDragging = false;
   #startX = 0;
   #startY = 0;
@@ -854,4 +854,5 @@ customElements.define("pds-drawer", class extends HTMLElement {
       }
     }
   }
-})
+}
+customElements.define("pds-drawer", PdsDrawer);

package/public/assets/pds/components/pds-scrollrow.js

@@ -4,7 +4,10 @@
  * @element pds-scrollrow
  * @slot default - Scrollable tile content
  * @slot heading - Optional heading content rendered in the component header
+ * 
  * @csspart viewport - The scrollable container element
+ * @csspart prev - The previous/left scroll navigation button
+ * @csspart next - The next/right scroll navigation button
  *
  * @attr {string} label - Accessible label for the scroll region; also used as fallback heading copy
  * @attr {"start"|"center"} snap - Snap alignment for tiles when scrolling (default: start)

package/public/assets/pds/components/pds-splitpanel.js

@@ -16,6 +16,7 @@
  * @slot right - Content for the right (or bottom) panel.
  *
  * @csspart toggle - The mobile toggle button.
+ * @csspart splitter - The draggable splitter bar between panels.
  *
  * @cssprop --left-width - Width of the left panel in horizontal layout.
  * @cssprop --color-border - Color of the splitter bar.
@@ -39,9 +40,7 @@
  *   <div slot="right">Bottom Panel Content</div>
  * </pds-splitpanel>
  */
-customElements.define(
-  "pds-splitpanel",
-  class extends HTMLElement {
+class PdsSplitpanel extends HTMLElement {
     static get observedAttributes() {
       return ["layout", "defaultsplit", "breakpoint", "open"];
     }
@@ -165,7 +164,7 @@ customElements.define(
         <div class="left-panel">
           <slot name="left"></slot>
         </div>
-        <div class="splitter"></div>
+        <div class="splitter" part="splitter"></div>
         <div class="right-panel">
           <slot name="right"></slot>
         </div>
@@ -186,7 +185,7 @@ customElements.define(
       :host {
         display: flex;
         position: relative;
-        height: 100%;
+        min-height: 0;
         width: 100%;
       }
 
@@ -218,11 +217,11 @@ customElements.define(
         cursor: col-resize;
         position: relative;
         z-index: 1;
+        align-self: stretch;
       }
 
       :host([layout="horizontal"]) .splitter {
         width: 5px;
-        height: 100%;
       }
 
       :host([layout="vertical"]) .splitter {
@@ -398,4 +397,4 @@ customElements.define(
       this.$icon.setAttribute("icon", this._open ? "x" : "list");
     }
   }
-);
+customElements.define("pds-splitpanel", PdsSplitpanel);

package/public/assets/pds/vscode-custom-data.json

@@ -3,17 +3,17 @@
   "tags": [
     {
       "name": "pds-calendar",
-      "description": "anonymous_0 component",
+      "description": "PdsCalendar component",
       "attributes": [
         {
           "name": "date",
-          "description": ""
+          "description": "The date to display (defaults to current date). Accepts any valid date string"
         }
       ]
     },
     {
-      "name": "pds-calendar",
-      "description": "anonymous_0 component",
+      "name": "pds-drawer",
+      "description": "PdsDrawer component",
       "attributes": [
         {
           "name": "open",
@@ -726,24 +726,24 @@
       ]
     },
     {
-      "name": "pds-calendar",
-      "description": "anonymous_0 component",
+      "name": "pds-splitpanel",
+      "description": "PdsSplitpanel component",
       "attributes": [
         {
           "name": "layout",
-          "description": ""
+          "description": "The layout direction of the panels. Can be \"horizontal\" or \"vertical\". Defaults to \"horizontal\"."
         },
         {
           "name": "defaultsplit",
-          "description": ""
+          "description": "The initial size of the primary (left/top) panel. Defaults to \"450px\"."
         },
         {
           "name": "breakpoint",
-          "description": ""
+          "description": "The viewport width in pixels below which the component switches to mobile view. Defaults to 1024."
         },
         {
           "name": "open",
-          "description": ""
+          "description": "Controls the visibility of the primary panel in mobile view."
         }
       ]
     },
@@ -815,6 +815,11 @@
       "description": "Creates a toggle switch element from a checkbox.\n\nExample:\n<label data-toggle>\n<input type=\"checkbox\">\n<span data-label>Enable notifications</span>\n</label>",
       "valueSet": "v"
     },
+    {
+      "name": "data-required",
+      "description": "Enhances required form fields using an asterisk in the label.\n\nExample:\n<form data-required action=\"#\" method=\"post\">\n<label>\n<span>Field Label</span>\n<input type=\"text\" required>\n</label>\n<nav class=\"form-actions\">\n<button type=\"submit\" class=\"btn-primary\">Submit</button>\n</nav>\n</form>",
+      "valueSet": "v"
+    },
     {
       "name": "data-open",
       "description": "Enhances a checkbox/radio group to be open (have a way to add and remove items).\n\nExample:\n<fieldset role=\"group\" data-open>\n<label>\n<span data-label>Test</span>\n<input value=\"lala\" name=\"test1\" type=\"radio\" />\n</label>\n</fieldset>",

package/src/js/pds-core/pds-enhancers.js

@@ -5,8 +5,10 @@ function enhanceAccordion(elem) {
   elem.dataset.enhancedAccordion = "true";
 
   elem.addEventListener("toggle", (event) => {
-    if (event.target.open) {
-      elem.querySelectorAll("details[open]").forEach((details) => {
+    // Only handle toggle events from direct child details elements
+    // to avoid closing parent details when nested accordions are used
+    if (event.target.open && event.target.parentElement === elem) {
+      elem.querySelectorAll(":scope > details[open]").forEach((details) => {
         if (details !== event.target) {
           details.open = false;
         }