@sveltia/ui 0.2.5 → 0.3.0

package/package/components/util/popup.svelte

@@ -7,7 +7,8 @@
 <script>
   import { onMount } from 'svelte';
   import { writable } from 'svelte/store';
-  import { activatePopup } from '../helpers/popup';
+  import { activatePopup } from './popup';
+  import { sleep } from './util';
 
   /** @type {HTMLElement?} */
   export let anchor = undefined;
@@ -58,12 +59,20 @@
     showContent = true;
     dialog.showModal();
 
-    window.requestAnimationFrame(() => {
+    window.requestAnimationFrame(async () => {
       showDialog = true;
+      await sleep(100);
 
-      window.requestAnimationFrame(() => {
-        /** @type {HTMLElement} */ (dialog.querySelector('[tabindex]') || dialog).focus();
-      });
+      const target = /** @type {HTMLElement} */ (
+        content.querySelector('[tabindex]:not([aria-disabled="true"])')
+      );
+
+      if (target) {
+        target.focus();
+      } else {
+        content.tabIndex = -1;
+        content.focus();
+      }
     });
   };
 

package/package/components/util/{misc.d.ts → util.d.ts}

@@ -1,2 +1,3 @@
+export function getRandomId(prefix?: string, length?: number): string;
 export function isObject(input: any): boolean;
 export function sleep(ms?: number): Promise<any>;

package/package/components/util/{misc.js → util.js}

@@ -1,3 +1,18 @@
+/**
+ * Get a random ID that can be used for elements.
+ * @param {string} [prefix] Prefix to be added to the ID, e.g. `popup`.
+ * @param {number} [length] Number of characters to be used in the ID.
+ * @returns {string} Generated ID.
+ */
+export const getRandomId = (prefix = '', length = 7) =>
+  [
+    prefix,
+    new Array(length)
+      .fill()
+      .map(() => '0123456789abcdef'[Math.floor(Math.random() * 12)])
+      .join(''),
+  ].join('-');
+
 /**
  * Check if the given input is a simple object.
  * @param {*} input Input, probably an object.

package/package/index.d.ts

@@ -2,45 +2,50 @@ export function initLocales({ fallbackLocale, initialLocale }?: {
     fallbackLocale?: string;
     initialLocale?: string;
 }): void;
-export { default as Calendar } from "./components/composite/calendar.svelte";
-export { default as CheckboxGroup } from "./components/composite/checkbox-group.svelte";
-export { default as Combobox } from "./components/composite/combobox.svelte";
-export { default as Disclosure } from "./components/composite/disclosure.svelte";
-export { default as Grid } from "./components/composite/grid.svelte";
-export { default as Listbox } from "./components/composite/listbox.svelte";
-export { default as MenuItemGroup } from "./components/composite/menu-item-group.svelte";
-export { default as Menu } from "./components/composite/menu.svelte";
-export { default as RadioGroup } from "./components/composite/radio-group.svelte";
-export { default as SelectButtonGroup } from "./components/composite/select-button-group.svelte";
-export { default as Select } from "./components/composite/select.svelte";
-export { default as TabList } from "./components/composite/tab-list.svelte";
-export { default as Button } from "./components/core/button.svelte";
-export { default as Checkbox } from "./components/core/checkbox.svelte";
-export { default as Dialog } from "./components/core/dialog.svelte";
-export { default as Drawer } from "./components/core/drawer.svelte";
-export { default as GridCell } from "./components/core/grid-cell.svelte";
-export { default as Group } from "./components/core/group.svelte";
-export { default as Icon } from "./components/core/icon.svelte";
-export { default as MenuButton } from "./components/core/menu-button.svelte";
-export { default as MenuItemCheckbox } from "./components/core/menu-item-checkbox.svelte";
-export { default as MenuItemRadio } from "./components/core/menu-item-radio.svelte";
-export { default as MenuItem } from "./components/core/menu-item.svelte";
-export { default as NumberInput } from "./components/core/number-input.svelte";
-export { default as Option } from "./components/core/option.svelte";
-export { default as PasswordInput } from "./components/core/password-input.svelte";
-export { default as Radio } from "./components/core/radio.svelte";
-export { default as RowGroup } from "./components/core/row-group.svelte";
-export { default as Row } from "./components/core/row.svelte";
-export { default as SearchBar } from "./components/core/search-bar.svelte";
-export { default as SelectButton } from "./components/core/select-button.svelte";
-export { default as Separator } from "./components/core/separator.svelte";
-export { default as Slider } from "./components/core/slider.svelte";
-export { default as Spacer } from "./components/core/spacer.svelte";
-export { default as Switch } from "./components/core/switch.svelte";
-export { default as TabPanel } from "./components/core/tab-panel.svelte";
-export { default as Tab } from "./components/core/tab.svelte";
-export { default as TextArea } from "./components/core/text-area.svelte";
-export { default as TextInput } from "./components/core/text-input.svelte";
-export { default as Toolbar } from "./components/core/toolbar.svelte";
-export { default as MarkdownEditor } from "./components/editor/markdown.svelte";
+export { default as Button } from "./components/button/button.svelte";
+export { default as SelectButtonGroup } from "./components/button/select-button-group.svelte";
+export { default as SelectButton } from "./components/button/select-button.svelte";
+export { default as Calendar } from "./components/calendar/calendar.svelte";
+export { default as CheckboxGroup } from "./components/checkbox/checkbox-group.svelte";
+export { default as Checkbox } from "./components/checkbox/checkbox.svelte";
+export { default as Dialog } from "./components/dialog/dialog.svelte";
+export { default as Disclosure } from "./components/disclosure/disclosure.svelte";
+export { default as Divider } from "./components/divider/divider.svelte";
+export { default as Spacer } from "./components/divider/spacer.svelte";
+export { default as Drawer } from "./components/drawer/drawer.svelte";
+export { default as Icon } from "./components/icon/icon.svelte";
+export { default as Listbox } from "./components/listbox/listbox.svelte";
+export { default as OptionGroup } from "./components/listbox/option-group.svelte";
+export { default as Option } from "./components/listbox/option.svelte";
+export { default as MenuButton } from "./components/menu/menu-button.svelte";
+export { default as MenuItemCheckbox } from "./components/menu/menu-item-checkbox.svelte";
+export { default as MenuItemGroup } from "./components/menu/menu-item-group.svelte";
+export { default as MenuItemRadio } from "./components/menu/menu-item-radio.svelte";
+export { default as MenuItem } from "./components/menu/menu-item.svelte";
+export { default as Menu } from "./components/menu/menu.svelte";
+export { default as RadioGroup } from "./components/radio/radio-group.svelte";
+export { default as Radio } from "./components/radio/radio.svelte";
+export { default as Combobox } from "./components/select/combobox.svelte";
+export { default as Select } from "./components/select/select.svelte";
+export { default as Slider } from "./components/slider/slider.svelte";
+export { default as Switch } from "./components/switch/switch.svelte";
+export { default as TableBody } from "./components/table/table-body.svelte";
+export { default as TableCell } from "./components/table/table-cell.svelte";
+export { default as TableColHeader } from "./components/table/table-col-header.svelte";
+export { default as TableFoot } from "./components/table/table-foot.svelte";
+export { default as TableHead } from "./components/table/table-head.svelte";
+export { default as TableRowHeader } from "./components/table/table-row-header.svelte";
+export { default as TableRow } from "./components/table/table-row.svelte";
+export { default as Table } from "./components/table/table.svelte";
+export { default as TabList } from "./components/tabs/tab-list.svelte";
+export { default as TabPanel } from "./components/tabs/tab-panel.svelte";
+export { default as Tab } from "./components/tabs/tab.svelte";
+export { default as MarkdownEditor } from "./components/text-field/markdown-editor.svelte";
+export { default as NumberInput } from "./components/text-field/number-input.svelte";
+export { default as PasswordInput } from "./components/text-field/password-input.svelte";
+export { default as SearchBar } from "./components/text-field/search-bar.svelte";
+export { default as TextArea } from "./components/text-field/text-area.svelte";
+export { default as TextInput } from "./components/text-field/text-input.svelte";
+export { default as Toolbar } from "./components/toolbar/toolbar.svelte";
 export { default as AppShell } from "./components/util/app-shell.svelte";
+export { default as Group } from "./components/util/group.svelte";

package/package/index.js

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 import { addMessages, init } from 'svelte-i18n';
 
 /**
@@ -27,87 +29,50 @@ export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}
 
 initLocales();
 
-// @ts-ignore
-export { default as Calendar } from './components/composite/calendar.svelte';
-// @ts-ignore
-export { default as CheckboxGroup } from './components/composite/checkbox-group.svelte';
-// @ts-ignore
-export { default as Combobox } from './components/composite/combobox.svelte';
-// @ts-ignore
-export { default as Disclosure } from './components/composite/disclosure.svelte';
-// @ts-ignore
-export { default as Grid } from './components/composite/grid.svelte';
-// @ts-ignore
-export { default as Listbox } from './components/composite/listbox.svelte';
-// @ts-ignore
-export { default as MenuItemGroup } from './components/composite/menu-item-group.svelte';
-// @ts-ignore
-export { default as Menu } from './components/composite/menu.svelte';
-// @ts-ignore
-export { default as RadioGroup } from './components/composite/radio-group.svelte';
-// @ts-ignore
-export { default as SelectButtonGroup } from './components/composite/select-button-group.svelte';
-// @ts-ignore
-export { default as Select } from './components/composite/select.svelte';
-// @ts-ignore
-export { default as TabList } from './components/composite/tab-list.svelte';
-// @ts-ignore
-export { default as Button } from './components/core/button.svelte';
-// @ts-ignore
-export { default as Checkbox } from './components/core/checkbox.svelte';
-// @ts-ignore
-export { default as Dialog } from './components/core/dialog.svelte';
-// @ts-ignore
-export { default as Drawer } from './components/core/drawer.svelte';
-// @ts-ignore
-export { default as GridCell } from './components/core/grid-cell.svelte';
-// @ts-ignore
-export { default as Group } from './components/core/group.svelte';
-// @ts-ignore
-export { default as Icon } from './components/core/icon.svelte';
-// @ts-ignore
-export { default as MenuButton } from './components/core/menu-button.svelte';
-// @ts-ignore
-export { default as MenuItemCheckbox } from './components/core/menu-item-checkbox.svelte';
-// @ts-ignore
-export { default as MenuItemRadio } from './components/core/menu-item-radio.svelte';
-// @ts-ignore
-export { default as MenuItem } from './components/core/menu-item.svelte';
-// @ts-ignore
-export { default as NumberInput } from './components/core/number-input.svelte';
-// @ts-ignore
-export { default as Option } from './components/core/option.svelte';
-// @ts-ignore
-export { default as PasswordInput } from './components/core/password-input.svelte';
-// @ts-ignore
-export { default as Radio } from './components/core/radio.svelte';
-// @ts-ignore
-export { default as RowGroup } from './components/core/row-group.svelte';
-// @ts-ignore
-export { default as Row } from './components/core/row.svelte';
-// @ts-ignore
-export { default as SearchBar } from './components/core/search-bar.svelte';
-// @ts-ignore
-export { default as SelectButton } from './components/core/select-button.svelte';
-// @ts-ignore
-export { default as Separator } from './components/core/separator.svelte';
-// @ts-ignore
-export { default as Slider } from './components/core/slider.svelte';
-// @ts-ignore
-export { default as Spacer } from './components/core/spacer.svelte';
-// @ts-ignore
-export { default as Switch } from './components/core/switch.svelte';
-// @ts-ignore
-export { default as TabPanel } from './components/core/tab-panel.svelte';
-// @ts-ignore
-export { default as Tab } from './components/core/tab.svelte';
-// @ts-ignore
-export { default as TextArea } from './components/core/text-area.svelte';
-// @ts-ignore
-export { default as TextInput } from './components/core/text-input.svelte';
-// @ts-ignore
-export { default as Toolbar } from './components/core/toolbar.svelte';
-// @ts-ignore
-export { default as MarkdownEditor } from './components/editor/markdown.svelte';
-// @ts-ignore
+export { default as Button } from './components/button/button.svelte';
+export { default as SelectButtonGroup } from './components/button/select-button-group.svelte';
+export { default as SelectButton } from './components/button/select-button.svelte';
+export { default as Calendar } from './components/calendar/calendar.svelte';
+export { default as CheckboxGroup } from './components/checkbox/checkbox-group.svelte';
+export { default as Checkbox } from './components/checkbox/checkbox.svelte';
+export { default as Dialog } from './components/dialog/dialog.svelte';
+export { default as Disclosure } from './components/disclosure/disclosure.svelte';
+export { default as Divider } from './components/divider/divider.svelte';
+export { default as Spacer } from './components/divider/spacer.svelte';
+export { default as Drawer } from './components/drawer/drawer.svelte';
+export { default as Icon } from './components/icon/icon.svelte';
+export { default as Listbox } from './components/listbox/listbox.svelte';
+export { default as OptionGroup } from './components/listbox/option-group.svelte';
+export { default as Option } from './components/listbox/option.svelte';
+export { default as MenuButton } from './components/menu/menu-button.svelte';
+export { default as MenuItemCheckbox } from './components/menu/menu-item-checkbox.svelte';
+export { default as MenuItemGroup } from './components/menu/menu-item-group.svelte';
+export { default as MenuItemRadio } from './components/menu/menu-item-radio.svelte';
+export { default as MenuItem } from './components/menu/menu-item.svelte';
+export { default as Menu } from './components/menu/menu.svelte';
+export { default as RadioGroup } from './components/radio/radio-group.svelte';
+export { default as Radio } from './components/radio/radio.svelte';
+export { default as Combobox } from './components/select/combobox.svelte';
+export { default as Select } from './components/select/select.svelte';
+export { default as Slider } from './components/slider/slider.svelte';
+export { default as Switch } from './components/switch/switch.svelte';
+export { default as TableBody } from './components/table/table-body.svelte';
+export { default as TableCell } from './components/table/table-cell.svelte';
+export { default as TableColHeader } from './components/table/table-col-header.svelte';
+export { default as TableFoot } from './components/table/table-foot.svelte';
+export { default as TableHead } from './components/table/table-head.svelte';
+export { default as TableRowHeader } from './components/table/table-row-header.svelte';
+export { default as TableRow } from './components/table/table-row.svelte';
+export { default as Table } from './components/table/table.svelte';
+export { default as TabList } from './components/tabs/tab-list.svelte';
+export { default as TabPanel } from './components/tabs/tab-panel.svelte';
+export { default as Tab } from './components/tabs/tab.svelte';
+export { default as MarkdownEditor } from './components/text-field/markdown-editor.svelte';
+export { default as NumberInput } from './components/text-field/number-input.svelte';
+export { default as PasswordInput } from './components/text-field/password-input.svelte';
+export { default as SearchBar } from './components/text-field/search-bar.svelte';
+export { default as TextArea } from './components/text-field/text-area.svelte';
+export { default as TextInput } from './components/text-field/text-input.svelte';
+export { default as Toolbar } from './components/toolbar/toolbar.svelte';
 export { default as AppShell } from './components/util/app-shell.svelte';
+export { default as Group } from './components/util/group.svelte';

package/package/styles/core.scss

@@ -13,6 +13,10 @@
 * {
   scroll-behavior: smooth;
   box-sizing: border-box;
+  outline-offset: 1px;
+  outline-width: 2px !important;
+  outline-style: solid;
+  outline-color: transparent;
   border-width: 0;
   border-style: solid;
 }
@@ -23,10 +27,7 @@
 }
 
 :focus-visible {
-  outline-offset: -2px;
-  outline-width: 2px !important;
-  outline-style: solid;
-  outline-color: hsl(var(--hue) 100% 50% / 25%);
+  outline-color: var(--primary-accent-color-lighter);
 }
 
 h1,
@@ -69,19 +70,6 @@ li {
   line-height: 1.75;
 }
 
-[role="grid"] {
-  display: table;
-  width: 100%;
-
-  .colgroup {
-    display: table-column-group;
-
-    .col {
-      display: table-column;
-    }
-  }
-}
-
 code,
 pre {
   font-family: var(--font-family--monospace);
@@ -115,20 +103,3 @@ dialog {
     background: transparent;
   }
 }
-
-.thead[role="rowgroup"] {
-  display: table-header-group;
-}
-
-.tbody[role="rowgroup"] {
-  display: table-row-group;
-}
-
-[role="row"] {
-  display: table-row;
-}
-
-[role="columnheader"],
-[role="gridcell"] {
-  display: table-cell;
-}

package/package/styles/variables.scss

@@ -3,14 +3,13 @@
   --foreground-color-2-hsl: var(--base-hue) 5% 20%; // primary
   --foreground-color-3-hsl: var(--base-hue) 5% 40%; // secondary
   --foreground-color-4-hsl: var(--base-hue) 5% 60%; // tertiary
-  --border-color-1-hsl: var(--base-hue) 5% 30%; // primary
-  --border-color-2-hsl: var(--base-hue) 5% 50%; // secondary/input
-  --border-color-3-hsl: var(--base-hue) 5% 70%; // tertiary
   --background-color-1-hsl: var(--base-hue) 5% 100%; // content/input
   --background-color-2-hsl: var(--base-hue) 5% 98%; // primary
   --background-color-3-hsl: var(--base-hue) 5% 94%; // secondary
   --background-color-4-hsl: var(--base-hue) 5% 90%; // tertiary/disabled
   --background-color-5-hsl: var(--base-hue) 5% 86%; // highlight
+  --border-color-1-hsl: var(--base-hue) 5% 78%; // primary
+  --border-color-2-hsl: var(--base-hue) 5% 82%; // secondary/input
   --shadow-color: var(--base-hue) 10% 0%;
   // Accents
   --primary-accent-color: hsl(var(--base-hue) 80% 45%);
@@ -35,14 +34,13 @@
   --foreground-color-2-hsl: var(--base-hue) 10% 80%; // primary
   --foreground-color-3-hsl: var(--base-hue) 10% 60%; // secondary
   --foreground-color-4-hsl: var(--base-hue) 10% 40%; // tertiary
-  --border-color-1-hsl: var(--base-hue) 10% 70%; // primary
-  --border-color-2-hsl: var(--base-hue) 10% 50%; // secondary/input
-  --border-color-3-hsl: var(--base-hue) 10% 30%; // tertiary
   --background-color-1-hsl: var(--base-hue) 10% 10%; // content/input
   --background-color-2-hsl: var(--base-hue) 10% 12%; // primary
   --background-color-3-hsl: var(--base-hue) 10% 16%; // secondary
   --background-color-4-hsl: var(--base-hue) 10% 20%; // tertiary/disabled
   --background-color-5-hsl: var(--base-hue) 10% 24%; // highlight
+  --border-color-1-hsl: var(--base-hue) 10% 32%; // primary
+  --border-color-2-hsl: var(--base-hue) 10% 28%; // secondary/input
   --shadow-color: var(--base-hue) 10% 0%;
   // Accents
   --primary-accent-color: hsl(var(--base-hue) 100% 45%); // 4.57 AA w/ #FFF foreground color
@@ -117,8 +115,8 @@
   // Borders
   --primary-border-color: hsl(var(--border-color-1-hsl));
   --secondary-border-color: hsl(var(--border-color-2-hsl));
-  --primary-control-border-color: hsl(var(--border-color-2-hsl));
-  --secondary-control-border-color: hsl(var(--border-color-3-hsl));
+  --control-border-color: hsl(var(--border-color-2-hsl));
+  --checkbox-border-color: hsl(var(--foreground-color-3-hsl));
   --danger-border-color: hsl(
     var(--danger-color-hue) var(--alert-border-color-saturation) var(--alert-border-color-lightness)
   );