@visitwonders/assembly 0.1.0 → 0.3.0

package/dist/status/tag.css

@@ -1,8 +1,9 @@
+/* src/status/tag.css */
 /* ===================================
  * Tag Component
  * =================================== */
 
-.tag {
+.tag_e873402ac {
   /* Layout */
   position: relative;
   display: inline-flex;
@@ -29,7 +30,7 @@
  * Tag Content (inner interactive/static element)
  * =================================== */
 
-.tag-content {
+.tag-content_e873402ac {
   /* Reset */
   appearance: none;
   border: none;
@@ -47,13 +48,11 @@
 }
 
 /* Interactive content */
-button.tag-content,
-a.tag-content {
+button.e873402ac.tag-content_e873402ac,a.e873402ac.tag-content_e873402ac {
   cursor: pointer;
 }
 
-button.tag-content:focus-visible,
-a.tag-content:focus-visible {
+button.e873402ac.tag-content_e873402ac:focus-visible,a.e873402ac.tag-content_e873402ac:focus-visible {
   outline: none;
   box-shadow: inset 0 0 0 2px var(--color-focus-ring-halo);
 }
@@ -62,56 +61,56 @@ a.tag-content:focus-visible {
  * Sizes
  * =================================== */
 
-.tag[data-size="sm"] {
+.tag_e873402ac[data-size="sm"] {
   height: var(--spacing-5);
   font-size: var(--font-size-xs);
 }
 
-.tag[data-size="sm"] .tag-content {
+.tag_e873402ac[data-size="sm"] .tag-content_e873402ac {
   padding: 0 var(--spacing-2);
 }
 
-.tag[data-size="md"] {
+.tag_e873402ac[data-size="md"] {
   height: var(--spacing-6);
   font-size: var(--font-size-sm);
 }
 
-.tag[data-size="md"] .tag-content {
+.tag_e873402ac[data-size="md"] .tag-content_e873402ac {
   padding: 0 var(--spacing-2-5);
 }
 
-.tag[data-size="lg"] {
+.tag_e873402ac[data-size="lg"] {
   height: var(--spacing-7);
   font-size: var(--font-size-sm);
 }
 
-.tag[data-size="lg"] .tag-content {
+.tag_e873402ac[data-size="lg"] .tag-content_e873402ac {
   padding: 0 var(--spacing-3);
 }
 
 /* Adjust padding when has accent bar */
-.tag[data-has-accent="true"][data-size="sm"] .tag-content {
+.tag_e873402ac[data-has-accent="true"][data-size="sm"] .tag-content_e873402ac {
   padding-left: var(--spacing-2);
 }
 
-.tag[data-has-accent="true"][data-size="md"] .tag-content {
+.tag_e873402ac[data-has-accent="true"][data-size="md"] .tag-content_e873402ac {
   padding-left: var(--spacing-2-5);
 }
 
-.tag[data-has-accent="true"][data-size="lg"] .tag-content {
+.tag_e873402ac[data-has-accent="true"][data-size="lg"] .tag-content_e873402ac {
   padding-left: var(--spacing-3);
 }
 
 /* Adjust padding when removable */
-.tag[data-removable="true"][data-size="sm"] .tag-content {
+.tag_e873402ac[data-removable="true"][data-size="sm"] .tag-content_e873402ac {
   padding-right: var(--spacing-1);
 }
 
-.tag[data-removable="true"][data-size="md"] .tag-content {
+.tag_e873402ac[data-removable="true"][data-size="md"] .tag-content_e873402ac {
   padding-right: var(--spacing-1);
 }
 
-.tag[data-removable="true"][data-size="lg"] .tag-content {
+.tag_e873402ac[data-removable="true"][data-size="lg"] .tag-content_e873402ac {
   padding-right: var(--spacing-1-5);
 }
 
@@ -120,139 +119,139 @@ a.tag-content:focus-visible {
  * =================================== */
 
 /* Neutral */
-.tag[data-tone="neutral"] {
+.tag_e873402ac[data-tone="neutral"] {
   background: var(--color-bg-neutral-subtle);
   color: var(--color-text);
 }
 
-.tag[data-tone="neutral"][data-interactive="true"]:hover:not(
+.tag_e873402ac[data-tone="neutral"][data-interactive="true"]:hover:not(
     [data-disabled="true"]
   ) {
   background: var(--color-bg-neutral-subtle-hover);
 }
 
-.tag[data-tone="neutral"][data-interactive="true"]:active:not(
+.tag_e873402ac[data-tone="neutral"][data-interactive="true"]:active:not(
     [data-disabled="true"]
   ) {
   background: var(--color-bg-neutral-subtle-active);
 }
 
-.tag[data-tone="neutral"][data-selected="true"] {
+.tag_e873402ac[data-tone="neutral"][data-selected="true"] {
   background: var(--color-bg-fill-neutral);
   color: var(--color-text-on-neutral);
 }
 
 /* Primary */
-.tag[data-tone="primary"] {
+.tag_e873402ac[data-tone="primary"] {
   background: var(--color-bg-primary-subtle);
   color: var(--color-text-primary);
 }
 
-.tag[data-tone="primary"][data-interactive="true"]:hover:not(
+.tag_e873402ac[data-tone="primary"][data-interactive="true"]:hover:not(
     [data-disabled="true"]
   ) {
   background: var(--color-bg-primary-subtle-hover);
 }
 
-.tag[data-tone="primary"][data-interactive="true"]:active:not(
+.tag_e873402ac[data-tone="primary"][data-interactive="true"]:active:not(
     [data-disabled="true"]
   ) {
   background: var(--color-bg-primary-subtle-active);
 }
 
-.tag[data-tone="primary"][data-selected="true"] {
+.tag_e873402ac[data-tone="primary"][data-selected="true"] {
   background: var(--color-bg-fill-primary);
   color: var(--color-text-on-primary);
 }
 
 /* Success */
-.tag[data-tone="success"] {
+.tag_e873402ac[data-tone="success"] {
   background: var(--color-bg-success-subtle);
   color: var(--color-text-success);
 }
 
-.tag[data-tone="success"][data-interactive="true"]:hover:not(
+.tag_e873402ac[data-tone="success"][data-interactive="true"]:hover:not(
     [data-disabled="true"]
   ) {
   background: var(--color-bg-success-subtle-hover);
 }
 
-.tag[data-tone="success"][data-interactive="true"]:active:not(
+.tag_e873402ac[data-tone="success"][data-interactive="true"]:active:not(
     [data-disabled="true"]
   ) {
   background: var(--color-bg-success-subtle-active);
 }
 
-.tag[data-tone="success"][data-selected="true"] {
+.tag_e873402ac[data-tone="success"][data-selected="true"] {
   background: var(--color-bg-fill-success);
   color: var(--color-text-on-success);
 }
 
 /* Warning */
-.tag[data-tone="warning"] {
+.tag_e873402ac[data-tone="warning"] {
   background: var(--color-bg-warning-subtle);
   color: var(--color-text-warning);
 }
 
-.tag[data-tone="warning"][data-interactive="true"]:hover:not(
+.tag_e873402ac[data-tone="warning"][data-interactive="true"]:hover:not(
     [data-disabled="true"]
   ) {
   background: var(--color-bg-warning-subtle-hover);
 }
 
-.tag[data-tone="warning"][data-interactive="true"]:active:not(
+.tag_e873402ac[data-tone="warning"][data-interactive="true"]:active:not(
     [data-disabled="true"]
   ) {
   background: var(--color-bg-warning-subtle-active);
 }
 
-.tag[data-tone="warning"][data-selected="true"] {
+.tag_e873402ac[data-tone="warning"][data-selected="true"] {
   background: var(--color-bg-fill-warning);
   color: var(--color-text-on-warning);
 }
 
 /* Critical */
-.tag[data-tone="critical"] {
+.tag_e873402ac[data-tone="critical"] {
   background: var(--color-bg-critical-subtle);
   color: var(--color-text-critical);
 }
 
-.tag[data-tone="critical"][data-interactive="true"]:hover:not(
+.tag_e873402ac[data-tone="critical"][data-interactive="true"]:hover:not(
     [data-disabled="true"]
   ) {
   background: var(--color-bg-critical-subtle-hover);
 }
 
-.tag[data-tone="critical"][data-interactive="true"]:active:not(
+.tag_e873402ac[data-tone="critical"][data-interactive="true"]:active:not(
     [data-disabled="true"]
   ) {
   background: var(--color-bg-critical-subtle-active);
 }
 
-.tag[data-tone="critical"][data-selected="true"] {
+.tag_e873402ac[data-tone="critical"][data-selected="true"] {
   background: var(--color-bg-fill-critical);
   color: var(--color-text-on-critical);
 }
 
 /* Info */
-.tag[data-tone="info"] {
+.tag_e873402ac[data-tone="info"] {
   background: var(--color-bg-info-subtle);
   color: var(--color-text-info);
 }
 
-.tag[data-tone="info"][data-interactive="true"]:hover:not(
+.tag_e873402ac[data-tone="info"][data-interactive="true"]:hover:not(
     [data-disabled="true"]
   ) {
   background: var(--color-bg-info-subtle-hover);
 }
 
-.tag[data-tone="info"][data-interactive="true"]:active:not(
+.tag_e873402ac[data-tone="info"][data-interactive="true"]:active:not(
     [data-disabled="true"]
   ) {
   background: var(--color-bg-info-subtle-active);
 }
 
-.tag[data-tone="info"][data-selected="true"] {
+.tag_e873402ac[data-tone="info"][data-selected="true"] {
   background: var(--color-bg-fill-info);
   color: var(--color-text-on-info);
 }
@@ -262,7 +261,7 @@ a.tag-content:focus-visible {
  * =================================== */
 
 /* Disabled */
-.tag[data-disabled="true"] {
+.tag_e873402ac[data-disabled="true"] {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
@@ -272,13 +271,13 @@ a.tag-content:focus-visible {
  * Inner Elements
  * =================================== */
 
-.tag-icon {
+.tag-icon_e873402ac {
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
 }
 
-.tag-label {
+.tag-label_e873402ac {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
@@ -286,7 +285,7 @@ a.tag-content:focus-visible {
 }
 
 /* Accent bar */
-.tag-accent {
+.tag-accent_e873402ac {
   position: absolute;
   left: 0;
   top: 0;
@@ -297,7 +296,7 @@ a.tag-content:focus-visible {
 }
 
 /* Remove button */
-.tag-remove {
+.tag-remove_e873402ac {
   /* Reset */
   appearance: none;
   border: none;
@@ -330,23 +329,23 @@ a.tag-content:focus-visible {
     background-color 0.15s ease;
 }
 
-.tag-remove:hover:not(:disabled) {
+.tag-remove_e873402ac:hover:not(:disabled) {
   opacity: 1;
   background: rgba(0, 0, 0, 0.1);
 }
 
-.tag-remove:focus-visible {
+.tag-remove_e873402ac:focus-visible {
   outline: none;
   opacity: 1;
   box-shadow: 0 0 0 2px var(--color-focus-ring-halo);
 }
 
-.tag-remove:disabled {
+.tag-remove_e873402ac:disabled {
   cursor: not-allowed;
   pointer-events: none;
 }
 
 /* Selected state remove button styling */
-.tag[data-selected="true"] .tag-remove:hover:not(:disabled) {
+.tag_e873402ac[data-selected="true"] .tag-remove_e873402ac:hover:not(:disabled) {
   background: rgba(255, 255, 255, 0.2);
 }

package/dist/status/tag.js

@@ -66,7 +66,7 @@ class Tag extends Component {
     }
   };
   static {
-    setComponentTemplate(precompileTemplate("<span class=\"tag\" style={{this.accentStyle}} data-tone={{this.tone}} data-size={{this.size}} data-selected={{if @selected \"true\"}} data-disabled={{if @disabled \"true\"}} data-has-accent={{if @color \"true\"}} data-removable={{if @onRemove \"true\"}} data-interactive={{if this.isInteractive \"true\"}} data-test-tag ...attributes>\n  {{#if this.isValidHexColor}}\n    <span class=\"tag-accent\" data-test-tag-accent></span>\n  {{/if}}\n\n  {{#if this.isLink}}\n    <a class=\"tag-content\" href={{@href}} tabindex={{if @disabled \"-1\"}} data-test-tag-link {{on \"click\" this.handleClick}} {{on \"keydown\" this.handleKeyDown}}>\n      {{#if @icon}}\n        <span class=\"tag-icon\" data-test-tag-icon><Icon @icon={{@icon}} @size={{this.iconSize}} /></span>\n      {{/if}}\n      <span class=\"tag-label\" data-test-tag-label>{{yield}}</span>\n    </a>\n  {{else if this.isInteractive}}\n    <button type=\"button\" class=\"tag-content\" disabled={{@disabled}} aria-pressed={{this.ariaPressed}} data-test-tag-button {{on \"click\" this.handleClick}} {{on \"keydown\" this.handleKeyDown}}>\n      {{#if @icon}}\n        <span class=\"tag-icon\" data-test-tag-icon><Icon @icon={{@icon}} @size={{this.iconSize}} /></span>\n      {{/if}}\n      <span class=\"tag-label\" data-test-tag-label>{{yield}}</span>\n    </button>\n  {{else}}\n    <span class=\"tag-content\" tabindex={{if @onRemove \"0\"}} data-test-tag-content {{on \"keydown\" this.handleKeyDown}}>\n      {{#if @icon}}\n        <span class=\"tag-icon\" data-test-tag-icon><Icon @icon={{@icon}} @size={{this.iconSize}} /></span>\n      {{/if}}\n      <span class=\"tag-label\" data-test-tag-label>{{yield}}</span>\n    </span>\n  {{/if}}\n\n  {{#if @onRemove}}\n    <button type=\"button\" class=\"tag-remove\" aria-label={{this.removeLabel}} disabled={{@disabled}} data-test-tag-remove {{on \"click\" this.handleRemove}}>\n      <Icon @icon={{X}} @size={{this.iconSize}} />\n    </button>\n  {{/if}}\n</span>", {
+    setComponentTemplate(precompileTemplate("<span class=\"tag_e873402ac\" style={{this.accentStyle}} data-tone={{this.tone}} data-size={{this.size}} data-selected={{if @selected \"true\"}} data-disabled={{if @disabled \"true\"}} data-has-accent={{if @color \"true\"}} data-removable={{if @onRemove \"true\"}} data-interactive={{if this.isInteractive \"true\"}} data-test-tag ...attributes>\n  {{#if this.isValidHexColor}}\n    <span class=\"tag-accent_e873402ac\" data-test-tag-accent></span>\n  {{/if}}\n\n  {{#if this.isLink}}\n    <a class=\"tag-content_e873402ac e873402ac\" href={{@href}} tabindex={{if @disabled \"-1\"}} data-test-tag-link {{on \"click\" this.handleClick}} {{on \"keydown\" this.handleKeyDown}}>\n      {{#if @icon}}\n        <span class=\"tag-icon_e873402ac\" data-test-tag-icon><Icon @icon={{@icon}} @size={{this.iconSize}} /></span>\n      {{/if}}\n      <span class=\"tag-label_e873402ac\" data-test-tag-label>{{yield}}</span>\n    </a>\n  {{else if this.isInteractive}}\n    <button type=\"button\" class=\"tag-content_e873402ac e873402ac\" disabled={{@disabled}} aria-pressed={{this.ariaPressed}} data-test-tag-button {{on \"click\" this.handleClick}} {{on \"keydown\" this.handleKeyDown}}>\n      {{#if @icon}}\n        <span class=\"tag-icon_e873402ac\" data-test-tag-icon><Icon @icon={{@icon}} @size={{this.iconSize}} /></span>\n      {{/if}}\n      <span class=\"tag-label_e873402ac\" data-test-tag-label>{{yield}}</span>\n    </button>\n  {{else}}\n    <span class=\"tag-content_e873402ac\" tabindex={{if @onRemove \"0\"}} data-test-tag-content {{on \"keydown\" this.handleKeyDown}}>\n      {{#if @icon}}\n        <span class=\"tag-icon_e873402ac\" data-test-tag-icon><Icon @icon={{@icon}} @size={{this.iconSize}} /></span>\n      {{/if}}\n      <span class=\"tag-label_e873402ac\" data-test-tag-label>{{yield}}</span>\n    </span>\n  {{/if}}\n\n  {{#if @onRemove}}\n    <button type=\"button\" class=\"tag-remove_e873402ac e873402ac\" aria-label={{this.removeLabel}} disabled={{@disabled}} data-test-tag-remove {{on \"click\" this.handleRemove}}>\n      <Icon @icon={{X}} @size={{this.iconSize}} />\n    </button>\n  {{/if}}\n</span>", {
       strictMode: true,
       scope: () => ({
         on,

package/dist/styles/base/typography.css

@@ -43,5 +43,5 @@ body {
   font-family: var(--font-family-sans);
   font-size: var(--font-size-13);
   font-weight: var(--font-weight-400);
-  line-height: var(--line-height-1-5);
+  line-height: var(--line-height-normal);
 }

package/dist/styles/primitive/typography.css

@@ -27,13 +27,16 @@
   --font-weight-600: 600;
   --font-weight-700: 700;
 
-  /* Line Heights - Ratio scale */
-  --line-height-1: 1;
-  --line-height-1-25: 1.25;
-  --line-height-1-375: 1.375;
-  --line-height-1-5: 1.5;
-  --line-height-1-625: 1.625;
-  --line-height-2: 2;
+  /* Line Heights - Absolute scale (4px grid-aligned) */
+  --line-height-none: 1;
+  --line-height-16: 1rem; /* 16px */
+  --line-height-20: 1.25rem; /* 20px */
+  --line-height-24: 1.5rem; /* 24px */
+  --line-height-28: 1.75rem; /* 28px */
+  --line-height-32: 2rem; /* 32px */
+  --line-height-36: 2.25rem; /* 36px */
+  --line-height-40: 2.5rem; /* 40px */
+  --line-height-44: 2.75rem; /* 44px */
 
   /* Letter Spacing */
   --letter-spacing-tight: -0.05em;

package/dist/styles/semantic/typography.css

@@ -20,10 +20,10 @@
   --font-weight-semibold: var(--font-weight-600);
   --font-weight-bold: var(--font-weight-700);
 
-  /* Line Height */
-  --line-height-tight: var(--line-height-1-25);
-  --line-height-normal: var(--line-height-1-5);
-  --line-height-relaxed: var(--line-height-1-625);
+  /* Line Height - Grid-aligned for body text sizes (11-14px) */
+  --line-height-tight: var(--line-height-16); /* 16px */
+  --line-height-normal: var(--line-height-20); /* 20px */
+  --line-height-relaxed: var(--line-height-24); /* 24px */
 
   /* Letter Spacing */
   --letter-spacing-tight: -0.025em;

package/dist/styles.css

@@ -172,13 +172,16 @@
   --font-weight-600: 600;
   --font-weight-700: 700;
 
-  /* Line Heights - Ratio scale */
-  --line-height-1: 1;
-  --line-height-1-25: 1.25;
-  --line-height-1-375: 1.375;
-  --line-height-1-5: 1.5;
-  --line-height-1-625: 1.625;
-  --line-height-2: 2;
+  /* Line Heights - Absolute scale (4px grid-aligned) */
+  --line-height-none: 1;
+  --line-height-16: 1rem; /* 16px */
+  --line-height-20: 1.25rem; /* 20px */
+  --line-height-24: 1.5rem; /* 24px */
+  --line-height-28: 1.75rem; /* 28px */
+  --line-height-32: 2rem; /* 32px */
+  --line-height-36: 2.25rem; /* 36px */
+  --line-height-40: 2.5rem; /* 40px */
+  --line-height-44: 2.75rem; /* 44px */
 
   /* Letter Spacing */
   --letter-spacing-tight: -0.05em;
@@ -484,10 +487,10 @@
   --font-weight-semibold: var(--font-weight-600);
   --font-weight-bold: var(--font-weight-700);
 
-  /* Line Height */
-  --line-height-tight: var(--line-height-1-25);
-  --line-height-normal: var(--line-height-1-5);
-  --line-height-relaxed: var(--line-height-1-625);
+  /* Line Height - Grid-aligned for body text sizes (11-14px) */
+  --line-height-tight: var(--line-height-16); /* 16px */
+  --line-height-normal: var(--line-height-20); /* 20px */
+  --line-height-relaxed: var(--line-height-24); /* 24px */
 
   /* Letter Spacing */
   --letter-spacing-tight: -0.025em;
@@ -646,7 +649,7 @@ body {
   font-family: var(--font-family-sans);
   font-size: var(--font-size-13);
   font-weight: var(--font-weight-400);
-  line-height: var(--line-height-1-5);
+  line-height: var(--line-height-normal);
 }
 
 /* Animations */

package/dist/typography/{heading-css-8850735eabc2efb34f15240b852c99e7.css → heading-css-726c4c3109f2b741657733e1ba103c67.css}

@@ -1,4 +1,4 @@
-/* <inline>/src/typography/heading-css-8850735eabc2efb34f15240b852c99e7.css */
+/* <inline>/src/typography/heading-css-726c4c3109f2b741657733e1ba103c67.css */
 
   .heading_e24a71ed2 {
     margin: 0;
@@ -7,35 +7,35 @@
   /* Size */
   .heading_e24a71ed2[data-size="sm"] {
     font-size: var(--font-size-sm);
-    line-height: var(--line-height-tight);
+    line-height: var(--line-height-16);
   }
   .heading_e24a71ed2[data-size="md"] {
     font-size: var(--font-size-md);
-    line-height: var(--line-height-tight);
+    line-height: var(--line-height-16);
   }
   .heading_e24a71ed2[data-size="lg"] {
     font-size: var(--font-size-lg);
-    line-height: var(--line-height-tight);
+    line-height: var(--line-height-20);
   }
   .heading_e24a71ed2[data-size="xl"] {
     font-size: var(--font-size-xl);
-    line-height: var(--line-height-tight);
+    line-height: var(--line-height-20);
   }
   .heading_e24a71ed2[data-size="2xl"] {
     font-size: var(--font-size-2xl);
-    line-height: var(--line-height-tight);
+    line-height: var(--line-height-24);
   }
   .heading_e24a71ed2[data-size="3xl"] {
     font-size: var(--font-size-3xl);
-    line-height: var(--line-height-tight);
+    line-height: var(--line-height-24);
   }
   .heading_e24a71ed2[data-size="4xl"] {
     font-size: var(--font-size-4xl);
-    line-height: var(--line-height-tight);
+    line-height: var(--line-height-28);
   }
   .heading_e24a71ed2[data-size="5xl"] {
     font-size: var(--font-size-5xl);
-    line-height: var(--line-height-tight);
+    line-height: var(--line-height-36);
   }
 
   /* Weight */

package/dist/typography/heading.js

@@ -1,4 +1,4 @@
-import "./heading-css-8850735eabc2efb34f15240b852c99e7.css"
+import "./heading-css-726c4c3109f2b741657733e1ba103c67.css"
 import Component from '@glimmer/component';
 import { element } from 'ember-element-helper';
 import { precompileTemplate } from '@ember/template-compilation';

package/dist/typography/{text-css-73e03f1b750b32d7064d4ef87562289c.css → text-css-935f55e9cd74b06a5ce61330c4c79ef9.css}

@@ -1,4 +1,4 @@
-/* <inline>/src/typography/text-css-73e03f1b750b32d7064d4ef87562289c.css */
+/* <inline>/src/typography/text-css-935f55e9cd74b06a5ce61330c4c79ef9.css */
 
   .text_e5637097c {
     margin: 0;
@@ -22,6 +22,11 @@
     line-height: var(--line-height-normal);
   }
 
+  /* Monospace */
+  .text_e5637097c[data-monospace="true"] {
+    font-family: var(--font-family-mono);
+  }
+
   /* Weight */
   .text_e5637097c[data-weight="regular"] {
     font-weight: var(--font-weight-regular);

package/dist/typography/text.js

@@ -1,4 +1,4 @@
-import "./text-css-73e03f1b750b32d7064d4ef87562289c.css"
+import "./text-css-935f55e9cd74b06a5ce61330c4c79ef9.css"
 import Component from '@glimmer/component';
 import { element } from 'ember-element-helper';
 import { or } from 'ember-truth-helpers';
@@ -43,6 +43,9 @@ class Text extends Component {
   get weight() {
     return this.args.weight ?? this.variantDefaults.weight;
   }
+  get monospace() {
+    return this.args.monospace ?? false;
+  }
   get tone() {
     return this.args.tone ?? 'primary';
   }
@@ -62,7 +65,7 @@ class Text extends Component {
     return this.args.transform ?? 'none';
   }
   static {
-    setComponentTemplate(precompileTemplate("\n\n{{#let (element (or @as \"span\")) as |Tag|}}\n  <Tag class=\"text_e5637097c\" data-size={{this.size}} data-weight={{this.weight}} data-tone={{this.tone}} data-align={{this.align}} data-truncate={{this.truncate}} data-max-lines={{@maxLines}} data-wrap={{this.wrap}} data-decoration={{this.decoration}} data-transform={{this.transform}} ...attributes>\n    {{yield}}\n  </Tag>\n{{/let}}", {
+    setComponentTemplate(precompileTemplate("\n\n{{#let (element (or @as \"span\")) as |Tag|}}\n  <Tag class=\"text_e5637097c\" data-size={{this.size}} data-monospace={{if this.monospace \"true\"}} data-weight={{this.weight}} data-tone={{this.tone}} data-align={{this.align}} data-truncate={{this.truncate}} data-max-lines={{@maxLines}} data-wrap={{this.wrap}} data-decoration={{this.decoration}} data-transform={{this.transform}} ...attributes>\n    {{yield}}\n  </Tag>\n{{/let}}", {
       strictMode: true,
       scope: () => ({
         element,