@patternfly/elements 2.2.1 → 2.3.0

package/pf-progress-stepper/pf-progress-step.js

@@ -1,6 +1,5 @@
-var _PfProgressStep_slots, _PfProgressStep_internals;
 var PfProgressStep_1;
-import { __classPrivateFieldGet, __decorate } from "tslib";
+import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
@@ -30,13 +29,17 @@ let PfProgressStep = PfProgressStep_1 = class PfProgressStep extends LitElement
         super(...arguments);
         /** Indicates if this item is the current active item. */
         this.current = false;
-        _PfProgressStep_slots.set(this, new SlotController(this, 'title', 'description'));
-        _PfProgressStep_internals.set(this, new InternalsController(this, {
+        this.#slots = new SlotController(this, 'title', 'description');
+        this.#internals = new InternalsController(this, {
             role: 'listitem',
-        }));
+        });
     }
+    static { this.parentTagName = 'pf-progress-stepper'; }
+    static { this.styles = [style]; }
+    #slots;
+    #internals;
     render() {
-        const hasDescription = !!this.description ?? __classPrivateFieldGet(this, _PfProgressStep_slots, "f").hasSlotted('description');
+        const hasDescription = !!this.description ?? this.#slots.hasSlotted('description');
         const icon = this.icon ?? ICONS.get(this.variant ?? 'default')?.icon;
         const set = this.iconSet ?? ICONS.get(this.variant ?? 'default')?.set;
         const { parentTagName } = this.constructor;
@@ -58,14 +61,10 @@ let PfProgressStep = PfProgressStep_1 = class PfProgressStep extends LitElement
     updated(changed) {
         super.updated?.(changed);
         if (changed.has('current')) {
-            __classPrivateFieldGet(this, _PfProgressStep_internals, "f").ariaCurrent = String(!!this.current);
+            this.#internals.ariaCurrent = String(!!this.current);
         }
     }
 };
-_PfProgressStep_slots = new WeakMap();
-_PfProgressStep_internals = new WeakMap();
-PfProgressStep.parentTagName = 'pf-progress-stepper';
-PfProgressStep.styles = [style];
 __decorate([
     property()
 ], PfProgressStep.prototype, "description", void 0);

package/pf-progress-stepper/pf-progress-step.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-progress-step.js","sourceRoot":"","sources":["pf-progress-step.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport type { PfProgressStepper } from './pf-progress-stepper.js';\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport style from './pf-progress-step.css';\n\nconst ICONS = new Map(Object.entries({\n  success: { icon: 'circle-check' },\n  danger: { icon: 'circle-exclamation' },\n  warning: { icon: 'triangle-exclamation' },\n  info: { icon: 'resources-full', set: 'patternfly' },\n}));\n\n/**\n * @slot -\n *       Short description of the current step.\n * @slot description\n *       Longer description of the current step.\n * @slot icon\n *       Overrides the icon property\n *\n */\n@customElement('pf-progress-step')\nexport class PfProgressStep extends LitElement {\n  protected static parentTagName = 'pf-progress-stepper';\n\n  static readonly styles = [style];\n\n  /** Optional extended description of the step */\n  @property() description?: string;\n\n  /** Step Icon */\n  @property() icon?: string;\n\n  /** Step icon set */\n  @property({ attribute: 'icon-set' }) iconSet?: string;\n\n  /** Describes the state of the current item */\n  @property({ reflect: true }) variant?: 'pending' | 'info' | 'success' | 'warning' | 'danger';\n\n  /** Indicates if this item is the current active item. */\n  @property({ type: Boolean, reflect: true }) current = false;\n\n  #slots = new SlotController(this, 'title', 'description');\n\n  #internals = new InternalsController(this, {\n    role: 'listitem',\n  });\n\n  render() {\n    const hasDescription = !!this.description ?? this.#slots.hasSlotted('description');\n    const icon = this.icon ?? ICONS.get(this.variant ?? 'default')?.icon;\n    const set = this.iconSet ?? ICONS.get(this.variant ?? 'default')?.set;\n    const { parentTagName } = (this.constructor as typeof PfProgressStep);\n    const { compact = false } = this.closest<PfProgressStepper>(parentTagName) ?? {};\n    return html`\n      <div id=\"connector\" class=\"${classMap({ compact })}\">\n        <slot id=\"icon\" name=\"icon\">\n          <pf-icon ?hidden=\"${!icon}\"\n                    icon=\"${ifDefined(icon)}\"\n                    set=\"${ifDefined(set)}\"></pf-icon>\n        </slot>\n      </div>\n      <div id=\"main\" class=\"${classMap({ compact })}\">\n        <slot id=\"title\"></slot>\n        <slot id=\"description\" name=\"description\" ?hidden=\"${!hasDescription}\">${this.description}</slot>\n      </div>\n    `;\n  }\n\n  updated(changed: PropertyValues<this>) {\n    super.updated?.(changed);\n    if (changed.has('current')) {\n      this.#internals.ariaCurrent = String(!!this.current);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress-step': PfProgressStep;\n  }\n}\n"]}
+{"version":3,"file":"pf-progress-step.js","sourceRoot":"","sources":["pf-progress-step.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport type { PfProgressStepper } from './pf-progress-stepper.js';\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport style from './pf-progress-step.css';\n\nconst ICONS = new Map(Object.entries({\n  success: { icon: 'circle-check' },\n  danger: { icon: 'circle-exclamation' },\n  warning: { icon: 'triangle-exclamation' },\n  info: { icon: 'resources-full', set: 'patternfly' },\n}));\n\n/**\n * @slot -\n *       Short description of the current step.\n * @slot description\n *       Longer description of the current step.\n * @slot icon\n *       Overrides the icon property\n *\n */\n@customElement('pf-progress-step')\nexport class PfProgressStep extends LitElement {\n  protected static parentTagName = 'pf-progress-stepper';\n\n  static readonly styles = [style];\n\n  /** Optional extended description of the step */\n  @property() description?: string;\n\n  /** Step Icon */\n  @property() icon?: string;\n\n  /** Step icon set */\n  @property({ attribute: 'icon-set' }) iconSet?: string;\n\n  /** Describes the state of the current item */\n  @property({ reflect: true }) variant?: 'pending' | 'info' | 'success' | 'warning' | 'danger';\n\n  /** Indicates if this item is the current active item. */\n  @property({ type: Boolean, reflect: true }) current = false;\n\n  #slots = new SlotController(this, 'title', 'description');\n\n  #internals = new InternalsController(this, {\n    role: 'listitem',\n  });\n\n  render() {\n    const hasDescription = !!this.description ?? this.#slots.hasSlotted('description');\n    const icon = this.icon ?? ICONS.get(this.variant ?? 'default')?.icon;\n    const set = this.iconSet ?? ICONS.get(this.variant ?? 'default')?.set;\n    const { parentTagName } = (this.constructor as typeof PfProgressStep);\n    const { compact = false } = this.closest<PfProgressStepper>(parentTagName) ?? {};\n    return html`\n      <div id=\"connector\" class=\"${classMap({ compact })}\">\n        <slot id=\"icon\" name=\"icon\">\n          <pf-icon ?hidden=\"${!icon}\"\n                    icon=\"${ifDefined(icon)}\"\n                    set=\"${ifDefined(set)}\"></pf-icon>\n        </slot>\n      </div>\n      <div id=\"main\" class=\"${classMap({ compact })}\">\n        <slot id=\"title\"></slot>\n        <slot id=\"description\" name=\"description\" ?hidden=\"${!hasDescription}\">${this.description}</slot>\n      </div>\n    `;\n  }\n\n  updated(changed: PropertyValues<this>) {\n    super.updated?.(changed);\n    if (changed.has('current')) {\n      this.#internals.ariaCurrent = String(!!this.current);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress-step': PfProgressStep;\n  }\n}\n"]}

package/pf-progress-stepper/pf-progress-stepper.js

@@ -1,6 +1,5 @@
-var _PfProgressStepper_instances, _PfProgressStepper_internals, _PfProgressStepper_mo, _PfProgressStepper_onMutation;
 var PfProgressStepper_1;
-import { __classPrivateFieldGet, __decorate } from "tslib";
+import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
@@ -14,6 +13,11 @@ import '@patternfly/elements/pf-icon/pf-icon.js';
  * A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.
  */
 let PfProgressStepper = PfProgressStepper_1 = class PfProgressStepper extends LitElement {
+    static { this.childTagName = 'pf-progress-step'; }
+    static { this.styles = [style]; }
+    static { this.formAssociated = true; }
+    #internals;
+    #mo;
     get value() {
         const { childTagName } = this.constructor;
         const steps = this.querySelectorAll(childTagName);
@@ -23,19 +27,21 @@ let PfProgressStepper = PfProgressStepper_1 = class PfProgressStepper extends Li
     }
     constructor() {
         super();
-        _PfProgressStepper_instances.add(this);
         /** Whether to use the vertical layout */
         this.vertical = false;
         /** Whether to use the center alignment */
         this.center = false;
         /** Whether to use the compact layout */
         this.compact = false;
-        _PfProgressStepper_internals.set(this, new InternalsController(this, {
+        this.#internals = new InternalsController(this, {
             role: 'progressbar',
             ariaValueNow: this.value.toString(),
-        }));
-        _PfProgressStepper_mo.set(this, new MutationObserver(() => __classPrivateFieldGet(this, _PfProgressStepper_instances, "m", _PfProgressStepper_onMutation).call(this)));
-        __classPrivateFieldGet(this, _PfProgressStepper_mo, "f").observe(this, { childList: true });
+        });
+        this.#mo = new MutationObserver(() => this.#onMutation());
+        this.#mo.observe(this, { childList: true });
+    }
+    #onMutation() {
+        this.#internals.ariaValueNow = this.value.toString();
     }
     render() {
         return html `
@@ -43,15 +49,6 @@ let PfProgressStepper = PfProgressStepper_1 = class PfProgressStepper extends Li
     `;
     }
 };
-_PfProgressStepper_internals = new WeakMap();
-_PfProgressStepper_mo = new WeakMap();
-_PfProgressStepper_instances = new WeakSet();
-_PfProgressStepper_onMutation = function _PfProgressStepper_onMutation() {
-    __classPrivateFieldGet(this, _PfProgressStepper_internals, "f").ariaValueNow = this.value.toString();
-};
-PfProgressStepper.childTagName = 'pf-progress-step';
-PfProgressStepper.styles = [style];
-PfProgressStepper.formAssociated = true;
 __decorate([
     property({ type: Boolean, reflect: true })
 ], PfProgressStepper.prototype, "vertical", void 0);

package/pf-progress-stepper/pf-progress-stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-progress-stepper.js","sourceRoot":"","sources":["pf-progress-stepper.ts"],"names":[],"mappings":";;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;;;AAIvE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;AAE/F,OAAO,yCAAyC,CAAC;AAEjD;;GAEG;AAEH,IAAa,iBAAiB,yBAA9B,MAAa,iBAAkB,SAAQ,UAAU;IA2B/C,IAAI,KAAK;QACP,MAAM,EAAE,YAAY,EAAE,GAAI,IAAI,CAAC,WAAwC,CAAC;QACxE,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAiB,YAAY,CAAC,CAAC;QAClE,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,YAAY,WAAW,CAAC,CAAC;QAC/D,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,OAAyB,CAAC,GAAG,CAAC,CAAC;QACnE,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC;IAClC,CAAC;IAED;QACE,KAAK,EAAE,CAAC;;QA7BV,yCAAyC;QACG,aAAQ,GAAG,KAAK,CAAC;QAE7D,0CAA0C;QACE,WAAM,GAAG,KAAK,CAAC;QAE3D,wCAAwC;QAKI,YAAO,GAAG,KAAK,CAAC;QAE5D,uCAAa,IAAI,mBAAmB,CAAC,IAAI,EAAE;YACzC,IAAI,EAAE,aAAa;YACnB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;SACpC,CAAC,EAAC;QAEH,gCAAM,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,uBAAA,IAAI,mEAAY,MAAhB,IAAI,CAAc,CAAC,EAAC;QAYnD,uBAAA,IAAI,6BAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAC9C,CAAC;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;;;;;;IAPC,uBAAA,IAAI,oCAAW,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;AACvD,CAAC;AAzCgB,8BAAY,GAAG,kBAAkB,AAArB,CAAsB;AAEnC,wBAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;AAE1B,gCAAc,GAAG,IAAI,AAAP,CAAQ;AAGe;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAgB;AAOf;IAJ3C,QAAQ,CAAC;QACR,MAAM,EAAE,YAAY,EAAE,GAAI,IAAI,CAAC,WAAwC,CAAC;QACxE,IAAI,CAAC,gBAAgB,CAAiB,YAAY,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IAC5F,CAAC,CAAC;IACD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAiB;AAlBjD,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAiD7B;SAjDY,iBAAiB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { observed } from '@patternfly/pfe-core/decorators/observed.js';\n\nimport style from './pf-progress-stepper.css';\n\nimport { PfProgressStep } from './pf-progress-step.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\n/**\n * A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.\n */\n@customElement('pf-progress-stepper')\nexport class PfProgressStepper extends LitElement {\n  protected static childTagName = 'pf-progress-step';\n\n  static readonly styles = [style];\n\n  static formAssociated = true;\n\n  /** Whether to use the vertical layout */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /** Whether to use the center alignment */\n  @property({ type: Boolean, reflect: true }) center = false;\n\n  /** Whether to use the compact layout */\n  @observed(function(this: PfProgressStepper) {\n    const { childTagName } = (this.constructor as typeof PfProgressStepper);\n    this.querySelectorAll<PfProgressStep>(childTagName).forEach(step => step.requestUpdate());\n  })\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  #internals = new InternalsController(this, {\n    role: 'progressbar',\n    ariaValueNow: this.value.toString(),\n  });\n\n  #mo = new MutationObserver(() => this.#onMutation());\n\n  get value() {\n    const { childTagName } = (this.constructor as typeof PfProgressStepper);\n    const steps = this.querySelectorAll<PfProgressStep>(childTagName);\n    const current = this.querySelector(`${childTagName}[current]`);\n    const n = Array.from(steps).indexOf(current as PfProgressStep) + 1;\n    return (n / steps.length) * 100;\n  }\n\n  constructor() {\n    super();\n    this.#mo.observe(this, { childList: true });\n  }\n\n  #onMutation() {\n    this.#internals.ariaValueNow = this.value.toString();\n  }\n\n  render() {\n    return html`\n      <slot role=\"listbox\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress-stepper': PfProgressStepper;\n  }\n}\n"]}
+{"version":3,"file":"pf-progress-stepper.js","sourceRoot":"","sources":["pf-progress-stepper.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;;;AAIvE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;AAE/F,OAAO,yCAAyC,CAAC;AAEjD;;GAEG;AAEH,IAAa,iBAAiB,yBAA9B,MAAa,iBAAkB,SAAQ,UAAU;aAC9B,iBAAY,GAAG,kBAAkB,AAArB,CAAsB;aAEnC,WAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;aAE1B,mBAAc,GAAG,IAAI,AAAP,CAAQ;IAe7B,UAAU,CAGP;IAEH,GAAG,CAAkD;IAErD,IAAI,KAAK;QACP,MAAM,EAAE,YAAY,EAAE,GAAI,IAAI,CAAC,WAAwC,CAAC;QACxE,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAiB,YAAY,CAAC,CAAC;QAClE,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,YAAY,WAAW,CAAC,CAAC;QAC/D,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,OAAyB,CAAC,GAAG,CAAC,CAAC;QACnE,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC;IAClC,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QA7BV,yCAAyC;QACG,aAAQ,GAAG,KAAK,CAAC;QAE7D,0CAA0C;QACE,WAAM,GAAG,KAAK,CAAC;QAE3D,wCAAwC;QAKI,YAAO,GAAG,KAAK,CAAC;QAE5D,eAAU,GAAG,IAAI,mBAAmB,CAAC,IAAI,EAAE;YACzC,IAAI,EAAE,aAAa;YACnB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;SACpC,CAAC,CAAC;QAEH,QAAG,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;QAYnD,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAC9C,CAAC;IAED,WAAW;QACT,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;IACvD,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;;AAxC2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAgB;AAOf;IAJ3C,QAAQ,CAAC;QACR,MAAM,EAAE,YAAY,EAAE,GAAI,IAAI,CAAC,WAAwC,CAAC;QACxE,IAAI,CAAC,gBAAgB,CAAiB,YAAY,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IAC5F,CAAC,CAAC;IACD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAiB;AAlBjD,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAiD7B;SAjDY,iBAAiB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { observed } from '@patternfly/pfe-core/decorators/observed.js';\n\nimport style from './pf-progress-stepper.css';\n\nimport { PfProgressStep } from './pf-progress-step.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\n/**\n * A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.\n */\n@customElement('pf-progress-stepper')\nexport class PfProgressStepper extends LitElement {\n  protected static childTagName = 'pf-progress-step';\n\n  static readonly styles = [style];\n\n  static formAssociated = true;\n\n  /** Whether to use the vertical layout */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /** Whether to use the center alignment */\n  @property({ type: Boolean, reflect: true }) center = false;\n\n  /** Whether to use the compact layout */\n  @observed(function(this: PfProgressStepper) {\n    const { childTagName } = (this.constructor as typeof PfProgressStepper);\n    this.querySelectorAll<PfProgressStep>(childTagName).forEach(step => step.requestUpdate());\n  })\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  #internals = new InternalsController(this, {\n    role: 'progressbar',\n    ariaValueNow: this.value.toString(),\n  });\n\n  #mo = new MutationObserver(() => this.#onMutation());\n\n  get value() {\n    const { childTagName } = (this.constructor as typeof PfProgressStepper);\n    const steps = this.querySelectorAll<PfProgressStep>(childTagName);\n    const current = this.querySelector(`${childTagName}[current]`);\n    const n = Array.from(steps).indexOf(current as PfProgressStep) + 1;\n    return (n / steps.length) * 100;\n  }\n\n  constructor() {\n    super();\n    this.#mo.observe(this, { childList: true });\n  }\n\n  #onMutation() {\n    this.#internals.ariaValueNow = this.value.toString();\n  }\n\n  render() {\n    return html`\n      <slot role=\"listbox\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress-stepper': PfProgressStepper;\n  }\n}\n"]}

package/pf-spinner/BaseSpinner.js

@@ -27,6 +27,7 @@ class BaseSpinner extends LitElement {
         /** Preset sizes for the spinner */
         this.size = 'xl';
     }
+    static { this.styles = [styles]; }
     render() {
         return html `
       <svg role="progressbar" viewBox="0 0 100 100">
@@ -35,7 +36,6 @@ class BaseSpinner extends LitElement {
     `;
     }
 }
-BaseSpinner.styles = [styles];
 __decorate([
     property({ reflect: true })
 ], BaseSpinner.prototype, "size", void 0);

package/pf-spinner/BaseSpinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSpinner.js","sourceRoot":"","sources":["BaseSpinner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAWtD;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAsB,WAAY,SAAQ,UAAU;IAApD;;QAGE,mCAAmC;QACN,SAAI,GAAgB,IAAI,CAAC;IAYxD,CAAC;IAPU,MAAM;QACb,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAde,kBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGL;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAA0B;AAGzB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkE;SAP1E,WAAW","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\n\nimport styles from './BaseSpinner.css';\n\nexport type SpinnerSize = (\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n);\n\n/**\n * Base spinner class\n *\n * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Height                        {@default `3.375rem`}\n * @cssprop {<color>}  --pf-c-spinner--Color                         {@default `#06c`}\n * @cssprop {<length>} --pf-c-spinner--m-sm--diameter                {@default `0.625rem`}\n * @cssprop {<length>} --pf-c-spinner--m-md--diameter                {@default `1.125rem`}\n * @cssprop {<length>} --pf-c-spinner--m-lg--diameter                {@default `1.5rem`}\n * @cssprop {<length>} --pf-c-spinner--m-xl--diameter                {@default `3.375rem`}\n * @cssprop {<time>}   --pf-c-spinner--AnimationDuration             {@default `1.4s`}\n * @cssprop {<string>} --pf-c-spinner--AnimationTimingFunction       {@default `linear`}\n * @cssprop {<number>} --pf-c-spinner--stroke-width                  {@default `10`}\n * @cssprop {<color>}  --pf-c-spinner__path--Stroke                  {@default `#06c`}\n * @cssprop {<number>} --pf-c-spinner__path--StrokeWidth             {@default `10`}\n * @cssprop {<string>} --pf-c-spinner__path--AnimationTimingFunction {@default `ease-in-out`}\n */\n\nexport abstract class BaseSpinner extends LitElement {\n  static readonly styles = [styles];\n\n  /** Preset sizes for the spinner */\n  @property({ reflect: true }) size: SpinnerSize = 'xl';\n\n  /** Custom diameter of spinner set as CSS variable */\n  @property({ reflect: true }) diameter?: `${string}${'px' | '%' | 'rem' | 'em' | 'fr' | 'pt'}`;\n\n  override render() {\n    return html`\n      <svg role=\"progressbar\" viewBox=\"0 0 100 100\">\n        <circle cx=\"50\" cy=\"50\" r=\"45\" fill=\"none\" />\n      </svg>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"BaseSpinner.js","sourceRoot":"","sources":["BaseSpinner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAWtD;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAsB,WAAY,SAAQ,UAAU;IAApD;;QAGE,mCAAmC;QACN,SAAI,GAAgB,IAAI,CAAC;IAYxD,CAAC;aAfiB,WAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;IAQzB,MAAM;QACb,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAX4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAA0B;AAGzB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkE;SAP1E,WAAW","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\n\nimport styles from './BaseSpinner.css';\n\nexport type SpinnerSize = (\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n);\n\n/**\n * Base spinner class\n *\n * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Height                        {@default `3.375rem`}\n * @cssprop {<color>}  --pf-c-spinner--Color                         {@default `#06c`}\n * @cssprop {<length>} --pf-c-spinner--m-sm--diameter                {@default `0.625rem`}\n * @cssprop {<length>} --pf-c-spinner--m-md--diameter                {@default `1.125rem`}\n * @cssprop {<length>} --pf-c-spinner--m-lg--diameter                {@default `1.5rem`}\n * @cssprop {<length>} --pf-c-spinner--m-xl--diameter                {@default `3.375rem`}\n * @cssprop {<time>}   --pf-c-spinner--AnimationDuration             {@default `1.4s`}\n * @cssprop {<string>} --pf-c-spinner--AnimationTimingFunction       {@default `linear`}\n * @cssprop {<number>} --pf-c-spinner--stroke-width                  {@default `10`}\n * @cssprop {<color>}  --pf-c-spinner__path--Stroke                  {@default `#06c`}\n * @cssprop {<number>} --pf-c-spinner__path--StrokeWidth             {@default `10`}\n * @cssprop {<string>} --pf-c-spinner__path--AnimationTimingFunction {@default `ease-in-out`}\n */\n\nexport abstract class BaseSpinner extends LitElement {\n  static readonly styles = [styles];\n\n  /** Preset sizes for the spinner */\n  @property({ reflect: true }) size: SpinnerSize = 'xl';\n\n  /** Custom diameter of spinner set as CSS variable */\n  @property({ reflect: true }) diameter?: `${string}${'px' | '%' | 'rem' | 'em' | 'fr' | 'pt'}`;\n\n  override render() {\n    return html`\n      <svg role=\"progressbar\" viewBox=\"0 0 100 100\">\n        <circle cx=\"50\" cy=\"50\" r=\"45\" fill=\"none\" />\n      </svg>\n    `;\n  }\n}\n"]}

package/pf-spinner/pf-spinner.js

@@ -25,11 +25,11 @@ const styles = css `[hidden]{display:none!important}div{display:contents}svg{wid
  * @cssprop {<string>} --pf-c-spinner__path--AnimationTimingFunction {@default `ease-in-out`}
  */
 let PfSpinner = class PfSpinner extends BaseSpinner {
+    static { this.styles = [...BaseSpinner.styles, styles]; }
     render() {
         return html `<div style=${styleMap({ '--pf-c-spinner--diameter': this.diameter })}>${super.render()}</div>`;
     }
 };
-PfSpinner.styles = [...BaseSpinner.styles, styles];
 PfSpinner = __decorate([
     customElement('pf-spinner')
 ], PfSpinner);

package/pf-spinner/pf-spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-spinner.js","sourceRoot":"","sources":["pf-spinner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;;;AAG/C;;;;;;;;;;;;;;;;;;GAkBG;AAGH,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,WAAW;IAExC,MAAM;QACJ,OAAO,IAAI,CAAA,cAAc,QAAQ,CAAC,EAAE,0BAA0B,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,KAAK,CAAC,MAAM,EAAE,QAAQ,CAAC;IAC7G,CAAC;;AAHe,gBAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,AAAlC,CAAmC;AAD9C,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAKrB;SALY,SAAS","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport { BaseSpinner } from './BaseSpinner.js';\nimport styles from './pf-spinner.css';\n\n/**\n * A **spinner** is used to indicate to users that an action is in progress. For actions\n * that may take a long time, use a progress bar instead.\n *\n * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Height                        {@default `3.375rem`}\n * @cssprop {<color>}  --pf-c-spinner--Color                         {@default `#06c`}\n * @cssprop {<length>} --pf-c-spinner--m-sm--diameter                {@default `0.625rem`}\n * @cssprop {<length>} --pf-c-spinner--m-md--diameter                {@default `1.125rem`}\n * @cssprop {<length>} --pf-c-spinner--m-lg--diameter                {@default `1.5rem`}\n * @cssprop {<length>} --pf-c-spinner--m-xl--diameter                {@default `3.375rem`}\n * @cssprop {<time>}   --pf-c-spinner--AnimationDuration             {@default `1.4s`}\n * @cssprop {<string>} --pf-c-spinner--AnimationTimingFunction       {@default `linear`}\n * @cssprop {<number>} --pf-c-spinner--stroke-width                  {@default `10`}\n * @cssprop {<color>}  --pf-c-spinner__path--Stroke                  {@default `#06c`}\n * @cssprop {<number>} --pf-c-spinner__path--StrokeWidth             {@default `10`}\n * @cssprop {<string>} --pf-c-spinner__path--AnimationTimingFunction {@default `ease-in-out`}\n */\n\n@customElement('pf-spinner')\nexport class PfSpinner extends BaseSpinner {\n  static readonly styles = [...BaseSpinner.styles, styles];\n  render() {\n    return html`<div style=${styleMap({ '--pf-c-spinner--diameter': this.diameter })}>${super.render()}</div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-spinner': PfSpinner;\n  }\n}\n"]}
+{"version":3,"file":"pf-spinner.js","sourceRoot":"","sources":["pf-spinner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;;;AAG/C;;;;;;;;;;;;;;;;;;GAkBG;AAGH,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,WAAW;aACxB,WAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,AAAlC,CAAmC;IACzD,MAAM;QACJ,OAAO,IAAI,CAAA,cAAc,QAAQ,CAAC,EAAE,0BAA0B,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,KAAK,CAAC,MAAM,EAAE,QAAQ,CAAC;IAC7G,CAAC;;AAJU,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAKrB;SALY,SAAS","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport { BaseSpinner } from './BaseSpinner.js';\nimport styles from './pf-spinner.css';\n\n/**\n * A **spinner** is used to indicate to users that an action is in progress. For actions\n * that may take a long time, use a progress bar instead.\n *\n * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Height                        {@default `3.375rem`}\n * @cssprop {<color>}  --pf-c-spinner--Color                         {@default `#06c`}\n * @cssprop {<length>} --pf-c-spinner--m-sm--diameter                {@default `0.625rem`}\n * @cssprop {<length>} --pf-c-spinner--m-md--diameter                {@default `1.125rem`}\n * @cssprop {<length>} --pf-c-spinner--m-lg--diameter                {@default `1.5rem`}\n * @cssprop {<length>} --pf-c-spinner--m-xl--diameter                {@default `3.375rem`}\n * @cssprop {<time>}   --pf-c-spinner--AnimationDuration             {@default `1.4s`}\n * @cssprop {<string>} --pf-c-spinner--AnimationTimingFunction       {@default `linear`}\n * @cssprop {<number>} --pf-c-spinner--stroke-width                  {@default `10`}\n * @cssprop {<color>}  --pf-c-spinner__path--Stroke                  {@default `#06c`}\n * @cssprop {<number>} --pf-c-spinner__path--StrokeWidth             {@default `10`}\n * @cssprop {<string>} --pf-c-spinner__path--AnimationTimingFunction {@default `ease-in-out`}\n */\n\n@customElement('pf-spinner')\nexport class PfSpinner extends BaseSpinner {\n  static readonly styles = [...BaseSpinner.styles, styles];\n  render() {\n    return html`<div style=${styleMap({ '--pf-c-spinner--diameter': this.diameter })}>${super.render()}</div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-spinner': PfSpinner;\n  }\n}\n"]}

package/pf-switch/BaseSwitch.js

@@ -1,5 +1,4 @@
-var _BaseSwitch_instances, _BaseSwitch_internals, _BaseSwitch_initiallyDisabled, _BaseSwitch_onClick, _BaseSwitch_onKeyup, _BaseSwitch_toggle, _BaseSwitch_updateLabels;
-import { __classPrivateFieldGet, __decorate } from "tslib";
+import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators/property.js';
 import { css } from "lit";
@@ -10,22 +9,26 @@ const styles = css `:host{display:inline-block}svg{fill:currentcolor}[hidden]{di
 class BaseSwitch extends LitElement {
     constructor() {
         super(...arguments);
-        _BaseSwitch_instances.add(this);
-        _BaseSwitch_internals.set(this, this.attachInternals());
-        _BaseSwitch_initiallyDisabled.set(this, this.hasAttribute('disabled'));
+        this.#internals = this.attachInternals();
+        this.#initiallyDisabled = this.hasAttribute('disabled');
         this.showCheckIcon = false;
         this.checked = false;
-        this.disabled = __classPrivateFieldGet(this, _BaseSwitch_initiallyDisabled, "f");
+        this.disabled = this.#initiallyDisabled;
     }
+    static { this.styles = [styles]; }
+    static { this.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true, }; }
+    static { this.formAssociated = true; }
+    #internals;
+    #initiallyDisabled;
     get labels() {
-        return __classPrivateFieldGet(this, _BaseSwitch_internals, "f").labels;
+        return this.#internals.labels;
     }
     connectedCallback() {
         super.connectedCallback();
         this.setAttribute('role', 'checkbox');
-        this.addEventListener('click', __classPrivateFieldGet(this, _BaseSwitch_instances, "m", _BaseSwitch_onClick));
-        this.addEventListener('keyup', __classPrivateFieldGet(this, _BaseSwitch_instances, "m", _BaseSwitch_onKeyup));
-        __classPrivateFieldGet(this, _BaseSwitch_instances, "m", _BaseSwitch_updateLabels).call(this);
+        this.addEventListener('click', this.#onClick);
+        this.addEventListener('keyup', this.#onKeyup);
+        this.#updateLabels();
     }
     formDisabledCallback(disabled) {
         this.disabled = disabled;
@@ -41,47 +44,47 @@ class BaseSwitch extends LitElement {
     `;
     }
     updated() {
-        __classPrivateFieldGet(this, _BaseSwitch_internals, "f").ariaChecked = String(this.checked);
-        __classPrivateFieldGet(this, _BaseSwitch_internals, "f").ariaDisabled = String(this.disabled);
+        this.#internals.ariaChecked = String(this.checked);
+        this.#internals.ariaDisabled = String(this.disabled);
     }
-}
-_BaseSwitch_internals = new WeakMap(), _BaseSwitch_initiallyDisabled = 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'))) {
-            return;
+    #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'))) {
+                return;
+            }
         }
+        this.#toggle();
     }
-    __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);
+    #onKeyup(event) {
+        switch (event.key) {
+            case ' ':
+            case 'Enter':
+                event.preventDefault();
+                this.#toggle();
+        }
     }
-}, _BaseSwitch_toggle = function _BaseSwitch_toggle() {
-    if (this.disabled) {
-        return;
+    #toggle() {
+        if (this.disabled) {
+            return;
+        }
+        this.checked = !this.checked;
+        this.#updateLabels();
+        this.dispatchEvent(new Event('change', { bubbles: true }));
     }
-    this.checked = !this.checked;
-    __classPrivateFieldGet(this, _BaseSwitch_instances, "m", _BaseSwitch_updateLabels).call(this);
-    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;
+    #updateLabels() {
+        const labelState = this.checked ? 'on' : 'off';
+        if (this.labels.length > 1) {
+            for (const label of this.labels) {
+                label.hidden = label.dataset.state !== labelState;
+            }
         }
     }
-};
-BaseSwitch.styles = [styles];
-BaseSwitch.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true, };
-BaseSwitch.formAssociated = true;
+}
 __decorate([
     property({ reflect: true })
 ], BaseSwitch.prototype, "label", void 0);

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":"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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"]}

package/pf-switch/pf-switch.js

@@ -42,8 +42,8 @@ const styles = css `:host([checked]) #container{color:var(--pf-c-switch__input--
  * @cssprop {<length>} --pf-c-switch__toggle--Width {@default `calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))`}
  */
 let PfSwitch = class PfSwitch extends BaseSwitch {
+    static { this.styles = [...BaseSwitch.styles, styles]; }
 };
-PfSwitch.styles = [...BaseSwitch.styles, styles];
 PfSwitch = __decorate([
     customElement('pf-switch')
 ], PfSwitch);

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\n  declare 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;AAGH,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;aACtB,WAAM,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\n  declare global {\n    interface HTMLElementTagNameMap {\n      'pf-switch': PfSwitch;\n  }\n}\n"]}

package/pf-tabs/BaseTab.js

@@ -1,5 +1,4 @@
-var _BaseTab_instances, _BaseTab_internals, _BaseTab_clickHandler, _BaseTab_activeChanged, _BaseTab_disabledChanged;
-import { __classPrivateFieldGet, __decorate } from "tslib";
+import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';
 import { query } from 'lit/decorators/query.js';
@@ -15,16 +14,14 @@ export class TabExpandEvent extends ComposedEvent {
     }
 }
 class BaseTab extends LitElement {
-    constructor() {
-        super(...arguments);
-        _BaseTab_instances.add(this);
-        _BaseTab_internals.set(this, this.attachInternals());
-    }
+    static { this.styles = [style]; }
+    static { this.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }; }
+    #internals = this.attachInternals();
     connectedCallback() {
         super.connectedCallback();
-        this.id || (this.id = getRandomId(this.localName));
-        this.addEventListener('click', __classPrivateFieldGet(this, _BaseTab_instances, "m", _BaseTab_clickHandler));
-        __classPrivateFieldGet(this, _BaseTab_internals, "f").role = 'tab';
+        this.id ||= getRandomId(this.localName);
+        this.addEventListener('click', this.#clickHandler);
+        this.#internals.role = 'tab';
     }
     render() {
         return html `
@@ -38,36 +35,41 @@ class BaseTab extends LitElement {
     `;
     }
     updated(changed) {
-        __classPrivateFieldGet(this, _BaseTab_internals, "f").ariaSelected = String(this.ariaSelected);
+        this.#internals.ariaSelected = String(this.ariaSelected);
         if (changed.has('active')) {
-            __classPrivateFieldGet(this, _BaseTab_instances, "m", _BaseTab_activeChanged).call(this);
+            this.#activeChanged();
         }
         if (changed.has('disabled')) {
-            __classPrivateFieldGet(this, _BaseTab_instances, "m", _BaseTab_disabledChanged).call(this);
+            this.#disabledChanged();
         }
     }
     focus() {
         this.button.focus();
     }
-}
-_BaseTab_internals = new WeakMap(), _BaseTab_instances = new WeakSet(), _BaseTab_clickHandler = function _BaseTab_clickHandler() {
-    if (!this.disabled && __classPrivateFieldGet(this, _BaseTab_internals, "f").ariaDisabled !== 'true' && this.ariaDisabled !== 'true') {
-        this.active = true;
-        this.focus(); // safari fix
+    #clickHandler() {
+        if (!this.disabled && this.#internals.ariaDisabled !== 'true' && this.ariaDisabled !== 'true') {
+            this.active = true;
+            this.focus(); // safari fix
+        }
     }
-}, _BaseTab_activeChanged = function _BaseTab_activeChanged() {
-    if (this.active && !this.disabled) {
-        __classPrivateFieldGet(this, _BaseTab_internals, "f").ariaSelected = 'true';
+    #activeChanged() {
+        if (this.active && !this.disabled) {
+            this.#internals.ariaSelected = 'true';
+        }
+        else {
+            this.#internals.ariaSelected = 'false';
+        }
+        this.dispatchEvent(new TabExpandEvent(this.active, this));
     }
-    else {
-        __classPrivateFieldGet(this, _BaseTab_internals, "f").ariaSelected = 'false';
+    /**
+     * if a tab is disabled, then it is also aria-disabled
+     * if a tab is removed from disabled its not necessarily
+     * not still aria-disabled so we don't remove the aria-disabled
+     */
+    #disabledChanged() {
+        this.#internals.ariaDisabled = String(!!this.disabled);
     }
-    this.dispatchEvent(new TabExpandEvent(this.active, this));
-}, _BaseTab_disabledChanged = function _BaseTab_disabledChanged() {
-    __classPrivateFieldGet(this, _BaseTab_internals, "f").ariaDisabled = String(!!this.disabled);
-};
-BaseTab.styles = [style];
-BaseTab.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+}
 __decorate([
     queryAssignedElements({ slot: 'icon', flatten: true })
 ], BaseTab.prototype, "icons", void 0);

package/pf-tabs/BaseTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTab.js","sourceRoot":"","sources":["BaseTab.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { query } from 'lit/decorators/query.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\nimport { ComposedEvent } from '@patternfly/pfe-core';\n\nimport style from './BaseTab.css';\n\nexport class TabExpandEvent extends ComposedEvent {\n  constructor(\n    public active: boolean,\n    public tab: BaseTab,\n  ) {\n    super('expand');\n  }\n}\n\nexport abstract class BaseTab extends LitElement {\n  static readonly styles = [style];\n\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private icons!: Array<HTMLElement>;\n\n  @query('button') private button!: HTMLButtonElement;\n\n  /** `active` should be observed, and true when the tab is selected */\n  abstract active: boolean;\n\n  /** `active` should be observed, and true when the tab is disabled */\n  abstract disabled: boolean;\n\n  #internals = this.attachInternals();\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId(this.localName);\n    this.addEventListener('click', this.#clickHandler);\n    this.#internals.role = 'tab';\n  }\n\n  render() {\n    return html`\n      <button part=\"button\" ?disabled=\"${this.disabled}\">\n        <slot name=\"icon\"\n              part=\"icon\"\n              ?hidden=\"${!this.icons.length}\"\n              @slotchange=\"${() => this.requestUpdate()}\"></slot>\n        <slot part=\"text\"></slot>\n      </button>\n    `;\n  }\n\n  updated(changed: PropertyValues<this>) {\n    this.#internals.ariaSelected = String(this.ariaSelected);\n    if (changed.has('active')) {\n      this.#activeChanged();\n    }\n    if (changed.has('disabled')) {\n      this.#disabledChanged();\n    }\n  }\n\n  focus() {\n    this.button.focus();\n  }\n\n  #clickHandler() {\n    if (!this.disabled && this.#internals.ariaDisabled !== 'true' && this.ariaDisabled !== 'true') {\n      this.active = true;\n      this.focus(); // safari fix\n    }\n  }\n\n  #activeChanged() {\n    if (this.active && !this.disabled) {\n      this.#internals.ariaSelected = 'true';\n    } else {\n      this.#internals.ariaSelected = 'false';\n    }\n    this.dispatchEvent(new TabExpandEvent(this.active, this));\n  }\n\n  /**\n   * if a tab is disabled, then it is also aria-disabled\n   * if a tab is removed from disabled its not necessarily\n   * not still aria-disabled so we don't remove the aria-disabled\n   */\n  #disabledChanged() {\n    this.#internals.ariaDisabled = String(!!this.disabled);\n  }\n}\n"]}
+{"version":3,"file":"BaseTab.js","sourceRoot":"","sources":["BaseTab.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAClF,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;;;AAIrD,MAAM,OAAO,cAAe,SAAQ,aAAa;IAC/C,YACS,MAAe,EACf,GAAY;QAEnB,KAAK,CAAC,QAAQ,CAAC,CAAC;QAHT,WAAM,GAAN,MAAM,CAAS;QACf,QAAG,GAAH,GAAG,CAAS;IAGrB,CAAC;CACF;AAED,MAAsB,OAAQ,SAAQ,UAAU;aAC9B,WAAM,GAAG,CAAC,KAAK,CAAC,CAAC;aAE1B,sBAAiB,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;IAarF,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAEpC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAK,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACxC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACnD,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;yCAC0B,IAAI,CAAC,QAAQ;;;yBAG7B,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;6BACd,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;;KAGlD,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACzD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACzB,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAC3B,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;IACH,CAAC;IAED,KAAK;QACH,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;IACtB,CAAC;IAED,aAAa;QACX,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM,EAAE;YAC7F,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACnB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,aAAa;SAC5B;IACH,CAAC;IAED,cAAc;QACZ,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACjC,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,MAAM,CAAC;SACvC;aAAM;YACL,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,OAAO,CAAC;SACxC;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;IAC5D,CAAC;IAED;;;;OAIG;IACH,gBAAgB;QACd,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACzD,CAAC;;AApEO;IADP,qBAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACpB;AAEV;IAAxB,KAAK,CAAC,QAAQ,CAAC;uCAAoC;SARhC,OAAO","sourcesContent":["import type { PropertyValues } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { query } from 'lit/decorators/query.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\nimport { ComposedEvent } from '@patternfly/pfe-core';\n\nimport style from './BaseTab.css';\n\nexport class TabExpandEvent extends ComposedEvent {\n  constructor(\n    public active: boolean,\n    public tab: BaseTab,\n  ) {\n    super('expand');\n  }\n}\n\nexport abstract class BaseTab extends LitElement {\n  static readonly styles = [style];\n\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private icons!: Array<HTMLElement>;\n\n  @query('button') private button!: HTMLButtonElement;\n\n  /** `active` should be observed, and true when the tab is selected */\n  abstract active: boolean;\n\n  /** `active` should be observed, and true when the tab is disabled */\n  abstract disabled: boolean;\n\n  #internals = this.attachInternals();\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId(this.localName);\n    this.addEventListener('click', this.#clickHandler);\n    this.#internals.role = 'tab';\n  }\n\n  render() {\n    return html`\n      <button part=\"button\" ?disabled=\"${this.disabled}\">\n        <slot name=\"icon\"\n              part=\"icon\"\n              ?hidden=\"${!this.icons.length}\"\n              @slotchange=\"${() => this.requestUpdate()}\"></slot>\n        <slot part=\"text\"></slot>\n      </button>\n    `;\n  }\n\n  updated(changed: PropertyValues<this>) {\n    this.#internals.ariaSelected = String(this.ariaSelected);\n    if (changed.has('active')) {\n      this.#activeChanged();\n    }\n    if (changed.has('disabled')) {\n      this.#disabledChanged();\n    }\n  }\n\n  focus() {\n    this.button.focus();\n  }\n\n  #clickHandler() {\n    if (!this.disabled && this.#internals.ariaDisabled !== 'true' && this.ariaDisabled !== 'true') {\n      this.active = true;\n      this.focus(); // safari fix\n    }\n  }\n\n  #activeChanged() {\n    if (this.active && !this.disabled) {\n      this.#internals.ariaSelected = 'true';\n    } else {\n      this.#internals.ariaSelected = 'false';\n    }\n    this.dispatchEvent(new TabExpandEvent(this.active, this));\n  }\n\n  /**\n   * if a tab is disabled, then it is also aria-disabled\n   * if a tab is removed from disabled its not necessarily\n   * not still aria-disabled so we don't remove the aria-disabled\n   */\n  #disabledChanged() {\n    this.#internals.ariaDisabled = String(!!this.disabled);\n  }\n}\n"]}

package/pf-tabs/BaseTabPanel.d.ts

@@ -2,7 +2,6 @@ import { LitElement } from 'lit';
 export declare abstract class BaseTabPanel extends LitElement {
     #private;
     static readonly styles: import("lit").CSSResult[];
-    hidden: boolean;
     render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
 }

package/pf-tabs/BaseTabPanel.js

@@ -1,15 +1,10 @@
-var _BaseTabPanel_internals;
-import { __classPrivateFieldGet } from "tslib";
 import { LitElement, html } from 'lit';
 import { css } from "lit";
 const style = css `:host{display:block}:host([hidden]){display:none}`;
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 class BaseTabPanel extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.hidden = true;
-        _BaseTabPanel_internals.set(this, this.attachInternals());
-    }
+    static { this.styles = [style]; }
+    #internals = this.attachInternals();
     render() {
         return html `
       <slot></slot>
@@ -17,8 +12,9 @@ class BaseTabPanel extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.id || (this.id = getRandomId('pf-tab-panel'));
-        __classPrivateFieldGet(this, _BaseTabPanel_internals, "f").role = 'tabpanel';
+        this.id ||= getRandomId('pf-tab-panel');
+        this.hidden ??= true;
+        this.#internals.role = 'tabpanel';
         /*
          To make it easy for screen reader users to navigate from a tab
          to the beginning of content in the active tabpanel, the tabpanel
@@ -31,7 +27,5 @@ class BaseTabPanel extends LitElement {
         this.tabIndex = 0;
     }
 }
-_BaseTabPanel_internals = new WeakMap();
-BaseTabPanel.styles = [style];
 export { BaseTabPanel };
 //# sourceMappingURL=BaseTabPanel.js.map

package/pf-tabs/BaseTabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTabPanel.js","sourceRoot":"","sources":["BaseTabPanel.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;;;AAIvC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,MAAsB,YAAa,SAAQ,UAAU;IAArD;;QAGE,WAAM,GAAG,IAAI,CAAC;QAEd,kCAAa,IAAI,CAAC,eAAe,EAAE,EAAC;IAuBtC,CAAC;IArBC,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAP,IAAI,CAAC,EAAE,GAAK,WAAW,CAAC,cAAc,CAAC,EAAC;QACxC,uBAAA,IAAI,+BAAW,CAAC,IAAI,GAAG,UAAU,CAAC;QAClC;;;;;;;;UAQE;QACF,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IACpB,CAAC;;;AA1Be,mBAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;SADb,YAAY","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport style from './BaseTabPanel.css';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nexport abstract class BaseTabPanel extends LitElement {\n  static readonly styles = [style];\n\n  hidden = true;\n\n  #internals = this.attachInternals();\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId('pf-tab-panel');\n    this.#internals.role = 'tabpanel';\n    /*\n     To make it easy for screen reader users to navigate from a tab\n     to the beginning of content in the active tabpanel, the tabpanel\n     element has tabindex=\"0\" to include the panel in the page Tab sequence.\n     It is recommended that all tabpanel elements in a tab set are focusable\n     if there are any panels in the set that contain content where the first\n     element in the panel is not focusable.\n     https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-automatic\n    */\n    this.tabIndex = 0;\n  }\n}\n"]}
+{"version":3,"file":"BaseTabPanel.js","sourceRoot":"","sources":["BaseTabPanel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;;;AAIvC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,MAAsB,YAAa,SAAQ,UAAU;aACnC,WAAM,GAAG,CAAC,KAAK,CAAC,CAAC;IAEjC,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAEpC,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAK,WAAW,CAAC,cAAc,CAAC,CAAC;QACxC,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC;QACrB,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC;QAElC;;;;;;;;UAQE;QACF,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IACpB,CAAC;;SA3BmB,YAAY","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport style from './BaseTabPanel.css';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nexport abstract class BaseTabPanel extends LitElement {\n  static readonly styles = [style];\n\n  #internals = this.attachInternals();\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId('pf-tab-panel');\n    this.hidden ??= true;\n    this.#internals.role = 'tabpanel';\n\n    /*\n     To make it easy for screen reader users to navigate from a tab\n     to the beginning of content in the active tabpanel, the tabpanel\n     element has tabindex=\"0\" to include the panel in the page Tab sequence.\n     It is recommended that all tabpanel elements in a tab set are focusable\n     if there are any panels in the set that contain content where the first\n     element in the panel is not focusable.\n     https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-automatic\n    */\n    this.tabIndex = 0;\n  }\n}\n"]}