@axel669/zephyr 0.2.0-beta.3 → 0.3.6

package/src/info/titlebar.md

@@ -1,75 +1,75 @@
-# Titlebar
-
-The titlebar is used to set section titles with some style, and provides
-slots for buttons on either side of the title text. Works well as a header
-for Paper components.
-
-## Props
-
-### color
-`string`
-
-Sets `$color`
-
-### fill
-`bool`
-
-Sets `$fill`
-
-## Slots
-
-### title
-The center of the titlebar, where the text usually goes. Elements can be nested
-in different ways within a parent element for different visual effects in this
-slot.
-
-### menu
-The area on the left of the titlebar (where drawer menus tend to open)
-
-### action
-The area on the right of the titlebar
-
-## Example
-```svelte
-<script>
-    import { Titlebar, Button, Paper, Text } from "@axel669/zephyr"
-</script>
-
-<Titlebar color="primary" fill>
-    <Text title slot="title">
-        Some Title
-    </Text>
-
-    <Button slot="menu">
-        <Icon name="menu" />
-    </Button>
-</Titlebar>
-
-<Paper>
-    <Titlebar color="secondary" slot="header">
-        <Text title slot="title">
-            Paper Title
-            <Text subtitle>
-                Indented Subtitle
-            </Text>
-        </Text>
-    </Titlebar>
-</Paper>
-
-<Paper>
-    <Titlebar color="secondary" slot="header">
-        <Flex p="0px" slot="title">
-            <Text title>
-                Paper Title
-            </Text>
-            <Text subtitle>
-                Aligned Subtitle
-            </Text>
-        </Flex>
-
-        <Button slot="action">
-            <Icon name="menu" />
-        </Button>
-    </Titlebar>
-</Paper>
-```
+# Titlebar
+
+The titlebar is used to set section titles with some style, and provides
+slots for buttons on either side of the title text. Works well as a header
+for Paper components.
+
+## Props
+
+### color
+`string`
+
+Sets `$color`
+
+### fill
+`bool`
+
+Sets `$fill`
+
+## Slots
+
+### title
+The center of the titlebar, where the text usually goes. Elements can be nested
+in different ways within a parent element for different visual effects in this
+slot.
+
+### menu
+The area on the left of the titlebar (where drawer menus tend to open)
+
+### action
+The area on the right of the titlebar
+
+## Example
+```svelte
+<script>
+    import { Titlebar, Button, Paper, Text } from "@axel669/zephyr"
+</script>
+
+<Titlebar color="primary" fill>
+    <Text title slot="title">
+        Some Title
+    </Text>
+
+    <Button slot="menu">
+        <Icon name="menu" />
+    </Button>
+</Titlebar>
+
+<Paper>
+    <Titlebar color="secondary" slot="header">
+        <Text title slot="title">
+            Paper Title
+            <Text subtitle>
+                Indented Subtitle
+            </Text>
+        </Text>
+    </Titlebar>
+</Paper>
+
+<Paper>
+    <Titlebar color="secondary" slot="header">
+        <Flex p="0px" slot="title">
+            <Text title>
+                Paper Title
+            </Text>
+            <Text subtitle>
+                Aligned Subtitle
+            </Text>
+        </Flex>
+
+        <Button slot="action">
+            <Icon name="menu" />
+        </Button>
+    </Titlebar>
+</Paper>
+```

package/src/info/titlebar.svelte

@@ -1,18 +1,18 @@
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let color
-    export let fill = false
-
-    $: wind = {
-        "$color": color,
-        "$fill": fill,
-        ...$$restProps
-    }
-</script>
-
-<ws-titlebar use:wsx={wind}>
-    <slot name="menu" />
-    <slot name="title" />
-    <slot name="action" />
-</ws-titlebar>
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let color
+    export let fill = false
+
+    $: wind = {
+        "$color": color,
+        "$fill": fill,
+        ...$$restProps
+    }
+</script>
+
+<ws-titlebar use:wsx={wind}>
+    <slot name="menu" />
+    <slot name="title" />
+    <slot name="action" />
+</ws-titlebar>

package/src/info/toaster.md

@@ -1,26 +1,26 @@
-# Toaster
-
-The Toaster component is used for building popup notifications along the
-edges of the window.
-
-## Props
-
-### position
-Sets position of the toaster. See the
-[windstorm base](https://windstorm.axel669.net/lib/css/component/toaster)
-for values.
-
-## Example
-```svelte
-<script>
-    import { Toaster, Notification, Icon } from "@axel669/zephyr"
-</script>
-
-<Toaster position="$tc">
-    <Notification>
-        <Icon name="info">
-            Some kind of notification of things
-        </Icon>
-    </Notification>
-</Toaster>
-```
+# Toaster
+
+The Toaster component is used for building popup notifications along the
+edges of the window.
+
+## Props
+
+### position
+Sets position of the toaster. See the
+[windstorm base](https://windstorm.axel669.net/lib/css/component/toaster)
+for values.
+
+## Example
+```svelte
+<script>
+    import { Toaster, Notification, Icon } from "@axel669/zephyr"
+</script>
+
+<Toaster position="$tc">
+    <Notification>
+        <Icon name="info">
+            Some kind of notification of things
+        </Icon>
+    </Notification>
+</Toaster>
+```

package/src/info/toaster.svelte

@@ -1,14 +1,14 @@
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let position = "tc"
-
-    $: wind = {
-        [`$${position}`]: true,
-        ...$$restProps,
-    }
-</script>
-
-<ws-toaster use:wsx={wind}>
-    <slot />
-</ws-toaster>
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let position = "tc"
+
+    $: wind = {
+        [`$${position}`]: true,
+        ...$$restProps,
+    }
+</script>
+
+<ws-toaster use:wsx={wind}>
+    <slot />
+</ws-toaster>

package/src/inline-dialog.svelte

@@ -1,23 +1,23 @@
-<script>
-    import wsx from "../wsx.mjs"
-
-    import Paper from "./paper.svelte"
-
-    const id = Math.random().toString(16)
-
-    $: paper = {
-        "@dialog": true,
-        "$outline": true,
-        ...$$restProps
-    }
-</script>
-
-<slot name="toggle" {id} />
-<input type="checkbox" ws-x="hide" {id} />
-<ws-modal>
-    <ws-paper use:wsx={paper}>
-        <slot name="header" {id} />
-        <slot name="content" {id} />
-        <slot name="footer" {id} />
-    </ws-paper>
-</ws-modal>
+<script>
+    import wsx from "../wsx.mjs"
+
+    import Paper from "./paper.svelte"
+
+    const id = Math.random().toString(16)
+
+    $: paper = {
+        "@dialog": true,
+        "$outline": true,
+        ...$$restProps
+    }
+</script>
+
+<slot name="toggle" {id} />
+<input type="checkbox" ws-x="hide" {id} />
+<ws-modal>
+    <ws-paper use:wsx={paper}>
+        <slot name="header" {id} />
+        <slot name="content" {id} />
+        <slot name="footer" {id} />
+    </ws-paper>
+</ws-modal>

package/src/layout/dialog.md

@@ -1,43 +1,43 @@
-# Dialog
-
-A modal container for creating dialogs. The Dialog component is a modal
-element that uses a Paper element for the layout of content. All props and
-slots for the Dialog are passed to the underlying Paper component.
-
-The Dialog component is used as a wrapper for content and is used in
-conjunction with the Modal component to be controlled on screen.
-
-## Props
-This component just wraps a [Paper](./paper.md) component with some extra parts,
-and passes the props to a `Paper`.
-
-## Example
-`cool-dialog.svelte`
-```svelte
-<script>
-    import { Dialog, Titlebar, Text } from "@axel669/zephyr"
-</script>
-
-<Dialog>
-    <Titlebar slot="header">
-        <Text slot="title" title>
-            Some Title
-        </Text>
-    </Titlebar>
-
-    <span>Content</span>
-</Dialog>
-```
-
-`app.svelte`
-```svelte
-<script>
-    import { Modal, EntryButton } from "@axel669/zephyr"
-    import CoolDialog from "./cool-dialog.svelte"
-</script>
-
-<Modal component={CoolDialog} />
-<EntryButton this={Modal} component={CoolDialog}>
-    Open Cool Dialog
-</EntryButton>
-```
+# Dialog
+
+A modal container for creating dialogs. The Dialog component is a modal
+element that uses a Paper element for the layout of content. All props and
+slots for the Dialog are passed to the underlying Paper component.
+
+The Dialog component is used as a wrapper for content and is used in
+conjunction with the Modal component to be controlled on screen.
+
+## Props
+This component just wraps a [Paper](./paper.md) component with some extra parts,
+and passes the props to a `Paper`.
+
+## Example
+`cool-dialog.svelte`
+```svelte
+<script>
+    import { Dialog, Titlebar, Text } from "@axel669/zephyr"
+</script>
+
+<Dialog>
+    <Titlebar slot="header">
+        <Text slot="title" title>
+            Some Title
+        </Text>
+    </Titlebar>
+
+    <span>Content</span>
+</Dialog>
+```
+
+`app.svelte`
+```svelte
+<script>
+    import { Modal, EntryButton } from "@axel669/zephyr"
+    import CoolDialog from "./cool-dialog.svelte"
+</script>
+
+<Modal component={CoolDialog} />
+<EntryButton this={Modal} component={CoolDialog}>
+    Open Cool Dialog
+</EntryButton>
+```

package/src/layout/dialog.svelte

@@ -1,26 +1,26 @@
-<svelte:options immutable />
-
-<script>
-    import { fade } from "svelte/transition"
-
-    import wsx from "../wsx.mjs"
-
-    import Paper from "./paper.svelte"
-
-    const trick = (node, options) => ({
-        delay: 0,
-        duration: 250,
-        css: () => "",
-    })
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<wind-wrapper transition:trick ws-x="$dialog grid" on:click|stopPropagation
-role="dialog">
-    <Paper {...$$props}>
-        <slot name="header" slot="header" />
-        <slot />
-        <slot name="footer" slot="footer" />
-    </Paper>
-</wind-wrapper>
+<svelte:options immutable />
+
+<script>
+    import { fade } from "svelte/transition"
+
+    import wsx from "../wsx.mjs"
+
+    import Paper from "./paper.svelte"
+
+    const trick = (node, options) => ({
+        delay: 0,
+        duration: 250,
+        css: () => "",
+    })
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<wind-wrapper transition:trick ws-x="@dialog [grid]" on:click|stopPropagation
+role="dialog">
+    <Paper {...$$props}>
+        <slot name="header" slot="header" />
+        <slot />
+        <slot name="footer" slot="footer" />
+    </Paper>
+</wind-wrapper>

package/src/layout/drawer.md

@@ -1,70 +1,70 @@
-# Drawer
-
-A modal container for creating dialogs. The Dialog component is a modal
-element that uses a Paper element for the layout of content. All extra props
-and slots for the Drawer are passed to the underlying Paper component.
-
-The Drawer component is used as a wrapper for content and is used in
-conjunction with the Modal component to be controlled on screen.
-
-## Props
-
-### close
-`function`
-
-If passed, this function will be called when the user clicks in the
-empty area outside of the drawer contents.
-
-### height
-`string`
-
-Sets the height of the select drawer, no effect for menu and action
-drawers which default to full height of the window.
-
-### type
-`string`
-
-The type of drawer. Default is "menu"
-#### "menu"
-
-Makes a drawer that slides in on the left side of the screen
-
-#### "action"
-
-Makes a drawer that slides in on the right side of the screen
-
-#### "select"
-
-Makes a drawer that is centered horizontally and slides in from
-the top of the screen
-
-## Example
-`cool-drawer.svelte`
-```svelte
-<script>
-    import { Drawer, Titlebar, Text } from "@axel669/zephyr"
-</script>
-
-<Drawer>
-    <Titlebar slot="header">
-        <Text slot="title" title>
-            Some Title
-        </Text>
-    </Titlebar>
-
-    <span>Content</span>
-</Drawer>
-```
-
-`app.svelte`
-```svelte
-<script>
-    import { Modal, EntryButton } from "@axel669/zephyr"
-    import CoolDrawer from "./cool-drawer.svelte"
-</script>
-
-<Modal component={CoolDrawer} />
-<EntryButton this={Modal} component={CoolDrawer}>
-    Open Cool Dialog
-</EntryButton>
-```
+# Drawer
+
+A modal container for creating dialogs. The Dialog component is a modal
+element that uses a Paper element for the layout of content. All extra props
+and slots for the Drawer are passed to the underlying Paper component.
+
+The Drawer component is used as a wrapper for content and is used in
+conjunction with the Modal component to be controlled on screen.
+
+## Props
+
+### close
+`function`
+
+If passed, this function will be called when the user clicks in the
+empty area outside of the drawer contents.
+
+### height
+`string`
+
+Sets the height of the select drawer, no effect for menu and action
+drawers which default to full height of the window.
+
+### type
+`string`
+
+The type of drawer. Default is "menu"
+#### "menu"
+
+Makes a drawer that slides in on the left side of the screen
+
+#### "action"
+
+Makes a drawer that slides in on the right side of the screen
+
+#### "select"
+
+Makes a drawer that is centered horizontally and slides in from
+the top of the screen
+
+## Example
+`cool-drawer.svelte`
+```svelte
+<script>
+    import { Drawer, Titlebar, Text } from "@axel669/zephyr"
+</script>
+
+<Drawer>
+    <Titlebar slot="header">
+        <Text slot="title" title>
+            Some Title
+        </Text>
+    </Titlebar>
+
+    <span>Content</span>
+</Drawer>
+```
+
+`app.svelte`
+```svelte
+<script>
+    import { Modal, EntryButton } from "@axel669/zephyr"
+    import CoolDrawer from "./cool-drawer.svelte"
+</script>
+
+<Modal component={CoolDrawer} />
+<EntryButton this={Modal} component={CoolDrawer}>
+    Open Cool Dialog
+</EntryButton>
+```