@pure-ds/core 0.7.27 → 0.7.28

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

@@ -3280,7 +3280,7 @@
             {
               "kind": "field",
               "name": "innerHTML",
-              "default": "`\r\n      <style>\r\n        :host {\r\n          --rating-star-size: var(--spacing-lg);\r\n          --rating-star-gap: var(--spacing-2xs);\r\n          --rating-star-off: var(--color-text-muted);\r\n          --rating-star-on: var(--color-warning-500);\r\n          --rating-focus: var(--color-primary-500);\r\n          --rating-fill-pct: 0%;\r\n          display: inline-block;\r\n          inline-size: fit-content;\r\n          max-inline-size: 100%;\r\n          touch-action: none;\r\n        }\r\n\r\n        ::slotted(input[type=\"range\"]) {\r\n          position: absolute !important;\r\n          inset-inline-start: 0 !important;\r\n          inset-block-start: 0 !important;\r\n          inline-size: 1px !important;\r\n          block-size: 1px !important;\r\n          min-inline-size: 1px !important;\r\n          min-block-size: 1px !important;\r\n          margin: -1px !important;\r\n          border: 0 !important;\r\n          padding: 0 !important;\r\n          opacity: 0 !important;\r\n          overflow: hidden !important;\r\n          clip: rect(0 0 0 0) !important;\r\n          clip-path: inset(50%) !important;\r\n          white-space: nowrap !important;\r\n          appearance: none !important;\r\n          -webkit-appearance: none !important;\r\n          pointer-events: none !important;\r\n        }\r\n\r\n        .wrap {\r\n          position: relative;\r\n          display: inline-grid;\r\n          gap: var(--spacing-2xs);\r\n          align-items: center;\r\n          justify-items: start;\r\n          min-block-size: calc(var(--rating-star-size) + var(--spacing-xs));\r\n        }\r\n\r\n        .interactive {\r\n          display: inline-grid;\r\n          place-items: center start;\r\n          inline-size: 100%;\r\n          cursor: pointer;\r\n          user-select: none;\r\n          -webkit-tap-highlight-color: transparent;\r\n          touch-action: pan-x;\r\n        }\r\n\r\n        :host([disabled]) .interactive,\r\n        :host([readonly]) .interactive {\r\n          cursor: default;\r\n        }\r\n\r\n        :host([disabled]) {\r\n          opacity: 0.5;\r\n        }\r\n\r\n        .stars {\r\n          display: block;\r\n          inline-size: auto;\r\n          block-size: var(--rating-star-size);\r\n          overflow: visible;\r\n          transition: transform 220ms ease, opacity 220ms ease;\r\n        }\r\n\r\n        :host([data-in-view=\"false\"]) .stars {\r\n          opacity: 0;\r\n          transform: translateY(var(--spacing-xs)) scale(0.98);\r\n        }\r\n\r\n        :host([data-in-view=\"true\"]) .stars {\r\n          opacity: 1;\r\n          transform: translateY(0) scale(1);\r\n        }\r\n\r\n        input[type=\"range\"] {\r\n          position: absolute !important;\r\n          inset-inline-start: 0 !important;\r\n          inset-block-start: 0 !important;\r\n          inline-size: 1px !important;\r\n          block-size: 1px !important;\r\n          min-inline-size: 1px !important;\r\n          min-block-size: 1px !important;\r\n          margin: -1px !important;\r\n          border: 0 !important;\r\n          padding: 0 !important;\r\n          opacity: 0 !important;\r\n          overflow: hidden !important;\r\n          clip: rect(0 0 0 0) !important;\r\n          clip-path: inset(50%) !important;\r\n          white-space: nowrap !important;\r\n          appearance: none !important;\r\n          -webkit-appearance: none !important;\r\n          pointer-events: none !important;\r\n        }\r\n\r\n        :host(:focus-within) .interactive {\r\n          outline: 2px solid var(--rating-focus);\r\n          outline-offset: var(--spacing-3xs);\r\n          border-radius: var(--radius-sm);\r\n        }\r\n\r\n        @media (prefers-reduced-motion: reduce) {\r\n          .stars {\r\n            transition: none;\r\n          }\r\n        }\r\n      </style>\r\n\r\n      <div class=\"wrap\" part=\"control\">\r\n        <div class=\"interactive\" part=\"interactive\" aria-hidden=\"true\">\r\n          <svg class=\"stars\" part=\"stars\" focusable=\"false\" aria-hidden=\"true\"></svg>\r\n        </div>\r\n        <slot></slot>\r\n      </div>\r\n    `"
+              "default": "`\r\n      <style>\r\n        :host {\r\n          --rating-star-size: var(--spacing-lg);\r\n          --rating-star-gap: var(--spacing-2xs);\r\n          --rating-star-off: var(--color-text-muted);\r\n          --rating-star-on: var(--color-warning-500);\r\n          --rating-focus: var(--color-primary-500);\r\n          --rating-fill-pct: 0%;\r\n          display: inline-block;\r\n          inline-size: fit-content;\r\n          max-inline-size: 100%;\r\n          touch-action: none;\r\n        }\r\n\r\n        .wrap {\r\n          position: relative;\r\n          display: inline-grid;\r\n          gap: var(--spacing-2xs);\r\n          align-items: center;\r\n          justify-items: start;\r\n          min-block-size: calc(var(--rating-star-size) + var(--spacing-xs));\r\n        }\r\n\r\n        .interactive {\r\n          display: inline-grid;\r\n          place-items: center start;\r\n          inline-size: 100%;\r\n          cursor: pointer;\r\n          user-select: none;\r\n          -webkit-tap-highlight-color: transparent;\r\n          touch-action: pan-x;\r\n        }\r\n\r\n        :host([disabled]) .interactive,\r\n        :host([readonly]) .interactive {\r\n          cursor: default;\r\n        }\r\n\r\n        :host([disabled]) {\r\n          opacity: 0.5;\r\n        }\r\n\r\n        .stars {\r\n          display: block;\r\n          inline-size: auto;\r\n          block-size: var(--rating-star-size);\r\n          overflow: visible;\r\n          transition: transform 220ms ease, opacity 220ms ease;\r\n        }\r\n\r\n        :host([data-in-view=\"false\"]) .stars {\r\n          opacity: 0;\r\n          transform: translateY(var(--spacing-xs)) scale(0.98);\r\n        }\r\n\r\n        :host([data-in-view=\"true\"]) .stars {\r\n          opacity: 1;\r\n          transform: translateY(0) scale(1);\r\n        }\r\n\r\n        input[type=\"range\"] {\r\n          position: absolute !important;\r\n          inset-inline-start: 0 !important;\r\n          inset-block-start: 0 !important;\r\n          inline-size: 1px !important;\r\n          block-size: 1px !important;\r\n          min-inline-size: 1px !important;\r\n          min-block-size: 1px !important;\r\n          margin: -1px !important;\r\n          border: 0 !important;\r\n          padding: 0 !important;\r\n          opacity: 0 !important;\r\n          overflow: hidden !important;\r\n          clip: rect(0 0 0 0) !important;\r\n          clip-path: inset(50%) !important;\r\n          white-space: nowrap !important;\r\n          appearance: none !important;\r\n          -webkit-appearance: none !important;\r\n          pointer-events: none !important;\r\n        }\r\n\r\n        :host(:focus-within) .interactive {\r\n          outline: 2px solid var(--rating-focus);\r\n          outline-offset: var(--spacing-3xs);\r\n          border-radius: var(--radius-sm);\r\n        }\r\n\r\n        @media (prefers-reduced-motion: reduce) {\r\n          .stars {\r\n            transition: none;\r\n          }\r\n        }\r\n      </style>\r\n\r\n      <div class=\"wrap\" part=\"control\">\r\n        <div class=\"interactive\" part=\"interactive\" aria-hidden=\"true\">\r\n          <svg class=\"stars\" part=\"stars\" focusable=\"false\" aria-hidden=\"true\"></svg>\r\n        </div>\r\n        <input class=\"native-input\" type=\"range\" />\r\n      </div>\r\n    `"
             }
           ],
           "events": [
@@ -4200,6 +4200,180 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "public/assets/pds/components/pds-tags.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Form-associated multi-select tags control built on top of `pds-omnibox`.\r\n\r\nUsers select suggestions from the omnibox and each selection is rendered as a removable\r\nchip. The component keeps selection state synchronized across:\r\n- the `value` attribute (comma-separated ids)\r\n- the `value` property (`string[]`)\r\n- form value via ElementInternals\r\n\r\nIf `settings` is not provided, the component derives omnibox categories from `options`.\r\nWhen `required` is set, at least one selected value is required for validity.",
+          "name": "PdsTags",
+          "members": [
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true"
+            },
+            {
+              "kind": "field",
+              "name": "name"
+            },
+            {
+              "kind": "field",
+              "name": "placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "type": {
+                "text": "Array<string|Object>"
+              },
+              "description": "Option source used to build omnibox suggestions"
+            },
+            {
+              "kind": "field",
+              "name": "settings",
+              "type": {
+                "text": "Object|null"
+              },
+              "description": "Omnibox-compatible settings source"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string[]"
+              },
+              "description": "Selected option ids (array form)"
+            },
+            {
+              "kind": "field",
+              "name": "disabled"
+            },
+            {
+              "kind": "field",
+              "name": "required"
+            },
+            {
+              "kind": "method",
+              "name": "formResetCallback"
+            },
+            {
+              "kind": "method",
+              "name": "formStateRestoreCallback",
+              "parameters": [
+                {
+                  "name": "state"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "formDisabledCallback",
+              "parameters": [
+                {
+                  "name": "disabled"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity"
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity"
+            }
+          ],
+          "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Fired whenever selection changes"
+            },
+            {
+              "name": "change",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Fired whenever selection changes"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "description": "Form field name; selected values are submitted under this name"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "description": "Placeholder shown in omnibox input (default: \"Search tags...\")"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "Comma-separated selected item ids"
+            },
+            {
+              "name": "options",
+              "type": {
+                "text": "string"
+              },
+              "description": "JSON array of options (`string[]` or object[] with id/text metadata)"
+            },
+            {
+              "name": "settings",
+              "type": {
+                "text": "string"
+              },
+              "description": "JSON omnibox settings; takes precedence over derived options settings"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Disables omnibox interaction and chip remove actions"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Requires at least one selected value for validity"
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "pds-tags",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "pds-tags",
+          "declaration": {
+            "name": "PdsTags",
+            "module": "public/assets/pds/components/pds-tags.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "public/assets/pds/components/pds-theme.js",

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

@@ -2297,7 +2297,7 @@
   ],
   "metadata": {
     "generator": "PDS CSS Data Generator",
-    "generatedAt": "2026-03-03T08:40:38.831Z",
+    "generatedAt": "2026-03-04T14:29:06.155Z",
     "totalProperties": 169,
     "totalClasses": 170,
     "totalAttributes": 5

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

@@ -950,6 +950,38 @@
         }
       ]
     },
+    {
+      "name": "pds-tags",
+      "description": "Form-associated multi-select tags control built on top of `pds-omnibox`.\r\n\r\nUsers select suggestions from the omnibox and each selection is rendered as a removable\r\nchip. The component keeps selection state synchronized across:\r\n- the `value` attribute (comma-separated ids)\r\n- the `value` property (`string[]`)\r\n- form value via ElementInternals\r\n\r\nThe `options` object uses the same structure as `pds-omnibox.settings`.\r\nSee `pds-omnibox` JSDoc for the full options schema.\r\nBefore applying it, the component deep-merges internal defaults:\r\n- `hideCategory: true`\r\n- `itemGrid: \"0 1fr 0\"`\r\n- `iconHandler: () => \"\"`\r\n\r\nWhen `required` is set, at least one selected value is required for validity.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "Form field name; selected values are submitted under this name"
+        },
+        {
+          "name": "placeholder",
+          "description": "Placeholder shown in omnibox input (default: \"Search tags...\")"
+        },
+        {
+          "name": "value",
+          "description": "Comma-separated selected item ids"
+        },
+        {
+          "name": "options",
+          "description": "JSON object with the same shape as `pds-omnibox.settings`"
+        },
+        {
+          "name": "disabled",
+          "description": "Disables omnibox interaction and chip remove actions",
+          "valueSet": "v"
+        },
+        {
+          "name": "required",
+          "description": "Requires at least one selected value for validity",
+          "valueSet": "v"
+        }
+      ]
+    },
     {
       "name": "pds-theme",
       "description": "PdsTheme component"

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

@@ -3887,7 +3887,25 @@ pds-tabstrip {
 
   #generateIconStyles() {
     const { layout = {} } = this.options.design;
-    const iconOnlySize = layout.buttonMinHeight || 30;
+    const minButtonHeight = layout.buttonMinHeight || 30;
+    const buttonPaddingValue = layout.buttonPadding || 1.0;
+    const buttonPaddingDefault = `max(calc(var(--spacing-1) * ${buttonPaddingValue}), var(--spacing-2))`;
+    const buttonPaddingSm = `calc(max(calc(var(--spacing-1) * ${buttonPaddingValue}), var(--spacing-2)) * 0.85)`;
+    const buttonPaddingXs = `calc(max(calc(var(--spacing-1) * ${buttonPaddingValue}), var(--spacing-2)) * 0.7)`;
+    const buttonPaddingLg = `calc(max(calc(var(--spacing-1) * ${buttonPaddingValue}), var(--spacing-2)) * 1.15)`;
+    const iconOnlyPaddingScale = 0.72;
+    const iconOnlyPaddingDefault = `calc(${buttonPaddingDefault} * ${iconOnlyPaddingScale})`;
+    const iconOnlyPaddingSm = `calc(${buttonPaddingSm} * ${iconOnlyPaddingScale})`;
+    const iconOnlyPaddingXs = `calc(${buttonPaddingXs} * ${iconOnlyPaddingScale})`;
+    const iconOnlyPaddingLg = `calc(${buttonPaddingLg} * ${iconOnlyPaddingScale})`;
+    const iconOnlyMinDefault = `${minButtonHeight}px`;
+    const iconOnlyMinSm = `calc(${minButtonHeight}px * 0.85)`;
+    const iconOnlyMinXs = `calc(${minButtonHeight}px * 0.7)`;
+    const iconOnlyMinLg = `calc(${minButtonHeight}px * 1.15)`;
+    const iconOnlySizeDefault = `max(${iconOnlyMinDefault}, calc(var(--font-size-base) + (${buttonPaddingDefault} * 2) + (var(--border-width-medium) * 2)))`;
+    const iconOnlySizeSm = `max(${iconOnlyMinSm}, calc(var(--font-size-sm) + (${buttonPaddingSm} * 2) + (var(--border-width-medium) * 2)))`;
+    const iconOnlySizeXs = `max(${iconOnlyMinXs}, calc(var(--font-size-xs) + (${buttonPaddingXs} * 2) + (var(--border-width-medium) * 2)))`;
+    const iconOnlySizeLg = `max(${iconOnlyMinLg}, calc(var(--font-size-lg) + (${buttonPaddingLg} * 2) + (var(--border-width-medium) * 2)))`;
 
     return /*css*/ `/* Icon System */
 
@@ -3927,37 +3945,77 @@ pds-icon {
 .icon-text-end { flex-direction: row-reverse; }
 
 /* Button icon utilities */
-button, a {
-  pds-icon {
+button,
+a.btn,
+a.btn-primary,
+a.btn-secondary,
+a.btn-outline,
+a.btn-danger,
+a.icon-only {
+  pds-icon,
+  pds-icon[size] {
     flex-shrink: 0;
+    width: 1em;
+    height: 1em;
   }
 
   &.icon-only {
-    padding: var(--spacing-2);
-    min-width: ${iconOnlySize}px;
-    width: ${iconOnlySize}px;
-    height: ${iconOnlySize}px;
+    padding: ${iconOnlyPaddingDefault};
+    min-width: ${iconOnlySizeDefault};
+    min-height: ${iconOnlySizeDefault};
+    width: ${iconOnlySizeDefault};
+    height: ${iconOnlySizeDefault};
     display: inline-flex;
     align-items: center;
     justify-content: center;
+
+    pds-icon,
+    pds-icon[size] {
+      width: 1.2em;
+      height: 1.2em;
+    }
   }
 
   &.btn-sm.icon-only {
-    min-width: calc(${iconOnlySize}px * 0.8);
-    width: calc(${iconOnlySize}px * 0.8);
-    height: calc(${iconOnlySize}px * 0.8);
+    padding: ${iconOnlyPaddingSm};
+    min-width: ${iconOnlySizeSm};
+    min-height: ${iconOnlySizeSm};
+    width: ${iconOnlySizeSm};
+    height: ${iconOnlySizeSm};
+
+    pds-icon,
+    pds-icon[size] {
+      width: 1.15em;
+      height: 1.15em;
+    }
   }
 
   &.btn-xs.icon-only {
-    min-width: calc(${iconOnlySize}px * 0.6);
-    width: calc(${iconOnlySize}px * 0.6);
-    height: calc(${iconOnlySize}px * 0.6);
+    padding: ${iconOnlyPaddingXs};
+    min-width: ${iconOnlySizeXs};
+    min-height: ${iconOnlySizeXs};
+    width: ${iconOnlySizeXs};
+    height: ${iconOnlySizeXs};
+
+    pds-icon,
+    pds-icon[size] {
+      width: 1.1em;
+      height: 1.1em;
+    }
   }
 
   &.btn-lg.icon-only {
-    min-width: calc(${iconOnlySize}px * 1.2);
-    width: calc(${iconOnlySize}px * 1.2);
-    height: calc(${iconOnlySize}px * 1.2);
+    padding: ${iconOnlyPaddingLg};
+    min-width: ${iconOnlySizeLg};
+    min-height: ${iconOnlySizeLg};
+    width: ${iconOnlySizeLg};
+    height: ${iconOnlySizeLg};
+
+    pds-icon,
+    pds-icon[size] {
+      width: 1.25em;
+      height: 1.25em;
+    }
   }
 }
 
@@ -4356,7 +4414,7 @@ nav[data-dropdown] {
 /* Touch device optimizations */
 @media (hover: none) and (pointer: coarse) {
   /* Touch devices - larger touch targets for interactive elements */
-  button:not(.icon-only), a:not(.icon-only), select, textarea,
+  button, a, select, textarea,
   input:not([type="radio"]):not([type="checkbox"]) {
     min-height: ${minTouchTarget}px;
     min-width: ${minTouchTarget}px;

package/src/js/pds.d.ts

@@ -160,6 +160,60 @@ export interface PDSEventMap {
   'pds:docs:view': CustomEvent<{ file: string }>;
 }
 
+export type AskActionKind = 'ok' | 'cancel' | 'dismiss' | 'custom';
+
+export interface AskButtonOption {
+  name: string;
+  primary?: boolean;
+  cancel?: boolean;
+  formNoValidate?: boolean;
+  [key: string]: any;
+}
+
+export interface AskBeforeCloseContext {
+  actionCode: string;
+  actionKind: AskActionKind;
+  dialog: HTMLDialogElement;
+  form: HTMLFormElement | null;
+  formData: FormData | null;
+  submitter?: HTMLElement | null;
+  originalEvent?: Event;
+  options: AskOptions;
+  button: AskButtonOption | null;
+  defaultResult: any;
+}
+
+export interface AskBeforeCloseResult {
+  allow?: boolean;
+  result?: any;
+  value?: any;
+  reason?: string;
+}
+
+export type AskBeforeCloseHandler = (
+  context: AskBeforeCloseContext
+) => Promise<boolean | AskBeforeCloseResult | void> | boolean | AskBeforeCloseResult | void;
+
+export type AskMessage =
+  | string
+  | Node
+  | Array<any>
+  | { strings: any[]; values: any[] };
+
+export interface AskOptions {
+  title?: string;
+  type?: string;
+  buttons?: Record<string, AskButtonOption>;
+  useForm?: boolean;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | string;
+  class?: string | string[];
+  maxHeight?: string;
+  liquidGlassEffects?: boolean;
+  rendered?: (dialog: HTMLDialogElement) => void;
+  beforeClose?: AskBeforeCloseHandler;
+  [key: string]: any;
+}
+
 export class PDS extends EventTarget {
   // Static surface
   static registry: PDSRegistry;
@@ -273,7 +327,7 @@ export class PDS extends EventTarget {
    * @example
    * const name = await PDS.ask('Enter your name:', { type: 'prompt' });
    */
-  static ask(message: string, options?: any): Promise<any>;
+  static ask(message: AskMessage, options?: AskOptions): Promise<any>;
   
   /** 
    * Current configuration after PDS.start() completes - read-only, frozen after initialization.