@pure-ds/storybook 0.7.26 → 0.7.29

package/public/assets/pds/styles/pds-utilities.css.js

@@ -42,37 +42,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: 30px;
-    width: 30px;
-    height: 30px;
+    padding: calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.72);
+    min-width: max(30px, calc(var(--font-size-base) + (max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 2) + (var(--border-width-medium) * 2)));
+    min-height: max(30px, calc(var(--font-size-base) + (max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 2) + (var(--border-width-medium) * 2)));
+    width: max(30px, calc(var(--font-size-base) + (max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 2) + (var(--border-width-medium) * 2)));
+    height: max(30px, calc(var(--font-size-base) + (max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 2) + (var(--border-width-medium) * 2)));
     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(30px * 0.8);
-    width: calc(30px * 0.8);
-    height: calc(30px * 0.8);
+    padding: calc(calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 0.72);
+    min-width: max(calc(30px * 0.85), calc(var(--font-size-sm) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 2) + (var(--border-width-medium) * 2)));
+    min-height: max(calc(30px * 0.85), calc(var(--font-size-sm) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 2) + (var(--border-width-medium) * 2)));
+    width: max(calc(30px * 0.85), calc(var(--font-size-sm) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 2) + (var(--border-width-medium) * 2)));
+    height: max(calc(30px * 0.85), calc(var(--font-size-sm) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 2) + (var(--border-width-medium) * 2)));
+
+    pds-icon,
+    pds-icon[size] {
+      width: 1.15em;
+      height: 1.15em;
+    }
   }
 
   &.btn-xs.icon-only {
-    min-width: calc(30px * 0.6);
-    width: calc(30px * 0.6);
-    height: calc(30px * 0.6);
+    padding: calc(calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 0.72);
+    min-width: max(calc(30px * 0.7), calc(var(--font-size-xs) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 2) + (var(--border-width-medium) * 2)));
+    min-height: max(calc(30px * 0.7), calc(var(--font-size-xs) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 2) + (var(--border-width-medium) * 2)));
+    width: max(calc(30px * 0.7), calc(var(--font-size-xs) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 2) + (var(--border-width-medium) * 2)));
+    height: max(calc(30px * 0.7), calc(var(--font-size-xs) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 2) + (var(--border-width-medium) * 2)));
+
+    pds-icon,
+    pds-icon[size] {
+      width: 1.1em;
+      height: 1.1em;
+    }
   }
 
   &.btn-lg.icon-only {
-    min-width: calc(30px * 1.2);
-    width: calc(30px * 1.2);
-    height: calc(30px * 1.2);
+    padding: calc(calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 0.72);
+    min-width: max(calc(30px * 1.15), calc(var(--font-size-lg) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 2) + (var(--border-width-medium) * 2)));
+    min-height: max(calc(30px * 1.15), calc(var(--font-size-lg) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 2) + (var(--border-width-medium) * 2)));
+    width: max(calc(30px * 1.15), calc(var(--font-size-lg) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 2) + (var(--border-width-medium) * 2)));
+    height: max(calc(30px * 1.15), calc(var(--font-size-lg) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 2) + (var(--border-width-medium) * 2)));
+
+    pds-icon,
+    pds-icon[size] {
+      width: 1.25em;
+      height: 1.25em;
+    }
   }
 }
 
@@ -591,7 +631,7 @@ html[data-theme="dark"] .surface-inverse {
 /* 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: 44px;
     min-width: 44px;
@@ -720,37 +760,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: 30px;
-    width: 30px;
-    height: 30px;
+    padding: calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.72);
+    min-width: max(30px, calc(var(--font-size-base) + (max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 2) + (var(--border-width-medium) * 2)));
+    min-height: max(30px, calc(var(--font-size-base) + (max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 2) + (var(--border-width-medium) * 2)));
+    width: max(30px, calc(var(--font-size-base) + (max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 2) + (var(--border-width-medium) * 2)));
+    height: max(30px, calc(var(--font-size-base) + (max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 2) + (var(--border-width-medium) * 2)));
     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(30px * 0.8);
-    width: calc(30px * 0.8);
-    height: calc(30px * 0.8);
+    padding: calc(calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 0.72);
+    min-width: max(calc(30px * 0.85), calc(var(--font-size-sm) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 2) + (var(--border-width-medium) * 2)));
+    min-height: max(calc(30px * 0.85), calc(var(--font-size-sm) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 2) + (var(--border-width-medium) * 2)));
+    width: max(calc(30px * 0.85), calc(var(--font-size-sm) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 2) + (var(--border-width-medium) * 2)));
+    height: max(calc(30px * 0.85), calc(var(--font-size-sm) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.85) * 2) + (var(--border-width-medium) * 2)));
+
+    pds-icon,
+    pds-icon[size] {
+      width: 1.15em;
+      height: 1.15em;
+    }
   }
 
   &.btn-xs.icon-only {
-    min-width: calc(30px * 0.6);
-    width: calc(30px * 0.6);
-    height: calc(30px * 0.6);
+    padding: calc(calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 0.72);
+    min-width: max(calc(30px * 0.7), calc(var(--font-size-xs) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 2) + (var(--border-width-medium) * 2)));
+    min-height: max(calc(30px * 0.7), calc(var(--font-size-xs) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 2) + (var(--border-width-medium) * 2)));
+    width: max(calc(30px * 0.7), calc(var(--font-size-xs) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 2) + (var(--border-width-medium) * 2)));
+    height: max(calc(30px * 0.7), calc(var(--font-size-xs) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 0.7) * 2) + (var(--border-width-medium) * 2)));
+
+    pds-icon,
+    pds-icon[size] {
+      width: 1.1em;
+      height: 1.1em;
+    }
   }
 
   &.btn-lg.icon-only {
-    min-width: calc(30px * 1.2);
-    width: calc(30px * 1.2);
-    height: calc(30px * 1.2);
+    padding: calc(calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 0.72);
+    min-width: max(calc(30px * 1.15), calc(var(--font-size-lg) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 2) + (var(--border-width-medium) * 2)));
+    min-height: max(calc(30px * 1.15), calc(var(--font-size-lg) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 2) + (var(--border-width-medium) * 2)));
+    width: max(calc(30px * 1.15), calc(var(--font-size-lg) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 2) + (var(--border-width-medium) * 2)));
+    height: max(calc(30px * 1.15), calc(var(--font-size-lg) + (calc(max(calc(var(--spacing-1) * 1), var(--spacing-2)) * 1.15) * 2) + (var(--border-width-medium) * 2)));
+
+    pds-icon,
+    pds-icon[size] {
+      width: 1.25em;
+      height: 1.25em;
+    }
   }
 }
 
@@ -1269,7 +1349,7 @@ html[data-theme="dark"] .surface-inverse {
 /* 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: 44px;
     min-width: 44px;

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/common/ask.js

@@ -162,14 +162,150 @@ export async function ask(message, options = {}) {
   };
   
   options = { ...defaults, ...options };
+
+  const buttonConfigs = options.buttons && typeof options.buttons === "object"
+    ? options.buttons
+    : defaults.buttons;
+
+  const resolveActionMeta = (actionCode) => {
+    if (actionCode == null) {
+      return {
+        actionCode: "dismiss",
+        actionKind: "dismiss",
+        button: null,
+      };
+    }
+
+    const button = buttonConfigs?.[actionCode] ?? null;
+    const actionKind = actionCode === "ok"
+      ? "ok"
+      : actionCode === "dismiss"
+        ? "dismiss"
+        : (button?.cancel || actionCode === "cancel")
+          ? "cancel"
+          : "custom";
+
+    return {
+      actionCode,
+      actionKind,
+      button,
+    };
+  };
+
+  const normalizeBeforeCloseResult = (result) => {
+    if (typeof result === "undefined" || result === null || result === true) {
+      return { allow: true };
+    }
+
+    if (result === false) {
+      return { allow: false };
+    }
+
+    if (typeof result === "object") {
+      const hasResult = Object.prototype.hasOwnProperty.call(result, "result")
+        || Object.prototype.hasOwnProperty.call(result, "value");
+
+      return {
+        allow: result.allow !== false,
+        hasResult,
+        result: Object.prototype.hasOwnProperty.call(result, "result")
+          ? result.result
+          : result.value,
+      };
+    }
+
+    return { allow: Boolean(result) };
+  };
   
   return new Promise((resolve) => {
     let settled = false;
-    const settle = (value, dialog) => {
+    const settle = (value, dialog, { shouldClose = true } = {}) => {
       if (settled) return;
       settled = true;
-      dialog.close();
       resolve(value);
+
+      if (!shouldClose || !dialog?.open) {
+        return;
+      }
+
+      try {
+        dialog.close();
+      } catch (error) {
+        console.warn("ask: dialog.close() failed", error);
+      }
+    };
+
+    const runBeforeClose = async (context) => {
+      if (context.actionKind !== "ok" || typeof options.beforeClose !== "function") {
+        return { allow: true };
+      }
+
+      try {
+        const beforeCloseResult = await options.beforeClose(context);
+        return normalizeBeforeCloseResult(beforeCloseResult);
+      } catch (error) {
+        console.error("ask.beforeClose: validation failed", error);
+        return { allow: false };
+      }
+    };
+
+    const resolveDefaultResult = ({ actionKind, form }) => {
+      if (actionKind === "ok") {
+        if (options.useForm && form) {
+          return new FormData(form);
+        }
+        return true;
+      }
+
+      return false;
+    };
+
+    const attemptResolve = async ({
+      actionCode,
+      form,
+      submitter,
+      originalEvent,
+      bypassValidation = false,
+      shouldClose = true,
+    }) => {
+      if (settled) return;
+
+      const { actionKind, button } = resolveActionMeta(actionCode);
+      const activeForm = form || dialog.querySelector("form") || null;
+
+      if (options.useForm && actionKind === "ok" && activeForm && !bypassValidation) {
+        const valid = validateDialogFormTree(activeForm);
+        if (!valid) {
+          return;
+        }
+      }
+
+      const defaultResult = resolveDefaultResult({
+        actionKind,
+        form: activeForm,
+      });
+
+      const guard = await runBeforeClose({
+        actionCode,
+        actionKind,
+        dialog,
+        form: activeForm,
+        formData: options.useForm && actionKind === "ok" && activeForm
+          ? defaultResult
+          : null,
+        submitter,
+        originalEvent,
+        options,
+        button,
+        defaultResult,
+      });
+
+      if (!guard.allow) {
+        return;
+      }
+
+      const result = guard.hasResult ? guard.result : defaultResult;
+      settle(result, dialog, { shouldClose });
     };
 
     // Create native dialog element
@@ -203,7 +339,7 @@ export async function ask(message, options = {}) {
     }
 
     // Build button elements
-    const buttons = Object.entries(options.buttons).map(([code, obj]) => {
+    const buttons = Object.entries(buttonConfigs).map(([code, obj]) => {
       const btnClass = obj.primary ? "btn-primary btn-sm" : "btn-outline btn-sm";
       const btnType = obj.cancel ? "button" : "submit";
       const formNoValidate = obj.formNoValidate ? " formnovalidate" : "";
@@ -278,26 +414,14 @@ export async function ask(message, options = {}) {
 
     // Handle cancel button clicks
     dialog.addEventListener("click", (e) => {
-      const okBtn = e.target.closest('button[value="ok"]');
-      if (okBtn && options.useForm) {
-        e.preventDefault();
-        const form = dialog.querySelector("form");
-        if (!form) return;
-
-        const bypassValidation = Boolean(okBtn.hasAttribute("formnovalidate"));
-        if (!bypassValidation) {
-          const valid = validateDialogFormTree(form);
-          if (!valid) return;
-        }
-
-        const result = new FormData(form);
-        settle(result, dialog);
-        return;
-      }
-
       const btn = e.target.closest('button[value="cancel"]');
       if (btn) {
-        settle(false, dialog);
+        attemptResolve({
+          actionCode: "cancel",
+          form: dialog.querySelector("form"),
+          submitter: btn,
+          originalEvent: e,
+        });
       }
     });
 
@@ -316,22 +440,13 @@ export async function ask(message, options = {}) {
           const submitValue = event.submitter?.value ?? (options.useForm ? "ok" : undefined);
           const bypassValidation = Boolean(event.submitter?.hasAttribute("formnovalidate"));
 
-          if (options.useForm && submitValue === "ok" && !bypassValidation) {
-            const valid = validateDialogFormTree(form);
-
-            if (!valid) {
-              return;
-            }
-          }
-          
-          let result;
-          if (options.useForm && submitValue === "ok") {
-            result = new FormData(form);
-          } else {
-            result = (submitValue === "ok");
-          }
-
-          settle(result, dialog);
+          attemptResolve({
+            actionCode: submitValue,
+            form,
+            submitter: event.submitter,
+            originalEvent: event,
+            bypassValidation,
+          });
         });
       } else {
         // Form doesn't exist yet, wait and try again
@@ -339,8 +454,21 @@ export async function ask(message, options = {}) {
       }
     };
 
+    dialog.addEventListener("cancel", (event) => {
+      event.preventDefault();
+      attemptResolve({
+        actionCode: "dismiss",
+        form: dialog.querySelector("form"),
+        originalEvent: event,
+      });
+    });
+
     // Handle dialog close event
     dialog.addEventListener("close", () => {
+      if (!settled) {
+        settle(false, dialog, { shouldClose: false });
+      }
+
       // Small delay to allow exit animation
       setTimeout(() => dialog.remove(), 200);
     });

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

@@ -2731,18 +2731,23 @@ select {
 
 /* Button styling */
 button, .btn, input[type="submit"], input[type="button"], input[type="reset"] {
+  --btn-pad-y: max(calc(var(--spacing-1) * ${buttonPaddingValue}), var(--spacing-2));
+  --btn-target-h: max(${minButtonHeight}px, calc(var(--font-size-base) + (var(--btn-pad-y) * 2) + (var(--border-width-medium) * 2)));
   display: inline-flex;
   gap: var(--spacing-1);
   align-items: center;
   justify-content: center;
-  min-height: ${minButtonHeight}px;
-  padding: max(calc(var(--spacing-1) * ${buttonPaddingValue}), var(--spacing-2)) var(--spacing-6);
+  min-height: var(--btn-target-h);
+  height: var(--btn-target-h);
+  padding: var(--btn-pad-y) var(--spacing-6);
   border: var(--border-width-medium) solid transparent;
   border-radius: var(--radius-md);
+  box-sizing: border-box;
   font-family: var(--font-family-body);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
   line-height: 1;
+  white-space: nowrap;
   cursor: pointer;
   transition: all var(--transition-fast);
   text-decoration: none;
@@ -2896,22 +2901,31 @@ button, .btn, input[type="submit"], input[type="button"], input[type="reset"] {
 }
 
 .btn-sm {
-  padding: calc(max(calc(var(--spacing-1) * ${buttonPaddingValue}), var(--spacing-2)) * 0.85) calc(var(--spacing-6) * 0.8);
+  --btn-pad-y: calc(max(calc(var(--spacing-1) * ${buttonPaddingValue}), var(--spacing-2)) * 0.85);
+  --btn-target-h: max(calc(${minButtonHeight}px * 0.85), calc(var(--font-size-sm) + (var(--btn-pad-y) * 2) + (var(--border-width-medium) * 2)));
+  padding: var(--btn-pad-y) calc(var(--spacing-6) * 0.8);
   font-size: var(--font-size-sm);
-  min-height: calc(${minButtonHeight}px * 0.85);
+  min-height: var(--btn-target-h);
+  height: var(--btn-target-h);
 }
 
 .btn-xs {
-  padding: calc(max(calc(var(--spacing-1) * ${buttonPaddingValue}), var(--spacing-2)) * 0.7) calc(var(--spacing-6) * 0.65);
+  --btn-pad-y: calc(max(calc(var(--spacing-1) * ${buttonPaddingValue}), var(--spacing-2)) * 0.7);
+  --btn-target-h: max(calc(${minButtonHeight}px * 0.7), calc(var(--font-size-xs) + (var(--btn-pad-y) * 2) + (var(--border-width-medium) * 2)));
+  padding: var(--btn-pad-y) calc(var(--spacing-6) * 0.65);
   font-size: var(--font-size-xs);
-  min-height: calc(${minButtonHeight}px * 0.7);
+  min-height: var(--btn-target-h);
+  height: var(--btn-target-h);
 }
 
 
 .btn-lg {
-  padding: calc(max(calc(var(--spacing-1) * ${buttonPaddingValue}), var(--spacing-2)) * 1.15) calc(var(--spacing-6) * 1.35);
+  --btn-pad-y: calc(max(calc(var(--spacing-1) * ${buttonPaddingValue}), var(--spacing-2)) * 1.15);
+  --btn-target-h: max(calc(${minButtonHeight}px * 1.15), calc(var(--font-size-lg) + (var(--btn-pad-y) * 2) + (var(--border-width-medium) * 2)));
+  padding: var(--btn-pad-y) calc(var(--spacing-6) * 1.35);
   font-size: var(--font-size-lg);
-  min-height: calc(${minButtonHeight}px * 1.15);
+  min-height: var(--btn-target-h);
+  height: var(--btn-target-h);
 }
 
 /* Working/loading state for buttons */
@@ -3887,7 +3901,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 +3959,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;
+    }
   }
 }
 
@@ -4354,9 +4426,9 @@ nav[data-dropdown] {
 }
 
 /* Touch device optimizations */
-@media (hover: none) and (pointer: coarse) {
+@media (pointer: coarse) {
   /* Touch devices - larger touch targets for interactive elements */
-  button:not(.icon-only), a:not(.icon-only), select, textarea,
+  select, textarea,
   input:not([type="radio"]):not([type="checkbox"]) {
     min-height: ${minTouchTarget}px;
     min-width: ${minTouchTarget}px;