@monimesl/dot-cli 1.0.0-beta.0 → 1.0.0-beta.10

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

@@ -1,5 +1,5 @@
 export default {
-  // Every icon name, as Icon's name, and ListItem's, Chip's, GridItem's and EmptyState's icon take.
+  // Every icon name. Icon's name, and the icon of ListItem, Chip, GridItem and EmptyState, take these.
   names: [
     'arrow-down',
     'arrow-left',

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

@@ -2,7 +2,7 @@ import { errorMessage } from '@monimesl/dot-runtime';
 
 import state from './state';
 
-// AUDACITY's id in Apple's catalog; its cover's address can change, so the page looks it up.
+// AUDACITY's id in Apple's catalog. Its cover's address can change, so the page looks it up.
 const AUDACITY = 6811765244;
 
 interface Lookup {

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

@@ -1,7 +1,7 @@
 export default {
   size: 64,
   loaded: '',
-  // Built at run time, so the build doesn't check that the file exists.
+  // Kept in state, not written in the view, so the build doesn't check that the file exists.
   missing: 'statics/missing.png',
   failure: '',
   // The cover of Drizilik's album AUDACITY, which the page asks Apple's catalog for.

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

@@ -14,7 +14,7 @@
 
   <View gap="small">
     <Text variant="subtitle">From the web</Text>
-    <Text variant="caption" tone="muted">The cover of Drizilik's album AUDACITY. With aspect="1:1" and no width, it fills the card.</Text>
+    <Text variant="caption" tone="muted">The cover of Drizilik's album AUDACITY. A web picture loads only from a host in dot.json's network.hosts. With aspect="1:1" and no width, it fills the card.</Text>
     <View variant="card" gap="small">
       <If condition="{{ cover }}">
         <Image src="{{ cover }}" alt="The cover of AUDACITY, by Drizilik" aspect="1:1" />
@@ -32,7 +32,7 @@
 
   <View gap="small">
     <Text variant="subtitle">shape and fit</Text>
-    <Text variant="caption" tone="muted">Rounded, square or circle. fit="contain" shows the whole picture; cover, the default, fills the box.</Text>
+    <Text variant="caption" tone="muted">shape is rounded, square or circle. fit="cover", the default, fills the box and crops. fit="contain" shows the whole picture.</Text>
     <View variant="card" direction="row" align="center" gap="large">
       <Image src="statics/logo.png" alt="Rounded" width="56" height="56" shape="rounded" />
       <Image src="statics/logo.png" alt="Square" width="56" height="56" shape="square" />
@@ -44,7 +44,7 @@
 
   <View gap="small">
     <Text variant="subtitle">onLoad</Text>
-    <Text variant="caption" tone="muted">Tells the page the picture's own size once it loads. The size on screen comes from state here.</Text>
+    <Text variant="caption" tone="muted">Comes once the picture loads, with its own size in event.detail.width and height. The size on screen comes from state here.</Text>
     <View variant="card" gap="small">
       <Image src="statics/logo.png" alt="Logo" width="{{ size }}" height="{{ size }}" onLoad="logoLoaded" />
       <Text>{{ size }} × {{ size }} on screen, {{ loaded }} in the file</Text>
@@ -57,7 +57,7 @@
 
   <View gap="small">
     <Text variant="subtitle">onError</Text>
-    <Text variant="caption" tone="muted">Tells the page why a picture didn't load.</Text>
+    <Text variant="caption" tone="muted">Comes when a picture fails to load. event.detail.message says which one.</Text>
     <View variant="card">
       <If condition="{{ failure }}">
         <Text>{{ failure }}</Text>

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

@@ -14,7 +14,8 @@ export default definePage({
   initialState: state,
   configs: { navigationBar: { title: 'Layout' } },
   hooks: {
-    // The shelf's covers come from Apple's catalog.
+    // The shelf's covers come from Apple's catalog. Dash sends requests only to the hosts in
+    // dot.json's network.hosts. The Network page shows more.
     async onLoad() {
       const ids = this.state.releases.map((release) => release.id).join(',');
       try {
@@ -45,9 +46,12 @@ export default definePage({
     nextAlign: (state) => ({ align: after(ALIGNS, state.align) }),
     nextGap: (state) => ({ gap: after(SPACES, state.gap) }),
     toggleWrap: (state) => ({ wrap: !state.wrap }),
+    toggleShelf: (state) => ({ shelfHidden: !state.shelfHidden }),
+    toggleCard: (state) => ({ cardLocked: !state.cardLocked }),
     openSection: (_state, event: DataEvent<{ name: string }>) => ({
       section: event.data.name,
     }),
+    // Scroll's change carries the index of the child at the start, once the row stops.
     showFirst: (_state, event: IndexEvent) => ({ first: event.detail.index }),
     shelfStart: () => ({ first: 0 }),
     shelfEnd: (state) => ({ first: state.releases.length - 1 }),

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

@@ -31,4 +31,6 @@ export default {
   ] as Release[],
   // The release at the start of the shelf.
   first: 0,
+  shelfHidden: false,
+  cardLocked: true,
 };

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

@@ -4,7 +4,7 @@
 
   <View gap="small">
     <Text variant="subtitle">View</Text>
-    <Text variant="caption" tone="muted">A View puts its items in a column or a row. variant="card" gives it a card's look. Change the one below.</Text>
+    <Text variant="caption" tone="muted">A View puts its children in a column, or in a row with direction="row". variant="card" gives it a card's look. Change the one below.</Text>
     <View variant="card" direction="{{ direction }}" justify="{{ justify }}" align="{{ align }}" gap="{{ gap }}" wrap="{{ wrap }}">
       <Button variant="secondary">Palm-wine</Button>
       <Button variant="secondary">Gumbe</Button>
@@ -43,7 +43,7 @@
 
   <View gap="small">
     <Text variant="subtitle">grow and onTap</Text>
-    <Text variant="caption" tone="muted">grow fills the space left over: the song grows, the year does not. A View can be tapped: tap the song.</Text>
+    <Text variant="caption" tone="muted">grow makes a View fill the space left over. The song grows and the year doesn't. A View with onTap can be tapped, so tap the song.</Text>
     <View direction="row" gap="small">
       <View variant="card" grow onTap="playSong">
         <Text>{{ playing ? 'Playing Exodus, by Drizilik' : 'Exodus, by Drizilik' }}</Text>
@@ -72,7 +72,7 @@
 
   <View gap="small">
     <Text variant="subtitle">Stack</Text>
-    <Text variant="caption" tone="muted">A Stack lays its children on top of each other, such as words over a picture.</Text>
+    <Text variant="caption" tone="muted">A Stack lays its children on top of each other, the first at the bottom, such as words over a picture.</Text>
     <Stack radius="large" aspect="16:9">
       <View background="gold" />
       <View justify="end" padding="large">
@@ -89,7 +89,7 @@
 
   <View gap="small">
     <Text variant="subtitle">Scroll</Text>
-    <Text variant="caption" tone="muted">A Scroll moves a row sideways. It stops at the start of each release. The buttons scroll it too.</Text>
+    <Text variant="caption" tone="muted">A Scroll moves a row sideways. snap="start" stops it at the start of a release. Once it stops, onChange sends the index of the first release in view. Setting index scrolls there, as the buttons do.</Text>
     <Scroll gap="medium" snap="start" index="{{ first }}" onChange="showFirst">
       <For each="{{ releases }}" item="release" key="id">
         <View gap="small">
@@ -111,9 +111,47 @@
     </View>
   </View>
 
+  <View gap="small">
+    <Text variant="subtitle">Cards in a Scroll</Text>
+    <Text variant="caption" tone="muted">A Scroll leaves room above and below for a low shadow, so a card's shadow isn't cut. A high shadow needs more than that, so use low here. paddingStart and paddingEnd give the first and last card room at the sides.</Text>
+    <Scroll gap="medium" paddingStart="medium" paddingEnd="medium">
+      <For each="{{ releases }}" item="release" key="id">
+        <View variant="card" elevation="low" border="none" width="144" gap="none">
+          <Text weight="medium" maxLines="1">{{ release.title }}</Text>
+          <Text variant="caption" tone="muted">{{ release.year }}</Text>
+        </View>
+      </For>
+    </Scroll>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">hidden</Text>
+    <Text variant="caption" tone="muted">hidden takes a View off the screen and keeps what's inside alive. Scroll this row, type a name, then hide and show them: both stay as you left them. An If removes what's inside, so use it when the content should start afresh, or isn't needed until it shows.</Text>
+    <View hidden="{{ shelfHidden }}" variant="card" gap="medium">
+      <Scroll gap="small">
+        <For each="{{ releases }}" item="release" key="id">
+          <Chip label="{{ release.title }}" />
+        </For>
+      </Scroll>
+      <Input label="Your name" placeholder="Mariama Kamara" />
+    </View>
+    <Button variant="secondary" onClick="toggleShelf">{{ shelfHidden ? 'Show' : 'Hide' }}</Button>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">disabled</Text>
+    <Text variant="caption" tone="muted">disabled dims a View, and nothing in it takes a tap, such as a form that's waiting on something else. Screen readers skip it, so say why outside it, as here.</Text>
+    <Text>The waiting list opens on Friday.</Text>
+    <View disabled="{{ cardLocked }}" variant="card" gap="medium">
+      <Input label="Your phone number" placeholder="+23276123456" />
+      <Button>Join the waiting list</Button>
+    </View>
+    <Button variant="secondary" onClick="toggleCard">{{ cardLocked ? 'Open it' : 'Lock it' }}</Button>
+  </View>
+
   <View gap="small">
     <Text variant="subtitle">Grid</Text>
-    <Text variant="caption" tone="muted">A Grid keeps its columns the same width. A GridItem shows an icon or a picture, with a label.</Text>
+    <Text variant="caption" tone="muted">A Grid keeps its columns the same width, 4 unless columns says. A GridItem shows an icon or a picture, with a label and an optional badge. A disabled GridItem can't be tapped.</Text>
     <View variant="card" gap="medium">
       <Grid columns="4" gap="small">
         <GridItem icon="microphone" label="Artists" data-name="Artists" onTap="openSection" />
@@ -122,7 +160,7 @@
         <GridItem icon="star" label="Charts" badge="New" data-name="Charts" onTap="openSection" />
         <GridItem icon="calendar" label="Shows" data-name="Shows" onTap="openSection" />
         <GridItem icon="ticket" label="Tickets" data-name="Tickets" onTap="openSection" />
-        <GridItem icon="headphones" label="Library" data-name="Library" onTap="openSection" />
+        <GridItem icon="headphones" label="Library" disabled onTap="openSection" />
         <GridItem image="statics/logo.png" label="Salone" data-name="Salone" onTap="openSection" />
       </Grid>
       <If condition="{{ section }}">

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

@@ -1,14 +1,15 @@
 <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>
+  <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 with onTap 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>
+    <Text variant="caption" tone="muted">Tap an artist. The row's data-id tells the page which one. A disabled row dims and can't be tapped.</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>
+      <ListItem icon="lock" title="Members only" subtitle="Coming soon" disabled onTap="choose" />
     </List>
     <If condition="{{ chosen }}">
       <Text>You chose {{ chosen }}</Text>
@@ -16,8 +17,8 @@
   </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>
+    <Text variant="subtitle">A picture and a badge</Text>
+    <Text variant="caption" tone="muted">A ListItem's children show at its end, in place of value. size="md" gives the rows more room and a bigger picture. Lists are size="sm" by default.</Text>
     <List size="md">
       <For each="{{ releases }}" item="release" key="id">
         <ListItem image="statics/logo.png" title="{{ release.title }}" subtitle="{{ release.artist }} · {{ release.year }}">
@@ -29,7 +30,7 @@
 
   <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>
+    <Text variant="caption" tone="muted">Comes as the last row nears the screen, so the page can add more. It comes again once there's a new last row. {{ 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 }}" />
@@ -52,7 +53,7 @@
 
   <View gap="small">
     <Text variant="subtitle">Disclosure</Text>
-    <Text variant="caption" tone="muted">A row that opens to show more, such as an answer. The person opens and closes it, and open sets how it starts.</Text>
+    <Text variant="caption" tone="muted">A row that opens to show more, such as an answer. The person opens and closes it, and open sets how it starts. onToggle sends event.detail.open each time. A disabled one stays as it is.</Text>
     <View variant="card" gap="none">
       <Disclosure title="Can I get a refund?" subtitle="Tickets and refunds" open>
         <Text>Yes, until the Friday before the show. After that, you can give your ticket to someone else.</Text>
@@ -62,6 +63,10 @@
         <Text>At 6 pm. The music starts at 7.</Text>
       </Disclosure>
       <Divider />
+      <Disclosure title="Backstage passes" subtitle="Coming soon" disabled>
+        <Text>Passes go on sale next month.</Text>
+      </Disclosure>
+      <Divider />
       <Disclosure title="Is there parking?">
         <Text>Yes, at the Lumley junction car park, a short walk away.</Text>
       </Disclosure>
@@ -70,7 +75,7 @@
 
   <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>
+    <Text variant="caption" tone="muted">Shows where a list has nothing yet. Its children, such as a button, show under its text.</Text>
     <View variant="card">
       <If condition="{{ saved.length > 0 }}">
         <For each="{{ saved }}" item="title" key="*this">

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

@@ -1,6 +1,6 @@
 import state from './state';
 
-// The code this page accepts; a real dot checks it with its server.
+// The code this page accepts. A real dot checks it with its server.
 const RIGHT_CODE = '123456';
 
 // In dollars, as the pledge field sends them.

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

@@ -4,7 +4,7 @@
 
   <View gap="small">
     <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>
+    <Text variant="caption" tone="muted">Formats the amount as you type. onChange sends a number in cents, the minor unit, so 150 is SLE 1.50. An empty field sends null.</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>
@@ -31,7 +31,7 @@
 
   <View gap="small">
     <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>
+    <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, with the code in event.detail.value.</Text>
     <If condition="{{ verified }}">
       <Notice tone="success" title="Code accepted">Your two tickets are confirmed.</Notice>
       <Button variant="secondary" onClick="startAgain">Start again</Button>

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

@@ -0,0 +1,10 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  // This page has its own tabs at the bottom, so it hides Dash's. Dash brings them back on leaving.
+  configs: { navigationBar: { title: 'Pinned bars' }, tabBar: { hidden: true } },
+  mutations: {
+    chooseTab: (_state, event: ValueEvent) => ({ tab: event.detail.value }),
+  },
+});

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

@@ -0,0 +1,25 @@
+export default {
+  tab: 'shows',
+  shows: [
+    { id: 'lumley', title: 'Lumley Beach Sundown', place: 'Lumley Beach, Freetown', day: 'Fri' },
+    { id: 'aberdeen', title: 'Aberdeen Live', place: 'Aberdeen, Freetown', day: 'Fri' },
+    { id: 'wilberforce', title: 'Hilltop Sessions', place: 'Wilberforce, Freetown', day: 'Sat' },
+    { id: 'bo', title: 'Bo Town Jam', place: 'Coronation Field, Bo', day: 'Sat' },
+    { id: 'kenema', title: 'Eastern Beats', place: 'Kenema', day: 'Sat' },
+    { id: 'makeni', title: 'Makeni Nights', place: 'Wusum Stadium, Makeni', day: 'Sun' },
+    { id: 'tokeh', title: 'Tokeh Sands', place: 'Tokeh Beach', day: 'Sun' },
+    { id: 'kono', title: 'Koidu Block Party', place: 'Koidu, Kono', day: 'Sun' },
+    { id: 'bonthe', title: 'Bonthe Island Drums', place: 'Bonthe, Sherbro Island', day: 'Sun' },
+    { id: 'monrovia', title: 'Mano River Night', place: 'Sinkor, Monrovia', day: 'Mon' },
+  ],
+  saved: [
+    { id: 'lumley', title: 'Lumley Beach Sundown', place: 'Lumley Beach, Freetown' },
+    { id: 'bo', title: 'Bo Town Jam', place: 'Coronation Field, Bo' },
+  ],
+  venues: [
+    { id: 'national', name: 'National Stadium', town: 'Freetown' },
+    { id: 'bintumani', name: 'Bintumani Hotel', town: 'Freetown' },
+    { id: 'coronation', name: 'Coronation Field', town: 'Bo' },
+    { id: 'wusum', name: 'Wusum Stadium', town: 'Makeni' },
+  ],
+};

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

@@ -0,0 +1,42 @@
+<View>
+  <Pinned edge="top" background="surface" border="subtle" paddingTop="medium" paddingBottom="medium">
+    <Text weight="bold">Salone gig guide</Text>
+  </Pinned>
+
+  <Text variant="title">Pinned bars</Text>
+  <Text>A Pinned keeps its children on an edge of the screen while the page scrolls. Scroll this page: the title above and the tabs below stay put. Put edge="top" first in the page's View, and edge="bottom" last. At the bottom, use a Pinned or a Footer, not both.</Text>
+  <Text variant="caption" tone="muted">The bar reaches past the page's padding to both sides of the screen, and its children line up with the page. background fills the bar, and border draws a line on the side facing the page.</Text>
+  <Text variant="caption" tone="muted">Tabs in a Pinned make the page's own navigation. variant="bar" shares the width equally, with each Tab's icon over its label and its badge on the icon. The page shows the content for the chosen tab, so the state of each tab stays. This page sets tabBar: { hidden: true } in its configs, so Dash's tabs don't show under its own.</Text>
+
+  <If condition="{{ tab === 'shows' }}">
+    <List>
+      <For each="{{ shows }}" item="show" key="id">
+        <ListItem icon="music" title="{{ show.title }}" subtitle="{{ show.place }}">
+          <Badge>{{ show.day }}</Badge>
+        </ListItem>
+      </For>
+    </List>
+  </If>
+  <ElseIf condition="{{ tab === 'saved' }}">
+    <List>
+      <For each="{{ saved }}" item="show" key="id">
+        <ListItem icon="heart" title="{{ show.title }}" subtitle="{{ show.place }}" />
+      </For>
+    </List>
+  </ElseIf>
+  <Else>
+    <List>
+      <For each="{{ venues }}" item="venue" key="id">
+        <ListItem icon="home" title="{{ venue.name }}" subtitle="{{ venue.town }}" />
+      </For>
+    </List>
+  </Else>
+
+  <Pinned edge="bottom" background="surface" border="subtle" paddingBottom="medium">
+    <Tabs variant="bar" value="{{ tab }}" onChange="chooseTab">
+      <Tab value="shows" label="Shows" icon="music" />
+      <Tab value="saved" label="Saved" icon="heart" badge="{{ saved.length }}" />
+      <Tab value="venues" label="Venues" icon="location" />
+    </Tabs>
+  </Pinned>
+</View>

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

@@ -1,5 +1,5 @@
-// 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.
+// An article's body in Markdown, as a news app would get it from its server. It's written as
+// joined lines so that the built code keeps it on one line.
 const body = [
   "## What's on sale",
   '',

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

@@ -7,7 +7,7 @@ export default definePage({
     openRelease: (state, event: DataEvent<{ id: string }>) => ({
       selected: state.releases.find((release) => release.id === event.data.id) ?? null,
     }),
-    // A sheet doesn't close itself: the page sets `open` back to false.
+    // A Sheet doesn't close itself. The page sets open back to false.
     closeRelease: () => ({ selected: null }),
     openRating: () => ({ rating: true }),
     closeRating: () => ({ rating: false }),

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

@@ -14,7 +14,7 @@
 
   <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>
+    <Text variant="caption" tone="muted">Any component can go in a sheet. This one has no close icon, and padding="large" gives it more room.</Text>
     <View variant="card" direction="row" align="center" gap="small">
       <View grow>
         <Text>{{ saved ? 'You gave ' + saved + ' stars' : 'Not rated yet' }}</Text>

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

@@ -1,10 +1,10 @@
 <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>
+  <Text>A View can set its colour, outline, corners and size. Its colours 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>
+    <Text variant="caption" tone="muted">On a primary background, give text 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>
@@ -39,8 +39,8 @@
   </View>
 
   <View gap="small">
-    <Text variant="subtitle">Theme colours</Text>
-    <Text variant="caption" tone="muted">The theme in dot.ts can set primary, background, surface, text, muted, border and subtle, for light and dark, and a page can set its own with configs.colors. Left out, they're Dash's, or worked out from a new background. The theme can also name its own colours, such as gold and ink here, to use as a background or a text tone.</Text>
+    <Text variant="subtitle">The dot's own colours</Text>
+    <Text variant="caption" tone="muted">The theme in dot.ts can name its own colours, such as gold and ink here. Use them as a background or a text tone. The Theme page has the rest of the theme.</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>
@@ -63,6 +63,41 @@
     </View>
   </View>
 
+  <View gap="small">
+    <Text variant="subtitle">elevation</Text>
+    <Text variant="caption" tone="muted">A shadow lifts a box off the page. low suits a card, and high something that floats over others.</Text>
+    <View direction="row" gap="large" padding="medium">
+      <View grow variant="card" elevation="low" border="none" align="center">
+        <Text>low</Text>
+      </View>
+      <View grow variant="card" elevation="high" border="none" align="center">
+        <Text>high</Text>
+      </View>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Buttons</Text>
+    <Text variant="caption" tone="muted">variant is primary, secondary, outline or ghost. tone colours a button, such as danger for one that deletes. size is small, medium or large.</Text>
+    <View direction="row" gap="small" wrap>
+      <Button>Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="ghost">Ghost</Button>
+    </View>
+    <View direction="row" gap="small" wrap>
+      <Button tone="danger">Delete</Button>
+      <Button variant="secondary" tone="success">Mark paid</Button>
+      <Button variant="outline" tone="warning">Remind me</Button>
+      <Button variant="ghost" tone="danger">Cancel</Button>
+    </View>
+    <View direction="row" gap="small" align="center" wrap>
+      <Button size="small" variant="secondary">Small</Button>
+      <Button size="medium" variant="secondary">Medium</Button>
+      <Button size="large" variant="secondary">Large</Button>
+    </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>

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

@@ -40,7 +40,6 @@ const releases: Release[] = [
   release('nack', 'Nack', 'The Therapist', 2022, 'song', 'Afropop'),
   release('hannah', 'Hannah', 'Donii Major', 2021, 'song', 'R&B'),
   release('shukubly', 'Shukubly', 'Drizilik', 2018, 'album', 'Kriofusion'),
-  release('en-yay-sah', 'En Yay Sah', 'Janka Nabay and the Bubu Gang', 2012, 'album', 'Bubu'),
   release('red-album', 'Red Album', 'LAJ', 2013, 'album', 'Hip hop'),
   release(
     'ghetto-struggle',
@@ -50,6 +49,7 @@ const releases: Release[] = [
     'song',
     'Hip hop',
   ),
+  release('en-yay-sah', 'En Yay Sah', 'Janka Nabay and the Bubu Gang', 2012, 'album', 'Bubu'),
   release('borbor-bele', 'Borbor Bele', 'Emmerson', 2004, 'album', 'Afropop'),
   release('corruption', 'Corruption', 'Daddy Saj', 2003, 'album', 'Hip hop'),
   release('cry-africa', 'Cry Africa', 'Vicky Fornah', 1999, 'song', 'Gospel'),
@@ -60,7 +60,7 @@ const releases: Release[] = [
 
 export default {
   releases,
-  // The releases the tab and the chosen genre leave.
+  // The releases left after the tab, the genre and the search filter them.
   shown: releases,
   tab: 'all',
   albums: releases.filter((item) => item.kind === 'album').length,

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

@@ -1,14 +1,14 @@
 <View>
   <Text variant="title">Tabs and chips</Text>
-  <Text>Tabs change what the page shows. Chips and a search narrow it down. Try Songs with Palm-wine: nothing matches.</Text>
+  <Text>Tabs change what the page shows. Chips and a search narrow it down. Try Songs with Palm-wine. Nothing matches, so an EmptyState shows.</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. An Input with type="search" and clearable makes a search box.</Text>
+    <Text variant="caption" tone="muted">Tabs sends onChange with the chosen tab's value in event.detail.value. A Tab's icon goes before its label, and its badge shows a count. A Chip is selected only when the page says so. An Input with type="search" and clearable makes a search box.</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 }}" />
+      <Tab value="album" label="Albums" icon="playlist" badge="{{ albums }}" />
+      <Tab value="song" label="Songs" icon="music" badge="{{ songs }}" />
     </Tabs>
     <Input type="search" placeholder="Search by title" clearable value="{{ query }}" onChange="search" />
     <View direction="row" gap="small" wrap>
@@ -43,10 +43,11 @@
 
   <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>
+    <Text variant="caption" tone="muted">For a few short choices. Shows at home and in the Mano River region. A disabled Tab can't be chosen. For a page's own navigation, variant="bar" is on the Pinned bars page.</Text>
     <Tabs variant="segmented" value="{{ where }}" onChange="chooseWhere">
       <Tab value="home" label="Sierra Leone" />
       <Tab value="abroad" label="Abroad" />
+      <Tab value="online" label="Online" disabled />
     </Tabs>
     <List>
       <For each="{{ where === 'home' ? home : abroad }}" item="show" key="id">

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

@@ -1,6 +1,6 @@
 <View>
   <Text variant="title">Text and links</Text>
-  <Text>Text shows words. Its variant sets the size, and the theme sets the font and colours.</Text>
+  <Text>Text shows words. Its variant sets the size and weight, and its tone sets the colour from the theme.</Text>
 
   <View gap="small">
     <Text variant="subtitle">variant</Text>
@@ -65,7 +65,7 @@
 
   <View gap="small">
     <Text variant="subtitle">leading and selectable</Text>
-    <Text variant="caption" tone="muted">leading moves the lines closer or further apart. selectable lets the person copy the text: hold your finger on the last one.</Text>
+    <Text variant="caption" tone="muted">leading moves the lines closer or further apart. selectable lets the person select and copy the text. Hold your finger on the last one.</Text>
     <View variant="card" gap="medium">
       <Text leading="tight">Tight lines. Palm-wine music grew in the bars of Freetown, played on guitar and sung in Krio.</Text>
       <Text leading="normal">Normal lines. Palm-wine music grew in the bars of Freetown, played on guitar and sung in Krio.</Text>
@@ -82,12 +82,12 @@
 
   <View gap="small">
     <Text variant="subtitle">Link</Text>
-    <Text variant="caption" tone="muted">With href, a link opens a web page in the phone's browser. With onTap, it runs a handler.</Text>
+    <Text variant="caption" tone="muted">With an https href, a Link opens the web page in the phone's browser. Without one, onTap runs a handler. A disabled Link does neither.</Text>
     <View variant="card" gap="small">
       <Text>Read about <Link href="https://en.wikipedia.org/wiki/Music_of_Sierra_Leone">the music of Sierra Leone</Link>.</Text>
       <View direction="row" gap="medium">
         <Link onTap="like">Like the song</Link>
-        <Link tone="danger" onTap="unlike">Take it back</Link>
+        <Link tone="danger" onTap="unlike" disabled="{{ likes === 0 }}">Take it back</Link>
       </View>
       <Text tone="muted">{{ likes }} {{ likes === 1 ? 'like' : 'likes' }}</Text>
     </View>

package/dist/templates/showcase/pages/dash/account/controller.ts

@@ -9,6 +9,8 @@ export default definePage({
     setNonce: (_state, event: ValueEvent) => ({ nonce: event.detail.value }),
   },
   actions: {
+    // A nonce longer than 128 characters rejects with 'invalid'. If no one is signed in to Dash, or
+    // Dash can't reach Monime, it rejects with 'failed'.
     async signIn(state) {
       try {
         const { fullName, alias, accountIdToken } = await this.dash.account.signIn({
@@ -20,6 +22,7 @@ export default definePage({
         this.setState({ note: errorMessage(error) });
       }
     },
+    // Rejects with 'unsupported' until Dash has OpenID Connect.
     async signInWithOidc() {
       try {
         const { id } = await this.dash.account.signIn({ mode: 'oidc', scopes: ['profile'] });

package/dist/templates/showcase/pages/dash/account/view.dml

@@ -4,7 +4,7 @@
 
   <View gap="small">
     <Text variant="subtitle">signIn</Text>
-    <Text variant="caption" tone="muted">With mode "simple", Dash says who the person is: their full name, the phone number or email address they use Dash with, and a token Monime makes from this dot's id, their Monimeer id and the nonce, with a key only it knows. The same nonce gives the same token, on any phone. It names the person, but proves nothing to the dot's server.</Text>
+    <Text variant="caption" tone="muted">With mode "simple", Dash says who the person is: their full name, and the phone number or email address they use Dash with. It also gives a token that names them in this dot. Monime makes it from the dot's id, the person and the nonce, so the same nonce gives the same token on any phone. The token names the person, but proves nothing to the dot's server.</Text>
     <View variant="card" gap="medium">
       <Input label="Nonce" value="{{ nonce }}" onChange="setNonce" />
       <Button onClick="signIn">Sign in with Dash</Button>
@@ -20,7 +20,7 @@
 
   <View gap="small">
     <Text variant="subtitle">signIn with OpenID Connect</Text>
-    <Text variant="caption" tone="muted">With mode "oidc", Dash will give an ID token the dot's server checks with Monime's keys, and only the details the person agrees to share. It isn't ready yet, so Dash says so.</Text>
+    <Text variant="caption" tone="muted">With mode "oidc", Dash will give an ID token the dot's server checks with Monime's keys, and only the details the person agrees to share. It isn't ready yet, so the call fails with unsupported.</Text>
     <Button variant="secondary" onClick="signInWithOidc">Sign in with OpenID Connect</Button>
     <If condition="{{ oidcNote }}">
       <Notice tone="info">{{ oidcNote }}</Notice>