ropav 0.1.6 → 0.1.7

package/dist/styles-api.d.ts

@@ -12,7 +12,6 @@ export interface StylesApiPartOptions {
     compatibilityStyle?: StyleValue;
 }
 type StylesApiSource<Part extends string> = Pick<StylesApiProps<Part>, 'classNames' | 'styles'>;
-export declare function presence(value: unknown): '' | undefined;
 export declare function resolveStylesApiPart<Part extends string>(source: Readonly<StylesApiSource<Part>>, part: Part, options?: StylesApiPartOptions): Pick<HTMLAttributes, 'class' | 'style'>;
 export declare function useStylesApi<Part extends string>(source: Readonly<StylesApiSource<Part>>, rootPart: Part): {
     attrs: import('vue').Attrs;

package/dist/styles-api.js

@@ -1,8 +1,5 @@
 import { mergeProps, useAttrs } from "vue";
 //#region src/styles-api.ts
-function presence(value) {
-	return value ? "" : void 0;
-}
 function resolveStylesApiPart(source, part, options = {}) {
 	return {
 		class: [
@@ -46,4 +43,4 @@ function useStylesApi(source, rootPart) {
 	};
 }
 //#endregion
-export { useStylesApi as n, presence as t };
+export { useStylesApi as t };

package/dist/switch.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-switch[data-v-524fc431] {
+.rp-switch[data-v-20e564ff] {
     --_rp-switch-color: var(--rp-color-control-selected-bg);
     --_rp-switch-font-size: var(--rp-font-size-md);
     --_rp-switch-default-track-width: 46px;
@@ -26,15 +26,15 @@
     font-family: var(--rp-font-family);
     user-select: none;
 }
-.rp-switch--disabled[data-v-524fc431] {
+.rp-switch--disabled[data-v-20e564ff] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-switch[data-v-524fc431] {
+.rp-switch[data-v-20e564ff] {
     gap: var(--rp-spacing-2);
     font-size: var(--_rp-switch-font-size);
 }
-.rp-switch__native[data-v-524fc431] {
+.rp-switch__native[data-v-20e564ff] {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -46,11 +46,11 @@
     border-width: 0;
     pointer-events: none;
 }
-.rp-switch__native:focus-visible + .rp-switch__track[data-v-524fc431] {
+.rp-switch__native:focus-visible + .rp-switch__track[data-v-20e564ff] {
     border-color: var(--rp-color-control-border-focus);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-switch__track[data-v-524fc431] {
+.rp-switch__track[data-v-20e564ff] {
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -61,17 +61,17 @@
     border-radius: var(--rp-radius-full);
     transition: background-color var(--rp-transition-fast);
 }
-.rp-switch--checked .rp-switch__track[data-v-524fc431] {
+.rp-switch--checked .rp-switch__track[data-v-20e564ff] {
     background-color: var(--_rp-switch-color);
 }
-.rp-switch--invalid .rp-switch__track[data-v-524fc431] {
+.rp-switch--invalid .rp-switch__track[data-v-20e564ff] {
     outline: var(--rp-border-width-thin) solid var(--_rp-switch-invalid-border);
     outline-offset: var(--_rp-switch-thumb-offset);
 }
-.rp-switch--invalid .rp-switch__native:focus-visible + .rp-switch__track[data-v-524fc431] {
+.rp-switch--invalid .rp-switch__native:focus-visible + .rp-switch__track[data-v-20e564ff] {
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-switch-invalid-ring);
 }
-.rp-switch__thumb[data-v-524fc431] {
+.rp-switch__thumb[data-v-20e564ff] {
     position: absolute;
     left: var(--_rp-switch-thumb-offset);
     width: var(--_rp-switch-thumb-size);
@@ -81,38 +81,38 @@
     box-shadow: var(--rp-shadow-sm);
     transition: transform var(--rp-transition-fast);
 }
-.rp-switch--checked .rp-switch__thumb[data-v-524fc431] {
+.rp-switch--checked .rp-switch__thumb[data-v-20e564ff] {
     transform: translateX(calc(var(--_rp-switch-track-width) - var(--_rp-switch-thumb-size) - var(--_rp-switch-thumb-offset) * 2));
 }
-.rp-switch__label[data-v-524fc431] {
+.rp-switch__label[data-v-20e564ff] {
     line-height: var(--rp-line-height-md);
     color: var(--rp-color-text);
 }
-.rp-switch--size-xs[data-v-524fc431] {
+.rp-switch--size-xs[data-v-20e564ff] {
     --_rp-switch-default-track-width: 32px;
     --_rp-switch-default-track-height: 16px;
     --_rp-switch-default-thumb-size: 12px;
     --_rp-switch-font-size: var(--rp-font-size-xs);
 }
-.rp-switch--size-sm[data-v-524fc431] {
+.rp-switch--size-sm[data-v-20e564ff] {
     --_rp-switch-default-track-width: 38px;
     --_rp-switch-default-track-height: 20px;
     --_rp-switch-default-thumb-size: 14px;
     --_rp-switch-font-size: var(--rp-font-size-sm);
 }
-.rp-switch--size-md[data-v-524fc431] {
+.rp-switch--size-md[data-v-20e564ff] {
     --_rp-switch-default-track-width: 46px;
     --_rp-switch-default-track-height: 24px;
     --_rp-switch-default-thumb-size: 18px;
     --_rp-switch-font-size: var(--rp-font-size-md);
 }
-.rp-switch--size-lg[data-v-524fc431] {
+.rp-switch--size-lg[data-v-20e564ff] {
     --_rp-switch-default-track-width: 56px;
     --_rp-switch-default-track-height: 30px;
     --_rp-switch-default-thumb-size: 22px;
     --_rp-switch-font-size: var(--rp-font-size-lg);
 }
-.rp-switch--size-xl[data-v-524fc431] {
+.rp-switch--size-xl[data-v-20e564ff] {
     --_rp-switch-default-track-width: 72px;
     --_rp-switch-default-track-height: 36px;
     --_rp-switch-default-thumb-size: 28px;

package/dist/switch.js

@@ -1,10 +1,12 @@
 import './switch.css';
 import { t as useControllableValue } from "./useControllableValue.js";
-import { n as useStylesApi, t as presence } from "./styles-api.js";
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute } from "./attributes.js";
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { r as getComponentColorValue } from "./componentColors.js";
+import { i as getComponentColorValue } from "./componentColors.js";
 import { r as useCheckedFormControl } from "./useFormControl.js";
+import { o as splitCompatibilityAttributes, t as composeEventHandlers } from "./attributes2.js";
 import { t as useControlState } from "./useControlState.js";
 import { child, computed, createIf, createSlot, defineVaporComponent, next, nextTick, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref } from "vue";
 //#region src/components/switch/useSwitch.ts
@@ -44,8 +46,8 @@ function useSwitch(props, emitUpdate, getValue = () => props.modelValue ?? false
 }
 //#endregion
 //#region src/components/switch/switch.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-524fc431>");
-var t1 = template("<label data-v-524fc431><input data-v-524fc431><span data-v-524fc431><span data-v-524fc431></span></span>", 1);
+var t0 = template("<span data-v-20e564ff>");
+var t1 = template("<label data-v-20e564ff><input data-v-20e564ff><span data-v-20e564ff><span data-v-20e564ff></span></span>", 1);
 //#endregion
 //#region src/components/switch/switch.vue
 var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -102,27 +104,24 @@ var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		const rootAttrs = computed(() => getRootAttrs({
 			class: rootClass.value,
 			style: rootStyle.value,
-			"data-disabled": presence(control.disabled),
-			"data-invalid": presence(control.invalid),
+			"data-disabled": toPresenceAttribute(control.disabled),
+			"data-invalid": toPresenceAttribute(control.invalid),
 			"data-state": controllable.value.value ? "checked" : "unchecked"
 		}));
 		const nativeInputAttrs = computed(() => {
 			const attrs = props.inputAttrs ?? {};
-			const { class: compatibilityClass, style: compatibilityStyle, ...forwardedAttrs } = attrs;
+			const { compatibilityClass, compatibilityStyle, forwardedAttributes } = splitCompatibilityAttributes(attrs);
 			return {
-				...forwardedAttrs,
+				...forwardedAttributes,
 				...getPartAttrs("input", {
 					class: "rp-switch__native",
 					compatibilityClass,
 					compatibilityStyle
 				}),
-				"data-disabled": presence(control.disabled),
-				"data-invalid": presence(control.invalid),
+				"data-disabled": toPresenceAttribute(control.disabled),
+				"data-invalid": toPresenceAttribute(control.invalid),
 				"data-state": controllable.value.value ? "checked" : "unchecked",
-				onChange(event) {
-					onChange(event);
-					attrs.onChange?.(event);
-				}
+				onChange: composeEventHandlers(onChange, attrs.onChange)
 			};
 		});
 		__expose({
@@ -171,7 +170,7 @@ var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		});
 		return n7;
 	}
-}), [["__scopeId", "data-v-524fc431"]]);
+}), [["__scopeId", "data-v-20e564ff"]]);
 //#endregion
 //#region src/components/switch/types.ts
 var switchParts = [

package/dist/tabs.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-tabs[data-v-163486d1] {
+.rp-tabs[data-v-6c4b3ab7] {
     box-sizing: border-box;
     display: grid;
     min-width: 0;
@@ -7,11 +7,11 @@
     font-family: var(--rp-font-family);
     color: var(--rp-color-text);
 }
-.rp-tabs--disabled[data-v-163486d1] {
+.rp-tabs--disabled[data-v-6c4b3ab7] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-tabs--vertical[data-v-163486d1] {
+.rp-tabs--vertical[data-v-6c4b3ab7] {
     display: flex;
     align-items: start;
     gap: var(--rp-spacing-5);
@@ -34,7 +34,7 @@
     flex: 1 1 0;
 }
 }@layer ropav.components {
-.rp-tabs-list[data-v-9bb1525b] {
+.rp-tabs-list[data-v-5266c337] {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -47,37 +47,37 @@
     background-color: transparent;
     border: 0;
 }
-.rp-tabs-list[data-v-9bb1525b] .rp-scroll-area__content {
+.rp-tabs-list[data-v-5266c337] .rp-scroll-area__content {
     display: flex;
     align-items: stretch;
     width: max-content;
     min-width: 100%;
     gap: 0;
 }
-.rp-tabs-list--vertical[data-v-9bb1525b] {
+.rp-tabs-list--vertical[data-v-5266c337] {
     width: max-content;
 }
-.rp-tabs-list--vertical[data-v-9bb1525b] .rp-scroll-area__content {
+.rp-tabs-list--vertical[data-v-5266c337] .rp-scroll-area__content {
     flex-direction: column;
 }
-.rp-tabs-list--line[data-v-9bb1525b] .rp-scroll-area__content {
+.rp-tabs-list--line[data-v-5266c337] .rp-scroll-area__content {
     border-bottom: var(--rp-border-width-medium) solid var(--rp-color-default-border);
 }
-.rp-tabs-list--line.rp-tabs-list--vertical[data-v-9bb1525b] .rp-scroll-area__content {
+.rp-tabs-list--line.rp-tabs-list--vertical[data-v-5266c337] .rp-scroll-area__content {
     border-bottom: 0;
     border-left: var(--rp-border-width-medium) solid var(--rp-color-default-border);
 }
-.rp-tabs-list--line.rp-tabs-list--vertical.rp-tabs-list--placement-right[data-v-9bb1525b] .rp-scroll-area__content {
+.rp-tabs-list--line.rp-tabs-list--vertical.rp-tabs-list--placement-right[data-v-5266c337] .rp-scroll-area__content {
     border-right: var(--rp-border-width-medium) solid var(--rp-color-default-border);
     border-left: 0;
 }
-.rp-tabs-list--pills[data-v-9bb1525b] .rp-scroll-area__content {
+.rp-tabs-list--pills[data-v-5266c337] .rp-scroll-area__content {
     gap: var(--rp-spacing-2);
 }
-.rp-tabs-list--outline[data-v-9bb1525b] {
+.rp-tabs-list--outline[data-v-5266c337] {
     position: relative;
 }
-.rp-tabs-list--outline[data-v-9bb1525b]::after {
+.rp-tabs-list--outline[data-v-5266c337]::after {
     position: absolute;
     z-index: 0;
     right: 0;
@@ -88,7 +88,7 @@
     background-color: var(--rp-color-default-border);
     pointer-events: none;
 }
-.rp-tabs-list--outline.rp-tabs-list--vertical[data-v-9bb1525b]::after {
+.rp-tabs-list--outline.rp-tabs-list--vertical[data-v-5266c337]::after {
     top: 0;
     right: auto;
     bottom: 0;
@@ -96,16 +96,16 @@
     width: var(--rp-border-width-thin);
     height: auto;
 }
-.rp-tabs-list--outline.rp-tabs-list--vertical.rp-tabs-list--placement-right[data-v-9bb1525b]::after {
+.rp-tabs-list--outline.rp-tabs-list--vertical.rp-tabs-list--placement-right[data-v-5266c337]::after {
     right: 0;
     left: auto;
 }
-.rp-tabs-list--disabled[data-v-9bb1525b] {
+.rp-tabs-list--disabled[data-v-5266c337] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
 }@layer ropav.components {
-.rp-tabs-trigger[data-v-6df68725] {
+.rp-tabs-trigger[data-v-20d5c2eb] {
     --_rp-tabs-trigger-fg: var(--rp-color-dimmed);
     --_rp-tabs-trigger-bg: transparent;
     --_rp-tabs-trigger-bg-hover: transparent;
@@ -149,7 +149,7 @@
     user-select: none;
     white-space: nowrap;
 }
-.rp-tabs-trigger[data-v-6df68725]::after {
+.rp-tabs-trigger[data-v-20d5c2eb]::after {
     position: absolute;
     right: 0;
     bottom: calc(-1 * var(--rp-border-width-medium));
@@ -159,81 +159,81 @@
     background-color: var(--_rp-tabs-trigger-indicator);
     transition: background-color var(--rp-transition-fast);
 }
-.rp-tabs-trigger[data-v-6df68725] svg {
+.rp-tabs-trigger[data-v-20d5c2eb] svg {
     width: 1em;
     height: 1em;
     flex: 0 0 auto;
     color: currentColor;
 }
-.rp-tabs-trigger--size-xs[data-v-6df68725] {
+.rp-tabs-trigger--size-xs[data-v-20d5c2eb] {
     --_rp-tabs-trigger-height: var(--rp-size-control-xs);
     --_rp-tabs-trigger-padding-y: 0;
     --_rp-tabs-trigger-padding-x: calc(var(--rp-size-control-xs) / 3);
     --_rp-tabs-trigger-gap: var(--rp-spacing-1);
     --_rp-tabs-trigger-font-size: var(--rp-font-size-xs);
 }
-.rp-tabs-trigger--size-sm[data-v-6df68725] {
+.rp-tabs-trigger--size-sm[data-v-20d5c2eb] {
     --_rp-tabs-trigger-height: var(--rp-size-control-sm);
     --_rp-tabs-trigger-padding-y: 0;
     --_rp-tabs-trigger-padding-x: calc(var(--rp-size-control-sm) / 3);
     --_rp-tabs-trigger-gap: var(--rp-spacing-2);
     --_rp-tabs-trigger-font-size: var(--rp-font-size-sm);
 }
-.rp-tabs-trigger--size-md[data-v-6df68725] {
+.rp-tabs-trigger--size-md[data-v-20d5c2eb] {
     --_rp-tabs-trigger-height: var(--rp-size-control-md);
     --_rp-tabs-trigger-padding-y: 0;
     --_rp-tabs-trigger-padding-x: calc(var(--rp-size-control-md) / 3);
     --_rp-tabs-trigger-gap: var(--rp-spacing-2);
     --_rp-tabs-trigger-font-size: var(--rp-font-size-md);
 }
-.rp-tabs-trigger--size-lg[data-v-6df68725] {
+.rp-tabs-trigger--size-lg[data-v-20d5c2eb] {
     --_rp-tabs-trigger-height: var(--rp-size-control-lg);
     --_rp-tabs-trigger-padding-y: 0;
     --_rp-tabs-trigger-padding-x: calc(var(--rp-size-control-lg) / 3);
     --_rp-tabs-trigger-gap: var(--rp-spacing-3);
     --_rp-tabs-trigger-font-size: var(--rp-font-size-lg);
 }
-.rp-tabs-trigger--size-xl[data-v-6df68725] {
+.rp-tabs-trigger--size-xl[data-v-20d5c2eb] {
     --_rp-tabs-trigger-height: var(--rp-size-control-xl);
     --_rp-tabs-trigger-padding-y: 0;
     --_rp-tabs-trigger-padding-x: calc(var(--rp-size-control-xl) / 3);
     --_rp-tabs-trigger-gap: var(--rp-spacing-3);
     --_rp-tabs-trigger-font-size: var(--rp-font-size-xl);
 }
-.rp-tabs-trigger[data-v-6df68725]:hover:not(:disabled) {
+.rp-tabs-trigger[data-v-20d5c2eb]:hover:not(:disabled) {
     --_rp-tabs-trigger-fg: var(--rp-color-text);
     --_rp-tabs-trigger-bg: var(--_rp-tabs-trigger-bg-hover);
     --_rp-tabs-trigger-border: var(--_rp-tabs-trigger-border-hover);
 }
-.rp-tabs-trigger[data-v-6df68725]:focus-visible {
+.rp-tabs-trigger[data-v-20d5c2eb]:focus-visible {
     z-index: 2;
     outline: none;
     border-color: var(--rp-color-control-border-focus);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-tabs-trigger--active[data-v-6df68725] {
+.rp-tabs-trigger--active[data-v-20d5c2eb] {
     --_rp-tabs-trigger-fg: var(--rp-color-text);
     --_rp-tabs-trigger-indicator: var(--rp-primary-color-filled);
 }
-.rp-tabs-trigger--pills[data-v-6df68725]::after, .rp-tabs-trigger--outline[data-v-6df68725]::after {
+.rp-tabs-trigger--pills[data-v-20d5c2eb]::after, .rp-tabs-trigger--outline[data-v-20d5c2eb]::after {
     display: none;
 }
-.rp-tabs-trigger--pills[data-v-6df68725] {
+.rp-tabs-trigger--pills[data-v-20d5c2eb] {
     --_rp-tabs-trigger-bg-hover: var(--rp-color-default-hover);
     --_rp-tabs-trigger-radius: var(--rp-radius-md);
 }
-.rp-tabs-trigger--pills.rp-tabs-trigger--active[data-v-6df68725] {
+.rp-tabs-trigger--pills.rp-tabs-trigger--active[data-v-20d5c2eb] {
     --_rp-tabs-trigger-fg: var(--rp-color-white);
     --_rp-tabs-trigger-bg: var(--rp-primary-color-filled);
     --_rp-tabs-trigger-bg-hover: var(--rp-primary-color-filled-hover);
 }
-.rp-tabs-trigger--outline[data-v-6df68725] {
+.rp-tabs-trigger--outline[data-v-20d5c2eb] {
     --_rp-tabs-trigger-bg-hover: var(--rp-color-default-hover);
     --_rp-tabs-trigger-radius: var(--rp-radius-md) var(--rp-radius-md) 0 0;
     z-index: 1;
     border: var(--rp-border-width-thin) solid var(--_rp-tabs-trigger-border);
 }
-.rp-tabs-trigger--outline.rp-tabs-trigger--active[data-v-6df68725] {
+.rp-tabs-trigger--outline.rp-tabs-trigger--active[data-v-20d5c2eb] {
     --_rp-tabs-trigger-fg: var(--rp-color-text);
     --_rp-tabs-trigger-bg: var(--_rp-tabs-trigger-outline-bg);
     --_rp-tabs-trigger-bg-hover: var(--_rp-tabs-trigger-outline-bg);
@@ -242,30 +242,30 @@
     z-index: 1;
     border-bottom-color: var(--_rp-tabs-trigger-bg);
 }
-.rp-tabs-trigger--outline.rp-tabs-trigger--vertical[data-v-6df68725] {
+.rp-tabs-trigger--outline.rp-tabs-trigger--vertical[data-v-20d5c2eb] {
     --_rp-tabs-trigger-radius: 0 var(--rp-radius-md) var(--rp-radius-md) 0;
 }
-.rp-tabs-trigger--outline.rp-tabs-trigger--vertical.rp-tabs-trigger--active[data-v-6df68725] {
+.rp-tabs-trigger--outline.rp-tabs-trigger--vertical.rp-tabs-trigger--active[data-v-20d5c2eb] {
     border-bottom-color: var(--_rp-tabs-trigger-border);
     border-left-color: var(--_rp-tabs-trigger-bg);
 }
-.rp-tabs-trigger--outline.rp-tabs-trigger--vertical.rp-tabs-trigger--placement-right[data-v-6df68725] {
+.rp-tabs-trigger--outline.rp-tabs-trigger--vertical.rp-tabs-trigger--placement-right[data-v-20d5c2eb] {
     --_rp-tabs-trigger-radius: var(--rp-radius-md) 0 0 var(--rp-radius-md);
 }
-.rp-tabs-trigger--outline.rp-tabs-trigger--vertical.rp-tabs-trigger--placement-right.rp-tabs-trigger--active[data-v-6df68725] {
+.rp-tabs-trigger--outline.rp-tabs-trigger--vertical.rp-tabs-trigger--placement-right.rp-tabs-trigger--active[data-v-20d5c2eb] {
     border-right-color: var(--_rp-tabs-trigger-bg);
     border-left-color: var(--_rp-tabs-trigger-border);
 }
-.rp-tabs-trigger--disabled[data-v-6df68725], .rp-tabs-trigger[data-v-6df68725]:disabled {
+.rp-tabs-trigger--disabled[data-v-20d5c2eb], .rp-tabs-trigger[data-v-20d5c2eb]:disabled {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-tabs-trigger--vertical[data-v-6df68725] {
+.rp-tabs-trigger--vertical[data-v-20d5c2eb] {
     justify-content: flex-start;
     width: 100%;
     text-align: left;
 }
-.rp-tabs-trigger--vertical[data-v-6df68725]::after {
+.rp-tabs-trigger--vertical[data-v-20d5c2eb]::after {
     top: 0;
     right: auto;
     bottom: 0;
@@ -273,19 +273,19 @@
     width: var(--rp-border-width-medium);
     height: auto;
 }
-.rp-tabs-trigger--vertical.rp-tabs-trigger--placement-right[data-v-6df68725]::after {
+.rp-tabs-trigger--vertical.rp-tabs-trigger--placement-right[data-v-20d5c2eb]::after {
     right: calc(-1 * var(--rp-border-width-medium));
     left: auto;
 }
-.rp-tabs-trigger--align-left[data-v-6df68725] {
+.rp-tabs-trigger--align-left[data-v-20d5c2eb] {
     justify-content: flex-start;
     text-align: left;
 }
-.rp-tabs-trigger--align-center[data-v-6df68725] {
+.rp-tabs-trigger--align-center[data-v-20d5c2eb] {
     justify-content: center;
     text-align: center;
 }
-.rp-tabs-trigger--align-right[data-v-6df68725] {
+.rp-tabs-trigger--align-right[data-v-20d5c2eb] {
     justify-content: flex-end;
     text-align: right;
 }