@grantcodes/ui 2.0.0-beta.2 → 2.0.0-beta.5
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/CHANGELOG.md +64 -0
- package/dist/_virtual/_commonjsHelpers.js +1 -0
- package/dist/_virtual/index.js +1 -0
- package/dist/components/container/container.component.js +1 -1
- package/dist/components/dropzone/dropzone.component.js +1 -1
- package/dist/components/form-field/form-field.component.js +1 -1
- package/dist/components/notice/notice.component.js +14 -15
- package/dist/components/notice/notice.scss.js +1 -1
- package/dist/components/tabs/internal/tabs-button.component.js +13 -0
- package/dist/components/tabs/internal/tabs-button.js +1 -0
- package/dist/components/tabs/internal/tabs-item.component.js +1 -0
- package/dist/components/tabs/tab.component.js +10 -1
- package/dist/components/tabs/tabs.component.js +21 -27
- package/dist/css/themes/grantcodes.css +1 -1
- package/dist/node_modules/classnames/index.js +5 -0
- package/package.json +7 -2
- package/dist/components/tabs/tabs-item.component.js +0 -1
- package/dist/components/tabs/tabs-panel.component.js +0 -10
- package/dist/components/tabs/tabs-panel.js +0 -1
- package/dist/components/tabs/tabs-tab.component.js +0 -12
- package/dist/components/tabs/tabs-tab.js +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,69 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [2.0.0-beta.5](https://github.com/grantcodes/ui/compare/v2.0.2-beta...v2.0.0-beta.5) (2024-10-29)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* **avatar:** add initial Avatar component ([0f0f6eb](https://github.com/grantcodes/ui/commit/0f0f6eb7d956aa3fa479baeb641bbd60e98904f2))
|
|
9
|
+
* **container:** update Container full variation and add viewport variation ([74a02e1](https://github.com/grantcodes/ui/commit/74a02e1f67b95a02dbe3efba9d97282749009f6f))
|
|
10
|
+
* **dialog:** add initial Dialog component ([6d50f52](https://github.com/grantcodes/ui/commit/6d50f52031cd4ae23183dac2152be29579bc3de9))
|
|
11
|
+
* **form-field:** add initial form-field component ([1ea4589](https://github.com/grantcodes/ui/commit/1ea458963e5039d6cfda9ca054a9527ad4540304))
|
|
12
|
+
* **gallery:** add gallery component ([4f8d6e1](https://github.com/grantcodes/ui/commit/4f8d6e11d5ea5c4ec7a0288ce61b65bb77e9be1b))
|
|
13
|
+
* improve focus styles ([8137403](https://github.com/grantcodes/ui/commit/8137403fd19f36cd034c9909dbd8088782905c53))
|
|
14
|
+
* **tabs:** add Tabs component ([e8d8452](https://github.com/grantcodes/ui/commit/e8d8452d7c8ce223fdcc5ac28371bb52859955f3))
|
|
15
|
+
* **tooltip:** add initial Tooltip component ([4991c56](https://github.com/grantcodes/ui/commit/4991c5631da7fd993c33f767252836730d5aae01))
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Bug Fixes
|
|
19
|
+
|
|
20
|
+
* **avatar:** export the Avatar component from the main exports ([2f4119b](https://github.com/grantcodes/ui/commit/2f4119b9216fe344712f3a9bf4abda9eb1245fb4))
|
|
21
|
+
* **codepreview:** fix syntax highlighting ([5010a1f](https://github.com/grantcodes/ui/commit/5010a1f31c789d028154b036f29c67f3539f38b2))
|
|
22
|
+
* **input:** improve select styles ([3d17cc4](https://github.com/grantcodes/ui/commit/3d17cc45da034995ee5ca4b85148f0c0e0f2f080))
|
|
23
|
+
* **notice:** fix notice dismiss button ([254e20a](https://github.com/grantcodes/ui/commit/254e20ae232f33ebefbe2b69aaf6e16554fa1d91))
|
|
24
|
+
* **plop:** fix plopfile ([dfc0879](https://github.com/grantcodes/ui/commit/dfc087927397bbc8a49666631b19b075dcaf4b9a))
|
|
25
|
+
* **tabs:** simplify and improve tabs ([c4badfb](https://github.com/grantcodes/ui/commit/c4badfb69fae21c29774032d24e45bfa89796ce4))
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
### Miscellaneous Chores
|
|
29
|
+
|
|
30
|
+
* release 2.0.0-beta.5 ([04f38a1](https://github.com/grantcodes/ui/commit/04f38a1a79840ee15a1bc44c3e55ada780f1c2c4))
|
|
31
|
+
* release 2.0.0-beta4 ([5087ac5](https://github.com/grantcodes/ui/commit/5087ac51b8bf4bc31ce9bd312fa32114d2b9f78e))
|
|
32
|
+
|
|
33
|
+
## [2.0.1-beta4](https://github.com/grantcodes/ui/compare/v2.0.0-beta4...v2.0.1-beta4) (2024-10-26)
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
### Bug Fixes
|
|
37
|
+
|
|
38
|
+
* **notice:** fix notice dismiss button ([254e20a](https://github.com/grantcodes/ui/commit/254e20ae232f33ebefbe2b69aaf6e16554fa1d91))
|
|
39
|
+
|
|
40
|
+
## [2.0.0-beta4](https://github.com/grantcodes/ui/compare/v1.3.0...v2.0.0-beta4) (2024-10-25)
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
### Features
|
|
44
|
+
|
|
45
|
+
* **avatar:** add initial Avatar component ([0f0f6eb](https://github.com/grantcodes/ui/commit/0f0f6eb7d956aa3fa479baeb641bbd60e98904f2))
|
|
46
|
+
* **container:** update Container full variation and add viewport variation ([74a02e1](https://github.com/grantcodes/ui/commit/74a02e1f67b95a02dbe3efba9d97282749009f6f))
|
|
47
|
+
* **dialog:** add initial Dialog component ([6d50f52](https://github.com/grantcodes/ui/commit/6d50f52031cd4ae23183dac2152be29579bc3de9))
|
|
48
|
+
* **form-field:** add initial form-field component ([1ea4589](https://github.com/grantcodes/ui/commit/1ea458963e5039d6cfda9ca054a9527ad4540304))
|
|
49
|
+
* **gallery:** add gallery component ([4f8d6e1](https://github.com/grantcodes/ui/commit/4f8d6e11d5ea5c4ec7a0288ce61b65bb77e9be1b))
|
|
50
|
+
* improve focus styles ([8137403](https://github.com/grantcodes/ui/commit/8137403fd19f36cd034c9909dbd8088782905c53))
|
|
51
|
+
* **tabs:** add Tabs component ([e8d8452](https://github.com/grantcodes/ui/commit/e8d8452d7c8ce223fdcc5ac28371bb52859955f3))
|
|
52
|
+
* **tooltip:** add initial Tooltip component ([4991c56](https://github.com/grantcodes/ui/commit/4991c5631da7fd993c33f767252836730d5aae01))
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
### Bug Fixes
|
|
56
|
+
|
|
57
|
+
* **avatar:** export the Avatar component from the main exports ([2f4119b](https://github.com/grantcodes/ui/commit/2f4119b9216fe344712f3a9bf4abda9eb1245fb4))
|
|
58
|
+
* **codepreview:** fix syntax highlighting ([5010a1f](https://github.com/grantcodes/ui/commit/5010a1f31c789d028154b036f29c67f3539f38b2))
|
|
59
|
+
* **input:** improve select styles ([3d17cc4](https://github.com/grantcodes/ui/commit/3d17cc45da034995ee5ca4b85148f0c0e0f2f080))
|
|
60
|
+
* **plop:** fix plopfile ([dfc0879](https://github.com/grantcodes/ui/commit/dfc087927397bbc8a49666631b19b075dcaf4b9a))
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
### Miscellaneous Chores
|
|
64
|
+
|
|
65
|
+
* release 2.0.0-beta4 ([5087ac5](https://github.com/grantcodes/ui/commit/5087ac51b8bf4bc31ce9bd312fa32114d2b9f78e))
|
|
66
|
+
|
|
3
67
|
## [1.2.0](https://github.com/grantcodes/ui/compare/v1.1.0...v1.2.0) (2023-06-29)
|
|
4
68
|
|
|
5
69
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var f=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{};function n(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function l(e){return e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function a(e){return e&&Object.prototype.hasOwnProperty.call(e,"default")&&Object.keys(e).length===1?e.default:e}function c(e){if(e.__esModule)return e;var o=e.default;if(typeof o=="function"){var t=function r(){return this instanceof r?Reflect.construct(o,arguments,this.constructor):o.apply(this,arguments)};t.prototype=o.prototype}else t={};return Object.defineProperty(t,"__esModule",{value:!0}),Object.keys(e).forEach(function(r){var u=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,u.get?u:{enumerable:!0,get:function(){return e[r]}})}),t}export{f as commonjsGlobal,c as getAugmentedNamespace,n as getDefaultExportFromCjs,a as getDefaultExportFromNamespaceIfNotNamed,l as getDefaultExportFromNamespaceIfPresent};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var s={exports:{}};export{s as __module};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{LitElement as c,html as f,unsafeCSS as m}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/index.js";import{property as p,customElement as d}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/decorators.js";import u from"
|
|
1
|
+
import{LitElement as c,html as f,unsafeCSS as m}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/index.js";import{property as p,customElement as d}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/decorators.js";import u from"../../node_modules/classnames/index.js";import v from"./container.scss.js";var h=Object.defineProperty,g=Object.getOwnPropertyDescriptor,l=(r,n,i,o)=>{for(var t=o>1?void 0:o?g(n,i):n,s=r.length-1,a;s>=0;s--)(a=r[s])&&(t=(o?a(n,i,t):a(t))||t);return o&&t&&h(n,i,t),t};let e=class extends c{constructor(){super(...arguments),this.align="default",this.nopad=!1}render(){const r=u("container",{"container--wide":this.align==="wide","container--full":this.align==="full","container--viewport":this.align==="viewport","container--nopad":this.nopad});return f`
|
|
2
2
|
<div class="${r}">
|
|
3
3
|
<slot></slot>
|
|
4
4
|
</div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{LitElement as d,html as p,unsafeCSS as u}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/index.js";import{property as f,queryAssignedElements as h,state as i,customElement as _}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/decorators.js";import m from"
|
|
1
|
+
import{LitElement as d,html as p,unsafeCSS as u}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/index.js";import{property as f,queryAssignedElements as h,state as i,customElement as _}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/decorators.js";import m from"../../node_modules/classnames/index.js";import v from"./dropzone.scss.js";var b=Object.defineProperty,g=Object.getOwnPropertyDescriptor,s=(t,l,o,n)=>{for(var e=n>1?void 0:n?g(l,o):l,a=t.length-1,c;a>=0;a--)(c=t[a])&&(e=(n?c(l,o,e):c(e))||e);return n&&e&&b(l,o,e),e};let r=class extends d{constructor(){super(...arguments),this.fullscreenOnDrag=!1,this._fullscreen=!1,this._enableFullscreen=()=>{this.fullscreenOnDrag&&(this._fullscreen=!0)},this._disableFullscreen=()=>{this._fullscreen=!1}}connectedCallback(){super.connectedCallback(),document.addEventListener("dragenter",this._enableFullscreen),document.addEventListener("dragend",this._disableFullscreen)}disconnectedCallback(){document.removeEventListener("dragenter",this._enableFullscreen),document.removeEventListener("dragend",this._disableFullscreen),super.disconnectedCallback()}firstUpdated(){if(this._input.length===0)throw new Error("No file input found");this._placeholder=this._input[0].placeholder}render(){const t=m("dropzone",{"dropzone--fullscreen":this._fullscreen});return p`
|
|
2
2
|
<div
|
|
3
3
|
class=${t}
|
|
4
4
|
@mouseLeave=${this._disableFullscreen}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{LitElement as f,html as o,unsafeCSS as u}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/index.js";import{property as a,queryAssignedElements as d,customElement as c}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/decorators.js";import m from"./form-field.scss.js";import b from"
|
|
1
|
+
import{LitElement as f,html as o,unsafeCSS as u}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/index.js";import{property as a,queryAssignedElements as d,customElement as c}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/decorators.js";import m from"./form-field.scss.js";import b from"../../node_modules/classnames/index.js";import{generateId as y}from"../../lib/generate-id.js";var g=Object.defineProperty,I=Object.getOwnPropertyDescriptor,i=(e,s,p,l)=>{for(var r=l>1?void 0:l?I(s,p):s,n=e.length-1,h;n>=0;n--)(h=e[n])&&(r=(l?h(s,p,r):h(r))||r);return l&&r&&g(s,p,r),r};let t=class extends f{constructor(){super(),this.label="",this.inlineInput=!1,this.groupInput=!1,this.id||(this.id=y("form-field"))}get errorId(){return`${this.id}-error`}get helpId(){return`${this.id}-help`}get ariaDescribedBy(){const e=[];return this.error&&e.push(this.errorId),this.help&&e.push(this.helpId),e.join(" ")}firstUpdated(){const e=this.inputElements[0];this.nestedFields.length>0&&(this.groupInput=!0,this.requestUpdate()),e&&(e.id=this.id,e.setAttribute("aria-describedby",this.ariaDescribedBy),(e.type==="checkbox"||e.type==="radio")&&(this.inlineInput=!0,this.requestUpdate()))}handleLabelClick(){const e=this.inputElements[0];e&&(e.focus(),e instanceof HTMLInputElement&&(e.type==="checkbox"||e.type==="radio")&&(e.checked=!e.checked))}errorTemplate(){return this.error?o`
|
|
2
2
|
<p class="form-field__error" id=${this.errorId}>Error: ${this.error}</p>
|
|
3
3
|
`:""}helpTemplate(){return this.help?o`
|
|
4
4
|
<span class="form-field__help" id=${this.helpId}>${this.help}</span>
|
|
@@ -1,17 +1,16 @@
|
|
|
1
|
-
import{LitElement as
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import{LitElement as p,html as r,unsafeCSS as d}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/index.js";import{property as m,customElement as f}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/decorators.js";import h from"../../node_modules/classnames/index.js";import u from"./notice.scss.js";import{GrantCodesIcon as v}from"../icon/icon.component.js";import"../../icons.js";import{Info as _,CheckCircle2 as C,AlertCircle as g,XCircle as $,X as b}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lucide-static/dist/esm/lucide-static.js";var y=Object.defineProperty,D=Object.getOwnPropertyDescriptor,n=(s,i,c,o)=>{for(var t=o>1?void 0:o?D(i,c):i,a=s.length-1,l;a>=0;a--)(l=s[a])&&(t=(o?l(i,c,t):l(t))||t);return o&&t&&y(i,c,t),t};const w={info:_,success:C,warning:g,error:$};let e=class extends p{constructor(){super(...arguments),this.variant="info",this.title="",this.dismissable=!1}onDismiss(s){document.startViewTransition?document.startViewTransition(()=>{this.remove()}):this.remove()}renderDismiss(){return this.dismissable?r`
|
|
2
|
+
<button class="notice__close" @click=${this.onDismiss}>
|
|
3
|
+
<grantcodes-icon icon="${b}" title="Close Notice"></grantcodes-icon>
|
|
4
|
+
</button>
|
|
5
|
+
`:r``}render(){const s=w[this.variant];return r`
|
|
6
|
+
<aside class="${h("notice",`notice--${this.variant}`)}">
|
|
7
|
+
<grantcodes-icon icon="${s}" class="notice__icon"></grantcodes-icon>
|
|
5
8
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
9
|
+
<div class="notice__content">
|
|
10
|
+
${this.title&&r`<h2 class="notice__title">${this.title}</h2>`}
|
|
11
|
+
<p><slot></slot></p>
|
|
12
|
+
</div>
|
|
10
13
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
</button>
|
|
15
|
-
`}
|
|
16
|
-
</aside>
|
|
17
|
-
`}};o.dependencies={"grancodes-icon":u};o.styles=[_(h)];s([p()],o.prototype,"variant",2);s([p()],o.prototype,"title",2);s([p()],o.prototype,"onDismiss",2);o=s([f("grantcodes-notice")],o);export{o as GrantCodesNotice};
|
|
14
|
+
${this.renderDismiss()}
|
|
15
|
+
</aside>
|
|
16
|
+
`}};e.dependencies={"grancodes-icon":v};e.styles=[d(u)];n([m()],e.prototype,"variant",2);n([m()],e.prototype,"title",2);n([m({type:Boolean})],e.prototype,"dismissable",2);e=n([f("grantcodes-notice")],e);export{e as GrantCodesNotice};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const o="*,*:before,*:after{box-sizing:border-box}:host{display:block}.notice{display:flex;flex-direction:row;align-items:flex-start;gap:1rem;padding:1rem;border-radius:.25rem}.notice--info{color:var(--color-base-info-900);background-color:var(--color-base-info-100)}.notice--success{color:var(--color-base-success-900);background-color:var(--color-base-success-100)}.notice--warning{color:var(--color-base-warning-900);background-color:var(--color-base-warning-100)}.notice--error{color:var(--color-base-error-900);background-color:var(--color-base-error-100)}.notice__title{font-size:1rem;margin:0}.notice__icon{font-size:calc(var(--font-line-height-body) * 1em)}.notice__content{flex-grow:1}.notice__close{background:none;color:inherit;opacity:.5;transition:.2s;font-size:calc(var(--font-line-height-body) * 1em);line-height:1;padding:.5rem;margin:-.5rem -.5rem 0 0;border:0}.notice__close:hover,.notice__close:focus-visible{background:none;color:inherit;opacity:1}.notice p{margin:0}";export{o as default};
|
|
1
|
+
const o="*,*:before,*:after{box-sizing:border-box}:host{display:block}.notice{display:flex;flex-direction:row;align-items:flex-start;gap:1rem;padding:1rem;border-radius:.25rem;view-transition-name:notice;transition:opacity .5s}.notice--info{color:var(--color-base-info-900);background-color:var(--color-base-info-100)}.notice--success{color:var(--color-base-success-900);background-color:var(--color-base-success-100)}.notice--warning{color:var(--color-base-warning-900);background-color:var(--color-base-warning-100)}.notice--error{color:var(--color-base-error-900);background-color:var(--color-base-error-100)}.notice__title{font-size:1rem;margin:0}.notice__icon{font-size:calc(var(--font-line-height-body) * 1em)}.notice__content{flex-grow:1}.notice__close{background:none;color:inherit;opacity:.5;transition:.2s;font-size:calc(var(--font-line-height-body) * 1em);line-height:1;padding:.5rem;margin:-.5rem -.5rem 0 0;border:0}.notice__close:hover,.notice__close:focus-visible{background:none;color:inherit;opacity:1}.notice p{margin:0}";export{o as default};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import{GrantCodesTabsItem as l}from"./tabs-item.component.js";import{html as p,LitElement as b,unsafeCSS as m}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/index.js";import{customElement as c}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/decorators.js";import{ifDefined as d}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/directives/if-defined.js";import f from"../tabs.scss.js";var u=Object.defineProperty,v=Object.getOwnPropertyDescriptor,h=(n,e,r,s)=>{for(var t=s>1?void 0:s?v(e,r):e,a=n.length-1,i;a>=0;a--)(i=n[a])&&(t=(s?i(e,r,t):i(t))||t);return s&&t&&u(e,r,t),t};let o=class extends l{render(){return p`
|
|
2
|
+
<button
|
|
3
|
+
id="${this.buttonId}"
|
|
4
|
+
type="button"
|
|
5
|
+
role="tab"
|
|
6
|
+
?aria-selected=${this.active}
|
|
7
|
+
aria-controls="${this.panelId}"
|
|
8
|
+
tabindex=${d(this.active?void 0:"-1")}
|
|
9
|
+
class="tabs__tab ${this.active?"is-active":""}"
|
|
10
|
+
>
|
|
11
|
+
<span>${this.label}</span>
|
|
12
|
+
</button>
|
|
13
|
+
`}};o.shadowRootOptions={...b.shadowRootOptions,delegatesFocus:!0};o.styles=[m(f)];o=h([c("grantcodes-tabs-button")],o);export{o as GrantCodesTabsButton};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{GrantCodesTabsButton as t}from"./tabs-button.component.js";const o=t;export{t as GrantCodesTabsButton,o as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{LitElement as y,html as c}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/index.js";import{property as e}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/decorators.js";var u=Object.defineProperty,d=Object.getOwnPropertyDescriptor,r=(i,o,s,p)=>{for(var t=p>1?void 0:p?d(o,s):o,a=i.length-1,l;a>=0;a--)(l=i[a])&&(t=(p?l(o,s,t):l(t))||t);return p&&t&&u(o,s,t),t};class n extends y{constructor(){super(...arguments),this.active=!1,this.label="",this.index=-1,this.containerId=""}get buttonId(){return`${this.containerId}-button-${this.index.toString()}`}get panelId(){return`${this.containerId}-panel-${this.index.toString()}`}get content(){return this.label}render(){return c``}}r([e({type:Boolean})],n.prototype,"active",2);r([e({type:String})],n.prototype,"label",2);r([e({type:Number})],n.prototype,"index",2);r([e({type:String})],n.prototype,"containerId",2);r([e({type:String,reflect:!0})],n.prototype,"buttonId",1);r([e({type:String})],n.prototype,"panelId",1);r([e({type:String})],n.prototype,"content",1);export{n as GrantCodesTabsItem};
|
|
@@ -1 +1,10 @@
|
|
|
1
|
-
import{GrantCodesTabsItem as
|
|
1
|
+
import{GrantCodesTabsItem as n}from"./internal/tabs-item.component.js";import{html as p,unsafeCSS as m}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/index.js";import{customElement as b}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/decorators.js";import f from"./tabs.scss.js";var v=Object.defineProperty,d=Object.getOwnPropertyDescriptor,c=(i,t,s,r)=>{for(var e=r>1?void 0:r?d(t,s):t,a=i.length-1,l;a>=0;a--)(l=i[a])&&(e=(r?l(t,s,e):l(e))||e);return r&&e&&v(t,s,e),e};let o=class extends n{render(){return p`
|
|
2
|
+
<div
|
|
3
|
+
id="${this.panelId}"
|
|
4
|
+
role="tabpanel"
|
|
5
|
+
aria-labelledby="${this.buttonId}"
|
|
6
|
+
class="tabs__panel ${this.active?"is-active":""}"
|
|
7
|
+
>
|
|
8
|
+
<slot></slot>
|
|
9
|
+
</div>
|
|
10
|
+
`}};o.styles=[m(f)];o=c([b("grantcodes-tab")],o);export{o as GrantCodesTab};
|
|
@@ -1,28 +1,22 @@
|
|
|
1
|
-
import{LitElement as
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
import{LitElement as l,html as d,unsafeCSS as c}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/index.js";import{property as h,queryAssignedElements as f,queryAll as u,state as p,customElement as v}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/decorators.js";import{ifDefined as T}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/directives/if-defined.js";import m from"./tabs.scss.js";import"./internal/tabs-button.js";import{generateId as y}from"../../lib/generate-id.js";var _=Object.defineProperty,x=Object.getOwnPropertyDescriptor,n=(t,e,s,i)=>{for(var a=i>1?void 0:i?x(e,s):e,o=t.length-1,b;o>=0;o--)(b=t[o])&&(a=(i?b(e,s,a):b(a))||a);return i&&a&&_(e,s,a),a};let r=class extends l{constructor(){super(),this.focusedTabIndex=-1,this.id||(this.id=y("tabs"))}get activeTab(){return this.tabs.find(t=>t.active)??null}set activeTab(t){this.tabs.forEach((e,s)=>{e===t?(e.active=!0,this.focusedTabIndex=s):e.active=!1}),this.requestUpdate()}initializeTabs(){this.tabs.forEach((t,e)=>{t.index=e,t.containerId=this.id}),this.activeTab==null&&(this.focusedTabIndex=0,this.activeTab=this.tabs[0])}firstUpdated(){this.initializeTabs()}handleTabKeyDown(t){if(t.key==="ArrowRight"||t.key==="ArrowLeft"){t.preventDefault();const e=this.tabs,s=t.key==="ArrowRight"?(this.focusedTabIndex+1)%e.length:this.focusedTabIndex-1,i=this.tabButtons[s];i&&(i.focus(),this.focusedTabIndex=s)}}renderTabButtons(){return this.tabs.map((t,e)=>d`
|
|
2
|
+
<grantcodes-tabs-button
|
|
3
|
+
index=${e+1}
|
|
4
|
+
label="${t.label}"
|
|
5
|
+
containerId="${this.id}"
|
|
6
|
+
?active=${t.active}
|
|
7
|
+
@click=${()=>{this.activeTab=t}}
|
|
8
|
+
@keydown=${this.handleTabKeyDown}
|
|
9
|
+
></grantcodes-tabs-button>
|
|
10
|
+
`)}render(){return d`
|
|
11
|
+
<div class="tabs" id="${this.id}">
|
|
12
|
+
<div role="tablist" class="tabs__tablist" aria-label=${T(this.label)}>
|
|
13
|
+
<div class="tabs__tablist__inner">
|
|
14
|
+
${this.renderTabButtons()}
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
15
17
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
?active=${t.active}
|
|
22
|
-
>${t.content}</grantcodes-tabs-panel
|
|
23
|
-
>`)}
|
|
24
|
-
</div>
|
|
25
|
-
|
|
26
|
-
<slot></slot>
|
|
27
|
-
</div>
|
|
28
|
-
`}};r.styles=[c(m)];n([p({type:String})],r.prototype,"label",2);n([h({selector:"grantcodes-tab"})],r.prototype,"tabs",2);n([v("grantcodes-tabs-tab")],r.prototype,"tabsListTabs",2);n([f()],r.prototype,"focusedTabIndex",2);r=n([u("grantcodes-tabs")],r);export{r as GrantCodesTabs};
|
|
18
|
+
<div class="tabs__panels">
|
|
19
|
+
<slot></slot>
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
`}};r.styles=[c(m)];n([h({type:String})],r.prototype,"label",2);n([f({selector:"grantcodes-tab"})],r.prototype,"tabs",2);n([u("grantcodes-tabs-button")],r.prototype,"tabButtons",2);n([p()],r.prototype,"focusedTabIndex",2);r=n([v("grantcodes-tabs")],r);export{r as GrantCodesTabs};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--component-input-base-box-shadow: none;--component-button-base-box-shadow: none;--component-button-base-border-color: transparent;--size-block-width-wide: 70rem;--size-block-width-normal: 40rem;--size-border-width: .125rem;--size-border-radius: .5rem;--size-space-unit: 1rem;--font-weight-heading: 900;--font-weight-body: 600;--font-line-height-heading: 1.1;--font-line-height-body: 1.5;--font-size-base: clamp(1rem, .34vw + .91rem, 1.2rem);--font-size-huge: 2.44140625rem;--font-size-large: 1.5625rem;--font-size-medium: 1.25rem;--font-size-normal: 1rem;--font-size-small: .8rem;--font-size-tiny: .64rem;--font-family-system-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;--font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--color-base-error-900: #7a0906;--color-base-error-800: #93170a;--color-base-error-700: #b72b10;--color-base-error-600: #db4518;--color-base-error-500: #ff6321;--color-base-error-400: #ff9558;--color-base-error-300: #ffb379;--color-base-error-200: #ffd2a6;--color-base-error-100: #ffebd2;--color-base-warning-900: #786100;--color-base-warning-800: #927800;--color-base-warning-700: #b59700;--color-base-warning-600: #d8b800;--color-base-warning-500: #fcda00;--color-base-warning-400: #fde63f;--color-base-warning-300: #feed65;--color-base-warning-200: #fef598;--color-base-warning-100: #fefacb;--color-base-info-900: #004375;--color-base-info-800: #005d8d;--color-base-info-700: #0081af;--color-base-info-600: #00acd1;--color-base-info-500: #00dcf4;--color-base-info-400: #3ef5f8;--color-base-info-300: #64fbf2;--color-base-info-200: #98fdef;--color-base-info-100: #cbfef2;--color-base-success-900: #09600f;--color-base-success-800: #0f740f;--color-base-success-700: #219019;--color-base-success-600: #38ac24;--color-base-success-500: #53c932;--color-base-success-400: #85de61;--color-base-success-300: #aaee83;--color-base-success-200: #cff9ae;--color-base-success-100: #e9fcd6;--color-base-tertiary-900: #1b2c68;--color-base-tertiary-800: #2d437e;--color-base-tertiary-700: #48619c;--color-base-tertiary-600: #6985bb;--color-base-tertiary-500: #90acda;--color-base-tertiary-400: #adc6e8;--color-base-tertiary-300: #c2d8f3;--color-base-tertiary-200: #d9eafb;--color-base-tertiary-100: #ebf5fd;--color-base-secondary-900: #5c0d1c;--color-base-secondary-800: #6f151f;--color-base-secondary-700: #8a2225;--color-base-secondary-600: #a53731;--color-base-secondary-500: #c15444;--color-base-secondary-400: #d98570;--color-base-secondary-300: #ecaa90;--color-base-secondary-200: #f8cfb8;--color-base-secondary-100: #fbe9db;--color-base-primary-900: #17115e;--color-base-primary-800: #251d72;--color-base-primary-700: #382d8d;--color-base-primary-600: #4f42a9;--color-base-primary-500: #6a5bc5;--color-base-primary-400: #9183dc;--color-base-primary-300: #aea0ed;--color-base-primary-200: #cdc3f9;--color-base-primary-100: #e6e0fc;--color-base-dark-shade: #29263b;--color-base-dark-main: #24222f;--color-base-light-shade: #d6d5dd;--color-base-light-main: #f1f1f3;--asset-font-quicksand-weight-700-woff2: "assets/fonts/quicksand-bold.woff2";--asset-font-quicksand-weight-700-woff: "assets/fonts/quicksand-bold.woff";--asset-font-quicksand-weight-700-ttf: "assets/fonts/quicksand-bold.ttf";--asset-font-quicksand-weight-500-woff2: "assets/fonts/quicksand-medium.woff2";--asset-font-quicksand-weight-500-woff: "assets/fonts/quicksand-medium.woff";--asset-font-quicksand-weight-500-ttf: "assets/fonts/quicksand-medium.ttf";--asset-font-quicksand-weight-400-woff2: "assets/fonts/quicksand-regular.woff2";--asset-font-quicksand-weight-400-woff: "assets/fonts/quicksand-regular.woff";--asset-font-quicksand-weight-400-ttf: "assets/fonts/quicksand-regular.ttf";--asset-font-quicksand-weight-300-woff2: "assets/fonts/quicksand-light.woff2";--asset-font-quicksand-weight-300-woff: "assets/fonts/quicksand-light.woff";--asset-font-quicksand-weight-300-ttf: "assets/fonts/quicksand-light.ttf";--asset-font-quicksand-name: "Quicksand";--asset-font-greycliff-weight-900-woff2: "assets/fonts/greycliff-heavy.woff2";--asset-font-greycliff-weight-900-woff: "assets/fonts/greycliff-heavy.woff";--asset-font-greycliff-weight-900-eot: "assets/fonts/greycliff-heavy.eot";--asset-font-greycliff-weight-900-ttf: "assets/fonts/greycliff-heavy.ttf";--asset-font-greycliff-weight-800-woff2: "assets/fonts/greycliff-extra-bold.woff2";--asset-font-greycliff-weight-800-woff: "assets/fonts/greycliff-extra-bold.woff";--asset-font-greycliff-weight-800-eot: "assets/fonts/greycliff-extra-bold.eot";--asset-font-greycliff-weight-800-ttf: "assets/fonts/greycliff-extra-bold.ttf";--asset-font-greycliff-weight-700-woff2: "assets/fonts/greycliff-bold.woff2";--asset-font-greycliff-weight-700-woff: "assets/fonts/greycliff-bold.woff";--asset-font-greycliff-weight-700-eot: "assets/fonts/greycliff-bold.eot";--asset-font-greycliff-weight-700-ttf: "assets/fonts/greycliff-bold.ttf";--asset-font-greycliff-weight-600-woff2: "assets/fonts/greycliff-demi-bold.woff2";--asset-font-greycliff-weight-600-woff: "assets/fonts/greycliff-demi-bold.woff";--asset-font-greycliff-weight-600-eot: "assets/fonts/greycliff-demi-bold.eot";--asset-font-greycliff-weight-600-ttf: "assets/fonts/greycliff-demi-bold.ttf";--asset-font-greycliff-weight-500-woff2: "assets/fonts/greycliff-medium.woff2";--asset-font-greycliff-weight-500-woff: "assets/fonts/greycliff-medium.woff";--asset-font-greycliff-weight-500-eot: "assets/fonts/greycliff-medium.eot";--asset-font-greycliff-weight-500-ttf: "assets/fonts/greycliff-medium.ttf";--asset-font-greycliff-weight-400-woff2: "assets/fonts/greycliff-regular.woff2";--asset-font-greycliff-weight-400-woff: "assets/fonts/greycliff-regular.woff";--asset-font-greycliff-weight-400-eot: "assets/fonts/greycliff-regular.eot";--asset-font-greycliff-weight-400-ttf: "assets/fonts/greycliff-regular.ttf";--asset-font-greycliff-weight-300-woff2: "assets/fonts/greycliff-light.woff2";--asset-font-greycliff-weight-300-woff: "assets/fonts/greycliff-light.woff";--asset-font-greycliff-weight-300-eot: "assets/fonts/greycliff-light.eot";--asset-font-greycliff-weight-300-ttf: "assets/fonts/greycliff-light.ttf";--asset-font-greycliff-weight-200-woff2: "assets/fonts/greycliff-extra-light.woff2";--asset-font-greycliff-weight-200-woff: "assets/fonts/greycliff-extra-light.woff";--asset-font-greycliff-weight-200-eot: "assets/fonts/greycliff-extra-light.eot";--asset-font-greycliff-weight-200-ttf: "assets/fonts/greycliff-extra-light.ttf";--asset-font-greycliff-weight-100-woff2: "assets/fonts/greycliff-thin.woff2";--asset-font-greycliff-weight-100-woff: "assets/fonts/greycliff-thin.woff";--asset-font-greycliff-weight-100-eot: "assets/fonts/greycliff-thin.eot";--asset-font-greycliff-weight-100-ttf: "assets/fonts/greycliff-thin.ttf";--asset-font-greycliff-name: "Greycliff";--component-input-active-box-shadow: var(--component-input-base-box-shadow);--component-input-active-border-color: var(--color-base-primary-500);--component-input-active-color: var(--color-base-dark-main);--component-input-hover-box-shadow: var(--component-input-base-box-shadow);--component-input-hover-border-color: var(--color-base-dark-shade);--component-input-hover-color: var(--color-base-dark-main);--component-input-base-border-width: var(--size-border-width);--component-input-base-border-radius: var(--size-border-radius);--component-input-base-color: var(--color-base-dark-shade);--component-card-border-radius: var(--size-border-radius);--component-card-border-width: var(--size-border-width);--component-card-border-color: var(--color-base-light-shade);--component-card-background: var(--color-base-light-main);--component-card-color: var(--color-base-primary-500);--component-button-active-background: var(--color-base-primary-700);--component-button-hover-box-shadow: var(--component-button-base-box-shadow);--component-button-hover-border-color: var(--component-button-base-border-color);--component-button-hover-background: var(--color-base-primary-600);--component-button-hover-color: var(--color-base-light-main);--component-button-base-border-width: var(--size-border-width);--component-button-base-border-radius: var(--size-border-radius);--component-button-base-background: var(--color-base-primary-500);--component-button-base-color: var(--color-base-light-shade);--font-family-mono: var(--font-family-system-mono);--font-family-body: var(--asset-font-greycliff-name), var(--font-family-system);--font-family-heading: var(--asset-font-greycliff-name), var(--font-family-system);--color-font-base: var(--color-base-dark-main);--color-base-background-shade: var(--color-base-light-shade);--color-base-background-main: var(--color-base-light-main);--component-input-base-border-color: var(--color-base-background-shade);--component-input-base-background: var(--color-base-background-main);--component-button-active-box-shadow: var(--component-button-hover-box-shadow);--component-button-active-border-color: var(--component-button-hover-border-color);--component-button-active-color: var(--component-button-hover-color);--component-input-active-background: var(--component-input-base-background);--component-input-hover-background: var(--component-input-base-background)}@font-face{font-family:Greycliff;font-style:normal;font-weight:100;font-display:swap;src:url(/fonts/greycliff-extra-light.woff2) format("woff2"),url(/fonts/greycliff-extra-light.woff) format("woff")}@font-face{font-family:Greycliff;font-style:normal;font-weight:200;font-display:swap;src:url(/fonts/greycliff-light.woff2) format("woff2"),url(/fonts/greycliff-light.woff) format("woff")}@font-face{font-family:Greycliff;font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/greycliff-thin.woff2) format("woff2"),url(/fonts/greycliff-thin.woff) format("woff")}@font-face{font-family:Greycliff;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/greycliff-regular.woff2) format("woff2"),url(/fonts/greycliff-regular.woff) format("woff")}@font-face{font-family:Greycliff;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/greycliff-medium.woff2) format("woff2"),url(/fonts/greycliff-medium.woff) format("woff")}@font-face{font-family:Greycliff;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/greycliff-demi-bold.woff2) format("woff2"),url(/fonts/greycliff-demi-bold.woff) format("woff")}@font-face{font-family:Greycliff;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/greycliff-bold.woff2) format("woff2"),url(/fonts/greycliff-bold.woff) format("woff")}@font-face{font-family:Greycliff;font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/greycliff-extra-bold.woff2) format("woff2"),url(/fonts/greycliff-extra-bold.woff) format("woff")}@font-face{font-family:Greycliff;font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/greycliff-heavy.woff2) format("woff2"),url(/fonts/greycliff-heavy.woff) format("woff")}@font-face{font-family:Greycliff;font-style:italic;font-weight:100;font-display:swap;src:url(/fonts/greycliff-extra-light-oblique.woff2) format("woff2"),url(/fonts/greycliff-extra-light-oblique.woff) format("woff")}@font-face{font-family:Greycliff;font-style:italic;font-weight:200;font-display:swap;src:url(/fonts/greycliff-light-oblique.woff2) format("woff2"),url(/fonts/greycliff-light-oblique.woff) format("woff")}@font-face{font-family:Greycliff;font-style:italic;font-weight:300;font-display:swap;src:url(/fonts/greycliff-thin-oblique.woff2) format("woff2"),url(/fonts/greycliff-thin-oblique.woff) format("woff")}@font-face{font-family:Greycliff;font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/greycliff-regular-oblique.woff2) format("woff2"),url(/fonts/greycliff-regular-oblique.woff) format("woff")}@font-face{font-family:Greycliff;font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/greycliff-medium-oblique.woff2) format("woff2"),url(/fonts/greycliff-medium-oblique.woff) format("woff")}@font-face{font-family:Greycliff;font-style:italic;font-weight:600;font-display:swap;src:url(/fonts/greycliff-demi-bold-oblique.woff2) format("woff2"),url(/fonts/greycliff-demi-bold-oblique.woff) format("woff")}@font-face{font-family:Greycliff;font-style:italic;font-weight:700;font-display:swap;src:url(/fonts/greycliff-bold-oblique.woff2) format("woff2"),url(/fonts/greycliff-bold-oblique.woff) format("woff")}@font-face{font-family:Greycliff;font-style:italic;font-weight:800;font-display:swap;src:url(/fonts/greycliff-extra-bold-oblique.woff2) format("woff2"),url(/fonts/greycliff-extra-bold-oblique.woff) format("woff")}@font-face{font-family:Greycliff;font-style:italic;font-weight:900;font-display:swap;src:url(/fonts/greycliff-heavy-oblique.woff2) format("woff2"),url(/fonts/greycliff-heavy-oblique.woff) format("woff")}
|
|
1
|
+
:root{--component-input-base-box-shadow: none;--component-button-base-box-shadow: none;--component-button-base-border-color: transparent;--size-block-width-wide: 70rem;--size-block-width-normal: 40rem;--size-border-width: .125rem;--size-border-radius: .5rem;--size-space-unit: 1rem;--font-weight-heading: 900;--font-weight-body: 600;--font-line-height-heading: 1.1;--font-line-height-body: 1.5;--font-size-base: clamp(1rem, .34vw + .91rem, 1.2rem);--font-size-huge: 2.44140625rem;--font-size-large: 1.5625rem;--font-size-medium: 1.25rem;--font-size-normal: 1rem;--font-size-small: .8rem;--font-size-tiny: .64rem;--font-family-system-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;--font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--color-base-error-900: #7a0906;--color-base-error-800: #93170a;--color-base-error-700: #b72b10;--color-base-error-600: #db4518;--color-base-error-500: #ff6321;--color-base-error-400: #ff9558;--color-base-error-300: #ffb379;--color-base-error-200: #ffd2a6;--color-base-error-100: #ffebd2;--color-base-warning-900: #786100;--color-base-warning-800: #927800;--color-base-warning-700: #b59700;--color-base-warning-600: #d8b800;--color-base-warning-500: #fcda00;--color-base-warning-400: #fde63f;--color-base-warning-300: #feed65;--color-base-warning-200: #fef598;--color-base-warning-100: #fefacb;--color-base-info-900: #004375;--color-base-info-800: #005d8d;--color-base-info-700: #0081af;--color-base-info-600: #00acd1;--color-base-info-500: #00dcf4;--color-base-info-400: #3ef5f8;--color-base-info-300: #64fbf2;--color-base-info-200: #98fdef;--color-base-info-100: #cbfef2;--color-base-success-900: #09600f;--color-base-success-800: #0f740f;--color-base-success-700: #219019;--color-base-success-600: #38ac24;--color-base-success-500: #53c932;--color-base-success-400: #85de61;--color-base-success-300: #aaee83;--color-base-success-200: #cff9ae;--color-base-success-100: #e9fcd6;--color-base-tertiary-900: #1b2c68;--color-base-tertiary-800: #2d437e;--color-base-tertiary-700: #48619c;--color-base-tertiary-600: #6985bb;--color-base-tertiary-500: #90acda;--color-base-tertiary-400: #adc6e8;--color-base-tertiary-300: #c2d8f3;--color-base-tertiary-200: #d9eafb;--color-base-tertiary-100: #ebf5fd;--color-base-secondary-900: #5c0d1c;--color-base-secondary-800: #6f151f;--color-base-secondary-700: #8a2225;--color-base-secondary-600: #a53731;--color-base-secondary-500: #c15444;--color-base-secondary-400: #d98570;--color-base-secondary-300: #ecaa90;--color-base-secondary-200: #f8cfb8;--color-base-secondary-100: #fbe9db;--color-base-primary-900: #17115e;--color-base-primary-800: #251d72;--color-base-primary-700: #382d8d;--color-base-primary-600: #4f42a9;--color-base-primary-500: #6a5bc5;--color-base-primary-400: #9183dc;--color-base-primary-300: #aea0ed;--color-base-primary-200: #cdc3f9;--color-base-primary-100: #e6e0fc;--color-base-dark-shade: #29263b;--color-base-dark-main: #24222f;--color-base-light-shade: #d6d5dd;--color-base-light-main: #f1f1f3;--asset-font-quicksand-weight-700-woff2: "assets/fonts/quicksand-bold.woff2";--asset-font-quicksand-weight-700-woff: "assets/fonts/quicksand-bold.woff";--asset-font-quicksand-weight-700-ttf: "assets/fonts/quicksand-bold.ttf";--asset-font-quicksand-weight-500-woff2: "assets/fonts/quicksand-medium.woff2";--asset-font-quicksand-weight-500-woff: "assets/fonts/quicksand-medium.woff";--asset-font-quicksand-weight-500-ttf: "assets/fonts/quicksand-medium.ttf";--asset-font-quicksand-weight-400-woff2: "assets/fonts/quicksand-regular.woff2";--asset-font-quicksand-weight-400-woff: "assets/fonts/quicksand-regular.woff";--asset-font-quicksand-weight-400-ttf: "assets/fonts/quicksand-regular.ttf";--asset-font-quicksand-weight-300-woff2: "assets/fonts/quicksand-light.woff2";--asset-font-quicksand-weight-300-woff: "assets/fonts/quicksand-light.woff";--asset-font-quicksand-weight-300-ttf: "assets/fonts/quicksand-light.ttf";--asset-font-quicksand-name: "Quicksand";--asset-font-greycliff-weight-900-woff2: "assets/fonts/greycliff-heavy.woff2";--asset-font-greycliff-weight-900-woff: "assets/fonts/greycliff-heavy.woff";--asset-font-greycliff-weight-900-eot: "assets/fonts/greycliff-heavy.eot";--asset-font-greycliff-weight-900-ttf: "assets/fonts/greycliff-heavy.ttf";--asset-font-greycliff-weight-800-woff2: "assets/fonts/greycliff-extra-bold.woff2";--asset-font-greycliff-weight-800-woff: "assets/fonts/greycliff-extra-bold.woff";--asset-font-greycliff-weight-800-eot: "assets/fonts/greycliff-extra-bold.eot";--asset-font-greycliff-weight-800-ttf: "assets/fonts/greycliff-extra-bold.ttf";--asset-font-greycliff-weight-700-woff2: "assets/fonts/greycliff-bold.woff2";--asset-font-greycliff-weight-700-woff: "assets/fonts/greycliff-bold.woff";--asset-font-greycliff-weight-700-eot: "assets/fonts/greycliff-bold.eot";--asset-font-greycliff-weight-700-ttf: "assets/fonts/greycliff-bold.ttf";--asset-font-greycliff-weight-600-woff2: "assets/fonts/greycliff-demi-bold.woff2";--asset-font-greycliff-weight-600-woff: "assets/fonts/greycliff-demi-bold.woff";--asset-font-greycliff-weight-600-eot: "assets/fonts/greycliff-demi-bold.eot";--asset-font-greycliff-weight-600-ttf: "assets/fonts/greycliff-demi-bold.ttf";--asset-font-greycliff-weight-500-woff2: "assets/fonts/greycliff-medium.woff2";--asset-font-greycliff-weight-500-woff: "assets/fonts/greycliff-medium.woff";--asset-font-greycliff-weight-500-eot: "assets/fonts/greycliff-medium.eot";--asset-font-greycliff-weight-500-ttf: "assets/fonts/greycliff-medium.ttf";--asset-font-greycliff-weight-400-woff2: "assets/fonts/greycliff-regular.woff2";--asset-font-greycliff-weight-400-woff: "assets/fonts/greycliff-regular.woff";--asset-font-greycliff-weight-400-eot: "assets/fonts/greycliff-regular.eot";--asset-font-greycliff-weight-400-ttf: "assets/fonts/greycliff-regular.ttf";--asset-font-greycliff-weight-300-woff2: "assets/fonts/greycliff-light.woff2";--asset-font-greycliff-weight-300-woff: "assets/fonts/greycliff-light.woff";--asset-font-greycliff-weight-300-eot: "assets/fonts/greycliff-light.eot";--asset-font-greycliff-weight-300-ttf: "assets/fonts/greycliff-light.ttf";--asset-font-greycliff-weight-200-woff2: "assets/fonts/greycliff-extra-light.woff2";--asset-font-greycliff-weight-200-woff: "assets/fonts/greycliff-extra-light.woff";--asset-font-greycliff-weight-200-eot: "assets/fonts/greycliff-extra-light.eot";--asset-font-greycliff-weight-200-ttf: "assets/fonts/greycliff-extra-light.ttf";--asset-font-greycliff-weight-100-woff2: "assets/fonts/greycliff-thin.woff2";--asset-font-greycliff-weight-100-woff: "assets/fonts/greycliff-thin.woff";--asset-font-greycliff-weight-100-eot: "assets/fonts/greycliff-thin.eot";--asset-font-greycliff-weight-100-ttf: "assets/fonts/greycliff-thin.ttf";--asset-font-greycliff-name: "Greycliff";--component-input-active-box-shadow: var(--component-input-base-box-shadow);--component-input-active-border-color: var(--color-base-primary-500);--component-input-active-color: var(--color-base-dark-main);--component-input-hover-box-shadow: var(--component-input-base-box-shadow);--component-input-hover-border-color: var(--color-base-dark-shade);--component-input-hover-color: var(--color-base-dark-main);--component-input-base-border-width: var(--size-border-width);--component-input-base-border-radius: var(--size-border-radius);--component-input-base-color: var(--color-base-dark-shade);--component-card-border-radius: var(--size-border-radius);--component-card-border-width: var(--size-border-width);--component-card-border-color: var(--color-base-light-shade);--component-card-background: var(--color-base-light-main);--component-card-color: var(--color-base-primary-500);--component-button-active-background: var(--color-base-primary-700);--component-button-hover-box-shadow: var(--component-button-base-box-shadow);--component-button-hover-border-color: var(--component-button-base-border-color);--component-button-hover-background: var(--color-base-primary-600);--component-button-hover-color: var(--color-base-light-main);--component-button-base-border-width: var(--size-border-width);--component-button-base-border-radius: var(--size-border-radius);--component-button-base-background: var(--color-base-primary-500);--component-button-base-color: var(--color-base-light-shade);--font-family-mono: var(--font-family-system-mono);--font-family-body: var(--asset-font-greycliff-name), var(--font-family-system);--font-family-heading: var(--asset-font-greycliff-name), var(--font-family-system);--color-font-base: var(--color-base-dark-main);--color-base-background-shade: var(--color-base-light-shade);--color-base-background-main: var(--color-base-light-main);--component-input-base-border-color: var(--color-base-background-shade);--component-input-base-background: var(--color-base-background-main);--component-button-active-box-shadow: var(--component-button-hover-box-shadow);--component-button-active-border-color: var(--component-button-hover-border-color);--component-button-active-color: var(--component-button-hover-color);--component-input-active-background: var(--component-input-base-background);--component-input-hover-background: var(--component-input-base-background)}@font-face{font-family:Greycliff;font-style:normal;font-weight:100;font-display:swap;src:url(../../fonts/greycliff-extra-light.woff2) format("woff2"),url(../../fonts/greycliff-extra-light.woff) format("woff")}@font-face{font-family:Greycliff;font-style:normal;font-weight:200;font-display:swap;src:url(../../fonts/greycliff-light.woff2) format("woff2"),url(../../fonts/greycliff-light.woff) format("woff")}@font-face{font-family:Greycliff;font-style:normal;font-weight:300;font-display:swap;src:url(../../fonts/greycliff-thin.woff2) format("woff2"),url(../../fonts/greycliff-thin.woff) format("woff")}@font-face{font-family:Greycliff;font-style:normal;font-weight:400;font-display:swap;src:url(../../fonts/greycliff-regular.woff2) format("woff2"),url(../../fonts/greycliff-regular.woff) format("woff")}@font-face{font-family:Greycliff;font-style:normal;font-weight:500;font-display:swap;src:url(../../fonts/greycliff-medium.woff2) format("woff2"),url(../../fonts/greycliff-medium.woff) format("woff")}@font-face{font-family:Greycliff;font-style:normal;font-weight:600;font-display:swap;src:url(../../fonts/greycliff-demi-bold.woff2) format("woff2"),url(../../fonts/greycliff-demi-bold.woff) format("woff")}@font-face{font-family:Greycliff;font-style:normal;font-weight:700;font-display:swap;src:url(../../fonts/greycliff-bold.woff2) format("woff2"),url(../../fonts/greycliff-bold.woff) format("woff")}@font-face{font-family:Greycliff;font-style:normal;font-weight:800;font-display:swap;src:url(../../fonts/greycliff-extra-bold.woff2) format("woff2"),url(../../fonts/greycliff-extra-bold.woff) format("woff")}@font-face{font-family:Greycliff;font-style:normal;font-weight:900;font-display:swap;src:url(../../fonts/greycliff-heavy.woff2) format("woff2"),url(../../fonts/greycliff-heavy.woff) format("woff")}@font-face{font-family:Greycliff;font-style:italic;font-weight:100;font-display:swap;src:url(../../fonts/greycliff-extra-light-oblique.woff2) format("woff2"),url(../../fonts/greycliff-extra-light-oblique.woff) format("woff")}@font-face{font-family:Greycliff;font-style:italic;font-weight:200;font-display:swap;src:url(../../fonts/greycliff-light-oblique.woff2) format("woff2"),url(../../fonts/greycliff-light-oblique.woff) format("woff")}@font-face{font-family:Greycliff;font-style:italic;font-weight:300;font-display:swap;src:url(../../fonts/greycliff-thin-oblique.woff2) format("woff2"),url(../../fonts/greycliff-thin-oblique.woff) format("woff")}@font-face{font-family:Greycliff;font-style:italic;font-weight:400;font-display:swap;src:url(../../fonts/greycliff-regular-oblique.woff2) format("woff2"),url(../../fonts/greycliff-regular-oblique.woff) format("woff")}@font-face{font-family:Greycliff;font-style:italic;font-weight:500;font-display:swap;src:url(../../fonts/greycliff-medium-oblique.woff2) format("woff2"),url(../../fonts/greycliff-medium-oblique.woff) format("woff")}@font-face{font-family:Greycliff;font-style:italic;font-weight:600;font-display:swap;src:url(../../fonts/greycliff-demi-bold-oblique.woff2) format("woff2"),url(../../fonts/greycliff-demi-bold-oblique.woff) format("woff")}@font-face{font-family:Greycliff;font-style:italic;font-weight:700;font-display:swap;src:url(../../fonts/greycliff-bold-oblique.woff2) format("woff2"),url(../../fonts/greycliff-bold-oblique.woff) format("woff")}@font-face{font-family:Greycliff;font-style:italic;font-weight:800;font-display:swap;src:url(../../fonts/greycliff-extra-bold-oblique.woff2) format("woff2"),url(../../fonts/greycliff-extra-bold-oblique.woff) format("woff")}@font-face{font-family:Greycliff;font-style:italic;font-weight:900;font-display:swap;src:url(../../fonts/greycliff-heavy-oblique.woff2) format("woff2"),url(../../fonts/greycliff-heavy-oblique.woff) format("woff")}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import{getDefaultExportFromCjs as a}from"../../_virtual/_commonjsHelpers.js";import{__module as s}from"../../_virtual/index.js";/*!
|
|
2
|
+
Copyright (c) 2018 Jed Watson.
|
|
3
|
+
Licensed under the MIT License (MIT), see
|
|
4
|
+
http://jedwatson.github.io/classnames
|
|
5
|
+
*/var l=s.exports;(function(o){(function(){"use strict";var i={}.hasOwnProperty;function r(){for(var t="",e=0;e<arguments.length;e++){var n=arguments[e];n&&(t=f(t,u(n)))}return t}function u(t){if(typeof t=="string"||typeof t=="number")return t;if(typeof t!="object")return"";if(Array.isArray(t))return r.apply(null,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var e="";for(var n in t)i.call(t,n)&&t[n]&&(e=f(e,n));return e}function f(t,e){return e?t?t+" "+e:t+e:t}o.exports?(r.default=r,o.exports=r):window.classNames=r})()})(s);var c=s.exports;const m=a(c);export{m as default};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@grantcodes/ui",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.5",
|
|
4
4
|
"description": "",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/main.cjs",
|
|
@@ -73,7 +73,12 @@
|
|
|
73
73
|
"vite": "^5.4.9"
|
|
74
74
|
},
|
|
75
75
|
"peerDependencies": {},
|
|
76
|
-
"files": [
|
|
76
|
+
"files": [
|
|
77
|
+
"dist/**/*",
|
|
78
|
+
"CHANGELOG.md",
|
|
79
|
+
"README.md",
|
|
80
|
+
"LICENCE"
|
|
81
|
+
],
|
|
77
82
|
"ava": {
|
|
78
83
|
"typescript": {
|
|
79
84
|
"compile": false,
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{LitElement as y,html as c}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/index.js";import{property as e}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/decorators.js";var d=Object.defineProperty,g=Object.getOwnPropertyDescriptor,r=(i,o,a,p)=>{for(var t=p>1?void 0:p?g(o,a):o,s=i.length-1,l;s>=0;s--)(l=i[s])&&(t=(p?l(o,a,t):l(t))||t);return p&&t&&d(o,a,t),t};class n extends y{constructor(){super(...arguments),this.active=!1,this.label="",this.index=-1,this.containerId=""}get tabId(){return`${this.containerId}-tab-${this.index.toString()}`}get panelId(){return`${this.containerId}-panel-${this.index.toString()}`}get content(){return this.label}render(){return c``}}r([e({type:Boolean})],n.prototype,"active",2);r([e({type:String})],n.prototype,"label",2);r([e({type:Number})],n.prototype,"index",2);r([e({type:String})],n.prototype,"containerId",2);r([e({type:String,reflect:!0})],n.prototype,"tabId",1);r([e({type:String})],n.prototype,"panelId",1);r([e({type:String})],n.prototype,"content",1);export{n as GrantCodesTabsItem};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import{GrantCodesTabsItem as i}from"./tabs-item.component.js";import{html as p,unsafeCSS as m}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/index.js";import{customElement as b}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/decorators.js";import f from"./tabs.scss.js";var v=Object.defineProperty,d=Object.getOwnPropertyDescriptor,c=(n,t,r,s)=>{for(var e=s>1?void 0:s?d(t,r):t,a=n.length-1,l;a>=0;a--)(l=n[a])&&(e=(s?l(t,r,e):l(e))||e);return s&&e&&v(t,r,e),e};let o=class extends i{render(){return p`
|
|
2
|
-
<div
|
|
3
|
-
id="${this.panelId}"
|
|
4
|
-
role="tabpanel"
|
|
5
|
-
aria-labelledby="${this.tabId}"
|
|
6
|
-
class="tabs__panel ${this.active?"is-active":""}"
|
|
7
|
-
>
|
|
8
|
-
<slot></slot>
|
|
9
|
-
</div>
|
|
10
|
-
`}};o.styles=[m(f)];o=c([b("grantcodes-tabs-panel")],o);export{o as GrantCodesTabsPanel};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{GrantCodesTabsPanel as a}from"./tabs-panel.component.js";const e=a;export{a as GrantCodesTabsPanel,e as default};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import{GrantCodesTabsItem as l}from"./tabs-item.component.js";import{html as b,LitElement as p,unsafeCSS as m}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/index.js";import{customElement as c}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/decorators.js";import d from"./tabs.scss.js";var f=Object.defineProperty,u=Object.getOwnPropertyDescriptor,h=(i,e,o,s)=>{for(var t=s>1?void 0:s?u(e,o):e,r=i.length-1,n;r>=0;r--)(n=i[r])&&(t=(s?n(e,o,t):n(t))||t);return s&&t&&f(e,o,t),t};let a=class extends l{render(){return b`
|
|
2
|
-
<button
|
|
3
|
-
id="${this.tabId}"
|
|
4
|
-
type="button"
|
|
5
|
-
role="tab"
|
|
6
|
-
?aria-selected=${this.active}
|
|
7
|
-
aria-controls="${this.panelId}"
|
|
8
|
-
class="tabs__tab ${this.active?"is-active":""}"
|
|
9
|
-
>
|
|
10
|
-
<span>${this.label}</span>
|
|
11
|
-
</button>
|
|
12
|
-
`}};a.shadowRootOptions={...p.shadowRootOptions,delegatesFocus:!0};a.styles=[m(d)];a=h([c("grantcodes-tabs-tab")],a);export{a as GrantCodesTabsTab};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{GrantCodesTabsTab as a}from"./tabs-tab.component.js";const b=a;export{a as GrantCodesTabsTab,b as default};
|