@colletdev/svelte 0.1.8 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@colletdev/svelte",
3
- "version": "0.1.8",
3
+ "version": "0.2.0",
4
4
  "description": "Svelte 5 wrappers for Collet Rust/WASM UI components",
5
5
  "type": "module",
6
6
  "svelte": "./src/index.ts",
package/src/elements.d.ts CHANGED
@@ -618,7 +618,7 @@ declare module 'svelte/elements' {
618
618
  };
619
619
  'cx-text': {
620
620
  id?: string;
621
- role?: 'display' | 'h1' | 'h2' | 'h3' | 'label-lg' | 'label-md' | 'label-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'overline' | 'caption' | 'code';
621
+ textRole?: 'display' | 'h1' | 'h2' | 'h3' | 'label-lg' | 'label-md' | 'label-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'overline' | 'caption' | 'code';
622
622
  align?: 'start' | 'center' | 'end';
623
623
  color?: 'primary' | 'inverse' | 'muted';
624
624
  muted?: boolean;
package/src/text.svelte CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  interface Props {
6
6
  id?: string;
7
- role?: 'display' | 'h1' | 'h2' | 'h3' | 'label-lg' | 'label-md' | 'label-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'overline' | 'caption' | 'code';
7
+ textRole?: 'display' | 'h1' | 'h2' | 'h3' | 'label-lg' | 'label-md' | 'label-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'overline' | 'caption' | 'code';
8
8
  align?: 'start' | 'center' | 'end';
9
9
  color?: 'primary' | 'inverse' | 'muted';
10
10
  muted?: boolean;
@@ -20,16 +20,11 @@
20
20
  children?: import('svelte').Snippet;
21
21
  }
22
22
 
23
- let { id, role, align, color, muted, strong, italic, underline, underlineStrong, truncate, lineClamp, balance, prose, elementAs, children }: Props = $props();
23
+ let { id, textRole, align, color, muted, strong, italic, underline, underlineStrong, truncate, lineClamp, balance, prose, elementAs, children }: Props = $props();
24
24
 
25
25
  let el: HTMLElement;
26
26
 
27
27
 
28
- $effect(() => {
29
- if (!el) return;
30
- if (role != null) el.setAttribute('role', String(role));
31
- else el.removeAttribute('role');
32
- });
33
28
  $effect(() => {
34
29
  if (!el) return;
35
30
  if (align != null) el.setAttribute('align', String(align));
@@ -46,6 +41,7 @@
46
41
  <cx-text
47
42
  bind:this={el}
48
43
  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
44
+ text-role={typeof textRole === 'object' && textRole != null ? JSON.stringify(textRole) : textRole}
49
45
  muted={muted || undefined}
50
46
  strong={strong || undefined}
51
47
  italic={italic || undefined}
@@ -3,7 +3,7 @@ import type { Component } from 'svelte';
3
3
 
4
4
  interface TextProps {
5
5
  id?: string;
6
- role?: 'display' | 'h1' | 'h2' | 'h3' | 'label-lg' | 'label-md' | 'label-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'overline' | 'caption' | 'code';
6
+ textRole?: 'display' | 'h1' | 'h2' | 'h3' | 'label-lg' | 'label-md' | 'label-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'overline' | 'caption' | 'code';
7
7
  align?: 'start' | 'center' | 'end';
8
8
  color?: 'primary' | 'inverse' | 'muted';
9
9
  muted?: boolean;