diff --git a/package.json b/package.json index 25ce02b9ff..aa8d7be64a 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,6 @@ "license": "Apache-2.0", "type": "module", "dependencies": { - "@awesome.me/webawesome": "3.0.0-beta.4", "@babel/runtime": "7.28.3", "@braintree/sanitize-url": "7.1.1", "@codemirror/autocomplete": "6.18.7", @@ -52,6 +51,7 @@ "@fullcalendar/list": "6.1.19", "@fullcalendar/luxon3": "6.1.19", "@fullcalendar/timegrid": "6.1.19", + "@home-assistant/webawesome": "3.0.0-beta.4.ha.1", "@lezer/highlight": "1.2.1", "@lit-labs/motion": "1.0.9", "@lit-labs/observers": "2.0.6", diff --git a/src/components/ha-button-group.ts b/src/components/ha-button-group.ts deleted file mode 100644 index b18aa51481..0000000000 --- a/src/components/ha-button-group.ts +++ /dev/null @@ -1,82 +0,0 @@ -import ButtonGroup from "@awesome.me/webawesome/dist/components/button-group/button-group"; -import { customElement } from "lit/decorators"; -import type { HaButton } from "./ha-button"; -import { StateSet } from "../resources/polyfills/stateset"; - -export type Appearance = "accent" | "filled" | "outlined" | "plain"; - -/** - * Finds an ha-button element either as the current element or within its descendants. - * @param el - The HTML element to search from - * @returns The found HaButton element, or null if not found - */ -function findButton(el: HTMLElement) { - const selector = "ha-button"; - return (el.closest(selector) ?? el.querySelector(selector)) as HaButton; -} - -/** - * @element ha-button-group - * @extends {ButtonGroup} - * @summary - * Group buttons. Extend Webawesome to be able to work with ha-button tags - * - * @documentation https://webawesome.com/components/button-group - */ -@customElement("ha-button-group") // @ts-expect-error Intentionally overriding private methods -export class HaButtonGroup extends ButtonGroup { - attachInternals() { - const internals = super.attachInternals(); - Object.defineProperty(internals, "states", { - value: new StateSet(this, internals.states), - }); - return internals; - } - - // @ts-expect-error updateClassNames is used in super class - // eslint-disable-next-line @typescript-eslint/naming-convention - private override updateClassNames() { - const slottedElements = [ - ...this.defaultSlot.assignedElements({ flatten: true }), - ] as HTMLElement[]; - this.hasOutlined = false; - - slottedElements.forEach((el) => { - const index = slottedElements.indexOf(el); - const button = findButton(el); - - if (button) { - if ((button as HaButton).appearance === "outlined") - this.hasOutlined = true; - if (this.size) button.setAttribute("size", this.size); - button.classList.add("wa-button-group__button"); - button.classList.toggle( - "wa-button-group__horizontal", - this.orientation === "horizontal" - ); - button.classList.toggle( - "wa-button-group__vertical", - this.orientation === "vertical" - ); - button.classList.toggle("wa-button-group__button-first", index === 0); - button.classList.toggle( - "wa-button-group__button-inner", - index > 0 && index < slottedElements.length - 1 - ); - button.classList.toggle( - "wa-button-group__button-last", - index === slottedElements.length - 1 - ); - - // use button-group variant - button.setAttribute("variant", this.variant); - } - }); - } -} - -declare global { - interface HTMLElementTagNameMap { - "ha-button-group": HaButtonGroup; - } -} diff --git a/src/components/ha-button-toggle-group.ts b/src/components/ha-button-toggle-group.ts index 70caf6928e..b3cfea6919 100644 --- a/src/components/ha-button-toggle-group.ts +++ b/src/components/ha-button-toggle-group.ts @@ -1,11 +1,11 @@ +import "@home-assistant/webawesome/dist/components/button-group/button-group"; import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; import type { ToggleButton } from "../types"; -import "./ha-svg-icon"; import "./ha-button"; -import "./ha-button-group"; +import "./ha-svg-icon"; /** * @element ha-button-toggle-group @@ -37,11 +37,14 @@ export class HaButtonToggleGroup extends LitElement { protected render(): TemplateResult { return html` - + ${this.buttons.map( (button) => html`` )} - + `; } diff --git a/src/components/ha-button.ts b/src/components/ha-button.ts index b95394c39c..5b8bcd4d16 100644 --- a/src/components/ha-button.ts +++ b/src/components/ha-button.ts @@ -1,9 +1,7 @@ -import Button from "@awesome.me/webawesome/dist/components/button/button"; +import Button from "@home-assistant/webawesome/dist/components/button/button"; import { css, type CSSResultGroup } from "lit"; import { customElement } from "lit/decorators"; -import { StateSet } from "../resources/polyfills/stateset"; - export type Appearance = "accent" | "filled" | "outlined" | "plain"; /** @@ -35,54 +33,10 @@ export type Appearance = "accent" | "filled" | "outlined" | "plain"; * @attr {boolean} loading - shows a loading indicator instead of the buttons label and disable buttons click. * @attr {boolean} disabled - Disables the button and prevents user interaction. */ -@customElement("ha-button") // @ts-expect-error Intentionally overriding private methods +@customElement("ha-button") export class HaButton extends Button { variant: "brand" | "neutral" | "success" | "warning" | "danger" = "brand"; - attachInternals() { - const internals = super.attachInternals(); - Object.defineProperty(internals, "states", { - value: new StateSet(this, internals.states), - }); - return internals; - } - - // @ts-expect-error handleLabelSlotChange is used in super class - // eslint-disable-next-line @typescript-eslint/naming-convention - private override handleLabelSlotChange() { - const nodes = this.labelSlot.assignedNodes({ flatten: true }); - let hasIconLabel = false; - let hasIcon = false; - let text = ""; - - // If there's only an icon and no text, it's an icon button - [...nodes].forEach((node) => { - if ( - node.nodeType === Node.ELEMENT_NODE && - (node as HTMLElement).localName === "ha-svg-icon" - ) { - hasIcon = true; - if (!hasIconLabel) - hasIconLabel = (node as HTMLElement).hasAttribute("aria-label"); - } - - // Concatenate text nodes - if (node.nodeType === Node.TEXT_NODE) { - text += node.textContent; - } - }); - - this.isIconButton = text.trim() === "" && hasIcon; - - if (__DEV__ && this.isIconButton && !hasIconLabel) { - // eslint-disable-next-line no-console - console.warn( - 'Icon buttons must have a label for screen readers. Add to remove this warning.', - this - ); - } - } - static get styles(): CSSResultGroup { return [ Button.styles, diff --git a/src/components/ha-fade-in.ts b/src/components/ha-fade-in.ts index bd1ba67b22..c24288b147 100644 --- a/src/components/ha-fade-in.ts +++ b/src/components/ha-fade-in.ts @@ -1,4 +1,4 @@ -import WaAnimation from "@awesome.me/webawesome/dist/components/animation/animation"; +import WaAnimation from "@home-assistant/webawesome/dist/components/animation/animation"; import { customElement, property } from "lit/decorators"; @customElement("ha-fade-in") diff --git a/src/components/ha-progress-ring.ts b/src/components/ha-progress-ring.ts index eb9078aa83..14ad59ddc1 100644 --- a/src/components/ha-progress-ring.ts +++ b/src/components/ha-progress-ring.ts @@ -1,21 +1,12 @@ -import ProgressRing from "@awesome.me/webawesome/dist/components/progress-ring/progress-ring"; +import ProgressRing from "@home-assistant/webawesome/dist/components/progress-ring/progress-ring"; import { css } from "lit"; import type { CSSResultGroup } from "lit"; import { customElement, property } from "lit/decorators"; -import { StateSet } from "../resources/polyfills/stateset"; @customElement("ha-progress-ring") export class HaProgressRing extends ProgressRing { @property() public size?: "tiny" | "small" | "medium" | "large"; - attachInternals() { - const internals = super.attachInternals(); - Object.defineProperty(internals, "states", { - value: new StateSet(this, internals.states), - }); - return internals; - } - public updated(changedProps) { super.updated(changedProps); diff --git a/src/components/ha-spinner.ts b/src/components/ha-spinner.ts index 7cca1971b8..d30bc2382a 100644 --- a/src/components/ha-spinner.ts +++ b/src/components/ha-spinner.ts @@ -1,10 +1,8 @@ -import Spinner from "@awesome.me/webawesome/dist/components/spinner/spinner"; +import Spinner from "@home-assistant/webawesome/dist/components/spinner/spinner"; import type { CSSResultGroup, PropertyValues } from "lit"; import { css } from "lit"; import { customElement, property } from "lit/decorators"; -import { StateSet } from "../resources/polyfills/stateset"; - @customElement("ha-spinner") export class HaSpinner extends Spinner { @property() public size?: "tiny" | "small" | "medium" | "large"; @@ -33,14 +31,6 @@ export class HaSpinner extends Spinner { } } - attachInternals() { - const internals = super.attachInternals(); - Object.defineProperty(internals, "states", { - value: new StateSet(this, internals.states), - }); - return internals; - } - static get styles(): CSSResultGroup { return [ Spinner.styles, diff --git a/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-added-insecure.ts b/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-added-insecure.ts index 83c4ba0a3f..7c0891e848 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-added-insecure.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-added-insecure.ts @@ -1,11 +1,11 @@ +import "@home-assistant/webawesome/dist/components/animation/animation"; import { mdiCheckCircleOutline } from "@mdi/js"; -import { customElement, property } from "lit/decorators"; -import "@awesome.me/webawesome/dist/components/animation/animation"; import { css, html, LitElement } from "lit"; +import { customElement, property } from "lit/decorators"; import type { HomeAssistant } from "../../../../../../types"; -import "../../../../../../components/ha-svg-icon"; import "../../../../../../components/ha-alert"; +import "../../../../../../components/ha-svg-icon"; @customElement("zwave-js-add-node-added-insecure") export class ZWaveJsAddNodeFinished extends LitElement { diff --git a/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-searching-devices.ts b/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-searching-devices.ts index f5c168ef54..52fd92e5ca 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-searching-devices.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-searching-devices.ts @@ -1,15 +1,15 @@ -import "@awesome.me/webawesome/dist/components/animation/animation"; +import "@home-assistant/webawesome/dist/components/animation/animation"; import { mdiRestart } from "@mdi/js"; -import { customElement, property } from "lit/decorators"; import { css, html, LitElement, nothing } from "lit"; -import type { HomeAssistant } from "../../../../../../types"; +import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../../../../common/dom/fire_event"; import { InclusionStrategy } from "../../../../../../data/zwave_js"; +import type { HomeAssistant } from "../../../../../../types"; -import "../../../../../../components/ha-spinner"; -import "../../../../../../components/ha-button"; import "../../../../../../components/ha-alert"; +import "../../../../../../components/ha-button"; +import "../../../../../../components/ha-spinner"; import { WakeLockMixin } from "../../../../../../mixins/wakelock-mixin"; @customElement("zwave-js-add-node-searching-devices") diff --git a/src/resources/polyfills/stateset.ts b/src/resources/polyfills/stateset.ts deleted file mode 100644 index 88bacf6648..0000000000 --- a/src/resources/polyfills/stateset.ts +++ /dev/null @@ -1,57 +0,0 @@ -// A small polyfill for CSSStateSet -export class StateSet extends Set { - private _el: Element; - - private _existing: null | Set = null; - - constructor(el: Element, existing: Set | null = null) { - super(); - this._el = el; - this._existing = existing; - } - - add(state: string) { - super.add(state); - const existing = this._existing; - if (existing) { - try { - existing.add(state); - } catch { - existing.add(`--${state}`); - } - } else { - this._el.setAttribute(`state-${state}`, ""); - } - return this; - } - - delete(state: string) { - super.delete(state); - const existing = this._existing; - if (existing) { - existing.delete(state); - existing.delete(`--${state}`); - } else { - this._el.removeAttribute(`state-${state}`); - } - return true; - } - - has(state: string) { - return super.has(state); - } - - clear() { - for (const state of this) this.delete(state); - } -} -const replaceSync = CSSStyleSheet.prototype.replaceSync; -Object.defineProperty(CSSStyleSheet.prototype, "replaceSync", { - value: function (text) { - text = text.replace( - /:state\(([^)]+)\)/g, - ":where(:state($1), :--$1, [state-$1])" - ); - replaceSync.call(this, text); - }, -}); diff --git a/yarn.lock b/yarn.lock index 5db88ebf8e..de03eca930 100644 --- a/yarn.lock +++ b/yarn.lock @@ -41,24 +41,6 @@ __metadata: languageName: node linkType: hard -"@awesome.me/webawesome@npm:3.0.0-beta.4": - version: 3.0.0-beta.4 - resolution: "@awesome.me/webawesome@npm:3.0.0-beta.4" - dependencies: - "@ctrl/tinycolor": "npm:^4.1.0" - "@floating-ui/dom": "npm:^1.6.13" - "@lit/react": "npm:^1.0.8" - "@shoelace-style/animations": "npm:^1.2.0" - "@shoelace-style/localize": "npm:^3.2.1" - composed-offset-position: "npm:^0.0.6" - lit: "npm:^3.2.1" - nanoid: "npm:^5.1.5" - qr-creator: "npm:^1.0.0" - style-observer: "npm:^0.0.7" - checksum: 10/476e8e6495def8b8a99a9b0d203eb6859915bb9793632a2aae348f42ef5683751bdfb6d99155cb2512ecc2d706cd9377466f765d105d3fc355afeafe21c820df - languageName: node - linkType: hard - "@babel/code-frame@npm:7.26.2": version: 7.26.2 resolution: "@babel/code-frame@npm:7.26.2" @@ -1923,6 +1905,24 @@ __metadata: languageName: node linkType: hard +"@home-assistant/webawesome@npm:3.0.0-beta.4.ha.1": + version: 3.0.0-beta.4.ha.1 + resolution: "@home-assistant/webawesome@npm:3.0.0-beta.4.ha.1" + dependencies: + "@ctrl/tinycolor": "npm:^4.1.0" + "@floating-ui/dom": "npm:^1.6.13" + "@lit/react": "npm:^1.0.8" + "@shoelace-style/animations": "npm:^1.2.0" + "@shoelace-style/localize": "npm:^3.2.1" + composed-offset-position: "npm:^0.0.6" + lit: "npm:^3.2.1" + nanoid: "npm:^5.1.5" + qr-creator: "npm:^1.0.0" + style-observer: "npm:^0.0.7" + checksum: 10/18cd9d16057289f7b10ccf681bc7bdfaeaaf814a985c2d259bf8bffefdd5cbb8e27c5ea15c9829247b0eb746c3557aeef3798174aad5d8e742097d11c06a1144 + languageName: node + linkType: hard + "@humanfs/core@npm:^0.19.1": version: 0.19.1 resolution: "@humanfs/core@npm:0.19.1" @@ -9294,7 +9294,6 @@ __metadata: version: 0.0.0-use.local resolution: "home-assistant-frontend@workspace:." dependencies: - "@awesome.me/webawesome": "npm:3.0.0-beta.4" "@babel/core": "npm:7.28.3" "@babel/helper-define-polyfill-provider": "npm:0.6.5" "@babel/plugin-transform-runtime": "npm:7.28.3" @@ -9325,6 +9324,7 @@ __metadata: "@fullcalendar/list": "npm:6.1.19" "@fullcalendar/luxon3": "npm:6.1.19" "@fullcalendar/timegrid": "npm:6.1.19" + "@home-assistant/webawesome": "npm:3.0.0-beta.4.ha.1" "@lezer/highlight": "npm:1.2.1" "@lit-labs/motion": "npm:1.0.9" "@lit-labs/observers": "npm:2.0.6"