@mitcsutt/kiln-ui 0.2.0 → 0.2.2

package/skills/layout-composition/references/visually-hidden.md

@@ -8,10 +8,12 @@ Source: https://kiln.mitchellsutton.com/docs/ui/layout/visually-hidden
 
 `VisuallyHidden` keeps text in the accessibility tree while hiding it from view: the rest of a sentence a glyph implies, a heading the layout already makes obvious, a table caption.
 
+Screen readers announce the rating above as "4.2 out of 5, from 318 passenger reviews". `as` renders it as another element, such as a heading (`as="h2"`). `focusable` makes a hidden link appear when it receives focus, which is how a skip link works.
+
 ```tsx
 import { Inline, Text, VisuallyHidden } from '@mitcsutt/kiln-ui'
 
-export default function Usage() {
+export function Usage() {
   return (
     <Inline gap={2}>
       <Text numeric weight="strong">
@@ -26,15 +28,13 @@ export default function Usage() {
 }
 ```
 
-Screen readers announce the rating above as "4.2 out of 5, from 318 passenger reviews". `as` renders it as another element, such as a heading (`as="h2"`). `focusable` makes a hidden link appear when it receives focus, which is how a skip link works.
-
 ## API
 
 `VisuallyHiddenProps`:
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `focusable` | `boolean` |  | Reveal the content while it (or something inside it) has keyboard focus — for skip links and other keyboard-only affordances. |
+| `focusable` | `boolean` | `false` | Reveal the content while it (or something inside it) has keyboard focus — for skip links and other keyboard-only affordances. |
 | `as` | `'div' \| 'span' \| 'label' \| 'a' \| 'h1' \| 'h2' \| 'h3'` | `span` | Default `span`. |
 | `href` | `string` |  | Only for `as="a"`. |
 

package/skills/setup-and-theming/SKILL.md

@@ -70,7 +70,7 @@ Screens are built from layout primitives and typed props, never utility classes
 ```tsx
 import { Button, Container, Heading, Inline, Section, Stack, Text } from '@mitcsutt/kiln-ui'
 
-export default function FirstScreen() {
+export function Usage() {
   return (
     <Section space={7}>
       <Container width="text">