@nextcloud/vue 9.0.0-alpha.6 → 9.0.0-alpha.8

package/dist/assets/{NcEmojiPicker-BDp_Jc8K.css → NcEmojiPicker-DnMU8iEd.css}

@@ -1,14 +1,3 @@
-/**
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-/**
- * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-/*
-* Ensure proper alignment of the vue material icons
-*/
 .emoji-mart,
 .emoji-mart * {
   box-sizing: border-box;
@@ -359,6 +348,7 @@
 .emoji-mart-skin-tone-6 {
   background-color: #594539;
 }
+
 /* vue-virtual-scroller/dist/vue-virtual-scroller.css */
 .emoji-mart .vue-recycle-scroller {
   position: relative;
@@ -436,6 +426,20 @@
   display: none;
   visibility: hidden;
 }
+
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/**
+ * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/*
+* Ensure proper alignment of the vue material icons
+*/
 .material-design-icon {
   display: flex;
   align-self: center;
@@ -443,82 +447,99 @@
   align-items: center;
   justify-content: center;
 }
-.emoji-mart {
+.nc-emoji-picker.emoji-mart {
   background-color: var(--color-main-background) !important;
   border: 0;
   color: var(--color-main-text) !important;
   display: flex !important;
+  /* Label element in the section grid */
+  /* An actual heading inside the element */
 }
-.emoji-mart button {
-  margin: 0;
-  padding: 0;
+.nc-emoji-picker.emoji-mart button {
   border: none;
   background: transparent;
   font-size: inherit;
-  height: 36px;
-  width: auto;
-}
-.emoji-mart button * {
-  cursor: pointer !important;
-}
-.emoji-mart .emoji-mart-bar,
-.emoji-mart .emoji-mart-anchors,
-.emoji-mart .emoji-mart-search,
-.emoji-mart .emoji-mart-search input,
-.emoji-mart .emoji-mart-category,
-.emoji-mart .emoji-mart-category-label,
-.emoji-mart .emoji-mart-category-label span,
-.emoji-mart .emoji-mart-skin-swatches {
+}
+.nc-emoji-picker.emoji-mart .emoji-mart-bar,
+.nc-emoji-picker.emoji-mart .emoji-mart-anchors,
+.nc-emoji-picker.emoji-mart .emoji-mart-search,
+.nc-emoji-picker.emoji-mart .emoji-mart-search input,
+.nc-emoji-picker.emoji-mart .emoji-mart-category,
+.nc-emoji-picker.emoji-mart .emoji-mart-category-label,
+.nc-emoji-picker.emoji-mart .emoji-mart-category-label span,
+.nc-emoji-picker.emoji-mart .emoji-mart-skin-swatches {
   background-color: transparent !important;
   border-color: var(--color-border) !important;
   color: inherit !important;
 }
-.emoji-mart .emoji-mart-search input:focus-visible {
-  box-shadow: inset 0 0 0 2px var(--color-primary-element);
-  outline: none;
+.nc-emoji-picker.emoji-mart .emoji-mart-anchors {
+  padding-block: 0;
+  padding-inline: calc(2 * var(--default-grid-baseline));
 }
-.emoji-mart .emoji-mart-bar:first-child {
-  border-top-left-radius: var(--border-radius) !important;
-  border-top-right-radius: var(--border-radius) !important;
-}
-.emoji-mart .emoji-mart-anchors button {
+.nc-emoji-picker.emoji-mart .emoji-mart-anchor {
   border-radius: 0;
-  padding: 12px 4px;
-  height: auto;
+  margin: 0 !important;
+  padding: 0 !important;
+  height: var(--clickable-area-small);
+  min-width: var(--clickable-area-small);
 }
-.emoji-mart .emoji-mart-anchors button:focus-visible {
-  /* box-shadow: inset 0 0 0 2px var(--color-primary-element); */
-  outline: 2px solid var(--color-primary-element);
+.nc-emoji-picker.emoji-mart .emoji-mart-anchor:hover {
+  background-color: var(--color-background-hover);
 }
-.emoji-mart .emoji-mart-category {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: start;
+.nc-emoji-picker.emoji-mart .emoji-mart-anchor:focus-visible {
+  outline: 2px solid var(--color-primary-element) !important;
+  outline-offset: -2px;
 }
-.emoji-mart .emoji-mart-category .emoji-mart-category-label,
-.emoji-mart .emoji-mart-category .emoji-mart-emoji {
-  user-select: none;
-  flex-grow: 0;
-  flex-shrink: 0;
+.nc-emoji-picker.emoji-mart .emoji-mart-anchor div {
+  display: grid;
+  place-content: center;
+}
+.nc-emoji-picker.emoji-mart .emoji-mart-scroll {
+  padding-inline: calc(2 * var(--default-grid-baseline));
+  padding-block: 0 calc(2 * var(--default-grid-baseline));
+}
+.nc-emoji-picker.emoji-mart .emoji-mart-category {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  justify-items: stretch;
 }
-.emoji-mart .emoji-mart-category .emoji-mart-category-label {
-  flex-basis: 100%;
+.nc-emoji-picker.emoji-mart .emoji-mart-category.emoji-mart-no-results {
+  grid-template-columns: 1fr;
+  font-size: inherit;
+  color: var(--color-text-maxcontrast) !important;
+}
+.nc-emoji-picker.emoji-mart div.emoji-mart-category-label {
+  grid-column: span 8;
+  justify-self: stretch;
+}
+.nc-emoji-picker.emoji-mart h3.emoji-mart-category-label {
+  display: flex;
+  align-items: center;
+  height: var(--default-clickable-area);
   margin: 0;
+  padding-inline: calc(2 * var(--default-grid-baseline));
+  padding-block: 0;
+  user-select: none;
 }
-.emoji-mart .emoji-mart-category .emoji-mart-emoji {
-  flex-basis: 12.5%;
+.nc-emoji-picker.emoji-mart .emoji-mart-emoji {
+  aspect-ratio: 1/1;
   text-align: center;
+  margin: 0 !important;
+  padding: 0 !important;
 }
-.emoji-mart .emoji-mart-category .emoji-mart-emoji:hover::before, .emoji-mart .emoji-mart-category .emoji-mart-emoji.emoji-mart-emoji-selected::before {
+.nc-emoji-picker.emoji-mart .emoji-mart-emoji:hover, .nc-emoji-picker.emoji-mart .emoji-mart-emoji:focus-visible, .nc-emoji-picker.emoji-mart .emoji-mart-emoji.emoji-mart-emoji-selected {
   background-color: var(--color-background-hover) !important;
-  outline: 2px solid var(--color-primary-element);
+  border: none;
   border-radius: var(--border-radius-element, var(--border-radius-pill));
+  box-shadow: none !important;
+  outline: 2px solid var(--color-primary-element) !important;
+  outline-offset: -2px;
 }
-.emoji-mart .emoji-mart-category button:focus-visible {
-  background-color: var(--color-background-hover);
-  border: 2px solid var(--color-primary-element) !important;
-  border-radius: var(--border-radius-element, var(--border-radius-pill));
+.nc-emoji-picker.emoji-mart .emoji-mart-emoji::before {
+  display: none;
+}
+.nc-emoji-picker.emoji-mart .emoji-mart-emoji span {
+  cursor: pointer;
 }/**
  * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
@@ -530,25 +551,26 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-4aa55a23] {
+.material-design-icon[data-v-7c03dc2c] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.search__wrapper[data-v-4aa55a23] {
+.search__wrapper[data-v-7c03dc2c] {
   display: flex;
   flex-direction: row;
-  gap: 4px;
+  gap: var(--default-grid-baseline);
   align-items: end;
-  padding: 4px 8px;
+  padding-block: var(--default-grid-baseline);
+  padding-inline: calc(2 * var(--default-grid-baseline));
 }
-.row-selected button[data-v-4aa55a23], .row-selected span[data-v-4aa55a23] {
+.row-selected button[data-v-7c03dc2c], .row-selected span[data-v-7c03dc2c] {
   vertical-align: middle;
 }
-.emoji-delete[data-v-4aa55a23] {
+.emoji-delete[data-v-7c03dc2c] {
   vertical-align: top;
-  margin-left: -21px;
+  margin-inline-start: -21px;
   margin-top: -3px;
 }

package/dist/assets/{NcEmptyContent-C-nruaFh.css → NcEmptyContent-D1O466rM.css}

@@ -9,14 +9,14 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-3dc730de] {
+.material-design-icon[data-v-ef27a772] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.empty-content[data-v-3dc730de] {
+.empty-content[data-v-ef27a772] {
   display: flex;
   align-items: center;
   flex-direction: column;
@@ -24,11 +24,11 @@
   /* In case of using in a flex container - flex in advance */
   flex-grow: 1;
 }
-.modal-wrapper .empty-content[data-v-3dc730de] {
+.modal-wrapper .empty-content[data-v-ef27a772] {
   margin-top: 5vh;
   margin-bottom: 5vh;
 }
-.empty-content__icon[data-v-3dc730de] {
+.empty-content__icon[data-v-ef27a772] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -40,26 +40,26 @@
   background-position: center;
   background-size: 64px;
 }
-.empty-content__icon[data-v-3dc730de] svg {
+.empty-content__icon[data-v-ef27a772] svg {
   width: 64px !important;
   height: 64px !important;
   max-width: 64px !important;
   max-height: 64px !important;
 }
-.empty-content__name[data-v-3dc730de] {
+.empty-content__name[data-v-ef27a772] {
   margin-bottom: 10px;
   text-align: center;
   font-weight: bold;
   font-size: 20px;
   line-height: 30px;
 }
-.empty-content__description[data-v-3dc730de] {
+.empty-content__description[data-v-ef27a772] {
   color: var(--color-text-maxcontrast);
 }
-.empty-content__action[data-v-3dc730de] {
+.empty-content__action[data-v-ef27a772] {
   margin-top: 8px;
 }
-.modal-wrapper .empty-content__action[data-v-3dc730de] {
+.modal-wrapper .empty-content__action[data-v-ef27a772] {
   margin-top: 20px;
   display: flex;
 }

package/dist/assets/{NcHeaderButton-8c2zDKtV.css → NcHeaderButton-BPIasMkw.css}

@@ -9,41 +9,42 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-b1f7869e] {
+.material-design-icon[data-v-6ea97746] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
+
 /*!
  * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-.header-menu[data-v-b1f7869e] {
+.header-menu[data-v-6ea97746] {
   position: relative;
   width: var(--header-height);
   height: var(--header-height);
 }
-.header-menu .header-menu__trigger[data-v-b1f7869e] {
+.header-menu .header-menu__trigger[data-v-6ea97746] {
   --button-size: var(--header-height) !important;
   height: var(--header-height);
   opacity: 0.85;
   filter: none !important;
   color: var(--color-background-plain-text, var(--color-primary-text)) !important;
 }
-.header-menu .header-menu__trigger[data-v-b1f7869e]:focus-visible {
+.header-menu .header-menu__trigger[data-v-6ea97746]:focus-visible {
   outline: none !important;
   box-shadow: none !important;
 }
-.header-menu--opened .header-menu__trigger[data-v-b1f7869e], .header-menu__trigger[data-v-b1f7869e]:hover, .header-menu__trigger[data-v-b1f7869e]:focus, .header-menu__trigger[data-v-b1f7869e]:active {
+.header-menu--opened .header-menu__trigger[data-v-6ea97746], .header-menu__trigger[data-v-6ea97746]:hover, .header-menu__trigger[data-v-6ea97746]:focus, .header-menu__trigger[data-v-6ea97746]:active {
   opacity: 1;
 }
 @media only screen and (max-width: 512px) {
-.header-menu[data-v-b1f7869e] {
+.header-menu[data-v-6ea97746] {
     width: var(--default-clickable-area);
 }
-.header-menu .header-menu__trigger[data-v-b1f7869e] {
+.header-menu .header-menu__trigger[data-v-6ea97746] {
     --button-size: var(--default-clickable-area) !important;
 }
 }

package/dist/assets/{NcHeaderMenu-CDlSXB2d.css → NcHeaderMenu-ZmtqwEYA.css}

@@ -9,45 +9,46 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-7bfb0e6f] {
+.material-design-icon[data-v-6ee159e8] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
+
 /*!
  * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-.header-menu[data-v-7bfb0e6f] {
+.header-menu[data-v-6ee159e8] {
   position: relative;
   width: var(--header-height);
   height: var(--header-height);
 }
-.header-menu .header-menu__trigger[data-v-7bfb0e6f] {
+.header-menu .header-menu__trigger[data-v-6ee159e8] {
   --button-size: var(--header-height) !important;
   height: var(--header-height);
   opacity: 0.85;
   filter: none !important;
   color: var(--color-background-plain-text, var(--color-primary-text)) !important;
 }
-.header-menu .header-menu__trigger[data-v-7bfb0e6f]:focus-visible {
+.header-menu .header-menu__trigger[data-v-6ee159e8]:focus-visible {
   outline: none !important;
   box-shadow: none !important;
 }
-.header-menu--opened .header-menu__trigger[data-v-7bfb0e6f], .header-menu__trigger[data-v-7bfb0e6f]:hover, .header-menu__trigger[data-v-7bfb0e6f]:focus, .header-menu__trigger[data-v-7bfb0e6f]:active {
+.header-menu--opened .header-menu__trigger[data-v-6ee159e8], .header-menu__trigger[data-v-6ee159e8]:hover, .header-menu__trigger[data-v-6ee159e8]:focus, .header-menu__trigger[data-v-6ee159e8]:active {
   opacity: 1;
 }
 @media only screen and (max-width: 512px) {
-.header-menu[data-v-7bfb0e6f] {
+.header-menu[data-v-6ee159e8] {
     width: var(--default-clickable-area);
 }
-.header-menu .header-menu__trigger[data-v-7bfb0e6f] {
+.header-menu .header-menu__trigger[data-v-6ee159e8] {
     --button-size: var(--default-clickable-area) !important;
 }
 }
-.header-menu__wrapper[data-v-7bfb0e6f] {
+.header-menu__wrapper[data-v-6ee159e8] {
   position: fixed;
   z-index: 2000;
   top: var(--header-height);
@@ -59,7 +60,7 @@
   background-color: var(--color-main-background);
   filter: drop-shadow(0 1px 5px var(--color-box-shadow));
 }
-.header-menu__carret[data-v-7bfb0e6f] {
+.header-menu__carret[data-v-6ee159e8] {
   position: absolute;
   z-index: 2001;
   bottom: 0;
@@ -71,13 +72,13 @@
   border: 10px solid transparent;
   border-bottom-color: var(--color-main-background);
 }
-.header-menu__content[data-v-7bfb0e6f] {
+.header-menu__content[data-v-6ee159e8] {
   overflow: auto;
   width: 350px;
   max-width: calc(100vw - 16px);
   min-height: calc(var(--default-clickable-area) * 1.5);
   max-height: calc(100vh - var(--header-height) * 2);
 }
-.header-menu__content[data-v-7bfb0e6f] .empty-content {
+.header-menu__content[data-v-6ee159e8] .empty-content {
   margin: 12vh 10px;
 }

package/dist/assets/{NcInputConfirmCancel-DBjIHKvN.css → NcInputConfirmCancel-9YyvRYjw.css}

@@ -9,29 +9,29 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-cd55dad8] {
+.material-design-icon[data-v-4def7aba] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.app-navigation-input-confirm[data-v-cd55dad8] {
+.app-navigation-input-confirm[data-v-4def7aba] {
   flex: 1 0 100%;
   width: 100%;
 }
-.app-navigation-input-confirm form[data-v-cd55dad8] {
+.app-navigation-input-confirm form[data-v-4def7aba] {
   display: flex;
 }
-.app-navigation-input-confirm__input[data-v-cd55dad8] {
+.app-navigation-input-confirm__input[data-v-4def7aba] {
   height: 34px;
   flex: 1 1 100%;
   font-size: 100% !important;
   margin: 5px !important;
-  margin-left: -8px !important;
+  margin-inline-start: -8px !important;
   padding: 7px !important;
 }
-.app-navigation-input-confirm__input[data-v-cd55dad8]:active, .app-navigation-input-confirm__input[data-v-cd55dad8]:focus, .app-navigation-input-confirm__input[data-v-cd55dad8]:hover {
+.app-navigation-input-confirm__input[data-v-4def7aba]:active, .app-navigation-input-confirm__input[data-v-4def7aba]:focus, .app-navigation-input-confirm__input[data-v-4def7aba]:hover {
   outline: none;
   background-color: var(--color-main-background);
   color: var(--color-main-text);

package/dist/assets/{NcInputField-CthOpVGS.css → NcInputField-B8J2uFD4.css}

@@ -9,14 +9,14 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-78963742] {
+.material-design-icon[data-v-c64ebaf9] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.input-field[data-v-78963742] {
+.input-field[data-v-c64ebaf9] {
   --input-border-radius: var(--border-radius-element, var(--border-radius-large));
   --input-padding-start: var(--border-radius-large);
   --input-padding-end: var(--border-radius-large);
@@ -24,27 +24,27 @@
   width: 100%;
   margin-block-start: 6px;
 }
-.input-field--disabled[data-v-78963742] {
+.input-field--disabled[data-v-c64ebaf9] {
   opacity: 0.4;
   filter: saturate(0.4);
 }
-.input-field--label-outside[data-v-78963742] {
+.input-field--label-outside[data-v-c64ebaf9] {
   margin-block-start: 0;
 }
-.input-field--leading-icon[data-v-78963742] {
+.input-field--leading-icon[data-v-c64ebaf9] {
   --input-padding-start: calc(var(--default-clickable-area) - var(--default-grid-baseline));
 }
-.input-field--trailing-icon[data-v-78963742] {
+.input-field--trailing-icon[data-v-c64ebaf9] {
   --input-padding-end: calc(var(--default-clickable-area) - var(--default-grid-baseline));
 }
-.input-field--pill[data-v-78963742] {
+.input-field--pill[data-v-c64ebaf9] {
   --input-border-radius: var(--border-radius-pill);
 }
-.input-field__main-wrapper[data-v-78963742] {
+.input-field__main-wrapper[data-v-c64ebaf9] {
   height: var(--default-clickable-area);
   position: relative;
 }
-.input-field__input[data-v-78963742] {
+.input-field__input[data-v-c64ebaf9] {
   --input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));
   background-color: var(--color-main-background);
   color: var(--color-main-text);
@@ -61,43 +61,43 @@
   padding-inline: calc(var(--input-padding-start) + var(--input-border-width-offset)) calc(var(--input-padding-end) + var(--input-border-width-offset));
   padding-block: var(--input-border-width-offset);
 }
-.input-field__input[data-v-78963742]::placeholder {
+.input-field__input[data-v-c64ebaf9]::placeholder {
   color: var(--color-text-maxcontrast);
 }
-.input-field__input[data-v-78963742]:active:not([disabled]), .input-field__input[data-v-78963742]:hover:not([disabled]), .input-field__input[data-v-78963742]:focus:not([disabled]) {
+.input-field__input[data-v-c64ebaf9]:active:not([disabled]), .input-field__input[data-v-c64ebaf9]:hover:not([disabled]), .input-field__input[data-v-c64ebaf9]:focus:not([disabled]) {
   border-color: var(--color-main-text);
   border-width: var(--border-width-input-focused, 2px);
   box-shadow: 0 0 0 2px var(--color-main-background) !important;
   --input-border-width-offset: 0px;
 }
-.input-field__input:focus + .input-field__label[data-v-78963742], .input-field__input:hover:not(:placeholder-shown) + .input-field__label[data-v-78963742] {
+.input-field__input:focus + .input-field__label[data-v-c64ebaf9], .input-field__input:hover:not(:placeholder-shown) + .input-field__label[data-v-c64ebaf9] {
   color: var(--color-main-text);
 }
-.input-field__input[data-v-78963742]:focus {
+.input-field__input[data-v-c64ebaf9]:focus {
   cursor: text;
 }
-.input-field__input[data-v-78963742]:disabled {
+.input-field__input[data-v-c64ebaf9]:disabled {
   cursor: default;
 }
-.input-field__input[data-v-78963742]:focus-visible {
+.input-field__input[data-v-c64ebaf9]:focus-visible {
   box-shadow: unset !important;
 }
-.input-field__input--success[data-v-78963742] {
+.input-field__input--success[data-v-c64ebaf9] {
   border-color: var(--color-success) !important;
 }
-.input-field__input--success[data-v-78963742]:focus-visible {
+.input-field__input--success[data-v-c64ebaf9]:focus-visible {
   box-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
 }
-.input-field__input--error[data-v-78963742], .input-field__input[data-v-78963742]:invalid {
+.input-field__input--error[data-v-c64ebaf9], .input-field__input[data-v-c64ebaf9]:user-invalid {
   border-color: var(--color-error) !important;
 }
-.input-field__input--error[data-v-78963742]:focus-visible, .input-field__input[data-v-78963742]:invalid:focus-visible {
+.input-field__input--error[data-v-c64ebaf9]:focus-visible, .input-field__input[data-v-c64ebaf9]:user-invalid:focus-visible {
   box-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
 }
-.input-field:not(.input-field--label-outside) .input-field__input[data-v-78963742]:not(:focus)::placeholder {
+.input-field:not(.input-field--label-outside) .input-field__input[data-v-c64ebaf9]:not(:focus)::placeholder {
   opacity: 0;
 }
-.input-field__label[data-v-78963742] {
+.input-field__label[data-v-c64ebaf9] {
   --input-label-font-size: var(--default-font-size);
   font-size: var(--input-label-font-size);
   position: absolute;
@@ -112,7 +112,7 @@
   pointer-events: none;
   transition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);
 }
-.input-field__input:focus + .input-field__label[data-v-78963742], .input-field__input:not(:placeholder-shown) + .input-field__label[data-v-78963742] {
+.input-field__input:focus + .input-field__label[data-v-c64ebaf9], .input-field__input:not(:placeholder-shown) + .input-field__label[data-v-c64ebaf9] {
   --input-label-font-size: 13px;
   line-height: 1.5;
   inset-block-start: calc(-1.5 * var(--input-label-font-size) / 2);
@@ -123,7 +123,7 @@
   margin-inline: calc(var(--input-padding-start) - var(--default-grid-baseline)) calc(var(--input-padding-end) - var(--default-grid-baseline));
   transition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);
 }
-.input-field__icon[data-v-78963742] {
+.input-field__icon[data-v-c64ebaf9] {
   position: absolute;
   height: var(--default-clickable-area);
   width: var(--default-clickable-area);
@@ -133,37 +133,37 @@
   opacity: 0.7;
   inset-block-end: 0;
 }
-.input-field__icon--leading[data-v-78963742] {
+.input-field__icon--leading[data-v-c64ebaf9] {
   inset-inline-start: 0px;
 }
-.input-field__icon--trailing[data-v-78963742] {
+.input-field__icon--trailing[data-v-c64ebaf9] {
   inset-inline-end: 0px;
 }
-.input-field__trailing-button[data-v-78963742] {
+.input-field__trailing-button[data-v-c64ebaf9] {
   --button-size: calc(var(--default-clickable-area) - 2 * var(--border-width-input-focused, 2px)) !important;
   --button-radius: calc(var(--input-border-radius) - var(--border-width-input-focused, 2px));
 }
-.input-field__trailing-button.button-vue[data-v-78963742] {
+.input-field__trailing-button.button-vue[data-v-c64ebaf9] {
   position: absolute;
   top: var(--border-width-input-focused, 2px);
   inset-inline-end: var(--border-width-input-focused, 2px);
 }
-.input-field__trailing-button.button-vue[data-v-78963742]:focus-visible {
+.input-field__trailing-button.button-vue[data-v-c64ebaf9]:focus-visible {
   box-shadow: none !important;
 }
-.input-field__helper-text-message[data-v-78963742] {
+.input-field__helper-text-message[data-v-c64ebaf9] {
   padding-block: 4px;
   padding-inline: var(--border-radius-large);
   display: flex;
   align-items: center;
   color: var(--color-text-maxcontrast);
 }
-.input-field__helper-text-message__icon[data-v-78963742] {
+.input-field__helper-text-message__icon[data-v-c64ebaf9] {
   margin-inline-end: 8px;
 }
-.input-field__helper-text-message--error[data-v-78963742] {
+.input-field__helper-text-message--error[data-v-c64ebaf9] {
   color: var(--color-error-text);
 }
-.input-field__helper-text-message--success[data-v-78963742] {
+.input-field__helper-text-message--success[data-v-c64ebaf9] {
   color: var(--color-success-text);
 }