@yamato-daiwa/frontend-vue 0.1.0 → 0.2.0

package/.idea/inspectionProfiles/Project_Default.xml

@@ -2,11 +2,6 @@
   <profile version="1.0">
     <option name="myName" value="Project Default" />
     <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-    <inspection_tool class="ImplicitTypeConversion" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="BITS" value="1720" />
-      <option name="FLAG_EXPLICIT_CONVERSION" value="true" />
-      <option name="IGNORE_NODESET_TO_BOOLEAN_VIA_STRING" value="true" />
-    </inspection_tool>
     <inspection_tool class="UsePropertyAccessSyntax" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
   </profile>
 </component>

package/README.md

@@ -11,12 +11,12 @@ The [core package](https://www.npmjs.com/package/@yamato-daiwa/frontend) is stil
 ## Installation
 
 ```bash
-npm i @yamato-daiwa/frontend-vue @yamato-daiwa/frontend@2.0.0-beta.6
+npm i @yamato-daiwa/frontend-vue @yamato-daiwa/frontend@2.0.0-beta.10
 ```
 
 ### Peer Dependencies
 
-+ **@yamato-daiwa/frontend**: 2.0.0-beta.6
++ **@yamato-daiwa/frontend**: 2.0.0-beta.10
 + **vue**: ~3.5.0
 + **vue-router**: ~4.5.0
 
@@ -26,3 +26,9 @@ npm i @yamato-daiwa/frontend-vue @yamato-daiwa/frontend@2.0.0-beta.6
 
 + [AdmonitionBlock](https://frontend.yamato-daiwa.com/AdaptationsToFrameworks/Vue/GUI_Components/Children/AdmonitionBlock/AdmonitionBlock-Vue.english.html)
 + [Badge](https://frontend.yamato-daiwa.com/AdaptationsToFrameworks/Vue/GUI_Components/Children/Badge/Badge-Vue.english.html)
+
+
+#### Controls
+
++ Buttons
+  + [Plain (Button)](https://frontend.yamato-daiwa.com/AdaptationsToFrameworks/Vue/GUI_Components/Children/Controls/Buttons/Plain/Button-Vue.english.html) 

package/Source/GUI_Components/AdmonitionBlock/AdmonitionBlock.vue.ts

@@ -23,7 +23,7 @@ import {
 
 /* ─── Utils ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
 import { isStringOfLength, isElementOfEnumeration } from "@yamato-daiwa/es-extensions";
-import ComponentsAuxiliaries from "../ComponentsAuxiliaries";
+import YDF_ComponentsCoordinator from "../YDF_ComponentsCoordinator";
 
 
 @VueComponentConfiguration({
@@ -75,10 +75,10 @@ class AdmonitionBlock extends VueComponent {
   protected readonly theme!: string;
 
   public static defineThemes(themesNames: ReadonlyArray<string>): typeof AdmonitionBlock {
-    return ComponentsAuxiliaries.defineThemes(themesNames, AdmonitionBlock);
+    return YDF_ComponentsCoordinator.defineThemes(themesNames, AdmonitionBlock);
   }
 
-  protected static areThemesCSS_ClassesCommon: boolean = ComponentsAuxiliaries.areThemesCSS_ClassesCommon;
+  protected static areThemesCSS_ClassesCommon: boolean = YDF_ComponentsCoordinator.areThemesCSS_ClassesCommon;
 
   public static considerThemesAsCommon(): void {
     AdmonitionBlock.areThemesCSS_ClassesCommon = true;
@@ -102,7 +102,7 @@ class AdmonitionBlock extends VueComponent {
   protected readonly geometricVariation!: string;
 
   public static defineGeometricVariations(geometricVariationsNames: ReadonlyArray<string>): typeof AdmonitionBlock {
-    return ComponentsAuxiliaries.defineGeometricVariations(geometricVariationsNames, AdmonitionBlock);
+    return YDF_ComponentsCoordinator.defineGeometricVariations(geometricVariationsNames, AdmonitionBlock);
   }
 
 
@@ -124,7 +124,7 @@ class AdmonitionBlock extends VueComponent {
   protected readonly decorativeVariation!: string;
 
   public static defineDecorativeVariations(decorativeVariationsNames: ReadonlyArray<string>): typeof AdmonitionBlock {
-    return ComponentsAuxiliaries.defineDecorativeVariations(decorativeVariationsNames, AdmonitionBlock);
+    return YDF_ComponentsCoordinator.defineDecorativeVariations(decorativeVariationsNames, AdmonitionBlock);
   }
 
 
@@ -149,20 +149,20 @@ class AdmonitionBlock extends VueComponent {
   protected get rootElementModifierCSS_Classes(): Array<string> {
     return [
 
-      ...ComponentsAuxiliaries.addThemeCSS_ClassToArrayIfMust({
+      ...YDF_ComponentsCoordinator.addThemeCSS_ClassToArrayIfMust({
         themeValue: this.theme,
         allThemes: AdmonitionBlock.Themes,
         areThemesCSS_ClassesCommon: this.areThemesCSS_ClassesCommon,
         CSS_Namespace: AdmonitionBlock.CSS_NAMESPACE
       }),
 
-      ...ComponentsAuxiliaries.addGeometricVariationCSS_ClassToArrayIfMust({
+      ...YDF_ComponentsCoordinator.addGeometricVariationCSS_ClassToArrayIfMust({
         geometricVariation: this.geometricVariation,
         allGeometricVariations: AdmonitionBlock.GeometricVariations,
         CSS_Namespace: AdmonitionBlock.CSS_NAMESPACE
       }),
 
-      ...ComponentsAuxiliaries.addDecorativeVariationCSS_ClassToArrayIfMust({
+      ...YDF_ComponentsCoordinator.addDecorativeVariationCSS_ClassToArrayIfMust({
         decorativeVariation: this.decorativeVariation,
         allDecorativeVariations: AdmonitionBlock.DecorativeVariations,
         CSS_Namespace: AdmonitionBlock.CSS_NAMESPACE

package/Source/GUI_Components/Badge/Badge.vue.ts

@@ -10,7 +10,7 @@ import {
 
 /* ─── Utils ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
 import { isString, isElementOfEnumeration } from "@yamato-daiwa/es-extensions";
-import ComponentsAuxiliaries from "../ComponentsAuxiliaries";
+import YDF_ComponentsCoordinator from "../YDF_ComponentsCoordinator";
 
 
 @VueComponentConfiguration({
@@ -43,10 +43,10 @@ class Badge extends VueComponent {
   protected readonly theme!: string;
 
   public static defineThemes(themesNames: ReadonlyArray<string>): typeof Badge {
-    return ComponentsAuxiliaries.defineThemes(themesNames, Badge);
+    return YDF_ComponentsCoordinator.defineThemes(themesNames, Badge);
   }
 
-  public static areThemesCSS_ClassesCommon: boolean = ComponentsAuxiliaries.areThemesCSS_ClassesCommon;
+  public static areThemesCSS_ClassesCommon: boolean = YDF_ComponentsCoordinator.areThemesCSS_ClassesCommon;
 
   public static considerThemesAsCommon(): void {
     Badge.areThemesCSS_ClassesCommon = true;
@@ -70,7 +70,7 @@ class Badge extends VueComponent {
   protected readonly geometricVariation!: string;
 
   public static defineGeometricVariations(geometricVariationsNames: ReadonlyArray<string>): typeof Badge {
-    return ComponentsAuxiliaries.defineGeometricVariations(geometricVariationsNames, Badge);
+    return YDF_ComponentsCoordinator.defineGeometricVariations(geometricVariationsNames, Badge);
   }
 
   @VueProperty({
@@ -110,7 +110,7 @@ class Badge extends VueComponent {
   protected readonly decorativeVariation!: string;
 
   public static defineDecorativeVariations(decorativeVariationsNames: ReadonlyArray<string>): typeof Badge {
-    return ComponentsAuxiliaries.defineDecorativeVariations(decorativeVariationsNames, Badge);
+    return YDF_ComponentsCoordinator.defineDecorativeVariations(decorativeVariationsNames, Badge);
   }
 
    @VueProperty({
@@ -128,29 +128,29 @@ class Badge extends VueComponent {
   protected get rootElementModifierCSS_Classes(): ReadonlyArray<string> {
     return [
 
-      ...ComponentsAuxiliaries.addThemeCSS_ClassToArrayIfMust({
+      ...YDF_ComponentsCoordinator.addThemeCSS_ClassToArrayIfMust({
         themeValue: this.theme,
         allThemes: Badge.Themes,
         areThemesCSS_ClassesCommon: this.areThemesCSS_ClassesCommon,
         CSS_Namespace: Badge.CSS_NAMESPACE
       }),
 
-      ...ComponentsAuxiliaries.addGeometricVariationCSS_ClassToArrayIfMust({
+      ...YDF_ComponentsCoordinator.addGeometricVariationCSS_ClassToArrayIfMust({
         geometricVariation: this.geometricVariation,
         allGeometricVariations: Badge.GeometricVariations,
         CSS_Namespace: Badge.CSS_NAMESPACE
       }),
 
-      ...ComponentsAuxiliaries.
+      ...YDF_ComponentsCoordinator.
           generateDemandedGeometricModifiersCSS_Classes(Badge.CSS_NAMESPACE, this.geometricModifiers),
 
-      ...ComponentsAuxiliaries.addDecorativeVariationCSS_ClassToArrayIfMust({
+      ...YDF_ComponentsCoordinator.addDecorativeVariationCSS_ClassToArrayIfMust({
         decorativeVariation: this.decorativeVariation,
         allDecorativeVariations: Badge.DecorativeVariations,
         CSS_Namespace: Badge.CSS_NAMESPACE
       }),
 
-      ...ComponentsAuxiliaries.
+      ...YDF_ComponentsCoordinator.
           generateDemandedDecorativeModifiersCSS_Classes(Badge.CSS_NAMESPACE, this.decorativeModifiers)
 
     ];

package/Source/GUI_Components/Badge/LoadingPlaceholder/Badge-LoadingPlaceholder.vue.ts

@@ -11,7 +11,7 @@ import {
 
 /* ─── Utils ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
 import { isString, isElementOfEnumeration } from "@yamato-daiwa/es-extensions";
-import ComponentsAuxiliaries from "../../ComponentsAuxiliaries";
+import YDF_ComponentsCoordinator from "../../YDF_ComponentsCoordinator";
 
 
 @VueComponentConfiguration({
@@ -52,20 +52,20 @@ export default class BadgeLoadingPlaceholder extends VueComponent {
   protected get rootElementModifierCSS_Classes(): ReadonlyArray<string> {
     return [
 
-      ...ComponentsAuxiliaries.addThemeCSS_ClassToArrayIfMust({
+      ...YDF_ComponentsCoordinator.addThemeCSS_ClassToArrayIfMust({
         themeValue: this.theme,
         allThemes: Badge.Themes,
         areThemesCSS_ClassesCommon: this.areThemesCSS_ClassesCommon,
         CSS_Namespace: Badge.CSS_NAMESPACE
       }),
 
-      ...ComponentsAuxiliaries.addGeometricVariationCSS_ClassToArrayIfMust({
+      ...YDF_ComponentsCoordinator.addGeometricVariationCSS_ClassToArrayIfMust({
         geometricVariation: this.geometricVariation,
         allGeometricVariations: Badge.GeometricVariations,
         CSS_Namespace: Badge.CSS_NAMESPACE
       }),
 
-      ...ComponentsAuxiliaries.
+      ...YDF_ComponentsCoordinator.
           generateDemandedGeometricModifiersCSS_Classes(Badge.CSS_NAMESPACE, this.geometricModifiers)
 
     ];

package/Source/GUI_Components/Controls/Buttons/Plain/Button.vue.pug

@@ -3,7 +3,7 @@ button.Button--YDF(
   :type="typeAttributeValueOfButtonOrInputElement"
   :disabled="disabled"
   :aria-label="accessibilityGuidance"
-  :aria-pressed="toggled ? 'true' : undefined"
+  :aria-pressed="toggled"
   :class="rootElementModifierCSS_Classes"
   @click.prevent="() => {}"
 )
@@ -25,7 +25,6 @@ component.Button--YDF(
   :tabindex="disabled && -1"
   :aria-label="accessibilityGuidance"
   :aria-disabled="disabled"
-  :aria-pressed="toggled ? 'true' : undefined"
   :class="rootElementModifierCSS_Classes"
 )
 
@@ -41,13 +40,12 @@ component.Button--YDF(
 
 a.Button--YDF(
   v-else-if="isAnchorTheTagNameOfRootElement"
-  :href="disabled ? undefined : externalURI"
-  :target="mustOpenExternalLinkInCurrentTab ? '_self' : '_blank'"
-  rel="noopener noreferrer"
+  :href="disabled ? null : externalURI"
+  :target="mustOpenLinkInNewTab ? '_self' : '_blank'"
+  :rel="relAttributeValueOfAnchorElement"
   :tabindex="disabled && -1"
   :aria-label="accessibilityGuidance"
   :aria-disabled="disabled"
-  :aria-pressed="toggled ? 'true' : undefined"
   :class="rootElementModifierCSS_Classes"
 )
 
@@ -66,7 +64,7 @@ input.Button--YDF(
   :type="typeAttributeValueOfButtonOrInputElement"
   :value="label"
   :disabled="disabled"
-  :aria-pressed="toggled ? 'true' : undefined"
+  :aria-pressed="toggled"
   :class="rootElementModifierCSS_Classes"
   @click.prevent="() => {}"
 )

package/Source/GUI_Components/Controls/Buttons/Plain/Button.vue.ts

@@ -1,5 +1,5 @@
 /* ─── Assets ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
-import componentTemplate from "./Button.vue.pug";
+import componentVueTemplate from "./Button.vue.pug";
 
 /* ─── Framework ──────────────────────────────────────────────────────────────────────────────────────────────────── */
 import {
@@ -7,11 +7,10 @@ import {
   Vue as VueComponent,
   Prop as VueProperty
 } from "vue-facing-decorator";
-
 import type { RouteLocationRaw as VueRouterRawLocation } from "vue-router";
 
 /* ─── Utils ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
-import ComponentsAuxiliaries from "../../../ComponentsAuxiliaries";
+import YDF_ComponentsCoordinator from "../../../YDF_ComponentsCoordinator";
 import InvalidVuePropertiesCombinationError from
     "../../../_Errors/InvalidVuePropertiesCombination/InvalidVuePropertiesCombinationError";
 import {
@@ -21,17 +20,20 @@ import {
   isNonEmptyString,
   isEitherUndefinedOrNull,
   isNeitherUndefinedNorNull,
-  isElementOfEnumeration
+  isElementOfEnumeration,
+  isArbitraryObject,
+  emptyStringToNull,
+  type ElementOfPseudoEnumeration
 } from "@yamato-daiwa/es-extensions";
-import type { ElementOfPseudoEnumeration } from "@yamato-daiwa/es-extensions";
 
 
 @VueComponentConfiguration({
   name: Button.CSS_NAMESPACE,
-  template: componentTemplate
+  template: componentVueTemplate
 })
 class Button extends VueComponent {
 
+  /* ━━━ Static Fields ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
   public static CSS_NAMESPACE: string = "Button--YDF";
 
   public static HTML_Types: Button.HTML_Types = {
@@ -42,8 +44,16 @@ class Button extends VueComponent {
     inputReset: "INPUT_RESET"
   };
 
+
+  /* ━━━ Non-reactive Instance Fields ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
   protected IS_NUXT!: boolean;
 
+  private initializeNonReactiveClassFields(): void {
+    this.IS_NUXT = "$nuxt" in window;
+  }
+
+
+  /* ━━━ Common Properties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
   @VueProperty({
     type: String,
     default: Button.HTML_Types.regular,
@@ -51,21 +61,30 @@ class Button extends VueComponent {
   })
   protected readonly HTML_Type!: ElementOfPseudoEnumeration<Button.HTML_Types>;
 
-  @VueProperty({ type: String })
+
+  /* ─── Textings ─────────────────────────────────────────────────────────────────────────────────────────────────── */
+  @VueProperty({ validator: (value: unknown): boolean => isNonEmptyString(value) || isNumber(value) })
   protected readonly label?: string | number | null;
 
-  @VueProperty({ type: String })
+  @VueProperty({ validator: isNonEmptyString })
   protected readonly accessibilityGuidance?: string | null;
 
-  @VueProperty({ type: [ String, Object ] })
+
+  /* ─── Links ────────────────────────────────────────────────────────────────────────────────────────────────────── */
+  @VueProperty({ validator: (value: unknown): boolean => isNonEmptyString(value) || isArbitraryObject(value) })
   protected readonly route?: VueRouterRawLocation | null;
 
-  @VueProperty({ type: String })
+  @VueProperty({ validator: isNonEmptyString })
   protected readonly externalURI?: string | null;
 
   @VueProperty({ type: Boolean, default: false })
-  protected readonly mustOpenExternalLinkInCurrentTab!: string;
+  protected readonly mustOpenLinkInNewTab!: boolean;
 
+  @VueProperty({ type: Boolean, default: false })
+  protected readonly mustRequestNotFollowLinkForCrawlingToSearchEngine!: boolean;
+
+
+  /* ─── Status ───────────────────────────────────────────────────────────────────────────────────────────────────── */
   @VueProperty({ type: Boolean, default: false })
   protected readonly disabled!: boolean;
 
@@ -84,14 +103,13 @@ class Button extends VueComponent {
   protected readonly theme!: string;
 
   public static defineThemes(themesNames: ReadonlyArray<string>): typeof Button {
-    return ComponentsAuxiliaries.defineThemes(themesNames, Button);
+    return YDF_ComponentsCoordinator.defineThemes(themesNames, Button);
   }
 
-  public static areThemesCSS_ClassesCommon: boolean = ComponentsAuxiliaries.areThemesCSS_ClassesCommon;
+  public static areThemesCSS_ClassesCommon: boolean = YDF_ComponentsCoordinator.areThemesCSS_ClassesCommon;
 
-  public static considerThemesAsCommon(): typeof Button {
+  public static considerThemesAsCommon(): void {
     Button.areThemesCSS_ClassesCommon = true;
-    return Button;
   }
 
   @VueProperty({ type: Boolean, default: Button.areThemesCSS_ClassesCommon })
@@ -113,7 +131,7 @@ class Button extends VueComponent {
   protected readonly geometricVariation!: string;
 
   public static defineGeometricVariations(geometricVariationsNames: ReadonlyArray<string>): typeof Button {
-    return ComponentsAuxiliaries.defineGeometricVariations(geometricVariationsNames, Button);
+    return YDF_ComponentsCoordinator.defineGeometricVariations(geometricVariationsNames, Button);
   }
 
   @VueProperty({
@@ -131,6 +149,7 @@ class Button extends VueComponent {
   public static readonly DecorativeVariations: Button.DecorativeVariations = {
     regular: "REGULAR",
     accented: "ACCENTED",
+    danger: "DANGER",
     linkLike: "LINK_LIKE"
   };
 
@@ -142,7 +161,7 @@ class Button extends VueComponent {
   protected readonly decorativeVariation!: string;
 
   public static defineDecorativeVariations(decorativeVariationsNames: ReadonlyArray<string>): typeof Button {
-    return ComponentsAuxiliaries.defineDecorativeVariations(decorativeVariationsNames, Button);
+    return YDF_ComponentsCoordinator.defineDecorativeVariations(decorativeVariationsNames, Button);
   }
 
 
@@ -173,7 +192,7 @@ class Button extends VueComponent {
           vueComponentName: Button.name,
           messageSpecificPart:
               "When button has HTML type \"inputButton\", \"inputSubmit\" or \"inputReset\", the \"label\" property " +
-              "must be specified with non-empty string of number."
+                "must be specified with non-empty string of number."
         }),
         title: InvalidVuePropertiesCombinationError.localization.defaultTitle,
         occurrenceLocation: `${ Button.name }.created()`
@@ -230,6 +249,15 @@ class Button extends VueComponent {
 
   }
 
+  protected get relAttributeValueOfAnchorElement(): string | null {
+    return emptyStringToNull(
+      [
+        ...this.mustOpenLinkInNewTab ? [ "noopener", "noreferrer" ] : [],
+        ...this.mustRequestNotFollowLinkForCrawlingToSearchEngine ? [ "nofollow" ] : []
+      ].join(" ")
+    );
+  }
+
 
   /* ━━━ CSS Classes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
   protected get rootElementModifierCSS_Classes(): ReadonlyArray<string> {
@@ -238,39 +266,34 @@ class Button extends VueComponent {
       ...(this.isAnchorTheTagNameOfRootElement || this.isRouterLinkTheRootElement) && this.disabled ?
           [ `${ Button.CSS_NAMESPACE }__DisabledState` ] : [],
 
-      ...ComponentsAuxiliaries.addThemeCSS_ClassToArrayIfMust({
+      ...YDF_ComponentsCoordinator.addThemeCSS_ClassToArrayIfMust({
         themeValue: this.theme,
         allThemes: Button.Themes,
         areThemesCSS_ClassesCommon: this.areThemesCSS_ClassesCommon,
         CSS_Namespace: Button.CSS_NAMESPACE
       }),
 
-      ...ComponentsAuxiliaries.addGeometricVariationCSS_ClassToArrayIfMust({
+      ...YDF_ComponentsCoordinator.addGeometricVariationCSS_ClassToArrayIfMust({
         geometricVariation: this.geometricVariation,
         allGeometricVariations: Button.GeometricVariations,
         CSS_Namespace: Button.CSS_NAMESPACE
       }),
 
-      ...ComponentsAuxiliaries.
+      ...YDF_ComponentsCoordinator.
           generateDemandedGeometricModifiersCSS_Classes(Button.CSS_NAMESPACE, this.geometricModifiers),
 
-      ...ComponentsAuxiliaries.addDecorativeVariationCSS_ClassToArrayIfMust({
+      ...YDF_ComponentsCoordinator.addDecorativeVariationCSS_ClassToArrayIfMust({
         decorativeVariation: this.decorativeVariation,
         allDecorativeVariations: Button.DecorativeVariations,
         CSS_Namespace: Button.CSS_NAMESPACE
       }),
 
-      ...ComponentsAuxiliaries.
+      ...YDF_ComponentsCoordinator.
           generateDemandedDecorativeModifiersCSS_Classes(Button.CSS_NAMESPACE, this.decorativeModifiers)
 
     ];
   }
 
-
-  private initializeNonReactiveClassFields(): void {
-    this.IS_NUXT = "$nuxt" in window;
-  }
-
 }
 
 
@@ -302,19 +325,25 @@ namespace Button {
     squareShapeUnlessOverflowed = "SQUARE_SHAPE_UNLESS_OVERFLOWED",
     singleLine = "SINGLE_LINE",
     noLeftBorderAndRoundings = "NO_LEFT_BORDER_AND_ROUNDINGS",
-    noRightBorderAndRoundings = "NO_RIGHT_BORDER_AND_ROUNDINGS"
+    noRightBorderAndRoundings = "NO_RIGHT_BORDER_AND_ROUNDINGS",
+    noTopBorderAndRoundings = "NO_TOP_BORDER_AND_ROUNDINGS",
+    noBottomBorderAndRoundings = "NO_BOTTOM_BORDER_AND_ROUNDINGS",
+    noRoundings = "NO_ROUNDINGS",
+    horizontallyShrinkable = "HORIZONTALLY_SHRINKABLE"
   }
 
   export type DecorativeVariations = {
     readonly regular: "REGULAR";
     readonly accented: "ACCENTED";
+    readonly danger: "DANGER";
     readonly linkLike: "LINK_LIKE";
     [variationName: string]: string;
   };
 
   export enum DecorativeModifiers {
     bordersDisguising = "BORDERS_DISGUISING",
-    noBackground = "NO_BACKGROUND"
+    noBackground = "NO_BACKGROUND",
+    noBackgroundInDefaultState = "NO_BACKGROUND_IN_DEFAULT_STATE"
   }
 
 }

package/Source/GUI_Components/Controls/Buttons/Plain/LoadingPlaceholder/Button-LoadingPlaceholder.vue.pug

@@ -1,3 +1,3 @@
-span.Button--YDF.Button--YDF-LoadingPlaceholder(
+span.Button--YDF.Button--YDF__LoadingPlaceholder(
   :class="rootElementModifierCSS_Classes"
 )

package/Source/GUI_Components/Controls/Buttons/Plain/LoadingPlaceholder/Button-LoadingPlaceholder.vue.ts

@@ -1,6 +1,6 @@
 /* ─── Assets ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
 import Button from "../Button.vue";
-import componentTemplate from "./Button-LoadingPlaceholder.vue.pug";
+import componentVueTemplate from "./Button-LoadingPlaceholder.vue.pug";
 
 /* ─── Framework ──────────────────────────────────────────────────────────────────────────────────────────────────── */
 import {
@@ -11,12 +11,12 @@ import {
 
 /* ─── Utils ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
 import { isString, isElementOfEnumeration } from "@yamato-daiwa/es-extensions";
-import ComponentsAuxiliaries from "../../../../ComponentsAuxiliaries";
+import YDF_ComponentsCoordinator from "../../../../YDF_ComponentsCoordinator";
 
 
 @VueComponentConfiguration({
   name: "Button--YDF-LoadingPlaceholder",
-  template: componentTemplate
+  template: componentVueTemplate
 })
 export default class ButtonLoadingPlaceholder extends VueComponent {
 
@@ -30,12 +30,13 @@ export default class ButtonLoadingPlaceholder extends VueComponent {
   @VueProperty({ type: Boolean, default: Button.areThemesCSS_ClassesCommon })
   protected readonly areThemesCSS_ClassesCommon!: boolean;
 
+
   @VueProperty({
     type: String,
     default: Button.GeometricVariations.regular,
     validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, Button.GeometricVariations)
   })
-  protected readonly geometry!: string;
+  protected readonly geometricVariation!: string;
 
   @VueProperty({
     type: Array,
@@ -51,20 +52,20 @@ export default class ButtonLoadingPlaceholder extends VueComponent {
   protected get rootElementModifierCSS_Classes(): ReadonlyArray<string> {
     return [
 
-      ...ComponentsAuxiliaries.addThemeCSS_ClassToArrayIfMust({
+      ...YDF_ComponentsCoordinator.addThemeCSS_ClassToArrayIfMust({
         themeValue: this.theme,
         allThemes: Button.Themes,
         areThemesCSS_ClassesCommon: this.areThemesCSS_ClassesCommon,
         CSS_Namespace: Button.CSS_NAMESPACE
       }),
 
-      ...ComponentsAuxiliaries.addGeometricVariationCSS_ClassToArrayIfMust({
-        geometricVariation: this.geometry,
+      ...YDF_ComponentsCoordinator.addGeometricVariationCSS_ClassToArrayIfMust({
+        geometricVariation: this.geometricVariation,
         allGeometricVariations: Button.GeometricVariations,
         CSS_Namespace: Button.CSS_NAMESPACE
       }),
 
-      ...ComponentsAuxiliaries.
+      ...YDF_ComponentsCoordinator.
           generateDemandedGeometricModifiersCSS_Classes(Button.CSS_NAMESPACE, this.geometricModifiers)
 
     ];

package/Source/GUI_Components/Controls/ValidatableControlShell/ValidatableControlShell.vue.pug

@@ -0,0 +1,51 @@
+.ValidatableControlShell--YDF(
+  :class="rootElementModifierCSS_Classes"
+)
+
+  .ValidatableControlShell--YDF-Header(
+    v-if="mustDisplayHeader"
+  )
+
+    label.ValidatableControlShell--YDF-Label(
+      v-if="label"
+      :for="coreElementHTML_ID"
+      :id="labelElementHTML_ID"
+    ) {{ label }}
+
+    span.ValidatableControlShell--YDF-Badge.ValidatableControlShell--YDF-Badge__RequiredInput(
+      v-if="mustDisplayRequiredInputBadge"
+    ) {{ localization.requirementBadges.required }}
+
+    span.ValidatableControlShell--YDF-Badge.ValidatableControlShell--YDF-Badge__OptionalInput(
+      v-else-if="mustDisplayOptionalInputBadge"
+    ) {{ localization.requirementBadges.optional }}
+
+    span.ValidatableControlShell--YDF-Badge.ValidatableControlShell--YDF-Badge__Invisible(
+      v-else-if="mustAddInvisibleBadgeForHeightEqualizingWhenNoBadge"
+    )
+
+
+  p.ValidatableControlShell--YDF-Guidance(
+    v-if="guidance"
+    v-html="guidance"
+  )
+
+
+  .ValidatableControlShell--YDF-MainSlotCustomizableWrapper(
+    :class="mainSlotWrapperAdditionalCSS_Classes"
+  ): slot
+
+
+  //-
+    VerticallySlidingAlwaysMountedContainer.ValidatableControlShell--YDF-ValidationErrorsMessagesList(
+      v-model="isDisplaying"
+      expanded="invalidInputHighlightingIfAnyValidationErrorsMessages && validationErrorsMessagesCopyForAnimating.length > 0"
+      HTML_Tag="ul"
+      mustAnimateHeightWhenContentsAreChanged="true"
+      animationDuration__seconds="VALIDATION_ERRORS_MESSAGES_ANIMATION_DURATION__SECONDS"
+    )
+
+      li.ValidatableControlShell--YDF-ValidationErrorMessage(
+        v-for="validationErrorMessage of validationErrorsMessagesCopyForAnimating"
+        key="`VALIDATION_ERROR_MESSAGE-${ validationErrorMessage }`"
+      ) {{ validationErrorMessage }}