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

package/CHANGELOG.md

@@ -1,5 +1,69 @@
 # Changelog
 
+## [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/_virtual/_commonjsHelpers.js

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

package/dist/_virtual/index.js

@@ -0,0 +1 @@
+var s={exports:{}};export{s as __module};

package/dist/components/container/container.component.js

@@ -1,4 +1,4 @@
-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`
+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`
       <div class="${r}">
         <slot></slot>
       </div>

package/dist/components/dropzone/dropzone.component.js

@@ -1,4 +1,4 @@
-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`
+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`
       <div
         class=${t}
         @mouseLeave=${this._disableFullscreen}

package/dist/components/form-field/form-field.component.js

@@ -1,4 +1,4 @@
-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`
+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`
       <p class="form-field__error" id=${this.errorId}>Error: ${this.error}</p>
     `:""}helpTemplate(){return this.help?o`
       <span class="form-field__help" id=${this.helpId}>${this.help}</span>

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"../../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/dist/node_modules/classnames/index.js

@@ -0,0 +1,5 @@
+import{getDefaultExportFromCjs as a}from"../../_virtual/_commonjsHelpers.js";import{__module as s}from"../../_virtual/index.js";/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/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

@@ -1,6 +1,6 @@
 {
 	"name": "@grantcodes/ui",
-	"version": "2.0.0-beta.3",
+	"version": "2.0.0-beta.5",
 	"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};