From 3261091bdfbb3dd777aa2676f1bf0ce5d3aa7192 Mon Sep 17 00:00:00 2001
From: Ali Mihandoost <ali.mihandoost@gmail.com>
Date: Sun, 22 Jan 2023 04:22:38 +0330
Subject: [PATCH] feat(surface-element): active-outline

---
 ui/element/src/surface-element.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/ui/element/src/surface-element.ts b/ui/element/src/surface-element.ts
index 11da2d338..34d17e05b 100644
--- a/ui/element/src/surface-element.ts
+++ b/ui/element/src/surface-element.ts
@@ -11,6 +11,7 @@ import {AlwatrDummyElement} from './dummy-element.js';
  * @attr {Number|Boolean} elevated - tinted by default
  * @attr {Boolean} filled
  * @attr {Boolean} outlined
+ * @attr {Boolean} active-outline - outline on active and focus
  * @attr {Boolean} disabled
  *
  * @cssprop {String} [--_surface-color-on=var(--sys-color-on-surface-hsl)]
@@ -87,6 +88,13 @@ export class AlwatrSurfaceElement extends AlwatrDummyElement {
       --_surface-state-opacity: var(--sys-surface-state-opacity-focus);
     }
 
+    :host([active-outline]:active),
+    :host([active-outline]:focus),
+    :host([active-outline]:focus-within) {
+      border-color: var(--sys-color-primary);
+      box-shadow: 0 0 0.4px 0.8px var(--sys-color-primary);
+    }
+
     :host([stated]:hover:not(:active)),
     :host([stated]:focus),
     :host([stated]:focus-within) {