@vjdesigns/vjdesigns-ui 2.1.0 → 2.3.0

package/dist/ai/llms-full.txt

@@ -1,4 +1,4 @@
-# @vjdesigns/vjdesigns-ui 2.0.0: full reference
+# @vjdesigns/vjdesigns-ui 2.2.0: full reference
 
 > Accessible React 19 component library: WCAG 2.2 AA verified (axe on every story, a contrast check on every color pair), 31 languages with right-to-left support, themeable with any brand color (auto-adjusted to stay accessible), tree-shakable, no runtime dependencies besides React.
 
@@ -607,9 +607,9 @@ import { Avatar } from "@vjdesigns/vjdesigns-ui";
 
 Category: data-display · Storybook: Data Display/Avatar
 
-A person's picture, with a fallback chain of image, initials, then a user
-icon. Supports a presence status dot, a highlight ring, and stacking in an
-`AvatarGroup`.
+A person's photo (`src`), with a fallback chain of image, initials (from
+`name`), then a user icon, so it always shows something. Supports a border,
+a presence status dot, a highlight ring, and stacking in an `AvatarGroup`.
 
 ### Props
 
@@ -623,6 +623,7 @@ icon. Supports a presence status dot, a highlight ring, and stacking in an
 - `colorFromName`: `boolean`. Pick the fallback tone from a hash of `name`, so lists are colorful but stable.
 - `status`: `AvatarStatus`. Presence dot at the bottom-end corner. Also appended to the accessible name, e.g. "Dana Hernandez (online)".
 - `statusLabel`: `string`. Text for the status in the accessible name. Defaults to the status value ("online", "away", ...).
+- `bordered`: `boolean`. Draws a border around the avatar, e.g. to set a photo apart from a busy background or a cover image. Decorative. Its color is the `--avatar-border-color` CSS variable (default `--color-border-strong`); set it to `var(--color-surface)` for a light frame on a photo banner.
 - `ring`: `boolean`. Highlight ring (e.g. the active player). Visual only: also convey the state in text nearby or in `aria-label`.
 - `ringTone`: `Tone`. Color of the highlight ring. Uses the tone's `--color-*-border` token.
 - `decorative`: `boolean`. Hide the avatar from assistive technology. Use when the person's name is already visible next to the avatar.
@@ -633,7 +634,7 @@ icon. Supports a presence status dot, a highlight ring, and stacking in an
 
 ### Examples (Storybook stories)
 
-- Playground
+- Playground: A photo by default. Pick "None" under `src` to see initials (from `name`), and clear `name` too for the icon.
 - Sizes
 - Shapes
 - Image vs initials vs icon
@@ -642,6 +643,7 @@ icon. Supports a presence status dot, a highlight ring, and stacking in an
 - Color from name (team list)
 - Status
 - Ring (active player)
+- Bordered: `bordered` draws a border on a single avatar: for a photo, initials, or the icon. Change its color with the `--avatar-border-color` CSS variable, e.g. a light frame on a cover image (profile header). It stacks with the highlight ring and inside a group.
 - AvatarGroup
 - With name (decorative)
 - Both themes
@@ -2411,6 +2413,7 @@ announce it yourself if needed.
 - Update (progressive upload)
 - Placements
 - Queue and max
+- One viewport per store: Two providers on one store (here, one at the "app root" and one inside a Japanese `LocaleProvider`) share a single viewport: the first one mounted draws it, so toasts and the "+N more" note never appear twice. Use one provider near the root, inside your `LocaleProvider`, or give a provider its own `store={createToastStore()}` to keep separate toasts.
 - Hotkey focus (F8)
 - Pause on hover and focus
 - Announcements: Announcements go through two persistent live regions inside the viewport: `role="status"` (polite) for most tones and `role="alert"` for errors, with the tone said in words ("Success:").
@@ -2425,7 +2428,10 @@ import { ToastProvider } from "@vjdesigns/vjdesigns-ui";
 Category: feedback · Storybook: Feedback/Toast
 
 Renders the toast viewport (in a portal) and provides `useToast()`.
-Place it once near the root of your app.
+Place it once near the root of your app, inside your `LocaleProvider` so
+its built-in text (like "+2 more notifications") is in the app's language.
+Each store gets one viewport: a second provider on the same store (nested
+or not) only provides `useToast()`, so toasts are never drawn twice.
 
 Accessibility:
 - The viewport is a labelled region ("Notifications (F8)"). The hotkey

package/dist/ai/llms.txt

@@ -19,7 +19,7 @@
 ## Data-display
 
 - [Accordion](llms-full.txt#accordion): A vertically stacked set of headings that each reveal a section of content.
-- [Avatar](llms-full.txt#avatar): A person's picture, with a fallback chain of image, initials, then a user icon.
+- [Avatar](llms-full.txt#avatar): A person's photo (`src`), with a fallback chain of image, initials (from `name`), then a user icon, so it always shows something.
 - [AvatarGroup](llms-full.txt#avatargroup): Overlapping stack of avatars in a labelled `role="group"`.
 - [Badge](llms-full.txt#badge): A small, non-interactive status or label pill.
 - [BadgeAnchor](llms-full.txt#badgeanchor): Pins a count, dot, or short label to a corner of its child.

package/dist/ai/registry.json

@@ -1,6 +1,6 @@
 {
   "name": "@vjdesigns/vjdesigns-ui",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "summary": "Accessible React 19 component library: WCAG 2.2 AA verified (axe on every story, a contrast check on every color pair), 31 languages with right-to-left support, themeable with any brand color (auto-adjusted to stay accessible), tree-shakable, no runtime dependencies besides React.",
   "install": "npm install @vjdesigns/vjdesigns-ui",
   "stylesheet": "@vjdesigns/vjdesigns-ui/dist/vjdesigns-ui.css",
@@ -325,7 +325,7 @@
       "category": "data-display",
       "folder": "Avatar",
       "import": "import { Avatar } from \"@vjdesigns/vjdesigns-ui\";",
-      "description": "A person's picture, with a fallback chain of image, initials, then a user\r\nicon. Supports a presence status dot, a highlight ring, and stacking in an\r\n`AvatarGroup`.",
+      "description": "A person's photo (`src`), with a fallback chain of image, initials (from\r\n`name`), then a user icon, so it always shows something. Supports a border,\r\na presence status dot, a highlight ring, and stacking in an `AvatarGroup`.",
       "nativeElement": "span",
       "props": [
         {
@@ -388,6 +388,12 @@
           "required": false,
           "description": "Text for the status in the accessible name. Defaults to the status value (\"online\", \"away\", ...)."
         },
+        {
+          "name": "bordered",
+          "type": "boolean",
+          "required": false,
+          "description": "Draws a border around the avatar, e.g. to set a photo apart from a busy\r\nbackground or a cover image. Decorative. Its color is the\r\n`--avatar-border-color` CSS variable (default `--color-border-strong`);\r\nset it to `var(--color-surface)` for a light frame on a photo banner."
+        },
         {
           "name": "ring",
           "type": "boolean",
@@ -430,7 +436,7 @@
       "stories": [
         {
           "name": "Playground",
-          "description": ""
+          "description": "A photo by default. Pick \"None\" under `src` to see initials (from `name`), and clear `name` too for the icon."
         },
         {
           "name": "Sizes",
@@ -464,6 +470,10 @@
           "name": "Ring (active player)",
           "description": ""
         },
+        {
+          "name": "Bordered",
+          "description": "`bordered` draws a border on a single avatar: for a photo, initials, or\r\nthe icon. Change its color with the `--avatar-border-color` CSS variable,\r\ne.g. a light frame on a cover image (profile header). It stacks with the\r\nhighlight ring and inside a group."
+        },
         {
           "name": "AvatarGroup",
           "description": ""
@@ -5706,6 +5716,10 @@
           "name": "Queue and max",
           "description": ""
         },
+        {
+          "name": "One viewport per store",
+          "description": "Two providers on one store (here, one at the \"app root\" and one inside a\r\nJapanese `LocaleProvider`) share a single viewport: the first one mounted\r\ndraws it, so toasts and the \"+N more\" note never appear twice. Use one\r\nprovider near the root, inside your `LocaleProvider`, or give a provider\r\nits own `store={createToastStore()}` to keep separate toasts."
+        },
         {
           "name": "Hotkey focus (F8)",
           "description": ""
@@ -5737,7 +5751,7 @@
       "category": "feedback",
       "folder": "Toast",
       "import": "import { ToastProvider } from \"@vjdesigns/vjdesigns-ui\";",
-      "description": "Renders the toast viewport (in a portal) and provides `useToast()`.\r\nPlace it once near the root of your app.\r\n\r\nAccessibility:\r\n- The viewport is a labelled region (\"Notifications (F8)\"). The hotkey\r\n  moves focus to the newest toast; Tab moves through toasts and their\r\n  buttons; Escape closes the focused toast; focus then moves to the next\r\n  toast, or back to where it was before.\r\n- Announcements go through persistent live regions that exist before any\r\n  toast appears: `role=\"status\"` for most tones and `role=\"alert\"` for\r\n  `danger`.\r\n- Timers pause while the viewport is hovered or focused and while the\r\n  window is blurred or hidden. Toasts with an action, and `loading`\r\n  toasts, stay until dismissed by default.",
+      "description": "Renders the toast viewport (in a portal) and provides `useToast()`.\r\nPlace it once near the root of your app, inside your `LocaleProvider` so\r\nits built-in text (like \"+2 more notifications\") is in the app's language.\r\nEach store gets one viewport: a second provider on the same store (nested\r\nor not) only provides `useToast()`, so toasts are never drawn twice.\r\n\r\nAccessibility:\r\n- The viewport is a labelled region (\"Notifications (F8)\"). The hotkey\r\n  moves focus to the newest toast; Tab moves through toasts and their\r\n  buttons; Escape closes the focused toast; focus then moves to the next\r\n  toast, or back to where it was before.\r\n- Announcements go through persistent live regions that exist before any\r\n  toast appears: `role=\"status\"` for most tones and `role=\"alert\"` for\r\n  `danger`.\r\n- Timers pause while the viewport is hovered or focused and while the\r\n  window is blurred or hidden. Toasts with an action, and `loading`\r\n  toasts, stay until dismissed by default.",
       "props": [
         {
           "name": "children",

package/dist/components/data-display/Avatar/Avatar.cjs.js

@@ -1 +1 @@
-const e=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),t=require("../../../utils/cx.cjs.js"),n=require("../../primitives/Icon/icons.cjs.js"),r=require("./Avatar.module.css.cjs.js");let i=require("react"),a=require("react/jsx-runtime");function o(e){let t=Intl.Segmenter;return t?Array.from(new t(void 0,{granularity:`grapheme`}).segment(e),e=>e.segment):Array.from(e)}var s=/[\p{L}\p{N}]/u;function c(e){let t=o(e).find(e=>s.test(e));return t?t.toLocaleUpperCase():``}function l(e){if(!e)return``;let t=e.trim().split(/\s+/u).filter(e=>s.test(e));if(t.length===0)return``;let n=c(t[0]);return t.length===1?n:n+c(t[t.length-1])}var u=Object.freeze([`primary`,`accent`,`success`,`info`,`neutral`]);function d(e){let t=5381;for(let n of e.trim().toLocaleLowerCase())t=(t<<5)+t+(n.codePointAt(0)??0)|0;return u[Math.abs(t)%u.length]}var f={xs:r.default.xs,sm:r.default.sm,md:r.default.md,lg:r.default.lg,xl:r.default.xl,"2xl":r.default.size2xl},p={circle:r.default.circle,rounded:r.default.rounded,square:r.default.square},m={soft:r.default.soft,solid:r.default.solid},h={neutral:r.default.toneNeutral,primary:r.default.tonePrimary,accent:r.default.toneAccent,success:r.default.toneSuccess,warning:r.default.toneWarning,danger:r.default.toneDanger,info:r.default.toneInfo},g={neutral:r.default.ringNeutral,primary:r.default.ringPrimary,accent:r.default.ringAccent,success:r.default.ringSuccess,warning:r.default.ringWarning,danger:r.default.ringDanger,info:r.default.ringInfo},_={online:r.default.statusOnline,away:r.default.statusAway,busy:r.default.statusBusy,offline:r.default.statusOffline},v={sm:r.default.spacingSm,md:r.default.spacingMd,lg:r.default.spacingLg},y=(0,i.createContext)(null);function b({src:o,alt:s,name:c,size:u,shape:v,tone:b=`neutral`,variant:x=`soft`,colorFromName:S=!1,status:C,statusLabel:w,ring:T=!1,ringTone:E=`accent`,decorative:D=!1,icon:O,imgProps:ee,onImageStatusChange:te,className:k,"aria-label":A,"aria-labelledby":j,...M}){let N=e.useMessages(),P=(0,i.useContext)(y),ne=P?.size??u??`md`,re=v??P?.shape??`circle`,[F,I]=(0,i.useState)(null),L=o?F?.src===o?F.status:`loading`:void 0,R=e=>{!o||F?.src===o&&F.status===e||(I({src:o,status:e}),te?.(e))},{onLoad:z,onError:B,className:V,ref:H,...U}=ee??{},W=e=>{e&&e.complete&&F?.src!==o&&R(e.naturalWidth>0?`loaded`:`error`),typeof H==`function`?H(e):H&&(H.current=e)},G=e=>{R(`loaded`),z?.(e)},K=e=>{R(`error`),B?.(e)},q=l(c),J=S&&c?.trim()?d(c):b,Y=!!o&&L!==`error`,X=D||s===``&&!c,Z=s||c?.trim()||N.avatar.fallbackName,Q=C?w??N.avatar.status[C]:void 0,ie=Q?`${Z} (${Q})`:Z,ae=X&&!Q?{"aria-hidden":!0}:X?{role:`img`,"aria-label":Q}:{role:`img`,"aria-label":j?A:A===void 0?ie:(e=>Q?`${e} (${Q})`:e)(A),"aria-labelledby":j},$;return $=Y?(0,a.jsx)(`img`,{...U,ref:W,src:o,alt:``,className:t.cx(r.default.image,L===`loaded`&&r.default.imageLoaded,V),onLoad:G,onError:K}):q?(0,a.jsx)(`span`,{className:r.default.initials,children:q}):O??(0,a.jsx)(n.UserIcon,{className:r.default.icon}),(0,a.jsxs)(`span`,{...M,...ae,"data-status":C,"data-image-status":L,className:t.cx(r.default.root,f[ne],p[re],m[x],h[J],P&&r.default.inGroup,T&&r.default.ring,T&&g[E],k),children:[(0,a.jsx)(`span`,{className:r.default.face,children:$}),C&&(0,a.jsx)(`span`,{className:t.cx(r.default.status,_[C]),"aria-hidden":`true`})]})}function x({size:n=`md`,shape:o,max:s,spacing:c=`md`,surplusLabel:l,renderSurplus:u,className:d,children:m,...h}){let g=e.useMessages(),_=l??g.avatar.surplus,b=i.Children.toArray(m).filter(i.isValidElement),x=s!==void 0&&s>=0&&s<b.length?Math.floor(s):b.length,S=b.slice(0,x),C=b.slice(x),w=C.length;return(0,a.jsx)(y.Provider,{value:{size:n,shape:o},children:(0,a.jsxs)(`div`,{role:`group`,...h,className:t.cx(r.default.group,f[n],v[c],d),children:[S,w>0&&(u?u(w,C):(0,a.jsx)(`span`,{role:`img`,"aria-label":_(w),className:t.cx(r.default.root,f[n],p[o??`circle`],r.default.soft,r.default.toneNeutral,r.default.inGroup),children:(0,a.jsx)(`span`,{className:r.default.face,children:(0,a.jsxs)(`span`,{className:t.cx(r.default.initials,r.default.surplus),"aria-hidden":`true`,children:[`+`,w]})})}))]})})}exports.Avatar=b,exports.AvatarGroup=x,exports.avatarNameTones=u,exports.avatarToneFromName=d,exports.getInitials=l;
+const e=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),t=require("../../../utils/cx.cjs.js"),n=require("../../primitives/Icon/icons.cjs.js"),r=require("./Avatar.module.css.cjs.js");let i=require("react"),a=require("react/jsx-runtime");function o(e){let t=Intl.Segmenter;return t?Array.from(new t(void 0,{granularity:`grapheme`}).segment(e),e=>e.segment):Array.from(e)}var s=/[\p{L}\p{N}]/u;function c(e){let t=o(e).find(e=>s.test(e));return t?t.toLocaleUpperCase():``}function l(e){if(!e)return``;let t=e.trim().split(/\s+/u).filter(e=>s.test(e));if(t.length===0)return``;let n=c(t[0]);return t.length===1?n:n+c(t[t.length-1])}var u=Object.freeze([`primary`,`accent`,`success`,`info`,`neutral`]);function d(e){let t=5381;for(let n of e.trim().toLocaleLowerCase())t=(t<<5)+t+(n.codePointAt(0)??0)|0;return u[Math.abs(t)%u.length]}var f={xs:r.default.xs,sm:r.default.sm,md:r.default.md,lg:r.default.lg,xl:r.default.xl,"2xl":r.default.size2xl},p={circle:r.default.circle,rounded:r.default.rounded,square:r.default.square},m={soft:r.default.soft,solid:r.default.solid},h={neutral:r.default.toneNeutral,primary:r.default.tonePrimary,accent:r.default.toneAccent,success:r.default.toneSuccess,warning:r.default.toneWarning,danger:r.default.toneDanger,info:r.default.toneInfo},g={neutral:r.default.ringNeutral,primary:r.default.ringPrimary,accent:r.default.ringAccent,success:r.default.ringSuccess,warning:r.default.ringWarning,danger:r.default.ringDanger,info:r.default.ringInfo},_={online:r.default.statusOnline,away:r.default.statusAway,busy:r.default.statusBusy,offline:r.default.statusOffline},v={sm:r.default.spacingSm,md:r.default.spacingMd,lg:r.default.spacingLg},y=(0,i.createContext)(null);function b({src:o,alt:s,name:c,size:u,shape:v,tone:b=`neutral`,variant:x=`soft`,colorFromName:S=!1,status:C,statusLabel:w,bordered:T=!1,ring:E=!1,ringTone:D=`accent`,decorative:ee=!1,icon:te,imgProps:O,onImageStatusChange:k,className:A,"aria-label":j,"aria-labelledby":M,...N}){let P=e.useMessages(),F=(0,i.useContext)(y),ne=F?.size??u??`md`,re=v??F?.shape??`circle`,[I,L]=(0,i.useState)(null),R=o?I?.src===o?I.status:`loading`:void 0,z=e=>{!o||I?.src===o&&I.status===e||(L({src:o,status:e}),k?.(e))},{onLoad:B,onError:V,className:H,ref:U,...W}=O??{},G=e=>{e&&e.complete&&I?.src!==o&&z(e.naturalWidth>0?`loaded`:`error`),typeof U==`function`?U(e):U&&(U.current=e)},K=e=>{z(`loaded`),B?.(e)},q=e=>{z(`error`),V?.(e)},J=l(c),Y=S&&c?.trim()?d(c):b,ie=!!o&&R!==`error`,X=ee||s===``&&!c,Z=s||c?.trim()||P.avatar.fallbackName,Q=C?w??P.avatar.status[C]:void 0,ae=Q?`${Z} (${Q})`:Z,oe=X&&!Q?{"aria-hidden":!0}:X?{role:`img`,"aria-label":Q}:{role:`img`,"aria-label":M?j:j===void 0?ae:(e=>Q?`${e} (${Q})`:e)(j),"aria-labelledby":M},$;return $=ie?(0,a.jsx)(`img`,{...W,ref:G,src:o,alt:``,className:t.cx(r.default.image,R===`loaded`&&r.default.imageLoaded,H),onLoad:K,onError:q}):J?(0,a.jsx)(`span`,{className:r.default.initials,children:J}):te??(0,a.jsx)(n.UserIcon,{className:r.default.icon}),(0,a.jsxs)(`span`,{...N,...oe,"data-status":C,"data-image-status":R,className:t.cx(r.default.root,f[ne],p[re],m[x],h[Y],F&&r.default.inGroup,T&&r.default.bordered,E&&r.default.ring,E&&g[D],A),children:[(0,a.jsx)(`span`,{className:r.default.face,children:$}),C&&(0,a.jsx)(`span`,{className:t.cx(r.default.status,_[C]),"aria-hidden":`true`})]})}function x({size:n=`md`,shape:o,max:s,spacing:c=`md`,surplusLabel:l,renderSurplus:u,className:d,children:m,...h}){let g=e.useMessages(),_=l??g.avatar.surplus,b=i.Children.toArray(m).filter(i.isValidElement),x=s!==void 0&&s>=0&&s<b.length?Math.floor(s):b.length,S=b.slice(0,x),C=b.slice(x),w=C.length;return(0,a.jsx)(y.Provider,{value:{size:n,shape:o},children:(0,a.jsxs)(`div`,{role:`group`,...h,className:t.cx(r.default.group,f[n],v[c],d),children:[S,w>0&&(u?u(w,C):(0,a.jsx)(`span`,{role:`img`,"aria-label":_(w),className:t.cx(r.default.root,f[n],p[o??`circle`],r.default.soft,r.default.toneNeutral,r.default.inGroup),children:(0,a.jsx)(`span`,{className:r.default.face,children:(0,a.jsxs)(`span`,{className:t.cx(r.default.initials,r.default.surplus),"aria-hidden":`true`,children:[`+`,w]})})}))]})})}exports.Avatar=b,exports.AvatarGroup=x,exports.avatarNameTones=u,exports.avatarToneFromName=d,exports.getInitials=l;

package/dist/components/data-display/Avatar/Avatar.d.ts

@@ -54,6 +54,13 @@ export interface AvatarProps extends Omit<ComponentPropsWithRef<"span">, "childr
     status?: AvatarStatus;
     /** Text for the status in the accessible name. Defaults to the status value ("online", "away", ...). */
     statusLabel?: string;
+    /**
+     * Draws a border around the avatar, e.g. to set a photo apart from a busy
+     * background or a cover image. Decorative. Its color is the
+     * `--avatar-border-color` CSS variable (default `--color-border-strong`);
+     * set it to `var(--color-surface)` for a light frame on a photo banner.
+     */
+    bordered?: boolean;
     /**
      * Highlight ring (e.g. the active player). Visual only: also convey the
      * state in text nearby or in `aria-label`.
@@ -74,11 +81,11 @@ export interface AvatarProps extends Omit<ComponentPropsWithRef<"span">, "childr
     onImageStatusChange?: (status: AvatarImageStatus) => void;
 }
 /**
- * A person's picture, with a fallback chain of image, initials, then a user
- * icon. Supports a presence status dot, a highlight ring, and stacking in an
- * `AvatarGroup`.
+ * A person's photo (`src`), with a fallback chain of image, initials (from
+ * `name`), then a user icon, so it always shows something. Supports a border,
+ * a presence status dot, a highlight ring, and stacking in an `AvatarGroup`.
  */
-export declare function Avatar({ src, alt, name, size, shape, tone, variant, colorFromName, status, statusLabel, ring, ringTone, decorative, icon, imgProps, onImageStatusChange, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: AvatarProps): import("react").JSX.Element;
+export declare function Avatar({ src, alt, name, size, shape, tone, variant, colorFromName, status, statusLabel, bordered, ring, ringTone, decorative, icon, imgProps, onImageStatusChange, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: AvatarProps): import("react").JSX.Element;
 type AvatarGroupName = {
     /** Accessible name for the group, e.g. "Starting lineup". */
     "aria-label": string;

package/dist/components/data-display/Avatar/Avatar.mjs

@@ -73,27 +73,27 @@ var _ = {
 	md: r.spacingMd,
 	lg: r.spacingLg
 }, w = a(null);
-function T({ src: i, alt: a, name: o, size: d, shape: f, tone: p = "neutral", variant: h = "soft", colorFromName: C = !1, status: T, statusLabel: E, ring: D = !1, ringTone: O = "accent", decorative: k = !1, icon: A, imgProps: ee, onImageStatusChange: te, className: j, "aria-label": M, "aria-labelledby": N, ...P }) {
-	let F = e(), I = s(w), ne = I?.size ?? d ?? "md", re = f ?? I?.shape ?? "circle", [L, R] = c(null), z = i ? L?.src === i ? L.status : "loading" : void 0, B = (e) => {
+function T({ src: i, alt: a, name: o, size: d, shape: f, tone: p = "neutral", variant: h = "soft", colorFromName: C = !1, status: T, statusLabel: E, bordered: D = !1, ring: O = !1, ringTone: k = "accent", decorative: ee = !1, icon: te, imgProps: A, onImageStatusChange: j, className: M, "aria-label": N, "aria-labelledby": P, ...ne }) {
+	let F = e(), I = s(w), re = I?.size ?? d ?? "md", ie = f ?? I?.shape ?? "circle", [L, R] = c(null), z = i ? L?.src === i ? L.status : "loading" : void 0, B = (e) => {
 		!i || L?.src === i && L.status === e || (R({
 			src: i,
 			status: e
-		}), te?.(e));
-	}, { onLoad: V, onError: H, className: U, ref: W, ...G } = ee ?? {}, K = (e) => {
+		}), j?.(e));
+	}, { onLoad: V, onError: H, className: U, ref: W, ...G } = A ?? {}, K = (e) => {
 		e && e.complete && L?.src !== i && B(e.naturalWidth > 0 ? "loaded" : "error"), typeof W == "function" ? W(e) : W && (W.current = e);
 	}, q = (e) => {
 		B("loaded"), V?.(e);
 	}, J = (e) => {
 		B("error"), H?.(e);
-	}, Y = m(o), ie = C && o?.trim() ? g(o) : p, ae = !!i && z !== "error", X = k || a === "" && !o, Z = a || o?.trim() || F.avatar.fallbackName, Q = T ? E ?? F.avatar.status[T] : void 0, oe = Q ? `${Z} (${Q})` : Z, se = X && !Q ? { "aria-hidden": !0 } : X ? {
+	}, Y = m(o), ae = C && o?.trim() ? g(o) : p, oe = !!i && z !== "error", X = ee || a === "" && !o, Z = a || o?.trim() || F.avatar.fallbackName, Q = T ? E ?? F.avatar.status[T] : void 0, se = Q ? `${Z} (${Q})` : Z, ce = X && !Q ? { "aria-hidden": !0 } : X ? {
 		role: "img",
 		"aria-label": Q
 	} : {
 		role: "img",
-		"aria-label": N ? M : M === void 0 ? oe : ((e) => Q ? `${e} (${Q})` : e)(M),
-		"aria-labelledby": N
+		"aria-label": P ? N : N === void 0 ? se : ((e) => Q ? `${e} (${Q})` : e)(N),
+		"aria-labelledby": P
 	}, $;
-	return $ = ae ? /* @__PURE__ */ l("img", {
+	return $ = oe ? /* @__PURE__ */ l("img", {
 		...G,
 		ref: K,
 		src: i,
@@ -104,12 +104,12 @@ function T({ src: i, alt: a, name: o, size: d, shape: f, tone: p = "neutral", va
 	}) : Y ? /* @__PURE__ */ l("span", {
 		className: r.initials,
 		children: Y
-	}) : A ?? /* @__PURE__ */ l(n, { className: r.icon }), /* @__PURE__ */ u("span", {
-		...P,
-		...se,
+	}) : te ?? /* @__PURE__ */ l(n, { className: r.icon }), /* @__PURE__ */ u("span", {
+		...ne,
+		...ce,
 		"data-status": T,
 		"data-image-status": z,
-		className: t(r.root, _[ne], v[re], y[h], b[ie], I && r.inGroup, D && r.ring, D && x[O], j),
+		className: t(r.root, _[re], v[ie], y[h], b[ae], I && r.inGroup, D && r.bordered, O && r.ring, O && x[k], M),
 		children: [/* @__PURE__ */ l("span", {
 			className: r.face,
 			children: $

package/dist/components/data-display/Avatar/Avatar.module.css.cjs.js

@@ -1 +1 @@
-var e=`_root_qebz0_25`,t=`_face_qebz0_61`,n=`_xs_qebz0_89`,r=`_sm_qebz0_97`,i=`_md_qebz0_105`,a=`_lg_qebz0_113`,o=`_xl_qebz0_121`,s=`_size2xl_qebz0_129`,c=`_circle_qebz0_141`,l=`_rounded_qebz0_147`,u=`_square_qebz0_153`,d=`_soft_qebz0_165`,f=`_toneNeutral_qebz0_165`,p=`_tonePrimary_qebz0_167`,m=`_toneAccent_qebz0_169`,h=`_toneSuccess_qebz0_171`,g=`_toneWarning_qebz0_173`,_=`_toneDanger_qebz0_175`,v=`_toneInfo_qebz0_177`,y=`_solid_qebz0_181`,b=`_image_qebz0_213`,x=`_imageLoaded_qebz0_233`,S=`_initials_qebz0_241`,C=`_surplus_qebz0_259`,w=`_icon_qebz0_269`,T=`_inGroup_qebz0_283`,E=`_ring_qebz0_291`,D=`_ringNeutral_qebz0_305`,O=`_ringPrimary_qebz0_307`,k=`_ringAccent_qebz0_309`,A=`_ringSuccess_qebz0_311`,j=`_ringWarning_qebz0_313`,M=`_ringDanger_qebz0_315`,N=`_ringInfo_qebz0_317`,P=`_status_qebz0_335`,F=`_statusOnline_qebz0_377`,I=`_statusAway_qebz0_385`,L=`_statusBusy_qebz0_417`,R=`_statusOffline_qebz0_447`,z=`_group_qebz0_467`,B=`_spacingSm_qebz0_495`,V=`_spacingMd_qebz0_501`,H=`_spacingLg_qebz0_507`,U={root:e,face:t,xs:n,sm:r,md:i,lg:a,xl:o,size2xl:s,circle:c,rounded:l,square:u,soft:d,toneNeutral:f,tonePrimary:p,toneAccent:m,toneSuccess:h,toneWarning:g,toneDanger:_,toneInfo:v,solid:y,image:b,imageLoaded:x,initials:S,surplus:C,icon:w,inGroup:T,ring:E,ringNeutral:D,ringPrimary:O,ringAccent:k,ringSuccess:A,ringWarning:j,ringDanger:M,ringInfo:N,status:P,statusOnline:F,statusAway:I,statusBusy:L,statusOffline:R,group:z,spacingSm:B,spacingMd:V,spacingLg:H};exports.circle=c,exports.default=U,exports.face=t,exports.group=z,exports.icon=w,exports.image=b,exports.imageLoaded=x,exports.inGroup=T,exports.initials=S,exports.lg=a,exports.md=i,exports.ring=E,exports.ringAccent=k,exports.ringDanger=M,exports.ringInfo=N,exports.ringNeutral=D,exports.ringPrimary=O,exports.ringSuccess=A,exports.ringWarning=j,exports.root=e,exports.rounded=l,exports.size2xl=s,exports.sm=r,exports.soft=d,exports.solid=y,exports.spacingLg=H,exports.spacingMd=V,exports.spacingSm=B,exports.square=u,exports.status=P,exports.statusAway=I,exports.statusBusy=L,exports.statusOffline=R,exports.statusOnline=F,exports.surplus=C,exports.toneAccent=m,exports.toneDanger=_,exports.toneInfo=v,exports.toneNeutral=f,exports.tonePrimary=p,exports.toneSuccess=h,exports.toneWarning=g,exports.xl=o,exports.xs=n;
+var e=`_root_1mppz_29`,t=`_face_1mppz_65`,n=`_xs_1mppz_93`,r=`_sm_1mppz_101`,i=`_md_1mppz_109`,a=`_lg_1mppz_117`,o=`_xl_1mppz_125`,s=`_size2xl_1mppz_133`,c=`_circle_1mppz_145`,l=`_rounded_1mppz_151`,u=`_square_1mppz_157`,d=`_soft_1mppz_169`,f=`_toneNeutral_1mppz_169`,p=`_tonePrimary_1mppz_171`,m=`_toneAccent_1mppz_173`,h=`_toneSuccess_1mppz_175`,g=`_toneWarning_1mppz_177`,_=`_toneDanger_1mppz_179`,v=`_toneInfo_1mppz_181`,y=`_solid_1mppz_185`,b=`_image_1mppz_217`,x=`_imageLoaded_1mppz_237`,S=`_initials_1mppz_245`,C=`_surplus_1mppz_263`,w=`_icon_1mppz_273`,T=`_inGroup_1mppz_287`,E=`_ring_1mppz_295`,D=`_bordered_1mppz_313`,O=`_ringNeutral_1mppz_349`,k=`_ringPrimary_1mppz_351`,A=`_ringAccent_1mppz_353`,j=`_ringSuccess_1mppz_355`,M=`_ringWarning_1mppz_357`,N=`_ringDanger_1mppz_359`,P=`_ringInfo_1mppz_361`,F=`_status_1mppz_379`,I=`_statusOnline_1mppz_421`,L=`_statusAway_1mppz_429`,R=`_statusBusy_1mppz_461`,z=`_statusOffline_1mppz_491`,B=`_group_1mppz_511`,V=`_spacingSm_1mppz_539`,H=`_spacingMd_1mppz_545`,U=`_spacingLg_1mppz_551`,W={root:e,face:t,xs:n,sm:r,md:i,lg:a,xl:o,size2xl:s,circle:c,rounded:l,square:u,soft:d,toneNeutral:f,tonePrimary:p,toneAccent:m,toneSuccess:h,toneWarning:g,toneDanger:_,toneInfo:v,solid:y,image:b,imageLoaded:x,initials:S,surplus:C,icon:w,inGroup:T,ring:E,bordered:D,ringNeutral:O,ringPrimary:k,ringAccent:A,ringSuccess:j,ringWarning:M,ringDanger:N,ringInfo:P,status:F,statusOnline:I,statusAway:L,statusBusy:R,statusOffline:z,group:B,spacingSm:V,spacingMd:H,spacingLg:U};exports.bordered=D,exports.circle=c,exports.default=W,exports.face=t,exports.group=B,exports.icon=w,exports.image=b,exports.imageLoaded=x,exports.inGroup=T,exports.initials=S,exports.lg=a,exports.md=i,exports.ring=E,exports.ringAccent=A,exports.ringDanger=N,exports.ringInfo=P,exports.ringNeutral=O,exports.ringPrimary=k,exports.ringSuccess=j,exports.ringWarning=M,exports.root=e,exports.rounded=l,exports.size2xl=s,exports.sm=r,exports.soft=d,exports.solid=y,exports.spacingLg=U,exports.spacingMd=H,exports.spacingSm=V,exports.square=u,exports.status=F,exports.statusAway=L,exports.statusBusy=R,exports.statusOffline=z,exports.statusOnline=I,exports.surplus=C,exports.toneAccent=m,exports.toneDanger=_,exports.toneInfo=v,exports.toneNeutral=f,exports.tonePrimary=p,exports.toneSuccess=h,exports.toneWarning=g,exports.xl=o,exports.xs=n;

package/dist/components/data-display/Avatar/Avatar.module.css.mjs

@@ -1,5 +1,5 @@
 //#region src/components/data-display/Avatar/Avatar.module.css
-var e = "_root_qebz0_25", t = "_face_qebz0_61", n = "_xs_qebz0_89", r = "_sm_qebz0_97", i = "_md_qebz0_105", a = "_lg_qebz0_113", o = "_xl_qebz0_121", s = "_size2xl_qebz0_129", c = "_circle_qebz0_141", l = "_rounded_qebz0_147", u = "_square_qebz0_153", d = "_soft_qebz0_165", f = "_toneNeutral_qebz0_165", p = "_tonePrimary_qebz0_167", m = "_toneAccent_qebz0_169", h = "_toneSuccess_qebz0_171", g = "_toneWarning_qebz0_173", _ = "_toneDanger_qebz0_175", v = "_toneInfo_qebz0_177", y = "_solid_qebz0_181", b = "_image_qebz0_213", x = "_imageLoaded_qebz0_233", S = "_initials_qebz0_241", C = "_surplus_qebz0_259", w = "_icon_qebz0_269", T = "_inGroup_qebz0_283", E = "_ring_qebz0_291", D = "_ringNeutral_qebz0_305", O = "_ringPrimary_qebz0_307", k = "_ringAccent_qebz0_309", A = "_ringSuccess_qebz0_311", j = "_ringWarning_qebz0_313", M = "_ringDanger_qebz0_315", N = "_ringInfo_qebz0_317", P = "_status_qebz0_335", F = "_statusOnline_qebz0_377", I = "_statusAway_qebz0_385", L = "_statusBusy_qebz0_417", R = "_statusOffline_qebz0_447", z = "_group_qebz0_467", B = "_spacingSm_qebz0_495", V = "_spacingMd_qebz0_501", H = "_spacingLg_qebz0_507", U = {
+var e = "_root_1mppz_29", t = "_face_1mppz_65", n = "_xs_1mppz_93", r = "_sm_1mppz_101", i = "_md_1mppz_109", a = "_lg_1mppz_117", o = "_xl_1mppz_125", s = "_size2xl_1mppz_133", c = "_circle_1mppz_145", l = "_rounded_1mppz_151", u = "_square_1mppz_157", d = "_soft_1mppz_169", f = "_toneNeutral_1mppz_169", p = "_tonePrimary_1mppz_171", m = "_toneAccent_1mppz_173", h = "_toneSuccess_1mppz_175", g = "_toneWarning_1mppz_177", _ = "_toneDanger_1mppz_179", v = "_toneInfo_1mppz_181", y = "_solid_1mppz_185", b = "_image_1mppz_217", x = "_imageLoaded_1mppz_237", S = "_initials_1mppz_245", C = "_surplus_1mppz_263", w = "_icon_1mppz_273", T = "_inGroup_1mppz_287", E = "_ring_1mppz_295", D = "_bordered_1mppz_313", O = "_ringNeutral_1mppz_349", k = "_ringPrimary_1mppz_351", A = "_ringAccent_1mppz_353", j = "_ringSuccess_1mppz_355", M = "_ringWarning_1mppz_357", N = "_ringDanger_1mppz_359", P = "_ringInfo_1mppz_361", F = "_status_1mppz_379", I = "_statusOnline_1mppz_421", L = "_statusAway_1mppz_429", R = "_statusBusy_1mppz_461", z = "_statusOffline_1mppz_491", B = "_group_1mppz_511", V = "_spacingSm_1mppz_539", H = "_spacingMd_1mppz_545", U = "_spacingLg_1mppz_551", W = {
 	root: e,
 	face: t,
 	xs: n,
@@ -27,22 +27,23 @@ var e = "_root_qebz0_25", t = "_face_qebz0_61", n = "_xs_qebz0_89", r = "_sm_qeb
 	icon: w,
 	inGroup: T,
 	ring: E,
-	ringNeutral: D,
-	ringPrimary: O,
-	ringAccent: k,
-	ringSuccess: A,
-	ringWarning: j,
-	ringDanger: M,
-	ringInfo: N,
-	status: P,
-	statusOnline: F,
-	statusAway: I,
-	statusBusy: L,
-	statusOffline: R,
-	group: z,
-	spacingSm: B,
-	spacingMd: V,
-	spacingLg: H
+	bordered: D,
+	ringNeutral: O,
+	ringPrimary: k,
+	ringAccent: A,
+	ringSuccess: j,
+	ringWarning: M,
+	ringDanger: N,
+	ringInfo: P,
+	status: F,
+	statusOnline: I,
+	statusAway: L,
+	statusBusy: R,
+	statusOffline: z,
+	group: B,
+	spacingSm: V,
+	spacingMd: H,
+	spacingLg: U
 };
 //#endregion
-export { c as circle, U as default, t as face, z as group, w as icon, b as image, x as imageLoaded, T as inGroup, S as initials, a as lg, i as md, E as ring, k as ringAccent, M as ringDanger, N as ringInfo, D as ringNeutral, O as ringPrimary, A as ringSuccess, j as ringWarning, e as root, l as rounded, s as size2xl, r as sm, d as soft, y as solid, H as spacingLg, V as spacingMd, B as spacingSm, u as square, P as status, I as statusAway, L as statusBusy, R as statusOffline, F as statusOnline, C as surplus, m as toneAccent, _ as toneDanger, v as toneInfo, f as toneNeutral, p as tonePrimary, h as toneSuccess, g as toneWarning, o as xl, n as xs };
+export { D as bordered, c as circle, W as default, t as face, B as group, w as icon, b as image, x as imageLoaded, T as inGroup, S as initials, a as lg, i as md, E as ring, A as ringAccent, N as ringDanger, P as ringInfo, O as ringNeutral, k as ringPrimary, j as ringSuccess, M as ringWarning, e as root, l as rounded, s as size2xl, r as sm, d as soft, y as solid, U as spacingLg, H as spacingMd, V as spacingSm, u as square, F as status, L as statusAway, R as statusBusy, z as statusOffline, I as statusOnline, C as surplus, m as toneAccent, _ as toneDanger, v as toneInfo, f as toneNeutral, p as tonePrimary, h as toneSuccess, g as toneWarning, o as xl, n as xs };

package/dist/components/feedback/Toast/ToastProvider.cjs.js

@@ -1 +1 @@
-const e=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),t=require("./toastStore.cjs.js"),n=require("./useToast.cjs.js"),r=require("./ToastViewport.cjs.js");let i=require("react"),a=require("react/jsx-runtime");var o=[`F8`],s=({children:s,store:c=t.toastStore,placement:l=`bottom-end`,max:u=3,duration:d=5e3,gap:f=3,label:p,hotkey:m=o,showProgress:h=!1,toneLabels:g,closeLabel:_,queuedLabel:v,className:y})=>{let b=e.useMessages(),x=p??b.toast.region,S=_??b.toast.dismiss,C=v??b.toast.queued,w=(0,i.useMemo)(()=>({store:c,api:c===t.toastStore?t.toast:t.createToastApi(c)}),[c]),T=(0,i.useMemo)(()=>({neutral:``,...b.toast.tone,...g}),[b.toast.tone,g]);return(0,a.jsxs)(n.ToastContext.Provider,{value:w,children:[s,(0,a.jsx)(r.ToastViewport,{store:c,placement:l,max:u,duration:d,gap:f,label:x,hotkey:m,showProgress:h,toneLabels:T,closeLabel:S,queuedLabel:C,className:y})]})};exports.ToastProvider=s;
+const e=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),t=require("./toastStore.cjs.js"),n=require("./useToast.cjs.js"),r=require("./ToastViewport.cjs.js");let i=require("react"),a=require("react/jsx-runtime");var o=[`F8`],s=globalThis.process?.env?.NODE_ENV!==`production`,c=typeof window<`u`?i.useLayoutEffect:i.useEffect,l=new Map,u=new Set,d=e=>(u.add(e),()=>{u.delete(e)}),f=()=>u.forEach(e=>e());function p(e,t){let[n]=(0,i.useState)(()=>Symbol(`ToastProvider`));return c(()=>{if(t)return;let r=l.get(e)??[];return s&&r.length>0&&console.warn("[ToastProvider] Another ToastProvider already shows this store's toasts, so this one won't draw a second viewport. Use one ToastProvider near the root of your app (inside your LocaleProvider), or pass `store={createToastStore()}` to keep separate toasts."),l.set(e,[...r,n]),f(),()=>{let t=(l.get(e)??[]).filter(e=>e!==n);t.length>0?l.set(e,t):l.delete(e),f()}},[e,t,n]),(0,i.useSyncExternalStore)(d,()=>!t&&l.get(e)?.[0]===n,()=>!t)}var m=({children:s,store:c=t.toastStore,placement:l=`bottom-end`,max:u=3,duration:d=5e3,gap:f=3,label:m,hotkey:h=o,showProgress:g=!1,toneLabels:_,closeLabel:v,queuedLabel:y,className:b})=>{let x=e.useMessages(),S=p(c,(0,i.useContext)(n.ToastContext)?.store===c),C=m??x.toast.region,w=v??x.toast.dismiss,T=y??x.toast.queued,E=(0,i.useMemo)(()=>({store:c,api:c===t.toastStore?t.toast:t.createToastApi(c)}),[c]),D=(0,i.useMemo)(()=>({neutral:``,...x.toast.tone,..._}),[x.toast.tone,_]);return(0,a.jsxs)(n.ToastContext.Provider,{value:E,children:[s,S&&(0,a.jsx)(r.ToastViewport,{store:c,placement:l,max:u,duration:d,gap:f,label:C,hotkey:h,showProgress:g,toneLabels:D,closeLabel:w,queuedLabel:T,className:b})]})};exports.ToastProvider=m;

package/dist/components/feedback/Toast/ToastProvider.d.ts

@@ -45,7 +45,10 @@ export interface ToastProviderProps {
 }
 /**
  * Renders the toast viewport (in a portal) and provides `useToast()`.
- * Place it once near the root of your app.
+ * Place it once near the root of your app, inside your `LocaleProvider` so
+ * its built-in text (like "+2 more notifications") is in the app's language.
+ * Each store gets one viewport: a second provider on the same store (nested
+ * or not) only provides `useToast()`, so toasts are never drawn twice.
  *
  * Accessibility:
  * - The viewport is a labelled region ("Notifications (F8)"). The hotkey

package/dist/components/feedback/Toast/ToastProvider.mjs

@@ -2,35 +2,53 @@ import { useMessages as e } from "../../utilities/LocaleProvider/LocaleProvider.
 import { createToastApi as t, toast as n, toastStore as r } from "./toastStore.mjs";
 import { ToastContext as i } from "./useToast.mjs";
 import { ToastViewport as a } from "./ToastViewport.mjs";
-import { useMemo as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useContext as o, useEffect as s, useLayoutEffect as c, useMemo as l, useState as u, useSyncExternalStore as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/feedback/Toast/ToastProvider.tsx
-var l = ["F8"], u = ({ children: u, store: d = r, placement: f = "bottom-end", max: p = 3, duration: m = 5e3, gap: h = 3, label: g, hotkey: _ = l, showProgress: v = !1, toneLabels: y, closeLabel: b, queuedLabel: x, className: S }) => {
-	let C = e(), w = g ?? C.toast.region, T = b ?? C.toast.dismiss, E = x ?? C.toast.queued, D = o(() => ({
-		store: d,
-		api: d === r ? n : t(d)
-	}), [d]), O = o(() => ({
+var m = ["F8"], h = globalThis.process?.env?.NODE_ENV !== "production", g = typeof window < "u" ? c : s, _ = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new Set(), y = (e) => (v.add(e), () => {
+	v.delete(e);
+}), b = () => v.forEach((e) => e());
+function x(e, t) {
+	let [n] = u(() => Symbol("ToastProvider"));
+	return g(() => {
+		if (t) return;
+		let r = _.get(e) ?? [];
+		return h && r.length > 0 && console.warn("[ToastProvider] Another ToastProvider already shows this store's toasts, so this one won't draw a second viewport. Use one ToastProvider near the root of your app (inside your LocaleProvider), or pass `store={createToastStore()}` to keep separate toasts."), _.set(e, [...r, n]), b(), () => {
+			let t = (_.get(e) ?? []).filter((e) => e !== n);
+			t.length > 0 ? _.set(e, t) : _.delete(e), b();
+		};
+	}, [
+		e,
+		t,
+		n
+	]), d(y, () => !t && _.get(e)?.[0] === n, () => !t);
+}
+var S = ({ children: s, store: c = r, placement: u = "bottom-end", max: d = 3, duration: h = 5e3, gap: g = 3, label: _, hotkey: v = m, showProgress: y = !1, toneLabels: b, closeLabel: S, queuedLabel: C, className: w }) => {
+	let T = e(), E = x(c, o(i)?.store === c), D = _ ?? T.toast.region, O = S ?? T.toast.dismiss, k = C ?? T.toast.queued, A = l(() => ({
+		store: c,
+		api: c === r ? n : t(c)
+	}), [c]), j = l(() => ({
 		neutral: "",
-		...C.toast.tone,
-		...y
-	}), [C.toast.tone, y]);
-	return /* @__PURE__ */ c(i.Provider, {
-		value: D,
-		children: [u, /* @__PURE__ */ s(a, {
-			store: d,
-			placement: f,
-			max: p,
-			duration: m,
-			gap: h,
-			label: w,
-			hotkey: _,
-			showProgress: v,
-			toneLabels: O,
-			closeLabel: T,
-			queuedLabel: E,
-			className: S
+		...T.toast.tone,
+		...b
+	}), [T.toast.tone, b]);
+	return /* @__PURE__ */ p(i.Provider, {
+		value: A,
+		children: [s, E && /* @__PURE__ */ f(a, {
+			store: c,
+			placement: u,
+			max: d,
+			duration: h,
+			gap: g,
+			label: D,
+			hotkey: v,
+			showProgress: y,
+			toneLabels: j,
+			closeLabel: O,
+			queuedLabel: k,
+			className: w
 		})]
 	});
 };
 //#endregion
-export { u as ToastProvider };
+export { S as ToastProvider };