tyrell-components 1.0.0-RC7 → 1.0.0-RC9

package/lib/styles/wizard.js

@@ -1,34 +1,104 @@
 /**
  * Wizard Component Styles
  *
- * Styles for the ty-wizard container component including:
- * - Flexbox layout with step indicators and content carousel
- * - Progress line with animated completion overlay
- * - Step circles with completed/active/pending states
- * - Carousel viewport with transform animations
- * - Responsive design with prefers-reduced-motion support
- * - Fully customizable via CSS Parts (::part)
- *
- * Uses global design system tokens (no component-specific variables):
- * - Surfaces: --ty-surface-floating, --ty-surface-content, --ty-surface-elevated
- * - Colors: --ty-color-success, --ty-color-primary, --ty-color-danger
- * - Borders: --ty-border, --ty-border-soft
- * - Text: --ty-text, --ty-text-soft
- *
  * CSS Parts (for styling via ::part):
  * - indicators-wrapper: The header containing step indicators
  * - progress-line: The background progress track
  * - step-circle: Individual step circle indicators
  * - panels-container: The content viewport
+ *
+ * Theming — two override granularities:
+ *
+ * 1. Accent aliases (broad retheming — one variable shifts a whole state):
+ *    --ty-wizard-active-accent, --ty-wizard-completed-accent,
+ *    --ty-wizard-error-accent, --ty-wizard-pending-accent
+ *
+ * 2. Fine-grained tokens (surgical control — see :host block below):
+ *    --ty-wizard-{region}-{property}
  */
 export const wizardStyles = `
+/* ============================================================================
+   Theming Tokens
+   All defaults chain back to global --ty-color-* / --ty-surface-* tokens.
+   Override on the host element or a wrapping container.
+   ============================================================================ */
+
 :host {
   display: block;
-  width: var(--wizard-width, 100%);
-  height: var(--wizard-height, 700px);
+  width: var(--ty-wizard-width, 100%);   /* set by width attribute — not a public token */
+  height: var(--ty-wizard-height, 700px); /* set by height attribute — not a public token */
   box-sizing: border-box;
-  /* Note: --step-circle-size is NOT set here to allow inheritance from light DOM.
-     Use fallbacks in var() calls instead. Set on ty-wizard element to customize. */
+
+  /* Accent aliases — override one to shift the matching circle, glow, and progress fill */
+  --ty-wizard-active-accent:    var(--ty-color-primary);
+  --ty-wizard-completed-accent: var(--ty-color-success);
+  --ty-wizard-error-accent:     var(--ty-color-danger);
+  --ty-wizard-pending-accent:   var(--ty-color-neutral);
+
+  /* Container */
+  --ty-wizard-bg:     var(--ty-surface-floating);
+  --ty-wizard-border: var(--ty-border);
+  --ty-wizard-radius: 12px;
+  --ty-wizard-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+
+  /* Header strip */
+  --ty-wizard-header-bg:      var(--ty-surface-content);
+  --ty-wizard-header-border:  var(--ty-border-soft, var(--ty-border));
+  --ty-wizard-header-padding: 24px 24px 16px;
+
+  /* Progress line */
+  --ty-wizard-progress-track:  var(--ty-border);
+  --ty-wizard-progress-fill:   var(--ty-wizard-completed-accent);
+  --ty-wizard-progress-height: 2px;
+
+  /* Transitions */
+  --ty-wizard-transition-duration: 300ms;
+  --ty-wizard-transition-easing:   ease-in-out;
+
+  /* Circle geometry */
+  --ty-wizard-circle-size:         32px;
+  --ty-wizard-circle-border-width: 2px;
+
+  /* Step circle — completed */
+  --ty-wizard-completed-bg:     var(--ty-wizard-completed-accent);
+  --ty-wizard-completed-border: var(--ty-color-success-strong);
+  --ty-wizard-completed-color:  white;
+  --ty-wizard-completed-glow:   color-mix(in srgb, var(--ty-wizard-completed-accent) 10%, transparent);
+
+  /* Step circle — active */
+  --ty-wizard-active-bg:     var(--ty-wizard-active-accent);
+  --ty-wizard-active-border: var(--ty-color-primary-strong);
+  --ty-wizard-active-color:  white;
+  --ty-wizard-active-glow:   color-mix(in srgb, var(--ty-wizard-active-accent) 10%, transparent);
+
+  /* Step circle — pending */
+  --ty-wizard-pending-bg:     var(--ty-surface-elevated);
+  --ty-wizard-pending-border: var(--ty-border);
+  --ty-wizard-pending-color:  var(--ty-text-soft);
+
+  /* Step circle — error */
+  --ty-wizard-error-bg:     var(--ty-wizard-error-accent);
+  --ty-wizard-error-border: var(--ty-color-danger-strong);
+  --ty-wizard-error-color:  white;
+  --ty-wizard-error-glow:   color-mix(in srgb, var(--ty-wizard-error-accent) 10%, transparent);
+
+  /* Labels */
+  --ty-wizard-label-color:          var(--ty-text);
+  --ty-wizard-label-active-color:   var(--ty-text-strong);
+  --ty-wizard-label-inactive-color: var(--ty-text-soft);
+  --ty-wizard-label-size:           var(--ty-font-sm, 14px);
+  --ty-wizard-label-weight:         var(--ty-font-semibold, 600);
+
+  /* Descriptions */
+  --ty-wizard-description-color:        var(--ty-text-soft);
+  --ty-wizard-description-active-color: var(--ty-text);
+  --ty-wizard-description-size:         var(--ty-font-xs, 12px);
+
+  /* Panels viewport */
+  --ty-wizard-panels-bg: var(--ty-surface-elevated);
+
+  /* Focus */
+  --ty-wizard-focus-outline: var(--ty-wizard-active-accent);
 }
 
 .wizard-container {
@@ -38,16 +108,15 @@ export const wizardStyles = `
   flex-direction: column;
   position: relative;
   box-sizing: border-box;
-  border-radius: 12px;
-  border: 1px solid var(--ty-border);
-  background: var(--ty-surface-floating);
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  border-radius: var(--ty-wizard-radius);
+  border: 1px solid var(--ty-wizard-border);
+  background: var(--ty-wizard-bg);
+  box-shadow: var(--ty-wizard-shadow);
   overflow: hidden;
 }
 
 /* ===================================== */
-/* Step Indicators Wrapper */
-/* Expose as CSS Part for full styling control */
+/* Step Indicators Wrapper               */
 /* ===================================== */
 
 .step-indicators-wrapper {
@@ -55,33 +124,30 @@ export const wizardStyles = `
   flex-direction: column;
   flex-shrink: 0;
   position: relative;
-  padding: 24px 24px 16px;
-  border-bottom: 1px solid var(--ty-border-soft, var(--ty-border));
-  background: var(--ty-surface-content);
+  padding: var(--ty-wizard-header-padding);
+  border-bottom: 1px solid var(--ty-wizard-header-border);
+  background: var(--ty-wizard-header-bg);
 }
 
 /* ===================================== */
-/* Progress Line (behind step circles) */
-/* Expose as CSS Part for custom styling */
+/* Progress Line (behind step circles)   */
 /* ===================================== */
 
 .progress-line {
   position: absolute;
   /*
    * With equal-width indicators (flex: 1), each takes 100%/N of the width.
-   * Circle centers are at: 50%/N, 150%/N, 250%/N, ... from left.
-   * Line spans from first center (50%/N) to last center (100% - 50%/N).
-   * Inset = 50% / step-count from each side.
+   * Circle centers sit at 50%/N from the left edge of each indicator.
+   * Inset = 50% / step-count from each side keeps the line between circle centres.
    */
-  left: calc(50% / var(--step-count, 4));
-  right: calc(50% / var(--step-count, 4));
-  /* Vertically center with step circles - uses circle size variable */
-  top: calc(var(--step-circle-size, 32px) / 2 - 1px);
-  height: 2px;
-  background: var(--ty-border);
+  left: calc(50% / var(--ty-wizard-step-count, 4));
+  right: calc(50% / var(--ty-wizard-step-count, 4));
+  top: calc(var(--ty-wizard-circle-size, 32px) / 2 - 1px);
+  height: var(--ty-wizard-progress-height);
+  background: var(--ty-wizard-progress-track);
   z-index: 0;
   pointer-events: none;
-  transition: opacity var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);
+  transition: opacity var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);
 }
 
 .progress-overlay {
@@ -89,25 +155,23 @@ export const wizardStyles = `
   left: 0;
   top: 0;
   height: 100%;
-  background: var(--ty-color-success);
-  transition: width var(--transition-duration, 500ms) var(--transition-easing, ease-in-out);
+  background: var(--ty-wizard-progress-fill);
+  transition: width var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);
   will-change: width;
 }
 
 /* ===================================== */
-/* Step Indicators Container */
+/* Step Indicators Container             */
 /* ===================================== */
 
 .step-indicators {
   display: flex;
   align-items: flex-start;
   position: relative;
-  /* No padding - let equal-width indicators fill the space */
 }
 
 /* ===================================== */
-/* Individual Step Indicator */
-/* Expose as CSS Part for step styling */
+/* Individual Step Indicator             */
 /* ===================================== */
 
 .step-indicator {
@@ -121,7 +185,6 @@ export const wizardStyles = `
   padding: 0;
   font: inherit;
   transition: opacity 200ms;
-  /* Equal width for all indicators - makes progress line alignment predictable */
   flex: 1;
   min-width: 0;
 }
@@ -133,66 +196,59 @@ export const wizardStyles = `
 }
 
 .step-indicator:focus-visible {
-  outline: 2px solid var(--ty-color-primary);
+  outline: 2px solid var(--ty-wizard-focus-outline);
   outline-offset: 4px;
   border-radius: 50%;
 }
 
 /* ===================================== */
-/* Step Circle - Smaller, cleaner */
-/* Expose as CSS Part for circle styling */
+/* Step Circle                           */
 /* ===================================== */
 
 .step-circle {
-  /* Circle size - set --step-circle-size on ty-wizard element to customize */
-  width: var(--step-circle-size, 32px);
-  height: var(--step-circle-size, 32px);
+  width: var(--ty-wizard-circle-size);
+  height: var(--ty-wizard-circle-size);
   border-radius: 50%;
-  border: 2px solid;
+  border: var(--ty-wizard-circle-border-width) solid;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   z-index: 10;
-  transition: all var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);
+  transition: all var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);
   box-sizing: border-box;
   flex-shrink: 0;
 }
 
-/* Completed state - green with success glow */
 .step-circle[data-state="completed"] {
-  background: var(--ty-color-success);
-  border-color: var(--ty-color-success-600, var(--ty-color-success));
-  color: white;
-  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
+  background: var(--ty-wizard-completed-bg);
+  border-color: var(--ty-wizard-completed-border);
+  color: var(--ty-wizard-completed-color);
+  box-shadow: 0 0 0 4px var(--ty-wizard-completed-glow);
 }
 
-/* Active state - primary with primary glow */
 .step-circle[data-state="active"] {
-  background: var(--ty-color-primary);
-  border-color: var(--ty-color-primary-600, var(--ty-color-primary));
-  color: white;
-  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
+  background: var(--ty-wizard-active-bg);
+  border-color: var(--ty-wizard-active-border);
+  color: var(--ty-wizard-active-color);
+  box-shadow: 0 0 0 4px var(--ty-wizard-active-glow);
 }
 
-/* Pending state - neutral gray */
 .step-circle[data-state="pending"] {
-  background: var(--ty-surface-elevated, #f3f4f6);
-  border-color: var(--ty-border, #d1d5db);
-  color: var(--ty-text-soft, #6b7280);
+  background: var(--ty-wizard-pending-bg);
+  border-color: var(--ty-wizard-pending-border);
+  color: var(--ty-wizard-pending-color);
 }
 
-/* Error state - red with danger glow */
 .step-circle[data-state="error"] {
-  background: var(--ty-color-danger, #ef4444);
-  border-color: var(--ty-color-danger-600, #dc2626);
-  color: white;
-  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
+  background: var(--ty-wizard-error-bg);
+  border-color: var(--ty-wizard-error-border);
+  color: var(--ty-wizard-error-color);
+  box-shadow: 0 0 0 4px var(--ty-wizard-error-glow);
 }
 
 /* ===================================== */
-/* Step Text Container */
-/* Wraps label and description */
+/* Step Text Container                   */
 /* ===================================== */
 
 .step-text {
@@ -203,43 +259,43 @@ export const wizardStyles = `
 }
 
 /* ===================================== */
-/* Step Label - Main title */
+/* Step Label                            */
 /* ===================================== */
 
 .step-label {
-  font-size: var(--ty-font-sm, 14px);
-  font-weight: var(--ty-font-semibold, 600);
-  color: var(--ty-text, inherit);
+  font-size: var(--ty-wizard-label-size);
+  font-weight: var(--ty-wizard-label-weight);
+  color: var(--ty-wizard-label-color);
   transition: color 200ms;
 }
 
 .step-indicator[aria-selected="true"] .step-label {
-  color: var(--ty-text-strong, inherit);
+  color: var(--ty-wizard-label-active-color);
 }
 
 .step-indicator[aria-selected="false"] .step-label {
-  color: var(--ty-text-soft, inherit);
+  color: var(--ty-wizard-label-inactive-color);
 }
 
 /* ===================================== */
-/* Step Description - Subtitle */
+/* Step Description                      */
 /* ===================================== */
 
 .step-description {
-  font-size: var(--ty-font-xs, 12px);
+  font-size: var(--ty-wizard-description-size);
   font-weight: var(--ty-font-normal, 400);
-  color: var(--ty-text-soft, #9ca3af);
+  color: var(--ty-wizard-description-color);
   transition: color 200ms;
   text-align: center;
   max-width: 120px;
 }
 
 .step-indicator[aria-selected="true"] .step-description {
-  color: var(--ty-text, inherit);
+  color: var(--ty-wizard-description-active-color);
 }
 
 /* ===================================== */
-/* Custom Indicator Content via Slots */
+/* Custom Indicator Content via Slots    */
 /* ===================================== */
 
 ::slotted([slot^="indicator-"]) {
@@ -251,46 +307,42 @@ export const wizardStyles = `
 }
 
 /* ===================================== */
-/* Panels Viewport */
-/* Expose as CSS Part for panels container styling */
+/* Panels Viewport                       */
 /* ===================================== */
 
 .panels-viewport {
   position: relative;
   flex: 1;
   overflow: hidden;
-  /* Critical: hides off-screen panels */
   min-height: 0;
-  /* Allows flex child to shrink */
-  background: var(--ty-surface-elevated);
+  background: var(--ty-wizard-panels-bg);
 }
 
 /* ===================================== */
-/* Panels Wrapper (slides horizontally) */
+/* Panels Wrapper (slides horizontally)  */
 /* ===================================== */
 
 .panels-wrapper {
   display: flex;
   height: 100%;
-  transition: transform var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);
+  transition: transform var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);
   will-change: transform;
 }
 
 /* ===================================== */
-/* Slotted Step Panels */
+/* Slotted Step Panels                   */
 /* ===================================== */
 
 ::slotted(ty-step) {
-  width: var(--wizard-width, 100%);
+  width: var(--ty-wizard-width, 100%);
   height: 100%;
   flex-shrink: 0;
 }
 
 /* ===================================== */
-/* Accessibility & Motion Preferences */
+/* Accessibility & Motion Preferences    */
 /* ===================================== */
 
-/* Respect user's motion preferences */
 @media (prefers-reduced-motion: reduce) {
   .panels-wrapper {
     transition-duration: 0ms !important;
@@ -309,7 +361,6 @@ export const wizardStyles = `
   }
 }
 
-/* Screen reader only content */
 .sr-only {
   position: absolute;
   width: 1px;

package/lib/styles/wizard.js.map

@@ -1 +1 @@
-{"version":3,"file":"wizard.js","sourceRoot":"","sources":["../../src/styles/wizard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4S3B,CAAC"}
+{"version":3,"file":"wizard.js","sourceRoot":"","sources":["../../src/styles/wizard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoW3B,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-RC9";
 //# sourceMappingURL=version.d.ts.map

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-RC9';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tyrell-components",
-  "version": "1.0.0-RC7",
+  "version": "1.0.0-RC9",
   "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"