@latty-ds/icons 0.7.0 → 0.8.0

package/dist/components/icon.d.ts

@@ -6,15 +6,22 @@ import type { IconSize } from '../types/icons.types';
  * @element lt-icon
  *
  * Features:
- * - Supports multiple sizes (xs, sm, md, lg, xl)
+ * - Supports multiple fixed sizes (xs, sm, md, lg, xl) plus `inherit` (1em, scales with font-size)
+ * - Overridable via the `--lt-icon-size` custom property (wins over the `size` attribute)
  * - Inherits color from parent via currentColor
  * - Loads icons from the global icon registry
  * - Automatically cleans SVG attributes for consistent sizing
  *
+ * Note: setting `font-size` on the icon has no effect on its own — use `size="inherit"`
+ * (then `font-size` drives the 1em box) or `--lt-icon-size` for fluid sizing.
+ *
+ * @cssprop [--lt-icon-size] - Width/height of the icon; overrides the `size` attribute (e.g. `1.5em`, `18px`)
+ *
  * @example
  * ```html
  * <lt-icon name="search" size="md"></lt-icon>
  * <lt-icon name="user" size="lg" style="color: blue;"></lt-icon>
+ * <lt-icon name="star" size="inherit"></lt-icon> <!-- scales with surrounding text -->
  * ```
  */
 export declare class Icon extends LitElement {

package/dist/components/icon.d.ts.map

@@ -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"}
+{"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

@@ -14,15 +14,22 @@ import { iconRegistry } from '../registry/icon-registry';
  * @element lt-icon
  *
  * Features:
- * - Supports multiple sizes (xs, sm, md, lg, xl)
+ * - Supports multiple fixed sizes (xs, sm, md, lg, xl) plus `inherit` (1em, scales with font-size)
+ * - Overridable via the `--lt-icon-size` custom property (wins over the `size` attribute)
  * - Inherits color from parent via currentColor
  * - Loads icons from the global icon registry
  * - Automatically cleans SVG attributes for consistent sizing
  *
+ * Note: setting `font-size` on the icon has no effect on its own — use `size="inherit"`
+ * (then `font-size` drives the 1em box) or `--lt-icon-size` for fluid sizing.
+ *
+ * @cssprop [--lt-icon-size] - Width/height of the icon; overrides the `size` attribute (e.g. `1.5em`, `18px`)
+ *
  * @example
  * ```html
  * <lt-icon name="search" size="md"></lt-icon>
  * <lt-icon name="user" size="lg" style="color: blue;"></lt-icon>
+ * <lt-icon name="star" size="inherit"></lt-icon> <!-- scales with surrounding text -->
  * ```
  */
 let Icon = class Icon extends LitElement {
@@ -123,30 +130,36 @@ Icon.styles = css `
       display: block;
     }
 
-    /* sizes */
+    /* sizes — --lt-icon-size always wins over the size attribute */
     :host([size='xs']) {
-      width: 12px;
-      height: 12px;
+      width: var(--lt-icon-size, 12px);
+      height: var(--lt-icon-size, 12px);
     }
 
     :host([size='sm']) {
-      width: 16px;
-      height: 16px;
+      width: var(--lt-icon-size, 16px);
+      height: var(--lt-icon-size, 16px);
     }
 
     :host([size='md']) {
-      width: 20px;
-      height: 20px;
+      width: var(--lt-icon-size, 20px);
+      height: var(--lt-icon-size, 20px);
     }
 
     :host([size='lg']) {
-      width: 24px;
-      height: 24px;
+      width: var(--lt-icon-size, 24px);
+      height: var(--lt-icon-size, 24px);
     }
 
     :host([size='xl']) {
-      width: 32px;
-      height: 32px;
+      width: var(--lt-icon-size, 32px);
+      height: var(--lt-icon-size, 32px);
+    }
+
+    /* 1em box — scales with the inherited font-size */
+    :host([size='inherit']) {
+      width: var(--lt-icon-size, 1em);
+      height: var(--lt-icon-size, 1em);
     }
 
     /* Allow color inheritance */

package/dist/types/icons.types.d.ts

@@ -5,8 +5,9 @@
  * - `md`: 20px (default)
  * - `lg`: 24px
  * - `xl`: 32px
+ * - `inherit`: 1em — scales with the surrounding `font-size`
  */
-export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'inherit';
 /**
  * Icon definition structure.
  * Represents a single icon with its name and SVG content.

package/dist/types/icons.types.d.ts.map

@@ -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"}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@latty-ds/icons",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Icon components for the Latty design system — pluggable icon registry with Iconoir as the default provider",
   "license": "MIT",
   "repository": {
@@ -503,5 +503,5 @@
   "dependencies": {
     "lit": "^3.2.0"
   },
-  "gitHead": "40d5903d30b50455ed244d5f0fd75fbd84934c46"
+  "gitHead": "144dd8d2f7440fd5fd8ecb4f396407c4ce3be9f2"
 }