@pure-ds/core 0.7.26 → 0.7.28

package/.cursorrules

@@ -550,6 +550,21 @@ const confirmed = await PDS.ask("Delete this item?", {
   buttons: { ok: { name: "Delete", variant: "danger" } }
 });
 
+const result = await PDS.ask("Publish this change?", {
+  title: "Final approval",
+  buttons: {
+    ok: { name: "Publish", primary: true },
+    cancel: { name: "Cancel", cancel: true }
+  },
+  beforeClose: async ({ actionKind }) => {
+    if (actionKind !== "ok") return true;
+    const response = await fetch("/api/publish/can-close", { method: "POST" });
+    if (!response.ok) return { allow: false };
+    const payload = await response.json();
+    return { allow: payload?.ok === true };
+  }
+});
+
 await PDS.toast("Saved successfully!", { type: "success" });
 
 // Theme management

package/.github/copilot-instructions.md

@@ -550,6 +550,21 @@ const confirmed = await PDS.ask("Delete this item?", {
   buttons: { ok: { name: "Delete", variant: "danger" } }
 });
 
+const result = await PDS.ask("Publish this change?", {
+  title: "Final approval",
+  buttons: {
+    ok: { name: "Publish", primary: true },
+    cancel: { name: "Cancel", cancel: true }
+  },
+  beforeClose: async ({ actionKind }) => {
+    if (actionKind !== "ok") return true;
+    const response = await fetch("/api/publish/can-close", { method: "POST" });
+    if (!response.ok) return { allow: false };
+    const payload = await response.json();
+    return { allow: payload?.ok === true };
+  }
+});
+
 await PDS.toast("Saved successfully!", { type: "success" });
 
 // Theme management

package/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,165 @@
         }
       ]
     },
+    {
+      "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\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.",
+          "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": "PdsOmniboxSettings|null"
+              },
+              "description": "Omnibox options object (see `pds-omnibox.js` typedef)"
+            },
+            {
+              "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 object with the same shape as `pds-omnibox.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/dist/types/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.

package/dist/types/public/assets/js/pds-ask.d.ts

@@ -1,3 +1,2 @@
-export { S as ask };
-declare function S(o: any, e?: {}): Promise<any>;
+export function ask(message: any, options?: {}): Promise<any>;
 //# sourceMappingURL=pds-ask.d.ts.map

package/dist/types/public/assets/js/pds-ask.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pds-ask.d.ts","sourceRoot":"","sources":["../../../../../public/assets/js/pds-ask.js"],"names":[],"mappings":";AAA4sG,iDAwBxwE"}
+{"version":3,"file":"pds-ask.d.ts","sourceRoot":"","sources":["../../../../../public/assets/js/pds-ask.js"],"names":[],"mappings":"AAoLA,8DAmQC"}

package/dist/types/public/assets/js/pds-autocomplete.d.ts

@@ -1,12 +1,11 @@
-export { f as AutoComplete };
-declare var f: {
-    new (t: any, e: any, s: any): {
+export var AutoComplete: {
+    new (parent: any, textInput: any, settings: any): {
         settings: any;
         container: any;
         input: any;
         categories: any;
         caches: Map<any, any>;
-        on(t: any, e: any): /*elided*/ any;
+        on(a: any, b: any): /*elided*/ any;
         attach(): void;
         resultsDiv: HTMLDivElement;
         controller(): {
@@ -21,14 +20,14 @@ declare var f: {
             clear: any;
             empty: () => void;
         };
-        moveResult(t: any): void;
+        moveResult(add: any): void;
         rowIndex: any;
         getSelectedDiv(): Element;
-        selectResult(t: any): void;
+        selectResult(div: any): void;
         resultClicked: boolean;
         tabWindow: Window;
-        setText(t: any): void;
-        resultClick(t: any): void;
+        setText(options: any): void;
+        resultClick(event: any): void;
         blurHandler(): void;
         clear(): void;
         cacheTmr: NodeJS.Timeout;
@@ -39,30 +38,42 @@ declare var f: {
         };
         hide(): void;
         empty(): void;
-        inputHandler(t: any): void;
-        keyDownHandler(t: any): void;
-        keyUpHandler(t: any): void;
-        focusHandler(t: any): void;
-        suggest(t: any, e: any): void;
-        sort(t: any, e: any): any;
-        resultsHandler(t: any, e: any): void;
+        inputHandler(e: any): void;
+        keyDownHandler(e: any): void;
+        keyUpHandler(e: any): void;
+        focusHandler(e: any): void;
+        /**
+         * Shows suggestion box
+         * @param {string} value - String to suggest results for
+         */
+        suggest(value: string, e: any): void;
+        sort(r: any, options: any): any;
+        resultsHandler(r: any, options: any): void;
         results: any;
         acItems: NodeListOf<Element>;
-        handleImageOrIcon(t: any): any;
-        formatResultItem(t: any, e: any, s: any): any;
-        highlight(t: any, e: any): any;
-        getItems(t: any, e: any): Promise<any>;
+        handleImageOrIcon(i: any): any;
+        formatResultItem(item: any, options: any, catHandler: any): any;
+        highlight(str: any, find: any): any;
+        getItems(options: any, e: any): Promise<any>;
         aborter: AbortController;
         aborterSignal: AbortSignal;
-        items(t: any): Promise<any[]>;
-        formatSearch(t: any, e: any): any;
-        createQueryParam(t: any): string;
-        isMatch(t: any, e: any): any;
+        items(options: any): Promise<any[]>;
+        formatSearch(url: any, options: any): any;
+        createQueryParam(options: any): string;
+        isMatch(options: any, i: any): any;
         addEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean): void;
         dispatchEvent(event: Event): boolean;
         removeEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void;
     };
-    connect(t: any, e: any): any;
-    textFilter(t: any, e: any): (s: any) => any;
+    /**
+     * Connector logic to call on @focus events.
+     * Lit example:
+     * <input type="search" @focus=${(e) => {AutoComplete.connect(e, this.autoComplete); }} />
+     *
+     * @param {*} event focus event
+     * @param {*} options AutoComplete options
+     */
+    connect(event: any, options: any): any;
+    textFilter(options: any, propertyName: any): (i: any) => any;
 };
 //# sourceMappingURL=pds-autocomplete.d.ts.map

package/dist/types/public/assets/js/pds-autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pds-autocomplete.d.ts","sourceRoot":"","sources":["../../../../../public/assets/js/pds-autocomplete.js"],"names":[],"mappings":";AACwc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAKqxE,MAAC;EAAkM"}
+{"version":3,"file":"pds-autocomplete.d.ts","sourceRoot":"","sources":["../../../../../public/assets/js/pds-autocomplete.js"],"names":[],"mappings":"AA+CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAwRE;;;WAGG;uBADQ,MAAM;;;;;;;;;;;;;;;;;;;IA5QjB;;;;;;;OAOG;mBAFQ,GAAC,WACD,GAAC;kDAsfM,MAAC;EAgBnB"}

package/dist/types/public/assets/js/pds-enhancers.d.ts

@@ -1,7 +1,7 @@
-export { X as defaultPDSEnhancers };
-declare var X: {
-    run: typeof $;
+export var defaultPDSEnhancers: {
+    run: typeof enhanceAccordion;
     selector: string;
 }[];
-declare function $(t: any): void;
+declare function enhanceAccordion(elem: any): void;
+export {};
 //# sourceMappingURL=pds-enhancers.d.ts.map

package/dist/types/public/assets/js/pds-enhancers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pds-enhancers.d.ts","sourceRoot":"","sources":["../../../../../public/assets/js/pds-enhancers.js"],"names":[],"mappings":";AAA2wa;;;IAAoD;AAAlha,iCAAqP"}
+{"version":3,"file":"pds-enhancers.d.ts","sourceRoot":"","sources":["../../../../../public/assets/js/pds-enhancers.js"],"names":[],"mappings":"AAssBA;;;IAII;AA9rBJ,mDAiBC"}