@govtechsg/sgds-web-component 3.0.3 → 3.0.5

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 (39) hide show
  1. package/Masthead/index.js +11 -2
  2. package/components/Card/index.umd.js +3 -2
  3. package/components/Card/index.umd.js.map +1 -1
  4. package/components/Card/sgds-card.d.ts +2 -1
  5. package/components/Card/sgds-card.js +3 -2
  6. package/components/Card/sgds-card.js.map +1 -1
  7. package/components/DescriptionList/description-list.js +1 -1
  8. package/components/DescriptionList/index.umd.js +5 -2
  9. package/components/DescriptionList/index.umd.js.map +1 -1
  10. package/components/DescriptionList/sgds-description-list-group.js +4 -1
  11. package/components/DescriptionList/sgds-description-list-group.js.map +1 -1
  12. package/components/Masthead/index.umd.js +11 -2
  13. package/components/Masthead/index.umd.js.map +1 -1
  14. package/components/Masthead/masthead.js +1 -1
  15. package/components/Masthead/sgds-masthead.d.ts +2 -0
  16. package/components/Masthead/sgds-masthead.js +10 -1
  17. package/components/Masthead/sgds-masthead.js.map +1 -1
  18. package/components/index.umd.js +19 -6
  19. package/components/index.umd.js.map +1 -1
  20. package/css/grid.css +4 -4
  21. package/index.umd.js +19 -6
  22. package/index.umd.js.map +1 -1
  23. package/package.json +1 -1
  24. package/react/components/Card/sgds-card.cjs.js +3 -2
  25. package/react/components/Card/sgds-card.cjs.js.map +1 -1
  26. package/react/components/Card/sgds-card.js +3 -2
  27. package/react/components/Card/sgds-card.js.map +1 -1
  28. package/react/components/DescriptionList/description-list.cjs.js +1 -1
  29. package/react/components/DescriptionList/description-list.js +1 -1
  30. package/react/components/DescriptionList/sgds-description-list-group.cjs.js +4 -1
  31. package/react/components/DescriptionList/sgds-description-list-group.cjs.js.map +1 -1
  32. package/react/components/DescriptionList/sgds-description-list-group.js +4 -1
  33. package/react/components/DescriptionList/sgds-description-list-group.js.map +1 -1
  34. package/react/components/Masthead/masthead.cjs.js +1 -1
  35. package/react/components/Masthead/masthead.js +1 -1
  36. package/react/components/Masthead/sgds-masthead.cjs.js +10 -1
  37. package/react/components/Masthead/sgds-masthead.cjs.js.map +1 -1
  38. package/react/components/Masthead/sgds-masthead.js +10 -1
  39. package/react/components/Masthead/sgds-masthead.js.map +1 -1
package/components/DescriptionList/sgds-description-list-group.js CHANGED
@@ -33,7 +33,7 @@ class SgdsDescriptionListGroup extends SgdsElement {
33
33
  _updateDescriptionLists() {
34
34
  if (!this._descriptionLists)
35
35
  return;
36
- this._descriptionLists.forEach(descriptionList => {
36
+ this._descriptionLists.forEach((descriptionList, index) => {
37
37
  if (this.stacked) {
38
38
  descriptionList.setAttribute("stacked", "");
39
39
  }
@@ -46,6 +46,9 @@ class SgdsDescriptionListGroup extends SgdsElement {
46
46
  else {
47
47
  descriptionList.removeAttribute("bordered");
48
48
  }
49
+ if (index === this._descriptionLists.length - 1) {
50
+ descriptionList.setAttribute("isLastChild", "");
51
+ }
49
52
  });
50
53
  }
51
54
  updated(_changedProperties) {
package/components/DescriptionList/sgds-description-list-group.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sgds-description-list-group.js","sources":["../../../src/components/DescriptionList/sgds-description-list-group.ts"],"sourcesContent":["import { html, nothing, PropertyValues } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport descriptionListGroupStyle from \"./description-list-group.css\";\nimport { HasSlotController } from \"../../utils/slot\";\n\n/**\n * @summary Description List Group organizes multiple description lists.\n *\n * @slot default - The slot for `description-list` components\n * @slot title - Slot for the title content\n * @slot description - Slot for the description content\n *\n */\nexport class SgdsDescriptionListGroup extends SgdsElement {\n static styles = [...SgdsElement.styles, descriptionListGroupStyle];\n\n /** When true, adds a border around the entire group. */\n @property({ type: Boolean, reflect: true }) bordered = false;\n\n /** When true, the description lists are displayed in a stacked layout. */\n @property({ type: Boolean, reflect: true }) stacked = false;\n\n @queryAssignedElements({ flatten: true })\n private _descriptionLists!: HTMLElement[];\n\n /** @internal */\n private readonly hasSlotController = new HasSlotController(this, \"title\", \"description\");\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute(\"role\", \"list\");\n this.updateComplete.then(() => {\n this._updateDescriptionLists();\n });\n }\n\n private _updateDescriptionLists() {\n if (!this._descriptionLists) return;\n this._descriptionLists.forEach(descriptionList => {\n if (this.stacked) {\n descriptionList.setAttribute(\"stacked\", \"\");\n } else {\n descriptionList.removeAttribute(\"stacked\");\n }\n if (this.bordered) {\n descriptionList.setAttribute(\"bordered\", \"\");\n } else {\n descriptionList.removeAttribute(\"bordered\");\n }\n });\n }\n\n protected updated(_changedProperties: PropertyValues) {\n if (_changedProperties.has(\"stacked\")) {\n this._updateDescriptionLists();\n }\n if (_changedProperties.has(\"bordered\")) {\n this._updateDescriptionLists();\n }\n }\n\n render() {\n const hasTitleSlot = this.hasSlotController.test(\"title\");\n const hasDescriptionSlot = this.hasSlotController.test(\"description\");\n return html`\n <div class=\"container\" part=\"base\">\n ${hasTitleSlot || hasDescriptionSlot\n ? html`\n <div class=\"header\">\n ${hasTitleSlot\n ? html` <div class=\"title\">\n <slot name=\"title\"></slot>\n </div>`\n : nothing}\n ${hasDescriptionSlot\n ? html`\n <div class=\"description\">\n <slot name=\"description\"></slot>\n </div>\n `\n : nothing}\n </div>\n `\n : nothing}\n <div>\n <slot></slot>\n </div>\n </div>\n `;\n }\n}\n\nexport default SgdsDescriptionListGroup;\n"],"names":["descriptionListGroupStyle"],"mappings":"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"}
1
+ {"version":3,"file":"sgds-description-list-group.js","sources":["../../../src/components/DescriptionList/sgds-description-list-group.ts"],"sourcesContent":["import { html, nothing, PropertyValues } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport descriptionListGroupStyle from \"./description-list-group.css\";\nimport { HasSlotController } from \"../../utils/slot\";\n\n/**\n * @summary Description List Group organizes multiple description lists.\n *\n * @slot default - The slot for `description-list` components\n * @slot title - Slot for the title content\n * @slot description - Slot for the description content\n *\n */\nexport class SgdsDescriptionListGroup extends SgdsElement {\n static styles = [...SgdsElement.styles, descriptionListGroupStyle];\n\n /** When true, adds a border around the entire group. */\n @property({ type: Boolean, reflect: true }) bordered = false;\n\n /** When true, the description lists are displayed in a stacked layout. */\n @property({ type: Boolean, reflect: true }) stacked = false;\n\n @queryAssignedElements({ flatten: true })\n private _descriptionLists!: HTMLElement[];\n\n /** @internal */\n private readonly hasSlotController = new HasSlotController(this, \"title\", \"description\");\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute(\"role\", \"list\");\n this.updateComplete.then(() => {\n this._updateDescriptionLists();\n });\n }\n\n private _updateDescriptionLists() {\n if (!this._descriptionLists) return;\n this._descriptionLists.forEach((descriptionList, index) => {\n if (this.stacked) {\n descriptionList.setAttribute(\"stacked\", \"\");\n } else {\n descriptionList.removeAttribute(\"stacked\");\n }\n if (this.bordered) {\n descriptionList.setAttribute(\"bordered\", \"\");\n } else {\n descriptionList.removeAttribute(\"bordered\");\n }\n\n if (index === this._descriptionLists.length - 1) {\n descriptionList.setAttribute(\"isLastChild\", \"\");\n }\n });\n }\n\n protected updated(_changedProperties: PropertyValues) {\n if (_changedProperties.has(\"stacked\")) {\n this._updateDescriptionLists();\n }\n if (_changedProperties.has(\"bordered\")) {\n this._updateDescriptionLists();\n }\n }\n\n render() {\n const hasTitleSlot = this.hasSlotController.test(\"title\");\n const hasDescriptionSlot = this.hasSlotController.test(\"description\");\n return html`\n <div class=\"container\" part=\"base\">\n ${hasTitleSlot || hasDescriptionSlot\n ? html`\n <div class=\"header\">\n ${hasTitleSlot\n ? html` <div class=\"title\">\n <slot name=\"title\"></slot>\n </div>`\n : nothing}\n ${hasDescriptionSlot\n ? html`\n <div class=\"description\">\n <slot name=\"description\"></slot>\n </div>\n `\n : nothing}\n </div>\n `\n : nothing}\n <div>\n <slot></slot>\n </div>\n </div>\n `;\n }\n}\n\nexport default SgdsDescriptionListGroup;\n"],"names":["descriptionListGroupStyle"],"mappings":";;;;;;;AAMA;;;;;;;AAOG;AACG,MAAO,wBAAyB,SAAQ,WAAW,CAAA;AAAzD,IAAA,WAAA,GAAA;;;QAI8C,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGjB,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;;QAM3C,IAAiB,CAAA,iBAAA,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC;KAoE1F;IAlEC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAClC,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAK;YAC5B,IAAI,CAAC,uBAAuB,EAAE,CAAC;AACjC,SAAC,CAAC,CAAC;KACJ;IAEO,uBAAuB,GAAA;QAC7B,IAAI,CAAC,IAAI,CAAC,iBAAiB;YAAE,OAAO;QACpC,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,eAAe,EAAE,KAAK,KAAI;AACxD,YAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,gBAAA,eAAe,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;aAC7C;iBAAM;AACL,gBAAA,eAAe,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;aAC5C;AACD,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,gBAAA,eAAe,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;aAC9C;iBAAM;AACL,gBAAA,eAAe,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;aAC7C;YAED,IAAI,KAAK,KAAK,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;AAC/C,gBAAA,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;aACjD;AACH,SAAC,CAAC,CAAC;KACJ;AAES,IAAA,OAAO,CAAC,kBAAkC,EAAA;AAClD,QAAA,IAAI,kBAAkB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YACrC,IAAI,CAAC,uBAAuB,EAAE,CAAC;SAChC;AACD,QAAA,IAAI,kBAAkB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YACtC,IAAI,CAAC,uBAAuB,EAAE,CAAC;SAChC;KACF;IAED,MAAM,GAAA;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC1D,MAAM,kBAAkB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;AACtE,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEL,QAAA,EAAA,YAAY,IAAI,kBAAkB;cAChC,IAAI,CAAA,CAAA;;kBAEE,YAAY;kBACV,IAAI,CAAA,CAAA;;AAEG,0BAAA,CAAA;AACT,kBAAE,OAAO,CAAA;kBACT,kBAAkB;kBAChB,IAAI,CAAA,CAAA;;;;AAIH,oBAAA,CAAA;AACH,kBAAE,OAAO,CAAA;;AAEd,YAAA,CAAA;AACH,cAAE,OAAO,CAAA;;;;;KAKd,CAAC;KACH;;AA/EM,wBAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAyB,CAApD,CAAsD;AAGvB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,wBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,wBAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGpD,UAAA,CAAA;AADP,IAAA,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACC,CAAA,EAAA,wBAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
package/components/Masthead/index.umd.js CHANGED
@@ -4162,7 +4162,7 @@
4162
4162
  /** @internal */
4163
4163
  SgdsElement.dependencies = {};
4164
4164
 
4165
- var css_248z$2 = css`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc}a:hover{color:#0022b9}.sgds-masthead{font-family:Inter,system-ui,sans-serif;font-size:.875rem;line-height:1.25rem}.banner{background-color:light-dark(#f3f3f3,#1a1a1a)}.container{margin-left:auto;margin-right:auto;max-width:var(--sgds-mainnav-max-width);padding:.25rem var(--sgds-mainnav-padding-x);width:100%}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .75rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0269d0,#60aaf4);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0151a0,#96c7f7)}.panel{background-color:light-dark(oklch(from #0e0e0e l c h/.1),oklch(from #fff l c h/.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#525252,#a5a5a5)}.banner-icon,.banner-icon-inline{height:20px;width:20px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#1a1a1a,#f3f3f3)}a.trusted-websites-link{color:light-dark(#0269d0,#60aaf4);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0151a0,#96c7f7)}@media screen and (max-width:768px){.container{padding:.25rem var(--sgds-mainnav-mobile-padding-x)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
4165
+ var css_248z$2 = css`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc}a:hover{color:#0022b9}.sgds-masthead{font-family:Inter,system-ui,sans-serif;font-size:.875rem;line-height:1.25rem}.banner{background-color:light-dark(#f3f3f3,#1a1a1a)}.container{margin-left:auto;margin-right:auto;max-width:var(--sgds-mainnav-max-width);padding:.25rem var(--sgds-mainnav-padding-x);width:100%}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .75rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0269d0,#60aaf4);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0151a0,#96c7f7)}.panel{background-color:light-dark(oklch(from #0e0e0e l c h/.1),oklch(from #fff l c h/.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#525252,#a5a5a5)}.banner-icon,.banner-icon-inline{height:20px;width:20px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#1a1a1a,#f3f3f3)}a.trusted-websites-link{color:light-dark(#0269d0,#60aaf4);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0151a0,#96c7f7)}.sgds-masthead-button:focus,.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus,a.trusted-websites-link:focus-visible{box-shadow:0 0 0 4px #60aaf4;outline:0}@media screen and (max-width:768px){.container{padding:.25rem var(--sgds-mainnav-mobile-padding-x)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
4166
4166
 
4167
4167
  var css_248z$1 = css`svg{vertical-align:middle}`;
4168
4168
 
@@ -4178,6 +4178,13 @@
4178
4178
  this.toggleVisibility = false;
4179
4179
  }
4180
4180
  /** @internal */
4181
+ _handleKeydown(event) {
4182
+ if (event.key === "Enter" || event.key === " ") {
4183
+ event.preventDefault();
4184
+ this._toggleVisibility();
4185
+ }
4186
+ }
4187
+ /** @internal */
4181
4188
  _toggleVisibility() {
4182
4189
  this.toggleVisibility = !this.toggleVisibility;
4183
4190
  }
@@ -4226,9 +4233,11 @@
4226
4233
  class="sgds-masthead-button"
4227
4234
  id="sgds-masthead-identify"
4228
4235
  role="button"
4236
+ tabindex="0"
4229
4237
  aria-expanded="${this.toggleVisibility}"
4230
4238
  aria-controls="sgds-masthead-content"
4231
- @click=${() => this._toggleVisibility()}
4239
+ @keydown=${this._handleKeydown}
4240
+ @click=${this._toggleVisibility}
4232
4241
  >
4233
4242
  <span>How to identify</span>
4234
4243
  <svg