@sveltia/ui 0.78.4 → 0.79.0

package/dist/styles/mixins.scss

@@ -0,0 +1,126 @@
+// Shared component style mixins. Components load this with `@use '../../styles/mixins';`; it emits
+// no CSS on its own.
+
+// Make a field stretch to fill its container when the `flex` prop is set. The `display` is repeated
+// to avoid Tailwind `.flex` class collisions.
+@mixin flex-stretch($display: inline-flex) {
+  &.flex:not([hidden]) {
+    display: $display; // Avoid Tailwind .flex class collisions
+    width: -moz-available;
+    width: -webkit-fill-available;
+    width: stretch;
+    min-width: 0;
+  }
+}
+
+// A `<TextInput>` embedded in a composite field, like `<SearchBar>` or `<NumberInput>`, filling the
+// space left by the other parts. To be included within a `:global` block.
+@mixin embedded-text-input {
+  .text-input {
+    flex: auto;
+    margin: 0 !important;
+    width: 0; // = auto
+    min-width: 0 !important;
+  }
+}
+
+// A square button attached to the end of a text field, sharing its border. `$size-property` is the
+// dimension tied to the field height (`width` or `height`), the other one following the aspect
+// ratio.
+@mixin attached-button($size-property) {
+  flex: none;
+  margin-inline-start: -1px;
+  border-width: 1px;
+  border-color: var(--sui-textbox-border-color);
+  #{$size-property}: var(--sui-textbox-height);
+  aspect-ratio: 1 / 1;
+
+  &:last-child {
+    border-start-start-radius: 0;
+    border-start-end-radius: 4px;
+    border-end-end-radius: 4px;
+    border-end-start-radius: 0;
+  }
+
+  .icon {
+    font-size: var(--sui-font-size-xx-large);
+  }
+}
+
+// The label wrapper of a checkbox or radio button.
+@mixin toggle-control-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin: var(--sui-focus-ring-width);
+  // The wrapper forwards clicks to the 20px control, so it’s the pointer target; keep it at the
+  // 24px minimum (WCAG 2.5.8) even without a label
+  min-width: 24px;
+  min-height: 24px;
+  color: var(--sui-control-foreground-color);
+  font-family: var(--sui-control-font-family);
+  font-size: var(--sui-control-font-size);
+  line-height: var(--sui-control-line-height);
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+// The `horizontal` and `vertical` orientations of a checkbox or radio group.
+@mixin toggle-group-orientation {
+  &.horizontal {
+    gap: 8px;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  &.vertical {
+    gap: 4px;
+    flex-direction: column;
+
+    @media (pointer: coarse) {
+      gap: 8px;
+    }
+  }
+}
+
+// The `<Table>` or `<Grid>` wrapper. `$prefix` is the class name prefix of its cells (`table` or
+// `grid`), bordered and padded when the `data` class is set.
+@mixin table($prefix) {
+  display: table;
+  margin: var(--sui-focus-ring-width);
+  width: calc(100% - var(--sui-focus-ring-width) * 2);
+
+  &.data {
+    border-collapse: collapse;
+
+    :global {
+      :is(.#{$prefix}-col-header, .#{$prefix}-row-header, .#{$prefix}-cell) {
+        border: 1px solid var(--sui-secondary-border-color);
+        padding: 8px 8px;
+      }
+    }
+  }
+}
+
+// A `<TableBody>` or `<GridBody>` row group with its optional caption row. Extra caption cell
+// styles can be passed as the content block.
+@mixin row-group {
+  [role="rowgroup"] {
+    display: table-row-group;
+  }
+
+  [role="row"] {
+    display: table-row;
+  }
+
+  [role="columnheader"] {
+    display: table-cell;
+    padding: 8px;
+    color: var(--sui-secondary-foreground-color);
+    background-color: var(--sui-secondary-background-color);
+    font-size: var(--sui-font-size-default);
+    text-align: start;
+    @content;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.78.4",
+  "version": "0.79.0",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -13,6 +13,10 @@
   },
   "sideEffects": false,
   "type": "module",
+  "imports": {
+    "#lib": "./src/lib/index.js",
+    "#lib/*": "./src/lib/*"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -54,10 +58,10 @@
     "@lexical/selection": "^0.52.0",
     "@lexical/table": "^0.52.0",
     "@lexical/utils": "^0.52.0",
-    "@shikijs/langs": "4.4.3",
-    "@shikijs/themes": "4.4.3",
-    "@sveltia/i18n": "^1.4.0",
-    "@sveltia/utils": "^0.12.2",
+    "@shikijs/langs": "4.5.0",
+    "@shikijs/themes": "4.5.0",
+    "@sveltia/i18n": "^1.4.1",
+    "@sveltia/utils": "^0.12.3",
     "lexical": "^0.52.0"
   },
   "devDependencies": {
@@ -65,21 +69,21 @@
     "@fontsource-variable/source-sans-3": "5.3.0",
     "@fontsource/noto-mono": "5.3.0",
     "@rollup/plugin-yaml": "^5.0.0",
-    "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.70.3",
-    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/adapter-auto": "^8.0.0",
+    "@sveltejs/kit": "^3.0.0",
+    "@sveltejs/package": "^3.0.0",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
-    "@vitest/browser-playwright": "^5.0.2",
-    "@vitest/coverage-v8": "^5.0.2",
-    "cspell": "^10.3.5",
+    "@vitest/browser-playwright": "^5.0.3",
+    "@vitest/coverage-v8": "^5.0.3",
+    "cspell": "^10.3.6",
     "eslint": "^9.39.5",
-    "eslint-config-airbnb-extended": "^3.2.0",
+    "eslint-config-airbnb-extended": "^3.3.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsdoc": "^65.0.0",
+    "eslint-plugin-jsdoc": "^65.0.2",
     "eslint-plugin-package-json": "^1.10.1",
     "eslint-plugin-svelte": "^3.23.0",
-    "globals": "^17.12.0",
+    "globals": "^17.13.0",
     "happy-dom": "^20.14.5",
     "oxlint": "^1.86.0",
     "playwright": "^1.63.0",
@@ -87,18 +91,18 @@
     "postcss-html": "^2.0.0",
     "prettier": "^3.9.9",
     "prettier-plugin-svelte": "^4.1.1",
-    "rolldown": "^1.2.11",
-    "sass": "^1.105.0",
-    "shiki": "^4.4.3",
-    "stylelint": "^17.15.0",
+    "rolldown": "^1.2.12",
+    "sass": "^1.105.1",
+    "shiki": "^4.5.0",
+    "stylelint": "^17.16.0",
     "stylelint-config-recommended-scss": "^17.0.1",
     "stylelint-scss": "^7.3.0",
     "svelte": "^5.57.1",
     "svelte-check": "^4.7.6",
     "svelte-preprocess": "^6.0.5",
     "tslib": "^2.8.1",
-    "vite": "^8.3.1",
-    "vitest": "^5.0.2",
+    "vite": "^8.3.2",
+    "vitest": "^5.0.3",
     "vitest-browser-svelte": "^3.1.0"
   },
   "peerDependencies": {