diff --git a/hassio/src/dialogs/network/dialog-hassio-network.ts b/hassio/src/dialogs/network/dialog-hassio-network.ts index 38c533adf2..a0797018dc 100644 --- a/hassio/src/dialogs/network/dialog-hassio-network.ts +++ b/hassio/src/dialogs/network/dialog-hassio-network.ts @@ -15,6 +15,8 @@ import "../../../../src/components/ha-list"; import "../../../../src/components/ha-list-item"; import "../../../../src/components/ha-password-field"; import "../../../../src/components/ha-radio"; +import "../../../../src/components/ha-tab-group"; +import "../../../../src/components/ha-tab-group-tab"; import "../../../../src/components/ha-textfield"; import type { HaTextField } from "../../../../src/components/ha-textfield"; import { extractApiErrorMessage } from "../../../../src/data/hassio/common"; @@ -36,7 +38,6 @@ import type { HassDialog } from "../../../../src/dialogs/make-dialog-manager"; import { haStyleDialog } from "../../../../src/resources/styles"; import type { HomeAssistant } from "../../../../src/types"; import type { HassioNetworkDialogParams } from "./show-dialog-network"; -import "../../../../src/components/sl-tab-group"; const IP_VERSIONS = ["ipv4", "ipv6"]; @@ -114,19 +115,19 @@ export class DialogHassioNetwork > ${this._interfaces.length > 1 - ? html`${this._interfaces.map( (device, index) => - html` ${device.interface} - ` + ` )} - ` + ` : ""} ${cache(this._renderTab())} @@ -627,10 +628,10 @@ export class DialogHassioNetwork --mdc-list-side-padding: 10px; } - sl-tab { + ha-tab-group-tab { flex: 1; } - sl-tab::part(base) { + ha-tab-group-tab::part(base) { width: 100%; justify-content: center; } diff --git a/package.json b/package.json index a93d6a6daf..87ee87f851 100644 --- a/package.json +++ b/package.json @@ -51,7 +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", + "@home-assistant/webawesome": "3.0.0-beta.4.ha.2", "@lezer/highlight": "1.2.1", "@lit-labs/motion": "1.0.9", "@lit-labs/observers": "2.0.6", diff --git a/src/components/ha-tab-group-tab.ts b/src/components/ha-tab-group-tab.ts new file mode 100644 index 0000000000..b35d726774 --- /dev/null +++ b/src/components/ha-tab-group-tab.ts @@ -0,0 +1,42 @@ +import Tab from "@home-assistant/webawesome/dist/components/tab/tab"; +import { css, type CSSResultGroup } from "lit"; +import { customElement } from "lit/decorators"; + +@customElement("ha-tab-group-tab") +export class HaTabGroupTab extends Tab { + static get styles(): CSSResultGroup { + return [ + Tab.styles, + css` + :host { + font-size: var(--ha-font-size-m); + --wa-color-brand-on-quiet: var( + --ha-tab-active-text-color, + var(--primary-color) + ); +2 + --wa-color-neutral-on-quiet: var(--wa-color-brand-on-quiet); + opacity: 0.8; + + color: inherit; + } + + :host([active]:not([disabled])) { + opacity: 1; + } + + @media (hover: hover) { + :host(:hover:not([disabled]):not([active])) .tab { + color: var(--wa-color-brand-on-quiet); + } + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-tab-group-tab": HaTabGroupTab; + } +} diff --git a/src/components/ha-tab-group.ts b/src/components/ha-tab-group.ts new file mode 100644 index 0000000000..014c4d53eb --- /dev/null +++ b/src/components/ha-tab-group.ts @@ -0,0 +1,64 @@ +import TabGroup from "@home-assistant/webawesome/dist/components/tab-group/tab-group"; +import { css, type CSSResultGroup } from "lit"; +import { customElement, property } from "lit/decorators"; +import { DragScrollController } from "../common/controllers/drag-scroll-controller"; + +@customElement("ha-tab-group") +export class HaTabGroup extends TabGroup { + private _dragScrollController = new DragScrollController(this, { + selector: ".nav", + }); + + @property({ attribute: "tab-tag" }) override tabTag = "ha-tab-group-tab"; + + @property({ attribute: "tab-only", type: Boolean }) tabOnly = true; + + protected override handleClick(event: MouseEvent) { + if (this._dragScrollController.scrolled) { + return; + } + super.handleClick(event); + } + + static get styles(): CSSResultGroup { + return [ + TabGroup.styles, + css` + :host { + --track-width: 2px; + --track-color: var(--ha-tab-track-color, var(--divider-color)); + --indicator-color: var( + --ha-tab-indicator-color, + var(--primary-color) + ); + --wa-color-neutral-on-quiet: var(--indicator-color); + } + + .tab-group-top ::slotted(ha-tab-group-tab[active]) { + border-block-end: solid var(--track-width) var(--indicator-color); + margin-block-end: calc(-1 * var(--track-width)); + } + + .tab-group-start ::slotted(ha-tab-group-tab[active]) { + border-inline-end: solid var(--track-width) var(--indicator-color); + margin-inline-end: calc(-1 * var(--track-width)); + } + + .tab-group-end ::slotted(ha-tab-group-tab[active]) { + border-inline-start: solid var(--track-width) var(--indicator-color); + margin-inline-start: calc(-1 * var(--track-width)); + } + + .scroll-button::part(base):hover { + background-color: transparent; + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-tab-group": HaTabGroup; + } +} diff --git a/src/components/sl-tab-group.ts b/src/components/sl-tab-group.ts deleted file mode 100644 index 7d16247eb7..0000000000 --- a/src/components/sl-tab-group.ts +++ /dev/null @@ -1,88 +0,0 @@ -import TabGroup from "@shoelace-style/shoelace/dist/components/tab-group/tab-group.component"; -import TabGroupStyles from "@shoelace-style/shoelace/dist/components/tab-group/tab-group.styles"; -import "@shoelace-style/shoelace/dist/components/tab/tab"; -import { css } from "lit"; -import { customElement } from "lit/decorators"; -import { DragScrollController } from "../common/controllers/drag-scroll-controller"; - -@customElement("sl-tab-group") -// @ts-ignore -export class HaSlTabGroup extends TabGroup { - private _dragScrollController = new DragScrollController(this, { - selector: ".tab-group__nav", - }); - - override setAriaLabels() { - // Override the method to prevent setting aria-labels, as we don't use panels - // and don't want to set aria-labels for the tabs - } - - override getAllPanels() { - // Override the method to prevent querying for panels - // and return an empty array instead - // as we don't use panels - return []; - } - - // @ts-ignore - protected override handleClick(event: MouseEvent) { - if (this._dragScrollController.scrolled) { - return; - } - // @ts-ignore - super.handleClick(event); - } - - static override styles = [ - TabGroupStyles, - css` - :host { - --sl-spacing-3x-small: 0.125rem; - --sl-spacing-2x-small: 0.25rem; - --sl-spacing-x-small: 0.5rem; - --sl-spacing-small: 0.75rem; - --sl-spacing-medium: 1rem; - --sl-spacing-large: 1.25rem; - --sl-spacing-x-large: 1.75rem; - --sl-spacing-2x-large: 2.25rem; - --sl-spacing-3x-large: 3rem; - --sl-spacing-4x-large: 4.5rem; - - --sl-transition-x-slow: 1000ms; - --sl-transition-slow: 500ms; - --sl-transition-medium: 250ms; - --sl-transition-fast: 150ms; - --sl-transition-x-fast: 50ms; - --transition-speed: var(--sl-transition-fast); - --sl-border-radius-small: 0.1875rem; - --sl-border-radius-medium: 0.25rem; - --sl-border-radius-large: 0.5rem; - --sl-border-radius-x-large: 1rem; - --sl-border-radius-circle: 50%; - --sl-border-radius-pill: 9999px; - - --sl-color-neutral-600: inherit; - - --sl-font-weight-semibold: var(--ha-font-weight-medium); - --sl-font-size-small: var(--ha-font-size-m); - - --sl-color-primary-600: var( - --ha-tab-active-text-color, - var(--primary-color) - ); - --track-color: var(--ha-tab-track-color, var(--divider-color)); - --indicator-color: var(--ha-tab-indicator-color, var(--primary-color)); - } - ::slotted(sl-tab:not([active])) { - opacity: 0.8; - } - `, - ]; -} - -declare global { - interface HTMLElementTagNameMap { - // @ts-ignore - "sl-tab-group": HaSlTabGroup; - } -} diff --git a/src/dialogs/more-info/controls/more-info-weather.ts b/src/dialogs/more-info/controls/more-info-weather.ts index 3b3c3a90ba..5c27ec16cb 100644 --- a/src/dialogs/more-info/controls/more-info-weather.ts +++ b/src/dialogs/more-info/controls/more-info-weather.ts @@ -3,6 +3,7 @@ import type { CSSResultGroup, PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; +import { DragScrollController } from "../../../common/controllers/drag-scroll-controller"; import { formatDateWeekdayShort } from "../../../common/datetime/format_date"; import { formatTime } from "../../../common/datetime/format_time"; import { formatNumber } from "../../../common/number/format_number"; @@ -11,8 +12,9 @@ import "../../../components/ha-relative-time"; import "../../../components/ha-spinner"; import "../../../components/ha-state-icon"; import "../../../components/ha-svg-icon"; +import "../../../components/ha-tab-group"; +import "../../../components/ha-tab-group-tab"; import "../../../components/ha-tooltip"; -import "../../../components/sl-tab-group"; import type { ForecastEvent, ModernForecastType, @@ -30,7 +32,6 @@ import { weatherSVGStyles, } from "../../../data/weather"; import type { HomeAssistant } from "../../../types"; -import { DragScrollController } from "../../../common/controllers/drag-scroll-controller"; @customElement("more-info-weather") class MoreInfoWeather extends LitElement { @@ -299,18 +300,18 @@ class MoreInfoWeather extends LitElement { ${this.hass.localize("ui.card.weather.forecast")}: ${supportedForecasts?.length > 1 - ? html` + ? html` ${supportedForecasts.map( (forecastType) => - html` ${this.hass!.localize(`ui.card.weather.${forecastType}`)} - ` + ` )} - ` + ` : nothing}
${forecast?.length @@ -419,11 +420,11 @@ class MoreInfoWeather extends LitElement { font-size: 1.2em; } - sl-tab { + ha-tab-group-tab { flex: 1; } - sl-tab::part(base) { + ha-tab-group-tab::part(base) { width: 100%; justify-content: center; } diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts index 3d62c71be4..c93b2051af 100644 --- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts +++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts @@ -8,6 +8,8 @@ import { fireEvent } from "../../../../../common/dom/fire_event"; import "../../../../../components/ha-code-editor"; import "../../../../../components/ha-dialog"; import "../../../../../components/ha-dialog-header"; +import "../../../../../components/ha-tab-group"; +import "../../../../../components/ha-tab-group-tab"; import type { ZHADevice, ZHAGroup } from "../../../../../data/zha"; import { fetchBindableDevices, fetchGroups } from "../../../../../data/zha"; import { haStyleDialog } from "../../../../../resources/styles"; @@ -103,10 +105,10 @@ class DialogZHAManageZigbeeDevice extends LitElement { > ${this.hass.localize("ui.dialogs.zha_manage_device.heading")} - + ${tabs.map( (tab) => html` - + ` )} - +
${cache( @@ -229,10 +231,10 @@ class DialogZHAManageZigbeeDevice extends LitElement { } } - sl-tab { + ha-tab-group-tab { flex: 1; } - sl-tab::part(base) { + ha-tab-group-tab::part(base) { width: 100%; justify-content: center; } diff --git a/src/panels/config/integrations/integration-panels/zha/zha-manage-clusters.ts b/src/panels/config/integrations/integration-panels/zha/zha-manage-clusters.ts index 3c264a9e6e..8f8cc46c70 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-manage-clusters.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-manage-clusters.ts @@ -6,6 +6,8 @@ import { stopPropagation } from "../../../../../common/dom/stop_propagation"; import "../../../../../components/ha-card"; import "../../../../../components/ha-list-item"; import "../../../../../components/ha-select"; +import "../../../../../components/ha-tab-group"; +import "../../../../../components/ha-tab-group-tab"; import type { Cluster, ZHADevice } from "../../../../../data/zha"; import { fetchClustersForZhaDevice } from "../../../../../data/zha"; import { haStyle } from "../../../../../resources/styles"; @@ -13,7 +15,6 @@ import type { HomeAssistant } from "../../../../../types"; import { computeClusterKey } from "./functions"; import "./zha-cluster-attributes"; import "./zha-cluster-commands"; -import "../../../../../components/sl-tab-group"; declare global { // for fire event @@ -91,20 +92,20 @@ export class ZHAManageClusters extends LitElement {
${this._selectedCluster ? html` - + ${tabs.map( (tab) => html` - ${this.hass.localize( `ui.panel.config.zha.clusters.tabs.${tab}` - )} ` )} - +
${cache( @@ -177,10 +178,10 @@ export class ZHAManageClusters extends LitElement { padding-bottom: 10px; } - sl-tab { + ha-tab-group-tab { flex: 1; } - sl-tab::part(base) { + ha-tab-group-tab::part(base) { width: 100%; justify-content: center; } diff --git a/src/panels/config/network/supervisor-network.ts b/src/panels/config/network/supervisor-network.ts index f7c5044f2f..c8eddc5445 100644 --- a/src/panels/config/network/supervisor-network.ts +++ b/src/panels/config/network/supervisor-network.ts @@ -15,9 +15,10 @@ import "../../../components/ha-password-field"; import "../../../components/ha-radio"; import type { HaRadio } from "../../../components/ha-radio"; import "../../../components/ha-spinner"; +import "../../../components/ha-tab-group"; +import "../../../components/ha-tab-group-tab"; import "../../../components/ha-textfield"; import type { HaTextField } from "../../../components/ha-textfield"; -import "../../../components/sl-tab-group"; import { extractApiErrorMessage } from "../../../data/hassio/common"; import { type AccessPoint, @@ -99,19 +100,19 @@ export class HassioNetwork extends LitElement { ${this.hass.localize("ui.panel.config.network.supervisor.title")} ${this._interfaces.length > 1 ? html` - ${this._interfaces.map( (device, i) => - html` ${device.interface} - ` + ` )} - + ` : nothing}
@@ -833,13 +834,13 @@ export class HassioNetwork extends LitElement { margin-bottom: 16px; } - sl-tab-group { + ha-tab-group { line-height: var(--ha-line-height-normal); } - sl-tab { + ha-tab-group-tab { flex: 1; } - sl-tab::part(base) { + ha-tab-group-tab::part(base) { width: 100%; justify-content: center; } diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts index b34c02dd07..e58f6bd911 100644 --- a/src/panels/developer-tools/ha-panel-developer-tools.ts +++ b/src/panels/developer-tools/ha-panel-developer-tools.ts @@ -1,14 +1,15 @@ +import type { ActionDetail } from "@material/mwc-list"; import { mdiDotsVertical } from "@mdi/js"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; -import type { ActionDetail } from "@material/mwc-list"; import { navigate } from "../../common/navigate"; -import "../../components/ha-menu-button"; import "../../components/ha-button-menu"; import "../../components/ha-icon-button"; import "../../components/ha-list-item"; -import "../../components/sl-tab-group"; +import "../../components/ha-menu-button"; +import "../../components/ha-tab-group"; +import "../../components/ha-tab-group-tab"; import { haStyle } from "../../resources/styles"; import type { HomeAssistant, Route } from "../../types"; import "./developer-tools-router"; @@ -50,25 +51,41 @@ class PanelDeveloperTools extends LitElement {
- - + + ${this.hass.localize("ui.panel.developer-tools.tabs.yaml.title")} - - + + ${this.hass.localize("ui.panel.developer-tools.tabs.states.title")} - - + + ${this.hass.localize("ui.panel.developer-tools.tabs.actions.title")} - - + + ${this.hass.localize( "ui.panel.developer-tools.tabs.templates.title" )} - - + + ${this.hass.localize("ui.panel.developer-tools.tabs.events.title")} - - + - Assist + Assist - + + ${tabs.map( (tab) => html` - + ${this.hass!.localize( `ui.panel.lovelace.editor.edit_badge.tab_${tab}` )} - + ` )} - + ${content} `; } @@ -86,13 +91,13 @@ export class HuiBadgeElementEditor extends HuiTypedElementEditor ${title} - - + - + ${this.hass!.localize( "ui.panel.lovelace.editor.badge_picker.by_entity" - )} - + ${cache( this._currTab === "badge" @@ -193,10 +194,10 @@ export class HuiCreateDialogBadge --mdc-dialog-min-width: 1000px; } } - sl-tab { + ha-tab-group-tab { flex: 1; } - sl-tab::part(base) { + ha-tab-group-tab::part(base) { width: 100%; justify-content: center; } diff --git a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts index 54b25953ec..5095a513a8 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts @@ -1,7 +1,8 @@ import type { TemplateResult } from "lit"; import { css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; -import "../../../../components/sl-tab-group"; +import "../../../../components/ha-tab-group"; +import "../../../../components/ha-tab-group-tab"; import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card"; import type { LovelaceSectionConfig } from "../../../../data/lovelace/config/section"; import { getCardElementClass } from "../../create-element/create-card-element"; @@ -90,17 +91,21 @@ export class HuiCardElementEditor extends HuiTypedElementEditor + ${displayedTabs.map( (tab) => html` - + ${this.hass.localize( `ui.panel.lovelace.editor.edit_card.tab_${tab}` )} - + ` )} - + ${content} `; } @@ -115,15 +120,15 @@ export class HuiCardElementEditor extends HuiTypedElementEditor ${title} - - + - + ${this.hass!.localize( "ui.panel.lovelace.editor.cardpicker.by_entity" - )} - + ${cache( this._currTab === "card" @@ -215,10 +216,10 @@ export class HuiCreateDialogCard --mdc-dialog-min-width: 1000px; } } - sl-tab { + ha-tab-group-tab { flex: 1; } - sl-tab::part(base) { + ha-tab-group-tab::part(base) { width: 100%; justify-content: center; } diff --git a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts index e5054d28b7..0b70a3dfee 100644 --- a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts @@ -10,7 +10,8 @@ import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-alert"; import "../../../../components/ha-button"; import "../../../../components/ha-svg-icon"; -import "../../../../components/sl-tab-group"; +import "../../../../components/ha-tab-group"; +import "../../../../components/ha-tab-group-tab"; import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card"; import type { LovelaceConfig } from "../../../../data/lovelace/config/types"; import type { HomeAssistant } from "../../../../types"; @@ -79,18 +80,22 @@ export class HuiConditionalCardEditor const isGuiMode = !this._cardEditorEl || this._GUImode; return html` - - + + ${this.hass!.localize( "ui.panel.lovelace.editor.card.conditional.conditions" )} - - + + ${this.hass!.localize( "ui.panel.lovelace.editor.card.conditional.card" )} - - + + ${this._cardTab ? html`
@@ -233,11 +238,11 @@ export class HuiConditionalCardEditor return [ configElementStyle, css` - sl-tab { + ha-tab-group-tab { flex: 1; } - sl-tab::part(base) { + ha-tab-group-tab::part(base) { width: 100%; justify-content: center; } diff --git a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts index 236c695c7b..ae5aaf07cd 100644 --- a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts @@ -30,7 +30,8 @@ import type { import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button-arrow-next"; import "../../../../components/ha-icon-button-arrow-prev"; -import "../../../../components/sl-tab-group"; +import "../../../../components/ha-tab-group"; +import "../../../../components/ha-tab-group-tab"; import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card"; import type { LovelaceConfig } from "../../../../data/lovelace/config/types"; import type { HomeAssistant } from "../../../../types"; @@ -123,14 +124,18 @@ export class HuiStackCardEditor >
- + ${this._config.cards.map( (_card, i) => - html` + html` ${i + 1} - ` + ` )} - + ${!this._yamlMode ? html` - + ${TABS.map( (tab) => html` - + ` )} - + ` : nothing} @@ -433,10 +434,10 @@ export class HuiDialogEditSection ha-dialog.yaml-mode { --dialog-content-padding: 0; } - sl-tab { + ha-tab-group-tab { flex: 1; } - sl-tab::part(base) { + ha-tab-group-tab::part(base) { width: 100%; justify-content: center; } diff --git a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts index 6b0edc482c..6a52324fc3 100644 --- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts +++ b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts @@ -20,6 +20,8 @@ import "../../../../components/ha-dialog"; import "../../../../components/ha-dialog-header"; import "../../../../components/ha-list-item"; import "../../../../components/ha-spinner"; +import "../../../../components/ha-tab-group"; +import "../../../../components/ha-tab-group-tab"; import "../../../../components/ha-yaml-editor"; import type { HaYamlEditor } from "../../../../components/ha-yaml-editor"; import { @@ -53,7 +55,6 @@ import "./hui-view-background-editor"; import "./hui-view-editor"; import "./hui-view-visibility-editor"; import type { EditViewDialogParams } from "./show-edit-view-dialog"; -import "../../../../components/sl-tab-group"; const TABS = ["tab-settings", "tab-background", "tab-visibility"] as const; @@ -274,10 +275,10 @@ export class HuiDialogEditView extends LitElement { ` : nothing} ${!this._yamlMode - ? html` + ? html` ${TABS.map( (tab) => html` - + ` )} - ` + ` : nothing} ${content} @@ -651,10 +652,10 @@ export class HuiDialogEditView extends LitElement { font-size: inherit; font-weight: inherit; } - sl-tab { + ha-tab-group-tab { flex: 1; } - sl-tab::part(base) { + ha-tab-group-tab::part(base) { width: 100%; justify-content: center; } diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 1911282ae5..bba3b7c855 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -45,7 +45,8 @@ import "../../components/ha-icon-button-arrow-prev"; import "../../components/ha-list-item"; import "../../components/ha-menu-button"; import "../../components/ha-svg-icon"; -import "../../components/sl-tab-group"; +import "../../components/ha-tab-group"; +import "../../components/ha-tab-group-tab"; import { createAreaRegistryEntry } from "../../data/area_registry"; import type { LovelacePanelConfig } from "../../data/lovelace"; import type { LovelaceConfig } from "../../data/lovelace/config/types"; @@ -409,12 +410,12 @@ class HUIRoot extends LitElement { !view.visible.some((e) => e.user === this.hass!.user?.id)) || view.visible === false); - const tabs = html` + const tabs = html` ${views.map((view, index) => { const hidden = !this._editMode && (view.subview || _isTabHiddenForUser(view)); return html` - ` : nothing} - + `; })} - `; + `; const isSubview = curViewConfig?.subview; const hasTabViews = views.filter((view) => !view.subview).length > 1; @@ -1267,7 +1268,7 @@ class HUIRoot extends LitElement { display: flex; align-items: center; } - sl-tab-group { + ha-tab-group { --ha-tab-indicator-color: var( --app-header-selection-bar-color, var(--app-header-text-color, white) @@ -1279,10 +1280,10 @@ class HUIRoot extends LitElement { min-width: 0; height: 100%; } - sl-tab-group::part(nav) { + ha-tab-group::part(nav) { padding: 0; } - sl-tab-group::part(scroll-button) { + ha-tab-group::part(scroll-button) { background-color: var(--app-header-background-color); background: linear-gradient( 90deg, @@ -1291,14 +1292,14 @@ class HUIRoot extends LitElement { ); z-index: 1; } - sl-tab-group::part(scroll-button--end) { + ha-tab-group::part(scroll-button-end) { background: linear-gradient( 270deg, var(--app-header-background-color), transparent ); } - .edit-mode sl-tab-group::part(scroll-button) { + .edit-mode ha-tab-group::part(scroll-button) { background-color: var(--app-header-edit-background-color, #455a64); background: linear-gradient( 90deg, @@ -1306,7 +1307,7 @@ class HUIRoot extends LitElement { transparent ); } - .edit-mode sl-tab-group::part(scroll-button--end) { + .edit-mode ha-tab-group::part(scroll-button--end) { background: linear-gradient( 270deg, var(--app-header-edit-background-color, #455a64), @@ -1319,41 +1320,35 @@ class HUIRoot extends LitElement { .tab-bar { display: flex; } - .edit-mode sl-tab-group { + .edit-mode ha-tab-group { flex-grow: 0; color: var(--app-header-edit-text-color, #fff); --ha-tab-active-text-color: var(--app-header-edit-text-color, #fff); --ha-tab-indicator-color: var(--app-header-edit-text-color, #fff); } - sl-tab { - --sl-tab-height: var(--header-height, 56px); - height: calc(var(--sl-tab-height) - 2px); + ha-tab-group-tab { + --ha-tab-group-tab-height: var(--header-height, 56px); } - sl-tab[aria-selected="true"] .edit-icon { + ha-tab-group-tab[aria-selected="true"] .edit-icon { display: inline-flex; } - sl-tab::part(base) { - padding-inline-start: var( - --ha-tab-padding-start, - var(--sl-spacing-large) - ); - padding-inline-end: var( - --ha-tab-padding-end, - var(--sl-spacing-large) + ha-tab-group-tab::part(base) { + padding-inline-start: var(--ha-tab-padding-start, var(--wa-space-l)); + padding-inline-end: var(--ha-tab-padding-end, var(--wa-space-l)); + } + ha-tab-group-tab::part(base) { + padding-top: calc((var(--ha-tab-group-tab-height) - 20px) / 2); + } + ha-tab-group-tab.icon::part(base) { + padding-top: calc((var(--ha-tab-group-tab-height) - 20px) / 2 - 2px); + padding-bottom: calc( + (var(--ha-tab-group-tab-height) - 20px) / 2 - 4px ); } - sl-tab::part(base) { - padding-top: calc((var(--sl-tab-height) - 20px) / 2); - padding-bottom: calc((var(--sl-tab-height) - 20px) / 2 - 2px); + .tab-bar ha-tab-group-tab { + --ha-tab-group-tab-height: var(--tab-bar-height, 56px); } - sl-tab.icon::part(base) { - padding-top: calc((var(--sl-tab-height) - 20px) / 2 - 2px); - padding-bottom: calc((var(--sl-tab-height) - 20px) / 2 - 4px); - } - .tab-bar sl-tab { - --sl-tab-height: var(--tab-bar-height, 56px); - } - .edit-mode sl-tab[aria-selected="true"]::part(base) { + .edit-mode ha-tab-group-tab[aria-selected="true"]::part(base) { padding: 0; margin-top: calc((var(--tab-bar-height, 56px) - 48px) / 2); } diff --git a/src/resources/theme/wa.globals.ts b/src/resources/theme/wa.globals.ts index bd236a0907..a831f42d38 100644 --- a/src/resources/theme/wa.globals.ts +++ b/src/resources/theme/wa.globals.ts @@ -11,6 +11,12 @@ export const waMainStyles = css` --wa-space-l: 24px; --wa-shadow-l: 0 8px 8px -4px rgba(0, 0, 0, 0.2); --wa-form-control-padding-block: 0.75em; + + --wa-font-weight-action: var(--ha-font-weight-medium); + --wa-transition-fast: 75ms; + --wa-transition-easing: ease; + --wa-border-width-l: var(--ha-border-radius-l); + --wa-space-xl: 32px; } `; diff --git a/yarn.lock b/yarn.lock index 64e40bc136..aa0a64539f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1905,9 +1905,9 @@ __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" +"@home-assistant/webawesome@npm:3.0.0-beta.4.ha.2": + version: 3.0.0-beta.4.ha.2 + resolution: "@home-assistant/webawesome@npm:3.0.0-beta.4.ha.2" dependencies: "@ctrl/tinycolor": "npm:^4.1.0" "@floating-ui/dom": "npm:^1.6.13" @@ -1919,7 +1919,7 @@ __metadata: nanoid: "npm:^5.1.5" qr-creator: "npm:^1.0.0" style-observer: "npm:^0.0.7" - checksum: 10/18cd9d16057289f7b10ccf681bc7bdfaeaaf814a985c2d259bf8bffefdd5cbb8e27c5ea15c9829247b0eb746c3557aeef3798174aad5d8e742097d11c06a1144 + checksum: 10/0ac66d43050571e2b86bb7b0181d428aa2a064e25745075b207a8fe96d873398eaead663172130dfe8d9ac0be575028f8f9f6b9f8a9cd12f81c8c82e9f60a0e9 languageName: node linkType: hard @@ -9334,7 +9334,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" + "@home-assistant/webawesome": "npm:3.0.0-beta.4.ha.2" "@lezer/highlight": "npm:1.2.1" "@lit-labs/motion": "npm:1.0.9" "@lit-labs/observers": "npm:2.0.6"