@sveltia/ui 0.15.3 → 0.15.5

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

@@ -33,6 +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 -->
+      <!-- prettier-ignore -->
       <svelte:element this={'th'} role="rowheader" id="{id}-label" colspan="9999">
         {label}
       </svelte:element>

package/package/components/select/combobox.svelte

@@ -87,6 +87,7 @@
    */
   const onChange = () => {
     const selected = popupComponent?.content?.querySelector(selectedSelector);
+
     const target = /** @type {HTMLButtonElement} */ (
       popupComponent?.content?.querySelector(`[role="option"][value="${value}"]`)
     );

package/package/components/slider/slider.svelte

@@ -87,6 +87,7 @@
 
     const fromIndex = positionList.findLastIndex((s) => s <= diff);
     const toIndex = positionList.findIndex((s) => diff <= s);
+
     const index =
       Math.abs(positionList[fromIndex] - diff) < Math.abs(positionList[toIndex] - diff)
         ? fromIndex

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

@@ -33,6 +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 -->
+      <!-- prettier-ignore -->
       <svelte:element this={'th'} role="rowheader" id="{id}-label" colspan="9999">
         {label}
       </svelte:element>

package/package/components/tabs/tab-list.svelte

@@ -141,10 +141,11 @@
   margin: var(--sui-vertical-tab-list-margin, var(--sui-tab-list-margin, 0 32px 0 0));
   border-width: var(--sui-vertical-tab-list-border-width, var(--sui-tab-list-border-width, 0 1px 0 0));
   padding: var(--sui-vertical-tab-list-padding, var(--sui-tab-list-padding, 8px 0));
-  width: var(--sui-vertical-tab-list-width, 240px);
+  width: var(--sui-vertical-tab-list-width, auto);
 }
 .tab-list[aria-orientation=vertical] :global(button) {
   justify-content: var(--sui-vertical-tab-justify-content, flex-start);
+  padding-right: 32px;
   width: var(--sui-vertical-tab-width, var(--sui-tab-width, 100%));
   height: var(--sui-vertical-tab-height, var(--sui-tab-height, auto));
 }

package/package/components/util/app-shell.svelte

@@ -490,6 +490,10 @@
   color: var(--sui-primary-accent-color-text);
   text-decoration: none;
 }
+:global(:root[data-underline-links=true]) :global(a), :global(:host[data-underline-links=true]) :global(a) {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
 
 :global(p),
 :global(li) {

package/package/components/util/popup.svelte

@@ -82,10 +82,17 @@
     height: undefined,
   });
 
+  /**
+   * Initialize the popup.
+   */
+  const init = () => {
+    ({ open, style } = activatePopup(anchor, modal.dialog, position, positionBaseElement));
+    contentType = anchor?.getAttribute('aria-haspopup') ?? undefined;
+  };
+
   $: {
     if (anchor && modal?.dialog) {
-      ({ open, style } = activatePopup(anchor, modal.dialog, position, positionBaseElement));
-      contentType = anchor.getAttribute('aria-haspopup') ?? undefined;
+      init();
     }
   }
 

package/package/services/group.js

@@ -106,6 +106,7 @@ class Group {
       const isSelected = defaultSelected
         ? element === defaultSelected
         : this.selectFirst && index === 0;
+
       const controlTarget = /** @type {HTMLElement | null} */ (
         document.querySelector(`#${element.getAttribute('aria-controls')}`)
       );
@@ -221,6 +222,7 @@ class Group {
     const targetRole = newTarget.getAttribute('role');
     const targetParent = newTarget.closest(this.parentGroupSelector);
     const selectByClick = event.type === 'click';
+
     const selectByKeydown =
       event.type === 'keydown' && /** @type {KeyboardEvent} */ (event).key === ' ';
 
@@ -336,6 +338,7 @@ class Group {
   onClick(event) {
     // eslint-disable-next-line prefer-destructuring
     const target = /** @type {HTMLElement} */ (event.target);
+
     const newTarget = target.matches(this.selector)
       ? target
       : /** @type {HTMLElement | null} */ (target.closest(this.selector));
@@ -362,6 +365,7 @@ class Group {
     // eslint-disable-next-line prefer-destructuring
     const target = /** @type {HTMLElement} */ (event.target);
     const { allMembers, activeMembers } = this;
+
     /** @type {HTMLElement | undefined} */
     const currentTarget = (() => {
       if (!this.focusChild) {
@@ -460,6 +464,7 @@ class Group {
   onUpdate({ searchTerms }) {
     const terms = searchTerms.trim().toLocaleLowerCase();
     const _terms = terms ? terms.split(/\s+/) : [];
+
     const matched = this.allMembers
       .map((member) => {
         const searchValue =
@@ -469,6 +474,7 @@ class Group {
             member.querySelector('.label')?.textContent ??
             member.textContent
           )?.toLocaleLowerCase() ?? '';
+
         const hidden = !_terms.every((term) => searchValue.includes(term));
 
         member.dispatchEvent(new CustomEvent('toggle', { detail: { hidden } }));

package/package/services/popup.js

@@ -65,22 +65,27 @@ class Popup {
         : position.endsWith('-top')
           ? `${Math.round(intersectionRect.top)}px`
           : 'auto';
+
       const right = position.startsWith('left-')
         ? `${Math.round(rootBounds.width - intersectionRect.left)}px`
         : position.endsWith('-right')
           ? `${Math.round(rootBounds.width - intersectionRect.right)}px`
           : 'auto';
+
       const bottom = position.startsWith('top-')
         ? `${Math.round(rootBounds.height - intersectionRect.top)}px`
         : position.endsWith('-bottom')
           ? `${Math.round(rootBounds.height - intersectionRect.bottom)}px`
           : 'auto';
+
       const left = position.startsWith('right-')
         ? `${Math.round(intersectionRect.right)}px`
         : position.endsWith('-left')
           ? `${Math.round(intersectionRect.left)}px`
           : 'auto';
+
       const anchorPopup = /** @type {HTMLElement} */ (this.anchorElement.closest('.popup'));
+
       const style = {
         inset: [top, right, bottom, left].join(' '),
         zIndex: anchorPopup ? Number(anchorPopup.style.zIndex) + 1 : 1000,

package/package/styles/core.scss

@@ -95,6 +95,12 @@ strong {
 a {
   color: var(--sui-primary-accent-color-text);
   text-decoration: none;
+
+  :root[data-underline-links="true"] &,
+  :host[data-underline-links="true"] & {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
 }
 
 p,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.15.3",
+  "version": "0.15.5",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -41,28 +41,28 @@
     "@sveltejs/adapter-auto": "^3.2.1",
     "@sveltejs/kit": "^2.5.10",
     "@sveltejs/package": "^2.3.1",
-    "@sveltejs/vite-plugin-svelte": "^3.1.0",
+    "@sveltejs/vite-plugin-svelte": "^3.1.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.6",
+    "eslint-plugin-jsdoc": "^48.2.7",
     "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": "^3.3.0",
     "prettier-plugin-svelte": "^3.2.3",
-    "sass": "^1.77.2",
-    "stylelint": "^16.6.0",
+    "sass": "^1.77.4",
+    "stylelint": "^16.6.1",
     "stylelint-config-recommended-scss": "^14.0.0",
     "stylelint-scss": "^6.3.0",
-    "svelte-check": "^3.7.1",
+    "svelte-check": "^3.8.0",
     "svelte-i18n": "^4.0.0",
     "svelte-preprocess": "^5.1.4",
     "tslib": "^2.6.2",
-    "vite": "^5.2.11",
+    "vite": "^5.2.12",
     "vitest": "^1.6.0"
   },
   "exports": {