@pure-ds/core 0.3.18 → 0.4.0

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

@@ -1,10 +1,20 @@
 /**
+ * A tab panel used as a child of `<pds-tabstrip>`. Each panel becomes a tab
+ * with its button label derived from the `label` attribute.
+ * 
  * @element pds-tabpanel
  * 
- * @attr {string} label - Label for the tab button
+ * @attr {string} label - Label text displayed on the tab button
  * @attr {string} id - Unique identifier for the panel (auto-generated if not provided)
  * 
- * @slot - Content of the tab panel
+ * @slot - Content displayed when this tab is active
+ * 
+ * @example
+ * ```html
+ * <pds-tabpanel label="Settings">
+ *   <p>Settings content here.</p>
+ * </pds-tabpanel>
+ * ```
  */
 class TabPanel extends HTMLElement {
   connectedCallback() {
@@ -36,18 +46,39 @@ class TabPanel extends HTMLElement {
 customElements.define("pds-tabpanel", TabPanel);
 
 /**
- * Tab navigation component that pairs anchors with `pds-tabpanel` children.
+ * Tab navigation component that displays content in switchable panels.
+ * 
+ * Use `<pds-tabpanel>` children with a `label` attribute to define each tab.
+ * The component auto-generates navigation buttons and handles URL hash synchronization.
  *
  * @element pds-tabstrip
+ * 
  * @fires tabchange - Fired when the active tab changes. Detail: `{ oldTab: string|null, newTab: string }`
  *
- * @attr {string} label - Accessible label announced for the tablist
+ * @attr {string} label - Accessible label announced for the tablist (default: "Tabs")
  * @attr {string} selected - Identifier of the currently active panel (synced with the location hash)
  *
- * @slot - Collection of `pds-tabpanel` nodes representing individual tab panels
+ * @slot - One or more `<pds-tabpanel>` elements, each with a `label` attribute
  *
  * @csspart tabs - Navigation container comprising the clickable tab buttons
  * @cssprop --color-accent-400 - Color of the active tab indicator underline
+ * 
+ * @example
+ * ```html
+ * <pds-tabstrip label="Account settings">
+ *   <pds-tabpanel label="General">
+ *     <p>General settings content here.</p>
+ *   </pds-tabpanel>
+ *   
+ *   <pds-tabpanel label="Security">
+ *     <p>Security settings content here.</p>
+ *   </pds-tabpanel>
+ *   
+ *   <pds-tabpanel label="Notifications">
+ *     <p>Notification preferences here.</p>
+ *   </pds-tabpanel>
+ * </pds-tabstrip>
+ * ```
  */
 class TabStrip extends HTMLElement {
   #shadow = this.attachShadow({ mode: "open" });

package/public/assets/pds/custom-elements.json

@@ -1306,7 +1306,8 @@
             },
             {
               "kind": "method",
-              "name": "updateLayout"
+              "name": "updateLayout",
+              "description": "Updates the layout based on the current viewport width and breakpoint.\nToggles mobile mode and adjusts panel styles."
             },
             {
               "kind": "method",
@@ -1332,11 +1333,13 @@
             },
             {
               "kind": "method",
-              "name": "toggleMobileView"
+              "name": "toggleMobileView",
+              "description": "Toggles the visibility of the primary panel in mobile view."
             },
             {
               "kind": "method",
-              "name": "closeMobileView"
+              "name": "closeMobileView",
+              "description": "Closes the primary panel in mobile view."
             },
             {
               "kind": "method",
@@ -1429,11 +1432,11 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "A tab panel used as a child of `<pds-tabstrip>`. Each panel becomes a tab\nwith its button label derived from the `label` attribute.",
           "name": "TabPanel",
           "slots": [
             {
-              "description": "Content of the tab panel",
+              "description": "Content displayed when this tab is active",
               "name": ""
             }
           ],
@@ -1455,7 +1458,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Label for the tab button",
+              "description": "Label text displayed on the tab button",
               "name": "label"
             },
             {
@@ -1474,7 +1477,7 @@
         },
         {
           "kind": "class",
-          "description": "Tab navigation component that pairs anchors with `pds-tabpanel` children.",
+          "description": "Tab navigation component that displays content in switchable panels.\n\nUse `<pds-tabpanel>` children with a `label` attribute to define each tab.\nThe component auto-generates navigation buttons and handles URL hash synchronization.",
           "name": "TabStrip",
           "cssProperties": [
             {
@@ -1490,7 +1493,7 @@
           ],
           "slots": [
             {
-              "description": "Collection of `pds-tabpanel` nodes representing individual tab panels",
+              "description": "One or more `<pds-tabpanel>` elements, each with a `label` attribute",
               "name": ""
             }
           ],
@@ -1515,7 +1518,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Accessible label announced for the tablist",
+              "description": "Accessible label announced for the tablist (default: \"Tabs\")",
               "name": "label"
             },
             {

package/public/assets/pds/pds-css-complete.json

@@ -1853,7 +1853,7 @@
   "dataAttributes": [],
   "metadata": {
     "generator": "PDS CSS Data Generator",
-    "generatedAt": "2025-12-12T11:34:39.874Z",
+    "generatedAt": "2025-12-19T15:38:18.395Z",
     "totalProperties": 165,
     "totalClasses": 91,
     "totalAttributes": 0

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

@@ -749,11 +749,11 @@
     },
     {
       "name": "pds-tabpanel",
-      "description": "TabPanel component",
+      "description": "A tab panel used as a child of `<pds-tabstrip>`. Each panel becomes a tab\nwith its button label derived from the `label` attribute.",
       "attributes": [
         {
           "name": "label",
-          "description": "Label for the tab button"
+          "description": "Label text displayed on the tab button"
         },
         {
           "name": "id",
@@ -763,11 +763,11 @@
     },
     {
       "name": "pds-tabstrip",
-      "description": "Tab navigation component that pairs anchors with `pds-tabpanel` children.",
+      "description": "Tab navigation component that displays content in switchable panels.\n\nUse `<pds-tabpanel>` children with a `label` attribute to define each tab.\nThe component auto-generates navigation buttons and handles URL hash synchronization.",
       "attributes": [
         {
           "name": "label",
-          "description": "Accessible label announced for the tablist"
+          "description": "Accessible label announced for the tablist (default: \"Tabs\")"
         },
         {
           "name": "selected",

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

@@ -1645,6 +1645,36 @@ html[data-theme="dark"] .liquid-glass {
   height: 0;
 }
 
+/* Labeled horizontal rule: <hr data-content="OR"> */
+:where(hr[data-content]) {
+  position: relative;
+  border: none;
+  text-align: center;
+  height: auto;
+  overflow: visible;
+  
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 100%;
+    height: 1px;
+    background: linear-gradient(to right, transparent, var(--color-border), transparent);
+  }
+  
+  &::after {
+    content: attr(data-content);
+    position: relative;
+    display: inline-block;
+    padding: 0 var(--spacing-3);
+    background-color: var(--color-surface-base);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+    line-height: var(--font-line-height-normal);
+  }
+}
+
 :where(dl) {
   margin: 0 0 var(--spacing-4) 0;
 }
@@ -3365,40 +3395,40 @@ pds-tabstrip {
 ::-webkit-scrollbar {
   width: 12px;
   height: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-secondary-300);
+  border-radius: var(--radius-full);
+  border: 3px solid transparent;
+  background-clip: padding-box;
+  transition: background-color var(--transition-fast);
   
-  &-track {
-    background: transparent;
+  &:hover {
+    background: var(--color-secondary-400);
+    border: 2px solid transparent;
+    background-clip: padding-box;
   }
   
-  &-thumb {
-    background: var(--color-secondary-300);
-    border-radius: var(--radius-full);
-    border: 3px solid transparent;
+  &:active {
+    background: var(--color-secondary-500);
+    border: 2px solid transparent;
     background-clip: padding-box;
-    transition: background-color var(--transition-fast);
+  }
+  
+  @media (prefers-color-scheme: dark) {
+    background: var(--color-secondary-600);
     
     &:hover {
-      background: var(--color-secondary-400);
-      border: 2px solid transparent;
-      background-clip: padding-box;
-    }
-    
-    &:active {
       background: var(--color-secondary-500);
-      border: 2px solid transparent;
-      background-clip: padding-box;
     }
     
-    @media (prefers-color-scheme: dark) {
-      background: var(--color-secondary-600);
-      
-      &:hover {
-        background: var(--color-secondary-500);
-      }
-      
-      &:active {
-        background: var(--color-secondary-400);
-      }
+    &:active {
+      background: var(--color-secondary-400);
     }
   }
 }
@@ -3843,6 +3873,11 @@ nav[data-dropdown] {
   flex-direction: row;
 }
 
+/* Flex grow - fill remaining space */
+.grow {
+  flex: 1 1 0%;
+}
+
 /* Flex alignment */
 .items-start { align-items: flex-start; }
 .items-center { align-items: center; }
@@ -3857,6 +3892,34 @@ nav[data-dropdown] {
 .justify-around { justify-content: space-around; }
 .justify-evenly { justify-content: space-evenly; }
 
+/* Text alignment utilities */
+.text-left { text-align: left; }
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+
+/* Text overflow utility */
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Max-width utilities (semantic breakpoints) */
+.max-w-sm { max-width: 400px; }
+.max-w-md { max-width: 600px; }
+.max-w-lg { max-width: 800px; }
+.max-w-xl { max-width: 1200px; }
+
+/* Stack utilities - vertical rhythm for stacked elements */
+.stack-sm { display: flex; flex-direction: column; gap: var(--spacing-2); }
+.stack-md { display: flex; flex-direction: column; gap: var(--spacing-4); }
+.stack-lg { display: flex; flex-direction: column; gap: var(--spacing-6); }
+.stack-xl { display: flex; flex-direction: column; gap: var(--spacing-8); }
+
+/* Section spacing - for major content blocks */
+.section { padding-block: var(--spacing-8); }
+.section-lg { padding-block: var(--spacing-12); }
+
 /* Responsive helpers */
 @media (max-width: ${breakpoints.md - 1}px) {
   .mobile-stack { flex-direction: column; }
@@ -3883,29 +3946,29 @@ nav[data-dropdown] {
     opacity: var(--backdrop-opacity, 1);
     pointer-events: auto;
   }
+}
 
-  /* Backdrop variants */
-  &-light {
-    --backdrop-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
-    --backdrop-brightness: 1.1;
-  }
+/* Backdrop variants */
+.backdrop-light {
+  --backdrop-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
+  --backdrop-brightness: 1.1;
+}
 
-  &-dark {
-    --backdrop-bg: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
-    --backdrop-brightness: 0.6;
-  }
+.backdrop-dark {
+  --backdrop-bg: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
+  --backdrop-brightness: 0.6;
+}
 
-  &-blur-sm {
-    --backdrop-blur: 5px;
-  }
+.backdrop-blur-sm {
+  --backdrop-blur: 5px;
+}
 
-  &-blur-md {
-    --backdrop-blur: 10px;
-  }
+.backdrop-blur-md {
+  --backdrop-blur: 10px;
+}
 
-  &-blur-lg {
-    --backdrop-blur: 20px;
-  }
+.backdrop-blur-lg {
+  --backdrop-blur: 20px;
 }
 `
     );
@@ -4640,23 +4703,23 @@ ${this.#generateTableStyles()}
   background: var(--color-surface-base);
   border-radius: var(--radius-md);
   padding: var(--spacing-4);
+}
 
-  &-elevated {
-    background: var(--color-surface-elevated);
-    box-shadow: var(--shadow-md);
-  }
+.card-elevated {
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow-md);
+}
 
-  &-outlined,
-  &-basic {
-    background: var(--color-surface-base);
-    border: 1px solid var(--color-border);
-  }
+.card-outlined,
+.card-basic {
+  background: var(--color-surface-base);
+  border: 1px solid var(--color-border);
+}
 
-  &-interactive:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-lg);
-    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
-  }
+.card-interactive:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
 }
 
 ${this.#generateScrollbarStyles()}
@@ -4744,6 +4807,34 @@ ${this.#generateBorderGradientUtilities()}
   pds-icon {
     color: var(--surface-inverse-icon);
   }
+  
+  /* Default and secondary buttons on inverse - semi-transparent glass effect */
+  & button:not(.btn-primary):not(.btn-outline):not(.btn-danger):not(.btn-success):not(.btn-warning),
+  & .btn-secondary {
+    background-color: rgba(255, 255, 255, 0.12);
+    color: var(--surface-inverse-text);
+    border-color: rgba(255, 255, 255, 0.25);
+    
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+    
+    &:active {
+      background-color: rgba(255, 255, 255, 0.28);
+    }
+  }
+  
+  /* Ensure btn-primary stays vibrant on inverse */
+  & .btn-primary {
+    background-color: var(--color-primary-500);
+    border-color: var(--color-primary-500);
+    color: var(--color-primary-contrast, #ffffff);
+    
+    &:hover {
+      background-color: var(--color-primary-400);
+      border-color: var(--color-primary-400);
+    }
+  }
 }
 
 /* Shadow utilities */