@tet/tet-components 1.3.7-testing → 1.3.8-staging

package/dist/collection/components/simple/inputs/tet-range-slider/tet-range-slider.css

@@ -54,34 +54,54 @@
   * @prop --slider-track-border-radius: The border radius of the slider track.
   * @prop --slider-track-background-color: The base color of the track.
   * @prop --slider-track-progress-color: The progress color of the track.
+  *
   * @prop --slider-thumb-color: The color of the slider thumb.
   * @prop --slider-thumb-shadow: The shadow of the slider thumb.
   * @prop --slider-thumb-active-shadow: The shadow of the slider thump in active state.
   * @prop --slider-thumb-size: The size of the slider thumb.
   * @prop --slider-thumb-border-radius: The border radius of the thumb.
-  * @prop --slider-tick-color: The color of the tick.
+  *
+  * @prop --slider-tick-primary-type-color: The color of the tick for the slider primary type.
+  * @prop --slider-tick-secondary-type-color: The color of the tick for the slider secondary type.
   * @prop --slider-tick-width: The width of the tick.
   * @prop --slider-tick-height: The height of the tick.
   * @prop --slider-tick-border-radius: The border radius of the tick.
+  *
   * @prop --slider-control-left-margin: The margin of the left control button.
   * @prop --slider-control-right-margin: The margin of the right control button.
+  * @prop --slider-control-icon-color: The icon color of the slider control.
+
+  * @prop --slider-tooltip-background-color: The background color of the slider thumb tooltip.
+  * @prop --slider-tooltip-text-color: The text color of the slider thumb tooltip.
+
+  * @prop --slider-step-counter-background-color: The background color of the slider step counter.
+  * @prop --slider-step-counter-text-color: The text color of the slider step counter.
+
+  * @prop --slider-data-label-text-color: The text color of the slider data label.
   */
   --slider-height: 6rem;
   --slider-track-height: 0.5rem;
   --slider-track-border-radius: 0.25rem;
-  --slider-track-background-color: rgb(215, 219, 224);
-  --slider-track-progress-color: rgb(255, 182, 26);
-  --slider-thumb-color: rgb(255, 182, 26);
-  --slider-thumb-shadow: 0 0.188rem 0.25rem rgba(10, 11, 13, 0.12), 0 0 0.063rem rgba(10, 11, 13, 0.08);
-  --slider-thumb-active-shadow: 0 0 0 0.625rem rgba(249, 212, 134, 0.4);
+  --slider-track-background-color: var(--tc-border-quaternary);
+  --slider-track-progress-color: var(--tc-yellow-40);
+  --slider-thumb-color: var(--tc-yellow-30);
+  --slider-thumb-shadow: var(--tc-elevation-two);
+  --slider-thumb-active-shadow: 0 0 0 0.25rem rgba(254, 213, 127, 0.4);
   --slider-thumb-size: 1.5rem;
   --slider-thumb-border-radius: 0.75rem;
-  --slider-tick-color: rgb(215, 219, 224);
+  --slider-tick-primary-type-color: var(--tc-border-quaternary);
+  --slider-tick-secondary-type-color: var(--tc-border-secondary);
   --slider-tick-width: 0.125rem;
   --slider-tick-height: 0.25rem;
   --slider-tick-border-radius: 0.063rem;
   --slider-control-left-margin: 0;
   --slider-control-right-margin: 0;
+  --slider-control-icon-color: var(--tc-button-icon-primary);
+  --slider-tooltip-background-color: var(--tc-grey-80);
+  --slider-tooltip-text-color: var(--tc-grey-10);
+  --slider-step-counter-background-color: var(--tc-layer-secondary);
+  --slider-step-counter-text-color: var(--tc-text-primary);
+  --slider-data-label-text-color: var(--tc-text-secondary);
 }
 
 .range-slider {
@@ -91,6 +111,21 @@
   height: var(--slider-height);
   position: relative;
 }
+.range-slider.dark {
+  --slider-track-background-color: var(--tc-border-quaternary-dark);
+  --slider-track-progress-color: var(--tc-yellow-40-dark);
+  --slider-thumb-color: var(--tc-yellow-30-dark);
+  --slider-thumb-shadow: var(--tc-elevation-two-dark);
+  --slider-thumb-active-shadow: 0 0 0 0.25rem rgba(247, 212, 135, 0.4);
+  --slider-tick-primary-type-color: var(--tc-border-quaternary-dark);
+  --slider-tick-secondary-type-color: var(--tc-border-secondary-dark);
+  --slider-control-icon-color: var(--tc-button-icon-primary-dark);
+  --slider-tooltip-background-color: var(--tc-grey-80-dark);
+  --slider-tooltip-text-color: var(--tc-grey-10-dark);
+  --slider-step-counter-background-color: var(--tc-layer-secondary-dark);
+  --slider-step-counter-text-color: var(--tc-text-primary-dark);
+  --slider-data-label-text-color: var(--tc-text-secondary-dark);
+}
 .range-slider--large {
   flex-direction: column;
 }
@@ -183,7 +218,6 @@
 .range-slider__input {
   --input-padding: 0.75rem;
   --input-border-radius: 0.625rem;
-  --input-border-color: rgb(192, 197, 206);
   max-height: 3.125rem;
   max-width: 12.5rem;
   margin: 0 auto !important;
@@ -244,6 +278,7 @@
   position: absolute;
   width: 3rem;
   text-align: center;
+  color: var(--slider-data-label-text-color);
   display: none;
 }
 .range-slider__data-label:first-of-type {
@@ -259,13 +294,14 @@
   font: 500 0.75rem/1rem Inter, Gilroy, Arial, sans-serif, Gilroy, Arial, sans-serif;
   letter-spacing: 0;
   font-weight: 500;
+  color: var(--slider-step-counter-text-color);
   width: 5.5rem;
   margin: 0 auto;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 0.25rem 1rem;
-  background-color: rgb(247, 247, 247);
+  background-color: var(--slider-step-counter-background-color);
   border-radius: 1rem;
 }
 .range-slider__data-label-container, .range-slider__current-step-container {
@@ -294,13 +330,13 @@
   width: var(--slider-tick-width);
   height: var(--slider-tick-height);
   border-radius: var(--slider-tick-border-radius);
-  background-color: var(--slider-tick-color);
+  background-color: var(--slider-tick-primary-type-color);
 }
 .range-slider--secondary .range-slider__tick {
   width: 0.25rem;
   height: 0.25rem;
   border-radius: 0.125rem;
-  background-color: rgb(153, 160, 174);
+  background-color: var(--slider-tick-secondary-type-color);
 }
 .range-slider__tick-container {
   position: absolute;
@@ -344,8 +380,8 @@
   padding: 0.5rem 1rem;
   border-radius: 0.5rem;
   z-index: 2;
-  color: rgb(255, 255, 255);
-  background-color: rgb(35, 40, 46);
+  color: var(--slider-tooltip-text-color);
+  background-color: var(--slider-tooltip-background-color);
   white-space: nowrap;
   top: -2.625rem;
   transition: top 150ms ease-in-out 0s;
@@ -360,22 +396,18 @@
   left: calc(50% - var(--tooltip-offset));
   width: 0.75rem;
   height: 0.75rem;
-  background: rgb(35, 40, 46);
+  background: var(--slider-tooltip-background-color);
   bottom: 0;
   transform: rotate(45deg);
   border-radius: 0.125rem;
   margin: -0.25rem;
 }
 .range-slider__control {
+  --button-padding: 0.25rem;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1;
-  cursor: pointer;
-  min-width: 2.25rem;
-  min-height: 2.25rem;
-  border-radius: 2rem;
-  background-color: rgb(10, 11, 13);
   position: absolute;
   top: calc(var(--slider-track-height) + 3.5rem);
 }
@@ -411,7 +443,7 @@
   left: calc(50% + 4.25rem);
 }
 .range-slider__control--icon {
-  --icon-color: rgb(255, 255, 255);
+  --icon-color: var(--slider-control-icon-color);
 }
 .range-slider .hidden {
   display: none;

package/dist/collection/components/simple/inputs/tet-range-slider/tet-range-slider.js

@@ -178,15 +178,6 @@ export class TetRangeSlider {
         };
         /** Debounced slider change event. */
         this.onSliderChangeDebounce = debounce(this.onSliderChange, 50);
-        /** Control previous keydown event handler.
-         *  Calls `onControlPreviousClick` handler when Space or Enter buttons are pressed when the button is in focus.
-         * @param {KeyboardEvent} event
-         */
-        this.onControlPreviousKeyDown = (event) => {
-            if (['Space', 'Enter'].includes(event.code)) {
-                this.onControlPreviousClick();
-            }
-        };
         /**
          * Control previous button handler.
          */
@@ -208,15 +199,6 @@ export class TetRangeSlider {
             this.scrollToThumbCenter();
             this.sliderChange.emit(this.currentValue);
         };
-        /** Control next keydown event handler.
-         *  Calls `onControlNextClick` handler when Space or Enter buttons are pressed when the button is in focus.
-         * @param {KeyboardEvent} event
-         */
-        this.onControlNextKeyDown = (event) => {
-            if (['Space', 'Enter'].includes(event.code)) {
-                this.onControlNextClick();
-            }
-        };
         /**
          * Control next button handler.
          */
@@ -633,6 +615,7 @@ export class TetRangeSlider {
         this.addButtonAccessibilityLabel = '';
         this.numberInputAccessibilityLabel = '';
         this.sliderInputAccessibilityLabel = '';
+        this.theme = 'light';
         this.currentValue = 0;
         this.dataSet = [];
         this.containerSize = 'large';
@@ -706,30 +689,31 @@ export class TetRangeSlider {
         this.updateProgress();
     }
     render() {
-        return (h(Host, { key: '09e110b89a1bd0a50711b021722b102b9dfeda15' }, h("div", { key: 'b2f0ecf8b3941b9b372b96ddb68675fa1184ce23', class: {
+        return (h(Host, { key: 'd69725adaabd133db13bfe41371de4578fe38236' }, h("div", { key: 'ae804d77d4066d64bb07af4b257bf16f47ccf893', class: {
                 'range-slider': true,
                 [`range-slider--${this.containerSize}`]: true,
                 [`range-slider--${this.type}`]: true,
                 'range-slider--no-controls': !this.withControls,
                 'range-slider--no-input': !this.withInput,
-            } }, h("div", { key: '81832bb867e3cd2fa64e6aa4708cd894bd8991d0', class: {
+                [this.theme]: true,
+            } }, h("div", { key: '4297c6ee75a850cc6684e51f00d06bb962b8b26a', class: {
                 'range-slider__input-container': true,
                 'hidden': !this.withInput,
-            } }, h("tet-input", Object.assign({ key: 'a1af6e78debfe6f3578a12c4da789627aa3f808c', "input-class": "range-slider__input", "input-type": "number", "input-value": this.currentValue, ref: inputEl => (this.inputRef = inputEl), onInput: this.onInputChange, onKeyDown: this.onInputKeyDown, accessibilityLabel: this.numberInputAccessibilityLabel }, (this.containerSize !== 'large' ? { inputTabindex: 3 } : {})))), h("div", { key: 'ae4d684c278a7524fe7620d03a18b597c61066b7', class: "range-slider__container" }, h("div", Object.assign({ key: '5b9c5bea21e47841117215470d8534907468eb38', class: {
+            } }, h("tet-input", Object.assign({ key: 'dceca05da6d539585fa072baef543c7f49c34482', "input-class": "range-slider__input", "input-type": "number", "input-value": this.currentValue, ref: inputEl => (this.inputRef = inputEl), theme: this.theme, onInput: this.onInputChange, onKeyDown: this.onInputKeyDown, accessibilityLabel: this.numberInputAccessibilityLabel }, (this.containerSize !== 'large' ? { inputTabindex: 3 } : {})))), h("div", { key: 'e554df731cd1b11a5d5245a8d05b4b315e41bf2b', class: "range-slider__container" }, h("tet-button", Object.assign({ key: 'b1166b0930dfbb5dd5e464ee2f5eca0873664056', theme: this.theme, iconMode: true, class: {
                 'range-slider__control': true,
                 'range-slider__control--left': true,
                 'hidden': !this.withControls,
-            }, onClick: this.onControlPreviousClick, onKeyDown: this.onControlPreviousKeyDown, tabIndex: this.containerSize === 'large' ? 0 : 2, role: "button" }, (this.reduceButtonAccessibilityLabel ? { "aria-label": this.reduceButtonAccessibilityLabel } : {})), h("tet-icon", { key: 'effbef50fab640b291e5bcbbf9bbfb1e0b7de189', name: "remove", class: "range-slider__control--icon" })), h("div", { key: 'b343038eaec0d1601166aafbe44bb22f012efcc6', onTouchStart: this.onContainerTouchStart, onTouchEnd: this.onContainerTouchEnd, onMouseDown: this.onContainerMouseDown, onScroll: this.onContainerScroll, ref: sliderContainerEl => (this.sliderContainerRef = sliderContainerEl), class: "range-slider__slider-container", draggable: false }, h("div", { key: '097ad1b0cd3279c5243faf9db24065224192023b', class: "range-slider__slider-wrapper" }, h("input", Object.assign({ key: '28a12786e48a6b596cb4c7041630101e0b8efa4d', ref: sliderEl => (this.sliderRef = sliderEl), type: "range", min: this.minValue, max: this.maxValue, step: this.step, value: this.defaultValue, list: "steplist", id: "rangeInput", onInput: this.onSliderInput, onChange: this.onSliderChange, onPointerDown: this.onSliderPointerDown, onPointerUp: this.onSliderPointerUp, class: "range-slider__slider" }, (this.sliderInputAccessibilityLabel ? { "aria-label": this.sliderInputAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 1 } : {})))), h("div", { key: '548dc91136d67fe169fbb105ad2a4b244d40ce3b', class: "range-slider__track range-slider__track--background" }), h("div", { key: 'ab63b2b2ba6cf4e9e66f92c2e0a72024ba63b4c3', ref: progressTrackEl => (this.progressTrackRef = progressTrackEl), class: "range-slider__track range-slider__track--progress" }), h("div", { key: '63495fc1a70d1f81127f9acdd82c93c1be6d01e6', ref: tickContainerEl => (this.tickContainerRef = tickContainerEl), class: "range-slider__tick-container" }), h("div", { key: 'ab44b8c6d158988ccc25363d5eeb970797be53cb', ref: dataLabelEl => (this.dataLabelRef = dataLabelEl), class: {
+            }, clickCallback: this.onControlPreviousClick }, (this.reduceButtonAccessibilityLabel ? { accessibilityLabel: this.reduceButtonAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 2 } : {})), h("tet-icon", { key: '3e27a25df0cd8276483773b2bc3acf749a5f8405', name: "remove", class: "range-slider__control--icon" })), h("div", { key: '023af8cd8b2cc9d8b66ee4b2be2c8a62985743f4', onTouchStart: this.onContainerTouchStart, onTouchEnd: this.onContainerTouchEnd, onMouseDown: this.onContainerMouseDown, onScroll: this.onContainerScroll, ref: sliderContainerEl => (this.sliderContainerRef = sliderContainerEl), class: "range-slider__slider-container", draggable: false }, h("div", { key: '6449f17be8f4601d54f46d5f8c6a8f3cfaa05576', class: "range-slider__slider-wrapper" }, h("input", Object.assign({ key: 'eec4d3ccea3fa5a05986b01da84efa6dfb37d8e6', ref: sliderEl => (this.sliderRef = sliderEl), type: "range", min: this.minValue, max: this.maxValue, step: this.step, value: this.defaultValue, list: "steplist", id: "rangeInput", onInput: this.onSliderInput, onChange: this.onSliderChange, onPointerDown: this.onSliderPointerDown, onPointerUp: this.onSliderPointerUp, class: "range-slider__slider" }, (this.sliderInputAccessibilityLabel ? { "aria-label": this.sliderInputAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 1 } : {})))), h("div", { key: '3211a80ffc8ad054e2dad57afc33df92c87e8b88', class: "range-slider__track range-slider__track--background" }), h("div", { key: '2cc7290a5690756ce64b32ad4bc15ba3067b2570', ref: progressTrackEl => (this.progressTrackRef = progressTrackEl), class: "range-slider__track range-slider__track--progress" }), h("div", { key: 'd834ab41423a90cb2eca66062bfffec652ee9f3d', ref: tickContainerEl => (this.tickContainerRef = tickContainerEl), class: "range-slider__tick-container" }), h("div", { key: '2e6593d3ac4a7cbbfb2c071886d4d94b767fc886', ref: dataLabelEl => (this.dataLabelRef = dataLabelEl), class: {
                 'range-slider__data-label-container': true,
                 'hidden': this.type === 'secondary' && this.containerSize === 'small',
-            } })), h("div", { key: '58e5dc0d382b3ff6d62decc954284567d42b57b9', class: {
+            } })), h("div", { key: '3b71468e553c07627870a8d454f5eaac38f76610', class: {
                 'range-slider__current-step-container': true,
                 'hidden': !this.withCurrentStepCounter,
-            } }, h("div", { key: '7855712fd557b1a97df3ff7a77d4dc827b4f3d8f', class: "range-slider__current-step", "aria-live": "polite" }, this.dataSet.indexOf(this.getClosestOverrideDataPoint()) + 1, "/", this.dataPoints.length)), h("div", { key: '161931f265f119ea99e6f1738153461ac951b04e', ref: toolbarHandleEl => (this.tooltipHandleRef = toolbarHandleEl), class: "range-slider__tooltip-handle" }, h("div", { key: 'c4045d62ddb799e7703237397f1e65b771872eb8', class: "range-slider__tooltip translation-none", style: { [`--tooltip-offset`]: `${this.tooltipOffset}rem` }, "aria-live": "polite" }, this.getTooltipValue())), h("div", Object.assign({ key: '13f240f251b6e69819e10ef88e279c270ef45b19', class: {
+            } }, h("div", { key: '249d53ac4883be02bb8e48a27b05f386fc678a67', class: "range-slider__current-step", "aria-live": "polite" }, this.dataSet.indexOf(this.getClosestOverrideDataPoint()) + 1, "/", this.dataPoints.length)), h("div", { key: 'e45953c8badfb41992c65df47b0e5ef7a1d3f6de', ref: toolbarHandleEl => (this.tooltipHandleRef = toolbarHandleEl), class: "range-slider__tooltip-handle" }, h("div", { key: '905ac500f576696e668c2d6d7eb495d29e150cf9', class: "range-slider__tooltip translation-none", style: { [`--tooltip-offset`]: `${this.tooltipOffset}rem` }, "aria-live": "polite" }, this.getTooltipValue())), h("tet-button", Object.assign({ key: '278b15c2239b28b350c6c2b9e3b1cbedfe8c5871', theme: this.theme, iconMode: true, class: {
                 'range-slider__control': true,
                 'range-slider__control--right': true,
                 'hidden': !this.withControls,
-            }, onClick: this.onControlNextClick, onKeyDown: this.onControlNextKeyDown, tabIndex: this.containerSize === 'large' ? 0 : 4, role: "button" }, (this.addButtonAccessibilityLabel ? { "aria-label": this.addButtonAccessibilityLabel } : {})), h("tet-icon", { key: 'd937920591ae89194eafa11ba6a3667e2bdd90d5', name: "add", class: "range-slider__control--icon" }))))));
+            }, clickCallback: this.onControlNextClick }, (this.addButtonAccessibilityLabel ? { accessibilityLabel: this.addButtonAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 4 } : {})), h("tet-icon", { key: '60dd7a4fa527db277de744deb36aa72f088f51e2', name: "add", class: "range-slider__control--icon" }))))));
     }
     static get is() { return "tet-range-slider"; }
     static get encapsulation() { return "shadow"; }
@@ -1089,6 +1073,24 @@ export class TetRangeSlider {
                 "attribute": "slider-input-accessibility-label",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The theme of the component."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
             }
         };
     }

package/dist/collection/components/simple/lists/tet-text-list/test/tet-text-list.spec.js

@@ -10,7 +10,20 @@ describe('tet-text-list', () => {
         expect(page.root).toEqualHtml(`
         <tet-text-list>
           <mock:shadow-root>
-            <ul class="text-list text-list--type-bullet" part="list"></ul>
+            <ul class="text-list text-list--type-bullet text-list-light" part="list"></ul>
+          </mock:shadow-root>
+        </tet-text-list>
+      `);
+    });
+    it('renders empty list with dark theme', async () => {
+        const page = await newSpecPage({
+            components: [TetTextList],
+            html: `<tet-text-list theme="dark"></tet-text-list>`
+        });
+        expect(page.root).toEqualHtml(`
+        <tet-text-list theme="dark">
+          <mock:shadow-root>
+            <ul class="text-list text-list--type-bullet text-list-dark" part="list"></ul>
           </mock:shadow-root>
         </tet-text-list>
       `);
@@ -18,12 +31,12 @@ describe('tet-text-list', () => {
     it('renders default list with items', async () => {
         const page = await newSpecPage({
             components: [TetTextList],
-            template: () => h("tet-text-list", null, h("p", null, "Consequat enim in occaecat veniam id anim do esse cillum quis."), h("p", null, "Minim ut id nisi laboris occaecat nisi officia."))
+            template: () => h("tet-text-list", { theme: "light" }, h("p", null, "Consequat enim in occaecat veniam id anim do esse cillum quis."), h("p", null, "Minim ut id nisi laboris occaecat nisi officia."))
         });
         expect(page.root).toEqualHtml(`
         <tet-text-list>
           <mock:shadow-root>
-            <ul class="text-list text-list--type-bullet" part="list">
+            <ul class="text-list text-list--type-bullet text-list-light" part="list">
               <li class="text-list__element" part="list-element">
                 <div class="text-list__element-content" part="list-element-content">
                   <p>Consequat enim in occaecat veniam id anim do esse cillum quis.</p>
@@ -44,12 +57,12 @@ describe('tet-text-list', () => {
     it('renders decimal list with items', async () => {
         const page = await newSpecPage({
             components: [TetTextList],
-            template: () => h("tet-text-list", { "list-type": "decimal" }, h("p", null, "Consequat enim in occaecat veniam id anim do esse cillum quis."), h("p", null, "Minim ut id nisi laboris occaecat nisi officia."))
+            template: () => h("tet-text-list", { "list-type": "decimal", theme: "dark" }, h("p", null, "Consequat enim in occaecat veniam id anim do esse cillum quis."), h("p", null, "Minim ut id nisi laboris occaecat nisi officia."))
         });
         expect(page.root).toEqualHtml(`
         <tet-text-list list-type="decimal">
           <mock:shadow-root>
-            <ul class="text-list text-list--type-decimal" part="list">
+            <ul class="text-list text-list--type-decimal text-list-dark" part="list">
               <li class="text-list__element" part="list-element" style='--text-list-decimal-value: "1.";'>
                 <div class="text-list__element-content" part="list-element-content">
                   <p>Consequat enim in occaecat veniam id anim do esse cillum quis.</p>
@@ -75,7 +88,7 @@ describe('tet-text-list', () => {
         expect(page.root).toEqualHtml(`
         <tet-text-list list-icon="check" with-icon="">
           <mock:shadow-root>
-            <ul class="text-list" part="list">
+            <ul class="text-list text-list-light" part="list">
               <li class="text-list__element" part="list-element">
                 <tet-icon class="text-list__element-icon" name="check" part="list-element-icon"></tet-icon>
                 <div class="text-list__element-content" part="list-element-content">
@@ -103,7 +116,7 @@ describe('tet-text-list', () => {
         expect(page.root).toEqualHtml(`
         <tet-text-list list-type="decimal">
           <mock:shadow-root>
-            <ul class="text-list text-list--type-decimal" part="list">
+            <ul class="text-list text-list--type-decimal text-list-light" part="list">
               <li class="text-list__element" part="list-element" style='--text-list-decimal-value: "1.";'>
                 <div class="text-list__element-content" part="list-element-content">
                   <p>Consequat enim in occaecat veniam id anim do esse cillum quis.</p>