diff --git a/packages/docs/docs.json b/packages/docs/docs.json index 5231fc04e6..4321b62cff 100644 --- a/packages/docs/docs.json +++ b/packages/docs/docs.json @@ -875,7 +875,13 @@ "methods": [], "events": [], "listeners": [], - "styles": [], + "styles": [ + { + "name": "--ic-z-index-back-to-top", + "annotation": "prop", + "docs": "z-index of back to top" + } + ], "slots": [], "parts": [], "dependents": [], @@ -2426,7 +2432,18 @@ "passive": false } ], - "styles": [], + "styles": [ + { + "name": "--height", + "annotation": "prop", + "docs": "The height of the button." + }, + { + "name": "--min-width", + "annotation": "prop", + "docs": "Minimum width of the button." + } + ], "slots": [ { "name": "badge", @@ -4257,7 +4274,13 @@ "methods": [], "events": [], "listeners": [], - "styles": [], + "styles": [ + { + "name": "--ic-z-index-classification-banner", + "annotation": "prop", + "docs": "z-index of classification banner" + } + ], "slots": [], "parts": [], "dependents": [], @@ -4991,7 +5014,13 @@ "passive": false } ], - "styles": [], + "styles": [ + { + "name": "--ic-z-index-dialog", + "annotation": "prop", + "docs": "z-index of dialog" + } + ], "slots": [ { "name": "alert", @@ -5294,7 +5323,43 @@ "passive": false } ], - "styles": [], + "styles": [ + { + "name": "--ic-divider-background", + "annotation": "prop", + "docs": "" + }, + { + "name": "--ic-divider-background-monochrome", + "annotation": "prop", + "docs": "" + }, + { + "name": "--ic-divider-horizontal-width", + "annotation": "prop", + "docs": "The width of a horizontal divider. The default value is `inherit`." + }, + { + "name": "--ic-divider-label", + "annotation": "prop", + "docs": "" + }, + { + "name": "--ic-divider-label-monochrome", + "annotation": "prop", + "docs": "" + }, + { + "name": "--ic-divider-label-width", + "annotation": "prop", + "docs": "The max-width of the divider label. When orientation is set to `horizontal`, the default value is `max(20rem, 60%)`. When orientation is set to `vertical`, the default value is `20 rem`." + }, + { + "name": "--ic-divider-vertical-height", + "annotation": "prop", + "docs": "The height of a vertical divider. The default value is `inherit`." + } + ], "slots": [], "parts": [], "dependents": [ @@ -6640,7 +6705,73 @@ "methods": [], "events": [], "listeners": [], - "styles": [], + "styles": [ + { + "name": "--border-color", + "annotation": "prop", + "docs": "Border colour of the input component container" + }, + { + "name": "--border-color-disabled", + "annotation": "prop", + "docs": "Border colour of the input component container when disabled" + }, + { + "name": "--border-color-error", + "annotation": "prop", + "docs": "Border colour of the error variant for input component container" + }, + { + "name": "--border-color-error-hover", + "annotation": "prop", + "docs": "Border colour of the error hover variant for input component container" + }, + { + "name": "--border-color-error-pressed", + "annotation": "prop", + "docs": "Border colour of the error pressed variant for input component container" + }, + { + "name": "--border-color-hover", + "annotation": "prop", + "docs": "Border colour of the input component container on hover" + }, + { + "name": "--border-color-pressed", + "annotation": "prop", + "docs": "Border colour of the input component container when pressed" + }, + { + "name": "--border-color-success", + "annotation": "prop", + "docs": "Border colour of the success variant for input component container" + }, + { + "name": "--border-color-success-hover", + "annotation": "prop", + "docs": "Border colour of the success hover variant for input component container" + }, + { + "name": "--border-color-success-pressed", + "annotation": "prop", + "docs": "Border colour of the success pressed variant for input component container" + }, + { + "name": "--border-color-warning", + "annotation": "prop", + "docs": "Border colour of the warning variant for input component container" + }, + { + "name": "--border-color-warning-hover", + "annotation": "prop", + "docs": "Border colour of the warning hover variant for input component container" + }, + { + "name": "--border-color-warning-pressed", + "annotation": "prop", + "docs": "Border colour of the warning pressed variant for input component container" + } + ], "slots": [ { "name": "left-icon", @@ -7749,7 +7880,13 @@ "methods": [], "events": [], "listeners": [], - "styles": [], + "styles": [ + { + "name": "--circular-diameter", + "annotation": "prop", + "docs": "Diameter of the circular-indicator" + } + ], "slots": [], "parts": [ { @@ -8195,7 +8332,13 @@ ], "events": [], "listeners": [], - "styles": [], + "styles": [ + { + "name": "--ic-z-index-menu", + "annotation": "prop", + "docs": "z-index of menu" + } + ], "slots": [], "parts": [], "dependents": [ @@ -9113,7 +9256,13 @@ "passive": false } ], - "styles": [], + "styles": [ + { + "name": "--ic-z-index-navigation-item", + "annotation": "prop", + "docs": "z-index of navigation group item" + } + ], "slots": [], "parts": [], "dependents": [], @@ -9430,7 +9579,13 @@ "passive": false } ], - "styles": [], + "styles": [ + { + "name": "--ic-z-index-navigation-item", + "annotation": "prop", + "docs": "z-index of navigation item" + } + ], "slots": [ { "name": "badge", @@ -9577,7 +9732,13 @@ "passive": false } ], - "styles": [], + "styles": [ + { + "name": "--ic-z-index-navigation-menu", + "annotation": "prop", + "docs": "z-index of navigation menu" + } + ], "slots": [ { "name": "buttons", @@ -9899,7 +10060,13 @@ "methods": [], "events": [], "listeners": [], - "styles": [], + "styles": [ + { + "name": "--ic-z-index-page-header", + "annotation": "prop", + "docs": "z-index of page-header" + } + ], "slots": [ { "name": "actions", @@ -10728,7 +10895,23 @@ "passive": false } ], - "styles": [], + "styles": [ + { + "name": "--ic-z-index-popover", + "annotation": "prop", + "docs": "z-index of popover menu." + }, + { + "name": "--max-height", + "annotation": "prop", + "docs": "Maximum height of the popover menu." + }, + { + "name": "--popover-width", + "annotation": "prop", + "docs": "Default width of the popover menu." + } + ], "slots": [], "parts": [], "dependents": [], @@ -11513,10 +11696,10 @@ }, { "name": "autocomplete", - "type": "\"off\" | \"on\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"", + "type": "\"name\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"", "complexType": { "original": "IcAutocompleteTypes", - "resolved": "\"off\" | \"on\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"", + "resolved": "\"name\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"", "references": { "IcAutocompleteTypes": { "location": "import", @@ -11533,7 +11716,7 @@ "default": "\"off\"", "values": [ { - "value": "off", + "value": "name", "type": "string" }, { @@ -11541,7 +11724,7 @@ "type": "string" }, { - "value": "name", + "value": "off", "type": "string" }, { @@ -12632,7 +12815,13 @@ "passive": false } ], - "styles": [], + "styles": [ + { + "name": "--ic-z-index-menu", + "annotation": "prop", + "docs": "z-index of search bar menu" + } + ], "slots": [], "parts": [], "dependents": [], @@ -13713,7 +13902,23 @@ } ], "listeners": [], - "styles": [], + "styles": [ + { + "name": "--ic-z-index-menu", + "annotation": "prop", + "docs": "z-index of select menu" + }, + { + "name": "--input-width", + "annotation": "prop", + "docs": "Width of the input field" + }, + { + "name": "--menu-width", + "annotation": "prop", + "docs": "Width of the dropdown menu" + } + ], "slots": [ { "name": "icon", @@ -14039,7 +14244,13 @@ "passive": false } ], - "styles": [], + "styles": [ + { + "name": "--ic-z-index-side-navigation", + "annotation": "prop", + "docs": "z-index of side navigation panel" + } + ], "slots": [ { "name": "app-icon", @@ -15509,10 +15720,10 @@ }, { "name": "autocomplete", - "type": "\"off\" | \"on\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"", + "type": "\"name\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"", "complexType": { "original": "IcAutocompleteTypes", - "resolved": "\"off\" | \"on\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"", + "resolved": "\"name\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"", "references": { "IcAutocompleteTypes": { "location": "import", @@ -15529,7 +15740,7 @@ "default": "\"off\"", "values": [ { - "value": "off", + "value": "name", "type": "string" }, { @@ -15537,7 +15748,7 @@ "type": "string" }, { - "value": "name", + "value": "off", "type": "string" }, { @@ -16645,7 +16856,13 @@ "passive": false } ], - "styles": [], + "styles": [ + { + "name": "--input-width", + "annotation": "prop", + "docs": "Width of the input field" + } + ], "slots": [ { "name": "icon", @@ -17010,7 +17227,13 @@ "passive": true } ], - "styles": [], + "styles": [ + { + "name": "--ic-z-index-toast", + "annotation": "prop", + "docs": "z-index of toast" + } + ], "slots": [ { "name": "action", @@ -18071,7 +18294,13 @@ ], "events": [], "listeners": [], - "styles": [], + "styles": [ + { + "name": "--ic-z-index-tooltip", + "annotation": "prop", + "docs": "z-index of tooltip" + } + ], "slots": [], "parts": [], "dependents": [ diff --git a/packages/web-components/src/components/ic-back-to-top/readme.md b/packages/web-components/src/components/ic-back-to-top/readme.md index 4dfd5a2f57..f703c8e5f2 100644 --- a/packages/web-components/src/components/ic-back-to-top/readme.md +++ b/packages/web-components/src/components/ic-back-to-top/readme.md @@ -14,6 +14,13 @@ | `variant` | `variant` | The variant of the button to render | `"default" \| "icon"` | `"default"` | +## CSS Custom Properties + +| Name | Description | +| -------------------------- | ---------------------- | +| `--ic-z-index-back-to-top` | z-index of back to top | + + ## Dependencies ### Depends on diff --git a/packages/web-components/src/components/ic-button/readme.md b/packages/web-components/src/components/ic-button/readme.md index 42bd43896c..148ef01561 100644 --- a/packages/web-components/src/components/ic-button/readme.md +++ b/packages/web-components/src/components/ic-button/readme.md @@ -72,6 +72,14 @@ Type: `Promise` | `"top-icon"` | Content will be placed above the button label. | +## CSS Custom Properties + +| Name | Description | +| ------------- | ---------------------------- | +| `--height` | The height of the button. | +| `--min-width` | Minimum width of the button. | + + ## Dependencies ### Used by diff --git a/packages/web-components/src/components/ic-classification-banner/readme.md b/packages/web-components/src/components/ic-classification-banner/readme.md index 491d70418f..78c446acb9 100644 --- a/packages/web-components/src/components/ic-classification-banner/readme.md +++ b/packages/web-components/src/components/ic-classification-banner/readme.md @@ -16,6 +16,13 @@ | `upTo` | `up-to` | If `true`, "Up to" will be displayed before the classification and country. | `boolean` | `false` | +## CSS Custom Properties + +| Name | Description | +| ------------------------------------ | -------------------------------- | +| `--ic-z-index-classification-banner` | z-index of classification banner | + + ## Dependencies ### Depends on diff --git a/packages/web-components/src/components/ic-dialog/readme.md b/packages/web-components/src/components/ic-dialog/readme.md index a9cc07a46e..13cb3b88d6 100644 --- a/packages/web-components/src/components/ic-dialog/readme.md +++ b/packages/web-components/src/components/ic-dialog/readme.md @@ -66,6 +66,13 @@ Type: `Promise` | `"label"` | Content will be placed above the dialog heading. | +## CSS Custom Properties + +| Name | Description | +| --------------------- | ----------------- | +| `--ic-z-index-dialog` | z-index of dialog | + + ## Dependencies ### Depends on diff --git a/packages/web-components/src/components/ic-divider/readme.md b/packages/web-components/src/components/ic-divider/readme.md index 41c5e5e1c6..6581ecfed4 100644 --- a/packages/web-components/src/components/ic-divider/readme.md +++ b/packages/web-components/src/components/ic-divider/readme.md @@ -18,6 +18,19 @@ | `weight` | `weight` | The thickness of the divider. | `"medium" \| "thick" \| "thin" \| "very-thick"` | `"thin"` | +## CSS Custom Properties + +| Name | Description | +| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `--ic-divider-background` | | +| `--ic-divider-background-monochrome` | | +| `--ic-divider-horizontal-width` | The width of a horizontal divider. The default value is `inherit`. | +| `--ic-divider-label` | | +| `--ic-divider-label-monochrome` | | +| `--ic-divider-label-width` | The max-width of the divider label. When orientation is set to `horizontal`, the default value is `max(20rem, 60%)`. When orientation is set to `vertical`, the default value is `20 rem`. | +| `--ic-divider-vertical-height` | The height of a vertical divider. The default value is `inherit`. | + + ## Dependencies ### Used by diff --git a/packages/web-components/src/components/ic-input-component-container/readme.md b/packages/web-components/src/components/ic-input-component-container/readme.md index 039e134ad9..6772cbebe4 100644 --- a/packages/web-components/src/components/ic-input-component-container/readme.md +++ b/packages/web-components/src/components/ic-input-component-container/readme.md @@ -25,6 +25,25 @@ | `"left-icon"` | Content will be placed to the left of the input. | +## CSS Custom Properties + +| Name | Description | +| -------------------------------- | -------------------------------------------------------------------------- | +| `--border-color` | Border colour of the input component container | +| `--border-color-disabled` | Border colour of the input component container when disabled | +| `--border-color-error` | Border colour of the error variant for input component container | +| `--border-color-error-hover` | Border colour of the error hover variant for input component container | +| `--border-color-error-pressed` | Border colour of the error pressed variant for input component container | +| `--border-color-hover` | Border colour of the input component container on hover | +| `--border-color-pressed` | Border colour of the input component container when pressed | +| `--border-color-success` | Border colour of the success variant for input component container | +| `--border-color-success-hover` | Border colour of the success hover variant for input component container | +| `--border-color-success-pressed` | Border colour of the success pressed variant for input component container | +| `--border-color-warning` | Border colour of the warning variant for input component container | +| `--border-color-warning-hover` | Border colour of the warning hover variant for input component container | +| `--border-color-warning-pressed` | Border colour of the warning pressed variant for input component container | + + ## Dependencies ### Used by diff --git a/packages/web-components/src/components/ic-loading-indicator/readme.md b/packages/web-components/src/components/ic-loading-indicator/readme.md index 870f26faca..6c23221098 100644 --- a/packages/web-components/src/components/ic-loading-indicator/readme.md +++ b/packages/web-components/src/components/ic-loading-indicator/readme.md @@ -29,6 +29,13 @@ | `"ic-loading-container"` | | +## CSS Custom Properties + +| Name | Description | +| --------------------- | ---------------------------------- | +| `--circular-diameter` | Diameter of the circular-indicator | + + ## Dependencies ### Used by diff --git a/packages/web-components/src/components/ic-menu/readme.md b/packages/web-components/src/components/ic-menu/readme.md index 4eeb30ee55..28e02abc5e 100644 --- a/packages/web-components/src/components/ic-menu/readme.md +++ b/packages/web-components/src/components/ic-menu/readme.md @@ -45,6 +45,13 @@ Type: `Promise` +## CSS Custom Properties + +| Name | Description | +| ------------------- | --------------- | +| `--ic-z-index-menu` | z-index of menu | + + ## Dependencies ### Used by diff --git a/packages/web-components/src/components/ic-navigation-group/readme.md b/packages/web-components/src/components/ic-navigation-group/readme.md index fe0a91e1b7..2e5ed301f8 100644 --- a/packages/web-components/src/components/ic-navigation-group/readme.md +++ b/packages/web-components/src/components/ic-navigation-group/readme.md @@ -27,6 +27,13 @@ Type: `Promise` +## CSS Custom Properties + +| Name | Description | +| ------------------------------ | -------------------------------- | +| `--ic-z-index-navigation-item` | z-index of navigation group item | + + ## Dependencies ### Depends on diff --git a/packages/web-components/src/components/ic-navigation-item/readme.md b/packages/web-components/src/components/ic-navigation-item/readme.md index bde0f5c787..f8892f70d4 100644 --- a/packages/web-components/src/components/ic-navigation-item/readme.md +++ b/packages/web-components/src/components/ic-navigation-item/readme.md @@ -48,6 +48,13 @@ Type: `Promise` | `"link"` | The `` within ic-navigation-item | +## CSS Custom Properties + +| Name | Description | +| ------------------------------ | -------------------------- | +| `--ic-z-index-navigation-item` | z-index of navigation item | + + ## Dependencies ### Depends on diff --git a/packages/web-components/src/components/ic-navigation-menu/readme.md b/packages/web-components/src/components/ic-navigation-menu/readme.md index 14be8411b5..7109c206b6 100644 --- a/packages/web-components/src/components/ic-navigation-menu/readme.md +++ b/packages/web-components/src/components/ic-navigation-menu/readme.md @@ -22,6 +22,13 @@ | `"navigation"` | Content will be rendered at top of panel. | +## CSS Custom Properties + +| Name | Description | +| ------------------------------ | -------------------------- | +| `--ic-z-index-navigation-menu` | z-index of navigation menu | + + ## Dependencies ### Used by diff --git a/packages/web-components/src/components/ic-page-header/readme.md b/packages/web-components/src/components/ic-page-header/readme.md index d93641c719..b6b39cd1e6 100644 --- a/packages/web-components/src/components/ic-page-header/readme.md +++ b/packages/web-components/src/components/ic-page-header/readme.md @@ -34,6 +34,13 @@ | `"tabs"` | Content will be rendered in the navigation area, below the title and action areas. Note: the stepper slot cannot be used when the tabs slot is being used. | +## CSS Custom Properties + +| Name | Description | +| -------------------------- | ---------------------- | +| `--ic-z-index-page-header` | z-index of page-header | + + ## Dependencies ### Depends on diff --git a/packages/web-components/src/components/ic-popover-menu/readme.md b/packages/web-components/src/components/ic-popover-menu/readme.md index 650a9ba422..85c4758a89 100644 --- a/packages/web-components/src/components/ic-popover-menu/readme.md +++ b/packages/web-components/src/components/ic-popover-menu/readme.md @@ -22,6 +22,15 @@ This is a wrapper component to be placed around one or more ic-menu-item compone | `icPopoverClosed` | Emitted when the popover menu is closed. | `CustomEvent` | +## CSS Custom Properties + +| Name | Description | +| ---------------------- | ----------------------------------- | +| `--ic-z-index-popover` | z-index of popover menu. | +| `--max-height` | Maximum height of the popover menu. | +| `--popover-width` | Default width of the popover menu. | + + ## Dependencies ### Depends on diff --git a/packages/web-components/src/components/ic-search-bar/readme.md b/packages/web-components/src/components/ic-search-bar/readme.md index 7e35229434..86fcf40f44 100644 --- a/packages/web-components/src/components/ic-search-bar/readme.md +++ b/packages/web-components/src/components/ic-search-bar/readme.md @@ -11,7 +11,7 @@ | --------------------------- | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | | `assistiveHintText` | `assistive-hint-text` | The hint text for the hidden assistive description element. | `string` | `"When autocomplete results are available use the up and down arrows to choose and press enter to select"` | | `autocapitalize` | `autocapitalize` | The automatic capitalisation of the text value as it is entered/edited by the user. Available options: "off", "none", "on", "sentences", "words", "characters". | `string` | `"off"` | -| `autocomplete` | `autocomplete` | The state of autocompletion the browser can apply on the text value. | `"on" \| "off" \| "name" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "email" \| "username" \| "new-password" \| "current-password" \| "one-time-code" \| "organization-title" \| "organization" \| "street-address" \| "address-line1" \| "address-line2" \| "address-line3" \| "address-level4" \| "address-level3" \| "address-level2" \| "address-level1" \| "country" \| "country-name" \| "postal-code" \| "cc-name" \| "cc-given-name" \| "cc-additional-name" \| "cc-family-name" \| "cc-number" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-csc" \| "cc-type" \| "transaction-currency" \| "transaction-amount" \| "language" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "sex" \| "tel" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "url" \| "photo"` | `"off"` | +| `autocomplete` | `autocomplete` | The state of autocompletion the browser can apply on the text value. | `"name" \| "on" \| "off" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "email" \| "username" \| "new-password" \| "current-password" \| "one-time-code" \| "organization-title" \| "organization" \| "street-address" \| "address-line1" \| "address-line2" \| "address-line3" \| "address-level4" \| "address-level3" \| "address-level2" \| "address-level1" \| "country" \| "country-name" \| "postal-code" \| "cc-name" \| "cc-given-name" \| "cc-additional-name" \| "cc-family-name" \| "cc-number" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-csc" \| "cc-type" \| "transaction-currency" \| "transaction-amount" \| "language" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "sex" \| "tel" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "url" \| "photo"` | `"off"` | | `autocorrect` | `autocorrect` | The state of autocorrection the browser can apply when the user is entering/editing the text value. | `"off" \| "on"` | `"off"` | | `autofocus` | `autofocus` | If `true`, the form control will have input focus when the page loads. | `boolean` | `false` | | `charactersUntilSuggestion` | `characters-until-suggestion` | The number of characters until suggestions appear. The submit button will be disabled until the inputted value is equal to or greater than this number. | `number` | `2` | @@ -70,6 +70,13 @@ Type: `Promise` +## CSS Custom Properties + +| Name | Description | +| ------------------- | -------------------------- | +| `--ic-z-index-menu` | z-index of search bar menu | + + ## Dependencies ### Depends on diff --git a/packages/web-components/src/components/ic-select/readme.md b/packages/web-components/src/components/ic-select/readme.md index 3c3dc3da22..c3b406f564 100644 --- a/packages/web-components/src/components/ic-select/readme.md +++ b/packages/web-components/src/components/ic-select/readme.md @@ -77,6 +77,15 @@ Type: `Promise` | `"icon"` | Content will be placed to the left of the select text input. | +## CSS Custom Properties + +| Name | Description | +| ------------------- | -------------------------- | +| `--ic-z-index-menu` | z-index of select menu | +| `--input-width` | Width of the input field | +| `--menu-width` | Width of the dropdown menu | + + ## Dependencies ### Depends on diff --git a/packages/web-components/src/components/ic-side-navigation/readme.md b/packages/web-components/src/components/ic-side-navigation/readme.md index 97847e0398..3b9b88d760 100644 --- a/packages/web-components/src/components/ic-side-navigation/readme.md +++ b/packages/web-components/src/components/ic-side-navigation/readme.md @@ -38,6 +38,13 @@ | `"secondary-navigation"` | Content will be rendered at the bottom of the side navigation. | +## CSS Custom Properties + +| Name | Description | +| ------------------------------ | -------------------------------- | +| `--ic-z-index-side-navigation` | z-index of side navigation panel | + + ## Dependencies ### Depends on diff --git a/packages/web-components/src/components/ic-text-field/ic-text-field.tsx b/packages/web-components/src/components/ic-text-field/ic-text-field.tsx index 5fd4ef907c..246540f408 100644 --- a/packages/web-components/src/components/ic-text-field/ic-text-field.tsx +++ b/packages/web-components/src/components/ic-text-field/ic-text-field.tsx @@ -381,9 +381,9 @@ export class TextField { } } - private doCheck = () => { - const el = this.el.shadowRoot.querySelector("ic-typography"); - if (el.classList.contains("hydrated")) { + private checkChildHydration = () => { + const el = this.el.shadowRoot?.querySelector("ic-typography"); + if (el && el.classList.contains("hydrated")) { this.setFocus(); clearInterval(this.interval); } diff --git a/packages/web-components/src/components/ic-text-field/readme.md b/packages/web-components/src/components/ic-text-field/readme.md index 1412f6df38..7e222e6781 100644 --- a/packages/web-components/src/components/ic-text-field/readme.md +++ b/packages/web-components/src/components/ic-text-field/readme.md @@ -10,7 +10,7 @@ | Property | Attribute | Description | Type | Default | | -------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | | `autocapitalize` | `autocapitalize` | The automatic capitalisation of the text value as it is entered/edited by the user. Available options: "off", "none", "on", "sentences", "words", "characters". | `string` | `"off"` | -| `autocomplete` | `autocomplete` | The state of autocompletion the browser can apply on the text value. | `"on" \| "off" \| "name" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "email" \| "username" \| "new-password" \| "current-password" \| "one-time-code" \| "organization-title" \| "organization" \| "street-address" \| "address-line1" \| "address-line2" \| "address-line3" \| "address-level4" \| "address-level3" \| "address-level2" \| "address-level1" \| "country" \| "country-name" \| "postal-code" \| "cc-name" \| "cc-given-name" \| "cc-additional-name" \| "cc-family-name" \| "cc-number" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-csc" \| "cc-type" \| "transaction-currency" \| "transaction-amount" \| "language" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "sex" \| "tel" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "url" \| "photo"` | `"off"` | +| `autocomplete` | `autocomplete` | The state of autocompletion the browser can apply on the text value. | `"name" \| "on" \| "off" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "email" \| "username" \| "new-password" \| "current-password" \| "one-time-code" \| "organization-title" \| "organization" \| "street-address" \| "address-line1" \| "address-line2" \| "address-line3" \| "address-level4" \| "address-level3" \| "address-level2" \| "address-level1" \| "country" \| "country-name" \| "postal-code" \| "cc-name" \| "cc-given-name" \| "cc-additional-name" \| "cc-family-name" \| "cc-number" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-csc" \| "cc-type" \| "transaction-currency" \| "transaction-amount" \| "language" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "sex" \| "tel" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "url" \| "photo"` | `"off"` | | `autocorrect` | `autocorrect` | The state of autocorrection the browser can apply when the user is entering/editing the text value. | `"off" \| "on"` | `"off"` | | `autofocus` | `autofocus` | If `true`, the form control will have input focus when the page loads. | `boolean` | `false` | | `debounce` | `debounce` | The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke. | `number` | `0` | @@ -73,6 +73,13 @@ Type: `Promise` | `"icon"` | Content will be placed to the left of the text input. | +## CSS Custom Properties + +| Name | Description | +| --------------- | ------------------------ | +| `--input-width` | Width of the input field | + + ## Dependencies ### Used by diff --git a/packages/web-components/src/components/ic-text-field/test/basic/__snapshots__/ic-text-field.input.spec.tsx.snap b/packages/web-components/src/components/ic-text-field/test/basic/__snapshots__/ic-text-field.input.spec.tsx.snap index e5828cabab..2be710311c 100644 --- a/packages/web-components/src/components/ic-text-field/test/basic/__snapshots__/ic-text-field.input.spec.tsx.snap +++ b/packages/web-components/src/components/ic-text-field/test/basic/__snapshots__/ic-text-field.input.spec.tsx.snap @@ -29,7 +29,7 @@ exports[`ic-text-field should render readonly: renders-readonly 1`] = ` `; exports[`ic-text-field should render with autoprops: renders-with-autoprops 1`] = ` - + @@ -345,14 +345,14 @@ exports[`should render with min/max and max validation: renders-with-max 1`] = ` - + - + - + - + `; @@ -360,13 +360,13 @@ exports[`should render with min/max and min validation: renders-with-min 1`] = ` - + - + - + - + `; diff --git a/packages/web-components/src/components/ic-text-field/test/basic/ic-text-field.input.spec.tsx b/packages/web-components/src/components/ic-text-field/test/basic/ic-text-field.input.spec.tsx index 54885cb05c..4a12a6bba0 100644 --- a/packages/web-components/src/components/ic-text-field/test/basic/ic-text-field.input.spec.tsx +++ b/packages/web-components/src/components/ic-text-field/test/basic/ic-text-field.input.spec.tsx @@ -1,4 +1,7 @@ import { TextField } from "../../ic-text-field"; +import { InputContainer } from "../../../ic-input-container/ic-input-container"; +import { InputLabel } from "../../../ic-input-label/ic-input-label"; +import { Typography } from "../../../ic-typography/ic-typography"; import { newSpecPage } from "@stencil/core/testing"; import { waitForTimeout } from "../../../../testspec.setup"; @@ -42,7 +45,7 @@ describe("ic-text-field", () => { it("should render with autoprops", async () => { const page = await newSpecPage({ components: [TextField], - html: ``, + html: ``, }); expect(page.root).toMatchSnapshot("renders-with-autoprops"); @@ -188,19 +191,6 @@ describe("ic-text-field", () => { expect(page.root).toMatchSnapshot("renders-with-inline-success-validation"); }); - it("should focus", async () => { - const page = await newSpecPage({ - components: [TextField], - html: ``, - }); - - const callbackFn = jest.fn(); - page.doc.addEventListener("icFocus", callbackFn); - const input = page.root.shadowRoot.querySelector("input"); - await input.focus(); - expect(callbackFn).toHaveBeenCalled(); - }); - it("should blur", async () => { const page = await newSpecPage({ components: [TextField], @@ -371,3 +361,29 @@ it("should update any attributes that are inherited from the root element", asyn page.root.shadowRoot.querySelector("input").getAttribute("title") ).toBe("new-label"); }); + +it("should autofocus", async () => { + jest.useFakeTimers(); + const page = await newSpecPage({ + components: [TextField, InputContainer, InputLabel, Typography], + html: ` + Helper text + `, + }); + + await page.waitForChanges(); + const textField = page.rootInstance; + + expect(textField.autofocus).toBe(true); + + const typo = page.root.shadowRoot.querySelector("ic-typography"); + typo.classList.add("hydrated"); + + const callbackFn = jest.fn(); + page.doc.addEventListener("icFocus", callbackFn); + + jest.advanceTimersByTime(100); + await page.waitForChanges(); + + expect(callbackFn).toHaveBeenCalled(); +}); diff --git a/packages/web-components/src/components/ic-toast/readme.md b/packages/web-components/src/components/ic-toast/readme.md index 490050cad5..bd97bc5d61 100644 --- a/packages/web-components/src/components/ic-toast/readme.md +++ b/packages/web-components/src/components/ic-toast/readme.md @@ -33,6 +33,13 @@ | `"neutral-icon"` | A custom neutral icon is placed on the left side of the component. If used will default toast to `neutral` variant. | +## CSS Custom Properties + +| Name | Description | +| -------------------- | ---------------- | +| `--ic-z-index-toast` | z-index of toast | + + ## Dependencies ### Depends on diff --git a/packages/web-components/src/components/ic-tooltip/readme.md b/packages/web-components/src/components/ic-tooltip/readme.md index 8b14b8a504..38730d1f91 100644 --- a/packages/web-components/src/components/ic-tooltip/readme.md +++ b/packages/web-components/src/components/ic-tooltip/readme.md @@ -37,6 +37,13 @@ Type: `Promise` +## CSS Custom Properties + +| Name | Description | +| ---------------------- | ------------------ | +| `--ic-z-index-tooltip` | z-index of tooltip | + + ## Dependencies ### Used by