@grantcodes/ui 2.0.0-beta.3 → 2.0.0-beta.6

package/CHANGELOG.md

@@ -1,5 +1,103 @@
 # Changelog
 
+## [2.0.0-beta.6](https://github.com/grantcodes/ui/compare/v2.0.1-beta.5...v2.0.0-beta.6) (2024-10-30)
+
+
+### Features
+
+* **avatar:** add initial Avatar component ([0f0f6eb](https://github.com/grantcodes/ui/commit/0f0f6eb7d956aa3fa479baeb641bbd60e98904f2))
+* **container:** update Container full variation and add viewport variation ([74a02e1](https://github.com/grantcodes/ui/commit/74a02e1f67b95a02dbe3efba9d97282749009f6f))
+* **dialog:** add initial Dialog component ([6d50f52](https://github.com/grantcodes/ui/commit/6d50f52031cd4ae23183dac2152be29579bc3de9))
+* **form-field:** add initial form-field component ([1ea4589](https://github.com/grantcodes/ui/commit/1ea458963e5039d6cfda9ca054a9527ad4540304))
+* **gallery:** add gallery component ([4f8d6e1](https://github.com/grantcodes/ui/commit/4f8d6e11d5ea5c4ec7a0288ce61b65bb77e9be1b))
+* improve focus styles ([8137403](https://github.com/grantcodes/ui/commit/8137403fd19f36cd034c9909dbd8088782905c53))
+* **tabs:** add Tabs component ([e8d8452](https://github.com/grantcodes/ui/commit/e8d8452d7c8ce223fdcc5ac28371bb52859955f3))
+* **tooltip:** add initial Tooltip component ([4991c56](https://github.com/grantcodes/ui/commit/4991c5631da7fd993c33f767252836730d5aae01))
+
+
+### Bug Fixes
+
+* **avatar:** export the Avatar component from the main exports ([2f4119b](https://github.com/grantcodes/ui/commit/2f4119b9216fe344712f3a9bf4abda9eb1245fb4))
+* **code-preview:** fix code preview SSR ([3d327f7](https://github.com/grantcodes/ui/commit/3d327f741430e2421ee1812b5170339a5f4af110))
+* **codepreview:** fix syntax highlighting ([5010a1f](https://github.com/grantcodes/ui/commit/5010a1f31c789d028154b036f29c67f3539f38b2))
+* **icon:** fix icon ssr ([c953502](https://github.com/grantcodes/ui/commit/c95350285a53bb7d5b6527bf640655c7125066a5))
+* **input:** improve select styles ([3d17cc4](https://github.com/grantcodes/ui/commit/3d17cc45da034995ee5ca4b85148f0c0e0f2f080))
+* **notice:** fix notice dismiss button ([254e20a](https://github.com/grantcodes/ui/commit/254e20ae232f33ebefbe2b69aaf6e16554fa1d91))
+* **plop:** fix plopfile ([dfc0879](https://github.com/grantcodes/ui/commit/dfc087927397bbc8a49666631b19b075dcaf4b9a))
+* **tabs:** add missing tabs/internal folder ([545a372](https://github.com/grantcodes/ui/commit/545a372a30bd3acae40ce2392064f3d2190702c4))
+* **tabs:** simplify and improve tabs ([c4badfb](https://github.com/grantcodes/ui/commit/c4badfb69fae21c29774032d24e45bfa89796ce4))
+
+
+### Miscellaneous Chores
+
+* release 2.0.0-beta.5 ([04f38a1](https://github.com/grantcodes/ui/commit/04f38a1a79840ee15a1bc44c3e55ada780f1c2c4))
+* release 2.0.0-beta.6 ([de561ab](https://github.com/grantcodes/ui/commit/de561ab4fe2cddb2a656a9cf2fc37457f909c9b7))
+* release 2.0.0-beta4 ([5087ac5](https://github.com/grantcodes/ui/commit/5087ac51b8bf4bc31ce9bd312fa32114d2b9f78e))
+
+## [2.0.0-beta.5](https://github.com/grantcodes/ui/compare/v2.0.2-beta...v2.0.0-beta.5) (2024-10-29)
+
+
+### Features
+
+* **avatar:** add initial Avatar component ([0f0f6eb](https://github.com/grantcodes/ui/commit/0f0f6eb7d956aa3fa479baeb641bbd60e98904f2))
+* **container:** update Container full variation and add viewport variation ([74a02e1](https://github.com/grantcodes/ui/commit/74a02e1f67b95a02dbe3efba9d97282749009f6f))
+* **dialog:** add initial Dialog component ([6d50f52](https://github.com/grantcodes/ui/commit/6d50f52031cd4ae23183dac2152be29579bc3de9))
+* **form-field:** add initial form-field component ([1ea4589](https://github.com/grantcodes/ui/commit/1ea458963e5039d6cfda9ca054a9527ad4540304))
+* **gallery:** add gallery component ([4f8d6e1](https://github.com/grantcodes/ui/commit/4f8d6e11d5ea5c4ec7a0288ce61b65bb77e9be1b))
+* improve focus styles ([8137403](https://github.com/grantcodes/ui/commit/8137403fd19f36cd034c9909dbd8088782905c53))
+* **tabs:** add Tabs component ([e8d8452](https://github.com/grantcodes/ui/commit/e8d8452d7c8ce223fdcc5ac28371bb52859955f3))
+* **tooltip:** add initial Tooltip component ([4991c56](https://github.com/grantcodes/ui/commit/4991c5631da7fd993c33f767252836730d5aae01))
+
+
+### Bug Fixes
+
+* **avatar:** export the Avatar component from the main exports ([2f4119b](https://github.com/grantcodes/ui/commit/2f4119b9216fe344712f3a9bf4abda9eb1245fb4))
+* **codepreview:** fix syntax highlighting ([5010a1f](https://github.com/grantcodes/ui/commit/5010a1f31c789d028154b036f29c67f3539f38b2))
+* **input:** improve select styles ([3d17cc4](https://github.com/grantcodes/ui/commit/3d17cc45da034995ee5ca4b85148f0c0e0f2f080))
+* **notice:** fix notice dismiss button ([254e20a](https://github.com/grantcodes/ui/commit/254e20ae232f33ebefbe2b69aaf6e16554fa1d91))
+* **plop:** fix plopfile ([dfc0879](https://github.com/grantcodes/ui/commit/dfc087927397bbc8a49666631b19b075dcaf4b9a))
+* **tabs:** simplify and improve tabs ([c4badfb](https://github.com/grantcodes/ui/commit/c4badfb69fae21c29774032d24e45bfa89796ce4))
+
+
+### Miscellaneous Chores
+
+* release 2.0.0-beta.5 ([04f38a1](https://github.com/grantcodes/ui/commit/04f38a1a79840ee15a1bc44c3e55ada780f1c2c4))
+* release 2.0.0-beta4 ([5087ac5](https://github.com/grantcodes/ui/commit/5087ac51b8bf4bc31ce9bd312fa32114d2b9f78e))
+
+## [2.0.1-beta4](https://github.com/grantcodes/ui/compare/v2.0.0-beta4...v2.0.1-beta4) (2024-10-26)
+
+
+### Bug Fixes
+
+* **notice:** fix notice dismiss button ([254e20a](https://github.com/grantcodes/ui/commit/254e20ae232f33ebefbe2b69aaf6e16554fa1d91))
+
+## [2.0.0-beta4](https://github.com/grantcodes/ui/compare/v1.3.0...v2.0.0-beta4) (2024-10-25)
+
+
+### Features
+
+* **avatar:** add initial Avatar component ([0f0f6eb](https://github.com/grantcodes/ui/commit/0f0f6eb7d956aa3fa479baeb641bbd60e98904f2))
+* **container:** update Container full variation and add viewport variation ([74a02e1](https://github.com/grantcodes/ui/commit/74a02e1f67b95a02dbe3efba9d97282749009f6f))
+* **dialog:** add initial Dialog component ([6d50f52](https://github.com/grantcodes/ui/commit/6d50f52031cd4ae23183dac2152be29579bc3de9))
+* **form-field:** add initial form-field component ([1ea4589](https://github.com/grantcodes/ui/commit/1ea458963e5039d6cfda9ca054a9527ad4540304))
+* **gallery:** add gallery component ([4f8d6e1](https://github.com/grantcodes/ui/commit/4f8d6e11d5ea5c4ec7a0288ce61b65bb77e9be1b))
+* improve focus styles ([8137403](https://github.com/grantcodes/ui/commit/8137403fd19f36cd034c9909dbd8088782905c53))
+* **tabs:** add Tabs component ([e8d8452](https://github.com/grantcodes/ui/commit/e8d8452d7c8ce223fdcc5ac28371bb52859955f3))
+* **tooltip:** add initial Tooltip component ([4991c56](https://github.com/grantcodes/ui/commit/4991c5631da7fd993c33f767252836730d5aae01))
+
+
+### Bug Fixes
+
+* **avatar:** export the Avatar component from the main exports ([2f4119b](https://github.com/grantcodes/ui/commit/2f4119b9216fe344712f3a9bf4abda9eb1245fb4))
+* **codepreview:** fix syntax highlighting ([5010a1f](https://github.com/grantcodes/ui/commit/5010a1f31c789d028154b036f29c67f3539f38b2))
+* **input:** improve select styles ([3d17cc4](https://github.com/grantcodes/ui/commit/3d17cc45da034995ee5ca4b85148f0c0e0f2f080))
+* **plop:** fix plopfile ([dfc0879](https://github.com/grantcodes/ui/commit/dfc087927397bbc8a49666631b19b075dcaf4b9a))
+
+
+### Miscellaneous Chores
+
+* release 2.0.0-beta4 ([5087ac5](https://github.com/grantcodes/ui/commit/5087ac51b8bf4bc31ce9bd312fa32114d2b9f78e))
+
 ## [1.2.0](https://github.com/grantcodes/ui/compare/v1.1.0...v1.2.0) (2023-06-29)
 
 

package/dist/components/code-preview/code-preview.component.js

@@ -1 +1,3 @@
-import{LitElement as l,html as m,unsafeCSS as d}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/index.js";import{property as h,query as c,customElement as g}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/decorators.js";import{codeToHtml as v}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/shiki/dist/bundle-web.mjs";import u from"./code-preview.scss.js";var f=Object.defineProperty,w=Object.getOwnPropertyDescriptor,s=(o,t,n,i)=>{for(var e=i>1?void 0:i?w(t,n):t,p=o.length-1,a;p>=0;p--)(a=o[p])&&(e=(i?a(t,n,e):a(e))||e);return i&&e&&f(t,n,e),e};let r=class extends l{constructor(){super(...arguments),this.language="html",this.theme="aurora-x"}async doHighlight(){const o=this.textContent??"",t=await v(o.trim(),{lang:this.language,theme:this.theme});this.codePreview.innerHTML=t}firstUpdated(){this.doHighlight()}render(){return m` <div class="code-preview"></div> `}};r.styles=[d(u)];s([h({type:String})],r.prototype,"language",2);s([h({type:String})],r.prototype,"theme",2);s([c(".code-preview")],r.prototype,"codePreview",2);r=s([g("grantcodes-code-preview")],r);export{r as GrantCodesCodePreview};
+import{LitElement as h,html as m,unsafeCSS as d}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/index.js";import{property as a,query as c,customElement as g}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/decorators.js";import{codeToHtml as v}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/shiki/dist/bundle-web.mjs";import u from"./code-preview.scss.js";var f=Object.defineProperty,w=Object.getOwnPropertyDescriptor,s=(o,t,p,i)=>{for(var e=i>1?void 0:i?w(t,p):t,n=o.length-1,l;n>=0;n--)(l=o[n])&&(e=(i?l(t,p,e):l(e))||e);return i&&e&&f(t,p,e),e};let r=class extends h{constructor(){super(...arguments),this.language="html",this.theme="aurora-x"}async doHighlight(){const o=this.textContent??"",t=await v(o.trim(),{lang:this.language,theme:this.theme});this.codePreview.innerHTML=t}firstUpdated(){this.doHighlight()}render(){return m`<div class="code-preview">
+			<pre><slot></slot></pre>
+		</div> `}};r.styles=[d(u)];s([a({type:String})],r.prototype,"language",2);s([a({type:String})],r.prototype,"theme",2);s([c(".code-preview")],r.prototype,"codePreview",2);r=s([g("grantcodes-code-preview")],r);export{r as GrantCodesCodePreview};

package/dist/components/code-preview/code-preview.scss.js

@@ -1 +1 @@
-const e="*,*:before,*:after{box-sizing:border-box}:host{display:block}.code-preview>pre{display:block;font-family:var(--font-family-monospace);line-height:1.2;width:100%;overflow:auto;border-radius:var(--component-card-border-radius);box-shadow:.1rem .2rem .4rem #0000001a;font-size:var(--font-size-small);font-weight:400;padding:var(--size-space-unit, 1rem)}";export{e as default};
+const e="*,*:before,*:after{box-sizing:border-box}:host{display:block}.code-preview>pre{display:block;font-family:var(--font-family-mono);line-height:1.2;width:100%;overflow:auto;border-radius:var(--component-card-border-radius);box-shadow:.1rem .2rem .4rem #0000001a;font-size:var(--font-size-small);font-weight:400;padding:var(--size-space-unit, 1rem)}";export{e as default};

package/dist/components/icon/icon.component.js

@@ -1 +1 @@
-import{LitElement as l,html as m,unsafeCSS as a}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/index.js";import{property as f,customElement as u}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/decorators.js";import v from"./icon.scss.js";var _=Object.defineProperty,d=Object.getOwnPropertyDescriptor,i=(t,r,s,n)=>{for(var e=n>1?void 0:n?d(r,s):r,c=t.length-1,p;c>=0;c--)(p=t[c])&&(e=(n?p(r,s,e):p(e))||e);return n&&e&&_(r,s,e),e};let o=class extends l{constructor(){super(...arguments),this.icon=""}render(){const t=document.createElement("div");t.innerHTML=this.icon;const r=t.children[0];return m`<span class="icon">${r}</span>`}};o.styles=[a(v)];i([f({type:String})],o.prototype,"icon",2);o=i([u("grantcodes-icon")],o);export{o as GrantCodesIcon};
+import{LitElement as m,html as f,unsafeCSS as l}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/index.js";import{property as a,customElement as u}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/decorators.js";import{unsafeHTML as v}from"/home/grantcodes/projects/@grantcodes/ui/node_modules/lit/directives/unsafe-html.js";import _ from"./icon.scss.js";var y=Object.defineProperty,h=Object.getOwnPropertyDescriptor,i=(c,e,s,t)=>{for(var r=t>1?void 0:t?h(e,s):e,n=c.length-1,p;n>=0;n--)(p=c[n])&&(r=(t?p(e,s,r):p(r))||r);return t&&r&&y(e,s,r),r};let o=class extends m{constructor(){super(...arguments),this.icon=""}render(){return f`<span class="icon">${v(this.icon)}</span>`}};o.styles=[l(_)];i([a({type:String})],o.prototype,"icon",2);o=i([u("grantcodes-icon")],o);export{o as GrantCodesIcon};

package/dist/components/notice/notice.component.js

@@ -1,17 +1,16 @@
-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`
-      <aside class="${d("notice",`notice--${this.variant}`)}">
-        <!-- <Icon icon="{iconEl}" class="notice__icon" /> -->
-        <grantcodes-icon icon="${e}" class="notice__icon"></grantcodes-icon>
+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"/home/grantcodes/projects/@grantcodes/ui/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`
+				<button class="notice__close" @click=${this.onDismiss}>
+					<grantcodes-icon icon="${b}" title="Close Notice"></grantcodes-icon>
+				</button>
+			`:r``}render(){const s=w[this.variant];return r`
+			<aside class="${h("notice",`notice--${this.variant}`)}">
+				<grantcodes-icon icon="${s}" class="notice__icon"></grantcodes-icon>
 
-        <div class="notice__content">
-          ${this.title&&a` <h2 class="notice__title">${this.title}</h2> `}
-          <p><slot></slot></p>
-        </div>
+				<div class="notice__content">
+					${this.title&&r`<h2 class="notice__title">${this.title}</h2>`}
+					<p><slot></slot></p>
+				</div>
 
-        ${this.onDismiss!=null&&a`
-          <button class="notice__close">
-            <grantcodes-icon icon="${y}" title="Close Notice"></grantcodes-icon>
-          </button>
-        `}
-      </aside>
-    `}};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};
+				${this.renderDismiss()}
+			</aside>
+		`}};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};

package/dist/components/notice/notice.scss.js

@@ -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};
+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};

package/dist/components/tabs/internal/tabs-button.component.js

@@ -0,0 +1,13 @@
+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`
+      <button
+        id="${this.buttonId}"
+        type="button"
+        role="tab"
+        ?aria-selected=${this.active}
+        aria-controls="${this.panelId}"
+        tabindex=${d(this.active?void 0:"-1")} 
+        class="tabs__tab ${this.active?"is-active":""}"
+      >
+        <span>${this.label}</span>
+      </button>
+    `}};o.shadowRootOptions={...b.shadowRootOptions,delegatesFocus:!0};o.styles=[m(f)];o=h([c("grantcodes-tabs-button")],o);export{o as GrantCodesTabsButton};

package/dist/components/tabs/internal/tabs-button.js

@@ -0,0 +1 @@
+import{GrantCodesTabsButton as t}from"./tabs-button.component.js";const o=t;export{t as GrantCodesTabsButton,o as default};

package/dist/components/tabs/internal/tabs-item.component.js

@@ -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 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};

package/dist/components/tabs/tab.component.js

@@ -1 +1,10 @@
-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};
+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`
+			<div
+				id="${this.panelId}"
+				role="tabpanel"
+				aria-labelledby="${this.buttonId}"
+				class="tabs__panel ${this.active?"is-active":""}"
+			>
+				<slot></slot>
+			</div>
+		`}};o.styles=[m(f)];o=c([b("grantcodes-tab")],o);export{o as GrantCodesTab};

package/dist/components/tabs/tabs.component.js

@@ -1,28 +1,22 @@
-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`
-      <div class="tabs" id="${this.id}">
-        <div role="tablist" class="tabs__tablist" aria-label=${this.label}>
-          <div class="tabs__tablist__inner">
-            ${this.tabs.map((t,e)=>b`<grantcodes-tabs-tab
-                  index=${e+1}
-                  label="${t.label}"
-                  containerId="${this.id}"
-                  ?active=${t.active}
-                  @click=${()=>{this.activeTab=t}}
-                  @keydown=${this.handleTabKeyDown}
-                ></grantcodes-tabs-tab>`)}
-          </div>
-        </div>
+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`
+				<grantcodes-tabs-button
+					index=${e+1}
+					label="${t.label}"
+					containerId="${this.id}"
+					?active=${t.active}
+					@click=${()=>{this.activeTab=t}}
+					@keydown=${this.handleTabKeyDown}
+				></grantcodes-tabs-button>
+			`)}render(){return d`
+			<div class="tabs" id="${this.id}">
+				<div role="tablist" class="tabs__tablist" aria-label=${T(this.label)}>
+					<div class="tabs__tablist__inner">
+						${this.renderTabButtons()}
+					</div>
+				</div>
 
-        <div class="tabs__panels">
-          ${this.tabs.map((t,e)=>b`<grantcodes-tabs-panel
-                index=${e}
-                label="${t.label}"
-                containerId="${this.id}"
-                ?active=${t.active}
-                >${t.content}</grantcodes-tabs-panel
-              >`)}
-        </div>
-
-        <slot></slot>
-      </div>
-    `}};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};
+				<div class="tabs__panels">
+					<slot></slot>
+				</div>
+			</div>
+		`}};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};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@grantcodes/ui",
-	"version": "2.0.0-beta.3",
+	"version": "2.0.0-beta.6",
 	"description": "",
 	"type": "module",
 	"main": "dist/main.cjs",
@@ -73,7 +73,12 @@
 		"vite": "^5.4.9"
 	},
 	"peerDependencies": {},
-	"files": ["dist/**/*", "CHANGELOG.md", "README.md", "LICENCE"],
+	"files": [
+		"dist/**/*",
+		"CHANGELOG.md",
+		"README.md",
+		"LICENCE"
+	],
 	"ava": {
 		"typescript": {
 			"compile": false,

package/dist/components/tabs/tabs-item.component.js

@@ -1 +0,0 @@
-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};

package/dist/components/tabs/tabs-panel.component.js

@@ -1,10 +0,0 @@
-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`
-      <div
-        id="${this.panelId}"
-        role="tabpanel"
-        aria-labelledby="${this.tabId}"
-        class="tabs__panel ${this.active?"is-active":""}"
-      >
-        <slot></slot>
-      </div>
-    `}};o.styles=[m(f)];o=c([b("grantcodes-tabs-panel")],o);export{o as GrantCodesTabsPanel};

package/dist/components/tabs/tabs-panel.js

@@ -1 +0,0 @@
-import{GrantCodesTabsPanel as a}from"./tabs-panel.component.js";const e=a;export{a as GrantCodesTabsPanel,e as default};

package/dist/components/tabs/tabs-tab.component.js

@@ -1,12 +0,0 @@
-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`
-      <button
-        id="${this.tabId}"
-        type="button"
-        role="tab"
-        ?aria-selected=${this.active}
-        aria-controls="${this.panelId}"
-        class="tabs__tab ${this.active?"is-active":""}"
-      >
-        <span>${this.label}</span>
-      </button>
-    `}};a.shadowRootOptions={...p.shadowRootOptions,delegatesFocus:!0};a.styles=[m(d)];a=h([c("grantcodes-tabs-tab")],a);export{a as GrantCodesTabsTab};

package/dist/components/tabs/tabs-tab.js

@@ -1 +0,0 @@
-import{GrantCodesTabsTab as a}from"./tabs-tab.component.js";const b=a;export{a as GrantCodesTabsTab,b as default};