tyrell-components 1.0.0-RC7 → 1.0.0-TC10

package/lib/styles/multiselect.js

@@ -768,6 +768,77 @@ export const multiselectStyles = `
   display: none !important;
 }
 
+/* ==================== LOADING STATE ====================
+   Spinner overlay shown inside the options area while the parent
+   (external-search mode) is fetching. Search input stays usable.
+
+   Carries its own surface so it stays visible even when the host
+   has restyled the popup with a transparent or unusual background.
+   Override with --ty-loader-bg / --ty-loader-radius / --ty-loader-border.
+*/
+.dropdown-loading {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ty-spacing-2);
+  padding: var(--ty-spacing-4) var(--ty-spacing-3);
+  color: var(--ty-text-soft);
+  font-size: var(--ty-font-sm);
+  min-height: 4rem;
+  /* Match the .dropdown-options popup look — same background, border, radius, shadow */
+  background: var(--ty-loader-bg, var(--input-bg, var(--ty-input-bg)));
+  border: 1px solid var(--ty-loader-border, var(--input-border, var(--ty-input-border)));
+  border-radius: var(--ty-loader-radius, var(--ty-radius-lg));
+  box-shadow: var(--ty-loader-shadow, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));
+  box-sizing: border-box;
+}
+
+.dropdown-options-wrapper.loading .dropdown-loading {
+  display: flex;
+}
+
+/* Slot is transparent for layout — fallback (spinner + text) and user-provided
+   slotted content both act as direct flex children of .dropdown-loading. */
+.dropdown-loading > slot[name="loading"] {
+  display: contents;
+}
+
+.dropdown-options-wrapper.loading .dropdown-options,
+.dropdown-options-wrapper.loading > slot#options-slot,
+.dropdown-options-wrapper.loading .empty-state {
+  display: none;
+}
+
+.dropdown-loading-spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  flex-shrink: 0;
+  animation: ty-multiselect-spin 0.7s linear infinite;
+  color: var(--ty-color-primary);
+}
+
+.dropdown-loading-spinner svg {
+  width: 100%;
+  height: 100%;
+}
+
+.dropdown-loading-text {
+  color: var(--ty-text-soft);
+}
+
+@keyframes ty-multiselect-spin {
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dropdown-loading-spinner {
+    animation-duration: 1.6s;
+  }
+}
+
 /* Custom scrollbar styles */
 ${customScrollbarStyles}
 `;

package/lib/styles/multiselect.js.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect.js","sourceRoot":"","sources":["../../src/styles/multiselect.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,MAAM,CAAC,MAAM,iBAAiB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8vB/B,qBAAqB;CACtB,CAAC"}
+{"version":3,"file":"multiselect.js","sourceRoot":"","sources":["../../src/styles/multiselect.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,MAAM,CAAC,MAAM,iBAAiB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAq0B/B,qBAAqB;CACtB,CAAC"}

package/lib/utils/loader-registry.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Global loader-icon registry.
+ *
+ * Set once at app bootstrap to override the default spinner SVG used by
+ * every loading-aware component (`ty-button`, `ty-dropdown`, `ty-multiselect`,
+ * etc.). Components call `getLoaderSvg()` on every render, so changing the
+ * registered SVG affects future renders.
+ *
+ * The wrapper element rotates the SVG with `transform: rotate()`, so prefer
+ * a *static* SVG. If you must use a self-animating SVG, disable the wrapper
+ * spin with the `--ty-loader-animation: none` CSS custom property.
+ *
+ * @example
+ *   import { setLoaderSvg } from 'tyrell-components'
+ *   setLoaderSvg('<svg viewBox="0 0 24 24">...</svg>')
+ *
+ *   // CDN / vanilla
+ *   window.tyLoader.set('<svg ...>...</svg>')
+ *
+ *   // Reset to default
+ *   setLoaderSvg(null)
+ */
+/**
+ * Register a custom spinner SVG (markup string). Pass `null` to reset to
+ * the built-in default.
+ */
+export declare function setLoaderSvg(svg: string | null): void;
+/**
+ * Get the currently registered spinner SVG, or the built-in default if
+ * none has been set. Components call this on every render.
+ */
+export declare function getLoaderSvg(): string;
+/** Reset the registered loader back to the built-in default. */
+export declare function resetLoaderSvg(): void;
+//# sourceMappingURL=loader-registry.d.ts.map

package/lib/utils/loader-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader-registry.d.ts","sourceRoot":"","sources":["../../src/utils/loader-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAMH;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAErD;AAED;;;GAGG;AACH,wBAAgB,YAAY,IAAI,MAAM,CAErC;AAED,gEAAgE;AAChE,wBAAgB,cAAc,IAAI,IAAI,CAErC"}

package/lib/utils/loader-registry.js

@@ -0,0 +1,43 @@
+/**
+ * Global loader-icon registry.
+ *
+ * Set once at app bootstrap to override the default spinner SVG used by
+ * every loading-aware component (`ty-button`, `ty-dropdown`, `ty-multiselect`,
+ * etc.). Components call `getLoaderSvg()` on every render, so changing the
+ * registered SVG affects future renders.
+ *
+ * The wrapper element rotates the SVG with `transform: rotate()`, so prefer
+ * a *static* SVG. If you must use a self-animating SVG, disable the wrapper
+ * spin with the `--ty-loader-animation: none` CSS custom property.
+ *
+ * @example
+ *   import { setLoaderSvg } from 'tyrell-components'
+ *   setLoaderSvg('<svg viewBox="0 0 24 24">...</svg>')
+ *
+ *   // CDN / vanilla
+ *   window.tyLoader.set('<svg ...>...</svg>')
+ *
+ *   // Reset to default
+ *   setLoaderSvg(null)
+ */
+const DEFAULT_LOADER_SVG = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" stroke-opacity="0.25"/><path d="M22 12a10 10 0 0 1-10 10" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg>`;
+let customLoaderSvg = null;
+/**
+ * Register a custom spinner SVG (markup string). Pass `null` to reset to
+ * the built-in default.
+ */
+export function setLoaderSvg(svg) {
+    customLoaderSvg = svg && svg.trim() ? svg : null;
+}
+/**
+ * Get the currently registered spinner SVG, or the built-in default if
+ * none has been set. Components call this on every render.
+ */
+export function getLoaderSvg() {
+    return customLoaderSvg ?? DEFAULT_LOADER_SVG;
+}
+/** Reset the registered loader back to the built-in default. */
+export function resetLoaderSvg() {
+    customLoaderSvg = null;
+}
+//# sourceMappingURL=loader-registry.js.map

package/lib/utils/loader-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader-registry.js","sourceRoot":"","sources":["../../src/utils/loader-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,kBAAkB,GAAG,kSAAkS,CAAA;AAE7T,IAAI,eAAe,GAAkB,IAAI,CAAA;AAEzC;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,GAAkB;IAC7C,eAAe,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAA;AAClD,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,YAAY;IAC1B,OAAO,eAAe,IAAI,kBAAkB,CAAA;AAC9C,CAAC;AAED,gEAAgE;AAChE,MAAM,UAAU,cAAc;IAC5B,eAAe,GAAG,IAAI,CAAA;AACxB,CAAC"}

package/lib/version.d.ts

@@ -4,5 +4,5 @@
  * This is automatically synced with package.json during build.
  * Use `npm version` to bump versions.
  */
-export declare const VERSION = "1.0.0-RC7";
+export declare const VERSION = "1.0.0-TC10";
 //# sourceMappingURL=version.d.ts.map

package/lib/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,eAAO,MAAM,OAAO,cAAc,CAAA"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,eAAO,MAAM,OAAO,eAAe,CAAA"}

package/lib/version.js

@@ -7,5 +7,5 @@
  * This is automatically synced with package.json during build.
  * Use `npm version` to bump versions.
  */
-export const VERSION = '1.0.0-RC7';
+export const VERSION = '1.0.0-TC10';
 //# sourceMappingURL=version.js.map

package/lib/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,0EAA0E;AAC1E,+CAA+C;AAE/C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAA"}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,0EAA0E;AAC1E,+CAA+C;AAE/C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,YAAY,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tyrell-components",
-  "version": "1.0.0-RC7",
+  "version": "1.0.0-TC10",
   "description": "Tyrell Components - Framework-agnostic web components with semantic design system",
   "type": "module",
   "sideEffects": [
@@ -44,6 +44,10 @@
       "types": "./lib/components/copy.d.ts",
       "import": "./lib/components/copy.js"
     },
+    "./file-upload": {
+      "types": "./lib/components/file-upload.d.ts",
+      "import": "./lib/components/file-upload.js"
+    },
     "./popup": {
       "types": "./lib/components/popup.d.ts",
       "import": "./lib/components/popup.js"