@visitwonders/assembly 0.15.0 → 0.16.0

package/dist/styles.css

@@ -296,6 +296,15 @@
   --color-bg-inverse: var(--gray-900); /* Dark background for contrast */
   --color-bg-disabled: var(--gray-100); /* Disabled backgrounds */
 
+  /* Status Surfaces — for panels, banners, callouts, toasts.
+     Distinct from `bg-{semantic}-subtle` (tinted hover/badge backgrounds)
+     and `bg-fill-{semantic}` (solid status fills). Surface tier sits at
+     the same level as `bg-surface` but carries status sentiment. */
+  --color-bg-surface-success: var(--green-50);
+  --color-bg-surface-warning: var(--amber-50);
+  --color-bg-surface-critical: var(--red-50);
+  --color-bg-surface-info: var(--cyan-50);
+
   /* Hover States */
   --color-bg-hover-subtle: var(--gray-50);
 
@@ -312,13 +321,19 @@
   --color-bg-fill-interactive-selected: var(--gray-175);
   --color-bg-fill-interactive-disabled: var(--gray-50);
 
-  /* Accent Fill (Selected controls — checkboxes, toggles, radios) */
+  /* Accent Fill (Selected controls — checkboxes, toggles, radios,
+     calendar selected day, multi-select chips, date-range fill) */
   --color-bg-fill-accent: var(--indigo-500);
   --color-bg-fill-accent-hover: var(--indigo-600);
   --color-bg-fill-accent-active: var(--indigo-700);
   --color-bg-fill-accent-disabled: var(--indigo-300);
 
-  /* Secondary Fill */
+  /* Accent Fill — Subtle (tinted accent backgrounds, e.g. table row
+     selected). Sits in the same range as the other `*-subtle` tints. */
+  --color-bg-fill-accent-subtle: var(--indigo-50);
+  --color-bg-fill-accent-subtle-hover: var(--indigo-100);
+
+  /* reserved — no consumers yet, validate value when first used */
   --color-bg-fill-secondary: var(--cyan-600);
   --color-bg-fill-secondary-hover: var(--cyan-700);
   --color-bg-fill-secondary-active: var(--cyan-800);
@@ -414,6 +429,15 @@
   --color-border-control-active: var(--gray-500);
   --color-border-control-disabled: var(--gray-300);
   --color-border-control-readonly: var(--gray-300);
+  /* Aliased to `--color-border-critical` so consumers reach for the
+     error-state intent rather than the raw critical token. */
+  --color-border-control-error: var(--color-border-critical);
+
+  /* Control Fill — Checked (selected affordance for checkbox, toggle,
+     radio, multi-select, multi-combobox, calendar selected day,
+     date-range range fill). Aliased to `--color-bg-fill-accent` so all
+     "checked/selected" controls share one anchor. */
+  --color-bg-control-checked: var(--color-bg-fill-accent);
 
   /* Brand/Primary Border */
   --color-border-primary: var(--indigo-700);
@@ -421,9 +445,11 @@
   /* Focus Border */
   --color-border-focus: var(--indigo-500);
 
-  /* Focus Ring Halo (box-shadow glow) */
-  --color-focus-ring-halo: var(--indigo-200);
-  --color-focus-ring-halo-critical: var(--red-200);
+  /* Focus Ring — two-stop composite (WCAG 2.2 non-text-contrast).
+     `inner` separates the ring from the focused element; `outer` carries
+     the ring colour. Composed in `effects.css` as `--focus-ring`. */
+  --color-focus-ring-inner: var(--white);
+  --color-focus-ring-outer: var(--indigo-500);
 
   /* Semantic Borders */
   --color-border-neutral: var(--gray-900);
@@ -500,6 +526,66 @@
   --letter-spacing-tight: -0.025em;
   --letter-spacing-normal: 0;
   --letter-spacing-wide: 0.025em;
+
+  /* ===================================
+   * Typography Roles — Bundled Sub-tokens
+   *
+   * Role names (display | page | section | subsection for headings;
+   * sm | md | lg for body) survive a redesign that re-scales the type
+   * ramp. Components consume the four sub-tokens (size, weight, leading,
+   * tracking) per role rather than composing atomic font-size +
+   * line-height + weight per call site. Sub-tokens not `font:`
+   * shorthand — shorthand resets font-stretch/variant and cannot carry
+   * letter-spacing.
+   *
+   * Heading mapping (locked, see WON-580):
+   *   level=1 → page          (default page title)
+   *   level=2 → section       (first-level section header)
+   *   level=3-6 → subsection  (size step-down via @size override)
+   * `display` is an opt-in @size — never a level default.
+   * =================================== */
+
+  /* Heading — Display (opt-in via @size="display") */
+  --typography-heading-display-size: var(--font-size-5xl); /* 30px */
+  --typography-heading-display-weight: var(--font-weight-medium);
+  --typography-heading-display-leading: var(--line-height-36);
+  --typography-heading-display-tracking: var(--letter-spacing-tight);
+
+  /* Heading — Page (level=1 default) */
+  --typography-heading-page-size: var(--font-size-4xl); /* 24px */
+  --typography-heading-page-weight: var(--font-weight-medium);
+  --typography-heading-page-leading: var(--line-height-28);
+  --typography-heading-page-tracking: var(--letter-spacing-tight);
+
+  /* Heading — Section (level=2 default) */
+  --typography-heading-section-size: var(--font-size-3xl); /* 20px */
+  --typography-heading-section-weight: var(--font-weight-medium);
+  --typography-heading-section-leading: var(--line-height-24);
+  --typography-heading-section-tracking: var(--letter-spacing-normal);
+
+  /* Heading — Subsection (level=3 default; 4-6 step down via @size) */
+  --typography-heading-subsection-size: var(--font-size-2xl); /* 18px */
+  --typography-heading-subsection-weight: var(--font-weight-medium);
+  --typography-heading-subsection-leading: var(--line-height-24);
+  --typography-heading-subsection-tracking: var(--letter-spacing-normal);
+
+  /* Body — Small (captions, dense table cells, helper text) */
+  --typography-body-sm-size: var(--font-size-sm); /* 12px */
+  --typography-body-sm-weight: var(--font-weight-regular);
+  --typography-body-sm-leading: var(--line-height-tight); /* 16px */
+  --typography-body-sm-tracking: var(--letter-spacing-normal);
+
+  /* Body — Medium (default body text) */
+  --typography-body-md-size: var(--font-size-md); /* 13px */
+  --typography-body-md-weight: var(--font-weight-regular);
+  --typography-body-md-leading: var(--line-height-normal); /* 20px */
+  --typography-body-md-tracking: var(--letter-spacing-normal);
+
+  /* Body — Large (lead paragraphs, emphasized body) */
+  --typography-body-lg-size: var(--font-size-lg); /* 14px */
+  --typography-body-lg-weight: var(--font-weight-regular);
+  --typography-body-lg-leading: var(--line-height-normal); /* 20px */
+  --typography-body-lg-tracking: var(--letter-spacing-normal);
 }
 
 :root {
@@ -582,9 +668,15 @@
   --shadow-surface: var(--shadow-xs);
   --shadow-modal: var(--shadow-lg);
 
-  /* Focus Ring */
-  --focus-ring: 0 0 0 3px var(--color-focus-ring-halo);
-  --focus-ring-critical: 0 0 0 3px var(--color-focus-ring-halo-critical);
+  /* Focus Ring — two-stop composite. Inner stop separates the ring from
+     the focused surface; outer stop carries the ring colour. Meets WCAG
+     2.2 non-text-contrast on light + dark surfaces. */
+  --focus-ring:
+    0 0 0 2px var(--color-focus-ring-inner),
+    0 0 0 4px var(--color-focus-ring-outer);
+  --focus-ring-critical:
+    0 0 0 2px var(--color-focus-ring-inner),
+    0 0 0 4px var(--color-border-critical);
 
   /* Z-Index Semantic Layers */
   --z-dropdown: var(--z-100);
@@ -606,6 +698,164 @@
     var(--easing-in-out) infinite;
 }
 
+/* Component-tier tokens (Action + Input matrices only) */
+
+/* ===================================
+ * Component-Tier Tokens (Layer 3)
+ *
+ * Action and Input matrices. Every cell aliases a layer-2 generic — no
+ * flat hex. Variants compose in component CSS (e.g. button.css picks
+ * which property carries the tone colour for `outline` vs `solid`).
+ *
+ * The rest of Assembly's components consume semantic tokens directly;
+ * only action + input have a layer-3 surface. See
+ * `docs/component-tokens.md` for the rationale and the cell-by-cell
+ * spec — this file mirrors it.
+ * =================================== */
+
+:root {
+  /* ===================================
+   * Action Matrix
+   * Shape: --color-action-{tone}-{property}-{state}
+   *   tones      = primary | neutral | critical
+   *   properties = bg | border | text | icon
+   *   states     = default | hover | focus | pressed | disabled
+   * =================================== */
+
+  /* Primary — bg */
+  --color-action-primary-bg-default: var(--color-bg-fill-primary);
+  --color-action-primary-bg-hover: var(--color-bg-fill-primary-hover);
+  --color-action-primary-bg-focus: var(--color-bg-fill-primary);
+  --color-action-primary-bg-pressed: var(--color-bg-fill-primary-active);
+  --color-action-primary-bg-disabled: var(--color-bg-fill-primary-disabled);
+
+  /* Primary — border */
+  --color-action-primary-border-default: var(--color-border-primary);
+  --color-action-primary-border-hover: var(--color-border-primary);
+  --color-action-primary-border-focus: var(--color-border-focus);
+  --color-action-primary-border-pressed: var(--color-border-primary);
+  --color-action-primary-border-disabled: var(--color-border-control-disabled);
+
+  /* Primary — text */
+  --color-action-primary-text-default: var(--color-text-on-primary);
+  --color-action-primary-text-hover: var(--color-text-on-primary);
+  --color-action-primary-text-focus: var(--color-text-on-primary);
+  --color-action-primary-text-pressed: var(--color-text-on-primary);
+  --color-action-primary-text-disabled: var(--color-text-disabled);
+
+  /* Primary — icon */
+  --color-action-primary-icon-default: var(--color-text-on-primary);
+  --color-action-primary-icon-hover: var(--color-text-on-primary);
+  --color-action-primary-icon-focus: var(--color-text-on-primary);
+  --color-action-primary-icon-pressed: var(--color-text-on-primary);
+  --color-action-primary-icon-disabled: var(--color-text-disabled);
+
+  /* Neutral — bg */
+  --color-action-neutral-bg-default: var(--color-bg-fill-interactive);
+  --color-action-neutral-bg-hover: var(--color-bg-fill-interactive-hover);
+  --color-action-neutral-bg-focus: var(--color-bg-fill-interactive);
+  --color-action-neutral-bg-pressed: var(--color-bg-fill-interactive-active);
+  --color-action-neutral-bg-disabled: var(--color-bg-fill-interactive-disabled);
+
+  /* Neutral — border */
+  --color-action-neutral-border-default: var(--color-border-control);
+  --color-action-neutral-border-hover: var(--color-border-control-hover);
+  --color-action-neutral-border-focus: var(--color-border-focus);
+  --color-action-neutral-border-pressed: var(--color-border-control-active);
+  --color-action-neutral-border-disabled: var(--color-border-control-disabled);
+
+  /* Neutral — text */
+  --color-action-neutral-text-default: var(--color-text);
+  --color-action-neutral-text-hover: var(--color-text);
+  --color-action-neutral-text-focus: var(--color-text);
+  --color-action-neutral-text-pressed: var(--color-text);
+  --color-action-neutral-text-disabled: var(--color-text-disabled);
+
+  /* Neutral — icon */
+  --color-action-neutral-icon-default: var(--color-icon);
+  --color-action-neutral-icon-hover: var(--color-icon-interactive-hover);
+  --color-action-neutral-icon-focus: var(--color-icon);
+  --color-action-neutral-icon-pressed: var(--color-icon);
+  --color-action-neutral-icon-disabled: var(--color-icon-disabled);
+
+  /* Critical — bg */
+  --color-action-critical-bg-default: var(--color-bg-fill-critical);
+  --color-action-critical-bg-hover: var(--color-bg-fill-critical-hover);
+  --color-action-critical-bg-focus: var(--color-bg-fill-critical);
+  --color-action-critical-bg-pressed: var(--color-bg-fill-critical-active);
+  --color-action-critical-bg-disabled: var(
+    --color-bg-fill-interactive-disabled
+  );
+
+  /* Critical — border */
+  --color-action-critical-border-default: var(--color-border-critical);
+  --color-action-critical-border-hover: var(--color-border-critical);
+  --color-action-critical-border-focus: var(--color-border-critical);
+  --color-action-critical-border-pressed: var(--color-border-critical);
+  --color-action-critical-border-disabled: var(--color-border-control-disabled);
+
+  /* Critical — text */
+  --color-action-critical-text-default: var(--color-text-on-critical);
+  --color-action-critical-text-hover: var(--color-text-on-critical);
+  --color-action-critical-text-focus: var(--color-text-on-critical);
+  --color-action-critical-text-pressed: var(--color-text-on-critical);
+  --color-action-critical-text-disabled: var(--color-text-disabled);
+
+  /* Critical — icon */
+  --color-action-critical-icon-default: var(--color-text-on-critical);
+  --color-action-critical-icon-hover: var(--color-text-on-critical);
+  --color-action-critical-icon-focus: var(--color-text-on-critical);
+  --color-action-critical-icon-pressed: var(--color-text-on-critical);
+  --color-action-critical-icon-disabled: var(--color-text-disabled);
+
+  /* ===================================
+   * Input Matrix
+   * Shape: --color-input-{property}-{state}
+   *   properties = bg | border | text | icon | checked
+   *   states     = default | hover | focus | disabled | error
+   *
+   * `checked` is the selected-state affordance; it collapses the state
+   * axis (the "checked" affordance itself is a state). Inputs without a
+   * checked affordance (text inputs, textareas) ignore the `checked-*`
+   * cells.
+   * =================================== */
+
+  /* bg */
+  --color-input-bg-default: var(--color-bg-surface);
+  --color-input-bg-hover: var(--color-bg-surface);
+  --color-input-bg-focus: var(--color-bg-surface);
+  --color-input-bg-disabled: var(--color-bg-disabled);
+  --color-input-bg-error: var(--color-bg-surface);
+
+  /* border */
+  --color-input-border-default: var(--color-border-control);
+  --color-input-border-hover: var(--color-border-control-hover);
+  --color-input-border-focus: var(--color-border-focus);
+  --color-input-border-disabled: var(--color-border-control-disabled);
+  --color-input-border-error: var(--color-border-control-error);
+
+  /* text */
+  --color-input-text-default: var(--color-text);
+  --color-input-text-hover: var(--color-text);
+  --color-input-text-focus: var(--color-text);
+  --color-input-text-disabled: var(--color-text-disabled);
+  --color-input-text-error: var(--color-text);
+
+  /* icon */
+  --color-input-icon-default: var(--color-icon-secondary);
+  --color-input-icon-hover: var(--color-icon);
+  --color-input-icon-focus: var(--color-icon);
+  --color-input-icon-disabled: var(--color-icon-disabled);
+  --color-input-icon-error: var(--color-icon-critical);
+
+  /* checked (selected affordance) */
+  --color-input-checked-bg: var(--color-bg-control-checked);
+  --color-input-checked-bg-hover: var(--color-bg-fill-accent-hover);
+  --color-input-checked-border: var(--color-bg-control-checked);
+  --color-input-checked-icon: var(--color-text-on-accent);
+  --color-input-checked-disabled: var(--color-bg-fill-accent-disabled);
+}
+
 /* Base styles */
 
 :root {

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

@@ -1,10 +1,42 @@
-/* <inline>/src/typography/heading-css-726c4c3109f2b741657733e1ba103c67.css */
+/* <inline>/src/typography/heading-css-eca8b0ae619f69fcbe9535f4700db421.css */
 
   .heading_e24a71ed2 {
     margin: 0;
   }
 
-  /* Size */
+  /* Role - bundled defaults driven by level. Sub-tokens consumed
+     individually because the font shorthand cannot carry letter-spacing
+     and resets font-stretch/font-variant. The size override below wins
+     via document order. */
+  .heading_e24a71ed2[data-role="page"] {
+    font-size: var(--typography-heading-page-size);
+    font-weight: var(--typography-heading-page-weight);
+    line-height: var(--typography-heading-page-leading);
+    letter-spacing: var(--typography-heading-page-tracking);
+  }
+  .heading_e24a71ed2[data-role="section"] {
+    font-size: var(--typography-heading-section-size);
+    font-weight: var(--typography-heading-section-weight);
+    line-height: var(--typography-heading-section-leading);
+    letter-spacing: var(--typography-heading-section-tracking);
+  }
+  .heading_e24a71ed2[data-role="subsection"] {
+    font-size: var(--typography-heading-subsection-size);
+    font-weight: var(--typography-heading-subsection-weight);
+    line-height: var(--typography-heading-subsection-leading);
+    letter-spacing: var(--typography-heading-subsection-tracking);
+  }
+
+  /* Size override - explicit @size opts out of the role-driven defaults.
+     display consumes the display role bundle; the named atomic sizes
+     consume font-size + line-height directly (used to step down within a
+     role, e.g. shrinking h4-h6 from the subsection default). */
+  .heading_e24a71ed2[data-size="display"] {
+    font-size: var(--typography-heading-display-size);
+    font-weight: var(--typography-heading-display-weight);
+    line-height: var(--typography-heading-display-leading);
+    letter-spacing: var(--typography-heading-display-tracking);
+  }
   .heading_e24a71ed2[data-size="sm"] {
     font-size: var(--font-size-sm);
     line-height: var(--line-height-16);
@@ -38,7 +70,7 @@
     line-height: var(--line-height-36);
   }
 
-  /* Weight */
+  /* Weight - explicit override wins over role-bundled weight. */
   .heading_e24a71ed2[data-weight="regular"] {
     font-weight: var(--font-weight-regular);
   }

package/dist/typography/heading.js

@@ -1,4 +1,4 @@
-import "./heading-css-726c4c3109f2b741657733e1ba103c67.css"
+import "./heading-css-eca8b0ae619f69fcbe9535f4700db421.css"
 import Component from '@glimmer/component';
 import { element } from 'ember-element-helper';
 import { precompileTemplate } from '@ember/template-compilation';
@@ -6,53 +6,48 @@ import { setComponentTemplate } from '@ember/component';
 
 ;
 
-const LEVEL_DEFAULTS = {
-  1: {
-    tag: 'h1',
-    size: '4xl',
-    weight: 'medium'
-  },
-  2: {
-    tag: 'h2',
-    size: '3xl',
-    weight: 'medium'
-  },
-  3: {
-    tag: 'h3',
-    size: '2xl',
-    weight: 'medium'
-  },
-  4: {
-    tag: 'h4',
-    size: 'xl',
-    weight: 'medium'
-  },
-  5: {
-    tag: 'h5',
-    size: 'lg',
-    weight: 'medium'
-  },
-  6: {
-    tag: 'h6',
-    size: 'md',
-    weight: 'medium'
-  }
+const LEVEL_TAGS = {
+  1: 'h1',
+  2: 'h2',
+  3: 'h3',
+  4: 'h4',
+  5: 'h5',
+  6: 'h6'
+};
+const LEVEL_ROLES = {
+  1: 'page',
+  2: 'section',
+  3: 'subsection',
+  4: 'subsection',
+  5: 'subsection',
+  6: 'subsection'
 };
 class Heading extends Component {
   get level() {
     return this.args.level ?? 2;
   }
-  get levelDefaults() {
-    return LEVEL_DEFAULTS[this.level];
-  }
   get tag() {
-    return this.levelDefaults.tag;
+    return LEVEL_TAGS[this.level];
+  }
+  /**
+  * Role drives the bundled typography role tokens
+  * (--typography-heading-{role}-{size|weight|leading|tracking}).
+  * `@size` overrides the visual scale without changing the semantic level -
+  * when set, the data-size rule below wins via document order.
+  */
+  get role() {
+    return LEVEL_ROLES[this.level];
   }
   get size() {
-    return this.args.size ?? this.levelDefaults.size;
+    return this.args.size;
   }
+  /**
+  * Weight is left undefined when the consumer doesn't pass `@weight` so the
+  * data-weight rule below stays absent and the role-bundled weight wins.
+  * Explicit `@weight` overrides the role default via document-order tie-break.
+  */
   get weight() {
-    return this.args.weight ?? this.levelDefaults.weight;
+    return this.args.weight;
   }
   get tone() {
     return this.args.tone ?? 'primary';
@@ -67,7 +62,7 @@ class Heading extends Component {
     return this.args.wrap ?? 'normal';
   }
   static {
-    setComponentTemplate(precompileTemplate("\n\n{{#let (element this.tag) as |Tag|}}\n  <Tag class=\"heading_e24a71ed2\" data-size={{this.size}} data-weight={{this.weight}} data-tone={{this.tone}} data-align={{this.align}} data-truncate={{this.truncate}} data-wrap={{this.wrap}} ...attributes>\n    {{yield}}\n  </Tag>\n{{/let}}", {
+    setComponentTemplate(precompileTemplate("\n\n{{#let (element this.tag) as |Tag|}}\n  <Tag class=\"heading_e24a71ed2\" data-role={{this.role}} data-size={{this.size}} data-weight={{this.weight}} data-tone={{this.tone}} data-align={{this.align}} data-truncate={{this.truncate}} data-wrap={{this.wrap}} ...attributes>\n    {{yield}}\n  </Tag>\n{{/let}}", {
       strictMode: true,
       scope: () => ({
         element

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

@@ -1,25 +1,38 @@
-/* <inline>/src/typography/text-css-935f55e9cd74b06a5ce61330c4c79ef9.css */
+/* <inline>/src/typography/text-css-a4c06f76a813db6b613c4f3c22e6bb85.css */
 
   .text_e5637097c {
     margin: 0;
   }
 
-  /* Size */
+  /* Size - sm/md/lg consume the bundled body role tokens; xs stays atomic
+     (no body-xs role exists - keeping atomic preserves caption/overline
+     variants that anchor on font-size-xs). Sub-tokens consumed
+     individually because the font shorthand cannot carry letter-spacing
+     and resets font-stretch/font-variant. The data-weight rule below
+     overrides the role's bundled weight when set, which lets variants
+     like label (sm + medium) layer their own weight on top of the role
+     size+leading. */
   .text_e5637097c[data-size="xs"] {
     font-size: var(--font-size-xs);
     line-height: var(--line-height-tight);
   }
   .text_e5637097c[data-size="sm"] {
-    font-size: var(--font-size-sm);
-    line-height: var(--line-height-tight);
+    font-size: var(--typography-body-sm-size);
+    font-weight: var(--typography-body-sm-weight);
+    line-height: var(--typography-body-sm-leading);
+    letter-spacing: var(--typography-body-sm-tracking);
   }
   .text_e5637097c[data-size="md"] {
-    font-size: var(--font-size-md);
-    line-height: var(--line-height-normal);
+    font-size: var(--typography-body-md-size);
+    font-weight: var(--typography-body-md-weight);
+    line-height: var(--typography-body-md-leading);
+    letter-spacing: var(--typography-body-md-tracking);
   }
   .text_e5637097c[data-size="lg"] {
-    font-size: var(--font-size-lg);
-    line-height: var(--line-height-normal);
+    font-size: var(--typography-body-lg-size);
+    font-weight: var(--typography-body-lg-weight);
+    line-height: var(--typography-body-lg-leading);
+    letter-spacing: var(--typography-body-lg-tracking);
   }
 
   /* Monospace */
@@ -27,7 +40,8 @@
     font-family: var(--font-family-mono);
   }
 
-  /* Weight */
+  /* Weight - explicit/variant-derived weight wins over role-bundled
+     weight via document-order tie-break. */
   .text_e5637097c[data-weight="regular"] {
     font-weight: var(--font-weight-regular);
   }

package/dist/typography/text.js

@@ -1,4 +1,4 @@
-import "./text-css-935f55e9cd74b06a5ce61330c4c79ef9.css"
+import "./text-css-a4c06f76a813db6b613c4f3c22e6bb85.css"
 import Component from '@glimmer/component';
 import { element } from 'ember-element-helper';
 import { or } from 'ember-truth-helpers';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visitwonders/assembly",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "The default blueprint for Embroider v2 addons.",
   "keywords": [
     "ember-addon"
@@ -87,7 +87,7 @@
     "lint:hbs:fix": "ember-template-lint . --fix --no-error-on-unmatched-pattern",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
-    "lint:types": "glint",
+    "lint:types": "ember-tsc",
     "prepack": "rollup --config",
     "start": "rollup --config --watch",
     "test": "echo 'A v2 addon does not have tests, run tests in showcase'"
@@ -119,10 +119,8 @@
     "@embroider/addon-dev": "^8.2.0",
     "@eslint/js": "^9.17.0",
     "@glimmer/component": "^2.0.0",
-    "@glint/core": "^1.4.0",
-    "@glint/environment-ember-loose": "^1.4.0",
-    "@glint/environment-ember-template-imports": "^1.4.0",
-    "@glint/template": "^1.4.0",
+    "@glint/ember-tsc": "^1.5.0",
+    "@glint/template": "^1.7.7",
     "@rollup/plugin-babel": "^6.0.4",
     "babel-plugin-ember-template-compilation": "^3.1.0",
     "concurrently": "^9.0.1",
@@ -158,6 +156,8 @@
       "./action/button-group.js": "./dist/_app_/action/button-group.js",
       "./action/button.js": "./dist/_app_/action/button.js",
       "./action/link.js": "./dist/_app_/action/link.js",
+      "./data/pagination-cluster.js": "./dist/_app_/data/pagination-cluster.js",
+      "./data/pagination.js": "./dist/_app_/data/pagination.js",
       "./data/sortable-list.js": "./dist/_app_/data/sortable-list.js",
       "./data/table.js": "./dist/_app_/data/table.js",
       "./form/calendar.js": "./dist/_app_/form/calendar.js",