@sveltia/ui 0.1.5 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -29,32 +29,32 @@
   "devDependencies": {
     "@babel/core": "^7.21.4",
     "@babel/eslint-parser": "^7.21.3",
-    "@playwright/test": "^1.32.2",
+    "@playwright/test": "^1.32.3",
     "@sveltejs/adapter-auto": "2.0.0",
-    "@sveltejs/kit": "1.15.2",
+    "@sveltejs/kit": "1.15.7",
     "@sveltejs/package": "^2.0.2",
     "cspell": "^6.31.1",
-    "eslint": "^8.38.0",
+    "eslint": "^8.39.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-svelte3": "^4.0.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.23",
     "postcss-html": "^1.5.0",
-    "prettier": "^2.8.7",
+    "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.0",
-    "sass": "^1.61.0",
-    "stylelint": "^15.4.0",
-    "stylelint-config-recommended-scss": "^9.0.1",
+    "sass": "^1.62.0",
+    "stylelint": "^15.6.0",
+    "stylelint-config-recommended-scss": "^10.0.0",
     "stylelint-scss": "^4.6.0",
     "svelte-check": "^3.2.0",
     "svelte-i18n": "^3.6.0",
     "svelte-migrate": "^1.1.3",
     "svelte-preprocess": "^5.0.3",
     "tslib": "^2.5.0",
-    "vite": "^4.2.1",
-    "vitest": "^0.30.0"
+    "vite": "^4.3.1",
+    "vitest": "^0.30.1"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -133,6 +133,11 @@
       "svelte": "./package/components/core/dialog.svelte",
       "default": "./package/components/core/dialog.svelte"
     },
+    "./components/core/drawer.svelte": {
+      "types": "./package/components/core/drawer.svelte.d.ts",
+      "svelte": "./package/components/core/drawer.svelte",
+      "default": "./package/components/core/drawer.svelte"
+    },
     "./components/core/grid-cell.svelte": {
       "types": "./package/components/core/grid-cell.svelte.d.ts",
       "svelte": "./package/components/core/grid-cell.svelte",
@@ -360,6 +365,9 @@
       "components/core/dialog.svelte": [
         "./package/components/core/dialog.svelte.d.ts"
       ],
+      "components/core/drawer.svelte": [
+        "./package/components/core/drawer.svelte.d.ts"
+      ],
       "components/core/grid-cell.svelte": [
         "./package/components/core/grid-cell.svelte.d.ts"
       ],
@@ -408,6 +416,9 @@
       "components/core/separator.svelte": [
         "./package/components/core/separator.svelte.d.ts"
       ],
+      "components/core/slider.svelte": [
+        "./package/components/core/slider.svelte.d.ts"
+      ],
       "components/core/spacer.svelte": [
         "./package/components/core/spacer.svelte.d.ts"
       ],

package/package/components/composite/calendar.svelte

@@ -1,240 +0,0 @@
-<script>
-  import { _ } from 'svelte-i18n';
-  import Button from '../core/button.svelte';
-  import Icon from '../core/icon.svelte';
-  import Separator from '../core/separator.svelte';
-  import Spacer from '../core/spacer.svelte';
-
-  /** @type {(String|undefined)} */
-  export let value = undefined;
-
-  const dayList = [];
-  const weeks = [];
-  const now = new Date();
-
-  $: date = value ? new Date(value) : now;
-  $: firstDayOfMonth = new Date(date.getUTCFullYear(), date.getUTCMonth(), 1);
-  $: firstDay = new Date(firstDayOfMonth);
-
-  const getWeeks = () => {
-    const cursor = new Date(firstDay);
-
-    // Start from Sunday
-    cursor.setDate(1 - cursor.getUTCDay());
-
-    for (let i = 0; i < 42; i += 1) {
-      const week = Math.floor(i / 7);
-
-      dayList[i] = { day: new Date(cursor) };
-      weeks[week] ||= [];
-      weeks[week][cursor.getUTCDay() % 7] = { day: new Date(cursor) };
-      cursor.setUTCDate(cursor.getUTCDate() + 1);
-    }
-  };
-
-  $: {
-    if (firstDay) {
-      getWeeks();
-    }
-  }
-</script>
-
-<div role="group">
-  <input type="hidden" bind:value />
-  <div class="header">
-    <Button
-      class="ternary"
-      label={firstDay.toLocaleDateString('en', { year: 'numeric', month: 'short' })}
-      aria-haspopup="dialog"
-    >
-      <Icon slot="end-icon" name="arrow_drop_down" />
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <div slot="popup" class="popup-inner" on:click|stopPropagation>
-        <div role="group" aria-label={$_('sui.calendar.year')}>
-          <div class="header">
-            <Button
-              on:click={() => {
-                //
-              }}
-            >
-              <Icon name="chevron_left" label={$_('sui.calendar.previous_decade')} />
-            </Button>
-            <Button
-              on:click={() => {
-                //
-              }}
-            >
-              <Icon name="chevron_right" label={$_('sui.calendar.next_decade')} />
-            </Button>
-          </div>
-          <div class="grid">
-            {#each [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as year}
-              <div>
-                <Button>202{year}</Button>
-              </div>
-            {/each}
-          </div>
-        </div>
-        <Separator orientation="vertical" />
-        <div role="group" aria-label={$_('sui.calendar.month')}>
-          <div class="grid">
-            {#each [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] as month}
-              <div>
-                <Button>
-                  {new Date(date.getUTCFullYear(), month, 10).toLocaleDateString('en', {
-                    month: 'short',
-                  })}
-                </Button>
-              </div>
-            {/each}
-          </div>
-        </div>
-      </div>
-    </Button>
-    <Button
-      on:click={() => {
-        firstDay.setUTCMonth(firstDay.getUTCMonth() - 1);
-        firstDay = firstDay;
-      }}
-    >
-      <Icon name="chevron_left" label={$_('sui.calendar.previous_month')} />
-    </Button>
-    <Button
-      on:click={() => {
-        firstDay.setUTCMonth(firstDay.getUTCMonth() + 1);
-        firstDay = firstDay;
-      }}
-    >
-      <Icon name="chevron_right" label={$_('sui.calendar.next_month')} />
-    </Button>
-  </div>
-  <div class="grid" role="listbox">
-    {#each dayList.slice(0, 7) as { day }}
-      <div class="weekday" role="presentation">
-        {day.toLocaleDateString('en', { weekday: 'narrow' })}
-      </div>
-    {/each}
-    {#each dayList as { day }}
-      <div
-        class:other-month={day.getUTCMonth() !== firstDay.getUTCMonth()}
-        class:today={day.getFullYear() === now.getFullYear() &&
-          day.getMonth() === now.getMonth() &&
-          day.getDate() === now.getDate()}
-      >
-        <Button
-          role="option"
-          aria-selected={false}
-          on:click={() => {
-            [value] = day.toJSON().split('T');
-          }}
-        >
-          {day.getUTCDate()}
-        </Button>
-      </div>
-    {/each}
-  </div>
-  <div class="footer">
-    <Button
-      on:click={() => {
-        value = '';
-      }}
-    >
-      {$_('sui.calendar.clear')}
-    </Button>
-    <Spacer flex={true} />
-    <Button
-      on:click={() => {
-        [value] = now.toJSON().split('T');
-      }}
-    >
-      {$_('sui.calendar.today')}
-    </Button>
-  </div>
-</div>
-
-<style>[role=group] {
-  display: inline-flex;
-  flex-direction: column;
-  gap: 8px;
-  -webkit-user-select: none;
-  user-select: none;
-  cursor: default;
-  font-size: 14px;
-}
-[role=group] > * {
-  flex: none;
-}
-
-.header,
-.footer {
-  display: flex;
-  gap: 8px;
-  height: 24px;
-  align-items: center;
-}
-.header :global(button.secondary),
-.footer :global(button.secondary) {
-  width: 100px;
-  flex: auto;
-}
-
-.grid {
-  display: grid !important;
-  grid-template-columns: repeat(auto-fill, 24px);
-  gap: 2px;
-  width: 180px;
-}
-.grid div {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 24px;
-  height: 24px;
-  font-size: 12px;
-}
-.grid div.weekday {
-  color: var(--secondary-foreground-color);
-}
-.grid div.other-month {
-  color: var(--ternary-foreground-color);
-}
-.grid div.today :global(button) {
-  color: var(--highlight-foreground-color);
-  background-color: var(--primary-accent-color);
-}
-.grid div :global(button) {
-  justify-content: center;
-  width: 100%;
-  height: 24px;
-  border-radius: 50%;
-}
-.grid div :global(button):hover {
-  background-color: var(--highlight-background-color);
-}
-.grid div :global(button):focus {
-  border-width: 1px;
-  border-color: var(--primary-accent-color-lighter);
-}
-
-.footer :global(button) {
-  font-size: 12px;
-}
-
-.popup-inner {
-  display: flex;
-  gap: 8px;
-  padding: 8px;
-}
-.popup-inner [role=group] {
-  gap: 0;
-}
-.popup-inner [role=group] .header {
-  justify-content: center;
-}
-.popup-inner .grid {
-  grid-template-columns: repeat(auto-fill, 48px);
-  width: 98px;
-}
-.popup-inner .grid > div {
-  width: 48px;
-}</style>

package/package/components/composite/calendar.svelte.d.ts

@@ -1,20 +0,0 @@
-/** @typedef {typeof __propDef.props}  CalendarProps */
-/** @typedef {typeof __propDef.events}  CalendarEvents */
-/** @typedef {typeof __propDef.slots}  CalendarSlots */
-export default class Calendar {
-}
-export type CalendarProps = typeof __propDef.props;
-export type CalendarEvents = typeof __propDef.events;
-export type CalendarSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        value?: (string | undefined);
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/package/components/composite/checkbox-group.svelte

@@ -1,43 +0,0 @@
-<!--
-  @component
-  The container of `<Checkbox>`es.
--->
-<script>
-  /**
-   * CSS class name on the button.
-   * @type {String}
-   */
-  // eslint-disable-next-line padding-line-between-statements
-  let className = '';
-
-  export { className as class };
-
-  /**
-   * The `aria-label` attribute on the button element.
-   * @type {String}
-   */
-  export let ariaLabel = '';
-
-  /** @type {('horizontal'|'vertical')} */
-  export let orientation = 'horizontal';
-</script>
-
-<div
-  class="sui checkbox-group {className} {orientation}"
-  role="group"
-  aria-label={ariaLabel}
-  {...$$restProps}
->
-  <slot />
-</div>
-
-<style>.checkbox-group {
-  display: inline-flex;
-  gap: 16px;
-}
-.checkbox-group.horizontal {
-  align-items: center;
-}
-.checkbox-group.vertical {
-  flex-direction: column;
-}</style>

package/package/components/composite/checkbox-group.svelte.d.ts

@@ -1,24 +0,0 @@
-/** @typedef {typeof __propDef.props}  CheckboxGroupProps */
-/** @typedef {typeof __propDef.events}  CheckboxGroupEvents */
-/** @typedef {typeof __propDef.slots}  CheckboxGroupSlots */
-/** The container of `<Checkbox>`es. */
-export default class CheckboxGroup {
-}
-export type CheckboxGroupProps = typeof __propDef.props;
-export type CheckboxGroupEvents = typeof __propDef.events;
-export type CheckboxGroupSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string;
-        orientation?: ('horizontal' | 'vertical');
-        ariaLabel?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};

package/package/components/composite/combobox.svelte

@@ -1,206 +0,0 @@
-<!--
-  @component
-  @see https://w3c.github.io/aria/#combobox
-  @see https://w3c.github.io/aria-practices/#combobox
--->
-<script>
-  import { createEventDispatcher } from 'svelte';
-  import { _ } from 'svelte-i18n';
-  import { writable } from 'svelte/store';
-  import Button from '../core/button.svelte';
-  import Icon from '../core/icon.svelte';
-  import TextInput from '../core/text-input.svelte';
-  import { getRandomId } from '../helpers/util';
-  import Popup from '../util/popup.svelte';
-  import Listbox from './listbox.svelte';
-
-  /**
-   * CSS class name on the button.
-   * @type {String}
-   */
-  let className = '';
-
-  export { className as class };
-
-  /**
-   * Where to show the dropdown menu.
-   * @type {PopupPosition}
-   */
-  export let position = 'bottom-left';
-
-  /**
-   * Whether the textbox is editable.
-   */
-  export let readOnly = false;
-
-  export let disabled = false;
-
-  export let label = '';
-
-  /**
-   * Selected option’s value.
-   * @type {(String|undefined)}
-   */
-  export let value = undefined;
-
-  const dispatch = createEventDispatcher();
-  const id = getRandomId('combobox');
-  let comboboxElement;
-  /** @type {(TextInput| undefined)} */
-  let inputComponent;
-  /** @type {(Popup| undefined)} */
-  let popupComponent;
-  let isPopupOpen = writable(false);
-
-  $: {
-    dispatch('change', { target: inputComponent?.element, value });
-  }
-
-  $: {
-    if (readOnly && value && popupComponent?.element) {
-      window.requestAnimationFrame(() => {
-        label =
-          popupComponent?.element.querySelector('[aria-selected="true"] .label')?.textContent || '';
-      });
-    }
-  }
-</script>
-
-<div class="sui combobox {className}">
-  {#if readOnly}
-    <div
-      class:selected={value !== undefined}
-      role="combobox"
-      {id}
-      tabindex="0"
-      aria-controls="{id}-popup"
-      aria-expanded={$isPopupOpen}
-      aria-disabled={disabled ? true : undefined}
-      aria-haspopup="listbox"
-      aria-activedescendant="selected-option"
-      {...$$restProps}
-      bind:this={comboboxElement}
-    >
-      <div class="label">
-        {value !== undefined ? label || value : $_('sui.combobox.select_an_option')}
-      </div>
-    </div>
-  {:else}
-    <TextInput
-      role="combobox"
-      {id}
-      {value}
-      {disabled}
-      aria-controls="{id}-popup"
-      aria-expanded={$isPopupOpen}
-      aria-disabled={disabled ? true : undefined}
-      aria-haspopup="listbox"
-      aria-activedescendant="selected-option"
-      {...$$restProps}
-      bind:this={inputComponent}
-    />
-  {/if}
-  <Button
-    {disabled}
-    aria-controls="{id}-popup"
-    aria-expanded={$isPopupOpen}
-    aria-disabled={disabled ? true : undefined}
-    class="ternary iconic"
-    on:click={(event) => {
-      event.stopPropagation();
-
-      if (!disabled) {
-        $isPopupOpen = !$isPopupOpen;
-      }
-    }}
-  >
-    <Icon
-      slot="start-icon"
-      name="expand_more"
-      label={$isPopupOpen ? $_('sui._.collapse') : $_('sui._.expand')}
-    />
-  </Button>
-</div>
-<Popup
-  id="{id}-popup"
-  anchor={comboboxElement || inputComponent?.element}
-  {position}
-  bind:open={isPopupOpen}
-  bind:this={popupComponent}
->
-  <Listbox
-    on:click={({ target }) => {
-      if (target.matches('[role="option"]')) {
-        value = target.value;
-      }
-    }}
-  >
-    <slot />
-  </Listbox>
-</Popup>
-
-<style>.combobox {
-  display: flex;
-  align-items: center;
-  position: relative;
-}
-.combobox :global(.icon) {
-  font-size: 20px;
-  opacity: 0.5;
-}
-.combobox > :global(.icon) {
-  position: absolute;
-  inset: 8px auto auto 8px;
-  z-index: 1;
-}
-.combobox > :global(button) {
-  position: absolute;
-  inset: 0 0 auto auto;
-  z-index: 1;
-}
-.combobox div[role=combobox] {
-  display: flex;
-  align-items: center;
-  border-width: 1px;
-  border-color: var(--control-border-color);
-  border-radius: 4px;
-  padding: 0 32px 0 8px;
-  width: 100%;
-  height: var(--input--medium--height);
-  -webkit-user-select: none;
-  user-select: none;
-  cursor: pointer;
-}
-.combobox div[role=combobox]:not(.selected) {
-  font-style: italic;
-}
-.combobox div[role=combobox][aria-disabled=true] {
-  background-color: var(--disabled-background-color);
-  opacity: 0.4;
-  cursor: default;
-}
-.combobox div[role=combobox] .label {
-  display: block;
-  overflow: hidden;
-  width: 100%;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.combobox :global(input) {
-  padding: 0 32px 0 8px;
-  width: 100%;
-}
-.combobox + :global([role="listbox"]) {
-  position: fixed;
-  z-index: 100;
-  border-radius: 4px;
-  box-shadow: 0 8px 16px var(--popup-shadow-color);
-  overflow: auto;
-  background-color: var(--secondary-background-color);
-  backdrop-filter: blur(16px);
-  transition: opacity 100ms 100ms;
-}
-.combobox + :global([role="listbox"]:not(.open)) {
-  opacity: 0;
-  pointer-events: none;
-}</style>

package/package/components/composite/combobox.svelte.d.ts

@@ -1,32 +0,0 @@
-/** @typedef {typeof __propDef.props}  ComboboxProps */
-/** @typedef {typeof __propDef.events}  ComboboxEvents */
-/** @typedef {typeof __propDef.slots}  ComboboxSlots */
-/**
- * @see https://w3c.github.io/aria/#combobox
- * @see https://w3c.github.io/aria-practices/#combobox
- */
-export default class Combobox {
-}
-export type ComboboxProps = typeof __propDef.props;
-export type ComboboxEvents = typeof __propDef.events;
-export type ComboboxSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        label?: string;
-        position?: any;
-        class?: string;
-        disabled?: boolean;
-        value?: (string | undefined);
-        readOnly?: boolean;
-    };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};