use-wc 1.0.0-pre.77 → 1.0.0-pre.78

package/custom-elements.json

@@ -2440,6 +2440,18 @@
               "type": {
                 "text": "string[] | string | null"
               }
+            },
+            {
+              "kind": "method",
+              "name": "claimRovingTabStop",
+              "parameters": [
+                {
+                  "name": "cell",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
             }
           ],
           "attributes": [

package/dist/design-system.css

@@ -322,7 +322,7 @@
     --usewc-local-link-decoration-line: var(--usewc-effect-link-chrome-text-decoration);
   }
 
-  :is(a:not([class*="appearance-"]), .appearance-a) {
+  :where(a:not([class*="appearance-"]), .appearance-a) {
     &:where(:not(a)) {
       all: unset;
     }
@@ -1429,8 +1429,10 @@
      blue-600/700/800 — `currentColor` alone can't step down like that, so each state is the
      cell's own color with its lightness nudged instead. `link.css`'s own decoration-color rule
      already derives from `--usewc-local-link-text`, so the underline follows every step here for
-     free, staying a lighter tint of whichever shade the text itself is in. */
-  use-gridcell :is(a:not([class*="appearance-"]), .appearance-a) {
+     free, staying a lighter tint of whichever shade the text itself is in. `.control` is excluded
+     the same as `appearance-*` — it's header chrome with its own complete treatment below, not
+     content that should read as a link. */
+  use-gridcell :is(a:not([class*="appearance-"], .control), .appearance-a) {
     --usewc-color-link-text-static: currentColor;
     --usewc-color-link-text-hover: oklch(
       from currentColor calc(l + var(--usewc-color-grid-cell-link-hover-lightness-shift)) c h

package/dist/docs/use-grid.md

@@ -40,6 +40,7 @@ generated id. Lazily created so single-select grids without a `name` still group
 | Name | Signature | Description |
 | --- | --- | --- |
 | isRowDisabled | `(row: Element \| null \| undefined)` | - |
+| claimRovingTabStop | `(cell: HTMLElement)` | - |
 
 ## Slots
 

package/dist/use-wc.d.mts

@@ -1654,6 +1654,7 @@ export declare class UseGrid extends LitElement {
   updated(changedProps: Map<string, unknown>): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  claimRovingTabStop(cell: HTMLElement): void;
   firstUpdated(): void;
   render(): TemplateResult$1<1>;
   static styles: import("lit").CSSResult;

package/dist/use-wc.mjs

@@ -4892,11 +4892,13 @@ let UseGrid = class UseGrid extends LitElement {
 		this.#unwatchMutations();
 		super.disconnectedCallback();
 	}
-	#focusGridCell(cell) {
+	claimRovingTabStop(cell) {
 		this.#getCellCache().cells.forEach((candidate) => {
-			candidate.tabIndex = -1;
+			candidate.tabIndex = candidate === cell ? 0 : -1;
 		});
-		cell.tabIndex = 0;
+	}
+	#focusGridCell(cell) {
+		this.claimRovingTabStop(cell);
 		cell.focus();
 	}
 	firstUpdated() {
@@ -5225,6 +5227,7 @@ let UseGridCell = class UseGridCell extends UseWidget {
 		this.#handleFocusIn = () => {
 			this.#initializeAction();
 			if (this.#action) {
+				this.closest("use-grid")?.claimRovingTabStop(this);
 				this.#action.focus();
 				this.tabIndex = -1;
 			}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-wc",
-  "version": "1.0.0-pre.77",
+  "version": "1.0.0-pre.78",
   "private": false,
   "homepage": "https://usewc.com",
   "bugs": "https://github.com/dang-rabbits/use-wc/issues",