@juspay/svelte-ui-components 4.19.0 → 4.20.0

package/dist/Card/Card.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { CardProperties } from './properties';
+  import { CARD_MANAGED_ATTRS, discardedAttrWarnings } from '../attrs-discard';
 
   let {
     children,
@@ -22,6 +23,27 @@
     as
   }: CardProperties = $props();
 
+  /*
+   * The runtime half of the `attrs` deprecation (#576). The `@deprecated`
+   * markers on the managed keys only reach someone reading TypeScript; a
+   * plain-JS caller, or anyone driving this as a web component, has no types
+   * and would otherwise still get silence.
+   *
+   * Dev builds only: this is an authoring aid, and warning on every production
+   * render would be noise nobody asked for. `import.meta.env` is absent under
+   * bundlers that do not define it, so the guard reads it defensively and stays
+   * quiet there rather than throwing.
+   *
+   * Deliberately at init rather than in an `$effect`, which this repo bans:
+   * once per mounted instance is what a consumer needs to act on, and it costs
+   * nothing on subsequent updates.
+   */
+  if (import.meta.env?.DEV === true) {
+    for (const message of discardedAttrWarnings('Card', CARD_MANAGED_ATTRS, attrs)) {
+      console.warn(message);
+    }
+  }
+
   // `as`, when given, picks the rendered tag outright. Omitted, the root keeps
   // its existing rule: an `<a>` exactly when `href` is set, a `<div>`
   // otherwise -- so a consumer who never passes `as` gets the identical tag

package/dist/Combobox/Combobox.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { ComboboxProperties } from './properties';
 declare const Combobox: import("svelte").Component<ComboboxProperties, {
     getInputRef: () => HTMLInputElement | HTMLTextAreaElement | null;
-}, "open" | "value" | "selected" | "inputValue" | "highlightedIndex">;
+}, "value" | "open" | "selected" | "inputValue" | "highlightedIndex">;
 type Combobox = ReturnType<typeof Combobox>;
 export default Combobox;

package/dist/Pill/Pill.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { PillProperties } from './properties';
+  import { PILL_MANAGED_ATTRS, discardedAttrWarnings } from '../attrs-discard';
   import Button from '../Button/Button.svelte';
   import closeSvg from '../assets/close.svg?raw';
   import { pillToneClass } from './pillTone';
@@ -23,6 +24,27 @@
     attrs
   }: PillProperties = $props();
 
+  /*
+   * The runtime half of the `attrs` deprecation (#576). The `@deprecated`
+   * markers on the managed keys only reach someone reading TypeScript; a
+   * plain-JS caller, or anyone driving this as a web component, has no types
+   * and would otherwise still get silence.
+   *
+   * Dev builds only: this is an authoring aid, and warning on every production
+   * render would be noise nobody asked for. `import.meta.env` is absent under
+   * bundlers that do not define it, so the guard reads it defensively and stays
+   * quiet there rather than throwing.
+   *
+   * Deliberately at init rather than in an `$effect`, which this repo bans:
+   * once per mounted instance is what a consumer needs to act on, and it costs
+   * nothing on subsequent updates.
+   */
+  if (import.meta.env?.DEV === true) {
+    for (const message of discardedAttrWarnings('Pill', PILL_MANAGED_ATTRS, attrs)) {
+      console.warn(message);
+    }
+  }
+
   let interactive = $derived(typeof onclick === 'function');
 
   // A <button> may not contain another button, and a dismissible pill is inherently two

package/dist/Select/Select.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { SelectProperties } from './properties';
-declare const Select: import("svelte").Component<SelectProperties, {}, "open" | "value">;
+declare const Select: import("svelte").Component<SelectProperties, {}, "value" | "open">;
 type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/attrs-discard.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Runtime counterpart to the `@deprecated` markers on `attrs` (#576).
+ *
+ * Both Card and Pill spread `attrs` onto their root FIRST and write their own
+ * managed attributes after, so an entry for a managed key is accepted, spread,
+ * and then overwritten. 4.19.0 made that visible in the type by deprecating
+ * those keys, which reaches someone reading TypeScript in an editor and nobody
+ * else: a plain-JS consumer, or anyone driving `<sui-card>` / `<sui-pill>` as a
+ * web component, has no types at all and still gets silence.
+ *
+ * These maps carry the same guidance the `@deprecated` tags carry, as data the
+ * components can read at runtime. `attrs-discard.test.ts` pins each list
+ * against its `*StrictAttrs` type so the two cannot drift apart.
+ */
+/** What Card writes on its own root, and what a consumer should reach for instead. */
+export declare const CARD_MANAGED_ATTRS: {
+    readonly class: "use the `classes` prop";
+    readonly style: "use the `cssVars` prop";
+    readonly role: "Card derives it from `onclick`/`href`; there is no prop for it";
+    readonly tabindex: "Card derives it from `onclick`/`href`; there is no prop for it";
+    readonly href: "use the `href` prop";
+    readonly target: "use the `target` prop";
+    readonly rel: "use the `rel` prop";
+    readonly onclick: "use the `onclick` prop";
+    readonly onkeydown: "Card binds its own to activate on Enter/Space; there is no prop for it";
+    readonly 'data-pw': "use the `testId` prop";
+    readonly testID: "use the `testId` prop";
+};
+/** What Pill writes on its own root, and what a consumer should reach for instead. */
+export declare const PILL_MANAGED_ATTRS: {
+    readonly class: "use the `classes` prop";
+    readonly type: "Pill always supplies `type=\"button\"` on a button root; there is no prop for it";
+    readonly role: "Pill derives it from whether it is interactive; there is no prop for it";
+    readonly tabindex: "Pill derives it from whether it is interactive; there is no prop for it";
+    readonly title: "use the `title` prop";
+    readonly onclick: "use the `onclick` prop";
+    readonly onkeydown: "Pill binds its own to activate on Enter/Space; there is no prop for it";
+    readonly 'data-pw': "use the `testId` prop";
+    readonly testID: "use the `testId` prop";
+    readonly 'aria-disabled': "Pill derives it from the `disabled` prop";
+    readonly 'aria-expanded': "Pill derives it from the `ariaExpanded` prop";
+    readonly 'aria-pressed': "Pill derives it from the `ariaPressed` prop";
+};
+/**
+ * The messages for every managed key present in `attrs`, in the order the
+ * component's own list declares them. Pure: the caller decides whether the
+ * environment is one that should be told, and does the reporting.
+ *
+ * `attrs` is the optional trailing parameter so an absent one is simply not
+ * passed: the repo bans the `undefined` keyword outright.
+ *
+ * Only own properties count. An object built on a prototype that happens to
+ * carry `class` did not ask for that attribute to be spread, and warning about
+ * it would be noise a consumer cannot act on.
+ */
+export declare const discardedAttrWarnings: (component: string, managed: Readonly<Record<string, string>>, attrs?: Readonly<Record<string, string>>) => readonly string[];

package/dist/attrs-discard.js

@@ -0,0 +1,64 @@
+/**
+ * Runtime counterpart to the `@deprecated` markers on `attrs` (#576).
+ *
+ * Both Card and Pill spread `attrs` onto their root FIRST and write their own
+ * managed attributes after, so an entry for a managed key is accepted, spread,
+ * and then overwritten. 4.19.0 made that visible in the type by deprecating
+ * those keys, which reaches someone reading TypeScript in an editor and nobody
+ * else: a plain-JS consumer, or anyone driving `<sui-card>` / `<sui-pill>` as a
+ * web component, has no types at all and still gets silence.
+ *
+ * These maps carry the same guidance the `@deprecated` tags carry, as data the
+ * components can read at runtime. `attrs-discard.test.ts` pins each list
+ * against its `*StrictAttrs` type so the two cannot drift apart.
+ */
+/** What Card writes on its own root, and what a consumer should reach for instead. */
+export const CARD_MANAGED_ATTRS = {
+    class: 'use the `classes` prop',
+    style: 'use the `cssVars` prop',
+    role: 'Card derives it from `onclick`/`href`; there is no prop for it',
+    tabindex: 'Card derives it from `onclick`/`href`; there is no prop for it',
+    href: 'use the `href` prop',
+    target: 'use the `target` prop',
+    rel: 'use the `rel` prop',
+    onclick: 'use the `onclick` prop',
+    onkeydown: 'Card binds its own to activate on Enter/Space; there is no prop for it',
+    'data-pw': 'use the `testId` prop',
+    testID: 'use the `testId` prop'
+};
+/** What Pill writes on its own root, and what a consumer should reach for instead. */
+export const PILL_MANAGED_ATTRS = {
+    class: 'use the `classes` prop',
+    type: 'Pill always supplies `type="button"` on a button root; there is no prop for it',
+    role: 'Pill derives it from whether it is interactive; there is no prop for it',
+    tabindex: 'Pill derives it from whether it is interactive; there is no prop for it',
+    title: 'use the `title` prop',
+    onclick: 'use the `onclick` prop',
+    onkeydown: 'Pill binds its own to activate on Enter/Space; there is no prop for it',
+    'data-pw': 'use the `testId` prop',
+    testID: 'use the `testId` prop',
+    'aria-disabled': 'Pill derives it from the `disabled` prop',
+    'aria-expanded': 'Pill derives it from the `ariaExpanded` prop',
+    'aria-pressed': 'Pill derives it from the `ariaPressed` prop'
+};
+/**
+ * The messages for every managed key present in `attrs`, in the order the
+ * component's own list declares them. Pure: the caller decides whether the
+ * environment is one that should be told, and does the reporting.
+ *
+ * `attrs` is the optional trailing parameter so an absent one is simply not
+ * passed: the repo bans the `undefined` keyword outright.
+ *
+ * Only own properties count. An object built on a prototype that happens to
+ * carry `class` did not ask for that attribute to be spread, and warning about
+ * it would be noise a consumer cannot act on.
+ */
+export const discardedAttrWarnings = (component, managed, attrs) => {
+    if (!attrs) {
+        return [];
+    }
+    return Object.keys(managed)
+        .filter((key) => Object.prototype.hasOwnProperty.call(attrs, key))
+        .map((key) => `[svelte-ui-components] ${component}: the "${key}" entry in \`attrs\` is discarded, ` +
+        `because ${component} writes its own "${key}" after spreading \`attrs\` — ${managed[key]}.`);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "4.19.0",
+  "version": "4.20.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",