@sveltia/ui 0.2.4 → 0.3.0

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 RadioButtonGroup } from './components/composite/radio-button-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 RadioButton } from './components/core/radio-button.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,13 +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% 75%; // primary
-  --border-color-2-hsl: var(--base-hue) 5% 80%; // secondary/input
   --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%);
@@ -34,13 +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% 28%; // primary
-  --border-color-2-hsl: var(--base-hue) 10% 24%; // secondary/input
   --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
@@ -116,6 +116,7 @@
   --primary-border-color: hsl(var(--border-color-1-hsl));
   --secondary-border-color: hsl(var(--border-color-2-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)
   );