@quartzds/core 1.0.0-beta.20 → 1.0.0-beta.22

package/components/index.d.ts

@@ -44,6 +44,12 @@ export { defineCustomElement as defineCustomElementQdsTitle } from './qds-title'
 export { Tooltip as QdsTooltip } from '../dist/types/components/tooltip/tooltip';
 export { defineCustomElement as defineCustomElementQdsTooltip } from './qds-tooltip';
 
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
 /**
  * Used to manually set the base path where assets can be found.
  * If the script is used as "module", it's recommended to use "import.meta.url",

package/components/index.js

@@ -3,7 +3,7 @@
  * 
  * SPDX-License-Identifier: LGPL-2.1-only
  */
-export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 export { r as registerIconLibrary, u as unregisterIconLibrary } from './icon.js';
 export { QdsButton, defineCustomElement as defineCustomElementQdsButton } from './qds-button.js';
 export { QdsCheckbox, defineCustomElement as defineCustomElementQdsCheckbox } from './qds-checkbox.js';

package/components/qds-select.js

@@ -7,7 +7,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { p as pickFocusEventAttributes, a as invariant, e as pickInputEventAttributes, i as inheritAriaAttributes, b as inheritAttributes } from './helpers.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const selectCss = "[hidden].sc-qds-select-h{display:none !important}.sc-qds-select-h{display:inline-block}.qds-container.sc-qds-select,.qds-select.sc-qds-select{height:100%}.qds-container.sc-qds-select{align-content:flex-start;align-items:center;box-sizing:border-box;display:grid;grid-template-areas:'select';width:inherit}.qds-container.qds-multiple.sc-qds-select{align-content:initial}.qds-icon.sc-qds-select,.qds-select.sc-qds-select,.sc-qds-select-s>optgroup,.sc-qds-select-s>optgroup>option,.sc-qds-select-s>option{color:var(--qds-theme-control-text-standard)}.qds-icon.sc-qds-select,.qds-select.sc-qds-select{grid-area:select}.qds-icon.sc-qds-select{justify-self:end;margin-inline-end:calc(\n    var(--qds-control-input-padding-horizontal) +\n      var(--qds-control-border-width)\n  );pointer-events:none}.qds-select.sc-qds-select{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border-radius:var(--qds-control-border-radius);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);margin:0;padding-block:0;padding-inline:var(--qds-control-input-padding-horizontal)}.qds-select.sc-qds-select:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}.qds-select[aria-invalid='true'].sc-qds-select:not(:focus){border-color:var(--qds-theme-feedback-result-failure)}.qds-select.sc-qds-select:disabled,.qds-select.sc-qds-select:disabled+.qds-icon.sc-qds-select{opacity:var(--qds-theme-disabled)}:is(.sc-qds-select-s>optgroup,.sc-qds-select-s>optgroup:not(:disabled)>option,.sc-qds-select-s>option):disabled{opacity:var(--qds-theme-disabled)}.sc-qds-select-s>optgroup{font:var(--qds-accessory-section-title)}.sc-qds-select-s>optgroup>option,.sc-qds-select-s>option{font:var(--qds-list-item-label-main)}.qds-select[data-size='small'].sc-qds-select{font:var(--qds-control-small-text)}.qds-select[data-size='small'].sc-qds-select:not([multiple]){height:var(--qds-control-small-height);padding-inline-end:calc(\n        var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) +\n          var(--qds-control-input-padding-horizontal)\n      )}.qds-icon[data-size='small'].sc-qds-select{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-select[data-size='standard'].sc-qds-select{font:var(--qds-control-standard-text)}.qds-select[data-size='standard'].sc-qds-select:not([multiple]){height:var(--qds-control-standard-height);padding-inline-end:calc(\n        var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) +\n          var(--qds-control-input-padding-horizontal)\n      )}.qds-icon[data-size='standard'].sc-qds-select{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-select[data-size='large'].sc-qds-select{font:var(--qds-control-large-text)}.qds-select[data-size='large'].sc-qds-select:not([multiple]){height:var(--qds-control-large-height);padding-inline-end:calc(\n        var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) +\n          var(--qds-control-input-padding-horizontal)\n      )}.qds-icon[data-size='large'].sc-qds-select{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}";
+const selectCss = "[hidden].sc-qds-select-h{display:none !important}.sc-qds-select-h{display:inline-block}.qds-container.sc-qds-select,.qds-select.sc-qds-select{height:100%}.qds-container.sc-qds-select{align-content:flex-start;align-items:center;box-sizing:border-box;display:grid;grid-template-areas:'select';width:inherit}.qds-container.qds-multiple.sc-qds-select{align-content:initial}.qds-icon.sc-qds-select,.qds-select.sc-qds-select,.sc-qds-select-s>optgroup,.sc-qds-select-s>optgroup>option,.sc-qds-select-s>option{color:var(--qds-theme-control-text-standard)}.qds-icon.sc-qds-select,.qds-select.sc-qds-select{grid-area:select}.qds-icon.sc-qds-select{justify-self:end;margin-inline-end:calc(\n    var(--qds-control-input-padding-horizontal) +\n      var(--qds-control-border-width)\n  );pointer-events:none}.qds-select.sc-qds-select{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border-radius:var(--qds-control-border-radius);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);margin:0;padding-block:0;padding-inline:var(--qds-control-input-padding-horizontal)}.qds-select.sc-qds-select:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-select[aria-invalid='true'].sc-qds-select:not(:focus){border-color:var(--qds-theme-feedback-result-failure)}.qds-select.sc-qds-select:disabled,.qds-select.sc-qds-select:disabled+.qds-icon.sc-qds-select{opacity:var(--qds-theme-disabled)}:is(.sc-qds-select-s>optgroup,.sc-qds-select-s>optgroup:not(:disabled)>option,.sc-qds-select-s>option):disabled{opacity:var(--qds-theme-disabled)}.sc-qds-select-s>optgroup{font:var(--qds-accessory-section-title)}.sc-qds-select-s>optgroup>option,.sc-qds-select-s>option{font:var(--qds-list-item-label-main)}.qds-select[data-size='small'].sc-qds-select{font:var(--qds-control-small-text)}.qds-select[data-size='small'].sc-qds-select:not([multiple]){height:var(--qds-control-small-height);padding-inline-end:calc(\n        var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) +\n          var(--qds-control-input-padding-horizontal)\n      )}.qds-icon[data-size='small'].sc-qds-select{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-select[data-size='standard'].sc-qds-select{font:var(--qds-control-standard-text)}.qds-select[data-size='standard'].sc-qds-select:not([multiple]){height:var(--qds-control-standard-height);padding-inline-end:calc(\n        var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) +\n          var(--qds-control-input-padding-horizontal)\n      )}.qds-icon[data-size='standard'].sc-qds-select{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-select[data-size='large'].sc-qds-select{font:var(--qds-control-large-text)}.qds-select[data-size='large'].sc-qds-select:not([multiple]){height:var(--qds-control-large-height);padding-inline-end:calc(\n        var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) +\n          var(--qds-control-input-padding-horizontal)\n      )}.qds-icon[data-size='large'].sc-qds-select{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}";
 
 let autoIncrementingId = 1;
 const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement {

package/components/qds-select.js.map

@@ -1 +1 @@
-{"file":"qds-select.js","mappings":";;;;;;;;;AAAA,MAAM,SAAS,GAAG,kpGAAkpG;;AC+BpqG,IAAI,kBAAkB,GAAG,CAAC,CAAA;MAab,MAAM;;;;;;;;IAiIT,wBAAmB,GAAe,EAAE,CAAA;IAqJ3B,QAAG,GAAG,CAAC,MAA0B;MAChD,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;KACrB,CAAA;IAEgB,WAAM,GAAG,CAAC,KAAiB;MAC1C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;KACvD,CAAA;IAEgB,aAAQ,GAAG;MAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAA;KAC1B,CAAA;IAEgB,YAAO,GAAG,CAAC,KAAiB;MAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;KACxD,CAAA;IAEgB,YAAO,GAAG,CAAC,KAAiB;MAC3C,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;MAEtB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAA;MAE9B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;KACxD,CAAA;IAEgB,cAAS,GAAG;MAC3B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;KACpB,CAAA;mBAzSwD,KAAK;gBAUF,UAAU;;;;;;gBA8DvC,aAAa,kBAAkB,EAAE;;;;;;;;;;;;;EAgEzD,MAAM,OAAO,CAClB,OAAgD,EAChD,MAA6B;IAE7B,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAEtB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,CAAA;GACjC;;;;;;;;EAUM,MAAM,IAAI,CAAC,KAAa;IAC7B,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAEtB,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;GAC/B;;;;;;;;;EAWM,MAAM,SAAS,CAAC,IAAY;IACjC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAEtB,OAAO,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;GACnC;;;;;;;;;EAWM,MAAM,UAAU,CAAC,KAAa;IACnC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAEtB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;GAC1B;;;;;EAOM,MAAM,iBAAiB,CAAC,OAAe;IAC5C,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAEtB,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAA;IACtC,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,CAAA;GAC5C;EAGS,eAAe;IACvB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;;;IAItB,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAA;IAC7C,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,CAAA;GAC5C;EAGS,YAAY;IACpB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAEtB,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,GAAG,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IACjE,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,CAAA;GAC5C;EAEM,iBAAiB;IACtB,kBAAkB,IAAI,CAAC,CAAA;IACvB,IAAI,CAAC,mBAAmB,GAAG;MACzB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC;MACtC,GAAG,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,UAAU,CAAC,CAAC;KACjD,CAAA;GACF;EAEM,MAAM;IACX,QACE,WACE,KAAK,EAAE;QACL,eAAe,EAAE,IAAI;QACrB,cAAc,EAAE,IAAI,CAAC,QAAQ,IAAI,KAAK;OACvC,eACU,IAAI,CAAC,IAAI,IAEpB,8BACgB,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAC7C,YAAY,EAAE,IAAI,CAAC,YAAY;;MAE/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAC,YAAY,eACP,IAAI,CAAC,IAAI,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,KAEnB,IAAI,CAAC,mBAAmB,IAE5B,eAAQ,CACD,EACR,IAAI,CAAC,QAAQ,KAAK,IAAI,KACrB,gBACE,KAAK,EAAC,UAAU,eACL,IAAI,CAAC,IAAI,EACpB,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,UAAU,GACf,CACH,CACG,EACP;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/select/select.css?tag=qds-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n}\n\n.qds-container,\n.qds-select {\n  height: 100%;\n}\n\n.qds-container {\n  align-content: flex-start;\n  align-items: center;\n  box-sizing: border-box;\n  display: grid;\n  grid-template-areas: 'select';\n  width: inherit;\n\n  &.qds-multiple {\n    align-content: initial;\n  }\n}\n\n.qds-icon,\n.qds-select,\n::slotted(optgroup),\n::slotted(optgroup > option),\n::slotted(option) {\n  color: var(--qds-theme-control-text-standard);\n}\n\n.qds-icon,\n.qds-select {\n  grid-area: select;\n}\n\n.qds-icon {\n  justify-self: end;\n  margin-inline-end: calc(\n    var(--qds-control-input-padding-horizontal) +\n      var(--qds-control-border-width)\n  );\n  pointer-events: none;\n}\n\n.qds-select {\n  appearance: none;\n  background-color: var(--qds-theme-control-input-background);\n  border-radius: var(--qds-control-border-radius);\n  border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n  margin: 0;\n  padding-block: 0;\n  padding-inline: var(--qds-control-input-padding-horizontal);\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n  }\n\n  &:not(:focus)[aria-invalid='true'] {\n    border-color: var(--qds-theme-feedback-result-failure);\n  }\n}\n\n.qds-select:disabled,\n.qds-select:disabled + .qds-icon {\n  opacity: var(--qds-theme-disabled);\n}\n\n:is(\n    ::slotted(optgroup),\n    ::slotted(optgroup:not(:disabled) > option),\n    ::slotted(option)\n  ):disabled {\n  opacity: var(--qds-theme-disabled);\n}\n\n::slotted(optgroup) {\n  font: var(--qds-accessory-section-title);\n}\n\n::slotted(optgroup > option),\n::slotted(option) {\n  font: var(--qds-list-item-label-main);\n}\n\n[data-size='small'] {\n  &.qds-select {\n    font: var(--qds-control-small-text);\n\n    &:not([multiple]) {\n      height: var(--qds-control-small-height);\n      padding-inline-end: calc(\n        var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) +\n          var(--qds-control-input-padding-horizontal)\n      );\n    }\n  }\n\n  &.qds-icon {\n    height: var(--qds-control-small-icon-size);\n    width: var(--qds-control-small-icon-size);\n  }\n}\n\n[data-size='standard'] {\n  &.qds-select {\n    font: var(--qds-control-standard-text);\n\n    &:not([multiple]) {\n      height: var(--qds-control-standard-height);\n      padding-inline-end: calc(\n        var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) +\n          var(--qds-control-input-padding-horizontal)\n      );\n    }\n  }\n\n  &.qds-icon {\n    height: var(--qds-control-standard-icon-size);\n    width: var(--qds-control-standard-icon-size);\n  }\n}\n\n[data-size='large'] {\n  &.qds-select {\n    font: var(--qds-control-large-text);\n\n    &:not([multiple]) {\n      height: var(--qds-control-large-height);\n      padding-inline-end: calc(\n        var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) +\n          var(--qds-control-input-padding-horizontal)\n      );\n    }\n  }\n\n  &.qds-icon {\n    height: var(--qds-control-large-icon-size);\n    width: var(--qds-control-large-icon-size);\n  }\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core'\n\nimport type {\n  Attributes,\n  QdsFocusEventDetail,\n  QdsInputEventDetail,\n} from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  inheritAttributes,\n  invariant,\n  pickFocusEventAttributes,\n  pickInputEventAttributes,\n} from '../../helpers'\nimport type { AutoComplete, Value } from '../controls'\n\nexport type SelectSize = 'large' | 'small' | 'standard'\n\nlet autoIncrementingId = 1\n\n/**\n * The `<qds-select>` element represents a control that provides a menu of\n * options.\n *\n * @see https://quartz.se.com/build/components/select\n */\n@Component({\n  tag: 'qds-select',\n  scoped: true,\n  styleUrl: 'select.css',\n})\nexport class Select implements ComponentInterface {\n  /**\n   * Defines if the select is in an invalid state. Validity is determined by\n   * the `required` attribute using [constraint validation][].\n   *\n   * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n   */\n  @Prop({ mutable: true, reflect: true }) public invalid = false\n\n  /**\n   * The select's size.\n   *\n   * > ***NOTE:*** The native [`size` HTML attribute] is not supported. CSS\n   * `height` should be used instead if this functionality is needed.\n   *\n   * [`size` HTML attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size\n   */\n  @Prop({ reflect: true }) public readonly size: SelectSize = 'standard'\n\n  /**\n   * Provides a hint for a [user agent's][] autocomplete feature. See\n   * [the HTML `autocomplete` attribute][] for a complete list of values and\n   * details on how to use `autoComplete`.\n   *\n   * [user agent's]: https://developer.mozilla.org/docs/Glossary/User_agent\n   * [the HTML `autocomplete` attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autocomplete' })\n  public readonly autoComplete?: AutoComplete\n\n  /**\n   * Specify whether the select should have focus when the page loads.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autofocus' }) public readonly autoFocus?: boolean\n\n  /**\n   * Prevents the select from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true, reflect: true }) public disabled?: boolean\n\n  /**\n   * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n   * element to associate the select with (its form owner).\n   *\n   * The value of this attribute must be the id of a `<form>` in the same\n   * document. If this attribute is not set, the `<qds-select>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This attribute lets you associate `<qds-select>` elements to `<form>`s\n   * anywhere in the document, not just inside a `<form>`. It can also override\n   * an ancestor `<form>` element.\n   *\n   * @webnative\n   */\n  @Prop() public readonly form?: string\n\n  /**\n   * Indicates that multiple options can be selected in the list. If it is not\n   * specified, then only one option can be selected at a time. When `multiple`\n   * is specified, most browsers will show a scrolling list box instead of a\n   * single line dropdown.\n   *\n   * @webnative\n   */\n  @Prop({ reflect: true }) public multiple?: boolean\n\n  /**\n   * The name of the input, which is submitted with the form data. An\n   * incrementing input ID is used by default.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name = `qds-input-${autoIncrementingId}`\n\n  /**\n   * An `<option>` with a non-empty string value must be selected before this\n   * select can be submitted.\n   *\n   * See [Client-side validation] and the [HTML attribute: `required`] for more\n   * information.\n   *\n   * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n   * [HTML attribute: `required`]: https://developer.mozilla.org/docs/Web/HTML/Attributes/required\n   *\n   * @webnative\n   */\n  @Prop() public readonly required?: boolean\n\n  /**\n   * The value of the select.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public value?: Value\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when an alteration to the select's value is committed by the\n   * user.\n   */\n  @Event({ eventName: 'qdsChange', cancelable: false })\n  private readonly changeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the select gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the select's value changes.\n   */\n  @Event({ eventName: 'qdsInput', cancelable: false })\n  private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n  @Element() private readonly element!: HTMLQdsSelectElement\n\n  private inheritedAttributes: Attributes = {}\n\n  private select?: HTMLSelectElement\n\n  /**\n   * Adds an element to the options collection.\n   *\n   * @param element The element to add.\n   * @param before An element of the options collection or a zero-based index\n   * representing the item the element should be added before. If this\n   * parameter is not specified or the index does not exist, the new element is\n   * appended to the end of the collection.\n   */\n  @Method()\n  public async addItem(\n    element: HTMLOptGroupElement | HTMLOptionElement,\n    before?: HTMLElement | number,\n  ): Promise<void> {\n    invariant(this.select)\n\n    this.select.add(element, before)\n  }\n\n  /**\n   * Retrieves an element from the options collection by its index.\n   *\n   * @param index Zero-based index of the [`HTMLOptionElement`][] to retrieve.\n   *\n   * [`HTMLOptionElement`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionElement\n   */\n  @Method()\n  public async item(index: number): Promise<HTMLOptionElement | null> {\n    invariant(this.select)\n\n    return this.select.item(index)\n  }\n\n  /**\n   * Retrieves an element from the options collection by its name.\n   *\n   * @param name The `name` or `id` property of the [`HTMLOptionElement`][] to\n   * retrieve.\n   *\n   * [`HTMLOptionElement`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionElement\n   */\n  @Method()\n  public async namedItem(name: string): Promise<HTMLOptionElement | null> {\n    invariant(this.select)\n\n    return this.select.namedItem(name)\n  }\n\n  /**\n   * Removes an element from the options collection.\n   *\n   * @param index Zero-based index of the [`HTMLOptionElement`][] to remove\n   * from the collection. If the index is not found the method has no effect.\n   *\n   * [`HTMLOptionElement`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionElement\n   */\n  @Method()\n  public async removeItem(index: number): Promise<void> {\n    invariant(this.select)\n\n    this.select.remove(index)\n  }\n\n  /**\n   * Sets a custom validity message for the select. If this message is not the\n   * empty string, then the element is considered invalid.\n   */\n  @Method()\n  public async setCustomValidity(message: string): Promise<void> {\n    invariant(this.select)\n\n    this.select.setCustomValidity(message)\n    this.invalid = !this.select.checkValidity()\n  }\n\n  @Watch('disabled')\n  protected disabledChanged(): void {\n    invariant(this.select)\n\n    // Disabled selects are always valid, so we need to recheck validity when\n    // the state changes.\n    this.select.disabled = this.disabled ?? false\n    this.invalid = !this.select.checkValidity()\n  }\n\n  @Watch('value')\n  protected valueChanged(): void {\n    invariant(this.select)\n\n    this.select.value = this.value === null ? '' : String(this.value)\n    this.invalid = !this.select.checkValidity()\n  }\n\n  public componentWillLoad(): void {\n    autoIncrementingId += 1\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.element),\n      ...inheritAttributes(this.element, ['tabindex']),\n    }\n  }\n\n  public render() {\n    return (\n      <div\n        class={{\n          'qds-container': true,\n          'qds-multiple': this.multiple ?? false,\n        }}\n        data-size={this.size}\n      >\n        <select\n          aria-invalid={this.invalid ? 'true' : 'false'}\n          autoComplete={this.autoComplete}\n          // eslint-disable-next-line jsx-a11y/no-autofocus\n          autoFocus={this.autoFocus}\n          class=\"qds-select\"\n          data-size={this.size}\n          disabled={this.disabled}\n          form={this.form}\n          multiple={this.multiple}\n          name={this.name}\n          onBlur={this.onBlur}\n          onChange={this.onChange}\n          onFocus={this.onFocus}\n          onInput={this.onInput}\n          onInvalid={this.onInvalid}\n          ref={this.ref}\n          required={this.required}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.inheritedAttributes}\n        >\n          <slot />\n        </select>\n        {this.multiple !== true && (\n          <qds-icon\n            class=\"qds-icon\"\n            data-size={this.size}\n            library=\"core\"\n            name=\"dropdown\"\n          />\n        )}\n      </div>\n    )\n  }\n\n  private readonly ref = (select?: HTMLSelectElement): void => {\n    this.select = select\n  }\n\n  private readonly onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onChange = (): void => {\n    this.changeEmitter.emit()\n  }\n\n  private readonly onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onInput = (event: InputEvent): void => {\n    invariant(this.select)\n\n    this.value = this.select.value\n\n    this.inputEmitter.emit(pickInputEventAttributes(event))\n  }\n\n  private readonly onInvalid = (): void => {\n    this.invalid = true\n  }\n}\n"],"version":3}
+{"file":"qds-select.js","mappings":"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","names":[],"sources":["src/components/select/select.css?tag=qds-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n}\n\n.qds-container,\n.qds-select {\n  height: 100%;\n}\n\n.qds-container {\n  align-content: flex-start;\n  align-items: center;\n  box-sizing: border-box;\n  display: grid;\n  grid-template-areas: 'select';\n  width: inherit;\n\n  &.qds-multiple {\n    align-content: initial;\n  }\n}\n\n.qds-icon,\n.qds-select,\n::slotted(optgroup),\n::slotted(optgroup > option),\n::slotted(option) {\n  color: var(--qds-theme-control-text-standard);\n}\n\n.qds-icon,\n.qds-select {\n  grid-area: select;\n}\n\n.qds-icon {\n  justify-self: end;\n  margin-inline-end: calc(\n    var(--qds-control-input-padding-horizontal) +\n      var(--qds-control-border-width)\n  );\n  pointer-events: none;\n}\n\n.qds-select {\n  appearance: none;\n  background-color: var(--qds-theme-control-input-background);\n  border-radius: var(--qds-control-border-radius);\n  border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n  margin: 0;\n  padding-block: 0;\n  padding-inline: var(--qds-control-input-padding-horizontal);\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    outline-offset: var(--qds-focus-border-offset);\n  }\n\n  &:not(:focus)[aria-invalid='true'] {\n    border-color: var(--qds-theme-feedback-result-failure);\n  }\n}\n\n.qds-select:disabled,\n.qds-select:disabled + .qds-icon {\n  opacity: var(--qds-theme-disabled);\n}\n\n:is(\n    ::slotted(optgroup),\n    ::slotted(optgroup:not(:disabled) > option),\n    ::slotted(option)\n  ):disabled {\n  opacity: var(--qds-theme-disabled);\n}\n\n::slotted(optgroup) {\n  font: var(--qds-accessory-section-title);\n}\n\n::slotted(optgroup > option),\n::slotted(option) {\n  font: var(--qds-list-item-label-main);\n}\n\n[data-size='small'] {\n  &.qds-select {\n    font: var(--qds-control-small-text);\n\n    &:not([multiple]) {\n      height: var(--qds-control-small-height);\n      padding-inline-end: calc(\n        var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) +\n          var(--qds-control-input-padding-horizontal)\n      );\n    }\n  }\n\n  &.qds-icon {\n    height: var(--qds-control-small-icon-size);\n    width: var(--qds-control-small-icon-size);\n  }\n}\n\n[data-size='standard'] {\n  &.qds-select {\n    font: var(--qds-control-standard-text);\n\n    &:not([multiple]) {\n      height: var(--qds-control-standard-height);\n      padding-inline-end: calc(\n        var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) +\n          var(--qds-control-input-padding-horizontal)\n      );\n    }\n  }\n\n  &.qds-icon {\n    height: var(--qds-control-standard-icon-size);\n    width: var(--qds-control-standard-icon-size);\n  }\n}\n\n[data-size='large'] {\n  &.qds-select {\n    font: var(--qds-control-large-text);\n\n    &:not([multiple]) {\n      height: var(--qds-control-large-height);\n      padding-inline-end: calc(\n        var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) +\n          var(--qds-control-input-padding-horizontal)\n      );\n    }\n  }\n\n  &.qds-icon {\n    height: var(--qds-control-large-icon-size);\n    width: var(--qds-control-large-icon-size);\n  }\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core'\n\nimport type {\n  Attributes,\n  QdsFocusEventDetail,\n  QdsInputEventDetail,\n} from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  inheritAttributes,\n  invariant,\n  pickFocusEventAttributes,\n  pickInputEventAttributes,\n} from '../../helpers'\nimport type { AutoComplete, Value } from '../controls'\n\nexport type SelectSize = 'large' | 'small' | 'standard'\n\nlet autoIncrementingId = 1\n\n/**\n * The `<qds-select>` element represents a control that provides a menu of\n * options.\n *\n * @see https://quartz.se.com/build/components/select\n */\n@Component({\n  tag: 'qds-select',\n  scoped: true,\n  styleUrl: 'select.css',\n})\nexport class Select implements ComponentInterface {\n  /**\n   * Defines if the select is in an invalid state. Validity is determined by\n   * the `required` attribute using [constraint validation][].\n   *\n   * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n   */\n  @Prop({ mutable: true, reflect: true }) public invalid = false\n\n  /**\n   * The select's size.\n   *\n   * > ***NOTE:*** The native [`size` HTML attribute] is not supported. CSS\n   * `height` should be used instead if this functionality is needed.\n   *\n   * [`size` HTML attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size\n   */\n  @Prop({ reflect: true }) public readonly size: SelectSize = 'standard'\n\n  /**\n   * Provides a hint for a [user agent's][] autocomplete feature. See\n   * [the HTML `autocomplete` attribute][] for a complete list of values and\n   * details on how to use `autoComplete`.\n   *\n   * [user agent's]: https://developer.mozilla.org/docs/Glossary/User_agent\n   * [the HTML `autocomplete` attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autocomplete' })\n  public readonly autoComplete?: AutoComplete\n\n  /**\n   * Specify whether the select should have focus when the page loads.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autofocus' }) public readonly autoFocus?: boolean\n\n  /**\n   * Prevents the select from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true, reflect: true }) public disabled?: boolean\n\n  /**\n   * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n   * element to associate the select with (its form owner).\n   *\n   * The value of this attribute must be the id of a `<form>` in the same\n   * document. If this attribute is not set, the `<qds-select>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This attribute lets you associate `<qds-select>` elements to `<form>`s\n   * anywhere in the document, not just inside a `<form>`. It can also override\n   * an ancestor `<form>` element.\n   *\n   * @webnative\n   */\n  @Prop() public readonly form?: string\n\n  /**\n   * Indicates that multiple options can be selected in the list. If it is not\n   * specified, then only one option can be selected at a time. When `multiple`\n   * is specified, most browsers will show a scrolling list box instead of a\n   * single line dropdown.\n   *\n   * @webnative\n   */\n  @Prop({ reflect: true }) public multiple?: boolean\n\n  /**\n   * The name of the input, which is submitted with the form data. An\n   * incrementing input ID is used by default.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name = `qds-input-${autoIncrementingId}`\n\n  /**\n   * An `<option>` with a non-empty string value must be selected before this\n   * select can be submitted.\n   *\n   * See [Client-side validation] and the [HTML attribute: `required`] for more\n   * information.\n   *\n   * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n   * [HTML attribute: `required`]: https://developer.mozilla.org/docs/Web/HTML/Attributes/required\n   *\n   * @webnative\n   */\n  @Prop() public readonly required?: boolean\n\n  /**\n   * The value of the select.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public value?: Value\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when an alteration to the select's value is committed by the\n   * user.\n   */\n  @Event({ eventName: 'qdsChange', cancelable: false })\n  private readonly changeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the select gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the select's value changes.\n   */\n  @Event({ eventName: 'qdsInput', cancelable: false })\n  private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n  @Element() private readonly element!: HTMLQdsSelectElement\n\n  private inheritedAttributes: Attributes = {}\n\n  private select?: HTMLSelectElement\n\n  /**\n   * Adds an element to the options collection.\n   *\n   * @param element The element to add.\n   * @param before An element of the options collection or a zero-based index\n   * representing the item the element should be added before. If this\n   * parameter is not specified or the index does not exist, the new element is\n   * appended to the end of the collection.\n   */\n  @Method()\n  public async addItem(\n    element: HTMLOptGroupElement | HTMLOptionElement,\n    before?: HTMLElement | number,\n  ): Promise<void> {\n    invariant(this.select)\n\n    this.select.add(element, before)\n  }\n\n  /**\n   * Retrieves an element from the options collection by its index.\n   *\n   * @param index Zero-based index of the [`HTMLOptionElement`][] to retrieve.\n   *\n   * [`HTMLOptionElement`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionElement\n   */\n  @Method()\n  public async item(index: number): Promise<HTMLOptionElement | null> {\n    invariant(this.select)\n\n    return this.select.item(index)\n  }\n\n  /**\n   * Retrieves an element from the options collection by its name.\n   *\n   * @param name The `name` or `id` property of the [`HTMLOptionElement`][] to\n   * retrieve.\n   *\n   * [`HTMLOptionElement`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionElement\n   */\n  @Method()\n  public async namedItem(name: string): Promise<HTMLOptionElement | null> {\n    invariant(this.select)\n\n    return this.select.namedItem(name)\n  }\n\n  /**\n   * Removes an element from the options collection.\n   *\n   * @param index Zero-based index of the [`HTMLOptionElement`][] to remove\n   * from the collection. If the index is not found the method has no effect.\n   *\n   * [`HTMLOptionElement`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionElement\n   */\n  @Method()\n  public async removeItem(index: number): Promise<void> {\n    invariant(this.select)\n\n    this.select.remove(index)\n  }\n\n  /**\n   * Sets a custom validity message for the select. If this message is not the\n   * empty string, then the element is considered invalid.\n   */\n  @Method()\n  public async setCustomValidity(message: string): Promise<void> {\n    invariant(this.select)\n\n    this.select.setCustomValidity(message)\n    this.invalid = !this.select.checkValidity()\n  }\n\n  @Watch('disabled')\n  protected disabledChanged(): void {\n    invariant(this.select)\n\n    // Disabled selects are always valid, so we need to recheck validity when\n    // the state changes.\n    this.select.disabled = this.disabled ?? false\n    this.invalid = !this.select.checkValidity()\n  }\n\n  @Watch('value')\n  protected valueChanged(): void {\n    invariant(this.select)\n\n    this.select.value = this.value === null ? '' : String(this.value)\n    this.invalid = !this.select.checkValidity()\n  }\n\n  public componentWillLoad(): void {\n    autoIncrementingId += 1\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.element),\n      ...inheritAttributes(this.element, ['tabindex']),\n    }\n  }\n\n  public render() {\n    return (\n      <div\n        class={{\n          'qds-container': true,\n          'qds-multiple': this.multiple ?? false,\n        }}\n        data-size={this.size}\n      >\n        <select\n          aria-invalid={this.invalid ? 'true' : 'false'}\n          autoComplete={this.autoComplete}\n          // eslint-disable-next-line jsx-a11y/no-autofocus\n          autoFocus={this.autoFocus}\n          class=\"qds-select\"\n          data-size={this.size}\n          disabled={this.disabled}\n          form={this.form}\n          multiple={this.multiple}\n          name={this.name}\n          onBlur={this.onBlur}\n          onChange={this.onChange}\n          onFocus={this.onFocus}\n          onInput={this.onInput}\n          onInvalid={this.onInvalid}\n          ref={this.ref}\n          required={this.required}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.inheritedAttributes}\n        >\n          <slot />\n        </select>\n        {this.multiple !== true && (\n          <qds-icon\n            class=\"qds-icon\"\n            data-size={this.size}\n            library=\"core\"\n            name=\"dropdown\"\n          />\n        )}\n      </div>\n    )\n  }\n\n  private readonly ref = (select?: HTMLSelectElement): void => {\n    this.select = select\n  }\n\n  private readonly onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onChange = (): void => {\n    this.changeEmitter.emit()\n  }\n\n  private readonly onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onInput = (event: InputEvent): void => {\n    invariant(this.select)\n\n    this.value = this.select.value\n\n    this.inputEmitter.emit(pickInputEventAttributes(event))\n  }\n\n  private readonly onInvalid = (): void => {\n    this.invalid = true\n  }\n}\n"],"version":3}

package/dist/cjs/{index-b608df4d.js → index-210f861c.js}

@@ -148,13 +148,13 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
-        // normalize class / classname attributes
         if (vnodeData.key) {
             key = vnodeData.key;
         }
         if (vnodeData.name) {
             slotName = vnodeData.name;
         }
+        // normalize class / className attributes
         {
             const classData = vnodeData.className || vnodeData.class;
             if (classData) {
@@ -400,7 +400,7 @@ const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes
                 }
             }
             else if (childVNode.$hostId$ === hostId) {
-                // this comment node is specifcally for this host id
+                // this comment node is specifically for this host id
                 if (childNodeType === SLOT_NODE_ID) {
                     // `${SLOT_NODE_ID}.${hostId}.${nodeId}.${depth}.${index}.${slotName}`;
                     childVNode.$tag$ = 'slot';
@@ -641,6 +641,21 @@ const convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g
  *
  * Modified for Stencil's compiler and vdom
  */
+/**
+ * When running a VDom render set properties present on a VDom node onto the
+ * corresponding HTML element.
+ *
+ * Note that this function has special functionality for the `class`,
+ * `style`, `key`, and `ref` attributes, as well as event handlers (like
+ * `onClick`, etc). All others are just passed through as-is.
+ *
+ * @param elm the HTMLElement onto which attributes should be set
+ * @param memberName the name of the attribute to set
+ * @param oldValue the old value for the attribute
+ * @param newValue the new value for the attribute
+ * @param isSvg whether we're in an svg context or not
+ * @param flags bitflags for Vdom variables
+ */
 const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
     if (oldValue !== newValue) {
         let isProp = isMemberInElement(elm, memberName);
@@ -1503,17 +1518,44 @@ const nullifyVNodeRefs = (vNode) => {
  * @param hostRef data needed to root and render the virtual DOM tree, such as
  * the DOM node into which it should be rendered.
  * @param renderFnResults the virtual DOM nodes to be rendered
+ * @param isInitialLoad whether or not this is the first call after page load
  */
-const renderVdom = (hostRef, renderFnResults) => {
+const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
     const hostElm = hostRef.$hostElement$;
     const cmpMeta = hostRef.$cmpMeta$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
+    // if `renderFnResults` is a Host node then we can use it directly. If not,
+    // we need to call `h` again to wrap the children of our component in a
+    // 'dummy' Host node (well, an empty vnode) since `renderVdom` assumes
+    // implicitly that the top-level vdom node is 1) an only child and 2)
+    // contains attrs that need to be set on the host element.
     const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
     hostTagName = hostElm.tagName;
     if (cmpMeta.$attrsToReflect$) {
         rootVnode.$attrs$ = rootVnode.$attrs$ || {};
         cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
     }
+    // On the first render and *only* on the first render we want to check for
+    // any attributes set on the host element which are also set on the vdom
+    // node. If we find them, we override the value on the VDom node attrs with
+    // the value from the host element, which allows developers building apps
+    // with Stencil components to override e.g. the `role` attribute on a
+    // component even if it's already set on the `Host`.
+    if (isInitialLoad && rootVnode.$attrs$) {
+        for (const key of Object.keys(rootVnode.$attrs$)) {
+            // We have a special implementation in `setAccessor` for `style` and
+            // `class` which reconciles values coming from the VDom with values
+            // already present on the DOM element, so we don't want to override those
+            // attributes on the VDom tree with values from the host element if they
+            // are present.
+            //
+            // Likewise, `ref` and `key` are special internal values for the Stencil
+            // runtime and we don't want to override those either.
+            if (hostElm.hasAttribute(key) && !['key', 'ref', 'style', 'class'].includes(key)) {
+                rootVnode.$attrs$[key] = hostElm[key];
+            }
+        }
+    }
     rootVnode.$tag$ = null;
     rootVnode.$flags$ |= 4 /* VNODE_FLAGS.isHost */;
     hostRef.$vnode$ = rootVnode;
@@ -1580,7 +1622,7 @@ const renderVdom = (hostRef, renderFnResults) => {
                         // has a different next sibling or parent relocated
                         if (nodeToRelocate !== insertBeforeNode) {
                             if (!nodeToRelocate['s-hn'] && nodeToRelocate['s-ol']) {
-                                // probably a component in the index.html that doesn't have it's hostname set
+                                // probably a component in the index.html that doesn't have its hostname set
                                 nodeToRelocate['s-hn'] = nodeToRelocate['s-ol'].parentNode.nodeName;
                             }
                             // add it back to the dom but in its new home
@@ -1701,6 +1743,16 @@ const enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.th
  */
 const isPromisey = (maybePromise) => maybePromise instanceof Promise ||
     (maybePromise && maybePromise.then && typeof maybePromise.then === 'function');
+/**
+ * Update a component given reference to its host elements and so on.
+ *
+ * @param hostRef an object containing references to the element's host node,
+ * VDom nodes, and other metadata
+ * @param instance a reference to the underlying host element where it will be
+ * rendered
+ * @param isInitialLoad whether or not this function is being called as part of
+ * the first render cycle
+ */
 const updateComponent = async (hostRef, instance, isInitialLoad) => {
     var _a;
     const elm = hostRef.$hostElement$;
@@ -1712,7 +1764,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
     }
     const endRender = createTime('render', hostRef.$cmpMeta$.$tagName$);
     {
-        callRender(hostRef, instance);
+        callRender(hostRef, instance, elm, isInitialLoad);
     }
     if (rc) {
         // ok, so turns out there are some child host elements
@@ -1736,7 +1788,19 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
         }
     }
 };
-const callRender = (hostRef, instance, elm) => {
+/**
+ * Handle making the call to the VDom renderer with the proper context given
+ * various build variables
+ *
+ * @param hostRef an object containing references to the element's host node,
+ * VDom nodes, and other metadata
+ * @param instance a reference to the underlying host element where it will be
+ * rendered
+ * @param elm the Host element for the component
+ * @param isInitialLoad whether or not this function is being called as part of
+ * @returns an empty promise
+ */
+const callRender = (hostRef, instance, elm, isInitialLoad) => {
     try {
         instance = instance.render() ;
         {
@@ -1751,7 +1815,7 @@ const callRender = (hostRef, instance, elm) => {
                 // or we need to update the css class/attrs on the host element
                 // DOM WRITE!
                 {
-                    renderVdom(hostRef, instance);
+                    renderVdom(hostRef, instance, isInitialLoad);
                 }
             }
         }
@@ -1930,12 +1994,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                     //      customElements.define('my-component', MyComponent);
                     //    </script>
                     //  ```
-                    //  In this case if we do not unshadow here and use the value of the shadowing property, attributeChangedCallback
+                    //  In this case if we do not un-shadow here and use the value of the shadowing property, attributeChangedCallback
                     //  will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value")
                     //  to the value that was set inline i.e. "some-value" from above example. When
-                    //  the connectedCallback attempts to unshadow it will use "some-value" as the initial value rather than "another-value"
+                    //  the connectedCallback attempts to un-shadow it will use "some-value" as the initial value rather than "another-value"
                     //
-                    //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/unshadowed
+                    //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/un-shadowed
                     //  by connectedCallback as this attributeChangedCallback will not fire.
                     //
                     //  https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
@@ -2052,6 +2116,8 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
         schedule();
     }
 };
+const fireConnectedCallback = (instance) => {
+};
 const connectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
@@ -2119,6 +2185,11 @@ const connectedCallback = (elm) => {
             // reattach any event listeners to the host
             // since they would have been removed when disconnected
             addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
+            // fire off connectedCallback() on component instance
+            if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) ;
+            else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
+                hostRef.$onReadyPromise$.then(() => fireConnectedCallback());
+            }
         }
         endConnected();
     }
@@ -2134,18 +2205,25 @@ const setContentReference = (elm) => {
     contentRefElm['s-cn'] = true;
     elm.insertBefore(contentRefElm, elm.firstChild);
 };
-const disconnectedCallback = (elm) => {
+const disconnectInstance = (instance) => {
+    {
+        safeCall(instance, 'disconnectedCallback');
+    }
+};
+const disconnectedCallback = async (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
-        const instance = hostRef.$lazyInstance$ ;
         {
             if (hostRef.$rmListeners$) {
                 hostRef.$rmListeners$.map((rmListener) => rmListener());
                 hostRef.$rmListeners$ = undefined;
             }
         }
-        {
-            safeCall(instance, 'disconnectedCallback');
+        if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) {
+            disconnectInstance(hostRef.$lazyInstance$);
+        }
+        else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
+            hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$));
         }
     }
 };
@@ -2418,4 +2496,4 @@ exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;
 exports.setNonce = setNonce;
 
-//# sourceMappingURL=index-b608df4d.js.map
+//# sourceMappingURL=index-210f861c.js.map