@sparklingopinions/sparkling-ui 0.7.0 → 0.9.1

package/dist/index.js

@@ -31,19 +31,21 @@ import N from "./components/ImageUpload/ImageUpload.js";
 import P from "./components/Kbd/Kbd.js";
 import F from "./components/Pagination/Pagination.js";
 import I from "./components/Popover/Popover.js";
-import L from "./components/Spinner/Spinner.js";
-import R from "./components/Tag/Tag.js";
-import z from "./components/Select/Select.js";
-import B from "./components/Textarea/Textarea.js";
-import V from "./components/PropertyList/Editable.js";
-import H from "./components/PropertyList/PropertyList.js";
-import U from "./components/PropertyRow/Collapsible.js";
-import W from "./components/PropertyRow/PropertyRow.js";
-import G from "./components/Radio/Radio.js";
-import K from "./components/Table/Table.js";
-import { toast as q } from "./composables/toast.js";
-import J from "./components/Toast/Toaster.js";
-import Y from "./components/TypingIndicator/TypingIndicator.js";
-import { initColorMode as X, useColorMode as Z, useForceLightMode as Q } from "./composables/useColorMode.js";
-import { Banner as $, BulkActions as ee, CalendarMonth as te, Chip as ne, ConfirmDialog as re, Field as ie, FilterFieldPicker as ae, FormErrors as oe, ImageInput as se, InlineField as ce, InlineForm as le, LedgerMore as ue, LedgerRow as de, List as fe, Modal as pe, OptionsMenu as me, Pill as he, SortControl as ge, TextInput as _e, TypingDots as ve } from "./aliases.js";
-export { a as ActionBar, o as Alert, c as AlertDialog, u as Avatar, d as Badge, $ as Banner, p as Board, ee as BulkActions, e as Button, m as Calendar, te as CalendarMonth, h as Checkbox, ne as Chip, U as Collapsible, re as ConfirmDialog, g as ContextMenu, _ as DataList, y as Dialog, b as DropdownMenu, V as Editable, x as EmptyState, S as ErrorSummary, ie as Field, k as FilterChip, ae as FilterFieldPicker, A as FilterMenu, oe as FormErrors, M as FormField, r as Icon, se as ImageInput, N as ImageUpload, ce as InlineField, le as InlineForm, C as Input, P as Kbd, ue as LedgerMore, de as LedgerRow, fe as List, pe as Modal, me as OptionsMenu, F as Pagination, he as Pill, I as Popover, H as PropertyList, W as PropertyRow, G as Radio, w as SegmentedControl, z as Select, f as Skeleton, ge as SortControl, j as SortMenu, L as Spinner, K as Table, R as Tag, _e as TextInput, B as Textarea, J as Toaster, i as Tooltip, ve as TypingDots, Y as TypingIndicator, T as datePresets, E as describeFilter, D as filterOperators, l as hueFor, t as iconNames, X as initColorMode, v as saveHint, n as setIconResolver, O as sortDirections, q as toast, Z as useColorMode, s as useConfirm, Q as useForceLightMode };
+import L from "./components/Popover/PopoverDialog.js";
+import R from "./components/Spinner/Spinner.js";
+import z from "./components/Tag/Tag.js";
+import B from "./components/Select/Select.js";
+import V from "./components/Textarea/Textarea.js";
+import H from "./components/PropertyList/Editable.js";
+import U from "./components/PropertyList/PropertyList.js";
+import W from "./components/PropertyRow/Collapsible.js";
+import G from "./components/PropertyRow/PropertyRow.js";
+import K from "./components/Radio/Radio.js";
+import q from "./components/Table/Table.js";
+import { toast as J } from "./composables/toast.js";
+import Y from "./components/Toast/Toaster.js";
+import X from "./components/Toolbar/Toolbar.js";
+import Z from "./components/TypingIndicator/TypingIndicator.js";
+import { initColorMode as Q, useColorMode as $, useForceLightMode as ee } from "./composables/useColorMode.js";
+import { Banner as te, BulkActions as ne, CalendarMonth as re, Chip as ie, ConfirmDialog as ae, Field as oe, FilterFieldPicker as se, FormErrors as ce, ImageInput as le, InlineField as ue, InlineForm as de, LedgerMore as fe, LedgerRow as pe, List as me, Modal as he, OptionsMenu as ge, Pill as _e, SortControl as ve, TextInput as ye, TypingDots as be } from "./aliases.js";
+export { a as ActionBar, o as Alert, c as AlertDialog, u as Avatar, d as Badge, te as Banner, p as Board, ne as BulkActions, e as Button, m as Calendar, re as CalendarMonth, h as Checkbox, ie as Chip, W as Collapsible, ae as ConfirmDialog, g as ContextMenu, _ as DataList, y as Dialog, b as DropdownMenu, H as Editable, x as EmptyState, S as ErrorSummary, oe as Field, k as FilterChip, se as FilterFieldPicker, A as FilterMenu, ce as FormErrors, M as FormField, r as Icon, le as ImageInput, N as ImageUpload, ue as InlineField, de as InlineForm, C as Input, P as Kbd, fe as LedgerMore, pe as LedgerRow, me as List, he as Modal, ge as OptionsMenu, F as Pagination, _e as Pill, I as Popover, L as PopoverDialog, U as PropertyList, G as PropertyRow, K as Radio, w as SegmentedControl, B as Select, f as Skeleton, ve as SortControl, j as SortMenu, R as Spinner, q as Table, z as Tag, ye as TextInput, V as Textarea, Y as Toaster, X as Toolbar, i as Tooltip, be as TypingDots, Z as TypingIndicator, T as datePresets, E as describeFilter, D as filterOperators, l as hueFor, t as iconNames, Q as initColorMode, v as saveHint, n as setIconResolver, O as sortDirections, J as toast, $ as useColorMode, s as useConfirm, ee as useForceLightMode };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sparklingopinions/sparkling-ui",
-  "version": "0.7.0",
+  "version": "0.9.1",
   "description": "A product-agnostic Vue 3 component library, themed by semantic tokens",
   "type": "module",
   "license": "MIT",

package/src/styles/tailwind.css

@@ -298,6 +298,19 @@
   --sui-radius-sheet: 1.25rem;
   /* Table rows and headers at one height, e.g. 44px; unset (initial), each Table's size decides. */
   --sui-table-row: initial;
+  /* The header row's own height, e.g. 36px over 44px rows; unset, it follows the rows. */
+  --sui-table-header: initial;
+  /* DataList rows and group headers at set heights, e.g. 44px and 40px; unset, 40px and 36px. */
+  --sui-list-row: initial;
+  --sui-list-header: initial;
+  /* Live toasts: their width, their gap to the viewport's edges, and insets an app sets to keep them clear of its own
+     chrome (a sidebar, a tab bar), per route or breakpoint. The safe area is added on top. */
+  --sui-toaster-width: 24rem;
+  --sui-toaster-margin: 1.25rem;
+  --sui-toaster-inset-top: 0px;
+  --sui-toaster-inset-right: 0px;
+  --sui-toaster-inset-bottom: 0px;
+  --sui-toaster-inset-left: 0px;
   --sui-shadow-raised: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --sui-focus-width: 2px;
   --sui-focus-offset: 2px;
@@ -364,9 +377,11 @@
   --animate-sui-sheet-in: sui-sheet-in 300ms cubic-bezier(0.32, 0.72, 0, 1);
   --animate-sui-sheet-out: sui-sheet-out 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
   --animate-sui-toast-in: sui-toast-in 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  --animate-sui-toast-in-top: sui-toast-in-top 300ms cubic-bezier(0.4, 0, 0.2, 1);
   --animate-sui-toast-out:
     sui-toast-collapse 450ms cubic-bezier(0, 1, 0, 1) forwards,
     sui-toast-fade 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  --animate-sui-toast-fade: sui-toast-fade 200ms linear forwards;
   /* Its duration is the toast's life, set inline. */
   --animate-sui-toast-timer: sui-toast-timer linear forwards;
 
@@ -457,6 +472,13 @@
     }
   }
 
+  @keyframes sui-toast-in-top {
+    from {
+      opacity: 0;
+      transform: translateY(-50%);
+    }
+  }
+
   @keyframes sui-toast-collapse {
     from {
       max-height: 1000px;