@nysds/nys-skipnav 1.11.4 → 1.13.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.
@@ -7,7 +7,6 @@ var k = Object.defineProperty, p = (o, s, n, f) => {
7
7
  return e && k(s, n, e), e;
8
8
  };
9
9
  const a = class a extends d {
10
- // @property({ type: Boolean }) demoVisible = false; // For demo purposes only
11
10
  constructor() {
12
11
  super(), this.id = "", this.href = "";
13
12
  }
@@ -15,7 +14,10 @@ const a = class a extends d {
15
14
  connectedCallback() {
16
15
  super.connectedCallback(), this.id || (this.id = `nys-skipnav-${Date.now()}`);
17
16
  }
18
- /**************** Event Handlers ****************/
17
+ /**
18
+ * Event Handlers
19
+ * --------------------------------------------------------------------------
20
+ */
19
21
  _handleFocus() {
20
22
  this.shadowRoot?.querySelector(".nys-skipnav__link")?.classList.add("show");
21
23
  }
@@ -1 +1 @@
1
- {"version":3,"file":"nys-skipnav.js","sources":["../src/nys-skipnav.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-skipnav.scss?inline\";\n\nexport class NysSkipnav extends LitElement {\n static styles = unsafeCSS(styles);\n\n @property({ type: String, reflect: true }) id = \"\";\n @property({ type: String }) href = \"\";\n // @property({ type: Boolean }) demoVisible = false; // For demo purposes only\n\n constructor() {\n super();\n }\n\n // Generate a unique ID if one is not provided\n connectedCallback() {\n super.connectedCallback();\n if (!this.id) {\n this.id = `nys-skipnav-${Date.now()}`;\n }\n }\n\n /**************** Event Handlers ****************/\n private _handleFocus() {\n const linkElement = this.shadowRoot?.querySelector(\".nys-skipnav__link\");\n\n linkElement?.classList.add(\"show\");\n }\n\n private _handleBlur() {\n const linkElement = this.shadowRoot?.querySelector(\".nys-skipnav__link\");\n\n linkElement?.classList.remove(\"show\"); // Link is hidden whenever not focused\n }\n\n private _handleClick() {\n // Use href or default to #main-content\n const targetId = (this.href || \"#main-content\").replace(\"#\", \"\");\n const targetEl = document.getElementById(targetId);\n\n if (targetEl) {\n // Make sure it's focusable for screen readers rather than just scrolling to it\n targetEl.setAttribute(\"tabindex\", \"-1\");\n targetEl.focus();\n // Remove the blue outline that is applied to focused elements since we don't want the blue outline on the main container\n targetEl.style.outline = \"none\";\n }\n }\n\n render() {\n return html`\n <div class=\"nys-skipnav\">\n <a\n href=${this.href ? this.href : \"#main-content\"}\n tabindex=\"0\"\n class=\"nys-skipnav__link\"\n @focus=\"${this._handleFocus}\"\n @blur=\"${this._handleBlur}\"\n @click=\"${this._handleClick}\"\n >\n Skip to main content\n </a>\n </div>\n `;\n }\n}\n\nif (!customElements.get(\"nys-skipnav\")) {\n customElements.define(\"nys-skipnav\", NysSkipnav);\n}\n"],"names":["_NysSkipnav","LitElement","targetId","targetEl","html","unsafeCSS","styles","NysSkipnav","__decorateClass","property"],"mappings":";;;;;;;;AAKO,MAAMA,IAAN,MAAMA,UAAmBC,EAAW;AAAA;AAAA,EAOzC,cAAc;AACZ,UAAA,GALyC,KAAA,KAAK,IACpB,KAAA,OAAO;AAAA,EAKnC;AAAA;AAAA,EAGA,oBAAoB;AAClB,UAAM,kBAAA,GACD,KAAK,OACR,KAAK,KAAK,eAAe,KAAK,IAAA,CAAK;AAAA,EAEvC;AAAA;AAAA,EAGQ,eAAe;AAGrB,IAFoB,KAAK,YAAY,cAAc,oBAAoB,GAE1D,UAAU,IAAI,MAAM;AAAA,EACnC;AAAA,EAEQ,cAAc;AAGpB,IAFoB,KAAK,YAAY,cAAc,oBAAoB,GAE1D,UAAU,OAAO,MAAM;AAAA,EACtC;AAAA,EAEQ,eAAe;AAErB,UAAMC,KAAY,KAAK,QAAQ,iBAAiB,QAAQ,KAAK,EAAE,GACzDC,IAAW,SAAS,eAAeD,CAAQ;AAEjD,IAAIC,MAEFA,EAAS,aAAa,YAAY,IAAI,GACtCA,EAAS,MAAA,GAETA,EAAS,MAAM,UAAU;AAAA,EAE7B;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA;AAAA;AAAA,iBAGM,KAAK,OAAO,KAAK,OAAO,eAAe;AAAA;AAAA;AAAA,oBAGpC,KAAK,YAAY;AAAA,mBAClB,KAAK,WAAW;AAAA,oBACf,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMnC;AACF;AA7DEJ,EAAO,SAASK,EAAUC,CAAM;AAD3B,IAAMC,IAANP;AAGsCQ,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAH9BF,EAGgC,WAAA,IAAA;AACfC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAJfF,EAIiB,WAAA,MAAA;AA4DzB,eAAe,IAAI,aAAa,KACnC,eAAe,OAAO,eAAeA,CAAU;"}
1
+ {"version":3,"file":"nys-skipnav.js","sources":["../src/nys-skipnav.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-skipnav.scss?inline\";\n\n/**\n * `<nys-skipnav>` provides an accessible skip navigation link for keyboard\n * and screen reader users to jump directly to the main content of a page.\n *\n * Features:\n * - Default target is `#main-content` if `href` is not provided\n * - Link becomes visible on focus and hides on blur\n * - Ensures the target element is focusable for accessibility\n */\n\nexport class NysSkipnav extends LitElement {\n static styles = unsafeCSS(styles);\n\n @property({ type: String, reflect: true }) id = \"\";\n @property({ type: String }) href = \"\";\n\n constructor() {\n super();\n }\n\n // Generate a unique ID if one is not provided\n connectedCallback() {\n super.connectedCallback();\n if (!this.id) {\n this.id = `nys-skipnav-${Date.now()}`;\n }\n }\n\n /**\n * Event Handlers\n * --------------------------------------------------------------------------\n */\n\n private _handleFocus() {\n const linkElement = this.shadowRoot?.querySelector(\".nys-skipnav__link\");\n\n linkElement?.classList.add(\"show\");\n }\n\n private _handleBlur() {\n const linkElement = this.shadowRoot?.querySelector(\".nys-skipnav__link\");\n\n linkElement?.classList.remove(\"show\"); // Link is hidden whenever not focused\n }\n\n private _handleClick() {\n // Use href or default to #main-content\n const targetId = (this.href || \"#main-content\").replace(\"#\", \"\");\n const targetEl = document.getElementById(targetId);\n\n if (targetEl) {\n // Make sure it's focusable for screen readers rather than just scrolling to it\n targetEl.setAttribute(\"tabindex\", \"-1\");\n targetEl.focus();\n // Remove the blue outline that is applied to focused elements since we don't want the blue outline on the main container\n targetEl.style.outline = \"none\";\n }\n }\n\n render() {\n return html`\n <div class=\"nys-skipnav\">\n <a\n href=${this.href ? this.href : \"#main-content\"}\n tabindex=\"0\"\n class=\"nys-skipnav__link\"\n @focus=\"${this._handleFocus}\"\n @blur=\"${this._handleBlur}\"\n @click=\"${this._handleClick}\"\n >\n Skip to main content\n </a>\n </div>\n `;\n }\n}\n\nif (!customElements.get(\"nys-skipnav\")) {\n customElements.define(\"nys-skipnav\", NysSkipnav);\n}\n"],"names":["_NysSkipnav","LitElement","targetId","targetEl","html","unsafeCSS","styles","NysSkipnav","__decorateClass","property"],"mappings":";;;;;;;;AAeO,MAAMA,IAAN,MAAMA,UAAmBC,EAAW;AAAA,EAMzC,cAAc;AACZ,UAAA,GAJyC,KAAA,KAAK,IACpB,KAAA,OAAO;AAAA,EAInC;AAAA;AAAA,EAGA,oBAAoB;AAClB,UAAM,kBAAA,GACD,KAAK,OACR,KAAK,KAAK,eAAe,KAAK,IAAA,CAAK;AAAA,EAEvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,eAAe;AAGrB,IAFoB,KAAK,YAAY,cAAc,oBAAoB,GAE1D,UAAU,IAAI,MAAM;AAAA,EACnC;AAAA,EAEQ,cAAc;AAGpB,IAFoB,KAAK,YAAY,cAAc,oBAAoB,GAE1D,UAAU,OAAO,MAAM;AAAA,EACtC;AAAA,EAEQ,eAAe;AAErB,UAAMC,KAAY,KAAK,QAAQ,iBAAiB,QAAQ,KAAK,EAAE,GACzDC,IAAW,SAAS,eAAeD,CAAQ;AAEjD,IAAIC,MAEFA,EAAS,aAAa,YAAY,IAAI,GACtCA,EAAS,MAAA,GAETA,EAAS,MAAM,UAAU;AAAA,EAE7B;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA;AAAA;AAAA,iBAGM,KAAK,OAAO,KAAK,OAAO,eAAe;AAAA;AAAA;AAAA,oBAGpC,KAAK,YAAY;AAAA,mBAClB,KAAK,WAAW;AAAA,oBACf,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMnC;AACF;AAhEEJ,EAAO,SAASK,EAAUC,CAAM;AAD3B,IAAMC,IAANP;AAGsCQ,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAH9BF,EAGgC,WAAA,IAAA;AACfC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAJfF,EAIiB,WAAA,MAAA;AA+DzB,eAAe,IAAI,aAAa,KACnC,eAAe,OAAO,eAAeA,CAAU;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nysds/nys-skipnav",
3
- "version": "1.11.4",
3
+ "version": "1.13.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",