@monimesl/dot-cli 0.1.0-alpha.15 → 0.1.0-alpha.18

package/dist/templates/showcase/pages/{lists → components/lists}/state.ts

@@ -3,7 +3,6 @@ export interface Artist {
   name: string;
   song: string;
   genre: string;
-  icon: string;
 }
 
 export interface Release {
@@ -15,6 +14,42 @@ export interface Release {
   tone: string;
 }
 
+export interface ChartSong {
+  id: number;
+  title: string;
+  plays: string;
+}
+
+const TITLES = [
+  'Lemonade',
+  'Control',
+  'Love Na Scam',
+  'Hannah',
+  'Nack',
+  'Exodus',
+  'Ashobi',
+  'Send Money',
+  'Blunt',
+  "O'way",
+  'Shadow',
+  'Leader',
+  'Kenyatta',
+  'Shock',
+  'Leh Wi Make Salone',
+  'Borbor Bele',
+  'Let Me Love You',
+  'Cry Africa',
+  'Corruption',
+  'Ghetto Struggle',
+];
+
+// This week's chart. The list shows the first few, and more as you scroll.
+export const CHART: ChartSong[] = TITLES.map((title, index) => ({
+  id: index + 1,
+  title,
+  plays: `${(20 - index) * 1000} plays`,
+}));
+
 export default {
   artists: [
     {
@@ -22,32 +57,28 @@ export default {
       name: 'Drizilik',
       song: 'Lemonade, with The Therapist',
       genre: 'Kriofusion',
-      icon: 'microphone',
     },
-    { id: 'boii', name: 'Boii', song: 'Love Na Scam', genre: 'Afrobeats', icon: 'microphone' },
-    { id: 'apreel', name: 'ApreeL', song: 'Control', genre: 'Afropop', icon: 'microphone' },
-    { id: 'donii-major', name: 'Donii Major', song: 'Hannah', genre: 'R&B', icon: 'microphone' },
+    { id: 'boii', name: 'Boii', song: 'Love Na Scam', genre: 'Afrobeats' },
+    { id: 'apreel', name: 'ApreeL', song: 'Control', genre: 'Afropop' },
+    { id: 'donii-major', name: 'Donii Major', song: 'Hannah', genre: 'R&B' },
     {
       id: 'star-zee',
       name: 'Star Zee',
       song: 'Leader, with Stonebwoy',
       genre: 'Hip hop',
-      icon: 'microphone',
     },
     {
       id: 'kao-denero',
       name: 'Kao Denero',
       song: 'Kenyatta',
       genre: 'Hip hop',
-      icon: 'microphone',
     },
-    { id: 'laj', name: 'LAJ', song: 'Shock, with Cassidy', genre: 'Hip hop', icon: 'microphone' },
+    { id: 'laj', name: 'LAJ', song: 'Shock, with Cassidy', genre: 'Hip hop' },
     {
       id: 'k-man',
       name: 'K-Man',
       song: 'Leh Wi Make Salone',
       genre: 'Hip hop',
-      icon: 'microphone',
     },
   ] as Artist[],
   releases: [
@@ -93,25 +124,7 @@ export default {
     },
   ] as Release[],
   chosen: '',
-  // The record whose actions the sheet shows.
-  selected: null as Release | null,
-  toast: '',
-  icons: [
-    'music',
-    'playlist',
-    'microphone',
-    'headphones',
-    'ticket',
-    'video',
-    'globe',
-    'link',
-    'external-link',
-    'heart',
-    'star',
-    'share',
-    'download',
-    'calendar',
-    'location',
-    'search',
-  ],
+  chart: CHART.slice(0, 8),
+  chartSize: CHART.length,
+  saved: [] as string[],
 };

package/dist/templates/showcase/pages/components/lists/view.dml

@@ -0,0 +1,70 @@
+<View>
+  <Text variant="title">Lists</Text>
+  <Text>A List shows rows in a card. A ListItem can show an icon or a picture, a subtitle, and a value or a badge at its end. A row you can tap shows an arrow.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">List and ListItem</Text>
+    <Text variant="caption" tone="muted">Artists in a small list. Tap one: its data-id tells the page which one.</Text>
+    <List>
+      <For each="{{ artists }}" item="artist" key="id">
+        <ListItem icon="microphone" title="{{ artist.name }}" subtitle="{{ artist.song }}" value="{{ artist.genre }}" data-id="{{ artist.id }}" onTap="choose" />
+      </For>
+    </List>
+    <If condition="{{ chosen }}">
+      <Text>You chose {{ chosen }}</Text>
+    </If>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">size="md", with a picture and a badge</Text>
+    <Text variant="caption" tone="muted">Medium lists have more room. A ListItem's children show at its end, in place of value.</Text>
+    <List size="md">
+      <For each="{{ releases }}" item="release" key="id">
+        <ListItem image="statics/logo.png" title="{{ release.title }}" subtitle="{{ release.artist }} · {{ release.year }}">
+          <Badge tone="{{ release.tone }}">{{ release.note }}</Badge>
+        </ListItem>
+      </For>
+    </List>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">onEndReached</Text>
+    <Text variant="caption" tone="muted">Comes when the last row scrolls into view, so the page can add more. {{ chart.length }} of {{ chartSize }} songs so far.</Text>
+    <List onEndReached="showMore">
+      <For each="{{ chart }}" item="song" key="id">
+        <ListItem title="{{ song.id }}. {{ song.title }}" value="{{ song.plays }}" />
+      </For>
+    </List>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">DetailRow</Text>
+    <Text variant="caption" tone="muted">A label with its value, such as on a receipt. tone and weight change the value.</Text>
+    <View variant="card" gap="none">
+      <DetailRow label="Show" value="Salone Sounds Live" />
+      <DetailRow label="Seats" value="2, near the stage" tone="muted" />
+      <DetailRow label="Doors open" value="18:00" tone="info" />
+      <DetailRow label="Status" value="Paid" tone="success" />
+      <DetailRow label="Refunds" value="Not after Friday" tone="warning" />
+      <DetailRow label="Total" value="SLE 800" weight="bold" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">EmptyState</Text>
+    <Text variant="caption" tone="muted">Shows when a list has nothing in it, with a way forward.</Text>
+    <View variant="card">
+      <If condition="{{ saved.length > 0 }}">
+        <For each="{{ saved }}" item="title" key="*this">
+          <Text>{{ title }}</Text>
+        </For>
+        <Button variant="secondary" onClick="clearSaved">Clear</Button>
+      </If>
+      <Else>
+        <EmptyState icon="heart" title="No saved songs" text="Save a song to find it here later.">
+          <Button variant="secondary" onClick="saveSome">Save two songs</Button>
+        </EmptyState>
+      </Else>
+    </View>
+  </View>
+</View>

package/dist/templates/showcase/pages/{payments → components/money}/view.dml

@@ -1,11 +1,17 @@
 <View>
-  <Text variant="title">Payments</Text>
-  <Text>Fields for money and codes. Tip the band with a QR code. Confirm tickets with a code.</Text>
+  <Text variant="title">Money and codes</Text>
+  <Text>Fields for amounts and codes, and QR codes to scan. Tip the band, pledge to its tour, and confirm your tickets.</Text>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">An amount. It is formatted as you type and sent as a number.</Text>
-    <AmountInput label="Tip for the band" value="{{ amount }}" disabled="{{ locked }}" onChange="setAmount" hint="The QR code below asks for it" />
+    <Text variant="subtitle">AmountInput</Text>
+    <Text variant="caption" tone="muted">Formats the amount as you type. It sends a number in cents, the minor unit, so 150 is SLE 1.50.</Text>
+    <AmountInput label="Tip for the band" placeholder="0.00" value="{{ amount }}" disabled="{{ locked }}" onChange="setAmount" hint="The QR code below asks for it" />
     <Switch label="Lock the tip" checked="{{ locked }}" onChange="setLocked" />
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">QRCode</Text>
+    <Text variant="caption" tone="muted">Shows text, such as a payment link, as a QR code. It's dark on light in every theme, so any camera can read it.</Text>
     <View variant="card" align="center" gap="medium">
       <If condition="{{ request }}">
         <QRCode value="{{ request }}" size="180" label="A QR code to tip SLE {{ amountText }}" />
@@ -18,12 +24,14 @@
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">Another currency: US dollars. This one sends dollars, not cents</Text>
-    <AmountInput label="Pledge for the band's Mano River tour" currency="USD" unit="major" value="{{ pledge }}" error="{{ pledgeError }}" hint="Up to USD 1,000" onChange="setPledge" />
+    <Text variant="subtitle">currency, unit and minorUnits</Text>
+    <Text variant="caption" tone="muted">In US dollars. unit="major" sends dollars, not cents, and minorUnits="0" leaves the cents off.</Text>
+    <AmountInput label="Pledge for the band's Mano River tour" currency="USD" unit="major" minorUnits="0" value="{{ pledge }}" error="{{ pledgeError }}" hint="Up to USD 1,000" onChange="setPledge" />
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">A one-time code. Type it, paste it, or let the phone fill it from an SMS.</Text>
+    <Text variant="subtitle">CodeInput</Text>
+    <Text variant="caption" tone="muted">A one-time code, one box per digit. Type it, paste it, or let the phone fill it from an SMS. onComplete comes when the last box fills.</Text>
     <If condition="{{ verified }}">
       <Notice tone="success" title="Code accepted">Your two tickets are confirmed.</Notice>
       <Button variant="secondary" onClick="startAgain">Start again</Button>
@@ -34,7 +42,8 @@
   </View>
 
   <View gap="small">
-    <Text variant="caption" tone="muted">A PIN. It is hidden as you type and locks when complete.</Text>
+    <Text variant="subtitle">A PIN</Text>
+    <Text variant="caption" tone="muted">length="4" and secure, which hides the digits. Here it locks once complete.</Text>
     <CodeInput label="PIN" length="4" secure value="{{ pin }}" disabled="{{ pin.length === 4 }}" onChange="setPin" />
     <View direction="row" align="center" gap="small">
       <Text tone="muted">{{ pin.length }} of 4 digits</Text>

package/dist/templates/showcase/pages/components/reading/controller.ts

@@ -0,0 +1,5 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+});

package/dist/templates/showcase/pages/components/reading/state.ts

@@ -0,0 +1,23 @@
+// As a news app would get an article's body from its server. The lines are joined here so the
+// production build stays on one line.
+const body = [
+  "## What's on sale",
+  '',
+  'Stalls opened before dawn, and by eight the **rice** sellers had a queue. Prices are set each morning and shown at the gate:',
+  '',
+  '- Rice, a cup: SLE 5',
+  '- Palm oil, a pint: SLE 12',
+  '- Pepper, a heap: SLE 3',
+  '',
+  "> The roof keeps the rain off. That's half the battle in July.",
+  '',
+  "Read the [council's notice](https://example.com/lumley-market) for opening hours, or see _Getting there_ below.",
+  '',
+  '### Getting there',
+  '',
+  'Poda-podas from Lumley junction stop at the gate. The car park opens next month.',
+].join('\n');
+
+export default {
+  body,
+};

package/dist/templates/showcase/pages/components/reading/view.dml

@@ -0,0 +1,42 @@
+<View>
+  <Text variant="title">Reading</Text>
+  <Text>Prose lays out long text, such as a news story, so it reads well. Quote sets someone's words apart. BulletList lists points. RichText draws Markdown from a server.</Text>
+  <Divider />
+
+  <Prose>
+    <Text variant="caption" tone="muted" weight="medium">FREETOWN · 11 OCTOBER</Text>
+    <Text variant="title">Lumley's new market opens to traders and a long queue</Text>
+    <Text variant="lead">More than two hundred traders moved into the covered market on Saturday, the first in the west of the city.</Text>
+    <Text variant="caption" tone="muted">By Mariama Kamara</Text>
+    <Text>The market took two years to build, on the old lorry park by the junction. Each trader has:</Text>
+    <BulletList>
+      <Bullet>
+        <Text>a stall with a lock</Text>
+      </Bullet>
+      <Bullet>
+        <Text>water at both ends of the hall</Text>
+      </Bullet>
+      <Bullet>
+        <Text>a place in the car park, from next month</Text>
+      </Bullet>
+    </BulletList>
+    <Quote cite="Fatmata Conteh, who sells cloth">
+      <Text>For twelve years I sold under an umbrella. Now I have a door that closes.</Text>
+    </Quote>
+    <Text>The council says it will open a second market in Kissy next year. <Text weight="bold">Stalls there are free</Text> for the first six months. To get one:</Text>
+    <BulletList ordered>
+      <Bullet>
+        <Text>Register at the council office in Lumley.</Text>
+      </Bullet>
+      <Bullet>
+        <Text>Bring a photo and your trader's card.</Text>
+      </Bullet>
+      <Bullet>
+        <Text>Wait for an SMS with your stall number.</Text>
+      </Bullet>
+    </BulletList>
+    <Divider />
+    <Text variant="caption" tone="muted">The rest of the story comes as Markdown from the newsroom's server, drawn by RichText.</Text>
+  </Prose>
+  <RichText markdown="{{ body }}" />
+</View>

package/dist/templates/showcase/pages/{lists → components/sheets}/controller.ts

@@ -3,14 +3,15 @@ import state from './state';
 export default definePage({
   initialState: state,
   mutations: {
-    choose: (state, event: DotEvent<unknown, { id: string }>) => {
-      const artist = state.artists.find((candidate) => candidate.id === event.data.id);
-      return { chosen: artist?.name ?? '' };
-    },
     openRelease: (state, event: DotEvent<unknown, { id: string }>) => ({
       selected: state.releases.find((release) => release.id === event.data.id) ?? null,
     }),
-    closeSheet: () => ({ selected: null }),
+    // A sheet doesn't close itself: the page sets `open` back to false.
+    closeRelease: () => ({ selected: null }),
+    openRating: () => ({ rating: true }),
+    closeRating: () => ({ rating: false }),
+    setStars: (_state, event: DotEvent<{ value: number }>) => ({ stars: event.detail.value }),
+    saveRating: (state) => ({ rating: false, saved: state.stars, toast: 'Thanks for rating' }),
     clearToast: () => ({ toast: '' }),
   },
   actions: {
@@ -26,12 +27,9 @@ export default definePage({
       if (!state.selected) {
         return;
       }
-      const { title, artist, year, note } = state.selected;
+      const { title, artist, year } = state.selected;
       this.setState({ selected: null });
-      await this.dash.system.share({
-        title,
-        text: `${title}, by ${artist} (${year}): ${note.toLowerCase()}.`,
-      });
+      await this.dash.system.share({ title, text: `${title}, by ${artist} (${year})` });
     },
   },
 });

package/dist/templates/showcase/pages/components/sheets/state.ts

@@ -0,0 +1,26 @@
+export interface Release {
+  id: string;
+  title: string;
+  artist: string;
+  year: number;
+}
+
+export default {
+  releases: [
+    {
+      id: 'rise-and-shine',
+      title: 'Rise & Shine',
+      artist: "Sierra Leone's Refugee All Stars",
+      year: 2010,
+    },
+    { id: 'kormot-bi-en-me', title: 'Kormot Bi En Me', artist: 'Steady Bongo', year: 1996 },
+    { id: 'borbor-bele', title: 'Borbor Bele', artist: 'Emmerson', year: 2004 },
+  ] as Release[],
+  // The record whose actions the sheet shows.
+  selected: null as Release | null,
+  // The rating sheet, and the rating it last saved.
+  rating: false,
+  stars: 3,
+  saved: 0,
+  toast: '',
+};

package/dist/templates/showcase/pages/components/sheets/view.dml

@@ -0,0 +1,38 @@
+<View>
+  <Text variant="title">Sheets</Text>
+  <Text>A Sheet slides up over the page while open is true. Tapping outside it, or its close icon, raises onClose. The page closes it by setting open back to false.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">An action sheet</Text>
+    <Text variant="caption" tone="muted">Tap a record to see what you can do with it.</Text>
+    <List>
+      <For each="{{ releases }}" item="release" key="id">
+        <ListItem icon="music" title="{{ release.title }}" subtitle="{{ release.artist }} · {{ release.year }}" data-id="{{ release.id }}" onTap="openRelease" />
+      </For>
+    </List>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">A sheet with a form</Text>
+    <Text variant="caption" tone="muted">Any component can go in a sheet. This one has no close icon, and more room inside.</Text>
+    <View variant="card" direction="row" align="center" gap="small">
+      <View grow>
+        <Text>{{ saved ? 'You gave ' + saved + ' stars' : 'Not rated yet' }}</Text>
+      </View>
+      <Button variant="secondary" onClick="openRating">Rate the show</Button>
+    </View>
+  </View>
+
+  <Sheet open="{{ selected !== null }}" title="{{ selected.title }} · {{ selected.year }}" showCloseIcon onClose="closeRelease">
+    <Button variant="secondary" onClick="copyTitle">Copy the title</Button>
+    <Button variant="secondary" onClick="shareRelease">Share it</Button>
+    <Button onClick="closeRelease">Cancel</Button>
+  </Sheet>
+
+  <Sheet open="{{ rating }}" title="Rate Salone Sounds Live" padding="large" onClose="closeRating">
+    <Slider label="Stars" min="1" max="5" showValue value="{{ stars }}" onChange="setStars" />
+    <Button onClick="saveRating">Save</Button>
+  </Sheet>
+
+  <Toast message="{{ toast }}" tone="success" onHide="clearToast" />
+</View>

package/dist/templates/showcase/pages/components/styles/controller.ts

@@ -0,0 +1,5 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+});

package/dist/templates/showcase/pages/components/styles/state.ts

@@ -0,0 +1,3 @@
+export default {
+  balance: 'SLE 1,250.00',
+};

package/dist/templates/showcase/pages/components/styles/view.dml

@@ -0,0 +1,101 @@
+<View>
+  <Text variant="title">Styles</Text>
+  <Text>A View's colours, outlines, corners and sizes come from the theme, so a dot looks right in light and dark.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">background</Text>
+    <Text variant="caption" tone="muted">With primary, write text with tone="onPrimary" so it reads.</Text>
+    <View background="primary" radius="large" padding="large" gap="small">
+      <Text variant="caption" tone="onPrimary">Your balance</Text>
+      <Text variant="display" tone="onPrimary" numeric>{{ balance }}</Text>
+    </View>
+    <Text variant="caption" tone="muted">The page's own colours</Text>
+    <View direction="row" gap="small" wrap>
+      <View background="background" border="subtle" radius="medium" padding="small">
+        <Text>background</Text>
+      </View>
+      <View background="surface" border="subtle" radius="medium" padding="small">
+        <Text>surface</Text>
+      </View>
+      <View background="muted" radius="medium" padding="small">
+        <Text>muted</Text>
+      </View>
+    </View>
+    <Text variant="caption" tone="muted">A tone is a soft tint</Text>
+    <View direction="row" gap="small" wrap>
+      <View background="info" radius="medium" padding="small">
+        <Text tone="info" weight="medium">New</Text>
+      </View>
+      <View background="success" radius="medium" padding="small">
+        <Text tone="success" weight="medium">Paid</Text>
+      </View>
+      <View background="warning" radius="medium" padding="small">
+        <Text tone="warning" weight="medium">Due Friday</Text>
+      </View>
+      <View background="danger" radius="medium" padding="small">
+        <Text tone="danger" weight="medium">Failed</Text>
+      </View>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Theme colours</Text>
+    <Text variant="caption" tone="muted">The dot's own colours, named in dot.ts: gold and ink. Use the names as a background or a text tone.</Text>
+    <View direction="row" gap="small" align="center">
+      <View background="gold" radius="full" paddingTop="small" paddingBottom="small" paddingStart="medium" paddingEnd="medium">
+        <Text weight="medium" tone="ink">Gold member</Text>
+      </View>
+      <Text tone="gold" weight="bold">Since 2024</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">border and radius</Text>
+    <Text variant="caption" tone="muted">border is none, subtle or strong. radius rounds the corners, and full makes a circle or a pill.</Text>
+    <View direction="row" gap="medium" align="end" wrap>
+      <View width="56" height="56" background="muted" radius="none" />
+      <View width="56" height="56" background="muted" radius="small" />
+      <View width="56" height="56" background="muted" radius="medium" />
+      <View width="56" height="56" background="muted" radius="large" />
+      <View width="56" height="56" background="muted" radius="full" />
+      <View width="56" height="56" border="subtle" radius="medium" />
+      <View width="56" height="56" border="strong" radius="medium" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">width and height</Text>
+    <Text variant="caption" tone="muted">In points, or fill for all the room there is.</Text>
+    <View background="muted" radius="medium" width="120" height="40" justify="center" align="center">
+      <Text>120 points</Text>
+    </View>
+    <View background="muted" radius="medium" width="fill" height="40" justify="center" align="center">
+      <Text>fill</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">minHeight, maxWidth and aspect</Text>
+    <Text variant="caption" tone="muted">minHeight keeps a box tall when it holds little. maxWidth stops it growing too wide. aspect sets its height from its width.</Text>
+    <View variant="card" minHeight="96" justify="center">
+      <Text>At least 96 points tall</Text>
+    </View>
+    <View variant="card" maxWidth="200">
+      <Text>No wider than 200 points, however wide the phone is</Text>
+    </View>
+    <View background="muted" radius="large" aspect="16:9" justify="center" align="center">
+      <Text>16:9</Text>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Together</Text>
+    <Text variant="caption" tone="muted">A price with even digits, and the old one crossed out.</Text>
+    <View variant="card" direction="row" align="center" gap="small">
+      <Text variant="subtitle">Freetown Jazz Night</Text>
+      <View grow />
+      <Text tone="muted" decoration="strikethrough" numeric>SLE 150</Text>
+      <Text weight="bold" numeric>SLE 120</Text>
+    </View>
+  </View>
+</View>

package/dist/templates/showcase/pages/{filters → components/tabs}/controller.ts

@@ -16,6 +16,7 @@ export default definePage({
     },
     clearFilters: (state) => ({ tab: 'all', genre: 'All', shown: state.releases }),
     chooseWhere: (_state, event: Chosen) => ({ where: event.detail.value }),
+    toggleLiked: (state) => ({ liked: !state.liked }),
   },
 });
 

package/dist/templates/showcase/pages/{filters → components/tabs}/state.ts

@@ -67,6 +67,7 @@ export default {
   songs: releases.filter((item) => item.kind === 'song').length,
   genres: ['All', 'Kriofusion', 'Afropop', 'Hip hop', 'R&B', 'Palm-wine', 'Gospel', 'Bubu'],
   genre: 'All',
+  liked: false,
   // Shows at home in Sierra Leone, and abroad in the Mano River region.
   where: 'home',
   home: [

package/dist/templates/showcase/pages/components/tabs/view.dml

@@ -0,0 +1,56 @@
+<View>
+  <Text variant="title">Tabs and chips</Text>
+  <Text>Tabs change what the page shows. Chips narrow it down. Try Songs with Palm-wine: nothing matches.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">Tabs and Chip</Text>
+    <Text variant="caption" tone="muted">The underline tabs, with a badge for each count. A chip is selected when the page says so.</Text>
+    <Tabs variant="underline" value="{{ tab }}" onChange="chooseTab">
+      <Tab value="all" label="All" />
+      <Tab value="album" label="Albums" badge="{{ albums }}" />
+      <Tab value="song" label="Songs" badge="{{ songs }}" />
+    </Tabs>
+    <View direction="row" gap="small" wrap>
+      <For each="{{ genres }}" item="option" key="*this">
+        <Chip label="{{ option }}" selected="{{ option === genre }}" data-genre="{{ option }}" onTap="chooseGenre" />
+      </For>
+    </View>
+    <If condition="{{ shown.length > 0 }}">
+      <List>
+        <For each="{{ shown }}" item="release" key="id">
+          <ListItem icon="{{ release.kind === 'album' ? 'playlist' : 'music' }}" title="{{ release.title }}" subtitle="{{ release.artist }} · {{ release.genre }}">
+            <Badge>{{ release.year }}</Badge>
+          </ListItem>
+        </For>
+      </List>
+    </If>
+    <Else>
+      <EmptyState icon="search" title="Nothing here" text="No release matches this tab and genre.">
+        <Button variant="secondary" onClick="clearFilters">Clear filters</Button>
+      </EmptyState>
+    </Else>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Chip with an icon</Text>
+    <Text variant="caption" tone="muted">A disabled chip can't be tapped, such as a filter with nothing behind it.</Text>
+    <View direction="row" gap="small" wrap>
+      <Chip icon="heart" label="Liked" selected="{{ liked }}" onTap="toggleLiked" />
+      <Chip icon="download" label="Downloaded" disabled />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">variant="segmented"</Text>
+    <Text variant="caption" tone="muted">For a few short choices. Shows at home and in the Mano River region.</Text>
+    <Tabs variant="segmented" value="{{ where }}" onChange="chooseWhere">
+      <Tab value="home" label="Sierra Leone" />
+      <Tab value="abroad" label="Abroad" />
+    </Tabs>
+    <List>
+      <For each="{{ where === 'home' ? home : abroad }}" item="show" key="id">
+        <ListItem icon="ticket" title="{{ show.title }}" subtitle="{{ show.place }} · {{ show.date }}" value="{{ show.city }}" />
+      </For>
+    </List>
+  </View>
+</View>

package/dist/templates/showcase/pages/components/text/controller.ts

@@ -0,0 +1,9 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  mutations: {
+    like: (state) => ({ likes: state.likes + 1 }),
+    unlike: (state) => ({ likes: Math.max(0, state.likes - 1) }),
+  },
+});

package/dist/templates/showcase/pages/components/text/state.ts

@@ -0,0 +1,3 @@
+export default {
+  likes: 12,
+};