@coyalabs/bts-style 1.3.15 → 1.3.17

package/dist/Components/InputBox.svelte.d.ts

@@ -6,10 +6,18 @@ type InputBox = SvelteComponent<{
     borderRadiusBottomLeft?: string | undefined;
     borderRadiusBottomRight?: string | undefined;
     icon?: string | null | undefined;
+    blur?: (() => void) | undefined;
+    focus?: (() => void) | undefined;
+    resize?: "none" | "both" | "horizontal" | "vertical" | undefined;
     iconSize?: string | undefined;
+    disabled?: boolean | undefined;
     value?: string | undefined;
     placeholder?: string | undefined;
     type?: string | undefined;
+    multiline?: boolean | undefined;
+    rows?: number | undefined;
+    expandOnNewline?: boolean | undefined;
+    newlineOnCtrlEnter?: boolean | undefined;
     autofocus?: boolean | undefined;
 }, {
     input: Event;
@@ -21,6 +29,9 @@ type InputBox = SvelteComponent<{
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
+} & {
+    focus: () => void;
+    blur: () => void;
 };
 declare const InputBox: $$__sveltets_2_IsomorphicComponent<{
     theme?: import("../Base/variantTypes.js").BaseContainerVariant | undefined;
@@ -29,10 +40,18 @@ declare const InputBox: $$__sveltets_2_IsomorphicComponent<{
     borderRadiusBottomLeft?: string | undefined;
     borderRadiusBottomRight?: string | undefined;
     icon?: string | null | undefined;
+    blur?: (() => void) | undefined;
+    focus?: (() => void) | undefined;
+    resize?: "none" | "both" | "horizontal" | "vertical" | undefined;
     iconSize?: string | undefined;
+    disabled?: boolean | undefined;
     value?: string | undefined;
     placeholder?: string | undefined;
     type?: string | undefined;
+    multiline?: boolean | undefined;
+    rows?: number | undefined;
+    expandOnNewline?: boolean | undefined;
+    newlineOnCtrlEnter?: boolean | undefined;
     autofocus?: boolean | undefined;
 }, {
     input: Event;
@@ -42,7 +61,10 @@ declare const InputBox: $$__sveltets_2_IsomorphicComponent<{
     keydown: KeyboardEvent;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {
+    focus: () => void;
+    blur: () => void;
+}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/Components/Popup/AlertPopup.svelte

@@ -14,6 +14,14 @@
     onOk();
     popupStore.close();
   }
+
+  export function confirm() {
+    handleOk();
+  }
+
+  export function cancel() {
+    popupStore.close();
+  }
 </script>
 
 <div class="buttons">

package/dist/Components/Popup/AlertPopup.svelte.d.ts

@@ -1,18 +1,28 @@
 export default AlertPopup;
 type AlertPopup = SvelteComponent<{
+    cancel?: (() => void) | undefined;
+    confirm?: (() => void) | undefined;
     onOk?: (() => void) | undefined;
     okText?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
+} & {
+    confirm: () => void;
+    cancel: () => void;
 };
 declare const AlertPopup: $$__sveltets_2_IsomorphicComponent<{
+    cancel?: (() => void) | undefined;
+    confirm?: (() => void) | undefined;
     onOk?: (() => void) | undefined;
     okText?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {
+    confirm: () => void;
+    cancel: () => void;
+}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/Components/Popup/ConfirmPopup.svelte

@@ -25,6 +25,14 @@
     onCancel();
     popupStore.close();
   }
+
+  export function confirm() {
+    handleConfirm();
+  }
+
+  export function cancel() {
+    handleCancel();
+  }
 </script>
 
 <div class="buttons">

package/dist/Components/Popup/ConfirmPopup.svelte.d.ts

@@ -1,22 +1,32 @@
 export default ConfirmPopup;
 type ConfirmPopup = SvelteComponent<{
+    cancel?: (() => void) | undefined;
     onConfirm?: (() => void) | undefined;
     onCancel?: (() => void) | undefined;
     confirmText?: string | undefined;
     cancelText?: string | undefined;
+    confirm?: (() => void) | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
+} & {
+    confirm: () => void;
+    cancel: () => void;
 };
 declare const ConfirmPopup: $$__sveltets_2_IsomorphicComponent<{
+    cancel?: (() => void) | undefined;
     onConfirm?: (() => void) | undefined;
     onCancel?: (() => void) | undefined;
     confirmText?: string | undefined;
     cancelText?: string | undefined;
+    confirm?: (() => void) | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {
+    confirm: () => void;
+    cancel: () => void;
+}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/Components/Popup/Popup.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { tick } from 'svelte';
   import { fade, fly } from 'svelte/transition';
   import { backOut } from 'svelte/easing';
   import { popupStore } from './popupStore.js';
@@ -9,11 +10,85 @@
   import { VARIANT_FILLED } from '../../Base/variantTypes.js';
   
   // Subscribe to the actual stack
-  /** @type {Array<{id: string, title: string, subtitle?: string, component: any, props: any}>} */
+  /** @type {Array<{id: string, title: string, subtitle?: string, component: any, props: any, widthRatio: number}>} */
   let popupStack = [];
   popupStore.stack.subscribe((s) => {
     popupStack = s;
   });
+
+  /** @type {{submit?: () => void, confirm?: () => void, cancel?: () => void, focusInput?: () => void} | null} */
+  let activePopupInstance = null;
+
+  /** @type {HTMLDivElement | null} */
+  let activeDialogRef = null;
+
+  function focusActivePopup() {
+    void tick().then(() => {
+      if (popupStack.length === 0) {
+        return;
+      }
+
+      if (activePopupInstance?.focusInput) {
+        activePopupInstance.focusInput();
+        return;
+      }
+
+      activeDialogRef?.focus({ preventScroll: true });
+    });
+  }
+
+  /**
+   * @param {KeyboardEvent} event
+   */
+  function handlePopupKeydown(event) {
+    const textareaAllowsEnterEvents = event.target instanceof HTMLTextAreaElement
+      && event.target.dataset.newlineOnCtrlEnter === 'true';
+
+    if (event.defaultPrevented || event.isComposing || event.altKey || event.ctrlKey || event.metaKey) {
+      if (!(textareaAllowsEnterEvents && event.defaultPrevented && !event.ctrlKey && !event.metaKey && !event.altKey && !event.isComposing)) {
+        return;
+      }
+    }
+
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      if (activePopupInstance?.cancel) {
+        activePopupInstance.cancel();
+      } else {
+        popupStore.close();
+      }
+      return;
+    }
+
+    if (event.key !== 'Enter') {
+      return;
+    }
+
+    if (event.shiftKey) {
+      return;
+    }
+
+    if (event.target instanceof HTMLTextAreaElement && !textareaAllowsEnterEvents) {
+      return;
+    }
+
+    if (event.target instanceof Element && event.target.closest('button, a, [role="button"]')) {
+      return;
+    }
+
+    event.preventDefault();
+
+    if (activePopupInstance?.submit) {
+      activePopupInstance.submit();
+      return;
+    }
+
+    activePopupInstance?.confirm?.();
+  }
+
+  $: if (popupStack.length > 0) {
+    focusActivePopup();
+  }
 </script>
 
 {#if popupStack.length > 0}
@@ -24,15 +99,18 @@
       <div 
         class="dialog"
         class:background={!isTop}
+        bind:this={activeDialogRef}
         style="
           --scale: {isTop ? 1 : Math.max(0.85, 1 - depth * 0.08)};
           --brightness: {isTop ? 1 : Math.max(0.4, 1 - depth * 0.3)};
           --y-offset: {isTop ? 0 : -depth * 20}px;
+          --popup-width-ratio: {popup.widthRatio || 1};
           z-index: {index};
         "
         in:fly|global={{ y: 40, duration: 350, easing: backOut }}
         out:fly|global={{ y: 20, duration: 200 }}
         on:click|stopPropagation
+        on:keydown={handlePopupKeydown}
         on:keydown|stopPropagation
         role="dialog"
         tabindex="-1"
@@ -45,7 +123,7 @@
             </div>
           </header>
           <main>
-            <svelte:component this={popup.component} {...popup.props} />
+            <svelte:component bind:this={activePopupInstance} this={popup.component} {...popup.props} />
           </main>
         </BaseContainer>
       </div>
@@ -66,7 +144,11 @@
 
   .dialog {
     position: absolute;
-    width: min(90%, 600px);
+    width: min(
+      calc(100vw - 2rem),
+      calc(90vw * var(--popup-width-ratio)),
+      calc(600px * var(--popup-width-ratio))
+    );
     max-height: 80vh;
     zoom: 0.92;
     display: flex;
@@ -76,6 +158,11 @@
     transition: transform 0.3s ease, filter 0.3s ease;
   }
 
+  .dialog:focus,
+  .dialog:focus-visible {
+    outline: none;
+  }
+
   .dialog.background {
     pointer-events: none;
   }

package/dist/Components/Popup/PromptPopup.svelte

@@ -26,6 +26,9 @@
 
   let value = '';
 
+  /** @type {import('../InputBox.svelte').default | null} */
+  let inputRef = null;
+
   function handleSubmit() {
     onSubmit(value);
     popupStore.close();
@@ -35,13 +38,25 @@
     onCancel();
     popupStore.close();
   }
+
+  export function submit() {
+    handleSubmit();
+  }
+
+  export function cancel() {
+    handleCancel();
+  }
+
+  export function focusInput() {
+    inputRef?.focus();
+  }
 </script>
 
 <div class="prompt">
   {#if label}
     <BaseText variant="content">{label}</BaseText>
   {/if}
-  <InputBox bind:value {placeholder} autofocus={true} />
+  <InputBox bind:this={inputRef} bind:value {placeholder} autofocus={true} />
   <div class="buttons">
     <Button theme={VARIANT_PRIMARY} actionIcon={icons.check} on:click={handleSubmit}>{submitText}</Button>
     <Button theme={VARIANT_SECONDARY} actionIcon={icons.crossb} on:click={handleCancel}>{cancelText}</Button>

package/dist/Components/Popup/PromptPopup.svelte.d.ts

@@ -1,26 +1,40 @@
 export default PromptPopup;
 type PromptPopup = SvelteComponent<{
     label?: string | undefined;
+    cancel?: (() => void) | undefined;
+    submit?: (() => void) | undefined;
     placeholder?: string | undefined;
     onCancel?: (() => void) | undefined;
     cancelText?: string | undefined;
     onSubmit?: ((value: string) => void) | undefined;
     submitText?: string | undefined;
+    focusInput?: (() => void) | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
+} & {
+    submit: () => void;
+    cancel: () => void;
+    focusInput: () => void;
 };
 declare const PromptPopup: $$__sveltets_2_IsomorphicComponent<{
     label?: string | undefined;
+    cancel?: (() => void) | undefined;
+    submit?: (() => void) | undefined;
     placeholder?: string | undefined;
     onCancel?: (() => void) | undefined;
     cancelText?: string | undefined;
     onSubmit?: ((value: string) => void) | undefined;
     submitText?: string | undefined;
+    focusInput?: (() => void) | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {
+    submit: () => void;
+    cancel: () => void;
+    focusInput: () => void;
+}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/Components/Popup/popupStore.d.ts

@@ -1,10 +1,18 @@
 export namespace popupStore {
     let subscribe: (this: void, run: import("svelte/store").Subscriber<{
+        isOpen: boolean;
+        title: string;
+        subtitle: string;
+        component: any;
+        props: {};
+        widthRatio?: undefined;
+    } | {
         isOpen: boolean;
         title: string;
         subtitle: string;
         component: any;
         props: any;
+        widthRatio: number;
     }>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
     namespace stack {
         let subscribe_1: (this: void, run: import("svelte/store").Subscriber<PopupState[]>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
@@ -18,10 +26,12 @@ export namespace popupStore {
         onCancel?: (() => void) | undefined;
         confirmText?: string | undefined;
         cancelText?: string | undefined;
+        popupWidthRatio?: number | undefined;
     }): void;
     function alert(title: string, message: string, options?: {
         onOk?: (() => void) | undefined;
         okText?: string | undefined;
+        popupWidthRatio?: number | undefined;
     }): void;
     function prompt(title: string, message: string, options?: {
         onSubmit?: ((value: string) => void) | undefined;
@@ -30,6 +40,7 @@ export namespace popupStore {
         submitText?: string | undefined;
         cancelText?: string | undefined;
         label?: string | undefined;
+        popupWidthRatio?: number | undefined;
     }): void;
 }
 export type PopupState = {
@@ -38,4 +49,5 @@ export type PopupState = {
     component: any;
     props: any;
     id: string;
+    widthRatio: number;
 };

package/dist/Components/Popup/popupStore.js

@@ -10,8 +10,56 @@ import PromptPopup from './PromptPopup.svelte';
  * @property {any} component
  * @property {any} props
  * @property {string} id
+ * @property {number} widthRatio
  */
 
+/**
+ * @param {unknown} value
+ */
+function normalizePopupWidthRatio(value) {
+  const ratio = Number(value);
+  return Number.isFinite(ratio) && ratio > 0 ? ratio : 1;
+}
+
+/**
+ * @param {any} rawProps
+ */
+function splitPopupProps(rawProps = {}) {
+  if (!rawProps || typeof rawProps !== 'object' || Array.isArray(rawProps)) {
+    return {
+      props: {},
+      widthRatio: 1
+    };
+  }
+
+  const { popupWidthRatio, ...props } = rawProps;
+
+  return {
+    props,
+    widthRatio: normalizePopupWidthRatio(popupWidthRatio)
+  };
+}
+
+/**
+ * @param {string} title
+ * @param {string} subtitle
+ * @param {any} component
+ * @param {any} rawProps
+ * @returns {PopupState}
+ */
+function createPopupEntry(title, subtitle, component, rawProps = {}) {
+  const { props, widthRatio } = splitPopupProps(rawProps);
+
+  return {
+    id: crypto.randomUUID(),
+    title,
+    subtitle,
+    component,
+    props,
+    widthRatio
+  };
+}
+
 function createPopupStore() {
   /** @type {import('svelte/store').Writable<PopupState[]>} */
   const stack = writable([]);
@@ -33,7 +81,8 @@ function createPopupStore() {
       title: top.title,
       subtitle: top.subtitle || '',
       component: top.component,
-      props: top.props
+      props: top.props,
+      widthRatio: top.widthRatio
     };
   });
 
@@ -44,13 +93,7 @@ function createPopupStore() {
     stack: { subscribe: stack.subscribe },
 
     open: (/** @type {string} */ title, /** @type {any} */ component, props = {}, subtitle = '') => {
-      stack.update(s => [...s, {
-        id: crypto.randomUUID(),
-        title,
-        subtitle,
-        component,
-        props
-      }]);
+      stack.update(s => [...s, createPopupEntry(title, subtitle, component, props)]);
     },
 
     close: () => {
@@ -70,15 +113,10 @@ function createPopupStore() {
      * @param {() => void} [options.onCancel]
      * @param {string} [options.confirmText]
      * @param {string} [options.cancelText]
+     * @param {number} [options.popupWidthRatio]
      */
     confirm: (title, message, options = {}) => {
-      stack.update(s => [...s, {
-        id: crypto.randomUUID(),
-        title,
-        subtitle: message,
-        component: ConfirmPopup,
-        props: options
-      }]);
+      stack.update(s => [...s, createPopupEntry(title, message, ConfirmPopup, options)]);
     },
 
     /**
@@ -88,15 +126,10 @@ function createPopupStore() {
      * @param {Object} options
      * @param {() => void} [options.onOk]
      * @param {string} [options.okText]
+     * @param {number} [options.popupWidthRatio]
      */
     alert: (title, message, options = {}) => {
-      stack.update(s => [...s, {
-        id: crypto.randomUUID(),
-        title,
-        subtitle: message,
-        component: AlertPopup,
-        props: options
-      }]);
+      stack.update(s => [...s, createPopupEntry(title, message, AlertPopup, options)]);
     },
 
     /**
@@ -110,15 +143,10 @@ function createPopupStore() {
      * @param {string} [options.submitText]
      * @param {string} [options.cancelText]
      * @param {string} [options.label]
+     * @param {number} [options.popupWidthRatio]
      */
     prompt: (title, message, options = {}) => {
-      stack.update(s => [...s, {
-        id: crypto.randomUUID(),
-        title,
-        subtitle: message,
-        component: PromptPopup,
-        props: options
-      }]);
+      stack.update(s => [...s, createPopupEntry(title, message, PromptPopup, options)]);
     }
   };
 }

package/dist/Components/ScrollContainer.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { onMount, tick } from 'svelte';
+
   /**
    * @type {'auto' | 'scroll' | 'hidden' | 'visible'}
    */
@@ -53,11 +55,74 @@
    * @type {string}
    */
   export let borderRadius = '4px';
+
+  /**
+   * Hide scrollbars until the container has been scrolled away from its initial position.
+   * @type {boolean}
+   */
+  export let hideScrollbarUntilScroll = false;
+
+  /** @type {HTMLDivElement | null} */
+  let containerRef = null;
+
+  let hasBeenScrolled = false;
+
+  $: scrollbarsHidden = hideScrollbarUntilScroll && !hasBeenScrolled;
+
+  function updateScrolledState() {
+    if (!hideScrollbarUntilScroll || !containerRef) {
+      return;
+    }
+
+    if (containerRef.scrollTop > 0 || containerRef.scrollLeft > 0) {
+      hasBeenScrolled = true;
+    }
+  }
+
+  function handleScroll() {
+    updateScrolledState();
+  }
+
+  /**
+   * Reveal the scrollbars and replay the first wheel delta so the first scroll
+   * interaction still moves content even though overflow starts hidden.
+   * @param {WheelEvent} event
+   */
+  function handleInitialWheel(event) {
+    if (!scrollbarsHidden || !containerRef) {
+      return;
+    }
+
+    if (event.deltaX === 0 && event.deltaY === 0) {
+      return;
+    }
+
+    event.preventDefault();
+    hasBeenScrolled = true;
+
+    void tick().then(() => {
+      containerRef?.scrollBy({ left: event.deltaX, top: event.deltaY });
+    });
+  }
+
+  onMount(() => {
+    void tick().then(() => {
+      updateScrolledState();
+    });
+  });
+
+  $: if (!hideScrollbarUntilScroll) {
+    hasBeenScrolled = false;
+  }
 </script>
 
 <div
   class="scroll-container"
-  style="--overflow-x: {overflowX}; --overflow-y: {overflowY}; --width: {width}; --height: {height}; --max-width: {maxWidth}; --max-height: {maxHeight}; --scrollbar-size: {scrollbarSize}; --scroll-track-color: {trackColor}; --scroll-thumb-color: {thumbColor}; --scroll-thumb-hover-color: {thumbHoverColor}; --scroll-radius: {borderRadius};"
+  class:hidden-scrollbar-until-scroll={scrollbarsHidden}
+  bind:this={containerRef}
+  on:scroll={handleScroll}
+  on:wheel={handleInitialWheel}
+  style="--effective-overflow-x: {scrollbarsHidden ? 'hidden' : overflowX}; --effective-overflow-y: {scrollbarsHidden ? 'hidden' : overflowY}; --width: {width}; --height: {height}; --max-width: {maxWidth}; --max-height: {maxHeight}; --scrollbar-size: {scrollbarSize}; --scroll-track-color: {trackColor}; --scroll-thumb-color: {thumbColor}; --scroll-thumb-hover-color: {thumbHoverColor}; --scroll-radius: {borderRadius};"
 >
   <slot />
 </div>
@@ -68,17 +133,37 @@
     height: var(--height);
     max-width: var(--max-width);
     max-height: var(--max-height);
-    overflow-x: var(--overflow-x);
-    overflow-y: var(--overflow-y);
+    overflow-x: var(--effective-overflow-x);
+    overflow-y: var(--effective-overflow-y);
     scrollbar-color: var(--scroll-thumb-color) var(--scroll-track-color);
     scrollbar-width: thin;
   }
 
+  .scroll-container.hidden-scrollbar-until-scroll {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    scrollbar-color: transparent transparent;
+  }
+
   .scroll-container::-webkit-scrollbar {
     width: var(--scrollbar-size);
     height: var(--scrollbar-size);
   }
 
+  .scroll-container.hidden-scrollbar-until-scroll::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+    background: transparent;
+  }
+
+  .scroll-container.hidden-scrollbar-until-scroll::-webkit-scrollbar-track,
+  .scroll-container.hidden-scrollbar-until-scroll::-webkit-scrollbar-thumb,
+  .scroll-container.hidden-scrollbar-until-scroll::-webkit-scrollbar-corner {
+    background: transparent;
+    border-radius: 0;
+  }
+
   .scroll-container::-webkit-scrollbar-track {
     background: var(--scroll-track-color);
     border-radius: var(--scroll-radius);

package/dist/Components/ScrollContainer.svelte.d.ts

@@ -11,6 +11,7 @@ type ScrollContainer = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     thumbColor?: string | undefined;
     thumbHoverColor?: string | undefined;
     borderRadius?: string | undefined;
+    hideScrollbarUntilScroll?: boolean | undefined;
 }, {
     default: {};
 }>, {
@@ -32,6 +33,7 @@ declare const ScrollContainer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2
     thumbColor?: string | undefined;
     thumbHoverColor?: string | undefined;
     borderRadius?: string | undefined;
+    hideScrollbarUntilScroll?: boolean | undefined;
 }, {
     default: {};
 }>, {