@refinitiv-ui/elements 6.0.0-next.3 → 6.0.2

package/lib/checkbox/index.js

@@ -20,13 +20,14 @@ let Checkbox = class Checkbox extends ControlElement {
     constructor() {
         super(...arguments);
         this.defaultRole = 'checkbox';
-        this._checked = false;
-        this._indeterminate = false;
         /**
-         * Indicates current state of checkbox
-         * @ignore
+         * Value of checkbox
          */
-        this.ariaChecked = String(this.checked);
+        this.checked = false;
+        /**
+         * Set state to indeterminate
+         */
+        this.indeterminate = false;
     }
     /**
      * Element version number
@@ -69,45 +70,25 @@ let Checkbox = class Checkbox extends ControlElement {
     `;
     }
     /**
-     * Value of checkbox
-     * @param value new checked value
-     * @default false
+     * Called before update() to compute values needed during the update.
+     * @param changedProperties Properties that has changed
+     * @returns {void}
      */
-    set checked(value) {
-        const oldValue = this._checked;
-        if (oldValue !== value) {
-            this._checked = value;
-            // remove indeterminate if change state to checked
-            if (this._checked) {
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('checked')) {
+            if (this.checked) {
                 this.indeterminate = false;
             }
-            this.ariaChecked = String(value);
-            void this.requestUpdate('checked', oldValue);
+            this.setAttribute('aria-checked', String(this.checked));
         }
-    }
-    get checked() {
-        return this._checked;
-    }
-    /**
-     * Set state to indeterminate
-     * @param value new indeterminate value
-     * @default false
-     */
-    set indeterminate(value) {
-        const oldValue = this._indeterminate;
-        if (oldValue !== value) {
-            this._indeterminate = value;
-            // remove checked if change state to indeterminate
-            if (value) {
+        if (changedProperties.has('indeterminate')) {
+            if (this.indeterminate) {
                 this.checked = false;
             }
-            this.ariaChecked = value ? 'mixed' : String(this.checked);
-            void this.requestUpdate('indeterminate', oldValue);
+            this.setAttribute('aria-checked', this.indeterminate ? 'mixed' : String(this.checked));
         }
     }
-    get indeterminate() {
-        return this._indeterminate;
-    }
     /**
      * Called once after the component is first rendered
      * @param changedProperties map of changed properties with old values
@@ -176,13 +157,10 @@ let Checkbox = class Checkbox extends ControlElement {
 };
 __decorate([
     property({ type: Boolean, reflect: true })
-], Checkbox.prototype, "checked", null);
+], Checkbox.prototype, "checked", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], Checkbox.prototype, "indeterminate", null);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'aria-checked' })
-], Checkbox.prototype, "ariaChecked", void 0);
+], Checkbox.prototype, "indeterminate", void 0);
 __decorate([
     query('[part=label]', true)
 ], Checkbox.prototype, "labelEl", void 0);

package/lib/checkbox/themes/halo/dark/index.js

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/icon/themes/halo/dark';
 import '@refinitiv-ui/elements/tooltip/themes/halo/dark';
 
-elf.customStyles.define('ef-checkbox', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation;--check-color:#6678FF;color:#ccc}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#0d0d0d;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border:1px solid #404040;width:14px;height:14px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#6678ff);width:95%;height:95%}:host [part=label]{margin:0 7px;cursor:default}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:70%;height:1px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#ccc)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{border-color:#334bff;box-shadow:0 0 0 #334bff}}:host(:not([readonly])) [part=container]{cursor:pointer}:host(:hover:not([checked]):not([indeterminate]):not([readonly])) [part=container]{border-color:grey}:host(:hover:not([readonly])){color:#fff}:host([disabled]),:host([disabled]) [part=label]{opacity:.5}:host([checked]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]:not([checked])) [part=container]{border-color:#404040}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}:host([indeterminate]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]) [part=container],:host(:focus[readonly][indeterminate]) [part=container]{border-color:#334bff}');
+elf.customStyles.define('ef-checkbox', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation;--check-color:#6678FF;color:#ccc}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#0d0d0d;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.5);-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;border:1px solid #404040;width:14px;height:14px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#6678ff);width:95%;height:95%}:host [part=label]{margin:0 7px;cursor:default}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:70%;height:1px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#ccc)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{border-color:#334bff;box-shadow:0 0 0 #334bff}}:host(:not([readonly])) [part=container]{cursor:pointer}:host(:hover:not([checked]):not([indeterminate]):not([readonly])) [part=container]{border-color:grey}:host(:hover:not([readonly])){color:#fff}:host([disabled]),:host([disabled]) [part=label]{opacity:.5}:host([checked]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]:not([checked])) [part=container]{border-color:#404040}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}:host([indeterminate]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]) [part=container],:host(:focus[readonly][indeterminate]) [part=container]{border-color:#334bff}');

package/lib/checkbox/themes/halo/light/index.js

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/icon/themes/halo/light';
 import '@refinitiv-ui/elements/tooltip/themes/halo/light';
 
-elf.customStyles.define('ef-checkbox', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation;--check-color:#334BFF;color:#404040}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#fff;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.25);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border:1px solid #595959;width:14px;height:14px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#334bff);width:95%;height:95%}:host [part=label]{margin:0 7px;cursor:default}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:70%;height:1px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#404040)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{border-color:#334bff;box-shadow:0 0 0 #334bff}}:host(:not([readonly])) [part=container]{cursor:pointer}:host(:hover:not([checked]):not([indeterminate]):not([readonly])) [part=container]{border-color:#0d0d0d}:host(:hover:not([readonly])){color:#0d0d0d}:host([disabled]),:host([disabled]) [part=label]{opacity:.5}:host([checked]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]:not([checked])) [part=container]{border-color:#595959}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}:host([indeterminate]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]) [part=container],:host(:focus[readonly][indeterminate]) [part=container]{border-color:#334bff}');
+elf.customStyles.define('ef-checkbox', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation;--check-color:#334BFF;color:#404040}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#fff;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.25);-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;border:1px solid #595959;width:14px;height:14px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#334bff);width:95%;height:95%}:host [part=label]{margin:0 7px;cursor:default}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:70%;height:1px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#404040)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{border-color:#334bff;box-shadow:0 0 0 #334bff}}:host(:not([readonly])) [part=container]{cursor:pointer}:host(:hover:not([checked]):not([indeterminate]):not([readonly])) [part=container]{border-color:#0d0d0d}:host(:hover:not([readonly])){color:#0d0d0d}:host([disabled]),:host([disabled]) [part=label]{opacity:.5}:host([checked]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]:not([checked])) [part=container]{border-color:#595959}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}:host([indeterminate]) [part=container]{border:1px solid #334bff}:host(:focus[readonly]) [part=container],:host(:focus[readonly][indeterminate]) [part=container]{border-color:#334bff}');

package/lib/checkbox/themes/solar/charcoal/index.js

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
 import '@refinitiv-ui/elements/tooltip/themes/solar/charcoal';
 
-elf.customStyles.define('ef-checkbox', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#000;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.6);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border:1px solid #4a4a52;height:11px;width:11px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#f93);border-width:0 2px 2px 0;width:95%;height:95%}:host [part=label]{cursor:default;margin:0 4px}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:5px;height:5px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#e2e2e2)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65;color:rgba(194,194,194,.6)}:host([disabled][checked]) [part=check],:host([disabled][indeterminate]) [part=check]{color:#c2c2c2}:host([readonly][checked]) [part=check],:host([readonly][indeterminate]) [part=check]{color:rgba(194,194,194,.5)}:host([disabled]) [part=container],:host([readonly]) [part=container]{color:rgba(194,194,194,.6);border-color:rgba(74,74,82,.6);background-color:rgba(0,0,0,.6)}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{box-shadow:0 0 0 #f93;border:1px dotted #f93}}');
+elf.customStyles.define('ef-checkbox', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#000;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.6);-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;border:1px solid #4a4a52;height:11px;width:11px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#f93);border-width:0 2px 2px 0;width:95%;height:95%}:host [part=label]{cursor:default;margin:0 4px}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:5px;height:5px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#e2e2e2)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65;color:rgba(194,194,194,.6)}:host([disabled][checked]) [part=check],:host([disabled][indeterminate]) [part=check]{color:#c2c2c2}:host([readonly][checked]) [part=check],:host([readonly][indeterminate]) [part=check]{color:rgba(194,194,194,.5)}:host([disabled]) [part=container],:host([readonly]) [part=container]{color:rgba(194,194,194,.6);border-color:rgba(74,74,82,.6);background-color:rgba(0,0,0,.6)}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{box-shadow:0 0 0 #f93;border:1px dotted #f93}}');

package/lib/checkbox/themes/solar/pearl/index.js

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/icon/themes/solar/pearl';
 import '@refinitiv-ui/elements/tooltip/themes/solar/pearl';
 
-elf.customStyles.define('ef-checkbox', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#fff;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.3);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;border:1px solid #a9afba;height:11px;width:11px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#ee7600);border-width:0 2px 2px 0;width:95%;height:95%}:host [part=label]{cursor:default;margin:0 4px}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:5px;height:5px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#acafb5)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65;color:rgba(72,72,72,.6)}:host([disabled][checked]) [part=check],:host([disabled][indeterminate]) [part=check]{color:#a9afba}:host([readonly][checked]) [part=check],:host([readonly][indeterminate]) [part=check]{color:rgba(169,175,186,.5)}:host([disabled]) [part=container],:host([readonly]) [part=container]{color:rgba(72,72,72,.6);border-color:rgba(169,175,186,.6);background-color:rgba(255,255,255,.6)}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{box-shadow:0 0 0 #ffb266;border:1px dotted #ffb266}}');
+elf.customStyles.define('ef-checkbox', ':host{margin:1px 0;vertical-align:middle;display:inline-flex;align-items:center;flex-wrap:nowrap;font-size:inherit;font-weight:inherit;touch-action:manipulation}:host(:focus){outline:0}:host [part=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:0;background-color:#fff;transition:box-shadow 150ms,border-color 150ms;box-shadow:inset 0 0 0 rgba(0,0,0,.3);-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;border:1px solid #a9afba;height:11px;width:11px}:host [part=check]{display:flex;justify-content:center;align-items:center;box-sizing:border-box;color:var(--check-color,#ee7600);border-width:0 2px 2px 0;width:95%;height:95%}:host [part=label]{cursor:default;margin:0 4px}:host([indeterminate]) [part=check]{border:none;background-color:currentColor;transform:none;border-radius:1px;margin:0;width:5px;height:5px}:host([disabled]) [part=check],:host([readonly]) [part=check]{color:var(--check-color,#acafb5)}:host([disabled]) [part=check]{opacity:.5}:host([disabled][checked]) [part=check]{opacity:.5}:host([disabled]) [part=label]{opacity:.65;color:rgba(72,72,72,.6)}:host([disabled][checked]) [part=check],:host([disabled][indeterminate]) [part=check]{color:#a9afba}:host([readonly][checked]) [part=check],:host([readonly][indeterminate]) [part=check]{color:rgba(169,175,186,.5)}:host([disabled]) [part=container],:host([readonly]) [part=container]{color:rgba(72,72,72,.6);border-color:rgba(169,175,186,.6);background-color:rgba(255,255,255,.6)}@media (-ms-high-contrast:none),(pointer:fine){:host(:focus) [part=container]{box-shadow:0 0 0 #ffb266;border:1px dotted #ffb266}}');

package/lib/clock/custom-elements.json

@@ -35,14 +35,14 @@
           "default": "false"
         },
         {
-          "name": "interactive",
-          "description": "Enabled interactive mode. Allowing the user to offset the value.",
+          "name": "analogue",
+          "description": "Display clock in analogue style.",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "analogue",
-          "description": "Display clock in analogue style.",
+          "name": "interactive",
+          "description": "Enable interactive mode. Allowing the user to offset the value.",
           "type": "boolean",
           "default": "false"
         }
@@ -83,16 +83,16 @@
           "default": "false"
         },
         {
-          "name": "interactive",
-          "attribute": "interactive",
-          "description": "Enabled interactive mode. Allowing the user to offset the value.",
+          "name": "analogue",
+          "attribute": "analogue",
+          "description": "Display clock in analogue style.",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "analogue",
-          "attribute": "analogue",
-          "description": "Display clock in analogue style.",
+          "name": "interactive",
+          "attribute": "interactive",
+          "description": "Enable interactive mode. Allowing the user to offset the value.",
           "type": "boolean",
           "default": "false"
         }

package/lib/clock/custom-elements.md

@@ -8,7 +8,7 @@ Display hours, minutes and seconds as clock interface
 |---------------|----------------|-----------|------------|--------------------------------------------------|
 | `amPm`        | `am-pm`        | `boolean` | false      | Display the digital clock in 12hr format.        |
 | `analogue`    | `analogue`     | `boolean` | false      | Display clock in analogue style.                 |
-| `interactive` | `interactive`  | `boolean` | false      | Enabled interactive mode. Allowing the user to offset the value. |
+| `interactive` | `interactive`  | `boolean` | false      | Enable interactive mode. Allowing the user to offset the value. |
 | `offset`      | `offset`       | `number`  |            | Get offset value                                 |
 | `showSeconds` | `show-seconds` | `boolean` | false      | Display the seconds segment.                     |
 | `tick`        | `tick`         | `boolean` | false      | Toggles clock ticking function.                  |

package/lib/clock/index.d.ts

@@ -1,5 +1,7 @@
 import { JSXInterface } from '../jsx';
 import { TemplateResult, CSSResultGroup, PropertyValues, ResponsiveElement, ElementSize } from '@refinitiv-ui/core';
+import '@refinitiv-ui/phrasebook/locale/en/clock.js';
+import { TranslatePromise } from '@refinitiv-ui/translate';
 /**
  * Display hours, minutes and seconds as clock interface
  * @fires value-changed - Fired when the value property changes while ticking.
@@ -42,6 +44,14 @@ export declare class Clock extends ResponsiveElement {
      * Used for accurately ticking time.
      */
     private tickTimestamp;
+    /**
+     * Current active segment for interactive mode
+     */
+    private activeSegment;
+    /**
+     * Clock internal translation strings
+     */
+    protected tPromise: TranslatePromise;
     /**
      * Get time value in format `hh:mm:ss`
      * @default 00:00:00
@@ -81,14 +91,14 @@ export declare class Clock extends ResponsiveElement {
      * Display the seconds segment.
      */
     showSeconds: boolean;
-    /**
-     * Enabled interactive mode. Allowing the user to offset the value.
-     */
-    interactive: boolean;
     /**
     * Display clock in analogue style.
     */
     analogue: boolean;
+    /**
+     * Enable interactive mode. Allowing the user to offset the value.
+     */
+    interactive: boolean;
     /**
      * Getter for hours part.
      */
@@ -151,6 +161,11 @@ export declare class Clock extends ResponsiveElement {
      * @returns display seconds
      */
     private get displaySeconds();
+    /**
+     * Get display value
+     * @returns display value
+     */
+    private get displayValue();
     /**
      * Get display AM or PM depending on time
      * @returns `AM` or `PM`
@@ -161,6 +176,11 @@ export declare class Clock extends ResponsiveElement {
      * @returns Result
      */
     private get isAM();
+    /**
+     * Returns `true` if display minutes has changed
+     * @returns Result
+     */
+    private get isDisplayMinutesChange();
     /**
      * Configures the tick manager to either start or stop ticking,
      * depending on the state of the element.
@@ -182,15 +202,15 @@ export declare class Clock extends ResponsiveElement {
      */
     private shift;
     /**
-     * Returns any shift amount assigned to a target.
-     * @param target target of an event.
+     * Returns any shift amount assigned to a segment.
+     * @param segment Segment.
      * @returns {void}
      */
-    private getShiftAmountFromTarget;
+    private getShiftAmountFromSegment;
     /**
     * Returns `true` or `false` depends on the offset value's effect on giving segment
     *
-    * @param segment segment's name
+    * @param segment segment
     * @returns Result
     */
     private isSegmentShifted;
@@ -217,27 +237,24 @@ export declare class Clock extends ResponsiveElement {
     private manageControlKeys;
     /**
     * Handles UP key press
-    * @param event Event Object
     * @returns {void}
     */
     private handleUpKey;
     /**
     * Handle DOWN key press
-    * @param event Event Object
     * @returns {void}
     */
     private handleDownKey;
     /**
-    * Template for increment and decrement button
-    * if interactive mode is enabled.
-    * @returns {TemplateResult} template result
+    * Set aria-valuenow to display value and aria-valuetext to translated format
+    * @param updateAriaValueText condition to update aria-valueText
+    * @returns {void}
     */
-    private generateButtonsTemplate;
+    private updateAriaValue;
     /**
     * Get template of segment
-    * @param name segment's name
+    * @param segment segment
     * @param value segment's value
-    * @param shiftAmount amount to shift
     * @returns {TemplateResult} template
     */
     private generateSegmentTemplate;
@@ -288,6 +305,17 @@ export declare class Clock extends ResponsiveElement {
      * @returns {void}
      */
     protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Handles interactive by update role, tabindex, and aria attribute
+     * @returns {void}
+     */
+    private interactiveChanged;
+    /**
+     * Called before update() to compute values needed during the update.
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    protected willUpdate(changedProperties: PropertyValues): void;
     /**
     * Template for digital clock
     * @returns {TemplateResult} template