@returnless/focus-ui 0.0.2 → 0.0.4

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/style.css

@@ -0,0 +1 @@
+._visuallyHidden_o6qmb_6{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;border:0!important;white-space:nowrap!important}.spinner[data-v-07df7777]{display:inline-flex;animation:spinner-07df7777 .75s linear infinite}path[data-v-07df7777]{fill-opacity:0}.head[data-v-07df7777]{stroke:#000}@keyframes spinner-07df7777{0%{transform:rotate(0)}to{transform:rotate(1turn)}}input[type=number][data-v-7be10f19]::-webkit-inner-spin-button,input[type=number][data-v-7be10f19]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@returnless/focus-ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "license": "MIT",
+  "type": "module",
   "scripts": {
-    "build": "rimraf dist && vue-tsc && vite build",
+    "build": "rimraf dist && vite build && vue-tsc --emitDeclarationOnly",
     "docs:dev": "npm run docs:generate-component-list && npm run docs:generate-component-meta && vitepress dev docs",
     "docs:generate-component-list": "npx tsx ./src/build-utils/update-component-list.ts",
     "docs:generate-component-meta": "npx tsx ./src/build-utils/generate-component-meta.ts",
@@ -40,12 +41,13 @@
     "src",
     "dist"
   ],
-  "module": "./dist/focus-ui.es.js",
+  "module": "./dist/focus-ui.js",
   "exports": {
     ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/focus-ui.es.js"
-    }
+      "import": "./dist/focus-ui.js",
+      "require": "./dist/focus-ui.umd.cjs"
+    },
+    "./style.css": "./dist/style.css"
   },
   "repository": {
     "type": "git",

package/src/build-utils/generate-component-meta.ts

@@ -1,9 +1,13 @@
 import fs, { existsSync, mkdirSync } from 'fs';
-import { join, parse, resolve } from 'path';
+import { dirname, join, parse, resolve } from 'path';
+import { fileURLToPath } from 'url';
 import fg from 'fast-glob';
 import type { ComponentMeta, MetaCheckerOptions } from 'vue-component-meta';
 import { createComponentMetaChecker } from 'vue-component-meta';
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
 export interface ComponentApiProps {
   name: ComponentMeta['props'][number]['name'];
   description: ComponentMeta['props'][number]['description'];

package/src/build-utils/update-component-list.ts

@@ -22,7 +22,7 @@ const componentsFileContent = `\
  * Generated on: ${new Date().toDateString()}
  */
 
-module.exports = [
+export default [
 ${componentList
     .map((component: string) => `  { text: '${component}', link: 'components/${component}' },`)
     .join('\n')}

package/src/components/Accordion/AccordionContent.vue

@@ -2,13 +2,42 @@
 import { inject } from 'vue';
 
 const accordionItemActive = inject<boolean>('accordionItemActive');
+const accordionItemId = inject<string>('accordionItemId')!;
+
+function beforeEnter(element: Element): void {
+  (element as HTMLElement).style.height = '0';
+}
+
+function enter(element: Element): void {
+  (element as HTMLElement).style.height = element.scrollHeight + 'px';
+}
+
+function beforeLeave(element: Element): void {
+  (element as HTMLElement).style.height = element.scrollHeight + 'px';
+}
+
+function leave(element: Element): void {
+  (element as HTMLElement).style.height = '0';
+}
 </script>
 
 <template>
-  <div
-    :class="{ 'hidden': !accordionItemActive }"
-    class="py-3"
+  <transition
+    name="accordion"
+    @enter="enter"
+    @leave="leave"
+    @before-enter="beforeEnter"
+    @before-leave="beforeLeave"
   >
-    <slot />
-  </div>
+    <div
+      v-show="accordionItemActive"
+      :id="accordionItemId"
+      class="transition-all duration-200 ease-in-out overflow-hidden"
+      role="region"
+    >
+      <div class="py-3">
+        <slot />
+      </div>
+    </div>
+  </transition>
 </template>

package/src/components/Accordion/AccordionItem.vue

@@ -2,7 +2,7 @@
 import { computed, inject, provide, Ref } from 'vue';
 import { useUniqueId } from '../../composables';
 
-const accordionItemId = useUniqueId('accordion-item');
+const accordionItemId = useUniqueId('accordionItem');
 const activeAccordionItem = inject<Ref<string>>('activeAccordionItem')!;
 
 const accordionItemActive = computed((): boolean => activeAccordionItem.value === accordionItemId);
@@ -12,7 +12,10 @@ provide('accordionItemActive', accordionItemActive);
 </script>
 
 <template>
-  <div class="border-b">
+  <div
+    class="border-b"
+    :aria-expanded="accordionItemActive"
+  >
     <slot />
   </div>
 </template>

package/src/components/Accordion/AccordionTrigger.vue

@@ -3,17 +3,20 @@ import { inject, Ref } from 'vue';
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/16/solid';
 import { TextStyle } from '../TextStyle';
 
-const activeAccordionItem = inject<Ref<string>>('activeAccordionItem')!;
+const activeAccordionItem = inject<Ref<string | null>>('activeAccordionItem')!;
 const accordionItemId = inject<string>('accordionItemId')!;
 const accordionItemActive = inject<boolean>('accordionItemActive');
 
 function toggleAccordionItem(): void {
-  activeAccordionItem.value = accordionItemId;
+  activeAccordionItem.value = activeAccordionItem.value !== accordionItemId
+    ? accordionItemId
+    : null;
 }
 </script>
 
 <template>
   <button
+    :aria-controls="accordionItemId"
     class="w-full flex flex-1 items-center justify-between group"
     @click="toggleAccordionItem"
   >

package/src/components/Accordion/README.md

@@ -34,7 +34,7 @@ Use to display a list of questions and answers. The user can click on a question
 
 ```js-vue
 <script lang="ts" setup>
-import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from 'focus-ui';
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@returnless/focus-ui';
 </script>
 
 <template>

package/src/components/ActionList/ActionList.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import { Popover } from '../Popover';
+</script>
+
+<template>
+  <Popover alignment="start">
+    <slot />
+  </Popover>
+</template>

package/src/components/ActionList/ActionListBody.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { PopoverBody } from '../Popover';
+</script>
+
+<template>
+  <PopoverBody>
+    <div class="min-w-[200px]">
+      <slot />
+    </div>
+  </PopoverBody>
+</template>

package/src/components/ActionList/ActionListItem.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { Button, ButtonContent, ButtonVariant } from '../Button';
+
+withDefaults(defineProps<{
+  /** Whether the action list item is active. */
+  active?: boolean;
+
+  /** The icon to display next to the action list item. */
+  icon: () => void | null;
+
+  variant?: ButtonVariant;
+}>(), {
+  active: false,
+  variant: 'ghost',
+});
+</script>
+
+<template>
+  <li class="block">
+    <Button
+      :active="active"
+      :variant="variant"
+      full-width
+      role="menuitem"
+      size="small"
+    >
+      <component
+        :is="icon"
+        v-if="icon"
+        class="w-4 h-4"
+      />
+      <ButtonContent>
+        <slot />
+      </ButtonContent>
+    </Button>
+  </li>
+</template>

package/src/components/ActionList/ActionListSection.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+  <ul class="[&:not(:last-child)]:border-b p-1.5 space-y-0.5">
+    <slot />
+  </ul>
+</template>

package/src/components/ActionList/ActionListTrigger.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import { PopoverTrigger } from '../Popover';
+</script>
+
+<template>
+  <PopoverTrigger>
+    <slot />
+  </PopoverTrigger>
+</template>

package/src/components/ActionList/README.md

@@ -0,0 +1,113 @@
+<script lang="ts" setup>
+import {
+  ActionList,
+  ActionListBody,
+  ActionListItem,
+  ActionListSection,
+  ActionListTrigger,
+  Button,
+} from '../../src/components'; 
+import { Link } from '@inertiajs/vue3'; 
+import api from '../component-meta/ActionList.json';
+import { TrashIcon, PencilIcon, ArrowUpTrayIcon, ArrowDownTrayIcon } from '@heroicons/vue/16/solid';
+</script>
+
+# Action list
+
+Action lists render a list of actions or selectable options. This component is usually placed inside a popover container
+to create a dropdown menu or let users select from a list of options.
+
+<ComponentApi :api="api" />
+
+## Usage
+
+<ComponentWrapper>
+  <ActionList>
+    <ActionListTrigger>
+      <Button disclosure variant="ghost">Action trigger</Button>
+    </ActionListTrigger>
+    <ActionListBody>
+    <ActionListSection label="File options">
+      <ActionListItem :icon="ArrowDownTrayIcon" href="#" as="link">
+        Import file
+      </ActionListItem>
+      <ActionListItem :icon="ArrowUpTrayIcon" active as="button">
+        Export file
+      </ActionListItem>
+    </ActionListSection>
+      <ActionListSection label="Bulk actions">
+        <ActionListItem :icon="PencilIcon" as="button">
+          Edit
+        </ActionListItem>
+        <ActionListItem :icon="TrashIcon" as="button" variant="destructive">
+          Delete
+        </ActionListItem>
+      </ActionListSection>
+    </ActionListBody>
+  </ActionList>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import {
+  ActionList,
+  ActionListBody,
+  ActionListItem,
+  ActionListSection,
+  ActionListTrigger,
+  Button,
+} from '@returnless/focus-ui'; 
+import { TrashIcon, PencilIcon, ArrowUpTrayIcon, ArrowDownTrayIcon } from '@heroicons/vue/16/solid';
+</script>
+
+<template>
+  <ActionList>
+    <ActionListTrigger>
+      <Button disclosure variant="ghost">Action trigger</Button>
+    </ActionListTrigger>
+    <ActionListBody>
+    <ActionListSection label="File options">
+      <ActionListItem :icon="ArrowDownTrayIcon" href="#" as="link">
+        Import file
+      </ActionListItem>
+      <ActionListItem :icon="ArrowUpTrayIcon" active as="button">
+        Export file
+      </ActionListItem>
+    </ActionListSection>
+      <ActionListSection label="Bulk actions">
+        <ActionListItem :icon="PencilIcon" as="button">
+          Edit
+        </ActionListItem>
+        <ActionListItem :icon="TrashIcon" as="button" variant="destructive">
+          Delete
+        </ActionListItem>
+      </ActionListSection>
+    </ActionListBody>
+  </ActionList>
+</template>
+```
+
+## Best practices
+
+Action lists should:
+
+- Be used for secondary or less important information and actions since they're hidden until users expose them by
+  opening a popover
+- Contain actions that are related to each other
+
+## Content guidelines
+
+### Action lists
+
+Each item in an action list should be clear and predictable. Users should be able to anticipate what will happen
+when they click on an action.
+
+Each item in an action list should always lead with a strong verb that encourages action. To provide enough context
+use the {verb}+{noun} format unless the action is clear with a single verb.
+
+Each item in an action list should be scannable avoiding unnecessary words and articles such as "the", "an", or "a".
+
+## Accessibility
+
+Items in an action list are organized as list items (`<li>`) in an unordered list (`<ul>`) and are conveyed as a
+group of related elements to assistive technology users. Each item is implemented as a button.

package/src/components/ActionList/index.ts

@@ -0,0 +1,5 @@
+export { default as ActionList } from './ActionList.vue';
+export { default as ActionListBody } from './ActionListBody.vue';
+export { default as ActionListItem } from './ActionListItem.vue';
+export { default as ActionListSection } from './ActionListSection.vue';
+export { default as ActionListTrigger } from './ActionListTrigger.vue';

package/src/components/Alert/Alert.vue

@@ -1,14 +1,19 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
-import DismissableAlertButton from './DismissableAlertButton.vue';
+import { computed, provide, ref } from 'vue';
+import { AlertVariant } from './types';
+import DismissibleAlertButton from './DismissableAlertButton.vue';
 
 const props = withDefaults(defineProps<{
+  /** Whether the alert is flush to the borders. */
+  flush?: boolean;
+
   /** Whether the alert can be dismissed. */
   dismissible?: boolean;
 
   /** The variant of the alert. */
-  variant?: 'default' | 'destructive';
+  variant?: AlertVariant;
 }>(), {
+  flush: false,
   dismissible: true,
   variant: 'default',
 });
@@ -18,16 +23,23 @@ const emits = defineEmits<{
   dismiss: [];
 }>();
 
+provide('alertVariant', props.variant);
+
 const alertDismissed = ref(false);
 
-const classList = computed(() => {
-  return {
-    'border-red-500 text-red-900': props.variant === 'destructive',
-    'text-gray-900': props.variant === 'default',
-  };
+const classList = computed((): Record<string, boolean>[] => {
+  return [
+    { 'bg-white': props.variant === 'default' },
+    { 'bg-red-50 border-red-500/40 text-red-800': props.variant === 'destructive' },
+    { 'bg-yellow-50 border-yellow-500/40 text-yellow-800': props.variant === 'warning' },
+
+    { 'border rounded px-4 py-3': !props.flush },
+    { 'border-y px-6 py-3 mt-6': props.flush },
+  ];
 });
 
 const role = computed(() => props.variant === 'destructive' ? 'alert' : 'status');
+const liveRegion = computed(() => props.variant === 'destructive' ? 'assertive' : 'polite');
 
 function dismissAlert(): void {
   emits('dismiss');
@@ -41,12 +53,13 @@ function dismissAlert(): void {
     v-if="! alertDismissed"
     :class="classList"
     :role="role"
-    class="relative rounded border bg-white px-4 py-3 shadow-sm"
+    :aria-live="liveRegion"
+    class="relative shadow-sm"
     tabindex="0"
   >
     <slot />
 
-    <DismissableAlertButton
+    <DismissibleAlertButton
       v-if="dismissible"
       :variant="variant"
       @dismiss="dismissAlert"

package/src/components/Alert/AlertDescription.vue

@@ -1,8 +1,20 @@
 <script setup lang="ts">
+import { computed, inject } from 'vue';
+import { AlertVariant } from './types';
+
+const alertVariant = inject<AlertVariant>('alertVariant');
+
+const classList = computed((): Record<string, boolean> => {
+  return {
+    'text-red-900/80': alertVariant === 'destructive',
+    'text-yellow-900/80': alertVariant === 'warning',
+    'text-gray-900/80': alertVariant === 'default',
+  };
+});
 </script>
 
 <template>
-  <div>
+  <div :class="classList">
     <slot />
   </div>
 </template>

package/src/components/Alert/AlertTitle.vue

@@ -3,7 +3,7 @@ import { TextStyle } from '../TextStyle';
 </script>
 
 <template>
-  <h5 class="mb-1 leading-none">
+  <h5 class="mb-4 leading-none">
     <TextStyle variant="strong">
       <slot />
     </TextStyle>

package/src/components/Alert/DismissableAlertButton.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { XMarkIcon } from '@heroicons/vue/16/solid';
 import { computed } from 'vue';
+import { AlertVariant } from './types';
 
 const props = withDefaults(defineProps<{
   /** The variant of the alert. */
-  variant?: 'default' | 'destructive';
+  variant?: AlertVariant;
 }>(), {
   variant: 'default',
 });
@@ -13,9 +14,10 @@ defineEmits<{
   dismiss: [];
 }>();
 
-const classList = computed(() => {
+const classList = computed((): Record<string, boolean> => {
   return {
-    'hover:bg-red-200': props.variant === 'destructive',
+    'hover:bg-red-900/20': props.variant === 'destructive',
+    'hover:bg-yellow-900/20': props.variant === 'warning',
     'hover:bg-slate-200': props.variant === 'default',
   };
 });
@@ -23,9 +25,9 @@ const classList = computed(() => {
 
 <template>
   <button
+    :class="classList"
     aria-label="Dismiss notification"
     class="absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded"
-    :class="classList"
     type="button"
     @click="$emit('dismiss')"
   >

package/src/components/Alert/README.md

@@ -29,7 +29,7 @@ for users feedback. Default alerts contain lower priority information and should
 
 ```js-vue
 <script lang="ts" setup>
-import { Alert, AlertDescription, AlertTitle } from 'focus-ui';
+import { Alert, AlertDescription, AlertTitle } from '@returnless/focus-ui';
 </script>
 
 <template>
@@ -58,7 +58,7 @@ alert that warns users about a critical system failure. Destructive alerts conta
 
 ```js-vue
 <script lang="ts" setup>
-import { Alert, AlertDescription, AlertTitle } from 'focus-ui';
+import { Alert, AlertDescription, AlertTitle } from '@returnless/focus-ui';
 </script>
 
 <template>
@@ -71,6 +71,35 @@ import { Alert, AlertDescription, AlertTitle } from 'focus-ui';
 </template>
 ```
 
+### Warning
+
+Use to display information that needs attention or that user need to take action on. Seeing these banners can be
+stressful for user so be cautious about using them.
+
+<ComponentWrapper>
+  <Alert variant="warning">
+    <AlertTitle>Before you can purchase a shipping label, this change needs to be made:</AlertTitle>
+    <AlertDescription>
+      The name of the city you’re shipping to has characters that aren’t allowed. City name can only include spaces and hyphens.
+    </AlertDescription>
+  </Alert>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { Alert, AlertDescription, AlertTitle } from '@returnless/focus-ui';
+</script>
+
+<template>
+  <Alert variant="warning">
+    <AlertTitle>Before you can purchase a shipping label, this change needs to be made:</AlertTitle>
+    <AlertDescription>
+      The name of the city you’re shipping to has characters that aren’t allowed. City name can only include spaces and hyphens.
+    </AlertDescription>
+  </Alert>
+</template>
+```
+
 ## Best practices
 
 Alerts should:

package/src/components/Alert/index.ts

@@ -1,3 +1,5 @@
+export { type AlertVariant } from './types';
+
 export { default as Alert } from './Alert.vue';
 export { default as AlertDescription } from './AlertDescription.vue';
 export { default as AlertTitle } from './AlertTitle.vue';

package/src/components/Alert/types.ts

@@ -0,0 +1 @@
+export type AlertVariant = 'default' | 'destructive' | 'warning';

package/src/components/AlertDialog/AlertDialog.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { onMounted, onUnmounted, provide } from 'vue';
+import { useUniqueId } from '../../composables';
 
 withDefaults(defineProps<{
   /** Whether the alert dialog is open. */
@@ -30,13 +31,21 @@ onUnmounted((): void => {
   document.removeEventListener('keydown', onKeyDown);
 });
 
+const alertDialogLabelledBy = useUniqueId('alertDialogLabel');
+const alertDialogDescribedBy = useUniqueId('alertDialogDescription');
+
 provide('cancelAlertDialog', cancelAlertDialog);
+provide('alertDialogLabelledBy', alertDialogLabelledBy);
+provide('alertDialogDescribedBy', alertDialogDescribedBy);
 </script>
 
 <template>
   <div
     v-if="open"
-    class="fixed top-0 left-0 z-10 h-screen w-screen bg-slate-500/50 text-sm"
+    :aria-describedby="alertDialogDescribedBy"
+    :aria-labelledby="alertDialogLabelledBy"
+    class="fixed top-0 left-0 z-10 h-screen w-screen bg-slate-500/50 px-2 text-sm"
+    role="alertdialog"
   >
     <div class="flex min-h-full items-center justify-center">
       <slot />

package/src/components/AlertDialog/AlertDialogActionButton.vue

@@ -1,9 +1,16 @@
 <script lang="ts" setup>
-import { Button } from '../Button';
+import { type ButtonVariant, Button } from '../Button';
+
+withDefaults(defineProps<{
+  /** The variant of the button. */
+  variant?: ButtonVariant;
+}>(), {
+  variant: 'primary',
+});
 </script>
 
 <template>
-  <Button variant="primary">
+  <Button :variant="variant">
     <slot />
   </Button>
 </template>

package/src/components/AlertDialog/AlertDialogCancelButton.vue

@@ -2,7 +2,7 @@
 import { Button } from '../Button';
 import { inject } from 'vue';
 
-const cancelAlertDialog = inject('cancelAlertDialog');
+const cancelAlertDialog = inject<() => void>('cancelAlertDialog');
 </script>
 
 <template>

package/src/components/AlertDialog/AlertDialogDescription.vue

@@ -1,10 +1,16 @@
 <script lang="ts" setup>
 import { TextStyle } from '../TextStyle';
+import { inject } from 'vue';
+
+const alertDialogDescribedBy = inject<string>('alertDialogLabelledBy')!;
 </script>
 
 <template>
   <p>
-    <TextStyle variant="subdued">
+    <TextStyle
+      :id="alertDialogDescribedBy"
+      variant="subdued"
+    >
       <slot />
     </TextStyle>
   </p>