@skdx/web-components 0.26.0 → 0.27.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/custom-elements.json +20063 -20044
- package/dist/navigation-menu/NavigationMenu.cjs +2 -2
- package/dist/navigation-menu/NavigationMenu.d.cts +16 -1
- package/dist/navigation-menu/NavigationMenu.d.ts +16 -1
- package/dist/navigation-menu/NavigationMenu.js +2 -2
- package/dist/navigation-menu/NavigationMenuList.cjs +2 -2
- package/dist/navigation-menu/NavigationMenuList.d.cts +7 -3
- package/dist/navigation-menu/NavigationMenuList.d.ts +7 -3
- package/dist/navigation-menu/NavigationMenuList.js +2 -2
- package/package.json +2 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var u=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var v=(r,t)=>{for(var e in t)u(r,e,{get:t[e],enumerable:!0})},y=(r,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of T(t))!d.call(r,i)&&i!==e&&u(r,i,{get:()=>t[i],enumerable:!(s=c(t,i))||s.enumerable});return r};var b=r=>y(u({},"__esModule",{value:!0}),r),a=(r,t,e,s)=>{for(var i=s>1?void 0:s?c(t,e):t,m=r.length-1,p;m>=0;m--)(p=r[m])&&(i=(s?p(t,e,i):p(i))||i);return s&&i&&u(t,e,i),i};var D={};v(D,{SkdxNavigationMenu:()=>o});module.exports=b(D);var l=require("lit"),n=require("lit/decorators.js"),h=require("../internal/define.cjs");var f=150,o=class extends l.LitElement{constructor(){super(...arguments);this.value="";this.delayDuration=200;this.skipDelayDuration=300;this.orientation="horizontal";this.isOpenDelayed=!0}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","navigation"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Main"),this.reflectOrientation()}updated(e){super.updated(e),e.has("orientation")&&this.reflectOrientation()}reflectOrientation(){this.setAttribute("data-orientation",this.orientation);for(let e of this.querySelectorAll("skdx-navigation-menu-list"))e.setAttribute("data-orientation",this.orientation)}disconnectedCallback(){clearTimeout(this.openTimer),clearTimeout(this.closeTimer),clearTimeout(this.skipDelayTimer),super.disconnectedCallback()}setValue(e){this.value=e,clearTimeout(this.skipDelayTimer),e?this.isOpenDelayed=!1:this.skipDelayTimer=setTimeout(()=>this.isOpenDelayed=!0,this.skipDelayDuration),this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("skdx-navigation-menu-internal-update",{composed:!0}))}onTriggerEnter(e){clearTimeout(this.closeTimer),clearTimeout(this.openTimer),this.isOpenDelayed?this.openTimer=setTimeout(()=>this.setValue(e),this.delayDuration):this.setValue(e)}onTriggerLeave(){clearTimeout(this.openTimer),clearTimeout(this.closeTimer),this.closeTimer=setTimeout(()=>this.setValue(""),f)}onContentEnter(){clearTimeout(this.closeTimer)}onContentLeave(){this.onTriggerLeave()}onItemSelect(e){clearTimeout(this.openTimer),clearTimeout(this.closeTimer),this.setValue(e)}onClose(){clearTimeout(this.openTimer),clearTimeout(this.closeTimer),this.setValue("")}render(){return l.html`<slot></slot>`}};o.styles=l.css`
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
}
|
|
5
|
-
`,
|
|
5
|
+
`,a([(0,n.property)({type:String,reflect:!0})],o.prototype,"value",2),a([(0,n.property)({type:Number,attribute:"delay-duration"})],o.prototype,"delayDuration",2),a([(0,n.property)({type:Number,attribute:"skip-delay-duration"})],o.prototype,"skipDelayDuration",2),a([(0,n.property)({type:String})],o.prototype,"orientation",2),o=a([(0,h.customElement)("skdx-navigation-menu","navigation-menu","root")],o);0&&(module.exports={SkdxNavigationMenu});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
1
|
+
import { LitElement, type PropertyValues } from 'lit';
|
|
2
2
|
/**
|
|
3
3
|
* `<skdx-navigation-menu>` — the Web Components implementation of the shared
|
|
4
4
|
* NavigationMenu contract (see `@skdx/shared`'s `navigationMenuContract`).
|
|
@@ -36,11 +36,26 @@ export declare class SkdxNavigationMenu extends LitElement {
|
|
|
36
36
|
delayDuration: number;
|
|
37
37
|
/** Window after closing during which re-hovering a sibling trigger opens instantly (ms). */
|
|
38
38
|
skipDelayDuration: number;
|
|
39
|
+
/**
|
|
40
|
+
* Axis the menu runs along. Sets `data-orientation` on this element and on
|
|
41
|
+
* its `<skdx-navigation-menu-list>`, switches roving focus between
|
|
42
|
+
* Left/Right and Up/Down, and is what the skin keys its vertical layout off.
|
|
43
|
+
* Use `vertical` for sidebars, footer link columns and mobile drawers.
|
|
44
|
+
*/
|
|
45
|
+
orientation: 'horizontal' | 'vertical';
|
|
39
46
|
private isOpenDelayed;
|
|
40
47
|
private openTimer?;
|
|
41
48
|
private closeTimer?;
|
|
42
49
|
private skipDelayTimer?;
|
|
43
50
|
connectedCallback(): void;
|
|
51
|
+
updated(changed: PropertyValues<this>): void;
|
|
52
|
+
/**
|
|
53
|
+
* There is no context protocol here, so the root writes the axis onto itself
|
|
54
|
+
* and onto its list: the list reads it back off its own attribute, which
|
|
55
|
+
* keeps one source of truth whether the value is set up-front or changed
|
|
56
|
+
* later.
|
|
57
|
+
*/
|
|
58
|
+
private reflectOrientation;
|
|
44
59
|
disconnectedCallback(): void;
|
|
45
60
|
private setValue;
|
|
46
61
|
/**
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
1
|
+
import { LitElement, type PropertyValues } from 'lit';
|
|
2
2
|
/**
|
|
3
3
|
* `<skdx-navigation-menu>` — the Web Components implementation of the shared
|
|
4
4
|
* NavigationMenu contract (see `@skdx/shared`'s `navigationMenuContract`).
|
|
@@ -36,11 +36,26 @@ export declare class SkdxNavigationMenu extends LitElement {
|
|
|
36
36
|
delayDuration: number;
|
|
37
37
|
/** Window after closing during which re-hovering a sibling trigger opens instantly (ms). */
|
|
38
38
|
skipDelayDuration: number;
|
|
39
|
+
/**
|
|
40
|
+
* Axis the menu runs along. Sets `data-orientation` on this element and on
|
|
41
|
+
* its `<skdx-navigation-menu-list>`, switches roving focus between
|
|
42
|
+
* Left/Right and Up/Down, and is what the skin keys its vertical layout off.
|
|
43
|
+
* Use `vertical` for sidebars, footer link columns and mobile drawers.
|
|
44
|
+
*/
|
|
45
|
+
orientation: 'horizontal' | 'vertical';
|
|
39
46
|
private isOpenDelayed;
|
|
40
47
|
private openTimer?;
|
|
41
48
|
private closeTimer?;
|
|
42
49
|
private skipDelayTimer?;
|
|
43
50
|
connectedCallback(): void;
|
|
51
|
+
updated(changed: PropertyValues<this>): void;
|
|
52
|
+
/**
|
|
53
|
+
* There is no context protocol here, so the root writes the axis onto itself
|
|
54
|
+
* and onto its list: the list reads it back off its own attribute, which
|
|
55
|
+
* keeps one source of truth whether the value is set up-front or changed
|
|
56
|
+
* later.
|
|
57
|
+
*/
|
|
58
|
+
private reflectOrientation;
|
|
44
59
|
disconnectedCallback(): void;
|
|
45
60
|
private setValue;
|
|
46
61
|
/**
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
var
|
|
1
|
+
var m=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var r=(l,o,e,s)=>{for(var i=s>1?void 0:s?p(o,e):o,n=l.length-1,u;n>=0;n--)(u=l[n])&&(i=(s?u(o,e,i):u(i))||i);return s&&i&&m(o,e,i),i};import{css as c,html as h,LitElement as T}from"lit";import{property as a}from"lit/decorators.js";import{customElement as d}from"../internal/define.js";var v=150,t=class extends T{constructor(){super(...arguments);this.value="";this.delayDuration=200;this.skipDelayDuration=300;this.orientation="horizontal";this.isOpenDelayed=!0}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","navigation"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Main"),this.reflectOrientation()}updated(e){super.updated(e),e.has("orientation")&&this.reflectOrientation()}reflectOrientation(){this.setAttribute("data-orientation",this.orientation);for(let e of this.querySelectorAll("skdx-navigation-menu-list"))e.setAttribute("data-orientation",this.orientation)}disconnectedCallback(){clearTimeout(this.openTimer),clearTimeout(this.closeTimer),clearTimeout(this.skipDelayTimer),super.disconnectedCallback()}setValue(e){this.value=e,clearTimeout(this.skipDelayTimer),e?this.isOpenDelayed=!1:this.skipDelayTimer=setTimeout(()=>this.isOpenDelayed=!0,this.skipDelayDuration),this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("skdx-navigation-menu-internal-update",{composed:!0}))}onTriggerEnter(e){clearTimeout(this.closeTimer),clearTimeout(this.openTimer),this.isOpenDelayed?this.openTimer=setTimeout(()=>this.setValue(e),this.delayDuration):this.setValue(e)}onTriggerLeave(){clearTimeout(this.openTimer),clearTimeout(this.closeTimer),this.closeTimer=setTimeout(()=>this.setValue(""),v)}onContentEnter(){clearTimeout(this.closeTimer)}onContentLeave(){this.onTriggerLeave()}onItemSelect(e){clearTimeout(this.openTimer),clearTimeout(this.closeTimer),this.setValue(e)}onClose(){clearTimeout(this.openTimer),clearTimeout(this.closeTimer),this.setValue("")}render(){return h`<slot></slot>`}};t.styles=c`
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
}
|
|
5
|
-
`,
|
|
5
|
+
`,r([a({type:String,reflect:!0})],t.prototype,"value",2),r([a({type:Number,attribute:"delay-duration"})],t.prototype,"delayDuration",2),r([a({type:Number,attribute:"skip-delay-duration"})],t.prototype,"skipDelayDuration",2),r([a({type:String})],t.prototype,"orientation",2),t=r([d("skdx-navigation-menu","navigation-menu","root")],t);export{t as SkdxNavigationMenu};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var b=(n,t)=>{for(var o in t)d(n,o,{get:t[o],enumerable:!0})},k=(n,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of E(t))!g.call(n,e)&&e!==o&&d(n,e,{get:()=>t[e],enumerable:!(r=h(t,e))||r.enumerable});return n};var w=n=>k(d({},"__esModule",{value:!0}),n),m=(n,t,o,r)=>{for(var e=r>1?void 0:r?h(t,o):t,a=n.length-1,i;a>=0;a--)(i=n[a])&&(e=(r?i(t,o,e):i(e))||e);return r&&e&&d(t,o,e),e};var A={};b(A,{SkdxNavigationMenuList:()=>l});module.exports=w(A);var s=require("lit"),p=require("lit/decorators.js"),u=require("../internal/define.cjs"),f=require("../internal/direction.cjs"),v=require("../internal/positioning.cjs");var x="[data-skdx-nav-trigger]",l=class extends s.LitElement{constructor(){super(...arguments);this.loop=!0;this.handleKeyDown=o=>{let r=(0,f.directionalKey)(o.key,this),[e,a]=this.getAttribute("data-orientation")==="vertical"?["ArrowDown","ArrowUp"]:["ArrowRight","ArrowLeft"];if(r!==e&&r!==a)return;let i=Array.from(this.querySelectorAll(x)).filter(y=>!y.closest("skdx-navigation-menu-content"));if(i.length===0)return;let c=i.indexOf(document.activeElement)+(r===e?1:-1);c<0&&(c=this.loop?i.length-1:0),c>=i.length&&(c=this.loop?0:i.length-1),o.preventDefault(),i[c]?.focus()}}connectedCallback(){super.connectedCallback(),this.hasAttribute("data-orientation")||this.setAttribute("data-orientation",this.closest("skdx-navigation-menu")?.orientation??"horizontal"),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}render(){return s.html`<slot></slot>`}};l.styles=s.css`
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
}
|
|
5
|
-
`,
|
|
5
|
+
`,m([(0,p.property)({converter:v.optOutBoolean})],l.prototype,"loop",2),l=m([(0,u.customElement)("skdx-navigation-menu-list","navigation-menu","list")],l);0&&(module.exports={SkdxNavigationMenuList});
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
2
|
/**
|
|
3
3
|
* `<skdx-navigation-menu-list>` — container for `<skdx-navigation-menu-item>`s.
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
4
|
+
* Carries `data-orientation` and drives roving-focus arrow-key navigation
|
|
5
|
+
* across items marked `data-skdx-nav-trigger`, wrapping by default.
|
|
6
|
+
*
|
|
7
|
+
* The axis comes from the parent `<skdx-navigation-menu>`'s `orientation`:
|
|
8
|
+
* Left/Right when horizontal, Up/Down when vertical. Arrow keys that do not
|
|
9
|
+
* match the axis are left alone, so a vertical menu does not swallow
|
|
10
|
+
* Left/Right.
|
|
7
11
|
*/
|
|
8
12
|
export declare class SkdxNavigationMenuList extends LitElement {
|
|
9
13
|
static styles: import("lit").CSSResult;
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
2
|
/**
|
|
3
3
|
* `<skdx-navigation-menu-list>` — container for `<skdx-navigation-menu-item>`s.
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
4
|
+
* Carries `data-orientation` and drives roving-focus arrow-key navigation
|
|
5
|
+
* across items marked `data-skdx-nav-trigger`, wrapping by default.
|
|
6
|
+
*
|
|
7
|
+
* The axis comes from the parent `<skdx-navigation-menu>`'s `orientation`:
|
|
8
|
+
* Left/Right when horizontal, Up/Down when vertical. Arrow keys that do not
|
|
9
|
+
* match the axis are left alone, so a vertical menu does not swallow
|
|
10
|
+
* Left/Right.
|
|
7
11
|
*/
|
|
8
12
|
export declare class SkdxNavigationMenuList extends LitElement {
|
|
9
13
|
static styles: import("lit").CSSResult;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
var
|
|
1
|
+
var m=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var c=(a,i,o,n)=>{for(var e=n>1?void 0:n?h(i,o):i,l=a.length-1,t;l>=0;l--)(t=a[l])&&(e=(n?t(i,o,e):t(e))||e);return n&&e&&m(i,o,e),e};import{css as p,html as u,LitElement as f}from"lit";import{property as v}from"lit/decorators.js";import{customElement as y}from"../internal/define.js";import{directionalKey as E}from"../internal/direction.js";import{optOutBoolean as g}from"../internal/positioning.js";var b="[data-skdx-nav-trigger]",r=class extends f{constructor(){super(...arguments);this.loop=!0;this.handleKeyDown=o=>{let n=E(o.key,this),[e,l]=this.getAttribute("data-orientation")==="vertical"?["ArrowDown","ArrowUp"]:["ArrowRight","ArrowLeft"];if(n!==e&&n!==l)return;let t=Array.from(this.querySelectorAll(b)).filter(d=>!d.closest("skdx-navigation-menu-content"));if(t.length===0)return;let s=t.indexOf(document.activeElement)+(n===e?1:-1);s<0&&(s=this.loop?t.length-1:0),s>=t.length&&(s=this.loop?0:t.length-1),o.preventDefault(),t[s]?.focus()}}connectedCallback(){super.connectedCallback(),this.hasAttribute("data-orientation")||this.setAttribute("data-orientation",this.closest("skdx-navigation-menu")?.orientation??"horizontal"),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}render(){return u`<slot></slot>`}};r.styles=p`
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
}
|
|
5
|
-
`,
|
|
5
|
+
`,c([v({converter:g})],r.prototype,"loop",2),r=c([y("skdx-navigation-menu-list","navigation-menu","list")],r);export{r as SkdxNavigationMenuList};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skdx/web-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.27.0",
|
|
4
4
|
"description": "Standards-based custom elements for the SkandaDX design system — no React (or any framework) required",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"publishConfig": {
|
|
@@ -926,7 +926,7 @@
|
|
|
926
926
|
"tsup": "^8.5.1",
|
|
927
927
|
"typescript": "^6.0.3",
|
|
928
928
|
"vitest": "^4.1.10",
|
|
929
|
-
"@skdx/shared": "0.
|
|
929
|
+
"@skdx/shared": "0.27.0"
|
|
930
930
|
},
|
|
931
931
|
"scripts": {
|
|
932
932
|
"build": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\" && tsup && tsc --emitDeclarationOnly && node ../../scripts/declarations-cjs.mjs && pnpm run analyze",
|