From fff8a37c3f16c9cb001398c80b01353cf7995916 Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Fri, 14 Nov 2025 16:52:03 -0500
Subject: [PATCH] docs(multiple): wip retro styles

---
 .../combobox-readonly-example.html            |   1 -
 .../combobox-readonly-example.ts              |   2 +-
 .../aria/combobox/retro-select-examples.css   | 136 ++++++++++++++++++
 .../tabs-explicit-selection-example.html      |  28 ++--
 .../tabs-explicit-selection-example.ts        |   2 +-
 .../aria/tabs/retro-tabs.css                  |  54 +++++++
 .../aria/toolbar/retro-toolbar.css            |  86 +++++++++++
 .../toolbar-basic-horizontal-example.html     |  40 ++----
 .../toolbar-basic-horizontal-example.ts       |  21 +--
 src/dev-app/index.html                        |   7 +
 10 files changed, 306 insertions(+), 71 deletions(-)
 create mode 100644 src/components-examples/aria/combobox/retro-select-examples.css
 create mode 100644 src/components-examples/aria/tabs/retro-tabs.css
 create mode 100644 src/components-examples/aria/toolbar/retro-toolbar.css

diff --git a/src/components-examples/aria/combobox/combobox-readonly/combobox-readonly-example.html b/src/components-examples/aria/combobox/combobox-readonly/combobox-readonly-example.html
index eb10faa22c2b..e50dfe444637 100644
--- a/src/components-examples/aria/combobox/combobox-readonly/combobox-readonly-example.html
+++ b/src/components-examples/aria/combobox/combobox-readonly/combobox-readonly-example.html
@@ -14,7 +14,6 @@
         <div ngListbox>
           @for (label of labels; track label.value) {
             <div ngOption [value]="label.value" [label]="label.value">
-              <span class="example-option-icon material-symbols-outlined">{{label.icon}}</span>
               <span class="example-option-text">{{label.value}}</span>
               <span class="example-option-check material-symbols-outlined">check</span>
             </div>
diff --git a/src/components-examples/aria/combobox/combobox-readonly/combobox-readonly-example.ts b/src/components-examples/aria/combobox/combobox-readonly/combobox-readonly-example.ts
index 264d221920b4..7023df1f1aef 100644
--- a/src/components-examples/aria/combobox/combobox-readonly/combobox-readonly-example.ts
+++ b/src/components-examples/aria/combobox/combobox-readonly/combobox-readonly-example.ts
@@ -27,7 +27,7 @@ import {OverlayModule} from '@angular/cdk/overlay';
 @Component({
   selector: 'combobox-readonly-example',
   templateUrl: 'combobox-readonly-example.html',
-  styleUrl: '../select-examples.css',
+  styleUrl: '../retro-select-examples.css',
   imports: [
     Combobox,
     ComboboxInput,
diff --git a/src/components-examples/aria/combobox/retro-select-examples.css b/src/components-examples/aria/combobox/retro-select-examples.css
new file mode 100644
index 000000000000..12712c9182a7
--- /dev/null
+++ b/src/components-examples/aria/combobox/retro-select-examples.css
@@ -0,0 +1,136 @@
+:host {
+  font-family: 'Press Start 2P';
+  --retro-shadow-light: color-mix(in srgb, var(--mat-sys-primary) 90%, #fff);
+  --retro-shadow-dark: color-mix(in srgb, var(--mat-sys-primary) 90%, #000);
+  --retro-box-shadow:
+    inset 4px 4px 0px 0px var(--retro-shadow-light),
+    inset -4px -4px 0px 0px var(--retro-shadow-dark), 4px 0px 0px 0px var(--mat-sys-shadow),
+    0px 4px 0px 0px var(--mat-sys-shadow), -4px 0px 0px 0px var(--mat-sys-shadow),
+    0px -4px 0px 0px var(--mat-sys-shadow), 8px 8px 0px 0px var(--mat-sys-shadow);
+  --retro-box-shadow-pressed:
+    inset 4px 4px 0px 0px var(--retro-shadow-dark),
+    inset -4px -4px 0px 0px var(--retro-shadow-light), 4px 0px 0px 0px var(--mat-sys-shadow),
+    0px 4px 0px 0px var(--mat-sys-shadow), -4px 0px 0px 0px var(--mat-sys-shadow),
+    0px -4px 0px 0px var(--mat-sys-shadow), 0px 0px 0px 0px var(--mat-sys-shadow);
+}
+
+.example-select {
+  display: flex;
+  position: relative;
+  align-items: center;
+  text-transform: uppercase;
+  color: var(--mat-sys-on-primary);
+  font-size: var(--mat-sys-label-large);
+  background-color: var(--mat-sys-primary);
+  box-shadow: var(--retro-box-shadow);
+  transition:
+    transform 0.1s,
+    box-shadow 0.1s;
+}
+
+.example-select:has([ngComboboxInput][aria-disabled='true']) {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.example-select:hover {
+  background-color: color-mix(in srgb, var(--mat-sys-primary) 90%, transparent);
+}
+
+.example-select:active {
+  transform: translate(4px, 4px);
+  box-shadow: var(--retro-box-shadow-pressed);
+}
+
+[ngComboboxInput] {
+  opacity: 0;
+  cursor: pointer;
+  padding: 0 3rem;
+  height: 3rem;
+  border: none;
+}
+
+.example-combobox-text {
+  left: 1.5rem;
+  font-size: 0.75rem;
+  position: absolute;
+}
+
+.example-arrow {
+  right: 1rem;
+  position: absolute;
+  pointer-events: none;
+  transition: transform 150ms ease-in-out;
+}
+
+[ngComboboxInput][aria-expanded='true'] ~ .example-arrow {
+  transform: rotate(180deg);
+}
+
+.example-popup-container {
+  width: 100%;
+  padding: 0.5rem;
+  margin-top: 16px;
+  background-color: var(--mat-sys-surface-container);
+
+  box-shadow: var(--retro-box-shadow);
+
+  max-height: 13rem;
+  opacity: 1;
+  visibility: visible;
+  transition:
+    max-height 150ms ease-out,
+    visibility 0s;
+}
+
+[ngListbox] {
+  gap: 4px;
+  height: 100%;
+  display: flex;
+  overflow: auto;
+  flex-direction: column;
+}
+
+[ngCombobox]:has([ngComboboxInput][aria-expanded='false']) .example-popup-container {
+  max-height: 0;
+  visibility: hidden;
+  transition:
+    max-height 150ms ease-in,
+    visibility 0s 150ms;
+}
+
+[ngCombobox]:has([ngComboboxInput][aria-expanded='true']) [ngListbox] {
+  display: flex;
+}
+
+[ngOption] {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  padding: 0 1rem;
+  min-height: 3rem;
+  color: var(--mat-sys-on-surface);
+  font-size: var(--mat-sys-label-large);
+}
+
+[ngOption]:hover,
+[ngOption][data-active='true'] {
+  background-color: color-mix(in srgb, var(--mat-sys-on-surface) 20%, transparent);
+}
+
+[ngOption][aria-selected='true'] {
+  color: var(--mat-sys-primary);
+  background-color: color-mix(in srgb, var(--mat-sys-primary) 20%, transparent);
+}
+
+.example-option-icon {
+  padding-right: 1rem;
+}
+
+[ngOption]:not([aria-selected='true']) .example-option-check {
+  display: none;
+}
+
+.example-option-text {
+  flex: 1;
+}
diff --git a/src/components-examples/aria/tabs/explicit-selection/tabs-explicit-selection-example.html b/src/components-examples/aria/tabs/explicit-selection/tabs-explicit-selection-example.html
index 2ecd56444fcb..166bb80aafd0 100644
--- a/src/components-examples/aria/tabs/explicit-selection/tabs-explicit-selection-example.html
+++ b/src/components-examples/aria/tabs/explicit-selection/tabs-explicit-selection-example.html
@@ -1,29 +1,19 @@
-<div ngTabs class="example-tabs">
-  <ul ngTabList class="example-tablist" selectionMode="explicit" selectedTab="tab-1">
-    <li ngTab value="tab-1" class="example-tab">tab 1</li>
-    <li ngTab value="tab-2" class="example-tab">tab 2</li>
-    <li ngTab value="tab-3" class="example-tab">tab 3</li>
-    <li ngTab value="tab-4" class="example-tab">tab 4</li>
-    <li ngTab value="tab-5" class="example-tab">tab 5</li>
-  </ul>
+<div ngTabs>
+  <div ngTabList selectionMode="explicit" selectedTab="home">
+    <div ngTab value="home">Home</div>
+    <div ngTab value="overview">Overview</div>
+    <div ngTab value="profile">Profile</div>
+  </div>
 
-  <div ngTabPanel value="tab-1" class="example-tabpanel">
+  <div ngTabPanel value="home">
     <ng-template ngTabContent>Tabpanel 1</ng-template>
   </div>
 
-  <div ngTabPanel value="tab-2" class="example-tabpanel">
+  <div ngTabPanel value="overview">
     <ng-template ngTabContent>Tabpanel 2</ng-template>
   </div>
 
-  <div ngTabPanel value="tab-3" class="example-tabpanel">
+  <div ngTabPanel value="profile">
     <ng-template ngTabContent>Tabpanel 3</ng-template>
   </div>
-
-  <div ngTabPanel value="tab-4" class="example-tabpanel">
-    <ng-template ngTabContent>Tabpanel 4</ng-template>
-  </div>
-
-  <div ngTabPanel value="tab-5" class="example-tabpanel">
-    <ng-template ngTabContent>Tabpanel 5</ng-template>
-  </div>
 </div>
diff --git a/src/components-examples/aria/tabs/explicit-selection/tabs-explicit-selection-example.ts b/src/components-examples/aria/tabs/explicit-selection/tabs-explicit-selection-example.ts
index 1a1aa9ba2897..642a9bfcc9c8 100644
--- a/src/components-examples/aria/tabs/explicit-selection/tabs-explicit-selection-example.ts
+++ b/src/components-examples/aria/tabs/explicit-selection/tabs-explicit-selection-example.ts
@@ -5,7 +5,7 @@ import {Tab, Tabs, TabList, TabPanel, TabContent} from '@angular/aria/tabs';
 @Component({
   selector: 'tabs-explicit-selection-example',
   templateUrl: 'tabs-explicit-selection-example.html',
-  styleUrls: ['../tabs-common.css'],
+  styleUrls: ['../retro-tabs.css'],
   imports: [TabList, Tab, Tabs, TabPanel, TabContent],
 })
 export class TabsExplicitSelectionExample {}
diff --git a/src/components-examples/aria/tabs/retro-tabs.css b/src/components-examples/aria/tabs/retro-tabs.css
new file mode 100644
index 000000000000..b79e5062dba1
--- /dev/null
+++ b/src/components-examples/aria/tabs/retro-tabs.css
@@ -0,0 +1,54 @@
+:host {
+  font-family: 'Press Start 2P';
+  --retro-button-color: var(--mat-sys-primary);
+  --retro-shadow-light: color-mix(in srgb, var(--retro-button-color) 90%, #fff);
+  --retro-shadow-dark: color-mix(in srgb, var(--retro-button-color) 90%, #000);
+  --retro-box-shadow:
+    inset 4px 4px 0px 0px var(--retro-shadow-light),
+    inset -4px -4px 0px 0px var(--retro-shadow-dark), 4px 0px 0px 0px var(--mat-sys-shadow),
+    0px 4px 0px 0px var(--mat-sys-shadow), -4px 0px 0px 0px var(--mat-sys-shadow),
+    0px -4px 0px 0px var(--mat-sys-shadow), 8px 8px 0px 0px var(--mat-sys-shadow);
+  --retro-box-shadow-pressed:
+    inset 4px 4px 0px 0px var(--retro-shadow-dark),
+    inset -4px -4px 0px 0px var(--retro-shadow-light), 4px 0px 0px 0px var(--mat-sys-shadow),
+    0px 4px 0px 0px var(--mat-sys-shadow), -4px 0px 0px 0px var(--mat-sys-shadow),
+    0px -4px 0px 0px var(--mat-sys-shadow), 0px 0px 0px 0px var(--mat-sys-shadow);
+}
+
+[ngTabs] {
+  --retro-shadow-light: color-mix(in srgb, var(--mat-sys-surface) 90%, #fff);
+  --retro-shadow-dark: color-mix(in srgb, var(--mat-sys-surface) 90%, #000);
+  --retro-box-shadow:
+    inset 4px 4px 0px 0px var(--retro-shadow-light),
+    inset -4px -4px 0px 0px var(--retro-shadow-dark), 4px 0px 0px 0px var(--mat-sys-shadow),
+    0px 4px 0px 0px var(--mat-sys-shadow), -4px 0px 0px 0px var(--mat-sys-shadow),
+    0px -4px 0px 0px var(--mat-sys-shadow), 8px 8px 0px 0px var(--mat-sys-shadow);
+
+  align-items: center;
+  text-transform: uppercase;
+  background-color: var(--mat-sys-surface);
+  box-shadow: var(--retro-box-shadow);
+  transition:
+    transform 0.1s,
+    box-shadow 0.1s;
+}
+
+[ngTabList] {
+  display: flex;
+  justify-content: space-around;
+  border-bottom: 4px solid var(--mat-sys-shadow);
+}
+
+.example-select:has([ngComboboxInput][aria-disabled='true']) {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.example-select:hover {
+  background-color: color-mix(in srgb, var(--mat-sys-primary) 90%, transparent);
+}
+
+.example-select:active {
+  transform: translate(4px, 4px);
+  box-shadow: var(--retro-box-shadow-pressed);
+}
diff --git a/src/components-examples/aria/toolbar/retro-toolbar.css b/src/components-examples/aria/toolbar/retro-toolbar.css
new file mode 100644
index 000000000000..329edac4b8db
--- /dev/null
+++ b/src/components-examples/aria/toolbar/retro-toolbar.css
@@ -0,0 +1,86 @@
+:host {
+  font-family: 'Press Start 2P';
+  --retro-shadow-light: color-mix(in srgb, transparent 90%, #fff);
+  --retro-shadow-dark: color-mix(in srgb, transparent 90%, #000);
+  --retro-box-shadow:
+    inset 4px 4px 0px 0px var(--retro-shadow-light),
+    inset -4px -4px 0px 0px var(--retro-shadow-dark), 4px 0px 0px 0px var(--mat-sys-shadow),
+    0px 4px 0px 0px var(--mat-sys-shadow), -4px 0px 0px 0px var(--mat-sys-shadow),
+    0px -4px 0px 0px var(--mat-sys-shadow), 8px 8px 0px 0px var(--mat-sys-shadow);
+  --retro-box-shadow-pressed:
+    inset 4px 4px 0px 0px var(--retro-shadow-dark),
+    inset -4px -4px 0px 0px var(--retro-shadow-light), 4px 0px 0px 0px var(--mat-sys-shadow),
+    0px 4px 0px 0px var(--mat-sys-shadow), -4px 0px 0px 0px var(--mat-sys-shadow),
+    0px -4px 0px 0px var(--mat-sys-shadow), 0px 0px 0px 0px var(--mat-sys-shadow);
+}
+
+.example-toolbar {
+  gap: 16px;
+  padding: 8px;
+  display: flex;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  flex-direction: row;
+  border-radius: var(--mat-sys-corner-small);
+  background-color: var(--mat-sys-surface);
+}
+
+.example-group {
+  gap: 16px;
+  display: flex;
+}
+
+.example-button {
+  cursor: pointer;
+  opacity: 0.875;
+  font-size: 1.25rem;
+  padding: 6px 8px;
+  color: var(--mat-sys-on-primary);
+  background-color: var(--mat-sys-primary);
+  border: 1px solid transparent;
+  box-shadow: var(--retro-box-shadow);
+  transition:
+    transform 0.1s,
+    box-shadow 0.1s;
+}
+
+.example-button:focus {
+  outline-offset: 4px;
+  outline: 4px dashed var(--mat-sys-primary);
+}
+
+.example-button[aria-label="settings"] {
+  --mat-sys-primary: #6a7d99;
+}
+.example-button[aria-label="inventory"] {
+  --mat-sys-primary: #db9e25;
+}
+.example-button[aria-label="heal"] {
+  --mat-sys-primary: #cc2e2e;
+}
+.example-button[aria-label="combat"] {
+  --mat-sys-primary: #d16b1f;
+}
+.example-button[aria-label="spells"] {
+  --mat-sys-primary: #b34cb3;
+}
+.example-button[aria-label="roll for initiative"] {
+  --mat-sys-primary: #29ad75;
+}
+
+.example-button:focus,
+.example-button:hover {
+  background-color: color-mix(in srgb, var(--mat-sys-primary) 90%, transparent);
+}
+
+.example-button:active {
+  transform: translate(4px, 4px);
+  box-shadow: var(--retro-box-shadow-pressed);
+}
+
+.example-separator {
+  height: 4px;
+  width: 12px;
+  align-self: center;
+  background: var(--mat-sys-on-surface);
+}
diff --git a/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.html b/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.html
index 94908c0c3209..be2be75eff1e 100644
--- a/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.html
+++ b/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.html
@@ -1,41 +1,17 @@
 <div class="example-toolbar-container">
   <div ngToolbar class="example-toolbar" aria-label="Horizontal Toolbar Text Formatting Tools">
-    <div class="example-group" aria-label="Undo and Redo options">
-      <button toolbar-button value="undo">undo</button>
-      <button toolbar-button value="redo">redo</button>
+    <div ngToolbarWidgetGroup class="example-group">
+      <button toolbar-button value="settings">settings</button>
+      <button toolbar-button value="inventory">money_bag</button>
+      <button toolbar-button value="roll for initiative">casino</button>
     </div>
 
     <div class="example-separator" role="separator"></div>
 
-    <div class="example-group" aria-label="Text formatting options">
-      <button toolbar-toggle-button value="bold">format_bold</button>
-      <button toolbar-toggle-button value="italic">format_italic</button>
-      <button toolbar-toggle-button value="underline">format_underlined</button>
-    </div>
-
-    <div class="example-separator" role="separator"></div>
-
-    <combobox />
-
-    <div class="example-separator" role="separator"></div>
-
-    <div
-      ngToolbarWidgetGroup
-      role="radiogroup"
-      class="example-group"
-      aria-label="Alignment options"
-    >
-      <button toolbar-radio-button value="align left">format_align_left</button>
-      <button toolbar-radio-button value="align center">format_align_center</button>
-      <button toolbar-radio-button value="align right">format_align_right</button>
-    </div>
-
-    <div class="example-separator" role="separator"></div>
-
-    <div ngToolbarWidgetGroup role="radiogroup" class="example-group" aria-label="List options">
-      <button toolbar-radio-button value="checklist">checklist</button>
-      <button toolbar-radio-button value="bullet list">format_list_bulleted</button>
-      <button toolbar-radio-button value="numbered list">format_list_numbered</button>
+    <div ngToolbarWidgetGroup class="example-group">
+      <button toolbar-button value="heal">health_cross</button>
+      <button toolbar-button value="combat">swords</button>
+      <button toolbar-button value="spells">experiment</button>
     </div>
   </div>
 </div>
diff --git a/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.ts b/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.ts
index 8ec2ff47c8c7..fd16efb39bc8 100644
--- a/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.ts
+++ b/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.ts
@@ -1,25 +1,12 @@
 import {Component} from '@angular/core';
-import {Toolbar, ToolbarWidget, ToolbarWidgetGroup} from '@angular/aria/toolbar';
-import {
-  SimpleCombobox,
-  SimpleToolbarButton,
-  SimpleToolbarRadioButton,
-  SimpleToolbarToggleButton,
-} from '../simple-toolbar';
+import {Toolbar, ToolbarWidgetGroup} from '@angular/aria/toolbar';
+import {SimpleToolbarButton} from '../simple-toolbar';
 
 /** @title Basic Horizontal Toolbar Example */
 @Component({
   selector: 'toolbar-basic-horizontal-example',
   templateUrl: 'toolbar-basic-horizontal-example.html',
-  styleUrl: '../toolbar-common.css',
-  imports: [
-    Toolbar,
-    ToolbarWidget,
-    ToolbarWidgetGroup,
-    SimpleCombobox,
-    SimpleToolbarButton,
-    SimpleToolbarRadioButton,
-    SimpleToolbarToggleButton,
-  ],
+  styleUrl: '../retro-toolbar.css',
+  imports: [Toolbar, ToolbarWidgetGroup, SimpleToolbarButton],
 })
 export class ToolbarBasicHorizontalExample {}
diff --git a/src/dev-app/index.html b/src/dev-app/index.html
index 37466cfede07..c504d7f0be1c 100644
--- a/src/dev-app/index.html
+++ b/src/dev-app/index.html
@@ -24,6 +24,13 @@
       rel="stylesheet"
       href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
     />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <dev-app>Loading...</dev-app>