npm - @govtechsg/sgds-web-component - Versions diffs - 3.2.0 → 3.3.0 - Mend

@govtechsg/sgds-web-component 3.2.0 → 3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (514) hide show

package/react/components/Masthead/sgds-masthead.js CHANGED Viewed

@@ -29,7 +29,12 @@ class SgdsMasthead extends SgdsElement {
     }
     render() {
         return html `
-      <div id="sgds-masthead" class="sgds-masthead" aria-label="A Singapore Government Agency Website" role="banner">
+      <div
+        id="sgds-masthead"
+        class="sgds-masthead"
+        aria-label="A Singapore Government Agency Website. Beware of government impersonation scams."
+        role="banner"
+      >
         <div class="banner">
           <div class="container">
             <div class="masthead-layout">
@@ -67,7 +72,7 @@ class SgdsMasthead extends SgdsElement {
                 />
               </svg>
               <div class="masthead-text-layout">
-                <span>A Singapore Government Agency Website</span>
+                <span>A Singapore Government Agency Website. Beware of government impersonation scams.</span>
                 <div
                   class="sgds-masthead-button"
                   id="sgds-masthead-identify"
@@ -110,16 +115,16 @@ class SgdsMasthead extends SgdsElement {
                 <div class="icon">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    width="20"
-                    height="20"
-                    viewBox="0 0 20 20"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
                     fill="none"
                     class="banner-icon"
                   >
                     <path
                       fill-rule="evenodd"
                       clip-rule="evenodd"
-                      d="M2.5 7.31409C2.5 7.01647 2.65873 6.74143 2.91644 6.59254L9.5831 2.74069C9.84105 2.59165 10.1589 2.59165 10.4169 2.74069L17.0836 6.59254C17.3413 6.74143 17.5 7.01647 17.5 7.31409V8.33314C17.5 8.79338 17.1269 9.16648 16.6667 9.16648H15.8333V14.9998H16.6667C17.1269 14.9998 17.5 15.3729 17.5 15.8331V16.6665C17.5 17.1267 17.1269 17.4998 16.6667 17.4998H3.33333C2.8731 17.4998 2.5 17.1267 2.5 16.6665V15.8331C2.5 15.3729 2.8731 14.9998 3.33333 14.9998H4.16667V9.16648H3.33333C2.8731 9.16648 2.5 8.79338 2.5 8.33314V7.31409ZM6.66667 9.16648V14.9998H8.75V9.16648H6.66667ZM11.25 9.16648V14.9998H13.3333V9.16648H11.25ZM11.25 6.24981C11.25 6.94017 10.6904 7.49981 10 7.49981C9.30964 7.49981 8.75 6.94017 8.75 6.24981C8.75 5.55945 9.30964 4.99981 10 4.99981C10.6904 4.99981 11.25 5.55945 11.25 6.24981Z"
+                      d="M2 5.85166C2 5.61356 2.12699 5.39354 2.33315 5.27442L7.66648 2.19294C7.87284 2.07371 8.12716 2.07371 8.33352 2.19294L13.6669 5.27442C13.873 5.39354 14 5.61356 14 5.85166V6.66691C14 7.0351 13.7015 7.33357 13.3333 7.33357H12.6667V12.0002H13.3333C13.7015 12.0002 14 12.2987 14 12.6669V13.3336C14 13.7018 13.7015 14.0002 13.3333 14.0002H2.66667C2.29848 14.0002 2 13.7018 2 13.3336V12.6669C2 12.2987 2.29848 12.0002 2.66667 12.0002H3.33333V7.33357H2.66667C2.29848 7.33357 2 7.0351 2 6.66691V5.85166ZM5.33333 7.33357V12.0002H7V7.33357H5.33333ZM9 7.33357V12.0002H10.6667V7.33357H9ZM9 5.00024C9 5.55252 8.55229 6.00024 8 6.00024C7.44772 6.00024 7 5.55252 7 5.00024C7 4.44795 7.44772 4.00024 8 4.00024C8.55229 4.00024 9 4.44795 9 5.00024Z"
                       fill="currentColor"
                     />
                   </svg>
@@ -140,16 +145,16 @@ class SgdsMasthead extends SgdsElement {
                 <div class="icon">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    width="20"
-                    height="20"
-                    viewBox="0 0 20 20"
+                    width="17"
+                    height="16"
+                    viewBox="0 0 17 16"
                     fill="none"
                     class="banner-icon"
                   >
                     <path
                       fill-rule="evenodd"
                       clip-rule="evenodd"
-                      d="M5.83334 8.33317H5.41668C4.26608 8.33317 3.33334 9.26591 3.33334 10.4165V16.2498C3.33334 17.4004 4.26608 18.3332 5.41668 18.3332H14.5833C15.7339 18.3332 16.6667 17.4004 16.6667 16.2498V10.4165C16.6667 9.26591 15.7339 8.33317 14.5833 8.33317H14.1667V5.83317C14.1667 3.53198 12.3012 1.6665 10 1.6665C7.69882 1.6665 5.83334 3.53198 5.83334 5.83317V8.33317ZM7.50001 8.33317H12.5V5.83317C12.5 4.45246 11.3807 3.33317 10 3.33317C8.6193 3.33317 7.50001 4.45246 7.50001 5.83317V8.33317Z"
+                      d="M5.3335 6.66683H5.00016C4.07969 6.66683 3.3335 7.41302 3.3335 8.3335V13.0002C3.3335 13.9206 4.07969 14.6668 5.00016 14.6668H12.3335C13.254 14.6668 14.0002 13.9206 14.0002 13.0002V8.3335C14.0002 7.41302 13.254 6.66683 12.3335 6.66683H12.0002V4.66683C12.0002 2.82588 10.5078 1.3335 8.66683 1.3335C6.82588 1.3335 5.3335 2.82588 5.3335 4.66683V6.66683ZM6.66683 6.66683H10.6668V4.66683C10.6668 3.56226 9.7714 2.66683 8.66683 2.66683C7.56226 2.66683 6.66683 3.56226 6.66683 4.66683V6.66683Z"
                       fill="currentColor"
                     />
                   </svg>
@@ -159,16 +164,16 @@ class SgdsMasthead extends SgdsElement {
                   <article>
                     Look for a lock (<svg
                       xmlns="http://www.w3.org/2000/svg"
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
                       fill="none"
                       class="banner-icon-inline"
                     >
                       <path
                         fill-rule="evenodd"
                         clip-rule="evenodd"
-                        d="M5.83331 8.33317H5.41665C4.26605 8.33317 3.33331 9.26591 3.33331 10.4165V16.2498C3.33331 17.4004 4.26605 18.3332 5.41665 18.3332H14.5833C15.7339 18.3332 16.6666 17.4004 16.6666 16.2498V10.4165C16.6666 9.26591 15.7339 8.33317 14.5833 8.33317H14.1666V5.83317C14.1666 3.53198 12.3012 1.6665 9.99998 1.6665C7.69879 1.6665 5.83331 3.53198 5.83331 5.83317V8.33317ZM7.49998 8.33317H12.5V5.83317C12.5 4.45246 11.3807 3.33317 9.99998 3.33317C8.61927 3.33317 7.49998 4.45246 7.49998 5.83317V8.33317Z"
+                        d="M4.66699 6.66683H4.33366C3.41318 6.66683 2.66699 7.41302 2.66699 8.3335V13.0002C2.66699 13.9206 3.41318 14.6668 4.33366 14.6668H11.667C12.5875 14.6668 13.3337 13.9206 13.3337 13.0002V8.3335C13.3337 7.41302 12.5875 6.66683 11.667 6.66683H11.3337V4.66683C11.3337 2.82588 9.84127 1.3335 8.00033 1.3335C6.15938 1.3335 4.66699 2.82588 4.66699 4.66683V6.66683ZM6.00033 6.66683H10.0003V4.66683C10.0003 3.56226 9.10489 2.66683 8.00033 2.66683C6.89576 2.66683 6.00033 3.56226 6.00033 4.66683V6.66683Z"
                         fill="currentColor"
                       /></svg
                     >) or https:// as an added precaution. Share sensitive information only on official, secure
@@ -176,6 +181,32 @@ class SgdsMasthead extends SgdsElement {
                   </article>
                 </div>
               </div>
+              <div class="wrapper">
+                <div class="icon">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="17"
+                    height="16"
+                    viewBox="0 0 17 16"
+                    fill="none"
+                    class="banner-icon"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      clip-rule="evenodd"
+                      d="M8.33342 1.3335C12.0153 1.3335 15.0001 4.31826 15.0001 8.00016C15.0001 11.6821 12.0153 14.6668 8.33342 14.6668C4.65152 14.6668 1.66675 11.6821 1.66675 8.00016C1.66675 4.31826 4.65152 1.3335 8.33342 1.3335ZM8.33342 10.0002C7.96523 10.0002 7.66675 10.2986 7.66675 10.6668C7.66675 11.035 7.96523 11.3335 8.33342 11.3335C8.7016 11.3335 9.00008 11.035 9.00008 10.6668C9.00008 10.2986 8.7016 10.0002 8.33342 10.0002ZM8.33342 4.68311C8.01125 4.68311 7.75008 4.94492 7.75008 5.26709V8.66683C7.75026 8.98885 8.01136 9.25016 8.33342 9.25016C8.65547 9.25016 8.91657 8.98885 8.91675 8.66683V5.26709C8.91675 4.94492 8.65558 4.68311 8.33342 4.68311Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <div class="content">
+                  <div class="title">Scam alert</div>
+                  <article>
+                    Government officers will never ask you to send money or share your details over the phone. When
+                    unsure, hang up and call Scamshield at 1799.
+                  </article>
+                </div>
+              </div>
             </div>
           </div>
         </div>

package/react/components/Masthead/sgds-masthead.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-masthead.js","sources":["../../../../src/components/Masthead/sgds-masthead.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport mastheadStyle from \"./masthead.css\";\nimport svgStyles from \"../../styles/svg.css\";\nimport anchorStyles from \"../../styles/anchor.css\";\n\n/*\n @summary All .gov.sg digital services shall adopt The Official Government Banner for every page in the digital service and be placed at the top of the page.\n /\nexport class SgdsMasthead extends SgdsElement {\n static styles = [...SgdsElement.styles, svgStyles, anchorStyles, mastheadStyle];\n\n /* @internal /\n @state()\n toggleVisibility = false;\n\n /* @internal /\n private _handleKeydown(event: KeyboardEvent) {\n if (event.key === \"Enter\" \|\| event.key === \" \") {\n event.preventDefault();\n this._toggleVisibility();\n }\n }\n\n /* @internal */\n private _toggleVisibility() {\n this.toggleVisibility = !this.toggleVisibility;\n }\n\n render() {\n return html`\n <div id=\"sgds-masthead\" class=\"sgds-masthead\" aria-label=\"A Singapore Government Agency Website\" role=\"banner\">\n <div class=\"banner\">\n <div class=\"container\">\n <div class=\"masthead-layout\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n class=\"sg-crest\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n >\n <path\n d=\"M4.31179 7.0109C4.31179 7.0109 3.78527 7.78129 4.4749 8.77746C4.4749 8.77746 4.58365 8.27018 5.67275 8.27018H6.97989C8.21435 8.27018 9.13979 7.04881 8.55889 5.78895C8.55889 5.78895 9.42995 5.88317 9.72123 5.31901C10.0114 4.75544 9.70292 4.52966 9.26739 4.52966H7.07088C7.07088 4.9341 6.32687 4.9904 6.32687 4.52966H5.09241C5.09241 4.52966 4.16643 4.52966 4.14867 5.33797C4.14867 5.33797 4.35784 5.20641 4.56589 5.18803V5.40346C4.56589 5.40346 4.31179 5.45057 4.19361 5.51664C4.07599 5.58213 3.90344 5.7608 4.06711 6.22154C4.23023 6.68171 4.29403 6.84142 4.29403 6.84142C4.29403 6.84142 4.55757 6.60588 4.98422 6.60588H5.48356C6.37237 6.60588 6.20925 7.49864 5.31989 7.49864C4.43052 7.49864 4.3129 7.01032 4.3129 7.01032L4.31179 7.0109Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M8.94948 6.0808C8.94948 6.0808 9.24908 6.09976 9.46657 5.90271C9.46657 5.90271 11.4362 7.49118 8.51395 10.6859C5.59118 13.8813 7.85094 15.9494 7.85094 15.9494C7.85094 15.9494 7.32498 16.4751 7.62402 17.5C7.62402 17.5 6.40843 16.7894 5.47856 15.5823C4.13479 13.8382 3.31367 11.1697 7.00374 9.04116C7.00374 9.04116 9.43938 7.77268 8.94948 6.0808Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M5.93914 4.22922C5.93914 4.22922 6.33251 3.50249 7.24573 3.50249C7.96588 3.50249 8.13011 3.11988 8.13011 3.11988C8.13011 3.11988 8.44413 2.5 10.0298 2.5C11.4829 2.5 12.4621 3.00153 13.2544 3.67139C13.2544 3.67139 11.1183 2.2995 9.01282 4.22922H5.93914Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M14.8217 8.828C14.7612 6.5599 13.0668 4.12922 9.42448 4.2671C12.9825 1.14703 19.1543 8.11333 14.0711 11.7734C14.0711 11.7734 14.9216 10.517 14.8217 8.828Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M9.96927 4.51761C14.4106 4.37973 15.9962 9.89315 13.1278 12.3744L10.2478 13.8158C10.2478 13.8158 9.87273 12.5628 11.2648 11.0961C12.6568 9.6306 13.9994 6.88625 10.1518 5.08177C10.1518 5.08177 10.2245 4.70605 9.97038 4.51819L9.96927 4.51761Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M9.73904 5.75795C9.73904 5.75795 9.95708 5.54481 10.0298 5.36959C13.3331 6.79778 12.8133 9.21697 10.8403 11.2467C9.63029 12.537 10.0053 13.9284 10.0053 13.9284C10.0053 13.9284 8.52954 14.8803 8.02078 15.7076C8.02078 15.7076 5.88363 13.8233 8.84357 10.6957C11.748 7.62563 9.73904 5.75795 9.73904 5.75795Z\"\n fill=\"currentColor\"\n />\n </svg>\n <div class=\"masthead-text-layout\">\n <span>A Singapore Government Agency Website</span>\n <div\n class=\"sgds-masthead-button\"\n id=\"sgds-masthead-identify\"\n role=\"button\"\n tabindex=\"0\"\n aria-expanded=\"${this.toggleVisibility}\"\n aria-controls=\"sgds-masthead-content\"\n @keydown=${this._handleKeydown}\n @click=${this._toggleVisibility}\n >\n <span>How to identify</span>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n class=\"sgds-masthead-identify-icon ${!this.toggleVisibility ? null : \"show\"}\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M9.64645 7.14645C9.84171 6.95118 10.1583 6.95118 10.3536 7.14645L15.3536 12.1464C15.5488 12.3417 15.5488 12.6583 15.3536 12.8536C15.1583 13.0488 14.8417 13.0488 14.6464 12.8536L10 8.20711L5.35355 12.8536C5.15829 13.0488 4.84171 13.0488 4.64645 12.8536C4.45118 12.6583 4.45118 12.3417 4.64645 12.1464L9.64645 7.14645Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"panel\">\n <div\n id=\"sgds-masthead-content\"\n class=\"container sgds-masthead-content ${this.toggleVisibility ? \"show\" : null}\"\n >\n <div class=\"content-grid\">\n <div class=\"wrapper\">\n <div class=\"icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n class=\"banner-icon\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M2.5 7.31409C2.5 7.01647 2.65873 6.74143 2.91644 6.59254L9.5831 2.74069C9.84105 2.59165 10.1589 2.59165 10.4169 2.74069L17.0836 6.59254C17.3413 6.74143 17.5 7.01647 17.5 7.31409V8.33314C17.5 8.79338 17.1269 9.16648 16.6667 9.16648H15.8333V14.9998H16.6667C17.1269 14.9998 17.5 15.3729 17.5 15.8331V16.6665C17.5 17.1267 17.1269 17.4998 16.6667 17.4998H3.33333C2.8731 17.4998 2.5 17.1267 2.5 16.6665V15.8331C2.5 15.3729 2.8731 14.9998 3.33333 14.9998H4.16667V9.16648H3.33333C2.8731 9.16648 2.5 8.79338 2.5 8.33314V7.31409ZM6.66667 9.16648V14.9998H8.75V9.16648H6.66667ZM11.25 9.16648V14.9998H13.3333V9.16648H11.25ZM11.25 6.24981C11.25 6.94017 10.6904 7.49981 10 7.49981C9.30964 7.49981 8.75 6.94017 8.75 6.24981C8.75 5.55945 9.30964 4.99981 10 4.99981C10.6904 4.99981 11.25 5.55945 11.25 6.24981Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n <div class=\"content\">\n <div class=\"title\">Official website links end with .gov.sg</div>\n <article>Government agencies communicate via .gov.sg websites (e.g. go.gov.sg/open).</article>\n <a\n href=\"https://www.gov.sg/trusted-sites#govsites\"\n class=\"trusted-websites-link\"\n rel=\"noreferrer\"\n target=\"_blank\"\n >Trusted websites</a\n >\n </div>\n </div>\n <div class=\"wrapper\">\n <div class=\"icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n class=\"banner-icon\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5.83334 8.33317H5.41668C4.26608 8.33317 3.33334 9.26591 3.33334 10.4165V16.2498C3.33334 17.4004 4.26608 18.3332 5.41668 18.3332H14.5833C15.7339 18.3332 16.6667 17.4004 16.6667 16.2498V10.4165C16.6667 9.26591 15.7339 8.33317 14.5833 8.33317H14.1667V5.83317C14.1667 3.53198 12.3012 1.6665 10 1.6665C7.69882 1.6665 5.83334 3.53198 5.83334 5.83317V8.33317ZM7.50001 8.33317H12.5V5.83317C12.5 4.45246 11.3807 3.33317 10 3.33317C8.6193 3.33317 7.50001 4.45246 7.50001 5.83317V8.33317Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n <div class=\"content\">\n <div class=\"title\">Secure websites use HTTPS</div>\n <article>\n Look for a lock (<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n class=\"banner-icon-inline\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5.83331 8.33317H5.41665C4.26605 8.33317 3.33331 9.26591 3.33331 10.4165V16.2498C3.33331 17.4004 4.26605 18.3332 5.41665 18.3332H14.5833C15.7339 18.3332 16.6666 17.4004 16.6666 16.2498V10.4165C16.6666 9.26591 15.7339 8.33317 14.5833 8.33317H14.1666V5.83317C14.1666 3.53198 12.3012 1.6665 9.99998 1.6665C7.69879 1.6665 5.83331 3.53198 5.83331 5.83317V8.33317ZM7.49998 8.33317H12.5V5.83317C12.5 4.45246 11.3807 3.33317 9.99998 3.33317C8.61927 3.33317 7.49998 4.45246 7.49998 5.83317V8.33317Z\"\n fill=\"currentColor\"\n /></svg\n >) or https:// as an added precaution. Share sensitive information only on official, secure\n websites.\n </article>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n `;\n }\n}\n\nexport default SgdsMasthead;\n"],"names":["svgStyles","anchorStyles","mastheadStyle"],"mappings":";;;;;;;;;AAOA;;AAEG;AACG,MAAO,YAAa,SAAQ,WAAW,CAAA;AAA7C,IAAA,WAAA,GAAA;;;QAKE,IAAgB,CAAA,gBAAA,GAAG,KAAK,CAAC;KA0K1B;;AAvKS,IAAA,cAAc,CAAC,KAAoB,EAAA;AACzC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;KACF;;IAGO,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC;KAChD;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CoB,iCAAA,EAAA,IAAI,CAAC,gBAAgB,CAAA;;AAE3B,2BAAA,EAAA,IAAI,CAAC,cAAc,CAAA;AACrB,yBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;;;;;;;yDASQ,CAAC,IAAI,CAAC,gBAAgB,GAAG,IAAI,GAAG,MAAM,CAAA;;;;;;;;;;;;;;;;;;qDAkB1C,IAAI,CAAC,gBAAgB,GAAG,MAAM,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6ErF,CAAC;KACH;;AA7KM,YAAA,CAAA,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAS,EAAEC,UAAY,EAAEC,UAAa,CAAC,CAAC;AAIhF,UAAA,CAAA;AADC,IAAA,KAAK,EAAE;AACiB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"sgds-masthead.js","sources":["../../../../src/components/Masthead/sgds-masthead.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport mastheadStyle from \"./masthead.css\";\nimport svgStyles from \"../../styles/svg.css\";\nimport anchorStyles from \"../../styles/anchor.css\";\n\n/*\n @summary All .gov.sg digital services shall adopt The Official Government Banner for every page in the digital service and be placed at the top of the page.\n /\nexport class SgdsMasthead extends SgdsElement {\n static styles = [...SgdsElement.styles, svgStyles, anchorStyles, mastheadStyle];\n\n /* @internal /\n @state()\n toggleVisibility = false;\n\n /* @internal /\n private _handleKeydown(event: KeyboardEvent) {\n if (event.key === \"Enter\" \|\| event.key === \" \") {\n event.preventDefault();\n this._toggleVisibility();\n }\n }\n\n /* @internal */\n private _toggleVisibility() {\n this.toggleVisibility = !this.toggleVisibility;\n }\n\n render() {\n return html`\n <div\n id=\"sgds-masthead\"\n class=\"sgds-masthead\"\n aria-label=\"A Singapore Government Agency Website. Beware of government impersonation scams.\"\n role=\"banner\"\n >\n <div class=\"banner\">\n <div class=\"container\">\n <div class=\"masthead-layout\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n class=\"sg-crest\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n >\n <path\n d=\"M4.31179 7.0109C4.31179 7.0109 3.78527 7.78129 4.4749 8.77746C4.4749 8.77746 4.58365 8.27018 5.67275 8.27018H6.97989C8.21435 8.27018 9.13979 7.04881 8.55889 5.78895C8.55889 5.78895 9.42995 5.88317 9.72123 5.31901C10.0114 4.75544 9.70292 4.52966 9.26739 4.52966H7.07088C7.07088 4.9341 6.32687 4.9904 6.32687 4.52966H5.09241C5.09241 4.52966 4.16643 4.52966 4.14867 5.33797C4.14867 5.33797 4.35784 5.20641 4.56589 5.18803V5.40346C4.56589 5.40346 4.31179 5.45057 4.19361 5.51664C4.07599 5.58213 3.90344 5.7608 4.06711 6.22154C4.23023 6.68171 4.29403 6.84142 4.29403 6.84142C4.29403 6.84142 4.55757 6.60588 4.98422 6.60588H5.48356C6.37237 6.60588 6.20925 7.49864 5.31989 7.49864C4.43052 7.49864 4.3129 7.01032 4.3129 7.01032L4.31179 7.0109Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M8.94948 6.0808C8.94948 6.0808 9.24908 6.09976 9.46657 5.90271C9.46657 5.90271 11.4362 7.49118 8.51395 10.6859C5.59118 13.8813 7.85094 15.9494 7.85094 15.9494C7.85094 15.9494 7.32498 16.4751 7.62402 17.5C7.62402 17.5 6.40843 16.7894 5.47856 15.5823C4.13479 13.8382 3.31367 11.1697 7.00374 9.04116C7.00374 9.04116 9.43938 7.77268 8.94948 6.0808Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M5.93914 4.22922C5.93914 4.22922 6.33251 3.50249 7.24573 3.50249C7.96588 3.50249 8.13011 3.11988 8.13011 3.11988C8.13011 3.11988 8.44413 2.5 10.0298 2.5C11.4829 2.5 12.4621 3.00153 13.2544 3.67139C13.2544 3.67139 11.1183 2.2995 9.01282 4.22922H5.93914Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M14.8217 8.828C14.7612 6.5599 13.0668 4.12922 9.42448 4.2671C12.9825 1.14703 19.1543 8.11333 14.0711 11.7734C14.0711 11.7734 14.9216 10.517 14.8217 8.828Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M9.96927 4.51761C14.4106 4.37973 15.9962 9.89315 13.1278 12.3744L10.2478 13.8158C10.2478 13.8158 9.87273 12.5628 11.2648 11.0961C12.6568 9.6306 13.9994 6.88625 10.1518 5.08177C10.1518 5.08177 10.2245 4.70605 9.97038 4.51819L9.96927 4.51761Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M9.73904 5.75795C9.73904 5.75795 9.95708 5.54481 10.0298 5.36959C13.3331 6.79778 12.8133 9.21697 10.8403 11.2467C9.63029 12.537 10.0053 13.9284 10.0053 13.9284C10.0053 13.9284 8.52954 14.8803 8.02078 15.7076C8.02078 15.7076 5.88363 13.8233 8.84357 10.6957C11.748 7.62563 9.73904 5.75795 9.73904 5.75795Z\"\n fill=\"currentColor\"\n />\n </svg>\n <div class=\"masthead-text-layout\">\n <span>A Singapore Government Agency Website. Beware of government impersonation scams.</span>\n <div\n class=\"sgds-masthead-button\"\n id=\"sgds-masthead-identify\"\n role=\"button\"\n tabindex=\"0\"\n aria-expanded=\"${this.toggleVisibility}\"\n aria-controls=\"sgds-masthead-content\"\n @keydown=${this._handleKeydown}\n @click=${this._toggleVisibility}\n >\n <span>How to identify</span>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n class=\"sgds-masthead-identify-icon ${!this.toggleVisibility ? null : \"show\"}\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M9.64645 7.14645C9.84171 6.95118 10.1583 6.95118 10.3536 7.14645L15.3536 12.1464C15.5488 12.3417 15.5488 12.6583 15.3536 12.8536C15.1583 13.0488 14.8417 13.0488 14.6464 12.8536L10 8.20711L5.35355 12.8536C5.15829 13.0488 4.84171 13.0488 4.64645 12.8536C4.45118 12.6583 4.45118 12.3417 4.64645 12.1464L9.64645 7.14645Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"panel\">\n <div\n id=\"sgds-masthead-content\"\n class=\"container sgds-masthead-content ${this.toggleVisibility ? \"show\" : null}\"\n >\n <div class=\"content-grid\">\n <div class=\"wrapper\">\n <div class=\"icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n class=\"banner-icon\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M2 5.85166C2 5.61356 2.12699 5.39354 2.33315 5.27442L7.66648 2.19294C7.87284 2.07371 8.12716 2.07371 8.33352 2.19294L13.6669 5.27442C13.873 5.39354 14 5.61356 14 5.85166V6.66691C14 7.0351 13.7015 7.33357 13.3333 7.33357H12.6667V12.0002H13.3333C13.7015 12.0002 14 12.2987 14 12.6669V13.3336C14 13.7018 13.7015 14.0002 13.3333 14.0002H2.66667C2.29848 14.0002 2 13.7018 2 13.3336V12.6669C2 12.2987 2.29848 12.0002 2.66667 12.0002H3.33333V7.33357H2.66667C2.29848 7.33357 2 7.0351 2 6.66691V5.85166ZM5.33333 7.33357V12.0002H7V7.33357H5.33333ZM9 7.33357V12.0002H10.6667V7.33357H9ZM9 5.00024C9 5.55252 8.55229 6.00024 8 6.00024C7.44772 6.00024 7 5.55252 7 5.00024C7 4.44795 7.44772 4.00024 8 4.00024C8.55229 4.00024 9 4.44795 9 5.00024Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n <div class=\"content\">\n <div class=\"title\">Official website links end with .gov.sg</div>\n <article>Government agencies communicate via .gov.sg websites (e.g. go.gov.sg/open).</article>\n <a\n href=\"https://www.gov.sg/trusted-sites#govsites\"\n class=\"trusted-websites-link\"\n rel=\"noreferrer\"\n target=\"_blank\"\n >Trusted websites</a\n >\n </div>\n </div>\n <div class=\"wrapper\">\n <div class=\"icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"17\"\n height=\"16\"\n viewBox=\"0 0 17 16\"\n fill=\"none\"\n class=\"banner-icon\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5.3335 6.66683H5.00016C4.07969 6.66683 3.3335 7.41302 3.3335 8.3335V13.0002C3.3335 13.9206 4.07969 14.6668 5.00016 14.6668H12.3335C13.254 14.6668 14.0002 13.9206 14.0002 13.0002V8.3335C14.0002 7.41302 13.254 6.66683 12.3335 6.66683H12.0002V4.66683C12.0002 2.82588 10.5078 1.3335 8.66683 1.3335C6.82588 1.3335 5.3335 2.82588 5.3335 4.66683V6.66683ZM6.66683 6.66683H10.6668V4.66683C10.6668 3.56226 9.7714 2.66683 8.66683 2.66683C7.56226 2.66683 6.66683 3.56226 6.66683 4.66683V6.66683Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n <div class=\"content\">\n <div class=\"title\">Secure websites use HTTPS</div>\n <article>\n Look for a lock (<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n class=\"banner-icon-inline\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4.66699 6.66683H4.33366C3.41318 6.66683 2.66699 7.41302 2.66699 8.3335V13.0002C2.66699 13.9206 3.41318 14.6668 4.33366 14.6668H11.667C12.5875 14.6668 13.3337 13.9206 13.3337 13.0002V8.3335C13.3337 7.41302 12.5875 6.66683 11.667 6.66683H11.3337V4.66683C11.3337 2.82588 9.84127 1.3335 8.00033 1.3335C6.15938 1.3335 4.66699 2.82588 4.66699 4.66683V6.66683ZM6.00033 6.66683H10.0003V4.66683C10.0003 3.56226 9.10489 2.66683 8.00033 2.66683C6.89576 2.66683 6.00033 3.56226 6.00033 4.66683V6.66683Z\"\n fill=\"currentColor\"\n /></svg\n >) or https:// as an added precaution. Share sensitive information only on official, secure\n websites.\n </article>\n </div>\n </div>\n <div class=\"wrapper\">\n <div class=\"icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"17\"\n height=\"16\"\n viewBox=\"0 0 17 16\"\n fill=\"none\"\n class=\"banner-icon\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8.33342 1.3335C12.0153 1.3335 15.0001 4.31826 15.0001 8.00016C15.0001 11.6821 12.0153 14.6668 8.33342 14.6668C4.65152 14.6668 1.66675 11.6821 1.66675 8.00016C1.66675 4.31826 4.65152 1.3335 8.33342 1.3335ZM8.33342 10.0002C7.96523 10.0002 7.66675 10.2986 7.66675 10.6668C7.66675 11.035 7.96523 11.3335 8.33342 11.3335C8.7016 11.3335 9.00008 11.035 9.00008 10.6668C9.00008 10.2986 8.7016 10.0002 8.33342 10.0002ZM8.33342 4.68311C8.01125 4.68311 7.75008 4.94492 7.75008 5.26709V8.66683C7.75026 8.98885 8.01136 9.25016 8.33342 9.25016C8.65547 9.25016 8.91657 8.98885 8.91675 8.66683V5.26709C8.91675 4.94492 8.65558 4.68311 8.33342 4.68311Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n <div class=\"content\">\n <div class=\"title\">Scam alert</div>\n <article>\n Government officers will never ask you to send money or share your details over the phone. When\n unsure, hang up and call Scamshield at 1799.\n </article>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n `;\n }\n}\n\nexport default SgdsMasthead;\n"],"names":["svgStyles","anchorStyles","mastheadStyle"],"mappings":";;;;;;;;;AAOA;;AAEG;AACG,MAAO,YAAa,SAAQ,WAAW,CAAA;AAA7C,IAAA,WAAA,GAAA;;;QAKE,IAAgB,CAAA,gBAAA,GAAG,KAAK,CAAC;KAyM1B;;AAtMS,IAAA,cAAc,CAAC,KAAoB,EAAA;AACzC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;KACF;;IAGO,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC;KAChD;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDoB,iCAAA,EAAA,IAAI,CAAC,gBAAgB,CAAA;;AAE3B,2BAAA,EAAA,IAAI,CAAC,cAAc,CAAA;AACrB,yBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;;;;;;;yDASQ,CAAC,IAAI,CAAC,gBAAgB,GAAG,IAAI,GAAG,MAAM,CAAA;;;;;;;;;;;;;;;;;;qDAkB1C,IAAI,CAAC,gBAAgB,GAAG,MAAM,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuGrF,CAAC;KACH;;AA5MM,YAAA,CAAA,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAS,EAAEC,UAAY,EAAEC,UAAa,CAAC,CAAC;AAIhF,UAAA,CAAA;AADC,IAAA,KAAK,EAAE;AACiB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/react/components/Select/select-item.cjs2.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var lit = require('lit');
-var css_248z = lit.css`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit;white-space:nowrap}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}`;
+var css_248z = lit.css`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}`;
 exports["default"] = css_248z;
 //# sourceMappingURL=select-item.cjs2.js.map

package/react/components/Select/select-item2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
-var css_248z = css`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit;white-space:nowrap}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}`;
+var css_248z = css`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}`;
 export { css_248z as default };
 //# sourceMappingURL=select-item2.js.map

package/react/components/Subnav/subnav.cjs.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var lit = require('lit');
-var css_248z = lit.css`:host{display:block;position:sticky;top:0;z-index:1000}nav{background-color:var(--sgds-surface-default);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}slot[name=header]::slotted(*){--sgds-margin-3-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-3-xs,--sgds-margin-none);padding-top:var(--sgds-padding-none)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus,.subnav-toggler:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-default);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}slot[name=header]::slotted(*){padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`;
+var css_248z = lit.css`:host{display:block;position:sticky;top:0;z-index:1000}nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}slot[name=header]::slotted(*){--sgds-margin-3-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-3-xs,--sgds-margin-none);padding-top:var(--sgds-padding-none)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus,.subnav-toggler:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}slot[name=header]::slotted(*){padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`;
 exports["default"] = css_248z;
 //# sourceMappingURL=subnav.cjs.js.map

package/react/components/Subnav/subnav.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
-var css_248z = css`:host{display:block;position:sticky;top:0;z-index:1000}nav{background-color:var(--sgds-surface-default);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}slot[name=header]::slotted(*){--sgds-margin-3-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-3-xs,--sgds-margin-none);padding-top:var(--sgds-padding-none)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus,.subnav-toggler:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-default);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}slot[name=header]::slotted(*){padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`;
+var css_248z = css`:host{display:block;position:sticky;top:0;z-index:1000}nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}slot[name=header]::slotted(*){--sgds-margin-3-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-3-xs,--sgds-margin-none);padding-top:var(--sgds-padding-none)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus,.subnav-toggler:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}slot[name=header]::slotted(*){padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`;
 export { css_248z as default };
 //# sourceMappingURL=subnav.js.map

package/react/components/Tooltip/tooltip.cjs.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var lit = require('lit');
-var css_248z = lit.css`:host{display:contents}.tooltip-placeholder{display:inline-block}.tooltip{word-wrap:break-word;display:block;line-break:auto;opacity:0;text-align:left;text-decoration:none;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;z-index:1080}.tooltip.show{opacity:1}.tooltip-inner{background-color:var(--sgds-surface-fixed-dark);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);color:var(--sgds-color-fixed-light);font-size:var(--sgds-font-size-1);max-width:var(--sgds-dimension-320);padding:var(--sgds-padding-xs) var(--sgds-padding-sm)}div{max-width:fit-content}`;
+var css_248z = lit.css`:host{display:contents}.tooltip-placeholder{display:inline-block;max-width:100%}.tooltip{word-wrap:break-word;display:block;line-break:auto;opacity:0;text-align:left;text-decoration:none;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;z-index:1080}.tooltip.show{opacity:1}.tooltip-inner{background-color:var(--sgds-surface-fixed-dark);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);color:var(--sgds-color-fixed-light);font-size:var(--sgds-font-size-1);max-width:var(--sgds-dimension-320);padding:var(--sgds-padding-xs) var(--sgds-padding-sm)}div{max-width:fit-content}`;
 exports["default"] = css_248z;
 //# sourceMappingURL=tooltip.cjs.js.map

package/react/components/Tooltip/tooltip.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
-var css_248z = css`:host{display:contents}.tooltip-placeholder{display:inline-block}.tooltip{word-wrap:break-word;display:block;line-break:auto;opacity:0;text-align:left;text-decoration:none;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;z-index:1080}.tooltip.show{opacity:1}.tooltip-inner{background-color:var(--sgds-surface-fixed-dark);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);color:var(--sgds-color-fixed-light);font-size:var(--sgds-font-size-1);max-width:var(--sgds-dimension-320);padding:var(--sgds-padding-xs) var(--sgds-padding-sm)}div{max-width:fit-content}`;
+var css_248z = css`:host{display:contents}.tooltip-placeholder{display:inline-block;max-width:100%}.tooltip{word-wrap:break-word;display:block;line-break:auto;opacity:0;text-align:left;text-decoration:none;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;z-index:1080}.tooltip.show{opacity:1}.tooltip-inner{background-color:var(--sgds-surface-fixed-dark);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);color:var(--sgds-color-fixed-light);font-size:var(--sgds-font-size-1);max-width:var(--sgds-dimension-320);padding:var(--sgds-padding-xs) var(--sgds-padding-sm)}div{max-width:fit-content}`;
 export { css_248z as default };
 //# sourceMappingURL=tooltip.js.map

package/react/index.cjs.js CHANGED Viewed

@@ -40,10 +40,10 @@ var index$x = require('./progress-bar/index.cjs.js');
 var index$y = require('./quantity-toggle/index.cjs.js');
 var index$z = require('./radio-group/index.cjs.js');
 var index$A = require('./radio/index.cjs.js');
-var index$B = require('./sidenav-item/index.cjs.js');
-var index$C = require('./sidenav-link/index.cjs.js');
-var index$D = require('./sidenav/index.cjs.js');
-var index$E = require('./select/index.cjs.js');
+var index$B = require('./select/index.cjs.js');
+var index$C = require('./sidenav-item/index.cjs.js');
+var index$D = require('./sidenav-link/index.cjs.js');
+var index$E = require('./sidenav/index.cjs.js');
 var index$F = require('./skeleton/index.cjs.js');
 var index$G = require('./spinner/index.cjs.js');
 var index$H = require('./stepper/index.cjs.js');
@@ -102,10 +102,10 @@ exports.SgdsProgressBar = index$x["default"];
 exports.SgdsQuantityToggle = index$y["default"];
 exports.SgdsRadioGroup = index$z["default"];
 exports.SgdsRadio = index$A["default"];
-exports.SgdsSidenavItem = index$B["default"];
-exports.SgdsSidenavLink = index$C["default"];
-exports.SgdsSidenav = index$D["default"];
-exports.SgdsSelect = index$E["default"];
+exports.SgdsSelect = index$B["default"];
+exports.SgdsSidenavItem = index$C["default"];
+exports.SgdsSidenavLink = index$D["default"];
+exports.SgdsSidenav = index$E["default"];
 exports.SgdsSkeleton = index$F["default"];
 exports.SgdsSpinner = index$G["default"];
 exports.SgdsStepper = index$H["default"];

package/react/index.js CHANGED Viewed

@@ -36,10 +36,10 @@ export { default as SgdsProgressBar } from './progress-bar/index.js';
 export { default as SgdsQuantityToggle } from './quantity-toggle/index.js';
 export { default as SgdsRadioGroup } from './radio-group/index.js';
 export { default as SgdsRadio } from './radio/index.js';
+export { default as SgdsSelect } from './select/index.js';
 export { default as SgdsSidenavItem } from './sidenav-item/index.js';
 export { default as SgdsSidenavLink } from './sidenav-link/index.js';
 export { default as SgdsSidenav } from './sidenav/index.js';
-export { default as SgdsSelect } from './select/index.js';
 export { default as SgdsSkeleton } from './skeleton/index.js';
 export { default as SgdsSpinner } from './spinner/index.js';
 export { default as SgdsStepper } from './stepper/index.js';

package/react/utils/slot.cjs.js CHANGED Viewed

@@ -52,6 +52,24 @@ class HasSlotController {
         }
     }
 }
+/**
+ * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a
+ * string. This is useful because we can't use slot.textContent as an alternative.
+ */
+function getTextContent(slot) {
+    if (!slot) {
+        return "";
+    }
+    const nodes = slot.assignedNodes({ flatten: true });
+    let text = "";
+    [...nodes].forEach(node => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            text += node.textContent.trim();
+        }
+    });
+    return text;
+}
 exports.HasSlotController = HasSlotController;
+exports.getTextContent = getTextContent;
 //# sourceMappingURL=slot.cjs.js.map

package/react/utils/slot.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"slot.cjs.js","sources":["../../../src/utils/slot.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from \"lit\";\n\nexport class HasSlotController implements ReactiveController {\n host: ReactiveControllerHost & Element;\n slotNames: string[] = [];\n\n constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]) {\n (this.host = host).addController(this);\n this.slotNames = slotNames;\n this.handleSlotChange = this.handleSlotChange.bind(this);\n }\n\n private hasDefaultSlot() {\n return [...this.host.childNodes].some(node => {\n if (node.nodeType === node.TEXT_NODE && node.textContent?.trim() !== \"\") {\n return true;\n }\n\n if (node.nodeType === node.ELEMENT_NODE) {\n const el = node as HTMLElement;\n const tagName = el.tagName.toLowerCase();\n\n // Ignore visually hidden elements since they aren't rendered\n if (tagName === \"sl-visually-hidden\") {\n return false;\n }\n\n // If it doesn't have a slot attribute, it's part of the default slot\n if (!el.hasAttribute(\"slot\")) {\n return true;\n }\n }\n\n return false;\n });\n }\n\n private hasNamedSlot(name: string) {\n return this.host.querySelector(`:scope > [slot=\"${name}\"]`) !== null;\n }\n\n test(slotName: string) {\n return slotName === \"[default]\" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);\n }\n\n hostConnected() {\n this.host.shadowRoot?.addEventListener(\"slotchange\", this.handleSlotChange);\n }\n\n hostDisconnected() {\n this.host.shadowRoot?.removeEventListener(\"slotchange\", this.handleSlotChange);\n }\n\n handleSlotChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n\n if ((this.slotNames.includes(\"[default]\") && !slot.name) \|\| (slot.name && this.slotNames.includes(slot.name))) {\n this.host.requestUpdate();\n }\n }\n}\n\n/*\n Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated\n * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.\n /\nexport function getInnerHTML(slot: HTMLSlotElement): string {\n const nodes = slot.assignedNodes({ flatten: true });\n let html = \"\";\n\n [...nodes].forEach(node => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n html += (node as HTMLElement).outerHTML;\n }\n\n if (node.nodeType === Node.TEXT_NODE) {\n html += node.textContent;\n }\n });\n\n return html;\n}\n\n/\n Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n * string. This is useful because we can't use slot.textContent as an alternative.\n */\nexport function getTextContent(slot: HTMLSlotElement \| undefined \| null): string {\n if (!slot) {\n return \"\";\n }\n const nodes = slot.assignedNodes({ flatten: true });\n let text = \"\";\n\n [...nodes].forEach(node => {\n if (node.nodeType === Node.TEXT_NODE) {\n text += node.textContent;\n }\n });\n\n return text;\n}\n"],"names":[],"mappings":";;;;;MAEa,iBAAiB,CAAA;IAI5B,WAAY,CAAA,IAAsC,EAAE,GAAG,SAAmB,EAAA;QAF1E,IAAS,CAAA,SAAA,GAAa,EAAE,CAAC;QAGvB,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;AACvC,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1D;IAEO,cAAc,GAAA;AACpB,QAAA,OAAO,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,IAAG;;AAC3C,YAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,CAAA,MAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAI,EAAE,MAAK,EAAE,EAAE;AACvE,gBAAA,OAAO,IAAI,CAAC;aACb;YAED,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;gBACvC,MAAM,EAAE,GAAG,IAAmB,CAAC;gBAC/B,MAAM,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;;AAGzC,gBAAA,IAAI,OAAO,KAAK,oBAAoB,EAAE;AACpC,oBAAA,OAAO,KAAK,CAAC;iBACd;;gBAGD,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;AAC5B,oBAAA,OAAO,IAAI,CAAC;iBACb;aACF;AAED,YAAA,OAAO,KAAK,CAAC;AACf,SAAC,CAAC,CAAC;KACJ;AAEO,IAAA,YAAY,CAAC,IAAY,EAAA;AAC/B,QAAA,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAmB,gBAAA,EAAA,IAAI,CAAI,EAAA,CAAA,CAAC,KAAK,IAAI,CAAC;KACtE;AAED,IAAA,IAAI,CAAC,QAAgB,EAAA;AACnB,QAAA,OAAO,QAAQ,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;KACvF;IAED,aAAa,GAAA;;AACX,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAC7E;IAED,gBAAgB,GAAA;;AACd,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAChF;AAED,IAAA,gBAAgB,CAAC,KAAY,EAAA;AAC3B,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;AAE7C,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE;AAC7G,YAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;SAC3B;KACF;AACF~~;;;;~~"}
1	+ {"version":3,"file":"slot.cjs.js","sources":["../../../src/utils/slot.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from \"lit\";\n\nexport class HasSlotController implements ReactiveController {\n host: ReactiveControllerHost & Element;\n slotNames: string[] = [];\n\n constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]) {\n (this.host = host).addController(this);\n this.slotNames = slotNames;\n this.handleSlotChange = this.handleSlotChange.bind(this);\n }\n\n private hasDefaultSlot() {\n return [...this.host.childNodes].some(node => {\n if (node.nodeType === node.TEXT_NODE && node.textContent?.trim() !== \"\") {\n return true;\n }\n\n if (node.nodeType === node.ELEMENT_NODE) {\n const el = node as HTMLElement;\n const tagName = el.tagName.toLowerCase();\n\n // Ignore visually hidden elements since they aren't rendered\n if (tagName === \"sl-visually-hidden\") {\n return false;\n }\n\n // If it doesn't have a slot attribute, it's part of the default slot\n if (!el.hasAttribute(\"slot\")) {\n return true;\n }\n }\n\n return false;\n });\n }\n\n private hasNamedSlot(name: string) {\n return this.host.querySelector(`:scope > [slot=\"${name}\"]`) !== null;\n }\n\n test(slotName: string) {\n return slotName === \"[default]\" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);\n }\n\n hostConnected() {\n this.host.shadowRoot?.addEventListener(\"slotchange\", this.handleSlotChange);\n }\n\n hostDisconnected() {\n this.host.shadowRoot?.removeEventListener(\"slotchange\", this.handleSlotChange);\n }\n\n handleSlotChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n\n if ((this.slotNames.includes(\"[default]\") && !slot.name) \|\| (slot.name && this.slotNames.includes(slot.name))) {\n this.host.requestUpdate();\n }\n }\n}\n\n/*\n Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated\n * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.\n /\nexport function getInnerHTML(slot: HTMLSlotElement): string {\n const nodes = slot.assignedNodes({ flatten: true });\n let html = \"\";\n\n [...nodes].forEach(node => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n html += (node as HTMLElement).outerHTML;\n }\n\n if (node.nodeType === Node.TEXT_NODE) {\n html += node.textContent;\n }\n });\n\n return html;\n}\n\n/\n Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n * string. This is useful because we can't use slot.textContent as an alternative.\n */\nexport function getTextContent(slot: HTMLSlotElement \| undefined \| null): string {\n if (!slot) {\n return \"\";\n }\n const nodes = slot.assignedNodes({ flatten: true });\n let text = \"\";\n\n [...nodes].forEach(node => {\n if (node.nodeType === Node.TEXT_NODE) {\n text += node.textContent.trim();\n }\n });\n\n return text;\n}\n"],"names":[],"mappings":";;;;;MAEa,iBAAiB,CAAA;IAI5B,WAAY,CAAA,IAAsC,EAAE,GAAG,SAAmB,EAAA;QAF1E,IAAS,CAAA,SAAA,GAAa,EAAE,CAAC;QAGvB,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;AACvC,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1D;IAEO,cAAc,GAAA;AACpB,QAAA,OAAO,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,IAAG;;AAC3C,YAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,CAAA,MAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAI,EAAE,MAAK,EAAE,EAAE;AACvE,gBAAA,OAAO,IAAI,CAAC;aACb;YAED,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;gBACvC,MAAM,EAAE,GAAG,IAAmB,CAAC;gBAC/B,MAAM,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;;AAGzC,gBAAA,IAAI,OAAO,KAAK,oBAAoB,EAAE;AACpC,oBAAA,OAAO,KAAK,CAAC;iBACd;;gBAGD,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;AAC5B,oBAAA,OAAO,IAAI,CAAC;iBACb;aACF;AAED,YAAA,OAAO,KAAK,CAAC;AACf,SAAC,CAAC,CAAC;KACJ;AAEO,IAAA,YAAY,CAAC,IAAY,EAAA;AAC/B,QAAA,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAmB,gBAAA,EAAA,IAAI,CAAI,EAAA,CAAA,CAAC,KAAK,IAAI,CAAC;KACtE;AAED,IAAA,IAAI,CAAC,QAAgB,EAAA;AACnB,QAAA,OAAO,QAAQ,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;KACvF;IAED,aAAa,GAAA;;AACX,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAC7E;IAED,gBAAgB,GAAA;;AACd,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAChF;AAED,IAAA,gBAAgB,CAAC,KAAY,EAAA;AAC3B,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;AAE7C,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE;AAC7G,YAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;SAC3B;KACF;AACF,CAAA;AAuBD;;;AAGG;AACG,SAAU,cAAc,CAAC,IAAwC,EAAA;IACrE,IAAI,CAAC,IAAI,EAAE;AACT,QAAA,OAAO,EAAE,CAAC;KACX;AACD,IAAA,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IACpD,IAAI,IAAI,GAAG,EAAE,CAAC;IAEd,CAAC,GAAG,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,IAAG;QACxB,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,EAAE;AACpC,YAAA,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;SACjC;AACH,KAAC,CAAC,CAAC;AAEH,IAAA,OAAO,IAAI,CAAC;AACd;;;;;"}

package/react/utils/slot.js CHANGED Viewed

@@ -48,6 +48,23 @@ class HasSlotController {
         }
     }
 }
+/**
+ * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a
+ * string. This is useful because we can't use slot.textContent as an alternative.
+ */
+function getTextContent(slot) {
+    if (!slot) {
+        return "";
+    }
+    const nodes = slot.assignedNodes({ flatten: true });
+    let text = "";
+    [...nodes].forEach(node => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            text += node.textContent.trim();
+        }
+    });
+    return text;
+}
-export { HasSlotController };
+export { HasSlotController, getTextContent };
 //# sourceMappingURL=slot.js.map

package/react/utils/slot.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"slot.js","sources":["../../../src/utils/slot.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from \"lit\";\n\nexport class HasSlotController implements ReactiveController {\n host: ReactiveControllerHost & Element;\n slotNames: string[] = [];\n\n constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]) {\n (this.host = host).addController(this);\n this.slotNames = slotNames;\n this.handleSlotChange = this.handleSlotChange.bind(this);\n }\n\n private hasDefaultSlot() {\n return [...this.host.childNodes].some(node => {\n if (node.nodeType === node.TEXT_NODE && node.textContent?.trim() !== \"\") {\n return true;\n }\n\n if (node.nodeType === node.ELEMENT_NODE) {\n const el = node as HTMLElement;\n const tagName = el.tagName.toLowerCase();\n\n // Ignore visually hidden elements since they aren't rendered\n if (tagName === \"sl-visually-hidden\") {\n return false;\n }\n\n // If it doesn't have a slot attribute, it's part of the default slot\n if (!el.hasAttribute(\"slot\")) {\n return true;\n }\n }\n\n return false;\n });\n }\n\n private hasNamedSlot(name: string) {\n return this.host.querySelector(`:scope > [slot=\"${name}\"]`) !== null;\n }\n\n test(slotName: string) {\n return slotName === \"[default]\" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);\n }\n\n hostConnected() {\n this.host.shadowRoot?.addEventListener(\"slotchange\", this.handleSlotChange);\n }\n\n hostDisconnected() {\n this.host.shadowRoot?.removeEventListener(\"slotchange\", this.handleSlotChange);\n }\n\n handleSlotChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n\n if ((this.slotNames.includes(\"[default]\") && !slot.name) \|\| (slot.name && this.slotNames.includes(slot.name))) {\n this.host.requestUpdate();\n }\n }\n}\n\n/*\n Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated\n * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.\n /\nexport function getInnerHTML(slot: HTMLSlotElement): string {\n const nodes = slot.assignedNodes({ flatten: true });\n let html = \"\";\n\n [...nodes].forEach(node => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n html += (node as HTMLElement).outerHTML;\n }\n\n if (node.nodeType === Node.TEXT_NODE) {\n html += node.textContent;\n }\n });\n\n return html;\n}\n\n/\n Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n * string. This is useful because we can't use slot.textContent as an alternative.\n */\nexport function getTextContent(slot: HTMLSlotElement \| undefined \| null): string {\n if (!slot) {\n return \"\";\n }\n const nodes = slot.assignedNodes({ flatten: true });\n let text = \"\";\n\n [...nodes].forEach(node => {\n if (node.nodeType === Node.TEXT_NODE) {\n text += node.textContent;\n }\n });\n\n return text;\n}\n"],"names":[],"mappings":";MAEa,iBAAiB,CAAA;IAI5B,WAAY,CAAA,IAAsC,EAAE,GAAG,SAAmB,EAAA;QAF1E,IAAS,CAAA,SAAA,GAAa,EAAE,CAAC;QAGvB,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;AACvC,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1D;IAEO,cAAc,GAAA;AACpB,QAAA,OAAO,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,IAAG;;AAC3C,YAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,CAAA,MAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAI,EAAE,MAAK,EAAE,EAAE;AACvE,gBAAA,OAAO,IAAI,CAAC;aACb;YAED,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;gBACvC,MAAM,EAAE,GAAG,IAAmB,CAAC;gBAC/B,MAAM,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;;AAGzC,gBAAA,IAAI,OAAO,KAAK,oBAAoB,EAAE;AACpC,oBAAA,OAAO,KAAK,CAAC;iBACd;;gBAGD,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;AAC5B,oBAAA,OAAO,IAAI,CAAC;iBACb;aACF;AAED,YAAA,OAAO,KAAK,CAAC;AACf,SAAC,CAAC,CAAC;KACJ;AAEO,IAAA,YAAY,CAAC,IAAY,EAAA;AAC/B,QAAA,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAmB,gBAAA,EAAA,IAAI,CAAI,EAAA,CAAA,CAAC,KAAK,IAAI,CAAC;KACtE;AAED,IAAA,IAAI,CAAC,QAAgB,EAAA;AACnB,QAAA,OAAO,QAAQ,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;KACvF;IAED,aAAa,GAAA;;AACX,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAC7E;IAED,gBAAgB,GAAA;;AACd,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAChF;AAED,IAAA,gBAAgB,CAAC,KAAY,EAAA;AAC3B,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;AAE7C,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE;AAC7G,YAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;SAC3B;KACF;AACF;;;;"}
1	+ {"version":3,"file":"slot.js","sources":["../../../src/utils/slot.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from \"lit\";\n\nexport class HasSlotController implements ReactiveController {\n host: ReactiveControllerHost & Element;\n slotNames: string[] = [];\n\n constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]) {\n (this.host = host).addController(this);\n this.slotNames = slotNames;\n this.handleSlotChange = this.handleSlotChange.bind(this);\n }\n\n private hasDefaultSlot() {\n return [...this.host.childNodes].some(node => {\n if (node.nodeType === node.TEXT_NODE && node.textContent?.trim() !== \"\") {\n return true;\n }\n\n if (node.nodeType === node.ELEMENT_NODE) {\n const el = node as HTMLElement;\n const tagName = el.tagName.toLowerCase();\n\n // Ignore visually hidden elements since they aren't rendered\n if (tagName === \"sl-visually-hidden\") {\n return false;\n }\n\n // If it doesn't have a slot attribute, it's part of the default slot\n if (!el.hasAttribute(\"slot\")) {\n return true;\n }\n }\n\n return false;\n });\n }\n\n private hasNamedSlot(name: string) {\n return this.host.querySelector(`:scope > [slot=\"${name}\"]`) !== null;\n }\n\n test(slotName: string) {\n return slotName === \"[default]\" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);\n }\n\n hostConnected() {\n this.host.shadowRoot?.addEventListener(\"slotchange\", this.handleSlotChange);\n }\n\n hostDisconnected() {\n this.host.shadowRoot?.removeEventListener(\"slotchange\", this.handleSlotChange);\n }\n\n handleSlotChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n\n if ((this.slotNames.includes(\"[default]\") && !slot.name) \|\| (slot.name && this.slotNames.includes(slot.name))) {\n this.host.requestUpdate();\n }\n }\n}\n\n/*\n Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated\n * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.\n /\nexport function getInnerHTML(slot: HTMLSlotElement): string {\n const nodes = slot.assignedNodes({ flatten: true });\n let html = \"\";\n\n [...nodes].forEach(node => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n html += (node as HTMLElement).outerHTML;\n }\n\n if (node.nodeType === Node.TEXT_NODE) {\n html += node.textContent;\n }\n });\n\n return html;\n}\n\n/\n Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n * string. This is useful because we can't use slot.textContent as an alternative.\n */\nexport function getTextContent(slot: HTMLSlotElement \| undefined \| null): string {\n if (!slot) {\n return \"\";\n }\n const nodes = slot.assignedNodes({ flatten: true });\n let text = \"\";\n\n [...nodes].forEach(node => {\n if (node.nodeType === Node.TEXT_NODE) {\n text += node.textContent.trim();\n }\n });\n\n return text;\n}\n"],"names":[],"mappings":";MAEa,iBAAiB,CAAA;IAI5B,WAAY,CAAA,IAAsC,EAAE,GAAG,SAAmB,EAAA;QAF1E,IAAS,CAAA,SAAA,GAAa,EAAE,CAAC;QAGvB,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;AACvC,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1D;IAEO,cAAc,GAAA;AACpB,QAAA,OAAO,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,IAAG;;AAC3C,YAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,CAAA,MAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAI,EAAE,MAAK,EAAE,EAAE;AACvE,gBAAA,OAAO,IAAI,CAAC;aACb;YAED,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;gBACvC,MAAM,EAAE,GAAG,IAAmB,CAAC;gBAC/B,MAAM,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;;AAGzC,gBAAA,IAAI,OAAO,KAAK,oBAAoB,EAAE;AACpC,oBAAA,OAAO,KAAK,CAAC;iBACd;;gBAGD,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;AAC5B,oBAAA,OAAO,IAAI,CAAC;iBACb;aACF;AAED,YAAA,OAAO,KAAK,CAAC;AACf,SAAC,CAAC,CAAC;KACJ;AAEO,IAAA,YAAY,CAAC,IAAY,EAAA;AAC/B,QAAA,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAmB,gBAAA,EAAA,IAAI,CAAI,EAAA,CAAA,CAAC,KAAK,IAAI,CAAC;KACtE;AAED,IAAA,IAAI,CAAC,QAAgB,EAAA;AACnB,QAAA,OAAO,QAAQ,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;KACvF;IAED,aAAa,GAAA;;AACX,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAC7E;IAED,gBAAgB,GAAA;;AACd,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAChF;AAED,IAAA,gBAAgB,CAAC,KAAY,EAAA;AAC3B,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;AAE7C,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE;AAC7G,YAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;SAC3B;KACF;AACF,CAAA;AAuBD;;;AAGG;AACG,SAAU,cAAc,CAAC,IAAwC,EAAA;IACrE,IAAI,CAAC,IAAI,EAAE;AACT,QAAA,OAAO,EAAE,CAAC;KACX;AACD,IAAA,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IACpD,IAAI,IAAI,GAAG,EAAE,CAAC;IAEd,CAAC,GAAG,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,IAAG;QACxB,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,EAAE;AACpC,YAAA,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;SACjC;AACH,KAAC,CAAC,CAAC;AAEH,IAAA,OAAO,IAAI,CAAC;AACd;;;;"}

package/scripts/figma/sync-figma-to-tokens/__tests__/write-tokens-to-css-var.test.d.ts ADDED Viewed

File without changes

package/scripts/figma/sync-figma-to-tokens/color.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { RGB, RGBA } from "@figma/rest-api-spec";
+/**
+ * Compares two colors for approximate equality since converting between Figma RGBA objects (from 0 -> 1) and
+ * hex colors can result in slight differences.
+ */
+export declare function colorApproximatelyEqual(colorA: RGB | RGBA, colorB: RGB | RGBA): boolean;
+export declare function parseColor(color: string): RGB | RGBA;
+export declare function rgbToHex({ r, g, b, ...rest }: RGB | RGBA): string;

package/scripts/figma/sync-figma-to-tokens/figma_api.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { GetLocalVariablesResponse, PostVariablesRequestBody, PostVariablesResponse } from "@figma/rest-api-spec";
+export default class FigmaApi {
+    private baseUrl;
+    private token;
+    constructor(token: string);
+    getLocalVariables(fileKey: string): Promise<GetLocalVariablesResponse>;
+    postVariables(fileKey: string, payload: PostVariablesRequestBody): Promise<PostVariablesResponse>;
+}

package/scripts/figma/sync-figma-to-tokens/sync-figma-to-tokens.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "dotenv/config";

package/scripts/figma/sync-figma-to-tokens/token_export.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { GetLocalVariablesResponse } from "@figma/rest-api-spec";
+import { TokensFile } from "./token_types";
+export declare function tokenFilesFromLocalVariables(localVariablesResponse: GetLocalVariablesResponse): {
+    [fileName: string]: TokensFile;
+};

package/scripts/figma/sync-figma-to-tokens/token_types.d.ts ADDED Viewed

@@ -0,0 +1,52 @@
+/**
+ * This file defines what design tokens and design token files look like in the codebase.
+ *
+ * Tokens are distinct from variables, in that a [token](https://tr.designtokens.org/format/#design-token)
+ * is a name/value pair (with other properties), while a variable in Figma stores multiple values,
+ * one for each mode.
+ */
+import { VariableCodeSyntax, VariableScope } from "@figma/rest-api-spec";
+export interface Token {
+    /**
+     * The [type](https://tr.designtokens.org/format/#type-0) of the token.
+     *
+     * We allow `string` and `boolean` types in addition to the draft W3C spec's `color` and `number` types
+     * to align with the resolved types for Figma variables.
+     */
+    $type: "color" | "number" | "string" | "boolean";
+    $value: string | number | boolean;
+    $description?: string;
+    $extensions?: {
+        /**
+         * The `com.figma` namespace stores Figma-specific variable properties
+         */
+        "com.figma"?: {
+            hiddenFromPublishing?: boolean;
+            scopes?: VariableScope[];
+            codeSyntax?: VariableCodeSyntax;
+        };
+    };
+}
+export type TokenOrTokenGroup = Token | ({
+    [tokenName: string]: Token;
+} & {
+    $type?: never;
+    $value?: never;
+});
+/**
+ * Defines what we expect a Design Tokens file to look like in the codebase.
+ *
+ * This format mostly adheres to the [draft W3C spec for Design Tokens](https://tr.designtokens.org/format/)
+ * as of its most recent 24 July 2023 revision except for the $type property, for which
+ * we allow `string` and `boolean` values in addition to the spec's `color` and `number` values.
+ * We need to support `string` and `boolean` types to align with the resolved types for Figma variables.
+ *
+ * Additionally, we expect each tokens file to define tokens for a single variable collection and mode.
+ * There currently isn't a way to represent modes or themes in the W3C community group design token specification.
+ * Once the spec resolves how it wants to treat/handle modes, this code will be updated to reflect the new standard.
+ *
+ * Follow this discussion for updates: https://github.com/design-tokens/community-group/issues/210
+ */
+export type TokensFile = {
+    [key: string]: TokenOrTokenGroup;
+};

package/scripts/figma/sync-figma-to-tokens/utils.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export declare function areSetsEqual<T>(a: Set<T>, b: Set<T>): boolean;
+export declare function brightRed(msg: string): string;
+export declare function green(msg: string): string;

package/scripts/figma/sync-figma-to-tokens/write-tokens-to-css-var.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+export declare function arrangeSgdsFiles(fileName: string): string;
+export declare function saveToMap(filePath: string, map: Map<string, object>, mapKey: string): Promise<void>;
+/**
+ * Converts a token name like '{sgds-dimension-320}' to a CSS var() reference.
+ * Example: '{sgds-dimension-320}' => 'var(--sgds-dimension-320)'
+ */
+export declare function tokenNameToCssVar(tokenName: string): string | undefined;
+export declare function tokenToCssVars(): Promise<void>;

package/{components → src/components}/Badge/sgds-badge.d.ts RENAMED Viewed

@@ -1,9 +1,11 @@
 import { nothing } from "lit";
 import SgdsElement from "../../base/sgds-element";
+import SgdsTooltip from "../Tooltip/sgds-tooltip";
 import SgdsCloseButton from "../../internals/CloseButton/sgds-close-button";
 export type BadgeVariant = "info" | "success" | "danger" | "warning" | "neutral";
 /**
  * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.
+ * When the text exceeds the width, it will be truncated with a tooltip that will be displayed on hover.
  *
  * @slot default - slot for badge
  * @slot icon - The slot for icon to the left of the badge text
@@ -18,6 +20,7 @@ export declare class SgdsBadge extends SgdsElement {
     /**@internal */
     static dependencies: {
         "sgds-close-button": typeof SgdsCloseButton;
+        "sgds-tooltip": typeof SgdsTooltip;
     };
     /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */
     show: boolean;
@@ -27,10 +30,18 @@ export declare class SgdsBadge extends SgdsElement {
     outlined: boolean;
     /** Manually set the dismissible state of the button to `false` */
     dismissible: boolean;
+    /** Manually enable full width */
+    fullWidth: boolean;
+    private truncated;
+    private text;
     /** Closes the badge  */
     close(): void;
     /**@internal */
     _handleShowChange(): void;
+    /**@internal */
+    _handleTruncation(): void;
+    private _handleLabelSlotChange;
+    private _renderBadge;
     render(): import("lit-html").TemplateResult<1> | typeof nothing;
 }
 export default SgdsBadge;