@ibobbyts/svelte-ui-utils 0.2.8 → 0.2.9

package/README.md

@@ -255,6 +255,7 @@ countdown bar.
   options={pageSizeOptions}
   ariaLabel="Rows"
   placement="down"
+  menuAlign="left"
   onChange={(next) => {
     pageSize = next;
   }}
@@ -263,7 +264,11 @@ countdown bar.
 
 `Dropdown` is a controlled select-like component for simple option lists. Use
 `placement="up"` when the menu should open above the trigger, such as bottom
-pagination bars. `DataTable` uses this same component for its page-size picker.
+pagination bars. Use `menuAlign="left"` when the expanded menu should share the
+trigger's left edge; the default is `right` for backward compatibility.
+`fitContent` can be combined with `menuAlign="left"` to size the menu to its
+longest option while keeping its left edge aligned. `DataTable` uses this same
+component for its page-size picker.
 
 ## DataTable
 
@@ -488,23 +493,22 @@ inside a theme root:
 
 ## Release
 
-Publishing is release-driven:
-
 Do not publish this package as part of consumer-app local integration work.
-Create tags, GitHub Releases, or package publishes only when a release is
-explicitly requested.
+Publish only when a release is explicitly requested. Releases are published
+directly from the maintainer's machine to npm; do not create a GitHub Actions
+secret or a GitHub Release for package publishing.
+
+The npm token is exported as `NPM_TOKEN` from `~/.zshrc`. After updating the
+package version, run the validation and publish commands locally:
 
 ```bash
-gh repo create iBobbyTS/svelte-ui-utils --public --source . --remote origin --push
-git tag v0.2.0
-git push origin v0.2.0
-gh release create v0.2.0 --title "v0.2.0" --notes "Publish public npm package"
-gh run watch
+npm run check
+npm test
+npm run package
+npm publish --access public
 ```
 
-The release workflow runs checks and publishes to the public npm registry with
-the repository secret `NPM_TOKEN`. The token must have permission to publish
-`@ibobbyts/svelte-ui-utils`; do not commit it to this repository.
+Never commit the npm token or copy it into repository settings.
 
 ## Bun install verification
 

package/dist/dropdown/Dropdown.svelte

@@ -2,13 +2,14 @@
 
 <script lang="ts">
   import { onDestroy, tick } from 'svelte';
-  import type { DropdownChangeHandler, DropdownOption, DropdownPlacement, DropdownValue } from './types.js';
+  import type { DropdownChangeHandler, DropdownMenuAlign, DropdownOption, DropdownPlacement, DropdownValue } from './types.js';
 
   export let id: string | undefined = undefined;
   export let value: DropdownValue = '';
   export let options: DropdownOption[] = [];
   export let ariaLabel: string | undefined = undefined;
   export let placement: DropdownPlacement = 'down';
+  export let menuAlign: DropdownMenuAlign = 'right';
   export let fitViewport = false;
   export let fitContent = false;
   export let disabled = false;
@@ -224,6 +225,8 @@
       class="suu-dropdown__menu"
       class:suu-dropdown__menu--up={placement === 'up'}
       class:suu-dropdown__menu--down={placement === 'down'}
+      class:suu-dropdown__menu--left={menuAlign === 'left'}
+      class:suu-dropdown__menu--right={menuAlign === 'right'}
       class:suu-dropdown__menu--fit-content={fitContent}
     >
       <div class="suu-dropdown__panel" role="listbox" aria-label={ariaLabel}>

package/dist/dropdown/Dropdown.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { DropdownChangeHandler, DropdownOption, DropdownPlacement, DropdownValue } from './types.js';
+import type { DropdownChangeHandler, DropdownMenuAlign, DropdownOption, DropdownPlacement, DropdownValue } from './types.js';
 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;
@@ -18,6 +18,7 @@ declare const Dropdown: $$__sveltets_2_IsomorphicComponent<{
     options?: DropdownOption[];
     ariaLabel?: string | undefined;
     placement?: DropdownPlacement;
+    menuAlign?: DropdownMenuAlign;
     fitViewport?: boolean;
     fitContent?: boolean;
     disabled?: boolean;

package/dist/dropdown/Dropdown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/Dropdown.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAiO1G,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,QAAQ;SAVkM,MAAM,GAAG,SAAS;YAAU,aAAa;cAAY,cAAc,EAAE;gBAAc,MAAM,GAAG,SAAS;gBAAc,iBAAiB;;;;eAA2G,qBAAqB,GAAG,SAAS;;;kBAUnY,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/Dropdown.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,cAAc,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAkO7H,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,QAAQ;SAVyN,MAAM,GAAG,SAAS;YAAU,aAAa;cAAY,cAAc,EAAE;gBAAc,MAAM,GAAG,SAAS;gBAAc,iBAAiB;gBAAc,iBAAiB;;;;eAA2G,qBAAqB,GAAG,SAAS;;;kBAUzb,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}

package/dist/dropdown/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Dropdown } from './Dropdown.svelte';
-export type { DropdownChangeHandler, DropdownOption, DropdownPlacement, DropdownValue } from './types.js';
+export type { DropdownChangeHandler, DropdownMenuAlign, DropdownOption, DropdownPlacement, DropdownValue } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/dropdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EAAE,qBAAqB,EAAE,cAAc,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,cAAc,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/dropdown/types.d.ts

@@ -1,5 +1,6 @@
 export type DropdownValue = string | number;
 export type DropdownPlacement = 'up' | 'down';
+export type DropdownMenuAlign = 'left' | 'right';
 export interface DropdownOption {
     label: string;
     value: DropdownValue;

package/dist/dropdown/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;AAE5C,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,MAAM,CAAC;AAE9C,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;AAE5C,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,MAAM,CAAC;AAE9C,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEjD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC"}

package/dist/style.css

@@ -1154,6 +1154,7 @@
   position: absolute;
   top: calc(100% + 6px);
   right: 0;
+  left: auto;
   z-index: 100;
   min-width: 100%;
   overflow: hidden;
@@ -1163,6 +1164,16 @@
   box-shadow: 0 18px 42px rgb(15 23 42 / 0.16);
 }
 
+.suu-dropdown__menu--left {
+  right: auto;
+  left: 0;
+}
+
+.suu-dropdown__menu--right {
+  right: 0;
+  left: auto;
+}
+
 .suu-dropdown__menu--up {
   top: auto;
   bottom: calc(100% + 6px);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibobbyts/svelte-ui-utils",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "Reusable Svelte 5 UI utilities for dialogs, toast notifications, dropdown search, and data tables.",
   "type": "module",
   "license": "MIT",