@latty-ds/icons 0.7.0 → 0.8.1

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.
Files changed (6) hide show
  1. package/dist/components/icon.d.ts +8 -1
  2. package/dist/components/icon.d.ts.map +1 -1
  3. package/dist/components/icon.js +25 -12
  4. package/dist/types/icons.types.d.ts +2 -1
  5. package/dist/types/icons.types.d.ts.map +1 -1
  6. package/package.json +3 -6
package/dist/components/icon.d.ts CHANGED
@@ -6,15 +6,22 @@ import type { IconSize } from '../types/icons.types';
6
6
  * @element lt-icon
7
7
  *
8
8
  * Features:
9
- * - Supports multiple sizes (xs, sm, md, lg, xl)
9
+ * - Supports multiple fixed sizes (xs, sm, md, lg, xl) plus `inherit` (1em, scales with font-size)
10
+ * - Overridable via the `--lt-icon-size` custom property (wins over the `size` attribute)
10
11
  * - Inherits color from parent via currentColor
11
12
  * - Loads icons from the global icon registry
12
13
  * - Automatically cleans SVG attributes for consistent sizing
13
14
  *
15
+ * Note: setting `font-size` on the icon has no effect on its own — use `size="inherit"`
16
+ * (then `font-size` drives the 1em box) or `--lt-icon-size` for fluid sizing.
17
+ *
18
+ * @cssprop [--lt-icon-size] - Width/height of the icon; overrides the `size` attribute (e.g. `1.5em`, `18px`)
19
+ *
14
20
  * @example
15
21
  * ```html
16
22
  * <lt-icon name="search" size="md"></lt-icon>
17
23
  * <lt-icon name="user" size="lg" style="color: blue;"></lt-icon>
24
+ * <lt-icon name="star" size="inherit"></lt-icon> <!-- scales with surrounding text -->
18
25
  * ```
19
26
  */
20
27
  export declare class Icon extends LitElement {
package/dist/components/icon.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/components/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAErD;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,MAAM,0BAqDX;IAEF;;;OAGG;IAC0B,IAAI,SAAM;IAEvC;;;OAGG;IAC0B,IAAI,EAAE,QAAQ,CAAQ;IAEnD;;;OAGG;IACM,OAAO,CAAC,UAAU,CAAM;IAEjC,OAAO,CAAC,oBAAoB,CAAC,CAAa;IAE1C,iBAAiB;IAMjB,oBAAoB;IAKpB,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMlD;;;;OAIG;IACH,OAAO,CAAC,QAAQ;IAiBhB;;;;;;;;OAQG;IACH,OAAO,CAAC,QAAQ;IAYhB;;;OAGG;IACH,MAAM;CAOP"}
1
+ {"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/components/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,MAAM,0BA2DX;IAEF;;;OAGG;IAC0B,IAAI,SAAM;IAEvC;;;OAGG;IAC0B,IAAI,EAAE,QAAQ,CAAQ;IAEnD;;;OAGG;IACM,OAAO,CAAC,UAAU,CAAM;IAEjC,OAAO,CAAC,oBAAoB,CAAC,CAAa;IAE1C,iBAAiB;IAMjB,oBAAoB;IAKpB,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMlD;;;;OAIG;IACH,OAAO,CAAC,QAAQ;IAiBhB;;;;;;;;OAQG;IACH,OAAO,CAAC,QAAQ;IAYhB;;;OAGG;IACH,MAAM;CAOP"}
package/dist/components/icon.js CHANGED
@@ -14,15 +14,22 @@ import { iconRegistry } from '../registry/icon-registry';
14
14
  * @element lt-icon
15
15
  *
16
16
  * Features:
17
- * - Supports multiple sizes (xs, sm, md, lg, xl)
17
+ * - Supports multiple fixed sizes (xs, sm, md, lg, xl) plus `inherit` (1em, scales with font-size)
18
+ * - Overridable via the `--lt-icon-size` custom property (wins over the `size` attribute)
18
19
  * - Inherits color from parent via currentColor
19
20
  * - Loads icons from the global icon registry
20
21
  * - Automatically cleans SVG attributes for consistent sizing
21
22
  *
23
+ * Note: setting `font-size` on the icon has no effect on its own — use `size="inherit"`
24
+ * (then `font-size` drives the 1em box) or `--lt-icon-size` for fluid sizing.
25
+ *
26
+ * @cssprop [--lt-icon-size] - Width/height of the icon; overrides the `size` attribute (e.g. `1.5em`, `18px`)
27
+ *
22
28
  * @example
23
29
  * ```html
24
30
  * <lt-icon name="search" size="md"></lt-icon>
25
31
  * <lt-icon name="user" size="lg" style="color: blue;"></lt-icon>
32
+ * <lt-icon name="star" size="inherit"></lt-icon> <!-- scales with surrounding text -->
26
33
  * ```
27
34
  */
28
35
  let Icon = class Icon extends LitElement {
@@ -123,30 +130,36 @@ Icon.styles = css `
123
130
  display: block;
124
131
  }
125
132
 
126
- /* sizes */
133
+ /* sizes — --lt-icon-size always wins over the size attribute */
127
134
  :host([size='xs']) {
128
- width: 12px;
129
- height: 12px;
135
+ width: var(--lt-icon-size, 12px);
136
+ height: var(--lt-icon-size, 12px);
130
137
  }
131
138
 
132
139
  :host([size='sm']) {
133
- width: 16px;
134
- height: 16px;
140
+ width: var(--lt-icon-size, 16px);
141
+ height: var(--lt-icon-size, 16px);
135
142
  }
136
143
 
137
144
  :host([size='md']) {
138
- width: 20px;
139
- height: 20px;
145
+ width: var(--lt-icon-size, 20px);
146
+ height: var(--lt-icon-size, 20px);
140
147
  }
141
148
 
142
149
  :host([size='lg']) {
143
- width: 24px;
144
- height: 24px;
150
+ width: var(--lt-icon-size, 24px);
151
+ height: var(--lt-icon-size, 24px);
145
152
  }
146
153
 
147
154
  :host([size='xl']) {
148
- width: 32px;
149
- height: 32px;
155
+ width: var(--lt-icon-size, 32px);
156
+ height: var(--lt-icon-size, 32px);
157
+ }
158
+
159
+ /* 1em box — scales with the inherited font-size */
160
+ :host([size='inherit']) {
161
+ width: var(--lt-icon-size, 1em);
162
+ height: var(--lt-icon-size, 1em);
150
163
  }
151
164
 
152
165
  /* Allow color inheritance */
package/dist/types/icons.types.d.ts CHANGED
@@ -5,8 +5,9 @@
5
5
  * - `md`: 20px (default)
6
6
  * - `lg`: 24px
7
7
  * - `xl`: 32px
8
+ * - `inherit`: 1em — scales with the surrounding `font-size`
8
9
  */
9
- export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
10
+ export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'inherit';
10
11
  /**
11
12
  * Icon definition structure.
12
13
  * Represents a single icon with its name and SVG content.
package/dist/types/icons.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"icons.types.d.ts","sourceRoot":"","sources":["../../src/types/icons.types.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExD;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,wBAAwB;IACxB,GAAG,EAAE,MAAM,CAAC;CACb"}
1
+ {"version":3,"file":"icons.types.d.ts","sourceRoot":"","sources":["../../src/types/icons.types.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;AAEpE;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,wBAAwB;IACxB,GAAG,EAAE,MAAM,CAAC;CACb"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@latty-ds/icons",
3
- "version": "0.7.0",
3
+ "version": "0.8.1",
4
4
  "description": "Icon components for the Latty design system — pluggable icon registry with Iconoir as the default provider",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -25,10 +25,7 @@
25
25
  "README.md",
26
26
  "LICENSE"
27
27
  ],
28
- "sideEffects": [
29
- "./dist/index.js",
30
- "./dist/entries/*.js"
31
- ],
28
+ "sideEffects": true,
32
29
  "type": "module",
33
30
  "main": "./dist/index.js",
34
31
  "types": "./dist/index.d.ts",
@@ -503,5 +500,5 @@
503
500
  "dependencies": {
504
501
  "lit": "^3.2.0"
505
502
  },
506
- "gitHead": "40d5903d30b50455ed244d5f0fd75fbd84934c46"
503
+ "gitHead": "ad7b350db7869de83099eb299f659a254b224570"
507
504
  }