{% call dropdown_menu(
- id="dropdown-menu",
+ id="dropdown-menu-default",
trigger="Open",
trigger_attrs={"class": "btn-outline"},
content_attrs={"class": "min-w-56"}
@@ -134,8 +134,6 @@
{% endcall %}
-
-
{% set profile_menu %}
@@ -170,7 +168,6 @@
{% endset %}
{% call dropdown_menu(
- id="dropdown-menu-radio-group",
trigger="Radio Group",
trigger_attrs={"class": "btn-outline"},
content_attrs={"class": "min-w-56"},
diff --git a/docs/src/_includes/partials/kitchen-sink/popover.njk b/docs/src/_includes/partials/kitchen-sink/popover.njk
index 98af075..262aa10 100644
--- a/docs/src/_includes/partials/kitchen-sink/popover.njk
+++ b/docs/src/_includes/partials/kitchen-sink/popover.njk
@@ -12,7 +12,7 @@
id="demo-popover",
trigger="Open popover",
trigger_attrs={"class": "btn-outline"},
- content_attrs={"class": "w-80 p-4"}
+ popover_attrs={"class": "w-80"}
) %}
diff --git a/docs/src/_includes/partials/kitchen-sink/select.njk b/docs/src/_includes/partials/kitchen-sink/select.njk
index 69c59e5..9bbdd90 100644
--- a/docs/src/_includes/partials/kitchen-sink/select.njk
+++ b/docs/src/_includes/partials/kitchen-sink/select.njk
@@ -8,7 +8,6 @@
@@ -52,13 +51,13 @@ toc:
{% endset %}
{% set code_script %}
-
+ #}
{% endset %}
{{ code_preview("popover", code_script | prettyHtml ~ code_html | prettyHtml) }}
diff --git a/docs/src/components/select.njk b/docs/src/components/select.njk
index 24e7ee4..cb68b14 100644
--- a/docs/src/components/select.njk
+++ b/docs/src/components/select.njk
@@ -34,34 +34,30 @@ toc:
+
{% endset %}
{{ code_preview("select-native", code_native) }}
{% set code_html %}
-{% call select(
- name="select-js",
+{{ select(
trigger_attrs={"class": "w-[180px]"},
- register_on=["alpine:init", "htmx:afterSwap"]
-) %}
-
-{% set raw_code %}{% raw %}{% call select(name="select-js") %}
-
- {% call select(
+ {{ select(
is_combobox=true,
selected="owner",
- content_attrs={"data-align": "end"}
- ) %}
-
diff --git a/src/css/basecoat.css b/src/css/basecoat.css
index 8390957..64e5f8e 100644
--- a/src/css/basecoat.css
+++ b/src/css/basecoat.css
@@ -446,37 +446,56 @@
/* Dialog */
@layer components {
.dialog {
- [role='dialog'] {
- @apply fixed inset-0 z-50 bg-black/50 opacity-0 invisible transition-all;
+ @apply inset-y-0 opacity-0 transition-all transition-discrete;
- &:not([inert]),
- &[inert='false'] {
- @apply opacity-100 visible;
- > article {
- @apply opacity-100 scale-100 visible;
- }
+ &:is([open],:popover-open) {
+ @apply opacity-100;
+
+ &::backdrop {
+ @apply opacity-100;
}
> article {
- @apply bg-background fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg opacity-0 scale-95 invisible transition-all max-h-[calc(100%-2rem)];
+ @apply scale-100;
+ }
- > header {
- @apply flex flex-col gap-2 text-center sm:text-left;
+ @starting-style {
+ @apply opacity-0;
- > h2 {
- @apply text-lg leading-none font-semibold;
- }
- > p {
- @apply text-muted-foreground text-sm;
- }
+ &::backdrop {
+ @apply opacity-0;
}
- > section {
- @apply flex-1 -mx-6 px-6;
+ > article {
+ @apply scale-95;
}
- > footer {
- @apply flex flex-col-reverse gap-2 sm:flex-row sm:justify-end;
+ }
+ }
+ &::backdrop {
+ @apply bg-black/50 opacity-0 transition-all transition-discrete;
+ }
+ > article {
+ @apply bg-background fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg max-h-[calc(100%-2rem)];
+ @apply transition-all scale-95;
+
+ > header {
+ @apply flex flex-col gap-2 text-center sm:text-left;
+
+ > h2 {
+ @apply text-lg leading-none font-semibold;
}
+ > p {
+ @apply text-muted-foreground text-sm;
+ }
+ }
+ > section {
+ @apply flex-1 -mx-6 px-6;
+ }
+ > footer {
+ @apply flex flex-col-reverse gap-2 sm:flex-row sm:justify-end;
+ }
+ > form[method='dialog'] {
+ @apply absolute top-4 right-4;
> button {
- @apply ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
+ @apply ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
}
}
}
@@ -531,7 +550,9 @@
}
/* Popover */
-@layer components {
+@import "./components/popover.css";
+
+/* @layer components {
.popover {
@apply relative inline-flex;
@@ -625,7 +646,7 @@
[role='separator'] {
@apply border-border -mx-1 my-1;
}
- /* Combobox */
+ // Combobox
> header {
@apply flex h-9 items-center gap-2 border-b px-3 -mx-1 -mt-1 mb-1;
@@ -647,7 +668,7 @@
}
}
}
-}
+} */
/* Radio */
@layer components {
@@ -713,7 +734,7 @@
/* Select */
@layer components {
.form select,
- .select {
+ select.select {
@apply appearance-none border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent pl-3 pr-9 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-9;
@apply bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0.75rem] bg-size-[1rem];
@@ -726,7 +747,7 @@
/* Sidebar */
.sidebar {
- &[data-uninitialized] {
+ &:not([data-sidebar-initialized]) {
@apply max-md:hidden;
}
&:not([aria-hidden]),
@@ -734,7 +755,10 @@
@apply max-md:bg-black/50 max-md:fixed max-md:inset-0 max-md:z-40;
}
nav {
- @apply bg-sidebar text-sidebar-foreground flex flex-col w-(--sidebar-mobile-width) md:w-(--sidebar-width) fixed inset-y-0 transition-transform ease-in-out duration-300 z-50;
+ @apply bg-sidebar text-sidebar-foreground flex flex-col w-(--sidebar-mobile-width) md:w-(--sidebar-width) fixed inset-y-0 z-50 transition-transform ease-in-out duration-300;
+ }
+ & + * {
+ @apply transition-[margin] ease-in-out duration-300;
}
&:not([data-side]),
&[data-side=left] {
@@ -742,7 +766,7 @@
@apply left-0 border-r;
}
& + * {
- @apply relative md:ml-(--sidebar-width) transition-[margin] ease-in-out duration-300;
+ @apply relative md:ml-(--sidebar-width);
}
&[aria-hidden=true] {
nav {
@@ -758,7 +782,7 @@
@apply right-0 border-l;
}
& + * {
- @apply relative md:mr-(--sidebar-width) transition-[margin] ease-in-out duration-300;
+ @apply relative md:mr-(--sidebar-width);
}
&[aria-hidden=true] {
nav {
diff --git a/src/css/components/dialog.css b/src/css/components/dialog.css
new file mode 100644
index 0000000..5951ed6
--- /dev/null
+++ b/src/css/components/dialog.css
@@ -0,0 +1,59 @@
+@layer components {
+ .dialog {
+ @apply inset-y-0 opacity-0 transition-all transition-discrete;
+
+ &:is([open],:popover-open) {
+ @apply opacity-100;
+
+ &::backdrop {
+ @apply opacity-100;
+ }
+ > article {
+ @apply scale-100;
+ }
+
+ @starting-style {
+ @apply opacity-0;
+
+ &::backdrop {
+ @apply opacity-0;
+ }
+ > article {
+ @apply scale-95;
+ }
+ }
+ }
+
+ &::backdrop {
+ @apply bg-black/50 opacity-0 transition-all transition-discrete;
+ }
+
+ > article {
+ @apply bg-background fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg max-h-[calc(100%-2rem)];
+ @apply transition-all scale-95;
+
+ > header {
+ @apply flex flex-col gap-2 text-center sm:text-left;
+
+ > h2 {
+ @apply text-lg leading-none font-semibold;
+ }
+ > p {
+ @apply text-muted-foreground text-sm;
+ }
+ }
+ > section {
+ @apply flex-1 -mx-6 px-6;
+ }
+ > footer {
+ @apply flex flex-col-reverse gap-2 sm:flex-row sm:justify-end;
+ }
+ > form[method='dialog'] {
+ @apply absolute top-4 right-4;
+ > button {
+ @apply ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/css/components/popover.css b/src/css/components/popover.css
new file mode 100644
index 0000000..d53fa97
--- /dev/null
+++ b/src/css/components/popover.css
@@ -0,0 +1,155 @@
+@layer components {
+ div.select {
+ [popover].popover {
+ @apply p-1 min-w-[anchor-size(width)];
+
+
+
+ [role='option'] {
+ @apply aria-hidden:hidden [&_svg]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg]:shrink-0 [&_svg]:size-4 aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate;
+
+ &[aria-selected='true'] {
+ @apply bg-[image:var(--check-icon)] bg-no-repeat bg-position-[center_right_0.5rem] bg-size-[0.875rem];
+ }
+ }
+ [role='listbox'] [role='heading'] {
+ @apply flex text-muted-foreground px-2 py-1.5 text-xs;
+ }
+ [role='listbox'] [role='group']:not(:has([role='option']:not([aria-hidden='true']))) {
+ @apply hidden;
+ }
+ [role='separator'] {
+ @apply border-border -mx-1 my-1;
+ }
+ > header {
+ @apply flex h-9 items-center gap-2 border-b px-3 -mx-1 -mt-1 mb-1;
+
+ svg {
+ @apply size-4 shrink-0 opacity-50;
+ }
+ input[role='combobox'] {
+ @apply placeholder:text-muted-foreground flex h-10 flex-1 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50 min-w-0;
+ }
+ }
+ [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before {
+ @apply flex items-center justify-center p-6 text-sm truncate;
+ }
+ [role='listbox'][data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before {
+ @apply content-[attr(data-empty)];
+ }
+ [role='listbox']:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before {
+ @apply content-['No_results_found'];
+ }
+ }
+
+ &:not([data-select-initialized]) [role='option']:hover,
+ &[data-select-initialized] [role='option'].active,
+ &[data-select-initialized] [role='option']:focus-visible {
+ @apply bg-accent text-accent-foreground;
+ }
+ }
+ .dropdown-menu {
+ [popover].popover {
+ @apply p-1;
+ min-width: anchor-size(width);
+
+ [role='menuitem'],
+ [role='menuitemcheckbox'],
+ [role='menuitemradio'] {
+ @apply aria-hidden:hidden [&_svg]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg]:shrink-0 [&_svg]:size-4 aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate;
+ @apply focus-visible:bg-accent focus-visible:text-accent-foreground hover:bg-accent hover:text-accent-foreground;
+ &.active {
+ @apply bg-accent text-accent-foreground;
+ }
+ }
+ [role='menu'] [role='heading'] {
+ @apply flex px-2 py-1.5 text-sm font-medium;
+ }
+ [role='separator'] {
+ @apply border-border -mx-1 my-1;
+ }
+ }
+ }
+}
+
+@layer components {
+ [popover].popover {
+ @apply absolute inset-auto bg-popover text-popover-foreground overflow-x-hidden overflow-y-auto p-4 rounded-md border shadow-md z-50 visible opacity-0 scale-95 w-max transition-all transition-discrete;
+
+ &:not([data-side]),
+ &[data-side='bottom'] {
+ @apply -translate-y-2;
+ }
+ &[data-side='top'] {
+ @apply translate-y-2;
+ }
+ &[data-side='left'] {
+ @apply translate-x-2;
+ }
+ &[data-side='right'] {
+ @apply -translate-x-2;
+ }
+ &:not([data-side]),
+ &[data-side='bottom'] {
+ @apply mt-1 top-[anchor(bottom)];
+ }
+ &[data-side='top'] {
+ @apply mb-1 bottom-[anchor(top)];
+ }
+ &[data-side='left'] {
+ @apply mr-1 right-[anchor(left)];
+ }
+ &[data-side='right'] {
+ @apply ml-1 left-[anchor(right)];
+ }
+ &:not([data-side]),
+ &[data-side='bottom'],
+ &[data-side='top'] {
+ &:not([data-align]),
+ &[data-align='start'] {
+ @apply left-[anchor(left)];
+ }
+ &[data-align='end'] {
+ @apply right-[anchor(right)];
+ }
+ &[data-align='center'] {
+ @apply left-[anchor(center)] -translate-x-1/2;
+ }
+ }
+ &[data-side='left'],
+ &[data-side='right'] {
+ &:not([data-align]),
+ &[data-align='start'] {
+ @apply top-[anchor(top)];
+ }
+ &[data-align='end'] {
+ @apply bottom-[anchor(bottom)];
+ }
+ &[data-align='center'] {
+ @apply top-[anchor(center)] -translate-y-1/2;
+ }
+ }
+ &:is(:popover-open) {
+ @apply opacity-100 scale-100 translate-x-0 translate-y-0;
+
+ @starting-style {
+ @apply opacity-0 scale-95;
+
+ &:not([data-side]),
+ &[data-side='bottom'] {
+ @apply -translate-y-2;
+ }
+ &[data-side='top'] {
+ @apply translate-y-2;
+ }
+ &[data-side='left'] {
+ @apply translate-x-2;
+ }
+ &[data-side='right'] {
+ @apply -translate-x-2;
+ }
+ }
+ }
+
+ }
+}
\ No newline at end of file
diff --git a/src/js/dialog.js b/src/js/archived/dialog.js
similarity index 100%
rename from src/js/dialog.js
rename to src/js/archived/dialog.js
diff --git a/src/js/archived/dropdown-menu.js b/src/js/archived/dropdown-menu.js
new file mode 100644
index 0000000..449a107
--- /dev/null
+++ b/src/js/archived/dropdown-menu.js
@@ -0,0 +1,91 @@
+window.basecoat = window.basecoat || {};
+window.basecoat.registerDropdownMenu = function(Alpine) {
+ if (Alpine.components && Alpine.components.dropdownMenu) return;
+
+ Alpine.data('dropdownMenu', () => ({
+ open: false,
+ focusedIndex: null,
+ menuItems: [],
+
+ init() {
+ this.$nextTick(() => {
+ this.menuItems = Array.from(this.$el.querySelectorAll('[role=menuitem]:not([disabled]),[role=menuitemcheckbox]:not([disabled]),[role=menuitemradio]:not([disabled])'));
+ });
+ },
+ focusMenuitem() {
+ if (this.menuItems.length === 0) return;
+
+ if (this.focusedIndex >= this.menuItems.length) {
+ this.focusedIndex = this.menuItems.length - 1;
+ } else if (this.focusedIndex < 0 || this.focusedIndex === null) {
+ this.focusedIndex = 0;
+ }
+ this.menuItems.forEach(item => item.blur());
+ this.menuItems[this.focusedIndex].focus();
+ },
+ moveMenuitemFocus(delta) {
+ if (this.menuItems.length === 0) return;
+
+ let wasOpen = this.open;
+ if (!this.open) {
+ this.open = true;
+ this.focusedIndex = 0;
+ } else {
+ this.focusedIndex = this.focusedIndex === null
+ ? 0
+ : this.focusedIndex + delta;
+ }
+
+ if (wasOpen) {
+ this.focusMenuitem();
+ } else {
+ setTimeout(() => this.focusMenuitem(), 50);
+ }
+ },
+ handleMenuitemClick(event) {
+ const menuitem = event.target.closest('[role=menuitem],[role=menuitemcheckbox],[role=menuitemradio]');
+ if (menuitem && menuitem.getAttribute('aria-disabled') !== 'true' && !menuitem.disabled) {
+ this.$nextTick(() => {
+ this.$refs.trigger.focus();
+ this.open = false;
+ });
+ }
+ },
+ handleMenuitemMousemove(event) {
+ const menuitem = event.target.closest('[role=menuitem],[role=menuitemcheckbox],[role=menuitemradio]');
+ if (menuitem && menuitem.getAttribute('aria-disabled') !== 'true' && !menuitem.disabled) {
+ this.focusedIndex = this.menuItems.indexOf(menuitem);
+ this.focusMenuitem();
+ }
+ },
+
+ $trigger: {
+ '@click'() { this.open = !this.open },
+ '@keydown.escape.prevent'() {
+ this.open = false;
+ this.$refs.trigger.focus();
+ },
+ '@keydown.down.prevent'() { this.moveMenuitemFocus(+1); },
+ '@keydown.up.prevent'() { this.moveMenuitemFocus(-1); },
+ '@keydown.home.prevent'() { this.focusMenuitem(0) },
+ '@keydown.end.prevent'() { this.focusMenuitem(this.menuItems.length - 1) },
+ '@keydown.enter.prevent'() { this.open = !this.open },
+ ':aria-expanded'() { return this.open },
+ 'x-ref': 'trigger'
+ },
+ $content: {
+ '@click'(e) { this.handleMenuitemClick(e) },
+ '@keydown.escape.prevent'() {
+ this.open = false;
+ this.$refs.trigger.focus();
+ },
+ '@keydown.down.prevent'() { this.moveMenuitemFocus(+1); },
+ '@keydown.up.prevent'() { this.moveMenuitemFocus(-1); },
+ '@keydown.home.prevent'() { this.focusMenuitem(0) },
+ '@keydown.end.prevent'() { this.focusMenuitem(this.menuItems.length - 1) },
+ '@mouseover'(e) { this.handleMenuitemMousemove(e) },
+ ':aria-hidden'() { return !this.open },
+ 'x-cloak': ''
+ },
+ }));
+};
\ No newline at end of file
diff --git a/src/js/popover.js b/src/js/archived/popover.js
similarity index 100%
rename from src/js/popover.js
rename to src/js/archived/popover.js
diff --git a/src/js/archived/select.js b/src/js/archived/select.js
new file mode 100644
index 0000000..ed1c1fd
--- /dev/null
+++ b/src/js/archived/select.js
@@ -0,0 +1,156 @@
+window.basecoat = window.basecoat || {};
+window.basecoat.registerSelect = function(Alpine) {
+ if (Alpine.components && Alpine.components.select) return;
+
+ Alpine.data('select', (initialValue = null) => ({
+ open: false,
+ options: [],
+ disabledOptions: [],
+ focusedIndex: null,
+ selectedLabel: null,
+ selectedValue: null,
+ query: '',
+
+ init() {
+ this.$nextTick(() => {
+ this.options = Array.from(this.$el.querySelectorAll('[role=option]:not([aria-disabled])'));
+ this.disabledOptions = Array.from(this.$el.querySelectorAll('[role=option][aria-disabled=true]'));
+ if (this.options.length === 0) return;
+ if (initialValue) {
+ const option = this.options.find(opt => opt.getAttribute('data-value') === initialValue);
+ this.selectOption(option, false);
+ this.focusedIndex = this.options.indexOf(option);
+ } else {
+ this.selectOption(this.options[0], false);
+ }
+ });
+ },
+ focusOption() {
+ if (this.options.length === 0) return;
+
+ if (this.focusedIndex >= this.options.length) {
+ this.focusedIndex = this.options.length - 1;
+ } else if (this.focusedIndex < 0 || this.focusedIndex === null) {
+ this.focusedIndex = 0;
+ }
+ this.options.forEach(opt => opt.removeAttribute('data-focus'));
+ const option = this.options[this.focusedIndex];
+ option.setAttribute('data-focus', '');
+ option.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+ },
+ focusOnSelectedOption() {
+ if (this.options.length === 0 || this.selectedValue === null) return;
+ const option = this.options.find(opt => opt.getAttribute('data-value') === this.selectedValue);
+ if (!option) return;
+ this.focusedIndex = this.options.indexOf(option);
+ this.focusOption();
+ },
+ moveOptionFocus(delta) {
+ if (this.options.length === 0) return;
+
+ if (!this.open) {
+ this.open = true;
+ this.focusOnSelectedOption();
+ } else {
+ this.focusedIndex = this.focusedIndex === null
+ ? 0
+ : this.focusedIndex + delta;
+ }
+ this.focusOption();
+ },
+ handleOptionClick(event) {
+ const option = event.target.closest('[role=option]');
+ if (option && option.getAttribute('aria-disabled') !== 'true') {
+ this.selectOption(option);
+ this.open = false;
+ this.$nextTick(() => this.$refs.trigger.focus());
+ }
+ },
+ handleOptionMousemove(event) {
+ const option = event.target.closest('[role=option]');
+ if (option && option.getAttribute('aria-disabled') !== 'true') {
+ this.focusedIndex = this.options.indexOf(option);
+ this.focusOption();
+ }
+ },
+ handleOptionEnter(event) {
+ this.selectOption(this.options[this.focusedIndex]);
+ this.open = !this.open;
+ },
+ selectValue(value, dispatch = true) {
+ if (this.options.length === 0 || value == null) return;
+
+ const option = this.options.find(opt => opt.getAttribute('data-value') === String(value));
+ if (option) {
+ this.selectOption(option, dispatch);
+ }
+ },
+ selectOption(option, dispatch = true) {
+ if (this.options.length === 0 || !option || option.disabled || option.getAttribute('data-value') == null) {
+ return;
+ }
+
+ this.options.forEach(opt => {
+ opt.setAttribute('aria-selected', opt === option);
+ });
+ this.selectedLabel = option.innerHTML;
+ this.selectedValue = option.getAttribute('data-value');
+ if (dispatch) {
+ this.$dispatch('select:change', {
+ value: this.selectedValue,
+ label: this.selectedLabel
+ });
+ this.$dispatch('change');
+ }
+ },
+ filterOptions(query) {
+ if (query.length > 0) {
+ this.disabledOptions.forEach(opt => { opt.setAttribute('aria-hidden', 'true'); });
+ } else {
+ this.disabledOptions.forEach(opt => { opt.removeAttribute('aria-hidden'); });
+ }
+ this.options.forEach(opt => {
+ opt.removeAttribute('aria-hidden');
+ if (opt.getAttribute('data-value') != null && !opt.innerHTML.toLowerCase().includes(query.toLowerCase())) {
+ opt.setAttribute('aria-hidden', 'true');
+ }
+ });
+ },
+
+ $trigger: {
+ '@click'() { this.open = !this.open; this.focusOnSelectedOption(); },
+ '@keydown.escape.prevent'() {
+ this.open = false;
+ this.$refs.trigger.focus();
+ },
+ '@keydown.down.prevent'() { this.moveOptionFocus(+1); },
+ '@keydown.up.prevent'() { this.moveOptionFocus(-1); },
+ '@keydown.home.prevent'() { this.focusOption(0) },
+ '@keydown.end.prevent'() { this.focusOption(this.options.length - 1) },
+ '@keydown.enter.prevent'() {
+ if (this.open) this.handleOptionEnter();
+ else this.open = true;
+ },
+ ':aria-expanded'() { return this.open },
+ 'x-ref': 'trigger'
+ },
+ $content: {
+ '@click'(e) { this.handleOptionClick(e) },
+ '@mouseover'(e) { this.handleOptionMousemove(e) },
+ ':aria-hidden'() { return !this.open },
+ 'x-cloak': ''
+ },
+ $filter: {
+ '@input'(e) { this.filterOptions(e.target.value) },
+ '@keydown.escape.prevent'() {
+ this.open = false;
+ this.$refs.trigger.focus();
+ },
+ '@keydown.down.prevent'() { this.moveOptionFocus(+1); },
+ '@keydown.up.prevent'() { this.moveOptionFocus(-1); },
+ '@keydown.home.prevent'() { this.focusOption(0) },
+ '@keydown.end.prevent'() { this.focusOption(this.options.length - 1) },
+ '@keydown.enter.prevent'() { this.handleOptionEnter() },
+ }
+ }));
+};
\ No newline at end of file
diff --git a/src/js/archived/sidebar.js b/src/js/archived/sidebar.js
new file mode 100644
index 0000000..103eaba
--- /dev/null
+++ b/src/js/archived/sidebar.js
@@ -0,0 +1,25 @@
+window.basecoat = window.basecoat || {};
+window.basecoat.registerSidebar= function(Alpine) {
+ if (Alpine.components && Alpine.components.sidebar) return;
+
+ Alpine.data('sidebar', (initialOpen = true, initialMobileOpen = false) => ({
+ open: window.innerWidth >= 768
+ ? initialOpen
+ : initialMobileOpen,
+
+ init() {
+ this.$nextTick(() => {
+ this.$el.removeAttribute('data-uninitialized');
+ });
+ },
+
+ $main: {
+ '@sidebar:open.window'(e) { this.open = true },
+ '@sidebar:close.window'(e) { this.open = false },
+ '@sidebar:toggle.window'(e) { this.open = !this.open },
+ '@click'(e) { if (e.target === this.$el) this.open = false },
+ ':aria-hidden'() { return !this.open },
+ ':inert'() { return !this.open }
+ },
+ }));
+};
\ No newline at end of file
diff --git a/src/js/archived/tabs.js b/src/js/archived/tabs.js
new file mode 100644
index 0000000..a2d6ddf
--- /dev/null
+++ b/src/js/archived/tabs.js
@@ -0,0 +1,64 @@
+window.basecoat = window.basecoat || {};
+window.basecoat.registerTabs = function(Alpine) {
+ if (Alpine.components && Alpine.components.tabs) return;
+
+ Alpine.data('tabs', (initialTabIndex = 0) => ({
+ activeTabIndex: initialTabIndex,
+ tabs: [],
+ panels: [],
+
+ init() {
+ this.$nextTick(() => {
+ this.tabs = Array.from(this.$el.querySelectorAll(':scope > [role=tablist] [role=tab]:not([disabled])'));
+ this.panels = Array.from(this.$el.querySelectorAll(':scope > [role=tabpanel]'));
+ if (this.tabs.length > 0) {
+ this.selectTab(this.tabs[initialTabIndex], false);
+ }
+ });
+ },
+ nextTab() {
+ if (this.tabs.length === 0) return;
+ let newIndex = (this.activeTabIndex + 1) % this.tabs.length;
+ this.selectTab(this.tabs[newIndex]);
+ },
+ prevTab() {
+ if (this.tabs.length === 0) return;
+ let newIndex = (this.activeTabIndex - 1 + this.tabs.length) % this.tabs.length;
+ this.selectTab(this.tabs[newIndex]);
+ },
+ selectTab(tab, focus = true) {
+ if (!tab || this.tabs.length === 0) return;
+
+ this.tabs.forEach((t, index) => {
+ const isSelected = t === tab;
+ t.setAttribute('aria-selected', isSelected);
+ t.setAttribute('tabindex', isSelected ? '0' : '-1');
+ if (isSelected) {
+ this.activeTabIndex = index;
+ this.activeTab = t;
+ if (focus) {
+ t.focus();
+ }
+ }
+ });
+
+ const panelId = tab.getAttribute('aria-controls');
+ if (!panelId) return;
+
+ this.panels.forEach(panel => {
+ panel.hidden = (panel.getAttribute('id') !== panelId);
+ });
+ },
+
+ $tablist: {
+ ['@click'](event) {
+ const clickedTab = event.target.closest('[role=tab]');
+ if (clickedTab) {
+ this.selectTab(clickedTab);
+ }
+ },
+ ['@keydown.arrow-right.prevent']() { this.nextTab() },
+ ['@keydown.arrow-left.prevent']() { this.prevTab() },
+ },
+ }));
+};
\ No newline at end of file
diff --git a/src/js/archived/toast.js b/src/js/archived/toast.js
new file mode 100644
index 0000000..672dafa
--- /dev/null
+++ b/src/js/archived/toast.js
@@ -0,0 +1,75 @@
+window.basecoat = window.basecoat || {};
+window.basecoat.registerToast = function(Alpine) {
+ if (Alpine.components && Alpine.components.toast) return;
+
+ Alpine.store('toaster', { isPaused: false });
+ Alpine.data('toast', (config={}) => ({
+ config: config,
+ open: false,
+ timeoutDuration: null,
+ timeoutId: null,
+
+ init() {
+ if (config.duration !== -1) {
+ this.timeoutDuration = config.duration || (config.category === 'error' ? 5000 : 3000);
+ this.timeoutId = setTimeout(() => { this.close() }, this.timeoutDuration);
+ }
+ this.open = true;
+ this.$watch('$store.toaster.isPaused', (isPaused) => {
+ if (!this.open) return;
+ if (isPaused) {
+ this.pauseTimeout();
+ } else {
+ this.resumeTimeout();
+ }
+ });
+ },
+ pauseTimeout() {
+ clearTimeout(this.timeoutId);
+ this.timeoutId = null;
+ },
+ resumeTimeout(index) {
+ if (this.open && this.timeoutId === null) {
+ this.timeoutId = setTimeout(() => { this.close() }, this.timeoutDuration);
+ }
+ },
+ close() {
+ this.pauseTimeout();
+ this.open = false;
+ this.$el.blur();
+ },
+ executeAction(actionString) {
+ if (actionString) {
+ Alpine.evaluate(this.$el, actionString);
+ }
+ },
+
+ $toastBindings: {
+ ['@mouseenter']() { this.$store.toaster.isPaused = true },
+ ['@mouseleave']() { this.$store.toaster.isPaused = false },
+ ['@keydown.escape.prevent']() { this.close() },
+ [':aria-hidden']() { return !this.open }
+ },
+ }));
+
+ Alpine.magic('toast', (el) => (config, toasterId='toaster') => {
+ const toaster = document.getElementById(toasterId);
+ const template = document.getElementById('toast-template');
+
+ if (!toaster) {
+ console.error(`Toaster container with id #${toasterId} not found.`);
+ return;
+ }
+ if (!template) {
+ console.error('Toast template with id #toast-template not found.');
+ return;
+ }
+
+ const clone = template.content.firstElementChild.cloneNode(true);
+
+ clone.setAttribute('x-data', `toast(${JSON.stringify(config)})`);
+ clone.removeAttribute('id');
+
+ toaster.appendChild(clone);
+ });
+};
\ No newline at end of file
diff --git a/src/js/select.js b/src/js/select.js
index ed1c1fd..1180b36 100644
--- a/src/js/select.js
+++ b/src/js/select.js
@@ -1,156 +1,95 @@
-window.basecoat = window.basecoat || {};
-window.basecoat.registerSelect = function(Alpine) {
- if (Alpine.components && Alpine.components.select) return;
-
- Alpine.data('select', (initialValue = null) => ({
- open: false,
- options: [],
- disabledOptions: [],
- focusedIndex: null,
- selectedLabel: null,
- selectedValue: null,
- query: '',
+(() => {
+ const initSelect = (select) => {
+ const trigger = select.querySelector(':scope > [popovertarget]');
+ const selectedValue = trigger.querySelector(':scope > span');
+ const popover = select.querySelector(':scope > [popover]');
+ const listbox = popover.querySelector('[role="listbox"]');
+ const input = select.querySelector(':scope > input[type="hidden"]');
+ if (!trigger || !popover || !listbox || !input) return;
- init() {
- this.$nextTick(() => {
- this.options = Array.from(this.$el.querySelectorAll('[role=option]:not([aria-disabled])'));
- this.disabledOptions = Array.from(this.$el.querySelectorAll('[role=option][aria-disabled=true]'));
- if (this.options.length === 0) return;
- if (initialValue) {
- const option = this.options.find(opt => opt.getAttribute('data-value') === initialValue);
- this.selectOption(option, false);
- this.focusedIndex = this.options.indexOf(option);
- } else {
- this.selectOption(this.options[0], false);
- }
- });
- },
- focusOption() {
- if (this.options.length === 0) return;
+ const options = Array.from(listbox.querySelectorAll('[role="option"]'));
+ let activeIndex = -1;
- if (this.focusedIndex >= this.options.length) {
- this.focusedIndex = this.options.length - 1;
- } else if (this.focusedIndex < 0 || this.focusedIndex === null) {
- this.focusedIndex = 0;
- }
- this.options.forEach(opt => opt.removeAttribute('data-focus'));
- const option = this.options[this.focusedIndex];
- option.setAttribute('data-focus', '');
- option.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
- },
- focusOnSelectedOption() {
- if (this.options.length === 0 || this.selectedValue === null) return;
- const option = this.options.find(opt => opt.getAttribute('data-value') === this.selectedValue);
- if (!option) return;
- this.focusedIndex = this.options.indexOf(option);
- this.focusOption();
- },
- moveOptionFocus(delta) {
- if (this.options.length === 0) return;
-
- if (!this.open) {
- this.open = true;
- this.focusOnSelectedOption();
- } else {
- this.focusedIndex = this.focusedIndex === null
- ? 0
- : this.focusedIndex + delta;
- }
- this.focusOption();
- },
- handleOptionClick(event) {
- const option = event.target.closest('[role=option]');
- if (option && option.getAttribute('aria-disabled') !== 'true') {
- this.selectOption(option);
- this.open = false;
- this.$nextTick(() => this.$refs.trigger.focus());
- }
- },
- handleOptionMousemove(event) {
- const option = event.target.closest('[role=option]');
- if (option && option.getAttribute('aria-disabled') !== 'true') {
- this.focusedIndex = this.options.indexOf(option);
- this.focusOption();
- }
- },
- handleOptionEnter(event) {
- this.selectOption(this.options[this.focusedIndex]);
- this.open = !this.open;
- },
- selectValue(value, dispatch = true) {
- if (this.options.length === 0 || value == null) return;
-
- const option = this.options.find(opt => opt.getAttribute('data-value') === String(value));
+ const updateValue = (option) => {
if (option) {
- this.selectOption(option, dispatch);
- }
- },
- selectOption(option, dispatch = true) {
- if (this.options.length === 0 || !option || option.disabled || option.getAttribute('data-value') == null) {
- return;
+ selectedValue.innerHTML = option.dataset.label || option.innerHTML;
+ input.value = option.dataset.value;
+ listbox.querySelector('[role="option"][aria-selected="true"]')?.removeAttribute('aria-selected');
+ option.setAttribute('aria-selected', 'true');
}
+ };
- this.options.forEach(opt => {
- opt.setAttribute('aria-selected', opt === option);
- });
- this.selectedLabel = option.innerHTML;
- this.selectedValue = option.getAttribute('data-value');
- if (dispatch) {
- this.$dispatch('select:change', {
- value: this.selectedValue,
- label: this.selectedLabel
- });
- this.$dispatch('change');
+ const selectOption = (option) => {
+ if (!option) return;
+
+ updateValue(option);
+
+ trigger.removeAttribute('aria-activedescendant');
+ options.forEach(opt => opt.classList.remove('active'));
+ activeIndex = -1;
+ popover.hidePopover();
+ };
+
+ let initialOption = options.find(opt => input.value && opt.dataset.value === input.value);
+ if (!initialOption && options.length > 0) initialOption = options[0];
+
+ updateValue(initialOption);
+
+ trigger.addEventListener('keydown', (e) => {
+ if (!popover.matches(':popover-open')) return;
+
+ if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+ e.preventDefault();
+ if (activeIndex > -1) options[activeIndex]?.classList.remove('active');
+
+ if (e.key === 'ArrowDown') activeIndex = (activeIndex + 1) % options.length;
+ else activeIndex = (activeIndex - 1 + options.length) % options.length;
+
+ const activeOption = options[activeIndex];
+ if (activeOption) {
+ activeOption.classList.add('active');
+ if (activeOption.id) {
+ trigger.setAttribute('aria-activedescendant', activeOption.id);
+ }
+ activeOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+ }
+ } else if (e.key === 'Enter') {
+ e.preventDefault();
+ selectOption(options[activeIndex]);
}
- },
- filterOptions(query) {
- if (query.length > 0) {
- this.disabledOptions.forEach(opt => { opt.setAttribute('aria-hidden', 'true'); });
- } else {
- this.disabledOptions.forEach(opt => { opt.removeAttribute('aria-hidden'); });
+ });
+
+ listbox.addEventListener('click', (e) => {
+ const clickedOption = e.target.closest('[role="option"]');
+ if (clickedOption) selectOption(clickedOption);
+ });
+
+ popover.addEventListener('toggle', (e) => {
+ if (e.newState === 'closed') {
+ trigger.removeAttribute('aria-activedescendant');
+ if (activeIndex > -1) options[activeIndex]?.classList.remove('active');
+ activeIndex = -1;
}
- this.options.forEach(opt => {
- opt.removeAttribute('aria-hidden');
- if (opt.getAttribute('data-value') != null && !opt.innerHTML.toLowerCase().includes(query.toLowerCase())) {
- opt.setAttribute('aria-hidden', 'true');
+ });
+
+ select.dataset.selectInitialized = true;
+ };
+
+ document.querySelectorAll('div.select:not([data-select-initialized])').forEach(initSelect);
+
+ const observer = new MutationObserver((mutations) => {
+ mutations.forEach((mutation) => {
+ mutation.addedNodes.forEach((node) => {
+ if (node.nodeType === Node.ELEMENT_NODE) {
+ if (node.matches('div.select:not([data-select-initialized])')) {
+ initSelect(node);
+ }
+ node.querySelectorAll('div.select:not([data-select-initialized])').forEach(initSelect);
}
});
- },
+ });
+ });
- $trigger: {
- '@click'() { this.open = !this.open; this.focusOnSelectedOption(); },
- '@keydown.escape.prevent'() {
- this.open = false;
- this.$refs.trigger.focus();
- },
- '@keydown.down.prevent'() { this.moveOptionFocus(+1); },
- '@keydown.up.prevent'() { this.moveOptionFocus(-1); },
- '@keydown.home.prevent'() { this.focusOption(0) },
- '@keydown.end.prevent'() { this.focusOption(this.options.length - 1) },
- '@keydown.enter.prevent'() {
- if (this.open) this.handleOptionEnter();
- else this.open = true;
- },
- ':aria-expanded'() { return this.open },
- 'x-ref': 'trigger'
- },
- $content: {
- '@click'(e) { this.handleOptionClick(e) },
- '@mouseover'(e) { this.handleOptionMousemove(e) },
- ':aria-hidden'() { return !this.open },
- 'x-cloak': ''
- },
- $filter: {
- '@input'(e) { this.filterOptions(e.target.value) },
- '@keydown.escape.prevent'() {
- this.open = false;
- this.$refs.trigger.focus();
- },
- '@keydown.down.prevent'() { this.moveOptionFocus(+1); },
- '@keydown.up.prevent'() { this.moveOptionFocus(-1); },
- '@keydown.home.prevent'() { this.focusOption(0) },
- '@keydown.end.prevent'() { this.focusOption(this.options.length - 1) },
- '@keydown.enter.prevent'() { this.handleOptionEnter() },
- }
- }));
-};
\ No newline at end of file
+ // Start observing the whole document
+ observer.observe(document.body, { childList: true, subtree: true });
+})();
\ No newline at end of file
diff --git a/src/js/sidebar.js b/src/js/sidebar.js
index 103eaba..68f5d2e 100644
--- a/src/js/sidebar.js
+++ b/src/js/sidebar.js
@@ -1,25 +1,68 @@
-window.basecoat = window.basecoat || {};
-window.basecoat.registerSidebar= function(Alpine) {
- if (Alpine.components && Alpine.components.sidebar) return;
+(() => {
+ const initSidebar = (sidebarComponent) => {
+ const initialOpen = sidebarComponent.dataset.initialOpen !== 'false';
+ const initialMobileOpen = sidebarComponent.dataset.initialMobileOpen === 'true';
+ const breakpoint = parseInt(sidebarComponent.dataset.breakpoint) || 768;
+
+ let open = breakpoint > 0
+ ? (window.innerWidth >= breakpoint ? initialOpen : initialMobileOpen)
+ : initialOpen;
+
+ const updateState = () => {
+ sidebarComponent.setAttribute('aria-hidden', !open);
+ if (open) {
+ sidebarComponent.removeAttribute('inert');
+ } else {
+ sidebarComponent.setAttribute('inert', '');
+ }
+ };
- Alpine.data('sidebar', (initialOpen = true, initialMobileOpen = false) => ({
- open: window.innerWidth >= 768
- ? initialOpen
- : initialMobileOpen,
+ const setState = (state) => {
+ open = state;
+ updateState();
+ };
- init() {
- this.$nextTick(() => {
- this.$el.removeAttribute('data-uninitialized');
+ const sidebarId = sidebarComponent.id;
+
+ window.addEventListener('sidebar:open', (e) => {
+ if (!e.detail?.id || e.detail.id === sidebarId) setState(true);
+ });
+ window.addEventListener('sidebar:close', (e) => {
+ if (!e.detail?.id || e.detail.id === sidebarId) setState(false);
+ });
+ window.addEventListener('sidebar:toggle', (e) => {
+ if (!e.detail?.id || e.detail.id === sidebarId) setState(!open);
+ });
+
+ sidebarComponent.addEventListener('click', (e) => {
+ const nav = sidebarComponent.querySelector('nav');
+ const closeTarget = e.target.closest('[data-sidebar-close-on-mobile]');
+
+ if (closeTarget && window.innerWidth < breakpoint) {
+ setState(false);
+ } else if (e.target === sidebarComponent || (nav && !nav.contains(e.target))) {
+ setState(false);
+ }
+ });
+
+ updateState();
+ sidebarComponent.dataset.sidebarInitialized = true;
+ };
+
+ document.querySelectorAll('.sidebar:not([data-sidebar-initialized])').forEach(initSidebar);
+
+ const observer = new MutationObserver((mutations) => {
+ mutations.forEach((mutation) => {
+ mutation.addedNodes.forEach((node) => {
+ if (node.nodeType === Node.ELEMENT_NODE) {
+ if (node.matches('.sidebar:not([data-sidebar-initialized])')) {
+ initSidebar(node);
+ }
+ node.querySelectorAll('.sidebar:not([data-sidebar-initialized])').forEach(initSidebar);
+ }
});
- },
+ });
+ });
- $main: {
- '@sidebar:open.window'(e) { this.open = true },
- '@sidebar:close.window'(e) { this.open = false },
- '@sidebar:toggle.window'(e) { this.open = !this.open },
- '@click'(e) { if (e.target === this.$el) this.open = false },
- ':aria-hidden'() { return !this.open },
- ':inert'() { return !this.open }
- },
- }));
-};
\ No newline at end of file
+ observer.observe(document.body, { childList: true, subtree: true });
+})();
\ No newline at end of file
diff --git a/src/js/tabs.js b/src/js/tabs.js
index a2d6ddf..3979797 100644
--- a/src/js/tabs.js
+++ b/src/js/tabs.js
@@ -1,64 +1,75 @@
-window.basecoat = window.basecoat || {};
-window.basecoat.registerTabs = function(Alpine) {
- if (Alpine.components && Alpine.components.tabs) return;
-
- Alpine.data('tabs', (initialTabIndex = 0) => ({
- activeTabIndex: initialTabIndex,
- tabs: [],
- panels: [],
+(() => {
+ const initTabs = (tabsComponent) => {
+ const tablist = tabsComponent.querySelector('[role="tablist"]');
+ if (!tablist) return;
- init() {
- this.$nextTick(() => {
- this.tabs = Array.from(this.$el.querySelectorAll(':scope > [role=tablist] [role=tab]:not([disabled])'));
- this.panels = Array.from(this.$el.querySelectorAll(':scope > [role=tabpanel]'));
- if (this.tabs.length > 0) {
- this.selectTab(this.tabs[initialTabIndex], false);
+ const tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));
+ const panels = tabs.map(tab => document.getElementById(tab.getAttribute('aria-controls'))).filter(Boolean);
+
+ const selectTab = (tabToSelect) => {
+ tabs.forEach((tab, index) => {
+ tab.setAttribute('aria-selected', 'false');
+ tab.setAttribute('tabindex', '-1');
+ if (panels[index]) panels[index].hidden = true;
+ });
+
+ tabToSelect.setAttribute('aria-selected', 'true');
+ tabToSelect.setAttribute('tabindex', '0');
+ const activePanel = document.getElementById(tabToSelect.getAttribute('aria-controls'));
+ if (activePanel) activePanel.hidden = false;
+ };
+
+ tablist.addEventListener('click', (e) => {
+ const clickedTab = e.target.closest('[role="tab"]');
+ if (clickedTab) selectTab(clickedTab);
+ });
+
+ tablist.addEventListener('keydown', (e) => {
+ const currentTab = e.target;
+ if (!tabs.includes(currentTab)) return;
+
+ let nextTab;
+ const currentIndex = tabs.indexOf(currentTab);
+
+ switch (e.key) {
+ case 'ArrowRight':
+ nextTab = tabs[(currentIndex + 1) % tabs.length];
+ break;
+ case 'ArrowLeft':
+ nextTab = tabs[(currentIndex - 1 + tabs.length) % tabs.length];
+ break;
+ case 'Home':
+ nextTab = tabs[0];
+ break;
+ case 'End':
+ nextTab = tabs[tabs.length - 1];
+ break;
+ default:
+ return;
+ }
+
+ e.preventDefault();
+ selectTab(nextTab);
+ nextTab.focus();
+ });
+
+ tabsComponent.dataset.tabsInitialized = true;
+ };
+
+ document.querySelectorAll('.tabs:not([data-tabs-initialized])').forEach(initTabs);
+
+ const observer = new MutationObserver((mutations) => {
+ mutations.forEach((mutation) => {
+ mutation.addedNodes.forEach((node) => {
+ if (node.nodeType === Node.ELEMENT_NODE) {
+ if (node.matches('.tabs:not([data-tabs-initialized])')) {
+ initTabs(node);
+ }
+ node.querySelectorAll('.tabs:not([data-tabs-initialized])').forEach(initTabs);
}
});
- },
- nextTab() {
- if (this.tabs.length === 0) return;
- let newIndex = (this.activeTabIndex + 1) % this.tabs.length;
- this.selectTab(this.tabs[newIndex]);
- },
- prevTab() {
- if (this.tabs.length === 0) return;
- let newIndex = (this.activeTabIndex - 1 + this.tabs.length) % this.tabs.length;
- this.selectTab(this.tabs[newIndex]);
- },
- selectTab(tab, focus = true) {
- if (!tab || this.tabs.length === 0) return;
+ });
+ });
- this.tabs.forEach((t, index) => {
- const isSelected = t === tab;
- t.setAttribute('aria-selected', isSelected);
- t.setAttribute('tabindex', isSelected ? '0' : '-1');
- if (isSelected) {
- this.activeTabIndex = index;
- this.activeTab = t;
- if (focus) {
- t.focus();
- }
- }
- });
-
- const panelId = tab.getAttribute('aria-controls');
- if (!panelId) return;
-
- this.panels.forEach(panel => {
- panel.hidden = (panel.getAttribute('id') !== panelId);
- });
- },
-
- $tablist: {
- ['@click'](event) {
- const clickedTab = event.target.closest('[role=tab]');
- if (clickedTab) {
- this.selectTab(clickedTab);
- }
- },
- ['@keydown.arrow-right.prevent']() { this.nextTab() },
- ['@keydown.arrow-left.prevent']() { this.prevTab() },
- },
- }));
-};
\ No newline at end of file
+ observer.observe(document.body, { childList: true, subtree: true });
+})();
\ No newline at end of file
diff --git a/src/nunjucks/dialog.njk b/src/nunjucks/dialog.njk
index 6921bb8..11dac66 100644
--- a/src/nunjucks/dialog.njk
+++ b/src/nunjucks/dialog.njk
@@ -17,7 +17,7 @@
@param close_on_overlay_click {boolean} [optional] [default=true] - Whether clicking the overlay closes the dialog.
#}
{% macro dialog(
- id,
+ id=None,
trigger=None,
title=None,
description=None,
@@ -32,79 +32,62 @@
close_button=true,
close_on_overlay_click=true
) %}
-
@@ -170,7 +168,6 @@
{% endset %}
{% call dropdown_menu(
- id="dropdown-menu-radio-group",
trigger="Radio Group",
trigger_attrs={"class": "btn-outline"},
content_attrs={"class": "min-w-56"},
diff --git a/docs/src/_includes/partials/kitchen-sink/popover.njk b/docs/src/_includes/partials/kitchen-sink/popover.njk
index 98af075..262aa10 100644
--- a/docs/src/_includes/partials/kitchen-sink/popover.njk
+++ b/docs/src/_includes/partials/kitchen-sink/popover.njk
@@ -12,7 +12,7 @@
id="demo-popover",
trigger="Open popover",
trigger_attrs={"class": "btn-outline"},
- content_attrs={"class": "w-80 p-4"}
+ popover_attrs={"class": "w-80"}
) %}
-
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/docs/src/_includes/partials/sidebar.njk b/docs/src/_includes/partials/sidebar.njk
index d11f6ab..7d2716f 100644
--- a/docs/src/_includes/partials/sidebar.njk
+++ b/docs/src/_includes/partials/sidebar.njk
@@ -63,7 +63,7 @@
"hx-select": "#content",
"hx-target": "#content",
"hx-swap": "outerHTML",
- "@click": "if (window.innerWidth < 768) { open = false }"
+ "data-sidebar-close-on-mobile": ""
} %}
{% set icon_home %}{% lucide "house" %}{% endset %}
@@ -79,7 +79,7 @@
{ label: "Kitchen sink", url: "/kitchen-sink", icon: icon_layout_dashboard, attrs: link_attrs },
{ label: "GitHub", url: "https://github.com/hunvreus/basecoat", icon: icon_github, attrs: {
"target": "_blank",
- "@click": "if (window.innerWidth < 768) { open = false }"
+ "data-sidebar-close-on-mobile": ""
}
}
]},
@@ -117,6 +117,7 @@
{{ sidebar(
+ id="sidebar",
label="Sidebar navigation",
header=header,
footer=footer,
diff --git a/docs/src/assets/styles.css b/docs/src/assets/styles.css
index 369c800..c585511 100644
--- a/docs/src/assets/styles.css
+++ b/docs/src/assets/styles.css
@@ -1,13 +1,12 @@
/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */
-@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Geist+Mono&display=swap");
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
:root, :host {
- --font-sans: 'Geist';
- --font-mono: 'Geist Mono';
- --color-red-500: oklch(63.7% 0.237 25.331);
+ --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+ "Courier New", monospace;
--color-amber-50: oklch(98.7% 0.022 95.277);
--color-amber-100: oklch(96.2% 0.059 95.617);
--color-amber-900: oklch(41.4% 0.112 45.904);
@@ -22,13 +21,6 @@
--color-blue-700: oklch(48.8% 0.243 264.376);
--color-blue-900: oklch(37.9% 0.146 265.522);
--color-blue-950: oklch(28.2% 0.091 267.935);
- --color-indigo-50: oklch(96.2% 0.018 272.314);
- --color-indigo-400: oklch(67.3% 0.182 276.935);
- --color-indigo-500: oklch(58.5% 0.233 277.117);
- --color-indigo-600: oklch(51.1% 0.262 276.966);
- --color-gray-200: oklch(92.8% 0.006 264.531);
- --color-gray-500: oklch(55.1% 0.027 264.364);
- --color-gray-800: oklch(27.8% 0.033 256.848);
--color-zinc-50: oklch(98.5% 0 0);
--color-zinc-700: oklch(37% 0.013 285.805);
--color-neutral-900: oklch(20.5% 0 0);
@@ -288,9 +280,6 @@
.inset-x-0 {
inset-inline: calc(var(--spacing) * 0);
}
- .inset-y-0 {
- inset-block: calc(var(--spacing) * 0);
- }
.top-0 {
top: calc(var(--spacing) * 0);
}
@@ -306,9 +295,6 @@
.right-3 {
right: calc(var(--spacing) * 3);
}
- .left-0 {
- left: calc(var(--spacing) * 0);
- }
.left-1\/2 {
left: calc(1/2 * 100%);
}
@@ -351,21 +337,9 @@
.my-6 {
margin-block: calc(var(--spacing) * 6);
}
- .my-auto {
- margin-block: auto;
- }
- .mt-2 {
- margin-top: calc(var(--spacing) * 2);
- }
- .mt-3 {
- margin-top: calc(var(--spacing) * 3);
- }
.mt-4 {
margin-top: calc(var(--spacing) * 4);
}
- .mt-5 {
- margin-top: calc(var(--spacing) * 5);
- }
.mt-8 {
margin-top: calc(var(--spacing) * 8);
}
@@ -439,10 +413,6 @@
width: calc(var(--spacing) * 4);
height: calc(var(--spacing) * 4);
}
- .size-5 {
- width: calc(var(--spacing) * 5);
- height: calc(var(--spacing) * 5);
- }
.size-7 {
width: calc(var(--spacing) * 7);
height: calc(var(--spacing) * 7);
@@ -481,9 +451,6 @@
.h-14 {
height: calc(var(--spacing) * 14);
}
- .h-full {
- height: 100%;
- }
.max-h-64 {
max-height: calc(var(--spacing) * 64);
}
@@ -526,9 +493,6 @@
.w-80 {
width: calc(var(--spacing) * 80);
}
- .w-96 {
- width: calc(var(--spacing) * 96);
- }
.w-\[100px\] {
width: 100px;
}
@@ -604,9 +568,6 @@
--tw-translate-y: calc(var(--spacing) * 0.5);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
- .transform {
- transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
- }
.animate-pulse {
animation: var(--animate-pulse);
}
@@ -759,9 +720,6 @@
text-overflow: ellipsis;
white-space: nowrap;
}
- .overflow-hidden {
- overflow: hidden;
- }
.overflow-x-auto {
overflow-x: auto;
}
@@ -835,33 +793,24 @@
.bg-foreground {
background-color: var(--color-foreground);
}
- .bg-indigo-50 {
- background-color: var(--color-indigo-50);
- }
- .bg-indigo-600 {
- background-color: var(--color-indigo-600);
- }
.bg-muted {
background-color: var(--color-muted);
}
.bg-primary {
background-color: var(--color-primary);
}
- .bg-red-500 {
- background-color: var(--color-red-500);
- }
.bg-sidebar-primary {
background-color: var(--color-sidebar-primary);
}
- .bg-white {
- background-color: var(--color-white);
- }
.object-cover {
object-fit: cover;
}
.p-0 {
padding: calc(var(--spacing) * 0);
}
+ .p-1 {
+ padding: calc(var(--spacing) * 1);
+ }
.p-2 {
padding: calc(var(--spacing) * 2);
}
@@ -913,9 +862,6 @@
.pt-2 {
padding-top: calc(var(--spacing) * 2);
}
- .pt-5 {
- padding-top: calc(var(--spacing) * 5);
- }
.pb-4 {
padding-bottom: calc(var(--spacing) * 4);
}
@@ -1022,12 +968,6 @@
.text-foreground {
color: var(--color-foreground);
}
- .text-gray-500 {
- color: var(--color-gray-500);
- }
- .text-indigo-400 {
- color: var(--color-indigo-400);
- }
.text-muted-foreground {
color: var(--color-muted-foreground);
}
@@ -1037,9 +977,6 @@
.text-sidebar-primary-foreground {
color: var(--color-sidebar-primary-foreground);
}
- .text-white {
- color: var(--color-white);
- }
.text-zinc-50 {
color: var(--color-zinc-50);
}
@@ -1059,9 +996,6 @@
.opacity-0 {
opacity: 0%;
}
- .opacity-1 {
- opacity: 1%;
- }
.opacity-50 {
opacity: 50%;
}
@@ -1075,10 +1009,6 @@
--tw-shadow: 0 0 #0000;
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
- .shadow-sm {
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
- }
.shadow-xl {
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1112,12 +1042,6 @@
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
- .\[transition-behavior\:allow-discrete\] {
- transition-behavior: allow-discrete;
- }
- .transition-discrete {
- transition-behavior: allow-discrete;
- }
.duration-200 {
--tw-duration: 200ms;
transition-duration: 200ms;
@@ -1126,14 +1050,6 @@
--tw-duration: 400ms;
transition-duration: 400ms;
}
- .duration-500 {
- --tw-duration: 500ms;
- transition-duration: 500ms;
- }
- .ease-in-out {
- --tw-ease: var(--ease-in-out);
- transition-timing-function: var(--ease-in-out);
- }
.outline-none {
--tw-outline-style: none;
outline-style: none;
@@ -1235,13 +1151,6 @@
}
}
}
- .hover\:bg-indigo-500 {
- &:hover {
- @media (hover: hover) {
- background-color: var(--color-indigo-500);
- }
- }
- }
.hover\:bg-muted {
&:hover {
@media (hover: hover) {
@@ -1332,28 +1241,6 @@
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
}
- .focus-visible\:outline {
- &:focus-visible {
- outline-style: var(--tw-outline-style);
- outline-width: 1px;
- }
- }
- .focus-visible\:outline-2 {
- &:focus-visible {
- outline-style: var(--tw-outline-style);
- outline-width: 2px;
- }
- }
- .focus-visible\:outline-offset-2 {
- &:focus-visible {
- outline-offset: 2px;
- }
- }
- .focus-visible\:outline-indigo-600 {
- &:focus-visible {
- outline-color: var(--color-indigo-600);
- }
- }
.focus-visible\:outline-none {
&:focus-visible {
--tw-outline-style: none;
@@ -1395,26 +1282,6 @@
flex-direction: column;
}
}
- .sm\:col-start-2 {
- @media (width >= 40rem) {
- grid-column-start: 2;
- }
- }
- .sm\:mt-5 {
- @media (width >= 40rem) {
- margin-top: calc(var(--spacing) * 5);
- }
- }
- .sm\:w-full {
- @media (width >= 40rem) {
- width: 100%;
- }
- }
- .sm\:max-w-96 {
- @media (width >= 40rem) {
- max-width: calc(var(--spacing) * 96);
- }
- }
.sm\:max-w-\[425px\] {
@media (width >= 40rem) {
max-width: 425px;
@@ -1425,11 +1292,6 @@
gap: calc(var(--spacing) * 2.5);
}
}
- .sm\:p-6 {
- @media (width >= 40rem) {
- padding: calc(var(--spacing) * 6);
- }
- }
.sm\:text-3xl {
@media (width >= 40rem) {
font-size: var(--text-3xl);
@@ -1514,34 +1376,11 @@
background-color: var(--color-amber-950);
}
}
- .dark\:bg-gray-800 {
- &:is(.dark *) {
- background-color: var(--color-gray-800);
- }
- }
- .dark\:bg-indigo-600\/10 {
- &:is(.dark *) {
- background-color: color-mix(in srgb, oklch(51.1% 0.262 276.966) 10%, transparent);
- @supports (color: color-mix(in lab, red, red)) {
- background-color: color-mix(in oklab, var(--color-indigo-600) 10%, transparent);
- }
- }
- }
.dark\:text-amber-100 {
&:is(.dark *) {
color: var(--color-amber-100);
}
}
- .dark\:text-gray-200 {
- &:is(.dark *) {
- color: var(--color-gray-200);
- }
- }
- .dark\:text-indigo-600 {
- &:is(.dark *) {
- color: var(--color-indigo-600);
- }
- }
.dark\:checked\:border-blue-700 {
&:is(.dark *) {
&:checked {
@@ -1633,13 +1472,6 @@
}
}
}
- .starting\:open\:opacity-0 {
- @starting-style {
- &:is([open], :popover-open, :open) {
- opacity: 0%;
- }
- }
- }
.\[\&_a\]\:inline-block {
& a {
display: inline-block;
@@ -1804,11 +1636,6 @@
}
}
}
- .\[\&\:is\(\[open\]\,\:popover-open\)\]\:opacity-100 {
- &:is([open],:popover-open) {
- opacity: 100%;
- }
- }
.\[\&\>\[role\=img\]\]\:size-4 {
&>[role=img] {
width: calc(var(--spacing) * 4);
@@ -1848,13 +1675,6 @@
flex-shrink: 0;
}
}
- .\[\@starting-style\]\:\[\&\:is\(\[open\]\,\:popover-open\)\]\:opacity-0 {
- @starting-style {
- &:is([open],:popover-open) {
- opacity: 0%;
- }
- }
- }
}
:root {
--radius: 0.625rem;
@@ -2582,11 +2402,37 @@
}
@layer components {
.dialog {
- [role='dialog'] {
- visibility: hidden;
- position: fixed;
- inset: calc(var(--spacing) * 0);
- z-index: 50;
+ inset-block: calc(var(--spacing) * 0);
+ opacity: 0%;
+ transition-property: all;
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
+ transition-behavior: allow-discrete;
+ &:is([open],:popover-open) {
+ opacity: 100%;
+ &::backdrop {
+ opacity: 100%;
+ }
+ > article {
+ --tw-scale-x: 100%;
+ --tw-scale-y: 100%;
+ --tw-scale-z: 100%;
+ scale: var(--tw-scale-x) var(--tw-scale-y);
+ }
+ @starting-style {
+ opacity: 0%;
+ &::backdrop {
+ opacity: 0%;
+ }
+ > article {
+ --tw-scale-x: 95%;
+ --tw-scale-y: 95%;
+ --tw-scale-z: 95%;
+ scale: var(--tw-scale-x) var(--tw-scale-y);
+ }
+ }
+ }
+ &::backdrop {
background-color: color-mix(in srgb, #000 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
@@ -2595,94 +2441,83 @@
transition-property: all;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
- &:not([inert]), &[inert='false'] {
- visibility: visible;
- opacity: 100%;
- > article {
- visibility: visible;
- --tw-scale-x: 100%;
- --tw-scale-y: 100%;
- --tw-scale-z: 100%;
- scale: var(--tw-scale-x) var(--tw-scale-y);
- opacity: 100%;
+ transition-behavior: allow-discrete;
+ }
+ > article {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ z-index: 50;
+ display: flex;
+ max-height: calc(100% - 2rem);
+ width: 100%;
+ max-width: calc(100% - 2rem);
+ --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+ translate: var(--tw-translate-x) var(--tw-translate-y);
+ --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+ translate: var(--tw-translate-x) var(--tw-translate-y);
+ flex-direction: column;
+ gap: calc(var(--spacing) * 4);
+ border-radius: var(--radius-lg);
+ border-style: var(--tw-border-style);
+ border-width: 1px;
+ background-color: var(--color-background);
+ padding: calc(var(--spacing) * 6);
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+ @media (width >= 40rem) {
+ max-width: var(--container-lg);
+ }
+ --tw-scale-x: 95%;
+ --tw-scale-y: 95%;
+ --tw-scale-z: 95%;
+ scale: var(--tw-scale-x) var(--tw-scale-y);
+ transition-property: all;
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
+ > header {
+ display: flex;
+ flex-direction: column;
+ gap: calc(var(--spacing) * 2);
+ text-align: center;
+ @media (width >= 40rem) {
+ text-align: left;
+ }
+ > h2 {
+ font-size: var(--text-lg);
+ line-height: var(--tw-leading, var(--text-lg--line-height));
+ --tw-leading: 1;
+ line-height: 1;
+ --tw-font-weight: var(--font-weight-semibold);
+ font-weight: var(--font-weight-semibold);
+ }
+ > p {
+ font-size: var(--text-sm);
+ line-height: var(--tw-leading, var(--text-sm--line-height));
+ color: var(--color-muted-foreground);
}
}
- > article {
- visibility: hidden;
- position: fixed;
- top: 50%;
- left: 50%;
- z-index: 50;
+ > section {
+ margin-inline: calc(var(--spacing) * -6);
+ flex: 1;
+ padding-inline: calc(var(--spacing) * 6);
+ }
+ > footer {
display: flex;
- max-height: calc(100% - 2rem);
- width: 100%;
- max-width: calc(100% - 2rem);
- --tw-translate-x: -50%;
- translate: var(--tw-translate-x) var(--tw-translate-y);
- --tw-translate-y: -50%;
- translate: var(--tw-translate-x) var(--tw-translate-y);
- --tw-scale-x: 95%;
- --tw-scale-y: 95%;
- --tw-scale-z: 95%;
- scale: var(--tw-scale-x) var(--tw-scale-y);
- flex-direction: column;
- gap: calc(var(--spacing) * 4);
- border-radius: var(--radius-lg);
- border-style: var(--tw-border-style);
- border-width: 1px;
- background-color: var(--color-background);
- padding: calc(var(--spacing) * 6);
- opacity: 0%;
- --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
- transition-property: all;
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
- transition-duration: var(--tw-duration, var(--default-transition-duration));
+ flex-direction: column-reverse;
+ gap: calc(var(--spacing) * 2);
@media (width >= 40rem) {
- max-width: var(--container-lg);
+ flex-direction: row;
}
- > header {
- display: flex;
- flex-direction: column;
- gap: calc(var(--spacing) * 2);
- text-align: center;
- @media (width >= 40rem) {
- text-align: left;
- }
- > h2 {
- font-size: var(--text-lg);
- line-height: var(--tw-leading, var(--text-lg--line-height));
- --tw-leading: 1;
- line-height: 1;
- --tw-font-weight: var(--font-weight-semibold);
- font-weight: var(--font-weight-semibold);
- }
- > p {
- font-size: var(--text-sm);
- line-height: var(--tw-leading, var(--text-sm--line-height));
- color: var(--color-muted-foreground);
- }
- }
- > section {
- margin-inline: calc(var(--spacing) * -6);
- flex: 1;
- padding-inline: calc(var(--spacing) * 6);
- }
- > footer {
- display: flex;
- flex-direction: column-reverse;
- gap: calc(var(--spacing) * 2);
- @media (width >= 40rem) {
- flex-direction: row;
- }
- @media (width >= 40rem) {
- justify-content: flex-end;
- }
+ @media (width >= 40rem) {
+ justify-content: flex-end;
}
+ }
+ > form[method='dialog'] {
+ position: absolute;
+ top: calc(var(--spacing) * 4);
+ right: calc(var(--spacing) * 4);
> button {
- position: absolute;
- top: calc(var(--spacing) * 4);
- right: calc(var(--spacing) * 4);
border-radius: var(--radius-xs);
opacity: 70%;
--tw-ring-offset-color: var(--color-background);
@@ -2876,100 +2711,11 @@
}
}
@layer components {
- .popover {
- position: relative;
- display: inline-flex;
- > [data-popover] {
- visibility: visible;
- position: absolute;
- z-index: 50;
- width: max-content;
- min-width: 100%;
- --tw-scale-x: 100%;
- --tw-scale-y: 100%;
- --tw-scale-z: 100%;
- scale: var(--tw-scale-x) var(--tw-scale-y);
- overflow-x: hidden;
- overflow-y: auto;
- border-radius: var(--radius-md);
- border-style: var(--tw-border-style);
- border-width: 1px;
- background-color: var(--color-popover);
+ div.select {
+ [popover].popover {
+ min-width: anchor-size(width);
padding: calc(var(--spacing) * 1);
- color: var(--color-popover-foreground);
- opacity: 100%;
- --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
- transition-property: all;
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
- transition-duration: var(--tw-duration, var(--default-transition-duration));
- &[aria-hidden='true'] {
- visibility: hidden;
- --tw-scale-x: 95%;
- --tw-scale-y: 95%;
- --tw-scale-z: 95%;
- scale: var(--tw-scale-x) var(--tw-scale-y);
- opacity: 0%;
- &:not([data-side]), &[data-side='bottom'] {
- --tw-translate-y: calc(var(--spacing) * -2);
- translate: var(--tw-translate-x) var(--tw-translate-y);
- }
- &[data-side='top'] {
- --tw-translate-y: calc(var(--spacing) * 2);
- translate: var(--tw-translate-x) var(--tw-translate-y);
- }
- &[data-side='left'] {
- --tw-translate-x: calc(var(--spacing) * 2);
- translate: var(--tw-translate-x) var(--tw-translate-y);
- }
- &[data-side='right'] {
- --tw-translate-x: calc(var(--spacing) * -2);
- translate: var(--tw-translate-x) var(--tw-translate-y);
- }
- }
- &:not([data-side]), &[data-side='bottom'] {
- top: 100%;
- margin-top: calc(var(--spacing) * 1);
- }
- &[data-side='top'] {
- bottom: 100%;
- margin-bottom: calc(var(--spacing) * 1);
- }
- &[data-side='left'] {
- right: 100%;
- margin-right: calc(var(--spacing) * 1);
- }
- &[data-side='right'] {
- left: 100%;
- margin-left: calc(var(--spacing) * 1);
- }
- &:not([data-side]), &[data-side='bottom'], &[data-side='top'] {
- &:not([data-align]), &[data-align='start'] {
- left: calc(var(--spacing) * 0);
- }
- &[data-align='end'] {
- right: calc(var(--spacing) * 0);
- }
- &[data-align='center'] {
- left: calc(1/2 * 100%);
- --tw-translate-x: calc(calc(1/2 * 100%) * -1);
- translate: var(--tw-translate-x) var(--tw-translate-y);
- }
- }
- &[data-side='left'], &[data-side='right'] {
- &:not([data-align]), &[data-align='start'] {
- top: calc(var(--spacing) * 0);
- }
- &[data-align='end'] {
- bottom: calc(var(--spacing) * 0);
- }
- &[data-align='center'] {
- top: calc(1/2 * 100%);
- --tw-translate-y: calc(calc(1/2 * 100%) * -1);
- translate: var(--tw-translate-x) var(--tw-translate-y);
- }
- }
- [role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'], [role='option'] {
+ [role='option'] {
position: relative;
display: flex;
width: 100%;
@@ -3017,33 +2763,6 @@
& svg {
color: var(--color-muted-foreground);
}
- }
- [role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'] {
- &:hover {
- @media (hover: hover) {
- background-color: var(--color-accent);
- }
- }
- &:hover {
- @media (hover: hover) {
- color: var(--color-accent-foreground);
- }
- }
- &:focus-visible {
- background-color: var(--color-accent);
- }
- &:focus-visible {
- color: var(--color-accent-foreground);
- }
- }
- [role='option'] {
- padding-right: calc(var(--spacing) * 7.5);
- &[data-focus] {
- background-color: var(--color-accent);
- }
- &[data-focus] {
- color: var(--color-accent-foreground);
- }
&[aria-selected='true'] {
background-image: var(--check-icon);
background-size: 0.875rem;
@@ -3051,15 +2770,6 @@
background-repeat: no-repeat;
}
}
- [role='menu'] [role='heading'] {
- display: flex;
- padding-inline: calc(var(--spacing) * 2);
- padding-block: calc(var(--spacing) * 1.5);
- font-size: var(--text-sm);
- line-height: var(--tw-leading, var(--text-sm--line-height));
- --tw-font-weight: var(--font-weight-medium);
- font-weight: var(--font-weight-medium);
- }
[role='listbox'] [role='heading'] {
display: flex;
padding-inline: calc(var(--spacing) * 2);
@@ -3141,6 +2851,219 @@
content: var(--tw-content);
}
}
+ &:not([data-select-initialized]) [role='option']:hover, &[data-select-initialized] [role='option'].active, &[data-select-initialized] [role='option']:focus-visible {
+ background-color: var(--color-accent);
+ color: var(--color-accent-foreground);
+ }
+ }
+ .dropdown-menu {
+ [popover].popover {
+ padding: calc(var(--spacing) * 1);
+ min-width: anchor-size(width);
+ [role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'] {
+ position: relative;
+ display: flex;
+ width: 100%;
+ cursor: default;
+ align-items: center;
+ gap: calc(var(--spacing) * 2);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ border-radius: var(--radius-sm);
+ padding-inline: calc(var(--spacing) * 2);
+ padding-block: calc(var(--spacing) * 1.5);
+ font-size: var(--text-sm);
+ line-height: var(--tw-leading, var(--text-sm--line-height));
+ --tw-outline-style: none;
+ outline-style: none;
+ @media (forced-colors: active) {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+ }
+ -webkit-user-select: none;
+ user-select: none;
+ &:disabled {
+ pointer-events: none;
+ }
+ &:disabled {
+ opacity: 50%;
+ }
+ &[aria-disabled="true"] {
+ pointer-events: none;
+ }
+ &[aria-disabled="true"] {
+ opacity: 50%;
+ }
+ &[aria-hidden="true"] {
+ display: none;
+ }
+ & svg {
+ width: calc(var(--spacing) * 4);
+ height: calc(var(--spacing) * 4);
+ }
+ & svg {
+ flex-shrink: 0;
+ }
+ & svg {
+ color: var(--color-muted-foreground);
+ }
+ &:hover {
+ @media (hover: hover) {
+ background-color: var(--color-accent);
+ }
+ }
+ &:hover {
+ @media (hover: hover) {
+ color: var(--color-accent-foreground);
+ }
+ }
+ &:focus-visible {
+ background-color: var(--color-accent);
+ }
+ &:focus-visible {
+ color: var(--color-accent-foreground);
+ }
+ &.active {
+ background-color: var(--color-accent);
+ color: var(--color-accent-foreground);
+ }
+ }
+ [role='menu'] [role='heading'] {
+ display: flex;
+ padding-inline: calc(var(--spacing) * 2);
+ padding-block: calc(var(--spacing) * 1.5);
+ font-size: var(--text-sm);
+ line-height: var(--tw-leading, var(--text-sm--line-height));
+ --tw-font-weight: var(--font-weight-medium);
+ font-weight: var(--font-weight-medium);
+ }
+ [role='separator'] {
+ margin-inline: calc(var(--spacing) * -1);
+ margin-block: calc(var(--spacing) * 1);
+ border-color: var(--color-border);
+ }
+ }
+ }
+}
+@layer components {
+ [popover].popover {
+ visibility: visible;
+ position: absolute;
+ inset: auto;
+ z-index: 50;
+ width: max-content;
+ --tw-scale-x: 95%;
+ --tw-scale-y: 95%;
+ --tw-scale-z: 95%;
+ scale: var(--tw-scale-x) var(--tw-scale-y);
+ overflow-x: hidden;
+ overflow-y: auto;
+ border-radius: var(--radius-md);
+ border-style: var(--tw-border-style);
+ border-width: 1px;
+ background-color: var(--color-popover);
+ padding: calc(var(--spacing) * 4);
+ color: var(--color-popover-foreground);
+ opacity: 0%;
+ --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+ transition-property: all;
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
+ transition-behavior: allow-discrete;
+ &:not([data-side]), &[data-side='bottom'] {
+ --tw-translate-y: calc(var(--spacing) * -2);
+ translate: var(--tw-translate-x) var(--tw-translate-y);
+ }
+ &[data-side='top'] {
+ --tw-translate-y: calc(var(--spacing) * 2);
+ translate: var(--tw-translate-x) var(--tw-translate-y);
+ }
+ &[data-side='left'] {
+ --tw-translate-x: calc(var(--spacing) * 2);
+ translate: var(--tw-translate-x) var(--tw-translate-y);
+ }
+ &[data-side='right'] {
+ --tw-translate-x: calc(var(--spacing) * -2);
+ translate: var(--tw-translate-x) var(--tw-translate-y);
+ }
+ &:not([data-side]), &[data-side='bottom'] {
+ top: anchor(bottom);
+ margin-top: calc(var(--spacing) * 1);
+ }
+ &[data-side='top'] {
+ bottom: anchor(top);
+ margin-bottom: calc(var(--spacing) * 1);
+ }
+ &[data-side='left'] {
+ right: anchor(left);
+ margin-right: calc(var(--spacing) * 1);
+ }
+ &[data-side='right'] {
+ left: anchor(right);
+ margin-left: calc(var(--spacing) * 1);
+ }
+ &:not([data-side]), &[data-side='bottom'], &[data-side='top'] {
+ &:not([data-align]), &[data-align='start'] {
+ left: anchor(left);
+ }
+ &[data-align='end'] {
+ right: anchor(right);
+ }
+ &[data-align='center'] {
+ left: anchor(center);
+ --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+ translate: var(--tw-translate-x) var(--tw-translate-y);
+ }
+ }
+ &[data-side='left'], &[data-side='right'] {
+ &:not([data-align]), &[data-align='start'] {
+ top: anchor(top);
+ }
+ &[data-align='end'] {
+ bottom: anchor(bottom);
+ }
+ &[data-align='center'] {
+ top: anchor(center);
+ --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+ translate: var(--tw-translate-x) var(--tw-translate-y);
+ }
+ }
+ &:is(:popover-open) {
+ --tw-translate-x: calc(var(--spacing) * 0);
+ translate: var(--tw-translate-x) var(--tw-translate-y);
+ --tw-translate-y: calc(var(--spacing) * 0);
+ translate: var(--tw-translate-x) var(--tw-translate-y);
+ --tw-scale-x: 100%;
+ --tw-scale-y: 100%;
+ --tw-scale-z: 100%;
+ scale: var(--tw-scale-x) var(--tw-scale-y);
+ opacity: 100%;
+ @starting-style {
+ --tw-scale-x: 95%;
+ --tw-scale-y: 95%;
+ --tw-scale-z: 95%;
+ scale: var(--tw-scale-x) var(--tw-scale-y);
+ opacity: 0%;
+ &:not([data-side]), &[data-side='bottom'] {
+ --tw-translate-y: calc(var(--spacing) * -2);
+ translate: var(--tw-translate-x) var(--tw-translate-y);
+ }
+ &[data-side='top'] {
+ --tw-translate-y: calc(var(--spacing) * 2);
+ translate: var(--tw-translate-x) var(--tw-translate-y);
+ }
+ &[data-side='left'] {
+ --tw-translate-x: calc(var(--spacing) * 2);
+ translate: var(--tw-translate-x) var(--tw-translate-y);
+ }
+ &[data-side='right'] {
+ --tw-translate-x: calc(var(--spacing) * -2);
+ translate: var(--tw-translate-x) var(--tw-translate-y);
+ }
+ }
+ }
}
}
@layer components {
@@ -3333,7 +3256,7 @@
}
}
@layer components {
- .form select, .select {
+ .form select, select.select {
display: flex;
height: calc(var(--spacing) * 9);
width: fit-content;
@@ -3422,7 +3345,7 @@
}
}
.sidebar {
- &[data-uninitialized] {
+ &:not([data-sidebar-initialized]) {
@media (width < 48rem) {
display: none;
}
@@ -3464,6 +3387,15 @@
width: var(--sidebar-width);
}
}
+ & + * {
+ transition-property: margin;
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
+ --tw-duration: 300ms;
+ transition-duration: 300ms;
+ --tw-ease: var(--ease-in-out);
+ transition-timing-function: var(--ease-in-out);
+ }
&:not([data-side]), &[data-side=left] {
nav {
left: calc(var(--spacing) * 0);
@@ -3472,13 +3404,6 @@
}
& + * {
position: relative;
- transition-property: margin;
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
- transition-duration: var(--tw-duration, var(--default-transition-duration));
- --tw-duration: 300ms;
- transition-duration: 300ms;
- --tw-ease: var(--ease-in-out);
- transition-timing-function: var(--ease-in-out);
@media (width >= 48rem) {
margin-left: var(--sidebar-width);
}
@@ -3503,13 +3428,6 @@
}
& + * {
position: relative;
- transition-property: margin;
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
- transition-duration: var(--tw-duration, var(--default-transition-duration));
- --tw-duration: 300ms;
- transition-duration: 300ms;
- --tw-ease: var(--ease-in-out);
- transition-timing-function: var(--ease-in-out);
@media (width >= 48rem) {
margin-right: var(--sidebar-width);
}
@@ -4858,26 +4776,6 @@
inherits: false;
initial-value: 0;
}
-@property --tw-rotate-x {
- syntax: "*";
- inherits: false;
-}
-@property --tw-rotate-y {
- syntax: "*";
- inherits: false;
-}
-@property --tw-rotate-z {
- syntax: "*";
- inherits: false;
-}
-@property --tw-skew-x {
- syntax: "*";
- inherits: false;
-}
-@property --tw-skew-y {
- syntax: "*";
- inherits: false;
-}
@property --tw-space-y-reverse {
syntax: "*";
inherits: false;
@@ -5052,15 +4950,15 @@
syntax: "*";
inherits: false;
}
-@property --tw-ease {
- syntax: "*";
- inherits: false;
-}
@property --tw-content {
syntax: "*";
initial-value: "";
inherits: false;
}
+@property --tw-ease {
+ syntax: "*";
+ inherits: false;
+}
@property --tw-scale-x {
syntax: "*";
inherits: false;
@@ -5092,11 +4990,6 @@
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-translate-z: 0;
- --tw-rotate-x: initial;
- --tw-rotate-y: initial;
- --tw-rotate-z: initial;
- --tw-skew-x: initial;
- --tw-skew-y: initial;
--tw-space-y-reverse: 0;
--tw-space-x-reverse: 0;
--tw-border-style: solid;
@@ -5137,8 +5030,8 @@
--tw-drop-shadow-alpha: 100%;
--tw-drop-shadow-size: initial;
--tw-duration: initial;
- --tw-ease: initial;
--tw-content: "";
+ --tw-ease: initial;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scale-z: 1;
diff --git a/docs/src/components/alert-dialog.njk b/docs/src/components/alert-dialog.njk
index 49d6cf2..5261757 100644
--- a/docs/src/components/alert-dialog.njk
+++ b/docs/src/components/alert-dialog.njk
@@ -18,8 +18,8 @@ toc:
{% set code_html %}
{% set footer %}
-
-
+
+
{% endset %}
{{ dialog(
id="alert-dialog",
@@ -105,8 +105,8 @@ document.addEventListener('alpine:init', () => {
{% set raw_code %}{% raw %}{% set footer %}
-
-
+
+
{% endset %}
{{ dialog(
id="demo-alert-dialog",
diff --git a/docs/src/components/dialog.njk b/docs/src/components/dialog.njk
index 8006d1d..eabe3d6 100644
--- a/docs/src/components/dialog.njk
+++ b/docs/src/components/dialog.njk
@@ -23,8 +23,8 @@ toc:
{% set code_html %}
{% set footer %}
-
-
+
+
{% endset %}
{% call dialog(
id="demo-dialog-edit-profile",
@@ -175,7 +175,7 @@ document.addEventListener('alpine:init', () => {
{% set code %}
{% set footer %}
-
+
{% endset %}
{% call dialog(
id="dialog-example",
diff --git a/docs/src/components/popover.njk b/docs/src/components/popover.njk
index 8f68e8d..904e8d4 100644
--- a/docs/src/components/popover.njk
+++ b/docs/src/components/popover.njk
@@ -21,8 +21,7 @@ toc:
id="demo-popover",
trigger="Open popover",
trigger_attrs={"class": "btn-outline"},
- content_attrs={"class": "w-80 p-4"},
- register_on=["alpine:init", "htmx:afterSwap"]
+ popover_attrs={"class": "w-80"}
) %}
- Fruits
-
-{% endcall %}
+ items=[
+ {
+ type: "group",
+ label: "Fruits",
+ items: [
+ { type: "item", value: "apple", label: "Apple" },
+ { type: "item", value: "banana", label: "Banana" },
+ { type: "item", value: "blueberry", label: "Blueberry" },
+ { type: "item", value: "pineapple", label: "Grapes" },
+ { type: "item", value: "pineapple", label: "Pineapple" }
+ ]
+ }
+ ]
+) }}
{% endset %}
{% set code_script %}
-
{% endset %}
{{ code_preview("select", code_script | prettyHtml ~ code_html | prettyHtml) }}
@@ -153,16 +149,21 @@ document.addEventListener('alpine:init', () => {
Apple
- Banana
- Blueberry
- Grapes
- Pineapple
-
- Fruits
-
-{% endcall %}{% endraw %}{% endset %}
+{% set raw_code %}{% raw %}{{ select(
+ items=[
+ {
+ type: "group",
+ label: "Fruits",
+ items: [
+ { type: "item", value: "apple", label: "Apple" },
+ { type: "item", value: "banana", label: "Banana" },
+ { type: "item", value: "blueberry", label: "Blueberry" },
+ { type: "item", value: "pineapple", label: "Grapes" },
+ { type: "item", value: "pineapple", label: "Pineapple" }
+ ]
+ }
+ ]
+) }}{% endraw %}{% endset %}
{{ code_block(raw_code, "jinja") }}
Apple
- Banana
- Blueberry
- Grapes
- Pineapple
-Examples
diff --git a/docs/src/components/test.njk b/docs/src/components/test.njk new file mode 100644 index 0000000..d0331e7 --- /dev/null +++ b/docs/src/components/test.njk @@ -0,0 +1,17 @@ +--- +layout: layouts/base.njk +--- + + + +
+ SOMETHING
+ SOMETHING
+ SOMETHING
+ SOMETHING
+ SOMETHING
+
+
+
\ No newline at end of file
diff --git a/docs/src/components/toast.njk b/docs/src/components/toast.njk
index 29acaf9..529fd14 100644
--- a/docs/src/components/toast.njk
+++ b/docs/src/components/toast.njk
@@ -84,13 +84,13 @@ toc:
{% set code_script %}
-
+ #}
{% endset %}
{% set code_html_toaster %}{{ toaster() }}{% endset %}
diff --git a/docs/src/index.njk b/docs/src/index.njk
index 9ce2570..e36248b 100644
--- a/docs/src/index.njk
+++ b/docs/src/index.njk
@@ -32,16 +32,17 @@ layout: layouts/layout.njk
m@example.com
Viewer
- Developer
- Billing
- Owner
- {% endcall %}
+ popover_attrs={"data-align": "end"},
+ items=[
+ { type: "item", value: "viewer", label: "Viewer" },
+ { type: "item", value: "developer", label: "Developer" },
+ { type: "item", value: "billing", label: "Billing" },
+ { type: "item", value: "owner", label: "Owner" }
+ ]
+ ) }}
diff --git a/src/css/basecoat.css b/src/css/basecoat.css
index 8390957..64e5f8e 100644
--- a/src/css/basecoat.css
+++ b/src/css/basecoat.css
@@ -446,37 +446,56 @@
/* Dialog */
@layer components {
.dialog {
- [role='dialog'] {
- @apply fixed inset-0 z-50 bg-black/50 opacity-0 invisible transition-all;
+ @apply inset-y-0 opacity-0 transition-all transition-discrete;
- &:not([inert]),
- &[inert='false'] {
- @apply opacity-100 visible;
- > article {
- @apply opacity-100 scale-100 visible;
- }
+ &:is([open],:popover-open) {
+ @apply opacity-100;
+
+ &::backdrop {
+ @apply opacity-100;
}
> article {
- @apply bg-background fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg opacity-0 scale-95 invisible transition-all max-h-[calc(100%-2rem)];
+ @apply scale-100;
+ }
- > header {
- @apply flex flex-col gap-2 text-center sm:text-left;
+ @starting-style {
+ @apply opacity-0;
- > h2 {
- @apply text-lg leading-none font-semibold;
- }
- > p {
- @apply text-muted-foreground text-sm;
- }
+ &::backdrop {
+ @apply opacity-0;
}
- > section {
- @apply flex-1 -mx-6 px-6;
+ > article {
+ @apply scale-95;
}
- > footer {
- @apply flex flex-col-reverse gap-2 sm:flex-row sm:justify-end;
+ }
+ }
+ &::backdrop {
+ @apply bg-black/50 opacity-0 transition-all transition-discrete;
+ }
+ > article {
+ @apply bg-background fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg max-h-[calc(100%-2rem)];
+ @apply transition-all scale-95;
+
+ > header {
+ @apply flex flex-col gap-2 text-center sm:text-left;
+
+ > h2 {
+ @apply text-lg leading-none font-semibold;
}
+ > p {
+ @apply text-muted-foreground text-sm;
+ }
+ }
+ > section {
+ @apply flex-1 -mx-6 px-6;
+ }
+ > footer {
+ @apply flex flex-col-reverse gap-2 sm:flex-row sm:justify-end;
+ }
+ > form[method='dialog'] {
+ @apply absolute top-4 right-4;
> button {
- @apply ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
+ @apply ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
}
}
}
@@ -531,7 +550,9 @@
}
/* Popover */
-@layer components {
+@import "./components/popover.css";
+
+/* @layer components {
.popover {
@apply relative inline-flex;
@@ -625,7 +646,7 @@
[role='separator'] {
@apply border-border -mx-1 my-1;
}
- /* Combobox */
+ // Combobox
> header {
@apply flex h-9 items-center gap-2 border-b px-3 -mx-1 -mt-1 mb-1;
@@ -647,7 +668,7 @@
}
}
}
-}
+} */
/* Radio */
@layer components {
@@ -713,7 +734,7 @@
/* Select */
@layer components {
.form select,
- .select {
+ select.select {
@apply appearance-none border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent pl-3 pr-9 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-9;
@apply bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0.75rem] bg-size-[1rem];
@@ -726,7 +747,7 @@
/* Sidebar */
.sidebar {
- &[data-uninitialized] {
+ &:not([data-sidebar-initialized]) {
@apply max-md:hidden;
}
&:not([aria-hidden]),
@@ -734,7 +755,10 @@
@apply max-md:bg-black/50 max-md:fixed max-md:inset-0 max-md:z-40;
}
nav {
- @apply bg-sidebar text-sidebar-foreground flex flex-col w-(--sidebar-mobile-width) md:w-(--sidebar-width) fixed inset-y-0 transition-transform ease-in-out duration-300 z-50;
+ @apply bg-sidebar text-sidebar-foreground flex flex-col w-(--sidebar-mobile-width) md:w-(--sidebar-width) fixed inset-y-0 z-50 transition-transform ease-in-out duration-300;
+ }
+ & + * {
+ @apply transition-[margin] ease-in-out duration-300;
}
&:not([data-side]),
&[data-side=left] {
@@ -742,7 +766,7 @@
@apply left-0 border-r;
}
& + * {
- @apply relative md:ml-(--sidebar-width) transition-[margin] ease-in-out duration-300;
+ @apply relative md:ml-(--sidebar-width);
}
&[aria-hidden=true] {
nav {
@@ -758,7 +782,7 @@
@apply right-0 border-l;
}
& + * {
- @apply relative md:mr-(--sidebar-width) transition-[margin] ease-in-out duration-300;
+ @apply relative md:mr-(--sidebar-width);
}
&[aria-hidden=true] {
nav {
diff --git a/src/css/components/dialog.css b/src/css/components/dialog.css
new file mode 100644
index 0000000..5951ed6
--- /dev/null
+++ b/src/css/components/dialog.css
@@ -0,0 +1,59 @@
+@layer components {
+ .dialog {
+ @apply inset-y-0 opacity-0 transition-all transition-discrete;
+
+ &:is([open],:popover-open) {
+ @apply opacity-100;
+
+ &::backdrop {
+ @apply opacity-100;
+ }
+ > article {
+ @apply scale-100;
+ }
+
+ @starting-style {
+ @apply opacity-0;
+
+ &::backdrop {
+ @apply opacity-0;
+ }
+ > article {
+ @apply scale-95;
+ }
+ }
+ }
+
+ &::backdrop {
+ @apply bg-black/50 opacity-0 transition-all transition-discrete;
+ }
+
+ > article {
+ @apply bg-background fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg max-h-[calc(100%-2rem)];
+ @apply transition-all scale-95;
+
+ > header {
+ @apply flex flex-col gap-2 text-center sm:text-left;
+
+ > h2 {
+ @apply text-lg leading-none font-semibold;
+ }
+ > p {
+ @apply text-muted-foreground text-sm;
+ }
+ }
+ > section {
+ @apply flex-1 -mx-6 px-6;
+ }
+ > footer {
+ @apply flex flex-col-reverse gap-2 sm:flex-row sm:justify-end;
+ }
+ > form[method='dialog'] {
+ @apply absolute top-4 right-4;
+ > button {
+ @apply ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/css/components/popover.css b/src/css/components/popover.css
new file mode 100644
index 0000000..d53fa97
--- /dev/null
+++ b/src/css/components/popover.css
@@ -0,0 +1,155 @@
+@layer components {
+ div.select {
+ [popover].popover {
+ @apply p-1 min-w-[anchor-size(width)];
+
+
+
+ [role='option'] {
+ @apply aria-hidden:hidden [&_svg]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg]:shrink-0 [&_svg]:size-4 aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate;
+
+ &[aria-selected='true'] {
+ @apply bg-[image:var(--check-icon)] bg-no-repeat bg-position-[center_right_0.5rem] bg-size-[0.875rem];
+ }
+ }
+ [role='listbox'] [role='heading'] {
+ @apply flex text-muted-foreground px-2 py-1.5 text-xs;
+ }
+ [role='listbox'] [role='group']:not(:has([role='option']:not([aria-hidden='true']))) {
+ @apply hidden;
+ }
+ [role='separator'] {
+ @apply border-border -mx-1 my-1;
+ }
+ > header {
+ @apply flex h-9 items-center gap-2 border-b px-3 -mx-1 -mt-1 mb-1;
+
+ svg {
+ @apply size-4 shrink-0 opacity-50;
+ }
+ input[role='combobox'] {
+ @apply placeholder:text-muted-foreground flex h-10 flex-1 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50 min-w-0;
+ }
+ }
+ [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before {
+ @apply flex items-center justify-center p-6 text-sm truncate;
+ }
+ [role='listbox'][data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before {
+ @apply content-[attr(data-empty)];
+ }
+ [role='listbox']:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before {
+ @apply content-['No_results_found'];
+ }
+ }
+
+ &:not([data-select-initialized]) [role='option']:hover,
+ &[data-select-initialized] [role='option'].active,
+ &[data-select-initialized] [role='option']:focus-visible {
+ @apply bg-accent text-accent-foreground;
+ }
+ }
+ .dropdown-menu {
+ [popover].popover {
+ @apply p-1;
+ min-width: anchor-size(width);
+
+ [role='menuitem'],
+ [role='menuitemcheckbox'],
+ [role='menuitemradio'] {
+ @apply aria-hidden:hidden [&_svg]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg]:shrink-0 [&_svg]:size-4 aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate;
+ @apply focus-visible:bg-accent focus-visible:text-accent-foreground hover:bg-accent hover:text-accent-foreground;
+ &.active {
+ @apply bg-accent text-accent-foreground;
+ }
+ }
+ [role='menu'] [role='heading'] {
+ @apply flex px-2 py-1.5 text-sm font-medium;
+ }
+ [role='separator'] {
+ @apply border-border -mx-1 my-1;
+ }
+ }
+ }
+}
+
+@layer components {
+ [popover].popover {
+ @apply absolute inset-auto bg-popover text-popover-foreground overflow-x-hidden overflow-y-auto p-4 rounded-md border shadow-md z-50 visible opacity-0 scale-95 w-max transition-all transition-discrete;
+
+ &:not([data-side]),
+ &[data-side='bottom'] {
+ @apply -translate-y-2;
+ }
+ &[data-side='top'] {
+ @apply translate-y-2;
+ }
+ &[data-side='left'] {
+ @apply translate-x-2;
+ }
+ &[data-side='right'] {
+ @apply -translate-x-2;
+ }
+ &:not([data-side]),
+ &[data-side='bottom'] {
+ @apply mt-1 top-[anchor(bottom)];
+ }
+ &[data-side='top'] {
+ @apply mb-1 bottom-[anchor(top)];
+ }
+ &[data-side='left'] {
+ @apply mr-1 right-[anchor(left)];
+ }
+ &[data-side='right'] {
+ @apply ml-1 left-[anchor(right)];
+ }
+ &:not([data-side]),
+ &[data-side='bottom'],
+ &[data-side='top'] {
+ &:not([data-align]),
+ &[data-align='start'] {
+ @apply left-[anchor(left)];
+ }
+ &[data-align='end'] {
+ @apply right-[anchor(right)];
+ }
+ &[data-align='center'] {
+ @apply left-[anchor(center)] -translate-x-1/2;
+ }
+ }
+ &[data-side='left'],
+ &[data-side='right'] {
+ &:not([data-align]),
+ &[data-align='start'] {
+ @apply top-[anchor(top)];
+ }
+ &[data-align='end'] {
+ @apply bottom-[anchor(bottom)];
+ }
+ &[data-align='center'] {
+ @apply top-[anchor(center)] -translate-y-1/2;
+ }
+ }
+ &:is(:popover-open) {
+ @apply opacity-100 scale-100 translate-x-0 translate-y-0;
+
+ @starting-style {
+ @apply opacity-0 scale-95;
+
+ &:not([data-side]),
+ &[data-side='bottom'] {
+ @apply -translate-y-2;
+ }
+ &[data-side='top'] {
+ @apply translate-y-2;
+ }
+ &[data-side='left'] {
+ @apply translate-x-2;
+ }
+ &[data-side='right'] {
+ @apply -translate-x-2;
+ }
+ }
+ }
+
+ }
+}
\ No newline at end of file
diff --git a/src/js/dialog.js b/src/js/archived/dialog.js
similarity index 100%
rename from src/js/dialog.js
rename to src/js/archived/dialog.js
diff --git a/src/js/archived/dropdown-menu.js b/src/js/archived/dropdown-menu.js
new file mode 100644
index 0000000..449a107
--- /dev/null
+++ b/src/js/archived/dropdown-menu.js
@@ -0,0 +1,91 @@
+window.basecoat = window.basecoat || {};
+window.basecoat.registerDropdownMenu = function(Alpine) {
+ if (Alpine.components && Alpine.components.dropdownMenu) return;
+
+ Alpine.data('dropdownMenu', () => ({
+ open: false,
+ focusedIndex: null,
+ menuItems: [],
+
+ init() {
+ this.$nextTick(() => {
+ this.menuItems = Array.from(this.$el.querySelectorAll('[role=menuitem]:not([disabled]),[role=menuitemcheckbox]:not([disabled]),[role=menuitemradio]:not([disabled])'));
+ });
+ },
+ focusMenuitem() {
+ if (this.menuItems.length === 0) return;
+
+ if (this.focusedIndex >= this.menuItems.length) {
+ this.focusedIndex = this.menuItems.length - 1;
+ } else if (this.focusedIndex < 0 || this.focusedIndex === null) {
+ this.focusedIndex = 0;
+ }
+ this.menuItems.forEach(item => item.blur());
+ this.menuItems[this.focusedIndex].focus();
+ },
+ moveMenuitemFocus(delta) {
+ if (this.menuItems.length === 0) return;
+
+ let wasOpen = this.open;
+ if (!this.open) {
+ this.open = true;
+ this.focusedIndex = 0;
+ } else {
+ this.focusedIndex = this.focusedIndex === null
+ ? 0
+ : this.focusedIndex + delta;
+ }
+
+ if (wasOpen) {
+ this.focusMenuitem();
+ } else {
+ setTimeout(() => this.focusMenuitem(), 50);
+ }
+ },
+ handleMenuitemClick(event) {
+ const menuitem = event.target.closest('[role=menuitem],[role=menuitemcheckbox],[role=menuitemradio]');
+ if (menuitem && menuitem.getAttribute('aria-disabled') !== 'true' && !menuitem.disabled) {
+ this.$nextTick(() => {
+ this.$refs.trigger.focus();
+ this.open = false;
+ });
+ }
+ },
+ handleMenuitemMousemove(event) {
+ const menuitem = event.target.closest('[role=menuitem],[role=menuitemcheckbox],[role=menuitemradio]');
+ if (menuitem && menuitem.getAttribute('aria-disabled') !== 'true' && !menuitem.disabled) {
+ this.focusedIndex = this.menuItems.indexOf(menuitem);
+ this.focusMenuitem();
+ }
+ },
+
+ $trigger: {
+ '@click'() { this.open = !this.open },
+ '@keydown.escape.prevent'() {
+ this.open = false;
+ this.$refs.trigger.focus();
+ },
+ '@keydown.down.prevent'() { this.moveMenuitemFocus(+1); },
+ '@keydown.up.prevent'() { this.moveMenuitemFocus(-1); },
+ '@keydown.home.prevent'() { this.focusMenuitem(0) },
+ '@keydown.end.prevent'() { this.focusMenuitem(this.menuItems.length - 1) },
+ '@keydown.enter.prevent'() { this.open = !this.open },
+ ':aria-expanded'() { return this.open },
+ 'x-ref': 'trigger'
+ },
+ $content: {
+ '@click'(e) { this.handleMenuitemClick(e) },
+ '@keydown.escape.prevent'() {
+ this.open = false;
+ this.$refs.trigger.focus();
+ },
+ '@keydown.down.prevent'() { this.moveMenuitemFocus(+1); },
+ '@keydown.up.prevent'() { this.moveMenuitemFocus(-1); },
+ '@keydown.home.prevent'() { this.focusMenuitem(0) },
+ '@keydown.end.prevent'() { this.focusMenuitem(this.menuItems.length - 1) },
+ '@mouseover'(e) { this.handleMenuitemMousemove(e) },
+ ':aria-hidden'() { return !this.open },
+ 'x-cloak': ''
+ },
+ }));
+};
\ No newline at end of file
diff --git a/src/js/popover.js b/src/js/archived/popover.js
similarity index 100%
rename from src/js/popover.js
rename to src/js/archived/popover.js
diff --git a/src/js/archived/select.js b/src/js/archived/select.js
new file mode 100644
index 0000000..ed1c1fd
--- /dev/null
+++ b/src/js/archived/select.js
@@ -0,0 +1,156 @@
+window.basecoat = window.basecoat || {};
+window.basecoat.registerSelect = function(Alpine) {
+ if (Alpine.components && Alpine.components.select) return;
+
+ Alpine.data('select', (initialValue = null) => ({
+ open: false,
+ options: [],
+ disabledOptions: [],
+ focusedIndex: null,
+ selectedLabel: null,
+ selectedValue: null,
+ query: '',
+
+ init() {
+ this.$nextTick(() => {
+ this.options = Array.from(this.$el.querySelectorAll('[role=option]:not([aria-disabled])'));
+ this.disabledOptions = Array.from(this.$el.querySelectorAll('[role=option][aria-disabled=true]'));
+ if (this.options.length === 0) return;
+ if (initialValue) {
+ const option = this.options.find(opt => opt.getAttribute('data-value') === initialValue);
+ this.selectOption(option, false);
+ this.focusedIndex = this.options.indexOf(option);
+ } else {
+ this.selectOption(this.options[0], false);
+ }
+ });
+ },
+ focusOption() {
+ if (this.options.length === 0) return;
+
+ if (this.focusedIndex >= this.options.length) {
+ this.focusedIndex = this.options.length - 1;
+ } else if (this.focusedIndex < 0 || this.focusedIndex === null) {
+ this.focusedIndex = 0;
+ }
+ this.options.forEach(opt => opt.removeAttribute('data-focus'));
+ const option = this.options[this.focusedIndex];
+ option.setAttribute('data-focus', '');
+ option.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+ },
+ focusOnSelectedOption() {
+ if (this.options.length === 0 || this.selectedValue === null) return;
+ const option = this.options.find(opt => opt.getAttribute('data-value') === this.selectedValue);
+ if (!option) return;
+ this.focusedIndex = this.options.indexOf(option);
+ this.focusOption();
+ },
+ moveOptionFocus(delta) {
+ if (this.options.length === 0) return;
+
+ if (!this.open) {
+ this.open = true;
+ this.focusOnSelectedOption();
+ } else {
+ this.focusedIndex = this.focusedIndex === null
+ ? 0
+ : this.focusedIndex + delta;
+ }
+ this.focusOption();
+ },
+ handleOptionClick(event) {
+ const option = event.target.closest('[role=option]');
+ if (option && option.getAttribute('aria-disabled') !== 'true') {
+ this.selectOption(option);
+ this.open = false;
+ this.$nextTick(() => this.$refs.trigger.focus());
+ }
+ },
+ handleOptionMousemove(event) {
+ const option = event.target.closest('[role=option]');
+ if (option && option.getAttribute('aria-disabled') !== 'true') {
+ this.focusedIndex = this.options.indexOf(option);
+ this.focusOption();
+ }
+ },
+ handleOptionEnter(event) {
+ this.selectOption(this.options[this.focusedIndex]);
+ this.open = !this.open;
+ },
+ selectValue(value, dispatch = true) {
+ if (this.options.length === 0 || value == null) return;
+
+ const option = this.options.find(opt => opt.getAttribute('data-value') === String(value));
+ if (option) {
+ this.selectOption(option, dispatch);
+ }
+ },
+ selectOption(option, dispatch = true) {
+ if (this.options.length === 0 || !option || option.disabled || option.getAttribute('data-value') == null) {
+ return;
+ }
+
+ this.options.forEach(opt => {
+ opt.setAttribute('aria-selected', opt === option);
+ });
+ this.selectedLabel = option.innerHTML;
+ this.selectedValue = option.getAttribute('data-value');
+ if (dispatch) {
+ this.$dispatch('select:change', {
+ value: this.selectedValue,
+ label: this.selectedLabel
+ });
+ this.$dispatch('change');
+ }
+ },
+ filterOptions(query) {
+ if (query.length > 0) {
+ this.disabledOptions.forEach(opt => { opt.setAttribute('aria-hidden', 'true'); });
+ } else {
+ this.disabledOptions.forEach(opt => { opt.removeAttribute('aria-hidden'); });
+ }
+ this.options.forEach(opt => {
+ opt.removeAttribute('aria-hidden');
+ if (opt.getAttribute('data-value') != null && !opt.innerHTML.toLowerCase().includes(query.toLowerCase())) {
+ opt.setAttribute('aria-hidden', 'true');
+ }
+ });
+ },
+
+ $trigger: {
+ '@click'() { this.open = !this.open; this.focusOnSelectedOption(); },
+ '@keydown.escape.prevent'() {
+ this.open = false;
+ this.$refs.trigger.focus();
+ },
+ '@keydown.down.prevent'() { this.moveOptionFocus(+1); },
+ '@keydown.up.prevent'() { this.moveOptionFocus(-1); },
+ '@keydown.home.prevent'() { this.focusOption(0) },
+ '@keydown.end.prevent'() { this.focusOption(this.options.length - 1) },
+ '@keydown.enter.prevent'() {
+ if (this.open) this.handleOptionEnter();
+ else this.open = true;
+ },
+ ':aria-expanded'() { return this.open },
+ 'x-ref': 'trigger'
+ },
+ $content: {
+ '@click'(e) { this.handleOptionClick(e) },
+ '@mouseover'(e) { this.handleOptionMousemove(e) },
+ ':aria-hidden'() { return !this.open },
+ 'x-cloak': ''
+ },
+ $filter: {
+ '@input'(e) { this.filterOptions(e.target.value) },
+ '@keydown.escape.prevent'() {
+ this.open = false;
+ this.$refs.trigger.focus();
+ },
+ '@keydown.down.prevent'() { this.moveOptionFocus(+1); },
+ '@keydown.up.prevent'() { this.moveOptionFocus(-1); },
+ '@keydown.home.prevent'() { this.focusOption(0) },
+ '@keydown.end.prevent'() { this.focusOption(this.options.length - 1) },
+ '@keydown.enter.prevent'() { this.handleOptionEnter() },
+ }
+ }));
+};
\ No newline at end of file
diff --git a/src/js/archived/sidebar.js b/src/js/archived/sidebar.js
new file mode 100644
index 0000000..103eaba
--- /dev/null
+++ b/src/js/archived/sidebar.js
@@ -0,0 +1,25 @@
+window.basecoat = window.basecoat || {};
+window.basecoat.registerSidebar= function(Alpine) {
+ if (Alpine.components && Alpine.components.sidebar) return;
+
+ Alpine.data('sidebar', (initialOpen = true, initialMobileOpen = false) => ({
+ open: window.innerWidth >= 768
+ ? initialOpen
+ : initialMobileOpen,
+
+ init() {
+ this.$nextTick(() => {
+ this.$el.removeAttribute('data-uninitialized');
+ });
+ },
+
+ $main: {
+ '@sidebar:open.window'(e) { this.open = true },
+ '@sidebar:close.window'(e) { this.open = false },
+ '@sidebar:toggle.window'(e) { this.open = !this.open },
+ '@click'(e) { if (e.target === this.$el) this.open = false },
+ ':aria-hidden'() { return !this.open },
+ ':inert'() { return !this.open }
+ },
+ }));
+};
\ No newline at end of file
diff --git a/src/js/archived/tabs.js b/src/js/archived/tabs.js
new file mode 100644
index 0000000..a2d6ddf
--- /dev/null
+++ b/src/js/archived/tabs.js
@@ -0,0 +1,64 @@
+window.basecoat = window.basecoat || {};
+window.basecoat.registerTabs = function(Alpine) {
+ if (Alpine.components && Alpine.components.tabs) return;
+
+ Alpine.data('tabs', (initialTabIndex = 0) => ({
+ activeTabIndex: initialTabIndex,
+ tabs: [],
+ panels: [],
+
+ init() {
+ this.$nextTick(() => {
+ this.tabs = Array.from(this.$el.querySelectorAll(':scope > [role=tablist] [role=tab]:not([disabled])'));
+ this.panels = Array.from(this.$el.querySelectorAll(':scope > [role=tabpanel]'));
+ if (this.tabs.length > 0) {
+ this.selectTab(this.tabs[initialTabIndex], false);
+ }
+ });
+ },
+ nextTab() {
+ if (this.tabs.length === 0) return;
+ let newIndex = (this.activeTabIndex + 1) % this.tabs.length;
+ this.selectTab(this.tabs[newIndex]);
+ },
+ prevTab() {
+ if (this.tabs.length === 0) return;
+ let newIndex = (this.activeTabIndex - 1 + this.tabs.length) % this.tabs.length;
+ this.selectTab(this.tabs[newIndex]);
+ },
+ selectTab(tab, focus = true) {
+ if (!tab || this.tabs.length === 0) return;
+
+ this.tabs.forEach((t, index) => {
+ const isSelected = t === tab;
+ t.setAttribute('aria-selected', isSelected);
+ t.setAttribute('tabindex', isSelected ? '0' : '-1');
+ if (isSelected) {
+ this.activeTabIndex = index;
+ this.activeTab = t;
+ if (focus) {
+ t.focus();
+ }
+ }
+ });
+
+ const panelId = tab.getAttribute('aria-controls');
+ if (!panelId) return;
+
+ this.panels.forEach(panel => {
+ panel.hidden = (panel.getAttribute('id') !== panelId);
+ });
+ },
+
+ $tablist: {
+ ['@click'](event) {
+ const clickedTab = event.target.closest('[role=tab]');
+ if (clickedTab) {
+ this.selectTab(clickedTab);
+ }
+ },
+ ['@keydown.arrow-right.prevent']() { this.nextTab() },
+ ['@keydown.arrow-left.prevent']() { this.prevTab() },
+ },
+ }));
+};
\ No newline at end of file
diff --git a/src/js/archived/toast.js b/src/js/archived/toast.js
new file mode 100644
index 0000000..672dafa
--- /dev/null
+++ b/src/js/archived/toast.js
@@ -0,0 +1,75 @@
+window.basecoat = window.basecoat || {};
+window.basecoat.registerToast = function(Alpine) {
+ if (Alpine.components && Alpine.components.toast) return;
+
+ Alpine.store('toaster', { isPaused: false });
+ Alpine.data('toast', (config={}) => ({
+ config: config,
+ open: false,
+ timeoutDuration: null,
+ timeoutId: null,
+
+ init() {
+ if (config.duration !== -1) {
+ this.timeoutDuration = config.duration || (config.category === 'error' ? 5000 : 3000);
+ this.timeoutId = setTimeout(() => { this.close() }, this.timeoutDuration);
+ }
+ this.open = true;
+ this.$watch('$store.toaster.isPaused', (isPaused) => {
+ if (!this.open) return;
+ if (isPaused) {
+ this.pauseTimeout();
+ } else {
+ this.resumeTimeout();
+ }
+ });
+ },
+ pauseTimeout() {
+ clearTimeout(this.timeoutId);
+ this.timeoutId = null;
+ },
+ resumeTimeout(index) {
+ if (this.open && this.timeoutId === null) {
+ this.timeoutId = setTimeout(() => { this.close() }, this.timeoutDuration);
+ }
+ },
+ close() {
+ this.pauseTimeout();
+ this.open = false;
+ this.$el.blur();
+ },
+ executeAction(actionString) {
+ if (actionString) {
+ Alpine.evaluate(this.$el, actionString);
+ }
+ },
+
+ $toastBindings: {
+ ['@mouseenter']() { this.$store.toaster.isPaused = true },
+ ['@mouseleave']() { this.$store.toaster.isPaused = false },
+ ['@keydown.escape.prevent']() { this.close() },
+ [':aria-hidden']() { return !this.open }
+ },
+ }));
+
+ Alpine.magic('toast', (el) => (config, toasterId='toaster') => {
+ const toaster = document.getElementById(toasterId);
+ const template = document.getElementById('toast-template');
+
+ if (!toaster) {
+ console.error(`Toaster container with id #${toasterId} not found.`);
+ return;
+ }
+ if (!template) {
+ console.error('Toast template with id #toast-template not found.');
+ return;
+ }
+
+ const clone = template.content.firstElementChild.cloneNode(true);
+
+ clone.setAttribute('x-data', `toast(${JSON.stringify(config)})`);
+ clone.removeAttribute('id');
+
+ toaster.appendChild(clone);
+ });
+};
\ No newline at end of file
diff --git a/src/js/select.js b/src/js/select.js
index ed1c1fd..1180b36 100644
--- a/src/js/select.js
+++ b/src/js/select.js
@@ -1,156 +1,95 @@
-window.basecoat = window.basecoat || {};
-window.basecoat.registerSelect = function(Alpine) {
- if (Alpine.components && Alpine.components.select) return;
-
- Alpine.data('select', (initialValue = null) => ({
- open: false,
- options: [],
- disabledOptions: [],
- focusedIndex: null,
- selectedLabel: null,
- selectedValue: null,
- query: '',
+(() => {
+ const initSelect = (select) => {
+ const trigger = select.querySelector(':scope > [popovertarget]');
+ const selectedValue = trigger.querySelector(':scope > span');
+ const popover = select.querySelector(':scope > [popover]');
+ const listbox = popover.querySelector('[role="listbox"]');
+ const input = select.querySelector(':scope > input[type="hidden"]');
+ if (!trigger || !popover || !listbox || !input) return;
- init() {
- this.$nextTick(() => {
- this.options = Array.from(this.$el.querySelectorAll('[role=option]:not([aria-disabled])'));
- this.disabledOptions = Array.from(this.$el.querySelectorAll('[role=option][aria-disabled=true]'));
- if (this.options.length === 0) return;
- if (initialValue) {
- const option = this.options.find(opt => opt.getAttribute('data-value') === initialValue);
- this.selectOption(option, false);
- this.focusedIndex = this.options.indexOf(option);
- } else {
- this.selectOption(this.options[0], false);
- }
- });
- },
- focusOption() {
- if (this.options.length === 0) return;
+ const options = Array.from(listbox.querySelectorAll('[role="option"]'));
+ let activeIndex = -1;
- if (this.focusedIndex >= this.options.length) {
- this.focusedIndex = this.options.length - 1;
- } else if (this.focusedIndex < 0 || this.focusedIndex === null) {
- this.focusedIndex = 0;
- }
- this.options.forEach(opt => opt.removeAttribute('data-focus'));
- const option = this.options[this.focusedIndex];
- option.setAttribute('data-focus', '');
- option.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
- },
- focusOnSelectedOption() {
- if (this.options.length === 0 || this.selectedValue === null) return;
- const option = this.options.find(opt => opt.getAttribute('data-value') === this.selectedValue);
- if (!option) return;
- this.focusedIndex = this.options.indexOf(option);
- this.focusOption();
- },
- moveOptionFocus(delta) {
- if (this.options.length === 0) return;
-
- if (!this.open) {
- this.open = true;
- this.focusOnSelectedOption();
- } else {
- this.focusedIndex = this.focusedIndex === null
- ? 0
- : this.focusedIndex + delta;
- }
- this.focusOption();
- },
- handleOptionClick(event) {
- const option = event.target.closest('[role=option]');
- if (option && option.getAttribute('aria-disabled') !== 'true') {
- this.selectOption(option);
- this.open = false;
- this.$nextTick(() => this.$refs.trigger.focus());
- }
- },
- handleOptionMousemove(event) {
- const option = event.target.closest('[role=option]');
- if (option && option.getAttribute('aria-disabled') !== 'true') {
- this.focusedIndex = this.options.indexOf(option);
- this.focusOption();
- }
- },
- handleOptionEnter(event) {
- this.selectOption(this.options[this.focusedIndex]);
- this.open = !this.open;
- },
- selectValue(value, dispatch = true) {
- if (this.options.length === 0 || value == null) return;
-
- const option = this.options.find(opt => opt.getAttribute('data-value') === String(value));
+ const updateValue = (option) => {
if (option) {
- this.selectOption(option, dispatch);
- }
- },
- selectOption(option, dispatch = true) {
- if (this.options.length === 0 || !option || option.disabled || option.getAttribute('data-value') == null) {
- return;
+ selectedValue.innerHTML = option.dataset.label || option.innerHTML;
+ input.value = option.dataset.value;
+ listbox.querySelector('[role="option"][aria-selected="true"]')?.removeAttribute('aria-selected');
+ option.setAttribute('aria-selected', 'true');
}
+ };
- this.options.forEach(opt => {
- opt.setAttribute('aria-selected', opt === option);
- });
- this.selectedLabel = option.innerHTML;
- this.selectedValue = option.getAttribute('data-value');
- if (dispatch) {
- this.$dispatch('select:change', {
- value: this.selectedValue,
- label: this.selectedLabel
- });
- this.$dispatch('change');
+ const selectOption = (option) => {
+ if (!option) return;
+
+ updateValue(option);
+
+ trigger.removeAttribute('aria-activedescendant');
+ options.forEach(opt => opt.classList.remove('active'));
+ activeIndex = -1;
+ popover.hidePopover();
+ };
+
+ let initialOption = options.find(opt => input.value && opt.dataset.value === input.value);
+ if (!initialOption && options.length > 0) initialOption = options[0];
+
+ updateValue(initialOption);
+
+ trigger.addEventListener('keydown', (e) => {
+ if (!popover.matches(':popover-open')) return;
+
+ if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+ e.preventDefault();
+ if (activeIndex > -1) options[activeIndex]?.classList.remove('active');
+
+ if (e.key === 'ArrowDown') activeIndex = (activeIndex + 1) % options.length;
+ else activeIndex = (activeIndex - 1 + options.length) % options.length;
+
+ const activeOption = options[activeIndex];
+ if (activeOption) {
+ activeOption.classList.add('active');
+ if (activeOption.id) {
+ trigger.setAttribute('aria-activedescendant', activeOption.id);
+ }
+ activeOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+ }
+ } else if (e.key === 'Enter') {
+ e.preventDefault();
+ selectOption(options[activeIndex]);
}
- },
- filterOptions(query) {
- if (query.length > 0) {
- this.disabledOptions.forEach(opt => { opt.setAttribute('aria-hidden', 'true'); });
- } else {
- this.disabledOptions.forEach(opt => { opt.removeAttribute('aria-hidden'); });
+ });
+
+ listbox.addEventListener('click', (e) => {
+ const clickedOption = e.target.closest('[role="option"]');
+ if (clickedOption) selectOption(clickedOption);
+ });
+
+ popover.addEventListener('toggle', (e) => {
+ if (e.newState === 'closed') {
+ trigger.removeAttribute('aria-activedescendant');
+ if (activeIndex > -1) options[activeIndex]?.classList.remove('active');
+ activeIndex = -1;
}
- this.options.forEach(opt => {
- opt.removeAttribute('aria-hidden');
- if (opt.getAttribute('data-value') != null && !opt.innerHTML.toLowerCase().includes(query.toLowerCase())) {
- opt.setAttribute('aria-hidden', 'true');
+ });
+
+ select.dataset.selectInitialized = true;
+ };
+
+ document.querySelectorAll('div.select:not([data-select-initialized])').forEach(initSelect);
+
+ const observer = new MutationObserver((mutations) => {
+ mutations.forEach((mutation) => {
+ mutation.addedNodes.forEach((node) => {
+ if (node.nodeType === Node.ELEMENT_NODE) {
+ if (node.matches('div.select:not([data-select-initialized])')) {
+ initSelect(node);
+ }
+ node.querySelectorAll('div.select:not([data-select-initialized])').forEach(initSelect);
}
});
- },
+ });
+ });
- $trigger: {
- '@click'() { this.open = !this.open; this.focusOnSelectedOption(); },
- '@keydown.escape.prevent'() {
- this.open = false;
- this.$refs.trigger.focus();
- },
- '@keydown.down.prevent'() { this.moveOptionFocus(+1); },
- '@keydown.up.prevent'() { this.moveOptionFocus(-1); },
- '@keydown.home.prevent'() { this.focusOption(0) },
- '@keydown.end.prevent'() { this.focusOption(this.options.length - 1) },
- '@keydown.enter.prevent'() {
- if (this.open) this.handleOptionEnter();
- else this.open = true;
- },
- ':aria-expanded'() { return this.open },
- 'x-ref': 'trigger'
- },
- $content: {
- '@click'(e) { this.handleOptionClick(e) },
- '@mouseover'(e) { this.handleOptionMousemove(e) },
- ':aria-hidden'() { return !this.open },
- 'x-cloak': ''
- },
- $filter: {
- '@input'(e) { this.filterOptions(e.target.value) },
- '@keydown.escape.prevent'() {
- this.open = false;
- this.$refs.trigger.focus();
- },
- '@keydown.down.prevent'() { this.moveOptionFocus(+1); },
- '@keydown.up.prevent'() { this.moveOptionFocus(-1); },
- '@keydown.home.prevent'() { this.focusOption(0) },
- '@keydown.end.prevent'() { this.focusOption(this.options.length - 1) },
- '@keydown.enter.prevent'() { this.handleOptionEnter() },
- }
- }));
-};
\ No newline at end of file
+ // Start observing the whole document
+ observer.observe(document.body, { childList: true, subtree: true });
+})();
\ No newline at end of file
diff --git a/src/js/sidebar.js b/src/js/sidebar.js
index 103eaba..68f5d2e 100644
--- a/src/js/sidebar.js
+++ b/src/js/sidebar.js
@@ -1,25 +1,68 @@
-window.basecoat = window.basecoat || {};
-window.basecoat.registerSidebar= function(Alpine) {
- if (Alpine.components && Alpine.components.sidebar) return;
+(() => {
+ const initSidebar = (sidebarComponent) => {
+ const initialOpen = sidebarComponent.dataset.initialOpen !== 'false';
+ const initialMobileOpen = sidebarComponent.dataset.initialMobileOpen === 'true';
+ const breakpoint = parseInt(sidebarComponent.dataset.breakpoint) || 768;
+
+ let open = breakpoint > 0
+ ? (window.innerWidth >= breakpoint ? initialOpen : initialMobileOpen)
+ : initialOpen;
+
+ const updateState = () => {
+ sidebarComponent.setAttribute('aria-hidden', !open);
+ if (open) {
+ sidebarComponent.removeAttribute('inert');
+ } else {
+ sidebarComponent.setAttribute('inert', '');
+ }
+ };
- Alpine.data('sidebar', (initialOpen = true, initialMobileOpen = false) => ({
- open: window.innerWidth >= 768
- ? initialOpen
- : initialMobileOpen,
+ const setState = (state) => {
+ open = state;
+ updateState();
+ };
- init() {
- this.$nextTick(() => {
- this.$el.removeAttribute('data-uninitialized');
+ const sidebarId = sidebarComponent.id;
+
+ window.addEventListener('sidebar:open', (e) => {
+ if (!e.detail?.id || e.detail.id === sidebarId) setState(true);
+ });
+ window.addEventListener('sidebar:close', (e) => {
+ if (!e.detail?.id || e.detail.id === sidebarId) setState(false);
+ });
+ window.addEventListener('sidebar:toggle', (e) => {
+ if (!e.detail?.id || e.detail.id === sidebarId) setState(!open);
+ });
+
+ sidebarComponent.addEventListener('click', (e) => {
+ const nav = sidebarComponent.querySelector('nav');
+ const closeTarget = e.target.closest('[data-sidebar-close-on-mobile]');
+
+ if (closeTarget && window.innerWidth < breakpoint) {
+ setState(false);
+ } else if (e.target === sidebarComponent || (nav && !nav.contains(e.target))) {
+ setState(false);
+ }
+ });
+
+ updateState();
+ sidebarComponent.dataset.sidebarInitialized = true;
+ };
+
+ document.querySelectorAll('.sidebar:not([data-sidebar-initialized])').forEach(initSidebar);
+
+ const observer = new MutationObserver((mutations) => {
+ mutations.forEach((mutation) => {
+ mutation.addedNodes.forEach((node) => {
+ if (node.nodeType === Node.ELEMENT_NODE) {
+ if (node.matches('.sidebar:not([data-sidebar-initialized])')) {
+ initSidebar(node);
+ }
+ node.querySelectorAll('.sidebar:not([data-sidebar-initialized])').forEach(initSidebar);
+ }
});
- },
+ });
+ });
- $main: {
- '@sidebar:open.window'(e) { this.open = true },
- '@sidebar:close.window'(e) { this.open = false },
- '@sidebar:toggle.window'(e) { this.open = !this.open },
- '@click'(e) { if (e.target === this.$el) this.open = false },
- ':aria-hidden'() { return !this.open },
- ':inert'() { return !this.open }
- },
- }));
-};
\ No newline at end of file
+ observer.observe(document.body, { childList: true, subtree: true });
+})();
\ No newline at end of file
diff --git a/src/js/tabs.js b/src/js/tabs.js
index a2d6ddf..3979797 100644
--- a/src/js/tabs.js
+++ b/src/js/tabs.js
@@ -1,64 +1,75 @@
-window.basecoat = window.basecoat || {};
-window.basecoat.registerTabs = function(Alpine) {
- if (Alpine.components && Alpine.components.tabs) return;
-
- Alpine.data('tabs', (initialTabIndex = 0) => ({
- activeTabIndex: initialTabIndex,
- tabs: [],
- panels: [],
+(() => {
+ const initTabs = (tabsComponent) => {
+ const tablist = tabsComponent.querySelector('[role="tablist"]');
+ if (!tablist) return;
- init() {
- this.$nextTick(() => {
- this.tabs = Array.from(this.$el.querySelectorAll(':scope > [role=tablist] [role=tab]:not([disabled])'));
- this.panels = Array.from(this.$el.querySelectorAll(':scope > [role=tabpanel]'));
- if (this.tabs.length > 0) {
- this.selectTab(this.tabs[initialTabIndex], false);
+ const tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));
+ const panels = tabs.map(tab => document.getElementById(tab.getAttribute('aria-controls'))).filter(Boolean);
+
+ const selectTab = (tabToSelect) => {
+ tabs.forEach((tab, index) => {
+ tab.setAttribute('aria-selected', 'false');
+ tab.setAttribute('tabindex', '-1');
+ if (panels[index]) panels[index].hidden = true;
+ });
+
+ tabToSelect.setAttribute('aria-selected', 'true');
+ tabToSelect.setAttribute('tabindex', '0');
+ const activePanel = document.getElementById(tabToSelect.getAttribute('aria-controls'));
+ if (activePanel) activePanel.hidden = false;
+ };
+
+ tablist.addEventListener('click', (e) => {
+ const clickedTab = e.target.closest('[role="tab"]');
+ if (clickedTab) selectTab(clickedTab);
+ });
+
+ tablist.addEventListener('keydown', (e) => {
+ const currentTab = e.target;
+ if (!tabs.includes(currentTab)) return;
+
+ let nextTab;
+ const currentIndex = tabs.indexOf(currentTab);
+
+ switch (e.key) {
+ case 'ArrowRight':
+ nextTab = tabs[(currentIndex + 1) % tabs.length];
+ break;
+ case 'ArrowLeft':
+ nextTab = tabs[(currentIndex - 1 + tabs.length) % tabs.length];
+ break;
+ case 'Home':
+ nextTab = tabs[0];
+ break;
+ case 'End':
+ nextTab = tabs[tabs.length - 1];
+ break;
+ default:
+ return;
+ }
+
+ e.preventDefault();
+ selectTab(nextTab);
+ nextTab.focus();
+ });
+
+ tabsComponent.dataset.tabsInitialized = true;
+ };
+
+ document.querySelectorAll('.tabs:not([data-tabs-initialized])').forEach(initTabs);
+
+ const observer = new MutationObserver((mutations) => {
+ mutations.forEach((mutation) => {
+ mutation.addedNodes.forEach((node) => {
+ if (node.nodeType === Node.ELEMENT_NODE) {
+ if (node.matches('.tabs:not([data-tabs-initialized])')) {
+ initTabs(node);
+ }
+ node.querySelectorAll('.tabs:not([data-tabs-initialized])').forEach(initTabs);
}
});
- },
- nextTab() {
- if (this.tabs.length === 0) return;
- let newIndex = (this.activeTabIndex + 1) % this.tabs.length;
- this.selectTab(this.tabs[newIndex]);
- },
- prevTab() {
- if (this.tabs.length === 0) return;
- let newIndex = (this.activeTabIndex - 1 + this.tabs.length) % this.tabs.length;
- this.selectTab(this.tabs[newIndex]);
- },
- selectTab(tab, focus = true) {
- if (!tab || this.tabs.length === 0) return;
+ });
+ });
- this.tabs.forEach((t, index) => {
- const isSelected = t === tab;
- t.setAttribute('aria-selected', isSelected);
- t.setAttribute('tabindex', isSelected ? '0' : '-1');
- if (isSelected) {
- this.activeTabIndex = index;
- this.activeTab = t;
- if (focus) {
- t.focus();
- }
- }
- });
-
- const panelId = tab.getAttribute('aria-controls');
- if (!panelId) return;
-
- this.panels.forEach(panel => {
- panel.hidden = (panel.getAttribute('id') !== panelId);
- });
- },
-
- $tablist: {
- ['@click'](event) {
- const clickedTab = event.target.closest('[role=tab]');
- if (clickedTab) {
- this.selectTab(clickedTab);
- }
- },
- ['@keydown.arrow-right.prevent']() { this.nextTab() },
- ['@keydown.arrow-left.prevent']() { this.prevTab() },
- },
- }));
-};
\ No newline at end of file
+ observer.observe(document.body, { childList: true, subtree: true });
+})();
\ No newline at end of file
diff --git a/src/nunjucks/dialog.njk b/src/nunjucks/dialog.njk
index 6921bb8..11dac66 100644
--- a/src/nunjucks/dialog.njk
+++ b/src/nunjucks/dialog.njk
@@ -17,7 +17,7 @@
@param close_on_overlay_click {boolean} [optional] [default=true] - Whether clicking the overlay closes the dialog.
#}
{% macro dialog(
- id,
+ id=None,
trigger=None,
title=None,
description=None,
@@ -32,79 +32,62 @@
close_button=true,
close_on_overlay_click=true
) %}
-
+ {{ trigger }}
+
+{% endif %}
+
+
+ {% endif %}
+
+
{% endmacro %}
\ No newline at end of file
diff --git a/src/nunjucks/dropdown-menu.njk b/src/nunjucks/dropdown-menu.njk
index be41443..733f55d 100644
--- a/src/nunjucks/dropdown-menu.njk
+++ b/src/nunjucks/dropdown-menu.njk
@@ -10,50 +10,33 @@
#}
{% macro dropdown_menu(
id=None,
- trigger=None,
- menu=None,
- main_attrs={},
+ trigger,
+ items=None,
trigger_attrs={},
- content_attrs={}
+ popover_attrs={}
) %}
-
- {% if trigger %}
+{% set id = id or ("dropdown-menu-" + (range(100000, 999999) | random | string)) %}
+