@govtechsg/sgds-web-component 3.3.1-rc.3 → 3.3.2-rc.0

package/react/components/ComboBox/sgds-combo-box.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-combo-box.js","sources":["../../../../src/components/ComboBox/sgds-combo-box.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement, SgdsSelectItemData } from \"../../base/select-element\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsBadge } from \"../Badge/sgds-badge\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { ComboBoxItem } from \"./combo-box-item\";\nimport comboBoxStyle from \"./combo-box.css\";\n\n/**\n * Each item in the ComboBox has a label to display\n * and a value (the actual data / ID).\n */\ntype SgdsComboBoxItemData = SgdsSelectItemData;\n/**\n * @summary ComboBox component is used for users to make one or more selections from a list through user input, keyboard or mouse actions\n *\n * @slot icon - slot for form control icon to be displayed on the right of the input box.\n *\n * @event sgds-select - Emitted when the combo box's selected value changes.\n * @event sgds-input -  Emitted when user input is received and its value changes.\n */\n\nexport class SgdsComboBox extends SelectElement {\n  static styles = [...SelectElement.styles, comboBoxStyle];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-combo-box-item\": ComboBoxItem,\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-badge\": SgdsBadge\n  };\n\n  /** If true, renders multiple checkbox selection items. If false, single-select. */\n  @property({ type: Boolean, reflect: true }) multiSelect = false;\n\n  /** If true, renders badge that fills width of combobox */\n  @property({ type: Boolean, reflect: true }) badgeFullWidth = false;\n\n  /** The function used to filter the menu list, given the user's input value. */\n  @property()\n  filterFunction: (inputValue: string, item: SgdsComboBoxItemData) => boolean = (inputValue, item) => {\n    return item.label.toLowerCase().startsWith(inputValue.toLowerCase());\n  };\n\n  /** Managed menu to render depending on the activity. On input change, show filteredMenu, on selections and initial state show full menu list. */\n  @state()\n  private _renderedMenu: SgdsComboBoxItemData[] = [];\n\n  @queryAsync(\"input#multi-select-input-tracker\") private _multiSelectInput: Promise<HTMLInputElement>;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus();\n      this._renderedMenu = this.menuList;\n    });\n  }\n\n  async firstUpdated() {\n    super.firstUpdated();\n\n    this._renderedMenu = this.menuList;\n    if (this.value) {\n      const valueArray = this.value.split(\";\");\n      const initialSelectedItem = this.menuList.filter(({ value }) => valueArray.includes(value));\n      this.selectedItems = [...initialSelectedItem, ...this.selectedItems];\n\n      if (!this.multiSelect) {\n        this.displayValue = initialSelectedItem[0].label;\n      }\n    }\n    this.multiSelect ? (this.input = await this._multiSelectInput) : (this.input = await this._input);\n    this._mixinValidate(this.input);\n\n    if (this.menuIsOpen && !this.readonly) {\n      this.showMenu();\n    }\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n\n    if (this.multiSelect) {\n      this._mixinValidate(this.input);\n    } else {\n      // this._mixinValidate(sgdsInput.input);\n      this._mixinValidate(sgdsInput);\n    }\n    if (!this._isTouched && this.value === \"\") return;\n\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  // Called each time the user types in the <sgds-input>, we set .value and show the menu\n  private async _handleInputChange(e: CustomEvent) {\n    this.emit(\"sgds-input\");\n    const input = e.target as HTMLInputElement;\n    this.displayValue = input.value;\n    this.filteredMenuList = this.menuList.filter(item => this.filterFunction(this.displayValue, item));\n\n    // reset menu list when displayValue\n    if (this.displayValue === \"\" && !this.multiSelect) {\n      this.selectedItems = [];\n      this.value = this.selectedItems.join(\";\");\n    }\n\n    this.invalid = false;\n    this.showMenu();\n\n    this.displayValue = (e.target as HTMLInputElement).value;\n    this._renderedMenu = this.filteredMenuList;\n\n    if (this.displayValue === \"\") {\n      this._renderedMenu = this.menuList;\n      await this.updateComplete;\n    }\n  }\n\n  /**\n   * Called whenever an <sgds-combo-box-item> dispatches sgds-select\"\n   */\n  protected async _handleItemSelected(e: CustomEvent) {\n    const itemEl = e.target as ComboBoxItem;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = this.filteredMenuList.find(i => i.value.toString() === itemValueAttr) || {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n\n    if (this.multiSelect) {\n      if (!this.selectedItems.some(i => i.value === foundItem.value)) {\n        this.selectedItems = [...this.selectedItems, foundItem];\n        setTimeout(() => (this.displayValue = \"\"));\n      }\n      this.hideMenu();\n      this.value = this.selectedItems.map(i => i.value).join(\";\");\n    } else {\n      // Single-select\n      this.selectedItems = [foundItem];\n      this.value = foundItem.value.toString();\n      this.displayValue = this.selectedItems[0].label;\n      this.hideMenu();\n    }\n  }\n\n  private _handleItemUnselect(e: CustomEvent) {\n    const itemEl = e.target as ComboBoxItem;\n\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = this.filteredMenuList.find(i => i.value.toString() === itemValueAttr) || {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n\n    this.selectedItems = this.selectedItems.filter(i => i.value !== foundItem.value);\n    this.value = this.selectedItems.map(i => i.value).join(\";\");\n  }\n\n  private async _handleBadgeDismissed(e: CustomEvent, item: SgdsComboBoxItemData) {\n    e.preventDefault();\n    this.selectedItems = this.selectedItems.filter(i => i.value !== item.value);\n    this.value = this.selectedItems.map(i => i.value).join(\";\");\n  }\n  private async _handleMultiSelectKeyDown(e: KeyboardEvent) {\n    // Only do this in multi-select mode\n    if (!this.multiSelect) {\n      return;\n    }\n\n    if (e.key === \"Backspace\" && this.multiSelect) {\n      if (this.displayValue.trim() === \"\" && this.selectedItems.length > 0) {\n        this.selectedItems = this.selectedItems.slice(0, -1);\n        this.value = this.selectedItems.map(i => i.value).join(\";\");\n      }\n    }\n  }\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    if (this.multiSelect) {\n      const displayValueMatchedSelectedItems = this.selectedItems.filter(({ label }) => this.displayValue === label);\n      if (displayValueMatchedSelectedItems.length <= 0) {\n        this.displayValue = \"\";\n      }\n    } else {\n      // Single select\n      if (this.selectedItems.length > 0) {\n        this.displayValue = this.selectedItems[0].label;\n      } else {\n        this.displayValue = \"\";\n      }\n    }\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    if (!this.multiSelect) {\n      const initialItem = this.menuList.filter(({ value }) => value === this.value);\n      if (initialItem.length <= 0) {\n        this.displayValue = \"\";\n      } else {\n        this.displayValue = initialItem[0].label;\n      }\n      this._mixinResetValidity(await this._input);\n    } else {\n      const valueArray = this.value.split(\";\");\n      const initialItem = this.menuList.filter(({ value }) => valueArray.includes(value));\n      this.selectedItems = initialItem;\n      this._mixinResetValidity(await this._multiSelectInput);\n    }\n  }\n\n  protected _renderMenu() {\n    const emptyMenu = html` <div class=\"empty-menu\">No options</div> `;\n    const menu = this._renderedMenu.map(item => {\n      let isActive = false;\n      if (this.multiSelect) {\n        const selectedItemValueArray = this.selectedItems.map(i => i.value);\n        isActive = selectedItemValueArray.includes(item.value);\n      } else {\n        isActive = item.value === this.value;\n      }\n      return html`\n        <sgds-combo-box-item\n          ?active=${isActive}\n          ?checkbox=${this.multiSelect}\n          value=${item.value}\n          @sgds-select=${this._handleItemSelected}\n          @sgds-unselect=${this._handleItemUnselect}\n        >\n          ${item.label}\n        </sgds-combo-box-item>\n      `;\n    });\n    return this._renderedMenu.length === 0 ? emptyMenu : menu;\n  }\n\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n    return html`\n      <div\n        ${ref(this.myDropdown)}\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <div class=\"combobox-input-container\">\n          ${this.multiSelect\n            ? html`\n                ${this.selectedItems.map(\n                  item =>\n                    html`<sgds-badge\n                      outlined\n                      variant=\"neutral\"\n                      show\n                      dismissible\n                      ?fullwidth=${this.badgeFullWidth}\n                      @sgds-hide=${e => this._handleBadgeDismissed(e, item)}\n                      >${item.label}</sgds-badge\n                    >`\n                )}\n              `\n            : nothing}\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            id=${this._controlId}\n            name=${ifDefined(this.name)}\n            placeholder=${ifDefined(this.placeholder)}\n            aria-invalid=${this.invalid ? \"true\" : \"false\"}\n            ?autofocus=${this.autofocus}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            .value=${this.displayValue}\n            @input=${this._handleInputChange}\n            @blur=${this._handleInputBlur}\n            aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n            aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n              ? `${this._controlId}-invalid`\n              : \"\"}\"\n          />\n        </div>\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n  render() {\n    return html`\n      <div class=\"combobox\" @keydown=${this._handleMultiSelectKeyDown}>\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <ul id=${this.dropdownMenuId} class=\"dropdown-menu\" part=\"menu\" tabindex=\"-1\">\n          ${this._renderMenu()}\n        </ul>\n      </div>\n      <!-- Required an input element for constraint validation -->\n      ${this.multiSelect\n        ? html`<input\n            .value=${live(this.value)}\n            id=\"multi-select-input-tracker\"\n            class=\"visually-hidden\"\n            ?required=${this.required}\n          />`\n        : nothing}\n    `;\n  }\n}\n\nexport default SgdsComboBox;\n"],"names":["comboBoxStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-combo-box.js","sources":["../../../../src/components/ComboBox/sgds-combo-box.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement, SgdsSelectItemData } from \"../../base/select-element\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsBadge } from \"../Badge/sgds-badge\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { ComboBoxItem } from \"./combo-box-item\";\nimport comboBoxStyle from \"./combo-box.css\";\n\n/**\n * Each item in the ComboBox has a label to display\n * and a value (the actual data / ID).\n */\ntype SgdsComboBoxItemData = SgdsSelectItemData;\n/**\n * @summary ComboBox component is used for users to make one or more selections from a list through user input, keyboard or mouse actions\n *\n * @slot icon - slot for form control icon to be displayed on the right of the input box.\n *\n * @event sgds-select - Emitted when the combo box's selected value changes.\n * @event sgds-input -  Emitted when user input is received and its value changes.\n */\n\nexport class SgdsComboBox extends SelectElement {\n  static styles = [...SelectElement.styles, comboBoxStyle];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-combo-box-item\": ComboBoxItem,\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-badge\": SgdsBadge\n  };\n\n  /** If true, renders multiple checkbox selection items. If false, single-select. */\n  @property({ type: Boolean, reflect: true }) multiSelect = false;\n\n  /** The function used to filter the menu list, given the user's input value. */\n  @property()\n  filterFunction: (inputValue: string, item: SgdsComboBoxItemData) => boolean = (inputValue, item) => {\n    return item.label.toLowerCase().startsWith(inputValue.toLowerCase());\n  };\n\n  /** Managed menu to render depending on the activity. On input change, show filteredMenu, on selections and initial state show full menu list. */\n  @state()\n  private _renderedMenu: SgdsComboBoxItemData[] = [];\n\n  @queryAsync(\"input#multi-select-input-tracker\") private _multiSelectInput: Promise<HTMLInputElement>;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus();\n      this._renderedMenu = this.menuList;\n    });\n  }\n\n  async firstUpdated() {\n    super.firstUpdated();\n\n    this._renderedMenu = this.menuList;\n    if (this.value) {\n      const valueArray = this.value.split(\";\");\n      const initialSelectedItem = this.menuList.filter(({ value }) => valueArray.includes(value));\n      this.selectedItems = [...initialSelectedItem, ...this.selectedItems];\n\n      if (!this.multiSelect) {\n        this.displayValue = initialSelectedItem[0].label;\n      }\n    }\n    this.multiSelect ? (this.input = await this._multiSelectInput) : (this.input = await this._input);\n    this._mixinValidate(this.input);\n\n    if (this.menuIsOpen && !this.readonly) {\n      this.showMenu();\n    }\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n\n    if (this.multiSelect) {\n      this._mixinValidate(this.input);\n    } else {\n      // this._mixinValidate(sgdsInput.input);\n      this._mixinValidate(sgdsInput);\n    }\n    if (!this._isTouched && this.value === \"\") return;\n\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  // Called each time the user types in the <sgds-input>, we set .value and show the menu\n  private async _handleInputChange(e: CustomEvent) {\n    this.emit(\"sgds-input\");\n    const input = e.target as HTMLInputElement;\n    this.displayValue = input.value;\n    this.filteredMenuList = this.menuList.filter(item => this.filterFunction(this.displayValue, item));\n\n    // reset menu list when displayValue\n    if (this.displayValue === \"\" && !this.multiSelect) {\n      this.selectedItems = [];\n      this.value = this.selectedItems.join(\";\");\n    }\n\n    this.invalid = false;\n    this.showMenu();\n\n    this.displayValue = (e.target as HTMLInputElement).value;\n    this._renderedMenu = this.filteredMenuList;\n\n    if (this.displayValue === \"\") {\n      this._renderedMenu = this.menuList;\n      await this.updateComplete;\n    }\n  }\n\n  /**\n   * Called whenever an <sgds-combo-box-item> dispatches sgds-select\"\n   */\n  protected async _handleItemSelected(e: CustomEvent) {\n    const itemEl = e.target as ComboBoxItem;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = this.filteredMenuList.find(i => i.value.toString() === itemValueAttr) || {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n\n    if (this.multiSelect) {\n      if (!this.selectedItems.some(i => i.value === foundItem.value)) {\n        this.selectedItems = [...this.selectedItems, foundItem];\n        setTimeout(() => (this.displayValue = \"\"));\n      }\n      this.hideMenu();\n      this.value = this.selectedItems.map(i => i.value).join(\";\");\n    } else {\n      // Single-select\n      this.selectedItems = [foundItem];\n      this.value = foundItem.value.toString();\n      this.displayValue = this.selectedItems[0].label;\n      this.hideMenu();\n    }\n  }\n\n  private _handleItemUnselect(e: CustomEvent) {\n    const itemEl = e.target as ComboBoxItem;\n\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = this.filteredMenuList.find(i => i.value.toString() === itemValueAttr) || {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n\n    this.selectedItems = this.selectedItems.filter(i => i.value !== foundItem.value);\n    this.value = this.selectedItems.map(i => i.value).join(\";\");\n  }\n\n  private async _handleBadgeDismissed(e: CustomEvent, item: SgdsComboBoxItemData) {\n    e.preventDefault();\n    this.selectedItems = this.selectedItems.filter(i => i.value !== item.value);\n    this.value = this.selectedItems.map(i => i.value).join(\";\");\n  }\n  private async _handleMultiSelectKeyDown(e: KeyboardEvent) {\n    // Only do this in multi-select mode\n    if (!this.multiSelect) {\n      return;\n    }\n\n    if (e.key === \"Backspace\" && this.multiSelect) {\n      if (this.displayValue.trim() === \"\" && this.selectedItems.length > 0) {\n        this.selectedItems = this.selectedItems.slice(0, -1);\n        this.value = this.selectedItems.map(i => i.value).join(\";\");\n      }\n    }\n  }\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    if (this.multiSelect) {\n      const displayValueMatchedSelectedItems = this.selectedItems.filter(({ label }) => this.displayValue === label);\n      if (displayValueMatchedSelectedItems.length <= 0) {\n        this.displayValue = \"\";\n      }\n    } else {\n      // Single select\n      if (this.selectedItems.length > 0) {\n        this.displayValue = this.selectedItems[0].label;\n      } else {\n        this.displayValue = \"\";\n      }\n    }\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    if (!this.multiSelect) {\n      const initialItem = this.menuList.filter(({ value }) => value === this.value);\n      if (initialItem.length <= 0) {\n        this.displayValue = \"\";\n      } else {\n        this.displayValue = initialItem[0].label;\n      }\n      this._mixinResetValidity(await this._input);\n    } else {\n      const valueArray = this.value.split(\";\");\n      const initialItem = this.menuList.filter(({ value }) => valueArray.includes(value));\n      this.selectedItems = initialItem;\n      this._mixinResetValidity(await this._multiSelectInput);\n    }\n  }\n\n  protected _renderMenu() {\n    const emptyMenu = html` <div class=\"empty-menu\">No options</div> `;\n    const menu = this._renderedMenu.map(item => {\n      let isActive = false;\n      if (this.multiSelect) {\n        const selectedItemValueArray = this.selectedItems.map(i => i.value);\n        isActive = selectedItemValueArray.includes(item.value);\n      } else {\n        isActive = item.value === this.value;\n      }\n      return html`\n        <sgds-combo-box-item\n          ?active=${isActive}\n          ?checkbox=${this.multiSelect}\n          value=${item.value}\n          @sgds-select=${this._handleItemSelected}\n          @sgds-unselect=${this._handleItemUnselect}\n        >\n          ${item.label}\n        </sgds-combo-box-item>\n      `;\n    });\n    return this._renderedMenu.length === 0 ? emptyMenu : menu;\n  }\n\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n    return html`\n      <div\n        ${ref(this.myDropdown)}\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <div class=\"combobox-input-container\">\n          ${this.multiSelect\n            ? html`\n                ${this.selectedItems.map(\n                  item =>\n                    html`<sgds-badge\n                      outlined\n                      variant=\"neutral\"\n                      show\n                      dismissible\n                      @sgds-hide=${e => this._handleBadgeDismissed(e, item)}\n                      >${item.label}</sgds-badge\n                    >`\n                )}\n              `\n            : nothing}\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            id=${this._controlId}\n            name=${ifDefined(this.name)}\n            placeholder=${ifDefined(this.placeholder)}\n            aria-invalid=${this.invalid ? \"true\" : \"false\"}\n            ?autofocus=${this.autofocus}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            .value=${this.displayValue}\n            @input=${this._handleInputChange}\n            @blur=${this._handleInputBlur}\n            aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n            aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n              ? `${this._controlId}-invalid`\n              : \"\"}\"\n          />\n        </div>\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n  render() {\n    return html`\n      <div class=\"combobox\" @keydown=${this._handleMultiSelectKeyDown}>\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <ul id=${this.dropdownMenuId} class=\"dropdown-menu\" part=\"menu\" tabindex=\"-1\">\n          ${this._renderMenu()}\n        </ul>\n      </div>\n      <!-- Required an input element for constraint validation -->\n      ${this.multiSelect\n        ? html`<input\n            .value=${live(this.value)}\n            id=\"multi-select-input-tracker\"\n            class=\"visually-hidden\"\n            ?required=${this.required}\n          />`\n        : nothing}\n    `;\n  }\n}\n\nexport default SgdsComboBox;\n"],"names":["comboBoxStyle"],"mappings":"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"}

package/react/components/Datepicker/datepicker-calendar.cjs2.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.datepicker-body{color:var(--sgds-form-color-default);display:flex;justify-content:center}table{border-collapse:collapse;text-align:center}.monthpicker,.yearpicker{display:grid;grid-template-columns:repeat(3,6rem);grid-template-rows:repeat(4,2.5rem)}button.month,button.year{background-color:transparent;border:0;border-radius:var(--sgds-form-border-radius-sm);line-height:var(--sgds-line-height-min);padding:0;position:relative}button.month.active:not(.selected-ends),button.year.active:not(.selected-ends),td[data-day].active:not(.selected-ends){background-color:var(--sgds-primary-surface-translucent);border-radius:0;cursor:pointer}button.month:hover:not(.active),button.year:hover:not(.active),td[data-day]:hover:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle);cursor:pointer}button.month:focus:not(.active),button.year:focus:not(.active),td[data-day]:focus:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle)}button.month:focus-visible,button.year:focus-visible,td[data-day]:focus-visible{outline:var(--sgds-form-border-radius-sm) solid var(--sgds-blue-400)}button.month.active:not(.selected-ends):focus,button.year.active:not(.selected-ends):focus,td[data-day].active:not(.selected-ends):focus{border-radius:var(--sgds-form-border-radius-sm)}button.year.active{background-color:var(--sgds-primary-surface-translucent);cursor:pointer}td,th{border-radius:var(--sgds-form-border-radius-sm);height:var(--sgds-form-height-lg);line-height:var(--sgds-line-height-min);padding:0;position:relative;width:var(--sgds-form-width-md)}th{font-weight:var(--sgds-font-weight-semibold)}td[data-day]{cursor:pointer}button.month.active.selected-ends,button.year.active.selected-ends,td[data-day].active.selected-ends{background-color:var(--sgds-form-primary-surface-default);color:var(--sgds-form-color-fixed-light)}button.month.active.selected-ends:focus,button.month.active.selected-ends:hover,button.year.active.selected-ends:focus,button.year.active.selected-ends:hover,td[data-day].active.selected-ends:focus,td[data-day].active.selected-ends:hover{background-color:var(--sgds-form-primary-surface-emphasis)}td[data-day].disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.today{align-items:center;display:flex;flex-direction:column;justify-content:center}.today:after{background-color:var(--sgds-form-primary-surface-default);bottom:6px;content:".";line-height:4px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;width:4px}.today.active.selected-ends:after{background-color:var(--sgds-form-color-inverse)}`;
+var css_248z = lit.css`.datepicker-body{color:var(--sgds-form-color-default);display:flex;justify-content:center}table{border-collapse:collapse;text-align:center}.monthpicker,.yearpicker{display:grid;grid-template-columns:repeat(3,6rem);grid-template-rows:repeat(4,2.5rem)}button.month,button.year{background-color:transparent;border:0;border-radius:var(--sgds-form-border-radius-sm);line-height:var(--sgds-line-height-min);padding:0;position:relative}button.month.active:not(.selected-ends),button.year.active:not(.selected-ends),td[data-day].active:not(.selected-ends){background-color:var(--sgds-primary-surface-translucent);border-radius:0;cursor:pointer}button.month:hover:not(.active),button.year:hover:not(.active),td[data-day]:hover:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle);cursor:pointer}button.month:focus:not(.active),button.year:focus:not(.active),td[data-day]:focus:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle)}button.month:focus,button.year:focus,td[data-day]:focus{outline:var(--sgds-form-border-radius-sm) solid var(--sgds-blue-400)}button.month.active:not(.selected-ends):focus,button.year.active:not(.selected-ends):focus,td[data-day].active:not(.selected-ends):focus{border-radius:var(--sgds-form-border-radius-sm)}button.year.active{background-color:var(--sgds-primary-surface-translucent);cursor:pointer}td,th{border-radius:var(--sgds-form-border-radius-sm);height:var(--sgds-form-height-lg);line-height:var(--sgds-line-height-min);padding:0;position:relative;width:var(--sgds-form-width-md)}th{font-weight:var(--sgds-font-weight-semibold)}td[data-day]{cursor:pointer}button.month.active.selected-ends,button.year.active.selected-ends,td[data-day].active.selected-ends{background-color:var(--sgds-form-primary-surface-default);color:var(--sgds-form-color-fixed-light)}button.month.active.selected-ends:focus,button.month.active.selected-ends:hover,button.year.active.selected-ends:focus,button.year.active.selected-ends:hover,td[data-day].active.selected-ends:focus,td[data-day].active.selected-ends:hover{background-color:var(--sgds-form-primary-surface-emphasis)}td[data-day].disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.today{align-items:center;display:flex;flex-direction:column;justify-content:center}.today:after{background-color:var(--sgds-form-primary-surface-default);bottom:6px;content:".";line-height:4px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;width:4px}.today.active.selected-ends:after{background-color:var(--sgds-form-color-inverse)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=datepicker-calendar.cjs2.js.map

package/react/components/Datepicker/datepicker-calendar2.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.datepicker-body{color:var(--sgds-form-color-default);display:flex;justify-content:center}table{border-collapse:collapse;text-align:center}.monthpicker,.yearpicker{display:grid;grid-template-columns:repeat(3,6rem);grid-template-rows:repeat(4,2.5rem)}button.month,button.year{background-color:transparent;border:0;border-radius:var(--sgds-form-border-radius-sm);line-height:var(--sgds-line-height-min);padding:0;position:relative}button.month.active:not(.selected-ends),button.year.active:not(.selected-ends),td[data-day].active:not(.selected-ends){background-color:var(--sgds-primary-surface-translucent);border-radius:0;cursor:pointer}button.month:hover:not(.active),button.year:hover:not(.active),td[data-day]:hover:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle);cursor:pointer}button.month:focus:not(.active),button.year:focus:not(.active),td[data-day]:focus:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle)}button.month:focus-visible,button.year:focus-visible,td[data-day]:focus-visible{outline:var(--sgds-form-border-radius-sm) solid var(--sgds-blue-400)}button.month.active:not(.selected-ends):focus,button.year.active:not(.selected-ends):focus,td[data-day].active:not(.selected-ends):focus{border-radius:var(--sgds-form-border-radius-sm)}button.year.active{background-color:var(--sgds-primary-surface-translucent);cursor:pointer}td,th{border-radius:var(--sgds-form-border-radius-sm);height:var(--sgds-form-height-lg);line-height:var(--sgds-line-height-min);padding:0;position:relative;width:var(--sgds-form-width-md)}th{font-weight:var(--sgds-font-weight-semibold)}td[data-day]{cursor:pointer}button.month.active.selected-ends,button.year.active.selected-ends,td[data-day].active.selected-ends{background-color:var(--sgds-form-primary-surface-default);color:var(--sgds-form-color-fixed-light)}button.month.active.selected-ends:focus,button.month.active.selected-ends:hover,button.year.active.selected-ends:focus,button.year.active.selected-ends:hover,td[data-day].active.selected-ends:focus,td[data-day].active.selected-ends:hover{background-color:var(--sgds-form-primary-surface-emphasis)}td[data-day].disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.today{align-items:center;display:flex;flex-direction:column;justify-content:center}.today:after{background-color:var(--sgds-form-primary-surface-default);bottom:6px;content:".";line-height:4px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;width:4px}.today.active.selected-ends:after{background-color:var(--sgds-form-color-inverse)}`;
+var css_248z = css`.datepicker-body{color:var(--sgds-form-color-default);display:flex;justify-content:center}table{border-collapse:collapse;text-align:center}.monthpicker,.yearpicker{display:grid;grid-template-columns:repeat(3,6rem);grid-template-rows:repeat(4,2.5rem)}button.month,button.year{background-color:transparent;border:0;border-radius:var(--sgds-form-border-radius-sm);line-height:var(--sgds-line-height-min);padding:0;position:relative}button.month.active:not(.selected-ends),button.year.active:not(.selected-ends),td[data-day].active:not(.selected-ends){background-color:var(--sgds-primary-surface-translucent);border-radius:0;cursor:pointer}button.month:hover:not(.active),button.year:hover:not(.active),td[data-day]:hover:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle);cursor:pointer}button.month:focus:not(.active),button.year:focus:not(.active),td[data-day]:focus:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle)}button.month:focus,button.year:focus,td[data-day]:focus{outline:var(--sgds-form-border-radius-sm) solid var(--sgds-blue-400)}button.month.active:not(.selected-ends):focus,button.year.active:not(.selected-ends):focus,td[data-day].active:not(.selected-ends):focus{border-radius:var(--sgds-form-border-radius-sm)}button.year.active{background-color:var(--sgds-primary-surface-translucent);cursor:pointer}td,th{border-radius:var(--sgds-form-border-radius-sm);height:var(--sgds-form-height-lg);line-height:var(--sgds-line-height-min);padding:0;position:relative;width:var(--sgds-form-width-md)}th{font-weight:var(--sgds-font-weight-semibold)}td[data-day]{cursor:pointer}button.month.active.selected-ends,button.year.active.selected-ends,td[data-day].active.selected-ends{background-color:var(--sgds-form-primary-surface-default);color:var(--sgds-form-color-fixed-light)}button.month.active.selected-ends:focus,button.month.active.selected-ends:hover,button.year.active.selected-ends:focus,button.year.active.selected-ends:hover,td[data-day].active.selected-ends:focus,td[data-day].active.selected-ends:hover{background-color:var(--sgds-form-primary-surface-emphasis)}td[data-day].disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.today{align-items:center;display:flex;flex-direction:column;justify-content:center}.today:after{background-color:var(--sgds-form-primary-surface-default);bottom:6px;content:".";line-height:4px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;width:4px}.today.active.selected-ends:after{background-color:var(--sgds-form-color-inverse)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=datepicker-calendar2.js.map

package/react/components/Footer/footer-item.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.footer-item{margin-bottom:var(--sgds-margin-3-xs)}.footer-item,.links{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=title]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-color-fixed-light);font-weight:var(--sgds-font-weight-regular,--sgds-font-weight-semibold);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.links{margin:0;padding:0}.links slot::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-fixed-light);text-decoration:none!important;width:fit-content}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible),slot::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible){outline:0}.links slot::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}`;
+var css_248z = lit.css`.footer-item{margin-bottom:var(--sgds-margin-3-xs)}.footer-item,.links{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=title]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-color-fixed-light);font-weight:var(--sgds-font-weight-regular,--sgds-font-weight-semibold);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.links{margin:0;padding:0}.links slot::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-fixed-light);text-decoration:none!important;width:fit-content}.links slot::slotted(a[target=_blank]){align-items:center;display:flex;gap:var(--sgds-gap-2-xs);justify-content:center}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible),slot::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus);outline:0}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=footer-item.cjs.js.map

package/react/components/Footer/footer-item.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.footer-item{margin-bottom:var(--sgds-margin-3-xs)}.footer-item,.links{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=title]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-color-fixed-light);font-weight:var(--sgds-font-weight-regular,--sgds-font-weight-semibold);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.links{margin:0;padding:0}.links slot::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-fixed-light);text-decoration:none!important;width:fit-content}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible),slot::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible){outline:0}.links slot::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}`;
+var css_248z = css`.footer-item{margin-bottom:var(--sgds-margin-3-xs)}.footer-item,.links{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=title]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-color-fixed-light);font-weight:var(--sgds-font-weight-regular,--sgds-font-weight-semibold);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.links{margin:0;padding:0}.links slot::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-fixed-light);text-decoration:none!important;width:fit-content}.links slot::slotted(a[target=_blank]){align-items:center;display:flex;gap:var(--sgds-gap-2-xs);justify-content:center}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible),slot::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus);outline:0}`;
 
 export { css_248z as default };
 //# sourceMappingURL=footer-item.js.map

package/react/components/Footer/footer.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.footer{container:footer/inline-size;height:auto}.footer-top{background-color:var(--sgds-bg-fixed-dark);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-default);gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.footer-header,.footer-top{display:flex;flex-direction:column}.footer-header{gap:var(--sgds-gap-xs);margin:var(--sgds-margin-3-xs) 0}slot[name=title]::slotted(*){--sgds-header-color-default:var(--sgds-color-fixed-light);--sgds-font-size-6:var(--sgds-font-size-5);--sgds-margin-2-xs:var(--sgds-margin-none);color:var(--sgds-header-color-default,--sgds-color-fixed-light);font-size:var(--sgds-font-size-6,--sgds-font-size-5);font-weight:var(--sgds-font-weight-bold);letter-spacing:var(--sgds-letter-spacing-tight);line-height:var(--sgds-line-height-heading);margin-bottom:var(--sgds-margin-2-xs,--sgds-margin-none);margin-top:var(--sgds-margin-none)}slot[name=description]::slotted(*){--sgds-font-size-2:var(--sgds-font-size-3);--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-fixed-light);font-size:var(--sgds-font-size-2,--sgds-font-size-3);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none);margin-top:var(--sgds-margin-none)}.footer-items{display:grid;gap:var(--sgds-gap-md) var(--sgds-gap-lg);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.footer ul{margin:0;padding:0}.footer ul li{list-style-type:none}.footer-mandatory-links ul li a{text-decoration:none}.footer-mandatory-links ul li a,.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:hover{color:var(--sgds-color-fixed-light)}.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:focus-visible{outline:0}.footer-mandatory-links ul li a:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.footer-bottom{background-color:var(--sgds-bg-fixed-dark);display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.social-media{display:flex;gap:var(--sgds-gap-sm)}slot[name=social-media]::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-body-color-default:var(--sgds-color-fixed-light);color:var(--sgds-body-color-default,--sgds-link-color-default);display:inline-flex}slot[name=social-media]::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis)}slot[name=social-media]::slotted(a:focus),slot[name=social-media]::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis);outline:0}slot[name=social-media]::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}.footer-mandatory-links{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xl) var(--sgds-gap-lg);justify-content:space-between}.footer-mandatory-links ul{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs) var(--sgds-gap-xl)}.footer-copyrights{color:var(--sgds-color-fixed-light)}@container footer (max-width: 711px){.footer-bottom,.footer-top{padding:var(--sgds-padding-lg)}.footer-top{gap:var(--sgds-gap-lg)}.footer-mandatory-links,.footer-mandatory-links ul{flex-direction:column}}`;
+var css_248z = lit.css`.footer{container:footer/inline-size;height:auto}.footer-top{background-color:var(--sgds-bg-fixed-dark);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-default);gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.footer-header,.footer-top{display:flex;flex-direction:column}.footer-header{gap:var(--sgds-gap-xs);margin:var(--sgds-margin-3-xs) 0}slot[name=title]::slotted(*){--sgds-header-color-default:var(--sgds-color-fixed-light);--sgds-font-size-6:var(--sgds-font-size-5);--sgds-margin-2-xs:var(--sgds-margin-none);color:var(--sgds-header-color-default,--sgds-color-fixed-light);font-size:var(--sgds-font-size-6,--sgds-font-size-5);font-weight:var(--sgds-font-weight-bold);letter-spacing:var(--sgds-letter-spacing-tight);line-height:var(--sgds-line-height-heading);margin-bottom:var(--sgds-margin-2-xs,--sgds-margin-none);margin-top:var(--sgds-margin-none)}slot[name=description]::slotted(*){--sgds-font-size-2:var(--sgds-font-size-3);--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-fixed-light);font-size:var(--sgds-font-size-2,--sgds-font-size-3);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none);margin-top:var(--sgds-margin-none)}.footer-items{display:grid;gap:var(--sgds-gap-md) var(--sgds-gap-lg);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.footer ul{margin:0;padding:0}.footer ul li{list-style-type:none}.footer-mandatory-links ul li a{text-decoration:none}.footer-mandatory-links ul li a,.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:hover{color:var(--sgds-color-fixed-light)}.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.footer-bottom{background-color:var(--sgds-bg-fixed-dark);display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.social-media{display:flex;gap:var(--sgds-gap-sm)}slot[name=social-media]::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-body-color-default:var(--sgds-color-fixed-light);color:var(--sgds-body-color-default,--sgds-link-color-default);display:inline-flex}slot[name=social-media]::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis)}slot[name=social-media]::slotted(a:focus),slot[name=social-media]::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);box-shadow:var(--sgds-box-shadow-focus);color:var(--sgds-link-color-emphasis);outline:0}.footer-mandatory-links{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xl) var(--sgds-gap-lg);justify-content:space-between}.footer-mandatory-links ul{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs) var(--sgds-gap-xl)}.footer-copyrights{color:var(--sgds-color-fixed-light)}@container footer (max-width: 711px){.footer-bottom,.footer-top{padding:var(--sgds-padding-lg)}.footer-top{gap:var(--sgds-gap-lg)}.footer-mandatory-links,.footer-mandatory-links ul{flex-direction:column}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=footer.cjs.js.map

package/react/components/Footer/footer.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.footer{container:footer/inline-size;height:auto}.footer-top{background-color:var(--sgds-bg-fixed-dark);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-default);gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.footer-header,.footer-top{display:flex;flex-direction:column}.footer-header{gap:var(--sgds-gap-xs);margin:var(--sgds-margin-3-xs) 0}slot[name=title]::slotted(*){--sgds-header-color-default:var(--sgds-color-fixed-light);--sgds-font-size-6:var(--sgds-font-size-5);--sgds-margin-2-xs:var(--sgds-margin-none);color:var(--sgds-header-color-default,--sgds-color-fixed-light);font-size:var(--sgds-font-size-6,--sgds-font-size-5);font-weight:var(--sgds-font-weight-bold);letter-spacing:var(--sgds-letter-spacing-tight);line-height:var(--sgds-line-height-heading);margin-bottom:var(--sgds-margin-2-xs,--sgds-margin-none);margin-top:var(--sgds-margin-none)}slot[name=description]::slotted(*){--sgds-font-size-2:var(--sgds-font-size-3);--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-fixed-light);font-size:var(--sgds-font-size-2,--sgds-font-size-3);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none);margin-top:var(--sgds-margin-none)}.footer-items{display:grid;gap:var(--sgds-gap-md) var(--sgds-gap-lg);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.footer ul{margin:0;padding:0}.footer ul li{list-style-type:none}.footer-mandatory-links ul li a{text-decoration:none}.footer-mandatory-links ul li a,.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:hover{color:var(--sgds-color-fixed-light)}.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:focus-visible{outline:0}.footer-mandatory-links ul li a:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.footer-bottom{background-color:var(--sgds-bg-fixed-dark);display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.social-media{display:flex;gap:var(--sgds-gap-sm)}slot[name=social-media]::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-body-color-default:var(--sgds-color-fixed-light);color:var(--sgds-body-color-default,--sgds-link-color-default);display:inline-flex}slot[name=social-media]::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis)}slot[name=social-media]::slotted(a:focus),slot[name=social-media]::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis);outline:0}slot[name=social-media]::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}.footer-mandatory-links{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xl) var(--sgds-gap-lg);justify-content:space-between}.footer-mandatory-links ul{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs) var(--sgds-gap-xl)}.footer-copyrights{color:var(--sgds-color-fixed-light)}@container footer (max-width: 711px){.footer-bottom,.footer-top{padding:var(--sgds-padding-lg)}.footer-top{gap:var(--sgds-gap-lg)}.footer-mandatory-links,.footer-mandatory-links ul{flex-direction:column}}`;
+var css_248z = css`.footer{container:footer/inline-size;height:auto}.footer-top{background-color:var(--sgds-bg-fixed-dark);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-default);gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.footer-header,.footer-top{display:flex;flex-direction:column}.footer-header{gap:var(--sgds-gap-xs);margin:var(--sgds-margin-3-xs) 0}slot[name=title]::slotted(*){--sgds-header-color-default:var(--sgds-color-fixed-light);--sgds-font-size-6:var(--sgds-font-size-5);--sgds-margin-2-xs:var(--sgds-margin-none);color:var(--sgds-header-color-default,--sgds-color-fixed-light);font-size:var(--sgds-font-size-6,--sgds-font-size-5);font-weight:var(--sgds-font-weight-bold);letter-spacing:var(--sgds-letter-spacing-tight);line-height:var(--sgds-line-height-heading);margin-bottom:var(--sgds-margin-2-xs,--sgds-margin-none);margin-top:var(--sgds-margin-none)}slot[name=description]::slotted(*){--sgds-font-size-2:var(--sgds-font-size-3);--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-fixed-light);font-size:var(--sgds-font-size-2,--sgds-font-size-3);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none);margin-top:var(--sgds-margin-none)}.footer-items{display:grid;gap:var(--sgds-gap-md) var(--sgds-gap-lg);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.footer ul{margin:0;padding:0}.footer ul li{list-style-type:none}.footer-mandatory-links ul li a{text-decoration:none}.footer-mandatory-links ul li a,.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:hover{color:var(--sgds-color-fixed-light)}.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.footer-bottom{background-color:var(--sgds-bg-fixed-dark);display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.social-media{display:flex;gap:var(--sgds-gap-sm)}slot[name=social-media]::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-body-color-default:var(--sgds-color-fixed-light);color:var(--sgds-body-color-default,--sgds-link-color-default);display:inline-flex}slot[name=social-media]::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis)}slot[name=social-media]::slotted(a:focus),slot[name=social-media]::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);box-shadow:var(--sgds-box-shadow-focus);color:var(--sgds-link-color-emphasis);outline:0}.footer-mandatory-links{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xl) var(--sgds-gap-lg);justify-content:space-between}.footer-mandatory-links ul{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs) var(--sgds-gap-xl)}.footer-copyrights{color:var(--sgds-color-fixed-light)}@container footer (max-width: 711px){.footer-bottom,.footer-top{padding:var(--sgds-padding-lg)}.footer-top{gap:var(--sgds-gap-lg)}.footer-mandatory-links,.footer-mandatory-links ul{flex-direction:column}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=footer.js.map

package/react/components/Footer/sgds-footer.cjs.js

@@ -7,7 +7,6 @@ var tslib = require('tslib');
 var lit = require('lit');
 var decorators_js = require('lit/decorators.js');
 var sgdsElement = require('../../base/sgds-element.cjs.js');
-var slot = require('../../utils/slot.cjs.js');
 var footer = require('./footer.cjs.js');
 
 /**
@@ -46,54 +45,60 @@ class SgdsFooter extends sgdsElement["default"] {
          * 	href link for terms of use
          */
         this.termsOfUseHref = "#";
-        this.hasSlotController = new slot.HasSlotController(this, "social-media", "title", "description", "items");
+    }
+    firstUpdated() {
+        const socialMediaSlot = this.shadowRoot.querySelector("slot[name='social-media']");
+        const footerTitleSlot = this.shadowRoot.querySelector("slot[name='title']");
+        const footerDescriptionSlot = this.shadowRoot.querySelector("slot[name='description']");
+        const footerItemsSlot = this.shadowRoot.querySelector("slot[name='items']");
+        const socialMediaChildNodes = socialMediaSlot.assignedNodes({ flatten: true });
+        const footerTitleChildNodes = footerTitleSlot.assignedNodes({ flatten: true });
+        const footerDescriptionChildNodes = footerDescriptionSlot.assignedNodes({ flatten: true });
+        const footerItemsChildNodes = footerItemsSlot.assignedNodes({ flatten: true });
+        if (socialMediaChildNodes.length === 0) {
+            const socialMediaContainer = this.shadowRoot.querySelector(".social-media");
+            socialMediaContainer.style.display = "none";
+        }
+        if (footerTitleChildNodes.length === 0 && footerDescriptionChildNodes.length === 0) {
+            const footerHeaderContainer = this.shadowRoot.querySelector(".footer-header");
+            footerHeaderContainer.style.display = "none";
+        }
+        if (footerItemsChildNodes.length === 0) {
+            const footerItemsContainer = this.shadowRoot.querySelector(".footer-items");
+            footerItemsContainer.style.display = "none";
+        }
+        if (footerTitleChildNodes.length === 0 &&
+            footerDescriptionChildNodes.length === 0 &&
+            footerItemsChildNodes.length === 0) {
+            const footerTopContainer = this.shadowRoot.querySelector(".footer-top");
+            footerTopContainer.style.display = "none";
+        }
     }
     render() {
-        const hasSocialMediaSlot = this.hasSlotController.test("social-media");
-        const hasTitleSlot = this.hasSlotController.test("title");
-        const hasDescriptionSlot = this.hasSlotController.test("description");
-        const hasItemsSlot = this.hasSlotController.test("items");
-        const displayFooterHeader = hasTitleSlot || hasDescriptionSlot;
-        const displayFooterItems = hasItemsSlot;
-        const displaySocialMedia = hasSocialMediaSlot;
-        const displayFooterTop = displayFooterHeader || displayFooterItems;
         return lit.html `
       <footer class="footer">
-        ${displayFooterTop
-            ? lit.html ` <section class="footer-top">
-              ${displayFooterHeader
-                ? lit.html `
-                    <div class="footer-header">
-                      <slot name="title"></slot>
-                      <slot name="description"></slot>
-                    </div>
-                  `
-                : lit.nothing}
-              ${displayFooterItems
-                ? lit.html ` <div class="footer-items">
-                    <slot name="items"></slot>
-                  </div>`
-                : lit.nothing}
-            </section>`
-            : lit.nothing}
-
+        <section class="footer-top">
+          <div class="footer-header">
+            <slot name="title"></slot>
+            <slot name="description"></slot>
+          </div>
+          <div class="footer-items">
+            <slot name="items"></slot>
+          </div>
+        </section>
         <section class="footer-bottom">
-          ${displaySocialMedia
-            ? lit.html `
-                <div class="social-media">
-                  <slot name="social-media"></slot>
-                </div>
-              `
-            : lit.nothing}
+          <div class="social-media">
+            <slot name="social-media"></slot>
+          </div>
           <div class="footer-mandatory-links">
             <ul>
               <li><a href=${this.contactHref}>Contact</a></li>
               <li><a href=${this.feedbackHref}>Feedback</a></li>
               <li><a href=${this.faqHref}>FAQ</a></li>
               <li>
-                <a href="https://tech.gov.sg/report_vulnerability" target="_blank" rel="noopener noreferrer"
-                  >Report Vulnerability</a
-                >
+                <a href="https://tech.gov.sg/report_vulnerability" target="_blank" rel="noopener noreferrer">
+                  Report Vulnerability
+                </a>
               </li>
               <li><a href=${this.privacyHref}>Privacy Statement</a></li>
               <li><a href=${this.termsOfUseHref}>Terms of use</a></li>

package/react/components/Footer/sgds-footer.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-footer.cjs.js","sources":["../../../../src/components/Footer/sgds-footer.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport footerStyle from \"./footer.css\";\n\n/**\n * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.\n *\n * @slot title - The slot for title\n * @slot description - The slot for description\n * @slot items - The slot for the list of footer items\n * @slot social-media - The slot for the list of social media with icons\n *\n */\nexport class SgdsFooter extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerStyle];\n\n  /**\n   * \tSets copyrightLiner of SgdsFooter\n   */\n  @property({ type: String })\n  copyrightLiner = \"Government of Singapore\";\n\n  /**\n   * \thref link for contacts\n   */\n  @property({ type: String })\n  contactHref = \"#\";\n\n  /**\n   * \thref link for feedback\n   */\n  @property({ type: String })\n  feedbackHref = \"#\";\n\n  /**\n   * \thref link for faq\n   */\n  @property({ type: String })\n  faqHref = \"#\";\n\n  /**\n   * \thref link for privacy statement\n   */\n  @property({ type: String })\n  privacyHref = \"#\";\n\n  /**\n   * \thref link for terms of use\n   */\n  @property({ type: String })\n  termsOfUseHref = \"#\";\n\n  private readonly hasSlotController = new HasSlotController(this, \"social-media\", \"title\", \"description\", \"items\");\n\n  render() {\n    const hasSocialMediaSlot = this.hasSlotController.test(\"social-media\");\n    const hasTitleSlot = this.hasSlotController.test(\"title\");\n    const hasDescriptionSlot = this.hasSlotController.test(\"description\");\n    const hasItemsSlot = this.hasSlotController.test(\"items\");\n\n    const displayFooterHeader = hasTitleSlot || hasDescriptionSlot;\n    const displayFooterItems = hasItemsSlot;\n    const displaySocialMedia = hasSocialMediaSlot;\n    const displayFooterTop = displayFooterHeader || displayFooterItems;\n\n    return html`\n      <footer class=\"footer\">\n        ${displayFooterTop\n          ? html` <section class=\"footer-top\">\n              ${displayFooterHeader\n                ? html`\n                    <div class=\"footer-header\">\n                      <slot name=\"title\"></slot>\n                      <slot name=\"description\"></slot>\n                    </div>\n                  `\n                : nothing}\n              ${displayFooterItems\n                ? html` <div class=\"footer-items\">\n                    <slot name=\"items\"></slot>\n                  </div>`\n                : nothing}\n            </section>`\n          : nothing}\n\n        <section class=\"footer-bottom\">\n          ${displaySocialMedia\n            ? html`\n                <div class=\"social-media\">\n                  <slot name=\"social-media\"></slot>\n                </div>\n              `\n            : nothing}\n          <div class=\"footer-mandatory-links\">\n            <ul>\n              <li><a href=${this.contactHref}>Contact</a></li>\n              <li><a href=${this.feedbackHref}>Feedback</a></li>\n              <li><a href=${this.faqHref}>FAQ</a></li>\n              <li>\n                <a href=\"https://tech.gov.sg/report_vulnerability\" target=\"_blank\" rel=\"noopener noreferrer\"\n                  >Report Vulnerability</a\n                >\n              </li>\n              <li><a href=${this.privacyHref}>Privacy Statement</a></li>\n              <li><a href=${this.termsOfUseHref}>Terms of use</a></li>\n            </ul>\n            <div class=\"footer-copyrights\">© ${new Date().getFullYear()}, ${this.copyrightLiner}</div>\n          </div>\n        </section>\n      </footer>\n    `;\n  }\n}\n\nexport default SgdsFooter;\n"],"names":["SgdsElement","HasSlotController","html","nothing","footerStyle","__decorate","property"],"mappings":"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"}
+{"version":3,"file":"sgds-footer.cjs.js","sources":["../../../../src/components/Footer/sgds-footer.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport footerStyle from \"./footer.css\";\n\n/**\n * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.\n *\n * @slot title - The slot for title\n * @slot description - The slot for description\n * @slot items - The slot for the list of footer items\n * @slot social-media - The slot for the list of social media with icons\n *\n */\nexport class SgdsFooter extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerStyle];\n\n  /**\n   * \tSets copyrightLiner of SgdsFooter\n   */\n  @property({ type: String })\n  copyrightLiner = \"Government of Singapore\";\n\n  /**\n   * \thref link for contacts\n   */\n  @property({ type: String })\n  contactHref = \"#\";\n\n  /**\n   * \thref link for feedback\n   */\n  @property({ type: String })\n  feedbackHref = \"#\";\n\n  /**\n   * \thref link for faq\n   */\n  @property({ type: String })\n  faqHref = \"#\";\n\n  /**\n   * \thref link for privacy statement\n   */\n  @property({ type: String })\n  privacyHref = \"#\";\n\n  /**\n   * \thref link for terms of use\n   */\n  @property({ type: String })\n  termsOfUseHref = \"#\";\n\n  firstUpdated() {\n    const socialMediaSlot = this.shadowRoot.querySelector(\"slot[name='social-media']\") as HTMLSlotElement;\n    const footerTitleSlot = this.shadowRoot.querySelector(\"slot[name='title']\") as HTMLSlotElement;\n    const footerDescriptionSlot = this.shadowRoot.querySelector(\"slot[name='description']\") as HTMLSlotElement;\n    const footerItemsSlot = this.shadowRoot.querySelector(\"slot[name='items']\") as HTMLSlotElement;\n    const socialMediaChildNodes = socialMediaSlot.assignedNodes({ flatten: true });\n    const footerTitleChildNodes = footerTitleSlot.assignedNodes({ flatten: true });\n    const footerDescriptionChildNodes = footerDescriptionSlot.assignedNodes({ flatten: true });\n    const footerItemsChildNodes = footerItemsSlot.assignedNodes({ flatten: true });\n    if (socialMediaChildNodes.length === 0) {\n      const socialMediaContainer = this.shadowRoot.querySelector(\".social-media\") as HTMLDivElement;\n      socialMediaContainer.style.display = \"none\";\n    }\n\n    if (footerTitleChildNodes.length === 0 && footerDescriptionChildNodes.length === 0) {\n      const footerHeaderContainer = this.shadowRoot.querySelector(\".footer-header\") as HTMLDivElement;\n      footerHeaderContainer.style.display = \"none\";\n    }\n\n    if (footerItemsChildNodes.length === 0) {\n      const footerItemsContainer = this.shadowRoot.querySelector(\".footer-items\") as HTMLDivElement;\n      footerItemsContainer.style.display = \"none\";\n    }\n\n    if (\n      footerTitleChildNodes.length === 0 &&\n      footerDescriptionChildNodes.length === 0 &&\n      footerItemsChildNodes.length === 0\n    ) {\n      const footerTopContainer = this.shadowRoot.querySelector(\".footer-top\") as HTMLDivElement;\n      footerTopContainer.style.display = \"none\";\n    }\n  }\n\n  render() {\n    return html`\n      <footer class=\"footer\">\n        <section class=\"footer-top\">\n          <div class=\"footer-header\">\n            <slot name=\"title\"></slot>\n            <slot name=\"description\"></slot>\n          </div>\n          <div class=\"footer-items\">\n            <slot name=\"items\"></slot>\n          </div>\n        </section>\n        <section class=\"footer-bottom\">\n          <div class=\"social-media\">\n            <slot name=\"social-media\"></slot>\n          </div>\n          <div class=\"footer-mandatory-links\">\n            <ul>\n              <li><a href=${this.contactHref}>Contact</a></li>\n              <li><a href=${this.feedbackHref}>Feedback</a></li>\n              <li><a href=${this.faqHref}>FAQ</a></li>\n              <li>\n                <a href=\"https://tech.gov.sg/report_vulnerability\" target=\"_blank\" rel=\"noopener noreferrer\">\n                  Report Vulnerability\n                </a>\n              </li>\n              <li><a href=${this.privacyHref}>Privacy Statement</a></li>\n              <li><a href=${this.termsOfUseHref}>Terms of use</a></li>\n            </ul>\n            <div class=\"footer-copyrights\">© ${new Date().getFullYear()}, ${this.copyrightLiner}</div>\n          </div>\n        </section>\n      </footer>\n    `;\n  }\n}\n\nexport default SgdsFooter;\n"],"names":["SgdsElement","html","footerStyle","__decorate","property"],"mappings":"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"}

package/react/components/Footer/sgds-footer.js

@@ -1,9 +1,8 @@
 'use client';
 import { __decorate } from 'tslib';
-import { html, nothing } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import SgdsElement from '../../base/sgds-element.js';
-import { HasSlotController } from '../../utils/slot.js';
 import css_248z from './footer.js';
 
 /**
@@ -42,54 +41,60 @@ class SgdsFooter extends SgdsElement {
          * 	href link for terms of use
          */
         this.termsOfUseHref = "#";
-        this.hasSlotController = new HasSlotController(this, "social-media", "title", "description", "items");
+    }
+    firstUpdated() {
+        const socialMediaSlot = this.shadowRoot.querySelector("slot[name='social-media']");
+        const footerTitleSlot = this.shadowRoot.querySelector("slot[name='title']");
+        const footerDescriptionSlot = this.shadowRoot.querySelector("slot[name='description']");
+        const footerItemsSlot = this.shadowRoot.querySelector("slot[name='items']");
+        const socialMediaChildNodes = socialMediaSlot.assignedNodes({ flatten: true });
+        const footerTitleChildNodes = footerTitleSlot.assignedNodes({ flatten: true });
+        const footerDescriptionChildNodes = footerDescriptionSlot.assignedNodes({ flatten: true });
+        const footerItemsChildNodes = footerItemsSlot.assignedNodes({ flatten: true });
+        if (socialMediaChildNodes.length === 0) {
+            const socialMediaContainer = this.shadowRoot.querySelector(".social-media");
+            socialMediaContainer.style.display = "none";
+        }
+        if (footerTitleChildNodes.length === 0 && footerDescriptionChildNodes.length === 0) {
+            const footerHeaderContainer = this.shadowRoot.querySelector(".footer-header");
+            footerHeaderContainer.style.display = "none";
+        }
+        if (footerItemsChildNodes.length === 0) {
+            const footerItemsContainer = this.shadowRoot.querySelector(".footer-items");
+            footerItemsContainer.style.display = "none";
+        }
+        if (footerTitleChildNodes.length === 0 &&
+            footerDescriptionChildNodes.length === 0 &&
+            footerItemsChildNodes.length === 0) {
+            const footerTopContainer = this.shadowRoot.querySelector(".footer-top");
+            footerTopContainer.style.display = "none";
+        }
     }
     render() {
-        const hasSocialMediaSlot = this.hasSlotController.test("social-media");
-        const hasTitleSlot = this.hasSlotController.test("title");
-        const hasDescriptionSlot = this.hasSlotController.test("description");
-        const hasItemsSlot = this.hasSlotController.test("items");
-        const displayFooterHeader = hasTitleSlot || hasDescriptionSlot;
-        const displayFooterItems = hasItemsSlot;
-        const displaySocialMedia = hasSocialMediaSlot;
-        const displayFooterTop = displayFooterHeader || displayFooterItems;
         return html `
       <footer class="footer">
-        ${displayFooterTop
-            ? html ` <section class="footer-top">
-              ${displayFooterHeader
-                ? html `
-                    <div class="footer-header">
-                      <slot name="title"></slot>
-                      <slot name="description"></slot>
-                    </div>
-                  `
-                : nothing}
-              ${displayFooterItems
-                ? html ` <div class="footer-items">
-                    <slot name="items"></slot>
-                  </div>`
-                : nothing}
-            </section>`
-            : nothing}
-
+        <section class="footer-top">
+          <div class="footer-header">
+            <slot name="title"></slot>
+            <slot name="description"></slot>
+          </div>
+          <div class="footer-items">
+            <slot name="items"></slot>
+          </div>
+        </section>
         <section class="footer-bottom">
-          ${displaySocialMedia
-            ? html `
-                <div class="social-media">
-                  <slot name="social-media"></slot>
-                </div>
-              `
-            : nothing}
+          <div class="social-media">
+            <slot name="social-media"></slot>
+          </div>
           <div class="footer-mandatory-links">
             <ul>
               <li><a href=${this.contactHref}>Contact</a></li>
               <li><a href=${this.feedbackHref}>Feedback</a></li>
               <li><a href=${this.faqHref}>FAQ</a></li>
               <li>
-                <a href="https://tech.gov.sg/report_vulnerability" target="_blank" rel="noopener noreferrer"
-                  >Report Vulnerability</a
-                >
+                <a href="https://tech.gov.sg/report_vulnerability" target="_blank" rel="noopener noreferrer">
+                  Report Vulnerability
+                </a>
               </li>
               <li><a href=${this.privacyHref}>Privacy Statement</a></li>
               <li><a href=${this.termsOfUseHref}>Terms of use</a></li>

package/react/components/Footer/sgds-footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-footer.js","sources":["../../../../src/components/Footer/sgds-footer.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport footerStyle from \"./footer.css\";\n\n/**\n * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.\n *\n * @slot title - The slot for title\n * @slot description - The slot for description\n * @slot items - The slot for the list of footer items\n * @slot social-media - The slot for the list of social media with icons\n *\n */\nexport class SgdsFooter extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerStyle];\n\n  /**\n   * \tSets copyrightLiner of SgdsFooter\n   */\n  @property({ type: String })\n  copyrightLiner = \"Government of Singapore\";\n\n  /**\n   * \thref link for contacts\n   */\n  @property({ type: String })\n  contactHref = \"#\";\n\n  /**\n   * \thref link for feedback\n   */\n  @property({ type: String })\n  feedbackHref = \"#\";\n\n  /**\n   * \thref link for faq\n   */\n  @property({ type: String })\n  faqHref = \"#\";\n\n  /**\n   * \thref link for privacy statement\n   */\n  @property({ type: String })\n  privacyHref = \"#\";\n\n  /**\n   * \thref link for terms of use\n   */\n  @property({ type: String })\n  termsOfUseHref = \"#\";\n\n  private readonly hasSlotController = new HasSlotController(this, \"social-media\", \"title\", \"description\", \"items\");\n\n  render() {\n    const hasSocialMediaSlot = this.hasSlotController.test(\"social-media\");\n    const hasTitleSlot = this.hasSlotController.test(\"title\");\n    const hasDescriptionSlot = this.hasSlotController.test(\"description\");\n    const hasItemsSlot = this.hasSlotController.test(\"items\");\n\n    const displayFooterHeader = hasTitleSlot || hasDescriptionSlot;\n    const displayFooterItems = hasItemsSlot;\n    const displaySocialMedia = hasSocialMediaSlot;\n    const displayFooterTop = displayFooterHeader || displayFooterItems;\n\n    return html`\n      <footer class=\"footer\">\n        ${displayFooterTop\n          ? html` <section class=\"footer-top\">\n              ${displayFooterHeader\n                ? html`\n                    <div class=\"footer-header\">\n                      <slot name=\"title\"></slot>\n                      <slot name=\"description\"></slot>\n                    </div>\n                  `\n                : nothing}\n              ${displayFooterItems\n                ? html` <div class=\"footer-items\">\n                    <slot name=\"items\"></slot>\n                  </div>`\n                : nothing}\n            </section>`\n          : nothing}\n\n        <section class=\"footer-bottom\">\n          ${displaySocialMedia\n            ? html`\n                <div class=\"social-media\">\n                  <slot name=\"social-media\"></slot>\n                </div>\n              `\n            : nothing}\n          <div class=\"footer-mandatory-links\">\n            <ul>\n              <li><a href=${this.contactHref}>Contact</a></li>\n              <li><a href=${this.feedbackHref}>Feedback</a></li>\n              <li><a href=${this.faqHref}>FAQ</a></li>\n              <li>\n                <a href=\"https://tech.gov.sg/report_vulnerability\" target=\"_blank\" rel=\"noopener noreferrer\"\n                  >Report Vulnerability</a\n                >\n              </li>\n              <li><a href=${this.privacyHref}>Privacy Statement</a></li>\n              <li><a href=${this.termsOfUseHref}>Terms of use</a></li>\n            </ul>\n            <div class=\"footer-copyrights\">© ${new Date().getFullYear()}, ${this.copyrightLiner}</div>\n          </div>\n        </section>\n      </footer>\n    `;\n  }\n}\n\nexport default SgdsFooter;\n"],"names":["footerStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-footer.js","sources":["../../../../src/components/Footer/sgds-footer.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport footerStyle from \"./footer.css\";\n\n/**\n * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.\n *\n * @slot title - The slot for title\n * @slot description - The slot for description\n * @slot items - The slot for the list of footer items\n * @slot social-media - The slot for the list of social media with icons\n *\n */\nexport class SgdsFooter extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerStyle];\n\n  /**\n   * \tSets copyrightLiner of SgdsFooter\n   */\n  @property({ type: String })\n  copyrightLiner = \"Government of Singapore\";\n\n  /**\n   * \thref link for contacts\n   */\n  @property({ type: String })\n  contactHref = \"#\";\n\n  /**\n   * \thref link for feedback\n   */\n  @property({ type: String })\n  feedbackHref = \"#\";\n\n  /**\n   * \thref link for faq\n   */\n  @property({ type: String })\n  faqHref = \"#\";\n\n  /**\n   * \thref link for privacy statement\n   */\n  @property({ type: String })\n  privacyHref = \"#\";\n\n  /**\n   * \thref link for terms of use\n   */\n  @property({ type: String })\n  termsOfUseHref = \"#\";\n\n  firstUpdated() {\n    const socialMediaSlot = this.shadowRoot.querySelector(\"slot[name='social-media']\") as HTMLSlotElement;\n    const footerTitleSlot = this.shadowRoot.querySelector(\"slot[name='title']\") as HTMLSlotElement;\n    const footerDescriptionSlot = this.shadowRoot.querySelector(\"slot[name='description']\") as HTMLSlotElement;\n    const footerItemsSlot = this.shadowRoot.querySelector(\"slot[name='items']\") as HTMLSlotElement;\n    const socialMediaChildNodes = socialMediaSlot.assignedNodes({ flatten: true });\n    const footerTitleChildNodes = footerTitleSlot.assignedNodes({ flatten: true });\n    const footerDescriptionChildNodes = footerDescriptionSlot.assignedNodes({ flatten: true });\n    const footerItemsChildNodes = footerItemsSlot.assignedNodes({ flatten: true });\n    if (socialMediaChildNodes.length === 0) {\n      const socialMediaContainer = this.shadowRoot.querySelector(\".social-media\") as HTMLDivElement;\n      socialMediaContainer.style.display = \"none\";\n    }\n\n    if (footerTitleChildNodes.length === 0 && footerDescriptionChildNodes.length === 0) {\n      const footerHeaderContainer = this.shadowRoot.querySelector(\".footer-header\") as HTMLDivElement;\n      footerHeaderContainer.style.display = \"none\";\n    }\n\n    if (footerItemsChildNodes.length === 0) {\n      const footerItemsContainer = this.shadowRoot.querySelector(\".footer-items\") as HTMLDivElement;\n      footerItemsContainer.style.display = \"none\";\n    }\n\n    if (\n      footerTitleChildNodes.length === 0 &&\n      footerDescriptionChildNodes.length === 0 &&\n      footerItemsChildNodes.length === 0\n    ) {\n      const footerTopContainer = this.shadowRoot.querySelector(\".footer-top\") as HTMLDivElement;\n      footerTopContainer.style.display = \"none\";\n    }\n  }\n\n  render() {\n    return html`\n      <footer class=\"footer\">\n        <section class=\"footer-top\">\n          <div class=\"footer-header\">\n            <slot name=\"title\"></slot>\n            <slot name=\"description\"></slot>\n          </div>\n          <div class=\"footer-items\">\n            <slot name=\"items\"></slot>\n          </div>\n        </section>\n        <section class=\"footer-bottom\">\n          <div class=\"social-media\">\n            <slot name=\"social-media\"></slot>\n          </div>\n          <div class=\"footer-mandatory-links\">\n            <ul>\n              <li><a href=${this.contactHref}>Contact</a></li>\n              <li><a href=${this.feedbackHref}>Feedback</a></li>\n              <li><a href=${this.faqHref}>FAQ</a></li>\n              <li>\n                <a href=\"https://tech.gov.sg/report_vulnerability\" target=\"_blank\" rel=\"noopener noreferrer\">\n                  Report Vulnerability\n                </a>\n              </li>\n              <li><a href=${this.privacyHref}>Privacy Statement</a></li>\n              <li><a href=${this.termsOfUseHref}>Terms of use</a></li>\n            </ul>\n            <div class=\"footer-copyrights\">© ${new Date().getFullYear()}, ${this.copyrightLiner}</div>\n          </div>\n        </section>\n      </footer>\n    `;\n  }\n}\n\nexport default SgdsFooter;\n"],"names":["footerStyle"],"mappings":"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"}

package/react/components/Icon/icon.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{color:inherit;display:inline-flex;vertical-align:bottom}:host(.icon-left){margin-right:.25rem}:host(.icon-right){margin-left:.25rem}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;
+var css_248z = lit.css`:host{color:inherit;display:inline-flex}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=icon.cjs.js.map

package/react/components/Icon/icon.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{color:inherit;display:inline-flex;vertical-align:bottom}:host(.icon-left){margin-right:.25rem}:host(.icon-right){margin-left:.25rem}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;
+var css_248z = css`:host{color:inherit;display:inline-flex}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=icon.js.map

package/react/components/Link/link.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{display:inline-flex}.nav-link::slotted(a){color:var(--sgds-link-color-default);cursor:pointer;line-height:var(--sgds-line-height-body);text-decoration:none!important}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible),.nav-link::slotted(a:hover),.nav-link::slotted(a[active]){color:var( --sgds-link-color-emphasis)}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible){outline:0}.nav-link::slotted(a:focus-visible:not([disabled])){box-shadow:var(--sgds-box-shadow-focus)}.nav-link::slotted(a[disabled]){cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=danger]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-danger-color-default);color:var(--sgds-link-color-default,--sgds-danger-color-default)}:host([variant=danger]) .nav-link::slotted(a:focus),:host([variant=danger]) .nav-link::slotted(a:focus-visible),:host([variant=danger]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-danger-color-emphasis);color:var(--sgds-link-color-emphasis,--sgds-danger-color-emphasis)}:host([variant=neutral]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-default);color:var(--sgds-link-color-default,--sgds-color-default)}:host([variant=neutral]) .nav-link::slotted(a:focus),:host([variant=neutral]) .nav-link::slotted(a:focus-visible),:host([variant=neutral]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,--sgds-color-default)}:host([variant=light]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-color-fixed-light)}:host([variant=light]) .nav-link::slotted(a:focus),:host([variant=light]) .nav-link::slotted(a:focus-visible),:host([variant=light]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}:host([variant=dark]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-default,--sgds-color-fixed-dark)}:host([variant=dark]) .nav-link::slotted(a:focus),:host([variant=dark]) .nav-link::slotted(a:focus-visible),:host([variant=dark]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-dark)}:host([size=lg]) .nav-link::slotted(a){font-size:var(--sgds-font-size-3)!important}:host([size=sm]) .nav-link::slotted(a){font-size:var(--sgds-font-size-1)!important;line-height:var(--sgds-line-height-min)}:host([size=xs]) .nav-link::slotted(a){font-size:var(--sgds-font-size-0)!important;line-height:var(--sgds-line-height-16)}`;
+var css_248z = lit.css`.nav-link::slotted(a){align-items:center;color:var(--sgds-link-color-default);cursor:pointer;display:inline-flex;flex-shrink:0;gap:var(--sgds-gap-2-xs);justify-content:center;line-height:var(--sgds-line-height-body);text-decoration:none!important}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible),.nav-link::slotted(a:hover),.nav-link::slotted(a[active]){color:var( --sgds-link-color-emphasis)}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible){outline:0}.nav-link::slotted(a:focus-visible:not([disabled])),.nav-link::slotted(a:focus:not([disabled])){box-shadow:var(--sgds-box-shadow-focus)}.nav-link::slotted(a[disabled]){cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=danger]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-danger-color-default);color:var(--sgds-link-color-default,--sgds-danger-color-default)}:host([variant=danger]) .nav-link::slotted(a:focus),:host([variant=danger]) .nav-link::slotted(a:focus-visible),:host([variant=danger]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-danger-color-emphasis);color:var(--sgds-link-color-emphasis,--sgds-danger-color-emphasis)}:host([variant=neutral]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-default);color:var(--sgds-link-color-default,--sgds-color-default)}:host([variant=neutral]) .nav-link::slotted(a:focus),:host([variant=neutral]) .nav-link::slotted(a:focus-visible),:host([variant=neutral]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,--sgds-color-default)}:host([variant=light]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-color-fixed-light)}:host([variant=light]) .nav-link::slotted(a:focus),:host([variant=light]) .nav-link::slotted(a:focus-visible),:host([variant=light]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}:host([variant=dark]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-default,--sgds-color-fixed-dark)}:host([variant=dark]) .nav-link::slotted(a:focus),:host([variant=dark]) .nav-link::slotted(a:focus-visible),:host([variant=dark]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-dark)}:host([size=lg]) .nav-link::slotted(a){font-size:var(--sgds-font-size-3)!important}:host([size=sm]) .nav-link::slotted(a){font-size:var(--sgds-font-size-1)!important;line-height:var(--sgds-line-height-min)}:host([size=xs]) .nav-link::slotted(a){font-size:var(--sgds-font-size-0)!important;line-height:var(--sgds-line-height-16)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=link.cjs.js.map