@ds-mo/ui 0.9.1 → 0.9.2
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 +11 -8
- package/package.json +3 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@ds-mo/ui)
|
|
4
4
|
|
|
5
|
-
Composable
|
|
5
|
+
Composable web UI components (Stencil custom elements) styled with [TokoMo](https://github.com/zainadeel/TokoMo) design tokens. Works in any framework — ships Angular proxies out of the box.
|
|
6
6
|
|
|
7
7
|
## Install
|
|
8
8
|
|
|
@@ -12,7 +12,7 @@ npm install @ds-mo/ui @ds-mo/tokens
|
|
|
12
12
|
|
|
13
13
|
**Required peer dependency:** `@ds-mo/tokens` provides all CSS custom properties (colors, dimensions, typography, effects) that CompoMo components consume. Components will not render correctly without it.
|
|
14
14
|
|
|
15
|
-
**Optional:** `@ds-mo/icons` for icon components
|
|
15
|
+
**Optional:** `@ds-mo/icons` for icon components passed via the `slot="icon"` pattern.
|
|
16
16
|
|
|
17
17
|
```bash
|
|
18
18
|
npm install @ds-mo/icons
|
|
@@ -28,9 +28,9 @@ import '@ds-mo/tokens/reset'; // CSS reset
|
|
|
28
28
|
import '@ds-mo/tokens/globals'; // global styles
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
-
Then import CompoMo components:
|
|
31
|
+
Then import CompoMo components (Angular proxies):
|
|
32
32
|
|
|
33
|
-
```
|
|
33
|
+
```ts
|
|
34
34
|
import { Button, Text, Surface, Card } from '@ds-mo/ui';
|
|
35
35
|
```
|
|
36
36
|
|
|
@@ -97,10 +97,13 @@ All styling uses TokoMo CSS custom properties. No hardcoded colors, sizes, or sh
|
|
|
97
97
|
|
|
98
98
|
## Icon pattern
|
|
99
99
|
|
|
100
|
-
Components that accept icons use
|
|
100
|
+
Components that accept icons use named slots:
|
|
101
101
|
|
|
102
|
-
```
|
|
103
|
-
|
|
102
|
+
```html
|
|
103
|
+
<ds-button>
|
|
104
|
+
<ds-icon-arrow-right slot="icon"></ds-icon-arrow-right>
|
|
105
|
+
Save
|
|
106
|
+
</ds-button>
|
|
104
107
|
```
|
|
105
108
|
|
|
106
|
-
Pass any
|
|
109
|
+
Pass any element into `slot="icon"`. Works with `@ds-mo/icons` or any custom SVG element.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ds-mo/ui",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.2",
|
|
4
4
|
"description": "CompoMo — composable web components styled with TokoMo design tokens",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"web-components",
|
|
@@ -61,6 +61,7 @@
|
|
|
61
61
|
"devDependencies": {
|
|
62
62
|
"@ds-mo/icons": "^4.3.1",
|
|
63
63
|
"@ds-mo/tokens": "^2.8.0",
|
|
64
|
+
"@eslint/js": "^10.0.1",
|
|
64
65
|
"@modelcontextprotocol/sdk": "^1.29.0",
|
|
65
66
|
"@stencil/angular-output-target": "^1.3.1",
|
|
66
67
|
"@stencil/core": "^4.43.4",
|
|
@@ -70,6 +71,7 @@
|
|
|
70
71
|
"@storybook/web-components-vite": "^10.4.2",
|
|
71
72
|
"concurrently": "^10.0.3",
|
|
72
73
|
"eslint": "^10.4.1",
|
|
74
|
+
"eslint-plugin-react-hooks": "^7.1.1",
|
|
73
75
|
"globals": "^17.6.0",
|
|
74
76
|
"lit": "^3.3.3",
|
|
75
77
|
"storybook": "^10.4.2",
|