@pure-ds/core 0.7.25 → 0.7.27

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

@@ -1672,6 +1672,11 @@
       "description": "Button primitive component",
       "category": "Primitives"
     },
+    {
+      "name": "btn-danger",
+      "description": "Button primitive component",
+      "category": "Primitives"
+    },
     {
       "name": "btn-sm",
       "description": "Button primitive component",
@@ -2292,9 +2297,9 @@
   ],
   "metadata": {
     "generator": "PDS CSS Data Generator",
-    "generatedAt": "2026-02-26T07:33:17.462Z",
+    "generatedAt": "2026-03-03T08:40:38.831Z",
     "totalProperties": 169,
-    "totalClasses": 169,
+    "totalClasses": 170,
     "totalAttributes": 5
   }
 }

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

@@ -2001,6 +2001,10 @@
       "name": "btn-outline",
       "description": "Button primitive component"
     },
+    {
+      "name": "btn-danger",
+      "description": "Button primitive component"
+    },
     {
       "name": "btn-sm",
       "description": "Button primitive component"
@@ -2192,10 +2196,6 @@
     {
       "name": "stack-md",
       "description": "Vertical flex layout with predefined gaps"
-    },
-    {
-      "name": "stack-lg",
-      "description": "Vertical flex layout with predefined gaps"
     }
   ],
   "pseudoElements": []

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

@@ -8,6 +8,66 @@
         {
           "name": "date",
           "description": "The date to display (defaults to current date). Accepts any valid date string"
+        },
+        {
+          "name": "required",
+          "description": ""
+        },
+        {
+          "name": "name",
+          "description": ""
+        },
+        {
+          "name": "disabled",
+          "description": ""
+        },
+        {
+          "name": "compact",
+          "description": ""
+        }
+      ]
+    },
+    {
+      "name": "pds-code",
+      "description": "PDSCode component",
+      "attributes": [
+        {
+          "name": "code",
+          "description": ""
+        },
+        {
+          "name": "lang",
+          "description": ""
+        },
+        {
+          "name": "theme",
+          "description": ""
+        }
+      ]
+    },
+    {
+      "name": "pds-daterange",
+      "description": "PdsDateRange component",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "Form field name used during form submission."
+        },
+        {
+          "name": "required",
+          "description": "Requires both start and end dates to be selected."
+        },
+        {
+          "name": "disabled",
+          "description": "Disables interaction and closes the panel when active."
+        },
+        {
+          "name": "value",
+          "description": "Serialized range value as ISO interval: `YYYY-MM-DD/YYYY-MM-DD`."
+        },
+        {
+          "name": "display-format",
+          "description": "Button date text format. Default is `d MMM yy`."
         }
       ]
     },
@@ -739,6 +799,43 @@
         }
       ]
     },
+    {
+      "name": "pds-rating",
+      "description": "Star-based rating input that participates in native HTML forms.",
+      "attributes": [
+        {
+          "name": "max",
+          "description": "Maximum rating value and rendered star count (minimum 1, default 5)"
+        },
+        {
+          "name": "value",
+          "description": "Current rating value (snapped to 0.5 increments)"
+        },
+        {
+          "name": "disabled",
+          "description": "Disables keyboard/pointer interaction and form submission value",
+          "valueSet": "v"
+        },
+        {
+          "name": "required",
+          "description": "Marks the rating as required for form validation",
+          "valueSet": "v"
+        },
+        {
+          "name": "readonly",
+          "description": "Makes the rating non-editable while still focusable",
+          "valueSet": "v"
+        },
+        {
+          "name": "name",
+          "description": "Form field name used when submitting the rating"
+        },
+        {
+          "name": "color",
+          "description": "Optional active star color (CSS color value)"
+        }
+      ]
+    },
     {
       "name": "pds-richtext",
       "description": "RichText component",

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

@@ -2753,7 +2753,7 @@ button, .btn, input[type="submit"], input[type="button"], input[type="reset"] {
   border-color: var(--color-border);
   
   /* Only apply generic hover to non-variant buttons */
-  &:hover:not(.btn-primary):not(.btn-secondary):not(.btn-outline) {
+  &:hover:not(.btn-primary):not(.btn-secondary):not(.btn-outline):not(.btn-danger) {
     background-color: var(--color-surface-elevated);
   }
   
@@ -2845,6 +2845,56 @@ button, .btn, input[type="submit"], input[type="button"], input[type="reset"] {
   }
 }
 
+.btn-danger {
+  background-color: var(--color-danger-600);
+  color: white;
+  border-color: var(--color-danger-600);
+
+  &:hover {
+    background-color: color-mix(in oklab, var(--color-danger-600) 90%, black 10%);
+    border-color: color-mix(in oklab, var(--color-danger-600) 90%, black 10%);
+    color: white;
+  }
+
+  &:active {
+    background-color: color-mix(in oklab, var(--color-danger-600) 80%, black 20%);
+    border-color: color-mix(in oklab, var(--color-danger-600) 80%, black 20%);
+    color: white;
+  }
+}
+
+.btn-danger.btn-outline {
+  background-color: transparent;
+  color: var(--color-danger-600);
+  border-color: var(--color-danger-600);
+
+  &:hover {
+    background-color: var(--color-danger-600);
+    border-color: var(--color-danger-600);
+    color: white;
+
+    pds-icon {
+      color: white;
+    }
+  }
+
+  &:active {
+    background-color: color-mix(in oklab, var(--color-danger-600) 80%, black 20%);
+    border-color: color-mix(in oklab, var(--color-danger-600) 80%, black 20%);
+    color: white;
+
+    pds-icon {
+      color: white;
+    }
+  }
+
+  &:disabled {
+    background-color: transparent;
+    color: var(--color-input-disabled-text);
+    border-color: var(--color-input-disabled-bg);
+  }
+}
+
 .btn-sm {
   padding: calc(max(calc(var(--spacing-1) * ${buttonPaddingValue}), var(--spacing-2)) * 0.85) calc(var(--spacing-6) * 0.8);
   font-size: var(--font-size-sm);
@@ -3516,6 +3566,17 @@ dialog {
   overflow: hidden; /* Prevent dialog itself from scrolling - let .dialog-body handle it */
 }
 
+/*
+ * Overlay safety valve:
+ * Some controls (e.g. pds-daterange panel, data-dropdown menus) need to escape
+ * the dialog bounds. Scope overflow visibility to custom dialogs that contain
+ * those controls instead of enabling it for all dialogs.
+ */
+dialog.dialog-custom:has(pds-daterange),
+dialog.dialog-custom:has([data-dropdown]) {
+  overflow: visible;
+}
+
 /* Form structure - use flexbox instead of contents */
 dialog form {
   display: flex;
@@ -3525,11 +3586,6 @@ dialog form {
   margin: 0;
 }
 
-/* Dialog fields - to open pds-form subforms */
-.dialog-field {
-    margin-top: var(--spacing-3);
-}
-
 /* Dialog header */
 dialog {
   header,
@@ -3584,7 +3640,20 @@ dialog {
     min-height: 0; /* Critical: allow flex child to shrink and scroll */
     padding: var(--spacing-3) var(--spacing-6);
     overflow-y: auto;
-    overflow-x: hidden;
+    overflow-x: visible;
+  }
+
+  /* Allow overlay menus (e.g. data-dropdown) to escape dialog-body clipping while open */
+  article:has([data-dropdown] > :last-child[aria-hidden="false"]),
+  form > article:has([data-dropdown] > :last-child[aria-hidden="false"]),
+  .dialog-body:has([data-dropdown] > :last-child[aria-hidden="false"]) {
+    overflow: visible;
+  }
+
+  article:has(pds-daterange),
+  form > article:has(pds-daterange),
+  .dialog-body:has(pds-daterange) {
+    overflow: visible;
   }
 
   /* Dialog footer - actions */
@@ -3610,23 +3679,14 @@ dialog.dialog-full { width: calc(100vw - var(--spacing-8)); max-width: calc(100v
 /* Mobile responsiveness - maximize on mobile */
 @media (max-width: ${breakpoints.sm - 1}px) {
   dialog,
+  dialog.dialog-sm,
+  dialog.dialog-lg,
+  dialog.dialog-xl,
+  dialog.dialog-full,
   dialog.dialog-no-scale-animation,
   dialog.dialog-no-scale-animation[open] {
-    left: 0 !important;
-    top: 0 !important;
-  }
-
-  dialog.dialog-no-scale-animation,
-  dialog.dialog-no-scale-animation[open] {
-    transform: none !important;
-  }
-
-  dialog[open] {
-    left: 0 !important;
-    top: 0 !important;
-  }
-
-  dialog { 
+    left: 0;
+    top: 0;
     max-width: 100vw; 
     width: 100vw;
     height: 100dvh;
@@ -3634,9 +3694,21 @@ dialog.dialog-full { width: calc(100vw - var(--spacing-8)); max-width: calc(100v
     --dialog-max-height: 100dvh; /* Override custom maxHeight on mobile */
     border-radius: 0; 
     margin: 0;
+  }
+
+  dialog,
+  dialog.dialog-sm,
+  dialog.dialog-lg,
+  dialog.dialog-xl,
+  dialog.dialog-full {
     transform: scale(0.98);
   }
-  dialog[open] {
+
+  dialog[open],
+  dialog.dialog-sm[open],
+  dialog.dialog-lg[open],
+  dialog.dialog-xl[open],
+  dialog.dialog-full[open] {
     transform: scale(1);
     animation: pds-dialog-enter-mobile var(--transition-normal) ease;
   }
@@ -4855,12 +4927,15 @@ nav[data-dropdown] {
   }
 
   /* Media primitives */
-  :where(img, video) {
-    max-width: 100%;
-    height: auto;
+  :where(img, video) {    
     border-radius: var(--radius-sm);
   }
 
+  :where(img:not([height]):not([width]), video:not([height]):not([width])) {
+    height: auto;
+    max-width: 100%;   
+  }
+
   :where(figure) {
     margin: 0 0 var(--spacing-6) 0;
   }
@@ -5065,7 +5140,7 @@ html:not([data-theme="dark"]) .surface-inverse {
   --color-code-bg: var(--color-gray-800);
   --color-surface-muted: rgba(255, 255, 255, 0.08);
   
-  & button:not(.btn-primary):not(.btn-outline):not(.btn-danger):not(.btn-success):not(.btn-warning),
+  & button:not(.btn-primary):not(.btn-outline):not(.btn-danger),
   & .btn-secondary {
     background-color: rgba(255, 255, 255, 0.12);
     color: var(--surface-inverse-text);
@@ -5097,7 +5172,7 @@ html[data-theme="dark"] .surface-inverse {
   --color-code-bg: var(--color-gray-100);
   --color-surface-muted: var(--color-gray-100);
   
-  & button:not(.btn-primary):not(.btn-outline):not(.btn-danger):not(.btn-success):not(.btn-warning),
+  & button:not(.btn-primary):not(.btn-outline):not(.btn-danger),
   & .btn-secondary {
     background-color: rgba(0, 0, 0, 0.06);
     color: var(--surface-inverse-text);

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

@@ -116,7 +116,7 @@ export const ontology = {
       id: "button", 
       name: "Button", 
       description: "Interactive button element with variants",
-      selectors: ["button", ".btn-primary", ".btn-secondary", ".btn-outline", ".btn-sm", ".btn-xs", ".btn-lg", ".btn-working", ".icon-only"],
+      selectors: ["button", ".btn-primary", ".btn-secondary", ".btn-outline", ".btn-danger", ".btn-sm", ".btn-xs", ".btn-lg", ".btn-working", ".icon-only"],
       tags: ["interactive", "action", "cta", "form"],
       category: "action"
     },
@@ -582,7 +582,7 @@ export const ontology = {
     form: ["input", "field", "label", "button", "fieldset", "pds-form", "pds-upload", "pds-richtext", "pds-calendar", "required", "validation", "submit"],
     input: ["form", "field", "text", "label", "required", "validation"],
     field: ["form", "input", "label", "required"],
-    button: ["btn", "interactive", "action", "submit", "form", "btn-primary", "btn-secondary", "btn-working", "pds-fab", "floating"],
+    button: ["btn", "interactive", "action", "submit", "form", "btn-primary", "btn-secondary", "btn-danger", "btn-working", "pds-fab", "floating"],
     btn: ["button", "interactive", "action", "pds-fab"],
     fab: ["pds-fab", "floating", "button", "action", "menu"],
     floating: ["fab", "pds-fab", "button", "action"],