feat(surface-element): active-outline

Alwatr · Jan 22, 2023 · 3261091 · 3261091
1 parent c492c1a
commit 3261091
Showing 1 changed file with 8 additions and 0 deletions.
diff --git 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) {