@rgrmdesign/rgrm-ds-elements 0.1.0

package/README.md

@@ -0,0 +1,58 @@
+# @rgrmdesign/rgrm-ds-elements
+
+Web Components for the RGRM design system. Styles come from
+[`@rgrmdesign/rgrm-ds-css`](../css/) and are loaded automatically on import.
+
+Components use **light DOM** (an inner element with BEM classes) so design tokens
+from the document apply normally.
+
+## Install
+
+```bash
+pnpm add @rgrmdesign/rgrm-ds-elements @rgrmdesign/rgrm-ds-tokens
+```
+
+## Usage
+
+Import everything (registers all elements):
+
+```js
+import '@rgrmdesign/rgrm-ds-tokens';
+import '@rgrmdesign/rgrm-ds-elements';
+```
+
+Or register a single component via its sub-path export:
+
+```js
+import '@rgrmdesign/rgrm-ds-tokens';
+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">Page title.</rgrm-heading>
+<rgrm-heading level="2">Section title.</rgrm-heading>
+
+<rgrm-paragraph size="large">Lead paragraph.</rgrm-paragraph>
+<rgrm-paragraph>Default body copy.</rgrm-paragraph>
+<rgrm-paragraph size="small">Caption or fine print.</rgrm-paragraph>
+```
+
+## Heading (`<rgrm-heading>`)
+
+| Attribute | Values                 | Description                                           |
+| --------- | ---------------------- | ----------------------------------------------------- |
+| `level`   | `1` … `6` \| `display` | Sets the scale (def. 2). `display` renders an `<h1>`. |
+
+Also exported: `RgrmHeadingElement` (class), `RGRM_HEADING_TAG`
+(`'rgrm-heading'`), and `headingClassNames(level, className?)`.
+
+## Paragraph (`<rgrm-paragraph>`)
+
+| Attribute | Values             | Description                   |
+| --------- | ------------------ | ----------------------------- |
+| `size`    | `small` \| `large` | Size modifier; omit for main. |
+
+Also exported: `RgrmParagraphElement` (class), `RGRM_PARAGRAPH_TAG`
+(`'rgrm-paragraph'`), and `paragraphClassNames(size, className?)`.

package/dist/chunk-D4TJU75K.js

@@ -0,0 +1,49 @@
+// src/paragraph/index.ts
+import "@rgrmdesign/rgrm-ds-css/paragraph";
+import { paragraphClassNames as paragraphClassNames2 } from "@rgrmdesign/rgrm-ds-core/paragraph";
+
+// src/paragraph/paragraph-element.ts
+import { paragraphClassNames } from "@rgrmdesign/rgrm-ds-core/paragraph";
+var RGRM_PARAGRAPH_TAG = "rgrm-paragraph";
+function parseSizeAttribute(value) {
+  return value === "small" || value === "large" ? value : void 0;
+}
+var RgrmParagraphElement = class extends HTMLElement {
+  static observedAttributes = ["size"];
+  #inner = document.createElement("p");
+  connectedCallback() {
+    this.#mountInner();
+    this.#applyClasses();
+  }
+  attributeChangedCallback(name) {
+    if (name === "size") {
+      this.#applyClasses();
+    }
+  }
+  #mountInner() {
+    if (this.#inner.parentNode === this) {
+      return;
+    }
+    while (this.firstChild) {
+      this.#inner.appendChild(this.firstChild);
+    }
+    this.appendChild(this.#inner);
+  }
+  #applyClasses() {
+    this.#inner.className = paragraphClassNames(
+      parseSizeAttribute(this.getAttribute("size"))
+    );
+  }
+};
+
+// src/paragraph/index.ts
+if (!customElements.get(RGRM_PARAGRAPH_TAG)) {
+  customElements.define(RGRM_PARAGRAPH_TAG, RgrmParagraphElement);
+}
+
+export {
+  RGRM_PARAGRAPH_TAG,
+  RgrmParagraphElement,
+  paragraphClassNames2 as paragraphClassNames
+};
+//# sourceMappingURL=chunk-D4TJU75K.js.map

package/dist/chunk-D4TJU75K.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/paragraph/index.ts","../src/paragraph/paragraph-element.ts"],"sourcesContent":["import '@rgrmdesign/rgrm-ds-css/paragraph';\n\nexport { paragraphClassNames, type ParagraphSize } from '@rgrmdesign/rgrm-ds-core/paragraph';\nexport {\n  RGRM_PARAGRAPH_TAG,\n  RgrmParagraphElement,\n} from './paragraph-element.js';\n\nimport { RGRM_PARAGRAPH_TAG, RgrmParagraphElement } from './paragraph-element.js';\n\nif (!customElements.get(RGRM_PARAGRAPH_TAG)) {\n  customElements.define(RGRM_PARAGRAPH_TAG, RgrmParagraphElement);\n}\n","import { paragraphClassNames, type ParagraphSize } from '@rgrmdesign/rgrm-ds-core/paragraph';\n\nexport const RGRM_PARAGRAPH_TAG = 'rgrm-paragraph';\n\nfunction parseSizeAttribute(value: string | null): ParagraphSize | undefined {\n  return value === 'small' || value === 'large' ? value : undefined;\n}\n\nexport class RgrmParagraphElement extends HTMLElement {\n  static readonly observedAttributes = ['size'];\n\n  readonly #inner = document.createElement('p');\n\n  connectedCallback(): void {\n    this.#mountInner();\n    this.#applyClasses();\n  }\n\n  attributeChangedCallback(name: string): void {\n    if (name === 'size') {\n      this.#applyClasses();\n    }\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  #applyClasses(): void {\n    this.#inner.className = paragraphClassNames(\n      parseSizeAttribute(this.getAttribute('size')),\n    );\n  }\n}\n"],"mappings":";AAAA,OAAO;AAEP,SAAS,uBAAAA,4BAA+C;;;ACFxD,SAAS,2BAA+C;AAEjD,IAAM,qBAAqB;AAElC,SAAS,mBAAmB,OAAiD;AAC3E,SAAO,UAAU,WAAW,UAAU,UAAU,QAAQ;AAC1D;AAEO,IAAM,uBAAN,cAAmC,YAAY;AAAA,EACpD,OAAgB,qBAAqB,CAAC,MAAM;AAAA,EAEnC,SAAS,SAAS,cAAc,GAAG;AAAA,EAE5C,oBAA0B;AACxB,SAAK,YAAY;AACjB,SAAK,cAAc;AAAA,EACrB;AAAA,EAEA,yBAAyB,MAAoB;AAC3C,QAAI,SAAS,QAAQ;AACnB,WAAK,cAAc;AAAA,IACrB;AAAA,EACF;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;AAAA,EAEA,gBAAsB;AACpB,SAAK,OAAO,YAAY;AAAA,MACtB,mBAAmB,KAAK,aAAa,MAAM,CAAC;AAAA,IAC9C;AAAA,EACF;AACF;;;AD/BA,IAAI,CAAC,eAAe,IAAI,kBAAkB,GAAG;AAC3C,iBAAe,OAAO,oBAAoB,oBAAoB;AAChE;","names":["paragraphClassNames"]}

package/dist/chunk-LPYKX4DJ.js

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

package/dist/chunk-LPYKX4DJ.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 { 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"]}

package/dist/chunk-OB3YM7YY.js

@@ -0,0 +1,87 @@
+// src/section/index.ts
+import "@rgrmdesign/rgrm-ds-css/section";
+import {
+  sectionClassNames as sectionClassNames2,
+  sectionContainerClassNames as sectionContainerClassNames2
+} from "@rgrmdesign/rgrm-ds-core/section";
+
+// src/section/section-element.ts
+import {
+  RGRM_SECTION_BACKGROUND_CLASS,
+  sectionClassNames,
+  sectionContainerClassNames
+} from "@rgrmdesign/rgrm-ds-core/section";
+var RGRM_SECTION_TAG = "rgrm-section";
+var SPACINGS = ["none", "small", "main", "large", "page-top"];
+var WIDTHS = ["small", "main", "full"];
+var THEMES = ["root", "dark", "brand"];
+function parseSpacing(value) {
+  return SPACINGS.includes(value ?? "") ? value : "main";
+}
+function parseWidth(value) {
+  return WIDTHS.includes(value ?? "") ? value : "main";
+}
+function parseTheme(value) {
+  return THEMES.includes(value ?? "") ? value : "root";
+}
+var RgrmSectionElement = class extends HTMLElement {
+  static observedAttributes = ["theme", "spacing-top", "spacing-bottom", "width"];
+  #background = document.createElement("div");
+  #container = document.createElement("div");
+  #mounted = false;
+  connectedCallback() {
+    this.#mountInner();
+    this.#applyClasses();
+  }
+  attributeChangedCallback() {
+    if (this.#mounted) {
+      this.#applyClasses();
+    }
+  }
+  #mountInner() {
+    if (this.#mounted) {
+      return;
+    }
+    this.#background.className = RGRM_SECTION_BACKGROUND_CLASS;
+    const nodes = Array.from(this.childNodes);
+    for (const node of nodes) {
+      if (node.nodeType === Node.ELEMENT_NODE && node.getAttribute("slot") === "background") {
+        node.removeAttribute("slot");
+        this.#background.appendChild(node);
+      } else {
+        this.#container.appendChild(node);
+      }
+    }
+    if (this.#background.childNodes.length > 0) {
+      this.appendChild(this.#background);
+    }
+    this.appendChild(this.#container);
+    this.#mounted = true;
+  }
+  #applyClasses() {
+    this.className = sectionClassNames({
+      spacingTop: parseSpacing(this.getAttribute("spacing-top")),
+      spacingBottom: parseSpacing(this.getAttribute("spacing-bottom"))
+    });
+    this.#container.className = sectionContainerClassNames(parseWidth(this.getAttribute("width")));
+    const theme = parseTheme(this.getAttribute("theme"));
+    if (theme === "root") {
+      this.removeAttribute("data-theme");
+    } else {
+      this.setAttribute("data-theme", theme);
+    }
+  }
+};
+
+// src/section/index.ts
+if (!customElements.get(RGRM_SECTION_TAG)) {
+  customElements.define(RGRM_SECTION_TAG, RgrmSectionElement);
+}
+
+export {
+  RGRM_SECTION_TAG,
+  RgrmSectionElement,
+  sectionClassNames2 as sectionClassNames,
+  sectionContainerClassNames2 as sectionContainerClassNames
+};
+//# sourceMappingURL=chunk-OB3YM7YY.js.map

package/dist/chunk-OB3YM7YY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/section/index.ts","../src/section/section-element.ts"],"sourcesContent":["import '@rgrmdesign/rgrm-ds-css/section';\n\nexport {\n  sectionClassNames,\n  sectionContainerClassNames,\n  type SectionTheme,\n  type SectionSpacing,\n  type SectionWidth,\n} from '@rgrmdesign/rgrm-ds-core/section';\nexport { RGRM_SECTION_TAG, RgrmSectionElement } from './section-element.js';\n\nimport { RGRM_SECTION_TAG, RgrmSectionElement } from './section-element.js';\n\nif (!customElements.get(RGRM_SECTION_TAG)) {\n  customElements.define(RGRM_SECTION_TAG, RgrmSectionElement);\n}\n","import {\n  RGRM_SECTION_BACKGROUND_CLASS,\n  sectionClassNames,\n  sectionContainerClassNames,\n  type SectionSpacing,\n  type SectionTheme,\n  type SectionWidth,\n} from '@rgrmdesign/rgrm-ds-core/section';\n\nexport const RGRM_SECTION_TAG = 'rgrm-section';\n\nconst SPACINGS: readonly SectionSpacing[] = ['none', 'small', 'main', 'large', 'page-top'];\nconst WIDTHS: readonly SectionWidth[] = ['small', 'main', 'full'];\nconst THEMES: readonly SectionTheme[] = ['root', 'dark', 'brand'];\n\nfunction parseSpacing(value: string | null): SectionSpacing {\n  return (SPACINGS as readonly string[]).includes(value ?? '') ? (value as SectionSpacing) : 'main';\n}\n\nfunction parseWidth(value: string | null): SectionWidth {\n  return (WIDTHS as readonly string[]).includes(value ?? '') ? (value as SectionWidth) : 'main';\n}\n\nfunction parseTheme(value: string | null): SectionTheme {\n  return (THEMES as readonly string[]).includes(value ?? '') ? (value as SectionTheme) : 'root';\n}\n\nexport class RgrmSectionElement extends HTMLElement {\n  static readonly observedAttributes = ['theme', 'spacing-top', 'spacing-bottom', 'width'];\n\n  readonly #background = document.createElement('div');\n  readonly #container = document.createElement('div');\n  #mounted = false;\n\n  connectedCallback(): void {\n    this.#mountInner();\n    this.#applyClasses();\n  }\n\n  attributeChangedCallback(): void {\n    if (this.#mounted) {\n      this.#applyClasses();\n    }\n  }\n\n  #mountInner(): void {\n    if (this.#mounted) {\n      return;\n    }\n\n    this.#background.className = RGRM_SECTION_BACKGROUND_CLASS;\n\n    const nodes = Array.from(this.childNodes);\n    for (const node of nodes) {\n      if (\n        node.nodeType === Node.ELEMENT_NODE &&\n        (node as Element).getAttribute('slot') === 'background'\n      ) {\n        (node as Element).removeAttribute('slot');\n        this.#background.appendChild(node);\n      } else {\n        this.#container.appendChild(node);\n      }\n    }\n\n    if (this.#background.childNodes.length > 0) {\n      this.appendChild(this.#background);\n    }\n    this.appendChild(this.#container);\n    this.#mounted = true;\n  }\n\n  #applyClasses(): void {\n    this.className = sectionClassNames({\n      spacingTop: parseSpacing(this.getAttribute('spacing-top')),\n      spacingBottom: parseSpacing(this.getAttribute('spacing-bottom')),\n    });\n\n    this.#container.className = sectionContainerClassNames(parseWidth(this.getAttribute('width')));\n\n    const theme = parseTheme(this.getAttribute('theme'));\n    if (theme === 'root') {\n      this.removeAttribute('data-theme');\n    } else {\n      this.setAttribute('data-theme', theme);\n    }\n  }\n}\n"],"mappings":";AAAA,OAAO;AAEP;AAAA,EACE,qBAAAA;AAAA,EACA,8BAAAC;AAAA,OAIK;;;ACRP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAEA,IAAM,mBAAmB;AAEhC,IAAM,WAAsC,CAAC,QAAQ,SAAS,QAAQ,SAAS,UAAU;AACzF,IAAM,SAAkC,CAAC,SAAS,QAAQ,MAAM;AAChE,IAAM,SAAkC,CAAC,QAAQ,QAAQ,OAAO;AAEhE,SAAS,aAAa,OAAsC;AAC1D,SAAQ,SAA+B,SAAS,SAAS,EAAE,IAAK,QAA2B;AAC7F;AAEA,SAAS,WAAW,OAAoC;AACtD,SAAQ,OAA6B,SAAS,SAAS,EAAE,IAAK,QAAyB;AACzF;AAEA,SAAS,WAAW,OAAoC;AACtD,SAAQ,OAA6B,SAAS,SAAS,EAAE,IAAK,QAAyB;AACzF;AAEO,IAAM,qBAAN,cAAiC,YAAY;AAAA,EAClD,OAAgB,qBAAqB,CAAC,SAAS,eAAe,kBAAkB,OAAO;AAAA,EAE9E,cAAc,SAAS,cAAc,KAAK;AAAA,EAC1C,aAAa,SAAS,cAAc,KAAK;AAAA,EAClD,WAAW;AAAA,EAEX,oBAA0B;AACxB,SAAK,YAAY;AACjB,SAAK,cAAc;AAAA,EACrB;AAAA,EAEA,2BAAiC;AAC/B,QAAI,KAAK,UAAU;AACjB,WAAK,cAAc;AAAA,IACrB;AAAA,EACF;AAAA,EAEA,cAAoB;AAClB,QAAI,KAAK,UAAU;AACjB;AAAA,IACF;AAEA,SAAK,YAAY,YAAY;AAE7B,UAAM,QAAQ,MAAM,KAAK,KAAK,UAAU;AACxC,eAAW,QAAQ,OAAO;AACxB,UACE,KAAK,aAAa,KAAK,gBACtB,KAAiB,aAAa,MAAM,MAAM,cAC3C;AACA,QAAC,KAAiB,gBAAgB,MAAM;AACxC,aAAK,YAAY,YAAY,IAAI;AAAA,MACnC,OAAO;AACL,aAAK,WAAW,YAAY,IAAI;AAAA,MAClC;AAAA,IACF;AAEA,QAAI,KAAK,YAAY,WAAW,SAAS,GAAG;AAC1C,WAAK,YAAY,KAAK,WAAW;AAAA,IACnC;AACA,SAAK,YAAY,KAAK,UAAU;AAChC,SAAK,WAAW;AAAA,EAClB;AAAA,EAEA,gBAAsB;AACpB,SAAK,YAAY,kBAAkB;AAAA,MACjC,YAAY,aAAa,KAAK,aAAa,aAAa,CAAC;AAAA,MACzD,eAAe,aAAa,KAAK,aAAa,gBAAgB,CAAC;AAAA,IACjE,CAAC;AAED,SAAK,WAAW,YAAY,2BAA2B,WAAW,KAAK,aAAa,OAAO,CAAC,CAAC;AAE7F,UAAM,QAAQ,WAAW,KAAK,aAAa,OAAO,CAAC;AACnD,QAAI,UAAU,QAAQ;AACpB,WAAK,gBAAgB,YAAY;AAAA,IACnC,OAAO;AACL,WAAK,aAAa,cAAc,KAAK;AAAA,IACvC;AAAA,EACF;AACF;;;AD1EA,IAAI,CAAC,eAAe,IAAI,gBAAgB,GAAG;AACzC,iBAAe,OAAO,kBAAkB,kBAAkB;AAC5D;","names":["sectionClassNames","sectionContainerClassNames"]}

package/dist/heading/index.d.ts

@@ -0,0 +1,11 @@
+export { HeadingLevel, headingClassNames } from '@rgrmdesign/rgrm-ds-core/heading';
+
+declare const RGRM_HEADING_TAG = "rgrm-heading";
+declare class RgrmHeadingElement extends HTMLElement {
+    #private;
+    static readonly observedAttributes: string[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+}
+
+export { RGRM_HEADING_TAG, RgrmHeadingElement };

package/dist/heading/index.js

@@ -0,0 +1,11 @@
+import {
+  RGRM_HEADING_TAG,
+  RgrmHeadingElement,
+  headingClassNames
+} from "../chunk-LPYKX4DJ.js";
+export {
+  RGRM_HEADING_TAG,
+  RgrmHeadingElement,
+  headingClassNames
+};
+//# sourceMappingURL=index.js.map

package/dist/heading/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { 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';
+export { SectionSpacing, SectionTheme, SectionWidth, sectionClassNames, sectionContainerClassNames } from '@rgrmdesign/rgrm-ds-core/section';
+export { RGRM_SECTION_TAG, RgrmSectionElement } from './section/index.js';

package/dist/index.js

@@ -0,0 +1,29 @@
+import {
+  RGRM_HEADING_TAG,
+  RgrmHeadingElement,
+  headingClassNames
+} from "./chunk-LPYKX4DJ.js";
+import {
+  RGRM_PARAGRAPH_TAG,
+  RgrmParagraphElement,
+  paragraphClassNames
+} from "./chunk-D4TJU75K.js";
+import {
+  RGRM_SECTION_TAG,
+  RgrmSectionElement,
+  sectionClassNames,
+  sectionContainerClassNames
+} from "./chunk-OB3YM7YY.js";
+export {
+  RGRM_HEADING_TAG,
+  RGRM_PARAGRAPH_TAG,
+  RGRM_SECTION_TAG,
+  RgrmHeadingElement,
+  RgrmParagraphElement,
+  RgrmSectionElement,
+  headingClassNames,
+  paragraphClassNames,
+  sectionClassNames,
+  sectionContainerClassNames
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/paragraph/index.d.ts

@@ -0,0 +1,11 @@
+export { ParagraphSize, paragraphClassNames } from '@rgrmdesign/rgrm-ds-core/paragraph';
+
+declare const RGRM_PARAGRAPH_TAG = "rgrm-paragraph";
+declare class RgrmParagraphElement extends HTMLElement {
+    #private;
+    static readonly observedAttributes: string[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+}
+
+export { RGRM_PARAGRAPH_TAG, RgrmParagraphElement };

package/dist/paragraph/index.js

@@ -0,0 +1,11 @@
+import {
+  RGRM_PARAGRAPH_TAG,
+  RgrmParagraphElement,
+  paragraphClassNames
+} from "../chunk-D4TJU75K.js";
+export {
+  RGRM_PARAGRAPH_TAG,
+  RgrmParagraphElement,
+  paragraphClassNames
+};
+//# sourceMappingURL=index.js.map

package/dist/paragraph/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/section/index.d.ts

@@ -0,0 +1,11 @@
+export { SectionSpacing, SectionTheme, SectionWidth, sectionClassNames, sectionContainerClassNames } from '@rgrmdesign/rgrm-ds-core/section';
+
+declare const RGRM_SECTION_TAG = "rgrm-section";
+declare class RgrmSectionElement extends HTMLElement {
+    #private;
+    static readonly observedAttributes: string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+}
+
+export { RGRM_SECTION_TAG, RgrmSectionElement };

package/dist/section/index.js

@@ -0,0 +1,13 @@
+import {
+  RGRM_SECTION_TAG,
+  RgrmSectionElement,
+  sectionClassNames,
+  sectionContainerClassNames
+} from "../chunk-OB3YM7YY.js";
+export {
+  RGRM_SECTION_TAG,
+  RgrmSectionElement,
+  sectionClassNames,
+  sectionContainerClassNames
+};
+//# sourceMappingURL=index.js.map

package/dist/section/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@rgrmdesign/rgrm-ds-elements",
+  "version": "0.1.0",
+  "description": "Web Components for the RGRM design system. Styles come from @rgrmdesign/rgrm-ds-css.",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/RGRMdesign/rgrm-ds.git",
+    "directory": "packages/elements"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./heading": {
+      "types": "./dist/heading/index.d.ts",
+      "import": "./dist/heading/index.js"
+    },
+    "./paragraph": {
+      "types": "./dist/paragraph/index.d.ts",
+      "import": "./dist/paragraph/index.js"
+    },
+    "./section": {
+      "types": "./dist/section/index.d.ts",
+      "import": "./dist/section/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "@rgrmdesign/rgrm-ds-css",
+    "./dist/index.js",
+    "./dist/heading/index.js",
+    "./dist/paragraph/index.js",
+    "./dist/section/index.js"
+  ],
+  "dependencies": {
+    "@rgrmdesign/rgrm-ds-core": "0.1.0",
+    "@rgrmdesign/rgrm-ds-css": "0.1.0"
+  },
+  "peerDependencies": {
+    "@rgrmdesign/rgrm-ds-tokens": ">=0.5.0"
+  },
+  "devDependencies": {
+    "@rgrmdesign/rgrm-ds-tokens": "^0.5.0",
+    "rimraf": "^6.0.1",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "keywords": [
+    "custom-elements",
+    "design-system",
+    "typography",
+    "web-components"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rimraf dist"
+  }
+}