globuswebcomponents 0.3.4 → 0.3.6

package/dist/collection/components/gb-carousel-arrow/gb-carousel-arrow.css

@@ -75,10 +75,19 @@
     --success-900: #074d31;
     --success-950: #053321;
 
-    /* opacity color palette  */
+    /* ------------------------------------------opacity color palette--------------------------------------  */
+    /* 20% opacity */
     --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);
     --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);
 
+    /* 30% opacity */
+    --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);
+    --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);
+
+    /* 40% opacity */
+    --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);
+    --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);
+
 
     /* ------------------------------------------Secondary Color------------------------------------------- */
     /* blueLight color palete */
@@ -250,6 +259,14 @@
         --color-text-warning-bold: var(--warning-100);
     }
 
+    [data-theme="light"] {
+        --color-text-warning-subtle: var(--warning-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-warning-subtle: var(--warning-400);
+    }
+
     [data-theme="light"] {
         --color-text-sucess: var(--success-600);
     }
@@ -282,6 +299,14 @@
         --color-text-discovery-bold: var(--blueLight-100);
     }
 
+    [data-theme="light"] {
+        --color-text-discovery-subtle: var(--blueLight-400);
+    }
+
+    [data-theme="dark"] {
+        --color-text-discovery-subtle: var(--blueLight-100);
+    }
+
     [data-theme="light"] {
         --color-text-information: var(--blue-600);
     }
@@ -298,6 +323,14 @@
         --color-text-information-bold: var(--blue-100);
     }
 
+    [data-theme="light"] {
+        --color-text-information-subtle: var(--blue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-information-subtle: var(--blue-400);
+    }
+
     [data-theme="light"] {
         --color-text-purple: var(--purple-600);
     }
@@ -314,6 +347,30 @@
         --color-text-purple-bold: var(--purple-100);
     }
 
+    [data-theme="light"] {
+        --color-text-purple-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-purple-subtle: var(--purple-400);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink: var(--purple-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink: var(--purple-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink-subtle: var(--purple-400);
+    }
+
 
     /* --------------Link color--------------- */
 
@@ -1244,6 +1301,22 @@
         --color-blanket: var(--darkBlue200-opacity20);
     }
 
+    [data-theme="light"] {
+        --color-blanket-subtle: var(--darkBlue500-opacity30);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtle: var(--darkBlue200-opacity30);
+    }
+
+    [data-theme="light"] {
+        --color-blanket-subtler: var(--darkBlue500-opacity40);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtler: var(--darkBlue200-opacity40);
+    }
+
 
 
     /* ----------------Skeleton Color --------------- */

package/dist/collection/components/gb-carousel-arrow/gb-carousel-arrow.js

@@ -5,7 +5,7 @@ export class GbCarouselArrow {
         this.chevron = undefined;
     }
     render() {
-        return (h("div", { key: 'cc9056874bdf3487c67183e7bf29f155c1f2f80d', class: `carousel_arrow ${this.size}` }, this.chevron === 'left' && (h("svg", { key: 'c04fddba71d8686a3d54d51909f925fbb9b9903c', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'ce3ac8141bc2f7801418d7e65560f10f3d00f178', d: "M15 5.99989C15 5.99989 9.00001 10.4188 9 11.9999C8.99999 13.5811 15 17.9999 15 17.9999", stroke: "#202939", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.chevron === 'right' && (h("svg", { key: 'a44971c010d32a2fb232b77b54f8fee455e55f02', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'a66ee3baa62d753d942579fccce15e9a8b0c1f9e', d: "M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18", stroke: "#202939", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+        return (h("div", { key: 'fd9c1e48185c710861c6108fafe555f66de849ef', class: `carousel_arrow ${this.size}` }, this.chevron === 'left' && (h("svg", { key: '5c2211547c284c4e6130e032e6191620e1eda6aa', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'de9e702692201e825fea3eee4de0be1cc7b540ff', d: "M15 5.99989C15 5.99989 9.00001 10.4188 9 11.9999C8.99999 13.5811 15 17.9999 15 17.9999", stroke: "#202939", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.chevron === 'right' && (h("svg", { key: '3efa5c575acb1415a56402326b15c788b78542fc', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'bb54d6f9b16bba681e2b4b9fc1938c56ac7eee29', d: "M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18", stroke: "#202939", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
     }
     static get is() { return "gb-carousel-arrow"; }
     static get originalStyleUrls() {
@@ -25,7 +25,7 @@ export class GbCarouselArrow {
                 "mutable": false,
                 "complexType": {
                     "original": "GeneralSizes",
-                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\"",
+                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\" | \"xxs\"",
                     "references": {
                         "GeneralSizes": {
                             "location": "import",

package/dist/collection/components/gb-checkbox/gb-checkbox.js

@@ -35,7 +35,7 @@ export class GbCheckbox {
         }
     }
     render() {
-        return (h("div", { key: '59a7f4c9935f703ff05bdf5a93412dbd1dc5bf60', class: `checkbox_div ${this.size}` }, h("div", { key: '0dcd4b961d5a02e0cc4fbd6ccd607e9c4770825e', class: "checkbox_base" }, h("gb-checkbox-base", { key: '5bff172eb34b8245803024cad3e7d058cd9bbfdf', size: this.size, type: this.type, checked: this.checked, state: this.state, indeterminate: this.indeterminate })), h("div", { key: '4ea590481aa71a2aa4d21fb854608e6f4b271d53', class: "text" }, h("slot", { key: 'cb29e8f0b59cf462eb5bad351ddce866b7a94404', name: "label" }), this.supportingText && (h("slot", { key: 'cfd94041f9028eccd9433e6a486233edaf5186a9', name: "supporting_text" })))));
+        return (h("div", { key: 'c595f68d332b701785d9bee717f3ff448696bb35', class: `checkbox_div ${this.size}` }, h("div", { key: '5c2762163d17576e74e1a47f36b7813128f3518e', class: "checkbox_base" }, h("gb-checkbox-base", { key: '2af4acf31901d7d0cd5e52bd608582fc059d124d', size: this.size, type: this.type, checked: this.checked, state: this.state, indeterminate: this.indeterminate })), h("div", { key: '548c5310f39f44e665352d3387531e5154625ac8', class: "text" }, h("slot", { key: '1bb7b24f091e4b385fbd9f0ac6f35c03889b1096', name: "label" }), this.supportingText && (h("slot", { key: '7dfaf8bd7f40971f59223354f019bd0100ccd265', name: "supporting_text" })))));
     }
     static get is() { return "gb-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -92,7 +92,7 @@ export class GbCheckbox {
                 "mutable": false,
                 "complexType": {
                     "original": "GeneralSizes",
-                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\"",
+                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\" | \"xxs\"",
                     "references": {
                         "GeneralSizes": {
                             "location": "import",

package/dist/collection/components/gb-checkbox-base/gb-checkbox-base.js

@@ -98,7 +98,7 @@ export class GbCheckboxBase {
         }
     }
     render() {
-        return (h("div", { key: '34e031c99c3eb7b34c9e1b85e64d2f3505b78610', class: `checkbox_container ${this.size}`, onClick: () => {
+        return (h("div", { key: '3f585709c9ea0d17d9678bc7c6d644596f6c6e80', class: `checkbox_container ${this.size}`, onClick: () => {
                 if (this.type === 'checkbox') {
                     return this.toggleCheckboxState();
                 }
@@ -152,7 +152,7 @@ export class GbCheckboxBase {
                 "mutable": false,
                 "complexType": {
                     "original": "GeneralSizes",
-                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\"",
+                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\" | \"xxs\"",
                     "references": {
                         "GeneralSizes": {
                             "location": "import",

package/dist/collection/components/gb-checkbox-group/gb-checkbox-group.js

@@ -8,7 +8,7 @@ export class GbCheckboxGroup {
         this.type = undefined;
     }
     render() {
-        return (h("div", { key: '73fc57fa9723ed55bb04df15bef6438b3eeeb021', class: `checkbox_group ${this.breakpoint}` }, h("div", { key: '135a546bcf19927caf9b779a9fad79c8558f0de8', class: "text" })));
+        return (h("div", { key: 'c2848df780d31fe50823dadef15552670730922c', class: `checkbox_group ${this.breakpoint}` }, h("div", { key: '2dd32513588c6799cdace2938c8a56e194592f78', class: "text" })));
     }
     static get is() { return "gb-checkbox-group"; }
     static get encapsulation() { return "shadow"; }
@@ -29,7 +29,7 @@ export class GbCheckboxGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "GeneralSizes",
-                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\"",
+                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\" | \"xxs\"",
                     "references": {
                         "GeneralSizes": {
                             "location": "import",

package/dist/collection/components/gb-collapse-button/gb-collapse-button.css

@@ -75,10 +75,19 @@
     --success-900: #074d31;
     --success-950: #053321;
 
-    /* opacity color palette  */
+    /* ------------------------------------------opacity color palette--------------------------------------  */
+    /* 20% opacity */
     --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);
     --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);
 
+    /* 30% opacity */
+    --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);
+    --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);
+
+    /* 40% opacity */
+    --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);
+    --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);
+
 
     /* ------------------------------------------Secondary Color------------------------------------------- */
     /* blueLight color palete */
@@ -250,6 +259,14 @@
         --color-text-warning-bold: var(--warning-100);
     }
 
+    [data-theme="light"] {
+        --color-text-warning-subtle: var(--warning-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-warning-subtle: var(--warning-400);
+    }
+
     [data-theme="light"] {
         --color-text-sucess: var(--success-600);
     }
@@ -282,6 +299,14 @@
         --color-text-discovery-bold: var(--blueLight-100);
     }
 
+    [data-theme="light"] {
+        --color-text-discovery-subtle: var(--blueLight-400);
+    }
+
+    [data-theme="dark"] {
+        --color-text-discovery-subtle: var(--blueLight-100);
+    }
+
     [data-theme="light"] {
         --color-text-information: var(--blue-600);
     }
@@ -298,6 +323,14 @@
         --color-text-information-bold: var(--blue-100);
     }
 
+    [data-theme="light"] {
+        --color-text-information-subtle: var(--blue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-information-subtle: var(--blue-400);
+    }
+
     [data-theme="light"] {
         --color-text-purple: var(--purple-600);
     }
@@ -314,6 +347,30 @@
         --color-text-purple-bold: var(--purple-100);
     }
 
+    [data-theme="light"] {
+        --color-text-purple-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-purple-subtle: var(--purple-400);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink: var(--purple-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink: var(--purple-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink-subtle: var(--purple-400);
+    }
+
 
     /* --------------Link color--------------- */
 
@@ -1244,6 +1301,22 @@
         --color-blanket: var(--darkBlue200-opacity20);
     }
 
+    [data-theme="light"] {
+        --color-blanket-subtle: var(--darkBlue500-opacity30);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtle: var(--darkBlue200-opacity30);
+    }
+
+    [data-theme="light"] {
+        --color-blanket-subtler: var(--darkBlue500-opacity40);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtler: var(--darkBlue200-opacity40);
+    }
+
 
 
     /* ----------------Skeleton Color --------------- */
@@ -1595,7 +1668,7 @@
 .tooltip{
     position: absolute;
     left: 3.5rem;
-    bottom: 0.5rem;
+    bottom: 2.3rem;
 }
 
 .text-xs-semi-bold{

package/dist/collection/components/gb-collapse-button/gb-collapse-button.js

@@ -3,28 +3,28 @@ export class GbCollapseButton {
     constructor() {
         this.color = undefined;
         this.isCollapsed = false;
-        this.currentIconDirection = 'left';
+        this.action = 'collapse';
         this.isHovered = false;
     }
     toggleIcon() {
-        if (this.currentIconDirection === 'left') {
-            this.currentIconDirection = 'right';
+        if (this.action === 'collapse') {
+            this.action = 'expand';
         }
-        else if (this.currentIconDirection === 'right') {
-            this.currentIconDirection = 'left';
+        else if (this.action === 'expand') {
+            this.action = 'collapse';
         }
     }
-    collapseSidebar() {
+    async collapseSidebar() {
         this.isCollapsed = true;
     }
-    expandSidebar() {
+    async expandSidebar() {
         this.isCollapsed = false;
     }
     render() {
         return [
-            h("div", { key: '3f8ca8de03e6379a475c64c59dfe6b8b0e14eb51' }, h("div", { key: 'cc5ce212f6354428e9eeeb5a5abaf4c432ebeccb', class: `collapse_btn ${this.color}`, onClick: this.toggleIcon.bind(this), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, this.currentIconDirection === 'left' && [
-                h("svg", { key: 'a4448b7cf49e0f4d2a05947bb0017e208dc402e6', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `icon ${this.color}` }, h("path", { key: '6938f6abe28b69f8d193fe030294d95e72d3f0d7', d: "M9.58321 15C9.58321 15 4.58326 11.3176 4.58325 9.99996C4.58324 8.68237 9.58325 5 9.58325 5M15.4165 15C15.4165 15 10.4166 11.3176 10.4166 9.99996C10.4166 8.68237 15.4166 5 15.4166 5", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })),
-            ], this.currentIconDirection === 'right' && (h("svg", { key: '6d73657ef0bdd81bcc2ed12dc9fdffe467127308', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `icon ${this.color}` }, h("path", { key: 'f3620fd56bee1ae0a05f503ba1563a89a0f8457e', d: "M10.4166 15C10.4166 15 15.4166 11.3176 15.4166 9.99996C15.4166 8.68237 10.4166 5 10.4166 5M4.58329 15C4.58329 15 9.58324 11.3176 9.58325 9.99996C9.58326 8.68237 4.58325 5 4.58325 5", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.isHovered && this.currentIconDirection === 'left' ? (h("gb-tooltip", { class: "tooltip", "arrow-position": "left" }, h("p", { slot: "main_text", class: "text-xs-semi-bold" }, "Collapse"))) : this.isHovered && this.currentIconDirection === 'right' ? (h("gb-tooltip", { class: "tooltip", "arrow-position": "left" }, h("p", { slot: "main_text", class: "text-xs-semi-bold" }, "Expand"))) : null),
+            h("div", { key: '42382364a66aa35489c4b14f3fdbee7e3b948205' }, h("div", { key: '49574b2ef7ee5346db0e3fa67d74fe8de140ac69', class: `collapse_btn ${this.color}`, onClick: this.toggleIcon.bind(this), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, this.action === 'collapse' && [
+                h("svg", { key: 'bca96bb573821f1107ad4d7a2c8a97637b250a37', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `icon ${this.color}` }, h("path", { key: 'd54026d69cf38ca35735fed88e4787ac77596c14', d: "M9.58321 15C9.58321 15 4.58326 11.3176 4.58325 9.99996C4.58324 8.68237 9.58325 5 9.58325 5M15.4165 15C15.4165 15 10.4166 11.3176 10.4166 9.99996C10.4166 8.68237 15.4166 5 15.4166 5", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })),
+            ], this.action === 'expand' && (h("svg", { key: '906e80cde07621d7d68005e027aa6ad0cc660303', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `icon ${this.color}` }, h("path", { key: 'b323fa6bddb618b3a82750743a80df9199d2d8bd', d: "M10.4166 15C10.4166 15 15.4166 11.3176 15.4166 9.99996C15.4166 8.68237 10.4166 5 10.4166 5M4.58329 15C4.58329 15 9.58324 11.3176 9.58325 9.99996C9.58326 8.68237 4.58325 5 4.58325 5", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.isHovered && this.action === 'collapse' ? (h("gb-tooltip", { class: "tooltip", arrow: "left" }, h("p", { slot: "label", class: "text-xs-semi-bold" }, "Collapse"))) : this.isHovered && this.action === 'expand' ? (h("gb-tooltip", { class: "tooltip", arrow: "left" }, h("p", { slot: "label", class: "text-xs-semi-bold" }, "Expand"))) : null),
         ];
     }
     static get is() { return "gb-collapse-button"; }
@@ -76,7 +76,7 @@ export class GbCollapseButton {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "currentIconDirection": {
+            "action": {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
@@ -90,9 +90,9 @@ export class GbCollapseButton {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "current-icon-direction",
+                "attribute": "action",
                 "reflect": false,
-                "defaultValue": "'left'"
+                "defaultValue": "'collapse'"
             },
             "isHovered": {
                 "type": "boolean",
@@ -120,7 +120,12 @@ export class GbCollapseButton {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
-                    "references": {},
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
                     "return": "Promise<void>"
                 },
                 "docs": {
@@ -132,7 +137,12 @@ export class GbCollapseButton {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
-                    "references": {},
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
                     "return": "Promise<void>"
                 },
                 "docs": {

package/dist/collection/components/gb-collapse-button/gb-collapse-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-collapse-button.js","sourceRoot":"","sources":["../../../src/components/gb-collapse-button/gb-collapse-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO3D,MAAM,OAAO,gBAAgB;;;2BAEqB,KAAK;oCACG,MAAM;yBAChB,KAAK;;IAEnD,UAAU;QACR,IAAI,IAAI,CAAC,oBAAoB,KAAK,MAAM,EAAE,CAAC;YACzC,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC;QACtC,CAAC;aAAM,IAAI,IAAI,CAAC,oBAAoB,KAAK,OAAO,EAAE,CAAC;YACjD,IAAI,CAAC,oBAAoB,GAAG,MAAM,CAAC;QACrC,CAAC;IACH,CAAC;IAGD,eAAe;QACb,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC1B,CAAC;IAGD,aAAa;QACX,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO;YACL;gBACE,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;oBACrK,IAAI,CAAC,oBAAoB,KAAK,MAAM,IAAI;wBACvC,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,QAAQ,IAAI,CAAC,KAAK,EAAE;4BACxH,6DACE,CAAC,EAAC,sLAAsL,EACxL,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE;qBACP;oBACA,IAAI,CAAC,oBAAoB,KAAK,OAAO,IAAI,CACxC,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,QAAQ,IAAI,CAAC,KAAK,EAAE;wBACxH,6DACE,CAAC,EAAC,sLAAsL,EACxL,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,CACP,CACG;gBACL,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,oBAAoB,KAAK,MAAM,CAAC,CAAC,CAAC,CACxD,kBAAY,KAAK,EAAC,SAAS,oBAAgB,MAAM;oBAC/C,SAAG,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,mBAAmB,eAEzC,CACO,CACd,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,oBAAoB,KAAK,OAAO,CAAC,CAAC,CAAC,CAC5D,kBAAY,KAAK,EAAC,SAAS,oBAAgB,MAAM;oBAC/C,SAAG,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,mBAAmB,aAEzC,CACO,CACd,CAAC,CAAC,CAAC,IAAI,CACJ;SACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Method, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: 'gb-collapse-button',\r\n  styleUrl: 'gb-collapse-button.css',\r\n  shadow: true,\r\n})\r\nexport class GbCollapseButton {\r\n  @Prop() color: 'gray' | 'white';\r\n  @Prop({ mutable: true }) isCollapsed: boolean = false;\r\n  @Prop({ mutable: true }) currentIconDirection: string = 'left';\r\n  @Prop({ mutable: true }) isHovered: boolean = false;\r\n\r\n  toggleIcon() {\r\n    if (this.currentIconDirection === 'left') {\r\n      this.currentIconDirection = 'right';\r\n    } else if (this.currentIconDirection === 'right') {\r\n      this.currentIconDirection = 'left';\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  collapseSidebar() {\r\n    this.isCollapsed = true;\r\n  }\r\n\r\n  @Method()\r\n  expandSidebar() {\r\n    this.isCollapsed = false;\r\n  }\r\n\r\n  render() {\r\n    return [\r\n      <div>\r\n        <div class={`collapse_btn ${this.color}`} onClick={this.toggleIcon.bind(this)} onMouseEnter={() => (this.isHovered = true)} onMouseLeave={() => (this.isHovered = false)}>\r\n          {this.currentIconDirection === 'left' && [\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`icon ${this.color}`}>\r\n              <path\r\n                d=\"M9.58321 15C9.58321 15 4.58326 11.3176 4.58325 9.99996C4.58324 8.68237 9.58325 5 9.58325 5M15.4165 15C15.4165 15 10.4166 11.3176 10.4166 9.99996C10.4166 8.68237 15.4166 5 15.4166 5\"\r\n                stroke=\"#4B5565\"\r\n                stroke-width=\"1.5\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>,\r\n          ]}\r\n          {this.currentIconDirection === 'right' && (\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`icon ${this.color}`}>\r\n              <path\r\n                d=\"M10.4166 15C10.4166 15 15.4166 11.3176 15.4166 9.99996C15.4166 8.68237 10.4166 5 10.4166 5M4.58329 15C4.58329 15 9.58324 11.3176 9.58325 9.99996C9.58326 8.68237 4.58325 5 4.58325 5\"\r\n                stroke=\"#4B5565\"\r\n                stroke-width=\"1.5\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>\r\n          )}\r\n        </div>\r\n        {this.isHovered && this.currentIconDirection === 'left' ? (\r\n          <gb-tooltip class=\"tooltip\" arrow-position=\"left\">\r\n            <p slot=\"main_text\" class=\"text-xs-semi-bold\">\r\n              Collapse\r\n            </p>\r\n          </gb-tooltip>\r\n        ) : this.isHovered && this.currentIconDirection === 'right' ? (\r\n          <gb-tooltip class=\"tooltip\" arrow-position=\"left\">\r\n            <p slot=\"main_text\" class=\"text-xs-semi-bold\">\r\n              Expand\r\n            </p>\r\n          </gb-tooltip>\r\n        ) : null}\r\n      </div>,\r\n    ];\r\n  }\r\n}"]}
+{"version":3,"file":"gb-collapse-button.js","sourceRoot":"","sources":["../../../src/components/gb-collapse-button/gb-collapse-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO3D,MAAM,OAAO,gBAAgB;;;2BAEqB,KAAK;sBACX,UAAU;yBACN,KAAK;;IAEnD,UAAU;QACR,IAAI,IAAI,CAAC,MAAM,KAAK,UAAU,EAAE,CAAC;YAC/B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;QACzB,CAAC;aAAM,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;YACpC,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC;QAC3B,CAAC;IACH,CAAC;IAGD,KAAK,CAAC,eAAe;QACnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC1B,CAAC;IAGD,KAAK,CAAC,aAAa;QACjB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO;YACL;gBACE,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;oBACrK,IAAI,CAAC,MAAM,KAAK,UAAU,IAAI;wBAC7B,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,QAAQ,IAAI,CAAC,KAAK,EAAE;4BACxH,6DACE,CAAC,EAAC,sLAAsL,EACxL,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE;qBACP;oBACA,IAAI,CAAC,MAAM,KAAK,QAAQ,IAAI,CAC3B,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,QAAQ,IAAI,CAAC,KAAK,EAAE;wBACxH,6DACE,CAAC,EAAC,sLAAsL,EACxL,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,CACP,CACG;gBACL,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,CAC9C,kBAAY,KAAK,EAAC,SAAS,EAAC,KAAK,EAAC,MAAM;oBACtC,SAAG,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,mBAAmB,eAErC,CACO,CACd,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC/C,kBAAY,KAAK,EAAC,SAAS,EAAC,KAAK,EAAC,MAAM;oBACtC,SAAG,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,mBAAmB,aAErC,CACO,CACd,CAAC,CAAC,CAAC,IAAI,CACJ;SACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Method, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: 'gb-collapse-button',\r\n  styleUrl: 'gb-collapse-button.css',\r\n  shadow: true,\r\n})\r\nexport class GbCollapseButton {\r\n  @Prop() color: 'gray' | 'white';\r\n  @Prop({ mutable: true }) isCollapsed: boolean = false;\r\n  @Prop({ mutable: true }) action: string = 'collapse';\r\n  @Prop({ mutable: true }) isHovered: boolean = false;\r\n\r\n  toggleIcon() {\r\n    if (this.action === 'collapse') {\r\n      this.action = 'expand';\r\n    } else if (this.action === 'expand') {\r\n      this.action = 'collapse';\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async collapseSidebar() {\r\n    this.isCollapsed = true;\r\n  }\r\n\r\n  @Method()\r\n  async expandSidebar() {\r\n    this.isCollapsed = false;\r\n  }\r\n\r\n  render() {\r\n    return [\r\n      <div>\r\n        <div class={`collapse_btn ${this.color}`} onClick={this.toggleIcon.bind(this)} onMouseEnter={() => (this.isHovered = true)} onMouseLeave={() => (this.isHovered = false)}>\r\n          {this.action === 'collapse' && [\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`icon ${this.color}`}>\r\n              <path\r\n                d=\"M9.58321 15C9.58321 15 4.58326 11.3176 4.58325 9.99996C4.58324 8.68237 9.58325 5 9.58325 5M15.4165 15C15.4165 15 10.4166 11.3176 10.4166 9.99996C10.4166 8.68237 15.4166 5 15.4166 5\"\r\n                stroke=\"#4B5565\"\r\n                stroke-width=\"1.5\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>,\r\n          ]}\r\n          {this.action === 'expand' && (\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`icon ${this.color}`}>\r\n              <path\r\n                d=\"M10.4166 15C10.4166 15 15.4166 11.3176 15.4166 9.99996C15.4166 8.68237 10.4166 5 10.4166 5M4.58329 15C4.58329 15 9.58324 11.3176 9.58325 9.99996C9.58326 8.68237 4.58325 5 4.58325 5\"\r\n                stroke=\"#4B5565\"\r\n                stroke-width=\"1.5\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>\r\n          )}\r\n        </div>\r\n        {this.isHovered && this.action === 'collapse' ? (\r\n          <gb-tooltip class=\"tooltip\" arrow=\"left\">\r\n            <p slot=\"label\" class=\"text-xs-semi-bold\">\r\n              Collapse\r\n            </p>\r\n          </gb-tooltip>\r\n        ) : this.isHovered && this.action === 'expand' ? (\r\n          <gb-tooltip class=\"tooltip\" arrow=\"left\">\r\n            <p slot=\"label\" class=\"text-xs-semi-bold\">\r\n              Expand\r\n            </p>\r\n          </gb-tooltip>\r\n        ) : null}\r\n      </div>,\r\n    ];\r\n  }\r\n}"]}

package/dist/collection/components/gb-dropdown-items-with-shortcut/gb-dropdown-items-with-shortcut.css

@@ -75,10 +75,19 @@
     --success-900: #074d31;
     --success-950: #053321;
 
-    /* opacity color palette  */
+    /* ------------------------------------------opacity color palette--------------------------------------  */
+    /* 20% opacity */
     --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);
     --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);
 
+    /* 30% opacity */
+    --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);
+    --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);
+
+    /* 40% opacity */
+    --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);
+    --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);
+
 
     /* ------------------------------------------Secondary Color------------------------------------------- */
     /* blueLight color palete */
@@ -250,6 +259,14 @@
         --color-text-warning-bold: var(--warning-100);
     }
 
+    [data-theme="light"] {
+        --color-text-warning-subtle: var(--warning-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-warning-subtle: var(--warning-400);
+    }
+
     [data-theme="light"] {
         --color-text-sucess: var(--success-600);
     }
@@ -282,6 +299,14 @@
         --color-text-discovery-bold: var(--blueLight-100);
     }
 
+    [data-theme="light"] {
+        --color-text-discovery-subtle: var(--blueLight-400);
+    }
+
+    [data-theme="dark"] {
+        --color-text-discovery-subtle: var(--blueLight-100);
+    }
+
     [data-theme="light"] {
         --color-text-information: var(--blue-600);
     }
@@ -298,6 +323,14 @@
         --color-text-information-bold: var(--blue-100);
     }
 
+    [data-theme="light"] {
+        --color-text-information-subtle: var(--blue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-information-subtle: var(--blue-400);
+    }
+
     [data-theme="light"] {
         --color-text-purple: var(--purple-600);
     }
@@ -314,6 +347,30 @@
         --color-text-purple-bold: var(--purple-100);
     }
 
+    [data-theme="light"] {
+        --color-text-purple-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-purple-subtle: var(--purple-400);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink: var(--purple-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink: var(--purple-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink-subtle: var(--purple-400);
+    }
+
 
     /* --------------Link color--------------- */
 
@@ -1244,6 +1301,22 @@
         --color-blanket: var(--darkBlue200-opacity20);
     }
 
+    [data-theme="light"] {
+        --color-blanket-subtle: var(--darkBlue500-opacity30);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtle: var(--darkBlue200-opacity30);
+    }
+
+    [data-theme="light"] {
+        --color-blanket-subtler: var(--darkBlue500-opacity40);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtler: var(--darkBlue200-opacity40);
+    }
+
 
 
     /* ----------------Skeleton Color --------------- */
@@ -2045,22 +2118,22 @@
     line-height: var(--text-xs-regular-line-height);
 }
 
-:host {
+.shortcut-container {
     display: flex;
     width: 240px;
+    padding: var(--spacing-half) var(--spacing-1);
     align-items: center;
-    gap: 0px;
+    gap: var(--spacing-none);
     border-radius: var(--rounded-none);   
 }
 
-.shortcut-container {
+.shortcut {
     display: flex;
-    width: 224px;
-    height: 40px;
-    min-height: 40px;
+    padding: var(--spacing-2);
+    justify-content: center;
     align-items: center;
-    gap: 6px; /* Keep a small gap between the icon and label */
-    flex-shrink: 0;
+    gap: var(--spacing-2);
+    flex: 1 0 0;
     border-radius: var(--rounded-xs);
 }
 
@@ -2094,37 +2167,36 @@
 }
 
 gb-checkbox {
-    padding-top: 5px;
+    padding-top: 4px;
     padding-left: 7px;
 }
 
-:host(:hover) {
+.shortcut:hover {
     background-color: #EEF2F6;
 }
-
-:host(:active) {
+.shortcut:active {
     background: #E3E8EF;
 }
 
-:host(.disabled) {
+.shortcut.disabled {
     background-color: #ffffff;
     color: #CDD5DF;
     pointer-events: none;
 }
 
-:host(.disabled) .label,
-:host(.disabled) .shortcut-icon,
-:host(.disabled) gb-checkbox {
+.shortcut.disabled .label,
+.shortcut.disabled .shortcut-icon,
+.shortcut.disabled gb-checkbox {
     color: #CDD5DF; /* Ensures all text/icons use the disabled color */
 }
 
-:host(.disabled) .icon img {
+.shortcut.disabled .icon img {
     opacity: 0.5;
     stroke: #CDD5DF; /* Reduce opacity for the icon in disabled state */
 }
 
 /* Optional: You can also change the checkbox appearance */
-:host(.disabled) gb-checkbox {
+.shortcut.disabled gb-checkbox {
     pointer-events: none;
     opacity: 0.5; /* Dim the checkbox when disabled */
 }