@conduction/nextcloud-vue 2.2.0-vue3.11 → 2.2.0-vue3.13

package/dist/esm/nextcloud-vue.css

@@ -3463,6 +3463,50 @@
 	z-index: 100001 !important;
 }
 
+/*
+ * vue-select's search input must not look like a second field.
+ *
+ * `NcSelect` wraps vue-select, whose `.vs__search` is the type-to-filter input
+ * that sits BESIDE the selected value inside one control. Stock vue-select
+ * gives it a transparent border; the LA SUITE theme sets
+ *
+ *     input[type="text"], input[type="search"], … {
+ *         border: 1px solid var(--lasuite-color-gray-300) !important;
+ *     }
+ *
+ * which lands on it and draws an empty bordered box to the right of the
+ * selected value — a second, broken-looking field on every Provider, Agent and
+ * Execution dropdown in the fleet.
+ *
+ * `!important` is REQUIRED here and not laziness: the theme's rule carries it,
+ * so no amount of specificity can win. The override is narrow — `.vs__search`
+ * is never a standalone input, always the inner field of a composite control —
+ * so this cannot reach a real text box the theme meant to style.
+ *
+ * The root cause is the theme reaching into a composite control it does not
+ * own; fixing it there would be better, and this stays until it does.
+ *
+ * Unscoped and here rather than in a component, because the control belongs to
+ * @nextcloud/vue: no Conduction component owns the element, and each app
+ * patching it locally is the same rule written sixteen times.
+ *
+ * The input keeps its focus ring — it is a real, typable control, and removing
+ * the visible focus would trade one defect for a WCAG 2.4.7 failure.
+ */
+
+.v-select .vs__search,
+.v-select .vs__search:focus {
+	border: none !important;
+	box-shadow: none !important;
+	min-height: unset;
+	background-color: transparent;
+}
+
+.v-select .vs__search:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: -2px;
+}
+
 
 .cn-label-widget[data-v-4dc338aa] {
 	width: 100%;

package/dist/nextcloud-vue.css

@@ -3463,6 +3463,50 @@
 	z-index: 100001 !important;
 }
 
+/*
+ * vue-select's search input must not look like a second field.
+ *
+ * `NcSelect` wraps vue-select, whose `.vs__search` is the type-to-filter input
+ * that sits BESIDE the selected value inside one control. Stock vue-select
+ * gives it a transparent border; the LA SUITE theme sets
+ *
+ *     input[type="text"], input[type="search"], … {
+ *         border: 1px solid var(--lasuite-color-gray-300) !important;
+ *     }
+ *
+ * which lands on it and draws an empty bordered box to the right of the
+ * selected value — a second, broken-looking field on every Provider, Agent and
+ * Execution dropdown in the fleet.
+ *
+ * `!important` is REQUIRED here and not laziness: the theme's rule carries it,
+ * so no amount of specificity can win. The override is narrow — `.vs__search`
+ * is never a standalone input, always the inner field of a composite control —
+ * so this cannot reach a real text box the theme meant to style.
+ *
+ * The root cause is the theme reaching into a composite control it does not
+ * own; fixing it there would be better, and this stays until it does.
+ *
+ * Unscoped and here rather than in a component, because the control belongs to
+ * @nextcloud/vue: no Conduction component owns the element, and each app
+ * patching it locally is the same rule written sixteen times.
+ *
+ * The input keeps its focus ring — it is a real, typable control, and removing
+ * the visible focus would trade one defect for a WCAG 2.4.7 failure.
+ */
+
+.v-select .vs__search,
+.v-select .vs__search:focus {
+	border: none !important;
+	box-shadow: none !important;
+	min-height: unset;
+	background-color: transparent;
+}
+
+.v-select .vs__search:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: -2px;
+}
+
 
 .cn-label-widget[data-v-4dc338aa] {
 	width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.2.0-vue3.11",
+  "version": "2.2.0-vue3.13",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "license": "EUPL-1.2",
   "author": "Conduction B.V. <info@conduction.nl>",

package/src/css/patches.css

@@ -217,3 +217,46 @@
 .vs__dropdown-menu--floating {
 	z-index: 100001 !important;
 }
+
+/*
+ * vue-select's search input must not look like a second field.
+ *
+ * `NcSelect` wraps vue-select, whose `.vs__search` is the type-to-filter input
+ * that sits BESIDE the selected value inside one control. Stock vue-select
+ * gives it a transparent border; the LA SUITE theme sets
+ *
+ *     input[type="text"], input[type="search"], … {
+ *         border: 1px solid var(--lasuite-color-gray-300) !important;
+ *     }
+ *
+ * which lands on it and draws an empty bordered box to the right of the
+ * selected value — a second, broken-looking field on every Provider, Agent and
+ * Execution dropdown in the fleet.
+ *
+ * `!important` is REQUIRED here and not laziness: the theme's rule carries it,
+ * so no amount of specificity can win. The override is narrow — `.vs__search`
+ * is never a standalone input, always the inner field of a composite control —
+ * so this cannot reach a real text box the theme meant to style.
+ *
+ * The root cause is the theme reaching into a composite control it does not
+ * own; fixing it there would be better, and this stays until it does.
+ *
+ * Unscoped and here rather than in a component, because the control belongs to
+ * @nextcloud/vue: no Conduction component owns the element, and each app
+ * patching it locally is the same rule written sixteen times.
+ *
+ * The input keeps its focus ring — it is a real, typable control, and removing
+ * the visible focus would trade one defect for a WCAG 2.4.7 failure.
+ */
+.v-select .vs__search,
+.v-select .vs__search:focus {
+	border: none !important;
+	box-shadow: none !important;
+	min-height: unset;
+	background-color: transparent;
+}
+
+.v-select .vs__search:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: -2px;
+}