@patternfly/elements 4.1.0 → 4.2.0

package/pf-switch/pf-switch.js

@@ -5,7 +5,161 @@ import { customElement } from 'lit/decorators/custom-element.js';
 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 {\n  display: inline-block;\n  outline: none;\n}\n\nsvg {\n  fill: currentcolor;\n}\n\n[hidden] {\n  display: none !important;\n}\n\n: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(: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\n:host(:disabled) {\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n:host(:disabled) #container {\n  cursor: not-allowed;\n\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:host(:disabled:focus-within) #container {\n  outline: none;\n}\n\n#container {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\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  position: absolute;\n  display: block;\n  content: "";\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\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`;
+const styles = css `:host {
+  display: inline-block;
+  outline: none;
+}
+
+svg {
+  fill: currentcolor;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host([checked]) #container {
+  /** Color of the label when switch is checked */
+  color: var(--pf-c-switch__input--checked__label--Color,
+    var(--pf-global--Color--dark-100, #151515));
+  /** Background color of the toggle when switch is checked */
+  background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor,
+    var(--pf-global--primary-color--100, #06c));
+}
+
+:host([checked]) #container::before {
+  /** Translation of the toggle knob when checked */
+  translate: var(--pf-c-switch__input--checked__toggle--before--TranslateX,
+    calc(100% + var(--pf-c-switch__toggle-icon--Offset, 0.125rem)));
+}
+
+:host(:is(:focus,:focus-within)) #container {
+  /** Focus outline width */
+  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));
+  /** Focus outline offset */
+  outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset,
+    var(--pf-global--spacer--sm, 0.5rem));
+}
+
+:host(:disabled) {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+:host(:disabled) #container {
+  cursor: not-allowed;
+
+  /** Color of the label when switch is disabled */
+  color: var(--pf-c-switch__input--disabled__label--Color,
+    var(--pf-global--disabled-color--100, #6a6e73));
+  /** Background color when switch is disabled */
+  background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor,
+    var(--pf-global--disabled-color--200, #d2d2d2));
+}
+
+:host(:disabled) #container::before {
+  /** Background color of the toggle knob when disabled */
+  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)));
+}
+
+:host(:disabled:focus-within) #container {
+  outline: none;
+}
+
+#container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  /** Width of the toggle */
+  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, 0.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, 0.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 of the toggle */
+  background-color: var(--pf-c-switch__toggle--BackgroundColor,
+    var(--pf-global--palette--black-500, #8a8d90));
+  /** Border radius of the toggle */
+  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 {
+  position: absolute;
+  display: block;
+  content: "";
+  /** Top position of the toggle knob */
+  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, 0.125rem))))) / 2));
+  /** Left position of the toggle knob */
+  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, 0.125rem))))) / 2)));
+  /** Width of the toggle knob */
+  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, 0.125rem)));
+  /** Height of the toggle knob */
+  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, 0.125rem))));
+  /** Background color of the toggle knob */
+  background-color: var(--pf-c-switch__toggle--before--backgroundcolor,
+    var(--pf-global--backgroundcolor--100, #fff));
+  /** Border radius of the toggle knob */
+  border-radius: var(--pf-c-switch__toggle--before--BorderRadius,
+    var(--pf-global--BorderRadius--lg, 30em));
+  /** Box shadow of the toggle knob */
+  box-shadow: var(--pf-c-switch__toggle--before--BoxShadow,
+    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)));
+  /** Transition of the toggle knob */
+  transition: var(--pf-c-switch__toggle--before--Transition,
+    var(--pf-c-switch__toggle--before--Transition, translate .25s ease 0s));
+}
+
+svg {
+  /** Horizontal margin of the toggle icon */
+  margin-inline: var(--pf-c-switch__toggle-icon--Left,
+    calc(var(--pf-c-switch--FontSize,
+      var(--pf-global--FontSize--md, 1rem)) * .4));
+  /** Font size of the toggle icon */
+  font-size: var(--pf-c-switch__toggle-icon--FontSize,
+    calc(var(--pf-c-switch--FontSize,
+      var(--pf-global--FontSize--md, 1rem)) * .625));
+  /** Color of the toggle icon */
+  color: var(--pf-c-switch__toggle-icon--Color,
+    var(--pf-global--Color--light-100, #fff));
+}
+`;
 let PfSwitch = class PfSwitch extends LitElement {
     constructor() {
         super(...arguments);
@@ -102,7 +256,7 @@ _PfSwitch_updateLabels = function _PfSwitch_updateLabels() {
 };
 PfSwitch.styles = [styles];
 PfSwitch.formAssociated = true;
-PfSwitch.version = "4.1.0";
+PfSwitch.version = "4.2.0";
 __decorate([
     property({ reflect: true })
 ], PfSwitch.prototype, "label", void 0);

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,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;;;AA0CxF,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;;QAOL,8BAAa,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAC;QAK9D,mDAAmD;QACuB,kBAAa,GAAG,KAAK,CAAC;QAEhG,6CAA6C;QACD,YAAO,GAAG,KAAK,CAAC;QAE5D,8CAA8C;QACF,aAAQ,GAAG,KAAK,CAAC;;IAE7D,IAAI,MAAM;QACR,OAAO,uBAAA,IAAI,2BAAW,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,8CAAS,CAAC,CAAC;QAC9C,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,8CAAS,CAAC,CAAC;QAC9C,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,uBAAA,IAAI,gDAAW,CAAC,CAAC;QAClD,uBAAA,IAAI,mDAAc,MAAlB,IAAI,CAAgB,CAAC;IACvB,CAAC;IAED,oBAAoB,CAAC,QAAiB;QACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEQ,UAAU;QACjB,uBAAA,IAAI,2BAAW,CAAC,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACrD,uBAAA,IAAI,2BAAW,CAAC,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACzD,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;;;uBAQQ,CAAC,IAAI,CAAC,aAAa;;;;KAIrC,CAAC;IACJ,CAAC;;;;+CAEQ,KAAY;IACnB,gGAAgG;IAChG,MAAM,EAAE,cAAc,EAAE,sBAAsB,EAAE,GAAG,KAAK,CAAC;IACzD,IAAI,sBAAsB,EAAE,CAAC;QAC3B,IAAI,MAA0B,CAAC;QAC/B,IAAI,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,EAAE,CAAC;YAClE,OAAO;QACT,CAAC;IACH,CAAC;IACD,uBAAA,IAAI,6CAAQ,MAAZ,IAAI,CAAU,CAAC;AACjB,CAAC;+CAEQ,KAAoB;IAC3B,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;QAClB,KAAK,GAAG,CAAC;QACT,KAAK,OAAO;YACV,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,uBAAA,IAAI,6CAAQ,MAAZ,IAAI,CAAU,CAAC;IACnB,CAAC;AACH,CAAC;mDAEU,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,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACnB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,uBAAA,IAAI,mDAAc,MAAlB,IAAI,CAAgB,CAAC;QACrB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAC7D,CAAC;AACH,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;AA3Ge,eAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;AAEnC,uBAAc,GAAG,IAAI,AAAP,CAAQ;;AAOT;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAgB;AAG8B;IAAzE,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;+CAAuB;AAGpD;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCAAiB;AAGhB;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAkB;AAnBlD,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\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 * @fires {Event} change - Fires when the switch selection changes.\n * @cssprop [--pf-c-switch--FontSize=1rem]\n * @cssprop {<length>} [--pf-c-switch--ColumnGap=1rem]\n * @cssprop [--pf-c-switch__toggle-icon--FontSize=calc(1rem * .625)]\n * @cssprop {<color>} [--pf-c-switch__toggle-icon--Color=#fff]\n * @cssprop {<length>} [--pf-c-switch__toggle-icon--Left=1rem]\n * @cssprop {<length>} [--pf-c-switch__toggle-icon--Offset=0.125rem]\n * @cssprop {<number>} [--pf-c-switch--LineHeight=1.5]\n * @cssprop {<length>} [--pf-c-switch--Height=auto]\n * @cssprop {<color>} [--pf-c-switch__input--checked__toggle--BackgroundColor=#06c]\n * @cssprop {<length>} [--pf-c-switch__input--checked__toggle--before--TranslateX=calc(100 + 0.125rem)]\n * @cssprop {<color>} [--pf-c-switch__input--checked__label--Color=#151515]\n * @cssprop {<color>} [--pf-c-switch__input--not-checked__label--Color=#6a6e73]\n * @cssprop {<color>} [--pf-c-switch__input--disabled__label--Color=#6a6e73]\n * @cssprop {<color>} [--pf-c-switch__input--disabled__toggle--BackgroundColor=#d2d2d2]\n * @cssprop {<color>} [--pf-c-switch__input--disabled__toggle--before--BackgroundColor=#f5f5f5]\n * @cssprop {<length>} [--pf-c-switch__input--focus__toggle--OutlineWidth=2px]\n * @cssprop {<length>} [--pf-c-switch__input--focus__toggle--OutlineOffset=0.5rem]\n * @cssprop {<color>} [--pf-c-switch__input--focus__toggle--OutlineColor=#06c]\n * @cssprop {<length>} [--pf-c-switch__toggle--Height=calc(1rem * 1.5)]\n * @cssprop {<color>} [--pf-c-switch__toggle--BackgroundColor=#8a8d90]\n * @cssprop {<length>} [--pf-c-switch__toggle--BorderRadius=calc(1rem * 1.5)]\n * @cssprop {<length>} [--pf-c-switch__toggle--before--Width=calc(1rem - 0.125rem)]\n * @cssprop {<length>} [--pf-c-switch__toggle--before--Height=calc(1rem - 0.125rem)]\n * @cssprop {<length>} [--pf-c-switch__toggle--before--Top=calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`]\n * @cssprop {<length>} [--pf-c-switch__toggle--before--Left=calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)]\n * @cssprop {<color>} [--pf-c-switch__toggle--before--BackgroundColor=#fff]\n * @cssprop {<length>} [--pf-c-switch__toggle--before--BorderRadius=30em]\n * @cssprop [--pf-c-switch__toggle--before--BoxShadow=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=transform .25s ease 0s]\n * @cssprop {<length>} [--pf-c-switch__toggle--Width=calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))]\n */\n\n@customElement('pf-switch')\nexport class PfSwitch extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  static readonly formAssociated = true;\n\n  declare shadowRoot: ShadowRoot;\n\n  #internals = InternalsController.of(this, { role: 'switch' });\n\n  /** Accessible label text for the switch */\n  @property({ reflect: true }) label?: string;\n\n  /** Flag to show if the switch has a check icon. */\n  @property({ reflect: true, type: Boolean, attribute: 'show-check-icon' }) showCheckIcon = false;\n\n  /** Flag to show if the switch is checked. */\n  @property({ reflect: true, type: Boolean }) checked = false;\n\n  /** Flag to show if the switch is disabled. */\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): void {\n    this.disabled = disabled;\n    this.requestUpdate();\n  }\n\n  override willUpdate(): void {\n    this.#internals.ariaChecked = String(!!this.checked);\n    this.#internals.ariaDisabled = String(!!this.disabled);\n  }\n\n  override render(): TemplateResult<1> {\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  #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 (originalTarget === event.target\n          && !(labels = Array.from(this.labels)).includes(explicitOriginalTarget)\n          && labels.includes(this.closest('label') as HTMLLabelElement)) {\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  #onKeydown(event: KeyboardEvent) {\n    if (event.key === ' ') {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  #toggle() {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n      this.#updateLabels();\n      this.dispatchEvent(new Event('change', { bubbles: true }));\n    }\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\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":"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","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\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 * @alias Switch\n * @fires {Event} change - Fires when the switch selection changes.\n */\n\n@customElement('pf-switch')\nexport class PfSwitch extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  static readonly formAssociated = true;\n\n  declare shadowRoot: ShadowRoot;\n\n  #internals = InternalsController.of(this, { role: 'switch' });\n\n  /** Accessible label text for the switch */\n  @property({ reflect: true }) label?: string;\n\n  /** Flag to show if the switch has a check icon. */\n  @property({ reflect: true, type: Boolean, attribute: 'show-check-icon' }) showCheckIcon = false;\n\n  /** Flag to show if the switch is checked. */\n  @property({ reflect: true, type: Boolean }) checked = false;\n\n  /** Flag to show if the switch is disabled. */\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): void {\n    this.disabled = disabled;\n    this.requestUpdate();\n  }\n\n  override willUpdate(): void {\n    this.#internals.ariaChecked = String(!!this.checked);\n    this.#internals.ariaDisabled = String(!!this.disabled);\n  }\n\n  override render(): TemplateResult<1> {\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  #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 (originalTarget === event.target\n          && !(labels = Array.from(this.labels)).includes(explicitOriginalTarget)\n          && labels.includes(this.closest('label') as HTMLLabelElement)) {\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  #onKeydown(event: KeyboardEvent) {\n    if (event.key === ' ') {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  #toggle() {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n      this.#updateLabels();\n      this.dispatchEvent(new Event('change', { bubbles: true }));\n    }\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\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-switch': PfSwitch;\n  }\n}\n"]}

package/pf-table/pf-caption.js

@@ -2,7 +2,15 @@ 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 {\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}`;
+const styles = css `:host {
+  display: table-caption;
+  /* stylelint-disable-next-line max-line-length */
+  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, 0.875rem));
+  color: var(--pf-c-table-caption--Color, var(--pf-global--Color--200, #6a6e73));
+  text-align: left;
+  background-color: var(--pf-c-table--BackgroundColor);
+}`;
 let PfCaption = class PfCaption extends LitElement {
     render() {
         return html `
@@ -11,7 +19,7 @@ let PfCaption = class PfCaption extends LitElement {
     }
 };
 PfCaption.styles = [styles];
-PfCaption.version = "4.1.0";
+PfCaption.version = "4.2.0";
 PfCaption = __decorate([
     customElement('pf-caption')
 ], PfCaption);

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,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;;;AAS1D,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAGvC,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;;AANe,gBAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AADxC,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS","sourcesContent":["import { LitElement, html, type TemplateResult } 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: CSSStyleSheet[] = [styles];\n\n  render(): TemplateResult<1> {\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,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;;;;;;;;;;;AAS1D,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAGvC,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;;AANe,gBAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AADxC,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS","sourcesContent":["import { LitElement, html, type TemplateResult } 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: CSSStyleSheet[] = [styles];\n\n  render(): TemplateResult<1> {\n    return html`\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-caption': PfCaption;\n  }\n}\n"]}