@empathyco/x-components 3.0.0-alpha.50 → 3.0.0-alpha.54

package/CHANGELOG.md

@@ -3,6 +3,64 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.54](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.53...@empathyco/x-components@3.0.0-alpha.54) (2022-02-09)
+
+### ⚠ BREAKING CHANGES
+
+- **components:** Removed `CollapseFromTop` Animation. Use `animateScale()` instead.
+- **components:** Removed `TranslateFromLeft` and `TranslateFromRight` components. Use
+  `animateTranslate('left')` and `animateTranslate('right')` instead.
+
+### Features
+
+- **components:** created abstract factory for animations
+  ([a6120c1](https://github.com/empathyco/x/commit/a6120c135f93e5993f8d41b2b823085a2bf3d291)),
+  closes [EX-5355](https://searchbroker.atlassian.net/browse/EX-5355)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.53](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.52...@empathyco/x-components@3.0.0-alpha.53) (2022-02-08)
+
+### Continuous Integration
+
+- update rollup and plugins version
+  ([d240f3d](https://github.com/empathyco/x/commit/d240f3de8bc3e226d0bd8ac2d9bd4282cc660b86)),
+  closes [EX-5342](https://searchbroker.atlassian.net/browse/EX-5342)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.52](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.51...@empathyco/x-components@3.0.0-alpha.52) (2022-02-07)
+
+### Documentation
+
+- fix multiple broken links
+  ([226a2e5](https://github.com/empathyco/x/commit/226a2e54a4ed8832c7c47d26254e85c301913d98)),
+  closes [EX-5035](https://searchbroker.atlassian.net/browse/EX-5035)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.51](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.50...@empathyco/x-components@3.0.0-alpha.51) (2022-02-04)
+
+### Code Refactoring
+
+- change to the top of the wiring the ParamsLoadedFromUrl event.
+  ([26634c8](https://github.com/empathyco/x/commit/26634c8010bc4d2e795caceefc622c6329fad72c)),
+  closes [EX-5327](https://searchbroker.atlassian.net/browse/EX-5327)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.50](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.49...@empathyco/x-components@3.0.0-alpha.50) (2022-02-04)
 
 ### Features

package/core/index.js

@@ -1,43 +1,20 @@
 export { default as AnimateWidth } from '../js/components/animations/animate-width.vue.js';
-export { default as CollapseFromTop } from '../js/components/animations/collapse-from-top.vue.js';
-export { createCollapseAnimationMixin } from '../js/components/animations/animations.mixin.js';
 export { default as CollapseHeight } from '../js/components/animations/collapse-height.vue.js';
 export { default as CollapseWidth } from '../js/components/animations/collapse-width.vue.js';
 export { default as CrossFade } from '../js/components/animations/cross-fade.vue.js';
 export { default as FadeAndSlide } from '../js/components/animations/fade-and-slide.vue.js';
-export { arrayToObject, createEmitterArrayFilter, deepFilter, deepFlat, groupItemsBy, isArrayEmpty } from '../js/utils/array.js';
-export { noOp } from '../js/utils/function.js';
-export { CancelSymbol, cancellablePromise } from '../js/utils/cancellable-promise.js';
-export { clone } from '../js/utils/clone.js';
-export { currencyFormatter } from '../js/utils/currency-formatter.js';
-export { debounce as debounceFunction } from '../js/utils/debounce.js';
-export { areFiltersDifferent, createRawFilters } from '../js/utils/filters.js';
-export { getURLParameter } from '../js/utils/get-url-parameters.js';
-export { isElementEqualOrContained } from '../js/utils/html.js';
-export { normalizeString } from '../js/utils/normalize.js';
-export { isInRange } from '../js/utils/number.js';
-export { cleanUndefined, forEach, getNewAndUpdatedKeys, map, objectFilter, reduce } from '../js/utils/object.js';
-export { createOrigin } from '../js/utils/origin.js';
-export { sanitize } from '../js/utils/sanitize.js';
-export { localStorageService } from '../js/utils/storage.js';
-export { capitalize, isStringEmpty, toKebabCase } from '../js/utils/string.js';
-export { throttle as throttleFunction } from '../js/utils/throttle.js';
-export { default as StaggeringTransitionGroup } from '../js/components/animations/staggering-transition-group.vue.js';
 export { default as StaggeredFadeAndSlide } from '../js/components/animations/staggered-fade-and-slide.vue.js';
-export { default as TranslateFromLeft } from '../js/components/animations/translate-from-left.vue.js';
-export { default as TranslateFromRight } from '../js/components/animations/translate-from-right.vue.js';
-export { default as BaseEventButton } from '../js/components/base-event-button.vue.js';
-export { NoElement } from '../js/components/no-element.js';
-export { default as BaseDropdown } from '../js/components/base-dropdown.vue.js';
-export { XEmit, XOn } from '../js/components/decorators/bus.decorators.js';
-export { default as ColumnPickerMixin } from '../js/components/column-picker/column-picker.mixin.js';
+export { default as StaggeringTransitionGroup } from '../js/components/animations/staggering-transition-group.vue.js';
+export { createCollapseAnimationMixin } from '../js/components/animations/animations.mixin.js';
+export { createDirectionalAnimationFactory } from '../js/components/animations/create-directional-animation-factory.js';
+export { animateClipPath } from '../js/components/animations/animate-clip-path/animate-clip-path.factory.js';
+export { animateScale } from '../js/components/animations/animate-scale/animate-scale.factory.js';
+export { animateTranslate } from '../js/components/animations/animate-translate/animate-translate.factory.js';
 export { default as BaseColumnPickerDropdown } from '../js/components/column-picker/base-column-picker-dropdown.vue.js';
 export { default as BaseColumnPickerList } from '../js/components/column-picker/base-column-picker-list.vue.js';
-export { XInject, XProvide } from '../js/components/decorators/injection.decorators.js';
+export { default as ColumnPickerMixin } from '../js/components/column-picker/column-picker.mixin.js';
 export { default as BaseCurrency } from '../js/components/currency/base-currency.vue.js';
 export { default as BasePriceFilterLabel } from '../js/components/filters/labels/base-price-filter-label.vue.js';
-export { default as StarIcon } from '../js/components/icons/star.vue.js';
-export { default as BaseRating } from '../js/components/base-rating.vue.js';
 export { default as BaseRatingFilterLabel } from '../js/components/filters/labels/base-rating-filter-label.vue.js';
 export { default as ArrowDownIcon } from '../js/components/icons/arrow-down.vue.js';
 export { default as ArrowLeftIcon } from '../js/components/icons/arrow-left.vue.js';
@@ -83,6 +60,7 @@ export { default as Nq4Icon } from '../js/components/icons/nq-4.vue.js';
 export { default as PlusIcon } from '../js/components/icons/plus.vue.js';
 export { default as SearchIcon } from '../js/components/icons/search.vue.js';
 export { default as ShowIcon } from '../js/components/icons/show.vue.js';
+export { default as StarIcon } from '../js/components/icons/star.vue.js';
 export { default as SearchTinyIcon } from '../js/components/icons/search-tiny.vue.js';
 export { default as TagIcon } from '../js/components/icons/tag.vue.js';
 export { default as TrashOpenIcon } from '../js/components/icons/trash-open.vue.js';
@@ -90,34 +68,19 @@ export { default as TrashIcon } from '../js/components/icons/trash.vue.js';
 export { default as TrendingTinyIcon } from '../js/components/icons/trending-tiny.vue.js';
 export { default as TrendingIcon } from '../js/components/icons/trending.vue.js';
 export { default as UserIcon } from '../js/components/icons/user.vue.js';
-export { Getter, State } from '../js/components/decorators/store.decorators.js';
-export { RootXStoreModule } from '../js/store/x.module.js';
-export { BaseXBus, bus } from '../js/plugins/x-bus.js';
-export { getXComponentXModuleName, isXComponent } from '../js/components/x-component.utils.js';
-export { createXComponentAPIMixin, getBusAPI, getRootXComponent } from '../js/plugins/x-plugin.mixin.js';
-export { XPlugin, xPlugin } from '../js/plugins/x-plugin.js';
-export { xComponentMixin } from '../js/components/x-component.mixin.js';
-export { createFetchAndSaveActions } from '../js/store/utils/fetch-and-save-action.utils.js';
-export { setStatus } from '../js/store/utils/status-store.utils.js';
-export { createStoreEmitters } from '../js/store/utils/store-emitters.utils.js';
-export { createWireFromFunction, wireCommit, wireCommitWithoutPayload, wireDispatch, wireDispatchWithoutPayload, wireService, wireServiceWithoutPayload } from '../js/wiring/wires.factory.js';
-export { createWiring, getStateAndGettersFromModule } from '../js/wiring/wiring.utils.js';
-export { namespacedWireCommit, namespacedWireCommitWithoutPayload, namespacedWireDispatch, namespacedWireDispatchWithoutPayload } from '../js/wiring/namespaced-wires.factory.js';
-export { default as BaseModal } from '../js/components/modals/base-modal.vue.js';
-export { default as BaseIdModal } from '../js/components/modals/base-id-modal.vue.js';
-export { default as ScrollMixin } from '../js/components/scroll/scroll.mixin.js';
-export { default as BaseScroll } from '../js/components/scroll/base-scroll.vue.js';
 export { default as FixedHeaderAndAsidesLayout } from '../js/components/layouts/fixed-header-and-asides-layout.vue.js';
-export { default as BaseTogglePanel } from '../js/components/panels/base-toggle-panel.vue.js';
-export { default as BaseIdTogglePanel } from '../js/components/panels/base-id-toggle-panel.vue.js';
 export { default as MultiColumnMaxWidthLayout } from '../js/components/layouts/multi-column-max-width-layout.vue.js';
 export { default as SingleColumnLayout } from '../js/components/layouts/single-column-layout.vue.js';
 export { default as BaseEventsModalClose } from '../js/components/modals/base-events-modal-close.vue.js';
 export { default as BaseEventsModal } from '../js/components/modals/base-events-modal.vue.js';
 export { default as BaseEventsModalOpen } from '../js/components/modals/base-events-modal-open.vue.js';
+export { default as BaseModal } from '../js/components/modals/base-modal.vue.js';
+export { default as BaseIdModal } from '../js/components/modals/base-id-modal.vue.js';
 export { default as BaseIdModalClose } from '../js/components/modals/base-id-modal-close.vue.js';
 export { default as BaseIdModalOpen } from '../js/components/modals/base-id-modal-open.vue.js';
 export { default as BaseHeaderTogglePanel } from '../js/components/panels/base-header-toggle-panel.vue.js';
+export { default as BaseTogglePanel } from '../js/components/panels/base-toggle-panel.vue.js';
+export { default as BaseIdTogglePanel } from '../js/components/panels/base-id-toggle-panel.vue.js';
 export { default as BaseIdTogglePanelButton } from '../js/components/panels/base-id-toggle-panel-button.vue.js';
 export { default as BaseAddToCart } from '../js/components/result/base-result-add-to-cart.vue.js';
 export { default as BaseResultCurrentPrice } from '../js/components/result/base-result-current-price.vue.js';
@@ -127,25 +90,63 @@ export { default as BaseResultPreviousPrice } from '../js/components/result/base
 export { default as BaseFallbackImage } from '../js/components/result/base-result-fallback-image.vue.js';
 export { default as BasePlaceholderImage } from '../js/components/result/base-result-placeholder-image.vue.js';
 export { default as BaseResultRating } from '../js/components/result/base-result-rating.vue.js';
+export { default as BaseScroll } from '../js/components/scroll/base-scroll.vue.js';
+export { default as ScrollMixin } from '../js/components/scroll/scroll.mixin.js';
 export { default as BaseSuggestion } from '../js/components/suggestions/base-suggestion.vue.js';
 export { default as BaseSuggestions } from '../js/components/suggestions/base-suggestions.vue.js';
 export { default as AutoProgressBar } from '../js/components/auto-progress-bar.vue.js';
-export { LIST_ITEMS_KEY } from '../js/components/decorators/injection.consts.js';
+export { default as BaseEventButton } from '../js/components/base-event-button.vue.js';
+export { default as BaseDropdown } from '../js/components/base-dropdown.vue.js';
 export { default as BaseGrid } from '../js/components/base-grid.vue.js';
-export { DirectionalFocusNavigationService } from '../js/services/directional-focus-navigation.service.js';
 export { default as BaseKeyboardNavigation } from '../js/components/base-keyboard-navigation.vue.js';
+export { default as BaseRating } from '../js/components/base-rating.vue.js';
 export { default as BaseVariableColumnGrid } from '../js/components/base-variable-column-grid.vue.js';
-export { Debounce } from '../js/components/decorators/debounce.decorators.js';
+export { NoElement } from '../js/components/no-element.js';
 export { default as SlidingPanel } from '../js/components/sliding-panel.vue.js';
 export { default as ItemsList } from '../js/components/items-list.vue.js';
 export { default as LocationProvider } from '../js/components/location-provider.vue.js';
 export { default as GlobalXBus } from '../js/components/global-x-bus.vue.js';
 export { default as SnippetCallbacks } from '../js/components/snippet-callbacks.vue.js';
+export { XEmit, XOn } from '../js/components/decorators/bus.decorators.js';
+export { Debounce } from '../js/components/decorators/debounce.decorators.js';
+export { LIST_ITEMS_KEY } from '../js/components/decorators/injection.consts.js';
+export { XInject, XProvide } from '../js/components/decorators/injection.decorators.js';
+export { Getter, State } from '../js/components/decorators/store.decorators.js';
 export { ItemsListInjectionMixin } from '../js/components/items-list-injection.mixin.js';
+export { xComponentMixin } from '../js/components/x-component.mixin.js';
+export { getXComponentXModuleName, isXComponent } from '../js/components/x-component.utils.js';
 export { infiniteScroll } from '../js/directives/infinite-scroll/infinite-scroll.js';
 export { compileMessage } from '../js/filters/compile-message.filter.js';
-export { debounce, filter, filterBlacklistedModules, filterFalsyPayload, filterTruthyPayload, filterWhitelistedModules, mapWire, throttle } from '../js/wiring/wires.operators.js';
+export { BaseXBus, bus } from '../js/plugins/x-bus.js';
+export { XPlugin, xPlugin } from '../js/plugins/x-plugin.js';
+export { createXComponentAPIMixin, getBusAPI, getRootXComponent } from '../js/plugins/x-plugin.mixin.js';
+export { DirectionalFocusNavigationService } from '../js/services/directional-focus-navigation.service.js';
+export { createFetchAndSaveActions } from '../js/store/utils/fetch-and-save-action.utils.js';
+export { setStatus } from '../js/store/utils/status-store.utils.js';
+export { createStoreEmitters } from '../js/store/utils/store-emitters.utils.js';
+export { RootXStoreModule } from '../js/store/x.module.js';
+export { arrayToObject, createEmitterArrayFilter, deepFilter, deepFlat, groupItemsBy, isArrayEmpty } from '../js/utils/array.js';
+export { CancelSymbol, cancellablePromise } from '../js/utils/cancellable-promise.js';
+export { clone } from '../js/utils/clone.js';
+export { currencyFormatter } from '../js/utils/currency-formatter.js';
+export { debounce as debounceFunction } from '../js/utils/debounce.js';
+export { areFiltersDifferent, createRawFilters } from '../js/utils/filters.js';
+export { noOp } from '../js/utils/function.js';
+export { getURLParameter } from '../js/utils/get-url-parameters.js';
+export { isElementEqualOrContained } from '../js/utils/html.js';
+export { normalizeString } from '../js/utils/normalize.js';
+export { isInRange } from '../js/utils/number.js';
+export { cleanUndefined, forEach, getNewAndUpdatedKeys, map, objectFilter, reduce } from '../js/utils/object.js';
+export { createOrigin } from '../js/utils/origin.js';
+export { sanitize } from '../js/utils/sanitize.js';
+export { localStorageService } from '../js/utils/storage.js';
+export { capitalize, isStringEmpty, toKebabCase } from '../js/utils/string.js';
+export { throttle as throttleFunction } from '../js/utils/throttle.js';
+export { namespacedWireCommit, namespacedWireCommitWithoutPayload, namespacedWireDispatch, namespacedWireDispatchWithoutPayload } from '../js/wiring/namespaced-wires.factory.js';
 export { namespacedDebounce, namespacedThrottle } from '../js/wiring/namespaced-wires.operators.js';
+export { createWireFromFunction, wireCommit, wireCommitWithoutPayload, wireDispatch, wireDispatchWithoutPayload, wireService, wireServiceWithoutPayload } from '../js/wiring/wires.factory.js';
+export { debounce, filter, filterBlacklistedModules, filterFalsyPayload, filterTruthyPayload, filterWhitelistedModules, mapWire, throttle } from '../js/wiring/wires.operators.js';
+export { createWiring, getStateAndGettersFromModule } from '../js/wiring/wiring.utils.js';
 export { BaseXAPI } from '../js/x-installer/api/base-api.js';
 export { XInstaller } from '../js/x-installer/x-installer/x-installer.js';
 //# sourceMappingURL=index.js.map

package/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/design-system/.-mixins.css

@@ -1 +0,0 @@
-@use 'sass:string';

package/design-system/badge-default.css

@@ -6,13 +6,16 @@
   --x-size-border-width-badge-default: 0;
   --x-size-width-badge-default: 1.5em;
   --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
-  --x-size-font-badge-default: var(--x-size-font-base-xs); }
+  --x-size-font-badge-default: var(--x-size-font-base-xs);
+}
 
 [dir="ltr"] .x-badge {
-  right: calc(var(--x-size-width-badge-default) / 4); }
+  right: calc(var(--x-size-width-badge-default) / 4);
+}
 
 [dir="rtl"] .x-badge {
-  left: calc(var(--x-size-width-badge-default) / 4); }
+  left: calc(var(--x-size-width-badge-default) / 4);
+}
 
 .x-badge {
   border-radius: var(--x-size-border-radius-badge-default);
@@ -35,9 +38,12 @@
   padding: 2px;
   background: var(--x-color-background-badge-default);
   color: var(--x-color-text-badge-default);
-  border-color: var(--x-color-border-badge-default); }
-  [dir="rtl"] .x-badge {
-    transform: translate(-50%, -50%); }
+  border-color: var(--x-color-border-badge-default);
+}
+[dir="rtl"] .x-badge {
+  transform: translate(-50%, -50%);
+}
 
 .x-badge-container {
-  position: relative; }
+  position: relative;
+}

package/design-system/base.css

@@ -3,8 +3,8 @@
   --x-size-border-radius-base-s: var(--x-size-base-02);
   --x-size-border-radius-base-m: var(--x-size-base-06);
   --x-size-border-radius-base-pill: 99999px;
-  --x-size-border-width-base: 1px; }
-
+  --x-size-border-width-base: 1px;
+}
 :root {
   --x-color-base-lead: #36515b;
   --x-color-base-auxiliary: #667981;
@@ -16,8 +16,8 @@
   --x-color-base-accent: #b90276;
   --x-color-base-enable: #00705c;
   --x-color-base-disable: #e11f26;
-  --x-color-base-transparent: transparent; }
-
+  --x-color-base-transparent: transparent;
+}
 :root {
   --x-size-base-01: 2px;
   --x-size-base-02: 4px;
@@ -38,10 +38,10 @@
   --x-size-base-17: 176px;
   --x-size-base-18: 208px;
   --x-size-base-19: 240px;
-  --x-size-base-20: 272px; }
-
+  --x-size-base-20: 272px;
+}
 :root {
-  --x-font-family-base: 'Montserrat', sans-serif;
+  --x-font-family-base: "Montserrat", sans-serif;
   --x-size-font-base-xs: 12px;
   --x-size-font-base-s: 14px;
   --x-size-font-base-m: 16px;
@@ -52,4 +52,5 @@
   --x-number-font-weight-base-bold: 600;
   --x-size-line-height-base-s: 16px;
   --x-size-line-height-base-m: 24px;
-  --x-size-line-height-base-l: 32px; }
+  --x-size-line-height-base-l: 32px;
+}

package/design-system/button-card.css

@@ -3,7 +3,8 @@
   --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
   --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
   --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card); }
+  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
+}
 
 .x-button--card.x-button,
 .x-button--card .x-button {
@@ -17,4 +18,5 @@
   );
   --x-size-border-radius-bottom-left-button-default: var(
     --x-size-border-radius-bottom-left-button-card
-  ); }
+  );
+}

package/design-system/button-default.css

@@ -19,25 +19,41 @@
   --x-font-family-button-default: var(--x-font-family-text);
   --x-size-font-button-default: var(--x-size-font-text);
   --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
-  --x-size-line-height-button-default: var(--x-size-line-height-text); }
+  --x-size-line-height-button-default: var(--x-size-line-height-text);
+}
 
-@use 'sass:string';
 [dir="ltr"] .x-button {
-  padding-right: var(--x-size-padding-right-button-default); }
+  padding-right: var(--x-size-padding-right-button-default);
+}
+
 [dir="rtl"] .x-button {
-  padding-left: var(--x-size-padding-right-button-default); }
+  padding-left: var(--x-size-padding-right-button-default);
+}
+
 [dir="ltr"] .x-button {
-  padding-left: var(--x-size-padding-left-button-default); }
+  padding-left: var(--x-size-padding-left-button-default);
+}
+
 [dir="rtl"] .x-button {
-  padding-right: var(--x-size-padding-left-button-default); }
+  padding-right: var(--x-size-padding-left-button-default);
+}
+
 [dir="ltr"] .x-button {
-  border-left-width: var(--x-size-border-width-left-button-default); }
+  border-left-width: var(--x-size-border-width-left-button-default);
+}
+
 [dir="rtl"] .x-button {
-  border-right-width: var(--x-size-border-width-left-button-default); }
+  border-right-width: var(--x-size-border-width-left-button-default);
+}
+
 [dir="ltr"] .x-button {
-  border-right-width: var(--x-size-border-width-right-button-default); }
+  border-right-width: var(--x-size-border-width-right-button-default);
+}
+
 [dir="rtl"] .x-button {
-  border-left-width: var(--x-size-border-width-right-button-default); }
+  border-left-width: var(--x-size-border-width-right-button-default);
+}
+
 .x-button {
   display: inline-flex;
   justify-content: center;
@@ -57,9 +73,13 @@
   font-size: var(--x-size-font-button-default);
   font-weight: var(--x-number-font-weight-button-default);
   line-height: var(--x-size-line-height-button-default);
-  cursor: pointer; }
-  @media not all and (min-resolution: 0.001dpcm) {
-    .x-button {
-      gap: 0; }
-      .x-button > *:not(:last-child) {
-        margin-right: var(--x-size-gap-button-default); } }
+  cursor: pointer;
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-button {
+    gap: 0;
+  }
+  .x-button > *:not(:last-child) {
+    margin-right: var(--x-size-gap-button-default);
+  }
+}

package/design-system/button-ghost.css

@@ -1,18 +1,22 @@
 :root {
   --x-color-background-button-ghost: transparent;
   --x-color-border-button-ghost: transparent;
-  --x-color-text-button-ghost: var(--x-color-base-lead); }
+  --x-color-text-button-ghost: var(--x-color-base-lead);
+}
 
 .x-button--ghost.x-button,
 .x-button--ghost .x-button {
   --x-color-background-button-default: var(--x-color-background-button-ghost);
   --x-color-border-button-default: var(--x-color-border-button-ghost);
-  --x-color-text-button-default: var(--x-color-text-button-ghost); }
+  --x-color-text-button-default: var(--x-color-text-button-ghost);
+}
 
 .x-button--ghost.x-button--ghost-start.x-button,
 .x-button--ghost.x-button--ghost-start .x-button {
-  --x-size-padding-left-button-default: 0; }
+  --x-size-padding-left-button-default: 0;
+}
 
 .x-button--ghost.x-button--ghost-end.x-button,
 .x-button--ghost.x-button--ghost-end .x-button {
-  --x-size-padding-right-button-default: 0; }
+  --x-size-padding-right-button-default: 0;
+}

package/design-system/button-pill.css

@@ -3,7 +3,8 @@
   --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
   --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
   --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill); }
+  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
+}
 
 .x-button--pill.x-button,
 .x-button--pill .x-button {
@@ -17,4 +18,5 @@
   );
   --x-size-border-radius-bottom-left-button-default: var(
       --x-size-border-radius-bottom-left-button-pill
-  ); }
+  );
+}

package/design-system/button-primary.css

@@ -6,7 +6,8 @@
   --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
   --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
   --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
-  --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary); }
+  --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
+}
 
 .x-button--primary.x-button,
 .x-button--primary .x-button {
@@ -16,4 +17,5 @@
   --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-primary);
   --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-primary);
   --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-primary);
-  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-primary); }
+  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-primary);
+}

package/design-system/button-round.css

@@ -3,7 +3,8 @@
   --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
   --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
   --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round); }
+  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
+}
 
 .x-button--round.x-button,
 .x-button--round .x-button {
@@ -20,4 +21,5 @@
   );
   min-width: var(--x-size-height-button-default);
   --x-size-padding-left-button-default: 0;
-  --x-size-padding-right-button-default: 0; }
+  --x-size-padding-right-button-default: 0;
+}

package/design-system/button-secondary.css

@@ -6,7 +6,8 @@
   --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
   --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
   --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
-  --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary); }
+  --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
+}
 
 .x-button--secondary.x-button,
 .x-button--secondary .x-button {
@@ -16,4 +17,5 @@
   --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-secondary);
   --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-secondary);
   --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-secondary);
-  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-secondary); }
+  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-secondary);
+}

package/design-system/button-tertiary.css

@@ -6,7 +6,8 @@
   --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
   --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
   --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary); }
+  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
+}
 
 .x-button--tertiary.x-button,
 .x-button--tertiary .x-button {
@@ -16,4 +17,5 @@
   --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-tertiary);
   --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-tertiary);
   --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
-  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary); }
+  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
+}