@rgrmdesign/rgrm-ds-elements 0.2.1 → 0.4.0

package/README.md

@@ -18,6 +18,7 @@ Import everything (registers all elements):
 
 ```js
 import '@rgrmdesign/rgrm-ds-tokens';
+import '@rgrmdesign/rgrm-ds-elements/fonts';
 import '@rgrmdesign/rgrm-ds-elements';
 ```
 
@@ -25,12 +26,13 @@ Or register a single component via its sub-path export:
 
 ```js
 import '@rgrmdesign/rgrm-ds-tokens';
+import '@rgrmdesign/rgrm-ds-elements/fonts';
 import '@rgrmdesign/rgrm-ds-elements/heading';
 import '@rgrmdesign/rgrm-ds-elements/paragraph';
 ```
 
 ```html
-<rgrm-heading level="display">Hero title.</rgrm-heading>
+<rgrm-heading level="1" appearance="display">Hero title.</rgrm-heading>
 <rgrm-heading level="1">Page title.</rgrm-heading>
 <rgrm-heading level="2">Section title.</rgrm-heading>
 
@@ -41,12 +43,13 @@ import '@rgrmdesign/rgrm-ds-elements/paragraph';
 
 ## Heading (`<rgrm-heading>`)
 
-| Attribute | Values                 | Description                                           |
-| --------- | ---------------------- | ----------------------------------------------------- |
-| `level`   | `1` … `6` \| `display` | Sets the scale (def. 2). `display` renders an `<h1>`. |
+| Attribute    | Values                 | Description                                              |
+| ------------ | ---------------------- | -------------------------------------------------------- |
+| `level`      | `1` … `6`              | Semantic heading level; sets inner `<h1>`–`<h6>` (def. 2). |
+| `appearance` | `1` … `6` \| `display` | Visual scale; defaults to `level` when omitted.          |
 
 Also exported: `RgrmHeadingElement` (class), `RGRM_HEADING_TAG`
-(`'rgrm-heading'`), and `headingClassNames(level, className?)`.
+(`'rgrm-heading'`), and `headingClassNames(appearance, className?)`.
 
 ## Paragraph (`<rgrm-paragraph>`)
 

package/dist/{chunk-LPYKX4DJ.js → chunk-L3CUOEDZ.js}

@@ -1,32 +1,44 @@
 // src/heading/index.ts
 import "@rgrmdesign/rgrm-ds-css/heading";
-import { headingClassNames as headingClassNames2 } from "@rgrmdesign/rgrm-ds-core/heading";
+import {
+  headingClassNames as headingClassNames2
+} from "@rgrmdesign/rgrm-ds-core/heading";
 
 // src/heading/heading-element.ts
-import { headingClassNames } from "@rgrmdesign/rgrm-ds-core/heading";
+import {
+  headingClassNames
+} from "@rgrmdesign/rgrm-ds-core/heading";
 var RGRM_HEADING_TAG = "rgrm-heading";
 var DEFAULT_LEVEL = 2;
 function parseLevelAttribute(value) {
+  const level = Number(value);
+  return Number.isInteger(level) && level >= 1 && level <= 6 ? level : DEFAULT_LEVEL;
+}
+function parseAppearanceAttribute(value) {
+  if (value === null) {
+    return void 0;
+  }
   if (value === "display") {
     return "display";
   }
-  const level = Number(value);
-  return Number.isInteger(level) && level >= 1 && level <= 6 ? level : DEFAULT_LEVEL;
+  const appearance = Number(value);
+  return Number.isInteger(appearance) && appearance >= 1 && appearance <= 6 ? appearance : void 0;
 }
 var RgrmHeadingElement = class extends HTMLElement {
-  static observedAttributes = ["level"];
+  static observedAttributes = ["level", "appearance"];
   #inner = document.createElement("h2");
   connectedCallback() {
     this.#render();
   }
   attributeChangedCallback(name) {
-    if (name === "level") {
+    if (name === "level" || name === "appearance") {
       this.#render();
     }
   }
   #render() {
     const level = parseLevelAttribute(this.getAttribute("level"));
-    const tagName = level === "display" ? "h1" : `h${level}`;
+    const appearance = parseAppearanceAttribute(this.getAttribute("appearance")) ?? level;
+    const tagName = `h${level}`;
     if (this.#inner.localName !== tagName) {
       const next = document.createElement(tagName);
       while (this.#inner.firstChild) {
@@ -38,7 +50,7 @@ var RgrmHeadingElement = class extends HTMLElement {
       this.#inner = next;
     }
     this.#mountInner();
-    this.#inner.className = headingClassNames(level);
+    this.#inner.className = headingClassNames(appearance);
   }
   #mountInner() {
     if (this.#inner.parentNode === this) {
@@ -61,4 +73,4 @@ export {
   RgrmHeadingElement,
   headingClassNames2 as headingClassNames
 };
-//# sourceMappingURL=chunk-LPYKX4DJ.js.map
+//# sourceMappingURL=chunk-L3CUOEDZ.js.map

package/dist/chunk-L3CUOEDZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/heading/index.ts","../src/heading/heading-element.ts"],"sourcesContent":["import '@rgrmdesign/rgrm-ds-css/heading';\n\nexport {\n  headingClassNames,\n  type HeadingAppearance,\n  type HeadingLevel,\n} from '@rgrmdesign/rgrm-ds-core/heading';\nexport { RGRM_HEADING_TAG, RgrmHeadingElement } from './heading-element.js';\n\nimport { RGRM_HEADING_TAG, RgrmHeadingElement } from './heading-element.js';\n\nif (!customElements.get(RGRM_HEADING_TAG)) {\n  customElements.define(RGRM_HEADING_TAG, RgrmHeadingElement);\n}\n","import {\n  headingClassNames,\n  type HeadingAppearance,\n  type HeadingLevel,\n} from '@rgrmdesign/rgrm-ds-core/heading';\n\nexport const RGRM_HEADING_TAG = 'rgrm-heading';\n\nconst DEFAULT_LEVEL: HeadingLevel = 2;\n\nfunction parseLevelAttribute(value: string | null): HeadingLevel {\n  const level = Number(value);\n  return Number.isInteger(level) && level >= 1 && level <= 6\n    ? (level as HeadingLevel)\n    : DEFAULT_LEVEL;\n}\n\nfunction parseAppearanceAttribute(value: string | null): HeadingAppearance | undefined {\n  if (value === null) {\n    return undefined;\n  }\n  if (value === 'display') {\n    return 'display';\n  }\n  const appearance = Number(value);\n  return Number.isInteger(appearance) && appearance >= 1 && appearance <= 6\n    ? (appearance as HeadingAppearance)\n    : undefined;\n}\n\nexport class RgrmHeadingElement extends HTMLElement {\n  static readonly observedAttributes = ['level', 'appearance'];\n\n  #inner: HTMLHeadingElement = document.createElement('h2');\n\n  connectedCallback(): void {\n    this.#render();\n  }\n\n  attributeChangedCallback(name: string): void {\n    if (name === 'level' || name === 'appearance') {\n      this.#render();\n    }\n  }\n\n  #render(): void {\n    const level = parseLevelAttribute(this.getAttribute('level'));\n    const appearance = parseAppearanceAttribute(this.getAttribute('appearance')) ?? level;\n    const tagName = `h${level}`;\n\n    if (this.#inner.localName !== tagName) {\n      const next = document.createElement(tagName) as HTMLHeadingElement;\n      while (this.#inner.firstChild) {\n        next.appendChild(this.#inner.firstChild);\n      }\n      if (this.#inner.parentNode === this) {\n        this.replaceChild(next, this.#inner);\n      }\n      this.#inner = next;\n    }\n\n    this.#mountInner();\n    this.#inner.className = headingClassNames(appearance);\n  }\n\n  #mountInner(): void {\n    if (this.#inner.parentNode === this) {\n      return;\n    }\n\n    while (this.firstChild) {\n      this.#inner.appendChild(this.firstChild);\n    }\n\n    this.appendChild(this.#inner);\n  }\n}\n"],"mappings":";AAAA,OAAO;AAEP;AAAA,EACE,qBAAAA;AAAA,OAGK;;;ACNP;AAAA,EACE;AAAA,OAGK;AAEA,IAAM,mBAAmB;AAEhC,IAAM,gBAA8B;AAEpC,SAAS,oBAAoB,OAAoC;AAC/D,QAAM,QAAQ,OAAO,KAAK;AAC1B,SAAO,OAAO,UAAU,KAAK,KAAK,SAAS,KAAK,SAAS,IACpD,QACD;AACN;AAEA,SAAS,yBAAyB,OAAqD;AACrF,MAAI,UAAU,MAAM;AAClB,WAAO;AAAA,EACT;AACA,MAAI,UAAU,WAAW;AACvB,WAAO;AAAA,EACT;AACA,QAAM,aAAa,OAAO,KAAK;AAC/B,SAAO,OAAO,UAAU,UAAU,KAAK,cAAc,KAAK,cAAc,IACnE,aACD;AACN;AAEO,IAAM,qBAAN,cAAiC,YAAY;AAAA,EAClD,OAAgB,qBAAqB,CAAC,SAAS,YAAY;AAAA,EAE3D,SAA6B,SAAS,cAAc,IAAI;AAAA,EAExD,oBAA0B;AACxB,SAAK,QAAQ;AAAA,EACf;AAAA,EAEA,yBAAyB,MAAoB;AAC3C,QAAI,SAAS,WAAW,SAAS,cAAc;AAC7C,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AAAA,EAEA,UAAgB;AACd,UAAM,QAAQ,oBAAoB,KAAK,aAAa,OAAO,CAAC;AAC5D,UAAM,aAAa,yBAAyB,KAAK,aAAa,YAAY,CAAC,KAAK;AAChF,UAAM,UAAU,IAAI,KAAK;AAEzB,QAAI,KAAK,OAAO,cAAc,SAAS;AACrC,YAAM,OAAO,SAAS,cAAc,OAAO;AAC3C,aAAO,KAAK,OAAO,YAAY;AAC7B,aAAK,YAAY,KAAK,OAAO,UAAU;AAAA,MACzC;AACA,UAAI,KAAK,OAAO,eAAe,MAAM;AACnC,aAAK,aAAa,MAAM,KAAK,MAAM;AAAA,MACrC;AACA,WAAK,SAAS;AAAA,IAChB;AAEA,SAAK,YAAY;AACjB,SAAK,OAAO,YAAY,kBAAkB,UAAU;AAAA,EACtD;AAAA,EAEA,cAAoB;AAClB,QAAI,KAAK,OAAO,eAAe,MAAM;AACnC;AAAA,IACF;AAEA,WAAO,KAAK,YAAY;AACtB,WAAK,OAAO,YAAY,KAAK,UAAU;AAAA,IACzC;AAEA,SAAK,YAAY,KAAK,MAAM;AAAA,EAC9B;AACF;;;ADjEA,IAAI,CAAC,eAAe,IAAI,gBAAgB,GAAG;AACzC,iBAAe,OAAO,kBAAkB,kBAAkB;AAC5D;","names":["headingClassNames"]}

package/dist/fonts.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/fonts.js

@@ -0,0 +1,3 @@
+// src/fonts.ts
+import "@rgrmdesign/rgrm-ds-css/fonts";
+//# sourceMappingURL=fonts.js.map

package/dist/fonts.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/fonts.ts"],"sourcesContent":["import '@rgrmdesign/rgrm-ds-css/fonts';\n"],"mappings":";AAAA,OAAO;","names":[]}

package/dist/heading/index.d.ts

@@ -1,4 +1,4 @@
-export { HeadingLevel, headingClassNames } from '@rgrmdesign/rgrm-ds-core/heading';
+export { HeadingAppearance, HeadingLevel, headingClassNames } from '@rgrmdesign/rgrm-ds-core/heading';
 
 declare const RGRM_HEADING_TAG = "rgrm-heading";
 declare class RgrmHeadingElement extends HTMLElement {

package/dist/heading/index.js

@@ -2,7 +2,7 @@ import {
   RGRM_HEADING_TAG,
   RgrmHeadingElement,
   headingClassNames
-} from "../chunk-LPYKX4DJ.js";
+} from "../chunk-L3CUOEDZ.js";
 export {
   RGRM_HEADING_TAG,
   RgrmHeadingElement,

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { ButtonVariant, buttonClassNames } from '@rgrmdesign/rgrm-ds-core/button';
 export { RGRM_BUTTON_TAG, RgrmButtonElement } from './button/index.js';
-export { HeadingLevel, headingClassNames } from '@rgrmdesign/rgrm-ds-core/heading';
+export { HeadingAppearance, HeadingLevel, headingClassNames } from '@rgrmdesign/rgrm-ds-core/heading';
 export { RGRM_HEADING_TAG, RgrmHeadingElement } from './heading/index.js';
 export { ParagraphSize, paragraphClassNames } from '@rgrmdesign/rgrm-ds-core/paragraph';
 export { RGRM_PARAGRAPH_TAG, RgrmParagraphElement } from './paragraph/index.js';

package/dist/index.js

@@ -7,7 +7,7 @@ import {
   RGRM_HEADING_TAG,
   RgrmHeadingElement,
   headingClassNames
-} from "./chunk-LPYKX4DJ.js";
+} from "./chunk-L3CUOEDZ.js";
 import {
   RGRM_PARAGRAPH_TAG,
   RgrmParagraphElement,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rgrmdesign/rgrm-ds-elements",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "Web Components for the RGRM design system. Styles come from @rgrmdesign/rgrm-ds-css.",
   "license": "MIT",
   "type": "module",
@@ -29,6 +29,9 @@
     "./section": {
       "types": "./dist/section/index.d.ts",
       "import": "./dist/section/index.js"
+    },
+    "./fonts": {
+      "import": "./dist/fonts.js"
     }
   },
   "files": [
@@ -36,6 +39,7 @@
   ],
   "sideEffects": [
     "@rgrmdesign/rgrm-ds-css",
+    "./dist/fonts.js",
     "./dist/index.js",
     "./dist/button/index.js",
     "./dist/heading/index.js",
@@ -43,14 +47,14 @@
     "./dist/section/index.js"
   ],
   "dependencies": {
-    "@rgrmdesign/rgrm-ds-core": "0.2.1",
-    "@rgrmdesign/rgrm-ds-css": "0.2.1"
+    "@rgrmdesign/rgrm-ds-core": "0.3.0",
+    "@rgrmdesign/rgrm-ds-css": "0.4.0"
   },
   "peerDependencies": {
-    "@rgrmdesign/rgrm-ds-tokens": ">=0.7.0"
+    "@rgrmdesign/rgrm-ds-tokens": ">=0.8.0"
   },
   "devDependencies": {
-    "@rgrmdesign/rgrm-ds-tokens": "^0.7.0",
+    "@rgrmdesign/rgrm-ds-tokens": "^0.8.0",
     "rimraf": "^6.0.1",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"

package/dist/chunk-LPYKX4DJ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/heading/index.ts","../src/heading/heading-element.ts"],"sourcesContent":["import '@rgrmdesign/rgrm-ds-css/heading';\n\nexport { headingClassNames, type HeadingLevel } from '@rgrmdesign/rgrm-ds-core/heading';\nexport { RGRM_HEADING_TAG, RgrmHeadingElement } from './heading-element.js';\n\nimport { RGRM_HEADING_TAG, RgrmHeadingElement } from './heading-element.js';\n\nif (!customElements.get(RGRM_HEADING_TAG)) {\n  customElements.define(RGRM_HEADING_TAG, RgrmHeadingElement);\n}\n","import { headingClassNames, type HeadingLevel } from '@rgrmdesign/rgrm-ds-core/heading';\n\nexport const RGRM_HEADING_TAG = 'rgrm-heading';\n\nconst DEFAULT_LEVEL: HeadingLevel = 2;\n\nfunction parseLevelAttribute(value: string | null): HeadingLevel {\n  if (value === 'display') {\n    return 'display';\n  }\n  const level = Number(value);\n  return Number.isInteger(level) && level >= 1 && level <= 6\n    ? (level as HeadingLevel)\n    : DEFAULT_LEVEL;\n}\n\nexport class RgrmHeadingElement extends HTMLElement {\n  static readonly observedAttributes = ['level'];\n\n  #inner: HTMLHeadingElement = document.createElement('h2');\n\n  connectedCallback(): void {\n    this.#render();\n  }\n\n  attributeChangedCallback(name: string): void {\n    if (name === 'level') {\n      this.#render();\n    }\n  }\n\n  #render(): void {\n    const level = parseLevelAttribute(this.getAttribute('level'));\n    const tagName = level === 'display' ? 'h1' : `h${level}`;\n\n    if (this.#inner.localName !== tagName) {\n      const next = document.createElement(tagName) as HTMLHeadingElement;\n      while (this.#inner.firstChild) {\n        next.appendChild(this.#inner.firstChild);\n      }\n      if (this.#inner.parentNode === this) {\n        this.replaceChild(next, this.#inner);\n      }\n      this.#inner = next;\n    }\n\n    this.#mountInner();\n    this.#inner.className = headingClassNames(level);\n  }\n\n  #mountInner(): void {\n    if (this.#inner.parentNode === this) {\n      return;\n    }\n\n    while (this.firstChild) {\n      this.#inner.appendChild(this.firstChild);\n    }\n\n    this.appendChild(this.#inner);\n  }\n}\n"],"mappings":";AAAA,OAAO;AAEP,SAAS,qBAAAA,0BAA4C;;;ACFrD,SAAS,yBAA4C;AAE9C,IAAM,mBAAmB;AAEhC,IAAM,gBAA8B;AAEpC,SAAS,oBAAoB,OAAoC;AAC/D,MAAI,UAAU,WAAW;AACvB,WAAO;AAAA,EACT;AACA,QAAM,QAAQ,OAAO,KAAK;AAC1B,SAAO,OAAO,UAAU,KAAK,KAAK,SAAS,KAAK,SAAS,IACpD,QACD;AACN;AAEO,IAAM,qBAAN,cAAiC,YAAY;AAAA,EAClD,OAAgB,qBAAqB,CAAC,OAAO;AAAA,EAE7C,SAA6B,SAAS,cAAc,IAAI;AAAA,EAExD,oBAA0B;AACxB,SAAK,QAAQ;AAAA,EACf;AAAA,EAEA,yBAAyB,MAAoB;AAC3C,QAAI,SAAS,SAAS;AACpB,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AAAA,EAEA,UAAgB;AACd,UAAM,QAAQ,oBAAoB,KAAK,aAAa,OAAO,CAAC;AAC5D,UAAM,UAAU,UAAU,YAAY,OAAO,IAAI,KAAK;AAEtD,QAAI,KAAK,OAAO,cAAc,SAAS;AACrC,YAAM,OAAO,SAAS,cAAc,OAAO;AAC3C,aAAO,KAAK,OAAO,YAAY;AAC7B,aAAK,YAAY,KAAK,OAAO,UAAU;AAAA,MACzC;AACA,UAAI,KAAK,OAAO,eAAe,MAAM;AACnC,aAAK,aAAa,MAAM,KAAK,MAAM;AAAA,MACrC;AACA,WAAK,SAAS;AAAA,IAChB;AAEA,SAAK,YAAY;AACjB,SAAK,OAAO,YAAY,kBAAkB,KAAK;AAAA,EACjD;AAAA,EAEA,cAAoB;AAClB,QAAI,KAAK,OAAO,eAAe,MAAM;AACnC;AAAA,IACF;AAEA,WAAO,KAAK,YAAY;AACtB,WAAK,OAAO,YAAY,KAAK,UAAU;AAAA,IACzC;AAEA,SAAK,YAAY,KAAK,MAAM;AAAA,EAC9B;AACF;;;ADtDA,IAAI,CAAC,eAAe,IAAI,gBAAgB,GAAG;AACzC,iBAAe,OAAO,kBAAkB,kBAAkB;AAC5D;","names":["headingClassNames"]}