@oscarpalmer/oui 0.37.0 → 0.38.0

package/dist/js/listbox/index.mjs

@@ -1,7 +1,7 @@
-import { C as setListboxDisabled, D as setListboxReadonly, O as setListboxRequired, T as setListboxLimit, a as setListboxValue, o as setListboxValues, w as setListboxFilter } from "../listbox.data-BWd0PCy7.mjs";
+import { C as setListboxDisabled, D as setListboxReadonly, O as setListboxRequired, T as setListboxLimit, a as setListboxValue, o as setListboxValues, w as setListboxFilter } from "../listbox.data-C7CRa5Ya.mjs";
 import { attachListbox, detachListbox } from "../internal/listbox/listbox.state.mjs";
 import { LISTBOX_TAGNAME } from "./constants.listbox.mjs";
-import { c as onDetachListbox, i as createListboxState, n as setListboxLocalizations, o as listboxStates, r as updateListboxLocalizations, s as onAttachListbox } from "../misc.listbox-BI-XsTOf.mjs";
+import { c as onDetachListbox, i as createListboxState, n as setListboxLocalizations, o as listboxStates, r as updateListboxLocalizations, s as onAttachListbox } from "../misc.listbox-Cyz2CRDy.mjs";
 import { getAttribute } from "@oscarpalmer/toretto/attribute";
 import { parse } from "@oscarpalmer/atoms/string";
 //#region src/js/listbox/index.ts
@@ -41,6 +41,18 @@ var OuiListboxElement = class extends HTMLElement {
 		setListboxFilter(this.#state, value);
 	}
 	/**
+	* Form element associated with the listbox
+	*/
+	get form() {
+		return this.#internals.form;
+	}
+	/**
+	* Label elements associated with the listbox
+	*/
+	get labels() {
+		return this.#internals.labels;
+	}
+	/**
 	* Maximum number of selected options
 	*/
 	get max() {
@@ -107,6 +119,18 @@ var OuiListboxElement = class extends HTMLElement {
 		return this.#state.options.selected.slice();
 	}
 	/**
+	* Validation message for the listbox
+	*/
+	get validationMessage() {
+		return this.#internals.validationMessage;
+	}
+	/**
+	* Validity state for the listbox
+	*/
+	get validity() {
+		return this.#internals.validity;
+	}
+	/**
 	* Current value
 	*/
 	get value() {
@@ -130,6 +154,12 @@ var OuiListboxElement = class extends HTMLElement {
 	set values(values) {
 		setListboxValues(this.#state, values);
 	}
+	/**
+	* Can the listbox be validated?
+	*/
+	get willValidate() {
+		return this.#internals.willValidate;
+	}
 	constructor() {
 		super();
 		this.#internals = this.attachInternals();
@@ -148,6 +178,14 @@ var OuiListboxElement = class extends HTMLElement {
 		}
 	}
 	/**
+	* Check if the listbox is valid
+	*
+	* @returns `true` if the listbox is valid, otherwise `false`
+	*/
+	checkValidity() {
+		return this.#internals.checkValidity();
+	}
+	/**
 	* Clear all selected options
 	*/
 	clear() {
@@ -173,6 +211,22 @@ var OuiListboxElement = class extends HTMLElement {
 		if (this.#state == null) this.#restored = parsed;
 		else setListboxValues(this.#state, parsed);
 	}
+	/**
+	* Check if the listbox is valid and report any validation errors
+	*
+	* @returns `true` if the listbox is valid, otherwise `false`
+	*/
+	reportValidity() {
+		return this.#internals.reportValidity();
+	}
+	/**
+	* Set a custom validation message for the listbox
+	*
+	* @param message Validation message
+	*/
+	setCustomValidity(message) {
+		this.#internals.setValidity({ customError: message !== "" }, message, this);
+	}
 	setLocalizations(first, second) {
 		updateListboxLocalizations(this.#state.localizations.global, this.#state.localizations.component, first, second);
 	}

package/dist/js/listbox/misc.listbox.mjs

@@ -1,2 +1,2 @@
-import { n as setListboxLocalizations, r as updateListboxLocalizations, t as getListboxId } from "../misc.listbox-BI-XsTOf.mjs";
+import { n as setListboxLocalizations, r as updateListboxLocalizations, t as getListboxId } from "../misc.listbox-Cyz2CRDy.mjs";
 export { getListboxId, setListboxLocalizations, updateListboxLocalizations };

package/dist/js/listbox/state.listbox.mjs

@@ -1,2 +1,2 @@
-import { a as listboxLocalizations, c as onDetachListbox, i as createListboxState, o as listboxStates, s as onAttachListbox } from "../misc.listbox-BI-XsTOf.mjs";
+import { a as listboxLocalizations, c as onDetachListbox, i as createListboxState, o as listboxStates, s as onAttachListbox } from "../misc.listbox-Cyz2CRDy.mjs";
 export { createListboxState, listboxLocalizations, listboxStates, onAttachListbox, onDetachListbox };

package/dist/js/{listbox.data-BWd0PCy7.mjs → listbox.data-C7CRa5Ya.mjs}

@@ -2,8 +2,8 @@ import { getLocalization, localize } from "./l10n.mjs";
 import { listboxScrollOptions } from "./internal/listbox/listbox.constants.mjs";
 import { updateListboxForm, updateListboxValidity } from "./internal/listbox/listbox.form.mjs";
 import { setAria } from "@oscarpalmer/toretto/aria";
-import { dispatch } from "@oscarpalmer/toretto/event";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
+import { dispatch } from "@oscarpalmer/toretto/event";
 import { getString } from "@oscarpalmer/atoms/string";
 import { getData } from "@oscarpalmer/toretto/data";
 import { createElement, setAria as setAria$1, setAttribute as setAttribute$1 } from "@oscarpalmer/toretto";
@@ -134,13 +134,14 @@ function createListboxInput(parameters, value) {
 			autocorrect: "off",
 			autocomplete: "off",
 			form: "",
-			spellcheck: "false",
-			type: "text"
+			inputmode: "text",
+			spellcheck: "false"
 		},
 		property: {
 			id,
 			value,
-			role: isAutocomplete || listbox ? "combobox" : "searchbox"
+			role: isAutocomplete || listbox ? "combobox" : "searchbox",
+			type: "text"
 		}
 	});
 	if (isAutocomplete || listbox) setAria$1(input, "expanded", listbox);

package/dist/js/menu.mjs

@@ -2,8 +2,8 @@ import { createEmbeddedFloatable, getOnBeforeToggleListener } from "./floatable/
 import { attributable } from "./internal/attributable.mjs";
 import { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, getNavigable, updateNavigableFocus } from "./internal/navigable.mjs";
 import { setAria, setRole } from "@oscarpalmer/toretto/aria";
-import { on } from "@oscarpalmer/toretto/event";
 import { setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
+import { on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
 //#region src/js/menu.ts
 var OuiMenu = class {

package/dist/js/{misc.listbox-BI-XsTOf.mjs → misc.listbox-Cyz2CRDy.mjs}

@@ -1,11 +1,11 @@
 import { getLocalizations, updateLocalizations } from "./l10n.mjs";
-import { b as updateListboxValueLabel, c as createListboxContent, n as filterListbox, s as toggleListboxOption, t as applyListboxSelection, v as updateListboxMessage, x as generateListboxIds, y as updateListboxPreview } from "./listbox.data-BWd0PCy7.mjs";
+import { b as updateListboxValueLabel, c as createListboxContent, n as filterListbox, s as toggleListboxOption, t as applyListboxSelection, v as updateListboxMessage, x as generateListboxIds, y as updateListboxPreview } from "./listbox.data-C7CRa5Ya.mjs";
 import { initializeListboxState } from "./internal/listbox/listbox.state.mjs";
 import { getBooleanAriaValue } from "./internal/misc.mjs";
 import { processListboxKeydown } from "./internal/listbox/listbox.event.mjs";
 import { LISTBOX_ATTRIBUTES, LISTBOX_MESSAGES, LISTBOX_SELECTORS, LISTBOX_TAGNAME } from "./listbox/constants.listbox.mjs";
+import { setAttributes } from "@oscarpalmer/toretto/attribute";
 import { on } from "@oscarpalmer/toretto/event";
-import { setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
 import { findAncestor } from "@oscarpalmer/toretto/find";
 import { getData } from "@oscarpalmer/toretto/data";
 import { noop } from "@oscarpalmer/atoms/function";
@@ -59,7 +59,6 @@ function createListboxState(element, internals) {
 	const label = element.querySelector(`label[for="${select.id}"]`);
 	if (label == null) throw new Error(LISTBOX_MESSAGES.label);
 	element.id = select.id;
-	setAttribute(element, "name", select.name === "" ? select.id : select.name);
 	const disabled = getBooleanAriaValue(element, "disabled") || select.disabled;
 	const multiple = element.multiple || select.multiple;
 	const readonly = getBooleanAriaValue(element, "readonly");

package/dist/js/movable/movable.embedded.mjs

@@ -1,9 +1,9 @@
 import { attributable } from "../internal/attributable.mjs";
 import { OuiDraggable, addDraggable, getDraggableStates, removeDraggable } from "../internal/draggable.mjs";
-import { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
 import { getStyles, setStyle, setStyles } from "@oscarpalmer/toretto/style";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/movable/movable.embedded.ts
 var OuiMovable = class extends OuiDraggable {
 	#element;

package/dist/js/popover.mjs

@@ -2,8 +2,8 @@ import { createEmbeddedFloatable, getOnBeforeToggleListener } from "./floatable/
 import { attributable } from "./internal/attributable.mjs";
 import { createFocusTrap } from "./focus-trap/focus-trap.embedded.mjs";
 import { getAria, setAria } from "@oscarpalmer/toretto/aria";
-import { on } from "@oscarpalmer/toretto/event";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
+import { on } from "@oscarpalmer/toretto/event";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/popover.ts
 var OuiPopover = class {
@@ -74,7 +74,7 @@ function getState(anchor, content) {
 		anchor,
 		content,
 		floatable: createEmbeddedFloatable(anchor, content, options),
-		focusTrap: getAria(content, "modal") === "true" ? createFocusTrap(content, { noescape: true }) : void 0,
+		focusTrap: getAria(content, "modal") === true ? createFocusTrap(content, { noescape: true }) : void 0,
 		listeners: [getOnBeforeToggleListener(content), on(content, "toggle", (event) => {
 			const expanded = event.newState === "open";
 			if (expanded) {

package/dist/js/resizable/resizable.embedded.mjs

@@ -1,12 +1,12 @@
 import { attributable } from "../internal/attributable.mjs";
-import { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
-import { isPlainObject } from "@oscarpalmer/atoms/is";
-import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
-import { setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
 import { getNumber } from "@oscarpalmer/atoms/number";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
+import { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
+import { setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
 import supportsTouch from "@oscarpalmer/toretto/touch";
+import { isPlainObject } from "@oscarpalmer/atoms/is";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/resizable/resizable.embedded.ts
 var OuiResizable = class {
 	#state;

package/dist/js/sortable/sortable.embedded.mjs

@@ -1,11 +1,11 @@
 import { attributable } from "../internal/attributable.mjs";
 import { OuiDraggable, addDraggable, getDraggableStates, removeDraggable } from "../internal/draggable.mjs";
-import { dispatch, getEventPosition } from "@oscarpalmer/toretto/event";
 import { getAttribute, setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
-import { setStyle } from "@oscarpalmer/toretto/style";
-import { findAncestor, getElementFromPosition } from "@oscarpalmer/toretto/find";
 import { createElement } from "@oscarpalmer/toretto/create";
+import { dispatch, getEventPosition } from "@oscarpalmer/toretto/event";
+import { findAncestor, getElementFromPosition } from "@oscarpalmer/toretto/find";
+import { setStyle } from "@oscarpalmer/toretto/style";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/sortable/sortable.embedded.ts
 var OuiSortable = class extends OuiDraggable {
 	constructor(element, options) {

package/dist/js/splitter.mjs

@@ -1,13 +1,13 @@
+import { round } from "@oscarpalmer/atoms/math";
+import { clamp } from "@oscarpalmer/atoms/number";
 import { setAria } from "@oscarpalmer/toretto/aria";
-import { getEventPosition, on } from "@oscarpalmer/toretto/event";
-import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
-import { setStyle, toggleStyles } from "@oscarpalmer/toretto/style";
-import { clamp } from "@oscarpalmer/atoms/number";
+import { createElement } from "@oscarpalmer/toretto/create";
+import { getEventPosition, on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
+import { setStyle, toggleStyles } from "@oscarpalmer/toretto/style";
 import supportsTouch from "@oscarpalmer/toretto/touch";
-import { createElement } from "@oscarpalmer/toretto/create";
-import { round } from "@oscarpalmer/atoms/math";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 //#region src/js/splitter.ts
 const ATTRIBUTE_MAX = "max";
 const ATTRIBUTE_MIN = "min";

package/dist/js/{state.combobox-4xq0FPCF.mjs → state.combobox-Qm3FWzYW.mjs}

@@ -1,16 +1,16 @@
 import { createEmbeddedFloatable } from "./floatable/floatable.embedded.mjs";
 import { getLocalizations, updateLocalizations } from "./l10n.mjs";
 import { LISTBOX_KEYS, LISTBOX_TYPES } from "./internal/listbox/listbox.constants.mjs";
-import { b as updateListboxValueLabel, i as filterListboxOptions, n as filterListbox, r as filterListboxOption, s as toggleListboxOption, t as applyListboxSelection, v as updateListboxMessage, x as generateListboxIds, y as updateListboxPreview } from "./listbox.data-BWd0PCy7.mjs";
+import { b as updateListboxValueLabel, i as filterListboxOptions, n as filterListbox, r as filterListboxOption, s as toggleListboxOption, t as applyListboxSelection, v as updateListboxMessage, x as generateListboxIds, y as updateListboxPreview } from "./listbox.data-C7CRa5Ya.mjs";
 import { initializeListboxState } from "./internal/listbox/listbox.state.mjs";
 import { COMBOBOX_ATTRIBUTES, COMBOBOX_ATTRIBUTE_SELECTION_ITEM, COMBOBOX_AUTOCOMPLETES, COMBOBOX_MESSAGES, COMBOBOX_SELECTORS, COMBOBOX_TAGNAME } from "./combobox/constants.combobox.mjs";
 import { getAttributeValue, getBooleanAriaValue } from "./internal/misc.mjs";
 import { createComboboxAnchor, createComboboxContent, updateComboboxAutocomplete, updateComboboxSelection, updateComboboxSelectionItems, updateComboboxTabindices } from "./combobox/dom.combobox.mjs";
 import { processListboxKeydown } from "./internal/listbox/listbox.event.mjs";
+import { clamp } from "@oscarpalmer/atoms/number";
 import { setAria } from "@oscarpalmer/toretto/aria";
-import { on } from "@oscarpalmer/toretto/event";
 import { setAttributes } from "@oscarpalmer/toretto/attribute";
-import { clamp } from "@oscarpalmer/atoms/number";
+import { on } from "@oscarpalmer/toretto/event";
 import { getData } from "@oscarpalmer/toretto/data";
 import { findAncestor, getData as getData$1 } from "@oscarpalmer/toretto";
 import { noop } from "@oscarpalmer/atoms/function";

package/dist/js/tabs.mjs

@@ -67,7 +67,7 @@ function attachTabs(state) {
 	}
 }
 function createContent(prefix, panels, active) {
-	const content = createElement("div", { attribute: { [ATTRIBUTE_CONTENT]: "" } });
+	const content = createElement("div", { attribute: { [`${TAGNAME}-content`]: "" } });
 	const { length } = panels;
 	const hidden = [];
 	const roles = [];
@@ -93,7 +93,7 @@ function createTab(prefix, index, panel, label, selected) {
 			selected,
 			controls: panel.id
 		},
-		attribute: { [ATTRIBUTE_TAB]: "" },
+		attribute: { [`${TAGNAME}-tab`]: "" },
 		property: {
 			id: `${prefix}_tab_${index}`,
 			role: "tab",
@@ -105,7 +105,7 @@ function createTab(prefix, index, panel, label, selected) {
 }
 function createTabList(prefix, panels, labels, active) {
 	const element = createElement("div", {
-		attribute: { [ATTRIBUTE_TABLIST]: "" },
+		attribute: { [`${TAGNAME}-tablist`]: "" },
 		property: { role: "tablist" }
 	});
 	const { length } = panels;
@@ -226,14 +226,11 @@ function setActive(state, value) {
 	}
 }
 const TAGNAME = "oui-tabs";
-const ATTRIBUTE_CONTENT = `${TAGNAME}-content`;
 const ATTRIBUTE_PANEL = `${TAGNAME}-panel`;
-const ATTRIBUTE_TAB = `${TAGNAME}-tab`;
-const ATTRIBUTE_TABLIST = `${TAGNAME}-tablist`;
 const MESSAGE_EMPTY = `<${TAGNAME}> must contain at least one [${ATTRIBUTE_PANEL}] child element`;
 const MESSAGE_INVALID = `A [${ATTRIBUTE_PANEL}] child element of <${TAGNAME}> must have a valid 'aria-label' or 'aria-labelledby' attribute`;
 const SELECTOR_PANEL = `:scope > [${ATTRIBUTE_PANEL}]`;
-const SELECTOR_TAB = `[${ATTRIBUTE_TAB}]`;
+const SELECTOR_TAB = `[${TAGNAME}-tab]`;
 let index = 0;
 customElements.define(TAGNAME, OuiTabsElement);
 //#endregion

package/dist/js/tooltip.mjs

@@ -1,11 +1,11 @@
 import { createEmbeddedFloatable } from "./floatable/floatable.embedded.mjs";
 import { attributable } from "./internal/attributable.mjs";
 import { getAria } from "@oscarpalmer/toretto/aria";
-import { on } from "@oscarpalmer/toretto/event";
-import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
-import { findAncestor } from "@oscarpalmer/toretto/find";
 import { createElement } from "@oscarpalmer/toretto/create";
+import { on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 //#region src/js/tooltip.ts
 var OuiTooltip = class {
 	#state;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.37.0",
+	"version": "0.38.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",
@@ -91,15 +91,17 @@
 		"clean": "rm -rf ./dist && rm -rf ./postcss",
 		"css:build": "vp run postcss:build && vpx sass ./postcss:./dist/css --no-source-map",
 		"css:watch": "vpx sass ./postcss:./dist/css --no-source-map --watch",
-		"postcss:build": "vpx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss",
-		"postcss:watch": "vpx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss --watch",
+		"postcss:build": "vp run postcss:build:mixins && vp run postcss:build:styles",
+		"postcss:build:mixins": "vpx postcss ./src/css/mixins/*.scss -d ./postcss/mixins -u autoprefixer postcss-input-range --parser postcss-scss",
+		"postcss:build:styles": "vpx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss",
+		"postcss:watch": "vpx postcss ./src/css/**/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss --watch",
 		"test": "vpx vitest --coverage",
 		"tsdown": "vpx tsdown -c ./tsdown.config.ts --watch",
 		"watch": "vp run clean && concurrently \"php -S localhost:3000\" \"vp run postcss:watch\" \"vp run css:watch\" \"vp run tsdown\""
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.188.1",
-		"@oscarpalmer/toretto": "^0.51"
+		"@oscarpalmer/atoms": "^0.189.1",
+		"@oscarpalmer/toretto": "^0.52"
 	},
 	"devDependencies": {
 		"@oxlint/plugins": "^1.78",

package/src/css/a11y.scss

@@ -1,6 +1,6 @@
 /*! https://github.com/oscarpalmer/oui */
 
-@use './mixins' as mixins;
+@use './mixins/misc.mixins.scss' as miscMixins;
 
 .oui-vh {
 	:where(&) {
@@ -8,6 +8,6 @@
 	}
 
 	:where(&:not(:active, :focus, :focus-within)) {
-		@include mixins.visually-hidden;
+		@include miscMixins.visually-hidden;
 	}
 }

package/src/css/badge.scss

@@ -1,10 +1,10 @@
 /*! https://github.com/oscarpalmer/oui */
 
-@use './mixins.scss' as mixins;
+@use './mixins/badge.mixins.scss' as badgeMixins;
 
 .oui {
 	:where(&-pill, &-tag) {
-		@include mixins.badge;
+		@include badgeMixins.badge;
 	}
 
 	:where(&-pill) {
@@ -37,26 +37,26 @@
 	// Colors
 
 	:where(&-pill--blue, &-tag--blue) {
-		@include mixins.badge-blue;
+		@include badgeMixins.badge-blue;
 	}
 
 	:where(&-pill--green, &-tag--green) {
-		@include mixins.badge-green;
+		@include badgeMixins.badge-green;
 	}
 
 	:where(&-pill--orange, &-tag--orange) {
-		@include mixins.badge-orange;
+		@include badgeMixins.badge-orange;
 	}
 
 	:where(&-pill--purple, &-tag--purple) {
-		@include mixins.badge-purple;
+		@include badgeMixins.badge-purple;
 	}
 
 	:where(&-pill--red, &-tag--red) {
-		@include mixins.badge-red;
+		@include badgeMixins.badge-red;
 	}
 
 	:where(&-pill--yellow, &-tag--yellow) {
-		@include mixins.badge-yellow;
+		@include badgeMixins.badge-yellow;
 	}
 }

package/src/css/button.scss

@@ -1,34 +1,34 @@
 /*! https://github.com/oscarpalmer/oui */
 
-@use './mixins' as mixins;
+@use './mixins/button.mixins.scss' as buttonMixins;
 
 .oui-button {
 	:where(&) {
-		@include mixins.button;
+		@include buttonMixins.button;
 	}
 
 	:where(&--blue) {
-		@include mixins.button-blue;
+		@include buttonMixins.button-blue;
 	}
 
 	:where(&--green) {
-		@include mixins.button-green;
+		@include buttonMixins.button-green;
 	}
 
 	:where(&--orange) {
-		@include mixins.button-orange;
+		@include buttonMixins.button-orange;
 	}
 
 	:where(&--purple) {
-		@include mixins.button-purple;
+		@include buttonMixins.button-purple;
 	}
 
 	:where(&--red) {
-		@include mixins.button-red;
+		@include buttonMixins.button-red;
 	}
 
 	:where(&--yellow) {
-		@include mixins.button-yellow;
+		@include buttonMixins.button-yellow;
 	}
 
 	:where(&--rounded) {