@svelte-atoms/core 1.0.0-alpha.25 → 1.0.0-alpha.26
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/README.md +645 -645
- package/dist/components/accordion/accordion-root.svelte +1 -1
- package/dist/components/accordion/item/accordion-item-body.svelte +1 -1
- package/dist/components/accordion/item/accordion-item-header.svelte +5 -1
- package/dist/components/accordion/item/accordion-item-indicator.svelte +1 -1
- package/dist/components/accordion/item/accordion-item-root.svelte +1 -1
- package/dist/components/alert/alert-actions.svelte +1 -1
- package/dist/components/alert/alert-close-button.svelte +1 -1
- package/dist/components/alert/alert-content.svelte +1 -1
- package/dist/components/alert/alert-description.svelte +1 -1
- package/dist/components/alert/alert-icon.svelte +1 -1
- package/dist/components/alert/alert-root.svelte +1 -1
- package/dist/components/alert/alert-title.svelte +1 -1
- package/dist/components/atom/html-atom.svelte +201 -217
- package/dist/components/badge/badge.svelte +1 -1
- package/dist/components/breadcrumb/breadcrumb-item.svelte +1 -1
- package/dist/components/breadcrumb/breadcrumb-root.svelte +1 -1
- package/dist/components/breadcrumb/breadcrumb-separator.svelte +1 -1
- package/dist/components/button/button.stories.svelte +57 -57
- package/dist/components/button/button.svelte +1 -1
- package/dist/components/button/button.svelte.d.ts +4 -1
- package/dist/components/button/types.d.ts +1 -1
- package/dist/components/card/card-body.svelte +1 -1
- package/dist/components/card/card-description.svelte +1 -1
- package/dist/components/card/card-footer.svelte +1 -1
- package/dist/components/card/card-header.svelte +1 -1
- package/dist/components/card/card-media.svelte +1 -1
- package/dist/components/card/card-subtitle.svelte +1 -1
- package/dist/components/card/card-title.svelte +5 -1
- package/dist/components/checkbox/checkbox.svelte +39 -28
- package/dist/components/collapsible/collapsible-body.svelte +1 -1
- package/dist/components/collapsible/collapsible-header.svelte +1 -1
- package/dist/components/collapsible/collapsible-indicator.svelte +1 -1
- package/dist/components/collapsible/collapsible-root.svelte +1 -1
- package/dist/components/combobox/atoms.d.ts +5 -1
- package/dist/components/combobox/atoms.js +5 -1
- package/dist/components/combobox/{combobox-input.svelte → combobox-control.svelte} +3 -3
- package/dist/components/combobox/{combobox-input.svelte.d.ts → combobox-control.svelte.d.ts} +3 -3
- package/dist/components/combobox/combobox-trigger.svelte +1 -1
- package/dist/components/combobox/compobox-item.svelte +1 -1
- package/dist/components/container/container.svelte +1 -1
- package/dist/components/datagrid/datagrid-body.svelte +1 -1
- package/dist/components/datagrid/datagrid-footer.svelte +1 -1
- package/dist/components/datagrid/datagrid-header.svelte +1 -1
- package/dist/components/datagrid/datagrid-root.svelte +1 -1
- package/dist/components/datagrid/datagrid.stories.svelte +75 -75
- package/dist/components/datagrid/td/datagrid-td.svelte +1 -1
- package/dist/components/datagrid/th/datagrid-th-sort-icon.svelte +1 -1
- package/dist/components/datagrid/th/datagrid-th.svelte +1 -1
- package/dist/components/dialog/dialog-body.svelte +1 -1
- package/dist/components/dialog/dialog-close-button.svelte +1 -1
- package/dist/components/dialog/dialog-content.svelte +8 -11
- package/dist/components/dialog/dialog-description.svelte +1 -1
- package/dist/components/dialog/dialog-footer.svelte +1 -1
- package/dist/components/dialog/dialog-header.svelte +1 -1
- package/dist/components/dialog/dialog-root.svelte +123 -120
- package/dist/components/dialog/dialog-root.svelte.d.ts +3 -1
- package/dist/components/dialog/dialog-title.svelte +1 -1
- package/dist/components/drawer/drawer-backdrop.svelte +1 -1
- package/dist/components/drawer/drawer-body.svelte +1 -1
- package/dist/components/drawer/drawer-description.svelte +1 -1
- package/dist/components/drawer/drawer-footer.svelte +1 -1
- package/dist/components/drawer/drawer-header.svelte +1 -1
- package/dist/components/drawer/drawer-root.svelte +118 -113
- package/dist/components/drawer/drawer-root.svelte.d.ts +5 -2
- package/dist/components/drawer/drawer-title.svelte +1 -1
- package/dist/components/dropdown/dropdown-placeholder.svelte +1 -1
- package/dist/components/dropdown/dropdown-query.svelte +1 -1
- package/dist/components/dropdown/dropdown-trigger.svelte +1 -1
- package/dist/components/dropdown/dropdown-value.svelte +1 -3
- package/dist/components/dropdown/item/bond.svelte.d.ts +4 -0
- package/dist/components/dropdown/item/bond.svelte.js +9 -0
- package/dist/components/dropdown/item/dropdown-item.svelte +10 -6
- package/dist/components/form/field/bond.svelte.d.ts +8 -0
- package/dist/components/form/field/bond.svelte.js +13 -1
- package/dist/components/form/field/field-control.svelte +7 -0
- package/dist/components/form/field/field-control.svelte.d.ts +2 -2
- package/dist/components/form/form.stories.svelte +3 -3
- package/dist/components/input/atoms.d.ts +5 -1
- package/dist/components/input/atoms.js +5 -1
- package/dist/components/input/{input-value.svelte → input-control.svelte} +107 -113
- package/dist/components/input/input-control.svelte.d.ts +27 -0
- package/dist/components/input/input-icon.svelte +1 -1
- package/dist/components/input/input-placeholder.svelte +54 -56
- package/dist/components/input/input-root.svelte +5 -12
- package/dist/components/input/input-root.svelte.d.ts +3 -20
- package/dist/components/input/input.stories.svelte +2 -2
- package/dist/components/input/types.d.ts +22 -0
- package/dist/components/input/types.js +1 -0
- package/dist/components/list/list-group.svelte +1 -1
- package/dist/components/list/list-item.svelte +1 -1
- package/dist/components/list/list-root.svelte +6 -1
- package/dist/components/list/list-title.svelte +1 -1
- package/dist/components/menu/menu-list.svelte +1 -1
- package/dist/components/popover/bond.svelte.d.ts +2 -0
- package/dist/components/popover/bond.svelte.js +1 -1
- package/dist/components/popover/popover-arrow.svelte +111 -117
- package/dist/components/popover/popover-arrow.svelte.d.ts +1 -2
- package/dist/components/popover/popover-content.svelte +139 -147
- package/dist/components/popover/popover-content.svelte.d.ts +3 -17
- package/dist/components/popover/popover-indicator.svelte +1 -1
- package/dist/components/popover/popover-root.svelte +49 -63
- package/dist/components/popover/popover-root.svelte.d.ts +1 -15
- package/dist/components/popover/popover-trigger.svelte +47 -56
- package/dist/components/popover/popover-trigger.svelte.d.ts +2 -8
- package/dist/components/popover/types.d.ts +39 -0
- package/dist/components/popover/types.js +1 -0
- package/dist/components/portal/active-portal.svelte +22 -16
- package/dist/components/portal/active-portal.svelte.d.ts +2 -2
- package/dist/components/portal/portal-inner.svelte +1 -1
- package/dist/components/portal/portal-root.svelte +1 -1
- package/dist/components/portal/teleport.svelte +55 -49
- package/dist/components/portal/teleport.svelte.d.ts +3 -2
- package/dist/components/radio/radio-group.stories.svelte +4 -4
- package/dist/components/radio/radio.svelte +3 -3
- package/dist/components/root/root.css +24 -66
- package/dist/components/root/root.svelte +1 -1
- package/dist/components/sidebar/sidebar-content.svelte +2 -16
- package/dist/components/sidebar/sidebar-content.svelte.d.ts +2 -9
- package/dist/components/sidebar/sidebar-root.svelte +4 -23
- package/dist/components/sidebar/sidebar-root.svelte.d.ts +2 -13
- package/dist/components/sidebar/types.d.ts +19 -0
- package/dist/components/sidebar/types.js +1 -0
- package/dist/components/stack/stack-item.svelte +5 -1
- package/dist/components/stack/stack-root.svelte +5 -1
- package/dist/components/tabs/tab/tab-body.svelte +1 -1
- package/dist/components/tabs/tab/tab-description.svelte +1 -1
- package/dist/components/tabs/tab/tab-header.svelte +2 -2
- package/dist/components/tabs/tab/tab-root.svelte +6 -1
- package/dist/components/tabs/tabs-body.svelte +1 -1
- package/dist/components/tabs/tabs-header.svelte +1 -1
- package/dist/components/tabs/tabs-root.svelte +1 -1
- package/dist/components/textarea/textarea-input.svelte +2 -1
- package/dist/components/toast/toast-description.svelte +1 -1
- package/dist/components/toast/toast-root.svelte +1 -1
- package/dist/components/toast/toast-title.svelte +1 -1
- package/dist/components/tree/tree-body.svelte +1 -1
- package/dist/components/tree/tree-header.svelte +1 -1
- package/dist/components/tree/tree-indicator.svelte +1 -1
- package/dist/components/tree/tree-root.svelte +1 -1
- package/dist/context/preset.svelte.d.ts +1 -1
- package/llm/composition.md +395 -395
- package/llm/crafting.md +838 -838
- package/llm/motion.md +970 -970
- package/llm/philosophy.md +23 -23
- package/llm/preset-variant-integration.md +516 -516
- package/llm/preset.md +383 -383
- package/llm/styling.md +216 -216
- package/llm/usage.md +46 -46
- package/llm/variants.md +712 -712
- package/package.json +437 -437
- package/dist/components/input/input-value.svelte.d.ts +0 -19
package/llm/philosophy.md
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
The Atomic Svelte philosophy is centered around creating a modular, composable UI library that treats components as fundamental building blocks. Here are the core principles:
|
|
2
|
-
|
|
3
|
-
# 🧱 Atomic Architecture
|
|
4
|
-
|
|
5
|
-
The philosophy is built around the concept of "atoms" - self-contained, reusable UI components that encapsulate their own state and DOM management. Think of it like chemistry: components are the basic elements that can be combined to create more complex molecules (UI patterns).
|
|
6
|
-
|
|
7
|
-
# Core Structure
|
|
8
|
-
|
|
9
|
-
Atoms: The smallest composable UI pieces - fundamental building blocks
|
|
10
|
-
Bonds: The logic that holds atoms together and enables synchronization between them
|
|
11
|
-
Protons, Neutrons, Electrons: Functions that can be attached to atoms to add incremental functionality
|
|
12
|
-
|
|
13
|
-
# Key Philosophy Points
|
|
14
|
-
|
|
15
|
-
🔗 Context-Driven Communication: Components communicate through Svelte's context API, enabling powerful parent-child relationships without prop drilling.
|
|
16
|
-
|
|
17
|
-
- ♿ Accessibility First: Every component includes proper ARIA attributes, keyboard navigation, and focus management out of the box.
|
|
18
|
-
- 🎨 Headless & Stylable: Components are headless by default, giving you complete control over styling while providing sensible defaults.
|
|
19
|
-
- ⚡ Reactive by Design: Leverages Svelte's fine-grained reactivity system for optimal performance and smooth user interactions.
|
|
20
|
-
- 🔧 Highly Extensible: Easily extend components with custom behaviors, animations, and styling while maintaining core functionality.
|
|
21
|
-
- 🎯 Type Safety: Fully written in TypeScript with comprehensive type definitions for a robust development experience.
|
|
22
|
-
|
|
23
|
-
The philosophy treats the library as "raw material" - providing low-level, customizable, scalable UI components that teams can use to build their own custom design systems rather than prescriptive, opinionated components. This approach gives developers maximum flexibility while ensuring consistency and accessibility across their applications.
|
|
1
|
+
The Atomic Svelte philosophy is centered around creating a modular, composable UI library that treats components as fundamental building blocks. Here are the core principles:
|
|
2
|
+
|
|
3
|
+
# 🧱 Atomic Architecture
|
|
4
|
+
|
|
5
|
+
The philosophy is built around the concept of "atoms" - self-contained, reusable UI components that encapsulate their own state and DOM management. Think of it like chemistry: components are the basic elements that can be combined to create more complex molecules (UI patterns).
|
|
6
|
+
|
|
7
|
+
# Core Structure
|
|
8
|
+
|
|
9
|
+
Atoms: The smallest composable UI pieces - fundamental building blocks
|
|
10
|
+
Bonds: The logic that holds atoms together and enables synchronization between them
|
|
11
|
+
Protons, Neutrons, Electrons: Functions that can be attached to atoms to add incremental functionality
|
|
12
|
+
|
|
13
|
+
# Key Philosophy Points
|
|
14
|
+
|
|
15
|
+
🔗 Context-Driven Communication: Components communicate through Svelte's context API, enabling powerful parent-child relationships without prop drilling.
|
|
16
|
+
|
|
17
|
+
- ♿ Accessibility First: Every component includes proper ARIA attributes, keyboard navigation, and focus management out of the box.
|
|
18
|
+
- 🎨 Headless & Stylable: Components are headless by default, giving you complete control over styling while providing sensible defaults.
|
|
19
|
+
- ⚡ Reactive by Design: Leverages Svelte's fine-grained reactivity system for optimal performance and smooth user interactions.
|
|
20
|
+
- 🔧 Highly Extensible: Easily extend components with custom behaviors, animations, and styling while maintaining core functionality.
|
|
21
|
+
- 🎯 Type Safety: Fully written in TypeScript with comprehensive type definitions for a robust development experience.
|
|
22
|
+
|
|
23
|
+
The philosophy treats the library as "raw material" - providing low-level, customizable, scalable UI components that teams can use to build their own custom design systems rather than prescriptive, opinionated components. This approach gives developers maximum flexibility while ensuring consistency and accessibility across their applications.
|