@coyalabs/bts-style 1.3.14 → 1.3.17

package/README.md

@@ -340,6 +340,11 @@ Text input field with icon support and theme matching.
 - `value?: string` - Input value (bindable)
 - `placeholder?: string` - Placeholder text
 - `type?: string` - Input type (default: `'text'`)
+- `multiline?: boolean` - Render a textarea instead of an input (default: `false`)
+- `maxRows?: number` - Maximum visible rows for auto-growing multiline inputs (default: `4`)
+- `expandOnNewline?: boolean` - Keep a multiline input visually single-line until the value contains a newline (default: `false`)
+- `newlineOnCtrlEnter?: boolean` - For multiline inputs, plain Enter submits the nearest form or bubbles to parent handlers, while `Ctrl+Enter` and `Shift+Enter` insert a newline (default: `false`)
+- `resize?: 'none' | 'both' | 'horizontal' | 'vertical'` - Textarea resize mode when `multiline` is enabled (default: `'vertical'`)
 - `theme?: 'full' | 'primary' | 'secondary' | 'filled'` - Visual theme
 - `icon?: string` - Left icon SVG
 - All BaseContainer corner radius props
@@ -357,6 +362,33 @@ Text input field with icon support and theme matching.
   icon={icons.pen}
   theme="primary"
 />
+
+<InputBox
+  bind:value={username}
+  placeholder="Write a longer note..."
+  icon={icons.pen}
+  multiline={true}
+  maxRows={6}
+  resize="vertical"
+/>
+
+<InputBox
+  bind:value={username}
+  placeholder="Looks like one line until you press Enter..."
+  icon={icons.pen}
+  multiline={true}
+  expandOnNewline={true}
+  maxRows={4}
+/>
+
+<InputBox
+  bind:value={username}
+  placeholder="Press Enter to submit, Ctrl+Enter for a newline"
+  icon={icons.pen}
+  multiline={true}
+  newlineOnCtrlEnter={true}
+  maxRows={4}
+/>
 ```
 
 ---
@@ -429,6 +461,7 @@ Reusable overflow wrapper with theme-matching custom scrollbar styling.
 - `thumbColor?: string` - Scrollbar thumb color (default: `'rgba(161, 143, 143, 0.3)'`)
 - `thumbHoverColor?: string` - Scrollbar thumb hover color (default: `'rgba(161, 143, 143, 0.5)'`)
 - `borderRadius?: string` - Scrollbar track/thumb radius (default: `'4px'`)
+- `hideScrollbarUntilScroll?: boolean` - Hide scrollbars until the container has been scrolled from its initial position (default: `false`)
 
 **Example:**
 ```svelte
@@ -441,6 +474,12 @@ Reusable overflow wrapper with theme-matching custom scrollbar styling.
     Scrollable content with BTS-themed scrollbar.
   </div>
 </ScrollContainer>
+
+<ScrollContainer overflowY="auto" maxHeight="320px" hideScrollbarUntilScroll={true}>
+  <div style="min-height: 640px;">
+    Scrollbars stay hidden until the first real scroll.
+  </div>
+</ScrollContainer>
 ```
 
 **Features:**
@@ -779,13 +818,18 @@ Writable store for controlling the popup.
 popupStore.open(
   title: string,
   component: SvelteComponent,
-  props?: object,
+  props?: object & {
+    popupWidthRatio?: number
+  },
   subtitle?: string
 )
 ```
 
 Opens popup with custom component.
 
+`popupWidthRatio` multiplies the default popup width while keeping the dialog capped to the viewport.
+Use `1` for the current width, values below `1` for narrower dialogs, and values above `1` for wider dialogs.
+
 **Example:**
 ```svelte
 <script>
@@ -797,7 +841,7 @@ Opens popup with custom component.
   popupStore.open(
     'Settings', 
     MyCustomPopup, 
-    { userId: 123 },
+    { userId: 123, popupWidthRatio: 1.25 },
     'Configure your preferences'
   )
 }>
@@ -814,7 +858,8 @@ popupStore.confirm(
     onConfirm?: () => void,
     onCancel?: () => void,
     confirmText?: string,
-    cancelText?: string
+    cancelText?: string,
+    popupWidthRatio?: number
   }
 )
 ```
@@ -831,7 +876,8 @@ Shows confirmation dialog.
       onConfirm: () => deleteItem(),
       onCancel: () => console.log('Cancelled'),
       confirmText: 'Delete',
-      cancelText: 'Keep'
+      cancelText: 'Keep',
+      popupWidthRatio: 1.15
     }
   )
 }>
@@ -846,7 +892,8 @@ popupStore.alert(
   message: string,
   options?: {
     onOk?: () => void,
-    okText?: string
+    okText?: string,
+    popupWidthRatio?: number
   }
 )
 ```
@@ -860,7 +907,8 @@ popupStore.alert(
   'Your changes have been saved!',
   {
     onOk: () => navigateToHome(),
-    okText: 'Got it'
+    okText: 'Got it',
+    popupWidthRatio: 0.9
   }
 );
 ```
@@ -875,7 +923,8 @@ popupStore.prompt(
     onCancel?: () => void,
     placeholder?: string,
     submitText?: string,
-    cancelText?: string
+    cancelText?: string,
+    popupWidthRatio?: number
   }
 )
 ```
@@ -891,7 +940,8 @@ popupStore.prompt(
     onSubmit: (name) => updateProfile(name),
     placeholder: 'Your name...',
     submitText: 'Save',
-    cancelText: 'Skip'
+    cancelText: 'Skip',
+    popupWidthRatio: 0.95
   }
 );
 ```

package/dist/Base/BaseText.svelte

@@ -35,7 +35,8 @@
 
   $: usesContent = content !== null && content !== undefined;
   $: tagName = as || (markdown && usesContent ? 'div' : 'span');
-  $: renderedContent = markdown && usesContent ? renderMarkdown(content) : '';
+ // @ts-ignore
+   $: renderedContent = markdown && usesContent ? renderMarkdown(content) : '';
 </script>
 
 <svelte:element
@@ -122,7 +123,7 @@
     color: #C7BDC1;
   }
   .text[data-markdown='true'] :global(a) {
-    color: #FFEFF6;
+    color: #67abff;
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-underline-offset: 0.14em;
@@ -201,17 +202,17 @@
   }
   .text[data-variant='content'][data-markdown='true'] :global(h1) {
     font-size: calc(24px + var(--text-modifier));
-    font-weight: calc(850 + var(--text-weight-modifier));
+    font-weight: calc(900 + var(--text-weight-modifier));
   }
   .text[data-variant='content'][data-markdown='true'] :global(h2) {
     font-size: calc(21px + var(--text-modifier));
-    font-weight: calc(800 + var(--text-weight-modifier));
+    font-weight: calc(900 + var(--text-weight-modifier));
   }
   .text[data-variant='content'][data-markdown='true'] :global(h3),
   .text[data-variant='button'][data-markdown='true'] :global(h1),
   .text[data-variant='button'][data-markdown='true'] :global(h2),
   .text[data-variant='button'][data-markdown='true'] :global(h3) {
     font-size: calc(18px + var(--text-modifier));
-    font-weight: calc(700 + var(--text-weight-modifier));
+    font-weight: calc(900 + var(--text-weight-modifier));
   }
 </style>

package/dist/Components/ContextMenu.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { onMount, tick } from 'svelte';
   import { expoOut } from 'svelte/easing';
   import BaseContainer from '../Base/BaseContainer.svelte';
   import BaseText from '../Base/BaseText.svelte';
@@ -33,6 +34,68 @@
     'bottom-right': 'bottom right'
   };
 
+  const VIEWPORT_PADDING = 12;
+
+  /** @type {HTMLDivElement | null} */
+  let anchorRef = null;
+
+  let viewportOffsetX = 0;
+  let viewportOffsetY = 0;
+
+  /** @type {number | null} */
+  let updateFrame = null;
+
+  /**
+   * @param {number} position
+   * @param {number} size
+   * @param {number} viewportSize
+   */
+  function getViewportOffset(position, size, viewportSize) {
+    const viewportMin = VIEWPORT_PADDING;
+    const viewportMax = viewportSize - VIEWPORT_PADDING;
+    const availableSize = Math.max(viewportSize - VIEWPORT_PADDING * 2, 0);
+
+    if (size >= availableSize) {
+      return viewportMin - position;
+    }
+
+    if (position < viewportMin) {
+      return viewportMin - position;
+    }
+
+    const end = position + size;
+    if (end > viewportMax) {
+      return viewportMax - end;
+    }
+
+    return 0;
+  }
+
+  function updateViewportOffset() {
+    if (!anchorRef || typeof window === 'undefined') {
+      return;
+    }
+
+    const rect = anchorRef.getBoundingClientRect();
+    viewportOffsetX = getViewportOffset(rect.left, rect.width, window.innerWidth);
+    viewportOffsetY = getViewportOffset(rect.top, rect.height, window.innerHeight);
+  }
+
+  function scheduleViewportOffsetUpdate() {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    if (updateFrame !== null) {
+      cancelAnimationFrame(updateFrame);
+    }
+
+    updateFrame = requestAnimationFrame(() => {
+      updateFrame = null;
+      updateViewportOffset();
+    });
+  }
+
   /**
    * Custom scale transition with independent x and y animations
    * @param {HTMLElement} node
@@ -91,45 +154,128 @@
   function handleSelect(value) {
     onSelect(value);
   }
+
+  onMount(() => {
+    scheduleViewportOffsetUpdate();
+    void tick().then(() => {
+      scheduleViewportOffsetUpdate();
+    });
+
+    /** @type {ResizeObserver | null} */
+    let resizeObserver = null;
+
+    if (typeof ResizeObserver !== 'undefined' && anchorRef) {
+      resizeObserver = new ResizeObserver(() => {
+        scheduleViewportOffsetUpdate();
+      });
+
+      resizeObserver.observe(anchorRef);
+    }
+
+    window.addEventListener('resize', scheduleViewportOffsetUpdate);
+    window.addEventListener('scroll', scheduleViewportOffsetUpdate, true);
+
+    return () => {
+      resizeObserver?.disconnect();
+      window.removeEventListener('resize', scheduleViewportOffsetUpdate);
+      window.removeEventListener('scroll', scheduleViewportOffsetUpdate, true);
+
+      if (updateFrame !== null) {
+        cancelAnimationFrame(updateFrame);
+      }
+    };
+  });
 </script>
 
-<div 
-  class="context-menu-wrapper"
-  style:transform-origin={originMap[origin]}
-  in:scaleIn
-  out:scaleOut
->
-  <BaseContainer theme="filled" padding="0.5rem" borderRadiusTopLeft="28px" borderRadiusTopRight="28px" borderRadiusBottomLeft="28px" borderRadiusBottomRight="28px">
-    <div style="height: 0.3rem;"></div>
-    {#each categories as category, catIndex}
-      {#if category.label}
-        <div class="separator" class:not-first={catIndex > 0}>
-          <BaseText textModifier="-4px" variant="button">{category.label}</BaseText>
-        </div>
-      {/if}
-      <div class="category-items">
-        {#each category.items as {item}}
-          <button
-            class="context-item"
-            class:selected={item.value === selectedValue}
-            class:disabled={item.disabled}
-            disabled={item.disabled}
-            on:click={() => handleSelect(item.value)}
-          >
-            {item.label}
-          </button>
-        {/each}
+<div class="context-menu-anchor" bind:this={anchorRef}>
+  <div
+    class="context-menu-clamp"
+    style="
+      --context-menu-offset-x: {viewportOffsetX}px;
+      --context-menu-offset-y: {viewportOffsetY}px;
+      --context-menu-max-width: calc(100vw - {VIEWPORT_PADDING * 2}px);
+      --context-menu-max-height: calc(100vh - {VIEWPORT_PADDING * 2}px);
+    "
+  >
+    <div 
+      class="context-menu-wrapper"
+      style:transform-origin={originMap[origin]}
+      in:scaleIn
+      out:scaleOut
+    >
+      <div class="context-menu-surface">
+        <BaseContainer theme="filled" padding="0.5rem" borderRadiusTopLeft="28px" borderRadiusTopRight="28px" borderRadiusBottomLeft="28px" borderRadiusBottomRight="28px">
+          <div style="height: 0.3rem;"></div>
+          {#each categories as category, catIndex}
+            {#if category.label}
+              <div class="separator" class:not-first={catIndex > 0}>
+                <BaseText textModifier="-4px" variant="button">{category.label}</BaseText>
+              </div>
+            {/if}
+            <div class="category-items">
+              {#each category.items as {item}}
+                <button
+                  class="context-item"
+                  class:selected={item.value === selectedValue}
+                  class:disabled={item.disabled}
+                  disabled={item.disabled}
+                  on:click={() => handleSelect(item.value)}
+                >
+                  {item.label}
+                </button>
+              {/each}
+            </div>
+          {/each}
+          <div style="height: 0.3rem;"></div>
+        </BaseContainer>
       </div>
-    {/each}
-    <div style="height: 0.3rem;"></div>
-  </BaseContainer>
+    </div>
+  </div>
 </div>
 
 <style>
+  .context-menu-anchor {
+    display: inline-block;
+  }
+
+  .context-menu-clamp {
+    display: inline-block;
+    transform: translate3d(var(--context-menu-offset-x), var(--context-menu-offset-y), 0);
+  }
+
   .context-menu-wrapper {
     display: inline-block;
   }
 
+  .context-menu-surface {
+    display: inline-block;
+    max-width: var(--context-menu-max-width);
+    max-height: var(--context-menu-max-height);
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border-radius: 28px;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(161, 143, 143, 0.45) rgba(62, 53, 58, 0.35);
+  }
+
+  .context-menu-surface::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .context-menu-surface::-webkit-scrollbar-track {
+    background: rgba(62, 53, 58, 0.35);
+  }
+
+  .context-menu-surface::-webkit-scrollbar-thumb {
+    background: rgba(161, 143, 143, 0.45);
+    border-radius: 999px;
+  }
+
+  .context-menu-surface::-webkit-scrollbar-thumb:hover {
+    background: rgba(161, 143, 143, 0.65);
+  }
+
   .category-items {
     display: flex;
     flex-direction: column;