diff --git a/ui/element/src/index.ts b/ui/element/src/index.ts
index 6f2c960658..33bfc6fe37 100644
--- a/ui/element/src/index.ts
+++ b/ui/element/src/index.ts
@@ -2,7 +2,6 @@ import {globalAlwatr} from '@alwatr/logger';
export * from './dummy-element.js';
export * from './smart-element.js';
-export * from './surface-element.js';
export * from './mixins/localize.js';
export * from './mixins/direction.js';
diff --git a/ui/ui-kit/src/card/card.ts b/ui/ui-kit/src/card/card.ts
deleted file mode 100644
index 7e038380fe..0000000000
--- a/ui/ui-kit/src/card/card.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import {type CSSResultGroup, AlwatrSurfaceElement, css, customElement, html} from '@alwatr/element';
-
-export type CardType = 'elevated' | 'filled' | 'outlined';
-
-declare global {
- interface HTMLElementTagNameMap {
- 'alwatr-card': AlwatrCard;
- }
-}
-
-/**
- * Alwatr Card Base Element
- */
-@customElement('alwatr-card')
-export class AlwatrCard extends AlwatrSurfaceElement {
- static override styles: CSSResultGroup = [
- AlwatrSurfaceElement.styles,
- css`
- :host {
- padding: calc(2 * var(--sys-spacing-track));
- }
- `,
- ];
-
- override render(): unknown {
- this._logger.logMethod('render');
- return html``;
- }
-}
diff --git a/ui/element/src/surface-element.ts b/ui/ui-kit/src/card/surface-element.ts
similarity index 91%
rename from ui/element/src/surface-element.ts
rename to ui/ui-kit/src/card/surface-element.ts
index 34d17e05b2..3cfb3a14bc 100644
--- a/ui/element/src/surface-element.ts
+++ b/ui/ui-kit/src/card/surface-element.ts
@@ -1,9 +1,13 @@
-import {css, type CSSResultGroup} from 'lit';
+import {AlwatrDummyElement, customElement, html, css, type CSSResultGroup} from '@alwatr/element';
-import {AlwatrDummyElement} from './dummy-element.js';
+declare global {
+ interface HTMLElementTagNameMap {
+ 'alwatr-surface': AlwatrSurface;
+ }
+}
/**
- * Alwatr Surface Base Element
+ * Alwatr Surface Element
*
* @extends AlwatrDummyElement
*
@@ -22,7 +26,8 @@ import {AlwatrDummyElement} from './dummy-element.js';
* @cssprop {Number} [--_surface-tint-opacity=0]
* @cssprop {Number} [--_surface-state-opacity=0]
*/
-export class AlwatrSurfaceElement extends AlwatrDummyElement {
+@customElement('alwatr-surface')
+export class AlwatrSurface extends AlwatrDummyElement {
static override styles: CSSResultGroup = css`
:host {
--_surface-color-on: var(--sys-color-on-surface-hsl);
@@ -34,6 +39,7 @@ export class AlwatrSurfaceElement extends AlwatrDummyElement {
--_surface-state-opacity: 0;
display: block;
+ padding: calc(2 * var(--sys-spacing-track));
color: hsl(var(--_surface-color-on));
background-color: hsl(var(--_surface-color-bg));
box-shadow: var(--_surface-elevation);
@@ -137,4 +143,9 @@ export class AlwatrSurfaceElement extends AlwatrDummyElement {
opacity: var(--sys-surface-disabled-outlined-opacity);
}
`;
+
+ override render(): unknown {
+ this._logger.logMethod('render');
+ return html``;
+ }
}