@thewhatmatters/wmds 0.4.6 → 0.4.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (185) hide show
  1. package/CHANGELOG.md +52 -0
  2. package/CONSUMING.md +4 -0
  3. package/README.md +2 -2
  4. package/dist/components/molecules/LinkTile/LinkTile.d.ts +45 -0
  5. package/dist/components/molecules/LinkTile/LinkTile.d.ts.map +1 -0
  6. package/dist/components/molecules/LinkTile/LinkTile.js +115 -0
  7. package/dist/components/molecules/LinkTile/linkTileStyles.d.ts +31 -0
  8. package/dist/components/molecules/LinkTile/linkTileStyles.d.ts.map +1 -0
  9. package/dist/components/molecules/LinkTile/linkTileStyles.js +8 -0
  10. package/dist/components/molecules/TileGrid/TileGrid.d.ts +42 -0
  11. package/dist/components/molecules/TileGrid/TileGrid.d.ts.map +1 -0
  12. package/dist/components/molecules/TileGrid/TileGrid.js +94 -0
  13. package/dist/components/molecules/TileGrid/tileGridMath.d.ts +8 -0
  14. package/dist/components/molecules/TileGrid/tileGridMath.d.ts.map +1 -0
  15. package/dist/components/molecules/TileGrid/tileGridMath.js +20 -0
  16. package/dist/components/molecules/TileGrid/tileGridStyles.d.ts +33 -0
  17. package/dist/components/molecules/TileGrid/tileGridStyles.d.ts.map +1 -0
  18. package/dist/components/molecules/TileGrid/tileGridStyles.js +16 -0
  19. package/dist/components/organisms/Carousel/Carousel.d.ts +58 -0
  20. package/dist/components/organisms/Carousel/Carousel.d.ts.map +1 -0
  21. package/dist/components/organisms/Carousel/Carousel.js +310 -0
  22. package/dist/components/organisms/Carousel/carouselMath.d.ts +39 -0
  23. package/dist/components/organisms/Carousel/carouselMath.d.ts.map +1 -0
  24. package/dist/components/organisms/Carousel/carouselMath.js +47 -0
  25. package/dist/components/organisms/Carousel/carouselStyles.d.ts +49 -0
  26. package/dist/components/organisms/Carousel/carouselStyles.d.ts.map +1 -0
  27. package/dist/components/organisms/Carousel/carouselStyles.js +25 -0
  28. package/dist/components/organisms/Dialog/Dialog.d.ts +12 -2
  29. package/dist/components/organisms/Dialog/Dialog.d.ts.map +1 -1
  30. package/dist/components/organisms/Dialog/Dialog.js +46 -44
  31. package/dist/components/organisms/Dialog/OverlayPanelHeader.d.ts +3 -1
  32. package/dist/components/organisms/Dialog/OverlayPanelHeader.d.ts.map +1 -1
  33. package/dist/components/organisms/Dialog/OverlayPanelHeader.js +20 -17
  34. package/dist/components/organisms/Dialog/dialogStyles.d.ts +5 -1
  35. package/dist/components/organisms/Dialog/dialogStyles.d.ts.map +1 -1
  36. package/dist/components/organisms/Dialog/dialogStyles.js +13 -11
  37. package/dist/components/organisms/FilterPanel/FilterPanel.d.ts +54 -0
  38. package/dist/components/organisms/FilterPanel/FilterPanel.d.ts.map +1 -0
  39. package/dist/components/organisms/FilterPanel/FilterPanel.js +137 -0
  40. package/dist/components/organisms/FilterPanel/filterSelection.d.ts +44 -0
  41. package/dist/components/organisms/FilterPanel/filterSelection.d.ts.map +1 -0
  42. package/dist/components/organisms/FilterPanel/filterSelection.js +35 -0
  43. package/dist/index.d.ts +4 -0
  44. package/dist/index.d.ts.map +1 -1
  45. package/dist/index.js +73 -65
  46. package/dist/lib/compositionAudit.d.ts.map +1 -1
  47. package/dist/styles.css +1 -1
  48. package/docs/components.md +8 -4
  49. package/docs/exports.json +56 -3
  50. package/docs/patterns/components-accordion--flush.tsx +1 -1
  51. package/docs/patterns/components-avatar--dropdown-row.tsx +1 -1
  52. package/docs/patterns/components-badge--outline-tags.tsx +1 -1
  53. package/docs/patterns/components-badge--with-avatar.tsx +1 -1
  54. package/docs/patterns/components-breadcrumb--editorial.tsx +1 -1
  55. package/docs/patterns/components-breadcrumb--long-path.tsx +1 -1
  56. package/docs/patterns/components-breadcrumb--path.tsx +1 -1
  57. package/docs/patterns/components-breadcrumb--router-links.tsx +1 -1
  58. package/docs/patterns/components-button-button--copy-button.tsx +1 -1
  59. package/docs/patterns/components-button-button--destructive-action.tsx +1 -1
  60. package/docs/patterns/components-button-button--external-link.tsx +1 -1
  61. package/docs/patterns/components-button-button--ghost-action.tsx +1 -1
  62. package/docs/patterns/components-button-button--inverse-action.tsx +1 -1
  63. package/docs/patterns/components-button-button--link-render.tsx +1 -1
  64. package/docs/patterns/components-button-button--multi-state-badge.tsx +1 -1
  65. package/docs/patterns/components-button-button--outline-mono.tsx +1 -1
  66. package/docs/patterns/components-button-button--primary-action.tsx +1 -1
  67. package/docs/patterns/components-button-button--row-hug.tsx +1 -1
  68. package/docs/patterns/components-button-button--row-layout.tsx +1 -1
  69. package/docs/patterns/components-button-button--secondary-action.tsx +1 -1
  70. package/docs/patterns/components-button-button--suggestion-pills.tsx +1 -1
  71. package/docs/patterns/components-button-button--with-count.tsx +1 -1
  72. package/docs/patterns/components-button-button--with-icon.tsx +1 -1
  73. package/docs/patterns/components-button-floatingactionbutton--vertical-actions.tsx +1 -1
  74. package/docs/patterns/components-calembed--pattern-skip-in-footer.tsx +1 -1
  75. package/docs/patterns/components-card-card--body-slot-occupancy-history.tsx +1 -1
  76. package/docs/patterns/components-card-card--headerless-media.tsx +1 -1
  77. package/docs/patterns/components-card-card--outlined-layout.tsx +1 -1
  78. package/docs/patterns/components-card-card--pinned-height.tsx +1 -1
  79. package/docs/patterns/components-card-selectablecard--selectable-cards-pattern.tsx +1 -1
  80. package/docs/patterns/components-carousel--image-carousel.tsx +30 -0
  81. package/docs/patterns/components-chart--audience-activity-heatmap.tsx +1 -1
  82. package/docs/patterns/components-chart--cartesian-no-data-gaps.tsx +1 -1
  83. package/docs/patterns/components-chart--occupancy-history-in-card.tsx +1 -1
  84. package/docs/patterns/components-chart--occupancy-in-card.tsx +1 -1
  85. package/docs/patterns/components-chart--post-reach-distribution.tsx +1 -1
  86. package/docs/patterns/components-chart--ranked-audience-breakdown.tsx +1 -1
  87. package/docs/patterns/components-chart--unit-grid-composition.tsx +1 -1
  88. package/docs/patterns/components-chatdock--pattern-chat-dock.tsx +1 -1
  89. package/docs/patterns/components-chatdock--pattern-start-project-gate.tsx +1 -1
  90. package/docs/patterns/components-chatqa--pattern-qa-with-reply.tsx +1 -1
  91. package/docs/patterns/components-checkbox-checkbox--default.tsx +1 -1
  92. package/docs/patterns/components-checkbox-checkbox--with-count.tsx +1 -1
  93. package/docs/patterns/components-checkbox-checkbox--with-description.tsx +1 -1
  94. package/docs/patterns/components-checkbox-checkboxgroup--default.tsx +1 -1
  95. package/docs/patterns/components-checkbox-checkboxgroup--option-counts.tsx +1 -1
  96. package/docs/patterns/components-descriptionlist--details.tsx +1 -1
  97. package/docs/patterns/components-descriptionlist--post-metadata.tsx +1 -1
  98. package/docs/patterns/components-dialog--alert-dialog-destructive.tsx +1 -1
  99. package/docs/patterns/components-dialog--default-dialog.tsx +1 -1
  100. package/docs/patterns/components-dialog--form-dialog.tsx +1 -1
  101. package/docs/patterns/components-displaycontrols--page-utilities.tsx +1 -1
  102. package/docs/patterns/components-field--horizontal-input.tsx +1 -1
  103. package/docs/patterns/components-field--horizontal-text-area.tsx +1 -1
  104. package/docs/patterns/components-field--multi-control.tsx +1 -1
  105. package/docs/patterns/components-filterpanel--panel.tsx +55 -0
  106. package/docs/patterns/components-footerreveal--marketing-hero-pattern.tsx +1 -1
  107. package/docs/patterns/components-footerreveal--marketing-hero-ruled-pattern.tsx +1 -1
  108. package/docs/patterns/components-footerreveal--marketing-hero-with-gallery-intro.tsx +1 -1
  109. package/docs/patterns/components-footerreveal--marketing-page-pattern.tsx +1 -1
  110. package/docs/patterns/components-footerreveal--ruled-grid-footer-pattern.tsx +1 -1
  111. package/docs/patterns/components-footerreveal--sequenced-marketing-hero.tsx +1 -1
  112. package/docs/patterns/components-herointro--two-line-intro.tsx +1 -1
  113. package/docs/patterns/components-herotilestack--marketing-hero-pattern.tsx +1 -1
  114. package/docs/patterns/components-herotilestack--marketing-hero-text-sequence.tsx +1 -1
  115. package/docs/patterns/components-herotilestack--marketing-hero-with-gallery-intro.tsx +1 -1
  116. package/docs/patterns/components-indexlist--post-index.tsx +1 -1
  117. package/docs/patterns/components-intakeconfirmation--booked-pattern.tsx +1 -1
  118. package/docs/patterns/components-intakeconfirmation--emailed-pattern.tsx +1 -1
  119. package/docs/patterns/components-intakeform--about-you-pattern.tsx +1 -1
  120. package/docs/patterns/components-intakeform--short-form-pattern.tsx +1 -1
  121. package/docs/patterns/components-intakemodal--intake-modal-pattern.tsx +1 -1
  122. package/docs/patterns/components-kbd--command-row.tsx +1 -1
  123. package/docs/patterns/components-kbd--numbered-choices.tsx +1 -1
  124. package/docs/patterns/components-kbd--shortcut.tsx +1 -1
  125. package/docs/patterns/components-linktile--resource-tile.tsx +33 -0
  126. package/docs/patterns/components-linktile--router-link.tsx +25 -0
  127. package/docs/patterns/components-moremenu--action-menu.tsx +1 -1
  128. package/docs/patterns/components-moremenu--in-card-header.tsx +1 -1
  129. package/docs/patterns/components-navlist--side-nav-settings.tsx +1 -1
  130. package/docs/patterns/components-pageheader--app-header-pattern.tsx +1 -1
  131. package/docs/patterns/components-pageheader--page-section-header.tsx +1 -1
  132. package/docs/patterns/components-pageheader--toolbar-header.tsx +1 -1
  133. package/docs/patterns/components-panel--end-detail-rail.tsx +1 -1
  134. package/docs/patterns/components-pillgroup--pill-group-pattern.tsx +1 -1
  135. package/docs/patterns/components-promptbar--pattern-prompt-bar.tsx +1 -1
  136. package/docs/patterns/components-prose--article-body.tsx +1 -1
  137. package/docs/patterns/components-radio-radiogroup--default.tsx +1 -1
  138. package/docs/patterns/components-scrollhorizontal--project-gallery-pattern.tsx +1 -1
  139. package/docs/patterns/components-scrollhorizontal--with-intro.tsx +1 -1
  140. package/docs/patterns/components-sectioncaption--column-caption.tsx +1 -1
  141. package/docs/patterns/components-sectioncaption--with-action.tsx +1 -1
  142. package/docs/patterns/components-sheet--bottom-sheet.tsx +1 -1
  143. package/docs/patterns/components-sheet--end-sheet.tsx +1 -1
  144. package/docs/patterns/components-sitenav--brand-and-cta.tsx +1 -1
  145. package/docs/patterns/components-sitenav--centered-links.tsx +1 -1
  146. package/docs/patterns/components-sitenav--compact.tsx +1 -1
  147. package/docs/patterns/components-sitenav--marketing-header.tsx +1 -1
  148. package/docs/patterns/components-sitenav--mega-menu.tsx +1 -1
  149. package/docs/patterns/components-stat--insights-row.tsx +1 -1
  150. package/docs/patterns/components-stepprogress--step-progress-pattern.tsx +1 -1
  151. package/docs/patterns/components-switch--default.tsx +1 -1
  152. package/docs/patterns/components-switch--settings-row.tsx +1 -1
  153. package/docs/patterns/components-tab--settings-pages.tsx +1 -1
  154. package/docs/patterns/components-taskrows--action-details.tsx +1 -1
  155. package/docs/patterns/components-taskrows--capsules.tsx +1 -1
  156. package/docs/patterns/components-taskrows--card-with-status-rows.tsx +1 -1
  157. package/docs/patterns/components-taskrows--controlled-expand.tsx +1 -1
  158. package/docs/patterns/components-taskrows--custom-slots.tsx +1 -1
  159. package/docs/patterns/components-taskrows--status-list.tsx +1 -1
  160. package/docs/patterns/components-taskrows--tag-chips.tsx +1 -1
  161. package/docs/patterns/components-textlink--external-destination.tsx +1 -1
  162. package/docs/patterns/components-textlink--inline-prose.tsx +1 -1
  163. package/docs/patterns/components-textlink--quiet-title.tsx +1 -1
  164. package/docs/patterns/components-textlink--supporting-copy.tsx +1 -1
  165. package/docs/patterns/components-textsequence--default.tsx +1 -1
  166. package/docs/patterns/components-textsequence--reduced-motion.tsx +1 -1
  167. package/docs/patterns/components-textsequence--shapes.tsx +1 -1
  168. package/docs/patterns/components-tilegrid--masonry.tsx +44 -0
  169. package/docs/patterns/components-toast--stacked-notifications.tsx +1 -1
  170. package/docs/patterns/components-tooltip--controlled.tsx +1 -1
  171. package/docs/patterns/components-tooltip--disabled-control.tsx +1 -1
  172. package/docs/patterns/components-tooltip--icon-action.tsx +1 -1
  173. package/docs/patterns/components-tooltip--keyboard-shortcut.tsx +1 -1
  174. package/docs/patterns/components-tooltip--placement.tsx +1 -1
  175. package/docs/patterns/foundations-scroll-fade--horizontal-rail.tsx +1 -1
  176. package/docs/patterns/foundations-scroll-fade--overflowing-list.tsx +1 -1
  177. package/docs/patterns/guides-chart-explorations--comparison-gallery.tsx +1 -1
  178. package/docs/patterns/guides-filter-panel--filtered-grid.tsx +182 -0
  179. package/docs/patterns/guides-filter-panel--filtered-index.tsx +64 -153
  180. package/docs/patterns/guides-overlay-flows--notification-preferences.tsx +1 -1
  181. package/docs/patterns/guides-post-page--post-page.tsx +98 -54
  182. package/docs/patterns/guides-profile-typography--editorial-profile.tsx +1 -1
  183. package/docs/patterns/guides-resource-detail--detail.tsx +261 -0
  184. package/docs/patterns/index.json +57 -1
  185. package/package.json +1 -1
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — horizontal input
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — horizontal input
2
2
  // Storybook: Components/Field → Pattern — horizontal input (?path=/story/components-field--horizontal-input)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — horizontal textarea
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — horizontal textarea
2
2
  // Storybook: Components/Field → Pattern — horizontal textarea (?path=/story/components-field--horizontal-text-area)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — multi-control
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — multi-control
2
2
  // Storybook: Components/Field → Pattern — multi-control (?path=/story/components-field--multi-control)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -0,0 +1,55 @@
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — filter panel
2
+ // Storybook: Components/FilterPanel → Pattern — filter panel (?path=/story/components-filterpanel--panel)
3
+ // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
+
5
+ import {
6
+ FilterPanel,
7
+ countFilterOptions,
8
+ matchesFilterSelection,
9
+ useFilterSelection,
10
+ type FilterFacets,
11
+ type FilterPanelGroup,
12
+ } from "@thewhatmatters/wmds";
13
+
14
+ export interface FilterableItem {
15
+ id: string;
16
+ title: string;
17
+ /** The item's options in each filter group, by group id. */
18
+ facets: FilterFacets;
19
+ }
20
+
21
+ function itemsLabel(count: number) {
22
+ return count === 1 ? "1 item" : `${count} items`;
23
+ }
24
+
25
+ export function FilteredList({ items, groups }: { items: FilterableItem[]; groups: FilterPanelGroup[] }) {
26
+ const [selection, setSelection] = useFilterSelection();
27
+ const shown = items.filter((item) => matchesFilterSelection(item.facets, selection));
28
+
29
+ return (
30
+ <FilterPanel
31
+ groups={countFilterOptions(groups, items, itemsLabel)}
32
+ selection={selection}
33
+ onSelectionChange={setSelection}
34
+ resultsLabel={itemsLabel(shown.length)}
35
+ >
36
+ <div className="grid w-full max-w-[48rem] grid-cols-1 gap-6 md:grid-cols-[14rem_minmax(0,1fr)]">
37
+ <FilterPanel.Trigger className="justify-self-start md:hidden" />
38
+ <FilterPanel.Rail className="max-md:hidden" />
39
+ <div>
40
+ <p role="status" className="type-supporting text-muted">
41
+ {itemsLabel(shown.length)}
42
+ </p>
43
+ <ul className="type-body m-0 mt-3 list-none p-0 text-fg">
44
+ {shown.map((item) => (
45
+ <li key={item.id} className="border-b border-border py-3">
46
+ {item.title}
47
+ </li>
48
+ ))}
49
+ </ul>
50
+ </div>
51
+ </div>
52
+ <FilterPanel.Sheet />
53
+ </FilterPanel>
54
+ );
55
+ }
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — marketing hero
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — marketing hero
2
2
  // Storybook: Components/FooterReveal → Pattern — marketing hero (?path=/story/components-footerreveal--marketing-hero-pattern)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — marketing hero ruled grid
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — marketing hero ruled grid
2
2
  // Storybook: Components/FooterReveal → Pattern — marketing hero ruled grid (?path=/story/components-footerreveal--marketing-hero-ruled-pattern)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Marketing hero with gallery intro
1
+ // @thewhatmatters/wmds@0.4.8 · Marketing hero with gallery intro
2
2
  // Storybook: Components/FooterReveal → Marketing hero with gallery intro (?path=/story/components-footerreveal--marketing-hero-with-gallery-intro)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — marketing page
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — marketing page
2
2
  // Storybook: Components/FooterReveal → Pattern — marketing page (?path=/story/components-footerreveal--marketing-page-pattern)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — ruled grid footer
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — ruled grid footer
2
2
  // Storybook: Components/FooterReveal → Pattern — ruled grid footer (?path=/story/components-footerreveal--ruled-grid-footer-pattern)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — marketing hero with sequenced gallery
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — marketing hero with sequenced gallery
2
2
  // Storybook: Components/FooterReveal → Pattern — marketing hero with sequenced gallery (?path=/story/components-footerreveal--sequenced-marketing-hero)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — two-line intro
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — two-line intro
2
2
  // Storybook: Components/HeroIntro → Pattern — two-line intro (?path=/story/components-herointro--two-line-intro)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — marketing hero
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — marketing hero
2
2
  // Storybook: Components/HeroTileStack → Pattern — marketing hero (?path=/story/components-herotilestack--marketing-hero-pattern)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — marketing hero text sequence
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — marketing hero text sequence
2
2
  // Storybook: Components/HeroTileStack → Pattern — marketing hero text sequence (?path=/story/components-herotilestack--marketing-hero-text-sequence)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Marketing hero with gallery intro
1
+ // @thewhatmatters/wmds@0.4.8 · Marketing hero with gallery intro
2
2
  // Storybook: Components/HeroTileStack → Marketing hero with gallery intro (?path=/story/components-herotilestack--marketing-hero-with-gallery-intro)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — post index
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — post index
2
2
  // Storybook: Components/IndexList → Pattern — post index (?path=/story/components-indexlist--post-index)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — booked
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — booked
2
2
  // Storybook: Components/IntakeConfirmation → Pattern — booked (?path=/story/components-intakeconfirmation--booked-pattern)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — emailed
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — emailed
2
2
  // Storybook: Components/IntakeConfirmation → Pattern — emailed (?path=/story/components-intakeconfirmation--emailed-pattern)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — about you
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — about you
2
2
  // Storybook: Components/IntakeForm → Pattern — about you (?path=/story/components-intakeform--about-you-pattern)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — short form
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — short form
2
2
  // Storybook: Components/IntakeForm → Pattern — short form (?path=/story/components-intakeform--short-form-pattern)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — intake modal
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — intake modal
2
2
  // Storybook: Components/IntakeModal → Pattern — intake modal (?path=/story/components-intakemodal--intake-modal-pattern)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — command row
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — command row
2
2
  // Storybook: Components/Kbd → Pattern — command row (?path=/story/components-kbd--command-row)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — numbered choice keys
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — numbered choice keys
2
2
  // Storybook: Components/Kbd → Pattern — numbered choice keys (?path=/story/components-kbd--numbered-choices)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — keyboard shortcut
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — keyboard shortcut
2
2
  // Storybook: Components/Kbd → Pattern — keyboard shortcut (?path=/story/components-kbd--shortcut)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -0,0 +1,33 @@
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — resource tile
2
+ // Storybook: Components/LinkTile → Pattern — resource tile (?path=/story/components-linktile--resource-tile)
3
+ // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
+
5
+ import { Badge, LinkTile } from "@thewhatmatters/wmds";
6
+
7
+ export interface ResourceTileProps {
8
+ title: string;
9
+ href: string;
10
+ /** Another site: opens in a new tab. */
11
+ external?: boolean;
12
+ /** One line under the title, for example the domain. */
13
+ meta?: string;
14
+ /** A short label over the image, for example "Free". */
15
+ tag?: string;
16
+ /** The preview. Its width and height hold the tile's space before the image loads. */
17
+ image: { src: string; alt: string; width: number; height: number };
18
+ }
19
+
20
+ export function ResourceTile({ title, href, external, meta, tag, image }: ResourceTileProps) {
21
+ return (
22
+ <LinkTile
23
+ title={title}
24
+ href={href}
25
+ external={external}
26
+ meta={meta}
27
+ tag={tag != null ? <Badge>{tag}</Badge> : undefined}
28
+ media={
29
+ <img src={image.src} alt={image.alt} width={image.width} height={image.height} loading="lazy" decoding="async" />
30
+ }
31
+ />
32
+ );
33
+ }
@@ -0,0 +1,25 @@
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — router link
2
+ // Storybook: Components/LinkTile → Pattern — router link (?path=/story/components-linktile--router-link)
3
+ // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
+
5
+ import Link from "next/link";
6
+ import { LinkTile } from "@thewhatmatters/wmds";
7
+
8
+ export interface PageTileProps {
9
+ title: string;
10
+ href: string;
11
+ meta?: string;
12
+ image: { src: string; alt: string; width: number; height: number };
13
+ }
14
+
15
+ export function PageTile({ title, href, meta, image }: PageTileProps) {
16
+ return (
17
+ <LinkTile
18
+ title={title}
19
+ meta={meta}
20
+ render={<Link href={href} />}
21
+ ratio={4 / 3}
22
+ media={<img src={image.src} alt={image.alt} width={image.width} height={image.height} loading="lazy" decoding="async" />}
23
+ />
24
+ );
25
+ }
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — action menu
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — action menu
2
2
  // Storybook: Components/MoreMenu → Pattern — action menu (?path=/story/components-moremenu--action-menu)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — Card header cluster
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — Card header cluster
2
2
  // Storybook: Components/MoreMenu → Pattern — Card header cluster (?path=/story/components-moremenu--in-card-header)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — side nav (settings)
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — side nav (settings)
2
2
  // Storybook: Components/NavList → Pattern — side nav (settings) (?path=/story/components-navlist--side-nav-settings)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — app header
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — app header
2
2
  // Storybook: Components/PageHeader → Pattern — app header (?path=/story/components-pageheader--app-header-pattern)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — page header
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — page header
2
2
  // Storybook: Components/PageHeader → Pattern — page header (?path=/story/components-pageheader--page-section-header)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — toolbar header
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — toolbar header
2
2
  // Storybook: Components/PageHeader → Pattern — toolbar header (?path=/story/components-pageheader--toolbar-header)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — end detail rail
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — end detail rail
2
2
  // Storybook: Components/Panel → Pattern — end detail rail (?path=/story/components-panel--end-detail-rail)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — pill group
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — pill group
2
2
  // Storybook: Components/PillGroup → Pattern — pill group (?path=/story/components-pillgroup--pill-group-pattern)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — prompt bar
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — prompt bar
2
2
  // Storybook: Components/PromptBar → Pattern — prompt bar (?path=/story/components-promptbar--pattern-prompt-bar)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — article body
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — article body
2
2
  // Storybook: Components/Prose → Pattern — article body (?path=/story/components-prose--article-body)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — vertical
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — vertical
2
2
  // Storybook: Components/Radio/RadioGroup → Pattern — vertical (?path=/story/components-radio-radiogroup--default)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — project gallery
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — project gallery
2
2
  // Storybook: Components/ScrollHorizontal → Pattern — project gallery (?path=/story/components-scrollhorizontal--project-gallery-pattern)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — gallery intro
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — gallery intro
2
2
  // Storybook: Components/ScrollHorizontal → Pattern — gallery intro (?path=/story/components-scrollhorizontal--with-intro)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — column caption
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — column caption
2
2
  // Storybook: Components/SectionCaption → Pattern — column caption (?path=/story/components-sectioncaption--column-caption)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — caption with an action
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — caption with an action
2
2
  // Storybook: Components/SectionCaption → Pattern — caption with an action (?path=/story/components-sectioncaption--with-action)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — bottom sheet
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — bottom sheet
2
2
  // Storybook: Components/Sheet → Pattern — bottom sheet (?path=/story/components-sheet--bottom-sheet)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — end sheet
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — end sheet
2
2
  // Storybook: Components/Sheet → Pattern — end sheet (?path=/story/components-sheet--end-sheet)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — brand + CTA
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — brand + CTA
2
2
  // Storybook: Components/SiteNav → Pattern — brand + CTA (?path=/story/components-sitenav--brand-and-cta)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — centered links
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — centered links
2
2
  // Storybook: Components/SiteNav → Pattern — centered links (?path=/story/components-sitenav--centered-links)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — compact (scrolled)
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — compact (scrolled)
2
2
  // Storybook: Components/SiteNav → Pattern — compact (scrolled) (?path=/story/components-sitenav--compact)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — marketing header
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — marketing header
2
2
  // Storybook: Components/SiteNav → Pattern — marketing header (?path=/story/components-sitenav--marketing-header)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — mega menu
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — mega menu
2
2
  // Storybook: Components/SiteNav → Pattern — mega menu (?path=/story/components-sitenav--mega-menu)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — insights row
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — insights row
2
2
  // Storybook: Components/Stat → Pattern — insights row (?path=/story/components-stat--insights-row)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — step progress
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — step progress
2
2
  // Storybook: Components/StepProgress → Pattern — step progress (?path=/story/components-stepprogress--step-progress-pattern)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — default
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — default
2
2
  // Storybook: Components/Switch → Pattern — default (?path=/story/components-switch--default)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — settings row
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — settings row
2
2
  // Storybook: Components/Switch → Pattern — settings row (?path=/story/components-switch--settings-row)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — settings pages
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — settings pages
2
2
  // Storybook: Components/Tab → Pattern — settings pages (?path=/story/components-tab--settings-pages)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — action details
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — action details
2
2
  // Storybook: Components/TaskRows → Pattern — action details (?path=/story/components-taskrows--action-details)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — capsules
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — capsules
2
2
  // Storybook: Components/TaskRows → Pattern — capsules (?path=/story/components-taskrows--capsules)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — card + status rows
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — card + status rows
2
2
  // Storybook: Components/TaskRows → Pattern — card + status rows (?path=/story/components-taskrows--card-with-status-rows)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — controlled expand
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — controlled expand
2
2
  // Storybook: Components/TaskRows → Pattern — controlled expand (?path=/story/components-taskrows--controlled-expand)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — custom leading / trailing
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — custom leading / trailing
2
2
  // Storybook: Components/TaskRows → Pattern — custom leading / trailing (?path=/story/components-taskrows--custom-slots)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — status rows
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — status rows
2
2
  // Storybook: Components/TaskRows → Pattern — status rows (?path=/story/components-taskrows--status-list)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — tag chips
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — tag chips
2
2
  // Storybook: Components/TaskRows → Pattern — tag chips (?path=/story/components-taskrows--tag-chips)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — external destination
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — external destination
2
2
  // Storybook: Components/TextLink → Pattern — external destination (?path=/story/components-textlink--external-destination)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — inline prose link
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — inline prose link
2
2
  // Storybook: Components/TextLink → Pattern — inline prose link (?path=/story/components-textlink--inline-prose)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — quiet title link
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — quiet title link
2
2
  // Storybook: Components/TextLink → Pattern — quiet title link (?path=/story/components-textlink--quiet-title)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Pattern — supporting copy link
1
+ // @thewhatmatters/wmds@0.4.8 · Pattern — supporting copy link
2
2
  // Storybook: Components/TextLink → Pattern — supporting copy link (?path=/story/components-textlink--supporting-copy)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Default
1
+ // @thewhatmatters/wmds@0.4.8 · Default
2
2
  // Storybook: Components/TextSequence → Default (?path=/story/components-textsequence--default)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Reduced motion
1
+ // @thewhatmatters/wmds@0.4.8 · Reduced motion
2
2
  // Storybook: Components/TextSequence → Reduced motion (?path=/story/components-textsequence--reduced-motion)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4
 
@@ -1,4 +1,4 @@
1
- // @thewhatmatters/wmds@0.4.6 · Shapes
1
+ // @thewhatmatters/wmds@0.4.8 · Shapes
2
2
  // Storybook: Components/TextSequence → Shapes (?path=/story/components-textsequence--shapes)
3
3
  // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
4
4