diff --git a/ui/demo-pwa/src/page-chat.ts b/ui/demo-pwa/src/page-chat.ts
index 509160266..44dda671d 100644
--- a/ui/demo-pwa/src/page-chat.ts
+++ b/ui/demo-pwa/src/page-chat.ts
@@ -5,6 +5,7 @@ import '@alwatr/ui-kit/chat/chat-avatar.js';
import '@alwatr/ui-kit/chat/chat-bubble.js';
import '@alwatr/ui-kit/chat/chat-message.js';
import '@alwatr/ui-kit/chat/chat-list.js';
+import '@alwatr/ui-kit/icon-button/standard-icon-button.js';
import type {ChatStorage} from '@alwatr/ui-kit/chat/chat-list.js';
@@ -35,7 +36,8 @@ const chatStorage: ChatStorage = {
id: '2',
from: 'user-2',
type: 'text',
- text: 'با تمام جهل و مستی تصمیم گرفتهام دفترچه رزوگار را با پاک کنِ مهر و عطوفت پاک کنم\n' +
+ text:
+ 'با تمام جهل و مستی تصمیم گرفتهام دفترچه رزوگار را با پاک کنِ مهر و عطوفت پاک کنم\n' +
'و از اول با نام تو روزگار را آغاز کنم.',
},
'3': {
@@ -78,7 +80,8 @@ const chatStorage: ChatStorage = {
id: '9',
from: 'user-4',
type: 'text',
- text: 'سالهاست می اندیشم که هنگام بهار مگر چه می شود که اینگونه به هم می ریزیم' +
+ text:
+ 'سالهاست می اندیشم که هنگام بهار مگر چه می شود که اینگونه به هم می ریزیم' +
'،مهربان می شویم، به سراغ هم می رویم و از همه مهمتر منتظر می شویم…',
},
'10': {
@@ -131,6 +134,14 @@ export class AlwatrPageHome extends AlwatrSmartElement {
text on surface-variant
+
+ icon buttons
+
+
+
+
+
+
alwatr-chat-avatar
${map(messageListShort, (message) => html``)}
@@ -138,16 +149,22 @@ export class AlwatrPageHome extends AlwatrSmartElement {
alwatr-chat-bubble
- ${map(messageListShort, (message) => html`
-
- `)}
+ ${map(
+ messageListShort,
+ (message) => html`
+
+ `,
+ )}
alwatr-chat-message
- ${map(messageListShort, (message) => html`
-
- `)}
+ ${map(
+ messageListShort,
+ (message) => html`
+
+ `,
+ )}
diff --git a/ui/demo-pwa/style/tokens/state.css b/ui/demo-pwa/style/tokens/state.css
index 8ff7d3a6b..9eb32d911 100644
--- a/ui/demo-pwa/style/tokens/state.css
+++ b/ui/demo-pwa/style/tokens/state.css
@@ -1,10 +1,10 @@
:root {
/* Dragged state layer opacity */
- --md-sys-state-dragged-state-layer-opacity: 0.1599999964237213;
+ --md-sys-state-dragged-state-layer-opacity: 0.2;
/* Pressed state layer opacity */
- --md-sys-state-pressed-state-layer-opacity: 0.11999999731779099;
+ --md-sys-state-pressed-state-layer-opacity: 0.15;
/* Focus state layer opacity */
- --md-sys-state-focus-state-layer-opacity: 0.11999999731779099;
+ --md-sys-state-focus-state-layer-opacity: 0.15;
/* Hover state layer opacity */
- --md-sys-state-hover-state-layer-opacity: 0.07999999821186066;
+ --md-sys-state-hover-state-layer-opacity: 0.09;
}
diff --git a/ui/ui-kit/src/icon-button/standard-icon-button.ts b/ui/ui-kit/src/icon-button/standard-icon-button.ts
new file mode 100644
index 000000000..e6e8445c9
--- /dev/null
+++ b/ui/ui-kit/src/icon-button/standard-icon-button.ts
@@ -0,0 +1,81 @@
+import {AlwatrDummyElement, css, customElement, html, property} from '@alwatr/element';
+
+import '@alwatr/icon';
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'alwatr-standard-icon-button': AlwatrStandardIconButton;
+ }
+}
+
+/**
+ * Alwatr standard icon button element.
+ */
+@customElement('alwatr-standard-icon-button')
+export class AlwatrStandardIconButton extends AlwatrDummyElement {
+ static override styles = css`
+ :host {
+ position: relative;
+ display: inline-flex;
+ user-select: none;
+ align-items: center;
+ justify-content: center;
+ vertical-align: middle;
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: auto;
+
+ cursor: pointer;
+ color: var(--md-sys-color-on-surface-variant);
+ background-color: transparent;
+ width: var(--md-sys-spacing-track-5);
+ height: var(--md-sys-spacing-track-5);
+ border-radius: 50%;
+ outline: 0;
+ overflow: hidden;
+ overflow: clip;
+ z-index: var(--md-sys-zindex-default);
+ -webkit-tap-highlight-color: transparent;
+ }
+
+ :host::before {
+ content: '';
+ position: absolute;
+ z-index: var(--md-sys-zindex-below);
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ inset: 0;
+ opacity: 0;
+ transition: opacity var(--md-sys-motion-duration-small-out) var(--md-sys-motion-easing-linear);
+ background-color: var(--md-sys-color-on-surface-variant);
+ }
+
+ :host(:hover)::before {
+ opacity: var(--md-sys-state-hover-state-layer-opacity);
+ transition-duration: var(--md-sys-motion-duration-small-in);
+ }
+
+ :host(:active)::before {
+ opacity: var(--md-sys-state-pressed-state-layer-opacity);
+ transition-duration: 0ms;
+ }
+
+ :host(:focus)::before {
+ opacity: var(--md-sys-state-focus-state-layer-opacity);
+ transition-duration: var(--md-sys-motion-duration-small-in);
+ }
+
+ alwatr-icon {
+ width: var(--md-sys-spacing-track-3);
+ height: var(--md-sys-spacing-track-3);
+ }
+ `;
+
+ @property() icon?: string;
+
+ override render(): unknown {
+ return html``;
+ }
+}