@axel669/zephyr 0.3.4-beta.0 → 0.3.8

package/src/index.mjs

@@ -1,53 +1,53 @@
-export { default as Button } from "./control/button.svelte"
-export { default as Input } from "./control/input.svelte"
-export { default as Link } from "./control/link.svelte"
-export { default as Radio } from "./control/radio.svelte"
-export { default as Select } from "./control/select.svelte"
-export { default as Tabs } from "./control/tabs.svelte"
-export { default as Toggle } from "./control/toggle.svelte"
-
-export { default as Avatar } from "./data-display/avatar.svelte"
-export { default as TheLastAirbender } from "./data-display/avatar.svelte"
-export { default as Badge } from "./data-display/badge.svelte"
-export { default as Chip } from "./data-display/chip.svelte"
-export { default as Details } from "./data-display/details.svelte"
-export { default as Popover } from "./data-display/popover.svelte"
-export { default as Progress } from "./data-display/progress.svelte"
-export { default as Table } from "./data-display/table.svelte"
-export { default as Tooltip } from "./data-display/tooltip.svelte"
-
-export { default as Icon } from "./info/icon.svelte"
-export { default as Notification } from "./info/notification.svelte"
-export { default as Titlebar } from "./info/titlebar.svelte"
-export { default as Toaster } from "./info/toaster.svelte"
-
-export { default as Dialog } from "./layout/dialog.svelte"
-export { default as Drawer } from "./layout/drawer.svelte"
-export { default as Flex } from "./layout/flex.svelte"
-export { default as Grid } from "./layout/grid.svelte"
-export { default as Modal } from "./layout/modal.svelte"
-export { default as Paper } from "./layout/paper.svelte"
-export { default as Screen } from "./layout/screen.svelte"
-
-export { default as Text } from "./text.svelte"
-
-export { default as CircleSpinner } from "./spinner/circle-spinner.svelte"
-export { default as HexagonSpinner } from "./spinner/hexagon-spinner.svelte"
-
-export { default as Alert } from "./dialogs/alert.svelte"
-export { default as Confirm } from "./dialogs/confirm.svelte"
-
-export { default as DataTable } from "./composed/data-table.svelte"
-export { default as TH } from "./composed/data-table/th.svelte"
-export { default as EntryButton } from "./composed/entry-button.svelte"
-export { default as Toast } from "./composed/toast.svelte"
-
-export { default as AsyncButton } from "./async/button.svelte"
-export { default as LoadZone } from "./async/load-zone.svelte"
-
-export { default as wsx } from "./wsx.mjs"
-
-export { hash } from "./hash.js"
-
-export * from "./handler$.mjs"
-export * from "./composed/table-functions.js"
+export { default as Button } from "./control/button.svelte"
+export { default as Input } from "./control/input.svelte"
+export { default as Link } from "./control/link.svelte"
+export { default as Radio } from "./control/radio.svelte"
+export { default as Select } from "./control/select.svelte"
+export { default as Tabs } from "./control/tabs.svelte"
+export { default as Toggle } from "./control/toggle.svelte"
+
+export { default as Avatar } from "./data-display/avatar.svelte"
+export { default as TheLastAirbender } from "./data-display/avatar.svelte"
+export { default as Badge } from "./data-display/badge.svelte"
+export { default as Chip } from "./data-display/chip.svelte"
+export { default as Details } from "./data-display/details.svelte"
+export { default as Popover } from "./data-display/popover.svelte"
+export { default as Progress } from "./data-display/progress.svelte"
+export { default as Table } from "./data-display/table.svelte"
+export { default as Tooltip } from "./data-display/tooltip.svelte"
+
+export { default as Icon } from "./info/icon.svelte"
+export { default as Notification } from "./info/notification.svelte"
+export { default as Titlebar } from "./info/titlebar.svelte"
+export { default as Toaster } from "./info/toaster.svelte"
+
+export { default as Dialog } from "./layout/dialog.svelte"
+export { default as Drawer } from "./layout/drawer.svelte"
+export { default as Flex } from "./layout/flex.svelte"
+export { default as Grid } from "./layout/grid.svelte"
+export { default as Modal } from "./layout/modal.svelte"
+export { default as Paper } from "./layout/paper.svelte"
+export { default as Screen } from "./layout/screen.svelte"
+
+export { default as Text } from "./text.svelte"
+
+export { default as CircleSpinner } from "./spinner/circle-spinner.svelte"
+export { default as HexagonSpinner } from "./spinner/hexagon-spinner.svelte"
+
+export { default as Alert } from "./dialogs/alert.svelte"
+export { default as Confirm } from "./dialogs/confirm.svelte"
+
+export { default as DataTable } from "./composed/data-table.svelte"
+export { default as TH } from "./composed/data-table/th.svelte"
+export { default as EntryButton } from "./composed/entry-button.svelte"
+export { default as Toast } from "./composed/toast.svelte"
+
+export { default as AsyncButton } from "./async/button.svelte"
+export { default as LoadZone } from "./async/load-zone.svelte"
+
+export { default as wsx } from "./wsx.mjs"
+
+export { hash } from "./hash.js"
+
+export * from "./handler$.mjs"
+export * from "./composed/table-functions.js"

package/src/info/icon.md

@@ -1,21 +1,21 @@
-# Icon
-
-Displays a [Tabler Icon](https://tabler-icons.io/) and some optional text.
-The icon will appear at the beginning of the text.
-
-## Props
-
-### name
-`string`
-
-The name of the icon. Use the tabler icon class name without the "ti-".
-
-## Example
-```svelte
-<script>
-    import { Icon } from "@axel669/zephyr"
-</script>
-
-<Icon name="hexagon" />
-<Icon name="hexagons">Are the bestagons</Icon>
-```
+# Icon
+
+Displays a [Tabler Icon](https://tabler-icons.io/) and some optional text.
+The icon will appear at the beginning of the text.
+
+## Props
+
+### name
+`string`
+
+The name of the icon. Use the tabler icon class name without the "ti-".
+
+## Example
+```svelte
+<script>
+    import { Icon } from "@axel669/zephyr"
+</script>
+
+<Icon name="hexagon" />
+<Icon name="hexagons">Are the bestagons</Icon>
+```

package/src/info/icon.svelte

@@ -1,9 +1,9 @@
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let name
-</script>
-
-<ws-icon class="ti-{name}" use:wsx={$$restProps}>
-    <slot />
-</ws-icon>
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let name
+</script>
+
+<ws-icon class="bi-{name}" use:wsx={$$restProps}>
+    <slot />
+</ws-icon>

package/src/info/notification.md

@@ -1,36 +1,36 @@
-# Notification
-
-Displays a piece of content that stands out from the surrounding content and
-can also be used for toast messages. Optionally has some interactable
-elements embedded.
-
-Expects 1-2 child nodes and will display them on the sides of the
-notification with space between them. This means that reversing the order
-of the child nodes will flip which sides they appear on.
-
-## Props
-
-### color
-Sets `$color` and uses the fill style for coloration.
-
-## Example
-```svelte
-<script>
-    import { Notification, Button, Icon } from "@axel669/zephyr"
-</script>
-
-<Notification>
-    <Icon name="info-hexagon">
-        Some kind of information
-    </Icon>
-</Notification>
-<Notification color="danger">
-    <Icon name="alert-hexagon">
-        Something broke
-    </Icon>
-
-    <Button>
-        Cancel
-    </Button>
-</Notification>
-```
+# Notification
+
+Displays a piece of content that stands out from the surrounding content and
+can also be used for toast messages. Optionally has some interactable
+elements embedded.
+
+Expects 1-2 child nodes and will display them on the sides of the
+notification with space between them. This means that reversing the order
+of the child nodes will flip which sides they appear on.
+
+## Props
+
+### color
+Sets `$color` and uses the fill style for coloration.
+
+## Example
+```svelte
+<script>
+    import { Notification, Button, Icon } from "@axel669/zephyr"
+</script>
+
+<Notification>
+    <Icon name="info-hexagon">
+        Some kind of information
+    </Icon>
+</Notification>
+<Notification color="danger">
+    <Icon name="alert-hexagon">
+        Something broke
+    </Icon>
+
+    <Button>
+        Cancel
+    </Button>
+</Notification>
+```

package/src/info/notification.svelte

@@ -1,16 +1,16 @@
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let color = false
-
-    $: wind = {
-        "$color": color,
-        ...$$restProps,
-    }
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-interactive-supports-focus -->
-<ws-notification use:wsx={wind} on:click role="button">
-    <slot />
-</ws-notification>
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let color = false
+
+    $: wind = {
+        "$color": color,
+        ...$$restProps,
+    }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-interactive-supports-focus -->
+<ws-notification use:wsx={wind} on:click role="button">
+    <slot />
+</ws-notification>

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>