Adding focus styles

README.md

@@ -8,6 +8,8 @@ Links: **[ilw-pagination in Builder](https://builder3.toolkit.illinois.edu/compo
 
 This is a navigation component for paged content. This contains First, Previous, a numbered set of pages with the current page highlighted, Next, and Last. 
 
+There are no alternate themes to this. 
+
 If there are more than 8 pages, it will automatically fill in an ellipsis to mark a gap in pages. 
 
 Each item (First, Previous, Next, Last, and numbered pages) will link to the current page with a *page* parameter. You can change this parameter by using the `parameter` attribute. A page *https://illinois.edu/list/* with a pagination web component creates links like *https://illinois.edu/list?page=2*, *https://illinois.edu/list?page=3*, *https://illinois.edu/list?page=4*, etc. This component will respect other querystring items and not add a dbout *?* in the querystring. 

builder/ilw-pagination.json

@@ -7,5 +7,5 @@
     "description": "This component provides standardized styles for page counting links (First, Previous, a numbered set of pages with the current page highlighted, Next, and Last)",
     "toolkit-version": "",
     "production-version": "",
-    "development-version": "1.0.0-alpha"
+    "development-version": "1.0.0-alpha1"
 }

builder/versions/ilw-pagination.1.0.0-alpha.json → builder/versions/ilw-pagination.1.0.0-alpha1.json

@@ -5,10 +5,10 @@
     "type": "web component",
     "element-name": "ilw-pagination",
     "description": "This component provides standardized styles for page counting links (First, Previous, a numbered set of pages with the current page highlighted, Next, and Last)",
-    "version": "1.0.0-alpha",
+    "version": "1.0.0-alpha1",
     "date": "08/19/2024",
-    "css": "https://dev.toolkit.illinois.edu/ilw-pagination/1.0.0-alpha/ilw-pagination.css",
-    "js": "https://dev.toolkit.illinois.edu/ilw-pagination/1.0.0-alpha/ilw-pagination.js",
+    "css": "https://dev.toolkit.illinois.edu/ilw-pagination/1.0.0-alpha1/ilw-pagination.css",
+    "js": "https://dev.toolkit.illinois.edu/ilw-pagination/1.0.0-alpha1/ilw-pagination.js",
     "production": false,
     "notes": "",
     "parent-style": "",

package.json

@@ -4,7 +4,7 @@
     "repository": "github:web-illinois/ilw-pagination",
     "private": false,
     "license": "MIT",
-    "version": "1.0.0-alpha",
+    "version": "1.0.0-alpha1",
     "type": "module",
     "files": [
       "src/**",

src/ilw-pagination.js

@@ -1,6 +1,5 @@
 import { LitElement, html } from 'lit';
 import styles from './ilw-pagination.styles';
-import './ilw-pagination.css';
 
 class Pagination extends LitElement {
 

src/ilw-pagination.styles.js

@@ -41,8 +41,14 @@ a {
   text-decoration: none;
   color: var(--il-blue);
 }
-a:hover, a:focus {
-  background-color: #ececed;
+a:hover {
+  background-color: var(--il-storm-lighter-3);
+  text-decoration: underline;
+}
+a:focus {
+  background-color: var(--ilw-link--focus-background-color);
+  color: var(--ilw-link--focus-color);
+  outline: var(--ilw-link--focus-outline);
   text-decoration: underline;
 }
 `;