@streamscloud/kit 0.85.1 → 0.87.0

package/dist/ui/select/select-listbox.svelte

@@ -6,7 +6,7 @@ import IconCheckboxChecked from '@fluentui/svg-icons/icons/checkbox_checked_16_f
 import IconCheckboxIndeterminate from '@fluentui/svg-icons/icons/checkbox_indeterminate_16_filled.svg?raw';
 import IconCheckboxUnchecked from '@fluentui/svg-icons/icons/checkbox_unchecked_16_regular.svg?raw';
 import IconCheckmark from '@fluentui/svg-icons/icons/checkmark_16_regular.svg?raw';
-let { triggerEl, isOpen, rows, highlight, loading = false, listboxId, matchTriggerWidth = true, selectedDisplay = 'checkmark', optionSnippet, headerSnippet, bodySnippet, hideCreateRows = false, createPrefix, suppressEmpty = false, on } = $props();
+let { triggerEl, isOpen, rows, highlight, loading = false, size = 'md', listboxId, matchTriggerWidth = true, selectedDisplay = 'checkmark', optionSnippet, headerSnippet, bodySnippet, hideCreateRows = false, createPrefix, suppressEmpty = false, on } = $props();
 const localization = new SelectListboxLocalization();
 // rows keep their index into the full `rows` array — `highlight` and row ids are core-side indices,
 // so filtering without preserving them shifts every row by one and Enter acts on the wrong row
@@ -115,7 +115,7 @@ $effect(() => {
 {#if isOpen && (hasRows || showEmpty)}
   <div
     bind:this={panelEl}
-    class="select-listbox select-listbox--display-{selectedDisplay}"
+    class="select-listbox select-listbox--{size} select-listbox--display-{selectedDisplay}"
     role="listbox"
     id={listboxId}
     tabindex="-1"
@@ -237,10 +237,10 @@ dismiss events upward. Floating UI handles placement with autoUpdate on scroll/r
 | `--sc-kit--select--panel--border-color` | Panel border | `var(--sc-kit--color--border)` |
 | `--sc-kit--select--panel--border-radius` | Panel radius | `var(--sc-kit--radius--md)` |
 | `--sc-kit--select--panel--box-shadow` | Panel shadow | `var(--sc-kit--shadow--lg)` |
-| `--sc-kit--select--panel--font-size` | Option / group / empty-state text size | `var(--sc-kit--font-size--md)` |
+| `--sc-kit--select--panel--font-size` | Option / group / empty-state text size | per size — `var(--sc-kit--font-size--{sm,md,lg})` |
 | `--sc-kit--select--panel--max-height` | Panel max height | `18rem` |
-| `--sc-kit--select--panel--padding` | Panel inner padding | `var(--sc-kit--space--1)` |
-| `--sc-kit--select--option--height` | Option row height | `var(--sc-kit--field--height--md)` (32px) |
+| `--sc-kit--select--panel--padding` | Panel inner padding; in Chrome / Safari the 4px scrollbar takes its share of the end side | `var(--sc-kit--space--1)` |
+| `--sc-kit--select--option--height` | Option row height | per size — `var(--sc-kit--field--height--{sm,md,lg})` |
 | `--sc-kit--select--option--padding-inline` | Option horizontal padding | `var(--sc-kit--space--3)` |
 | `--sc-kit--select--option--background--active` | Active / focused row background | `var(--sc-kit--color--accent--softer)` |
 | `--sc-kit--select--option--color` | Row text color | `var(--sc-kit--color--text--primary)` |
@@ -257,8 +257,8 @@ dismiss events upward. Floating UI handles placement with autoUpdate on scroll/r
   --_lb--box-shadow: var(--sc-kit--select--panel--box-shadow, var(--sc-kit--shadow--lg));
   --_lb--max-height: var(--sc-kit--select--panel--max-height, 18rem);
   --_lb--padding: var(--sc-kit--select--panel--padding, var(--sc-kit--space--1));
-  --_lb--font-size: var(--sc-kit--select--panel--font-size, var(--sc-kit--font-size--md));
-  --_lb--row-height: var(--sc-kit--select--option--height, var(--sc-kit--field--height--md));
+  --_lb--font-size: var(--sc-kit--select--panel--font-size, var(--_lb--size-font-size, var(--sc-kit--font-size--md)));
+  --_lb--row-height: var(--sc-kit--select--option--height, var(--_lb--size-row-height, var(--sc-kit--field--height--md)));
   --_lb--row-padding-inline: var(--sc-kit--select--option--padding-inline, var(--sc-kit--space--3));
   --_lb--row-background-active: var(--sc-kit--select--option--background--active, var(--sc-kit--color--accent--softer));
   --_lb--row-color: var(--sc-kit--select--option--color, var(--sc-kit--color--text--primary));
@@ -278,28 +278,51 @@ dismiss events upward. Floating UI handles placement with autoUpdate on scroll/r
   box-shadow: var(--_lb--box-shadow);
   max-height: var(--_lb--max-height);
   padding: var(--_lb--padding);
+  padding-inline-start: max(var(--_lb--padding), var(--_cross-browser-scrollbar--gutter, 0px));
+  padding-inline-end: max(0px, var(--_lb--padding) - var(--_cross-browser-scrollbar--gutter, 0px));
   overflow-y: auto;
   --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+  --_cross-browser-scrollbar--gutter: 0px;
 }
-.select-listbox::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.select-listbox::-webkit-scrollbar-track {
-  background: var(--_cross-browser-scrollbar--track-color);
-  border-radius: 100vw;
-}
-.select-listbox::-webkit-scrollbar-thumb {
-  background: var(--_cross-browser-scrollbar--thumb-color);
-  border-radius: 100vw;
+@supports selector(::-webkit-scrollbar) {
+  .select-listbox {
+    scrollbar-color: auto;
+    scrollbar-width: auto;
+  }
+  .select-listbox::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+  .select-listbox::-webkit-scrollbar-track {
+    background: var(--_cross-browser-scrollbar--track-color);
+    border-radius: 100vw;
+  }
+  .select-listbox::-webkit-scrollbar-thumb {
+    background: var(--_cross-browser-scrollbar--thumb-color);
+    border-radius: 100vw;
+  }
 }
-@supports (scrollbar-color: transparent transparent) {
+@supports not selector(::-webkit-scrollbar) {
   .select-listbox {
     scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
     scrollbar-width: thin;
   }
 }
+@supports selector(::-webkit-scrollbar) {
+  .select-listbox {
+    --_cross-browser-scrollbar--gutter: 4px;
+    overflow-y: scroll;
+  }
+}
+.select-listbox--sm {
+  --_lb--size-font-size: var(--sc-kit--font-size--sm);
+  --_lb--size-row-height: var(--sc-kit--field--height--sm);
+}
+.select-listbox--lg {
+  --_lb--size-font-size: var(--sc-kit--font-size--lg);
+  --_lb--size-row-height: var(--sc-kit--field--height--lg);
+}
 .select-listbox__row {
   display: flex;
   align-items: center;

package/dist/ui/select/select-listbox.svelte.d.ts

@@ -9,6 +9,8 @@ declare function $$render<T>(): {
         /** Index into `rows` — highlighted row gets the active background and scrolls into view. */
         highlight: number;
         loading?: boolean;
+        /** Field size the rows follow (font size + row height). @default 'md' */
+        size?: "sm" | "md" | "lg";
         /** Stable id for aria-controls + aria-activedescendant. */
         listboxId: string;
         /** When true, panel width equals trigger width. @default true */
@@ -79,10 +81,10 @@ interface $$IsomorphicComponent {
  * | `--sc-kit--select--panel--border-color` | Panel border | `var(--sc-kit--color--border)` |
  * | `--sc-kit--select--panel--border-radius` | Panel radius | `var(--sc-kit--radius--md)` |
  * | `--sc-kit--select--panel--box-shadow` | Panel shadow | `var(--sc-kit--shadow--lg)` |
- * | `--sc-kit--select--panel--font-size` | Option / group / empty-state text size | `var(--sc-kit--font-size--md)` |
+ * | `--sc-kit--select--panel--font-size` | Option / group / empty-state text size | per size — `var(--sc-kit--font-size--{sm,md,lg})` |
  * | `--sc-kit--select--panel--max-height` | Panel max height | `18rem` |
- * | `--sc-kit--select--panel--padding` | Panel inner padding | `var(--sc-kit--space--1)` |
- * | `--sc-kit--select--option--height` | Option row height | `var(--sc-kit--field--height--md)` (32px) |
+ * | `--sc-kit--select--panel--padding` | Panel inner padding; in Chrome / Safari the 4px scrollbar takes its share of the end side | `var(--sc-kit--space--1)` |
+ * | `--sc-kit--select--option--height` | Option row height | per size — `var(--sc-kit--field--height--{sm,md,lg})` |
  * | `--sc-kit--select--option--padding-inline` | Option horizontal padding | `var(--sc-kit--space--3)` |
  * | `--sc-kit--select--option--background--active` | Active / focused row background | `var(--sc-kit--color--accent--softer)` |
  * | `--sc-kit--select--option--color` | Row text color | `var(--sc-kit--color--text--primary)` |

package/dist/ui/table/table-core.svelte

@@ -290,20 +290,27 @@ Not exported from `index.ts` — for kit-internal use only.
   overflow: auto;
   --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+  --_cross-browser-scrollbar--gutter: 0px;
 }
-.table-container__scroll::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.table-container__scroll::-webkit-scrollbar-track {
-  background: var(--_cross-browser-scrollbar--track-color);
-  border-radius: 100vw;
-}
-.table-container__scroll::-webkit-scrollbar-thumb {
-  background: var(--_cross-browser-scrollbar--thumb-color);
-  border-radius: 100vw;
+@supports selector(::-webkit-scrollbar) {
+  .table-container__scroll {
+    scrollbar-color: auto;
+    scrollbar-width: auto;
+  }
+  .table-container__scroll::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .table-container__scroll::-webkit-scrollbar-track {
+    background: var(--_cross-browser-scrollbar--track-color);
+    border-radius: 100vw;
+  }
+  .table-container__scroll::-webkit-scrollbar-thumb {
+    background: var(--_cross-browser-scrollbar--thumb-color);
+    border-radius: 100vw;
+  }
 }
-@supports (scrollbar-color: transparent transparent) {
+@supports not selector(::-webkit-scrollbar) {
   .table-container__scroll {
     scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
     scrollbar-width: thin;

package/dist/ui/textarea/cmp.textarea.svelte

@@ -285,19 +285,28 @@ what the field shows. Blank lines inside the text are left alone. Typing is unto
   --_cross-browser-scrollbar--thumb-color: var(--sc-kit--color--border--strong);
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }
-.textarea__el::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.textarea__el::-webkit-scrollbar-track {
-  background: var(--_cross-browser-scrollbar--track-color);
-  border-radius: 100vw;
+.textarea__el {
+  --_cross-browser-scrollbar--gutter: 0px;
 }
-.textarea__el::-webkit-scrollbar-thumb {
-  background: var(--_cross-browser-scrollbar--thumb-color);
-  border-radius: 100vw;
+@supports selector(::-webkit-scrollbar) {
+  .textarea__el {
+    scrollbar-color: auto;
+    scrollbar-width: auto;
+  }
+  .textarea__el::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .textarea__el::-webkit-scrollbar-track {
+    background: var(--_cross-browser-scrollbar--track-color);
+    border-radius: 100vw;
+  }
+  .textarea__el::-webkit-scrollbar-thumb {
+    background: var(--_cross-browser-scrollbar--thumb-color);
+    border-radius: 100vw;
+  }
 }
-@supports (scrollbar-color: transparent transparent) {
+@supports not selector(::-webkit-scrollbar) {
   .textarea__el {
     scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
     scrollbar-width: thin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.85.1",
+  "version": "0.87.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -9,18 +9,15 @@
   "type": "module",
   "scripts": {
     "dev": "vite dev --port 3011 --host",
-    "build": "svelte-package --tsconfig ./tsconfig.app.json && npm run build:css && prettier --write --plugin prettier-plugin-svelte . && eslint --fix .",
+    "build": "npm run check && svelte-package --tsconfig ./tsconfig.app.json && npm run build:css",
     "build:css": "sass dist/styles/_normalize.scss dist/styles/normalize.css --no-source-map && sass dist/styles/_reset.scss dist/styles/reset.css --no-source-map",
     "publish:prod": "npm run build && npm publish --access public --tag latest",
     "version:dev": "node -e \"const p=require('./package.json');p.version=p.version.split('-')[0]+'-'+Date.now();require('fs').writeFileSync('package.json',JSON.stringify(p,null,2)+'\\n')\"",
     "publish:dev": "npm run build && npm run version:dev && npm publish --tag next && git checkout -- package.json",
     "pack": "npm run build && npm pack",
     "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json",
-    "check:strict": "svelte-check --tsconfig ./tsconfig.app.json --fail-on-warnings --output machine && eslint . --format codeframe --max-warnings 0 && prettier --check --plugin prettier-plugin-svelte --cache .",
-    "lint": "prettier --check --plugin prettier-plugin-svelte . && eslint .",
-    "lint-format": "prettier --write --plugin prettier-plugin-svelte . && eslint --fix .",
-    "format": "prettier --write --plugin prettier-plugin-svelte ."
+    "check": "svelte-check --tsconfig ./tsconfig.app.json --fail-on-warnings --output machine && tsc -p tsconfig.node.json && eslint . --format codeframe --max-warnings 0 && prettier --check --plugin prettier-plugin-svelte --cache .",
+    "lint:fix": "eslint --fix . && prettier --write --plugin prettier-plugin-svelte ."
   },
   "files": [
     "dist"