milk-lib 0.0.17 → 0.0.18

package/README.md

@@ -10,12 +10,13 @@ Sveltekit library, powered by [`sv`](https://npmjs.com/package/sv).
 + TextInput Box
 + Command
 
++ Icons
++ Select
++ Modal Dialog
+
 - Alert Dialog
 - Accordion
 - Sheet
 - Menu
 - Card
 - Checkbox
-- Select
-- Dialogs
-- Icons

package/dist/components/Icon/IconLoading.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  let { size=16 }: { size?: number } = $props();
+</script>
+
+<div class="loading-indicator" style={`font-size: ${size}px;`}>
+  <span class="loading-indicator-item item-1"></span>
+  <span class="loading-indicator-item item-2"></span>
+  <span class="loading-indicator-item item-3"></span>
+</div>
+
+<style>.loading-indicator {
+  display: inline-flex;
+  align-items: center;
+  width: 1em;
+  height: 1em;
+  padding: 0.375em 0;
+  gap: 0.125em;
+}
+.loading-indicator .loading-indicator-item {
+  width: 0.25em;
+  height: 0.25em;
+  background: var(--icon-base-placeholder);
+  border-radius: 50%;
+  transform-origin: center;
+  will-change: transform, opacity;
+}
+.loading-indicator .loading-indicator-item.item-1 {
+  animation: blink-1 1s ease-in-out 0ms infinite;
+}
+.loading-indicator .loading-indicator-item.item-2 {
+  animation: blink-1 1s ease-in-out 160ms infinite;
+}
+.loading-indicator .loading-indicator-item.item-3 {
+  animation: blink-1 1s ease-in-out 320ms infinite;
+}
+
+@keyframes blink-1 {
+  0% {
+    opacity: 0.5;
+    transform: scale(0.5);
+  }
+  20% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  60% {
+    opacity: 0.5;
+    transform: scale(0.5);
+  }
+  80% {
+    opacity: 0;
+    transform: scale(0);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0);
+  }
+}</style>

package/dist/components/Icon/IconLoading.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    size?: number;
+};
+declare const IconLoading: import("svelte").Component<$$ComponentProps, {}, "">;
+type IconLoading = ReturnType<typeof IconLoading>;
+export default IconLoading;

package/dist/components/Icon/index.d.ts

@@ -0,0 +1 @@
+export { default as IconLoading } from './IconLoading.svelte';

package/dist/components/Icon/index.js

@@ -0,0 +1 @@
+export { default as IconLoading } from './IconLoading.svelte';

package/dist/components/Modal/DialogContent.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { IDialogContentProps } from "./Modal.types";
+
+  let { children }: IDialogContentProps = $props();
+</script>
+
+<div class="DialogContent">
+  {@render children()}
+</div>
+
+<style>.DialogContent {
+  padding: 0.5rem 1.5rem;
+}</style>

package/dist/components/Modal/DialogContent.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IDialogContentProps } from "./Modal.types";
+declare const DialogContent: import("svelte").Component<IDialogContentProps, {}, "">;
+type DialogContent = ReturnType<typeof DialogContent>;
+export default DialogContent;

package/dist/components/Modal/DialogDescription.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { IDialogDescriptionProps } from "./Modal.types";
+  let { children }: IDialogDescriptionProps = $props();
+</script>
+
+<div class="DialogDescription">
+  {@render children()}
+</div>
+
+<style>.DialogDescription {
+  color: var(--text-base-muted);
+  font-size: var(--font-size-md);
+}</style>

package/dist/components/Modal/DialogDescription.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IDialogDescriptionProps } from "./Modal.types";
+declare const DialogDescription: import("svelte").Component<IDialogDescriptionProps, {}, "">;
+type DialogDescription = ReturnType<typeof DialogDescription>;
+export default DialogDescription;

package/dist/components/Modal/DialogFooter.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { IDialogFooterProps } from "./Modal.types";
+
+  let { children }: IDialogFooterProps = $props();
+</script>
+
+<div class="DialogFooter">
+  {@render children()}
+</div>
+
+<style>.DialogFooter {
+  padding: 0.5rem 1.5rem;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}</style>

package/dist/components/Modal/DialogFooter.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IDialogFooterProps } from "./Modal.types";
+declare const DialogFooter: import("svelte").Component<IDialogFooterProps, {}, "">;
+type DialogFooter = ReturnType<typeof DialogFooter>;
+export default DialogFooter;

package/dist/components/Modal/DialogHeader.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { IDialogHeaderProps } from "./Modal.types";
+
+  let { children }: IDialogHeaderProps = $props();
+</script>
+
+<div class="DialogHeader">
+  {@render children()}
+</div>
+
+<style>.DialogHeader {
+  padding: 0.25rem 1.5rem;
+}</style>

package/dist/components/Modal/DialogHeader.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IDialogHeaderProps } from "./Modal.types";
+declare const DialogHeader: import("svelte").Component<IDialogHeaderProps, {}, "">;
+type DialogHeader = ReturnType<typeof DialogHeader>;
+export default DialogHeader;

package/dist/components/Modal/DialogTitle.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { IDialogTitleProps } from './Modal.types';
+  let { children } : IDialogTitleProps = $props();
+</script>
+
+<h2 class="DialogTitle">
+  {@render children()}
+</h2>
+
+<style>.DialogTitle {
+  font-size: var(--font-size-h2);
+  margin: 0 0 0.5em;
+  font-weight: 500;
+  margin: 0 0 0.25rem;
+}</style>

package/dist/components/Modal/DialogTitle.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IDialogTitleProps } from './Modal.types';
+declare const DialogTitle: import("svelte").Component<IDialogTitleProps, {}, "">;
+type DialogTitle = ReturnType<typeof DialogTitle>;
+export default DialogTitle;

package/dist/components/Modal/Modal.svelte

@@ -0,0 +1,122 @@
+<!--
+
+  Tech wrapper for Modal Window with Backdrop, Close Button and handlers
+
+-->
+
+<script lang="ts">
+
+  import Portal from '../Portal/Portal.svelte';
+  import { CloseFillSystem } from 'svelte-remix';
+  import type { IModalProps } from './Modal.types';
+
+  let { isVisible, hideModal, showCloseButton, hideOnEscape, blackout, closeOnBackdrop, children }: IModalProps= $props();
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Escape" && hideOnEscape && isVisible) {
+      hideModal?.();
+    }
+  };
+
+  $effect(() => {
+    if (document) {
+      if (isVisible) {
+        document.addEventListener("keydown", handleKeyDown);
+        document.body.style.overflow = 'hidden';
+      } else {
+        document.removeEventListener("keydown", handleKeyDown);
+        document.body.style.overflow = 'auto';
+      }
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = 'auto';
+    }
+  })
+
+  const backdropClick = (e: MouseEvent) => {
+    if (closeOnBackdrop && (e.target as HTMLElement).classList.contains("Modal-content")) {
+      hideModal?.();
+    }
+  }
+
+</script>
+
+
+<Portal>
+  <div class="Modal">
+    <div class={`Modal-backdrop ${blackout ? "Modal-backdrop-blackout" : ""}`} ></div>
+
+    <div
+      class="Modal-content"
+      onmouseup={backdropClick}
+      role="dialog"
+      tabindex="-1"
+      aria-label="Close dialog"
+    >
+      {#if showCloseButton}
+        <div class="Modal-close-button-wrapper" role="button" tabindex="-1" onmouseup={() => hideModal?.()}>
+          <button class="Modal-close-button">
+            <CloseFillSystem/>
+          </button>
+        </div>
+      {/if}
+
+      {@render children()}
+
+    </div>
+  </div>
+</Portal>
+
+
+<style>.Modal-backdrop {
+  position: fixed;
+  display: flex;
+  z-index: var(--zindex-modal-backdrop);
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--bg-backdrop);
+}
+.Modal-backdrop.Modal-backdrop-blackout {
+  background-color: var(--bg-backdrop-blackout);
+}
+
+.Modal-close-button-wrapper {
+  position: fixed;
+  right: 0.25rem;
+  top: 0.25rem;
+}
+
+.Modal-close-button {
+  background-color: transparent;
+  position: relative;
+  z-index: var(--zindex-modal);
+  font-size: 1rem;
+  height: 2em;
+  width: 2em;
+  cursor: pointer;
+  display: flex;
+  color: white;
+  border-radius: var(--border-radius-button);
+  transition: var(--transition-base);
+  padding: 0.25rem;
+  border: none;
+}
+.Modal-close-button:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.Modal-content {
+  position: fixed;
+  z-index: var(--zindex-modal);
+  top: 0;
+  height: 100vh;
+  width: 100%;
+  overflow-y: scroll;
+  background: transparent;
+  display: flex;
+  padding: 2rem 0;
+}</style>

package/dist/components/Modal/Modal.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IModalProps } from './Modal.types';
+declare const Modal: import("svelte").Component<IModalProps, {}, "">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/components/Modal/Modal.types.d.ts

@@ -0,0 +1,30 @@
+import { type Snippet } from "svelte";
+export interface IModalProps {
+    isVisible?: boolean;
+    hideModal?: () => unknown;
+    showCloseButton?: boolean;
+    hideOnEscape?: boolean;
+    blackout?: boolean;
+    closeOnBackdrop?: boolean;
+    children: Snippet;
+}
+export interface IModalDialogProps {
+    rounded?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    children: Snippet;
+}
+export interface IDialogHeaderProps {
+    children: Snippet;
+}
+export interface IDialogFooterProps {
+    children: Snippet;
+}
+export interface IDialogTitleProps {
+    children: Snippet;
+}
+export interface IDialogDescriptionProps {
+    children: Snippet;
+}
+export interface IDialogContentProps {
+    children: Snippet;
+}

package/dist/components/Modal/Modal.types.js

@@ -0,0 +1 @@
+import {} from "svelte";

package/dist/components/Modal/ModalDialog.svelte

@@ -0,0 +1,33 @@
+<!--
+
+  White panel for Modal Window
+
+-->
+
+<script lang="ts">
+  import { type IModalDialogProps } from './Modal.types';
+  let { children, rounded, size='md' } : IModalDialogProps = $props();
+</script>
+
+<div class={`ModalDialog ModalDialog-${size}`} style={`border-radius: ${rounded ? 'var(--border-radius-window)' : '0'}`}>
+  {@render children()}
+</div>
+
+<style>.ModalDialog {
+  padding: 1rem 0;
+  background-color: white;
+  width: 440px;
+  max-width: 100%;
+  position: relative;
+  margin: auto;
+  z-index: var(--zindex-modal);
+  box-shadow: 0 0 200px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+}
+.ModalDialog.ModalDialog-sm {
+  width: 380px;
+}
+.ModalDialog.ModalDialog-lg {
+  width: 640px;
+}</style>

package/dist/components/Modal/ModalDialog.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IModalDialogProps } from './Modal.types';
+declare const ModalDialog: import("svelte").Component<IModalDialogProps, {}, "">;
+type ModalDialog = ReturnType<typeof ModalDialog>;
+export default ModalDialog;

package/dist/components/Modal/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Modal } from './Modal.svelte';
+export { default as ModalDialog } from './ModalDialog.svelte';
+export { default as DialogTitle } from './DialogTitle.svelte';
+export { default as DialogHeader } from './DialogHeader.svelte';
+export { default as DialogDescription } from './DialogDescription.svelte';
+export { default as DialogContent } from './DialogContent.svelte';
+export { default as DialogFooter } from './DialogFooter.svelte';

package/dist/components/Modal/index.js

@@ -0,0 +1,7 @@
+export { default as Modal } from './Modal.svelte';
+export { default as ModalDialog } from './ModalDialog.svelte';
+export { default as DialogTitle } from './DialogTitle.svelte';
+export { default as DialogHeader } from './DialogHeader.svelte';
+export { default as DialogDescription } from './DialogDescription.svelte';
+export { default as DialogContent } from './DialogContent.svelte';
+export { default as DialogFooter } from './DialogFooter.svelte';

package/dist/components/Portal/Portal.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { onMount, onDestroy, type Snippet } from 'svelte';
+	let ref: Node;
+	let portal: Element | null = null;
+
+	interface IPortalProps {
+		children: Snippet;
+	}
+
+	let { children } : IPortalProps = $props();
+
+	onMount(() => {
+		portal = document.createElement('div');
+		portal.className = 'portal';
+		document.body.appendChild(portal);
+		portal.appendChild(ref);
+	});
+
+	onDestroy(() => {
+		if (portal) {
+			document.body.removeChild(portal);
+		}
+	});
+</script>
+
+
+<div class="portal-clone">
+	<div bind:this={ref}>
+		{@render children?.()}
+	</div>
+</div>
+
+<style>
+  .portal-clone {
+    display: none;
+  }
+</style>

package/dist/components/Portal/Portal.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Snippet } from 'svelte';
+interface IPortalProps {
+    children: Snippet;
+}
+declare const Portal: import("svelte").Component<IPortalProps, {}, "">;
+type Portal = ReturnType<typeof Portal>;
+export default Portal;

package/dist/components/Portal/index.d.ts

@@ -0,0 +1 @@
+export * as Portal from './Portal.svelte';

package/dist/components/Portal/index.js

@@ -0,0 +1 @@
+export * as Portal from './Portal.svelte';

package/dist/components/Select/Select.svelte

@@ -0,0 +1,258 @@
+<!--
+  Select
+-->
+
+<script lang="ts">
+
+  import type {ISelectGroupData, ISelectItem, ISelectProps} from './Select.types';
+  import { ArrowDownSLineArrows } from 'svelte-remix';
+
+  import {
+    CommandRoot,
+    CommandList,
+    CommandGroup,
+    CommandItem,
+    CommandInput,
+    Menu,
+    TextInputBlock,
+    type TextInputInstance,
+    IconLoading
+  } from '../..';
+
+  let {
+    options,
+    value = $bindable(),
+    placeholder,
+    disabled,
+    fullWidthMenu,
+    minWidthMenu,
+    menuGap,
+    menuMaxHeight,
+    searchable=true
+  }: ISelectProps = $props();
+
+  const menuId = `select-menu-${crypto.randomUUID()}`;
+
+  let currentTitle = $derived<string>(value?.title || '');
+  // Нужен для того, чтоб позиционировать Menu относительно parent элемента
+  let menuParentElement = $state<HTMLDivElement | null>(null);
+  let isMenuVisible = $state<boolean>(false);
+
+  let textInputBlock: TextInputInstance;
+  let flatSelect = $state<boolean>(false);
+
+  // С помощью этой функции я различаю разные типы options
+  const isGroupArray = (options: ISelectItem[] | ISelectGroupData[]) =>
+    options.length > 0 && "heading" in options[0];
+
+  // Определяем тип options - Promise или значение
+  let innerGroupOptions = $state<ISelectGroupData[] | null>(null);
+  let innerOptions = $state<ISelectItem[] | null>(null);
+  let isLoadingOptions = $state(false);
+  let loadError = $state<unknown>(null);
+
+  const normalizeOptions = (opt: ISelectGroupData[] | ISelectItem[]) => {
+    if (isGroupArray(opt)) {
+      innerGroupOptions = opt as ISelectGroupData[];
+      innerOptions = null;
+      flatSelect = false;
+    } else {
+      innerOptions = opt as ISelectItem[];
+      innerGroupOptions = null;
+      flatSelect = true;
+    }
+    isLoadingOptions = false;
+  }
+
+  let requestId = 0;
+  $effect(() => {
+    const currentId = ++requestId;
+    isLoadingOptions = true;
+
+
+    (async () => {
+      try {
+        const resolved = await options as ISelectItem[] | ISelectGroupData[];
+        // если за это время options сменился — выходим
+        if (currentId !== requestId) return;
+        normalizeOptions(resolved);
+      } catch (err) {
+        if (currentId !== requestId) return;
+        loadError = err;
+        innerOptions = null;
+        innerGroupOptions = null;
+      } finally {
+        if (currentId === requestId) isLoadingOptions = false;
+      }
+    })();
+  });
+
+
+  const showMenu = () => (isMenuVisible = true);
+  const hideMenu = () => (isMenuVisible = false);
+
+  const focusHandler = () => {
+    if (!isMenuVisible) {
+      showMenu();
+    }
+  };
+
+  const updateValue = (newValue: ISelectItem) => {
+    value = newValue;
+  }
+
+  const handleItemClick = (item: ISelectItem) => {
+    updateValue({
+      title: item.title,
+      value: item.value
+    });
+    textInputBlock.focus();
+    hideMenu();
+  }
+
+  const handleCommandInputKeyDown = (e: KeyboardEvent) => {
+    if (disabled || isLoadingOptions) return;
+
+    if (e.key === "Tab") {
+      textInputBlock.focus();
+      hideMenu();
+    } else if (e.key === 'Escape') {
+      if (isMenuVisible) {
+        textInputBlock.focus();
+        hideMenu();
+      }
+    }
+  }
+
+  const handleControlKeyDown = (e: KeyboardEvent) => {
+    switch (e.key) {
+      case 'Enter':
+      case ' ':
+      case 'ArrowDown':
+      case 'ArrowUp': {
+        if (!isMenuVisible) {
+          showMenu();
+          e.preventDefault();
+        }
+        return;
+      }
+    }
+  }
+
+  const handleControlClick = () => {
+    if (!isMenuVisible) {
+      showMenu();
+    }
+  }
+
+  const handleClear = () => {
+    hideMenu();
+    value = null;
+  }
+
+</script>
+
+<div class={`dropdown-toggler ${isMenuVisible ? "dropdown-toggler-hover" : ""}`}
+   bind:this={menuParentElement}
+>
+
+  <TextInputBlock
+    disabled={disabled || isLoadingOptions}
+    readonly
+    onFocus={focusHandler}
+    onKeyDown={handleControlKeyDown}
+    onClear={handleClear}
+    pseudoFocus={isMenuVisible}
+    onClick={handleControlClick}
+    variant="contained"
+    size="lg"
+    placeholder={placeholder}
+    bind:value={currentTitle}
+    bind:this={textInputBlock}
+
+    ariaHasPopup="listbox"
+    ariaExpanded={isMenuVisible}
+    ariaControls={menuId}
+  >
+    {#snippet suffix()}
+      <div class="suffix-wrapper">
+        {#if isLoadingOptions}
+          <IconLoading/>
+        {/if}
+        <ArrowDownSLineArrows size="1em" onclick={(e: MouseEvent) => { e.stopPropagation(); handleControlClick(); }} />
+      </div>
+    {/snippet}
+  </TextInputBlock>
+
+  <Menu
+    id={menuId}
+    parentElement={menuParentElement}
+    appearanceOnHover={false}
+    isVisible={isMenuVisible}
+    hideMenu={hideMenu}
+    minWidth={minWidthMenu}
+    fullWidth={fullWidthMenu}
+    {menuGap}
+    maxHeight={menuMaxHeight}
+  >
+    <div class="menu" role="listbox">
+      <CommandRoot maxHeight={menuMaxHeight} >
+        <CommandInput onKeyDown={handleCommandInputKeyDown} autoFocus={true} visible={searchable} placeholder={placeholder} ></CommandInput>
+        <CommandList>
+          {#if isLoadingOptions}
+            <div class="px-3 py-2">Loading...</div>
+          {:else if loadError}
+            <div class="px-3 py-2 text-danger">Load options error</div>
+          {:else}
+
+            {#if flatSelect}
+              {#if innerOptions}
+                <CommandGroup>
+                  {#each innerOptions as option (option.value)}
+                    <CommandItem onClick={ () => handleItemClick(option) }>{option.title}</CommandItem>
+                  {/each}
+                </CommandGroup>
+              {/if}
+            {:else}
+              {#if innerGroupOptions}
+                {#each innerGroupOptions as option (option.heading)}
+                  <CommandGroup heading={option.heading}>
+                    {#each option.items as item (item.value)}
+                      <CommandItem onClick={ () => handleItemClick(item) }>{item.title}</CommandItem>
+                    {/each}
+                  </CommandGroup>
+                {/each}
+              {/if}
+            {/if}
+
+          {/if}
+        </CommandList>
+
+      </CommandRoot>
+    </div>
+  </Menu>
+
+</div>
+
+
+<style>.dropdown-toggler {
+  color: var(--text-base-placeholder);
+  transition: color 0.3s ease-in-out;
+  padding: 0;
+  margin: 0 0 1rem;
+  display: flex;
+  width: 100%;
+  position: relative;
+}
+.dropdown-toggler:hover {
+  color: var(--text-base-main);
+}
+.dropdown-toggler.dropdown-toggler-hover {
+  color: var(--text-base-main);
+}
+
+.suffix-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}</style>

package/dist/components/Select/Select.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ISelectProps } from './Select.types';
+declare const Select: import("svelte").Component<ISelectProps, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/Select/Select.types.d.ts

@@ -0,0 +1,19 @@
+export interface ISelectItem {
+    title: string;
+    value: string;
+}
+export interface ISelectGroupData {
+    heading: string;
+    items: ISelectItem[];
+}
+export interface ISelectProps {
+    searchable?: boolean;
+    options: ISelectGroupData[] | ISelectItem[] | Promise<(ISelectGroupData[] | ISelectItem[])>;
+    value: ISelectItem | null;
+    placeholder?: string;
+    disabled?: boolean;
+    fullWidthMenu?: boolean;
+    minWidthMenu?: number;
+    menuGap?: number;
+    menuMaxHeight?: number;
+}

package/dist/components/Select/Select.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Select/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Select } from './Select.svelte';
+export * from './Select.types';

package/dist/components/Select/index.js

@@ -0,0 +1,2 @@
+export { default as Select } from './Select.svelte';
+export * from './Select.types';

package/dist/components/TextInput/TextInput.svelte

@@ -128,6 +128,7 @@
   border-right-width: var(--border-right-width);
   border-left-width: var(--border-left-width);
   transition: var(--transition);
+  color: var(--text-color);
 }
 .TextInput:focus {
   border-color: var(--border-color-focus);

package/dist/components/TextInputBlock/TextInputBlock.svelte

@@ -55,18 +55,20 @@
   />
 
 
-  {#if onClear && !disabled && value !== ''}
-    <!-- I deliberately excluded this button from tabindex -->
-    <button tabindex="-1" type="button" class="clear-value" style={`right: ${suffixWidth + 12}px;`} onmouseup={handleClear}>
-      <CloseCircleFillSystem size="1em" />
-    </button>
-  {/if}
+  <div class="suffix">
+    {#if onClear && !disabled && value !== ''}
+      <!-- I deliberately excluded this button from tabindex -->
+      <button tabindex="-1" type="button" class="clear-value" style={`right: ${suffixWidth + 12}px;`} onmouseup={handleClear}>
+        <CloseCircleFillSystem size="1em" />
+      </button>
+    {/if}
 
-  {#if suffix}
-    <div class="suffix" bind:this={suffixEl}>
-      {@render suffix()}
-    </div>
-  {/if}
+    {#if suffix}
+      <div class="suffix-el" bind:this={suffixEl}>
+        {@render suffix()}
+      </div>
+    {/if}
+  </div>
 </div>
 
 <style>.TextInputBlock {
@@ -82,6 +84,7 @@
   height: 100%;
   display: flex;
   align-items: center;
+  gap: 0.25rem;
 }
 .TextInputBlock .prefix {
   left: 0;
@@ -92,18 +95,19 @@
   padding-right: 0.75em;
 }
 .TextInputBlock .clear-value {
-  position: absolute;
-  z-index: 1;
-  top: 4px;
-  bottom: 4px;
   height: calc(100% - 8px);
   cursor: pointer;
   border: 1px solid transparent;
   border-radius: 8px;
   padding: 0 4px;
+  background: transparent;
+  display: inline-flex;
+  align-items: center;
+}
+.TextInputBlock .clear-value:hover {
+  background: var(--bg-base-100);
 }
 .TextInputBlock .clear-value:focus {
   outline: none;
-  background-color: #EDEEF0;
-  border-color: #D3D5DC;
+  background: var(--bg-base-200);
 }</style>

package/dist/components/ThemeProvider/ThemeDefault.js

@@ -1,4 +1,5 @@
 export const themeDefault = {
+    '--font-base': `"Onest", sans-serif`,
     '--panel-base': '#f3f5f6',
     '--panel-primary': '#FFF9E5',
     '--panel-success': '#DDF9E6',
@@ -13,6 +14,7 @@ export const themeDefault = {
     '--line-danger': '#FBC4BF',
     '--line-secondary': '#BEB6F9',
     '--bg-base': '#fff',
+    '--bg-backdrop': 'rgba(0,0,0,0.5)',
     '--bg-base-100': '#EDEEF0',
     '--bg-base-200': '#E2E4E8',
     '--bg-base-300': '#D3D5DC',
@@ -92,4 +94,5 @@ export const themeDefault = {
     '--line-height-md': '20px',
     '--font-size-lg': '16px',
     '--line-height-lg': '24px',
+    '--font-size-h2': '20px',
 };

package/dist/components/ThemeProvider/ThemeProvider.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-
+  import { browser } from '$app/environment';
 	import type { Snippet } from 'svelte';
   import type { ITheme } from './ThemeProvider.types'
 
@@ -11,9 +11,17 @@
       .join(';');
   });
 
+  $effect(() => {
+    if (!browser || !theme) return;
+
+    for (const [k, v] of Object.entries(theme)) {
+      // ключи должны быть вида `--color-bg`
+      document.documentElement.style.setProperty(k, String(v));
+    }
+  });
 </script>
 
-<div style={cssVars} class="ThemeProvider">
+<!-- <div style={cssVars} class="ThemeProvider"> -->
   {@render children()}
-</div>
+<!-- </div> -->
 

package/dist/components/ThemeProvider/ThemeProvider.types.d.ts

@@ -1,5 +1,6 @@
 export type ThemeVars = Record<string, string | number>;
 export interface ITheme {
+    '--font-base': string;
     '--panel-base': string;
     '--panel-primary': string;
     '--panel-success': string;
@@ -14,6 +15,7 @@ export interface ITheme {
     '--line-danger': string;
     '--line-secondary': string;
     '--bg-base': string;
+    '--bg-backdrop': string;
     '--bg-base-100': string;
     '--bg-base-200': string;
     '--bg-base-300': string;
@@ -93,4 +95,5 @@ export interface ITheme {
     '--line-height-md': string;
     '--font-size-lg': string;
     '--line-height-lg': string;
+    '--font-size-h2': string;
 }

package/dist/components/index.d.ts

@@ -11,3 +11,7 @@ export * from './TextInput';
 export * from './TextInputMilk';
 export * from './TextInputBlock';
 export * from './Command';
+export * from './Portal';
+export * from './Modal';
+export * from './Select';
+export * from './Icon';

package/dist/components/index.js

@@ -11,3 +11,7 @@ export * from './TextInput';
 export * from './TextInputMilk';
 export * from './TextInputBlock';
 export * from './Command';
+export * from './Portal';
+export * from './Modal';
+export * from './Select';
+export * from './Icon';

package/dist/styles/index.scss

@@ -1 +1,6 @@
-@forward "./typography.scss";
+@forward "./root.scss";
+@forward "./typography.scss";
+
+html, body {
+  color: var(--text-base-main);
+}

package/dist/styles/root.scss

@@ -0,0 +1,117 @@
+// Please sync this with ThemeProvider
+
+:root {
+  --font-base: "Geist", sans-serif;
+
+  --panel-base: #f3f5f6;
+  --panel-primary: #FFF9E5;
+  --panel-success: #DDF9E6;
+  --panel-danger: #FFEDEB;
+  --panel-secondary: #F6F5FF;
+
+  --line-base: #D3D5DC;
+  --line-control-100: #ABABB0;
+  --line-base-emp: #151617;
+  --line-primary: #FFE27B;
+  --line-primary-emp: #F0C013;
+  --line-success: #B6F7CB;
+  --line-danger: #FBC4BF;
+  --line-secondary: #BEB6F9;
+
+  --bg-base: #fff;
+  --bg-backdrop: rgba(0,0,0,0.5);
+
+  --bg-base-100: #EDEEF0;
+  --bg-base-200: #E2E4E8;
+  --bg-base-300: #D3D5DC;
+  --bg-base-emp-100: #28282B;
+  --bg-base-emp-200: #1E1F21;
+  --bg-base-emp-300: #151617;
+
+  --bg-primary-100: #FFF6D6;
+  --bg-primary-200: #FCF0C5;
+  --bg-primary-300: #FAEBB4;
+  --bg-primary-emp-100: #FFCC14;
+  --bg-primary-emp-200: #F7C614;
+  --bg-primary-emp-300: #F0C013;
+
+  --bg-success-100: #C3F6D4;
+  --bg-success-200: #B1F0C6;
+  --bg-success-300: #9FEBB9;
+  --bg-success-emp-100: #1BB44C;
+  --bg-success-emp-200: #12AA43;
+  --bg-success-emp-300: #0DA13C;
+
+  --bg-danger-100: #FCDFDC;
+  --bg-danger-200: #FAD4CF;
+  --bg-danger-300: #F7C7C1;
+  --bg-danger-emp-100: #F35749;
+  --bg-danger-emp-200: #ED4637;
+  --bg-danger-emp-300: #EB3A2A;
+
+  --bg-secondary-100: #E8E6FC;
+  --bg-secondary-200: #DCD9F9;
+  --bg-secondary-300: #D1CCF9;
+  --bg-secondary-emp-100: #5A49F3;
+  --bg-secondary-emp-200: #4F3DF2;
+  --bg-secondary-emp-300: #4431F5;
+
+  --text-base-main: #26272B;
+  --text-base-inv: #fff;
+  --text-base-muted: #515256;
+  --text-base-inv-muted: #C1C3CA;
+  --text-base-placeholder: #9C9EA3;
+  --text-base-link: #6846E1;
+  --text-secondary-main: #2F19FB;
+  --text-primary-main: #C29B09;
+  --text-success-main: #077129;
+  --text-danger-main: #C42A1A;
+
+  --icon-base-main: #26272B;
+  --icon-base-inv: #fff;
+  --icon-base-muted: #515256;
+  --icon-base-inv-muted: #C1C3CA;
+  --icon-base-placeholder: #9C9EA3;
+  --icon-base-link: #6846E1;
+  --icon-secondary-main: #2F19FB;
+  --icon-primary-main: #C29B09;
+  --icon-success-main: #077129;
+  --icon-danger-main: #C42A1A;
+
+  --border-radius-button-sm: 5px;
+  --border-radius-button: 8px;
+  --border-radius-panel: 12px;
+  --border-radius-window: 20px;
+
+  --stroke-base: 1px;
+  --stroke-button: var(--stroke-base);
+
+  --spacing-xs-1: 4;
+  --spacing-xs-1-5: 6;
+  --spacing-sm-2: 8;
+  --spacing-md-3: 12;
+  --spacing-lg-5: 20;
+  --spacing-xl-10: 40;
+
+  --zindex-dropdown: 1060;
+  --zindex-sticky: 1020;
+  --zindex-fixed: 1030;
+  --zindex-sheet: 1035;
+  --zindex-offcanvas-backdrop: 1040;
+  --zindex-offcanvas: 1045;
+  --zindex-modal-backdrop: 1050;
+  --zindex-modal: 1055;
+  --zindex-popover: 1070;
+  --zindex-tooltip: 1080;
+  --zindex-toast: 1090;
+
+  --font-size-sm: 12px;
+  --line-height-sm: 14px;
+  --font-size-md: 14px;
+  --line-height-md: 20px;
+  --font-size-lg: 16px;
+  --line-height-lg: 24px;
+
+  --font-size-h2: 20px;
+}
+

package/dist/styles/typography.scss

@@ -1,6 +1,11 @@
 .onest-font-default {
-  font-family: "Onest", sans-serif;
+  font-family: "Geist", sans-serif;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
+}
+
+html, body {
+  font-family: var(--font-base);
+  color: var(--text-base-main);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "milk-lib",
 	"license": "MIT",
-	"version": "0.0.17",
+	"version": "0.0.18",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",