@stevederico/skateboard-ui 2.11.0 → 2.12.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+2.12.0
+
+  Add skip-to-content link
+  Add selection styling brand color
+  Add content-auto utility class
+  Add button active press feedback
+  Add main landmark id
+
 2.11.0
 
   Fix DynamicIcon lazy loading

package/layout/Layout.jsx

@@ -40,6 +40,9 @@ export default function Layout({ children }) {
 
   return (
     <div className="min-h-screen flex flex-col pt-[env(safe-area-inset-top)] pb-[calc(5rem+env(safe-area-inset-bottom))] md:pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]">
+      <a href="#main" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-background focus:text-foreground focus:rounded-md focus:ring-2 focus:ring-ring">
+        Skip to content
+      </a>
       <SidebarProvider
         defaultOpen={!constants.sidebarCollapsed}
         style={{
@@ -47,7 +50,7 @@ export default function Layout({ children }) {
           '--header-height': '3.5rem',
         }}>
         {showSidebar && <Sidebar variant="inset" />}
-        <SidebarInset className={`border border-border/50 ${constants.hideSidebarInsetRounding ? "md:peer-data-[variant=inset]:rounded-none" : ""}`}>
+        <SidebarInset id="main" className={`border border-border/50 ${constants.hideSidebarInsetRounding ? "md:peer-data-[variant=inset]:rounded-none" : ""}`}>
           <Outlet />
         </SidebarInset>
       </SidebarProvider>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "2.11.0",
+  "version": "2.12.0",
   "type": "module",
   "exports": {
     "./Sidebar": {

package/shadcn/ui/button.jsx

@@ -4,7 +4,7 @@ import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils.js"
 
 const buttonVariants = cva(
-  "cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  "cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none active:scale-[0.98]",
   {
     variants: {
       variant: {

package/styles.css

@@ -209,6 +209,16 @@
   code, pre, kbd {
     font-family: 'Geist Mono', ui-monospace, monospace;
   }
+  ::selection {
+    background-color: color-mix(in oklch, var(--color-app) 20%, transparent);
+  }
+}
+
+@layer utilities {
+  .content-auto {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 200px;
+  }
 }
 
 #root {