@htmlbricks/hb-searchbar 0.67.0 → 0.68.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -3
- package/main.iife.js +39 -20
- package/main.iife.js.map +1 -1
- package/manifest.json +48 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -15,7 +15,7 @@ Search field with optional dropdown `searchlist` (id, text, icons, badges, tags,
|
|
|
15
15
|
|
|
16
16
|
- `id`, `style` (optional): strings.
|
|
17
17
|
- `value` (required): string — current query text.
|
|
18
|
-
- `searchlabel` (optional): string —
|
|
18
|
+
- `searchlabel` (optional): string — placeholder for the input (search is triggered by the in-field magnifier or Enter).
|
|
19
19
|
- `minlength` (optional): number as string.
|
|
20
20
|
- `searchlist` (optional): JSON string — `TSearchListItem[]` (`id`, `text`, optional `url`, `icon`, `tags`, `badge`, `number_of_results`, `fixed`).
|
|
21
21
|
- `input_info` (optional): JSON string — single `TSearchListItem` for input adornment.
|
|
@@ -29,8 +29,10 @@ Search field with optional dropdown `searchlist` (id, text, icons, badges, tags,
|
|
|
29
29
|
|
|
30
30
|
### Usage notes
|
|
31
31
|
|
|
32
|
-
- **
|
|
33
|
-
|
|
32
|
+
- **Browser autofill:** the search field uses `autocomplete="off"` so native address/password suggestions and similar do not target this control (browser support varies; password managers may still offer fills).
|
|
33
|
+
|
|
34
|
+
- **CSS parts:** `dropdown-menu`, `search-input`, `search-input-glass` (frosted layer under the field when the input is focused), `search-submit` (magnifier button inside the field).
|
|
35
|
+
- **Styling:** Bulma `field` with a single expanded control; the search icon sits on the right as a `search-submit` control. Dropdown and field styles live in the shadow root (`styles/bulma.scss` + `webcomponent.scss`). Prefer [Bulma CSS variables](https://bulma.io/documentation/features/css-variables/) on the host or ancestors: e.g. `--bulma-primary` (focus glow, search-button hover, suggestion row accents), `--bulma-background`, `--bulma-border`, and `--bulma-primary` (host strip: default resting/focus tints on `hb-searchbar` itself; input/textarea are transparent at rest so that shows through), `--bulma-scheme-main`, `--bulma-border-weak`, `--bulma-text`, `--bulma-text-strong`, `--bulma-input-placeholder-color`, `--bulma-danger` (clear button), `--bulma-radius`, `--bulma-radius-small`, `--bulma-dropdown-content-z`. Component-only: `--hb-searchbar-host-background`, `--hb-searchbar-host-background-focus` (:host), `--hb-searchbar-input-strip-background` (darker input row at rest), `--hb-searchbar-dropdown-panel-background` (lighter list panel), `--hb-searchbar-input-glass-blur`, `--hb-searchbar-input-glass-saturate` (frosted layer on input focus only). The primary-colored diffuse glow while the input/textarea is focused wraps the whole root (including the open dropdown) as one outline.
|
|
34
36
|
- Storybook may list `initial_value`; runtime props follow `webcomponent.type.d.ts` (`value` is required).
|
|
35
37
|
|
|
36
38
|
### Minimal HTML example
|
package/main.iife.js
CHANGED
|
@@ -359,8 +359,8 @@
|
|
|
359
359
|
|
|
360
360
|
/*!
|
|
361
361
|
* Single suggestion row (\`hb-searchbar-row\`). Loaded from parent + \`Item\` (Svelte scope).
|
|
362
|
-
*/.hb-searchbar-row.svelte-wocw98 {appearance:none;box-sizing:border-box;display:flex;align-items:flex-start;justify-content:flex-start;gap:0.5rem;width:100%;margin:0;padding-block:0.5625rem;padding-inline:0.625rem 0.75rem;border:none;border-radius:var(--bulma-radius-small
|
|
363
|
-
</textarea
|
|
362
|
+
*/.hb-searchbar-row.svelte-wocw98 {appearance:none;box-sizing:border-box;display:flex;align-items:flex-start;justify-content:flex-start;gap:0.5rem;width:100%;margin:0;padding-block:0.5625rem;padding-inline:0.625rem 0.75rem;border:none;border-radius:var(--bulma-radius-small);box-shadow:none;background:transparent;font:inherit;font-size:0.875rem;line-height:1.4;text-align:start;color:var(--bulma-text);cursor:pointer;text-decoration:none;transition:background-color 0.12s ease, color 0.12s ease;}a.hb-searchbar-row.svelte-wocw98 {color:var(--bulma-text);}.hb-searchbar-row.svelte-wocw98:hover {background-color:color-mix(in srgb, var(--bulma-primary, #00d1b2) 9%, var(--bulma-scheme-main) 91%);}.hb-searchbar-row.svelte-wocw98:focus {outline:none;}.hb-searchbar-row.svelte-wocw98:focus-visible {outline:2px solid var(--bulma-primary, #00d1b2);outline-offset:2px;}.hb-searchbar-row.svelte-wocw98:active {background-color:color-mix(in srgb, var(--bulma-primary, #00d1b2) 14%, var(--bulma-scheme-main) 86%);}.hb-searchbar-row.svelte-wocw98 .bi:where(.svelte-wocw98) {flex-shrink:0;margin-block-start:0.15em;font-size:1rem;line-height:1;opacity:0.55;color:var(--bulma-text-weak);}.hb-searchbar-row.svelte-wocw98:hover .bi:where(.svelte-wocw98) {opacity:0.85;color:var(--bulma-primary, #00d1b2);}.hb-searchbar-row.svelte-wocw98 .is-flex-grow-1:where(.svelte-wocw98) {min-width:0;word-break:break-word;}.hb-searchbar-row.svelte-wocw98 .tag:where(.svelte-wocw98) {flex-shrink:0;font-size:0.7rem;height:auto;min-height:1.75em;padding-block:0.15em;font-weight:500;}.hb-searchbar-row.svelte-wocw98 .results_number:where(.svelte-wocw98) {flex-shrink:0;margin-block-start:0.1em;font-size:0.75rem;font-style:normal;font-weight:500;opacity:0.65;white-space:nowrap;}`};function yi(e,t){Ve(t,!0),Vr(e,vi);function n(e){let t=e||`secondary`;return t===`secondary`?`is-light`:`is-${t}`}let r=$(t,`id`,7,``),i=$(t,`is_inpput`,7),a=$(t,`url`,7),o=$(t,`icon`,7),s=$(t,`text`,7),c=$(t,`number_of_results`,7),l=$(t,`badge`,7),u=$(t,`input_search`,7),d=$(t,`clicksearch`,7);var f={get id(){return r()},set id(e=``){r(e),N()},get is_inpput(){return i()},set is_inpput(e){i(e),N()},get url(){return a()},set url(e){a(e),N()},get icon(){return o()},set icon(e){o(e),N()},get text(){return s()},set text(e){s(e),N()},get number_of_results(){return c()},set number_of_results(e){c(e),N()},get badge(){return l()},set badge(e){l(e),N()},get input_search(){return u()},set input_search(e){u(e),N()},get clicksearch(){return d()},set clicksearch(e){d(e),N()}},p=vr(),m=nn(p),h=e=>{var t=fi(),u=L(t),f=e=>{var t=ci();z(()=>Wr(t,1,`bi bi-${o()?o():`dot`}`,`svelte-wocw98`)),Z(e,t)};Q(u,e=>{o()&&e(f)});var p=R(u,2),m=L(p);O(p);var h=R(p,2),g=e=>{var t=li(),n=L(t);O(t),z(()=>xr(n,`${c()??``} Results`)),Z(e,t)};Q(h,e=>{(c()||c()===0)&&e(g)});var _=R(h,2),v=e=>{var t=di(),r=L(t),i=e=>{var t=ui();z(()=>Wr(t,1,`bi bi-${l().icon}`,`svelte-wocw98`)),Z(e,t)};Q(r,e=>{l().icon&&e(i)});var a=R(r);O(t),z(e=>{Wr(t,1,e,`svelte-wocw98`),xr(a,` ${l().text??``}`)},[()=>`tag ${n(l().color)} is-flex is-align-items-center is-gap-1`]),Z(e,t)};Q(_,e=>{l()&&e(v)}),O(t),z(()=>{Yr(t,`href`,a()),xr(m,`${i()?`... `:``}${s()??``}`)}),ur(`click`,t,async()=>{await d()(s(),r())}),Z(e,t)},g=e=>{var t=_i(),a=L(t),u=e=>{var t=pi();z(()=>Wr(t,1,`bi bi-${o()?o():`dot`}`,`svelte-wocw98`)),Z(e,t)};Q(a,e=>{o()&&e(u)});var f=R(a,2),p=L(f);O(f);var m=R(f,2),h=e=>{var t=mi(),n=L(t);O(t),z(()=>xr(n,`${c()??``} Results`)),Z(e,t)};Q(m,e=>{c()&&e(h)});var g=R(m,2),_=e=>{var t=gi(),r=L(t),i=e=>{var t=hi();z(()=>Wr(t,1,`bi bi-${l().icon}`,`svelte-wocw98`)),Z(e,t)};Q(r,e=>{l().icon&&e(i)});var a=R(r);O(t),z(e=>{Wr(t,1,e,`svelte-wocw98`),xr(a,` ${l().text??``}`)},[()=>`tag ${n(l().color)} is-flex is-align-items-center is-gap-1`]),Z(e,t)};Q(g,e=>{l()&&e(_)}),O(t),z(()=>xr(p,`${i()?`... `:``}${s()??``}`)),ur(`click`,t,async()=>{await d()(s(),r())}),Z(e,t)};return Q(m,e=>{a()?e(h):e(g,-1)}),Z(e,p),He(f)}dr([`click`]),si(yi,{id:{},is_inpput:{},url:{},icon:{},text:{},number_of_results:{},badge:{},input_search:{},clicksearch:{}},[],[],{mode:`open`});var bi=X(`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@latest/font/bootstrap-icons.css" class="svelte-1r9sxfz"/>`),xi=X(`<textarea id="custom-search-input" part="search-input" class="input svelte-1r9sxfz" autocomplete="off" aria-label="Search" aria-describedby="search">
|
|
363
|
+
</textarea>`),Si=X(`<input id="custom-search-input" part="search-input" class="input svelte-1r9sxfz" type="search" autocomplete="off" aria-label="Search" aria-describedby="search"/>`),Ci=X(`<button class="button is-ghost is-small hb-searchbar-clear svelte-1r9sxfz" type="button" aria-label="Clear search"><i class="bi bi-x-lg svelte-1r9sxfz" aria-hidden="true"></i></button>`),wi=X(`<button type="button" class="hb-searchbar-row svelte-1r9sxfz"> </button>`),Ti=X(`<p class="hb-searchbar-section-label svelte-1r9sxfz">Suggested results</p> <!>`,1),Ei=X(`<div><div><div><div class="hb-searchbar-input-glass svelte-1r9sxfz" part="search-input-glass" aria-hidden="true"></div> <!> <div class="hb-searchbar-trailing-actions svelte-1r9sxfz"><!> <button type="button" class="hb-searchbar-search-trigger svelte-1r9sxfz" part="search-submit" aria-label="Search"><i class="bi bi-search svelte-1r9sxfz" aria-hidden="true"></i></button></div></div></div> <div><div class="dropdown-menu svelte-1r9sxfz" part="dropdown-menu" id="custom-search-list"><div class="dropdown-content hb-searchbar-dropdown-content svelte-1r9sxfz"><!> <!></div></div></div></div>`),Di={hash:`svelte-1r9sxfz`,code:`@charset "UTF-8";
|
|
364
364
|
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
|
|
365
365
|
/*!
|
|
366
366
|
* Bulma 1.x (Sass) for hb-searchbar — form input/textarea, dropdown, button, badge.
|
|
@@ -374,15 +374,7 @@
|
|
|
374
374
|
*/ .input.svelte-1r9sxfz {box-shadow:inset 0 0.0625em 0.125em hsla(var(--bulma-scheme-h, var(--bulma-hb-def-scheme-h)), var(--bulma-scheme-s, var(--bulma-hb-def-scheme-s)), var(--bulma-scheme-invert-l, var(--bulma-hb-def-scheme-invert-l)), 0.05);max-width:100%;width:100%;}
|
|
375
375
|
/*!
|
|
376
376
|
* Bulma 1.x (Sass) for hb-searchbar — form input/textarea, dropdown, button, badge.
|
|
377
|
-
*/:host {--bulma-hb-def-label-color: var(--bulma-text-strong, var(--bulma-hb-def-text-strong));--bulma-hb-def-label-spacing: 0.5em;--bulma-hb-def-label-weight: var(--bulma-weight-semibold, var(--bulma-hb-def-weight-semibold));--bulma-hb-def-help-size: var(--bulma-size-small, var(--bulma-hb-def-size-small));--bulma-hb-def-field-block-spacing: 0.75rem;}.field.svelte-1r9sxfz {--bulma-hb-def-block-spacing: var(--bulma-field-block-spacing, var(--bulma-hb-def-field-block-spacing));}
|
|
378
|
-
.field.has-addons.svelte-1r9sxfz .control:where(.svelte-1r9sxfz):not(:first-child):not(:last-child) .input:where(.svelte-1r9sxfz) {border-radius:0;}.field.has-addons.svelte-1r9sxfz .control:where(.svelte-1r9sxfz):first-child:not(:only-child) .button:where(.svelte-1r9sxfz),
|
|
379
|
-
.field.has-addons.svelte-1r9sxfz .control:where(.svelte-1r9sxfz):first-child:not(:only-child) .input:where(.svelte-1r9sxfz) {border-start-end-radius:0;border-end-end-radius:0;}.field.has-addons.svelte-1r9sxfz .control:where(.svelte-1r9sxfz):last-child:not(:only-child) .button:where(.svelte-1r9sxfz),
|
|
380
|
-
.field.has-addons.svelte-1r9sxfz .control:where(.svelte-1r9sxfz):last-child:not(:only-child) .input:where(.svelte-1r9sxfz) {border-start-start-radius:0;border-end-start-radius:0;}.field.has-addons.svelte-1r9sxfz .control:where(.svelte-1r9sxfz) .button:where(.svelte-1r9sxfz):not([disabled]):hover,
|
|
381
|
-
.field.has-addons.svelte-1r9sxfz .control:where(.svelte-1r9sxfz) .input:where(.svelte-1r9sxfz):not([disabled]):hover {z-index:2;}.field.has-addons.svelte-1r9sxfz .control:where(.svelte-1r9sxfz) .button:where(.svelte-1r9sxfz):not([disabled]):focus, .field.has-addons.svelte-1r9sxfz .control:where(.svelte-1r9sxfz) .button:where(.svelte-1r9sxfz):not([disabled]):active,
|
|
382
|
-
.field.has-addons.svelte-1r9sxfz .control:where(.svelte-1r9sxfz) .input:where(.svelte-1r9sxfz):not([disabled]):focus,
|
|
383
|
-
.field.has-addons.svelte-1r9sxfz .control:where(.svelte-1r9sxfz) .input:where(.svelte-1r9sxfz):not([disabled]):active {z-index:3;}.field.has-addons.svelte-1r9sxfz .control:where(.svelte-1r9sxfz) .button:where(.svelte-1r9sxfz):not([disabled]):focus:hover, .field.has-addons.svelte-1r9sxfz .control:where(.svelte-1r9sxfz) .button:where(.svelte-1r9sxfz):not([disabled]):active:hover,
|
|
384
|
-
.field.has-addons.svelte-1r9sxfz .control:where(.svelte-1r9sxfz) .input:where(.svelte-1r9sxfz):not([disabled]):focus:hover,
|
|
385
|
-
.field.has-addons.svelte-1r9sxfz .control:where(.svelte-1r9sxfz) .input:where(.svelte-1r9sxfz):not([disabled]):active:hover {z-index:4;}.field.has-addons.svelte-1r9sxfz .control.is-expanded:where(.svelte-1r9sxfz) {flex-grow:1;flex-shrink:1;}
|
|
377
|
+
*/:host {--bulma-hb-def-label-color: var(--bulma-text-strong, var(--bulma-hb-def-text-strong));--bulma-hb-def-label-spacing: 0.5em;--bulma-hb-def-label-weight: var(--bulma-weight-semibold, var(--bulma-hb-def-weight-semibold));--bulma-hb-def-help-size: var(--bulma-size-small, var(--bulma-hb-def-size-small));--bulma-hb-def-field-block-spacing: 0.75rem;}.field.svelte-1r9sxfz {--bulma-hb-def-block-spacing: var(--bulma-field-block-spacing, var(--bulma-hb-def-field-block-spacing));}
|
|
386
378
|
@media screen and (min-width: 769px), print {
|
|
387
379
|
}
|
|
388
380
|
@media screen and (max-width: 768px) {
|
|
@@ -390,7 +382,7 @@
|
|
|
390
382
|
@media screen and (min-width: 769px), print {
|
|
391
383
|
}
|
|
392
384
|
@media screen and (min-width: 769px), print {
|
|
393
|
-
}.control.svelte-1r9sxfz {box-sizing:border-box;clear:both;font-size:var(--bulma-size-normal, var(--bulma-hb-def-size-normal));position:relative;text-align:inherit;}.control.has-icons-left.svelte-1r9sxfz .input:where(.svelte-1r9sxfz):hover ~ .icon:where(.svelte-1r9sxfz), .control.has-icons-right.svelte-1r9sxfz .input:where(.svelte-1r9sxfz):hover ~ .icon:where(.svelte-1r9sxfz) {color:var(--bulma-input-icon-hover-color, var(--bulma-hb-def-input-icon-hover-color));}.control.has-icons-left.svelte-1r9sxfz .input:where(.svelte-1r9sxfz):focus ~ .icon:where(.svelte-1r9sxfz), .control.has-icons-right.svelte-1r9sxfz .input:where(.svelte-1r9sxfz):focus ~ .icon:where(.svelte-1r9sxfz) {color:var(--bulma-input-icon-focus-color, var(--bulma-hb-def-input-icon-focus-color));}.control.has-icons-left.svelte-1r9sxfz .icon:where(.svelte-1r9sxfz), .control.has-icons-right.svelte-1r9sxfz .icon:where(.svelte-1r9sxfz) {color:var(--bulma-input-icon-color, var(--bulma-hb-def-input-icon-color));height:var(--bulma-input-height, var(--bulma-hb-def-input-height));pointer-events:none;position:absolute;top:0;width:var(--bulma-input-height, var(--bulma-hb-def-input-height));z-index:4;}.control.has-icons-left.svelte-1r9sxfz .input:where(.svelte-1r9sxfz) {padding-left:var(--bulma-input-height, var(--bulma-hb-def-input-height));}.control.has-icons-left.svelte-1r9sxfz .icon.is-left:where(.svelte-1r9sxfz) {left:0;}.control.has-icons-right.svelte-1r9sxfz .input:where(.svelte-1r9sxfz) {padding-right:var(--bulma-input-height, var(--bulma-hb-def-input-height));}.control.has-icons-right.svelte-1r9sxfz .icon.is-right:where(.svelte-1r9sxfz) {right:0;}.dropdown.svelte-1r9sxfz {--bulma-hb-def-dropdown-menu-min-width: 12rem;--bulma-hb-def-dropdown-content-background-color: var(--bulma-scheme-main, var(--bulma-hb-def-scheme-main));--bulma-hb-def-dropdown-content-offset: 0.25rem;--bulma-hb-def-dropdown-content-padding-bottom: 0.5rem;--bulma-hb-def-dropdown-content-padding-top: 0.5rem;--bulma-hb-def-dropdown-content-radius: var(--bulma-radius, var(--bulma-hb-def-radius));--bulma-hb-def-dropdown-content-shadow: var(--bulma-shadow, var(--bulma-hb-def-shadow));--bulma-hb-def-dropdown-content-z: 20;--bulma-hb-def-dropdown-item-h: var(--bulma-scheme-h, var(--bulma-hb-def-scheme-h));--bulma-hb-def-dropdown-item-s: var(--bulma-scheme-s, var(--bulma-hb-def-scheme-s));--bulma-hb-def-dropdown-item-l: var(--bulma-scheme-main-l, var(--bulma-hb-def-scheme-main-l));--bulma-hb-def-dropdown-item-background-l: var(--bulma-scheme-main-l, var(--bulma-hb-def-scheme-main-l));--bulma-hb-def-dropdown-item-background-l-delta: 0%;--bulma-hb-def-dropdown-item-hover-background-l-delta: var(--bulma-hover-background-l-delta, var(--bulma-hb-def-hover-background-l-delta));--bulma-hb-def-dropdown-item-active-background-l-delta: var(--bulma-active-background-l-delta, var(--bulma-hb-def-active-background-l-delta));--bulma-hb-def-dropdown-item-color-l: var(--bulma-text-strong-l, var(--bulma-hb-def-text-strong-l));--bulma-hb-def-dropdown-item-selected-h: var(--bulma-link-h, var(--bulma-hb-def-link-h));--bulma-hb-def-dropdown-item-selected-s: var(--bulma-link-s, var(--bulma-hb-def-link-s));--bulma-hb-def-dropdown-item-selected-l: var(--bulma-link-l, var(--bulma-hb-def-link-l));--bulma-hb-def-dropdown-item-selected-background-l: var(--bulma-link-l, var(--bulma-hb-def-link-l));--bulma-hb-def-dropdown-item-selected-color-l: var(--bulma-link-invert-l, var(--bulma-hb-def-link-invert-l));--bulma-hb-def-dropdown-divider-background-color: var(--bulma-border-weak, var(--bulma-hb-def-border-weak));}.dropdown.svelte-1r9sxfz {display:inline-flex;position:relative;vertical-align:top;}.dropdown.is-active.svelte-1r9sxfz .dropdown-menu:where(.svelte-1r9sxfz) {display:block;}.dropdown-menu.svelte-1r9sxfz {display:none;left:0;min-width:var(--bulma-dropdown-menu-min-width, var(--bulma-hb-def-dropdown-menu-min-width));padding-top:var(--bulma-dropdown-content-offset, var(--bulma-hb-def-dropdown-content-offset));position:absolute;top:100%;z-index:var(--bulma-dropdown-content-z, var(--bulma-hb-def-dropdown-content-z));}.dropdown-content.svelte-1r9sxfz {background-color:var(--bulma-dropdown-content-background-color, var(--bulma-hb-def-dropdown-content-background-color));border-radius:var(--bulma-dropdown-content-radius, var(--bulma-hb-def-dropdown-content-radius));box-shadow:var(--bulma-dropdown-content-shadow, var(--bulma-hb-def-dropdown-content-shadow));padding-bottom:var(--bulma-dropdown-content-padding-bottom, var(--bulma-hb-def-dropdown-content-padding-bottom));padding-top:var(--bulma-dropdown-content-padding-top, var(--bulma-hb-def-dropdown-content-padding-top));}.button.svelte-1r9sxfz {--bulma-hb-def-button-family: false;--bulma-hb-def-button-weight: var(--bulma-weight-medium, var(--bulma-hb-def-weight-medium));--bulma-hb-def-button-border-color: var(--bulma-border, var(--bulma-hb-def-border));--bulma-hb-def-button-border-style: solid;--bulma-hb-def-button-border-width: var(--bulma-control-border-width, var(--bulma-hb-def-control-border-width));--bulma-hb-def-button-padding-vertical: 0.5em;--bulma-hb-def-button-padding-horizontal: 1em;--bulma-hb-def-button-focus-border-color: var(--bulma-link-focus-border, var(--bulma-hb-def-link-focus-border));--bulma-hb-def-button-focus-box-shadow-size: 0 0 0 0.125em;--bulma-hb-def-button-focus-box-shadow-color: hsla(var(--bulma-link-h, var(--bulma-hb-def-link-h)), var(--bulma-link-s, var(--bulma-hb-def-link-s)), var(--bulma-link-on-scheme-l, var(--bulma-hb-def-link-on-scheme-l)), 0.25);--bulma-hb-def-button-active-color: var(--bulma-link-active, var(--bulma-hb-def-link-active));--bulma-hb-def-button-active-border-color: var(--bulma-link-active-border, var(--bulma-hb-def-link-active-border));--bulma-hb-def-button-text-color: var(--bulma-text, var(--bulma-hb-def-text));--bulma-hb-def-button-text-decoration: underline;--bulma-hb-def-button-text-hover-background-color: var(--bulma-background, var(--bulma-hb-def-background));--bulma-hb-def-button-text-hover-color: var(--bulma-text-strong, var(--bulma-hb-def-text-strong));--bulma-hb-def-button-ghost-background: none;--bulma-hb-def-button-ghost-border-color: transparent;--bulma-hb-def-button-ghost-color: var(--bulma-link-text, var(--bulma-hb-def-link-text));--bulma-hb-def-button-ghost-decoration: none;--bulma-hb-def-button-ghost-hover-color: var(--bulma-link, var(--bulma-hb-def-link));--bulma-hb-def-button-ghost-hover-decoration: underline;--bulma-hb-def-button-disabled-background-color: var(--bulma-scheme-main, var(--bulma-hb-def-scheme-main));--bulma-hb-def-button-disabled-border-color: var(--bulma-border, var(--bulma-hb-def-border));--bulma-hb-def-button-disabled-shadow: none;--bulma-hb-def-button-disabled-opacity: 0.5;--bulma-hb-def-button-static-color: var(--bulma-text-weak, var(--bulma-hb-def-text-weak));--bulma-hb-def-button-static-background-color: var(--bulma-scheme-main-ter, var(--bulma-hb-def-scheme-main-ter));--bulma-hb-def-button-static-border-color: var(--bulma-border, var(--bulma-hb-def-border));}.button.svelte-1r9sxfz {--bulma-hb-def-button-h: var(--bulma-scheme-h, var(--bulma-hb-def-scheme-h));--bulma-hb-def-button-s: var(--bulma-scheme-s, var(--bulma-hb-def-scheme-s));--bulma-hb-def-button-l: var(--bulma-scheme-main-l, var(--bulma-hb-def-scheme-main-l));--bulma-hb-def-button-background-l: var(--bulma-scheme-main-l, var(--bulma-hb-def-scheme-main-l));--bulma-hb-def-button-background-l-delta: 0%;--bulma-hb-def-button-hover-background-l-delta: var(--bulma-hover-background-l-delta, var(--bulma-hb-def-hover-background-l-delta));--bulma-hb-def-button-active-background-l-delta: var(--bulma-active-background-l-delta, var(--bulma-hb-def-active-background-l-delta));--bulma-hb-def-button-color-l: var(--bulma-text-strong-l, var(--bulma-hb-def-text-strong-l));--bulma-hb-def-button-border-l: var(--bulma-border-l, var(--bulma-hb-def-border-l));--bulma-hb-def-button-border-l-delta: 0%;--bulma-hb-def-button-hover-border-l-delta: var(--bulma-hover-border-l-delta, var(--bulma-hb-def-hover-border-l-delta));--bulma-hb-def-button-active-border-l-delta: var(--bulma-active-border-l-delta, var(--bulma-hb-def-active-border-l-delta));--bulma-hb-def-button-focus-border-l-delta: var(--bulma-focus-border-l-delta, var(--bulma-hb-def-focus-border-l-delta));--bulma-hb-def-button-outer-shadow-h: 0;--bulma-hb-def-button-outer-shadow-s: 0%;--bulma-hb-def-button-outer-shadow-l: 20%;--bulma-hb-def-button-outer-shadow-a: 0.05;--bulma-hb-def-loading-color: hsl(var(--bulma-button-h, var(--bulma-hb-def-button-h)), var(--bulma-button-s, var(--bulma-hb-def-button-s)), var(--bulma-button-color-l, var(--bulma-hb-def-button-color-l)));background-color:hsl(var(--bulma-button-h, var(--bulma-hb-def-button-h)), var(--bulma-button-s, var(--bulma-hb-def-button-s)), calc(var(--bulma-button-background-l, var(--bulma-hb-def-button-background-l)) + var(--bulma-button-background-l-delta, var(--bulma-hb-def-button-background-l-delta))));border-color:hsl(var(--bulma-button-h, var(--bulma-hb-def-button-h)), var(--bulma-button-s, var(--bulma-hb-def-button-s)), calc(var(--bulma-button-border-l, var(--bulma-hb-def-button-border-l)) + var(--bulma-button-border-l-delta, var(--bulma-hb-def-button-border-l-delta))));border-style:var(--bulma-button-border-style, var(--bulma-hb-def-button-border-style));border-width:var(--bulma-button-border-width, var(--bulma-hb-def-button-border-width));box-shadow:0px 0.0625em 0.125em hsla(var(--bulma-button-outer-shadow-h, var(--bulma-hb-def-button-outer-shadow-h)), var(--bulma-button-outer-shadow-s, var(--bulma-hb-def-button-outer-shadow-s)), var(--bulma-button-outer-shadow-l, var(--bulma-hb-def-button-outer-shadow-l)), var(--bulma-button-outer-shadow-a, var(--bulma-hb-def-button-outer-shadow-a))), 0px 0.125em 0.25em hsla(var(--bulma-button-outer-shadow-h, var(--bulma-hb-def-button-outer-shadow-h)), var(--bulma-button-outer-shadow-s, var(--bulma-hb-def-button-outer-shadow-s)), var(--bulma-button-outer-shadow-l, var(--bulma-hb-def-button-outer-shadow-l)), var(--bulma-button-outer-shadow-a, var(--bulma-hb-def-button-outer-shadow-a)));color:hsl(var(--bulma-button-h, var(--bulma-hb-def-button-h)), var(--bulma-button-s, var(--bulma-hb-def-button-s)), var(--bulma-button-color-l, var(--bulma-hb-def-button-color-l)));cursor:pointer;font-weight:var(--bulma-button-weight, var(--bulma-hb-def-button-weight));height:auto;justify-content:center;padding-bottom:calc(var(--bulma-button-padding-vertical, var(--bulma-hb-def-button-padding-vertical)) - var(--bulma-button-border-width, var(--bulma-hb-def-button-border-width)));padding-left:calc(var(--bulma-button-padding-horizontal, var(--bulma-hb-def-button-padding-horizontal)) - var(--bulma-button-border-width, var(--bulma-hb-def-button-border-width)));padding-right:calc(var(--bulma-button-padding-horizontal, var(--bulma-hb-def-button-padding-horizontal)) - var(--bulma-button-border-width, var(--bulma-hb-def-button-border-width)));padding-top:calc(var(--bulma-button-padding-vertical, var(--bulma-hb-def-button-padding-vertical)) - var(--bulma-button-border-width, var(--bulma-hb-def-button-border-width)));text-align:center;white-space:nowrap;}.button.svelte-1r9sxfz .icon:where(.svelte-1r9sxfz), .button.svelte-1r9sxfz .icon.is-small:where(.svelte-1r9sxfz) {height:1.5em;width:1.5em;}.button.svelte-1r9sxfz .icon:where(.svelte-1r9sxfz):first-child:not(:last-child) {margin-inline-start:calc(-0.5 * var(--bulma-button-padding-horizontal, var(--bulma-hb-def-button-padding-horizontal)));margin-inline-end:calc(var(--bulma-button-padding-horizontal, var(--bulma-hb-def-button-padding-horizontal)) * 0.25);}.button.svelte-1r9sxfz .icon:where(.svelte-1r9sxfz):last-child:not(:first-child) {margin-inline-start:calc(var(--bulma-button-padding-horizontal, var(--bulma-hb-def-button-padding-horizontal)) * 0.25);margin-inline-end:calc(-0.5 * var(--bulma-button-padding-horizontal, var(--bulma-hb-def-button-padding-horizontal)));}.button.svelte-1r9sxfz .icon:where(.svelte-1r9sxfz):first-child:last-child {margin-inline-start:calc(-0.5 * var(--bulma-button-padding-horizontal, var(--bulma-hb-def-button-padding-horizontal)));margin-inline-end:calc(-0.5 * var(--bulma-button-padding-horizontal, var(--bulma-hb-def-button-padding-horizontal)));}.button.svelte-1r9sxfz:hover {--bulma-hb-def-button-background-l-delta: var(--bulma-button-hover-background-l-delta, var(--bulma-hb-def-button-hover-background-l-delta));--bulma-hb-def-button-border-l-delta: var(--bulma-button-hover-border-l-delta, var(--bulma-hb-def-button-hover-border-l-delta));}.button.svelte-1r9sxfz:focus-visible {--bulma-hb-def-button-border-width: 1px;border-color:hsl(var(--bulma-focus-h, var(--bulma-hb-def-focus-h)), var(--bulma-focus-s, var(--bulma-hb-def-focus-s)), var(--bulma-focus-l, var(--bulma-hb-def-focus-l)));box-shadow:var(--bulma-focus-shadow-size, var(--bulma-hb-def-focus-shadow-size)) hsla(var(--bulma-focus-h, var(--bulma-hb-def-focus-h)), var(--bulma-focus-s, var(--bulma-hb-def-focus-s)), var(--bulma-focus-l, var(--bulma-hb-def-focus-l)), var(--bulma-focus-shadow-alpha, var(--bulma-hb-def-focus-shadow-alpha)));}.button.svelte-1r9sxfz:active {--bulma-hb-def-button-background-l-delta: var(--bulma-button-active-background-l-delta, var(--bulma-hb-def-button-active-background-l-delta));--bulma-hb-def-button-border-l-delta: var(--bulma-button-active-border-l-delta, var(--bulma-hb-def-button-active-border-l-delta));--bulma-hb-def-button-outer-shadow-a: 0;}.button.is-primary.svelte-1r9sxfz {--bulma-hb-def-button-h: var(--bulma-primary-h, var(--bulma-hb-def-primary-h));--bulma-hb-def-button-s: var(--bulma-primary-s, var(--bulma-hb-def-primary-s));--bulma-hb-def-button-l: var(--bulma-primary-l, var(--bulma-hb-def-primary-l));--bulma-hb-def-button-background-l: var(--bulma-primary-l, var(--bulma-hb-def-primary-l));--bulma-hb-def-button-border-l: var(--bulma-primary-l, var(--bulma-hb-def-primary-l));--bulma-hb-def-button-border-width: 0px;--bulma-hb-def-button-color-l: var(--bulma-primary-invert-l, var(--bulma-hb-def-primary-invert-l));--bulma-hb-def-button-outer-shadow-a: 0;}.button.is-primary.svelte-1r9sxfz:focus-visible {--bulma-hb-def-button-border-width: 1px;}.button.is-ghost.svelte-1r9sxfz {background:var(--bulma-button-ghost-background, var(--bulma-hb-def-button-ghost-background));border-color:var(--bulma-button-ghost-border-color, var(--bulma-hb-def-button-ghost-border-color));box-shadow:none;color:var(--bulma-button-ghost-color, var(--bulma-hb-def-button-ghost-color));text-decoration:var(--bulma-button-ghost-decoration, var(--bulma-hb-def-button-ghost-decoration));}.button.is-ghost.svelte-1r9sxfz:hover {color:var(--bulma-button-ghost-hover-color, var(--bulma-hb-def-button-ghost-hover-color));text-decoration:var(--bulma-button-ghost-hover-decoration, var(--bulma-hb-def-button-ghost-hover-decoration));}.button.is-small.svelte-1r9sxfz {--bulma-hb-def-control-size: var(--bulma-size-small, var(--bulma-hb-def-size-small));--bulma-hb-def-control-radius: var(--bulma-radius-small, var(--bulma-hb-def-radius-small));}
|
|
385
|
+
}.control.svelte-1r9sxfz {box-sizing:border-box;clear:both;font-size:var(--bulma-size-normal, var(--bulma-hb-def-size-normal));position:relative;text-align:inherit;}.dropdown.svelte-1r9sxfz {--bulma-hb-def-dropdown-menu-min-width: 12rem;--bulma-hb-def-dropdown-content-background-color: var(--bulma-scheme-main, var(--bulma-hb-def-scheme-main));--bulma-hb-def-dropdown-content-offset: 0.25rem;--bulma-hb-def-dropdown-content-padding-bottom: 0.5rem;--bulma-hb-def-dropdown-content-padding-top: 0.5rem;--bulma-hb-def-dropdown-content-radius: var(--bulma-radius, var(--bulma-hb-def-radius));--bulma-hb-def-dropdown-content-shadow: var(--bulma-shadow, var(--bulma-hb-def-shadow));--bulma-hb-def-dropdown-content-z: 20;--bulma-hb-def-dropdown-item-h: var(--bulma-scheme-h, var(--bulma-hb-def-scheme-h));--bulma-hb-def-dropdown-item-s: var(--bulma-scheme-s, var(--bulma-hb-def-scheme-s));--bulma-hb-def-dropdown-item-l: var(--bulma-scheme-main-l, var(--bulma-hb-def-scheme-main-l));--bulma-hb-def-dropdown-item-background-l: var(--bulma-scheme-main-l, var(--bulma-hb-def-scheme-main-l));--bulma-hb-def-dropdown-item-background-l-delta: 0%;--bulma-hb-def-dropdown-item-hover-background-l-delta: var(--bulma-hover-background-l-delta, var(--bulma-hb-def-hover-background-l-delta));--bulma-hb-def-dropdown-item-active-background-l-delta: var(--bulma-active-background-l-delta, var(--bulma-hb-def-active-background-l-delta));--bulma-hb-def-dropdown-item-color-l: var(--bulma-text-strong-l, var(--bulma-hb-def-text-strong-l));--bulma-hb-def-dropdown-item-selected-h: var(--bulma-link-h, var(--bulma-hb-def-link-h));--bulma-hb-def-dropdown-item-selected-s: var(--bulma-link-s, var(--bulma-hb-def-link-s));--bulma-hb-def-dropdown-item-selected-l: var(--bulma-link-l, var(--bulma-hb-def-link-l));--bulma-hb-def-dropdown-item-selected-background-l: var(--bulma-link-l, var(--bulma-hb-def-link-l));--bulma-hb-def-dropdown-item-selected-color-l: var(--bulma-link-invert-l, var(--bulma-hb-def-link-invert-l));--bulma-hb-def-dropdown-divider-background-color: var(--bulma-border-weak, var(--bulma-hb-def-border-weak));}.dropdown.svelte-1r9sxfz {display:inline-flex;position:relative;vertical-align:top;}.dropdown.is-active.svelte-1r9sxfz .dropdown-menu:where(.svelte-1r9sxfz) {display:block;}.dropdown-menu.svelte-1r9sxfz {display:none;left:0;min-width:var(--bulma-dropdown-menu-min-width, var(--bulma-hb-def-dropdown-menu-min-width));padding-top:var(--bulma-dropdown-content-offset, var(--bulma-hb-def-dropdown-content-offset));position:absolute;top:100%;z-index:var(--bulma-dropdown-content-z, var(--bulma-hb-def-dropdown-content-z));}.dropdown-content.svelte-1r9sxfz {background-color:var(--bulma-dropdown-content-background-color, var(--bulma-hb-def-dropdown-content-background-color));border-radius:var(--bulma-dropdown-content-radius, var(--bulma-hb-def-dropdown-content-radius));box-shadow:var(--bulma-dropdown-content-shadow, var(--bulma-hb-def-dropdown-content-shadow));padding-bottom:var(--bulma-dropdown-content-padding-bottom, var(--bulma-hb-def-dropdown-content-padding-bottom));padding-top:var(--bulma-dropdown-content-padding-top, var(--bulma-hb-def-dropdown-content-padding-top));}.button.svelte-1r9sxfz {--bulma-hb-def-button-family: false;--bulma-hb-def-button-weight: var(--bulma-weight-medium, var(--bulma-hb-def-weight-medium));--bulma-hb-def-button-border-color: var(--bulma-border, var(--bulma-hb-def-border));--bulma-hb-def-button-border-style: solid;--bulma-hb-def-button-border-width: var(--bulma-control-border-width, var(--bulma-hb-def-control-border-width));--bulma-hb-def-button-padding-vertical: 0.5em;--bulma-hb-def-button-padding-horizontal: 1em;--bulma-hb-def-button-focus-border-color: var(--bulma-link-focus-border, var(--bulma-hb-def-link-focus-border));--bulma-hb-def-button-focus-box-shadow-size: 0 0 0 0.125em;--bulma-hb-def-button-focus-box-shadow-color: hsla(var(--bulma-link-h, var(--bulma-hb-def-link-h)), var(--bulma-link-s, var(--bulma-hb-def-link-s)), var(--bulma-link-on-scheme-l, var(--bulma-hb-def-link-on-scheme-l)), 0.25);--bulma-hb-def-button-active-color: var(--bulma-link-active, var(--bulma-hb-def-link-active));--bulma-hb-def-button-active-border-color: var(--bulma-link-active-border, var(--bulma-hb-def-link-active-border));--bulma-hb-def-button-text-color: var(--bulma-text, var(--bulma-hb-def-text));--bulma-hb-def-button-text-decoration: underline;--bulma-hb-def-button-text-hover-background-color: var(--bulma-background, var(--bulma-hb-def-background));--bulma-hb-def-button-text-hover-color: var(--bulma-text-strong, var(--bulma-hb-def-text-strong));--bulma-hb-def-button-ghost-background: none;--bulma-hb-def-button-ghost-border-color: transparent;--bulma-hb-def-button-ghost-color: var(--bulma-link-text, var(--bulma-hb-def-link-text));--bulma-hb-def-button-ghost-decoration: none;--bulma-hb-def-button-ghost-hover-color: var(--bulma-link, var(--bulma-hb-def-link));--bulma-hb-def-button-ghost-hover-decoration: underline;--bulma-hb-def-button-disabled-background-color: var(--bulma-scheme-main, var(--bulma-hb-def-scheme-main));--bulma-hb-def-button-disabled-border-color: var(--bulma-border, var(--bulma-hb-def-border));--bulma-hb-def-button-disabled-shadow: none;--bulma-hb-def-button-disabled-opacity: 0.5;--bulma-hb-def-button-static-color: var(--bulma-text-weak, var(--bulma-hb-def-text-weak));--bulma-hb-def-button-static-background-color: var(--bulma-scheme-main-ter, var(--bulma-hb-def-scheme-main-ter));--bulma-hb-def-button-static-border-color: var(--bulma-border, var(--bulma-hb-def-border));}.button.svelte-1r9sxfz {--bulma-hb-def-button-h: var(--bulma-scheme-h, var(--bulma-hb-def-scheme-h));--bulma-hb-def-button-s: var(--bulma-scheme-s, var(--bulma-hb-def-scheme-s));--bulma-hb-def-button-l: var(--bulma-scheme-main-l, var(--bulma-hb-def-scheme-main-l));--bulma-hb-def-button-background-l: var(--bulma-scheme-main-l, var(--bulma-hb-def-scheme-main-l));--bulma-hb-def-button-background-l-delta: 0%;--bulma-hb-def-button-hover-background-l-delta: var(--bulma-hover-background-l-delta, var(--bulma-hb-def-hover-background-l-delta));--bulma-hb-def-button-active-background-l-delta: var(--bulma-active-background-l-delta, var(--bulma-hb-def-active-background-l-delta));--bulma-hb-def-button-color-l: var(--bulma-text-strong-l, var(--bulma-hb-def-text-strong-l));--bulma-hb-def-button-border-l: var(--bulma-border-l, var(--bulma-hb-def-border-l));--bulma-hb-def-button-border-l-delta: 0%;--bulma-hb-def-button-hover-border-l-delta: var(--bulma-hover-border-l-delta, var(--bulma-hb-def-hover-border-l-delta));--bulma-hb-def-button-active-border-l-delta: var(--bulma-active-border-l-delta, var(--bulma-hb-def-active-border-l-delta));--bulma-hb-def-button-focus-border-l-delta: var(--bulma-focus-border-l-delta, var(--bulma-hb-def-focus-border-l-delta));--bulma-hb-def-button-outer-shadow-h: 0;--bulma-hb-def-button-outer-shadow-s: 0%;--bulma-hb-def-button-outer-shadow-l: 20%;--bulma-hb-def-button-outer-shadow-a: 0.05;--bulma-hb-def-loading-color: hsl(var(--bulma-button-h, var(--bulma-hb-def-button-h)), var(--bulma-button-s, var(--bulma-hb-def-button-s)), var(--bulma-button-color-l, var(--bulma-hb-def-button-color-l)));background-color:hsl(var(--bulma-button-h, var(--bulma-hb-def-button-h)), var(--bulma-button-s, var(--bulma-hb-def-button-s)), calc(var(--bulma-button-background-l, var(--bulma-hb-def-button-background-l)) + var(--bulma-button-background-l-delta, var(--bulma-hb-def-button-background-l-delta))));border-color:hsl(var(--bulma-button-h, var(--bulma-hb-def-button-h)), var(--bulma-button-s, var(--bulma-hb-def-button-s)), calc(var(--bulma-button-border-l, var(--bulma-hb-def-button-border-l)) + var(--bulma-button-border-l-delta, var(--bulma-hb-def-button-border-l-delta))));border-style:var(--bulma-button-border-style, var(--bulma-hb-def-button-border-style));border-width:var(--bulma-button-border-width, var(--bulma-hb-def-button-border-width));box-shadow:0px 0.0625em 0.125em hsla(var(--bulma-button-outer-shadow-h, var(--bulma-hb-def-button-outer-shadow-h)), var(--bulma-button-outer-shadow-s, var(--bulma-hb-def-button-outer-shadow-s)), var(--bulma-button-outer-shadow-l, var(--bulma-hb-def-button-outer-shadow-l)), var(--bulma-button-outer-shadow-a, var(--bulma-hb-def-button-outer-shadow-a))), 0px 0.125em 0.25em hsla(var(--bulma-button-outer-shadow-h, var(--bulma-hb-def-button-outer-shadow-h)), var(--bulma-button-outer-shadow-s, var(--bulma-hb-def-button-outer-shadow-s)), var(--bulma-button-outer-shadow-l, var(--bulma-hb-def-button-outer-shadow-l)), var(--bulma-button-outer-shadow-a, var(--bulma-hb-def-button-outer-shadow-a)));color:hsl(var(--bulma-button-h, var(--bulma-hb-def-button-h)), var(--bulma-button-s, var(--bulma-hb-def-button-s)), var(--bulma-button-color-l, var(--bulma-hb-def-button-color-l)));cursor:pointer;font-weight:var(--bulma-button-weight, var(--bulma-hb-def-button-weight));height:auto;justify-content:center;padding-bottom:calc(var(--bulma-button-padding-vertical, var(--bulma-hb-def-button-padding-vertical)) - var(--bulma-button-border-width, var(--bulma-hb-def-button-border-width)));padding-left:calc(var(--bulma-button-padding-horizontal, var(--bulma-hb-def-button-padding-horizontal)) - var(--bulma-button-border-width, var(--bulma-hb-def-button-border-width)));padding-right:calc(var(--bulma-button-padding-horizontal, var(--bulma-hb-def-button-padding-horizontal)) - var(--bulma-button-border-width, var(--bulma-hb-def-button-border-width)));padding-top:calc(var(--bulma-button-padding-vertical, var(--bulma-hb-def-button-padding-vertical)) - var(--bulma-button-border-width, var(--bulma-hb-def-button-border-width)));text-align:center;white-space:nowrap;}.button.svelte-1r9sxfz:hover {--bulma-hb-def-button-background-l-delta: var(--bulma-button-hover-background-l-delta, var(--bulma-hb-def-button-hover-background-l-delta));--bulma-hb-def-button-border-l-delta: var(--bulma-button-hover-border-l-delta, var(--bulma-hb-def-button-hover-border-l-delta));}.button.svelte-1r9sxfz:focus-visible {--bulma-hb-def-button-border-width: 1px;border-color:hsl(var(--bulma-focus-h, var(--bulma-hb-def-focus-h)), var(--bulma-focus-s, var(--bulma-hb-def-focus-s)), var(--bulma-focus-l, var(--bulma-hb-def-focus-l)));box-shadow:var(--bulma-focus-shadow-size, var(--bulma-hb-def-focus-shadow-size)) hsla(var(--bulma-focus-h, var(--bulma-hb-def-focus-h)), var(--bulma-focus-s, var(--bulma-hb-def-focus-s)), var(--bulma-focus-l, var(--bulma-hb-def-focus-l)), var(--bulma-focus-shadow-alpha, var(--bulma-hb-def-focus-shadow-alpha)));}.button.svelte-1r9sxfz:active {--bulma-hb-def-button-background-l-delta: var(--bulma-button-active-background-l-delta, var(--bulma-hb-def-button-active-background-l-delta));--bulma-hb-def-button-border-l-delta: var(--bulma-button-active-border-l-delta, var(--bulma-hb-def-button-active-border-l-delta));--bulma-hb-def-button-outer-shadow-a: 0;}.button.is-ghost.svelte-1r9sxfz {background:var(--bulma-button-ghost-background, var(--bulma-hb-def-button-ghost-background));border-color:var(--bulma-button-ghost-border-color, var(--bulma-hb-def-button-ghost-border-color));box-shadow:none;color:var(--bulma-button-ghost-color, var(--bulma-hb-def-button-ghost-color));text-decoration:var(--bulma-button-ghost-decoration, var(--bulma-hb-def-button-ghost-decoration));}.button.is-ghost.svelte-1r9sxfz:hover {color:var(--bulma-button-ghost-hover-color, var(--bulma-hb-def-button-ghost-hover-color));text-decoration:var(--bulma-button-ghost-hover-decoration, var(--bulma-hb-def-button-ghost-hover-decoration));}.button.is-small.svelte-1r9sxfz {--bulma-hb-def-control-size: var(--bulma-size-small, var(--bulma-hb-def-size-small));--bulma-hb-def-control-radius: var(--bulma-radius-small, var(--bulma-hb-def-radius-small));}
|
|
394
386
|
@media screen and (max-width: 768px) {
|
|
395
387
|
}
|
|
396
388
|
@media screen and (min-width: 769px) and (max-width: 1023px) {
|
|
@@ -637,14 +629,41 @@
|
|
|
637
629
|
.field.svelte-1r9sxfz .control:where(.svelte-1r9sxfz) {margin-block-end:0;margin-bottom:0;padding-block-end:0;}
|
|
638
630
|
/*!
|
|
639
631
|
* Dropdown list shell + section label (parent \`component.wc.svelte\` only).
|
|
640
|
-
*/.hb-searchbar-dropdown-content.svelte-1r9sxfz {padding-block:0.375rem;padding-inline:0.375rem;}.hb-searchbar-section-label.svelte-1r9sxfz {margin:0;padding-block:0.5rem 0.375rem;padding-inline:0.625rem 0.75rem;font-size:0.65rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--bulma-text-weak
|
|
632
|
+
*/.hb-searchbar-dropdown-content.svelte-1r9sxfz {padding-block:0.375rem;padding-inline:0.375rem;}.hb-searchbar-section-label.svelte-1r9sxfz {margin:0;padding-block:0.5rem 0.375rem;padding-inline:0.625rem 0.75rem;font-size:0.65rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--bulma-text-weak);border-block-end:1px solid var(--bulma-border-weak);}
|
|
641
633
|
/*!
|
|
642
634
|
* Single suggestion row (\`hb-searchbar-row\`). Loaded from parent + \`Item\` (Svelte scope).
|
|
643
|
-
*/.hb-searchbar-row.svelte-1r9sxfz {appearance:none;box-sizing:border-box;display:flex;align-items:flex-start;justify-content:flex-start;gap:0.5rem;width:100%;margin:0;padding-block:0.5625rem;padding-inline:0.625rem 0.75rem;border:none;border-radius:var(--bulma-radius-small
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
635
|
+
*/.hb-searchbar-row.svelte-1r9sxfz {appearance:none;box-sizing:border-box;display:flex;align-items:flex-start;justify-content:flex-start;gap:0.5rem;width:100%;margin:0;padding-block:0.5625rem;padding-inline:0.625rem 0.75rem;border:none;border-radius:var(--bulma-radius-small);box-shadow:none;background:transparent;font:inherit;font-size:0.875rem;line-height:1.4;text-align:start;color:var(--bulma-text);cursor:pointer;text-decoration:none;transition:background-color 0.12s ease, color 0.12s ease;}.hb-searchbar-row.svelte-1r9sxfz:hover {background-color:color-mix(in srgb, var(--bulma-primary, #00d1b2) 9%, var(--bulma-scheme-main) 91%);}.hb-searchbar-row.svelte-1r9sxfz:focus {outline:none;}.hb-searchbar-row.svelte-1r9sxfz:focus-visible {outline:2px solid var(--bulma-primary, #00d1b2);outline-offset:2px;}.hb-searchbar-row.svelte-1r9sxfz:active {background-color:color-mix(in srgb, var(--bulma-primary, #00d1b2) 14%, var(--bulma-scheme-main) 86%);}
|
|
636
|
+
/*
|
|
637
|
+
* Defaults live on the custom properties themselves — not \`var(--x, color-mix(...))\`.
|
|
638
|
+
* An empty or whitespace \`--hb-searchbar-host-*\` from outside would otherwise win and
|
|
639
|
+
* invalidate \`background-color\` (fallback in var() is only used when the token is unset).
|
|
640
|
+
*/:host {--hb-searchbar-host-background: color-mix(in srgb,
|
|
641
|
+
var(--bulma-background, #f5f5f5) 88%,
|
|
642
|
+
var(--bulma-border, #dbdbdb) 12%);--hb-searchbar-host-background-focus: color-mix(in srgb,
|
|
643
|
+
var(--bulma-primary, #00d1b2) 10%,
|
|
644
|
+
var(--bulma-background, #ffffff));display:block;width:100%;max-width:100%;border-bottom:1px solid var(--bulma-border-weak);background-color:var(--hb-searchbar-host-background);transition:background-color 0.2s ease;}:host:has(#custom-search-input:focus) {border-bottom-color:transparent;background-color:var(--hb-searchbar-host-background-focus);}.hb-searchbar-root.svelte-1r9sxfz,
|
|
645
|
+
.hb-searchbar-field.svelte-1r9sxfz,
|
|
646
|
+
.hb-searchbar-field.svelte-1r9sxfz > .control:where(.svelte-1r9sxfz) {background-color:transparent;}
|
|
647
|
+
/* Single outer silhouette for the blue glow (field + in-flow dropdown when open). */.hb-searchbar-root.svelte-1r9sxfz {border-radius:var(--bulma-radius);transition:box-shadow 0.18s ease;}
|
|
648
|
+
/* Focus glow uses theme primary (override with --bulma-primary on the host or ancestors). */.hb-searchbar-root.svelte-1r9sxfz:has(#custom-search-input:where(.svelte-1r9sxfz):focus) {--_hb-searchbar-glow: var(--bulma-primary, #00d1b2);box-shadow:0 0 0 1px color-mix(in srgb, var(--_hb-searchbar-glow) 55%, transparent), 0 0 12px 2px color-mix(in srgb, var(--_hb-searchbar-glow) 42%, transparent), 0 0 28px 4px color-mix(in srgb, var(--_hb-searchbar-glow) 28%, transparent), 0 0 48px 8px color-mix(in srgb, var(--_hb-searchbar-glow) 16%, transparent);}.hb-searchbar-field.svelte-1r9sxfz {box-shadow:none;border-radius:var(--bulma-radius);overflow:visible;}
|
|
649
|
+
/* Real node + always-on opacity: backdrop on pseudo/opacity:0 layers is often not composited. */.hb-searchbar-input-wrap.svelte-1r9sxfz {position:relative;border-radius:var(--bulma-radius);}
|
|
650
|
+
/* Darker than the dropdown panel; cleared while focused (glass + host focus show through). */.hb-searchbar-input-wrap.svelte-1r9sxfz:not(:has(#custom-search-input:focus)) {background-color:var(--hb-searchbar-input-strip-background, color-mix(in srgb, var(--bulma-background, #f5f5f5) 72%, var(--bulma-border, #dbdbdb) 28%));}
|
|
651
|
+
/* Invisible until focus so the host background fills the field area. */.hb-searchbar-input-glass.svelte-1r9sxfz {position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;transform:translateZ(0);background-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border:none;}.hb-searchbar-input-wrap.svelte-1r9sxfz:has(#custom-search-input:where(.svelte-1r9sxfz):focus) .hb-searchbar-input-glass:where(.svelte-1r9sxfz) {will-change:backdrop-filter;backdrop-filter:blur(var(--hb-searchbar-input-glass-blur, 24px)) saturate(var(--hb-searchbar-input-glass-saturate, 1.45));-webkit-backdrop-filter:blur(var(--hb-searchbar-input-glass-blur, 24px)) saturate(var(--hb-searchbar-input-glass-saturate, 1.45));background-color:color-mix(in srgb, color-mix(in srgb, var(--bulma-background) 70%, var(--bulma-border) 30%) 50%, transparent);box-shadow:inset 0 1px 0 color-mix(in srgb, var(--bulma-scheme-main) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--bulma-border-weak) 40%, transparent);}.hb-searchbar-input-wrap.svelte-1r9sxfz .input:where(.svelte-1r9sxfz),
|
|
652
|
+
.hb-searchbar-input-wrap.svelte-1r9sxfz textarea.input:where(.svelte-1r9sxfz) {padding-inline-end:2.75rem;}.hb-searchbar-input-wrap--with-clear.svelte-1r9sxfz .input:where(.svelte-1r9sxfz),
|
|
653
|
+
.hb-searchbar-input-wrap--with-clear.svelte-1r9sxfz textarea.input:where(.svelte-1r9sxfz) {padding-inline-end:5rem;}.hb-searchbar-trailing-actions.svelte-1r9sxfz {position:absolute;inset-inline-end:0.35rem;top:50%;transform:translateY(-50%);z-index:5;display:inline-flex;align-items:center;justify-content:flex-end;gap:0.125rem;pointer-events:none;}.hb-searchbar-trailing-actions.svelte-1r9sxfz .hb-searchbar-clear:where(.svelte-1r9sxfz),
|
|
654
|
+
.hb-searchbar-trailing-actions.svelte-1r9sxfz .hb-searchbar-search-trigger:where(.svelte-1r9sxfz) {pointer-events:auto;}.hb-searchbar-field--textarea.svelte-1r9sxfz .hb-searchbar-trailing-actions:where(.svelte-1r9sxfz) {top:0.5rem;transform:none;align-items:flex-start;}.hb-searchbar-field.svelte-1r9sxfz .control:where(.svelte-1r9sxfz) .input:where(.svelte-1r9sxfz),
|
|
655
|
+
.hb-searchbar-field.svelte-1r9sxfz .control:where(.svelte-1r9sxfz) textarea.input:where(.svelte-1r9sxfz) {position:relative;z-index:1;border:none !important;box-shadow:none !important;color:var(--bulma-text-strong, var(--bulma-text));transition:background-color 0.12s ease;}
|
|
656
|
+
/*
|
|
657
|
+
* Bulma’s .input/.textarea set background via hsl(); must beat that and stay off pure scheme-main.
|
|
658
|
+
* #custom-search-input is unique; !important covers hover/is-hovered variants.
|
|
659
|
+
*/#custom-search-input.svelte-1r9sxfz:not(:focus) {background-color:transparent !important;}.hb-searchbar-field.svelte-1r9sxfz .control:where(.svelte-1r9sxfz) .input:where(.svelte-1r9sxfz)::placeholder,
|
|
660
|
+
.hb-searchbar-field.svelte-1r9sxfz .control:where(.svelte-1r9sxfz) textarea.input:where(.svelte-1r9sxfz)::placeholder {color:var(--bulma-input-placeholder-color, var(--bulma-text-weak));opacity:1;}.hb-searchbar-field.svelte-1r9sxfz .control:where(.svelte-1r9sxfz):first-child .input:where(.svelte-1r9sxfz):focus,
|
|
661
|
+
.hb-searchbar-field.svelte-1r9sxfz .control:where(.svelte-1r9sxfz):first-child textarea.input:where(.svelte-1r9sxfz):focus,
|
|
662
|
+
#custom-search-input.svelte-1r9sxfz:focus {border:none !important;box-shadow:none !important;outline:none;z-index:3;
|
|
663
|
+
/* Reveals .hb-searchbar-input-glass (backdrop + tint). */background-color:transparent !important;}.hb-searchbar-field.svelte-1r9sxfz .control:where(.svelte-1r9sxfz):first-child .input:where(.svelte-1r9sxfz):focus-visible,
|
|
664
|
+
.hb-searchbar-field.svelte-1r9sxfz .control:where(.svelte-1r9sxfz):first-child textarea.input:where(.svelte-1r9sxfz):focus-visible {outline:2px solid var(--bulma-primary, #00d1b2);outline-offset:2px;}.hb-searchbar-search-trigger.svelte-1r9sxfz {display:inline-flex;align-items:center;justify-content:center;height:auto;min-height:unset;padding:0.35rem;border:none;box-shadow:none;background:transparent;color:var(--bulma-text-weak);cursor:pointer;border-radius:var(--bulma-radius-small);}.hb-searchbar-search-trigger.svelte-1r9sxfz .bi:where(.svelte-1r9sxfz) {font-size:1.35rem;line-height:1;}.hb-searchbar-search-trigger.svelte-1r9sxfz:hover {color:var(--bulma-primary, #00d1b2);background:color-mix(in srgb, var(--bulma-primary, #00d1b2) 8%, transparent);}.hb-searchbar-search-trigger.svelte-1r9sxfz:focus {outline:none;}.hb-searchbar-search-trigger.svelte-1r9sxfz:focus-visible {outline:2px solid var(--bulma-primary, #00d1b2);outline-offset:2px;z-index:6;}.hb-searchbar-root--open.svelte-1r9sxfz .hb-searchbar-field:where(.svelte-1r9sxfz) {box-shadow:none;border-end-start-radius:0;border-end-end-radius:0;}.hb-searchbar-root--open.svelte-1r9sxfz .hb-searchbar-field:where(.svelte-1r9sxfz) .control:where(.svelte-1r9sxfz):first-child .input:where(.svelte-1r9sxfz),
|
|
665
|
+
.hb-searchbar-root--open.svelte-1r9sxfz .hb-searchbar-field:where(.svelte-1r9sxfz) .control:where(.svelte-1r9sxfz):first-child textarea.input:where(.svelte-1r9sxfz) {border-end-start-radius:0;border-end-end-radius:0;}.hb-searchbar-root--open.svelte-1r9sxfz .hb-searchbar-input-wrap:where(.svelte-1r9sxfz):has(#custom-search-input:where(.svelte-1r9sxfz):focus) .hb-searchbar-input-glass:where(.svelte-1r9sxfz) {border-end-start-radius:0;border-end-end-radius:0;
|
|
666
|
+
/* No bottom edge on the glass so the panel meets the dropdown without a double neutral line. */box-shadow:inset 0 1px 0 color-mix(in srgb, var(--bulma-scheme-main) 55%, transparent);border:1px solid color-mix(in srgb, var(--bulma-border-weak) 40%, transparent);border-bottom:none;}textarea#custom-search-input.svelte-1r9sxfz {min-height:5rem;resize:vertical;}.hb-searchbar-trailing-actions.svelte-1r9sxfz .hb-searchbar-clear:where(.svelte-1r9sxfz) {height:auto;min-height:unset;padding:0.25rem;border:none;box-shadow:none;color:var(--bulma-text-weak);}.hb-searchbar-trailing-actions.svelte-1r9sxfz .hb-searchbar-clear:where(.svelte-1r9sxfz):hover {color:var(--bulma-danger);background:transparent;}.hb-searchbar-dropdown.svelte-1r9sxfz {position:absolute;inset-inline-start:0;top:100%;display:block;width:100%;z-index:var(--bulma-dropdown-content-z, 20);}
|
|
667
|
+
/* In-flow when open so the root wraps field + list (dropdown bottom border is on \`.dropdown-menu\`). */.hb-searchbar-root--open.svelte-1r9sxfz .hb-searchbar-dropdown:where(.svelte-1r9sxfz) {position:static;z-index:auto;}.hb-searchbar-root--open.svelte-1r9sxfz .hb-searchbar-dropdown.dropdown:where(.svelte-1r9sxfz) {display:block;width:100%;}.hb-searchbar-dropdown.svelte-1r9sxfz .dropdown-menu:where(.svelte-1r9sxfz) {min-width:100%;width:100%;padding-block-start:0;inset-inline-start:0;inset-inline-end:0;box-shadow:none;border:none;border-radius:0 0 var(--bulma-radius) var(--bulma-radius);
|
|
668
|
+
/* Muted vs pure scheme-main: less contrast with the input strip and host. */background-color:var(--hb-searchbar-dropdown-panel-background, color-mix(in srgb, var(--bulma-scheme-main, #ffffff) 40%, var(--bulma-background, #f5f5f5) 20%));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}.hb-searchbar-root--open.svelte-1r9sxfz .hb-searchbar-dropdown:where(.svelte-1r9sxfz) .dropdown-menu:where(.svelte-1r9sxfz) {position:static;top:auto;}.hb-searchbar-dropdown.svelte-1r9sxfz .dropdown-menu:where(.svelte-1r9sxfz) .dropdown-content:where(.svelte-1r9sxfz) {background-color:transparent;box-shadow:none;}.hb-searchbar-dropdown-content.svelte-1r9sxfz {margin:0;border-block-start-width:0;border-radius:0 0 var(--bulma-radius) var(--bulma-radius);max-height:12.5rem;overflow-y:auto;}#custom-search-list.svelte-1r9sxfz {position:static;}`};function Oi(e,t){Ve(t,!0),Vr(e,Di);let n=$(t,`id`,7,``),r=$(t,`style`,7),i=$(t,`value`,7,``),a=$(t,`input_info`,7),o=$(t,`searchlabel`,7,`Search`),s=$(t,`searchlist`,7),c=$(t,`minlength`,7,0),l=$(t,`disable_preview`,7,`no`),u=$(t,`textarea`,7),d=Ut(!1),f=jt(()=>s()?.filter?.(e=>e?.fixed||e?.text?.toLowerCase?.().includes?.(i()?.toLowerCase?.()))),p=jt(()=>l()!==`yes`&&l()!==`true`&&l()!==`on`&&i()?.length>Number(c())&&Y(d));vn(()=>{if(n()||n(``),s()||s([]),typeof s()==`string`)try{s(JSON.parse(s()))}catch(e){console.error(`error parsing searchlist`,e)}if(typeof a()==`string`)try{a(JSON.parse(a()))}catch(e){console.error(`error parsing input_info`,e)}console.log(i(),`value`)});async function m(e,t){if(!i())return;console.log(`searching`,e,i());let n;t?(n=s()?.find(e=>e.id===t),n&&b(`search`,{input:i(),by:e,item:n})):b(`search`,{input:i(),by:e}),e!==`input`&&P(d,!1)}let h=Ut(void 0);function g(e){P(d,!0),e.key!==`Enter`&&(console.log(`debouncing`,i()),Y(h)&&clearTimeout(Y(h)),P(h,setTimeout(()=>{i()&&i().length>Number(c())&&m(`input`)},500),!0))}function _(e){e&&e.preventDefault?.(),console.log(`clicked searching`),m(`button`)}function v(){i(``),b(`clear`,{id:n()}),P(d,!1)}function y(e){let n=t.$$host,r=typeof e.composedPath==`function`?e.composedPath():[];(r.length>0?r.includes(n):e.target instanceof Node&&n.contains(e.target))||Y(d)&&P(d,!1)}kr(()=>(console.log(`mounting searchbar`),window.addEventListener(`click`,y),()=>{console.log(`unmounting searchbar`),window.removeEventListener(`click`,y)}));function b(e,n){t.$$host.dispatchEvent(new CustomEvent(e,{detail:n}))}var x={get id(){return n()},set id(e=``){n(e),N()},get style(){return r()},set style(e){r(e),N()},get value(){return i()},set value(e=``){i(e),N()},get input_info(){return a()},set input_info(e){a(e),N()},get searchlabel(){return o()},set searchlabel(e=`Search`){o(e),N()},get searchlist(){return s()},set searchlist(e){s(e),N()},get minlength(){return c()},set minlength(e=0){c(e),N()},get disable_preview(){return l()},set disable_preview(e=`no`){l(e),N()},get textarea(){return u()},set textarea(e){u(e),N()}},S=Ei();Br(`1r9sxfz`,e=>{Z(e,bi())});let ee;var C=L(S);let te;var ne=L(C);let re;var ie=R(L(ne),2),ae=e=>{var t=xi();cn(t),z(()=>Yr(t,`placeholder`,o())),ur(`input`,t,g),lr(`keypress`,t,e=>{e.key===`Enter`&&(e.preventDefault(),m(`button`))}),$r(t,i),Z(e,t)},oe=e=>{var t=Si();Jr(t),z(()=>Yr(t,`placeholder`,o())),ur(`input`,t,g),lr(`keypress`,t,e=>{e.key===`Enter`&&(e.preventDefault(),m(`button`))}),lr(`search`,t,e=>{console.log(`SEEEEEEEEE`,e.target.value),e.target?.value===``&&(b(`clear`,{id:n()}),P(d,!1))}),$r(t,i),Z(e,t)};Q(ie,e=>{u()===`yes`||u()===`true`||u()===``?e(ae):e(oe,-1)});var se=R(ie,2),ce=L(se),le=e=>{var t=Ci();ur(`click`,t,v),Z(e,t)};Q(ce,e=>{i()&&(u()===`yes`||u()===`true`||u()===``)&&e(le)});var ue=R(ce,2);O(se),O(ne),O(C);var de=R(C,2);let fe;var pe=L(de),me=L(pe),he=L(me),ge=e=>{yi(e,{clicksearch:async(e,t)=>{t?(i(e),m(`searchlist`,t)):m(`button`)},get id(){return a().id},is_inpput:!0,get icon(){return a().icon},get badge(){return a().badge},get text(){return a().text},get input_search(){return i()},get url(){return a().url},get number_of_results(){return a().number_of_results}})},_e=e=>{var t=wi(),n=L(t);O(t),z(()=>xr(n,`... ${i()??``}`)),ur(`click`,t,()=>{m(`button`)}),Z(e,t)};Q(he,e=>{a()&&a().text===i()?e(ge):e(_e,-1)});var ve=R(he,2),ye=e=>{var t=Ti();Pr(R(nn(t),2),17,()=>Y(f),e=>e.id,(e,t)=>{yi(e,{clicksearch:async(e,t)=>{t?(i(e),m(`searchlist`,t)):m(`button`)},get id(){return Y(t).id},is_inpput:!1,get icon(){return Y(t).icon},get badge(){return Y(t).badge},get text(){return Y(t).text},get input_search(){return i()},get url(){return Y(t).url},get number_of_results(){return Y(t).number_of_results}})}),Z(e,t)};return Q(ve,e=>{Y(f)?.length&&e(ye)}),O(me),O(pe),O(de),O(S),z(()=>{ee=Wr(S,1,`hb-searchbar-root is-relative svelte-1r9sxfz`,null,ee,{"hb-searchbar-root--open":Y(p)}),te=Wr(C,1,`field mb-0 hb-searchbar-field svelte-1r9sxfz`,null,te,{"hb-searchbar-field--textarea":u()===`yes`||u()===`true`||u()===``}),re=Wr(ne,1,`control is-expanded hb-searchbar-input-wrap svelte-1r9sxfz`,null,re,{"hb-searchbar-input-wrap--with-clear":!!i()&&(u()===`yes`||u()===`true`||u()===``)}),fe=Wr(de,1,`dropdown hb-searchbar-dropdown svelte-1r9sxfz`,null,fe,{"is-active":Y(p)})}),ur(`click`,ue,_),Z(e,S),He(x)}dr([`input`,`click`]),customElements.define(`hb-searchbar`,si(Oi,{id:{},style:{},value:{},input_info:{},searchlabel:{},searchlist:{},minlength:{},disable_preview:{},textarea:{}},[],[],{mode:`open`})),e.Component=Oi})(this.searchbar=this.searchbar||{});
|
|
650
669
|
//# sourceMappingURL=main.iife.js.map
|