@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 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"/home/grantcodes/projects/@grantcodes/ui/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`
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"/home/grantcodes/projects/@grantcodes/ui/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`
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"/home/grantcodes/projects/@grantcodes/ui/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`
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 m,html as a,unsafeCSS as _}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/index.js";import{property as p,customElement as f}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/decorators.js";import d from"/home/grantcodes/projects/@grantcodes/ui/node_modules/classnames/index.js";import h from"./notice.scss.js";import{GrantCodesIcon as u}from"../icon/icon.component.js";import"../../icons.js";import{Info as v,CheckCircle2 as C,AlertCircle as g,XCircle as $,X as y}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lucide-static/dist/esm/lucide-static.js";var O=Object.defineProperty,b=Object.getOwnPropertyDescriptor,s=(e,i,r,n)=>{for(var t=n>1?void 0:n?b(i,r):i,c=e.length-1,l;c>=0;c--)(l=e[c])&&(t=(n?l(i,r,t):l(t))||t);return n&&t&&O(i,r,t),t};const D={info:v,success:C,warning:g,error:$};let o=class extends m{constructor(){super(...arguments),this.variant="info",this.title=""}render(){const e=D[this.variant];return a`
2
- <aside class="${d("notice",`notice--${this.variant}`)}">
3
- <!-- <Icon icon="{iconEl}" class="notice__icon" /> -->
4
- <grantcodes-icon icon="${e}" class="notice__icon"></grantcodes-icon>
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
- <div class="notice__content">
7
- ${this.title&&a` <h2 class="notice__title">${this.title}</h2> `}
8
- <p><slot></slot></p>
9
- </div>
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
- ${this.onDismiss!=null&&a`
12
- <button class="notice__close">
13
- <grantcodes-icon icon="${y}" title="Close Notice"></grantcodes-icon>
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 a}from"./tabs-item.component.js";import{html as f}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/index.js";import{customElement as l}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/decorators.js";var v=Object.defineProperty,_=Object.getOwnPropertyDescriptor,b=(n,e,o,t)=>{for(var r=t>1?void 0:t?_(e,o):e,s=n.length-1,m;s>=0;s--)(m=n[s])&&(r=(t?m(e,o,r):m(r))||r);return t&&r&&v(e,o,r),r};let p=class extends a{render(){return f``}};p=b([l("grantcodes-tab")],p);export{p as GrantCodesTab};
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 d,html as b,unsafeCSS as c}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/index.js";import{property as p,queryAssignedElements as h,queryAll as v,state as f,customElement as u}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/decorators.js";import m from"./tabs.scss.js";import"./tabs-tab.js";import"./tabs-panel.js";import{generateId as T}from"../../lib/generate-id.js";var y=Object.defineProperty,$=Object.getOwnPropertyDescriptor,n=(t,e,s,a)=>{for(var i=a>1?void 0:a?$(e,s):e,o=t.length-1,l;o>=0;o--)(l=t[o])&&(i=(a?l(e,s,i):l(i))||i);return a&&i&&y(e,s,i),i};let r=class extends d{constructor(){super(),this.label="",this.focusedTabIndex=-1,this.id=T("tabs")}get activeTab(){return this.tabs.find(t=>t.active)??null}set activeTab(t){this.tabs.map((e,s)=>{e===t?(e.active=!0,this.focusedTabIndex=s):e.active=!1}),this.requestUpdate()}firstUpdated(){this.requestUpdate(),this.activeTab==null&&(this.activeTab=this.tabs[0])}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,a=this.tabsListTabs[s];a&&(a.focus(),this.focusedTabIndex=s)}}render(){return b`
2
- <div class="tabs" id="${this.id}">
3
- <div role="tablist" class="tabs__tablist" aria-label=${this.label}>
4
- <div class="tabs__tablist__inner">
5
- ${this.tabs.map((t,e)=>b`<grantcodes-tabs-tab
6
- index=${e+1}
7
- label="${t.label}"
8
- containerId="${this.id}"
9
- ?active=${t.active}
10
- @click=${()=>{this.activeTab=t}}
11
- @keydown=${this.handleTabKeyDown}
12
- ></grantcodes-tabs-tab>`)}
13
- </div>
14
- </div>
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
- <div class="tabs__panels">
17
- ${this.tabs.map((t,e)=>b`<grantcodes-tabs-panel
18
- index=${e}
19
- label="${t.label}"
20
- containerId="${this.id}"
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.2",
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": ["dist/**/*", "CHANGELOG.md", "README.md", "LICENCE"],
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};