@dso-toolkit/core 62.24.0 → 62.26.0

package/dist/collection/components/ozon-content/ozon-content.js

@@ -24,7 +24,7 @@ export class OzonContent {
             emitAnchorClick: this.dsoAnchorClick.emit,
         };
         const transformed = mapper.transform(this.content, context);
-        return h(Fragment, { key: '0084a8526897788dc1f037f0f1a49f6da2ea14b6' }, transformed);
+        return h(Fragment, { key: '11c7e1106b7f9ac1252796022096258264a87e24' }, transformed);
     }
     static get is() { return "dso-ozon-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/pagination.css

@@ -24,7 +24,7 @@
   align-items: center;
   color: #39870c;
   display: flex;
-  height: 2rem;
+  block-size: 2rem;
   justify-content: center;
   position: relative;
   min-inline-size: 2rem;
@@ -46,23 +46,23 @@
   text-decoration: none;
 }
 .pagination > li a:hover::after, .pagination > li a:focus::after {
-  border-bottom-color: #39870c;
+  border-block-end-color: #39870c;
 }
 .pagination > li a::after {
-  border-bottom: 3px solid transparent;
-  bottom: 0;
+  border-block-end: 3px solid transparent;
+  inset-block-end: 0;
   content: "";
   display: inline-block;
-  left: 0;
+  inset-inline-start: 0;
   position: absolute;
-  width: 100%;
+  inline-size: 100%;
 }
 .pagination > li.active span {
   background-color: #39870c;
   color: #fff;
 }
 .pagination > li + li {
-  margin-left: 8px;
+  margin-inline-start: 8px;
 }
 
 .dso-page-hidden {

package/dist/collection/components/progress-bar/progress-bar.css

@@ -10,8 +10,8 @@
 
 .sr-only {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inline-size: 1px;
+  block-size: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
@@ -20,21 +20,21 @@
 }
 
 .progress {
-  margin-bottom: 8px;
+  margin-block-end: 8px;
 }
 .progress .progress-bar {
   background-color: #fff;
   border: 1px solid #39870c;
   display: block;
-  height: 16px;
+  block-size: 16px;
 }
 .progress .progress-bar > span {
   background-color: #39870c;
-  float: left;
-  height: 100%;
-  width: 0%;
+  float: inline-start;
+  block-size: 100%;
+  inline-size: 0%;
 }
 .progress .progress-bar + span {
   font-size: 14px;
-  margin-top: 8px;
+  margin-block-start: 8px;
 }

package/dist/collection/components/progress-bar/progress-bar.js

@@ -8,7 +8,7 @@ export class ProgressBar {
     render() {
         const progressNumber = Math.round(this.progress);
         const progressPercentage = `${progressNumber}%`;
-        return (h("div", { key: 'ff4d4c40756266cb3148ad99654ed7cc4583f317', class: "progress" }, h("span", { key: 'e22b0de3d25d8db1108adbe270efe535eaf63691', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: '7071ce188554ec8c59f43dd14d1106801abdecb0', style: { width: `${progressPercentage}` } })), h("span", { key: 'e0cc46668cd3ef7de11cce700a7b8d90080f136e', id: "progress-bar-label" }, h("slot", { key: '2e118c2588641d6cd350a1fe9bc59a965770a183' }))));
+        return (h("div", { key: 'b70503b86aa8f08212cdabe7693122b094a87d2a', class: "progress" }, h("span", { key: '81742338f1de203a4e2b89953732210f69f1802b', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: '2262bff936ace8e5f3c0b27911d72a6e02706066', style: { width: `${progressPercentage}` } })), h("span", { key: '7522d45e08e703015704712c39b7b372741c2d7e', id: "progress-bar-label" }, h("slot", { key: '6f9e22ddbcad5ff63354ad751dfcf01e0afc4c04' }))));
     }
     static get is() { return "dso-progress-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-indicator/progress-indicator.css

@@ -12,7 +12,7 @@
 }
 
 span.dso-progress-indicator-label {
-  margin-left: 16px;
+  margin-inline-start: 16px;
   vertical-align: middle;
 }
 
@@ -26,8 +26,8 @@ span.dso-progress-indicator-label {
 :host([size=small]) dso-icon,
 :host(:not([size=medium]):not([size=large])) .dso-progress-indicator-spinner,
 :host(:not([size=medium]):not([size=large])) dso-icon {
-  height: 24px;
-  width: 24px;
+  block-size: 24px;
+  inline-size: 24px;
 }
 :host([size=small]):host([block]),
 :host(:not([size=medium]):not([size=large])):host([block]) {
@@ -36,8 +36,8 @@ span.dso-progress-indicator-label {
 
 :host([size=medium]) .dso-progress-indicator-spinner,
 :host([size=medium]) dso-icon {
-  height: 32px;
-  width: 32px;
+  block-size: 32px;
+  inline-size: 32px;
 }
 :host([size=medium]):host([block]) {
   padding: 16px;
@@ -45,8 +45,8 @@ span.dso-progress-indicator-label {
 
 :host([size=large]) .dso-progress-indicator-spinner,
 :host([size=large]) dso-icon {
-  height: 48px;
-  width: 48px;
+  block-size: 48px;
+  inline-size: 48px;
 }
 :host([size=large]):host([block]) {
   padding: 24px 16px;

package/dist/collection/components/progress-indicator/progress-indicator.js

@@ -6,7 +6,7 @@ export class Progressindicator {
         this.block = undefined;
     }
     render() {
-        return (h(Host, { key: '68ff0b6ed51e192610a23c9bf9715fc9d757fba1' }, h("span", { key: 'f340d8a00dc48655e525329b25870d53975a8f7f', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '841182f2410e0c23d44b1359a00482ae44501a08', icon: "spinner" })), h("span", { key: 'c498a9297a8c3196b497bea9bd32c446b49c1fb3', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label)));
+        return (h(Host, { key: '8bf5bdb6d70332aee56cb56df5a666f90b5acb2b' }, h("span", { key: 'e50a443fda36348b9ebca3a0254a29664c3f135e', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '8570853337fb53d8f5c2372b7be78552e807f9e6', icon: "spinner" })), h("span", { key: '65615bda33c18f191fc6fb92b092e033557944dd', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label)));
     }
     static get is() { return "dso-progress-indicator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/responsive-element/responsive-element.js

@@ -40,7 +40,7 @@ export class ResponsiveElement {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (h(Host, { key: 'fe62bfb3fa9345115e9959500e8c3906efa28261', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: 'dea7899ed18de4e28962d3a824f257c39f7057e9' })));
+        return (h(Host, { key: '3d8ac5ae8c8562c6e0733a57fa5a3732f83c032c', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '996ac6893b43300e24942c340776d198f7cc1e05' })));
     }
     static get is() { return "dso-responsive-element"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scrollable/scrollable.css

@@ -1,6 +1,6 @@
 :host {
   display: block;
-  height: 100%;
+  block-size: 100%;
   overflow-y: hidden;
 }
 
@@ -11,15 +11,15 @@
 }
 
 .dso-shadow-container {
-  height: 100%;
-  max-height: inherit;
-  min-height: inherit;
+  block-size: 100%;
+  max-block-size: inherit;
+  min-block-size: inherit;
   position: relative;
 }
 .dso-shadow-container .dso-scroll-container {
-  height: 100%;
-  max-height: inherit;
-  min-height: inherit;
+  block-size: 100%;
+  max-block-size: inherit;
+  min-block-size: inherit;
   overflow-y: auto;
 }
 .dso-shadow-container .dso-scroll-container::before, .dso-shadow-container .dso-scroll-container::after {
@@ -27,23 +27,23 @@
   background-size: 100% 24px;
   content: "";
   display: block;
-  height: 24px;
-  left: 0;
+  block-size: 24px;
+  inset-inline-start: 0;
   opacity: 0;
   overflow: visible;
   position: absolute;
   transition: opacity 150ms ease-in-out;
-  width: 100%;
+  inline-size: 100%;
   pointer-events: none;
   z-index: 1;
 }
 .dso-shadow-container .dso-scroll-container::before {
   background-image: linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));
-  top: 0;
+  inset-block-start: 0;
 }
 .dso-shadow-container .dso-scroll-container::after {
   background-image: linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));
-  bottom: 0;
+  inset-block-end: 0;
 }
 .dso-shadow-container .dso-scroll-container.dso-scroll-bottom::before {
   opacity: 1;

package/dist/collection/components/scrollable/scrollable.js

@@ -81,9 +81,9 @@ export class Scrollable {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (h("div", { key: '9c53005e7c9885cf72e912f4f557bbbf6f7d5b50', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: '30333683609d1fd13fbccb3d9756f7e3948fc090', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: '8278d39dedda8f1527b56d2340eef61ed7f11026', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'c9ae174be37b80a723622636ce13869d945cf15b', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, h("slot", { key: 'bb8bd480c431862ccc7db6847c97161fc92e738d' }))));
+            }), onScroll: () => this._setScrollState() }, h("slot", { key: '50b28fdc4104712384e5583d354795bd0b68b30d' }))));
     }
     static get is() { return "dso-scrollable"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/selectable/selectable.css

@@ -17,13 +17,13 @@
 }
 :host input[type=checkbox],
 :host input[type=radio] {
-  height: 24px;
-  left: 0;
+  block-size: 24px;
+  inset-inline-start: 0;
   margin: 0;
   opacity: 0;
   position: absolute;
-  top: 0;
-  width: 24px;
+  inset-block-start: 0;
+  inline-size: 24px;
   z-index: 100;
   zoom: 1;
 }
@@ -41,7 +41,7 @@
 :host input[type=radio] + label {
   display: inline;
   font-style: normal;
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 :host input[type=checkbox] + label::before,
 :host input[type=radio] + label::before {
@@ -49,11 +49,11 @@
   border: 0;
   box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);
   content: "";
-  height: 20px;
-  left: 2px;
+  block-size: 20px;
+  inset-inline-start: 2px;
   position: absolute;
-  top: 2px;
-  width: 20px;
+  inset-block-start: 2px;
+  inline-size: 20px;
 }
 :host input[type=checkbox]:focus,
 :host input[type=radio]:focus {
@@ -62,20 +62,20 @@
 :host input[type=checkbox]:focus + label::before,
 :host input[type=radio]:focus + label::before {
   box-shadow: 0 0 0 3px var(--dso-selectable-color, #275937);
-  height: 18px;
-  left: 3px;
-  top: 3px;
-  width: 18px;
+  block-size: 18px;
+  inset-inline-start: 3px;
+  inset-block-start: 3px;
+  inline-size: 18px;
 }
 :host input[type=checkbox]:active + label::before, :host input[type=checkbox].active + label::before,
 :host input[type=radio]:active + label::before,
 :host input[type=radio].active + label::before {
   background-color: #ebf3e6;
   box-shadow: 0 0 0 1px #275937;
-  height: 22px;
-  left: 1px;
-  top: 1px;
-  width: 22px;
+  block-size: 22px;
+  inset-inline-start: 1px;
+  inset-block-start: 1px;
+  inline-size: 22px;
 }
 :host input[type=checkbox] + label::before {
   border-radius: 4px;
@@ -83,10 +83,10 @@
 :host input[type=checkbox] + label::after {
   background: transparent;
   content: "";
-  left: 6px;
+  inset-inline-start: 6px;
   opacity: 0;
   position: absolute;
-  top: 6px;
+  inset-block-start: 6px;
   zoom: 1;
 }
 :host input[type=checkbox]:checked + label::after, :host input[type=checkbox]:indeterminate + label::after {
@@ -95,16 +95,16 @@
 :host input[type=checkbox]:checked + label::after {
   border: solid;
   border-color: var(--dso-selectable-color, #39870c);
-  border-top-color: transparent;
+  border-block-start-color: transparent;
   border-width: 0 0 3px 3px;
-  height: 8px;
+  block-size: 8px;
   transform: rotate(-45deg);
-  width: 13px;
+  inline-size: 13px;
 }
 :host input[type=checkbox]:indeterminate + label::after {
   background-color: var(--dso-selectable-color, #39870c);
-  height: 12px;
-  width: 12px;
+  block-size: 12px;
+  inline-size: 12px;
 }
 :host input[type=radio] + label::before {
   border-radius: 50%;
@@ -113,12 +113,12 @@
   background-color: transparent;
   border-radius: 50%;
   content: "";
-  height: 12px;
-  left: 6px;
+  block-size: 12px;
+  inset-inline-start: 6px;
   opacity: 0;
   position: absolute;
-  top: 6px;
-  width: 12px;
+  inset-block-start: 6px;
+  inline-size: 12px;
   zoom: 1;
 }
 :host input[type=radio]:checked + label::after {
@@ -130,7 +130,7 @@
 }
 
 :host(:not(:last-child)) {
-  margin-bottom: 8px;
+  margin-block-end: 8px;
 }
 
 *,
@@ -144,7 +144,7 @@
 }
 .dso-selectable-container .dso-selectable-input-wrapper {
   display: inline-block;
-  min-height: 24px;
+  min-block-size: 24px;
 }
 .dso-selectable-container .dso-selectable-input-wrapper:focus-within.dso-keyboard-focus {
   position: relative;
@@ -158,8 +158,8 @@
 .dso-selectable-container .dso-selectable-input-wrapper input[type=radio]:focus + label::before,
 .dso-selectable-container .dso-selectable-input-wrapper input[type=checkbox]:focus + label::before {
   box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);
-  height: 20px;
-  left: 2px;
-  top: 2px;
-  width: 20px;
+  block-size: 20px;
+  inset-inline-start: 2px;
+  inset-block-start: 2px;
+  inline-size: 20px;
 }

package/dist/collection/components/selectable/selectable.js

@@ -63,7 +63,7 @@ export class Selectable {
     render() {
         var _a;
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: '1f81229a1f1fef108068804fad7761151b9c074f' }, h("div", { key: 'fbd1cf9ab0ff933b7c0fb183c6be54c543502967', class: "dso-selectable-container" }, h("div", { key: '5d5b101e3b05e07a36b4cb1f0927bd55ccc459db', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: '094554197b315b6a992a43360b229f0d898ae480', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '68d97d170c77ad983efcd6511ce23df320d3b23d', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '54eca001300dd947e79f5f5cb9c91fc9f44a6a94', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: 'f3d478436c5b8428b10802953423aa237fb6c4a3' }, h("slot", { key: 'c0b0a05b5997a90a11581b7be95f3443e2cbb8a7', name: "info" })))), h("slot", { key: '7c8d8bd9c10289b068d1e544995cbebfbb7ee8e7', name: "options" })));
+        return (h(Fragment, { key: '0061629edfc95238fad0a7ce59ef33d784715f48' }, h("div", { key: '21eead2fe7c96e0019baf0249c6d901276dde3a6', class: "dso-selectable-container" }, h("div", { key: 'c0ef4e985f2cbc828579556957c52631e6fbb418', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: '50e495ec15d8319cb29c0de9931d8e35400228c0', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: 'eaedc13f6945d9eb2b45d2db3d6d8f203d67b0b7', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'd33b87765ac73156cc2c6b8a18054e708a5963ec', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '228a0f425250e29a10c30a5b678ea7fb4a24fc14' }, h("slot", { key: '597d0b42196974aa8686e98570b543de11cd8f93', name: "info" })))), h("slot", { key: '1a97013dc9f4d5c534cf765453c7e8ecbe879e81', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

package/dist/collection/components/slide-toggle/slide-toggle.js

@@ -19,7 +19,7 @@ export class SlideToggle {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (h(Fragment, null, h("button", Object.assign({ key: 'f8675793bcdd4b88ca76fa4e3739a5e7a76ebbb0', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: '3aea12f6ceb0ca2aaa708afe2345f9fc45b5f982', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '8e1d9f35b03bc2c5eae7fe28b5f0966f76eb70d4', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'bdf984ae055e5b6b994da64526b260082935b43e', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: 'bc009a77fdf29e0901b089d22cf73383b3172c9c', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'c623527a4f867e5bb7745d97f77d5f6515e8b9fd', htmlFor: this.identifier }, h("slot", { key: 'bef77c8f156edc05a4e549d0a9aa0d5c33e6797f' })))));
+        return (h(Fragment, null, h("button", Object.assign({ key: '2f041ba46888fc7f12eca25309eedaf6f92509f5', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: '2028e621c3dfd4d6751044eeeb5a887fd196476d', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: 'f610a403b34591b0fb0571d191430749cff28c64', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '734939934ef6152a5961262abe5f6454a7e72780', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '3d603a04e5d2d0c741317188dd0f2f612223d585', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '66c9f4d20e3bbe2855a718cac3583b68dd907b8c', htmlFor: this.identifier }, h("slot", { key: '408fda225c63c407acbeb341761c2ab86851a3bc' })))));
     }
     static get is() { return "dso-slide-toggle"; }
     static get originalStyleUrls() {