@uibit/text-rotator 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 UIBit Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,25 @@
+# Text Rotator
+
+[Interactive Demonstration](https://rawlings.github.io/uibit/components/text-rotator)
+
+Text Rotator cycles through an array of phrases inside a static sentence. It transitions between list items using vertical slide or 3D perspective flip animations, designed to highlight shifting value propositions within a compact, responsive boundary.
+
+## Value Delivery
+
+- **Dynamic Value Propositions** – Allows websites to cycle through key selling points, features, or target markets within a single headline, saving visual space.
+- **Controlled Motion** – Focuses animation exclusively on changing phrases, ensuring layouts do not move or shift as content sizes vary.
+- **Refined Customization** – Offers customizable slide and flip transitions, control speed intervals, and styling properties that align with brand themes.
+
+## Ideal Applications
+
+- **Headline Value Statements** – Displaying phrases like "We build [performant / accessible / beautiful] components" on homepage banners.
+- **Product Feature Lists** – Highlighting changing use cases or target audiences in marketing sections.
+- **Key Metrics Rotators** – Displaying rotating callouts or statistics in a space-saving headline.
+
+## Further Information
+
+Detailed design guidelines, customizable attributes, and integration examples are available on our documentation site.
+
+## Changelog
+
+Please see the [Changelog](CHANGELOG.md) for version history.

package/custom-elements.json

@@ -0,0 +1,303 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "default",
+            "module": "./text-rotator"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TextRotator",
+          "declaration": {
+            "name": "TextRotator",
+            "module": "./text-rotator"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/types"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css` :host { display: inline-block; vertical-align: text-bottom; font-size: var(--uibit-text-rotator-font-size, inherit); font-weight: var(--uibit-text-rotator-font-weight, inherit); color: var(--uibit-text-rotator-color, inherit); font-family: var(--uibit-text-rotator-font-family, inherit); line-height: var(--uibit-text-rotator-line-height, inherit); /* Pad the host horizontally to prevent clipping of long words, pull back with margin */ padding: 0 4rem; margin: 0 -4rem; } .stage { display: inline-block; position: relative; width: max-content; min-width: 1ch; perspective: 20rem; transform-style: preserve-3d; /* Pad stage vertically to allow fade mask space above/below line box */ padding: 1em 0; margin: -1em 0; /* Mask only the rotating words inside the stage */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 1em, #000 calc(100% - 1em), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 1em, #000 calc(100% - 1em), transparent 100%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .word { display: inline-block; position: absolute; top: 1em; /* Align absolute words to stage content-box */ left: 0; white-space: nowrap; transform-style: preserve-3d; } .word.active { position: relative; top: 0; } /* No animation on first render */ .word.initial { position: static; opacity: 1; } /* Slide */ .word.entering-slide { animation: slide-in var(--uibit-text-rotator-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1) forwards; } .word.leaving-slide { animation: slide-out var(--uibit-text-rotator-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1) forwards; } /* Flip */ .word.entering-flip { animation: flip-in var(--uibit-text-rotator-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1) forwards; transform-origin: 50% 0; } .word.leaving-flip { animation: flip-out var(--uibit-text-rotator-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1) forwards; transform-origin: 50% 100%; } @keyframes slide-in { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slide-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } } @keyframes flip-in { from { transform: rotateX(-80deg); opacity: 0; } to { transform: rotateX(0deg); opacity: 1; } } @keyframes flip-out { from { transform: rotateX(0deg); opacity: 1; } to { transform: rotateX(80deg); opacity: 0; } } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/text-rotator.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Cycles through an array of phrases inside a static sentence by animating between\nitems with a vertical slide or 3D flip transition. Designed to highlight changing\nvalue propositions without motion outside the component boundary.\n\nPass static prefix or wrapper text inside the default slot, and phrases to cycle through\ninside elements with `slot=\"text\"` (e.g. `<span slot=\"text\">phrase</span>`).",
+          "name": "TextRotator",
+          "cssProperties": [
+            {
+              "description": "Font size",
+              "name": "--uibit-text-rotator-font-size",
+              "default": "inherit"
+            },
+            {
+              "description": "Font weight",
+              "name": "--uibit-text-rotator-font-weight",
+              "default": "inherit"
+            },
+            {
+              "description": "Text color",
+              "name": "--uibit-text-rotator-color",
+              "default": "inherit"
+            },
+            {
+              "description": "Font family",
+              "name": "--uibit-text-rotator-font-family",
+              "default": "inherit"
+            },
+            {
+              "description": "Line height",
+              "name": "--uibit-text-rotator-line-height",
+              "default": "inherit"
+            },
+            {
+              "description": "Transition animation duration",
+              "name": "--uibit-text-rotator-duration",
+              "default": "0.4s"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "words",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private",
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "interval",
+              "type": {
+                "text": "number"
+              },
+              "default": "2500",
+              "description": "Interval in ms between rotations.",
+              "attribute": "interval"
+            },
+            {
+              "kind": "field",
+              "name": "transition",
+              "type": {
+                "text": "'slide' | 'flip'"
+              },
+              "default": "'slide'",
+              "description": "Transition style: 'slide' for vertical slide, 'flip' for 3D perspective flip.",
+              "attribute": "transition"
+            },
+            {
+              "kind": "field",
+              "name": "loop",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Loop indefinitely. Set to false to stop after the last word.",
+              "attribute": "loop"
+            },
+            {
+              "kind": "field",
+              "name": "_activeIndex",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_prevIndex",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "-1"
+            },
+            {
+              "kind": "field",
+              "name": "_animating",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_mounted",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_timer",
+              "type": {
+                "text": "ReturnType<typeof setInterval> | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_start",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_advance",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_parseCssDuration",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "val",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleSlotChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "{ word: string, index: number }"
+              },
+              "description": "Fired when the active word changes",
+              "name": "word-change"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "interval",
+              "type": {
+                "text": "number"
+              },
+              "default": "2500",
+              "description": "Interval in ms between rotations.",
+              "fieldName": "interval"
+            },
+            {
+              "name": "transition",
+              "type": {
+                "text": "'slide' | 'flip'"
+              },
+              "default": "'slide'",
+              "description": "Transition style: 'slide' for vertical slide, 'flip' for 3D perspective flip.",
+              "fieldName": "transition"
+            },
+            {
+              "name": "loop",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Loop indefinitely. Set to false to stop after the last word.",
+              "fieldName": "loop"
+            }
+          ],
+          "superclass": {
+            "name": "UIBitElement",
+            "package": "@uibit/core"
+          },
+          "tagName": "uibit-text-rotator",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TextRotator",
+          "declaration": {
+            "name": "TextRotator",
+            "module": "src/text-rotator.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "uibit-text-rotator",
+          "declaration": {
+            "name": "TextRotator",
+            "module": "src/text-rotator.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "TextRotator",
+            "module": "src/text-rotator.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/types.ts",
+      "declarations": [],
+      "exports": []
+    }
+  ]
+}

package/dist/frameworks/angular/index.ts

@@ -0,0 +1,38 @@
+import { Component, ChangeDetectionStrategy, ElementRef, input, effect, output, booleanAttribute, numberAttribute } from '@angular/core';
+import '@uibit/text-rotator';
+import type { TextRotator as HTMLElementClass } from '@uibit/text-rotator';
+
+@Component({
+  selector: 'uibit-text-rotator',
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  host: {
+    '(word-change)': 'wordChange.emit($event)'
+  }
+})
+export class NgxTextRotator {
+  constructor(private el: ElementRef<HTMLElementClass>) {
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.interval = this.interval();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.transition = this.transition();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.loop = this.loop();
+      }
+    });
+  }
+
+  readonly interval = input<number, any>(2500, { transform: numberAttribute });
+  readonly transition = input<'slide' | 'flip', any>('slide');
+  readonly loop = input<boolean, any>(true, { transform: booleanAttribute });
+
+  readonly wordChange = output<CustomEvent<{ word: string, index: number }>>();
+}

package/dist/frameworks/astro/index.d.ts

@@ -0,0 +1,10 @@
+import type { TextRotator as HTMLElementClass } from '@uibit/text-rotator';
+import '@uibit/text-rotator';
+
+declare global {
+  namespace astroHTML.JSX {
+    interface IntrinsicElements {
+      'uibit-text-rotator': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
+    }
+  }
+}

package/dist/frameworks/nuxt/index.ts

@@ -0,0 +1,7 @@
+import { defineNuxtPlugin } from '#app';
+
+export default defineNuxtPlugin(() => {
+  if (process.client) {
+    import('@uibit/text-rotator');
+  }
+});

package/dist/frameworks/preact/index.d.ts

@@ -0,0 +1,15 @@
+import type { JSX } from 'preact';
+import type { TextRotator as HTMLElementClass } from '@uibit/text-rotator';
+import '@uibit/text-rotator';
+
+declare module 'preact' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-text-rotator': JSX.HTMLAttributes<HTMLElementClass> & {
+      interval?: number;
+      transition?: 'slide' | 'flip';
+      loop?: boolean;
+      };
+    }
+  }
+}

package/dist/frameworks/qwik/index.tsx

@@ -0,0 +1,10 @@
+import { component$, Slot } from '@builder.io/qwik';
+import '@uibit/text-rotator';
+
+export const TextRotator = component$<any>((props) => {
+  return (
+    <uibit-text-rotator {...props}>
+      <Slot />
+    </uibit-text-rotator>
+  );
+});

package/dist/frameworks/react/index.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ClassAttributes } from 'react';
+import type { TextRotator as HTMLElementClass } from '@uibit/text-rotator';
+import '@uibit/text-rotator';
+
+declare global {
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        'uibit-text-rotator': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
+          children?: React.ReactNode;
+          class?: string;
+      interval?: number;
+      transition?: 'slide' | 'flip';
+      loop?: boolean;
+      onWordChange?: (event: any) => void;
+        };
+      }
+    }
+  }
+}

package/dist/frameworks/solid/index.d.ts

@@ -0,0 +1,16 @@
+import type { JSX } from 'solid-js';
+import type { TextRotator as HTMLElementClass } from '@uibit/text-rotator';
+import '@uibit/text-rotator';
+
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-text-rotator': Partial<HTMLElementClass> & JSX.HTMLAttributes<HTMLElementClass> & {
+              interval?: number;
+      transition?: 'slide' | 'flip';
+      loop?: boolean;
+      "on:word-change"?: (event: CustomEvent) => void;
+      };
+    }
+  }
+}

package/dist/frameworks/stencil/index.d.ts

@@ -0,0 +1,14 @@
+import type { TextRotator as HTMLElementClass } from '@uibit/text-rotator';
+import '@uibit/text-rotator';
+
+declare module '@stencil/core' {
+  export namespace JSX {
+    interface IntrinsicElements {
+      'uibit-text-rotator': HTMLElementClass & {
+    interval?: number;
+    transition?: 'slide' | 'flip';
+    loop?: boolean;
+      };
+    }
+  }
+}

package/dist/frameworks/svelte/index.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import '@uibit/text-rotator';
+  import type { TextRotator as HTMLElementClass } from '@uibit/text-rotator';
+  
+  let {
+    interval = undefined,
+      transition = undefined,
+      loop = undefined,
+      children
+  } = $props<{
+    children?: any;
+    interval?: number;
+    transition?: 'slide' | 'flip';
+    loop?: boolean;
+  
+  }>();
+  
+  let elementRef: HTMLElementClass | null = $state(null);
+  
+  $effect(() => {
+    if (elementRef && interval !== undefined) {
+      elementRef.interval = interval;
+    }
+    if (elementRef && transition !== undefined) {
+      elementRef.transition = transition;
+    }
+    if (elementRef && loop !== undefined) {
+      elementRef.loop = loop;
+    }
+  });
+  
+</script>
+
+<uibit-text-rotator bind:this={elementRef} {...$$restProps}>
+
+  {#if children}
+    {@render children()}
+  {:else}
+    <slot />
+  {/if}
+</uibit-text-rotator>

package/dist/frameworks/vue/index.ts

@@ -0,0 +1,26 @@
+import { defineComponent, h } from 'vue';
+import type { TextRotator as HTMLElementClass } from '@uibit/text-rotator';
+import '@uibit/text-rotator';
+
+export const TextRotator = defineComponent({
+  name: 'TextRotator',
+  props: {
+    interval: { type: [String, Number, Boolean, Array, Object] as any },
+    transition: { type: [String, Number, Boolean, Array, Object] as any },
+    loop: { type: [String, Number, Boolean, Array, Object] as any }
+  },
+  emits: ['word-change'],
+  setup(props, { slots, emit }) {
+    return () => {
+      const eventListeners: Record<string, any> = {};
+      eventListeners['onWord-change'] = (event: Event) => {
+        emit('word-change', event);
+      };
+
+      return h('uibit-text-rotator', {
+        ...props,
+        ...eventListeners
+      }, slots.default?.());
+    };
+  }
+});

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default, TextRotator } from './text-rotator';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACtD,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default, TextRotator } from './text-rotator';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACtD,cAAc,SAAS,CAAC"}

package/dist/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA6FlB,CAAC"}

package/dist/styles.js

@@ -0,0 +1,96 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-block;
+    vertical-align: text-bottom;
+    font-size: var(--uibit-text-rotator-font-size, inherit);
+    font-weight: var(--uibit-text-rotator-font-weight, inherit);
+    color: var(--uibit-text-rotator-color, inherit);
+    font-family: var(--uibit-text-rotator-font-family, inherit);
+    line-height: var(--uibit-text-rotator-line-height, inherit);
+
+    /* Pad the host horizontally to prevent clipping of long words, pull back with margin */
+    padding: 0 4rem;
+    margin: 0 -4rem;
+  }
+
+  .stage {
+    display: inline-block;
+    position: relative;
+    width: max-content;
+    min-width: 1ch;
+    perspective: 20rem;
+    transform-style: preserve-3d;
+
+    /* Pad stage vertically to allow fade mask space above/below line box */
+    padding: 1em 0;
+    margin: -1em 0;
+
+    /* Mask only the rotating words inside the stage */
+    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 1em, #000 calc(100% - 1em), transparent 100%);
+    mask-image: linear-gradient(to bottom, transparent 0%, #000 1em, #000 calc(100% - 1em), transparent 100%);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
+  .word {
+    display: inline-block;
+    position: absolute;
+    top: 1em; /* Align absolute words to stage content-box */
+    left: 0;
+    white-space: nowrap;
+    transform-style: preserve-3d;
+  }
+
+  .word.active {
+    position: relative;
+    top: 0;
+  }
+
+  /* No animation on first render */
+  .word.initial {
+    position: static;
+    opacity: 1;
+  }
+
+  /* Slide */
+  .word.entering-slide {
+    animation: slide-in var(--uibit-text-rotator-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
+
+  .word.leaving-slide {
+    animation: slide-out var(--uibit-text-rotator-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
+
+  /* Flip */
+  .word.entering-flip {
+    animation: flip-in var(--uibit-text-rotator-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    transform-origin: 50% 0;
+  }
+
+  .word.leaving-flip {
+    animation: flip-out var(--uibit-text-rotator-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    transform-origin: 50% 100%;
+  }
+
+  @keyframes slide-in {
+    from { transform: translateY(100%); opacity: 0; }
+    to   { transform: translateY(0);   opacity: 1; }
+  }
+
+  @keyframes slide-out {
+    from { transform: translateY(0);    opacity: 1; }
+    to   { transform: translateY(-100%); opacity: 0; }
+  }
+
+  @keyframes flip-in {
+    from { transform: rotateX(-80deg); opacity: 0; }
+    to   { transform: rotateX(0deg);   opacity: 1; }
+  }
+
+  @keyframes flip-out {
+    from { transform: rotateX(0deg);   opacity: 1; }
+    to   { transform: rotateX(80deg);  opacity: 0; }
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FxB,CAAC"}

package/dist/text-rotator.d.ts

@@ -0,0 +1,44 @@
+import { UIBitElement } from '@uibit/core';
+/**
+ * Cycles through an array of phrases inside a static sentence by animating between
+ * items with a vertical slide or 3D flip transition. Designed to highlight changing
+ * value propositions without motion outside the component boundary.
+ *
+ * Pass static prefix or wrapper text inside the default slot, and phrases to cycle through
+ * inside elements with `slot="text"` (e.g. `<span slot="text">phrase</span>`).
+ *
+ * @fires {{ word: string, index: number }} word-change - Fired when the active word changes
+ *
+ * @cssprop [--uibit-text-rotator-font-size=inherit] - Font size
+ * @cssprop [--uibit-text-rotator-font-weight=inherit] - Font weight
+ * @cssprop [--uibit-text-rotator-color=inherit] - Text color
+ * @cssprop [--uibit-text-rotator-font-family=inherit] - Font family
+ * @cssprop [--uibit-text-rotator-line-height=inherit] - Line height
+ * @cssprop [--uibit-text-rotator-duration=0.4s] - Transition animation duration
+ */
+export declare class TextRotator extends UIBitElement {
+    static styles: import("lit").CSSResult;
+    private words;
+    /** Interval in ms between rotations. */
+    interval: number;
+    /** Transition style: 'slide' for vertical slide, 'flip' for 3D perspective flip. */
+    transition: 'slide' | 'flip';
+    /** Loop indefinitely. Set to false to stop after the last word. */
+    loop: boolean;
+    private _activeIndex;
+    private _prevIndex;
+    private _animating;
+    private _mounted;
+    private _timer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _start;
+    private _advance;
+    private _parseCssDuration;
+    private _handleSlotChange;
+    render(): import("lit").TemplateResult<1>;
+}
+export default TextRotator;
+//# sourceMappingURL=text-rotator.d.ts.map

package/dist/text-rotator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-rotator.d.ts","sourceRoot":"","sources":["../src/text-rotator.ts"],"names":[],"mappings":"AAEA,OAAO,EAAiB,YAAY,EAAE,MAAM,aAAa,CAAC;AAI1D;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,WAAY,SAAQ,YAAY;IAC3C,MAAM,CAAC,MAAM,0BAAU;IAEd,OAAO,CAAC,KAAK,CAAgB;IAEtC,wCAAwC;IACZ,QAAQ,SAAQ;IAE5C,oFAAoF;IACxD,UAAU,EAAE,OAAO,GAAG,MAAM,CAAW;IAEnE,mEAAmE;IACtC,IAAI,UAAQ;IAEhC,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,UAAU,CAAM;IACxB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,MAAM,CAAC,CAAiC;IAEhD,iBAAiB,SAGhB;IAED,oBAAoB,SAGnB;IAED,YAAY,SAGX;IAED,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QAUpC;IAED,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,QAAQ;IAqBhB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,iBAAiB;IAWzB,MAAM,oCAaL;CACF;eAEc,WAAW"}

package/dist/text-rotator.js

@@ -0,0 +1,157 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from 'lit';
+import { keyed } from 'lit/directives/keyed.js';
+import { customElement, UIBitElement } from '@uibit/core';
+import { property, state } from 'lit/decorators.js';
+import { styles } from './styles';
+/**
+ * Cycles through an array of phrases inside a static sentence by animating between
+ * items with a vertical slide or 3D flip transition. Designed to highlight changing
+ * value propositions without motion outside the component boundary.
+ *
+ * Pass static prefix or wrapper text inside the default slot, and phrases to cycle through
+ * inside elements with `slot="text"` (e.g. `<span slot="text">phrase</span>`).
+ *
+ * @fires {{ word: string, index: number }} word-change - Fired when the active word changes
+ *
+ * @cssprop [--uibit-text-rotator-font-size=inherit] - Font size
+ * @cssprop [--uibit-text-rotator-font-weight=inherit] - Font weight
+ * @cssprop [--uibit-text-rotator-color=inherit] - Text color
+ * @cssprop [--uibit-text-rotator-font-family=inherit] - Font family
+ * @cssprop [--uibit-text-rotator-line-height=inherit] - Line height
+ * @cssprop [--uibit-text-rotator-duration=0.4s] - Transition animation duration
+ */
+let TextRotator = class TextRotator extends UIBitElement {
+    constructor() {
+        super(...arguments);
+        this.words = [];
+        /** Interval in ms between rotations. */
+        this.interval = 2500;
+        /** Transition style: 'slide' for vertical slide, 'flip' for 3D perspective flip. */
+        this.transition = 'slide';
+        /** Loop indefinitely. Set to false to stop after the last word. */
+        this.loop = true;
+        this._activeIndex = 0;
+        this._prevIndex = -1;
+        this._animating = false;
+        this._mounted = false;
+    }
+    static { this.styles = styles; }
+    connectedCallback() {
+        super.connectedCallback();
+        this._start();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        clearInterval(this._timer);
+    }
+    firstUpdated() {
+        // Mark as mounted so the first word renders without an enter animation
+        requestAnimationFrame(() => { this._mounted = true; });
+    }
+    updated(changed) {
+        if (changed.has('words') && this.words.length) {
+            clearInterval(this._timer);
+            this._activeIndex = 0;
+            this._prevIndex = -1;
+            this._animating = false;
+            this._mounted = false;
+            requestAnimationFrame(() => { this._mounted = true; });
+            this._start();
+        }
+    }
+    _start() {
+        if (!this.words.length)
+            return;
+        this._timer = setInterval(() => this._advance(), this.interval);
+    }
+    _advance() {
+        if (this._animating || !this.words.length)
+            return;
+        const next = (this._activeIndex + 1) % this.words.length;
+        if (!this.loop && next === 0) {
+            clearInterval(this._timer);
+            return;
+        }
+        this._animating = true;
+        this._prevIndex = this._activeIndex;
+        this._activeIndex = next;
+        this.dispatchCustomEvent('word-change', { word: this.words[this._activeIndex], index: this._activeIndex });
+        const durationStr = this.getCssPropertyValue('--uibit-text-rotator-duration') || '0.4s';
+        const dur = this._parseCssDuration(durationStr);
+        setTimeout(() => {
+            this._prevIndex = -1;
+            this._animating = false;
+        }, dur + 50);
+    }
+    _parseCssDuration(val) {
+        const trimmed = val.trim();
+        if (!trimmed)
+            return 400;
+        if (trimmed.endsWith('ms')) {
+            return parseFloat(trimmed);
+        }
+        if (trimmed.endsWith('s')) {
+            return parseFloat(trimmed) * 1000;
+        }
+        return parseFloat(trimmed) || 400;
+    }
+    _handleSlotChange(e) {
+        const slot = e.target;
+        const nodes = slot.assignedNodes({ flatten: true });
+        const words = nodes
+            .map(node => node.textContent?.trim() ?? '')
+            .filter(text => text !== '');
+        if (words.length > 0) {
+            this.words = words;
+        }
+    }
+    render() {
+        const t = this.transition;
+        const activeWord = this.words[this._activeIndex] ?? '';
+        const prevWord = this._prevIndex >= 0 ? this.words[this._prevIndex] : null;
+        return html `
+      <slot></slot>
+      <slot name="text" @slotchange=${this._handleSlotChange} style="display: none;"></slot>
+      <span class="stage">
+        ${prevWord !== null ? html `<span class="word leaving-${t}" aria-hidden="true">${prevWord}</span>` : ''}
+        ${keyed(this._activeIndex, html `<span class="word ${this._mounted ? `entering-${t}` : 'initial'} active">${activeWord}</span>`)}
+      </span>
+    `;
+    }
+};
+__decorate([
+    state()
+], TextRotator.prototype, "words", void 0);
+__decorate([
+    property({ type: Number })
+], TextRotator.prototype, "interval", void 0);
+__decorate([
+    property({ type: String })
+], TextRotator.prototype, "transition", void 0);
+__decorate([
+    property({ type: Boolean })
+], TextRotator.prototype, "loop", void 0);
+__decorate([
+    state()
+], TextRotator.prototype, "_activeIndex", void 0);
+__decorate([
+    state()
+], TextRotator.prototype, "_prevIndex", void 0);
+__decorate([
+    state()
+], TextRotator.prototype, "_animating", void 0);
+__decorate([
+    state()
+], TextRotator.prototype, "_mounted", void 0);
+TextRotator = __decorate([
+    customElement('uibit-text-rotator')
+], TextRotator);
+export { TextRotator };
+export default TextRotator;
+//# sourceMappingURL=text-rotator.js.map

package/dist/text-rotator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-rotator.js","sourceRoot":"","sources":["../src/text-rotator.ts"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+import type TextRotator from './text-rotator';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uibit-text-rotator': TextRotator;
+    }
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,WAAW,MAAM,gBAAgB,CAAC;AAE9C,OAAO,CAAC,MAAM,CAAC;IACf,UAAU,qBAAqB;QAC3B,oBAAoB,EAAE,WAAW,CAAC;KACrC;CACA"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@uibit/text-rotator",
+  "version": "0.1.0",
+  "description": "Rotates a single word inside a static sentence block with smooth vertical slide or 3D flip transitions. Designed to pull attention to changing value propositions.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./custom-elements.json": "./custom-elements.json",
+    "./react": "./dist/frameworks/react/index.d.ts",
+    "./vue": "./dist/frameworks/vue/index.ts",
+    "./svelte": "./dist/frameworks/svelte/index.svelte",
+    "./angular": "./dist/frameworks/angular/index.ts",
+    "./solid": "./dist/frameworks/solid/index.d.ts",
+    "./astro": "./dist/frameworks/astro/index.astro",
+    "./qwik": "./dist/frameworks/qwik/index.tsx",
+    "./nuxt": "./dist/frameworks/nuxt/index.ts",
+    "./preact": "./dist/frameworks/preact/index.d.ts",
+    "./stencil": "./dist/frameworks/stencil/index.d.ts"
+  },
+  "files": [
+    "dist",
+    "package.json",
+    "README.md",
+    "LICENSE",
+    "custom-elements.json"
+  ],
+  "keywords": [
+    "text-rotator",
+    "animation",
+    "marketing",
+    "web-component",
+    "lit"
+  ],
+  "author": "Jonathan Rawlings",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Rawlings/uibit",
+    "directory": "packages/components/text-rotator"
+  },
+  "dependencies": {
+    "@uibit/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.43",
+    "lit": "^3.3.3",
+    "typescript": "7.0.2",
+    "@uibit/codegen": "0.1.0"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0",
+    "react": ">=18",
+    "vue": ">=3",
+    "svelte": ">=4 || ^5",
+    "@angular/core": ">=14"
+  },
+  "customElements": "custom-elements.json",
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    }
+  },
+  "uibit": {
+    "id": "text-rotator",
+    "title": "Text Rotator",
+    "category": "Text",
+    "tagName": "uibit-text-rotator"
+  },
+  "scripts": {
+    "build": "cem analyze --globs 'src/**/*.ts' --litelement && uibit-codegen --package . && tsc",
+    "dev": "concurrently \"cem analyze --globs 'src/**/*.ts' --litelement --watch\" \"tsc --watch\"",
+    "analyze": "cem analyze --globs 'src/**/*.ts' --litelement",
+    "typecheck": "tsc --noEmit"
+  }
+}