Update css95 to 0.3.0

package.json

@@ -41,7 +41,7 @@
     "@trpc/server": "11.18.0",
     "anchorme": "^3.0.8",
     "astro": "7.0.3",
-    "css95": "^0.2.0",
+    "css95": "^0.3.0",
     "solid-js": "^1.9.13",
     "solid-markdown": "^2.1.1",
     "tsx": "^4.22.4",

src/Wes95/components/Explorer.tsx

@@ -23,8 +23,8 @@ import {
 } from '../system/FileSystem/registry';
 import { isAppURL } from '../utils/url';
 import { createWindowURL } from '../utils/Windows';
+import { ExplorerList } from './ExplorerList';
 import { Icon } from './Icon';
-import { ItemList } from './ItemList';
 import { MenuButton } from './MenuButton';
 import { Window } from './Window';
 
@@ -222,7 +222,7 @@ export const Explorer = () => {
               onClick={handleDesktopTaskbarClick}
               ref={desktopRef}
             >
-              <ItemList
+              <ExplorerList
                 appearance="icons-vertical"
                 items={[
                   {

src/Wes95/components/ItemList.tsx → src/Wes95/components/ExplorerList.tsx

@@ -9,7 +9,7 @@ export type Item = {
   columns?: Record<string, { value: string; sortValue: string | number }>;
 };
 
-export function ItemList(p: {
+export function ExplorerList(p: {
   appearance?: 'icons' | 'icons-vertical' | 'list' | 'details';
   columns?: { key: string; name: string }[];
   items: Item[];
@@ -22,16 +22,18 @@ export function ItemList(p: {
   return (
     <Switch>
       <Match when={p.appearance === 'details'}>
-        <table class="ItemList -table">
+        <table class="ExplorerList -details">
           <thead>
             <tr>
               <th>
-                <Button class="HeaderButton">Name</Button>
+                <Button class="ExplorerListHeaderButton">Name</Button>
               </th>
               <For each={p.columns}>
                 {(column) => (
                   <th>
-                    <Button class="HeaderButton">{column.name}</Button>
+                    <Button class="ExplorerListHeaderButton">
+                      {column.name}
+                    </Button>
                   </th>
                 )}
               </For>
@@ -40,7 +42,7 @@ export function ItemList(p: {
           <tbody>
             <For each={p.items}>
               {(item) => (
-                <tr class="Item">
+                <tr class="ExplorerListItem">
                   <td>
                     <button
                       class="LinkButton"
@@ -63,7 +65,7 @@ export function ItemList(p: {
       <Match when={p.appearance !== 'details'}>
         <ul
           classList={{
-            ItemList: true,
+            ExplorerList: true,
             '-icons':
               p.appearance === 'icons' || p.appearance === 'icons-vertical',
             '-list':
@@ -74,7 +76,7 @@ export function ItemList(p: {
         >
           <For each={p.items}>
             {(item) => (
-              <li class="Item">
+              <li class="ExplorerListItem">
                 <Button appearance="Link" onClick={() => handleItemClick(item)}>
                   <Icon
                     icon={item.icon}
@@ -85,7 +87,7 @@ export function ItemList(p: {
                         : 'small'
                     }
                   />
-                  <span class="ItemLabel">{item.name}</span>
+                  <span class="ExplorerListItemLabel">{item.name}</span>
                 </Button>
               </li>
             )}

src/Wes95/components/Window.tsx

@@ -1,3 +1,4 @@
+import { WindowTitleButton } from 'css95/solid';
 import {
   createContext,
   createEffect,
@@ -389,38 +390,35 @@ export function Window(p: {
           <div class="WindowTitleButtons">
             <Show when={!p.window.parentId && p.window.showInTaskbar}>
               <Show when={p.window.minimizable}>
-                <button
+                <WindowTitleButton
                   aria-label="Minimize"
                   type="button"
-                  class="WindowTitleButton"
                   onClick={handleMinimize}
                 >
                   <Symbol symbol="windowMinimize" />
-                </button>
+                </WindowTitleButton>
               </Show>
               <Show when={p.window.maximizable}>
-                <button
+                <WindowTitleButton
                   aria-label={p.window.maximized ? 'Restore' : 'Maximize'}
                   type="button"
-                  class="WindowTitleButton"
                   onClick={handleMaximize}
                 >
                   <Symbol
                     symbol={
                       p.window.maximized ? 'windowRestore' : 'windowMaximize'
                     }
                   />
-                </button>
+                </WindowTitleButton>
               </Show>
             </Show>
-            <button
+            <WindowTitleButton
               aria-label="Close"
               type="button"
-              class="WindowTitleButton"
               onClick={() => windowManager.closeWindow(p.window.id)}
             >
               <Symbol symbol="windowClose" />
-            </button>
+            </WindowTitleButton>
           </div>
         </div>
         <div

src/Wes95/programs/Bluesky/PostList.tsx

@@ -49,7 +49,11 @@ export function BlueskyPostList(p: {
         [styles.PostList!]: true,
       }}
     >
-      <div class="Content Vertical" ref={p.contentRef} onScroll={handleScroll}>
+      <div
+        class="FieldContent Vertical"
+        ref={p.contentRef}
+        onScroll={handleScroll}
+      >
         <Show when={p.filter === 'posts'}>
           <div class={styles.PostProfileDescription!}>{description()}</div>
           <hr class={styles.PostSeparator!} />

src/Wes95/programs/Bluesky/PostSearchWindow.tsx

@@ -87,7 +87,11 @@ export function BlueskyPostSearchWindow(p: {
           [styles.PostList!]: true,
         }}
       >
-        <div class="Content Vertical" onScroll={handleScroll} ref={contentRef}>
+        <div
+          class="FieldContent Vertical"
+          onScroll={handleScroll}
+          ref={contentRef}
+        >
           <For each={posts()?.posts}>
             {(post) => (
               <>

src/Wes95/programs/Bluesky/PostThreadWindow.tsx

@@ -65,7 +65,7 @@ export function BlueskyPostThreadWindow(p: {
           [styles.PostList!]: true,
         }}
       >
-        <div class="Content Vertical">
+        <div class="FieldContent Vertical">
           <Show when={parent()}>
             <BlueskyPostView postView={parent()!} />
           </Show>

src/Wes95/programs/Bluesky/UserListWindow.tsx

@@ -244,7 +244,7 @@ export function BlueskyUserListWindow(p: {
           }}
         >
           <div
-            class="Content Vertical"
+            class="FieldContent Vertical"
             ref={contentRef}
             onScroll={handleScroll}
           >

src/Wes95/programs/DiskDefragmenter/MainWindow.tsx

@@ -318,7 +318,7 @@ export function DiskDefragmenterMainWindow(p: { window: WindowState }) {
     <>
       <div class="Field">
         <div
-          classList={{ Content: true, [styles.ClusterGrid!]: true }}
+          classList={{ FieldContent: true, [styles.ClusterGrid!]: true }}
           ref={clusterGridRef}
         >
           <For each={clustersOnScreen()}>

src/Wes95/programs/FileExplorer/MainWindow.tsx

@@ -7,8 +7,8 @@ import {
   Show,
 } from 'solid-js';
 import { Combobox } from '../../components/Combobox';
+import { ExplorerList } from '../../components/ExplorerList';
 import { Icon } from '../../components/Icon';
-import { ItemList } from '../../components/ItemList';
 import { MenuBar } from '../../components/MenuBar';
 import { FileSystemManager } from '../../lib/FileSystemManager';
 import { WindowManager } from '../../lib/WindowManager';
@@ -297,11 +297,11 @@ export function FileExplorerMainWindow(p: {
       >
         <div
           classList={{
-            Content: true,
+            FieldContent: true,
             SmallSpacing: listType() !== 'details',
           }}
         >
-          <ItemList
+          <ExplorerList
             appearance={listType()}
             items={items()}
             onSelect={chooseFile}

src/Wes95/programs/QuickView/MainWindow.tsx

@@ -108,7 +108,7 @@ export function QuickViewMainWindow(p: {
           Field: true,
         }}
       >
-        <div class="Content Vertical">
+        <div class="FieldContent Vertical">
           <img src={url()} style={{ 'align-self': 'flex-start' }} />
         </div>
       </div>

src/Wes95/programs/WordPad/MainWindow.tsx

@@ -411,7 +411,7 @@ export function WordPadMainWindow(p: {
         </div>
       </Show>
       <div class="Field">
-        <div class="Content MediumSpacing Document" ref={contentRef}>
+        <div class="FieldContent MediumSpacing FieldDocument" ref={contentRef}>
           <Markdown markdown={fileData()?.body} />
         </div>
       </div>

src/Wes95/system/About/MainWindow.tsx

@@ -43,7 +43,7 @@ export function AboutWindow(p: { data: AboutData; window: WindowState }) {
         </div>
         <div class="Field">
           <div
-            class="Content MediumSpacing"
+            class="FieldContent MediumSpacing"
             style={{ 'white-space': 'pre-wrap' }}
           >
             {acknowledgements()}

src/Wes95/system/FileSystem/OpenWindow.tsx

@@ -6,8 +6,8 @@ import {
   Show,
 } from 'solid-js';
 import { Combobox } from '../../components/Combobox';
+import { ExplorerList } from '../../components/ExplorerList';
 import { Icon } from '../../components/Icon';
-import { ItemList } from '../../components/ItemList';
 import type { MenuItem } from '../../components/Menu';
 import { FileSystemManager } from '../../lib/FileSystemManager';
 import { WindowManager } from '../../lib/WindowManager';
@@ -164,8 +164,8 @@ export function FileSystemOpenWindow(p: {
         </Show>
       </div>
       <div class="Field">
-        <div class="Content SmallSpacing">
-          <ItemList
+        <div class="FieldContent SmallSpacing">
+          <ExplorerList
             appearance={listType()}
             items={items()}
             onSelect={chooseFile}