@nysds/nys-skipnav 1.13.1 → 1.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -0
- package/dist/nys-skipnav.d.ts +38 -0
- package/dist/nys-skipnav.figma.d.ts +1 -0
- package/dist/nys-skipnav.js +3 -3
- package/package.json +2 -2
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./nys-skipnav";
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
/**
|
|
3
|
+
* An accessible "Skip to main content" link for keyboard and screen reader users. Visually hidden until focused.
|
|
4
|
+
*
|
|
5
|
+
* Place as the first focusable element in the document. Links to `#main-content` by default, or specify `href`
|
|
6
|
+
* for a custom target. The target element receives focus when activated for proper screen reader announcement.
|
|
7
|
+
*
|
|
8
|
+
* @summary Skip navigation link for keyboard accessibility. Hidden until focused.
|
|
9
|
+
* @element nys-skipnav
|
|
10
|
+
*
|
|
11
|
+
* @example Default skip link
|
|
12
|
+
* ```html
|
|
13
|
+
* <nys-skipnav></nys-skipnav>
|
|
14
|
+
* <main id="main-content">...</main>
|
|
15
|
+
* ```
|
|
16
|
+
*
|
|
17
|
+
* @example Custom target
|
|
18
|
+
* ```html
|
|
19
|
+
* <nys-skipnav href="#content-area"></nys-skipnav>
|
|
20
|
+
* ```
|
|
21
|
+
*/
|
|
22
|
+
export declare class NysSkipnav extends LitElement {
|
|
23
|
+
static styles: import("lit").CSSResult;
|
|
24
|
+
/** Unique identifier. Auto-generated if not provided. */
|
|
25
|
+
id: string;
|
|
26
|
+
/** Target element ID (with `#`). Defaults to `#main-content`. */
|
|
27
|
+
href: string;
|
|
28
|
+
constructor();
|
|
29
|
+
connectedCallback(): void;
|
|
30
|
+
/**
|
|
31
|
+
* Event Handlers
|
|
32
|
+
* --------------------------------------------------------------------------
|
|
33
|
+
*/
|
|
34
|
+
private _handleFocus;
|
|
35
|
+
private _handleBlur;
|
|
36
|
+
private _handleClick;
|
|
37
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
38
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/nys-skipnav.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { LitElement as d, unsafeCSS as v, html as y } from "lit";
|
|
2
2
|
import { property as l } from "lit/decorators.js";
|
|
3
|
-
const c = ':host{--_nys-skipnav-padding--y: var(--nys-space-100, 8px);--_nys-skipnav-padding--x: var(--nys-space-200, 16px);--_nys-skipnav-gap: var(--nys-space-100, 8px);--_nys-skipnav-border-width: var(--nys-border-width-md, 2px);--_nys-skipnav-border-color: var(--nys-color-link, #004dd1);--_nys-skipnav-border-radius: var(--nys-radius-sm, 2px);--_nys-skipnav-font-size: var(--nys-font-size-ui-md, 16px);--_nys-skipnav-font-weight: var(--nys-font-weight-semibold, 600);--_nys-skipnav-letter-spacing: var(--nys-font-letterspacing-ui-md, .044px);--_nys-skipnav-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-skipnav-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-skipnav-color: var(--nys-color-link, #004dd1);--_nys-skipnav-background-color: var(--nys-color-surface, #
|
|
4
|
-
var
|
|
3
|
+
const c = ':host{--_nys-skipnav-padding--y: var(--nys-space-100, 8px);--_nys-skipnav-padding--x: var(--nys-space-200, 16px);--_nys-skipnav-gap: var(--nys-space-100, 8px);--_nys-skipnav-border-width: var(--nys-border-width-md, 2px);--_nys-skipnav-border-color: var(--nys-color-link, #004dd1);--_nys-skipnav-border-radius: var(--nys-radius-sm, 2px);--_nys-skipnav-font-size: var(--nys-font-size-ui-md, 16px);--_nys-skipnav-font-weight: var(--nys-font-weight-semibold, 600);--_nys-skipnav-letter-spacing: var(--nys-font-letterspacing-ui-md, .044px);--_nys-skipnav-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-skipnav-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-skipnav-color: var(--nys-color-link, #004dd1);--_nys-skipnav-background-color: var(--nys-color-surface, #ffffff)}.nys-skipnav__link{position:absolute;left:auto;top:-4.8rem;display:inline-flex;padding:var(--_nys-skipnav-padding--y) var(--_nys-skipnav-padding--x);align-items:flex-end;gap:var(--_nys-skipnav-gap);background:var(--_nys-skipnav-background-color);color:var(--_nys-skipnav-color);border:var(--_nys-skipnav-border-width) solid var(--_nys-skipnav-border-color);border-radius:var(--_nys-skipnav-border-radius);font-family:var(--_nys-skipnav-font-family);font-size:var(--_nys-skipnav-font-size);font-style:normal;font-weight:var(--_nys-skipnav-font-weight);line-height:var(--_nys-skipnav-line-height);letter-spacing:var(--_nys-skipnav-letter-spacing);text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:auto;text-underline-position:from-font;z-index:100;transition:.15s ease-in-out}.nys-skipnav__link:focus,.nys-skipnav__link.show{top:0;left:auto;outline:none}';
|
|
4
|
+
var f = Object.defineProperty, p = (o, s, n, k) => {
|
|
5
5
|
for (var e = void 0, t = o.length - 1, r; t >= 0; t--)
|
|
6
6
|
(r = o[t]) && (e = r(s, n, e) || e);
|
|
7
|
-
return e &&
|
|
7
|
+
return e && f(s, n, e), e;
|
|
8
8
|
};
|
|
9
9
|
const a = class a extends d {
|
|
10
10
|
constructor() {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nysds/nys-skipnav",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.14.0",
|
|
4
4
|
"description": "The Skipnav component from the NYS Design System.",
|
|
5
5
|
"module": "dist/nys-skipnav.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"lit": "^3.3.1",
|
|
27
27
|
"typescript": "^5.9.3",
|
|
28
|
-
"vite": "^7.1
|
|
28
|
+
"vite": "^7.3.1"
|
|
29
29
|
},
|
|
30
30
|
"keywords": [
|
|
31
31
|
"new-york-state",
|