@platformscode/core 0.0.51 → 0.0.52

package/dist/collection/components/dga-search-box/dga-search-box.css

@@ -183,13 +183,11 @@ fieldset {
 /**
  * 1. Correct color not being inherited in IE 6/7/8/9.
  * 2. Correct text not wrapping in Firefox 3.
- * 3. Correct alignment displayed oddly in IE 6/7.
  */
 legend {
   border: 0; /* 1 */
   padding: 0;
   white-space: normal; /* 2 */
-  *margin-left: -7px; /* 3 */
 }
 
 /**
@@ -205,7 +203,6 @@ textarea {
   font-size: 100%; /* 1 */
   margin: 0; /* 2 */
   vertical-align: baseline; /* 3 */
-  *vertical-align: middle; /* 3 */
 }
 
 /**
@@ -234,8 +231,6 @@ select {
  * 2. Correct inability to style clickable `input` types in iOS.
  * 3. Improve usability and consistency of cursor style between image-type
  *    `input` and others.
- * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
- *    Known issue: inner spacing remains in IE 6.
  */
 button,
 html input[type=button],
@@ -243,7 +238,6 @@ input[type=reset],
 input[type=submit] {
   -webkit-appearance: button; /* 2 */
   cursor: pointer; /* 3 */
-  *overflow: visible; /* 4 */
 }
 
 /**
@@ -257,15 +251,11 @@ html input[disabled] {
 /**
  * 1. Address box sizing set to content-box in IE 8/9.
  * 2. Remove excess padding in IE 8/9.
- * 3. Remove excess padding in IE 7.
- *    Known issue: excess padding remains in IE 6.
  */
 input[type=checkbox],
 input[type=radio] {
   box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */
-  *height: 13px; /* 3 */
-  *width: 13px; /* 3 */
 }
 
 /**
@@ -660,33 +650,8 @@ template {
   display: none;
 }
 
-@font-face {
-  font-family: "IBM Plex Sans Arabic";
-  src: url("/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-Regular.woff2") format("woff2"), url("/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-Regular.woff") format("woff");
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  font-family: "IBM Plex Sans Arabic";
-  src: url("/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-Medium.woff2") format("woff2"), url("/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-Medium.woff") format("woff");
-  font-weight: 500;
-  font-style: normal;
-}
-@font-face {
-  font-family: "IBM Plex Sans Arabic";
-  src: url("/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-SemiBold.woff2") format("woff2"), url("/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-SemiBold.woff") format("woff");
-  font-weight: 600;
-  font-style: normal;
-}
-@font-face {
-  font-family: "IBM Plex Sans Arabic";
-  src: url("/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-Bold.woff2") format("woff2"), url("/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-Bold.woff") format("woff");
-  font-weight: 700;
-  font-style: normal;
-  font-display: auto;
-}
 body {
-  font-family: "IBM Plex Sans Arabic";
+  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 a,
@@ -697,195 +662,195 @@ a:focus {
 }
 
 .display-2xl-regular {
-  font: 400 72px/90px "IBM Plex Sans Arabic";
+  font: 400 72px/90px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .display-xl-regular {
-  font: 400 60px/72px "IBM Plex Sans Arabic";
+  font: 400 60px/72px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .display-lg-regular {
-  font: 400 48px/60px "IBM Plex Sans Arabic";
+  font: 400 48px/60px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .display-md-regular {
-  font: 400 36px/44px "IBM Plex Sans Arabic";
+  font: 400 36px/44px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .display-sm-regular {
-  font: 400 30px/38px "IBM Plex Sans Arabic";
+  font: 400 30px/38px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .display-xs-regular {
-  font: 400 24px/32px "IBM Plex Sans Arabic";
+  font: 400 24px/32px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .text-xl-regular {
-  font: 400 20px/30px "IBM Plex Sans Arabic";
+  font: 400 20px/30px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .text-lg-regular {
-  font: 400 18px/28px "IBM Plex Sans Arabic";
+  font: 400 18px/28px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .text-md-regular, .dga-search-box--lg .input__prefix-label, .dga-search-box--lg .input__suffix-label, .dga-search-box__prefix-label, .dga-search-box__prefix-icon, .dga-search-box__prefix-chevron, .dga-search-box__suffix-label, .dga-search-box__suffix-icon, .dga-search-box__suffix-chevron, .dga-search-box__field::placeholder, .dga-search-box__field {
-  font: 400 16px/24px "IBM Plex Sans Arabic";
+  font: 400 16px/24px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .text-sm-regular, .dga-search-box--md .input__prefix-label, .dga-search-box--md .input__suffix-label, .dga-search-box--md .dga-search-box__field, .dga-search-box--md .dga-search-box__field::placeholder, .dga-search-box--lg .dga-search-box__field, .dga-search-box--lg .dga-search-box__field::placeholder, .dga-search-box__prefix .dropdown__label--selection, .dga-search-box__suffix .dropdown__label--selection, .dga-form-control > .dga-label {
-  font: 400 14px/20px "IBM Plex Sans Arabic";
+  font: 400 14px/20px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .text-xs-regular {
-  font: 400 12px/18px "IBM Plex Sans Arabic";
+  font: 400 12px/18px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .text-2xs-regular {
-  font: 400 10px/14px "IBM Plex Sans Arabic";
+  font: 400 10px/14px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .display-2xl-medium {
-  font: 500 72px/90px "IBM Plex Sans Arabic";
+  font: 500 72px/90px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .display-xl-medium {
-  font: 500 60px/72px "IBM Plex Sans Arabic";
+  font: 500 60px/72px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .display-lg-medium {
-  font: 500 48px/60px "IBM Plex Sans Arabic";
+  font: 500 48px/60px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .display-md-medium {
-  font: 500 36px/44px "IBM Plex Sans Arabic";
+  font: 500 36px/44px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .display-sm-medium {
-  font: 500 30px/38px "IBM Plex Sans Arabic";
+  font: 500 30px/38px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .display-xs-medium {
-  font: 500 24px/32px "IBM Plex Sans Arabic";
+  font: 500 24px/32px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .text-xl-medium {
-  font: 500 20px/30px "IBM Plex Sans Arabic";
+  font: 500 20px/30px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .text-lg-medium {
-  font: 500 18px/28px "IBM Plex Sans Arabic";
+  font: 500 18px/28px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .text-md-medium {
-  font: 500 16px/24px "IBM Plex Sans Arabic";
+  font: 500 16px/24px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .text-sm-medium {
-  font: 500 14px/20px "IBM Plex Sans Arabic";
+  font: 500 14px/20px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .text-xs-medium {
-  font: 500 12px/18px "IBM Plex Sans Arabic";
+  font: 500 12px/18px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .text-2xs-medium {
-  font: 500 10px/14px "IBM Plex Sans Arabic";
+  font: 500 10px/14px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .display-2xl-semibold {
-  font: 600 72px/90px "IBM Plex Sans Arabic";
+  font: 600 72px/90px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .display-xl-semibold {
-  font: 600 60px/72px "IBM Plex Sans Arabic";
+  font: 600 60px/72px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .display-lg-semibold {
-  font: 600 48px/60px "IBM Plex Sans Arabic";
+  font: 600 48px/60px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .display-md-semibold {
-  font: 600 36px/44px "IBM Plex Sans Arabic";
+  font: 600 36px/44px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .display-sm-semibold {
-  font: 600 30px/38px "IBM Plex Sans Arabic";
+  font: 600 30px/38px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .display-xs-semibold {
-  font: 600 24px/32px "IBM Plex Sans Arabic";
+  font: 600 24px/32px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .text-xl-semibold {
-  font: 600 20px/30px "IBM Plex Sans Arabic";
+  font: 600 20px/30px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .text-lg-semibold {
-  font: 600 18px/28px "IBM Plex Sans Arabic";
+  font: 600 18px/28px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .text-md-semibold {
-  font: 600 16px/24px "IBM Plex Sans Arabic";
+  font: 600 16px/24px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .text-sm-semibold {
-  font: 600 14px/20px "IBM Plex Sans Arabic";
+  font: 600 14px/20px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .text-xs-semibold {
-  font: 600 12px/18px "IBM Plex Sans Arabic";
+  font: 600 12px/18px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .text-2xs-semibold {
-  font: 600 10px/14px "IBM Plex Sans Arabic";
+  font: 600 10px/14px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .display-2xl-bold {
-  font: 700 72px/90px "IBM Plex Sans Arabic";
+  font: 700 72px/90px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .display-xl-bold {
-  font: 700 60px/72px "IBM Plex Sans Arabic";
+  font: 700 60px/72px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .display-lg-bold {
-  font: 700 48px/60px "IBM Plex Sans Arabic";
+  font: 700 48px/60px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .display-md-bold {
-  font: 700 36px/44px "IBM Plex Sans Arabic";
+  font: 700 36px/44px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .display-sm-bold {
-  font: 700 30px/38px "IBM Plex Sans Arabic";
+  font: 700 30px/38px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .display-xs-bold {
-  font: 700 24px/32px "IBM Plex Sans Arabic";
+  font: 700 24px/32px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .text-xl-bold {
-  font: 700 20px/30px "IBM Plex Sans Arabic";
+  font: 700 20px/30px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .text-lg-bold {
-  font: 700 18px/28px "IBM Plex Sans Arabic";
+  font: 700 18px/28px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .text-md-bold {
-  font: 700 16px/24px "IBM Plex Sans Arabic";
+  font: 700 16px/24px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .text-sm-bold {
-  font: 700 14px/20px "IBM Plex Sans Arabic";
+  font: 700 14px/20px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .text-xs-bold {
-  font: 700 12px/18px "IBM Plex Sans Arabic";
+  font: 700 12px/18px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .text-2xs-bold {
-  font: 700 10px/14px "IBM Plex Sans Arabic";
+  font: 700 10px/14px "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
 }
 
 .dga-spacing-hor-0 {
@@ -2267,11 +2232,11 @@ a:focus {
 }
 
 .dga-flex-justify-between {
-  justify-content: between;
+  justify-content: space-between;
 }
 
 .dga-flex-justify-around {
-  justify-content: around;
+  justify-content: space-around;
 }
 
 .dga-flex-align-start {

package/dist/collection/components/dga-search-box/dga-search-box.js

@@ -107,12 +107,12 @@ export class DgaSearchBox {
     render() {
         const { el } = this;
         const dir = isRTL(el) ? 'rtl' : 'ltr';
-        return (h(Host, { key: '154b3094ed0a667e0b48744902a5635630da6712', dir: dir }, h("div", { key: '534f093c975762bdc1a91fc1a617a332c581d0db', class: { 'dga-form-control': true, 'dga-form-control--fullwidth': this.fullwidth } }, this.label && h("label", { key: 'f3f6d76deddbba4e74482cf653f1cafa1fc8c0f7', class: "dga-label" }, this.label), h("div", { key: 'a6f8fa67653e0968bdf1ad318d8a2990814d9f7b', class: `dga-search-box dga-search-box--${this.size} ${this.error ? 'dga-search-box--error' : ''} ${this.variant !== 'default' ? `dga-search-box--${this.variant}` : ''} ${this.isActive ? 'active' : ''} ${this.isFocused ? 'focus' : ''} ${this.disabled ? 'dga-search-box--disabled' : ''} ${this.readonly ? 'readOnly' : ''}`, ref: el => (this.inputContainerRef = el) }, this.icon && (h("span", { key: '26d789cefe530fa4334548ee0ebbf7c4baae3194', class: "dga-search-box__icon" }, h("dga-icon", { key: 'b8389eb9f19dc4c182957a73251acbe5d518e783', icon: search01Stroke, size: 20, color: '#161616' }))), h("input", { key: '9fe9a44b685adb217fd02205ced7489fdc2e3687', value: this.value, name: this.name, type: "text", onFocus: () => (this.isFocused = true), onBlur: e => {
+        return (h(Host, { key: 'c40b7a73453c95909250d280d1dde193f7a79b55', dir: dir }, h("div", { key: 'bdc626ab03dfa644e6ddcf0e730e55aa04425e28', class: { 'dga-form-control': true, 'dga-form-control--fullwidth': this.fullwidth } }, this.label && h("label", { key: '7412c30005292bbebda53a0c0b35831d103e92b3', class: "dga-label" }, this.label), h("div", { key: '4eeb28dcd2dc45325262b3157c81ae5b694ff1d6', class: `dga-search-box dga-search-box--${this.size} ${this.error ? 'dga-search-box--error' : ''} ${this.variant !== 'default' ? `dga-search-box--${this.variant}` : ''} ${this.isActive ? 'active' : ''} ${this.isFocused ? 'focus' : ''} ${this.disabled ? 'dga-search-box--disabled' : ''} ${this.readonly ? 'readOnly' : ''}`, ref: el => (this.inputContainerRef = el) }, this.icon && (h("span", { key: '9fd13518800184bb99ea01e17458cddca5762b82', class: "dga-search-box__icon" }, h("dga-icon", { key: 'fc5986adc18b14c2d711294861633fec8ec2cc48', icon: search01Stroke, size: 20, color: '#161616' }))), h("input", { key: '33b06352fa77f7fb29f96a84ea5b477e39ef7326', value: this.value, name: this.name, type: "text", onFocus: () => (this.isFocused = true), onBlur: e => {
                 this.isFocused = false;
                 this.onBlur.emit(e);
             }, class: "dga-search-box__field", placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, onMouseDown: () => (this.isActive = true), onMouseUp: () => (this.isActive = false), onMouseOut: () => (this.isActive = false), onInput: event => {
                 this.handleInputChange(event);
-            } }), h("div", { key: 'e643ee9c00cd4944be0ea975503e0db0cc069633', class: "dga-search-box__actions" }, this.value.length > 0 && (h(Fragment, { key: 'af1b76df2c9db0d2ae7b8769d4a09ace3f232c67' }, h("button", { key: '2dce5a9f226cff62989a4b7511f851f516907588', class: "dga-search-box__action-btn", onClick: this.handleResetInput }, h("dga-icon", { key: '566e4ca5ba591745031768a13fbca4a7592cb165', icon: cancel01Stroke, size: 20 })), h("svg", { key: '4cd8e077fb128dcf82efb2519b946126c3bdae2b', xmlns: "http://www.w3.org/2000/svg", width: "1", height: "26", viewBox: "0 0 1 26", fill: "none" }, h("rect", { key: '09dabea062dc9dd40fd2f15efb12d7406b014fa3', x: "1", y: "0.5", width: "25", height: "1", transform: "rotate(90 1 0.5)", fill: "#D2D6DB" })))), this.showTrailingIcon && (h("dga-tooltip", { key: 'c89224607c737930ad4b9b57397b84de5f20fe5e', tooltipTitle: isRTL(el) ? "البحث عن طريق الصوت" : "Search by voice", direction: "bottom", beakAlignment: "center", beakPlacement: "top" }, h("button", { key: '52bda3078924f666a2437aa353f99d36b3aca22d', class: "dga-search-box__search-btn", onClick: () => this.startListening(), disabled: this.isListening }, this.isListening ? (h("span", { class: "dga-search-box__icon" }, h("dga-icon", { icon: mic01Stroke, size: 20 }))) : (h("span", { class: "dga-search-box__icon" }, h("dga-icon", { icon: mic01Stroke, size: 20 })))))))))));
+            } }), h("div", { key: '021f847a38e90bf87028911cc25f2a25b4c70897', class: "dga-search-box__actions" }, this.value.length > 0 && (h(Fragment, { key: '52d0d97fae1a562f51132fca90b0393b76927ed6' }, h("button", { key: '22331c49be6b00a83ae805429bd7a37f7e2f4e58', class: "dga-search-box__action-btn", onClick: this.handleResetInput }, h("dga-icon", { key: 'f13566bfab1474be740306a6425dcdb3a8b74d24', icon: cancel01Stroke, size: 20 })), h("svg", { key: 'cab1c9b3fcea4536c587c87ce241d35e55aa4b76', xmlns: "http://www.w3.org/2000/svg", width: "1", height: "26", viewBox: "0 0 1 26", fill: "none" }, h("rect", { key: '488609355b22608afb18c1112a92602d8fb38e88', x: "1", y: "0.5", width: "25", height: "1", transform: "rotate(90 1 0.5)", fill: "#D2D6DB" })))), this.showTrailingIcon && (h("dga-tooltip", { key: '5cbb28197228d27004d49dfdfa67f59bb9976075', tooltipTitle: isRTL(el) ? "البحث عن طريق الصوت" : "Search by voice", direction: "bottom", beakAlignment: "center", beakPlacement: "top" }, h("button", { key: '1f5f032d042bc722885683b4b1a2dea37c71b49e', class: "dga-search-box__search-btn", onClick: () => this.startListening(), disabled: this.isListening }, this.isListening ? (h("span", { class: "dga-search-box__icon" }, h("dga-icon", { icon: mic01Stroke, size: 20 }))) : (h("span", { class: "dga-search-box__icon" }, h("dga-icon", { icon: mic01Stroke, size: 20 })))))))))));
     }
     static get is() { return "dga-search-box"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dga-second-nav-header/dga-second-nav-header-actions.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class DgaSecondNavHeaderActions {
     render() {
-        return (h(Host, { key: '656a45dd9fa455b169626083bb5bbc3ad311565d' }, h("div", { key: '025fbee94b4cf9da5b74adab5ae1a6bea56f7be1', class: `items-container` }, h("slot", { key: '02364f830ffa064bb1b9bc0ab31e0bf621d3a2f5' }))));
+        return (h(Host, { key: 'b351ddc407d8e27f31d650712d03da7a1f057ee3' }, h("div", { key: '61d557b90e1f403457a373d20b107f0cee3c53c4', class: `items-container` }, h("slot", { key: 'e7f41898529eef6531d4da352d9ca31717ea522f' }))));
     }
     static get is() { return "dga-second-nav-header-actions"; }
 }

package/dist/collection/components/dga-second-nav-header/dga-second-nav-header-content.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class DgaSecondNavHeaderContent {
     render() {
-        return (h(Host, { key: 'fd843ea201b8f2df955270f5954b6cdd1a131992' }, h("div", { key: '1f89f601da513ebdea736fad4ad5575da105fab1', class: `items-container` }, h("slot", { key: 'ede8b986ba20359b7b91e05ce3748abee831debb' }))));
+        return (h(Host, { key: 'bdfdae88b21a56131cd4a17f0a693f88b850e159' }, h("div", { key: 'f7b15a95216a65b5e89f31e79009c150b5e52dc2', class: `items-container` }, h("slot", { key: '4ab5f821ff2bdd2e3e72225453f84ac31dda6923' }))));
     }
     static get is() { return "dga-second-nav-header-content"; }
 }

package/dist/collection/components/dga-second-nav-header/dga-second-nav-header-item.js

@@ -9,7 +9,7 @@ export class DgaSecondNavHeaderItem {
         });
     }
     render() {
-        return (h(Host, { key: 'c610e1fde410f3e1471dd9439bd1b9bb0b4eabe1' }, h("slot", { key: '9970780eaaf6fa28be190be48a542a9f57a9f4a7', name: 'icon' }), h("slot", { key: '3d0828a6e8cd25a107598d0de6e47ce602d1b3f0', name: 'label' }, this.label)));
+        return (h(Host, { key: 'f1618e01ae84ee2cdb7997c99d6943e7810575a0' }, h("slot", { key: '46b35925814c1ad721e69e39c9191f634d4ee2c8', name: 'icon' }), h("slot", { key: 'efb86cd5d310b659ed430aa700e0b59826ab23dd', name: 'label' }, this.label)));
     }
     static get is() { return "dga-second-nav-header-item"; }
     static get properties() {

package/dist/collection/components/dga-second-nav-header/dga-second-nav-header.js

@@ -21,7 +21,7 @@ export class DgaSecondNavHeader {
         });
     }
     render() {
-        return (h(Host, { key: '95cc58371f4cce004aba8a83f4bdbc16b2617dc1' }, h("div", { key: 'f5d30a30b7fd09f2bfb696af26b2481021d58043', class: `wrapper ${this.variant} `, "aria-label": 'a secondary navigation navbar' }, h("div", { key: '08efa2e8c7c062020588273aeb217d02cf67bf25', class: `container ${this.hideDivider ? '' : 'border'}` }, h("div", { key: '89ef9a79e559be149b6571d0479d76081fb64ea6', class: `content` }, h("slot", { key: 'fbf5f35d53caac64074dced53fbc13f7c592355c', name: "content" })), h("div", { key: '9df51afb79ed141f021f6d22f0e1a80690a6a925', class: `actions` }, h("slot", { key: 'a0cd9a003da3d92ffe5a0e18421936e2a91bb983', name: "actions" }))))));
+        return (h(Host, { key: '00231b62ea1aa27c7ec21a757f79e067ec2b4325' }, h("div", { key: '27a7c28e30815696e58d6d1915d4b53862dea8ce', class: `wrapper ${this.variant} `, "aria-label": 'a secondary navigation navbar' }, h("div", { key: '99b8f9f869be7a58c7fafc4a9c7a0a2e17f28054', class: `container ${this.hideDivider ? '' : 'border'}` }, h("div", { key: '5f0d3b496e09db8acbf9a51477ec2dc526e526f9', class: `content` }, h("slot", { key: '41178af7342a2111df3e64e9f1e0f2fe415a620b', name: "content" })), h("div", { key: 'd82452e699fd79a789024c9d961622a603d841bf', class: `actions` }, h("slot", { key: '82da771e13373224176dba27b2c7420058a6b433', name: "actions" }))))));
     }
     static get is() { return "dga-second-nav-header"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/dga-skeleton/dga-circle-skeleton.js

@@ -5,7 +5,7 @@ export class CircleSkeleton {
         this.width = '80px';
     }
     render() {
-        return (h("div", { key: '23d9d449c3b5a3272908d1811b37541583b24a93', style: { width: this.width, height: this.width }, class: `circle_skeleton type${this.type}` }));
+        return (h("div", { key: '67b52f78591111d4f1aff4105adc89dd51d92f7e', style: { width: this.width, height: this.width }, class: `circle_skeleton type${this.type}` }));
     }
     static get is() { return "dga-circle-skeleton"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dga-skeleton/dga-line-skeleton.js

@@ -5,7 +5,7 @@ export class LineSkeleton {
         this.type = '1';
     }
     render() {
-        return (h("div", { key: '4e7847fe2df567382855572897f5c3958b7525f9', class: `line_text ${this.size} type${this.type}` }));
+        return (h("div", { key: '51cdeb277ba2842d2848de697114620ee54f1326', class: `line_text ${this.size} type${this.type}` }));
     }
     static get is() { return "dga-line-skeleton"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dga-skeleton/dga-rectangle-skeleton.js

@@ -6,7 +6,7 @@ export class RectangleSkeleton {
         this.width = 'long';
     }
     render() {
-        return (h("div", { key: '1f9a725b8a942706810028df42f9afd21db782c7', class: `rectangle_text ${this.size} type${this.type} ${this.width}` }));
+        return (h("div", { key: '0d64633abb79155fe336fb6321b17b3098302726', class: `rectangle_text ${this.size} type${this.type} ${this.width}` }));
     }
     static get is() { return "dga-rectangle-skeleton"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dga-skeleton/dga-square-skeleton.js

@@ -17,7 +17,7 @@ export class SquareSkeleton {
         return borderRadiusMapper[this.width] || '';
     }
     render() {
-        return (h("div", { key: 'ec53f88065750fb119da6711034ccc2d3ef818bc' }, h("div", { key: 'a752b7b91eeae5fc5469721bba303953c412ed8b', style: { width: this.width, height: this.width }, class: `square_skeleton type${this.type} ${this.getBorderRadius()}` })));
+        return (h("div", { key: '81699f08f887dced7ac79ffa9032b2b172cffe3b' }, h("div", { key: 'd6a56efc1098846db9366796c39a98fcbeac3c62', style: { width: this.width, height: this.width }, class: `square_skeleton type${this.type} ${this.getBorderRadius()}` })));
     }
     static get is() { return "dga-square-skeleton"; }
     static get encapsulation() { return "shadow"; }