@sveltia/ui 0.2.0 → 0.2.2

package/package/index.d.ts

@@ -0,0 +1,43 @@
+export function initLocales({ fallbackLocale, initialLocale }?: object): 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 RadioButtonGroup } from "./components/composite/radio-button-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 RadioButton } from "./components/core/radio-button.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 AppShell } from "./components/util/app-shell.svelte";

package/package/index.js

@@ -0,0 +1,68 @@
+import { addMessages, init } from 'svelte-i18n';
+
+/**
+ * Load strings and initialize the locales.
+ * @param {object} [init] Initialize options.
+ * @see https://github.com/kaisermann/svelte-i18n/blob/main/docs/Getting%20Started.md
+ * @see https://vitejs.dev/guide/features.html#glob-import
+ */
+export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}) => {
+  const modules = import.meta.glob('./locales/*.js', { eager: true });
+
+  Object.entries(modules).forEach(([path, { strings }]) => {
+    const [, locale] = path.match(/([a-zA-Z-]+)\.js/);
+
+    // Add `_sui` suffix to avoid collision with app localization
+    addMessages(locale, { _sui: strings });
+  });
+
+  init({
+    fallbackLocale,
+    initialLocale,
+  });
+};
+
+initLocales();
+
+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 RadioButtonGroup } from './components/composite/radio-button-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 RadioButton } from './components/core/radio-button.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 AppShell } from './components/util/app-shell.svelte';

package/package/locales/en.d.ts

@@ -0,0 +1,42 @@
+export namespace strings {
+    namespace _ {
+        const ok: string;
+        const cancel: string;
+        const close: string;
+        const clear: string;
+        const remove: string;
+        const collapse: string;
+        const expand: string;
+    }
+    namespace calendar {
+        const year: string;
+        const previous_decade: string;
+        const next_decade: string;
+        const month: string;
+        const previous_month: string;
+        const next_month: string;
+        const today: string;
+    }
+    namespace combobox {
+        const select_an_option: string;
+    }
+    namespace number_input {
+        const decrease: string;
+        const increase: string;
+    }
+    namespace password_input {
+        const show_password: string;
+    }
+    namespace markdown_editor {
+        const markdown_editor_1: string;
+        export { markdown_editor_1 as markdown_editor };
+        export const bold: string;
+        export const italic: string;
+        export const code: string;
+        export const link: string;
+        export const heading_x: string;
+        export const quote: string;
+        export const bulleted_list: string;
+        export const numbered_list: string;
+    }
+}

package/package/locales/en.js

@@ -0,0 +1,41 @@
+export const strings = {
+  _: {
+    ok: 'OK',
+    cancel: 'Cancel',
+    close: 'Close',
+    clear: 'Clear',
+    remove: 'Remove',
+    collapse: 'Collapse',
+    expand: 'Expand',
+  },
+  calendar: {
+    year: 'Year',
+    previous_decade: 'Previous Decade',
+    next_decade: 'Next Decade',
+    month: 'Month',
+    previous_month: 'Previous Month',
+    next_month: 'Next Month',
+    today: 'Today',
+  },
+  combobox: {
+    select_an_option: 'Select an option…',
+  },
+  number_input: {
+    decrease: 'Decrease',
+    increase: 'Increase',
+  },
+  password_input: {
+    show_password: 'Show Password',
+  },
+  markdown_editor: {
+    markdown_editor: 'Markdown Editor',
+    bold: 'Bold',
+    italic: 'Italic',
+    code: 'Code',
+    link: 'Link',
+    heading_x: 'Heading {level}',
+    quote: 'Quote',
+    bulleted_list: 'Bulleted List',
+    numbered_list: 'Numbered List',
+  },
+};

package/package/locales/ja.d.ts

@@ -0,0 +1,42 @@
+export namespace strings {
+    namespace _ {
+        const ok: string;
+        const cancel: string;
+        const close: string;
+        const clear: string;
+        const remove: string;
+        const collapse: string;
+        const expand: string;
+    }
+    namespace calendar {
+        const year: string;
+        const previous_decade: string;
+        const next_decade: string;
+        const month: string;
+        const previous_month: string;
+        const next_month: string;
+        const today: string;
+    }
+    namespace combobox {
+        const select_an_option: string;
+    }
+    namespace number_input {
+        const decrease: string;
+        const increase: string;
+    }
+    namespace password_input {
+        const show_password: string;
+    }
+    namespace markdown_editor {
+        const markdown_editor_1: string;
+        export { markdown_editor_1 as markdown_editor };
+        export const bold: string;
+        export const italic: string;
+        export const code: string;
+        export const link: string;
+        export const heading_x: string;
+        export const quote: string;
+        export const bulleted_list: string;
+        export const numbered_list: string;
+    }
+}

package/package/locales/ja.js

@@ -0,0 +1,41 @@
+export const strings = {
+  _: {
+    ok: 'OK',
+    cancel: 'キャンセル',
+    close: '閉じる',
+    clear: 'クリア',
+    remove: '削除',
+    collapse: '折り畳む',
+    expand: '広げる',
+  },
+  calendar: {
+    year: '年',
+    previous_decade: '前の 10 年',
+    next_decade: '次の 10 年',
+    month: '月',
+    previous_month: '前月',
+    next_month: '翌月',
+    today: '今日',
+  },
+  combobox: {
+    select_an_option: 'オプションを選択…',
+  },
+  number_input: {
+    decrease: '減らす',
+    increase: '増やす',
+  },
+  password_input: {
+    show_password: 'パスワードを表示',
+  },
+  markdown_editor: {
+    markdown_editor: 'Markdown エディター',
+    bold: '太字',
+    italic: '斜体',
+    code: 'コード',
+    link: 'リンク',
+    heading_x: '見出し {level}',
+    quote: '引用',
+    bulleted_list: '番号なしリスト',
+    numbered_list: '番号付きリスト',
+  },
+};

package/package/styles/core.scss

@@ -0,0 +1,134 @@
+@use "variables.scss";
+
+// https://fonts.google.com/share?selection.family=Merriweather%20Sans:ital,wght@0,300;0,600;1,300%7CNoto%20Sans%20Mono
+@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300&family=Noto+Sans+Mono&display=swap");
+// https://fonts.google.com/icons?icon.set=Material+Symbols
+// Use `font-display: block;` @see https://stackoverflow.com/q/41710834
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block");
+
+.material-symbols-outlined {
+  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
+}
+
+* {
+  scroll-behavior: smooth;
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+}
+
+:focus {
+  z-index: 1;
+  outline-width: 0;
+}
+
+:focus-visible {
+  outline-offset: -2px;
+  outline-width: 2px !important;
+  outline-style: solid;
+  outline-color: hsl(var(--hue) 100% 50% / 25%);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  font-weight: var(--font-weight--bold);
+}
+
+strong {
+  font-weight: var(--font-weight--bold);
+}
+
+a {
+  color: var(--primary-accent-color-lighter);
+  text-decoration: none;
+}
+
+img,
+svg,
+iframe {
+  vertical-align: top;
+}
+
+button,
+input,
+textarea,
+select,
+option {
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+}
+
+p,
+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);
+}
+
+pre {
+  line-height: 1.5;
+  -webkit-user-select: text;
+  user-select: text;
+}
+
+dialog {
+  position: fixed;
+  inset: 0;
+  outline: 0;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+  color: inherit;
+  background: transparent;
+  -webkit-user-select: none;
+  user-select: none;
+  touch-action: none;
+  cursor: default;
+
+  &::backdrop {
+    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

@@ -0,0 +1,184 @@
+:root[data-theme="light"] {
+  --foreground-color-1-hsl: var(--base-hue) 5% 0%; // highlight
+  --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
+  --shadow-color: var(--base-hue) 10% 0%;
+  // Accents
+  --primary-accent-color: hsl(var(--base-hue) 80% 45%);
+  --primary-accent-color-lighter: hsl(var(--base-hue) 80% 40%);
+  --primary-accent-color-darker: hsl(var(--base-hue) 80% 50%);
+  --primary-accent-color-foreground: hsl(var(--base-hue) 10% 100%); // white/inverted
+  // Alerts
+  --danger-color-hue: 0;
+  --warning-color-hue: 40;
+  --success-color-hue: 100;
+  --info-color-hue: 220;
+  --alert-foreground-color-saturation: 88%;
+  --alert-foreground-color-lightness: 28%;
+  --alert-background-color-saturation: 68%;
+  --alert-background-color-lightness: 88%;
+  --alert-border-color-saturation: 48%;
+  --alert-border-color-lightness: 68%;
+}
+
+:root[data-theme="dark"] {
+  --foreground-color-1-hsl: var(--base-hue) 10% 100%; // highlight
+  --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
+  --shadow-color: var(--base-hue) 10% 0%;
+  // Accents
+  --primary-accent-color: hsl(var(--base-hue) 100% 45%); // 4.57 AA w/ #FFF foreground color
+  --primary-accent-color-lighter: hsl(var(--base-hue) 100% 55%);
+  --primary-accent-color-darker: hsl(var(--base-hue) 100% 35%);
+  --primary-accent-color-foreground: hsl(var(--base-hue) 10% 100%); // white
+  // Alerts
+  --danger-color-hue: 0;
+  --warning-color-hue: 40;
+  --success-color-hue: 100;
+  --info-color-hue: 220;
+  --alert-foreground-color-saturation: 48%;
+  --alert-foreground-color-lightness: 68%;
+  --alert-background-color-saturation: 88%;
+  --alert-background-color-lightness: 8%;
+  --alert-border-color-saturation: 38%;
+  --alert-border-color-lightness: 18%;
+}
+
+:root {
+  // Base HSL values
+  --base-hue: 210;
+  // Foreground
+  --highlight-foreground-color: hsl(var(--foreground-color-1-hsl));
+  --primary-foreground-color: hsl(var(--foreground-color-2-hsl));
+  --secondary-foreground-color: hsl(var(--foreground-color-3-hsl));
+  --tertiary-foreground-color: hsl(var(--foreground-color-3-hsl));
+  --disabled-foreground-color: hsl(var(--foreground-color-4-hsl));
+  --danger-foreground-color: hsl(
+    var(--danger-color-hue) var(--alert-foreground-color-saturation)
+      var(--alert-foreground-color-lightness)
+  );
+  --warning-foreground-color: hsl(
+    var(--warning-color-hue) var(--alert-foreground-color-saturation)
+      var(--alert-foreground-color-lightness)
+  );
+  --success-foreground-color: hsl(
+    var(--success-color-hue) var(--alert-foreground-color-saturation)
+      var(--alert-foreground-color-lightness)
+  );
+  --info-foreground-color: hsl(
+    var(--info-color-hue) var(--alert-foreground-color-saturation)
+      var(--alert-foreground-color-lightness)
+  );
+  // Background
+  --highlight-background-color: hsl(var(--background-color-5-hsl));
+  --content-background-color: hsl(var(--background-color-1-hsl));
+  --primary-background-color: hsl(var(--background-color-2-hsl));
+  --primary-background-color-translucent: hsl(var(--background-color-2-hsl) / 80%);
+  --secondary-background-color: hsl(var(--background-color-3-hsl));
+  --secondary-background-color-translucent: hsl(var(--background-color-3-hsl) / 80%);
+  --tertiary-background-color: hsl(var(--background-color-4-hsl));
+  --tertiary-background-color-translucent: hsl(var(--background-color-4-hsl) / 80%);
+  --control-background-color: hsl(var(--background-color-1-hsl));
+  --disabled-background-color: hsl(var(--background-color-4-hsl));
+  --danger-background-color: hsl(
+    var(--danger-color-hue) var(--alert-background-color-saturation)
+      var(--alert-background-color-lightness)
+  );
+  --warning-background-color: hsl(
+    var(--warning-color-hue) var(--alert-background-color-saturation)
+      var(--alert-background-color-lightness)
+  );
+  --success-background-color: hsl(
+    var(--success-color-hue) var(--alert-background-color-saturation)
+      var(--alert-background-color-lightness)
+  );
+  --info-background-color: hsl(
+    var(--info-color-hue) var(--alert-background-color-saturation)
+      var(--alert-background-color-lightness)
+  );
+  // Borders
+  --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));
+  --danger-border-color: hsl(
+    var(--danger-color-hue) var(--alert-border-color-saturation) var(--alert-border-color-lightness)
+  );
+  --warning-border-color: hsl(
+    var(--warning-color-hue) var(--alert-border-color-saturation)
+      var(--alert-border-color-lightness)
+  );
+  --success-border-color: hsl(
+    var(--success-color-hue) var(--alert-border-color-saturation)
+      var(--alert-border-color-lightness)
+  );
+  --info-border-color: hsl(
+    var(--info-color-hue) var(--alert-border-color-saturation) var(--alert-border-color-lightness)
+  );
+  // Shadows
+  --popup-shadow-color: hsl(var(--shadow-color) / 40%);
+  --popup-backdrop-color: hsl(var(--shadow-color) / 40%);
+  // Fonts
+  --font-family--default: "Merriweather Sans", sans-serif;
+  --font-size--xxx-large: 24px;
+  --font-size--xx-large: 20px;
+  --font-size--x-large: 18px;
+  --font-size--large: 16px;
+  --font-size--default: 14px;
+  --font-size--small: 12px;
+  --font-size--x-small: 10px;
+  --font-weight--normal: 300;
+  --font-weight--bold: 600;
+  --font-family--monospace: "Noto Sans Mono", monospace;
+  --font-size--monospace: 13px;
+  // Controls
+  --control--small--border-width: 1px;
+  --control--small--border-radius: 2px;
+  --control--small--height: 24px;
+  --control--medium--border-width: 1px;
+  --control--medium--border-radius: 4px;
+  --control--medium--height: 32px;
+  --control--large--border-width: 1px;
+  --control--large--border-radius: 8px;
+  --control--large--height: 40px;
+  // Buttons
+  --button--small--border-radius: var(--control--small--border-radius);
+  --button--small--height: var(--control--small--height);
+  --button--medium--border-radius: var(--control--medium--border-radius);
+  --button--medium--height: var(--control--medium--height);
+  --button--large--border-radius: var(--control--large--border-radius);
+  --button--large--height: var(--control--large--height);
+  // Options & menu items
+  --option--small--border-radius: var(--control--small--border-radius);
+  --option--small--height: var(--control--small--height);
+  --option--medium--border-radius: var(--control--medium--border-radius);
+  --option--medium--height: var(--control--medium--height);
+  --option--large--border-radius: var(--control--large--border-radius);
+  --option--large--height: var(--control--large--height);
+  // Input
+  --input--small--border-radius: var(--control--small--border-radius);
+  --input--small--height: var(--control--small--height);
+  --input--medium--border-radius: var(--control--medium--border-radius);
+  --input--medium--height: var(--control--medium--height);
+  --input--large--border-radius: var(--control--large--border-radius);
+  --input--large--height: var(--control--large--height);
+  // Tab
+  --tab--small--height: var(--control--small--height);
+  --tab--medium--height: var(--control--medium--height);
+  --tab--large--height: var(--control--large--height);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -11,7 +11,7 @@
     "build": "svelte-kit sync && svelte-package -o package",
     "build:watch": "svelte-kit sync && svelte-package -o package --watch",
     "preview": "vite preview",
-    "prepublishOnly": "vite build",
+    "prepublishOnly": "npm run build",
     "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
     "format": "prettier --plugin-search-dir . --write .",
@@ -317,7 +317,6 @@
   "files": [
     "package"
   ],
-  "svelte": "./package/index.js",
   "typesVersions": {
     ">4.0": {
       "components/composite/calendar.svelte": [