@patternfly/elements 2.4.0 → 3.0.1

package/pf-switch/BaseSwitch.js

@@ -1,68 +1,78 @@
-var _BaseSwitch_instances, _BaseSwitch_internals, _BaseSwitch_initiallyDisabled, _BaseSwitch_onClick, _BaseSwitch_onKeyup, _BaseSwitch_toggle, _BaseSwitch_updateLabels;
+var _BaseSwitch_instances, _BaseSwitch_internals, _BaseSwitch_onClick, _BaseSwitch_onKeyup, _BaseSwitch_onKeyDown, _BaseSwitch_toggle, _BaseSwitch_updateLabels;
 import { __classPrivateFieldGet, __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators/property.js';
+import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
 import { css } from "lit";
-const styles = css `:host{display:inline-block}svg{fill:currentcolor}[hidden]{display:none!important}:host(:disabled){pointer-events:none;cursor:not-allowed}:host(:disabled) #container{cursor:not-allowed}:host(:disabled:focus-within) #container{outline:0}#container{position:relative;display:inline-flex;align-items:center}#container::before{position:absolute;display:block;content:""}`;
+const styles = css `:host {\n  display: inline-block;\n}\n\nsvg {\n  fill: currentcolor;\n}\n\n[hidden] {\n  display: none !important;\n}\n\n:host(:disabled) {\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n:host(:disabled) #container {\n  cursor: not-allowed;\n}\n\n:host(:disabled:is(:focus,:focus-within)) {\n  outline: none;\n}\n\n#container {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n#container::before {\n  position: absolute;\n  display: block;\n  content: "";\n}\n`;
 /**
  * Switch
  */
-class BaseSwitch extends LitElement {
+export class BaseSwitch extends LitElement {
     constructor() {
         super(...arguments);
         _BaseSwitch_instances.add(this);
-        _BaseSwitch_internals.set(this, this.attachInternals());
-        _BaseSwitch_initiallyDisabled.set(this, this.hasAttribute('disabled'));
+        _BaseSwitch_internals.set(this, InternalsController.of(this, { role: 'switch' }));
         this.showCheckIcon = false;
         this.checked = false;
-        this.disabled = __classPrivateFieldGet(this, _BaseSwitch_initiallyDisabled, "f");
+        this.disabled = false;
     }
     get labels() {
         return __classPrivateFieldGet(this, _BaseSwitch_internals, "f").labels;
     }
     connectedCallback() {
         super.connectedCallback();
-        this.setAttribute('role', 'checkbox');
+        this.tabIndex = 0;
         this.addEventListener('click', __classPrivateFieldGet(this, _BaseSwitch_instances, "m", _BaseSwitch_onClick));
         this.addEventListener('keyup', __classPrivateFieldGet(this, _BaseSwitch_instances, "m", _BaseSwitch_onKeyup));
+        this.addEventListener('keydown', __classPrivateFieldGet(this, _BaseSwitch_instances, "m", _BaseSwitch_onKeyDown));
         __classPrivateFieldGet(this, _BaseSwitch_instances, "m", _BaseSwitch_updateLabels).call(this);
     }
     formDisabledCallback(disabled) {
         this.disabled = disabled;
-        this.requestUpdate();
     }
     render() {
         return html `
-      <div id="container" tabindex="0">
-        <svg id="toggle" fill="currentColor" height="1em" width="1em" viewBox="0 0 512 512">
-          <path ?hidden=${!this.showCheckIcon} d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" />
+      <div id="container">
+        <svg id="toggle"
+             role="presentation"
+             fill="currentColor"
+             height="1em"
+             width="1em"
+             viewBox="0 0 512 512"
+             ?hidden=${!this.showCheckIcon}>
+          <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" />
         </svg>
       </div>
     `;
     }
-    updated() {
-        __classPrivateFieldGet(this, _BaseSwitch_internals, "f").ariaChecked = String(this.checked);
-        __classPrivateFieldGet(this, _BaseSwitch_internals, "f").ariaDisabled = String(this.disabled);
+    willUpdate() {
+        __classPrivateFieldGet(this, _BaseSwitch_internals, "f").ariaChecked = String(!!this.checked);
+        __classPrivateFieldGet(this, _BaseSwitch_internals, "f").ariaDisabled = String(!!this.disabled);
     }
 }
-_BaseSwitch_internals = new WeakMap(), _BaseSwitch_initiallyDisabled = new WeakMap(), _BaseSwitch_instances = new WeakSet(), _BaseSwitch_onClick = function _BaseSwitch_onClick(event) {
+_BaseSwitch_internals = new WeakMap(), _BaseSwitch_instances = new WeakSet(), _BaseSwitch_onClick = function _BaseSwitch_onClick(event) {
     // @ts-expect-error: firefox workarounds for double-firing in the case of switch nested in label
     const { originalTarget, explicitOriginalTarget } = event;
     if (explicitOriginalTarget) {
         let labels;
-        if (originalTarget === event.target &&
-            !(labels = Array.from(this.labels)).includes(explicitOriginalTarget) &&
-            labels.includes(this.closest('label'))) {
+        if (originalTarget === event.target
+            && !(labels = Array.from(this.labels)).includes(explicitOriginalTarget)
+            && labels.includes(this.closest('label'))) {
             return;
         }
     }
     __classPrivateFieldGet(this, _BaseSwitch_instances, "m", _BaseSwitch_toggle).call(this);
 }, _BaseSwitch_onKeyup = function _BaseSwitch_onKeyup(event) {
-    switch (event.key) {
-        case ' ':
-        case 'Enter':
-            event.preventDefault();
-            __classPrivateFieldGet(this, _BaseSwitch_instances, "m", _BaseSwitch_toggle).call(this);
+    if (event.key === ' ' || event.key === 'Enter') {
+        event.preventDefault();
+        event.stopPropagation();
+        __classPrivateFieldGet(this, _BaseSwitch_instances, "m", _BaseSwitch_toggle).call(this);
+    }
+}, _BaseSwitch_onKeyDown = function _BaseSwitch_onKeyDown(event) {
+    if (event.key === ' ') {
+        event.preventDefault();
+        event.stopPropagation();
     }
 }, _BaseSwitch_toggle = function _BaseSwitch_toggle() {
     if (this.disabled) {
@@ -73,14 +83,16 @@ _BaseSwitch_internals = new WeakMap(), _BaseSwitch_initiallyDisabled = new WeakM
     this.dispatchEvent(new Event('change', { bubbles: true }));
 }, _BaseSwitch_updateLabels = function _BaseSwitch_updateLabels() {
     const labelState = this.checked ? 'on' : 'off';
-    if (this.labels.length > 1) {
-        for (const label of this.labels) {
-            label.hidden = label.dataset.state !== labelState;
-        }
-    }
+    this.labels.forEach(label => {
+        const states = label.querySelectorAll('[data-state]');
+        states.forEach(state => {
+            if (state) {
+                state.hidden = state.dataset.state !== labelState;
+            }
+        });
+    });
 };
 BaseSwitch.styles = [styles];
-BaseSwitch.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true, };
 BaseSwitch.formAssociated = true;
 __decorate([
     property({ reflect: true })
@@ -91,5 +103,7 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], BaseSwitch.prototype, "checked", void 0);
-export { BaseSwitch };
+__decorate([
+    property({ reflect: true, type: Boolean })
+], BaseSwitch.prototype, "disabled", void 0);
 //# sourceMappingURL=BaseSwitch.js.map

package/pf-switch/BaseSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSwitch.js","sourceRoot":"","sources":["BaseSwitch.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport styles from './BaseSwitch.css';\n\n/**\n * Switch\n */\nexport abstract class BaseSwitch extends LitElement {\n  static readonly styles = [styles];\n\n  static readonly shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true, };\n\n  static readonly formAssociated = true;\n\n  declare shadowRoot: ShadowRoot;\n\n  #internals = this.attachInternals();\n\n  #initiallyDisabled = this.hasAttribute('disabled');\n\n  @property({ reflect: true }) label?: string;\n\n  @property({ reflect: true, type: Boolean, attribute: 'show-check-icon' }) showCheckIcon = false;\n\n  @property({ reflect: true, type: Boolean }) checked = false;\n\n  disabled = this.#initiallyDisabled;\n\n  get labels(): NodeListOf<HTMLLabelElement> {\n    return this.#internals.labels as NodeListOf<HTMLLabelElement>;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'checkbox');\n    this.addEventListener('click', this.#onClick);\n    this.addEventListener('keyup', this.#onKeyup);\n    this.#updateLabels();\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.disabled = disabled;\n    this.requestUpdate();\n  }\n\n  override render() {\n    return html`\n      <div id=\"container\" tabindex=\"0\">\n        <svg id=\"toggle\" fill=\"currentColor\" height=\"1em\" width=\"1em\" viewBox=\"0 0 512 512\">\n          <path ?hidden=${!this.showCheckIcon} d=\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\" />\n        </svg>\n      </div>\n    `;\n  }\n\n  override updated() {\n    this.#internals.ariaChecked = String(this.checked);\n    this.#internals.ariaDisabled = String(this.disabled);\n  }\n\n  #onClick(event: Event) {\n    // @ts-expect-error: firefox workarounds for double-firing in the case of switch nested in label\n    const { originalTarget, explicitOriginalTarget } = event;\n    if (explicitOriginalTarget) {\n      let labels: HTMLLabelElement[];\n      if (\n        originalTarget === event.target &&\n        !(labels = Array.from(this.labels)).includes(explicitOriginalTarget) &&\n        labels.includes(this.closest('label') as HTMLLabelElement)\n      ) {\n        return;\n      }\n    }\n    this.#toggle();\n  }\n\n  #onKeyup(event: KeyboardEvent) {\n    switch (event.key) {\n      case ' ':\n      case 'Enter':\n        event.preventDefault();\n        this.#toggle();\n    }\n  }\n\n  #toggle() {\n    if (this.disabled) {\n      return;\n    }\n\n    this.checked = !this.checked;\n    this.#updateLabels();\n    this.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  #updateLabels() {\n    const labelState = this.checked ? 'on' : 'off';\n    if (this.labels.length > 1) {\n      for (const label of this.labels) {\n        label.hidden = label.dataset.state !== labelState;\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"BaseSwitch.js","sourceRoot":"","sources":["BaseSwitch.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;;;AAG/F;;GAEG;AACH,MAAM,OAAgB,UAAW,SAAQ,UAAU;IAAnD;;;QAOE,gCAAa,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAC;QAIY,kBAAa,GAAG,KAAK,CAAC;QAEpD,YAAO,GAAG,KAAK,CAAC;QAEhB,aAAQ,GAAG,KAAK,CAAC;IA4F/D,CAAC;IA1FC,IAAI,MAAM;QACR,OAAO,uBAAA,IAAI,6BAAW,CAAC,MAAsC,CAAC;IAChE,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;QAClB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,kDAAS,CAAC,CAAC;QAC9C,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,kDAAS,CAAC,CAAC;QAC9C,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,uBAAA,IAAI,oDAAW,CAAC,CAAC;QAClD,uBAAA,IAAI,uDAAc,MAAlB,IAAI,CAAgB,CAAC;IACvB,CAAC;IAED,oBAAoB,CAAC,QAAiB;QACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC3B,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;;;uBAQQ,CAAC,IAAI,CAAC,aAAa;;;;KAIrC,CAAC;IACJ,CAAC;IAEQ,UAAU;QACjB,uBAAA,IAAI,6BAAW,CAAC,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACrD,uBAAA,IAAI,6BAAW,CAAC,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACzD,CAAC;;iIAEQ,KAAY;IACnB,gGAAgG;IAChG,MAAM,EAAE,cAAc,EAAE,sBAAsB,EAAE,GAAG,KAAK,CAAC;IACzD,IAAI,sBAAsB,EAAE,CAAC;QAC3B,IAAI,MAA0B,CAAC;QAC/B,IACE,cAAc,KAAK,KAAK,CAAC,MAAM;eAC5B,CAAC,CAAC,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,sBAAsB,CAAC;eACpE,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAqB,CAAC,EAC7D,CAAC;YACD,OAAO;QACT,CAAC;IACH,CAAC;IACD,uBAAA,IAAI,iDAAQ,MAAZ,IAAI,CAAU,CAAC;AACjB,CAAC,qDAEQ,KAAoB;IAC3B,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;QAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,uBAAA,IAAI,iDAAQ,MAAZ,IAAI,CAAU,CAAC;IACjB,CAAC;AACH,CAAC,yDAEU,KAAoB;IAC7B,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;QACtB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IAC1B,CAAC;AACH,CAAC;IAGC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,OAAO;IACT,CAAC;IAED,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,uBAAA,IAAI,uDAAc,MAAlB,IAAI,CAAgB,CAAC;IACrB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AAC7D,CAAC;IAGC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAC/C,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QAC1B,MAAM,MAAM,GAAG,KAAK,CAAC,gBAAgB,CAAc,cAAc,CAAC,CAAC;QACnE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACrB,IAAI,KAAK,EAAE,CAAC;gBACV,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,KAAK,UAAU,CAAC;YACpD,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC;AAzGe,iBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAElB,yBAAc,GAAG,IAAI,AAAP,CAAQ;AAMT;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAgB;AAE8B;IAAzE,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;iDAAuB;AAEpD;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAiB;AAEhB;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAkB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport styles from './BaseSwitch.css';\n/**\n * Switch\n */\nexport abstract class BaseSwitch extends LitElement {\n  static readonly styles = [styles];\n\n  static readonly formAssociated = true;\n\n  declare shadowRoot: ShadowRoot;\n\n  #internals = InternalsController.of(this, { role: 'switch' });\n\n  @property({ reflect: true }) label?: string;\n\n  @property({ reflect: true, type: Boolean, attribute: 'show-check-icon' }) showCheckIcon = false;\n\n  @property({ reflect: true, type: Boolean }) checked = false;\n\n  @property({ reflect: true, type: Boolean }) disabled = false;\n\n  get labels(): NodeListOf<HTMLLabelElement> {\n    return this.#internals.labels as NodeListOf<HTMLLabelElement>;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.tabIndex = 0;\n    this.addEventListener('click', this.#onClick);\n    this.addEventListener('keyup', this.#onKeyup);\n    this.addEventListener('keydown', this.#onKeyDown);\n    this.#updateLabels();\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.disabled = disabled;\n  }\n\n  override render() {\n    return html`\n      <div id=\"container\">\n        <svg id=\"toggle\"\n             role=\"presentation\"\n             fill=\"currentColor\"\n             height=\"1em\"\n             width=\"1em\"\n             viewBox=\"0 0 512 512\"\n             ?hidden=${!this.showCheckIcon}>\n          <path d=\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\" />\n        </svg>\n      </div>\n    `;\n  }\n\n  override willUpdate() {\n    this.#internals.ariaChecked = String(!!this.checked);\n    this.#internals.ariaDisabled = String(!!this.disabled);\n  }\n\n  #onClick(event: Event) {\n    // @ts-expect-error: firefox workarounds for double-firing in the case of switch nested in label\n    const { originalTarget, explicitOriginalTarget } = event;\n    if (explicitOriginalTarget) {\n      let labels: HTMLLabelElement[];\n      if (\n        originalTarget === event.target\n        && !(labels = Array.from(this.labels)).includes(explicitOriginalTarget)\n        && labels.includes(this.closest('label') as HTMLLabelElement)\n      ) {\n        return;\n      }\n    }\n    this.#toggle();\n  }\n\n  #onKeyup(event: KeyboardEvent) {\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.#toggle();\n    }\n  }\n\n  #onKeyDown(event: KeyboardEvent) {\n    if (event.key === ' ') {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  #toggle() {\n    if (this.disabled) {\n      return;\n    }\n\n    this.checked = !this.checked;\n    this.#updateLabels();\n    this.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  #updateLabels() {\n    const labelState = this.checked ? 'on' : 'off';\n    this.labels.forEach(label => {\n      const states = label.querySelectorAll<HTMLElement>('[data-state]');\n      states.forEach(state => {\n        if (state) {\n          state.hidden = state.dataset.state !== labelState;\n        }\n      });\n    });\n  }\n}\n"]}

package/pf-switch/pf-switch.css

@@ -82,7 +82,11 @@
     var(--pf-c-switch__toggle--before--Transition, translate .25s ease 0s)); ;
 }
 
-:host(:focus-within) #container {
+:host {
+  outline: none;
+}
+
+:host(:is(:focus,:focus-within)) #container {
   outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth,
     var(--pf-global--BorderWidth--md, 2px)) solid var(--pf-c-switch__input--focus__toggle--OutlineColor,
       var(--pf-global--primary-color--100, #06c));

package/pf-switch/pf-switch.d.ts

@@ -38,7 +38,7 @@ import { BaseSwitch } from './BaseSwitch.js';
  * @cssprop {<length>} --pf-c-switch__toggle--Width {@default `calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))`}
  */
 export declare class PfSwitch extends BaseSwitch {
-    static readonly styles: import("lit").CSSResult[];
+    static readonly styles: CSSStyleSheet[];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-switch/pf-switch.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators/custom-element.js';
 import { BaseSwitch } from './BaseSwitch.js';
 import { css } from "lit";
-const styles = css `:host([checked]) #container{color:var(--pf-c-switch__input--checked__label--Color,var(--pf-global--Color--dark-100,#151515));background-color:var(--pf-c-switch__input--checked__toggle--BackgroundColor,var(--pf-global--primary-color--100,#06c))}:host([checked]) #container::before{translate:var(--pf-c-switch__input--checked__toggle--before--TranslateX,calc(100% + var(--pf-c-switch__toggle-icon--Offset,0.125rem)))}:host(:disabled) #container{color:var(--pf-c-switch__input--disabled__label--Color,var(--pf-global--disabled-color--100,#6a6e73));background-color:var(--pf-c-switch__input--disabled__toggle--BackgroundColor,var(--pf-global--disabled-color--200,#d2d2d2))}:host(:disabled) #container::before{background-color:var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor,var(--pf-global--palette--black-150,#f5f5f5))}:host([checked]:disabled) #container::before{translate:var(--pf-c-switch__input--checked__toggle--before--TranslateX,calc(100% + var(--pf-c-switch__toggle-icon--Offset,0.125rem)))}#container{width:var(--pf-c-switch__toggle--Width,calc(var(--pf-c-switch__toggle--Height,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) * var(--pf-c-switch--LineHeight,var(--pf-global--LineHeight--md,1.5)))) + var(--pf-c-switch__toggle-icon--Offset,.125rem) + var(--pf-c-switch__toggle--before--Width,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) - var(--pf-c-switch__toggle-icon--Offset,.125rem)))));height:var(--pf-c-switch__toggle--Height,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) * var(--pf-c-switch--LineHeight,var(--pf-global--LineHeight--md,1.5))));background-color:var(--pf-c-switch__toggle--BackgroundColor,var(--pf-global--palette--black-500,#8a8d90));border-radius:var(--pf-c-switch__toggle--BorderRadius,var(--pf-c-switch__toggle--Height,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) * var(--pf-c-switch--LineHeight,var(--pf-global--LineHeight--md,1.5)))))}#container::before{top:var(--pf-c-switch__toggle--before--Top,calc((var(--pf-c-switch__toggle--Height,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) * var(--pf-c-switch--LineHeight,var(--pf-global--LineHeight--md,1.5)))) - var(--pf-c-switch__toggle--before--Height,var(--pf-c-switch__toggle--before--Width,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) - var(--pf-c-switch__toggle-icon--Offset,.125rem)))))/ 2));left:var(--pf-c-switch__toggle--before--Left,var(--pf-c-switch__toggle--before--Top,calc((var(--pf-c-switch__toggle--Height,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) * var(--pf-c-switch--LineHeight,var(--pf-global--LineHeight--md,1.5)))) - var(--pf-c-switch__toggle--before--Height,var(--pf-c-switch__toggle--before--Width,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) - var(--pf-c-switch__toggle-icon--Offset,.125rem)))))/ 2)));width:var(--pf-c-switch__toggle--before--Width,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) - var(--pf-c-switch__toggle-icon--Offset,.125rem)));height:var(--pf-c-switch__toggle--before--Height,var(--pf-c-switch__toggle--before--Width,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) - var(--pf-c-switch__toggle-icon--Offset,.125rem))));background-color:var(--pf-c-switch__toggle--before--backgroundcolor,var(--pf-global--backgroundcolor--100,#fff));border-radius:var(--pf-c-switch__toggle--before--BorderRadius,var(--pf-global--BorderRadius--lg,30em));box-shadow:var(--pf-c-switch__toggle--before--BoxShadow,var(--pf-global--BoxShadow--md,0 .25rem .5rem 0 rgba(3,3,3,.12),0 0 .25rem 0 rgba(3,3,3,.06)));transition:var(--pf-c-switch__toggle--before--Transition,\n    var(--pf-c-switch__toggle--before--Transition, translate .25s ease 0s))}:host(:focus-within) #container{outline:var(--pf-c-switch__input--focus__toggle--OutlineWidth,var(--pf-global--BorderWidth--md,2px)) solid var(--pf-c-switch__input--focus__toggle--OutlineColor,var(--pf-global--primary-color--100,#06c));outline-offset:var(--pf-c-switch__input--focus__toggle--OutlineOffset,var(--pf-global--spacer--sm,0.5rem))}svg{margin-inline:var(--pf-c-switch__toggle-icon--Left,calc(var(--pf-c-switch--FontSize,var(--pf-global--FontSize--md,1rem)) * .4));font-size:var(--pf-c-switch__toggle-icon--FontSize,\n    calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) * .625));color:var(--pf-c-switch__toggle-icon--Color,var(--pf-global--Color--light-100,#fff))}`;
+const styles = css `:host([checked]) #container {\n  color: var(--pf-c-switch__input--checked__label--Color,\n    var(--pf-global--Color--dark-100, #151515));\n  background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor,\n    var(--pf-global--primary-color--100, #06c));\n}\n\n:host([checked]) #container::before {\n  translate: var(--pf-c-switch__input--checked__toggle--before--TranslateX,\n    calc(100% + var(--pf-c-switch__toggle-icon--Offset, 0.125rem)));\n}\n\n:host(:disabled) #container {\n  color: var(--pf-c-switch__input--disabled__label--Color,\n    var(--pf-global--disabled-color--100, #6a6e73));\n  background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor,\n    var(--pf-global--disabled-color--200, #d2d2d2));\n}\n\n:host(:disabled) #container::before {\n  background-color: var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor,\n    var(--pf-global--palette--black-150, #f5f5f5));\n}\n\n:host([checked]:disabled) #container::before {\n  translate: var(--pf-c-switch__input--checked__toggle--before--TranslateX,\n    calc(100% + var(--pf-c-switch__toggle-icon--Offset, 0.125rem)));\n}\n\n#container {\n  width: var(--pf-c-switch__toggle--Width,\n    calc(var(--pf-c-switch__toggle--Height,\n      calc(var(--pf-c-switch--FontSize,\n        var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n          var(--pf-global--LineHeight--md, 1.5)))) + var(--pf-c-switch__toggle-icon--Offset, 0.125rem) + var(--pf-c-switch__toggle--before--Width,\n            calc(var(--pf-c-switch--FontSize,\n              var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem)))));\n  height: var(--pf-c-switch__toggle--Height,\n    calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n        var(--pf-global--LineHeight--md, 1.5))));\n  background-color: var(--pf-c-switch__toggle--BackgroundColor,\n    var(--pf-global--palette--black-500, #8a8d90));\n  border-radius: var(--pf-c-switch__toggle--BorderRadius,\n    var(--pf-c-switch__toggle--Height, calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n        var(--pf-global--LineHeight--md, 1.5)))));\n}\n\n#container::before {\n  top: var(--pf-c-switch__toggle--before--Top,\n    calc((var(--pf-c-switch__toggle--Height,\n      calc(var(--pf-c-switch--FontSize,\n        var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n          var(--pf-global--LineHeight--md, 1.5)))) - var(--pf-c-switch__toggle--before--Height,\n            var(--pf-c-switch__toggle--before--Width,\n              calc(var(--pf-c-switch--FontSize,\n                var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))))) / 2));\n  left: var(--pf-c-switch__toggle--before--Left,\n    var(--pf-c-switch__toggle--before--Top,\n      calc((var(--pf-c-switch__toggle--Height,\n        calc(var(--pf-c-switch--FontSize,\n          var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,\n            var(--pf-global--LineHeight--md, 1.5)))) - var(--pf-c-switch__toggle--before--Height,\n              var(--pf-c-switch__toggle--before--Width,\n                calc(var(--pf-c-switch--FontSize,\n                  var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))))) / 2)));\n  width: var(--pf-c-switch__toggle--before--Width,\n    calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem)));\n  height: var(--pf-c-switch__toggle--before--Height,\n    var(--pf-c-switch__toggle--before--Width,\n      calc(var(--pf-c-switch--FontSize,\n        var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))));\n  background-color: var(--pf-c-switch__toggle--before--backgroundcolor,\n    var(--pf-global--backgroundcolor--100, #fff));\n  border-radius: var(--pf-c-switch__toggle--before--BorderRadius,\n    var(--pf-global--BorderRadius--lg, 30em));\n  box-shadow: var(--pf-c-switch__toggle--before--BoxShadow,\n    var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)));\n  transition: var(--pf-c-switch__toggle--before--Transition,\n    var(--pf-c-switch__toggle--before--Transition, translate .25s ease 0s)); ;\n}\n\n:host {\n  outline: none;\n}\n\n:host(:is(:focus,:focus-within)) #container {\n  outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth,\n    var(--pf-global--BorderWidth--md, 2px)) solid var(--pf-c-switch__input--focus__toggle--OutlineColor,\n      var(--pf-global--primary-color--100, #06c));\n  outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset,\n    var(--pf-global--spacer--sm, 0.5rem));\n}\n\nsvg {\n  margin-inline: var(--pf-c-switch__toggle-icon--Left,\n    calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) * .4));\n  font-size: var(--pf-c-switch__toggle-icon--FontSize,\n    calc(var(--pf-c-switch--FontSize,\n      var(--pf-global--FontSize--md, 1rem)) * .625));\n  color: var(--pf-c-switch__toggle-icon--Color,\n    var(--pf-global--Color--light-100, #fff));\n}\n`;
 /**
  * A **switch** toggles the state of a setting (between on and off). Switches and
  * checkboxes can often be used interchangeably, but the switch provides a more

package/pf-switch/pf-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-switch.js","sourceRoot":"","sources":["pf-switch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;;AAG7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAGH,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;;AACtB,eAAM,GAAG,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,AAAjC,CAAkC;AAD7C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAEpB;SAFY,QAAQ","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\n\nimport { BaseSwitch } from './BaseSwitch.js';\nimport styles from './pf-switch.css';\n\n/**\n * A **switch** toggles the state of a setting (between on and off). Switches and\n * checkboxes can often be used interchangeably, but the switch provides a more\n * explicit, visible representation on a setting.\n *\n * @fires {Event} change - Fires when the switch selection changes.\n *\n * @cssprop --pf-c-switch--FontSize {@default `1rem`}\n * @cssprop {<length>} --pf-c-switch--ColumnGap {@default `1rem`}\n * @cssprop --pf-c-switch__toggle-icon--FontSize {@default `calc(1rem * .625)`}\n * @cssprop {<color>} --pf-c-switch__toggle-icon--Color {@default `#fff`}\n * @cssprop {<length>} --pf-c-switch__toggle-icon--Left {@default `1rem`}\n * @cssprop {<length>} --pf-c-switch__toggle-icon--Offset {@default `0.125rem`}\n * @cssprop {<number>} --pf-c-switch--LineHeight {@default `1.5`}\n * @cssprop {<length>} --pf-c-switch--Height {@default `auto`}\n * @cssprop {<color>} --pf-c-switch__input--checked__toggle--BackgroundColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-switch__input--checked__toggle--before--TranslateX {@default `calc(100% + 0.125rem)`}\n * @cssprop {<color>} --pf-c-switch__input--checked__label--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-switch__input--not-checked__label--Color {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-switch__input--disabled__label--Color {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-switch__input--disabled__toggle--BackgroundColor {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-switch__input--disabled__toggle--before--BackgroundColor {@default `#f5f5f5`}\n * @cssprop {<length>} --pf-c-switch__input--focus__toggle--OutlineWidth {@default `2px`}\n * @cssprop {<length>} --pf-c-switch__input--focus__toggle--OutlineOffset {@default `0.5rem`}\n * @cssprop {<color>} --pf-c-switch__input--focus__toggle--OutlineColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-switch__toggle--Height {@default `calc(1rem * 1.5)`}\n * @cssprop {<color>} --pf-c-switch__toggle--BackgroundColor {@default `#8a8d90`}\n * @cssprop {<length>} --pf-c-switch__toggle--BorderRadius {@default `calc(1rem * 1.5)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Width {@default `calc(1rem - 0.125rem)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Height {@default `calc(1rem - 0.125rem)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Top {@default calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Left {@default `calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`}\n * @cssprop {<color>} --pf-c-switch__toggle--before--BackgroundColor {@default `#fff`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--BorderRadius {@default `30em`}\n * @cssprop --pf-c-switch__toggle--before--BoxShadow {@default `0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)`}\n * @cssprop --pf-c-switch__toggle--before--Transition {@default `transform .25s ease 0s`}\n * @cssprop {<length>} --pf-c-switch__toggle--Width {@default `calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))`}\n */\n\n@customElement('pf-switch')\nexport class PfSwitch extends BaseSwitch {\n  static readonly styles = [...BaseSwitch.styles, styles];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-switch': PfSwitch;\n  }\n}\n"]}
+{"version":3,"file":"pf-switch.js","sourceRoot":"","sources":["pf-switch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;;AAG7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAGI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;;AACtB,eAAM,GAAG,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,AAAjC,CAAkC;AAD7C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAEpB","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\n\nimport { BaseSwitch } from './BaseSwitch.js';\nimport styles from './pf-switch.css';\n\n/**\n * A **switch** toggles the state of a setting (between on and off). Switches and\n * checkboxes can often be used interchangeably, but the switch provides a more\n * explicit, visible representation on a setting.\n *\n * @fires {Event} change - Fires when the switch selection changes.\n *\n * @cssprop --pf-c-switch--FontSize {@default `1rem`}\n * @cssprop {<length>} --pf-c-switch--ColumnGap {@default `1rem`}\n * @cssprop --pf-c-switch__toggle-icon--FontSize {@default `calc(1rem * .625)`}\n * @cssprop {<color>} --pf-c-switch__toggle-icon--Color {@default `#fff`}\n * @cssprop {<length>} --pf-c-switch__toggle-icon--Left {@default `1rem`}\n * @cssprop {<length>} --pf-c-switch__toggle-icon--Offset {@default `0.125rem`}\n * @cssprop {<number>} --pf-c-switch--LineHeight {@default `1.5`}\n * @cssprop {<length>} --pf-c-switch--Height {@default `auto`}\n * @cssprop {<color>} --pf-c-switch__input--checked__toggle--BackgroundColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-switch__input--checked__toggle--before--TranslateX {@default `calc(100% + 0.125rem)`}\n * @cssprop {<color>} --pf-c-switch__input--checked__label--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-switch__input--not-checked__label--Color {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-switch__input--disabled__label--Color {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-switch__input--disabled__toggle--BackgroundColor {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-switch__input--disabled__toggle--before--BackgroundColor {@default `#f5f5f5`}\n * @cssprop {<length>} --pf-c-switch__input--focus__toggle--OutlineWidth {@default `2px`}\n * @cssprop {<length>} --pf-c-switch__input--focus__toggle--OutlineOffset {@default `0.5rem`}\n * @cssprop {<color>} --pf-c-switch__input--focus__toggle--OutlineColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-switch__toggle--Height {@default `calc(1rem * 1.5)`}\n * @cssprop {<color>} --pf-c-switch__toggle--BackgroundColor {@default `#8a8d90`}\n * @cssprop {<length>} --pf-c-switch__toggle--BorderRadius {@default `calc(1rem * 1.5)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Width {@default `calc(1rem - 0.125rem)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Height {@default `calc(1rem - 0.125rem)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Top {@default calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Left {@default `calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`}\n * @cssprop {<color>} --pf-c-switch__toggle--before--BackgroundColor {@default `#fff`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--BorderRadius {@default `30em`}\n * @cssprop --pf-c-switch__toggle--before--BoxShadow {@default `0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)`}\n * @cssprop --pf-c-switch__toggle--before--Transition {@default `transform .25s ease 0s`}\n * @cssprop {<length>} --pf-c-switch__toggle--Width {@default `calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))`}\n */\n\n@customElement('pf-switch')\nexport class PfSwitch extends BaseSwitch {\n  static readonly styles = [...BaseSwitch.styles, styles];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-switch': PfSwitch;\n  }\n}\n"]}

package/pf-switch/test/pf-switch.e2e.d.ts

@@ -0,0 +1 @@
+export {};

package/pf-switch/test/pf-switch.e2e.js

@@ -0,0 +1,11 @@
+import { test } from '@playwright/test';
+import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+const tagName = 'pf-switch';
+test.describe(tagName, () => {
+    test('snapshot', async ({ page }) => {
+        const componentPage = new PfeDemoPage(page, tagName);
+        await componentPage.navigate();
+        await componentPage.snapshot();
+    });
+});
+//# sourceMappingURL=pf-switch.e2e.js.map

package/pf-switch/test/pf-switch.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-switch.e2e.js","sourceRoot":"","sources":["pf-switch.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,WAAW,CAAC;AAE5B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-switch';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n});\n"]}

package/pf-switch/test/pf-switch.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/pf-switch/test/pf-switch.spec.js

@@ -0,0 +1,191 @@
+import { expect, html, nextFrame } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { PfSwitch } from '@patternfly/elements/pf-switch/pf-switch.js';
+describe('<pf-switch>', function () {
+    it('imperatively instantiates', function () {
+        expect(document.createElement('pf-switch')).to.be.an.instanceof(PfSwitch);
+    });
+    describe('simply instantiating', function () {
+        let element;
+        let snapshot;
+        beforeEach(async function () {
+            const container = await createFixture(html `
+        <div>
+          <pf-switch></pf-switch>
+        </div>
+      `);
+            element = container.querySelector('pf-switch');
+            snapshot = await a11ySnapshot({ selector: 'pf-switch' });
+        });
+        it('should upgrade', async function () {
+            const klass = customElements.get('pf-switch');
+            expect(element)
+                .to.be.an.instanceOf(klass)
+                .and
+                .to.be.an.instanceOf(PfSwitch);
+        });
+        it('has accessible role', function () {
+            expect(snapshot.role).to.equal('switch');
+        });
+        it('has accessible checked field', function () {
+            expect(snapshot.role).to.equal('switch');
+        });
+        it('requires accessible name', function () {
+            // Double negative - this would fail an accessibility audit,
+            // but that failure would be correct, because the template instantiated
+            // in this test's beforeeach hook does not have an accessible name
+            expect(snapshot.name).to.not.be.ok;
+        });
+    });
+    describe('with labels for on and off state', function () {
+        let element;
+        let snapshot;
+        beforeEach(async function () {
+            const container = await createFixture(html `
+        <div>
+          <pf-switch id="switch"></pf-switch>
+          <label for="switch">
+            <span data-state="on">Message when on</span>
+            <span data-state="off" hidden>Message when off</span>
+          </label>
+        </div>
+        `);
+            element = container.querySelector('pf-switch');
+            snapshot = await a11ySnapshot({ selector: '#switch' });
+        });
+        it('is accessible', function () {
+            expect(snapshot.role).to.equal('switch');
+            expect(snapshot.name).to.be.ok;
+            expect(snapshot.checked).to.be.false;
+        });
+        it('should show the label for the unchecked state', function () {
+            expect(snapshot.name).to.equal('Message when off');
+        });
+        describe('clicking the switch', function () {
+            beforeEach(async function () {
+                element.click();
+                await element.updateComplete;
+                await nextFrame();
+                snapshot = await a11ySnapshot({ selector: '#switch' });
+            });
+            it('should be checked', function () {
+                expect(element.checked).to.be.true;
+                expect(snapshot.checked).to.be.true;
+            });
+            it('should show the label for the checked state', function () {
+                expect(snapshot.name).to.equal('Message when on');
+            });
+        });
+    });
+    describe('when checked attr is present', function () {
+        let element;
+        let snapshot;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-switch id="switch" checked></pf-switch>
+      `);
+            await element.updateComplete;
+            await nextFrame();
+            snapshot = await a11ySnapshot({ selector: '#switch' });
+        });
+        it('should be checked', function () {
+            expect(element.checked).to.be.true;
+            expect(snapshot.checked).to.be.true;
+        });
+    });
+    describe('when checked attr is not present', function () {
+        let element;
+        let snapshot;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-switch id="switch"></pf-switch>
+      `);
+            await element.updateComplete;
+            await nextFrame();
+            snapshot = await a11ySnapshot({ selector: '#switch' });
+        });
+        it('should be checked', function () {
+            expect(element.checked).to.be.false;
+            expect(snapshot.checked).to.be.false;
+        });
+    });
+    describe('when checked and show-check-icon attrs are present', function () {
+        let element;
+        beforeEach(async function () {
+            const container = await createFixture(html `
+        <div>
+          <pf-switch id="switch" show-check-icon checked></pf-switch>
+          <label for="switch">
+            <span data-state="on">Message when on</span>
+            <span data-state="off" hidden>Message when off</span>
+          </label>
+        </div>
+      `);
+            element = container.querySelector('pf-switch');
+        });
+        it('should display a check icon', async function () {
+            // TODO: can we test this without inspecting the private shadowRoot?
+            const svg = element.shadowRoot.querySelector('svg');
+            expect(svg).to.be.ok;
+            expect(svg?.hasAttribute('hidden')).to.be.false;
+        });
+    });
+    describe('when checked and show-check-icon attrs are present', function () {
+        let element;
+        beforeEach(async function () {
+            element = await createFixture(html `
+        <pf-switch id="switch" show-check-icon checked></pf-switch>
+        <label for="switch">
+          <span data-state="on">Message when on</span>
+          <span data-state="off" hidden>Message when off</span>
+        </label>
+      `);
+        });
+        it('should display a check icon', async function () {
+            // TODO: can we test this without inspecting the private shadowRoot?
+            const svg = element.shadowRoot.querySelector('svg');
+            expect(svg).to.be.ok;
+            expect(svg?.hasAttribute('hidden')).to.be.false;
+        });
+    });
+    describe('when nested inside a label element', function () {
+        let label;
+        let element;
+        let snapshot;
+        beforeEach(async function () {
+            label = await createFixture(html `
+        <label>
+          <span>Dark Mode</span>
+          <pf-switch id="switch"></pf-switch>
+        </label>
+      `);
+            element = label.querySelector('pf-switch');
+            snapshot = await a11ySnapshot({ selector: 'pf-switch' });
+        });
+        it('does not hide label', function () {
+            expect(label.hidden).to.be.false;
+        });
+        it('has an accessible name', function () {
+            expect(snapshot.name).to.equal('Dark Mode');
+        });
+        describe('clicking the label', function () {
+            beforeEach(function () {
+                label.click();
+            });
+            it('toggles the state', function () {
+                expect(element.checked).to.be.true;
+            });
+        });
+        describe('clicking the switch', function () {
+            beforeEach(function () {
+                element.click();
+            });
+            it('toggles the state', function () {
+                expect(element.checked).to.be.true;
+            });
+        });
+    });
+    // TODO: test keyboard a11y with wtr sendKeys
+});
+//# sourceMappingURL=pf-switch.spec.js.map

package/pf-switch/test/pf-switch.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-switch.spec.js","sourceRoot":"","sources":["pf-switch.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import type { A11yTreeSnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\nimport { expect, html, nextFrame } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\n\nimport { PfSwitch } from '@patternfly/elements/pf-switch/pf-switch.js';\n\ndescribe('<pf-switch>', function() {\n  it('imperatively instantiates', function() {\n    expect(document.createElement('pf-switch')).to.be.an.instanceof(PfSwitch);\n  });\n\n  describe('simply instantiating', function() {\n    let element: PfSwitch;\n    let snapshot: A11yTreeSnapshot;\n    beforeEach(async function() {\n      const container = await createFixture<PfSwitch>(html`\n        <div>\n          <pf-switch></pf-switch>\n        </div>\n      `);\n      element = container.querySelector('pf-switch')!;\n      snapshot = await a11ySnapshot({ selector: 'pf-switch' });\n    });\n    it('should upgrade', async function() {\n      const klass = customElements.get('pf-switch');\n      expect(element)\n          .to.be.an.instanceOf(klass)\n          .and\n          .to.be.an.instanceOf(PfSwitch);\n    });\n    it('has accessible role', function() {\n      expect(snapshot.role).to.equal('switch');\n    });\n    it('has accessible checked field', function() {\n      expect(snapshot.role).to.equal('switch');\n    });\n    it('requires accessible name', function() {\n      // Double negative - this would fail an accessibility audit,\n      // but that failure would be correct, because the template instantiated\n      // in this test's beforeeach hook does not have an accessible name\n      expect(snapshot.name).to.not.be.ok;\n    });\n  });\n\n  describe('with labels for on and off state', function() {\n    let element: PfSwitch;\n    let snapshot: A11yTreeSnapshot;\n    beforeEach(async function() {\n      const container = await createFixture<PfSwitch>(html`\n        <div>\n          <pf-switch id=\"switch\"></pf-switch>\n          <label for=\"switch\">\n            <span data-state=\"on\">Message when on</span>\n            <span data-state=\"off\" hidden>Message when off</span>\n          </label>\n        </div>\n        `);\n      element = container.querySelector('pf-switch')!;\n      snapshot = await a11ySnapshot({ selector: '#switch' });\n    });\n\n    it('is accessible', function() {\n      expect(snapshot.role).to.equal('switch');\n      expect(snapshot.name).to.be.ok;\n      expect(snapshot.checked).to.be.false;\n    });\n\n    it('should show the label for the unchecked state', function() {\n      expect(snapshot.name).to.equal('Message when off');\n    });\n\n    describe('clicking the switch', function() {\n      beforeEach(async function() {\n        element.click();\n        await element.updateComplete;\n        await nextFrame();\n        snapshot = await a11ySnapshot({ selector: '#switch' });\n      });\n      it('should be checked', function() {\n        expect(element.checked).to.be.true;\n        expect(snapshot.checked).to.be.true;\n      });\n      it('should show the label for the checked state', function() {\n        expect(snapshot.name).to.equal('Message when on');\n      });\n    });\n  });\n\n  describe('when checked attr is present', function() {\n    let element: PfSwitch;\n    let snapshot: A11yTreeSnapshot;\n    beforeEach(async function() {\n      element = await createFixture<PfSwitch>(html`\n        <pf-switch id=\"switch\" checked></pf-switch>\n      `);\n\n      await element.updateComplete;\n      await nextFrame();\n      snapshot = await a11ySnapshot({ selector: '#switch' });\n    });\n\n    it('should be checked', function() {\n      expect(element.checked).to.be.true;\n      expect(snapshot.checked).to.be.true;\n    });\n  });\n\n  describe('when checked attr is not present', function() {\n    let element: PfSwitch;\n    let snapshot: A11yTreeSnapshot;\n    beforeEach(async function() {\n      element = await createFixture<PfSwitch>(html`\n        <pf-switch id=\"switch\"></pf-switch>\n      `);\n\n      await element.updateComplete;\n      await nextFrame();\n      snapshot = await a11ySnapshot({ selector: '#switch' });\n    });\n\n    it('should be checked', function() {\n      expect(element.checked).to.be.false;\n      expect(snapshot.checked).to.be.false;\n    });\n  });\n\n\n  describe('when checked and show-check-icon attrs are present', function() {\n    let element: PfSwitch;\n    beforeEach(async function() {\n      const container = await createFixture<PfSwitch>(html`\n        <div>\n          <pf-switch id=\"switch\" show-check-icon checked></pf-switch>\n          <label for=\"switch\">\n            <span data-state=\"on\">Message when on</span>\n            <span data-state=\"off\" hidden>Message when off</span>\n          </label>\n        </div>\n      `);\n      element = container.querySelector('pf-switch')!;\n    });\n    it('should display a check icon', async function() {\n      // TODO: can we test this without inspecting the private shadowRoot?\n      const svg = element.shadowRoot.querySelector('svg');\n      expect(svg).to.be.ok;\n      expect(svg?.hasAttribute('hidden')).to.be.false;\n    });\n  });\n\n  describe('when checked and show-check-icon attrs are present', function() {\n    let element: PfSwitch;\n    beforeEach(async function() {\n      element = await createFixture<PfSwitch>(html`\n        <pf-switch id=\"switch\" show-check-icon checked></pf-switch>\n        <label for=\"switch\">\n          <span data-state=\"on\">Message when on</span>\n          <span data-state=\"off\" hidden>Message when off</span>\n        </label>\n      `);\n    });\n    it('should display a check icon', async function() {\n      // TODO: can we test this without inspecting the private shadowRoot?\n      const svg = element.shadowRoot.querySelector('svg');\n      expect(svg).to.be.ok;\n      expect(svg?.hasAttribute('hidden')).to.be.false;\n    });\n  });\n\n  describe('when nested inside a label element', function() {\n    let label: HTMLLabelElement;\n    let element: PfSwitch;\n    let snapshot: A11yTreeSnapshot;\n    beforeEach(async function() {\n      label = await createFixture<HTMLLabelElement>(html`\n        <label>\n          <span>Dark Mode</span>\n          <pf-switch id=\"switch\"></pf-switch>\n        </label>\n      `);\n      element = label.querySelector('pf-switch')!;\n      snapshot = await a11ySnapshot({ selector: 'pf-switch' });\n    });\n    it('does not hide label', function() {\n      expect(label.hidden).to.be.false;\n    });\n    it('has an accessible name', function() {\n      expect(snapshot.name).to.equal('Dark Mode');\n    });\n    describe('clicking the label', function() {\n      beforeEach(function() {\n        label.click();\n      });\n      it('toggles the state', function() {\n        expect(element.checked).to.be.true;\n      });\n    });\n    describe('clicking the switch', function() {\n      beforeEach(function() {\n        element.click();\n      });\n      it('toggles the state', function() {\n        expect(element.checked).to.be.true;\n      });\n    });\n  });\n\n  // TODO: test keyboard a11y with wtr sendKeys\n});\n"]}

package/pf-table/pf-caption.d.ts

@@ -4,7 +4,7 @@ import { LitElement } from 'lit';
  * @slot - Place element content here
  */
 export declare class PfCaption extends LitElement {
-    static readonly styles: import("lit").CSSResult[];
+    static readonly styles: CSSStyleSheet[];
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/pf-table/pf-caption.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { css } from "lit";
-const styles = css `:host{display:table-caption;padding:var(--pf-c-table-caption--PaddingTop,var(--pf-global--spacer--md,1rem)) var(--pf-c-table-caption--PaddingRight,var(--pf-global--spacer--lg,1.5rem)) var(--pf-c-table-caption--PaddingBottom,var(--pf-global--spacer--md,1rem)) var(--pf-c-table-caption--PaddingLeft,var(--pf-global--spacer--lg,1.5rem));font-size:var(--pf-c-table-caption--FontSize, var(--pf-global--FontSize--sm, .875rem));color:var(--pf-c-table-caption--Color,var(--pf-global--Color--200,#6a6e73));text-align:left;background-color:var(--pf-c-table--BackgroundColor)}`;
+const styles = css `:host {\n  display: table-caption;\n  /* stylelint-disable-next-line max-line-length */\n  padding: var(--pf-c-table-caption--PaddingTop, var(--pf-global--spacer--md, 1rem)) var(--pf-c-table-caption--PaddingRight, var(--pf-global--spacer--lg, 1.5rem)) var(--pf-c-table-caption--PaddingBottom, var(--pf-global--spacer--md, 1rem)) var(--pf-c-table-caption--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem));\n  font-size: var(--pf-c-table-caption--FontSize, var(--pf-global--FontSize--sm, 0.875rem));\n  color: var(--pf-c-table-caption--Color, var(--pf-global--Color--200, #6a6e73));\n  text-align: left;\n  background-color: var(--pf-c-table--BackgroundColor);\n}`;
 /**
  * Caption
  * @slot - Place element content here

package/pf-table/pf-caption.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-caption.js","sourceRoot":"","sources":["pf-caption.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;;;AAIjE;;;GAGG;AAEH,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAGvC,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;;AANe,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AADvB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAQrB;SARY,SAAS","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport styles from './pf-caption.css';\n\n/**\n * Caption\n * @slot - Place element content here\n */\n@customElement('pf-caption')\nexport class PfCaption extends LitElement {\n  static readonly styles = [styles];\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-caption': PfCaption;\n  }\n}\n"]}
+{"version":3,"file":"pf-caption.js","sourceRoot":"","sources":["pf-caption.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;;;AAIjE;;;GAGG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAGvC,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;;AANe,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AADvB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAQrB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport styles from './pf-caption.css';\n\n/**\n * Caption\n * @slot - Place element content here\n */\n@customElement('pf-caption')\nexport class PfCaption extends LitElement {\n  static readonly styles = [styles];\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-caption': PfCaption;\n  }\n}\n"]}

package/pf-table/pf-table.d.ts

@@ -8,10 +8,8 @@ export * from './pf-th.js';
 export * from './pf-td.js';
 /**
  * A **table** is used to display large data sets that can be easily laid out in a simple grid with column headers.
- *
  * @slot
  *       The default slot can hold an optional `pf-caption` element and a combination of `pf-tr`, `pf-thead`, or `pf-tbody` elements.
- *
  * @cssprop {<color>} --pf-c-table--BackgroundColor
  *          Table background color
  *          {@default `#fff`}
@@ -648,7 +646,7 @@ export * from './pf-td.js';
  */
 export declare class PfTable extends LitElement {
     #private;
-    static readonly styles: import("lit").CSSResult[];
+    static readonly styles: CSSStyleSheet[];
     get rows(): NodeListOf<PfTr>;
     private columns;
     connectedCallback(): void;