@pure-ds/storybook 0.6.7 → 0.6.9

package/public/assets/pds/styles/pds-components.css

@@ -1318,6 +1318,22 @@ dialog[open] {
   }
 }
 
+/* Safari fallback: disable scale animation to avoid dialog clipping bugs */
+dialog.dialog-no-scale-animation {
+  transform: translate(-50%, -50%);
+  transition: opacity var(--transition-normal) ease;
+}
+
+dialog.dialog-no-scale-animation[open] {
+  transform: translate(-50%, -50%);
+  animation: pds-dialog-fade-enter var(--transition-normal) ease;
+}
+
+@keyframes pds-dialog-fade-enter {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
 /* Backdrop styling */
 dialog::backdrop {
   background: var(--backdrop-bg);
@@ -1437,9 +1453,24 @@ dialog.dialog-full { width: calc(100vw - var(--spacing-8)); max-width: calc(100v
 
 /* Mobile responsiveness - maximize on mobile */
 @media (max-width: 639px) {
+  dialog,
+  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;
@@ -1447,16 +1478,23 @@ 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;
-    transform: scale(0.95);
+    transform: scale(0.98);
   }
   dialog[open] {
     transform: scale(1);
     animation: pds-dialog-enter-mobile var(--transition-normal) ease;
   }
+
+  dialog.dialog-no-scale-animation {
+    transition: opacity var(--transition-normal) ease;
+  }
+  dialog.dialog-no-scale-animation[open] {
+    animation: pds-dialog-fade-enter var(--transition-normal) ease;
+  }
   @keyframes pds-dialog-enter-mobile {
     from {
       opacity: 0;
-      transform: scale(0.95);
+      transform: scale(0.98);
     }
     to {
       opacity: 1;

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

@@ -1322,6 +1322,22 @@ dialog[open] {
   }
 }
 
+/* Safari fallback: disable scale animation to avoid dialog clipping bugs */
+dialog.dialog-no-scale-animation {
+  transform: translate(-50%, -50%);
+  transition: opacity var(--transition-normal) ease;
+}
+
+dialog.dialog-no-scale-animation[open] {
+  transform: translate(-50%, -50%);
+  animation: pds-dialog-fade-enter var(--transition-normal) ease;
+}
+
+@keyframes pds-dialog-fade-enter {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
 /* Backdrop styling */
 dialog::backdrop {
   background: var(--backdrop-bg);
@@ -1441,9 +1457,24 @@ dialog.dialog-full { width: calc(100vw - var(--spacing-8)); max-width: calc(100v
 
 /* Mobile responsiveness - maximize on mobile */
 @media (max-width: 639px) {
+  dialog,
+  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;
@@ -1451,16 +1482,23 @@ 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;
-    transform: scale(0.95);
+    transform: scale(0.98);
   }
   dialog[open] {
     transform: scale(1);
     animation: pds-dialog-enter-mobile var(--transition-normal) ease;
   }
+
+  dialog.dialog-no-scale-animation {
+    transition: opacity var(--transition-normal) ease;
+  }
+  dialog.dialog-no-scale-animation[open] {
+    animation: pds-dialog-fade-enter var(--transition-normal) ease;
+  }
   @keyframes pds-dialog-enter-mobile {
     from {
       opacity: 0;
-      transform: scale(0.95);
+      transform: scale(0.98);
     }
     to {
       opacity: 1;

package/src/js/common/ask.js

@@ -41,6 +41,34 @@ function appendMessageContent(container, message) {
   container.appendChild(document.createTextNode(text));
 }
 
+function isSafariBrowser() {
+  const userAgent = navigator.userAgent;
+  const isSafariEngine = /Safari/i.test(userAgent);
+  const isOtherBrowser = /(Chrome|Chromium|CriOS|FxiOS|EdgiOS|OPiOS|Opera)/i.test(userAgent);
+  return isSafariEngine && !isOtherBrowser;
+}
+
+function playDialogEnterAnimation(dialog) {
+  if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {
+    return;
+  }
+
+  const isMobile = window.matchMedia?.('(max-width: 639px)').matches;
+  const animationName = dialog.classList.contains('dialog-no-scale-animation')
+    ? 'pds-dialog-fade-enter'
+    : isMobile
+      ? 'pds-dialog-enter-mobile'
+      : 'pds-dialog-enter';
+
+  dialog.style.animation = 'none';
+  void dialog.offsetWidth;
+  dialog.style.animation = `${animationName} var(--transition-normal) ease`;
+
+  dialog.addEventListener('animationend', () => {
+    dialog.style.animation = '';
+  }, { once: true });
+}
+
 /**
  * Create a PDS-compliant dialog with proper semantic structure
  * @param {string|Node|Array} message - Message content (string or DOM nodes)
@@ -63,6 +91,10 @@ export async function ask(message, options = {}) {
   return new Promise((resolve) => {
     // Create native dialog element
     const dialog = document.createElement("dialog");
+
+    if (isSafariBrowser()) {
+      dialog.classList.add("dialog-no-scale-animation");
+    }
     
     if(config.options?.liquidGlassEffects)
       dialog.classList.add("liquid-glass");
@@ -213,6 +245,8 @@ export async function ask(message, options = {}) {
 
     // Show the dialog as modal
     dialog.showModal();
+
+    requestAnimationFrame(() => playDialogEnterAnimation(dialog));
   });
 }
 

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

@@ -80,6 +80,30 @@ function enhanceDropdown(elem) {
     trigger.setAttribute("aria-expanded", "false");
   }
 
+  const measureMenuSize = () => {
+    const previousStyle = menu.getAttribute("style");
+    menu.style.visibility = "hidden";
+    menu.style.display = "inline-block";
+    menu.style.pointerEvents = "none";
+
+    const rect = menu.getBoundingClientRect();
+    const width = Math.max(menu.offsetWidth || 0, menu.scrollWidth || 0, rect.width || 0, 1);
+    const height = Math.max(
+      menu.offsetHeight || 0,
+      menu.scrollHeight || 0,
+      rect.height || 0,
+      1,
+    );
+
+    if (previousStyle === null) {
+      menu.removeAttribute("style");
+    } else {
+      menu.setAttribute("style", previousStyle);
+    }
+
+    return { width, height };
+  };
+
   const resolveDirection = () => {
     const mode = (
       elem.getAttribute("data-direction") ||
@@ -88,18 +112,15 @@ function enhanceDropdown(elem) {
       "auto"
     ).toLowerCase();
     if (mode === "up" || mode === "down") return mode;
-    const rect = elem.getBoundingClientRect();
-    const menuRect = menu?.getBoundingClientRect?.() || { height: 0 };
-    const menuHeight = Math.max(
-      menu?.offsetHeight || 0,
-      menu?.scrollHeight || 0,
-      menuRect.height || 0,
-      200,
-    );
-    const spaceBelow = Math.max(0, window.innerHeight - rect.bottom);
-    const spaceAbove = Math.max(0, rect.top);
-    if (spaceBelow >= menuHeight) return "down";
-    if (spaceAbove >= menuHeight) return "up";
+    const anchorRect = (trigger || elem).getBoundingClientRect();
+    const { height: menuHeight } = measureMenuSize();
+    const spaceBelow = Math.max(0, window.innerHeight - anchorRect.bottom);
+    const spaceAbove = Math.max(0, anchorRect.top);
+    const fitsDown = spaceBelow >= menuHeight;
+    const fitsUp = spaceAbove >= menuHeight;
+    if (fitsDown && !fitsUp) return "down";
+    if (fitsUp && !fitsDown) return "up";
+    if (fitsDown && fitsUp) return "down";
     return spaceAbove > spaceBelow ? "up" : "down";
   };
 
@@ -117,19 +138,17 @@ function enhanceDropdown(elem) {
     ) {
       return align === "start" ? "left" : align === "end" ? "right" : align;
     }
-    const rect = elem.getBoundingClientRect();
-    const menuRect = menu?.getBoundingClientRect?.() || { width: 0 };
-    const menuWidth = Math.max(
-      menu?.offsetWidth || 0,
-      menu?.scrollWidth || 0,
-      menuRect.width || 0,
-      240,
-    );
-    const spaceRight = Math.max(0, window.innerWidth - rect.left);
-    const spaceLeft = Math.max(0, rect.right);
-    if (spaceRight >= menuWidth) return "left";
-    if (spaceLeft >= menuWidth) return "right";
-    return spaceLeft > spaceRight ? "right" : "left";
+    const anchorRect = (trigger || elem).getBoundingClientRect();
+    const { width: menuWidth } = measureMenuSize();
+    const spaceForLeftAligned = Math.max(0, window.innerWidth - anchorRect.left);
+    const spaceForRightAligned = Math.max(0, anchorRect.right);
+    const fitsLeft = spaceForLeftAligned >= menuWidth;
+    const fitsRight = spaceForRightAligned >= menuWidth;
+
+    if (fitsLeft && !fitsRight) return "left";
+    if (fitsRight && !fitsLeft) return "right";
+    if (fitsLeft && fitsRight) return "left";
+    return spaceForRightAligned > spaceForLeftAligned ? "right" : "left";
   };
 
   // Store click handler reference for cleanup

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

@@ -3317,6 +3317,22 @@ dialog[open] {
   }
 }
 
+/* Safari fallback: disable scale animation to avoid dialog clipping bugs */
+dialog.dialog-no-scale-animation {
+  transform: translate(-50%, -50%);
+  transition: opacity var(--transition-normal) ease;
+}
+
+dialog.dialog-no-scale-animation[open] {
+  transform: translate(-50%, -50%);
+  animation: pds-dialog-fade-enter var(--transition-normal) ease;
+}
+
+@keyframes pds-dialog-fade-enter {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
 /* Backdrop styling */
 dialog::backdrop {
   background: var(--backdrop-bg);
@@ -3436,9 +3452,24 @@ 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-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;
@@ -3446,16 +3477,23 @@ 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;
-    transform: scale(0.95);
+    transform: scale(0.98);
   }
   dialog[open] {
     transform: scale(1);
     animation: pds-dialog-enter-mobile var(--transition-normal) ease;
   }
+
+  dialog.dialog-no-scale-animation {
+    transition: opacity var(--transition-normal) ease;
+  }
+  dialog.dialog-no-scale-animation[open] {
+    animation: pds-dialog-fade-enter var(--transition-normal) ease;
+  }
   @keyframes pds-dialog-enter-mobile {
     from {
       opacity: 0;
-      transform: scale(0.95);
+      transform: scale(0.98);
     }
     to {
       opacity: 1;
@@ -3823,9 +3861,12 @@ nav[data-dropdown] {
     }
   }
 
-  &[data-mode="auto"] > :last-child {
+  &[data-mode="auto"]:not([data-dropdown-direction]) > :last-child {
     top: 100%;
     bottom: auto;
+    margin-top: var(--spacing-2);
+    margin-bottom: 0;
+    transform-origin: top center;
   }
 
   @media (prefers-reduced-motion: reduce) {

package/src/js/pds-manager.js

@@ -3,3 +3,4 @@
  * Keeps production pds.js lean; loaded dynamically in live mode only.
  */
 export { startLive } from "./pds-core/pds-live.js";
+export { loadGoogleFont } from "./common/font-loader.js";

package/stories/enhancements/Dropdowns.stories.js

@@ -22,6 +22,26 @@ const dropdownStoryStyles = html`
     .story-glass-demo-travel {
       background-image: url('https://images.unsplash.com/photo-1517832207067-4db24a2ae47c?auto=format&fit=crop&w=1200&q=80');
     }
+    .story-corner-nav {
+      position: fixed;
+      z-index: var(--z-dropdown, 1050);
+    }
+    .story-corner-nav.top-left {
+      top: 10px;
+      left: 10px;
+    }
+    .story-corner-nav.top-right {
+      top: 10px;
+      right: 10px;
+    }
+    .story-corner-nav.bottom-left {
+      bottom: 10px;
+      left: 10px;
+    }
+    .story-corner-nav.bottom-right {
+      bottom: 10px;
+      right: 10px;
+    }
   </style>
 `;
 
@@ -208,3 +228,49 @@ export const ProfilePanel = () => html`
     </article>
   </nav>
 `;
+
+export const AutoPositionCorners = () => html`
+  ${dropdownStoryStyles}
+  ${enhancementHeader('dropdown', {
+    description: 'Four corner triggers use automatic positioning (`data-mode="auto"`) so each menu opens in the only available direction and alignment.'
+  })}
+  <nav data-dropdown data-mode="auto" class="story-corner-nav top-left">
+    <button class="btn-primary icon-only" aria-label="Top Left menu">
+      <pds-icon icon="list" size="sm"></pds-icon>
+    </button>
+    <menu>
+      <li><a href="#">Item 1</a></li>
+      <li><a href="#">Item 2</a></li>
+    </menu>
+  </nav>
+
+  <nav data-dropdown data-mode="auto" class="story-corner-nav top-right">
+    <button class="btn-primary icon-only" aria-label="Top Right menu">
+      <pds-icon icon="list" size="sm"></pds-icon>
+    </button>
+    <menu>
+      <li><a href="#">Item 1</a></li>
+      <li><a href="#">Item 2</a></li>
+    </menu>
+  </nav>
+
+  <nav data-dropdown data-mode="auto" class="story-corner-nav bottom-left">
+    <button class="btn-primary icon-only" aria-label="Bottom Left menu">
+      <pds-icon icon="list" size="sm"></pds-icon>
+    </button>
+    <menu>
+      <li><a href="#">Item 1</a></li>
+      <li><a href="#">Item 2</a></li>
+    </menu>
+  </nav>
+
+  <nav data-dropdown data-mode="auto" class="story-corner-nav bottom-right">
+    <button class="btn-primary icon-only" aria-label="Bottom Right menu">
+      <pds-icon icon="list" size="sm"></pds-icon>
+    </button>
+    <menu>
+      <li><a href="#">Item 1</a></li>
+      <li><a href="#">Item 2</a></li>
+    </menu>
+  </nav>
+`;