docs(multiple): wip retro styles

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>

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,

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;
+}

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>

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 {}

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);
+}

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);
+}

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>