@xenide-io/the-old-ui-theme 0.5.2 → 0.5.4

package/src/components/ui/interaction-primitives.test.tsx

@@ -5,6 +5,8 @@ import { describe, expect, it, vi } from "vitest";
 import { DropdownButton, DropdownItem } from "@/components/ui/DropdownMenu";
 import { FilterMenu } from "@/components/ui/FilterBar";
 import { FilterChips } from "@/components/ui/FilterChips";
+import { SegmentedControl } from "@/components/ui/SegmentedControl";
+import { Chip } from "@/components/ui/Chip";
 
 describe("adaptive dropdown", () => {
   it("supports keyboard navigation, selection, closing, and focus restoration", async () => {
@@ -75,3 +77,53 @@ describe("filter chips", () => {
     expect(onToggle).not.toHaveBeenCalled();
   });
 });
+
+describe("chip", () => {
+  it("keeps selection and removal as separate keyboard controls", async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    const onRemove = vi.fn();
+
+    render(
+      <Chip onClick={onClick} onRemove={onRemove}>
+        React
+      </Chip>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Remove React" }));
+    expect(onRemove).toHaveBeenCalledTimes(1);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+});
+
+describe("segmented control", () => {
+  it("exposes and updates the selected option as a pressed button", async () => {
+    const user = userEvent.setup();
+
+    function Fixture() {
+      const [value, setValue] = useState("board");
+      return (
+        <SegmentedControl
+          value={value}
+          onChange={setValue}
+          options={[
+            { value: "board", label: "Board" },
+            { value: "list", label: "List" },
+          ]}
+        />
+      );
+    }
+
+    render(<Fixture />);
+    expect(screen.getByRole("button", { name: "Board" })).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
+
+    await user.click(screen.getByRole("button", { name: "List" }));
+    expect(screen.getByRole("button", { name: "List" })).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
+  });
+});

package/src/styles/suite-skin.css

@@ -51,6 +51,42 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
+/* Shared app canvas. Dense workspaces do not paint a decorative background. */
+.suite-app-layout {
+  background: var(--ph-canvas);
+}
+
+.suite-app-layout > aside {
+  display: none;
+}
+
+@media (min-width: 64rem) {
+  .suite-app-layout > aside {
+    display: flex;
+  }
+}
+
+.suite-app-layout > aside {
+  position: relative;
+  z-index: 2;
+}
+
+.suite-app-layout > div {
+  position: relative;
+  z-index: 1;
+}
+
+.suite-app-layout__main {
+  background: color-mix(in oklab, var(--ph-canvas) 94%, transparent);
+  scrollbar-gutter: stable;
+}
+
+@supports not (background: color-mix(in oklab, white, transparent)) {
+  .suite-app-layout__main {
+    background: var(--ph-canvas);
+  }
+}
+
 /* Shared page inset — SuitePage + TodayPageFrame (one source of truth). */
 .suite-page-inset {
   padding-left: var(--suite-page-pad-x);
@@ -95,7 +131,7 @@ body {
   }
 }
 
-/* Today atmosphere — shared geometry, colours supplied by each app theme. */
+/* Today visual treatment — shared geometry, colours supplied by each app theme. */
 .today-page-frame {
   background-color: var(--ph-canvas);
 }
@@ -461,6 +497,7 @@ button:hover > .ph-card {
   background: color-mix(in oklab, var(--ph-canvas) 86%, transparent);
   -webkit-backdrop-filter: blur(12px) saturate(1.4);
   backdrop-filter: blur(12px) saturate(1.4);
+  padding-bottom: env(safe-area-inset-bottom);
   box-shadow: 0 -1px 0 var(--ph-border-subtle);
 }
 @supports not (backdrop-filter: blur(1px)) {
@@ -475,6 +512,21 @@ button:hover > .ph-card {
   -webkit-overflow-scrolling: touch;
 }
 
+/* Compact desktop controls keep their density; coarse pointers get a reliable
+   44px hit area without app-specific overrides. */
+@media (pointer: coarse) {
+  .ph-btn.ph-btn-raised:not(.ph-btn-lg) {
+    --ph-btn-control-size: 2.75rem;
+  }
+  .ph-btn:not(.ph-btn-raised) {
+    min-height: 2.75rem;
+  }
+  .ph-btn-circle,
+  .ph-btn-square {
+    min-width: 2.75rem;
+  }
+}
+
 /* ── Ask AI answer content ───────────────────────────────────────────── */
 .suite-ai-blocknote .bn-editor {
   min-height: 0;