@sveltia/ui 0.15.0 → 0.15.2

package/package/components/dialog/dialog.svelte

@@ -89,6 +89,16 @@
    * @type {Modal}
    */
   let modal;
+  /**
+   * @type {HTMLElement | undefined}
+   */
+  let content;
+
+  $: {
+    if (open && content) {
+      /** @type {HTMLElement} */ (content.querySelector('input, button.primary'))?.focus();
+    }
+  }
 </script>
 
 <Modal
@@ -111,7 +121,7 @@
   on:close
 >
   <slot name="extra-content" slot="extra-content" />
-  <div role="none" class="content {className} {size}">
+  <div role="none" class="content {className} {size}" bind:this={content}>
     {#if title || showClose || $$slots.header || $$slots['header-extra']}
       <div role="none" class="header">
         {#if $$slots.header}

package/package/components/grid/grid-body.svelte

@@ -33,7 +33,7 @@
   {#if label}
     <div role="row" class="row-group-caption">
       <!-- We need `colspan` here but cannot place `<th>` under `<div>`, so use a hack -->
-      <svelte:element this="th" role="rowheader" id="{id}-label" colspan="9999">
+      <svelte:element this={'th'} role="rowheader" id="{id}-label" colspan="9999">
         {label}
       </svelte:element>
     </div>

package/package/components/table/table-body.svelte

@@ -33,7 +33,7 @@
   {#if label}
     <div role="row" class="row-group-caption">
       <!-- We need `colspan` here but cannot place `<th>` under `<div>`, so use a hack -->
-      <svelte:element this="th" role="rowheader" id="{id}-label" colspan="9999">
+      <svelte:element this={'th'} role="rowheader" id="{id}-label" colspan="9999">
         {label}
       </svelte:element>
     </div>

package/package/components/util/popup.svelte

@@ -137,8 +137,8 @@
     class:touch
     style:inset={$style.inset}
     style:z-index={$style.zIndex}
-    style:width={$style.width}
     style:min-width={$style.minWidth}
+    style:max-width={$style.maxWidth}
     style:max-height={$style.height}
     style:visibility={$style.inset ? undefined : 'hidden'}
     bind:this={content}
@@ -151,6 +151,7 @@
   position: absolute;
   overflow-y: auto;
   outline-width: 0 !important;
+  width: auto;
   color: var(--sui-primary-foreground-color);
   background-color: var(--sui-secondary-background-color-translucent);
   box-shadow: 0 8px 16px var(--sui-popup-shadow-color);

package/package/services/popup.d.ts

@@ -18,14 +18,16 @@ declare class Popup {
      * @type {import('svelte/store').Writable<{
      * inset: string | undefined,
      * zIndex: number | undefined,
-     * width: string | undefined,
+     * minWidth: string | undefined,
+     * maxWidth: string | undefined,
      * height: string | undefined,
      * }>}
      */
     style: import('svelte/store').Writable<{
         inset: string | undefined;
         zIndex: number | undefined;
-        width: string | undefined;
+        minWidth: string | undefined;
+        maxWidth: string | undefined;
         height: string | undefined;
     }>;
     observer: IntersectionObserver;

package/package/services/popup.js

@@ -14,11 +14,18 @@ class Popup {
    * @type {import('svelte/store').Writable<{
    * inset: string | undefined,
    * zIndex: number | undefined,
-   * width: string | undefined,
+   * minWidth: string | undefined,
+   * maxWidth: string | undefined,
    * height: string | undefined,
    * }>}
    */
-  style = writable({ inset: undefined, zIndex: undefined, width: undefined, height: undefined });
+  style = writable({
+    inset: undefined,
+    zIndex: undefined,
+    minWidth: undefined,
+    maxWidth: undefined,
+    height: undefined,
+  });
 
   observer = new IntersectionObserver((entries) => {
     entries.forEach(({ intersectionRect, rootBounds }) => {
@@ -77,8 +84,8 @@ class Popup {
       const style = {
         inset: [top, right, bottom, left].join(' '),
         zIndex: anchorPopup ? Number(anchorPopup.style.zIndex) + 1 : 1000,
-        width: content.matches('.menu') ? 'auto' : `${Math.round(intersectionRect.width)}px`,
         minWidth: `${Math.round(intersectionRect.width)}px`,
+        maxWidth: `${Math.round(rootBounds.width - intersectionRect.left - 8)}px`,
         height: height ? `${Math.round(height)}px` : 'auto',
       };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.15.0",
+  "version": "0.15.2",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -32,30 +32,30 @@
     "@lexical/selection": "^0.15.0",
     "@lexical/table": "^0.15.0",
     "@lexical/utils": "^0.15.0",
-    "@sveltia/utils": "^0.2.0",
+    "@sveltia/utils": "^0.3.0",
     "lexical": "^0.15.0",
-    "svelte": "^4.2.16"
+    "svelte": "^4.2.17"
   },
   "devDependencies": {
-    "@playwright/test": "^1.44.0",
-    "@sveltejs/adapter-auto": "^3.2.0",
-    "@sveltejs/kit": "^2.5.7",
+    "@playwright/test": "^1.44.1",
+    "@sveltejs/adapter-auto": "^3.2.1",
+    "@sveltejs/kit": "^2.5.10",
     "@sveltejs/package": "^2.3.1",
     "@sveltejs/vite-plugin-svelte": "^3.1.0",
-    "cspell": "^8.8.1",
+    "cspell": "^8.8.3",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsdoc": "^48.2.4",
+    "eslint-plugin-jsdoc": "^48.2.6",
     "eslint-plugin-svelte": "^2.39.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
     "postcss-html": "^1.7.0",
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.3",
-    "sass": "^1.77.1",
-    "stylelint": "^16.5.0",
+    "sass": "^1.77.2",
+    "stylelint": "^16.6.0",
     "stylelint-config-recommended-scss": "^14.0.0",
     "stylelint-scss": "^6.3.0",
     "svelte-check": "^3.7.1",