polymorph-ui-components 0.5.0 → 0.6.1

package/dist/Button/Button.svelte

@@ -102,6 +102,8 @@
     gap: var(--button-content-gap, 16px);
     visibility: var(--button-visibility, visible);
     box-shadow: var(--button-box-shadow, none);
+    text-decoration: var(--button-text-decoration, none);
+    line-height: var(--button-line-height, normal);
   }
 
   .disabled {
@@ -112,6 +114,7 @@
     font-weight: var(--button-disabled-font-weight);
     border: var(--button-disabled-border);
     background: var(--button-disabled-background-color, var(--button-color, #18181b));
+    text-decoration: var(--button-disabled-text-decoration, var(--button-text-decoration, none));
   }
 
   .button-loader {
@@ -133,6 +136,7 @@
     color: var(--button-hover-text-color, var(--button-text-color, #ffffff));
     border: var(--button-hover-border, var(--button-border, none));
     transform: var(--button-hover-transform);
+    opacity: var(--button-hover-opacity, var(--button-opacity, 1));
   }
 
   button:active {

package/dist/Choicebox/Choicebox.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
   import type { ChoiceboxProperties } from './properties';
+  import checkmarkSvg from '../assets/checkmark.svg?raw';
 
   let {
     children,
     selected = $bindable(false),
     mode = 'radio',
+    showIndicator = false,
     disabled = false,
     testId,
     onclick,
@@ -43,8 +45,18 @@
   onkeydown={handleKeyDown}
   data-pw={testId}
 >
-  {#if typeof children === 'function'}
-    {@render children()}
+  <div class="body">
+    {#if typeof children === 'function'}
+      {@render children()}
+    {/if}
+  </div>
+  {#if showIndicator}
+    <span class="indicator {mode}" class:selected aria-hidden="true">
+      {#if mode === 'checkbox' && selected}
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        <span class="indicator-icon">{@html checkmarkSvg}</span>
+      {/if}
+    </span>
   {/if}
 </div>
 
@@ -63,6 +75,14 @@
     -webkit-tap-highlight-color: transparent;
   }
 
+  .body {
+    flex: var(--choicebox-body-flex, 1);
+    min-width: var(--choicebox-body-min-width, 0);
+    display: var(--choicebox-body-display, flex);
+    align-items: var(--choicebox-body-align-items, var(--choicebox-align-items, center));
+    gap: var(--choicebox-body-gap, var(--choicebox-gap, 12px));
+  }
+
   .choicebox:focus-visible {
     outline: none;
     box-shadow: var(--choicebox-focus-ring, 0 0 0 3px currentColor);
@@ -82,4 +102,46 @@
     opacity: var(--choicebox-disabled-opacity, 0.4);
     cursor: var(--choicebox-disabled-cursor, not-allowed);
   }
+
+  .indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--choicebox-indicator-size, 20px);
+    height: var(--choicebox-indicator-size, 20px);
+    border: var(--choicebox-indicator-border, 2px solid #757575);
+    background: var(--choicebox-indicator-background, transparent);
+    transition: var(--choicebox-indicator-transition, background 0.2s, border-color 0.2s);
+  }
+
+  .indicator.radio {
+    border-radius: 50%;
+  }
+
+  .indicator.checkbox {
+    border-radius: var(--choicebox-indicator-border-radius, var(--radius, 4px));
+  }
+
+  .indicator.selected {
+    border: var(--choicebox-indicator-selected-border, 2px solid #2196f3);
+    background: var(--choicebox-indicator-selected-background, #2196f3);
+  }
+
+  .indicator.radio.selected {
+    box-shadow: inset 0 0 0 var(--choicebox-indicator-dot-inset, 4px)
+      var(--choicebox-indicator-dot-color, #ffffff);
+  }
+
+  .indicator-icon {
+    display: flex;
+    width: var(--choicebox-indicator-icon-size, 14px);
+    height: var(--choicebox-indicator-icon-size, 14px);
+    color: var(--choicebox-indicator-icon-color, #ffffff);
+  }
+
+  .indicator-icon :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
 </style>

package/dist/Choicebox/properties.d.ts

@@ -6,6 +6,7 @@ export type OptionalChoiceboxProperties = {
     selected?: boolean;
     mode?: ChoiceboxMode;
     disabled?: boolean;
+    showIndicator?: boolean;
     testId?: string;
     classes?: string;
 };

package/dist/Modal/Modal.svelte

@@ -8,11 +8,14 @@
 
   let overlayDiv: HTMLDivElement | null = $state(null);
   let backPressed = false;
+  let dismissTimer: ReturnType<typeof setTimeout> | null = null;
 
   let {
     size = 'fit-content',
     align = 'center',
     showOverlay = true,
+    lockScroll = true,
+    autoDismissAfter = null,
     supportHardwareBackPress = false,
     enableTransition = true,
     transitionType = 'ALL',
@@ -75,7 +78,12 @@
   }
 
   onMount(() => {
-    document.body.style.overflow = 'hidden';
+    if (lockScroll) {
+      document.body.style.overflow = 'hidden';
+    }
+    if (typeof autoDismissAfter === 'number') {
+      dismissTimer = setTimeout(() => onclose?.(), autoDismissAfter);
+    }
     if (supportHardwareBackPress) {
       history.pushState(null, '', window.location.href);
       window.addEventListener('popstate', handlePopstate);
@@ -83,8 +91,13 @@
   });
 
   onDestroy(() => {
+    if (dismissTimer !== null) {
+      clearTimeout(dismissTimer);
+    }
     if (typeof window !== 'undefined') {
-      document.body.style.overflow = '';
+      if (lockScroll) {
+        document.body.style.overflow = '';
+      }
       if (supportHardwareBackPress) {
         if (!backPressed) {
           history.back();
@@ -172,7 +185,7 @@
 
 <style>
   .modal {
-    position: fixed;
+    position: var(--modal-position, fixed);
     top: 0;
     bottom: 0;
     left: 0;

package/dist/Modal/properties.d.ts

@@ -7,6 +7,8 @@ export type ModalProperties = ModalEventProperties & {
     size?: ModalSize;
     align?: ModalAlign;
     showOverlay?: boolean;
+    lockScroll?: boolean;
+    autoDismissAfter?: number | null;
     supportHardwareBackPress?: boolean;
     enableTransition?: boolean;
     transitionType?: ModalTransition;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polymorph-ui-components",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",
@@ -14,6 +14,15 @@
     "svelte-components"
   ],
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sinha-sahil/polymorph-ui-components.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sinha-sahil/polymorph-ui-components/issues"
+  },
+  "homepage": "https://github.com/sinha-sahil/polymorph-ui-components#readme",
+  "author": "Sahil Sinha",
   "scripts": {
     "prepare": "husky",
     "dev": "vite dev --host",