@patternfly/elements 2.3.2 → 3.0.0

package/pf-select/pf-option.js

@@ -0,0 +1,144 @@
+var _PfOption_value, _PfOption_internals;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { queryAssignedNodes } from 'lit/decorators/query-assigned-nodes.js';
+import { property } from 'lit/decorators/property.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
+import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
+import { css } from "lit";
+const styles = css `:host {\n  display: block;\n}\n\n:host([hidden]),\n*[hidden] {\n  display: none !important;\n}\n\n:host([disabled]) {\n  pointer-events: none !important;\n  cursor: not-allowed !important;\n}\n\n:host(:focus) #outer,\n:host(:hover) #outer,\n:host([aria-selected="true"]) {\n  background-color: #e0e0e0;\n}\n\n#outer {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: flex-start;\n  padding: var(--pf-global--spacer--sm, 0.5rem) var(--pf-global--spacer--md, 1rem);\n  min-height: calc(44px - 2 * var(--pf-global--spacer--sm, 0.5rem));\n  min-width: calc(44px - 2 * var(--pf-global--spacer--md, 1rem));\n}\n\n#outer.active {\n  background-color: var(--_active-descendant-color, var(--pf-theme--color--surface--lighter, #f0f0f0));\n}\n\n:host([disabled]) #outer {\n  color: var(--pf-global--Color--dark-200, #6a6e73) !important;\n}\n\ninput[type="checkbox"] {\n  margin-inline-end: 1em;\n  display: var(--_pf-option-checkboxes-display, none);\n  pointer-events: none;\n  flex: 0 0 auto;\n}\n\nspan {\n  flex: 1 1 auto;\n}\n\nsvg {\n  font-size: var(--pf-c-select__menu-item-icon--FontSize, var(--pf-global--icon--FontSize--sm, 0.675rem));\n  color: var(--_svg-color, var(--pf-theme--color--accent, #0066cc));\n  width: 1em;\n  height: 1em;\n  margin-inline-start: 1em;\n  text-align: right;\n  flex: 0 0 auto;\n  display: var(--_pf-option-svg-display, block);\n}\n\n#description {\n  display: block;\n  flex: 1 0 100%;\n}\n\nslot[name="description"] {\n  font-size: var(--pf-global--FontSize--xs, 0.75rem);\n  color: var(--pf-global--Color--dark-200, #6a6e73);\n}\n\n::slotted([slot="icon"]) {\n  margin-inline-end: 0.5em;\n}\n\n`;
+/**
+ * Option within a listbox
+ *
+ * @slot -
+ *        option text
+ * @slot icon
+ *        optional icon
+ * @slot description
+ *        optional description
+ */
+let PfOption = class PfOption extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** whether option is disabled */
+        this.disabled = false;
+        /** whether option is selected */
+        this.selected = false;
+        /** whether option is active descendant */
+        this.active = false;
+        /** Optional option description; overridden by description slot. */
+        this.description = '';
+        _PfOption_value.set(this, void 0);
+        _PfOption_internals.set(this, InternalsController.of(this, { role: 'option' }));
+    }
+    /** form value for this option */
+    get value() {
+        return __classPrivateFieldGet(this, _PfOption_value, "f") ?? this.textContent ?? '';
+    }
+    set value(v) {
+        __classPrivateFieldSet(this, _PfOption_value, v, "f");
+    }
+    /**
+     * this option's position relative to the other options
+     */
+    set posInSet(posInSet) {
+        __classPrivateFieldGet(this, _PfOption_internals, "f").ariaPosInSet = `${Math.max(0, posInSet ?? 0)}`;
+    }
+    get posInSet() {
+        const parsed = parseInt(__classPrivateFieldGet(this, _PfOption_internals, "f").ariaPosInSet ?? '0');
+        return Number.isNaN(parsed) ? null : parsed;
+    }
+    /**
+     * total number of options
+     */
+    set setSize(setSize) {
+        __classPrivateFieldGet(this, _PfOption_internals, "f").ariaSetSize = `${Math.max(0, setSize ?? 0)}`;
+    }
+    get setSize() {
+        try {
+            const int = parseInt(__classPrivateFieldGet(this, _PfOption_internals, "f").ariaSetSize ?? '0');
+            if (Number.isNaN(int)) {
+                return 0;
+            }
+            else {
+                return int;
+            }
+        }
+        catch {
+            return 0;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.id || (this.id = getRandomId());
+    }
+    render() {
+        const { disabled, active } = this;
+        return html `
+      <div id="outer" class="${classMap({ active, disabled })}">
+        <input type="checkbox"
+               aria-hidden="true"
+               role="presentation"
+               tabindex="-1"
+               ?checked="${this.selected}"
+               ?disabled="${this.disabled}">
+        <slot name="icon"></slot>
+        <span>
+          <slot name="create"></slot>
+          <slot></slot>
+        </span>
+        <svg ?hidden="${!this.selected}"
+             viewBox="0 0 512 512"
+             fill="currentColor"
+             aria-hidden="true">
+          <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"></path>
+        </svg>
+        <slot id="description" name="description">${this.description ?? ''}</slot>
+      </div>
+    `;
+    }
+    willUpdate(changed) {
+        if (changed.has('selected') &&
+            // don't fire on initialization
+            !(changed.get('selected') === undefined) && this.selected === false) {
+            __classPrivateFieldGet(this, _PfOption_internals, "f").ariaSelected = this.selected ? 'true' : 'false';
+        }
+        if (changed.has('disabled')) {
+            __classPrivateFieldGet(this, _PfOption_internals, "f").ariaDisabled = String(!!this.disabled);
+        }
+    }
+    /**
+     * text content within option (used for filtering)
+     */
+    get optionText() {
+        return this._slottedText.map(node => node.textContent).join('').trim();
+    }
+};
+_PfOption_value = new WeakMap();
+_PfOption_internals = new WeakMap();
+PfOption.styles = [styles];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfOption.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true })
+], PfOption.prototype, "value", null);
+__decorate([
+    property({ type: Boolean })
+], PfOption.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], PfOption.prototype, "active", void 0);
+__decorate([
+    property()
+], PfOption.prototype, "description", void 0);
+__decorate([
+    queryAssignedNodes({ slot: '', flatten: true })
+], PfOption.prototype, "_slottedText", void 0);
+PfOption = __decorate([
+    customElement('pf-option')
+], PfOption);
+export { PfOption };
+//# sourceMappingURL=pf-option.js.map

package/pf-select/pf-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-option.js","sourceRoot":"","sources":["pf-option.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { queryAssignedNodes } from 'lit/decorators/query-assigned-nodes.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport styles from './pf-option.css';\n\n/**\n * Option within a listbox\n *\n * @slot -\n *        option text\n * @slot icon\n *        optional icon\n * @slot description\n *        optional description\n */\n@customElement('pf-option')\nexport class PfOption extends LitElement {\n  static readonly styles = [styles];\n\n  /** whether option is disabled */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** form value for this option */\n  @property({ reflect: true })\n  get value() {\n    return this.#value ?? this.textContent ?? '';\n  }\n\n  set value(v: string) {\n    this.#value = v;\n  }\n\n  /** whether option is selected */\n  @property({ type: Boolean }) selected = false;\n\n  /** whether option is active descendant */\n  @property({ type: Boolean }) active = false;\n\n  /** Optional option description; overridden by description slot. */\n  @property() description = '';\n\n  @queryAssignedNodes({ slot: '', flatten: true })\n  private _slottedText!: Node[];\n\n  /**\n   * this option's position relative to the other options\n   */\n  set posInSet(posInSet: number | null) {\n    this.#internals.ariaPosInSet = `${Math.max(0, posInSet ?? 0)}`;\n  }\n\n  get posInSet() {\n    const parsed = parseInt(this.#internals.ariaPosInSet ?? '0');\n    return Number.isNaN(parsed) ? null : parsed;\n  }\n\n  /**\n   * total number of options\n   */\n  set setSize(setSize: number | null) {\n    this.#internals.ariaSetSize = `${Math.max(0, setSize ?? 0)}`;\n  }\n\n  get setSize() {\n    try {\n      const int = parseInt(this.#internals.ariaSetSize ?? '0');\n      if (Number.isNaN(int)) {\n        return 0;\n      } else {\n        return int;\n      }\n    } catch {\n      return 0;\n    }\n  }\n\n  #value?: string;\n\n  #internals = InternalsController.of(this, { role: 'option' });\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId();\n  }\n\n  render() {\n    const { disabled, active } = this;\n    return html`\n      <div id=\"outer\" class=\"${classMap({ active, disabled })}\">\n        <input type=\"checkbox\"\n               aria-hidden=\"true\"\n               role=\"presentation\"\n               tabindex=\"-1\"\n               ?checked=\"${this.selected}\"\n               ?disabled=\"${this.disabled}\">\n        <slot name=\"icon\"></slot>\n        <span>\n          <slot name=\"create\"></slot>\n          <slot></slot>\n        </span>\n        <svg ?hidden=\"${!this.selected}\"\n             viewBox=\"0 0 512 512\"\n             fill=\"currentColor\"\n             aria-hidden=\"true\">\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\"></path>\n        </svg>\n        <slot id=\"description\" name=\"description\">${this.description ?? ''}</slot>\n      </div>\n    `;\n  }\n\n  willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('selected') &&\n      // don't fire on initialization\n      !(changed.get('selected') === undefined) && this.selected === false) {\n      this.#internals.ariaSelected = this.selected ? 'true' : 'false';\n    }\n    if (changed.has('disabled')) {\n      this.#internals.ariaDisabled = String(!!this.disabled);\n    }\n  }\n\n  /**\n   * text content within option (used for filtering)\n   */\n  get optionText() {\n    return this._slottedText.map(node => node.textContent).join('').trim();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-option': PfOption;\n  }\n}\n"]}

package/pf-select/pf-select.css

@@ -0,0 +1,371 @@
+:host {
+  font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);
+  font-size: var(--pf-global--FontSize--md, 16px);
+  font-weight: var(--pf-global--FontWeight--normal, 400);
+	color: var(--pf-global--Color--100, #151515);
+  --_pf-option-checkboxes-display: none;
+  --_pf-option-svg-display: block;
+	--pf-c-select__toggle--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);
+	--pf-c-select__toggle--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__toggle--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);
+	--pf-c-select__toggle--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__toggle--MinWidth: var(--pf-global--target-size--MinWidth, 44px);
+	--pf-c-select__toggle--FontSize: var(--pf-global--FontSize--md, 1rem);
+	--pf-c-select__toggle--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	--pf-c-select__toggle--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+	--pf-c-select__toggle--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	--pf-c-select__toggle--before--BorderTopWidth: var(--pf-global--BorderWidth--sm, 1px);
+	--pf-c-select__toggle--before--BorderRightWidth: var(--pf-global--BorderWidth--sm, 1px);
+	--pf-c-select__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
+	--pf-c-select__toggle--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm, 1px);
+	--pf-c-select__toggle--before--BorderWidth: initial;
+	--pf-c-select__toggle--before--BorderTopColor: var(--pf-global--BorderColor--300, #f0f0f0);
+	--pf-c-select__toggle--before--BorderRightColor: var(--pf-global--BorderColor--300, #f0f0f0);
+	--pf-c-select__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);
+	--pf-c-select__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300, #f0f0f0);
+	--pf-c-select__toggle--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-select__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+	--pf-c-select__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+	--pf-c-select__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-select__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+	--pf-c-select__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-select__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+	--pf-c-select__toggle--m-expanded--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-select__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);
+	--pf-c-select__toggle--m-plain--before--BorderColor: transparent;
+	--pf-c-select__toggle--m-placeholder--Color: transparent;
+	--pf-c-select--m-invalid__toggle--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-select--m-invalid__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-select--m-invalid__toggle--hover--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-select--m-invalid__toggle--focus--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-select--m-invalid__toggle--active--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-select--m-invalid__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-select--m-invalid__toggle-status-icon--Color: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-select--m-success__toggle--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+	--pf-c-select--m-success__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-select--m-success__toggle--hover--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+	--pf-c-select--m-success__toggle--focus--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+	--pf-c-select--m-success__toggle--active--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+	--pf-c-select--m-success__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+	--pf-c-select--m-success__toggle-status-icon--Color: var(--pf-global--success-color--100, #3e8635);
+	--pf-c-select--m-warning__toggle--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+	--pf-c-select--m-warning__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-select--m-warning__toggle--hover--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+	--pf-c-select--m-warning__toggle--focus--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+	--pf-c-select--m-warning__toggle--active--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+	--pf-c-select--m-warning__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+	--pf-c-select--m-warning__toggle-status-icon--Color: var(--pf-global--warning-color--100, #f0ab00);
+	--pf-c-select__toggle-wrapper--not-last-child--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
+	--pf-c-select__toggle-wrapper--MaxWidth: calc(100% - var(--pf-global--spacer--lg, 1.5rem));
+	--pf-c-select__toggle-wrapper--c-chip-group--MarginTop: 0.3125rem;
+	--pf-c-select__toggle-wrapper--c-chip-group--MarginBottom: 0.3125rem;
+	--pf-c-select__toggle-typeahead--FlexBasis: 10em;
+	--pf-c-select__toggle-typeahead--BackgroundColor: transparent;
+	--pf-c-select__toggle-typeahead--BorderTop: var(--pf-global--BorderWidth--sm, 1px) solid transparent;
+	--pf-c-select__toggle-typeahead--BorderRight: none;
+	--pf-c-select__toggle-typeahead--BorderLeft: none;
+	--pf-c-select__toggle-typeahead--MinWidth: 7.5rem;
+	--pf-c-select__toggle-typeahead--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--md));
+	--pf-c-select__toggle--m-placeholder__toggle-text--Color: var(--pf-global--Color--dark-200, #6a6e73);
+	--pf-c-select__toggle-icon--toggle-text--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+	--pf-c-select__toggle-badge--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__toggle-status-icon--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+	--pf-c-select__toggle-status-icon--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-select__toggle-arrow--MarginLeft: var(--pf-global--spacer--md, 1rem);
+	--pf-c-select__toggle-arrow--MarginRight: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__toggle-arrow--with-clear--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate: 180deg;
+	--pf-c-select--m-plain__toggle-arrow--Color: var(--pf-global--Color--200, #6a6e73);
+	--pf-c-select--m-plain--hover__toggle-arrow--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-select__toggle-clear--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__toggle-clear--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	--pf-c-select__toggle-clear--toggle-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__toggle-button--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-select__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #fff);
+	--pf-c-select__menu--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));
+	--pf-c-select__menu--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__menu--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__menu--Top: calc(100% + var(--pf-global--spacer--xs, 0.25rem));
+	--pf-c-select__menu--ZIndex: var(--pf-global--ZIndex--sm, 200);
+	--pf-c-select__menu--Width: auto;
+	--pf-c-select__menu--MinWidth: 100%;
+	--pf-c-select__menu--m-top--TranslateY: calc(-100% - var(--pf-global--spacer--xs, 0.25rem));
+	--pf-c-select__list-item--m-loading--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__menu-item--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__menu-item--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	--pf-c-select__menu-item--m-selected--PaddingRight: var(--pf-global--spacer--2xl, 3rem);
+	--pf-c-select__menu-item--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__menu-item--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	--pf-c-select__menu-item--FontSize: var(--pf-global--FontSize--md, 1rem);
+	--pf-c-select__menu-item--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	--pf-c-select__menu-item--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+	--pf-c-select__menu-item--Color: var(--pf-global--Color--dark-100, #151515);
+	--pf-c-select__menu-item--disabled--Color: var(--pf-global--Color--dark-200, #6a6e73);
+	--pf-c-select__menu-item--Width: 100%;
+	--pf-c-select__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300, #f0f0f0);
+	--pf-c-select__menu-item--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300, #f0f0f0);
+	--pf-c-select__menu-item--disabled--BackgroundColor: transparent;
+	--pf-c-select__menu-item--m-link--Width: auto;
+	--pf-c-select__menu-item--m-link--hover--BackgroundColor: transparent;
+	--pf-c-select__menu-item--m-link--focus--BackgroundColor: transparent;
+	--pf-c-select__menu-item--m-action--Color: var(--pf-global--Color--200, #6a6e73);
+	--pf-c-select__menu-item--m-action--hover--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-select__menu-item--m-action--focus--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-select__menu-item--m-action--disabled--Color: var(--pf-global--disabled-color--200, #d2d2d2);
+	--pf-c-select__menu-item--m-action--Width: auto;
+	--pf-c-select__menu-item--m-action--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
+	--pf-c-select__menu-item--m-action--hover--BackgroundColor: transparent;
+	--pf-c-select__menu-item--m-action--focus--BackgroundColor: transparent;
+	--pf-c-select__menu-item--hover__menu-item--m-action--Color: var(--pf-global--Color--200, #6a6e73);
+	--pf-c-select__menu-item--m-favorite-action--Color: var(--pf-global--Color--200, #6a6e73);
+	--pf-c-select__menu-item--m-favorite-action--hover--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-select__menu-item--m-favorite-action--focus--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color: var(--pf-global--palette--gold-400, #f0ab00);
+	--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color: var(--pf-global--palette--gold-500, #c58c00);
+	--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color: var(--pf-global--palette--gold-500, #c58c00);
+	--pf-c-select__menu-item--m-load--Color: var(--pf-global--link--Color, #06c);
+	--pf-c-select__menu-item-icon--Color: var(--pf-global--active-color--100, #06c);
+	--pf-c-select__menu-item-icon--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
+	--pf-c-select__menu-item-icon--Right: var(--pf-global--spacer--md, 1rem);
+	--pf-c-select__menu-item-icon--Top: 50%;
+	--pf-c-select__menu-item-icon--TranslateY: -50%;
+	--pf-c-select__menu-item-action-icon--MinHeight: calc(var(--pf-c-select__menu-item--FontSize) * var(--pf-c-select__menu-item--LineHeight));
+	--pf-c-select__menu-item--match--FontWeight: var(--pf-global--FontWeight--bold, 700);
+	--pf-c-select__menu-search--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__menu-search--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
+	--pf-c-select__menu-search--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+	--pf-c-select__menu-search--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);
+	--pf-c-select__menu-group--menu-group--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__menu-group-title--PaddingTop: var(--pf-c-select__menu-item--PaddingTop);
+	--pf-c-select__menu-group-title--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
+	--pf-c-select__menu-group-title--PaddingBottom: var(--pf-c-select__menu-item--PaddingBottom);
+	--pf-c-select__menu-group-title--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);
+	--pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
+	--pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	--pf-c-select__menu-group-title--Color: var(--pf-global--Color--dark-200, #6a6e73);
+	--pf-c-select__menu-item-count--MarginLeft: var(--pf-global--spacer--md, 1rem);
+	--pf-c-select__menu-item-count--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+	--pf-c-select__menu-item-count--Color: var(--pf-global--Color--200, #6a6e73);
+	--pf-c-select__menu-item--disabled__menu-item-count--Color: var(--pf-global--Color--dark-200, #6a6e73);
+	--pf-c-select__menu-item-description--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
+	--pf-c-select__menu-item-description--Color: var(--pf-global--Color--200, #6a6e73);
+	--pf-c-select__menu-item-description--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
+	--pf-c-select__menu-item-main--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
+	--pf-c-select__menu-item--m-selected__menu-item-main--PaddingRight: var(--pf-c-select__menu-item--m-selected--PaddingRight);
+	--pf-c-select__menu-footer--BoxShadow: var(--pf-global--BoxShadow--sm-top, 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
+	--pf-c-select__menu-footer--PaddingTop: var(--pf-global--spacer--md, 1rem);
+	--pf-c-select__menu-footer--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	--pf-c-select__menu-footer--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+	--pf-c-select__menu-footer--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	--pf-c-select__menu-footer--MarginTop: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select__menu-footer--MarginBottom: calc(var(--pf-global--spacer--sm, 0.5rem) * -1);
+	--pf-c-select-menu--c-divider--MarginTop: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-select-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm, 0.5rem);
+}
+
+:host, #outer {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+:host([hidden]),
+*[hidden] {
+  display: none !important;
+}
+
+:host([disabled]) {
+  pointer-events: none !important;
+}
+
+#outer.disabled {
+  color: var(--pf-global--Color--dark-200, #6a6e73) !important;
+}
+
+#outer {
+  position: relative;
+}
+
+/* TODO(bennyp): see if we can get rid of this wrapping node, for perf reasons */
+#listbox-container {
+  display: inline-flex;
+  border: 1px solid var(--pf-global--BorderColor--100, #d2d2d2);
+  position: absolute;
+  background-color: var(--pf-theme--color--surface--lightest, #fff) !important;
+  opacity: 0;
+  --_active-descendant-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important
+}
+
+#outer.expanded #listbox-container {
+  opacity: 1;
+  z-index: 9999 !important;
+}
+
+#listbox {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+}
+
+#listbox slot.disabled {
+  color: var(--pf-c-list__item-icon--Color, #6a6e73) !important;
+  background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+  border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+  pointer-events: none;
+  cursor: not-allowed;;
+  --_active-descendant-color: transparent;
+  --_svg-color: var(--pf-c-list__item-icon--Color, #6a6e73) !important;
+}
+
+
+#toggle {
+  background-color: var(--pf-theme--color--surface--lightest, #fff) !important;
+}
+
+#toggle,
+#toggle-button,
+#toggle-input {
+  display: flex;
+  align-items: center;
+  font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);
+  font-size: var(--pf-global--FontSize--md, 16px);
+  font-weight: var(--pf-global--FontWeight--normal, 400);
+  line-height: 1.6;
+}
+
+#toggle {
+  border: 1px solid var(--pf-global--BorderColor--100, #d2d2d2);
+  border-bottom-color: var(--pf-theme--color--text, #151515);
+  justify-content: space-between;
+}
+
+.expanded #toggle {
+  border-bottom-width: 2px;
+  border-bottom-color: var(--pf-theme--color--accent, #0066cc);
+}
+
+.disabled #toggle {
+  color: var(--pf-global--Color--dark-200, #6a6e73) !important;
+  background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+  border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+}
+
+#toggle-input,
+#toggle-button {
+  background: transparent;
+  border: none;
+  text-align: left;
+  border-radius: 0;
+  flex: 1 0 auto;
+  min-height: 44px;
+  min-width: 44px;
+}
+
+#toggle-input {
+  justify-content: space-between;
+  padding: var(--pf-global--spacer--xs, 0.25rem) var(--pf-global--spacer--sm, 0.5rem);
+}
+
+.disabled #toggle-input {
+  pointer-events: none;
+}
+
+#toggle-button {
+  color: currentColor;
+  background-color: transparent;
+  justify-content: flex-end;
+  padding: var(--pf-global--spacer--sm, 0.5rem);
+}
+
+#outer.typeahead #toggle-button {
+  flex: 0 0 auto;
+}
+
+#toggle-badge {
+  flex: 1 0 auto;
+  margin-inline-start: 0.25em;
+}
+
+#toggle-text {
+  flex: 1 1 auto;
+}
+
+#toggle-text.badge {
+  flex: 0 1 auto;
+}
+
+pf-badge {
+  padding: 0;
+}
+
+#toggle svg {
+  width: 1em;
+  height: 1em;
+  flex: 0 0 auto;
+  margin-inline-start: 1em;
+}
+
+#description {
+  display: block;
+}
+
+#listbox.checkboxes {
+  --_pf-option-checkboxes-display: inline;
+  --_pf-option-svg-display: none;
+}
+
+::slotted(pf-option-group + hr) {
+  display: none !important;
+}
+
+::slotted(hr:has(+ pf-option-group)) {
+  display: none !important;
+}
+
+.offscreen {
+  position: absolute;
+  left: -99999;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+
+::slotted(hr) {
+  --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm, 1px);
+  --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);
+  --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);
+  --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100, #d2d2d2);
+  --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);
+  --pf-c-divider--after--FlexBasis: 100%;
+  --pf-c-divider--after--Inset: 0%;
+  --pf-c-divider--m-vertical--after--FlexBasis: 100%;
+  --pf-c-divider--m-horizontal--Display: flex;
+  --pf-c-divider--m-horizontal--FlexDirection: row;
+  --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);
+  --pf-c-divider--m-horizontal--after--Width: auto;
+  --pf-c-divider--m-vertical--Display: inline-flex;
+  --pf-c-divider--m-vertical--FlexDirection: column;
+  --pf-c-divider--m-vertical--after--Height: auto;
+  --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);
+  --pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);
+  --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+  --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+  --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+  --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+  display: var(--pf-c-divider--Display, flex);
+	flex-direction: var(--pf-c-divider--FlexDirection);
+	border: 0;
+  width: 100%;
+  margin-top: var(--pf-c-select-menu--c-divider--MarginTop);
+  margin-bottom: var(--pf-c-select-menu--c-divider--MarginBottom);
+}
+
+::slotted(hr)::after {
+  content: '';
+  width: var(--pf-c-divider--after--Width, 100%) !important;
+  height: var(--pf-c-divider--after--Height, 1px);
+  background-color: var(--pf-c-divider--after--BackgroundColor);
+  flex: 1 0 100%;
+}

package/pf-select/pf-select.d.ts

@@ -0,0 +1,98 @@
+import { LitElement, type PropertyValues } from 'lit';
+import { type Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
+import { PfOption } from './pf-option.js';
+export interface PfSelectUserOptions {
+    id: string;
+    value: string;
+}
+export declare class PfSelectChangeEvent extends Event {
+    constructor();
+}
+/**
+ * A select list enables users to select one or more items from a list.
+ *
+ * A select component consists of a toggle control to open and close a menu of actions or links.
+ * Selects differ from dropdowns in that they persist selection,
+ * whereas dropdowns are typically used to present a list of actions or links.
+ *
+ * @slot - insert `pf-option` and/or `pf-option-groups` here
+ * @slot placeholder - placeholder text for the select. Overrides the `placeholder` attribute.
+ * @fires open - when the menu toggles open
+ * @fires close - when the menu toggles closed
+ */
+export declare class PfSelect extends LitElement {
+    #private;
+    static readonly styles: CSSStyleSheet[];
+    static readonly shadowRootOptions: ShadowRootInit;
+    static readonly formAssociated = true;
+    /** Variant of rendered Select */
+    variant: 'single' | 'checkbox';
+    /**
+     * Accessible label for the select
+     */
+    accessibleLabel?: string;
+    /**
+     * Accessible label for chip group used to describe chips
+     */
+    accessibleCurrentSelectionsLabel: string;
+    /**
+     * multi listbox button text
+     */
+    itemsSelectedText: string;
+    /**
+     * whether select is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the select listbox is expanded
+     */
+    expanded: boolean;
+    /**
+     * enable to flip listbox when it reaches boundary
+     */
+    enableFlip: boolean;
+    /** Current form value */
+    value?: string;
+    /** Placeholder entry. Overridden by the `placeholder` slot */
+    placeholder?: string;
+    /**
+     * Indicates initial popover position.
+     * There are 6 options: `bottom`, `top`, `top-start`, `top-end`, `bottom-start`, `bottom-end`.
+     * Default is `bottom`.
+     */
+    position: Placement;
+    /** Flag indicating if selection badge should be hidden for checkbox variant,default false */
+    checkboxSelectionBadgeHidden: boolean;
+    /**
+     * Single select option value for single select menus,
+     * or array of select option values for multi select.
+     */
+    set selected(optionsList: PfOption | PfOption[]);
+    get selected(): PfOption | PfOption[] | undefined;
+    /**
+     * array of slotted options
+     */
+    get options(): PfOption[];
+    private _toggle?;
+    willUpdate(changed: PropertyValues<this>): void;
+    render(): import("lit").TemplateResult<1>;
+    updated(changed: PropertyValues<this>): void;
+    firstUpdated(): void;
+    /**
+     * Opens the dropdown
+     */
+    show(): Promise<void>;
+    /**
+     * Closes listbox
+     */
+    hide(): Promise<void>;
+    /**
+     * toggles popup based on current state
+     */
+    toggle(): Promise<void>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-select': PfSelect;
+    }
+}