@arclux/arc-ui-svelte 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arclux/arc-ui-svelte",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Svelte 5 wrappers for ARC UI Web Components.",
   "type": "module",
   "main": "src/index.ts",
@@ -44,7 +44,7 @@
     "svelte": ">=5.0.0"
   },
   "dependencies": {
-    "@arclux/arc-ui": "1.3.0"
+    "@arclux/arc-ui": "1.5.0"
   },
   "license": "MIT",
   "keywords": [

package/src/content/Accordion.svelte

@@ -4,15 +4,16 @@
   import type { Snippet } from 'svelte';
 
   interface Props {
+    multiple?: boolean;
     _items?: string;
     _openItems?: string;
     children?: Snippet;
     [key: string]: unknown;
   }
 
-  let { _items = [], _openItems = new Set(), children, ...rest }: Props = $props();
+  let { multiple = false, _items = [], _openItems = new Set(), children, ...rest }: Props = $props();
 </script>
 
-<arc-accordion {_items} {_openItems} {...rest}>
+<arc-accordion {multiple} {_items} {_openItems} {...rest}>
   {@render children?.()}
 </arc-accordion>

package/src/content/Avatar.svelte

@@ -7,13 +7,15 @@
     src?: string;
     name?: string;
     size?: 'sm' | 'md' | 'lg';
+    shape?: 'square' | 'rounded';
+    status?: 'online' | 'offline' | 'busy' | 'away';
     children?: Snippet;
     [key: string]: unknown;
   }
 
-  let { src = '', name = '', size = 'md', children, ...rest }: Props = $props();
+  let { src = '', name = '', size = 'md', shape = 'circle', status = '', children, ...rest }: Props = $props();
 </script>
 
-<arc-avatar {src} {name} {size} {...rest}>
+<arc-avatar {src} {name} {size} {shape} {status} {...rest}>
   {@render children?.()}
 </arc-avatar>

package/src/content/Badge.svelte

@@ -5,14 +5,15 @@
 
   interface Props {
     variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+    size?: 'sm' | 'lg';
     color?: string;
     children?: Snippet;
     [key: string]: unknown;
   }
 
-  let { variant = 'default', color = '', children, ...rest }: Props = $props();
+  let { variant = 'default', size = 'md', color = '', children, ...rest }: Props = $props();
 </script>
 
-<arc-badge {variant} {color} {...rest}>
+<arc-badge {variant} {size} {color} {...rest}>
   {@render children?.()}
 </arc-badge>

package/src/content/Callout.svelte

@@ -4,14 +4,16 @@
   import type { Snippet } from 'svelte';
 
   interface Props {
-    variant?: 'info' | 'warning' | 'tip' | 'danger';
+    variant?: string;
+    dismissible?: boolean;
+    _dismissed?: string;
     children?: Snippet;
     [key: string]: unknown;
   }
 
-  let { variant = 'info', children, ...rest }: Props = $props();
+  let { variant = 'info', dismissible = false, _dismissed = false, children, ...rest }: Props = $props();
 </script>
 
-<arc-callout {variant} {...rest}>
+<arc-callout {variant} {dismissible} {_dismissed} {...rest}>
   {@render children?.()}
 </arc-callout>

package/src/content/Card.svelte

@@ -5,14 +5,16 @@
 
   interface Props {
     href?: string;
+    padding?: 'none' | 'sm' | 'lg';
+    interactive?: boolean;
     _hasFooter?: string;
     children?: Snippet;
     [key: string]: unknown;
   }
 
-  let { href = '', _hasFooter = false, children, ...rest }: Props = $props();
+  let { href = '', padding = 'md', interactive = false, _hasFooter = false, children, ...rest }: Props = $props();
 </script>
 
-<arc-card {href} {_hasFooter} {...rest}>
+<arc-card {href} {padding} {interactive} {_hasFooter} {...rest}>
   {@render children?.()}
 </arc-card>

package/src/content/Divider.svelte

@@ -7,13 +7,14 @@
     variant?: 'subtle' | 'glow' | 'line-white' | 'line-primary' | 'line-gradient';
     align?: 'left' | 'right';
     vertical?: boolean;
+    label?: string;
     children?: Snippet;
     [key: string]: unknown;
   }
 
-  let { variant = 'subtle', align, vertical = false, children, ...rest }: Props = $props();
+  let { variant = 'subtle', align, vertical = false, label = '', children, ...rest }: Props = $props();
 </script>
 
-<arc-divider {variant} {align} {vertical} {...rest}>
+<arc-divider {variant} {align} {vertical} {label} {...rest}>
   {@render children?.()}
 </arc-divider>

package/src/content/Skeleton.svelte

@@ -7,13 +7,14 @@
     variant?: 'text' | 'circle' | 'rect';
     width?: string;
     height?: string;
+    count?: number;
     children?: Snippet;
     [key: string]: unknown;
   }
 
-  let { variant = 'text', width = '', height = '', children, ...rest }: Props = $props();
+  let { variant = 'text', width = '', height = '', count = 1, children, ...rest }: Props = $props();
 </script>
 
-<arc-skeleton {variant} {width} {height} {...rest}>
+<arc-skeleton {variant} {width} {height} {count} {...rest}>
   {@render children?.()}
 </arc-skeleton>

package/src/content/Stat.svelte

@@ -6,13 +6,15 @@
   interface Props {
     value?: string;
     label?: string;
+    trend?: 'up' | 'down' | 'neutral';
+    change?: string;
     children?: Snippet;
     [key: string]: unknown;
   }
 
-  let { value = '', label = '', children, ...rest }: Props = $props();
+  let { value = '', label = '', trend = '', change = '', children, ...rest }: Props = $props();
 </script>
 
-<arc-stat {value} {label} {...rest}>
+<arc-stat {value} {label} {trend} {change} {...rest}>
   {@render children?.()}
 </arc-stat>

package/src/content/Tag.svelte

@@ -5,6 +5,7 @@
 
   interface Props {
     variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+    size?: 'sm' | 'lg';
     removable?: boolean;
     disabled?: boolean;
     color?: string;
@@ -12,9 +13,9 @@
     [key: string]: unknown;
   }
 
-  let { variant = 'default', removable = false, disabled = false, color = '', children, ...rest }: Props = $props();
+  let { variant = 'default', size = 'md', removable = false, disabled = false, color = '', children, ...rest }: Props = $props();
 </script>
 
-<arc-tag {variant} {removable} {disabled} {color} {...rest}>
+<arc-tag {variant} {size} {removable} {disabled} {color} {...rest}>
   {@render children?.()}
 </arc-tag>

package/src/feedback/Alert.svelte

@@ -4,16 +4,17 @@
   import type { Snippet } from 'svelte';
 
   interface Props {
-    variant?: 'info' | 'success' | 'warning' | 'error';
+    variant?: string;
+    compact?: boolean;
     dismissible?: boolean;
     heading?: string;
     children?: Snippet;
     [key: string]: unknown;
   }
 
-  let { variant = 'info', dismissible = false, heading = '', children, ...rest }: Props = $props();
+  let { variant = 'info', compact = false, dismissible = false, heading = '', children, ...rest }: Props = $props();
 </script>
 
-<arc-alert {variant} {dismissible} {heading} {...rest}>
+<arc-alert {variant} {compact} {dismissible} {heading} {...rest}>
   {@render children?.()}
 </arc-alert>

package/src/feedback/Modal.svelte

@@ -7,14 +7,15 @@
     open?: boolean;
     heading?: string;
     size?: 'sm' | 'md' | 'lg';
+    fullscreen?: boolean;
     closable?: boolean;
     children?: Snippet;
     [key: string]: unknown;
   }
 
-  let { open = false, heading = '', size = 'md', closable = true, children, ...rest }: Props = $props();
+  let { open = false, heading = '', size = 'md', fullscreen = false, closable = true, children, ...rest }: Props = $props();
 </script>
 
-<arc-modal {open} {heading} {size} {closable} {...rest}>
+<arc-modal {open} {heading} {size} {fullscreen} {closable} {...rest}>
   {@render children?.()}
 </arc-modal>

package/src/feedback/Progress.svelte

@@ -8,14 +8,15 @@
     variant?: string;
     size?: 'sm' | 'md' | 'lg';
     indeterminate?: boolean;
+    showValue?: boolean;
     label?: string;
     children?: Snippet;
     [key: string]: unknown;
   }
 
-  let { value = 0, variant = 'bar', size = 'md', indeterminate = false, label = '', children, ...rest }: Props = $props();
+  let { value = 0, variant = 'bar', size = 'md', indeterminate = false, showValue = false, label = '', children, ...rest }: Props = $props();
 </script>
 
-<arc-progress {value} {variant} {size} {indeterminate} {label} {...rest}>
+<arc-progress {value} {variant} {size} {indeterminate} {showValue} {label} {...rest}>
   {@render children?.()}
 </arc-progress>

package/src/input/Button.svelte

@@ -8,6 +8,7 @@
     size?: 'sm' | 'md' | 'lg';
     href?: string;
     disabled?: boolean;
+    loading?: boolean;
     type?: string;
     _hasPrefix?: string;
     _hasSuffix?: string;
@@ -15,9 +16,9 @@
     [key: string]: unknown;
   }
 
-  let { variant = 'primary', size = 'md', href = '', disabled = false, type = 'button', _hasPrefix = false, _hasSuffix = false, children, ...rest }: Props = $props();
+  let { variant = 'primary', size = 'md', href = '', disabled = false, loading = false, type = 'button', _hasPrefix = false, _hasSuffix = false, children, ...rest }: Props = $props();
 </script>
 
-<arc-button {variant} {size} {href} {disabled} {type} {_hasPrefix} {_hasSuffix} {...rest}>
+<arc-button {variant} {size} {href} {disabled} {loading} {type} {_hasPrefix} {_hasSuffix} {...rest}>
   {@render children?.()}
 </arc-button>

package/src/input/Checkbox.svelte

@@ -7,6 +7,7 @@
     checked?: boolean;
     indeterminate?: boolean;
     disabled?: boolean;
+    size?: 'sm' | 'lg';
     label?: string;
     name?: string;
     value?: string;
@@ -14,9 +15,9 @@
     [key: string]: unknown;
   }
 
-  let { checked = false, indeterminate = false, disabled = false, label = '', name = '', value = '', children, ...rest }: Props = $props();
+  let { checked = false, indeterminate = false, disabled = false, size = 'md', label = '', name = '', value = '', children, ...rest }: Props = $props();
 </script>
 
-<arc-checkbox {checked} {indeterminate} {disabled} {label} {name} {value} {...rest}>
+<arc-checkbox {checked} {indeterminate} {disabled} {size} {label} {name} {value} {...rest}>
   {@render children?.()}
 </arc-checkbox>

package/src/input/Input.svelte

@@ -11,6 +11,8 @@
     value?: string;
     disabled?: boolean;
     required?: boolean;
+    error?: string;
+    size?: 'sm' | 'lg';
     multiline?: boolean;
     rows?: number;
     _hasPrefix?: string;
@@ -19,9 +21,9 @@
     [key: string]: unknown;
   }
 
-  let { type = 'text', name = '', label = '', placeholder = '', value = '', disabled = false, required = false, multiline = false, rows = 5, _hasPrefix = false, _hasSuffix = false, children, ...rest }: Props = $props();
+  let { type = 'text', name = '', label = '', placeholder = '', value = '', disabled = false, required = false, error = '', size = 'md', multiline = false, rows = 5, _hasPrefix = false, _hasSuffix = false, children, ...rest }: Props = $props();
 </script>
 
-<arc-input {type} {name} {label} {placeholder} {value} {disabled} {required} {multiline} {rows} {_hasPrefix} {_hasSuffix} {...rest}>
+<arc-input {type} {name} {label} {placeholder} {value} {disabled} {required} {error} {size} {multiline} {rows} {_hasPrefix} {_hasSuffix} {...rest}>
   {@render children?.()}
 </arc-input>

package/src/input/RadioGroup.svelte

@@ -7,15 +7,16 @@
     value?: string;
     name?: string;
     disabled?: boolean;
+    size?: 'sm' | 'lg';
     orientation?: 'horizontal';
     _radios?: string;
     children?: Snippet;
     [key: string]: unknown;
   }
 
-  let { value = '', name = '', disabled = false, orientation = 'vertical', _radios = [], children, ...rest }: Props = $props();
+  let { value = '', name = '', disabled = false, size = 'md', orientation = 'vertical', _radios = [], children, ...rest }: Props = $props();
 </script>
 
-<arc-radio-group {value} {name} {disabled} {orientation} {_radios} {...rest}>
+<arc-radio-group {value} {name} {disabled} {size} {orientation} {_radios} {...rest}>
   {@render children?.()}
 </arc-radio-group>

package/src/input/Select.svelte

@@ -9,15 +9,17 @@
     label?: string;
     name?: string;
     disabled?: boolean;
+    size?: 'sm' | 'lg';
+    error?: string;
     open?: boolean;
     _options?: string;
     children?: Snippet;
     [key: string]: unknown;
   }
 
-  let { value = '', placeholder = 'Select...', label = '', name = '', disabled = false, open = false, _options = [], children, ...rest }: Props = $props();
+  let { value = '', placeholder = 'Select...', label = '', name = '', disabled = false, size = 'md', error = '', open = false, _options = [], children, ...rest }: Props = $props();
 </script>
 
-<arc-select {value} {placeholder} {label} {name} {disabled} {open} {_options} {...rest}>
+<arc-select {value} {placeholder} {label} {name} {disabled} {size} {error} {open} {_options} {...rest}>
   {@render children?.()}
 </arc-select>

package/src/input/Textarea.svelte

@@ -12,14 +12,16 @@
     disabled?: boolean;
     readonly?: boolean;
     resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    size?: 'sm' | 'lg';
+    autoResize?: boolean;
     error?: string;
     children?: Snippet;
     [key: string]: unknown;
   }
 
-  let { value = '', placeholder = '', label = '', rows = 4, maxlength = 0, disabled = false, readonly = false, resize = 'vertical', error = '', children, ...rest }: Props = $props();
+  let { value = '', placeholder = '', label = '', rows = 4, maxlength = 0, disabled = false, readonly = false, resize = 'vertical', size = 'md', autoResize = false, error = '', children, ...rest }: Props = $props();
 </script>
 
-<arc-textarea {value} {placeholder} {label} {rows} {maxlength} {disabled} {readonly} {resize} {error} {...rest}>
+<arc-textarea {value} {placeholder} {label} {rows} {maxlength} {disabled} {readonly} {resize} {size} {autoResize} {error} {...rest}>
   {@render children?.()}
 </arc-textarea>

package/src/input/Toggle.svelte

@@ -6,15 +6,16 @@
   interface Props {
     checked?: boolean;
     disabled?: boolean;
+    size?: 'sm' | 'lg';
     label?: string;
     name?: string;
     children?: Snippet;
     [key: string]: unknown;
   }
 
-  let { checked = false, disabled = false, label = '', name = '', children, ...rest }: Props = $props();
+  let { checked = false, disabled = false, size = 'md', label = '', name = '', children, ...rest }: Props = $props();
 </script>
 
-<arc-toggle {checked} {disabled} {label} {name} {...rest}>
+<arc-toggle {checked} {disabled} {size} {label} {name} {...rest}>
   {@render children?.()}
 </arc-toggle>

package/src/layout/Container.svelte

@@ -5,13 +5,15 @@
 
   interface Props {
     narrow?: boolean;
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    padding?: 'none' | 'sm' | 'lg';
     children?: Snippet;
     [key: string]: unknown;
   }
 
-  let { narrow = false, children, ...rest }: Props = $props();
+  let { narrow = false, size = 'md', padding = 'md', children, ...rest }: Props = $props();
 </script>
 
-<arc-container {narrow} {...rest}>
+<arc-container {narrow} {size} {padding} {...rest}>
   {@render children?.()}
 </arc-container>

package/src/navigation/Breadcrumb.svelte

@@ -4,14 +4,15 @@
   import type { Snippet } from 'svelte';
 
   interface Props {
+    separator?: string;
     _items?: string;
     children?: Snippet;
     [key: string]: unknown;
   }
 
-  let { _items = [], children, ...rest }: Props = $props();
+  let { separator = '/', _items = [], children, ...rest }: Props = $props();
 </script>
 
-<arc-breadcrumb {_items} {...rest}>
+<arc-breadcrumb {separator} {_items} {...rest}>
   {@render children?.()}
 </arc-breadcrumb>

package/src/navigation/Footer.svelte

@@ -6,13 +6,14 @@
   interface Props {
     compact?: boolean;
     border?: boolean;
+    align?: 'center';
     children?: Snippet;
     [key: string]: unknown;
   }
 
-  let { compact = false, border = true, children, ...rest }: Props = $props();
+  let { compact = false, border = true, align = 'left', children, ...rest }: Props = $props();
 </script>
 
-<arc-footer {compact} {border} {...rest}>
+<arc-footer {compact} {border} {align} {...rest}>
   {@render children?.()}
 </arc-footer>

package/src/navigation/Link.svelte

@@ -6,15 +6,16 @@
   interface Props {
     href?: string;
     variant?: 'muted' | 'nav';
+    underline?: 'always' | 'never';
     active?: boolean;
     external?: boolean;
     children?: Snippet;
     [key: string]: unknown;
   }
 
-  let { href = '', variant = 'default', active = false, external = false, children, ...rest }: Props = $props();
+  let { href = '', variant = 'default', underline = 'hover', active = false, external = false, children, ...rest }: Props = $props();
 </script>
 
-<arc-link {href} {variant} {active} {external} {...rest}>
+<arc-link {href} {variant} {underline} {active} {external} {...rest}>
   {@render children?.()}
 </arc-link>

package/src/navigation/Pagination.svelte

@@ -7,13 +7,14 @@
     total?: number;
     current?: number;
     siblings?: number;
+    compact?: boolean;
     children?: Snippet;
     [key: string]: unknown;
   }
 
-  let { total = 1, current = 1, siblings = 1, children, ...rest }: Props = $props();
+  let { total = 1, current = 1, siblings = 1, compact = false, children, ...rest }: Props = $props();
 </script>
 
-<arc-pagination {total} {current} {siblings} {...rest}>
+<arc-pagination {total} {current} {siblings} {compact} {...rest}>
   {@render children?.()}
 </arc-pagination>

package/src/navigation/Sidebar.svelte

@@ -6,6 +6,7 @@
   interface Props {
     active?: string;
     collapsed?: boolean;
+    position?: 'right';
     width?: string;
     glow?: boolean;
     _sections?: string;
@@ -13,9 +14,9 @@
     [key: string]: unknown;
   }
 
-  let { active = '', collapsed = false, width = '260px', glow = false, _sections = [], children, ...rest }: Props = $props();
+  let { active = '', collapsed = false, position = 'left', width = '260px', glow = false, _sections = [], children, ...rest }: Props = $props();
 </script>
 
-<arc-sidebar {active} {collapsed} {width} {glow} {_sections} {...rest}>
+<arc-sidebar {active} {collapsed} {position} {width} {glow} {_sections} {...rest}>
   {@render children?.()}
 </arc-sidebar>

package/src/navigation/Tabs.svelte

@@ -6,14 +6,16 @@
   interface Props {
     items?: unknown[];
     selected?: number;
+    align?: 'center' | 'end';
+    variant?: 'pills';
     _tabs?: string;
     children?: Snippet;
     [key: string]: unknown;
   }
 
-  let { items = [], selected = 0, _tabs = [], children, ...rest }: Props = $props();
+  let { items = [], selected = 0, align = 'start', variant = 'underline', _tabs = [], children, ...rest }: Props = $props();
 </script>
 
-<arc-tabs {items} {selected} {_tabs} {...rest}>
+<arc-tabs {items} {selected} {align} {variant} {_tabs} {...rest}>
   {@render children?.()}
 </arc-tabs>

package/src/navigation/TopBar.svelte

@@ -9,13 +9,14 @@
     menuOpen?: boolean;
     mobileMenu?: string;
     menuPosition?: string;
+    navAlign?: string;
     children?: Snippet;
     [key: string]: unknown;
   }
 
-  let { heading = '', fixed = false, menuOpen = false, mobileMenu = 'sidebar', menuPosition = 'left', children, ...rest }: Props = $props();
+  let { heading = '', fixed = false, menuOpen = false, mobileMenu = 'sidebar', menuPosition = 'left', navAlign = 'center', children, ...rest }: Props = $props();
 </script>
 
-<arc-top-bar {heading} {fixed} {menuOpen} {mobileMenu} {menuPosition} {...rest}>
+<arc-top-bar {heading} {fixed} {menuOpen} {mobileMenu} {menuPosition} {navAlign} {...rest}>
   {@render children?.()}
 </arc-top-bar>