jb-select 7.0.4 → 7.0.5

package/lib/jb-select.css

@@ -1,11 +1,10 @@
-/* @use "~jb-core/styles/medias.scss" as *; */
-
 @custom-media --tablet-until (max-width: 768px);
 @custom-media --tablet-from (min-width: 769px);
 
 :host {
     display: block;
     margin: var(--jb-select-margin, 0 0);
+    width: var(--jb-select-width, 100%);
 }
 
 :host(:focus),
@@ -14,7 +13,7 @@
 }
 
 .jb-select-web-component {
-    width: var(--jb-select-width, 100%);
+    width: 100%;
     box-sizing: border-box;
     container-type: inline-size;
     &.--has-value {
@@ -30,19 +29,16 @@
         }
     }
 
-    .label-wrapper {
-        label {
-            width: 100%;
-            margin: var(--label-margin);
-            display: block;
-            font-size: var(--label-font-size);
-            color: var(--label-color);
-
-            font-weight: var(--jb-input-label-font-weight, 300);
+    label {
+        width: 100%;
+        margin: var(--label-margin);
+        display: block;
+        font-size: var(--label-font-size);
+        color: var(--label-color);
+        font-weight: var(--jb-input-label-font-weight, 300);
 
-            &.--hide {
-                display: none;
-            }
+        &:empty {
+            display: none;
         }
     }
 
@@ -64,7 +60,7 @@
         border-bottom: solid var(--border-bottom-width) var(--border-color);
         border-radius: var(--box-border-radius);
         background-color: var(--select-box-bg-color);
-        margin: var(--jb-select-select-box-margin, 4px 0px 0px 0px);
+        margin: var(--jb-select-box-margin, 0px);
         overflow: hidden;
         display: grid;
         grid-template-rows: minmax(0, 1fr);
@@ -94,7 +90,7 @@
                 height: 100%;
                 border-radius: inherit;
                 overflow: hidden;
-                z-index: 1;
+                z-index: var(--base-z-index);
 
                 &.--search-typed {
                     opacity: 0;
@@ -125,7 +121,7 @@
                 height: 100%;
                 border-radius: inherit;
                 overflow: hidden;
-                z-index: 2;
+                z-index: calc(var(--base-z-index) + 1);
 
                 .search-input {
                     height: 100%;
@@ -135,6 +131,7 @@
                     margin: 0;
                     border-radius: 0;
                     font-size: var(--input-font-size);
+
                     &:focus {
                         outline: none;
                     }
@@ -152,6 +149,7 @@
             gap: 1.5rem;
             align-items: center;
             padding-inline-start: 0.5rem;
+
             .arrow-icon {
                 margin: var(--jb-select-arrow-icon-margin, 0 0 0 0);
             }
@@ -271,6 +269,7 @@
                 color: var(--empty-list-placeholder-color);
                 font-style: italic;
                 font-size: var(--input-font-size);
+
                 &.--show {
                     display: block;
                 }

package/lib/jb-select.ts

@@ -194,6 +194,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     const shadowRoot = this.attachShadow({
       mode: "open",
       delegatesFocus: true,
+      serializable:true
     });
     registerDefaultVariables();
     const html = `<style>${CSS} ${VariablesCSS}</style>\n${renderHTML()}`;
@@ -210,10 +211,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
       optionListSlot: shadowRoot.querySelector(".select-list-wrapper .select-list slot")!,
       arrowIcon: shadowRoot.querySelector(".arrow-icon")!,
       clearButton: shadowRoot.querySelector(".clear-button") as JBButtonWebComponent,
-      label: {
-        wrapper: shadowRoot.querySelector("label")!,
-        text: shadowRoot.querySelector("label .label-value")!,
-      },
+      label:shadowRoot.querySelector("label"),
       emptyListPlaceholder: shadowRoot.querySelector(".empty-list-placeholder")!,
       mobileSearchInputWrapper: shadowRoot.querySelector(".mobile-search-input-wrapper"),
       frontBox: shadowRoot.querySelector(".front-box"),
@@ -279,13 +277,8 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
   #onAttributeChange(name: string, value: string) {
     switch (name) {
       case "label":
-        this.elements.label.text.innerHTML = value;
+        this.elements.label.innerHTML = value;
         this.#internals.ariaLabel = value;
-        if (value == null || value == undefined || value == "") {
-          this.elements.label.wrapper.classList.add("--hide");
-        } else {
-          this.elements.label.wrapper.classList.remove("--hide");
-        }
         break;
       case "message":
         this.#internals.ariaDescription = value;

package/lib/render.ts

@@ -1,9 +1,7 @@
 export function renderHTML(): string {
     return /* html */ `
   <div class="jb-select-web-component">
-    <div class="label-wrapper">
-        <label class="--hide"><span class="label-value"></span></label>
-    </div>
+    <label class="label-value"></label>
     <div class="select-box">
         <div class="start-section">
             <slot name="start-section"></slot>

package/lib/types.ts

@@ -17,10 +17,7 @@ export type JBSelectElements = {
     optionListSlot:HTMLSlotElement,
     arrowIcon: HTMLDivElement,
     clearButton: JBButtonWebComponent,
-    label:{
-        wrapper: HTMLLabelElement,
-        text: HTMLSpanElement
-    },
+    label:HTMLLabelElement,
     emptyListPlaceholder: HTMLDivElement,
     mobileSearchInputWrapper:HTMLDivElement,
     frontBox:HTMLDivElement,

package/lib/variables.css

@@ -7,7 +7,7 @@
   --list-border-radius: 0 0 var(--rounded) var(--rounded);
   --border-width: var(--jb-select-border-width, 1px);
   --border-bottom-width: var(--jb-select-border-bottom-width, var(--jb-select-border-width, 3px));
-  --base-z-index: 1;
+  --base-z-index: var(--jb-select-base-z-index, 1);
   --selected-value-font-size:var(--jb-select-selected-value-font-size, 1rem);
   --input-font-size:var(--jb-select-input-font-size, 1rem);
   --selected-value-padding:var(--jb-select-selected-value-padding, 0.125rem 0.75rem 0 0.75rem);

package/package.json

@@ -16,7 +16,7 @@
     "web component",
     "react component"
   ],
-  "version": "7.0.4",
+  "version": "7.0.5",
   "bugs": "https://github.com/javadbat/jb-select/issues",
   "homepage": "https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "jb-validation": ">=0.4.0",
     "jb-button": ">=3.8.0",
     "jb-popover": ">=1.6.0",
-    "jb-core":">=0.24.0"
+    "jb-core":">=0.25.0"
   },
   "devDependencies": {
     "jb-form":">=0.7.1"