@awenovations/aura 0.0.1

package/dist/button/button.svelte

@@ -0,0 +1,143 @@
+<script>import { createEventDispatcher } from "svelte";
+import ProgressRing from "../progress/progress-ring.svelte";
+export let kind = "filled";
+export let variant = "primary";
+export let size = "default";
+export let fullWidth = false;
+export let loading = false;
+const dispatch = createEventDispatcher();
+function onClick(event) {
+  dispatch("click", event);
+}
+</script>
+
+<button
+	{...$$restProps}
+	class:loading
+	class:isFilled={kind === 'filled'}
+	class:isOutlined={kind === 'outlined'}
+	class:isPrimary={variant === 'primary'}
+	class:isSecondary={variant === 'secondary'}
+	class:isTertiary={variant === 'tertiary'}
+	class:isDefaultSize={size === 'default'}
+	class:isSmall={size === 'small'}
+	class:fullWidth
+	on:click={onClick}
+	class={`aura-button ${$$restProps.class}`}
+>
+	<div class="content">
+		<slot name="icon-before" />
+		<slot>Aura Button</slot>
+		{#if loading}
+			<ProgressRing {variant} />
+		{/if}
+	</div>
+</button>
+
+<style>.aura-button {
+  --icon-color: var(--text-color);
+  flex-shrink: 0;
+  padding: var(--padding-vertical) var(--padding-horizontal);
+  font: var(--font-size);
+  cursor: pointer;
+  border-radius: var(--aura-button-border-radius);
+  outline: var(--border);
+  outline-offset: calc(var(--border-size) * -1px);
+  border: 0;
+  outline-color: var(--border-color);
+  background-color: var(--bg);
+  color: var(--text-color);
+}
+.aura-button.loading {
+  padding-right: 22px;
+}
+.aura-button.loading :global(.aura-progress-ring) {
+  width: 24px;
+  height: 24px;
+}
+.aura-button.loading.isSmall {
+  padding-right: 12px;
+}
+.aura-button.loading.isSmall :global(.aura-progress-ring) {
+  width: 14px;
+  height: 14px;
+}
+.aura-button.isFilled.isPrimary {
+  --bg: var(--aura-primary-30);
+  --bg-hover: var(--aura-primary-40);
+  --bg-active: var(--aura-primary-20);
+  --text-color: var(--aura-font-color);
+  --text-hover-opacity: 0.5;
+}
+.aura-button.isFilled.isSecondary {
+  --bg: var(--aura-secondary-30);
+  --bg-hover: var(--aura-secondary-40);
+  --bg-active: var(--aura-secondary-20);
+  --text-color: var(--aura-white-smoke);
+  --text-hover-opacity: 1;
+}
+.aura-button.isFilled.isTertiary {
+  --bg: var(--aura-tertiary-60);
+  --bg-hover: var(--aura-tertiary-70);
+  --bg-active: var(--aura-tertiary-30);
+  --text-color: var(--aura-white-smoke);
+  --text-hover-opacity: 1;
+}
+.aura-button.isOutlined {
+  --bg: none;
+  --bg-hover: none;
+  --bg-active: none;
+  --text-hover-opacity: 0.4;
+  --border-size: 1px;
+  --border: var(--border-size) solid;
+  --text-color: var(--aura-font-color);
+}
+.aura-button.isOutlined.isPrimary {
+  --border-color: var(--aura-primary-40);
+  --border-hover-color: var(--aura-primary-50);
+  --border-active-color: var(--aura-primary-20);
+}
+.aura-button.isOutlined.isSecondary {
+  --border-color: var(--aura-secondary-20);
+  --border-hover-color: var(--aura-secondary-30);
+  --border-active-color: var(--aura-secondary-10);
+}
+.aura-button.isOutlined.isTertiary {
+  --border-color: var(--aura-tertiary-60);
+  --border-hover-color: var(--aura-tertiary-70);
+  --border-active-color: var(--aura-tertiary-30);
+}
+.aura-button.isDefaultSize {
+  --gap: var(--aura-button-default-padding-vertical);
+  --padding-horizontal: var(--aura-button-default-padding-horizontal);
+  --padding-vertical: var(--aura-button-default-padding-vertical);
+  --font-size: var(--aura-button-default);
+}
+.aura-button.isSmall {
+  --gap: var(--aura-button-small-padding-vertical);
+  --padding-horizontal: var(--aura-button-small-padding-horizontal);
+  --padding-vertical: var(--aura-button-small-padding-vertical);
+  --font-size: var(--aura-button-small);
+}
+.aura-button.fullWidth {
+  width: 100%;
+}
+.aura-button.fullWidth .content {
+  justify-content: center;
+}
+.aura-button .content {
+  display: flex;
+  gap: var(--gap);
+  align-items: center;
+}
+.aura-button:hover {
+  background-color: var(--bg-hover);
+  outline-color: var(--border-hover-color);
+}
+.aura-button:active {
+  background-color: var(--bg-active);
+  outline-color: var(--border-active-color);
+}
+.aura-button:active .content {
+  opacity: var(--text-hover-opacity);
+}</style>

package/dist/button/button.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import type * as Props from './props';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        kind?: Props.ButtonKind;
+        variant?: any;
+        size?: any;
+        fullWidth?: boolean;
+        loading?: boolean;
+    };
+    events: {
+        click: CustomEvent<{}>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'icon-before': {};
+        default: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

package/dist/button/props.d.ts

@@ -0,0 +1,6 @@
+export declare const buttonKinds: readonly ["filled", "outlined"];
+export type ButtonKind = (typeof buttonKinds)[number];
+export declare const buttonVariants: readonly ["primary", "secondary", "tertiary"];
+export type ButtonVariants = (typeof buttonVariants)[number];
+export declare const buttonSizes: readonly ["default", "small"];
+export type ButtonSizes = (typeof buttonSizes)[number];

package/dist/button/props.js

@@ -0,0 +1,3 @@
+export const buttonKinds = ['filled', 'outlined'];
+export const buttonVariants = ['primary', 'secondary', 'tertiary'];
+export const buttonSizes = ['default', 'small'];

package/dist/container/container.stories.svelte

@@ -0,0 +1,52 @@
+<script context="module">import "../../app.scss";
+import Container from "./container.svelte";
+import { containerKinds, containerVariants } from "./props.ts";
+export const meta = {
+  title: "AURA/Container",
+  component: Container,
+  tags: ["autodocs"],
+  argTypes: {
+    kind: { control: "select", options: containerKinds },
+    variant: { control: "select", options: containerVariants }
+  }
+};
+</script>
+
+<script>import { Story, Template } from "@storybook/addon-svelte-csf";
+</script>
+
+<Template let:args>
+	<Container {...args}>Aura Container</Container>
+</Template>
+
+<Story
+	name="Filled Flat"
+	args={{
+		kind: 'filled',
+		variant: 'flat'
+	}}
+/>
+
+<Story
+	name="Filled Elevated"
+	args={{
+		kind: 'filled',
+		variant: 'elevated'
+	}}
+/>
+
+<Story
+	name="Outlined Flat"
+	args={{
+		kind: 'outlined',
+		variant: 'flat'
+	}}
+/>
+
+<Story
+	name="Outlined Elevated"
+	args={{
+		kind: 'outlined',
+		variant: 'elevated'
+	}}
+/>

package/dist/container/container.stories.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponent } from "svelte";
+import '../../app.scss';
+export declare const meta: {
+    title: string;
+    component: typeof Container;
+    tags: string[];
+    argTypes: {
+        kind: {
+            control: string;
+            options: readonly ["filled", "outlined"];
+        };
+        variant: {
+            control: string;
+            options: readonly ["flat", "elevated"];
+        };
+    };
+};
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ContainerProps = typeof __propDef.props;
+export type ContainerEvents = typeof __propDef.events;
+export type ContainerSlots = typeof __propDef.slots;
+export default class Container extends SvelteComponent<ContainerProps, ContainerEvents, ContainerSlots> {
+}
+export {};

package/dist/container/container.svelte

@@ -0,0 +1,35 @@
+<script>export let kind = "filled";
+export let variant = "flat";
+</script>
+
+<div
+	{...$$restProps}
+	class:isFilled={kind === 'filled'}
+	class:isOutlined={kind === 'outlined'}
+	class:isFlat={variant === 'flat'}
+	class:isElevated={variant === 'elevated'}
+	class={`aura-container ${$$restProps.class}`}
+>
+	<slot />
+</div>
+
+<style>.aura-container {
+  text-align: center;
+  border: 1px solid var(--aura-container-border-color);
+  border-radius: var(--aura-container-border-radius);
+  background-color: var(--bg);
+  box-shadow: var(--box-shadow);
+  padding: var(--aura-container-padding);
+}
+.aura-container.isFilled {
+  --bg: var(--aura-container-background);
+}
+.aura-container.isOutlined {
+  --bg: var(--aura-background);
+}
+.aura-container.isFlat {
+  --box-shadow: none;
+}
+.aura-container.isElevated {
+  --box-shadow: var(--aura-container-drop-shadow);
+}</style>

package/dist/container/container.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type * as Props from './props';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        kind?: Props.ContainerKind;
+        variant?: Props.ContainerVariants;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export type ContainerProps = typeof __propDef.props;
+export type ContainerEvents = typeof __propDef.events;
+export type ContainerSlots = typeof __propDef.slots;
+export default class Container extends SvelteComponent<ContainerProps, ContainerEvents, ContainerSlots> {
+}
+export {};

package/dist/container/props.d.ts

@@ -0,0 +1,4 @@
+export declare const containerKinds: readonly ["filled", "outlined"];
+export type ContainerKind = (typeof containerKinds)[number];
+export declare const containerVariants: readonly ["flat", "elevated"];
+export type ContainerVariants = (typeof containerVariants)[number];

package/dist/container/props.js

@@ -0,0 +1,2 @@
+export const containerKinds = ['filled', 'outlined'];
+export const containerVariants = ['flat', 'elevated'];

package/dist/directives/click-outside.d.ts

@@ -0,0 +1,6 @@
+type Handler = (e: MouseEvent) => void;
+export default function clickOutside(node: HTMLUnknownElement, handler: Handler): {
+    destroy(): void;
+    update(handler: Handler): void;
+};
+export {};

package/dist/directives/click-outside.js

@@ -0,0 +1,24 @@
+export default function clickOutside(node, handler) {
+    let lastHandler;
+    const attachHandler = (handler) => {
+        if (lastHandler)
+            document.removeEventListener('click', lastHandler);
+        lastHandler = (e) => {
+            const path = e.composedPath();
+            if (path.includes(node))
+                return;
+            if (handler)
+                handler(e);
+        };
+        document.addEventListener('click', lastHandler);
+    };
+    attachHandler(handler);
+    return {
+        destroy() {
+            document.removeEventListener('click', lastHandler);
+        },
+        update(handler) {
+            attachHandler(handler);
+        }
+    };
+}

package/dist/dropdown/dropdown.stories.svelte

@@ -0,0 +1,56 @@
+<script context="module">import "../../app.scss";
+import Dropdown from "./dropdown.svelte";
+import Button from "../button/button.svelte";
+export const meta = {
+  title: "AURA/Dropdown",
+  component: Dropdown,
+  tags: ["autodocs"],
+  argTypes: {}
+};
+</script>
+
+<script>import { Story, Template } from "@storybook/addon-svelte-csf";
+let valueForControlsStory = "Option 1";
+</script>
+
+<Template let:args>
+	<div style="height: 160px; max-width: 400px; margin: 0 auto;">
+		<Dropdown {...args}>
+			<aura-option value="Option 1">Option 1</aura-option>
+			<aura-option value="Option 2">Option 2</aura-option>
+			<aura-option>Option 3</aura-option>
+		</Dropdown>
+	</div>
+</Template>
+
+<Story height="500px" name="Default dropdown" />
+
+<Story name="Custom Placeholder">
+	<div style="height: 160px; max-width: 400px; margin: 0 auto;">
+		<Dropdown>
+			<span slot="placeholder">Custom placeholder...</span>
+			<aura-option value="Option 1">Option 1</aura-option>
+			<aura-option value="Option 2">Option 2</aura-option>
+			<aura-option>Option 3</aura-option>
+		</Dropdown>
+	</div>
+</Story>
+
+<Story name="External Value Controls">
+	<div style="height: 160px; max-width: 400px; margin: 0 auto;">
+		<div style="display: flex; gap: 10px;">
+			<Dropdown
+				style="flex: 1"
+				on:change={(evt) => {
+					valueForControlsStory = evt.detail.value;
+				}}
+				currentValue={valueForControlsStory}
+			>
+				<aura-option value="Option 1">Option 1</aura-option>
+				<aura-option value="Option 2">Option 2</aura-option>
+				<aura-option>Option 3</aura-option>
+			</Dropdown>
+			<Button size="small" on:click={() => (valueForControlsStory = undefined)}>Clear</Button>
+		</div>
+	</div>
+</Story>

package/dist/dropdown/dropdown.stories.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import '../../app.scss';
+export declare const meta: {
+    title: string;
+    component: typeof Dropdown;
+    tags: string[];
+    argTypes: {};
+};
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type DropdownProps = typeof __propDef.props;
+export type DropdownEvents = typeof __propDef.events;
+export type DropdownSlots = typeof __propDef.slots;
+export default class Dropdown extends SvelteComponent<DropdownProps, DropdownEvents, DropdownSlots> {
+}
+export {};

package/dist/dropdown/dropdown.svelte

@@ -0,0 +1,171 @@
+<script>import Icon from "../icon/icon.svelte";
+import Float from "../float/float.svelte";
+import { createEventDispatcher } from "svelte";
+import FormItem from "../form-item/form-item.svelte";
+import clickOutside from "../directives/click-outside";
+import { waitForElm } from "../utilities/wait-for-elm";
+const dispatch = createEventDispatcher();
+export let isOpen = false;
+export let isFocused = false;
+export let currentValue;
+let target;
+let menu;
+$: minWidth = isOpen !== void 0 && target?.getBoundingClientRect().width || 0;
+const onClick = () => {
+  isOpen = !isOpen;
+};
+const handleBlur = () => {
+  isOpen = false;
+  isFocused = false;
+};
+const handleFocus = () => {
+  isFocused = true;
+};
+$: menuItems = Array.from(
+  menu?.querySelector(".aura-menu slot")?.assignedElements()?.filter((element) => ["AURA-OPTION"].includes(element.tagName)) ?? menu?.querySelectorAll(".aura-menu > :is(aura-option)") ?? []
+);
+$: {
+  for (const menuItem of menuItems) {
+    menuItem.setAttribute("tabindex", "0");
+    if (menuItem.tagName === "AURA-OPTION") {
+      menuItem.setAttribute("role", "option");
+      if (currentValue === getValue(menuItem)) {
+        menuItem.setAttribute("aria-selected", "");
+      } else menuItem.removeAttribute("aria-selected");
+    }
+  }
+}
+const getValue = (e) => {
+  return e.getAttribute("value") ?? e["value"] ?? e.textContent;
+};
+const selectMenuItem = (e) => {
+  const item = menuItems.find((item2) => e.composedPath().includes(item2));
+  if (item.tagName === "AURA-OPTION") {
+    const value = getValue(item);
+    if (!$$props.currentValue) {
+      currentValue = value;
+    }
+    dispatch("change", {
+      value
+    });
+  }
+};
+const handleOpenOnArrowKeyPress = async (evt) => {
+  isOpen = true;
+  await waitForElm(".aura-menu");
+  handleSelectMenuKeyboardActions(evt);
+};
+const handleArrowDownKeyPress = (evt) => {
+  evt.preventDefault();
+  let nextOption = menu.querySelector("aura-option[aria-selected] + aura-option");
+  if (!nextOption) {
+    nextOption = menu.querySelector("aura-option:first-of-type");
+  }
+  nextOption.click();
+};
+const handleArrowUpKeyPress = (evt) => {
+  evt.preventDefault();
+  let nextOption = menu.querySelector("aura-option:has( + aura-option[aria-selected])");
+  if (!nextOption) {
+    nextOption = menu.querySelector("aura-option:last-of-type");
+  }
+  nextOption.click();
+};
+const handleSelectMenuKeyboardActions = async (evt) => {
+  if (evt.code === "Escape" || evt.code === "Tab") {
+    handleBlur();
+  } else if (!isOpen && (evt.code === "ArrowDown" || evt.code === "ArrowUp")) {
+    await handleOpenOnArrowKeyPress(evt);
+  } else if (evt.code === "ArrowDown") {
+    handleArrowDownKeyPress(evt);
+  } else if (evt.code === "ArrowUp") {
+    handleArrowUpKeyPress(evt);
+  }
+};
+const handleMenuOptionSelectEvent = (evt) => {
+  selectMenuItem(evt);
+  if (evt.pointerId !== -1) handleBlur();
+};
+</script>
+
+<div
+	{...$$restProps}
+	class={`aura-dropdown ${$$restProps.class}`}
+	bind:this={target}
+	tabindex="-1"
+	role="button"
+	use:clickOutside={(isOpen || isFocused) && handleBlur}
+	on:keydown|stopPropagation={handleSelectMenuKeyboardActions}
+	on:click|stopPropagation={onClick}
+>
+	<FormItem showFocusOutline={isOpen || isFocused}>
+		<button class="trigger" on:focus={handleFocus}>
+			{#if currentValue}
+				{currentValue}
+			{:else}
+				<slot name="placeholder">select...</slot>
+			{/if}
+			<Icon name="caret-down" size="small" />
+		</button>
+	</FormItem>
+	{#if isOpen}
+		<Float {target}>
+			<div
+				bind:this={menu}
+				role="menu"
+				tabindex="-1"
+				class="aura-menu"
+				style:--aura-menu-control-width={`${minWidth}px`}
+				on:keypress={handleSelectMenuKeyboardActions}
+				on:click|stopPropagation={handleMenuOptionSelectEvent}
+			>
+				<slot />
+			</div>
+		</Float>
+	{/if}
+</div>
+
+<style>.aura-dropdown button {
+  all: unset;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.aura-dropdown button :global(.icon) {
+  --icon-color: var(--aura-dropdown-open-icon-color);
+  margin-top: 2px;
+  margin-left: -5px;
+}
+
+.aura-menu {
+  border-radius: var(--aura-menu-border-radius);
+  box-shadow: var(--aura-menu-drop-shadow);
+  border: 1px solid var(--aura-menu-border-color);
+  background-color: var(--aura-menu-background-color);
+  min-height: 25px;
+  margin-top: var(--aura-menu-margin-top);
+  width: var(--aura-menu-control-width);
+  display: flex;
+  flex-direction: column;
+  padding: var(--aura-menu-padding);
+  box-sizing: border-box;
+  cursor: pointer;
+  gap: var(--aura-menu-padding);
+}
+.aura-menu :global(aura-option) {
+  width: 100%;
+  border-radius: var(--aura-dropdown-option-border-radius);
+  padding: var(--aura-dropdown-option-padding);
+  box-sizing: border-box;
+  user-select: none;
+  color: var(--aura-light-font-color);
+}
+.aura-menu :global(aura-option):hover {
+  background: var(--aura-dropdown-option-hover-background);
+}
+.aura-menu :global(aura-option:active),
+.aura-menu :global(aura-option[aria-selected]) {
+  background: var(--aura-dropdown-option-active-background);
+  color: var(--aura-dropdown-option-active-color);
+}</style>

package/dist/dropdown/dropdown.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        isOpen?: boolean;
+        isFocused?: boolean;
+        currentValue: string | undefined;
+    };
+    events: {
+        change: CustomEvent<{
+            value: string | undefined;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        placeholder: {};
+        default: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export type DropdownProps = typeof __propDef.props;
+export type DropdownEvents = typeof __propDef.events;
+export type DropdownSlots = typeof __propDef.slots;
+export default class Dropdown extends SvelteComponent<DropdownProps, DropdownEvents, DropdownSlots> {
+}
+export {};

package/dist/error-state/error-state.stories.svelte

@@ -0,0 +1,18 @@
+<script context="module">import "../../app.scss";
+import ErrorState from "./error-state.svelte";
+export const meta = {
+  title: "AURA/Error State",
+  component: ErrorState,
+  tags: ["autodocs"],
+  argTypes: {}
+};
+</script>
+
+<script>import { Story, Template } from "@storybook/addon-svelte-csf";
+</script>
+
+<Template>
+	<ErrorState>An unexpected error occurred, <u>try again?</u></ErrorState>
+</Template>
+
+<Story name="Default Error State" />