@descope-ui/descope-timer-button 3.4.0 → 3.5.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [3.5.0](https://github.com/descope/web-components-ui/compare/web-components-ui-3.4.0...web-components-ui-3.5.0) (2026-05-07)
+
+
+### Features
+
+* **timer-button:** add timer-reversed and timer-inside options ([#1017](https://github.com/descope/web-components-ui/issues/1017)) ([bf99f17](https://github.com/descope/web-components-ui/commit/bf99f1742bbe44639e4630661dfbf2ef6418d563))
+
 ## [3.4.0](https://github.com/descope/web-components-ui/compare/web-components-ui-3.3.5...web-components-ui-3.4.0) (2026-05-07)
 
 ## [3.3.5](https://github.com/descope/web-components-ui/compare/web-components-ui-3.3.4...web-components-ui-3.3.5) (2026-05-06)

package/e2e/descope-timer-button.spec.ts

@@ -6,6 +6,8 @@ const componentAttributes = {
   size: ['xs', 'sm', 'md', 'lg'],
   horizontal: ['true', 'false'],
   'timer-hide-icon': ['true', 'false'],
+  'timer-position': ['start', 'end'],
+  'timer-inside': ['true', 'false'],
   'full-width': ['true', 'false'],
   'button-variant': ['contained', 'outline', 'link'],
   'button-mode': ['primary', 'secondary'],
@@ -20,6 +22,28 @@ const presets = {
   'full width horizontal': { 'full-width': 'true', horizontal: 'true' },
   'full width vertical': { 'full-width': 'true' },
   'horizontal with gap': { horizontal: 'true', 'st-gap': '35' },
+  'timer reversed horizontal': { 'timer-position': 'end', horizontal: 'true' },
+  'timer inside reversed': {
+    'timer-inside': 'true',
+    'timer-position': 'end',
+  },
+  'timer inside full width': {
+    'timer-inside': 'true',
+    'full-width': 'true',
+  },
+  'timer inside full width reversed': {
+    'timer-inside': 'true',
+    'full-width': 'true',
+    'timer-position': 'end',
+  },
+  'timer inside outline': {
+    'timer-inside': 'true',
+    'button-variant': 'outline',
+  },
+  'timer inside link': {
+    'timer-inside': 'true',
+    'button-variant': 'link',
+  },
 };
 
 test.describe('theme', () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/descope-timer-button",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "exports": {
     ".": {
       "import": "./src/component/index.js"
@@ -14,15 +14,15 @@
   },
   "devDependencies": {
     "@playwright/test": "1.58.2",
-    "e2e-utils": "3.4.0",
-    "test-drivers": "3.4.0",
-    "test-assets": "3.4.0"
+    "e2e-utils": "3.5.0",
+    "test-drivers": "3.5.0",
+    "test-assets": "3.5.0"
   },
   "dependencies": {
-    "@descope-ui/common": "3.4.0",
-    "@descope-ui/theme-globals": "3.4.0",
-    "@descope-ui/descope-timer": "3.4.0",
-    "@descope-ui/descope-button": "3.4.0"
+    "@descope-ui/common": "3.5.0",
+    "@descope-ui/theme-globals": "3.5.0",
+    "@descope-ui/descope-timer": "3.5.0",
+    "@descope-ui/descope-button": "3.5.0"
   },
   "publishConfig": {
     "link-workspace-packages": false

package/src/component/TimerButtonClass.js

@@ -10,6 +10,8 @@ import {
   getComponentName,
   injectStyle,
 } from '@descope-ui/common/components-helpers';
+import { TimerClass } from '@descope-ui/descope-timer/class';
+import { ButtonClass } from '@descope-ui/descope-button/class';
 
 export const componentName = getComponentName('timer-button');
 
@@ -67,26 +69,85 @@ class RawTimerButton extends BaseClass {
       .wrapper {
         display: flex;
         flex-direction: column;
-        gap: 0.5em;
         align-items: center;
         width: 100%;
       }
-      .timer {
+      /* allow timer to grow along the main axis in the wrapper flex container */
+      :host(:not([timer-inside="true"])) .timer {
         flex: 1;
       }
+      :host([timer-inside="true"]) .timer {
+        flex: 0 0 auto;
+      }
     `,
       this,
     );
 
+    this.wrapper = this.shadowRoot.querySelector('.wrapper');
     this.timer = this.shadowRoot.querySelector('.timer');
     this.button = this.shadowRoot.querySelector('.button');
+    this.forwardingSlot = this.shadowRoot.querySelector('.button slot');
 
     this.timer.addEventListener('timer-started', () => this.onTimerStarted());
     this.timer.addEventListener('timer-ended', () => this.onTimerEnded());
 
+    this.syncTimerPlacement();
+
     this.button.addEventListener('click', this.onClick.bind(this));
   }
 
+  static get observedAttributes() {
+    return [
+      ...(super.observedAttributes || []),
+      'timer-inside',
+      'timer-position',
+    ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback?.(name, oldValue, newValue);
+    if (name === 'timer-inside' || name === 'timer-position') {
+      this.syncTimerPlacement();
+    }
+  }
+
+  get #isTimerInside() {
+    return this.getAttribute('timer-inside') === 'true';
+  }
+
+  get #isReversed() {
+    return this.getAttribute('timer-position') === 'end';
+  }
+
+  syncTimerPlacement() {
+    if (this.#isTimerInside) {
+      this.#placeTimerInsideButton(this.#isReversed);
+    } else {
+      this.#placeTimerOutsideButton();
+    }
+  }
+
+  #placeTimerInsideButton(reversed) {
+    if (reversed) {
+      // timer after label text (right)
+      if (this.timer.previousSibling !== this.forwardingSlot) {
+        this.button.appendChild(this.timer);
+      }
+    } else {
+      // timer before label text (left) — matches default outside position (above/before button)
+      if (this.timer.nextSibling !== this.forwardingSlot) {
+        this.button.insertBefore(this.timer, this.forwardingSlot);
+      }
+    }
+  }
+
+  #placeTimerOutsideButton() {
+    // move timer back as a wrapper sibling, before the button so flex-column puts it above
+    if (this.timer.parentElement !== this.wrapper) {
+      this.wrapper.insertBefore(this.timer, this.button);
+    }
+  }
+
   set onclick(val) {
     this.button.onclick = val;
   }
@@ -134,10 +195,25 @@ class RawTimerButton extends BaseClass {
   }
 }
 
-const { host } = {
+const {
+  host,
+  nestedTimer,
+  nestedButton,
+  timerInsideNotReversed,
+  timerInsideReversed,
+} = {
   host: { selector: () => ':host' },
-  icon: { selector: '.icon' },
-  timer: { selector: '.timer' },
+  nestedTimer: { selector: () => ':host([timer-inside="true"]) .timer' },
+  nestedButton: {
+    selector: () => ':host([timer-inside="true"]) .button',
+  },
+  timerInsideNotReversed: {
+    selector: () =>
+      ':host([timer-inside="true"]:not([timer-position="end"])) .timer',
+  },
+  timerInsideReversed: {
+    selector: () => ':host([timer-inside="true"][timer-position="end"]) .timer',
+  },
 };
 
 export const TimerButtonClass = compose(
@@ -147,6 +223,30 @@ export const TimerButtonClass = compose(
       flexDirection: {},
       hostWidth: { ...host, property: 'width' },
       hostDirection: { ...host, property: 'direction' },
+      timerTextColor: {
+        ...nestedTimer,
+        property: TimerClass.cssVarList.textColor,
+      },
+      timerIconColor: {
+        ...nestedTimer,
+        property: TimerClass.cssVarList.iconColor,
+      },
+      timerHostWidth: {
+        ...nestedTimer,
+        property: TimerClass.cssVarList.hostWidth,
+      },
+      buttonLabelSpacing: {
+        ...nestedButton,
+        property: ButtonClass.cssVarList.labelSpacing,
+      },
+      timerInsideGapEnd: {
+        ...timerInsideNotReversed,
+        property: 'margin-inline-end',
+      },
+      timerInsideGapStart: {
+        ...timerInsideReversed,
+        property: 'margin-inline-start',
+      },
     },
   }),
   draggableMixin,

package/src/theme.js

@@ -11,11 +11,35 @@ const timerButton = {
 
   _horizontal: {
     [vars.flexDirection]: 'row',
+    timerPosition: {
+      end: {
+        [vars.flexDirection]: 'row-reverse',
+      },
+    },
+  },
+
+  timerPosition: {
+    end: {
+      [vars.flexDirection]: 'column-reverse',
+    },
   },
 
   _fullWidth: {
     [vars.hostWidth]: '100%',
   },
+
+  _timerInside: {
+    [vars.timerTextColor]: 'currentColor',
+    [vars.timerIconColor]: 'currentColor',
+    [vars.timerHostWidth]: 'auto',
+    [vars.buttonLabelSpacing]: '0',
+    [vars.timerInsideGapEnd]: `var(${vars.gap})`,
+    timerPosition: {
+      end: {
+        [vars.timerInsideGapStart]: `var(${vars.gap})`,
+      },
+    },
+  },
 };
 
 export default timerButton;

package/stories/descope-timer-button.stories.js

@@ -13,6 +13,8 @@ const Template = ({
   'timer-seconds': timerSeconds,
   'timer-hide-icon': timerHideIcon,
   'timer-paused': timerPaused,
+  'timer-position': timerPosition,
+  'timer-inside': timerInside,
   size,
   direction,
   horizontal,
@@ -28,6 +30,8 @@ const Template = ({
     timer-seconds="${timerSeconds}"
     timer-hide-icon="${timerHideIcon || false}"
     timer-paused="${timerPaused || false}"
+    timer-position="${timerPosition || 'start'}"
+    timer-inside="${timerInside || false}"
     size="${size}"
     horizontal="${horizontal || false}"
     full-width="${fullWidth || false}"
@@ -76,6 +80,19 @@ export default {
         type: 'boolean',
       },
     },
+    'timer-position': {
+      name: 'Timer Position',
+      options: ['start', 'end'],
+      control: {
+        type: 'radio',
+      },
+    },
+    'timer-inside': {
+      name: 'Timer Inside Button',
+      control: {
+        type: 'boolean',
+      },
+    },
     'st-gap': {
       name: 'Gap',
       control: { type: 'text' },
@@ -94,6 +111,8 @@ Default.args = {
   'timer-seconds': 5,
   'timer-hide-icon': false,
   'timer-paused': false,
+  'timer-position': 'start',
+  'timer-inside': false,
   horizontal: false,
   'text-align': 'center',
   'button-variant': 'contained',